@skdx/web-components 0.27.0 → 0.29.0

package/dist/slider/SliderAnatomy.d.cts

@@ -0,0 +1,11 @@
+import type { SkdxSlider } from './Slider.cjs';
+import './SliderMark.cjs';
+import './SliderRange.cjs';
+import './SliderThumb.cjs';
+import './SliderTrack.cjs';
+/**
+ * @internal Marks direct `<skdx-slider>` children this module generated (written in template).
+ */
+export declare const SLIDER_ANATOMY_GENERATED = "data-skdx-slider-generated";
+/** @internal Builds Track/Range, one Thumb per value (keyed by index), and one Mark per mark entry. */
+export declare function fillSliderAnatomy(root: SkdxSlider): void;

package/dist/slider/SliderAnatomy.d.ts

@@ -0,0 +1,11 @@
+import type { SkdxSlider } from './Slider.js';
+import './SliderMark.js';
+import './SliderRange.js';
+import './SliderThumb.js';
+import './SliderTrack.js';
+/**
+ * @internal Marks direct `<skdx-slider>` children this module generated (written in template).
+ */
+export declare const SLIDER_ANATOMY_GENERATED = "data-skdx-slider-generated";
+/** @internal Builds Track/Range, one Thumb per value (keyed by index), and one Mark per mark entry. */
+export declare function fillSliderAnatomy(root: SkdxSlider): void;

package/dist/slider/SliderAnatomy.js

@@ -0,0 +1,17 @@
+import{html as i,render as n}from"lit";import{repeat as d}from"lit/directives/repeat.js";import{isDevMode as m}from"../internal/dev-mode.js";import"./SliderMark.js";import"./SliderRange.js";import"./SliderThumb.js";import"./SliderTrack.js";var c="data-skdx-slider-generated";function o(e){m()&&e.value.length>1&&(!e.thumbLabels||e.thumbLabels.length<e.value.length)&&console.warn(`[skandadx] Slider derives ${e.value.length} thumbs without aria-labels from thumbLabels and all will announce identically, violating accessibility.namingRequirement. Pass thumbLabels with one name per thumb to distinguish them (for example, ["Minimum price", "Maximum price"]).`);let t=e.value.length===1,s=e.getAttribute("aria-label"),r=e.getAttribute("aria-labelledby");n(i`
+      <skdx-slider-track data-skdx-slider-generated>
+        <skdx-slider-range data-skdx-slider-generated></skdx-slider-range>
+      </skdx-slider-track>
+      ${d(e.value,(l,a)=>a,(l,a)=>i`<skdx-slider-thumb
+            data-skdx-slider-generated
+            index=${a}
+            ?show-tooltip=${e.showTooltip}
+            aria-label=${(t?s:null)??e.thumbLabels?.[a]??null}
+            aria-labelledby=${(t?r:null)??null}
+          ></skdx-slider-thumb>`)}
+      ${d(e.marks??[],l=>l.value,l=>i`<skdx-slider-mark
+            data-skdx-slider-generated
+            value=${l.value}
+            >${l.label??""}</skdx-slider-mark
+          >`)}
+    `,e,{host:e})}export{c as SLIDER_ANATOMY_GENERATED,o as fillSliderAnatomy};

package/dist/slider/SliderMark.cjs

