material-inspired-component-library 8.1.0 → 9.0.0

package/components/slider/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/motion';
 @use '../../styles/shape';
 @use '../../styles/statelayer';
@@ -33,32 +32,28 @@
 @include statelayer.token('disabled-state-layer-opacity');
 @include statelayer.token('focus-indicator-thickness');
 
-@include typography.scale('label-medium');
+@include typography.scale('label-large');
 
 @include motion.duration('medium2');
 @include motion.duration('long2');
 
 @mixin slider-track() {
-    block-size: var(--md-sys-slider-track-height);
-    border-radius: var(--md-sys-slider-track-radius);
+    block-size: var(--_track-height);
+    border-radius: var(--_track-shape);
     background-color: inherit;
     background-image: linear-gradient(
-        var(--md-sys-slider-track-direction),
-        var(--md-sys-color-primary) calc(100% * (var(--md-sys-slider-value) - var(--md-sys-slider-min)) / (var(--md-sys-slider-max) - var(--md-sys-slider-min))),
-        transparent calc(100% * (var(--md-sys-slider-value) - var(--md-sys-slider-min)) / (var(--md-sys-slider-max) - var(--md-sys-slider-min))),
-        var(--md-sys-color-secondary-container) calc(100% * (var(--md-sys-slider-value) - var(--md-sys-slider-min)) / (var(--md-sys-slider-max) - var(--md-sys-slider-min))),
-        var(--md-sys-color-secondary-container) 100%,
-        transparent
+        var(--_direction),
+        var(--_active-track-color) var(--_thumb-position),
+        transparent var(--_thumb-position) calc(var(--_thumb-position) + 16px),
+        var(--_inactive-track-color) calc(var(--_thumb-position) + 16px)
     );
 }
 @mixin slider-track-disabled() {
     background-image: linear-gradient(
-        var(--md-sys-slider-track-direction),
-        color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-state-layer-opacity, 38%), transparent) calc(100% * (var(--md-sys-slider-value) - var(--md-sys-slider-min)) / (var(--md-sys-slider-max) - var(--md-sys-slider-min))),
-        transparent calc(100% * (var(--md-sys-slider-value) - var(--md-sys-slider-min)) / (var(--md-sys-slider-max) - var(--md-sys-slider-min))),
-        color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) calc(100% * (var(--md-sys-slider-value) - var(--md-sys-slider-min)) / (var(--md-sys-slider-max) - var(--md-sys-slider-min))),
-        color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) 100%,
-        transparent
+        var(--_direction),
+        color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-state-layer-opacity), transparent) var(--_thumb-position),
+        transparent var(--_thumb-position) calc(var(--_thumb-position) + 16px),
+        color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) calc(var(--_thumb-position) + 16px)
     );
 }
 @mixin slider-thumb() {
@@ -66,19 +61,18 @@
     box-sizing: content-box;
     position: relative;
     inline-size: 16px;
-    block-size: var(--md-sys-slider-handle-height);
+    block-size: var(--_handle-height);
     inset: 0;
-    inset-block-start: calc(-1 * (var(--md-sys-slider-handle-height) - var(--md-sys-slider-track-height) + 8px) / 2);
+    inset-block-start: calc(-1 * (var(--_handle-height) - var(--_track-height) + 8px) / 2);
     padding-block: 4px;
     border: none;
     border-radius: 8px;
-    background-color: inherit;
     background-image: linear-gradient(
-        var(--md-sys-slider-track-direction),
+        var(--_direction),
         transparent 0px,
-        transparent var(--md-sys-slider-thumb-space),
-        var(--md-sys-color-primary) var(--md-sys-slider-thumb-space),
-        var(--md-sys-color-primary) 10px,
+        transparent var(--_thumb-space),
+        var(--_handle-color) var(--_thumb-space),
+        var(--_handle-color) 10px,
         transparent 10px,
         transparent 16px
     );
@@ -87,59 +81,96 @@
     z-index: 2;
 }
 @mixin slider-thumb-disabled() {
-    background-color: inherit;
     background-image: linear-gradient(
-        var(--md-sys-slider-track-direction),
+        var(--_direction),
         transparent 0px,
-        transparent var(--md-sys-slider-thumb-space),
-        color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-state-layer-opacity, 38%), var(--md-sys-color-surface)) var(--md-sys-slider-thumb-space),
-        color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-state-layer-opacity, 38%), var(--md-sys-color-surface)) 10px,
+        transparent var(--_thumb-space),
+        color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-state-layer-opacity), var(--md-sys-color-surface)) var(--_thumb-space),
+        color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-state-layer-opacity), var(--md-sys-color-surface)) 10px,
         transparent 10px,
         transparent 16px
     );
     cursor: default;
 }
