@antadesign/anta 0.3.33 → 0.3.35

package/dist/elements/a-menu.js

@@ -3,10 +3,11 @@ import {
   SYNC_POPUP_ARIA,
   anchorRect,
   isPopupAriaReceiver,
+  isComposingKey,
   isModifiedNavigationKey,
   setMenuPresence
 } from "../anta_helpers";
-import { AMenuItemElement, MENU_ITEM_SELECTOR, isMenuItemEl, ensureMenuItemKeyListener } from "./a-menu-item";
+import { MENU_ITEM_SELECTOR, isMenuItemEl, isCustomMenuItem, ensureMenuItemKeyListener } from "./a-menu-item";
 import { activeFocus, cycleFocus, focusParent, tabStops } from "./focus";
 import { emitCopyRequest } from "./copy-behavior";
 import "./a-menu.css";
@@ -18,131 +19,201 @@ const TYPEAHEAD_RESET = 500;
 const SELF_ACTIVATING = 'a-button, a-input[button], button, a[href], input[type="button"], input[type="submit"], input[type="reset"], [role="button"]';
 const EDITABLE_FIELD = "input:not([readonly]), textarea:not([readonly]), a-input:not([readonly]), a-input-time:not([readonly])";
 const DECLARATIVE_TRIGGER = "[data-dialog-open], [data-dialog-close], [data-toast-dismiss], [data-banner-dismiss]";
