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

package/dist/playwright.d.ts

@@ -2,4 +2,5 @@ export * from './composables/comboBox/createComboBox.testing.js';
 export * from './composables/listbox/createListbox.testing.js';
 export * from './composables/menuButton/createMenuButton.testing.js';
 export * from './composables/navigationMenu/createMenu.testing.js';
+export * from './composables/slider/createSlider.testing.js';
 export * from './composables/tabs/createTabs.testing.js';

package/dist/playwright.js

@@ -265,6 +265,142 @@ const navigationTesting = async ({ nav, buttons }) => {
   await nav.press("ArrowLeft");
   await expect(buttons.nth(0)).toBeFocused();
 };
+const getRailPosition = async (rail, percentage) => {
+  const box = await rail.boundingBox();
+  const x = box.x + box.width * percentage;
+  const y = box.y + box.height * 0.5;
+  return { x, y };
+};
+const singleSliderTesting = async ({ page, slider, rail }) => {
+  await test.step("Basic accessibility and initial state", async () => {
+    await expect(slider).toHaveAttribute("role", "slider");
+    await expect(slider).toHaveAttribute("aria-valuenow", "50");
+    await expect(slider).toHaveAttribute("aria-valuemin", "0");
+    await expect(slider).toHaveAttribute("aria-valuemax", "100");
+    await expect(slider).toHaveAttribute("aria-orientation", "horizontal");
+    await expect(slider).toHaveAttribute("type", "range");
+    await expect(slider).toHaveAttribute("step", "1");
+    await slider.focus();
+    await expect(slider).toBeFocused();
+  });
+  await test.step("Keyboard navigation - Arrow keys", async () => {
+    await slider.press("ArrowRight");
+    await expect(slider).toHaveValue("51");
+    await slider.press("ArrowLeft");
+    await expect(slider).toHaveValue("50");
+    await slider.press("ArrowUp");
+    await expect(slider).toHaveValue("51");
+    await slider.press("ArrowDown");
+    await expect(slider).toHaveValue("50");
+  });
+  await test.step("Keyboard navigation - Home and End keys", async () => {
+    await slider.press("End");
+    await expect(slider).toHaveValue("100");
+    await slider.press("Home");
+    await expect(slider).toHaveValue("0");
+  });
+  await test.step("Keyboard navigation - Page Up/Down keys", async () => {
+    await slider.press("PageUp");
+    await expect(slider).toHaveValue("1");
+    await slider.press("PageDown");
+    await expect(slider).toHaveValue("0");
+  });
+  await test.step("Shift key modifies step size", async () => {
+    await slider.press("Shift+ArrowRight");
+    await expect(slider).toHaveValue("10");
+  });
+  await test.step("Mouse interaction - Click to set value", async () => {
+    await expect(rail).toBeVisible();
+    const { x, y } = await getRailPosition(rail, 0.75);
+    await page.mouse.click(x, y);
+    await expect(slider).toHaveValue("75");
+  });
+  await test.step("Mouse drag interaction", async () => {
+    const startPosition = await getRailPosition(rail, 0.25);
+    const endPosition = await getRailPosition(rail, 0.75);
+    await page.mouse.move(startPosition.x, startPosition.y);
+    await page.mouse.down();
+    await expect(slider).toHaveValue("25");
+    await page.mouse.move(endPosition.x, endPosition.y);
+    await page.mouse.up();
+    await expect(slider).toHaveValue("75");
+  });
+  await test.step("Boundary value constraints", async () => {
+    await slider.press("Home");
+    await expect(slider).toHaveValue("0");
+    await slider.press("ArrowLeft");
+    await expect(slider).toHaveValue("0");
+    await slider.press("End");
+    await expect(slider).toHaveValue("100");
+    await slider.press("ArrowRight");
+    await expect(slider).toHaveValue("100");
+  });
+};
+const rangeSliderTesting = async ({ page, slider, rail }) => {
+  const firstThumb = slider.first();
+  const lastThumb = slider.last();
+  await test.step("Basic accessibility for range slider", async () => {
+    await expect(slider).toHaveCount(2);
+    for (let i = 0; i < 2; i++) {
+      const thumb = slider.nth(i);
+      await expect(thumb).toHaveAttribute("role", "slider");
+      await expect(thumb).toHaveAttribute("aria-valuenow", i === 0 ? "25" : "75");
+      await expect(thumb).toHaveAttribute("aria-valuemin", "0");
+      await expect(thumb).toHaveAttribute("aria-valuemax", "100");
+      await expect(thumb).toHaveAttribute("step", "1");
+    }
+  });
+  await test.step("Independent thumb navigation", async () => {
+    await firstThumb.focus();
+    await expect(firstThumb).toBeFocused();
+    await firstThumb.press("ArrowRight");
+    await expect(firstThumb).toHaveValue("26");
+    await firstThumb.press("ArrowLeft");
+    await expect(firstThumb).toHaveValue("25");
+    await lastThumb.focus();
+    await expect(lastThumb).toBeFocused();
+    await lastThumb.press("ArrowRight");
+    await expect(lastThumb).toHaveValue("76");
+    await lastThumb.press("ArrowLeft");
+    await expect(lastThumb).toHaveValue("75");
+  });
+  await test.step("Tab navigation between thumbs", async () => {
+    await firstThumb.focus();
+    await expect(firstThumb).toBeFocused();
+    await page.keyboard.press("Tab");
+    await expect(lastThumb).toBeFocused();
+    await page.keyboard.press("Shift+Tab");
+    await expect(firstThumb).toBeFocused();
+  });
+  await test.step("Click and drag interactions", async () => {
+    let position = await getRailPosition(rail, 0.1);
+    await page.mouse.click(position.x, position.y);
+    await expect(firstThumb).toHaveValue("10");
+    await expect(lastThumb).toHaveValue("75");
+    position = await getRailPosition(rail, 0.8);
+    await page.mouse.click(position.x, position.y);
+    await expect(firstThumb).toHaveValue("10");
+    await expect(lastThumb).toHaveValue("80");
+    position = await getRailPosition(rail, 0.1);
+    await page.mouse.move(position.x, position.y);
+    await page.mouse.down();
+    position = await getRailPosition(rail, 0.5);
+    await page.mouse.move(position.x, position.y);
+    await expect(firstThumb, "should change value by dragging thumb").toHaveValue("50");
+    await expect(lastThumb).toHaveValue("80");
+    position = await getRailPosition(rail, 0.9);
+    await page.mouse.move(position.x, position.y);
+    await expect(firstThumb, "should not exceed last thumb when dragging").toHaveValue("80");
+    await expect(lastThumb).toHaveValue("80");
+    await page.mouse.up();
+  });
+  await test.step("Home and End navigation", async () => {
+    await firstThumb.press("Home");
+    await expect(firstThumb).toHaveValue("0");
+    await lastThumb.press("End");
+    await expect(lastThumb).toHaveValue("100");
+  });
+};
 const tabsTesting = async (options) => {
   await expect(options.tablist, 'tablist element must have role "tablist"').toHaveRole("tablist");
   await expect(options.tablist, "tablist must have an accessible label").toHaveAttribute(
@@ -365,5 +501,7 @@ export {
   listboxTesting,
   menuButtonTesting,
   navigationTesting,
+  rangeSliderTesting,
+  singleSliderTesting,
   tabsTesting
 };

package/package.json

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

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

@@ -1,92 +0,0 @@
-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-y";
-            };
-            onMousedown: (event: MouseEvent) => void;
-            onTouchstart: (event: TouchEvent) => void;
-        }>;
-        thumbContainer: import('vue').ComputedRef<(data: {
-            index: number;
-            value: number;
-        }) => {
-            "data-index": number;
-            style: {
-                left: 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": "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;
-        }>;
-        mark: import('vue').ComputedRef<(data: {
-            value: number;
-            label?: string;
-            positionOffset?: string;
-        }) => {
-            "data-value": number;
-            "aria-hidden": true;
-            style: {
-                left: string;
-            };
-        }>;
-        markLabel: import('vue').ComputedRef<(data: {
-            value: number;
-        }) => {
-            "data-value": number;
-            style: {
-                left: string;
-            };
-            "aria-hidden": true;
-        }>;
-        track: import('vue').ComputedRef<{
-            role: string;
-            "aria-hidden": true;
-            style: {
-                left: string;
-                width: string;
-            };
-        }>;
-        rail: import('vue').ComputedRef<{
-            role: string;
-            "aria-hidden": true;
-        }>;
-    }, {
-        isDragging: import('vue').Ref<boolean, boolean>;
-        activeThumbIndex: 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;
-        }[]>;
-        shiftStep: import('vue').ComputedRef<number>;
-        normalizedValues: import('vue').ComputedRef<number[]>;
-    }, {
-        clampValue: import('vue').ComputedRef<(value: number) => number>;
-        roundToStep: import('vue').ComputedRef<(value: number) => number | undefined>;
-    }>;
-}, {}, {}, {}, 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

