feat: add --md-sys-shape-* tokens for all components

PiperOrigin-RevId: 607427925

docs/components/button.md

@@ -410,7 +410,7 @@ in terms of color, typography, and shape.
 Token                                   | Default value
 --------------------------------------- | -------------------------------------
 `--md-elevated-button-container-color`  | `--md-sys-color-surface`
-`--md-elevated-button-container-shape`  | `9999px`
+`--md-elevated-button-container-shape`  | `--md-sys-shape-corner-full`
 `--md-elevated-button-label-text-color` | `--md-sys-color-on-surface`
 `--md-elevated-button-label-text-font`  | `--md-sys-typescale-label-large-font`
 
@@ -470,7 +470,7 @@ Token                                   | Default value
 Token                                 | Default value
 ------------------------------------- | -------------------------------------
 `--md-filled-button-container-color`  | `--md-sys-color-primary`
-`--md-filled-button-container-shape`  | `9999px`
+`--md-filled-button-container-shape`  | `--md-sys-shape-corner-full`
 `--md-filled-button-label-text-color` | `--md-sys-color-on-primary`
 `--md-filled-button-label-text-font`  | `--md-sys-typescale-label-large-font`
 
@@ -530,7 +530,7 @@ Token                                 | Default value
 Token                                       | Default value
 ------------------------------------------- | -------------
 `--md-filled-tonal-button-container-color`  | `--md-sys-color-secondary-container`
-`--md-filled-tonal-button-container-shape`  | `9999px`
+`--md-filled-tonal-button-container-shape`  | `--md-sys-shape-corner-full`
 `--md-filled-tonal-button-label-text-color` | `--md-sys-color-on-secondary-container`
 `--md-filled-tonal-button-label-text-font`  | `--md-sys-typescale-label-large-font`
 
@@ -590,7 +590,7 @@ Token                                       | Default value
 Token                                   | Default value
 --------------------------------------- | -------------------------------------
 `--md-outlined-button-outline-color`    | `--md-sys-color-outline`
-`--md-outlined-button-container-shape`  | `9999px`
+`--md-outlined-button-container-shape`  | `--md-sys-shape-corner-full`
 `--md-outlined-button-label-text-color` | `--md-sys-color-primary`
 `--md-outlined-button-label-text-font`  | `--md-sys-typescale-label-large-font`
 

docs/components/chip.md

@@ -352,7 +352,7 @@ terms of color, typography, and shape.
 Token                               | Default value
 ----------------------------------- | -------------------------------------
 `--md-assist-chip-outline-color`    | `--md-sys-color-outline`
-`--md-assist-chip-container-shape`  | `8px`
+`--md-assist-chip-container-shape`  | `--md-sys-shape-corner-small`
 `--md-assist-chip-icon-size`        | `18px`
 `--md-assist-chip-label-text-color` | `--md-sys-color-on-surface`
 `--md-assist-chip-label-text-font`  | `--md-sys-typescale-label-large-font`
@@ -386,7 +386,7 @@ Token                                       | Default value
 ------------------------------------------- | -------------
 `--md-filter-chip-selected-container-color` | `--md-sys-color-secondary-container`
 `--md-filter-chip-outline-color`            | `--md-sys-color-outline`
-`--md-filter-chip-container-shape`          | `8px`
+`--md-filter-chip-container-shape`          | `--md-sys-shape-corner-small`
 `--md-filter-chip-icon-size`                | `18px`
 `--md-filter-chip-label-text-color`         | `--md-sys-color-on-surface`
 `--md-filter-chip-label-text-font`          | `--md-sys-typescale-label-large-font`
@@ -420,7 +420,7 @@ Token                                       | Default value
 Token                              | Default value
 ---------------------------------- | -------------------------------------
 `--md-input-chip-outline-color`    | `--md-sys-color-outline`
-`--md-input-chip-container-shape`  | `8px`
+`--md-input-chip-container-shape`  | `--md-sys-shape-corner-small`
 `--md-input-chip-icon-size`        | `18px`
 `--md-input-chip-label-text-color` | `--md-sys-color-on-surface`
 `--md-input-chip-label-text-font`  | `--md-sys-typescale-label-large-font`
