material-inspired-component-library 7.0.2 → 8.0.1

package/components/dialog/index.scss

@@ -26,6 +26,22 @@
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
+@include elevation.level(0);
+@include elevation.level(2);
+@include elevation.level(3);
+
+@include shapes.corner('none');
+@include shapes.corner('extra-large');
+
+@include statelayer.token('hover-state-layer-opacity');
+@include statelayer.token('backdrop-opacity');
+@include statelayer.property;
+
+@include typography.scale('headline-small');
+@include typography.scale('title-large');
+@include typography.scale('title-medium');
+@include typography.scale('body-medium');
+
 :root {
     --md-sys-dialog-min-width: 280px;
     --md-sys-dialog-max-width: 560px;
@@ -44,6 +60,8 @@ dialog.micl-dialog {
     --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};
 
+    --_dialog-background-color: var(--md-sys-color-surface-container-high);
+
     box-sizing: border-box;
     display: none;
     flex-direction: column;
@@ -58,7 +76,7 @@ dialog.micl-dialog {
     outline: none;
     border: none;
     border-radius: var(--md-sys-shape-corner-extra-large);
-    background-color: var(--md-sys-color-surface-container-high);
+    background-color: var(--_dialog-background-color);
     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);
@@ -199,13 +217,9 @@ dialog.micl-dialog {
 
         color: var(--md-sys-color-on-surface-variant);
     }
-    form {
-        background-color: inherit;
-    }
     .micl-dialog__content {
         flex-shrink: 1;
         padding-inline: var(--md-sys-dialog-padding, 24px);
-        background-color: inherit;
         overflow-y: auto;
     }
     .micl-dialog__actions {
@@ -224,11 +238,12 @@ dialog.micl-dialog {
 
 dialog.micl-dialog.micl-dialog--fullscreen {
     @media (max-width: 560px) {
+        --_dialog-background-color: var(--md-sys-color-surface);
+
         inline-size: 100vw;
         block-size: 100vh;
         max-inline-size: 100vw;
         border-radius: var(--md-sys-shape-corner-none, 0px);
-        background-color: var(--md-sys-color-surface);
         box-shadow: var(--md-sys-elevation-level0);
         timeline-scope: --headlineTimeline;
 

package/components/iconbutton/index.scss

@@ -25,6 +25,24 @@
 @use '../../styles/shapes';
 @use '../../styles/statelayer';
 
+@include elevation.level(0);
+
+@include shapes.corner('small');
+@include shapes.corner('medium');
+@include shapes.corner('large');
+@include shapes.corner('extra-large');
+@include shapes.corner('full');
+
+@include statelayer.token('hover-state-layer-opacity');
+@include statelayer.token('focus-state-layer-opacity');
+@include statelayer.token('pressed-state-layer-opacity');
+@include statelayer.token('disabled-state-layer-opacity');
+@include statelayer.token('focus-indicator-thickness');
+@include statelayer.token('ripple-opacity-factor');
+@include statelayer.token('ripple-duration');
+@include statelayer.property;
+@include statelayer.keyframes;
+
 button.micl-iconbutton-standard-xs,
 a.micl-iconbutton-standard-xs,
 button.micl-iconbutton-standard-s,
@@ -61,10 +79,15 @@ button.micl-iconbutton-outlined-xl {
     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%),
+        radial-gradient(
+            circle at var(--micl-x, center) var(--micl-y, center),
+            transparent 0%,
+            rgb(from var(--statelayer-color) r g b / calc(var(--statelayer-opacity) * var(--md-sys-state-ripple-opacity-factor))) 10%,
+            transparent 10%
+        ),
         linear-gradient(rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)));
     background-repeat: no-repeat;
-    background-size: 10000%, 100%;
+    background-size: 0%, 100%;
     -webkit-tap-highlight-color: transparent;
     color: var(--md-sys-color-on-surface-variant);
     font-variation-settings: 'FILL' 0;
@@ -72,7 +95,7 @@ button.micl-iconbutton-outlined-xl {
     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,
-        background-size 3000ms,
+        background-size 0ms,
         --statelayer-opacity var(--md-sys-iconbutton-motion-duration) linear;
 
     &:disabled {
@@ -86,9 +109,8 @@ button.micl-iconbutton-outlined-xl {
             outline: var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary);
             outline-offset: 3px;
         }
-        &:active {
-            background-size: 0%, 100%;
-            transition: background-size 0ms;
+        &.micl-rippling {
+            animation: micl-ripple var(--md-sys-state-ripple-duration) motion.$md-sys-motion-easing-standard;
         }
     }
     &:hover:not(:disabled),

package/components/list/README.md

@@ -4,7 +4,7 @@ This component implements the [Material Design 3 Expressive List](https://m3.mat
 ## Basic Usage
 
 ### HTML
-To create a basic list, use the `<ul>` element with the `micl-list` class and individual `<li>` elements for each list item. For a basic single-line item, use the `micl-list-item-one` class:
+To create a standard list, use the `<ul>` element with the `micl-list` class and individual `<li>` elements for each list item. For a single-line item, use the `micl-list-item-one` class:
 
 ```HTML
 <ul class="micl-list">
@@ -16,7 +16,7 @@ To create a basic list, use the `<ul>` element with the `micl-list` class and in
 </ul>
 ```
 
-- `tabindex="0"` on the `<li>` makes the list item focusable and allows keyboard navigation.
+- `tabindex="0"` on the `<li>` makes the list item focusable and allows keyboard navigation. Only one item should be marked with a `tabindex="0"`.
 
 ### CSS
 Import the list styles into your project:
@@ -43,12 +43,14 @@ This will initialize any List component, including those that will be added to t
 A live example of the [List component](https://henkpb.github.io/micl/list.html) is available to interact with.
 
 ## Variants
+Adding the `micl-list--segmented` class to the `<ul>` element gives the list a segmented style with a distinct visible background and physical gaps.
+
 The List component offers three CSS classes to control the height and content capacity of individual list items:
 
-| CSS class | Description |
-| --------- | ----------- |
-| micl-list-item-one | For single-line items, accommodating one line of text. |
-| micl-list-item-two | For two-line items, accommodating up to two lines of text. |
+| CSS class            | Description                                                    |
+| -------------------- | -------------------------------------------------------------- |
+| micl-list-item-one   | For single-line items, accommodating one line of text.         |
+| micl-list-item-two   | For two-line items, accommodating up to two lines of text.     |
 | micl-list-item-three | For three-line items, accommodating up to three lines of text. |
 
 ```HTML
@@ -76,9 +78,23 @@ Use the anchor element to convert a list item into a hyperlink:
 </ul>
 ```
 
+Use the button element to convert a list item into an action item:
+
+```HTML
+<ul class="micl-list">
+  <li class="micl-list-item-one" tabindex="0">
+    <button type="button" onclick="alert('Hello World!')">
+      <span class="micl-list-item__text">
+        <span class="micl-list-item__headline">Show details</span>
+      </span>
+    </button>
+  </li>
+</ul>
+```
+
 Adding the `micl-list-item--disabled` class to the `<li>` element causes the list item to be displayed in a disabled state.
 
-Use a [Divider component](../divider/README.md) to separate neighbouring list items by a divider.
+Use a [Divider component](../divider/README.md) to separate neighbouring list items by a divider. Remember to add the role `separator` to the divider element.
 
 ### Leading Content
 The text content of a list item can be preceded by various media elements:
@@ -88,8 +104,8 @@ The text content of a list item can be preceded by various media elements:
   <li class="micl-list-item-two">
     <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">person</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>
+      <span class="micl-list-item__overline">Senior consultant</span>
+      <span class="micl-list-item__headline">Bill Radmore</span>
     </span>
   </li>
   ```
@@ -97,10 +113,10 @@ The text content of a list item can be preceded by various media elements:
 - **Avatar**: Use `micl-list-item__avatar` with a text.
   ```HTML
   <li class="micl-list-item-two">
-    <span class="micl-list-item__avatar">BJ</span>
+    <span class="micl-list-item__avatar">BR</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>
+      <span class="micl-list-item__overline">Our man</span>
+      <span class="micl-list-item__headline">Bill Radmore</span>
     </span>
   </li>
   ```
@@ -110,18 +126,18 @@ The text content of a list item can be preceded by various media elements:
   <li class="micl-list-item-two">
     <span class="micl-list-item__image" style="background-image:url(https://...jpg)"></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>
+      <span class="micl-list-item__headline">Bill Radmore</span>
+      <span class="micl-list-item__supporting-text">bill.radmore@email.com</span>
     </span>
   </li>
   ```
 
-- **Thumbnail (Video)**: Use `micl-list-item__thumbnail` for video previews with a background-image.
+- **Thumbnail (Video)**: Use `micl-list-item__thumbnail` for thumbnail-sized imagery (e.g. video previews or photos).
   ```HTML
   <li class="micl-list-item-two">
     <span class="micl-list-item__thumbnail" style="background-image:url(https://...mp4)"></span>
     <span class="micl-list-item__text">
-      <span class="micl-list-item__headline">Bill Jones</span>
+      <span class="micl-list-item__headline">Bill Radmore</span>
       <span class="micl-list-item__supporting-text">Short clip of Bill</span>
     </span>
   </li>
@@ -149,7 +165,7 @@ The text of a list item may be followed by a trailing text, imagery or other ele
     </span>
     <span class="micl-list-item__trailing-text">100+</span>
   </li>
-  ````
+  ```
 
 ### Selecting List Items
 To enable selection of list items, integrate a Checkbox or Switch component within the `<li>` element.
@@ -172,7 +188,7 @@ To enable selection of list items, integrate a Checkbox or Switch component with
       >
     </label>
   </li>
-  <li role="separator" class="micl-divider"></li>
+  <li role="separator" class="micl-divider-inset"></li>
   <li role="option" class="micl-list-item-two">
     <label>
       <input
@@ -191,26 +207,169 @@ To enable selection of list items, integrate a Checkbox or Switch component with
 </ul>
 ```
 
-- The `role="listbox"` is used for accessibility, indicating a selectable list.
+- The `role="listbox"` and `role="option"` are used for accessibility, indicating a selectable list. They are added automatically when a list contains a selectable item (an item with `tabindex="0"`. The example above shows these roles for clarity.
 
 ## Customizations
-You can customize the appearance of the List component by overriding its global CSS variables. These variables are declared on the `:root` pseudo-class and can be changed on any appropriate parent element to affect its child lists.
-
-| Variable name | Default Value | Description |
-| ------------- | ------------- | ----------- |
-| --md-sys-list-padding | 8px | The vertical padding of a list. |
-| --md-sys-list-item-one-height | 56px | The height for a single-line list item. |
-| --md-sys-list-item-two-height | 72px | The height for a two-line list item. |
-| --md-sys-list-item-three-height | 88px | The height for a three-line list item. |
-| --md-sys-list-item-one-padding | 8px | The vertical padding of a single-line list item. |
-| --md-sys-list-item-two-padding | 8px | The vertical padding of a two-line list item. |
-| --md-sys-list-item-three-padding | 12px | The vertical padding of a three-line list item. |
-| --md-sys-list-item-space | 16px | The horizontal spacing between the elements within a list item. |
+The List component supports the following CSS variables, as defined in the [Material Design 3 Expressive List Specification](https://m3.material.io/components/lists/specs):
+
+| Variable name |
+| ------------- |
+| --md-comp-list-container-color |
+| --md-comp-list-container-shape |
+| --md-comp-list-container-space |
+| --md-comp-list-segment-gap |
+| |
+| --md-comp-list-item-container-color |
+| --md-comp-list-item-container-expressive-shape |
+| --md-comp-list-item-container-disabled-expressive-shape |
+| --md-comp-list-item-container-dragged-expressive-shape |
+| --md-comp-list-item-container-focused-expressive-shape |
+| --md-comp-list-item-container-hovered-expressive-shape |
+| --md-comp-list-item-container-pressed-expressive-shape |
+| --md-comp-list-item-container-selected-expressive-shape |
+| --md-comp-list-item-container-selected-disabled-expressive-shape |
+| --md-comp-list-item-container-selected-dragged-expressive-shape |
+| --md-comp-list-item-container-selected-focused-expressive-shape |
+| --md-comp-list-item-container-selected-hovered-expressive-shape |
+| --md-comp-list-item-container-selected-pressed-expressive-shape |
+| |
+| --md-comp-list-item-between-space |
+| --md-comp-list-item-bottom-space |
+| --md-comp-list-item-label-text-color |
+| --md-comp-list-item-one-line-container-height |
+| --md-comp-list-item-overline-color |
+| --md-comp-list-item-segmented-container-color |
+| --md-comp-list-item-supporting-text-color |
+| --md-comp-list-item-three-line-container-height |
+| --md-comp-list-item-top-space |
+| --md-comp-list-item-two-line-container-height |
+| |
+| --md-comp-list-item-disabled-label-text-color |
+| --md-comp-list-item-disabled-label-text-opacity |
+| --md-comp-list-item-disabled-leading-icon-color |
+| --md-comp-list-item-disabled-leading-icon-opacity |
+| --md-comp-list-item-disabled-overline-color |
+| --md-comp-list-item-disabled-overline-opacity |
+| --md-comp-list-item-disabled-state-layer-color |
+| --md-comp-list-item-disabled-state-layer-opacity |
+| --md-comp-list-item-disabled-supporting-text-color |
+| --md-comp-list-item-disabled-supporting-text-opacity |
+| --md-comp-list-item-disabled-trailing-icon-color |
+| --md-comp-list-item-disabled-trailing-icon-opacity |
+| --md-comp-list-item-disabled-trailing-supporting-text-color |
+| --md-comp-list-item-disabled-trailing-supporting-text-opacity |
+| |
+| --md-comp-list-item-dragged-container-elevation |
+| --md-comp-list-item-dragged-label-text-color |
+| --md-comp-list-item-dragged-leading-icon-color |
+| --md-comp-list-item-dragged-state-layer-color |
+| --md-comp-list-item-dragged-state-layer-opacity |
+| --md-comp-list-item-dragged-supporting-text-color |
+| --md-comp-list-item-dragged-trailing-icon-color |
+| --md-comp-list-item-dragged-trailing-supporting-text-color |
+| --md-comp-list-item-focus-indicator-color |
+| --md-comp-list-item-focus-indicator-offset |
+| --md-comp-list-item-focus-indicator-thickness |
+| --md-comp-list-item-focus-label-text-color |
+| --md-comp-list-item-focus-leading-icon-color |
+| --md-comp-list-item-focus-state-layer-color |
+| --md-comp-list-item-focus-state-layer-opacity |
+| --md-comp-list-item-focus-supporting-text-color |
+| --md-comp-list-item-focus-trailing-icon-color |
+| --md-comp-list-item-focus-trailing-supporting-text-color |
+| --md-comp-list-item-hover-label-text-color |
+| --md-comp-list-item-hover-leading-icon-color |
+| --md-comp-list-item-hover-state-layer-color |
+| --md-comp-list-item-hover-state-layer-opacity |
+| --md-comp-list-item-hover-supporting-text-color |
+| --md-comp-list-item-hover-trailing-icon-color |
+| --md-comp-list-item-hover-trailing-supporting-text-color |
+| --md-comp-list-item-pressed-label-text-color |
+| --md-comp-list-item-pressed-leading-icon-color |
+| --md-comp-list-item-pressed-state-layer-color |
+| --md-comp-list-item-pressed-state-layer-opacity |
+| --md-comp-list-item-pressed-supporting-text-color |
+| --md-comp-list-item-pressed-trailing-icon-color |
+| --md-comp-list-item-pressed-trailing-supporting-text-color |
+| |
+| --md-comp-list-item-leading-avatar-color |
+| --md-comp-list-item-leading-avatar-label-color |
+| --md-comp-list-item-leading-avatar-shape |
+| --md-comp-list-item-leading-avatar-size |
+| --md-comp-list-item-leading-icon-color |
+| --md-comp-list-item-leading-icon-expressive-size |
+| --md-comp-list-item-leading-image-height |
+| --md-comp-list-item-leading-image-expressive-shape |
+| --md-comp-list-item-leading-image-width |
+| --md-comp-list-item-leading-space |
+| --md-comp-list-item-leading-video-height |
+| --md-comp-list-item-leading-video-shape |
+| --md-comp-list-item-leading-video-width |
+| |
+| --md-comp-list-item-trailing-icon-color |
+| --md-comp-list-item-trailing-icon-expressive-size |
+| --md-comp-list-item-trailing-space |
+| --md-comp-list-item-trailing-supporting-text-color |
+| |
+| --md-comp-list-item-selected-container-color |
+| --md-comp-list-item-selected-label-text-color |
+| --md-comp-list-item-selected-leading-icon-color |
+| --md-comp-list-item-selected-overline-color |
+| --md-comp-list-item-selected-supporting-text-color |
+| --md-comp-list-item-selected-trailing-icon-color |
+| --md-comp-list-item-selected-trailing-supporting-text-color |
+| |
+| --md-comp-list-item-selected-disabled-container-color |
+| --md-comp-list-item-selected-disabled-container-opacity |
+| --md-comp-list-item-selected-disabled-label-text-color |
+| --md-comp-list-item-selected-disabled-label-text-opacity |
+| --md-comp-list-item-selected-disabled-leading-icon-color |
+| --md-comp-list-item-selected-disabled-leading-icon-opacity |
+| --md-comp-list-item-selected-disabled-overline-color |
+| --md-comp-list-item-selected-disabled-overline-opacity |
+| --md-comp-list-item-selected-disabled-state-layer-color |
+| --md-comp-list-item-selected-disabled-state-layer-opacity |
+| --md-comp-list-item-selected-disabled-supporting-text-color |
+| --md-comp-list-item-selected-disabled-supporting-text-opacity |
+| --md-comp-list-item-selected-disabled-trailing-icon-color |
+| --md-comp-list-item-selected-disabled-trailing-icon-opacity |
+| --md-comp-list-item-selected-disabled-trailing-supporting-text-color |
+| --md-comp-list-item-selected-disabled-trailing-supporting-text-opacity |
+| |
+| --md-comp-list-item-selected-dragged-container-elevation |
+| --md-comp-list-item-selected-dragged-label-text-color |
+| --md-comp-list-item-selected-dragged-leading-icon-color |
+| --md-comp-list-item-selected-dragged-state-layer-color |
+| --md-comp-list-item-selected-dragged-state-layer-opacity |
+| --md-comp-list-item-selected-dragged-supporting-text-color |
+| --md-comp-list-item-selected-dragged-trailing-icon-color |
+| --md-comp-list-item-selected-dragged-trailing-supporting-text-color |
+| --md-comp-list-item-selected-focus-label-text-color |
+| --md-comp-list-item-selected-focus-leading-icon-color |
+| --md-comp-list-item-selected-focus-state-layer-color |
+| --md-comp-list-item-selected-focus-state-layer-opacity |
+| --md-comp-list-item-selected-focus-supporting-text-color |
+| --md-comp-list-item-selected-focus-trailing-icon-color |
+| --md-comp-list-item-selected-focus-trailing-supporting-text-color |
+| --md-comp-list-item-selected-hover-label-text-color |
+| --md-comp-list-item-selected-hover-leading-icon-color |
+| --md-comp-list-item-selected-hover-state-layer-color |
+| --md-comp-list-item-selected-hover-state-layer-opacity |
+| --md-comp-list-item-selected-hover-supporting-text-color |
+| --md-comp-list-item-selected-hover-trailing-icon-color |
+| --md-comp-list-item-selected-hover-trailing-supporting-text-color |
+| --md-comp-list-item-selected-pressed-label-text-color |
+| --md-comp-list-item-selected-pressed-leading-icon-color |
+| --md-comp-list-item-selected-pressed-state-layer-color |
+| --md-comp-list-item-selected-pressed-state-layer-opacity |
+| --md-comp-list-item-selected-pressed-supporting-text-color |
+| --md-comp-list-item-selected-pressed-trailing-icon-color |
+| --md-comp-list-item-selected-pressed-trailing-supporting-text-color |
 
 **Example: Changing the height of single-line list items**
 
 ```HTML
-<div style="--md-sys-list-item-one-height:60px">
+<div style="--md-comp-list-item-one-line-container-height:60px">
   <ul class="micl-list">
     <li class="micl-list-item-one">
       <span class="micl-list-item__text">