@@ -0,0 +1,6 @@
+"use strict";var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var y=(r,e)=>{for(var t in e)a(r,t,{get:e[t],enumerable:!0})},f=(r,e,t,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of u(e))!b.call(r,i)&&i!==t&&a(r,i,{get:()=>e[i],enumerable:!(s=p(e,i))||s.enumerable});return r};var k=r=>f(a({},"__esModule",{value:!0}),r),h=(r,e,t,s)=>{for(var i=s>1?void 0:s?p(e,t):e,d=r.length-1,m;d>=0;d--)(m=r[d])&&(i=(s?m(e,t,i):m(i))||i);return s&&i&&a(e,t,i),i};var E={};y(E,{SkdxSliderMark:()=>o});module.exports=k(E);var n=require("lit"),c=require("lit/decorators.js"),v=require("../internal/define.cjs"),l=require("./family.cjs");var o=class extends n.LitElement{constructor(){super(...arguments);this.value=0;this.root=null;this.observer=new MutationObserver(()=>this.sync());this.onRootUpdate=()=>this.sync()}connectedCallback(){if(super.connectedCallback(),this.root=l.SLIDER_FAMILY.root(this),!this.root)throw new Error("<skdx-slider-mark> must be used inside <skdx-slider>.");this.setAttribute("aria-hidden","true"),this.observer.observe(this.root,{attributeFilter:["min","max","orientation","disabled"]}),this.root.addEventListener(l.SLIDER_FAMILY.event,this.onRootUpdate),this.sync()}disconnectedCallback(){this.observer.disconnect(),this.root?.removeEventListener(l.SLIDER_FAMILY.event,this.onRootUpdate),super.disconnectedCallback()}updated(t){t.has("value")&&this.sync()}sync(){let t=this.root;if(!t)return;this.setAttribute("data-orientation",t.orientation),this.setAttribute("data-value",String(this.value)),t.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled");let s=(this.value-t.min)/(t.max-t.min)*100;t.orientation==="horizontal"?(this.style.setProperty("inset-inline-start",`${s}%`),this.style.bottom=""):(this.style.bottom=`${s}%`,this.style.removeProperty("inset-inline-start"))}render(){return n.html`<slot></slot>`}};o.styles=n.css`
+    :host {
+      display: block;
+      position: absolute;
+    }
+  `,h([(0,c.property)({type:Number})],o.prototype,"value",2),o=h([(0,v.customElement)("skdx-slider-mark","slider","mark")],o);0&&(module.exports={SkdxSliderMark});

package/dist/slider/SliderMark.d.cts

@@ -0,0 +1,34 @@
+import { LitElement, type TemplateResult } from 'lit';
+/**
+ * `<skdx-slider-mark>` is an optional tick at a declared `value` along a `<skdx-slider>`'s track, hidden from assistive tech.
+ *
+ * @example
+ * ```html
+ * <skdx-slider value="[50]">
+ *   <skdx-slider-track><skdx-slider-range></skdx-slider-range></skdx-slider-track>
+ *   <skdx-slider-thumb></skdx-slider-thumb>
+ *   <skdx-slider-mark value="0">0</skdx-slider-mark>
+ *   <skdx-slider-mark value="100">100</skdx-slider-mark>
+ * </skdx-slider>
+ * ```
+ *
+ * @csspart mark - The host's shadow-root wrapper.
+ */
+export declare class SkdxSliderMark extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** The value on the track this mark sits at. */
+    value: number;
+    private root;
+    private readonly observer;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private sync;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-slider-mark': SkdxSliderMark;
+    }
+}

package/dist/slider/SliderMark.d.ts

@@ -0,0 +1,34 @@
+import { LitElement, type TemplateResult } from 'lit';
+/**
+ * `<skdx-slider-mark>` is an optional tick at a declared `value` along a `<skdx-slider>`'s track, hidden from assistive tech.
+ *
+ * @example
+ * ```html
+ * <skdx-slider value="[50]">
+ *   <skdx-slider-track><skdx-slider-range></skdx-slider-range></skdx-slider-track>
+ *   <skdx-slider-thumb></skdx-slider-thumb>
+ *   <skdx-slider-mark value="0">0</skdx-slider-mark>
+ *   <skdx-slider-mark value="100">100</skdx-slider-mark>
+ * </skdx-slider>
+ * ```
+ *
+ * @csspart mark - The host's shadow-root wrapper.
+ */
+export declare class SkdxSliderMark extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** The value on the track this mark sits at. */
+    value: number;
+    private root;
+    private readonly observer;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private sync;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-slider-mark': SkdxSliderMark;
+    }
+}

package/dist/slider/SliderMark.js

@@ -0,0 +1,6 @@
+var m=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var l=(o,s,t,e)=>{for(var i=e>1?void 0:e?h(s,t):s,n=o.length-1,a;n>=0;n--)(a=o[n])&&(i=(e?a(s,t,i):a(i))||i);return e&&i&&m(s,t,i),i};import{css as p,html as c,LitElement as v}from"lit";import{property as u}from"lit/decorators.js";import{customElement as b}from"../internal/define.js";import{SLIDER_FAMILY as d}from"./family.js";var r=class extends v{constructor(){super(...arguments);this.value=0;this.root=null;this.observer=new MutationObserver(()=>this.sync());this.onRootUpdate=()=>this.sync()}connectedCallback(){if(super.connectedCallback(),this.root=d.root(this),!this.root)throw new Error("<skdx-slider-mark> must be used inside <skdx-slider>.");this.setAttribute("aria-hidden","true"),this.observer.observe(this.root,{attributeFilter:["min","max","orientation","disabled"]}),this.root.addEventListener(d.event,this.onRootUpdate),this.sync()}disconnectedCallback(){this.observer.disconnect(),this.root?.removeEventListener(d.event,this.onRootUpdate),super.disconnectedCallback()}updated(t){t.has("value")&&this.sync()}sync(){let t=this.root;if(!t)return;this.setAttribute("data-orientation",t.orientation),this.setAttribute("data-value",String(this.value)),t.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled");let e=(this.value-t.min)/(t.max-t.min)*100;t.orientation==="horizontal"?(this.style.setProperty("inset-inline-start",`${e}%`),this.style.bottom=""):(this.style.bottom=`${e}%`,this.style.removeProperty("inset-inline-start"))}render(){return c`<slot></slot>`}};r.styles=p`
+    :host {
+      display: block;
+      position: absolute;
+    }
+  `,l([u({type:Number})],r.prototype,"value",2),r=l([b("skdx-slider-mark","slider","mark")],r);export{r as SkdxSliderMark};

package/dist/slider/SliderRange.cjs

@@ -1,6 +1,6 @@
-"use strict";var d=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var b=(s,r)=>{for(var t in r)d(s,t,{get:r[t],enumerable:!0})},y=(s,r,t,o)=>{if(r&&typeof r=="object"||typeof r=="function")for(let e of p(r))!v.call(s,e)&&e!==t&&d(s,e,{get:()=>r[e],enumerable:!(o=h(r,e))||o.enumerable});return s};var u=s=>y(d({},"__esModule",{value:!0}),s),c=(s,r,t,o)=>{for(var e=o>1?void 0:o?h(r,t):r,i=s.length-1,l;i>=0;i--)(l=s[i])&&(e=(o?l(r,t,e):l(e))||e);return o&&e&&d(r,t,e),e};var k={};b(k,{SkdxSliderRange:()=>n});module.exports=u(k);var a=require("lit"),m=require("../internal/define.cjs");var n=class extends a.LitElement{constructor(){super(...arguments);this.root=null;this.observer=new MutationObserver(()=>this.sync());this.onRootUpdate=()=>this.sync()}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-slider"),!this.root)throw new Error("<skdx-slider-range> must be used inside <skdx-slider>.");this.observer.observe(this.root,{attributeFilter:["value","min","max","orientation","disabled"]}),this.root.addEventListener("skdx-slider-internal-update",this.onRootUpdate),this.sync()}disconnectedCallback(){this.observer.disconnect(),this.root?.removeEventListener("skdx-slider-internal-update",this.onRootUpdate),super.disconnectedCallback()}sync(){let t=this.root;if(!t)return;this.setAttribute("data-orientation",t.orientation),t.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled");let o=t.value.map(l=>(l-t.min)/(t.max-t.min)*100),e=t.value.length>1?Math.min(...o):0,i=100-Math.max(...o,0);t.orientation==="horizontal"?(this.style.left=`${e}%`,this.style.right=`${i}%`,this.style.removeProperty("bottom"),this.style.removeProperty("top")):(this.style.bottom=`${e}%`,this.style.top=`${i}%`,this.style.removeProperty("left"),this.style.removeProperty("right"))}render(){return a.html`<slot part="range"></slot>`}};n.styles=a.css`
+"use strict";var d=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var b=(s,r)=>{for(var t in r)d(s,t,{get:r[t],enumerable:!0})},u=(s,r,t,o)=>{if(r&&typeof r=="object"||typeof r=="function")for(let e of v(r))!y.call(s,e)&&e!==t&&d(s,e,{get:()=>r[e],enumerable:!(o=h(r,e))||o.enumerable});return s};var f=s=>u(d({},"__esModule",{value:!0}),s),p=(s,r,t,o)=>{for(var e=o>1?void 0:o?h(r,t):r,i=s.length-1,l;i>=0;i--)(l=s[i])&&(e=(o?l(r,t,e):l(e))||e);return o&&e&&d(r,t,e),e};var k={};b(k,{SkdxSliderRange:()=>n});module.exports=f(k);var a=require("lit"),c=require("../internal/define.cjs"),m=require("./family.cjs");var n=class extends a.LitElement{constructor(){super(...arguments);this.root=null;this.observer=new MutationObserver(()=>this.sync());this.onRootUpdate=()=>this.sync()}connectedCallback(){if(super.connectedCallback(),this.root=m.SLIDER_FAMILY.root(this),!this.root)throw new Error("<skdx-slider-range> must be used inside <skdx-slider>.");this.observer.observe(this.root,{attributeFilter:["value","min","max","orientation","disabled"]}),this.root.addEventListener(m.SLIDER_FAMILY.event,this.onRootUpdate),this.sync()}disconnectedCallback(){this.observer.disconnect(),this.root?.removeEventListener(m.SLIDER_FAMILY.event,this.onRootUpdate),super.disconnectedCallback()}sync(){let t=this.root;if(!t)return;this.setAttribute("data-orientation",t.orientation),t.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled");let o=t.value.map(l=>(l-t.min)/(t.max-t.min)*100),e=t.value.length>1?Math.min(...o):0,i=100-Math.max(...o,0);t.orientation==="horizontal"?(this.style.setProperty("inset-inline-start",`${e}%`),this.style.setProperty("inset-inline-end",`${i}%`),this.style.removeProperty("bottom"),this.style.removeProperty("top")):(this.style.bottom=`${e}%`,this.style.top=`${i}%`,this.style.removeProperty("inset-inline-start"),this.style.removeProperty("inset-inline-end"))}render(){return a.html`<slot part="range"></slot>`}};n.styles=a.css`
     :host {
       display: block;
       position: absolute;
     }
-  `,n=c([(0,m.customElement)("skdx-slider-range","slider","range")],n);0&&(module.exports={SkdxSliderRange});
+  `,n=p([(0,c.customElement)("skdx-slider-range","slider","range")],n);0&&(module.exports={SkdxSliderRange});

package/dist/slider/SliderRange.d.cts

@@ -1,11 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * `<skdx-slider-range>` — the filled portion of a `<skdx-slider-track>',
- * spanning from the lowest to the highest selected value (or from the start
- * of the track to the single value, for a one-thumb slider). Positions
- * itself with `left`/`right` (horizontal) or `bottom`/`top` (vertical)
- * percentages computed from the ancestor `<skdx-slider>`'s current values.
- * Must be used inside `<skdx-slider>`.
+ * `<skdx-slider-range>` is the filled portion of a `<skdx-slider-track>`, spanning from the lowest to highest selected value.
  *
  * @csspart range - The host's shadow-root wrapper.
  */
@@ -13,16 +8,11 @@ export declare class SkdxSliderRange extends LitElement {
     static styles: import("lit").CSSResult;
     private root;
     private readonly observer;
-    /**
-     * The root never reflects `value` to an attribute (see `Slider.value`), so
-     * the mutation observer above cannot see the values move — the filled band
-     * stayed where it was rendered while the thumb was dragged or stepped.
-     */
     private readonly onRootUpdate;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private sync;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/slider/SliderRange.d.ts

@@ -1,11 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * `<skdx-slider-range>` — the filled portion of a `<skdx-slider-track>',
- * spanning from the lowest to the highest selected value (or from the start
- * of the track to the single value, for a one-thumb slider). Positions
- * itself with `left`/`right` (horizontal) or `bottom`/`top` (vertical)
- * percentages computed from the ancestor `<skdx-slider>`'s current values.
- * Must be used inside `<skdx-slider>`.
+ * `<skdx-slider-range>` is the filled portion of a `<skdx-slider-track>`, spanning from the lowest to highest selected value.
  *
  * @csspart range - The host's shadow-root wrapper.
  */
@@ -13,16 +8,11 @@ export declare class SkdxSliderRange extends LitElement {
     static styles: import("lit").CSSResult;
     private root;
     private readonly observer;
-    /**
-     * The root never reflects `value` to an attribute (see `Slider.value`), so
-     * the mutation observer above cannot see the values move — the filled band
-     * stayed where it was rendered while the thumb was dragged or stepped.
-     */
     private readonly onRootUpdate;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private sync;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/slider/SliderRange.js

@@ -1,6 +1,6 @@
-var d=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var l=(a,o,t,r)=>{for(var e=r>1?void 0:r?h(o,t):o,s=a.length-1,i;s>=0;s--)(i=a[s])&&(e=(r?i(o,t,e):i(e))||e);return r&&e&&d(o,t,e),e};import{css as c,html as m,LitElement as p}from"lit";import{customElement as v}from"../internal/define.js";var n=class extends p{constructor(){super(...arguments);this.root=null;this.observer=new MutationObserver(()=>this.sync());this.onRootUpdate=()=>this.sync()}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-slider"),!this.root)throw new Error("<skdx-slider-range> must be used inside <skdx-slider>.");this.observer.observe(this.root,{attributeFilter:["value","min","max","orientation","disabled"]}),this.root.addEventListener("skdx-slider-internal-update",this.onRootUpdate),this.sync()}disconnectedCallback(){this.observer.disconnect(),this.root?.removeEventListener("skdx-slider-internal-update",this.onRootUpdate),super.disconnectedCallback()}sync(){let t=this.root;if(!t)return;this.setAttribute("data-orientation",t.orientation),t.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled");let r=t.value.map(i=>(i-t.min)/(t.max-t.min)*100),e=t.value.length>1?Math.min(...r):0,s=100-Math.max(...r,0);t.orientation==="horizontal"?(this.style.left=`${e}%`,this.style.right=`${s}%`,this.style.removeProperty("bottom"),this.style.removeProperty("top")):(this.style.bottom=`${e}%`,this.style.top=`${s}%`,this.style.removeProperty("left"),this.style.removeProperty("right"))}render(){return m`<slot part="range"></slot>`}};n.styles=c`
+var m=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var d=(a,o,t,r)=>{for(var e=r>1?void 0:r?h(o,t):o,s=a.length-1,i;s>=0;s--)(i=a[s])&&(e=(r?i(o,t,e):i(e))||e);return r&&e&&m(o,t,e),e};import{css as p,html as c,LitElement as v}from"lit";import{customElement as y}from"../internal/define.js";import{SLIDER_FAMILY as l}from"./family.js";var n=class extends v{constructor(){super(...arguments);this.root=null;this.observer=new MutationObserver(()=>this.sync());this.onRootUpdate=()=>this.sync()}connectedCallback(){if(super.connectedCallback(),this.root=l.root(this),!this.root)throw new Error("<skdx-slider-range> must be used inside <skdx-slider>.");this.observer.observe(this.root,{attributeFilter:["value","min","max","orientation","disabled"]}),this.root.addEventListener(l.event,this.onRootUpdate),this.sync()}disconnectedCallback(){this.observer.disconnect(),this.root?.removeEventListener(l.event,this.onRootUpdate),super.disconnectedCallback()}sync(){let t=this.root;if(!t)return;this.setAttribute("data-orientation",t.orientation),t.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled");let r=t.value.map(i=>(i-t.min)/(t.max-t.min)*100),e=t.value.length>1?Math.min(...r):0,s=100-Math.max(...r,0);t.orientation==="horizontal"?(this.style.setProperty("inset-inline-start",`${e}%`),this.style.setProperty("inset-inline-end",`${s}%`),this.style.removeProperty("bottom"),this.style.removeProperty("top")):(this.style.bottom=`${e}%`,this.style.top=`${s}%`,this.style.removeProperty("inset-inline-start"),this.style.removeProperty("inset-inline-end"))}render(){return c`<slot part="range"></slot>`}};n.styles=p`
     :host {
       display: block;
       position: absolute;
     }
-  `,n=l([v("skdx-slider-range","slider","range")],n);export{n as SkdxSliderRange};
+  `,n=d([y("skdx-slider-range","slider","range")],n);export{n as SkdxSliderRange};

package/dist/slider/SliderThumb.cjs

@@ -1,6 +1,13 @@
-"use strict";var h=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var A=(s,r)=>{for(var t in r)h(s,t,{get:r[t],enumerable:!0})},k=(s,r,t,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let e of x(r))!f.call(s,e)&&e!==t&&h(s,e,{get:()=>r[e],enumerable:!(i=v(r,e))||i.enumerable});return s};var w=s=>k(h({},"__esModule",{value:!0}),s),u=(s,r,t,i)=>{for(var e=i>1?void 0:i?v(r,t):r,n=s.length-1,a;n>=0;n--)(a=s[n])&&(e=(i?a(r,t,e):a(e))||e);return i&&e&&h(r,t,e),e};var g={};A(g,{SkdxSliderThumb:()=>o});module.exports=w(g);var d=require("lit"),p=require("lit/decorators.js"),c=require("../internal/define.cjs"),y=require("../internal/direction.cjs");var o=class extends d.LitElement{constructor(){super(...arguments);this.root=null;this.observer=new MutationObserver(()=>this.sync());this.onRootUpdate=()=>this.sync();this.resolvedIndex=0;this.handleKeydown=t=>{let i=this.root;if(!i||i.disabled)return;let{step:e,min:n,max:a}=i,m=Math.max((a-n)/10,e),b={ArrowRight:e,ArrowUp:e,ArrowLeft:-e,ArrowDown:-e,PageUp:m,PageDown:-m},l=(0,y.directionalKey)(t.key,this);l in b?(t.preventDefault(),i.updateValue(this.thumbIndex,this.value+b[l])):l==="Home"?(t.preventDefault(),i.updateValue(this.thumbIndex,n)):l==="End"&&(t.preventDefault(),i.updateValue(this.thumbIndex,a))}}get thumbIndex(){return this.index??this.resolvedIndex}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-slider"),!this.root)throw new Error("<skdx-slider-thumb> must be used inside <skdx-slider>.");this.resolvedIndex=Array.from(this.root.querySelectorAll("skdx-slider-thumb")).indexOf(this),this.setAttribute("role","slider"),this.addEventListener("keydown",this.handleKeydown),this.observer.observe(this.root,{attributeFilter:["value","min","max","step","orientation","disabled","name"]}),this.root.addEventListener("skdx-slider-internal-update",this.onRootUpdate),this.sync()}disconnectedCallback(){this.observer.disconnect(),this.root?.removeEventListener("skdx-slider-internal-update",this.onRootUpdate),this.removeEventListener("keydown",this.handleKeydown),super.disconnectedCallback()}get value(){return this.root?.value[this.thumbIndex]??this.root?.min??0}sync(){let t=this.root;if(!t)return;let i=this.value,e=(i-t.min)/(t.max-t.min)*100;this.setAttribute("aria-valuemin",String(t.min)),this.setAttribute("aria-valuemax",String(t.max)),this.setAttribute("aria-valuenow",String(i)),this.setAttribute("aria-orientation",t.orientation),t.disabled?(this.setAttribute("aria-disabled","true"),this.setAttribute("data-disabled",""),this.removeAttribute("tabindex")):(this.removeAttribute("aria-disabled"),this.removeAttribute("data-disabled"),this.setAttribute("tabindex","0")),this.setAttribute("data-orientation",t.orientation),t.orientation==="horizontal"?(this.style.left=`${e}%`,this.style.bottom="",this.style.transform="translateX(-50%)"):(this.style.bottom=`${e}%`,this.style.left="",this.style.transform="translateY(50%)"),this.requestUpdate()}render(){return d.html`<slot></slot>`}};o.styles=d.css`
+"use strict";var p=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var A=Object.prototype.hasOwnProperty;var w=(s,r)=>{for(var e in r)p(s,e,{get:r[e],enumerable:!0})},k=(s,r,e,t)=>{if(r&&typeof r=="object"||typeof r=="function")for(let i of g(r))!A.call(s,i)&&i!==e&&p(s,i,{get:()=>r[i],enumerable:!(t=y(r,i))||t.enumerable});return s};var I=s=>k(p({},"__esModule",{value:!0}),s),d=(s,r,e,t)=>{for(var i=t>1?void 0:t?y(r,e):r,n=s.length-1,l;n>=0;n--)(l=s[n])&&(i=(t?l(r,e,i):l(i))||i);return t&&i&&p(r,e,i),i};var E={};w(E,{SkdxSliderThumb:()=>o});module.exports=I(E);var a=require("lit"),v=require("lit/decorators.js"),f=require("../internal/define.cjs"),x=require("../internal/direction.cjs"),b=require("./family.cjs");var o=class extends a.LitElement{constructor(){super(...arguments);this.showTooltip=!1;this.root=null;this.observer=new MutationObserver(()=>this.sync());this.onRootUpdate=()=>this.sync();this.resolvedIndex=0;this.handleKeydown=e=>{let t=this.root;if(!t||t.disabled)return;let{step:i,min:n,max:l}=t,m=t.resolvedLargeStep,h=e.shiftKey?m:i,c={ArrowRight:h,ArrowUp:h,ArrowLeft:-h,ArrowDown:-h,PageUp:m,PageDown:-m},u=(0,x.directionalKey)(e.key,this,t.direction);u in c?(e.preventDefault(),t.updateValue(this.thumbIndex,this.value+c[u],"keyboard")):u==="Home"?(e.preventDefault(),t.updateValue(this.thumbIndex,n,"keyboard")):u==="End"&&(e.preventDefault(),t.updateValue(this.thumbIndex,l,"keyboard"))}}get thumbIndex(){return this.index??this.resolvedIndex}connectedCallback(){if(super.connectedCallback(),this.root=b.SLIDER_FAMILY.root(this),!this.root)throw new Error("<skdx-slider-thumb> must be used inside <skdx-slider>.");this.resolvedIndex=Array.from(this.root.querySelectorAll("skdx-slider-thumb")).indexOf(this),this.setAttribute("role","slider"),this.addEventListener("keydown",this.handleKeydown),this.observer.observe(this.root,{attributeFilter:["value","min","max","step","orientation","disabled","name"]}),this.root.addEventListener(b.SLIDER_FAMILY.event,this.onRootUpdate),this.sync()}disconnectedCallback(){this.observer.disconnect(),this.root?.removeEventListener(b.SLIDER_FAMILY.event,this.onRootUpdate),this.removeEventListener("keydown",this.handleKeydown),super.disconnectedCallback()}get value(){return this.root?.value[this.thumbIndex]??this.root?.min??0}sync(e=!0){let t=this.root;if(!t)return;let i=this.value,n=(i-t.min)/(t.max-t.min)*100;this.setAttribute("aria-valuemin",String(t.min)),this.setAttribute("aria-valuemax",String(t.max)),this.setAttribute("aria-valuenow",String(i)),this.valueText===void 0?this.removeAttribute("aria-valuetext"):this.setAttribute("aria-valuetext",this.valueText),this.setAttribute("aria-orientation",t.orientation),t.draggingIndex===this.thumbIndex?this.setAttribute("data-dragging",""):this.removeAttribute("data-dragging"),t.disabled?(this.setAttribute("aria-disabled","true"),this.setAttribute("data-disabled",""),this.removeAttribute("tabindex")):(this.removeAttribute("aria-disabled"),this.removeAttribute("data-disabled"),this.setAttribute("tabindex","0")),this.setAttribute("data-orientation",t.orientation),t.orientation==="horizontal"?(this.style.setProperty("inset-inline-start",`${n}%`),this.style.bottom="",this.style.transform=t.direction==="rtl"?"translateX(50%)":"translateX(-50%)"):(this.style.bottom=`${n}%`,this.style.removeProperty("inset-inline-start"),this.style.transform="translateY(50%)"),e&&this.requestUpdate()}updated(e){(e.has("valueText")||e.has("index")||e.has("showTooltip"))&&this.sync(!1)}render(){return a.html`
+      <slot></slot>
+      ${this.showTooltip?a.html`<span
+              part="tooltip"
+              aria-hidden="true"
+              >${this.valueText??this.value}</span
+            >`:a.nothing}
+    `}};o.styles=a.css`
     :host {
       display: block;
       position: absolute;
     }
-  `,u([(0,p.property)({type:Number})],o.prototype,"index",2),o=u([(0,c.customElement)("skdx-slider-thumb","slider","thumb")],o);0&&(module.exports={SkdxSliderThumb});
+  `,d([(0,v.property)({type:Number})],o.prototype,"index",2),d([(0,v.property)({type:String,attribute:"value-text"})],o.prototype,"valueText",2),d([(0,v.property)({type:Boolean,reflect:!0,attribute:"show-tooltip"})],o.prototype,"showTooltip",2),o=d([(0,f.customElement)("skdx-slider-thumb","slider","thumb")],o);0&&(module.exports={SkdxSliderThumb});

package/dist/slider/SliderThumb.d.cts

@@ -1,21 +1,11 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * `<skdx-slider-thumb>` — a single draggable handle on a `<skdx-slider>`,
- * positioned by `index` (or, if omitted, by its render order among sibling
- * thumbs). Sets `role="slider"` with `aria-valuemin`/`aria-valuemax`/
- * `aria-valuenow`/`aria-orientation`/`aria-disabled` directly on this host
- * (the host itself is the focusable, keyboard-operable element — no shadow
- * DOM indirection, matching `<skdx-tabs-list>`'s pattern of setting ARIA
- * state on itself). Arrow keys step by `step`, PageUp/PageDown step by a
- * larger increment (1/10th of the range), Home/End jump to `min`/`max`.
- * Form submission belongs to the `<skdx-slider>` root, which publishes every
- * thumb's value through `ElementInternals`. Must be used inside
- * `<skdx-slider>`.
- *
+ * `<skdx-slider-thumb>` is a draggable handle on `<skdx-slider>`, rendering `role="slider"` and handling arrow-key steps.
  * @example
  * ```html
- * <skdx-slider-thumb index="0" aria-label="Minimum"></skdx-slider-thumb>
+ * <skdx-slider-thumb index="0" aria-label="Minimum" show-tooltip></skdx-slider-thumb>
  * ```
+ * @csspart tooltip - The value readout rendered while `showTooltip` is set.
  */
 export declare class SkdxSliderThumb extends LitElement {
     static styles: import("lit").CSSResult;
@@ -24,13 +14,20 @@ export declare class SkdxSliderThumb extends LitElement {
      * @default undefined
      */
     index?: number;
-    private root;
-    private readonly observer;
     /**
-     * `value` is a property-only collection — the root deliberately never
-     * reflects it back to the attribute (see `Slider.value`), so the mutation
-     * observer above cannot see the values move. The root broadcasts instead.
+     * Human-readable announcement of this thumb's value, written to `aria-valuetext` (e.g. `"Medium"`, `"£20"`).
+     * @default undefined
      */
+    valueText?: string;
+    /**
+     * Renders a `part="tooltip"` element with this thumb's formatted value; the
+     * per-thumb form of the root's `show-tooltip`, which sets it on every thumb.
+     * @default false
+     */
+    showTooltip: boolean;
+    private root;
+    private readonly observer;
+    /** `value` is property-only; root broadcasts changes via `skdx-slider-internal-update`. */
     private readonly onRootUpdate;
     private resolvedIndex;
     private get thumbIndex();
@@ -39,7 +36,8 @@ export declare class SkdxSliderThumb extends LitElement {
     private get value();
     private sync;
     private readonly handleKeydown;
-    render(): import("lit").TemplateResult<1>;
+    protected updated(changed: Map<string, unknown>): void;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/slider/SliderThumb.d.ts

@@ -1,21 +1,11 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * `<skdx-slider-thumb>` — a single draggable handle on a `<skdx-slider>`,
- * positioned by `index` (or, if omitted, by its render order among sibling
- * thumbs). Sets `role="slider"` with `aria-valuemin`/`aria-valuemax`/
- * `aria-valuenow`/`aria-orientation`/`aria-disabled` directly on this host
- * (the host itself is the focusable, keyboard-operable element — no shadow
- * DOM indirection, matching `<skdx-tabs-list>`'s pattern of setting ARIA
- * state on itself). Arrow keys step by `step`, PageUp/PageDown step by a
- * larger increment (1/10th of the range), Home/End jump to `min`/`max`.
- * Form submission belongs to the `<skdx-slider>` root, which publishes every
- * thumb's value through `ElementInternals`. Must be used inside
- * `<skdx-slider>`.
- *
+ * `<skdx-slider-thumb>` is a draggable handle on `<skdx-slider>`, rendering `role="slider"` and handling arrow-key steps.
  * @example
  * ```html
- * <skdx-slider-thumb index="0" aria-label="Minimum"></skdx-slider-thumb>
+ * <skdx-slider-thumb index="0" aria-label="Minimum" show-tooltip></skdx-slider-thumb>
  * ```
+ * @csspart tooltip - The value readout rendered while `showTooltip` is set.
  */
 export declare class SkdxSliderThumb extends LitElement {
     static styles: import("lit").CSSResult;
@@ -24,13 +14,20 @@ export declare class SkdxSliderThumb extends LitElement {
      * @default undefined
      */
     index?: number;
-    private root;
-    private readonly observer;
     /**
-     * `value` is a property-only collection — the root deliberately never
-     * reflects it back to the attribute (see `Slider.value`), so the mutation
-     * observer above cannot see the values move. The root broadcasts instead.
+     * Human-readable announcement of this thumb's value, written to `aria-valuetext` (e.g. `"Medium"`, `"£20"`).
+     * @default undefined
      */
+    valueText?: string;
+    /**
+     * Renders a `part="tooltip"` element with this thumb's formatted value; the
+     * per-thumb form of the root's `show-tooltip`, which sets it on every thumb.
+     * @default false
+     */
+    showTooltip: boolean;
+    private root;
+    private readonly observer;
+    /** `value` is property-only; root broadcasts changes via `skdx-slider-internal-update`. */
     private readonly onRootUpdate;
     private resolvedIndex;
     private get thumbIndex();
@@ -39,7 +36,8 @@ export declare class SkdxSliderThumb extends LitElement {
     private get value();
     private sync;
     private readonly handleKeydown;
-    render(): import("lit").TemplateResult<1>;
+    protected updated(changed: Map<string, unknown>): void;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/slider/SliderThumb.js

@@ -1,6 +1,13 @@
-var m=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var l=(d,n,t,i)=>{for(var e=i>1?void 0:i?b(n,t):n,r=d.length-1,s;r>=0;r--)(s=d[r])&&(e=(i?s(n,t,e):s(e))||e);return i&&e&&m(n,t,e),e};import{css as v,html as p,LitElement as c}from"lit";import{property as y}from"lit/decorators.js";import{customElement as x}from"../internal/define.js";import{directionalKey as f}from"../internal/direction.js";var o=class extends c{constructor(){super(...arguments);this.root=null;this.observer=new MutationObserver(()=>this.sync());this.onRootUpdate=()=>this.sync();this.resolvedIndex=0;this.handleKeydown=t=>{let i=this.root;if(!i||i.disabled)return;let{step:e,min:r,max:s}=i,h=Math.max((s-r)/10,e),u={ArrowRight:e,ArrowUp:e,ArrowLeft:-e,ArrowDown:-e,PageUp:h,PageDown:-h},a=f(t.key,this);a in u?(t.preventDefault(),i.updateValue(this.thumbIndex,this.value+u[a])):a==="Home"?(t.preventDefault(),i.updateValue(this.thumbIndex,r)):a==="End"&&(t.preventDefault(),i.updateValue(this.thumbIndex,s))}}get thumbIndex(){return this.index??this.resolvedIndex}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-slider"),!this.root)throw new Error("<skdx-slider-thumb> must be used inside <skdx-slider>.");this.resolvedIndex=Array.from(this.root.querySelectorAll("skdx-slider-thumb")).indexOf(this),this.setAttribute("role","slider"),this.addEventListener("keydown",this.handleKeydown),this.observer.observe(this.root,{attributeFilter:["value","min","max","step","orientation","disabled","name"]}),this.root.addEventListener("skdx-slider-internal-update",this.onRootUpdate),this.sync()}disconnectedCallback(){this.observer.disconnect(),this.root?.removeEventListener("skdx-slider-internal-update",this.onRootUpdate),this.removeEventListener("keydown",this.handleKeydown),super.disconnectedCallback()}get value(){return this.root?.value[this.thumbIndex]??this.root?.min??0}sync(){let t=this.root;if(!t)return;let i=this.value,e=(i-t.min)/(t.max-t.min)*100;this.setAttribute("aria-valuemin",String(t.min)),this.setAttribute("aria-valuemax",String(t.max)),this.setAttribute("aria-valuenow",String(i)),this.setAttribute("aria-orientation",t.orientation),t.disabled?(this.setAttribute("aria-disabled","true"),this.setAttribute("data-disabled",""),this.removeAttribute("tabindex")):(this.removeAttribute("aria-disabled"),this.removeAttribute("data-disabled"),this.setAttribute("tabindex","0")),this.setAttribute("data-orientation",t.orientation),t.orientation==="horizontal"?(this.style.left=`${e}%`,this.style.bottom="",this.style.transform="translateX(-50%)"):(this.style.bottom=`${e}%`,this.style.left="",this.style.transform="translateY(50%)"),this.requestUpdate()}render(){return p`<slot></slot>`}};o.styles=v`
+var c=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var n=(h,o,e,t)=>{for(var i=t>1?void 0:t?y(o,e):o,r=h.length-1,a;r>=0;r--)(a=h[r])&&(i=(t?a(o,e,i):a(i))||i);return t&&i&&c(o,e,i),i};import{css as f,html as m,LitElement as x,nothing as g}from"lit";import{property as p}from"lit/decorators.js";import{customElement as A}from"../internal/define.js";import{directionalKey as w}from"../internal/direction.js";import{SLIDER_FAMILY as v}from"./family.js";var s=class extends x{constructor(){super(...arguments);this.showTooltip=!1;this.root=null;this.observer=new MutationObserver(()=>this.sync());this.onRootUpdate=()=>this.sync();this.resolvedIndex=0;this.handleKeydown=e=>{let t=this.root;if(!t||t.disabled)return;let{step:i,min:r,max:a}=t,u=t.resolvedLargeStep,l=e.shiftKey?u:i,b={ArrowRight:l,ArrowUp:l,ArrowLeft:-l,ArrowDown:-l,PageUp:u,PageDown:-u},d=w(e.key,this,t.direction);d in b?(e.preventDefault(),t.updateValue(this.thumbIndex,this.value+b[d],"keyboard")):d==="Home"?(e.preventDefault(),t.updateValue(this.thumbIndex,r,"keyboard")):d==="End"&&(e.preventDefault(),t.updateValue(this.thumbIndex,a,"keyboard"))}}get thumbIndex(){return this.index??this.resolvedIndex}connectedCallback(){if(super.connectedCallback(),this.root=v.root(this),!this.root)throw new Error("<skdx-slider-thumb> must be used inside <skdx-slider>.");this.resolvedIndex=Array.from(this.root.querySelectorAll("skdx-slider-thumb")).indexOf(this),this.setAttribute("role","slider"),this.addEventListener("keydown",this.handleKeydown),this.observer.observe(this.root,{attributeFilter:["value","min","max","step","orientation","disabled","name"]}),this.root.addEventListener(v.event,this.onRootUpdate),this.sync()}disconnectedCallback(){this.observer.disconnect(),this.root?.removeEventListener(v.event,this.onRootUpdate),this.removeEventListener("keydown",this.handleKeydown),super.disconnectedCallback()}get value(){return this.root?.value[this.thumbIndex]??this.root?.min??0}sync(e=!0){let t=this.root;if(!t)return;let i=this.value,r=(i-t.min)/(t.max-t.min)*100;this.setAttribute("aria-valuemin",String(t.min)),this.setAttribute("aria-valuemax",String(t.max)),this.setAttribute("aria-valuenow",String(i)),this.valueText===void 0?this.removeAttribute("aria-valuetext"):this.setAttribute("aria-valuetext",this.valueText),this.setAttribute("aria-orientation",t.orientation),t.draggingIndex===this.thumbIndex?this.setAttribute("data-dragging",""):this.removeAttribute("data-dragging"),t.disabled?(this.setAttribute("aria-disabled","true"),this.setAttribute("data-disabled",""),this.removeAttribute("tabindex")):(this.removeAttribute("aria-disabled"),this.removeAttribute("data-disabled"),this.setAttribute("tabindex","0")),this.setAttribute("data-orientation",t.orientation),t.orientation==="horizontal"?(this.style.setProperty("inset-inline-start",`${r}%`),this.style.bottom="",this.style.transform=t.direction==="rtl"?"translateX(50%)":"translateX(-50%)"):(this.style.bottom=`${r}%`,this.style.removeProperty("inset-inline-start"),this.style.transform="translateY(50%)"),e&&this.requestUpdate()}updated(e){(e.has("valueText")||e.has("index")||e.has("showTooltip"))&&this.sync(!1)}render(){return m`
+      <slot></slot>
+      ${this.showTooltip?m`<span
+              part="tooltip"
+              aria-hidden="true"
+              >${this.valueText??this.value}</span
+            >`:g}
+    `}};s.styles=f`
     :host {
       display: block;
       position: absolute;
     }
-  `,l([y({type:Number})],o.prototype,"index",2),o=l([x("skdx-slider-thumb","slider","thumb")],o);export{o as SkdxSliderThumb};
+  `,n([p({type:Number})],s.prototype,"index",2),n([p({type:String,attribute:"value-text"})],s.prototype,"valueText",2),n([p({type:Boolean,reflect:!0,attribute:"show-tooltip"})],s.prototype,"showTooltip",2),s=n([A("skdx-slider-thumb","slider","thumb")],s);export{s as SkdxSliderThumb};

package/dist/slider/SliderTrack.cjs

@@ -1,6 +1,6 @@
-"use strict";var a=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var p=(r,t)=>{for(var i in t)a(r,i,{get:t[i],enumerable:!0})},u=(r,t,i,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of v(t))!m.call(r,e)&&e!==i&&a(r,e,{get:()=>t[e],enumerable:!(s=c(t,e))||s.enumerable});return r};var k=r=>u(a({},"__esModule",{value:!0}),r),b=(r,t,i,s)=>{for(var e=s>1?void 0:s?c(t,i):t,l=r.length-1,n;l>=0;l--)(n=r[l])&&(e=(s?n(t,i,e):n(e))||e);return s&&e&&a(t,i,e),e};var f={};p(f,{SkdxSliderTrack:()=>o});module.exports=k(f);var d=require("lit"),h=require("../internal/define.cjs");var o=class extends d.LitElement{constructor(){super(...arguments);this.root=null;this.observer=new MutationObserver(()=>this.sync())}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-slider"),!this.root)throw new Error("<skdx-slider-track> must be used inside <skdx-slider>.");this.observer.observe(this.root,{attributeFilter:["orientation","disabled"]}),this.sync()}disconnectedCallback(){this.observer.disconnect(),super.disconnectedCallback()}sync(){this.root&&(this.setAttribute("data-orientation",this.root.orientation),this.root.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled"))}render(){return d.html`<slot part="track"></slot>`}};o.styles=d.css`
+"use strict";var l=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var u=(r,t)=>{for(var i in t)l(r,i,{get:t[i],enumerable:!0})},k=(r,t,i,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of h(t))!v.call(r,e)&&e!==i&&l(r,e,{get:()=>t[e],enumerable:!(s=c(t,e))||s.enumerable});return r};var f=r=>k(l({},"__esModule",{value:!0}),r),b=(r,t,i,s)=>{for(var e=s>1?void 0:s?c(t,i):t,d=r.length-1,n;d>=0;d--)(n=r[d])&&(e=(s?n(t,i,e):n(e))||e);return s&&e&&l(t,i,e),e};var y={};u(y,{SkdxSliderTrack:()=>o});module.exports=f(y);var a=require("lit"),m=require("../internal/define.cjs"),p=require("./family.cjs");var o=class extends a.LitElement{constructor(){super(...arguments);this.root=null;this.observer=new MutationObserver(()=>this.sync())}connectedCallback(){if(super.connectedCallback(),this.root=p.SLIDER_FAMILY.root(this),!this.root)throw new Error("<skdx-slider-track> must be used inside <skdx-slider>.");this.observer.observe(this.root,{attributeFilter:["orientation","disabled"]}),this.sync()}disconnectedCallback(){this.observer.disconnect(),super.disconnectedCallback()}sync(){this.root&&(this.setAttribute("data-orientation",this.root.orientation),this.root.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled"))}render(){return a.html`<slot part="track"></slot>`}};o.styles=a.css`
     :host {
       display: block;
       position: relative;
     }
-  `,o=b([(0,h.customElement)("skdx-slider-track","slider","track")],o);0&&(module.exports={SkdxSliderTrack});
+  `,o=b([(0,m.customElement)("skdx-slider-track","slider","track")],o);0&&(module.exports={SkdxSliderTrack});

package/dist/slider/SliderTrack.d.cts

@@ -1,8 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * `<skdx-slider-track>` — the full-length background bar of a `<skdx-slider>`.
- * Purely presentational: mirrors the ancestor's `data-orientation`/
- * `data-disabled`. Must be used inside `<skdx-slider>`.
+ * `<skdx-slider-track>` is the full-length background bar of a `<skdx-slider>`, mirroring its `data-orientation`/`data-disabled`.
  *
  * @csspart track - The host's shadow-root wrapper.
  */
@@ -13,7 +11,7 @@ export declare class SkdxSliderTrack extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     private sync;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/slider/SliderTrack.d.ts

@@ -1,8 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * `<skdx-slider-track>` — the full-length background bar of a `<skdx-slider>`.
- * Purely presentational: mirrors the ancestor's `data-orientation`/
- * `data-disabled`. Must be used inside `<skdx-slider>`.
+ * `<skdx-slider-track>` is the full-length background bar of a `<skdx-slider>`, mirroring its `data-orientation`/`data-disabled`.
  *
  * @csspart track - The host's shadow-root wrapper.
  */
@@ -13,7 +11,7 @@ export declare class SkdxSliderTrack extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     private sync;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/slider/SliderTrack.js

@@ -1,6 +1,6 @@
-var n=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var l=(s,e,o,i)=>{for(var t=i>1?void 0:i?c(e,o):e,d=s.length-1,a;d>=0;d--)(a=s[d])&&(t=(i?a(e,o,t):a(t))||t);return i&&t&&n(e,o,t),t};import{css as b,html as h,LitElement as v}from"lit";import{customElement as m}from"../internal/define.js";var r=class extends v{constructor(){super(...arguments);this.root=null;this.observer=new MutationObserver(()=>this.sync())}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-slider"),!this.root)throw new Error("<skdx-slider-track> must be used inside <skdx-slider>.");this.observer.observe(this.root,{attributeFilter:["orientation","disabled"]}),this.sync()}disconnectedCallback(){this.observer.disconnect(),super.disconnectedCallback()}sync(){this.root&&(this.setAttribute("data-orientation",this.root.orientation),this.root.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled"))}render(){return h`<slot part="track"></slot>`}};r.styles=b`
+var n=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var d=(s,e,o,i)=>{for(var t=i>1?void 0:i?c(e,o):e,a=s.length-1,l;a>=0;a--)(l=s[a])&&(t=(i?l(e,o,t):l(t))||t);return i&&t&&n(e,o,t),t};import{css as b,html as m,LitElement as p}from"lit";import{customElement as h}from"../internal/define.js";import{SLIDER_FAMILY as v}from"./family.js";var r=class extends p{constructor(){super(...arguments);this.root=null;this.observer=new MutationObserver(()=>this.sync())}connectedCallback(){if(super.connectedCallback(),this.root=v.root(this),!this.root)throw new Error("<skdx-slider-track> must be used inside <skdx-slider>.");this.observer.observe(this.root,{attributeFilter:["orientation","disabled"]}),this.sync()}disconnectedCallback(){this.observer.disconnect(),super.disconnectedCallback()}sync(){this.root&&(this.setAttribute("data-orientation",this.root.orientation),this.root.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled"))}render(){return m`<slot part="track"></slot>`}};r.styles=b`
     :host {
       display: block;
       position: relative;
     }
-  `,r=l([m("skdx-slider-track","slider","track")],r);export{r as SkdxSliderTrack};
+  `,r=d([h("skdx-slider-track","slider","track")],r);export{r as SkdxSliderTrack};

package/dist/slider/family.cjs

@@ -0,0 +1 @@
+"use strict";var l=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var s=Object.prototype.hasOwnProperty;var p=(r,e)=>{for(var i in e)l(r,i,{get:e[i],enumerable:!0})},x=(r,e,i,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let d of m(e))!s.call(r,d)&&d!==i&&l(r,d,{get:()=>e[d],enumerable:!(o=S(e,d))||o.enumerable});return r};var f=r=>x(l({},"__esModule",{value:!0}),r);var c={};p(c,{SLIDER_FAMILY:()=>k});module.exports=f(c);var t=require("../internal/family.cjs"),k=(0,t.defineFamily)("slider",{selector:"skdx-slider"});0&&(module.exports={SLIDER_FAMILY});

package/dist/slider/family.d.cts

@@ -0,0 +1,3 @@
+import type { SkdxSlider } from './Slider.cjs';
+/** @internal The broadcast every `<skdx-slider-*>` part re-renders on, and the lookup that finds their root. */
+export declare const SLIDER_FAMILY: import("../internal/family.cjs").SkdxFamily<SkdxSlider>;

package/dist/slider/family.d.ts

@@ -0,0 +1,3 @@
+import type { SkdxSlider } from './Slider.js';
+/** @internal The broadcast every `<skdx-slider-*>` part re-renders on, and the lookup that finds their root. */
+export declare const SLIDER_FAMILY: import("../internal/family.js").SkdxFamily<SkdxSlider>;

package/dist/slider/family.js

@@ -0,0 +1 @@
+import{defineFamily as e}from"../internal/family.js";var d=e("slider",{selector:"skdx-slider"});export{d as SLIDER_FAMILY};

package/dist/slider/index.cjs

@@ -1 +1 @@
-"use strict";var x=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var t=Object.prototype.hasOwnProperty;var a=(e,r)=>{for(var o in r)x(e,o,{get:r[o],enumerable:!0})},T=(e,r,o,S)=>{if(r&&typeof r=="object"||typeof r=="function")for(let d of p(r))!t.call(e,d)&&d!==o&&x(e,d,{get:()=>r[d],enumerable:!(S=l(r,d))||S.enumerable});return e};var b=e=>T(x({},"__esModule",{value:!0}),e);var c={};a(c,{SkdxSlider:()=>k.SkdxSlider,SkdxSliderRange:()=>f.SkdxSliderRange,SkdxSliderThumb:()=>i.SkdxSliderThumb,SkdxSliderTrack:()=>m.SkdxSliderTrack});module.exports=b(c);var k=require("./Slider.cjs"),m=require("./SliderTrack.cjs"),f=require("./SliderRange.cjs"),i=require("./SliderThumb.cjs");0&&(module.exports={SkdxSlider,SkdxSliderRange,SkdxSliderThumb,SkdxSliderTrack});
+"use strict";var l=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var x=(a,e)=>{for(var d in e)l(a,d,{get:e[d],enumerable:!0})},o=(a,e,d,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of k(e))!p.call(a,r)&&r!==d&&l(a,r,{get:()=>e[r],enumerable:!(t=i(e,r))||t.enumerable});return a};var y=a=>o(l({},"__esModule",{value:!0}),a);var D={};x(D,{SkdxSlider:()=>S.SkdxSlider});module.exports=y(D);var S=require("./Slider.cjs");0&&(module.exports={SkdxSlider});

