material-inspired-component-library 8.1.1 → 9.0.0

package/components/list/index.scss

@@ -19,7 +19,6 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-@use '../../foundations';
 @use '../../styles/elevation';
 @use '../../styles/motion';
 @use '../../styles/shape';
@@ -51,19 +50,27 @@
 @include typography.scale('body-medium');
 @include typography.scale('label-small');
 
-:root {
-    --md-comp-accordion-item-space: 0px;
-}
-
 $item-padding-block: var(--md-comp-list-item-top-space, 10px) var(--md-comp-list-item-bottom-space, 10px);
 $item-padding-inline: var(--md-comp-list-item-leading-space, 16px) var(--md-comp-list-item-trailing-space, 16px);
 
 $open-accordion: ':where(details[open] > *)';
 
+// Each selector group compiles to a single selector.
+$items: ':is(.micl-list-item-one, .micl-list-item-two, .micl-list-item-three)';
+
+// An item is selected when it is a checked option, contains a checked checkbox/switch,
+// or is the summary of an open accordion.
+$selected: ':is(:checked, :has(input[type=checkbox]:checked), #{$open-accordion})';
+$unselected: ':not(:checked, :has(input[type=checkbox]:checked), #{$open-accordion})';
+
 %shared-interactive-states {
     cursor: pointer;
 
-    &:not(:has(input[type=checkbox]:checked)):not(#{$open-accordion}) {
+    &:focus-visible {
+        outline: var(--md-comp-list-item-focus-indicator-thickness, var(--md-sys-state-focus-indicator-thickness, 3px)) solid var(--md-comp-list-item-focus-indicator-color, var(--md-sys-color-secondary));
+        outline-offset: var(--md-comp-list-item-focus-indicator-offset, var(--md-sys-state-focus-indicator-inner-offset, -3px));
+    }
+    &#{$unselected} {
         &:hover {
             --_list-item-shape: var(--md-comp-list-item-container-hovered-expressive-shape, var(--md-sys-shape-corner-medium, 12px));
             --_headline-color: var(--md-comp-list-item-hover-label-text-color, var(--md-sys-color-on-surface));
@@ -83,9 +90,6 @@ $open-accordion: ':where(details[open] > *)';
             --_trailing-text-color: var(--md-comp-list-item-focus-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant));
             --statelayer-color: var(--md-comp-list-item-focus-state-layer-color, var(--md-sys-color-on-surface));
             --statelayer-opacity: var(--md-comp-list-item-focus-state-layer-opacity, var(--md-sys-state-focus-state-layer-opacity, 10%));
-
-            outline: var(--md-comp-list-item-focus-indicator-thickness, var(--md-sys-state-focus-indicator-thickness, 3px)) solid var(--md-comp-list-item-focus-indicator-color, var(--md-sys-color-secondary));
-            outline-offset: var(--md-comp-list-item-focus-indicator-offset, var(--md-sys-state-focus-indicator-inner-offset, -3px));
         }
         &:active {
             --_list-item-shape: var(--md-comp-list-item-container-pressed-expressive-shape, var(--md-sys-shape-corner-large, 16px));
@@ -111,7 +115,7 @@ $open-accordion: ':where(details[open] > *)';
             cursor: grabbing;
         }
     }
-    &:is(:has(input[type=checkbox]:checked), #{$open-accordion}) {
+    &#{$selected} {
         &:hover {
             --_list-item-shape: var(--md-comp-list-item-container-selected-hovered-expressive-shape, var(--md-sys-shape-corner-large, 16px));
             --_headline-color: var(--md-comp-list-item-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container));
@@ -131,9 +135,6 @@ $open-accordion: ':where(details[open] > *)';
             --_trailing-text-color: var(--md-comp-list-item-selected-focus-trailing-supporting-text-color, var(--md-sys-color-on-surface));
             --statelayer-color: var(--md-comp-list-item-selected-focus-state-layer-color, var(--md-sys-color-on-surface));
             --statelayer-opacity: var(--md-comp-list-item-selected-focus-state-layer-opacity, var(--md-sys-state-focus-state-layer-opacity, 10%));
-
-            outline: var(--md-comp-list-item-focus-indicator-thickness, var(--md-sys-state-focus-indicator-thickness, 3px)) solid var(--md-comp-list-item-focus-indicator-color, var(--md-sys-color-secondary));
-            outline-offset: var(--md-comp-list-item-focus-indicator-offset, var(--md-sys-state-focus-indicator-inner-offset, -3px));
         }
         &:active {
             --_list-item-shape: var(--md-comp-list-item-container-selected-pressed-expressive-shape, var(--md-sys-shape-corner-large, 16px));
@@ -159,7 +160,7 @@ $open-accordion: ':where(details[open] > *)';
         }
     }
     &.micl-rippling {
-        animation: micl-ripple var(--md-sys-state-ripple-duration) motion.$md-sys-motion-easing-standard;
+        animation: micl-ripple calc(var(--md-sys-state-ripple-duration) * 1.333);
     }
 }
 
