[Docs] Updated documentation with Expressive code/info for:

Bottom Navigation
Common Button
Docked Toolbar
Extended Floating Action Button
Floating Action Button
Floating Toolbar
Navigation Drawer

PiperOrigin-RevId: 799044938

docs/components/BottomNavigation.md

@@ -9,14 +9,20 @@ path: /catalog/bottom-navigation/
 
 # Bottom navigation (Navigation bar)
 
-**Note:** Bottom navigation has been renamed to navigation bar.
-
 [Navigation bar](https://m3.material.io/components/navigation-bar/overview) lets
 people switch between UI views on smaller devices.
 
-<img src="assets/bottomnav/navigationbar_hero.png" alt="Navigation bar with 4 icons.">
+**Note:** The design name of this component has been changed from **Bottom
+navigation** to **Navigation bar**. However, Material's Android implementation
+remains as `BottomNavigationView`.
+
+<img src="assets/bottomnav/bottomnav-hero.png" alt="Navigation bar with 4 icons.">
 Navigation bar on compact and medium window sizes
 
+Navigation bars can have three to five destinations. The nav bar is positioned
+at the bottom of screens for convenient access. Each destination is represented
+by an icon and label text.
+
 **Note:** Images use various dynamic color schemes.
 
 ## Design & API documentation
@@ -26,7 +32,7 @@ Navigation bar on compact and medium window sizes
 
 ## Anatomy
 
-![Navigation bar anatomy diagram](assets/bottomnav/navigationbar_anatomy.png)
+![Navigation bar anatomy diagram](assets/bottomnav/bottomnav-anatomy.png)
 
 1.  Container
 2.  Icon
@@ -39,7 +45,9 @@ Navigation bar on compact and medium window sizes
 More details on anatomy items in the
 [component guidelines](https://m3.material.io/components/navigation-bar/guidelines#895b5b49-a166-4d30-90be-c71a4c970f04).
 
-## M3 Expressive update
+## M3 Expressive
+
+### M3 Expressive update
 
 Before you can use `Material3Expressive` component styles, follow the
 [`Material3Expressive` themes setup instructions](https://github.com/material-components/material-components-android/tree/master/docs/getting-started.md#material3expressive-themes).
@@ -48,14 +56,35 @@ A new expressive style for the bottom navigation bar has been introduced that's
 shorter and supports horizontal navigation items in medium-sized windows.
 [More on M3 Expressive](https://m3.material.io/blog/building-with-m3-expressive)
 
-<img src="assets/bottomnav/navigationbar_expressive.png" alt="Flexible horizontal navigation bar" width="700"/>
-The updated expressive navigation bar is shorter and can be used in medium
-windows with horizontal nav items
+<img src="assets/bottomnav/bottomnav-expressive.png" alt="Flexible horizontal navigation bar" width="700"/>
 
 **Color:**
 
 *   Active label changed from **on-surface-variant** to **secondary**
 
+### M3 Expressive styles
+
+Changes from M3:
+
+*   Height: From 80dp to 64dp
+*   Color: New expressive colors!
+*   Top item padding: From 12dp to 6dp
+*   Bottom item padding: From 16dp to 6dp
+*   Label text is no longer bolded when selected
+*   Active indicator: From 64dp to 56dp
+*   New horizontal item configuration on medium and larger window sizes (greater
+    than or equal to 600dp):
+    *   Icon moves from top to start of item
+    *   Instead of being a set width based on the item count, item width is
+        based on content with a max width
+    *   Item gravity: From top center to center
+
+The default style for bottom navigation bar is:
+
+```xml
+<item name="bottomNavigationStyle">@style/Widget.Material3Expressive.BottomNavigationView</item>
+```
+
 ## Key properties
 
 ### Container attributes
@@ -304,7 +333,7 @@ Here's an example:
   app:menu="@menu/bottom_navigation_menu"/>
 ```
 
-<img src="assets/bottomnav/bottomnav_horizontal.png" alt="Horizontal navigation bar larger screens" height="100"/>
+<img src="assets/bottomnav/bottomnav-horizontal.png" alt="Horizontal navigation bar larger screens" height="100"/>
 
 ### Making navigation bar accessible
 

docs/components/CommonButton.md

@@ -13,12 +13,12 @@ path: /catalog/buttons/
 take actions, and make choices, with a single tap. There are two variants of
 common buttons.
 
-![2 types of common buttons](assets/buttons/commonbutton_types.png)
+![2 types of common buttons](assets/buttons/commonbutton-types.png)
 
 1.  Default button
 2.  Toggle button
 
-![Diagram of button styles and toggle behaviors](assets/buttons/commonbutton_styles.png)
+![Diagram of button styles and toggle behaviors](assets/buttons/commonbutton-styles.png)
 
 There are five button styles, in order of emphasis:
 
@@ -43,7 +43,7 @@ C. Toggle (selected) <br>
 
 ## Anatomy
 
-![Elevated button anatomy diagram](assets/buttons/commonbutton_anatomy.png)
+![Elevated button anatomy diagram](assets/buttons/commonbutton-anatomy.png)
 
 1.  Container
 2.  Label text
@@ -52,12 +52,14 @@ C. Toggle (selected) <br>
 More details on anatomy items in the
 [component guidelines](https://m3.material.io/components/buttons/guidelines#653b660b-e9d8-48ad-9f53-67fb3d76e09e).
 
-## M3 Expressive update
+## M3 Expressive
+
+### M3 Expressive update
 
 Before you can use `Material3Expressive` component styles, follow the
 [`Material3Expressive` themes setup instructions](https://github.com/material-components/material-components-android/tree/master/docs/getting-started.md#material3expressive-themes).
 
-<img src="assets/buttons/commonbutton_expressive.png" alt="4 button changes in the expressive update." height="600"/>
+<img src="assets/buttons/commonbutton-expressive.png" alt="4 button changes in the expressive update" height="600"/>
 
 1.  Five sizes
 2.  Toggle (selection)
@@ -93,6 +95,240 @@ can change shape when selected
 *   16dp (recommended to match padding of new sizes)
 *   24dp (deprecated)
 
+### M3 Expressive styles
+
+#### Buttons
+
+<details><summary><h5>Filled</h5></summary>
+
+Default <div style="width:250px"></div>                                                                    | Checked <div style="width:250px"></div>                                                            | Unchecked <div style="width:250px"></div>
+---------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | -----------------------------------------
+![Default expressive filled button example in dark theme](assets/buttons/default-filled-button-dark.png)   | ![Checked expressive filled button in dark theme](assets/buttons/checked-filled-button-dark.png)   | ![Unchecked expressive filled button in light theme](assets/buttons/unchecked-button-light.png)
+![Default expressive filled button example in light theme](assets/buttons/default-filled-button-light.png) | ![Checked expressive filled button in light theme](assets/buttons/checked-filled-button-light.png) | ![Unchecked expressive filled button in dark theme](assets/buttons/unchecked-button-dark.png)
+
+By default, the filled button is uncheckable. To make it checkable, enable the
+`android:checkable` attribute in style or layout.
+
+```xml
+<Button
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:text="@string/button_text"
+    android:checkable="true"/>
+```
+
+</details>
+
+<details><summary><h5>Filled tonal</h5></summary>
+
+Default <div style="width:250px"></div>                                                                 | Checked <div style="width:250px"></div>                                                                 | Unchecked <div style="width:250px"></div>
+------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | -----------------------------------------
+![Default expressive filled tonal button in light theme](assets/buttons/default-filled-tonal-light.png) | ![Checked expressive filled tonal button in dark theme](assets/buttons/checked-filled-tonal-dark.png)   | ![Unchecked expressive filled tonal button in light theme](assets/buttons/unchecked-filled-tonal-light.png)
+![Default expressive filled tonal button in dark theme](assets/buttons/default-filled-tonal-dark.png)   | ![Checked expressive filled tonal button in light theme](assets/buttons/checked-filled-tonal-light.png) | ![Unchecked expressive filled tonal button in dark theme](assets/buttons/unchecked-filled-tonal-dark.png)
+
+By default, the tonal button is uncheckable. To make it checkable, enable the
+`android:checkable` attribute in style or layout.
+
+```xml
+<Button
+    style="?attr/materialButtonTonalStyle"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:text="@string/button_text"
+    android:checkable="true"/>
+```
+
+</details>
+
+<details><summary><h5>Outlined</h5></summary>
+
+Default <div style="width:250px"></div>                                                                       | Checked <div style="width:250px"></div>                                                                | Unchecked <div style="width:250px"></div>
+------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | -----------------------------------------
+![Default expressive outlined button button in light theme](assets/buttons/default-outlined-button-light.png) | ![Checked expressive outlined button in dark theme](assets/buttons/checked-outlined-button-dark.png)   | ![Unchecked expressive outlined button in light theme](assets/buttons/unchecked-outlined-button-light.png)
+![Default expressive outlined button button in dark theme](assets/buttons/default-outlined-button-dark.png)   | ![Checked expressive outlined button in light theme](assets/buttons/checked-outlined-button-light.png) | ![Unchecked expressive outlined button in dark theme](assets/buttons/unchecked-outlined-button-dark.png)
+
+By default, the outlined button is uncheckable. To make it checkable, enable the
+`android:checkable` attribute in style or layout.
+
+```xml
+<Button
+    style="?attr/materialButtonOutlinedStyle"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:text="@string/button_text"
+    android:checkable="true"/>
+```
+
+</details>
+
+<details><summary><h5>Text</h5></summary>
+
+<img src="assets/buttons/text-button-dark.png" alt="Expressive text button in dark theme with dark text and no outline" width="175"> <div style="width:400px"></div> | <img src="assets/buttons/text-button-light.png" alt="Expressive text button in light theme with light text and no outline" width="175"> <div style="width:400px"></div>
+-------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -----------------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+The text button appears as only text until pressed. It does not have a solid
+fill or outline by default.
+
+```xml
+<Button
+    style="?attr/borderlessButtonStyle"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:text="@string/button_text"/>
+```
+
+</details>
+
+<details><summary><h5>Elevated</h5></summary>
+
+Default <div style="width:250px"></div>                                                         | Checked <div style="width:250px"></div>                                                         | Unchecked <div style="width:250px"></div>
+----------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | -----------------------------------------
+![Default expressive elevated button in light theme](assets/buttons/default-elevated-light.png) | ![Checked expressive elevated button in dark theme](assets/buttons/checked-elevated-dark.png)   | ![Unchecked expressive elevated button in light theme](assets/buttons/unchecked-elevated-light.png)
+![Default expressive elevated button in dark theme](assets/buttons/default-elevated-dark.png)   | ![Checked expressive elevated button in light theme](assets/buttons/checked-elevated-light.png) | ![Unchecked expressive elevated button in dark theme](assets/buttons/unchecked-elevated-dark.png)
+
+By default, the elevated button is uncheckable. To make it checkable, enable the
+`android:checkable` attribute in style or layout.
+
+```xml
+<Button
+    style="?attr/materialButtonElevatedStyle"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:text="@string/button_text"
+    android:checkable="true"/>
+```
+
+</details>
+
+<details><summary><h5>Filled button with icons</h5></summary>
+
+Default <div style="width:250px"></div>                                                                      | Checked <div style="width:250px"></div>                                                                      | Unchecked <div style="width:250px"></div>
+------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ | -----------------------------------------
+![Default expressive filled icon button in light theme](assets/buttons/default-filled-icon-button-light.png) | ![Checked expressive filled icon button in dark theme](assets/buttons/checked-filled-icon-button-dark.png)   | ![Unchecked expressive filled icon button in light theme](assets/buttons/unchecked-filled-icon-button-light.png)
+![Default expressive filled icon button in dark theme](assets/buttons/default-filled-icon-button-dark.png)   | ![Checked expressive filled icon button in light theme](assets/buttons/checked-filled-icon-button-light.png) | ![Unchecked expressive filled icon button in dark theme](assets/buttons/unchecked-filled-icon-button-dark.png)
+
+Icons visually communicate the button’s action and help draw attention. They
+should be placed on the leading side of the button, before the label text.
+
+```xml
+<Button
+    style="@style/Widget.Material3Expressive.Button.Icon"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:text="@string/button_text"
+    app:icon="@drawable/ic_dialogs_24px"
+    android:checkable="true"/>
+```
+
+</details>
+
+#### Shapes
+
+<details><summary><h5>Round</h5></summary>
+
+Default <div style="width:250px"></div>                                                                    | Checked <div style="width:250px"></div>                                                                     | Unchecked <div style="width:250px"></div>
+---------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | -----------------------------------------
+![Default expressive round filled button with icon in light theme](assets/buttons/default-round-shape.png) | ![Checked expressive round filled button with icon in light theme](assets/buttons/checked-round-shaped.png) | ![Unchecked expressive square round button with icon in light theme](assets/buttons/unchecked-round-shape.png)
+
+```xml
+<Button
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:text="@string/button_text"/>
+```
+
+</details>
+
+<details><summary><h5>Square</h5></summary>
+
+Default <div style="width:250px"></div>                                                                      | Checked <div style="width:250px"></div>                                                                      | Unchecked <div style="width:250px"></div>
+------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ | -----------------------------------------
+![Default expressive square filled button with icon in light theme](assets/buttons/default-square-shape.png) | ![Checked expressive square filled button with icon in light theme](assets/buttons/checked-square-shape.png) | ![Unchecked expressive square filled button with icon in light theme](assets/buttons/unchecked-square-shape.png)
+
+```xml
+<Button
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:text="@string/button_text"
+    app:materialSizeOverlay="@style/SizeOverlay.Material3Expressive.Button.{Small}.Square"/>
+```
+
+</details>
+
+#### Sizes
+
+**Note:** Images below show the label buttons in different sizes relatively. The
+actual sizes in px on mobile devices depends on the screen pixel density.
+
+<details><summary><h5>Extra small</h5></summary>
+
+<img src="assets/buttons/extrasmall.png" width=214.5 height=96/>
+
+```xml
+<Button
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:text="@string/button_text"
+    app:materialSizeOverlay="@style/SizeOverlay.Material3Expressive.Button.Xsmall"/>
+```
+
+</details>
+
+<details><summary><h5>Small</h5></summary>
+
+<img src="assets/buttons/small-size.png" width=228.5 height=96/>
+
+```xml
+<Button
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:text="@string/button_text"/>
+```
+
+</details>
+
+<details><summary><h5>Medium</h5></summary>
+
+<img src="assets/buttons/medium-size.png" width=284 height=107/>
+
+```xml
+<Button
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:text="@string/button_text"
+    app:materialSizeOverlay="@style/SizeOverlay.Material3Expressive.Button.Medium"/>
+```
+
+</details>
+
+<details><summary><h5>Large</h5></summary>
+
+<img src="assets/buttons/large-size.png" width=475 height=192.5/>
+
+```xml
+<Button
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:text="@string/button_text"
+    app:materialSizeOverlay="@style/SizeOverlay.Material3Expressive.Button.Large"/>
+```
+
+</details>
+
+<details><summary><h5>Extra Large</h5></summary>
+
+<img src="assets/buttons/extra-large-size.png" width=632 height=277.5/>
+
+```xml
+<Button
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:text="@string/button_text"
+    app:materialSizeOverlay="@style/SizeOverlay.Material3Expressive.Button.Xlarge"/>
+```
+
+</details>
+
 ## Key properties
 
 <details>
@@ -388,7 +624,7 @@ page.
 *   The default and toggle buttons use different colors
 *   Toggle buttons don’t use the text style
 
-![5 types of common buttons](assets/buttons/commonbuttons_types.png)
+![5 types of common buttons](assets/buttons/commonbuttons-types.png)
 
 1.  Elevated button
 2.  Filled button
@@ -421,7 +657,7 @@ In the layout:
 
 ```xml
 <Button
-    style="@style/Widget.Material3.Button.ElevatedButton"
+    style="?attr/materialButtonElevatedStyle"
     android:id="@+id/elevatedButton"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
@@ -441,8 +677,8 @@ elevatedButton.setOnClickListener {
 
 The following example shows an elevated button with an icon.
 
-!["Elevated button with purple text 'Elevated button', grey border and '+' icon
-over a white background."](assets/buttons/elevated-button-icon.png)
+![Elevated button with purple text, elevated button, grey border and plus icon
+over a white background](assets/buttons/elevated-button-icon.png)
 
 In the layout:
 
@@ -462,7 +698,8 @@ In the layout:
 
 [Filled button's](https://m3.material.io/components/buttons#filled-button)
 contrasting surface color makes it the most prominent button after the FAB. It’s
-used for final or unblocking actions in a flow.
+used for final or unblocking actions in a flow such as **Save**, **Join now,**
+or **Confirm**.
 
 **Note:** The filled button is the default style if the style is not set.
 
@@ -477,8 +714,8 @@ API and source code:
 The following example shows a filled button with a text label and a filled
 container.
 
-!["Filled button with white text 'Filled button' and purple container over a
-white background."](assets/buttons/filled-button.png)
+!["Filled button with white text, filled button, and purple container over a
+white background"](assets/buttons/filled-button.png)
 
 In the layout:
 
@@ -507,8 +744,8 @@ filledButton.setOnClickListener {
 
 The following example shows a filled button with an icon.
 
-!["Filled button with white text 'Filled button', purple container and '+' icon
-over a white background."](assets/buttons/filled-button-icon.png)
+![Filled button with white text, filled button, purple container and plus icon
+over a white background](assets/buttons/filled-button-icon.png)
 
 In the layout:
 
@@ -532,6 +769,11 @@ visually prominent than a regular filled button. They’re still used for final
 unblocking actions in a flow, but may be better when these actions don’t require
 quite so much emphasis.
 
+A tonal-style filled button can be used as an alternative middle-ground between
+filled and outlined buttons. They use secondary color mapping and are useful in
+contexts where a lower-priority button requires slightly more emphasis than an
+outline would give, such as **Next** in an onboarding flow.
+
 ##### Filled tonal button examples
 
 API and source code:
@@ -543,14 +785,14 @@ API and source code:
 The following example shows a filled tonal button with a text label and a filled
 container.
 
-!["Filled tonal button with white text 'Filled tonal button' and purple
-container over a white background."](assets/buttons/filled-button-tonal.png)
+!["Filled tonal button with white text, filled tonal button, and purple
+container over a white background"](assets/buttons/filled-button-tonal.png)
 
 In the layout:
 
 ```xml
 <Button
-    style="@style/Widget.Material3.Button.TonalButton"
+    style="?attr/materialButtonTonalStyle"
     android:id="@+id/filledTonalButton"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
@@ -570,9 +812,8 @@ filledTonalButton.setOnClickListener {
 
 The following example shows a filled tonal button with an icon.
 
-!["Filled tonal button with white text 'Filled tonal button', purple container
-and '+' icon over a white
-background."](assets/buttons/filled-button-tonal-icon.png)
+![Filled tonal button with white text filled tonal button, purple container and
+plus icon over a white background](assets/buttons/filled-button-tonal-icon.png)
 
 In the layout:
 
@@ -595,6 +836,9 @@ are for actions that need attention but aren’t the primary action, such as “
 all” or “Add to cart.” This is also the button used to give someone the
 opportunity to change their mind or escape a flow.
 
+Outlined buttons pair well with filled buttons to indicate a secondary,
+alternate action.
+
 ##### Outlined button examples
 
 API and source code:
@@ -606,8 +850,8 @@ API and source code:
 The following example shows an outlined button with a text label and stroked
 container.
 
-!["Outlined button with purple text 'Outlined button' and grey border over a
-white background."](assets/buttons/outlined-button.png)
+!["Outlined button with purple text, outlined button, and grey border over a
+white background"](assets/buttons/outlined-button.png)
 
 In the layout:
 
@@ -633,8 +877,8 @@ outlinedButton.setOnClickListener {
 
 The following example shows an outlined button with an icon.
 
-!["Outlined button with purple text 'Outlined button', grey border and '+' icon
-over a white background."](assets/buttons/outlined-button-icon.png)
+![Outlined button with purple text, outlined button, grey border and plus icon
+over a white background](assets/buttons/outlined-button-icon.png)
 
 In the layout:
 
@@ -666,13 +910,13 @@ API and source code:
 
 The following example shows a text button with a text label.
 
-!["Text button with purple text 'Text button' over a white background."](assets/buttons/text-button.png)
+![Text button with purple text, text button over a white background](assets/buttons/text-button.png)
 
 In the layout:
 
 ```xml
 <Button
-    style="@style/Widget.Material3.Button.TextButton"
+    style="?attr/borderlessButtonStyle"
     android:id="@+id/textButton"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
@@ -692,8 +936,8 @@ textButton.setOnClickListener {
 
 The following example shows a text button with an icon.
 
-!["Text button with purple text 'Text button' and '+' icon over a white
-background."](assets/buttons/text-button-icon.png)
+![Text button with purple text, text button, and plus icon over a white
+background](assets/buttons/text-button-icon.png)
 
 In the layout:
 

docs/components/DockedToolbar.md

@@ -11,7 +11,7 @@ path: /catalog/docked-toolbar/
 
 Docked toolbar provides a way to show actions related to the current page.
 
-![Docked toolbar](assets/dockedtoolbar/docked_toolbar.png)
+![Docked toolbar](assets/dockedtoolbar/docked-toolbar.png)
 
 **Note:** Images use various dynamic color schemes.
 
@@ -22,7 +22,7 @@ Docked toolbar provides a way to show actions related to the current page.
 
 ## Anatomy
 
-<img src="assets/dockedtoolbar/docked_toolbar_anatomy.png" alt="Docked toolbar anatomy diagram" height="350">
+<img src="assets/dockedtoolbar/docked-toolbar-anatomy.png" alt="Docked toolbar anatomy diagram" height="350">
 
 1.  Container
 2.  Elements
@@ -30,12 +30,14 @@ Docked toolbar provides a way to show actions related to the current page.
 More details on anatomy items in the
 [component guidelines](https://m3.material.io/components/toolbars/guidelines#d6b7bcb1-295d-41e6-a051-37f12e1c96ab).
 
-## M3 Expressive update
+## M3 Expressive
+
+### M3 Expressive update
 
 Before you can use `Material3Expressive` component styles, follow the
 [`Material3Expressive themes` setup instructions](https://github.com/material-components/material-components-android/tree/master/docs/getting-started.md#material3expressive-themes).
 
-<img src="assets/dockedtoolbar/dockedtoolbar_expressive.png" alt="Docked toolbar" height="350">
+<img src="assets/dockedtoolbar/dockedtoolbar-expressive.png" alt="Docked toolbar" height="350">
 Docked with embedded primary action instead of FAB
 
 The **bottom app bar** is being deprecated and should be replaced with the
@@ -53,6 +55,14 @@ flexibility.
 
 *   **Bottom app bar** is still available, but not recommended
 
+### M3 Expressive styles
+
+The standard style for the docked toolbar is defined as below:
+
+```xml
+<item name="dockedToolbarStyle">@style/Widget.Material3Expressive.DockedToolbar</item>
+```
+
 ## Key properties
 
 ### Container attributes
@@ -314,7 +324,7 @@ Docked toolbars support the customization of color and typography.
 
 The following example shows a docked toolbar with Material theming.
 
-<img src="assets/dockedtoolbar/docked_toolbar_theming.png" alt="Docked toolbar theming example" width="600">
+<img src="assets/dockedtoolbar/docked-toolbar-theming.png" alt="Docked toolbar theming example" width="600">
 
 ##### Implementing docked toolbar theming
 

docs/components/ExtendedFloatingActionButton.md

@@ -12,7 +12,7 @@ path: /catalog/floating-action-button/
 [Extended floating action buttons (extended FABs)](https://m3.material.io/components/extended-fab)
 help people take primary actions. There are three variants of the extended FAB.
 
-<img src="assets/fabs/EFAB_types.png" alt="Types of extended FABs"/>
+<img src="assets/fabs/efab-types.png" alt="Types of extended FABs"/>
 
 1.  Small extended FAB
 2.  Medium extended FAB
@@ -27,7 +27,7 @@ help people take primary actions. There are three variants of the extended FAB.
 
 ## Anatomy
 
-<img src="assets/fabs/EFAB_anatomy.png" alt="Anatomy of extended FABs"/>
+<img src="assets/fabs/efab-anatomy.png" alt="Anatomy of extended FABs"/>
 
 1.  Container
 2.  Text label
@@ -36,13 +36,15 @@ help people take primary actions. There are three variants of the extended FAB.
 More details on anatomy items in the
 [component guidelines](https://m3.material.io/components/extended-fab/guidelines#1dc1f503-edff-4e3f-b2a6-c76cee1b8369).
 
-## M3 Expressive update
+## M3 Expressive
+
+### M3 Expressive update
 
 Before you can use `Material3Expressive` component styles, follow the
 [`Material3Expressive` themes setup instructions](https://github.com/material-components/material-components-android/tree/master/docs/getting-started.md#material3expressive-themes).
 
 ![The deprecated original extended FAB and the small, medium, and large extended
-FABs from the expressive update.](assets/fabs/EFAB_expressive.png) The original
+FABs from the expressive update.](assets/fabs/efab-expressive.png) The original
 extended FAB is replaced with a set of small, medium, and large extended FABs
 with new typography
 
@@ -67,6 +69,59 @@ replaced with the small extended FAB. Surface FABs are also being deprecated.
 
     *   Adjusted typography to be larger
 
+### M3 Expressive styles
+
+#### M3 Expressive small extended FAB
+
+<img src="assets/fabs/small-efabs-light.png" alt="Expressive Small Extended FAB in light mode" width="150"> <div style="width:400px"></div> | <img src="assets/fabs/small-efabs-dark.png" alt="Expressive Small Extended FAB in dark mode" width="150"> <div style="width:400px"></div>
+------------------------------------------------------------------------------------------------------------------------------------------- | -----------------------------------------------------------------------------------------------------------------------------------------
+
+```xml
+<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
+      style="?attr/extendedFloatingActionButtonSmallStyle"
+      android:layout_width="wrap_content"
+      android:layout_height="wrap_content"
+      android:layout_margin="8dp"
+      android:contentDescription="@string/m3_expressive_primary_small_extended_fab_content_description"
+      android:text="@string/m3_expressive_extended_fab_label"
+      app:icon="@drawable/gs_edit_fill1_vd_theme_24"
+      app:materialThemeOverlay="@style/ThemeOverlay.Material3Expressive.FloatingActionButton.Primary" />
+```
+
+#### M3 Expressive medium extended FAB
+
+<img src="assets/fabs/medium-efabs-light.png" alt="Expressive Medium Extended FAB in light mode" width="225"> <div style="width:400px"></div> | <img src="assets/fabs/medium-efabs-dark.png" alt="Expressive Medium Extended FAB in dark mode" width="225"> <div style="width:400px"></div>
+--------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------
+
+```xml
+<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
+      style="?attr/extendedFloatingActionButtonMediumStyle"
+      android:layout_width="wrap_content"
+      android:layout_height="wrap_content"
+      android:layout_margin="8dp"
+      android:contentDescription="@string/m3_expressive_primary_medium_extended_fab_content_description"
+      android:text="@string/m3_expressive_extended_fab_label"
+      app:icon="@drawable/gs_edit_fill1_vd_theme_24"
+      app:materialThemeOverlay="@style/ThemeOverlay.Material3Expressive.FloatingActionButton.Primary" />
+```
+
+#### M3 Expressive large extended FAB
+
+<img src="assets/fabs/large-efabs-light.png" alt="Expressive Large Extended FAB in light mode" width="275"> <div style="width:400px"></div> | <img src="assets/fabs/large-efabs-dark.png" alt="Expressive Large Extended FAB in dark mode" width="275"> <div style="width:400px"></div>
+------------------------------------------------------------------------------------------------------------------------------------------- | -----------------------------------------------------------------------------------------------------------------------------------------
+
+```xml
+<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
+      style="?attr/extendedFloatingActionButtonLargeStyle"
+      android:layout_width="wrap_content"
+      android:layout_height="wrap_content"
+      android:layout_margin="8dp"
+      android:contentDescription="@string/m3_expressive_primary_large_extended_fab_content_description"
+      android:text="@string/m3_expressive_extended_fab_label"
+      app:icon="@drawable/gs_edit_fill1_vd_theme_24"
+      app:materialThemeOverlay="@style/ThemeOverlay.Material3Expressive.FloatingActionButton.Primary" />
+```
+
 ## Key properties
 
 ### Container attributes
@@ -118,7 +173,7 @@ and
 
 There are three types of extended FABs: small, medium, and large.
 
-![EFAB sizes](assets/fabs/EFAB_sizes.png)
+![EFAB sizes](assets/fabs/efab-sizes.png)
 
 Choose an appropriately-sized extended FAB to add the right amount of emphasis
 for an action.
@@ -160,7 +215,7 @@ API and source code:
 
 The following example shows an extended FAB with a plus icon.
 
-<img src="assets/fabs/fab_extended.png" alt="Purple FAB with plus icon and Extended label" height="400"/>
+<img src="assets/fabs/fab-extended.png" alt="Purple FAB with plus icon and Extended label" height="400"/>
 
 In the layout:
 
@@ -243,7 +298,7 @@ The following example shows a regular, small, and extended FAB with Material
 Theming.
 
 !["3 square pink FABs with cut corners with brown plus icons: 56dp, 40dp, 56dp
-with "Extended" label"](assets/fabs/fab_theming.png)
+with "Extended" label"](assets/fabs/fab-theming.png)
 
 ##### Implementing FAB theming
 

docs/components/FloatingActionButton.md

@@ -13,7 +13,7 @@ A
 [floating action button (FAB)](https://m3.material.io/components/floating-action-button)
 represents the primary action of a screen. There are three variants of a FAB.
 
-![FAB types](assets/fabs/FAB_types.png)
+![FAB types](assets/fabs/fab-types.png)
 
 1.  FAB
 2.  Medium FAB
@@ -32,7 +32,7 @@ center.
 
 ## Anatomy
 
-![FAB anatomy diagram](assets/fabs/FAB_anatomy.png)
+![FAB anatomy diagram](assets/fabs/fab-anatomy.png)
 
 1.  Container
 2.  Icon
@@ -40,12 +40,14 @@ center.
 More details on anatomy items in the
 [component guidelines](https://m3.material.io/components/floating-action-button/guidelines#9a56f806-8840-4910-8f53-3cb2a6c81c86).
 
-## M3 Expressive update
+## M3 Expressive
+
+### M3 Expressive update
 
 Before you can use `Material3Expressive` component styles, follow the
 [`Material3Expressive` themes setup instructions](https://github.com/material-components/material-components-android/tree/master/docs/getting-started.md#material3expressive-themes).
 
-![Four FABs showing the colors available after the expressive update.](assets/fabs/FAB_expressive.png)
+![Four FABs showing the colors available after the expressive update.](assets/fabs/fab-expressive.png)
 FABs have updated colors and sizes
 
 The FAB has new sizes to match the extended FAB and more color options. The
@@ -72,6 +74,78 @@ small FAB is deprecated.
     *   The values haven't changed
 *   Deprecated surface color FABs
 
+### M3 Expressive styles
+
+#### Theme overlays
+
+To avoid a scenario of exploding style combinations, the colors will be handled
+via theme overlays instead of creating distinct styles for each size/palette
+combination for FABs and extended FABs.
+
+M3 Expressive library provides six theme overlays to be used:
+
+-   `ThemeOverlay.Material3Expressive.FloatingActionButton.Primary`
+-   `ThemeOverlay.Material3Expressive.FloatingActionButton.Secondary`
+-   `ThemeOverlay.Material3Expressive.FloatingActionButton.Tertiary`
+-   `ThemeOverlay.Material3Expressive.FloatingActionButton.PrimaryContainer`
+-   `ThemeOverlay.Material3Expressive.FloatingActionButton.SecondaryContainer`
+-   `ThemeOverlay.Material3Expressive.FloatingActionButton.TertiaryContainer`
+
+The theme overlay for a given FAB or extended FAB can be specified within the
+component XML by adding, for example,
+`app:materialThemeOverlay="@style/ThemeOverlay.Material3Expressive.FloatingActionButton.Primary`.
+
+**Note:** The images below show FAB examples in light mode (left) and in dark
+mode (right) using the primary theme overlay.
+
+#### M3 Expressive FAB
+
+<img src="assets/fabs/fab-expressive-light.png" alt="Expressive FAB in light mode." width="75"> <div style="width:400px"></div> | <img src="assets/fabs/fab-expressive-dark.png" alt="Expressive FAB in dark mode." width="75"> <div style="width:400px"></div>
+------------------------------------------------------------------------------------------------------------------------------- | -----------------------------------------------------------------------------------------------------------------------------
+
+```xml
+<com.google.android.material.floatingactionbutton.FloatingActionButton
+      style="?attr/floatingActionButtonStyle"
+      android:layout_width="wrap_content"
+      android:layout_height="wrap_content"
+      android:layout_margin="8dp"
+      android:contentDescription="@string/m3_expressive_primary_fab_content_description"
+      app:srcCompat="@drawable/gs_edit_fill1_vd_theme_24"
+      app:materialThemeOverlay="@style/ThemeOverlay.Material3Expressive.FloatingActionButton.Primary" />
+```
+
+#### M3 Expressive medium FAB
+
+<img src="assets/fabs/fab-expressive-medium-light.png" alt="Expressive Medium FAB in light mode." width="150"> <div style="width:400px"></div> | <img src="assets/fabs/fab-expressive-medium-dark.png" alt="Expressive Medium FAB in dark mode" width="150"> <div style="width:400px"></div>
+---------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------
+
+```xml
+<com.google.android.material.floatingactionbutton.FloatingActionButton
+            style="?attr/floatingActionButtonMediumStyle"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_margin="8dp"
+            android:contentDescription="@string/m3_expressive_primary_medium_fab_content_description"
+            app:srcCompat="@drawable/gs_edit_fill1_vd_theme_24"
+            app:materialThemeOverlay="@style/ThemeOverlay.Material3Expressive.FloatingActionButton.Primary" />
+```
+
+#### M3 Expressive large FAB
+
+<img src="assets/fabs/fab-expressive-large-light.png" alt="Expressive Large FAB in light mode." width="175"> <div style="width:400px"></div> | <img src="assets/fabs/fab-expressive-large-dark.png" alt="Expressive Large FAB in dark mode" width="175"> <div style="width:400px"></div>
+-------------------------------------------------------------------------------------------------------------------------------------------- | -----------------------------------------------------------------------------------------------------------------------------------------
+
+```xml
+<com.google.android.material.floatingactionbutton.FloatingActionButton
+      style="?attr/floatingActionButtonLargeStyle"
+      android:layout_width="wrap_content"
+      android:layout_height="wrap_content"
+      android:layout_margin="8dp"
+      android:contentDescription="@string/m3_expressive_primary_large_fab_content_description"
+      app:srcCompat="@drawable/gs_edit_fill1_vd_theme_24"
+      app:materialThemeOverlay="@style/ThemeOverlay.Material3Expressive.FloatingActionButton.Primary" />
+```
+
 ## Key properties
 
 ### Container attributes
@@ -116,7 +190,7 @@ There are three FAB sizes:
 
 Choose the FAB size based on the visual hierarchy of your layout.
 
-![FAB sizes](assets/fabs/FABs_sizes.png)FABs have multiple sizes that scale with
+![FAB sizes](assets/fabs/fabs-sizes.png)FABs have multiple sizes that scale with
 window size
 
 <details>
@@ -137,7 +211,7 @@ API and source code:
 
 The following example shows a regular FAB with a plus icon.
 
-<img src="assets/fabs/fab_regular.png" alt="56dp boxy purple FAB with dark plus icon" height="500"/>
+<img src="assets/fabs/fab-regular.png" alt="56dp boxy purple FAB with dark plus icon" height="500"/>
 
 In the layout:
 
@@ -186,9 +260,9 @@ API and source code:
 
 #### Medium FAB example
 
-The following example shows a small FAB with a plus icon.
+The following example shows a medium FAB with a plus icon.
 
-<img src="assets/fabs/FAB_medium.png" alt="Purple medium FAB on a mobile device screen." height="500"/>
+<img src="assets/fabs/fab-medium.png" alt="Purple medium FAB on a mobile device screen." height="500"/>
 
 In the layout:
 
@@ -234,7 +308,7 @@ API and source code:
 
 The following example shows a large FAB with a plus icon.
 
-<img src="assets/fabs/FAB_large.png" alt="96dp boxy purple FAB with dark plus icon" height="500"/>
+<img src="assets/fabs/fab-large.png" alt="96dp boxy purple FAB with dark plus icon" height="500"/>
 
 In the layout:
 
@@ -281,7 +355,7 @@ API and source code:
 
 The following example shows a small FAB with a plus icon.
 
-<img src="assets/fabs/fab_mini.png" alt="40dp boxy purple FAB with dark plus icon" height="500"/>
+<img src="assets/fabs/fab-mini.png" alt="40dp boxy purple FAB with dark plus icon" height="500"/>
 
 In the layout:
 
@@ -357,7 +431,7 @@ API and source code:
 The following example shows multiple FABs with Material Theming in different
 sizes that scale with window size.
 
-![FABs in multiple sizes that scale with window size](assets/fabs/FAB_3sizes.png)
+![FABs in multiple sizes that scale with window size](assets/fabs/fab-3sizes.png)
 
 ##### Implementing FAB theming
 

docs/components/FloatingToolbar.md

@@ -33,12 +33,14 @@ Vertical floating toolbar
 More details on anatomy items in the
 [component guidelines](https://m3.material.io/components/toolbars/guidelines#d6b7bcb1-295d-41e6-a051-37f12e1c96ab).
 
-## M3 Expressive update
+## M3 Expressive
+
+### M3 Expressive update
 
 Before you can use `Material3Expressive` component styles, follow the
 [`Material3Expressive themes` setup instructions](https://github.com/material-components/material-components-android/tree/master/docs/getting-started.md#material3expressive-themes).
 
-<img src="assets/floatingtoolbar/floatingtoolbar_expressive.png" alt="The floating toolbar expressive.png" width="700"/>
+<img src="assets/floatingtoolbar/floatingtoolbar-expressive.png" alt="The floating toolbar expressive.png" width="700"/>
 Floating toolbar show controls relevant to the current page
 
 The **floating toolbar** was created for more versatility, greater amounts of
@@ -54,6 +56,57 @@ actions, and more variety in where it's placed.
     *   Flexibility: Can hold many elements and components. Can be paired with
         FAB.
 
+### M3 Expressive styles
+
+There are two styles for the floating toolbar specifying different color
+schemes:
+
+```xml
+<item name="floatingToolbarStyle">@style/Widget.Material3Expressive.FloatingToolbar</item>
+<item name="floatingToolbarVibrantStyle">@style/Widget.Material3Expressive.FloatingToolbar.Vibrant</item>
+```
+
+Standard Floating Toolbar                                                          | Vibrant Floating Toolbar
+---------------------------------------------------------------------------------- | ------------------------
+![Standard floating toolbar](assets/floatingtoolbar/standard-floating-toolbar.png) | ![Vibrant floating toolbar](assets/floatingtoolbar/vibrant-floating-toolbar.png)
+
+By default, if a style is not specified, a `FloatingToolbar` will use
+`floatingToolbarStyle` from the theme.
+
+There are also styles specific to components inside the floating toolbar that
+are recommended to be used. Currently, the recommendation exists for icon
+buttons: `Widget.Material3Expressive.FloatingToolbar.IconButton` and
+`Widget.Material3Expressive.FloatingToolbar.IconButton.Vibrant`.
+
+Example usage:
+
+```xml
+<com.google.android.material.floatingtoolbar.FloatingToolbarLayout
+    android:id="@+id/floating_toolbar_bottom"
+    android:layout_margin="16dp"
+    style="?attr/floatingToolbarVibrantStyle"
+    android:layout_gravity="center|bottom"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content">
+
+    <com.google.android.material.overflow.OverflowLinearLayout
+      android:id="@+id/floating_toolbar_child_bottom"
+      android:layout_width="match_parent"
+      android:layout_height="wrap_content"
+      android:layout_gravity="center"
+      android:orientation="horizontal">
+
+      <Button
+          android:id="@+id/floating_toolbar_vibrant_button_bold"
+          style="@style/Widget.Material3Expressive.FloatingToolbar.IconButton.Vibrant"
+          android:layout_width="wrap_content"
+          android:layout_height="wrap_content"
+          android:checkable="true"
+          android:contentDescription="@string/floating_toolbar_button_bold_content_description"
+          app:icon="@drawable/ic_format_bold_24px" />
+      ...
+```
+
 ## Key properties
 
 ### Container attributes
@@ -171,12 +224,11 @@ Here's what a typical layout would look like:
   </com.google.android.material.floatingtoolbar.FloatingToolbarLayout>
 ```
 
-A Floating Toolbar is a `FrameLayout` that provides additional styling and
-functionality.
-You may add children to it as you would to a `FrameLayout`. It's recommended to
-have its children wrapped by an `OverflowLinearLayout` that will handle
-automatically adding items to an overflow button when there's not enough screen
-space to show all the items.
+A floating toolbar is a `FrameLayout` that provides additional styling and
+functionality. You may add children to it as you would to a `FrameLayout`. It's
+recommended to have its children wrapped by an `OverflowLinearLayout` that will
+handle automatically adding items to an overflow button when there's not enough
+screen space to show all the items.
 
 When using `OverflowLinearLayout`, you should also set `app:layout_overflowText`
 as that will be the text of the menu item that corresponds to the hidden child.
@@ -184,7 +236,7 @@ Optionally, you can also set `app:layout_overflowIcon`. See
 [OverflowLinearLayout](https://github.com/material-components/material-components-android/tree/master//docs/components/Overflow.md)
 for more info.
 
-Note: if the child view that is clickable is not a direct child of
+**Note:** if the child view that is clickable is not a direct child of
 `OverflowLinearLayout`, such as the case of the example above, make sure to
 propagate the parent's click to the child. That is so overflowed items in the
 overflowed menu respond properly to being clicked. Alternatively, you can also

docs/components/NavigationDrawer.md

@@ -18,7 +18,7 @@ window size classes.
 provide access to destinations in your app. There are two variants of navigation
 drawers.
 
-<img src="assets/navigationdrawer/navigation_drawer_overview.png" alt="A standard (left) and modal (right) navigation drawer" height="450">
+<img src="assets/navigationdrawer/navigation-drawer-overview.png" alt="A standard (left) and modal (right) navigation drawer" height="450">
 
 1.  Standard navigation drawer
 2.  Modal navigation drawer
@@ -32,7 +32,7 @@ drawers.
 
 ## Anatomy
 
-<img src="assets/navigationdrawer/navigation_drawer_anatomy.png" alt="Navigation drawer anatomy diagram" width="800">
+<img src="assets/navigationdrawer/navigation-drawer-anatomy.png" alt="Navigation drawer anatomy diagram" width="800">
 
 1.  Container
 2.  Headline