material-inspired-component-library 6.0.6 → 7.0.0

package/components/card/index.scss

@@ -27,10 +27,10 @@
 @use '../../styles/typography';
 
 :root {
-    --md-sys-card-margin: 8px;
-    --md-sys-card-padding-inline: 16px;
-    --md-sys-card-content-padding-block: 16px;
-    --md-sys-card-outlined-border-width: 1px;
+    --md-comp-card-gap: 8px;
+    --md-comp-card-margin: 8px;
+    --md-comp-card-padding-inline: 16px;
+    --md-comp-card-content-padding-block: 16px;
 }
 
 .micl-card-elevated,
@@ -39,17 +39,30 @@
     --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};
 
-    display: block;
+    --_text-color: var(--md-sys-color-on-surface-variant);
+
+    display: flex;
+    flex-direction: column;
     block-size: fit-content;
     margin: 0;
-    border-radius: var(--md-sys-shape-corner-medium);
     outline: none;
     overflow: hidden;
     interpolate-size: allow-keywords;
 
-    &[tabindex='0']:not(.micl-card--disabled) {
+    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([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%),
@@ -61,37 +74,58 @@
             --statelayer-opacity var(--md-sys-card-motion-duration) linear;
 
         &:hover {
-            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%);
-
-            box-shadow: var(--md-sys-elevation-level1);
+            --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%);
-
-            box-shadow: var(--md-sys-elevation-level3);
+            --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;
@@ -103,101 +137,172 @@
         block-size: auto;
     }
     &> summary {
+        display: flex;
+        flex-direction: column;
+        padding-block-end: var(--md-comp-card-content-padding-block, 16px);
         outline: none;
         list-style: none;
         cursor: pointer;
         -webkit-tap-highlight-color: transparent;
+
+        &:not(.micl-card--compact) {
+            row-gap: var(--md-comp-card-gap, 8px);
+        }
     }
-    &:not([open]):has(> summary.micl-card--compact) {
+
+    &.micl-card--compact, summary.micl-card--compact {
+        display: grid;
+        grid-template-columns: 20% 1fr;
         padding-block-end: 0;
+
+        .micl-card__image {
+            grid-column: 1;
+            grid-row: 1 / 5;
+            block-size: 100%;
+            background-size: cover;
+        }
+        .micl-card__headline-s, .micl-card__headline-m, .micl-card__headline-l,
+        .micl-card__subhead, .micl-card__supporting-text {
+            grid-column: 2;
+            min-inline-size: 0;
+        }
+        .micl-card__headline-s, .micl-card__headline-m, .micl-card__headline-l, .micl-card__supporting-text {
+            margin-block-start: var(--md-comp-card-gap, 8px);
+        }
+        .micl-card__subhead {
+            margin-block-start: 0;
+        }
+        .micl-card__content {
+            grid-column: 1 / span 2;
+        }
+
+        &:not(:has(.micl-card__content)) > :last-child {
+            margin-block-end: var(--md-comp-card-gap, 8px);
+        }
     }
 }
 
 .micl-card-elevated {
-    background-color: var(--md-sys-color-surface-container-low);
-    box-shadow: var(--md-sys-elevation-level1);
+    --_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));
 
-    &[tabindex='0']:not(.micl-card--disabled) {
-        &:hover {
-            box-shadow: var(--md-sys-elevation-level2);
-        }
-        &.micl-card--dragging {
-            box-shadow: var(--md-sys-elevation-level4);
-        }
+    --_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 {
-    background-color: var(--md-sys-color-surface-container-highest);
-    box-shadow: var(--md-sys-elevation-level0);
-}
-.micl-card-outlined {
-    background-color: var(--md-sys-color-surface);
-    box-shadow: var(--md-sys-elevation-level0);
-    border: var(--md-sys-card-outlined-border-width) solid var(--md-sys-color-outline-variant);
+    --_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));
 
-    &[tabindex='0']:not(.micl-card--disabled) {
-        &:focus-visible {
-            border-color: var(--md-sys-color-on-surface);
-        }
-        &:active {
-            border-color: var(--md-sys-color-outline-variant);
-        }
-    }
-}
+    --_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--disabled {
-    opacity: var(--md-sys-state-disabled-state-layer-opacity, 38%);
-    pointer-events: none;
+    --_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));
 
-    &.micl-card-elevated {
-        background-color: var(--md-sys-color-surface);
-    }
-    &.micl-card-filled {
-        background-color: var(--md-sys-color-surface-variant);
-    }
-    &.micl-card-outlined {
-        box-shadow: var(--md-sys-elevation-level0);
-        border-color: rgb(from var(--md-sys-color-outline) r g b / 12%);
+    --_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--compact {
-    display: grid;
-    grid-template-areas:
-        "card-media card-headline"
-        "card-media card-subhead"
-        "card-media card-supporting"
-        "card-content card-content";
-    grid-template-columns: 20% 1fr;
-
-    .micl-card__image {
-        grid-area: card-media;
-        block-size: 100%;
-        object-fit: cover;
-        background-size: cover;
-    }
-    .micl-card__headline-s,
-    .micl-card__headline-m,
-    .micl-card__headline-l {
-        grid-area: card-headline;
-    }
-    .micl-card__subhead {
-        grid-area: card-subhead;
-    }
-    .micl-card__supporting-text {
-        grid-area: card-supporting;
-    }
-    .micl-card__content {
-        grid-area: card-content;
+
+.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;
     }
 }
 
 .micl-card__image {
     display: block;
     inline-size: 100%;
-    border-radius: var(--md-sys-shape-corner-medium);
     background-position: center;
     background-repeat: no-repeat;
     background-size: contain;
+    border-radius: var(--_shape);
+}
+
+.micl-card-elevated,
+.micl-card-filled,
+.micl-card-outlined,
+.micl-card-elevated > summary,
+.micl-card-filled > summary,
+.micl-card-outlined > summary {
+    &> .micl-card__headline-s:first-child,
+    &> .micl-card__headline-m:first-child,
+    &> .micl-card__headline-l:first-child {
+        padding-block-start: var(--md-comp-card-content-padding-block, 16px);
+    }
 }
 
 .micl-card__headline-s,
@@ -205,18 +310,13 @@
 .micl-card__headline-l {
     display: flex;
     align-items: center;
-    column-gap: 8px;
-    padding-block: 8px;
-    color: var(--md-sys-color-on-surface-variant);
-
-    &:first-child {
-        padding-block-start: 16px;
-    }
+    column-gap: var(--md-comp-card-gap, 8px);
+    color: var(--_text-color);
 
     h1, h2, h3, h4, h5, h6, .micl-heading {
         flex: 1 2 fit-content;
         margin: 0;
-        padding-inline: var(--md-sys-card-padding-inline);
+        padding-inline: var(--md-comp-card-padding-inline, 16px);
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
@@ -229,70 +329,42 @@
         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-sys-card-padding-inline) 8px;
+    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-sys-card-padding-inline) 8px;
-    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) {
-    &: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-sys-card-content-padding-block);
-    padding-inline: var(--md-sys-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);
         },
 

package/components/list/index.scss

@@ -71,7 +71,6 @@
         &> summary.micl-list-item-two,
         &> summary.micl-list-item-three {
             position: relative;
-            -webkit-tap-highlight-color: transparent;
 
             &::-webkit-details-marker {
                 display: none;
@@ -153,6 +152,7 @@ select {
     transition:
         background-size 3000ms,
         --statelayer-opacity var(--md-sys-list-motion-duration) linear;
+    -webkit-tap-highlight-color: transparent;
 
     &:not(:has(> button)) {
         --micl-ripple: 1;