material-inspired-component-library 5.0.0 → 5.0.1

package/components/dialog/index.scss

@@ -19,7 +19,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-@use '../../foundations/layout';
+@use '../../foundations';
 @use '../../styles/elevation';
 @use '../../styles/motion';
 @use '../../styles/shapes';
@@ -55,6 +55,7 @@ dialog.micl-dialog {
     transform: translate(calc(var(--md-sys-dialog-dir-factor, 1) * -50%), -50%) scale(50%);
     padding: 0;
     margin: 0;
+    outline: none;
     border: none;
     border-radius: var(--md-sys-shape-corner-extra-large);
     background-color: var(--md-sys-color-surface-container-high);
@@ -134,14 +135,24 @@ dialog.micl-dialog {
             display var(--md-sys-dialog-motion-duration) linear allow-discrete;
     }
     &[open]::backdrop {
-        background-color: rgba(0, 0, 0, 0.2);
+        background-color: rgba(0, 0, 0, var(--md-sys-state-backdrop-opacity, 32%));
 
         @starting-style {
             background-color: rgba(0, 0, 0, 0);
         }
     }
+
+    &.micl-dialog--docked {
+        position-anchor: auto;
+        inset-block: anchor(end) auto;
+        inset-inline: anchor(start) auto;
+        transform: none;
+        transition: none;
+        position-try-fallbacks: flip-block;
+    }
+
 //    &:hover {
-//        --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
+//        --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%);
 //    }
 
     .micl-dialog__headline {
@@ -158,9 +169,9 @@ dialog.micl-dialog {
             align-items: center;
         }
         .micl-dialog__icon {
-            inline-size: var(--md-sys-layout-icon-size, 24px);
-            block-size: var(--md-sys-layout-icon-size, 24px);
-            font-size: var(--md-sys-layout-icon-size, 24px);
+            inline-size: var(--md-sys-icon-size, 24px);
+            block-size: var(--md-sys-icon-size, 24px);
+            font-size: var(--md-sys-icon-size, 24px);
             color: var(--md-sys-color-secondary);
         }
         h1, h2, h3, h4, h5, h6, .micl-heading {
@@ -170,9 +181,6 @@ dialog.micl-dialog {
             margin: 0;
             color: var(--md-sys-color-on-surface);
         }
-        button {
-            display: none;
-        }
         .micl-dialog__subhead {
             @include typography.title-medium;
 
@@ -222,7 +230,7 @@ dialog.micl-dialog.micl-dialog--fullscreen {
         timeline-scope: --headlineTimeline;
 
 //        &:hover {
-//            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
+//            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%);
 //        }
         .micl-dialog__headline {
             block-size: 56px;
@@ -249,13 +257,6 @@ dialog.micl-dialog.micl-dialog--fullscreen {
             .micl-dialog__icon {
                 display:none;
             }
-            button {
-                display: block;
-
-                &.micl-button {
-                    margin-inline-end: 16px;
-                }
-            }
         }
         .micl-dialog__content {
             scroll-timeline: --headlineTimeline block;
@@ -266,6 +267,11 @@ dialog.micl-dialog.micl-dialog--fullscreen {
             opacity: 0;
         }
     }
+    @media (min-width: 561px) {
+        .micl-dialog__fullscreen {
+            display: none;
+        }
+    }
 }
 
 @media (max-width: 560px) {

package/components/divider/index.scss

@@ -19,6 +19,8 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
+@use '../../foundations';
+
 :root {
     --md-sys-divider-thickness: 1px;
     --md-sys-divider-inset-margin: 16px;

package/components/iconbutton/index.scss

@@ -19,7 +19,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-@use '../../foundations/layout';
+@use '../../foundations';
 @use '../../styles/elevation';
 @use '../../styles/motion';
 @use '../../styles/shapes';
@@ -53,6 +53,7 @@ button.micl-iconbutton-outlined-xl {
     --md-sys-iconbutton-motion-duration-reverse: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
     --micl-ripple: 1;
 
+    align-items: center;
     padding: 0;
     border: none;
     border-radius: var(--md-sys-shape-corner-full);
@@ -74,13 +75,13 @@ button.micl-iconbutton-outlined-xl {
 
     &:disabled {
         background-color: rgb(from var(--md-sys-color-on-surface) r g b / 10%);
-        color: rgb(from var(--md-sys-color-on-surface) r g b / 38%);
+        color: rgb(from var(--md-sys-color-on-surface) r g b / var(--md-sys-state-disabled-state-layer-opacity, 38%));
         box-shadow: var(--md-sys-elevation-level0);
         cursor: default;
     }
     &:not(:disabled) {
         &:focus-visible {
-            outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
+            outline: var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary);
             outline-offset: 3px;
         }
         &:active {
@@ -154,7 +155,7 @@ button.micl-iconbutton-outlined-s {
     inline-size: var(--micl-width);
     min-inline-size: var(--micl-width);
     block-size: var(--micl-height);
-    font-size: var(--md-sys-layout-icon-size, 24px);
+    font-size: var(--md-sys-icon-size, 24px);
 
     &::before {
         content: "";
@@ -201,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: var(--md-sys-layout-icon-size, 24px);
+    font-size: var(--md-sys-icon-size, 24px);
 
     &.micl-button--toggle.micl-button--selected {
         border-radius: var(--md-sys-shape-corner-large);
@@ -322,13 +323,13 @@ button.micl-iconbutton-standard-xl {
             color: var(--md-sys-color-primary);
         }
         &:hover {
-            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%);
         }
         &:focus-visible {
-            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);
         }
         &:active {
-            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%);
         }
     }
 }
@@ -352,13 +353,13 @@ button.micl-iconbutton-filled-xl {
             color: var(--md-sys-color-on-surface-variant);
         }
         &:hover {
-            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%);
         }
         &:focus-visible {
-            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);
         }
         &:active {
-            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%);
         }
     }
 }
@@ -381,13 +382,13 @@ button.micl-iconbutton-tonal-xl {
             color: var(--md-sys-color-on-secondary);
         }
         &:hover {
-            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%);
         }
         &:focus-visible {
-            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);
         }
         &:active {
-            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%);
         }
     }
 }
