material-inspired-component-library 3.0.1 → 3.0.2

package/README.md

@@ -76,7 +76,7 @@ Copy the main `micl.js` file to your distribution folder and include it in your
 ```
 This will initialize all MICL components, including those that will be added to the DOM later on.
 
-## Foundations
+## Foundations 🪟
 A separate CSS file, based on the [Material Design Layout Foundation](https://m3.material.io/foundations/layout/understanding-layout/overview), provides styles for an adaptive layout. It includes styles for the **window frame**, **body region** and **panes** that adjust to the available screen space, ensuring your layout follows Material Design's responsive guidelines.
 
 - [x] [Layout](layout/README.md)
@@ -103,7 +103,7 @@ The library currently consists of the following components:
 - [x] [Switch](components/switch/README.md)
 - [x] [Text field](components/textfield/README.md)
 
-## Change Log
+## Change Log ↪️
 
 ### 3.0.0 (24.09.2025)
 **Features**

package/components/appbar/index.scss

@@ -66,7 +66,7 @@
     }
     .micl-appbar__leading-icon {
         grid-area: appbar-leading;
-        margin-inline-start: calc(var(--md-sys-layout-window-margin) - (var(--micl-width, statelayer.$md-sys-target-size) / 2) + (24px / 2) - var(--md-sys-appbar-padding-inline));
+        margin-inline-start: calc(var(--md-sys-layout-window-margin) - (var(--micl-width, statelayer.$md-sys-target-size) / 2) + (var(--md-sys-layout-icon-size, 24px) / 2) - var(--md-sys-appbar-padding-inline));
         color: var(--md-sys-color-on-surface);
     }
     .micl-appbar__headline {
@@ -103,7 +103,7 @@
     }
     .micl-appbar__trailing-icon {
         grid-area: appbar-trailing;
-        margin-inline-end: calc(var(--md-sys-layout-window-margin) - (var(--micl-width, statelayer.$md-sys-target-size) / 2) + (24px / 2) - var(--md-sys-appbar-padding-inline));
+        margin-inline-end: calc(var(--md-sys-layout-window-margin) - (var(--micl-width, statelayer.$md-sys-target-size) / 2) + (var(--md-sys-layout-icon-size, 24px) / 2) - var(--md-sys-appbar-padding-inline));
         color: var(--md-sys-color-on-surface-variant);
     }
     &.micl-appbar--medium {

package/components/badge/index.scss

@@ -25,16 +25,16 @@
     --md-sys-badge-small-size: 6px;
     --md-sys-badge-large-size: 16px;
     --md-sys-badge-large-padding: 4px;
-}
-
-.micl-badge {
     --md-sys-badge-inline-offset: 0px;
     --md-sys-badge-block-offset: 0px;
+}
 
+.micl-badge {
     box-sizing: border-box;
     position: fixed;
-    inset: unset;
+    inset: 0;
     margin: 0;
+    overflow-x: hidden;
     background-color: var(--md-sys-color-error);
     color: var(--md-sys-color-on-error);
 
@@ -42,7 +42,7 @@
         inline-size: var(--md-sys-badge-small-size);
         block-size: var(--md-sys-badge-small-size);
         inset-block-start: calc(anchor(start) + var(--md-sys-badge-block-offset));
-        inset-inline-start: calc(anchor(end) - var(--md-sys-badge-small-size) - var(--md-sys-badge-inline-offset));
+        inset-inline-start: calc(anchor(end) - var(--md-sys-badge-small-size) + var(--md-sys-badge-inline-offset));
         padding: 0;
         border-radius: calc(var(--md-sys-badge-small-size) / 2);
     }
@@ -53,9 +53,24 @@
         max-inline-size: 34px;
         min-inline-size: var(--md-sys-badge-large-size);
         block-size: var(--md-sys-badge-large-size);
-        inset-block-start: calc(anchor(start) - 2px + var(--md-sys-badge-block-offset));
-        inset-inline-start: calc(anchor(end) - 12px - var(--md-sys-badge-inline-offset));
+        inset-block-start: calc(anchor(start) - (var(--md-sys-badge-large-size) - 14px) + var(--md-sys-badge-block-offset));
+        inset-inline-start: calc(anchor(end) - 12px + var(--md-sys-badge-inline-offset));
         padding-inline: var(--md-sys-badge-large-padding);
         border-radius: calc(var(--md-sys-badge-large-size) / 2);
     }
 }
+
+@supports not (top: anchor(bottom)) {
+    .micl-badge {
+        position: absolute;
+        inset: 0 !important;
+        margin-block: calc(12px + var(--md-sys-badge-block-offset)) auto;
+
+        &.micl-badge--small {
+            margin-inline-start: calc(var(--md-sys-layout-icon-size) - var(--md-sys-badge-small-size) - var(--md-sys-badge-inline-offset));
+        }
+        &:not(.micl-badge--small) {
+            margin-inline-start: calc(12px - var(--md-sys-badge-inline-offset));
+        }
+    }
+}

package/components/button/index.scss

@@ -221,8 +221,8 @@ button.micl-button-outlined-m {
         }
     }
     .micl-button__icon {
-        font-size: 24px;
-        width: 24px;
+        font-size: var(--md-sys-layout-icon-size, 24px);
+        width: var(--md-sys-layout-icon-size, 24px);
     }
 }
 

package/components/card/README.md

@@ -1,5 +1,5 @@
 # Card
-This component implements the the [Material Design 3 Expressive Card](https://m3.material.io/components/cards/overview) design.
+This component implements the the [Material Design 3 Expressive Card](https://m3.material.io/components/cards/overview) design. Cards display content and actions about a single subject.
 
 ## Basic Usage
 
@@ -40,7 +40,6 @@ Cards come in **three distinct styles**:
 - `micl-card-outlined`: A card with a clear border, often used for less prominent content or to indicate interactivity.
 
 ### Card Content Structure
-
 While the card container is the only required element, the Card component provides several optional utility classes to help structure your card's content:
 ```HTML
 <div class="micl-card-outlined" tabindex="0">
