material-inspired-component-library 8.0.1 → 8.1.0

package/README.md

@@ -114,6 +114,7 @@ The library currently consists of the following components:
 - [x] [Navigation rail](components/navigationrail/README.md)
 - [x] [Radio button](components/radio/README.md)
 - [x] [Select](components/select/README.md)
+- [x] [Shapes](components/shapes/README.md)
 - [x] [Side sheet](components/sidesheet/README.md)
 - [x] [Slider](components/slider/README.md)
 - [x] [Snackbar](components/snackbar/README.md)
@@ -124,6 +125,9 @@ The library currently consists of the following components:
 
 ## Change Log ↪️
 
+### 8.1.0 (24.06.2026)
+- **Shapes**: The Material shape library supported as the 'Shapes' component.
+
 ### 8.0.0 (05.05.2026)
 - **BREAKING**: Renamed many CSS custom properties from --md-sys- to --md-comp-.
 - **List, Menu, Accordion, Select**: Aligned with latest MD3 spec.

package/components/alert/index.scss

@@ -20,10 +20,10 @@
 // SOFTWARE.
 
 @use '../../foundations';
-@use '../../styles/shapes';
+@use '../../styles/shape';
 @use '../../styles/typography';
 
-@include shapes.corner('small');
+@include shape.corner('small');
 
 @include typography.scale('title-medium');
 @include typography.scale('body-medium');

package/components/appbar/index.scss

@@ -22,14 +22,14 @@
 @use '../../foundations';
 @use '../../foundations/layout';
 @use '../../styles/elevation';
-@use '../../styles/shapes';
+@use '../../styles/shape';
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
 @include elevation.level(0);
 @include elevation.level(2);
 
-@include shapes.corner('none');
+@include shape.corner('none');
 
 @include typography.scale('display-small');
 @include typography.scale('headline-medium');

package/components/bottomsheet/index.scss

@@ -22,13 +22,13 @@
 @use '../../foundations';
 @use '../../styles/elevation';
 @use '../../styles/motion';
-@use '../../styles/shapes';
+@use '../../styles/shape';
 @use '../../styles/statelayer';
 
 @include elevation.level(1);
 
-@include shapes.corner('extra-large');
-@include shapes.corner('small');
+@include shape.corner('extra-large');
+@include shape.corner('small');
 
 @include statelayer.token('focus-indicator-thickness');
 @include statelayer.token('focus-indicator-outer-offset');

package/components/button/index.scss

@@ -22,17 +22,17 @@
 @use '../../foundations';
 @use '../../styles/elevation';
 @use '../../styles/motion';
-@use '../../styles/shapes';
+@use '../../styles/shape';
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
 @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 shape.corner('small');
+@include shape.corner('medium');
+@include shape.corner('large');
+@include shape.corner('extra-large');
 
 @include statelayer.token('hover-state-layer-opacity');
 @include statelayer.token('focus-state-layer-opacity');
@@ -49,35 +49,32 @@
 @include typography.scale('title-medium');
 @include typography.scale('label-large');
 
-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 {
+.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};
@@ -135,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;
@@ -183,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;
@@ -230,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;
@@ -268,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;
@@ -305,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;
@@ -342,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;
@@ -373,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);
@@ -410,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);
@@ -457,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);
@@ -494,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;
@@ -530,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

@@ -23,7 +23,7 @@
 @use '../../foundations';
 @use '../../styles/elevation';
 @use '../../styles/motion';
-@use '../../styles/shapes';
+@use '../../styles/shape';
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
@@ -33,7 +33,7 @@
 @include elevation.level(3);
 @include elevation.level(4);
 
-@include shapes.corner('medium');
+@include shape.corner('medium');
 
 @include statelayer.token('hover-state-layer-opacity');
 @include statelayer.token('focus-state-layer-opacity');
@@ -236,7 +236,7 @@
 
         .micl-card__image {
             grid-column: 1;
-            grid-row: 1 / -1;
+            grid-row: 1 / span 4;
             block-size: 100%;
             background-size: cover;
         }
@@ -408,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,11 +21,11 @@
 
 @use '../../foundations';
 @use '../../styles/motion';
-@use '../../styles/shapes';
+@use '../../styles/shape';
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
-@include shapes.corner('full');
+@include shape.corner('full');
 
 @include statelayer.token('layer-size');
 @include statelayer.token('hover-state-layer-opacity');

