material-inspired-component-library 1.1.1 → 1.2.2

package/README.md

@@ -97,6 +97,10 @@ The library currently consists of the following components:
 
 ## Change Log
 
+### 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/index.scss

@@ -51,10 +51,14 @@ 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};
+
     padding: 0;
     border: none;
     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);
 
     &:disabled {
         background-color: rgb(from var(--md-sys-color-on-surface) r g b / 10%);
@@ -68,7 +72,7 @@ button.micl-button-outlined-xl {
     }
     .micl-button__icon {
         font-variation-settings: 'FILL' 0;
-        transition: font-variation-settings 600ms;
+        transition: font-variation-settings var(--md-sys-button-motion-duration) linear;
     }
 }
 

package/components/card/index.scss

@@ -34,6 +34,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);
@@ -63,8 +66,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;

package/components/checkbox/index.scss

@@ -53,6 +53,7 @@
 }
 
 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);
@@ -119,10 +120,10 @@ 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);

package/components/dialog/index.scss

@@ -36,6 +36,10 @@
 
 dialog.micl-dialog,
 dialog.micl-dialog-fullscreen {
+    --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};
+
     box-sizing: border-box;
     display: none;
     flex-direction: column;
@@ -55,12 +59,14 @@ dialog.micl-dialog-fullscreen {
     overflow: hidden;
     interpolate-size: allow-keywords;
     transition:
-        display var(--md-sys-motion-duration-medium1) allow-discrete,
-        overlay var(--md-sys-motion-duration-medium1) allow-discrete,
-        inset-block-start var(--md-sys-motion-duration-medium1) linear,
-        inset-inline-start var(--md-sys-motion-duration-medium1) linear,
-        opacity var(--md-sys-motion-duration-medium1) motion.$md-sys-motion-easing-emphasized-decelerate,
-        transform var(--md-sys-motion-duration-medium1) linear;
+        inset-block-start var(--md-sys-dialog-motion-duration-reverse) linear,
+        inset-inline-start var(--md-sys-dialog-motion-duration-reverse) linear,
+        width var(--md-sys-dialog-motion-duration-reverse) linear,
+        height var(--md-sys-dialog-motion-duration-reverse) linear,
+        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;
 
     @starting-style {
         height: fit-content;
@@ -79,14 +85,14 @@ dialog.micl-dialog-fullscreen {
         opacity: 1;
         transform: translate(calc(var(--md-sys-dialog-dir-factor) * -50%), -50%) scale(100%);
         transition:
-            display var(--md-sys-motion-duration-medium2) linear allow-discrete,
-            overlay var(--md-sys-motion-duration-medium2) linear allow-discrete,
-            inset-block-start var(--md-sys-motion-duration-medium2) linear,
-            inset-inline-start var(--md-sys-motion-duration-medium2) linear,
-            width var(--md-sys-motion-duration-medium2) linear,
-            height var(--md-sys-motion-duration-medium2) linear,
-            opacity var(--md-sys-motion-duration-medium2) motion.$md-sys-motion-easing-emphasized-accelerate,
-            transform var(--md-sys-motion-duration-medium2) linear;
+            inset-block-start var(--md-sys-dialog-motion-duration) linear,
+            inset-inline-start var(--md-sys-dialog-motion-duration) linear,
+            width var(--md-sys-dialog-motion-duration) linear,
+            height var(--md-sys-dialog-motion-duration) linear,
+            transform var(--md-sys-dialog-motion-duration) linear,
+            opacity var(--md-sys-dialog-motion-duration) motion.$md-sys-motion-easing-emphasized-accelerate,
+            overlay var(--md-sys-dialog-motion-duration) linear allow-discrete,
+            display var(--md-sys-dialog-motion-duration) linear allow-discrete;
 
         @starting-style {
             inset-block-start: anchor(start);
@@ -94,11 +100,6 @@ dialog.micl-dialog-fullscreen {
             opacity: 0;
             transform: translate(calc(var(--md-sys-dialog-dir-factor) * -50%), -50%) scale(50%);
         }
-        &::backdrop {
-            @starting-style {
-                background-color: rgba(0, 0, 0, 0);
-            }
-        }
     }
     &:not([popover]) {
         inset-block-start: 50%;
@@ -121,12 +122,16 @@ dialog.micl-dialog-fullscreen {
     &::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;
+            background-color var(--md-sys-dialog-motion-duration) linear,
+            overlay var(--md-sys-dialog-motion-duration) linear allow-discrete,
+            display var(--md-sys-dialog-motion-duration) linear allow-discrete;
     }
     &[open]::backdrop {
         background-color: rgba(0, 0, 0, 0.2);
+
+        @starting-style {
+            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));
@@ -194,7 +199,7 @@ dialog.micl-dialog-fullscreen {
         column-gap: 8px;
         padding: var(--md-sys-dialog-padding);
         opacity: 1;
-        transition: opacity var(--md-sys-motion-duration-medium1) linear;
+        transition: opacity var(--md-sys-dialog-motion-duration) linear;
     }
 }
 

package/components/iconbutton/index.scss

@@ -45,6 +45,10 @@ button.micl-iconbutton-outlined-s,
 button.micl-iconbutton-outlined-m,
 button.micl-iconbutton-outlined-l,
 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};
+
     padding: 0;
     border: none;
     border-radius: var(--md-sys-shape-corner-full);
@@ -53,8 +57,8 @@ button.micl-iconbutton-outlined-xl {
     cursor: pointer;
     font-variation-settings: 'FILL' 0;
     transition:
-        font-variation-settings 600ms,
-        border-radius var(--md-sys-motion-duration-extra-long4) linear(motion.$md-sys-motion-spring-fast-spatial);
+        border-radius var(--md-sys-iconbutton-motion-duration) var(--md-sys-iconbutton-motion-effects),
+        font-variation-settings var(--md-sys-iconbutton-motion-duration) linear;
 
     &:disabled {
         background-color: rgb(from var(--md-sys-color-on-surface) r g b / 10%);

package/components/list/README.md

@@ -59,6 +59,20 @@ The List component offers three CSS classes to control the height and content ca
 </ul>
 ```
 
+Use the anchor element to convert a list item into a hyperlink:
+
+```HTML
+<ul class="micl-list" role="listbox">
+  <li class="micl-list-item-one" tabindex="0">
+    <a href="https://www.thetimes.com" tabindex="-1">
+      <span class="micl-list-item__text">
+        <span class="micl-list-item__headline">The Times</span>
+      </span>
+    </a>
+  </li>
+</ul>
+```
+
 Adding the `micl-list-item--disabled` class to the `<li>` element causes the list item to be displayed in a disabled state.
 
 Add the `micl-list__divider` class to the `<ul>` element to automatically place a divider between each list item.
@@ -77,10 +91,10 @@ The text content of a list item can be preceded by various media elements:
   </li>
   ```
 
-- **Avatar**: Use `micl-list-item__avatar` with an avatar image (or icon).
+- **Avatar**: Use `micl-list-item__avatar` with a text.
   ```HTML
   <li class="micl-list-item-two" tabindex="0">
-    <span class="material-symbols-outlined micl-list-item__avatar">account_circle</span>
+    <span class="micl-list-item__avatar">BJ</span>
     <span class="micl-list-item__text">
       <span class="micl-list-item__headline">Bill Jones</span>
       <span class="micl-list-item__supporting-text">bill.jones@email.com</span>
@@ -111,35 +125,51 @@ The text content of a list item can be preceded by various media elements:
   ```
 
 ### Trailing Content
-The text of a list item may be followed by a trailing text or other elements (like a checkbox).
+The text of a list item may be followed by a trailing text, imagery or other elements (like a checkbox).
 
-```HTML
-<li class="micl-list-item-one" tabindex="0">
-  <span class="micl-list-item__text">
-    <span class="micl-list-item__headline">To-do items</span>
-  </span>
-  <span class="micl-list-item__trailing-text">100+</span>
-</li>
-````
+- **Icon**: Use `micl-list-item__icon` with a (Material Symbols) icon.
+  ```HTML
+  <li class="micl-list-item-two" tabindex="0">
+    <span class="micl-list-item__text">
+      <span class="micl-list-item__headline">Date and time</span>
+      <span class="micl-list-item__supporting-text">Timezones, calendar display</span>
+    </span>
+    <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">more_horiz</span>
+  </li>
+  ```
+
+- **Text**: Use `micl-list-item__trailing-text` with a short text.
+  ```HTML
+  <li class="micl-list-item-one" tabindex="0">
+    <span class="micl-list-item__text">
+      <span class="micl-list-item__headline">To-do items</span>
+    </span>
+    <span class="micl-list-item__trailing-text">100+</span>
+  </li>
+  ````
 
 ### Selecting List Items
-To enable selection of list items, integrate a checkbox component within the `<li>` element. The `micl-list-item__text` should typically wrap the headline and supporting text, acting as the label for the checkbox.
+To enable selection of list items, integrate a checkbox or switch component within the `<li>` element.
 
 ```HTML
 <ul class="micl-list micl-list__divider" role="listbox">
   <li class="micl-list-item-two" tabindex="0">
-    <label for="checkbox1" class="micl-list-item__text">
-      <span class="micl-list-item__headline">Blue car</span>
-      <span class="micl-list-item__supporting-text">A blue car with four wheels.</span>
-    </label>
-    <input type="checkbox" id="checkbox1" class="micl-checkbox" value="cb1" tabindex="-1">
+    <label>
+      <span class="micl-list-item__text">
+        <span class="micl-list-item__headline">Blue car</span>
+        <span class="micl-list-item__supporting-text">A blue car with four wheels.</span>
+      </label>
+      <input type="checkbox" id="mycheckbox" class="micl-checkbox" value="cb1" tabindex="-1">
+    </span>
   </li>
   <li class="micl-list-item-two" tabindex="0">
-    <label for="checkbox2" class="micl-list-item__text">
-      <span class="micl-list-item__headline">Red car</span>
-      <span class="micl-list-item__supporting-text">A red car with tinted windows.</span>
+    <label>
+      <span class="micl-list-item__text">
+        <span class="micl-list-item__headline">Red car</span>
+        <span class="micl-list-item__supporting-text">A red car with tinted windows.</span>
+      </label>
+      <input type="checkbox" id="checkbox2" class="micl-switch" value="cb2" tabindex="-1">
     </label>
-    <input type="checkbox" id="checkbox2" class="micl-checkbox" value="cb2" tabindex="-1">
   </li>
 </ul>
 ```