sit-onyx 1.3.0-dev-20251028122841 → 1.3.0-dev-20251028164321

package/dist/index.esm-bundler.js

@@ -356,6 +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" }, "calenderWeek": "CW", "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 = { "decreaseValue": "Decrease value by {n}", "increaseValue": "Increase value by {n}" };
 const enUS = {
   yes,
   no,
@@ -388,7 +389,8 @@ const enUS = {
   fileUpload,
   globalFAB,
   calendar,
-  flyoutMenu
+  flyoutMenu,
+  slider
 };
 const NUMBER_FORMATS = {
   decimal: { style: "decimal" }
@@ -1421,19 +1423,8 @@ const NAVIGATION_KEYS = /* @__PURE__ */ new Set([
 ]);
 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 TRACK_CALCULATION_STRATEGIES = {
-  horizontal: (rect, coords) => MathUtils.clamp((coords.x - rect.left) / rect.width, 0, 1),
-  vertical: (rect, coords) => MathUtils.clamp((rect.bottom - coords.y) / rect.height, 0, 1)
-};
 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 normalizeValues = (values, min, max, step) => {
-  if (!values.length) return [min];
-  return values.map((value) => {
-    const clamped = MathUtils.clamp(value, min, max);
-    return roundToStep(clamped, step, min);
-  }).sort((a, b) => a - b);
-};
 const findClosestIndex = (values, currentValue) => {
   const result = values.reduce((acc, value, index) => {
     const distance = Math.abs(currentValue - value);
@@ -1445,7 +1436,7 @@ const findClosestIndex = (values, currentValue) => {
     }
     return acc;
   }, null);
-  return result.closestIndex;
+  return result?.closestIndex ?? -1;
 };
 const adjustValueByIndex = ({
   values,
@@ -1460,32 +1451,27 @@ const _unstableCreateSlider = createBuilder(
     const min = computed(() => unref(options.min) ?? 0);
     const max = computed(() => unref(options.max) ?? 100);
     const step = computed(() => unref(options.step) ?? 1);
-    const values = computed(() => {
+    const normalizedValues = computed(() => {
       const rawValues = unref(options.value);
-      if (Array.isArray(rawValues)) {
-        if (!rawValues?.length) {
-          return [min.value];
-        }
-        return normalizeValues(rawValues, min.value, max.value, step.value);
-      } else {
-        if (typeof rawValues !== "number") {
-          return [min.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 normalizeValues([rawValues], min.value, max.value, step.value);
-      }
+        return clamped;
+      });
     });
     const shiftStep = computed(() => {
       const shiftStep2 = unref(options.shiftStep);
-      if (typeof shiftStep2 !== "undefined") {
-        return shiftStep2;
-      }
+      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 marks = computed(() => unref(options.marks) ?? false);
     const label = computed(() => unref(options.label));
-    const orientation = computed(() => unref(options.orientation) ?? "horizontal");
     const isDiscrete = computed(() => unref(options.discrete) ?? false);
     let touchId = null;
     let movesSinceStart = 0;
@@ -1493,7 +1479,6 @@ const _unstableCreateSlider = createBuilder(
     let previousActiveIndex = null;
     const isDragging = ref(false);
     const activeThumbIndex = ref(-1);
-    const focusedThumbIndex = ref(-1);
     const isRange = computed(() => {
       const unrefValues = unref(options.value);
       return Array.isArray(unrefValues) && unrefValues.length > 1;
@@ -1510,12 +1495,9 @@ const _unstableCreateSlider = createBuilder(
       }
       return [];
     });
-    const axis = computed(
-      () => orientation.value === "vertical" ? { position: "bottom", size: "height", cross: "width" } : { position: "left", size: "width", cross: "height" }
-    );
     const marksValues = computed(() => marksList.value.map((mark) => mark.value));
     const emitChange = (next) => {
-      if (!areArraysEqual(values.value, next)) {
+      if (!areArraysEqual(normalizedValues.value, next)) {
         const nextValue = isRange.value ? next : next[0];
         if (typeof nextValue !== "undefined") {
           options.onChange?.(nextValue);
@@ -1532,10 +1514,10 @@ const _unstableCreateSlider = createBuilder(
     };
     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();
+      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;
@@ -1562,12 +1544,11 @@ const _unstableCreateSlider = createBuilder(
     };
     const getNextFromCoords = (opts) => {
       const { coords, isMoving = false } = opts;
-      const slider = sliderRef.value;
-      if (!slider) return null;
-      const rect = slider.getBoundingClientRect();
-      const mainSize = orientation.value === "vertical" ? rect.height : rect.width;
-      if (mainSize <= 0) return null;
-      const percent = TRACK_CALCULATION_STRATEGIES[orientation.value](rect, coords);
+      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;
@@ -1575,10 +1556,10 @@ const _unstableCreateSlider = createBuilder(
       if (!isRange.value) {
         return { newValue: candidate, activeIndex: 0 };
       }
-      const closestIndex = findClosestIndex(values.value, candidate);
+      const closestIndex = findClosestIndex(normalizedValues.value, candidate);
       const index = isMoving && previousActiveIndex != null ? previousActiveIndex : closestIndex;
       const adjustedValues = adjustValueByIndex({
-        values: values.value,
+        values: normalizedValues.value,
         newValue: candidate,
         index
       });
@@ -1588,7 +1569,7 @@ const _unstableCreateSlider = createBuilder(
     };
     const commitValueFromEvent = (event, input2) => {
       const index = readThumbIndex(event);
-      const current = values.value[index];
+      const current = normalizedValues.value[index];
       if (typeof current !== "number") {
         return;
       }
@@ -1611,13 +1592,12 @@ const _unstableCreateSlider = createBuilder(
         return neighbor?.value ?? current;
       };
       const scalar = MathUtils.clamp(useMarks ? snapByMarks(input2) : input2, min.value, max.value);
-      const nextValues = isRange.value ? adjustValueByIndex({ values: values.value, newValue: scalar, index }) : [scalar];
+      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 });
       }
-      focusedThumbIndex.value = index;
-      if (!areArraysEqual(values.value, nextValues)) {
+      if (!areArraysEqual(normalizedValues.value, nextValues)) {
         emitChange(nextValues);
       }
       emitCommit(nextValues);
@@ -1725,13 +1705,11 @@ const _unstableCreateSlider = createBuilder(
     const handleHiddenInputFocus = (event) => {
       const index = readThumbIndex(event);
       if (isFocusVisible(event.target)) {
-        focusedThumbIndex.value = index;
         activeThumbIndex.value = index;
       }
     };
     const handleHiddenInputBlur = (event) => {
       if (!isFocusVisible(event.target)) {
-        focusedThumbIndex.value = -1;
         activeThumbIndex.value = -1;
       }
     };
@@ -1739,7 +1717,7 @@ const _unstableCreateSlider = createBuilder(
       if (!NAVIGATION_KEYS.has(event.key)) return;
       event.preventDefault();
       const index = readThumbIndex(event);
-      const value = values.value[index];
+      const value = normalizedValues.value[index];
       if (typeof value !== "number") {
         return;
       }
@@ -1759,24 +1737,24 @@ const _unstableCreateSlider = createBuilder(
         }
         return;
       } else {
-        const values2 = marksValues.value;
-        const lastIndex = values2.length - 1;
-        const currentIndex = values2.indexOf(value);
-        const first = values2[0];
-        const last = values2[lastIndex];
+        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 = values2[nextIdx];
+          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 = values2[nextIdx];
+          const next = values[nextIdx];
           if (next !== value && typeof next === "number") commitValueFromEvent(event, next);
           return;
         }
@@ -1784,27 +1762,18 @@ const _unstableCreateSlider = createBuilder(
     };
     const trackOffset = computed(
       () => MathUtils.valueToPercent(
-        isRange.value && values.value[0] ? values.value[0] : min.value,
+        isRange.value && normalizedValues.value[0] ? normalizedValues.value[0] : min.value,
         min.value,
         max.value
       )
     );
     const trackLength = computed(
-      () => MathUtils.valueToPercent(values.value.at(-1) ?? 0, min.value, max.value) - trackOffset.value
+      () => MathUtils.valueToPercent(normalizedValues.value.at(-1) ?? 0, min.value, max.value) - trackOffset.value
     );
     const trackStyle = computed(() => ({
-      [axis.value.position]: `${trackOffset.value}%`,
-      [axis.value.size]: `${trackLength.value}%`
+      left: `${trackOffset.value}%`,
+      width: `${trackLength.value}%`
     }));
-    const isMarkActive = computed(() => (markValue) => {
-      if (isRange.value) {
-        const minValue = Math.min(...values.value);
-        const maxValue = Math.max(...values.value);
-        return markValue >= minValue && markValue <= maxValue;
-      }
-      const currentValue = values.value[0];
-      return markValue <= currentValue;
-    });
     onBeforeUnmount(stopPointerListening);
     watch(
       () => isDisabled.value,
@@ -1812,11 +1781,15 @@ const _unstableCreateSlider = createBuilder(
         if (isDisabled.value) {
           isDragging.value = false;
           activeThumbIndex.value = -1;
-          focusedThumbIndex.value = -1;
           stopPointerListening();
         }
       }
     );
+    const adjustMarkPosition = (percentage, offset) => {
+      if (offset && percentage <= 0) return offset;
+      if (offset && percentage >= 100) return `calc(100% - ${offset})`;
+      return `${percentage}%`;
+    };
     return {
       elements: {
         /**
@@ -1824,7 +1797,7 @@ const _unstableCreateSlider = createBuilder(
          */
         root: computed(() => ({
           ref: sliderRef,
-          style: { touchAction: orientation.value === "vertical" ? "pan-x" : "pan-y" },
+          style: { touchAction: "pan-y" },
           onMousedown: handleRootMousedown,
           onTouchstart: handlePointerStart
         })),
@@ -1834,7 +1807,7 @@ const _unstableCreateSlider = createBuilder(
         thumbContainer: computed(() => (data) => ({
           "data-index": data.index,
           style: {
-            [axis.value.position]: `${MathUtils.valueToPercent(data.value, min.value, max.value)}%`
+            left: `${MathUtils.valueToPercent(data.value, min.value, max.value)}%`
           }
         })),
         /**
@@ -1850,7 +1823,7 @@ const _unstableCreateSlider = createBuilder(
           "aria-valuemin": min.value,
           "aria-valuemax": max.value,
           "aria-valuenow": data.value,
-          "aria-orientation": orientation.value,
+          "aria-orientation": "horizontal",
           "data-index": data.index,
           tabIndex: isDisabled.value ? -1 : 0,
           step: isDiscrete.value && marks.value ? "any" : step.value ?? void 0,
@@ -1863,20 +1836,26 @@ const _unstableCreateSlider = createBuilder(
         /**
          * Mark elements
          */
-        mark: computed(() => (data) => ({
-          "data-value": data.value,
-          "aria-hidden": true,
-          style: {
-            [axis.value.position]: `${MathUtils.clamp(MathUtils.valueToPercent(data.value, min.value, max.value), 0, 100)}%`
-          }
-        })),
+        mark: computed(() => (data) => {
+          const percentage = MathUtils.clamp(
+            MathUtils.valueToPercent(data.value, min.value, max.value),
+            0,
+            100
+          );
+          const position = adjustMarkPosition(percentage, data.positionOffset);
+          return {
+            "data-value": data.value,
+            "aria-hidden": true,
+            style: { left: position }
+          };
+        }),
         /**
          * Label for each mark
          */
         markLabel: computed(() => (data) => ({
           "data-value": data.value,
           style: {
-            [axis.value.position]: `${MathUtils.valueToPercent(data.value, min.value, max.value)}%`
+            left: `${MathUtils.valueToPercent(data.value, min.value, max.value)}%`
           },
           "aria-hidden": true
         })),
@@ -1907,11 +1886,6 @@ const _unstableCreateSlider = createBuilder(
          * `-1` if no thumb is active.
          */
         activeThumbIndex,
-        /**
-         * Index of the thumb that is currently focused.
-         * `-1` if no thumb is focused.
-         */
-        focusedThumbIndex,
         /**
          * `true` if the slider is a range slider (with two or more thumbs).
          */
@@ -1930,35 +1904,17 @@ const _unstableCreateSlider = createBuilder(
          * - 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
+        marksList,
+        shiftStep,
+        normalizedValues
       },
       internals: {
-        /**
-         * Converts a value from the slider's range to a percentage (0-100).
-         * @param value - value to convert
-         * @returns percentage representation of the value
-         */
-        valueToPercent: computed(
-          () => (value) => MathUtils.valueToPercent(value, min.value, max.value)
-        ),
-        /**
-         * Checks if a given mark value is active (i.e., within the selected range).
-         * Use case: when rendering marks, to determine if a mark is covered by the selected range.
-         *
-         * @param markValue - value of the mark to check
-         * @returns `true` if the mark is active, `false` otherwise
-         */
-        isMarkActive,
         /**
          * 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)),
-        /**
-         * Main axis properties based on orientation.
-         */
-        axis,
         /**
          * Rounds a value to the nearest valid step.
          * @param value - value to round
@@ -1966,12 +1922,6 @@ const _unstableCreateSlider = createBuilder(
          */
         roundToStep: computed(
           () => (value) => !isDiscrete.value ? roundToStep(value, step.value, min.value) : marksValues.value[findClosestIndex(marksValues.value, value)]
-        ),
-        /**
-         * Normalizes an array of values to ensure they are within min/max bounds,
-         */
-        normalizeValues: computed(
-          () => (values2) => normalizeValues(values2, min.value, max.value, step.value)
         )
       }
     };
@@ -13045,31 +12995,15 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     min: { type: Number, required: false, default: 0 },
     max: { type: Number, required: false, default: 100 },
     step: { type: Number, required: false, default: 1 },
-    shiftStep: { type: Number, required: false, default: (props) => {
-      const min = props.min ?? 0;
-      const max = props.max ?? 100;
-      const step = props.step ?? 1;
-      const stepMultiple = Math.max(1, Math.round((max - min) * 0.1 / step));
-      return stepMultiple * step;
-    } },
+    shiftStep: { type: Number, required: false },
     marks: { type: [Array, Boolean], required: false, default: false },
     control: { type: null, required: false },
-    orientation: { type: null, required: false, default: "horizontal" },
     disableTooltip: { type: Boolean, required: false },
     discrete: { type: Boolean, required: false }
   },
-  emits: ["validityChange", "update:modelValue"],
+  emits: ["update:modelValue", "validityChange"],
   setup(__props, { expose: __expose, emit: __emit }) {
     __expose();
-    const adjustMarkPosition = (percentage) => {
-      if (percentage <= 0) {
-        return "calc(0.25rem)";
-      }
-      if (percentage >= 100) {
-        return "calc(100% - 0.25rem)";
-      }
-      return `${percentage}%`;
-    };
     const props = __props;
     const emit = __emit;
     const modelValue = useVModel({
@@ -13077,6 +13011,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       emit,
       key: "modelValue"
     });
+    const { t } = injectI18n();
     const { vCustomValidity, errorMessages } = useFormElementError({ props, emit });
     const formElementProps = useForwardProps(props, OnyxFormElement);
     const messages = computed(() => getFormMessages(props.message));
@@ -13084,35 +13019,10 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     const { disabled, showError } = useFormContext(props);
     const errorClass = useErrorClass(showError);
     const skeleton = useSkeletonContext(props);
-    const handleChange = (values) => {
-      emit("update:modelValue", values);
-    };
-    const handleDecreaseByIcon = () => {
-      if (disabled.value) return;
-      if (props.mode === "single") {
-        const currentValue = Number(modelValue.value ?? props.min);
-        const stepValue = props.shiftStep ?? props.step ?? 1;
-        const newValue = Math.max(currentValue - stepValue, props.min);
-        handleChange(newValue);
-      }
-    };
-    const handleIncreaseByIcon = () => {
-      if (disabled.value) return;
-      if (props.mode === "single") {
-        const currentValue = Number(modelValue.value ?? props.min);
-        const stepValue = props.shiftStep ?? props.step ?? 1;
-        const newValue = Math.min(currentValue + stepValue, props.max);
-        handleChange(newValue);
-      }
-    };
-    const { min, max, step, marks, orientation, label, discrete, shiftStep } = toRefs(props);
-    const thumbs = computed(
-      () => Array.isArray(modelValue.value) ? modelValue.value : [modelValue.value]
-    );
+    const { min, max, step, marks, label, discrete } = toRefs(props);
     const {
       elements: { root, rail, track, thumbContainer, thumbInput, mark, markLabel },
-      state: { focusedThumbIndex, activeThumbIndex, marksList },
-      internals: { isMarkActive, valueToPercent, axis, normalizeValues: normalizeValues2 }
+      state: { activeThumbIndex, marksList, shiftStep, normalizedValues }
     } = _unstableCreateSlider({
       value: modelValue,
       min,
@@ -13120,29 +13030,35 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       step,
       label,
       marks,
-      orientation,
       discrete,
       disabled,
-      shiftStep,
-      onChange: handleChange
+      shiftStep: toRef(props, "shiftStep"),
+      onChange: (newValue) => modelValue.value = newValue
     });
-    watch(
-      () => [props.min, props.max, props.step, props.mode],
-      () => {
-        const normalized = normalizeValues2.value(
-          props.mode === "range" ? [Number(modelValue.value)] : modelValue.value
-        );
-        handleChange(props.mode === "range" ? normalized : normalized[0]);
+    const handleDecreaseByIcon = () => {
+      if (disabled.value) return;
+      const currentValue = normalizedValues.value[0];
+      if (props.mode === "single" && currentValue != void 0) {
+        const stepValue = shiftStep.value ?? props.step ?? 1;
+        const newValue = Math.max(currentValue - stepValue, props.min);
+        modelValue.value = newValue;
       }
-    );
+    };
+    const handleIncreaseByIcon = () => {
+      if (disabled.value) return;
+      const currentValue = normalizedValues.value[0];
+      if (props.mode === "single" && currentValue != void 0) {
+        const stepValue = shiftStep.value ?? props.step ?? 1;
+        const newValue = Math.min(currentValue + stepValue, props.max);
+        modelValue.value = newValue;
+      }
+    };
     const isValueControl = computed(() => props.control === "value");
     const isIconControl = computed(() => props.control === "icon" && props.mode === "single");
-    const __returned__ = { adjustMarkPosition, props, emit, modelValue, vCustomValidity, errorMessages, formElementProps, messages, densityClass, disabled, showError, errorClass, skeleton, handleChange, handleDecreaseByIcon, handleIncreaseByIcon, min, max, step, marks, orientation, label, discrete, shiftStep, thumbs, root, rail, track, thumbContainer, thumbInput, mark, markLabel, focusedThumbIndex, activeThumbIndex, marksList, isMarkActive, valueToPercent, axis, normalizeValues: normalizeValues2, isValueControl, isIconControl, get iconMinusSmall() {
+    const __returned__ = { props, emit, modelValue, t, 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, handleDecreaseByIcon, handleIncreaseByIcon, isValueControl, isIconControl, get iconMinusSmall() {
       return iconMinusSmall;
     }, get iconPlusSmall() {
       return iconPlusSmall;
-    }, get applyLimits() {
-      return applyLimits;
     }, OnyxFormElement, OnyxIconButton, OnyxSkeleton, OnyxTooltip, OnyxVisuallyHidden };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
@@ -13151,38 +13067,29 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
 const _hoisted_1$8 = { class: "onyx-slider__container" };
 const _hoisted_2$7 = {
   key: 0,
-  class: "onyx-slider__value-control-container",
-  role: "img",
-  tabindex: "-1"
+  class: "onyx-slider__control",
+  "aria-hidden": "true"
 };
 const _hoisted_3$5 = {
   key: 1,
-  class: "onyx-slider__icon-control-container"
+  class: "onyx-slider__control"
 };
 const _hoisted_4$5 = ["disabled", "aria-label", "autofocus"];
 const _hoisted_5$5 = {
   key: 2,
-  class: "onyx-slider__value-control-container",
-  role: "img",
-  tabindex: "-1"
+  class: "onyx-slider__control",
+  "aria-hidden": "true"
 };
 const _hoisted_6$4 = {
   key: 3,
-  class: "onyx-slider__icon-control-container"
+  class: "onyx-slider__control"
 };
 function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createElementBlock(
     "div",
     {
       key: 0,
-      class: normalizeClass([
-        "onyx-component",
-        "onyx-slider-skeleton",
-        $setup.densityClass,
-        {
-          "onyx-slider-skeleton--vertical": $setup.props.orientation === "vertical"
-        }
-      ])
+      class: normalizeClass(["onyx-component", "onyx-slider-skeleton", $setup.densityClass])
     },
     [
       !$setup.props.hideLabel ? (openBlock(), createBlock($setup["OnyxSkeleton"], {
@@ -13197,15 +13104,13 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
     "div",
     {
       key: 1,
-      class: normalizeClass(["onyx-component onyx-slider", [
-        {
-          "onyx-slider--vertical": $setup.props.orientation === "vertical",
-          "onyx-slider--disabled": $setup.disabled,
-          "onyx-slider--is-active": $setup.activeThumbIndex !== -1
-        },
+      class: normalizeClass([
+        "onyx-component",
+        "onyx-slider",
+        { "onyx-slider--active": $setup.activeThumbIndex !== -1 },
         $setup.densityClass,
         $setup.errorClass
-      ]])
+      ])
     },
     [
       createVNode($setup["OnyxFormElement"], mergeProps({
@@ -13226,8 +13131,8 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
             )) : createCommentVNode("v-if", true),
             $setup.isIconControl ? (openBlock(), createElementBlock("div", _hoisted_3$5, [
               createVNode($setup["OnyxIconButton"], {
-                disabled: $setup.disabled || Number($setup.modelValue ?? $setup.props.min) <= $setup.props.min,
-                label: $setup.props.label || inputId,
+                disabled: $setup.disabled || ($setup.normalizedValues[0] ?? $setup.props.min) <= $setup.props.min,
+                label: $setup.t("slider.decreaseValue", { n: $setup.shiftStep }),
                 color: "neutral",
                 icon: $setup.iconMinusSmall,
                 tabindex: "0",
@@ -13266,13 +13171,11 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
                       [
                         createElementVNode(
                           "span",
-                          mergeProps({
-                            class: ["onyx-slider__mark", { "onyx-slider__mark--active": $setup.isMarkActive(markItem.value) }]
-                          }, { ref_for: true }, $setup.mark({ value: markItem.value, label: markItem.label }), {
-                            style: {
-                              [$setup.axis.position]: `${$setup.adjustMarkPosition($setup.applyLimits($setup.valueToPercent(markItem.value), 0, 100))}`
-                            }
-                          }),
+                          mergeProps(
+                            { class: "onyx-slider__mark" },
+                            { ref_for: true },
+                            $setup.mark({ value: markItem.value, label: markItem.label, positionOffset: "0.25rem" })
+                          ),
                           null,
                           16
                           /* FULL_PROPS */
@@ -13298,21 +13201,20 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
                 (openBlock(true), createElementBlock(
                   Fragment,
                   null,
-                  renderList($setup.thumbs, (value, index) => {
+                  renderList($setup.normalizedValues, (value, index) => {
                     return openBlock(), createElementBlock(
                       "span",
                       mergeProps({ key: index }, { ref_for: true }, $setup.thumbContainer({ value, index }), {
-                        class: ["onyx-slider__thumb", {
-                          "is-focus": $setup.focusedThumbIndex === index,
-                          "is-active": $setup.activeThumbIndex === index
-                        }]
+                        class: [
+                          "onyx-slider__thumb",
+                          { "onyx-slider__thumb--active": $setup.activeThumbIndex === index }
+                        ]
                       }),
                       [
                         createVNode($setup["OnyxTooltip"], {
                           open: !$setup.props.disableTooltip && $setup.activeThumbIndex === index,
                           text: String(value),
-                          position: $setup.props.orientation === "vertical" ? "right" : "bottom",
-                          alignment: "auto",
+                          position: "bottom",
                           class: "onyx-slider__thumb-tooltip"
                         }, {
                           default: withCtx(({ trigger }) => [
@@ -13346,7 +13248,7 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
                           ]),
                           _: 2
                           /* DYNAMIC */
-                        }, 1032, ["open", "text", "position"])
+                        }, 1032, ["open", "text"])
                       ],
                       16
                       /* FULL_PROPS */
@@ -13368,13 +13270,13 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
             )) : createCommentVNode("v-if", true),
             $setup.isIconControl ? (openBlock(), createElementBlock("div", _hoisted_6$4, [
               createVNode($setup["OnyxIconButton"], {
-                disabled: $setup.disabled || Number($setup.modelValue ?? $setup.props.min) >= $setup.props.max,
-                label: "Increase",
+                disabled: $setup.disabled || ($setup.normalizedValues[0] ?? $setup.props.min) >= $setup.props.max,
+                label: $setup.t("slider.increaseValue", { n: $setup.shiftStep }),
                 color: "neutral",
                 icon: $setup.iconPlusSmall,
                 tabindex: "0",
                 onClick: $setup.handleIncreaseByIcon
-              }, null, 8, ["disabled", "icon"])
+              }, null, 8, ["disabled", "label", "icon"])
             ])) : createCommentVNode("v-if", true)
           ])
         ]),