@skdx/web-components 0.26.0 → 0.28.0

package/dist/slider/SliderAnatomy.js

@@ -0,0 +1,14 @@
+import{html as i,render as s}from"lit";import{repeat as d}from"lit/directives/repeat.js";import{isDevMode as r}from"../utils/is-dev-mode.js";import"./SliderMark.js";import"./SliderRange.js";import"./SliderThumb.js";import"./SliderTrack.js";var b="data-skdx-slider-generated";function p(e){r()&&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"]).`),s(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=${e.thumbLabels?.[a]??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{b as SLIDER_ANATOMY_GENERATED,p as fillSliderAnatomy};

package/dist/slider/SliderMark.cjs

@@ -0,0 +1,6 @@
+"use strict";var a=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var b=(s,e)=>{for(var t in e)a(s,t,{get:e[t],enumerable:!0})},y=(s,e,t,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of u(e))!v.call(s,i)&&i!==t&&a(s,i,{get:()=>e[i],enumerable:!(r=c(e,i))||r.enumerable});return s};var k=s=>y(a({},"__esModule",{value:!0}),s),h=(s,e,t,r)=>{for(var i=r>1?void 0:r?c(e,t):e,d=s.length-1,l;d>=0;d--)(l=s[d])&&(i=(r?l(e,t,i):l(i))||i);return r&&i&&a(e,t,i),i};var f={};b(f,{SkdxSliderMark:()=>o});module.exports=k(f);var n=require("lit"),m=require("lit/decorators.js"),p=require("../internal/define.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=this.closest("skdx-slider"),!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("skdx-slider-internal-update",this.onRootUpdate),this.sync()}disconnectedCallback(){this.observer.disconnect(),this.root?.removeEventListener("skdx-slider-internal-update",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 r=(this.value-t.min)/(t.max-t.min)*100;t.orientation==="horizontal"?(this.style.setProperty("inset-inline-start",`${r}%`),this.style.bottom=""):(this.style.bottom=`${r}%`,this.style.removeProperty("inset-inline-start"))}render(){return n.html`<slot></slot>`}};o.styles=n.css`
+    :host {
+      display: block;
+      position: absolute;
+    }
+  `,h([(0,m.property)({type:Number})],o.prototype,"value",2),o=h([(0,p.customElement)("skdx-slider-mark","slider","mark")],o);0&&(module.exports={SkdxSliderMark});

package/dist/slider/SliderMark.d.cts

@@ -0,0 +1,46 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-slider-mark>` — an optional tick at a declared `value` along a
+ * `<skdx-slider>`'s track. Positions itself with the same logical inset
+ * `<skdx-slider-thumb>` uses, so a mark sits under its value in both
+ * writing directions; its slotted content is the label, the tick drawn by
+ * the skin's `::before`.
+ *
+ * `aria-hidden`, like `<skdx-angle-slider-mark>`: a mark redraws the scale
+ * the thumb already reports via `aria-valuemin`/`aria-valuemax`. Must be
+ * used inside `<skdx-slider>`.
+ *
+ * @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;
+    /**
+     * `min`/`max` are reflected attributes; `orientation` changes arrive via
+     * the root's broadcast (cheaper than observing).
+     */
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private sync;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-slider-mark': SkdxSliderMark;
+    }
+}

package/dist/slider/SliderMark.d.ts

