material-inspired-component-library 7.0.2 → 8.0.0

package/components/navigationrail/index.scss

@@ -36,19 +36,18 @@
     --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};
 
-    --_current-max-width: var(--md-comp-nav-rail-collapsed-container-width, 96px);
-    --_current-min-width: var(--md-comp-nav-rail-collapsed-container-width, 96px);
-    --_item-direction: column;
-    --_item-width: var(--md-comp-nav-rail-item-short-container-height, 56px);
-
-    --_item-target-height: var(--_item-base-height);
-
-    --_content-gap: var(--md-comp-nav-rail-item-container-vertical-space, 6px);
-    --_morph-speed: var(--md-comp-nav-rail-morph-duration-reverse);
-    --_container-delay: calc(var(--_morph-speed) / 2);
-    --_item-delay: 0ms;
-    --_text-animation: none;
-    --_expanded-text-margin: calc(var(--md-comp-nav-rail-item-active-indicator-icon-label-space, 8px) - 16px);
+    --_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);
+    --_navigationrail-item-direction: column;
+    --_navigationrail-item-width: var(--md-comp-nav-rail-item-short-container-height, 56px);
+    --_navigationrail-item-target-height: var(--_navigationrail-item-base-height);
+
+    --_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-container-delay: calc(var(--_navigationrail-morph-speed) / 2);
+    --_navigationrail-item-delay: 0ms;
+    --_navigationrail-text-animation: none;
+    --_navigationrail-expanded-text-margin: calc(var(--md-comp-nav-rail-item-active-indicator-icon-label-space, 8px) - 16px);
 
     box-sizing: border-box;
     display: flex;
@@ -70,11 +69,11 @@
     interpolate-size: allow-keywords;
 
     transition:
-        min-inline-size var(--_morph-speed) var(--_container-delay) linear,
-        max-inline-size var(--_morph-speed) var(--_container-delay) linear,
-        padding-block-start var(--_morph-speed) var(--_container-delay) linear;
-    min-inline-size: var(--_current-min-width);
-    max-inline-size: var(--_current-max-width);
+        min-inline-size var(--_navigationrail-morph-speed) var(--_navigationrail-container-delay) linear,
+        max-inline-size var(--_navigationrail-morph-speed) var(--_navigationrail-container-delay) linear,
+        padding-block-start var(--_navigationrail-morph-speed) var(--_navigationrail-container-delay) linear;
+    min-inline-size: var(--_navigationrail-current-min-width);
+    max-inline-size: var(--_navigationrail-current-max-width);
 
     &> .micl-navigationrail__headline {
         padding-inline-start: 28px;
@@ -87,12 +86,12 @@
         flex: 1 1 auto;
         align-items: flex-start;
         inline-size: 100%;
-        row-gap: var(--_content-gap);
+        row-gap: var(--_navigationrail-content-gap);
         padding-block: var(--md-comp-nav-rail-item-header-space-minimum, 40px) 16px;
         padding-inline: 20px 0;
 
         overflow: hidden auto;
-        transition: row-gap var(--_morph-speed) linear;
+        transition: row-gap var(--_navigationrail-morph-speed) linear;
 
         &> a.micl-navigationrail__item:focus-visible {
             --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);
@@ -101,9 +100,9 @@
         &> a.micl-navigationrail__item {
             --micl-ripple: 1;
             --statelayer-color: var(--md-sys-color-on-secondary-container);
-            --_item-base-height: var(--md-comp-nav-rail-item-short-container-height, 56px);
-            --_item-margin-bottom: 0px;
-            --_item-padding-block: 12px;
+            --_navigationrail-item-base-height: var(--md-comp-nav-rail-item-short-container-height, 56px);
+            --_navigationrail-item-margin-bottom: 0px;
+            --_navigationrail-item-padding-block: 12px;
 
             box-sizing: border-box;
             display: flex;
@@ -117,20 +116,25 @@
             overflow: visible;
             background-color: transparent;
             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%),
+                radial-gradient(
+                    circle at var(--micl-x, center) var(--micl-y, center),
+                    transparent 0%,
+                    rgb(from var(--statelayer-color) r g b / calc(var(--statelayer-opacity) * var(--md-sys-state-ripple-opacity-factor))) 10%,
+                    transparent 10%
+                ),
                 linear-gradient(rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)));
             background-repeat: no-repeat;
