@sit-onyx/headless 0.5.0-dev-20260112084701 → 0.5.0-dev-20260112110323

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

@@ -60,11 +60,8 @@ export type CreateSliderOptions<TValue extends SliderValue = SliderValue> = {
 /**
  * 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 SliderValue>(options: CreateSliderOptions<TValue>) => import('../../utils/builder.js').HeadlessComposable<{
+export declare const createSlider: <TValue extends SliderValue>(options: CreateSliderOptions<TValue>) => import('../../utils/builder.js').HeadlessComposable<{
     /**
      * Root slider container element
      */
@@ -469,6 +466,7 @@ export declare const _unstableCreateSlider: <TValue extends SliderValue>(options
         type: string;
         step: number;
         disabled: boolean | undefined;
+        ref: import('../../utils/builder.js').HeadlessElRef<HTMLElement | null> | undefined;
     }>;
     /**
      * Single Mark element inside the rail
@@ -510,5 +508,6 @@ export declare const _unstableCreateSlider: <TValue extends SliderValue>(options
     marks: import('vue').ComputedRef<SliderMark[]>;
 }, {
     updateValue: (value: number, index: number) => void;
+    updateValueByStep: (direction: "increase" | "decrease") => void;
 }>;
 export {};

package/dist/index.js

@@ -976,17 +976,23 @@ const NAVIGATION_KEYS = /* @__PURE__ */ new Set([
 ]);
 const INCREMENT_KEYS = /* @__PURE__ */ new Set(["ArrowRight", "ArrowUp", "PageUp"]);
 const DECREMENT_KEYS = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowDown", "PageDown"]);
-const _unstableCreateSlider = createBuilder(
+const createSlider = createBuilder(
   (options) => {
     const sliderRef = createElRef();
+    const firstThumbRef = createElRef();
+    const secondThumbRef = createElRef();
     const min = computed(() => toValue(options.min) ?? 0);
     const max = computed(() => toValue(options.max) ?? 100);
     const step = computed(() => toValue(options.step) ?? 1);
     const draggingThumbIndex = ref();
     watch(draggingThumbIndex, (newThumbIndex) => {
       if (newThumbIndex == void 0) return;
-      Array.from(sliderRef.value?.querySelectorAll('[role="slider"]') ?? []).at(newThumbIndex)?.focus();
+      focusThumb(newThumbIndex);
     });
+    const focusThumb = (index) => {
+      if (index === 0) firstThumbRef.value?.focus();
+      else if (index === 1) secondThumbRef.value?.focus();
+    };
     const shiftStep = computed(() => {
       const shiftStep2 = toValue(options.shiftStep);
       if (shiftStep2 != void 0) return shiftStep2;
@@ -1041,6 +1047,13 @@ const _unstableCreateSlider = createBuilder(
       if (areArraysEqual(normalized, normalizedValue.value)) return;
       options.onChange?.(newValue);
     };
+    const updateValueByStep = (direction) => {
+      const index = 0;
+      const stepValue = direction === "increase" ? step.value : -step.value;
+      const currentValue = normalizedValue.value[index];
+      updateValue(currentValue + stepValue, index);
+      focusThumb(index);
+    };
     const getValueInPercentage = computed(() => {
       return (value) => {
         const percentage = MathUtils.valueToPercent(value, min.value, max.value);
@@ -1146,6 +1159,7 @@ const _unstableCreateSlider = createBuilder(
             "aria-orientation": "horizontal",
             step: step.value,
             disabled: toValue(options.disabled),
+            ref: data.index === 0 ? firstThumbRef : data.index === 1 ? secondThumbRef : void 0,
             ...toValue(options.disabled) ? void 0 : events
           };
         }),
@@ -1208,7 +1222,8 @@ const _unstableCreateSlider = createBuilder(
         marks
       },
       internals: {
-        updateValue
+        updateValue,
+        updateValueByStep
       }
     };
   }
@@ -1397,7 +1412,6 @@ export {
   CLOSING_KEYS,
   OPENING_KEYS,
   _unstableCreateCalendar,
-  _unstableCreateSlider,
   createBuilder,
   createComboBox,
   createElRef,
@@ -1405,6 +1419,7 @@ export {
   createMenuButton,
   createMenuItems,
   createNavigationMenu,
+  createSlider,
   createTabs,
   createToggletip,
   createTooltip,

package/package.json

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