@sit-onyx/headless 0.6.0 → 0.7.0-dev-20260204103758

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

@@ -474,7 +474,8 @@ export declare const createSlider: <TValue extends SliderValue>(options: CreateS
     mark: import('vue').ComputedRef<(data: {
         value: number;
         label?: string;
-        positionOffset?: string;
+        padding: string;
+        markWidth: string;
     }) => {
         "aria-hidden": true;
         style: {

package/dist/index.js

@@ -1171,20 +1171,18 @@ const createSlider = createBuilder(
         /**
          * Single Mark element inside the rail
          */
-        mark: computed(() => (data) => {
-          const percentage = getValueInPercentage.value(data.value);
-          let position = `${percentage}%`;
-          if (data.positionOffset && percentage <= 0) {
-            position = data.positionOffset;
-          }
-          if (data.positionOffset && percentage >= 100) {
-            position = `calc(100% - ${data.positionOffset})`;
+        mark: computed(
+          () => (data) => {
+            const percentage = getValueInPercentage.value(data.value);
+            return {
+              "aria-hidden": true,
+              style: {
+                // adjusting the position for the marks with consideration to their width and a padding/safe-zone.
+                left: `calc(${data.padding} + (100% - 2 * ${data.padding} - ${data.markWidth}) * ${percentage} / 100)`
+              }
+            };
           }
-          return {
-            "aria-hidden": true,
-            style: { left: position }
-          };
-        }),
+        ),
         /**
          * Label for each mark
          */

package/package.json

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