package/dist/slider/index.d.cts

@@ -1,4 +1 @@
-export { SkdxSlider } from './Slider.cjs';
-export { SkdxSliderTrack } from './SliderTrack.cjs';
-export { SkdxSliderRange } from './SliderRange.cjs';
-export { SkdxSliderThumb } from './SliderThumb.cjs';
+export { SkdxSlider, type SkdxSliderValueChangeDetail, type SliderMarkData } from './Slider.cjs';

package/dist/slider/index.d.ts

@@ -1,4 +1 @@
-export { SkdxSlider } from './Slider.js';
-export { SkdxSliderTrack } from './SliderTrack.js';
-export { SkdxSliderRange } from './SliderRange.js';
-export { SkdxSliderThumb } from './SliderThumb.js';
+export { SkdxSlider, type SkdxSliderValueChangeDetail, type SliderMarkData } from './Slider.js';

package/dist/slider/index.js

@@ -1 +1 @@
-import{SkdxSlider as d}from"./Slider.js";import{SkdxSliderTrack as x}from"./SliderTrack.js";import{SkdxSliderRange as k}from"./SliderRange.js";import{SkdxSliderThumb as f}from"./SliderThumb.js";export{d as SkdxSlider,k as SkdxSliderRange,f as SkdxSliderThumb,x as SkdxSliderTrack};
+import{SkdxSlider as r}from"./Slider.js";export{r as SkdxSlider};

