material-inspired-component-library 6.0.7 → 7.0.0

package/components/card/index.scss

@@ -31,46 +31,6 @@
     --md-comp-card-margin: 8px;
     --md-comp-card-padding-inline: 16px;
     --md-comp-card-content-padding-block: 16px;
-    --md-comp-elevated-card-container-shape: var(--md-sys-shape-corner-medium);
-    --md-comp-elevated-card-disabled-container-opacity: 38%;
-    --md-comp-elevated-card-container-elevation: var(--md-sys-elevation-level1);
-    --md-comp-elevated-card-disabled-container-elevation: var(--md-sys-elevation-level1);
-    --md-comp-elevated-card-hover-container-elevation: var(--md-sys-elevation-level2);
-    --md-comp-elevated-card-focus-container-elevation: var(--md-sys-elevation-level1);
-    --md-comp-elevated-card-pressed-container-elevation: var(--md-sys-elevation-level1);
-    --md-comp-elevated-card-dragged-container-elevation: var(--md-sys-elevation-level4);
-    --md-comp-filled-card-container-shape: var(--md-sys-shape-corner-medium);
-    --md-comp-filled-card-disabled-container-opacity: 38%;
-    --md-comp-filled-card-container-elevation: var(--md-sys-elevation-level0);
-    --md-comp-filled-card-disabled-container-elevation: var(--md-sys-elevation-level0);
-    --md-comp-filled-card-hover-container-elevation: var(--md-sys-elevation-level1);
-    --md-comp-filled-card-focus-container-elevation: var(--md-sys-elevation-level0);
-    --md-comp-filled-card-pressed-container-elevation: var(--md-sys-elevation-level0);
-    --md-comp-filled-card-dragged-container-elevation: var(--md-sys-elevation-level3);
-    --md-comp-outlined-card-container-shape: var(--md-sys-shape-corner-medium);
-    --md-comp-outlined-card-disabled-container-opacity: 38%;
-    --md-comp-outlined-card-container-elevation: var(--md-sys-elevation-level0);
-    --md-comp-outlined-card-disabled-container-elevation: var(--md-sys-elevation-level0);
-    --md-comp-outlined-card-hover-container-elevation: var(--md-sys-elevation-level1);
-    --md-comp-outlined-card-focus-container-elevation: var(--md-sys-elevation-level0);
-    --md-comp-outlined-card-pressed-container-elevation: var(--md-sys-elevation-level0);
-    --md-comp-outlined-card-dragged-container-elevation: var(--md-sys-elevation-level3);
-    --md-comp-outlined-card-outline-width: 1px;
-    --md-comp-outlined-card-disabled-outline-opacity: 12%;
-}
-body {
-    --md-comp-elevated-card-container-color: var(--md-sys-color-surface-container-low);
-    --md-comp-elevated-card-disabled-container-color: var(--md-sys-color-surface);
-    --md-comp-filled-card-container-color: var(--md-sys-color-surface-container-highest);
-    --md-comp-filled-card-disabled-container-color: var(--md-sys-color-surface-variant);
-    --md-comp-outlined-card-container-color: var(--md-sys-color-surface);
-    --md-comp-outlined-card-disabled-container-color: var(--md-sys-color-surface);
-    --md-comp-outlined-card-outline-color: var(--md-sys-color-outline-variant);
-    --md-comp-outlined-card-disabled-outline-color: var(--md-sys-color-outline);
-    --md-comp-outlined-card-hover-outline-color: var(--md-sys-color-outline-variant);
-    --md-comp-outlined-card-focus-outline-color: var(--md-sys-color-on-surface);
-    --md-comp-outlined-card-pressed-outline-color: var(--md-sys-color-outline-variant);
-    --md-comp-outlined-card-dragged-outline-color: var(--md-sys-color-outline-variant);
 }
 
 .micl-card-elevated,
@@ -79,6 +39,8 @@ body {
     --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};
 
+    --_text-color: var(--md-sys-color-on-surface-variant);
+
     display: flex;
     flex-direction: column;
     block-size: fit-content;
@@ -87,14 +49,20 @@ body {
     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);
