material-inspired-component-library 7.0.2 → 8.0.0

package/components/menu/index.scss

@@ -23,47 +23,204 @@
 @use '../../styles/elevation';
 @use '../../styles/motion';
 @use '../../styles/shapes';
+@use '../../styles/typography';
 
 :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;
+    --md-comp-menu-width-max: 320px;
+    --md-comp-menu-width-min: 112px;
+}
+
+$menu-padding-block: 4px;
+$item-classes: ':is(.micl-list-item-one, .micl-list-item-two, .micl-list-item-three)';
+
+@mixin menu-color-set(
+    $variant,
+    $container,
+    $on-container,
+    $on-container-strong,
+    $on-icon-active,
+    $selected-container,
+    $on-selected
+) {
+    --md-comp-list-item-container-color: var(--md-comp-menu-#{$variant}-menu-item-container-color, #{$container});
+    --md-comp-list-item-label-text-color: var(--md-comp-menu-#{$variant}-menu-item-label-text-color, #{$on-container});
+    --md-comp-list-item-leading-icon-color: var(--md-comp-menu-#{$variant}-menu-item-leading-icon-color, #{$on-container});
+    --md-comp-list-item-supporting-text-color: var(--md-comp-menu-#{$variant}-menu-item-supporting-text-color, #{$on-container});
+    --md-comp-list-item-trailing-icon-color: var(--md-comp-menu-#{$variant}-menu-item-trailing-icon-color, #{$on-container});
+    --md-comp-list-item-trailing-supporting-text-color: var(--md-comp-menu-#{$variant}-menu-item-trailing-supporting-text-color, #{$on-container});
+
+    --md-comp-list-item-disabled-label-text-color: var(--md-comp-menu-#{$variant}-menu-item-disabled-label-text-color, #{$on-container-strong});
+    --md-comp-list-item-disabled-label-text-opacity: var(--md-comp-menu-#{$variant}-menu-item-disabled-label-text-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%));
+    --md-comp-list-item-disabled-leading-icon-color: var(--md-comp-menu-#{$variant}-menu-item-disabled-leading-icon-color, #{$on-container-strong});
+    --md-comp-list-item-disabled-leading-icon-opacity: var(--md-comp-menu-#{$variant}-menu-item-disabled-leading-icon-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%));
+    --md-comp-list-item-disabled-supporting-text-color: var(--md-comp-menu-#{$variant}-menu-item-disabled-supporting-text-color, #{$on-container-strong});
+    --md-comp-list-item-disabled-supporting-text-opacity: var(--md-comp-menu-#{$variant}-menu-item-disabled-supporting-text-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%));
+    --md-comp-list-item-disabled-trailing-icon-color: var(--md-comp-menu-#{$variant}-menu-item-disabled-trailing-icon-color, #{$on-container-strong});
+    --md-comp-list-item-disabled-trailing-icon-opacity: var(--md-comp-menu-#{$variant}-menu-item-disabled-trailing-icon-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%));
+    --md-comp-list-item-disabled-trailing-supporting-text-color: var(--md-comp-menu-#{$variant}-menu-item-disabled-trailing-supporting-text-color, #{$on-container-strong});
+    --md-comp-list-item-disabled-trailing-supporting-text-opacity: var(--md-comp-menu-#{$variant}-menu-item-disabled-trailing-supporting-text-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%));
+
+    --md-comp-list-item-focus-label-text-color: var(--md-comp-menu-#{$variant}-menu-item-focused-label-text-color, #{$on-container-strong});
+    --md-comp-list-item-focus-leading-icon-color: var(--md-comp-menu-#{$variant}-menu-item-focused-leading-icon-color, #{$on-icon-active});
+    --md-comp-list-item-focus-state-layer-color: var(--md-comp-menu-#{$variant}-menu-item-focused-state-layer-color, #{$on-container-strong});
+    --md-comp-list-item-focus-state-layer-opacity: var(--md-comp-menu-#{$variant}-menu-item-focused-state-layer-opacity, var(--md-sys-state-focus-state-layer-opacity, 10%));
+    --md-comp-list-item-focus-supporting-text-color: var(--md-comp-menu-#{$variant}-menu-item-focused-supporting-text-color, #{$on-container});
+    --md-comp-list-item-focus-trailing-icon-color: var(--md-comp-menu-#{$variant}-menu-item-focused-trailing-icon-color, #{$on-icon-active});
+    --md-comp-list-item-focus-trailing-supporting-text-color: var(--md-comp-menu-#{$variant}-menu-item-focused-trailing-supporting-text-color, #{$on-container});
+
+    --md-comp-list-item-hover-label-text-color: var(--md-comp-menu-#{$variant}-menu-item-hovered-label-text-color, #{$on-container-strong});
+    --md-comp-list-item-hover-leading-icon-color: var(--md-comp-menu-#{$variant}-menu-item-hovered-leading-icon-color, #{$on-icon-active});
+    --md-comp-list-item-hover-state-layer-color: var(--md-comp-menu-#{$variant}-menu-item-hovered-state-layer-color, #{$on-container-strong});
+    --md-comp-list-item-hover-state-layer-opacity: var(--md-comp-menu-#{$variant}-menu-item-hovered-state-layer-opacity, var(--md-sys-state-hover-state-layer-opacity, 8%));
+    --md-comp-list-item-hover-supporting-text-color: var(--md-comp-menu-#{$variant}-menu-item-hovered-supporting-text-color, #{$on-container});
+    --md-comp-list-item-hover-trailing-icon-color: var(--md-comp-menu-#{$variant}-menu-item-hovered-trailing-icon-color, #{$on-icon-active});
+    --md-comp-list-item-hover-trailing-supporting-text-color: var(--md-comp-menu-#{$variant}-menu-item-hovered-trailing-supporting-text-color, #{$on-container});
+
+    --md-comp-list-item-pressed-label-text-color: var(--md-comp-menu-#{$variant}-menu-item-pressed-label-text-color, #{$on-container-strong});
+    --md-comp-list-item-pressed-leading-icon-color: var(--md-comp-menu-#{$variant}-menu-item-pressed-leading-icon-color, #{$on-icon-active});
+    --md-comp-list-item-pressed-state-layer-color: var(--md-comp-menu-#{$variant}-menu-item-pressed-state-layer-color, #{$on-container-strong});
+    --md-comp-list-item-pressed-state-layer-opacity: var(--md-comp-menu-#{$variant}-menu-item-pressed-state-layer-opacity, var(--md-sys-state-pressed-state-layer-opacity, 10%));
+    --md-comp-list-item-pressed-supporting-text-color: var(--md-comp-menu-#{$variant}-menu-item-pressed-supporting-text-color, #{$on-container});
+    --md-comp-list-item-pressed-trailing-icon-color: var(--md-comp-menu-#{$variant}-menu-item-pressed-trailing-icon-color, #{$on-icon-active});
+    --md-comp-list-item-pressed-trailing-supporting-text-color: var(--md-comp-menu-#{$variant}-menu-item-pressed-trailing-supporting-text-color, #{$on-container});
+
+    --md-comp-list-item-selected-container-color: var(--md-comp-menu-#{$variant}-menu-item-selected-container-color, #{$selected-container});
+    --md-comp-list-item-selected-label-text-color: var(--md-comp-menu-#{$variant}-menu-item-selected-label-text-color, #{$on-selected});
+    --md-comp-list-item-selected-leading-icon-color: var(--md-comp-menu-#{$variant}-menu-item-selected-leading-icon-color, #{$on-selected});
+    --md-comp-list-item-selected-supporting-text-color: var(--md-comp-menu-#{$variant}-menu-item-selected-supporting-text-color, #{$on-selected});
+    --md-comp-list-item-selected-trailing-icon-color: var(--md-comp-menu-#{$variant}-menu-item-selected-trailing-icon-color, #{$on-selected});
+    --md-comp-list-item-selected-trailing-supporting-text-color: var(--md-comp-menu-#{$variant}-menu-item-selected-trailing-supporting-text-color, #{$on-selected});
+
+    --md-comp-list-item-selected-disabled-container-color: var(--md-comp-menu-#{$variant}-menu-item-selected-disabled-container-color, #{$selected-container});
+    --md-comp-list-item-selected-disabled-container-opacity: var(--md-comp-menu-#{$variant}-menu-item-selected-disabled-container-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%));
+    --md-comp-list-item-selected-disabled-label-text-color: var(--md-comp-menu-#{$variant}-menu-item-selected-disabled-label-text-color, #{$on-selected});
+    --md-comp-list-item-selected-disabled-label-text-opacity: var(--md-comp-menu-#{$variant}-menu-item-selected-disabled-label-text-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%));
+    --md-comp-list-item-selected-disabled-leading-icon-color: var(--md-comp-menu-#{$variant}-menu-item-selected-disabled-leading-icon-color, #{$on-selected});
+    --md-comp-list-item-selected-disabled-leading-icon-opacity: var(--md-comp-menu-#{$variant}-menu-item-selected-disabled-leading-icon-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%));
+    --md-comp-list-item-selected-disabled-trailing-icon-color: var(--md-comp-menu-#{$variant}-menu-item-selected-disabled-trailing-icon-color, #{$on-selected});
+    --md-comp-list-item-selected-disabled-trailing-icon-opacity: var(--md-comp-menu-#{$variant}-menu-item-selected-disabled-trailing-icon-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%));
+    --md-comp-list-item-selected-disabled-trailing-supporting-text-color: var(--md-comp-menu-#{$variant}-menu-item-selected-disabled-trailing-supporting-text-color, #{$on-selected});
+    --md-comp-list-item-selected-disabled-trailing-supporting-text-opacity: var(--md-comp-menu-#{$variant}-menu-item-selected-disabled-trailing-supporting-text-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%));
+
+    --md-comp-list-item-selected-focus-label-text-color: var(--md-comp-menu-#{$variant}-menu-item-selected-focused-label-text-color, #{$on-selected});
+    --md-comp-list-item-selected-focus-leading-icon-color: var(--md-comp-menu-#{$variant}-menu-item-selected-focused-leading-icon-color, #{$on-selected});
+    --md-comp-list-item-selected-focus-state-layer-color: var(--md-comp-menu-#{$variant}-menu-item-selected-focused-state-layer-color, #{$on-selected});
+    --md-comp-list-item-selected-focus-state-layer-opacity: var(--md-comp-menu-#{$variant}-menu-item-selected-focused-state-layer-opacity, var(--md-sys-state-focus-state-layer-opacity, 10%));
+    --md-comp-list-item-selected-focus-supporting-text-color: var(--md-comp-menu-#{$variant}-menu-item-selected-focused-supporting-text-color, #{$on-selected});
+    --md-comp-list-item-selected-focus-trailing-icon-color: var(--md-comp-menu-#{$variant}-menu-item-selected-focused-trailing-icon-color, #{$on-selected});
+    --md-comp-list-item-selected-focus-trailing-supporting-text-color: var(--md-comp-menu-#{$variant}-menu-item-selected-focused-trailing-supporting-text-color, #{$on-selected});
+
+    --md-comp-list-item-selected-hover-label-text-color: var(--md-comp-menu-#{$variant}-menu-item-selected-hovered-label-text-color, #{$on-selected});
+    --md-comp-list-item-selected-hover-leading-icon-color: var(--md-comp-menu-#{$variant}-menu-item-selected-hovered-leading-icon-color, #{$on-selected});
+    --md-comp-list-item-selected-hover-state-layer-color: var(--md-comp-menu-#{$variant}-menu-item-selected-hovered-state-layer-color, #{$on-selected});
+    --md-comp-list-item-selected-hover-state-layer-opacity: var(--md-comp-menu-#{$variant}-menu-item-selected-hovered-state-layer-opacity, var(--md-sys-state-hover-state-layer-opacity, 8%));
+    --md-comp-list-item-selected-hover-supporting-text-color: var(--md-comp-menu-#{$variant}-menu-item-selected-hovered-supporting-text-color, #{$on-selected});
+    --md-comp-list-item-selected-hover-trailing-icon-color: var(--md-comp-menu-#{$variant}-menu-item-selected-hovered-trailing-icon-color, #{$on-selected});
+    --md-comp-list-item-selected-hover-trailing-supporting-text-color: var(--md-comp-menu-#{$variant}-menu-item-selected-hovered-trailing-supporting-text-color, #{$on-selected});
+
+    --md-comp-list-item-selected-pressed-label-text-color: var(--md-comp-menu-#{$variant}-menu-item-selected-pressed-label-text-color, #{$on-selected});
+    --md-comp-list-item-selected-pressed-leading-icon-color: var(--md-comp-menu-#{$variant}-menu-item-selected-pressed-leading-icon-color, #{$on-selected});
+    --md-comp-list-item-selected-pressed-state-layer-color: var(--md-comp-menu-#{$variant}-menu-item-selected-pressed-state-layer-color, #{$on-selected});
+    --md-comp-list-item-selected-pressed-state-layer-opacity: var(--md-comp-menu-#{$variant}-menu-item-selected-pressed-state-layer-opacity, var(--md-sys-state-pressed-state-layer-opacity, 10%));
+    --md-comp-list-item-selected-pressed-supporting-text-color: var(--md-comp-menu-#{$variant}-menu-item-selected-pressed-supporting-text-color, #{$on-selected});
+    --md-comp-list-item-selected-pressed-trailing-icon-color: var(--md-comp-menu-#{$variant}-menu-item-selected-pressed-trailing-icon-color, #{$on-selected});
+    --md-comp-list-item-selected-pressed-trailing-supporting-text-color: var(--md-comp-menu-#{$variant}-menu-item-selected-pressed-trailing-supporting-text-color, #{$on-selected});
+}
+
+.micl-menu[popover], select {
+    --md-comp-menu-motion-effects: #{motion.$md-sys-motion-expressive-fast-effects};
+    --md-comp-menu-motion-effects-duration: #{motion.$md-sys-motion-expressive-default-effects-duration};
+    --md-comp-menu-motion-effects-duration-reverse: #{motion.$md-sys-motion-expressive-default-effects-duration};
+    --md-comp-menu-motion-spatial: #{motion.$md-sys-motion-expressive-default-spatial};
+    --md-comp-menu-motion-spatial-duration: #{motion.$md-sys-motion-expressive-default-spatial-duration};
+    --md-comp-menu-motion-spatial-duration-reverse: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
+
+    --md-comp-list-container-shape: var(--md-comp-menu-active-container-shape, var(--md-comp-menu-container-shape, var(--md-sys-shape-corner-large, 16px)));
+
+    --md-comp-list-item-container-expressive-shape: var(--md-comp-menu-item-shape, var(--md-sys-shape-corner-small, 8px));
+    --md-comp-list-item-container-selected-expressive-shape: var(--md-comp-menu-item-selected-shape, var(--md-sys-shape-corner-large, 16px));
+
+    --md-comp-list-item-between-space: 12px;
+    --md-comp-list-item-leading-space: calc(var(--md-comp-menu-item-leading-space, 16px) - #{$menu-padding-block});
+    --md-comp-list-item-leading-icon-expressive-size: var(--md-comp-menu-item-leading-icon-size, 20px);
+    --md-comp-list-item-trailing-icon-expressive-size: var(--md-comp-menu-item-trailing-icon-size, 20px);
+    --md-comp-list-item-trailing-space: calc(var(--md-comp-menu-item-trailing-space, 16px) - #{$menu-padding-block});
+    --md-comp-list-item-top-space: var(--md-comp-menu-item-top-space, 8px);
+    --md-comp-list-item-bottom-space: var(--md-comp-menu-item-bottom-space, 8px);
+    --md-comp-list-item-one-line-container-height: var(--md-comp-menu-item-height, 44px);
+    --md-comp-list-item-two-line-container-height: var(--md-comp-menu-item-height, 44px);
+    --md-comp-list-item-three-line-container-height: var(--md-comp-menu-item-height, 44px);
+
+    --md-comp-list-item-focus-indicator-color: var(--md-comp-menu-item-focus-indicator-color, var(--md-sys-color-secondary));
+    --md-comp-list-item-focus-indicator-offset: var(--md-comp-menu-item-focus-indicator-offset, var(--md-sys-state-focus-indicator-inner-offset, -3px));
+    --md-comp-list-item-focus-indicator-thickness: var(--md-comp-menu-item-focus-indicator-thickness, var(--md-sys-state-focus-indicator-thickness, 3px));
+
+    @include menu-color-set(
+        'standard',
+        var(--md-sys-color-surface-container-low),
+        var(--md-sys-color-on-surface-variant),
+        var(--md-sys-color-on-surface),
+        var(--md-sys-color-on-surface-variant),
+        var(--md-sys-color-tertiary-container),
+        var(--md-sys-color-on-tertiary-container)
+    );
+
+    .micl-menu__section {
+        @include typography.label-small;
+
+        padding-block: var(--md-comp-menu-section-label-top-space, 8px) var(--md-comp-menu-section-label-bottom-space, 8px);
+        padding-inline: var(--md-comp-list-item-leading-space, 16px) var(--md-comp-list-item-trailing-space, 16px);
+        color: var(--md-comp-menu-standard-section-label-text-color, var(--md-sys-color-on-surface-variant));
+    }
+    &.micl-menu--vibrant .micl-menu__section {
+        color: var(--md-comp-menu-vibrant-section-label-text-color, var(--md-sys-color-on-tertiary-container));
+    }
+    .micl-list-item__text {
+        @include typography.label-large;
+
+        .micl-list-item__supporting-text {
+            @include typography.body-small;
+        }
+    }
+    .micl-list-item__trailing-text {
+        @include typography.label-large;
+    }
 }
 
 .micl-menu[popover] {
+    display: flex;
+    flex-direction: column;
     position: absolute;
     inset: unset;
     inset-block-start: anchor(end);
     inset-inline-start: anchor(start);
-    position-try: most-block-size flip-block, flip-inline;
-    min-inline-size: var(--md-sys-menu-width-min, 112px);
-    max-inline-size: var(--md-sys-menu-width-max, 280px);
+    position-try-order: most-block-size;
+    position-try-fallbacks: flip-block, flip-inline;
+    min-inline-size: var(--md-comp-menu-width-min, 112px);
+    max-inline-size: var(--md-comp-menu-width-max, 320px);
+    gap: var(--md-comp-menu-gap, 2px);
     padding: 0;
     border: none;
-    border-radius: var(--md-sys-shape-corner-extra-small);
     outline: none;
-    background-color: var(--md-sys-color-surface-container);
-    box-shadow: var(--md-sys-elevation-level2);
+    background-color: transparent;
     opacity: 0;
-    overflow: hidden;
+    overflow: visible;
     transform: scaleY(0);
-    transform-origin: left top;
+    transform-origin: center 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),
-        overlay var(--md-sys-menu-motion-duration-reverse) linear allow-discrete,
-        display var(--md-sys-menu-motion-duration-reverse) linear allow-discrete;
+        opacity var(--md-comp-menu-motion-spatial-duration-reverse) linear,
+        transform var(--md-comp-menu-motion-spatial-duration-reverse) var(--md-comp-menu-motion-spatial),
+        overlay var(--md-comp-menu-motion-spatial-duration-reverse) linear allow-discrete,
+        display var(--md-comp-menu-motion-spatial-duration-reverse) linear allow-discrete;
 
     &:popover-open {
         opacity: 1;
         transform: scaleY(1);
         transition:
-            opacity var(--md-sys-menu-motion-duration) motion.$md-sys-motion-easing-emphasized-decelerate,
-            transform var(--md-sys-menu-motion-duration) var(--md-sys-menu-motion-spatial),
-            overlay var(--md-sys-menu-motion-duration) linear allow-discrete,
-            display var(--md-sys-menu-motion-duration) linear allow-discrete;
+            opacity var(--md-comp-menu-motion-spatial-duration) motion.$md-sys-motion-easing-emphasized-decelerate,
+            transform var(--md-comp-menu-motion-spatial-duration) var(--md-comp-menu-motion-spatial),
+            overlay var(--md-comp-menu-motion-spatial-duration) linear allow-discrete,
+            display var(--md-comp-menu-motion-spatial-duration) linear allow-discrete;
 
         @starting-style {
             opacity: 0;
@@ -80,39 +237,59 @@
     &::backdrop {
         background-color: rgba(0, 0, 0, 0);
         transition:
-            background-color var(--md-sys-menu-motion-duration) linear,
-            overlay var(--md-sys-menu-motion-duration) linear allow-discrete,
-            display var(--md-sys-menu-motion-duration) linear allow-discrete;
+            background-color var(--md-comp-menu-motion-effects-duration) linear,
+            overlay var(--md-comp-menu-motion-effects-duration) linear allow-discrete,
+            display var(--md-comp-menu-motion-effects-duration) linear allow-discrete;
     }
 
-    &> .micl-list {
-        --md-sys-list-item-one-height: 48px;
-        --md-sys-list-item-one-padding: 0;
-        --md-sys-list-item-two-padding: 0;
-        --md-sys-list-item-space: 12px;
-        --md-sys-list-item-container-color: var(--md-sys-color-surface-container);
-
-        .micl-list-item-one,
-        .micl-list-item-two,
-        .micl-list-item-three {
-            &> .micl-menu[popover] {
-                transform: scaleX(0);
-
-                &:popover-open {
-                    transform: scaleX(1);
-
-                    @starting-style {
-                        transform: scaleX(0);
-                    }
+    .micl-list {
+        padding: var(--md-comp-menu-group-padding, 4px) $menu-padding-block;
+        row-gap: 2px;
+        background-color: var(--md-comp-menu-standard-container-color, var(--md-sys-color-surface-container-low));
+        box-shadow: var(--md-comp-menu-container-elevation, var(--md-sys-elevation-level2));
+        transition: border-radius var(--md-comp-menu-motion-effects-duration-reverse) linear;
+
+        &+ .micl-list {
+            border-start-start-radius: var(--md-comp-menu-group-shape, var(--md-sys-shape-corner-small, 8px));
+            border-start-end-radius: var(--md-comp-menu-group-shape, var(--md-sys-shape-corner-small, 8px));
+        }
+        &:has(+ .micl-list) {
+            border-end-start-radius: var(--md-comp-menu-group-shape, var(--md-sys-shape-corner-small, 8px));
+            border-end-end-radius: var(--md-comp-menu-group-shape, var(--md-sys-shape-corner-small, 8px));
+        }
+
+        #{$item-classes} > .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);
-                    }
+                &::backdrop {
+                    background-color: rgba(0, 0, 0, 0);
                 }
             }
         }
     }
+    &:has(.micl-menu:popover-open) > .micl-list {
+        --md-comp-list-container-shape: var(--md-comp-menu-inactive-container-shape, var(--md-sys-shape-corner-small, 8px));
+    }
+
+    &.micl-menu--vibrant > .micl-list {
+        @include menu-color-set(
+            'vibrant',
+            var(--md-sys-color-tertiary-container),
+            var(--md-sys-color-on-tertiary-container),
+            var(--md-sys-color-on-tertiary-container),
+            var(--md-sys-color-tertiary),
+            var(--md-sys-color-tertiary),
+            var(--md-sys-color-on-tertiary)
+        );
+
+        background-color: var(--md-comp-menu-vibrant-container-color, var(--md-sys-color-tertiary-container));
+    }
 }
 
 [dir=rtl] .micl-menu[popover] > .micl-list button[popovertarget] .micl-list-item__icon {

package/components/menu/index.ts

@@ -32,6 +32,14 @@ export default (() =>
                ((invokerRect.y > popoverRect.y) ? 'bottom' : 'top');
     };
 
+    const navigableItems = (list: Element): HTMLElement[] =>
+        Array.from(list.children).filter((child): child is HTMLElement =>
+            child instanceof HTMLLIElement
+            && child.getAttribute('role') !== 'separator'
+            && !child.classList.contains('micl-list-item--disabled')
+            && child.matches('.micl-list-item-one,.micl-list-item-two,.micl-list-item-three')
+        );
+
     return {
         initialize: (element: HTMLElement): void =>
         {
@@ -45,62 +53,91 @@ export default (() =>
 
             const invoker = document.querySelector(`[popovertarget="${element.id}"]`);
 
-            invoker && element.addEventListener('beforetoggle', event =>
+            invoker && element.addEventListener('beforetoggle', () =>
             {
-                if ((event as ToggleEvent).oldState === 'open') {
-                    // The popover is about to be closed.
-                    element.style.transformOrigin = getOrigin(invoker, element);
-                }
+                element.style.transformOrigin = getOrigin(invoker, element);
             });
-            invoker && element.addEventListener('toggle', event =>
+
+            element.addEventListener('keydown', (event: KeyboardEvent) =>
             {
-                if ((event as ToggleEvent).oldState === 'closed') {
-                    // The popover has just opened.
-                    element.style.transformOrigin = getOrigin(invoker, element);
+                if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;
+
+                const target = event.target;
+                if (
+                    !(target instanceof HTMLElement)
+                    || !target.matches('.micl-list-item-one,.micl-list-item-two,.micl-list-item-three')
+                ) {
+                    return;
                 }
-            });
+
+                const currentList = target.parentElement;
+                if (!currentList?.matches('ul.micl-list')) return;
+                if (currentList.parentElement !== element) return;
+
+                const lists = Array.from(element.querySelectorAll<HTMLElement>(':scope > ul.micl-list'));
+                if (lists.length < 2) return;
+
+                const listIndex = lists.indexOf(currentList as HTMLElement);
+                const items = navigableItems(currentList);
+                const itemIndex = items.indexOf(target);
+                if (itemIndex === -1) return;
+
+                let nextItem: HTMLElement | undefined;
+
+                if (event.key === 'ArrowDown' && itemIndex === items.length - 1) {
+                    const nextListIndex = (listIndex + 1) % lists.length;
+                    nextItem = navigableItems(lists[nextListIndex])[0];
+                }
+                else if (event.key === 'ArrowUp' && itemIndex === 0) {
+                    const prevListIndex = (listIndex - 1 + lists.length) % lists.length;
+                    const prev = navigableItems(lists[prevListIndex]);
+                    nextItem = prev[prev.length - 1];
+                }
+
+                if (nextItem) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    target.setAttribute('tabindex', '-1');
+                    nextItem.setAttribute('tabindex', '0');
+                    nextItem.focus();
+                }
+            }, true);
 
             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}`;
+                    const popover = submenuinvoker.popoverTargetElement as HTMLElement;
+                    const id = `--${popover.id}`;
+                    let hoverTimeout: ReturnType<typeof setTimeout>;
 
-                    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.style.setProperty('anchor-name', id);
+                    popover.style.insetBlockStart = `anchor(${id} start)`;
+                    popover.style.insetInlineStart = `anchor(${id} end)`;
 
-                    submenuinvoker.addEventListener('mouseenter', () =>
-                    {
-                        if (submenuinvoker.popoverTargetElement instanceof HTMLElement) {
-                            submenuinvoker.popoverTargetElement.showPopover();
-                        }
-                    });
-                    submenuinvoker.addEventListener('mouseleave', () =>
+                    const scheduleClose = () =>
                     {
-                        hoverTimeout = setTimeout(() => {
-                            if (
-                                submenuinvoker.popoverTargetElement instanceof HTMLElement
-                                && !submenuinvoker.popoverTargetElement.matches(':hover')
-                            ) {
-                                submenuinvoker.popoverTargetElement.hidePopover();
+                        clearTimeout(hoverTimeout);
+                        hoverTimeout = setTimeout(() =>
+                        {
+                            if (!submenuinvoker.matches(':hover') && !popover.matches(':hover')) {
+                                popover.hidePopover();
                             }
-                        }, 100);
-                    });
-                    submenuinvoker.popoverTargetElement.addEventListener('mouseenter', () =>
+                        }, 300);
+                    };
+
+                    submenuinvoker.addEventListener('mouseenter', () =>
                     {
                         clearTimeout(hoverTimeout);
+                        popover.showPopover();
                     });
-                    submenuinvoker.popoverTargetElement.addEventListener('mouseleave', () =>
+                    submenuinvoker.addEventListener('mouseleave', scheduleClose);
+                    popover.addEventListener('mouseenter', () =>
                     {
-                        if (submenuinvoker.popoverTargetElement instanceof HTMLElement) {
-                            submenuinvoker.popoverTargetElement.hidePopover();
-                        }
+                        clearTimeout(hoverTimeout);
                     });
+                    popover.addEventListener('mouseleave', scheduleClose);
                 }
             });
         }