material-inspired-component-library 1.2.1 → 1.3.0

package/README.md

@@ -88,6 +88,7 @@ The library currently consists of the following components:
 - [x] [Icon button](components/iconbutton/README.md)
 - [x] [List](components/list/README.md)
 - [x] [Menu](components/menu/README.md)
+- [ ] [Navigation rail](components/navigationrail/README.md)
 - [x] [Radio button](components/radio/README.md)
 - [x] [Select](components/select/README.md)
 - [x] [Side sheet](components/sidesheet/README.md)
@@ -97,10 +98,19 @@ The library currently consists of the following components:
 
 ## Change Log
 
-### 1.1.0 (12.08.2025)
+### 1.3.0 (23.08.2025)
 **Features**
-- **Text field**: Added support for multi-line text fields.
+
+- **Menu**: Added support for submenus.
+- **Ripple**: The ripple-effect does not use a pseudo-element anymore.
+- **State layer**: Rewrite for simpler styling.
 
 ### 1.2.0 (17.08.2025)
 **Features**
+
 - **List**: Added support for switches inside list items.
+
+### 1.1.0 (12.08.2025)
+**Features**
+
+- **Text field**: Added support for multi-line text fields.

package/components/bottomsheet/index.scss

@@ -30,6 +30,9 @@ dialog.micl-bottomsheet {
     --md-sys-bottomsheet-padding: 24px;
     --md-sys-bottomsheet-handle-width: 32px;
     --md-sys-bottomsheet-handle-height: 4px;
+    --md-sys-bottomsheet-motion-spatial: #{motion.$md-sys-motion-expressive-slow-spatial};
+    --md-sys-bottomsheet-motion-duration: #{motion.$md-sys-motion-expressive-slow-spatial-duration};
+    --md-sys-bottomsheet-motion-duration-reverse: #{motion.$md-sys-motion-expressive-default-spatial-duration};
 
     box-sizing: border-box;
     position: fixed;
@@ -51,10 +54,10 @@ dialog.micl-bottomsheet {
 
     &:not(.micl-bottomsheet--resizing) {
         transition:
-            display var(--md-sys-motion-duration-medium1) allow-discrete,
-            overlay var(--md-sys-motion-duration-medium1) allow-discrete,
-            height var(--md-sys-motion-duration-medium1) linear(motion.$md-sys-motion-spring-default-spatial),
-            opacity var(--md-sys-motion-duration-medium1) motion.$md-sys-motion-easing-emphasized-accelerate;
+            opacity var(--md-sys-bottomsheet-motion-duration-reverse) motion.$md-sys-motion-easing-emphasized-accelerate,
+            height var(--md-sys-bottomsheet-motion-duration-reverse) var(--md-sys-bottomsheet-motion-spatial),
+            overlay var(--md-sys-bottomsheet-motion-duration-reverse) linear allow-discrete,
+            display var(--md-sys-bottomsheet-motion-duration-reverse) linear allow-discrete;
     }
     &.micl-bottomsheet--resizing .micl-bottomsheet__headline {
         cursor: grabbing;
@@ -93,9 +96,9 @@ dialog.micl-bottomsheet {
     &::backdrop {
         background-color: rgba(0, 0, 0, 0);
         transition:
-            display var(--md-sys-motion-duration-long2) linear allow-discrete,
-            overlay var(--md-sys-motion-duration-long2) linear allow-discrete,
-            background-color var(--md-sys-motion-duration-long2) linear;
+            overlay var(--md-sys-bottomsheet-motion-duration) linear allow-discrete,
+            display var(--md-sys-bottomsheet-motion-duration) linear allow-discrete,
+            background-color var(--md-sys-bottomsheet-motion-duration) linear;
     }
     &:popover-open,
     &[open] {
@@ -105,23 +108,22 @@ dialog.micl-bottomsheet {
 
         &:not(.micl-bottomsheet--resizing) {
             transition:
-                display var(--md-sys-motion-duration-long2) linear allow-discrete,
-                overlay var(--md-sys-motion-duration-long2) linear allow-discrete,
-                height var(--md-sys-motion-duration-long2) linear(motion.$md-sys-motion-spring-default-spatial),
-                opacity var(--md-sys-motion-duration-long2) motion.$md-sys-motion-easing-emphasized-decelerate;
+                opacity var(--md-sys-bottomsheet-motion-duration) motion.$md-sys-motion-easing-emphasized-decelerate,
+                height var(--md-sys-bottomsheet-motion-duration) var(--md-sys-bottomsheet-motion-spatial),
+                overlay var(--md-sys-bottomsheet-motion-duration) linear allow-discrete,
+                display var(--md-sys-bottomsheet-motion-duration) linear allow-discrete;
         }
         @starting-style {
             height: 0;
             opacity: 0;
         }
-        &::backdrop {
-            @starting-style {
-                background-color: rgba(0, 0, 0, 0);
-            }
-        }
     }
     &[open]::backdrop {
         background-color: rgba(0, 0, 0, 0.2);
+
+        @starting-style {
+            background-color: rgba(0, 0, 0, 0);
+        }
     }
 }
 

package/components/button/README.md

@@ -18,7 +18,7 @@ Import the button styles into your project:
 ```
 
 ### JavaScript
-This component requires JavaScript for interactive features like the **ripple effect** and **toggle logic**:
+This component requires JavaScript for interactive features like the **toggle logic**:
 
 ```JavaScript
 import micl from "material-inspired-component-library/dist/micl";

package/components/button/index.scss

@@ -21,7 +21,6 @@
 
 @use '../../styles/elevation';
 @use '../../styles/motion';
-@use '../../styles/ripple';
 @use '../../styles/shapes';
 @use '../../styles/statelayer';
 @use '../../styles/typography';
@@ -51,10 +50,23 @@ button.micl-button-outlined-s,
 button.micl-button-outlined-m,
 button.micl-button-outlined-l,
 button.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};
+    --miclripple: 1;
+
     padding: 0;
     border: none;
+    background-image:
+        radial-gradient(circle at var(--x, center) var(--y, center), transparent 0%, rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)) 10%, transparent 10%),
+        linear-gradient(rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)));
+    background-repeat: no-repeat;
+    background-size: 10000%, 100%;
     cursor: pointer;