@@ -427,13 +428,13 @@ button.micl-iconbutton-outlined-xl {
             color: var(--md-sys-color-inverse-on-surface);
         }
         &:hover {
-            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%);
         }
         &:focus-visible {
-            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);
         }
         &:active {
-            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%);
         }
     }
 }

package/components/list/index.scss

@@ -19,7 +19,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-@use '../../foundations/layout';
+@use '../../foundations';
 @use '../../styles/motion';
 @use '../../styles/shapes';
 @use '../../styles/statelayer';
@@ -100,24 +100,24 @@ select {
         cursor: pointer;
 
         &:hover {
-            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%);
 
             .micl-list-item__icon {
                 font-variation-settings: 'FILL' 1;
             }
         }
         &:focus-visible {
-            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);
 
-            outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
-            outline-offset: var(--md-sys-state-focus-indicator-inner-offset);
+            outline: var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary);
+            outline-offset: var(--md-sys-state-focus-indicator-inner-offset, -3px);
 
             .micl-list-item__icon {
                 font-variation-settings: 'FILL' 1;
             }
         }
         &:active {
-            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%);
 
             background-size: 0%, 100%;
             transition: background-size 0ms;
@@ -184,11 +184,11 @@ select {
         .micl-list-item__text,
         .micl-list-item__text::after,
         .micl-list-item__trailing-text {
-            color: rgb(from var(--md-sys-color-on-surface) r g b / 38%);
+            color: rgb(from var(--md-sys-color-on-surface) r g b / var(--md-sys-state-disabled-state-layer-opacity, 38%));
         }
         .micl-list-item__image,
         .micl-list-item__thumbnail {
-            opacity: 38%;
+            opacity: var(--md-sys-state-disabled-state-layer-opacity, 38%);
         }
         a, button, label {
             pointer-events: none;
@@ -323,8 +323,8 @@ select {
 }
 
 .micl-list-item__icon {
-    min-inline-size: var(--md-sys-layout-icon-size, 24px);
-    font-size: var(--md-sys-layout-icon-size, 24px);
+    min-inline-size: var(--md-sys-icon-size, 24px);
+    font-size: var(--md-sys-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/menu/index.scss

@@ -19,6 +19,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
+@use '../../foundations';
 @use '../../styles/elevation';
 @use '../../styles/motion';
 @use '../../styles/shapes';
@@ -69,7 +70,7 @@
             transform: scaleY(0);
         }
         &::backdrop {
-            background-color: rgba(0, 0, 0, 0.2);
+            background-color: rgba(0, 0, 0, var(--md-sys-state-backdrop-opacity, 32%));
 
             @starting-style {
                 background-color: rgba(0, 0, 0, 0);

package/components/navigationrail/index.scss

@@ -19,6 +19,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
+@use '../../foundations';
 @use '../../foundations/layout';
 @use '../../styles/elevation';
 @use '../../styles/motion';
@@ -119,8 +120,8 @@
             &> .micl-navigationrail__icon {
                 --micl-ripple: 1;
 
-                font-size: var(--md-sys-layout-icon-size, 24px);
-                inline-size: var(--md-sys-layout-icon-size, 24px);
+                font-size: var(--md-sys-icon-size, 24px);
+                inline-size: var(--md-sys-icon-size, 24px);
                 margin: 0;
                 padding-block: 4px;
                 padding-inline: 16px;
@@ -188,15 +189,15 @@ nav.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggl
                 background-color: transparent;
             }
             &:hover {
-                --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
+                --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%);
             }
             &:focus-visible {
-                --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);
+                --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);
             }
             &:active {
                 background-size: 0%, 100%;
                 transition: background-size 0ms;
-                --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
+                --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%);
             }
             &> .micl-navigationrail__text {
                 @include typography.label-large;
@@ -273,17 +274,17 @@ nav.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggl
     &> .micl-navigationrail__content > label.micl-navigationrail__item {
         &:hover {
             &> .micl-navigationrail__icon {
-                --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
+                --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%);
             }
         }
         &:focus-visible {
             &> .micl-navigationrail__icon {
-                --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);
+                --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);
             }
         }
         &:active {
             &> .micl-navigationrail__icon {
-                --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
+                --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%);
 
                 background-size: 0%, 100%;
                 transition:
@@ -346,7 +347,7 @@ nav.micl-navigationrail[popover] {
             display var(--md-sys-navigationrail-motion-duration) linear allow-discrete;
 
         &::backdrop {
-            background-color: rgba(0, 0, 0, 0.2);
+            background-color: rgba(0, 0, 0, var(--md-sys-state-backdrop-opacity, 32%));
 
             @starting-style {
                 background-color: rgba(0, 0, 0, 0);

package/components/radio/README.md

@@ -43,7 +43,6 @@ You can customize the appearance of the Radio Button component by overriding its
 | ------------- | ------------- | ----------- |
 | --md-sys-radio-border-width | 2px | Controls the thickness of the radio button's border |
 | --md-sys-radio-container-size | 20px | Defines the diameter of the radio button itself |
-| --md-sys-radio-state-layer-size | 40px | Sets the size of the interactive area that indicates the component's current state (e.g., hover, focus, press) |
 
 **Example: Changing the size of the radio button**
 

package/components/radio/index.scss

@@ -19,6 +19,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
+@use '../../foundations';
 @use '../../styles/motion';
 @use '../../styles/shapes';
 @use '../../styles/statelayer';
@@ -26,7 +27,6 @@
 :root {
     --md-sys-radio-border-width: 2px;
     --md-sys-radio-container-size: 20px;
-    --md-sys-radio-state-layer-size: 40px;
 }
 
 input[type=radio].micl-radio {
@@ -37,12 +37,12 @@ input[type=radio].micl-radio {
     appearance: none;
     box-sizing: border-box;
     position: relative;
-    inline-size: var(--md-sys-target-size);
-    min-inline-size: var(--md-sys-target-size);
-    block-size: var(--md-sys-target-size);
-    min-block-size: var(--md-sys-target-size);
+    inline-size: var(--md-sys-target-size, 48px);
+    min-inline-size: var(--md-sys-target-size, 48px);
+    block-size: var(--md-sys-target-size, 48px);
+    min-block-size: var(--md-sys-target-size, 48px);
     margin: 0;
-    border: calc((var(--md-sys-target-size) - var(--md-sys-radio-state-layer-size)) / 2) solid transparent;
+    border: calc((var(--md-sys-target-size, 48px) - var(--md-sys-state-layer-size, 40px)) / 2) solid transparent;
     background-clip: content-box;
     background-color: transparent;
     -webkit-tap-highlight-color: transparent;
@@ -102,22 +102,22 @@ input[type=radio].micl-radio {
             }
         }
         &:hover {
-            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%);
         }
         &:focus-visible {
-            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);
 
-            outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
+            outline: var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary);
         }
         &:active {
-            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%);
 
             background-size: 0%, 100%;
             transition: background-size 0ms;
         }
     }
     &:disabled {
-        opacity: 38%;
+        opacity: var(--md-sys-state-disabled-state-layer-opacity, 38%);
 
         &::after {
             border-color: var(--md-sys-color-on-surface);

package/components/select/index.scss

@@ -19,6 +19,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
+@use '../../foundations';
 @use '../../styles/elevation';
 @use '../../styles/motion';
 @use '../../styles/shapes';
@@ -114,7 +115,7 @@
             }
         }
         &:focus-visible {
-            outline-offset: calc(-1 * var(--md-sys-state-focus-indicator-thickness));
+            outline-offset: calc(-1 * var(--md-sys-state-focus-indicator-thickness, 3px));
             z-index: 1;
         }
 

