material-inspired-component-library 3.0.2 → 4.0.0

package/components/checkbox/index.scss

@@ -24,240 +24,202 @@
 @use '../../styles/typography';
 
 :root {
-    --md-sys-checkbox-container-size: 18px;
     --md-sys-checkbox-border-width: 2px;
-    --md-sys-checkbox-selected-icon: "\2A3D";
-    --md-sys-checkbox-state-layer-radius: 20px;
-}
-
-@property --checkbox-outline-color {
-    syntax: '<color>';
-    initial-value: transparent;
-    inherits: false;
-}
-@property --checkbox-state-layer-color {
-    syntax: '<color>';
-    initial-value: transparent;
-    inherits: false;
-}
-@property --checkbox-container-color {
-    syntax: '<color>';
-    initial-value: transparent;
-    inherits: false;
-}
-@property --checkbox-container-border-color {
-    syntax: '<color>';
-    initial-value: transparent;
-    inherits: false;
+    --md-sys-checkbox-check-thickness: 2px;
+    --md-sys-checkbox-container-size: 18px;
+    --md-sys-checkbox-state-layer-size: 40px;
 }
 
 input[type=checkbox].micl-checkbox {
     --md-sys-checkbox-motion-duration: #{motion.$md-sys-motion-expressive-slow-effects-duration};
-    --checkbox-container-color: transparent;
-    --checkbox-container-border-color: var(--md-sys-color-on-surface-variant);
+    --md-sys-checkbox-motion-duration-reverse: #{motion.$md-sys-motion-expressive-default-effects-duration};
+    --md-sys-checkbox-motion-spatial: #{motion.$md-sys-motion-expressive-fast-spatial};
+
+    --statelayer-color: var(--md-sys-color-on-surface);
 
     appearance: none;
     box-sizing: border-box;
     position: relative;
-    width: var(--md-sys-target-size);
-    min-width: var(--md-sys-target-size);
-    height: var(--md-sys-target-size);
-    min-height: var(--md-sys-target-size);
+    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);
     margin: 0;