@@ -64,7 +63,7 @@ While the card container is the only required element, the Card component provid
   - `micl-card__headline-m` (medium) - *Used in the example above*
   - `micl-card__headline-l` (large)
 
-- `micl-card__image`: Applies styling to an `<img>` element used as the primary image for the card.
+- `micl-card__image`: Applies styling to an `<img>` element or an element with a `background-image` style used as the primary image for the card.
 
 - `micl-card__subhead`: For secondary headings, displayed with a smaller font than the main headline.
 
@@ -93,18 +92,23 @@ Cards can also serve as containers for expandable detail areas using the `<detai
 </details>
 ```
 
+### Compact Cards
+Add the `micl-card--compact` to the main `<div>` element (or, the `<summary>` element for expandable cards) to create a compact version of the card header.
+
 ### States
 - **Disabled Cards**: To visually indicate a disabled card (e.g., non-interactive), add the `micl-card--disabled` class to the card container.
 
 - **Dragging State**: When implementing drag-and-drop functionality for cards, apply the `micl-card--dragging` class to the card container to provide visual feedback during the drag operation.
 
 ## Customizations
-You can customize the appearance of the Card 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 dividers.
+You can customize the appearance of the Card 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 cards.
 
 | Variable name | Default Value | Description |
 | ------------- | ----- | ----------- |
 | --md-sys-card-margin | 8px | Sets the spacing between adjacent cards both horizontally and vertically |
 | --md-sys-card-padding-inline | 16px | Defines the amount of space between the left and right edges of a card and its content |
+| --md-sys-card-content-padding-block | 16px | The amount of vertical padding reserved for the content area |
+| --md-sys-card-outlined-border-width | 1px | The width of the border of **outlined** cards |
 
 **Example: Changing the card margins**
 