@@ -168,7 +169,7 @@ $open-accordion: ':where(details[open] > *)';
     --md-comp-list-motion-duration: #{motion.$md-sys-motion-expressive-default-effects-duration};
     --md-comp-accordion-motion-spatial: #{motion.$md-sys-motion-expressive-default-spatial};
     --md-comp-accordion-motion-duration: #{motion.$md-sys-motion-expressive-default-spatial-duration};
-    --md-sys-divider-space: 0.5px;
+    --md-comp-divider-space: 0.5px;
     --_list-shape: var(--md-comp-list-container-shape, var(--md-sys-shape-corner-large, 16px));
     --_list-item-background-color: var(--md-comp-list-item-container-color, transparent);
     --_list-item-background-opacity: 0%;
@@ -205,9 +206,7 @@ $open-accordion: ':where(details[open] > *)';
             transform: rotate(180deg);
         }
 
-        &> summary.micl-list-item-one,
-        &> summary.micl-list-item-two,
-        &> summary.micl-list-item-three {
+        &> summary#{$items} {
             position: relative;
 
             &::-webkit-details-marker {
@@ -216,9 +215,6 @@ $open-accordion: ':where(details[open] > *)';
             &.micl-list-item--disabled {
                 pointer-events: none;
             }
-            &:not(.micl-list-item--disabled) {
-                @extend %shared-interactive-states;
-            }
         }
         .micl-list-item__content {
             box-sizing: border-box;
@@ -229,17 +225,18 @@ $open-accordion: ':where(details[open] > *)';
     }
 }
 
-.micl-list:has(> .micl-list-item-one[tabindex], > .micl-list-item-two[tabindex], > .micl-list-item-three[tabindex]), select {
-    > .micl-list-item-one, > .micl-list-item-two, > .micl-list-item-three {
-        &:not(:disabled):not(.micl-list-item--disabled) {
-            @extend %shared-interactive-states;
-        }
-    }
+// This single extend site keeps every interactive-state rule at one compiled selector.
+// Interactive items are the summaries of accordions, the children of a list that holds a
+// tabindex-marked item (see the README), and the options of a select — with `optgroup`
+// covering grouped options, which are not direct children of their select.
+:is(
+    .micl-list > details > summary#{$items},
+    :is(.micl-list:has(> #{$items}[tabindex]), select, optgroup) > #{$items}
+):not(:disabled, .micl-list-item--disabled) {
+    @extend %shared-interactive-states;
 }
 
-.micl-list-item-one,
-.micl-list-item-two,
-.micl-list-item-three {
+#{$items} {
     --statelayer-color: var(--md-sys-color-on-surface);
     --_list-item-shape: var(--md-comp-list-item-container-expressive-shape, var(--md-sys-shape-corner-extra-small, 4px));
     --_overline-color: var(--md-comp-list-item-overline-color, var(--md-sys-color-on-surface-variant));
@@ -268,6 +265,7 @@ $open-accordion: ':where(details[open] > *)';
         ),
         linear-gradient(rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)));
     background-repeat: no-repeat;
+    background-position: var(--micl-x, center) var(--micl-y, center), 0 0;
     background-size: 0%, 100%;
     list-style: none;
     transition:
@@ -329,7 +327,7 @@ $open-accordion: ':where(details[open] > *)';
             opacity: var(--md-sys-state-disabled-state-layer-opacity, 38%);
         }
 