-const openStack = [];
-let docBound = false;
-let boundDoc = null;
-let boundView = null;
-let mouseX = null;
-let mouseY = 0;
-function trackMouse(e) {
-  mouseX = e.pointerType === "mouse" ? e.clientX : null;
-  if (mouseX !== null) mouseY = e.clientY;
-}
-function mouseInside(rect) {
-  return mouseX !== null && mouseX >= rect.left && mouseX < rect.right && mouseY >= rect.top && mouseY < rect.bottom;
-}
-function bindDocListeners(doc, view) {
-  if (docBound) return;
-  doc.addEventListener("pointerdown", onDocPointerDown, true);
-  doc.addEventListener("pointermove", trackMouse, { capture: true, passive: true });
-  doc.addEventListener("pointerleave", clearMouse);
-  doc.addEventListener("keydown", onDocKeyDown, true);
-  doc.addEventListener("keyup", onDocKeyUp, true);
-  doc.addEventListener("contextmenu", onDocContextMenu, true);
-  view.addEventListener("resize", onResize);
-  boundDoc = doc;
-  boundView = view;
-  docBound = true;
-}
-function unbindDocListeners() {
-  if (!docBound) return;
-  boundDoc?.removeEventListener("pointerdown", onDocPointerDown, true);
-  boundDoc?.removeEventListener("pointermove", trackMouse, true);
-  boundDoc?.removeEventListener("pointerleave", clearMouse);
-  boundDoc?.removeEventListener("keydown", onDocKeyDown, true);
-  boundDoc?.removeEventListener("keyup", onDocKeyUp, true);
-  boundDoc?.removeEventListener("contextmenu", onDocContextMenu, true);
-  boundView?.removeEventListener("resize", onResize);
-  boundDoc = null;
-  boundView = null;
-  docBound = false;
-  mouseX = null;
-}
-function clearMouse() {
-  mouseX = null;
-}
-function menuIndexForEvent(e, primaryClick = false) {
-  const path = e.composedPath();
-  for (let i = openStack.length - 1; i >= 0; i--) {
-    const m = openStack[i];
-    if (path.includes(m.surface)) return i;
-    const anchor = m.triggerAnchor;
-    if (!anchor) continue;
-    if (primaryClick && m.hasAttribute("context")) continue;
-    if (path.includes(anchor)) return i;
-  }
-  return -1;
+function isElement(node) {
+  return !!node && node.nodeType === 1;
 }
 function pathCrossesTopLayerBeforeAnchor(e, anchor) {
   for (const node of e.composedPath()) {
     if (node === anchor) return false;
-    if (node instanceof HTMLDialogElement && node.matches(":modal") || node instanceof HTMLElement && node.matches(":popover-open"))
+    if (isElement(node) && node.localName === "dialog" && node.matches(":modal") || isElement(node) && node.matches(":popover-open"))
       return true;
   }
   return false;
 }
-function nodeHitsMenus(node) {
-  for (const m of openStack) {
-    if (m.contains(node) || m.surface.contains(node)) return true;
-  }
-  return false;
-}
-setMenuPresence({
-  isOpen: () => openStack.length > 0,
-  contains: nodeHitsMenus
-});
-function onDocPointerDown(e) {
-  trackMouse(e);
-  if (!openStack.length) return;
-  const index = menuIndexForEvent(e, e.button === 0);
-  openStack[index + 1]?.requestClose(e);
-}
-function onDocContextMenu(e) {
-  if (!openStack.length) return;
-  if (menuIndexForEvent(e) === -1) dismiss(e);
-}
-function onResize() {
-  if (!openStack.length) return;
-  dismiss();
+const MENU_COORDINATION = /* @__PURE__ */ Symbol.for("anta.menu-coordination");
+function coordination(doc) {
+  return doc[MENU_COORDINATION] ??= createCoordination(doc);
 }
-function onDocKeyDown(e) {
-  const menu = openStack[openStack.length - 1];
-  if (!menu) return;
-  menu.handleKey(e);
-}
-function onDocKeyUp(e) {
-  const menu = openStack[openStack.length - 1];
-  if (!menu) return;
-  menu.handleKeyUp(e);
-}
-function dismiss(originEvent) {
-  openStack[0]?.requestClose(originEvent);
-}
-function closeAll() {
-  for (let i = openStack.length - 1; i >= 0; i--) {
-    const m = openStack[i];
-    if (m.isOpen && !m._dismissNotified) m.emitChange("closed");
-    m._doHide();
-  }
-  openStack.length = 0;
-  unbindDocListeners();
-}
-const anchorToMenu = /* @__PURE__ */ new WeakMap();
-function handleIntersection(entries) {
-  for (const entry of entries) {
-    const menu = anchorToMenu.get(entry.target);
-    if (!menu) continue;
-    if (!menu.listening && entry.isIntersecting) {
-      requestAnimationFrame(() => menu.setupListeners());
-    } else if (menu.listening && !entry.isIntersecting) {
-      requestAnimationFrame(() => {
-        menu.teardownListeners();
-        if (menu.isOpen) menu.close();
+function createCoordination(doc) {
+  const openStack = [];
+  let docBound = false;
+  let boundDoc = null;
+  let boundView = null;
+  let mouseX = null;
+  let mouseY = 0;
+  function trackMouse(e) {
+    mouseX = e.pointerType === "mouse" ? e.clientX : null;
+    if (mouseX !== null) mouseY = e.clientY;
+  }
+  function mouseInside(rect) {
+    return mouseX !== null && mouseX >= rect.left && mouseX < rect.right && mouseY >= rect.top && mouseY < rect.bottom;
+  }
+  function bindDocListeners(doc2, view) {
+    if (docBound) return;
+    doc2.addEventListener("pointerdown", onDocPointerDown, true);
+    doc2.addEventListener("pointermove", trackMouse, { capture: true, passive: true });
+    doc2.addEventListener("pointerleave", clearMouse);
+    doc2.addEventListener("keydown", onDocKeyDown, true);
+    doc2.addEventListener("keyup", onDocKeyUp, true);
+    doc2.addEventListener("contextmenu", onDocContextMenu, true);
+    view.addEventListener("resize", onResize);
+    boundDoc = doc2;
+    boundView = view;
+    docBound = true;
+  }
+  function unbindDocListeners() {
+    if (!docBound) return;
+    boundDoc?.removeEventListener("pointerdown", onDocPointerDown, true);
+    boundDoc?.removeEventListener("pointermove", trackMouse, true);
+    boundDoc?.removeEventListener("pointerleave", clearMouse);
+    boundDoc?.removeEventListener("keydown", onDocKeyDown, true);
+    boundDoc?.removeEventListener("keyup", onDocKeyUp, true);
+    boundDoc?.removeEventListener("contextmenu", onDocContextMenu, true);
+    boundView?.removeEventListener("resize", onResize);
+    boundDoc = null;
+    boundView = null;
+    docBound = false;
+    mouseX = null;
+  }
+  function clearMouse() {
+    mouseX = null;
+  }
+  function menuIndexForEvent(e, primaryClick = false) {
+    const path = e.composedPath();
+    for (let i = openStack.length - 1; i >= 0; i--) {
+      const m = openStack[i];
+      if (path.includes(m.surface)) return i;
+      const anchor = m.triggerAnchor;
+      if (!anchor) continue;
+      if (primaryClick && m.hasAttribute("context")) continue;
+      if (path.includes(anchor)) return i;
+    }
+    return -1;
+  }
+  function nodeHitsMenus(node) {
+    for (const m of openStack) {
+      if (m.contains(node) || m.surface.contains(node)) return true;
+    }
+    return false;
+  }
+  const menuPresence = {
+    isOpen: (doc2) => openStack.some((menu) => !doc2 || menu.ownerDocument === doc2),
+    contains: nodeHitsMenus
+  };
+  setMenuPresence(menuPresence, doc);
+  function onDocPointerDown(e) {
+    trackMouse(e);
+    if (!openStack.length) return;
+    const index = menuIndexForEvent(e, e.button === 0);
+    openStack[index + 1]?.requestClose(e);
+  }
+  function onDocContextMenu(e) {
+    if (!openStack.length) return;
+    if (menuIndexForEvent(e) === -1) dismiss(e);
+  }
+  function onResize() {
+    if (!openStack.length) return;
+    dismiss();
+  }
+  function onDocKeyDown(e) {
+    const menu = openStack[openStack.length - 1];
+    if (!menu) return;
+    menu.handleKey(e);
+  }
+  function onDocKeyUp(e) {
+    const menu = openStack[openStack.length - 1];
+    if (!menu) return;
+    menu.handleKeyUp(e);
+  }
+  function dismiss(originEvent) {
+    openStack[0]?.requestClose(originEvent);
+  }
+  const parents = /* @__PURE__ */ new Map();
+  function watchParent(parent, refresh) {
+    const Observer = doc.defaultView?.MutationObserver;
+    if (!Observer) return;
+    let entry = parents.get(parent);
+    if (!entry) {
+      const callbacks2 = /* @__PURE__ */ new Set();
+      const observer3 = new Observer(() => {
+        for (const callback of callbacks2) callback();
       });
+      observer3.observe(parent, { childList: true });
+      entry = { observer: observer3, refresh: callbacks2 };
+      parents.set(parent, entry);
     }
+    const { observer: observer2, refresh: callbacks } = entry;
+    callbacks.add(refresh);
+    return () => {
+      if (!callbacks.delete(refresh) || callbacks.size) return;
+      observer2.disconnect();
+      parents.delete(parent);
+    };
   }
+  const anchorToMenu = /* @__PURE__ */ new Map();
+  const frames = /* @__PURE__ */ new Map();
+  let observer;
+  function observe(menu, anchor) {
+    const previous = anchorToMenu.get(anchor);
+    if (previous && previous !== menu) {
+      previous.teardownListeners();
+      const frame = frames.get(anchor);
+      if (frame !== void 0) doc.defaultView?.cancelAnimationFrame(frame);
+      frames.delete(anchor);
+      observer?.unobserve(anchor);
+    }
+    anchorToMenu.set(anchor, menu);
+    const Observer = doc.defaultView?.IntersectionObserver;
+    if (!Observer) {
+      menu.setupListeners();
+      return;
+    }
+    observer ??= new Observer((entries) => {
+      for (const entry of entries) {
+        const menu2 = anchorToMenu.get(entry.target);
+        if (!menu2) continue;
+        const view = doc.defaultView;
+        if (!view) continue;
+        const previous2 = frames.get(entry.target);
+        if (previous2 !== void 0) view.cancelAnimationFrame(previous2);
+        frames.set(entry.target, view.requestAnimationFrame(() => {
+          frames.delete(entry.target);
+          if (anchorToMenu.get(entry.target) !== menu2 || !menu2.isConnected || menu2.ownerDocument !== doc) return;
+          if (entry.isIntersecting) menu2.setupListeners();
+          else if (menu2.listening) {
+            menu2.teardownListeners();
+            if (menu2.isOpen) menu2.close();
+          }
+        }));
+      }
+    }, { root: null, rootMargin: "0px", threshold: 0 });
+    observer.observe(anchor);
+  }
+  function unobserve(menu, anchor) {
+    if (anchorToMenu.get(anchor) !== menu) return;
+    anchorToMenu.delete(anchor);
+    const frame = frames.get(anchor);
+    if (frame !== void 0) doc.defaultView?.cancelAnimationFrame(frame);
+    frames.delete(anchor);
+    observer?.unobserve(anchor);
+    if (!anchorToMenu.size) {
+      observer?.disconnect();
+      observer = void 0;
+    }
+  }
+  return {
+    stack: openStack,
+    observe,
+    unobserve,
+    watchParent,
+    bind: bindDocListeners,
+    unbind: unbindDocListeners,
+    get mouseX() {
+      return mouseX;
+    },
+    mouseInside
+  };
 }
-const lazyObserver = typeof IntersectionObserver !== "undefined" ? new IntersectionObserver(handleIntersection, { root: null, rootMargin: "0px", threshold: 0 }) : null;
 class AMenuElement extends HTMLElementBase {
   static observedAttributes = ["placement", "context", "coord", "offset", "nohover", "state", "stop-propagation", "role"];
   /** Shadow-internal popover surface — the only thing we ever mutate. */
@@ -185,6 +256,8 @@ class AMenuElement extends HTMLElementBase {
   // layout shifts. Those movements do not all produce a DOM observer callback, so
   // this frame is active only while the menu is visible.
   #anchorTrackingFrame;
+  // Preserve anchoring mode while a sibling trigger is temporarily absent.
+  #anchorRelative = false;
   #lastAnchorRect;
   // Vertical-follow baseline captured on each full position(): the frozen
   // horizontal offset and the gap to the anchor's top. Tracking translates to hold
@@ -211,118 +284,22 @@ class AMenuElement extends HTMLElementBase {
     } catch {
     }
     const shadow = this.attachShadow({ mode: "open" });
-    const style = document.createElement("style");
-    style.textContent = `
-      :host { display: contents; }
-
-      .container {
-        position: fixed;
-        left: 0;
-        top: 0;
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-        flex-direction: column;
-        min-width: max(var(--menu-min-width, 88px), var(--_anchor-width, 0px));
-        max-width: calc(100vw - ${2 * MARGIN}px);
-        max-height: calc(100dvh - ${2 * MARGIN}px);
-        overflow: hidden;
-        background: var(--menu-bg, Canvas);
-        color: var(--text-2, CanvasText);
-        border: var(--menu-border, 1px solid);
-        border-radius: var(--menu-radius, 8px);
-        box-shadow: var(--menu-shadow, 0 8px 24px rgba(0,0,0,0.2));
-        -webkit-backdrop-filter: var(--menu-backdrop-filter, blur(20px));
-        backdrop-filter: var(--menu-backdrop-filter, blur(20px));
-        outline: none;
-
-        /* Closed / exit state \u2014 fade + a tiny vertical settle (no horizontal
-           shift). This 140ms governs the EXIT (open \u2192 closed); the enter is a
-           touch quicker (see :popover-open below) so the menu feels snappy to
-           open but unhurried to dismiss. 'display' and 'overlay' transition with
-           'allow-discrete' so the menu stays in the top layer and visible while
-           it animates OUT, then hides. */
-        opacity: 0;
-        translate: 0 -4px;
-        transition:
-          opacity 140ms ease-out,
-          translate 140ms ease-out,
-          width var(--menu-width-duration, 160ms) ease,
-          display 140ms allow-discrete,
-          overlay 140ms allow-discrete;
-      }
-      .container:popover-open {
-        display: flex;
-        opacity: 1;
-        translate: 0 0;
-        /* Enter (closed \u2192 open) \u2014 quicker than the exit above. */
-        transition:
-          opacity 100ms ease-out,
-          translate 100ms ease-out,
-          width var(--menu-width-duration, 160ms) ease,
-          display 100ms allow-discrete,
-          overlay 100ms allow-discrete;
-      }
-      /* Enter: start from the closed state and transition in. */
-      @starting-style {
-        .container:popover-open { opacity: 0; translate: 0 -4px; }
-      }
-      slot[name="header"],
-      slot[name="footer"] {
-        display: block;
-        flex: none;
-      }
-      slot[name="header"]::slotted(a-menu-header),
-      slot[name="header"]::slotted(a-select-header),
-      slot[name="footer"]::slotted(a-menu-footer),
-      slot[name="footer"]::slotted(a-select-footer) {
-        display: block;
-        padding: var(--menu-padding, 4px);
-      }
-      /* The scrolling body \u2014 only the items scroll; the header / footer slots stay
-         fixed above and below it. min-height:0 lets it shrink so its own scrollbar
-         engages instead of the flex item overflowing. The 1px inter-item gap that
-         used to live on the container lives here now. */
-      .scroll {
-        flex: 1 1 auto;
-        min-height: 0;
-        display: flex;
-        flex-direction: column;
-        gap: 1px;
-        overflow-y: auto;
-        overscroll-behavior: contain;
-        scrollbar-width: thin;
-        /* The menu's padding lives here (not on the clipping container) so an item's
-           focus outline has room inside the scroll box instead of being clipped at
-           the edge; scroll-padding keeps a focused row off the edge when scrolled. */
-        padding: var(--menu-padding, 4px);
-        scroll-padding-block: var(--menu-padding, 4px);
-        /* Soft scroll edges: fade the content into the top / bottom only on the side
-           with more to scroll (the --fade-* vars, set from JS, are 0 otherwise). The
-           top also clears a hard --gap-top band (fully transparent, ahead of the ramp)
-           so a row scrolling up disappears cleanly under a pinned header / filter field
-           before the fade begins, instead of bleeding right against it. */
-        --fade-top: 0px;
-        --fade-bottom: 0px;
-        --gap-top: 0px;
-        -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent var(--gap-top), #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent 100%);
-        mask-image: linear-gradient(to bottom, transparent 0, transparent var(--gap-top), #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent 100%);
-      }
-    `;
-    this.surface = document.createElement("div");
+    this.surface = this.doc.createElement("div");
     this.surface.className = "container";
     this.surface.setAttribute("part", "menu");
     this.surface.setAttribute("popover", "manual");
-    const header = document.createElement("slot");
+    const header = this.doc.createElement("slot");
     header.setAttribute("name", "header");
-    const scroll = document.createElement("div");
+    header.part.add("header");
+    const scroll = this.doc.createElement("div");
     scroll.className = "scroll";
     scroll.setAttribute("part", "scroll");
-    scroll.append(document.createElement("slot"));
+    scroll.append(this.doc.createElement("slot"));
     scroll.addEventListener("scroll", () => this.updateScrollFade(), { passive: true });
     this.scrollEl = scroll;
-    const footer = document.createElement("slot");
+    const footer = this.doc.createElement("slot");
     footer.setAttribute("name", "footer");
+    footer.part.add("footer");
     this.surface.append(header, scroll, footer);
     this.surface.addEventListener("pointerenter", (e) => {
       if (e.pointerType !== "mouse") return;
@@ -336,24 +313,53 @@ class AMenuElement extends HTMLElementBase {
       if (this.isSubmenu && this.#isHover) this.scheduleClose();
     });
     this.surface.addEventListener("click", this.onSurfaceClick);
-    shadow.append(style, this.surface);
+    this.surface.addEventListener("mousedown", (e) => {
+      if (e.button === 0 && this.#comboAnchor) e.preventDefault();
+    });
+    shadow.append(this.surface);
+  }
+  #connectedDocument;
+  #observedAnchor;
+  #unwatchTrigger;
+  #stateFrame;
+  #positionFrame;
+  get #coordination() {
+    return coordination(this.#connectedDocument ?? this.doc);
+  }
+  #closeAll() {
+    const state = this.#coordination;
+    for (let i = state.stack.length - 1; i >= 0; i--) {
+      const menu = state.stack[i];
+      if (menu.isOpen && !menu._dismissNotified) menu.emitChange("closed");
+      menu._doHide();
+    }
+    state.stack.length = 0;
+    state.unbind();
   }
   connectedCallback() {
+    this.#connectedDocument = this.doc;
     ensureMenuItemKeyListener(this.doc);
     this.#syncStopPropagation();
     this.#syncAccessibilityRegions();
-    const anchor = this.triggerAnchor;
-    if (anchor) {
-      anchorToMenu.set(anchor, this);
-      lazyObserver?.observe(anchor);
+    this.#syncTriggerAnchor();
+    if (!this.isSubmenu && this.parentNode) {
+      this.#unwatchTrigger = this.#coordination.watchParent(this.parentNode, () => this.#syncTriggerAnchor());
     }
     this.#syncPopupAriaRelations();
     queueMicrotask(() => {
       if (this.isConnected) this.#syncPopupAriaRelations();
     });
-    if (this.hasAttribute("state")) requestAnimationFrame(() => this.syncState());
+    if (this.hasAttribute("state")) this.#stateFrame = this.view.requestAnimationFrame(() => {
+      this.#stateFrame = void 0;
+      this.syncState();
+    });
   }
   disconnectedCallback() {
+    this.#unwatchTrigger?.();
+    this.#unwatchTrigger = void 0;
+    const oldView = this.#connectedDocument?.defaultView;
+    if (this.#stateFrame !== void 0) oldView?.cancelAnimationFrame(this.#stateFrame);
+    this.#stateFrame = void 0;
     this.hide(false);
     this.teardownListeners();
     this.cancelOpenTimer();
@@ -361,11 +367,39 @@ class AMenuElement extends HTMLElementBase {
     this.accessibilityObserver?.disconnect();
     this.accessibilityObserver = void 0;
     this.#clearPopupAriaRelations();
-    const anchor = this.triggerAnchor;
-    if (anchor && anchorToMenu.get(anchor) === this) {
-      anchorToMenu.delete(anchor);
-      lazyObserver?.unobserve(anchor);
+    if (this.#observedAnchor) this.#coordination.unobserve(this, this.#observedAnchor);
+    this.#observedAnchor = void 0;
+    this.#connectedDocument = void 0;
+  }
+  /** Rebind only when the authored sibling node changes, after reconciliation.
+   *  Keep open state intact; focus remains with the application replacing it. */
+  #syncTriggerAnchor() {
+    if (!this.isConnected) return;
+    const anchor = this.triggerAnchor ?? void 0;
+    if (anchor === this.#observedAnchor) return;
+    if (this.#observedAnchor) this.#coordination.unobserve(this, this.#observedAnchor);
+    this.teardownListeners();
+    this.listening = false;
+    this.cancelOpenTimer();
+    this.cancelCloseTimer();
+    this.#pendingComboActivate = null;
+    this.#observedAnchor = anchor;
+    if (anchor) this.#coordination.observe(this, anchor);
+    if (this._shown) {
+      if (this.#searchField) this.startComboObserver();
+      else {
+        this.comboObserver?.disconnect();
+        this.comboObserver = void 0;
+        if (this.activeItem) this.setActive(null);
+      }
+      if (this.#anchorRelative) {
+        if (anchor) {
+          this.position();
+          this.#startAnchorTracking();
+        } else this.#stopAnchorTracking();
+      }
     }
+    this.#syncPopupAriaRelations();
   }
   attributeChangedCallback(name) {
     if (name === "state") {
@@ -482,7 +516,7 @@ class AMenuElement extends HTMLElementBase {
   /** Custom menu rows that support the combobox cursor and selection state. */
   focusableItems() {
     return this.navigableItems().filter(
-      (el) => el instanceof AMenuItemElement
+      (el) => isCustomMenuItem(el)
     );
   }
   /** The rows the arrow keys / Home / End / initial-focus step between:
@@ -529,15 +563,21 @@ class AMenuElement extends HTMLElementBase {
   scrollItemIntoView(item) {
     const c = this.scrollEl;
     if (!c) return;
-    const pad = 4;
+    const style = this.view.getComputedStyle(c);
+    const padding = (value) => {
+      const amount = Number.parseFloat(value);
+      return Number.isFinite(amount) ? amount * (value.endsWith("%") ? c.clientHeight / 100 : 1) : 0;
+    };
     const cr = c.getBoundingClientRect();
+    const top = cr.top + c.clientTop + padding(style.scrollPaddingTop);
+    const bottom = cr.top + c.clientTop + c.clientHeight - padding(style.scrollPaddingBottom);
     const ir = item.getBoundingClientRect();
-    if (ir.top < cr.top + pad) c.scrollTop -= cr.top + pad - ir.top;
-    else if (ir.bottom > cr.bottom - pad) c.scrollTop += ir.bottom - cr.bottom + pad;
+    if (ir.top < top) c.scrollTop -= top - ir.top;
+    else if (ir.bottom > bottom) c.scrollTop += ir.bottom - bottom;
   }
   /** Fade the scrolling body's content into the top / bottom edges — but only on the
    *  side that actually has more to scroll, so a short (non-scrolling) menu and the
-   *  true top / bottom stay crisp. Drives the `--fade-*` / `--gap-top` vars the
+   *  true top / bottom stay crisp. Drives the private fade/gap properties the
    *  `.scroll` mask reads; runs on scroll and after every (re)position.
    *  Shadow-internal only. */
   updateScrollFade() {
@@ -545,9 +585,9 @@ class AMenuElement extends HTMLElementBase {
     if (!el) return;
     const top = el.scrollTop > 1;
     const bottom = el.scrollTop + el.clientHeight < el.scrollHeight - 1;
-    el.style.setProperty("--fade-top", top ? "16px" : "0px");
-    el.style.setProperty("--gap-top", top ? "3px" : "0px");
-    el.style.setProperty("--fade-bottom", bottom ? "14px" : "0px");
+    el.style.setProperty("--_menu-fade-top", top ? "16px" : "0px");
+    el.style.setProperty("--_menu-gap-top", top ? "3px" : "0px");
+    el.style.setProperty("--_menu-fade-bottom", bottom ? "14px" : "0px");
   }
   /* ------------------------------ combobox mode ------------------------------ */
   /** Combobox-anchor mode: the trigger anchor ITSELF is the filter field (it
@@ -645,13 +685,17 @@ class AMenuElement extends HTMLElementBase {
     this.activeItem = item;
     if (item) {
       item.active = true;
-      item.scrollIntoView?.({ block: "nearest" });
+      this.scrollItemIntoView(item);
     }
     this.#syncPopupAriaRelations();
     this.dispatchEvent(
       new CustomEvent("activedescendant", { detail: { id: item?.id ?? null } })
     );
   }
+  #clearComboCursor() {
+    this.#pendingComboActivate = null;
+    if (this.activeItem) this.setActive(null);
+  }
   /** Re-seat the cursor on the first option — but only once the filter has input.
    *  An empty filter (e.g. right after opening) shows NO active row, so the first
    *  ArrowDown is what steps onto the list; typing then keeps the top match active.
@@ -659,9 +703,10 @@ class AMenuElement extends HTMLElementBase {
    *  the seat target — the cursor lands on the first real option — but they stay
    *  arrow-reachable. */
   resetActive() {
+    if (this.#comboAnchor) return this.#clearComboCursor();
+    this.#pendingComboActivate = null;
     const q = this.#searchField?.value;
     if (!q || !q.trim()) return this.setActive(null);
-    if (this.#comboAnchor) return this.setActive(null);
     const items = this.focusableItems();
     this.setActive(items.find((it) => !it.hasAttribute("data-menu-skip-active")) ?? items[0] ?? null);
   }
@@ -672,6 +717,7 @@ class AMenuElement extends HTMLElementBase {
    *  instead. Any other key falls through to the input (typing). */
   handleComboKey(e) {
     const items = this.focusableItems();
+    if (this.activeItem && !items.includes(this.activeItem)) this.#clearComboCursor();
     const idx = this.activeItem ? items.indexOf(this.activeItem) : -1;
     switch (e.key) {
       case "ArrowDown":
@@ -709,10 +755,14 @@ class AMenuElement extends HTMLElementBase {
   /** Combobox keyup: activate the item a filter-field Enter armed. Paired with the
    *  keydown pre-request in `handleComboKey` so lazy content resolves in the gap. */
   handleKeyUp(e) {
+    if (isComposingKey(e)) {
+      this.#pendingComboActivate = null;
+      return;
+    }
     if (e.key !== "Enter") return;
     const el = this.#pendingComboActivate;
     this.#pendingComboActivate = null;
-    el?.click();
+    if (el && this.focusableItems().includes(el)) el.click();
   }
   /* ============================ open / close ============================ */
   /** Public imperative API. Routes through the same intent path as the
@@ -747,6 +797,7 @@ class AMenuElement extends HTMLElementBase {
    *  `statechange`; applies the visibility itself ONLY when uncontrolled and
    *  not vetoed — a controlled menu waits for the consumer to flip `state`. */
   requestOpen(opts) {
+    if (!this.isConnected) return;
     if (this._shown) {
       this.show(opts?.coord, opts?.viaKeyboard, opts?.originEvent);
       return;
@@ -759,14 +810,15 @@ class AMenuElement extends HTMLElementBase {
    *  uncontrolled and not vetoed. */
   requestClose(originEvent) {
     if (!this._shown) return;
-    const idx = openStack.indexOf(this);
+    const stack = this.#coordination.stack;
+    const idx = stack.indexOf(this);
     if (idx !== -1) {
-      for (let i = openStack.length - 1; i > idx; i--) {
-        const m = openStack[i];
+      for (let i = stack.length - 1; i > idx; i--) {
+        const m = stack[i];
         if (m.isOpen && !m._dismissNotified) m.emitChange("closed");
         m._doHide();
       }
-      openStack.length = idx + 1;
+      stack.length = idx + 1;
     }
     const ok = this.emitChange("closed", { originEvent });
     if (this.isControlled) {
@@ -778,50 +830,51 @@ class AMenuElement extends HTMLElementBase {
   /** Apply OPEN to the DOM (no event) — used by uncontrolled intent and by the
    *  controlled `state` sync. */
   show(coord, viaKeyboard = false, _originEvent) {
+    const stack = this.#coordination.stack;
     if (this.isSubmenu) {
       const parent = this.#ownerMenu;
       if (parent) {
-        const pidx = openStack.indexOf(parent);
+        const pidx = stack.indexOf(parent);
         if (pidx !== -1) {
-          for (let i = openStack.length - 1; i > pidx; i--) {
-            const menu = openStack[i];
+          for (let i = stack.length - 1; i > pidx; i--) {
+            const menu = stack[i];
             if (menu !== this && menu.isOpen && !menu._dismissNotified) menu.emitChange("closed");
             menu._doHide();
           }
-          openStack.length = pidx + 1;
+          stack.length = pidx + 1;
         }
       }
-    } else if (!openStack.includes(this)) {
+    } else if (!stack.includes(this)) {
       const anchor = this.triggerAnchor;
       let container;
       if (anchor)
-        for (let i = openStack.length - 1; i >= 0; i--) {
-          if (openStack[i] !== this && openStack[i].contains(anchor)) {
-            container = openStack[i];
+        for (let i = stack.length - 1; i >= 0; i--) {
+          if (stack[i] !== this && stack[i].contains(anchor)) {
+            container = stack[i];
             break;
           }
         }
       if (container) {
-        const idx = openStack.indexOf(container);
-        for (let i = openStack.length - 1; i > idx; i--) {
-          const m = openStack[i];
+        const idx = stack.indexOf(container);
+        for (let i = stack.length - 1; i > idx; i--) {
+          const m = stack[i];
           if (m.isOpen && !m._dismissNotified) m.emitChange("closed");
           m._doHide();
         }
-        openStack.length = idx + 1;
+        stack.length = idx + 1;
       } else {
-        closeAll();
+        this.#closeAll();
       }
     }
-    if (openStack.includes(this)) {
+    if (stack.includes(this)) {
       this.position(coord);
       return;
     }
-    const wasEmpty = openStack.length === 0;
+    const wasEmpty = stack.length === 0;
     this._doShow(coord, !wasEmpty);
-    openStack.push(this);
+    stack.push(this);
     if (wasEmpty) {
-      bindDocListeners(this.doc, this.view);
+      this.#coordination.bind(this.doc, this.view);
     }
     const search = this.#searchField;
     if (search) {
@@ -833,40 +886,39 @@ class AMenuElement extends HTMLElementBase {
       this.seatInitialFocus(viaKeyboard);
     }
   }
-  /** While a filter field is open, the visible option list changes as the user
-   *  types (the consumer re-renders the matches); re-seat the cursor on the first
-   *  match. `childList` only — an item toggling its own `selected` (multi-select)
-   *  mutates deep in its subtree, not this menu's direct children, so it won't
-   *  spuriously reset the cursor. */
+  /** Reconcile changed results while filtering. Slotted filters observe direct
+   * children only; autocomplete also observes row content and disabled changes. */
   startComboObserver() {
     this.comboObserver?.disconnect();
-    this.comboObserver = new this.view.MutationObserver(() => {
+    this.comboObserver = new this.view.MutationObserver((records) => {
       if (!this._shown || !this.#searchField) return;
+      if (this.#comboAnchor && !records.some(
+        (record) => record.type !== "attributes" || isMenuItemEl(record.target) && record.target.parentElement === this
+      )) return;
       this.resetActive();
       this.position(void 0, false, true);
     });
-    this.comboObserver.observe(this, { childList: true });
+    this.comboObserver.observe(this, {
+      childList: true,
+      ...this.#comboAnchor ? { characterData: true, attributes: true, subtree: true, attributeFilter: ["disabled"] } : {}
+    });
   }
   /** Apply CLOSE without notifying this menu's owner. Notify nested menus so
    *  their controlled state follows the closing parent. */
   hide(notifyDescendants = true) {
-    this.comboObserver?.disconnect();
-    this.comboObserver = void 0;
-    this.setActive(null);
-    this._flippedTop = null;
-    this._flippedSide = null;
-    const idx = openStack.indexOf(this);
+    const stack = this.#coordination.stack;
+    const idx = stack.indexOf(this);
     if (idx === -1) {
       if (this._shown) this._doHide();
       return;
     }
-    for (let i = openStack.length - 1; i >= idx; i--) {
-      const menu = openStack[i];
+    for (let i = stack.length - 1; i >= idx; i--) {
+      const menu = stack[i];
       if (notifyDescendants && i > idx && menu.isOpen && !menu._dismissNotified) menu.emitChange("closed");
       menu._doHide();
     }
-    openStack.length = idx;
-    if (openStack.length === 0) unbindDocListeners();
+    stack.length = idx;
+    if (stack.length === 0) this.#coordination.unbind();
   }
   /** Shadow-only show: open the popover and position it. `instant` positions
    *  synchronously (no rAF), so a menu opening over an already-visible one is
@@ -893,15 +945,24 @@ class AMenuElement extends HTMLElementBase {
   }
   /** Shadow-only hide. */
   _doHide() {
+    this.comboObserver?.disconnect();
+    this.comboObserver = void 0;
+    this.#clearComboCursor();
+    this._flippedTop = null;
+    this._flippedSide = null;
+    clearTimeout(this.typeTimer);
+    this.typeTimer = void 0;
+    this.typeBuffer = "";
+    if (this.#positionFrame !== void 0) (this.#connectedDocument?.defaultView ?? this.view).cancelAnimationFrame(this.#positionFrame);
+    this.#positionFrame = void 0;
     const parent = this.parentElement?.closest("a-menu");
-    if (this._shown && parent && mouseX !== null && mouseInside(this.surface.getBoundingClientRect())) {
+    if (this._shown && parent && this.#coordination.mouseX !== null && this.#coordination.mouseInside(this.surface.getBoundingClientRect())) {
       for (let ancestor = parent; ancestor; ancestor = ancestor.parentElement?.closest("a-menu")) {
-        if (!ancestor.isSubmenu || !ancestor.#isHover || !ancestor._shown || ancestor.surface.matches(":hover")) continue;
-        ancestor.#holdHoverClose = true;
-        ancestor.cancelCloseTimer();
+        ancestor.holdHoverClose?.();
       }
     }
     this.#stopAnchorTracking();
+    this.#anchorRelative = false;
     if (this.surface.isConnected && this._shown) this.surface.hidePopover();
     this._shown = false;
     this.#holdHoverClose = false;
@@ -933,7 +994,8 @@ class AMenuElement extends HTMLElementBase {
    *  opening point. */
   #startAnchorTracking(coord) {
     this.#stopAnchorTracking();
-    if (coord || this.#isCoord) return;
+    this.#anchorRelative = !coord && !this.#isCoord;
+    if (!this.#anchorRelative) return;
     const anchor = this.triggerAnchor;
     if (!anchor) return;
     this.#lastAnchorRect = this.#anchorRectValues(anchor);
@@ -970,7 +1032,7 @@ class AMenuElement extends HTMLElementBase {
   }
   #stopAnchorTracking() {
     if (this.#anchorTrackingFrame !== void 0) {
-      this.view.cancelAnimationFrame(this.#anchorTrackingFrame);
+      (this.#connectedDocument?.defaultView ?? this.view).cancelAnimationFrame(this.#anchorTrackingFrame);
       this.#anchorTrackingFrame = void 0;
     }
     this.#lastAnchorRect = void 0;
@@ -995,7 +1057,7 @@ class AMenuElement extends HTMLElementBase {
       let left = MARGIN;
       let top = MARGIN;
       if (coord) {
-        surface.style.maxHeight = `${Math.max(MIN_HEIGHT, vh - 2 * MARGIN)}px`;
+        surface.style.setProperty("--_menu-max-height", `${Math.max(MIN_HEIGHT, vh - 2 * MARGIN)}px`);
         const box = surface.getBoundingClientRect();
         left = coord[0];
         if (left + box.width > vw - MARGIN) left = vw - box.width - MARGIN;
@@ -1006,7 +1068,7 @@ class AMenuElement extends HTMLElementBase {
       } else if (this.isSubmenu) {
         const it = this.triggerAnchor ? anchorRect(this.triggerAnchor) : null;
         if (!it) return;
-        surface.style.maxHeight = `${Math.max(MIN_HEIGHT, vh - 2 * MARGIN)}px`;
+        surface.style.setProperty("--_menu-max-height", `${Math.max(MIN_HEIGHT, vh - 2 * MARGIN)}px`);
         const box = surface.getBoundingClientRect();
         left = it.right + this.#offset;
         if (left + box.width > vw - MARGIN) {
@@ -1027,7 +1089,7 @@ class AMenuElement extends HTMLElementBase {
         const p = this.#placement;
         if (p.startsWith("right") || p.startsWith("left")) {
           surface.style.removeProperty("--_anchor-width");
-          surface.style.maxHeight = `${Math.max(MIN_HEIGHT, vh - 2 * MARGIN)}px`;
+          surface.style.setProperty("--_menu-max-height", `${Math.max(MIN_HEIGHT, vh - 2 * MARGIN)}px`);
           const box = surface.getBoundingClientRect();
           const spaceRight = vw - a.right - 2 * MARGIN;
           const spaceLeft = a.left - 2 * MARGIN;
@@ -1046,7 +1108,7 @@ class AMenuElement extends HTMLElementBase {
           const spaceBelow = vh - a.bottom - 2 * MARGIN;
           const spaceAbove = a.top - 2 * MARGIN;
           let onTop = p.startsWith("top");
-          surface.style.maxHeight = "";
+          surface.style.removeProperty("--_menu-max-height");
           const natural = surface.scrollHeight;
           if (reanchor && this._flippedTop !== null) {
             onTop = this._flippedTop;
@@ -1056,7 +1118,7 @@ class AMenuElement extends HTMLElementBase {
           }
           this._flippedTop = onTop;
           const space = onTop ? spaceAbove : spaceBelow;
-          surface.style.maxHeight = `${Math.max(MIN_HEIGHT, Math.floor(space))}px`;
+          surface.style.setProperty("--_menu-max-height", `${Math.max(MIN_HEIGHT, Math.floor(space))}px`);
           const box = surface.getBoundingClientRect();
           const align = p.endsWith("end") ? "end" : p.endsWith("start") ? "start" : "center";
           left = align === "center" ? a.left + a.width / 2 - box.width / 2 : align === "end" ? a.right - box.width : a.left;
@@ -1075,8 +1137,13 @@ class AMenuElement extends HTMLElementBase {
         this.#followGap = appliedTop - anchorRect(this.triggerAnchor).top;
       }
     };
+    if (this.#positionFrame !== void 0) this.view.cancelAnimationFrame(this.#positionFrame);
+    this.#positionFrame = void 0;
     if (sync) run();
-    else requestAnimationFrame(run);
+    else this.#positionFrame = this.view.requestAnimationFrame(() => {
+      this.#positionFrame = void 0;
+      run();
+    });
   }
   /* ====================== click / close contract ====================== */
   /**
@@ -1097,20 +1164,20 @@ class AMenuElement extends HTMLElementBase {
   onSurfaceClick = (e) => {
     for (const node of e.composedPath()) {
       if (node === this.surface) break;
-      if (node instanceof AMenuElement && node !== this) return;
+      if (isElement(node) && node.localName === "a-menu" && node !== this) return;
     }
     let contain = false;
     let exemptTrigger = false;
     for (const node of e.composedPath()) {
       if (node === this.surface) break;
-      if (!(node instanceof Element)) continue;
+      if (!isElement(node)) continue;
       if (node.matches(DECLARATIVE_TRIGGER)) exemptTrigger = true;
-      if (node instanceof AMenuItemElement || node.hasAttribute("data-menu-close")) contain = true;
+      if (isCustomMenuItem(node) || node.hasAttribute("data-menu-close")) contain = true;
     }
     if (contain && !exemptTrigger) e.stopPropagation();
     for (const node of e.composedPath()) {
       if (node === this.surface) break;
-      if (node instanceof AMenuItemElement) {
+      if (isCustomMenuItem(node)) {
         if (!node.hasAttribute("disabled") && !node.querySelector(":scope > a-menu") && node.closest("a-menu") === this) {
           node.dispatchEvent(
             new MouseEvent("menuselect", {
@@ -1127,9 +1194,9 @@ class AMenuElement extends HTMLElementBase {
     }
     for (const node of e.composedPath()) {
       if (node === this.surface) break;
-      if (!(node instanceof Element)) continue;
+      if (!isElement(node)) continue;
       if (node.hasAttribute("data-menu-open")) return;
-      if (node instanceof AMenuItemElement) {
+      if (isCustomMenuItem(node)) {
         if (node.hasAttribute("disabled")) {
           e.preventDefault();
           return;
@@ -1147,7 +1214,7 @@ class AMenuElement extends HTMLElementBase {
       this.requestClose(e);
       return;
     }
-    const root = openStack[0] ?? this;
+    const root = this.#coordination.stack[0] ?? this;
     root.requestClose(e);
   }
   /** Event types the `stop-propagation` attribute contains at the surface. A bare
@@ -1175,6 +1242,10 @@ class AMenuElement extends HTMLElementBase {
    *  (synthesizes a click → routed through onSurfaceClick). Combobox Enter (focus
    *  in the filter field) is handled here via handleComboKey / handleKeyUp. */
   handleKey(e) {
+    if (isComposingKey(e)) {
+      this.#pendingComboActivate = null;
+      return;
+    }
     if (isModifiedNavigationKey(e)) return;
     const active = this.doc.activeElement;
     if (e.key === "Escape") {
@@ -1244,7 +1315,7 @@ class AMenuElement extends HTMLElementBase {
     }
   }
   submenuOf(item) {
-    if (!item || !(item instanceof AMenuItemElement)) return null;
+    if (!item || !isCustomMenuItem(item)) return null;
     return item.querySelector(":scope > a-menu");
   }
   typeahead(ch, items) {
@@ -1270,7 +1341,7 @@ class AMenuElement extends HTMLElementBase {
     return [r.left, r.bottom];
   }
   setupListeners() {
-    if (this.listening) return;
+    if (this.listening || !this.isConnected) return;
     const anchor = this.triggerAnchor;
     if (!anchor) {
       this.listening = true;
@@ -1314,14 +1385,22 @@ class AMenuElement extends HTMLElementBase {
         this.listening = false;
       };
     } else if (this.#comboAnchor) {
+      const onInput = () => this.#clearComboCursor();
+      anchor.addEventListener("input", onInput);
       this.teardown = () => {
+        anchor.removeEventListener("input", onInput);
         this.listening = false;
       };
       this.listening = true;
       return;
     } else {
       const onClick = (e) => {
-        if (anchor.matches("a-input") && e.composedPath().some((node) => node instanceof Element && node.getAttribute("slot") === "clear")) return;
+        if (anchor.matches(":disabled, [disabled], [loading]")) return;
+        const path = e.composedPath();
+        const anchorPath = path.slice(0, path.indexOf(anchor));
+        if (anchor.matches("a-input") && anchorPath.some((node) => isElement(node) && node.getAttribute("slot") === "clear")) return;
+        const field = anchor.shadowRoot?.querySelector('[part~="field"]');
+        if (field && !anchorPath.includes(field)) return;
         const viaKeyboard = e.detail === 0;
         const coord = this.#isCoord ? viaKeyboard ? this.#anchorCoord(anchor) : [e.clientX, e.clientY] : void 0;
         if (this._shown) this.requestClose(e);
@@ -1330,7 +1409,7 @@ class AMenuElement extends HTMLElementBase {
       const onKey = (e) => {
         if (isModifiedNavigationKey(e)) return;
         if (this._shown) return;
-        if (anchor.hasAttribute("disabled") || anchor.hasAttribute("loading")) return;
+        if (anchor.matches(":disabled, [disabled], [loading]")) return;
         const arrow = e.key === "ArrowDown" || e.key === "ArrowUp";
         if (!arrow && anchor.matches(SELF_ACTIVATING)) return;
         const editable = anchor.matches(EDITABLE_FIELD);
@@ -1369,7 +1448,7 @@ class AMenuElement extends HTMLElementBase {
     if (!this._shown) return;
     if (this.#holdHoverClose) return;
     if (this.#hasKeyboardFocusInside) return;
-    if (openStack.some((m) => m !== this && (this.contains(m) || m.triggerAnchor != null && this.contains(m.triggerAnchor)))) {
+    if (this.#coordination.stack.some((m) => m !== this && (this.contains(m) || m.triggerAnchor != null && this.contains(m.triggerAnchor)))) {
       this.cancelCloseTimer();
       return;
     }
@@ -1389,6 +1468,11 @@ class AMenuElement extends HTMLElementBase {
     const active = this.doc.activeElement;
     return !!active && this.contains(active) && active.matches(":focus-visible");
   }
+  holdHoverClose() {
+    if (!this.isSubmenu || !this.#isHover || !this._shown || this.surface.matches(":hover")) return;
+    this.#holdHoverClose = true;
+    this.cancelCloseTimer();
+  }
   cancelOpenTimer() {
     if (this.openTimer !== void 0) {
       clearTimeout(this.openTimer);