@editora/ui-core 0.2.2 → 0.3.0

package/dist/select.esm.js

@@ -1,10 +1,12 @@
-import { E as R } from "./ElementBase-BeZT54Hj.mjs";
-import { s as M, O as $ } from "./overlay-motion-BX3dPLay.mjs";
-import { e as q } from "./control-name-Bpj7F34X.mjs";
-import { f as L, b as F, a as D } from "./collection-C7URGjEI.mjs";
-import { r as O } from "./listbox-hMVOhKHC.mjs";
-const T = `
-  ${$}
+import { E as q } from "./ElementBase-D5QsC5Vw.mjs";
+import { h as L } from "./clone-source-BxK2pEVw.mjs";
+import { F as D, i as O } from "./form-control-D9wWUMBl.mjs";
+import { s as T, O as B } from "./overlay-motion-BX3dPLay.mjs";
+import { e as N } from "./control-name-Bpj7F34X.mjs";
+import { f as H, b as U, a as V } from "./collection-C7URGjEI.mjs";
+import { r as W } from "./listbox-hMVOhKHC.mjs";
+const Y = `
+  ${B}
 
   :host {
     --ui-select-width: var(--ui-width, min(340px, 100%));
@@ -609,7 +611,7 @@ const T = `
     --ui-select-label: #e2e8f0;
     --ui-select-description: #93a4bd;
     --ui-select-border-color: #334155;
-    --ui-select-focus: #93c5fd;
+    --ui-select-focus: var(--ui-color-accent-on-dark, #93c5fd);
     --ui-select-indicator-color: #9fb3cf;
     --ui-select-elevation: 0 10px 30px rgba(2, 6, 23, 0.35);
     --ui-select-menu-bg: #0b1324;
@@ -715,20 +717,20 @@ const T = `
     }
   }
 `;
-function h(p) {
-  if (p == null) return !1;
-  const e = String(p).toLowerCase();
+function h(m) {
+  if (m == null) return !1;
+  const e = String(m).toLowerCase();
   return e !== "false" && e !== "0";
 }
-function v(p) {
-  return String(p).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+function _(m) {
+  return String(m).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function U(p) {
-  if (!p) return null;
-  const e = String(p).trim();
+function j(m) {
+  if (!m) return null;
+  const e = String(m).trim();
   return e ? e === "none" ? "4px" : e === "full" ? "999px" : e === "large" ? "16px" : /^-?\\d+(\\.\\d+)?$/.test(e) ? `${e}px` : e : null;
 }
-const S = /* @__PURE__ */ new Set([
+const P = /* @__PURE__ */ new Set([
   "value",
   "disabled",
   "loading",
@@ -756,10 +758,20 @@ const S = /* @__PURE__ */ new Set([
   "data-invalid",
   "data-valid",
   "close-on-scroll"
-]);
-class B extends R {
+]), E = class E extends q {
   constructor() {
-    super(), this._controlEl = null, this._triggerEl = null, this._valueEl = null, this._panelEl = null, this._menuEl = null, this._observer = null, this._formUnregister = null, this._optionsSyncRaf = 0, this._panelPlacementRaf = 0, this._uid = Math.random().toString(36).slice(2, 8), this._options = [], this._menuItems = [], this._optionsFingerprint = "", this._menuRenderFingerprint = "", this._open = !1, this._activeIndex = -1, this._placement = "bottom", this._onRootClick = this._onRootClick.bind(this), this._onRootKeyDown = this._onRootKeyDown.bind(this), this._onRootPointerDown = this._onRootPointerDown.bind(this), this._onRootPointerMove = this._onRootPointerMove.bind(this), this._onSlotChange = this._onSlotChange.bind(this), this._onDocumentPointerDown = this._onDocumentPointerDown.bind(this), this._onWindowResize = this._onWindowResize.bind(this), this._onWindowScroll = this._onWindowScroll.bind(this);
+    super(), this._formControl = new D(this, {
+      getValue: () => this.value,
+      getValidity: () => ({
+        valueMissing: O(this) && !this.value,
+        message: "Please select an item in the list.",
+        anchor: this._triggerEl
+      }),
+      defaultAttribute: "value",
+      onFormDisabled: () => {
+        this._syncControlState(), this.disabled && this._open && this._closeMenu({ restoreFocus: !1 });
+      }
+    }), this._controlEl = null, this._triggerEl = null, this._valueEl = null, this._panelEl = null, this._menuEl = null, this._observer = null, this._formUnregister = null, this._optionsSyncRaf = 0, this._panelPlacementRaf = 0, this._renderedExternalHtml = "", this._uid = Math.random().toString(36).slice(2, 8), this._options = [], this._menuItems = [], this._optionsFingerprint = "", this._menuRenderFingerprint = "", this._open = !1, this._activeIndex = -1, this._placement = "bottom", this._onRootClick = this._onRootClick.bind(this), this._onRootKeyDown = this._onRootKeyDown.bind(this), this._onRootPointerDown = this._onRootPointerDown.bind(this), this._onRootPointerMove = this._onRootPointerMove.bind(this), this._onSlotChange = this._onSlotChange.bind(this), this._onDocumentPointerDown = this._onDocumentPointerDown.bind(this), this._onWindowResize = this._onWindowResize.bind(this), this._onWindowScroll = this._onWindowScroll.bind(this);
   }
   static get observedAttributes() {
     return [
@@ -794,8 +806,18 @@ class B extends R {
       "close-on-scroll"
     ];
   }
+  formResetCallback() {
+    this._formControl.formResetCallback();
+  }
+  formDisabledCallback(e) {
+    this._formControl.formDisabledCallback(e);
+  }
+  /** The `<form>` this field belongs to, if any. */
+  get form() {
+    return this._formControl.form;
+  }
   connectedCallback() {
-    super.connectedCallback(), this.root.addEventListener("click", this._onRootClick), this.root.addEventListener("keydown", this._onRootKeyDown), this.root.addEventListener("pointerdown", this._onRootPointerDown), this.root.addEventListener("pointermove", this._onRootPointerMove, { passive: !0 }), this.root.addEventListener("slotchange", this._onSlotChange), this._observer = new MutationObserver((e) => {
+    super.connectedCallback(), this._formControl.connect(), this.root.addEventListener("click", this._onRootClick), this.root.addEventListener("keydown", this._onRootKeyDown), this.root.addEventListener("pointerdown", this._onRootPointerDown), this.root.addEventListener("pointermove", this._onRootPointerMove, { passive: !0 }), this.root.addEventListener("slotchange", this._onSlotChange), this._observer = new MutationObserver((e) => {
       e.some((i) => {
         if (!(i.target instanceof HTMLElement) || i.target === this) return i.type === "childList";
         const s = i.target.tagName.toLowerCase();
@@ -809,14 +831,14 @@ class B extends R {
     }), this._attachFormRegistration();
   }
   disconnectedCallback() {
-    this.root.removeEventListener("click", this._onRootClick), this.root.removeEventListener("keydown", this._onRootKeyDown), this.root.removeEventListener("pointerdown", this._onRootPointerDown), this.root.removeEventListener("pointermove", this._onRootPointerMove), this.root.removeEventListener("slotchange", this._onSlotChange), this._teardownOpenListeners(), this._observer && (this._observer.disconnect(), this._observer = null), this._cancelOptionsSync(), this._cancelPanelPlacement(), this._formUnregister && (this._formUnregister(), this._formUnregister = null), super.disconnectedCallback();
+    this._formControl.disconnect(), this.root.removeEventListener("click", this._onRootClick), this.root.removeEventListener("keydown", this._onRootKeyDown), this.root.removeEventListener("pointerdown", this._onRootPointerDown), this.root.removeEventListener("pointermove", this._onRootPointerMove), this.root.removeEventListener("slotchange", this._onSlotChange), this._teardownOpenListeners(), this._observer && (this._observer.disconnect(), this._observer = null), this._cancelOptionsSync(), this._cancelPanelPlacement(), this._formUnregister && (this._formUnregister(), this._formUnregister = null), super.disconnectedCallback();
   }
   shouldRenderOnAttributeChange(e) {
-    return !S.has(e);
+    return !P.has(e);
   }
   attributeChangedCallback(e, t, i) {
     if (t !== i) {
-      if (e === "name" && this._attachFormRegistration(), this._triggerEl && S.has(e)) {
+      if (e === "name" && this._attachFormRegistration(), this._triggerEl && P.has(e)) {
         (e === "value" || e === "placeholder" || e === "required") && (this._syncOptionsData(), this._open && this._renderMenu()), (e === "show-check" || e === "check-placement") && this._open && this._renderMenu(), this._syncControlState(), this.disabled && this._open && this._closeMenu({ restoreFocus: !1 });
         return;
       }
@@ -831,7 +853,7 @@ class B extends R {
     t !== this.value && this.setAttribute("value", t);
   }
   get disabled() {
-    return h(this.getAttribute("disabled")) || h(this.getAttribute("loading"));
+    return h(this.getAttribute("disabled")) || h(this.getAttribute("loading")) || !!this._formControl?.disabledByForm;
   }
   set disabled(e) {
     e ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
@@ -993,8 +1015,8 @@ class B extends R {
       },
       validate: async () => {
         if (!(h(this.getAttribute("required")) || this.hasAttribute("required"))) return { valid: !0 };
-        const l = this.value.trim().length > 0;
-        return { valid: l, message: l ? void 0 : "This field is required." };
+        const u = this.value.trim().length > 0;
+        return { valid: u, message: u ? void 0 : "This field is required." };
       },
       setError: (o) => {
         o ? (this.setAttribute("validation", "error"), this.setAttribute("error", o)) : (this.getAttribute("validation") === "error" && this.removeAttribute("validation"), this.removeAttribute("error"));
@@ -1009,22 +1031,27 @@ class B extends R {
     this.getAttribute("value") !== t && this.setAttribute("value", t);
   }
   _buildOptionsFromChildren() {
-    const e = [], t = (r, u) => {
+    const e = [];
+    Array.from(this.children).forEach((r) => {
+      const l = r.tagName.toLowerCase();
+      (l === "option" || l === "optgroup") && !r.hasAttribute("slot") && L(r);
+    });
+    const t = (r, l) => {
       const n = (r.label || r.textContent || r.value || "").trim(), a = String(r.value ?? "");
       e.push({
         value: a,
         label: n || a,
         disabled: !!r.disabled,
-        group: u
+        group: l
       });
     };
     Array.from(this.children).filter((r) => r instanceof HTMLElement ? !r.hasAttribute("slot") : !1).forEach((r) => {
-      const u = r.tagName.toLowerCase();
-      if (u === "option") {
+      const l = r.tagName.toLowerCase();
+      if (l === "option") {
         t(r, "");
         return;
       }
-      if (u === "optgroup") {
+      if (l === "optgroup") {
         const n = r, a = (n.label || "").trim();
         Array.from(n.children).forEach((c) => {
           c instanceof HTMLOptionElement && e.push({
@@ -1036,20 +1063,20 @@ class B extends R {
         });
       }
     });
-    const s = (this.getAttribute("placeholder") || "").trim(), o = h(this.getAttribute("required")) || this.hasAttribute("required"), l = e.some((r) => r.value === "");
-    return s && !o && !l && e.unshift({ value: "", label: s, disabled: !1, group: "" }), e;
+    const s = (this.getAttribute("placeholder") || "").trim(), o = h(this.getAttribute("required")) || this.hasAttribute("required"), u = e.some((r) => r.value === "");
+    return s && !o && !u && e.unshift({ value: "", label: s, disabled: !1, group: "" }), e;
   }
   _computeOptionsFingerprint(e) {
     return e.map((t) => `${t.value}