-        &:checked, &:has(input[type=checkbox]:checked), &#{$open-accordion} {
+        &#{$selected} {
             --_list-item-background-color: var(--md-comp-list-item-selected-disabled-container-color, var(--md-sys-color-on-surface));
             --_list-item-background-opacity: var(--md-comp-list-item-selected-disabled-container-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%));
             --_list-item-shape: var(--md-comp-list-item-container-selected-disabled-expressive-shape, var(--md-sys-shape-corner-large, 16px));
@@ -343,7 +341,7 @@ $open-accordion: ':where(details[open] > *)';
             --statelayer-opacity: var(--md-comp-list-item-selected-disabled-state-layer-opacity, 0%);
         }
     }
-    &:checked, &:has(input[type=checkbox]:checked), &#{$open-accordion} {
+    &#{$selected} {
         --_list-item-background-color: var(--md-comp-list-item-selected-container-color, var(--md-sys-color-secondary-container));
         --_list-item-background-opacity: 100%;
         --_overline-color: var(--md-comp-list-item-selected-overline-color, var(--md-sys-color-on-secondary-container));
@@ -353,8 +351,8 @@ $open-accordion: ':where(details[open] > *)';
         --_trailing-text-color: var(--md-comp-list-item-selected-trailing-supporting-text-color, var(--md-sys-color-on-secondary-container));
         --_trailing-icon-color: var(--md-comp-list-item-selected-trailing-icon-color, var(--md-sys-color-on-secondary-container));
     }
-    &:not(:disabled):not(.micl-list-item--disabled) {
-        &:checked, &:has(input[type=checkbox]:checked), &#{$open-accordion} {
+    &:not(:disabled, .micl-list-item--disabled) {
+        &#{$selected} {
             --_list-item-shape: var(--md-comp-list-item-container-selected-expressive-shape, var(--md-sys-shape-corner-large, 16px));
         }
         input[type=checkbox]:not(:disabled):hover,
@@ -391,7 +389,7 @@ $open-accordion: ':where(details[open] > *)';
         -webkit-line-clamp: 2;
     }
 }
