material-inspired-component-library 7.0.1 → 8.0.0

package/CLAUDE.md

@@ -0,0 +1,42 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+MICL is a Material Design 3 UI component library written in TypeScript and Sass. It compiles to a UMD bundle (`dist/micl.js`) and a CSS file (`dist/micl.css`) with zero runtime dependencies.
+
+## Commands
+
+```bash
+npm run build    # Compiles TypeScript + Sass via webpack, outputs to /dist/ and /docs/
+```
+
+There is no test suite, linter script, or dev server configured.
+
+## Architecture
+
+### Entry Points
+
+- **`micl.ts`** — Main orchestrator. Initializes components lazily via a `MutationObserver` that watches for DOM insertions/removals. Handles event delegation for `input`, `change`, and `keydown` events, applies the ripple effect, and sets scrollbar CSS custom properties.
+- **`styles.scss`** — Master stylesheet that imports all component and foundation Sass partials.
+
+### Component Structure
+
+Each component lives in `components/<name>/` and exports:
+- A CSS selector string (e.g., `buttonSelector = 'button.micl-button--toggle'`)
+- A handler object with `initialize(element)` / `cleanup(element)` methods and optional event handlers (`input`, `change`, `keydown`, `command`)
+
+`micl.ts` imports every component handler, maps selectors to handlers, and drives the lifecycle using the MutationObserver + event delegation pattern.
+
+### Styling System
+
+- Sass uses `@use` (not `@import`); partials are namespaced.
+- Theming is done entirely via CSS custom properties with `--md-sys-*` prefixes.
+- `themes/` contains 11 colour themes, each with light, dark, and high-contrast variants.
+- `styles/` contains Material Design tokens: typography, shapes, elevation, motion, state layers.
+- `foundations/` contains the responsive layout system (breakpoints: compact ≤599 px, medium 600–839 px, expanded 840–1199 px, large 1200–1599 px, extra-large ≥1600 px).
+
+### Build
+
+`webpack.config.js` produces two identical outputs: one to `/dist/` (npm distribution) and one to `/docs/` (live demo). TypeScript target is ES2022 with strict mode and declaration-file generation enabled.

package/README.md

@@ -124,6 +124,12 @@ The library currently consists of the following components:
 
 ## Change Log ↪️
 
+### 8.0.0 (05.05.2026)
+- **BREAKING**: Renamed many CSS custom properties from --md-sys- to --md-comp-.
+- **List, Menu, Accordion, Select**: Aligned with latest MD3 spec.
+- **Ripple**: Now starts on pointer-down.
+- **Text field**: Outlined version uses CSS variable instead of inherited background.
+
 ### 7.0.0 (08.03.2026)
 - **BREAKING**: Use `<a>` instead of `<label>` inside Navigation rail.
 - **BREAKING**: Use `inert` for disabled cards instead of `micl-card--disabled`.

package/components/accordion/README.md

@@ -68,9 +68,9 @@ To ensure that only one accordion item within a group can be open at a time, add
       </div>
     </div>
   </details>
-  <hr class="micl-divider">
+  <hr class="micl-divider-inset">
   <details name="mygroup">
-    <summary class="micl-list-item-two" tabindex="-1">
+    <summary class="micl-list-item-two">
       <span class="micl-list-item__text">
         <span class="micl-list-item__headline">Country</span>
         <span class="micl-list-item__supporting-text">The country of residence.</span>
@@ -110,6 +110,9 @@ Use a [Divider component](../divider/README.md) to separate neighbouring accordi
 
 Since the Accordion is based on the List component, you can use the same utility classes for content structure and styling. Refer to the [List component documentation](../list/README.md) for details on how to add icons, avatars, images, and other features to your accordion items.
 
+## Keyboard
+Each `<summary>` is a tab stop in document order — `Tab` and `Shift+Tab` move focus through the accordion headers. While focus is on a header, `Enter` or `Space` toggles the panel open or closed. As an optional enhancement, `ArrowDown` and `ArrowUp` move focus to the next or previous header in the same group; focus wraps around at the ends.
+
 ## Customizations
 You can customize the appearance of the Accordion component by overriding its own global CSS variables and those from the List component. These variables are declared on the `:root` pseudo-class and can be changed on any appropriate parent element to affect its child accordions.
 