@@ -0,0 +1,46 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-slider-mark>` — an optional tick at a declared `value` along a
+ * `<skdx-slider>`'s track. Positions itself with the same logical inset
+ * `<skdx-slider-thumb>` uses, so a mark sits under its value in both
+ * writing directions; its slotted content is the label, the tick drawn by
+ * the skin's `::before`.
+ *
+ * `aria-hidden`, like `<skdx-angle-slider-mark>`: a mark redraws the scale
+ * the thumb already reports via `aria-valuemin`/`aria-valuemax`. Must be
+ * used inside `<skdx-slider>`.
+ *
+ * @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;
+    /**
+     * `min`/`max` are reflected attributes; `orientation` changes arrive via
+     * the root's broadcast (cheaper than observing).
+     */
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private sync;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-slider-mark': SkdxSliderMark;
+    }
+}

package/dist/slider/SliderMark.js

@@ -0,0 +1,6 @@
+var l=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var d=(o,r,t,e)=>{for(var i=e>1?void 0:e?h(r,t):r,n=o.length-1,a;n>=0;n--)(a=o[n])&&(i=(e?a(r,t,i):a(i))||i);return e&&i&&l(r,t,i),i};import{css as c,html as m,LitElement as p}from"lit";import{property as u}from"lit/decorators.js";import{customElement as v}from"../internal/define.js";var s=class extends p{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=this.closest("skdx-slider"),!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("skdx-slider-internal-update",this.onRootUpdate),this.sync()}disconnectedCallback(){this.observer.disconnect(),this.root?.removeEventListener("skdx-slider-internal-update",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 m`<slot></slot>`}};s.styles=c`
+    :host {
+      display: block;
+      position: absolute;
+    }
+  `,d([u({type:Number})],s.prototype,"value",2),s=d([v("skdx-slider-mark","slider","mark")],s);export{s 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 m=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var b=(r,s)=>{for(var t in s)d(r,t,{get:s[t],enumerable:!0})},y=(r,s,t,i)=>{if(s&&typeof s=="object"||typeof s=="function")for(let e of m(s))!v.call(r,e)&&e!==t&&d(r,e,{get:()=>s[e],enumerable:!(i=h(s,e))||i.enumerable});return r};var u=r=>y(d({},"__esModule",{value:!0}),r),c=(r,s,t,i)=>{for(var e=i>1?void 0:i?h(s,t):s,o=r.length-1,l;o>=0;o--)(l=r[o])&&(e=(i?l(s,t,e):l(e))||e);return i&&e&&d(s,t,e),e};var k={};b(k,{SkdxSliderRange:()=>n});module.exports=u(k);var a=require("lit"),p=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 i=t.value.map(l=>(l-t.min)/(t.max-t.min)*100),e=t.value.length>1?Math.min(...i):0,o=100-Math.max(...i,0);t.orientation==="horizontal"?(this.style.setProperty("inset-inline-start",`${e}%`),this.style.setProperty("inset-inline-end",`${o}%`),this.style.removeProperty("bottom"),this.style.removeProperty("top")):(this.style.bottom=`${e}%`,this.style.top=`${o}%`,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=c([(0,p.customElement)("skdx-slider-range","slider","range")],n);0&&(module.exports={SkdxSliderRange});

package/dist/slider/SliderRange.d.cts

@@ -1,11 +1,9 @@
 import { LitElement } 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>` — the filled portion of a `<skdx-slider-track>`,
+ * spanning from the lowest to highest selected value. Positions itself with
+ * `inset-inline-start`/`inset-inline-end` (logical, rtl-aware) or `bottom`/`top`
+ * (physical) percentages from the ancestor `<skdx-slider>`'s values.
  *
  * @csspart range - The host's shadow-root wrapper.
  */

package/dist/slider/SliderRange.d.ts