-    transition: border-radius var(--md-sys-motion-duration-extra-long4) linear(motion.$md-sys-motion-spring-fast-spatial);
+    transition:
+        border-radius var(--md-sys-button-motion-duration) var(--md-sys-button-motion-effects),
+        background-size 3000ms,
+        --statelayer-opacity var(--md-sys-button-motion-duration) linear;
 
     &:disabled {
         background-color: rgb(from var(--md-sys-color-on-surface) r g b / 10%);
@@ -62,13 +74,19 @@ button.micl-button-outlined-xl {
         box-shadow: var(--md-sys-elevation-level0);
         cursor: default;
     }
-    &:not(:disabled):focus-visible {
-        outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
-        outline-offset: 3px;
+    &:not(:disabled) {
+        &:focus-visible {
+            outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
+            outline-offset: 3px;
+        }
+        &:active {
+            background-size: 0%, 100%;
+            transition: background-size 0ms;
+        }
     }
     .micl-button__icon {
         font-variation-settings: 'FILL' 0;
-        transition: font-variation-settings 600ms;
+        transition: font-variation-settings var(--md-sys-button-motion-duration) linear;
     }
 }
 
@@ -101,9 +119,6 @@ button.micl-button-outlined-xs {
         }
     }
     &:not(:disabled) {
-        --miclripple: 1;
-        @include ripple.effect;
-
         &:active {
             &.micl-button-elevated-xs {
                 border-radius: var(--md-sys-shape-corner-small);
@@ -153,9 +168,6 @@ button.micl-button-outlined-s {
         }
     }
     &:not(:disabled) {
-        --miclripple: 1;
-        @include ripple.effect;
-
         &:active:not(:disabled) {
             &.micl-button-elevated-s {
                 border-radius: var(--md-sys-shape-corner-small);
@@ -199,9 +211,6 @@ button.micl-button-outlined-m {
         }
     }
     &:not(:disabled) {
-        --miclripple: 1;
-        @include ripple.effect;
-
         &:active:not(:disabled) {
             border-radius: var(--md-sys-shape-corner-medium);
         }
@@ -237,9 +246,6 @@ button.micl-button-outlined-l {
         }
     }
     &:not(:disabled) {
-        --miclripple: 1;
-        @include ripple.effect;
-
         &:active:not(:disabled) {
             border-radius: var(--md-sys-shape-corner-large);
         }
@@ -275,9 +281,6 @@ button.micl-button-outlined-xl {
         }
     }
     &:not(:disabled) {
-        --miclripple: 1;
-        @include ripple.effect;
-
         &:active:not(:disabled) {
             border-radius: var(--md-sys-shape-corner-large);
         }
@@ -295,22 +298,24 @@ button.micl-button-text-s,
 button.micl-button-text-m,
 button.micl-button-text-l,
 button.micl-button-text-xl {
+    --statelayer-color: var(--md-sys-color-primary);
+
     background-color: transparent;
     color: var(--md-sys-color-primary);
 
     &:not(:disabled) {
         &:hover {
-            background-color: rgb(from var(--md-sys-color-primary) r g b / var(--md-sys-state-hover-state-layer-opacity));
+            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
 
             .micl-button__icon {
                 font-variation-settings: 'FILL' 1;
             }
         }
         &:focus-visible {
-            background-color: rgb(from var(--md-sys-color-primary) r g b / var(--md-sys-state-focus-state-layer-opacity));
+            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);
         }
         &:active {
-            background-color: rgb(from var(--md-sys-color-primary) r g b / var(--md-sys-state-pressed-state-layer-opacity));
+            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
         }
     }
 }
@@ -320,12 +325,16 @@ button.micl-button-elevated-s,
 button.micl-button-elevated-m,
 button.micl-button-elevated-l,
 button.micl-button-elevated-xl {
+    --statelayer-color: var(--md-sys-color-primary);
+
     background-color: var(--md-sys-color-surface-container-low);
     color: var(--md-sys-color-primary);
     box-shadow: var(--md-sys-elevation-level1);
 
     &:not(:disabled) {
         &.micl-button--toggle.micl-button--selected {
+            --statelayer-color: var(--md-sys-color-on-primary);
+
             background-color: var(--md-sys-color-primary);
             color: var(--md-sys-color-on-primary);
 
@@ -334,28 +343,17 @@ button.micl-button-elevated-xl {
             }
         }
         &:hover {
-            background-color: color-mix(in srgb, var(--md-sys-color-surface-container-low), var(--md-sys-color-primary), var(--md-sys-state-hover-state-layer-opacity));
+            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
 
-            &.micl-button--toggle.micl-button--selected {
-                background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) var(--md-sys-state-hover-state-layer-opacity));
-            }
             .micl-button__icon {
                 font-variation-settings: 'FILL' 1;
             }
         }
         &:focus-visible {
-            background-color: color-mix(in srgb, var(--md-sys-color-surface-container-low), var(--md-sys-color-primary), var(--md-sys-state-focus-state-layer-opacity));
-
-            &.micl-button--toggle.micl-button--selected {
-                background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) var(--md-sys-state-focus-state-layer-opacity));
-            }
+            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);
         }
         &:active {
-            background-color: color-mix(in srgb, var(--md-sys-color-surface-container-low), var(--md-sys-color-primary), var(--md-sys-state-pressed-state-layer-opacity));
-
-            &.micl-button--toggle.micl-button--selected {
-                background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) var(--md-sys-state-pressed-state-layer-opacity));
-            }
+            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
         }
     }
 }