+// The 4px wide handle narrows to 2px while pressed.
+@mixin slider-thumb-active() {
+    background-image: linear-gradient(
+        var(--_direction),
+        transparent 0px,
+        transparent calc(var(--_thumb-space) + 1px),
+        var(--_handle-color) calc(var(--_thumb-space) + 1px),
+        var(--_handle-color) calc(var(--_thumb-space) + 3px),
+        transparent calc(var(--_thumb-space) + 3px),
+        transparent calc(2 * var(--_thumb-space) + 4px)
+    );
+    outline: none;
+    cursor: grabbing;
+}
+@mixin slider-tip() {
+    @include typography.label-large;
+    --_tip-space: 4px;
+
+    content: var(--micl-slider-tip);
+    box-sizing: border-box;
+    position: absolute;
+    inline-size: fit-content;
+    min-inline-size: 48px;
+    block-size: 40px;
+    inset: 0;
+    inset-block-start: calc(-1 * ((var(--_handle-height) - var(--_track-height)) / 2) - 40px - var(--_tip-space));
+    inset-inline-start: calc(-16px + (100% - 16px) * var(--_fraction));
+    padding-block: 12px;
+    padding-inline: 16px;
+    border-radius: 20px;
+    background-color: var(--md-comp-slider-value-indicator-container-color, var(--md-sys-color-inverse-surface));
+    color: var(--md-comp-slider-value-indicator-label-text-color, var(--md-sys-color-inverse-on-surface));
+    text-align: center;
+    opacity: 0;
+    z-index: 3;
+    transition: opacity var(--md-sys-motion-duration-long2) motion.$md-sys-motion-easing-emphasized-decelerate;
+}
 @mixin slider-progress() {
-    block-size: var(--md-sys-slider-track-height);
+    block-size: var(--_track-height);
 }
 
 input[type=range].micl-slider-xs {
-    --md-sys-slider-handle-height: 44px;
-    --md-sys-slider-track-height: 16px;
-    --md-sys-slider-track-radius: var(--md-sys-shape-corner-small);
+    --_handle-height: var(--md-comp-slider-handle-height, 44px);
+    --_track-height: var(--md-comp-slider-track-height, 16px);
+    --_track-shape: var(--md-comp-slider-track-shape, var(--md-sys-shape-corner-small));
 }
 input[type=range].micl-slider-s {
-    --md-sys-slider-handle-height: 44px;
-    --md-sys-slider-track-height: 24px;
-    --md-sys-slider-track-radius: var(--md-sys-shape-corner-small);
+    --_handle-height: var(--md-comp-slider-handle-height, 44px);
+    --_track-height: var(--md-comp-slider-track-height, 24px);
+    --_track-shape: var(--md-comp-slider-track-shape, var(--md-sys-shape-corner-small));
 }
 input[type=range].micl-slider-m {
-    --md-sys-slider-handle-height: 52px;
-    --md-sys-slider-track-height: 40px;
-    --md-sys-slider-track-radius: var(--md-sys-shape-corner-medium);
+    --_handle-height: var(--md-comp-slider-handle-height, 52px);
+    --_track-height: var(--md-comp-slider-track-height, 40px);
+    --_track-shape: var(--md-comp-slider-track-shape, var(--md-sys-shape-corner-medium));
 }
 input[type=range].micl-slider-l {
-    --md-sys-slider-handle-height: 68px;
-    --md-sys-slider-track-height: 56px;
-    --md-sys-slider-track-radius: var(--md-sys-shape-corner-large);
+    --_handle-height: var(--md-comp-slider-handle-height, 68px);
+    --_track-height: var(--md-comp-slider-track-height, 56px);
+    --_track-shape: var(--md-comp-slider-track-shape, var(--md-sys-shape-corner-large));
 }
 input[type=range].micl-slider-xl {
-    --md-sys-slider-handle-height: 108px;
-    --md-sys-slider-track-height: 96px;
-    --md-sys-slider-track-radius: var(--md-sys-shape-corner-extra-large);
+    --_handle-height: var(--md-comp-slider-handle-height, 108px);
+    --_track-height: var(--md-comp-slider-track-height, 96px);
+    --_track-shape: var(--md-comp-slider-track-shape, var(--md-sys-shape-corner-extra-large));
 }
 