+
     &:not(.micl-card--compact):not(:has(>summary)) {
         row-gap: var(--md-comp-card-gap, 8px);
     }
 
-    &[tabindex='0']:not(.micl-card--disabled),
-    &:not(.micl-card--disabled) > summary {
+    &[tabindex='0']:not([inert]),
+    &:not([inert]) > summary {
         --micl-ripple: 1;
-        --statelayer-color: var(--md-sys-color-on-surface);
 
         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%),
@@ -106,35 +74,58 @@ body {
             --statelayer-opacity var(--md-sys-card-motion-duration) linear;
 
         &:hover {
-            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%);
-
+            --statelayer-color: var(--_hover-state-color);
+            --statelayer-opacity: var(--_hover-state-opacity);
+            --_text-color: var(--md-sys-color-on-surface);
             cursor: pointer;
         }
         &:focus-visible {
-            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);
-
-            outline: var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary);
-            outline-offset: var(--md-sys-state-focus-indicator-outer-offset, 2px);
+            --statelayer-color: var(--_focus-state-color);
+            --statelayer-opacity: var(--_focus-state-opacity);
+            --_text-color: var(--md-sys-color-on-surface);
         }
         &:active {
-            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%);
-
+            --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;
         }
         &.micl-card--dragging {
-            --statelayer-opacity: var(--md-sys-state-dragged-state-layer-opacity, 16%);
-
+            --statelayer-color: var(--_dragged-state-color);
+            --statelayer-opacity: var(--_dragged-state-opacity);
+            --_text-color: var(--md-sys-color-on-surface);
             cursor: grabbing;
         }
+
         .micl-card__content {
             background-color: transparent;
         }
     }
-    &:not([tabindex='0']):not(.micl-card--disabled):has(> summary:focus-visible) {
-        outline: var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary);
-        outline-offset: var(--md-sys-state-focus-indicator-outer-offset, 2px);
+
+    &[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));
+    }
+    &[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);
     }
+    &[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);
+    }
+    &[tabindex='0']:not([inert]).micl-card--dragging {
+        box-shadow: var(--_dragged-elevation);
+        border-color: var(--_dragged-border-color, transparent);
+    }
+
     &::details-content {
         block-size: 0;
         overflow: hidden;
@@ -170,117 +161,125 @@ body {
             block-size: 100%;
             background-size: cover;
         }
-        .micl-card__headline-s,
-        .micl-card__headline-m,
-        .micl-card__headline-l {
+        .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;
-            margin-block-start: var(--md-comp-card-gap, 8px);
         }
-        .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);
-            }
+
+        &:not(:has(.micl-card__content)) > :last-child {
+            margin-block-end: var(--md-comp-card-gap, 8px);
         }
     }
 }
 
 .micl-card-elevated {
-    border-radius: var(--md-comp-elevated-card-container-shape, var(--md-sys-shape-corner-medium));
-    background-color: var(--md-comp-elevated-card-container-color, var(--md-sys-color-surface-container-low));
-    box-shadow: var(--md-comp-elevated-card-container-elevation, var(--md-sys-elevation-level1));
-
-    &[tabindex='0']:not(.micl-card--disabled),
-    &:not(.micl-card--disabled) > summary {
-        &:hover {
-            box-shadow: var(--md-comp-elevated-card-hover-container-elevation, var(--md-sys-elevation-level2));
-        }
-        &:focus-visible {
-            box-shadow: var(--md-comp-elevated-card-focus-container-elevation, var(--md-sys-elevation-level1));
-        }
-        &:active {
-            box-shadow: var(--md-comp-elevated-card-pressed-container-elevation, var(--md-sys-elevation-level1));
-        }
-        &.micl-card--dragging {
-            box-shadow: var(--md-comp-elevated-card-dragged-container-elevation, var(--md-sys-elevation-level4));
-        }
+    --_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;
     }
 }
