@editora/ui-core 0.1.8 → 0.1.10

package/dist/menubar.esm.js

@@ -0,0 +1,1195 @@
+import { E } from "./ElementBase-909688f3.mjs";
+import { c as k } from "./portal-1cf392ca.mjs";
+import { d as L } from "./collection-a1aac0c6.mjs";
+import { c as I } from "./dismissable-layer-9c7e6b58.mjs";
+import { r as v, s as y, f as C, m as x, g as S } from "./roving-focus-group-4350c9a7.mjs";
+import { a as T } from "./positioner-fbd61bf1.mjs";
+import "./listbox-308789a0.mjs";
+import { c as D } from "./menu-item-styles-27fdbac4.mjs";
+import "./collection.esm.js";
+const z = ":scope > .submenu", B = [
+  "--ui-color-primary",
+  "--ui-color-primary-hover",
+  "--ui-color-foreground-on-primary",
+  "--ui-color-background",
+  "--ui-color-surface",
+  "--ui-color-surface-alt",
+  "--ui-color-text",
+  "--ui-color-muted",
+  "--ui-color-border",
+  "--ui-color-focus-ring",
+  "--ui-color-success",
+  "--ui-color-danger",
+  "--ui-color-warning",
+  "--ui-primary",
+  "--ui-primary-hover",
+  "--ui-foreground",
+  "--ui-background",
+  "--ui-surface",
+  "--ui-surface-alt",
+  "--ui-text",
+  "--ui-muted",
+  "--ui-border",
+  "--ui-focus-ring",
+  "--ui-radius",
+  "--color-background",
+  "--color-surface",
+  "--color-panel",
+  "--color-panel-solid",
+  "--color-panel-translucent",
+  "--color-overlay",
+  "--accent-contrast",
+  "--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 },
+  { prefix: "--gray-a", from: 1, to: 12 },
+  { prefix: "--black-a", from: 1, to: 12 },
+  { prefix: "--white-a", from: 1, to: 12 },
+  { prefix: "--shadow-", from: 1, to: 6 },
+  { prefix: "--radius-", from: 1, to: 6 }
+];
+function O(n) {
+  return n === "sm" || n === "1" || n === "compact" ? "sm" : n === "lg" || n === "3" || n === "comfortable" ? "lg" : "md";
+}
+function A(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 = `
+  :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-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));
+    --ui-menubar-item-radius: var(--base-menubar-item-radius, calc(var(--ui-menubar-radius) - 2px));
+    --ui-menubar-item-pad-x: var(--base-menubar-item-padding-x, 14px);
+    --ui-menubar-item-pad-y: var(--base-menubar-item-padding-y, 9px);
+    --ui-menubar-item-font-size: var(--base-menubar-item-font-size, 14px);
+    --ui-menubar-item-weight: var(--base-menubar-item-font-weight, 600);
+    --ui-menubar-item-line-height: var(--base-menubar-item-line-height, 20px);
+    --ui-menubar-item-color: var(--ui-color-text, var(--ui-text, #334155));
+    --ui-menubar-item-hover-bg: color-mix(in srgb, var(--ui-menubar-ring) 12%, transparent);
+    --ui-menubar-item-active-bg: color-mix(in srgb, var(--ui-menubar-ring) 16%, transparent);
+    --ui-menubar-item-active-color: var(--accent-12, var(--ui-menubar-item-color));
+    --ui-menubar-ring: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
+    --ui-menubar-panel-bg: var(--base-menubar-panel-bg, var(--base-menu-bg, var(--color-panel-solid, #ffffff)));
+    --ui-menubar-panel-color: var(--base-menubar-panel-color, var(--ui-color-text, #0f172a));
+    --ui-menubar-panel-border: var(--base-menubar-panel-border, var(--base-menu-border, 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 80%, transparent)));
+    --ui-menubar-panel-shadow: var(--base-menubar-panel-shadow, var(--base-menu-shadow, var(--shadow-5)));
+    --ui-menubar-panel-radius: var(--base-menubar-panel-radius, var(--base-menu-radius, var(--radius-4)));
+    --ui-menubar-panel-padding: var(--base-menubar-panel-padding, var(--base-context-menu-padding, var(--base-menu-content-padding, 8px)));
+    --ui-menubar-panel-min-width: var(--base-menubar-panel-min-width, var(--base-menu-min-width, 232px));
+    --ui-menubar-panel-item-radius: var(--base-menubar-panel-item-radius, var(--base-context-menu-item-radius, var(--base-menu-item-radius, calc(var(--ui-menubar-panel-radius) - 2px))));
+    --ui-menubar-panel-item-gap: var(--base-menubar-panel-item-gap, var(--base-context-menu-item-gap, var(--base-menu-item-gap, 10px)));
+    --ui-menubar-panel-item-min-height: var(--base-menubar-panel-item-height, var(--base-context-menu-item-height, var(--base-menu-item-height, 36px)));
+    --ui-menubar-panel-item-pad-y: var(--base-menubar-panel-item-padding-y, var(--base-context-menu-item-padding-y, var(--base-menu-item-padding-y, 8px)));
+    --ui-menubar-panel-item-pad-x: var(--base-menubar-panel-item-padding-x, var(--base-context-menu-item-padding-x, var(--base-menu-item-padding-x, 12px)));
+    --ui-menubar-panel-item-font-size: var(--base-menubar-panel-item-font-size, var(--base-context-menu-item-font-size, var(--base-menu-item-font-size, 14px)));
+    --ui-menubar-panel-item-font-weight: 400;
+    --ui-menubar-panel-item-line-height: var(--base-menubar-panel-item-line-height, var(--base-context-menu-item-line-height, var(--base-menu-item-line-height, 20px)));
+    --ui-menubar-panel-separator-margin: var(--base-menubar-panel-separator-margin, var(--base-context-menu-separator-margin, var(--base-menu-separator-margin, 6px 10px)));
+    --ui-menubar-panel-item-hover-bg: color-mix(in srgb, var(--ui-menubar-ring) 12%, transparent);
+    --ui-menubar-panel-item-active-color: var(--accent-12, var(--ui-menubar-panel-color));
+    --ui-menubar-z: 1570;
+    color-scheme: light dark;
+    display: inline-block;
+    position: relative;
+  }
+
+  :host([headless]) .bar {
+    display: none !important;
+  }
+
+  .bar {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-menubar-gap);
+    padding: var(--ui-menubar-padding);
+    border-radius: var(--ui-menubar-radius);
+    background: var(--ui-menubar-bg);
+    border: var(--ui-menubar-border);
+    box-shadow: var(--ui-menubar-shadow);
+    position: relative;
+  }
+
+  :host([orientation="vertical"]) .bar {
+    display: inline-grid;
+    justify-items: stretch;
+    min-width: 180px;
+  }
+
+  :host([variant="flat"]) .bar {
+    box-shadow: none;
+  }
+
+  :host([variant="soft"]),
+  :host([variant="glass"]) {
+    --ui-menubar-bg: color-mix(in srgb, var(--base-menubar-bg, var(--color-panel-solid, #ffffff)) 94%, var(--accent-surface, transparent));
+  }
+
+  :host([variant="contrast"]) .bar {
+    --ui-menubar-bg: #0f172a;
+    --ui-menubar-item-color: #e2e8f0;
+    --ui-menubar-item-hover-bg: color-mix(in srgb, #ffffff 16%, transparent);
+    --ui-menubar-item-active-bg: color-mix(in srgb, #ffffff 20%, transparent);
+    --ui-menubar-item-active-color: #ffffff;
+    --ui-menubar-ring: #93c5fd;
+    border-color: #334155;
+  }
+
+  :host([variant="outline"]) .bar,
+  :host([variant="line"]) .bar {
+    box-shadow: none;
+    border-color: color-mix(in srgb, var(--ui-menubar-item-color, #334155) 26%, transparent);
+  }
+
+  :host([size="sm"]),
+  :host([size="1"]),
+  :host([density="compact"]) {
+    --ui-menubar-gap: 4px;
+    --ui-menubar-padding: 4px;
+    --ui-menubar-item-radius: 6px;
+    --ui-menubar-item-pad-x: 10px;
+    --ui-menubar-item-pad-y: 6px;
+    --ui-menubar-item-font-size: 12px;
+    --ui-menubar-item-line-height: 18px;
+  }
+
+  :host([size="lg"]),
+  :host([size="3"]),
+  :host([density="comfortable"]) {
+    --ui-menubar-gap: 8px;
+    --ui-menubar-padding: 7px;
+    --ui-menubar-item-radius: 10px;
+    --ui-menubar-item-pad-x: 16px;
+    --ui-menubar-item-pad-y: 10px;
+    --ui-menubar-item-font-size: 14px;
+    --ui-menubar-item-line-height: 22px;
+  }
+
+  :host([elevation="none"]) .bar {
+    box-shadow: none;
+  }
+
+  :host([elevation="high"]) .bar {
+    --ui-menubar-shadow:
+      0 24px 56px rgba(2, 6, 23, 0.14),
+      0 3px 12px rgba(2, 6, 23, 0.08);
+  }
+
+  :host([tone="danger"]) {
+    --ui-menubar-ring: #ef4444;
+    --ui-menubar-item-active-bg: color-mix(in srgb, #ef4444 18%, transparent);
+    --ui-menubar-item-active-color: #b91c1c;
+  }
+
+  :host([tone="success"]) {
+    --ui-menubar-ring: #16a34a;
+    --ui-menubar-item-active-bg: color-mix(in srgb, #16a34a 18%, transparent);
+    --ui-menubar-item-active-color: #166534;
+  }
+
+  :host([tone="warning"]) {
+    --ui-menubar-ring: #d97706;
+    --ui-menubar-item-active-bg: color-mix(in srgb, #f59e0b 20%, transparent);
+    --ui-menubar-item-active-color: #b45309;
+  }
+
+  ::slotted([slot="item"]) {
+    appearance: none;
+    border: 0;
+    background: transparent;
+    border-radius: var(--ui-menubar-item-radius);
+    padding: var(--ui-menubar-item-pad-y) var(--ui-menubar-item-pad-x);
+    color: var(--ui-menubar-item-color);
+    font: var(--ui-menubar-item-weight) var(--ui-menubar-item-font-size)/var(--ui-menubar-item-line-height) Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    letter-spacing: var(--ui-default-letter-spacing, 0em);
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+    outline: none;
+    transition: background-color 120ms ease, color 120ms ease, transform 120ms ease;
+  }
+
+  ::slotted([slot="item"]:hover),
+  ::slotted([slot="item"]:focus-visible) {
+    background: var(--ui-menubar-item-hover-bg);
+  }
+
+  ::slotted([slot="item"][data-active="true"]) {
+    background: var(--ui-menubar-item-active-bg);
+    color: var(--ui-menubar-item-active-color);
+  }
+
+  ::slotted([slot="item"]:focus-visible) {
+    box-shadow: inset 0 0 0 2px var(--ui-menubar-ring);
+  }
+
+  .content-slot {
+    display: none !important;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    ::slotted([slot="item"]) {
+      transition: none !important;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .bar {
+      forced-color-adjust: none;
+      border-color: CanvasText;
+      background: Canvas;
+      color: CanvasText;
+      box-shadow: none;
+    }
+
+    ::slotted([slot="item"]) {
+      forced-color-adjust: none;
+      border: 1px solid transparent;
+      background: Canvas;
+      color: CanvasText;
+    }
+
+    ::slotted([slot="item"]:hover),
+    ::slotted([slot="item"]:focus-visible),
+    ::slotted([slot="item"][data-active="true"]) {
+      background: Highlight;
+      color: HighlightText;
+      border-color: Highlight;
+    }
+  }
+`, M = `
+  .ui-menubar-portal {
+    position: absolute;
+    pointer-events: auto;
+    z-index: var(--ui-menubar-z, 1570);
+  }
+
+  .ui-menubar-portal .surface {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    min-width: var(--ui-menubar-panel-min-width, 232px);
+    max-width: min(360px, calc(100vw - 16px));
+    overflow: visible;
+    isolation: isolate;
+    padding: var(--ui-menubar-panel-padding, 6px);
+    box-sizing: border-box;
+    border: var(--ui-menubar-panel-border, 1px solid rgba(15, 23, 42, 0.14));
+    border-radius: var(--ui-menubar-panel-radius, 12px);
+    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"] {
+    transform-origin: bottom left;
+  }
+
+  .ui-menubar-portal .surface[data-placement="left"] {
+    transform-origin: center right;
+  }
+
+  .ui-menubar-portal .surface[data-placement="right"] {
+    transform-origin: center left;
+  }
+
+  .ui-menubar-portal[data-variant="flat"] .surface {
+    box-shadow: none;
+  }
+
+  .ui-menubar-portal[data-variant="soft"] .surface,
+  .ui-menubar-portal[data-variant="glass"] .surface {
+    --ui-menubar-panel-bg: color-mix(in srgb, var(--base-menubar-panel-bg, var(--base-menu-bg, #ffffff)) 94%, var(--accent-surface, transparent));
+  }
+
+  .ui-menubar-portal[data-variant="contrast"] .surface {
+    --ui-menubar-panel-bg: #0f172a;
+    --ui-menubar-panel-color: #f8fafc;
+    --ui-menubar-panel-border: 1px solid #334155;
+    --ui-menubar-panel-item-hover-bg: color-mix(in srgb, #ffffff 12%, transparent);
+  }
+
+  .ui-menubar-portal[data-variant="outline"] .surface,
+  .ui-menubar-portal[data-variant="line"] .surface {
+    box-shadow: none;
+    border-color: color-mix(in srgb, var(--ui-menubar-panel-color, #0f172a) 26%, transparent);
+  }
+
+  .ui-menubar-portal[data-size="sm"] .surface,
+  .ui-menubar-portal[data-density="compact"] .surface {
+    --ui-menubar-panel-padding: 4px;
+    --ui-menubar-panel-item-radius: 6px;
+    --ui-menubar-panel-item-gap: 8px;
+    --ui-menubar-panel-item-min-height: 30px;
+    --ui-menubar-panel-item-pad-y: 5px;
+    --ui-menubar-panel-item-pad-x: 9px;
+    --ui-menubar-panel-item-font-size: 12px;
+    --ui-menubar-panel-separator-margin: 4px 8px;
+  }
+
+  .ui-menubar-portal[data-size="lg"] .surface,
+  .ui-menubar-portal[data-density="comfortable"] .surface {
+    --ui-menubar-panel-padding: 8px;
+    --ui-menubar-panel-item-radius: 10px;
+    --ui-menubar-panel-item-gap: 12px;
+    --ui-menubar-panel-item-min-height: 40px;
+    --ui-menubar-panel-item-pad-y: 9px;
+    --ui-menubar-panel-item-pad-x: 13px;
+    --ui-menubar-panel-item-font-size: 14px;
+    --ui-menubar-panel-separator-margin: 7px 11px;
+  }
+
+  .ui-menubar-portal[data-elevation="none"] .surface {
+    box-shadow: none;
+  }
+
+  .ui-menubar-portal[data-elevation="low"] .surface {
+    --ui-menubar-panel-shadow:
+      0 14px 30px rgba(2, 6, 23, 0.17),
+      0 2px 7px rgba(2, 6, 23, 0.08);
+  }
+
+  .ui-menubar-portal[data-elevation="high"] .surface {
+    --ui-menubar-panel-shadow:
+      0 32px 72px rgba(2, 6, 23, 0.28),
+      0 6px 18px rgba(2, 6, 23, 0.14);
+  }
+
+  ${D({
+  scopes: [".ui-menubar-portal .content-host"],
+  prefix: "--ui-menubar-panel",
+  shortcutSelectors: [".shortcut", ".meta"],
+  activeStateSelectors: [
+    '.item[data-submenu-open="true"]',
+    '[role="menuitem"][data-submenu-open="true"]',
+    '[role="menuitemcheckbox"][data-submenu-open="true"]',
+    '[role="menuitemradio"][data-submenu-open="true"]',
+    '[data-menu-item][data-submenu-open="true"]',
+    '.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"]'
+  ]
+})}
+
+  .ui-menubar-portal[data-variant="solid"] .content-host [role="menuitem"]:hover,
+  .ui-menubar-portal[data-variant="solid"] .content-host [role="menuitem"]:focus-visible,
+  .ui-menubar-portal[data-variant="solid"] .content-host [role="menuitemcheckbox"]:hover,
+  .ui-menubar-portal[data-variant="solid"] .content-host [role="menuitemcheckbox"]:focus-visible,
+  .ui-menubar-portal[data-variant="solid"] .content-host [role="menuitemradio"]:hover,
+  .ui-menubar-portal[data-variant="solid"] .content-host [role="menuitemradio"]:focus-visible,
+  .ui-menubar-portal[data-variant="solid"] .content-host .item:hover,
+  .ui-menubar-portal[data-variant="solid"] .content-host .item:focus-visible,
+  .ui-menubar-portal[data-variant="solid"] .content-host [data-menu-item]:hover,
+  .ui-menubar-portal[data-variant="solid"] .content-host [data-menu-item]:focus-visible,
+  .ui-menubar-portal[data-variant="solid"] .content-host [role="menuitem"][data-active="true"],
+  .ui-menubar-portal[data-variant="solid"] .content-host [role="menuitemcheckbox"][data-active="true"],
+  .ui-menubar-portal[data-variant="solid"] .content-host [role="menuitemradio"][data-active="true"],
+  .ui-menubar-portal[data-variant="solid"] .content-host .item[data-active="true"],
+  .ui-menubar-portal[data-variant="solid"] .content-host [data-menu-item][data-active="true"] {
+    background: color-mix(in srgb, var(--ui-menubar-ring) 12%, transparent);
+    color: var(--accent-12, var(--ui-menubar-panel-color, #0f172a));
+  }
+
+  .ui-menubar-portal .content-host {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .ui-menubar-portal .state-row {
+    display: none;
+    margin: 0 2px 6px;
+    min-height: 24px;
+    padding: 0 8px;
+    border-radius: 8px;
+    border: 1px solid color-mix(in srgb, var(--ui-menubar-panel-color, #0f172a) 12%, transparent);
+    background: color-mix(in srgb, var(--ui-menubar-panel-bg, #ffffff) 92%, transparent);
+    color: color-mix(in srgb, var(--ui-menubar-panel-color, #0f172a) 64%, transparent);
+    font: 600 11px/24px Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    user-select: none;
+  }
+
+  .ui-menubar-portal .content-host .submenu {
+    position: absolute;
+    top: -6px;
+    left: calc(100% + 4px);
+    min-width: max(220px, 100%);
+    padding: var(--ui-menubar-panel-padding, 6px);
+    border: var(--ui-menubar-panel-border, 1px solid rgba(15, 23, 42, 0.14));
+    border-radius: var(--ui-menubar-panel-radius, 12px);
+    background: var(--ui-menubar-panel-bg, #fff);
+    color: var(--ui-menubar-panel-color, #0f172a);
+    box-shadow: var(--ui-menubar-panel-shadow);
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(4px) scale(0.985);
+    transform-origin: top left;
+    pointer-events: none;
+    transition:
+      opacity 150ms cubic-bezier(0.2, 0.9, 0.24, 1),
+      transform 150ms cubic-bezier(0.2, 0.9, 0.24, 1);
+    z-index: 2;
+  }
+
+  .ui-menubar-portal .content-host .item[data-submenu-open="true"] > .submenu,
+  .ui-menubar-portal .content-host [role="menuitem"][data-submenu-open="true"] > .submenu,
+  .ui-menubar-portal .content-host [role="menuitemcheckbox"][data-submenu-open="true"] > .submenu,
+  .ui-menubar-portal .content-host [role="menuitemradio"][data-submenu-open="true"] > .submenu,
+  .ui-menubar-portal .content-host [data-menu-item][data-submenu-open="true"] > .submenu {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0) scale(1);
+    pointer-events: auto;
+  }
+
+  .ui-menubar-portal .content-host .item[data-submenu-side="left"] > .submenu,
+  .ui-menubar-portal .content-host [role="menuitem"][data-submenu-side="left"] > .submenu,
+  .ui-menubar-portal .content-host [role="menuitemcheckbox"][data-submenu-side="left"] > .submenu,
+  .ui-menubar-portal .content-host [role="menuitemradio"][data-submenu-side="left"] > .submenu,
+  .ui-menubar-portal .content-host [data-menu-item][data-submenu-side="left"] > .submenu {
+    left: auto;
+    right: calc(100% + 4px);
+    transform-origin: top right;
+  }
+
+  .ui-menubar-portal .content-host .item[data-submenu-align="up"] > .submenu,
+  .ui-menubar-portal .content-host [role="menuitem"][data-submenu-align="up"] > .submenu,
+  .ui-menubar-portal .content-host [role="menuitemcheckbox"][data-submenu-align="up"] > .submenu,
+  .ui-menubar-portal .content-host [role="menuitemradio"][data-submenu-align="up"] > .submenu,
+  .ui-menubar-portal .content-host [data-menu-item][data-submenu-align="up"] > .submenu {
+    top: auto;
+    bottom: -6px;
+  }
+
+  .ui-menubar-portal .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-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;
+      box-shadow: none;
+    }
+  }
+`;
+function $(n) {
+  return n === "top" || n === "left" || n === "right" ? n : "bottom";
+}
+function H(n) {
+  const e = $(n);
+  return e === "top" ? "top" : e === "left" ? "left" : e === "right" ? "right" : "bottom";
+}
+function _(n, e) {
+  if (n == null)
+    return e;
+  const t = String(n).toLowerCase();
+  return t !== "false" && t !== "0";
+}
+function w(n, e) {
+  return e <= 0 ? -1 : Number.isNaN(n) || n < 0 ? 0 : n >= e ? e - 1 : n;
+}
+function c() {
+  return [
+    '[role="menuitem"]',
+    '[role="menuitemcheckbox"]',
+    '[role="menuitemradio"]',
+    ".item",
+    "[data-menu-item]"
+  ].join(", ");
+}
+function g(n) {
+  return n.hasAttribute("disabled") || n.getAttribute("aria-disabled") === "true" || !!n.disabled;
+}
+function P(n) {
+  const e = typeof n.composedPath == "function" ? n.composedPath() : [];
+  for (const a of e)
+    if (a instanceof HTMLElement && a.matches(c()))
+      return a;
+  const t = n.target;
+  return t instanceof HTMLElement ? t.closest(c()) : null;
+}
+function d(n) {
+  return n.hasAttribute("disabled") || n.disabled;
+}
+function b(n, e) {
+  return n.getAttribute(e) || "";
+}
+class q 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);
+  }
+  static get observedAttributes() {
+    return [
+      "selected",
+      "open",
+      "headless",
+      "loop",
+      "orientation",
+      "variant",
+      "size",
+      "density",
+      "radius",
+      "shape",
+      "elevation",
+      "tone",
+      "placement",
+      "close-on-select",
+      "close-on-scroll",
+      "typeahead"
+    ];
+  }
+  _setPanelFlag(e, t) {
+    this._portalEl && (t ? this._portalEl.setAttribute(`data-${e}`, "true") : this._portalEl.removeAttribute(`data-${e}`));
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.root.addEventListener("click", this._onClick), this.root.addEventListener("keydown", this._onKeyDown), this.root.addEventListener("mousemove", this._onMouseMove), this._attachSlotListeners(), this._syncHostVisualState(), this._syncState();
+  }
+  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)) {
+      if ((e === "radius" || e === "shape") && this._syncHostVisualState(), this._syncBarA11y(), this._open && e === "placement") {
+        this._rebuildPanel();
+        return;
+      }
+      if (this._open && (e === "variant" || e === "size" || e === "density" || e === "radius" || e === "shape" || e === "elevation" || e === "tone")) {
+        this._syncPanelVisualState();
+        return;
+      }
+      this._syncState();
+    }
+  }
+  render() {
+    var t;
+    const e = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal";
+    this.setContent(`
+      <style>${R}</style>
+      <div class="bar" part="bar" role="menubar" aria-orientation="${e}">
+        <slot name="item"></slot>
+      </div>
+      <div class="content-slot" aria-hidden="true">
+        <slot name="content"></slot>
+      </div>
+      <slot></slot>
+    `), this._attachSlotListeners(), this._syncStructure(), this._syncHostVisualState(), this._syncBarA11y(), this._open && !this._portalEl ? this._rebuildPanel() : this._open && ((t = this._positioner) == null || t.update());
+  }
+  open() {
+    this.hasAttribute("headless") || this.setAttribute("open", "");
+  }
+  close() {
+    this.removeAttribute("open");
+  }
+  toggle() {
+    this.hasAttribute("open") ? this.close() : this.open();
+  }
+  get closeOnSelect() {
+    return _(this.getAttribute("close-on-select"), !0);
+  }
+  set closeOnSelect(e) {
+    this.setAttribute("close-on-select", e ? "true" : "false");
+  }
+  get closeOnScroll() {
+    return _(this.getAttribute("close-on-scroll"), !0);
+  }
+  set closeOnScroll(e) {
+    this.setAttribute("close-on-scroll", e ? "true" : "false");
+  }
+  get typeahead() {
+    return _(this.getAttribute("typeahead"), !0);
+  }
+  set typeahead(e) {
+    this.setAttribute("typeahead", e ? "true" : "false");
+  }
+  _attachSlotListeners() {
+    const e = this.root.querySelector('slot[name="item"]'), t = this.root.querySelector('slot[name="content"]');
+    this._itemSlot && this._itemSlot !== e && this._itemSlot.removeEventListener("slotchange", this._onSlotChange), this._contentSlot && this._contentSlot !== t && this._contentSlot.removeEventListener("slotchange", this._onSlotChange), e && this._itemSlot !== e && e.addEventListener("slotchange", this._onSlotChange), t && this._contentSlot !== t && t.addEventListener("slotchange", this._onSlotChange), this._itemSlot = e, this._contentSlot = t;
+  }
+  _detachSlotListeners() {
+    this._itemSlot && this._itemSlot.removeEventListener("slotchange", this._onSlotChange), this._contentSlot && this._contentSlot.removeEventListener("slotchange", this._onSlotChange), this._itemSlot = null, this._contentSlot = null;
+  }
+  _syncBarA11y() {
+    const e = this.root.querySelector(".bar");
+    if (!e)
+      return;
+    const t = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal";
+    e.setAttribute("aria-orientation", t);
+  }
+  _syncHostVisualState() {
+    const e = A(this.getAttribute("radius") || this.getAttribute("shape"));
+    e ? (this.style.setProperty("--ui-menubar-radius", e), this.style.setProperty("--ui-menubar-item-radius", e === "999px" ? "999px" : `calc(${e} - 2px)`), this.style.setProperty("--ui-menubar-panel-radius", e), this.style.setProperty("--ui-menubar-panel-item-radius", e === "999px" ? "999px" : `calc(${e} - 2px)`)) : (this.style.removeProperty("--ui-menubar-radius"), this.style.removeProperty("--ui-menubar-item-radius"), this.style.removeProperty("--ui-menubar-panel-radius"), this.style.removeProperty("--ui-menubar-panel-item-radius"));
+  }
+  _onSlotChange() {
+    this._syncState();
+  }
+  _loopEnabled() {
+    return _(this.getAttribute("loop"), !0);
+  }
+  _isOpenAttribute() {
+    return this.hasAttribute("open") && !this.hasAttribute("headless");
+  }
+  _selectedIndex() {
+    const e = this.getAttribute("selected");
+    if (e == null || e === "")
+      return this._items.length > 0 ? 0 : -1;
+    const t = Number(e);
+    return Number.isNaN(t) ? this._items.length > 0 ? 0 : -1 : t < 0 ? -1 : w(t, this._items.length);
+  }
+  _setSelectedAttribute(e) {
+    this._ignoreSelected = !0, this.setAttribute("selected", String(e)), this._ignoreSelected = !1;
+  }
+  _moveIndex(e, t) {
+    if (this._items.length === 0)
+      return -1;
+    const a = this._loopEnabled();
+    let i = e + t;
+    return i < 0 && (i = a ? this._items.length - 1 : 0), i >= this._items.length && (i = a ? 0 : this._items.length - 1), i;
+  }
+  _syncState() {
+    this._syncStructure();
+    const e = this._isOpenAttribute() && this._selectedIndex() >= 0 && this._items.length > 0;
+    if (e !== this._open) {
+      if (this._open = e, e)
+        this._bindGlobalListeners(), this._rebuildPanel(), this.dispatchEvent(
+          new CustomEvent("open", {
+            detail: { selected: this._selectedIndex() },
+            bubbles: !0
+          })
+        );
+      else {
+        this._unbindGlobalListeners();
+        const t = this._panelForIndex >= 0 ? this._panelForIndex : this._selectedIndex();
+        this._teardownPanel(), 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());
+  }
+  _bindGlobalListeners() {
+    this._globalListenersBound || (document.addEventListener("keydown", this._onDocKeyDown), document.addEventListener("scroll", this._onDocScroll, !0), this._globalListenersBound = !0);
+  }
+  _unbindGlobalListeners() {
+    this._globalListenersBound && (document.removeEventListener("keydown", this._onDocKeyDown), document.removeEventListener("scroll", this._onDocScroll, !0), this._globalListenersBound = !1);
+  }
+  _syncStructure() {
+    this._items = this._itemSlot ? this._itemSlot.assignedElements({ flatten: !0 }) : [], this._contents = this._contentSlot ? this._contentSlot.assignedElements({ flatten: !0 }) : [];
+    const e = this._selectedIndex(), t = v(this._items, {
+      activeIndex: this._focusIndex,
+      selectedIndex: e,
+      getDisabled: d
+    });
+    this._focusIndex = t;
+    const a = this._isOpenAttribute();
+    this._items.forEach((i, r) => {
+      var l;
+      const s = e === r, o = i.id || `ui-menubar-item-${this._uid}-${r}`, u = ((l = this._contents[r]) == null ? void 0 : l.id) || `ui-menubar-content-${this._uid}-${r}`;
+      i.id = o, i.setAttribute("role", "menuitem"), i.setAttribute("tabindex", r === t && !d(i) ? "0" : "-1"), i.setAttribute("aria-haspopup", "menu"), i.setAttribute("aria-expanded", s && a ? "true" : "false"), i.setAttribute("aria-controls", u), i.setAttribute("data-active", s ? "true" : "false");
+    }), y(this._items, this._items[t] || null, { activeAttribute: null }), this._contents.forEach((i, r) => {
+      const s = i.id || `ui-menubar-content-${this._uid}-${r}`;
+      i.id = s, i.setAttribute("role", "menu"), i.setAttribute("tabindex", "-1"), i.setAttribute("aria-hidden", e === r && a ? "false" : "true"), this._items[r] ? i.setAttribute("aria-labelledby", this._items[r].id) : i.removeAttribute("aria-labelledby");
+    });
+  }
+  _hydratePanelItems(e) {
+    Array.from(e.querySelectorAll(c())).forEach((a, i) => {
+      a.getAttribute("role") || a.setAttribute("role", "menuitem"), a.hasAttribute("tabindex") || a.setAttribute("tabindex", "-1"), a.hasAttribute("data-index") || a.setAttribute("data-index", String(i)), a.classList.contains("item") || a.classList.add("item");
+    });
+  }
+  _queryPanelItemsIn(e) {
+    var t;
+    return ((t = this._panelListbox()) == null ? void 0 : t.queryEnabledItems({ container: e || this._panelListbox() })) || [];
+  }
+  _submenuFor(e) {
+    return e.querySelector(z);
+  }
+  _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 i = [];
+    let r = e;
+    for (; r; ) {
+      const s = r.closest(".submenu");
+      if (!s)
+        break;
+      const o = s.parentElement;
+      if (!(o instanceof HTMLElement) || !o.matches(c()))
+        break;
+      i.unshift(o), r = o;
+    }
+    i.forEach((s) => s.setAttribute("data-submenu-open", "true")), t && this._submenuFor(e) && e.setAttribute("data-submenu-open", "true");
+  }
+  _openPanelSubmenu(e, t) {
+    var r;
+    const a = this._submenuFor(e);
+    if (!a || g(e))
+      return !1;
+    if (this._setOpenPanelBranch(e, !0), this._schedulePanelSubmenuLayout(), !t)
+      return !0;
+    const i = (r = this._panelListbox()) == null ? void 0 : r.focusBoundary("first", {
+      container: a,
+      focus: !0,
+      owner: this._panelSurface(),
+      scroll: !0
+    });
+    return i && this._setOpenPanelBranch(i, !1), !0;
+  }
+  _closeParentPanelSubmenu(e) {
+    const t = e.closest(".submenu");
+    if (!t)
+      return !1;
+    const a = t.parentElement;
+    return !(a instanceof HTMLElement) || !a.matches(c()) ? !1 : (this._focusPanelItem(a), this._setOpenPanelBranch(a, !1), a.removeAttribute("data-submenu-open"), !0);
+  }
+  _clearPanelSubmenuState() {
+    const e = this._panelListbox();
+    e && e.querySelectorAll('[data-submenu-open="true"]').forEach((t) => t.removeAttribute("data-submenu-open"));
+  }
+  _schedulePanelSubmenuLayout() {
+    this._submenuRaf != null && cancelAnimationFrame(this._submenuRaf), this._submenuRaf = requestAnimationFrame(() => {
+      this._submenuRaf = null, this._layoutPanelSubmenus();
+    });
+  }
+  _layoutPanelSubmenus() {
+    const e = this._panelListbox();
+    if (!e)
+      return;
+    const t = window.innerWidth, a = window.innerHeight;
+    Array.from(e.querySelectorAll('.item > .submenu, [role="menuitem"] > .submenu, [role="menuitemcheckbox"] > .submenu, [role="menuitemradio"] > .submenu, [data-menu-item] > .submenu')).forEach((r) => {
+      const s = r.parentElement;
+      if (!(s instanceof HTMLElement))
+        return;
+      s.removeAttribute("data-submenu-side"), s.removeAttribute("data-submenu-align");
+      const o = r.style.display, u = r.style.visibility, l = r.style.pointerEvents, m = r.style.opacity, p = r.style.transform;
+      r.style.display = "grid", r.style.visibility = "hidden", r.style.pointerEvents = "none", r.style.opacity = "0", r.style.transform = "none";
+      const h = s.getBoundingClientRect(), f = r.getBoundingClientRect();
+      h.right + 4 + f.width > t - 8 && h.left - 4 - f.width >= 8 && s.setAttribute("data-submenu-side", "left"), h.top + f.height > a - 8 && h.bottom - f.height >= 8 && s.setAttribute("data-submenu-align", "up"), r.style.display = o, r.style.visibility = u, r.style.pointerEvents = l, r.style.opacity = m, r.style.transform = p;
+    });
+  }
+  _panelListbox() {
+    return this._portalContentHostEl;
+  }
+  _panelSurface() {
+    return this._portalSurfaceEl;
+  }
+  _buildPanelContent(e) {
+    var s;
+    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>
+      <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="${c().replace(/"/g, "&quot;")}" direct-item-selector=":scope > [slot=&quot;menu&quot;] > ${c().replace(/"/g, "&quot;")}" item-role="menuitem" active-attribute="data-active"></ui-listbox>
+      </div>
+    `;
+    const i = a.querySelector("ui-listbox.content-host"), r = a.querySelector(".surface");
+    if (!i || !r)
+      return a;
+    if (r.id = (t == null ? void 0 : t.id) || `ui-menubar-panel-${this._uid}-${e}`, r.setAttribute("aria-labelledby", ((s = this._items[e]) == null ? void 0 : s.id) || ""), this._applyPanelVariantData(a), this._applyPanelTokens(a), t) {
+      const o = t.cloneNode(!0);
+      o.setAttribute("slot", "menu"), i.appendChild(o);
+    }
+    if (this._hydratePanelItems(i), i.refresh(), !i.querySelector(c())) {
+      const o = document.createElement("div");
+      o.className = "empty-state", o.textContent = "No items", i.appendChild(o);
+    }
+    return a.addEventListener("click", (o) => {
+      var p;
+      const u = P(o);
+      if (!u || g(u))
+        return;
+      if (this._submenuFor(u)) {
+        o.preventDefault(), this._openPanelSubmenu(u, !0);
+        return;
+      }
+      this._applyPanelSelectionBehavior(u);
+      const l = u.getAttribute("data-index"), m = l != null && !Number.isNaN(Number(l)) ? Number(l) : void 0;
+      this.dispatchEvent(
+        new CustomEvent("select", {
+          detail: {
+            selected: e,
+            index: m,
+            value: u.getAttribute("data-value") || u.getAttribute("value") || void 0,
+            label: u.getAttribute("aria-label") || ((p = u.textContent) == null ? void 0 : p.trim()) || void 0,
+            checked: u.getAttribute("aria-checked") === "true",
+            item: u
+          },
+          bubbles: !0
+        })
+      ), this.closeOnSelect ? this.close() : this._focusPanelItem(u);
+    }), a.addEventListener("pointerover", this._onPanelPointerOver), a.addEventListener("pointerleave", this._onPanelPointerLeave), a.addEventListener("focusin", this._onPanelFocusIn), a;
+  }
+  _applyPanelVariantData(e) {
+    const t = b(this, "variant"), a = O(this.getAttribute("size") || this.getAttribute("density")), i = b(this, "density"), r = this.getAttribute("radius"), s = b(this, "shape"), o = b(this, "elevation"), u = b(this, "tone"), l = t === "default" || t === "" ? "" : t === "glass" ? "soft" : t === "line" ? "outline" : t;
+    l ? e.setAttribute("data-variant", l) : e.removeAttribute("data-variant"), a !== "md" ? e.setAttribute("data-size", a) : e.removeAttribute("data-size"), i && i !== "default" ? e.setAttribute("data-density", i) : e.removeAttribute("data-density"), r ? e.setAttribute("data-radius", r) : 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 m = A(r || s || null);
+    m ? (e.style.setProperty("--ui-menubar-panel-radius", m), e.style.setProperty("--ui-menubar-panel-item-radius", m === "999px" ? "999px" : `calc(${m} - 2px)`)) : (e.style.removeProperty("--ui-menubar-panel-radius"), e.style.removeProperty("--ui-menubar-panel-item-radius"));
+  }
+  _applyPanelTokens(e) {
+    const t = window.getComputedStyle(this);
+    [
+      "--ui-color-primary",
+      "--ui-color-primary-hover",
+      "--ui-color-foreground-on-primary",
+      "--ui-color-background",
+      "--ui-color-surface",
+      "--ui-color-surface-alt",
+      "--ui-color-text",
+      "--ui-color-muted",
+      "--ui-color-border",
+      "--ui-color-focus-ring",
+      "--ui-color-success",
+      "--ui-color-danger",
+      "--ui-color-warning",
+      "--ui-primary",
+      "--ui-primary-hover",
+      "--ui-foreground",
+      "--ui-background",
+      "--ui-surface",
+      "--ui-surface-alt",
+      "--ui-text",
+      "--ui-muted",
+      "--ui-border",
+      "--ui-focus-ring",
+      "--ui-radius",
+      "--color-background",
+      "--color-surface",
+      "--color-panel",
+      "--color-panel-solid",
+      "--color-panel-translucent",
+      "--color-overlay",
+      "--accent-contrast",
+      "--accent-surface",
+      "--accent-indicator",
+      "--accent-track",
+      "--ui-menubar-ring",
+      "--ui-menubar-z",
+      "--ui-menubar-panel-bg",
+      "--ui-menubar-panel-color",
+      "--ui-menubar-panel-border",
+      "--ui-menubar-panel-shadow",
+      "--ui-menubar-panel-radius",
+      "--ui-menubar-panel-padding",
+      "--ui-menubar-panel-min-width",
+      "--ui-menubar-panel-item-radius",
+      "--ui-menubar-panel-item-gap",
+      "--ui-menubar-panel-item-min-height",
+      "--ui-menubar-panel-item-pad-y",
+      "--ui-menubar-panel-item-pad-x",
+      "--ui-menubar-panel-item-font-size",
+      "--ui-menubar-panel-item-font-weight",
+      "--ui-menubar-panel-item-line-height",
+      "--ui-menubar-panel-separator-margin",
+      "--ui-menubar-panel-item-hover-bg",
+      "--ui-menubar-panel-item-active-color"
+    ].forEach((i) => {
+      const r = t.getPropertyValue(i).trim();
+      r ? e.style.setProperty(i, r) : e.style.removeProperty(i);
+    }), B.forEach((i) => {
+      const r = t.getPropertyValue(i).trim();
+      r ? e.style.setProperty(i, r) : e.style.removeProperty(i);
+    }), F.forEach(({ prefix: i, from: r, to: s }) => {
+      for (let o = r; o <= s; o += 1) {
+        const u = `${i}${o}`, l = t.getPropertyValue(u).trim();
+        l ? e.style.setProperty(u, l) : e.style.removeProperty(u);
+      }
+    });
+  }
+  _syncPanelVisualState() {
+    const e = this._portalEl;
+    if (!e)
+      return;
+    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();
+  }
+  _rebuildPanel() {
+    if (!this._open)
+      return;
+    const e = this._selectedIndex(), t = this._items[e];
+    if (e < 0 || !t) {
+      this._teardownPanel();
+      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 i = k();
+    if (!i) {
+      this._portalEl = null, this._panelForIndex = -1;
+      return;
+    }
+    i.appendChild(a), this._positioner = T({
+      anchor: t,
+      floating: this._panelSurface() || a,
+      placement: H(this.getAttribute("placement")),
+      offset: 6,
+      flip: !0,
+      shift: !0,
+      fitViewport: !0,
+      observeScroll: !1
+    }), this._dismissableLayer = I({
+      node: this._panelSurface() || a,
+      trigger: t,
+      closeOnEscape: !0,
+      closeOnPointerOutside: !0,
+      onDismiss: () => this.close()
+    });
+  }
+  _teardownPanel() {
+    var e, t, a;
+    if ((e = this._dismissableLayer) == null || e.destroy(), this._dismissableLayer = null, (t = this._positioner) == null || t.destroy(), this._positioner = null, (a = this._portalEl) != null && a.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();
+  }
+  _selectIndex(e, t) {
+    const a = this._selectedIndex(), i = w(e, this._items.length);
+    i < 0 || (this._setSelectedAttribute(i), this.setAttribute("open", ""), this._syncState(), this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { selected: i, previous: a, open: !0, reason: t },
+        bubbles: !0
+      })
+    ));
+  }
+  _focusItem(e) {
+    const t = this._items[e];
+    t && (this._focusIndex = e, y(this._items, t, { activeAttribute: null }), C(t));
+  }
+  _queryPanelItems() {
+    return this._queryPanelItemsIn(this._panelListbox());
+  }
+  _focusPanelItem(e) {
+    var t;
+    e && ((t = this._panelListbox()) == null || t.setActiveItem(e, { focus: !0, owner: this._panelSurface(), scroll: !0 }));
+  }
+  _focusPanelFirst() {
+    var e;
+    (e = this._panelListbox()) == null || e.focusBoundary("first", { focus: !0, owner: this._panelSurface(), scroll: !0 });
+  }
+  _focusPanelLast() {
+    var e;
+    (e = this._panelListbox()) == null || e.focusBoundary("last", { focus: !0, owner: this._panelSurface(), scroll: !0 });
+  }
+  _movePanelFocus(e) {
+    var s, o, u;
+    const t = document.activeElement, a = t && ((s = this._portalEl) != null && s.contains(t)) ? t.closest(c()) : null, i = (a == null ? void 0 : a.closest(".submenu")) || this._panelListbox();
+    ((u = this._panelListbox()) == null ? void 0 : u.move(e, {
+      container: i,
+      current: t && ((o = this._portalEl) != null && o.contains(t)) ? t : null,
+      focus: !0,
+      owner: this._panelSurface(),
+      scroll: !0
+    })) || null || this._focusPanelFirst();
+  }
+  _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);
+  }
+  _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((i) => i === e.target || i.contains(e.target)), a = L(this._items, this._typeaheadBuffer, {
+      startIndex: t,
+      getLabel: (i) => i.getAttribute("aria-label") || i.textContent || "",
+      getDisabled: d
+    });
+    return a < 0 ? !1 : (e.preventDefault(), this._focusItem(a), this._open && this._selectIndex(a, "keyboard"), !0);
+  }
+  _typeaheadOnPanel(e) {
+    var s, o, u;
+    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, a = t && ((s = this._portalEl) != null && s.contains(t)) ? t.closest(c()) : null, i = (a == null ? void 0 : a.closest(".submenu")) || this._panelListbox();
+    return ((u = this._panelListbox()) == null ? void 0 : u.typeahead(this._typeaheadBuffer, {
+      container: i,
+      current: t && ((o = this._portalEl) != null && o.contains(t)) ? t : null,
+      focus: !0,
+      owner: this._panelSurface(),
+      scroll: !0
+    })) || null ? (e.preventDefault(), !0) : !1;
+  }
+  _applyPanelSelectionBehavior(e) {
+    const t = e.getAttribute("role");
+    if (t === "menuitemcheckbox") {
+      const s = e.getAttribute("aria-checked") !== "true";
+      e.setAttribute("aria-checked", s ? "true" : "false"), e.setAttribute("data-state", s ? "checked" : "unchecked");
+      return;
+    }
+    if (t !== "menuitemradio")
+      return;
+    const a = e.closest(".submenu") || this._panelListbox();
+    if (!a)
+      return;
+    const i = e.getAttribute("data-group") || e.getAttribute("name") || "";
+    Array.from(a.querySelectorAll('[role="menuitemradio"]')).forEach((s) => {
+      i && (s.getAttribute("data-group") || s.getAttribute("name") || "") !== i || (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((r) => t.includes(r));
+    if (a < 0)
+      return;
+    if (this._focusItem(a), this._selectedIndex() === a && this._open) {
+      this.close(), this._syncState();
+      return;
+    }
+    this._selectIndex(a, "click");
+  }
+  _onMouseMove(e) {
+    if (!this._open)
+      return;
+    const t = e.composedPath(), a = this._items.findIndex((i) => t.includes(i));
+    a < 0 || a !== this._selectedIndex() && this._selectIndex(a, "programmatic");
+  }
+  _onDocScroll(e) {
+    if (!this._open || !this.closeOnScroll)
+      return;
+    const t = typeof e.composedPath == "function" ? e.composedPath() : [];
+    this._portalEl && t.includes(this._portalEl) || this.close();
+  }
+  _onPanelPointerOver(e) {
+    var i;
+    if (!this._open)
+      return;
+    const t = P(e);
+    if (!t || g(t))
+      return;
+    const a = t.closest(".submenu") || this._panelListbox();
+    (i = this._panelListbox()) == null || i.setActiveItem(t, {
+      container: a,
+      focus: !1,
+      owner: this._panelSurface(),
+      scroll: !1
+    }), this._submenuFor(t) ? this._openPanelSubmenu(t, !1) : this._setOpenPanelBranch(t, !1);
+  }
+  _onPanelPointerLeave(e) {
+    if (!(e.currentTarget instanceof HTMLElement))
+      return;
+    const t = e.relatedTarget;
+    t instanceof Node && e.currentTarget.contains(t) || this._clearPanelSubmenuState();
+  }
+  _onPanelFocusIn(e) {
+    const t = e.target;
+    if (!(t instanceof HTMLElement))
+      return;
+    const a = t.closest(c());
+    a && (this._submenuFor(a) ? this._setOpenPanelBranch(a, !0) : this._setOpenPanelBranch(a, !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 i = !1, r = t;
+    const s = v(this._items, {
+      activeIndex: t,
+      selectedIndex: this._selectedIndex(),
+      getDisabled: d
+    });
+    e.key === "ArrowRight" ? (r = x(this._items, t, a === "rtl" ? -1 : 1, {
+      wrap: this._loopEnabled(),
+      fallbackIndex: s,
+      getDisabled: d
+    }), i = !0) : e.key === "ArrowLeft" ? (r = x(this._items, t, a === "rtl" ? 1 : -1, {
+      wrap: this._loopEnabled(),
+      fallbackIndex: s,
+      getDisabled: d
+    }), i = !0) : e.key === "Home" ? (r = S(this._items, "first", d), i = !0) : e.key === "End" ? (r = S(this._items, "last", d), i = !0) : e.key === "Enter" || e.key === " " ? (this._selectIndex(t, "keyboard"), i = !0) : e.key === "ArrowDown" ? (this._selectIndex(t, "keyboard"), setTimeout(() => this._focusPanelFirst(), 0), i = !0) : e.key === "ArrowUp" && (this._selectIndex(t, "keyboard"), setTimeout(() => this._focusPanelLast(), 0), i = !0), !(!i && this._typeaheadOnBar(e)) && i && (e.preventDefault(), r >= 0 && r !== t && (this._focusItem(r), this._open && this._selectIndex(r, "keyboard")));
+  }
+  _onDocKeyDown(e) {
+    var r;
+    if (!this._open || !(!!this._portalEl && e.composedPath().includes(this._portalEl)) || this._typeaheadOnPanel(e))
+      return;
+    if (e.key === "ArrowDown") {
+      e.preventDefault(), this._movePanelFocus(1);
+      return;
+    }
+    if (e.key === "ArrowUp") {
+      e.preventDefault(), this._movePanelFocus(-1);
+      return;
+    }
+    if (e.key === "Home") {
+      e.preventDefault(), this._focusPanelFirst();
+      return;
+    }
+    if (e.key === "End") {
+      e.preventDefault(), this._focusPanelLast();
+      return;
+    }
+    const a = document.activeElement, i = a == null ? void 0 : a.closest(c());
+    if (e.key === "ArrowRight" && i && this._openPanelSubmenu(i, !0)) {
+      e.preventDefault();
+      return;
+    }
+    if (e.key === "ArrowLeft" && i && this._closeParentPanelSubmenu(i)) {
+      e.preventDefault();
+      return;
+    }
+    if (e.key === "Tab") {
+      this.close();
+      return;
+    }
+    if (e.key === "Enter" || e.key === " ") {
+      if (!a || !((r = this._portalEl) != null && r.contains(a)) || !i || g(i) || (e.preventDefault(), this._openPanelSubmenu(i, !0)))
+        return;
+      i.click();
+    }
+  }
+  shouldRenderOnAttributeChange(e, t, a) {
+    return !1;
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-menubar") && customElements.define("ui-menubar", q);
+export {
+  q as UIMenubar
+};