@editora/ui-core 0.2.1 → 0.3.0

package/dist/sidebar.esm.js

@@ -1,4 +1,5 @@
-import { E as T } from "./ElementBase-BeZT54Hj.mjs";
+import { E as D } from "./ElementBase-D5QsC5Vw.mjs";
+import { r as T } from "./navigate-CXebafwF.mjs";
 const y = {
   sm: { expanded: 220, collapsed: 64, min: 168, max: 300 },
   md: { expanded: 236, collapsed: 72, min: 180, max: 320 },
@@ -28,7 +29,7 @@ const y = {
   "collapsed-width",
   "storage-key",
   "auto-save"
-]), D = (o) => `
+]), V = (o) => `
   <style>
     :host {
       --ui-sidebar-bg: var(--base-sidebar-bg, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
@@ -280,7 +281,7 @@ const y = {
       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,
@@ -744,10 +745,10 @@ const y = {
   </style>
   ${o}
 `;
-function d(o) {
+function l(o) {
   return o.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function f(o) {
+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;
@@ -760,15 +761,15 @@ function m(o) {
 function z(o) {
   return o === "sm" || o === "1" ? "sm" : o === "lg" || o === "3" ? "lg" : "md";
 }
-function l(o, e) {
+function c(o, e) {
   if (!o) return e;
   const i = Number.parseFloat(String(o));
   return Number.isFinite(i) ? i : e;
 }
-function v(o) {
+function f(o) {
   return o.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "") || "item";
 }
-class V extends T {
+class q extends D {
   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;
@@ -826,7 +827,7 @@ class V extends T {
   attributeChangedCallback(e, i, r) {
     if (i !== r) {
       if (e === "radius" && this.isConnected) {
-        const t = f(r);
+        const t = v(r);
         if (t && t !== r) {
           this.setAttribute("radius", t);
           return;
@@ -879,7 +880,7 @@ class V extends T {
       <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>
@@ -887,7 +888,7 @@ class V extends T {
         <button class="resize-handle" part="resize-handle" type="button" aria-label="Resize sidebar"></button>
       </aside>
     `;
-    this.setContent(D(n)), this._applyItemMetrics(), this._applyRadius(), this._applySizing(), this._bindInteractions(), this._syncActiveDom(), this._syncExpandedDom();
+    this.setContent(V(n)), this._applyItemMetrics(), this._applyRadius(), this._applySizing(), this._bindInteractions(), this._syncActiveDom(), this._syncExpandedDom();
   }
   _observeLightDom() {
     this._observer || (this._observer = new MutationObserver((e) => {
@@ -903,8 +904,8 @@ class V extends T {
     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">
@@ -922,19 +923,19 @@ class V extends T {
       `;
   }
   _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", 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>`, 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"';
+    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>' : "", 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="${l(e.tone)}"` : "", I = h ? ` href="${l(e.href || "")}"` : "", S = h && e.target ? ` target="${l(e.target)}"` : "", P = h && e.rel ? ` rel="${l(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(r)}" data-value="${d(e.value)}" ${s ? 'data-expanded="true"' : ""}>
+      <div class="item" data-item-id="${l(r)}" data-value="${l(e.value)}" ${s ? 'data-expanded="true"' : ""}>
         <${x}
           class="item-button"
           part="item"
           ${H}
           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)}"
           ${I}
           ${S}
           ${P}
@@ -997,17 +998,17 @@ class V extends T {
     const i = String(e.iconHtml || "").trim();
     if (i) return i;
     const r = String(e.icon || "").trim();
-    return r ? d(r) : "";
+    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() || v(n), c = t.section?.trim() || r || "", u = `${v(c || "nav")}-${v(a)}-${i}-${s}`, p = this._normalizeItems(t.children || [], i + 1, c);
+      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: c,
+        section: d,
         children: p,
         depth: i
       };
@@ -1046,19 +1047,24 @@ class V extends T {
             return;
           }
           if (s === "navigate") {
-            this._selectValue(a);
+            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" || r.key === " ") && (r.preventDefault(), t.dataset.action === "toggle" ? this._toggleExpanded(s) : this._selectValue(n));
+        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));
   }
+  // Link items: the shared navigate contract (primitives/navigate.ts).
+  _handleNavigate(e, i, r) {
+    const t = this._flattenItems(this._collectItems()), s = t.findIndex((d) => d.value === r), n = t[s], a = i.getAttribute("href") || "";
+    T(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());
   }
@@ -1088,8 +1094,8 @@ class V extends T {
     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), 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`);
+    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");
@@ -1097,11 +1103,11 @@ 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 r = f(e) || e;
+    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 = 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"));
+    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) {
@@ -1135,7 +1141,7 @@ 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"), y[z(this.getAttribute("size"))].expanded);
+    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;
@@ -1155,16 +1161,16 @@ class V extends T {
   }
   _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),
+      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 = l(this.style.getPropertyValue("--ui-sidebar-min-width"), t), n = l(this.style.getPropertyValue("--ui-sidebar-max-width"), t);
+    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;
@@ -1176,23 +1182,23 @@ class V extends T {
   _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);
+    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 }));
-    }, c = () => {
+    }, d = () => {
       if (!this._dragging) return;
-      this._dragging = !1, window.removeEventListener("pointermove", a), window.removeEventListener("pointerup", c);
+      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", c), this._resizeCleanup = () => {
-      window.removeEventListener("pointermove", a), window.removeEventListener("pointerup", c);
+    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", V);
+typeof customElements < "u" && !customElements.get("ui-sidebar") && customElements.define("ui-sidebar", q);
 export {
-  V as UISidebar
+  q as UISidebar
 };

package/dist/skeleton.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("./ElementBase-DxbvhLJs.js");function r(a){const e=a.trim();return!e||/[;{}<>"']/.test(e)?"":e}const x=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("./ElementBase-CbUsP3D6.js");function r(a){const e=a.trim();return!e||/[;{}<>"']/.test(e)?"":e}const x=`
   :host {
     display: block;
     --ui-skeleton-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));

package/dist/skeleton.esm.js

@@ -1,4 +1,4 @@
-import { E as v } from "./ElementBase-BeZT54Hj.mjs";
+import { E as v } from "./ElementBase-D5QsC5Vw.mjs";
 function r(a) {
   const e = a.trim();
   return !e || /[;{}<>"']/.test(e) ? "" : e;

package/dist/slider.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const _=require("./ElementBase-DxbvhLJs.js"),x=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const x=require("./ElementBase-CbUsP3D6.js"),k=require("./form-control-B90_3kYN.js"),z=`
   :host {
     --ui-slider-width: min(340px, 100%);
     --ui-slider-track-size: 4px;
@@ -282,10 +282,10 @@
     --ui-slider-text: #e2e8f0;
     --ui-slider-muted: #93a4bd;
     --ui-slider-track: #334155;
-    --ui-slider-fill: #93c5fd;
-    --ui-slider-focus: #93c5fd;
+    --ui-slider-fill: var(--ui-color-accent-on-dark, #93c5fd);
+    --ui-slider-focus: var(--ui-color-accent-on-dark, #93c5fd);
     --ui-slider-thumb-shadow:
-      0 0 0 1px color-mix(in srgb, #93c5fd 36%, transparent),
+      0 0 0 1px color-mix(in srgb, var(--ui-color-accent-on-dark, #93c5fd) 36%, transparent),
       0 4px 14px rgba(2, 6, 23, 0.42);
     --ui-slider-shadow:
       0 14px 34px rgba(2, 6, 23, 0.46),
@@ -460,12 +460,12 @@
       box-shadow: none;
     }
   }
-`;function a(n,t){const e=Number(n);return Number.isFinite(e)?e:t}function h(n,t,e){return Math.max(t,Math.min(e,n))}function b(n){return n.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function v(n,t,e){if(!n)return[];try{const r=JSON.parse(n);return Array.isArray(r)?r.map(i=>typeof i=="number"?{value:i}:i&&typeof i=="object"&&Number.isFinite(Number(i.value))?{value:Number(i.value),label:i.label!=null?String(i.label):void 0}:null).filter(i=>!!i).map(i=>({...i,value:h(i.value,t,e)})):[]}catch{return[]}}function p(n,t=!1){if(n==null)return t;const e=String(n).toLowerCase();return e!=="false"&&e!=="0"&&e!=="off"}function k(n,t,e,r,i,l,u){const s=Math.max(1,l-i),o=Math.round((t-i)/s*100),d=Math.round((e-i)/s*100),c=Math.round((r-i)/s*100);return n==="percent"?u?`${d}% – ${c}%`:`${o}%`:n==="range"?u?`${e} – ${r}`:`${t}`:`${t}`}const m=new Set(["value","value-start","value-end","min","max","step","disabled","headless","orientation","size","variant","tone","show-value","format","name","name-start","name-end"]);class g extends _.ElementBase{constructor(){super(),this._startInput=null,this._endInput=null,this._valueEl=null,this._trackWrap=null,this._rangeMode=!1,this._value=0,this._valueStart=0,this._valueEnd=0,this._onInput=this._onInput.bind(this),this._onChange=this._onChange.bind(this)}static get observedAttributes(){return["value","value-start","value-end","min","max","step","disabled","headless","range","orientation","size","variant","tone","show-value","format","label","description","marks","name","name-start","name-end"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("input",this._onInput,!0),this.root.addEventListener("change",this._onChange,!0)}disconnectedCallback(){this.root.removeEventListener("input",this._onInput,!0),this.root.removeEventListener("change",this._onChange,!0),super.disconnectedCallback()}attributeChangedCallback(t,e,r){if(e!==r){if(m.has(t)&&this._trackWrap){this._syncFromAttributes(),this._syncDom();return}this.isConnected&&this.requestRender()}}get value(){return this._rangeMode?this._valueEnd:this._value}set value(t){const e=Number(t);Number.isFinite(e)&&this.setAttribute("value",String(e))}get valueStart(){return this._valueStart}set valueStart(t){const e=Number(t);Number.isFinite(e)&&this.setAttribute("value-start",String(e))}get valueEnd(){return this._valueEnd}set valueEnd(t){const e=Number(t);Number.isFinite(e)&&this.setAttribute("value-end",String(e))}_syncFromAttributes(){const t=a(this.getAttribute("min"),0),e=Math.max(t,a(this.getAttribute("max"),100)),r=Math.max(1e-4,a(this.getAttribute("step"),1));this._rangeMode=this.hasAttribute("range");const i=a(this.getAttribute("value"),this._value||t),l=a(this.getAttribute("value-start"),this._valueStart||t),u=a(this.getAttribute("value-end"),this._valueEnd||i||t);if(!this._rangeMode){this._value=h(i,t,e),this._valueStart=t,this._valueEnd=this._value;return}const s=h(Math.min(l,u),t,e),o=h(Math.max(l,u),t,e);this._valueStart=Math.round(s/r)*r,this._valueEnd=Math.round(o/r)*r,this._value=this._valueEnd}_detail(){const t=a(this.getAttribute("min"),0),e=Math.max(t,a(this.getAttribute("max"),100)),r=Math.max(1e-4,a(this.getAttribute("step"),1)),i=Math.max(1,e-t),l=(this._value-t)/i*100,u=(this._valueStart-t)/i*100,s=(this._valueEnd-t)/i*100;return{value:this._rangeMode?this._valueEnd:this._value,valueStart:this._valueStart,valueEnd:this._valueEnd,range:this._rangeMode,min:t,max:e,step:r,percent:l,percentStart:u,percentEnd:s}}_emit(t){this.dispatchEvent(new CustomEvent(t,{detail:this._detail(),bubbles:!0,composed:!0}))}_syncDom(){const t=a(this.getAttribute("min"),0),e=Math.max(t,a(this.getAttribute("max"),100)),r=Math.max(1e-4,a(this.getAttribute("step"),1)),i=p(this.getAttribute("disabled"))||this.hasAttribute("disabled"),l=this.getAttribute("format")||(this._rangeMode?"range":"percent"),u=p(this.getAttribute("show-value"),!0),s=Math.max(1,e-t),o=(this._valueStart-t)/s*100,d=(this._valueEnd-t)/s*100;this._startInput&&(this._startInput.min=String(t),this._startInput.max=String(e),this._startInput.step=String(r),this._startInput.value=String(this._rangeMode?this._valueStart:this._value),this._startInput.disabled=i,this._startInput.name=this._rangeMode?this.getAttribute("name-start")||this.getAttribute("name")||"":this.getAttribute("name")||"",this._startInput.setAttribute("aria-valuemin",String(t)),this._startInput.setAttribute("aria-valuemax",String(e)),this._startInput.setAttribute("aria-valuenow",String(this._rangeMode?this._valueStart:this._value))),this._endInput&&(this._endInput.min=String(t),this._endInput.max=String(e),this._endInput.step=String(r),this._endInput.value=String(this._valueEnd),this._endInput.disabled=i,this._endInput.name=this.getAttribute("name-end")||this.getAttribute("name")||"",this._endInput.setAttribute("aria-valuemin",String(t)),this._endInput.setAttribute("aria-valuemax",String(e)),this._endInput.setAttribute("aria-valuenow",String(this._valueEnd))),this._trackWrap&&(this._trackWrap.style.setProperty("--ui-slider-start",`${this._rangeMode?o:0}%`),this._trackWrap.style.setProperty("--ui-slider-end",`${d}%`)),this._valueEl&&(this._valueEl.textContent=k(l,this._value,this._valueStart,this._valueEnd,t,e,this._rangeMode),u?this._valueEl.removeAttribute("hidden"):this._valueEl.setAttribute("hidden","")),this.setAttribute("aria-valuemin",String(t)),this.setAttribute("aria-valuemax",String(e)),this.setAttribute("aria-valuenow",String(this.value)),this.setAttribute("aria-orientation",this.getAttribute("orientation")==="vertical"?"vertical":"horizontal"),this.setAttribute("aria-disabled",i?"true":"false")}_updateFromInput(t){const e=a(this.getAttribute("min"),0),r=Math.max(e,a(this.getAttribute("max"),100)),i=Math.max(1e-4,a(this.getAttribute("step"),1));if(!this._rangeMode){this._value=h(a(t.value,this._value),e,r),this._valueStart=e,this._valueEnd=this._value,this.setAttribute("value",String(this._value));return}const l=h(a(t.value,t.classList.contains("start")?this._valueStart:this._valueEnd),e,r);t.classList.contains("start")?this._valueStart=Math.min(l,this._valueEnd):this._valueEnd=Math.max(l,this._valueStart),this._valueStart=Math.round(this._valueStart/i)*i,this._valueEnd=Math.round(this._valueEnd/i)*i,this._value=this._valueEnd,this.setAttribute("value-start",String(this._valueStart)),this.setAttribute("value-end",String(this._valueEnd)),this.setAttribute("value",String(this._valueEnd))}_onInput(t){if(p(this.getAttribute("disabled"))||this.hasAttribute("disabled"))return;const e=t.target;!e||e.type!=="range"||(this._updateFromInput(e),this._syncDom(),this._emit("input"),this._emit("valuechange"))}_onChange(t){if(p(this.getAttribute("disabled"))||this.hasAttribute("disabled"))return;const e=t.target;!e||e.type!=="range"||(this._updateFromInput(e),this._syncDom(),this._emit("change"))}_renderMarks(t,e){const r=v(this.getAttribute("marks"),t,e);if(!r.length)return'<div class="marks" part="marks" hidden></div>';const i=Math.max(1,e-t),l=this.getAttribute("orientation")==="vertical"?"vertical":"horizontal";return`<div class="marks" part="marks">${r.map(s=>{const o=(s.value-t)/i*100,d=l==="vertical"?`style="bottom:${o}%"`:`style="left:${o}%"`,c=s.label!=null?b(s.label):String(s.value);return`
+`;function a(n,t){if(n==null||n.trim()==="")return t;const e=Number(n);return Number.isFinite(e)?e:t}function c(n,t,e){return Math.max(t,Math.min(e,n))}function m(n){return n.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function g(n,t,e){if(!n)return[];try{const r=JSON.parse(n);return Array.isArray(r)?r.map(i=>typeof i=="number"?{value:i}:i&&typeof i=="object"&&Number.isFinite(Number(i.value))?{value:Number(i.value),label:i.label!=null?String(i.label):void 0}:null).filter(i=>!!i).map(i=>({...i,value:c(i.value,t,e)})):[]}catch{return[]}}function p(n,t=!1){if(n==null)return t;const e=String(n).toLowerCase();return e!=="false"&&e!=="0"&&e!=="off"}function A(n,t,e,r,i,l,u){const s=Math.max(1,l-i),o=Math.round((t-i)/s*100),d=Math.round((e-i)/s*100),h=Math.round((r-i)/s*100);return n==="percent"?u?`${d}% – ${h}%`:`${o}%`:n==="range"?u?`${e} – ${r}`:`${t}`:`${t}`}const f=new Set(["value","value-start","value-end","min","max","step","disabled","headless","orientation","size","variant","tone","show-value","format","name","name-start","name-end"]),v=class v extends x.ElementBase{constructor(){super(),this._formControl=new k.FormControl(this,{getValue:()=>this._rangeMode?[String(this._valueStart),String(this._valueEnd)]:String(this.value),defaultAttribute:"value",observe:["value-start","value-end","range","min","max","step"]}),this._startInput=null,this._endInput=null,this._valueEl=null,this._trackWrap=null,this._rangeMode=!1,this._value=0,this._valueStart=0,this._valueEnd=0,this._onInput=this._onInput.bind(this),this._onChange=this._onChange.bind(this)}static get observedAttributes(){return["value","value-start","value-end","min","max","step","disabled","headless","range","orientation","size","variant","tone","show-value","format","label","description","marks","name","name-start","name-end"]}formResetCallback(){this._formControl.formResetCallback()}formDisabledCallback(t){this._formControl.formDisabledCallback(t)}get form(){return this._formControl.form}connectedCallback(){super.connectedCallback(),this._formControl.connect(),this.root.addEventListener("input",this._onInput,!0),this.root.addEventListener("change",this._onChange,!0)}disconnectedCallback(){this._formControl.disconnect(),this.root.removeEventListener("input",this._onInput,!0),this.root.removeEventListener("change",this._onChange,!0),super.disconnectedCallback()}attributeChangedCallback(t,e,r){if(e!==r){if(f.has(t)&&this._trackWrap){this._syncFromAttributes(),this._syncDom();return}this.isConnected&&this.requestRender()}}get value(){return this._rangeMode?this._valueEnd:this._value}set value(t){const e=Number(t);Number.isFinite(e)&&this.setAttribute("value",String(e))}get valueStart(){return this._valueStart}set valueStart(t){const e=Number(t);Number.isFinite(e)&&this.setAttribute("value-start",String(e))}get valueEnd(){return this._valueEnd}set valueEnd(t){const e=Number(t);Number.isFinite(e)&&this.setAttribute("value-end",String(e))}_syncFromAttributes(){const t=a(this.getAttribute("min"),0),e=Math.max(t,a(this.getAttribute("max"),100)),r=Math.max(1e-4,a(this.getAttribute("step"),1));this._rangeMode=this.hasAttribute("range");const i=a(this.getAttribute("value"),this._value||t),l=a(this.getAttribute("value-start"),this._valueStart||t),u=a(this.getAttribute("value-end"),this._valueEnd||i||t);if(!this._rangeMode){this._value=c(i,t,e),this._valueStart=t,this._valueEnd=this._value;return}const s=c(Math.min(l,u),t,e),o=c(Math.max(l,u),t,e);this._valueStart=Math.round(s/r)*r,this._valueEnd=Math.round(o/r)*r,this._value=this._valueEnd}_detail(){const t=a(this.getAttribute("min"),0),e=Math.max(t,a(this.getAttribute("max"),100)),r=Math.max(1e-4,a(this.getAttribute("step"),1)),i=Math.max(1,e-t),l=(this._value-t)/i*100,u=(this._valueStart-t)/i*100,s=(this._valueEnd-t)/i*100;return{value:this._rangeMode?this._valueEnd:this._value,valueStart:this._valueStart,valueEnd:this._valueEnd,range:this._rangeMode,min:t,max:e,step:r,percent:l,percentStart:u,percentEnd:s}}_emit(t){this.dispatchEvent(new CustomEvent(t,{detail:this._detail(),bubbles:!0,composed:!0}))}_syncDom(){const t=a(this.getAttribute("min"),0),e=Math.max(t,a(this.getAttribute("max"),100)),r=Math.max(1e-4,a(this.getAttribute("step"),1)),i=p(this.getAttribute("disabled"))||this.hasAttribute("disabled"),l=this.getAttribute("format")||(this._rangeMode?"range":"percent"),u=p(this.getAttribute("show-value"),!0),s=Math.max(1,e-t),o=(this._valueStart-t)/s*100,d=(this._valueEnd-t)/s*100;this._startInput&&(this._startInput.min=String(t),this._startInput.max=String(e),this._startInput.step=String(r),this._startInput.value=String(this._rangeMode?this._valueStart:this._value),this._startInput.disabled=i,this._startInput.name=this._rangeMode?this.getAttribute("name-start")||this.getAttribute("name")||"":this.getAttribute("name")||"",this._startInput.setAttribute("aria-valuemin",String(t)),this._startInput.setAttribute("aria-valuemax",String(e)),this._startInput.setAttribute("aria-valuenow",String(this._rangeMode?this._valueStart:this._value))),this._endInput&&(this._endInput.min=String(t),this._endInput.max=String(e),this._endInput.step=String(r),this._endInput.value=String(this._valueEnd),this._endInput.disabled=i,this._endInput.name=this.getAttribute("name-end")||this.getAttribute("name")||"",this._endInput.setAttribute("aria-valuemin",String(t)),this._endInput.setAttribute("aria-valuemax",String(e)),this._endInput.setAttribute("aria-valuenow",String(this._valueEnd))),this._trackWrap&&(this._trackWrap.style.setProperty("--ui-slider-start",`${this._rangeMode?o:0}%`),this._trackWrap.style.setProperty("--ui-slider-end",`${d}%`)),this._valueEl&&(this._valueEl.textContent=A(l,this._value,this._valueStart,this._valueEnd,t,e,this._rangeMode),u?this._valueEl.removeAttribute("hidden"):this._valueEl.setAttribute("hidden","")),this.setAttribute("aria-valuemin",String(t)),this.setAttribute("aria-valuemax",String(e)),this.setAttribute("aria-valuenow",String(this.value)),this.setAttribute("aria-orientation",this.getAttribute("orientation")==="vertical"?"vertical":"horizontal"),this.setAttribute("aria-disabled",i?"true":"false")}_updateFromInput(t){const e=a(this.getAttribute("min"),0),r=Math.max(e,a(this.getAttribute("max"),100)),i=Math.max(1e-4,a(this.getAttribute("step"),1));if(!this._rangeMode){this._value=c(a(t.value,this._value),e,r),this._valueStart=e,this._valueEnd=this._value,this.setAttribute("value",String(this._value));return}const l=c(a(t.value,t.classList.contains("start")?this._valueStart:this._valueEnd),e,r);t.classList.contains("start")?this._valueStart=Math.min(l,this._valueEnd):this._valueEnd=Math.max(l,this._valueStart),this._valueStart=Math.round(this._valueStart/i)*i,this._valueEnd=Math.round(this._valueEnd/i)*i,this._value=this._valueEnd,this.setAttribute("value-start",String(this._valueStart)),this.setAttribute("value-end",String(this._valueEnd)),this.setAttribute("value",String(this._valueEnd))}_onInput(t){if(p(this.getAttribute("disabled"))||this.hasAttribute("disabled"))return;const e=t.target;!e||e.type!=="range"||(this._updateFromInput(e),this._syncDom(),this._emit("input"),this._emit("valuechange"))}_onChange(t){if(p(this.getAttribute("disabled"))||this.hasAttribute("disabled"))return;const e=t.target;!e||e.type!=="range"||(this._updateFromInput(e),this._syncDom(),this._emit("change"))}_renderMarks(t,e){const r=g(this.getAttribute("marks"),t,e);if(!r.length)return'<div class="marks" part="marks" hidden></div>';const i=Math.max(1,e-t),l=this.getAttribute("orientation")==="vertical"?"vertical":"horizontal";return`<div class="marks" part="marks">${r.map(s=>{const o=(s.value-t)/i*100,d=l==="vertical"?`style="bottom:${o}%"`:`style="left:${o}%"`,h=s.label!=null?m(s.label):String(s.value);return`
           <span class="mark" ${d}>
-            <span class="mark-label">${c}</span>
+            <span class="mark-label">${h}</span>
           </span>
-        `}).join("")}</div>`}render(){this._syncFromAttributes();const t=a(this.getAttribute("min"),0),e=Math.max(t,a(this.getAttribute("max"),100)),r=this.getAttribute("label")||"",i=this.getAttribute("description")||"",l=!!r||!!i,u=this._renderMarks(t,e),s=v(this.getAttribute("marks"),t,e).length>0,o=b(r),d=b(i),c=o?`${o} start`:"Slider value",f=o?`${o} end`:"Slider end value";this.setContent(`
-      <style>${x}</style>
+        `}).join("")}</div>`}render(){this._syncFromAttributes();const t=a(this.getAttribute("min"),0),e=Math.max(t,a(this.getAttribute("max"),100)),r=this.getAttribute("label")||"",i=this.getAttribute("description")||"",l=!!r||!!i,u=this._renderMarks(t,e),s=g(this.getAttribute("marks"),t,e).length>0,o=m(r),d=m(i),h=o?`${o} start`:"Slider value",_=o?`${o} end`:"Slider end value";this.setContent(`
+      <style>${z}</style>
       <div class="shell" part="shell" role="group" data-has-marks="${s}">
         <div class="meta" part="meta" ${l?"":"hidden"}>
           <span class="label" part="label" ${r?"":"hidden"}>${o}</span>
@@ -479,11 +479,11 @@
             <span class="track-indicator start" part="indicator-start" ${this._rangeMode?"":"hidden"}></span>
             <span class="track-indicator end" part="indicator-end"></span>
             <div class="inputs" part="inputs">
-              <input class="start" type="range" aria-label="${c}" />
-              ${this._rangeMode?`<input class="end" type="range" aria-label="${f}" />`:""}
+              <input class="start" type="range" aria-label="${h}" />
+              ${this._rangeMode?`<input class="end" type="range" aria-label="${_}" />`:""}
             </div>
             ${u}
           </div>
         </div>
       </div>
-    `),this._startInput=this.root.querySelector("input.start"),this._endInput=this.root.querySelector("input.end"),this._valueEl=this.root.querySelector(".value"),this._trackWrap=this.root.querySelector(".track-wrap"),this._syncDom()}shouldRenderOnAttributeChange(t,e,r){return!m.has(t)}}typeof customElements<"u"&&!customElements.get("ui-slider")&&customElements.define("ui-slider",g);exports.UISlider=g;
+    `),this._startInput=this.root.querySelector("input.start"),this._endInput=this.root.querySelector("input.end"),this._valueEl=this.root.querySelector(".value"),this._trackWrap=this.root.querySelector(".track-wrap"),this._syncDom()}shouldRenderOnAttributeChange(t,e,r){return!f.has(t)}};v.formAssociated=!0;let b=v;typeof customElements<"u"&&!customElements.get("ui-slider")&&customElements.define("ui-slider",b);exports.UISlider=b;

package/dist/slider.esm.js

@@ -1,5 +1,6 @@
-import { E as f } from "./ElementBase-BeZT54Hj.mjs";
-const _ = `
+import { E as x } from "./ElementBase-D5QsC5Vw.mjs";
+import { F as k } from "./form-control-D9wWUMBl.mjs";
+const z = `
   :host {
     --ui-slider-width: min(340px, 100%);
     --ui-slider-track-size: 4px;
@@ -283,10 +284,10 @@ const _ = `
     --ui-slider-text: #e2e8f0;
     --ui-slider-muted: #93a4bd;
     --ui-slider-track: #334155;
-    --ui-slider-fill: #93c5fd;
-    --ui-slider-focus: #93c5fd;
+    --ui-slider-fill: var(--ui-color-accent-on-dark, #93c5fd);
+    --ui-slider-focus: var(--ui-color-accent-on-dark, #93c5fd);
     --ui-slider-thumb-shadow:
-      0 0 0 1px color-mix(in srgb, #93c5fd 36%, transparent),
+      0 0 0 1px color-mix(in srgb, var(--ui-color-accent-on-dark, #93c5fd) 36%, transparent),
       0 4px 14px rgba(2, 6, 23, 0.42);
     --ui-slider-shadow:
       0 14px 34px rgba(2, 6, 23, 0.46),
@@ -463,6 +464,7 @@ const _ = `
   }
 `;
 function a(n, t) {
+  if (n == null || n.trim() === "") return t;
   const e = Number(n);
   return Number.isFinite(e) ? e : t;
 }
@@ -472,7 +474,7 @@ function h(n, t, e) {
 function b(n) {
   return n.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function v(n, t, e) {
+function g(n, t, e) {
   if (!n) return [];
   try {
     const r = JSON.parse(n);
@@ -489,11 +491,11 @@ function p(n, t = !1) {
   const e = String(n).toLowerCase();
   return e !== "false" && e !== "0" && e !== "off";
 }
-function x(n, t, e, r, i, l, u) {
+function A(n, t, e, r, i, l, u) {
   const s = Math.max(1, l - i), o = Math.round((t - i) / s * 100), d = Math.round((e - i) / s * 100), c = Math.round((r - i) / s * 100);
   return n === "percent" ? u ? `${d}% – ${c}%` : `${o}%` : n === "range" ? u ? `${e} – ${r}` : `${t}` : `${t}`;
 }
-const m = /* @__PURE__ */ new Set([
+const f = /* @__PURE__ */ new Set([
   "value",
   "value-start",
   "value-end",
@@ -511,10 +513,13 @@ const m = /* @__PURE__ */ new Set([
   "name",
   "name-start",
   "name-end"
-]);
-class k extends f {
+]), v = class v extends x {
   constructor() {
-    super(), this._startInput = null, this._endInput = null, this._valueEl = null, this._trackWrap = null, this._rangeMode = !1, this._value = 0, this._valueStart = 0, this._valueEnd = 0, this._onInput = this._onInput.bind(this), this._onChange = this._onChange.bind(this);
+    super(), this._formControl = new k(this, {
+      getValue: () => this._rangeMode ? [String(this._valueStart), String(this._valueEnd)] : String(this.value),
+      defaultAttribute: "value",
+      observe: ["value-start", "value-end", "range", "min", "max", "step"]
+    }), this._startInput = null, this._endInput = null, this._valueEl = null, this._trackWrap = null, this._rangeMode = !1, this._value = 0, this._valueStart = 0, this._valueEnd = 0, this._onInput = this._onInput.bind(this), this._onChange = this._onChange.bind(this);
   }
   static get observedAttributes() {
     return [
@@ -541,15 +546,25 @@ class k extends f {
       "name-end"
     ];
   }
+  formResetCallback() {
+    this._formControl.formResetCallback();
+  }
+  formDisabledCallback(t) {
+    this._formControl.formDisabledCallback(t);
+  }
+  /** The `<form>` this field belongs to, if any. */
+  get form() {
+    return this._formControl.form;
+  }
   connectedCallback() {
-    super.connectedCallback(), this.root.addEventListener("input", this._onInput, !0), this.root.addEventListener("change", this._onChange, !0);
+    super.connectedCallback(), this._formControl.connect(), this.root.addEventListener("input", this._onInput, !0), this.root.addEventListener("change", this._onChange, !0);
   }
   disconnectedCallback() {
-    this.root.removeEventListener("input", this._onInput, !0), this.root.removeEventListener("change", this._onChange, !0), super.disconnectedCallback();
+    this._formControl.disconnect(), this.root.removeEventListener("input", this._onInput, !0), this.root.removeEventListener("change", this._onChange, !0), super.disconnectedCallback();
   }
   attributeChangedCallback(t, e, r) {
     if (e !== r) {
-      if (m.has(t) && this._trackWrap) {
+      if (f.has(t) && this._trackWrap) {
         this._syncFromAttributes(), this._syncDom();
         return;
       }
@@ -614,7 +629,7 @@ class k extends f {
   }
   _syncDom() {
     const t = a(this.getAttribute("min"), 0), e = Math.max(t, a(this.getAttribute("max"), 100)), r = Math.max(1e-4, a(this.getAttribute("step"), 1)), i = p(this.getAttribute("disabled")) || this.hasAttribute("disabled"), l = this.getAttribute("format") || (this._rangeMode ? "range" : "percent"), u = p(this.getAttribute("show-value"), !0), s = Math.max(1, e - t), o = (this._valueStart - t) / s * 100, d = (this._valueEnd - t) / s * 100;
-    this._startInput && (this._startInput.min = String(t), this._startInput.max = String(e), this._startInput.step = String(r), this._startInput.value = String(this._rangeMode ? this._valueStart : this._value), this._startInput.disabled = i, this._startInput.name = this._rangeMode ? this.getAttribute("name-start") || this.getAttribute("name") || "" : this.getAttribute("name") || "", this._startInput.setAttribute("aria-valuemin", String(t)), this._startInput.setAttribute("aria-valuemax", String(e)), this._startInput.setAttribute("aria-valuenow", String(this._rangeMode ? this._valueStart : this._value))), this._endInput && (this._endInput.min = String(t), this._endInput.max = String(e), this._endInput.step = String(r), this._endInput.value = String(this._valueEnd), this._endInput.disabled = i, this._endInput.name = this.getAttribute("name-end") || this.getAttribute("name") || "", this._endInput.setAttribute("aria-valuemin", String(t)), this._endInput.setAttribute("aria-valuemax", String(e)), this._endInput.setAttribute("aria-valuenow", String(this._valueEnd))), this._trackWrap && (this._trackWrap.style.setProperty("--ui-slider-start", `${this._rangeMode ? o : 0}%`), this._trackWrap.style.setProperty("--ui-slider-end", `${d}%`)), this._valueEl && (this._valueEl.textContent = x(l, this._value, this._valueStart, this._valueEnd, t, e, this._rangeMode), u ? this._valueEl.removeAttribute("hidden") : this._valueEl.setAttribute("hidden", "")), this.setAttribute("aria-valuemin", String(t)), this.setAttribute("aria-valuemax", String(e)), this.setAttribute("aria-valuenow", String(this.value)), this.setAttribute("aria-orientation", this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal"), this.setAttribute("aria-disabled", i ? "true" : "false");
+    this._startInput && (this._startInput.min = String(t), this._startInput.max = String(e), this._startInput.step = String(r), this._startInput.value = String(this._rangeMode ? this._valueStart : this._value), this._startInput.disabled = i, this._startInput.name = this._rangeMode ? this.getAttribute("name-start") || this.getAttribute("name") || "" : this.getAttribute("name") || "", this._startInput.setAttribute("aria-valuemin", String(t)), this._startInput.setAttribute("aria-valuemax", String(e)), this._startInput.setAttribute("aria-valuenow", String(this._rangeMode ? this._valueStart : this._value))), this._endInput && (this._endInput.min = String(t), this._endInput.max = String(e), this._endInput.step = String(r), this._endInput.value = String(this._valueEnd), this._endInput.disabled = i, this._endInput.name = this.getAttribute("name-end") || this.getAttribute("name") || "", this._endInput.setAttribute("aria-valuemin", String(t)), this._endInput.setAttribute("aria-valuemax", String(e)), this._endInput.setAttribute("aria-valuenow", String(this._valueEnd))), this._trackWrap && (this._trackWrap.style.setProperty("--ui-slider-start", `${this._rangeMode ? o : 0}%`), this._trackWrap.style.setProperty("--ui-slider-end", `${d}%`)), this._valueEl && (this._valueEl.textContent = A(l, this._value, this._valueStart, this._valueEnd, t, e, this._rangeMode), u ? this._valueEl.removeAttribute("hidden") : this._valueEl.setAttribute("hidden", "")), this.setAttribute("aria-valuemin", String(t)), this.setAttribute("aria-valuemax", String(e)), this.setAttribute("aria-valuenow", String(this.value)), this.setAttribute("aria-orientation", this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal"), this.setAttribute("aria-disabled", i ? "true" : "false");
   }
   _updateFromInput(t) {
     const e = a(this.getAttribute("min"), 0), r = Math.max(e, a(this.getAttribute("max"), 100)), i = Math.max(1e-4, a(this.getAttribute("step"), 1));
@@ -636,7 +651,7 @@ class k extends f {
     !e || e.type !== "range" || (this._updateFromInput(e), this._syncDom(), this._emit("change"));
   }
   _renderMarks(t, e) {
-    const r = v(this.getAttribute("marks"), t, e);
+    const r = g(this.getAttribute("marks"), t, e);
     if (!r.length) return '<div class="marks" part="marks" hidden></div>';
     const i = Math.max(1, e - t), l = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal";
     return `<div class="marks" part="marks">${r.map((s) => {
@@ -650,9 +665,9 @@ class k extends f {
   }
   render() {
     this._syncFromAttributes();
-    const t = a(this.getAttribute("min"), 0), e = Math.max(t, a(this.getAttribute("max"), 100)), r = this.getAttribute("label") || "", i = this.getAttribute("description") || "", l = !!r || !!i, u = this._renderMarks(t, e), s = v(this.getAttribute("marks"), t, e).length > 0, o = b(r), d = b(i), c = o ? `${o} start` : "Slider value", g = o ? `${o} end` : "Slider end value";
+    const t = a(this.getAttribute("min"), 0), e = Math.max(t, a(this.getAttribute("max"), 100)), r = this.getAttribute("label") || "", i = this.getAttribute("description") || "", l = !!r || !!i, u = this._renderMarks(t, e), s = g(this.getAttribute("marks"), t, e).length > 0, o = b(r), d = b(i), c = o ? `${o} start` : "Slider value", _ = o ? `${o} end` : "Slider end value";
     this.setContent(`
-      <style>${_}</style>
+      <style>${z}</style>
       <div class="shell" part="shell" role="group" data-has-marks="${s}">
         <div class="meta" part="meta" ${l ? "" : "hidden"}>
           <span class="label" part="label" ${r ? "" : "hidden"}>${o}</span>
@@ -667,7 +682,7 @@ class k extends f {
             <span class="track-indicator end" part="indicator-end"></span>
             <div class="inputs" part="inputs">
               <input class="start" type="range" aria-label="${c}" />
-              ${this._rangeMode ? `<input class="end" type="range" aria-label="${g}" />` : ""}
+              ${this._rangeMode ? `<input class="end" type="range" aria-label="${_}" />` : ""}
             </div>
             ${u}
           </div>
@@ -676,10 +691,12 @@ class k extends f {
     `), this._startInput = this.root.querySelector("input.start"), this._endInput = this.root.querySelector("input.end"), this._valueEl = this.root.querySelector(".value"), this._trackWrap = this.root.querySelector(".track-wrap"), this._syncDom();
   }
   shouldRenderOnAttributeChange(t, e, r) {
-    return !m.has(t);
+    return !f.has(t);
   }
-}
-typeof customElements < "u" && !customElements.get("ui-slider") && customElements.define("ui-slider", k);
+};
+v.formAssociated = !0;
+let m = v;
+typeof customElements < "u" && !customElements.get("ui-slider") && customElements.define("ui-slider", m);
 export {
-  k as UISlider
+  m as UISlider
 };

package/dist/slot.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("./ElementBase-DxbvhLJs.js"),u=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("./ElementBase-CbUsP3D6.js"),u=`
   :host {
     --ui-slot-bg: transparent;
     --ui-slot-text: inherit;

package/dist/slot.esm.js

@@ -1,4 +1,4 @@
-import { E as n } from "./ElementBase-BeZT54Hj.mjs";
+import { E as n } from "./ElementBase-D5QsC5Vw.mjs";
 const r = `
   :host {
     --ui-slot-bg: transparent;

package/dist/slotted-input-BVq2QQg2.js

@@ -0,0 +1 @@
+"use strict";const r="data-ui-auto-name";function i(t){for(const e of Array.from(t.children))if(e instanceof HTMLInputElement&&e.getAttribute("slot")==="input")return e;return null}function l(t,e,a){t.hasAttribute("aria-label")&&!t.hasAttribute(r)||t.hasAttribute("aria-labelledby")||(t.labels?.length??0)>0||(e?(t.setAttribute("aria-label",e),t.setAttribute(r,"")):t.hasAttribute(r)&&(t.removeAttribute("aria-label"),t.removeAttribute(r))),a?t.setAttribute("aria-description",a):t.removeAttribute("aria-description")}exports.findSlottedInput=i;exports.nameSlottedInput=l;

package/dist/slotted-input-atWznLfm.mjs

@@ -0,0 +1,13 @@
+const a = "data-ui-auto-name";
+function l(t) {
+  for (const e of Array.from(t.children))
+    if (e instanceof HTMLInputElement && e.getAttribute("slot") === "input") return e;
+  return null;
+}
+function o(t, e, r) {
+  t.hasAttribute("aria-label") && !t.hasAttribute(a) || t.hasAttribute("aria-labelledby") || (t.labels?.length ?? 0) > 0 || (e ? (t.setAttribute("aria-label", e), t.setAttribute(a, "")) : t.hasAttribute(a) && (t.removeAttribute("aria-label"), t.removeAttribute(a))), r ? t.setAttribute("aria-description", r) : t.removeAttribute("aria-description");
+}
+export {
+  l as f,
+  o as n
+};