material-inspired-component-library 3.0.2 → 3.1.0

package/README.md

@@ -84,6 +84,7 @@ A separate CSS file, based on the [Material Design Layout Foundation](https://m3
 ## Available components ✅
 The library currently consists of the following components:
 - [x] [Accordion](components/accordion/README.md)
+- [ ] [Alert](README.md)
 - [x] [App Bar](components/appbar/README.md)
 - [x] [Badge](components/badge/README.md)
 - [x] [Bottom sheet](components/bottomsheet/README.md)
@@ -100,39 +101,33 @@ The library currently consists of the following components:
 - [x] [Select](components/select/README.md)
 - [x] [Side sheet](components/sidesheet/README.md)
 - [x] [Slider](components/slider/README.md)
+- [ ] [Stepper](README.md)
 - [x] [Switch](components/switch/README.md)
 - [x] [Text field](components/textfield/README.md)
 
 ## Change Log ↪️
 
-### 3.0.0 (24.09.2025)
-**Features**
+### 3.1.0 (19.10.2025)
+- **Checkbox**: Refactoring + add support for checkbox groups.
 
+### 3.0.0 (24.09.2025)
+- **BREAKING:** Use `<nav>` instead of `<div>` for Navigation rail.
 - **App Bar**: New component.
 - **Layout**: Support for adaptive layout.
-- Improved handling of target area for small buttons.
-- **BREAKING:** Use `<nav>` instead of `<div>` for Navigation rail.
+- **Buttons**: Improved handling of target area for small buttons.
 
 ### 2.0.0 (04.09.2025)
-**Features**
-
 - **Navigation rail**: New component.
 - **Badge**: New component.
 - **Ripple**: Now uses custom CSS properties.
 
 ### 1.3.0 (23.08.2025)
-**Features**
-
 - **Menu**: Added support for submenus.
 - **Ripple**: The ripple-effect does not use a pseudo-element anymore.
 - **State layer**: Rewrite for simpler styling.
 
 ### 1.2.0 (17.08.2025)
-**Features**
-
 - **List**: Added support for switches inside list items.
 
 ### 1.1.0 (12.08.2025)
-**Features**
-
 - **Text field**: Added support for multi-line text fields.

package/components/alert/index.scss

@@ -0,0 +1,120 @@
+//
+// Copyright © 2025 Hermana AS
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+@use '../../styles/shapes';
+@use '../../styles/typography';
+
+:root {
+    --md-sys-alert-padding: 16px;
+    --md-sys-alert-space: 16px;
+}
+
+.micl-alert-filled,
+.micl-alert-tonal,
+.micl-alert-outlined {
+    --md-sys-alert-background-color: inherit;
+    --md-sys-alert-color: inherit;
+
+    box-sizing: border-box;
+    display: flex;
+    inline-size: 100%;
+    padding: var(--md-sys-alert-padding, 16px);
+    column-gap: var(--md-sys-alert-space, 8px);
+    border: none;
+    outline: none;
+    border-radius: var(--md-sys-shape-corner-small, 8px);
+    background-color: var(--md-sys-alert-background-color);
+    color: var(--md-sys-alert-color);
+
+    .micl-alert__icon {
+        block-size: var(--md-sys-layout-icon-size, 24px);
+        inline-size: var(--md-sys-layout-icon-size, 24px);
+        font-size: var(--md-sys-layout-icon-size, 24px);
+    }
+    .micl-alert__text {
+        display: flex;
+        flex-direction: column;
+        row-gap: 8px;
+
+        h1, h2, h3, h4, h5, h6, .micl-heading {
+            @include typography.title-medium;
+
+            margin: 0;
+        }
+        .micl-alert__supporting-text {
+            @include typography.body-medium;
+
+            margin: 0;
+        }
+    }
+}
+
+.micl-alert-filled {
+    --md-sys-alert-background-color: var(--md-sys-color-error);
+    --md-sys-alert-color: var(--md-sys-color-on-error);
+
+    &.micl-alert--primary {
+        --md-sys-alert-background-color: var(--md-sys-color-primary);
+        --md-sys-alert-color: var(--md-sys-color-on-primary);
+    }
+    &.micl-alert--secondary {
+        --md-sys-alert-background-color: var(--md-sys-color-secondary);
+        --md-sys-alert-color: var(--md-sys-color-on-secondary);
+    }
+    &.micl-alert--tertiary {
+        --md-sys-alert-background-color: var(--md-sys-color-tertiary);
+        --md-sys-alert-color: var(--md-sys-color-on-tertiary);
+    }
+}
+
+.micl-alert-tonal {
+    --md-sys-alert-background-color: var(--md-sys-color-error-container);
+    --md-sys-alert-color: var(--md-sys-color-on-error-container);
+
+    &.micl-alert--primary {
+        --md-sys-alert-background-color: var(--md-sys-color-primary-container);
+        --md-sys-alert-color: var(--md-sys-color-on-primary-container);
+    }
+    &.micl-alert--secondary {
+        --md-sys-alert-background-color: var(--md-sys-color-secondary-container);
+        --md-sys-alert-color: var(--md-sys-color-on-secondary-container);
+    }
+    &.micl-alert--tertiary {
+        --md-sys-alert-background-color: var(--md-sys-color-tertiary-container);
+        --md-sys-alert-color: var(--md-sys-color-on-tertiary-container);
+    }
+}
+
+.micl-alert-outlined {
+    --md-sys-alert-color: var(--md-sys-color-error);
+
+    border: 1px solid var(--md-sys-alert-color);
+
+    &.micl-alert--primary {
+        --md-sys-alert-color: var(--md-sys-color-primary);
+    }
+    &.micl-alert--secondary {
+        --md-sys-alert-color: var(--md-sys-color-secondary);
+    }
+    &.micl-alert--tertiary {
+        --md-sys-alert-color: var(--md-sys-color-tertiary);
+    }
+}

package/components/checkbox/README.md

@@ -1,5 +1,5 @@
 # Checkbox
-This component implements the the [Material Design 3 Expressive Checkbox](https://m3.material.io/components/checkbox/overview) design.
+This component implements the the [Material Design 3 Expressive Checkbox](https://m3.material.io/components/checkbox/overview) design. A checkbox allows a user to select one or more options from a number of choices.
 
 ## Basic Usage
 
@@ -7,7 +7,7 @@ This component implements the the [Material Design 3 Expressive Checkbox](https:
 To add a basic checkbox, use the `<input type="checkbox">` element with the `micl-checkbox` class, paired with a `<label>` element:
 
 ```HTML
-<input type="checkbox" id="mycheckbox" class="micl-checkbox" value="foo">
+<input type="checkbox" id="mycheckbox" class="micl-checkbox">
 <label for="mycheckbox">Bar</label>
 ```
 
@@ -19,13 +19,11 @@ Import the checkbox styles into your project:
 ```
 
 ### JavaScript
-This component requires JavaScript to support checking and unchecking using a keyboard:
+This component requires JavaScript to support checkbox groups:
 
-```JavaScript
-import micl from "material-inspired-component-library/dist/micl";
-```
+`import micl from "material-inspired-component-library/dist/micl";`
 
-This will initialize any Checkbox component, including those that will be added to the DOM later on.
+This will initialize any checkbox group, including those that will be added to the DOM later on.
 
 ### Demo
 A live example of the [Checkbox component](https://henkpb.github.io/micl/checkbox.html) is available for you to interact with.
@@ -37,20 +35,60 @@ A checkbox can be disabled by adding the `disabled` attribute to the `<input>` e
 
 The Checkbox component respects the `dir` global attribute, automatically adjusting its layout for right-to-left (RTL) languages when `dir="rtl"` is applied to an ancestor element.
 
+The component applies `cursor: pointer` and the color role **on surface** to the `<label>` element immediately preceding or following an `<input type="checkbox">` with the `micl-checkbox` class. You are encouraged to customize these CSS settings to match your design system.
+
+## Checkbox group
+You can establish a parent-child relationship among checkboxes. To do this, wrap the entire set of related checkboxes in an element using the `micl-checkbox-group` class. The designated parent checkbox must also include the `micl-checkbox__parent` class.
+
+```HTML
+<div class="micl-checkbox-group">
+  <input type="checkbox" id="cb0" class="micl-checkbox micl-checkbox__parent" value="c0">
+  <label for="cb0">Choices</label>
+  <input type="checkbox" id="cb1" class="micl-checkbox" value="c1">
+  <label for="cb1">First Choice</label>
+  <input type="checkbox" id="cb2" class="micl-checkbox" checked value="c2">
+  <label for="cb2">Second Choice</label>
+  ...
+</div>
+```
+
+To visually improve the layout, such as by indenting child checkboxes, use wrapper elements and utility classes:
+
+```HTML
+<div class="micl-checkbox-group">
+  <div class="micl-flex--vcenter">
+    <input type="checkbox" id="cb0" class="micl-checkbox micl-checkbox__parent" value="c0">
+    <label for="cb0">Choices</label>
+  </div>
+  <div style="padding-inline-start:16px">
+    <div class="micl-flex--vcenter">
+      <input type="checkbox" id="cb1" class="micl-checkbox" value="c1">
+      <label for="cb1">First Choice</label>
+    </div>
+    <div class="micl-flex--vcenter">
+      <input type="checkbox" id="cb2" class="micl-checkbox" checked value="c2">
+      <label for="cb2">Second Choice</label>
+    </div>
+    ...
+  </div>
+</div>
+```
+
+Note that checkbox groups support **nesting**, allowing a `micl-checkbox-group` to contain other `micl-checkbox-group` elements for multi-level hierarchies.
+
 ## Customizations
 You can customize the appearance of the Checkbox 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 checkboxes.
 
 | Variable name | Default Value | Description |
 | ------------- | ------------- | ----------- |
 | --md-sys-checkbox-border-width | 2px | Controls the thickness of the checkbox's border |
+| --md-sys-checkbox-check-thickness | 2px | The thickness of the checkmark |
 | --md-sys-checkbox-container-size | 18px | Defines the size of the checkbox itself |
-| --md-sys-checkbox-selected-icon | \2A3D | The character used as the checkmark for the checkbox |
-| --md-sys-checkbox-state-layer-radius | 20px | Sets the radius of the interactive area that indicates the component's current state (e.g., hover, focus, press) |
 
-**Example: Changing the size of the interactive area**
+**Example: Changing the border width of a checkbox**
 
 ```HTML
-<div style="--md-sys-checkbox-state-layer-radius:24px">
+<div style="--md-sys-checkbox-border-width:1px">
   <input type="checkbox" id="mycheckbox" class="micl-checkbox">
   <label for="mycheckbox">Checkbox</label>
 </div>

package/components/checkbox/index.scss

@@ -24,234 +24,194 @@
 @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);
+    border: calc((var(--md-sys-target-size) - var(--md-sys-checkbox-state-layer-size)) / 2) solid transparent;
+    background-clip: content-box;
+    background-color: transparent;
+    border-radius: var(--md-sys-shape-corner-full);
+    outline-offset: -4px;
 
-    &.micl-checkbox--error {
-        --checkbox-container-border-color: var(--md-sys-color-error);
-    }
-    &::after {
-        content: var(--md-sys-checkbox-selected-icon);
+    &::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);
         }
     }
 }
@@ -266,12 +226,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);
     }
 }