@@ -453,7 +453,7 @@ Token                              | Default value
 Token                                   | Default value
 --------------------------------------- | -------------------------------------
 `--md-suggestion-chip-outline-color`    | `--md-sys-color-outline`
-`--md-suggestion-chip-container-shape`  | `8px`
+`--md-suggestion-chip-container-shape`  | `--md-sys-shape-corner-small`
 `--md-suggestion-chip-icon-size`        | `18px`
 `--md-suggestion-chip-label-text-color` | `--md-sys-color-on-surface`
 `--md-suggestion-chip-label-text-font`  | `--md-sys-typescale-label-large-font`
@@ -494,7 +494,7 @@ Token                                   | Default value
 
 Property | Attribute | Type | Default | Description
 --- | --- | --- | --- | ---
-`chips` |  | `Chip[]` | `undefined` | 
+`chips` |  | `Chip[]` | `undefined` |
 
 <!-- mdformat on(autogenerated might break rendering in catalog) -->
 
@@ -506,9 +506,9 @@ Property | Attribute | Type | Default | Description
 
 Property | Attribute | Type | Default | Description
 --- | --- | --- | --- | ---
-`elevated` | `elevated` | `boolean` | `false` | 
-`href` | `href` | `string` | `''` | 
-`target` | `target` | `string` | `''` | 
+`elevated` | `elevated` | `boolean` | `false` |
+`href` | `href` | `string` | `''` |
+`target` | `target` | `string` | `''` |
 `disabled` | `disabled` | `boolean` | `false` | Whether or not the chip is disabled.<br>Disabled chips are not focusable, unless `always-focusable` is set.
 `alwaysFocusable` | `always-focusable` | `boolean` | `false` | When true, allow disabled chips to be focused with arrow keys.<br>Add this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed.
 `label` | `label` | `string` | `''` | The label of the chip.
@@ -523,14 +523,14 @@ Property | Attribute | Type | Default | Description
 
 Property | Attribute | Type | Default | Description
 --- | --- | --- | --- | ---
-`elevated` | `elevated` | `boolean` | `false` | 
-`removable` | `removable` | `boolean` | `false` | 
-`selected` | `selected` | `boolean` | `false` | 
+`elevated` | `elevated` | `boolean` | `false` |
+`removable` | `removable` | `boolean` | `false` |
+`selected` | `selected` | `boolean` | `false` |
 `disabled` | `disabled` | `boolean` | `false` | Whether or not the chip is disabled.<br>Disabled chips are not focusable, unless `always-focusable` is set.
 `alwaysFocusable` | `always-focusable` | `boolean` | `false` | When true, allow disabled chips to be focused with arrow keys.<br>Add this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed.
 `label` | `label` | `string` | `''` | The label of the chip.
-`handleTrailingActionFocus` |  | `() => void` | `undefined` | 
-`ariaLabelRemove` |  | `string` | `undefined` | 
+`handleTrailingActionFocus` |  | `() => void` | `undefined` |
+`ariaLabelRemove` |  | `string` | `undefined` |
 
 <!-- mdformat on(autogenerated might break rendering in catalog) -->
 
@@ -542,16 +542,16 @@ Property | Attribute | Type | Default | Description
 
 Property | Attribute | Type | Default | Description
 --- | --- | --- | --- | ---
-`avatar` | `avatar` | `boolean` | `false` | 
-`href` | `href` | `string` | `''` | 
-`target` | `target` | `string` | `''` | 
-`removeOnly` | `remove-only` | `boolean` | `false` | 
-`selected` | `selected` | `boolean` | `false` | 
+`avatar` | `avatar` | `boolean` | `false` |
+`href` | `href` | `string` | `''` |
+`target` | `target` | `string` | `''` |
+`removeOnly` | `remove-only` | `boolean` | `false` |
+`selected` | `selected` | `boolean` | `false` |
 `disabled` | `disabled` | `boolean` | `false` | Whether or not the chip is disabled.<br>Disabled chips are not focusable, unless `always-focusable` is set.
 `alwaysFocusable` | `always-focusable` | `boolean` | `false` | When true, allow disabled chips to be focused with arrow keys.<br>Add this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed.
 `label` | `label` | `string` | `''` | The label of the chip.