@@ -131,4 +134,4 @@ You can customize the appearance of the Accordion component by overriding its ow
 ```
 
 ## Compatibility
-The Card component uses the `interpolate-size` CSS property to smoothly open and close the detail area of a Details disclosure element, which might not be supported in your browser. Please check [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/interpolate-size#browser_compatibility) for details.
+The Accordion component uses the `interpolate-size` CSS property to smoothly open and close the detail area of a Details disclosure element, which might not be supported in your browser. Please check [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/interpolate-size#browser_compatibility) for details.

package/components/appbar/index.scss

@@ -55,7 +55,7 @@
     padding-inline: var(--md-sys-appbar-padding-inline);
     border-start-start-radius: inherit;
     border-start-end-radius: inherit;
-    background-color: var(--md-sys-color-surface);
+    background-color: inherit;
     box-shadow: var(--md-sys-elevation-level0);
     z-index: 8;
 

package/components/button/index.scss

@@ -69,15 +69,20 @@ button.micl-button-outlined-xl {
     border: none;
     border-radius: calc(var(--micl-height) / 2);
     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%),
+        radial-gradient(
+            circle at var(--micl-x, center) var(--micl-y, center),
+            transparent 0%,
+            rgb(from var(--statelayer-color) r g b / calc(var(--statelayer-opacity) * var(--md-sys-state-ripple-opacity-factor))) 10%,
+            transparent 10%
+        ),
         linear-gradient(rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)));
     background-repeat: no-repeat;
-    background-size: 10000%, 100%;
+    background-size: 0%, 100%;
     -webkit-tap-highlight-color: transparent;
     cursor: pointer;
     transition:
         border-radius var(--md-sys-button-motion-duration) var(--md-sys-button-motion-effects),
-        background-size 3000ms,
+        background-size 0ms,
         --statelayer-opacity var(--md-sys-button-motion-duration) linear;
 
     &:disabled {
@@ -91,9 +96,8 @@ button.micl-button-outlined-xl {
             outline: var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary);
             outline-offset: 3px;
         }
-        &:active {
-            background-size: 0%, 100%;
-            transition: background-size 0ms;
+        &.micl-rippling {
+            animation: micl-ripple var(--md-sys-state-ripple-duration) motion.$md-sys-motion-easing-standard;
         }
     }
     .micl-button__icon {

package/components/card/README.md

@@ -126,6 +126,7 @@ The Card component supports the following CSS variables, as defined in the [Mate
 --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
@@ -146,6 +147,7 @@ The Card component supports the following CSS variables, as defined in the [Mate
 --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
@@ -166,7 +168,9 @@ The Card component supports the following CSS variables, as defined in the [Mate
 --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

package/components/card/index.scss

@@ -19,6 +19,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
+@use 'sass:meta';
 @use '../../foundations';
 @use '../../styles/elevation';
 @use '../../styles/motion';
@@ -26,6 +27,58 @@
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
+@mixin card-variant(
+    $name,
+    $bg-default,
+    $elev-default,
+    $hover-elev-default,
+    $focus-elev-default,
+    $pressed-elev-default,
+    $dragged-elev-default,
+    $inert-bg-default,
+    $inert-elev-default
+) {
+    --_card-shape: var(--md-comp-#{$name}-card-container-shape, var(--md-sys-shape-corner-medium));
+    --_card-background-color: var(--md-comp-#{$name}-card-container-color, #{$bg-default});
+    --_card-elevation: var(--md-comp-#{$name}-card-container-elevation, #{$elev-default});
+
+    --_card-hover-state-color: var(--md-comp-#{$name}-card-hover-state-layer-color, var(--md-sys-color-on-surface));
+    --_card-hover-state-opacity: var(--md-comp-#{$name}-card-hover-state-layer-opacity, var(--md-sys-state-hover-state-layer-opacity));
+    --_card-hover-elevation: var(--md-comp-#{$name}-card-hover-container-elevation, #{$hover-elev-default});
+
+    --_card-focus-state-color: var(--md-comp-#{$name}-card-focus-state-layer-color, var(--md-sys-color-on-surface));
+    --_card-focus-state-opacity: var(--md-comp-#{$name}-card-focus-state-layer-opacity, var(--md-sys-state-focus-state-layer-opacity));
+    --_card-focus-elevation: var(--md-comp-#{$name}-card-focus-container-elevation, #{$focus-elev-default});
+
+    --_card-pressed-state-color: var(--md-comp-#{$name}-card-pressed-state-layer-color, var(--md-sys-color-on-surface));
+    --_card-pressed-state-opacity: var(--md-comp-#{$name}-card-pressed-state-layer-opacity, var(--md-sys-state-pressed-state-layer-opacity));
+    --_card-pressed-elevation: var(--md-comp-#{$name}-card-pressed-container-elevation, #{$pressed-elev-default});
+
+    --_card-dragged-state-color: var(--md-comp-#{$name}-card-dragged-state-layer-color, var(--md-sys-color-on-surface));
+    --_card-dragged-state-opacity: var(--md-comp-#{$name}-card-dragged-state-layer-opacity, var(--md-sys-state-dragged-state-layer-opacity));
+    --_card-dragged-elevation: var(--md-comp-#{$name}-card-dragged-container-elevation, #{$dragged-elev-default});
+
+    &[inert] {
+        --_card-background-color: var(--md-comp-#{$name}-card-disabled-container-color, #{$inert-bg-default});
+        --_card-elevation: var(--md-comp-#{$name}-card-disabled-container-elevation, #{$inert-elev-default});
+        --_card-opacity: var(--md-comp-#{$name}-card-disabled-container-opacity, var(--md-sys-state-disabled-state-layer-opacity));
+        --_card-pointer-events: none;
+    }
+}
+
+@mixin card-focus-outline($name) {
+    --_card-focus-outline-thickness: var(--md-comp-#{$name}-card-focus-indicator-thickness, var(--md-sys-state-focus-indicator-thickness));
+    --_card-focus-outline-color: var(--md-comp-#{$name}-card-focus-indicator-color, var(--md-sys-color-secondary));
+    --_card-focus-outline-offset: var(--md-comp-#{$name}-card-focus-indicator-outline-offset, var(--md-sys-state-focus-indicator-outer-offset));
+}
+
+@mixin card-interactive($state) {
+    &[tabindex='0']:not([inert]):#{$state},
+    &:not([tabindex='0']):not([inert]):has(> summary:#{$state}) {
+        @content;
+    }
+}
+
 :root {
     --md-comp-card-gap: 8px;
     --md-comp-card-margin: 8px;
@@ -36,10 +89,10 @@
 .micl-card-elevated,
 .micl-card-filled,
 .micl-card-outlined {
-    --md-sys-card-motion-spatial: #{motion.$md-sys-motion-expressive-default-spatial};
-    --md-sys-card-motion-duration: #{motion.$md-sys-motion-expressive-default-spatial-duration};
+    --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};
 
-    --_text-color: var(--md-sys-color-on-surface-variant);
+    --_card-color: var(--md-sys-color-on-surface-variant);
 
     display: flex;
     flex-direction: column;
@@ -49,12 +102,12 @@
     overflow: hidden;
     interpolate-size: allow-keywords;
 
-    border-radius: var(--_shape);
-    background-color: var(--_color);
-    box-shadow: var(--_elevation);
-    border: var(--_border, none);
-    opacity: var(--_opacity, 1);
-    pointer-events: var(--_pointer-events, auto);
+    border-radius: var(--_card-shape);
+    background-color: var(--_card-background-color);
+    box-shadow: var(--_card-elevation);
+    border: var(--_card-border, none);
+    opacity: var(--_card-opacity, 1);
+    pointer-events: var(--_card-pointer-events, auto);
 
     &:not(.micl-card--compact):not(:has(>summary)) {
         row-gap: var(--md-comp-card-gap, 8px);
@@ -65,73 +118,76 @@
         --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 / calc(var(--statelayer-opacity) / 2)) 10%, transparent 10%),
+            radial-gradient(
+                circle at var(--micl-x, center) var(--micl-y, center),
+                transparent 0%,
+                rgb(from var(--statelayer-color) r g b / calc(var(--statelayer-opacity) * var(--md-sys-state-ripple-opacity-factor))) 10%,
+                transparent 10%
+            ),
             linear-gradient(rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)));
         background-repeat: no-repeat;
-        background-size: 10000%, 100%;
+        background-size: 0%, 100%;
         transition:
-            background-size 3000ms,
-            --statelayer-opacity var(--md-sys-card-motion-duration) linear;
+            background-size 0ms,
+            --statelayer-opacity var(--md-comp-card-motion-duration) linear;
 
         &:hover {
-            --statelayer-color: var(--_hover-state-color);
-            --statelayer-opacity: var(--_hover-state-opacity);
-            --_text-color: var(--md-sys-color-on-surface);
+            --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(--_focus-state-color);
-            --statelayer-opacity: var(--_focus-state-opacity);
-            --_text-color: var(--md-sys-color-on-surface);
+            --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(--_pressed-state-color);
-            --statelayer-opacity: var(--_pressed-state-opacity);
-            --_text-color: var(--md-sys-color-on-surface);
-            background-size: 0%, 100%;
-            transition: background-size 0ms;
+            --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(--_dragged-state-color);
-            --statelayer-opacity: var(--_dragged-state-opacity);
-            --_text-color: var(--md-sys-color-on-surface);
+            --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;
+        }
 
         .micl-card__content {
             background-color: transparent;
         }
     }
 
-    &[tabindex='0']:not([inert]):hover,
-    &:not([tabindex='0']):not([inert]):has(> summary:hover) {
-        box-shadow: var(--_hover-elevation);
-        border-color: var(--_hover-border-color, var(--_border-color, transparent));
+    @include card-interactive('hover') {
+        box-shadow: var(--_card-hover-elevation);
+        border-color: var(--_card-hover-border-color, var(--_card-border-color, transparent));
     }
-    &[tabindex='0']:not([inert]):focus-visible,
-    &:not([tabindex='0']):not([inert]):has(> summary:focus-visible) {
-        box-shadow: var(--_focus-elevation);
-        border-width: var(--_focus-border-width, var(--_border-width, 0));
-        border-color: var(--_focus-border-color, transparent);
-        outline: var(--_focus-outline-thickness, 0px) solid var(--_focus-outline-color, transparent);
-        outline-offset: var(--_focus-outline-offset, 0px);
+    @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);
     }
-    &[tabindex='0']:not([inert]):active,
-    &:not([tabindex='0']):not([inert]):has(> summary:active) {
-        box-shadow: var(--_pressed-elevation);
-        border-color: var(--_pressed-border-color, transparent);
+    @include card-interactive('active') {
+        box-shadow: var(--_card-pressed-elevation);
+        border-color: var(--_card-pressed-border-color, transparent);
     }
     &[tabindex='0']:not([inert]).micl-card--dragging {
-        box-shadow: var(--_dragged-elevation);
-        border-color: var(--_dragged-border-color, transparent);
+        box-shadow: var(--_card-dragged-elevation);
+        border-color: var(--_card-dragged-border-color, transparent);
     }
 
     &::details-content {
         block-size: 0;
         overflow: hidden;
         transition:
-            block-size var(--md-sys-card-motion-duration) var(--md-sys-card-motion-spatial),
-            content-visibility var(--md-sys-card-motion-duration) linear allow-discrete;
+            block-size var(--md-comp-card-motion-duration) var(--md-comp-card-motion-spatial),
+            content-visibility var(--md-comp-card-motion-duration) linear allow-discrete;
     }
     &[open]::details-content {
         block-size: auto;
@@ -157,7 +213,7 @@
 
         .micl-card__image {
             grid-column: 1;
-            grid-row: 1 / 5;
+            grid-row: 1 / -1;
             block-size: 100%;
             background-size: cover;
         }
@@ -183,103 +239,62 @@
 }
 
 .micl-card-elevated {
-    --_shape: var(--md-comp-elevated-card-container-shape, var(--md-sys-shape-corner-medium));
-    --_color: var(--md-comp-elevated-card-container-color, var(--md-sys-color-surface-container-low));
-    --_elevation: var(--md-comp-elevated-card-container-elevation, var(--md-sys-elevation-level1));
-
-    --_hover-state-color: var(--md-comp-elevated-card-hover-state-layer-color, var(--md-sys-color-on-surface));
-    --_hover-state-opacity: var(--md-comp-elevated-card-hover-state-layer-opacity, var(--md-sys-state-hover-state-layer-opacity));
-    --_hover-elevation: var(--md-comp-elevated-card-hover-container-elevation, var(--md-sys-elevation-level2));
-
-    --_focus-state-color: var(--md-comp-elevated-card-focus-state-layer-color, var(--md-sys-color-on-surface));
-    --_focus-state-opacity: var(--md-comp-elevated-card-focus-state-layer-opacity, var(--md-sys-state-focus-state-layer-opacity));
-    --_focus-elevation: var(--md-comp-elevated-card-focus-container-elevation, var(--md-sys-elevation-level1));
-    --_focus-outline-thickness: var(--md-comp-elevated-card-focus-indicator-thickness, var(--md-sys-state-focus-indicator-thickness));
-    --_focus-outline-color: var(--md-comp-elevated-card-focus-indicator-color, var(--md-sys-color-secondary));
-    --_focus-outline-offset: var(--md-comp-elevated-card-focus-indicator-outline-offset, var(--md-sys-state-focus-indicator-outer-offset));
-
-    --_pressed-state-color: var(--md-comp-elevated-card-pressed-state-layer-color, var(--md-sys-color-on-surface));
-    --_pressed-state-opacity: var(--md-comp-elevated-card-pressed-state-layer-opacity, var(--md-sys-state-pressed-state-layer-opacity));
-    --_pressed-elevation: var(--md-comp-elevated-card-pressed-container-elevation, var(--md-sys-elevation-level1));
-
-    --_dragged-state-color: var(--md-comp-elevated-card-dragged-state-layer-color, var(--md-sys-color-on-surface));
-    --_dragged-state-opacity: var(--md-comp-elevated-card-dragged-state-layer-opacity, var(--md-sys-state-dragged-state-layer-opacity));
-    --_dragged-elevation: var(--md-comp-elevated-card-dragged-container-elevation, var(--md-sys-elevation-level4));
-
-    &[inert] {
-        --_color: var(--md-comp-elevated-card-disabled-container-color, var(--md-sys-color-surface));
-        --_elevation: var(--md-comp-elevated-card-disabled-container-elevation, var(--md-sys-elevation-level1));
-        --_opacity: var(--md-comp-elevated-card-disabled-container-opacity, var(--md-sys-state-disabled-state-layer-opacity));
-        --_pointer-events: none;
-    }
+    @include card-variant(
+        $name                : 'elevated',
+        $bg-default          : var(--md-sys-color-surface-container-low),
+        $elev-default        : var(--md-sys-elevation-level1),
+        $hover-elev-default  : var(--md-sys-elevation-level2),
+        $focus-elev-default  : var(--md-sys-elevation-level1),
+        $pressed-elev-default: var(--md-sys-elevation-level1),
+        $dragged-elev-default: var(--md-sys-elevation-level4),
+        $inert-bg-default    : var(--md-sys-color-surface),
+        $inert-elev-default  : var(--md-sys-elevation-level1)
+    );
+    @include card-focus-outline('elevated');
 }
 
 .micl-card-filled {
-    --_shape: var(--md-comp-filled-card-container-shape, var(--md-sys-shape-corner-medium));
-    --_color: var(--md-comp-filled-card-container-color, var(--md-sys-color-surface-container-highest));
-    --_elevation: var(--md-comp-filled-card-container-elevation, var(--md-sys-elevation-level0));
+    @include card-variant(
+        $name                : 'filled',
+        $bg-default          : var(--md-sys-color-surface-container-highest),
+        $elev-default        : var(--md-sys-elevation-level0),
+        $hover-elev-default  : var(--md-sys-elevation-level1),
+        $focus-elev-default  : var(--md-sys-elevation-level0),
+        $pressed-elev-default: var(--md-sys-elevation-level0),
+        $dragged-elev-default: var(--md-sys-elevation-level3),
+        $inert-bg-default    : var(--md-sys-color-surface-variant),
+        $inert-elev-default  : var(--md-sys-elevation-level0)
+    );
+    @include card-focus-outline('filled');
+}
 
-    --_hover-state-color: var(--md-comp-filled-card-hover-state-layer-color, var(--md-sys-color-on-surface));
-    --_hover-state-opacity: var(--md-comp-filled-card-hover-state-layer-opacity, var(--md-sys-state-hover-state-layer-opacity));
-    --_hover-elevation: var(--md-comp-filled-card-hover-container-elevation, var(--md-sys-elevation-level1));
+.micl-card-outlined {
+    @include card-variant(
+        $name                : 'outlined',
+        $bg-default          : var(--md-sys-color-surface),
+        $elev-default        : var(--md-sys-elevation-level0),
+        $hover-elev-default  : var(--md-sys-elevation-level1),
+        $focus-elev-default  : var(--md-sys-elevation-level0),
+        $pressed-elev-default: var(--md-sys-elevation-level0),
+        $dragged-elev-default: var(--md-sys-elevation-level3),
+        $inert-bg-default    : var(--md-sys-color-surface),
+        $inert-elev-default  : var(--md-sys-elevation-level0)
+    );
 
-    --_focus-state-color: var(--md-comp-filled-card-focus-state-layer-color, var(--md-sys-color-on-surface));
-    --_focus-state-opacity: var(--md-comp-filled-card-focus-state-layer-opacity, var(--md-sys-state-focus-state-layer-opacity));
-    --_focus-elevation: var(--md-comp-filled-card-focus-container-elevation, var(--md-sys-elevation-level0));
-    --_focus-outline-thickness: var(--md-comp-filled-card-focus-indicator-thickness, var(--md-sys-state-focus-indicator-thickness));
-    --_focus-outline-color: var(--md-comp-filled-card-focus-indicator-color, var(--md-sys-color-secondary));
-    --_focus-outline-offset: var(--md-comp-filled-card-focus-indicator-outline-offset, var(--md-sys-state-focus-indicator-outer-offset));
+    --_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)));
 
-    --_pressed-state-color: var(--md-comp-filled-card-pressed-state-layer-color, var(--md-sys-color-on-surface));
-    --_pressed-state-opacity: var(--md-comp-filled-card-pressed-state-layer-opacity, var(--md-sys-state-pressed-state-layer-opacity));
-    --_pressed-elevation: var(--md-comp-filled-card-pressed-container-elevation, var(--md-sys-elevation-level0));
+    --_card-hover-border-color: var(--md-comp-outlined-card-hover-outline-color, var(--md-sys-color-outline-variant));
 
-    --_dragged-state-color: var(--md-comp-filled-card-dragged-state-layer-color, var(--md-sys-color-on-surface));
-    --_dragged-state-opacity: var(--md-comp-filled-card-dragged-state-layer-opacity, var(--md-sys-state-dragged-state-layer-opacity));
-    --_dragged-elevation: var(--md-comp-filled-card-dragged-container-elevation, var(--md-sys-elevation-level3));
+    --_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));
 
-    &[inert] {
-        --_color: var(--md-comp-filled-card-disabled-container-color, var(--md-sys-color-surface-variant));
-        --_elevation: var(--md-comp-filled-card-disabled-container-elevation, var(--md-sys-elevation-level0));
-        --_opacity: var(--md-comp-filled-card-disabled-container-opacity, var(--md-sys-state-disabled-state-layer-opacity));
-        --_pointer-events: none;
-    }
-}
+    --_card-pressed-border-color: var(--md-comp-outlined-card-pressed-outline-color, var(--md-sys-color-outline-variant));
 
-.micl-card-outlined {
-    --_shape: var(--md-comp-outlined-card-container-shape, var(--md-sys-shape-corner-medium));
-    --_color: var(--md-comp-outlined-card-container-color, var(--md-sys-color-surface));
-    --_elevation: var(--md-comp-outlined-card-container-elevation, var(--md-sys-elevation-level0));
-    --_border-width: var(--md-comp-outlined-card-outline-width, 1px);
-    --_border: var(--_border-width) solid var(--_border-color, var(--md-comp-outlined-card-outline-color, var(--md-sys-color-outline-variant)));
-
-    --_hover-state-color: var(--md-comp-outlined-card-hover-state-layer-color, var(--md-sys-color-on-surface));
-    --_hover-state-opacity: var(--md-comp-outlined-card-hover-state-layer-opacity, var(--md-sys-state-hover-state-layer-opacity));
-    --_hover-elevation: var(--md-comp-outlined-card-hover-container-elevation, var(--md-sys-elevation-level1));
-    --_hover-border-color: var(--md-comp-outlined-card-hover-outline-color, var(--md-sys-color-outline-variant));
-
-    --_focus-state-color: var(--md-comp-outlined-card-focus-state-layer-color, var(--md-sys-color-on-surface));
-    --_focus-state-opacity: var(--md-comp-outlined-card-focus-state-layer-opacity, var(--md-sys-state-focus-state-layer-opacity));
-    --_focus-elevation: var(--md-comp-outlined-card-focus-container-elevation, var(--md-sys-elevation-level0));
-    --_focus-border-color: var(--md-comp-outlined-card-focus-indicator-color, var(--md-sys-color-secondary));
-    --_focus-border-width: var(--md-comp-outlined-card-focus-indicator-thickness, --md-sys-state-focus-indicator-thickness);
-
-    --_pressed-state-color: var(--md-comp-outlined-card-pressed-state-layer-color, var(--md-sys-color-on-surface));
-    --_pressed-state-opacity: var(--md-comp-outlined-card-pressed-state-layer-opacity, var(--md-sys-state-pressed-state-layer-opacity));
-    --_pressed-elevation: var(--md-comp-outlined-card-pressed-container-elevation, var(--md-sys-elevation-level0));
-    --_pressed-border-color: var(--md-comp-outlined-card-pressed-outline-color, var(--md-sys-color-outline-variant));
-
-    --_dragged-state-color: var(--md-comp-outlined-card-dragged-state-layer-color, var(--md-sys-color-on-surface));
-    --_dragged-state-opacity: var(--md-comp-outlined-card-dragged-state-layer-opacity, var(--md-sys-state-dragged-state-layer-opacity));
-    --_dragged-elevation: var(--md-comp-outlined-card-dragged-container-elevation, var(--md-sys-elevation-level3));
-    --_dragged-border-color: var(--md-comp-outlined-card-dragged-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] {
-        --_border-color: rgb(from var(--md-comp-outlined-card-disabled-outline-color, var(--md-sys-color-outline)) r g b / var(--md-comp-outlined-card-disabled-outline-opacity, 12%));
-        --_color: var(--md-comp-outlined-card-disabled-container-color, var(--md-sys-color-surface));
-        --_elevation: var(--md-comp-outlined-card-disabled-container-elevation, var(--md-sys-elevation-level0));
-        --_opacity: var(--md-comp-outlined-card-disabled-container-opacity, var(--md-sys-state-disabled-state-layer-opacity));
-        --_pointer-events: none;
+        --_card-border-color: rgb(from var(--md-comp-outlined-card-disabled-outline-color, var(--md-sys-color-outline)) r g b / var(--md-comp-outlined-card-disabled-outline-opacity, 12%));
     }
 }
 
@@ -289,7 +304,7 @@
     background-position: center;
     background-repeat: no-repeat;
     background-size: contain;
-    border-radius: var(--_shape);
+    border-radius: var(--_card-shape);
 }
 
 .micl-card-elevated,
@@ -311,7 +326,7 @@
     display: flex;
     align-items: center;
     column-gap: var(--md-comp-card-gap, 8px);
-    color: var(--_text-color);
+    color: var(--_card-color);
 
     h1, h2, h3, h4, h5, h6, .micl-heading {
         flex: 1 2 fit-content;
@@ -330,17 +345,11 @@
     }
 }
 
-.micl-card__headline-s h1, .micl-card__headline-s h2, .micl-card__headline-s h3,
-.micl-card__headline-s h4, .micl-card__headline-s h5, .micl-card__headline-s h6,
-.micl-card__headline-s .micl-heading { @include typography.headline-small; }
-
-.micl-card__headline-m h1, .micl-card__headline-m h2, .micl-card__headline-m h3,
-.micl-card__headline-m h4, .micl-card__headline-m h5, .micl-card__headline-m h6,
-.micl-card__headline-m .micl-heading { @include typography.headline-medium; }
-
-.micl-card__headline-l h1, .micl-card__headline-l h2, .micl-card__headline-l h3,
-.micl-card__headline-l h4, .micl-card__headline-l h5, .micl-card__headline-l h6,
-.micl-card__headline-l .micl-heading { @include typography.headline-large; }
+@each $abbrev, $size in ('s': 'small', 'm': 'medium', 'l': 'large') {
+    .micl-card__headline-#{$abbrev} :is(h1, h2, h3, h4, h5, h6, .micl-heading) {
+        @include meta.apply(meta.get-mixin('headline-' + $size, $module: 'typography'));
+    }
+}
 
 .micl-card__subhead {
     @include typography.title-medium;
@@ -350,22 +359,21 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    color: var(--_text-color);
+    color: var(--_card-color);
 }
 
 .micl-card__supporting-text {
-    @include typography.body-small;
+    @include typography.body-smallmedium;
     display: block;
     margin: 0;
     padding: 0 var(--md-comp-card-padding-inline, 16px);
-    color: var(--_text-color);
+    color: var(--_card-color);
 }
 
 .micl-card__content {
     box-sizing: border-box;
     padding-block: var(--md-comp-card-content-padding-block, 16px);
     padding-inline: var(--md-comp-card-padding-inline, 16px);
-    background-color: inherit;
     overflow: clip visible;
 }
 
@@ -373,7 +381,8 @@
     box-sizing: border-box;
     display: flex;
     flex-shrink: 0;
-    column-gap: 8px;
+    flex-wrap: wrap;
+    gap: 8px;
     padding-block: 0 var(--md-comp-card-content-padding-block, 16px);
     padding-inline: var(--md-comp-card-padding-inline, 16px);
 }

package/components/checkbox/index.scss

@@ -158,13 +158,18 @@ input[type=checkbox].micl-checkbox {
         --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%),
+            radial-gradient(
+                circle at var(--micl-x, center) var(--micl-y, center),
+                transparent 0%,
+                rgb(from var(--statelayer-color) r g b / calc(var(--statelayer-opacity) * var(--md-sys-state-ripple-opacity-factor))) 10%,
+                transparent 10%
+            ),
             linear-gradient(rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)));
         background-repeat: no-repeat;
-        background-size: 10000%, 100%;
+        background-size: 0%, 100%;
         cursor: pointer;
         transition:
-            background-size 3000ms,
+            background-size 0ms,
             --statelayer-opacity var(--md-sys-checkbox-motion-duration) linear;
 
         &:hover {
@@ -187,9 +192,6 @@ input[type=checkbox].micl-checkbox {
             --statelayer-color: var(--md-sys-color-on-surface);
             --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%);
 
-            background-size: 0%, 100%;
-            transition: background-size 0ms;
-
             &:not(:checked):not(:indeterminate) {
                 --statelayer-color: var(--md-sys-color-primary);
 
@@ -198,6 +200,9 @@ input[type=checkbox].micl-checkbox {
                 }
             }
         }
+        &.micl-rippling {
+            animation: micl-ripple var(--md-sys-state-ripple-duration) motion.$md-sys-motion-easing-standard;
+        }
     }
     &:disabled {
         opacity: var(--md-sys-state-disabled-state-layer-opacity, 38%);