-input[type=range].micl-slider-xs,
-input[type=range].micl-slider-s,
-input[type=range].micl-slider-m,
-input[type=range].micl-slider-l,
-input[type=range].micl-slider-xl {
-    --md-sys-slider-thumb-space: 6px;
-    --md-sys-slider-track-direction: to right;
+input[type=range][class*=micl-slider-] {
+    --_thumb-space: 6px;
+    --_direction: to right;
+    --_fraction: calc((var(--micl-slider-value) - var(--micl-slider-min)) / (var(--micl-slider-max) - var(--micl-slider-min)));
+    --_thumb-position: calc(var(--_fraction) * (100% - 16px));
+    --_active-track-color: var(--md-comp-slider-active-track-color, var(--md-sys-color-primary));
+    --_inactive-track-color: var(--md-comp-slider-inactive-track-color, var(--md-sys-color-secondary-container));
+    --_handle-color: var(--md-comp-slider-handle-color, var(--md-sys-color-primary));
 
     appearance: none;
     position: relative;
-    block-size: var(--md-sys-slider-track-height);
+    block-size: var(--_track-height);
     margin: 0;
     outline: none;
     color: var(--md-sys-color-surface-container-low);
@@ -152,37 +183,17 @@ input[type=range].micl-slider-xl {
         position: absolute;
         inline-size: 100%;
         max-inline-size: 100%;
-        block-size: var(--md-sys-slider-track-height);
-        line-height: var(--md-sys-slider-track-height);
+        block-size: var(--_track-height);
+        line-height: var(--_track-height);
         padding: 0 4px;
         inset: 0;
-        color: var(--md-sys-color-on-primary);
+        color: var(--md-comp-slider-stop-indicator-color, var(--md-sys-color-on-primary));
         mix-blend-mode: difference;
         text-align: end;
         text-wrap-mode: nowrap;
     }
     &::after {
-        @include typography.label-medium;
-        --md-sys-slider-tip-space: 4px;
-
-        content: var(--md-sys-slider-tip);
-        box-sizing: border-box;
-        position: absolute;
-        inline-size: fit-content;
-        min-inline-size: 48px;
-        block-size: 40px;
-        inset: 0;
-        inset-block-start: calc(-1 * ((var(--md-sys-slider-handle-height) - var(--md-sys-slider-track-height)) / 2) - 40px - var(--md-sys-slider-tip-space));
-        inset-inline-start: calc(-16px + (100% - 16px) * (var(--md-sys-slider-value) - var(--md-sys-slider-min)) / (var(--md-sys-slider-max) - var(--md-sys-slider-min)));
-        padding-block: 12px;
-        padding-inline: 16px;
-        border-radius: 20px;
-        background-color: var(--md-sys-color-inverse-surface);
-        color: var(--md-sys-color-inverse-on-surface);
-        text-align: center;
-        opacity: 0;
-        z-index: 3;
-        transition: opacity var(--md-sys-motion-duration-long2) motion.$md-sys-motion-easing-emphasized-decelerate;
+        @include slider-tip;
     }
     &::-webkit-slider-container {
         background-color: inherit;
@@ -217,12 +228,12 @@ input[type=range].micl-slider-xl {
         }
     }
     &.micl-slider--vertical {
-        --md-sys-slider-track-direction: to top;
+        --_direction: to top;
 
         writing-mode: sideways-lr;
 
         &::after {
-            --md-sys-slider-tip-space: 8px;
+            --_tip-space: 8px;
 
             transform: rotate(90deg);
         }
@@ -236,38 +247,18 @@ input[type=range].micl-slider-xl {
         }
         &:focus-visible {
             &::-webkit-slider-thumb {
-                outline: var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary);
+                outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
             }
             &::-moz-range-thumb {
-                outline: var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary);
+                outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
             }
         }
         &:active {
             &::-webkit-slider-thumb {
-                background-image: linear-gradient(
-                    var(--md-sys-slider-track-direction),
-                    transparent 0px,
-                    transparent calc(var(--md-sys-slider-thumb-space) + 1px),
-                    var(--md-sys-color-primary) calc(var(--md-sys-slider-thumb-space) + 1px),
-                    var(--md-sys-color-primary) calc(var(--md-sys-slider-thumb-space) + 3px),
-                    transparent calc(var(--md-sys-slider-thumb-space) + 3px),
-                    transparent calc(2 * var(--md-sys-slider-thumb-space) + 4px)
-                );
-                outline: none;
-                cursor: grabbing;
+                @include slider-thumb-active;
             }
             &::-moz-range-thumb {
-                background-image: linear-gradient(
-                    var(--md-sys-slider-track-direction),
-                    transparent 0px,
-                    transparent calc(var(--md-sys-slider-thumb-space) + 1px),
-                    var(--md-sys-color-primary) calc(var(--md-sys-slider-thumb-space) + 1px),
-                    var(--md-sys-color-primary) calc(var(--md-sys-slider-thumb-space) + 3px),
-                    transparent calc(var(--md-sys-slider-thumb-space) + 3px),
-                    transparent calc(2 * var(--md-sys-slider-thumb-space) + 4px)
-                );
-                outline: none;
-                cursor: grabbing;
+                @include slider-thumb-active;
             }
         }
     }
