@editora/ui-core 0.1.9 → 0.1.10

package/dist/navigation-menu.esm.js

@@ -0,0 +1,614 @@
+import { E as f } from "./ElementBase-909688f3.mjs";
+const _ = `
+  :host {
+    display: block;
+    position: relative;
+    z-index: var(--ui-nav-z-index, 20);
+    color-scheme: light dark;
+
+    --ui-nav-gap: var(--base-navigation-menu-gap, 6px);
+    --ui-nav-padding: var(--base-navigation-menu-padding, 6px);
+    --ui-nav-radius: var(--base-navigation-menu-radius, var(--ui-radius, 4px));
+    --ui-nav-bg: var(--base-navigation-menu-bg, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
+    --ui-nav-border: var(--base-navigation-menu-border, 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 78%, transparent));
+    --ui-nav-shadow: var(--base-navigation-menu-shadow, var(--shadow-2, none));
+    --ui-nav-ring: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
+    --ui-nav-item-radius: var(--base-navigation-menu-item-radius, var(--radius-2, 4px));
+    --ui-nav-item-min-height: var(--base-navigation-menu-item-height, 44px);
+    --ui-nav-item-pad-x: var(--base-navigation-menu-item-padding-x, 12px);
+    --ui-nav-item-pad-y: var(--base-navigation-menu-item-padding-y, 8px);
+    --ui-nav-item-font-size: var(--base-navigation-menu-item-font-size, 14px);
+    --ui-nav-item-font-weight: var(--base-navigation-menu-item-font-weight, 600);
+    --ui-nav-item-line-height: var(--base-navigation-menu-item-line-height, 20px);
+    --ui-nav-item-color: var(--ui-color-muted, var(--ui-muted, #475569));
+    --ui-nav-item-hover-bg: color-mix(in srgb, var(--ui-nav-ring) 10%, transparent);
+    --ui-nav-item-active-bg: color-mix(in srgb, var(--ui-nav-ring) 18%, transparent);
+    --ui-nav-item-active-color: var(--accent-12, var(--ui-color-text, #0f172a));
+    --ui-nav-panel-bg: var(--base-navigation-menu-panel-bg, var(--color-panel-solid, #ffffff));
+    --ui-nav-panel-border: var(--base-navigation-menu-panel-border, 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent));
+    --ui-nav-panel-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
+    --ui-nav-panel-radius: var(--base-navigation-menu-panel-radius, var(--ui-nav-radius));
+    --ui-nav-panel-shadow: var(--base-navigation-menu-panel-shadow, var(--shadow-3, none));
+    --ui-nav-panel-padding: var(--base-navigation-menu-panel-padding, 16px);
+    --ui-nav-panel-min-width: min(100%, 720px);
+    --ui-nav-panel-max-width: min(100%, 960px);
+    --ui-nav-viewport-offset: 8px;
+  }
+
+  :host([data-open="true"]) {
+    z-index: var(--ui-nav-z-index-open, 80);
+  }
+
+  .root {
+    position: relative;
+    display: grid;
+    justify-items: center;
+    align-content: start;
+    gap: 0;
+    isolation: isolate;
+  }
+
+  .bar {
+    position: relative;
+    display: grid;
+    justify-items: center;
+    width: 100%;
+    z-index: 20;
+  }
+
+  .list {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-nav-gap);
+    width: max-content;
+    max-width: 100%;
+    padding: var(--ui-nav-padding);
+    border: var(--ui-nav-border);
+    border-radius: var(--ui-nav-radius);
+    background: var(--ui-nav-bg);
+    box-shadow: var(--ui-nav-shadow);
+    box-sizing: border-box;
+  }
+
+  .indicator {
+    position: absolute;
+    left: 0;
+    top: calc(100% + 1px);
+    width: 100%;
+    height: 14px;
+    display: flex;
+    justify-content: flex-start;
+    pointer-events: none;
+    overflow: visible;
+    z-index: 40;
+  }
+
+  .indicator[hidden] {
+    display: none;
+  }
+
+  .indicator-thumb {
+    width: 12px;
+    height: 12px;
+    margin-left: var(--ui-nav-indicator-offset, 0px);
+    background: var(--ui-nav-panel-bg);
+    border: 1px solid var(--ui-nav-panel-border-color);
+    border-radius: 3px;
+    box-sizing: border-box;
+    box-shadow: 0 2px 8px rgba(2, 6, 23, 0.08);
+    transform: translateY(2px) rotate(45deg);
+    transition: margin-left 200ms cubic-bezier(0.2, 0.9, 0.24, 1);
+  }
+
+  :host([data-side="top"]) .indicator {
+    top: auto;
+    bottom: calc(100% + 1px);
+  }
+
+  :host([data-side="top"]) .indicator-thumb {
+    transform: translateY(-2px) rotate(225deg);
+  }
+
+  .viewport-shell {
+    position: absolute;
+    top: calc(100% + var(--ui-nav-viewport-offset));
+    left: 50%;
+    width: min(var(--ui-nav-panel-max-width), 100%);
+    min-width: min(100%, var(--ui-nav-panel-min-width));
+    transform: translateX(-50%);
+    z-index: 30;
+  }
+
+  :host([data-side="top"]) .viewport-shell {
+    top: auto;
+    bottom: calc(100% + var(--ui-nav-viewport-offset));
+  }
+
+  .viewport-shell[hidden] {
+    display: none;
+  }
+
+  .viewport {
+    position: relative;
+    z-index: 30;
+    min-width: 0;
+    border: var(--ui-nav-panel-border);
+    border-radius: var(--ui-nav-panel-radius);
+    background: var(--ui-nav-panel-bg);
+    box-shadow: var(--ui-nav-panel-shadow);
+    padding: var(--ui-nav-panel-padding);
+    box-sizing: border-box;
+    overflow: visible;
+  }
+
+  ::slotted([slot="item"]) {
+    appearance: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    min-height: var(--ui-nav-item-min-height);
+    padding: var(--ui-nav-item-pad-y) var(--ui-nav-item-pad-x);
+    border: 1px solid transparent;
+    border-radius: var(--ui-nav-item-radius);
+    background: transparent;
+    color: var(--ui-nav-item-color);
+    font: var(--ui-nav-item-font-weight) var(--ui-nav-item-font-size)/var(--ui-nav-item-line-height) Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    letter-spacing: var(--ui-default-letter-spacing, 0em);
+    text-decoration: none;
+    white-space: nowrap;
+    cursor: pointer;
+    outline: none;
+    box-sizing: border-box;
+    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
+  }
+
+  ::slotted([slot="item"]:hover),
+  ::slotted([slot="item"]:focus-visible) {
+    background: var(--ui-nav-item-hover-bg);
+  }
+
+  ::slotted([slot="item"]:focus-visible) {
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-nav-ring) 34%, transparent);
+  }
+
+  ::slotted([slot="item"][data-active="true"]) {
+    background: var(--ui-nav-item-active-bg);
+    color: var(--ui-nav-item-active-color);
+    border-color: color-mix(in srgb, var(--ui-nav-ring) 28%, transparent);
+  }
+
+  ::slotted([slot="panel"]) {
+    display: none;
+    position: relative;
+    z-index: 1;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  ::slotted([slot="panel"][data-active="true"]) {
+    display: block;
+  }
+
+  :host([orientation="vertical"]) .root {
+    justify-items: stretch;
+  }
+
+  :host([orientation="vertical"]) .bar {
+    justify-items: stretch;
+  }
+
+  :host([orientation="vertical"]) .list {
+    display: grid;
+    width: 100%;
+  }
+
+  :host([orientation="vertical"]) .viewport-shell {
+    position: relative;
+    top: auto;
+    left: auto;
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+    transform: none;
+    margin-top: 10px;
+  }
+
+  :host([orientation="vertical"]) .indicator {
+    display: none;
+  }
+
+  :host([variant="soft"]) {
+    --ui-nav-bg: color-mix(in srgb, var(--base-navigation-menu-bg, var(--color-panel-solid, #ffffff)) 95%, var(--accent-surface, transparent));
+    --ui-nav-panel-bg: color-mix(in srgb, var(--base-navigation-menu-panel-bg, var(--color-panel-solid, #ffffff)) 96%, var(--accent-surface, transparent));
+  }
+
+  :host([variant="solid"]) {
+    --ui-nav-item-hover-bg: color-mix(in srgb, var(--ui-nav-ring) 14%, transparent);
+    --ui-nav-item-active-bg: color-mix(in srgb, var(--ui-nav-ring) 24%, transparent);
+  }
+
+  :host([variant="outline"]) {
+    --ui-nav-shadow: none;
+    --ui-nav-panel-shadow: none;
+  }
+
+  :host([variant="flat"]) {
+    --ui-nav-bg: transparent;
+    --ui-nav-border: 1px solid transparent;
+    --ui-nav-shadow: none;
+    --ui-nav-panel-shadow: none;
+  }
+
+  :host([variant="contrast"]) {
+    --ui-nav-bg: #0f172a;
+    --ui-nav-border: 1px solid #334155;
+    --ui-nav-shadow: none;
+    --ui-nav-item-color: #cbd5e1;
+    --ui-nav-item-hover-bg: color-mix(in srgb, #ffffff 14%, transparent);
+    --ui-nav-item-active-bg: color-mix(in srgb, #ffffff 18%, transparent);
+    --ui-nav-item-active-color: #ffffff;
+    --ui-nav-panel-bg: #0f172a;
+    --ui-nav-panel-border: 1px solid #334155;
+    --ui-nav-panel-shadow: none;
+  }
+
+  :host([size="sm"]),
+  :host([size="1"]) {
+    --ui-nav-gap: 4px;
+    --ui-nav-padding: 4px;
+    --ui-nav-item-radius: 6px;
+    --ui-nav-item-min-height: 36px;
+    --ui-nav-item-pad-x: 10px;
+    --ui-nav-item-pad-y: 6px;
+    --ui-nav-item-font-size: 13px;
+    --ui-nav-item-line-height: 18px;
+    --ui-nav-panel-padding: 12px;
+    --ui-nav-panel-min-width: min(100%, 620px);
+  }
+
+  :host([size="lg"]),
+  :host([size="3"]) {
+    --ui-nav-gap: 8px;
+    --ui-nav-padding: 8px;
+    --ui-nav-item-radius: 10px;
+    --ui-nav-item-min-height: 52px;
+    --ui-nav-item-pad-x: 16px;
+    --ui-nav-item-pad-y: 10px;
+    --ui-nav-item-font-size: 15px;
+    --ui-nav-item-line-height: 22px;
+    --ui-nav-panel-padding: 18px;
+    --ui-nav-panel-min-width: min(100%, 780px);
+  }
+
+  :host([elevation="none"]) {
+    --ui-nav-shadow: none;
+    --ui-nav-panel-shadow: none;
+  }
+
+  :host([elevation="low"]) {
+    --ui-nav-shadow: 0 14px 30px rgba(2, 6, 23, 0.08), 0 2px 8px rgba(2, 6, 23, 0.05);
+    --ui-nav-panel-shadow: 0 20px 40px rgba(2, 6, 23, 0.12), 0 4px 12px rgba(2, 6, 23, 0.06);
+  }
+
+  :host([elevation="high"]) {
+    --ui-nav-shadow: 0 24px 52px rgba(2, 6, 23, 0.18), 0 8px 18px rgba(2, 6, 23, 0.08);
+    --ui-nav-panel-shadow: 0 28px 64px rgba(2, 6, 23, 0.24), 0 10px 24px rgba(2, 6, 23, 0.12);
+  }
+
+  :host([tone="neutral"]) {
+    --ui-nav-ring: color-mix(in srgb, var(--ui-color-muted, #64748b) 60%, var(--ui-color-text, #0f172a));
+  }
+
+  :host([tone="info"]) {
+    --ui-nav-ring: var(--ui-color-primary, var(--ui-primary, #2563eb));
+  }
+
+  :host([tone="success"]) {
+    --ui-nav-ring: #16a34a;
+    --ui-nav-item-active-color: #166534;
+  }
+
+  :host([tone="warning"]) {
+    --ui-nav-ring: #d97706;
+    --ui-nav-item-active-color: #92400e;
+  }
+
+  :host([tone="danger"]) {
+    --ui-nav-ring: #ef4444;
+    --ui-nav-item-active-color: #b91c1c;
+  }
+
+  :host([headless]) .list,
+  :host([headless]) .indicator,
+  :host([headless]) .viewport-shell {
+    display: none !important;
+  }
+
+  @media (prefers-contrast: more) {
+    .list,
+    .viewport {
+      border-width: 2px;
+      box-shadow: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-nav-bg: Canvas;
+      --ui-nav-border: 1px solid CanvasText;
+      --ui-nav-shadow: none;
+      --ui-nav-item-color: CanvasText;
+      --ui-nav-item-hover-bg: Highlight;
+      --ui-nav-item-active-bg: Highlight;
+      --ui-nav-item-active-color: HighlightText;
+      --ui-nav-panel-bg: Canvas;
+      --ui-nav-panel-border: 1px solid CanvasText;
+      --ui-nav-panel-shadow: none;
+    }
+
+    .list,
+    .viewport {
+      forced-color-adjust: none;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    ::slotted([slot="item"]) {
+      transition: none !important;
+    }
+
+    .indicator-thumb {
+      transition: none !important;
+    }
+  }
+`;
+function m(l, t) {
+  return t <= 0 ? -1 : Number.isNaN(l) || l < 0 ? 0 : l >= t ? t - 1 : l;
+}
+function x(l) {
+  return !l || l === "default" ? null : l === "none" || l === "square" ? "0px" : l === "sm" ? "8px" : l === "md" || l === "soft" ? "12px" : l === "lg" ? "16px" : l === "full" ? "999px" : /^\d+(\.\d+)?$/.test(l) ? `${l}px` : /^\d+(\.\d+)?(px|rem|em|%)$/.test(l) ? l : null;
+}
+const b = class v extends f {
+  constructor() {
+    super(), this._items = [], this._panels = [], this._itemPanels = [], this._ignoreSelectedAttribute = !1, this._itemSlot = null, this._panelSlot = null, this._uid = Math.random().toString(36).slice(2, 8), this._closeTimer = null, this._onClick = this._onClick.bind(this), this._onKeyDown = this._onKeyDown.bind(this), this._onPointerOver = this._onPointerOver.bind(this), this._onPointerEnter = this._onPointerEnter.bind(this), this._onPointerLeave = this._onPointerLeave.bind(this), this._onDocumentPointerDown = this._onDocumentPointerDown.bind(this), this._onDocumentKeyDown = this._onDocumentKeyDown.bind(this), this._onSlotChange = this._onSlotChange.bind(this), this._onViewportEnvironmentChange = this._onViewportEnvironmentChange.bind(this), this._onPeerMenuOpen = this._onPeerMenuOpen.bind(this);
+  }
+  static get observedAttributes() {
+    return ["selected", "orientation", "activation", "headless", "collapsible", "loop", "variant", "size", "radius", "elevation", "tone"];
+  }
+  connectedCallback() {
+    this.hasAttribute("role") || this.setAttribute("role", "navigation"), super.connectedCallback(), this.root.addEventListener("click", this._onClick), this.root.addEventListener("keydown", this._onKeyDown), this.root.addEventListener("pointerover", this._onPointerOver), this.root.addEventListener("pointerenter", this._onPointerEnter), this.root.addEventListener("pointerleave", this._onPointerLeave), document.addEventListener("pointerdown", this._onDocumentPointerDown, !0), document.addEventListener("keydown", this._onDocumentKeyDown, !0), document.addEventListener(v.OPEN_EVENT, this._onPeerMenuOpen), window.addEventListener("resize", this._onViewportEnvironmentChange, { passive: !0 }), window.addEventListener("scroll", this._onViewportEnvironmentChange, { passive: !0, capture: !0 }), this._attachSlotHandlers(), this._syncStructure();
+  }
+  disconnectedCallback() {
+    this.root.removeEventListener("click", this._onClick), this.root.removeEventListener("keydown", this._onKeyDown), this.root.removeEventListener("pointerover", this._onPointerOver), this.root.removeEventListener("pointerenter", this._onPointerEnter), this.root.removeEventListener("pointerleave", this._onPointerLeave), document.removeEventListener("pointerdown", this._onDocumentPointerDown, !0), document.removeEventListener("keydown", this._onDocumentKeyDown, !0), document.removeEventListener(v.OPEN_EVENT, this._onPeerMenuOpen), window.removeEventListener("resize", this._onViewportEnvironmentChange), window.removeEventListener("scroll", this._onViewportEnvironmentChange, !0), this._detachSlotHandlers(), this._clearCloseTimer(), super.disconnectedCallback();
+  }
+  attributeChangedCallback(t, i, n) {
+    if (!(t === "selected" && this._ignoreSelectedAttribute) && i !== n && this.isConnected) {
+      if (t === "radius") {
+        this._syncVisualState();
+        return;
+      }
+      if (t === "variant" || t === "size" || t === "elevation" || t === "tone" || t === "orientation") {
+        t === "orientation" ? this.requestRender() : this._syncVisualState(), this._syncStructure();
+        return;
+      }
+      this._syncStructure();
+    }
+  }
+  render() {
+    const t = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal";
+    this.setContent(`
+      <style>${_}</style>
+      <div class="root" part="root">
+        <div class="bar" part="bar">
+          <div class="list" part="list" role="menubar" aria-orientation="${t}">
+            <slot name="item"></slot>
+          </div>
+          <div class="indicator" part="indicator" hidden>
+            <div class="indicator-thumb"></div>
+          </div>
+        </div>
+        <div class="viewport-shell" part="viewport-shell" hidden>
+          <div class="viewport" part="viewport">
+            <slot name="panel"></slot>
+          </div>
+        </div>
+      </div>
+    `), this._syncVisualState(), this._attachSlotHandlers(), this._syncStructure();
+  }
+  _syncVisualState() {
+    const t = x(this.getAttribute("radius"));
+    t ? (this.style.setProperty("--ui-nav-radius", t), this.style.setProperty("--ui-nav-item-radius", t === "999px" ? "999px" : `max(0px, calc(${t} - 2px))`), this.style.setProperty("--ui-nav-panel-radius", t)) : (this.style.removeProperty("--ui-nav-radius"), this.style.removeProperty("--ui-nav-item-radius"), this.style.removeProperty("--ui-nav-panel-radius"));
+  }
+  _attachSlotHandlers() {
+    const t = this.root.querySelector('slot[name="item"]'), i = this.root.querySelector('slot[name="panel"]');
+    this._itemSlot && this._itemSlot !== t && this._itemSlot.removeEventListener("slotchange", this._onSlotChange), this._panelSlot && this._panelSlot !== i && this._panelSlot.removeEventListener("slotchange", this._onSlotChange), t && this._itemSlot !== t && t.addEventListener("slotchange", this._onSlotChange), i && this._panelSlot !== i && i.addEventListener("slotchange", this._onSlotChange), this._itemSlot = t, this._panelSlot = i;
+  }
+  _detachSlotHandlers() {
+    this._itemSlot && this._itemSlot.removeEventListener("slotchange", this._onSlotChange), this._panelSlot && this._panelSlot.removeEventListener("slotchange", this._onSlotChange), this._itemSlot = null, this._panelSlot = null;
+  }
+  _onSlotChange() {
+    this._syncStructure();
+  }
+  _onViewportEnvironmentChange() {
+    this._syncViewportSide(this._getSelectedFromAttribute());
+  }
+  _onPeerMenuOpen(t) {
+    const i = t.detail;
+    !i || i.uid === this._uid || this._getSelectedFromAttribute() >= 0 && this._selectIndex(-1, "programmatic");
+  }
+  _getSelectedFromAttribute() {
+    const t = this.getAttribute("selected");
+    if (t == null || t === "")
+      return -1;
+    const i = Number(t);
+    return Number.isNaN(i) || i < 0 ? -1 : m(i, this._items.length);
+  }
+  _setSelectedAttribute(t) {
+    this._ignoreSelectedAttribute = !0, t < 0 ? this.setAttribute("selected", "-1") : this.setAttribute("selected", String(t)), this._ignoreSelectedAttribute = !1;
+  }
+  _activationMode() {
+    return this.getAttribute("activation") === "manual" ? "manual" : "automatic";
+  }
+  _loopEnabled() {
+    const t = this.getAttribute("loop");
+    if (t == null)
+      return !0;
+    const i = String(t).toLowerCase();
+    return i !== "false" && i !== "0";
+  }
+  _syncStructure() {
+    const t = this.root.querySelector('slot[name="item"]'), i = this.root.querySelector('slot[name="panel"]');
+    this._items = t ? t.assignedElements({ flatten: !0 }) : [], this._panels = i ? i.assignedElements({ flatten: !0 }) : [];
+    const n = /* @__PURE__ */ new Map();
+    this._panels.forEach((e, a) => {
+      const u = e.getAttribute("data-nav-panel-for") || e.getAttribute("data-nav-key") || String(a);
+      n.set(u, e);
+    }), this._itemPanels = this._items.map((e, a) => {
+      const u = e.getAttribute("data-nav-key") || String(a);
+      return n.get(u) ?? this._panels[a] ?? null;
+    });
+    const o = this._getSelectedFromAttribute(), r = o >= 0 ? o : this._items.length > 0 ? 0 : -1, s = this.root.querySelector(".viewport-shell");
+    if (this._items.forEach((e, a) => {
+      const u = this._itemPanels[a], d = o === a, h = e.id || `ui-navigation-menu-item-${this._uid}-${a}`, c = u ? u.id || `ui-navigation-menu-panel-${this._uid}-${a}` : "";
+      e.id = h, e.setAttribute("role", "menuitem"), e.setAttribute("tabindex", a === r ? "0" : "-1"), e.setAttribute("data-active", d ? "true" : "false"), c ? (e.setAttribute("aria-haspopup", "dialog"), e.setAttribute("aria-controls", c), e.setAttribute("aria-expanded", d ? "true" : "false")) : (e.removeAttribute("aria-haspopup"), e.removeAttribute("aria-controls"), e.removeAttribute("aria-expanded"));
+    }), this._panels.forEach((e, a) => {
+      const u = this._itemPanels.findIndex((p) => p === e), d = u >= 0 && o === u, h = u >= 0 ? this._items[u] : null, c = e.id || `ui-navigation-menu-panel-${this._uid}-${a}`;
+      e.id = c, e.setAttribute("role", "group"), h != null && h.id ? e.setAttribute("aria-labelledby", h.id) : e.removeAttribute("aria-labelledby"), e.setAttribute("aria-hidden", d ? "false" : "true"), e.setAttribute("data-active", d ? "true" : "false"), d ? e.removeAttribute("hidden") : e.setAttribute("hidden", "");
+    }), s) {
+      const e = o >= 0 && !!this._itemPanels[o];
+      e ? s.removeAttribute("hidden") : s.setAttribute("hidden", ""), e ? this.setAttribute("data-open", "true") : this.removeAttribute("data-open");
+    } else
+      this.removeAttribute("data-open");
+    this._syncIndicator(o), this._syncViewportSide(o);
+  }
+  _syncIndicator(t) {
+    const i = this.root.querySelector(".indicator"), n = this.root.querySelector(".list"), o = this.root.querySelector(".bar");
+    if (!i || !n || !o)
+      return;
+    if ((this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal") === "vertical" || t < 0 || !this._itemPanels[t] || !this._items[t]) {
+      i.setAttribute("hidden", ""), this.style.removeProperty("--ui-nav-indicator-offset");
+      return;
+    }
+    i.removeAttribute("hidden");
+    const s = this._items[t];
+    queueMicrotask(() => {
+      const e = o.getBoundingClientRect(), a = n.getBoundingClientRect(), u = s.getBoundingClientRect(), d = a.left - e.left + (u.left - a.left) + u.width / 2 - 6;
+      this.style.setProperty("--ui-nav-indicator-offset", `${Math.max(0, d)}px`);
+    });
+  }
+  _syncViewportSide(t) {
+    if ((this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal") === "vertical") {
+      this.removeAttribute("data-side");
+      return;
+    }
+    const n = this.root.querySelector(".viewport-shell"), o = this.root.querySelector(".viewport"), r = this.root.querySelector(".bar");
+    if (!n || !o || !r)
+      return;
+    if (!(t >= 0 && !!this._itemPanels[t]) || n.hasAttribute("hidden")) {
+      this.removeAttribute("data-side");
+      return;
+    }
+    queueMicrotask(() => {
+      if (!this.isConnected)
+        return;
+      const e = parseFloat(getComputedStyle(this).getPropertyValue("--ui-nav-viewport-offset")) || 8, a = 12, u = r.getBoundingClientRect(), d = o.getBoundingClientRect(), h = Math.max(d.height, o.scrollHeight), c = window.innerHeight - u.bottom - e - a, p = u.top - e - a, g = h > c && p > c;
+      this.setAttribute("data-side", g ? "top" : "bottom");
+    });
+  }
+  _selectIndex(t, i) {
+    const n = this._getSelectedFromAttribute(), o = t < 0 ? -1 : m(t, this._items.length);
+    if (o === n)
+      return;
+    const r = o >= 0 && !!this._itemPanels[o];
+    this._setSelectedAttribute(o), this._syncStructure(), r && document.dispatchEvent(
+      new CustomEvent(v.OPEN_EVENT, {
+        detail: { uid: this._uid }
+      })
+    ), this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { selected: o, previous: n, reason: i },
+        bubbles: !0
+      })
+    ), this.dispatchEvent(
+      new CustomEvent("select", {
+        detail: { selected: o, previous: n, reason: i },
+        bubbles: !0
+      })
+    );
+  }
+  _focusItem(t) {
+    const i = this._items[t];
+    if (i)
+      try {
+        i.focus();
+      } catch {
+      }
+  }
+  _clearCloseTimer() {
+    this._closeTimer != null && (window.clearTimeout(this._closeTimer), this._closeTimer = null);
+  }
+  _scheduleClose() {
+    this._clearCloseTimer(), this._closeTimer = window.setTimeout(() => {
+      this._selectIndex(-1, "programmatic"), this._closeTimer = null;
+    }, 120);
+  }
+  _onPointerEnter() {
+    this._clearCloseTimer();
+  }
+  _onPointerLeave() {
+    this._activationMode() === "automatic" && this._scheduleClose();
+  }
+  _onDocumentPointerDown(t) {
+    !this.isConnected || !this.shadowRoot || t.composedPath().includes(this) || this._getSelectedFromAttribute() >= 0 && this._selectIndex(-1, "programmatic");
+  }
+  _onDocumentKeyDown(t) {
+    if (t.key !== "Escape")
+      return;
+    const i = this._getSelectedFromAttribute();
+    i < 0 || (this._selectIndex(-1, "keyboard"), this._focusItem(i));
+  }
+  _onClick(t) {
+    const i = t.composedPath(), n = this._items.findIndex((e) => i.includes(e));
+    if (n < 0)
+      return;
+    const o = !!this._itemPanels[n], r = this._getSelectedFromAttribute(), s = this.hasAttribute("collapsible");
+    if (o) {
+      s && r === n ? this._selectIndex(-1, "click") : this._selectIndex(n, "click");
+      return;
+    }
+    this._selectIndex(n, "click");
+  }
+  _onPointerOver(t) {
+    if (t.pointerType === "touch" || this._activationMode() !== "automatic")
+      return;
+    const i = t.composedPath(), n = this._items.findIndex((o) => i.includes(o));
+    n < 0 || this._getSelectedFromAttribute() !== n && this._selectIndex(n, "programmatic");
+  }
+  _moveFocus(t, i) {
+    if (this._items.length === 0)
+      return -1;
+    const n = this._loopEnabled();
+    let o = t + i;
+    return o < 0 && (o = n ? this._items.length - 1 : 0), o >= this._items.length && (o = n ? 0 : this._items.length - 1), o;
+  }
+  _onKeyDown(t) {
+    const i = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal", n = this._items.findIndex((e) => e === t.target || e.contains(t.target));
+    if (n < 0)
+      return;
+    const o = this._activationMode();
+    let r = !1, s = n;
+    i === "horizontal" ? t.key === "ArrowRight" ? (s = this._moveFocus(n, 1), r = !0) : t.key === "ArrowLeft" ? (s = this._moveFocus(n, -1), r = !0) : t.key === "ArrowDown" && this._itemPanels[n] && (this._selectIndex(n, "keyboard"), r = !0) : t.key === "ArrowDown" ? (s = this._moveFocus(n, 1), r = !0) : t.key === "ArrowUp" ? (s = this._moveFocus(n, -1), r = !0) : t.key === "ArrowRight" && this._itemPanels[n] && (this._selectIndex(n, "keyboard"), r = !0), t.key === "Home" && (s = this._items.length > 0 ? 0 : -1, r = !0), t.key === "End" && (s = this._items.length > 0 ? this._items.length - 1 : -1, r = !0), (t.key === "Enter" || t.key === " ") && (this._selectIndex(n, "keyboard"), r = !0), t.key === "Escape" && (this._selectIndex(-1, "keyboard"), r = !0), r && (t.preventDefault(), s >= 0 && s !== n ? (this._focusItem(s), o === "automatic" ? this._selectIndex(s, "keyboard") : this._items.forEach((e, a) => {
+      e.setAttribute("tabindex", a === s ? "0" : "-1");
+    })) : s === n && o === "manual" && this._items.forEach((e, a) => {
+      e.setAttribute("tabindex", a === n ? "0" : "-1");
+    }));
+  }
+};
+b.OPEN_EVENT = "ui-navigation-menu:open";
+let w = b;
+typeof customElements < "u" && !customElements.get("ui-navigation-menu") && customElements.define("ui-navigation-menu", w);
+export {
+  w as UINavigationMenu
+};