material-inspired-component-library 1.2.2 → 2.0.0

package/components/list/index.scss

@@ -20,12 +20,12 @@
 // SOFTWARE.
 
 @use '../../styles/motion';
-@use '../../styles/ripple';
 @use '../../styles/shapes';
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
 :root {
+    --md-sys-list-padding: 8px;
     --md-sys-list-item-one-height: 56px;
     --md-sys-list-item-two-height: 72px;
     --md-sys-list-item-three-height: 88px;
@@ -43,7 +43,7 @@
     --md-sys-accordion-motion-duration: #{motion.$md-sys-motion-expressive-default-spatial-duration};
 
     margin: 0;
-    padding: 8px 0;
+    padding: var(--md-sys-list-padding) 0;
     interpolate-size: allow-keywords;
     list-style-type: none;
 
@@ -71,9 +71,6 @@
                 pointer-events: none;
             }
             &:not(.micl-list-item--disabled) {
-                @include ripple.effect;
-                --miclripple: 1;
-
                 cursor: pointer;
             }
         }
@@ -98,6 +95,7 @@
 .micl-list-item-one,
 .micl-list-item-two,
 .micl-list-item-three {
+    --statelayer-color: var(--md-sys-color-on-surface);
     --md-sys-list-item-thumbnail-aspect-ratio: 1.778;
 
     box-sizing: border-box;
@@ -105,24 +103,39 @@
     align-items: center;
     column-gap: var(--md-sys-list-item-space);
     padding-inline: var(--md-sys-list-item-space);
+    border: none;
     border-radius: var(--md-sys-shape-corner-none);
     background-color: var(--md-sys-list-item-container-color);
+    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%;
     list-style: none;
-    transition: background-color var(--md-sys-list-motion-duration) linear;
+    transition:
+        background-size 3000ms,
+        --statelayer-opacity var(--md-sys-list-motion-duration) linear;
 
+    &:not(:has(> button)) {
+        --micl-ripple: 1;
+    }
     &> a,
+    &> button,
     &> label {
+        box-sizing: border-box;
         display: inherit;
         align-items: inherit;
         column-gap: inherit;
-        border-radius: inherit;
-        background-color: inherit;
+        min-height: inherit;
         inline-size: 100%;
         padding-inline: var(--md-sys-list-item-space);
+        border: none;
+        border-radius: inherit;
+        background-color: transparent;
         text-decoration: none;
         cursor: pointer;
     }
-    &:has(> a,> label) {
+    &:has(> a,> button,> label) {
         padding-inline: 0;
     }
     &:disabled,
@@ -139,14 +152,14 @@
         .micl-list-item__thumbnail {
             opacity: 38%;
         }
-        a, label {
+        a, button, label {
             pointer-events: none;
             cursor: auto;
         }
     }
     &:not(:disabled):not(.micl-list-item--disabled) {
         &:hover {
-            background-color: color-mix(in srgb, var(--md-sys-list-item-container-color), var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity));
+            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
 
             &:has(input[type=checkbox]) {
                 cursor: pointer;
@@ -156,26 +169,25 @@
             }
         }
         &: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: calc(-1 * var(--md-sys-state-focus-indicator-thickness));
-            background-color: color-mix(in srgb, var(--md-sys-list-item-container-color), var(--md-sys-color-on-surface) var(--md-sys-state-focus-state-layer-opacity));
+            outline-offset: var(--md-sys-state-focus-indicator-inner-offset);
 
             .micl-list-item__icon {
                 font-variation-settings: 'FILL' 1;
             }
         }
         &:active {
-            background-color: color-mix(in srgb, var(--md-sys-list-item-container-color), var(--md-sys-color-on-surface) var(--md-sys-state-pressed-state-layer-opacity));
+            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
+
+            background-size: 0%, 100%;
+            transition: background-size 0ms;
 
             .micl-list-item__icon {
                 font-variation-settings: 'FILL' 1;
             }
         }
-        &:has(input[type=checkbox]) {
-            @include ripple.effect;
-            --miclripple: 1;
-            --md-sys-ripple-background-color: var(--md-sys-color-primary);
-        }
         &:has(input[type=checkbox]:checked) {
             background-color: var(--md-sys-color-secondary-container);
 
@@ -187,18 +199,11 @@
             .micl-list-item__trailing-text {
                 color: var(--md-sys-color-on-surface);
             }
-            &:focus-visible {
-                background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), 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-secondary-container), var(--md-sys-color-on-surface) var(--md-sys-state-pressed-state-layer-opacity));
-            }
         }
         input[type=checkbox]:not(:disabled):hover,
         input[type=checkbox]:not(:disabled):active {
             --checkbox-state-layer-color: initial;
             --checkbox-outline-color: initial;
-            --md-sys-ripple-background-color: transparent;
         }
     }
 }
