[Docs] Updated documentation with additional code/info and updated the nomenclature of images in the following docs:

1. BottomSheet
2. Checkbox
3. DatePicker
4. Divider
5. Menu
6. RadioButton
7. Snackbar
8. TimePicker

PiperOrigin-RevId: 799044653

Author: Material Design Team

docs/components/BottomSheet.md

@@ -13,7 +13,7 @@ path: /catalog/bottom-sheet-behavior/
 secondary content anchored to the bottom of the screen. There are two variants
 of bottom sheets.
 
-![Bottom sheets types](assets/bottomsheet/bottomsheets_types.png)
+![Bottom sheets types](assets/bottomsheet/bottomsheets-types.png)
 
 1.  Standard bottom sheet
 2.  Modal bottom sheet
@@ -30,7 +30,7 @@ of bottom sheets.
 Modal bottom sheets are above a scrim while standard bottom sheets don't have a
 scrim. Besides this, both types of bottom sheets have the same specs.
 
-![Bottom sheet anatomy](assets/bottomsheet/bottomsheet_anatomy.png)
+![Bottom sheet anatomy](assets/bottomsheet/bottomsheet-anatomy.png)
 
 1.  Container
 2.  Drag handle (optional)
@@ -126,7 +126,7 @@ expanded states:
 
 Collapsed <div style="width:400px"></div>                                                                             | Expanded <div style="width:400px"></div>
 --------------------------------------------------------------------------------------------------------------------- | ----------------------------------------
-<img src="assets/bottomsheet/bottomsheet_standard1.png" alt="Standard collapsed bottom sheet example." height="500"/> | <img src="assets/bottomsheet/bottomsheet_standard2.png" alt="Standard expanded bottom sheet example." height="500"/>
+<img src="assets/bottomsheet/bottomsheet-standard1.png" alt="Standard collapsed bottom sheet example." height="500"/> | <img src="assets/bottomsheet/bottomsheet-standard2.png" alt="Standard expanded bottom sheet example." height="500"/>
 
 `BottomSheetBehavior` works in tandem with `CoordinatorLayout` to let you
 display content on a bottom sheet, perform enter/exit animations, respond to
@@ -224,7 +224,7 @@ states:
 
 Collapsed <div style="width:400px"></div>                                                                       | Expanded <div style="width:400px"></div>
 --------------------------------------------------------------------------------------------------------------- | ----------------------------------------