-    padding: calc((var(--md-sys-target-size) - var(--md-sys-checkbox-container-size)) / 2);
-    border-radius: calc(var(--md-sys-checkbox-border-width) + ((var(--md-sys-target-size) - var(--md-sys-checkbox-container-size)) / 2));
-    background-clip: border-box, border-box, content-box, content-box, content-box;
-    background-image:
-        radial-gradient(
-            circle var(--md-sys-checkbox-state-layer-radius),
-            transparent 0%,
-            transparent calc(var(--md-sys-checkbox-state-layer-radius) - var(--md-sys-state-focus-indicator-thickness)),
-            var(--checkbox-outline-color) calc(var(--md-sys-checkbox-state-layer-radius) - var(--md-sys-state-focus-indicator-thickness)),
-            var(--checkbox-outline-color) 100%,
-            transparent
-        ),
-        radial-gradient(
-            circle calc(var(--md-sys-checkbox-state-layer-radius) - var(--md-sys-state-focus-indicator-thickness)),
-            var(--checkbox-state-layer-color) 0%,
-            var(--checkbox-state-layer-color) 100%,
-            transparent
-        ),
-        linear-gradient(
-            to right,
-            var(--checkbox-container-color) 0%,
-            var(--checkbox-container-color) 100%,
-            transparent
-        ),
-        linear-gradient(
-            to bottom,
-            var(--checkbox-container-border-color) var(--md-sys-checkbox-border-width),
-            transparent var(--md-sys-checkbox-border-width),
-            transparent 16px,
-            var(--checkbox-container-border-color) 0px,
-            var(--checkbox-container-border-color) var(--md-sys-checkbox-container-size),
-            transparent var(--md-sys-checkbox-container-size)
-        ),
-        linear-gradient(
-            to right,
-            var(--checkbox-container-border-color) var(--md-sys-checkbox-border-width),
-            transparent var(--md-sys-checkbox-border-width),
-            transparent 16px,
-            var(--checkbox-container-border-color) 0px,
-            var(--checkbox-container-border-color) var(--md-sys-checkbox-container-size),
-            transparent var(--md-sys-checkbox-container-size)
-        );
-    background-origin: border-box;
-    background-position: center, center, center, center, center;
-    background-repeat: no-repeat;
-    background-size:
-        auto,
-        auto,
-        var(--md-sys-checkbox-container-size) var(--md-sys-checkbox-container-size),
-        var(--md-sys-checkbox-container-size) var(--md-sys-checkbox-container-size),
-        var(--md-sys-checkbox-container-size) var(--md-sys-checkbox-container-size),
-        var(--md-sys-checkbox-container-size) var(--md-sys-checkbox-container-size);
-    clip-path: circle(var(--md-sys-checkbox-state-layer-radius));
-    transition:
-        --checkbox-outline-color var(--md-sys-checkbox-motion-duration),
-        --checkbox-state-layer-color var(--md-sys-checkbox-motion-duration),
-        --checkbox-container-color var(--md-sys-checkbox-motion-duration) var(--md-sys-motion-duration-short4),
-        --checkbox-container-border-color var(--md-sys-checkbox-motion-duration);
-
-    &.micl-checkbox--error {
-        --checkbox-container-border-color: var(--md-sys-color-error);
-    }
-    &::after {
-        content: var(--md-sys-checkbox-selected-icon);
+    border: calc((var(--md-sys-target-size) - var(--md-sys-checkbox-state-layer-size)) / 2) solid transparent;
+    background-clip: content-box;
+    background-color: transparent;
+    -webkit-tap-highlight-color: transparent;
+    border-radius: var(--md-sys-shape-corner-full);
+    outline-offset: -4px;
+
+    &::before {
+        --md-sys-checkbox-check-width: calc(var(--md-sys-checkbox-container-size) - 3px);
+        --md-sys-checkbox-check-height: calc(0.4667 * var(--md-sys-checkbox-check-width));
+
+        content: "";
         box-sizing: border-box;
         position: absolute;
-        width: calc(var(--md-sys-checkbox-container-size) + 2px);
-        height: 0;
+        inline-size: var(--md-sys-checkbox-check-width);
+        block-size: 0;
         inset: 0;
-        inset-block-start: 15px;
-        inset-inline-start: 8px;
-        margin: 4px;
-        font: 400 26px/2px var(--md-ref-typeface-plain);
-        color: var(--md-sys-color-on-primary);
-        text-align: center;
+        inset-block-start: calc(-0.25 * var(--md-sys-checkbox-container-size));
+        inset-inline-start: 1px;
+        margin: auto;
+        border-block-end: var(--md-sys-checkbox-check-thickness) var(--md-sys-color-on-primary) solid;
+        border-inline-start: var(--md-sys-checkbox-check-thickness) var(--md-sys-color-on-primary) solid;
         transform: rotate(-45deg);
-        transform-origin: top;
-        clip-path: rect(0px 4.5px 18px 0px);
-        overflow: hidden;
+        transform-origin: center;
+        clip-path: rect(0 2px 0 0);
+        z-index: 1;
         transition:
+          block-size var(--md-sys-motion-duration-short3) var(--md-sys-motion-duration-short3) motion.$md-sys-motion-easing-standard-decelerate,
           clip-path var(--md-sys-motion-duration-short3) motion.$md-sys-motion-easing-standard-accelerate,
-          height var(--md-sys-motion-duration-short3) var(--md-sys-motion-duration-short3) motion.$md-sys-motion-easing-standard-decelerate;
-    }
-    @supports (-moz-appearance:none) {
-        &::after {
-            inset-block-start: 16px;
-            inset-inline-start: 7px;
-            font: 400 27px/3px var(--md-ref-typeface-plain);
-        }
+          inset-block-start 0ms linear var(--md-sys-motion-duration-short3),
+          inset-inline-start 0ms linear var(--md-sys-motion-duration-short3),
+          border-inline-start-width 0ms linear var(--md-sys-motion-duration-short3),
+          transform 0ms linear var(--md-sys-motion-duration-short3);
     }
-    &:checked {
-        --checkbox-container-color: var(--md-sys-color-primary);
-        --checkbox-container-border-color: transparent;
+    &::after {
+        --md-sys-checkbox-background-color: transparent;
+        --md-sys-checkbox-border-color: var(--md-sys-color-on-surface-variant);
+
+        content: "";
+        box-sizing: border-box;
+        position: absolute;
+        inline-size: var(--md-sys-checkbox-container-size);
+        block-size: var(--md-sys-checkbox-container-size);
+        inset: 0;
+        margin: auto;
+        border: var(--md-sys-checkbox-border-width) solid var(--md-sys-checkbox-border-color);
+        border-radius: 2px;
+        background-color: var(--md-sys-checkbox-background-color);
         transition:
-            --checkbox-container-color var(--md-sys-motion-duration-medium2),
-            --checkbox-container-border-color var(--md-sys-motion-duration-medium2);
+            background-color var(--md-sys-checkbox-motion-duration-reverse) motion.$md-sys-motion-easing-emphasized var(--md-sys-checkbox-motion-duration-reverse),
+            border-color var(--md-sys-checkbox-motion-duration-reverse) motion.$md-sys-motion-easing-emphasized var(--md-sys-checkbox-motion-duration-reverse);
+    }
+    &:checked,
+    &:indeterminate {
+        --statelayer-color: var(--md-sys-color-primary);
 
-        &.micl-checkbox--error {
-            --checkbox-container-color: var(--md-sys-color-error);
+        &::before {
+            block-size: var(--md-sys-checkbox-check-height);
+            clip-path: rect(0 calc(var(--md-sys-checkbox-container-size) - 5px) 18px 0);
+            transition:
+                block-size var(--md-sys-motion-duration-short3) var(--md-sys-checkbox-motion-spatial),
+                clip-path var(--md-sys-motion-duration-long4) var(--md-sys-motion-duration-short3) var(--md-sys-checkbox-motion-spatial);
         }
         &::after {
-            height: 8px;
-            clip-path: rect(0px 16px 18px 0px);
+            --md-sys-checkbox-background-color: var(--md-sys-color-primary);
+            --md-sys-checkbox-border-color: var(--md-sys-color-primary);
+
             transition:
-                height var(--md-sys-motion-duration-short3) motion.$md-sys-motion-easing-standard-accelerate,
-                clip-path var(--md-sys-motion-duration-long4) var(--md-sys-motion-duration-short3) linear(motion.$md-sys-motion-spring-default-spatial);
+                background-color var(--md-sys-checkbox-motion-duration) linear,
+                border-color var(--md-sys-checkbox-motion-duration) motion.$md-sys-motion-easing-emphasized;
+        }
+    }
+    &:indeterminate::before {
+        inset-inline-start: 2px;
+        border-inline-start-width: 0px;
+        transform: rotate(0deg);
+    }
+    &.micl-checkbox--error:not(:disabled) {
+        --statelayer-color: var(--md-sys-color-error);
+
+        &::after {
+            --md-sys-checkbox-border-color: var(--md-sys-color-error);
+        }
+        &:checked,
+        &:indeterminate {
+            &:hover,
+            &:focus-visible,
+            &:active {
+                --statelayer-color: var(--md-sys-color-error);
+            }
+            &::before {
+                color: var(--md-sys-color-on-error);
+            }
+            &::after {
+                --md-sys-checkbox-background-color: var(--md-sys-color-error);
+            }
+        }
+        &:not(:checked):not(:indeterminate) {
+            &:hover,
+            &:focus-visible,
+            &:active {
+                --statelayer-color: var(--md-sys-color-error);
+
+                &::after {
+                    --md-sys-checkbox-border-color: var(--md-sys-color-error);
+                }
+            }
         }
     }
     &:not(:disabled) {
         --micl-ripple: 1;
 
+        background-image:
+            radial-gradient(circle at var(--micl-x, center) var(--micl-y, center), transparent 0%, rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)) 10%, transparent 10%),
+            linear-gradient(rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)));
+        background-repeat: no-repeat;
+        background-size: 10000%, 100%;
         cursor: pointer;
