@antadesign/anta 0.1.1-dev.8 → 0.2.0

package/dist/elements/a-menu.js

@@ -0,0 +1,649 @@
+import { HTMLElementBase } from "../anta_helpers";
+import { AMenuItemElement } from "./a-menu-item";
+import "./a-menu.css";
+const MARGIN = 4;
+const MIN_HEIGHT = 96;
+const SUBMENU_OPEN_DELAY = 130;
+const SUBMENU_CLOSE_DELAY = 130;
+const TYPEAHEAD_RESET = 500;
+const openStack = [];
+let docBound = false;
+let boundDoc = null;
+let boundView = null;
+function bindDocListeners(doc, view) {
+  if (docBound) return;
+  doc.addEventListener("pointerdown", onDocPointerDown, true);
+  doc.addEventListener("keydown", onDocKeyDown, true);
+  doc.addEventListener("contextmenu", onDocContextMenu, true);
+  view.addEventListener("scroll", onScroll, { capture: true, passive: true });
+  view.addEventListener("resize", onResize);
+  boundDoc = doc;
+  boundView = view;
+  docBound = true;
+}
+function unbindDocListeners() {
+  if (!docBound) return;
+  boundDoc?.removeEventListener("pointerdown", onDocPointerDown, true);
+  boundDoc?.removeEventListener("keydown", onDocKeyDown, true);
+  boundDoc?.removeEventListener("contextmenu", onDocContextMenu, true);
+  boundView?.removeEventListener("scroll", onScroll, { capture: true });
+  boundView?.removeEventListener("resize", onResize);
+  boundDoc = null;
+  boundView = null;
+  docBound = false;
+}
+function pathHitsMenus(e) {
+  const path = e.composedPath();
+  for (const m of openStack) {
+    if (path.includes(m.surface)) return true;
+    const anchor = m.triggerAnchor;
+    if (anchor && path.includes(anchor)) return true;
+  }
+  return false;
+}
+function onDocPointerDown(e) {
+  if (!openStack.length) return;
+  if (!pathHitsMenus(e)) dismiss(e);
+}
+function onDocContextMenu(e) {
+  if (!openStack.length) return;
+  if (!pathHitsMenus(e)) dismiss(e);
+}
+function onScroll(e) {
+  if (!openStack.length) return;
+  const t = e.target;
+  for (const m of openStack) if (m.surface.contains(t)) return;
+  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 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.emitChange(false);
+    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();
+      });
+    }
+  }
+}
+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", "hover", "state"];
+  /** Shadow-internal popover surface — the only thing we ever mutate. */
+  surface;
+  listening = false;
+  _shown = false;
+  teardown;
+  // Submenu hover-intent timers.
+  openTimer;
+  closeTimer;
+  // Typeahead state (root navigation).
+  typeBuffer = "";
+  typeTimer;
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = `
+      :host { display: contents; }
+
+      /* The shadow root holds exactly one element \u2014 this surface div (with a
+         <slot> inside) \u2014 so a bare tag selector is unambiguous; no class
+         needed. Slotted light-DOM content isn't matched by shadow selectors. */
+      div {
+        position: fixed;
+        left: 0;
+        top: 0;
+        margin: 0;
+        box-sizing: border-box;
+        /* Do NOT set display here. Author styles beat the UA popover rule
+           (\`[popover]:not(:popover-open){display:none}\`) regardless of
+           specificity, so an unconditional \`display:flex\` would keep a CLOSED
+           popover laid out in the top layer \u2014 invisible (opacity 0) but still
+           hoverable/clickable. Set display only on the open state and let the
+           UA hide it when closed. */
+        flex-direction: column;
+        gap: 1px;
+        min-width: var(--menu-min-width, 88px);
+        max-width: calc(100vw - ${2 * MARGIN}px);
+        max-height: calc(100dvh - ${2 * MARGIN}px);
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        scrollbar-width: thin;
+        padding: var(--menu-padding, 4px);
+        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;
+      }
+      /* Open state. Closed \u2192 the UA's \`[popover]:not(:popover-open){display:none}\`
+         governs (so a closed menu is truly gone \u2014 not interactive). A keyframe
+         enter-fade is used instead of a transition + \`allow-discrete\`: the
+         latter proved fragile here (it could leave the surface stuck at
+         display:flex / opacity 0 after close). The fade starts at opacity 0, so
+         the first paint (before position() sets the transform) is invisible. */
+      div:popover-open {
+        display: flex;
+        animation: a-menu-enter 80ms ease-out;
+      }
+      @keyframes a-menu-enter { from { opacity: 0; } }
+    `;
+    this.surface = document.createElement("div");
+    this.surface.setAttribute("popover", "manual");
+    this.surface.append(document.createElement("slot"));
+    this.surface.addEventListener("mouseenter", () => {
+      if (this.isSubmenu) this.cancelCloseTimer();
+    });
+    this.surface.addEventListener("mouseleave", () => {
+      if (this.isSubmenu && this.isHover) this.scheduleClose();
+    });
+    this.surface.addEventListener("click", this.onSurfaceClick);
+    shadow.append(style, this.surface);
+  }
+  connectedCallback() {
+    const anchor = this.triggerAnchor;
+    if (anchor) {
+      anchorToMenu.set(anchor, this);
+      lazyObserver?.observe(anchor);
+    }
+    if (this.hasAttribute("state")) requestAnimationFrame(() => this.syncState());
+  }
+  disconnectedCallback() {
+    this.hide();
+    this.teardownListeners();
+    this.cancelOpenTimer();
+    this.cancelCloseTimer();
+    const anchor = this.triggerAnchor;
+    if (anchor && anchorToMenu.get(anchor) === this) {
+      anchorToMenu.delete(anchor);
+      lazyObserver?.unobserve(anchor);
+    }
+  }
+  attributeChangedCallback(name) {
+    if (name === "state") {
+      this.syncState();
+      return;
+    }
+    if (this.listening) {
+      this.teardownListeners();
+      this.setupListeners();
+    }
+  }
+  /** Apply the controlled `state` attribute to actual visibility, silently.
+   *  Absent → uncontrolled (no-op here; triggers manage it). */
+  syncState() {
+    if (!this.isConnected) return;
+    const v = this.getAttribute("state");
+    if (v === "opened" && !this._shown) this.show();
+    else if (v === "closed" && this._shown) this.hide();
+  }
+  /** Controlled iff the consumer is managing the `state` attribute. */
+  get isControlled() {
+    return this.hasAttribute("state");
+  }
+  /* --- realm-correct window / document (iframe playground safety) --- */
+  get view() {
+    return this.ownerDocument?.defaultView ?? window;
+  }
+  get doc() {
+    return this.ownerDocument ?? document;
+  }
+  /* --- config getters --- */
+  get isSubmenu() {
+    return this.hasAttribute("submenu");
+  }
+  get isContext() {
+    return this.hasAttribute("context");
+  }
+  get isCoord() {
+    return this.hasAttribute("coord");
+  }
+  get isHover() {
+    return this.hasAttribute("hover");
+  }
+  get offset() {
+    const n = parseInt(this.getAttribute("offset") ?? "", 10);
+    return Number.isFinite(n) ? n : MARGIN;
+  }
+  get placement() {
+    const p = this.getAttribute("placement");
+    if (p === "bottom-end" || p === "top-start" || p === "top-end") return p;
+    return "bottom-start";
+  }
+  /** Root menu: the previous element sibling is the trigger. Submenu: the
+   *  enclosing menu item. One deterministic rule per case — no ambiguity. */
+  get triggerAnchor() {
+    if (this.isSubmenu) return this.closest("a-menu-item");
+    return this.previousElementSibling;
+  }
+  /** For a submenu: the menu that contains its anchor item. */
+  get ownerMenu() {
+    if (!this.isSubmenu) return null;
+    return this.triggerAnchor?.closest("a-menu") ?? null;
+  }
+  get isOpen() {
+    return this._shown;
+  }
+  /* --- focusable items belonging to THIS menu (not nested submenus) --- */
+  /** Skip elements that can't actually take focus — `display:none` (incl. a
+   *  closed submenu's contents), `visibility:hidden`, `content-visibility`
+   *  skipped — so navigation never lands on a hidden node (programmatic
+   *  `.focus()` on one silently fails). `getClientRects` is the fallback where
+   *  `checkVisibility` isn't available. */
+  isVisible(el) {
+    const check = el.checkVisibility;
+    if (typeof check === "function") {
+      return check.call(el, { visibilityProperty: true, contentVisibilityAuto: true });
+    }
+    return el.getClientRects().length > 0;
+  }
+  focusableItems() {
+    return Array.from(this.querySelectorAll("a-menu-item")).filter(
+      (it) => it.closest("a-menu") === this && !it.hasAttribute("disabled") && this.isVisible(it)
+    );
+  }
+  /** Every tabbable element belonging to THIS menu (items + nested controls
+   *  like inputs / sliders / buttons), in DOM order, visible and enabled —
+   *  used to trap Tab within the open menu. Submenu contents are excluded
+   *  (their nearest `a-menu` is the submenu). */
+  focusables() {
+    const sel = 'a-menu-item, a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+    return Array.from(this.querySelectorAll(sel)).filter(
+      (el) => el.closest("a-menu") === this && !el.hasAttribute("disabled") && this.isVisible(el)
+    );
+  }
+  focusFirstItem() {
+    this.focusableItems()[0]?.focus();
+  }
+  /* ============================ open / close ============================ */
+  /** Public imperative API. Routes through the same intent path as the
+   *  triggers, so it emits `openchange` and respects controlled mode. */
+  open(opts) {
+    this.requestOpen(opts);
+  }
+  close(originEvent) {
+    this.requestClose(originEvent);
+  }
+  toggle(opts) {
+    if (this._shown) this.requestClose(opts?.originEvent);
+    else this.requestOpen(opts);
+  }
+  /** Dispatch the single `openchange` event (new state + old state). */
+  emitChange(next, opts) {
+    this.dispatchEvent(
+      new CustomEvent("openchange", {
+        detail: {
+          open: next,
+          previousState: this._shown ? "opened" : "closed",
+          coord: opts?.coord,
+          originEvent: opts?.originEvent
+        }
+      })
+    );
+  }
+  /** Intent to open (trigger / method / keyboard). Emits `openchange`; applies
+   *  the visibility itself ONLY when uncontrolled — a controlled menu waits for
+   *  the consumer to flip `state` (strict). */
+  requestOpen(opts) {
+    if (this._shown) {
+      this.show(opts?.coord, opts?.viaKeyboard, opts?.originEvent);
+      return;
+    }
+    this.emitChange(true, opts);
+    if (!this.isControlled) this.show(opts?.coord, opts?.viaKeyboard, opts?.originEvent);
+  }
+  /** Intent to close. Emits `openchange`; hides itself only when uncontrolled. */
+  requestClose(originEvent) {
+    if (!this._shown) return;
+    this.emitChange(false, { originEvent });
+    if (!this.isControlled) this.hide();
+  }
+  /** Apply OPEN to the DOM (no event) — used by uncontrolled intent and by the
+   *  controlled `state` sync. */
+  show(coord, viaKeyboard = false, _originEvent) {
+    if (this.isSubmenu) {
+      const parent = this.ownerMenu;
+      if (parent) {
+        const pidx = openStack.indexOf(parent);
+        if (pidx !== -1) {
+          for (let i = openStack.length - 1; i > pidx; i--) openStack[i]._doHide();
+          openStack.length = pidx + 1;
+        }
+      }
+    } else {
+      closeAll();
+    }
+    if (openStack.includes(this)) {
+      this.position(coord);
+      return;
+    }
+    const wasEmpty = openStack.length === 0;
+    this._doShow(coord, !wasEmpty);
+    openStack.push(this);
+    if (wasEmpty) bindDocListeners(this.doc, this.view);
+    if (viaKeyboard) this.focusFirstItem();
+  }
+  /** Apply CLOSE to the DOM (no event). Closes this menu and everything stacked
+   *  above it (its submenus). */
+  hide() {
+    const idx = openStack.indexOf(this);
+    if (idx === -1) {
+      if (this._shown) this._doHide();
+      return;
+    }
+    for (let i = openStack.length - 1; i >= idx; i--) openStack[i]._doHide();
+    openStack.length = idx;
+    if (openStack.length === 0) unbindDocListeners();
+  }
+  /** Shadow-only show: open the popover and position it. `instant` skips the
+   *  enter-fade and positions synchronously, so a menu opening over an
+   *  already-visible one snaps in without a blink. */
+  _doShow(coord, instant = false) {
+    if (this.surface.isConnected && !this._shown) this.surface.showPopover();
+    this._shown = true;
+    this.surface.style.animation = instant ? "none" : "";
+    this.position(coord, instant);
+  }
+  /** Shadow-only hide. */
+  _doHide() {
+    if (this.surface.isConnected && this._shown) this.surface.hidePopover();
+    this._shown = false;
+    this.cancelOpenTimer();
+    this.cancelCloseTimer();
+  }
+  /* ============================ positioning ============================ */
+  position(coord, sync = false) {
+    const run = () => {
+      if (!this._shown) return;
+      const view = this.view;
+      const vw = view.innerWidth;
+      const vh = view.innerHeight;
+      const surface = this.surface;
+      let left = MARGIN;
+      let top = MARGIN;
+      if (coord) {
+        surface.style.maxHeight = `${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;
+        left = Math.max(MARGIN, left);
+        top = coord[1];
+        if (top + box.height > vh - MARGIN) top = top - box.height;
+        top = Math.max(MARGIN, top);
+      } else if (this.isSubmenu) {
+        const it = this.triggerAnchor?.getBoundingClientRect();
+        if (!it) return;
+        surface.style.maxHeight = `${Math.max(MIN_HEIGHT, vh - 2 * MARGIN)}px`;
+        const box = surface.getBoundingClientRect();
+        left = it.right + this.offset;
+        if (left + box.width > vw - MARGIN) {
+          left = it.left - box.width - this.offset;
+        }
+        left = Math.max(MARGIN, left);
+        top = it.top - MARGIN;
+        if (top + box.height > vh - MARGIN) top = vh - box.height - MARGIN;
+        top = Math.max(MARGIN, top);
+      } else {
+        const a = this.triggerAnchor?.getBoundingClientRect();
+        if (!a) return;
+        const p = this.placement;
+        const spaceBelow = vh - a.bottom - 2 * MARGIN;
+        const spaceAbove = a.top - 2 * MARGIN;
+        let onTop = p.startsWith("top");
+        const natural = surface.scrollHeight;
+        if (onTop && spaceAbove < natural && spaceBelow > spaceAbove) onTop = false;
+        else if (!onTop && spaceBelow < natural && spaceAbove > spaceBelow) onTop = true;
+        const space = onTop ? spaceAbove : spaceBelow;
+        surface.style.maxHeight = `${Math.max(MIN_HEIGHT, Math.floor(space))}px`;
+        const box = surface.getBoundingClientRect();
+        left = p.endsWith("end") ? a.right - box.width : a.left;
+        if (left + box.width > vw - MARGIN) left = vw - box.width - MARGIN;
+        left = Math.max(MARGIN, left);
+        top = onTop ? a.top - box.height - this.offset : a.bottom + this.offset;
+        top = Math.max(MARGIN, top);
+      }
+      surface.style.transform = `translate(${Math.round(left)}px, ${Math.round(top)}px)`;
+    };
+    if (sync) run();
+    else requestAnimationFrame(run);
+  }
+  /* ====================== click / close contract ====================== */
+  /**
+   * Fully declarative close contract — decided synchronously from the DOM, so
+   * it never depends on the consumer's click handler (which in a worker-thread
+   * runtime can't `preventDefault` on the UI thread). The menu never
+   * stops/prevents the click, so the consumer's selection handler always runs.
+   *
+   * Walk the click's composedPath outward to the surface; the NEAREST marker
+   * wins:
+   *   - `data-menu-open`  → keep the menu open (a Done button can still close
+   *                          from inside such a region — it's hit first).
+   *   - `a-menu-item` (a choice) or `data-menu-close` → close the menu.
+   *   - nothing → keep open (plain custom content doesn't dismiss).
+   */
+  onSurfaceClick = (e) => {
+    for (const node of e.composedPath()) {
+      if (node === this.surface) break;
+      if (!(node instanceof Element)) continue;
+      if (node.hasAttribute("data-menu-open")) return;
+      if (node instanceof AMenuItemElement) {
+        if (node.hasAttribute("disabled")) {
+          e.preventDefault();
+          return;
+        }
+        if (node.hasAttribute("submenu")) return;
+        const role = node.getAttribute("role");
+        if (role === "menuitemcheckbox" || role === "menuitemradio") return;
+        return this.closeSystem(e);
+      }
+      if (node.hasAttribute("data-menu-close")) return this.closeSystem(e);
+    }
+  };
+  /** Close the whole open menu system from the root down. */
+  closeSystem(e) {
+    const root = openStack[0] ?? this;
+    root.requestClose(e);
+  }
+  /* ============================ keyboard ============================ */
+  /** Called by the coordinator on the topmost open menu. Handles navigation;
+   *  Enter / Space activation is handled by a-menu-item's own global keydown
+   *  (which synthesizes a click → routed through onSurfaceClick). */
+  handleKey(e) {
+    const active = this.doc.activeElement;
+    if (e.key === "Escape") {
+      e.preventDefault();
+      e.stopPropagation();
+      const anchor = this.triggerAnchor;
+      this.requestClose(e);
+      anchor?.focus();
+      return;
+    }
+    if (e.key === "Tab") {
+      const f = this.focusables();
+      if (!f.length) return;
+      e.preventDefault();
+      const i = active ? f.indexOf(active) : -1;
+      const next = e.shiftKey ? i <= 0 ? f.length - 1 : i - 1 : i === -1 || i === f.length - 1 ? 0 : i + 1;
+      f[next]?.focus();
+      return;
+    }
+    const within = active?.closest("a-menu") === this;
+    if (within && !(active instanceof AMenuItemElement)) return;
+    const items = this.focusableItems();
+    const idx = active ? items.indexOf(active) : -1;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        items[idx < 0 ? 0 : (idx + 1) % items.length]?.focus();
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        items[idx <= 0 ? items.length - 1 : idx - 1]?.focus();
+        break;
+      case "Home":
+        e.preventDefault();
+        items[0]?.focus();
+        break;
+      case "End":
+        e.preventDefault();
+        items[items.length - 1]?.focus();
+        break;
+      case "ArrowRight": {
+        const sub = this.submenuOf(active);
+        if (sub) {
+          e.preventDefault();
+          sub.requestOpen({ viaKeyboard: true });
+        }
+        break;
+      }
+      case "ArrowLeft":
+        if (this.isSubmenu) {
+          e.preventDefault();
+          const anchorItem = this.triggerAnchor;
+          this.requestClose(e);
+          anchorItem?.focus();
+        }
+        break;
+      default:
+        if (e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) {
+          this.typeahead(e.key, items);
+        }
+    }
+  }
+  submenuOf(item) {
+    if (!item || !(item instanceof AMenuItemElement) || !item.hasAttribute("submenu")) return null;
+    return item.querySelector("a-menu");
+  }
+  typeahead(ch, items) {
+    this.typeBuffer += ch.toLowerCase();
+    clearTimeout(this.typeTimer);
+    this.typeTimer = setTimeout(() => this.typeBuffer = "", TYPEAHEAD_RESET);
+    const match = items.find((it) => (it.textContent ?? "").trim().toLowerCase().startsWith(this.typeBuffer));
+    match?.focus();
+  }
+  /* ====================== trigger listener wiring ====================== */
+  setupListeners() {
+    if (this.listening) return;
+    const anchor = this.triggerAnchor;
+    if (!anchor) {
+      this.listening = true;
+      return;
+    }
+    if (this.isSubmenu) {
+      const onClick = (e) => this.toggle({ originEvent: e });
+      anchor.addEventListener("click", onClick);
+      let onEnter;
+      let onLeave;
+      if (this.isHover) {
+        onEnter = () => this.scheduleOpen();
+        onLeave = () => this.scheduleClose();
+        anchor.addEventListener("mouseenter", onEnter);
+        anchor.addEventListener("mouseleave", onLeave);
+      }
+      this.teardown = () => {
+        anchor.removeEventListener("click", onClick);
+        if (onEnter) anchor.removeEventListener("mouseenter", onEnter);
+        if (onLeave) anchor.removeEventListener("mouseleave", onLeave);
+        this.listening = false;
+      };
+    } else if (this.isContext) {
+      const onContext = (e) => {
+        e.preventDefault();
+        this.requestOpen({ coord: [e.clientX, e.clientY], originEvent: e });
+      };
+      anchor.addEventListener("contextmenu", onContext);
+      this.teardown = () => {
+        anchor.removeEventListener("contextmenu", onContext);
+        this.listening = false;
+      };
+    } else {
+      const onClick = (e) => {
+        const viaKeyboard = e.detail === 0;
+        const coord = this.isCoord ? [e.clientX, e.clientY] : void 0;
+        if (this._shown) this.requestClose(e);
+        else this.requestOpen({ coord, viaKeyboard, originEvent: e });
+      };
+      anchor.addEventListener("click", onClick);
+      this.teardown = () => {
+        anchor.removeEventListener("click", onClick);
+        this.listening = false;
+      };
+    }
+    this.listening = true;
+  }
+  teardownListeners() {
+    this.teardown?.();
+    this.teardown = void 0;
+  }
+  /* --- submenu hover-intent timers --- */
+  scheduleOpen() {
+    this.cancelCloseTimer();
+    if (this._shown) return;
+    this.cancelOpenTimer();
+    this.openTimer = setTimeout(() => {
+      this.openTimer = void 0;
+      this.requestOpen();
+    }, SUBMENU_OPEN_DELAY);
+  }
+  scheduleClose() {
+    this.cancelOpenTimer();
+    if (!this._shown) return;
+    this.cancelCloseTimer();
+    this.closeTimer = setTimeout(() => {
+      this.closeTimer = void 0;
+      this.requestClose();
+    }, SUBMENU_CLOSE_DELAY);
+  }
+  cancelOpenTimer() {
+    if (this.openTimer !== void 0) {
+      clearTimeout(this.openTimer);
+      this.openTimer = void 0;
+    }
+  }
+  cancelCloseTimer() {
+    if (this.closeTimer !== void 0) {
+      clearTimeout(this.closeTimer);
+      this.closeTimer = void 0;
+    }
+  }
+}
+function register_a_menu() {
+  if (typeof customElements === "undefined") return;
+  if (!customElements.get("a-menu")) {
+    customElements.define("a-menu", AMenuElement);
+  }
+}
+register_a_menu();
+export {
+  AMenuElement,
+  register_a_menu
+};