@editora/ui-core 0.1.9 → 0.1.12

package/dist/menu.esm.js

@@ -0,0 +1,743 @@
+import { E as _ } from "./ElementBase-909688f3.mjs";
+import { c as v } from "./portal-1cf392ca.mjs";
+import { c as y } from "./dismissable-layer-9c7e6b58.mjs";
+import { a as x } from "./positioner-fbd61bf1.mjs";
+import { c as A } from "./menu-item-styles-27fdbac4.mjs";
+function g(r) {
+  return r === "top" || r === "left" || r === "right" ? r : "bottom";
+}
+function E(r) {
+  return r === "sm" || r === "1" || r === "compact" ? "sm" : r === "lg" || r === "3" || r === "comfortable" ? "lg" : "md";
+}
+function k(r) {
+  return !r || r === "default" ? null : r === "none" ? "0px" : r === "sm" ? "8px" : r === "md" ? "12px" : r === "lg" ? "16px" : r === "full" ? "999px" : r === "square" ? "6px" : r === "soft" ? "14px" : /^\d+(\.\d+)?$/.test(r) ? `${r}px` : /^\d+(\.\d+)?(px|rem|em|%)$/.test(r) ? r : null;
+}
+function l(r, e) {
+  return r.getAttribute(e) || "";
+}
+function h(r, e) {
+  if (r == null)
+    return e;
+  const t = String(r).toLowerCase();
+  return t !== "false" && t !== "0";
+}
+function u() {
+  return [
+    '[role="menuitem"]',
+    '[role="menuitemcheckbox"]',
+    '[role="menuitemradio"]',
+    ".item",
+    "[data-menu-item]"
+  ].join(", ");
+}
+function m(r) {
+  return r.hasAttribute("disabled") || r.getAttribute("aria-disabled") === "true" || !!r.disabled;
+}
+function p(r) {
+  const e = typeof r.composedPath == "function" ? r.composedPath() : [];
+  for (const i of e)
+    if (i instanceof HTMLElement && i.matches(u()))
+      return i;
+  const t = r.target;
+  return t instanceof HTMLElement ? t.closest(u()) : null;
+}
+const w = /* @__PURE__ */ new Set(["variant", "density", "shape", "elevation", "tone", "size", "radius"]), S = [
+  "--ui-menu-bg",
+  "--ui-menu-color",
+  "--ui-menu-border-color",
+  "--ui-menu-border",
+  "--ui-menu-shadow",
+  "--ui-menu-radius",
+  "--ui-menu-padding",
+  "--ui-menu-min-width",
+  "--ui-menu-ring",
+  "--ui-menu-backdrop",
+  "--ui-menu-z",
+  "--ui-menu-item-radius",
+  "--ui-menu-item-gap",
+  "--ui-menu-item-min-height",
+  "--ui-menu-item-pad-y",
+  "--ui-menu-item-pad-x",
+  "--ui-menu-item-font-size",
+  "--ui-menu-item-line-height",
+  "--ui-menu-separator-margin",
+  "--ui-menu-item-hover-bg",
+  "--ui-menu-item-active-color"
+], C = `
+  :host {
+    --ui-menu-bg: var(--base-menu-bg, var(--color-panel-solid, var(--ui-color-surface, var(--ui-surface, #ffffff))));
+    --ui-menu-color: var(--ui-color-text, var(--ui-text, #0f172a));
+    --ui-menu-border-color: color-mix(in srgb, var(--ui-color-border, var(--ui-border, rgba(15, 23, 42, 0.14))) 86%, transparent);
+    --ui-menu-border: var(--base-menu-border, 1px solid var(--ui-menu-border-color));
+    --ui-menu-shadow: var(--base-menu-shadow, var(--shadow-5, none));
+    --ui-menu-radius: var(--base-menu-radius, var(--ui-radius, 4px));
+    --ui-menu-padding: var(--base-menu-content-padding, 8px);
+    --ui-menu-min-width: var(--base-menu-min-width, 232px);
+    --ui-menu-ring: var(--ui-color-primary, var(--ui-primary, #2563eb));
+    --ui-menu-backdrop: none;
+    --ui-menu-z: 1560;
+    --ui-menu-item-radius: var(--base-menu-item-radius, calc(var(--ui-menu-radius) - 2px));
+    --ui-menu-item-gap: var(--base-menu-item-gap, 10px);
+    --ui-menu-item-min-height: var(--base-menu-item-height, 36px);
+    --ui-menu-item-pad-y: var(--base-menu-item-padding-y, 8px);
+    --ui-menu-item-pad-x: var(--base-menu-item-padding-x, 12px);
+    --ui-menu-item-font-size: var(--base-menu-item-font-size, var(--ui-default-font-size, 14px));
+    --ui-menu-item-font-weight: 400;
+    --ui-menu-item-line-height: var(--base-menu-item-line-height, var(--ui-default-line-height, 20px));
+    --ui-menu-separator-margin: var(--base-menu-separator-margin, 6px 10px);
+    --ui-menu-item-hover-bg: color-mix(in srgb, var(--ui-menu-ring) 12%, transparent);
+    --ui-menu-item-active-color: inherit;
+    color-scheme: light dark;
+    display: inline-block;
+    position: relative;
+  }
+
+  .trigger {
+    display: inline-flex;
+    width: fit-content;
+  }
+
+  .source-slot {
+    display: none !important;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: 0.62;
+  }
+`, I = `
+  .menu {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    min-width: var(--ui-menu-min-width, 232px);
+    max-width: min(360px, calc(100vw - 16px));
+    max-height: min(440px, calc(100vh - 16px));
+    overflow: auto;
+    isolation: isolate;
+    padding: var(--ui-menu-padding, 8px);
+    box-sizing: border-box;
+    border: var(--ui-menu-border);
+    border-radius: var(--ui-menu-radius, 4px);
+    background: var(--ui-menu-bg, #fff);
+    color: var(--ui-menu-color, #0f172a);
+    box-shadow: var(--ui-menu-shadow);
+    opacity: 0;
+    transform: translateY(4px) scale(0.985);
+    transform-origin: top center;
+    animation: ui-menu-enter 150ms cubic-bezier(0.2, 0.9, 0.24, 1) forwards;
+    outline: none;
+    will-change: transform, opacity;
+    z-index: var(--ui-menu-z, 1560);
+  }
+
+  .menu[data-placement="top"] {
+    transform-origin: bottom center;
+  }
+
+  .menu[data-placement="left"] {
+    transform-origin: center right;
+  }
+
+  .menu[data-placement="right"] {
+    transform-origin: center left;
+  }
+
+  .menu[data-variant="flat"] {
+    box-shadow: none;
+  }
+
+  .menu[data-variant="soft"] {
+    --ui-menu-bg: color-mix(in srgb, var(--base-menu-bg, var(--color-panel-solid, #ffffff)) 94%, var(--accent-surface, transparent));
+  }
+
+  .menu[data-variant="solid"] {
+    --ui-menu-item-hover-bg: color-mix(in srgb, var(--ui-menu-ring) 12%, transparent);
+    --ui-menu-item-active-color: var(--accent-12, var(--ui-menu-color, #0f172a));
+  }
+
+  .menu[data-variant="outline"] {
+    box-shadow: none;
+    --ui-menu-bg: var(--base-menu-bg, var(--color-panel-solid, #ffffff));
+    --ui-menu-item-hover-bg: color-mix(in srgb, var(--ui-menu-ring) 8%, transparent);
+  }
+
+  .menu[data-variant="contrast"] {
+    --ui-menu-bg: #0f172a;
+    --ui-menu-color: #f8fafc;
+    --ui-menu-border-color: #334155;
+    --ui-menu-ring: #93c5fd;
+    --ui-menu-item-hover-bg: color-mix(in srgb, #ffffff 12%, transparent);
+  }
+
+  .menu[data-size="sm"],
+  .menu[data-density="compact"] {
+    --ui-menu-padding: 4px;
+    --ui-menu-item-radius: 6px;
+    --ui-menu-item-gap: 8px;
+    --ui-menu-item-min-height: 32px;
+    --ui-menu-item-pad-y: 6px;
+    --ui-menu-item-pad-x: 8px;
+    --ui-menu-item-font-size: 13px;
+    --ui-menu-item-line-height: 18px;
+    --ui-menu-separator-margin: 4px 8px;
+  }
+
+  .menu[data-size="lg"],
+  .menu[data-density="comfortable"] {
+    --ui-menu-padding: 8px;
+    --ui-menu-item-radius: 10px;
+    --ui-menu-item-gap: 12px;
+    --ui-menu-item-min-height: 40px;
+    --ui-menu-item-pad-y: 9px;
+    --ui-menu-item-pad-x: 12px;
+    --ui-menu-item-font-size: 15px;
+    --ui-menu-item-line-height: 22px;
+    --ui-menu-separator-margin: 8px 12px;
+  }
+
+  .menu[data-elevation="none"] {
+    box-shadow: none;
+  }
+
+  .menu[data-elevation="low"] {
+    --ui-menu-shadow:
+      0 14px 30px rgba(2, 6, 23, 0.17),
+      0 2px 7px rgba(2, 6, 23, 0.08);
+  }
+
+  .menu[data-elevation="high"] {
+    --ui-menu-shadow:
+      0 32px 72px rgba(2, 6, 23, 0.28),
+      0 6px 18px rgba(2, 6, 23, 0.14);
+  }
+
+  .menu[data-tone="danger"] {
+    --ui-menu-ring: #ef4444;
+    --ui-menu-item-hover-bg: color-mix(in srgb, #ef4444 12%, transparent);
+    --ui-menu-item-active-color: inherit;
+  }
+
+  .menu[data-tone="success"] {
+    --ui-menu-ring: #16a34a;
+    --ui-menu-item-hover-bg: color-mix(in srgb, #16a34a 12%, transparent);
+    --ui-menu-item-active-color: inherit;
+  }
+
+  .menu[data-tone="warning"] {
+    --ui-menu-ring: #d97706;
+    --ui-menu-item-hover-bg: color-mix(in srgb, #d97706 12%, transparent);
+    --ui-menu-item-active-color: inherit;
+  }
+
+  .menu[data-tone="info"] {
+    --ui-menu-ring: var(--ui-color-primary, var(--ui-primary, #2563eb));
+    --ui-menu-item-hover-bg: color-mix(in srgb, var(--ui-color-primary, var(--ui-primary, #2563eb)) 12%, transparent);
+    --ui-menu-item-active-color: inherit;
+  }
+
+  .menu[data-tone="neutral"] {
+    --ui-menu-ring: color-mix(in srgb, var(--ui-color-muted, #64748b) 60%, var(--ui-color-text, #0f172a));
+    --ui-menu-item-hover-bg: color-mix(in srgb, var(--ui-color-muted, #64748b) 12%, transparent);
+    --ui-menu-item-active-color: inherit;
+  }
+
+  ${A({
+  scopes: [".menu"],
+  prefix: "--ui-menu",
+  shortcutSelectors: [".shortcut", ".meta"],
+  activeStateSelectors: [
+    '.item[data-active="true"]',
+    '[role="menuitem"][data-active="true"]',
+    '[role="menuitemcheckbox"][data-active="true"]',
+    '[role="menuitemradio"][data-active="true"]',
+    '[data-menu-item][data-active="true"]'
+  ]
+})}
+
+  .menu[data-variant="solid"] [role="menuitem"]:hover,
+  .menu[data-variant="solid"] [role="menuitem"]:focus-visible,
+  .menu[data-variant="solid"] [role="menuitemcheckbox"]:hover,
+  .menu[data-variant="solid"] [role="menuitemcheckbox"]:focus-visible,
+  .menu[data-variant="solid"] [role="menuitemradio"]:hover,
+  .menu[data-variant="solid"] [role="menuitemradio"]:focus-visible,
+  .menu[data-variant="solid"] .item:hover,
+  .menu[data-variant="solid"] .item:focus-visible,
+  .menu[data-variant="solid"] [data-menu-item]:hover,
+  .menu[data-variant="solid"] [data-menu-item]:focus-visible,
+  .menu[data-variant="solid"] [role="menuitem"][data-active="true"],
+  .menu[data-variant="solid"] [role="menuitemcheckbox"][data-active="true"],
+  .menu[data-variant="solid"] [role="menuitemradio"][data-active="true"],
+  .menu[data-variant="solid"] .item[data-active="true"],
+  .menu[data-variant="solid"] [data-menu-item][data-active="true"] {
+    background: color-mix(in srgb, var(--ui-menu-ring) 12%, transparent);
+    color: var(--accent-12, var(--ui-menu-color, #0f172a));
+  }
+
+  .menu .empty-state {
+    padding: 10px 12px;
+    font: 500 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, Helvetica, Arial, sans-serif;
+    letter-spacing: 0.01em;
+    opacity: 0.72;
+  }
+
+  @keyframes ui-menu-enter {
+    from { opacity: 0; transform: translateY(4px) scale(0.985); }
+    to { opacity: 1; transform: translateY(0) scale(1); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .menu {
+      animation: none;
+      opacity: 1;
+      transform: none;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .menu {
+      border-width: 2px;
+      box-shadow: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .menu {
+      forced-color-adjust: none;
+      border-color: CanvasText;
+      background: Canvas;
+      color: CanvasText;
+      box-shadow: none;
+    }
+
+    .menu [role="menuitem"],
+    .menu [role="menuitemcheckbox"],
+    .menu [role="menuitemradio"],
+    .menu .item,
+    .menu [data-menu-item],
+    .menu .empty-state {
+      border: 1px solid transparent;
+      background: Canvas;
+      color: CanvasText;
+    }
+
+    .menu [role="menuitem"]:hover,
+    .menu [role="menuitem"]:focus-visible,
+    .menu [role="menuitemcheckbox"]:hover,
+    .menu [role="menuitemcheckbox"]:focus-visible,
+    .menu [role="menuitemradio"]:hover,
+    .menu [role="menuitemradio"]:focus-visible,
+    .menu .item:hover,
+    .menu .item:focus-visible,
+    .menu [data-menu-item]:hover,
+    .menu [data-menu-item]:focus-visible {
+      background: Highlight;
+      color: HighlightText;
+      border-color: Highlight;
+      box-shadow: none;
+    }
+  }
+`;
+class T extends _ {
+  constructor() {
+    super(), this._isOpen = !1, this._portalEl = null, this._positioner = null, this._dismissableLayer = null, this._restoreFocusEl = null, this._typeaheadBuffer = "", this._typeaheadTimer = null, this._globalListenersBound = !1, this._menuClickHandler = null, this._menuId = `ui-menu-${Math.random().toString(36).slice(2, 10)}`, this._onHostClick = this._onHostClick.bind(this), this._onDocumentKeyDown = this._onDocumentKeyDown.bind(this), this._onDocumentScroll = this._onDocumentScroll.bind(this), this._onSlotChange = this._onSlotChange.bind(this);
+  }
+  static get observedAttributes() {
+    return [
+      "open",
+      "disabled",
+      "placement",
+      "variant",
+      "size",
+      "density",
+      "radius",
+      "shape",
+      "elevation",
+      "tone",
+      "close-on-select",
+      "close-on-scroll",
+      "typeahead"
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("click", this._onHostClick), this.root.addEventListener("slotchange", this._onSlotChange), this._syncOpenState(), this._syncTriggerA11y();
+  }
+  disconnectedCallback() {
+    this.removeEventListener("click", this._onHostClick), this.root.removeEventListener("slotchange", this._onSlotChange), this._unbindGlobalListeners(), this._teardownPortal(), super.disconnectedCallback();
+  }
+  attributeChangedCallback(e, t, i) {
+    if (t !== i) {
+      if (e === "open") {
+        this._syncOpenState();
+        return;
+      }
+      if (!(e === "close-on-select" || e === "close-on-scroll" || e === "typeahead")) {
+        if (e === "disabled") {
+          this.hasAttribute("disabled") && this.close(), this._syncTriggerA11y();
+          return;
+        }
+        if (e === "placement" && this._isOpen) {
+          this._rebuildPositioner();
+          return;
+        }
+        w.has(e) && this._isOpen && this._syncPortalVisualState();
+      }
+    }
+  }
+  open() {
+    this.hasAttribute("disabled") || this.setAttribute("open", "");
+  }
+  close() {
+    this.removeAttribute("open");
+  }
+  toggle() {
+    this.hasAttribute("open") ? this.close() : this.open();
+  }
+  get closeOnSelect() {
+    return h(this.getAttribute("close-on-select"), !0);
+  }
+  set closeOnSelect(e) {
+    this.setAttribute("close-on-select", e ? "true" : "false");
+  }
+  get closeOnScroll() {
+    return h(this.getAttribute("close-on-scroll"), !0);
+  }
+  set closeOnScroll(e) {
+    this.setAttribute("close-on-scroll", e ? "true" : "false");
+  }
+  get typeahead() {
+    return h(this.getAttribute("typeahead"), !0);
+  }
+  set typeahead(e) {
+    this.setAttribute("typeahead", e ? "true" : "false");
+  }
+  _getTrigger() {
+    return this.querySelector('[slot="trigger"]');
+  }
+  _getContentSource() {
+    return this.querySelector('[slot="content"]');
+  }
+  _getItemSources() {
+    return Array.from(this.querySelectorAll('[slot="item"]'));
+  }
+  _onSlotChange() {
+    this._isOpen && this._rebuildPortalContent();
+  }
+  _syncTriggerA11y() {
+    const e = this._getTrigger();
+    if (e) {
+      if (e.setAttribute("aria-haspopup", "menu"), e.setAttribute("aria-expanded", this._isOpen ? "true" : "false"), e.setAttribute("aria-controls", this._menuId), this.hasAttribute("disabled")) {
+        e.setAttribute("aria-disabled", "true"), e.setAttribute("tabindex", "-1");
+        return;
+      }
+      e.getAttribute("aria-disabled") === "true" && e.removeAttribute("aria-disabled"), e.getAttribute("tabindex") === "-1" && e.removeAttribute("tabindex");
+    }
+  }
+  _syncOpenState() {
+    var i;
+    const e = this.hasAttribute("open") && !this.hasAttribute("disabled");
+    if (e === this._isOpen) {
+      this._syncTriggerA11y(), e && !this._portalEl ? this._mountPortal() : e && ((i = this._positioner) == null || i.update());
+      return;
+    }
+    if (this._isOpen = e, this._syncTriggerA11y(), e) {
+      this._bindGlobalListeners(), this._restoreFocusEl = document.activeElement, this._mountPortal(), this.dispatchEvent(new CustomEvent("open", { bubbles: !0 })), this.dispatchEvent(new CustomEvent("change", { bubbles: !0, detail: { open: !0 } })), requestAnimationFrame(() => this._focusFirstItem());
+      return;
+    }
+    this._unbindGlobalListeners(), this._teardownPortal(), this.dispatchEvent(new CustomEvent("close", { bubbles: !0 })), this.dispatchEvent(new CustomEvent("change", { bubbles: !0, detail: { open: !1 } }));
+    const t = this._getTrigger();
+    if (t)
+      try {
+        t.focus({ preventScroll: !0 });
+      } catch {
+        t.focus();
+      }
+    this._restoreFocusEl = null;
+  }
+  _bindGlobalListeners() {
+    this._globalListenersBound || (document.addEventListener("keydown", this._onDocumentKeyDown), document.addEventListener("scroll", this._onDocumentScroll, !0), this._globalListenersBound = !0);
+  }
+  _unbindGlobalListeners() {
+    this._globalListenersBound && (document.removeEventListener("keydown", this._onDocumentKeyDown), document.removeEventListener("scroll", this._onDocumentScroll, !0), this._globalListenersBound = !1);
+  }
+  _clearActiveState() {
+    this._portalEl && this._portalEl.querySelectorAll(u()).forEach((e) => e.removeAttribute("data-active"));
+  }
+  _queryItems() {
+    return this._portalEl ? Array.from(this._portalEl.querySelectorAll(u())).filter((e) => !m(e)) : [];
+  }
+  _focusItem(e) {
+    if (e) {
+      this._clearActiveState(), e.setAttribute("data-active", "true");
+      try {
+        e.focus({ preventScroll: !0 });
+      } catch {
+        e.focus();
+      }
+      typeof e.scrollIntoView == "function" && e.scrollIntoView({ block: "nearest" });
+    }
+  }
+  _focusFirstItem() {
+    this._focusItem(this._queryItems()[0] || null);
+  }
+  _focusLastItem() {
+    const e = this._queryItems();
+    this._focusItem(e[e.length - 1] || null);
+  }
+  _moveFocus(e) {
+    const t = this._queryItems();
+    if (!t.length)
+      return;
+    const i = document.activeElement, n = i ? t.findIndex((o) => o === i || o.contains(i)) : -1, a = n === -1 ? 0 : Math.max(0, Math.min(t.length - 1, n + e));
+    this._focusItem(t[a] || null);
+  }
+  _resetTypeahead() {
+    this._typeaheadBuffer = "", this._typeaheadTimer != null && (window.clearTimeout(this._typeaheadTimer), this._typeaheadTimer = null);
+  }
+  _isTypeaheadKey(e) {
+    return e.ctrlKey || e.metaKey || e.altKey ? !1 : e.key.length === 1 && /\S/.test(e.key);
+  }
+  _handleTypeahead(e) {
+    if (!this.typeahead || !this._isTypeaheadKey(e))
+      return !1;
+    this._typeaheadBuffer = `${this._typeaheadBuffer}${e.key.toLowerCase()}`.slice(0, 24), this._typeaheadTimer != null && window.clearTimeout(this._typeaheadTimer), this._typeaheadTimer = window.setTimeout(() => this._resetTypeahead(), 420);
+    const t = document.activeElement, i = this._queryItems();
+    if (!i.length)
+      return !1;
+    const n = t ? i.findIndex((s) => s === t || s.contains(t)) : -1, o = (n >= 0 ? [...i.slice(n + 1), ...i.slice(0, n + 1)] : i).find((s) => (s.textContent || "").trim().toLowerCase().startsWith(this._typeaheadBuffer));
+    return o ? (e.preventDefault(), this._focusItem(o), !0) : !1;
+  }
+  _applySelectionBehavior(e) {
+    const t = e.getAttribute("role");
+    if (t === "menuitemcheckbox") {
+      const n = e.getAttribute("aria-checked") === "true";
+      e.setAttribute("aria-checked", n ? "false" : "true"), e.setAttribute("data-state", n ? "unchecked" : "checked");
+      return;
+    }
+    if (t !== "menuitemradio" || !this._portalEl)
+      return;
+    const i = e.getAttribute("data-group") || e.getAttribute("name") || "";
+    this._portalEl.querySelectorAll('[role="menuitemradio"]').forEach((n) => {
+      const a = n.getAttribute("data-group") || n.getAttribute("name") || "";
+      i && a !== i || (n.setAttribute("aria-checked", n === e ? "true" : "false"), n.setAttribute("data-state", n === e ? "checked" : "unchecked"));
+    });
+  }
+  _handleItemSelect(e) {
+    var n;
+    this._applySelectionBehavior(e);
+    const t = e.getAttribute("data-index"), i = t != null && !Number.isNaN(Number(t)) ? Number(t) : void 0;
+    this.dispatchEvent(
+      new CustomEvent("select", {
+        bubbles: !0,
+        detail: {
+          index: i,
+          value: e.getAttribute("data-value") || e.getAttribute("value") || void 0,
+          label: e.getAttribute("aria-label") || ((n = e.textContent) == null ? void 0 : n.trim()) || void 0,
+          checked: e.getAttribute("aria-checked") === "true",
+          item: e
+        }
+      })
+    ), this.closeOnSelect ? this.close() : this._focusItem(e);
+  }
+  _buildLegacyItems(e) {
+    const t = this._getItemSources();
+    return t.forEach((i, n) => {
+      const a = i.cloneNode(!0);
+      a.removeAttribute("slot"), a.getAttribute("role") || a.setAttribute("role", "menuitem"), a.classList.contains("item") || a.classList.add("item"), a.hasAttribute("tabindex") || a.setAttribute("tabindex", "-1"), a.hasAttribute("data-index") || a.setAttribute("data-index", String(n)), e.appendChild(a);
+    }), t.length;
+  }
+  _hydrateMenuItems(e) {
+    const t = Array.from(e.querySelectorAll(u()));
+    return t.forEach((i, n) => {
+      i.getAttribute("role") || i.setAttribute("role", "menuitem"), i.hasAttribute("tabindex") || i.setAttribute("tabindex", "-1"), i.classList.contains("item") || i.classList.add("item"), i.hasAttribute("data-index") || i.setAttribute("data-index", String(n));
+    }), t.length;
+  }
+  _applyPortalTokens(e) {
+    const t = window.getComputedStyle(this);
+    S.forEach((i) => {
+      const n = t.getPropertyValue(i).trim();
+      n ? e.style.setProperty(i, n) : e.style.removeProperty(i);
+    });
+  }
+  _applyPortalVariantData(e) {
+    const t = l(this, "variant"), i = E(this.getAttribute("size") || this.getAttribute("density")), n = l(this, "density"), a = this.getAttribute("radius"), o = l(this, "shape"), s = l(this, "elevation"), c = l(this, "tone"), f = t === "default" || t === "" ? "" : t === "line" ? "outline" : t === "glass" ? "soft" : t;
+    f ? e.setAttribute("data-variant", f) : e.removeAttribute("data-variant"), i !== "md" ? e.setAttribute("data-size", i) : e.removeAttribute("data-size"), n && n !== "default" ? e.setAttribute("data-density", n) : e.removeAttribute("data-density"), s && s !== "default" ? e.setAttribute("data-elevation", s) : e.removeAttribute("data-elevation");
+    const b = c === "default" || c === "brand" || c === "" ? "" : c;
+    b ? e.setAttribute("data-tone", b) : e.removeAttribute("data-tone");
+    const d = k(a || o || null);
+    d ? (e.style.setProperty("--ui-menu-radius", d), e.style.setProperty("--ui-menu-item-radius", d === "999px" ? "999px" : `calc(${d} - 2px)`)) : (e.style.removeProperty("--ui-menu-radius"), e.style.removeProperty("--ui-menu-item-radius"));
+  }
+  _syncPortalVisualState() {
+    this._portalEl && (this._applyPortalTokens(this._portalEl), this._applyPortalVariantData(this._portalEl), this._portalEl.setAttribute("aria-hidden", "false"), this._portalEl.setAttribute("aria-busy", "false"), this._portalEl.style.display = "block", this._portalEl.style.visibility = "visible", this._portalEl.style.opacity = "1", this._portalEl.style.transform = "translateY(0px) scale(1)", this._portalEl.style.pointerEvents = "auto");
+  }
+  _attachMenuEvents(e) {
+    this._menuClickHandler = (t) => {
+      const i = p(t);
+      !i || m(i) || this._handleItemSelect(i);
+    }, e.addEventListener("click", this._menuClickHandler), e.addEventListener("mouseover", (t) => {
+      const i = p(t);
+      !i || m(i) || this._focusItem(i);
+    }), e.addEventListener("focusin", (t) => {
+      const i = p(t);
+      !i || m(i) || this._focusItem(i);
+    }), e.addEventListener("mouseleave", () => this._clearActiveState());
+  }
+  _buildPortalElement() {
+    const e = document.createElement("div");
+    e.className = "surface menu", e.id = this._menuId, e.setAttribute("part", "menu"), e.setAttribute("role", "menu"), e.setAttribute("tabindex", "-1"), e.setAttribute("aria-hidden", "false"), e.setAttribute("aria-busy", "false"), e.setAttribute("data-placement", g(this.getAttribute("placement")));
+    const t = document.createElement("style");
+    t.textContent = I, e.appendChild(t);
+    const i = this._getContentSource();
+    let n = 0;
+    if (i) {
+      const a = i.cloneNode(!0);
+      a.removeAttribute("slot"), e.appendChild(a);
+    } else
+      n = this._buildLegacyItems(e);
+    if (n = this._hydrateMenuItems(e) || n, n === 0) {
+      const a = document.createElement("div");
+      a.className = "empty-state", a.textContent = "No items", e.appendChild(a);
+    }
+    return this._applyPortalTokens(e), this._applyPortalVariantData(e), e.style.display = "block", e.style.visibility = "visible", e.style.opacity = "1", e.style.transform = "translateY(0px) scale(1)", e.style.pointerEvents = "auto", this._attachMenuEvents(e), e;
+  }
+  _rebuildPortalContent() {
+    if (!this._portalEl)
+      return;
+    const e = this._portalEl.parentElement;
+    if (!e)
+      return;
+    const t = this._portalEl, i = this._buildPortalElement();
+    e.replaceChild(i, t), this._portalEl = i, this._rebuildPositioner();
+  }
+  _rebuildPositioner() {
+    var t;
+    const e = this._getTrigger();
+    !this._portalEl || !e || ((t = this._positioner) == null || t.destroy(), this._positioner = x({
+      anchor: e,
+      floating: this._portalEl,
+      placement: g(this.getAttribute("placement")),
+      offset: 6,
+      flip: !0,
+      shift: !0,
+      fitViewport: !0,
+      observeScroll: !1
+    }));
+  }
+  _mountPortal() {
+    var t;
+    const e = this._getTrigger();
+    if (e) {
+      if (this._portalEl)
+        this._syncPortalVisualState();
+      else {
+        this._portalEl = this._buildPortalElement();
+        const i = v();
+        if (!i) {
+          this._portalEl = null;
+          return;
+        }
+        i.appendChild(this._portalEl);
+      }
+      this._rebuildPositioner(), (t = this._dismissableLayer) == null || t.destroy(), this._dismissableLayer = y({
+        node: this._portalEl,
+        trigger: e,
+        closeOnEscape: !0,
+        closeOnPointerOutside: !0,
+        onDismiss: () => this.close()
+      });
+    }
+  }
+  _teardownPortal() {
+    var e, t, i;
+    if ((e = this._dismissableLayer) == null || e.destroy(), this._dismissableLayer = null, (t = this._positioner) == null || t.destroy(), this._positioner = null, (i = this._portalEl) != null && i.parentElement)
+      try {
+        this._portalEl.parentElement.removeChild(this._portalEl);
+      } catch {
+      }
+    this._portalEl = null, this._menuClickHandler = null, this._resetTypeahead();
+  }
+  _isEventInsideTrigger(e) {
+    const t = this._getTrigger();
+    return !!t && e.composedPath().includes(t);
+  }
+  _isEventInsideMenu(e) {
+    return !!this._portalEl && e.composedPath().includes(this._portalEl);
+  }
+  _onHostClick(e) {
+    this.hasAttribute("disabled") || this._isEventInsideTrigger(e) && (e.preventDefault(), this.toggle());
+  }
+  _onDocumentScroll(e) {
+    if (!this._isOpen || !this.closeOnScroll)
+      return;
+    const t = typeof e.composedPath == "function" ? e.composedPath() : [];
+    this._portalEl && t.includes(this._portalEl) || this.close();
+  }
+  _onDocumentKeyDown(e) {
+    var t;
+    if (!this._isOpen) {
+      if (e.key !== "ArrowDown" && e.key !== "ArrowUp" || !this._isEventInsideTrigger(e))
+        return;
+      e.preventDefault(), this.open(), requestAnimationFrame(() => {
+        e.key === "ArrowUp" ? this._focusLastItem() : this._focusFirstItem();
+      });
+      return;
+    }
+    if (!(!this._isEventInsideTrigger(e) && !this._isEventInsideMenu(e)) && !this._handleTypeahead(e)) {
+      if (e.key === "Escape") {
+        e.preventDefault(), e.stopPropagation(), this.close();
+        return;
+      }
+      if (e.key === "ArrowDown") {
+        e.preventDefault(), this._moveFocus(1);
+        return;
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault(), this._moveFocus(-1);
+        return;
+      }
+      if (e.key === "Home") {
+        e.preventDefault(), this._focusFirstItem();
+        return;
+      }
+      if (e.key === "End") {
+        e.preventDefault(), this._focusLastItem();
+        return;
+      }
+      if (e.key === "Tab") {
+        this.close();
+        return;
+      }
+      if (e.key === "Enter" || e.key === " ") {
+        const i = document.activeElement;
+        if (!i || !((t = this._portalEl) != null && t.contains(i)))
+          return;
+        const n = i.closest(u());
+        if (!n || m(n))
+          return;
+        e.preventDefault(), this._handleItemSelect(n);
+      }
+    }
+  }
+  render() {
+    var e;
+    this.setContent(`
+      <style>${C}</style>
+      <div class="trigger" part="trigger">
+        <slot name="trigger"></slot>
+      </div>
+      <div class="source-slot" aria-hidden="true">
+        <slot name="item"></slot>
+        <slot name="content"></slot>
+      </div>
+      <slot></slot>
+    `), this._syncTriggerA11y(), this._isOpen && !this._portalEl ? this._mountPortal() : this._isOpen && ((e = this._positioner) == null || e.update());
+  }
+  shouldRenderOnAttributeChange() {
+    return !1;
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-menu") && customElements.define("ui-menu", T);
+export {
+  T as UIMenu
+};