@editora/ui-core 0.1.24 → 0.2.0

package/dist/multi-select.esm.js

@@ -1,13 +1,16 @@
 import { E as T } from "./ElementBase-BeZT54Hj.mjs";
-import { a as R } from "./control-name-Bpj7F34X.mjs";
+import { O as R, s as K } from "./overlay-motion-BX3dPLay.mjs";
+import { a as M } from "./control-name-Bpj7F34X.mjs";
 import { n as z } from "./collection-C7URGjEI.mjs";
 import "./listbox-hMVOhKHC.mjs";
-let K = 0;
-const W = `
+let W = 0;
+const H = `
+  ${R}
+
   :host {
-    --ui-multi-select-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 82%, transparent);
+    --ui-multi-select-border-color: var(--ui-color-line, var(--ui-color-border, #cbd5e1));
     --ui-multi-select-border: var(--base-multi-select-border, 1px solid var(--ui-multi-select-border-color));
-    --ui-multi-select-radius: var(--base-multi-select-radius, var(--ui-radius, 4px));
+    --ui-multi-select-radius: var(--base-multi-select-radius, var(--ui-control-radius-2, var(--ui-radius, 6px)));
     --ui-multi-select-bg: var(--base-multi-select-bg, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
     --ui-multi-select-text: var(--ui-color-text, var(--ui-text, #0f172a));
     --ui-multi-select-muted: var(--ui-color-muted, var(--ui-muted, #526175));
@@ -19,13 +22,15 @@ const W = `
     --ui-multi-select-panel-bg: var(--base-multi-select-panel-bg, color-mix(in srgb, var(--ui-multi-select-bg) 98%, transparent));
     --ui-multi-select-panel-border: var(--base-multi-select-panel-border, 1px solid color-mix(in srgb, var(--ui-multi-select-border-color) 84%, transparent));
     --ui-multi-select-panel-shadow: var(--base-multi-select-panel-shadow, var(--shadow-4, 0 20px 34px rgba(2, 6, 23, 0.16)));
-    --ui-multi-select-height: var(--base-multi-select-height-md, 44px);
-    --ui-multi-select-padding-x: var(--base-multi-select-padding-x, 10px);
-    --ui-multi-select-padding-y: var(--base-multi-select-padding-y, 8px);
+    --ui-multi-select-action-size: 24px;
+    --ui-multi-select-height: var(--base-multi-select-height-md, var(--ui-control-height-2, 32px));
+    --ui-multi-select-padding-x: var(--base-multi-select-padding-x, calc(var(--ui-control-padding-inline-2, 12px) - 1px));
+    --ui-multi-select-padding-y: var(--base-multi-select-padding-y, 3px);
+    --ui-multi-select-font-size: var(--ui-control-font-size-2, 14px);
     --ui-multi-select-chip-radius: var(--base-multi-select-chip-radius, 999px);
     --ui-multi-select-chip-gap: var(--base-multi-select-chip-gap, 6px);
     --ui-multi-select-chip-padding-x: var(--base-multi-select-chip-padding-x, 10px);
-    --ui-multi-select-chip-padding-y: var(--base-multi-select-chip-padding-y, 6px);
+    --ui-multi-select-chip-padding-y: var(--base-multi-select-chip-padding-y, 2px);
     --ui-multi-select-option-radius: var(--base-multi-select-option-radius, 10px);
     --ui-multi-select-option-gap: var(--base-multi-select-option-gap, 10px);
     --ui-multi-select-option-padding-x: var(--base-multi-select-option-padding-x, 10px);
@@ -100,13 +105,19 @@ const W = `
     align-items: center;
     align-self: center;
     gap: 4px;
-    min-block-size: 28px;
+    min-block-size: var(--ui-multi-select-action-size);
+    margin-block: var(--ui-multi-select-action-bleed, 0px);
   }
 
   .shell[data-open="true"],
   .shell:focus-within {
-    border-color: color-mix(in srgb, var(--ui-multi-select-focus) 58%, var(--ui-multi-select-border-color));
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-multi-select-focus) 22%, transparent);
+    border-color: var(--ui-ring-color, var(--ui-multi-select-focus));
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-multi-select-focus));
+    outline-offset: -1px;
+  }
+
+  .shell:hover:not(:focus-within):not([data-open="true"]) {
+    border-color: var(--ui-color-line-strong, var(--ui-multi-select-border-color));
   }
 
   .shell[data-readonly="true"] {
@@ -115,7 +126,7 @@ const W = `
 
   .shell[data-invalid="true"] {
     border-color: color-mix(in srgb, var(--ui-multi-select-danger) 62%, transparent);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-multi-select-danger) 18%, transparent);
+    box-shadow: 0 0 0 1px var(--ui-multi-select-danger);
   }
 
   .chip {
@@ -154,21 +165,22 @@ const W = `
     background: transparent;
     color: inherit;
     outline: none;
-    font: 500 14px/1.4 var(--ui-font-family, "Inter", sans-serif);
-    padding: 4px 2px;
+    font: 500 var(--ui-multi-select-font-size)/1.4 var(--ui-font-family, "Inter", sans-serif);
+    padding: 2px 2px;
     margin: 0;
   }
 
   .input::placeholder {
-    color: color-mix(in srgb, var(--ui-multi-select-text) 42%, transparent);
+    color: var(--ui-color-placeholder, color-mix(in srgb, var(--ui-multi-select-text) 62%, transparent));
   }
 
   .toggle {
     border: none;
     background: transparent;
     color: color-mix(in srgb, var(--ui-multi-select-text) 64%, transparent);
-    inline-size: 28px;
-    block-size: 28px;
+    inline-size: var(--ui-multi-select-action-size);
+    block-size: var(--ui-multi-select-action-size);
+    margin-block: var(--ui-multi-select-action-bleed, 0px);
     border-radius: 8px;
     display: inline-grid;
     place-items: center;
@@ -193,8 +205,9 @@ const W = `
     border: none;
     background: transparent;
     color: color-mix(in srgb, var(--ui-multi-select-text) 64%, transparent);
-    inline-size: 28px;
-    block-size: 28px;
+    inline-size: var(--ui-multi-select-action-size);
+    block-size: var(--ui-multi-select-action-size);
+    margin-block: var(--ui-multi-select-action-bleed, 0px);
     border-radius: 8px;
     display: inline-grid;
     place-items: center;
@@ -349,38 +362,39 @@ const W = `
     opacity: 0.6;
   }
 
-  :host([size="sm"]) {
-    --ui-multi-select-height: var(--base-multi-select-height-sm, 38px);
-  }
-
   :host([size="sm"]),
   :host([size="1"]) {
-    --ui-multi-select-height: var(--base-multi-select-height-sm, 38px);
-    --ui-multi-select-padding-x: 8px;
-    --ui-multi-select-padding-y: 6px;
+    --ui-multi-select-action-size: 24px;
+    --ui-multi-select-action-bleed: -1px;
+    --ui-multi-select-height: var(--base-multi-select-height-sm, var(--ui-control-height-1, 24px));
+    --ui-multi-select-padding-x: calc(var(--ui-control-padding-inline-1, 8px) - 1px);
+    --ui-multi-select-padding-y: 0px;
+    --ui-multi-select-chip-padding-y: 0px;
+    --ui-multi-select-font-size: var(--ui-control-font-size-1, 12px);
+    --ui-multi-select-radius: var(--ui-control-radius-1, var(--ui-radius, 6px));
     --ui-multi-select-option-padding-x: 8px;
     --ui-multi-select-option-padding-y: 8px;
   }
 
-  :host([size="sm"]) .input,
   :host([size="sm"]) .option-label,
-  :host([size="1"]) .input,
   :host([size="1"]) .option-label {
     font-size: 12px;
   }
 
   :host([size="lg"]),
   :host([size="3"]) {
-    --ui-multi-select-height: var(--base-multi-select-height-lg, 48px);
-    --ui-multi-select-padding-x: 12px;
-    --ui-multi-select-padding-y: 10px;
+    --ui-multi-select-action-size: 28px;
+    --ui-multi-select-height: var(--base-multi-select-height-lg, var(--ui-control-height-3, 40px));
+    --ui-multi-select-padding-x: calc(var(--ui-control-padding-inline-3, 16px) - 1px);
+    --ui-multi-select-padding-y: 5px;
+    --ui-multi-select-chip-padding-y: 4px;
+    --ui-multi-select-font-size: var(--ui-control-font-size-3, 16px);
+    --ui-multi-select-radius: var(--ui-control-radius-3, var(--ui-radius, 6px));
     --ui-multi-select-option-padding-x: 12px;
     --ui-multi-select-option-padding-y: 12px;
   }
 
-  :host([size="lg"]) .input,
   :host([size="lg"]) .option-label,
-  :host([size="3"]) .input,
   :host([size="3"]) .option-label {
     font-size: 15px;
   }
@@ -528,7 +542,7 @@ const W = `
     --ui-multi-select-chip-text: color-mix(in srgb, var(--ui-color-danger, #dc2626) 82%, #0f172a 18%);
   }
 `;
-function I(r) {
+function q(r) {
   if (!r) return [];
   try {
     const e = JSON.parse(r);
@@ -574,12 +588,12 @@ function v(r) {
 function L(r) {
   return !r || r === "default" ? null : r === "none" || r === "square" ? "0px" : r === "sm" ? "8px" : r === "md" || r === "soft" ? "12px" : r === "lg" ? "16px" : r === "full" ? "999px" : /^\d+(\.\d+)?$/.test(r) ? `${r}px` : /^\d+(\.\d+)?(px|rem|em|%)$/.test(r) ? r : null;
 }
-function H(r) {
+function j(r) {
   return r === "sm" || r === "1" ? "sm" : r === "lg" || r === "3" ? "lg" : "md";
 }
-class M extends T {
+class J extends T {
   constructor() {
-    super(), this._options = [], this._selected = [], this._query = "", this._inputEl = null, this._shellEl = null, this._panelEl = null, this._formUnregister = null, this._outsidePointerDown = null, this._activeValue = null, this._uid = `ui-multi-select-${++K}`, this._isSyncingUi = !1, this._needsSyncUi = !1, this._onInput = this._onInput.bind(this), this._onKeyDown = this._onKeyDown.bind(this), this._onToggle = this._onToggle.bind(this), this._onFocusIn = this._onFocusIn.bind(this), this._onFocusOut = this._onFocusOut.bind(this);
+    super(), this._options = [], this._selected = [], this._query = "", this._inputEl = null, this._shellEl = null, this._panelEl = null, this._formUnregister = null, this._outsidePointerDown = null, this._activeValue = null, this._uid = `ui-multi-select-${++W}`, this._isSyncingUi = !1, this._needsSyncUi = !1, this._onInput = this._onInput.bind(this), this._onKeyDown = this._onKeyDown.bind(this), this._onToggle = this._onToggle.bind(this), this._onFocusIn = this._onFocusIn.bind(this), this._onFocusOut = this._onFocusOut.bind(this);
   }
   static get observedAttributes() {
     return [
@@ -634,7 +648,7 @@ class M extends T {
     this._detachOutsideListener(), this._formUnregister && (this._formUnregister(), this._formUnregister = null), super.disconnectedCallback();
   }
   attributeChangedCallback(e, t, s) {
-    if (t !== s && (e === "options" && (this._options = I(s)), e === "value" && (this._selected = v(s)), e === "name" && this.isConnected && this._registerWithForm(), !!this._shellEl)) {
+    if (t !== s && (e === "options" && (this._options = q(s)), e === "value" && (this._selected = v(s)), e === "name" && this.isConnected && this._registerWithForm(), !!this._shellEl)) {
       if (e === "variant" || e === "tone" || e === "density" || e === "shape" || e === "size" || e === "radius" || e === "option-radius" || e === "elevation") {
         this._syncVisualState(), e === "size" && this._syncUi();
         return;
@@ -647,7 +661,7 @@ class M extends T {
   }
   render() {
     this.setContent(`
-      <style>${W}</style>
+      <style>${H}</style>
       <div class="root">
         <div class="meta" hidden>
           <div class="label" hidden><span class="label-text" id="${this._uid}-label"></span><span class="required" hidden>*</span></div>
@@ -670,14 +684,14 @@ class M extends T {
         </div>
         <div class="error" part="error" hidden></div>
       </div>
-    `), this._options = I(this.getAttribute("options")), this._selected = v(this.getAttribute("value")), this._shellEl = this.root.querySelector(".shell"), this._inputEl = this.root.querySelector(".input"), this._panelEl = this.root.querySelector(".panel"), this._inputEl?.addEventListener("input", this._onInput), this._inputEl?.addEventListener("keydown", this._onKeyDown), this.root.querySelector(".toggle")?.addEventListener("click", this._onToggle), this.root.querySelector(".clear")?.addEventListener("click", () => this._clearSelection("clear-button")), this._shellEl?.addEventListener("focusin", this._onFocusIn), this._shellEl?.addEventListener("focusout", this._onFocusOut), this._syncVisualState(), this._syncUi();
+    `), this._options = q(this.getAttribute("options")), this._selected = v(this.getAttribute("value")), this._shellEl = this.root.querySelector(".shell"), this._inputEl = this.root.querySelector(".input"), this._panelEl = this.root.querySelector(".panel"), this._inputEl?.addEventListener("input", this._onInput), this._inputEl?.addEventListener("keydown", this._onKeyDown), this.root.querySelector(".toggle")?.addEventListener("click", this._onToggle), this.root.querySelector(".clear")?.addEventListener("click", () => this._clearSelection("clear-button")), this._shellEl?.addEventListener("focusin", this._onFocusIn), this._shellEl?.addEventListener("focusout", this._onFocusOut), this._syncVisualState(), this._syncUi();
   }
   _syncVisualState() {
     const e = L(this.getAttribute("radius") || this.getAttribute("shape"));
     e ? this.style.setProperty("--ui-multi-select-radius", e) : this.style.removeProperty("--ui-multi-select-radius");
     const t = L(this.getAttribute("option-radius"));
     t ? this.style.setProperty("--ui-multi-select-option-radius", t) : this.style.removeProperty("--ui-multi-select-option-radius");
-    const s = H(this.getAttribute("size"));
+    const s = j(this.getAttribute("size"));
     this.setAttribute("data-size", s);
   }
   _selectionIndicator() {
@@ -832,7 +846,7 @@ class M extends T {
     if (!(!this._shellEl || !this._inputEl || !this._panelEl)) {
       this._isSyncingUi = !0;
       try {
-        const e = (this.getAttribute("label") || "").trim(), t = (this.getAttribute("description") || "").trim(), s = (this.getAttribute("data-error") || "").trim(), l = this.root.querySelector(".meta"), n = this.root.querySelector(".label"), a = this.root.querySelector(".label-text"), c = this.root.querySelector(".required"), p = this.root.querySelector(".description"), N = this.root.querySelector(".chips"), S = this.root.querySelector(".toggle"), U = this.root.querySelector(".clear"), x = this.root.querySelector(".error"), C = this._selectionIndicator(), q = this.hasAttribute("loading"), O = (this.getAttribute("loading-text") || "Loading options...").trim(), m = this.hasAttribute("disabled"), b = this.hasAttribute("readonly"), D = this.hasAttribute("clearable");
+        const e = (this.getAttribute("label") || "").trim(), t = (this.getAttribute("description") || "").trim(), s = (this.getAttribute("data-error") || "").trim(), l = this.root.querySelector(".meta"), n = this.root.querySelector(".label"), a = this.root.querySelector(".label-text"), c = this.root.querySelector(".required"), p = this.root.querySelector(".description"), O = this.root.querySelector(".chips"), S = this.root.querySelector(".toggle"), C = this.root.querySelector(".clear"), x = this.root.querySelector(".error"), U = this._selectionIndicator(), I = this.hasAttribute("loading"), N = (this.getAttribute("loading-text") || "Loading options...").trim(), m = this.hasAttribute("disabled"), b = this.hasAttribute("readonly"), D = this.hasAttribute("clearable");
         if (l.hidden = !e && !t, n.hidden = !e, a.textContent = e, e)
           this._inputEl.setAttribute("aria-labelledby", `${this._uid}-label`), this._inputEl.removeAttribute("aria-label");
         else {
@@ -840,12 +854,12 @@ class M extends T {
           const i = (this.getAttribute("aria-label") || "").trim();
           i ? this._inputEl.setAttribute("aria-label", i) : this._inputEl.removeAttribute("aria-label");
         }
-        c.hidden = !this.hasAttribute("required"), p.hidden = !t, p.textContent = t, x.hidden = !s, x.textContent = s, x.id = `${this._uid}-error`, R(
+        c.hidden = !this.hasAttribute("required"), p.hidden = !t, p.textContent = t, x.hidden = !s, x.textContent = s, x.id = `${this._uid}-error`, M(
           this._inputEl,
           this,
           this._uid,
           [t ? `${this._uid}-description` : "", s ? `${this._uid}-error` : ""].filter(Boolean)
-        ), this._shellEl.setAttribute("data-open", this.open ? "true" : "false"), this._shellEl.setAttribute("data-invalid", s ? "true" : "false"), this._shellEl.setAttribute("data-readonly", b ? "true" : "false"), m ? this._shellEl.setAttribute("aria-disabled", "true") : this._shellEl.removeAttribute("aria-disabled"), S.setAttribute("data-open", this.open ? "true" : "false"), S.disabled = m || b, U.hidden = !D || this._selected.length === 0, U.disabled = m || b, this._inputEl.setAttribute("aria-expanded", this.open ? "true" : "false"), this._inputEl.setAttribute("aria-busy", q ? "true" : "false"), this._inputEl.placeholder = this._selected.length ? "" : this.getAttribute("placeholder") || "Select options", this._inputEl.disabled = m, this._inputEl.readOnly = b, this._inputEl.value !== this._query && (this._inputEl.value = this._query), this.open ? this._attachOutsideListener() : this._detachOutsideListener(), N.replaceChildren(...this._selectedOptionRecords().map((i) => {
+        ), this._shellEl.setAttribute("data-open", this.open ? "true" : "false"), this._shellEl.setAttribute("data-invalid", s ? "true" : "false"), this._shellEl.setAttribute("data-readonly", b ? "true" : "false"), m ? this._shellEl.setAttribute("aria-disabled", "true") : this._shellEl.removeAttribute("aria-disabled"), S.setAttribute("data-open", this.open ? "true" : "false"), S.disabled = m || b, C.hidden = !D || this._selected.length === 0, C.disabled = m || b, this._inputEl.setAttribute("aria-expanded", this.open ? "true" : "false"), this._inputEl.setAttribute("aria-busy", I ? "true" : "false"), this._inputEl.placeholder = this._selected.length ? "" : this.getAttribute("placeholder") || "Select options", this._inputEl.disabled = m, this._inputEl.readOnly = b, this._inputEl.value !== this._query && (this._inputEl.value = this._query), this.open ? this._attachOutsideListener() : this._detachOutsideListener(), O.replaceChildren(...this._selectedOptionRecords().map((i) => {
           const h = document.createElement("span");
           h.className = "chip", h.textContent = i.label;
           const d = document.createElement("button");
@@ -855,10 +869,10 @@ class M extends T {
             o.preventDefault(), o.stopPropagation(), this._removeChip(i.value), this._inputEl?.focus();
           }), h.append(d), h;
         }));
-        const _ = this._filteredOptions(), F = this._renderLimit(), y = _.slice(0, F), V = _.length > y.length;
-        if (this._panelEl.hidden = !this.open, q) {
+        const _ = this._filteredOptions(), V = this._renderLimit(), y = _.slice(0, V), F = _.length > y.length;
+        if (K(this._panelEl, this.open, "bottom"), I) {
           const i = document.createElement("div");
-          i.className = "status", i.textContent = O, this._panelEl.replaceChildren(i), this._inputEl.removeAttribute("aria-activedescendant");
+          i.className = "status", i.textContent = N, this._panelEl.replaceChildren(i), this._inputEl.removeAttribute("aria-activedescendant");
           return;
         }
         if (!_.length) {
@@ -874,7 +888,7 @@ class M extends T {
             u.className = "group", u.setAttribute("role", "presentation"), u.textContent = i.group, g.push(u), E = i.group;
           } else i.group || (E = null);
           const d = $.has(i.value), o = document.createElement("button");
-          o.className = "option", o.type = "button", o.id = `${this._uid}-option-${h}`, o.setAttribute("role", "option"), o.setAttribute("data-value", i.value), o.setAttribute("data-selected", String(d)), o.setAttribute("data-indicator", C), o.setAttribute("aria-selected", d ? "true" : "false"), (i.disabled || m || b) && (o.disabled = !0), o.addEventListener("pointerdown", (u) => {
+          o.className = "option", o.type = "button", o.id = `${this._uid}-option-${h}`, o.setAttribute("role", "option"), o.setAttribute("data-value", i.value), o.setAttribute("data-selected", String(d)), o.setAttribute("data-indicator", U), o.setAttribute("aria-selected", d ? "true" : "false"), (i.disabled || m || b) && (o.disabled = !0), o.addEventListener("pointerdown", (u) => {
             u.preventDefault();
           }), o.addEventListener("click", (u) => {
             u.preventDefault(), !i.disabled && (this._activeValue = i.value, this._toggleValue(i.value, "option"), this._query = "", this._inputEl && (this._inputEl.value = ""), this._inputEl?.focus());
@@ -886,12 +900,12 @@ class M extends T {
             const u = document.createElement("span");
             u.className = "option-description", u.textContent = i.description, f.append(u);
           }
-          if (C !== "none") {
+          if (U !== "none") {
             const u = document.createElement("span");
             u.className = "check", u.textContent = d ? "✓" : "", o.append(u);
           }
           o.append(f), g.push(o);
-        }), V) {
+        }), F) {
           const i = document.createElement("div");
           i.className = "status", i.textContent = `Showing first ${y.length} results. Keep typing to narrow the list.`, g.push(i);
         }
@@ -904,7 +918,7 @@ class M extends T {
     }
   }
 }
-typeof customElements < "u" && !customElements.get("ui-multi-select") && customElements.define("ui-multi-select", M);
+typeof customElements < "u" && !customElements.get("ui-multi-select") && customElements.define("ui-multi-select", J);
 export {
-  M as UIMultiSelect
+  J as UIMultiSelect
 };

package/dist/navigation-menu.cjs.js

@@ -6,22 +6,22 @@
     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-padding: var(--base-navigation-menu-padding, 0px);
+    --ui-nav-radius: var(--base-navigation-menu-radius, var(--ui-radius, 6px));
+    --ui-nav-bg: var(--base-navigation-menu-bg, transparent);
+    --ui-nav-border: var(--base-navigation-menu-border, 0);
+    --ui-nav-shadow: var(--base-navigation-menu-shadow, 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-radius: var(--base-navigation-menu-item-radius, var(--ui-control-radius-2, var(--ui-radius, 6px)));
     --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-pad-y: var(--base-navigation-menu-item-padding-y, 6px);
     --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-hover-bg: var(--ui-color-fill, color-mix(in srgb, var(--ui-nav-ring) 10%, transparent));
+    --ui-nav-item-active-bg: var(--ui-color-accent-fill, 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));
@@ -379,4 +379,4 @@
           </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:b(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=new Map;this._panels.forEach((e,r)=>{const u=e.getAttribute("data-nav-panel-for")||e.getAttribute("data-nav-key")||String(r);n.set(u,e)}),this._itemPanels=this._items.map((e,r)=>{const u=e.getAttribute("data-nav-key")||String(r);return n.get(u)??this._panels[r]??null});const o=this._getSelectedFromAttribute(),a=o>=0?o:this._items.length>0?0:-1,s=this.root.querySelector(".viewport-shell");if(this._items.forEach((e,r)=>{const u=this._itemPanels[r],d=o===r,c=e.id||`ui-navigation-menu-item-${this._uid}-${r}`,h=u?u.id||`ui-navigation-menu-panel-${this._uid}-${r}`:"";e.id=c,e.setAttribute("role","menuitem"),e.setAttribute("tabindex",r===a?"0":"-1"),e.setAttribute("data-active",d?"true":"false"),h?(e.setAttribute("aria-haspopup","dialog"),e.setAttribute("aria-controls",h),e.setAttribute("aria-expanded",d?"true":"false")):(e.removeAttribute("aria-haspopup"),e.removeAttribute("aria-controls"),e.removeAttribute("aria-expanded"))}),this._panels.forEach((e,r)=>{const u=this._itemPanels.findIndex(m=>m===e),d=u>=0&&o===u,c=u>=0?this._items[u]:null,h=e.id||`ui-navigation-menu-panel-${this._uid}-${r}`;e.id=h,e.setAttribute("role","group"),c?.id?e.setAttribute("aria-labelledby",c.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(),r=n.getBoundingClientRect(),u=s.getBoundingClientRect(),d=r.left-e.left+(u.left-r.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"),a=this.root.querySelector(".bar");if(!n||!o||!a)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,r=12,u=a.getBoundingClientRect(),d=o.getBoundingClientRect(),c=Math.max(d.height,o.scrollHeight),h=window.innerHeight-u.bottom-e-r,m=u.top-e-r,g=c>h&&m>h;this.setAttribute("data-side",g?"top":"bottom")})}_selectIndex(t,i){const n=this._getSelectedFromAttribute(),o=t<0?-1:b(t,this._items.length);if(o===n)return;const a=o>=0&&!!this._itemPanels[o];this._setSelectedAttribute(o),this._syncStructure(),a&&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],a=this._getSelectedFromAttribute(),s=this.hasAttribute("collapsible");if(o){s&&a===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 a=!1,s=n;i==="horizontal"?t.key==="ArrowRight"?(s=this._moveFocus(n,1),a=!0):t.key==="ArrowLeft"?(s=this._moveFocus(n,-1),a=!0):t.key==="ArrowDown"&&this._itemPanels[n]&&(this._selectIndex(n,"keyboard"),a=!0):t.key==="ArrowDown"?(s=this._moveFocus(n,1),a=!0):t.key==="ArrowUp"?(s=this._moveFocus(n,-1),a=!0):t.key==="ArrowRight"&&this._itemPanels[n]&&(this._selectIndex(n,"keyboard"),a=!0),t.key==="Home"&&(s=this._items.length>0?0:-1,a=!0),t.key==="End"&&(s=this._items.length>0?this._items.length-1:-1,a=!0),(t.key==="Enter"||t.key===" ")&&(this._selectIndex(n,"keyboard"),a=!0),t.key==="Escape"&&(this._selectIndex(-1,"keyboard"),a=!0),a&&(t.preventDefault(),s>=0&&s!==n?(this._focusItem(s),o==="automatic"?this._selectIndex(s,"keyboard"):this._items.forEach((e,r)=>{e.setAttribute("tabindex",r===s?"0":"-1")})):s===n&&o==="manual"&&this._items.forEach((e,r)=>{e.setAttribute("tabindex",r===n?"0":"-1")}))}};v.OPEN_EVENT="ui-navigation-menu:open";let p=v;typeof customElements<"u"&&!customElements.get("ui-navigation-menu")&&customElements.define("ui-navigation-menu",p);exports.UINavigationMenu=p;
+    `),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:b(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=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,c=e.id||`ui-navigation-menu-item-${this._uid}-${a}`,h=u?u.id||`ui-navigation-menu-panel-${this._uid}-${a}`:"";e.id=c,e.setAttribute("role","menuitem"),e.setAttribute("tabindex",a===r?"0":"-1"),e.setAttribute("data-active",d?"true":"false"),h?(e.setAttribute("aria-haspopup","dialog"),e.setAttribute("aria-controls",h),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(m=>m===e),d=u>=0&&o===u,c=u>=0?this._items[u]:null,h=e.id||`ui-navigation-menu-panel-${this._uid}-${a}`;e.id=h,e.setAttribute("role","group"),c?.id?e.setAttribute("aria-labelledby",c.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(),c=Math.max(d.height,o.scrollHeight),h=window.innerHeight-u.bottom-e-a,m=u.top-e-a,g=c>h&&m>h;this.setAttribute("data-side",g?"top":"bottom")})}_selectIndex(t,i){const n=this._getSelectedFromAttribute(),o=t<0?-1:b(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")}))}};v.OPEN_EVENT="ui-navigation-menu:open";let p=v;typeof customElements<"u"&&!customElements.get("ui-navigation-menu")&&customElements.define("ui-navigation-menu",p);exports.UINavigationMenu=p;

package/dist/navigation-menu.esm.js

@@ -7,22 +7,22 @@ const _ = `
     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-padding: var(--base-navigation-menu-padding, 0px);
+    --ui-nav-radius: var(--base-navigation-menu-radius, var(--ui-radius, 6px));
+    --ui-nav-bg: var(--base-navigation-menu-bg, transparent);
+    --ui-nav-border: var(--base-navigation-menu-border, 0);
+    --ui-nav-shadow: var(--base-navigation-menu-shadow, 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-radius: var(--base-navigation-menu-item-radius, var(--ui-control-radius-2, var(--ui-radius, 6px)));
     --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-pad-y: var(--base-navigation-menu-item-padding-y, 6px);
     --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-hover-bg: var(--ui-color-fill, color-mix(in srgb, var(--ui-nav-ring) 10%, transparent));
+    --ui-nav-item-active-bg: var(--ui-color-accent-fill, 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));
@@ -460,19 +460,19 @@ const v = class v extends f {
     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, r) => {
-      const u = e.getAttribute("data-nav-panel-for") || e.getAttribute("data-nav-key") || String(r);
+    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, r) => {
-      const u = e.getAttribute("data-nav-key") || String(r);
-      return n.get(u) ?? this._panels[r] ?? null;
+    }), 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(), a = o >= 0 ? o : this._items.length > 0 ? 0 : -1, s = this.root.querySelector(".viewport-shell");
-    if (this._items.forEach((e, r) => {
-      const u = this._itemPanels[r], d = o === r, c = e.id || `ui-navigation-menu-item-${this._uid}-${r}`, h = u ? u.id || `ui-navigation-menu-panel-${this._uid}-${r}` : "";
-      e.id = c, e.setAttribute("role", "menuitem"), e.setAttribute("tabindex", r === a ? "0" : "-1"), e.setAttribute("data-active", d ? "true" : "false"), h ? (e.setAttribute("aria-haspopup", "dialog"), e.setAttribute("aria-controls", h), e.setAttribute("aria-expanded", d ? "true" : "false")) : (e.removeAttribute("aria-haspopup"), e.removeAttribute("aria-controls"), e.removeAttribute("aria-expanded"));
-    }), this._panels.forEach((e, r) => {
-      const u = this._itemPanels.findIndex((p) => p === e), d = u >= 0 && o === u, c = u >= 0 ? this._items[u] : null, h = e.id || `ui-navigation-menu-panel-${this._uid}-${r}`;
+    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, c = e.id || `ui-navigation-menu-item-${this._uid}-${a}`, h = u ? u.id || `ui-navigation-menu-panel-${this._uid}-${a}` : "";
+      e.id = c, e.setAttribute("role", "menuitem"), e.setAttribute("tabindex", a === r ? "0" : "-1"), e.setAttribute("data-active", d ? "true" : "false"), h ? (e.setAttribute("aria-haspopup", "dialog"), e.setAttribute("aria-controls", h), 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, c = u >= 0 ? this._items[u] : null, h = e.id || `ui-navigation-menu-panel-${this._uid}-${a}`;
       e.id = h, e.setAttribute("role", "group"), c?.id ? e.setAttribute("aria-labelledby", c.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];
@@ -491,7 +491,7 @@ const v = class v extends f {
     i.removeAttribute("hidden");
     const s = this._items[t];
     queueMicrotask(() => {
-      const e = o.getBoundingClientRect(), r = n.getBoundingClientRect(), u = s.getBoundingClientRect(), d = r.left - e.left + (u.left - r.left) + u.width / 2 - 6;
+      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`);
     });
   }
@@ -500,23 +500,23 @@ const v = class v extends f {
       this.removeAttribute("data-side");
       return;
     }
-    const n = this.root.querySelector(".viewport-shell"), o = this.root.querySelector(".viewport"), a = this.root.querySelector(".bar");
-    if (!n || !o || !a) 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, r = 12, u = a.getBoundingClientRect(), d = o.getBoundingClientRect(), c = Math.max(d.height, o.scrollHeight), h = window.innerHeight - u.bottom - e - r, p = u.top - e - r, g = c > h && p > h;
+      const e = parseFloat(getComputedStyle(this).getPropertyValue("--ui-nav-viewport-offset")) || 8, a = 12, u = r.getBoundingClientRect(), d = o.getBoundingClientRect(), c = Math.max(d.height, o.scrollHeight), h = window.innerHeight - u.bottom - e - a, p = u.top - e - a, g = c > h && p > h;
       this.setAttribute("data-side", g ? "top" : "bottom");
     });
   }
   _selectIndex(t, i) {
     const n = this._getSelectedFromAttribute(), o = t < 0 ? -1 : b(t, this._items.length);
     if (o === n) return;
-    const a = o >= 0 && !!this._itemPanels[o];
-    this._setSelectedAttribute(o), this._syncStructure(), a && document.dispatchEvent(
+    const r = o >= 0 && !!this._itemPanels[o];
+    this._setSelectedAttribute(o), this._syncStructure(), r && document.dispatchEvent(
       new CustomEvent(v.OPEN_EVENT, {
         detail: { uid: this._uid }
       })
@@ -565,9 +565,9 @@ const v = class v extends f {
   _onClick(t) {
     const i = t.composedPath(), n = this._items.findIndex((e) => i.includes(e));
     if (n < 0) return;
-    const o = !!this._itemPanels[n], a = this._getSelectedFromAttribute(), s = this.hasAttribute("collapsible");
+    const o = !!this._itemPanels[n], r = this._getSelectedFromAttribute(), s = this.hasAttribute("collapsible");
     if (o) {
-      s && a === n ? this._selectIndex(-1, "click") : this._selectIndex(n, "click");
+      s && r === n ? this._selectIndex(-1, "click") : this._selectIndex(n, "click");
       return;
     }
     this._selectIndex(n, "click");
@@ -587,11 +587,11 @@ const v = class v extends f {
     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 a = !1, s = n;
-    i === "horizontal" ? t.key === "ArrowRight" ? (s = this._moveFocus(n, 1), a = !0) : t.key === "ArrowLeft" ? (s = this._moveFocus(n, -1), a = !0) : t.key === "ArrowDown" && this._itemPanels[n] && (this._selectIndex(n, "keyboard"), a = !0) : t.key === "ArrowDown" ? (s = this._moveFocus(n, 1), a = !0) : t.key === "ArrowUp" ? (s = this._moveFocus(n, -1), a = !0) : t.key === "ArrowRight" && this._itemPanels[n] && (this._selectIndex(n, "keyboard"), a = !0), t.key === "Home" && (s = this._items.length > 0 ? 0 : -1, a = !0), t.key === "End" && (s = this._items.length > 0 ? this._items.length - 1 : -1, a = !0), (t.key === "Enter" || t.key === " ") && (this._selectIndex(n, "keyboard"), a = !0), t.key === "Escape" && (this._selectIndex(-1, "keyboard"), a = !0), a && (t.preventDefault(), s >= 0 && s !== n ? (this._focusItem(s), o === "automatic" ? this._selectIndex(s, "keyboard") : this._items.forEach((e, r) => {
-      e.setAttribute("tabindex", r === s ? "0" : "-1");
-    })) : s === n && o === "manual" && this._items.forEach((e, r) => {
-      e.setAttribute("tabindex", r === n ? "0" : "-1");
+    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");
     }));
   }
 };