material-inspired-component-library 1.2.2 → 2.0.0

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';
@@ -44,19 +43,46 @@
     interpolate-size: allow-keywords;
 
     &[tabindex='0']:not(.micl-card--disabled) {
-        --miclripple: 1;
+        --micl-ripple: 1;
+        --statelayer-color: var(--md-sys-color-on-surface);
 
-        @include ripple.effect;
+        background-image:
+            radial-gradient(circle at var(--micl-x, center) var(--micl-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 {
@@ -176,9 +173,7 @@ input[type=checkbox].micl-checkbox {
         }
     }
     &:not(:disabled) {
-        --miclripple: 1;
-
-        @include ripple.effect;
+        --micl-ripple: 1;
 
         cursor: pointer;
 

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";

package/components/iconbutton/index.scss

@@ -21,7 +21,6 @@
 
 @use '../../styles/elevation';
 @use '../../styles/motion';
-@use '../../styles/ripple';
 @use '../../styles/shapes';
 @use '../../styles/statelayer';
 
@@ -48,17 +47,25 @@ button.micl-iconbutton-outlined-xl {
     --md-sys-iconbutton-motion-effects: #{motion.$md-sys-motion-expressive-fast-spatial};
     --md-sys-iconbutton-motion-duration: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
     --md-sys-iconbutton-motion-duration-reverse: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
+    --micl-ripple: 1;
 
     padding: 0;
     border: none;
     border-radius: var(--md-sys-shape-corner-full);
     background-color: transparent;
+    background-image:
+        radial-gradient(circle at var(--micl-x, center) var(--micl-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%;
     color: var(--md-sys-color-on-surface-variant);
     cursor: pointer;
     font-variation-settings: 'FILL' 0;
     transition:
         border-radius var(--md-sys-iconbutton-motion-duration) var(--md-sys-iconbutton-motion-effects),
-        font-variation-settings var(--md-sys-iconbutton-motion-duration) linear;
+        font-variation-settings var(--md-sys-iconbutton-motion-duration) linear,
+        background-size 3000ms,
+        --statelayer-opacity var(--md-sys-iconbutton-motion-duration) linear;
 
     &:disabled {
         background-color: rgb(from var(--md-sys-color-on-surface) r g b / 10%);
@@ -66,9 +73,15 @@ button.micl-iconbutton-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;
+        }
     }
     &:hover:not(:disabled),
     &.micl-button--toggle.micl-button--selected {
@@ -92,9 +105,6 @@ button.micl-iconbutton-outlined-xs {
         border-radius: var(--md-sys-shape-corner-large);
     }
     &:not(:disabled) {
-        --miclripple: 1;
-        @include ripple.effect;
-
         &:active {
             // border-radius: var(--md-sys-shape-corner-small);
             border-radius: var(--md-sys-shape-corner-medium);
@@ -146,9 +156,6 @@ button.micl-iconbutton-outlined-s {
         border-radius: var(--md-sys-shape-corner-large);
     }
     &:not(:disabled) {
-        --miclripple: 1;
-        @include ripple.effect;
-
         &:active {
             // border-radius: var(--md-sys-shape-corner-small);
             border-radius: var(--md-sys-shape-corner-medium);
@@ -197,9 +204,6 @@ button.micl-iconbutton-outlined-m {
         border-radius: var(--md-sys-shape-corner-large);
     }
     &:not(:disabled) {
-        --miclripple: 1;
-        @include ripple.effect;
-
         &:active {
             // border-radius: var(--md-sys-shape-corner-small);
             border-radius: var(--md-sys-shape-corner-medium);
@@ -237,9 +241,6 @@ button.micl-iconbutton-outlined-l {
         border-radius: var(--md-sys-shape-corner-extra-large);
     }
     &:not(:disabled) {
-        --miclripple: 1;
-        @include ripple.effect;
-
         &:active {
             border-radius: var(--md-sys-shape-corner-large);
         }
@@ -276,9 +277,6 @@ button.micl-iconbutton-outlined-xl {
         border-radius: var(--md-sys-shape-corner-extra-large);
     }
     &:not(:disabled) {
-        --miclripple: 1;
-        @include ripple.effect;
-
         &:active {
             border-radius: var(--md-sys-shape-corner-large);
         }
@@ -307,30 +305,22 @@ button.micl-iconbutton-standard-s,
 button.micl-iconbutton-standard-m,
 button.micl-iconbutton-standard-l,
 button.micl-iconbutton-standard-xl {
+    --statelayer-color: var(--md-sys-color-on-surface-variant);
+
     &:not(:disabled) {
         &.micl-button--toggle.micl-button--selected {
+            --statelayer-color: var(--md-sys-color-primary);
+
             color: var(--md-sys-color-primary);
         }
         &:hover {
-            background-color: rgb(from var(--md-sys-color-on-surface-variant) r g b / var(--md-sys-state-hover-state-layer-opacity));
-
-            &.micl-button--toggle.micl-button--selected {
-                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);
         }
         &: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: 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-on-surface-variant) r g b / var(--md-sys-state-pressed-state-layer-opacity));
-
-            &.micl-button--toggle.micl-button--selected {
-                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);
         }
     }
 }
@@ -341,34 +331,26 @@ button.micl-iconbutton-filled-s,
 button.micl-iconbutton-filled-m,
 button.micl-iconbutton-filled-l,
 button.micl-iconbutton-filled-xl {
+    --statelayer-color: var(--md-sys-color-on-primary);
+
     background-color: var(--md-sys-color-primary);
     color: var(--md-sys-color-on-primary);
 
     &:not(:disabled) {
         &.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));
-
-            &.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));
-            }
+            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
         }
         &: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);
         }
     }
 }
@@ -378,34 +360,26 @@ button.micl-iconbutton-tonal-s,
 button.micl-iconbutton-tonal-m,
 button.micl-iconbutton-tonal-l,
 button.micl-iconbutton-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);
         }
         &: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));
-
-            &.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));
-            }
+            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
         }
         &: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);
         }
     }
 }
@@ -415,6 +389,8 @@ button.micl-iconbutton-outlined-s,
 button.micl-iconbutton-outlined-m,
 button.micl-iconbutton-outlined-l,
 button.micl-iconbutton-outlined-xl {
+    --statelayer-color: var(--md-sys-color-on-surface-variant);
+
     background-color: transparent;
     color: var(--md-sys-color-on-surface-variant);
 
@@ -440,29 +416,19 @@ button.micl-iconbutton-outlined-xl {
     }
     &: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);
         }
         &:hover {
-            background-color: rgb(from var(--md-sys-color-on-surface-variant) r g b / 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));
-            }
+            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
         }
         &: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/iconbutton/index.ts

@@ -37,7 +37,12 @@ export default (() =>
             }
         }
         if (event.target.classList.contains('micl-button--toggle')) {
+            event.target.classList.add('micl-button--toggled');
             event.target.classList.toggle('micl-button--selected');
+            if (!!event.target.dataset.miclalt) {
+                [event.target.textContent, event.target.dataset.miclalt] = 
+                [event.target.dataset.miclalt, event.target.textContent];
+            }
         }
     };