+        transition:
+            background-size 3000ms,
+            --statelayer-opacity var(--md-sys-checkbox-motion-duration) linear;
 
         &:hover {
-            &:checked {
-                --checkbox-outline-color: rgb(from var(--md-sys-color-primary) r g b / var(--md-sys-state-hover-state-layer-opacity));
-                --checkbox-state-layer-color: rgb(from var(--md-sys-color-primary) r g b / var(--md-sys-state-hover-state-layer-opacity));
+            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
 
-                &.micl-checkbox--error {
-                    --checkbox-outline-color: rgb(from var(--md-sys-color-error) r g b / var(--md-sys-state-hover-state-layer-opacity));
-                    --checkbox-state-layer-color: rgb(from var(--md-sys-color-error) r g b / var(--md-sys-state-hover-state-layer-opacity));
-                }
-            }
-            &:not(:checked) {
-                --checkbox-container-border-color: var(--md-sys-color-on-surface);
-                --checkbox-outline-color: rgb(from var(--md-sys-color-on-surface) r g b / var(--md-sys-state-hover-state-layer-opacity));
-                --checkbox-state-layer-color: rgb(from var(--md-sys-color-on-surface) r g b / var(--md-sys-state-hover-state-layer-opacity));
-
-                &.micl-checkbox--error {
-                    --checkbox-container-border-color: var(--md-sys-color-error);
-                    --checkbox-outline-color: rgb(from var(--md-sys-color-error) r g b / var(--md-sys-state-hover-state-layer-opacity));
-                    --checkbox-state-layer-color: rgb(from var(--md-sys-color-error) r g b / var(--md-sys-state-hover-state-layer-opacity));
-                }
+            &:not(:checked):not(:indeterminate)::after {
+                --md-sys-checkbox-border-color: var(--md-sys-color-on-surface);
             }
         }
         &:focus-visible {
-            --checkbox-outline-color: var(--md-sys-color-secondary);
+            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);
 
-            &:checked {
-                --checkbox-state-layer-color: rgb(from var(--md-sys-color-primary) r g b / var(--md-sys-state-focus-state-layer-opacity));
+            outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
 
-                &.micl-checkbox--error {
-                    --checkbox-state-layer-color: rgb(from var(--md-sys-color-error) r g b / var(--md-sys-state-focus-state-layer-opacity));
-                }
-            }
-            &:not(:checked) {
-                --checkbox-container-border-color: var(--md-sys-color-on-surface);
-                --checkbox-state-layer-color: rgb(from var(--md-sys-color-on-surface) r g b / var(--md-sys-state-focus-state-layer-opacity));
-
-                &.micl-checkbox--error {
-                    --checkbox-container-border-color: var(--md-sys-color-error);
-                    --checkbox-state-layer-color: rgb(from var(--md-sys-color-error) r g b / var(--md-sys-state-focus-state-layer-opacity));
-                }
+            &:not(:checked):not(:indeterminate)::after {
+                --md-sys-checkbox-border-color: var(--md-sys-color-on-surface);
             }
         }
         &:active {
-            &:checked {
-                --checkbox-outline-color: rgb(from var(--md-sys-color-on-surface) r g b / var(--md-sys-state-pressed-state-layer-opacity));
-                --checkbox-state-layer-color: rgb(from var(--md-sys-color-on-surface) r g b / var(--md-sys-state-pressed-state-layer-opacity));
+            --statelayer-color: var(--md-sys-color-on-surface);
+            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
 
-                &.micl-checkbox--error {
-                    --checkbox-outline-color: rgb(from var(--md-sys-color-error) r g b / var(--md-sys-state-pressed-state-layer-opacity));
-                    --checkbox-state-layer-color: rgb(from var(--md-sys-color-error) r g b / var(--md-sys-state-pressed-state-layer-opacity));
-                }
-            }
-            &:not(:checked) {
-                --checkbox-container-border-color: var(--md-sys-color-on-surface);
-                --checkbox-outline-color: rgb(from var(--md-sys-color-primary) r g b / var(--md-sys-state-pressed-state-layer-opacity));
-                --checkbox-state-layer-color: rgb(from var(--md-sys-color-primary) r g b / var(--md-sys-state-pressed-state-layer-opacity));
+            background-size: 0%, 100%;
+            transition: background-size 0ms;
 
-                &.micl-checkbox--error {
-                    --checkbox-container-border-color: var(--md-sys-color-error);
-                    --checkbox-outline-color: rgb(from var(--md-sys-color-error) r g b / var(--md-sys-state-pressed-state-layer-opacity));
-                    --checkbox-state-layer-color: rgb(from var(--md-sys-color-error) r g b / var(--md-sys-state-pressed-state-layer-opacity));
+            &:not(:checked):not(:indeterminate) {
+                --statelayer-color: var(--md-sys-color-primary);
+
+                &::after {
+                    --md-sys-checkbox-border-color: var(--md-sys-color-on-surface);
                 }
             }
         }
     }
     &:disabled {
-        --checkbox-container-border-color: var(--md-sys-color-on-surface);
         opacity: 38%;
 
-        &:checked {
-            --checkbox-container-color: var(--md-sys-color-on-surface);
-
-            &::after {
+        &:checked,
+        &:indeterminate {
+            &::before {
                 color: var(--md-sys-color-surface);
             }
+            &::after {
+                --md-sys-checkbox-background-color: var(--md-sys-color-on-surface);
+            }
+        }
+        &::after {
+            --md-sys-checkbox-border-color: var(--md-sys-color-on-surface);
         }
     }
 }
 
 input[type=checkbox].micl-checkbox:not(:disabled) + label,
 label:has(+ input[type=checkbox].micl-checkbox:not(:disabled)) {
+    -webkit-tap-highlight-color: transparent;
     cursor: pointer;
 }
 input[type=checkbox].micl-checkbox + label,
@@ -266,12 +228,15 @@ label:has(+ input[type=checkbox].micl-checkbox) {
 }
 
 [dir=rtl] input[type=checkbox].micl-checkbox {
-    &::after {
-        inset-inline-start: 9px;
+    &::before {
+        clip-path: rect(0 18px 8px 16px);
+    }
+    &:checked::before {
+        clip-path: rect(0 18px 8px 2px);
         transform: rotate(45deg);
-        clip-path: rect(0px 18px 7.5px 16px);
     }
-    &:checked::after {
-        clip-path: rect(0px 18px 8px 6px);
+    &:indeterminate::before {
+        clip-path: rect(0 18px 8px 2px);
+        transform: rotate(0deg);
     }
 }

package/components/checkbox/index.ts

@@ -0,0 +1,148 @@
+//
+// 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.
+
+export const checkboxGroupSelector = '.micl-checkbox-group';
+
+export default (() =>
+{
+    const getParentCheckbox = (checkboxGroup: HTMLElement): HTMLInputElement | null =>
+    {
+        const parentCheckbox = checkboxGroup.querySelector<HTMLInputElement>('.micl-checkbox__parent');
+        return (parentCheckbox?.closest(checkboxGroupSelector) === checkboxGroup) ? parentCheckbox : null;
+    };
+
+    const refreshParentCheckbox = (checkboxGroup: HTMLElement): boolean =>
+    {
+        const parentCheckbox = getParentCheckbox(checkboxGroup);
+        if (!parentCheckbox) {
+            return false;
+        }
+        let nrCheckboxes = 0,
+            nrCheckedCheckboxes = 0;
+
+        checkboxGroup.querySelectorAll<HTMLInputElement>(
+            'input[type="checkbox"].micl-checkbox'
+        ).forEach(cb =>
+        {
+            if (cb !== parentCheckbox) {
+                const group = cb.closest(checkboxGroupSelector) as HTMLElement;
+                if (group === checkboxGroup) {
+                    nrCheckboxes++;
+                    if (cb.checked && !cb.indeterminate) {
+                        nrCheckedCheckboxes++;
+                    }
+                }
+                else if (
+                    cb.classList.contains('micl-checkbox__parent')
+                    && (group?.parentElement?.closest(checkboxGroupSelector) === checkboxGroup)
+                ) {
+                    nrCheckboxes++;
+                    if (refreshParentCheckbox(group)) {
+                        nrCheckedCheckboxes++;
+                    }
+                }
+            }
+        });
+
+        if (nrCheckedCheckboxes === 0) {
+            parentCheckbox.checked = false;
+            parentCheckbox.indeterminate = false;
+        }
+        else if (nrCheckedCheckboxes === nrCheckboxes) {
+            parentCheckbox.checked = true;
+            parentCheckbox.indeterminate = false;
+        }
+        else {
+            parentCheckbox.checked = true;
+            parentCheckbox.indeterminate = true;
+        }
+
+        return nrCheckedCheckboxes === nrCheckboxes;
+    };
+
+    const updateCheckboxGroup = (checkboxGroup: HTMLElement, checked: boolean): void =>
+    {
+        checkboxGroup.querySelectorAll<HTMLInputElement>(
+            'input[type="checkbox"].micl-checkbox'
+        ).forEach(cb =>
+        {
+            const group = cb.closest(checkboxGroupSelector) as HTMLElement;
+            if (group === checkboxGroup) {
+                cb.checked = checked;
+            }
+            else if (
+                cb.classList.contains('micl-checkbox__parent')
+                && (group?.parentElement?.closest(checkboxGroupSelector) === checkboxGroup)
+            ) {
+                cb.checked = checked;
+                updateCheckboxGroup(group, checked);
+            }
+        });
+    };
+
+    const refreshCheckboxGroup = (checkboxGroup: HTMLElement, input: HTMLInputElement | null): void =>
+    {
+        const parentCheckbox = getParentCheckbox(checkboxGroup);
+        if (!parentCheckbox) {
+            return;
+        }
+
+        if (input === parentCheckbox) {
+            updateCheckboxGroup(checkboxGroup, input.checked);
+        }
+
+        let parentCheckboxGroup,
+            cbg = checkboxGroup;
+        do {
+            parentCheckboxGroup = cbg;
+            cbg = cbg.parentElement?.closest(checkboxGroupSelector) as HTMLElement;
+        }
+        while (cbg);
+
+        refreshParentCheckbox(parentCheckboxGroup);
+    };
+
+    return {
+        initialize: (element: HTMLElement): void =>
+        {
+            if (
+                !element.matches(checkboxGroupSelector)
+                || element.dataset.miclinitialized
+            ) {
+                return;
+            }
+            element.dataset.miclinitialized = '1';
+
+            element.addEventListener('change', event =>
+            {
+                const input = event.target as HTMLInputElement;
+                if (!input.classList.contains('micl-checkbox')) {
+                    return;
+                }
+                event.stopPropagation();
+
+                refreshCheckboxGroup(element, input);
+            });
+
+            refreshCheckboxGroup(element, null);
+        }
+    };
+})();

package/components/dialog/README.md

@@ -1,5 +1,5 @@
 # Dialog
-This component implements the the [Material Design 3 Expressive Dialog](https://m3.material.io/components/dialogs/overview) design.
+This component implements the [Material Design 3 Expressive Dialog](https://m3.material.io/components/dialogs/overview) design.
 
 ## Basic Usage
 
@@ -28,11 +28,16 @@ Import the dialog styles into your project:
 @use "material-inspired-component-library/dist/dialog";
 ```
 
+Or import all MICL styles:
+```CSS
+@use "material-inspired-component-library/styles";
+```
+
 ### JavaScript
 No custom JavaScript is required for the core functionality of this component, as the native popover attribute handles the open/close behavior.
 
-### Demo
-A live example of the [Dialog component](https://henkpb.github.io/micl/dialog.html) is available for you to interact with.
+### Live Demo
+A live example of the [Dialog component](https://henkpb.github.io/micl/dialog.html) is available to interact with.
 
 ## Variants
 When dialogs with the `popover` attribute are opened, they animate from the control element to the center of the screen. They can be easily dismissed by clicking outside or pressing <kbd>Esc</kbd>.

package/components/dialog/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/layout';
 @use '../../styles/elevation';
 @use '../../styles/motion';
 @use '../../styles/shapes';

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. Dividers are thin lines that separate content into distinct sections.
+This component implements 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
 
@@ -17,11 +17,16 @@ Import the divider styles into your project:
 @use "material-inspired-component-library/dist/divider";
 ```
 
+Or import all MICL styles:
+```CSS
+@use "material-inspired-component-library/styles";
+```
+
 ### JavaScript
 No custom JavaScript is required for the core functionality of this component.
 
-### Demo
-A live example of the [Divider component](https://henkpb.github.io/micl/divider.html) is available for you to interact with.
+### Live Demo
+A live example of the [Divider component](https://henkpb.github.io/micl/divider.html) is available to interact with.
 
 ## Variants
 The Divider component offers five CSS classes for different divider styles:

package/components/iconbutton/README.md

@@ -1,5 +1,5 @@
 # Icon button
-This component implements the the [Material Design 3 Expressive Icon button](https://m3.material.io/components/icon-buttons/overview) design. Icon buttons allow users to perform a single action with a minimal visual footprint.
+This component implements the [Material Design 3 Expressive Icon button](https://m3.material.io/components/icon-buttons/overview) design. Icon buttons allow users to perform a single action with a minimal visual footprint.
 
 ## Basic Usage
 
@@ -19,6 +19,11 @@ Import the icon button styles into your project:
 @use "material-inspired-component-library/dist/iconbutton";
 ```
 
+Or import all MICL styles:
+```CSS
+@use "material-inspired-component-library/styles";
+```
+
 ### JavaScript
 This component requires JavaScript for interactive features like the **toggle logic**:
 
@@ -28,8 +33,8 @@ import micl from "material-inspired-component-library/dist/micl";
 
 This will initialize any Icon button component, including those that will be added to the DOM later on.
 
-### Demo
-A live example of the [Icon button component](https://henkpb.github.io/micl/iconbutton.html) is available for you to interact with.
+### Live Demo
+A live example of the [Icon button component](https://henkpb.github.io/micl/iconbutton.html) is available to interact with.
 
 ## Variants
 Icon buttons come in **five sizes**: extra small (`xs`), small (`s`), medium (`m`), large (`l`), and extra large (`xl`). To specify a size, append the appropriate postfix to the button's style class:

package/components/iconbutton/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/layout';
 @use '../../styles/elevation';
 @use '../../styles/motion';
 @use '../../styles/shapes';
@@ -61,9 +62,10 @@ button.micl-iconbutton-outlined-xl {
         linear-gradient(rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)));
     background-repeat: no-repeat;
     background-size: 10000%, 100%;
+    -webkit-tap-highlight-color: transparent;
     color: var(--md-sys-color-on-surface-variant);
-    cursor: pointer;
     font-variation-settings: 'FILL' 0;
+    cursor: pointer;
     transition:
         border-radius var(--md-sys-iconbutton-motion-duration) var(--md-sys-iconbutton-motion-effects),
         font-variation-settings var(--md-sys-iconbutton-motion-duration) linear,