material-inspired-component-library 8.1.1 → 9.0.0

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>
+```

package/components/navigationbar/index.scss

@@ -0,0 +1,185 @@
+//
+// Copyright © 2025 Hermana AS
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+@use '../../foundations/layout';
+@use '../../styles/elevation';
+@use '../../styles/statelayer';
+@use '../navigationrail/navitem';
+
+@include elevation.level(0);
+@include elevation.level(2);
+
+@include statelayer.token('hover-state-layer-opacity');
+@include statelayer.token('focus-state-layer-opacity');
+@include statelayer.token('pressed-state-layer-opacity');
+@include statelayer.token('ripple-opacity-factor');
+@include statelayer.token('ripple-duration');
+@include statelayer.property;
+@include statelayer.keyframes;
+
+nav.micl-navigationbar {
+    box-sizing: border-box;
+    position: fixed;
+    inset-block: auto 0;
+    inset-inline: 0;
+    padding-block-end: env(safe-area-inset-bottom);
+    background-color: var(--md-comp-nav-bar-container-color, var(--md-sys-color-surface-container));
+    box-shadow: var(--md-comp-nav-bar-container-elevation, var(--md-sys-elevation-level2));
+    border-radius: var(--md-comp-nav-bar-container-shape, 0px);
+    z-index: 9;
+
+    &> .micl-navigationbar__content {
+        box-sizing: border-box;
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-evenly;
+        block-size: var(--md-comp-nav-bar-container-height, 64px);
+        padding-block-start: 6px;
+
+        &> a.micl-navigationbar__item {
+            @extend %micl-navitem;
+
+            flex-direction: column;
+            inline-size: var(--md-comp-nav-bar-item-vertical-active-indicator-width, 56px);
+            block-size: var(--md-comp-nav-bar-item-vertical-active-indicator-height, 32px);
+            border-radius: var(--md-comp-nav-bar-item-active-indicator-shape, calc(var(--md-comp-nav-bar-item-vertical-active-indicator-height, 32px) / 2));
+
+            .micl-navigationbar__icon {
+                @extend %micl-navitem-icon;
+                font-size: var(--md-comp-nav-bar-item-icon-size, var(--md-sys-icon-size));
+                inline-size: var(--md-comp-nav-bar-item-icon-size, var(--md-sys-icon-size));
+                padding-inline: 16px;
+            }
+            .micl-navigationbar__text {
+                @extend %micl-navitem-text;
+                margin-block-start: var(--md-comp-nav-bar-item-active-indicator-icon-label-space, 4px);
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+        }
+
+        &> a.micl-navigationbar__item[aria-current="page"] {
+            @extend %micl-navitem-current;
+
+            .micl-navigationbar__icon {
+                @extend %micl-navitem-current-icon;
+            }
+            .micl-navigationbar__text {
+                @extend %micl-navitem-current-text;
+            }
+        }
+    }
+
+    // Tall bar (80px): the item stack is vertically centered
+    &.micl-navigationbar--tall > .micl-navigationbar__content {
+        block-size: var(--md-comp-nav-bar-tall-container-height, 80px);
+        padding-block-start: 14px;
+    }
+
+    // Horizontal items: icon and label side by side in a 40px pill
+    &.micl-navigationbar--horizontal > .micl-navigationbar__content {
+        align-items: center;
+        padding-block-start: 0;
+
+        &> a.micl-navigationbar__item {
+            flex-direction: row;
+            inline-size: fit-content;
+            max-inline-size: 100%;
+            block-size: var(--md-comp-nav-bar-item-horizontal-active-indicator-height, 40px);
+            border-radius: var(--md-comp-nav-bar-item-active-indicator-shape, calc(var(--md-comp-nav-bar-item-horizontal-active-indicator-height, 40px) / 2));
+
+            .micl-navigationbar__icon {
+                padding-inline:
+                    var(--md-comp-nav-bar-item-horizontal-active-indicator-leading-space, 16px)
+                    var(--md-comp-nav-bar-item-active-indicator-icon-label-space, 4px);
+            }
+            .micl-navigationbar__text {
+                margin-block-start: 0;
+                padding-inline-end: var(--md-comp-nav-bar-item-horizontal-active-indicator-trailing-space, 16px);
+            }
+        }
+    }
+}
+
+// Reserve space at the bottom of the page for the fixed navigation bar
+// (higher specificity than the padding shorthand of body.micl-window)
+body:has(nav.micl-navigationbar) {
+    padding-block-end: calc(var(--md-comp-nav-bar-container-height, 64px) + env(safe-area-inset-bottom));
+}
+body:has(nav.micl-navigationbar--tall) {
+    padding-block-end: calc(var(--md-comp-nav-bar-tall-container-height, 80px) + env(safe-area-inset-bottom));
+}
+
+// Adaptive navigation: a navigation bar below the named breakpoint and a
+// collapsed navigation rail (using the nav-rail tokens) at the breakpoint
+// and above. The item anatomy is shared, so only the container changes.
+$_breakpoints: (
+    medium:   layout.$md-sys-breakpoint-medium-min,
+    expanded: layout.$md-sys-breakpoint-expanded-min,
+);
+
+@each $name, $min in $_breakpoints {
+    @media (min-width: $min) {
+        nav.micl-navigationbar--bar-to-#{$name} {
+            display: flex;
+            flex-direction: column;
+            position: sticky;
+            float: inline-start;
+            inset: unset;
+            inset-block-start: 0;
+            inline-size: var(--md-comp-nav-rail-collapsed-container-width, 96px);
+            block-size: 100vh;
+            min-block-size: 100%;
+            margin-inline: calc(-1 * var(--md-sys-layout-window-margin, 0px)) auto;
+            padding-block: var(--md-comp-nav-rail-collapsed-top-space, 44px) 0;
+            background-color: var(--md-comp-nav-rail-collapsed-container-color, var(--md-sys-color-surface));
+            box-shadow: var(--md-comp-nav-rail-collapsed-container-elevation, var(--md-sys-elevation-level0));
+            border-radius: var(--md-comp-nav-rail-collapsed-container-shape, 0px);
+            border-inline-end: var(--md-comp-nav-rail-divider-thickness, 0px) solid var(--md-comp-nav-rail-divider-color, var(--md-comp-divider-color));
+            overflow: hidden;
+
+            &> .micl-navigationbar__content {
+                flex: 1 1 auto;
+                flex-direction: column;
+                justify-content: flex-start;
+                inline-size: 100%;
+                block-size: auto;
+                row-gap: var(--md-comp-nav-rail-item-container-vertical-space, 6px);
+                padding-block: var(--md-comp-nav-rail-item-header-space-minimum, 40px) 16px;
+                padding-inline: 20px;
+                overflow: hidden auto;
+
+                &> a.micl-navigationbar__item {
+                    margin-block-end: 40px;
+                    row-gap: var(--md-comp-nav-rail-collapsed-item-vertical-space, 4px);
+                }
+            }
+        }
+
+        // in rail mode the bottom of the page no longer needs to be reserved
+        body.micl-window:has(nav.micl-navigationbar--bar-to-#{$name}) {
+            padding-block-end: var(--md-sys-layout-window-margin, 0px);
+        }
+        body:not(.micl-window):has(nav.micl-navigationbar--bar-to-#{$name}) {
+            padding-block-end: 0;
+        }
+    }
+}

package/components/navigationrail/README.md

@@ -25,6 +25,7 @@ To create a simple navigation rail, use a `<nav>` element with the `micl-navigat
 Import the navigation rail styles into your project:
 
 ```CSS
+@use "material-inspired-component-library/dist/iconbutton";
 @use "material-inspired-component-library/dist/navigationrail";
 ```
 