package/dist/slider/primitives.cjs

@@ -0,0 +1 @@
+"use strict";var x=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var t=Object.prototype.hasOwnProperty;var a=(e,r)=>{for(var o in r)x(e,o,{get:r[o],enumerable:!0})},T=(e,r,o,S)=>{if(r&&typeof r=="object"||typeof r=="function")for(let d of p(r))!t.call(e,d)&&d!==o&&x(e,d,{get:()=>r[d],enumerable:!(S=l(r,d))||S.enumerable});return e};var b=e=>T(x({},"__esModule",{value:!0}),e);var c={};a(c,{SkdxSliderMark:()=>i.SkdxSliderMark,SkdxSliderRange:()=>m.SkdxSliderRange,SkdxSliderThumb:()=>f.SkdxSliderThumb,SkdxSliderTrack:()=>k.SkdxSliderTrack});module.exports=b(c);var k=require("./SliderTrack.cjs"),m=require("./SliderRange.cjs"),f=require("./SliderThumb.cjs"),i=require("./SliderMark.cjs");0&&(module.exports={SkdxSliderMark,SkdxSliderRange,SkdxSliderThumb,SkdxSliderTrack});

package/dist/slider/primitives.d.cts

@@ -0,0 +1,21 @@
+/**
+ * Advanced primitives for `<skdx-slider>` — the parts the recipe composes.
+ *
+ * @example
+ * ```ts
+ * import * as Slider from '@skdx/web-components/primitives/slider';
+ * ```
+ * ```html
+ * <skdx-slider value="[25,75]" aria-label="Price range">
+ *   <skdx-slider-track>
+ *     <skdx-slider-range></skdx-slider-range>
+ *   </skdx-slider-track>
+ *   <skdx-slider-thumb index="0" aria-label="Minimum"></skdx-slider-thumb>
+ *   <skdx-slider-thumb index="1" aria-label="Maximum"></skdx-slider-thumb>
+ * </skdx-slider>
+ * ```
+ */
+export { SkdxSliderTrack } from './SliderTrack.cjs';
+export { SkdxSliderRange } from './SliderRange.cjs';
+export { SkdxSliderThumb } from './SliderThumb.cjs';
+export { SkdxSliderMark } from './SliderMark.cjs';

