@m3e/web 2.0.0 → 2.0.1

package/dist/menu.js

@@ -4,7 +4,7 @@
  * See LICENSE file in the project root for full license text.
  */
 import { LitElement, nothing, html, unsafeCSS, css } from 'lit';
-import { KeyboardClick, Focusable, AttachInternals, Disabled, isLinkButtonMixin, renderPseudoLink, DesignToken, HtmlFor, ActionElementBase, LinkButton, Role, HoverController, hasAssignedNodes, ScrollController, Checked, prefersReducedMotion } from '@m3e/web/core';
+import { KeyboardClick, Focusable, AttachInternals, Disabled, FocusController, isLinkButtonMixin, renderPseudoLink, DesignToken, HtmlFor, ActionElementBase, LinkButton, Role, HoverController, hasAssignedNodes, ScrollController, Checked, prefersReducedMotion } from '@m3e/web/core';
 import { addAriaReferencedId, removeAriaReferencedId, RovingTabIndexManager } from '@m3e/web/core/a11y';
 import { positionAnchor } from '@m3e/web/core/anchoring';
 import { M3eDirectionality } from '@m3e/web/core/bidi';
@@ -458,6 +458,16 @@ function e(e, r) {
 
 /** A base implementation for an item of a menu. This class must be inherited. */
 class MenuItemElementBase extends KeyboardClick(Focusable(AttachInternals(Disabled(LitElement), true))) {
+  constructor() {
+    super();
+    new FocusController(this, {
+      callback: focused => {
+        if (focused) {
+          this.menu?._activate();
+        }
+      }
+    });
+  }
   /** The menu to which this item belongs. */
   get menu() {
     return this.closest("m3e-menu");
@@ -790,7 +800,7 @@ _M3eMenuItemElement_handleMouseEnter = function _M3eMenuItemElement_handleMouseE
 __decorate([r()], M3eMenuItemElement.prototype, "_hasSubmenu", void 0);
 M3eMenuItemElement = M3eMenuItemElement_1 = __decorate([t$1("m3e-menu-item")], M3eMenuItemElement);
 
-var _M3eMenuElement_instances, _M3eMenuElement_trigger, _M3eMenuElement_anchorCleanup, _M3eMenuElement_listManager, _M3eMenuElement_keyDownHandler, _M3eMenuElement_mouseEnterHandler, _M3eMenuElement_documentClickHandler, _M3eMenuElement_scrollController, _M3eMenuElement_toggleHandler, _M3eMenuElement_handleSlotChange, _M3eMenuElement_handleKeyDown, _M3eMenuElement_handleMouseEnter, _M3eMenuElement_handleDocumentClick, _M3eMenuElement_getAbsolutePosition, _M3eMenuElement_activate, _M3eMenuElement_deactivate;
+var _M3eMenuElement_instances, _M3eMenuElement_trigger, _M3eMenuElement_anchorCleanup, _M3eMenuElement_listManager, _M3eMenuElement_keyDownHandler, _M3eMenuElement_mouseEnterHandler, _M3eMenuElement_documentClickHandler, _M3eMenuElement_scrollController, _M3eMenuElement_toggleHandler, _M3eMenuElement_handleSlotChange, _M3eMenuElement_handleKeyDown, _M3eMenuElement_handleMouseEnter, _M3eMenuElement_handleDocumentClick, _M3eMenuElement_getAbsolutePosition, _M3eMenuElement_deactivate;
 var M3eMenuElement_1;
 /**
  * Presents a list of choices on a temporary surface.
@@ -987,7 +997,7 @@ let M3eMenuElement = M3eMenuElement_1 = class M3eMenuElement extends Role(LitEle
     if (parent) {
       this.variant = parent.variant;
     } else {
-      __classPrivateFieldGet(this, _M3eMenuElement_instances, "m", _M3eMenuElement_activate).call(this);
+      this._activate();
     }
     this.showPopover();
     __classPrivateFieldSet(this, _M3eMenuElement_trigger, trigger, "f");
@@ -1053,6 +1063,14 @@ let M3eMenuElement = M3eMenuElement_1 = class M3eMenuElement extends Role(LitEle
     super.firstUpdated(_changedProperties);
     requestAnimationFrame(() => this.classList.remove("-no-animate"));
   }
+  /** @internal */
+  _activate() {
+    if (this !== M3eMenuElement_1.__activeMenu) {
+      M3eMenuElement_1.__activeMenu?.classList.remove("-active");
+      M3eMenuElement_1.__activeMenu = this;
+      M3eMenuElement_1.__activeMenu?.classList.add("-active");
+    }
+  }
 };
 _M3eMenuElement_trigger = new WeakMap();
 _M3eMenuElement_anchorCleanup = new WeakMap();
@@ -1109,7 +1127,7 @@ _M3eMenuElement_handleKeyDown = function _M3eMenuElement_handleKeyDown(e) {
   }
 };
 _M3eMenuElement_handleMouseEnter = function _M3eMenuElement_handleMouseEnter() {
-  __classPrivateFieldGet(this, _M3eMenuElement_instances, "m", _M3eMenuElement_activate).call(this);
+  this._activate();
 };
 _M3eMenuElement_handleDocumentClick = function _M3eMenuElement_handleDocumentClick(e) {
   if (!this.submenu && !e.composedPath().some(x => x instanceof M3eMenuElement_1 || x === __classPrivateFieldGet(this, _M3eMenuElement_trigger, "f"))) {
@@ -1128,13 +1146,6 @@ _M3eMenuElement_getAbsolutePosition = function _M3eMenuElement_getAbsolutePositi
     y
   };
 };
-_M3eMenuElement_activate = function _M3eMenuElement_activate() {
-  if (this !== M3eMenuElement_1.__activeMenu) {
-    M3eMenuElement_1.__activeMenu?.classList.remove("-active");
-    M3eMenuElement_1.__activeMenu = this;
-    M3eMenuElement_1.__activeMenu?.classList.add("-active");
-  }
-};
 _M3eMenuElement_deactivate = function _M3eMenuElement_deactivate() {
   if (this === M3eMenuElement_1.__activeMenu) {
     M3eMenuElement_1.__activeMenu.classList.remove("-active");
@@ -1149,7 +1160,7 @@ _M3eMenuElement_deactivate = function _M3eMenuElement_deactivate() {
   }
 })();
 /** The styles of the element. */
-M3eMenuElement.styles = css`:host { position: absolute; padding: unset; margin: unset; border: unset; overflow-y: auto; overflow-x: visible; scrollbar-width: ${DesignToken.scrollbar.thinWidth}; scrollbar-color: ${DesignToken.scrollbar.color}; scroll-padding-block: calc( var(--m3e-focus-ring-thickness, 0.1875rem) + var(--m3e-menu-container-padding-block, 0.25rem) ); min-width: var(--m3e-menu-container-min-width, 7rem); max-width: var(--m3e-menu-container-max-width, 17.5rem); max-height: var(--m3e-menu-container-max-height, 17.5rem); box-shadow: var(--m3e-menu-container-elevation, ${DesignToken.elevation.level3}); opacity: 0; display: none; } .base { display: flex; flex-direction: column; row-gap: var(--m3e-menu-gap, 0.125rem); min-width: inherit; max-width: inherit; padding-block: var(--m3e-menu-container-padding-block, 0.25rem); padding-inline: var(--m3e-menu-container-padding-inline, 0.25rem); } :host(:not(.-active)) { border-radius: var(--m3e-menu-container-shape, ${DesignToken.shape.corner.small}); } :host(.-active) { border-radius: var(--m3e-menu-active-container-shape, ${DesignToken.shape.corner.large}); } :host(:not(.-no-animate)) { transition: ${unsafeCSS(`opacity ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}, 
+M3eMenuElement.styles = css`:host { position: absolute; padding: unset; margin: unset; border: unset; overflow-y: auto; overflow-x: visible; scrollbar-width: ${DesignToken.scrollbar.thinWidth}; scrollbar-color: ${DesignToken.scrollbar.color}; scroll-padding-block: calc( var(--m3e-focus-ring-thickness, 3px) + var(--m3e-menu-container-padding-block, 0.25rem) ); min-width: var(--m3e-menu-container-min-width, 7rem); max-width: var(--m3e-menu-container-max-width, 17.5rem); max-height: var(--m3e-menu-container-max-height, 17.5rem); box-shadow: var(--m3e-menu-container-elevation, ${DesignToken.elevation.level3}); opacity: 0; display: none; } .base { display: flex; flex-direction: column; row-gap: var(--m3e-menu-gap, 0.125rem); min-width: inherit; max-width: inherit; padding-block: var(--m3e-menu-container-padding-block, 0.25rem); padding-inline: var(--m3e-menu-container-padding-inline, 0.25rem); --m3e-focus-ring-outward-offset: 0px; --m3e-focus-ring-growth-factor: 1.5; } :host(:not(.-active)) { border-radius: var(--m3e-menu-container-shape, ${DesignToken.shape.corner.small}); } :host(:not(.-active)) .base { --m3e-menu-item-first-child-shape: ${DesignToken.shape.corner.extraSmall}; --m3e-menu-item-last-child-shape: ${DesignToken.shape.corner.extraSmall}; } :host(.-active) { border-radius: var(--m3e-menu-active-container-shape, ${DesignToken.shape.corner.large}); } :host(:not(.-no-animate)) { transition: ${unsafeCSS(`opacity ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}, 
         transform ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard},
         overlay ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete,
         display ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete,