sit-onyx 1.4.0-dev-20251112133447 → 1.4.0-dev-20251118074438

package/dist/index.esm-bundler.js

@@ -356,7 +356,7 @@ const fileUpload = { "select": "Select", "clickToUpload": "Click to select", "or
 const globalFAB = { "label": "Global actions" };
 const calendar = { "todayButton": { "label": "Today", "tooltip": "Jump to today" }, "calendarWeek": "CW", "calendarWeekButtonLabel": "Select calendar week {weekNumber}", "previousMonthButton": "Previous month", "nextMonthButton": "Next month" };
 const flyoutMenu = { "moreActions": "More actions", "toggleActions": { "click": "Click to toggle action visibility", "hover": "Hover/Focus to toggle action visibility" } };
-const slider = { "decreaseValueBy": "Decrease value by {n}", "increaseValueBy": "Increase value by {n}", "changeValue": "Change value" };
+const slider = { "decreaseValueBy": "Decrease value by {n}", "increaseValueBy": "Increase value by {n}", "changeValue": "Change value", "changeStartValue": "Change start value", "changeEndValue": "Change end value" };
 const codeTabs = { "label": "Code snippets", "copySnippet": "Copy code", "copied": "Copied!", "failed": "Failed!", "tabLabel": "Code" };
 const globalSearch = { "label": "Global search", "searchResults": "Search results", "input": { "label": "Search for content", "placeholder": "Search..." }, "shortcuts": { "move": "Navigate", "select": "Select" }, "system": "System" };
 const enUS = {
@@ -1445,465 +1445,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 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);
-        }
-      }
-      lastChangedValue = next;
-    };
-    const emitCommit = (fallback2) => {
-      const valueWithFallback = lastChangedValue ?? fallback2;
-      const nextValue = isRange.value ? valueWithFallback : valueWithFallback[0];
-      if (typeof nextValue !== "undefined") {
-        options.onCommit?.(nextValue);
-      }
-    };
-    const ensureFocusOnThumb = (options2) => {
-      const { index, shouldSetActive = false } = options2;
-      const slider2 = sliderRef.value;
-      if (!slider2) return;
-      if (slider2.contains(document.activeElement) && Number(document.activeElement?.getAttribute("data-index")) !== index) {
-        slider2.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 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 getNextFromCoords = (opts) => {
-      const { coords, isMoving = false } = opts;
-      const slider2 = sliderRef.value;
-      if (!slider2) return null;
-      const rect = slider2.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, input2) => {
-      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 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;
         }
-        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(input2) : input2, 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;
+      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 handlePointerStart = (event) => {
-      if (isDisabled.value) {
-        return;
+    const getValueInPercentage = computed(() => {
+      return (value) => {
+        const percentage = MathUtils.valueToPercent(value, min.value, max.value);
+        return MathUtils.clamp(percentage, 0, 100);
+      };
+    });
+    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 handleHiddenInputFocus = (event) => {
-      const index = readThumbIndex(event);
-      if (isFocusVisible(event.target)) {
-        activeThumbIndex.value = index;
-      }
+      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 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 }
           };
@@ -1911,83 +1650,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
       }
     };
   }
