@editora/ui-core 0.1.19 → 0.1.20

package/dist/sidebar.esm.js

@@ -1,9 +1,9 @@
-import { E as T } from "./ElementBase-909688f3.mjs";
-const _ = {
+import { E as T } from "./ElementBase-YlTLMsGk.mjs";
+const 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 }
-}, z = /* @__PURE__ */ new Set([
+}, w = /* @__PURE__ */ new Set([
   "variant",
   "size",
   "density",
@@ -21,7 +21,7 @@ const _ = {
   "position",
   "rail",
   "headless"
-]), A = /* @__PURE__ */ new Set([
+]), _ = /* @__PURE__ */ new Set([
   "width",
   "min-width",
   "max-width",
@@ -746,41 +746,36 @@ const _ = {
 function d(o) {
   return o.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function y(o) {
-  if (!o)
-    return null;
+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 g(o) {
-  if (!o)
-    return null;
+function m(o) {
+  if (!o) return null;
   const e = o.trim();
   return e ? /^\d+(\.\d+)?$/.test(e) ? `${e}px` : e : null;
 }
-function C(o) {
+function z(o) {
   return o === "sm" || o === "1" ? "sm" : o === "lg" || o === "3" ? "lg" : "md";
 }
 function l(o, e) {
-  if (!o)
-    return e;
+  if (!o) return e;
   const i = Number.parseFloat(String(o));
   return Number.isFinite(i) ? i : e;
 }
-function x(o) {
+function v(o) {
   return o.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "") || "item";
 }
 class V extends T {
   constructor() {
     super(...arguments), this._observer = null, this._resizeCleanup = null, this._responsiveCleanup = null, this._responsiveAutoCollapsed = !1, this._userCollapsePreference = !1, this._expanded = /* @__PURE__ */ new Set(), this._dragging = !1, this._lastExpandedWidth = 0, this._handleSearchInput = (e) => {
       const i = e.target;
-      if (!i)
-        return;
-      const t = i.closest('[slot="search"]');
-      if (!t || !this.contains(t))
-        return;
-      const r = typeof i.value == "string" ? i.value : "";
-      r ? this.setAttribute("search-query", r) : this.removeAttribute("search-query"), this.dispatchEvent(new CustomEvent("search-change", { detail: { query: r }, bubbles: !0 }));
+      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() {
@@ -822,23 +817,22 @@ class V extends T {
     super.connectedCallback(), this._observeLightDom(), this._bindResponsiveCollapse(), this.addEventListener("input", this._handleSearchInput, !0), this.addEventListener("change", this._handleSearchInput, !0);
   }
   disconnectedCallback() {
-    var e, i, t;
-    (e = this._observer) == null || e.disconnect(), this._observer = null, (i = this._resizeCleanup) == null || i.call(this), this._resizeCleanup = null, (t = this._responsiveCleanup) == null || t.call(this), this._responsiveCleanup = null, this.removeEventListener("input", this._handleSearchInput, !0), this.removeEventListener("change", this._handleSearchInput, !0), super.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 !(A.has(e) || z.has(e) || e === "collapsed" || e === "value" || e === "radius");
+    return !(_.has(e) || w.has(e) || e === "collapsed" || e === "value" || e === "radius");
   }
-  attributeChangedCallback(e, i, t) {
-    if (i !== t) {
+  attributeChangedCallback(e, i, r) {
+    if (i !== r) {
       if (e === "radius" && this.isConnected) {
-        const r = y(t);
-        if (r && r !== t) {
-          this.setAttribute("radius", r);
+        const t = f(r);
+        if (t && t !== r) {
+          this.setAttribute("radius", t);
           return;
         }
       }
       if (this.isConnected) {
-        if (A.has(e)) {
+        if (_.has(e)) {
           this._applySizing();
           return;
         }
@@ -850,7 +844,7 @@ class V extends T {
           this._applyItemMetrics();
           return;
         }
-        if (!z.has(e)) {
+        if (!w.has(e)) {
           if (e === "collapsed") {
             this.hasAttribute("collapsed") && this._expanded.clear(), this._applySizing(), this._syncExpandedDom();
             return;
@@ -859,7 +853,7 @@ class V extends T {
             this._syncActiveDom();
             return;
           }
-          super.attributeChangedCallback(e, i, t);
+          super.attributeChangedCallback(e, i, r);
         }
       }
     }
@@ -880,19 +874,19 @@ class V extends T {
     (typeof e == "boolean" ? e : !this.hasAttribute("collapsed")) ? this.collapse() : this.expand();
   }
   render() {
-    const e = this._buildSections(), i = !this.querySelector('[slot="header"]'), t = !this.querySelector('[slot="search"]'), r = !this.querySelector('[slot="footer"]'), s = !this.querySelector('[slot="promo"]'), a = `
+    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" ${t ? "hidden" : ""}><slot name="search"></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")}">
           ${e}
         </nav>
         <div class="promo-wrap" part="promo" ${s ? "hidden" : ""}><slot name="promo"></slot></div>
-        <div class="footer-wrap" part="footer" ${r ? "hidden" : ""}><slot name="footer"></slot></div>
+        <div class="footer-wrap" part="footer" ${t ? "hidden" : ""}><slot name="footer"></slot></div>
         <button class="resize-handle" part="resize-handle" type="button" aria-label="Resize sidebar"></button>
       </aside>
     `;
-    this.setContent(D(a)), this._applyItemMetrics(), this._applyRadius(), this._applySizing(), this._bindInteractions(), this._syncActiveDom(), this._syncExpandedDom();
+    this.setContent(D(n)), this._applyItemMetrics(), this._applyRadius(), this._applySizing(), this._bindInteractions(), this._syncActiveDom(), this._syncExpandedDom();
   }
   _observeLightDom() {
     this._observer || (this._observer = new MutationObserver((e) => {
@@ -906,10 +900,10 @@ class V extends T {
   }
   _buildSections() {
     const e = this._groupItems(this._filterItems(this._collectItems(), this.getAttribute("search-query") || ""));
-    return e.length ? e.map(({ label: i, items: t }) => `
+    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">${t.map((s, a) => this._renderItem(s, `${x(i || "general")}-${a}`)).join("")}</div>
+            <div class="section-items">${r.map((s, n) => this._renderItem(s, `${v(i || "general")}-${n}`)).join("")}</div>
           </section>
         `).join("") : `
         <section class="section" part="section">
@@ -927,18 +921,18 @@ class V extends T {
       `;
   }
   _renderItem(e, i) {
-    const t = e.id || i, r = this.value ? this.value === e.value : !!e.active, s = this._expanded.has(t), a = this.getAttribute("show-icons") !== "false", n = this.getAttribute("show-badges") !== "false", c = e.description ? `<div class="item-description">${d(e.description)}</div>` : "", u = e.contentHtml ? `<span class="copy custom-copy">${e.contentHtml}</span>` : `<span class="copy">
+    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", c = e.description ? `<div class="item-description">${d(e.description)}</div>` : "", u = e.contentHtml ? `<span class="copy custom-copy">${e.contentHtml}</span>` : `<span class="copy">
             <span class="item-label">${d(e.label)}</span>
             ${c}
-          </span>`, h = a ? this._renderIcon(e) : "", b = n && e.badge ? `<span class="badge" part="badge">${d(e.badge)}</span>` : "", p = 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>' : "", v = h ? `<span class="icon-wrap" part="icon"><span class="icon">${h}</span></span>` : "", f = b || p ? `<span class="end-wrap">${b ? `<span class="meta">${b}</span>` : ""}${p}</span>` : "", m = !!e.href && !e.children.length, E = r ? ' aria-current="page" data-active="true"' : "", $ = e.disabled ? ' aria-disabled="true"' : ' aria-disabled="false"', k = e.tone && e.tone !== "default" ? ` data-tone="${d(e.tone)}"` : "", I = m ? ` href="${d(e.href || "")}"` : "", S = m && e.target ? ` target="${d(e.target)}"` : "", P = m && e.rel ? ` rel="${d(e.rel)}"` : "", L = e.children.length ? `<div class="submenu" part="submenu"><div class="submenu-inner">${e.children.map((R, W) => this._renderItem(R, `${t}-${W}`)).join("")}</div></div>` : "", w = m ? "a" : "button", H = m ? "" : ' type="button"';
+          </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>' : "", A = p ? `<span class="icon-wrap" part="icon"><span class="icon">${p}</span></span>` : "", C = g || b ? `<span class="end-wrap">${g ? `<span class="meta">${g}</span>` : ""}${b}</span>` : "", h = !!e.href && !e.children.length, E = t ? ' aria-current="page" data-active="true"' : "", $ = e.disabled ? ' aria-disabled="true"' : ' aria-disabled="false"', k = e.tone && e.tone !== "default" ? ` data-tone="${d(e.tone)}"` : "", I = h ? ` href="${d(e.href || "")}"` : "", S = h && e.target ? ` target="${d(e.target)}"` : "", P = h && e.rel ? ` rel="${d(e.rel)}"` : "", L = e.children.length ? `<div class="submenu" part="submenu"><div class="submenu-inner">${e.children.map((R, W) => this._renderItem(R, `${r}-${W}`)).join("")}</div></div>` : "", x = h ? "a" : "button", H = h ? "" : ' type="button"';
     return `
-      <div class="item" data-item-id="${d(t)}" data-value="${d(e.value)}" ${s ? 'data-expanded="true"' : ""}>
-        <${w}
+      <div class="item" data-item-id="${d(r)}" data-value="${d(e.value)}" ${s ? 'data-expanded="true"' : ""}>
+        <${x}
           class="item-button"
           part="item"
           ${H}
-          data-action="${e.children.length ? "toggle" : m ? "navigate" : "select"}"
-          data-item-id="${d(t)}"
+          data-action="${e.children.length ? "toggle" : h ? "navigate" : "select"}"
+          data-item-id="${d(r)}"
           data-value="${d(e.value)}"
           ${I}
           ${S}
@@ -947,10 +941,10 @@ class V extends T {
           ${$}
           ${k}
         >
-          ${v}
+          ${A}
           ${u}
-          ${f}
-        </${w}>
+          ${C}
+        </${x}>
         ${L}
       </div>
     `;
@@ -971,19 +965,18 @@ class V extends T {
     return Array.from(this.querySelectorAll('[slot="item"]')).map((e) => this._parseSlottedItem(e));
   }
   _parseSlottedItem(e) {
-    var r, s;
     let i = [];
-    const t = e.dataset.children;
-    if (t)
+    const r = e.dataset.children;
+    if (r)
       try {
-        const a = JSON.parse(t);
-        Array.isArray(a) && (i = a);
+        const t = JSON.parse(r);
+        Array.isArray(t) && (i = t);
       } catch {
         i = [];
       }
     return {
-      value: e.dataset.value || ((r = e.textContent) == null ? void 0 : r.trim()) || "item",
-      label: e.dataset.label || ((s = e.textContent) == null ? void 0 : s.trim()) || e.dataset.value || "Item",
+      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,
@@ -1001,67 +994,65 @@ class V extends T {
   }
   _renderIcon(e) {
     const i = String(e.iconHtml || "").trim();
-    if (i)
-      return i;
-    const t = String(e.icon || "").trim();
-    return t ? d(t) : "";
+    if (i) return i;
+    const r = String(e.icon || "").trim();
+    return r ? d(r) : "";
   }
-  _normalizeItems(e, i = 0, t = "") {
-    return e.map((r, s) => {
-      var b, p, v, f;
-      const a = ((b = r.label) == null ? void 0 : b.trim()) || ((p = r.value) == null ? void 0 : p.trim()) || `Item ${s + 1}`, n = ((v = r.value) == null ? void 0 : v.trim()) || x(a), c = ((f = r.section) == null ? void 0 : f.trim()) || t || "", u = `${x(c || "nav")}-${x(n)}-${i}-${s}`, h = this._normalizeItems(r.children || [], i + 1, c);
+  _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), c = t.section?.trim() || r || "", u = `${v(c || "nav")}-${v(a)}-${i}-${s}`, p = this._normalizeItems(t.children || [], i + 1, c);
       return {
-        ...r,
+        ...t,
         id: u,
-        label: a,
-        value: n,
+        label: n,
+        value: a,
         section: c,
-        children: h,
+        children: p,
         depth: i
       };
     });
   }
   _groupItems(e) {
-    const i = [], t = /* @__PURE__ */ new Map();
-    for (const r of e) {
-      const s = r.section || "", a = t.get(s);
-      if (a) {
-        a.items.push(r);
+    const i = [], r = /* @__PURE__ */ new Map();
+    for (const t of e) {
+      const s = t.section || "", n = r.get(s);
+      if (n) {
+        n.items.push(t);
         continue;
       }
-      const n = { label: s, items: [r] };
-      t.set(s, n), i.push(n);
+      const a = { label: s, items: [t] };
+      r.set(s, a), i.push(a);
     }
     return i;
   }
   _filterItems(e, i) {
-    const t = i.trim().toLowerCase();
-    return t ? e.map((r) => {
-      const s = [r.label, r.description, r.value, r.section].filter(Boolean).some((n) => String(n).toLowerCase().includes(t)), a = s ? r.children : this._filterItems(r.children, t);
-      return !s && !a.length ? null : {
-        ...r,
-        children: a
+    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((r) => !!r) : e;
+    }).filter((t) => !!t) : e;
   }
   _bindInteractions() {
     this.root.querySelectorAll(".item-button").forEach((i) => {
-      i.onclick = (t) => {
-        const r = t.currentTarget, s = r.dataset.action, a = r.dataset.itemId || "", n = r.dataset.value || "";
-        if (r.getAttribute("aria-disabled") !== "true") {
+      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") {
-            t.preventDefault(), this._toggleExpanded(a);
+            r.preventDefault(), this._toggleExpanded(n);
             return;
           }
           if (s === "navigate") {
-            this._selectValue(n);
+            this._selectValue(a);
             return;
           }
-          t.preventDefault(), this._selectValue(n);
+          r.preventDefault(), this._selectValue(a);
         }
-      }, i.onkeydown = (t) => {
-        const r = t.currentTarget, s = r.dataset.itemId || "", a = r.dataset.value || "";
-        t.key === "ArrowRight" && r.dataset.action === "toggle" ? (t.preventDefault(), this._expanded.add(s), this._syncExpandedDom()) : t.key === "ArrowLeft" ? (t.preventDefault(), this._expanded.delete(s), this._syncExpandedDom()) : (t.key === "Enter" || t.key === " ") && (t.preventDefault(), r.dataset.action === "toggle" ? this._toggleExpanded(s) : 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");
@@ -1078,11 +1069,11 @@ class V extends T {
   }
   _selectValue(e) {
     this.value = e;
-    const i = this._flattenItems(this._collectItems()), t = i.findIndex((a) => a.value === e), r = i[t], s = {
-      index: t,
+    const i = this._flattenItems(this._collectItems()), r = i.findIndex((n) => n.value === e), t = i[r], s = {
+      index: r,
       value: e,
-      label: (r == null ? void 0 : r.label) || e,
-      item: r
+      label: t?.label || e,
+      item: t
     };
     this.dispatchEvent(new CustomEvent("select", { detail: s, bubbles: !0 })), this.dispatchEvent(new CustomEvent("change", { detail: s, bubbles: !0 }));
   }
@@ -1096,8 +1087,8 @@ class V extends T {
     return e.flatMap((i) => [i, ...this._flattenItems(i.children)]);
   }
   _applySizing() {
-    const e = C(this.getAttribute("size")), i = _[e], t = l(this.getAttribute("width"), i.expanded), r = l(this.getAttribute("min-width"), i.min), s = l(this.getAttribute("max-width"), i.max), a = l(this.getAttribute("collapsed-width"), i.collapsed), n = this._restoreWidth(t), c = Math.min(Math.max(n, r), s), u = this.hasAttribute("collapsed") ? a : c;
-    this.style.setProperty("--ui-sidebar-width", `${c}px`), this.style.setProperty("--ui-sidebar-min-width", `${r}px`), this.style.setProperty("--ui-sidebar-max-width", `${s}px`), this.style.setProperty("--ui-sidebar-collapsed-width", `${a}px`), this.style.setProperty("--ui-sidebar-current-width", `${u}px`), this.style.setProperty("inline-size", `${u}px`);
+    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), c = Math.min(Math.max(a, t), s), u = this.hasAttribute("collapsed") ? n : c;
+    this.style.setProperty("--ui-sidebar-width", `${c}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");
@@ -1105,12 +1096,12 @@ class V extends T {
       this.style.removeProperty("--ui-sidebar-radius"), i || this.style.removeProperty("--ui-sidebar-item-radius"), this.style.removeProperty("--ui-sidebar-promo-radius");
       return;
     }
-    const t = y(e) || e;
-    this.style.setProperty("--ui-sidebar-radius", t), i || this.style.setProperty("--ui-sidebar-item-radius", t), this.style.setProperty("--ui-sidebar-promo-radius", t);
+    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 = y(this.getAttribute("item-radius")), i = g(this.getAttribute("item-gap")), t = g(this.getAttribute("item-padding-x")), r = g(this.getAttribute("item-padding-y")), s = g(this.getAttribute("item-height")), a = g(this.getAttribute("item-font-size")), n = g(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", t), this._setOptionalCssVar("--ui-sidebar-item-padding-y", r), this._setOptionalCssVar("--ui-sidebar-item-height", s), this._setOptionalCssVar("--ui-sidebar-item-font-size", a), this._setOptionalCssVar("--ui-sidebar-item-line-height", n);
+    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) {
@@ -1120,24 +1111,20 @@ class V extends T {
     this.style.setProperty(e, i);
   }
   _restoreWidth(e) {
-    if (!this.hasAttribute("auto-save"))
-      return e;
+    if (!this.hasAttribute("auto-save")) return e;
     const i = this.getAttribute("storage-key");
-    if (!i)
-      return e;
+    if (!i) return e;
     try {
-      const t = window.localStorage.getItem(`ui-sidebar:${i}`);
-      if (!t)
-        return e;
-      const r = Number.parseFloat(t);
-      return Number.isFinite(r) ? r : e;
+      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;
+    if (!this.hasAttribute("auto-save")) return;
     const i = this.getAttribute("storage-key");
     if (i)
       try {
@@ -1147,12 +1134,10 @@ class V extends T {
   }
   _currentExpandedWidth() {
     const e = Number.parseFloat(this.style.getPropertyValue("--ui-sidebar-width"));
-    return Number.isFinite(e) && e > 0 ? e : l(this.getAttribute("width"), _[C(this.getAttribute("size"))].expanded);
+    return Number.isFinite(e) && e > 0 ? e : l(this.getAttribute("width"), y[z(this.getAttribute("size"))].expanded);
   }
   _bindResponsiveCollapse() {
-    var t;
-    if ((t = this._responsiveCleanup) == null || t.call(this), this._responsiveCleanup = null, typeof window > "u" || typeof window.matchMedia != "function")
-      return;
+    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);
@@ -1178,38 +1163,31 @@ class V extends T {
     this.dispatchEvent(new CustomEvent("width-change", { detail: i, bubbles: !0 }));
   }
   _handleResizeKey(e) {
-    const t = this.getAttribute("position") === "right" ? -1 : 1, r = this._currentExpandedWidth(), s = l(this.style.getPropertyValue("--ui-sidebar-min-width"), r), a = l(this.style.getPropertyValue("--ui-sidebar-max-width"), r);
-    let n = r;
-    if (e.key === "ArrowRight")
-      n = r + 16 * t;
-    else if (e.key === "ArrowLeft")
-      n = r - 16 * t;
-    else if (e.key === "Home")
-      n = s;
-    else if (e.key === "End")
-      n = a;
-    else
-      return;
-    e.preventDefault(), n = Math.min(Math.max(n, s), a), this.style.setProperty("--ui-sidebar-width", `${n}px`), this.hasAttribute("collapsed") || (this.style.setProperty("--ui-sidebar-current-width", `${n}px`), this.style.setProperty("inline-size", `${n}px`)), this._persistWidth(n), this._emitWidthChange("keyboard");
+    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;
+    if (!this.hasAttribute("resizable")) return;
     e.preventDefault();
-    const i = this.getAttribute("position") === "right", t = e.clientX, r = this._currentExpandedWidth(), s = l(this.style.getPropertyValue("--ui-sidebar-min-width"), r), a = l(this.style.getPropertyValue("--ui-sidebar-max-width"), r);
-    this._dragging = !0, this.dispatchEvent(new CustomEvent("resize-start", { detail: { width: r }, bubbles: !0 }));
-    const n = (u) => {
-      const h = u.clientX - t, b = i ? r - h : r + h, p = Math.min(Math.max(b, s), a);
-      this.style.setProperty("--ui-sidebar-width", `${p}px`), this.hasAttribute("collapsed") || (this.style.setProperty("--ui-sidebar-current-width", `${p}px`), this.style.setProperty("inline-size", `${p}px`)), this.dispatchEvent(new CustomEvent("resize", { detail: { width: p }, bubbles: !0 }));
+    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 = (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 }));
     }, c = () => {
-      if (!this._dragging)
-        return;
-      this._dragging = !1, window.removeEventListener("pointermove", n), window.removeEventListener("pointerup", c);
+      if (!this._dragging) return;
+      this._dragging = !1, window.removeEventListener("pointermove", a), window.removeEventListener("pointerup", c);
       const u = this._currentExpandedWidth();
       this._persistWidth(u), this._emitWidthChange("pointer"), this.dispatchEvent(new CustomEvent("resize-end", { detail: { width: u }, bubbles: !0 }));
     };
-    window.addEventListener("pointermove", n), window.addEventListener("pointerup", c), this._resizeCleanup = () => {
-      window.removeEventListener("pointermove", n), window.removeEventListener("pointerup", c);
+    window.addEventListener("pointermove", a), window.addEventListener("pointerup", c), this._resizeCleanup = () => {
+      window.removeEventListener("pointermove", a), window.removeEventListener("pointerup", c);
     };
   }
 }

package/dist/skeleton.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("./ElementBase-1b301e7f.js"),h=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("./ElementBase-EV6mVBUV.js");function r(a){const e=a.trim();return!e||/[;{}<>"']/.test(e)?"":e}const x=`
   :host {
     display: block;
     --ui-skeleton-radius: 10px;
@@ -183,23 +183,23 @@
       display: none !important;
     }
   }
-`,o=["96%","86%","78%","92%","68%","88%"];class s extends g.ElementBase{static get observedAttributes(){return["count","height","width","radius","gap","variant","animated","animation","density","tone","duration","headless"]}_numAttr(e,t){const i=this.getAttribute(e);if(!i)return t;const n=Number(i);return Number.isFinite(n)&&n>0?n:t}_animationMode(){const e=(this.getAttribute("animation")||"").trim().toLowerCase();return e==="shimmer"||e==="pulse"||e==="wave"||e==="none"?e:this.hasAttribute("animated")?"shimmer":"none"}_lineWidth(e,t,i){return i&&i.trim()?i:t==="text"?o[e%o.length]||"92%":t==="badge"?"92px":t==="button"?"128px":t==="avatar"?"44px":"100%"}render(){const e=Math.max(1,Math.min(40,this._numAttr("count",1))),t=this.getAttribute("height"),i=this.getAttribute("width"),n=this.getAttribute("radius"),r=this.getAttribute("gap"),a=this.getAttribute("duration"),l=(this.getAttribute("variant")||"rect").trim(),u=this._animationMode(),d=Array.from({length:e},(m,c)=>`<div class="line" style="--ui-line-width:${this._lineWidth(c,l,i)};"></div>`).join("");this.setContent(`
-      <style>${h}</style>
+`,g=["96%","86%","78%","92%","68%","88%"];class p extends f.ElementBase{static get observedAttributes(){return["count","height","width","radius","gap","variant","animated","animation","density","tone","duration","headless"]}_numAttr(e,t){const i=this.getAttribute(e);if(!i)return t;const n=Number(i);return Number.isFinite(n)&&n>0?n:t}_animationMode(){const e=(this.getAttribute("animation")||"").trim().toLowerCase();return e==="shimmer"||e==="pulse"||e==="wave"||e==="none"?e:this.hasAttribute("animated")?"shimmer":"none"}_lineWidth(e,t,i){return i&&i.trim()?i:t==="text"?g[e%g.length]||"92%":t==="badge"?"92px":t==="button"?"128px":t==="avatar"?"44px":"100%"}render(){const e=Math.max(1,Math.min(40,this._numAttr("count",1))),t=this.getAttribute("height"),i=this.getAttribute("width"),n=this.getAttribute("radius"),o=this.getAttribute("gap"),s=this.getAttribute("duration"),m=(this.getAttribute("variant")||"rect").trim(),k=this._animationMode(),b=Array.from({length:e},(w,v)=>`<div class="line" style="--ui-line-width:${r(this._lineWidth(v,m,i))};"></div>`).join(""),u=t?r(t):"",l=i?r(i):"",c=n?r(n):"",d=o?r(o):"",h=s?r(s):"";this.setContent(`
+      <style>${x}</style>
       <div
         class="stack"
-        data-animation="${u}"
+        data-animation="${k}"
         style="
-          ${t?`--ui-skeleton-height:${t};`:""}
-          ${i?`--ui-skeleton-width:${i};`:""}
-          ${n?`--ui-skeleton-radius:${n};`:""}
-          ${r?`--ui-skeleton-gap:${r};`:""}
-          ${a?`--ui-skeleton-duration:${a};`:""}
+          ${u?`--ui-skeleton-height:${u};`:""}
+          ${l?`--ui-skeleton-width:${l};`:""}
+          ${c?`--ui-skeleton-radius:${c};`:""}
+          ${d?`--ui-skeleton-gap:${d};`:""}
+          ${h?`--ui-skeleton-duration:${h};`:""}
         "
         role="status"
         aria-live="polite"
         aria-busy="true"
         aria-label="Loading"
       >
-        ${d}
+        ${b}
       </div>
-    `)}shouldRenderOnAttributeChange(e,t,i){return!0}}typeof customElements<"u"&&!customElements.get("ui-skeleton")&&customElements.define("ui-skeleton",s);exports.UISkeleton=s;
+    `)}shouldRenderOnAttributeChange(e,t,i){return!0}}typeof customElements<"u"&&!customElements.get("ui-skeleton")&&customElements.define("ui-skeleton",p);exports.UISkeleton=p;

package/dist/skeleton.esm.js

@@ -1,5 +1,9 @@
-import { E as c } from "./ElementBase-909688f3.mjs";
-const h = `
+import { E as v } from "./ElementBase-YlTLMsGk.mjs";
+function r(a) {
+  const e = a.trim();
+  return !e || /[;{}<>"']/.test(e) ? "" : e;
+}
+const f = `
   :host {
     display: block;
     --ui-skeleton-radius: 10px;
@@ -184,8 +188,8 @@ const h = `
       display: none !important;
     }
   }
-`, o = ["96%", "86%", "78%", "92%", "68%", "88%"];
-class g extends c {
+`, g = ["96%", "86%", "78%", "92%", "68%", "88%"];
+class x extends v {
   static get observedAttributes() {
     return [
       "count",
@@ -202,48 +206,47 @@ class g extends c {
       "headless"
     ];
   }
-  _numAttr(e, i) {
-    const t = this.getAttribute(e);
-    if (!t)
-      return i;
-    const n = Number(t);
-    return Number.isFinite(n) && n > 0 ? n : i;
+  _numAttr(e, t) {
+    const i = this.getAttribute(e);
+    if (!i) return t;
+    const n = Number(i);
+    return Number.isFinite(n) && n > 0 ? n : t;
   }
   _animationMode() {
     const e = (this.getAttribute("animation") || "").trim().toLowerCase();
     return e === "shimmer" || e === "pulse" || e === "wave" || e === "none" ? e : this.hasAttribute("animated") ? "shimmer" : "none";
   }
-  _lineWidth(e, i, t) {
-    return t && t.trim() ? t : i === "text" ? o[e % o.length] || "92%" : i === "badge" ? "92px" : i === "button" ? "128px" : i === "avatar" ? "44px" : "100%";
+  _lineWidth(e, t, i) {
+    return i && i.trim() ? i : t === "text" ? g[e % g.length] || "92%" : t === "badge" ? "92px" : t === "button" ? "128px" : t === "avatar" ? "44px" : "100%";
   }
   render() {
-    const e = Math.max(1, Math.min(40, this._numAttr("count", 1))), i = this.getAttribute("height"), t = this.getAttribute("width"), n = this.getAttribute("radius"), r = this.getAttribute("gap"), a = this.getAttribute("duration"), s = (this.getAttribute("variant") || "rect").trim(), l = this._animationMode(), u = Array.from({ length: e }, (m, d) => `<div class="line" style="--ui-line-width:${this._lineWidth(d, s, t)};"></div>`).join("");
+    const e = Math.max(1, Math.min(40, this._numAttr("count", 1))), t = this.getAttribute("height"), i = this.getAttribute("width"), n = this.getAttribute("radius"), o = this.getAttribute("gap"), s = this.getAttribute("duration"), p = (this.getAttribute("variant") || "rect").trim(), m = this._animationMode(), k = Array.from({ length: e }, (w, b) => `<div class="line" style="--ui-line-width:${r(this._lineWidth(b, p, i))};"></div>`).join(""), u = t ? r(t) : "", l = i ? r(i) : "", c = n ? r(n) : "", d = o ? r(o) : "", h = s ? r(s) : "";
     this.setContent(`
-      <style>${h}</style>
+      <style>${f}</style>
       <div
         class="stack"
-        data-animation="${l}"
+        data-animation="${m}"
         style="
-          ${i ? `--ui-skeleton-height:${i};` : ""}
-          ${t ? `--ui-skeleton-width:${t};` : ""}
-          ${n ? `--ui-skeleton-radius:${n};` : ""}
-          ${r ? `--ui-skeleton-gap:${r};` : ""}
-          ${a ? `--ui-skeleton-duration:${a};` : ""}
+          ${u ? `--ui-skeleton-height:${u};` : ""}
+          ${l ? `--ui-skeleton-width:${l};` : ""}
+          ${c ? `--ui-skeleton-radius:${c};` : ""}
+          ${d ? `--ui-skeleton-gap:${d};` : ""}
+          ${h ? `--ui-skeleton-duration:${h};` : ""}
         "
         role="status"
         aria-live="polite"
         aria-busy="true"
         aria-label="Loading"
       >
-        ${u}
+        ${k}
       </div>
     `);
   }
-  shouldRenderOnAttributeChange(e, i, t) {
+  shouldRenderOnAttributeChange(e, t, i) {
     return !0;
   }
 }
-typeof customElements < "u" && !customElements.get("ui-skeleton") && customElements.define("ui-skeleton", g);
+typeof customElements < "u" && !customElements.get("ui-skeleton") && customElements.define("ui-skeleton", x);
 export {
-  g as UISkeleton
+  x as UISkeleton
 };