${t.label}
${t.disabled ? "1" : "0"}
${t.group}`).join("");
   }
   _firstEnabledIndex() {
-    return L(this._options, (e) => e.disabled);
+    return H(this._options, (e) => e.disabled);
   }
   _lastEnabledIndex() {
-    return F(this._options, (e) => e.disabled);
+    return U(this._options, (e) => e.disabled);
   }
   _selectedIndex() {
-    return D(this._options, this.value, (e) => e.value);
+    return V(this._options, this.value, (e) => e.value);
   }
   _checkPlacement() {
     return this.getAttribute("check-placement") === "start" ? "start" : "end";
@@ -1057,8 +1084,8 @@ class B extends R {
   _syncOptionsData() {
     const e = this._buildOptionsFromChildren(), t = this._computeOptionsFingerprint(e), i = t !== this._optionsFingerprint;
     this._options = e, this._optionsFingerprint = t;
-    const s = this.getAttribute("value") || "", o = this.hasAttribute("value"), l = this._options.some((a) => a.value === s), r = h(this.getAttribute("required")) || this.hasAttribute("required"), u = this._options.find((a) => !a.disabled)?.value || "", n = !r && this._options.some((a) => a.value === "") ? "" : u;
-    return o ? l || this._setValueAttr(n) : this._setValueAttr(n), i;
+    const s = this.getAttribute("value") || "", o = this.hasAttribute("value"), u = this._options.some((a) => a.value === s), r = h(this.getAttribute("required")) || this.hasAttribute("required"), l = this._options.find((a) => !a.disabled)?.value || "", n = !r && this._options.some((a) => a.value === "") ? "" : l;
+    return o ? u || this._setValueAttr(n) : this._setValueAttr(n), i;
   }
   _currentDisplayText() {
     const e = this.value, t = (this.getAttribute("placeholder") || "").trim();
@@ -1105,23 +1132,23 @@ class B extends R {
       return;
     }
     let s = "__none__";
-    this._options.forEach((r, u) => {
+    this._options.forEach((r, l) => {
       if (r.group && r.group !== s) {
         const d = document.createElement("div");
         d.className = "menu-group", d.setAttribute("role", "presentation"), d.textContent = r.group, e.appendChild(d), s = r.group;
       }
       r.group || (s = "__none__");
       const n = document.createElement("button");
-      n.type = "button", n.className = "menu-item", n.id = `${this._uid}-opt-${u}`, n.setAttribute("role", "option"), n.setAttribute("data-index", String(u)), n.setAttribute("data-value", r.value), n.setAttribute("aria-selected", r.value === this.value ? "true" : "false"), n.setAttribute("aria-disabled", r.disabled ? "true" : "false"), n.tabIndex = -1, r.disabled && (n.disabled = !0);
+      n.type = "button", n.className = "menu-item", n.id = `${this._uid}-opt-${l}`, n.setAttribute("role", "option"), n.setAttribute("data-index", String(l)), n.setAttribute("data-value", r.value), n.setAttribute("aria-selected", r.value === this.value ? "true" : "false"), n.setAttribute("aria-disabled", r.disabled ? "true" : "false"), n.tabIndex = -1, r.disabled && (n.disabled = !0);
       const a = document.createElement("span");
       a.className = "menu-item-label", a.textContent = r.label;
       const c = document.createElement("span");
       c.className = "menu-item-check", c.setAttribute("aria-hidden", "true");
-      const m = this.showCheck, b = this._checkPlacement();
-      c.hidden = !m, n.setAttribute("data-check-placement", b), m && b === "start" ? n.append(c, a) : n.append(a, c), e.appendChild(n), this._menuItems.push(n);
+      const b = this.showCheck, p = this._checkPlacement();
+      c.hidden = !b, n.setAttribute("data-check-placement", p), b && p === "start" ? n.append(c, a) : n.append(a, c), e.appendChild(n), this._menuItems.push(n);
     });
-    const o = this._menuItems[0] || null, l = this._menuItems[this._menuItems.length - 1] || null;
-    o && o.setAttribute("data-edge-start", "true"), l && l.setAttribute("data-edge-end", "true"), e.refresh(), this._menuRenderFingerprint = t, this._syncMenuSelectionState(), this._schedulePanelPlacement();
+    const o = this._menuItems[0] || null, u = this._menuItems[this._menuItems.length - 1] || null;
+    o && o.setAttribute("data-edge-start", "true"), u && u.setAttribute("data-edge-end", "true"), e.refresh(), this._menuRenderFingerprint = t, this._syncMenuSelectionState(), this._schedulePanelPlacement();
   }
   _syncMenuSelectionState() {
     if (!this._menuEl) return;
@@ -1129,7 +1156,7 @@ class B extends R {
     this._menuItems.forEach((i) => {
       const s = Number(i.dataset.index || "-1");
       i.setAttribute("aria-selected", s === e ? "true" : "false");
-    }), this._activeIndex = O(this._options, {
+    }), this._activeIndex = W(this._options, {
       selectedIndex: e,
       getDisabled: (i) => i.disabled
     });
@@ -1143,8 +1170,8 @@ class B extends R {
   _syncPanelPlacement() {
     const e = this._panelEl, t = this._controlEl, i = this._menuEl;
     if (!e || !t || !i || !this._open) return;
-    const s = t.getBoundingClientRect(), o = window.innerHeight || document.documentElement.clientHeight || 0, l = Math.max(0, o - s.bottom - 12), r = Math.max(0, s.top - 12), u = Math.min(Math.max(i.scrollHeight, i.offsetHeight) + 4, 320), n = l < u && r > l;
-    this._placement = n ? "top" : "bottom", e.setAttribute("data-placement", this._placement), e.style.setProperty("--ui-select-available-height", `${Math.floor(n ? r : l)}px`);
+    const s = t.getBoundingClientRect(), o = window.innerHeight || document.documentElement.clientHeight || 0, u = Math.max(0, o - s.bottom - 12), r = Math.max(0, s.top - 12), l = Math.min(Math.max(i.scrollHeight, i.offsetHeight) + 4, 320), n = u < l && r > u;
+    this._placement = n ? "top" : "bottom", e.setAttribute("data-placement", this._placement), e.style.setProperty("--ui-select-available-height", `${Math.floor(n ? r : u)}px`);
   }
   _openMenu() {
     this._open || this.disabled || (this._cancelPanelPlacement(), this._syncOptionsData(), this._open = !0, this._syncControlState(), this._renderMenu(), this._attachOpenListeners());
@@ -1160,44 +1187,55 @@ class B extends R {
   _syncControlState() {
     const e = this._triggerEl, t = this._controlEl, i = this._valueEl, s = this._panelEl;
     if (!e || !t || !i || !s) return;
-    const o = this.getAttribute("label") || "", l = this.getAttribute("description") || "", r = this.getAttribute("error") || "", u = this.getAttribute("aria-label") || o || "Select", n = h(this.getAttribute("loading")), a = h(this.getAttribute("required")) || this.hasAttribute("required"), c = this.getAttribute("tabindex"), m = this.hasAttribute("validation") && this.getAttribute("validation") === "error" || this.hasAttribute("invalid") || this.getAttribute("data-invalid") === "true", b = U(this.getAttribute("radius")), d = this.root.querySelector(".label"), x = this.root.querySelector(".label-text"), g = this.root.querySelector(".description"), f = this.root.querySelector(".description-text"), _ = this.root.querySelector(".error"), y = this.root.querySelector(".error-text"), w = this.root.querySelector(".meta"), A = this.root.querySelector(".required"), E = !!o || this._hasSlotContent("label"), k = !!l || this._hasSlotContent("description"), C = !!r || this._hasSlotContent("error"), I = this._hasSlotContent("leading"), z = this._hasSlotContent("trailing"), P = !!(this.getAttribute("placeholder") || "").trim() && this.value === "";
-    x && (x.textContent = o), f && (f.textContent = l), y && (y.textContent = r), d && (d.hidden = !E), g && (g.hidden = !k), _ && (_.hidden = !C), w && (w.hidden = !E && !k), A && (A.hidden = !a), i.textContent = this._currentDisplayText(), t.setAttribute("data-open", this._open ? "true" : "false"), t.setAttribute("data-placeholder-shown", P ? "true" : "false"), t.setAttribute("data-has-leading", String(I)), t.setAttribute("data-has-trailing", String(z)), e.disabled = this.disabled, e.setAttribute("aria-label", u), e.setAttribute("aria-expanded", this._open ? "true" : "false"), e.setAttribute("aria-busy", n ? "true" : "false"), e.setAttribute("aria-required", a ? "true" : "false"), m ? e.setAttribute("aria-invalid", "true") : e.removeAttribute("aria-invalid"), c != null && !this.disabled ? e.setAttribute("tabindex", c) : this.disabled ? e.setAttribute("tabindex", "-1") : e.setAttribute("tabindex", "0"), s.setAttribute("data-placement", this._placement), M(s, this._open, String(this._placement).split("-")[0]), this._open ? e.setAttribute("aria-controls", `${this._uid}-listbox`) : e.removeAttribute("aria-controls"), b && !["none", "full", "large"].includes(this.getAttribute("radius") || "") ? this.style.setProperty("--ui-select-radius", b) : this.style.removeProperty("--ui-select-radius"), this.setAttribute("aria-disabled", this.disabled ? "true" : "false"), this.setAttribute("aria-busy", n ? "true" : "false"), this.toggleAttribute("open", this._open), this._open && this._schedulePanelPlacement();
+    const o = this.getAttribute("label") || "", u = this.getAttribute("description") || "", r = this.getAttribute("error") || "", l = this.getAttribute("aria-label") || o || "Select", n = h(this.getAttribute("loading")), a = h(this.getAttribute("required")) || this.hasAttribute("required"), c = this.getAttribute("tabindex"), b = this.hasAttribute("validation") && this.getAttribute("validation") === "error" || this.hasAttribute("invalid") || this.getAttribute("data-invalid") === "true", p = j(this.getAttribute("radius")), d = this.root.querySelector(".label"), f = this.root.querySelector(".label-text"), x = this.root.querySelector(".description"), g = this.root.querySelector(".description-text"), v = this.root.querySelector(".error"), k = this.root.querySelector(".error-text"), C = this.root.querySelector(".meta"), S = this.root.querySelector(".required"), y = !!o || this._hasSlotContent("label"), w = !!u || this._hasSlotContent("description"), I = !!r || this._hasSlotContent("error"), R = this._hasSlotContent("leading"), M = this._hasSlotContent("trailing"), $ = !!(this.getAttribute("placeholder") || "").trim() && this.value === "";
+    f && (f.textContent = o), g && (g.textContent = u), k && (k.textContent = r), d && (d.hidden = !y), x && (x.hidden = !w), v && (v.hidden = !I), C && (C.hidden = !y && !w), S && (S.hidden = !a), i.textContent = this._currentDisplayText(), t.setAttribute("data-open", this._open ? "true" : "false"), t.setAttribute("data-placeholder-shown", $ ? "true" : "false"), t.setAttribute("data-has-leading", String(R)), t.setAttribute("data-has-trailing", String(M)), e.disabled = this.disabled, e.setAttribute("aria-label", l), y ? e.setAttribute("aria-labelledby", `${this._uid}-label`) : e.removeAttribute("aria-labelledby");
+    const F = this._renderedExternalHtml ? `${this._uid}-external-description` : "", z = [
+      w ? `${this._uid}-description` : "",
+      I ? `${this._uid}-error` : "",
+      F
+    ].filter(Boolean).join(" ");
+    z ? e.setAttribute("aria-describedby", z) : e.removeAttribute("aria-describedby"), e.setAttribute("aria-expanded", this._open ? "true" : "false"), e.setAttribute("aria-busy", n ? "true" : "false"), e.setAttribute("aria-required", a ? "true" : "false"), b ? e.setAttribute("aria-invalid", "true") : e.removeAttribute("aria-invalid"), c != null && !this.disabled ? e.setAttribute("tabindex", c) : this.disabled ? e.setAttribute("tabindex", "-1") : e.setAttribute("tabindex", "0"), s.setAttribute("data-placement", this._placement), T(s, this._open, String(this._placement).split("-")[0]), this._open ? e.setAttribute("aria-controls", `${this._uid}-listbox`) : e.removeAttribute("aria-controls"), p && !["none", "full", "large"].includes(this.getAttribute("radius") || "") ? this.style.setProperty("--ui-select-radius", p) : this.style.removeProperty("--ui-select-radius"), this.setAttribute("aria-disabled", this.disabled ? "true" : "false"), this.setAttribute("aria-busy", n ? "true" : "false"), this.toggleAttribute("open", this._open), this._open && this._schedulePanelPlacement();
   }
   render() {
-    const e = this.getAttribute("label") || "", t = this.getAttribute("description") || "", i = this.getAttribute("error") || "", s = h(this.getAttribute("required")) || this.hasAttribute("required"), o = this.getAttribute("aria-label") || e || "Select", l = !!e || this._hasSlotContent("label"), r = !!t || this._hasSlotContent("description"), u = !!i || this._hasSlotContent("error"), n = this._hasSlotContent("leading"), a = this._hasSlotContent("trailing"), c = `${this._uid}-label`, m = `${this._uid}-description`, b = `${this._uid}-error`, d = `${this._uid}-trigger`, x = `${this._uid}-listbox`, g = q(this, this._uid), f = [r ? m : "", u ? b : "", g.id].filter(Boolean).join(" ");
-    this.setContent(`
-      <style>${T}</style>
+    const e = N(this, this._uid);
+    if (this._triggerEl && this._triggerEl.getRootNode() === this.root && e.html === this._renderedExternalHtml) {
+      this._syncOptionsData(), this._renderMenu(), !this._open && this._panelEl && (this._panelEl.hidden = !0), this._syncControlState();
+      return;
+    }
+    const t = this.getAttribute("label") || "", i = this.getAttribute("description") || "", s = this.getAttribute("error") || "", o = h(this.getAttribute("required")) || this.hasAttribute("required"), u = this.getAttribute("aria-label") || t || "Select", r = !!t || this._hasSlotContent("label"), l = !!i || this._hasSlotContent("description"), n = !!s || this._hasSlotContent("error"), a = this._hasSlotContent("leading"), c = this._hasSlotContent("trailing"), b = `${this._uid}-label`, p = `${this._uid}-description`, d = `${this._uid}-error`, f = `${this._uid}-trigger`, x = `${this._uid}-listbox`, g = e, v = [l ? p : "", n ? d : "", g.id].filter(Boolean).join(" ");
+    this._renderedExternalHtml = g.html, this.setContent(`
+      <style>${Y}</style>
       <slot class="content-slot"></slot>
       <div class="root" part="root">
-        <div class="meta" part="meta" ${l || r ? "" : "hidden"}>
-          <label class="label" part="label" id="${c}" for="${d}" ${l ? "" : "hidden"}>
-            <slot name="label"><span class="label-text">${v(e)}</span></slot>
-            <span class="required" aria-hidden="true" ${s ? "" : "hidden"}>*</span>
+        <div class="meta" part="meta" ${r || l ? "" : "hidden"}>
+          <label class="label" part="label" id="${b}" for="${f}" ${r ? "" : "hidden"}>
+            <slot name="label"><span class="label-text">${_(t)}</span></slot>
+            <span class="required" aria-hidden="true" ${o ? "" : "hidden"}>*</span>
           </label>
-          <p class="description" part="description" id="${m}" ${r ? "" : "hidden"}>
-            <slot name="description"><span class="description-text">${v(t)}</span></slot>
+          <p class="description" part="description" id="${p}" ${l ? "" : "hidden"}>
+            <slot name="description"><span class="description-text">${_(i)}</span></slot>
           </p>
         </div>
         <div class="field-shell" part="field-shell">
-          <div class="control" part="control" data-has-leading="${n}" data-has-trailing="${a}" data-open="false">
-            <span class="leading" part="leading" ${n ? "" : "hidden"}>
+          <div class="control" part="control" data-has-leading="${a}" data-has-trailing="${c}" data-open="false">
+            <span class="leading" part="leading" ${a ? "" : "hidden"}>
               <slot name="leading"></slot>
             </span>
             <button
-              id="${d}"
+              id="${f}"
               type="button"
               class="trigger native"
               part="trigger"
               role="combobox"
               aria-haspopup="listbox"
               aria-expanded="false"
-              aria-label="${v(o)}"
-              ${l ? `aria-labelledby="${c}"` : ""}
-              ${f ? `aria-describedby="${v(f)}"` : ""}
+              aria-label="${_(u)}"
+              ${r ? `aria-labelledby="${b}"` : ""}
+              ${v ? `aria-describedby="${_(v)}"` : ""}
             >
               <span class="value" part="value"></span>
             </button>
-            <span class="trailing" part="trailing" ${a ? "" : "hidden"}>
+            <span class="trailing" part="trailing" ${c ? "" : "hidden"}>
               <slot name="trailing"></slot>
             </span>
             <span class="indicator" part="indicator" aria-hidden="true"></span>
@@ -1214,15 +1252,17 @@ class B extends R {
             ></ui-listbox>
           </div>
         </div>
-        <p class="error" part="error" id="${b}" ${u ? "" : "hidden"}>
-          <slot name="error"><span class="error-text">${v(i)}</span></slot>
+        <p class="error" part="error" id="${d}" ${n ? "" : "hidden"}>
+          <slot name="error"><span class="error-text">${_(s)}</span></slot>
         </p>
         ${g.html}
       </div>
     `), this._controlEl = this.root.querySelector(".control"), this._triggerEl = this.root.querySelector(".trigger"), this._valueEl = this.root.querySelector(".value"), this._panelEl = this.root.querySelector(".panel"), this._menuEl = this.root.querySelector(".menu"), this._menuItems = [], this._menuRenderFingerprint = "", this._syncOptionsData(), this._renderMenu(), !this._open && this._panelEl && (this._panelEl.hidden = !0), this._syncControlState();
   }