@@ -1,11 +1,9 @@
 import { LitElement } 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>` — the filled portion of a `<skdx-slider-track>`,
+ * spanning from the lowest to highest selected value. Positions itself with
+ * `inset-inline-start`/`inset-inline-end` (logical, rtl-aware) or `bottom`/`top`
+ * (physical) percentages from the ancestor `<skdx-slider>`'s values.
  *
  * @csspart range - The host's shadow-root wrapper.
  */

package/dist/slider/SliderRange.js

@@ -1,4 +1,4 @@
-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 d=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var l=(a,i,t,s)=>{for(var e=s>1?void 0:s?h(i,t):i,r=a.length-1,o;r>=0;r--)(o=a[r])&&(e=(s?o(i,t,e):o(e))||e);return s&&e&&d(i,t,e),e};import{css as c,html as p,LitElement as m}from"lit";import{customElement as v}from"../internal/define.js";var n=class extends m{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 s=t.value.map(o=>(o-t.min)/(t.max-t.min)*100),e=t.value.length>1?Math.min(...s):0,r=100-Math.max(...s,0);t.orientation==="horizontal"?(this.style.setProperty("inset-inline-start",`${e}%`),this.style.setProperty("inset-inline-end",`${r}%`),this.style.removeProperty("bottom"),this.style.removeProperty("top")):(this.style.bottom=`${e}%`,this.style.top=`${r}%`,this.style.removeProperty("inset-inline-start"),this.style.removeProperty("inset-inline-end"))}render(){return p`<slot part="range"></slot>`}};n.styles=c`
     :host {
       display: block;
       position: absolute;

package/dist/slider/SliderThumb.cjs

@@ -1,6 +1,9 @@
-"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 b=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var A=(s,r)=>{for(var t in r)b(s,t,{get:r[t],enumerable:!0})},w=(s,r,t,e)=>{if(r&&typeof r=="object"||typeof r=="function")for(let i of f(r))!g.call(s,i)&&i!==t&&b(s,i,{get:()=>r[i],enumerable:!(e=c(r,i))||e.enumerable});return s};var k=s=>w(b({},"__esModule",{value:!0}),s),l=(s,r,t,e)=>{for(var i=e>1?void 0:e?c(r,t):r,n=s.length-1,d;n>=0;n--)(d=s[n])&&(i=(e?d(r,t,i):d(i))||i);return e&&i&&b(r,t,i),i};var E={};A(E,{SkdxSliderThumb:()=>o});module.exports=k(E);var a=require("lit"),p=require("lit/decorators.js"),y=require("../internal/define.cjs"),x=require("../internal/direction.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=t=>{let e=this.root;if(!e||e.disabled)return;let{step:i,min:n,max:d}=e,v=e.resolvedLargeStep,h=t.shiftKey?v:i,m={ArrowRight:h,ArrowUp:h,ArrowLeft:-h,ArrowDown:-h,PageUp:v,PageDown:-v},u=(0,x.directionalKey)(t.key,this,e.direction);u in m?(t.preventDefault(),e.updateValue(this.thumbIndex,this.value+m[u],"keyboard")):u==="Home"?(t.preventDefault(),e.updateValue(this.thumbIndex,n,"keyboard")):u==="End"&&(t.preventDefault(),e.updateValue(this.thumbIndex,d,"keyboard"))}}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 e=this.value,i=(e-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(e)),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",`${i}%`),this.style.bottom="",this.style.transform=t.direction==="rtl"?"translateX(50%)":"translateX(-50%)"):(this.style.bottom=`${i}%`,this.style.removeProperty("inset-inline-start"),this.style.transform="translateY(50%)"),this.requestUpdate()}updated(t){(t.has("valueText")||t.has("index")||t.has("showTooltip"))&&this.sync()}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});
+  `,l([(0,p.property)({type:Number})],o.prototype,"index",2),l([(0,p.property)({type:String,attribute:"value-text"})],o.prototype,"valueText",2),l([(0,p.property)({type:Boolean,reflect:!0,attribute:"show-tooltip"})],o.prototype,"showTooltip",2),o=l([(0,y.customElement)("skdx-slider-thumb","slider","thumb")],o);0&&(module.exports={SkdxSliderThumb});

package/dist/slider/SliderThumb.d.cts

@@ -1,21 +1,14 @@
 import { LitElement } 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>` — draggable handle on `<skdx-slider>`, positioned by `index` or render order.
+ * `role="slider"` with `aria-valuemin/max/now/orientation/disabled` on host.
+ * Arrow keys step by `step`, PageUp/Down by 1/10th of range, Home/End to min/max.
+ * `showTooltip` renders a `part="tooltip"` with formatted value.
  * @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 +17,22 @@ 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`. Supply it when the raw number is not what the user is
+     * choosing — `"Medium"` for a size scale, `"£20"` for a price — and a screen
+     * reader announces that instead of the bare `aria-valuenow`.
+     * @default undefined
+     */
+    valueText?: string;
+    /**
+     * Renders a `part="tooltip"` element with this thumb's formatted value.
+     * @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,6 +41,12 @@ export declare class SkdxSliderThumb extends LitElement {
     private get value();
     private sync;
     private readonly handleKeydown;
+    /**
+     * The root's broadcast covers everything the *root* owns; a consumer
+     * assigning this thumb's own `valueText` or `index` after first render is
+     * the one path it cannot see.
+     */
+    protected updated(changed: Map<string, unknown>): void;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

package/dist/slider/SliderThumb.d.ts

@@ -1,21 +1,14 @@
 import { LitElement } 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>` — draggable handle on `<skdx-slider>`, positioned by `index` or render order.
