material-inspired-component-library 2.0.1 → 3.0.1

package/components/divider/index.scss

@@ -31,44 +31,44 @@ body {
 .micl-divider {
     width: 100%;
     height: 0;
-    margin-block: var(--md-sys-divider-space);
+    margin-block: calc(var(--md-sys-divider-space, 4px) - 1px) var(--md-sys-divider-space, 4px);
     margin-inline: 0;
     border: 0;
-    border-block-start: var(--md-sys-divider-thickness) solid var(--md-sys-divider-color);
+    border-block-start: var(--md-sys-divider-thickness, 1px) solid var(--md-sys-divider-color);
 }
 
 .micl-divider-inset {
     width: calc(100% - 2 * var(--md-sys-divider-inset-margin));
     height: 0;
-    margin-block: var(--md-sys-divider-space);
+    margin-block: calc(var(--md-sys-divider-space, 4px) - 1px) var(--md-sys-divider-space, 4px);
     margin-inline: var(--md-sys-divider-inset-margin);
     border: 0;
-    border-block-start: var(--md-sys-divider-thickness) solid var(--md-sys-divider-color);
+    border-block-start: var(--md-sys-divider-thickness, 1px) solid var(--md-sys-divider-color);
 }
 
 .micl-divider-inset--start {
     width: calc(100% - var(--md-sys-divider-inset-margin));
     height: 0;
-    margin-block: var(--md-sys-divider-space);
+    margin-block: calc(var(--md-sys-divider-space, 4px) - 1px) var(--md-sys-divider-space, 4px);
     margin-inline: var(--md-sys-divider-inset-margin) 0;
     border: 0;
-    border-block-start: var(--md-sys-divider-thickness) solid var(--md-sys-divider-color);
+    border-block-start: var(--md-sys-divider-thickness, 1px) solid var(--md-sys-divider-color);
 }
 
 .micl-divider-inset--end {
     width: calc(100% - var(--md-sys-divider-inset-margin));
     height: 0;
-    margin-block: var(--md-sys-divider-space);
+    margin-block: calc(var(--md-sys-divider-space, 4px) - 1px) var(--md-sys-divider-space, 4px);
     margin-inline: 0 var(--md-sys-divider-inset-margin);
     border: 0;
-    border-block-start: var(--md-sys-divider-thickness) solid var(--md-sys-divider-color);
+    border-block-start: var(--md-sys-divider-thickness, 1px) solid var(--md-sys-divider-color);
 }
 
 .micl-divider-vertical {
     min-height: 100%;
     width: 0;
     margin-block: 0;
-    margin-inline: calc(2 * var(--md-sys-divider-space));
+    margin-inline: calc(2 * var(--md-sys-divider-space, 4px));
     border: 0;
-    border-inline-start: var(--md-sys-divider-thickness) solid var(--md-sys-divider-color);
+    border-inline-start: var(--md-sys-divider-thickness, 1px) solid var(--md-sys-divider-color);
 }

package/components/iconbutton/index.scss

@@ -25,8 +25,11 @@
 @use '../../styles/statelayer';
 
 button.micl-iconbutton-standard-xs,
+a.micl-iconbutton-standard-xs,
 button.micl-iconbutton-standard-s,
+a.micl-iconbutton-standard-s,
 button.micl-iconbutton-standard-m,
+a.micl-iconbutton-standard-m,
 button.micl-iconbutton-standard-l,
 button.micl-iconbutton-standard-xl,
 button.micl-iconbutton-filled-xs,
@@ -90,134 +93,127 @@ button.micl-iconbutton-outlined-xl {
 }
 
 button.micl-iconbutton-standard-xs,
+a.micl-iconbutton-standard-xs,
 button.micl-iconbutton-filled-xs,
 button.micl-iconbutton-tonal-xs,
 button.micl-iconbutton-outlined-xs {
-    width: var(--md-sys-target-size);
-    min-width: var(--md-sys-target-size);
-    height: var(--md-sys-target-size);
+    --micl-width: 32px;
+    --micl-height: 32px;
+
+    position: relative;
+    inline-size: var(--micl-width);
+    min-inline-size: var(--micl-width);
+    block-size: var(--micl-height);
     font-size: 20px;
-    border: 8px solid transparent;
-    background-clip: content-box;
 
-    &.micl-button--toggle.micl-button--selected {
-        // border-radius: var(--md-sys-shape-corner-medium);
-        border-radius: var(--md-sys-shape-corner-large);
+    &::before {
+        content: "";
+        position: absolute;
+        block-size: var(--md-sys-target-size);
+        inline-size: var(--md-sys-target-size);
+        inset: calc((var(--micl-height) - var(--md-sys-target-size)) / 2) 0 0 calc((var(--micl-width) - var(--md-sys-target-size)) / 2);
+        background-color: transparent;
     }
-    &:not(:disabled) {
-        &:active {
-            // border-radius: var(--md-sys-shape-corner-small);
-            border-radius: var(--md-sys-shape-corner-medium);
-        }
-        &:focus-visible {
-            outline-offset: -6px;
-        }
+    &.micl-button--toggle.micl-button--selected {
+        border-radius: var(--md-sys-shape-corner-medium);
     }
     &.micl-iconbutton--narrow {
-        height: calc(var(--md-sys-target-size) + 10px);
-        border-width: 10px;
-        border-radius: calc(var(--md-sys-target-size) / 2);
-
-        &:focus-visible {
-            outline-offset: -8px;
-        }
+        --micl-width: 28px;
+        border-radius: calc(var(--micl-width) / 2);
     }
     &.micl-iconbutton--wide {
-        width: calc(var(--md-sys-target-size) + 8px);
-        border-radius: calc(var(--md-sys-target-size) / 2);
-
-        &:focus-visible {
-            outline-offset: -6px;
-        }
+        --micl-width: 40px;
+        border-radius: calc(var(--micl-width) / 2);
     }
     &.micl-button--square {
-        // border-radius: var(--md-sys-shape-corner-medium);
-        border-radius: var(--md-sys-shape-corner-large);
+        border-radius: var(--md-sys-shape-corner-medium);
 
         &.micl-button--toggle.micl-button--selected {
             border-radius: var(--md-sys-shape-corner-full);
         }
     }
+    &:not(:disabled) {
+        &:active {
+            border-radius: var(--md-sys-shape-corner-small);
+        }
+    }
 }
 
 button.micl-iconbutton-standard-s,
+a.micl-iconbutton-standard-s,
 button.micl-iconbutton-filled-s,
 button.micl-iconbutton-tonal-s,
 button.micl-iconbutton-outlined-s {
-    width: var(--md-sys-target-size);
-    min-width: var(--md-sys-target-size);
-    height: var(--md-sys-target-size);
+    --micl-width: 40px;
+    --micl-height: 40px;
+
+    position: relative;
+    inline-size: var(--micl-width);
+    min-inline-size: var(--micl-width);
+    block-size: var(--micl-height);
     font-size: 24px;
-    border: 4px solid transparent;
-    background-clip: content-box;
 
-    &.micl-button--toggle.micl-button--selected {
-        // border-radius: var(--md-sys-shape-corner-medium);
-        border-radius: var(--md-sys-shape-corner-large);
+    &::before {
+        content: "";
+        position: absolute;
+        block-size: var(--md-sys-target-size);
+        inline-size: var(--md-sys-target-size);
+        inset: calc((var(--micl-height) - var(--md-sys-target-size)) / 2) 0 0 calc((var(--micl-width) - var(--md-sys-target-size)) / 2);
+        background-color: transparent;
     }
-    &:not(:disabled) {
-        &:active {
-            // border-radius: var(--md-sys-shape-corner-small);
-            border-radius: var(--md-sys-shape-corner-medium);
-        }
-        &:focus-visible {
-            outline-offset: -2px;
-        }
+    &.micl-button--toggle.micl-button--selected {
+        border-radius: var(--md-sys-shape-corner-medium);
     }
     &.micl-iconbutton--narrow {
-        height: calc(var(--md-sys-target-size) + 8px);
-        border-width: 8px;
-        border-radius: calc(var(--md-sys-target-size) / 2);
-
-        &:focus-visible {
-            outline-offset: -6px;
-        }
+        --micl-width: 32px;
+        border-radius: calc(var(--micl-width) / 2);
     }
     &.micl-iconbutton--wide {
-        width: calc(var(--md-sys-target-size) + 12px);
-        border-radius: 26px;
+        --micl-width: 52px;
+        border-radius: calc(var(--micl-width) / 2);
 
-        &:focus-visible {
-            outline-offset: -2px;
+        &::before {
+            inline-size: var(--micl-width);
+            inset: calc((40px - var(--md-sys-target-size)) / 2) 0 0 0;
         }
     }
     &.micl-button--square {
-        // border-radius: var(--md-sys-shape-corner-medium);
-        border-radius: var(--md-sys-shape-corner-large);
+        border-radius: var(--md-sys-shape-corner-medium);
 
         &.micl-button--toggle.micl-button--selected {
             border-radius: var(--md-sys-shape-corner-full);
         }
     }
+    &:not(:disabled) {
+        &:active {
+            border-radius: var(--md-sys-shape-corner-small);
+        }
+    }
 }
 
 button.micl-iconbutton-standard-m,
+a.micl-iconbutton-standard-m,
 button.micl-iconbutton-filled-m,
 button.micl-iconbutton-tonal-m,
 button.micl-iconbutton-outlined-m {
-    width: 56px;
-    min-width: 56px;
-    height: 56px;
+    --micl-width: 56px;
+    --micl-height: 56px;
+
+    inline-size: var(--micl-width);
+    min-inline-size: var(--micl-width);
+    block-size: var(--micl-height);
     font-size: 24px;
 
     &.micl-button--toggle.micl-button--selected {
         border-radius: var(--md-sys-shape-corner-large);
     }
-    &:not(:disabled) {
-        &:active {
-            // border-radius: var(--md-sys-shape-corner-small);
-            border-radius: var(--md-sys-shape-corner-medium);
-        }
-    }
     &.micl-iconbutton--narrow {
-        width: var(--md-sys-target-size);
-        min-width: var(--md-sys-target-size);
-        border-radius: calc(var(--md-sys-target-size) / 2);
+        --micl-width: 48px;
+        border-radius: calc(var(--micl-width) / 2);
     }
     &.micl-iconbutton--wide {
-        width: 72px;
-        min-width: 72px;
-        border-radius: 36px;
+        --micl-width: 72px;
+        border-radius: calc(var(--micl-width) / 2);
     }
     &.micl-button--square {
         border-radius: var(--md-sys-shape-corner-large);
@@ -226,34 +222,35 @@ button.micl-iconbutton-outlined-m {
             border-radius: var(--md-sys-shape-corner-full);
         }
     }
+    &:not(:disabled) {
+        &:active {
+            border-radius: var(--md-sys-shape-corner-small);
+        }
+    }
 }
 
 button.micl-iconbutton-standard-l,
 button.micl-iconbutton-filled-l,
 button.micl-iconbutton-tonal-l,
 button.micl-iconbutton-outlined-l {
-    width: 96px;
-    min-width: 96px;
-    height: 96px;
+    --micl-width: 96px;
+    --micl-height: 96px;
+
+    inline-size: var(--micl-width);
+    min-inline-size: var(--micl-width);
+    block-size: var(--micl-height);
     font-size: 32px;
 
     &.micl-button--toggle.micl-button--selected {
         border-radius: var(--md-sys-shape-corner-extra-large);
     }
-    &:not(:disabled) {
-        &:active {
-            border-radius: var(--md-sys-shape-corner-large);
-        }
-    }
     &.micl-iconbutton--narrow {
-        width: 64px;
-        min-width: 64px;
-        border-radius: 32px;
+        --micl-width: 64px;
+        border-radius: calc(var(--micl-width) / 2);
     }
     &.micl-iconbutton--wide {
-        width: 128px;
-        min-width: 128px;
-        border-radius: 64px;
+        --micl-width: 128px;
+        border-radius: calc(var(--micl-width) / 2);
     }
     &.micl-button--square {
         border-radius: var(--md-sys-shape-corner-extra-large);
@@ -262,34 +259,35 @@ button.micl-iconbutton-outlined-l {
             border-radius: var(--md-sys-shape-corner-full);
         }
     }
+    &:not(:disabled) {
+        &:active {
+            border-radius: var(--md-sys-shape-corner-large);
+        }
+    }
 }
 
 button.micl-iconbutton-standard-xl,
 button.micl-iconbutton-filled-xl,
 button.micl-iconbutton-tonal-xl,
 button.micl-iconbutton-outlined-xl {
-    width: 136px;
-    min-width: 136px;
-    height: 136px;
+    --micl-width: 136px;
+    --micl-height: 136px;
+
+    inline-size: var(--micl-width);
+    min-inline-size: var(--micl-width);
+    block-size: var(--micl-height);
     font-size: 40px;
 
     &.micl-button--toggle.micl-button--selected {
         border-radius: var(--md-sys-shape-corner-extra-large);
     }
-    &:not(:disabled) {
-        &:active {
-            border-radius: var(--md-sys-shape-corner-large);
-        }
-    }
     &.micl-iconbutton--narrow {
-        width: 104px;
-        min-width: 104px;
-        border-radius: 52px;
+        --micl-width: 104px;
+        border-radius: calc(var(--micl-width) / 2);
     }
     &.micl-iconbutton--wide {
-        width: 184px;
-        min-width: 184px;
-        border-radius: 92px;
+        --micl-width: 184px;
+        border-radius: calc(var(--micl-width) / 2);
     }
     &.micl-button--square {
         border-radius: var(--md-sys-shape-corner-extra-large);
@@ -298,11 +296,19 @@ button.micl-iconbutton-outlined-xl {
             border-radius: var(--md-sys-shape-corner-full);
         }
     }
+    &:not(:disabled) {
+        &:active {
+            border-radius: var(--md-sys-shape-corner-large);
+        }
+    }
 }
 
 button.micl-iconbutton-standard-xs,
+a.micl-iconbutton-standard-xs,
 button.micl-iconbutton-standard-s,
+a.micl-iconbutton-standard-s,
 button.micl-iconbutton-standard-m,
+a.micl-iconbutton-standard-m,
 button.micl-iconbutton-standard-l,
 button.micl-iconbutton-standard-xl {
     --statelayer-color: var(--md-sys-color-on-surface-variant);
@@ -395,15 +401,9 @@ button.micl-iconbutton-outlined-xl {
     color: var(--md-sys-color-on-surface-variant);
 
     &.micl-iconbutton-outlined-xs,
-    &.micl-iconbutton-outlined-s {
-        // border-color: var(--md-sys-color-outline);
-        box-shadow: inset 1px 0px var(--md-sys-color-outline-variant),
-                    inset -1px 0px var(--md-sys-color-outline-variant),
-                    inset 0px -1px var(--md-sys-color-outline-variant),
-                    inset 0px 1px var(--md-sys-color-outline-variant);
-    }
+    &.micl-iconbutton-outlined-s,
     &.micl-iconbutton-outlined-m {
-        // border: 1px solid var(--md-sys-color-outline);
+        // border-color: var(--md-sys-color-outline);
         border: 1px solid var(--md-sys-color-outline-variant);
     }
     &.micl-iconbutton-outlined-l {

package/components/iconbutton/index.ts

@@ -40,7 +40,7 @@ export default (() =>
             event.target.classList.add('micl-button--toggled');
             event.target.classList.toggle('micl-button--selected');
             if (!!event.target.dataset.miclalt) {
-                [event.target.textContent, event.target.dataset.miclalt] = 
+                [event.target.textContent, event.target.dataset.miclalt] =
                 [event.target.dataset.miclalt, event.target.textContent];
             }
         }

package/components/list/README.md

@@ -156,19 +156,19 @@ To enable selection of list items, integrate a checkbox or switch component with
   <li class="micl-list-item-two" tabindex="0">
     <label>
       <span class="micl-list-item__text">
-        <span class="micl-list-item__headline">Blue car</span>
+        <span id="hd1" class="micl-list-item__headline">Blue car</span>
         <span class="micl-list-item__supporting-text">A blue car with four wheels.</span>
       </label>
-      <input type="checkbox" id="mycheckbox" class="micl-checkbox" value="cb1" tabindex="-1">
+      <input type="checkbox" id="mycheckbox" class="micl-checkbox" value="cb1" tabindex="-1" aria-labelledby="hd1">
     </span>
   </li>
   <li class="micl-list-item-two" tabindex="0">
     <label>
       <span class="micl-list-item__text">
-        <span class="micl-list-item__headline">Red car</span>
+        <span id="hd2" class="micl-list-item__headline">Red car</span>
         <span class="micl-list-item__supporting-text">A red car with tinted windows.</span>
       </label>
-      <input type="checkbox" id="checkbox2" class="micl-switch" value="cb2" tabindex="-1">
+      <input type="checkbox" id="checkbox2" class="micl-switch" value="cb2" tabindex="-1" aria-labelledby="hd2">
     </label>
   </li>
 </ul>

package/components/list/index.scss

@@ -104,7 +104,7 @@
     column-gap: var(--md-sys-list-item-space);
     padding-inline: var(--md-sys-list-item-space);
     border: none;
-    border-radius: var(--md-sys-shape-corner-none);
+    border-radius: var(--md-sys-shape-corner-none, 0px);
     background-color: var(--md-sys-list-item-container-color);
     background-image:
         radial-gradient(circle at var(--micl-x, center) var(--micl-y, center), transparent 0%, rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)) 10%, transparent 10%),
@@ -330,7 +330,7 @@
     display: inline-block;
     height: 56px;
     min-width: 56px;
-    border-radius: var(--md-sys-shape-corner-none);
+    border-radius: var(--md-sys-shape-corner-none, 0px);
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
@@ -339,7 +339,7 @@
     display: inline-block;
     height: 64px;
     min-width: calc(64px * var(--md-sys-list-item-thumbnail-aspect-ratio));
-    border-radius: var(--md-sys-shape-corner-none);
+    border-radius: var(--md-sys-shape-corner-none, 0px);
     background-position: center;
     background-repeat: no-repeat;
     background-size: contain;

package/components/navigationrail/README.md

@@ -4,10 +4,10 @@ This component implements the the [Material Design 3 Expressive Navigation rail]
 ## Basic Usage
 
 ### HTML
-To create a simple navigation rail, use a `<div>` element with the `micl-navigationrail` class. Inside, use an `input type="radio"` group to create the selectable navigation items. The `input` elements must share the same `name` attribute to ensure that only one item can be selected at a time. The `label` elements are associated with their respective inputs using the `for` attribute.
+To create a simple navigation rail, use a `<nav>` element with the `micl-navigationrail` class. Inside, use an `input type="radio"` group to create the selectable navigation items. The `input` elements must share the same `name` attribute to ensure that only one item can be selected at a time. The `label` elements are associated with their respective inputs using the `for` attribute.
 
 ```HTML
-<div id="mynavigationrail" class="micl-navigationrail">
+<nav id="mynavigationrail" class="micl-navigationrail">
   <div class="micl-navigationrail__content">
     <input type="radio" id="item1" name="navitem" value="email_inbox" checked>
     <label for="item1" class="micl-navigationrail__item" tabindex="0">
@@ -20,7 +20,7 @@ To create a simple navigation rail, use a `<div>` element with the `micl-navigat
       <span class="micl-navigationrail__text">Outbox</span>
     </label>
   </div>
-</div>
+</nav>
 ```
 
 ### CSS
@@ -44,7 +44,7 @@ A live example of the [Navigation rail component](https://henkpb.github.io/micl/
 The basic example creates a **collapsed** navigation rail. Add a menu button to allow the user to toggle between a **collapsed** and an **expanded** view.
 
 ```HTML
-<div id="mynavigationrail" class="micl-navigationrail">
+<nav id="mynavigationrail" class="micl-navigationrail">
   <div class="micl-navigationrail__headline">
     <button
       type="button"
@@ -56,7 +56,7 @@ The basic example creates a **collapsed** navigation rail. Add a menu button to
   <div class="micl-navigationrail__content">
     ...
   </div>
-</div>
+</nav>
 ```
 
 When the user clicks the menu button, the navigation rail is expanded and the toggle button is given the `micl-button--selected` class and the `micl-button--toggled` class that indicates that the toggle button has been clicked at least once.
@@ -66,7 +66,7 @@ When the user clicks the menu button, the navigation rail is expanded and the to
 Add the `popover` attribute to the navigation rail, and the `popovertarget` attribute to the menu button. The value of the `popovertarget` attribute must be the `id` of the navigation rail.
 
 ```HTML
-<div id="mynavigationrail" class="micl-navigationrail" popover="manual">
+<nav id="mynavigationrail" class="micl-navigationrail" popover="manual">
   <div class="micl-navigationrail__headline">
     <button
       type="button"
@@ -79,11 +79,11 @@ Add the `popover` attribute to the navigation rail, and the `popovertarget` attr
   <div class="micl-navigationrail__content">
     ...
   </div>
-</div>
+</nav>
 ```
 
 > [!WARNING]
-> The **popover** navigation rail component adds CSS rules to the `<body>` element to properly resize the main content area when the navigation rail is collapsed. Overriding these rules may cause the component to behave unexpectedly. The rules that are applied are:
+> The **popover** navigation rail component adds CSS rules to the element with the `.micl-window` class to properly resize the main content area when the navigation rail is collapsed. Overriding these rules may cause the component to behave unexpectedly. The rules that are applied are:
 >
 > ```CSS
 > margin-inline-start: var(--md-sys-navigationrail-collapsed-width);
@@ -91,7 +91,7 @@ Add the `popover` attribute to the navigation rail, and the `popovertarget` attr
 
 ### Modal navigation rail
 
-A **modal** navigation rail is hidden until the user clicks a menu button. When shown, the **expanded** navigation rail is displayed on top of other page content. Use a `<dialog>` element instead of a `<div>`.
+A **modal** navigation rail is hidden until the user clicks a menu button. When shown, the **expanded** navigation rail is displayed on top of other page content. Use a `<dialog>` element instead of a `<nav>`.
 
 ```HTML
 <dialog id="mynavigationrail" class="micl-navigationrail" closedby="closerequest">
@@ -132,9 +132,9 @@ You can customize the appearance of the Navigation rail component by overriding
 
 ```HTML
 <div style="--md-sys-navigationrail-collapsed-width:80px">
-  <div id="mynavigationrail" class="micl-navigationrail">
+  <nav id="mynavigationrail" class="micl-navigationrail">
     ...
-  </div>
+  </nav>
 </div>
 ```
 

package/components/navigationrail/index.scss

@@ -53,7 +53,7 @@
     block-size: 100vh;
     min-block-size: 100%;
     margin-block: 0;
-    margin-inline: 0 auto;
+    margin-inline: calc(-1 * var(--md-sys-layout-window-margin, 0px)) auto;
     padding-block: var(--md-sys-navigationrail-top-space) 0;
     padding-inline: 0;
     background-color: var(--md-sys-color-surface);
@@ -61,6 +61,7 @@
     box-shadow: var(--md-sys-elevation-level0);
     opacity: 100%;
     overflow: hidden;
+    z-index: 9;
     interpolate-size: allow-keywords;
 
     &> .micl-navigationrail__headline {
@@ -74,7 +75,7 @@
         align-items: flex-start;
         row-gap: var(--md-sys-navigationrail-item-space);
         inline-size: 100%;
-        padding-block: var(--md-sys-navigationrail-header-space) 0;
+        padding-block: var(--md-sys-navigationrail-header-space) 16px;
         padding-inline: 20px 0;
         overflow: hidden auto;
         transition: row-gap var(--md-sys-navigationrail-morph-duration-reverse) linear;
@@ -158,13 +159,13 @@
                     --statelayer-opacity var(--md-sys-navigationrail-motion-duration) linear;
             }
             &> .micl-navigationrail__text {
-                color: var(--md-sys-color-secondary);
+                color: var(--md-sys-color-on-secondary-container);
             }
         }
     }
 }
 dialog.micl-navigationrail,
-div.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggle.micl-button--selected) {
+nav.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggle.micl-button--selected) {
     max-inline-size: var(--md-sys-navigationrail-expanded-maxwidth);
     min-inline-size: var(--md-sys-navigationrail-expanded-minwidth);
 
@@ -210,7 +211,7 @@ div.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggl
         }
     }
 }
-div.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggle.micl-button--selected) {
+nav.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggle.micl-button--selected) {
     &> .micl-navigationrail__content {
         transition: row-gap var(--md-sys-navigationrail-morph-duration) linear;
 
@@ -232,7 +233,7 @@ div.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggl
         }
     }
 }
-div.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggle.micl-button--toggled.micl-button--selected) {
+nav.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggle.micl-button--toggled.micl-button--selected) {
     animation: var(--md-sys-navigationrail-morph-duration) linear forwards navigationrail-to-expanded;
 
     &> .micl-navigationrail__content > label.micl-navigationrail__item {
@@ -243,7 +244,7 @@ div.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggl
         }
     }
 }
-div.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggle.micl-button--toggled:not(.micl-button--selected)) {
+nav.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggle.micl-button--toggled:not(.micl-button--selected)) {
     animation: var(--md-sys-navigationrail-morph-duration-reverse) linear forwards navigationrail-to-collapsed;
 
     &> .micl-navigationrail__content {
@@ -265,7 +266,7 @@ div.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggl
         }
     }
 }
-div.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggle:not(.micl-button--selected)) {
+nav.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggle:not(.micl-button--selected)) {
     &> .micl-navigationrail__content > label.micl-navigationrail__item {
         &:hover {
             &> .micl-navigationrail__icon {
@@ -316,7 +317,7 @@ dialog.micl-navigationrail {
         }
     }
 }
-div.micl-navigationrail {
+nav.micl-navigationrail {
     position: sticky;
     float: inline-start;
     inset: unset;
@@ -324,8 +325,9 @@ div.micl-navigationrail {
     inset-inline-start: 0;
     border-inline-end: var(--md-sys-divider-thickness) solid var(--md-sys-divider-color);
 }
-div.micl-navigationrail[popover] {
+nav.micl-navigationrail[popover] {
     position: fixed;
+    margin-inline-start: 0;
 }
 .micl-navigationrail {
     &[open],
@@ -356,8 +358,14 @@ div.micl-navigationrail[popover] {
             display var(--md-sys-navigationrail-motion-duration) linear allow-discrete;
     }
 }
-body:has(div.micl-navigationrail[popover]) {
-    margin-inline-start: var(--md-sys-navigationrail-collapsed-width);
+.micl-window:has(nav.micl-navigationrail[popover]) {
+    padding-inline-start: var(--md-sys-navigationrail-collapsed-width);
+}
+.micl-window.micl-window--explicit-containment nav.micl-navigationrail {
+    block-size: fit-content;
+    min-block-size: fit-content;
+    padding-block: 16px;
+    border-radius: calc(var(--md-sys-navigationrail-collapsed-width) / 2);
 }
 
 @keyframes navigationrail-to-expanded {