@@ -373,6 +371,8 @@ button.micl-button-filled-s,
 button.micl-button-filled-m,
 button.micl-button-filled-l,
 button.micl-button-filled-xl {
+    --statelayer-color: var(--md-sys-color-on-primary);
+
     background-color: var(--md-sys-color-primary);
     color: var(--md-sys-color-on-primary);
 
@@ -383,32 +383,23 @@ button.micl-button-filled-xl {
             }
         }
         &.micl-button--toggle:not(.micl-button--selected) {
+            --statelayer-color: var(--md-sys-color-on-surface-variant);
+
             background-color: var(--md-sys-color-surface-container);
             color: var(--md-sys-color-on-surface-variant);
         }
         &:hover {
-            background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) var(--md-sys-state-hover-state-layer-opacity));
+            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
 
-            &.micl-button--toggle:not(.micl-button--selected) {
-                background-color: color-mix(in srgb, var(--md-sys-color-surface-container), var(--md-sys-color-on-surface-variant) var(--md-sys-state-hover-state-layer-opacity));
-            }
             .micl-button__icon {
                 font-variation-settings: 'FILL' 1;
             }
         }
         &:focus-visible {
-            background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) var(--md-sys-state-focus-state-layer-opacity));
-
-            &.micl-button--toggle:not(.micl-button--selected) {
-                background-color: color-mix(in srgb, var(--md-sys-color-surface-container), var(--md-sys-color-on-surface-variant) var(--md-sys-state-focus-state-layer-opacity));
-            }
+            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);
         }
         &:active {
-            background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) var(--md-sys-state-pressed-state-layer-opacity));
-
-            &.micl-button--toggle:not(.micl-button--selected) {
-                background-color: color-mix(in srgb, var(--md-sys-color-surface-container), var(--md-sys-color-on-surface-variant) var(--md-sys-state-pressed-state-layer-opacity));
-            }
+            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
         }
     }
 }