+ * `role="slider"` with `aria-valuemin/max/now/orientation/disabled` on host.
+ * Arrow keys step by `step`, PageUp/Down by 1/10th of range, Home/End to min/max.
+ * `showTooltip` renders a `part="tooltip"` with formatted value.
  * @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 +17,22 @@ 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`. Supply it when the raw number is not what the user is
+     * choosing — `"Medium"` for a size scale, `"£20"` for a price — and a screen
+     * reader announces that instead of the bare `aria-valuenow`.
+     * @default undefined
+     */
+    valueText?: string;
+    /**
+     * Renders a `part="tooltip"` element with this thumb's formatted value.
+     * @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,6 +41,12 @@ export declare class SkdxSliderThumb extends LitElement {
     private get value();
     private sync;
     private readonly handleKeydown;
+    /**
+     * The root's broadcast covers everything the *root* owns; a consumer
+     * assigning this thumb's own `valueText` or `index` after first render is
+     * the one path it cannot see.
+     */
+    protected updated(changed: Map<string, unknown>): void;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

package/dist/slider/SliderThumb.js

@@ -1,6 +1,9 @@
-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 m=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var n=(h,s,t,e)=>{for(var i=e>1?void 0:e?c(s,t):s,o=h.length-1,a;o>=0;o--)(a=h[o])&&(i=(e?a(s,t,i):a(i))||i);return e&&i&&m(s,t,i),i};import{css as y,html as v,LitElement as x,nothing as f}from"lit";import{property as b}from"lit/decorators.js";import{customElement as g}from"../internal/define.js";import{directionalKey as A}from"../internal/direction.js";var r=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=t=>{let e=this.root;if(!e||e.disabled)return;let{step:i,min:o,max:a}=e,u=e.resolvedLargeStep,d=t.shiftKey?u:i,p={ArrowRight:d,ArrowUp:d,ArrowLeft:-d,ArrowDown:-d,PageUp:u,PageDown:-u},l=A(t.key,this,e.direction);l in p?(t.preventDefault(),e.updateValue(this.thumbIndex,this.value+p[l],"keyboard")):l==="Home"?(t.preventDefault(),e.updateValue(this.thumbIndex,o,"keyboard")):l==="End"&&(t.preventDefault(),e.updateValue(this.thumbIndex,a,"keyboard"))}}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 e=this.value,i=(e-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(e)),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",`${i}%`),this.style.bottom="",this.style.transform=t.direction==="rtl"?"translateX(50%)":"translateX(-50%)"):(this.style.bottom=`${i}%`,this.style.removeProperty("inset-inline-start"),this.style.transform="translateY(50%)"),this.requestUpdate()}updated(t){(t.has("valueText")||t.has("index")||t.has("showTooltip"))&&this.sync()}render(){return v`
+      <slot></slot>
+      ${this.showTooltip?v`<span part="tooltip" aria-hidden="true">${this.valueText??this.value}</span>`:f}
+    `}};r.styles=y`
     :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([b({type:Number})],r.prototype,"index",2),n([b({type:String,attribute:"value-text"})],r.prototype,"valueText",2),n([b({type:Boolean,reflect:!0,attribute:"show-tooltip"})],r.prototype,"showTooltip",2),r=n([g("skdx-slider-thumb","slider","thumb")],r);export{r as SkdxSliderThumb};

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,22 @@
+/**
+ * Advanced primitives for `<skdx-slider>` — the parts the recipe composes.
+ * Reach for these when the derived anatomy is not the structure you need.
+ *
+ * @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,22 @@
+/**
+ * Advanced primitives for `<skdx-slider>` — the parts the recipe composes.
+ * Reach for these when the derived anatomy is not the structure you need.
+ *
+ * @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};

package/dist/speed-dial/SpeedDial.cjs

@@ -1,5 +1,5 @@
-"use strict";var p=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var T=Object.prototype.hasOwnProperty;var b=(r,t)=>{for(var e in t)p(r,e,{get:t[e],enumerable:!0})},g=(r,t,e,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of C(t))!T.call(r,o)&&o!==e&&p(r,o,{get:()=>t[o],enumerable:!(n=h(t,o))||n.enumerable});return r};var E=r=>g(p({},"__esModule",{value:!0}),r),s=(r,t,e,n)=>{for(var o=n>1?void 0:n?h(t,e):t,d=r.length-1,c;d>=0;d--)(c=r[d])&&(o=(n?c(t,e,o):c(o))||o);return n&&o&&p(t,e,o),o};var N={};b(N,{ANY_ITEM_SELECTOR:()=>y,DIRECTION_ORIENTATION:()=>w,DIRECTION_SIDE:()=>I,ITEM_SELECTOR:()=>O,SkdxSpeedDial:()=>i});module.exports=E(N);var a=require("lit"),l=require("lit/decorators.js"),m=require("../internal/define.cjs"),u=require("../internal/ids.cjs"),f=require("../internal/open-change-complete.cjs"),v=require("../internal/styles.cjs");var y='[role="menuitem"]',O='[role="menuitem"]:not([data-disabled])',I={up:"top",down:"bottom",left:"left",right:"right"},w={up:"vertical",down:"vertical",left:"horizontal",right:"horizontal"},i=class extends a.LitElement{constructor(){super(...arguments);this.open=!1;this.defaultOpen=!1;this.direction="up";this.openOnHover=!1;this.hoverCloseDelay=300;this.disabled=!1;this.contentId=(0,u.nextId)("skdx-speed-dial-content");this.triggerEl=null;this.hasUpdatedOnce=!1}connectedCallback(){super.connectedCallback(),this.defaultOpen&&!this.hasAttribute("open")&&(this.open=!0)}disconnectedCallback(){clearTimeout(this.closeTimer),this.teardownOpenChangeComplete?.(),super.disconnectedCallback()}updated(e){let n=!this.hasUpdatedOnce;this.hasUpdatedOnce=!0,this.toggleAttribute("data-disabled",this.disabled),e.has("open")&&!n&&this.dispatchEvent(new CustomEvent("open-change",{detail:this.open,bubbles:!0,composed:!0})),e.size>0&&this.dispatchEvent(new CustomEvent("skdx-speed-dial-internal-update")),e.has("open")&&!n&&(this.teardownOpenChangeComplete?.(),this.teardownOpenChangeComplete=(0,f.notifyOpenChangeComplete)(()=>this.querySelector("skdx-speed-dial-content"),this.open,o=>this.dispatchEvent(new CustomEvent("open-change-complete",{detail:o,bubbles:!0,composed:!0}))))}setOpen(e){clearTimeout(this.closeTimer),!(e&&this.disabled)&&this.open!==e&&(this.open=e)}cancelHoverClose(){clearTimeout(this.closeTimer)}scheduleHoverClose(){clearTimeout(this.closeTimer),this.closeTimer=setTimeout(()=>{this.open=!1},this.hoverCloseDelay)}focusTrigger(){this.triggerEl?.focus()}render(){return a.html`<slot></slot>`}};i.styles=[v.hiddenHostStyles,a.css`
+"use strict";var d=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var E=(r,o)=>{for(var e in o)d(r,e,{get:o[e],enumerable:!0})},O=(r,o,e,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let t of b(o))!g.call(r,t)&&t!==e&&d(r,t,{get:()=>o[t],enumerable:!(n=u(o,t))||n.enumerable});return r};var C=r=>O(d({},"__esModule",{value:!0}),r),s=(r,o,e,n)=>{for(var t=n>1?void 0:n?u(o,e):o,l=r.length-1,c;l>=0;l--)(c=r[l])&&(t=(n?c(o,e,t):c(t))||t);return n&&t&&d(o,e,t),t};var _={};E(_,{ANY_ITEM_SELECTOR:()=>A,DIRECTION_ORIENTATION:()=>D,DIRECTION_SIDE:()=>R,ITEM_SELECTOR:()=>I,SkdxSpeedDial:()=>i});module.exports=C(_);var p=require("lit"),a=require("lit/decorators.js"),f=require("../internal/authored.cjs"),v=require("../internal/define.cjs"),m=require("../internal/ids.cjs"),y=require("../internal/open-change-complete.cjs"),T=require("../internal/styles.cjs"),h=require("./SpeedDialAnatomy.cjs"),N=require("./SpeedDialPortal.cjs");var A='[role="menuitem"]',I='[role="menuitem"]:not([data-disabled])',R={up:"top",down:"bottom",left:"left",right:"right"},D={up:"vertical",down:"vertical",left:"horizontal",right:"horizontal"},i=class extends p.LitElement{constructor(){super(...arguments);this.open=!1;this.defaultOpen=!1;this.direction="up";this.openOnHover=!1;this.hoverCloseDelay=300;this.hoverOpenDelay=0;this.disabled=!1;this.overlay=!1;this.contentId=(0,m.nextId)("skdx-speed-dial-content");this.triggerId=(0,m.nextId)("skdx-speed-dial-trigger");this.openReason={current:"programmatic"};this.triggerEl=null;this.contentEl=null;this.hasUpdatedOnce=!1;this.fillAnatomy=()=>{this.actions===this._anatomyActionsRef&&this.overlay===this._anatomyOverlay&&(0,f.hasGeneratedContent)(this,h.SPEED_DIAL_ANATOMY_GENERATED)||(this._anatomyActionsRef=this.actions,this._anatomyOverlay=this.overlay,(0,h.fillSpeedDialAnatomy)(this))}}connectedCallback(){super.connectedCallback(),this.defaultOpen&&!this.hasAttribute("open")&&(this.open=!0);let e=this.querySelector("skdx-speed-dial-content")?.id;e&&(this.contentId=e),queueMicrotask(this.fillAnatomy)}disconnectedCallback(){clearTimeout(this.closeTimer),clearTimeout(this.openTimer),this.teardownOpenChangeComplete?.(),super.disconnectedCallback()}updated(e){this.fillAnatomy();let n=!this.hasUpdatedOnce;if(this.hasUpdatedOnce=!0,this.toggleAttribute("data-disabled",this.disabled),e.has("disabled")&&this.disabled&&this.open){let t=this.contentEl,l=document.activeElement,c=!!l&&t?.contains(l)===!0;this.setOpen(!1),c&&this.focusTrigger()}e.has("open")&&!n&&this.dispatchEvent(new CustomEvent("open-change",{detail:this.open,bubbles:!0,composed:!0})),e.size>0&&this.dispatchEvent(new CustomEvent("skdx-speed-dial-internal-update")),e.has("open")&&!n&&(this.teardownOpenChangeComplete?.(),this.teardownOpenChangeComplete=(0,y.notifyOpenChangeComplete)(()=>this.contentEl,this.open,t=>this.dispatchEvent(new CustomEvent("open-change-complete",{detail:t,bubbles:!0,composed:!0}))))}setOpen(e,n="programmatic"){clearTimeout(this.closeTimer),clearTimeout(this.openTimer),!(e&&this.disabled)&&this.open!==e&&(this.openReason.current=n,this.open=e)}cancelHoverClose(){clearTimeout(this.closeTimer)}hoverOpen(){if(clearTimeout(this.closeTimer),clearTimeout(this.openTimer),this.hoverOpenDelay<=0){this.setOpen(!0,"hover");return}this.openTimer=setTimeout(()=>this.setOpen(!0,"hover"),this.hoverOpenDelay)}scheduleHoverClose(){clearTimeout(this.closeTimer),clearTimeout(this.openTimer),this.closeTimer=setTimeout(()=>{this.open=!1},this.hoverCloseDelay)}focusTrigger(){this.triggerEl?.focus()}render(){return p.html`<slot @slotchange=${this.fillAnatomy}></slot>`}};i.styles=[T.hiddenHostStyles,p.css`
       :host {
         display: contents;
       }
-    `],s([(0,l.property)({type:Boolean,reflect:!0})],i.prototype,"open",2),s([(0,l.property)({type:Boolean,attribute:"default-open"})],i.prototype,"defaultOpen",2),s([(0,l.property)({type:String,reflect:!0})],i.prototype,"direction",2),s([(0,l.property)({type:Boolean,attribute:"open-on-hover"})],i.prototype,"openOnHover",2),s([(0,l.property)({type:Number,attribute:"hover-close-delay"})],i.prototype,"hoverCloseDelay",2),s([(0,l.property)({type:Boolean,reflect:!0})],i.prototype,"disabled",2),i=s([(0,m.customElement)("skdx-speed-dial")],i);0&&(module.exports={ANY_ITEM_SELECTOR,DIRECTION_ORIENTATION,DIRECTION_SIDE,ITEM_SELECTOR,SkdxSpeedDial});
+    `],s([(0,a.property)({type:Boolean,reflect:!0})],i.prototype,"open",2),s([(0,a.property)({type:Boolean,attribute:"default-open"})],i.prototype,"defaultOpen",2),s([(0,a.property)({type:String,reflect:!0})],i.prototype,"direction",2),s([(0,a.property)({type:Boolean,attribute:"open-on-hover"})],i.prototype,"openOnHover",2),s([(0,a.property)({type:Number,attribute:"hover-close-delay"})],i.prototype,"hoverCloseDelay",2),s([(0,a.property)({type:Number,attribute:"hover-open-delay"})],i.prototype,"hoverOpenDelay",2),s([(0,a.property)({type:Boolean,reflect:!0})],i.prototype,"disabled",2),s([(0,a.property)({attribute:!1})],i.prototype,"actions",2),s([(0,a.property)({type:Boolean})],i.prototype,"overlay",2),i=s([(0,v.customElement)("skdx-speed-dial")],i);0&&(module.exports={ANY_ITEM_SELECTOR,DIRECTION_ORIENTATION,DIRECTION_SIDE,ITEM_SELECTOR,SkdxSpeedDial});