material-inspired-component-library 8.1.0 → 9.0.0

package/components/card/README.md

@@ -108,91 +108,103 @@ Add the `micl-card--compact` to the main `<div>` element (or, the `<summary>` el
 
 - **Dragging State**: When implementing drag-and-drop functionality for cards, apply the `micl-card--dragging` class to the card container to provide visual feedback during the drag operation.
 
-## Customizations
-You can customize the appearance of the Card 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 cards.
-
-| Variable name | Default Value | Description |
-| ------------- | ----- | ----------- |
-| --md-comp-card-margin | 8px | Sets the spacing between adjacent cards both horizontally and vertically |
-| --md-comp-card-padding-inline | 16px | Defines the amount of space between the left and right edges of a card and its content |
-| --md-comp-card-content-padding-block | 16px | The amount of vertical padding reserved for the content area |
-| --md-comp-card-gap | 8px | Defines the amount of vertical space between structural elements inside the card |
-
-The Card component supports the following CSS variables, as defined in the [Material Design 3 Expressive Card Specification](https://m3.material.io/components/cards/specs):
-
-```CSS
---md-comp-elevated-card-container-color
---md-comp-elevated-card-container-elevation
---md-comp-elevated-card-container-shape
---md-comp-elevated-card-disabled-container-elevation
---md-comp-elevated-card-disabled-container-color
---md-comp-elevated-card-disabled-container-opacity
---md-comp-elevated-card-hover-container-elevation
---md-comp-elevated-card-hover-state-layer-color
---md-comp-elevated-card-hover-state-layer-opacity
---md-comp-elevated-card-focus-indicator-color
---md-comp-elevated-card-focus-indicator-thickness
---md-comp-elevated-card-focus-indicator-outline-offset
---md-comp-elevated-card-focus-container-elevation
---md-comp-elevated-card-focus-state-layer-color
---md-comp-elevated-card-focus-state-layer-opacity
---md-comp-elevated-card-pressed-container-elevation
---md-comp-elevated-card-pressed-state-layer-color
---md-comp-elevated-card-pressed-state-layer-opacity
---md-comp-elevated-card-dragged-container-elevation
---md-comp-elevated-card-dragged-state-layer-color
---md-comp-elevated-card-dragged-state-layer-opacity
---md-comp-filled-card-container-color
---md-comp-filled-card-container-elevation
---md-comp-filled-card-container-shape
---md-comp-filled-card-disabled-container-elevation
---md-comp-filled-card-disabled-container-color
---md-comp-filled-card-disabled-container-opacity
---md-comp-filled-card-hover-container-elevation
---md-comp-filled-card-hover-state-layer-color
---md-comp-filled-card-hover-state-layer-opacity
---md-comp-filled-card-focus-indicator-color
---md-comp-filled-card-focus-indicator-thickness
---md-comp-filled-card-focus-indicator-outline-offset
---md-comp-filled-card-focus-container-elevation
---md-comp-filled-card-focus-state-layer-color
---md-comp-filled-card-focus-state-layer-opacity
---md-comp-filled-card-pressed-container-elevation
---md-comp-filled-card-pressed-state-layer-color
---md-comp-filled-card-pressed-state-layer-opacity
---md-comp-filled-card-dragged-container-elevation
---md-comp-filled-card-dragged-state-layer-color
---md-comp-filled-card-dragged-state-layer-opacity
---md-comp-outlined-card-container-color
---md-comp-outlined-card-container-elevation
---md-comp-outlined-card-container-shape
---md-comp-outlined-card-outline-width
---md-comp-outlined-card-outline-color
---md-comp-outlined-card-disabled-container-color
---md-comp-outlined-card-disabled-container-elevation
---md-comp-outlined-card-disabled-container-opacity
---md-comp-outlined-card-disabled-outline-color
---md-comp-outlined-card-disabled-outline-opacity
---md-comp-outlined-card-hover-container-elevation
---md-comp-outlined-card-hover-outline-color
---md-comp-outlined-card-hover-state-layer-color
---md-comp-outlined-card-hover-state-layer-opacity
---md-comp-outlined-card-focus-indicator-color
---md-comp-outlined-card-focus-indicator-thickness
---md-comp-outlined-card-focus-indicator-outline-offset
---md-comp-outlined-card-focus-container-elevation
---md-comp-outlined-card-focus-outline-color
---md-comp-outlined-card-focus-state-layer-color
---md-comp-outlined-card-focus-state-layer-opacity
---md-comp-outlined-card-pressed-container-elevation
---md-comp-outlined-card-pressed-outline-color
---md-comp-outlined-card-pressed-state-layer-color
---md-comp-outlined-card-pressed-state-layer-opacity
---md-comp-outlined-card-dragged-container-elevation
---md-comp-outlined-card-dragged-outline-color
---md-comp-outlined-card-dragged-state-layer-color
---md-comp-outlined-card-dragged-state-layer-opacity
-```
+## Theming
+Each card can be themed with CSS custom properties that follow the Material Design 3 component-token naming convention.
+
+| Custom property | Meaning | Default |
+|---|---|---|
+| `--md-comp-card-margin` | Sets the spacing between adjacent cards both horizontally and vertically | `8px` |
+| `--md-comp-card-padding-inline` | Defines the amount of space between the left and right edges of a card and its content | `16px` |
+| `--md-comp-card-content-padding-block` | The amount of vertical padding reserved for the content area | `16px` |
+| `--md-comp-card-gap` | Defines the amount of vertical space between structural elements inside the card | `8px` |
+
+Each card style additionally supports the following CSS custom properties, as defined in the [Material Design 3 Expressive Card Specification](https://m3.material.io/components/cards/specs). The hover, focus, pressed and dragged properties only apply to actionable cards.
+
+### Elevated card
+
+| Custom property | Meaning | Default |
+|---|---|---|
+| `--md-comp-elevated-card-container-color` | The background color of the card | `--md-sys-color-surface-container-low` |
+| `--md-comp-elevated-card-container-elevation` | The shadow (elevation) of the card | `--md-sys-elevation-level1` |
+| `--md-comp-elevated-card-container-shape` | The corner rounding of the card | `--md-sys-shape-corner-medium` |
+| `--md-comp-elevated-card-disabled-container-elevation` | The shadow of a disabled card | `--md-sys-elevation-level1` |
+| `--md-comp-elevated-card-disabled-container-color` | The background color of a disabled card | `--md-sys-color-surface` |
+| `--md-comp-elevated-card-disabled-container-opacity` | The opacity of a disabled card | `--md-sys-state-disabled-state-layer-opacity` |
+| `--md-comp-elevated-card-hover-container-elevation` | The shadow of the card while hovered | `--md-sys-elevation-level2` |
+| `--md-comp-elevated-card-hover-state-layer-color` | The state layer color of the card while hovered | `--md-sys-color-on-surface` |
+| `--md-comp-elevated-card-hover-state-layer-opacity` | The state layer opacity of the card while hovered | `--md-sys-state-hover-state-layer-opacity` |
+| `--md-comp-elevated-card-focus-indicator-color` | The color of the focus indicator ring | `--md-sys-color-secondary` |
+| `--md-comp-elevated-card-focus-indicator-thickness` | The thickness of the focus indicator ring | `--md-sys-state-focus-indicator-thickness` |
+| `--md-comp-elevated-card-focus-indicator-outline-offset` | The distance between the card and the focus indicator ring | `--md-sys-state-focus-indicator-outer-offset` |
+| `--md-comp-elevated-card-focus-container-elevation` | The shadow of the card while focused | `--md-sys-elevation-level1` |
+| `--md-comp-elevated-card-focus-state-layer-color` | The state layer color of the card while focused | `--md-sys-color-on-surface` |
+| `--md-comp-elevated-card-focus-state-layer-opacity` | The state layer opacity of the card while focused | `--md-sys-state-focus-state-layer-opacity` |
+| `--md-comp-elevated-card-pressed-container-elevation` | The shadow of the card while pressed | `--md-sys-elevation-level1` |
+| `--md-comp-elevated-card-pressed-state-layer-color` | The state layer color of the card while pressed | `--md-sys-color-on-surface` |
+| `--md-comp-elevated-card-pressed-state-layer-opacity` | The state layer opacity of the card while pressed | `--md-sys-state-pressed-state-layer-opacity` |
+| `--md-comp-elevated-card-dragged-container-elevation` | The shadow of the card while dragged | `--md-sys-elevation-level4` |
+| `--md-comp-elevated-card-dragged-state-layer-color` | The state layer color of the card while dragged | `--md-sys-color-on-surface` |
+| `--md-comp-elevated-card-dragged-state-layer-opacity` | The state layer opacity of the card while dragged | `--md-sys-state-dragged-state-layer-opacity` |
+
+### Filled card
+
+| Custom property | Meaning | Default |
+|---|---|---|
+| `--md-comp-filled-card-container-color` | The background color of the card | `--md-sys-color-surface-container-highest` |
+| `--md-comp-filled-card-container-elevation` | The shadow (elevation) of the card | `--md-sys-elevation-level0` |
+| `--md-comp-filled-card-container-shape` | The corner rounding of the card | `--md-sys-shape-corner-medium` |
+| `--md-comp-filled-card-disabled-container-elevation` | The shadow of a disabled card | `--md-sys-elevation-level0` |
+| `--md-comp-filled-card-disabled-container-color` | The background color of a disabled card | `--md-sys-color-surface-variant` |
+| `--md-comp-filled-card-disabled-container-opacity` | The opacity of a disabled card | `--md-sys-state-disabled-state-layer-opacity` |
+| `--md-comp-filled-card-hover-container-elevation` | The shadow of the card while hovered | `--md-sys-elevation-level1` |
+| `--md-comp-filled-card-hover-state-layer-color` | The state layer color of the card while hovered | `--md-sys-color-on-surface` |
+| `--md-comp-filled-card-hover-state-layer-opacity` | The state layer opacity of the card while hovered | `--md-sys-state-hover-state-layer-opacity` |
+| `--md-comp-filled-card-focus-indicator-color` | The color of the focus indicator ring | `--md-sys-color-secondary` |
+| `--md-comp-filled-card-focus-indicator-thickness` | The thickness of the focus indicator ring | `--md-sys-state-focus-indicator-thickness` |
+| `--md-comp-filled-card-focus-indicator-outline-offset` | The distance between the card and the focus indicator ring | `--md-sys-state-focus-indicator-outer-offset` |
+| `--md-comp-filled-card-focus-container-elevation` | The shadow of the card while focused | `--md-sys-elevation-level0` |
+| `--md-comp-filled-card-focus-state-layer-color` | The state layer color of the card while focused | `--md-sys-color-on-surface` |
+| `--md-comp-filled-card-focus-state-layer-opacity` | The state layer opacity of the card while focused | `--md-sys-state-focus-state-layer-opacity` |
+| `--md-comp-filled-card-pressed-container-elevation` | The shadow of the card while pressed | `--md-sys-elevation-level0` |
+| `--md-comp-filled-card-pressed-state-layer-color` | The state layer color of the card while pressed | `--md-sys-color-on-surface` |
+| `--md-comp-filled-card-pressed-state-layer-opacity` | The state layer opacity of the card while pressed | `--md-sys-state-pressed-state-layer-opacity` |
+| `--md-comp-filled-card-dragged-container-elevation` | The shadow of the card while dragged | `--md-sys-elevation-level3` |
+| `--md-comp-filled-card-dragged-state-layer-color` | The state layer color of the card while dragged | `--md-sys-color-on-surface` |
+| `--md-comp-filled-card-dragged-state-layer-opacity` | The state layer opacity of the card while dragged | `--md-sys-state-dragged-state-layer-opacity` |
+
+### Outlined card
+
+| Custom property | Meaning | Default |
+|---|---|---|
+| `--md-comp-outlined-card-container-color` | The background color of the card | `--md-sys-color-surface` |
+| `--md-comp-outlined-card-container-elevation` | The shadow (elevation) of the card | `--md-sys-elevation-level0` |
+| `--md-comp-outlined-card-container-shape` | The corner rounding of the card | `--md-sys-shape-corner-medium` |
+| `--md-comp-outlined-card-outline-width` | The thickness of the card's outline | `1px` |
+| `--md-comp-outlined-card-outline-color` | The color of the card's outline | `--md-sys-color-outline-variant` |
+| `--md-comp-outlined-card-disabled-container-color` | The background color of a disabled card | `--md-sys-color-surface` |
+| `--md-comp-outlined-card-disabled-container-elevation` | The shadow of a disabled card | `--md-sys-elevation-level0` |
+| `--md-comp-outlined-card-disabled-container-opacity` | The opacity of a disabled card | `--md-sys-state-disabled-state-layer-opacity` |
+| `--md-comp-outlined-card-disabled-outline-color` | The outline color of a disabled card | `--md-sys-color-outline` |
+| `--md-comp-outlined-card-disabled-outline-opacity` | The outline opacity of a disabled card | `12%` |
+| `--md-comp-outlined-card-hover-container-elevation` | The shadow of the card while hovered | `--md-sys-elevation-level1` |
+| `--md-comp-outlined-card-hover-outline-color` | The outline color of the card while hovered | `--md-sys-color-outline-variant` |
+| `--md-comp-outlined-card-hover-state-layer-color` | The state layer color of the card while hovered | `--md-sys-color-on-surface` |
+| `--md-comp-outlined-card-hover-state-layer-opacity` | The state layer opacity of the card while hovered | `--md-sys-state-hover-state-layer-opacity` |
+| `--md-comp-outlined-card-focus-indicator-color` | The color of the focus indicator ring | `--md-sys-color-secondary` |
+| `--md-comp-outlined-card-focus-indicator-thickness` | The thickness of the focus indicator ring | `--md-sys-state-focus-indicator-thickness` |
+| `--md-comp-outlined-card-focus-indicator-outline-offset` | The distance between the card and the focus indicator ring | `--md-sys-state-focus-indicator-outer-offset` |
+| `--md-comp-outlined-card-focus-container-elevation` | The shadow of the card while focused | `--md-sys-elevation-level0` |
+| `--md-comp-outlined-card-focus-outline-color` | The outline color of the card while focused | `--md-sys-color-on-surface` |
+| `--md-comp-outlined-card-focus-state-layer-color` | The state layer color of the card while focused | `--md-sys-color-on-surface` |
+| `--md-comp-outlined-card-focus-state-layer-opacity` | The state layer opacity of the card while focused | `--md-sys-state-focus-state-layer-opacity` |
+| `--md-comp-outlined-card-pressed-container-elevation` | The shadow of the card while pressed | `--md-sys-elevation-level0` |
+| `--md-comp-outlined-card-pressed-outline-color` | The outline color of the card while pressed | `--md-sys-color-outline-variant` |
+| `--md-comp-outlined-card-pressed-state-layer-color` | The state layer color of the card while pressed | `--md-sys-color-on-surface` |
+| `--md-comp-outlined-card-pressed-state-layer-opacity` | The state layer opacity of the card while pressed | `--md-sys-state-pressed-state-layer-opacity` |
+| `--md-comp-outlined-card-dragged-container-elevation` | The shadow of the card while dragged | `--md-sys-elevation-level3` |
+| `--md-comp-outlined-card-dragged-outline-color` | The outline color of the card while dragged | `--md-sys-color-outline-variant` |
+| `--md-comp-outlined-card-dragged-state-layer-color` | The state layer color of the card while dragged | `--md-sys-color-on-surface` |
+| `--md-comp-outlined-card-dragged-state-layer-opacity` | The state layer opacity of the card while dragged | `--md-sys-state-dragged-state-layer-opacity` |
 
 **Example: Changing the card margins**
 

package/components/card/index.scss

@@ -20,7 +20,6 @@
 // SOFTWARE.
 
 @use 'sass:meta';
-@use '../../foundations';
 @use '../../styles/elevation';
 @use '../../styles/motion';
 @use '../../styles/shape';
@@ -102,16 +101,9 @@
     }
 }
 
-:root {
-    --md-comp-card-gap: 8px;
-    --md-comp-card-margin: 8px;
-    --md-comp-card-padding-inline: 16px;
-    --md-comp-card-content-padding-block: 16px;
-}
+$cards: ':is(.micl-card-elevated, .micl-card-filled, .micl-card-outlined)';
 
-.micl-card-elevated,
-.micl-card-filled,
-.micl-card-outlined {
+#{$cards} {
     --md-comp-card-motion-spatial: #{motion.$md-sys-motion-expressive-default-spatial};
     --md-comp-card-motion-duration: #{motion.$md-sys-motion-expressive-default-spatial-duration};
 
@@ -149,35 +141,35 @@
             ),
             linear-gradient(rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)));
         background-repeat: no-repeat;