-`handleTrailingActionFocus` |  | `() => void` | `undefined` | 
-`ariaLabelRemove` |  | `string` | `undefined` | 
+`handleTrailingActionFocus` |  | `() => void` | `undefined` |
+`ariaLabelRemove` |  | `string` | `undefined` |
 
 <!-- mdformat on(autogenerated might break rendering in catalog) -->
 
@@ -563,9 +563,9 @@ Property | Attribute | Type | Default | Description
 
 Property | Attribute | Type | Default | Description
 --- | --- | --- | --- | ---
-`elevated` | `elevated` | `boolean` | `false` | 
-`href` | `href` | `string` | `''` | 
-`target` | `target` | `string` | `''` | 
+`elevated` | `elevated` | `boolean` | `false` |
+`href` | `href` | `string` | `''` |
+`target` | `target` | `string` | `''` |
 `disabled` | `disabled` | `boolean` | `false` | Whether or not the chip is disabled.<br>Disabled chips are not focusable, unless `always-focusable` is set.
 `alwaysFocusable` | `always-focusable` | `boolean` | `false` | When true, allow disabled chips to be focused with arrow keys.<br>Add this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed.
 `label` | `label` | `string` | `''` | The label of the chip.

docs/components/fab.md

@@ -351,7 +351,7 @@ Token                              | Default value
 ---------------------------------- | ---------------------------------------
 `--md-fab-container-color`         | `--md-sys-color-surface-container-high`
 `--md-fab-lowered-container-color` | `--md-sys-color-surface-container-low`
-`--md-fab-container-shape`         | `16px`
+`--md-fab-container-shape`         | `--md-sys-shape-corner-large`
 `--md-fab-icon-color`              | `--md-sys-color-primary`
 `--md-fab-icon-size`               | `24px`
 
@@ -386,9 +386,9 @@ Token                              | Default value
 
 Token                            | Default value
 -------------------------------- | -------------
-`--md-fab-small-container-shape` | `12px`
+`--md-fab-small-container-shape` | `--md-sys-shape-corner-medium`
 `--md-fab-small-icon-size`       | `24px`
-`--md-fab-large-container-shape` | `28px`
+`--md-fab-large-container-shape` | `--md-sys-shape-corner-extra-large`
 `--md-fab-large-icon-size`       | `36px`
 
 #### Extended FAB tokens
@@ -427,7 +427,7 @@ Token                      | Default value
 Token                              | Default value
 ---------------------------------- | ---------------------------------------
 `--md-fab-branded-container-color` | `--md-sys-color-surface-container-high`
-`--md-fab-branded-container-shape` | `16px`
+`--md-fab-branded-container-shape` | `--md-sys-shape-corner-large`
 `--md-fab-branded-icon-size`       | `36px`
 `--md-fab-branded-label-text-font` | `--md-sys-typescale-label-large-font`
 
@@ -515,7 +515,7 @@ Property | Attribute | Type | Default | Description
 
 Method | Parameters | Returns | Description
 --- | --- | --- | ---
-`getRenderClasses` | _None_ | `{ primary: boolean; secondary: boolean; tertiary: boolean; small: boolean; lowered: boolean; large: boolean; extended: boolean; }` | 
+`getRenderClasses` | _None_ | `{ primary: boolean; secondary: boolean; tertiary: boolean; small: boolean; lowered: boolean; large: boolean; extended: boolean; }` |
 
 <!-- mdformat on(autogenerated might break rendering in catalog) -->
 

docs/components/focus-ring.md

@@ -105,7 +105,7 @@ customized in terms of color and shape.
 Token                   | Default value
 ----------------------- | --------------------------
 `--md-focus-ring-color` | `--md-sys-color-secondary`
-`--md-focus-ring-shape` | `9999px`
+`--md-focus-ring-shape` | `--md-sys-shape-corner-full`
 `--md-focus-ring-width` | `3px`
 
 *   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-focus-ring.scss)

docs/components/icon-button.md