@@ -120,6 +124,6 @@ You can customize the appearance of the Card component by overriding its global
 ```
 
 ## Compatibility
-This component uses the `color-mix` CSS functional notation, which might not be supported in your browser. Please check [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix#browser_compatibility) for details.
+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.
 
 The Card component uses the `interpolate-size` CSS property to smoothly open and close the detail area of a Details disclosure element, which might not be supported in your browser. Please check [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/interpolate-size#browser_compatibility) for details.

package/components/card/index.scss

@@ -28,6 +28,8 @@
 :root {
     --md-sys-card-margin: 8px;
     --md-sys-card-padding-inline: 16px;
+    --md-sys-card-content-padding-block: 16px;
+    --md-sys-card-outlined-border-width: 1px;
 }
 
 .micl-card-elevated,
@@ -36,9 +38,12 @@
     --md-sys-card-motion-spatial: #{motion.$md-sys-motion-expressive-default-spatial};
     --md-sys-card-motion-duration: #{motion.$md-sys-motion-expressive-default-spatial-duration};
 
-    height: fit-content;
+    display: block;
+    block-size: fit-content;
     margin: 0;
+    padding-block-end: var(--md-sys-card-content-padding-block);
     border-radius: var(--md-sys-shape-corner-medium);
+    outline: none;
     overflow: hidden;
     interpolate-size: allow-keywords;
 
@@ -66,7 +71,6 @@
 
             outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
             outline-offset: var(--md-sys-state-focus-indicator-outer-offset);
-            box-shadow: var(--md-sys-elevation-level1);
         }
         &:active {
             --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
@@ -89,21 +93,23 @@
         outline-offset: var(--md-sys-state-focus-indicator-outer-offset);
     }
     &::details-content {
-        height: 0;
+        block-size: 0;
         overflow: hidden;
         transition:
-            height var(--md-sys-card-motion-duration) var(--md-sys-card-motion-spatial),
+            block-size var(--md-sys-card-motion-duration) var(--md-sys-card-motion-spatial),
             content-visibility var(--md-sys-card-motion-duration) linear allow-discrete;
     }
     &[open]::details-content {
-        height: auto;
+        block-size: auto;
     }
     &> summary {
-        padding-block-end: 8px;
         outline: none;
         list-style: none;
         cursor: pointer
     }
+    &:not([open]):has(> summary.micl-card--compact) {
+        padding-block-end: 0;
+    }
 }
 
 .micl-card-elevated {
@@ -114,9 +120,6 @@
         &:hover {
             box-shadow: var(--md-sys-elevation-level2);
         }
-        &:active {
-            box-shadow: var(--md-sys-elevation-level1);
-        }
         &.micl-card--dragging {
             box-shadow: var(--md-sys-elevation-level4);
         }
@@ -125,29 +128,18 @@
 .micl-card-filled {
     background-color: var(--md-sys-color-surface-container-highest);
     box-shadow: var(--md-sys-elevation-level0);
-
-    &[tabindex='0']:not(.micl-card--disabled) {
-        &:focus-visible {
-            box-shadow: var(--md-sys-elevation-level0);
-        }
-        &:active {
-            box-shadow: var(--md-sys-elevation-level0);
-        }
-    }
 }
 .micl-card-outlined {
     background-color: var(--md-sys-color-surface);
     box-shadow: var(--md-sys-elevation-level0);
-    border: 1px solid var(--md-sys-color-outline-variant);
+    border: var(--md-sys-card-outlined-border-width) solid var(--md-sys-color-outline-variant);
 
     &[tabindex='0']:not(.micl-card--disabled) {
         &:focus-visible {
             border-color: var(--md-sys-color-on-surface);
-            box-shadow: var(--md-sys-elevation-level0);
         }
         &:active {
             border-color: var(--md-sys-color-outline-variant);
-            box-shadow: var(--md-sys-elevation-level0);
         }
     }
 }
@@ -167,10 +159,44 @@
         border-color: rgb(from var(--md-sys-color-outline) r g b / 12%);
     }
 }
+.micl-card--compact {
+    display: grid;
+    grid-template-areas:
+        "card-media card-headline"
+        "card-media card-subhead"
+        "card-media card-supporting"
+        "card-content card-content";
+    grid-template-columns: 20% 1fr;
+
+    .micl-card__image {
+        grid-area: card-media;
+        block-size: 100%;
+        object-fit: cover;
+        background-size: cover;
+    }
+    .micl-card__headline-s,
+    .micl-card__headline-m,
+    .micl-card__headline-l {
+        grid-area: card-headline;
+    }
+    .micl-card__subhead {
+        grid-area: card-subhead;
+    }
+    .micl-card__supporting-text {
+        grid-area: card-supporting;
+    }
+    .micl-card__content {
+        grid-area: card-content;
+    }
+}
 
 .micl-card__image {
-    width: 100%;
+    display: block;
+    inline-size: 100%;
     border-radius: var(--md-sys-shape-corner-medium);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
 }
 
 .micl-card__headline-s,
@@ -260,6 +286,7 @@
 
 .micl-card__content {
     box-sizing: border-box;
+    padding-block: var(--md-sys-card-content-padding-block) 0;
     padding-inline: var(--md-sys-card-padding-inline);
     background-color: inherit;
     overflow: hidden;

package/components/dialog/index.scss

@@ -161,9 +161,9 @@ dialog.micl-dialog-fullscreen {
             color: var(--md-sys-color-on-surface);
         }
         .micl-dialog__icon {
-            width: 24px;
-            height: 24px;
-            font-size: 24px;
+            width: var(--md-sys-layout-icon-size, 24px);
+            height: var(--md-sys-layout-icon-size, 24px);
+            font-size: var(--md-sys-layout-icon-size, 24px);
             color: var(--md-sys-color-secondary);
         }
         button {

package/components/divider/README.md

@@ -1,5 +1,5 @@
 # Divider
-This component implements the the [Material Design 3 Expressive Divider](https://m3.material.io/components/divider/overview) design.
+This component implements the the [Material Design 3 Expressive Divider](https://m3.material.io/components/divider/overview) design. Dividers are thin lines that separate content into distinct sections.
 
 ## Basic Usage
 
@@ -30,8 +30,8 @@ The Divider component offers five CSS classes for different divider styles:
 | --------- | ----------- |
 | micl-divider | A standard, full-width divider |
 | micl-divider-inset | Indented equally on both the left and right sides |
-| micl-divider-inset--start | Indented only on the left (start) side |
-| micl-divider-inset--end | Indented only on the right (end) side |
+| micl-divider-inset-start | Indented only on the left (start) side |
+| micl-divider-inset-end | Indented only on the right (end) side |
 | micl-divider-vertical | A vertical divider |
 
 ## Customizations

package/components/divider/index.scss

@@ -25,50 +25,41 @@
     --md-sys-divider-space: 4px;
 }
 body {
-    --md-sys-divider-color: var(--md-sys-color-outline-variant);
+    --md-sys-divider-color: var(--md-sys-color-outline-variant, gray);
 }
 
-.micl-divider {
-    width: 100%;
-    height: 0;
+.micl-divider,
+.micl-divider-inset,
+.micl-divider-inset-start,
+.micl-divider-inset-end {
+    inline-size: 100%;
+    block-size: 0;
     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, 1px) solid var(--md-sys-divider-color);
+    border-block-start: var(--md-sys-divider-thickness, 1px) solid var(--md-sys-divider-color, gray);
 }
 
 .micl-divider-inset {
-    width: calc(100% - 2 * var(--md-sys-divider-inset-margin));
-    height: 0;
-    margin-block: calc(var(--md-sys-divider-space, 4px) - 1px) var(--md-sys-divider-space, 4px);
+    inline-size: calc(100% - 2 * var(--md-sys-divider-inset-margin, 16px));
     margin-inline: var(--md-sys-divider-inset-margin);
-    border: 0;
-    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: 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, 1px) solid var(--md-sys-divider-color);
+.micl-divider-inset-start {
+    inline-size: calc(100% - var(--md-sys-divider-inset-margin, 16px));
+    margin-inline-start: var(--md-sys-divider-inset-margin, 16px);
 }
 
-.micl-divider-inset--end {
-    width: calc(100% - var(--md-sys-divider-inset-margin));
-    height: 0;
-    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, 1px) solid var(--md-sys-divider-color);
+.micl-divider-inset-end {
+    inline-size: calc(100% - var(--md-sys-divider-inset-margin, 16px));
+    margin-inline-end: var(--md-sys-divider-inset-margin, 16px);
 }
 
 .micl-divider-vertical {
-    min-height: 100%;
-    width: 0;
+    min-block-size: 100%;
+    inline-size: 0;
     margin-block: 0;
     margin-inline: calc(2 * var(--md-sys-divider-space, 4px));
     border: 0;
-    border-inline-start: var(--md-sys-divider-thickness, 1px) solid var(--md-sys-divider-color);
+    border-inline-start: var(--md-sys-divider-thickness, 1px) solid var(--md-sys-divider-color, gray);
 }

package/components/iconbutton/index.scss

@@ -151,7 +151,7 @@ button.micl-iconbutton-outlined-s {
     inline-size: var(--micl-width);
     min-inline-size: var(--micl-width);
     block-size: var(--micl-height);
-    font-size: 24px;
+    font-size: var(--md-sys-layout-icon-size, 24px);
 
     &::before {
         content: "";
@@ -202,7 +202,7 @@ button.micl-iconbutton-outlined-m {
     inline-size: var(--micl-width);
     min-inline-size: var(--micl-width);
     block-size: var(--micl-height);
-    font-size: 24px;
+    font-size: var(--md-sys-layout-icon-size, 24px);
 
     &.micl-button--toggle.micl-button--selected {
         border-radius: var(--md-sys-shape-corner-large);

package/components/list/index.scss

@@ -308,8 +308,8 @@
 }
 
 .micl-list-item__icon {
-    min-width: 24px;
-    font-size: 24px;
+    min-width: var(--md-sys-layout-icon-size, 24px);
+    font-size: var(--md-sys-layout-icon-size, 24px);
     font-variation-settings: 'FILL' 0;
     color: var(--md-sys-color-on-surface-variant);
     transition: font-variation-settings var(--md-sys-list-motion-duration) linear;

package/components/navigationrail/index.scss

@@ -43,6 +43,8 @@
     --md-sys-navigationrail-motion-duration-reverse: #{motion.$md-sys-motion-expressive-default-spatial-duration};
     --md-sys-navigationrail-morph-duration: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
     --md-sys-navigationrail-morph-duration-reverse: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
+    --md-sys-badge-inline-offset: -16px;
+    --md-sys-badge-block-offset: 4px;
 
     box-sizing: border-box;
     display: flex;
@@ -91,6 +93,7 @@
 
             box-sizing: border-box;
             display: flex;
+            position: relative;
             flex-direction: column;
             align-items: center;
             block-size: var(--md-sys-navigationrail-item-height);
@@ -115,8 +118,8 @@
             &> .micl-navigationrail__icon {
                 --micl-ripple: 1;
 
-                font-size: 24px;
-                inline-size: 24px;
+                font-size: var(--md-sys-layout-icon-size, 24px);
+                inline-size: var(--md-sys-layout-icon-size, 24px);
                 margin: 0;
                 padding-block: 4px;
                 padding-inline: 16px;
@@ -173,7 +176,6 @@ nav.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggl
         row-gap: 0px;
 
         &> label.micl-navigationrail__item {
-            position: relative;
             flex-direction: row;
             inline-size: fit-content;
 

package/components/radio/README.md

@@ -29,7 +29,7 @@ A radio button can be disabled by adding the `disabled` attribute to the `<input
 
 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.
 