+        background-position: var(--micl-x, center) var(--micl-y, center), 0 0;
         background-size: 0%, 100%;
         transition:
             background-size 0ms,
             --statelayer-opacity var(--md-comp-card-motion-duration) linear;
 
+        &:is(:hover, :focus-visible, :active, .micl-card--dragging) {
+            --_card-color: var(--md-sys-color-on-surface);
+        }
         &:hover {
             --statelayer-color: var(--_card-hover-state-color);
             --statelayer-opacity: var(--_card-hover-state-opacity);
-            --_card-color: var(--md-sys-color-on-surface);
             cursor: pointer;
         }
         &:focus-visible {
             --statelayer-color: var(--_card-focus-state-color);
             --statelayer-opacity: var(--_card-focus-state-opacity);
-            --_card-color: var(--md-sys-color-on-surface);
         }
         &:active {
             --statelayer-color: var(--_card-pressed-state-color);
             --statelayer-opacity: var(--_card-pressed-state-opacity);
-            --_card-color: var(--md-sys-color-on-surface);
         }
         &.micl-card--dragging {
             --statelayer-color: var(--_card-dragged-state-color);
             --statelayer-opacity: var(--_card-dragged-state-opacity);
-            --_card-color: var(--md-sys-color-on-surface);
             cursor: grabbing;
         }
         &.micl-rippling {
-            animation: micl-ripple calc(var(--md-sys-state-ripple-duration) / 2) motion.$md-sys-motion-easing-standard;
+            animation: micl-ripple calc(var(--md-sys-state-ripple-duration) * 1.722);
         }
 
         .micl-card__content {
@@ -191,7 +183,6 @@
     }
     @include card-interactive('focus-visible') {
         box-shadow: var(--_card-focus-elevation);
-        border-width: var(--_card-focus-border-width, var(--_card-border-width, 0));
         border-color: var(--_card-focus-border-color, transparent);
         outline: var(--_card-focus-outline-thickness, 0px) solid var(--_card-focus-outline-color, transparent);
         outline-offset: var(--_card-focus-outline-offset, 0px);
@@ -229,36 +220,6 @@
         }
     }
 
