material-inspired-component-library 7.0.2 → 8.0.1

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,81 @@
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
+@include elevation.level(0);
+@include elevation.level(1);
+@include elevation.level(2);
+@include elevation.level(3);
+@include elevation.level(4);
+
+@include shapes.corner('medium');
+
+@include statelayer.token('hover-state-layer-opacity');
+@include statelayer.token('focus-state-layer-opacity');
+@include statelayer.token('pressed-state-layer-opacity');
+@include statelayer.token('dragged-state-layer-opacity');
+@include statelayer.token('disabled-state-layer-opacity');
+@include statelayer.token('focus-indicator-thickness');
+@include statelayer.token('focus-indicator-outer-offset');
+@include statelayer.token('ripple-opacity-factor');
+@include statelayer.token('ripple-duration');
+@include statelayer.property;
+@include statelayer.keyframes;
+
+@include typography.scale('title-medium');
+@include typography.scale('body-smallmedium');
+
+@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 +112,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 +125,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 +141,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 +236,7 @@
 
         .micl-card__image {
             grid-column: 1;
-            grid-row: 1 / 5;
+            grid-row: 1 / -1;
             block-size: 100%;
             background-size: cover;
         }
@@ -183,103 +262,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 +327,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 +349,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 +368,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,7 +382,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    color: var(--_text-color);
+    color: var(--_card-color);
 }
 
 .micl-card__supporting-text {
@@ -358,14 +390,13 @@
     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 +404,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

@@ -21,9 +21,26 @@
 
 @use '../../foundations';
 @use '../../styles/motion';
+@use '../../styles/shapes';
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
+@include shapes.corner('full');
+
+@include statelayer.token('layer-size');
+@include statelayer.token('hover-state-layer-opacity');
+@include statelayer.token('focus-state-layer-opacity');
+@include statelayer.token('pressed-state-layer-opacity');
+@include statelayer.token('disabled-state-layer-opacity');
+@include statelayer.token('focus-indicator-thickness');
+@include statelayer.token('ripple-opacity-factor');
+@include statelayer.token('ripple-duration');
+@include statelayer.property;
+@include statelayer.keyframes;
+
+@include motion.duration('short3');
+@include motion.duration('long4');
+
 :root {
     --md-sys-checkbox-border-width: 2px;
     --md-sys-checkbox-check-thickness: 2px;
@@ -158,13 +175,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 +209,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 +217,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%);

package/components/datepicker/index.scss

@@ -25,6 +25,19 @@
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
+@include shapes.corner('large');
+@include shapes.corner('full');
+
+@include statelayer.token('hover-state-layer-opacity');
+@include statelayer.token('focus-state-layer-opacity');
+@include statelayer.token('pressed-state-layer-opacity');
+@include statelayer.token('disabled-state-layer-opacity');
+@include statelayer.property;
+
+@include typography.scale('headline-large');
+@include typography.scale('body-large');
+@include typography.scale('label-large');
+
 :root {
     --md-comp-date-picker-docked-container-width: 360px;
     --md-comp-date-picker-modal-container-width: 360px;

package/components/datepicker/index.ts

@@ -139,9 +139,9 @@ const renderCalendarHeader = (): DocumentFragment =>
     const tempDate = new Date();
     const startOffset = tempDate.getDay() - firstDayOfWeek;
     tempDate.setDate(tempDate.getDate() - startOffset);
-    
+
     const fragment = document.createDocumentFragment();
-    
+
     for (let i = 0; i < 7; i++) {
         const span = document.createElement('span');
         span.style.gridArea = `1 / ${i + 1}`;
@@ -179,10 +179,10 @@ const populateContainerWithDays = (
         const day = days[index];
         el.dateTime = day.val;
         el.textContent = day.date.getDate().toString();
-        
+
         const isSelected = day.date.getTime() === state.selected.getTime();
         const isToday = day.date.getTime() === today.getTime();
-        
+
         el.className = '';
         if (!day.isCurrentMonth) el.classList.add('micl-datepicker__outside');
         if (isSelected) el.classList.add('micl-datepicker__selected');
@@ -303,7 +303,7 @@ const renderCalendar = (
 
     const monthInput = dialog.querySelector<HTMLInputElement>(`.micl-datepicker__months input[value="${state.viewDate.getMonth()}"]`);
     if (monthInput) monthInput.checked = true;
-    
+
     const yearInput = dialog.querySelector<HTMLInputElement>(`.micl-datepicker__years input[value="${state.viewDate.getFullYear()}"]`);
     if (yearInput) yearInput.checked = true;
 };
@@ -335,7 +335,7 @@ const initPeriodPickers = (dialog: HTMLDialogElement, min: Date, max: Date): voi
                 months.push(current.getMonth());
                 current.setMonth(current.getMonth() + 1);
             }
-            
+
             [...new Set(months.sort((a, b) => a - b))].forEach(m => {
                 const label = document.createElement('label');
                 label.innerHTML = `<span class="material-symbols-outlined">check</span><input type="radio" name="miclmonth" value="${m}"> ${formatters.monthLong.format(new Date(2000, m, 1))}`;
@@ -498,7 +498,7 @@ const selectDate = (dialog: HTMLDialogElement, dateStr: string, isLocaleFormatte
     if (parts.length === 3) {
         state.selected = new Date(parts[0], parts[1], parts[2]);
         state.viewDate = new Date(state.selected);
-        
+
         renderCalendar(dialog, state);
     }
 };
@@ -562,7 +562,7 @@ export default (() =>
                     const forMonth = btn.parentElement?.classList.contains('micl-datepicker__month-selector');
                     const isNext   = btn.classList.contains('micl-datepicker__next');
                     const isPrev   = btn.classList.contains('micl-datepicker__previous');
-                    
+
                     if (isNext || isPrev) {
                         changePeriod(dialog, isNext ? 1 : -1, forMonth ? 'month' : 'year');
                         return;
@@ -628,7 +628,7 @@ export default (() =>
                 if (!isInvoker(invoker)) {
                     return;
                 }
-                
+
                 let initialDate = new Date();
                 let min = new Date(1900, 0, 1);
                 let max = new Date(2099, 11, 31);