-.micl-card-filled {
-    border-radius: var(--md-comp-filled-card-container-shape, var(--md-sys-shape-corner-medium));
-    background-color: var(--md-comp-filled-card-container-color, var(--md-sys-color-surface-container-highest));
-    box-shadow: var(--md-comp-filled-card-container-elevation, var(--md-sys-elevation-level0));
 
-    &[tabindex='0']:not(.micl-card--disabled),
-    &:not(.micl-card--disabled) > summary {
-        &:hover {
-            box-shadow: var(--md-comp-filled-card-hover-container-elevation, var(--md-sys-elevation-level1));
-        }
-        &:focus-visible {
-            box-shadow: var(--md-comp-filled-card-focus-container-elevation, var(--md-sys-elevation-level0));
-        }
-        &:active {
-            box-shadow: var(--md-comp-filled-card-pressed-container-elevation, var(--md-sys-elevation-level0));
-        }
-        &.micl-card--dragging {
-            box-shadow: var(--md-comp-filled-card-dragged-container-elevation, var(--md-sys-elevation-level3));
-        }
-    }
-}
-.micl-card-outlined {
-    border-radius: var(--md-comp-outlined-card-container-shape, var(--md-sys-shape-corner-medium));
-    background-color: var(--md-comp-outlined-card-container-color, var(--md-sys-color-surface));
-    box-shadow: var(--md-comp-outlined-card-container-elevation, var(--md-sys-elevation-level0));
-    border: var(--md-comp-outlined-card-outline-width, 1px) solid var(--md-comp-outlined-card-outline-color, var(--md-sys-color-outline-variant));
-
-    &[tabindex='0']:not(.micl-card--disabled),
-    &:not(.micl-card--disabled) > summary {
-        &:hover {
-            border-color: var(--md-comp-outlined-card-hover-outline-color, var(--md-sys-color-outline-variant));
-            box-shadow: var(--md-comp-outlined-card-hover-container-elevation, var(--md-sys-elevation-level1));
-        }
-        &:focus-visible {
-            border-color: var(--md-comp-outlined-card-focus-outline-color, var(--md-sys-color-on-surface));
-            box-shadow: var(--md-comp-outlined-card-focus-container-elevation, var(--md-sys-elevation-level0));
-        }
-        &:active {
-            border-color: var(--md-comp-outlined-card-pressed-outline-color, var(--md-sys-color-outline-variant));
-            box-shadow: var(--md-comp-outlined-card-pressed-container-elevation, var(--md-sys-elevation-level0));
-        }
-        &.micl-card--dragging {
-            border-color: var(--md-comp-outlined-card-dragged-outline-color, var(--md-sys-color-outline-variant));
-            box-shadow: var(--md-comp-outlined-card-dragged-container-elevation, var(--md-sys-elevation-level3));
-        }
+.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));
+
+    --_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));
+
+    --_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));
+
+    --_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));
+
+    --_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));
+
+    &[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;
     }
 }
 
-.micl-card--disabled {
-    pointer-events: none;
-
-    &.micl-card-elevated {
-        background-color: var(--md-comp-elevated-card-disabled-container-color, var(--md-sys-color-surface));
-        box-shadow: 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));
-    }
-    &.micl-card-filled {
-        background-color: var(--md-comp-filled-card-disabled-container-color, var(--md-sys-color-surface-variant));
-        box-shadow: 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));
-    }
-    &.micl-card-outlined {
-        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%));
-        background-color: var(--md-comp-outlined-card-disabled-container-color, var(--md-sys-color-surface));
-        box-shadow: var(--md-comp-outlined-card-container-elevation, var(--md-sys-elevation-level0));
-        opacity: var(--md-comp-outlined-card-disabled-container-opacity, var(--md-sys-state-disabled-state-layer-opacity));
+.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));
+
+    &[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;
     }
 }
 
@@ -290,15 +289,7 @@ body {
     background-position: center;
     background-repeat: no-repeat;
     background-size: contain;
-}
-.micl-card-elevated .micl-card__image {
-    border-radius: var(--md-comp-elevated-card-container-shape, var(--md-sys-shape-corner-medium));
-}
-.micl-card-filled .micl-card__image {
-    border-radius: var(--md-comp-filled-card-container-shape, var(--md-sys-shape-corner-medium));
-}
-.micl-card-outlined .micl-card__image {
-    border-radius: var(--md-comp-outlined-card-container-shape, var(--md-sys-shape-corner-medium));
+    border-radius: var(--_shape);
 }
 
 .micl-card-elevated,
