material-inspired-component-library 8.1.0 → 9.0.0

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**
 

package/components/menu/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';
@@ -43,23 +42,17 @@
 @include typography.scale('label-small');
 @include typography.scale('body-small');
 
-:root {
-    --md-comp-menu-width-max: 320px;
-    --md-comp-menu-width-min: 112px;
-}
-
 $menu-padding-block: 4px;
 $item-classes: ':is(.micl-list-item-one, .micl-list-item-two, .micl-list-item-three)';
 
-@mixin menu-color-set(
-    $variant,
-    $container,
-    $on-container,
-    $on-container-strong,
-    $on-icon-active,
-    $selected-container,
-    $on-selected
-) {
+@mixin menu-color-set($variant) {
+    $container: var(--_menu-item-bg);
+    $on-container: var(--_menu-on);
+    $on-container-strong: var(--_menu-on-strong);
+    $on-icon-active: var(--_menu-icon-active);
+    $selected-container: var(--_menu-selected-bg);
+    $on-selected: var(--_menu-on-selected);
+
     --md-comp-list-item-container-color: var(--md-comp-menu-#{$variant}-menu-item-container-color, #{$container});
     --md-comp-list-item-label-text-color: var(--md-comp-menu-#{$variant}-menu-item-label-text-color, #{$on-container});
     --md-comp-list-item-leading-icon-color: var(--md-comp-menu-#{$variant}-menu-item-leading-icon-color, #{$on-container});
@@ -68,15 +61,15 @@ $item-classes: ':is(.micl-list-item-one, .micl-list-item-two, .micl-list-item-th
     --md-comp-list-item-trailing-supporting-text-color: var(--md-comp-menu-#{$variant}-menu-item-trailing-supporting-text-color, #{$on-container});
 
     --md-comp-list-item-disabled-label-text-color: var(--md-comp-menu-#{$variant}-menu-item-disabled-label-text-color, #{$on-container-strong});
-    --md-comp-list-item-disabled-label-text-opacity: var(--md-comp-menu-#{$variant}-menu-item-disabled-label-text-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%));
+    --md-comp-list-item-disabled-label-text-opacity: var(--md-comp-menu-#{$variant}-menu-item-disabled-label-text-opacity, var(--_menu-do));
     --md-comp-list-item-disabled-leading-icon-color: var(--md-comp-menu-#{$variant}-menu-item-disabled-leading-icon-color, #{$on-container-strong});
-    --md-comp-list-item-disabled-leading-icon-opacity: var(--md-comp-menu-#{$variant}-menu-item-disabled-leading-icon-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%));
+    --md-comp-list-item-disabled-leading-icon-opacity: var(--md-comp-menu-#{$variant}-menu-item-disabled-leading-icon-opacity, var(--_menu-do));
     --md-comp-list-item-disabled-supporting-text-color: var(--md-comp-menu-#{$variant}-menu-item-disabled-supporting-text-color, #{$on-container-strong});
-    --md-comp-list-item-disabled-supporting-text-opacity: var(--md-comp-menu-#{$variant}-menu-item-disabled-supporting-text-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%));
+    --md-comp-list-item-disabled-supporting-text-opacity: var(--md-comp-menu-#{$variant}-menu-item-disabled-supporting-text-opacity, var(--_menu-do));
     --md-comp-list-item-disabled-trailing-icon-color: var(--md-comp-menu-#{$variant}-menu-item-disabled-trailing-icon-color, #{$on-container-strong});
-    --md-comp-list-item-disabled-trailing-icon-opacity: var(--md-comp-menu-#{$variant}-menu-item-disabled-trailing-icon-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%));
+    --md-comp-list-item-disabled-trailing-icon-opacity: var(--md-comp-menu-#{$variant}-menu-item-disabled-trailing-icon-opacity, var(--_menu-do));
     --md-comp-list-item-disabled-trailing-supporting-text-color: var(--md-comp-menu-#{$variant}-menu-item-disabled-trailing-supporting-text-color, #{$on-container-strong});
-    --md-comp-list-item-disabled-trailing-supporting-text-opacity: var(--md-comp-menu-#{$variant}-menu-item-disabled-trailing-supporting-text-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%));
+    --md-comp-list-item-disabled-trailing-supporting-text-opacity: var(--md-comp-menu-#{$variant}-menu-item-disabled-trailing-supporting-text-opacity, var(--_menu-do));
 
     --md-comp-list-item-focus-label-text-color: var(--md-comp-menu-#{$variant}-menu-item-focused-label-text-color, #{$on-container-strong});
     --md-comp-list-item-focus-leading-icon-color: var(--md-comp-menu-#{$variant}-menu-item-focused-leading-icon-color, #{$on-icon-active});
@@ -110,15 +103,15 @@ $item-classes: ':is(.micl-list-item-one, .micl-list-item-two, .micl-list-item-th
     --md-comp-list-item-selected-trailing-supporting-text-color: var(--md-comp-menu-#{$variant}-menu-item-selected-trailing-supporting-text-color, #{$on-selected});
 
     --md-comp-list-item-selected-disabled-container-color: var(--md-comp-menu-#{$variant}-menu-item-selected-disabled-container-color, #{$selected-container});
-    --md-comp-list-item-selected-disabled-container-opacity: var(--md-comp-menu-#{$variant}-menu-item-selected-disabled-container-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%));
+    --md-comp-list-item-selected-disabled-container-opacity: var(--md-comp-menu-#{$variant}-menu-item-selected-disabled-container-opacity, var(--_menu-do));
     --md-comp-list-item-selected-disabled-label-text-color: var(--md-comp-menu-#{$variant}-menu-item-selected-disabled-label-text-color, #{$on-selected});
-    --md-comp-list-item-selected-disabled-label-text-opacity: var(--md-comp-menu-#{$variant}-menu-item-selected-disabled-label-text-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%));
+    --md-comp-list-item-selected-disabled-label-text-opacity: var(--md-comp-menu-#{$variant}-menu-item-selected-disabled-label-text-opacity, var(--_menu-do));
     --md-comp-list-item-selected-disabled-leading-icon-color: var(--md-comp-menu-#{$variant}-menu-item-selected-disabled-leading-icon-color, #{$on-selected});
-    --md-comp-list-item-selected-disabled-leading-icon-opacity: var(--md-comp-menu-#{$variant}-menu-item-selected-disabled-leading-icon-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%));
+    --md-comp-list-item-selected-disabled-leading-icon-opacity: var(--md-comp-menu-#{$variant}-menu-item-selected-disabled-leading-icon-opacity, var(--_menu-do));
     --md-comp-list-item-selected-disabled-trailing-icon-color: var(--md-comp-menu-#{$variant}-menu-item-selected-disabled-trailing-icon-color, #{$on-selected});
-    --md-comp-list-item-selected-disabled-trailing-icon-opacity: var(--md-comp-menu-#{$variant}-menu-item-selected-disabled-trailing-icon-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%));
+    --md-comp-list-item-selected-disabled-trailing-icon-opacity: var(--md-comp-menu-#{$variant}-menu-item-selected-disabled-trailing-icon-opacity, var(--_menu-do));
     --md-comp-list-item-selected-disabled-trailing-supporting-text-color: var(--md-comp-menu-#{$variant}-menu-item-selected-disabled-trailing-supporting-text-color, #{$on-selected});
-    --md-comp-list-item-selected-disabled-trailing-supporting-text-opacity: var(--md-comp-menu-#{$variant}-menu-item-selected-disabled-trailing-supporting-text-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%));
+    --md-comp-list-item-selected-disabled-trailing-supporting-text-opacity: var(--md-comp-menu-#{$variant}-menu-item-selected-disabled-trailing-supporting-text-opacity, var(--_menu-do));
 
     --md-comp-list-item-selected-focus-label-text-color: var(--md-comp-menu-#{$variant}-menu-item-selected-focused-label-text-color, #{$on-selected});
     --md-comp-list-item-selected-focus-leading-icon-color: var(--md-comp-menu-#{$variant}-menu-item-selected-focused-leading-icon-color, #{$on-selected});
@@ -173,15 +166,15 @@ $item-classes: ':is(.micl-list-item-one, .micl-list-item-two, .micl-list-item-th
     --md-comp-list-item-focus-indicator-offset: var(--md-comp-menu-item-focus-indicator-offset, var(--md-sys-state-focus-indicator-inner-offset, -3px));
     --md-comp-list-item-focus-indicator-thickness: var(--md-comp-menu-item-focus-indicator-thickness, var(--md-sys-state-focus-indicator-thickness, 3px));
 
-    @include menu-color-set(
-        'standard',
-        var(--md-sys-color-surface-container-low),
-        var(--md-sys-color-on-surface-variant),
-        var(--md-sys-color-on-surface),
-        var(--md-sys-color-on-surface-variant),
-        var(--md-sys-color-tertiary-container),
-        var(--md-sys-color-on-tertiary-container)
-    );
+    --_menu-item-bg: var(--md-sys-color-surface-container-low);
+    --_menu-on: var(--md-sys-color-on-surface-variant);
+    --_menu-on-strong: var(--md-sys-color-on-surface);
+    --_menu-icon-active: var(--md-sys-color-on-surface-variant);
+    --_menu-selected-bg: var(--md-sys-color-tertiary-container);
+    --_menu-on-selected: var(--md-sys-color-on-tertiary-container);
+    --_menu-do: var(--md-sys-state-disabled-state-layer-opacity, 38%);
+
+    @include menu-color-set('standard');
 
     .micl-menu__section {
         @include typography.label-small;
@@ -206,7 +199,6 @@ $item-classes: ':is(.micl-list-item-one, .micl-list-item-two, .micl-list-item-th
 }
 
 .micl-menu[popover] {
-    display: flex;
     flex-direction: column;
     position: absolute;
     inset: unset;
@@ -221,24 +213,27 @@ $item-classes: ':is(.micl-list-item-one, .micl-list-item-two, .micl-list-item-th
     border: none;
     outline: none;
     background-color: transparent;
+    --micl-duration: var(--md-comp-menu-motion-spatial-duration-reverse);
+    --micl-easing: linear;
+    --_group-shape: var(--md-comp-menu-group-shape, var(--md-sys-shape-corner-small, 8px));
+
     opacity: 0;
     overflow: visible;
     transform: scaleY(0);
     transform-origin: center top;
     transition:
-        opacity var(--md-comp-menu-motion-spatial-duration-reverse) linear,
-        transform var(--md-comp-menu-motion-spatial-duration-reverse) var(--md-comp-menu-motion-spatial),
-        overlay var(--md-comp-menu-motion-spatial-duration-reverse) linear allow-discrete,
-        display var(--md-comp-menu-motion-spatial-duration-reverse) linear allow-discrete;
+        opacity var(--micl-duration) var(--micl-easing),
+        transform var(--micl-duration) var(--md-comp-menu-motion-spatial),
+        overlay var(--micl-duration) linear allow-discrete,
+        display var(--micl-duration) linear allow-discrete;
 
     &:popover-open {
+        --micl-duration: var(--md-comp-menu-motion-spatial-duration);
+        --micl-easing: #{motion.$md-sys-motion-easing-emphasized-decelerate};
+
+        display: flex;
         opacity: 1;
         transform: scaleY(1);
-        transition:
-            opacity var(--md-comp-menu-motion-spatial-duration) motion.$md-sys-motion-easing-emphasized-decelerate,
-            transform var(--md-comp-menu-motion-spatial-duration) var(--md-comp-menu-motion-spatial),
-            overlay var(--md-comp-menu-motion-spatial-duration) linear allow-discrete,
-            display var(--md-comp-menu-motion-spatial-duration) linear allow-discrete;
 
         @starting-style {
             opacity: 0;
@@ -268,12 +263,12 @@ $item-classes: ':is(.micl-list-item-one, .micl-list-item-two, .micl-list-item-th
         transition: border-radius var(--md-comp-menu-motion-effects-duration-reverse) linear;
 
         &+ .micl-list {
-            border-start-start-radius: var(--md-comp-menu-group-shape, var(--md-sys-shape-corner-small, 8px));
-            border-start-end-radius: var(--md-comp-menu-group-shape, var(--md-sys-shape-corner-small, 8px));
+            border-start-start-radius: var(--_group-shape);
+            border-start-end-radius: var(--_group-shape);
         }
         &:has(+ .micl-list) {
-            border-end-start-radius: var(--md-comp-menu-group-shape, var(--md-sys-shape-corner-small, 8px));
-            border-end-end-radius: var(--md-comp-menu-group-shape, var(--md-sys-shape-corner-small, 8px));
+            border-end-start-radius: var(--_group-shape);
+            border-end-end-radius: var(--_group-shape);
         }
 
         #{$item-classes} > .micl-menu[popover] {
@@ -296,20 +291,19 @@ $item-classes: ':is(.micl-list-item-one, .micl-list-item-two, .micl-list-item-th
     }
 
     &.micl-menu--vibrant > .micl-list {
-        @include menu-color-set(
-            'vibrant',
-            var(--md-sys-color-tertiary-container),
-            var(--md-sys-color-on-tertiary-container),
-            var(--md-sys-color-on-tertiary-container),
-            var(--md-sys-color-tertiary),
-            var(--md-sys-color-tertiary),
-            var(--md-sys-color-on-tertiary)
-        );
+        --_menu-item-bg: var(--md-sys-color-tertiary-container);
+        --_menu-on: var(--md-sys-color-on-tertiary-container);
+        --_menu-on-strong: var(--md-sys-color-on-tertiary-container);
+        --_menu-icon-active: var(--md-sys-color-tertiary);
+        --_menu-selected-bg: var(--md-sys-color-tertiary);
+        --_menu-on-selected: var(--md-sys-color-on-tertiary);
+
+        @include menu-color-set('vibrant');
 
         background-color: var(--md-comp-menu-vibrant-container-color, var(--md-sys-color-tertiary-container));
     }
 }
 
-[dir=rtl] .micl-menu[popover] > .micl-list button[popovertarget] .micl-list-item__icon {
+.micl-menu[popover] > .micl-list button[popovertarget] .micl-list-item__icon:dir(rtl) {
     transform: rotate(180deg);
 }

package/components/navigationbar/README.md

@@ -0,0 +1,108 @@
+# Navigation bar
+This component implements the [Material Design 3 Expressive Navigation bar](https://m3.material.io/components/navigation-bar/overview) design. A navigation bar lets people switch between UI views on smaller devices, anchored to the bottom of the screen.
+
+## Basic Usage
+
+### HTML
+To create a navigation bar, use a `<nav>` element with the `micl-navigationbar` class. Inside, use anchor elements `<a>` to create the selectable navigation items. The markup mirrors the Navigation rail component.
+
+```HTML
+<nav id="mynavigationbar" class="micl-navigationbar">
+  <div class="micl-navigationbar__content" role="menu">
+    <a href="#" class="micl-navigationbar__item" role="menuitem" aria-current="page">
+      <span class="micl-navigationbar__icon material-symbols-outlined" aria-hidden="true">inbox</span>
+      <span class="micl-navigationbar__text">Inbox</span>
+    </a>
+    <a href="#" class="micl-navigationbar__item" role="menuitem">
+      <span class="micl-navigationbar__icon material-symbols-outlined" aria-hidden="true">outbox</span>
+      <span class="micl-navigationbar__text">Outbox</span>
+    </a>
+  </div>
+</nav>
+```
+
+Use three to five items. The navigation bar is fixed to the bottom of the screen (respecting any safe-area inset), and the component automatically reserves matching space at the bottom of the page so that the content is not obscured.
+
+> [!WARNING]
+> The navigation bar component adds a `padding-block-end` CSS rule to the `<body>` element to reserve space for the bar. It matches the height of the displayed variant (including any safe-area inset) and is removed while an adaptive navigation bar is displayed as a navigation rail. Overriding this rule may cause page content to be obscured by the bar.
+
+### CSS
+Import the navigation bar styles into your project:
+
+```CSS
+@use "material-inspired-component-library/dist/navigationbar";
+```
+
+Or import all MICL styles:
+```CSS
+@use "material-inspired-component-library/styles";
+```
+
+### JavaScript
+No custom JavaScript is required for the core functionality of this component.
+
+### Live Demo
+A live example of the [Navigation bar component](https://henkpb.github.io/micl/navigationbar.html) is available to interact with.
+
+## Variants
+
+### Tall navigation bar
+The **tall** navigation bar is 80px high instead of 64px, with the items vertically centered.
+
+```HTML
+<nav class="micl-navigationbar micl-navigationbar--tall">
+  ...
+</nav>
+```
+
+### Horizontal items
+On wider compact devices (for example phones in landscape), the items can show the icon and label side by side in a single 40px-high pill.
+
+```HTML
+<nav class="micl-navigationbar micl-navigationbar--horizontal">
+  ...
+</nav>
+```
+
+### Adaptive navigation
+An **adaptive** navigation bar acts as a navigation bar on narrow screens and is displayed as a permanently visible, collapsed [Navigation rail](../navigationrail/README.md) on wide screens. Add one of the following modifier classes:
+
+| Class | Navigation bar below | Navigation rail from |
+| ----- | -------------------- | -------------------- |
+| `micl-navigationbar--bar-to-medium` | `600px` | `600px` |
+| `micl-navigationbar--bar-to-expanded` | `840px` | `840px` |
+
+```HTML
+<nav class="micl-navigationbar micl-navigationbar--bar-to-medium">
+  ...
+</nav>
+```
+
+Place the `<nav>` element before the main content, where a standard navigation rail would go, so that it occupies its usual position when the wide-screen layout applies. On wide screens the component is themed by the `--md-comp-nav-rail-*` custom properties of the Navigation rail component. Do not combine the adaptive classes with the `micl-navigationbar--tall` or `micl-navigationbar--horizontal` variants.
+
+## Theming
+Each navigation bar can be themed with CSS custom properties that follow the Material Design 3 component-token naming convention.
+
+| Custom property | Meaning | Default |
+|---|---|---|
+| `--md-comp-nav-bar-container-color` | The background color of the navigation bar | `--md-sys-color-surface-container` |
+| `--md-comp-nav-bar-container-elevation` | The shadow (elevation) of the navigation bar | `--md-sys-elevation-level2` |
+| `--md-comp-nav-bar-container-height` | The height of the navigation bar (excluding any safe-area inset) | `64px` |
+| `--md-comp-nav-bar-tall-container-height` | The height of the tall navigation bar | `80px` |
+| `--md-comp-nav-bar-container-shape` | The corner rounding of the navigation bar | `0px` |
+| `--md-comp-nav-bar-item-icon-size` | The size of the item icons | `--md-sys-icon-size` |
+| `--md-comp-nav-bar-item-active-indicator-shape` | The corner rounding of an item's active indicator | half the indicator height |
+| `--md-comp-nav-bar-item-active-indicator-icon-label-space` | The space between the icon and the label | `4px` |
+| `--md-comp-nav-bar-item-vertical-active-indicator-width` | The width of an item's active indicator | `56px` |
+| `--md-comp-nav-bar-item-vertical-active-indicator-height` | The height of an item's active indicator | `32px` |
+| `--md-comp-nav-bar-item-horizontal-active-indicator-height` | The height of an item's active indicator with horizontal items | `40px` |
+| `--md-comp-nav-bar-item-horizontal-active-indicator-leading-space` | The space between the start edge of a horizontal item's active indicator and the icon | `16px` |
+| `--md-comp-nav-bar-item-horizontal-active-indicator-trailing-space` | The space between the label and the end edge of a horizontal item's active indicator | `16px` |
+
+**Example: Changing the background color of the navigation bar**
+
+```HTML
+<nav class="micl-navigationbar" style="--md-comp-nav-bar-container-color:var(--md-sys-color-surface)">
+  ...
+</nav>
+```