-.micl-list-item-one, .micl-list-item-two, .micl-list-item-three {
+#{$items} {
     input[type=checkbox].micl-checkbox {
         block-size: 24px;
         min-block-size: 24px;
@@ -483,6 +481,6 @@ $open-accordion: ':where(details[open] > *)';
     color: var(--_trailing-text-color);
 }
 
-[dir=rtl] .micl-list details[open] .micl-list-item__icon--expander {
+.micl-list details[open] .micl-list-item__icon--expander:dir(rtl) {
     transform: rotate(-180deg);
 }

package/components/menu/README.md

@@ -41,6 +41,7 @@ This component requires JavaScript for functionality:
 ```JavaScript
 import micl from "material-inspired-component-library/dist/micl";
 ```
+When loading individual JavaScript files, also load `dist/list` — it provides the keyboard navigation of the menu items.
 
 This will initialize any Menu component, including those that will be added to the DOM later on.
 
@@ -176,161 +177,86 @@ Menu items can be grouped by including a [Divider component](../divider/README.m
 
 You may include an `<li>` with the `micl-menu__section` class to give the menu item group a descriptive title.
 
-## Customizations
-You can customize the appearance of the Menu component by overriding its global CSS variables. These variables are declared on the `:root` pseudo-class and can be changed on any appropriate parent element to affect its child menus.
-
-| Variable name            | Default Value | Description                          |
-| ------------------------ | ------------- | ------------------------------------ |
-| --md-comp-menu-width-max | 320px         | The maximum width allowed for a menu |
-| --md-comp-menu-width-min | 112px         | The minimum allowed width for a menu |
-
-The Menu component supports the following CSS variables, as defined in the [Material Design 3 Expressive Menu Specification](https://m3.material.io/components/menus/specs):
-
-| Variable name |
-| ------------- |
-| --md-comp-menu-container-elevation |
-| --md-comp-menu-container-shape |
-| --md-comp-menu-active-container-shape |
-| --md-comp-menu-inactive-container-shape |
-| --md-comp-menu-gap |
-| --md-comp-menu-group-padding |
-| --md-comp-menu-group-shape |
-| --md-comp-menu-item-height |
-| --md-comp-menu-item-bottom-space |
-| --md-comp-menu-item-leading-space |
-| --md-comp-menu-item-top-space |
-| --md-comp-menu-item-trailing-space |
-| --md-comp-menu-item-focus-indicator-color |
-| --md-comp-menu-item-focus-indicator-offset |
-| --md-comp-menu-item-focus-indicator-thickness |
-| --md-comp-menu-item-leading-icon-size |
-| --md-comp-menu-item-trailing-icon-size |
-| --md-comp-menu-item-shape |
-| --md-comp-menu-item-shape-single |
-| --md-comp-menu-item-selected-shape |
-|  |
-| --md-comp-menu-section-label-bottom-space |
-| --md-comp-menu-section-label-top-space |
-|  |
-| --md-comp-menu-standard-container-color |
-| --md-comp-menu-standard-menu-item-container-color |
-| --md-comp-menu-standard-menu-item-focused-label-text-color |
-| --md-comp-menu-standard-menu-item-focused-leading-icon-color |
-| --md-comp-menu-standard-menu-item-focused-state-layer-color |
-| --md-comp-menu-standard-menu-item-focused-state-layer-opacity |
-| --md-comp-menu-standard-menu-item-focused-supporting-text-color |
-| --md-comp-menu-standard-menu-item-focused-trailing-icon-color |
-| --md-comp-menu-standard-menu-item-focused-trailing-supporting-text-color |
-| --md-comp-menu-standard-menu-item-hovered-label-text-color |
-| --md-comp-menu-standard-menu-item-hovered-leading-icon-color |
-| --md-comp-menu-standard-menu-item-hovered-state-layer-color |
-| --md-comp-menu-standard-menu-item-hovered-state-layer-opacity |
-| --md-comp-menu-standard-menu-item-hovered-supporting-text-color |
-| --md-comp-menu-standard-menu-item-hovered-trailing-icon-color |
-| --md-comp-menu-standard-menu-item-hovered-trailing-supporting-text-color |
-| --md-comp-menu-standard-menu-item-pressed-label-text-color |
-| --md-comp-menu-standard-menu-item-pressed-leading-icon-color |
-| --md-comp-menu-standard-menu-item-pressed-state-layer-color |
-| --md-comp-menu-standard-menu-item-pressed-state-layer-opacity |
-| --md-comp-menu-standard-menu-item-pressed-supporting-text-color |
-| --md-comp-menu-standard-menu-item-pressed-trailing-icon-color |
-| --md-comp-menu-standard-menu-item-pressed-trailing-supporting-text-color |
-| --md-comp-menu-standard-menu-item-label-text-color |
-| --md-comp-menu-standard-menu-item-leading-icon-color |
-| --md-comp-menu-standard-menu-item-supporting-text-color |
-| --md-comp-menu-standard-menu-item-trailing-icon-color |
-| --md-comp-menu-standard-menu-item-trailing-supporting-text-color |
-| --md-comp-menu-standard-section-label-text-color |
-|  |
-| --md-comp-menu-vibrant-container-color |
-| --md-comp-menu-vibrant-menu-item-container-color |
-| --md-comp-menu-vibrant-menu-item-focused-label-text-color |
-| --md-comp-menu-vibrant-menu-item-focused-leading-icon-color |
-| --md-comp-menu-vibrant-menu-item-focused-state-layer-color |
-| --md-comp-menu-vibrant-menu-item-focused-state-layer-opacity |
-| --md-comp-menu-vibrant-menu-item-focused-supporting-text-color |
-| --md-comp-menu-vibrant-menu-item-focused-trailing-icon-color |
-| --md-comp-menu-vibrant-menu-item-focused-trailing-supporting-text-color |
-| --md-comp-menu-vibrant-menu-item-hovered-label-text-color |
-| --md-comp-menu-vibrant-menu-item-hovered-leading-icon-color |
-| --md-comp-menu-vibrant-menu-item-hovered-state-layer-color |
-| --md-comp-menu-vibrant-menu-item-hovered-state-layer-opacity |
-| --md-comp-menu-vibrant-menu-item-hovered-supporting-text-color |
-| --md-comp-menu-vibrant-menu-item-hovered-trailing-icon-color |
-| --md-comp-menu-vibrant-menu-item-hovered-trailing-supporting-text-color |
-| --md-comp-menu-vibrant-menu-item-pressed-label-text-color |
-| --md-comp-menu-vibrant-menu-item-pressed-leading-icon-color |
-| --md-comp-menu-vibrant-menu-item-pressed-state-layer-color |
-| --md-comp-menu-vibrant-menu-item-pressed-state-layer-opacity |
-| --md-comp-menu-vibrant-menu-item-pressed-supporting-text-color |
-| --md-comp-menu-vibrant-menu-item-pressed-trailing-icon-color |
-| --md-comp-menu-vibrant-menu-item-pressed-trailing-supporting-text-color |
-| --md-comp-menu-vibrant-menu-item-label-text-color |
-| --md-comp-menu-vibrant-menu-item-leading-icon-color |
-| --md-comp-menu-vibrant-menu-item-supporting-text-color |
-| --md-comp-menu-vibrant-menu-item-trailing-icon-color |
-| --md-comp-menu-vibrant-menu-item-trailing-supporting-text-color |
-| --md-comp-menu-vibrant-section-label-text-color |
-|  |
-| --md-comp-menu-standard-menu-item-selected-container-color |
-| --md-comp-menu-standard-menu-item-selected-label-text-color |
-| --md-comp-menu-standard-menu-item-selected-leading-icon-color |
-| --md-comp-menu-standard-menu-item-selected-supporting-text-color |
-| --md-comp-menu-standard-menu-item-selected-trailing-icon-color |
-| --md-comp-menu-standard-menu-item-selected-trailing-supporting-text-color |
-|  |
-| --md-comp-menu-standard-menu-item-selected-disabled-container-color |
-| --md-comp-menu-standard-menu-item-selected-disabled-container-opacity |
-| --md-comp-menu-standard-menu-item-selected-disabled-label-text-color |
-| --md-comp-menu-standard-menu-item-selected-disabled-label-text-opacity |
-| --md-comp-menu-standard-menu-item-selected-disabled-leading-icon-color |
-| --md-comp-menu-standard-menu-item-selected-disabled-leading-icon-opacity |
-| --md-comp-menu-standard-menu-item-selected-disabled-trailing-icon-color |
-| --md-comp-menu-standard-menu-item-selected-disabled-trailing-icon-opacity |
-| --md-comp-menu-standard-menu-item-selected-disabled-trailing-supporting-text-color |
-| --md-comp-menu-standard-menu-item-selected-focused-label-text-color |
-| --md-comp-menu-standard-menu-item-selected-focused-leading-icon-color |
-| --md-comp-menu-standard-menu-item-selected-focused-state-layer-color |
-| --md-comp-menu-standard-menu-item-selected-focused-state-layer-opacity |
-| --md-comp-menu-standard-menu-item-selected-focused-supporting-text-color |
-| --md-comp-menu-standard-menu-item-selected-focused-trailing-icon-color |
-| --md-comp-menu-standard-menu-item-selected-focused-trailing-supporting-text-color |
-| --md-comp-menu-standard-menu-item-selected-hovered-label-text-color |
-| --md-comp-menu-standard-menu-item-selected-hovered-leading-icon-color |
-| --md-comp-menu-standard-menu-item-selected-hovered-state-layer-color |
-| --md-comp-menu-standard-menu-item-selected-hovered-state-layer-opacity |
-| --md-comp-menu-standard-menu-item-selected-hovered-supporting-text-color |
-| --md-comp-menu-standard-menu-item-selected-hovered-trailing-icon-color |
-| --md-comp-menu-standard-menu-item-selected-hovered-trailing-supporting-text-color |
-| --md-comp-menu-standard-menu-item-selected-pressed-label-text-color |
-| --md-comp-menu-standard-menu-item-selected-pressed-leading-icon-color |
-| --md-comp-menu-standard-menu-item-selected-pressed-state-layer-color |
-| --md-comp-menu-standard-menu-item-selected-pressed-state-layer-opacity |
-| --md-comp-menu-standard-menu-item-selected-pressed-supporting-text-color |
-| --md-comp-menu-standard-menu-item-selected-pressed-trailing-icon-color |
-| --md-comp-menu-standard-menu-item-selected-pressed-trailing-supporting-text-color |
-|  |
-| --md-comp-menu-vibrant-menu-item-selected-container-color |
-| --md-comp-menu-vibrant-menu-item-selected-label-text-color |
-| --md-comp-menu-vibrant-menu-item-selected-leading-icon-color |
-| --md-comp-menu-vibrant-menu-item-selected-supporting-text-color |
-| --md-comp-menu-vibrant-menu-item-selected-trailing-icon-color |
-| --md-comp-menu-vibrant-menu-item-selected-trailing-supporting-text-color |
-|  |
-| --md-comp-menu-vibrant-menu-item-selected-disabled-label-text-opacity |
-| --md-comp-menu-vibrant-menu-item-selected-disabled-leading-icon-opacity |
-| --md-comp-menu-vibrant-menu-item-selected-disabled-supporting-text-opacity |
-| --md-comp-menu-vibrant-menu-item-selected-disabled-trailing-icon-opacity |
-| --md-comp-menu-vibrant-menu-item-selected-disabled-trailing-supporting-text-opacity |
-| --md-comp-menu-vibrant-menu-item-selected-focused-state-layer-color |
-| --md-comp-menu-vibrant-menu-item-selected-focused-state-layer-opacity |
-| --md-comp-menu-vibrant-menu-item-selected-focused-label-text-color |
-| --md-comp-menu-vibrant-menu-item-selected-hovered-state-layer-color |
-| --md-comp-menu-vibrant-menu-item-selected-hovered-state-layer-opacity |
-| --md-comp-menu-vibrant-menu-item-selected-hovered-label-text-color |
-| --md-comp-menu-vibrant-menu-item-selected-pressed-state-layer-color |
-| --md-comp-menu-vibrant-menu-item-selected-pressed-state-layer-opacity |
-| --md-comp-menu-vibrant-menu-item-selected-pressed-label-text-color |
+## Theming
+Each menu can be themed with CSS custom properties that follow the Material Design 3 component-token naming convention, as defined in the [Material Design 3 Expressive Menu Specification](https://m3.material.io/components/menus/specs). Set them on any appropriate parent element to affect its child menus.
+
+### Container
+
+| Custom property | Meaning | Default |
+|---|---|---|
+| `--md-comp-menu-width-min` | The minimum width of a menu | `112px` |
+| `--md-comp-menu-width-max` | The maximum width of a menu | `320px` |
+| `--md-comp-menu-container-elevation` | The shadow (elevation) of the menu surface | `--md-sys-elevation-level2` |
+| `--md-comp-menu-container-shape` | The corner rounding of the menu surface | `--md-sys-shape-corner-large` |
+| `--md-comp-menu-active-container-shape` | The corner rounding while the menu is the frontmost menu | `--md-comp-menu-container-shape` |
+| `--md-comp-menu-inactive-container-shape` | The corner rounding while one of its submenus is open | `--md-sys-shape-corner-small` |
+| `--md-comp-menu-standard-container-color` | The background color of a standard menu | `--md-sys-color-surface-container-low` |
+| `--md-comp-menu-vibrant-container-color` | The background color of a vibrant menu | `--md-sys-color-tertiary-container` |
+
+### Item groups and section labels
+
+| Custom property | Meaning | Default |
+|---|---|---|
+| `--md-comp-menu-gap` | The gap between the item groups (the lists) of a menu | `2px` |
+| `--md-comp-menu-group-padding` | The vertical padding inside an item group | `4px` |
+| `--md-comp-menu-group-shape` | The corner rounding of the edges where two item groups meet | `--md-sys-shape-corner-small` |
+| `--md-comp-menu-section-label-top-space` | The padding above a section label | `8px` |
+| `--md-comp-menu-section-label-bottom-space` | The padding below a section label | `8px` |
+| `--md-comp-menu-standard-section-label-text-color` | The text color of a section label in a standard menu | `--md-sys-color-on-surface-variant` |
+| `--md-comp-menu-vibrant-section-label-text-color` | The text color of a section label in a vibrant menu | `--md-sys-color-on-tertiary-container` |
+
+### Item layout
+
+| Custom property | Meaning | Default |
+|---|---|---|
+| `--md-comp-menu-item-height` | The height of a menu item | `44px` |
+| `--md-comp-menu-item-top-space` | The padding above the item content | `8px` |
+| `--md-comp-menu-item-bottom-space` | The padding below the item content | `8px` |
+| `--md-comp-menu-item-leading-space` | The padding before the item content | `16px` |
+| `--md-comp-menu-item-trailing-space` | The padding after the item content | `16px` |
+| `--md-comp-menu-item-leading-icon-size` | The size of a leading icon | `20px` |
+| `--md-comp-menu-item-trailing-icon-size` | The size of a trailing icon | `20px` |
+| `--md-comp-menu-item-shape` | The corner rounding of a menu item | `--md-sys-shape-corner-small` |
+| `--md-comp-menu-item-selected-shape` | The corner rounding of a selected menu item | `--md-sys-shape-corner-large` |
+| `--md-comp-menu-item-focus-indicator-color` | The color of the keyboard focus indicator | `--md-sys-color-secondary` |
+| `--md-comp-menu-item-focus-indicator-thickness` | The thickness of the keyboard focus indicator | `3px` |
+| `--md-comp-menu-item-focus-indicator-offset` | The offset of the keyboard focus indicator | `-3px` |
+
+### Item colors
+The colors of menu items follow a naming pattern that combines the menu variant, the item's selection and interaction state, and the colored part:
+
+```
+--md-comp-menu-<variant>-menu-item[-selected][-<state>]-<part>-color
+```
+
+- `<variant>` is `standard` or `vibrant`.
+- `selected` targets items that are checked or contain a checked checkbox or switch.
+- `<state>` is one of `hovered`, `focused`, `pressed` or `disabled`; omit it for the resting state.
+- `<part>` is one of `container`, `label-text`, `leading-icon`, `supporting-text`, `trailing-icon`, `trailing-supporting-text` or `state-layer`.
+
+Every `state-layer` color has an `-opacity` companion (defaults: hovered 8%, focused 10%, pressed 10%), and so does every color of a `disabled` state (default: --md-sys-state-disabled-state-layer-opacity, 38%). The `container` part exists for the resting, `selected` and `selected-disabled` combinations only. For example, `--md-comp-menu-standard-menu-item-selected-hovered-label-text-color` is the label color of a hovered selected item in a standard menu.
+
+Inside a menu these tokens take precedence over the item color tokens of the [List component](../list/README.md). The defaults per part:
+
+**Standard menu**
+
+| Part | Resting | Hovered, focused, pressed | Selected (all states) | Disabled |
+|---|---|---|---|---|
+| container | `--md-sys-color-surface-container-low` | | `--md-sys-color-tertiary-container` | selected colors at `38%` |
+| label-text | `--md-sys-color-on-surface-variant` | `--md-sys-color-on-surface` | `--md-sys-color-on-tertiary-container` | `--md-sys-color-on-surface` at `38%` |
+| leading-icon, trailing-icon | `--md-sys-color-on-surface-variant` | `--md-sys-color-on-surface-variant` | `--md-sys-color-on-tertiary-container` | `--md-sys-color-on-surface` at `38%` |
+| supporting-text, trailing-supporting-text | `--md-sys-color-on-surface-variant` | `--md-sys-color-on-surface-variant` | `--md-sys-color-on-tertiary-container | --md-sys-color-on-surface` at `38%` |
+| state-layer | | --md-sys-color-on-surface | `--md-sys-color-on-tertiary-container` | |
+
+**Vibrant menu**
+
+| Part | Resting | Hovered, focused, pressed | Selected (all states) | Disabled |
+|---|---|---|---|---|
+| container | `--md-sys-color-tertiary-container` | | `--md-sys-color-tertiary` | selected colors at `38%` |
+| label-text | `--md-sys-color-on-tertiary-container` | `--md-sys-color-on-tertiary-container` | `--md-sys-color-on-tertiary` | `--md-sys-color-on-tertiary-container` at `38%` |
+| leading-icon, trailing-icon | `--md-sys-color-on-tertiary-container` | `--md-sys-color-tertiary` | `--md-sys-color-on-tertiary` | `--md-sys-color-on-tertiary-container` at `38%` |
+| supporting-text, trailing-supporting-text | `--md-sys-color-on-tertiary-container` | `--md-sys-color-on-tertiary-container` | `--md-sys-color-on-tertiary` | `--md-sys-color-on-tertiary-container` at `38%` |
+| state-layer | | `--md-sys-color-on-tertiary-container` | `--md-sys-color-on-tertiary` | |
 
 **Example: Changing the maximum width**