-            background-size: 10000%, 100%;
+            background-size: 0%, 100%;
 
             &:has(.micl-navigationrail__text) {
-                --_item-base-height: var(--md-comp-nav-rail-item-vertical-active-indicator-height, 32px);
-                --_item-margin-bottom: 40px;
-                --_item-padding-block: 0px;
+                --_navigationrail-item-base-height: var(--md-comp-nav-rail-item-vertical-active-indicator-height, 32px);
+                --_navigationrail-item-margin-bottom: 40px;
+                --_navigationrail-item-padding-block: 0px;
             }
             &:not(:has(.micl-navigationrail__icon)) {
-                --_item-base-height: var(--md-comp-nav-rail-item-short-container-height, 56px);
-                --_item-margin-bottom: 0px;
-                --_item-padding-block: 0px;
+                --_navigationrail-item-base-height: var(--md-comp-nav-rail-item-short-container-height, 56px);
+                --_navigationrail-item-margin-bottom: 0px;
+                --_navigationrail-item-padding-block: 0px;
 
                 justify-content: center;
 
@@ -146,28 +150,28 @@
                     animation: none !important;
 
                     transition:
-                        padding-inline calc(var(--_morph-speed) / 2) var(--_item-delay) linear,
-                        margin-inline calc(var(--_morph-speed) / 2) var(--_item-delay) linear;
+                        padding-inline calc(var(--_navigationrail-morph-speed) / 2) var(--_navigationrail-item-delay) linear,
+                        margin-inline calc(var(--_navigationrail-morph-speed) / 2) var(--_navigationrail-item-delay) linear;
                 }
             }
 
-            inline-size: var(--_item-width);
-            block-size: var(--_item-target-height, var(--_item-base-height));
-            margin-block-end: var(--_item-target-margin, var(--_item-margin-bottom));
-            padding-block: var(--_item-target-padding, var(--_item-padding-block));
-            flex-direction: var(--_item-direction);
+            inline-size: var(--_navigationrail-item-width);
+            block-size: var(--_navigationrail-item-target-height, var(--_navigationrail-item-base-height));
+            margin-block-end: var(--_navigationrail-item-target-margin, var(--_navigationrail-item-margin-bottom));
+            padding-block: var(--_navigationrail-item-target-padding, var(--_navigationrail-item-padding-block));
+            flex-direction: var(--_navigationrail-item-direction);
 
-            border-radius: calc(var(--_item-target-height, var(--_item-base-height)) / 2);
+            border-radius: calc(var(--_navigationrail-item-target-height, var(--_navigationrail-item-base-height)) / 2);
 
             transition:
-                inline-size calc(var(--_morph-speed) / 2) var(--_item-delay) linear,
-                block-size calc(var(--_morph-speed) / 2) var(--_item-delay) linear,
-                margin-block-end calc(var(--_morph-speed) / 2) var(--_item-delay) linear,
-                padding-block calc(var(--_morph-speed) / 2) var(--_item-delay) linear,
-                border-radius calc(var(--_morph-speed) / 2) var(--_item-delay) linear,
-                flex-direction 0s calc(var(--_morph-speed) / 2) linear allow-discrete,
-                background-color calc(var(--_morph-speed) / 2) linear,
-                background-size 3000ms linear,
+                inline-size calc(var(--_navigationrail-morph-speed) / 2) var(--_navigationrail-item-delay) linear,
+                block-size calc(var(--_navigationrail-morph-speed) / 2) var(--_navigationrail-item-delay) linear,
+                margin-block-end calc(var(--_navigationrail-morph-speed) / 2) var(--_navigationrail-item-delay) linear,
+                padding-block calc(var(--_navigationrail-morph-speed) / 2) var(--_navigationrail-item-delay) linear,
+                border-radius calc(var(--_navigationrail-morph-speed) / 2) var(--_navigationrail-item-delay) linear,
+                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;
 
             .micl-navigationrail__icon {
@@ -185,7 +189,7 @@
                 margin: 4px 0px 0px 0px;
                 color: var(--md-sys-color-on-surface-variant);
                 overflow: hidden;
-                animation: var(--_text-animation);
+                animation: var(--_navigationrail-text-animation);
             }
 
             &:hover {
@@ -193,8 +197,10 @@
             }
             &:active {
                 --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%);