@@ -101,47 +102,70 @@ A **modal** navigation rail is hidden until the user clicks a menu button. When
 
 The button inside the navigation rail is used to hide the navigation rail, while the button outside is responsible for opening it.
 
-## Customizations
-You can customize the appearance of the Navigation rail 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 navigation rails.
+### Adaptive navigation rail
 
-| Variable name | Default Value | Description |
-| ------------- | ------------- | ----------- |
-| --md-comp-nav-rail-divider-thickness | 0px | The width of the vertical divider at the end of the rail |
-| --md-comp-nav-rail-divider-color |  | The color of the vertical divider |
+An **adaptive** navigation rail is permanently visible as a standard (expanded) navigation rail on wide screens, and acts as a modal navigation rail on narrow screens. Add one of the following modifier classes to a modal navigation rail:
 
-The Navigation rail component supports the following CSS variables, as defined in the [Material Design 3 Expressive Navigation rail Specification](https://m3.material.io/components/navigation-rail/specs):
+| Class | Modal below | Standard from |
+| ----- | ----------- | ------------- |
+| `micl-navigationrail--modal-to-medium` | `600px` | `600px` |
+| `micl-navigationrail--modal-to-expanded` | `840px` | `840px` |
+| `micl-navigationrail--modal-to-large` | `1200px` | `1200px` |
+| `micl-navigationrail--modal-to-extralarge` | `1600px` | `1600px` |
+
+```HTML
+<dialog id="mynavigationrail" class="micl-navigationrail micl-navigationrail--modal-to-expanded" closedby="closerequest">
+  ...
+</dialog>
+```
+
+Place the `<dialog>` element where a standard `<nav>` navigation rail would go, so that it occupies its usual position when the wide-screen layout applies. The open and close buttons only serve the modal behaviour, so hide them on wide screens, for example:
 
 ```CSS
---md-comp-nav-rail-item-icon-size
---md-comp-nav-rail-item-active-indicator-leading-space
---md-comp-nav-rail-item-active-indicator-icon-label-space
---md-comp-nav-rail-item-active-indicator-trailing-space
---md-comp-nav-rail-item-container-height
---md-comp-nav-rail-item-short-container-height
---md-comp-nav-rail-item-container-shape
---md-comp-nav-rail-item-container-vertical-space
---md-comp-nav-rail-item-header-space-minimum
---md-comp-nav-rail-collapsed-container-width
---md-comp-nav-rail-collapsed-narrow-container-width
---md-comp-nav-rail-collapsed-container-elevation
---md-comp-nav-rail-collapsed-container-shape
---md-comp-nav-rail-collapsed-container-color
---md-comp-nav-rail-collapsed-item-vertical-space
---md-comp-nav-rail-collapsed-top-space
---md-comp-nav-rail-expanded-container-width-minimum
---md-comp-nav-rail-expanded-container-width-maximum
---md-comp-nav-rail-expanded-top-space
---md-comp-nav-rail-expanded-container-elevation
---md-comp-nav-rail-expanded-modal-container-elevation
---md-comp-nav-rail-expanded-container-color
---md-comp-nav-rail-expanded-modal-container-color
---md-comp-nav-rail-expanded-container-shape
---md-comp-nav-rail-expanded-modal-container-shape
---md-comp-nav-rail-item-vertical-active-indicator-height
---md-comp-nav-rail-item-vertical-active-indicator-width
---md-comp-nav-rail-item-horizontal-full-width-leading-space
+@media (min-width: 840px) {
+  [commandfor="mynavigationrail"] {
+    display: none;
+  }
+}
 ```
 
+> [!NOTE]
+> If the modal navigation rail is open while the window is resized across the breakpoint, it remains modal until dismissed, after which it becomes the permanently visible standard rail.
+
+## Theming
+Each navigation rail can be themed with CSS custom properties that follow the Material Design 3 component-token naming convention.
+
+| Custom property | Meaning | Default |
+|---|---|---|
+| `--md-comp-nav-rail-divider-thickness` | The width of the vertical divider at the end of the rail | `0px` |
+| `--md-comp-nav-rail-divider-color` | The color of the vertical divider | `--md-comp-divider-color` |
+| `--md-comp-nav-rail-collapsed-container-width` | The width of the collapsed navigation rail | `96px` |
+| `--md-comp-nav-rail-collapsed-container-color` | The background color of the collapsed navigation rail | `--md-sys-color-surface` |
+| `--md-comp-nav-rail-collapsed-container-elevation` | The shadow (elevation) of the collapsed navigation rail | `--md-sys-elevation-level0` |
+| `--md-comp-nav-rail-collapsed-container-shape` | The corner rounding of the collapsed navigation rail | `0px` |
+| `--md-comp-nav-rail-collapsed-top-space` | The space between the top edge and the header of the collapsed navigation rail | `44px` |
+| `--md-comp-nav-rail-collapsed-item-vertical-space` | The space between the icon and the label of a collapsed item | `4px` |
+| `--md-comp-nav-rail-expanded-container-width-minimum` | The smallest allowed width of the expanded navigation rail | `220px` |
+| `--md-comp-nav-rail-expanded-container-width-maximum` | The largest allowed width of the expanded navigation rail | `360px` |
+| `--md-comp-nav-rail-expanded-container-color` | The background color of the expanded navigation rail | `--md-sys-color-surface` |
+| `--md-comp-nav-rail-expanded-container-elevation` | The shadow (elevation) of the expanded navigation rail | `--md-sys-elevation-level0` |
+| `--md-comp-nav-rail-expanded-container-shape` | The corner rounding of the expanded navigation rail | `0px` |
+| `--md-comp-nav-rail-expanded-top-space` | The space between the top edge and the header of the expanded navigation rail | `44px` |
+| `--md-comp-nav-rail-expanded-modal-container-color` | The background color of the modal navigation rail | `--md-sys-color-surface-container` |
+| `--md-comp-nav-rail-expanded-modal-container-elevation` | The shadow (elevation) of the modal navigation rail | `--md-sys-elevation-level2` |
+| `--md-comp-nav-rail-expanded-modal-container-shape` | The corner rounding of the modal navigation rail, applied to the two corners facing the content | `--md-sys-shape-corner-large` |
+| `--md-comp-nav-rail-item-icon-size` | The size of the item icons | `--md-sys-icon-size` |
+| `--md-comp-nav-rail-item-container-shape` | The corner rounding of an item's active indicator | half the item height |
+| `--md-comp-nav-rail-item-container-vertical-space` | The vertical space between items | `6px` |
+| `--md-comp-nav-rail-item-header-space-minimum` | The minimum space between the header and the first item | `40px` |
+| `--md-comp-nav-rail-item-short-container-height` | The height of items in an expanded navigation rail, and of items without a label | `56px` |
+| `--md-comp-nav-rail-item-vertical-active-indicator-width` | The width of an item's active indicator in a collapsed navigation rail | `56px` |
+| `--md-comp-nav-rail-item-vertical-active-indicator-height` | The height of an item's active indicator in a collapsed navigation rail | `32px` |
+| `--md-comp-nav-rail-item-active-indicator-leading-space` | The space between the start edge of the active indicator and the icon | `16px` |
+| `--md-comp-nav-rail-item-active-indicator-trailing-space` | The space between the icon and the end edge of the active indicator | `16px` |
+| `--md-comp-nav-rail-item-active-indicator-icon-label-space` | The space between the icon and the label of an expanded item | `8px` |
+| `--md-comp-nav-rail-item-horizontal-full-width-trailing-space` | The space between the end of an expanded item's click target and the container edge | `16px` |
+
 **Example: Changing the width of the collapsed navigation rail**
 
 ```HTML
@@ -152,7 +176,7 @@ The Navigation rail component supports the following CSS variables, as defined i
 </div>
 ```
 
-To add a vertical divider of the to the navigation rail, set the following CSS variable:
+To add a vertical divider to the navigation rail, set the following CSS variable:
 
 ```CSS
 #mynavigationrail {