@@ -301,33 +292,17 @@ input[type=range].micl-slider-xl {
     }
 }
 
+// Gecko does not render generated content on <input>: the value indicator is
+// repeated on the container, which mirrors the slider variables (see index.ts).
 @supports (-moz-appearance:none) {
     .micl-slider__container {
         &:has(> input[type=range]) {
+            --_fraction: calc((var(--micl-slider-value) - var(--micl-slider-min)) / (var(--micl-slider-max) - var(--micl-slider-min)));
+
             position: relative;
 
             &::after {
-                @include typography.label-medium;
-                --md-sys-slider-tip-space: 4px;
-
-                content: var(--md-sys-slider-tip);
-                box-sizing: border-box;
-                position: absolute;
-                inline-size: fit-content;
-                min-inline-size: 48px;
-                block-size: 40px;
-                inset: 0;
-                inset-block-start: calc(-1 * ((var(--md-sys-slider-handle-height) - var(--md-sys-slider-track-height)) / 2) - 40px - var(--md-sys-slider-tip-space));
-                inset-inline-start: calc(-16px + (100% - 16px) * (var(--md-sys-slider-value) - var(--md-sys-slider-min)) / (var(--md-sys-slider-max) - var(--md-sys-slider-min)));
-                padding-block: 12px;
-                padding-inline: 16px;
-                border-radius: 20px;
-                background-color: var(--md-sys-color-inverse-surface);
-                color: var(--md-sys-color-inverse-on-surface);
-                text-align: center;
-                opacity: 0;
-                z-index: 3;
-                transition: opacity var(--md-sys-motion-duration-long2) motion.$md-sys-motion-easing-emphasized-decelerate;
+                @include slider-tip;
             }
         }
         &:has(> input[type=range]:not(:disabled):active)::after,
@@ -336,31 +311,25 @@ input[type=range].micl-slider-xl {
             opacity: 1;
         }
         &:has(> input[type=range].micl-slider--vertical) {
-            --md-sys-slider-track-direction: to top;
+            --_direction: to top;
             writing-mode: sideways-lr;
 
             &::after {
-                --md-sys-slider-tip-space: 8px;
+                --_tip-space: 8px;
                 transform: rotate(90deg);
             }
         }
     }
 }
 