package/dist/slider/primitives.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Advanced primitives for `<skdx-slider>` — the parts the recipe composes.
+ *
+ * @example
+ * ```ts
+ * import * as Slider from '@skdx/web-components/primitives/slider';
+ * ```
+ * ```html
+ * <skdx-slider value="[25,75]" aria-label="Price range">
+ *   <skdx-slider-track>
+ *     <skdx-slider-range></skdx-slider-range>
+ *   </skdx-slider-track>
+ *   <skdx-slider-thumb index="0" aria-label="Minimum"></skdx-slider-thumb>
+ *   <skdx-slider-thumb index="1" aria-label="Maximum"></skdx-slider-thumb>
+ * </skdx-slider>
+ * ```
+ */
+export { SkdxSliderTrack } from './SliderTrack.js';
+export { SkdxSliderRange } from './SliderRange.js';
+export { SkdxSliderThumb } from './SliderThumb.js';
+export { SkdxSliderMark } from './SliderMark.js';

package/dist/slider/primitives.js

@@ -0,0 +1 @@
+import{SkdxSliderTrack as d}from"./SliderTrack.js";import{SkdxSliderRange as x}from"./SliderRange.js";import{SkdxSliderThumb as k}from"./SliderThumb.js";import{SkdxSliderMark as f}from"./SliderMark.js";export{f as SkdxSliderMark,x as SkdxSliderRange,k as SkdxSliderThumb,d as SkdxSliderTrack};