@@ -418,11 +409,15 @@ button.micl-button-tonal-s,
 button.micl-button-tonal-m,
 button.micl-button-tonal-l,
 button.micl-button-tonal-xl {
+    --statelayer-color: var(--md-sys-color-on-secondary-container);
+
     background-color: var(--md-sys-color-secondary-container);
     color: var(--md-sys-color-on-secondary-container);
 
     &:not(:disabled) {
         &.micl-button--toggle.micl-button--selected {
+            --statelayer-color: var(--md-sys-color-on-secondary);
+
             background-color: var(--md-sys-color-secondary);
             color: var(--md-sys-color-on-secondary);
 
@@ -431,28 +426,17 @@ button.micl-button-tonal-xl {
             }
         }
         &:hover {
-            background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) var(--md-sys-state-hover-state-layer-opacity));
+            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
 
-            &.micl-button--toggle.micl-button--selected {
-                background-color: color-mix(in srgb, var(--md-sys-color-secondary), var(--md-sys-color-on-secondary) var(--md-sys-state-hover-state-layer-opacity));
-            }
             .micl-button__icon {
                 font-variation-settings: 'FILL' 1;
             }
         }
         &:focus-visible {
-            background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) var(--md-sys-state-focus-state-layer-opacity));
-
-            &.micl-button--toggle.micl-button--selected {
-                background-color: color-mix(in srgb, var(--md-sys-color-secondary), var(--md-sys-color-on-secondary) var(--md-sys-state-focus-state-layer-opacity));
-            }
+            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);
         }
         &:active {
-            background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) var(--md-sys-state-pressed-state-layer-opacity));
-
-            &.micl-button--toggle.micl-button--selected {
-                background-color: color-mix(in srgb, var(--md-sys-color-secondary), var(--md-sys-color-on-secondary) var(--md-sys-state-pressed-state-layer-opacity));
-            }
+            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
         }
     }
 }
@@ -462,11 +446,15 @@ button.micl-button-outlined-s,
 button.micl-button-outlined-m,
 button.micl-button-outlined-l,
 button.micl-button-outlined-xl {
+    --statelayer-color: var(--md-sys-color-on-surface-variant);
+
     background-color: transparent;
     color: var(--md-sys-color-on-surface-variant);
 
     &:not(:disabled) {
         &.micl-button--toggle.micl-button--selected {
+            --statelayer-color: var(--md-sys-color-inverse-on-surface);
+
             background-color: var(--md-sys-color-inverse-surface);
             color: var(--md-sys-color-inverse-on-surface);
 
@@ -475,28 +463,17 @@ button.micl-button-outlined-xl {
             }
         }
         &:hover {
-            background-color: rgb(from var(--md-sys-color-on-surface-variant) r g b / var(--md-sys-state-hover-state-layer-opacity));
+            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
 
-            &.micl-button--toggle.micl-button--selected {
-                background-color: color-mix(in srgb, var(--md-sys-color-inverse-surface), var(--md-sys-color-inverse-on-surface) var(--md-sys-state-hover-state-layer-opacity));
-            }
             .micl-button__icon {
                 font-variation-settings: 'FILL' 1;
             }
         }
         &:focus-visible {
-            background-color: rgb(from var(--md-sys-color-on-surface-variant) r g b / var(--md-sys-state-focus-state-layer-opacity));
-
-            &.micl-button--toggle.micl-button--selected {
-                background-color: color-mix(in srgb, var(--md-sys-color-inverse-surface), var(--md-sys-color-inverse-on-surface) var(--md-sys-state-focus-state-layer-opacity));
-            }
+            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);
         }
         &:active {
-            background-color: rgb(from var(--md-sys-color-on-surface-variant) r g b / var(--md-sys-state-pressed-state-layer-opacity));
-
-            &.micl-button--toggle.micl-button--selected {
-                background-color: color-mix(in srgb, var(--md-sys-color-inverse-surface), var(--md-sys-color-inverse-on-surface) var(--md-sys-state-pressed-state-layer-opacity));
-            }
+            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
         }
     }
 }

