@expressivecss/expressive 0.15.0 → 0.16.0

package/dist/js/chunks/{chunk-NUHMOAOY.mjs → chunk-CSYWKEK3.mjs}

@@ -1,11 +1,41 @@
-import {
-  Utils
-} from "./chunk-M372EDXD.mjs";
 import {
   Component
-} from "./chunk-PD6HYHAE.mjs";
+} from "./chunk-CMGXGYUC.mjs";
+import {
+  Utils,
+  controllerFor,
+  restoreAttribute
+} from "./chunk-ZVLOUDIJ.mjs";
 
 // src/ts/components/menu.ts
+var parentOf = (el) => el.parentElement ?? (el.getRootNode().host || null);
+var IDENTITY = { translate: /^(none|0px( 0px){0,2})$/, rotate: /^(none|(\S+ )*0deg)$/, scale: /^(none|1( 1){0,2})$/ };
+function transformed(el) {
+  for (let node = parentOf(el); node; node = parentOf(node)) {
+    const style = getComputedStyle(node);
+    if (!new DOMMatrixReadOnly(style.transform).isIdentity) return true;
+    if (Object.entries(IDENTITY).some(([property, identity]) => !identity.test(style.getPropertyValue(property)))) return true;
+  }
+  return false;
+}
+function shadowRoots(el) {
+  const roots = [];
+  for (let root = el.getRootNode(); "host" in root; root = root.host.getRootNode()) roots.push(root);
+  return roots;
+}
+function room(el, menu, offset) {
+  const rect = el.getBoundingClientRect();
+  return {
+    left: window.innerWidth - (rect.left + menu.width),
+    right: rect.right - menu.width,
+    top: window.innerHeight - (rect.top + menu.height + offset),
+    bottom: rect.bottom - (menu.height + offset)
+  };
+}
+var STEPS = { ArrowUp: -1, ArrowDown: 1 };
+var ROWS = ':scope > li, :scope > li > ul[role="group"] > li';
+var anchorSupported = typeof CSS !== "undefined" && !!CSS.supports?.("anchor-name: --a");
+var ANCHOR_STYLES = ["position", "inset", "max-height", "position-anchor", "position-area", "position-try-fallbacks"];
 var MIN_SURFACE_WIDTH = 112;
 var MAX_SURFACE_WIDTH = 280;
 var _defaults = {
@@ -14,6 +44,7 @@ var _defaults = {
   constrainWidth: true,
   container: null,
   coverTrigger: false,
+  placement: "bottom",
   closeOnClick: true,
   hover: false,
   contextMenu: false,
@@ -28,10 +59,15 @@ var _defaults = {
 var SPACE = " ";
 var _Menu = class _Menu extends Component {
   constructor(el, options) {
-    super(el, options, _Menu);
+    super(el, { contextMenu: el.hasAttribute("data-context-menu"), ...options });
     this._pendingTimers = /* @__PURE__ */ new Set();
     this._transition = 0;
     this._menuClickTargets = /* @__PURE__ */ new WeakMap();
+    // True while Space activates a row, so the click it sends can keep a radio
+    // menu open.
+    this._spaceActivation = false;
+    /** Whether the pointer opened the menu, so opening leaves focus where it was. */
+    this._openedByHover = false;
     /**
      * Viewport point the open context menu belongs to. Null outside a
      * right-click, so a keyboard or programmatic open uses the region's corner
@@ -75,6 +111,8 @@ var _Menu = class _Menu extends Component {
       }
     };
     this._handleMouseEnter = () => {
+      if (this.isOpen) return;
+      this._openedByHover = true;
       this.open();
     };
     this._handleMouseLeave = (e) => {
@@ -90,24 +128,51 @@ var _Menu = class _Menu extends Component {
       const path = e.composedPath();
       const menuTarget = this._menuClickTargets.get(e);
       this._menuClickTargets.delete(e);
+      if (!menuTarget && !this.options.contextMenu && path.includes(this.el)) {
+        this.isTouchMoving = false;
+        return;
+      }
       const target = menuTarget ?? (path[0] || e.target);
       const inside = !!menuTarget || path.includes(this.menuEl) || this.menuEl?.contains(target);
       if (this._isSubmenuTriggerClick(target)) return;
-      if (this.options.closeOnClick && inside && !this.isTouchMoving) {
+      if (inside && this._closesOnClick(target)) {
         this.close();
       } else if (!inside) {
         this._schedule(() => this.close(), 0);
       }
       this.isTouchMoving = false;
     };
+    // A hover-opened menu does not hold focus, so its own keydown handler never
+    // sees Escape. Close it from wherever focus is, without moving focus, and
+    // take the key only when it was pressed on the trigger.
+    this._handleDocumentKeydown = (e) => {
+      if (e.key !== "Escape" || !this._openedByHover) return;
+      if (Utils.focusIsIn(this.el)) e.preventDefault();
+      this.close();
+    };
     this._handleTriggerKeydown = (e) => {
       if (this.options.contextMenu) return;
-      const opensMenu = e.key === SPACE || e.key === Utils.keys.ENTER || e.key === Utils.keys.ARROW_DOWN || e.key === Utils.keys.ARROW_UP;
-      if (opensMenu && !this.isOpen) {
+      if (e.key === "Escape" && this.isOpen && Utils.plainKey(e) && !Utils.isComposing(e)) {
+        e.preventDefault();
+        this.close();
+        return;
+      }
+      const opensMenu = [SPACE, "Enter", "ArrowDown", "ArrowUp"].includes(e.key);
+      if (!opensMenu) return;
+      if (!this.isOpen) {
         e.preventDefault();
         this.open();
+      } else if (this._openedByHover) {
+        e.preventDefault();
+        this._openedByHover = false;
+        this._focusInitialItem();
       }
     };
+    // A scroll ends without a click, which is the only other place the flag is
+    // cleared, so a new gesture has to clear it or the next tap is ignored.
+    this._handleMenuPointerdown = () => {
+      this.isTouchMoving = false;
+    };
     this._handleDocumentTouchmove = (e) => {
       const target = e.target;
       if (e.composedPath().includes(this.menuEl) || this.menuEl?.contains(target)) {
@@ -129,9 +194,7 @@ var _Menu = class _Menu extends Component {
         this._toggleSubmenu(li);
         return;
       }
-      if (li && typeof this.options.onItemClick === "function") {
-        this.options.onItemClick.call(this, li);
-      }
+      if (li) this._activateItem(li);
     };
     this._handleSubmenuAlign = (e) => {
       const target = e.target;
@@ -142,17 +205,16 @@ var _Menu = class _Menu extends Component {
       }
     };
     this._handleMenuKeydown = (e) => {
-      if (!this.isOpen || e.ctrlKey || e.metaKey || e.altKey || e.isComposing) return;
+      if (!this.isOpen || !Utils.plainKey(e) || Utils.isComposing(e)) return;
       const list = this._containingSubmenu(e) ?? this.menuEl;
       const rtl = getComputedStyle(list).direction === "rtl";
-      const openKey = rtl ? Utils.keys.ARROW_LEFT : Utils.keys.ARROW_RIGHT;
-      const backKey = rtl ? Utils.keys.ARROW_RIGHT : Utils.keys.ARROW_LEFT;
-      if ([openKey, backKey, Utils.keys.ARROW_UP, Utils.keys.ARROW_DOWN, Utils.keys.ESC, Utils.keys.TAB].includes(e.key)) {
+      const openKey = rtl ? "ArrowLeft" : "ArrowRight";
+      const backKey = rtl ? "ArrowRight" : "ArrowLeft";
+      if ([openKey, backKey, "ArrowUp", "ArrowDown", "Escape", "Tab"].includes(e.key)) {
         clearTimeout(this.filterTimeout);
         this._resetFilterQuery();
       }
-      const arrowUpOrDown = e.key === Utils.keys.ARROW_DOWN || e.key === Utils.keys.ARROW_UP;
-      if (e.key === Utils.keys.TAB) {
+      if (e.key === "Tab") {
         e.preventDefault();
         this.close();
       } else if (e.key === openKey) {
@@ -175,26 +237,9 @@ var _Menu = class _Menu extends Component {
           this._closeSubmenu(parentLi);
           this._focusRow(parentLi);
         }
-      } else if (arrowUpOrDown) {
+      } else if (this._moveFocus(list, e)) {
         e.preventDefault();
-        const direction = e.key === Utils.keys.ARROW_DOWN ? 1 : -1;
-        const row = this._focusedRow(e);
-        let newFocusedIndex = row ? Array.from(list.children).indexOf(row) : this.focusedIndex;
-        let hasFoundNewIndex = false;
-        do {
-          newFocusedIndex = newFocusedIndex + direction;
-          if (!!list.children[newFocusedIndex] && list.children[newFocusedIndex].tabIndex !== -1) {
-            hasFoundNewIndex = true;
-            break;
-          }
-        } while (newFocusedIndex < list.children.length && newFocusedIndex >= 0);
-        if (hasFoundNewIndex) {
-          if (this.focusedIndex >= 0) list.children[this.focusedIndex]?.classList.remove("active");
-          const item = list.children[newFocusedIndex];
-          item.classList.add("active");
-          this._focusRow(item);
-        }
-      } else if (e.key === Utils.keys.ENTER || e.key === SPACE) {
+      } else if (e.key === "Enter" || e.key === SPACE) {
         const li = this._focusedRow(e);
         e.preventDefault();
         if (li?.matches('.disabled, [aria-disabled="true"]')) return;
@@ -204,12 +249,15 @@ var _Menu = class _Menu extends Component {
         }
         const focusedElement = li ?? this.menuEl.children[this.focusedIndex];
         const activatableElement = focusedElement?.querySelector(":scope > a, :scope > button");
+        this._spaceActivation = e.key === SPACE;
         if (!!activatableElement) {
           activatableElement.click();
         } else if (focusedElement instanceof HTMLElement) {
           focusedElement.click();
         }
-      } else if (e.key === Utils.keys.ESC) {
+        this._spaceActivation = false;
+        this._closeAfterEnter(e, focusedElement);
+      } else if (e.key === "Escape") {
         e.preventDefault();
         const openSub = this._containingSubmenu(e)?.parentElement ?? Array.from(this.menuEl.querySelectorAll("li.open")).reverse()[0];
         if (openSub) {
@@ -223,8 +271,8 @@ var _Menu = class _Menu extends Component {
       if (e.key.length === 1 && e.key !== SPACE) {
         this.filterQuery.push(keyText);
         const string = this.filterQuery.join("");
-        const newOptionEl = Array.from(list.querySelectorAll(":scope > li")).find(
-          (el) => el.tabIndex !== -1 && !el.matches('.disabled, [aria-disabled="true"]') && Array.from(el.childNodes).filter((node) => !(node instanceof Element && node.matches("menu"))).map((node) => node.textContent).join("").trim().toLowerCase().startsWith(string)
+        const newOptionEl = this._rows(list).find(
+          (el) => !el.matches('.disabled, [aria-disabled="true"]') && Array.from(el.childNodes).filter((node) => !(node instanceof Element && node.matches("menu"))).map((node) => node.textContent).join("").trim().toLowerCase().startsWith(string)
         );
         if (newOptionEl) {
           this._focusRow(newOptionEl);
@@ -241,19 +289,39 @@ var _Menu = class _Menu extends Component {
     this._resetFilterQuery = () => {
       this.filterQuery = [];
     };
+    // Below the trigger, or above it for placement 'top', starting at its left
+    // edge for alignment 'left' or its right edge for 'right', with the flips
+    // position-try-fallbacks offers.
+    // The height is capped to the room on the chosen side, so a long menu
+    // scrolls there, as in the measured path.
+    this._reanchorFrame = 0;
+    /**
+     * At most once a frame while the menu is open and something outside it
+     * scrolls, an anchored menu chooses its side again and a measured one
+     * follows its trigger, keeping its own scroll position. A context menu
+     * stays where it opened, and the menu's own scrolling moves nothing.
+     */
+    this._reanchor = (event) => {
+      if (this._reanchorFrame || this.options.contextMenu || this.menuEl.contains(event.target)) return;
+      this._reanchorFrame = requestAnimationFrame(() => {
+        this._reanchorFrame = 0;
+        if (!this.isOpen) return;
+        if (this.menuEl.style.getPropertyValue("position-anchor")) return this._placeAnchored();
+        const { scrollTop } = this.menuEl;
+        this.recalculateDimensions();
+        this.menuEl.scrollTop = scrollTop;
+      });
+    };
     /**
      * Open menu.
      */
     this.open = () => {
-      if (this.isOpen || this.el["Expressive_Menu"] !== this) return;
+      if (!this._canOpen) return;
       const transition = this._clearPendingTimers();
       this.isOpen = true;
-      if (typeof this.options.onOpenStart === "function") {
-        this.options.onOpenStart.call(this, this.el);
-      }
-      if (transition !== this._transition) return;
+      if (!this._notify("open", this.options.onOpenStart, { current: () => transition === this._transition })) return;
       this._resetMenuStyles();
-      this.menuEl.style.display = "block";
+      if (this.menuEl.isConnected) this.menuEl.showPopover();
       this._restoreInert();
       this._placeMenu();
       this._schedule(() => this._setupTemporaryEventHandlers(), 0);
@@ -269,17 +337,16 @@ var _Menu = class _Menu extends Component {
       const root = this.menuEl.getRootNode();
       const focused = root.activeElement;
       this.isOpen = false;
+      this._openedByHover = false;
       this.menuEl.setAttribute("inert", "");
       clearTimeout(this.filterTimeout);
       this._resetFilterQuery();
       this.focusedIndex = -1;
+      this._clearActive();
       this._closeSubmenus();
-      if (typeof this.options.onCloseStart === "function") {
-        this.options.onCloseStart.call(this, this.el);
-      }
-      if (transition !== this._transition) return;
+      if (!this._notify("close", this.options.onCloseStart, { current: () => transition === this._transition })) return;
       this._animateOut();
-      this._removeTemporaryEventHandlers();
+      this._openEvents?.abort();
       this._setExpanded(false);
       if (this.options.autoFocus && this.menuEl.contains(focused) && (root.activeElement === focused || this.el.ownerDocument.activeElement === this.el.ownerDocument.body)) {
         const back = this._contextReturn;
@@ -297,16 +364,9 @@ var _Menu = class _Menu extends Component {
         this._placeMenu();
       }
     };
-    this.el["Expressive_Menu"] = this;
     _Menu._menus.push(this);
     this.id = Utils.getIdFromTrigger(el);
     this.menuEl = Utils.getElementById(el, this.id);
-    this._originalInert = this.menuEl?.getAttribute("inert") ?? null;
-    this.options = {
-      ..._Menu.defaults,
-      contextMenu: el.hasAttribute("data-context-menu"),
-      ...options
-    };
     this.isOpen = false;
     this.isScrollable = false;
     this.isTouchMoving = false;
@@ -318,6 +378,11 @@ var _Menu = class _Menu extends Component {
       if (this.id && !this.el.hasAttribute("aria-controls"))
         this.el.setAttribute("aria-controls", this.id);
     }
+    if (!this.menuEl) {
+      console.warn(`Menu skipped: no element matches target "${this.id}".`, el);
+      return;
+    }
+    this._originalInert = this.menuEl.getAttribute("inert");
     this._moveMenuToElement();
     this._setupAccessibility();
     this._makeMenuFocusable();
@@ -327,77 +392,96 @@ var _Menu = class _Menu extends Component {
   static get defaults() {
     return _defaults;
   }
-  /**
-   * Initializes instances of Menu.
-   * @param els HTML elements.
-   * @param options Component options.
-   */
-  static init(els, options = {}) {
-    return super.init(els, options, _Menu);
-  }
-  static getInstance(el) {
-    return el["Expressive_Menu"];
-  }
   destroy() {
     this._clearPendingTimers();
     this.isOpen = false;
     this._setExpanded(false);
+    if (this.menuEl) Utils.setAnchorName(this.el, `--menu-${this.menuEl.id}`, false);
     clearTimeout(this.filterTimeout);
     this._resetMenuStyles();
     this._restoreInert();
-    this._removeEventHandlers();
-    this._removeTemporaryEventHandlers();
+    this._events.abort();
+    this._openEvents?.abort();
     const index = _Menu._menus.indexOf(this);
     if (index >= 0) _Menu._menus.splice(index, 1);
-    this.el["Expressive_Menu"] = void 0;
+    super.destroy();
   }
   _setupEventHandlers() {
-    this.el.addEventListener("keydown", this._handleTriggerKeydown);
-    this.menuEl?.addEventListener("click", this._handleMenuClick);
+    const { signal } = this._events;
+    this.el.addEventListener("keydown", this._handleTriggerKeydown, { signal });
+    this.menuEl?.addEventListener("click", this._handleMenuClick, { signal });
     if (this.menuEl?.querySelector(":scope > li > menu")) {
-      this.menuEl.addEventListener("mouseover", this._handleSubmenuAlign);
+      this.menuEl.addEventListener("mouseover", this._handleSubmenuAlign, { signal });
     }
     if (this.options.contextMenu) {
-      this.el.addEventListener("contextmenu", this._handleContextMenu);
+      this.el.addEventListener("contextmenu", this._handleContextMenu, { signal });
     } else if (this.options.hover) {
-      this.el.addEventListener("mouseenter", this._handleMouseEnter);
-      this.el.addEventListener("mouseleave", this._handleMouseLeave);
-      this.menuEl.addEventListener("mouseleave", this._handleMouseLeave);
+      this.el.addEventListener("mouseenter", this._handleMouseEnter, { signal });
+      this.el.addEventListener("mouseleave", this._handleMouseLeave, { signal });
+      this.menuEl.addEventListener("mouseleave", this._handleMouseLeave, { signal });
     } else {
-      this.el.addEventListener("click", this._handleClick);
-    }
-  }
-  _removeEventHandlers() {
-    this.el.removeEventListener("keydown", this._handleTriggerKeydown);
-    this.menuEl?.removeEventListener("click", this._handleMenuClick);
-    this.menuEl?.removeEventListener("mouseover", this._handleSubmenuAlign);
-    if (this.options.contextMenu) {
-      this.el.removeEventListener("contextmenu", this._handleContextMenu);
-    } else if (this.options.hover) {
-      this.el.removeEventListener("mouseenter", this._handleMouseEnter);
-      this.el.removeEventListener("mouseleave", this._handleMouseLeave);
-      this.menuEl?.removeEventListener("mouseleave", this._handleMouseLeave);
-    } else {
-      this.el.removeEventListener("click", this._handleClick);
+      this.el.addEventListener("click", this._handleClick, { signal });
     }
   }
   _setupTemporaryEventHandlers() {
-    document.body.addEventListener("click", this._handleDocumentClick);
-    this.menuEl?.addEventListener("touchmove", this._handleDocumentTouchmove, { passive: true });
-    document.body.addEventListener("touchmove", this._handleDocumentTouchmove, {
-      passive: true
+    this._openEvents?.abort();
+    this._openEvents = controllerFor(this.el);
+    const { signal } = this._openEvents;
+    const passive = { passive: true, signal };
+    document.addEventListener("click", this._handleDocumentClick, { signal });
+    this.menuEl?.addEventListener("pointerdown", this._handleMenuPointerdown, passive);
+    this.menuEl?.addEventListener("touchmove", this._handleDocumentTouchmove, passive);
+    document.addEventListener("touchmove", this._handleDocumentTouchmove, passive);
+    this.menuEl?.addEventListener("keydown", this._handleMenuKeydown, { signal });
+    document.addEventListener("keydown", this._handleDocumentKeydown, { signal });
+    window.addEventListener("resize", this._handleWindowResize, { signal });
+    for (const target of [window, ...shadowRoots(this.el)]) {
+      target.addEventListener("scroll", this._reanchor, { capture: true, passive: true, signal });
+    }
+    if (this.options.contextMenu) document.addEventListener("contextmenu", this._handleDocumentContextMenu, { signal });
+  }
+  _activateItem(li) {
+    const checked = this._toggleChecked(li);
+    if (!this._notify("select", this.options.onItemClick, { args: [li], detail: { item: li } })) return;
+    if (checked !== null) this._notify("change", null, { detail: { item: li, checked } });
+  }
+  // A menuitemcheckbox flips aria-checked, and a menuitemradio checks itself
+  // and unchecks its group, before anyone hears of the click. Any other row,
+  // or a radio that was already checked, returns null.
+  _toggleChecked(li) {
+    const role = li.getAttribute("role");
+    if (role === "menuitemradio") return this._checkRadio(li);
+    if (role !== "menuitemcheckbox") return null;
+    const checked = li.getAttribute("aria-checked") !== "true";
+    li.setAttribute("aria-checked", String(checked));
+    return checked;
+  }
+  // A radio's group is its parent list: a <ul role="group">, or for radio
+  // rows outside any group, their menu.
+  _checkRadio(li) {
+    if (li.getAttribute("aria-checked") === "true") return null;
+    li.parentElement.querySelectorAll(':scope > li[role="menuitemradio"]').forEach((radio) => {
+      radio.setAttribute("aria-checked", String(radio === li));
     });
-    this.menuEl?.addEventListener("keydown", this._handleMenuKeydown);
-    window.addEventListener("resize", this._handleWindowResize);
-    if (this.options.contextMenu) document.addEventListener("contextmenu", this._handleDocumentContextMenu);
-  }
-  _removeTemporaryEventHandlers() {
-    document.body.removeEventListener("click", this._handleDocumentClick);
-    this.menuEl?.removeEventListener("touchmove", this._handleDocumentTouchmove);
-    document.body.removeEventListener("touchmove", this._handleDocumentTouchmove);
-    this.menuEl?.removeEventListener("keydown", this._handleMenuKeydown);
-    window.removeEventListener("resize", this._handleWindowResize);
-    document.removeEventListener("contextmenu", this._handleDocumentContextMenu);
+    return true;
+  }
+  _isCheckboxRow(el) {
+    return el?.closest("li")?.getAttribute("role") === "menuitemcheckbox";
+  }
+  // isTouchMoving: a scroll on mobile is not a choice.
+  _closesOnClick(target) {
+    return this.options.closeOnClick && !this.isTouchMoving && !this._keepsOpen(target);
+  }
+  // Click and Space keep a checkbox menu open so several items can be
+  // toggled. Space keeps a radio menu open too; a click on a radio closes it.
+  _keepsOpen(target) {
+    const role = target.closest("li")?.getAttribute("role");
+    if (role === "menuitemcheckbox") return true;
+    return this._spaceActivation && role === "menuitemradio";
+  }
+  // Enter toggles a checkbox item and then closes, as it does on any item.
+  _closeAfterEnter(e, row) {
+    if (e.key === "Enter" && this.options.closeOnClick && this._isCheckboxRow(row)) this.close();
   }
   _setupAccessibility() {
     if (!this.menuEl) return;
@@ -406,7 +490,7 @@ var _Menu = class _Menu extends Component {
     menus.forEach((menu) => {
       if (!menu.hasAttribute("role")) menu.setAttribute("role", "menu");
       if (menu.getAttribute("role") !== "menu") return;
-      menu.querySelectorAll(":scope > li").forEach((li) => {
+      menu.querySelectorAll(ROWS).forEach((li) => {
         if (li.classList.contains("divider")) {
           if (!li.hasAttribute("role")) li.setAttribute("role", "separator");
           return;
@@ -484,17 +568,22 @@ var _Menu = class _Menu extends Component {
     return null;
   }
   _restoreInert() {
-    if (this._originalInert === null) this.menuEl?.removeAttribute("inert");
-    else this.menuEl?.setAttribute("inert", this._originalInert);
+    if (this.menuEl) restoreAttribute(this.menuEl, "inert", this._originalInert);
+  }
+  // focusedIndex is reset on close and only covers one list, so clearing by
+  // index left an old highlight behind after reopening or a typeahead jump.
+  _clearActive() {
+    this.menuEl?.querySelectorAll("li.active").forEach((li) => li.classList.remove("active"));
   }
   _focusRow(item) {
+    this._clearActive();
     this.focusedIndex = Array.from(item.parentElement.children).indexOf(item);
     item.focus({ preventScroll: true });
     item.scrollIntoView({ block: "nearest", inline: "nearest" });
   }
   _resetMenuStyles() {
     if (!this.menuEl) return;
-    this.menuEl.style.display = "";
+    this.menuEl.hidePopover();
     this._resetMenuPositioningStyles();
     this.menuEl.style.transform = "";
     this.menuEl.style.opacity = "";
@@ -505,37 +594,53 @@ var _Menu = class _Menu extends Component {
     this.menuEl.style.left = "";
     this.menuEl.style.top = "";
     this.menuEl.style.transformOrigin = "";
+    for (const property of ANCHOR_STYLES) this.menuEl.style.removeProperty(property);
+    this._stopReanchoring();
   }
-  _moveMenuToElement(containerEl = null) {
-    if (this.options.container) {
-      this.options.container.append(this.menuEl);
-      return;
-    }
-    if (containerEl) {
-      if (!containerEl.contains(this.menuEl)) containerEl.append(this.menuEl);
-      return;
-    }
-    this.el.after(this.menuEl);
+  _moveMenuToElement() {
+    if (this.options.container) this.options.container.append(this.menuEl);
+    else this.el.after(this.menuEl);
   }
   _makeMenuFocusable() {
     if (!this.menuEl) return;
-    this.menuEl.popover = "";
+    this.menuEl.popover = "manual";
     this.menuEl.tabIndex = -1;
-    this.menuEl.querySelectorAll(":scope li, :scope > hr").forEach((el) => {
-      if (el instanceof HTMLHRElement || el.classList.contains("divider") || el.classList.contains("gap") || el.classList.contains("label") || el.classList.contains("optgroup")) {
+    this.menuEl.querySelectorAll(":scope li").forEach((el) => {
+      if (el.matches('.divider, .gap, .label, .optgroup, [role="none"]')) {
         el.setAttribute("tabindex", "-1");
         return;
       }
       if (!el.getAttribute("tabindex")) el.setAttribute("tabindex", "0");
     });
   }
+  /**
+   * Moves focus for Up, Down, Home or End among the list's focusable rows,
+   * without wrapping, and says whether the key was one of those.
+   */
+  _moveFocus(list, e) {
+    const rows = this._rows(list);
+    const from = this._focusedRow(e) ?? list.children[this.focusedIndex];
+    const index = Utils._keyIndex(e.key, rows.indexOf(from), rows.length, STEPS);
+    if (Number.isNaN(index)) return false;
+    const row = rows[index];
+    if (row) {
+      this._focusRow(row);
+      row.classList.add("active");
+    }
+    return true;
+  }
+  /** The list's rows that take focus, in document order. */
+  _rows(list) {
+    return Array.from(list.querySelectorAll(ROWS)).filter(
+      (row) => row instanceof HTMLElement && row.tabIndex !== -1
+    );
+  }
   _focusInitialItem() {
     if (!this.menuEl || !this.options.autoFocus) return;
-    const first = Array.from(this.menuEl.children).find(
-      (child) => child instanceof HTMLElement && child.tabIndex !== -1
-    );
+    const first = this._rows(this.menuEl)[0];
     if (!first) return;
-    this.focusedIndex = Array.from(this.menuEl.children).indexOf(first);
+    this._clearActive();
+    this.focusedIndex = Array.from(first.parentElement.children).indexOf(first);
     first.focus({ preventScroll: true });
   }
   _focusFocusedItem() {
@@ -550,31 +655,27 @@ var _Menu = class _Menu extends Component {
       });
     }
   }
-  _getMenuPosition(closestOverflowParent) {
+  /**
+   * Whether a measured menu opens upward: when there is no room below, or
+   * when placement 'top' asks for it and there is room above.
+   */
+  _opensUp(space) {
+    return space.top < 0 || this.options.placement === "top" && space.bottom >= 0;
+  }
+  _getMenuPosition() {
     const triggerBRect = this.el.getBoundingClientRect();
     const menuBRect = this.menuEl.getBoundingClientRect();
     let idealHeight = menuBRect.height;
     let idealWidth = menuBRect.width;
     let idealXPos = triggerBRect.left - menuBRect.left;
     let idealYPos = triggerBRect.top - menuBRect.top;
-    const menuBounds = {
-      left: idealXPos,
-      top: idealYPos,
-      height: idealHeight,
-      width: idealWidth
-    };
-    const alignments = Utils.checkPossibleAlignments(
-      this.el,
-      closestOverflowParent,
-      menuBounds,
-      this.options.coverTrigger ? 0 : triggerBRect.height
-    );
+    const space = room(this.el, menuBRect, this.options.coverTrigger ? 0 : triggerBRect.height);
     let verticalAlignment = "top";
     let horizontalAlignment = this.options.alignment;
     idealYPos += this.options.coverTrigger ? 0 : triggerBRect.height;
     this.isScrollable = false;
-    if (!alignments.top) {
-      if (alignments.bottom) {
+    if (this._opensUp(space)) {
+      if (space.bottom >= 0) {
         verticalAlignment = "bottom";
         if (!this.options.coverTrigger) {
           idealYPos -= triggerBRect.height;
@@ -582,27 +683,27 @@ var _Menu = class _Menu extends Component {
       } else {
         this.isScrollable = true;
         idealHeight -= 20;
-        if (alignments.spaceOnTop > alignments.spaceOnBottom) {
+        if (space.bottom > space.top) {
           verticalAlignment = "bottom";
-          idealHeight += alignments.spaceOnTop;
-          idealYPos -= this.options.coverTrigger ? alignments.spaceOnTop - 20 : alignments.spaceOnTop - 20 + triggerBRect.height;
+          idealHeight += space.bottom;
+          idealYPos -= this.options.coverTrigger ? space.bottom - 20 : space.bottom - 20 + triggerBRect.height;
         } else {
-          idealHeight += alignments.spaceOnBottom;
+          idealHeight += space.top;
         }
       }
     }
-    if (!alignments[horizontalAlignment]) {
+    if (space[horizontalAlignment] < 0) {
       const oppositeAlignment = horizontalAlignment === "left" ? "right" : "left";
-      if (alignments[oppositeAlignment]) {
+      if (space[oppositeAlignment] >= 0) {
         horizontalAlignment = oppositeAlignment;
       } else {
-        if (alignments.spaceOnLeft > alignments.spaceOnRight) {
+        if (space.right > space.left) {
           horizontalAlignment = "right";
-          idealWidth += alignments.spaceOnLeft;
-          idealXPos -= alignments.spaceOnLeft;
+          idealWidth += space.right;
+          idealXPos -= space.right;
         } else {
           horizontalAlignment = "left";
-          idealWidth += alignments.spaceOnRight;
+          idealWidth += space.left;
         }
       }
     }
@@ -635,6 +736,7 @@ var _Menu = class _Menu extends Component {
   }
   _animateIn() {
     const transition = this._transition;
+    const focusOnOpen = !this._openedByHover;
     const duration = this.options.inDuration;
     this.menuEl.style.transition = "none";
     this.menuEl.style.opacity = "0";
@@ -645,54 +747,71 @@ var _Menu = class _Menu extends Component {
       this.menuEl.style.transform = "scale(1)";
     }, 1);
     this._schedule(() => {
-      this._focusInitialItem();
+      if (focusOnOpen) this._focusInitialItem();
       if (transition !== this._transition) return;
-      if (typeof this.options.onOpenEnd === "function") this.options.onOpenEnd.call(this, this.el);
+      this._notify("opened", this.options.onOpenEnd, { current: () => transition === this._transition });
     }, duration);
   }
   _animateOut() {
+    const transition = this._transition;
     const duration = this.options.outDuration;
     this.menuEl.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`;
     this.menuEl.style.opacity = "0";
     this.menuEl.style.transform = "scale(0.85)";
     this._schedule(() => {
       this._resetMenuStyles();
-      if (typeof this.options.onCloseEnd === "function")
-        this.options.onCloseEnd.call(this, this.el);
+      this._notify("closed", this.options.onCloseEnd, { current: () => transition === this._transition });
     }, duration);
   }
-  _getClosestAncestor(el, condition) {
-    let ancestor = el.parentNode;
-    while (ancestor !== null && ancestor !== void 0 && ancestor !== document) {
-      if (ancestor.nodeType === Node.ELEMENT_NODE && condition(ancestor)) {
-        return ancestor;
-      }
-      ancestor = ancestor.parentNode ?? ancestor.host;
-    }
-    return null;
-  }
   _placeMenu() {
-    let closestOverflowParent = this._getClosestAncestor(
-      this.menuEl,
-      (ancestor) => {
-        return !["HTML", "BODY"].includes(ancestor.tagName) && getComputedStyle(ancestor).overflow !== "visible";
-      }
-    );
-    if (!closestOverflowParent) {
-      const parent = !!this.menuEl.offsetParent ? this.menuEl.offsetParent : this.menuEl.parentNode;
-      closestOverflowParent = parent.host ?? parent;
-    }
-    if (getComputedStyle(closestOverflowParent).position === "static")
-      closestOverflowParent.style.position = "relative";
     const natural = this.menuEl.getBoundingClientRect().width;
     const triggerWidth = this.el.getBoundingClientRect().width;
     const idealWidth = this.options.constrainWidth && !this.options.contextMenu && triggerWidth >= MIN_SURFACE_WIDTH ? triggerWidth : Math.min(MAX_SURFACE_WIDTH, Math.max(MIN_SURFACE_WIDTH, natural));
     this.menuEl.style.width = idealWidth + "px";
     if (this.options.contextMenu) {
-      this._placeMenuAtPoint(this._contextPoint ?? this._regionCorner(), closestOverflowParent);
+      this._placeMenuAtPoint(this._contextPoint ?? this._regionCorner());
       return;
     }
-    const positionInfo = this._getMenuPosition(closestOverflowParent);
+    if (anchorSupported && !this.options.coverTrigger && !transformed(this.el)) this._anchorMenu();
+    else this._placeByCoordinates();
+  }
+  /**
+   * The side an anchored menu opens on: the one asked for when the whole
+   * menu fits there, or else the roomier one. The anchored height is capped
+   * to its side, so a menu that would only shrink never sets off the
+   * flip-block fallback, and the choice is made here.
+   */
+  _side() {
+    const rect = this.el.getBoundingClientRect();
+    const room2 = { top: rect.top, bottom: window.innerHeight - rect.bottom };
+    const [asked, other] = this.options.placement === "top" ? ["top", "bottom"] : ["bottom", "top"];
+    return room2[asked] >= this.menuEl.scrollHeight || room2[asked] >= room2[other] ? asked : other;
+  }
+  _anchorMenu() {
+    const name = `--menu-${this.menuEl.id}`;
+    Utils.setAnchorName(this.el, name, true);
+    const style = this.menuEl.style;
+    style.position = "fixed";
+    style.inset = "auto";
+    style.maxHeight = "100%";
+    style.setProperty("position-anchor", name);
+    this._placeAnchored();
+  }
+  _stopReanchoring() {
+    cancelAnimationFrame(this._reanchorFrame);
+    this._reanchorFrame = 0;
+  }
+  /** The anchored menu's side, the edge it starts from and its growth origin. */
+  _placeAnchored() {
+    const style = this.menuEl.style;
+    const [side, edge] = [this._side(), this.options.alignment === "right" ? "left" : "right"];
+    style.setProperty("position-area", `${side} span-${edge}`);
+    style.setProperty("position-try-fallbacks", "flip-block, flip-inline, flip-block flip-inline");
+    style.transformOrigin = `${edge === "left" ? "100%" : "0"} ${side === "top" ? "100%" : "0"}`;
+    this.isScrollable = this.menuEl.scrollHeight > this.menuEl.clientHeight;
+  }
+  _placeByCoordinates() {
+    const positionInfo = this._getMenuPosition();
     this.menuEl.style.left = positionInfo.x + "px";
     this.menuEl.style.top = positionInfo.y + "px";
     this.menuEl.style.height = positionInfo.height + "px";
@@ -708,30 +827,20 @@ var _Menu = class _Menu extends Component {
   /**
    * Places a context menu with its start corner on the point, flipping to
    * the other side of the point where it would not fit. The bounds are the
-   * viewport, narrowed to a scrolling or clipping ancestor the menu sits in;
-   * a menu taller than them gets their height and scrolls.
+   * viewport; a menu taller than it gets its height and scrolls.
    *
    * The menu rests at left/top 0 of its containing block, so its rect is the
    * offset to subtract - the same trick _getMenuPosition uses. It is measured
    * without the entry animation's scale, which a second right-click can catch.
    */
-  _placeMenuAtPoint({ x, y }, container) {
+  _placeMenuAtPoint({ x, y }) {
     const { transform, transition } = this.menuEl.style;
     this.menuEl.style.transition = "none";
     this.menuEl.style.transform = "none";
     const menu = this.menuEl.getBoundingClientRect();
     this.menuEl.style.transform = transform;
     this.menuEl.style.transition = transition;
-    let bounds = { left: 0, top: 0, right: window.innerWidth, bottom: window.innerHeight };
-    if (container && getComputedStyle(container).overflow !== "visible") {
-      const clip = container.getBoundingClientRect();
-      bounds = {
-        left: Math.max(bounds.left, clip.left),
-        top: Math.max(bounds.top, clip.top),
-        right: Math.min(bounds.right, clip.right),
-        bottom: Math.min(bounds.bottom, clip.bottom)
-      };
-    }
+    const bounds = { left: 0, top: 0, right: window.innerWidth, bottom: window.innerHeight };
     const width = menu.width;
     const height = Math.min(menu.height, bounds.bottom - bounds.top);
     this.isScrollable = height < menu.height;
@@ -751,11 +860,16 @@ var _Menu = class _Menu extends Component {
   _setExpanded(expanded) {
     if (!this.options.contextMenu) this.el.ariaExpanded = String(expanded);
   }
+  // A trigger whose target never resolved has no menu to open.
+  get _canOpen() {
+    return !this.isOpen && !!this.menuEl && this.el["Expressive_Menu"] === this;
+  }
 };
 _Menu._menus = [];
+_Menu.key = "Expressive_Menu";
 var Menu = _Menu;
 
 export {
   Menu
 };
-//# sourceMappingURL=chunk-NUHMOAOY.mjs.map
+//# sourceMappingURL=chunk-CSYWKEK3.mjs.map