@sit-onyx/headless 0.4.0-dev-20251112133447 → 0.4.0-dev-20251118074438

package/dist/composables/slider/TestSlider.d.vue.ts

@@ -0,0 +1,9 @@
+type __VLS_PublicProps = {
+    modelValue: number | [number, number];
+};
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: number | [number, number]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number | [number, number]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/composables/slider/createSlider.d.ts

@@ -1,15 +1,13 @@
 import { MaybeRef, Ref } from 'vue';
-import { Nullable } from '../../utils/types.js';
 export type SliderMark = {
     value: number;
     label?: string;
-} | number;
-export type CreateSliderOptions<TValue extends number | number[] = number> = {
+};
+type SliderValue = number | [number, number];
+export type NormalizedSliderValue = [number] | [number, number];
+export type CreateSliderOptions<TValue extends SliderValue = SliderValue> = {
     /**
      * Current value(s) of the slider.
-     * Each value should be between min and max.
-     *
-     * @default [min]
      */
     value: Ref<TValue>;
     /**
@@ -31,16 +29,9 @@ export type CreateSliderOptions<TValue extends number | number[] = number> = {
      */
     step?: MaybeRef<number>;
     /**
-     * Whether to render the slider in discrete mode.
-     *
-     * @default false
-     */
-    discrete?: MaybeRef<boolean>;
-    /**
-     * Step size when holding shift key or using Page Up/Page Down keys.
+     * Step size to increase/decrease the slider value when changing the value via keyboard while pressing the "Shift" key.
      *
-     * Defaults to 10% of the total range (max - min) multiplied by the step size.
-     * This provides intuitive behavior that automatically scales with different slider ranges.
+     * default 10% of the total range (max - min)
      */
     shiftStep?: MaybeRef<number>;
     /**
@@ -50,27 +41,21 @@ export type CreateSliderOptions<TValue extends number | number[] = number> = {
      */
     disabled?: MaybeRef<boolean>;
     /**
-     * Array of marks to display on the slider.
+     * Whether to show marks inside the slider rail.
+     * - `true`: will generate marks automatically based on `step` prop
+     * - array of numbers or `SliderMark` objects: will shown at the specified values with optional labels
      *
      * @default false
      */
-    marks?: MaybeRef<Nullable<SliderMark[] | boolean>>;
+    marks?: MaybeRef<SliderMark[] | number[] | boolean>;
     /**
      * Aria label for the slider.
-     *
-     * @default undefined
      */
     label: MaybeRef<string>;
     /**
-     * Callback when the value changes during interaction.
-     * Note: This is called during interaction (dragging, key press, etc.).
+     * Callback when the current value changes.
      */
     onChange?: (value: TValue) => void;
-    /**
-     * Callback when the value is committed (drag end, key press, etc.).
-     * Note: This is called when the user stops interacting with the slider.
-     */
-    onCommit?: (value: TValue) => void;
 };
 /**
  * Composable for creating an accessibility-compliant slider.
@@ -79,17 +64,195 @@ export type CreateSliderOptions<TValue extends number | number[] = number> = {
  *  * @experimental
  * @deprecated This component is still under active development and its API might change in patch releases.
  */