-[dir=rtl] {
-    input[type=range].micl-slider--vertical,
-    .micl-slider__container:has(> input[type=range].micl-slider--vertical) {
-        writing-mode: sideways-rl;
+input[type=range].micl-slider--vertical:dir(rtl),
+.micl-slider__container:dir(rtl):has(> input[type=range].micl-slider--vertical) {
+    writing-mode: sideways-rl;
 
-        &::after {
-            transform: rotate(-90deg);
-        }
-    }
-    input[type=range].micl-slider-xs:not(.micl-slider--vertical),
-    input[type=range].micl-slider-s:not(.micl-slider--vertical),
-    input[type=range].micl-slider-m:not(.micl-slider--vertical),
-    input[type=range].micl-slider-l:not(.micl-slider--vertical),
-    input[type=range].micl-slider-xl:not(.micl-slider--vertical) {
-        --md-sys-slider-track-direction: to left;
+    &::after {
+        transform: rotate(-90deg);
     }
 }
+input[type=range][class*=micl-slider-]:dir(rtl):not(.micl-slider--vertical) {
+    --_direction: to left;
+}

package/components/snackbar/README.md

@@ -18,6 +18,8 @@ The `data-micldelay` attribute contains the number of milliseconds the snackbar
 Import the snackbar styles into your project:
 
 ```CSS
+@use "material-inspired-component-library/dist/button";
+@use "material-inspired-component-library/dist/iconbutton";
 @use "material-inspired-component-library/dist/snackbar";
 ```
 
@@ -68,41 +70,36 @@ Add the `micl-snackbar--two` class to the snackbar to increase its height so tha
 </div>
 ```
 
-The Snackbar 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.
-
-## Customizations
-You can customize the appearance of the Snackbar 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 snackbars.
-
-| Variable name | Default Value | Description |
-| ------------- | ------------- | ----------- |
-| --md-comp-snackbar-margin | 24px | The distance between the snackbar and the bottom of the device |
-| --md-comp-snackbar-padding | 16px | The inner padding of the snackbar |
-
-The Snackbar component supports the following CSS variables, as defined in the [Material Design 3 Expressive Snackbar Specification](https://m3.material.io/components/snackbar/specs):
-
-```CSS
---md-comp-snackbar-container-color
---md-comp-snackbar-container-elevation
---md-comp-snackbar-container-shape
---md-comp-snackbar-with-single-line-container-height
---md-comp-snackbar-with-two-lines-container-height
---md-comp-snackbar-action-label-text-color
---md-comp-snackbar-icon-size
---md-comp-snackbar-icon-color
---md-comp-snackbar-supporting-text-color
---md-comp-snackbar-action-hover-label-text-color
---md-comp-snackbar-action-focus-label-text-color
---md-comp-snackbar-action-pressed-label-text-color
---md-comp-snackbar-icon-hover-icon-color
---md-comp-snackbar-icon-focus-icon-color
---md-comp-snackbar-icon-pressed-icon-color
---md-comp-snackbar-action-hover-state-layer-color
---md-comp-snackbar-action-hover-state-layer-opacity
---md-comp-snackbar-action-focus-state-layer-color
---md-comp-snackbar-action-focus-state-layer-opacity
---md-comp-snackbar-action-pressed-state-layer-color
---md-comp-snackbar-action-pressed-state-layer-opacity
-```
+The Snackbar component respects the element's computed direction, automatically adjusting its layout for right-to-left (RTL) languages — whether the `dir` attribute (including `dir="auto"`) is set on the element itself or inherited from an ancestor.
+
+## Theming
+Each snackbar can be themed with CSS custom properties that follow the Material Design 3 component-token naming convention.
+
+| Custom property | Meaning | Default |
+|---|---|---|
+| `--md-comp-snackbar-margin` | The distance between the snackbar and the bottom of the device | `24px` |
+| `--md-comp-snackbar-padding` | The inner padding of the snackbar | `16px` |
+| `--md-comp-snackbar-container-color` | The background color of the snackbar | `--md-sys-color-inverse-surface` |
+| `--md-comp-snackbar-container-elevation` | The shadow (elevation) of the snackbar | `--md-sys-elevation-level3` |
+| `--md-comp-snackbar-container-shape` | The corner rounding of the snackbar | `--md-sys-shape-corner-extra-small` |
+| `--md-comp-snackbar-with-single-line-container-height` | The height of a single-line snackbar | `48px` |
+| `--md-comp-snackbar-with-two-lines-container-height` | The height of a two-line snackbar | `68px` |
+| `--md-comp-snackbar-supporting-text-color` | The text color of the notification | `--md-sys-color-inverse-on-surface` |
+| `--md-comp-snackbar-action-label-text-color` | The label color of the action button | `--md-sys-color-inverse-primary` |
+| `--md-comp-snackbar-action-hover-label-text-color` | The label color of the hovered action button | `--md-sys-color-inverse-primary` |
+| `--md-comp-snackbar-action-focus-label-text-color` | The label color of the focused action button | `--md-sys-color-inverse-primary` |
+| `--md-comp-snackbar-action-pressed-label-text-color` | The label color of the pressed action button | `--md-sys-color-inverse-primary` |
+| `--md-comp-snackbar-icon-size` | The size of the close icon | `24px` |
+| `--md-comp-snackbar-icon-color` | The color of the close icon | `--md-sys-color-inverse-on-surface` |
+| `--md-comp-snackbar-icon-hover-icon-color` | The color of the hovered close icon | `--md-sys-color-inverse-on-surface` |
+| `--md-comp-snackbar-icon-focus-icon-color` | The color of the focused close icon | `--md-sys-color-inverse-on-surface` |
+| `--md-comp-snackbar-icon-pressed-icon-color` | The color of the pressed close icon | `--md-sys-color-inverse-on-surface` |
+| `--md-comp-snackbar-action-hover-state-layer-color` | The state layer tinting the snackbar while hovered (the auto-dismiss timer pauses) | `--md-sys-color-inverse-primary` |
+| `--md-comp-snackbar-action-hover-state-layer-opacity` | The opacity of the hover state layer | `8%` |
+| `--md-comp-snackbar-action-focus-state-layer-color` | The state layer tinting the snackbar while focused | `--md-sys-color-inverse-primary` |
+| `--md-comp-snackbar-action-focus-state-layer-opacity` | The opacity of the focus state layer | `10%` |
+| `--md-comp-snackbar-action-pressed-state-layer-color` | The state layer tinting the snackbar while pressed | `--md-sys-color-inverse-primary` |
+| `--md-comp-snackbar-action-pressed-state-layer-opacity` | The opacity of the pressed state layer | `10%` |
 
 **Example: Changing the padding of the snackbar**
 

package/components/snackbar/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 '../../foundations/layout';
 @use '../../styles/elevation';
 @use '../../styles/motion';
@@ -38,22 +37,13 @@
 
 @include typography.scale('body-medium');
 
-:root {
-    --md-comp-snackbar-margin: 24px;
-    --md-comp-snackbar-padding: 16px;
-    --md-comp-snackbar-dir-factor: 1;
-}
-
-[dir=rtl] {
-    --md-comp-snackbar-dir-factor: -1;
-}
-
 .micl-snackbar {
     --md-comp-snackbar-motion-spatial: #{motion.$md-sys-motion-expressive-default-spatial};
     --md-comp-snackbar-motion-duration: #{motion.$md-sys-motion-expressive-default-spatial-duration};
     --md-comp-snackbar-motion-duration-reverse: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
+    --micl-duration: var(--md-comp-snackbar-motion-duration-reverse);
     --statelayer-color: var(--md-sys-color-inverse-primary);
-    --statelayer-opacity: 0;
+    --statelayer-opacity: 0%;
 
     box-sizing: border-box;
     position: fixed;
@@ -64,13 +54,14 @@
 
     block-size: 0;
     inline-size: max-content;
-    max-inline-size: min(layout.$md-sys-window-expanded-max, calc(100vw - (2 * var(--md-sys-layout-window-margin))));
+    max-inline-size: min(layout.$md-sys-breakpoint-expanded-max, calc(100vw - (2 * var(--md-sys-layout-window-margin))));
     min-inline-size: 300px;
 
     inset: auto;
     inset-block-end: calc(var(--md-comp-snackbar-margin, 24px) + env(safe-area-inset-bottom));
-    inset-inline-start: 50%;
-    margin: 0;
+    inset-inline: 0;
+    margin-block: 0;
+    margin-inline: auto;
     padding-block: 0;
     padding-inline: var(--md-comp-snackbar-padding, 16px);
 
@@ -86,10 +77,9 @@
 
     opacity: 0;
     overflow-y: hidden;
-    translate: calc(var(--md-comp-snackbar-dir-factor, 1) * -50%);
 
     transition:
-        block-size var(--md-comp-snackbar-motion-duration-reverse) var(--md-comp-snackbar-motion-spatial),
+        block-size var(--micl-duration) var(--md-comp-snackbar-motion-spatial),
         opacity var(--md-comp-snackbar-motion-duration-reverse) linear,
         display var(--md-comp-snackbar-motion-duration-reverse) linear allow-discrete,
         overlay var(--md-comp-snackbar-motion-duration-reverse) linear allow-discrete,
@@ -109,12 +99,10 @@
     }
 
     &:popover-open {
+        --micl-duration: var(--md-comp-snackbar-motion-duration);
+
         block-size: var(--md-comp-snackbar-with-single-line-container-height, 48px);
         opacity: 1;
-        transition:
-            block-size var(--md-comp-snackbar-motion-duration) var(--md-comp-snackbar-motion-spatial),
-            opacity var(--md-comp-snackbar-motion-duration-reverse) linear,
-            --statelayer-opacity var(--md-comp-snackbar-motion-duration) linear;
 
         @starting-style {
             block-size: 0;
@@ -167,7 +155,7 @@
     }
 }
 
-@media (max-width: layout.$md-sys-window-compact-max) {
+@media (max-width: layout.$md-sys-breakpoint-compact-max) {
     .micl-snackbar {
         inline-size: calc(100vw - (2 * var(--md-sys-layout-window-margin)));
         min-inline-size: auto;

package/components/stepper/README.md

@@ -32,6 +32,7 @@ To create a basic stepper, use a `<div>` container with the `micl-stepper` class
 Import the stepper styles into your project:
 
 ```CSS
+@use "material-inspired-component-library/dist/button";
 @use "material-inspired-component-library/dist/stepper";
 ```
 
@@ -173,18 +174,24 @@ In this example for a three-step stepper, the **Next** button is hidden on step
 </div>
 ```
 
-## Customizations
-You can customize the appearance of the Stepper 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 steppers.
+## Theming
+Each stepper can be themed with CSS custom properties. Set them on any appropriate parent element to affect its child steppers.
 
-| Variable name | Default Value | Description |
-| ------------- | ----- | ----------- |
-| --md-sys-stepper-counter-style | decimal | The list-style used for the counter number inside the dots in the stepper header |
-| --md-sys-stepper-dot-size | 12px | Controls the size of each progress dot |
+| Custom property | Meaning | Default |
+|---|---|---|
+| `--md-comp-stepper-counter-style` | The list-style used for the counter number inside the dots of the stepper header | `decimal` |
+| `--md-comp-stepper-dot-size` | The size of each progress dot | `12px` |
+| `--md-comp-stepper-header-dot-size` | The size of the dots in the stepper header | `24px` |
+| `--md-comp-stepper-dot-color` | The color of a pending progress dot | `--md-sys-color-on-surface` |
+| `--md-comp-stepper-dot-label-color` | The counter color of a pending progress dot | `--md-sys-color-surface` |
+| `--md-comp-stepper-dot-done-color` | The color of a completed progress dot | `--md-sys-color-tertiary-container` |
+| `--md-comp-stepper-dot-done-label-color` | The counter color of a completed progress dot | `--md-sys-color-on-tertiary-container` |
+| `--md-comp-divider-color` | The color of the connector line between the steps in the stepper header (shared with the Divider component) | `--md-sys-color-outline-variant` |
 
 **Example: Changing the style of the counter inside header dots**
 
 ```HTML
-<div class="micl-stepper" style="--md-sys-stepper-counter-style:upper-alpha">
+<div class="micl-stepper" style="--md-comp-stepper-counter-style:upper-alpha">
   ...
 </div>
 ```