-    &.micl-card--compact, summary.micl-card--compact {
-        display: grid;
-        grid-template-columns: 20% 1fr;
-        padding-block-end: 0;
-
-        .micl-card__image {
-            grid-column: 1;
-            grid-row: 1 / span 4;
-            block-size: 100%;
-            background-size: cover;
-        }
-        .micl-card__headline-s, .micl-card__headline-m, .micl-card__headline-l,
-        .micl-card__subhead, .micl-card__supporting-text {
-            grid-column: 2;
-            min-inline-size: 0;
-        }
-        .micl-card__headline-s, .micl-card__headline-m, .micl-card__headline-l, .micl-card__supporting-text {
-            margin-block-start: var(--md-comp-card-gap, 8px);
-        }
-        .micl-card__subhead {
-            margin-block-start: 0;
-        }
-        .micl-card__content {
-            grid-column: 1 / span 2;
-        }
-
-        &:not(:has(.micl-card__content)) > :last-child {
-            margin-block-end: var(--md-comp-card-gap, 8px);
-        }
-    }
 }
 
 .micl-card-elevated {
@@ -303,17 +264,13 @@
         $inert-bg-default    : var(--md-sys-color-surface),
         $inert-elev-default  : var(--md-sys-elevation-level0)
     );
+    @include card-focus-outline('outlined');
 
     --_card-border-width: var(--md-comp-outlined-card-outline-width, 1px);
     --_card-border: var(--_card-border-width) solid var(--_card-border-color, var(--md-comp-outlined-card-outline-color, var(--md-sys-color-outline-variant)));