-By default, 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.
+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.
 
 ## Customizations
 You can customize the appearance of the Radio Button 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 radio buttons.

package/components/select/index.scss

@@ -62,7 +62,8 @@
         background-color: var(--md-sys-color-surface-container);
         box-shadow: var(--md-sys-elevation-level2);
         opacity: 0;
-        overflow: hidden;
+        overflow-x: hidden;
+        overflow-y: auto;
         transform: scaleY(0);
         transform-origin: var(--md-sys-select-picker-origin);
         transition:
@@ -130,7 +131,9 @@
             content: attr(aria-description);
             display: block;
             color: var(--md-sys-color-on-surface-variant);
-            white-space: normal;
+            overflow-x: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
         }
         &::checkmark {
             color: var(--md-sys-color-on-surface-variant);

package/components/slider/index.scss

@@ -261,7 +261,7 @@ input[type=range].micl-slider-xl {
 
 .micl-slider__container {
     display: grid;
-    grid-template-areas: "slidericon";
+    grid-template-areas: "slider-icon";
     flex-shrink: 0;
     align-items: center;
     justify-items: flex-start;
@@ -269,16 +269,16 @@ input[type=range].micl-slider-xl {
 
     &:has(> .micl-slider-m,> .micl-slider-l,> .micl-slider-xl) {
         .micl-slider__icon {
-            grid-area: slidericon;
+            grid-area: slider-icon;
             inset: 0;
             margin: 6px;
-            font-size: 24px;
+            font-size: var(--md-sys-layout-icon-size, 24px);
             color: var(--md-sys-color-on-primary);
             z-index: 1;
         }
     }
     &> input[type=range] {
-        grid-area: slidericon;
+        grid-area: slider-icon;
     }
     .micl-slider__icon:has(+ input[type=range].micl-slider-xl),
     input[type=range].micl-slider-xl + .micl-slider__icon {

package/components/stepper/index.scss

@@ -0,0 +1,85 @@
+//
+// Copyright © 2025 Hermana AS
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+@use '../../layout';
+@use '../../styles/motion';
+
+:root {
+    --md-sys-stepper-thickness: 1px;
+}
+
+.micl-stepper {
+    --md-sys-stepper-motion-spatial: #{motion.$md-sys-motion-expressive-slow-spatial};
+    --md-sys-stepper-motion-duration: #{motion.$md-sys-motion-expressive-slow-spatial-duration};
+    --md-sys-stepper-motion-duration-reverse: #{motion.$md-sys-motion-expressive-default-spatial-duration};
+
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--md-sys-layout-padding-xl, 24px);
+    background-color: inherit;
+
+    .micl-stepper__steps {
+        display: grid;
+        grid-template-areas: "stepper-steps";
+        overflow-x: hidden;
+        background-color: inherit;
+
+        .micl-stepper__step {
+            grid-area: stepper-steps;
+            display: flex;
+            visibility: hidden;
+            flex-direction: column;
+            justify-content: space-between;
+            opacity: 0%;
+            background-color: inherit;
+            transform: translateX(100%);
+            transition:
+                opacity var(--md-sys-stepper-motion-duration) linear,
+                transform var(--md-sys-stepper-motion-duration) var(--md-sys-stepper-motion-spatial);
+
+            &:has(~ .micl-stepper__step--current) {
+                transform: translateX(-100%);
+            }
+            &.micl-stepper__step--tocurrent {
+                visibility: visible;
+            }
+            &.micl-stepper__step--current {
+                visibility: visible;
+                opacity: 100%;
+                transform: translateX(0%);
+            }
+            &.micl-stepper__step--fromcurrent {
+                visibility: visible;
+            }
+
+            .micl-stepper__content {
+                box-sizing: border-box;
+                padding-inline: var(--md-sys-stepper-padding-inline);
+                background-color: inherit;
+            }
+        }
+    }
+    .micl-stepper__actions {
+        display: flex;
+        justify-content: space-between;
+    }
+}