-                background-size: 0%, 100%;
-                transition-duration: 0ms, 0ms, 0ms, calc(var(--_morph-speed) / 2), 0ms, var(--md-comp-nav-rail-motion-duration);
+                transition-duration: 0ms, 0ms, 0ms, calc(var(--_navigationrail-morph-speed) / 2), 0ms, var(--md-comp-nav-rail-motion-duration);
+            }
+            &.micl-rippling {
+                animation: micl-ripple var(--md-sys-state-ripple-duration) motion.$md-sys-motion-easing-standard;
             }
         }
 
@@ -239,20 +245,20 @@
 
 dialog.micl-navigationrail,
 nav.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggle.micl-button--selected) {
-    --_current-max-width: var(--md-comp-nav-rail-expanded-container-width-maximum, 360px);
-    --_current-min-width: var(--md-comp-nav-rail-expanded-container-width-minimum, 220px);
-    --_item-direction: row;
-    --_item-width: fit-content;
+    --_navigationrail-current-max-width: var(--md-comp-nav-rail-expanded-container-width-maximum, 360px);
+    --_navigationrail-current-min-width: var(--md-comp-nav-rail-expanded-container-width-minimum, 220px);
+    --_navigationrail-item-direction: row;
+    --_navigationrail-item-width: fit-content;
 
-    --_item-target-height: var(--md-comp-nav-rail-item-short-container-height, 56px);
-    --_item-target-margin: 0px;
-    --_item-target-padding: 16px;
+    --_navigationrail-item-target-height: var(--md-comp-nav-rail-item-short-container-height, 56px);
+    --_navigationrail-item-target-margin: 0px;
+    --_navigationrail-item-target-padding: 16px;
 
-    --_content-gap: 0px;
-    --_morph-speed: var(--md-comp-nav-rail-morph-duration);
-    --_container-delay: 0ms;
-    --_item-delay: calc(var(--_morph-speed) / 2);
-    --_text-animation: var(--_morph-speed) linear forwards navigationrail-text-to-expanded;
+    --_navigationrail-content-gap: 0px;
+    --_navigationrail-morph-speed: var(--md-comp-nav-rail-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;
 
     padding-block: var(--md-comp-nav-rail-expanded-top-space, 44px) 0;
     border-radius: var(--md-comp-nav-rail-expanded-container-shape, 0px);
@@ -269,7 +275,7 @@ nav.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggl
         }
         .micl-navigationrail__text {
             @include typography.label-large;
-            margin-inline-start: var(--_expanded-text-margin);
+            margin-inline-start: var(--_navigationrail-expanded-text-margin);
             padding-inline-end: 16px;
         }
 
@@ -281,8 +287,8 @@ nav.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggl
 }
 
 nav.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggle.micl-button--toggled:not(.micl-button--selected)) {
-    --_morph-speed: var(--md-comp-nav-rail-morph-duration-reverse);
-    --_text-animation: var(--_morph-speed) linear forwards navigationrail-text-to-collapsed;
+    --_navigationrail-morph-speed: var(--md-comp-nav-rail-morph-duration-reverse);
+    --_navigationrail-text-animation: var(--_navigationrail-morph-speed) linear forwards navigationrail-text-to-collapsed;
 }
 
 nav.micl-navigationrail {
@@ -324,14 +330,14 @@ dialog.micl-navigationrail {
     0% {
         @include typography.label-large;
         margin-block-start: 0;
-        margin-inline-start: var(--_expanded-text-margin);
+        margin-inline-start: var(--_navigationrail-expanded-text-margin);
         padding-inline-end: 16px;
         opacity: 100%
     }
     49.9% {
         @include typography.label-large;
         margin-block-start: 0;
-        margin-inline-start: var(--_expanded-text-margin);
+        margin-inline-start: var(--_navigationrail-expanded-text-margin);
         padding-inline-end: 16px;
         opacity: 0%;
     }
@@ -373,14 +379,14 @@ dialog.micl-navigationrail {
     50.1% {
         @include typography.label-large;
         margin-block-start: 0px;
-        margin-inline-start: var(--_expanded-text-margin);
+        margin-inline-start: var(--_navigationrail-expanded-text-margin);
         padding-inline-end: 16px;
         opacity: 0%;
     }
     100% {
         @include typography.label-large;
         margin-block-start: 0px;
-        margin-inline-start: var(--_expanded-text-margin);
+        margin-inline-start: var(--_navigationrail-expanded-text-margin);
         padding-inline-end: 16px;
         opacity: 100%;
     }

package/components/radio/index.scss

@@ -77,13 +77,18 @@ input[type=radio].micl-radio {
         --micl-ripple: 1;
 
         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%),
+            radial-gradient(
+                circle at var(--micl-x, center) var(--micl-y, center),
+                transparent 0%,
+                rgb(from var(--statelayer-color) r g b / calc(var(--statelayer-opacity) * var(--md-sys-state-ripple-opacity-factor))) 10%,
+                transparent 10%
+            ),
             linear-gradient(rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)));
         background-repeat: no-repeat;
-        background-size: 10000%, 100%;
+        background-size: 0%, 100%;
         cursor: pointer;
         transition:
-            background-size 3000ms,
+            background-size 0ms,
             --statelayer-opacity var(--md-sys-radio-motion-duration) linear;
 
         &:hover,
@@ -111,9 +116,9 @@ input[type=radio].micl-radio {
         }
         &:active {
             --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%);
-
-            background-size: 0%, 100%;
-            transition: background-size 0ms;
+        }
+        &.micl-rippling {
+            animation: micl-ripple var(--md-sys-state-ripple-duration) motion.$md-sys-motion-easing-standard;
         }
     }
     &:disabled {

package/components/select/README.md

@@ -1,10 +1,10 @@
 # Select
-This component implements the [Material Design 3 Expressive Select](https://m3.material.io/components/menus/guidelines#ee2f3664-c926-47ab-acbf-2ab675506932) design. A select component is used to offer the user with a set of options from which the user can select a single one.
+This component implements the [Material Design 3 Expressive Select](https://m3.material.io/components/menus/guidelines#ee2f3664-c926-47ab-acbf-2ab675506932) design. A select component is used to present the user with a set of options from which one can be chosen.
 
 ## Basic Usage
 
 ### HTML
-The Select component is an extension of the [Text field](../textfield/README.md) and the [List](../list/README.md). It can be either `filled` or `outlined`. To create a basic select, use the following HTML and swap the class name to change the style.
+The Select component is an extension of the [Text field](../textfield/README.md) and the [Menu](../menu/README.md) components. It can be either `filled` or `outlined`. To create a basic select, use the following HTML and swap the class name to change the style.
 
 ```HTML
 <div class="micl-textfield-filled">
@@ -21,10 +21,11 @@ The Select component is an extension of the [Text field](../textfield/README.md)
 ```
 
 ### CSS
-The Select component relies on styles from the text field and list components. Be sure to import all three styles into your project.
+The Select component relies on styles from the text field, menu and list components. Be sure to import all four styles into your project.
 
 ```CSS
 @use "material-inspired-component-library/dist/list";
+@use "material-inspired-component-library/dist/menu";
 @use "material-inspired-component-library/dist/textfield";
 @use "material-inspired-component-library/dist/select";
 ```
@@ -61,7 +62,7 @@ You can add [Dividers](../divider/README.md) into the list of options and they w
     <option class="micl-list-item-two" value="AR">
       <span class="micl-list-item__text">Argentina</span>
     </option>
-    <hr class="micl-divider">
+    <hr class="micl-divider-inset">
     <option class="micl-list-item-two" value="BO">
       <span class="micl-list-item__text">Bolivia</span>
     </option>
@@ -97,7 +98,7 @@ The text content of an option can be preceded by various media elements:
   </option>
   ```
 
-- **Thumbnail**: Use `micl-list-item__thumbnail` for video previews with a background-image.
+- **Thumbnail**: Use `micl-list-item__thumbnail` for thumbnail imagery (e.g. video previews or photos).
   ```HTML
   <option class="micl-list-item-two" value="AR">
     <span class="micl-list-item__thumbnail" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Flag_of_Argentina.svg/330px-Flag_of_Argentina.svg.png)"></span>
@@ -105,5 +106,41 @@ The text content of an option can be preceded by various media elements:
   </option>
   ```
 
+**Example: Grouping options**
+
+Options can be grouped by using the `<optgroup>` element. Add a `<legend>` element with the `micl-menu__section` class to provide a label for the option group.
+
+```HTML
+<div class="micl-textfield-outlined">
+  <label for="myselect">Country</label>
+  <select id="myselect">
+    <option class="micl-list-item-one" value=""></option>
+    <optgroup>
+      <legend class="micl-menu__section">North American Countries</legend>
+      <option class="micl-list-item-one" value="CA">
+        <span class="micl-list-item__text">Canada</span>
+      </option>
+    </optgroup>
+    <hr class="micl-divider-inset">
+    <optgroup>
+      <legend class="micl-menu__section">South American Countries</legend>
+      <option class="micl-list-item-two" value="CL">
+        <span class="micl-list-item__text">Chile</span>
+      </option>
+    </optgroup>
+  </select>
+</div>
+```
+
+## Customizations
+You can customize the appearance of the Select 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 selects.
+
+| Variable name                  | Default Value | Description |
+| ------------------------------ | ------------- | ----------- |
+| --md-comp-select-line-height   |               | The vertical line-height applied to the closed `<select>` element |
+| --md-comp-select-picker-origin | left top      | The transform-origin used for the open/close scale animation of the option pick-list |
+
+The Select component supports the CSS variables listed for the [Menu](../menu/README.md) component.
+
 ## Compatibility
 This component uses modern browser features to style the `<select>` element, which may not be fully supported in all browsers. Browsers that do not support these features will display a default select menu. Please check [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/::picker#browser_compatibility) for details.

package/components/select/index.scss

@@ -27,27 +27,24 @@
 @use '../../styles/typography';
 
 .micl-textfield-filled > select {
-    --md-sys-select-line-height: calc(var(--md-sys-textfield-height) - 18px - 3px);
+    --md-comp-select-line-height: calc(var(--md-sys-textfield-height) - 18px - 3px);
 }
 .micl-textfield-outlined > select {
-    --md-sys-select-line-height: var(--md-sys-textfield-height);
+    --md-comp-select-line-height: var(--md-sys-textfield-height);
 }
 .micl-textfield-filled > select,
 .micl-textfield-outlined > select {
     --md-sys-divider-space: 8px;
-    --md-sys-list-motion-duration: #{motion.$md-sys-motion-expressive-default-effects-duration};
-    --md-sys-select-motion-spatial: #{motion.$md-sys-motion-expressive-default-spatial};
-    --md-sys-select-motion-duration: #{motion.$md-sys-motion-expressive-default-spatial-duration};
-    --md-sys-select-motion-duration-reverse: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
-    --md-sys-select-picker-origin: left top;
+    --md-comp-list-motion-duration: #{motion.$md-sys-motion-expressive-default-effects-duration};
+    --md-comp-select-picker-origin: left top;
 
     appearance: base-select;
-    line-height: var(--md-sys-select-line-height);
+    line-height: var(--md-comp-select-line-height);
 
     &::picker-icon {
       color: var(--md-sys-color-on-surface-variant);
       transition: motion.$md-sys-motion-duration-medium4 rotate;
-      transform-origin: 50% calc((var(--md-sys-select-line-height) / 2) - 1px);
+      transform-origin: 50% calc((var(--md-comp-select-line-height) / 2) - 1px);
     }
     &:disabled::picker-icon {
         color: rgb(from var(--md-sys-color-on-surface-variant) r g b/var(--md-sys-state-disabled-state-layer-opacity, 38%));
@@ -55,35 +52,48 @@
     &:open::picker-icon {
       rotate: 180deg;
     }
+
     &::picker(select) {
+        --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};
+        --md-sys-divider-space: 0.5px;
+        --_list-shape: var(--md-comp-list-container-shape, var(--md-sys-shape-corner-large, 16px));
+        --_list-item-background-color: var(--md-comp-list-item-container-color, transparent);
+        --_list-item-background-opacity: 0%;
+
         appearance: base-select;
-        min-inline-size: max(anchor-size(self-inline), 112px);
-        max-inline-size: 280px;
-        position-try: most-block-size flip-block;
-        padding: var(--md-sys-list-padding, 8px) 0;
+        display: flex;
+        flex-direction: column;
+        position-try-order: most-block-size;
+        position-try-fallbacks: flip-block, flip-inline;
+        min-inline-size: max(anchor-size(self-inline), var(--md-comp-menu-width-min, 112px));
+        max-inline-size: var(--md-comp-menu-width-max, 320px);
+        gap: var(--md-comp-menu-gap, 2px);
+        padding: 4px;
+        border-radius: var(--_list-shape);
         border: none;
-        border-radius: var(--md-sys-shape-corner-extra-small, 4px);
-        background-color: var(--md-sys-color-surface-container);
-        box-shadow: var(--md-sys-elevation-level2);
+        outline: none;
+        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));
         opacity: 0;
         overflow-x: hidden;
         overflow-y: auto;
         transform: scaleY(0);
-        transform-origin: var(--md-sys-select-picker-origin);
+        transform-origin: var(--md-comp-select-picker-origin, left top);
         transition:
-            opacity var(--md-sys-select-motion-duration-reverse) linear,
-            transform var(--md-sys-select-motion-duration-reverse) var(--md-sys-select-motion-spatial),
-            overlay var(--md-sys-select-motion-duration-reverse) linear allow-discrete,
-            display var(--md-sys-select-motion-duration-reverse) linear allow-discrete;
+            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;
 
         &:popover-open {
             opacity: 1;
             transform: scaleY(1);
             transition:
-                opacity var(--md-sys-select-motion-duration) motion.$md-sys-motion-easing-emphasized-decelerate,
-                transform var(--md-sys-select-motion-duration) var(--md-sys-select-motion-spatial),
-                overlay var(--md-sys-select-motion-duration) linear allow-discrete,
-                display var(--md-sys-select-motion-duration) linear allow-discrete;
+                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;
@@ -93,50 +103,10 @@
     }
 
     option {
-        --md-sys-list-item-one-height: 48px;
-        --md-sys-list-item-two-height: 64px;
-        --md-sys-list-item-one-padding: 0;
-        --md-sys-list-item-two-padding: 0;
-        --md-sys-list-item-space: 12px;
-        --md-sys-list-item-container-color: var(--md-sys-color-surface-container);
-
         line-height: normal;
-        background-color: transparent;
-
-        &:not(:disabled) {
-            cursor: pointer;
-        }
-        &:checked {
-            background-color: var(--md-sys-color-secondary-container);
-
-            .micl-list-item__text {
-                color: var(--md-sys-color-on-secondary-container);
-
-                &::after {
-                    color: var(--md-sys-color-on-surface);
-                }
-            }
-        }
-        &:focus-visible {
-            outline-offset: calc(-1 * var(--md-sys-state-focus-indicator-thickness, 3px));
-            z-index: 1;
-        }
 
-        .micl-list-item__text {
-            @include typography.body-large;
-
-            color: var(--md-sys-color-on-surface);
-            white-space: normal;
-        }
         .micl-list-item__text::after {
-            @include typography.body-medium;
-
             content: attr(aria-description);
-            display: block;
-            color: var(--md-sys-color-on-surface-variant);
-            overflow-x: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
         }
         &::checkmark {
             color: var(--md-sys-color-on-surface-variant);
@@ -144,20 +114,10 @@
     }
 }
 
-/* dialog.micl-dialog:has(.micl-textfield-filled > select), */
-/* dialog.micl-dialog:has(.micl-textfield-outlined > select), */
-/* dialog.micl-dialog-fullscreen:has(.micl-textfield-filled > select), */
-/* dialog.micl-dialog-fullscreen:has(.micl-textfield-outlined > select) { */
-    /* inset-block-start: 0; */
-    /* inset-inline-start: 0; */
-    /* margin: auto; */
-    /* transform: scale(50%); */
-
-    /* &:popover-open, */
-    /* &[open] { */
-        /* transform: scale(100%); */
-    /* } */
-/* } */
+[inert] .micl-textfield-filled > select::picker-icon,
+[inert] .micl-textfield-outlined > select::picker-icon {
+    display: none;
+}
 
 [dir=rtl] {
     .micl-textfield-filled > select,

package/components/stepper/index.scss

@@ -41,7 +41,6 @@ body {
     flex-direction: column;
     row-gap: var(--md-sys-padding-xl, 24px);
     margin: 0;
-    background-color: inherit;
 
     .micl-stepper__header {
         --md-sys-stepper-dot-size: 24px;
@@ -50,7 +49,6 @@ body {
         justify-content: space-between;
         align-items: flex-start;
         margin-inline: -10px;
-        background-color: inherit;
         background-image: linear-gradient(90deg, var(--md-sys-divider-color), var(--md-sys-divider-color));
         background-position: center;
         background-repeat: no-repeat;
@@ -58,7 +56,7 @@ body {
         counter-reset: dotnumber;
 
         button {
-            background-color: inherit;
+            background-color: var(--_card-background-color, inherit);
             pointer-events: none;
 
             &.micl-stepper__progress--done {
@@ -76,7 +74,6 @@ body {
         display: grid;
         grid-template-areas: "stepper-steps";
         overflow-x: hidden;
-        background-color: inherit;
 
         .micl-stepper__step {
             grid-area: stepper-steps;
@@ -87,7 +84,6 @@ body {
             padding: 0;
             border: none;
             opacity: 0%;
-            background-color: inherit;
             transform: translateX(100%);
             transition:
                 opacity var(--md-sys-stepper-motion-duration) linear,

package/components/textfield/index.scss

@@ -53,7 +53,7 @@
         margin-block-start: calc((var(--md-sys-textfield-height) - var(--md-sys-typescale-body-large-line-height)) / 2);
         margin-inline: 12px 4px;
         border-radius: 4px;
-        background-color: inherit;
+        background-color: var(--_dialog-background-color, var(--_card-background-color, inherit));
         color: var(--md-sys-color-on-surface-variant);
         z-index: 1;
         transition:

package/components/textfield/index.ts

@@ -72,7 +72,7 @@ export default (() =>
             const segment = value.substring(valueIndex, valueIndex + comp.length);
             formattedValue += segment;
             valueIndex += segment.length;
-            
+
             if (segment.length === comp.length && comp.separator) {
                 formattedValue += comp.separator;
             }
@@ -140,7 +140,7 @@ export default (() =>
                     const spaceBelow = window.innerHeight - rect.bottom;
 
                     !input.matches(':open') && input.style.setProperty(
-                        '--md-sys-select-picker-origin',
+                        '--md-comp-select-picker-origin',
                         spaceAbove > spaceBelow ? 'left bottom' : 'left top'
                     );
                 });