@sit-onyx/headless 0.3.0-dev-20251027185548 → 0.3.0-dev-20251027213347

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

@@ -0,0 +1,101 @@
+declare const _default: import('vue').DefineComponent<{}, {
+    slider: import('../../index.js', { with: { "resolution-mode": "import" } }).HeadlessComposable<{
+        root: import('vue').ComputedRef<{
+            ref: import('../../index.js', { with: { "resolution-mode": "import" } }).HeadlessElRef<HTMLElement>;
+            style: {
+                touchAction: "pan-x" | "pan-y";
+            };
+            onMousedown: (event: MouseEvent) => void;
+            onTouchstart: (event: TouchEvent) => void;
+        }>;
+        thumbContainer: import('vue').ComputedRef<(data: {
+            index: number;
+            value: number;
+        }) => {
+            "data-index": number;
+            style: {
+                [x: string]: string;
+            };
+        }>;
+        thumbInput: import('vue').ComputedRef<(data: {
+            index: number;
+            value: number;
+        }) => {
+            min: number;
+            max: number;
+            value: number;
+            role: string;
+            type: string;
+            "aria-label": string;
+            "aria-valuemin": number;
+            "aria-valuemax": number;
+            "aria-valuenow": number;
+            "aria-orientation": import('./createSlider.js', { with: { "resolution-mode": "import" } }).SliderOrientation;
+            "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;
+        }>;
+        mark: import('vue').ComputedRef<(data: {
+            value: number;
+            label?: string;
+        }) => {
+            "data-value": number;
+            "aria-hidden": true;
+            style: {
+                [x: string]: string;
+            };
+        }>;
+        markLabel: import('vue').ComputedRef<(data: {
+            value: number;
+        }) => {
+            "data-value": number;
+            style: {
+                [x: string]: string;
+            };
+            "aria-hidden": true;
+        }>;
+        track: import('vue').ComputedRef<{
+            role: string;
+            "aria-hidden": true;
+            style: {
+                [x: string]: string;
+            };
+        }>;
+        rail: import('vue').ComputedRef<{
+            role: string;
+            "aria-hidden": true;
+        }>;
+    }, {
+        isDragging: import('vue').Ref<boolean, boolean>;
+        activeThumbIndex: import('vue').Ref<number, number>;
+        focusedThumbIndex: import('vue').Ref<number, number>;
+        isRange: import('vue').ComputedRef<boolean>;
+        trackOffset: import('vue').ComputedRef<number>;
+        trackLength: import('vue').ComputedRef<number>;
+        marksList: import('vue').ComputedRef<{
+            value: number;
+            label?: string;
+        }[]>;
+    }, {
+        valueToPercent: import('vue').ComputedRef<(value: number) => number>;
+        isMarkActive: import('vue').ComputedRef<(markValue: number) => boolean>;
+        clampValue: import('vue').ComputedRef<(value: number) => number>;
+        axis: import('vue').ComputedRef<{
+            position: "bottom";
+            size: "height";
+            cross: "width";
+        } | {
+            position: "left";
+            size: "width";
+            cross: "height";
+        }>;
+        roundToStep: import('vue').ComputedRef<(value: number) => number | undefined>;
+        normalizeValues: import('vue').ComputedRef<(values: number[]) => number[]>;
+    }>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+export default _default;

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

@@ -0,0 +1,101 @@
+declare const _default: import('vue').DefineComponent<{}, {
+    slider: import('../../index.js', { with: { "resolution-mode": "import" } }).HeadlessComposable<{
+        root: import('vue').ComputedRef<{
+            ref: import('../../index.js', { with: { "resolution-mode": "import" } }).HeadlessElRef<HTMLElement>;
+            style: {
+                touchAction: "pan-x" | "pan-y";
+            };
+            onMousedown: (event: MouseEvent) => void;
+            onTouchstart: (event: TouchEvent) => void;
+        }>;
+        thumbContainer: import('vue').ComputedRef<(data: {
+            index: number;
+            value: number;
+        }) => {
+            "data-index": number;
+            style: {
+                [x: string]: string;
+            };
+        }>;
+        thumbInput: import('vue').ComputedRef<(data: {
+            index: number;
+            value: number;
+        }) => {
+            min: number;
+            max: number;
+            value: number;
+            role: string;
+            type: string;
+            "aria-label": string;
+            "aria-valuemin": number;
+            "aria-valuemax": number;
+            "aria-valuenow": number;
+            "aria-orientation": import('./createSlider.js', { with: { "resolution-mode": "import" } }).SliderOrientation;
+            "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;
+        }>;
+        mark: import('vue').ComputedRef<(data: {
+            value: number;
+            label?: string;
+        }) => {
+            "data-value": number;
+            "aria-hidden": true;
+            style: {
+                [x: string]: string;
+            };
+        }>;
+        markLabel: import('vue').ComputedRef<(data: {
+            value: number;
+        }) => {
+            "data-value": number;
+            style: {
+                [x: string]: string;
+            };
+            "aria-hidden": true;
+        }>;
+        track: import('vue').ComputedRef<{
+            role: string;
+            "aria-hidden": true;
+            style: {
+                [x: string]: string;
+            };
+        }>;
+        rail: import('vue').ComputedRef<{
+            role: string;
+            "aria-hidden": true;
+        }>;
+    }, {
+        isDragging: import('vue').Ref<boolean, boolean>;
+        activeThumbIndex: import('vue').Ref<number, number>;
+        focusedThumbIndex: import('vue').Ref<number, number>;
+        isRange: import('vue').ComputedRef<boolean>;
+        trackOffset: import('vue').ComputedRef<number>;
+        trackLength: import('vue').ComputedRef<number>;
+        marksList: import('vue').ComputedRef<{
+            value: number;
+            label?: string;
+        }[]>;
+    }, {
+        valueToPercent: import('vue').ComputedRef<(value: number) => number>;
+        isMarkActive: import('vue').ComputedRef<(markValue: number) => boolean>;
+        clampValue: import('vue').ComputedRef<(value: number) => number>;
+        axis: import('vue').ComputedRef<{
+            position: "bottom";
+            size: "height";
+            cross: "width";
+        } | {
+            position: "left";
+            size: "width";
+            cross: "height";
+        }>;
+        roundToStep: import('vue').ComputedRef<(value: number) => number | undefined>;
+        normalizeValues: import('vue').ComputedRef<(values: number[]) => number[]>;
+    }>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+export default _default;

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

@@ -0,0 +1,101 @@
+declare const _default: import('vue').DefineComponent<{}, {
+    slider: import('../../index.js', { with: { "resolution-mode": "import" } }).HeadlessComposable<{
+        root: import('vue').ComputedRef<{
+            ref: import('../../index.js', { with: { "resolution-mode": "import" } }).HeadlessElRef<HTMLElement>;
+            style: {
+                touchAction: "pan-x" | "pan-y";
+            };
+            onMousedown: (event: MouseEvent) => void;
+            onTouchstart: (event: TouchEvent) => void;
+        }>;
+        thumbContainer: import('vue').ComputedRef<(data: {
+            index: number;
+            value: number;
+        }) => {
+            "data-index": number;
+            style: {
+                [x: string]: string;
+            };
+        }>;
+        thumbInput: import('vue').ComputedRef<(data: {
+            index: number;
+            value: number;
+        }) => {
+            min: number;
+            max: number;
+            value: number;
+            role: string;
+            type: string;
+            "aria-label": string;
+            "aria-valuemin": number;
+            "aria-valuemax": number;
+            "aria-valuenow": number;
+            "aria-orientation": import('./createSlider.js', { with: { "resolution-mode": "import" } }).SliderOrientation;
+            "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;
+        }>;
+        mark: import('vue').ComputedRef<(data: {
+            value: number;
+            label?: string;
+        }) => {
+            "data-value": number;
+            "aria-hidden": true;
+            style: {
+                [x: string]: string;
+            };
+        }>;
+        markLabel: import('vue').ComputedRef<(data: {
+            value: number;
+        }) => {
+            "data-value": number;
+            style: {
+                [x: string]: string;
+            };
+            "aria-hidden": true;
+        }>;
+        track: import('vue').ComputedRef<{
+            role: string;
+            "aria-hidden": true;
+            style: {
+                [x: string]: string;
+            };
+        }>;
+        rail: import('vue').ComputedRef<{
+            role: string;
+            "aria-hidden": true;
+        }>;
+    }, {
+        isDragging: import('vue').Ref<boolean, boolean>;
+        activeThumbIndex: import('vue').Ref<number, number>;
+        focusedThumbIndex: import('vue').Ref<number, number>;
+        isRange: import('vue').ComputedRef<boolean>;
+        trackOffset: import('vue').ComputedRef<number>;
+        trackLength: import('vue').ComputedRef<number>;
+        marksList: import('vue').ComputedRef<{
+            value: number;
+            label?: string;
+        }[]>;
+    }, {
+        valueToPercent: import('vue').ComputedRef<(value: number) => number>;
+        isMarkActive: import('vue').ComputedRef<(markValue: number) => boolean>;
+        clampValue: import('vue').ComputedRef<(value: number) => number>;
+        axis: import('vue').ComputedRef<{
+            position: "bottom";
+            size: "height";
+            cross: "width";
+        } | {
+            position: "left";
+            size: "width";
+            cross: "height";
+        }>;
+        roundToStep: import('vue').ComputedRef<(value: number) => number | undefined>;
+        normalizeValues: import('vue').ComputedRef<(values: number[]) => number[]>;
+    }>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+export default _default;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,262 @@
+import { MaybeRef, Ref } from 'vue';
+import { Nullable } from '../../utils/types.js';
+export type SliderMark = {
+    value: number;
+    label?: string;
+} | number;
+export type SliderOrientation = "horizontal" | "vertical";
+export type CreateSliderOptions<TValue extends number | number[] = number> = {
+    /**
+     * Current value(s) of the slider.
+     * Each value should be between min and max.
+     *
+     * @default [min]
+     */
+    value: Ref<TValue>;
+    /**
+     * Minimum value of the slider.
+     *
+     * @default 0
+     */
+    min?: MaybeRef<number>;
+    /**
+     * Maximum value of the slider.
+     *
+     * @default 100
+     */
+    max?: MaybeRef<number>;
+    /**
+     * Step size for the slider.
+     *
+     * @default 1
+     */
+    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.
+     *
+     * 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.
+     */
+    shiftStep?: MaybeRef<number>;
+    /**
+     * Whether the slider is disabled.
+     *
+     * @default false
+     */
+    disabled?: MaybeRef<boolean>;
+    /**
+     * Array of marks to display on the slider.
+     *
+     * @default false
+     */
+    marks?: MaybeRef<Nullable<SliderMark[] | boolean>>;
+    /**
+     * Aria label for the slider.
+     *
+     * @default undefined
+     */
+    label: MaybeRef<string>;
+    /**
+     * Orientation of the slider.
+     *
+     * @default "horizontal"
+     */
+    orientation?: MaybeRef<SliderOrientation>;
+    /**
+     * Callback when the value changes during interaction.
+     * Note: This is called during interaction (dragging, key press, etc.).
+     */
+    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.
+ * For supported keyboard shortcuts, see: https://www.w3.org/WAI/ARIA/apg/patterns/slider/
+ *
+ *  * @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<{
+    /**
+     * Root slider container element
+     */
+    root: import('vue').ComputedRef<{
+        ref: import('../../utils/builder.js').HeadlessElRef<HTMLElement>;
+        style: {
+            touchAction: "pan-x" | "pan-y";
+        };
+        onMousedown: (event: MouseEvent) => void;
+        onTouchstart: (event: TouchEvent) => void;
+    }>;
+    /**
+     * Individual thumb elements for each value (span)
+     */
+    thumbContainer: import('vue').ComputedRef<(data: {
+        index: number;
+        value: number;
+    }) => {
+        "data-index": number;
+        style: {
+            [x: string]: string;
+        };
+    }>;
+    /**
+     * Visually hidden input inside each thumb for accessibility
+     */
+    thumbInput: import('vue').ComputedRef<(data: {
+        index: number;
+        value: number;
+    }) => {
+        min: number;
+        max: number;
+        value: number;
+        role: string;
+        type: string;
+        "aria-label": string;
+        "aria-valuemin": number;
+        "aria-valuemax": number;
+        "aria-valuenow": number;
+        "aria-orientation": SliderOrientation;
+        "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;
+    }>;
+    /**
+     * Mark elements
+     */
+    mark: import('vue').ComputedRef<(data: {
+        value: number;
+        label?: string;
+    }) => {
+        "data-value": number;
+        "aria-hidden": true;
+        style: {
+            [x: string]: string;
+        };
+    }>;
+    /**
+     * Label for each mark
+     */
+    markLabel: import('vue').ComputedRef<(data: {
+        value: number;
+    }) => {
+        "data-value": number;
+        style: {
+            [x: string]: string;
+        };
+        "aria-hidden": true;
+    }>;
+    /**
+     * Track element representing the selected range
+     */
+    track: import('vue').ComputedRef<{
+        role: string;
+        "aria-hidden": true;
+        style: {
+            [x: string]: 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>;
+    /**
+     * Index of the thumb that is currently focused.
+     * `-1` if no thumb is focused.
+     */
+    focusedThumbIndex: 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;
+    }[]>;
+}, {
+    /**
+     * Converts a value from the slider's range to a percentage (0-100).
+     * @param value - value to convert
+     * @returns percentage representation of the value
+     */
+    valueToPercent: import('vue').ComputedRef<(value: number) => number>;
+    /**
+     * Checks if a given mark value is active (i.e., within the selected range).
+     * Use case: when rendering marks, to determine if a mark is covered by the selected range.
+     *
+     * @param markValue - value of the mark to check
+     * @returns `true` if the mark is active, `false` otherwise
+     */
+    isMarkActive: import('vue').ComputedRef<(markValue: number) => boolean>;
+    /**
+     * Clamps a value to the slider's range.
+     * @param value - value to clamp
+     * @returns clamped value
+     */
+    clampValue: import('vue').ComputedRef<(value: number) => number>;
+    /**
+     * Main axis properties based on orientation.
+     */
+    axis: import('vue').ComputedRef<{
+        position: "bottom";
+        size: "height";
+        cross: "width";
+    } | {
+        position: "left";
+        size: "width";
+        cross: "height";
+    }>;
+    /**
+     * Rounds a value to the nearest valid step.
+     * @param value - value to round
+     * @returns rounded value
+     */
+    roundToStep: import('vue').ComputedRef<(value: number) => number | undefined>;
+    /**
+     * Normalizes an array of values to ensure they are within min/max bounds,
+     */
+    normalizeValues: import('vue').ComputedRef<(values: number[]) => number[]>;
+}>;

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

@@ -0,0 +1,49 @@
+import { Locator, Page } from '@playwright/test';
+export type SliderTestingOptions = {
+    /**
+     * Playwright page.
+     */
+    page: Page;
+    /**
+     * Locator for the slider element(s).
+     */
+    slider: Locator;
+    /**
+     * Optional: Locator for the slider container/root.
+     */
+    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;
+};
+/**
+ * Comprehensive testing for single-thumb slider implementation.
+ * Tests basic accessibility, keyboard navigation, and interaction patterns.
+ */
+export declare const singleThumbSliderTesting: ({ page, slider, container, initialValues, min, max, step, shiftStep, }: SliderTestingOptions) => Promise<void>;
+/**
+ * Comprehensive testing for multi-thumb (range) slider implementation.
+ * Tests range-specific behaviors, thumb independence, and collision handling.
+ */
+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>;

package/dist/index.d.ts

@@ -5,6 +5,7 @@ export * from './composables/helpers/useOutsideClick.js';
 export * from './composables/listbox/createListbox.js';
 export * from './composables/menuButton/createMenuButton.js';
 export * from './composables/navigationMenu/createMenu.js';
+export * from './composables/slider/createSlider.js';
 export * from './composables/tabs/createTabs.js';
 export * from './composables/tooltip/createToggletip.js';
 export * from './composables/tooltip/createTooltip.js';

package/dist/index.js

@@ -843,7 +843,34 @@ const MathUtils = {
   /**
    * Ensures that a given `number` is or is between a given `min` and `max`.
    */
-  clamp: (number, min, max) => Math.max(Math.min(number, max), min)
+  clamp: (number, min, max) => Math.max(Math.min(number, max), min),
+  /**
+   * Returns the count of decimal places in a number.
+   * @param number - The number to check.
+   * @returns The count of decimal places.
+   *
+   * decimals(1.23); // 2
+   * decimals(10);   // 0
+   */
+  decimalsCount: (number) => String(number).split(".")[1]?.length ?? 0,
+  /**
+   *  Converts a value within a range to a percentage (0-100).
+   *
+   * @param value - The value to convert.
+   * @param min - The minimum allowed value.
+   * @param max - The maximum allowed value.
+   * @returns The percentage representation of the value.
+   */
+  valueToPercent: (value, min, max) => (value - min) * 100 / (max - min),
+  /**
+   * Converts a percentage (0-100) to a value within a range.
+   *
+   * @param percent - The percentage to convert.
+   * @param min - The minimum allowed value.
+   * @param max - The maximum allowed value.
+   * @returns The value representation of the percentage.
+   */
+  percentToValue: (percent, min, max) => (max - min) * percent + min
 };
 const createNavigationMenu = createBuilder(({ navigationName }) => {
   const navId = useId();
@@ -882,6 +909,594 @@ const createNavigationMenu = createBuilder(({ navigationName }) => {
     }
   };
 });
+const areArraysEqual = (arrayA, arrayB, comparer = (a, b) => a === b) => arrayA.length === arrayB.length && arrayA.every((value, index) => comparer(value, arrayB[index]));
+const isFocusVisible = (element) => {
+  try {
+    return element.matches(":focus-visible");
+  } catch {
+    return false;
+  }
+};
+const isTouchEvent = (event) => "touches" in event || "changedTouches" in event || "targetTouches" in event;
+const DRAG_MOVE_THRESHOLD = 2;
+const KEY = {
+  Up: "ArrowUp",
+  Down: "ArrowDown",
+  Left: "ArrowLeft",
+  Right: "ArrowRight",
+  PageUp: "PageUp",
+  PageDown: "PageDown",
+  Home: "Home",
+  End: "End"
+};
+const NAVIGATION_KEYS = /* @__PURE__ */ new Set([
+  KEY.Up,
+  KEY.Down,
+  KEY.Left,
+  KEY.Right,
+  KEY.PageUp,
+  KEY.PageDown,
+  KEY.Home,
+  KEY.End
+]);
+const INCREMENT_KEYS = /* @__PURE__ */ new Set([KEY.Right, KEY.Up, KEY.PageUp]);
+const DECREMENT_KEYS = /* @__PURE__ */ new Set([KEY.Left, KEY.Down, KEY.PageDown]);
+const TRACK_CALCULATION_STRATEGIES = {
+  horizontal: (rect, coords) => MathUtils.clamp((coords.x - rect.left) / rect.width, 0, 1),
+  vertical: (rect, coords) => MathUtils.clamp((rect.bottom - coords.y) / rect.height, 0, 1)
+};
+const readThumbIndex = (event) => Number(event.currentTarget?.dataset.index ?? -1);
+const roundToStep = (value, step, min) => Number((Math.round((value - min) / step) * step + min).toFixed(MathUtils.decimalsCount(step)));
+const normalizeValues = (values, min, max, step) => {
+  if (!values.length) return [min];
+  return values.map((value) => {
+    const clamped = MathUtils.clamp(value, min, max);
+    return roundToStep(clamped, step, min);
+  }).sort((a, b) => a - b);
+};
+const findClosestIndex = (values, currentValue) => {
+  const result = values.reduce((acc, value, index) => {
+    const distance = Math.abs(currentValue - value);
+    if (!acc || distance <= acc.closestDistance) {
+      return {
+        closestIndex: index,
+        closestDistance: distance
+      };
+    }
+    return acc;
+  }, null);
+  return result.closestIndex;
+};
+const adjustValueByIndex = ({
+  values,
+  newValue,
+  index
+}) => values.map((value, i) => i === index ? newValue : value).sort((a, b) => a - b);
+const asc = (a, b) => a - b;
+const valueToArray = (value) => Array.isArray(value) ? value : [value];
+const _unstableCreateSlider = createBuilder(
+  (options) => {
+    const sliderRef = createElRef();
+    const min = computed(() => unref(options.min) ?? 0);
+    const max = computed(() => unref(options.max) ?? 100);
+    const step = computed(() => unref(options.step) ?? 1);
+    const values = computed(() => {
+      const rawValues = unref(options.value);
+      if (Array.isArray(rawValues)) {
+        if (!rawValues?.length) {
+          return [min.value];
+        }
+        return normalizeValues(rawValues, min.value, max.value, step.value);
+      } else {
+        if (typeof rawValues !== "number") {
+          return [min.value];
+        }
+        return normalizeValues([rawValues], min.value, max.value, step.value);
+      }
+    });
+    const shiftStep = computed(() => {
+      const shiftStep2 = unref(options.shiftStep);
+      if (typeof shiftStep2 !== "undefined") {
+        return shiftStep2;
+      }
+      const stepMultiple = Math.max(1, Math.round((max.value - min.value) * 0.1 / step.value));
+      return stepMultiple * step.value;
+    });
+    const isDisabled = computed(() => unref(options.disabled) ?? false);
+    const marks = computed(() => unref(options.marks) ?? false);
+    const label = computed(() => unref(options.label));
+    const orientation = computed(() => unref(options.orientation) ?? "horizontal");
+    const isDiscrete = computed(() => unref(options.discrete) ?? false);
+    let touchId = null;
+    let movesSinceStart = 0;
+    let lastChangedValue = null;
+    let previousActiveIndex = null;
+    const isDragging = ref(false);
+    const activeThumbIndex = ref(-1);
+    const focusedThumbIndex = ref(-1);
+    const isRange = computed(() => {
+      const unrefValues = unref(options.value);
+      return Array.isArray(unrefValues) && unrefValues.length > 1;
+    });
+    const marksList = computed(() => {
+      if (marks.value === false) return [];
+      if (marks.value && Array.isArray(marks.value)) {
+        return marks.value.map((mark) => typeof mark === "number" ? { value: mark } : mark).filter((mark) => mark.value >= min.value && mark.value <= max.value).sort((a, b) => asc(a.value, b.value));
+      }
+      if (step.value && step.value > 0) {
+        return [...Array(Math.floor((max.value - min.value) / step.value + 1))].map((_, index) => ({
+          value: min.value + step.value * index
+        }));
+      }
+      return [];
+    });
+    const axis = computed(
+      () => orientation.value === "vertical" ? { position: "bottom", size: "height", cross: "width" } : { position: "left", size: "width", cross: "height" }
+    );
+    const marksValues = computed(() => marksList.value.map((mark) => mark.value));
+    const emitChange = (next) => {
+      if (!areArraysEqual(values.value, next)) {
+        const nextValue = isRange.value ? next : next[0];
+        if (typeof nextValue !== "undefined") {
+          options.onChange?.(nextValue);
+        }
+      }
+      lastChangedValue = next;
+    };
+    const emitCommit = (fallback) => {
+      const valueWithFallback = lastChangedValue ?? fallback;
+      const nextValue = isRange.value ? valueWithFallback : valueWithFallback[0];
+      if (typeof nextValue !== "undefined") {
+        options.onCommit?.(nextValue);
+      }
+    };
+    const ensureFocusOnThumb = (options2) => {
+      const { index, shouldSetActive = false } = options2;
+      const slider = sliderRef.value;
+      if (!slider) return;
+      if (slider.contains(document.activeElement) && Number(document.activeElement?.getAttribute("data-index")) !== index) {
+        slider.querySelector(`[type="range"][data-index="${index}"]`)?.focus();
+      }
+      if (shouldSetActive) {
+        activeThumbIndex.value = index;
+      }
+    };
+    const eventToCoords = (event, touchId2) => {
+      if (touchId2 !== void 0 && isTouchEvent(event)) {
+        for (let i = 0; i < event.changedTouches.length; i += 1) {
+          const touch = event.changedTouches[i];
+          if (touch && touch.identifier === touchId2) {
+            return {
+              x: touch.clientX,
+              y: touch.clientY
+            };
+          }
+        }
+        return false;
+      }
+      const mouseEvent = event;
+      return {
+        x: mouseEvent.clientX,
+        y: mouseEvent.clientY
+      };
+    };
+    const getNextFromCoords = (opts) => {
+      const { coords, isMoving = false } = opts;
+      const slider = sliderRef.value;
+      if (!slider) return null;
+      const rect = slider.getBoundingClientRect();
+      const mainSize = orientation.value === "vertical" ? rect.height : rect.width;
+      if (mainSize <= 0) return null;
+      const percent = TRACK_CALCULATION_STRATEGIES[orientation.value](rect, coords);
+      const raw = MathUtils.percentToValue(percent, min.value, max.value);
+      const snapped = !isDiscrete.value ? roundToStep(raw, step.value, min.value) : marksValues.value[findClosestIndex(marksValues.value, raw)];
+      if (typeof snapped !== "number") return null;
+      const candidate = MathUtils.clamp(snapped, min.value, max.value);
+      if (!isRange.value) {
+        return { newValue: candidate, activeIndex: 0 };
+      }
+      const closestIndex = findClosestIndex(values.value, candidate);
+      const index = isMoving && previousActiveIndex != null ? previousActiveIndex : closestIndex;
+      const adjustedValues = adjustValueByIndex({
+        values: values.value,
+        newValue: candidate,
+        index
+      });
+      const adjustedIndex = findClosestIndex(adjustedValues, candidate);
+      previousActiveIndex = adjustedIndex;
+      return { newValue: adjustedValues, activeIndex: adjustedIndex };
+    };
+    const commitValueFromEvent = (event, input) => {
+      const index = readThumbIndex(event);
+      const current = values.value[index];
+      if (typeof current !== "number") {
+        return;
+      }
+      const useMarks = isDiscrete.value && marksList.value.length > 0;
+      const snapByMarks = (candidate) => {
+        const list = marksList.value;
+        const first = list[0];
+        const last = list.at(-1);
+        if (!first || !last) {
+          return current;
+        }
+        if (candidate <= first.value) {
+          return first.value;
+        }
+        if (candidate >= last.value) {
+          return last.value;
+        }
+        const pos = marksValues.value.indexOf(current);
+        const neighbor = candidate < current ? list[pos - 1] : list[pos + 1];
+        return neighbor?.value ?? current;
+      };
+      const scalar = MathUtils.clamp(useMarks ? snapByMarks(input) : input, min.value, max.value);
+      const nextValues = isRange.value ? adjustValueByIndex({ values: values.value, newValue: scalar, index }) : [scalar];
+      if (isRange.value) {
+        const activeIndex = nextValues.indexOf(scalar);
+        ensureFocusOnThumb({ index: activeIndex, shouldSetActive: true });
+      }
+      focusedThumbIndex.value = index;
+      if (!areArraysEqual(values.value, nextValues)) {
+        emitChange(nextValues);
+      }
+      emitCommit(nextValues);
+    };
+    const handlePointerEnd = (event) => {
+      const coords = eventToCoords(event, touchId);
+      isDragging.value = false;
+      if (!coords) {
+        return;
+      }
+      const next = getNextFromCoords({ coords, isMoving: true });
+      if (!next) {
+        return;
+      }
+      const { newValue } = next;
+      activeThumbIndex.value = -1;
+      emitCommit(valueToArray(newValue));
+      movesSinceStart = 0;
+      touchId = null;
+      stopPointerListening();
+    };
+    const handlePointerMove = (event) => {
+      const coords = eventToCoords(event, touchId);
+      if (!coords) return;
+      movesSinceStart += 1;
+      if (event.type === "mousemove" && event.buttons === 0) {
+        handlePointerEnd(event);
+        return;
+      }
+      const nextState = getNextFromCoords({ coords, isMoving: true });
+      if (!nextState) {
+        handlePointerEnd(event);
+        return;
+      }
+      const { newValue, activeIndex } = nextState;
+      if (!isDragging.value && movesSinceStart > DRAG_MOVE_THRESHOLD) {
+        isDragging.value = true;
+      }
+      ensureFocusOnThumb({ index: activeIndex, shouldSetActive: true });
+      emitChange(valueToArray(newValue));
+      isDragging.value = true;
+    };
+    const handlePointerStart = (event) => {
+      if (isDisabled.value) {
+        return;
+      }
+      const touch = event.changedTouches[0];
+      if (touch !== null && touch !== void 0) {
+        touchId = touch.identifier;
+      }
+      const coords = eventToCoords(event, touchId);
+      if (coords) {
+        const nextState = getNextFromCoords({ coords, isMoving: false });
+        if (nextState) {
+          const { newValue, activeIndex } = nextState;
+          ensureFocusOnThumb({ index: activeIndex, shouldSetActive: true });
+          emitChange(valueToArray(newValue));
+        }
+      }
+      movesSinceStart = 0;
+      document.addEventListener("touchmove", handlePointerMove, {
+        passive: true
+      });
+      document.addEventListener("touchend", handlePointerEnd);
+    };
+    const stopPointerListening = () => {
+      document.removeEventListener("mousemove", handlePointerMove);
+      document.removeEventListener("mouseup", handlePointerEnd);
+      document.removeEventListener("touchmove", handlePointerMove);
+      document.removeEventListener("touchend", handlePointerEnd);
+    };
+    const handleRootMousedown = (event) => {
+      if (isDisabled.value) {
+        return;
+      }
+      if (event.button !== 0) {
+        return;
+      }
+      if (event.defaultPrevented) {
+        return;
+      }
+      event.preventDefault();
+      const coords = eventToCoords(event, touchId);
+      if (coords) {
+        const nextState = getNextFromCoords({ coords });
+        if (nextState) {
+          const { newValue, activeIndex } = nextState;
+          ensureFocusOnThumb({ index: activeIndex, shouldSetActive: true });
+          emitChange(valueToArray(newValue));
+        }
+      }
+      movesSinceStart = 0;
+      document.addEventListener("mousemove", handlePointerMove, {
+        passive: true
+      });
+      document.addEventListener("mouseup", handlePointerEnd);
+    };
+    const handleHiddenInputChange = (event) => {
+      if (isDisabled.value) {
+        return;
+      }
+      const value = event.target.valueAsNumber;
+      commitValueFromEvent(event, value);
+    };
+    const handleHiddenInputFocus = (event) => {
+      const index = readThumbIndex(event);
+      if (isFocusVisible(event.target)) {
+        focusedThumbIndex.value = index;
+        activeThumbIndex.value = index;
+      }
+    };
+    const handleHiddenInputBlur = (event) => {
+      if (!isFocusVisible(event.target)) {
+        focusedThumbIndex.value = -1;
+        activeThumbIndex.value = -1;
+      }
+    };
+    const handleHiddenInputKeydown = (event) => {
+      if (!NAVIGATION_KEYS.has(event.key)) return;
+      event.preventDefault();
+      const index = readThumbIndex(event);
+      const value = values.value[index];
+      if (typeof value !== "number") {
+        return;
+      }
+      if (!isDiscrete.value) {
+        const stepSize = event.shiftKey ? shiftStep.value : step.value;
+        if (event.key === "Home") return commitValueFromEvent(event, min.value);
+        if (event.key === "End") return commitValueFromEvent(event, max.value);
+        if (INCREMENT_KEYS.has(event.key)) {
+          const next = MathUtils.clamp(value + stepSize, min.value, max.value);
+          if (next !== value) commitValueFromEvent(event, next);
+          return;
+        }
+        if (DECREMENT_KEYS.has(event.key)) {
+          const next = MathUtils.clamp(value - stepSize, min.value, max.value);
+          if (next !== value) commitValueFromEvent(event, next);
+          return;
+        }
+        return;
+      } else {
+        const values2 = marksValues.value;
+        const lastIndex = values2.length - 1;
+        const currentIndex = values2.indexOf(value);
+        const first = values2[0];
+        const last = values2[lastIndex];
+        if (event.key === "Home" && typeof first === "number")
+          return commitValueFromEvent(event, first);
+        if (event.key === "End" && typeof last === "number")
+          return commitValueFromEvent(event, last);
+        if (INCREMENT_KEYS.has(event.key)) {
+          const nextIdx = currentIndex < 0 ? 0 : Math.min(lastIndex, currentIndex + 1);
+          const next = values2[nextIdx];
+          if (next !== value && typeof next === "number") commitValueFromEvent(event, next);
+          return;
+        }
+        if (DECREMENT_KEYS.has(event.key)) {
+          const nextIdx = currentIndex < 0 ? 0 : Math.max(0, currentIndex - 1);
+          const next = values2[nextIdx];
+          if (next !== value && typeof next === "number") commitValueFromEvent(event, next);
+          return;
+        }
+      }
+    };
+    const trackOffset = computed(
+      () => MathUtils.valueToPercent(
+        isRange.value && values.value[0] ? values.value[0] : min.value,
+        min.value,
+        max.value
+      )
+    );
+    const trackLength = computed(
+      () => MathUtils.valueToPercent(values.value.at(-1) ?? 0, min.value, max.value) - trackOffset.value
+    );
+    const trackStyle = computed(() => ({
+      [axis.value.position]: `${trackOffset.value}%`,
+      [axis.value.size]: `${trackLength.value}%`
+    }));
+    const isMarkActive = computed(() => (markValue) => {
+      if (isRange.value) {
+        const minValue = Math.min(...values.value);
+        const maxValue = Math.max(...values.value);
+        return markValue >= minValue && markValue <= maxValue;
+      }
+      const currentValue = values.value[0];
+      return markValue <= currentValue;
+    });
+    onBeforeUnmount(stopPointerListening);
+    watch(
+      () => isDisabled.value,
+      () => {
+        if (isDisabled.value) {
+          isDragging.value = false;
+          activeThumbIndex.value = -1;
+          focusedThumbIndex.value = -1;
+          stopPointerListening();
+        }
+      }
+    );
+    return {
+      elements: {
+        /**
+         * Root slider container element
+         */
+        root: computed(() => ({
+          ref: sliderRef,
+          style: { touchAction: orientation.value === "vertical" ? "pan-x" : "pan-y" },
+          onMousedown: handleRootMousedown,
+          onTouchstart: handlePointerStart
+        })),
+        /**
+         * Individual thumb elements for each value (span)
+         */
+        thumbContainer: computed(() => (data) => ({
+          "data-index": data.index,
+          style: {
+            [axis.value.position]: `${MathUtils.valueToPercent(data.value, min.value, max.value)}%`
+          }
+        })),
+        /**
+         * Visually hidden input inside each thumb for accessibility
+         */
+        thumbInput: computed(() => (data) => ({
+          min: min.value,
+          max: max.value,
+          value: data.value,
+          role: "slider",
+          type: "range",
+          "aria-label": label.value,
+          "aria-valuemin": min.value,
+          "aria-valuemax": max.value,
+          "aria-valuenow": data.value,
+          "aria-orientation": orientation.value,
+          "data-index": data.index,
+          tabIndex: isDisabled.value ? -1 : 0,
+          step: isDiscrete.value && marks.value ? "any" : step.value ?? void 0,
+          disabled: typeof isDisabled.value === "boolean" ? isDisabled.value : false,
+          onChange: handleHiddenInputChange,
+          onFocus: handleHiddenInputFocus,
+          onBlur: handleHiddenInputBlur,
+          onKeydown: handleHiddenInputKeydown
+        })),
+        /**
+         * Mark elements
+         */
+        mark: computed(() => (data) => ({
+          "data-value": data.value,
+          "aria-hidden": true,
+          style: {
+            [axis.value.position]: `${MathUtils.clamp(MathUtils.valueToPercent(data.value, min.value, max.value), 0, 100)}%`
+          }
+        })),
+        /**
+         * Label for each mark
+         */
+        markLabel: computed(() => (data) => ({
+          "data-value": data.value,
+          style: {
+            [axis.value.position]: `${MathUtils.valueToPercent(data.value, min.value, max.value)}%`
+          },
+          "aria-hidden": true
+        })),
+        /**
+         * Track element representing the selected range
+         */
+        track: computed(() => ({
+          role: "presentation",
+          "aria-hidden": true,
+          style: trackStyle.value
+        })),
+        /**
+         * Rail element representing the full slider range
+         */
+        rail: computed(() => ({
+          role: "presentation",
+          "aria-hidden": true
+        }))
+      },
+      state: {
+        /**
+         * True if the slider is currently being dragged.
+         */
+        isDragging,
+        /**
+         * 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,
+        /**
+         * Index of the thumb that is currently focused.
+         * `-1` if no thumb is focused.
+         */
+        focusedThumbIndex,
+        /**
+         * `true` if the slider is a range slider (with two or more thumbs).
+         */
+        isRange,
+        /**
+         * Offset of the track as a percentage (0-100).
+         */
+        trackOffset,
+        /**
+         * Length of the track as a percentage (0-100).
+         */
+        trackLength,
+        /**
+         * 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
+      },
+      internals: {
+        /**
+         * Converts a value from the slider's range to a percentage (0-100).
+         * @param value - value to convert
+         * @returns percentage representation of the value
+         */
+        valueToPercent: computed(
+          () => (value) => MathUtils.valueToPercent(value, min.value, max.value)
+        ),
+        /**
+         * Checks if a given mark value is active (i.e., within the selected range).
+         * Use case: when rendering marks, to determine if a mark is covered by the selected range.
+         *
+         * @param markValue - value of the mark to check
+         * @returns `true` if the mark is active, `false` otherwise
+         */
+        isMarkActive,
+        /**
+         * Clamps a value to the slider's range.
+         * @param value - value to clamp
+         * @returns clamped value
+         */
+        clampValue: computed(() => (value) => MathUtils.clamp(value, min.value, max.value)),
+        /**
+         * Main axis properties based on orientation.
+         */
+        axis,
+        /**
+         * Rounds a value to the nearest valid step.
+         * @param value - value to round
+         * @returns rounded value
+         */
+        roundToStep: computed(
+          () => (value) => !isDiscrete.value ? roundToStep(value, step.value, min.value) : marksValues.value[findClosestIndex(marksValues.value, value)]
+        ),
+        /**
+         * Normalizes an array of values to ensure they are within min/max bounds,
+         */
+        normalizeValues: computed(
+          () => (values2) => normalizeValues(values2, min.value, max.value, step.value)
+        )
+      }
+    };
+  }
+);
 const createTabs = createBuilder((options) => {
   const idMap = /* @__PURE__ */ new Map();
   const getId = (value) => {
@@ -1066,6 +1681,7 @@ export {
   CLOSING_KEYS,
   OPENING_KEYS,
   _unstableCreateCalendar,
+  _unstableCreateSlider,
   createBuilder,
   createComboBox,
   createElRef,

package/dist/utils/FocusVisibleTest.d.vue.ts

@@ -0,0 +1,4 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+    buttonRef: HTMLButtonElement;
+}, HTMLDivElement>;
+export default _default;

package/dist/utils/TouchEventTest.d.vue.ts

@@ -0,0 +1,4 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+    buttonRef: HTMLButtonElement;
+}, HTMLDivElement>;
+export default _default;

package/dist/utils/array.d.ts

@@ -0,0 +1,3 @@
+type Comparer<T> = (a: T, b: T) => boolean;
+export declare const areArraysEqual: <T>(arrayA: ReadonlyArray<T>, arrayB: ReadonlyArray<T>, comparer?: Comparer<T>) => boolean;
+export {};

package/dist/utils/array.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/dom.ct.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/dom.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Checks if an element has focus-visible state (keyboard focus).
+ * Falls back to false if :focus-visible is not supported.
+ */
+export declare const isFocusVisible: (element: Element) => boolean;
+/**
+ * Determines whether a given event is a `TouchEvent`.
+ *
+ * This function uses property-based detection instead of `instanceof TouchEvent`,
+ * because Safari and other WebKit-based browsers may not expose the global
+ * `TouchEvent` constructor, causing `instanceof` checks to fail or throw errors.
+ *
+ * @param event - The event object to check.
+ * @returns `true` if the event is a touch event, otherwise `false`.
+ */
+export declare const isTouchEvent: (event: Event) => event is TouchEvent;

package/dist/utils/math.d.ts

@@ -3,4 +3,31 @@ export declare const MathUtils: {
      * Ensures that a given `number` is or is between a given `min` and `max`.
      */
     clamp: (number: number, min: number, max: number) => number;
+    /**
+     * Returns the count of decimal places in a number.
+     * @param number - The number to check.
+     * @returns The count of decimal places.
+     *
+     * decimals(1.23); // 2
+     * decimals(10);   // 0
+     */
+    decimalsCount: (number: number) => number;
+    /**
+     *  Converts a value within a range to a percentage (0-100).
+     *
+     * @param value - The value to convert.
+     * @param min - The minimum allowed value.
+     * @param max - The maximum allowed value.
+     * @returns The percentage representation of the value.
+     */
+    valueToPercent: (value: number, min: number, max: number) => number;
+    /**
+     * Converts a percentage (0-100) to a value within a range.
+     *
+     * @param percent - The percentage to convert.
+     * @param min - The minimum allowed value.
+     * @param max - The maximum allowed value.
+     * @returns The value representation of the percentage.
+     */
+    percentToValue: (percent: number, min: number, max: number) => number;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/headless",
   "description": "Headless composables for Vue",
-  "version": "0.3.0-dev-20251027185548",
+  "version": "0.3.0-dev-20251027213347",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",