package/components/sidesheet/index.scss

@@ -19,6 +19,8 @@
 // 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';
 @use '../../styles/shapes';
@@ -140,7 +142,7 @@ dialog.micl-sidesheet {
         transition: background-color var(--md-sys-sidesheet-motion-duration-reverse) linear;
     }
     &[open]::backdrop {
-        background-color: rgba(0, 0, 0, 0.2);
+        background-color: rgba(0, 0, 0, var(--md-sys-state-backdrop-opacity, 32%));
         transition: background-color var(--md-sys-sidesheet-motion-duration) linear;
 
         @starting-style {

package/components/slider/index.scss

@@ -19,7 +19,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-@use '../../foundations/layout';
+@use '../../foundations';
 @use '../../styles/motion';
 @use '../../styles/shapes';
 @use '../../styles/statelayer';
@@ -41,7 +41,7 @@
 @mixin slider-track-disabled() {
     background-image: linear-gradient(
         var(--md-sys-slider-track-direction),
-        color-mix(in srgb, var(--md-sys-color-on-surface) 38%, 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) 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%,
@@ -79,8 +79,8 @@
         var(--md-sys-slider-track-direction),
         transparent 0px,
         transparent var(--md-sys-slider-thumb-space),
-        color-mix(in srgb, var(--md-sys-color-on-surface) 38%, var(--md-sys-color-surface)) var(--md-sys-slider-thumb-space),
-        color-mix(in srgb, var(--md-sys-color-on-surface) 38%, var(--md-sys-color-surface)) 10px,
+        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 10px,
         transparent 16px
     );
@@ -223,10 +223,10 @@ input[type=range].micl-slider-xl {
         }
         &:focus-visible {
             &::-webkit-slider-thumb {
-                outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
+                outline: var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary);
             }
             &::-moz-range-thumb {
-                outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
+                outline: var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary);
             }
         }
         &:active {
@@ -273,7 +273,7 @@ input[type=range].micl-slider-xl {
             grid-area: slider-icon;
             inset: 0;
             margin: 6px;
-            font-size: var(--md-sys-layout-icon-size, 24px);
+            font-size: var(--md-sys-icon-size, 24px);
             color: var(--md-sys-color-on-primary);
             z-index: 1;
         }

package/components/stepper/index.scss

@@ -19,8 +19,9 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-@use '../../foundations/layout';
+@use '../../foundations';
 @use '../../styles/motion';
+@use '../../styles/statelayer';
 
 :root {
     --md-sys-stepper-counter-style: decimal;
@@ -38,7 +39,7 @@ body {
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    row-gap: var(--md-sys-layout-padding-xl, 24px);
+    row-gap: var(--md-sys-padding-xl, 24px);
     margin: 0;
     background-color: inherit;
 
@@ -119,7 +120,7 @@ body {
         &>:last-child {
             display: flex;
             flex: 1 1 0;
-            column-gap: var(--md-sys-layout-padding-xs, 8px)
+            column-gap: var(--md-sys-padding-xs, 8px)
         }
         &>:last-child {
             justify-content: flex-end;
@@ -139,7 +140,7 @@ body {
         text-align: center;
         background-color: var(--md-sys-color-on-surface);
         color: var(--md-sys-color-surface);
-        opacity: 38%;
+        opacity: var(--md-sys-state-disabled-state-layer-opacity, 38%);
         counter-increment: dotnumber 1;
     }
     .micl-stepper__progress--done.micl-stepper__progress-dot,

package/components/switch/README.md

@@ -59,7 +59,6 @@ You can customize the appearance of the Switch component by overriding its globa
 | --md-sys-switch-handle-selected-size | 24px | The diameter of the handle when the switch is "on" |
 | --md-sys-switch-handle-pressed-size | 28px | The diameter of the handle when the switch is pressed |
 | --md-sys-switch-outline-width | 2px | The width of the border |
-| --md-sys-switch-state-layer-size | 40px | Sets the size of the area that indicates the component's current state (e.g., hover, focus, press) |
 | --md-sys-switch-target-height | 32px | The height of the track |
 | --md-sys-switch-target-width | 52px | The width of the track |