-<img src="assets/bottomsheet/bottomsheet_modal1.png" alt="Modal collapsed bottom sheet example." height="500"/> | <img src="assets/bottomsheet/bottomsheet_modal2.png" alt="Modal expanded bottom sheet example." height="500"/>
+<img src="assets/bottomsheet/bottomsheet-modal1.png" alt="Modal collapsed bottom sheet example." height="500"/> | <img src="assets/bottomsheet/bottomsheet-modal2.png" alt="Modal expanded bottom sheet example." height="500"/>
 
 First, subclass `BottomSheetDialogFragment` and overwrite `onCreateView` to
 provide a layout for the contents of the sheet (in this example, it's
@@ -550,7 +550,7 @@ API and source code:
 The following example shows a bottom sheet with Material theming, in its
 collapsed and expanded states.
 
-<img src="assets/bottomsheet/bottomsheet_theming.png" alt="Bottom sheet with pink background color. Collapsed on the left and expanded on the right." height="550"/>
+<img src="assets/bottomsheet/bottomsheet-theming.png" alt="Bottom sheet with pink background color. Collapsed on the left and expanded on the right." height="550"/>
 
 ##### Implementing bottom sheet theming
 

docs/components/Checkbox.md

@@ -12,7 +12,7 @@ path: /catalog/checkboxes/
 [Checkboxes](https://m3.material.io/components/checkbox/overview) let users
 select one or more items from a list, or turn an item on or off.
 
-<img src="assets/checkbox/checkbox_hero.png" alt="Checkbox hero: meal options header, additions checkbox, pickles, lettuce, tomato, checkboxes with lettuce checked" width="900">
+<img src="assets/checkbox/checkbox-hero.png" alt="Checkbox hero: meal options header, additions checkbox, pickles, lettuce, tomato, checkboxes with lettuce checked" width="900">
 
 **Note:** Images use various dynamic color schemes.
 
@@ -23,7 +23,7 @@ select one or more items from a list, or turn an item on or off.
 
 ## Anatomy
 
-![Checkbox anatomy diagram](assets/checkbox/checkbox_anatomy.png)
+![Checkbox anatomy diagram](assets/checkbox/checkbox-anatomy.png)
 
 1.  Container
 2.  Icon
@@ -64,7 +64,7 @@ Element        | Attribute                | Related method(s)                  |
 Checkboxes can be selected, unselected, or indeterminate, and those states on
 error. Checkboxes have enabled, disabled, hover, focused, and pressed states.
 
-<img src="assets/checkbox/checkbox_states.png" alt="Checkbox states in an array. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite, and selected on error, unselected on error, or indeterminate on error." width="700">
+<img src="assets/checkbox/checkbox-states.png" alt="Checkbox states in an array. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite, and selected on error, unselected on error, or indeterminate on error." width="700">
 
 1.  Enabled
 2.  Disabled
@@ -112,7 +112,7 @@ The first checkbox (the parent) will be selected if all children are selected,
 not selected if all of the children are not selected, and indeterminate if only
 some of the children are selected.
 
-<img src="assets/checkbox/checkbox_example.png" alt="Example of 5 checkboxes, the first one is the parent and the ones below it are the children." height="350">
+<img src="assets/checkbox/checkbox-example.png" alt="Example of 5 checkboxes, the first one is the parent and the ones below it are the children." height="350">
 
 In the layout:
 
@@ -291,7 +291,7 @@ checkbox.errorAccessibilityLabel = "Error: custom error announcement."
 
 ### Making checkbox indeterminate
 
-![Checkbox states - unselected, selected(hover), and indeterminate checkboxes](assets/checkbox/checkbox_checked_unchecked_.png)
+![Checkbox states - unselected, selected(hover), and indeterminate checkboxes](assets/checkbox/checkbox-checked-unchecked.png)
 Unselected, selected (hover), and indeterminate checkboxes
 
 In the layout:
@@ -334,7 +334,7 @@ API and source code:
 
 The following example shows a checkbox with Material theming.
 
-<img src="assets/checkbox/checkbox_theming.png" alt="A parent checkbox and
+<img src="assets/checkbox/checkbox-theming.png" alt="A parent checkbox and
 children checkboxes. They container is pink, the outline is brown, and the icon
 is white." height="350">
 

docs/components/DatePicker.md

@@ -12,7 +12,7 @@ path: /catalog/date-pickers/
 [Date pickers](https://material.io/components/date-pickers) let users select a
 date or range of dates.There are three variants of date pickers.
 
-<img src="assets/datepicker/datepickers_types.png" alt="Date picker and range picker examples."/>
+<img src="assets/datepicker/datepickers-types.png" alt="Date picker and range picker examples."/>
 
 1.  Docked date picker
 2.  Modal date picker
@@ -31,7 +31,7 @@ date or range of dates.There are three variants of date pickers.
 
 <summary><h4>Docked date picker</h4></summary>
 
-<img src="assets/datepicker/dockeddatepicker_anatomy1.png" alt="10 elements of a docked date picker." height="600"/>
+<img src="assets/datepicker/dockeddatepicker-anatomy1.png" alt="10 elements of a docked date picker." height="600"/>
 
 1.  Outlined text field
 2.  Menu button: Month selection
@@ -44,7 +44,7 @@ date or range of dates.There are three variants of date pickers.
 9.  Text buttons
 10. Container
 
-<img src="assets/datepicker/dockeddatepicker_anatomy2.png" alt="8 elements of a docked date picker." height="600"/>
+<img src="assets/datepicker/dockeddatepicker-anatomy2.png" alt="8 elements of a docked date picker." height="600"/>
 
 1.  Outlined text field
 2.  Menu button: Month selection (pressed)
@@ -61,7 +61,7 @@ date or range of dates.There are three variants of date pickers.
 
 <summary><h4>Modal date picker</h4></summary>
 
-<img src="assets/datepicker/modaldatepicker_anatomy1.png" alt="13 elements of a modal date picker." height="600"/>
+<img src="assets/datepicker/modaldatepicker-anatomy1.png" alt="13 elements of a modal date picker." height="600"/>
 
 1.  Headline
 2.  Supporting text
@@ -71,12 +71,13 @@ date or range of dates.There are three variants of date pickers.
 6.  Icon buttons
 7.  Weekdays
 8.  Today’s date
-9.  Unselected date 10.Text buttons
-10. Selected date
-11. Menu button
-12. Divider
+9.  Unselected date
+10. Text buttons
+11. Selected date
+12. Menu button
+13. Divider
 
-<img src="assets/datepicker/modaldatepicker_anatomy2.png" alt="10 elements of a modal date picker." height="600"/>
+<img src="assets/datepicker/modaldatepicker-anatomy2.png" alt="10 elements of a modal date picker." height="600"/>
 
 1.  Headline
 2.  Supporting text
@@ -86,9 +87,10 @@ date or range of dates.There are three variants of date pickers.
 6.  Unselected year
 7.  Selected year
 8.  Text buttons
-9.  Divider 10 Menu button
+9.  Divider
+10. Menu button
 
-<img src="assets/datepicker/modaldatepicker_anatomy3.png" alt="15 elements of a modal date picker." height="650"/>
+<img src="assets/datepicker/modaldatepicker-anatomy3.png" alt="15 elements of a modal date picker." height="650"/>
 
 1.  Headline
 2.  Supporting text
@@ -112,7 +114,7 @@ date or range of dates.There are three variants of date pickers.
 
 <summary><h4>Modal date input</h4></summary>
 
-<img src="assets/datepicker/modaldateinput_anatomy.png" alt="8 elements of a modal date input."/>
+<img src="assets/datepicker/modaldateinput-anatomy.png" alt="8 elements of a modal date input."/>
 
 1.  Headline
 2.  Supporting text
@@ -267,7 +269,7 @@ app:layout_constraintTop_toTopOf="parent"
 app:endIconMode="custom"
 app:endIconDrawable="@drawable/ic_android_black_24dp"
 app:endIconContentDescription="Open Date Picker"
-style="@style/Widget.Material3.TextInputLayout.OutlinedBox">
+style="?attr/textInputOutlinedStyle">
 
 <com.google.android.material.textfield.TextInputEditText
 android:id="@+id/booking_date_edit_text"
@@ -358,7 +360,7 @@ datePicker.show()
 The following example shows a **modal date range picker** with a date range
 selected.
 
-  <img src="assets/datepicker/datepickers_range_example.png" alt="Date range picker with September, 20 to September, 24 selected" height="700"/>
+  <img src="assets/datepicker/datepickers-range-example.png" alt="Date range picker with September, 20 to September, 24 selected" height="700"/>
 
 In code:
 
@@ -599,7 +601,7 @@ API and source code:
 
 The following example shows a date picker with Material theming.
 
-<img src="assets/datepicker/datepickers_hero.png" alt="Mobile date picker for September 2021 with '21' selected." height="637"/>
+<img src="assets/datepicker/datepickers-hero.png" alt="Mobile date picker for September 2021 with '21' selected." height="637"/>
 
 Use theme attributes and styles in `res/values/styles.xml`, which apply to all
 date pickers and affect other components:

docs/components/Divider.md

@@ -14,7 +14,7 @@ that group content in lists or other containers. Dividers are one way to
 visually group components and create hierarchy. They can also be used to imply
 nested parent/child relationships.
 
-![Divider with full width](assets/dividers/divider_fullwidth.png)
+![Divider with full width](assets/dividers/divider-fullwidth.png)
 
 **Note:** Images use various dynamic color schemes.
 
@@ -25,7 +25,7 @@ nested parent/child relationships.
 
 ## Anatomy
 
-![Anatomy of a divider](assets/dividers/divider_anatomy.png)
+![Anatomy of a divider](assets/dividers/divider-anatomy.png)
 
 1.  Divider
 
@@ -64,7 +64,7 @@ There are two types of dividers:
 
 ### Full width divider
 
-<img src="assets/dividers/divider_full_width_type.png" alt="Full width divider" height="350">
+<img src="assets/dividers/divider-full-width-type.png" alt="Full width divider" height="350">
 Full width dividers to indicate separation of content
 
 Full width dividers separate larger sections of unrelated content. They also
@@ -73,7 +73,7 @@ on a surface or inside other components like cards or lists.
 
 ### Inset divider
 
-<img src="assets/dividers/divider_inset.png" alt="Inset divider" height="400">
+<img src="assets/dividers/divider-inset.png" alt="Inset divider" height="400">
 Inset divider to indicate separation of content
 
 Inset dividers separate related content within a section. They are equally
@@ -102,7 +102,7 @@ into clear groups.
 
 The full-bleed divider is displayed below:
 
-![Gray full-bleed divider example](assets/dividers/divider_view.png)
+![Gray full-bleed divider example](assets/dividers/divider-view.png)
 
 On the layout:
 
@@ -130,6 +130,31 @@ divider.setDividerInsetStart(insetStart)
 divider.setDividerInsetEnd(insetEnd)
 ```
 
+### Adding heavy divider
+
+![Heavy divider example](assets/dividers/heavy-divider.png)
+
+Heavy dividers are used for indicating a visual break or stop between major
+sections in a long page. They are used as an additional level of visual
+differentiation and hierarchy within a layout.
+
+Note: Make sure to set `android:layout_height="wrap_content"` on the
+`MaterialDivider` to ensure that the correct size is set for the divider.
+
+```xml
+<com.google.android.material.divider.MaterialDivider
+    style="?attr/materialDividerHeavyStyle"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:layout_marginTop="16dp"
+    android:layout_marginBottom="16dp" />
+```
+
+Note: Heavy dividers are automatically used as the default for dividers set to
+`?attr/materialDividerHeavyStyle`, which points to
+`@style/Widget.Material3.MaterialDivider.Heavy`. To get the heavy divider,
+you should set the divider style to `?attr/materialDividerHeavyStyle`.
+
 ### Adding `MaterialDividerItemDecoration`
 
 API and source code:
@@ -142,9 +167,13 @@ The `MaterialDividerItemDecoration` is a `RecyclerView.ItemDecoration`, similar
 to a `DividerItemDecoration`, that can be used as a divider between items of a
 `LinearLayoutManager`. It supports both horizontal and vertical orientations.
 
+Divider in a vertically oriented RecyclerView:
+
+![Vertical divider example](assets/dividers/vertical-divider.png)
+
 A list with full-bleed dividers is displayed below:
 
-<img src="assets/dividers/divider_itemdecoration.png" alt="Vertical list of five items with five gray dividers after each item" height="300">
+<img src="assets/dividers/divider-itemdecoration.png" alt="Vertical list of five items with five gray dividers after each item" height="300">
 
 In code:
 
@@ -156,7 +185,7 @@ recyclerView.addItemDecoration(divider)
 By default, dividers will be full-bleed. To achieve the look of an inset or
 middle divider:
 
-<img src="assets/dividers/divider_itemdecoration_inset.png" alt="Vertical list of five items with five gray dividers that have a start inset" height="300">
+<img src="assets/dividers/divider-itemdecoration-inset.png" alt="Vertical list of five items with five gray dividers that have a start inset" height="300">
 
 In code:
 
@@ -167,7 +196,7 @@ divider.setDividerInsetEnd(insetEnd)
 
 Optionally, you can hide the last divider of a list:
 
-<img src="assets/dividers/divider_itemdecoration_hiddendivider.png" alt="Vertical list of five items with four gray dividers" height="300">
+<img src="assets/dividers/divider-itemdecoration-hiddendivider.png" alt="Vertical list of five items with four gray dividers" height="300">
 
 In code:
 
@@ -199,7 +228,7 @@ API and source code:
 
 The following example shows a divider with Material theming.
 
-<img src="assets/dividers/divider_theming.png" alt="Pink full-bleed divider" width="850">
+<img src="assets/dividers/divider-theming.png" alt="Pink full-bleed divider" width="850">
 
 ##### Implementing divider theming