material-inspired-component-library 1.2.2 → 1.3.0

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};
+    --miclripple: 1;
 
     padding: 0;
     border: none;
     border-radius: var(--md-sys-shape-corner-full);
     background-color: transparent;
+    background-image:
+        radial-gradient(circle at var(--x, center) var(--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/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(--x, center) var(--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)) {
+        --miclripple: 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.