package/components/card/index.scss

@@ -21,7 +21,6 @@
 
 @use '../../styles/elevation';
 @use '../../styles/motion';
-@use '../../styles/ripple';
 @use '../../styles/shapes';
 @use '../../styles/statelayer';
 @use '../../styles/typography';
@@ -34,6 +33,9 @@
 .micl-card-elevated,
 .micl-card-filled,
 .micl-card-outlined {
+    --md-sys-card-motion-spatial: #{motion.$md-sys-motion-expressive-default-spatial};
+    --md-sys-card-motion-duration: #{motion.$md-sys-motion-expressive-default-spatial-duration};
+
     height: fit-content;
     margin: var(--md-sys-card-margin);
     border-radius: var(--md-sys-shape-corner-medium);
@@ -42,18 +44,45 @@
 
     &[tabindex='0']:not(.micl-card--disabled) {
         --miclripple: 1;
+        --statelayer-color: var(--md-sys-color-on-surface);
 
-        @include ripple.effect;
+        background-image:
+            radial-gradient(circle at var(--x, center) var(--y, center), transparent 0%, rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)) 10%, transparent 10%),
+            linear-gradient(rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)));
+        background-repeat: no-repeat;
+        background-size: 10000%, 100%;
+        transition:
+            background-size 3000ms,
+            --statelayer-opacity var(--md-sys-card-motion-duration) linear;
 
         &:hover {
+            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
+
             box-shadow: var(--md-sys-elevation-level1);
             cursor: pointer;
         }
         &:focus-visible {
+            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);
+
             outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
             outline-offset: var(--md-sys-state-focus-indicator-outer-offset);
             box-shadow: var(--md-sys-elevation-level1);
         }
+        &:active {
+            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
+
+            background-size: 0%, 100%;
+            transition: background-size 0ms;
+        }
+        &.micl-card--dragging {
+            --statelayer-opacity: var(--md-sys-state-dragged-state-layer-opacity);
+
+            box-shadow: var(--md-sys-elevation-level3);
+            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) solid var(--md-sys-color-secondary);
@@ -63,8 +92,8 @@
         height: 0;
         overflow: hidden;
         transition:
-            content-visibility var(--md-sys-motion-duration-medium4) allow-discrete,
-            height var(--md-sys-motion-duration-medium4) linear(motion.$md-sys-motion-spring-default-spatial);
+            height var(--md-sys-card-motion-duration) var(--md-sys-card-motion-spatial),
+            content-visibility var(--md-sys-card-motion-duration) linear allow-discrete;
     }
     &[open]::details-content {
         height: auto;
@@ -83,20 +112,13 @@
 
     &[tabindex='0']:not(.micl-card--disabled) {
         &:hover {
-            background-color: color-mix(in srgb, var(--md-sys-color-surface-container-low), var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity));
             box-shadow: var(--md-sys-elevation-level2);
         }
-        &:focus-visible {
-            background-color: color-mix(in srgb, var(--md-sys-color-surface-container-low), var(--md-sys-color-on-surface) var(--md-sys-state-focus-state-layer-opacity));
-        }
         &:active {
-            background-color: color-mix(in srgb, var(--md-sys-color-surface-container-low), var(--md-sys-color-on-surface) var(--md-sys-state-pressed-state-layer-opacity));
             box-shadow: var(--md-sys-elevation-level1);
         }
         &.micl-card--dragging {
-            background-color: color-mix(in srgb, var(--md-sys-color-surface-container-low), var(--md-sys-color-on-surface) var(--md-sys-state-dragged-state-layer-opacity));
             box-shadow: var(--md-sys-elevation-level4);
-            cursor: grabbing;
         }
     }
 }
