@editora/ui-core 0.1.25 → 0.2.0

package/dist/selection-popup.cjs.js

@@ -2,17 +2,16 @@
   :host {
     --ui-selection-popup-z: 1280;
     --ui-selection-popup-offset: 10px;
-    --ui-selection-popup-radius: 12px;
+    --ui-selection-popup-radius: calc(var(--ui-radius, 6px) + 2px);
     --ui-selection-popup-padding: 8px;
-    --ui-selection-popup-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 96%, transparent);
+    --ui-selection-popup-bg: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
     --ui-selection-popup-color: var(--ui-color-text, #0f172a);
     --ui-selection-popup-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
     --ui-selection-popup-border: 1px solid var(--ui-selection-popup-border-color);
     --ui-selection-popup-focus: var(--ui-color-focus-ring, #2563eb);
     --ui-selection-popup-accent: var(--ui-color-primary, #2563eb);
     --ui-selection-popup-enter-y: 6px;
-    --ui-selection-popup-shadow:
-      none;
+    --ui-selection-popup-shadow: var(--shadow-5, 0 8px 24px rgba(15, 23, 42, 0.12));
     color-scheme: light dark;
     position: fixed;
     inset: 0;

package/dist/selection-popup.esm.js

@@ -3,17 +3,16 @@ const E = `
   :host {
     --ui-selection-popup-z: 1280;
     --ui-selection-popup-offset: 10px;
-    --ui-selection-popup-radius: 12px;
+    --ui-selection-popup-radius: calc(var(--ui-radius, 6px) + 2px);
     --ui-selection-popup-padding: 8px;
-    --ui-selection-popup-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 96%, transparent);
+    --ui-selection-popup-bg: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
     --ui-selection-popup-color: var(--ui-color-text, #0f172a);
     --ui-selection-popup-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
     --ui-selection-popup-border: 1px solid var(--ui-selection-popup-border-color);
     --ui-selection-popup-focus: var(--ui-color-focus-ring, #2563eb);
     --ui-selection-popup-accent: var(--ui-color-primary, #2563eb);
     --ui-selection-popup-enter-y: 6px;
-    --ui-selection-popup-shadow:
-      none;
+    --ui-selection-popup-shadow: var(--shadow-5, 0 8px 24px rgba(15, 23, 42, 0.12));
     color-scheme: light dark;
     position: fixed;
     inset: 0;

package/dist/semantic-tokens.d.ts

@@ -0,0 +1,17 @@
+import type { ThemeTokens } from './theme';
+/**
+ * Semantic layer of the design tokens.
+ *
+ * Components should read roles ("the hover fill", "the focus ring", "control height 2"),
+ * not pick a step off a colour scale themselves. Every value here is derived from the
+ * 12-step scales of the active theme, so it follows the accent palette, the gray scale
+ * and light/dark mode without a component knowing about any of them.
+ *
+ * Step meaning follows the Radix Colors convention:
+ *   1-2 app/subtle background, 3-5 component fill (rest/hover/active),
+ *   6-8 borders (subtle/default/strong), 9-10 solid fill (rest/hover),
+ *   11-12 text (secondary/strong).
+ */
+export type SemanticTokenMap = Record<string, string>;
+export declare function deriveSemanticTokens(tokens: ThemeTokens): SemanticTokenMap;
+//# sourceMappingURL=semantic-tokens.d.ts.map

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

@@ -0,0 +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"}

package/dist/sidebar.cjs.js

@@ -4,19 +4,19 @@
       --ui-sidebar-bg: var(--base-sidebar-bg, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
       --ui-sidebar-color: var(--ui-color-text, var(--ui-text, #202020));
       --ui-sidebar-muted: color-mix(in srgb, var(--ui-sidebar-color) 72%, transparent);
-      --ui-sidebar-border: var(--base-sidebar-border, 1px solid color-mix(in srgb, var(--gray-a5, rgba(15, 23, 42, 0.16)) 82%, transparent));
-      --ui-sidebar-radius: var(--base-sidebar-radius, var(--ui-radius, 4px));
-      --ui-sidebar-shadow: var(--base-sidebar-shadow, var(--shadow-5, none));
+      --ui-sidebar-border: var(--base-sidebar-border, 1px solid var(--ui-color-line-subtle, color-mix(in srgb, var(--gray-a5, rgba(15, 23, 42, 0.16)) 82%, transparent)));
+      --ui-sidebar-radius: var(--base-sidebar-radius, calc(var(--ui-radius, 6px) + 2px));
+      --ui-sidebar-shadow: var(--base-sidebar-shadow, none);
       --ui-sidebar-padding: var(--base-sidebar-padding, 12px);
       --ui-sidebar-gap: var(--base-sidebar-gap, 14px);
       --ui-sidebar-header-padding: var(--base-sidebar-header-padding, 4px 4px 10px);
-      --ui-sidebar-item-radius: var(--base-sidebar-item-radius, 4px);
-      --ui-sidebar-item-height: var(--base-sidebar-item-height, 45px);
-      --ui-sidebar-item-padding-x: var(--base-sidebar-item-padding-x, 6px);
-      --ui-sidebar-item-padding-y: var(--base-sidebar-item-padding-y, 3px);
+      --ui-sidebar-item-radius: var(--base-sidebar-item-radius, var(--ui-control-radius-2, var(--ui-radius, 6px)));
+      --ui-sidebar-item-height: var(--base-sidebar-item-height, var(--ui-control-height-2, 32px));
+      --ui-sidebar-item-padding-x: var(--base-sidebar-item-padding-x, 8px);
+      --ui-sidebar-item-padding-y: var(--base-sidebar-item-padding-y, 4px);
       --ui-sidebar-item-gap: var(--base-sidebar-item-gap, 8px);
-      --ui-sidebar-item-font-size: var(--base-sidebar-item-font-size, 12px);
-      --ui-sidebar-item-line-height: var(--base-sidebar-item-line-height, 22px);
+      --ui-sidebar-item-font-size: var(--base-sidebar-item-font-size, var(--ui-control-font-size-2, 14px));
+      --ui-sidebar-item-line-height: var(--base-sidebar-item-line-height, 20px);
       --ui-sidebar-section-gap: var(--base-sidebar-section-gap, 12px);
       --ui-sidebar-section-label-size: var(--base-sidebar-section-label-size, 12px);
       --ui-sidebar-section-label-spacing: var(--base-sidebar-section-label-spacing, 0.06em);
@@ -27,10 +27,10 @@
       --ui-sidebar-promo-padding: var(--base-sidebar-promo-padding, 20px);
       --ui-sidebar-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
       --ui-sidebar-accent-contrast: var(--ui-color-foreground-on-primary, var(--ui-foreground, #ffffff));
-      --ui-sidebar-item-hover: color-mix(in srgb, var(--ui-sidebar-accent) 10%, transparent);
-      --ui-sidebar-item-active-bg: color-mix(in srgb, var(--ui-sidebar-accent) 14%, var(--ui-sidebar-bg));
+      --ui-sidebar-item-hover: var(--ui-color-fill, color-mix(in srgb, var(--ui-sidebar-accent) 10%, transparent));
+      --ui-sidebar-item-active-bg: var(--ui-color-accent-fill, color-mix(in srgb, var(--ui-sidebar-accent) 14%, var(--ui-sidebar-bg)));
       --ui-sidebar-item-active-color: var(--ui-sidebar-color);
-      --ui-sidebar-item-border: color-mix(in srgb, var(--ui-sidebar-accent) 18%, transparent);
+      --ui-sidebar-item-border: transparent;
       --ui-sidebar-control-bg: color-mix(in srgb, var(--ui-sidebar-bg) 88%, transparent);
       --ui-sidebar-control-hover: color-mix(in srgb, var(--ui-sidebar-accent) 10%, var(--ui-sidebar-bg));
       --ui-sidebar-promo-bg: linear-gradient(140deg, color-mix(in srgb, var(--ui-sidebar-accent) 92%, #0f172a 8%), color-mix(in srgb, var(--ui-sidebar-accent) 36%, #ffffff 64%));
@@ -311,7 +311,7 @@
       font-size: var(--ui-sidebar-section-label-size);
       letter-spacing: var(--ui-sidebar-section-label-spacing);
       line-height: 1.4;
-      font-weight: 700;
+      font-weight: 600;
       text-transform: var(--ui-sidebar-section-label-transform);
       color: var(--ui-sidebar-section-label-color);
     }
@@ -346,7 +346,7 @@
       font-family: var(--ui-font-family, Inter, system-ui, sans-serif);
       font-size: var(--ui-sidebar-item-font-size);
       line-height: var(--ui-sidebar-item-line-height);
-      font-weight: 700;
+      font-weight: 600;
       letter-spacing: var(--ui-default-letter-spacing, 0em);
       transition:
         background-color 140ms ease,
@@ -362,7 +362,7 @@
 
     .item-button:focus-visible {
       outline: none;
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-sidebar-focus-ring) 22%, transparent);
+      box-shadow: 0 0 0 2px var(--ui-ring-color, var(--ui-sidebar-focus-ring));
     }
 
     .item-button[aria-current="page"],
@@ -445,7 +445,7 @@
       font-family: var(--ui-font-family, Inter, system-ui, sans-serif);
       font-size: var(--ui-sidebar-item-font-size);
       line-height: var(--ui-sidebar-item-line-height);
-      font-weight: 700;
+      font-weight: 600;
       letter-spacing: var(--ui-default-letter-spacing, 0em);
       color: inherit;
     }
@@ -469,7 +469,7 @@
       font-family: var(--ui-font-family, Inter, system-ui, sans-serif);
       font-size: var(--ui-sidebar-item-font-size);
       line-height: var(--ui-sidebar-item-line-height);
-      font-weight: 700;
+      font-weight: 600;
       letter-spacing: var(--ui-default-letter-spacing, 0em);
       color: inherit;
     }
@@ -489,7 +489,7 @@
       min-inline-size: max-content;
       color: color-mix(in srgb, currentColor 66%, transparent);
       font-size: calc(var(--ui-sidebar-item-font-size) - 1px);
-      font-weight: 700;
+      font-weight: 600;
       line-height: var(--ui-sidebar-item-line-height);
     }
 
@@ -741,9 +741,9 @@
             </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",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">
+      `}_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>
-            ${c}
+            ${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"':""}>
         <${x}
@@ -761,9 +761,9 @@
           ${I}
         >
           ${C}
-          ${u}
+          ${c}
           ${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),c=t.section?.trim()||r||"",u=`${v(c||"nav")}-${v(a)}-${i}-${s}`,p=this._normalizeItems(t.children||[],i+1,c);return{...t,id:u,label:n,value:a,section:c,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),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");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=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",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",a),window.addEventListener("pointerup",c),this._resizeCleanup=()=>{window.removeEventListener("pointermove",a),window.removeEventListener("pointerup",c)}}}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?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;

package/dist/sidebar.esm.js

@@ -34,19 +34,19 @@ const y = {
       --ui-sidebar-bg: var(--base-sidebar-bg, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
       --ui-sidebar-color: var(--ui-color-text, var(--ui-text, #202020));
       --ui-sidebar-muted: color-mix(in srgb, var(--ui-sidebar-color) 72%, transparent);
-      --ui-sidebar-border: var(--base-sidebar-border, 1px solid color-mix(in srgb, var(--gray-a5, rgba(15, 23, 42, 0.16)) 82%, transparent));
-      --ui-sidebar-radius: var(--base-sidebar-radius, var(--ui-radius, 4px));
-      --ui-sidebar-shadow: var(--base-sidebar-shadow, var(--shadow-5, none));
+      --ui-sidebar-border: var(--base-sidebar-border, 1px solid var(--ui-color-line-subtle, color-mix(in srgb, var(--gray-a5, rgba(15, 23, 42, 0.16)) 82%, transparent)));
+      --ui-sidebar-radius: var(--base-sidebar-radius, calc(var(--ui-radius, 6px) + 2px));
+      --ui-sidebar-shadow: var(--base-sidebar-shadow, none);
       --ui-sidebar-padding: var(--base-sidebar-padding, 12px);
       --ui-sidebar-gap: var(--base-sidebar-gap, 14px);
       --ui-sidebar-header-padding: var(--base-sidebar-header-padding, 4px 4px 10px);
-      --ui-sidebar-item-radius: var(--base-sidebar-item-radius, 4px);
-      --ui-sidebar-item-height: var(--base-sidebar-item-height, 45px);
-      --ui-sidebar-item-padding-x: var(--base-sidebar-item-padding-x, 6px);
-      --ui-sidebar-item-padding-y: var(--base-sidebar-item-padding-y, 3px);
+      --ui-sidebar-item-radius: var(--base-sidebar-item-radius, var(--ui-control-radius-2, var(--ui-radius, 6px)));
+      --ui-sidebar-item-height: var(--base-sidebar-item-height, var(--ui-control-height-2, 32px));
+      --ui-sidebar-item-padding-x: var(--base-sidebar-item-padding-x, 8px);
+      --ui-sidebar-item-padding-y: var(--base-sidebar-item-padding-y, 4px);
       --ui-sidebar-item-gap: var(--base-sidebar-item-gap, 8px);
-      --ui-sidebar-item-font-size: var(--base-sidebar-item-font-size, 12px);
-      --ui-sidebar-item-line-height: var(--base-sidebar-item-line-height, 22px);
+      --ui-sidebar-item-font-size: var(--base-sidebar-item-font-size, var(--ui-control-font-size-2, 14px));
+      --ui-sidebar-item-line-height: var(--base-sidebar-item-line-height, 20px);
       --ui-sidebar-section-gap: var(--base-sidebar-section-gap, 12px);
       --ui-sidebar-section-label-size: var(--base-sidebar-section-label-size, 12px);
       --ui-sidebar-section-label-spacing: var(--base-sidebar-section-label-spacing, 0.06em);
@@ -57,10 +57,10 @@ const y = {
       --ui-sidebar-promo-padding: var(--base-sidebar-promo-padding, 20px);
       --ui-sidebar-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
       --ui-sidebar-accent-contrast: var(--ui-color-foreground-on-primary, var(--ui-foreground, #ffffff));
-      --ui-sidebar-item-hover: color-mix(in srgb, var(--ui-sidebar-accent) 10%, transparent);
-      --ui-sidebar-item-active-bg: color-mix(in srgb, var(--ui-sidebar-accent) 14%, var(--ui-sidebar-bg));
+      --ui-sidebar-item-hover: var(--ui-color-fill, color-mix(in srgb, var(--ui-sidebar-accent) 10%, transparent));
+      --ui-sidebar-item-active-bg: var(--ui-color-accent-fill, color-mix(in srgb, var(--ui-sidebar-accent) 14%, var(--ui-sidebar-bg)));
       --ui-sidebar-item-active-color: var(--ui-sidebar-color);
-      --ui-sidebar-item-border: color-mix(in srgb, var(--ui-sidebar-accent) 18%, transparent);
+      --ui-sidebar-item-border: transparent;
       --ui-sidebar-control-bg: color-mix(in srgb, var(--ui-sidebar-bg) 88%, transparent);
       --ui-sidebar-control-hover: color-mix(in srgb, var(--ui-sidebar-accent) 10%, var(--ui-sidebar-bg));
       --ui-sidebar-promo-bg: linear-gradient(140deg, color-mix(in srgb, var(--ui-sidebar-accent) 92%, #0f172a 8%), color-mix(in srgb, var(--ui-sidebar-accent) 36%, #ffffff 64%));
@@ -341,7 +341,7 @@ const y = {
       font-size: var(--ui-sidebar-section-label-size);
       letter-spacing: var(--ui-sidebar-section-label-spacing);
       line-height: 1.4;
-      font-weight: 700;
+      font-weight: 600;
       text-transform: var(--ui-sidebar-section-label-transform);
       color: var(--ui-sidebar-section-label-color);
     }
@@ -376,7 +376,7 @@ const y = {
       font-family: var(--ui-font-family, Inter, system-ui, sans-serif);
       font-size: var(--ui-sidebar-item-font-size);
       line-height: var(--ui-sidebar-item-line-height);
-      font-weight: 700;
+      font-weight: 600;
       letter-spacing: var(--ui-default-letter-spacing, 0em);
       transition:
         background-color 140ms ease,
@@ -392,7 +392,7 @@ const y = {
 
     .item-button:focus-visible {
       outline: none;
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-sidebar-focus-ring) 22%, transparent);
+      box-shadow: 0 0 0 2px var(--ui-ring-color, var(--ui-sidebar-focus-ring));
     }
 
     .item-button[aria-current="page"],
@@ -475,7 +475,7 @@ const y = {
       font-family: var(--ui-font-family, Inter, system-ui, sans-serif);
       font-size: var(--ui-sidebar-item-font-size);
       line-height: var(--ui-sidebar-item-line-height);
-      font-weight: 700;
+      font-weight: 600;
       letter-spacing: var(--ui-default-letter-spacing, 0em);
       color: inherit;
     }
@@ -499,7 +499,7 @@ const y = {
       font-family: var(--ui-font-family, Inter, system-ui, sans-serif);
       font-size: var(--ui-sidebar-item-font-size);
       line-height: var(--ui-sidebar-item-line-height);
-      font-weight: 700;
+      font-weight: 600;
       letter-spacing: var(--ui-default-letter-spacing, 0em);
       color: inherit;
     }
@@ -519,7 +519,7 @@ const y = {
       min-inline-size: max-content;
       color: color-mix(in srgb, currentColor 66%, transparent);
       font-size: calc(var(--ui-sidebar-item-font-size) - 1px);
-      font-weight: 700;
+      font-weight: 600;
       line-height: var(--ui-sidebar-item-line-height);
     }
 
@@ -746,7 +746,7 @@ const y = {
 function d(o) {
   return o.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function v(o) {
+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;
@@ -764,7 +764,7 @@ function l(o, e) {
   const i = Number.parseFloat(String(o));
   return Number.isFinite(i) ? i : e;
 }
-function f(o) {
+function v(o) {
   return o.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "") || "item";
 }
 class V extends T {
@@ -825,7 +825,7 @@ class V extends T {
   attributeChangedCallback(e, i, r) {
     if (i !== r) {
       if (e === "radius" && this.isConnected) {
-        const t = v(r);
+        const t = f(r);
         if (t && t !== r) {
           this.setAttribute("radius", t);
           return;
@@ -903,7 +903,7 @@ class V extends 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">${r.map((s, n) => this._renderItem(s, `${f(i || "general")}-${n}`)).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">
@@ -1000,7 +1000,7 @@ class V extends T {
   }
   _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), c = t.section?.trim() || r || "", u = `${f(c || "nav")}-${f(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() || v(n), c = t.section?.trim() || r || "", u = `${v(c || "nav")}-${v(a)}-${i}-${s}`, p = this._normalizeItems(t.children || [], i + 1, c);
       return {
         ...t,
         id: u,
@@ -1096,11 +1096,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 = v(e) || e;
+    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 = 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"));
+    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) {

package/dist/skeleton.cjs.js

@@ -1,13 +1,13 @@
 "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=`
   :host {
     display: block;
-    --ui-skeleton-radius: 10px;
+    --ui-skeleton-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     --ui-skeleton-height: 16px;
     --ui-skeleton-width: 100%;
     --ui-skeleton-gap: 10px;
     --ui-skeleton-duration: 1.2s;
 
-    --ui-skeleton-base: color-mix(in srgb, var(--ui-color-muted, #526175) 20%, transparent);
+    --ui-skeleton-base: var(--ui-color-fill-active, color-mix(in srgb, var(--ui-color-muted, #526175) 20%, transparent));
     --ui-skeleton-glow: color-mix(in srgb, var(--ui-color-surface, #ffffff) 80%, transparent);
     --ui-skeleton-wave: color-mix(in srgb, var(--ui-color-surface, #ffffff) 68%, transparent);
     --ui-skeleton-bg: linear-gradient(

package/dist/skeleton.esm.js

@@ -6,13 +6,13 @@ function r(a) {
 const f = `
   :host {
     display: block;
-    --ui-skeleton-radius: 10px;
+    --ui-skeleton-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     --ui-skeleton-height: 16px;
     --ui-skeleton-width: 100%;
     --ui-skeleton-gap: 10px;
     --ui-skeleton-duration: 1.2s;
 
-    --ui-skeleton-base: color-mix(in srgb, var(--ui-color-muted, #526175) 20%, transparent);
+    --ui-skeleton-base: var(--ui-color-fill-active, color-mix(in srgb, var(--ui-color-muted, #526175) 20%, transparent));
     --ui-skeleton-glow: color-mix(in srgb, var(--ui-color-surface, #ffffff) 80%, transparent);
     --ui-skeleton-wave: color-mix(in srgb, var(--ui-color-surface, #ffffff) 68%, transparent);
     --ui-skeleton-bg: linear-gradient(

package/dist/slider.cjs.js

@@ -1,22 +1,21 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const x=require("./ElementBase-DxbvhLJs.js"),_=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const _=require("./ElementBase-DxbvhLJs.js"),x=`
   :host {
     --ui-slider-width: min(340px, 100%);
-    --ui-slider-track-size: 6px;
+    --ui-slider-track-size: 4px;
     --ui-slider-track-radius: 999px;
-    --ui-slider-thumb-size: 18px;
-    --ui-slider-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 96%, transparent);
+    --ui-slider-thumb-size: 16px;
+    --ui-slider-bg: transparent;
     --ui-slider-text: var(--ui-color-text, #0f172a);
     --ui-slider-muted: var(--ui-color-muted, #526175);
-    --ui-slider-track: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
+    --ui-slider-track: var(--ui-color-fill-active, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent));
     --ui-slider-fill: var(--ui-color-primary, #2563eb);
     --ui-slider-focus: var(--ui-color-focus-ring, #2563eb);
     --ui-slider-shadow:
       none;
-    --ui-slider-thumb-shadow:
-      none;
-    --ui-slider-thumb-ring: 0 0 0 4px color-mix(in srgb, var(--ui-slider-focus) 18%, transparent);
-    --ui-slider-padding: 10px;
-    --ui-slider-radius: 14px;
+    --ui-slider-thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.06);
+    --ui-slider-thumb-ring: 0 0 0 2px var(--ui-color-background, #ffffff), 0 0 0 4px var(--ui-ring-color, var(--ui-slider-focus));
+    --ui-slider-padding: 0px;
+    --ui-slider-radius: 0px;
     --ui-slider-label-size: 13px;
     --ui-slider-value-size: 12px;
     --ui-slider-indicator-size: 10px;
@@ -36,7 +35,7 @@
     gap: 8px;
     color: var(--ui-slider-text);
     background: var(--ui-slider-bg);
-    border: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 60%, transparent);
+    border: 0;
     border-radius: var(--ui-slider-radius);
     box-shadow: var(--ui-slider-shadow);
     padding: var(--ui-slider-padding);
@@ -104,15 +103,12 @@
     right: calc(100% - var(--ui-slider-end, 0%));
     block-size: var(--ui-slider-track-size);
     border-radius: var(--ui-slider-track-radius);
-    background: linear-gradient(
-      90deg,
-      color-mix(in srgb, var(--ui-slider-fill) 86%, #ffffff 14%),
-      var(--ui-slider-fill)
-    );
+    background: var(--ui-slider-fill);
     pointer-events: none;
   }
 
   .track-indicator {
+    display: none;
     position: absolute;
     top: 50%;
     left: var(--ui-slider-end, 0%);
@@ -176,8 +172,8 @@
     inline-size: var(--ui-slider-thumb-size);
     block-size: var(--ui-slider-thumb-size);
     border-radius: 50%;
-    border: 1px solid color-mix(in srgb, var(--ui-slider-fill) 42%, transparent);
-    background: color-mix(in srgb, var(--ui-slider-fill) 94%, #ffffff 6%);
+    border: 0;
+    background: #ffffff;
     box-shadow: var(--ui-slider-thumb-shadow);
     margin-top: calc((var(--ui-slider-track-size) - var(--ui-slider-thumb-size)) / 2);
     cursor: pointer;
@@ -188,8 +184,8 @@
     inline-size: var(--ui-slider-thumb-size);
     block-size: var(--ui-slider-thumb-size);
     border-radius: 50%;
-    border: 1px solid color-mix(in srgb, var(--ui-slider-fill) 42%, transparent);
-    background: color-mix(in srgb, var(--ui-slider-fill) 94%, #ffffff 6%);
+    border: 0;
+    background: #ffffff;
     box-shadow: var(--ui-slider-thumb-shadow);
     cursor: pointer;
     transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
@@ -464,12 +460,12 @@
       box-shadow: none;
     }
   }
-`;function a(n,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 b(n){return n.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function m(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 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),h=Math.round((r-i)/s*100);return n==="percent"?u?`${d}% – ${h}%`:`${o}%`:n==="range"?u?`${e} – ${r}`:`${t}`:`${t}`}const v=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 x.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(v.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=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=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=m(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?b(s.label):String(s.value);return`
+`;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`
           <span class="mark" ${d}>
-            <span class="mark-label">${h}</span>
+            <span class="mark-label">${c}</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=m(this.getAttribute("marks"),t,e).length>0,o=b(r),d=b(i),h=o?`${o} start`:"Slider value",f=o?`${o} end`:"Slider end value";this.setContent(`
-      <style>${_}</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=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>
       <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>
@@ -483,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="${h}" />
+              <input class="start" type="range" aria-label="${c}" />
               ${this._rangeMode?`<input class="end" type="range" aria-label="${f}" />`:""}
             </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!v.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!m.has(t)}}typeof customElements<"u"&&!customElements.get("ui-slider")&&customElements.define("ui-slider",g);exports.UISlider=g;