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

package/dist/composables/calendar/createCalendar.d.ts

@@ -33,7 +33,7 @@ export declare const _unstableCreateCalendar: (options: CreateCalendarOptions) =
     table: {
         role: string;
         onKeydown: (event: KeyboardEvent) => Promise<void>;
-        ref: import('../../utils/builder.js').HeadlessElRef<HTMLElement>;
+        ref: import('../../utils/builder.js').HeadlessElRef<HTMLElement | null>;
     };
     cell: import('vue').ComputedRef<(cell: {
         date: Date;

package/dist/composables/dataGrid/createDataGrid.d.ts

@@ -48,7 +48,7 @@ export declare const createDataGrid: <Lazy extends boolean = false>(options: Cre
         id: string;
     };
     table: import('vue').ComputedRef<{
-        ref: import('../../utils/builder.js').HeadlessElRef<HTMLTableElement>;
+        ref: import('../../utils/builder.js').HeadlessElRef<HTMLTableElement | null>;
         onFocusin: (event: FocusEvent) => void;
         onKeydown: (event: KeyboardEvent) => void;
         role: string;
@@ -64,7 +64,7 @@ export declare const createDataGrid: <Lazy extends boolean = false>(options: Cre
     };
     td: import('vue').ComputedRef<({ rowId, colKey, colIndex }: TdOptions<Lazy>) => {
         tabindex: string;
-        ref: import('../../utils/builder.js').HeadlessElRef<HTMLElement> | undefined;
+        ref: import('../../utils/builder.js').HeadlessElRef<HTMLElement | null> | undefined;
         "data-onyx-col-key": string;
         "aria-colindex": number | undefined;
         role: string;

package/dist/composables/menuButton/createMenuButton.d.ts

@@ -33,7 +33,7 @@ export declare const createMenuButton: (options: CreateMenuButtonOptions) => {
             onMouseleave?: (() => void) | undefined;
             id: string;
             onKeydown: (event: KeyboardEvent) => void;
-            ref: import('../../utils/builder.js').HeadlessElRef<HTMLElement>;
+            ref: import('../../utils/builder.js').HeadlessElRef<HTMLElement | null>;
         }>;
         button: import('vue').ComputedRef<{
             readonly "aria-controls": string;
@@ -46,7 +46,7 @@ export declare const createMenuButton: (options: CreateMenuButtonOptions) => {
         }>;
         menu: {
             id: string;
-            ref: import('../../utils/builder.js').HeadlessElRef<HTMLElement>;
+            ref: import('../../utils/builder.js').HeadlessElRef<HTMLElement | null>;
             role: string;
             "aria-labelledby": string;
             onClick: () => void;

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
      */
@@ -256,7 +253,7 @@ export declare const _unstableCreateSlider: <TValue extends SliderValue>(options
         onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
         onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
         onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
-        ref: import('../../utils/builder.js').HeadlessElRef<HTMLElement>;
+        ref: import('../../utils/builder.js').HeadlessElRef<HTMLElement | null>;
     }>;
     /**
      * Individual thumb elements for each value (span)
@@ -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

@@ -1,15 +1,14 @@
 import { shallowRef, computed, toValue, ref, watch, nextTick, reactive, onBeforeMount, watchEffect, onBeforeUnmount, unref, useId, toRef } from "vue";
 const createBuilder = (builder) => builder;
 function createElRef() {
-  const elementRef = shallowRef();
+  const elementRef = shallowRef(null);
   return computed({
-    set: (element) => {
-      if (Array.isArray(element)) {
-        elementRef.value = element.at(0);
-      } else if (element != null && "$el" in element) {
+    set: (ref2) => {
+      const element = Array.isArray(ref2) ? ref2.at(0) : ref2;
+      if (element != null && "$el" in element) {
         elementRef.value = element.$el;
       } else {
-        elementRef.value = element;
+        elementRef.value = element ?? null;
       }
     },
     get: () => elementRef.value
@@ -977,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;
@@ -1042,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);
@@ -1101,8 +1113,8 @@ const _unstableCreateSlider = createBuilder(
       disabled: computed(() => draggingThumbIndex.value == void 0)
     });
     const getValueFromCoordinates = (x) => {
-      const rect = sliderRef.value.getBoundingClientRect();
-      if (rect.width <= 0) return;
+      const rect = sliderRef.value?.getBoundingClientRect();
+      if (!rect || rect.width <= 0) return;
       const percent = MathUtils.clamp((x - rect.left) / rect.width, 0, 1);
       return MathUtils.percentToValue(percent, min.value, max.value);
     };
@@ -1147,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
           };
         }),
@@ -1209,7 +1222,8 @@ const _unstableCreateSlider = createBuilder(
         marks
       },
       internals: {
-        updateValue
+        updateValue,
+        updateValueByStep
       }
     };
   }
@@ -1398,7 +1412,6 @@ export {
   CLOSING_KEYS,
   OPENING_KEYS,
   _unstableCreateCalendar,
-  _unstableCreateSlider,
   createBuilder,
   createComboBox,
   createElRef,
@@ -1406,6 +1419,7 @@ export {
   createMenuButton,
   createMenuItems,
   createNavigationMenu,
+  createSlider,
   createTabs,
   createToggletip,
   createTooltip,

package/dist/utils/builder.d.ts

@@ -61,7 +61,7 @@ type VueTemplateRefElement<E extends Element> = E | (ComponentPublicInstance & {
 }) | null;
 type VueTemplateRef<E extends Element> = Ref<VueTemplateRefElement<E>>;
 export declare const HeadlessElRefSymbol: unique symbol;
-export type HeadlessElRef<E extends Element> = WritableComputedRef<E> & {
+export type HeadlessElRef<E extends Element | null> = WritableComputedRef<E | null> & {
     /**
      * type differentiator
      * ensures that only `createElRef` can be used for headless element ref bindings
@@ -85,5 +85,5 @@ export type HeadlessElRef<E extends Element> = WritableComputedRef<E> & {
  * });
  * ```
  */
-export declare function createElRef<E extends Element>(): HeadlessElRef<E>;
+export declare function createElRef<E extends Element>(): HeadlessElRef<E | null>;
 export {};

package/package.json

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