material-inspired-component-library 9.1.0 → 9.1.2

package/components/dialog/index.scss

@@ -19,6 +19,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
+@use '../../foundations/layout/tokens' as layout;
 @use '../../styles/elevation';
 @use '../../styles/motion';
 @use '../../styles/shape';
@@ -32,31 +33,25 @@
 @include shape.corner('none');
 @include shape.corner('extra-large');
 
-@include statelayer.token('hover-state-layer-opacity');
 @include statelayer.token('backdrop-opacity');
-@include statelayer.property;
 
 @include typography.scale('headline-small');
 @include typography.scale('title-large');
 @include typography.scale('title-medium');
 @include typography.scale('body-medium');
 
-:root {
-    --_dialog-dir-factor: 1;
-}
-:dir(rtl) {
-    --_dialog-dir-factor: -1;
-}
-
 dialog.micl-dialog {
-    --statelayer-color: var(--md-sys-color-primary);
-    --md-comp-dialog-motion-duration: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
-    --md-comp-dialog-motion-duration-reverse: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
+    --_motion-spatial: var(--md-comp-dialog-motion-spatial, #{motion.$md-sys-motion-expressive-fast-spatial});
+    --_motion-duration: var(--md-comp-dialog-motion-duration, #{motion.$md-sys-motion-expressive-slow-spatial-duration});
+    --_motion-duration-reverse: var(--md-comp-dialog-motion-duration-reverse, #{motion.$md-sys-motion-expressive-fast-spatial-duration});
 
-    --micl-duration: var(--md-comp-dialog-motion-duration-reverse);
-    --micl-easing: #{motion.$md-sys-motion-easing-emphasized-decelerate};
+    --micl-duration: var(--_motion-duration-reverse);
+    --micl-spatial: #{motion.$md-sys-motion-easing-emphasized-accelerate};
+    --micl-easing: #{motion.$md-sys-motion-easing-emphasized-accelerate};
 
+    --_dialog-dir-factor: 1;
     --_dialog-background-color: var(--md-comp-dialog-container-color, var(--md-sys-color-surface-container-high));
+    --_margin: var(--md-comp-dialog-margin, 48px);
     --_padding: var(--md-comp-dialog-padding, 24px);
     --_translate: translate(calc(var(--_dialog-dir-factor, 1) * -50%), -50%);
 
@@ -64,48 +59,46 @@ dialog.micl-dialog {
     display: none;
     flex-direction: column;
     min-inline-size: var(--md-comp-dialog-min-width, 280px);
-    max-inline-size: var(--md-comp-dialog-max-width, 560px);
-    max-block-size: 100vh;
+    max-inline-size: min(var(--md-comp-dialog-max-width, 560px), calc(100% - var(--_margin)));
+    max-block-size: calc(100dvb - var(--_margin));
     position-anchor: auto;
-    inset-block-start: anchor(start);
-    inset-inline-start: anchor(start);
+    inset-block: anchor(start) auto;
+    inset-inline: anchor(start) auto;
     transform: var(--_translate) scale(50%);
     padding: 0;
     margin: 0;
     outline: none;
     border: none;
     border-radius: var(--md-comp-dialog-container-shape, var(--md-sys-shape-corner-extra-large));
+    color: var(--md-comp-dialog-content-color, var(--md-sys-color-on-surface));
     background-color: var(--_dialog-background-color);
-    background-image: linear-gradient(rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)));
-    background-repeat: no-repeat;
     box-shadow: var(--md-comp-dialog-container-elevation, var(--md-sys-elevation-level3));
     opacity: 0;
     overflow: hidden;
     interpolate-size: allow-keywords;
     transition:
-        inset-block-start var(--micl-duration) linear,
-        inset-inline-start var(--micl-duration) linear,
-        inline-size var(--micl-duration) linear,
-        block-size var(--micl-duration) linear,
-        transform var(--micl-duration) linear,
-        opacity var(--micl-duration) var(--micl-easing),
+        inset-block-start var(--micl-duration) var(--micl-easing),
+        inset-inline-start var(--micl-duration) var(--micl-easing),
+        inline-size var(--micl-duration) var(--micl-spatial),
+        block-size var(--micl-duration) var(--micl-spatial),
+        transform var(--micl-duration) var(--micl-spatial),
+        opacity var(--micl-duration) linear,
         overlay var(--micl-duration) linear allow-discrete,
-        display var(--micl-duration) linear allow-discrete,
-        --statelayer-opacity var(--md-comp-dialog-motion-duration) linear;
+        display var(--micl-duration) linear allow-discrete;
 
     @starting-style {
         block-size: fit-content;
         inline-size: fit-content;
-        inset-block-start: anchor(start);
-        inset-inline-start: anchor(start);
-        opacity: 0;
-        transform: var(--_translate) scale(50%);
     }
 
+    &:dir(rtl) {
+        --_dialog-dir-factor: -1;
+    }
     &:popover-open,
     &[open] {
-        --micl-duration: var(--md-comp-dialog-motion-duration);
-        --micl-easing: #{motion.$md-sys-motion-easing-emphasized-accelerate};
+        --micl-duration: var(--_motion-duration);
+        --micl-spatial: var(--_motion-spatial);
+        --micl-easing: #{motion.$md-sys-motion-easing-emphasized};
 
         display: flex;
         inset-block-start: 50%;
@@ -128,22 +121,14 @@ dialog.micl-dialog {
             inset-block-start: 50%;
             inset-inline-start: 50%;
         }
-
-        &:popover-open,
-        &[open] {
-            @starting-style {
-                inset-block-start: 50%;
-                inset-inline-start: 50%;
-            }
-        }
     }
 
     &::backdrop {
         background-color: rgba(0, 0, 0, 0);
         transition:
-            background-color var(--md-comp-dialog-motion-duration) linear,
-            overlay var(--md-comp-dialog-motion-duration) linear allow-discrete,
-            display var(--md-comp-dialog-motion-duration) linear allow-discrete;
+            background-color var(--micl-duration) linear,
+            overlay var(--micl-duration) linear allow-discrete,
+            display var(--micl-duration) linear allow-discrete;
     }
     &[open]::backdrop {
         background-color: rgba(0, 0, 0, var(--md-sys-state-backdrop-opacity, 32%));
@@ -157,7 +142,10 @@ dialog.micl-dialog {
         inset-block: anchor(end) auto;
         inset-inline: anchor(start) auto;
         transform: none;
-        transition: none;
+        transition:
+            opacity var(--micl-duration) linear,
+            overlay var(--micl-duration) linear allow-discrete,
+            display var(--micl-duration) linear allow-discrete;
         position-try-fallbacks: flip-block;
     }
 
@@ -173,6 +161,7 @@ dialog.micl-dialog {
 
         &:has(> .micl-dialog__icon) {
             align-items: center;
+            text-align: center;
         }
         .micl-dialog__icon {
             --_icon-size: var(--md-comp-dialog-icon-size, var(--md-sys-icon-size, 24px));
@@ -192,11 +181,10 @@ dialog.micl-dialog {
         .micl-dialog__subhead {
             @include typography.title-medium;
 
-            padding-inline: var(--_padding);
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
-            color: var(--md-sys-color-on-surface)
+            color: var(--md-comp-dialog-subhead-color, var(--md-sys-color-on-surface));
         }
         &:has(+ .micl-dialog__actions) {
             padding-block-end: 0;
@@ -218,21 +206,22 @@ dialog.micl-dialog {
         justify-content: flex-end;
         column-gap: 8px;
         padding: var(--_padding);
-        opacity: 1;
-        transition:
-            opacity var(--md-comp-dialog-motion-duration) linear allow-discrete,
-            overlay var(--md-comp-dialog-motion-duration) linear allow-discrete,
-            display var(--md-comp-dialog-motion-duration) linear allow-discrete;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        --_motion-duration: 0ms;
+        --_motion-duration-reverse: 0ms;
     }
 }
 
 dialog.micl-dialog.micl-dialog--fullscreen {
-    @media (max-width: 560px) {
+    @media (max-width: layout.$md-sys-breakpoint-compact-max) {
         --_dialog-background-color: var(--md-comp-full-screen-dialog-container-color, var(--md-sys-color-surface));
 
-        inline-size: 100vw;
-        block-size: 100vh;
-        max-inline-size: 100vw;
+        inline-size: 100%;
+        block-size: 100dvb;
+        max-inline-size: 100%;
+        max-block-size: 100dvb;
         border-radius: var(--md-sys-shape-corner-none, 0px);
         box-shadow: var(--md-sys-elevation-level0);
         timeline-scope: --headlineTimeline;
@@ -243,6 +232,7 @@ dialog.micl-dialog.micl-dialog--fullscreen {
             block-size: 56px;
             flex-direction: row;
             align-items: center;
+            text-align: start;
             gap: 8px;
             padding-block: 4px;
             padding-inline: 8px 16px;
@@ -262,26 +252,24 @@ dialog.micl-dialog.micl-dialog--fullscreen {
                 white-space: nowrap;
             }
             .micl-dialog__icon {
-                display:none;
+                display: none;
             }
         }
         .micl-dialog__content {
             scroll-timeline: --headlineTimeline block;
-            scroll-timeline: --headlineTimeline vertical;
         }
         .micl-dialog__actions {
             display: none;
-            opacity: 0;
         }
     }
-    @media (min-width: 561px) {
+    @media (min-width: layout.$md-sys-breakpoint-medium-min) {
         .micl-dialog__fullscreen {
             display: none;
         }
     }
 }
 
-@media (max-width: 560px) {
+@media (max-width: layout.$md-sys-breakpoint-compact-max) {
     body:has(dialog.micl-dialog.micl-dialog--fullscreen:popover-open) {
         overflow-y: hidden;
     }

package/components/iconbutton/index.scss

@@ -56,17 +56,17 @@ $iconbuttons: ':is([class*="micl-iconbutton-standard-"], [class*="micl-iconbutto
         display: flex;
         align-items: center;
         justify-content: center;
-        block-size: var(--md-sys-target-size, 48px);
+        block-size: var(--md-sys-state-target-size, 48px);
         inline-size: 100%;
-        min-inline-size: var(--md-sys-target-size, 48px);
-        inset: calc((var(--micl-height) - var(--md-sys-target-size, 48px)) / 2) 0 0 calc((min(100%, var(--md-sys-target-size, 48px)) - var(--md-sys-target-size, 48px)) / 2);
+        min-inline-size: var(--md-sys-state-target-size, 48px);
+        inset: calc((var(--micl-height) - var(--md-sys-state-target-size, 48px)) / 2) 0 0 calc((min(100%, var(--md-sys-state-target-size, 48px)) - var(--md-sys-state-target-size, 48px)) / 2);
         background-color: transparent;
     }
 }
 
 #{$iconbuttons} {
-    --md-comp-icon-button-motion-effects: #{motion.$md-sys-motion-expressive-fast-spatial};
-    --md-comp-icon-button-motion-duration: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
+    --_motion-effects: var(--md-comp-icon-button-motion-effects, #{motion.$md-sys-motion-expressive-fast-spatial});
+    --_motion-duration: var(--md-comp-icon-button-motion-duration, #{motion.$md-sys-motion-expressive-fast-spatial-duration});
     --micl-ripple: 1;
 
     box-sizing: border-box;
@@ -96,10 +96,10 @@ $iconbuttons: ':is([class*="micl-iconbutton-standard-"], [class*="micl-iconbutto
     font-variation-settings: 'FILL' 0;
     cursor: pointer;
     transition:
-        border-radius var(--md-comp-icon-button-motion-duration) var(--md-comp-icon-button-motion-effects),
-        font-variation-settings var(--md-comp-icon-button-motion-duration) linear,
+        border-radius var(--_motion-duration) var(--_motion-effects),
+        font-variation-settings var(--_motion-duration) linear,
         background-size 0ms,
-        --statelayer-opacity var(--md-comp-icon-button-motion-duration) linear;
+        --statelayer-opacity var(--_motion-duration) linear;
 
     &:disabled {
         box-shadow: var(--md-sys-elevation-level0);

package/components/list/index.scss

@@ -165,8 +165,8 @@ $unselected: ':not(:checked, :has(input[type=checkbox]:checked), #{$open-accordi
 }
 
 .micl-list {
-    --md-comp-list-motion-effects: #{motion.$md-sys-motion-expressive-fast-spatial};
-    --md-comp-list-motion-duration: #{motion.$md-sys-motion-expressive-default-effects-duration};
+    --_list-motion-effects: var(--md-comp-list-motion-effects, #{motion.$md-sys-motion-expressive-fast-spatial});
+    --_list-motion-duration: var(--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-comp-divider-space: 0.5px;
@@ -269,9 +269,9 @@ $unselected: ':not(:checked, :has(input[type=checkbox]:checked), #{$open-accordi
     background-size: 0%, 100%;
     list-style: none;
     transition:
-        border-radius var(--md-comp-list-motion-duration) var(--md-comp-list-motion-effects),
+        border-radius var(--_list-motion-duration) var(--_list-motion-effects),
         background-size 0ms,
-        --statelayer-opacity var(--md-comp-list-motion-duration) linear;
+        --statelayer-opacity var(--_list-motion-duration) linear;
     -webkit-tap-highlight-color: transparent;
 
     &:first-of-type {
@@ -390,11 +390,15 @@ $unselected: ':not(:checked, :has(input[type=checkbox]:checked), #{$open-accordi
     }
 }
 #{$items} {
-    input[type=checkbox].micl-checkbox {
-        block-size: 24px;
-        min-block-size: 24px;
-        inline-size: 24px;
-        min-inline-size: 24px;
+    // The compact list controls. The checkbox and the radio button derive all four of their
+    // size properties and their transparent border from these two, so overriding them shrinks
+    // the box without leaving the pseudo-elements wider than the padding box that centres
+    // them: sizing the element directly left an 18px container inside a 16px padding box,
+    // which start-aligned it.
+    input[type=checkbox].micl-checkbox,
+    input[type=radio].micl-radio {
+        --_layer: max(24px, var(--_size));
+        --_target: var(--_layer);
     }
 }
 
@@ -403,11 +407,11 @@ $unselected: ':not(:checked, :has(input[type=checkbox]:checked), #{$open-accordi
     font-size: var(--md-comp-list-item-leading-icon-expressive-size, 20px);
     font-variation-settings: 'FILL' 0;
     color: var(--_leading-icon-color);
-    transition: font-variation-settings var(--md-comp-list-motion-duration) linear;
+    transition: font-variation-settings var(--_list-motion-duration) linear;
 
     &.micl-list-item__icon--expander {
         transform: rotate(0deg);
-        transition: transform var(--md-comp-list-motion-duration) linear;
+        transition: transform var(--_list-motion-duration) linear;
     }
 }
 .micl-list-item__text ~ .micl-list-item__icon {

package/components/menu/index.scss

@@ -139,12 +139,12 @@ $item-classes: ':is(.micl-list-item-one, .micl-list-item-two, .micl-list-item-th
 }
 
 .micl-menu[popover], select {
-    --md-comp-menu-motion-effects: #{motion.$md-sys-motion-expressive-fast-effects};
-    --md-comp-menu-motion-effects-duration: #{motion.$md-sys-motion-expressive-default-effects-duration};
-    --md-comp-menu-motion-effects-duration-reverse: #{motion.$md-sys-motion-expressive-default-effects-duration};
-    --md-comp-menu-motion-spatial: #{motion.$md-sys-motion-expressive-default-spatial};
-    --md-comp-menu-motion-spatial-duration: #{motion.$md-sys-motion-expressive-default-spatial-duration};
-    --md-comp-menu-motion-spatial-duration-reverse: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
+    --_menu-motion-effects: var(--md-comp-menu-motion-effects, #{motion.$md-sys-motion-expressive-fast-effects});
+    --_menu-motion-effects-duration: var(--md-comp-menu-motion-effects-duration, #{motion.$md-sys-motion-expressive-default-effects-duration});
+    --_menu-motion-effects-duration-reverse: var(--md-comp-menu-motion-effects-duration-reverse, #{motion.$md-sys-motion-expressive-default-effects-duration});
+    --_menu-motion-spatial: var(--md-comp-menu-motion-spatial, #{motion.$md-sys-motion-expressive-default-spatial});
+    --_menu-motion-spatial-duration: var(--md-comp-menu-motion-spatial-duration, #{motion.$md-sys-motion-expressive-default-spatial-duration});
+    --_menu-motion-spatial-duration-reverse: var(--md-comp-menu-motion-spatial-duration-reverse, #{motion.$md-sys-motion-expressive-fast-spatial-duration});
 
     --md-comp-list-container-shape: var(--md-comp-menu-active-container-shape, var(--md-comp-menu-container-shape, var(--md-sys-shape-corner-large, 16px)));
 
@@ -212,7 +212,7 @@ $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-duration: var(--_menu-motion-spatial-duration-reverse);
     --micl-easing: linear;
     --_group-shape: var(--md-comp-menu-group-shape, var(--md-sys-shape-corner-small, 8px));
 
@@ -222,12 +222,12 @@ $item-classes: ':is(.micl-list-item-one, .micl-list-item-two, .micl-list-item-th
     transform-origin: center top;
     transition:
         opacity var(--micl-duration) var(--micl-easing),
-        transform var(--micl-duration) var(--md-comp-menu-motion-spatial),
+        transform var(--micl-duration) var(--_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-duration: var(--_menu-motion-spatial-duration);
         --micl-easing: #{motion.$md-sys-motion-easing-emphasized-decelerate};
 
         display: flex;
@@ -249,9 +249,9 @@ $item-classes: ':is(.micl-list-item-one, .micl-list-item-two, .micl-list-item-th
     &::backdrop {
         background-color: rgba(0, 0, 0, 0);
         transition:
-            background-color var(--md-comp-menu-motion-effects-duration) linear,
-            overlay var(--md-comp-menu-motion-effects-duration) linear allow-discrete,
-            display var(--md-comp-menu-motion-effects-duration) linear allow-discrete;
+            background-color var(--_menu-motion-effects-duration) linear,
+            overlay var(--_menu-motion-effects-duration) linear allow-discrete,
+            display var(--_menu-motion-effects-duration) linear allow-discrete;
     }
 
     .micl-list {
@@ -259,7 +259,7 @@ $item-classes: ':is(.micl-list-item-one, .micl-list-item-two, .micl-list-item-th
         row-gap: 2px;
         background-color: var(--md-comp-menu-standard-container-color, var(--md-sys-color-surface-container-low));
         box-shadow: var(--md-comp-menu-container-elevation, var(--md-sys-elevation-level2));
-        transition: border-radius var(--md-comp-menu-motion-effects-duration-reverse) linear;
+        transition: border-radius var(--_menu-motion-effects-duration-reverse) linear;
 
         &+ .micl-list {
             border-start-start-radius: var(--_group-shape);

package/components/navigationbar/index.scss

@@ -19,7 +19,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-@use '../../foundations/layout';
+@use '../../foundations/layout/tokens' as layout;
 @use '../../styles/elevation';
 @use '../../styles/statelayer';
 @use '../navigationrail/navitem';
@@ -115,6 +115,12 @@ nav.micl-navigationbar {
                 margin-block-start: 0;
                 padding-inline-end: var(--md-comp-nav-bar-item-horizontal-active-indicator-trailing-space, 16px);
             }
+            .micl-navigationbar__text:has(+ .micl-badge--trailing) {
+                padding-inline-end: 0;
+            }
+            .micl-badge--trailing {
+                margin-inline-end: var(--md-comp-nav-bar-item-horizontal-active-indicator-trailing-space, 16px);
+            }
         }
     }
 }

package/components/navigationrail/index.scss

@@ -19,7 +19,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-@use '../../foundations/layout';
+@use '../../foundations/layout/tokens' as layout;
 @use '../../styles/elevation';
 @use '../../styles/motion';
 @use '../../styles/shape';
@@ -44,13 +44,12 @@
 @include typography.scale('label-large');
 
 .micl-navigationrail {
-    --md-comp-nav-rail-spring-buffer: 100px;
-    --md-comp-nav-rail-divider-thickness: 0px;
-    --md-comp-nav-rail-motion-spatial: #{motion.$md-sys-motion-expressive-slow-spatial};
-    --md-comp-nav-rail-motion-duration: #{motion.$md-sys-motion-expressive-slow-spatial-duration};
-    --md-comp-nav-rail-motion-duration-reverse: #{motion.$md-sys-motion-expressive-default-spatial-duration};
-    --md-comp-nav-rail-morph-duration: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
-    --md-comp-nav-rail-morph-duration-reverse: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
+    --_navigationrail-spring-buffer: var(--md-comp-nav-rail-spring-buffer, 100px);
+    --_navigationrail-motion-spatial: var(--md-comp-nav-rail-motion-spatial, #{motion.$md-sys-motion-expressive-slow-spatial});
+    --_navigationrail-motion-duration: var(--md-comp-nav-rail-motion-duration, #{motion.$md-sys-motion-expressive-slow-spatial-duration});
+    --_navigationrail-motion-duration-reverse: var(--md-comp-nav-rail-motion-duration-reverse, #{motion.$md-sys-motion-expressive-default-spatial-duration});
+    --_navigationrail-morph-duration: var(--md-comp-nav-rail-morph-duration, #{motion.$md-sys-motion-expressive-fast-spatial-duration});
+    --_navigationrail-morph-duration-reverse: var(--md-comp-nav-rail-morph-duration-reverse, #{motion.$md-sys-motion-expressive-fast-spatial-duration});
 
     --_navigationrail-current-max-width: var(--md-comp-nav-rail-collapsed-container-width, 96px);
     --_navigationrail-current-min-width: var(--md-comp-nav-rail-collapsed-container-width, 96px);
@@ -58,10 +57,10 @@
     --_navigationrail-item-width: var(--md-comp-nav-rail-item-vertical-active-indicator-width, 56px);
     --_navigationrail-item-target-height: var(--_navigationrail-item-base-height);
 
-    --micl-duration: var(--md-comp-nav-rail-motion-duration-reverse);
+    --micl-duration: var(--_navigationrail-motion-duration-reverse);
 
     --_navigationrail-content-gap: var(--md-comp-nav-rail-item-container-vertical-space, 6px);
-    --_navigationrail-morph-speed: var(--md-comp-nav-rail-morph-duration-reverse);
+    --_navigationrail-morph-speed: var(--_navigationrail-morph-duration-reverse);
     --_navigationrail-container-delay: calc(var(--_navigationrail-morph-speed) / 2);
     --_navigationrail-item-delay: 0ms;
     --_navigationrail-text-animation: none;
@@ -165,7 +164,7 @@
                 flex-direction 0s calc(var(--_navigationrail-morph-speed) / 2) linear allow-discrete,
                 background-color calc(var(--_navigationrail-morph-speed) / 2) linear,
                 background-size 0ms,
-                --statelayer-opacity var(--md-comp-nav-rail-motion-duration) linear;
+                --statelayer-opacity var(--_navigationrail-motion-duration) linear;
 
             .micl-navigationrail__icon {
                 @extend %micl-navitem-icon;
@@ -186,7 +185,7 @@
             }
 
             &:active {
-                transition-duration: 0ms, 0ms, 0ms, calc(var(--_navigationrail-morph-speed) / 2), 0ms, var(--md-comp-nav-rail-motion-duration);
+                transition-duration: 0ms, 0ms, 0ms, calc(var(--_navigationrail-morph-speed) / 2), 0ms, var(--_navigationrail-motion-duration);
             }
         }
 
@@ -203,7 +202,7 @@
     }
 
     &[open] {
-        --micl-duration: var(--md-comp-nav-rail-motion-duration);
+        --micl-duration: var(--_navigationrail-motion-duration);
 
         border-start-end-radius: var(--md-comp-nav-rail-expanded-modal-container-shape, var(--md-sys-shape-corner-large));
         border-end-end-radius: var(--md-comp-nav-rail-expanded-modal-container-shape, var(--md-sys-shape-corner-large));
@@ -237,7 +236,7 @@ nav.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggl
     --_navigationrail-item-target-padding: 16px;
 
     --_navigationrail-content-gap: 0px;
-    --_navigationrail-morph-speed: var(--md-comp-nav-rail-morph-duration);
+    --_navigationrail-morph-speed: var(--_navigationrail-morph-duration);
     --_navigationrail-container-delay: 0ms;
     --_navigationrail-item-delay: calc(var(--_navigationrail-morph-speed) / 2);
     --_navigationrail-text-animation: var(--_navigationrail-morph-speed) linear forwards navigationrail-text-to-expanded;
@@ -263,6 +262,12 @@ nav.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggl
             margin-inline-start: var(--_navigationrail-expanded-text-margin);
             padding-inline-end: 16px;
         }
+        .micl-navigationrail__text:has(+ .micl-badge--trailing) {
+            padding-inline-end: 0;
+        }
+        .micl-badge--trailing {
+            margin-inline-end: 16px;
+        }
 
         &:not(:has(.micl-navigationrail__icon)) .micl-navigationrail__text {
             margin-inline-start: 0px;
@@ -272,7 +277,7 @@ nav.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggl
 }
 
 nav.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggle.micl-button--toggled:not([aria-pressed="true"])) {
-    --_navigationrail-morph-speed: var(--md-comp-nav-rail-morph-duration-reverse);
+    --_navigationrail-morph-speed: var(--_navigationrail-morph-duration-reverse);
     --_navigationrail-text-animation: var(--_navigationrail-morph-speed) linear forwards navigationrail-text-to-collapsed;
 }
 
@@ -287,25 +292,25 @@ nav.micl-navigationrail {
 
 dialog.micl-navigationrail {
     display: none;
-    min-inline-size: calc(var(--md-comp-nav-rail-expanded-container-width-minimum, 220px) + var(--md-comp-nav-rail-spring-buffer));
-    max-inline-size: calc(var(--md-comp-nav-rail-expanded-container-width-maximum, 360px) + var(--md-comp-nav-rail-spring-buffer));
-    margin-inline-start: calc(-1 * (var(--md-comp-nav-rail-expanded-container-width-maximum, 360px) + var(--md-comp-nav-rail-spring-buffer)));
-    padding-inline: var(--md-comp-nav-rail-spring-buffer) 0;
+    min-inline-size: calc(var(--md-comp-nav-rail-expanded-container-width-minimum, 220px) + var(--_navigationrail-spring-buffer));
+    max-inline-size: calc(var(--md-comp-nav-rail-expanded-container-width-maximum, 360px) + var(--_navigationrail-spring-buffer));
+    margin-inline-start: calc(-1 * (var(--md-comp-nav-rail-expanded-container-width-maximum, 360px) + var(--_navigationrail-spring-buffer)));
+    padding-inline: var(--_navigationrail-spring-buffer) 0;
     opacity: 0%;
 
     transition:
         opacity var(--micl-duration) linear,
-        margin-inline-start var(--micl-duration) var(--md-comp-nav-rail-motion-spatial),
+        margin-inline-start var(--micl-duration) var(--_navigationrail-motion-spatial),
         overlay var(--micl-duration) linear allow-discrete,
         display var(--micl-duration) linear allow-discrete;
 
     &[open] {
         display: flex;
-        margin-inline-start: calc(-1 * var(--md-comp-nav-rail-spring-buffer));
+        margin-inline-start: calc(-1 * var(--_navigationrail-spring-buffer));
         opacity: 100%;
 
         @starting-style {
-            margin-inline-start: calc(-1 * (var(--md-comp-nav-rail-expanded-container-width-maximum, 360px) + var(--md-comp-nav-rail-spring-buffer)));
+            margin-inline-start: calc(-1 * (var(--md-comp-nav-rail-expanded-container-width-maximum, 360px) + var(--_navigationrail-spring-buffer)));
             opacity: 0%;
         }
     }

package/components/radio/README.md

@@ -11,6 +11,8 @@ To add a basic radio button, use the `<input type="radio">` element with the `mi
 <label for="myradio">First choice</label>
 ```
 
+**Note on labels**: The component automatically applies `cursor: pointer` and the **on-surface** color role to any `<label>` immediately preceding, immediately following, or wrapping a `micl-radio` input. You are encouraged to customize these CSS settings to match your design system.
+
 ### CSS
 Import the radio button styles into your project:
 
@@ -32,9 +34,49 @@ A live example of the [Radio button component](https://henkpb.github.io/micl/rad
 ## Variants
 A radio button can be disabled by adding the `disabled` attribute to the `<input>` element.
 
-The Radio Button component respects the `dir` global attribute, automatically adjusting its layout for right-to-left (RTL) languages when `dir="rtl"` is applied to an ancestor element.
+The Radio button component respects the element's computed direction, automatically adjusting its layout for right-to-left (RTL) languages — whether the `dir` attribute is set on the element itself or inherited from an ancestor.
+
+To vertically align a radio button with its label, wrap both in an element with styling similar to the following:
+
+```CSS
+.my-valign-class {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+```
+
+```HTML
+<div class="my-valign-class">
+  <input type="radio" id="myradio" class="micl-radio" name="foo">
+  <label for="myradio">First choice</label>
+</div>
+```
+
+## Radio group
+Radio buttons are only meaningful as a group. Give every radio button for a given question the same `name`, and the browser makes the choices mutually exclusive for you — selecting one clears the others, and only the selected value is submitted.
+
+The group is also a single stop in the tab order: <kbd>Tab</kbd> moves into and out of it, while the arrow keys move the selection between the buttons inside it. This behaviour is native, so it needs no JavaScript and no `role` attributes.
 
-The component applies `cursor: pointer` and the color role **on surface** to the `<label>` element immediately preceding or following an `<input type="radio">` with the `micl-radio` class. You are encouraged to customize these CSS settings to match your design system.
+Wrap the group in a `<fieldset>` with a `<legend>` so that assistive technology announces the question along with each of the options:
+
+```HTML
+<fieldset>
+  <legend>Delivery</legend>
+  <div class="my-valign-class">
+    <input type="radio" id="ship1" class="micl-radio" name="delivery" value="standard" checked>
+    <label for="ship1">Standard</label>
+  </div>
+  <div class="my-valign-class">
+    <input type="radio" id="ship2" class="micl-radio" name="delivery" value="express">
+    <label for="ship2">Express</label>
+  </div>
+</fieldset>
+```
+
+Always mark one option as `checked`, unless leaving the question unanswered is a valid state. A group with no preselected option cannot be returned to its initial state by the user once a choice has been made.
+
+Adding the `required` attribute to a radio button makes the whole group mandatory — the browser will not submit the form until one of the buttons carrying that `name` is selected. The [Form foundation](../../foundations/form/README.md) leaves radio buttons to the browser's own reporting, so no MICL-specific error class is involved.
 
 ## Theming
 Each radio button can be themed with CSS custom properties that follow the Material Design 3 component-token naming convention. Set them on any appropriate parent element to affect its child radio buttons.
@@ -50,19 +92,17 @@ Each radio button can be themed with CSS custom properties that follow the Mater
 
 ```HTML
 <div style="--md-comp-radio-button-icon-size:28px">
-  <input type="radio" id="myradio" class="micl-radio">
+  <input type="radio" id="myradio" class="micl-radio" name="foo">
   <label for="myradio">Large radio button</label>
 </div>
 ```
 
-To vertically align a radio button with its label, wrap both in an element that has a styling like suggested below:
+## Compatibility
+This component relies on a few recent CSS features, which may not be fully supported in your browser:
 
-```HTML
-<div style="display:flex;flex-direction:row;align-items:center">
-  <input type="radio" id="myradio" class="micl-radio">
-  <label for="myradio">Large radio button</label>
-</div>
-```
+| Feature | Used for |
+|---|---|
+| [Relative RGB color values](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#browser_compatibility) | The state layer and the ripple |
+| [`:has()`](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) | Styling a `<label>` that precedes its radio button |
 
-## Compatibility
-This component utilizes relative RGB color values, which may not be fully supported in your browser. Please check [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#browser_compatibility) for details.
+Please check the linked browser-compatibility tables for details.