@skdx/web-components 0.27.0 → 0.28.0

package/dist/skip-link/SkipLink.d.ts

@@ -1,17 +1,9 @@
 import { LitElement } from 'lit';
 /**
- * `<skdx-skip-link>` — the Web Components implementation of the shared SkipLink
- * contract (see `@skdx/shared`'s `skipLinkContract`). The WCAG 2.4.1
- * bypass-block link: place it as the first focusable element on the page so a
- * keyboard or screen-reader user can Tab once and jump straight past repeated
- * navigation.
- *
- * It is clipped out of sight until focused and revealed while focused
- * (`data-state="hidden" | "visible"` on the `link` part), and on activation it
- * programmatically focuses `target-id` — see `#focusTarget` for why that
- * matters. The host carries the box (it is `position: absolute` in both states,
- * so revealing the link never reflows the page); see `static styles` for why it
- * is not `display: contents`.
+ * WCAG 2.4.1 bypass link: first focusable element on the page; Tab once to jump
+ * past repeated navigation. Clipped hidden until focused (data-state="hidden"|"visible"),
+ * then programmatically focuses the target. Host carries box (position: absolute),
+ * so reveal never reflows the page.
  *
  * @example
  * ```html
@@ -20,41 +12,14 @@ import { LitElement } from 'lit';
  * <main id="main-content">…</main>
  * ```
  *
- * @csspart link - The anchor itself, carrying the href and the data-state hook.
+ * @csspart link - The anchor carrying href and data-state hook.
  */
 export declare class SkdxSkipLink extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     /**
-     * The box lives on the host, and as an *inline* style.
-     *
-     * Two constraints, and only this placement satisfies both.
-     *
-     * It must be on the host, because the skin paints `.skdx-skip-link` there —
-     * position and clip at rest, and on focus the padding, fill, radius and shadow
-     * (`skins/src/components/skip-link.css:11-46`). This is the one root in the
-     * package whose skin rule sets no `display` of its own, so unlike
-     * `.skdx-command` and `.skdx-timeline` the outer tree never overrides a boxless
-     * host. Under `display: contents` every non-inherited declaration was dropped
-     * and the revealed link rendered as bare primary-coloured text on whatever sat
-     * at page top-left: measured `[0,0]` against React's `[1,1]` in
-     * `parity.spec.ts`.
-     *
-     * It must be inline, because a `:host` rule reaches this element only through
-     * Lit's adopted stylesheet — and an adopted stylesheet is exactly what does
-     * not always apply. Measured, not assumed: under happy-dom
-     * `getComputedStyle(host).position` reads `static` and `.width` reads `auto`
-     * with the `:host` rules in place, so a CSS-only hiding is invisible to every
-     * unit test in this package and `assertSkipLinkContract` could not see it at
-     * all. An earlier revision of this file moved the hiding into `:host` and
-     * recorded losing that robustness as a deliberate trade; it was not a good
-     * one, and three tests said so.
-     *
-     * So: the same two style objects React applies to its `<a>`
-     * (`react/src/skip-link/SkipLink.tsx:12-25`), applied here to the host, which
-     * is this framework's classed root. Same properties, same values, same
-     * cascade weight — a consumer's own rule still loses to both, identically.
-     * The skin's padding/fill/radius/shadow are untouched by them and still paint.
+     * Box on host as inline style. Must be on host (skin paints here) and inline
+     * (adopted stylesheet may not apply). Matches React's <a> styles for parity.
      */
     static styles: import("lit").CSSResult[];
     /** The id of the element to jump to, usually the page's main landmark. */
@@ -62,30 +27,15 @@ export declare class SkdxSkipLink extends LitElement {
     /** Whether the link currently holds focus, and is therefore on screen. */
     private visible;
     protected willUpdate(): void;
-    /**
-     * Reaches through to the `<a>`, which is where focus — and therefore the
-     * reveal — actually lives.
-     *
-     * In the light-DOM frameworks the classed element *is* the anchor, so
-     * `skipLinkEl.focus()` brings it on screen. Here the class sits on a host
-     * that takes no focus of its own, so the same call did nothing and the
-     * reveal was unreachable programmatically —
-     * `delegatesFocus` alone does not cover it in every engine. Same pattern as
-     * `<skdx-combobox-input>` and the other host-wraps-a-control parts.
-     */
+    /** Focus the shadow <a> (host takes no focus). delegatesFocus alone insufficient. */
     focus(options?: FocusOptions): void;
     /**
-     * Moves focus to the target, making it focusable first if it isn't already.
-     *
-     * Without this, a bare `<a href="#main">` only changes the URL hash:
-     * `<main>` is not focusable, so in several browser + screen-reader
-     * combinations focus stays on the link and the next Tab lands back in the
-     * header — the bypass silently fails. The `tabindex` is only added when the
-     * target has none of its own (never clobber an author's value) and is
-     * removed again on the target's next blur, so the DOM is left exactly as it
-     * was found.
+     * Move focus to target, making it focusable if needed. Without this, unfocusable
+     * targets like <main> leave focus on the link; bypass silently fails in many
+     * screen-reader combos. Add tabindex -1 only if target lacks one; remove on blur.
      */
     private focusTarget;
+    protected firstUpdated(): void;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

package/dist/skip-link/SkipLink.js

@@ -1,4 +1,4 @@
-var m=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var c=o=>{throw TypeError(o)};var a=(o,e,t,s)=>{for(var r=s>1?void 0:s?b(e,t):e,n=o.length-1,d;n>=0;n--)(d=o[n])&&(r=(s?d(e,t,r):d(r))||r);return s&&r&&m(e,t,r),r};var g=(o,e,t)=>e.has(o)||c("Cannot "+t);var u=(o,e,t)=>e.has(o)?c("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(o):e.set(o,t);var p=(o,e,t)=>(g(o,e,"access private method"),t);import{html as y,LitElement as E}from"lit";import{property as w,state as I}from"lit/decorators.js";import{customElement as x}from"../internal/define.js";import{controlBoxOnHost as T,delegatesFocusShadowRootOptions as A,hiddenHostStyles as R}from"../internal/styles.js";var f=[["position","absolute"],["width","1px"],["height","1px"],["overflow","hidden"],["clip","rect(0, 0, 0, 0)"],["white-space","nowrap"]],h=[["position","absolute"],["top","0"],["left","0"],["z-index","999"]],l,v,i=class extends E{constructor(){super(...arguments);u(this,l);this.targetId="";this.visible=!1}willUpdate(){p(this,l,v).call(this)}focus(t){this.shadowRoot?.querySelector("a")?.focus(t)}focusTarget(){let t=document.getElementById(this.targetId);t&&(t.hasAttribute("tabindex")||(t.setAttribute("tabindex","-1"),t.addEventListener("blur",()=>t.removeAttribute("tabindex"),{once:!0})),t.focus())}render(){return y`<a
+var b=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var c=i=>{throw TypeError(i)};var n=(i,e,t,o)=>{for(var s=o>1?void 0:o?y(e,t):e,l=i.length-1,d;l>=0;l--)(d=i[l])&&(s=(o?d(e,t,s):d(s))||s);return o&&s&&b(e,t,s),s};var w=(i,e,t)=>e.has(i)||c("Cannot "+t);var p=(i,e,t)=>e.has(i)?c("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(i):e.set(i,t);var h=(i,e,t)=>(w(i,e,"access private method"),t);import{html as E,LitElement as I}from"lit";import{property as T,state as A}from"lit/decorators.js";import{customElement as N}from"../internal/define.js";import{controlBoxOnHost as O,delegatesFocusShadowRootOptions as R,hiddenHostStyles as $}from"../internal/styles.js";import{TABBABLE_SELECTOR as x}from"../internal/tabbable.js";import{isDevMode as f}from"../utils/is-dev-mode.js";var m=[["position","absolute"],["width","1px"],["height","1px"],["overflow","hidden"],["clip-path","inset(50%)"],["white-space","nowrap"]],u=[["position","absolute"]],a,v,g,r=class extends I{constructor(){super(...arguments);p(this,a);this.targetId="";this.visible=!1}willUpdate(){h(this,a,v).call(this)}focus(t){this.shadowRoot?.querySelector("a")?.focus(t)}focusTarget(){let t=document.getElementById(this.targetId);if(!t){f()&&console.warn(`[skdx] SkipLink: no element with id "${this.targetId}" was found, so the bypass did nothing. The hash still changed and the page may still have scrolled, which is why this failure is invisible without this warning. Give the page's main landmark id="${this.targetId}".`);return}t.hasAttribute("tabindex")||(t.setAttribute("tabindex","-1"),t.addEventListener("blur",()=>t.removeAttribute("tabindex"),{once:!0})),t.focus()}firstUpdated(){h(this,a,g).call(this)}render(){return E`<a
       part="link"
       href="#${this.targetId}"
       data-state=${this.visible?"visible":"hidden"}
@@ -6,4 +6,4 @@ var m=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var c=o=>{thro
       @focus=${()=>{this.visible=!0}}
       @blur=${()=>{this.visible=!1}}
       ><slot></slot
-    ></a>`}};l=new WeakSet,v=function(){let t=this.style;for(let[s]of[...f,...h])t.removeProperty(s);for(let[s,r]of this.visible?h:f)t.setProperty(s,r)},i.shadowRootOptions=A,i.styles=[R,T],a([w({type:String,attribute:"target-id",reflect:!0})],i.prototype,"targetId",2),a([I()],i.prototype,"visible",2),i=a([x("skdx-skip-link","skip-link","root")],i);export{i as SkdxSkipLink};
+    ></a>`}};a=new WeakSet,v=function(){let t=this.style;for(let[o]of[...m,...u])t.removeProperty(o);for(let[o,s]of this.visible?u:m)t.setProperty(o,s)},g=function(){let t=Array.from(document.querySelectorAll(x)).find(o=>o!==this&&!this.contains(o)&&(this.compareDocumentPosition(o)&Node.DOCUMENT_POSITION_PRECEDING)!==0);t&&f()&&console.warn(`[skdx] SkipLink: a focusable <${t.tagName.toLowerCase()}> precedes this skip link in the document, so it is not the first tab stop and does not bypass anything. Render the SkipLink as early as possible in <body>.`)},r.shadowRootOptions=R,r.styles=[$,O],n([T({type:String,attribute:"target-id",reflect:!0})],r.prototype,"targetId",2),n([A()],r.prototype,"visible",2),r=n([N("skdx-skip-link","skip-link","root")],r);export{r as SkdxSkipLink};

package/dist/slider/Slider.cjs

@@ -1,7 +1,7 @@
-"use strict";var d=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var P=(r,n)=>{for(var t in n)d(r,t,{get:n[t],enumerable:!0})},y=(r,n,t,e)=>{if(n&&typeof n=="object"||typeof n=="function")for(let i of E(n))!g.call(r,i)&&i!==t&&d(r,i,{get:()=>n[i],enumerable:!(e=v(n,i))||e.enumerable});return r};var V=r=>y(d({},"__esModule",{value:!0}),r),a=(r,n,t,e)=>{for(var i=e>1?void 0:e?v(n,t):n,s=r.length-1,l;s>=0;s--)(l=r[s])&&(i=(e?l(n,t,i):l(i))||i);return e&&i&&d(n,t,i),i};var C={};P(C,{SkdxSlider:()=>o});module.exports=V(C);var h=require("lit"),u=require("lit/decorators.js"),b=require("../internal/define.cjs"),f=require("../internal/form-associated.cjs");function M(r,n,t){return Math.min(Math.max(r,n),t)}function w(r,n,t){let e=Math.round((r-n)/t),i=n+e*t,s=(String(t).split(".")[1]??"").length;return Number(i.toFixed(s))}var o=class extends(0,f.FormAssociated)(h.LitElement){constructor(){super(...arguments);this.value=[0];this.min=0;this.max=100;this.step=1;this.disabled=!1;this.orientation="horizontal";this.activeThumbIndex=0;this.handlePointerDown=t=>{if(this.disabled)return;let e=this.getValueFromPointer(t);if(e==null)return;let i=0,s=1/0;this.value.forEach((l,p)=>{let m=Math.abs(l-e);m<s&&(s=m,i=p)}),this.activeThumbIndex=i,t.target.setPointerCapture?.(t.pointerId),this.updateValue(i,e)};this.handlePointerMove=t=>{if(this.disabled||!t.target.hasPointerCapture?.(t.pointerId))return;let e=this.getValueFromPointer(t);e!=null&&this.updateValue(this.activeThumbIndex,e)};this.handlePointerUp=t=>{let e=t.target;e.hasPointerCapture?.(t.pointerId)&&(e.releasePointerCapture(t.pointerId),this.dispatchEvent(new CustomEvent("value-commit",{detail:this.value,bubbles:!0,composed:!0})))}}connectedCallback(){super.connectedCallback(),this.defaultValue??(this.defaultValue=[...this.value]),this.addEventListener("pointerdown",this.handlePointerDown),this.addEventListener("pointermove",this.handlePointerMove),this.addEventListener("pointerup",this.handlePointerUp),this.syncHostAttributes()}disconnectedCallback(){this.removeEventListener("pointerdown",this.handlePointerDown),this.removeEventListener("pointermove",this.handlePointerMove),this.removeEventListener("pointerup",this.handlePointerUp),super.disconnectedCallback()}updated(t){(t.has("orientation")||t.has("disabled"))&&this.syncHostAttributes(),(t.has("value")||t.has("name"))&&this.setFormValue(this.formValue()),t.has("value")&&this.dispatchEvent(new CustomEvent("skdx-slider-internal-update"))}formValue(){if(this.value.length<=1)return String(this.value[0]??this.min);if(!this.name)return null;let t=new FormData;return this.value.forEach((e,i)=>t.append(`${this.name}[${i}]`,String(e))),t}formResetCallback(){this.value=[...this.defaultValue??[this.min]]}syncHostAttributes(){this.setAttribute("data-orientation",this.orientation),this.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled")}updateValue(t,e){let i=w(e,this.min,this.step),s=this.value,l=t>0?s[t-1]??this.min:this.min,p=t<s.length-1?s[t+1]??this.max:this.max,m=M(i,Math.max(l,this.min),Math.min(p,this.max));if(s[t]===m)return;let c=[...s];c[t]=m,this.value=c,this.dispatchEvent(new CustomEvent("value-change",{detail:c,bubbles:!0,composed:!0}))}getValueFromPointer(t){let e=this.getBoundingClientRect();if(e.width===0&&e.height===0)return null;let i=this.orientation==="horizontal"?(t.clientX-e.left)/e.width:1-(t.clientY-e.top)/e.height;return this.min+i*(this.max-this.min)}render(){return h.html`<slot></slot>`}};o.styles=h.css`
+"use strict";var p=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var w=Object.prototype.hasOwnProperty;var M=(a,n)=>{for(var t in n)p(a,t,{get:n[t],enumerable:!0})},I=(a,n,t,e)=>{if(n&&typeof n=="object"||typeof n=="function")for(let i of A(n))!w.call(a,i)&&i!==t&&p(a,i,{get:()=>n[i],enumerable:!(e=f(n,i))||e.enumerable});return a};var L=a=>I(p({},"__esModule",{value:!0}),a),s=(a,n,t,e)=>{for(var i=e>1?void 0:e?f(n,t):n,l=a.length-1,u;l>=0;l--)(u=a[l])&&(i=(e?u(n,t,i):u(i))||i);return e&&i&&p(n,t,i),i};var x={};M(x,{SkdxSlider:()=>r});module.exports=L(x);var h=require("lit"),o=require("lit/decorators.js"),y=require("../internal/authored.cjs"),E=require("../internal/define.cjs"),V=require("../internal/direction.cjs"),C=require("../internal/form-associated.cjs"),c=require("./SliderAnatomy.cjs");function T(a,n,t){return Math.min(Math.max(a,n),t)}function D(a,n,t){let e=Math.round((a-n)/t),i=n+e*t,l=(String(t).split(".")[1]??"").length;return Number(i.toFixed(l))}function g(a,n){return a.length===n.length&&a.every((t,e)=>t===n[e])}var r=class extends(0,C.FormAssociated)(h.LitElement){constructor(){super(...arguments);this.value=[0];this.min=0;this.max=100;this.step=1;this.disabled=!1;this.orientation="horizontal";this.minStepsBetweenValues=0;this.showTooltip=!1;this.activeThumbIndex=0;this.draggingIndex=null;this.commitBaseline=null;this._lastThumbCount=0;this.fillAnatomy=()=>{(0,y.hasAuthoredParts)(this,c.SLIDER_ANATOMY_GENERATED)||((0,c.fillSliderAnatomy)(this),this._lastThumbCount=this.value.length)};this.handlePointerDown=t=>{if(this.disabled)return;let e=this.getValueFromPointer(t);if(e==null)return;let i=0,l=1/0;this.value.forEach((u,m)=>{let d=Math.abs(u-e);d<l&&(l=d,i=m)}),this.activeThumbIndex=i,this.draggingIndex=i,this.commitBaseline=this.value,t.target.setPointerCapture?.(t.pointerId),this.updateValue(i,e,"pointer")};this.handlePointerCancel=()=>{this.commitBaseline=null,this.draggingIndex=null};this.handlePointerMove=t=>{if(this.disabled||!t.target.hasPointerCapture?.(t.pointerId))return;let e=this.getValueFromPointer(t);e!=null&&this.updateValue(this.activeThumbIndex,e,"pointer")};this.handlePointerUp=t=>{let e=t.target;if(!e.hasPointerCapture?.(t.pointerId))return;e.releasePointerCapture(t.pointerId);let i=this.commitBaseline;this.commitBaseline=null,this.draggingIndex=null,!(!i||g(i,this.value))&&this.dispatchEvent(new CustomEvent("value-commit",{detail:this.value,bubbles:!0,composed:!0}))}}get resolvedLargeStep(){return this.largeStep??Math.max((this.max-this.min)/10,this.step)}get direction(){return(0,V.resolveDirection)(this)}connectedCallback(){super.connectedCallback(),this.defaultValue??(this.defaultValue=[...this.value]),this.addEventListener("pointerdown",this.handlePointerDown),this.addEventListener("pointermove",this.handlePointerMove),this.addEventListener("pointerup",this.handlePointerUp),this.addEventListener("pointercancel",this.handlePointerCancel),this.syncHostAttributes(),this._lastThumbCount=this.value.length,queueMicrotask(this.fillAnatomy)}disconnectedCallback(){this.removeEventListener("pointerdown",this.handlePointerDown),this.removeEventListener("pointermove",this.handlePointerMove),this.removeEventListener("pointerup",this.handlePointerUp),this.removeEventListener("pointercancel",this.handlePointerCancel),super.disconnectedCallback()}updated(t){(t.has("orientation")||t.has("disabled")||t.has("draggingIndex"))&&this.syncHostAttributes(),(t.has("value")||t.has("name"))&&this.setFormValue(this.formValue()),t.has("draggingIndex")&&this.dispatchEvent(new CustomEvent("skdx-slider-internal-update")),t.has("value")&&(this.dispatchEvent(new CustomEvent("skdx-slider-internal-update")),this.value.length!==this._lastThumbCount&&this.fillAnatomy()),(t.has("marks")||t.has("showTooltip")||t.has("thumbLabels"))&&this.fillAnatomy()}formValue(){if(this.value.length<=1)return String(this.value[0]??this.min);if(!this.name)return null;let t=new FormData;return this.value.forEach((e,i)=>t.append(`${this.name}[${i}]`,String(e))),t}formResetCallback(){let t=this.value,e=[...this.defaultValue??[this.min]];g(t,e)||(this.value=e,this.emitValueChange(e,t,"programmatic"))}emitValueChange(t,e,i){this.dispatchEvent(new CustomEvent("value-change",{detail:{value:t,previousValue:e,reason:i},bubbles:!0,composed:!0}))}syncHostAttributes(){this.setAttribute("data-orientation",this.orientation),this.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled"),this.draggingIndex!==null?this.setAttribute("data-dragging",""):this.removeAttribute("data-dragging")}updateValue(t,e,i="programmatic"){let l=D(e,this.min,this.step),u=this.value,m=this.minStepsBetweenValues*this.step,d=t>0?(u[t-1]??this.min)+m:this.min,P=t<u.length-1?(u[t+1]??this.max)-m:this.max,b=T(l,Math.max(d,this.min),Math.min(P,this.max));if(u[t]===b)return;let v=[...u];v[t]=b,this.value=v,this.emitValueChange(v,u,i)}getValueFromPointer(t){let e=this.getBoundingClientRect();if(e.width===0&&e.height===0)return null;let i=this.orientation==="horizontal"?(t.clientX-e.left)/e.width:1-(t.clientY-e.top)/e.height,l=this.orientation==="horizontal"&&this.direction==="rtl"?1-i:i;return this.min+l*(this.max-this.min)}render(){return h.html`<slot @slotchange=${this.fillAnatomy}></slot>`}};r.styles=h.css`
     :host {
       display: block;
       position: relative;
       touch-action: none;
     }
-  `,a([(0,u.property)({type:Array})],o.prototype,"value",2),a([(0,u.property)({type:Number,reflect:!0})],o.prototype,"min",2),a([(0,u.property)({type:Number,reflect:!0})],o.prototype,"max",2),a([(0,u.property)({type:Number,reflect:!0})],o.prototype,"step",2),a([(0,u.property)({type:Boolean,reflect:!0})],o.prototype,"disabled",2),a([(0,u.property)({type:String,reflect:!0})],o.prototype,"orientation",2),a([(0,u.property)({type:String,reflect:!0})],o.prototype,"name",2),o=a([(0,b.customElement)("skdx-slider","slider","root")],o);0&&(module.exports={SkdxSlider});
+  `,s([(0,o.property)({type:Array})],r.prototype,"value",2),s([(0,o.property)({type:Number,reflect:!0})],r.prototype,"min",2),s([(0,o.property)({type:Number,reflect:!0})],r.prototype,"max",2),s([(0,o.property)({type:Number,reflect:!0})],r.prototype,"step",2),s([(0,o.property)({type:Boolean,reflect:!0})],r.prototype,"disabled",2),s([(0,o.property)({type:String,reflect:!0})],r.prototype,"orientation",2),s([(0,o.property)({type:Number,attribute:"large-step",reflect:!0})],r.prototype,"largeStep",2),s([(0,o.property)({type:Number,attribute:"min-steps-between-values",reflect:!0})],r.prototype,"minStepsBetweenValues",2),s([(0,o.property)({type:String,reflect:!0})],r.prototype,"name",2),s([(0,o.property)({type:String,attribute:"form",reflect:!0})],r.prototype,"formId",2),s([(0,o.property)({attribute:!1})],r.prototype,"marks",2),s([(0,o.property)({type:Boolean,reflect:!0,attribute:"show-tooltip"})],r.prototype,"showTooltip",2),s([(0,o.property)({attribute:!1})],r.prototype,"thumbLabels",2),s([(0,o.property)({attribute:!1})],r.prototype,"draggingIndex",2),r=s([(0,E.customElement)("skdx-slider","slider","root")],r);0&&(module.exports={SkdxSlider});

package/dist/slider/Slider.d.cts

@@ -1,4 +1,32 @@
-import { LitElement } from 'lit';
+import { LitElement, type PropertyValues } from 'lit';
+import { type Direction } from '../internal/direction.cjs';
+/**
+ * A tick data shape for `marks` to derive `<skdx-slider-mark>` elements.
+ * Named `SliderMarkData` to avoid collision with `SkdxSliderMark` class.
+ */
+export interface SliderMarkData {
+    /** The value on the track this mark sits at. */
+    value: number;
+    /** The mark's label content. @default undefined — an unlabelled tick. */
+    label?: string;
+}
+/**
+ * Event detail for `value-change`. Includes `reason` (keyboard/pointer/programmatic)
+ * to distinguish track press, drag, arrow key, form reset, or `.value =`. Includes
+ * `previousValue` since listeners need both ends of the change (current value
+ * already moved when listener runs). Null only when no prior value exists.
+ */
+export interface SkdxSliderValueChangeDetail {
+    /** The values the slider settled on, one per thumb. */
+    value: number[];
+    /** The values held before this change, or `null` when there were none. */
+    previousValue: number[] | null;
+    /**
+     * What drove the change. `'pointer'` covers both a track press and a drag
+     * frame — which of the two it was is readable off the originating event.
+     */
+    reason: 'keyboard' | 'pointer' | 'programmatic';
+}
 declare const SkdxSlider_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.cjs").SkdxFormAssociated) & {
     formAssociated: boolean;
 };
@@ -16,19 +44,20 @@ declare const SkdxSlider_base: typeof LitElement & (new (...args: any[]) => impo
  * `name[i]` entry per thumb. A slider always has a value, so there is no
  * constraint to violate — `checkValidity()` always passes.
  *
+ * The recipe: given no authored parts, a Track+Range and one Thumb per entry
+ * in `value` are derived — the thumb count follows the array length, not a
+ * separate `range` prop — plus a Mark per `marks` entry (see
+ * `SliderAnatomy.ts`). Hand composition still wins — write any part as a
+ * child and nothing is derived; the parts themselves are advanced primitives,
+ * from `@skdx/web-components/primitives/slider`.
+ *
  * @example
  * ```html
- * <skdx-slider value="[25,75]" min="0" max="100" step="1">
- *   <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>
+ * <skdx-slider value="[25,75]" min="0" max="100" step="1" aria-label="Price range"></skdx-slider>
  * ```
  *
- * @fires value-change - Fires with the new values array on every change during a drag or key press.
- * @fires value-commit - Fires once with the final values array when a drag ends (pointer up).
+ * @fires value-change - Fires on every change during a drag or key press, with detail `{ value, previousValue, reason }`. A change that resolves to the values already held emits nothing.
+ * @fires value-commit - Fires once with the final values array when a drag ends (pointer up). Suppressed when the values at pointer up are the ones held at pointer down — a bare click that lands where the thumb already is commits nothing.
  */
 export declare class SkdxSlider extends SkdxSlider_base {
     static styles: import("lit").CSSResult;
@@ -56,25 +85,117 @@ export declare class SkdxSlider extends SkdxSlider_base {
     disabled: boolean;
     /** Layout axis, used to map pointer position and Arrow keys to a value. */
     orientation: 'horizontal' | 'vertical';
+    /**
+     * Increment PageUp/PageDown and Shift+Arrow move the focused thumb by.
+     * Defaults to a tenth of the range, floored at one step — the increment
+     * those keys already moved before this property existed.
+     * @default Math.max((max - min) / 10, step)
+     */
+    largeStep?: number;
+    /**
+     * Minimum gap, counted in steps, that adjacent values must keep. At `0` two
+     * thumbs may be dragged onto the same value.
+     * @default 0
+     */
+    minStepsBetweenValues: number;
     /**
      * Name used as the `FormData` entry key — `name` for one thumb, `name[i]` per thumb for several.
      * @default undefined
      */
     name?: string;
+    /**
+     * Id of the `<form>` this slider submits into, so it can live outside the
+     * form it belongs to. The property is `formId`, not `form` — every
+     * form-associated element already publishes `form` as a readonly
+     * `HTMLFormElement`. Nothing implements it: `<skdx-slider>` is a
+     * form-associated custom element, so the browser's own form-owner algorithm
+     * honours the `form` content attribute on its own.
+     * @default undefined — the slider submits into its nearest ancestor form.
+     */
+    formId?: string;
+    /**
+     * Ticks derived into `<skdx-slider-mark>` elements, in track order.
+     * Property only: an array of objects has no attribute form.
+     * @default undefined — no marks are derived, and hand-composed children stand.
+     */
+    marks?: readonly SliderMarkData[];
+    /**
+     * Marks each derived Thumb with `data-show-tooltip`, so a skin can float a
+     * value bubble above it while dragging or focused — this component renders
+     * no tooltip markup of its own.
+     * @default false
+     */
+    showTooltip: boolean;
+    /**
+     * Accessible names for the thumbs the slider derives, one per entry in
+     * value and in the same order — for example `["Minimum price", "Maximum price"]`.
+     * A multi-thumb slider needs these: `role="slider"` takes no name from its
+     * content, so without them both thumbs announce identically and the user
+     * cannot tell which end of the range they are moving. A single-thumb slider
+     * needs none. Ignored when children are given, where each Thumb carries its
+     * own `aria-label`.
+     * @default undefined
+     */
+    thumbLabels?: readonly string[];
     /** @internal Which thumb the current pointer interaction is moving. */
     activeThumbIndex: number;
+    /**
+     * @internal Index of the thumb a pointer gesture is moving, `null` between
+     * gestures — the source of `data-dragging` on this host and on that thumb.
+     * Declared as a property with `attribute: false` so a change runs
+     * `updated()`, which is where both halves are written.
+     */
+    draggingIndex: number | null;
+    /**
+     * @internal The coarse gear PageUp/PageDown and Shift+Arrow move by. Derived
+     * from the range rather than defaulted to a flat 10, so declaring the
+     * property changed no shipped slider.
+     */
+    get resolvedLargeStep(): number;
+    /** The values at pointerdown; `null` between gestures. See the pointerup handler. */
+    private commitBaseline;
+    /**
+     * @internal Writing direction resolved off this root, so the pointer axis
+     * here and the thumb's centring transform can never disagree about which
+     * end of the track is the *start*. Read live rather than cached: a page can
+     * flip `dir` at any point, and `closest` is cheap next to a pointer frame.
+     */
+    get direction(): Direction;
     private defaultValue?;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    protected updated(changed: Map<string, unknown>): void;
+    /** @internal Thumb count the anatomy was last derived for — regenerating on every value tick would drop drag/focus state. */
+    private _lastThumbCount;
+    private readonly fillAnatomy;
+    protected updated(changed: PropertyValues): void;
     private formValue;
-    /** Restores the values the `value` attribute declared when the element was first connected. */
+    /**
+     * Restores the values the `value` attribute declared when the element was
+     * first connected, and announces it as a `'programmatic'` change — the
+     * application put the value back, not the user.
+     */
     formResetCallback(): void;
+    /** The one place `value-change` is constructed, so every source agrees on the payload. */
+    private emitValueChange;
     private syncHostAttributes;
-    /** Clamps/steps `rawValue` against neighboring thumbs and commits it if changed. Dispatches `value-change`. */
-    updateValue(index: number, rawValue: number): void;
+    /**
+     * Clamps/steps `rawValue` against neighboring thumbs and commits it if
+     * changed. Dispatches `value-change` with the reason given.
+     *
+     * `reason` defaults to `'programmatic'` because this is also the element's
+     * public shortcut API — a consumer calling `slider.updateValue(0, 60)` from
+     * a button *is* the application setting the value, and gets the slider's own
+     * step rounding and clamping instead of writing `value` behind its back. The
+     * element's own handlers always pass their own reason.
+     */
+    updateValue(index: number, rawValue: number, reason?: SkdxSliderValueChangeDetail['reason']): void;
     private getValueFromPointer;
     private readonly handlePointerDown;
+    /**
+     * A cancelled gesture (the browser taking the pointer for a scroll, a
+     * context menu) never reaches pointerup, so `data-dragging` would stick on.
+     */
+    private readonly handlePointerCancel;
     private readonly handlePointerMove;
     private readonly handlePointerUp;
     render(): import("lit").TemplateResult<1>;

package/dist/slider/Slider.d.ts

@@ -1,4 +1,32 @@
-import { LitElement } from 'lit';
+import { LitElement, type PropertyValues } from 'lit';
+import { type Direction } from '../internal/direction.js';
+/**
+ * A tick data shape for `marks` to derive `<skdx-slider-mark>` elements.
+ * Named `SliderMarkData` to avoid collision with `SkdxSliderMark` class.
+ */
+export interface SliderMarkData {
+    /** The value on the track this mark sits at. */
+    value: number;
+    /** The mark's label content. @default undefined — an unlabelled tick. */
+    label?: string;
+}
+/**
+ * Event detail for `value-change`. Includes `reason` (keyboard/pointer/programmatic)
+ * to distinguish track press, drag, arrow key, form reset, or `.value =`. Includes
+ * `previousValue` since listeners need both ends of the change (current value
+ * already moved when listener runs). Null only when no prior value exists.
+ */
+export interface SkdxSliderValueChangeDetail {
+    /** The values the slider settled on, one per thumb. */
+    value: number[];
+    /** The values held before this change, or `null` when there were none. */
+    previousValue: number[] | null;
+    /**
+     * What drove the change. `'pointer'` covers both a track press and a drag
+     * frame — which of the two it was is readable off the originating event.
+     */
+    reason: 'keyboard' | 'pointer' | 'programmatic';
+}
 declare const SkdxSlider_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.js").SkdxFormAssociated) & {
     formAssociated: boolean;
 };
@@ -16,19 +44,20 @@ declare const SkdxSlider_base: typeof LitElement & (new (...args: any[]) => impo
  * `name[i]` entry per thumb. A slider always has a value, so there is no
  * constraint to violate — `checkValidity()` always passes.
  *
+ * The recipe: given no authored parts, a Track+Range and one Thumb per entry
+ * in `value` are derived — the thumb count follows the array length, not a
+ * separate `range` prop — plus a Mark per `marks` entry (see
+ * `SliderAnatomy.ts`). Hand composition still wins — write any part as a
+ * child and nothing is derived; the parts themselves are advanced primitives,
+ * from `@skdx/web-components/primitives/slider`.
+ *
  * @example
  * ```html
- * <skdx-slider value="[25,75]" min="0" max="100" step="1">
- *   <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>
+ * <skdx-slider value="[25,75]" min="0" max="100" step="1" aria-label="Price range"></skdx-slider>
  * ```
  *
- * @fires value-change - Fires with the new values array on every change during a drag or key press.
- * @fires value-commit - Fires once with the final values array when a drag ends (pointer up).
+ * @fires value-change - Fires on every change during a drag or key press, with detail `{ value, previousValue, reason }`. A change that resolves to the values already held emits nothing.
+ * @fires value-commit - Fires once with the final values array when a drag ends (pointer up). Suppressed when the values at pointer up are the ones held at pointer down — a bare click that lands where the thumb already is commits nothing.
  */
 export declare class SkdxSlider extends SkdxSlider_base {
     static styles: import("lit").CSSResult;
@@ -56,25 +85,117 @@ export declare class SkdxSlider extends SkdxSlider_base {
     disabled: boolean;
     /** Layout axis, used to map pointer position and Arrow keys to a value. */
     orientation: 'horizontal' | 'vertical';
+    /**
+     * Increment PageUp/PageDown and Shift+Arrow move the focused thumb by.
+     * Defaults to a tenth of the range, floored at one step — the increment
+     * those keys already moved before this property existed.
+     * @default Math.max((max - min) / 10, step)
+     */
+    largeStep?: number;
+    /**
+     * Minimum gap, counted in steps, that adjacent values must keep. At `0` two
+     * thumbs may be dragged onto the same value.
+     * @default 0
+     */
+    minStepsBetweenValues: number;
     /**
      * Name used as the `FormData` entry key — `name` for one thumb, `name[i]` per thumb for several.
      * @default undefined
      */
     name?: string;
+    /**
+     * Id of the `<form>` this slider submits into, so it can live outside the
+     * form it belongs to. The property is `formId`, not `form` — every
+     * form-associated element already publishes `form` as a readonly
+     * `HTMLFormElement`. Nothing implements it: `<skdx-slider>` is a
+     * form-associated custom element, so the browser's own form-owner algorithm
+     * honours the `form` content attribute on its own.
+     * @default undefined — the slider submits into its nearest ancestor form.
+     */
+    formId?: string;
+    /**
+     * Ticks derived into `<skdx-slider-mark>` elements, in track order.
+     * Property only: an array of objects has no attribute form.
+     * @default undefined — no marks are derived, and hand-composed children stand.
+     */
+    marks?: readonly SliderMarkData[];
+    /**
+     * Marks each derived Thumb with `data-show-tooltip`, so a skin can float a
+     * value bubble above it while dragging or focused — this component renders
+     * no tooltip markup of its own.
+     * @default false
+     */
+    showTooltip: boolean;
+    /**
+     * Accessible names for the thumbs the slider derives, one per entry in
+     * value and in the same order — for example `["Minimum price", "Maximum price"]`.
+     * A multi-thumb slider needs these: `role="slider"` takes no name from its
+     * content, so without them both thumbs announce identically and the user
+     * cannot tell which end of the range they are moving. A single-thumb slider
+     * needs none. Ignored when children are given, where each Thumb carries its
+     * own `aria-label`.
+     * @default undefined
+     */
+    thumbLabels?: readonly string[];
     /** @internal Which thumb the current pointer interaction is moving. */
     activeThumbIndex: number;
+    /**
+     * @internal Index of the thumb a pointer gesture is moving, `null` between
+     * gestures — the source of `data-dragging` on this host and on that thumb.
+     * Declared as a property with `attribute: false` so a change runs
+     * `updated()`, which is where both halves are written.
+     */
+    draggingIndex: number | null;
+    /**
+     * @internal The coarse gear PageUp/PageDown and Shift+Arrow move by. Derived
+     * from the range rather than defaulted to a flat 10, so declaring the
+     * property changed no shipped slider.
+     */
+    get resolvedLargeStep(): number;
+    /** The values at pointerdown; `null` between gestures. See the pointerup handler. */
+    private commitBaseline;
+    /**
+     * @internal Writing direction resolved off this root, so the pointer axis
+     * here and the thumb's centring transform can never disagree about which
+     * end of the track is the *start*. Read live rather than cached: a page can
+     * flip `dir` at any point, and `closest` is cheap next to a pointer frame.
+     */
+    get direction(): Direction;
     private defaultValue?;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    protected updated(changed: Map<string, unknown>): void;
+    /** @internal Thumb count the anatomy was last derived for — regenerating on every value tick would drop drag/focus state. */
+    private _lastThumbCount;
+    private readonly fillAnatomy;
+    protected updated(changed: PropertyValues): void;
     private formValue;
-    /** Restores the values the `value` attribute declared when the element was first connected. */
+    /**
+     * Restores the values the `value` attribute declared when the element was
+     * first connected, and announces it as a `'programmatic'` change — the
+     * application put the value back, not the user.
+     */
     formResetCallback(): void;
+    /** The one place `value-change` is constructed, so every source agrees on the payload. */
+    private emitValueChange;
     private syncHostAttributes;
-    /** Clamps/steps `rawValue` against neighboring thumbs and commits it if changed. Dispatches `value-change`. */
-    updateValue(index: number, rawValue: number): void;
+    /**
+     * Clamps/steps `rawValue` against neighboring thumbs and commits it if
+     * changed. Dispatches `value-change` with the reason given.
+     *
+     * `reason` defaults to `'programmatic'` because this is also the element's
+     * public shortcut API — a consumer calling `slider.updateValue(0, 60)` from
+     * a button *is* the application setting the value, and gets the slider's own
+     * step rounding and clamping instead of writing `value` behind its back. The
+     * element's own handlers always pass their own reason.
+     */
+    updateValue(index: number, rawValue: number, reason?: SkdxSliderValueChangeDetail['reason']): void;
     private getValueFromPointer;
     private readonly handlePointerDown;
+    /**
+     * A cancelled gesture (the browser taking the pointer for a scroll, a
+     * context menu) never reaches pointerup, so `data-dragging` would stick on.
+     */
+    private readonly handlePointerCancel;
     private readonly handlePointerMove;
     private readonly handlePointerUp;
     render(): import("lit").TemplateResult<1>;

package/dist/slider/Slider.js

@@ -1,7 +1,7 @@
-var p=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var o=(a,s,t,e)=>{for(var i=e>1?void 0:e?c(s,t):s,n=a.length-1,u;n>=0;n--)(u=a[n])&&(i=(e?u(s,t,i):u(i))||i);return e&&i&&p(s,t,i),i};import{css as v,html as b,LitElement as f}from"lit";import{property as l}from"lit/decorators.js";import{customElement as E}from"../internal/define.js";import{FormAssociated as g}from"../internal/form-associated.js";function P(a,s,t){return Math.min(Math.max(a,s),t)}function y(a,s,t){let e=Math.round((a-s)/t),i=s+e*t,n=(String(t).split(".")[1]??"").length;return Number(i.toFixed(n))}var r=class extends g(f){constructor(){super(...arguments);this.value=[0];this.min=0;this.max=100;this.step=1;this.disabled=!1;this.orientation="horizontal";this.activeThumbIndex=0;this.handlePointerDown=t=>{if(this.disabled)return;let e=this.getValueFromPointer(t);if(e==null)return;let i=0,n=1/0;this.value.forEach((u,m)=>{let h=Math.abs(u-e);h<n&&(n=h,i=m)}),this.activeThumbIndex=i,t.target.setPointerCapture?.(t.pointerId),this.updateValue(i,e)};this.handlePointerMove=t=>{if(this.disabled||!t.target.hasPointerCapture?.(t.pointerId))return;let e=this.getValueFromPointer(t);e!=null&&this.updateValue(this.activeThumbIndex,e)};this.handlePointerUp=t=>{let e=t.target;e.hasPointerCapture?.(t.pointerId)&&(e.releasePointerCapture(t.pointerId),this.dispatchEvent(new CustomEvent("value-commit",{detail:this.value,bubbles:!0,composed:!0})))}}connectedCallback(){super.connectedCallback(),this.defaultValue??(this.defaultValue=[...this.value]),this.addEventListener("pointerdown",this.handlePointerDown),this.addEventListener("pointermove",this.handlePointerMove),this.addEventListener("pointerup",this.handlePointerUp),this.syncHostAttributes()}disconnectedCallback(){this.removeEventListener("pointerdown",this.handlePointerDown),this.removeEventListener("pointermove",this.handlePointerMove),this.removeEventListener("pointerup",this.handlePointerUp),super.disconnectedCallback()}updated(t){(t.has("orientation")||t.has("disabled"))&&this.syncHostAttributes(),(t.has("value")||t.has("name"))&&this.setFormValue(this.formValue()),t.has("value")&&this.dispatchEvent(new CustomEvent("skdx-slider-internal-update"))}formValue(){if(this.value.length<=1)return String(this.value[0]??this.min);if(!this.name)return null;let t=new FormData;return this.value.forEach((e,i)=>t.append(`${this.name}[${i}]`,String(e))),t}formResetCallback(){this.value=[...this.defaultValue??[this.min]]}syncHostAttributes(){this.setAttribute("data-orientation",this.orientation),this.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled")}updateValue(t,e){let i=y(e,this.min,this.step),n=this.value,u=t>0?n[t-1]??this.min:this.min,m=t<n.length-1?n[t+1]??this.max:this.max,h=P(i,Math.max(u,this.min),Math.min(m,this.max));if(n[t]===h)return;let d=[...n];d[t]=h,this.value=d,this.dispatchEvent(new CustomEvent("value-change",{detail:d,bubbles:!0,composed:!0}))}getValueFromPointer(t){let e=this.getBoundingClientRect();if(e.width===0&&e.height===0)return null;let i=this.orientation==="horizontal"?(t.clientX-e.left)/e.width:1-(t.clientY-e.top)/e.height;return this.min+i*(this.max-this.min)}render(){return b`<slot></slot>`}};r.styles=v`
+var b=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var r=(u,s,t,e)=>{for(var i=e>1?void 0:e?f(s,t):s,o=u.length-1,l;o>=0;o--)(l=u[o])&&(i=(e?l(s,t,i):l(i))||i);return e&&i&&b(s,t,i),i};import{css as g,html as y,LitElement as E}from"lit";import{property as a}from"lit/decorators.js";import{hasAuthoredParts as V}from"../internal/authored.js";import{customElement as C}from"../internal/define.js";import{resolveDirection as P}from"../internal/direction.js";import{FormAssociated as A}from"../internal/form-associated.js";import{fillSliderAnatomy as w,SLIDER_ANATOMY_GENERATED as M}from"./SliderAnatomy.js";function I(u,s,t){return Math.min(Math.max(u,s),t)}function L(u,s,t){let e=Math.round((u-s)/t),i=s+e*t,o=(String(t).split(".")[1]??"").length;return Number(i.toFixed(o))}function c(u,s){return u.length===s.length&&u.every((t,e)=>t===s[e])}var n=class extends A(E){constructor(){super(...arguments);this.value=[0];this.min=0;this.max=100;this.step=1;this.disabled=!1;this.orientation="horizontal";this.minStepsBetweenValues=0;this.showTooltip=!1;this.activeThumbIndex=0;this.draggingIndex=null;this.commitBaseline=null;this._lastThumbCount=0;this.fillAnatomy=()=>{V(this,M)||(w(this),this._lastThumbCount=this.value.length)};this.handlePointerDown=t=>{if(this.disabled)return;let e=this.getValueFromPointer(t);if(e==null)return;let i=0,o=1/0;this.value.forEach((l,h)=>{let m=Math.abs(l-e);m<o&&(o=m,i=h)}),this.activeThumbIndex=i,this.draggingIndex=i,this.commitBaseline=this.value,t.target.setPointerCapture?.(t.pointerId),this.updateValue(i,e,"pointer")};this.handlePointerCancel=()=>{this.commitBaseline=null,this.draggingIndex=null};this.handlePointerMove=t=>{if(this.disabled||!t.target.hasPointerCapture?.(t.pointerId))return;let e=this.getValueFromPointer(t);e!=null&&this.updateValue(this.activeThumbIndex,e,"pointer")};this.handlePointerUp=t=>{let e=t.target;if(!e.hasPointerCapture?.(t.pointerId))return;e.releasePointerCapture(t.pointerId);let i=this.commitBaseline;this.commitBaseline=null,this.draggingIndex=null,!(!i||c(i,this.value))&&this.dispatchEvent(new CustomEvent("value-commit",{detail:this.value,bubbles:!0,composed:!0}))}}get resolvedLargeStep(){return this.largeStep??Math.max((this.max-this.min)/10,this.step)}get direction(){return P(this)}connectedCallback(){super.connectedCallback(),this.defaultValue??(this.defaultValue=[...this.value]),this.addEventListener("pointerdown",this.handlePointerDown),this.addEventListener("pointermove",this.handlePointerMove),this.addEventListener("pointerup",this.handlePointerUp),this.addEventListener("pointercancel",this.handlePointerCancel),this.syncHostAttributes(),this._lastThumbCount=this.value.length,queueMicrotask(this.fillAnatomy)}disconnectedCallback(){this.removeEventListener("pointerdown",this.handlePointerDown),this.removeEventListener("pointermove",this.handlePointerMove),this.removeEventListener("pointerup",this.handlePointerUp),this.removeEventListener("pointercancel",this.handlePointerCancel),super.disconnectedCallback()}updated(t){(t.has("orientation")||t.has("disabled")||t.has("draggingIndex"))&&this.syncHostAttributes(),(t.has("value")||t.has("name"))&&this.setFormValue(this.formValue()),t.has("draggingIndex")&&this.dispatchEvent(new CustomEvent("skdx-slider-internal-update")),t.has("value")&&(this.dispatchEvent(new CustomEvent("skdx-slider-internal-update")),this.value.length!==this._lastThumbCount&&this.fillAnatomy()),(t.has("marks")||t.has("showTooltip")||t.has("thumbLabels"))&&this.fillAnatomy()}formValue(){if(this.value.length<=1)return String(this.value[0]??this.min);if(!this.name)return null;let t=new FormData;return this.value.forEach((e,i)=>t.append(`${this.name}[${i}]`,String(e))),t}formResetCallback(){let t=this.value,e=[...this.defaultValue??[this.min]];c(t,e)||(this.value=e,this.emitValueChange(e,t,"programmatic"))}emitValueChange(t,e,i){this.dispatchEvent(new CustomEvent("value-change",{detail:{value:t,previousValue:e,reason:i},bubbles:!0,composed:!0}))}syncHostAttributes(){this.setAttribute("data-orientation",this.orientation),this.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled"),this.draggingIndex!==null?this.setAttribute("data-dragging",""):this.removeAttribute("data-dragging")}updateValue(t,e,i="programmatic"){let o=L(e,this.min,this.step),l=this.value,h=this.minStepsBetweenValues*this.step,m=t>0?(l[t-1]??this.min)+h:this.min,v=t<l.length-1?(l[t+1]??this.max)-h:this.max,p=I(o,Math.max(m,this.min),Math.min(v,this.max));if(l[t]===p)return;let d=[...l];d[t]=p,this.value=d,this.emitValueChange(d,l,i)}getValueFromPointer(t){let e=this.getBoundingClientRect();if(e.width===0&&e.height===0)return null;let i=this.orientation==="horizontal"?(t.clientX-e.left)/e.width:1-(t.clientY-e.top)/e.height,o=this.orientation==="horizontal"&&this.direction==="rtl"?1-i:i;return this.min+o*(this.max-this.min)}render(){return y`<slot @slotchange=${this.fillAnatomy}></slot>`}};n.styles=g`
     :host {
       display: block;
       position: relative;
       touch-action: none;
     }
-  `,o([l({type:Array})],r.prototype,"value",2),o([l({type:Number,reflect:!0})],r.prototype,"min",2),o([l({type:Number,reflect:!0})],r.prototype,"max",2),o([l({type:Number,reflect:!0})],r.prototype,"step",2),o([l({type:Boolean,reflect:!0})],r.prototype,"disabled",2),o([l({type:String,reflect:!0})],r.prototype,"orientation",2),o([l({type:String,reflect:!0})],r.prototype,"name",2),r=o([E("skdx-slider","slider","root")],r);export{r as SkdxSlider};
+  `,r([a({type:Array})],n.prototype,"value",2),r([a({type:Number,reflect:!0})],n.prototype,"min",2),r([a({type:Number,reflect:!0})],n.prototype,"max",2),r([a({type:Number,reflect:!0})],n.prototype,"step",2),r([a({type:Boolean,reflect:!0})],n.prototype,"disabled",2),r([a({type:String,reflect:!0})],n.prototype,"orientation",2),r([a({type:Number,attribute:"large-step",reflect:!0})],n.prototype,"largeStep",2),r([a({type:Number,attribute:"min-steps-between-values",reflect:!0})],n.prototype,"minStepsBetweenValues",2),r([a({type:String,reflect:!0})],n.prototype,"name",2),r([a({type:String,attribute:"form",reflect:!0})],n.prototype,"formId",2),r([a({attribute:!1})],n.prototype,"marks",2),r([a({type:Boolean,reflect:!0,attribute:"show-tooltip"})],n.prototype,"showTooltip",2),r([a({attribute:!1})],n.prototype,"thumbLabels",2),r([a({attribute:!1})],n.prototype,"draggingIndex",2),n=r([C("skdx-slider","slider","root")],n);export{n as SkdxSlider};

package/dist/slider/SliderAnatomy.cjs

@@ -0,0 +1,14 @@
+"use strict";var s=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var k=(e,l)=>{for(var a in l)s(e,a,{get:l[a],enumerable:!0})},x=(e,l,a,t)=>{if(l&&typeof l=="object"||typeof l=="function")for(let d of u(l))!h.call(e,d)&&d!==a&&s(e,d,{get:()=>l[d],enumerable:!(t=n(l,d))||t.enumerable});return e};var b=e=>x(s({},"__esModule",{value:!0}),e);var g={};k(g,{SLIDER_ANATOMY_GENERATED:()=>p,fillSliderAnatomy:()=>o});module.exports=b(g);var i=require("lit"),r=require("lit/directives/repeat.js"),m=require("../utils/is-dev-mode.cjs"),c=require("./SliderMark.cjs"),f=require("./SliderRange.cjs"),S=require("./SliderThumb.cjs"),$=require("./SliderTrack.cjs"),p="data-skdx-slider-generated";function o(e){(0,m.isDevMode)()&&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"]).`),(0,i.render)(i.html`
+      <skdx-slider-track data-skdx-slider-generated>
+        <skdx-slider-range data-skdx-slider-generated></skdx-slider-range>
+      </skdx-slider-track>
+      ${(0,r.repeat)(e.value,(l,a)=>a,(l,a)=>i.html`<skdx-slider-thumb
+            data-skdx-slider-generated
+            index=${a}
+            ?show-tooltip=${e.showTooltip}
+            aria-label=${e.thumbLabels?.[a]??null}
+          ></skdx-slider-thumb>`)}
+      ${(0,r.repeat)(e.marks??[],l=>l.value,l=>i.html`<skdx-slider-mark data-skdx-slider-generated value=${l.value}
+            >${l.label??""}</skdx-slider-mark
+          >`)}
+    `,e,{host:e})}0&&(module.exports={SLIDER_ANATOMY_GENERATED,fillSliderAnatomy});

package/dist/slider/SliderAnatomy.d.cts

@@ -0,0 +1,15 @@
+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";
+/**
+ * Builds Track/Range, Thumbs (one per value), Marks (one per mark). Thumbs keyed by index
+ * (stable across value changes). Assumes no consumer composition.
+ * @internal
+ */
+export declare function fillSliderAnatomy(root: SkdxSlider): void;

package/dist/slider/SliderAnatomy.d.ts

@@ -0,0 +1,15 @@
+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";
+/**
+ * Builds Track/Range, Thumbs (one per value), Marks (one per mark). Thumbs keyed by index
+ * (stable across value changes). Assumes no consumer composition.
+ * @internal
+ */
+export declare function fillSliderAnatomy(root: SkdxSlider): void;