@@ -1,92 +0,0 @@
-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-y";
-            };
-            onMousedown: (event: MouseEvent) => void;
-            onTouchstart: (event: TouchEvent) => void;
-        }>;
-        thumbContainer: import('vue').ComputedRef<(data: {
-            index: number;
-            value: number;
-        }) => {
-            "data-index": number;
-            style: {
-                left: 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": "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;
-        }>;
-        mark: import('vue').ComputedRef<(data: {
-            value: number;
-            label?: string;
-            positionOffset?: string;
-        }) => {
-            "data-value": number;
-            "aria-hidden": true;
-            style: {
-                left: string;
-            };
-        }>;
-        markLabel: import('vue').ComputedRef<(data: {
-            value: number;
-        }) => {
-            "data-value": number;
-            style: {
-                left: string;
-            };
-            "aria-hidden": true;
-        }>;
-        track: import('vue').ComputedRef<{
-            role: string;
-            "aria-hidden": true;
-            style: {
-                left: string;
-                width: string;
-            };
-        }>;
-        rail: import('vue').ComputedRef<{
-            role: string;
-            "aria-hidden": true;
-        }>;
-    }, {
-        isDragging: import('vue').Ref<boolean, boolean>;
-        activeThumbIndex: 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;
-        }[]>;
-        shiftStep: import('vue').ComputedRef<number>;
-        normalizedValues: import('vue').ComputedRef<number[]>;
-    }, {
-        clampValue: import('vue').ComputedRef<(value: number) => number>;
-        roundToStep: import('vue').ComputedRef<(value: number) => number | undefined>;
-    }>;
-}, {}, {}, {}, 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