-
     --_card-hover-border-color: var(--md-comp-outlined-card-hover-outline-color, var(--md-sys-color-outline-variant));
-
-    --_card-focus-border-color: var(--md-comp-outlined-card-focus-indicator-color, var(--md-sys-color-secondary));
-    --_card-focus-border-width: var(--md-comp-outlined-card-focus-indicator-thickness, var(--md-sys-state-focus-indicator-thickness));
-
+    --_card-focus-border-color: var(--md-comp-outlined-card-focus-outline-color, var(--md-sys-color-on-surface));
     --_card-pressed-border-color: var(--md-comp-outlined-card-pressed-outline-color, var(--md-sys-color-outline-variant));
-
     --_card-dragged-border-color: var(--md-comp-outlined-card-dragged-outline-color, var(--md-sys-color-outline-variant));
 
     &[inert] {
@@ -330,28 +287,20 @@
     border-radius: var(--_card-shape);
 }
 
-.micl-card-elevated,
-.micl-card-filled,
-.micl-card-outlined,
-.micl-card-elevated > summary,
-.micl-card-filled > summary,
-.micl-card-outlined > summary {
-    &> .micl-card__headline-s:first-child,
-    &> .micl-card__headline-m:first-child,
-    &> .micl-card__headline-l:first-child {
+#{$cards},
+#{$cards} > summary {
+    &> [class*='micl-card__headline-']:first-child {
         padding-block-start: var(--md-comp-card-content-padding-block, 16px);
     }
 }
 
-.micl-card__headline-s,
-.micl-card__headline-m,
-.micl-card__headline-l {
+[class*='micl-card__headline-'] {
     display: flex;
     align-items: center;
     column-gap: var(--md-comp-card-gap, 8px);
     color: var(--_card-color);
 
-    h1, h2, h3, h4, h5, h6, .micl-heading {
+    :is(h1, h2, h3, h4, h5, h6, .micl-heading) {
         flex: 1 2 fit-content;
         margin: 0;
         padding-inline: var(--md-comp-card-padding-inline, 16px);
@@ -416,3 +365,35 @@
         padding-inline-end: calc(var(--md-comp-card-padding-inline, 16px) - 16px);
     }
 }
+
+.micl-card--compact,
+summary.micl-card--compact {
+    display: grid;
+    grid-template-columns: 20% 1fr;
+    padding-block-end: 0;
+
+    .micl-card__image {
+        grid-column: 1;
+        grid-row: 1 / span 4;
+        block-size: 100%;
+        background-size: cover;
+    }
+    [class*='micl-card__headline-'],
+    .micl-card__subhead, .micl-card__supporting-text {
+        grid-column: 2;
+        min-inline-size: 0;
+    }
+    [class*='micl-card__headline-'], .micl-card__supporting-text {
+        margin-block-start: var(--md-comp-card-gap, 8px);
+    }
+    .micl-card__subhead {
+        margin-block-start: 0;
+    }
+    .micl-card__content {
+        grid-column: 1 / span 2;
+    }
+
+    &:not(:has(.micl-card__content)) > :last-child {
+        margin-block-end: var(--md-comp-card-gap, 8px);
+    }
+}

package/components/checkbox/README.md

@@ -38,7 +38,7 @@ Adding the `micl-checkbox--error` CSS class to the `<input>` element will create
 
 A checkbox can be disabled by adding the `disabled` attribute to the `<input>` element.
 
-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 Checkbox component respects the element's computed direction, automatically adjusting its layout for right-to-left (RTL) languages — whether the `dir` attribute (including `dir="auto"`) is set on the element itself or inherited from an ancestor.
 
 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.
 
@@ -59,18 +59,26 @@ You can establish a parent-child relationship among checkboxes. To do this, wrap
 
 To visually improve the layout, such as by indenting child checkboxes, use wrapper elements and utility classes:
 
+```CSS
+  .my-utility-class {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  } 
+```
+
 ```HTML
 <div class="micl-checkbox-group">
-  <div class="micl-flex--vcenter">
+  <div class="my-utility-class">
     <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">
+    <div class="my-utility-class">
       <input type="checkbox" id="cb1" class="micl-checkbox" value="c1">
       <label for="cb1">First Choice</label>
     </div>
-    <div class="micl-flex--vcenter">
+    <div class="my-utility-class">
       <input type="checkbox" id="cb2" class="micl-checkbox" checked value="c2">
       <label for="cb2">Second Choice</label>
     </div>
@@ -81,28 +89,31 @@ To visually improve the layout, such as by indenting child checkboxes, use wrapp
 
 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.
+## Theming
+Each checkbox can be themed with CSS custom properties that follow the Material Design 3 component-token naming convention. Set them 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 |
+| Custom property | Meaning | Default |
+|---|---|---|
+| `--md-comp-checkbox-container-size` | The size of the checkbox itself | `18px` |
+| `--md-comp-checkbox-outline-width` | The thickness of the checkbox's border | `2px` |
+| `--md-comp-checkbox-check-thickness` | The thickness of the check mark | `2px` |
+| `--md-comp-checkbox-unselected-outline-color` | The border color of an unselected checkbox | `--md-sys-color-on-surface-variant` |
+| `--md-comp-checkbox-selected-container-color` | The fill color of a selected checkbox | `--md-sys-color-primary` |
+| `--md-comp-checkbox-selected-icon-color` | The color of the check mark | `--md-sys-color-on-primary` |
 
 **Example: Changing the border width of a checkbox**
 
 ```HTML
-<div style="--md-sys-checkbox-border-width:1px">
+<div style="--md-comp-checkbox-outline-width:1px">
   <input type="checkbox" id="mycheckbox" class="micl-checkbox">
   <label for="mycheckbox">Checkbox</label>
 </div>
 ```
 
-To vertically align a checkbox with its label, wrap both in an element that has the `micl-flex--vcenter` class.
+To vertically align a checkbox with its label, wrap both in an element that has a styling like suggested below:
 
 ```HTML
-<div class="micl-flex--vcenter">
+<div style="display:flex;flex-direction:row;align-items:center">
   <input type="checkbox" id="mycheckbox" class="micl-checkbox">
   <label for="mycheckbox">Checkbox</label>
 </div>

package/{tools/shapes/check.mjs → components/checkbox/_label.scss}

@@ -1,42 +1,37 @@
-//
-// 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.
-
-import fs from 'node:fs';
-import path from 'node:path';
-import { generatePathsScss, TARGET_PATH } from './generate.mjs';
-
-//
-// CI staleness gate. Compares the on-disk components/shapes/_paths.generated.scss
-// against what the generator would produce now. Exits non-zero if they differ,
-// instructing the developer to run `npm run gen:shapes` and commit the result.
-//
-
-const expected = generatePathsScss();
-const actual   = fs.existsSync(TARGET_PATH) ? fs.readFileSync(TARGET_PATH, 'utf8') : '';
-
-if (expected !== actual) {
-    const rel = path.relative(process.cwd(), TARGET_PATH);
-    console.error(`✗ ${rel} is out of date.`);
-    console.error('  Run `npm run gen:shapes` and commit the regenerated file.');
-    process.exit(1);
-}
-
-console.log('✓ Shape paths up to date.');
+//
+// 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.
+
+// The label rules shared by the toggle controls (checkbox, switch, radio): the label
+// immediately before or after the input is clickable, uses the on-surface color, and
+// dims alongside a disabled input. This partial emits nothing that is not extended.
+
+%micl-toggle-label-pointer {
+    -webkit-tap-highlight-color: transparent;
+    cursor: pointer;
+}
+
+%micl-toggle-label {
+    color: var(--md-sys-color-on-surface);
+}
+
+%micl-toggle-label-disabled {
+    opacity: var(--md-sys-state-disabled-state-layer-opacity, 38%);
+}