material-inspired-component-library 4.0.2 → 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';
@@ -27,7 +27,10 @@
 @use '../../styles/typography';
 
 :root {
+    --md-sys-dialog-min-width: 280px;
+    --md-sys-dialog-max-width: 560px;
     --md-sys-dialog-padding: 24px;
+    --md-sys-dialog-headline-space: 16px;
     --md-sys-dialog-dir-factor: 1;
 }
 
@@ -35,8 +38,7 @@
     --md-sys-dialog-dir-factor: -1;
 }
 
-dialog.micl-dialog,
-dialog.micl-dialog-fullscreen {
+dialog.micl-dialog {
     --statelayer-color: var(--md-sys-color-primary);
     --md-sys-dialog-motion-spatial: #{motion.$md-sys-motion-expressive-fast-spatial};
     --md-sys-dialog-motion-duration: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
@@ -45,14 +47,15 @@ dialog.micl-dialog-fullscreen {
     box-sizing: border-box;
     display: none;
     flex-direction: column;
-    min-width: 280px;
-    max-width: 560px;
-    max-height: 100vh;
+    min-inline-size: var(--md-sys-dialog-min-width, 280px);
+    max-inline-size: var(--md-sys-dialog-max-width, 560px);
+    max-block-size: 100vh;
     inset-block-start: anchor(start);
     inset-inline-start: anchor(start);
-    transform: translate(calc(var(--md-sys-dialog-dir-factor) * -50%), -50%) scale(50%);
+    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);
@@ -65,8 +68,8 @@ dialog.micl-dialog-fullscreen {
     transition:
         inset-block-start var(--md-sys-dialog-motion-duration-reverse) linear,
         inset-inline-start var(--md-sys-dialog-motion-duration-reverse) linear,
-        width var(--md-sys-dialog-motion-duration-reverse) linear,
-        height var(--md-sys-dialog-motion-duration-reverse) linear,
+        inline-size var(--md-sys-dialog-motion-duration-reverse) linear,
+        block-size var(--md-sys-dialog-motion-duration-reverse) linear,
         transform var(--md-sys-dialog-motion-duration-reverse) linear,
         opacity var(--md-sys-dialog-motion-duration-reverse) motion.$md-sys-motion-easing-emphasized-decelerate,
         overlay var(--md-sys-dialog-motion-duration-reverse) linear allow-discrete,
@@ -74,12 +77,12 @@ dialog.micl-dialog-fullscreen {
         --statelayer-opacity var(--md-sys-dialog-motion-duration) linear;
 
     @starting-style {
-        height: fit-content;
-        width: fit-content;
+        block-size: fit-content;
+        inline-size: fit-content;
         inset-block-start: anchor(start);
         inset-inline-start: anchor(start);
         opacity: 0;
-        transform: translate(calc(var(--md-sys-dialog-dir-factor) * -50%), -50%) scale(50%);
+        transform: translate(calc(var(--md-sys-dialog-dir-factor, 1) * -50%), -50%) scale(50%);
     }
 
     &:popover-open,
@@ -88,12 +91,12 @@ dialog.micl-dialog-fullscreen {
         inset-block-start: 50%;
         inset-inline-start: 50%;
         opacity: 1;
-        transform: translate(calc(var(--md-sys-dialog-dir-factor) * -50%), -50%) scale(100%);
+        transform: translate(calc(var(--md-sys-dialog-dir-factor, 1) * -50%), -50%) scale(100%);
         transition:
             inset-block-start var(--md-sys-dialog-motion-duration) linear,
             inset-inline-start var(--md-sys-dialog-motion-duration) linear,
-            width var(--md-sys-dialog-motion-duration) linear,
-            height var(--md-sys-dialog-motion-duration) linear,
+            inline-size var(--md-sys-dialog-motion-duration) linear,
+            block-size var(--md-sys-dialog-motion-duration) linear,
             transform var(--md-sys-dialog-motion-duration) linear,
             opacity var(--md-sys-dialog-motion-duration) motion.$md-sys-motion-easing-emphasized-accelerate,
             overlay var(--md-sys-dialog-motion-duration) linear allow-discrete,
@@ -103,7 +106,7 @@ dialog.micl-dialog-fullscreen {
             inset-block-start: anchor(start);
             inset-inline-start: anchor(start);
             opacity: 0;
-            transform: translate(calc(var(--md-sys-dialog-dir-factor) * -50%), -50%) scale(50%);
+            transform: translate(calc(var(--md-sys-dialog-dir-factor, 1) * -50%), -50%) scale(50%);
         }
     }
     &:not([popover]) {
@@ -132,14 +135,24 @@ dialog.micl-dialog-fullscreen {
             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 {
@@ -148,44 +161,39 @@ dialog.micl-dialog-fullscreen {
         flex-shrink: 0;
         align-items: flex-start;
         gap: 16px;
-        padding: var(--md-sys-dialog-padding);
+        padding-block: var(--md-sys-dialog-padding, 24px) var(--md-sys-dialog-headline-space, 16px);
+        padding-inline: var(--md-sys-dialog-padding, 24px);
         background-color: transparent;
 
+        &:has(> .micl-dialog__icon) {
+            align-items: center;
+        }
+        .micl-dialog__icon {
+            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 {
             @include typography.headline-small;
 
             flex: 1 1 100%;
             margin: 0;
+            color: var(--md-sys-color-on-surface);
+        }
+        .micl-dialog__subhead {
+            @include typography.title-medium;
+
+            padding-inline: var(--md-sys-dialog-padding, 24px);
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
-            color: var(--md-sys-color-on-surface);
-        }
-        .micl-dialog__icon {
-            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 {
-            display: none;
+            color: var(--md-sys-color-on-surface)
         }
-        &+ .micl-dialog__actions {
-            padding-block-start: 0;
+        &:has(+ .micl-dialog__actions) {
+            padding-block-end: 0;
         }
     }
-    .micl-dialog__headline:has(> .micl-dialog__icon) {
-        align-items: center;
-    }
-    .micl-dialog__subhead {
-        @include typography.title-medium;
-
-        padding-inline: var(--md-sys-dialog-padding);
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        color: var(--md-sys-color-on-surface)
-    }
     .micl-dialog__supporting-text {
         @include typography.body-medium;
 
@@ -193,7 +201,7 @@ dialog.micl-dialog-fullscreen {
     }
     .micl-dialog__content {
         flex-shrink: 1;
-        padding-inline: var(--md-sys-dialog-padding);
+        padding-inline: var(--md-sys-dialog-padding, 24px);
         background-color: inherit;
         overflow-y: auto;
     }
@@ -202,31 +210,35 @@ dialog.micl-dialog-fullscreen {
         flex-shrink: 0;
         justify-content: flex-end;
         column-gap: 8px;
-        padding: var(--md-sys-dialog-padding);
+        padding: var(--md-sys-dialog-padding, 24px);
         opacity: 1;
-        transition: opacity var(--md-sys-dialog-motion-duration) linear;
+        transition:
+            opacity var(--md-sys-dialog-motion-duration) linear allow-discrete,
+            overlay var(--md-sys-dialog-motion-duration) linear allow-discrete,
+            display var(--md-sys-dialog-motion-duration) linear allow-discrete;
     }
 }
 
-dialog.micl-dialog-fullscreen {
+dialog.micl-dialog.micl-dialog--fullscreen {
     @media (max-width: 560px) {
-        width: 100vw;
-        height: 100vh;
-        max-width: 100vw;
-        border-radius: var(--md-sys-shape-corner-none);
+        inline-size: 100vw;
+        block-size: 100vh;
+        max-inline-size: 100vw;
+        border-radius: var(--md-sys-shape-corner-none, 0px);
         background-color: var(--md-sys-color-surface);
         box-shadow: var(--md-sys-elevation-level0);
         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 {
-            height: 56px;
+            block-size: 56px;
             flex-direction: row;
             align-items: center;
-            gap: 4px;
-            padding: 4px;
+            gap: 8px;
+            padding-block: 4px;
+            padding-inline: 8px 16px;
             animation-name: headlineScroll;
             animation-duration: 1ms;
             animation-timeline: --headlineTimeline;
@@ -245,22 +257,27 @@ dialog.micl-dialog-fullscreen {
             .micl-dialog__icon {
                 display:none;
             }
-            button {
-                display: inline-block;
-
-                &.micl-button {
-                    margin-right: 16px;
-                }
-            }
         }
         .micl-dialog__content {
             scroll-timeline: --headlineTimeline block;
             scroll-timeline: --headlineTimeline vertical;
         }
         .micl-dialog__actions {
+            display: none;
             opacity: 0;
         }
     }
+    @media (min-width: 561px) {
+        .micl-dialog__fullscreen {
+            display: none;
+        }
+    }
+}
+
+@media (max-width: 560px) {
+    body:has(dialog.micl-dialog.micl-dialog--fullscreen:popover-open) {
+        overflow-y: hidden;
+    }
 }
 
 @keyframes headlineScroll {

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 {