@skdx/vue 0.28.0 → 0.30.0

package/dist/select/context.d.ts

@@ -1,7 +1,11 @@
 import type { ComputedRef, InjectionKey } from 'vue';
+import type { ScoredFilterResult } from '../utils/scoredFilter.js';
+import type { SelectionChangeReason } from '../utils/selection.js';
 import type { AutoFocusEvent } from '../utils/useFocusTrap.js';
-/** @internal Selector for enabled options, needed by trigger and content. */
-export declare const OPTION_SELECTOR = "[role=\"option\"]:not([data-disabled])";
+/** @internal Selector for enabled options, needed by trigger, input and content. */
+export declare const OPTION_SELECTOR = "[role=\"option\"]:not([data-disabled]):not([data-part=\"select-all\"])";
+/** Decides which options survive the draft text: a boolean keeps or drops, a number filters and ranks. */
+export type SelectFilter = (itemText: string, inputValue: string) => ScoredFilterResult;
 /** One option in the select collection, available before render. */
 export interface SelectItemDescriptor {
     /** The value committed when this option is chosen. */
@@ -19,25 +23,59 @@ export interface SelectItemDescriptor {
 }
 /** Group of options under a `SkdxSelectLabel` heading. */
 export interface SelectOptionGroup {
-    /** Rendered as the group's `SkdxSelectLabel`. */
+    /** Rendered as the group's `SkdxSelectLabel` heading. */
     label: string;
-    /** Options in this group. */
+    /** The options rendered inside this group. */
     options: SelectItemDescriptor[];
 }
 /** Flattens grouped options to flat shape for root fallback. */
 export declare function flattenSelectOptions(options: SelectItemDescriptor[] | SelectOptionGroup[] | undefined): SelectItemDescriptor[] | undefined;
+/** @internal Where to place active option on open: selected, first, or last. */
+export type SelectOpenIntent = 'selected' | 'first' | 'last';
+/** @internal One rendered option's filter text, keyed by its element id. */
+export interface SelectItemEntry {
+    /** The value this option commits when chosen. */
+    value: string;
+    /** Text the root's filter predicate matches against. */
+    text: string;
+}
+/** @internal What a multiple-mode selection key asks the open listbox to do. */
+export type SelectSelectionAction = {
+    kind: 'extend';
+    direction: 1 | -1;
+} | {
+    kind: 'range';
+} | {
+    kind: 'sweep';
+    edge: 'first' | 'last';
+} | {
+    kind: 'select-all';
+};
+/** @internal What the selection keys branch on beyond the keydown itself. */
+export interface SelectSelectionKeyState {
+    /** Whether Control+A may sweep the whole enabled set. */
+    allowSelectAll: boolean;
+    /** Whether an option is highlighted, which a range needs an end for. */
+    hasActive: boolean;
+}
 /**
- * @internal Where to place active option on open: selected, first, or last.
+ * @internal The multiple-mode selection key a keydown asks for while the
+ * listbox is open, or `null` when the key belongs to plain navigation. Shared
+ * so the trigger and the filter input read the same keyboard.
  */
-export type SelectOpenIntent = 'selected' | 'first' | 'last';
+export declare function selectSelectionKeyAction(event: KeyboardEvent, { allowSelectAll, hasActive }: SelectSelectionKeyState): SelectSelectionAction | null;
+/** @internal Default selection announcement, e.g. "2 selected". */
+export declare function defaultGetSelectionLabel(count: number): string;
+/** @internal Centres an option inside the listbox's own scroller, using rects. */
+export declare function scrollIntoListbox(content: HTMLElement, option: HTMLElement): void;
 /** @internal Shared state for a Select and its parts. */
 export interface SelectContext {
     open: boolean;
-    /** Multi-select mode. */
+    /** Whether the select allows more than one selection. */
     multiple: boolean;
     /** Whether selecting an option closes the listbox. */
     closeOnSelect: boolean;
-    /** All selected values. */
+    /** All of the currently selected values. */
     selectedValues: string[];
     /** Options known before listbox renders (trigger typeahead pool). */
     collection: SelectItemDescriptor[];
@@ -49,6 +87,44 @@ export interface SelectContext {
     readOnly: boolean;
     required: boolean;
     invalid: boolean;
+    /** Whether a filter Input stands in for the trigger and narrows the options. */
+    filterable: boolean;
+    /** Whether the option list is in flight, published as aria-busy/data-loading. */
+    loading: boolean;
+    /** Whether Control+A may sweep every enabled option while multiple. */
+    allowSelectAll: boolean;
+    /** Whether the selection has reached `maxSelected`, capping the options that would grow it. */
+    atMax: boolean;
+    /** Draft text in the filter Input. */
+    inputValue: string;
+    /** Replaces the draft text, emitting input-value-change. */
+    setInputValue(next: string): void;
+    /** The filter Input element, which holds DOM focus while `filterable`. */
+    inputEl: HTMLElement | null;
+    /** How many options currently survive the filter, for the Empty part. */
+    itemCount: number;
+    /** Publishes an option's filter text while it is rendered. */
+    registerItem(id: string, entry: SelectItemEntry): void;
+    /** Withdraws an option the filter dropped or unmount removed. */
+    unregisterItem(id: string): void;
+    /** The entry an option id registered, for keyboard selection. */
+    getItem(id: string): SelectItemEntry | undefined;
+    /** Whether an option's text survives the current filter and draft text. */
+    matchesFilter(text: string): boolean;
+    /** The rendered enabled options in traversal order, ranked when the filter scores. */
+    orderedOptions(): HTMLElement[];
+    /** Selects the run between the range anchor and the highlighted option. */
+    selectRange(): void;
+    /** Selects from the highlighted option to one end of the list, additively. */
+    selectToEdge(edge: 'first' | 'last'): void;
+    /** Selects every enabled option, or clears them when all are already selected. */
+    selectAllOrClear(): void;
+    /** Empties the selection and any draft text in one step. */
+    clear(): void;
+    /** Removes the last selected value, for Backspace on an empty filter Input. */
+    removeLast(): void;
+    /** Removes one value from the selection, for a Tag's remove button. */
+    deselect(value: string): void;
     contentId: string;
     /** Id of the `SkdxSelectValue` part, named by trigger's `aria-labelledby`. */
     valueId: string;
@@ -64,18 +140,18 @@ export interface SelectContext {
     setOpen(open: boolean): void;
     /** Move virtual focus or clear with null. */
     setActiveId(id: string | null): void;
-    /** Report whether SkdxSelectValue is mounted. */
+    /** Reports whether a SkdxSelectValue part is mounted. */
     setHasValuePart(present: boolean): void;
     /** Check if a value is selected. */
     isSelected(value: string): boolean;
-    /** Replace or toggle selection. */
-    selectItem(value: string): void;
+    /** Replaces the selection, or toggles it in multiple mode. */
+    selectItem(value: string, reason?: SelectionChangeReason): void;
     registerOptionLabel(value: string, label: string): void;
     /** Get label: registered text, items entry, or value itself. */
     getOptionLabel(value: string): string;
     /** Return focus to trigger (Escape, commit). */
     focusTrigger(): void;
-    /** Close-auto-focus emitter for trigger restoration. */
+    /** Close-auto-focus emitter used for trigger focus restoration. */
     closeAutoFocus: {
         current: ((event: AutoFocusEvent) => void) | undefined;
     };
@@ -86,20 +162,22 @@ export declare const SELECT_CONTEXT: InjectionKey<SelectContext>;
 export declare function nextSelectContentId(): string;
 /** @internal Unique id for Value part (named by trigger aria-labelledby). */
 export declare function nextSelectValueId(): string;
+/** @internal The `<label for>` or wrapping `<label>` naming the trigger, given an id if it has none. */
+export declare function associatedLabelId(trigger: HTMLElement | null): string | null;
 /** @internal Unique, stable id for SkdxSelectItem (named by aria-activedescendant). */
 export declare function nextSelectItemId(): string;
 /** @internal Unique id for group label (claimed by SkdxSelectLabel). */
 export declare function nextSelectGroupLabelId(): string;
 /** @internal Group context for label id wiring. */
 export interface SelectGroupContext {
-    /** Id that group's aria-labelledby names. */
+    /** Id that the group's aria-labelledby attribute names. */
     labelId: string;
 }
 /** @internal Injection key for group label id. */
 export declare const SELECT_GROUP_CONTEXT: InjectionKey<SelectGroupContext>;
 /** @internal Option state for indicator rendering. */
 export interface SelectItemContext {
-    /** Whether this option is selected. */
+    /** Whether this option is currently selected. */
     selected: ComputedRef<boolean>;
     disabled: ComputedRef<boolean>;
 }

package/dist/select/context.js

@@ -1 +1 @@
-import{nextId as t}from"../utils/id.js";var e='[role="option"]:not([data-disabled])';function n(t){if(t)return t.flatMap(t=>"options"in t?t.options:[t])}var o=/* @__PURE__ */Symbol("skdx-select-context");function s(){return t("select-content")}function l(){return t("select-value")}function a(){return t("select-item")}function c(){return t("select-group-label")}var r=/* @__PURE__ */Symbol("skdx-select-group-context"),i=/* @__PURE__ */Symbol("skdx-select-item-context");export{e as OPTION_SELECTOR,o as SELECT_CONTEXT,r as SELECT_GROUP_CONTEXT,i as SELECT_ITEM_CONTEXT,n as flattenSelectOptions,s as nextSelectContentId,c as nextSelectGroupLabelId,a as nextSelectItemId,l as nextSelectValueId};
+import{nextId as e}from"../utils/id.js";var t='[role="option"]:not([data-disabled]):not([data-part="select-all"])';function n(e){if(e)return e.flatMap(e=>"options"in e?e.options:[e])}function l(e,{allowSelectAll:t,hasActive:n}){const l=function(e){return e.ctrlKey&&e.shiftKey?"Home"===e.key?"first":"End"===e.key?"last":null:null}(e);if(l)return{kind:"sweep",edge:l};if((e.ctrlKey||e.metaKey)&&"a"===e.key.toLowerCase())return t?{kind:"select-all"}:null;if(e.shiftKey&&" "===e.key)return n?{kind:"range"}:null;const o=function(e){return e.shiftKey?"ArrowDown"===e.key?1:"ArrowUp"===e.key?-1:null:null}(e);return o?{kind:"extend",direction:o}:null}function o(e){return 0===e?"none selected":`${e} selected`}function r(e,t){const n=e.querySelector('[data-part="viewport"]')??e;if(n===t||!n.contains(t))return;const l=n.getBoundingClientRect(),o=t.getBoundingClientRect();n.scrollTop+=o.top-l.top-(l.height-o.height)/2}var i=/* @__PURE__ */Symbol("skdx-select-context");function s(){return e("select-content")}function c(){return e("select-value")}function a(t){if(!t)return null;const n=t.getRootNode(),l=(t.id?Array.from(n.querySelectorAll("[for]")).find(e=>e.getAttribute("for")===t.id):void 0)??t.closest("label");return l?(l.id||(l.id=e("select-label")),l.id):null}function u(){return e("select-item")}function d(){return e("select-group-label")}var f=/* @__PURE__ */Symbol("skdx-select-group-context"),y=/* @__PURE__ */Symbol("skdx-select-item-context");export{t as OPTION_SELECTOR,i as SELECT_CONTEXT,f as SELECT_GROUP_CONTEXT,y as SELECT_ITEM_CONTEXT,a as associatedLabelId,o as defaultGetSelectionLabel,n as flattenSelectOptions,s as nextSelectContentId,d as nextSelectGroupLabelId,u as nextSelectItemId,c as nextSelectValueId,r as scrollIntoListbox,l as selectSelectionKeyAction};

package/dist/select/index.d.cts

@@ -1,2 +1,2 @@
 export { default as SkdxSelect } from './Select.vue.cjs';
-export type { SelectItemDescriptor, SelectOptionGroup } from './context.cjs';
+export type { SelectFilter, SelectItemDescriptor, SelectOptionGroup } from './context.cjs';

package/dist/select/index.d.ts

@@ -1,2 +1,2 @@
 export { default as SkdxSelect } from './Select.vue.js';
-export type { SelectItemDescriptor, SelectOptionGroup } from './context.js';
+export type { SelectFilter, SelectItemDescriptor, SelectOptionGroup } from './context.js';

package/dist/select/primitives.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./SelectContent.vue.cjs"),t=require("./SelectGroup.vue.cjs"),r=require("./SelectIcon.vue.cjs"),l=require("./SelectItem.vue.cjs"),u=require("./SelectItemIndicator.vue.cjs"),c=require("./SelectItemText.vue.cjs"),S=require("./SelectLabel.vue.cjs"),i=require("./SelectTrigger.vue.cjs"),d=require("./SelectValue.vue.cjs"),o=require("./SelectViewport.vue.cjs"),a=require("./Select.vue.cjs"),q=require("./SelectSeparator.vue.cjs");exports.SkdxSelect=a.default;exports.SkdxSelectContent=e.default;exports.SkdxSelectGroup=t.default;exports.SkdxSelectIcon=r.default;exports.SkdxSelectItem=l.default;exports.SkdxSelectItemIndicator=u.default;exports.SkdxSelectItemText=c.default;exports.SkdxSelectLabel=S.default;exports.SkdxSelectSeparator=q.default;exports.SkdxSelectTrigger=i.default;exports.SkdxSelectValue=d.default;exports.SkdxSelectViewport=o.default;
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./SelectAll.vue.cjs"),t=require("./SelectClear.vue.cjs"),r=require("./SelectContent.vue.cjs"),l=require("./SelectEmpty.vue.cjs"),u=require("./SelectGroup.vue.cjs"),c=require("./SelectIcon.vue.cjs"),S=require("./SelectInput.vue.cjs"),i=require("./SelectItem.vue.cjs"),d=require("./SelectItemIndicator.vue.cjs"),a=require("./SelectItemText.vue.cjs"),q=require("./SelectLabel.vue.cjs"),o=require("./SelectTag.vue.cjs"),n=require("./SelectTagList.vue.cjs"),s=require("./SelectTagRemove.vue.cjs"),x=require("./SelectTrigger.vue.cjs"),f=require("./SelectValue.vue.cjs"),k=require("./SelectViewport.vue.cjs"),_=require("./Select.vue.cjs"),g=require("./SelectSeparator.vue.cjs");exports.SkdxSelect=_.default;exports.SkdxSelectAll=e.default;exports.SkdxSelectClear=t.default;exports.SkdxSelectContent=r.default;exports.SkdxSelectEmpty=l.default;exports.SkdxSelectGroup=u.default;exports.SkdxSelectIcon=c.default;exports.SkdxSelectInput=S.default;exports.SkdxSelectItem=i.default;exports.SkdxSelectItemIndicator=d.default;exports.SkdxSelectItemText=a.default;exports.SkdxSelectLabel=q.default;exports.SkdxSelectSeparator=g.default;exports.SkdxSelectTag=o.default;exports.SkdxSelectTagList=n.default;exports.SkdxSelectTagRemove=s.default;exports.SkdxSelectTrigger=x.default;exports.SkdxSelectValue=f.default;exports.SkdxSelectViewport=k.default;

package/dist/select/primitives.d.cts

@@ -1,7 +1,5 @@
 /**
- * Advanced primitives for `SkdxSelect` — the parts the recipe composes. Use
- * when the derived anatomy is not the structure you need. No Portal; content
- * uses fixed positioning so no teleport is needed.
+ * Advanced primitives for `SkdxSelect`, for when the derived anatomy isn't the structure you need.
  *
  * @example
  * ```vue
@@ -17,7 +15,7 @@
  *     </SkdxSelectTrigger>
  *     <SkdxSelectContent>
  *       <SkdxSelectViewport>
- *         <SkdxSelectItem value="react">React</SkdxSelectItem>
+ *         <SkdxSelectItem value="ruby">Ruby</SkdxSelectItem>
  *       </SkdxSelectViewport>
  *     </SkdxSelectContent>
  *   </SkdxSelect>
@@ -36,3 +34,10 @@ export { default as SkdxSelectItemIndicator } from './SelectItemIndicator.vue.cj
 export { default as SkdxSelectGroup } from './SelectGroup.vue.cjs';
 export { default as SkdxSelectLabel } from './SelectLabel.vue.cjs';
 export { default as SkdxSelectSeparator } from './SelectSeparator.vue.cjs';
+export { default as SkdxSelectInput } from './SelectInput.vue.cjs';
+export { default as SkdxSelectTagList } from './SelectTagList.vue.cjs';
+export { default as SkdxSelectTag } from './SelectTag.vue.cjs';
+export { default as SkdxSelectTagRemove } from './SelectTagRemove.vue.cjs';
+export { default as SkdxSelectClear } from './SelectClear.vue.cjs';
+export { default as SkdxSelectEmpty } from './SelectEmpty.vue.cjs';
+export { default as SkdxSelectAll } from './SelectAll.vue.cjs';

package/dist/select/primitives.d.ts

@@ -1,7 +1,5 @@
 /**
- * Advanced primitives for `SkdxSelect` — the parts the recipe composes. Use
- * when the derived anatomy is not the structure you need. No Portal; content
- * uses fixed positioning so no teleport is needed.
+ * Advanced primitives for `SkdxSelect`, for when the derived anatomy isn't the structure you need.
  *
  * @example
  * ```vue
@@ -17,7 +15,7 @@
  *     </SkdxSelectTrigger>
  *     <SkdxSelectContent>
  *       <SkdxSelectViewport>
- *         <SkdxSelectItem value="react">React</SkdxSelectItem>
+ *         <SkdxSelectItem value="ruby">Ruby</SkdxSelectItem>
  *       </SkdxSelectViewport>
  *     </SkdxSelectContent>
  *   </SkdxSelect>
@@ -36,3 +34,10 @@ export { default as SkdxSelectItemIndicator } from './SelectItemIndicator.vue.js
 export { default as SkdxSelectGroup } from './SelectGroup.vue.js';
 export { default as SkdxSelectLabel } from './SelectLabel.vue.js';
 export { default as SkdxSelectSeparator } from './SelectSeparator.vue.js';
+export { default as SkdxSelectInput } from './SelectInput.vue.js';
+export { default as SkdxSelectTagList } from './SelectTagList.vue.js';
+export { default as SkdxSelectTag } from './SelectTag.vue.js';
+export { default as SkdxSelectTagRemove } from './SelectTagRemove.vue.js';
+export { default as SkdxSelectClear } from './SelectClear.vue.js';
+export { default as SkdxSelectEmpty } from './SelectEmpty.vue.js';
+export { default as SkdxSelectAll } from './SelectAll.vue.js';

package/dist/select/primitives.js

@@ -1 +1 @@
-import e from"./SelectContent.vue.js";import t from"./SelectGroup.vue.js";import r from"./SelectIcon.vue.js";import S from"./SelectItem.vue.js";import o from"./SelectItemIndicator.vue.js";import m from"./SelectItemText.vue.js";import c from"./SelectLabel.vue.js";import l from"./SelectTrigger.vue.js";import s from"./SelectValue.vue.js";import a from"./SelectViewport.vue.js";import p from"./Select.vue.js";import i from"./SelectSeparator.vue.js";export{p as SkdxSelect,e as SkdxSelectContent,t as SkdxSelectGroup,r as SkdxSelectIcon,S as SkdxSelectItem,o as SkdxSelectItemIndicator,m as SkdxSelectItemText,c as SkdxSelectLabel,i as SkdxSelectSeparator,l as SkdxSelectTrigger,s as SkdxSelectValue,a as SkdxSelectViewport};
+import e from"./SelectAll.vue.js";import t from"./SelectClear.vue.js";import S from"./SelectContent.vue.js";import r from"./SelectEmpty.vue.js";import o from"./SelectGroup.vue.js";import l from"./SelectIcon.vue.js";import m from"./SelectInput.vue.js";import c from"./SelectItem.vue.js";import s from"./SelectItemIndicator.vue.js";import a from"./SelectItemText.vue.js";import p from"./SelectLabel.vue.js";import i from"./SelectTag.vue.js";import u from"./SelectTagList.vue.js";import x from"./SelectTagRemove.vue.js";import d from"./SelectTrigger.vue.js";import v from"./SelectValue.vue.js";import f from"./SelectViewport.vue.js";import j from"./Select.vue.js";import k from"./SelectSeparator.vue.js";export{j as SkdxSelect,e as SkdxSelectAll,t as SkdxSelectClear,S as SkdxSelectContent,r as SkdxSelectEmpty,o as SkdxSelectGroup,l as SkdxSelectIcon,m as SkdxSelectInput,c as SkdxSelectItem,s as SkdxSelectItemIndicator,a as SkdxSelectItemText,p as SkdxSelectLabel,k as SkdxSelectSeparator,i as SkdxSelectTag,u as SkdxSelectTagList,x as SkdxSelectTagRemove,d as SkdxSelectTrigger,v as SkdxSelectValue,f as SkdxSelectViewport};

package/dist/skeleton/Skeleton.vue.d.cts

@@ -1,5 +1,5 @@
 /**
- * Placeholder div styled with class/style, aria-hidden. Container announces loading via aria-busy.
+ * Placeholder div styled with class/style; aria-hidden, with the container announcing loading via aria-busy.
  *
  * ```vue
  * <section :aria-busy="loading" aria-label="Recent activity">
@@ -8,6 +8,17 @@
  * </section>
  * ```
  */
-type __VLS_Props = {};
+type __VLS_Props = {
+    /**
+     * Which placeholder animation the skin plays, reflected as `data-animation`.
+     * @default undefined — falls back to a `data-animation` attribute.
+     */
+    animation?: 'none' | (string & {}) | undefined;
+    /**
+     * Outline the skin gives the placeholder, reflected as `data-shape`.
+     * @default undefined — falls back to a `data-shape` attribute.
+     */
+    shape?: 'line' | 'circle' | (string & {}) | undefined;
+};
 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>;
 export default _default;

package/dist/skeleton/Skeleton.vue.d.ts

@@ -1,5 +1,5 @@
 /**
- * Placeholder div styled with class/style, aria-hidden. Container announces loading via aria-busy.
+ * Placeholder div styled with class/style; aria-hidden, with the container announcing loading via aria-busy.
  *
  * ```vue
  * <section :aria-busy="loading" aria-label="Recent activity">
@@ -8,6 +8,17 @@
  * </section>
  * ```
  */
-type __VLS_Props = {};
+type __VLS_Props = {
+    /**
+     * Which placeholder animation the skin plays, reflected as `data-animation`.
+     * @default undefined — falls back to a `data-animation` attribute.
+     */
+    animation?: 'none' | (string & {}) | undefined;
+    /**
+     * Outline the skin gives the placeholder, reflected as `data-shape`.
+     * @default undefined — falls back to a `data-shape` attribute.
+     */
+    shape?: 'line' | 'circle' | (string & {}) | undefined;
+};
 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>;
 export default _default;

package/dist/skeleton/Skeleton.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-let e=require("vue");var t={class:"skdx-skeleton","data-part":"root","data-skdx-component":"skeleton","aria-hidden":"true"},a=(0,e.defineComponent)({__name:"Skeleton",setup(n){return(r,_)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",t))}});exports.default=a;
+const n=require("../utils/appearance.cjs");let e=require("vue");var r=(0,e.defineComponent)({inheritAttrs:!1,__name:"Skeleton",props:{animation:{},shape:{}},setup(t){return(a,s)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",(0,e.mergeProps)({...a.$attrs,...(0,e.unref)(n.appearanceAttrs)({animation:t.animation,shape:t.shape},a.$attrs)},{class:"skdx-skeleton","data-part":"root","data-skdx-component":"skeleton","aria-hidden":"true"}),null,16))}});exports.default=r;

package/dist/skeleton/Skeleton.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{createElementBlock as e,defineComponent as a,openBlock as t}from"vue";var o={class:"skdx-skeleton","data-part":"root","data-skdx-component":"skeleton","aria-hidden":"true"},n=/* @__PURE__ */a({__name:"Skeleton",setup:a=>(a,n)=>(t(),e("div",o))});export{n as default};
+import{appearanceAttrs as a}from"../utils/appearance.js";import{createElementBlock as e,defineComponent as t,mergeProps as s,openBlock as n,unref as o}from"vue";var r=/* @__PURE__ */t({inheritAttrs:!1,__name:"Skeleton",props:{animation:{},shape:{}},setup:t=>(r,p)=>(n(),e("div",s({...r.$attrs,...o(a)({animation:t.animation,shape:t.shape},r.$attrs)},{class:"skdx-skeleton","data-part":"root","data-skdx-component":"skeleton","aria-hidden":"true"}),null,16))});export{r as default};

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

@@ -1,12 +1,9 @@
 import { type SliderValueChangeDetail } from './context.cjs';
 import type { SliderMarkData } from './types.cjs';
-/**
- * Slider: value is always an array; single-element for simple, two for range.
- * Supports controlled/uncontrolled usage and form participation.
- */
+/** Slider whose value is always an array: single-element for a simple slider, two for a range. */
 type __VLS_Props = {
-    /** Selected values, one per thumb, for controlled usage. Pair with `v-model:value` or `@value-change`. */
-    value?: number[];
+    /** Selected values, one per thumb, for controlled usage; pair with `v-model:value` or `@value-change`. */
+    value?: number[] | undefined;
     /** Initial values, one per thumb, for uncontrolled usage. */
     defaultValue?: number[];
     /** Minimum value of the range the slider can select. */
@@ -24,43 +21,43 @@ type __VLS_Props = {
      * Defaults to a tenth of the range, floored at one step.
      * @default Math.max((max - min) / 10, step)
      */
-    largeStep?: number;
+    largeStep?: number | undefined;
     /**
-     * Minimum gap, counted in steps, that adjacent values must keep. At `0`
-     * two thumbs may be dragged onto the same value.
+     * Minimum gap, counted in steps, that adjacent values must keep; at `0` two thumbs may share a value.
      * @default 0
      */
     minStepsBetweenValues?: number;
-    /** Name for native form participation; each thumb renders its own hidden input. */
-    name?: string;
+    /**
+     * Name for native form participation; each thumb renders its own hidden input.
+     * @default undefined
+     */
+    name?: string | undefined;
     /**
      * 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.
+     * @default undefined
      */
-    form?: string;
+    form?: string | undefined;
     /**
-     * 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.
+     * Ticks rendered along the track, each a derived Mark; thumb count comes from `value`/`defaultValue`'s length, not this.
      * @default undefined — no marks rendered.
      */
-    marks?: readonly SliderMarkData[];
+    marks?: readonly SliderMarkData[] | undefined;
     /**
      * 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`.
+     * Accessible names for the thumbs the slider derives, one per entry in `value` and in the same order.
      * @default undefined
      */
-    thumbLabels?: readonly string[];
+    thumbLabels?: readonly string[] | undefined;
+    /**
+     * Size rung the skin renders the slider at, reflected as `data-size`.
+     * @default undefined — falls back to a `data-size` attribute.
+     */
+    size?: 'md' | 'sm' | 'lg' | (string & {}) | undefined;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -71,23 +68,18 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
     "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"?: ((detail: SliderValueChangeDetail) => any) | undefined;
-    "onValue-commit"?: ((value: number[]) => any) | undefined;
+    "onUpdate:value"?: (value: number[]) => any;
+    "onValue-change"?: (detail: SliderValueChangeDetail) => any;
+    "onValue-commit"?: (value: number[]) => any;
 }>, {
-    form: string;
     disabled: boolean;
-    value: number[];
-    name: string;
     defaultValue: number[];
     max: number;
     min: number;
     step: number;
+    value: number[] | undefined;
     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>;

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

@@ -1,12 +1,9 @@
 import { type SliderValueChangeDetail } from './context.js';
 import type { SliderMarkData } from './types.js';
-/**
- * Slider: value is always an array; single-element for simple, two for range.
- * Supports controlled/uncontrolled usage and form participation.
- */
+/** Slider whose value is always an array: single-element for a simple slider, two for a range. */
 type __VLS_Props = {
-    /** Selected values, one per thumb, for controlled usage. Pair with `v-model:value` or `@value-change`. */
-    value?: number[];
+    /** Selected values, one per thumb, for controlled usage; pair with `v-model:value` or `@value-change`. */
+    value?: number[] | undefined;
     /** Initial values, one per thumb, for uncontrolled usage. */
     defaultValue?: number[];
     /** Minimum value of the range the slider can select. */
@@ -24,43 +21,43 @@ type __VLS_Props = {
      * Defaults to a tenth of the range, floored at one step.
      * @default Math.max((max - min) / 10, step)
      */
-    largeStep?: number;
+    largeStep?: number | undefined;
     /**
-     * Minimum gap, counted in steps, that adjacent values must keep. At `0`
-     * two thumbs may be dragged onto the same value.
+     * Minimum gap, counted in steps, that adjacent values must keep; at `0` two thumbs may share a value.
      * @default 0
      */
     minStepsBetweenValues?: number;
-    /** Name for native form participation; each thumb renders its own hidden input. */
-    name?: string;
+    /**
+     * Name for native form participation; each thumb renders its own hidden input.
+     * @default undefined
+     */
+    name?: string | undefined;
     /**
      * 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.
+     * @default undefined
      */
-    form?: string;
+    form?: string | undefined;
     /**
-     * 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.
+     * Ticks rendered along the track, each a derived Mark; thumb count comes from `value`/`defaultValue`'s length, not this.
      * @default undefined — no marks rendered.
      */
-    marks?: readonly SliderMarkData[];
+    marks?: readonly SliderMarkData[] | undefined;
     /**
      * 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`.
+     * Accessible names for the thumbs the slider derives, one per entry in `value` and in the same order.
      * @default undefined
      */
-    thumbLabels?: readonly string[];
+    thumbLabels?: readonly string[] | undefined;
+    /**
+     * Size rung the skin renders the slider at, reflected as `data-size`.
+     * @default undefined — falls back to a `data-size` attribute.
+     */
+    size?: 'md' | 'sm' | 'lg' | (string & {}) | undefined;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -71,23 +68,18 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
     "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"?: ((detail: SliderValueChangeDetail) => any) | undefined;
-    "onValue-commit"?: ((value: number[]) => any) | undefined;
+    "onUpdate:value"?: (value: number[]) => any;
+    "onValue-change"?: (detail: SliderValueChangeDetail) => any;
+    "onValue-commit"?: (value: number[]) => any;
 }>, {
-    form: string;
     disabled: boolean;
-    value: number[];
-    name: string;
     defaultValue: number[];
     max: number;
     min: number;
     step: number;
+    value: number[] | undefined;
     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>;

package/dist/slider/Slider.vue_vue_type_script_setup_true_lang.cjs

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

package/dist/slider/Slider.vue_vue_type_script_setup_true_lang.js

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