material-inspired-component-library 1.2.2 → 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.3.0 (23.08.2025)
+**Features**
+
+- **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/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';
@@ -54,11 +53,20 @@ 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-button-motion-duration) var(--md-sys-button-motion-effects);
+    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%);
@@ -66,9 +74,15 @@ 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;
@@ -105,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);
@@ -157,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);
@@ -203,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);
         }
@@ -241,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);
         }
@@ -279,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);
         }
@@ -299,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);
         }
     }
 }
@@ -324,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);
 
@@ -338,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);
         }
     }
 }
@@ -377,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);
 
@@ -387,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);
         }
     }
 }
@@ -422,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);
 
@@ -435,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);
         }
     }
 }
@@ -466,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);
 
@@ -479,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';
@@ -45,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);
@@ -86,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;
         }
     }
 }
@@ -108,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 {
@@ -132,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';
 
@@ -54,7 +53,6 @@
 
 input[type=checkbox].micl-checkbox {
     --md-sys-checkbox-motion-duration: #{motion.$md-sys-motion-expressive-slow-effects-duration};
-    --md-sys-ripple-background-color: var(--md-sys-color-primary);
     --checkbox-container-color: transparent;
     --checkbox-container-border-color: var(--md-sys-color-on-surface-variant);
 
@@ -126,7 +124,6 @@ input[type=checkbox].micl-checkbox {
         --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 {
@@ -178,8 +175,6 @@ input[type=checkbox].micl-checkbox {
     &:not(:disabled) {
         --miclripple: 1;
 
-        @include ripple.effect;
-
         cursor: pointer;
 
         &:hover {

package/components/dialog/index.scss

@@ -36,6 +36,7 @@
 
 dialog.micl-dialog,
 dialog.micl-dialog-fullscreen {
+    --statelayer-color: var(--md-sys-color-primary);
     --md-sys-dialog-motion-spatial: #{motion.$md-sys-motion-expressive-fast-spatial};
     --md-sys-dialog-motion-duration: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
     --md-sys-dialog-motion-duration-reverse: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
@@ -54,6 +55,8 @@ dialog.micl-dialog-fullscreen {
     border: none;
     border-radius: var(--md-sys-shape-corner-extra-large);
     background-color: var(--md-sys-color-surface-container-high);
+    background-image: linear-gradient(rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)));
+    background-repeat: no-repeat;
     box-shadow: var(--md-sys-elevation-level3);
     opacity: 0;
     overflow: hidden;
@@ -66,7 +69,8 @@ dialog.micl-dialog-fullscreen {
         transform var(--md-sys-dialog-motion-duration-reverse) linear,
         opacity var(--md-sys-dialog-motion-duration-reverse) motion.$md-sys-motion-easing-emphasized-decelerate,
         overlay var(--md-sys-dialog-motion-duration-reverse) linear allow-discrete,
-        display var(--md-sys-dialog-motion-duration-reverse) linear allow-discrete;
+        display var(--md-sys-dialog-motion-duration-reverse) linear allow-discrete,
+        --statelayer-opacity var(--md-sys-dialog-motion-duration) linear;
 
     @starting-style {
         height: fit-content;
@@ -133,9 +137,9 @@ dialog.micl-dialog-fullscreen {
             background-color: rgba(0, 0, 0, 0);
         }
     }
-    &:hover {
-        background-color: color-mix(in srgb, var(--md-sys-color-surface-container-high), var(--md-sys-color-primary) var(--md-sys-state-hover-state-layer-opacity));
-    }
+//    &:hover {
+//        --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
+//    }
 
     .micl-dialog__headline {
         display: flex;
@@ -213,9 +217,9 @@ dialog.micl-dialog-fullscreen {
         box-shadow: var(--md-sys-elevation-level0);
         timeline-scope: --headlineTimeline;
 
-        &:hover {
-            background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-primary) var(--md-sys-state-hover-state-layer-opacity));
-        }
+//        &:hover {
+//            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
+//        }
         .micl-dialog__headline {
             height: 56px;
             flex-direction: row;

package/components/iconbutton/README.md

@@ -20,7 +20,7 @@ Import the icon 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";