-}
-typeof customElements < "u" && !customElements.get("ui-select") && customElements.define("ui-select", B);
+};
+E.formAssociated = !0;
+let A = E;
+typeof customElements < "u" && !customElements.get("ui-select") && customElements.define("ui-select", A);
 export {
-  B as UISelect
+  A as UISelect
 };

package/dist/selection-popup.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const E=require("./ElementBase-DxbvhLJs.js"),S=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const E=require("./ElementBase-CbUsP3D6.js"),S=`
   :host {
     --ui-selection-popup-z: 1280;
     --ui-selection-popup-offset: 10px;
@@ -131,7 +131,7 @@
     --ui-selection-popup-bg: #0f172a;
     --ui-selection-popup-color: #e2e8f0;
     --ui-selection-popup-border-color: #334155;
-    --ui-selection-popup-focus: #93c5fd;
+    --ui-selection-popup-focus: var(--ui-color-accent-on-dark, #93c5fd);
     --ui-selection-popup-shadow:
       0 16px 42px rgba(2, 6, 23, 0.42),
       0 34px 72px rgba(2, 6, 23, 0.38);

package/dist/selection-popup.esm.js

@@ -1,4 +1,4 @@
-import { E as D } from "./ElementBase-BeZT54Hj.mjs";
+import { E as D } from "./ElementBase-D5QsC5Vw.mjs";
 const E = `
   :host {
     --ui-selection-popup-z: 1280;
@@ -132,7 +132,7 @@ const E = `
     --ui-selection-popup-bg: #0f172a;
     --ui-selection-popup-color: #e2e8f0;
     --ui-selection-popup-border-color: #334155;
-    --ui-selection-popup-focus: #93c5fd;
+    --ui-selection-popup-focus: var(--ui-color-accent-on-dark, #93c5fd);
     --ui-selection-popup-shadow:
       0 16px 42px rgba(2, 6, 23, 0.42),
       0 34px 72px rgba(2, 6, 23, 0.38);

package/dist/semantic-tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"semantic-tokens.d.ts","sourceRoot":"","sources":["../src/semantic-tokens.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAWtD,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,WAAW,GAAG,gBAAgB,CAkE1E"}
+{"version":3,"file":"semantic-tokens.d.ts","sourceRoot":"","sources":["../src/semantic-tokens.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AA2BtD,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,WAAW,GAAG,gBAAgB,CA0E1E"}

package/dist/separator.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("./ElementBase-DxbvhLJs.js"),l=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("./ElementBase-CbUsP3D6.js"),l=`
   :host {
     --ui-separator-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 80%, transparent);
     --ui-separator-thickness: 1px;

package/dist/separator.esm.js

@@ -1,4 +1,4 @@
-import { E as n } from "./ElementBase-BeZT54Hj.mjs";
+import { E as n } from "./ElementBase-D5QsC5Vw.mjs";
 const s = `
   :host {
     --ui-separator-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 80%, transparent);

package/dist/sidebar.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const D=require("./ElementBase-DxbvhLJs.js"),y={sm:{expanded:220,collapsed:64,min:168,max:300},md:{expanded:236,collapsed:72,min:180,max:320},lg:{expanded:268,collapsed:80,min:192,max:360}},w=new Set(["variant","size","density","tone","radius","item-radius","item-gap","item-padding-x","item-padding-y","item-height","item-font-size","item-line-height","section-label-transform","elevation","position","rail","headless"]),_=new Set(["width","min-width","max-width","collapsed-width","storage-key","auto-save"]),M=o=>`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const D=require("./ElementBase-CbUsP3D6.js"),q=require("./navigate-ChJVIIuS.js"),y={sm:{expanded:220,collapsed:64,min:168,max:300},md:{expanded:236,collapsed:72,min:180,max:320},lg:{expanded:268,collapsed:80,min:192,max:360}},w=new Set(["variant","size","density","tone","radius","item-radius","item-gap","item-padding-x","item-padding-y","item-height","item-font-size","item-line-height","section-label-transform","elevation","position","rail","headless"]),_=new Set(["width","min-width","max-width","collapsed-width","storage-key","auto-save"]),M=o=>`
   <style>
     :host {
       --ui-sidebar-bg: var(--base-sidebar-bg, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
@@ -250,7 +250,7 @@
       inset: 0;
       border-radius: inherit;
       pointer-events: none;
-      box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 8%, transparent);
+      box-shadow: var(--base-sidebar-outline, inset 0 0 0 1px color-mix(in srgb, currentColor 8%, transparent));
     }
 
     .header-wrap,
@@ -713,11 +713,11 @@
     }
   </style>
   ${o}
-`;function d(o){return o.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function f(o){if(!o)return null;const e=o.trim();return e?["none","sm","md","lg","full"].includes(e)?e:/^\d+(\.\d+)?$/.test(e)?`${e}px`:e:null}function m(o){if(!o)return null;const e=o.trim();return e?/^\d+(\.\d+)?$/.test(e)?`${e}px`:e:null}function z(o){return o==="sm"||o==="1"?"sm":o==="lg"||o==="3"?"lg":"md"}function l(o,e){if(!o)return e;const i=Number.parseFloat(String(o));return Number.isFinite(i)?i:e}function v(o){return o.toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/(^-|-$)/g,"")||"item"}class A extends D.ElementBase{constructor(){super(...arguments),this._observer=null,this._resizeCleanup=null,this._responsiveCleanup=null,this._responsiveAutoCollapsed=!1,this._userCollapsePreference=!1,this._expanded=new Set,this._dragging=!1,this._lastExpandedWidth=0,this._handleSearchInput=e=>{const i=e.target;if(!i)return;const r=i.closest('[slot="search"]');if(!r||!this.contains(r))return;const t=typeof i.value=="string"?i.value:"";t?this.setAttribute("search-query",t):this.removeAttribute("search-query"),this.dispatchEvent(new CustomEvent("search-change",{detail:{query:t},bubbles:!0}))}}static get observedAttributes(){return["collapsed","collapsible","rail","resizable","position","value","items","variant","size","density","tone","show-icons","show-badges","item-radius","item-gap","item-padding-x","item-padding-y","item-height","item-font-size","item-line-height","section-label-transform","search-query","headless","width","min-width","max-width","collapsed-width","storage-key","auto-save","radius","elevation"]}connectedCallback(){super.connectedCallback(),this._observeLightDom(),this._bindResponsiveCollapse(),this.addEventListener("input",this._handleSearchInput,!0),this.addEventListener("change",this._handleSearchInput,!0)}disconnectedCallback(){this._observer?.disconnect(),this._observer=null,this._resizeCleanup?.(),this._resizeCleanup=null,this._responsiveCleanup?.(),this._responsiveCleanup=null,this.removeEventListener("input",this._handleSearchInput,!0),this.removeEventListener("change",this._handleSearchInput,!0),super.disconnectedCallback()}shouldRenderOnAttributeChange(e){return!(_.has(e)||w.has(e)||e==="collapsed"||e==="value"||e==="radius")}attributeChangedCallback(e,i,r){if(i!==r){if(e==="radius"&&this.isConnected){const t=f(r);if(t&&t!==r){this.setAttribute("radius",t);return}}if(this.isConnected){if(_.has(e)){this._applySizing();return}if(e==="radius"){this._applyRadius();return}if(e==="item-radius"||e==="item-gap"||e==="item-padding-x"||e==="item-padding-y"||e==="item-height"||e==="item-font-size"||e==="item-line-height"){this._applyItemMetrics();return}if(!w.has(e)){if(e==="collapsed"){this.hasAttribute("collapsed")&&this._expanded.clear(),this._applySizing(),this._syncExpandedDom();return}if(e==="value"){this._syncActiveDom();return}super.attributeChangedCallback(e,i,r)}}}}get value(){return this.getAttribute("value")||""}set value(e){e?this.setAttribute("value",e):this.removeAttribute("value")}collapse(){this.hasAttribute("collapsible")&&(this.hasAttribute("collapsed")||(this._userCollapsePreference=!0,this._lastExpandedWidth=this._currentExpandedWidth(),this.setAttribute("collapsed",""),this.dispatchEvent(new CustomEvent("toggle",{detail:{collapsed:!0},bubbles:!0})),this.dispatchEvent(new CustomEvent("collapse-change",{detail:{collapsed:!0},bubbles:!0}))))}expand(){this.hasAttribute("collapsible")&&this.hasAttribute("collapsed")&&(this._userCollapsePreference=!0,this.removeAttribute("collapsed"),this.dispatchEvent(new CustomEvent("toggle",{detail:{collapsed:!1},bubbles:!0})),this.dispatchEvent(new CustomEvent("collapse-change",{detail:{collapsed:!1},bubbles:!0})))}toggle(e){(typeof e=="boolean"?e:!this.hasAttribute("collapsed"))?this.collapse():this.expand()}render(){const e=this._buildSections(),i=!this.querySelector('[slot="header"]'),r=!this.querySelector('[slot="search"]'),t=!this.querySelector('[slot="footer"]'),s=!this.querySelector('[slot="promo"]'),n=`
+`;function l(o){return o.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function v(o){if(!o)return null;const e=o.trim();return e?["none","sm","md","lg","full"].includes(e)?e:/^\d+(\.\d+)?$/.test(e)?`${e}px`:e:null}function m(o){if(!o)return null;const e=o.trim();return e?/^\d+(\.\d+)?$/.test(e)?`${e}px`:e:null}function z(o){return o==="sm"||o==="1"?"sm":o==="lg"||o==="3"?"lg":"md"}function c(o,e){if(!o)return e;const i=Number.parseFloat(String(o));return Number.isFinite(i)?i:e}function f(o){return o.toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/(^-|-$)/g,"")||"item"}class A extends D.ElementBase{constructor(){super(...arguments),this._observer=null,this._resizeCleanup=null,this._responsiveCleanup=null,this._responsiveAutoCollapsed=!1,this._userCollapsePreference=!1,this._expanded=new Set,this._dragging=!1,this._lastExpandedWidth=0,this._handleSearchInput=e=>{const i=e.target;if(!i)return;const r=i.closest('[slot="search"]');if(!r||!this.contains(r))return;const t=typeof i.value=="string"?i.value:"";t?this.setAttribute("search-query",t):this.removeAttribute("search-query"),this.dispatchEvent(new CustomEvent("search-change",{detail:{query:t},bubbles:!0}))}}static get observedAttributes(){return["collapsed","collapsible","rail","resizable","position","value","items","variant","size","density","tone","show-icons","show-badges","item-radius","item-gap","item-padding-x","item-padding-y","item-height","item-font-size","item-line-height","section-label-transform","search-query","headless","width","min-width","max-width","collapsed-width","storage-key","auto-save","radius","elevation"]}connectedCallback(){super.connectedCallback(),this._observeLightDom(),this._bindResponsiveCollapse(),this.addEventListener("input",this._handleSearchInput,!0),this.addEventListener("change",this._handleSearchInput,!0)}disconnectedCallback(){this._observer?.disconnect(),this._observer=null,this._resizeCleanup?.(),this._resizeCleanup=null,this._responsiveCleanup?.(),this._responsiveCleanup=null,this.removeEventListener("input",this._handleSearchInput,!0),this.removeEventListener("change",this._handleSearchInput,!0),super.disconnectedCallback()}shouldRenderOnAttributeChange(e){return!(_.has(e)||w.has(e)||e==="collapsed"||e==="value"||e==="radius")}attributeChangedCallback(e,i,r){if(i!==r){if(e==="radius"&&this.isConnected){const t=v(r);if(t&&t!==r){this.setAttribute("radius",t);return}}if(this.isConnected){if(_.has(e)){this._applySizing();return}if(e==="radius"){this._applyRadius();return}if(e==="item-radius"||e==="item-gap"||e==="item-padding-x"||e==="item-padding-y"||e==="item-height"||e==="item-font-size"||e==="item-line-height"){this._applyItemMetrics();return}if(!w.has(e)){if(e==="collapsed"){this.hasAttribute("collapsed")&&this._expanded.clear(),this._applySizing(),this._syncExpandedDom();return}if(e==="value"){this._syncActiveDom();return}super.attributeChangedCallback(e,i,r)}}}}get value(){return this.getAttribute("value")||""}set value(e){e?this.setAttribute("value",e):this.removeAttribute("value")}collapse(){this.hasAttribute("collapsible")&&(this.hasAttribute("collapsed")||(this._userCollapsePreference=!0,this._lastExpandedWidth=this._currentExpandedWidth(),this.setAttribute("collapsed",""),this.dispatchEvent(new CustomEvent("toggle",{detail:{collapsed:!0},bubbles:!0})),this.dispatchEvent(new CustomEvent("collapse-change",{detail:{collapsed:!0},bubbles:!0}))))}expand(){this.hasAttribute("collapsible")&&this.hasAttribute("collapsed")&&(this._userCollapsePreference=!0,this.removeAttribute("collapsed"),this.dispatchEvent(new CustomEvent("toggle",{detail:{collapsed:!1},bubbles:!0})),this.dispatchEvent(new CustomEvent("collapse-change",{detail:{collapsed:!1},bubbles:!0})))}toggle(e){(typeof e=="boolean"?e:!this.hasAttribute("collapsed"))?this.collapse():this.expand()}render(){const e=this._buildSections(),i=!this.querySelector('[slot="header"]'),r=!this.querySelector('[slot="search"]'),t=!this.querySelector('[slot="footer"]'),s=!this.querySelector('[slot="promo"]'),n=`
       <aside class="shell" part="shell">
         <div class="header-wrap" part="header" ${i?"hidden":""}><slot name="header"></slot></div>
         <div class="search-wrap" part="search" ${r?"hidden":""}><slot name="search"></slot></div>
-        <nav class="nav" part="nav" aria-label="${d(this.getAttribute("aria-label")||"Sidebar")}">
+        <nav class="nav" part="nav" aria-label="${l(this.getAttribute("aria-label")||"Sidebar")}">
           ${e}
         </nav>
         <div class="promo-wrap" part="promo" ${s?"hidden":""}><slot name="promo"></slot></div>
@@ -726,8 +726,8 @@
       </aside>
     `;this.setContent(M(n)),this._applyItemMetrics(),this._applyRadius(),this._applySizing(),this._bindInteractions(),this._syncActiveDom(),this._syncExpandedDom()}_observeLightDom(){this._observer||(this._observer=new MutationObserver(e=>{e.some(i=>i.type==="childList"||i.type==="attributes"&&i.target.slot)&&this.requestRender()}),this._observer.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["slot","data-value","data-href","data-target","data-rel","data-section","data-active","data-badge","data-description","data-content-html","data-icon","data-tone","data-disabled"]}))}_buildSections(){const e=this._groupItems(this._filterItems(this._collectItems(),this.getAttribute("search-query")||""));return e.length?e.map(({label:i,items:r})=>`
           <section class="section" part="section">
-            ${i?`<div class="section-label" part="section-label">${d(i)}</div>`:""}
-            <div class="section-items">${r.map((s,n)=>this._renderItem(s,`${v(i||"general")}-${n}`)).join("")}</div>
+            ${i?`<div class="section-label" part="section-label">${l(i)}</div>`:""}
+            <div class="section-items">${r.map((s,n)=>this._renderItem(s,`${f(i||"general")}-${n}`)).join("")}</div>
           </section>
         `).join(""):`
         <section class="section" part="section">
@@ -742,18 +742,18 @@
             </div>
           </div>
         </section>
-      `}_renderItem(e,i){const r=e.id||i,t=this.value?this.value===e.value:!!e.active,s=this._expanded.has(r),n=this.getAttribute("show-icons")!=="false",a=this.getAttribute("show-badges")!=="false",u=e.description?`<div class="item-description">${d(e.description)}</div>`:"",c=e.contentHtml?`<span class="copy custom-copy">${e.contentHtml}</span>`:`<span class="copy">
-            <span class="item-label">${d(e.label)}</span>
-            ${u}
-          </span>`,p=n?this._renderIcon(e):"",g=a&&e.badge?`<span class="badge" part="badge">${d(e.badge)}</span>`:"",b=e.children.length?'<span class="arrow-wrap" part="arrow" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true"><path d="M6 3.75L10.25 8L6 12.25" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg></span>':"",C=p?`<span class="icon-wrap" part="icon"><span class="icon">${p}</span></span>`:"",E=g||b?`<span class="end-wrap">${g?`<span class="meta">${g}</span>`:""}${b}</span>`:"",h=!!e.href&&!e.children.length,$=t?' aria-current="page" data-active="true"':"",k=e.disabled?' aria-disabled="true"':' aria-disabled="false"',I=e.tone&&e.tone!=="default"?` data-tone="${d(e.tone)}"`:"",S=h?` href="${d(e.href||"")}"`:"",P=h&&e.target?` target="${d(e.target)}"`:"",L=h&&e.rel?` rel="${d(e.rel)}"`:"",H=e.children.length?`<div class="submenu" part="submenu"><div class="submenu-inner">${e.children.map((W,T)=>this._renderItem(W,`${r}-${T}`)).join("")}</div></div>`:"",x=h?"a":"button",R=h?"":' type="button"';return`
-      <div class="item" data-item-id="${d(r)}" data-value="${d(e.value)}" ${s?'data-expanded="true"':""}>
+      `}_renderItem(e,i){const r=e.id||i,t=this.value?this.value===e.value:!!e.active,s=this._expanded.has(r),n=this.getAttribute("show-icons")!=="false",a=this.getAttribute("show-badges")!=="false",d=e.description?`<div class="item-description">${l(e.description)}</div>`:"",u=e.contentHtml?`<span class="copy custom-copy">${e.contentHtml}</span>`:`<span class="copy">
+            <span class="item-label">${l(e.label)}</span>
+            ${d}
+          </span>`,p=n?this._renderIcon(e):"",g=a&&e.badge?`<span class="badge" part="badge">${l(e.badge)}</span>`:"",b=e.children.length?'<span class="arrow-wrap" part="arrow" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true"><path d="M6 3.75L10.25 8L6 12.25" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg></span>':"",C=p?`<span class="icon-wrap" part="icon"><span class="icon">${p}</span></span>`:"",E=g||b?`<span class="end-wrap">${g?`<span class="meta">${g}</span>`:""}${b}</span>`:"",h=!!e.href&&!e.children.length,$=t?' aria-current="page" data-active="true"':"",k=e.disabled?' aria-disabled="true"':' aria-disabled="false"',I=e.tone&&e.tone!=="default"?` data-tone="${l(e.tone)}"`:"",S=h?` href="${l(e.href||"")}"`:"",P=h&&e.target?` target="${l(e.target)}"`:"",L=h&&e.rel?` rel="${l(e.rel)}"`:"",H=e.children.length?`<div class="submenu" part="submenu"><div class="submenu-inner">${e.children.map((W,T)=>this._renderItem(W,`${r}-${T}`)).join("")}</div></div>`:"",x=h?"a":"button",R=h?"":' type="button"';return`
+      <div class="item" data-item-id="${l(r)}" data-value="${l(e.value)}" ${s?'data-expanded="true"':""}>
         <${x}
           class="item-button"
           part="item"
           ${R}
           data-action="${e.children.length?"toggle":h?"navigate":"select"}"
-          data-item-id="${d(r)}"
-          data-value="${d(e.value)}"
+          data-item-id="${l(r)}"
+          data-value="${l(e.value)}"
           ${S}
           ${P}
           ${L}
@@ -762,9 +762,9 @@
           ${I}
         >
           ${C}
-          ${c}
+          ${u}
           ${E}
         </${x}>
         ${H}
       </div>
-    `}_collectItems(){const e=this.getAttribute("items"),i=e?this._parseItems(e):this._parseSlottedItems();return this._normalizeItems(i)}_parseItems(e){try{const i=JSON.parse(e);return Array.isArray(i)?i:[]}catch{return[]}}_parseSlottedItems(){return Array.from(this.querySelectorAll('[slot="item"]')).map(e=>this._parseSlottedItem(e))}_parseSlottedItem(e){let i=[];const r=e.dataset.children;if(r)try{const t=JSON.parse(r);Array.isArray(t)&&(i=t)}catch{i=[]}return{value:e.dataset.value||e.textContent?.trim()||"item",label:e.dataset.label||e.textContent?.trim()||e.dataset.value||"Item",href:e.dataset.href,target:e.dataset.target,rel:e.dataset.rel,icon:e.dataset.icon,iconHtml:e.dataset.iconHtml,contentHtml:e.dataset.contentHtml,badge:e.dataset.badge,description:e.dataset.description,section:e.dataset.section,disabled:e.hasAttribute("data-disabled"),active:e.hasAttribute("data-active"),tone:e.dataset.tone||"default",children:i}}_renderIcon(e){const i=String(e.iconHtml||"").trim();if(i)return i;const r=String(e.icon||"").trim();return r?d(r):""}_normalizeItems(e,i=0,r=""){return e.map((t,s)=>{const n=t.label?.trim()||t.value?.trim()||`Item ${s+1}`,a=t.value?.trim()||v(n),u=t.section?.trim()||r||"",c=`${v(u||"nav")}-${v(a)}-${i}-${s}`,p=this._normalizeItems(t.children||[],i+1,u);return{...t,id:c,label:n,value:a,section:u,children:p,depth:i}})}_groupItems(e){const i=[],r=new Map;for(const t of e){const s=t.section||"",n=r.get(s);if(n){n.items.push(t);continue}const a={label:s,items:[t]};r.set(s,a),i.push(a)}return i}_filterItems(e,i){const r=i.trim().toLowerCase();return r?e.map(t=>{const s=[t.label,t.description,t.value,t.section].filter(Boolean).some(a=>String(a).toLowerCase().includes(r)),n=s?t.children:this._filterItems(t.children,r);return!s&&!n.length?null:{...t,children:n}}).filter(t=>!!t):e}_bindInteractions(){this.root.querySelectorAll(".item-button").forEach(i=>{i.onclick=r=>{const t=r.currentTarget,s=t.dataset.action,n=t.dataset.itemId||"",a=t.dataset.value||"";if(t.getAttribute("aria-disabled")!=="true"){if(s==="toggle"){r.preventDefault(),this._toggleExpanded(n);return}if(s==="navigate"){this._selectValue(a);return}r.preventDefault(),this._selectValue(a)}},i.onkeydown=r=>{const t=r.currentTarget,s=t.dataset.itemId||"",n=t.dataset.value||"";r.key==="ArrowRight"&&t.dataset.action==="toggle"?(r.preventDefault(),this._expanded.add(s),this._syncExpandedDom()):r.key==="ArrowLeft"?(r.preventDefault(),this._expanded.delete(s),this._syncExpandedDom()):(r.key==="Enter"||r.key===" ")&&(r.preventDefault(),t.dataset.action==="toggle"?this._toggleExpanded(s):this._selectValue(n))}});const e=this.root.querySelector(".resize-handle");e&&(e.onkeydown=i=>this._handleResizeKey(i),e.onpointerdown=i=>this._startResize(i))}_toggleExpanded(e){this.hasAttribute("collapsed")||(this._expanded.has(e)?this._expanded.delete(e):this._expanded.add(e),this._syncExpandedDom())}_syncExpandedDom(){this.root.querySelectorAll(".item").forEach(e=>{const i=e.dataset.itemId||"";this._expanded.has(i)&&!this.hasAttribute("collapsed")?e.setAttribute("data-expanded","true"):e.removeAttribute("data-expanded")})}_selectValue(e){this.value=e;const i=this._flattenItems(this._collectItems()),r=i.findIndex(n=>n.value===e),t=i[r],s={index:r,value:e,label:t?.label||e,item:t};this.dispatchEvent(new CustomEvent("select",{detail:s,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:s,bubbles:!0}))}_syncActiveDom(){const e=this.value;this.root.querySelectorAll(".item-button").forEach(i=>{e&&i.dataset.value===e?(i.setAttribute("data-active","true"),i.setAttribute("aria-current","page")):(i.removeAttribute("data-active"),i.removeAttribute("aria-current"))})}_flattenItems(e){return e.flatMap(i=>[i,...this._flattenItems(i.children)])}_applySizing(){const e=z(this.getAttribute("size")),i=y[e],r=l(this.getAttribute("width"),i.expanded),t=l(this.getAttribute("min-width"),i.min),s=l(this.getAttribute("max-width"),i.max),n=l(this.getAttribute("collapsed-width"),i.collapsed),a=this._restoreWidth(r),u=Math.min(Math.max(a,t),s),c=this.hasAttribute("collapsed")?n:u;this.style.setProperty("--ui-sidebar-width",`${u}px`),this.style.setProperty("--ui-sidebar-min-width",`${t}px`),this.style.setProperty("--ui-sidebar-max-width",`${s}px`),this.style.setProperty("--ui-sidebar-collapsed-width",`${n}px`),this.style.setProperty("--ui-sidebar-current-width",`${c}px`),this.style.setProperty("inline-size",`${c}px`)}_applyRadius(){const e=this.getAttribute("radius"),i=this.getAttribute("item-radius");if(!e||["none","sm","md","lg","full"].includes(e)){this.style.removeProperty("--ui-sidebar-radius"),i||this.style.removeProperty("--ui-sidebar-item-radius"),this.style.removeProperty("--ui-sidebar-promo-radius");return}const r=f(e)||e;this.style.setProperty("--ui-sidebar-radius",r),i||this.style.setProperty("--ui-sidebar-item-radius",r),this.style.setProperty("--ui-sidebar-promo-radius",r)}_applyItemMetrics(){const e=f(this.getAttribute("item-radius")),i=m(this.getAttribute("item-gap")),r=m(this.getAttribute("item-padding-x")),t=m(this.getAttribute("item-padding-y")),s=m(this.getAttribute("item-height")),n=m(this.getAttribute("item-font-size")),a=m(this.getAttribute("item-line-height"));this._setOptionalCssVar("--ui-sidebar-item-radius",e),this._setOptionalCssVar("--ui-sidebar-item-gap",i),this._setOptionalCssVar("--ui-sidebar-item-padding-x",r),this._setOptionalCssVar("--ui-sidebar-item-padding-y",t),this._setOptionalCssVar("--ui-sidebar-item-height",s),this._setOptionalCssVar("--ui-sidebar-item-font-size",n),this._setOptionalCssVar("--ui-sidebar-item-line-height",a)}_setOptionalCssVar(e,i){if(!i){this.style.removeProperty(e);return}this.style.setProperty(e,i)}_restoreWidth(e){if(!this.hasAttribute("auto-save"))return e;const i=this.getAttribute("storage-key");if(!i)return e;try{const r=window.localStorage.getItem(`ui-sidebar:${i}`);if(!r)return e;const t=Number.parseFloat(r);return Number.isFinite(t)?t:e}catch{return e}}_persistWidth(e){if(!this.hasAttribute("auto-save"))return;const i=this.getAttribute("storage-key");if(i)try{window.localStorage.setItem(`ui-sidebar:${i}`,`${e}`)}catch{}}_currentExpandedWidth(){const e=Number.parseFloat(this.style.getPropertyValue("--ui-sidebar-width"));return Number.isFinite(e)&&e>0?e:l(this.getAttribute("width"),y[z(this.getAttribute("size"))].expanded)}_bindResponsiveCollapse(){if(this._responsiveCleanup?.(),this._responsiveCleanup=null,typeof window>"u"||typeof window.matchMedia!="function")return;const e=window.matchMedia("(max-width: 767px)"),i=()=>this._syncResponsiveCollapse(e.matches);typeof e.addEventListener=="function"?e.addEventListener("change",i):typeof e.addListener=="function"&&e.addListener(i),this._responsiveCleanup=()=>{typeof e.removeEventListener=="function"?e.removeEventListener("change",i):typeof e.removeListener=="function"&&e.removeListener(i)},i()}_syncResponsiveCollapse(e){if(this.hasAttribute("collapsible")){if(e){!this.hasAttribute("collapsed")&&!this._userCollapsePreference&&(this._responsiveAutoCollapsed=!0,this._lastExpandedWidth=this._currentExpandedWidth(),this.setAttribute("collapsed",""),this.dispatchEvent(new CustomEvent("toggle",{detail:{collapsed:!0,source:"responsive"},bubbles:!0})),this.dispatchEvent(new CustomEvent("collapse-change",{detail:{collapsed:!0,source:"responsive"},bubbles:!0})));return}this._responsiveAutoCollapsed&&!this._userCollapsePreference&&(this._responsiveAutoCollapsed=!1,this.hasAttribute("collapsed")&&(this.removeAttribute("collapsed"),this.dispatchEvent(new CustomEvent("toggle",{detail:{collapsed:!1,source:"responsive"},bubbles:!0})),this.dispatchEvent(new CustomEvent("collapse-change",{detail:{collapsed:!1,source:"responsive"},bubbles:!0}))))}}_emitWidthChange(e){const i={width:l(this.style.getPropertyValue("--ui-sidebar-width"),0),collapsedWidth:l(this.style.getPropertyValue("--ui-sidebar-collapsed-width"),0),minWidth:l(this.style.getPropertyValue("--ui-sidebar-min-width"),0),maxWidth:l(this.style.getPropertyValue("--ui-sidebar-max-width"),0),source:e};this.dispatchEvent(new CustomEvent("width-change",{detail:i,bubbles:!0}))}_handleResizeKey(e){const r=this.getAttribute("position")==="right"?-1:1,t=this._currentExpandedWidth(),s=l(this.style.getPropertyValue("--ui-sidebar-min-width"),t),n=l(this.style.getPropertyValue("--ui-sidebar-max-width"),t);let a=t;if(e.key==="ArrowRight")a=t+16*r;else if(e.key==="ArrowLeft")a=t-16*r;else if(e.key==="Home")a=s;else if(e.key==="End")a=n;else return;e.preventDefault(),a=Math.min(Math.max(a,s),n),this.style.setProperty("--ui-sidebar-width",`${a}px`),this.hasAttribute("collapsed")||(this.style.setProperty("--ui-sidebar-current-width",`${a}px`),this.style.setProperty("inline-size",`${a}px`)),this._persistWidth(a),this._emitWidthChange("keyboard")}_startResize(e){if(!this.hasAttribute("resizable"))return;e.preventDefault();const i=this.getAttribute("position")==="right",r=e.clientX,t=this._currentExpandedWidth(),s=l(this.style.getPropertyValue("--ui-sidebar-min-width"),t),n=l(this.style.getPropertyValue("--ui-sidebar-max-width"),t);this._dragging=!0,this.dispatchEvent(new CustomEvent("resize-start",{detail:{width:t},bubbles:!0}));const a=c=>{const p=c.clientX-r,g=i?t-p:t+p,b=Math.min(Math.max(g,s),n);this.style.setProperty("--ui-sidebar-width",`${b}px`),this.hasAttribute("collapsed")||(this.style.setProperty("--ui-sidebar-current-width",`${b}px`),this.style.setProperty("inline-size",`${b}px`)),this.dispatchEvent(new CustomEvent("resize",{detail:{width:b},bubbles:!0}))},u=()=>{if(!this._dragging)return;this._dragging=!1,window.removeEventListener("pointermove",a),window.removeEventListener("pointerup",u);const c=this._currentExpandedWidth();this._persistWidth(c),this._emitWidthChange("pointer"),this.dispatchEvent(new CustomEvent("resize-end",{detail:{width:c},bubbles:!0}))};window.addEventListener("pointermove",a),window.addEventListener("pointerup",u),this._resizeCleanup=()=>{window.removeEventListener("pointermove",a),window.removeEventListener("pointerup",u)}}}typeof customElements<"u"&&!customElements.get("ui-sidebar")&&customElements.define("ui-sidebar",A);exports.UISidebar=A;
+    `}_collectItems(){const e=this.getAttribute("items"),i=e?this._parseItems(e):this._parseSlottedItems();return this._normalizeItems(i)}_parseItems(e){try{const i=JSON.parse(e);return Array.isArray(i)?i:[]}catch{return[]}}_parseSlottedItems(){return Array.from(this.querySelectorAll('[slot="item"]')).map(e=>this._parseSlottedItem(e))}_parseSlottedItem(e){let i=[];const r=e.dataset.children;if(r)try{const t=JSON.parse(r);Array.isArray(t)&&(i=t)}catch{i=[]}return{value:e.dataset.value||e.textContent?.trim()||"item",label:e.dataset.label||e.textContent?.trim()||e.dataset.value||"Item",href:e.dataset.href,target:e.dataset.target,rel:e.dataset.rel,icon:e.dataset.icon,iconHtml:e.dataset.iconHtml,contentHtml:e.dataset.contentHtml,badge:e.dataset.badge,description:e.dataset.description,section:e.dataset.section,disabled:e.hasAttribute("data-disabled"),active:e.hasAttribute("data-active"),tone:e.dataset.tone||"default",children:i}}_renderIcon(e){const i=String(e.iconHtml||"").trim();if(i)return i;const r=String(e.icon||"").trim();return r?l(r):""}_normalizeItems(e,i=0,r=""){return e.map((t,s)=>{const n=t.label?.trim()||t.value?.trim()||`Item ${s+1}`,a=t.value?.trim()||f(n),d=t.section?.trim()||r||"",u=`${f(d||"nav")}-${f(a)}-${i}-${s}`,p=this._normalizeItems(t.children||[],i+1,d);return{...t,id:u,label:n,value:a,section:d,children:p,depth:i}})}_groupItems(e){const i=[],r=new Map;for(const t of e){const s=t.section||"",n=r.get(s);if(n){n.items.push(t);continue}const a={label:s,items:[t]};r.set(s,a),i.push(a)}return i}_filterItems(e,i){const r=i.trim().toLowerCase();return r?e.map(t=>{const s=[t.label,t.description,t.value,t.section].filter(Boolean).some(a=>String(a).toLowerCase().includes(r)),n=s?t.children:this._filterItems(t.children,r);return!s&&!n.length?null:{...t,children:n}}).filter(t=>!!t):e}_bindInteractions(){this.root.querySelectorAll(".item-button").forEach(i=>{i.onclick=r=>{const t=r.currentTarget,s=t.dataset.action,n=t.dataset.itemId||"",a=t.dataset.value||"";if(t.getAttribute("aria-disabled")!=="true"){if(s==="toggle"){r.preventDefault(),this._toggleExpanded(n);return}if(s==="navigate"){this._selectValue(a),this._handleNavigate(r,t,a);return}r.preventDefault(),this._selectValue(a)}},i.onkeydown=r=>{const t=r.currentTarget,s=t.dataset.itemId||"",n=t.dataset.value||"";r.key==="ArrowRight"&&t.dataset.action==="toggle"?(r.preventDefault(),this._expanded.add(s),this._syncExpandedDom()):r.key==="ArrowLeft"?(r.preventDefault(),this._expanded.delete(s),this._syncExpandedDom()):r.key==="Enter"&&t.dataset.action==="navigate"||(r.key==="Enter"||r.key===" ")&&(r.preventDefault(),t.dataset.action==="toggle"?this._toggleExpanded(s):t.dataset.action==="navigate"?t.click():this._selectValue(n))}});const e=this.root.querySelector(".resize-handle");e&&(e.onkeydown=i=>this._handleResizeKey(i),e.onpointerdown=i=>this._startResize(i))}_handleNavigate(e,i,r){const t=this._flattenItems(this._collectItems()),s=t.findIndex(d=>d.value===r),n=t[s],a=i.getAttribute("href")||"";q.requestNavigate(this,{index:s,value:r,label:n?.label||r,href:a,item:n},e,i.getAttribute("target")||"")&&e.preventDefault()}_toggleExpanded(e){this.hasAttribute("collapsed")||(this._expanded.has(e)?this._expanded.delete(e):this._expanded.add(e),this._syncExpandedDom())}_syncExpandedDom(){this.root.querySelectorAll(".item").forEach(e=>{const i=e.dataset.itemId||"";this._expanded.has(i)&&!this.hasAttribute("collapsed")?e.setAttribute("data-expanded","true"):e.removeAttribute("data-expanded")})}_selectValue(e){this.value=e;const i=this._flattenItems(this._collectItems()),r=i.findIndex(n=>n.value===e),t=i[r],s={index:r,value:e,label:t?.label||e,item:t};this.dispatchEvent(new CustomEvent("select",{detail:s,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:s,bubbles:!0}))}_syncActiveDom(){const e=this.value;this.root.querySelectorAll(".item-button").forEach(i=>{e&&i.dataset.value===e?(i.setAttribute("data-active","true"),i.setAttribute("aria-current","page")):(i.removeAttribute("data-active"),i.removeAttribute("aria-current"))})}_flattenItems(e){return e.flatMap(i=>[i,...this._flattenItems(i.children)])}_applySizing(){const e=z(this.getAttribute("size")),i=y[e],r=c(this.getAttribute("width"),i.expanded),t=c(this.getAttribute("min-width"),i.min),s=c(this.getAttribute("max-width"),i.max),n=c(this.getAttribute("collapsed-width"),i.collapsed),a=this._restoreWidth(r),d=Math.min(Math.max(a,t),s),u=this.hasAttribute("collapsed")?n:d;this.style.setProperty("--ui-sidebar-width",`${d}px`),this.style.setProperty("--ui-sidebar-min-width",`${t}px`),this.style.setProperty("--ui-sidebar-max-width",`${s}px`),this.style.setProperty("--ui-sidebar-collapsed-width",`${n}px`),this.style.setProperty("--ui-sidebar-current-width",`${u}px`),this.style.setProperty("inline-size",`${u}px`)}_applyRadius(){const e=this.getAttribute("radius"),i=this.getAttribute("item-radius");if(!e||["none","sm","md","lg","full"].includes(e)){this.style.removeProperty("--ui-sidebar-radius"),i||this.style.removeProperty("--ui-sidebar-item-radius"),this.style.removeProperty("--ui-sidebar-promo-radius");return}const r=v(e)||e;this.style.setProperty("--ui-sidebar-radius",r),i||this.style.setProperty("--ui-sidebar-item-radius",r),this.style.setProperty("--ui-sidebar-promo-radius",r)}_applyItemMetrics(){const e=v(this.getAttribute("item-radius")),i=m(this.getAttribute("item-gap")),r=m(this.getAttribute("item-padding-x")),t=m(this.getAttribute("item-padding-y")),s=m(this.getAttribute("item-height")),n=m(this.getAttribute("item-font-size")),a=m(this.getAttribute("item-line-height"));this._setOptionalCssVar("--ui-sidebar-item-radius",e),this._setOptionalCssVar("--ui-sidebar-item-gap",i),this._setOptionalCssVar("--ui-sidebar-item-padding-x",r),this._setOptionalCssVar("--ui-sidebar-item-padding-y",t),this._setOptionalCssVar("--ui-sidebar-item-height",s),this._setOptionalCssVar("--ui-sidebar-item-font-size",n),this._setOptionalCssVar("--ui-sidebar-item-line-height",a)}_setOptionalCssVar(e,i){if(!i){this.style.removeProperty(e);return}this.style.setProperty(e,i)}_restoreWidth(e){if(!this.hasAttribute("auto-save"))return e;const i=this.getAttribute("storage-key");if(!i)return e;try{const r=window.localStorage.getItem(`ui-sidebar:${i}`);if(!r)return e;const t=Number.parseFloat(r);return Number.isFinite(t)?t:e}catch{return e}}_persistWidth(e){if(!this.hasAttribute("auto-save"))return;const i=this.getAttribute("storage-key");if(i)try{window.localStorage.setItem(`ui-sidebar:${i}`,`${e}`)}catch{}}_currentExpandedWidth(){const e=Number.parseFloat(this.style.getPropertyValue("--ui-sidebar-width"));return Number.isFinite(e)&&e>0?e:c(this.getAttribute("width"),y[z(this.getAttribute("size"))].expanded)}_bindResponsiveCollapse(){if(this._responsiveCleanup?.(),this._responsiveCleanup=null,typeof window>"u"||typeof window.matchMedia!="function")return;const e=window.matchMedia("(max-width: 767px)"),i=()=>this._syncResponsiveCollapse(e.matches);typeof e.addEventListener=="function"?e.addEventListener("change",i):typeof e.addListener=="function"&&e.addListener(i),this._responsiveCleanup=()=>{typeof e.removeEventListener=="function"?e.removeEventListener("change",i):typeof e.removeListener=="function"&&e.removeListener(i)},i()}_syncResponsiveCollapse(e){if(this.hasAttribute("collapsible")){if(e){!this.hasAttribute("collapsed")&&!this._userCollapsePreference&&(this._responsiveAutoCollapsed=!0,this._lastExpandedWidth=this._currentExpandedWidth(),this.setAttribute("collapsed",""),this.dispatchEvent(new CustomEvent("toggle",{detail:{collapsed:!0,source:"responsive"},bubbles:!0})),this.dispatchEvent(new CustomEvent("collapse-change",{detail:{collapsed:!0,source:"responsive"},bubbles:!0})));return}this._responsiveAutoCollapsed&&!this._userCollapsePreference&&(this._responsiveAutoCollapsed=!1,this.hasAttribute("collapsed")&&(this.removeAttribute("collapsed"),this.dispatchEvent(new CustomEvent("toggle",{detail:{collapsed:!1,source:"responsive"},bubbles:!0})),this.dispatchEvent(new CustomEvent("collapse-change",{detail:{collapsed:!1,source:"responsive"},bubbles:!0}))))}}_emitWidthChange(e){const i={width:c(this.style.getPropertyValue("--ui-sidebar-width"),0),collapsedWidth:c(this.style.getPropertyValue("--ui-sidebar-collapsed-width"),0),minWidth:c(this.style.getPropertyValue("--ui-sidebar-min-width"),0),maxWidth:c(this.style.getPropertyValue("--ui-sidebar-max-width"),0),source:e};this.dispatchEvent(new CustomEvent("width-change",{detail:i,bubbles:!0}))}_handleResizeKey(e){const r=this.getAttribute("position")==="right"?-1:1,t=this._currentExpandedWidth(),s=c(this.style.getPropertyValue("--ui-sidebar-min-width"),t),n=c(this.style.getPropertyValue("--ui-sidebar-max-width"),t);let a=t;if(e.key==="ArrowRight")a=t+16*r;else if(e.key==="ArrowLeft")a=t-16*r;else if(e.key==="Home")a=s;else if(e.key==="End")a=n;else return;e.preventDefault(),a=Math.min(Math.max(a,s),n),this.style.setProperty("--ui-sidebar-width",`${a}px`),this.hasAttribute("collapsed")||(this.style.setProperty("--ui-sidebar-current-width",`${a}px`),this.style.setProperty("inline-size",`${a}px`)),this._persistWidth(a),this._emitWidthChange("keyboard")}_startResize(e){if(!this.hasAttribute("resizable"))return;e.preventDefault();const i=this.getAttribute("position")==="right",r=e.clientX,t=this._currentExpandedWidth(),s=c(this.style.getPropertyValue("--ui-sidebar-min-width"),t),n=c(this.style.getPropertyValue("--ui-sidebar-max-width"),t);this._dragging=!0,this.dispatchEvent(new CustomEvent("resize-start",{detail:{width:t},bubbles:!0}));const a=u=>{const p=u.clientX-r,g=i?t-p:t+p,b=Math.min(Math.max(g,s),n);this.style.setProperty("--ui-sidebar-width",`${b}px`),this.hasAttribute("collapsed")||(this.style.setProperty("--ui-sidebar-current-width",`${b}px`),this.style.setProperty("inline-size",`${b}px`)),this.dispatchEvent(new CustomEvent("resize",{detail:{width:b},bubbles:!0}))},d=()=>{if(!this._dragging)return;this._dragging=!1,window.removeEventListener("pointermove",a),window.removeEventListener("pointerup",d);const u=this._currentExpandedWidth();this._persistWidth(u),this._emitWidthChange("pointer"),this.dispatchEvent(new CustomEvent("resize-end",{detail:{width:u},bubbles:!0}))};window.addEventListener("pointermove",a),window.addEventListener("pointerup",d),this._resizeCleanup=()=>{window.removeEventListener("pointermove",a),window.removeEventListener("pointerup",d)}}}typeof customElements<"u"&&!customElements.get("ui-sidebar")&&customElements.define("ui-sidebar",A);exports.UISidebar=A;