material-inspired-component-library 7.0.2 → 8.0.0

package/components/datepicker/index.ts

@@ -139,9 +139,9 @@ const renderCalendarHeader = (): DocumentFragment =>
     const tempDate = new Date();
     const startOffset = tempDate.getDay() - firstDayOfWeek;
     tempDate.setDate(tempDate.getDate() - startOffset);
-    
+
     const fragment = document.createDocumentFragment();
-    
+
     for (let i = 0; i < 7; i++) {
         const span = document.createElement('span');
         span.style.gridArea = `1 / ${i + 1}`;
@@ -179,10 +179,10 @@ const populateContainerWithDays = (
         const day = days[index];
         el.dateTime = day.val;
         el.textContent = day.date.getDate().toString();
-        
+
         const isSelected = day.date.getTime() === state.selected.getTime();
         const isToday = day.date.getTime() === today.getTime();
-        
+
         el.className = '';
         if (!day.isCurrentMonth) el.classList.add('micl-datepicker__outside');
         if (isSelected) el.classList.add('micl-datepicker__selected');
@@ -303,7 +303,7 @@ const renderCalendar = (
 
     const monthInput = dialog.querySelector<HTMLInputElement>(`.micl-datepicker__months input[value="${state.viewDate.getMonth()}"]`);
     if (monthInput) monthInput.checked = true;
-    
+
     const yearInput = dialog.querySelector<HTMLInputElement>(`.micl-datepicker__years input[value="${state.viewDate.getFullYear()}"]`);
     if (yearInput) yearInput.checked = true;
 };
@@ -335,7 +335,7 @@ const initPeriodPickers = (dialog: HTMLDialogElement, min: Date, max: Date): voi
                 months.push(current.getMonth());
                 current.setMonth(current.getMonth() + 1);
             }
-            
+
             [...new Set(months.sort((a, b) => a - b))].forEach(m => {
                 const label = document.createElement('label');
                 label.innerHTML = `<span class="material-symbols-outlined">check</span><input type="radio" name="miclmonth" value="${m}"> ${formatters.monthLong.format(new Date(2000, m, 1))}`;
@@ -498,7 +498,7 @@ const selectDate = (dialog: HTMLDialogElement, dateStr: string, isLocaleFormatte
     if (parts.length === 3) {
         state.selected = new Date(parts[0], parts[1], parts[2]);
         state.viewDate = new Date(state.selected);
-        
+
         renderCalendar(dialog, state);
     }
 };
@@ -562,7 +562,7 @@ export default (() =>
                     const forMonth = btn.parentElement?.classList.contains('micl-datepicker__month-selector');
                     const isNext   = btn.classList.contains('micl-datepicker__next');
                     const isPrev   = btn.classList.contains('micl-datepicker__previous');
-                    
+
                     if (isNext || isPrev) {
                         changePeriod(dialog, isNext ? 1 : -1, forMonth ? 'month' : 'year');
                         return;
@@ -628,7 +628,7 @@ export default (() =>
                 if (!isInvoker(invoker)) {
                     return;
                 }
-                
+
                 let initialDate = new Date();
                 let min = new Date(1900, 0, 1);
                 let max = new Date(2099, 11, 31);

package/components/dialog/index.scss

@@ -44,6 +44,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 +60,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 +201,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 +222,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

@@ -61,10 +61,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 +77,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 +91,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">