@@ -320,12 +311,12 @@ body {
     display: flex;
     align-items: center;
     column-gap: var(--md-comp-card-gap, 8px);
-    color: var(--md-sys-color-on-surface-variant);
+    color: var(--_text-color);
 
     h1, h2, h3, h4, h5, h6, .micl-heading {
         flex: 1 2 fit-content;
         margin: 0;
-        padding-inline: var(--md-comp-card-padding-inline);
+        padding-inline: var(--md-comp-card-padding-inline, 16px);
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
@@ -338,73 +329,42 @@ body {
         margin-block: 0;
     }
 }
-.micl-card__headline-s {
-    h1, h2, h3, h4, h5, h6, .micl-heading {
-        @include typography.headline-small;
-    }
-}
-.micl-card__headline-m {
-    h1, h2, h3, h4, h5, h6, .micl-heading {
-        @include typography.headline-medium;
-    }
-}
-.micl-card__headline-l {
-    h1, h2, h3, h4, h5, h6, .micl-heading {
-        @include typography.headline-large;
-    }
-}
+
+.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; }
 
 .micl-card__subhead {
     @include typography.title-medium;
-
     display: block;
-    margin: 0;
-    padding: 0 var(--md-comp-card-padding-inline);
+    margin: calc(-1 * var(--md-comp-card-gap, 8px)) 0 var(--md-comp-card-gap, 8px) 0;
+    padding: 0 var(--md-comp-card-padding-inline, 16px);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    color: var(--md-sys-color-on-surface-variant);
+    color: var(--_text-color);
 }
 
 .micl-card__supporting-text {
     @include typography.body-small;
-
     display: block;
     margin: 0;
-    padding: 0 var(--md-comp-card-padding-inline);
-    color: var(--md-sys-color-on-surface-variant);
-}
-
-.micl-card-elevated[tabindex='0']:not(.micl-card--disabled),
-.micl-card-filled[tabindex='0']:not(.micl-card--disabled),
-.micl-card-outlined[tabindex='0']:not(.micl-card--disabled),
-.micl-card-elevated:not(.micl-card--disabled) > summary,
-.micl-card-filled:not(.micl-card--disabled) > summary,
-.micl-card-outlined:not(.micl-card--disabled) > summary {
-    &:hover,
-    &:focus-visible,
-    &:active,
-    &.micl-card--dragging {
-        .micl-card__headline-s,
-        .micl-card__headline-m,
-        .micl-card__headline-l {
-            color: var(--md-sys-color-on-surface);
-
-            button {
-                color: var(--md-sys-color-on-surface);
-            }
-        }
-        .micl-card__subhead,
-        .micl-card__supporting-text {
-            color: var(--md-sys-color-on-surface);
-        }
-    }
+    padding: 0 var(--md-comp-card-padding-inline, 16px);
+    color: var(--_text-color);
 }
 
 .micl-card__content {
     box-sizing: border-box;
-    padding-block: var(--md-comp-card-content-padding-block);
-    padding-inline: var(--md-comp-card-padding-inline);
+    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;
 }

package/components/datepicker/README.md

@@ -12,7 +12,7 @@ The Date Picker component is an extension of the [**Dialog** component](../dialo
     <div class="micl-dialog__headline">
       <h2 id="mytitle">Enter date</h2>
       <span class="micl-dialog__supporting-text">Select date</span>
-      <button type="button" class="micl-datepicker__inputmode micl-iconbutton-standard-s material-symbols-outlined" data-miclalt="calendar_today">edit</button>
+      <button type="button" id="btn" class="micl-datepicker__inputmode micl-iconbutton-standard-s micl-button--toggle material-symbols-outlined" commandfor="btn" command="--micl-toggle" data-miclicon="edit" data-micliconselected="calendar_today"></button>
       <hr class="micl-divider">
       <div class="micl-datepicker__month-selector">
         <button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous month">chevron_left</button>
@@ -109,7 +109,8 @@ Any item not required for your implementation may be omitted.
 To allow users to toggle between the calendar view and the manual date input, add an icon button to the `micl-dialog__headline` area:
 
 - Class: `micl-datepicker__inputmode`
-- Data Attribute: `data-miclalt="calendar_today"` (defines the icon to show when toggled).
+- Data Attribute: `data-miclicon="edit"` (defines the icon to show).
+- Data Attribute: `data-micliconselected="calendar_today"` (defines the icon to show when toggled).
 
 ### Integration
 You can trigger the Date picker component from standard input fields or buttons.

package/components/datepicker/index.ts

@@ -432,14 +432,6 @@ const toggleView = (dialog: HTMLDialogElement, view: 'calendars' | 'months' | 'y
             period.classList.toggle('micl-datepicker__view-hidden', doHide);
         }
     });