@@ -13869,6 +13571,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     const displayValue = computed(() => getDisplayValue.value(modelValue.value));
     const getFormattedValue = computed(() => {
       return (value) => {
+        if (value != void 0 && isNaN(value)) return "";
         if (props.precision !== void 0 && value != void 0) {
           return roundToPrecision(value, props.precision);
         } else {
@@ -13915,7 +13618,8 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
         return;
       }
       inputValue.value = getFormattedValue.value(parseFloat(inputValue.value));
-      modelValue.value = parseFloat(inputValue.value);
+      const parsedValue = parseFloat(inputValue.value);
+      modelValue.value = isNaN(parsedValue) ? void 0 : parsedValue;
     };
     const handleBlur = () => {
       inputValue.value = getFormattedValue.value(modelValue.value);
@@ -14062,6 +13766,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     __expose();
     const props = __props;
     const emit = __emit;
+    const { t } = injectI18n();
     const { densityClass } = useDensity(props);
     const modelValue = useVModel({
       props,
@@ -14075,12 +13780,15 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       modelValue.value = newValue;
     };
     const handleStepperChange = (value) => {
-      if (typeof value === "number") {
-        modelValue.value = value;
-      }
+      if (value == void 0) return;
+      modelValue.value = value;
     };
-    const { t } = injectI18n();
-    const __returned__ = { props, emit, densityClass, modelValue, handleIconClick, handleStepperChange, t, get iconMinusSmall() {
+    const stepperLabel = computed(() => {
+      if (props.direction === "increase") return t.value("slider.changeStartValue");
+      else if (props.direction === "decrease") return t.value("slider.changeEndValue");
+      return t.value("slider.changeValue");
+    });
+    const __returned__ = { props, emit, t, densityClass, modelValue, handleIconClick, handleStepperChange, stepperLabel, get iconMinusSmall() {
       return iconMinusSmall;
     }, get iconPlusSmall() {
       return iconPlusSmall;
@@ -14119,7 +13827,6 @@ function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
             color: "neutral",
             label: $setup.t("slider.decreaseValueBy", { n: $setup.props.shiftStep }),
             icon: $setup.iconMinusSmall,
-            tabindex: "0",
             onClick: $setup.handleIconClick
           }, null, 8, ["disabled", "label", "icon"])) : createCommentVNode("v-if", true),
           $setup.props.direction === "increase" ? (openBlock(), createBlock($setup["OnyxIconButton"], {
@@ -14128,7 +13835,6 @@ function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
             color: "neutral",
             label: $setup.t("slider.increaseValueBy", { n: $setup.props.shiftStep }),
             icon: $setup.iconPlusSmall,
-            tabindex: "0",
             onClick: $setup.handleIconClick
           }, null, 8, ["disabled", "label", "icon"])) : createCommentVNode("v-if", true)
         ],
@@ -14137,7 +13843,7 @@ function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
       )) : createCommentVNode("v-if", true),
       $setup.props.control === "input" ? (openBlock(), createBlock($setup["OnyxStepper"], {
         key: 2,
-        label: $setup.t("slider.changeValue"),
+        label: $setup.stepperLabel,
         "hide-label": "",
         "hide-buttons": "",
         disabled: $setup.props.disabled,
@@ -14177,8 +13883,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     shiftStep: { type: Number, required: false },
     marks: { type: [Array, Boolean], required: false },
     control: { type: null, required: false },
-    disableTooltip: { type: Boolean, required: false },
-    discrete: { type: Boolean, required: false }
+    disableTooltip: { type: Boolean, required: false }
   },
   emits: ["update:modelValue", "validityChange"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -14197,51 +13902,29 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     const { disabled, showError } = useFormContext(props);
     const errorClass = useErrorClass(showError);
     const skeleton = useSkeletonContext(props);
-    const { min, max, step, marks, label, discrete } = toRefs(props);
+    const { min, max, step, label } = toRefs(props);
     const {
-      elements: { root, rail, track, thumbContainer, thumbInput, mark, markLabel },
-      state: { activeThumbIndex, marksList, shiftStep, normalizedValues },
-      internals: { roundToStep: roundToStep2, clampValue }
+      elements: { root, track, thumbContainer, thumbInput, mark, markLabel },
+      state: { normalizedValue, marks, shiftStep },
+      internals: { updateValue }
     } = _unstableCreateSlider({
       value: modelValue,
       min,
       max,
       step,
       label,
-      marks,
-      discrete,
+      marks: toRef(props, "marks"),
       disabled,
       shiftStep: toRef(props, "shiftStep"),
       onChange: (newValue) => modelValue.value = newValue
     });
-    const handleSliderInputControlChange = (index, value) => {
-      const rounded = roundToStep2.value(clampValue.value(value));
-      if (rounded === void 0) return;
-      if (Array.isArray(modelValue.value)) {
-        if (index === 0 && rounded <= (modelValue.value[1] ?? props.max)) {
-          modelValue.value = [rounded, modelValue.value[1]];
-          return;
-        }
-        if (index === 1 && rounded >= (modelValue.value[0] ?? props.min)) {
-          modelValue.value = [modelValue.value[0], rounded];
-          return;
-        }
-      } else {
-        modelValue.value = rounded;
-      }
-    };
-    const handleSliderIconControlChange = (value) => {
-      const rounded = roundToStep2.value(clampValue.value(value));
-      if (rounded === void 0) return;
-      modelValue.value = rounded;
-    };
-    const __returned__ = { props, emit, modelValue, vCustomValidity, errorMessages, formElementProps, messages, densityClass, disabled, showError, errorClass, skeleton, min, max, step, marks, label, discrete, root, rail, track, thumbContainer, thumbInput, mark, markLabel, activeThumbIndex, marksList, shiftStep, normalizedValues, roundToStep: roundToStep2, clampValue, handleSliderInputControlChange, handleSliderIconControlChange, OnyxFormElement, OnyxSkeleton, OnyxSliderControl, OnyxTooltip, OnyxVisuallyHidden };
+    const __returned__ = { props, emit, modelValue, vCustomValidity, errorMessages, formElementProps, messages, densityClass, disabled, showError, errorClass, skeleton, min, max, step, label, root, track, thumbContainer, thumbInput, mark, markLabel, normalizedValue, marks, shiftStep, updateValue, OnyxFormElement, OnyxSkeleton, OnyxSliderControl, OnyxTooltip, OnyxVisuallyHidden };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
 });
 const _hoisted_1$6 = { class: "onyx-slider__container" };
-const _hoisted_2$5 = ["disabled", "aria-label", "autofocus"];
+const _hoisted_2$5 = ["id", "disabled", "aria-label", "autofocus"];
 function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createElementBlock(
     "div",
@@ -14262,13 +13945,7 @@ function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
     "div",
     {
       key: 1,
-      class: normalizeClass([
-        "onyx-component",
-        "onyx-slider",
-        { "onyx-slider--active": $setup.activeThumbIndex !== -1 },
-        $setup.densityClass,
-        $setup.errorClass
-      ])
+      class: normalizeClass(["onyx-component", "onyx-slider", $setup.densityClass, $setup.errorClass])
     },
     [
       createVNode($setup["OnyxFormElement"], mergeProps({
@@ -14284,36 +13961,33 @@ function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
               key: 0,
               control: "value",
               "model-value": $setup.props.min
-            }, null, 8, ["model-value"])) : createCommentVNode("v-if", true),
-            $setup.props.control === "icon" && $setup.props.mode === "single" ? (openBlock(), createBlock($setup["OnyxSliderControl"], {
+            }, null, 8, ["model-value"])) : $setup.props.control === "icon" && $setup.props.mode === "single" ? (openBlock(), createBlock($setup["OnyxSliderControl"], {
               key: 1,
               control: "icon",
               direction: "decrease",
               "shift-step": $setup.shiftStep,
-              "model-value": $setup.normalizedValues[0],
-              disabled: $setup.disabled || ($setup.normalizedValues[0] ?? $setup.props.min) <= $setup.props.min,
-              "onUpdate:modelValue": $setup.handleSliderIconControlChange
-            }, null, 8, ["shift-step", "model-value", "disabled"])) : createCommentVNode("v-if", true),
-            $setup.props.control === "input" && $setup.props.mode === "range" ? (openBlock(), createBlock($setup["OnyxSliderControl"], {
+              "model-value": $setup.normalizedValue[0],
+              disabled: $setup.disabled || ($setup.normalizedValue[0] ?? $setup.props.min) <= $setup.props.min,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $setup.updateValue($event, 0))
+            }, null, 8, ["shift-step", "model-value", "disabled"])) : $setup.props.control === "input" && $setup.props.mode === "range" ? (openBlock(), createBlock($setup["OnyxSliderControl"], {
               key: 2,
               control: "input",
+              direction: "increase",
               disabled: $setup.disabled,
-              "model-value": $setup.normalizedValues[0] ?? 0,
-              "onUpdate:modelValue": _cache[0] || (_cache[0] = (value) => $setup.handleSliderInputControlChange(0, value))
+              "model-value": $setup.normalizedValue[0] ?? 0,
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => $setup.updateValue($event, 0))
             }, null, 8, ["disabled", "model-value"])) : createCommentVNode("v-if", true),
             createElementVNode(
               "span",
-              mergeProps({ class: "onyx-slider__root" }, $setup.root, {
-                onTouchstartPassive: _cache[1] || (_cache[1] = (...args) => $setup.root.onTouchstart && $setup.root.onTouchstart(...args))
-              }),
+              mergeProps({ class: "onyx-slider__root" }, $setup.root),
               [
-                createElementVNode(
+                _cache[4] || (_cache[4] = createElementVNode(
                   "span",
-                  mergeProps({ class: "onyx-slider__rail" }, $setup.rail),
+                  { class: "onyx-slider__rail" },
                   null,
-                  16
-                  /* FULL_PROPS */
-                ),
+                  -1
+                  /* CACHED */
+                )),
                 createElementVNode(
                   "span",
                   mergeProps({ class: "onyx-slider__track" }, $setup.track),
@@ -14324,7 +13998,7 @@ function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
                 (openBlock(true), createElementBlock(
                   Fragment,
                   null,
-                  renderList($setup.marksList, (markItem) => {
+                  renderList($setup.marks, (markItem) => {
                     return openBlock(), createElementBlock(
                       Fragment,
                       {
@@ -14363,18 +14037,13 @@ function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
                 (openBlock(true), createElementBlock(
                   Fragment,
                   null,
-                  renderList($setup.normalizedValues, (value, index) => {
+                  renderList($setup.normalizedValue, (value, index) => {
                     return openBlock(), createElementBlock(
                       "span",
-                      mergeProps({ key: index }, { ref_for: true }, $setup.thumbContainer({ value, index }), {
-                        class: [
-                          "onyx-slider__thumb",
-                          { "onyx-slider__thumb--active": $setup.activeThumbIndex === index }
-                        ]
-                      }),
+                      mergeProps({ key: index }, { ref_for: true }, $setup.thumbContainer({ value, index }), { class: "onyx-slider__thumb" }),
                       [
                         createVNode($setup["OnyxTooltip"], {
-                          open: !$setup.props.disableTooltip && $setup.activeThumbIndex === index,
+                          open: $setup.props.disableTooltip ? false : void 0,
                           text: String(value),
                           position: "bottom",
                           class: "onyx-slider__thumb-tooltip"
@@ -14389,9 +14058,12 @@ function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
                                   null,
                                   {
                                     default: withCtx(() => [
-                                      withDirectives(createElementVNode("input", mergeProps({ class: "onyx-slider__native" }, { ref_for: true }, $setup.thumbInput({ value, index }), {
+                                      withDirectives(createElementVNode("input", mergeProps({
+                                        id: index === 0 ? inputId : void 0,
+                                        class: "onyx-slider__native"
+                                      }, { ref_for: true }, $setup.thumbInput({ value, index }), {
                                         disabled: $setup.disabled,
-                                        "aria-label": $setup.props.label || inputId,
+                                        "aria-label": $setup.props.label,
                                         autofocus: $setup.props.autofocus && index === 0
                                       }), null, 16, _hoisted_2$5), [
                                         [$setup["vCustomValidity"]]
@@ -14427,22 +14099,21 @@ function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
               key: 3,
               control: "value",
               "model-value": $setup.props.max
-            }, null, 8, ["model-value"])) : createCommentVNode("v-if", true),
-            $setup.props.control === "icon" && $setup.props.mode === "single" ? (openBlock(), createBlock($setup["OnyxSliderControl"], {
+            }, null, 8, ["model-value"])) : $setup.props.control === "icon" && $setup.props.mode === "single" ? (openBlock(), createBlock($setup["OnyxSliderControl"], {
               key: 4,
               control: "icon",
               direction: "increase",
               "shift-step": $setup.shiftStep,
-              "model-value": $setup.normalizedValues[0],
-              "onUpdate:modelValue": $setup.handleSliderIconControlChange
-            }, null, 8, ["shift-step", "model-value"])) : createCommentVNode("v-if", true),
-            $setup.props.control === "input" ? (openBlock(), createBlock($setup["OnyxSliderControl"], {
+              "model-value": $setup.normalizedValue[0],
+              "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => $setup.updateValue($event, 0))
+            }, null, 8, ["shift-step", "model-value"])) : $setup.props.control === "input" ? (openBlock(), createBlock($setup["OnyxSliderControl"], {
               key: 5,
               control: "input",
+              direction: $setup.props.mode === "range" ? "decrease" : void 0,
               disabled: $setup.disabled,
-              "model-value": $setup.normalizedValues[1] ?? $setup.normalizedValues[0] ?? 0,
-              "onUpdate:modelValue": _cache[2] || (_cache[2] = (value) => $setup.handleSliderInputControlChange($setup.props.mode === "range" ? 1 : 0, value))
-            }, null, 8, ["disabled", "model-value"])) : createCommentVNode("v-if", true)
+              "model-value": $setup.normalizedValue[1] ?? $setup.normalizedValue[0] ?? 0,
+              "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => $setup.updateValue($event, $setup.props.mode === "range" ? 1 : 0))
+            }, null, 8, ["direction", "disabled", "model-value"])) : createCommentVNode("v-if", true)
           ])
         ]),
         _: 1