@editora/ui-core 0.1.25 → 0.2.0

package/dist/menubar.esm.js

@@ -1,12 +1,13 @@
 import { E } from "./ElementBase-BeZT54Hj.mjs";
-import { b as k } from "./portal-bR42gHvG.mjs";
+import { b as k } from "./portal-DeaM1tYY.mjs";
 import { d as L } from "./collection-C7URGjEI.mjs";
 import { c as I } from "./dismissable-layer-BmPIoK80.mjs";
 import { r as g, s as v, f as C, m as y, g as x } from "./roving-focus-group-Dbm1Jko_.mjs";
-import { e as T } from "./positioner-D0VGxtYU.mjs";
+import { e as T } from "./positioner-BE8Nbho2.mjs";
+import { O as D, o as z, r as O, a as B } from "./overlay-motion-BX3dPLay.mjs";
 import "./listbox-hMVOhKHC.mjs";
-import { c as D } from "./menu-item-styles-IGSFLAHu.mjs";
-const z = ":scope > .submenu", B = [
+import { c as F } from "./menu-item-styles-IGSFLAHu.mjs";
+const R = ":scope > .submenu", M = [
   "--ui-color-primary",
   "--ui-color-primary-hover",
   "--ui-color-foreground-on-primary",
@@ -41,7 +42,7 @@ const z = ":scope > .submenu", B = [
   "--accent-surface",
   "--accent-indicator",
   "--accent-track"
-], F = [
+], $ = [
   { prefix: "--accent-", from: 1, to: 12 },
   { prefix: "--accent-a", from: 1, to: 12 },
   { prefix: "--gray-", from: 1, to: 12 },
@@ -51,17 +52,17 @@ const z = ":scope > .submenu", B = [
   { prefix: "--shadow-", from: 1, to: 6 },
   { prefix: "--radius-", from: 1, to: 6 }
 ];
-function O(n) {
+function H(n) {
   return n === "sm" || n === "1" || n === "compact" ? "sm" : n === "lg" || n === "3" || n === "comfortable" ? "lg" : "md";
 }
 function S(n) {
   return !n || n === "default" ? null : n === "none" || n === "square" ? "0px" : n === "sm" ? "8px" : n === "md" || n === "soft" ? "12px" : n === "lg" ? "16px" : n === "full" ? "999px" : /^\d+(\.\d+)?$/.test(n) ? `${n}px` : /^\d+(\.\d+)?(px|rem|em|%)$/.test(n) ? n : null;
 }
-const R = `
+const q = `
   :host {
     --ui-menubar-gap: var(--base-menubar-gap, 6px);
     --ui-menubar-padding: var(--base-menubar-padding, 6px);
-    --ui-menubar-radius: var(--base-menubar-radius, var(--ui-radius, 4px));
+    --ui-menubar-radius: var(--base-menubar-radius, var(--ui-radius, 6px));
     --ui-menubar-bg: var(--base-menubar-bg, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
     --ui-menubar-border: var(--base-menubar-border, 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 86%, transparent));
     --ui-menubar-shadow: var(--base-menubar-shadow, var(--shadow-2, none));
@@ -263,7 +264,9 @@ const R = `
       border-color: Highlight;
     }
   }
-`, M = `
+`, N = `
+  ${D}
+
   .ui-menubar-portal {
     position: absolute;
     pointer-events: auto;
@@ -286,12 +289,7 @@ const R = `
     background: var(--ui-menubar-panel-bg, #fff);
     color: var(--ui-menubar-panel-color, #0f172a);
     box-shadow: var(--ui-menubar-panel-shadow);
-    opacity: 0;
-    transform: translateY(5px) scale(0.984);
-    transform-origin: top left;
-    animation: ui-menubar-panel-enter 160ms cubic-bezier(0.2, 0.9, 0.24, 1) forwards;
     outline: none;
-    will-change: transform, opacity;
   }
 
   .ui-menubar-portal .surface[data-placement="top"] {
@@ -368,7 +366,7 @@ const R = `
       0 6px 18px rgba(2, 6, 23, 0.14);
   }
 
-  ${D({
+  ${F({
   scopes: [".ui-menubar-portal .content-host"],
   prefix: "--ui-menubar-panel",
   shortcutSelectors: [".shortcut", ".meta"],
@@ -487,25 +485,6 @@ const R = `
     opacity: 0.72;
   }
 
-  @keyframes ui-menubar-panel-enter {
-    from {
-      opacity: 0;
-      transform: translateY(5px) scale(0.984);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0) scale(1);
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .ui-menubar-portal .surface {
-      animation: none;
-      opacity: 1;
-      transform: none;
-    }
-  }
-
   @media (prefers-contrast: more) {
     .ui-menubar-portal .surface {
       border-width: 2px;
@@ -513,11 +492,11 @@ const R = `
     }
   }
 `;
-function $(n) {
+function V(n) {
   return n === "top" || n === "left" || n === "right" ? n : "bottom";
 }
-function H(n) {
-  const e = $(n);
+function K(n) {
+  const e = V(n);
   return e === "top" ? "top" : e === "left" ? "left" : e === "right" ? "right" : "bottom";
 }
 function f(n, e) {
@@ -542,9 +521,9 @@ function _(n) {
 }
 function w(n) {
   const e = typeof n.composedPath == "function" ? n.composedPath() : [];
-  for (const a of e)
-    if (a instanceof HTMLElement && a.matches(l()))
-      return a;
+  for (const r of e)
+    if (r instanceof HTMLElement && r.matches(l()))
+      return r;
   const t = n.target;
   return t instanceof HTMLElement ? t.closest(l()) : null;
 }
@@ -554,7 +533,7 @@ function m(n) {
 function b(n, e) {
   return n.getAttribute(e) || "";
 }
-class q extends E {
+class G extends E {
   constructor() {
     super(), this._items = [], this._contents = [], this._itemSlot = null, this._contentSlot = null, this._uid = Math.random().toString(36).slice(2, 8), this._ignoreSelected = !1, this._open = !1, this._portalEl = null, this._portalSurfaceEl = null, this._portalContentHostEl = null, this._positioner = null, this._dismissableLayer = null, this._panelForIndex = -1, this._typeaheadBuffer = "", this._typeaheadTimer = null, this._submenuRaf = null, this._globalListenersBound = !1, this._focusIndex = -1, this._onClick = this._onClick.bind(this), this._onKeyDown = this._onKeyDown.bind(this), this._onDocKeyDown = this._onDocKeyDown.bind(this), this._onDocScroll = this._onDocScroll.bind(this), this._onSlotChange = this._onSlotChange.bind(this), this._onMouseMove = this._onMouseMove.bind(this), this._onPanelPointerOver = this._onPanelPointerOver.bind(this), this._onPanelPointerLeave = this._onPanelPointerLeave.bind(this), this._onPanelFocusIn = this._onPanelFocusIn.bind(this);
   }
@@ -587,8 +566,8 @@ class q extends E {
   disconnectedCallback() {
     this.root.removeEventListener("click", this._onClick), this.root.removeEventListener("keydown", this._onKeyDown), this.root.removeEventListener("mousemove", this._onMouseMove), this._unbindGlobalListeners(), this._detachSlotListeners(), this._teardownPanel(), super.disconnectedCallback();
   }
-  attributeChangedCallback(e, t, a) {
-    if (t !== a && !(e === "selected" && this._ignoreSelected)) {
+  attributeChangedCallback(e, t, r) {
+    if (t !== r && !(e === "selected" && this._ignoreSelected)) {
       if ((e === "radius" || e === "shape") && this._syncHostVisualState(), this._syncBarA11y(), this._open && e === "placement") {
         this._rebuildPanel();
         return;
@@ -603,7 +582,7 @@ class q extends E {
   render() {
     const e = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal";
     this.setContent(`
-      <style>${R}</style>
+      <style>${q}</style>
       <div class="bar" part="bar" role="menubar" aria-orientation="${e}">
         <slot name="item"></slot>
       </div>
@@ -677,9 +656,9 @@ class q extends E {
   }
   _moveIndex(e, t) {
     if (this._items.length === 0) return -1;
-    const a = this._loopEnabled();
-    let r = e + t;
-    return r < 0 && (r = a ? this._items.length - 1 : 0), r >= this._items.length && (r = a ? 0 : this._items.length - 1), r;
+    const r = this._loopEnabled();
+    let a = e + t;
+    return a < 0 && (a = r ? this._items.length - 1 : 0), a >= this._items.length && (a = r ? 0 : this._items.length - 1), a;
   }
   _syncState() {
     this._syncStructure();
@@ -695,11 +674,11 @@ class q extends E {
       else {
         this._unbindGlobalListeners();
         const t = this._panelForIndex >= 0 ? this._panelForIndex : this._selectedIndex();
-        this._teardownPanel(), this.dispatchEvent(new CustomEvent("close", { detail: { previous: t }, bubbles: !0 }));
+        this._teardownPanel(!0), this.dispatchEvent(new CustomEvent("close", { detail: { previous: t }, bubbles: !0 }));
       }
       return;
     }
-    this._open ? (this._bindGlobalListeners(), (this._selectedIndex() !== this._panelForIndex || !this._portalEl) && this._rebuildPanel()) : (this._unbindGlobalListeners(), this._teardownPanel());
+    this._open ? (this._bindGlobalListeners(), (this._selectedIndex() !== this._panelForIndex || !this._portalEl) && this._rebuildPanel()) : (this._unbindGlobalListeners(), this._teardownPanel(!0));
   }
   _bindGlobalListeners() {
     this._globalListenersBound || (document.addEventListener("keydown", this._onDocKeyDown), document.addEventListener("scroll", this._onDocScroll, { passive: !0, capture: !0 }), this._globalListenersBound = !0);
@@ -715,57 +694,57 @@ class q extends E {
       getDisabled: m
     });
     this._focusIndex = t;
-    const a = this._isOpenAttribute();
-    this._items.forEach((r, i) => {
-      const s = e === i, o = r.id || `ui-menubar-item-${this._uid}-${i}`, u = this._contents[i]?.id || `ui-menubar-content-${this._uid}-${i}`;
-      r.id = o, r.setAttribute("role", "menuitem"), r.setAttribute("tabindex", i === t && !m(r) ? "0" : "-1"), r.setAttribute("aria-haspopup", "menu"), r.setAttribute("aria-expanded", s && a ? "true" : "false"), r.setAttribute("aria-controls", u), r.setAttribute("data-active", s ? "true" : "false");
-    }), v(this._items, this._items[t] || null, { activeAttribute: null }), this._contents.forEach((r, i) => {
-      const s = r.id || `ui-menubar-content-${this._uid}-${i}`;
-      r.id = s, r.setAttribute("role", "menu"), r.setAttribute("tabindex", "-1"), r.setAttribute("aria-hidden", e === i && a ? "false" : "true"), this._items[i] ? r.setAttribute("aria-labelledby", this._items[i].id) : r.removeAttribute("aria-labelledby");
+    const r = this._isOpenAttribute();
+    this._items.forEach((a, i) => {
+      const s = e === i, o = a.id || `ui-menubar-item-${this._uid}-${i}`, u = this._contents[i]?.id || `ui-menubar-content-${this._uid}-${i}`;
+      a.id = o, a.setAttribute("role", "menuitem"), a.setAttribute("tabindex", i === t && !m(a) ? "0" : "-1"), a.setAttribute("aria-haspopup", "menu"), a.setAttribute("aria-expanded", s && r ? "true" : "false"), a.setAttribute("aria-controls", u), a.setAttribute("data-active", s ? "true" : "false");
+    }), v(this._items, this._items[t] || null, { activeAttribute: null }), this._contents.forEach((a, i) => {
+      const s = a.id || `ui-menubar-content-${this._uid}-${i}`;
+      a.id = s, a.setAttribute("role", "menu"), a.setAttribute("tabindex", "-1"), a.setAttribute("aria-hidden", e === i && r ? "false" : "true"), this._items[i] ? a.setAttribute("aria-labelledby", this._items[i].id) : a.removeAttribute("aria-labelledby");
     });
   }
   _hydratePanelItems(e) {
-    Array.from(e.querySelectorAll(l())).forEach((a, r) => {
-      a.getAttribute("role") || a.setAttribute("role", "menuitem"), a.hasAttribute("tabindex") || a.setAttribute("tabindex", "-1"), a.hasAttribute("data-index") || a.setAttribute("data-index", String(r)), a.classList.contains("item") || a.classList.add("item");
+    Array.from(e.querySelectorAll(l())).forEach((r, a) => {
+      r.getAttribute("role") || r.setAttribute("role", "menuitem"), r.hasAttribute("tabindex") || r.setAttribute("tabindex", "-1"), r.hasAttribute("data-index") || r.setAttribute("data-index", String(a)), r.classList.contains("item") || r.classList.add("item");
     });
   }
   _queryPanelItemsIn(e) {
     return this._panelListbox()?.queryEnabledItems({ container: e || this._panelListbox() }) || [];
   }
   _submenuFor(e) {
-    return e.querySelector(z);
+    return e.querySelector(R);
   }
   _setOpenPanelBranch(e, t) {
-    const a = this._panelListbox();
-    if (!a || (a.querySelectorAll('[data-submenu-open="true"]').forEach((s) => s.removeAttribute("data-submenu-open")), !e)) return;
-    const r = [];
+    const r = this._panelListbox();
+    if (!r || (r.querySelectorAll('[data-submenu-open="true"]').forEach((s) => s.removeAttribute("data-submenu-open")), !e)) return;
+    const a = [];
     let i = e;
     for (; i; ) {
       const s = i.closest(".submenu");
       if (!s) break;
       const o = s.parentElement;
       if (!(o instanceof HTMLElement) || !o.matches(l())) break;
-      r.unshift(o), i = o;
+      a.unshift(o), i = o;
     }
-    r.forEach((s) => s.setAttribute("data-submenu-open", "true")), t && this._submenuFor(e) && e.setAttribute("data-submenu-open", "true");
+    a.forEach((s) => s.setAttribute("data-submenu-open", "true")), t && this._submenuFor(e) && e.setAttribute("data-submenu-open", "true");
   }
   _openPanelSubmenu(e, t) {
-    const a = this._submenuFor(e);
-    if (!a || _(e)) return !1;
+    const r = this._submenuFor(e);
+    if (!r || _(e)) return !1;
     if (this._setOpenPanelBranch(e, !0), this._schedulePanelSubmenuLayout(), !t) return !0;
-    const r = this._panelListbox()?.focusBoundary("first", {
-      container: a,
+    const a = this._panelListbox()?.focusBoundary("first", {
+      container: r,
       focus: !0,
       owner: this._panelSurface(),
       scroll: !0
     });
-    return r && this._setOpenPanelBranch(r, !1), !0;
+    return a && this._setOpenPanelBranch(a, !1), !0;
   }
   _closeParentPanelSubmenu(e) {
     const t = e.closest(".submenu");
     if (!t) return !1;
-    const a = t.parentElement;
-    return !(a instanceof HTMLElement) || !a.matches(l()) ? !1 : (this._focusPanelItem(a), this._setOpenPanelBranch(a, !1), a.removeAttribute("data-submenu-open"), !0);
+    const r = t.parentElement;
+    return !(r instanceof HTMLElement) || !r.matches(l()) ? !1 : (this._focusPanelItem(r), this._setOpenPanelBranch(r, !1), r.removeAttribute("data-submenu-open"), !0);
   }
   _clearPanelSubmenuState() {
     const e = this._panelListbox();
@@ -779,7 +758,7 @@ class q extends E {
   _layoutPanelSubmenus() {
     const e = this._panelListbox();
     if (!e) return;
-    const t = window.innerWidth, a = window.innerHeight;
+    const t = window.innerWidth, r = window.innerHeight;
     Array.from(e.querySelectorAll('.item > .submenu, [role="menuitem"] > .submenu, [role="menuitemcheckbox"] > .submenu, [role="menuitemradio"] > .submenu, [data-menu-item] > .submenu')).forEach((i) => {
       const s = i.parentElement;
       if (!(s instanceof HTMLElement)) return;
@@ -787,7 +766,7 @@ class q extends E {
       const o = i.style.display, u = i.style.visibility, c = i.style.pointerEvents, d = i.style.opacity, P = i.style.transform;
       i.style.display = "grid", i.style.visibility = "hidden", i.style.pointerEvents = "none", i.style.opacity = "0", i.style.transform = "none";
       const p = s.getBoundingClientRect(), h = i.getBoundingClientRect();
-      p.right + 4 + h.width > t - 8 && p.left - 4 - h.width >= 8 && s.setAttribute("data-submenu-side", "left"), p.top + h.height > a - 8 && p.bottom - h.height >= 8 && s.setAttribute("data-submenu-align", "up"), i.style.display = o, i.style.visibility = u, i.style.pointerEvents = c, i.style.opacity = d, i.style.transform = P;
+      p.right + 4 + h.width > t - 8 && p.left - 4 - h.width >= 8 && s.setAttribute("data-submenu-side", "left"), p.top + h.height > r - 8 && p.bottom - h.height >= 8 && s.setAttribute("data-submenu-align", "up"), i.style.display = o, i.style.visibility = u, i.style.pointerEvents = c, i.style.opacity = d, i.style.transform = P;
     });
   }
   _panelListbox() {
@@ -797,25 +776,25 @@ class q extends E {
     return this._portalSurfaceEl;
   }
   _buildPanelContent(e) {
-    const t = this._contents[e], a = document.createElement("div");
-    a.className = "ui-menubar-portal", a.style.position = "absolute", a.style.pointerEvents = "auto", a.innerHTML = `
-      <style>${M}</style>
+    const t = this._contents[e], r = document.createElement("div");
+    r.className = "ui-menubar-portal", r.style.position = "absolute", r.style.pointerEvents = "auto", r.innerHTML = `
+      <style>${N}</style>
       <div class="surface menu-panel" part="menu" role="menu" aria-hidden="false" aria-busy="false" tabindex="-1">
         <div class="state-row" part="state"></div>
         <ui-listbox class="content-host" slot="menu" role="menu" item-selector="${l().replace(/"/g, "&quot;")}" direct-item-selector=":scope > [slot=&quot;menu&quot;] > ${l().replace(/"/g, "&quot;")}" item-role="menuitem" active-attribute="data-active"></ui-listbox>
       </div>
     `;
-    const r = a.querySelector("ui-listbox.content-host"), i = a.querySelector(".surface");
-    if (!r || !i) return a;
-    if (i.id = t?.id || `ui-menubar-panel-${this._uid}-${e}`, i.setAttribute("aria-labelledby", this._items[e]?.id || ""), this._applyPanelVariantData(a), this._applyPanelTokens(a), t) {
+    const a = r.querySelector("ui-listbox.content-host"), i = r.querySelector(".surface");
+    if (!a || !i) return r;
+    if (i.id = t?.id || `ui-menubar-panel-${this._uid}-${e}`, i.setAttribute("aria-labelledby", this._items[e]?.id || ""), this._applyPanelVariantData(r), this._applyPanelTokens(r), t) {
       const s = t.cloneNode(!0);
-      s.setAttribute("slot", "menu"), r.appendChild(s);
+      s.setAttribute("slot", "menu"), a.appendChild(s);
     }
-    if (this._hydratePanelItems(r), r.refresh(), !r.querySelector(l())) {
+    if (this._hydratePanelItems(a), a.refresh(), !a.querySelector(l())) {
       const s = document.createElement("div");
-      s.className = "empty-state", s.textContent = "No items", r.appendChild(s);
+      s.className = "empty-state", s.textContent = "No items", a.appendChild(s);
     }
-    return a.addEventListener("click", (s) => {
+    return r.addEventListener("click", (s) => {
       const o = w(s);
       if (!o || _(o)) return;
       if (this._submenuFor(o)) {
@@ -837,11 +816,11 @@ class q extends E {
           bubbles: !0
         })
       ), this.closeOnSelect ? this.close() : this._focusPanelItem(o);
-    }), a.addEventListener("pointerover", this._onPanelPointerOver), a.addEventListener("pointerleave", this._onPanelPointerLeave), a.addEventListener("focusin", this._onPanelFocusIn), a;
+    }), r.addEventListener("pointerover", this._onPanelPointerOver), r.addEventListener("pointerleave", this._onPanelPointerLeave), r.addEventListener("focusin", this._onPanelFocusIn), r;
   }
   _applyPanelVariantData(e) {
-    const t = b(this, "variant"), a = O(this.getAttribute("size") || this.getAttribute("density")), r = b(this, "density"), i = this.getAttribute("radius"), s = b(this, "shape"), o = b(this, "elevation"), u = b(this, "tone"), c = t === "default" || t === "" ? "" : t === "glass" ? "soft" : t === "line" ? "outline" : t;
-    c ? e.setAttribute("data-variant", c) : e.removeAttribute("data-variant"), a !== "md" ? e.setAttribute("data-size", a) : e.removeAttribute("data-size"), r && r !== "default" ? e.setAttribute("data-density", r) : e.removeAttribute("data-density"), i ? e.setAttribute("data-radius", i) : e.removeAttribute("data-radius"), s && s !== "default" ? e.setAttribute("data-shape", s) : e.removeAttribute("data-shape"), o && o !== "default" ? e.setAttribute("data-elevation", o) : e.removeAttribute("data-elevation"), u && u !== "default" && u !== "brand" ? e.setAttribute("data-tone", u) : e.removeAttribute("data-tone"), this._open ? e.setAttribute("data-open", "true") : e.removeAttribute("data-open");
+    const t = b(this, "variant"), r = H(this.getAttribute("size") || this.getAttribute("density")), a = b(this, "density"), i = this.getAttribute("radius"), s = b(this, "shape"), o = b(this, "elevation"), u = b(this, "tone"), c = t === "default" || t === "" ? "" : t === "glass" ? "soft" : t === "line" ? "outline" : t;
+    c ? e.setAttribute("data-variant", c) : e.removeAttribute("data-variant"), r !== "md" ? e.setAttribute("data-size", r) : e.removeAttribute("data-size"), a && a !== "default" ? e.setAttribute("data-density", a) : e.removeAttribute("data-density"), i ? e.setAttribute("data-radius", i) : e.removeAttribute("data-radius"), s && s !== "default" ? e.setAttribute("data-shape", s) : e.removeAttribute("data-shape"), o && o !== "default" ? e.setAttribute("data-elevation", o) : e.removeAttribute("data-elevation"), u && u !== "default" && u !== "brand" ? e.setAttribute("data-tone", u) : e.removeAttribute("data-tone"), this._open ? e.setAttribute("data-open", "true") : e.removeAttribute("data-open");
     const d = S(i || s || null);
     d ? (e.style.setProperty("--ui-menubar-panel-radius", d), e.style.setProperty("--ui-menubar-panel-item-radius", d === "999px" ? "999px" : `calc(${d} - 2px)`)) : (e.style.removeProperty("--ui-menubar-panel-radius"), e.style.removeProperty("--ui-menubar-panel-item-radius"));
   }
@@ -902,15 +881,15 @@ class q extends E {
       "--ui-menubar-panel-separator-margin",
       "--ui-menubar-panel-item-hover-bg",
       "--ui-menubar-panel-item-active-color"
-    ].forEach((r) => {
-      const i = t.getPropertyValue(r).trim();
-      i ? e.style.setProperty(r, i) : e.style.removeProperty(r);
-    }), B.forEach((r) => {
-      const i = t.getPropertyValue(r).trim();
-      i ? e.style.setProperty(r, i) : e.style.removeProperty(r);
-    }), F.forEach(({ prefix: r, from: i, to: s }) => {
+    ].forEach((a) => {
+      const i = t.getPropertyValue(a).trim();
+      i ? e.style.setProperty(a, i) : e.style.removeProperty(a);
+    }), M.forEach((a) => {
+      const i = t.getPropertyValue(a).trim();
+      i ? e.style.setProperty(a, i) : e.style.removeProperty(a);
+    }), $.forEach(({ prefix: a, from: i, to: s }) => {
       for (let o = i; o <= s; o += 1) {
-        const u = `${r}${o}`, c = t.getPropertyValue(u).trim();
+        const u = `${a}${o}`, c = t.getPropertyValue(u).trim();
         c ? e.style.setProperty(u, c) : e.style.removeProperty(u);
       }
     });
@@ -921,8 +900,8 @@ class q extends E {
     this._setPanelFlag("open", this._open), this._applyPanelVariantData(e), this._applyPanelTokens(e);
     const t = this._panelSurface();
     t && (t.setAttribute("aria-hidden", "false"), t.setAttribute("aria-busy", "false"), t.removeAttribute("hidden"), t.style.display = "block", t.style.visibility = "visible", t.style.opacity = "1", t.style.transform = "translateY(0px) scale(1)", t.style.pointerEvents = "auto");
-    const a = e.querySelector(".state-row");
-    a && (a.textContent = ""), this._schedulePanelSubmenuLayout();
+    const r = e.querySelector(".state-row");
+    r && (r.textContent = ""), this._schedulePanelSubmenuLayout();
   }
   _rebuildPanel() {
     if (!this._open) return;
@@ -932,43 +911,38 @@ class q extends E {
       return;
     }
     this._teardownPanel();
-    const a = this._buildPanelContent(e);
-    this._portalEl = a, this._portalSurfaceEl = a.querySelector(".surface"), this._portalContentHostEl = a.querySelector("ui-listbox.content-host"), this._panelForIndex = e;
-    const r = k();
-    if (!r) {
+    const r = this._buildPanelContent(e);
+    this._portalEl = r, this._portalSurfaceEl = r.querySelector(".surface"), this._portalContentHostEl = r.querySelector("ui-listbox.content-host"), this._panelForIndex = e;
+    const a = k();
+    if (!a) {
       this._portalEl = null, this._panelForIndex = -1;
       return;
     }
-    r.appendChild(a), this._positioner = T({
+    a.appendChild(r), this._positioner = T({
       anchor: t,
-      floating: this._panelSurface() || a,
-      placement: H(this.getAttribute("placement")),
+      floating: this._panelSurface() || r,
+      placement: K(this.getAttribute("placement")),
       offset: 6,
       flip: !0,
       shift: !0,
       fitViewport: !0,
       observeScroll: !1
     }), this._dismissableLayer = I({
-      node: this._panelSurface() || a,
+      node: this._panelSurface() || r,
       trigger: t,
       closeOnEscape: !0,
       closeOnPointerOutside: !0,
       onDismiss: () => this.close()
-    });
+    }), z(this._panelSurface() || r);
   }
-  _teardownPanel() {
-    if (this._dismissableLayer?.destroy(), this._dismissableLayer = null, this._positioner?.destroy(), this._positioner = null, this._portalEl?.parentElement)
-      try {
-        this._portalEl.parentElement.removeChild(this._portalEl);
-      } catch {
-      }
-    this._portalEl = null, this._portalSurfaceEl = null, this._portalContentHostEl = null, this._panelForIndex = -1, this._submenuRaf != null && (cancelAnimationFrame(this._submenuRaf), this._submenuRaf = null), this._resetTypeahead();
+  _teardownPanel(e = !1) {
+    this._dismissableLayer?.destroy(), this._dismissableLayer = null, this._positioner?.destroy(), this._positioner = null, e ? O(this._portalEl) : B(this._portalEl), this._portalEl = null, this._portalSurfaceEl = null, this._portalContentHostEl = null, this._panelForIndex = -1, this._submenuRaf != null && (cancelAnimationFrame(this._submenuRaf), this._submenuRaf = null), this._resetTypeahead();
   }
   _selectIndex(e, t) {
-    const a = this._selectedIndex(), r = A(e, this._items.length);
-    r < 0 || (this._setSelectedAttribute(r), this.setAttribute("open", ""), this._syncState(), this.dispatchEvent(
+    const r = this._selectedIndex(), a = A(e, this._items.length);
+    a < 0 || (this._setSelectedAttribute(a), this.setAttribute("open", ""), this._syncState(), this.dispatchEvent(
       new CustomEvent("change", {
-        detail: { selected: r, previous: a, open: !0, reason: t },
+        detail: { selected: a, previous: r, open: !0, reason: t },
         bubbles: !0
       })
     ));
@@ -990,9 +964,9 @@ class q extends E {
     this._panelListbox()?.focusBoundary("last", { focus: !0, owner: this._panelSurface(), scroll: !0 });
   }
   _movePanelFocus(e) {
-    const t = document.activeElement, r = (t && this._portalEl?.contains(t) ? t.closest(l()) : null)?.closest(".submenu") || this._panelListbox();
+    const t = document.activeElement, a = (t && this._portalEl?.contains(t) ? t.closest(l()) : null)?.closest(".submenu") || this._panelListbox();
     this._panelListbox()?.move(e, {
-      container: r,
+      container: a,
       current: t && this._portalEl?.contains(t) ? t : null,
       focus: !0,
       owner: this._panelSurface(),
@@ -1008,19 +982,19 @@ class q extends E {
   _typeaheadOnBar(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 = this._items.findIndex((r) => r === e.target || r.contains(e.target)), a = L(this._items, this._typeaheadBuffer, {
+    const t = this._items.findIndex((a) => a === e.target || a.contains(e.target)), r = L(this._items, this._typeaheadBuffer, {
       startIndex: t,
-      getLabel: (r) => r.getAttribute("aria-label") || r.textContent || "",
+      getLabel: (a) => a.getAttribute("aria-label") || a.textContent || "",
       getDisabled: m
     });
-    return a < 0 ? !1 : (e.preventDefault(), this._focusItem(a), this._open && this._selectIndex(a, "keyboard"), !0);
+    return r < 0 ? !1 : (e.preventDefault(), this._focusItem(r), this._open && this._selectIndex(r, "keyboard"), !0);
   }
   _typeaheadOnPanel(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, r = (t && this._portalEl?.contains(t) ? t.closest(l()) : null)?.closest(".submenu") || this._panelListbox();
+    const t = document.activeElement, a = (t && this._portalEl?.contains(t) ? t.closest(l()) : null)?.closest(".submenu") || this._panelListbox();
     return this._panelListbox()?.typeahead(this._typeaheadBuffer, {
-      container: r,
+      container: a,
       current: t && this._portalEl?.contains(t) ? t : null,
       focus: !0,
       owner: this._panelSurface(),
@@ -1035,32 +1009,32 @@ class q extends E {
       return;
     }
     if (t !== "menuitemradio") return;
-    const a = e.closest(".submenu") || this._panelListbox();
-    if (!a) return;
-    const r = e.getAttribute("data-group") || e.getAttribute("name") || "";
-    Array.from(a.querySelectorAll('[role="menuitemradio"]')).forEach((s) => {
-      r && (s.getAttribute("data-group") || s.getAttribute("name") || "") !== r || (s.setAttribute("aria-checked", "false"), s.setAttribute("data-state", "unchecked"));
+    const r = e.closest(".submenu") || this._panelListbox();
+    if (!r) return;
+    const a = e.getAttribute("data-group") || e.getAttribute("name") || "";
+    Array.from(r.querySelectorAll('[role="menuitemradio"]')).forEach((s) => {
+      a && (s.getAttribute("data-group") || s.getAttribute("name") || "") !== a || (s.setAttribute("aria-checked", "false"), s.setAttribute("data-state", "unchecked"));
     }), e.setAttribute("aria-checked", "true"), e.setAttribute("data-state", "checked");
   }
   _onClick(e) {
-    const t = e.composedPath(), a = this._items.findIndex((i) => t.includes(i));
-    if (a < 0) return;
-    if (this._focusItem(a), this._selectedIndex() === a && this._open) {
+    const t = e.composedPath(), r = this._items.findIndex((i) => t.includes(i));
+    if (r < 0) return;
+    if (this._focusItem(r), this._selectedIndex() === r && this._open) {
       this.close(), this._syncState();
       return;
     }
-    this._selectIndex(a, "click");
+    this._selectIndex(r, "click");
   }
   _onMouseMove(e) {
     if (!this._open) return;
-    const t = e.composedPath(), a = this._items.findIndex((r) => t.includes(r));
-    a < 0 || a !== this._selectedIndex() && this._selectIndex(a, "programmatic");
+    const t = e.composedPath(), r = this._items.findIndex((a) => t.includes(a));
+    r < 0 || r !== this._selectedIndex() && this._selectIndex(r, "programmatic");
   }
   _isInternalScrollEvent(e) {
     const t = typeof e.composedPath == "function" ? e.composedPath() : [];
-    if (this._portalEl && t.includes(this._portalEl) || this._items.some((r) => t.includes(r))) return !0;
-    const a = e.target;
-    return !!(a instanceof Node && (this._portalEl?.contains(a) || this._items.some((r) => r.contains(a))));
+    if (this._portalEl && t.includes(this._portalEl) || this._items.some((a) => t.includes(a))) return !0;
+    const r = e.target;
+    return !!(r instanceof Node && (this._portalEl?.contains(r) || this._items.some((a) => a.contains(r))));
   }
   _onDocScroll(e) {
     !this._open || !this.closeOnScroll || this._isInternalScrollEvent(e) || this.close();
@@ -1069,9 +1043,9 @@ class q extends E {
     if (!this._open) return;
     const t = w(e);
     if (!t || _(t)) return;
-    const a = t.closest(".submenu") || this._panelListbox();
+    const r = t.closest(".submenu") || this._panelListbox();
     this._panelListbox()?.setActiveItem(t, {
-      container: a,
+      container: r,
       focus: !1,
       owner: this._panelSurface(),
       scroll: !1
@@ -1085,28 +1059,28 @@ class q extends E {
   _onPanelFocusIn(e) {
     const t = e.target;
     if (!(t instanceof HTMLElement)) return;
-    const a = t.closest(l());
-    a && (this._submenuFor(a) ? this._setOpenPanelBranch(a, !0) : this._setOpenPanelBranch(a, !1));
+    const r = t.closest(l());
+    r && (this._submenuFor(r) ? this._setOpenPanelBranch(r, !0) : this._setOpenPanelBranch(r, !1));
   }
   _onKeyDown(e) {
     const t = this._items.findIndex((o) => o === e.target || o.contains(e.target));
     if (t < 0) return;
-    const a = getComputedStyle(this).direction === "rtl" ? "rtl" : "ltr";
-    let r = !1, i = t;
+    const r = getComputedStyle(this).direction === "rtl" ? "rtl" : "ltr";
+    let a = !1, i = t;
     const s = g(this._items, {
       activeIndex: t,
       selectedIndex: this._selectedIndex(),
       getDisabled: m
     });
-    e.key === "ArrowRight" ? (i = y(this._items, t, a === "rtl" ? -1 : 1, {
+    e.key === "ArrowRight" ? (i = y(this._items, t, r === "rtl" ? -1 : 1, {
       wrap: this._loopEnabled(),
       fallbackIndex: s,
       getDisabled: m
-    }), r = !0) : e.key === "ArrowLeft" ? (i = y(this._items, t, a === "rtl" ? 1 : -1, {
+    }), a = !0) : e.key === "ArrowLeft" ? (i = y(this._items, t, r === "rtl" ? 1 : -1, {
       wrap: this._loopEnabled(),
       fallbackIndex: s,
       getDisabled: m
-    }), r = !0) : e.key === "Home" ? (i = x(this._items, "first", m), r = !0) : e.key === "End" ? (i = x(this._items, "last", m), r = !0) : e.key === "Enter" || e.key === " " ? (this._selectIndex(t, "keyboard"), r = !0) : e.key === "ArrowDown" ? (this._selectIndex(t, "keyboard"), setTimeout(() => this._focusPanelFirst(), 0), r = !0) : e.key === "ArrowUp" && (this._selectIndex(t, "keyboard"), setTimeout(() => this._focusPanelLast(), 0), r = !0), !(!r && this._typeaheadOnBar(e)) && r && (e.preventDefault(), i >= 0 && i !== t && (this._focusItem(i), this._open && this._selectIndex(i, "keyboard")));
+    }), a = !0) : e.key === "Home" ? (i = x(this._items, "first", m), a = !0) : e.key === "End" ? (i = x(this._items, "last", m), a = !0) : e.key === "Enter" || e.key === " " ? (this._selectIndex(t, "keyboard"), a = !0) : e.key === "ArrowDown" ? (this._selectIndex(t, "keyboard"), setTimeout(() => this._focusPanelFirst(), 0), a = !0) : e.key === "ArrowUp" && (this._selectIndex(t, "keyboard"), setTimeout(() => this._focusPanelLast(), 0), a = !0), !(!a && this._typeaheadOnBar(e)) && a && (e.preventDefault(), i >= 0 && i !== t && (this._focusItem(i), this._open && this._selectIndex(i, "keyboard")));
   }
   _onDocKeyDown(e) {
     if (!this._open || !(!!this._portalEl && e.composedPath().includes(this._portalEl)) || this._typeaheadOnPanel(e)) return;
@@ -1126,12 +1100,12 @@ class q extends E {
       e.preventDefault(), this._focusPanelLast();
       return;
     }
-    const a = document.activeElement, r = a?.closest(l());
-    if (e.key === "ArrowRight" && r && this._openPanelSubmenu(r, !0)) {
+    const r = document.activeElement, a = r?.closest(l());
+    if (e.key === "ArrowRight" && a && this._openPanelSubmenu(a, !0)) {
       e.preventDefault();
       return;
     }
-    if (e.key === "ArrowLeft" && r && this._closeParentPanelSubmenu(r)) {
+    if (e.key === "ArrowLeft" && a && this._closeParentPanelSubmenu(a)) {
       e.preventDefault();
       return;
     }
@@ -1140,15 +1114,15 @@ class q extends E {
       return;
     }
     if (e.key === "Enter" || e.key === " ") {
-      if (!a || !this._portalEl?.contains(a) || !r || _(r) || (e.preventDefault(), this._openPanelSubmenu(r, !0))) return;
-      r.click();
+      if (!r || !this._portalEl?.contains(r) || !a || _(a) || (e.preventDefault(), this._openPanelSubmenu(a, !0))) return;
+      a.click();
     }
   }
-  shouldRenderOnAttributeChange(e, t, a) {
+  shouldRenderOnAttributeChange(e, t, r) {
     return !1;
   }
 }
-typeof customElements < "u" && !customElements.get("ui-menubar") && customElements.define("ui-menubar", q);
+typeof customElements < "u" && !customElements.get("ui-menubar") && customElements.define("ui-menubar", G);
 export {
-  q as UIMenubar
+  G as UIMenubar
 };