@@ -1,92 +0,0 @@
-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-y";
-            };
-            onMousedown: (event: MouseEvent) => void;
-            onTouchstart: (event: TouchEvent) => void;
-        }>;
-        thumbContainer: import('vue').ComputedRef<(data: {
-            index: number;
-            value: number;
-        }) => {
-            "data-index": number;
-            style: {
-                left: 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": "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;
-        }>;
-        mark: import('vue').ComputedRef<(data: {
-            value: number;
-            label?: string;
-            positionOffset?: string;
-        }) => {
-            "data-value": number;
-            "aria-hidden": true;
-            style: {
-                left: string;
-            };
-        }>;
-        markLabel: import('vue').ComputedRef<(data: {
-            value: number;
-        }) => {
-            "data-value": number;
-            style: {
-                left: string;
-            };
-            "aria-hidden": true;
-        }>;
-        track: import('vue').ComputedRef<{
-            role: string;
-            "aria-hidden": true;
-            style: {
-                left: string;
-                width: string;
-            };
-        }>;
-        rail: import('vue').ComputedRef<{
-            role: string;
-            "aria-hidden": true;
-        }>;
-    }, {
-        isDragging: import('vue').Ref<boolean, boolean>;
-        activeThumbIndex: 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;
-        }[]>;
-        shiftStep: import('vue').ComputedRef<number>;
-        normalizedValues: import('vue').ComputedRef<number[]>;
-    }, {
-        clampValue: import('vue').ComputedRef<(value: number) => number>;
-        roundToStep: import('vue').ComputedRef<(value: number) => number | undefined>;
-    }>;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
-export default _default;