-export declare const _unstableCreateSlider: <TValue extends number | number[] = number>(options: CreateSliderOptions<TValue>) => import('../../utils/builder.js').HeadlessComposable<{
+export declare const _unstableCreateSlider: <TValue extends SliderValue>(options: CreateSliderOptions<TValue>) => import('../../utils/builder.js').HeadlessComposable<{
     /**
      * Root slider container element
      */
     root: import('vue').ComputedRef<{
+        innerHTML?: string | undefined;
+        class?: any;
+        style: string | false | import('vue').CSSProperties | import('vue').StyleValue[] | null;
+        accesskey?: string | undefined;
+        contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+        contextmenu?: string | undefined;
+        dir?: string | undefined;
+        draggable?: (boolean | "true" | "false") | undefined;
+        hidden?: (boolean | "true" | "false") | "" | "hidden" | "until-found" | undefined;
+        id?: string | undefined;
+        inert?: (boolean | "true" | "false") | undefined;
+        lang?: string | undefined;
+        placeholder?: string | undefined;
+        spellcheck?: (boolean | "true" | "false") | undefined;
+        tabindex?: (string | number) | undefined;
+        title?: string | undefined;
+        translate?: "yes" | "no" | undefined;
+        radiogroup?: string | undefined;
+        role?: string | undefined;
+        about?: string | undefined;
+        datatype?: string | undefined;
+        inlist?: any;
+        prefix?: string | undefined;
+        property?: string | undefined;
+        resource?: string | undefined;
+        typeof?: string | undefined;
+        vocab?: string | undefined;
+        autocapitalize?: string | undefined;
+        autocorrect?: string | undefined;
+        autosave?: string | undefined;
+        color?: string | undefined;
+        itemprop?: string | undefined;
+        itemscope?: (boolean | "true" | "false") | undefined;
+        itemtype?: string | undefined;
+        itemid?: string | undefined;
+        itemref?: string | undefined;
+        results?: (string | number) | undefined;
+        security?: string | undefined;
+        unselectable?: "on" | "off" | undefined;
+        inputmode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
+        is?: string | undefined;
+        'aria-activedescendant'?: string | undefined;
+        'aria-atomic'?: (boolean | "true" | "false") | undefined;
+        'aria-autocomplete'?: "none" | "inline" | "list" | "both" | undefined;
+        'aria-busy'?: (boolean | "true" | "false") | undefined;
+        'aria-checked'?: (boolean | "true" | "false") | "mixed" | undefined;
+        'aria-colcount'?: (string | number) | undefined;
+        'aria-colindex'?: (string | number) | undefined;
+        'aria-colspan'?: (string | number) | undefined;
+        'aria-controls'?: string | undefined;
+        'aria-current'?: (boolean | "true" | "false") | "page" | "step" | "location" | "date" | "time" | undefined;
+        'aria-describedby'?: string | undefined;
+        'aria-details'?: string | undefined;
+        'aria-disabled'?: (boolean | "true" | "false") | undefined;
+        'aria-dropeffect'?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
+        'aria-errormessage'?: string | undefined;
+        'aria-expanded'?: (boolean | "true" | "false") | undefined;
+        'aria-flowto'?: string | undefined;
+        'aria-grabbed'?: (boolean | "true" | "false") | undefined;
+        'aria-haspopup'?: (boolean | "true" | "false") | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+        'aria-hidden'?: (boolean | "true" | "false") | undefined;
+        'aria-invalid'?: (boolean | "true" | "false") | "grammar" | "spelling" | undefined;
+        'aria-keyshortcuts'?: string | undefined;
+        'aria-label'?: string | undefined;
+        'aria-labelledby'?: string | undefined;
+        'aria-level'?: (string | number) | undefined;
+        'aria-live'?: "off" | "assertive" | "polite" | undefined;
+        'aria-modal'?: (boolean | "true" | "false") | undefined;
+        'aria-multiline'?: (boolean | "true" | "false") | undefined;
+        'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
+        'aria-orientation'?: "horizontal" | "vertical" | undefined;
+        'aria-owns'?: string | undefined;
+        'aria-placeholder'?: string | undefined;
+        'aria-posinset'?: (string | number) | undefined;
+        'aria-pressed'?: (boolean | "true" | "false") | "mixed" | undefined;
+        'aria-readonly'?: (boolean | "true" | "false") | undefined;
+        'aria-relevant'?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
+        'aria-required'?: (boolean | "true" | "false") | undefined;
+        'aria-roledescription'?: string | undefined;
+        'aria-rowcount'?: (string | number) | undefined;
+        'aria-rowindex'?: (string | number) | undefined;
+        'aria-rowspan'?: (string | number) | undefined;
+        'aria-selected'?: (boolean | "true" | "false") | undefined;
+        'aria-setsize'?: (string | number) | undefined;
+        'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
+        'aria-valuemax'?: (string | number) | undefined;
+        'aria-valuemin'?: (string | number) | undefined;
+        'aria-valuenow'?: (string | number) | undefined;
+        'aria-valuetext'?: string | undefined;
+        onCopy?: ((payload: ClipboardEvent) => void) | undefined;
+        onCut?: ((payload: ClipboardEvent) => void) | undefined;
+        onPaste?: ((payload: ClipboardEvent) => void) | undefined;
+        onCompositionend?: ((payload: CompositionEvent) => void) | undefined;
+        onCompositionstart?: ((payload: CompositionEvent) => void) | undefined;
+        onCompositionupdate?: ((payload: CompositionEvent) => void) | undefined;
+        onDrag?: ((payload: DragEvent) => void) | undefined;
+        onDragend?: ((payload: DragEvent) => void) | undefined;
+        onDragenter?: ((payload: DragEvent) => void) | undefined;
+        onDragexit?: ((payload: DragEvent) => void) | undefined;
+        onDragleave?: ((payload: DragEvent) => void) | undefined;
+        onDragover?: ((payload: DragEvent) => void) | undefined;
+        onDragstart?: ((payload: DragEvent) => void) | undefined;
+        onDrop?: ((payload: DragEvent) => void) | undefined;
+        onFocus?: ((payload: FocusEvent) => void) | undefined;
+        onFocusin?: ((payload: FocusEvent) => void) | undefined;
+        onFocusout?: ((payload: FocusEvent) => void) | undefined;
+        onBlur?: ((payload: FocusEvent) => void) | undefined;
+        onChange?: ((payload: Event) => void) | undefined;
+        onBeforeinput?: ((payload: InputEvent) => void) | undefined;
+        onFormdata?: ((payload: FormDataEvent) => void) | undefined;
+        onInput?: ((payload: InputEvent) => void) | undefined;
+        onReset?: ((payload: Event) => void) | undefined;
+        onSubmit?: ((payload: SubmitEvent) => void) | undefined;
+        onInvalid?: ((payload: Event) => void) | undefined;
+        onFullscreenchange?: ((payload: Event) => void) | undefined;
+        onFullscreenerror?: ((payload: Event) => void) | undefined;
+        onLoad?: ((payload: Event) => void) | undefined;
+        onError?: ((payload: Event) => void) | undefined;
+        onKeydown?: ((payload: KeyboardEvent) => void) | undefined;
+        onKeypress?: ((payload: KeyboardEvent) => void) | undefined;
+        onKeyup?: ((payload: KeyboardEvent) => void) | undefined;
+        onDblclick?: ((payload: MouseEvent) => void) | undefined;
+        onMousedown?: ((payload: MouseEvent) => void) | undefined;
+        onMouseenter?: ((payload: MouseEvent) => void) | undefined;
+        onMouseleave?: ((payload: MouseEvent) => void) | undefined;
+        onMousemove?: ((payload: MouseEvent) => void) | undefined;
+        onMouseout?: ((payload: MouseEvent) => void) | undefined;
+        onMouseover?: ((payload: MouseEvent) => void) | undefined;
+        onMouseup?: ((payload: MouseEvent) => void) | undefined;
+        onAbort?: ((payload: UIEvent) => void) | undefined;
+        onCanplay?: ((payload: Event) => void) | undefined;
+        onCanplaythrough?: ((payload: Event) => void) | undefined;
+        onDurationchange?: ((payload: Event) => void) | undefined;
+        onEmptied?: ((payload: Event) => void) | undefined;
+        onEncrypted?: ((payload: MediaEncryptedEvent) => void) | undefined;
+        onEnded?: ((payload: Event) => void) | undefined;
+        onLoadeddata?: ((payload: Event) => void) | undefined;
+        onLoadedmetadata?: ((payload: Event) => void) | undefined;
+        onLoadstart?: ((payload: Event) => void) | undefined;
+        onPause?: ((payload: Event) => void) | undefined;
+        onPlay?: ((payload: Event) => void) | undefined;
+        onPlaying?: ((payload: Event) => void) | undefined;
+        onProgress?: ((payload: ProgressEvent<EventTarget>) => void) | undefined;
+        onRatechange?: ((payload: Event) => void) | undefined;
+        onSeeked?: ((payload: Event) => void) | undefined;
+        onSeeking?: ((payload: Event) => void) | undefined;
+        onStalled?: ((payload: Event) => void) | undefined;
+        onSuspend?: ((payload: Event) => void) | undefined;
+        onTimeupdate?: ((payload: Event) => void) | undefined;
+        onVolumechange?: ((payload: Event) => void) | undefined;
+        onWaiting?: ((payload: Event) => void) | undefined;
+        onSelect?: ((payload: Event) => void) | undefined;
+        onScroll?: ((payload: Event) => void) | undefined;
+        onScrollend?: ((payload: Event) => void) | undefined;
+        onTouchcancel?: ((payload: TouchEvent) => void) | undefined;
+        onTouchend?: ((payload: TouchEvent) => void) | undefined;
+        onTouchmove?: ((payload: TouchEvent) => void) | undefined;
+        onTouchstart?: ((payload: TouchEvent) => void) | undefined;
+        onAuxclick?: ((payload: PointerEvent) => void) | undefined;
+        onClick?: ((payload: PointerEvent) => void) | undefined;
+        onContextmenu?: ((payload: PointerEvent) => void) | undefined;
+        onGotpointercapture?: ((payload: PointerEvent) => void) | undefined;
+        onLostpointercapture?: ((payload: PointerEvent) => void) | undefined;
+        onPointerdown?: ((payload: PointerEvent) => void) | undefined;
+        onPointermove?: ((payload: PointerEvent) => void) | undefined;
+        onPointerup?: ((payload: PointerEvent) => void) | undefined;
+        onPointercancel?: ((payload: PointerEvent) => void) | undefined;
+        onPointerenter?: ((payload: PointerEvent) => void) | undefined;
+        onPointerleave?: ((payload: PointerEvent) => void) | undefined;
+        onPointerover?: ((payload: PointerEvent) => void) | undefined;
+        onPointerout?: ((payload: PointerEvent) => void) | undefined;
+        onBeforetoggle?: ((payload: ToggleEvent) => void) | undefined;
+        onToggle?: ((payload: ToggleEvent) => void) | undefined;
+        onWheel?: ((payload: WheelEvent) => void) | undefined;
+        onAnimationcancel?: ((payload: AnimationEvent) => void) | undefined;
+        onAnimationstart?: ((payload: AnimationEvent) => void) | undefined;
+        onAnimationend?: ((payload: AnimationEvent) => void) | undefined;
+        onAnimationiteration?: ((payload: AnimationEvent) => void) | undefined;
+        onSecuritypolicyviolation?: ((payload: SecurityPolicyViolationEvent) => void) | undefined;
+        onTransitioncancel?: ((payload: TransitionEvent) => void) | undefined;
+        onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
+        onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
+        onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
         ref: import('../../utils/builder.js').HeadlessElRef<HTMLElement>;
-        style: {
-            touchAction: "pan-y";
-        };
-        onMousedown: (event: MouseEvent) => void;
-        onTouchstart: (event: TouchEvent) => void;
     }>;
     /**
      * Individual thumb elements for each value (span)
@@ -98,46 +261,215 @@ export declare const _unstableCreateSlider: <TValue extends number | number[] =
         index: number;
         value: number;
     }) => {
-        "data-index": number;
         style: {
             left: string;
         };
     }>;
     /**
-     * Visually hidden input inside each thumb for accessibility
+     * Input inside each thumb for accessibility
      */
     thumbInput: import('vue').ComputedRef<(data: {
         index: number;
         value: number;
     }) => {
+        innerHTML?: string | undefined;
+        class?: any;
+        style?: import('vue').StyleValue | undefined;
+        accesskey?: string | undefined;
+        contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+        contextmenu?: string | undefined;
+        dir?: string | undefined;
+        draggable?: (boolean | "true" | "false") | undefined;
+        hidden?: (boolean | "true" | "false") | "" | "hidden" | "until-found" | undefined;
+        id?: string | undefined;
+        inert?: (boolean | "true" | "false") | undefined;
+        lang?: string | undefined;
+        placeholder?: string | undefined;
+        spellcheck?: (boolean | "true" | "false") | undefined;
+        tabindex?: (string | number) | undefined;
+        title?: string | undefined;
+        translate?: "yes" | "no" | undefined;
+        radiogroup?: string | undefined;
+        role: string;
+        about?: string | undefined;
+        datatype?: string | undefined;
+        inlist?: any;
+        prefix?: string | undefined;
+        property?: string | undefined;
+        resource?: string | undefined;
+        typeof?: string | undefined;
+        vocab?: string | undefined;
+        autocapitalize?: string | undefined;
+        autocorrect?: string | undefined;
+        autosave?: string | undefined;
+        color?: string | undefined;
+        itemprop?: string | undefined;
+        itemscope?: (boolean | "true" | "false") | undefined;
+        itemtype?: string | undefined;
+        itemid?: string | undefined;
+        itemref?: string | undefined;
+        results?: (string | number) | undefined;
+        security?: string | undefined;
+        unselectable?: "on" | "off" | undefined;
+        inputmode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
+        is?: string | undefined;
+        'aria-activedescendant'?: string | undefined;
+        'aria-atomic'?: (boolean | "true" | "false") | undefined;
+        'aria-autocomplete'?: "none" | "inline" | "list" | "both" | undefined;
+        'aria-busy'?: (boolean | "true" | "false") | undefined;
+        'aria-checked'?: (boolean | "true" | "false") | "mixed" | undefined;
+        'aria-colcount'?: (string | number) | undefined;
+        'aria-colindex'?: (string | number) | undefined;
+        'aria-colspan'?: (string | number) | undefined;
+        'aria-controls'?: string | undefined;
+        'aria-current'?: (boolean | "true" | "false") | "page" | "step" | "location" | "date" | "time" | undefined;
+        'aria-describedby'?: string | undefined;
+        'aria-details'?: string | undefined;
+        'aria-disabled'?: (boolean | "true" | "false") | undefined;
+        'aria-dropeffect'?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
+        'aria-errormessage'?: string | undefined;
+        'aria-expanded'?: (boolean | "true" | "false") | undefined;
+        'aria-flowto'?: string | undefined;
+        'aria-grabbed'?: (boolean | "true" | "false") | undefined;
+        'aria-haspopup'?: (boolean | "true" | "false") | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+        'aria-hidden'?: (boolean | "true" | "false") | undefined;
+        'aria-invalid'?: (boolean | "true" | "false") | "grammar" | "spelling" | undefined;
+        'aria-keyshortcuts'?: string | undefined;
+        "aria-label": string;
+        'aria-labelledby'?: string | undefined;
+        'aria-level'?: (string | number) | undefined;
+        'aria-live'?: "off" | "assertive" | "polite" | undefined;
+        'aria-modal'?: (boolean | "true" | "false") | undefined;
+        'aria-multiline'?: (boolean | "true" | "false") | undefined;
+        'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
+        "aria-orientation": "horizontal" | "vertical";
+        'aria-owns'?: string | undefined;
+        'aria-placeholder'?: string | undefined;
+        'aria-posinset'?: (string | number) | undefined;
+        'aria-pressed'?: (boolean | "true" | "false") | "mixed" | undefined;
+        'aria-readonly'?: (boolean | "true" | "false") | undefined;
+        'aria-relevant'?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
+        'aria-required'?: (boolean | "true" | "false") | undefined;
+        'aria-roledescription'?: string | undefined;
+        'aria-rowcount'?: (string | number) | undefined;
+        'aria-rowindex'?: (string | number) | undefined;
+        'aria-rowspan'?: (string | number) | undefined;
+        'aria-selected'?: (boolean | "true" | "false") | undefined;
+        'aria-setsize'?: (string | number) | undefined;
+        'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
+        "aria-valuemax": string | number;
+        "aria-valuemin": string | number;
+        "aria-valuenow": string | number;
+        'aria-valuetext'?: string | undefined;
+        onCopy?: ((payload: ClipboardEvent) => void) | undefined;
+        onCut?: ((payload: ClipboardEvent) => void) | undefined;
+        onPaste?: ((payload: ClipboardEvent) => void) | undefined;
+        onCompositionend?: ((payload: CompositionEvent) => void) | undefined;
+        onCompositionstart?: ((payload: CompositionEvent) => void) | undefined;
+        onCompositionupdate?: ((payload: CompositionEvent) => void) | undefined;
+        onDrag?: ((payload: DragEvent) => void) | undefined;
+        onDragend?: ((payload: DragEvent) => void) | undefined;
+        onDragenter?: ((payload: DragEvent) => void) | undefined;
+        onDragexit?: ((payload: DragEvent) => void) | undefined;
+        onDragleave?: ((payload: DragEvent) => void) | undefined;
+        onDragover?: ((payload: DragEvent) => void) | undefined;
+        onDragstart?: ((payload: DragEvent) => void) | undefined;
+        onDrop?: ((payload: DragEvent) => void) | undefined;
+        onFocus?: ((payload: FocusEvent) => void) | undefined;
+        onFocusin?: ((payload: FocusEvent) => void) | undefined;
+        onFocusout?: ((payload: FocusEvent) => void) | undefined;
+        onBlur?: ((payload: FocusEvent) => void) | undefined;
+        onChange?: ((payload: Event) => void) | undefined;
+        onBeforeinput?: ((payload: InputEvent) => void) | undefined;
+        onFormdata?: ((payload: FormDataEvent) => void) | undefined;
+        onInput?: ((payload: InputEvent) => void) | undefined;
+        onReset?: ((payload: Event) => void) | undefined;
+        onSubmit?: ((payload: SubmitEvent) => void) | undefined;
+        onInvalid?: ((payload: Event) => void) | undefined;
+        onFullscreenchange?: ((payload: Event) => void) | undefined;
+        onFullscreenerror?: ((payload: Event) => void) | undefined;
+        onLoad?: ((payload: Event) => void) | undefined;
+        onError?: ((payload: Event) => void) | undefined;
+        onKeydown?: ((payload: KeyboardEvent) => void) | undefined;
+        onKeypress?: ((payload: KeyboardEvent) => void) | undefined;
+        onKeyup?: ((payload: KeyboardEvent) => void) | undefined;
+        onDblclick?: ((payload: MouseEvent) => void) | undefined;
+        onMousedown?: ((payload: MouseEvent) => void) | undefined;
+        onMouseenter?: ((payload: MouseEvent) => void) | undefined;
+        onMouseleave?: ((payload: MouseEvent) => void) | undefined;
+        onMousemove?: ((payload: MouseEvent) => void) | undefined;
+        onMouseout?: ((payload: MouseEvent) => void) | undefined;
+        onMouseover?: ((payload: MouseEvent) => void) | undefined;
+        onMouseup?: ((payload: MouseEvent) => void) | undefined;
+        onAbort?: ((payload: UIEvent) => void) | undefined;
+        onCanplay?: ((payload: Event) => void) | undefined;
+        onCanplaythrough?: ((payload: Event) => void) | undefined;
+        onDurationchange?: ((payload: Event) => void) | undefined;
+        onEmptied?: ((payload: Event) => void) | undefined;
+        onEncrypted?: ((payload: MediaEncryptedEvent) => void) | undefined;
+        onEnded?: ((payload: Event) => void) | undefined;
+        onLoadeddata?: ((payload: Event) => void) | undefined;
+        onLoadedmetadata?: ((payload: Event) => void) | undefined;
+        onLoadstart?: ((payload: Event) => void) | undefined;
+        onPause?: ((payload: Event) => void) | undefined;
+        onPlay?: ((payload: Event) => void) | undefined;
+        onPlaying?: ((payload: Event) => void) | undefined;
+        onProgress?: ((payload: ProgressEvent<EventTarget>) => void) | undefined;
+        onRatechange?: ((payload: Event) => void) | undefined;
+        onSeeked?: ((payload: Event) => void) | undefined;
+        onSeeking?: ((payload: Event) => void) | undefined;
+        onStalled?: ((payload: Event) => void) | undefined;
+        onSuspend?: ((payload: Event) => void) | undefined;
+        onTimeupdate?: ((payload: Event) => void) | undefined;
+        onVolumechange?: ((payload: Event) => void) | undefined;
+        onWaiting?: ((payload: Event) => void) | undefined;
+        onSelect?: ((payload: Event) => void) | undefined;
+        onScroll?: ((payload: Event) => void) | undefined;
+        onScrollend?: ((payload: Event) => void) | undefined;
+        onTouchcancel?: ((payload: TouchEvent) => void) | undefined;
+        onTouchend?: ((payload: TouchEvent) => void) | undefined;
+        onTouchmove?: ((payload: TouchEvent) => void) | undefined;
+        onTouchstart?: ((payload: TouchEvent) => void) | undefined;
+        onAuxclick?: ((payload: PointerEvent) => void) | undefined;
+        onClick?: ((payload: PointerEvent) => void) | undefined;
+        onContextmenu?: ((payload: PointerEvent) => void) | undefined;
+        onGotpointercapture?: ((payload: PointerEvent) => void) | undefined;
+        onLostpointercapture?: ((payload: PointerEvent) => void) | undefined;
+        onPointerdown?: ((payload: PointerEvent) => void) | undefined;
+        onPointermove?: ((payload: PointerEvent) => void) | undefined;
+        onPointerup?: ((payload: PointerEvent) => void) | undefined;
+        onPointercancel?: ((payload: PointerEvent) => void) | undefined;
+        onPointerenter?: ((payload: PointerEvent) => void) | undefined;
+        onPointerleave?: ((payload: PointerEvent) => void) | undefined;
+        onPointerover?: ((payload: PointerEvent) => void) | undefined;
+        onPointerout?: ((payload: PointerEvent) => void) | undefined;
+        onBeforetoggle?: ((payload: ToggleEvent) => void) | undefined;
+        onToggle?: ((payload: ToggleEvent) => void) | undefined;
+        onWheel?: ((payload: WheelEvent) => void) | undefined;
+        onAnimationcancel?: ((payload: AnimationEvent) => void) | undefined;
+        onAnimationstart?: ((payload: AnimationEvent) => void) | undefined;
+        onAnimationend?: ((payload: AnimationEvent) => void) | undefined;
+        onAnimationiteration?: ((payload: AnimationEvent) => void) | undefined;
+        onSecuritypolicyviolation?: ((payload: SecurityPolicyViolationEvent) => void) | undefined;
+        onTransitioncancel?: ((payload: TransitionEvent) => void) | undefined;
+        onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
+        onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
+        onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
         min: number;
         max: number;
         value: number;
-        role: string;
         type: string;
-        "aria-label": string;
-        "aria-valuemin": number;
-        "aria-valuemax": number;
-        "aria-valuenow": number;
-        "aria-orientation": "horizontal";
-        "data-index": number;
-        tabIndex: number;
-        step: string | number;
-        disabled: boolean;
-        onChange: (event: Event) => void;
-        onFocus: (event: FocusEvent) => void;
-        onBlur: (event: FocusEvent) => void;
-        onKeydown: (event: KeyboardEvent) => void;
+        step: number;
+        disabled: boolean | undefined;
     }>;
     /**
-     * Mark elements
+     * Single Mark element inside the rail
      */
     mark: import('vue').ComputedRef<(data: {
         value: number;
         label?: string;
         positionOffset?: string;
     }) => {
-        "data-value": number;
         "aria-hidden": true;
         style: {
             left: string;
@@ -149,82 +481,26 @@ export declare const _unstableCreateSlider: <TValue extends number | number[] =
     markLabel: import('vue').ComputedRef<(data: {
         value: number;
     }) => {
-        "data-value": number;
+        "aria-hidden": true;
         style: {
             left: string;
+            transform: `translateX(${string})` | undefined;
         };
-        "aria-hidden": true;
     }>;
     /**
      * Track element representing the selected range
      */
     track: import('vue').ComputedRef<{
-        role: string;
-        "aria-hidden": true;
         style: {
             left: string;
             width: string;
         };
     }>;
-    /**
-     * Rail element representing the full slider range
-     */
-    rail: import('vue').ComputedRef<{
-        role: string;
-        "aria-hidden": true;
-    }>;
 }, {
-    /**
-     * True if the slider is currently being dragged.
-     */
-    isDragging: Ref<boolean, boolean>;
-    /**
-     * Index of the currently active thumb.
-     * Thumb could be active even if not dragging (e.g. click on the rail to move the thumb there).
-     * `-1` if no thumb is active.
-     */
-    activeThumbIndex: Ref<number, number>;
-    /**
-     * `true` if the slider is a range slider (with two or more thumbs).
-     */
-    isRange: import('vue').ComputedRef<boolean>;
-    /**
-     * Offset of the track as a percentage (0-100).
-     */
-    trackOffset: import('vue').ComputedRef<number>;
-    /**
-     * Length of the track as a percentage (0-100).
-     */
-    trackLength: import('vue').ComputedRef<number>;
-    /**
-     * List of marks to display on the slider.
-     * - If marks option is `true`, marks are generated based on the step value.
-     * - If marks option is an array of numbers or objects, it is used as provided (filtered to be within range).
-     * - If marks option is `false`, no marks are shown.
-     */
-    marksList: import('vue').ComputedRef<{
-        value: number;
-        label?: string;
-    }[]>;
-    /**
-     * Step size when holding shift key or using Page Up/Page Down keys.
-     */
+    normalizedValue: import('vue').ComputedRef<NormalizedSliderValue>;
     shiftStep: import('vue').ComputedRef<number>;
-    /**
-     * Normalized slider values (clamped to min/max and rounded to nearest step/mark).
-     */
-    normalizedValues: import('vue').ComputedRef<number[]>;
+    marks: import('vue').ComputedRef<SliderMark[]>;
 }, {
-    /**
-     * Clamps a value to the slider's range.
-     * @param value - value to clamp
-     * @returns clamped value
-     */
-    clampValue: import('vue').ComputedRef<(value: number) => number>;
-    /**
-     * Rounds a value to the nearest valid step.
-     * @param value - value to round
-     * @returns rounded value
-     */
-    roundToStep: import('vue').ComputedRef<(value: number) => number | undefined>;
+    updateValue: (value: number, index: number) => void;
 }>;
+export {};

package/dist/composables/slider/createSlider.testing.d.ts

@@ -5,45 +5,25 @@ export type SliderTestingOptions = {
      */
     page: Page;
     /**
-     * Locator for the slider element(s).
+     * Locator for the slider element(s) (native `<input>`).
      */
     slider: Locator;
     /**
-     * Optional: Locator for the slider container/root.
+     * Locator to the sliders rail element.
      */
-    container?: Locator;
-    /**
-     * Expected initial value(s) for the slider.
-     */
-    initialValues?: number[];
-    /**
-     * Expected min value.
-     */
-    min?: number;
-    /**
-     * Expected max value.
-     */
-    max?: number;
-    /**
-     * Expected step value.
-     */
-    step?: number;
-    /**
-     * Expected shift step value.
-     */
-    shiftStep?: number;
+    rail: Locator;
 };
 /**
  * Comprehensive testing for single-thumb slider implementation.
  * Tests basic accessibility, keyboard navigation, and interaction patterns.
+ *
+ * Slider must have min=0, max=100, step=1 and initial value of 50.
  */
-export declare const singleThumbSliderTesting: ({ page, slider, container, initialValues, min, max, step, shiftStep, }: SliderTestingOptions) => Promise<void>;
+export declare const singleSliderTesting: ({ page, slider, rail }: SliderTestingOptions) => Promise<void>;
 /**
- * Comprehensive testing for multi-thumb (range) slider implementation.
+ * Comprehensive testing for range slider implementation.
  * Tests range-specific behaviors, thumb independence, and collision handling.
+ *
+ * Slider must have min=0, max=100, step=1 and initial value of [25,75].
  */
-export declare const multiThumbSliderTesting: ({ page, slider, container, initialValues, min, max, step, }: SliderTestingOptions) => Promise<void>;
-/**
- * Test slider with marks (discrete mode).
- */
-export declare const discreteSliderTesting: ({ slider }: SliderTestingOptions) => Promise<void>;
+export declare const rangeSliderTesting: ({ page, slider, rail }: SliderTestingOptions) => Promise<void>;