material-inspired-component-library 5.0.0 → 6.0.0

package/components/dialog/README.md

@@ -64,10 +64,10 @@ Removing the `popover` attribute creates a more intrusive **modal** dialog. This
 
 - The `closedby="closerequest"` attribute restricts closing methods, typically requiring an explicit action within the dialog.
 
-By default, modal dialogs open in the center of the screen. You can anchor a modal dialog to a control element, causing it to open relative to that element:
+By default, modal dialogs open in the center of the screen. You can anchor a modal dialog to a control element using the `micl-dialog--docked` class and CSS Anchor settings, causing it to open relative to that element:
 
 ```HTML
-<dialog id="mydialog" class="micl-dialog" style="position-anchor:--myanchor">
+<dialog id="mydialog" class="micl-dialog micl-dialog--docked" style="position-anchor:--myanchor">
 </dialog>
 
 <button type="button" popovertarget="mydialog" style="anchor-name:--myanchor">Open Modal Dialog</button>
@@ -96,10 +96,10 @@ A full-screen dialog covers the entire viewport, primarily on smaller screens. O
 ```HTML
 <dialog id="mydialog" class="micl-dialog micl-dialog--fullscreen" closedby="none" popover aria-labelledby="mytitle" aria-describedby="mydesc">
   <form method="dialog" class="micl-dialog__headline">
-    <button type="button" class="micl-iconbutton-s material-symbols-outlined" popovertarget="mydialog" aria-label="Close">close</button>
+    <button type="button" class="micl-dialog__fullscreen micl-iconbutton-s material-symbols-outlined" popovertarget="mydialog" aria-label="Close">close</button>
     <span class="micl-dialog__icon material-symbols-outlined" aria-hidden="true">person</span>
     <h2 id="mytitle">Full-screen dialog</h2>
-    <button class="micl-button-text-s" value="dosave">Save</button>
+    <button class="micl-dialog__fullscreen micl-button-text-s" value="dosave">Save</button>
   </form>
   <div class="micl-dialog__content">
     <span id="mydesc" class="micl-dialog__supporting-text">This dialog covers the whole screen.</span>
@@ -113,9 +113,9 @@ A full-screen dialog covers the entire viewport, primarily on smaller screens. O
 <button type="button" popovertarget="mydialog">Open Full-Screen Dialog</button>
 ```
 
-- In full-screen mode, buttons placed directly within the `micl-dialog__headline` become visible, while the `micl-dialog__icon` and `micl-dialog__actions` at the bottom are hidden.
+- In full-screen mode, `micl-dialog__fullscreen` buttons placed directly within the `micl-dialog__headline` become visible, while the `micl-dialog__icon` and `micl-dialog__actions` at the bottom are hidden.
 
-- When not in full-screen mode (e.g., on wider screens), the `micl-dialog__headline` buttons are hidden, and the standard dialog actions (`micl-dialog__actions`) are visible.
+- When not in full-screen mode (e.g., on wider screens), the `micl-dialog__fullscreen` buttons are hidden, and the standard dialog actions (`micl-dialog__actions`) are visible.
 
 ## Customizations
 You can customize the appearance of the Dialog 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 dialogs.

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/README.md

@@ -67,9 +67,18 @@ A toggle button has two states: **on** (selected) and **off** (unselected). To c
 **Example: A selected toggle button**
 
 ```HTML
-<button type="button" class="micl-iconbutton-outlined-l micl-button--toggle micl-button--selected material-symbols-outlined" aria-label="Control Panel">settings</button>
+<button
+  type="button"
+  id="id0"
+  class="micl-iconbutton-outlined-l micl-button--toggle micl-button--selected material-symbols-outlined"
+  commandfor="id0"
+  command="--micl-toggle"
+  aria-label="Control Panel"
+>settings</button>
 ```
 
+The self-targeting `command` property (`--micl-toggle`) toggles the button state whenever the user interacts with the button.
+
 ## Icons
 The examples above use [Google Material Symbols](https://fonts.google.com/icons). For buttons using these icons, a fill-style of `1` is applied when the button is active or hovered over. To enable this effect, ensure your `link` tag includes `FILL@0..1`.
 

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/iconbutton/index.ts

@@ -19,58 +19,42 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-export const buttonSelector = 'button[popovertarget],button.micl-button--toggle';
+export const buttonSelector = 'button.micl-button--toggle';
 
 export default (() =>
 {
-    const onClick = (event: Event) =>
-    {
-        if (!event.target || !(event.target instanceof HTMLButtonElement)) {
-            return;
-        }
-        if (event.target.popoverTargetElement instanceof HTMLDialogElement) {
-            if (event.target.popoverTargetElement.open) {
-                event.target.popoverTargetElement.close();
-            }
-            else {
-                event.target.popoverTargetElement.showModal();
-            }
-        }
-        if (event.target.classList.contains('micl-button--toggle')) {
-            event.target.classList.add('micl-button--toggled');
-            event.target.classList.toggle('micl-button--selected');
-            if (!!event.target.dataset.miclalt) {
-                [event.target.textContent, event.target.dataset.miclalt] =
-                [event.target.dataset.miclalt, event.target.textContent];
+    return {
+        command: (event: Event): void =>
+        {
+            const target = event.target as HTMLButtonElement;
+
+            if (
+                target.matches(buttonSelector)
+                && !target.disabled
+                && (event as any).command === '--micl-toggle'
+            ) {
+                target.classList.add('micl-button--toggled');
+                target.classList.toggle('micl-button--selected');
             }
-        }
-    };
+        },
 
-    return {
-        initialize: (element: HTMLButtonElement) =>
+        initialize: function(element: HTMLButtonElement): void
         {
             if (
-                !element.matches('button[popovertarget],button.micl-button--toggle')
+                !element.matches(buttonSelector)
                 || element.dataset.miclinitialized
             ) {
                 return;
             }
             element.dataset.miclinitialized = '1';
 
-            if (
-                (element.popoverTargetElement instanceof HTMLDialogElement)
-                && !element.popoverTargetElement.hasAttribute('popover')
-            ) {
-                element.addEventListener('click', onClick);
-            }
-            else if (element.classList.contains('micl-button--toggle')) {
-                element.addEventListener('click', onClick);
-            }
+            element.addEventListener('command', this.command);
         },
-        cleanup: (element: HTMLButtonElement) =>
+
+        cleanup: function(element: HTMLButtonElement): void
         {
-            if (element.matches('button[popovertarget],button.micl-button--toggle')) {
-                document.removeEventListener('click', onClick);
+            if (element.matches(buttonSelector)) {
+                document.removeEventListener('command', this.command);
                 delete element.dataset.miclinitialized;
             }
         }

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 {