@@ -287,7 +287,7 @@ customized in terms of color, and shape.
 Token                                | Default value
 ------------------------------------ | -----------------------------------
 `--md-icon-button-icon-color`        | `--md-sys-color-on-surface-variant`
-`--md-icon-button-state-layer-shape` | `9999px`
+`--md-icon-button-state-layer-shape` | `--md-sys-shape-corner-full`
 `--md-icon-button-icon-size`         | `24px`
 
 *   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-icon-button.scss)
@@ -321,7 +321,7 @@ Token                                | Default value
 Token                                              | Default value
 -------------------------------------------------- | ------------------------
 `--md-filled-icon-button-selected-container-color` | `--md-sys-color-primary`
-`--md-filled-icon-button-container-shape`          | `9999px`
+`--md-filled-icon-button-container-shape`          | `--md-sys-shape-corner-full`
 `--md-filled-icon-button-container-width`          | `40px`
 `--md-filled-icon-button-container-height`         | `40px`
 `--md-filled-icon-button-icon-size`                | `24px`
@@ -359,7 +359,7 @@ Token                                              | Default value
 Token                                                    | Default value
 -------------------------------------------------------- | -------------
 `--md-filled-tonal-icon-button-selected-container-color` | `--md-sys-color-secondary-container`
-`--md-filled-tonal-icon-button-container-shape`          | `9999px`
+`--md-filled-tonal-icon-button-container-shape`          | `--md-sys-shape-corner-full`
 `--md-filled-tonal-icon-button-container-width`          | `40px`
 `--md-filled-tonal-icon-button-container-height`         | `40px`
 `--md-filled-tonal-icon-button-icon-size`                | `24px`
@@ -394,7 +394,7 @@ Token                                        | Default value
 -------------------------------------------- | ------------------------
 `--md-outlined-icon-button-outline-color`    | `--md-sys-color-outline`
 `--md-outlined-icon-button-outline-width`    | `1px`
-`--md-outlined-icon-button-container-shape`  | `9999px`
+`--md-outlined-icon-button-container-shape`  | `--md-sys-shape-corner-full`
 `--md-outlined-icon-button-container-width`  | `40px`
 `--md-outlined-icon-button-container-height` | `40px`
 `--md-outlined-icon-button-icon-size`        | `24px`

docs/components/list.md

@@ -200,7 +200,7 @@ and can be customized in terms of color, typography, and shape.
 Token                                           | Default value
 ----------------------------------------------- | -------------
 `--md-list-container-color`                     | `--md-sys-color-surface`
-`--md-list-item-container-shape`                | `0px`
+`--md-list-item-container-shape`                | `--md-sys-shape-corner-none`
 `--md-list-item-label-text-color`               | `--md-sys-color-on-surface`
 `--md-list-item-supporting-text-color`          | `--md-sys-color-on-surface-variant`
 `--md-list-item-trailing-supporting-text-color` | `--md-sys-color-on-surface-variant`
@@ -322,7 +322,7 @@ Token                                       | Default value
 `--md-list-item-leading-avatar-label-font`  | `--md-sys-typescale-title-medium-font`
 `--md-list-item-leading-avatar-color`       | `--md-sys-color-primary-container`
 `--md-list-item-leading-avatar-size`        | `40px`
-`--md-list-item-leading-avatar-shape`       | `9999px`
+`--md-list-item-leading-avatar-shape`       | `--md-sys-shape-corner-full`
 
 *   [All List Item tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-list-item.scss)
     <!-- {.external} -->
@@ -333,7 +333,7 @@ Token                                 | Default value
 ------------------------------------- | -------------
 `--md-list-item-leading-image-height` | `56px`
 `--md-list-item-leading-image-width`  | `56px`
-`--md-list-item-leading-image-shape`  | `0px`
+`--md-list-item-leading-image-shape`  | `--md-sys-shape-corner-none`
 
 *   [All List Item tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-list-item.scss)
     <!-- {.external} -->

docs/components/menu.md

@@ -433,7 +433,7 @@ the tokens for those components can also be used for Menu.
 Token                                     | Default value
 ----------------------------------------- | ------------------------------------
 `--md-menu-container-color`               | `--md-sys-color-surface-container`