@@ -206,7 +211,7 @@
 .micl-list-item-one {
     min-height: var(--md-sys-list-item-one-height);
 
-    &:not(:has(> a,> label)) {
+    &:not(:has(> a,> button,> label)) {
         padding-block-start: var(--md-sys-list-item-one-padding);
         padding-block-end: var(--md-sys-list-item-one-padding);
 
@@ -217,6 +222,7 @@
         }
     }
     &> a,
+    &> button,
     &> label {
         padding-block-start: var(--md-sys-list-item-one-padding);
         padding-block-end: var(--md-sys-list-item-one-padding);
@@ -231,7 +237,7 @@
 .micl-list-item-two {
     min-height: var(--md-sys-list-item-two-height);
 
-    &:not(:has(> a, > label)) {
+    &:not(:has(> a,> button,> label)) {
         padding-block-start: var(--md-sys-list-item-two-padding);
         padding-block-end: var(--md-sys-list-item-two-padding);
 
@@ -242,6 +248,7 @@
         }
     }
     &> a,
+    &> button,
     &> label {
         padding-block-start: var(--md-sys-list-item-two-padding);
         padding-block-end: var(--md-sys-list-item-two-padding);
@@ -261,7 +268,7 @@
 .micl-list-item-three {
     min-height: var(--md-sys-list-item-three-height);
 
-    &:not(:has(> a, > label)) {
+    &:not(:has(> a,> button,> label)) {
         padding-block-start: var(--md-sys-list-item-three-padding);
         padding-block-end: var(--md-sys-list-item-three-padding);
 
@@ -272,6 +279,7 @@
         }
     }
     &> a,
+    &> button,
     &> label {
         padding-block-start: var(--md-sys-list-item-three-padding);
         padding-block-end: var(--md-sys-list-item-three-padding);
@@ -300,9 +308,10 @@
 }
 
 .micl-list-item__icon {
-    color: var(--md-sys-color-on-surface-variant);
+    min-width: 24px;
     font-size: 24px;
     font-variation-settings: 'FILL' 0;
+    color: var(--md-sys-color-on-surface-variant);
     transition: font-variation-settings var(--md-sys-list-motion-duration) linear;
 }
 .micl-list-item__avatar {

package/components/list/index.ts

@@ -58,14 +58,9 @@ export default (() =>
                 return;
             }
 
-            let currentIndex = items.findIndex(item => isSelected(item));
-            if (currentIndex === -1) {
-                currentIndex = items.findIndex(item => item.tabIndex === 0);
-            }
-            if (currentIndex === -1) {
-                currentIndex = 0;
-            }
-            let nextIndex = currentIndex;
+            let selectedIndex = items.findIndex(item => isSelected(item)),
+                currentIndex  = items.findIndex(item => item.tabIndex === 0),
+                nextIndex     = currentIndex;
 
             switch (event.key) {
                 case 'ArrowDown':
@@ -77,7 +72,6 @@ export default (() =>
                     event.preventDefault();
                     break;
                 case 'Tab':
-                    let selectedIndex = items.findIndex(item => isSelected(item));
                     if (selectedIndex === -1) {
                         if (currentIndex !== 0) {
                             items[currentIndex].tabIndex = -1;
@@ -102,6 +96,13 @@ export default (() =>
                 items[currentIndex].tabIndex = -1;
                 items[nextIndex].tabIndex = 0;
                 items[nextIndex].focus();
+
+                const btn = items[nextIndex].querySelector(':scope > button');
+                btn?.dispatchEvent(new MouseEvent('mouseenter', {
+                    bubbles   : true,
+                    cancelable: true,
+                    view      : window
+                }));
             }
         }
     };

package/components/menu/README.md

@@ -4,7 +4,7 @@ This component implements the [Material Design 3 Expressive Menu](https://m3.mat
 ## Basic Usage
 
 ### HTML
-The Menu component is an extension of the [List component](../list/README.md). It consists of a `<nav>` element with the `micl-menu` class, which acts as the container for a `<ul>` with the `micl-list` class. The menu can be opened and closed using a control element with the `popovertarget` attribute.
+The Menu component is an extension of the [List component](../list/README.md). It consists of a `<nav>` element with the `micl-menu` class, which acts as the container for a `<ul>` with the `micl-list` class. The menu can be opened and closed using a control element with the `popovertarget` attribute, where the value of the attribute matches the `id` of the menu's `<nav>` element.
 
 ```HTML
 <nav id="mymenu" class="micl-menu" popover>
@@ -17,7 +17,7 @@ The Menu component is an extension of the [List component](../list/README.md). I
   </ul>
 </nav>
 
-<button type="button" popovertarget="mymenu">Open Basic Menu</button>
+<button type="button" popovertarget="mymenu">Open Menu</button>
 ```
 
 ### CSS
@@ -68,17 +68,18 @@ Since the Menu component is based on the **List component**, all of its list ite
 ```
 
 **Example: A menu with a link**
+
 To make a menu item function as a link, wrap its content in an `<a>` tag and set the `tabindex` to `-1`. This ensures the link is clickable but does not interfere with menu navigation.
 
 ```HTML
 <nav id="mymenu" class="micl-menu" popover>
   <ul class="micl-list">
-    <li class="micl-list-item-two micl-list-item__divider">
+    <li class="micl-list-item-two" tabindex="0">
       <a href="https://www.nytimes.com" tabindex="-1">
         <span class="micl-list-item__icon material-symbols-outlined" aria-hidden="true">newspaper</span>
         <span class="micl-list-item__text">
           <span class="micl-list-item__headline">The New York Times</span>
-          <span class="micl-list-item__supporting-text">Clicking this item opens the front page of The New York Times</span>
+          <span class="micl-list-item__supporting-text">Open the front page of The New York Times</span>
         </span>
       </a>
     </li>
@@ -86,9 +87,71 @@ To make a menu item function as a link, wrap its content in an `<a>` tag and set
 </nav>
 ```
 
+**Example: A menu with a submenu**
+
+A menu item may trigger opening a submenu when invoked by a button. Wrap the menu item content in a `<button>` tag, set its `tabindex` to `-1` and add the `popovertarget` attribute that points to the submenu. The button acts then as the control element for the submenu.
+
+```HTML
+<nav id="mymenu" class="micl-menu" popover>
+  <ul class="micl-list">
+    <li class="micl-list-item-one" tabindex="0">
+      <button popovertarget="mysubmenu" tabindex="-1">
+        <span class="micl-list-item__text">
+          <span class="micl-list-item__headline">Item 1</span>
+        </span>
+        <span class="micl-list-item__icon material-symbols-outlined">arrow_right</span>
+      </button>
+      <nav id="mysubmenu" class="micl-menu" popover>
+        <ul class="micl-list">
+          <li class="micl-list-item-one" tabindex="0">
+            <span class="micl-list-item__text">
+              <span class="micl-list-item__headline">Item 1-1</span>
+            </span>
+          </li>
+          <li class="micl-list-item-one" tabindex="0">
+            <span class="micl-list-item__text">
+              <span class="micl-list-item__headline">Item 1-2</span>
+            </span>
+          </li>
+        </ul>
+      </nav>
+    </li>
+    <li class="micl-list-item-one" tabindex="0">
+      <span class="micl-list-item__text">
+        <span class="micl-list-item__headline">Item 2</span>
+      </span>
+    </li>
+  </ul>
+</nav>
+```
+
 Adding the `micl-list-item--disabled` class to a menu item causes the item to be displayed in a disabled state.
 
 Add the `micl-list-item__divider` class to a menu item to create a divider between the item and the previous menu item.
 
+## Customizations
+You can customize the appearance of the Menu 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 menus.
+
+| Variable name | Default Value | Description |
+| ------------- | ----- | ----------- |
+| --md-sys-menu-width-max | 280px | The maximum width allowed for a menu |
+| --md-sys-menu-width-min | 112px | The minimum allowed width for a menu |
+
+**Example: Changing the maximum width**
+
+```HTML
+<div style="--md-sys-menu-width-max:320px">
+  <nav id="mymenu" class="micl-menu" popover>
+    <ul class="micl-list">
+      <li class="micl-list-item-one" tabindex="0">
+        <span class="micl-list-item__text">
+          <span class="micl-list-item__headline">Menu item</span>
+        </span>
+      </li>
+    </ul>
+  </nav>
+</div>
+```
+
 ## Compatibility
 This component uses **popover anchor positioning** to place the menu next to its invoker. This is a modern CSS feature that may not be fully supported in all browsers. To ensure the menu works in browsers that do not support anchor positioning, wrap the menu and its invoker in a `<div>` element with `position:relative`. Please check [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/anchor#browser_compatibility) for details.

package/components/menu/index.scss

@@ -21,23 +21,25 @@
 
 @use '../../styles/elevation';
 @use '../../styles/motion';
-@use '../../styles/ripple';
 @use '../../styles/shapes';
-@use '../../styles/statelayer';
 
-.micl-menu[popover] {
+:root {
     --md-sys-menu-motion-spatial: #{motion.$md-sys-motion-expressive-default-spatial};
     --md-sys-menu-motion-duration: #{motion.$md-sys-motion-expressive-default-spatial-duration};
     --md-sys-menu-motion-duration-reverse: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
+    --md-sys-menu-width-max: 280px;
+    --md-sys-menu-width-min: 112px;
+}
 
+.micl-menu[popover] {
     position: absolute;
     inset: unset;
     inset-block-start: anchor(end);
     inset-inline-start: anchor(start);
-    position-try-fallbacks: flip-block, flip-inline;
-    min-width: 112px;
-    max-width: 280px;
-    padding-inline: 0;
+    position-try: most-block-size flip-block, flip-inline;
+    min-width: var(--md-sys-menu-width-min);
+    max-width: var(--md-sys-menu-width-max);
+    padding: 0;
     border: none;
     border-radius: var(--md-sys-shape-corner-extra-small);
     background-color: var(--md-sys-color-surface-container);
@@ -45,7 +47,7 @@
     opacity: 0;
     overflow: hidden;
     transform: scaleY(0);
-    transform-origin: top left;
+    transform-origin: left top;
     transition:
         opacity var(--md-sys-menu-motion-duration-reverse) linear,
         transform var(--md-sys-menu-motion-duration-reverse) var(--md-sys-menu-motion-spatial),
@@ -61,17 +63,9 @@
             overlay var(--md-sys-menu-motion-duration) linear allow-discrete,
             display var(--md-sys-menu-motion-duration) linear allow-discrete;
 
-        @position-try-on {
-            transform-origin: bottom left;
-        }
-
         @starting-style {
             opacity: 0;
             transform: scaleY(0);
-
-            @position-try-on {
-                transform-origin: bottom left;
-            }
         }
         &::backdrop {
             background-color: rgba(0, 0, 0, 0.2);
@@ -89,7 +83,8 @@
             display var(--md-sys-menu-motion-duration) linear allow-discrete;
     }
 
-    .micl-list {
+    &> .micl-list {
+        --md-sys-list-padding: 4px;
         --md-sys-list-item-one-height: 48px;
         --md-sys-list-item-one-padding: 0;
         --md-sys-list-item-two-padding: 0;
@@ -99,18 +94,6 @@
         .micl-list-item-one,
         .micl-list-item-two,
         .micl-list-item-three {
-            &:not(.micl-list-item--disabled) {
-                --miclripple: 1;
-
-                @include ripple.effect;
-
-                cursor: pointer;
-
-                &:focus-visible {
-                    outline-offset: calc(-1 * var(--md-sys-state-focus-indicator-thickness));
-                    z-index: 1;
-                }
-            }
             &.micl-list-item__divider {
                 position: relative;
                 margin-block-start: 16px;
@@ -126,6 +109,23 @@
                     border-top: var(--md-sys-divider-thickness) solid var(--md-sys-divider-color);
                 }
             }
+            &> .micl-menu[popover] {
+                transform: scaleX(0);
+
+                &:popover-open {
+                    transform: scaleX(1);
+
+                    @starting-style {
+                        transform: scaleX(0);
+                    }
+                }
+                &:popover-open {
+                    &::backdrop {
+                        background-color: rgba(0, 0, 0, 0);
+                    }
+                }
+            }
         }
     }
 }
+

package/components/menu/index.ts

@@ -21,27 +21,15 @@
 
 export const menuSelector = '.micl-menu[popover]';
 
-/**
- * Set the origin for menu transformations just before transitions start.
- * By default, the origin is "top left" (the menu opens just below the invoker, left aligned),
- * but could also be "top right", "bottom left" or "bottom right".
- * When the browser needs to apply a position-try-fallbacks, because there is not enough space
- * for the menu in the default location, then the reverse transformation will be applied from
- * the wrong origin.
- * Therefore, when the menu is open, calculate the transformation origin just before the
- * transitions start. When the menu is closed, do the same just after the 'display:none' has
- * been removed by the browser (the 'toggle' event has then been triggered).
- */
 export default (() =>
 {
     const getOrigin = (invoker: Element, popover: Element): string =>
     {
-        const invokerY  = invoker.getBoundingClientRect().y,
-              popoverY  = popover.getBoundingClientRect().y,
-              oldOrigin = window.getComputedStyle(popover).getPropertyValue('transform-origin');
+        const invokerRect = invoker.getBoundingClientRect(),
+              popoverRect = popover.getBoundingClientRect();
 
-        return ((invokerY > popoverY) ? 'bottom ' : 'top ') +
-               ((parseInt(oldOrigin) > 0) ? 'right' : 'left');
+        return ((invokerRect.x > popoverRect.x) ? 'right ' : 'left ') +
+               ((invokerRect.y > popoverRect.y) ? 'bottom' : 'top');
     };
 
     return {
@@ -72,6 +60,49 @@ export default (() =>
                 }
             });
 
+            element.querySelectorAll<HTMLButtonElement>(
+                ':scope > ul.micl-list > li > button[popovertarget]'
+            ).forEach(submenuinvoker =>
+            {
+                if (submenuinvoker.popoverTargetElement?.matches('.micl-menu[popover]')) {
+                    let hoverTimeout: any,
+                        id = `--${submenuinvoker.popoverTargetElement.id}`;
+
+                    if (submenuinvoker.popoverTargetElement instanceof HTMLElement) {
+                        submenuinvoker.style.setProperty('anchor-name', id);
+                        submenuinvoker.popoverTargetElement.style.insetBlockStart = `anchor(${id} start)`;
+                        submenuinvoker.popoverTargetElement.style.insetInlineStart = `anchor(${id} end)`;
+                    }
+
+                    submenuinvoker.addEventListener('mouseenter', () =>
+                    {
+                        if (submenuinvoker.popoverTargetElement instanceof HTMLElement) {
+                            submenuinvoker.popoverTargetElement.showPopover();
+                        }
+                    });
+                    submenuinvoker.addEventListener('mouseleave', () =>
+                    {
+                        hoverTimeout = setTimeout(() => {
+                            if (
+                                submenuinvoker.popoverTargetElement instanceof HTMLElement
+                                && !submenuinvoker.popoverTargetElement.matches(':hover')
+                            ) {
+                                submenuinvoker.popoverTargetElement.hidePopover();
+                            }
+                        }, 100);
+                    });
+                    submenuinvoker.popoverTargetElement.addEventListener('mouseenter', () =>
+                    {
+                        clearTimeout(hoverTimeout);
+                    });
+                    submenuinvoker.popoverTargetElement.addEventListener('mouseleave', () =>
+                    {
+                        if (submenuinvoker.popoverTargetElement instanceof HTMLElement) {
+                            submenuinvoker.popoverTargetElement.hidePopover();
+                        }
+                    });
+                }
+            });
         }
     };
 })();