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

package/dist/index.js

@@ -959,465 +959,204 @@ 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
+  "ArrowUp",
+  "ArrowDown",
+  "ArrowLeft",
+  "ArrowRight",
+  "PageUp",
+  "PageDown",
+  "Home",
+  "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 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 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 ?? -1;
-};
-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 INCREMENT_KEYS = /* @__PURE__ */ new Set(["ArrowRight", "ArrowUp", "PageUp"]);
+const DECREMENT_KEYS = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowDown", "PageDown"]);
 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 normalizedValues = computed(() => {
-      const rawValues = unref(options.value);
-      const arrayValues = Array.isArray(rawValues) ? rawValues.sort((a, b) => a - b) : [rawValues];
-      if (!arrayValues.length) return [min.value];
-      return arrayValues.map((value) => {
-        const clamped = MathUtils.clamp(value, min.value, max.value);
-        if (isDiscrete.value) {
-          return roundToStep(clamped, step.value, min.value);
-        }
-        return clamped;
-      });
+    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();
     });
     const shiftStep = computed(() => {
-      const shiftStep2 = unref(options.shiftStep);
+      const shiftStep2 = toValue(options.shiftStep);
       if (shiftStep2 != void 0) 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 isDiscrete = computed(() => unref(options.discrete) ?? false);
     const marks = computed(() => {
-      const rawMarks = unref(options.marks);
-      if (isDiscrete.value && !rawMarks) {
-        return true;
+      const _marks = toValue(options.marks);
+      if (!_marks) return [];
+      if (_marks === true) {
+        const markCount = Math.floor((max.value - min.value) / step.value) + 1;
+        return Array.from({ length: markCount }, (_, index) => {
+          return { value: min.value + step.value * index };
+        });
       }
-      return rawMarks ?? false;
+      return _marks.map((mark) => {
+        if (typeof mark === "number") return { value: mark };
+        return mark;
+      }).sort((a, b) => a.value - b.value);
     });
-    const label = computed(() => unref(options.label));
-    let touchId = null;
-    let movesSinceStart = 0;
-    let lastChangedValue = null;
-    let previousActiveIndex = null;
-    const isDragging = ref(false);
-    const activeThumbIndex = 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 getNormalizedValue = computed(() => {
+      return (value) => {
+        let values = typeof value === "number" ? [value] : value;
+        values = values.map((value2) => MathUtils.clamp(value2, min.value, max.value)).map((value2) => {
+          const stepDecimals = MathUtils.decimalsCount(step.value);
+          return Number(
+            (Math.round((value2 - min.value) / step.value) * step.value + min.value).toFixed(
+              stepDecimals
+            )
+          );
+        }).sort((a, b) => a - b);
+        return values;
+      };
     });
-    const marksValues = computed(() => marksList.value.map((mark) => mark.value));
-    const emitChange = (next) => {
-      if (!areArraysEqual(normalizedValues.value, next)) {
-        const nextValue = isRange.value ? next : next[0];
-        if (typeof nextValue !== "undefined") {
-          options.onChange?.(nextValue);
+    const normalizedValue = computed(
+      () => getNormalizedValue.value(toValue(options.value))
+    );
+    const updateValue = (value, index) => {
+      const currentValue = normalizedValue.value.slice();
+      const otherIndex = index === 0 ? 1 : 0;
+      const otherValue = currentValue[otherIndex];
+      if (otherValue != void 0) {
+        if (index < otherIndex && value > otherValue) {
+          value = otherValue;
+        } else if (index > otherIndex && value < otherValue) {
+          value = otherValue;
         }
       }
-      lastChangedValue = next;
-    };
-    const emitCommit = (fallback) => {
-      const valueWithFallback = lastChangedValue ?? fallback;
-      const nextValue = isRange.value ? valueWithFallback : valueWithFallback[0];
-      if (typeof nextValue !== "undefined") {
-        options.onCommit?.(nextValue);
-      }
+      currentValue[index] = value;
+      const normalized = getNormalizedValue.value(currentValue);
+      const newValue = normalized.length > 1 ? normalized : normalized[0];
+      if (areArraysEqual(normalized, normalizedValue.value)) return;
+      options.onChange?.(newValue);
     };
-    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 getValueInPercentage = computed(() => {
+      return (value) => {
+        const percentage = MathUtils.valueToPercent(value, min.value, max.value);
+        return MathUtils.clamp(percentage, 0, 100);
       };
-    };
-    const getNextFromCoords = (opts) => {
-      const { coords, isMoving = false } = opts;
-      const slider = sliderRef.value;
-      if (!slider) return null;
-      const rect = slider.getBoundingClientRect();
-      if (rect.width <= 0) return null;
-      const percent = MathUtils.clamp((coords.x - rect.left) / rect.width, 0, 1);
-      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(normalizedValues.value, candidate);
-      const index = isMoving && previousActiveIndex != null ? previousActiveIndex : closestIndex;
-      const adjustedValues = adjustValueByIndex({
-        values: normalizedValues.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 = normalizedValues.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: normalizedValues.value, newValue: scalar, index }) : [scalar];
-      if (isRange.value) {
-        const activeIndex = nextValues.indexOf(scalar);
-        ensureFocusOnThumb({ index: activeIndex, shouldSetActive: true });
-      }
-      if (!areArraysEqual(normalizedValues.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 handleKeydown = (event, thumbIndex) => {
+      if (!NAVIGATION_KEYS.has(event.key)) return;
+      event.preventDefault();
+      const currentValue = normalizedValue.value.slice();
+      if (currentValue[thumbIndex] == void 0) return;
+      const stepSize = event.shiftKey ? shiftStep.value : step.value;
+      if (event.key === "Home") {
+        return updateValue(min.value, thumbIndex);
       }
-      const touch = event.changedTouches[0];
-      if (touch !== null && touch !== void 0) {
-        touchId = touch.identifier;
+      if (event.key === "End") {
+        return updateValue(max.value, thumbIndex);
       }
-      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));
-        }
+      if (INCREMENT_KEYS.has(event.key)) {
+        updateValue(currentValue[thumbIndex] + stepSize, thumbIndex);
+      } else if (DECREMENT_KEYS.has(event.key)) {
+        updateValue(currentValue[thumbIndex] - stepSize, thumbIndex);
       }
-      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;
-      }
+    const handlePointerdown = (event) => {
       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 value = getValueFromCoordinates(event.x);
+      if (value == void 0) return;
+      const thumb = normalizedValue.value.reduce(
+        (previous, thumbValue, index) => {
+          const distance = Math.abs(thumbValue - value);
+          if (distance < previous.distance) return { index, distance };
+          return previous;
+        },
+        { index: 0, distance: Number.POSITIVE_INFINITY }
+      );
+      updateValue(value, thumb.index);
+      draggingThumbIndex.value = thumb.index;
     };
-    const handleHiddenInputFocus = (event) => {
-      const index = readThumbIndex(event);
-      if (isFocusVisible(event.target)) {
-        activeThumbIndex.value = index;
-      }
-    };
-    const handleHiddenInputBlur = (event) => {
-      if (!isFocusVisible(event.target)) {
-        activeThumbIndex.value = -1;
-      }
+    const handlePointermove = (event) => {
+      if (draggingThumbIndex.value == void 0) return;
+      const value = getValueFromCoordinates(event.x);
+      if (value == void 0) return;
+      updateValue(value, draggingThumbIndex.value);
     };
-    const handleHiddenInputKeydown = (event) => {
-      if (!NAVIGATION_KEYS.has(event.key)) return;
-      event.preventDefault();
-      const index = readThumbIndex(event);
-      const value = normalizedValues.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 values = marksValues.value;
-        const lastIndex = values.length - 1;
-        const currentIndex = values.indexOf(value);
-        const first = values[0];
-        const last = values[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 = values[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 = values[nextIdx];
-          if (next !== value && typeof next === "number") commitValueFromEvent(event, next);
-          return;
-        }
-      }
+    useGlobalEventListener({
+      type: "pointermove",
+      listener: handlePointermove,
+      disabled: computed(() => draggingThumbIndex.value == void 0)
+    });
+    const handlePointerup = () => {
+      draggingThumbIndex.value = void 0;
     };
-    const trackOffset = computed(
-      () => MathUtils.valueToPercent(
-        isRange.value && normalizedValues.value[0] ? normalizedValues.value[0] : min.value,
-        min.value,
-        max.value
-      )
-    );
-    const trackLength = computed(
-      () => MathUtils.valueToPercent(normalizedValues.value.at(-1) ?? 0, min.value, max.value) - trackOffset.value
-    );
-    const trackStyle = computed(() => ({
-      left: `${trackOffset.value}%`,
-      width: `${trackLength.value}%`
-    }));
-    onBeforeUnmount(stopPointerListening);
-    watch(
-      () => isDisabled.value,
-      () => {
-        if (isDisabled.value) {
-          isDragging.value = false;
-          activeThumbIndex.value = -1;
-          stopPointerListening();
-        }
-      }
-    );
-    const adjustMarkPosition = (percentage, offset) => {
-      if (offset && percentage <= 0) return offset;
-      if (offset && percentage >= 100) return `calc(100% - ${offset})`;
-      return `${percentage}%`;
+    useGlobalEventListener({
+      type: "pointerup",
+      listener: handlePointerup,
+      disabled: computed(() => draggingThumbIndex.value == void 0)
+    });
+    const getValueFromCoordinates = (x) => {
+      const rect = sliderRef.value.getBoundingClientRect();
+      if (rect.width <= 0) return;
+      const percent = MathUtils.clamp((x - rect.left) / rect.width, 0, 1);
+      return MathUtils.percentToValue(percent, min.value, max.value);
     };
     return {
       elements: {
         /**
          * Root slider container element
          */
-        root: computed(() => ({
-          ref: sliderRef,
-          style: { touchAction: "pan-y" },
-          onMousedown: handleRootMousedown,
-          onTouchstart: handlePointerStart
-        })),
+        root: computed(() => {
+          const events = {
+            onPointerdown: handlePointerdown
+          };
+          return {
+            ref: sliderRef,
+            style: { touchAction: "pan-y" },
+            ...toValue(options.disabled) ? void 0 : events
+          };
+        }),
         /**
          * Individual thumb elements for each value (span)
          */
         thumbContainer: computed(() => (data) => ({
-          "data-index": data.index,
-          style: {
-            left: `${MathUtils.valueToPercent(data.value, min.value, max.value)}%`
-          }
+          style: { left: `${getValueInPercentage.value(data.value)}%` }
         })),
         /**
-         * Visually hidden input inside each thumb for accessibility
+         * 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": "horizontal",
-          "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
-        })),
+        thumbInput: computed(() => (data) => {
+          const events = {
+            onKeydown: (event) => handleKeydown(event, data.index)
+          };
+          return {
+            min: min.value,
+            max: max.value,
+            value: data.value,
+            role: "slider",
+            type: "range",
+            "aria-label": toValue(options.label),
+            "aria-valuemin": min.value,
+            "aria-valuemax": max.value,
+            "aria-valuenow": data.value,
+            "aria-orientation": "horizontal",
+            step: step.value,
+            disabled: toValue(options.disabled),
+            ...toValue(options.disabled) ? void 0 : events
+          };
+        }),
         /**
-         * Mark elements
+         * Single Mark element inside the rail
          */
         mark: computed(() => (data) => {
-          const percentage = MathUtils.clamp(
-            MathUtils.valueToPercent(data.value, min.value, max.value),
-            0,
-            100
-          );
-          const position = adjustMarkPosition(percentage, data.positionOffset);
+          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})`;
+          }
           return {
-            "data-value": data.value,
             "aria-hidden": true,
             style: { left: position }
           };
@@ -1425,83 +1164,46 @@ const _unstableCreateSlider = createBuilder(
         /**
          * Label for each mark
          */
-        markLabel: computed(() => (data) => ({
-          "data-value": data.value,
-          style: {
-            left: `${MathUtils.valueToPercent(data.value, min.value, max.value)}%`
-          },
-          "aria-hidden": true
-        })),
+        markLabel: computed(() => (data) => {
+          const left = getValueInPercentage.value(data.value);
+          let translate = "-50%";
+          if (left === 0) {
+            translate = "0%";
+          } else if (left === 100) {
+            translate = "-100%";
+          }
+          return {
+            "aria-hidden": true,
+            style: {
+              left: `${left}%`,
+              transform: translate ? `translateX(${translate})` : void 0
+            }
+          };
+        }),
         /**
          * 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
-        }))
+        track: computed(() => {
+          const isRange = normalizedValue.value.length > 1;
+          const offsetValue = isRange ? normalizedValue.value[0] : min.value;
+          const left = getValueInPercentage.value(offsetValue);
+          const lengthValue = normalizedValue.value.at(-1);
+          const width = getValueInPercentage.value(lengthValue) - left;
+          return {
+            style: {
+              left: `${left}%`,
+              width: `${width}%`
+            }
+          };
+        })
       },
       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,
-        /**
-         * `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,
-        /**
-         * Step size when holding shift key or using Page Up/Page Down keys.
-         */
+        normalizedValue,
         shiftStep,
-        /**
-         * Normalized slider values (clamped to min/max and rounded to nearest step/mark).
-         */
-        normalizedValues
+        marks
       },
       internals: {
-        /**
-         * 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)),
-        /**
-         * 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)]
-        )
+        updateValue
       }
     };
   }