-`--md-menu-container-shape`               | `4px`
+`--md-menu-container-shape`               | `--md-sys-shape-corner-extra-small`
 `--md-menu-item-container-color`          | `--md-sys-color-surface-container`
 `--md-menu-item-selected-container-color` | `--md-sys-color-secondary-container`
 
@@ -532,8 +532,8 @@ Property | Attribute | Type | Default | Description
 `defaultFocus` | `default-focus` | `string` | `FocusState.FIRST_ITEM` | The element that should be focused by default once opened.<br>NOTE: When setting default focus to 'LIST_ROOT', remember to change `tabindex` to `0` and change md-menu's display to something other than `display: contents` when necessary.
 `isSubmenu` |  | `boolean` | `false` | Whether or not the current menu is a submenu and should not handle specific navigation keys.
 `typeaheadController` |  | `TypeaheadController` | `function { ... }` | Handles typeahead navigation through the menu.
-`anchorElement` |  | `HTMLElement & Partial<SurfacePositionTarget>` | `undefined` | 
-`items` |  | `MenuItem[]` | `undefined` | 
+`anchorElement` |  | `HTMLElement & Partial<SurfacePositionTarget>` | `undefined` |
+`items` |  | `MenuItem[]` | `undefined` |
 
 <!-- mdformat on(autogenerated might break rendering in catalog) -->
 
@@ -543,8 +543,8 @@ Property | Attribute | Type | Default | Description
 
 Method | Parameters | Returns | Description
 --- | --- | --- | ---
-`close` | _None_ | `void` | 
-`show` | _None_ | `void` | 
+`close` | _None_ | `void` |
+`show` | _None_ | `void` |
 `activateNextItem` | _None_ | `MenuItem` | Activates the next item in the menu. If at the end of the menu, the first item will be activated.
 `activatePreviousItem` | _None_ | `MenuItem` | Activates the previous item in the menu. If at the start of the menu, the last item will be activated.
 
@@ -577,7 +577,7 @@ Property | Attribute | Type | Default | Description
 `target` | `target` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `target` attribute when `href` is set.
 `keepOpen` | `keep-open` | `boolean` | `false` | Keeps the menu open if clicked or keyboard selected.
 `selected` | `selected` | `boolean` | `false` | Sets the item in the selected visual state when a submenu is opened.
-`typeaheadText` |  | `string` | `undefined` | 
+`typeaheadText` |  | `string` | `undefined` |
 
 <!-- mdformat on(autogenerated might break rendering in catalog) -->
 
@@ -587,7 +587,7 @@ Property | Attribute | Type | Default | Description
 
 Event | Description
 --- | ---
-`close-menu` | 
+`close-menu` |
 
 <!-- mdformat on(autogenerated might break rendering in catalog) -->
 
@@ -604,8 +604,8 @@ Property | Attribute | Type | Default | Description
 `hoverOpenDelay` | `hover-open-delay` | `number` | `400` | The delay between mouseenter and submenu opening.
 `hoverCloseDelay` | `hover-close-delay` | `number` | `400` | The delay between ponterleave and the submenu closing.
 `isSubMenu` | `md-sub-menu` | `boolean` | `true` | READONLY: self-identifies as a menu item and sets its identifying attribute
-`item` |  | `MenuItem` | `undefined` | 
-`menu` |  | `Menu` | `undefined` | 
+`item` |  | `MenuItem` | `undefined` |
+`menu` |  | `Menu` | `undefined` |
 
 <!-- mdformat on(autogenerated might break rendering in catalog) -->
 

docs/components/progress.md

@@ -316,7 +316,7 @@ Token                                          | Default value
 ---------------------------------------------- | -------------
 `--md-linear-progress-track-color`             | `--md-sys-color-surface-container-highest`
 `--md-linear-progress-track-height`            | `4px`
-`--md-linear-progress-track-shape`             | `0px`
+`--md-linear-progress-track-shape`             | `--md-sys-shape-corner-none`
 `--md-linear-progress-active-indicator-color`  | `--md-sys-color-primary`
 `--md-linear-progress-active-indicator-height` | `4px`