bits-ui 1.8.0 → 2.1.0

package/dist/bits/slider/slider.svelte.js

@@ -3,19 +3,21 @@
  * Abdelrahman (https://github.com/abdel-17)
  */
 import { untrack } from "svelte";
-import { executeCallbacks, onMountEffect, useRefById, } from "svelte-toolbelt";
+import { executeCallbacks, onMountEffect, attachRef, } from "svelte-toolbelt";
 import { on } from "svelte/events";
 import { Context, watch } from "runed";
-import { getRangeStyles, getThumbStyles, getTickStyles } from "./helpers.js";
+import { getRangeStyles, getThumbStyles, getTickStyles, normalizeSteps, snapValueToCustomSteps, getAdjacentStepValue, getTickLabelStyles, getThumbLabelStyles, } from "./helpers.js";
 import { getAriaDisabled, getAriaOrientation, getDataDisabled, getDataOrientation, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
 import { isElementOrSVGElement } from "../../internal/is.js";
 import { isValidIndex } from "../../internal/arrays.js";
-import { linearScale, snapValueToStep } from "../../internal/math.js";
+import { linearScale } from "../../internal/math.js";
 const SLIDER_ROOT_ATTR = "data-slider-root";
 const SLIDER_THUMB_ATTR = "data-slider-thumb";
 const SLIDER_RANGE_ATTR = "data-slider-range";
 const SLIDER_TICK_ATTR = "data-slider-tick";
+const SLIDER_TICK_LABEL_ATTR = "data-slider-tick-label";
+const SLIDER_THUMB_LABEL_ATTR = "data-slider-thumb-label";
 class SliderBaseRootState {
     opts;
     isActive = $state(false);
@@ -27,9 +29,12 @@ class SliderBaseRootState {
             return this.opts.dir.current === "rtl" ? "tb" : "bt";
         }
     });
+    // Normalized steps array for consistent handling
+    normalizedSteps = $derived.by(() => {
+        return normalizeSteps(this.opts.step.current, this.opts.min.current, this.opts.max.current);
+    });
     constructor(opts) {
         this.opts = opts;
-        useRefById(opts);
     }
     isThumbActive(_index) {
         return this.isActive;
@@ -46,6 +51,11 @@ class SliderBaseRootState {
         return Array.from(node.querySelectorAll(`[${SLIDER_THUMB_ATTR}]`));
     };
     getThumbScale = () => {
+        // If trackPadding is explicitly set, use it directly instead of calculating from thumb size
+        const trackPadding = this.opts.trackPadding?.current;
+        if (trackPadding !== undefined && trackPadding > 0) {
+            return [trackPadding, 100 - trackPadding];
+        }
         if (this.opts.thumbPositioning.current === "exact") {
             // User opted out of containment
             return [0, 100];
@@ -83,6 +93,7 @@ class SliderBaseRootState {
             touchAction: this.#touchAction,
         },
         [SLIDER_ROOT_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 class SliderSingleRootState extends SliderBaseRootState {
@@ -100,18 +111,21 @@ class SliderSingleRootState extends SliderBaseRootState {
             () => this.opts.max.current,
             () => this.opts.value.current,
         ], ([step, min, max, value]) => {
+            const steps = normalizeSteps(step, min, max);
             const isValidValue = (v) => {
-                const snappedValue = snapValueToStep(v, min, max, step);
-                return snappedValue === v;
+                return steps.includes(v);
             };
             const gcv = (v) => {
-                return snapValueToStep(v, min, max, step);
+                return snapValueToCustomSteps(v, steps);
             };
             if (!isValidValue(value)) {
                 this.opts.value.current = gcv(value);
             }
         });
     }
+    isTickValueSelected = (tickValue) => {
+        return this.opts.value.current === tickValue;
+    };
     applyPosition({ clientXY, start, end }) {
         const min = this.opts.min.current;
         const max = this.opts.max.current;
@@ -124,20 +138,13 @@ class SliderSingleRootState extends SliderBaseRootState {
             this.updateValue(max);
         }
         else {
-            const step = this.opts.step.current;
-            const currStep = Math.floor((val - min) / step);
-            const midpointOfCurrStep = min + currStep * step + step / 2;
-            const midpointOfNextStep = min + (currStep + 1) * step + step / 2;
-            const newValue = val >= midpointOfCurrStep && val < midpointOfNextStep
-                ? (currStep + 1) * step + min
-                : currStep * step + min;
-            if (newValue <= max) {
-                this.updateValue(newValue);
-            }
+            const steps = this.normalizedSteps;
+            const newValue = snapValueToCustomSteps(val, steps);
+            this.updateValue(newValue);
         }
     }
     updateValue = (newValue) => {
-        this.opts.value.current = snapValueToStep(newValue, this.opts.min.current, this.opts.max.current, this.opts.step.current);
+        this.opts.value.current = snapValueToCustomSteps(newValue, this.normalizedSteps);
     };
     handlePointerMove = (e) => {
         if (!this.isActive || this.opts.disabled.current)
@@ -216,7 +223,7 @@ class SliderSingleRootState extends SliderBaseRootState {
                 "aria-disabled": getAriaDisabled(this.opts.disabled.current),
                 "aria-orientation": getAriaOrientation(this.opts.orientation.current),
                 "data-value": thumbValue,
-                tabindex: this.opts.disabled.current ? -1 : 0,
+                "data-orientation": getDataOrientation(this.opts.orientation.current),
                 style,
                 [SLIDER_THUMB_ATTR]: "",
             };
@@ -226,29 +233,22 @@ class SliderSingleRootState extends SliderBaseRootState {
         return this.thumbsPropsArr.map((_, i) => i);
     });
     ticksPropsArr = $derived.by(() => {
-        const max = this.opts.max.current;
-        const min = this.opts.min.current;
-        const step = this.opts.step.current;
-        const difference = max - min;
-        let count = Math.ceil(difference / step);
-        if (difference % step == 0) {
-            count++;
-        }
+        const steps = this.normalizedSteps;
         const currValue = this.opts.value.current;
-        return Array.from({ length: count }, (_, i) => {
-            const tickPosition = i * step;
-            const scale = linearScale([0, (count - 1) * step], this.getThumbScale());
+        return steps.map((tickValue, i) => {
+            // Calculate position relative to the range
+            const tickPosition = this.getPositionFromValue(tickValue);
             const isFirst = i === 0;
-            const isLast = i === count - 1;
+            const isLast = i === steps.length - 1;
             const offsetPercentage = isFirst ? 0 : isLast ? -100 : -50;
-            const style = getTickStyles(this.direction, scale(tickPosition), offsetPercentage);
-            const tickValue = min + i * step;
+            const style = getTickStyles(this.direction, tickPosition, offsetPercentage);
             const bounded = tickValue <= currValue;
             return {
                 "data-disabled": getDataDisabled(this.opts.disabled.current),
                 "data-orientation": getDataOrientation(this.opts.orientation.current),
                 "data-bounded": bounded ? "" : undefined,
                 "data-value": tickValue,
+                "data-selected": this.isTickValueSelected(tickValue) ? "" : undefined,
                 style,
                 [SLIDER_TICK_ATTR]: "",
             };
@@ -257,9 +257,26 @@ class SliderSingleRootState extends SliderBaseRootState {
     ticksRenderArr = $derived.by(() => {
         return this.ticksPropsArr.map((_, i) => i);
     });
+    tickItemsArr = $derived.by(() => {
+        return this.ticksPropsArr.map((tick, i) => ({
+            value: tick["data-value"],
+            index: i,
+        }));
+    });
+    thumbItemsArr = $derived.by(() => {
+        const currValue = this.opts.value.current;
+        return [
+            {
+                value: currValue,
+                index: 0,
+            },
+        ];
+    });
     snippetProps = $derived.by(() => ({
         ticks: this.ticksRenderArr,
         thumbs: this.thumbsRenderArr,
+        tickItems: this.tickItemsArr,
+        thumbItems: this.thumbItemsArr,
     }));
 }
 class SliderMultiRootState extends SliderBaseRootState {
@@ -279,18 +296,21 @@ class SliderMultiRootState extends SliderBaseRootState {
             () => this.opts.max.current,
             () => this.opts.value.current,
         ], ([step, min, max, value]) => {
+            const steps = normalizeSteps(step, min, max);
             const isValidValue = (v) => {
-                const snappedValue = snapValueToStep(v, min, max, step);
-                return snappedValue === v;
+                return steps.includes(v);
             };
             const gcv = (v) => {
-                return snapValueToStep(v, min, max, step);
+                return snapValueToCustomSteps(v, steps);
             };
             if (value.some((v) => !isValidValue(v))) {
                 this.opts.value.current = value.map(gcv);
             }
         });
     }
+    isTickValueSelected = (tickValue) => {
+        return this.opts.value.current.includes(tickValue);
+    };
     isThumbActive(index) {
         return this.isActive && this.activeThumb?.idx === index;
     }
@@ -306,16 +326,9 @@ class SliderMultiRootState extends SliderBaseRootState {
             this.updateValue(max, activeThumbIdx);
         }
         else {
-            const step = this.opts.step.current;
-            const currStep = Math.floor((val - min) / step);
-            const midpointOfCurrStep = min + currStep * step + step / 2;
-            const midpointOfNextStep = min + (currStep + 1) * step + step / 2;
-            const newValue = val >= midpointOfCurrStep && val < midpointOfNextStep
-                ? (currStep + 1) * step + min
-                : currStep * step + min;
-            if (newValue <= max) {
-                this.updateValue(newValue, activeThumbIdx);
-            }
+            const steps = this.normalizedSteps;
+            const newValue = snapValueToCustomSteps(val, steps);
+            this.updateValue(newValue, activeThumbIdx);
         }
     }
     #getClosestThumb = (e) => {
@@ -448,10 +461,8 @@ class SliderMultiRootState extends SliderBaseRootState {
             this.opts.value.current = newValue;
             return;
         }
-        const min = this.opts.min.current;
-        const max = this.opts.max.current;
-        const step = this.opts.step.current;
-        newValue[idx] = snapValueToStep(thumbValue, min, max, step);
+        const steps = this.normalizedSteps;
+        newValue[idx] = snapValueToCustomSteps(thumbValue, steps);
         this.opts.value.current = newValue;
     };
     thumbsPropsArr = $derived.by(() => {
@@ -474,7 +485,7 @@ class SliderMultiRootState extends SliderBaseRootState {
                 "aria-disabled": getAriaDisabled(this.opts.disabled.current),
                 "aria-orientation": getAriaOrientation(this.opts.orientation.current),
                 "data-value": thumbValue,
-                tabindex: this.opts.disabled.current ? -1 : 0,
+                "data-orientation": getDataOrientation(this.opts.orientation.current),
                 style,
                 [SLIDER_THUMB_ATTR]: "",
             };
@@ -484,23 +495,15 @@ class SliderMultiRootState extends SliderBaseRootState {
         return this.thumbsPropsArr.map((_, i) => i);
     });
     ticksPropsArr = $derived.by(() => {
-        const max = this.opts.max.current;
-        const min = this.opts.min.current;
-        const step = this.opts.step.current;
-        const difference = max - min;
-        let count = Math.ceil(difference / step);
-        if (difference % step == 0) {
-            count++;
-        }
+        const steps = this.normalizedSteps;
         const currValue = this.opts.value.current;
-        return Array.from({ length: count }, (_, i) => {
-            const tickPosition = i * step;
-            const scale = linearScale([0, (count - 1) * step], this.getThumbScale());
+        return steps.map((tickValue, i) => {
+            // Calculate position relative to the range
+            const tickPosition = this.getPositionFromValue(tickValue);
             const isFirst = i === 0;
-            const isLast = i === count - 1;
+            const isLast = i === steps.length - 1;
             const offsetPercentage = isFirst ? 0 : isLast ? -100 : -50;
-            const style = getTickStyles(this.direction, scale(tickPosition), offsetPercentage);
-            const tickValue = min + i * step;
+            const style = getTickStyles(this.direction, tickPosition, offsetPercentage);
             const bounded = currValue.length === 1
                 ? tickValue <= currValue[0]
                 : currValue[0] <= tickValue && tickValue <= currValue[currValue.length - 1];
@@ -517,9 +520,24 @@ class SliderMultiRootState extends SliderBaseRootState {
     ticksRenderArr = $derived.by(() => {
         return this.ticksPropsArr.map((_, i) => i);
     });
+    tickItemsArr = $derived.by(() => {
+        return this.ticksPropsArr.map((tick, i) => ({
+            value: tick["data-value"],
+            index: i,
+        }));
+    });
+    thumbItemsArr = $derived.by(() => {
+        const currValue = this.opts.value.current;
+        return currValue.map((value, index) => ({
+            value,
+            index,
+        }));
+    });
     snippetProps = $derived.by(() => ({
         ticks: this.ticksRenderArr,
         thumbs: this.thumbsRenderArr,
+        tickItems: this.tickItemsArr,
+        thumbItems: this.thumbItemsArr,
     }));
 }
 const VALID_SLIDER_KEYS = [
@@ -536,21 +554,37 @@ class SliderRangeState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
     }
     rangeStyles = $derived.by(() => {
-        const min = Array.isArray(this.root.opts.value.current)
-            ? this.root.opts.value.current.length > 1
+        if (Array.isArray(this.root.opts.value.current)) {
+            // Multi-slider: range between min and max thumbs
+            const min = this.root.opts.value.current.length > 1
                 ? this.root.getPositionFromValue(Math.min(...this.root.opts.value.current) ?? 0)
-                : 0
-            : 0;
-        const max = Array.isArray(this.root.opts.value.current)
-            ? 100 - this.root.getPositionFromValue(Math.max(...this.root.opts.value.current) ?? 0)
-            : 100 - this.root.getPositionFromValue(this.root.opts.value.current);
-        return {
-            position: "absolute",
-            ...getRangeStyles(this.root.direction, min, max),
-        };
+                : 0;
+            const max = 100 -
+                this.root.getPositionFromValue(Math.max(...this.root.opts.value.current) ?? 0);
+            return {
+                position: "absolute",
+                ...getRangeStyles(this.root.direction, min, max),
+            };
+        }
+        else {
+            // Single slider: range from start to current value
+            const trackPadding = this.root.opts.trackPadding?.current;
+            const currentValue = this.root.opts.value.current;
+            const maxValue = this.root.opts.max.current;
+            // Always start from 0% (beginning of track container)
+            const min = 0;
+            // If trackPadding is set and we're at max value, extend to fill the container
+            // Otherwise use the thumb position
+            const max = trackPadding !== undefined && trackPadding > 0 && currentValue === maxValue
+                ? 0 // 100% - 0% = full width
+                : 100 - this.root.getPositionFromValue(currentValue);
+            return {
+                position: "absolute",
+                ...getRangeStyles(this.root.direction, min, max),
+            };
+        }
     });
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -558,6 +592,7 @@ class SliderRangeState {
         "data-disabled": getDataDisabled(this.root.opts.disabled.current),
         style: this.rangeStyles,
         [SLIDER_RANGE_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 class SliderThumbState {
@@ -567,7 +602,6 @@ class SliderThumbState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
         this.onkeydown = this.onkeydown.bind(this);
     }
     #updateValue(newValue) {
@@ -600,7 +634,7 @@ class SliderThumbState {
         const thumbValue = Array.isArray(value) ? value[idx] : value;
         const orientation = this.root.opts.orientation.current;
         const direction = this.root.direction;
-        const step = this.root.opts.step.current;
+        const steps = this.root.normalizedSteps;
         switch (e.key) {
             case kbd.HOME:
                 this.#updateValue(min);
@@ -615,11 +649,10 @@ class SliderThumbState {
                     const newValue = direction === "rl" ? max : min;
                     this.#updateValue(newValue);
                 }
-                else if (direction === "rl" && thumbValue < max) {
-                    this.#updateValue(thumbValue + step);
-                }
-                else if (direction === "lr" && thumbValue > min) {
-                    this.#updateValue(thumbValue - step);
+                else {
+                    const stepDirection = direction === "rl" ? "next" : "prev";
+                    const newValue = getAdjacentStepValue(thumbValue, steps, stepDirection);
+                    this.#updateValue(newValue);
                 }
                 break;
             case kbd.ARROW_RIGHT:
@@ -629,11 +662,10 @@ class SliderThumbState {
                     const newValue = direction === "rl" ? min : max;
                     this.#updateValue(newValue);
                 }
-                else if (direction === "rl" && thumbValue > min) {
-                    this.#updateValue(thumbValue - step);
-                }
-                else if (direction === "lr" && thumbValue < max) {
-                    this.#updateValue(thumbValue + step);
+                else {
+                    const stepDirection = direction === "rl" ? "prev" : "next";
+                    const newValue = getAdjacentStepValue(thumbValue, steps, stepDirection);
+                    this.#updateValue(newValue);
                 }
                 break;
             case kbd.ARROW_UP:
@@ -641,11 +673,10 @@ class SliderThumbState {
                     const newValue = direction === "tb" ? min : max;
                     this.#updateValue(newValue);
                 }
-                else if (direction === "tb" && thumbValue > min) {
-                    this.#updateValue(thumbValue - step);
-                }
-                else if (direction !== "tb" && thumbValue < max) {
-                    this.#updateValue(thumbValue + step);
+                else {
+                    const stepDirection = direction === "tb" ? "prev" : "next";
+                    const newValue = getAdjacentStepValue(thumbValue, steps, stepDirection);
+                    this.#updateValue(newValue);
                 }
                 break;
             case kbd.ARROW_DOWN:
@@ -653,11 +684,10 @@ class SliderThumbState {
                     const newValue = direction === "tb" ? max : min;
                     this.#updateValue(newValue);
                 }
-                else if (direction === "tb" && thumbValue < max) {
-                    this.#updateValue(thumbValue + step);
-                }
-                else if (direction !== "tb" && thumbValue > min) {
-                    this.#updateValue(thumbValue - step);
+                else {
+                    const stepDirection = direction === "tb" ? "next" : "prev";
+                    const newValue = getAdjacentStepValue(thumbValue, steps, stepDirection);
+                    this.#updateValue(newValue);
                 }
                 break;
         }
@@ -669,6 +699,9 @@ class SliderThumbState {
         id: this.opts.id.current,
         onkeydown: this.onkeydown,
         "data-active": this.root.isThumbActive(this.opts.index.current) ? "" : undefined,
+        "data-disabled": getDataDisabled(this.opts.disabled.current || this.root.opts.disabled.current),
+        tabindex: this.opts.disabled.current || this.root.opts.disabled.current ? -1 : 0,
+        ...attachRef(this.opts.ref),
     }));
 }
 class SliderTickState {
@@ -677,14 +710,68 @@ class SliderTickState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
     }
     props = $derived.by(() => ({
         ...this.root.ticksPropsArr[this.opts.index.current],
         id: this.opts.id.current,
+        ...attachRef(this.opts.ref),
     }));
 }
-const SliderRootContext = new Context("Slider.Root");
+class SliderTickLabelState {
+    opts;
+    root;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+    }
+    props = $derived.by(() => {
+        const tickProps = this.root.ticksPropsArr[this.opts.index.current];
+        const steps = this.root.normalizedSteps;
+        const tickValue = steps[this.opts.index.current];
+        const tickPosition = this.root.getPositionFromValue(tickValue);
+        const labelPosition = this.opts.position?.current ?? "top";
+        const style = getTickLabelStyles(this.root.direction, tickPosition, labelPosition);
+        return {
+            id: this.opts.id.current,
+            "data-orientation": getDataOrientation(this.root.opts.orientation.current),
+            "data-disabled": getDataDisabled(this.root.opts.disabled.current),
+            "data-bounded": tickProps["data-bounded"],
+            "data-value": tickValue,
+            "data-selected": this.root.isTickValueSelected(tickValue) ? "" : undefined,
+            "data-position": labelPosition,
+            style,
+            [SLIDER_TICK_LABEL_ATTR]: "",
+            ...attachRef(this.opts.ref),
+        };
+    });
+}
+class SliderThumbLabelState {
+    opts;
+    root;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+    }
+    props = $derived.by(() => {
+        const value = this.root.opts.value.current;
+        const thumbValue = Array.isArray(value) ? value[this.opts.index.current] : value;
+        const thumbPosition = this.root.getPositionFromValue(thumbValue);
+        const labelPosition = this.opts.position?.current ?? "top";
+        const style = getThumbLabelStyles(this.root.direction, thumbPosition, labelPosition);
+        return {
+            id: this.opts.id.current,
+            "data-orientation": getDataOrientation(this.root.opts.orientation.current),
+            "data-disabled": getDataDisabled(this.root.opts.disabled.current),
+            "data-value": thumbValue,
+            "data-active": this.root.isThumbActive(this.opts.index.current) ? "" : undefined,
+            "data-position": labelPosition,
+            style,
+            [SLIDER_THUMB_LABEL_ATTR]: "",
+            ...attachRef(this.opts.ref),
+        };
+    });
+}
+export const SliderRootContext = new Context("Slider.Root");
 export function useSliderRoot(props) {
     const { type, ...rest } = props;
     const rootState = type === "single"
@@ -701,3 +788,9 @@ export function useSliderThumb(props) {
 export function useSliderTick(props) {
     return new SliderTickState(props, SliderRootContext.get());
 }
+export function useSliderTickLabel(props) {
+    return new SliderTickLabelState(props, SliderRootContext.get());
+}
+export function useSliderThumbLabel(props) {
+    return new SliderThumbLabelState(props, SliderRootContext.get());
+}