-
-    const mode = dialog.querySelector<HTMLElement>('.micl-datepicker__inputmode[data-miclalt]');
-    if (mode) {
-        if (!mode.dataset.miclalticon) {
-            mode.dataset.miclalticon = mode.textContent;
-        }
-        mode.textContent = (view === 'input' ? mode.dataset.miclalt : mode.dataset.miclalticon) || '';
-    }
 };
 
 const changePeriod = (dialog: HTMLDialogElement, amount: number, unit: 'month' | 'year'): void =>

package/components/iconbutton/README.md

@@ -79,6 +79,17 @@ A toggle button has two states: **on** (selected) and **off** (unselected). To c
 
 The self-targeting `command` property (`--micl-toggle`) toggles the button state whenever the user interacts with the button.
 
+To use different icons for the **on** state and the **off** state, remove the icon name from the button and add the `data-miclicon` (the name of the **on** icon) and `data-micliconselected` (the name of the **off** icon) attributes:
+
+```HTML
+  ...
+  data-miclicon="icon_for_on"
+  data-micliconselected="icon_for_off"
+></button>
+```
+
+Note that the name of the currently used icon is also added to the `class` attribute to support icon libraries using class names to identify icons.
+
 ## Icons
 The examples above use [Google Material Symbols](https://fonts.google.com/icons). For buttons using these icons, a fill-style of `1` is applied when the button is active or hovered over. To enable this effect, ensure your `link` tag includes `FILL@0..1`.
 

package/components/iconbutton/index.scss

@@ -95,6 +95,12 @@ button.micl-iconbutton-outlined-xl {
     &.micl-button--toggle.micl-button--selected {
         font-variation-settings: 'FILL' 1;
     }
+    &.micl-button--toggle:not(.micl-button--selected)::before {
+        content: attr(data-miclicon);
+    }
+    &.micl-button--toggle.micl-button--selected::before {
+        content: attr(data-micliconselected);
+    }
 }
 
 button.micl-iconbutton-standard-xs,
@@ -114,6 +120,9 @@ button.micl-iconbutton-outlined-xs {
     &::before {
         content: "";
         position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
         block-size: var(--md-sys-target-size, 48px);
         inline-size: 100%;
         min-inline-size: var(--md-sys-target-size, 48px);
@@ -162,6 +171,9 @@ button.micl-iconbutton-outlined-s {
     &::before {
         content: "";
         position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
         block-size: var(--md-sys-target-size, 48px);
         inline-size: 100%;
         min-inline-size: var(--md-sys-target-size, 48px);

package/components/iconbutton/index.ts

@@ -21,6 +21,17 @@
 
 export const buttonSelector = 'button.micl-button--toggle';
 
+const toggleIcon = (button: HTMLButtonElement): void =>
+{
+    const selected = button.classList.contains('micl-button--selected');
+    if (button.dataset.micliconselected) {
+        button.classList.toggle(button.dataset.micliconselected, selected);
+    }
+    if (button.dataset.miclicon) {
+        button.classList.toggle(button.dataset.miclicon, !selected);
+    }
+};
+
 export default (() =>
 {
     return {
@@ -35,6 +46,8 @@ export default (() =>
             ) {
                 target.classList.add('micl-button--toggled');
                 target.classList.toggle('micl-button--selected');
+
+                toggleIcon(target);
             }
         },
 
@@ -48,6 +61,8 @@ export default (() =>
             }
             element.dataset.miclinitialized = '1';
 
+            toggleIcon(element);
+
             element.addEventListener('command', this.command);
         },