material-inspired-component-library 8.0.0 → 8.0.4

package/.claude/settings.local.json

@@ -0,0 +1,14 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(node *)",
+      "WebSearch",
+      "Bash(npm run *)",
+      "WebFetch(domain:raw.githubusercontent.com)",
+      "WebFetch(domain:android.googlesource.com)",
+      "WebFetch(domain:m3.material.io)",
+      "WebFetch(domain:github.com)",
+      "Bash(xargs grep -l \"body\\\\|html\")"
+    ]
+  }
+}

package/components/alert/index.scss

@@ -23,6 +23,11 @@
 @use '../../styles/shapes';
 @use '../../styles/typography';
 
+@include shapes.corner('small');
+
+@include typography.scale('title-medium');
+@include typography.scale('body-medium');
+
 :root {
     --md-sys-alert-padding: 16px;
     --md-sys-alert-space: 16px;

package/components/appbar/index.scss

@@ -26,6 +26,18 @@
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
+@include elevation.level(0);
+@include elevation.level(2);
+
+@include shapes.corner('none');
+
+@include typography.scale('display-small');
+@include typography.scale('headline-medium');
+@include typography.scale('title-large');
+@include typography.scale('title-medium');
+@include typography.scale('title-small');
+@include typography.scale('label-medium');
+
 @mixin appbar-sticky() {
     position: sticky;
     inset: unset;

package/components/badge/index.scss

@@ -22,6 +22,8 @@
 @use '../../foundations';
 @use '../../styles/typography';
 
+@include typography.scale('label-small');
+
 :root {
     --md-sys-badge-small-size: 6px;
     --md-sys-badge-large-size: 16px;

package/components/bottomsheet/index.scss

@@ -25,6 +25,15 @@
 @use '../../styles/shapes';
 @use '../../styles/statelayer';
 
+@include elevation.level(1);
+
+@include shapes.corner('extra-large');
+@include shapes.corner('small');
+
+@include statelayer.token('focus-indicator-thickness');
+@include statelayer.token('focus-indicator-outer-offset');
+@include statelayer.token('backdrop-opacity');
+
 dialog.micl-bottomsheet {
     --md-sys-bottomsheet-height: max-content;
     --md-sys-bottomsheet-margin: 56px;

package/components/button/index.scss

@@ -26,35 +26,55 @@
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
-button.micl-button-text-xs,
-a.micl-button-text-xs,
-button.micl-button-text-s,
-a.micl-button-text-s,
-button.micl-button-text-m,
-a.micl-button-text-m,
-button.micl-button-text-l,
-button.micl-button-text-l,
-button.micl-button-text-xl,
-button.micl-button-elevated-xs,
-button.micl-button-elevated-s,
-button.micl-button-elevated-m,
-button.micl-button-elevated-l,
-button.micl-button-elevated-xl,
-button.micl-button-filled-xs,
-button.micl-button-filled-s,
-button.micl-button-filled-m,
-button.micl-button-filled-l,
-button.micl-button-filled-xl,
-button.micl-button-tonal-xs,
-button.micl-button-tonal-s,
-button.micl-button-tonal-m,
-button.micl-button-tonal-l,
-button.micl-button-tonal-xl,
-button.micl-button-outlined-xs,
-button.micl-button-outlined-s,
-button.micl-button-outlined-m,
-button.micl-button-outlined-l,
-button.micl-button-outlined-xl {
+@include elevation.level(0);
+@include elevation.level(1);
+
+@include shapes.corner('small');
+@include shapes.corner('medium');
+@include shapes.corner('large');
+@include shapes.corner('extra-large');
+
+@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 typography.scale('headline-large');
+@include typography.scale('headline-small');
+@include typography.scale('title-medium');
+@include typography.scale('label-large');
+
+.micl-button-text-xs,
+.micl-button-text-s,
+.micl-button-text-m,
+.micl-button-text-l,
+.micl-button-text-l,
+.micl-button-text-xl,
+.micl-button-elevated-xs,
+.micl-button-elevated-s,
+.micl-button-elevated-m,
+.micl-button-elevated-l,
+.micl-button-elevated-xl,
+.micl-button-filled-xs,
+.micl-button-filled-s,
+.micl-button-filled-m,
+.micl-button-filled-l,
+.micl-button-filled-xl,
+.micl-button-tonal-xs,
+.micl-button-tonal-s,
+.micl-button-tonal-m,
+.micl-button-tonal-l,
+.micl-button-tonal-xl,
+.micl-button-outlined-xs,
+.micl-button-outlined-s,
+.micl-button-outlined-m,
+.micl-button-outlined-l,
+.micl-button-outlined-xl {
     --md-sys-button-motion-effects: #{motion.$md-sys-motion-expressive-fast-spatial};
     --md-sys-button-motion-duration: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
     --md-sys-button-motion-duration-reverse: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
@@ -112,12 +132,11 @@ button.micl-button-outlined-xl {
     }
 }
 
-button.micl-button-text-xs,
-a.micl-button-text-xs,
-button.micl-button-elevated-xs,
-button.micl-button-filled-xs,
-button.micl-button-tonal-xs,
-button.micl-button-outlined-xs {
+.micl-button-text-xs,
+.micl-button-elevated-xs,
+.micl-button-filled-xs,
+.micl-button-tonal-xs,
+.micl-button-outlined-xs {
     @include typography.label-large;
 
     --micl-width: 32px;
@@ -160,12 +179,11 @@ button.micl-button-outlined-xs {
     }
 }
 
-button.micl-button-text-s,
-a.micl-button-text-s,
-button.micl-button-elevated-s,
-button.micl-button-filled-s,
-button.micl-button-tonal-s,
-button.micl-button-outlined-s {
+.micl-button-text-s,
+.micl-button-elevated-s,
+.micl-button-filled-s,
+.micl-button-tonal-s,
+.micl-button-outlined-s {
     @include typography.label-large;
 
     --micl-width: 40px;
@@ -207,12 +225,11 @@ button.micl-button-outlined-s {
     }
 }
 
-button.micl-button-text-m,
-a.micl-button-text-m,
-button.micl-button-elevated-m,
-button.micl-button-filled-m,
-button.micl-button-tonal-m,
-button.micl-button-outlined-m {
+.micl-button-text-m,
+.micl-button-elevated-m,
+.micl-button-filled-m,
+.micl-button-tonal-m,
+.micl-button-outlined-m {
     @include typography.title-medium;
 
     --micl-width: 56px;
@@ -245,11 +262,11 @@ button.micl-button-outlined-m {
     }
 }
 
-button.micl-button-text-l,
-button.micl-button-elevated-l,
-button.micl-button-filled-l,
-button.micl-button-tonal-l,
-button.micl-button-outlined-l {
+.micl-button-text-l,
+.micl-button-elevated-l,
+.micl-button-filled-l,
+.micl-button-tonal-l,
+.micl-button-outlined-l {
     @include typography.headline-small;
 
     --micl-width: 96px;
@@ -282,11 +299,11 @@ button.micl-button-outlined-l {
     }
 }
 
-button.micl-button-text-xl,
-button.micl-button-elevated-xl,
-button.micl-button-filled-xl,
-button.micl-button-tonal-xl,
-button.micl-button-outlined-xl {
+.micl-button-text-xl,
+.micl-button-elevated-xl,
+.micl-button-filled-xl,
+.micl-button-tonal-xl,
+.micl-button-outlined-xl {
     @include typography.headline-large;
 
     --micl-width: 136px;
@@ -319,14 +336,11 @@ button.micl-button-outlined-xl {
     }
 }
 
-button.micl-button-text-xs,
-a.micl-button-text-xs,
-button.micl-button-text-s,
-a.micl-button-text-s,
-button.micl-button-text-m,
-a.micl-button-text-m,
-button.micl-button-text-l,
-button.micl-button-text-xl {
+.micl-button-text-xs,
+.micl-button-text-s,
+.micl-button-text-m,
+.micl-button-text-l,
+.micl-button-text-xl {
     --statelayer-color: var(--md-sys-color-primary);
 
     background-color: transparent;
@@ -350,11 +364,11 @@ button.micl-button-text-xl {
     }
 }
 
-button.micl-button-elevated-xs,
-button.micl-button-elevated-s,
-button.micl-button-elevated-m,
-button.micl-button-elevated-l,
-button.micl-button-elevated-xl {
+.micl-button-elevated-xs,
+.micl-button-elevated-s,
+.micl-button-elevated-m,
+.micl-button-elevated-l,
+.micl-button-elevated-xl {
     --statelayer-color: var(--md-sys-color-primary);
 
     background-color: var(--md-sys-color-surface-container-low);
@@ -387,20 +401,20 @@ button.micl-button-elevated-xl {
         }
     }
 }
-button.micl-button-elevated-xs {
+.micl-button-elevated-xs {
     block-size: 32px;
     border: none;
 }
-button.micl-button-elevated-s {
+.micl-button-elevated-s {
     block-size: 40px;
     border: none;
 }
 
-button.micl-button-filled-xs,
-button.micl-button-filled-s,
-button.micl-button-filled-m,
-button.micl-button-filled-l,
-button.micl-button-filled-xl {
+.micl-button-filled-xs,
+.micl-button-filled-s,
+.micl-button-filled-m,
+.micl-button-filled-l,
+.micl-button-filled-xl {
     --statelayer-color: var(--md-sys-color-on-primary);
 
     background-color: var(--md-sys-color-primary);
@@ -434,11 +448,11 @@ button.micl-button-filled-xl {
     }
 }
 
-button.micl-button-tonal-xs,
-button.micl-button-tonal-s,
-button.micl-button-tonal-m,
-button.micl-button-tonal-l,
-button.micl-button-tonal-xl {
+.micl-button-tonal-xs,
+.micl-button-tonal-s,
+.micl-button-tonal-m,
+.micl-button-tonal-l,
+.micl-button-tonal-xl {
     --statelayer-color: var(--md-sys-color-on-secondary-container);
 
     background-color: var(--md-sys-color-secondary-container);
@@ -471,11 +485,11 @@ button.micl-button-tonal-xl {
     }
 }
 
-button.micl-button-outlined-xs,
-button.micl-button-outlined-s,
-button.micl-button-outlined-m,
-button.micl-button-outlined-l,
-button.micl-button-outlined-xl {
+.micl-button-outlined-xs,
+.micl-button-outlined-s,
+.micl-button-outlined-m,
+.micl-button-outlined-l,
+.micl-button-outlined-xl {
     --statelayer-color: var(--md-sys-color-on-surface-variant);
 
     background-color: transparent;
@@ -507,14 +521,14 @@ button.micl-button-outlined-xl {
         }
     }
 }
-button.micl-button-outlined-xs,
-button.micl-button-outlined-s,
-button.micl-button-outlined-m {
+.micl-button-outlined-xs,
+.micl-button-outlined-s,
+.micl-button-outlined-m {
     border: 1px solid var(--md-sys-color-outline-variant);
 }
-button.micl-button-outlined-l {
+.micl-button-outlined-l {
     border: 2px solid var(--md-sys-color-outline-variant);
 }
-button.micl-button-outlined-xl {
+.micl-button-outlined-xl {
     border: 3px solid var(--md-sys-color-outline-variant);
 }

package/components/card/index.scss

@@ -27,6 +27,29 @@
 @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,
@@ -385,4 +408,11 @@
     gap: 8px;
     padding-block: 0 var(--md-comp-card-content-padding-block, 16px);
     padding-inline: var(--md-comp-card-padding-inline, 16px);
+
+    &.micl-card__actions--outset-start {
+        padding-inline-start: calc(var(--md-comp-card-padding-inline, 16px) - 16px);
+    }
+    &.micl-card__actions--outset-end {
+        padding-inline-end: calc(var(--md-comp-card-padding-inline, 16px) - 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;

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/dialog/index.scss

@@ -26,6 +26,22 @@
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
+@include elevation.level(0);
+@include elevation.level(2);
+@include elevation.level(3);
+
+@include shapes.corner('none');
+@include shapes.corner('extra-large');
+
+@include statelayer.token('hover-state-layer-opacity');
+@include statelayer.token('backdrop-opacity');
+@include statelayer.property;
+
+@include typography.scale('headline-small');
+@include typography.scale('title-large');
+@include typography.scale('title-medium');
+@include typography.scale('body-medium');
+
 :root {
     --md-sys-dialog-min-width: 280px;
     --md-sys-dialog-max-width: 560px;

package/components/iconbutton/index.scss

@@ -25,6 +25,24 @@
 @use '../../styles/shapes';
 @use '../../styles/statelayer';
 
+@include elevation.level(0);
+
+@include shapes.corner('small');
+@include shapes.corner('medium');
+@include shapes.corner('large');
+@include shapes.corner('extra-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.token('focus-indicator-thickness');
+@include statelayer.token('ripple-opacity-factor');
+@include statelayer.token('ripple-duration');
+@include statelayer.property;
+@include statelayer.keyframes;
+
 button.micl-iconbutton-standard-xs,
 a.micl-iconbutton-standard-xs,
 button.micl-iconbutton-standard-s,

package/components/list/index.scss

@@ -26,6 +26,31 @@
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
+@include elevation.level(4);
+
+@include shapes.corner('extra-small');
+@include shapes.corner('small');
+@include shapes.corner('medium');
+@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('dragged-state-layer-opacity');
+@include statelayer.token('disabled-state-layer-opacity');
+@include statelayer.token('focus-indicator-thickness');
+@include statelayer.token('focus-indicator-inner-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-large');
+@include typography.scale('body-medium');
+@include typography.scale('label-small');
+
 :root {
     --md-comp-accordion-item-space: 0px;
 }
@@ -33,10 +58,12 @@
 $item-padding-block: var(--md-comp-list-item-top-space, 10px) var(--md-comp-list-item-bottom-space, 10px);
 $item-padding-inline: var(--md-comp-list-item-leading-space, 16px) var(--md-comp-list-item-trailing-space, 16px);
 
+$open-accordion: ':where(details[open] > *)';
+
 %shared-interactive-states {
     cursor: pointer;
 
-    &:not(:has(input[type=checkbox]:checked)) {
+    &:not(:has(input[type=checkbox]:checked)):not(#{$open-accordion}) {
         &:hover {
             --_list-item-shape: var(--md-comp-list-item-container-hovered-expressive-shape, var(--md-sys-shape-corner-medium, 12px));
             --_headline-color: var(--md-comp-list-item-hover-label-text-color, var(--md-sys-color-on-surface));
@@ -84,7 +111,7 @@ $item-padding-inline: var(--md-comp-list-item-leading-space, 16px) var(--md-comp
             cursor: grabbing;
         }
     }
-    &:has(input[type=checkbox]:checked) {
+    &:is(:has(input[type=checkbox]:checked), #{$open-accordion}) {
         &:hover {
             --_list-item-shape: var(--md-comp-list-item-container-selected-hovered-expressive-shape, var(--md-sys-shape-corner-large, 16px));
             --_headline-color: var(--md-comp-list-item-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container));
@@ -302,7 +329,7 @@ $item-padding-inline: var(--md-comp-list-item-leading-space, 16px) var(--md-comp
             opacity: var(--md-sys-state-disabled-state-layer-opacity, 38%);
         }
 
-        &:checked, &:has(input[type=checkbox]:checked) {
+        &:checked, &:has(input[type=checkbox]:checked), &#{$open-accordion} {
             --_list-item-background-color: var(--md-comp-list-item-selected-disabled-container-color, var(--md-sys-color-on-surface));
             --_list-item-background-opacity: var(--md-comp-list-item-selected-disabled-container-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%));
             --_list-item-shape: var(--md-comp-list-item-container-selected-disabled-expressive-shape, var(--md-sys-shape-corner-large, 16px));
@@ -316,7 +343,7 @@ $item-padding-inline: var(--md-comp-list-item-leading-space, 16px) var(--md-comp
             --statelayer-opacity: var(--md-comp-list-item-selected-disabled-state-layer-opacity, 0%);
         }
     }
-    &:checked, &:has(input[type=checkbox]:checked) {
+    &:checked, &:has(input[type=checkbox]:checked), &#{$open-accordion} {
         --_list-item-background-color: var(--md-comp-list-item-selected-container-color, var(--md-sys-color-secondary-container));
         --_list-item-background-opacity: 100%;
         --_overline-color: var(--md-comp-list-item-selected-overline-color, var(--md-sys-color-on-secondary-container));
@@ -327,7 +354,7 @@ $item-padding-inline: var(--md-comp-list-item-leading-space, 16px) var(--md-comp
         --_trailing-icon-color: var(--md-comp-list-item-selected-trailing-icon-color, var(--md-sys-color-on-secondary-container));
     }
     &:not(:disabled):not(.micl-list-item--disabled) {
-        &:checked, &:has(input[type=checkbox]:checked) {
+        &:checked, &:has(input[type=checkbox]:checked), &#{$open-accordion} {
             --_list-item-shape: var(--md-comp-list-item-container-selected-expressive-shape, var(--md-sys-shape-corner-large, 16px));
         }
         input[type=checkbox]:not(:disabled):hover,

package/components/menu/index.scss

@@ -23,8 +23,26 @@
 @use '../../styles/elevation';
 @use '../../styles/motion';
 @use '../../styles/shapes';
+@use '../../styles/statelayer';
 @use '../../styles/typography';
 
+@include elevation.level(2);
+
+@include shapes.corner('small');
+@include shapes.corner('large');
+
+@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('focus-indicator-inner-offset');
+@include statelayer.token('backdrop-opacity');
+
+@include typography.scale('label-large');
+@include typography.scale('label-small');
+@include typography.scale('body-small');
+
 :root {
     --md-comp-menu-width-max: 320px;
     --md-comp-menu-width-min: 112px;

package/components/navigationrail/index.scss

@@ -27,6 +27,23 @@
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
+@include elevation.level(0);
+@include elevation.level(2);
+
+@include shapes.corner('large');
+
+@include statelayer.token('hover-state-layer-opacity');
+@include statelayer.token('focus-state-layer-opacity');
+@include statelayer.token('pressed-state-layer-opacity');
+@include statelayer.token('backdrop-opacity');
+@include statelayer.token('ripple-opacity-factor');
+@include statelayer.token('ripple-duration');
+@include statelayer.property;
+@include statelayer.keyframes;
+
+@include typography.scale('label-large');
+@include typography.scale('label-medium');
+
 .micl-navigationrail {
     --md-comp-nav-rail-spring-buffer: 100px;
     --md-comp-nav-rail-divider-thickness: 0px;