package/components/datepicker/index.scss

@@ -21,12 +21,12 @@
 
 @use '../../foundations';
 @use '../../styles/motion';
-@use '../../styles/shapes';
+@use '../../styles/shape';
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
-@include shapes.corner('large');
-@include shapes.corner('full');
+@include shape.corner('large');
+@include shape.corner('full');
 
 @include statelayer.token('hover-state-layer-opacity');
 @include statelayer.token('focus-state-layer-opacity');

package/components/dialog/index.scss

@@ -22,7 +22,7 @@
 @use '../../foundations';
 @use '../../styles/elevation';
 @use '../../styles/motion';
-@use '../../styles/shapes';
+@use '../../styles/shape';
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
@@ -30,8 +30,8 @@
 @include elevation.level(2);
 @include elevation.level(3);
 
-@include shapes.corner('none');
-@include shapes.corner('extra-large');
+@include shape.corner('none');
+@include shape.corner('extra-large');
 
 @include statelayer.token('hover-state-layer-opacity');
 @include statelayer.token('backdrop-opacity');

package/components/iconbutton/index.scss

@@ -22,16 +22,16 @@
 @use '../../foundations';
 @use '../../styles/elevation';
 @use '../../styles/motion';
-@use '../../styles/shapes';
+@use '../../styles/shape';
 @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 shape.corner('small');
+@include shape.corner('medium');
+@include shape.corner('large');
+@include shape.corner('extra-large');
+@include shape.corner('full');
 
 @include statelayer.token('hover-state-layer-opacity');
 @include statelayer.token('focus-state-layer-opacity');

package/components/list/index.scss

@@ -22,17 +22,17 @@
 @use '../../foundations';
 @use '../../styles/elevation';
 @use '../../styles/motion';
-@use '../../styles/shapes';
+@use '../../styles/shape';
 @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 shape.corner('extra-small');
+@include shape.corner('small');
+@include shape.corner('medium');
+@include shape.corner('large');
+@include shape.corner('full');
 
 @include statelayer.token('hover-state-layer-opacity');
 @include statelayer.token('focus-state-layer-opacity');
@@ -58,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));
@@ -109,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));
@@ -327,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));
@@ -341,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));
@@ -352,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

@@ -22,14 +22,14 @@
 @use '../../foundations';
 @use '../../styles/elevation';
 @use '../../styles/motion';
-@use '../../styles/shapes';
+@use '../../styles/shape';
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
 @include elevation.level(2);
 
-@include shapes.corner('small');
-@include shapes.corner('large');
+@include shape.corner('small');
+@include shape.corner('large');
 
 @include statelayer.token('hover-state-layer-opacity');
 @include statelayer.token('focus-state-layer-opacity');

package/components/navigationrail/index.scss

@@ -23,14 +23,14 @@
 @use '../../foundations/layout';
 @use '../../styles/elevation';
 @use '../../styles/motion';
-@use '../../styles/shapes';
+@use '../../styles/shape';
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
 @include elevation.level(0);
 @include elevation.level(2);
 
-@include shapes.corner('large');
+@include shape.corner('large');
 
 @include statelayer.token('hover-state-layer-opacity');
 @include statelayer.token('focus-state-layer-opacity');

package/components/radio/index.scss

@@ -21,10 +21,10 @@
 
 @use '../../foundations';
 @use '../../styles/motion';
-@use '../../styles/shapes';
+@use '../../styles/shape';
 @use '../../styles/statelayer';
 
-@include shapes.corner('full');
+@include shape.corner('full');
 
 @include statelayer.token('layer-size');
 @include statelayer.token('hover-state-layer-opacity');

package/components/select/index.scss

@@ -22,13 +22,13 @@
 @use '../../foundations';
 @use '../../styles/elevation';
 @use '../../styles/motion';
-@use '../../styles/shapes';
+@use '../../styles/shape';
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
 @include elevation.level(2);
 
-@include shapes.corner('large');
+@include shape.corner('large');
 
 @include statelayer.token('disabled-state-layer-opacity');
 
@@ -113,6 +113,8 @@
 
         .micl-list-item__text::after {
             content: attr(aria-description);
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
         &::checkmark {
             color: var(--md-sys-color-on-surface-variant);