@@ -105,22 +127,12 @@
     box-shadow: var(--md-sys-elevation-level0);
 
     &[tabindex='0']:not(.micl-card--disabled) {
-        &:hover {
-            background-color: color-mix(in srgb, var(--md-sys-color-surface-container-highest), var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity));
-        }
         &:focus-visible {
-            background-color: color-mix(in srgb, var(--md-sys-color-surface-container-highest), var(--md-sys-color-on-surface) var(--md-sys-state-focus-state-layer-opacity));
             box-shadow: var(--md-sys-elevation-level0);
         }
         &:active {
-            background-color: color-mix(in srgb, var(--md-sys-color-surface-container-highest), var(--md-sys-color-on-surface) var(--md-sys-state-pressed-state-layer-opacity));
             box-shadow: var(--md-sys-elevation-level0);
         }
-        &.micl-card--dragging {
-            background-color: color-mix(in srgb, var(--md-sys-color-surface-container-highest), var(--md-sys-color-on-surface) var(--md-sys-state-dragged-state-layer-opacity));
-            box-shadow: var(--md-sys-elevation-level3);
-            cursor: grabbing;
-        }
     }
 }
 .micl-card-outlined {
@@ -129,24 +141,14 @@
     border: 1px solid var(--md-sys-color-outline-variant);
 
     &[tabindex='0']:not(.micl-card--disabled) {
-        &:hover {
-            background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity));
-        }
         &:focus-visible {
             border-color: var(--md-sys-color-on-surface);
-            background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-on-surface) var(--md-sys-state-focus-state-layer-opacity));
             box-shadow: var(--md-sys-elevation-level0);
         }
         &:active {
             border-color: var(--md-sys-color-outline-variant);
-            background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-on-surface) var(--md-sys-state-pressed-state-layer-opacity));
             box-shadow: var(--md-sys-elevation-level0);
         }
-        &.micl-card--dragging {
-            background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-on-surface) var(--md-sys-state-dragged-state-layer-opacity));
-            box-shadow: var(--md-sys-elevation-level3);
-            cursor: grabbing;
-        }
     }
 }
 

package/components/checkbox/index.scss

@@ -20,7 +20,6 @@
 // SOFTWARE.
 
 @use '../../styles/motion';
-@use '../../styles/ripple';
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
@@ -53,7 +52,7 @@
 }
 
 input[type=checkbox].micl-checkbox {
-    --md-sys-ripple-background-color: var(--md-sys-color-primary);
+    --md-sys-checkbox-motion-duration: #{motion.$md-sys-motion-expressive-slow-effects-duration};
     --checkbox-container-color: transparent;
     --checkbox-container-border-color: var(--md-sys-color-on-surface-variant);
 
@@ -119,13 +118,12 @@ input[type=checkbox].micl-checkbox {
         var(--md-sys-checkbox-container-size) var(--md-sys-checkbox-container-size);
     clip-path: circle(var(--md-sys-checkbox-state-layer-radius));
     transition:
-        --checkbox-outline-color var(--md-sys-motion-duration-medium2),
-        --checkbox-state-layer-color var(--md-sys-motion-duration-medium2),
-        --checkbox-container-color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-duration-short4),
-        --checkbox-container-border-color var(--md-sys-motion-duration-medium2);
+        --checkbox-outline-color var(--md-sys-checkbox-motion-duration),
+        --checkbox-state-layer-color var(--md-sys-checkbox-motion-duration),
+        --checkbox-container-color var(--md-sys-checkbox-motion-duration) var(--md-sys-motion-duration-short4),
+        --checkbox-container-border-color var(--md-sys-checkbox-motion-duration);
 
     &.micl-checkbox--error {
-        --md-sys-ripple-background-color: var(--md-sys-color-error);
         --checkbox-container-border-color: var(--md-sys-color-error);
     }
     &::after {
@@ -177,8 +175,6 @@ input[type=checkbox].micl-checkbox {
     &:not(:disabled) {
         --miclripple: 1;
 
-        @include ripple.effect;
-
         cursor: pointer;
 
         &:hover {