[Docs] Updated docs with Expressive code/info.

PiperOrigin-RevId: 788757526

docs/components/ButtonGroup.md

@@ -13,17 +13,13 @@ path: /catalog/buttons/
 organize buttons and add interactions between them.There are two variants of a
 button group.
 
-![2 types of button groups](assets/buttons/buttongroup_types.png)
+![2 types of button groups](assets/buttons/buttongroup-types.png)
 
 1.  Standard button group
 2.  Connected button group
 
 **Note:** Images use various dynamic color schemes.
 
-**Note:** `<Button>` is auto-inflated as
-`<com.google.android.material.button.MaterialButton>` via
-`MaterialComponentsViewInflater` when using a `Theme.Material3.*` theme.
-
 ## Design & API documentation
 
 *   [Material 3 (M3) spec](https://m3.material.io/components/button-groups/overview)
@@ -34,25 +30,27 @@ button group.
 Button groups are invisible containers that add padding between buttons and
 modify button shape. They don’t contain any buttons by default.
 
-![Anatomy of a button group](assets/buttons/buttongroup_anatomy.png)
+![Anatomy of a button group](assets/buttons/buttongroup-anatomy.png)
 
 1.  Container
 
 More details on anatomy items in the
 [component guidelines](https://m3.material.io/components/button-groups/guidelines#8fcef838-b0f2-4663-9df5-a8c140822fa6).
 
-## 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/buttongroup_expressive.png" alt="Standard button group in 3 of 5 available sizes, and segmented button group with just icon buttons and just common buttons." height="500"/>
+<img src="assets/buttons/buttongroup-expressive.png" alt="Standard button group in 3 of 5 available sizes, and segmented button group with just icon buttons and just common buttons." height="500"/>
 
 Button groups apply shape, motion, and width changes to buttons and icon buttons
 to make them more interactive.
 [More on M3 Expressive](https://m3.material.io/blog/building-with-m3-expressive)
 
-New component added to catalog.
+Button groups are new components added in Expressive.
 
 **Types and naming:**
 
@@ -65,6 +63,15 @@ New component added to catalog.
 *   Works with all button sizes: XS, S, M, L, and XL
 *   Applies default shape to all buttons: round or square
 
+### M3 Expressive styles
+
+Default styles in the expressive themes:
+
+-   Standard button group:
+    `Widget.Material3Expressive.MaterialButtonGroup`
+-   Connected button group:
+    `Widget.Material3Expressive.MaterialButtonGroup.Connected`
+
 ## Key properties
 
 ### Shape and size attributes
@@ -102,7 +109,7 @@ Element                        | Style                                  | Theme
 The standard button group contains multiple related individual buttons. The
 individual button's shape is preserved.
 
-![Examples of using standard button group](assets/buttons/standard_button_group.png)
+![Examples of using standard button group](assets/buttons/standard-button-group.png)
 
 #### Button group examples
 
@@ -154,7 +161,7 @@ In addition to standard button groups, connected button group also overrides the
 individual button's shape to make them visually more belong to a group with 2dp
 spacing, 8dp inner corners, and fully rounded outer corners.
 
-![Examples of using connected button group](assets/buttons/connected_button_group.png)
+![Examples of using connected button group](assets/buttons/connected-button-group.png)
 
 #### Connected button group examples
 
@@ -207,6 +214,10 @@ Material components for Android library. For more information, go to the
 [Getting started](https://github.com/material-components/material-components-android/tree/master/docs/getting-started.md)
 page.
 
+**Note:** `<Button>` is auto-inflated as
+`<com.google.android.material.button.MaterialButton>` via
+`MaterialComponentsViewInflater` when using a `Theme.Material3.*` theme.
+
 ### Making button groups adaptive
 
 `MaterialButtonGroup` inherits from the `LinearLayout`. It can be configured to
@@ -220,7 +231,7 @@ screens by using `layout_width` and `layout_weight`.
 When child buttons should not be adjusted while screen size changes, consider
 using `layout_width` on all buttons.
 
-![Button group with fixed arrangement](assets/buttons/group_arrangement_fixed.png)
+![Button group with fixed arrangement](assets/buttons/group-arrangement-fixed.png)
 
 ```xml
 <com.google.android.material.button.MaterialButtonGroup
@@ -265,7 +276,7 @@ using `layout_width` on all buttons.
 When all child buttons are equally important or their sizes are proportional to
 each other, consider using `layout_weight` on all buttons.
 
-![Button group with flexible arrangement](assets/buttons/group_arrangement_flexible.png)
+![Button group with flexible arrangement](assets/buttons/group-arrangement-flexible.png)
 
 ```xml
 <com.google.android.material.button.MaterialButtonGroup
@@ -313,7 +324,7 @@ each other, consider using `layout_weight` on all buttons.
 When only some buttons are flexible for different screen sizes, consider using
 `layout_weight` on these buttons but use `layout_width` on the rest as below.
 
-![Button group with mixed arrangement](assets/buttons/group_arrangement_mixed.png)
+![Button group with mixed arrangement](assets/buttons/group-arrangement-mixed.png)
 
 ```xml
 <com.google.android.material.button.MaterialButtonGroup

docs/components/IconButton.md

@@ -12,7 +12,7 @@ path: /catalog/buttons/
 [Icon buttons](https://m3.material.io/components/icon-buttons/overview) help
 people take minor actions with one tap. There are two variants of icon buttons.
 
-![2 types of icon buttons](assets/buttons/iconbuttons_types.png)
+![2 types of icon buttons](assets/buttons/iconbutton-types.png)
 
 1.  Default icon button
 2.  Toggle icon button
@@ -26,7 +26,7 @@ people take minor actions with one tap. There are two variants of icon buttons.
 
 ## Anatomy
 
-![Anatomy of an icon button ](assets/buttons/iconbuttons_anatomy.png)
+![Anatomy of an icon button ](assets/buttons/iconbuttons-anatomy.png)
 
 1.  Icon
 2.  Container
@@ -34,12 +34,14 @@ people take minor actions with one tap. There are two variants of icon buttons.
 More details on anatomy items in the
 [component guidelines](https://m3.material.io/components/icon-buttons/guidelines#1f6f6121-e403-4d82-aa6a-5ab276f4bc4c).
 
-## 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/iconbuttons_expressive.png" alt="Icon buttons can vary in size, shape, and width." height="400"/>
+<img src="assets/buttons/iconbuttons-expressive.png" alt="Icon buttons can vary in size, shape, and width." height="400"/>
 
 1.  Five sizes
 2.  Two shapes
@@ -75,6 +77,174 @@ when pressed.
 *   Default
 *   Wide
 
+### M3 Expressive styles
+
+#### Icon button 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 icon only button in light theme](assets/buttons/iconbutton-round-default-light-theme.png)|![Checked expressive round filled icon only button in light theme](assets/buttons/iconbutton-round-checked-light-theme.png)|![Unchecked expressive round filled icon only button in light theme](assets/buttons/iconbutton-round-unchecked-light-theme.png)|
+
+```xml
+<Button
+    style="?attr/materialIconButtonFilledStyle"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    app:icon="@drawable/icon"/>
+```
+
+</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 icon only button in light theme](assets/buttons/iconbutton-square-default-light-theme.png)|![Checked expressive square filled icon only button in light theme](assets/buttons/iconbutton-square-checked-light-theme.png)|![Unchecked expressive square filled icon only button in light theme](assets/buttons/iconbutton-square-unchecked-light-theme.png)|
+
+```xml
+<Button
+    style="?attr/materialIconButtonFilledStyle"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    app:icon="@drawable/icon"
+    app:materialSizeOverlay="@style/SizeOverlay.Material3Expressive.Button.IconButton.{Small}.Square"/>
+```
+
+</details>
+
+#### Icon button in different sizes
+
+There are five icon button size variants: Extra small, small, medium, large, and
+extra large.
+
+<details><summary><h5>Extra small</h5></summary>
+
+**Note:** Images below show the icon only buttons in different sizes relatively.
+The actual sizes in px on mobile devices depends on the screen pixel density.
+
+<img src="assets/buttons/iconbutton-extra-small-light-theme.png" alt="Extra small filled icon only button example in light theme" height="80">
+
+```xml
+<Button
+    style="?attr/materialIconButtonFilledStyle"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    app:icon="@drawable/icon"
+    app:materialSizeOverlay="@style/SizeOverlay.Material3Expressive.Button.IconButton.Xsmall"/>
+```
+
+</details>
+
+<details><summary><h5>Small</h5></summary>
+
+<img src="assets/buttons/iconbutton-small-light-theme.png" alt="Small filled icon only button example in light theme" height="120">
+
+```xml
+<Button
+    style="?attr/materialIconButtonFilledStyle"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    app:icon="@drawable/icon"
+    app:materialSizeOverlay="@style/SizeOverlay.Material3Expressive.Button.IconButton.Small"/>
+```
+
+</details>
+
+<details><summary><h5>Medium</h5></summary>
+
+<img src="assets/buttons/iconbutton-medium-light-theme.png" alt="Medium filled icon only button example in light theme" height="160">
+
+```xml
+<Button
+    style="?attr/materialIconButtonFilledStyle"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    app:icon="@drawable/icon"
+    app:materialSizeOverlay="@style/SizeOverlay.Material3Expressive.Button.IconButton.Medium"/>
+```
+
+</details>
+
+<details><summary><h5>Large</h5></summary>
+
+<img src="assets/buttons/iconbutton-large-light-theme.png" alt="Large filled icon only button example in light theme" height="200">
+
+```xml
+<Button
+    style="?attr/materialIconButtonFilledStyle"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    app:icon="@drawable/icon"
+    app:materialSizeOverlay="@style/SizeOverlay.Material3Expressive.Button.IconButton.Large"/>
+```
+
+</details>
+
+<details><summary><h5>Extra large</h5></summary>
+
+<img src="assets/buttons/iconbutton-extra-large-light-theme.png" alt="Extra large filled icon only button example in light theme" height="240">
+
+```xml
+<Button
+    style="?attr/materialIconButtonFilledStyle"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    app:icon="@drawable/icon"
+    app:materialSizeOverlay="@style/SizeOverlay.Material3Expressive.Button.IconButton.Xlarge"/>
+```
+
+</details>
+
+#### Icon button in different width and height ratio
+
+Each icon button has three width options: narrow, uniform (default), and wide.
+
+<details><summary><h5>Narrow</h5></summary>
+
+![Narrow filled icon only button example in light theme](assets/buttons/iconbutton-narrow-light-theme.png)
+
+```xml
+<Button
+    style="?attr/materialIconButtonFilledStyle"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    app:icon="@drawable/icon"
+    app:materialSizeOverlay="@style/SizeOverlay.Material3Expressive.Button.IconButton.{Small}.Narrow"/>
+```
+
+</details>
+
+<details><summary><h5>Default</h5></summary>
+
+![Default filled icon only button example in light theme](assets/buttons/iconbutton-default-light-theme.png)
+
+```xml
+<Button
+    style="?attr/materialIconButtonFilledStyle"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    app:icon="@drawable/icon"/>
+```
+
+</details>
+
+<details><summary><h5>Wide</h5></summary>
+
+![Wide filled icon only button example in light theme](assets/buttons/iconbutton-wide-light-theme.png)
+
+```xml
+<Button
+    style="?attr/materialIconButtonFilledStyle"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    app:icon="@drawable/icon"
+    app:materialSizeOverlay="@style/SizeOverlay.Material3Expressive.Button.IconButton.{Small}.Wide"/>
+```
+
+</details>
+
 ## Key properties
 
 ### Styles and theme attributes
@@ -93,11 +263,136 @@ and
 
 ## Variants of icon buttons
 
+There are four icon button color styles, in order of emphasis:
+
+![Diagram of default and toggle icon buttons in 4 color styles.](assets/buttons/iconbuttons-color.png)
+
+1.  Filled
+2.  Tonal
+3.  Outlined
+4.  Standard
+
+For the highest emphasis, use the filled style. For the lowest emphasis, use
+standard.
+
 ### Default icon button
 
 *   Default icon buttons can open other elements, such as a menu or search.
 *   Default icon buttons should use filled icons.
 
+Single icons can be used for additional, supplementary actions. They're best for
+areas of a compact layout, such as a toolbar.
+
+The default dimensions allow for a touch target of `48dp`. If using an icon
+bigger than the default size, the padding dimensions should be adjusted to
+preserve the circular shape. `android:inset*` dimensions can also be adjusted if
+less empty space is desired around the icon.
+
+Always include an `android:contentDescription` so that icon only buttons are
+readable for screen readers.
+
+![Default icon button.](assets/buttons/iconbuttons-default.png)
+Standard, filled unselected, filled selected, filled tonal, and outlined icon
+buttons
+
+**Note:** The examples below show how to create an icon button using `Button`
+which will be inflated to `MaterialButton` when using a Material theme. There is
+a known performance issue where `MaterialButton` takes longer to initialize when
+compared to `ImageButton` or `AppCompatImageButton`, in large part because
+`MaterialButton` extends from `AppCompatButton` which supports more than just
+icon buttons. Consider using those pure icon button alternatives if the extra
+latency causes a noticeable issue for your app.
+
+#### Adding icon button
+
+<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 icon only button in light theme](assets/buttons/iconbutton-default-light-theme.png)|![Checked expressive filled icon only button in light theme](assets/buttons/iconbutton-checked-light-theme.png) |![Unchecked filled icon button in light theme](assets/buttons/iconbutton-unchecked-light-theme.png)|
+|![Default expressive filled icon only button in dark theme](assets/buttons/iconbutton-default-dark-theme.png)|![Checked expressive filled icon only button in dark theme](assets/buttons/iconbutton-checked-dark-theme.png)|![filled icon only unchecked button_dark](assets/buttons/iconbutton-unchecked-dark-theme.png)|
+
+By default, the standard icon only button is uncheckable. To make it checkable,
+enable the `android:checkable` attribute in style or layout.
+
+```xml
+<Button
+    style="?attr/materialIconButtonFilledStyle"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:contentDescription="@string/icon_description"
+    android:checkable="true"
+    app:icon="@drawable/icon"/>
+```
+
+</details>
+
+<details><summary><h5>Standard</h5></summary>
+
+|Default <div style="width:250px"></div>|Checked <div style="width:250px"></div>|Unchecked <div style="width:250px"></div>|
+| ------ | ---- | ---- |
+|![Default expressive standard icon only button in light theme](assets/buttons/iconbutton-standard-default-light-theme.png)|![Checked expressive standard icon only button in light theme](assets/buttons/iconbutton-standard-checked-light-theme.png)|![standard icon only unchecked button_light](assets/buttons/iconbutton-standard-unchecked-light-theme.png)|
+|![Default expressive standard icon only button in dark theme](assets/buttons/iconbutton-standard-default-dark-theme.png)|![Checked expressive standard icon only button in dark theme](assets/buttons/iconbutton-standard-checked-dark-theme.png)|![standard icon only unchecked button_dark](assets/buttons/iconbutton-standard-unchecked-dark-theme.png)|
+
+By default, the standard icon only button is uncheckable. To make it checkable,
+enable the `android:checkable` attribute in style or layout.
+
+```xml
+<Button
+    style="?attr/materialIconButtonStyle"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:contentDescription="@string/icon_description"
+    android:checkable="true"
+    app:icon="@drawable/icon"/>
+```
+
+</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 icon only button in light theme](assets/buttons/iconbutton-filledtonal-default-light-theme.png)|![Checked expressive filled tonal icon only button in light theme](assets/buttons/iconbutton-filledtonal-checked-light-theme.png) |![filled tonal icon only unchecked button_light](assets/buttons/iconbutton-filledtonal-unchecked-light-theme.png)|
+|![Default expressive filled tonal icon only button in dark theme](assets/buttons/iconbutton-filledtonal-default-dark-theme.png)|![Checked expressive filled tonal icon only button in dark theme](assets/buttons/iconbutton-filledtonal-checked-dark-theme.png)|![filled tonal icon only unchecked button_dark](assets/buttons/iconbutton-filledtonal-unchecked-dark-theme.png)|
+
+By default, the standard icon only button is uncheckable. To make it checkable,
+enable the `android:checkable` attribute in style or layout.
+
+```xml
+<Button
+    style="?attr/materialIconButtonFilledTonalStyle"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:contentDescription="@string/icon_description"
+    android:checkable="true"
+    app:icon="@drawable/icon"/>
+```
+
+</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 icon only button in light theme](assets/buttons/iconbutton-outlined-default-light-theme.png)|![Checked expressive outlined icon only button in light theme](assets/buttons/iconbutton-outlined-checked-light-theme.png)|![outlined icon only unchecked button_light](assets/buttons/iconbutton-outlined-unchecked-light-theme.png)|
+|![Default expressive outlined icon only button in dark theme](assets/buttons/iconbutton-outlined-default-dark-theme.png)|![Checked expressive outlined icon only button in dark theme](assets/buttons/iconbutton-outlined-checked-dark-theme.png)|![outlined icon only unchecked button_dark](assets/buttons/iconbutton-outlined-unchecked-dark-theme.png)|
+
+By default, the standard icon only button is uncheckable. To make it checkable,
+enable the `android:checkable` attribute in style or layout.
+
+```xml
+<Button
+    style="?attr/materialIconButtonOutlinedStyle"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:contentDescription="@string/icon_description"
+    android:checkable="true"
+    app:icon="@drawable/icon"/>
+```
+
+</details>
+
 ### Toggle icon button
 
 *   Toggle icon buttons can represent binary actions that can be toggled on and
@@ -110,120 +405,7 @@ and
 *   Toggle buttons should use an outlined icon when unselected, and a filled
     version of the icon when selected.
 
-**There are four icon button color styles, in order of emphasis:**
-
-1.  Filled
-2.  Tonal
-3.  Outlined
-4.  Standard
-
-For the highest emphasis, use the filled style. For the lowest emphasis, use
-standard.
-
-![Diagram of default and toggle icon buttons in 4 color styles.](assets/buttons/iconbuttons_color.png)
-
-The default (left) and toggle (right) icon buttons are available in all four
-color styles
-
-## Code implementation
-
-**Note:** The examples below show how to create an icon button using `Button`
-which will be inflated to `MaterialButton` when using a Material theme. There is
-a known performance issue where `MaterialButton` takes longer to initialize when
-compared to `ImageButton` or `AppCompatImageButton`, in large part because
-`MaterialButton` extends from `AppCompatButton` which supports more than just
-icon buttons. Consider using those pure icon button alternatives if the extra
-latency causes a noticeable issue for your app.
-
-![Code implementation for icon buttons.](assets/buttons/iconbuttons_codeimplementation.png)
-Standard, filled unselected, filled selected, filled tonal, and outlined icon
-buttons
-
-### Adding standard icon button
-
-The following example shows a standard icon button.
-
-!["Standard icon button example for Android over a white background."](assets/buttons/icon-button-standard.png)
-
-In the layout:
-
-```xml
-<Button
-    style="?attr/materialIconButtonStyle"
-    android:id="@+id/iconButton"
-    android:layout_width="wrap_content"
-    android:layout_height="wrap_content"
-    android:contentDescription="@string/standard_icon_btn_desc"
-    app:icon="@drawable/ic_icon_24dp"
-/>
-```
-
-In code:
-
-```kt
-iconButton.addOnButtonCheckedListener { iconButton, checkedId, isChecked ->
-    // Respond to button selection
-}
-```
-
-### Adding filled icon button
-
-The following example shows a contained icon button that is filled.
-
-!["Filled icon button example for Android over a white background."](assets/buttons/filled-icon-button.png)
-
-In the layout:
-
-```xml
-<Button
-    style="?attr/materialIconButtonFilledStyle"
-    android:id="@+id/iconButton"
-    android:layout_width="wrap_content"
-    android:layout_height="wrap_content"
-    android:contentDescription="@string/filled_icon_btn_desc"
-    app:icon="@drawable/ic_icon_24dp"
-/>
-```
-
-### Adding filled tonal icon button
-
-The following example shows a tonal icon button.
-
-!["Filled tonal icon button example for Android over a white background."](assets/buttons/filled-tonal-icon-button.png)
-
-In the layout:
-
-```xml
-<Button
-    style="?attr/materialIconButtonFilledTonalStyle"
-    android:id="@+id/iconButton"
-    android:layout_width="wrap_content"
-    android:layout_height="wrap_content"
-    android:contentDescription="@string/filled_tonal_icon_btn_desc"
-    app:icon="@drawable/ic_icon_24dp"
-/>
-```
-
-### Adding outlined icon button
-
-The following example shows an outlined icon button.
-
-!["Outlined icon button example for Android over a white background."](assets/buttons/outlined-icon-button.png)
-
-In the layout:
-
-```xml
-<Button
-    style="?attr/materialIconButtonOutlinedStyle"
-    android:id="@+id/iconButton"
-    android:layout_width="wrap_content"
-    android:layout_height="wrap_content"
-    android:contentDescription="@string/outlined_icon_btn_desc"
-    app:icon="@drawable/ic_icon_24dp"
-/>
-```
-
-### Adding toggle icon button
+#### Adding toggle icon button
 
 In toggle buttons, use the outlined style of an icon for the unselected state,
 and the filled style for the selected state.
@@ -249,6 +431,8 @@ outlined and filled icons for the toggle icon button:
         android:checkable="true"/>
 ```
 
+## Code implementation
+
 ### Making buttons accessible
 
 Buttons support content labeling for accessibility and are readable by most

docs/components/Slider.md

@@ -12,7 +12,7 @@ path: /catalog/sliders/
 [Sliders](https://m3.material.io/components/sliders/) let users make selections
 from a range of values. There are three variants of sliders.
 
-!["Slider examples of both standard, centered, and range sliders."](assets/slider/slider_types.png)
+!["Slider examples of both standard, centered, and range sliders."](assets/slider/slider-types.png)
 
 1.  Standard
 2.  Centered
@@ -27,7 +27,7 @@ from a range of values. There are three variants of sliders.
 
 ## Anatomy
 
-![Slider anatomy diagram](assets/slider/slider_anatomy.png)
+![Slider anatomy diagram](assets/slider/slider-anatomy.png)
 
 1.  Value indicator (optional)
 2.  Stop indicators (optional)
@@ -39,7 +39,9 @@ from a range of values. There are three variants of sliders.
 More details on anatomy items in the
 [component guidelines](https://m3.material.io/components/sliders/guidelines#b3701f5e-128a-4807-bca7-033402b4266a).
 
-## 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).
@@ -59,6 +61,17 @@ an inset icon.
 *   Optional inset icon (standard slider only)
 *   Sizes: XS (existing default), S, M, L, XL
 
+### M3 Expressive styles
+
+The expressive slider comes with 5 pre-defined styles varying in track thickness
+and corner size:
+
+- `Widget.Material3Expressive.Slider.Xsmall` (default)
+- `Widget.Material3Expressive.Slider.Small`
+- `Widget.Material3Expressive.Slider.Medium`
+- `Widget.Material3Expressive.Slider.Large`
+- `Widget.Material3Expressive.Slider.Xlarge`
+
 ## Key properties
 
 ### Track attributes
@@ -190,7 +203,7 @@ API and source code:
 
 **Add a `Standard slider` to a layout:**
 
-<img src="assets/slider/slider_standard.png" alt="Standard slider"width=400>
+<img src="assets/slider/slider-standard.png" alt="Standard slider"width=400>
 
 ```xml
 <com.google.android.material.slider.Slider
@@ -208,7 +221,7 @@ API and source code:
 Stop indicators show which predetermined values can be chosen on the slider. The
 slider handle snaps to the closest stop.
 
-<img src="assets/slider/slider_standard_stopindicator.png" alt="A discrete slider with a thumb that can be dragged to change the selected value."width=400/>
+<img src="assets/slider/slider-standard-stopindicator.png" alt="A discrete slider with a thumb that can be dragged to change the selected value."width=400/>
 
 ```xml
 <com.google.android.material.slider.Slider
@@ -243,7 +256,7 @@ this when zero, or the default value, is in the middle of the range.
 
 **Add a `centered slider` to a layout:**
 
-<img src="assets/slider/slider_centered_horizontal.png" alt="Centered slider." width="300">
+<img src="assets/slider/slider-centered-horizontal.png" alt="Centered slider." width="300">
 
 ```xml
 <com.google.android.material.slider.Slider
@@ -268,7 +281,7 @@ maximum value.
 
 **Add a `range slider` to a layout:**
 
-<img src="assets/slider/slider_range.png" alt="Range slider." width="300">
+<img src="assets/slider/slider-range.png" alt="Range slider." width="300">
 
 ```xml
 <com.google.android.material.slider.RangeSlider
@@ -286,7 +299,7 @@ maximum value.
 Stop indicators show which predetermined values can be chosen on the slider. The
 slider handle snaps to the closest stop.
 
-<img src="assets/slider/slider_discrete_range.png" alt="Discrete range slider." width="400"/>
+<img src="assets/slider/slider-discrete-range.png" alt="Discrete range slider." width="400"/>
 
 ```xml
 <com.google.android.material.slider.RangeSlider
@@ -360,7 +373,7 @@ indicate magnitude (e.g.: 1.5K, 3M, 12B). That can be achieved through the
 
 The following example shows a slider for a price range in USD currency.
 
-<img src="assets/slider/slider_price.png" alt="Range slider with range of $0 to $10. Left thumb is set at $2, right thumb
+<img src="assets/slider/slider-price.png" alt="Range slider with range of $0 to $10. Left thumb is set at $2, right thumb
 at $7." width="400"/>
 
 In code:
@@ -392,7 +405,7 @@ API and source code:
 
 The following example shows a range slider with Material theming.
 
-!["Slider theming example with pink and brown colors."](assets/slider/slider_theming.png)
+!["Slider theming example with pink and brown colors."](assets/slider/slider-theming.png)
 
 ##### Implementing slider theming
 

docs/components/SplitButton.md

@@ -14,7 +14,7 @@ menu to give people more options related to an action. It is a specialized type
 of the connected button group. The trailing button is checkable with an animated
 icon.
 
-![Split button hero ](assets/buttons/splitbutton_hero.png)
+![Split button hero ](assets/buttons/splitbutton-hero.png)
 
 **Note:** Images use various dynamic color schemes.
 
@@ -25,7 +25,7 @@ icon.
 
 ## Anatomy
 
-![Anatomy of a split button](assets/buttons/splitbutton_anatomy.png)
+![Anatomy of a split button](assets/buttons/splitbutton-anatomy.png)
 
 1.  Leading button
 2.  Icon
@@ -35,19 +35,22 @@ icon.
 More details on anatomy items in the
 [component guidelines](https://m3.material.io/components/split-button/guidelines#551f6e11-0f95-41c2-9398-cd4066755806).
 
-## 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/splitbutton_expressive.png" alt="5 sizes of split buttons." height="400"/>
+<img src="assets/buttons/splitbutton-expressive.png" alt="5 sizes of split buttons." height="400"/>
 Split buttons have the same five recommended sizes as label and icon buttons
 
 The split button has a separate menu button that spins and changes shape when
 activated. It can be used alongside other buttons of the same size.
 [More on M3 Expressive](https://m3.material.io/blog/building-with-m3-expressive)
 
-New component added to catalog.
+Split button is a new component added in expressive, a special type of connected
+button group.
 
 **Sizes:**
 
@@ -107,7 +110,7 @@ page.
 
 The leading button in split buttons can have an icon, label text, or both. The
 trailing button should always have a menu icon.
-![Examples of using split button](assets/buttons/split_button.png)
+![Examples of using split button](assets/buttons/split-button.png)
 
 1.  Label + icon
 2.  Label

docs/components/ToggleButtonGroup.md

@@ -33,7 +33,7 @@ buttons that can be placed in a toggle button group:
 
 A toggle button has a shared stroked container, icons and/or text labels.
 
-![Toggle button group anatomy](assets/buttons/togglebuttongroup_anatomy.png)
+![Toggle button group anatomy](assets/buttons/togglebuttongroup-anatomy.png)
 
 1.  Container
 2.  Icon (optional for unselected state)
@@ -42,13 +42,20 @@ A toggle button has a shared stroked container, icons and/or text labels.
 More details on anatomy items in the
 [component guidelines](https://m3.material.io/components/segmented-buttons/guidelines#75ec9219-0196-4c59-bd6a-ed9a1b481013).
 
-## M3 Expressive update
+## M3 Expressive
+
+### M3 Expressive update
 
 The segmented button is being deprecated. Use the
 [connected button group](https://github.com/material-components/material-components-android/tree/master/docs/components/ButtonGroup.md)
 instead.
 [More on M3 Expressive](https://m3.material.io/blog/building-with-m3-expressive)
 
+### M3 Expressive style
+
+Default style in the expressive themes:
+`Widget.Material3Expressive.MaterialButtonToggleGroup`
+
 ## Key properties
 
 ### Selection attributes
@@ -216,7 +223,7 @@ The following example shows an icon that can be used independently or in items
 of a `RecyclerView`.
 
 ![Toggle icon example showing 4 images, heart icon in the upper-right corner of
-each image](assets/buttons/android_toggle_button.png)
+each image](assets/buttons/android-toggle-button.png)
 
 In the layout: