@skdx/vue 0.27.0 → 0.28.0

package/dist/skip-link/SkipLink.vue.d.cts

@@ -1,12 +1,7 @@
 /**
- * The Vue implementation of the shared SkipLink contract (see
- * `@skdx/shared`'s `skipLinkContract`). The WCAG 2.4.1 bypass-block link:
- * render 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"`), and on activation it programmatically
- * focuses `targetId` — see `focusSkipTarget` below for why that matters.
+ * WCAG 2.4.1 bypass-block link: render as first focusable to Tab past navigation.
+ * Clipped until focused (data-state hidden|visible), programmatically focuses
+ * targetId on activate.
  */
 type __VLS_Props = {
     /** The id of the element to jump to, usually the page's main landmark. */

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

@@ -1,12 +1,7 @@
 /**
- * The Vue implementation of the shared SkipLink contract (see
- * `@skdx/shared`'s `skipLinkContract`). The WCAG 2.4.1 bypass-block link:
- * render 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"`), and on activation it programmatically
- * focuses `targetId` — see `focusSkipTarget` below for why that matters.
+ * WCAG 2.4.1 bypass-block link: render as first focusable to Tab past navigation.
+ * Clipped until focused (data-state hidden|visible), programmatically focuses
+ * targetId on activate.
  */
 type __VLS_Props = {
     /** The id of the element to jump to, usually the page's main landmark. */

package/dist/skip-link/SkipLink.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-let t=require("vue");var d=["href","data-state"],p=(0,t.defineComponent)({__name:"SkipLink",props:{targetId:{}},setup(i){const o=i,r={position:"absolute",width:"1px",height:"1px",overflow:"hidden",clip:"rect(0, 0, 0, 0)",whiteSpace:"nowrap"},s={position:"absolute",top:"0",left:"0",zIndex:999},n=(0,t.ref)(!1);function l(){const e=document.getElementById(o.targetId);e&&(e.hasAttribute("tabindex")||(e.setAttribute("tabindex","-1"),e.addEventListener("blur",()=>e.removeAttribute("tabindex"),{once:!0})),e.focus())}return(e,a)=>((0,t.openBlock)(),(0,t.createElementBlock)("a",{class:"skdx-skip-link","data-part":"root","data-skdx-component":"skip-link",href:`#${i.targetId}`,"data-state":n.value?"visible":"hidden",style:(0,t.normalizeStyle)(n.value?s:r),onClick:l,onFocus:a[0]||(a[0]=u=>n.value=!0),onBlur:a[1]||(a[1]=u=>n.value=!1)},[(0,t.renderSlot)(e.$slots,"default")],44,d))}});exports.default=p;
+const c=require("../utils/tabbable.cjs"),l=require("../utils/is-dev-mode.cjs");let t=require("vue");var h=["href","data-state"],f=(0,t.defineComponent)({__name:"SkipLink",props:{targetId:{}},setup(r){const o=r,d={position:"absolute",width:"1px",height:"1px",overflow:"hidden",clipPath:"inset(50%)",whiteSpace:"nowrap"},u={position:"absolute"},s=(0,t.ref)(!1),a=(0,t.ref)(null);function p(){const e=document.getElementById(o.targetId);if(!e){l.isDevMode()&&console.warn(`[skdx] SkipLink: no element with id "${o.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="${o.targetId}".`);return}e.hasAttribute("tabindex")||(e.setAttribute("tabindex","-1"),e.addEventListener("blur",()=>e.removeAttribute("tabindex"),{once:!0})),e.focus()}return(0,t.onMounted)(()=>{const e=a.value;if(!e)return;const i=Array.from(document.querySelectorAll(c.TABBABLE_SELECTOR)).find(n=>n!==e&&!e.contains(n)&&(e.compareDocumentPosition(n)&Node.DOCUMENT_POSITION_PRECEDING)!==0);i&&l.isDevMode()&&console.warn(`[skdx] SkipLink: a focusable <${i.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>.`)}),(e,i)=>((0,t.openBlock)(),(0,t.createElementBlock)("a",{ref_key:"link",ref:a,class:"skdx-skip-link","data-part":"root","data-skdx-component":"skip-link",href:`#${r.targetId}`,"data-state":s.value?"visible":"hidden",style:(0,t.normalizeStyle)(s.value?u:d),onClick:p,onFocus:i[0]||(i[0]=n=>s.value=!0),onBlur:i[1]||(i[1]=n=>s.value=!1)},[(0,t.renderSlot)(e.$slots,"default")],44,h))}});exports.default=f;

package/dist/skip-link/SkipLink.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{createElementBlock as e,defineComponent as t,normalizeStyle as a,openBlock as o,ref as n,renderSlot as s}from"vue";var i=["href","data-state"],r=/* @__PURE__ */t({__name:"SkipLink",props:{targetId:{}},setup(t){const r=t,l={position:"absolute",width:"1px",height:"1px",overflow:"hidden",clip:"rect(0, 0, 0, 0)",whiteSpace:"nowrap"},d={position:"absolute",top:"0",left:"0",zIndex:999},p=n(!1);function u(){const e=document.getElementById(r.targetId);e&&(e.hasAttribute("tabindex")||(e.setAttribute("tabindex","-1"),e.addEventListener("blur",()=>e.removeAttribute("tabindex"),{once:!0})),e.focus())}return(n,r)=>(o(),e("a",{class:"skdx-skip-link","data-part":"root","data-skdx-component":"skip-link",href:`#${t.targetId}`,"data-state":p.value?"visible":"hidden",style:a(p.value?d:l),onClick:u,onFocus:r[0]||(r[0]=e=>p.value=!0),onBlur:r[1]||(r[1]=e=>p.value=!1)},[s(n.$slots,"default")],44,i))}});export{r as default};
+import{TABBABLE_SELECTOR as e}from"../utils/tabbable.js";import{isDevMode as t}from"../utils/is-dev-mode.js";import{createElementBlock as a,defineComponent as s,normalizeStyle as i,onMounted as n,openBlock as o,ref as r,renderSlot as l}from"vue";var d=["href","data-state"],u=/* @__PURE__ */s({__name:"SkipLink",props:{targetId:{}},setup(s){const u=s,p={position:"absolute",width:"1px",height:"1px",overflow:"hidden",clipPath:"inset(50%)",whiteSpace:"nowrap"},h={position:"absolute"},c=r(!1),m=r(null);function k(){const e=document.getElementById(u.targetId);e?(e.hasAttribute("tabindex")||(e.setAttribute("tabindex","-1"),e.addEventListener("blur",()=>e.removeAttribute("tabindex"),{once:!0})),e.focus()):t()&&console.warn(`[skdx] SkipLink: no element with id "${u.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="${u.targetId}".`)}return n(()=>{const a=m.value;if(!a)return;const s=Array.from(document.querySelectorAll(e)).find(e=>e!==a&&!a.contains(e)&&0!==(a.compareDocumentPosition(e)&Node.DOCUMENT_POSITION_PRECEDING));s&&t()&&console.warn(`[skdx] SkipLink: a focusable <${s.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>.`)}),(e,t)=>(o(),a("a",{ref_key:"link",ref:m,class:"skdx-skip-link","data-part":"root","data-skdx-component":"skip-link",href:`#${s.targetId}`,"data-state":c.value?"visible":"hidden",style:i(c.value?h:p),onClick:k,onFocus:t[0]||(t[0]=e=>c.value=!0),onBlur:t[1]||(t[1]=e=>c.value=!1)},[l(e.$slots,"default")],44,d))}});export{u as default};

package/dist/slider/Slider.vue.d.cts

@@ -1,9 +1,8 @@
+import { type SliderValueChangeDetail } from './context.cjs';
+import type { SliderMarkData } from './types.cjs';
 /**
- * The Vue implementation of the shared Slider contract (see
- * `@skdx/shared`'s `sliderContract`). `value` is always an array; pass a
- * single-element array for a simple slider, two for a range slider.
- * Clicking or dragging anywhere in the root moves the thumb closest to the
- * pointer; `value-commit` fires once, on pointer up.
+ * Slider: value is always an array; single-element for simple, two for range.
+ * Supports controlled/uncontrolled usage and form participation.
  */
 type __VLS_Props = {
     /** Selected values, one per thumb, for controlled usage. Pair with `v-model:value` or `@value-change`. */
@@ -20,8 +19,48 @@ type __VLS_Props = {
     disabled?: boolean;
     /** Layout axis, exposed as `data-orientation` and 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.
+     * @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 for native form participation; each thumb renders its own hidden input. */
     name?: string;
+    /**
+     * Id of the `<form>` the slider submits into, forwarded to every thumb's
+     * hidden input, so a slider can live outside the form it belongs to.
+     */
+    form?: string;
+    /**
+     * Ticks rendered along the track, each a derived Mark. Thumb count is
+     * driven by `value`/`defaultValue`'s length, not by this — a range slider
+     * is already expressed by passing a two-element array.
+     * @default undefined — no marks rendered.
+     */
+    marks?: readonly SliderMarkData[];
+    /**
+     * Renders a floating value readout inside each derived Thumb.
+     * @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` is given, where each Thumb carries its
+     * own `aria-label`.
+     * @default undefined
+     */
+    thumbLabels?: readonly string[];
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -29,21 +68,27 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:value": (value: number[]) => any;
-    "value-change": (value: number[]) => any;
+    "value-change": (detail: SliderValueChangeDetail) => any;
     "value-commit": (value: number[]) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:value"?: ((value: number[]) => any) | undefined;
-    "onValue-change"?: ((value: number[]) => any) | undefined;
+    "onValue-change"?: ((detail: SliderValueChangeDetail) => any) | undefined;
     "onValue-commit"?: ((value: number[]) => any) | undefined;
 }>, {
+    form: string;
     disabled: boolean;
-    name: string;
     value: number[];
+    name: string;
     defaultValue: number[];
-    orientation: "horizontal" | "vertical";
     max: number;
     min: number;
     step: number;
+    orientation: "horizontal" | "vertical";
+    marks: readonly SliderMarkData[];
+    showTooltip: boolean;
+    thumbLabels: readonly string[];
+    largeStep: number;
+    minStepsBetweenValues: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/slider/Slider.vue.d.ts

@@ -1,9 +1,8 @@
+import { type SliderValueChangeDetail } from './context.js';
+import type { SliderMarkData } from './types.js';
 /**
- * The Vue implementation of the shared Slider contract (see
- * `@skdx/shared`'s `sliderContract`). `value` is always an array; pass a
- * single-element array for a simple slider, two for a range slider.
- * Clicking or dragging anywhere in the root moves the thumb closest to the
- * pointer; `value-commit` fires once, on pointer up.
+ * Slider: value is always an array; single-element for simple, two for range.
+ * Supports controlled/uncontrolled usage and form participation.
  */
 type __VLS_Props = {
     /** Selected values, one per thumb, for controlled usage. Pair with `v-model:value` or `@value-change`. */
@@ -20,8 +19,48 @@ type __VLS_Props = {
     disabled?: boolean;
     /** Layout axis, exposed as `data-orientation` and 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.
+     * @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 for native form participation; each thumb renders its own hidden input. */
     name?: string;
+    /**
+     * Id of the `<form>` the slider submits into, forwarded to every thumb's
+     * hidden input, so a slider can live outside the form it belongs to.
+     */
+    form?: string;
+    /**
+     * Ticks rendered along the track, each a derived Mark. Thumb count is
+     * driven by `value`/`defaultValue`'s length, not by this — a range slider
+     * is already expressed by passing a two-element array.
+     * @default undefined — no marks rendered.
+     */
+    marks?: readonly SliderMarkData[];
+    /**
+     * Renders a floating value readout inside each derived Thumb.
+     * @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` is given, where each Thumb carries its
+     * own `aria-label`.
+     * @default undefined
+     */
+    thumbLabels?: readonly string[];
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -29,21 +68,27 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:value": (value: number[]) => any;
-    "value-change": (value: number[]) => any;
+    "value-change": (detail: SliderValueChangeDetail) => any;
     "value-commit": (value: number[]) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:value"?: ((value: number[]) => any) | undefined;
-    "onValue-change"?: ((value: number[]) => any) | undefined;
+    "onValue-change"?: ((detail: SliderValueChangeDetail) => any) | undefined;
     "onValue-commit"?: ((value: number[]) => any) | undefined;
 }>, {
+    form: string;
     disabled: boolean;
-    name: string;
     value: number[];
+    name: string;
     defaultValue: number[];
-    orientation: "horizontal" | "vertical";
     max: number;
     min: number;
     step: number;
+    orientation: "horizontal" | "vertical";
+    marks: readonly SliderMarkData[];
+    showTooltip: boolean;
+    thumbLabels: readonly string[];
+    largeStep: number;
+    minStepsBetweenValues: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/slider/Slider.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const B=require("../utils/clamp.cjs"),v=require("./context.cjs");let o=require("vue");var E=["data-orientation","data-disabled"],S=(0,o.defineComponent)({__name:"Slider",props:{value:{default:void 0},defaultValue:{default:()=>[0]},min:{default:0},max:{default:100},step:{default:1},disabled:{type:Boolean,default:!1},orientation:{default:"horizontal"},name:{default:void 0}},emits:["update:value","value-change","value-commit"],setup(s,{emit:b}){const t=s,c=b,h=(0,o.ref)(t.defaultValue),u=(0,o.computed)(()=>t.value===void 0?h.value:t.value),_=(0,o.ref)(null),p=(0,o.ref)(0);function P(e){t.value===void 0&&(h.value=e),c("update:value",e),c("value-change",e)}function m(e,n){const i=v.roundToStep(n,t.min,t.step),a=u.value,l=e>0?a[e-1]??t.min:t.min,f=e<a.length-1?a[e+1]??t.max:t.max,d=B.clamp(i,Math.max(l,t.min),Math.min(f,t.max));if(a[e]===d)return;const r=[...a];r[e]=d,P(r)}let I=0;(0,o.provide)(v.SLIDER_THUMB_AUTO_INDEX,{next:()=>I++}),(0,o.provide)(v.SLIDER_CONTEXT,{values:u,min:(0,o.computed)(()=>t.min),max:(0,o.computed)(()=>t.max),step:(0,o.computed)(()=>t.step),disabled:(0,o.computed)(()=>t.disabled),orientation:(0,o.computed)(()=>t.orientation),name:(0,o.computed)(()=>t.name),activeThumbIndex:p,updateValue:m});function g(e){const n=_.value?.getBoundingClientRect();if(!n)return null;const i=t.orientation==="horizontal"?(e.clientX-n.left)/n.width:1-(e.clientY-n.top)/n.height;return t.min+i*(t.max-t.min)}function V(e){if(t.disabled)return;const n=g(e);if(n==null)return;const i=u.value;let a=0,l=1/0;i.forEach((f,d)=>{const r=Math.abs(f-n);r<l&&(l=r,a=d)}),p.value=a,e.target.setPointerCapture?.(e.pointerId),m(a,n)}function x(e){if(t.disabled||!e.target.hasPointerCapture?.(e.pointerId))return;const n=g(e);n!=null&&m(p.value,n)}function C(e){e.target.hasPointerCapture?.(e.pointerId)&&(e.target.releasePointerCapture(e.pointerId),c("value-commit",u.value))}return(e,n)=>((0,o.openBlock)(),(0,o.createElementBlock)("span",{class:"skdx-slider","data-part":"root","data-skdx-component":"slider",ref_key:"rootRef",ref:_,"data-orientation":s.orientation,"data-disabled":s.disabled?"":void 0,style:{"touch-action":"none"},onPointerdown:V,onPointermove:x,onPointerup:C},[(0,o.renderSlot)(e.$slots,"default")],40,E))}});exports.default=S;
+const L=require("../utils/useFormReset.cjs"),w=require("../utils/direction.cjs"),M=require("../utils/clamp.cjs"),b=require("./context.cjs"),z=require("./SliderAnatomy.vue.cjs");let o=require("vue");var F=["data-orientation","data-disabled","data-dragging"],N=(0,o.defineComponent)({__name:"Slider",props:{value:{default:void 0},defaultValue:{default:()=>[0]},min:{default:0},max:{default:100},step:{default:1},disabled:{type:Boolean,default:!1},orientation:{default:"horizontal"},largeStep:{default:void 0},minStepsBetweenValues:{default:0},name:{default:void 0},form:{default:void 0},marks:{default:void 0},showTooltip:{type:Boolean,default:!1},thumbLabels:{default:void 0}},emits:["update:value","value-change","value-commit"],setup(i,{emit:I}){const e=i,f=I,V=(0,o.ref)(e.defaultValue),u=(0,o.computed)(()=>e.value===void 0?V.value:e.value),d=(0,o.ref)(null),v=(0,o.ref)(0),s=(0,o.ref)(null),k=(0,o.computed)(()=>e.largeStep??Math.max((e.max-e.min)/10,e.step));let c=null;function P(t,a){return t.length===a.length&&t.every((n,l)=>n===a[l])}const C=w.useDirection(),S=(0,o.computed)(()=>w.resolveDirection(d.value,C()));function _(t,a){const n=u.value;e.value===void 0&&(V.value=t),f("update:value",t),f("value-change",{value:t,previousValue:n,reason:a})}function h(t,a,n){const l=b.roundToStep(a,e.min,e.step),r=u.value,m=e.minStepsBetweenValues*e.step,g=t>0?(r[t-1]??e.min)+m:e.min,p=t<r.length-1?(r[t+1]??e.max)-m:e.max,x=M.clamp(l,Math.max(g,e.min),Math.min(p,e.max));if(r[t]===x)return;const B=[...r];B[t]=x,_(B,n)}let y=0;(0,o.provide)(b.SLIDER_THUMB_AUTO_INDEX,{next:()=>y++}),(0,o.provide)(b.SLIDER_CONTEXT,{values:u,min:(0,o.computed)(()=>e.min),max:(0,o.computed)(()=>e.max),step:(0,o.computed)(()=>e.step),disabled:(0,o.computed)(()=>e.disabled),orientation:(0,o.computed)(()=>e.orientation),direction:S,name:(0,o.computed)(()=>e.name),form:(0,o.computed)(()=>e.form),largeStep:k,thumbLabels:(0,o.computed)(()=>e.thumbLabels),activeThumbIndex:v,draggingIndex:s,updateValue:h}),L.useFormReset(()=>d.value,()=>{P(u.value,e.defaultValue)||_([...e.defaultValue],"programmatic")});function q(t){const a=d.value?.getBoundingClientRect();if(!a)return null;const n=e.orientation==="horizontal"?(t.clientX-a.left)/a.width:1-(t.clientY-a.top)/a.height,l=e.orientation==="horizontal"&&S.value==="rtl"?1-n:n;return e.min+l*(e.max-e.min)}function T(t){if(e.disabled)return;const a=q(t);if(a==null)return;const n=u.value;let l=0,r=1/0;n.forEach((m,g)=>{const p=Math.abs(m-a);p<r&&(r=p,l=g)}),v.value=l,s.value=l,c=u.value,t.target.setPointerCapture?.(t.pointerId),h(l,a,"pointer")}function D(t){if(e.disabled||!t.target.hasPointerCapture?.(t.pointerId))return;const a=q(t);a!=null&&h(v.value,a,"pointer")}function R(){c=null,s.value=null}function E(t){if(t.target.hasPointerCapture?.(t.pointerId)){t.target.releasePointerCapture(t.pointerId);const a=c;c=null,s.value=null,a&&!P(a,u.value)&&f("value-commit",u.value)}}return(t,a)=>((0,o.openBlock)(),(0,o.createElementBlock)("span",{class:"skdx-slider","data-part":"root","data-skdx-component":"slider",ref_key:"rootRef",ref:d,"data-orientation":i.orientation,"data-disabled":i.disabled?"":void 0,"data-dragging":s.value===null?void 0:"",style:{"touch-action":"none"},onPointerdown:T,onPointermove:D,onPointerup:E,onPointercancel:R},[(0,o.renderSlot)(t.$slots,"default",{},()=>[(0,o.createVNode)(z.default,{marks:i.marks,"show-tooltip":i.showTooltip,"thumb-labels":i.thumbLabels},null,8,["marks","show-tooltip","thumb-labels"])])],40,F))}});exports.default=N;

package/dist/slider/Slider.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{clamp as e}from"../utils/clamp.js";import{SLIDER_CONTEXT as t,SLIDER_THUMB_AUTO_INDEX as a,roundToStep as n}from"./context.js";import{computed as o,createElementBlock as i,defineComponent as l,openBlock as r,provide as u,ref as d,renderSlot as s}from"vue";var m=["data-orientation","data-disabled"],c=/* @__PURE__ */l({__name:"Slider",props:{value:{default:void 0},defaultValue:{default:()=>[0]},min:{default:0},max:{default:100},step:{default:1},disabled:{type:Boolean,default:!1},orientation:{default:"horizontal"},name:{default:void 0}},emits:["update:value","value-change","value-commit"],setup(l,{emit:c}){const p=l,f=c,v=d(p.defaultValue),h=o(()=>void 0===p.value?v.value:p.value),x=d(null),b=d(0);function g(t,a){const o=n(a,p.min,p.step),i=h.value,l=t>0?i[t-1]??p.min:p.min,r=t<i.length-1?i[t+1]??p.max:p.max,u=e(o,Math.max(l,p.min),Math.min(r,p.max));if(i[t]===u)return;const d=[...i];d[t]=u,function(e){void 0===p.value&&(v.value=e),f("update:value",e),f("value-change",e)}(d)}let I=0;function C(e){const t=x.value?.getBoundingClientRect();if(!t)return null;const a="horizontal"===p.orientation?(e.clientX-t.left)/t.width:1-(e.clientY-t.top)/t.height;return p.min+a*(p.max-p.min)}function P(e){if(p.disabled)return;const t=C(e);if(null==t)return;const a=h.value;let n=0,o=1/0;a.forEach((e,a)=>{const i=Math.abs(e-t);i<o&&(o=i,n=a)}),b.value=n,e.target.setPointerCapture?.(e.pointerId),g(n,t)}function _(e){if(p.disabled||!e.target.hasPointerCapture?.(e.pointerId))return;const t=C(e);null!=t&&g(b.value,t)}function E(e){e.target.hasPointerCapture?.(e.pointerId)&&(e.target.releasePointerCapture(e.pointerId),f("value-commit",h.value))}return u(a,{next:()=>I++}),u(t,{values:h,min:o(()=>p.min),max:o(()=>p.max),step:o(()=>p.step),disabled:o(()=>p.disabled),orientation:o(()=>p.orientation),name:o(()=>p.name),activeThumbIndex:b,updateValue:g}),(e,t)=>(r(),i("span",{class:"skdx-slider","data-part":"root","data-skdx-component":"slider",ref_key:"rootRef",ref:x,"data-orientation":l.orientation,"data-disabled":l.disabled?"":void 0,style:{"touch-action":"none"},onPointerdown:P,onPointermove:_,onPointerup:E},[s(e.$slots,"default")],40,m))}});export{c as default};
+import{useFormReset as e}from"../utils/useFormReset.js";import{resolveDirection as t,useDirection as a}from"../utils/direction.js";import{clamp as n}from"../utils/clamp.js";import{SLIDER_CONTEXT as o,SLIDER_THUMB_AUTO_INDEX as l,roundToStep as i}from"./context.js";import u from"./SliderAnatomy.vue.js";import{computed as r,createElementBlock as s,createVNode as d,defineComponent as m,openBlock as p,provide as f,ref as v,renderSlot as c}from"vue";var h=["data-orientation","data-disabled","data-dragging"],g=/* @__PURE__ */m({__name:"Slider",props:{value:{default:void 0},defaultValue:{default:()=>[0]},min:{default:0},max:{default:100},step:{default:1},disabled:{type:Boolean,default:!1},orientation:{default:"horizontal"},largeStep:{default:void 0},minStepsBetweenValues:{default:0},name:{default:void 0},form:{default:void 0},marks:{default:void 0},showTooltip:{type:Boolean,default:!1},thumbLabels:{default:void 0}},emits:["update:value","value-change","value-commit"],setup(m,{emit:g}){const b=m,x=g,S=v(b.defaultValue),k=r(()=>void 0===b.value?S.value:b.value),I=v(null),V=v(0),w=v(null),B=r(()=>b.largeStep??Math.max((b.max-b.min)/10,b.step));let P=null;function T(e,t){return e.length===t.length&&e.every((e,a)=>e===t[a])}const C=a(),_=r(()=>t(I.value,C()));function y(e,t){const a=k.value;void 0===b.value&&(S.value=e),x("update:value",e),x("value-change",{value:e,previousValue:a,reason:t})}function E(e,t,a){const o=i(t,b.min,b.step),l=k.value,u=b.minStepsBetweenValues*b.step,r=e>0?(l[e-1]??b.min)+u:b.min,s=e<l.length-1?(l[e+1]??b.max)-u:b.max,d=n(o,Math.max(r,b.min),Math.min(s,b.max));if(l[e]===d)return;const m=[...l];m[e]=d,y(m,a)}let L=0;function R(e){const t=I.value?.getBoundingClientRect();if(!t)return null;const a="horizontal"===b.orientation?(e.clientX-t.left)/t.width:1-(e.clientY-t.top)/t.height,n="horizontal"===b.orientation&&"rtl"===_.value?1-a:a;return b.min+n*(b.max-b.min)}function j(e){if(b.disabled)return;const t=R(e);if(null==t)return;const a=k.value;let n=0,o=1/0;a.forEach((e,a)=>{const l=Math.abs(e-t);l<o&&(o=l,n=a)}),V.value=n,w.value=n,P=k.value,e.target.setPointerCapture?.(e.pointerId),E(n,t,"pointer")}function D(e){if(b.disabled||!e.target.hasPointerCapture?.(e.pointerId))return;const t=R(e);null!=t&&E(V.value,t,"pointer")}function M(){P=null,w.value=null}function z(e){if(e.target.hasPointerCapture?.(e.pointerId)){e.target.releasePointerCapture(e.pointerId);const t=P;P=null,w.value=null,t&&!T(t,k.value)&&x("value-commit",k.value)}}return f(l,{next:()=>L++}),f(o,{values:k,min:r(()=>b.min),max:r(()=>b.max),step:r(()=>b.step),disabled:r(()=>b.disabled),orientation:r(()=>b.orientation),direction:_,name:r(()=>b.name),form:r(()=>b.form),largeStep:B,thumbLabels:r(()=>b.thumbLabels),activeThumbIndex:V,draggingIndex:w,updateValue:E}),e(()=>I.value,()=>{T(k.value,b.defaultValue)||y([...b.defaultValue],"programmatic")}),(e,t)=>(p(),s("span",{class:"skdx-slider","data-part":"root","data-skdx-component":"slider",ref_key:"rootRef",ref:I,"data-orientation":m.orientation,"data-disabled":m.disabled?"":void 0,"data-dragging":null===w.value?void 0:"",style:{"touch-action":"none"},onPointerdown:j,onPointermove:D,onPointerup:z,onPointercancel:M},[c(e.$slots,"default",{},()=>[d(u,{marks:m.marks,"show-tooltip":m.showTooltip,"thumb-labels":m.thumbLabels},null,8,["marks","show-tooltip","thumb-labels"])])],40,h))}});export{g as default};

package/dist/slider/SliderAnatomy.vue.cjs

@@ -0,0 +1 @@
+const e=require("./SliderAnatomy.vue_vue_type_script_setup_true_lang.cjs");var t=e.default;exports.default=t;

package/dist/slider/SliderAnatomy.vue.d.cts

@@ -0,0 +1,18 @@
+import type { SliderMarkData } from './types.cjs';
+/**
+ * Default anatomy for `SkdxSlider`: Track with Range, one Thumb per `values`
+ * entry, then one Mark per entry in `marks`. Thumb count is driven by `values`
+ * length.
+ * @internal
+ */
+type __VLS_Props = {
+    marks?: readonly SliderMarkData[];
+    showTooltip?: boolean;
+    thumbLabels?: readonly string[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    marks: readonly SliderMarkData[];
+    showTooltip: boolean;
+    thumbLabels: readonly string[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/slider/SliderAnatomy.vue.d.ts

@@ -0,0 +1,18 @@
+import type { SliderMarkData } from './types.js';
+/**
+ * Default anatomy for `SkdxSlider`: Track with Range, one Thumb per `values`
+ * entry, then one Mark per entry in `marks`. Thumb count is driven by `values`
+ * length.
+ * @internal
+ */
+type __VLS_Props = {
+    marks?: readonly SliderMarkData[];
+    showTooltip?: boolean;
+    thumbLabels?: readonly string[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    marks: readonly SliderMarkData[];
+    showTooltip: boolean;
+    thumbLabels: readonly string[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/slider/SliderAnatomy.vue.js

@@ -0,0 +1 @@
+import e from"./SliderAnatomy.vue_vue_type_script_setup_true_lang.js";var t=e;export{t as default};

package/dist/slider/SliderAnatomy.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const u=require("../utils/is-dev-mode.cjs"),o=require("./context.cjs"),s=require("./SliderMark.vue.cjs"),c=require("./SliderRange.vue.cjs"),d=require("./SliderThumb.vue.cjs"),m=require("./SliderTrack.vue.cjs");let e=require("vue");var h={key:0,"aria-hidden":"true",class:"skdx-slider__tooltip","data-part":"tooltip"},f=(0,e.defineComponent)({__name:"SliderAnatomy",props:{marks:{default:void 0},showTooltip:{type:Boolean,default:!1},thumbLabels:{default:void 0}},setup(l){const i=l,n=(0,e.inject)(o.SLIDER_CONTEXT);if(!n)throw new Error("<SliderAnatomy> must be used inside <SkdxSlider>.");const r=n;return(0,e.watchEffect)(()=>{u.isDevMode()&&(r.values.value.length<=1||i.thumbLabels&&i.thumbLabels.length>=r.values.value.length||console.warn(`[skandadx] Slider derives ${r.values.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"]).`))}),(v,p)=>((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,null,[(0,e.createVNode)(m.default,null,{default:(0,e.withCtx)(()=>[(0,e.createVNode)(c.default)]),_:1}),((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)((0,e.unref)(r).values.value,(t,a)=>((0,e.openBlock)(),(0,e.createBlock)(d.default,{key:a,index:a,"aria-label":l.thumbLabels?.[a]},{default:(0,e.withCtx)(()=>[l.showTooltip?((0,e.openBlock)(),(0,e.createElementBlock)("span",h,(0,e.toDisplayString)(t),1)):(0,e.createCommentVNode)("",!0)]),_:2},1032,["index","aria-label"]))),128)),((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(l.marks,t=>((0,e.openBlock)(),(0,e.createBlock)(s.default,{key:t.value,value:t.value},{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(t.label),1)]),_:2},1032,["value"]))),128))],64))}});exports.default=f;

package/dist/slider/SliderAnatomy.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{isDevMode as e}from"../utils/is-dev-mode.js";import{SLIDER_CONTEXT as a}from"./context.js";import l from"./SliderMark.vue.js";import t from"./SliderRange.vue.js";import s from"./SliderThumb.vue.js";import i from"./SliderTrack.vue.js";import{Fragment as r,createBlock as o,createCommentVNode as n,createElementBlock as u,createTextVNode as m,createVNode as d,defineComponent as p,inject as v,openBlock as c,renderList as h,toDisplayString as b,unref as f,watchEffect as k,withCtx as x}from"vue";var S={key:0,"aria-hidden":"true",class:"skdx-slider__tooltip","data-part":"tooltip"},g=/* @__PURE__ */p({__name:"SliderAnatomy",props:{marks:{default:void 0},showTooltip:{type:Boolean,default:!1},thumbLabels:{default:void 0}},setup(p){const g=p,w=v(a);if(!w)throw new Error("<SliderAnatomy> must be used inside <SkdxSlider>.");const y=w;return k(()=>{e()&&(y.values.value.length<=1||g.thumbLabels&&g.thumbLabels.length>=y.values.value.length||console.warn(`[skandadx] Slider derives ${y.values.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"]).`))}),(e,a)=>(c(),u(r,null,[d(i,null,{default:x(()=>[d(t)]),_:1}),(c(!0),u(r,null,h(f(y).values.value,(e,a)=>(c(),o(s,{key:a,index:a,"aria-label":p.thumbLabels?.[a]},{default:x(()=>[p.showTooltip?(c(),u("span",S,b(e),1)):n("",!0)]),_:2},1032,["index","aria-label"]))),128)),(c(!0),u(r,null,h(p.marks,e=>(c(),o(l,{key:e.value,value:e.value},{default:x(()=>[m(b(e.label),1)]),_:2},1032,["value"]))),128))],64))}});export{g as default};

package/dist/slider/SliderMark.vue.cjs

@@ -0,0 +1 @@
+const e=require("./SliderMark.vue_vue_type_script_setup_true_lang.cjs");var r=e.default;exports.default=r;

package/dist/slider/SliderMark.vue.d.cts

@@ -0,0 +1,21 @@
+/**
+ * Optional tick at a `value` on the slider track. Positioned to align with
+ * the thumb value in both writing directions; slot content is the label, tick
+ * is drawn by `::before`. `aria-hidden` since the scale is already reported.
+ */
+type __VLS_Props = {
+    /** The value on the track this mark sits at. */
+    value: number;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/slider/SliderMark.vue.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Optional tick at a `value` on the slider track. Positioned to align with
+ * the thumb value in both writing directions; slot content is the label, tick
+ * is drawn by `::before`. `aria-hidden` since the scale is already reported.
+ */
+type __VLS_Props = {
+    /** The value on the track this mark sits at. */
+    value: number;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/slider/SliderMark.vue.js

@@ -0,0 +1 @@
+import e from"./SliderMark.vue_vue_type_script_setup_true_lang.js";var r=e;export{r as default};

package/dist/slider/SliderMark.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const i=require("./context.cjs");let e=require("vue");var u=["data-orientation","data-disabled","data-value"],d=(0,e.defineComponent)({__name:"SliderMark",props:{value:{}},setup(a){const n=a,t=(0,e.inject)(i.SLIDER_CONTEXT);if(!t)throw new Error("<SkdxSliderMark> must be used inside <SkdxSlider>.");const r=(0,e.computed)(()=>(n.value-t.min.value)/(t.max.value-t.min.value)*100),l=(0,e.computed)(()=>t.orientation.value==="horizontal"?{position:"absolute",insetInlineStart:`${r.value}%`}:{position:"absolute",bottom:`${r.value}%`});return(o,s)=>((0,e.openBlock)(),(0,e.createElementBlock)("span",{class:"skdx-slider__mark","data-part":"mark","aria-hidden":"true","data-orientation":(0,e.unref)(t).orientation.value,"data-disabled":(0,e.unref)(t).disabled.value?"":void 0,"data-value":a.value,style:(0,e.normalizeStyle)(l.value)},[(0,e.renderSlot)(o.$slots,"default")],12,u))}});exports.default=d;

package/dist/slider/SliderMark.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{SLIDER_CONTEXT as a}from"./context.js";import{computed as e,createElementBlock as t,defineComponent as o,inject as l,normalizeStyle as i,openBlock as r,renderSlot as n,unref as s}from"vue";var d=["data-orientation","data-disabled","data-value"],u=/* @__PURE__ */o({__name:"SliderMark",props:{value:{}},setup(o){const u=o,v=l(a);if(!v)throw new Error("<SkdxSliderMark> must be used inside <SkdxSlider>.");const m=e(()=>(u.value-v.min.value)/(v.max.value-v.min.value)*100),p=e(()=>"horizontal"===v.orientation.value?{position:"absolute",insetInlineStart:`${m.value}%`}:{position:"absolute",bottom:`${m.value}%`});return(a,e)=>(r(),t("span",{class:"skdx-slider__mark","data-part":"mark","aria-hidden":"true","data-orientation":s(v).orientation.value,"data-disabled":s(v).disabled.value?"":void 0,"data-value":o.value,style:i(p.value)},[n(a.$slots,"default")],12,d))}});export{u as default};

package/dist/slider/SliderRange.vue.d.cts

@@ -1,7 +1,7 @@
 /**
- * The filled portion of the 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).
+ * Filled portion of the track. Positioned with logical inline axes
+ * (respects `dir="rtl"`) and physical block axes (does not follow writing
+ * direction).
  */
 type __VLS_Props = {};
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/slider/SliderRange.vue.d.ts

@@ -1,7 +1,7 @@
 /**
- * The filled portion of the 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).
+ * Filled portion of the track. Positioned with logical inline axes
+ * (respects `dir="rtl"`) and physical block axes (does not follow writing
+ * direction).
  */
 type __VLS_Props = {};
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/slider/SliderRange.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const o=require("./context.cjs");let e=require("vue");var i=["data-orientation","data-disabled"],d=(0,e.defineComponent)({__name:"SliderRange",setup(s){const t=(0,e.inject)(o.SLIDER_CONTEXT);if(!t)throw new Error("<SkdxSliderRange> must be used inside <SkdxSlider>.");const a=(0,e.computed)(()=>t.values.value.map(r=>(r-t.min.value)/(t.max.value-t.min.value)*100)),n=(0,e.computed)(()=>t.values.value.length>1?Math.min(...a.value):0),l=(0,e.computed)(()=>100-Math.max(...a.value,0)),u=(0,e.computed)(()=>t.orientation.value==="horizontal"?{left:`${n.value}%`,right:`${l.value}%`}:{bottom:`${n.value}%`,top:`${l.value}%`});return(r,v)=>((0,e.openBlock)(),(0,e.createElementBlock)("span",{class:"skdx-slider__range","data-part":"range","data-orientation":(0,e.unref)(t).orientation.value,"data-disabled":(0,e.unref)(t).disabled.value?"":void 0,style:(0,e.normalizeStyle)(u.value)},null,12,i))}});exports.default=d;
+const i=require("./context.cjs");let e=require("vue");var o=["data-orientation","data-disabled"],d=(0,e.defineComponent)({__name:"SliderRange",setup(s){const t=(0,e.inject)(i.SLIDER_CONTEXT);if(!t)throw new Error("<SkdxSliderRange> must be used inside <SkdxSlider>.");const a=(0,e.computed)(()=>t.values.value.map(r=>(r-t.min.value)/(t.max.value-t.min.value)*100)),n=(0,e.computed)(()=>t.values.value.length>1?Math.min(...a.value):0),l=(0,e.computed)(()=>100-Math.max(...a.value,0)),u=(0,e.computed)(()=>t.orientation.value==="horizontal"?{insetInlineStart:`${n.value}%`,insetInlineEnd:`${l.value}%`}:{bottom:`${n.value}%`,top:`${l.value}%`});return(r,v)=>((0,e.openBlock)(),(0,e.createElementBlock)("span",{class:"skdx-slider__range","data-part":"range","data-orientation":(0,e.unref)(t).orientation.value,"data-disabled":(0,e.unref)(t).disabled.value?"":void 0,style:(0,e.normalizeStyle)(u.value)},null,12,o))}});exports.default=d;

package/dist/slider/SliderRange.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{SLIDER_CONTEXT as a}from"./context.js";import{computed as e,createElementBlock as t,defineComponent as l,inject as n,normalizeStyle as o,openBlock as i,unref as r}from"vue";var s=["data-orientation","data-disabled"],u=/* @__PURE__ */l({__name:"SliderRange",setup(l){const u=n(a);if(!u)throw new Error("<SkdxSliderRange> must be used inside <SkdxSlider>.");const d=e(()=>u.values.value.map(a=>(a-u.min.value)/(u.max.value-u.min.value)*100)),v=e(()=>u.values.value.length>1?Math.min(...d.value):0),m=e(()=>100-Math.max(...d.value,0)),p=e(()=>"horizontal"===u.orientation.value?{left:`${v.value}%`,right:`${m.value}%`}:{bottom:`${v.value}%`,top:`${m.value}%`});return(a,e)=>(i(),t("span",{class:"skdx-slider__range","data-part":"range","data-orientation":r(u).orientation.value,"data-disabled":r(u).disabled.value?"":void 0,style:o(p.value)},null,12,s))}});export{u as default};
+import{SLIDER_CONTEXT as a}from"./context.js";import{computed as e,createElementBlock as t,defineComponent as n,inject as l,normalizeStyle as i,openBlock as o,unref as s}from"vue";var r=["data-orientation","data-disabled"],u=/* @__PURE__ */n({__name:"SliderRange",setup(n){const u=l(a);if(!u)throw new Error("<SkdxSliderRange> must be used inside <SkdxSlider>.");const d=e(()=>u.values.value.map(a=>(a-u.min.value)/(u.max.value-u.min.value)*100)),v=e(()=>u.values.value.length>1?Math.min(...d.value):0),m=e(()=>100-Math.max(...d.value,0)),p=e(()=>"horizontal"===u.orientation.value?{insetInlineStart:`${v.value}%`,insetInlineEnd:`${m.value}%`}:{bottom:`${v.value}%`,top:`${m.value}%`});return(a,e)=>(o(),t("span",{class:"skdx-slider__range","data-part":"range","data-orientation":s(u).orientation.value,"data-disabled":s(u).disabled.value?"":void 0,style:i(p.value)},null,12,r))}});export{u as default};

package/dist/slider/SliderThumb.vue.d.cts

@@ -1,21 +1,30 @@
 /**
- * A single draggable handle on a `SkdxSlider`, positioned by `index` (or, if
- * omitted, by its render order among sibling thumbs — the Vue equivalent of
- * React's nested per-render counter context, implemented here as a
- * `provide`d counter incremented once per thumb during setup). Renders
- * `role="slider"`, focusable and keyboard-operable: Arrow keys step by
- * `step`, PageUp/PageDown step by a larger increment, Home/End jump to
- * `min`/`max`. When the slider has a `name`, also renders a
- * visually-hidden native `<input type="number">` (two root nodes, so attrs
- * fallthrough is disabled and forwarded explicitly).
+ * A single draggable handle on a `SkdxSlider`, positioned by `index` or render order.
+ * Renders `role="slider"`, keyboard-operable via Arrow keys, PageUp/PageDown, Home/End.
+ * Optionally renders a hidden form input and slot content.
  */
 type __VLS_Props = {
     /**
-     * Which value in the array this thumb controls. Defaults to its render
-     * order among sibling thumbs (0 for the first, 1 for the second, ...).
+     * Index of the value this thumb controls, defaulting to its render order.
      * @default undefined
      */
     index?: number;
+    /**
+     * Aria-valuetext for this thumb when the raw number is not what the user is
+     * choosing — `"Medium"` for a size scale, `"£20"` for a price.
+     * @default undefined
+     */
+    valueText?: string;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/slider/SliderThumb.vue.d.ts

@@ -1,21 +1,30 @@
 /**
- * A single draggable handle on a `SkdxSlider`, positioned by `index` (or, if
- * omitted, by its render order among sibling thumbs — the Vue equivalent of
- * React's nested per-render counter context, implemented here as a
- * `provide`d counter incremented once per thumb during setup). Renders
- * `role="slider"`, focusable and keyboard-operable: Arrow keys step by
- * `step`, PageUp/PageDown step by a larger increment, Home/End jump to
- * `min`/`max`. When the slider has a `name`, also renders a
- * visually-hidden native `<input type="number">` (two root nodes, so attrs
- * fallthrough is disabled and forwarded explicitly).
+ * A single draggable handle on a `SkdxSlider`, positioned by `index` or render order.
+ * Renders `role="slider"`, keyboard-operable via Arrow keys, PageUp/PageDown, Home/End.
+ * Optionally renders a hidden form input and slot content.
  */
 type __VLS_Props = {
     /**
-     * Which value in the array this thumb controls. Defaults to its render
-     * order among sibling thumbs (0 for the first, 1 for the second, ...).
+     * Index of the value this thumb controls, defaulting to its render order.
      * @default undefined
      */
     index?: number;
+    /**
+     * Aria-valuetext for this thumb when the raw number is not what the user is
+     * choosing — `"Medium"` for a size scale, `"£20"` for a price.
+     * @default undefined
+     */
+    valueText?: string;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/slider/SliderThumb.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const m=require("../utils/direction.cjs"),c=require("./context.cjs");let a=require("vue");var g=["aria-valuemin","aria-valuemax","aria-valuenow","aria-orientation","aria-disabled","data-orientation","data-disabled","tabindex"],y=["name","value","disabled"],k=(0,a.defineComponent)({inheritAttrs:!1,__name:"SliderThumb",props:{index:{}},setup(p){const f=p,e=(0,a.inject)(c.SLIDER_CONTEXT);if(!e)throw new Error("<SkdxSliderThumb> must be used inside <SkdxSlider>.");const b=m.useDirection(),x=(0,a.inject)(c.SLIDER_THUMB_AUTO_INDEX),n=f.index??x?.next()??0,u=(0,a.computed)(()=>e.values.value[n]??e.min.value),l=(0,a.computed)(()=>(u.value-e.min.value)/(e.max.value-e.min.value)*100),_=(0,a.computed)(()=>e.orientation.value==="horizontal"?{position:"absolute",left:`${l.value}%`,transform:"translateX(-50%)"}:{position:"absolute",bottom:`${l.value}%`,transform:"translateY(50%)"});function h(t){if(e.disabled.value)return;const r=m.directionalKey(t.key,t.currentTarget,b()),{step:i,min:o,max:d}={step:e.step.value,min:e.min.value,max:e.max.value},s=Math.max((d-o)/10,i),v={ArrowRight:i,ArrowUp:i,ArrowLeft:-i,ArrowDown:-i,PageUp:s,PageDown:-s};r in v?(t.preventDefault(),e.updateValue(n,u.value+v[r])):r==="Home"?(t.preventDefault(),e.updateValue(n,o)):r==="End"&&(t.preventDefault(),e.updateValue(n,d))}function w(){e.activeThumbIndex.value=n}return(t,r)=>((0,a.openBlock)(),(0,a.createElementBlock)(a.Fragment,null,[(0,a.createElementVNode)("span",(0,a.mergeProps)({class:"skdx-slider__thumb","data-part":"thumb",role:"slider","aria-valuemin":(0,a.unref)(e).min.value,"aria-valuemax":(0,a.unref)(e).max.value,"aria-valuenow":u.value,"aria-orientation":(0,a.unref)(e).orientation.value,"aria-disabled":(0,a.unref)(e).disabled.value||void 0,"data-orientation":(0,a.unref)(e).orientation.value,"data-disabled":(0,a.unref)(e).disabled.value?"":void 0,tabindex:(0,a.unref)(e).disabled.value?void 0:0,style:_.value,onKeydown:h,onPointerdown:w},t.$attrs),null,16,g),(0,a.unref)(e).name.value?((0,a.openBlock)(),(0,a.createElementBlock)("input",{key:0,type:"number","aria-hidden":"true",tabindex:"-1",name:(0,a.unref)(e).values.value.length>1?`${(0,a.unref)(e).name.value}[${(0,a.unref)(n)}]`:(0,a.unref)(e).name.value,value:u.value,disabled:(0,a.unref)(e).disabled.value,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,y)):(0,a.createCommentVNode)("",!0)],64))}});exports.default=k;
+const h=require("../utils/direction.cjs"),v=require("./context.cjs");let a=require("vue");var w=["aria-valuemin","aria-valuemax","aria-valuenow","aria-valuetext","aria-orientation","aria-disabled","data-orientation","data-disabled","data-dragging","tabindex"],y=["name","value","disabled","form"],k=(0,a.defineComponent)({inheritAttrs:!1,__name:"SliderThumb",props:{index:{},valueText:{}},setup(o){const m=o,e=(0,a.inject)(v.SLIDER_CONTEXT);if(!e)throw new Error("<SkdxSliderThumb> must be used inside <SkdxSlider>.");const c=(0,a.inject)(v.SLIDER_THUMB_AUTO_INDEX),n=m.index??c?.next()??0,i=(0,a.computed)(()=>e.values.value[n]??e.min.value),d=(0,a.computed)(()=>(i.value-e.min.value)/(e.max.value-e.min.value)*100),f=(0,a.computed)(()=>e.orientation.value==="horizontal"?{position:"absolute",insetInlineStart:`${d.value}%`,transform:`translateX(${e.direction.value==="rtl"?"":"-"}50%)`}:{position:"absolute",bottom:`${d.value}%`,transform:"translateY(50%)"});function p(t){if(e.disabled.value)return;const r=h.directionalKey(t.key,t.currentTarget,e.direction.value),{step:x,min:g,max:_}={step:e.step.value,min:e.min.value,max:e.max.value},l=e.largeStep.value,u=t.shiftKey?l:x,s={ArrowRight:u,ArrowUp:u,ArrowLeft:-u,ArrowDown:-u,PageUp:l,PageDown:-l};r in s?(t.preventDefault(),e.updateValue(n,i.value+s[r],"keyboard")):r==="Home"?(t.preventDefault(),e.updateValue(n,g,"keyboard")):r==="End"&&(t.preventDefault(),e.updateValue(n,_,"keyboard"))}function b(){e.activeThumbIndex.value=n}return(t,r)=>((0,a.openBlock)(),(0,a.createElementBlock)(a.Fragment,null,[(0,a.createElementVNode)("span",(0,a.mergeProps)({class:"skdx-slider__thumb","data-part":"thumb",role:"slider","aria-valuemin":(0,a.unref)(e).min.value,"aria-valuemax":(0,a.unref)(e).max.value,"aria-valuenow":i.value,"aria-valuetext":o.valueText,"aria-orientation":(0,a.unref)(e).orientation.value,"aria-disabled":(0,a.unref)(e).disabled.value||void 0,"data-orientation":(0,a.unref)(e).orientation.value,"data-disabled":(0,a.unref)(e).disabled.value?"":void 0,"data-dragging":(0,a.unref)(e).draggingIndex.value===(0,a.unref)(n)?"":void 0,tabindex:(0,a.unref)(e).disabled.value?void 0:0,style:f.value,onKeydown:p,onPointerdown:b},t.$attrs),[(0,a.renderSlot)(t.$slots,"default")],16,w),(0,a.unref)(e).name.value?((0,a.openBlock)(),(0,a.createElementBlock)("input",{key:0,type:"number","aria-hidden":"true",tabindex:"-1",name:(0,a.unref)(e).values.value.length>1?`${(0,a.unref)(e).name.value}[${(0,a.unref)(n)}]`:(0,a.unref)(e).name.value,value:i.value,disabled:(0,a.unref)(e).disabled.value,form:(0,a.unref)(e).form.value,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,y)):(0,a.createCommentVNode)("",!0)],64))}});exports.default=k;

package/dist/slider/SliderThumb.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{directionalKey as e,useDirection as a}from"../utils/direction.js";import{SLIDER_CONTEXT as t,SLIDER_THUMB_AUTO_INDEX as n}from"./context.js";import{Fragment as i,computed as l,createCommentVNode as r,createElementBlock as o,createElementVNode as u,defineComponent as s,inject as d,mergeProps as v,openBlock as m,unref as p}from"vue";var b=["aria-valuemin","aria-valuemax","aria-valuenow","aria-orientation","aria-disabled","data-orientation","data-disabled","tabindex"],x=["name","value","disabled"],c=/* @__PURE__ */s({inheritAttrs:!1,__name:"SliderThumb",props:{index:{}},setup(s){const c=s,f=d(t);if(!f)throw new Error("<SkdxSliderThumb> must be used inside <SkdxSlider>.");const h=a(),w=d(n),g=c.index??w?.next()??0,D=l(()=>f.values.value[g]??f.min.value),y=l(()=>(D.value-f.min.value)/(f.max.value-f.min.value)*100),E=l(()=>"horizontal"===f.orientation.value?{position:"absolute",left:`${y.value}%`,transform:"translateX(-50%)"}:{position:"absolute",bottom:`${y.value}%`,transform:"translateY(50%)"});function T(a){if(f.disabled.value)return;const t=e(a.key,a.currentTarget,h()),{step:n,min:i,max:l}={step:f.step.value,min:f.min.value,max:f.max.value},r=Math.max((l-i)/10,n),o={ArrowRight:n,ArrowUp:n,ArrowLeft:-n,ArrowDown:-n,PageUp:r,PageDown:-r};t in o?(a.preventDefault(),f.updateValue(g,D.value+o[t])):"Home"===t?(a.preventDefault(),f.updateValue(g,i)):"End"===t&&(a.preventDefault(),f.updateValue(g,l))}function _(){f.activeThumbIndex.value=g}return(e,a)=>(m(),o(i,null,[u("span",v({class:"skdx-slider__thumb","data-part":"thumb",role:"slider","aria-valuemin":p(f).min.value,"aria-valuemax":p(f).max.value,"aria-valuenow":D.value,"aria-orientation":p(f).orientation.value,"aria-disabled":p(f).disabled.value||void 0,"data-orientation":p(f).orientation.value,"data-disabled":p(f).disabled.value?"":void 0,tabindex:p(f).disabled.value?void 0:0,style:E.value,onKeydown:T,onPointerdown:_},e.$attrs),null,16,b),p(f).name.value?(m(),o("input",{key:0,type:"number","aria-hidden":"true",tabindex:"-1",name:p(f).values.value.length>1?`${p(f).name.value}[${p(g)}]`:p(f).name.value,value:D.value,disabled:p(f).disabled.value,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,x)):r("",!0)],64))}});export{c as default};
+import{directionalKey as e}from"../utils/direction.js";import{SLIDER_CONTEXT as a,SLIDER_THUMB_AUTO_INDEX as t}from"./context.js";import{Fragment as i,computed as n,createCommentVNode as l,createElementBlock as r,createElementVNode as o,defineComponent as u,inject as d,mergeProps as s,openBlock as v,renderSlot as m,unref as p}from"vue";var b=["aria-valuemin","aria-valuemax","aria-valuenow","aria-valuetext","aria-orientation","aria-disabled","data-orientation","data-disabled","data-dragging","tabindex"],x=["name","value","disabled","form"],c=/* @__PURE__ */u({inheritAttrs:!1,__name:"SliderThumb",props:{index:{},valueText:{}},setup(u){const c=u,f=d(a);if(!f)throw new Error("<SkdxSliderThumb> must be used inside <SkdxSlider>.");const g=d(t),h=c.index??g?.next()??0,w=n(()=>f.values.value[h]??f.min.value),y=n(()=>(w.value-f.min.value)/(f.max.value-f.min.value)*100),k=n(()=>"horizontal"===f.orientation.value?{position:"absolute",insetInlineStart:`${y.value}%`,transform:`translateX(${"rtl"===f.direction.value?"":"-"}50%)`}:{position:"absolute",bottom:`${y.value}%`,transform:"translateY(50%)"});function S(a){if(f.disabled.value)return;const t=e(a.key,a.currentTarget,f.direction.value),{step:i,min:n,max:l}={step:f.step.value,min:f.min.value,max:f.max.value},r=f.largeStep.value,o=a.shiftKey?r:i,u={ArrowRight:o,ArrowUp:o,ArrowLeft:-o,ArrowDown:-o,PageUp:r,PageDown:-r};t in u?(a.preventDefault(),f.updateValue(h,w.value+u[t],"keyboard")):"Home"===t?(a.preventDefault(),f.updateValue(h,n,"keyboard")):"End"===t&&(a.preventDefault(),f.updateValue(h,l,"keyboard"))}function T(){f.activeThumbIndex.value=h}return(e,a)=>(v(),r(i,null,[o("span",s({class:"skdx-slider__thumb","data-part":"thumb",role:"slider","aria-valuemin":p(f).min.value,"aria-valuemax":p(f).max.value,"aria-valuenow":w.value,"aria-valuetext":u.valueText,"aria-orientation":p(f).orientation.value,"aria-disabled":p(f).disabled.value||void 0,"data-orientation":p(f).orientation.value,"data-disabled":p(f).disabled.value?"":void 0,"data-dragging":p(f).draggingIndex.value===p(h)?"":void 0,tabindex:p(f).disabled.value?void 0:0,style:k.value,onKeydown:S,onPointerdown:T},e.$attrs),[m(e.$slots,"default")],16,b),p(f).name.value?(v(),r("input",{key:0,type:"number","aria-hidden":"true",tabindex:"-1",name:p(f).values.value.length>1?`${p(f).name.value}[${p(h)}]`:p(f).name.value,value:w.value,disabled:p(f).disabled.value,form:p(f).form.value,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,x)):l("",!0)],64))}});export{c as default};