bits-ui 1.7.0 → 2.1.0

package/dist/bits/select/select.svelte.js

@@ -1,5 +1,5 @@
 import { Context, Previous, watch } from "runed";
-import { afterSleep, afterTick, onDestroyEffect, useRefById } from "svelte-toolbelt";
+import { afterSleep, afterTick, onDestroyEffect, attachRef } from "svelte-toolbelt";
 import { on } from "svelte/events";
 import { backward, forward, next, prev } from "../../internal/arrays.js";
 import { getAriaExpanded, getAriaHidden, getDataDisabled, getDataOpenClosed, getDisabled, getRequired, } from "../../internal/attrs.js";
@@ -210,12 +210,6 @@ class SelectInputState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.root.inputNode = node;
-            },
-        });
         this.onkeydown = this.onkeydown.bind(this);
         this.oninput = this.oninput.bind(this);
         watch([() => this.root.opts.value.current, () => this.opts.clearOnDeselect.current], ([value, clearOnDeselect], [prevValue]) => {
@@ -340,6 +334,7 @@ class SelectInputState {
         onkeydown: this.onkeydown,
         oninput: this.oninput,
         [this.root.bitsAttrs.input]: "",
+        ...attachRef(this.opts.ref, (v) => (this.root.inputNode = v)),
     }));
 }
 class SelectComboTriggerState {
@@ -348,7 +343,6 @@ class SelectComboTriggerState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
         this.onkeydown = this.onkeydown.bind(this);
         this.onpointerdown = this.onpointerdown.bind(this);
     }
@@ -383,6 +377,7 @@ class SelectComboTriggerState {
         [this.root.bitsAttrs.trigger]: "",
         onpointerdown: this.onpointerdown,
         onkeydown: this.onkeydown,
+        ...attachRef(this.opts.ref),
     }));
 }
 class SelectTriggerState {
@@ -393,12 +388,6 @@ class SelectTriggerState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.root.triggerNode = node;
-            },
-        });
         this.#domTypeahead = useDOMTypeahead({
             getCurrentItem: () => this.root.highlightedNode,
             onMatch: (node) => {
@@ -617,6 +606,7 @@ class SelectTriggerState {
         onkeydown: this.onkeydown,
         onclick: this.onclick,
         onpointerup: this.onpointerup,
+        ...attachRef(this.opts.ref, (v) => (this.root.triggerNode = v)),
     }));
 }
 class SelectContentState {
@@ -627,13 +617,6 @@ class SelectContentState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.root.contentNode = node;
-            },
-            deps: () => this.root.opts.open.current,
-        });
         onDestroyEffect(() => {
             this.root.contentNode = null;
             this.isPositioned = false;
@@ -696,6 +679,7 @@ class SelectContentState {
             ...this.#styles,
         },
         onpointermove: this.onpointermove,
+        ...attachRef(this.opts.ref, (v) => (this.root.contentNode = v)),
     }));
     popperProps = {
         onInteractOutside: this.onInteractOutside,
@@ -723,10 +707,6 @@ class SelectItemState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById({
-            ...opts,
-            deps: () => this.mounted,
-        });
         watch([() => this.isHighlighted, () => this.prevHighlighted.current], () => {
             if (this.isHighlighted) {
                 this.opts.onHighlight.current();
@@ -830,6 +810,7 @@ class SelectItemState {
         onpointermove: this.onpointermove,
         onpointerdown: this.onpointerdown,
         onpointerup: this.onpointerup,
+        ...attachRef(this.opts.ref),
     }));
 }
 class SelectGroupState {
@@ -839,13 +820,13 @@ class SelectGroupState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         role: "group",
         [this.root.bitsAttrs.group]: "",
         "aria-labelledby": this.labelNode?.id ?? undefined,
+        ...attachRef(this.opts.ref),
     }));
 }
 class SelectGroupHeadingState {
@@ -854,16 +835,11 @@ class SelectGroupHeadingState {
     constructor(opts, group) {
         this.opts = opts;
         this.group = group;
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                group.labelNode = node;
-            },
-        });
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         [this.group.root.bitsAttrs["group-label"]]: "",
+        ...attachRef(this.opts.ref, (v) => (this.group.labelNode = v)),
     }));
 }
 class SelectHiddenInputState {
@@ -901,13 +877,6 @@ class SelectViewportState {
         this.opts = opts;
         this.content = content;
         this.root = content.root;
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.content.viewportNode = node;
-            },
-            deps: () => this.root.opts.open.current,
-        });
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -921,6 +890,7 @@ class SelectViewportState {
             flex: 1,
             overflow: "auto",
         },
+        ...attachRef(this.opts.ref, (v) => (this.content.viewportNode = v)),
     }));
 }
 class SelectScrollButtonImplState {
@@ -936,10 +906,6 @@ class SelectScrollButtonImplState {
         this.opts = opts;
         this.content = content;
         this.root = content.root;
-        useRefById({
-            ...opts,
-            deps: () => this.mounted,
-        });
         watch([() => this.mounted], () => {
             if (!this.mounted) {
                 this.isUserScrolling = false;
@@ -994,6 +960,7 @@ class SelectScrollButtonImplState {
         onpointerdown: this.onpointerdown,
         onpointermove: this.onpointermove,
         onpointerleave: this.onpointerleave,
+        ...attachRef(this.opts.ref),
     }));
 }
 class SelectScrollDownButtonState {

package/dist/bits/separator/components/separator.svelte

@@ -2,10 +2,12 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import { useSeparatorRoot } from "../separator.svelte.js";
 	import type { SeparatorRootProps } from "../types.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		child,
 		children,

package/dist/bits/separator/separator.svelte.js

@@ -1,11 +1,10 @@
-import { useRefById } from "svelte-toolbelt";
+import { attachRef } from "svelte-toolbelt";
 import { getAriaHidden, getAriaOrientation, getDataOrientation } from "../../internal/attrs.js";
 const SEPARATOR_ROOT_ATTR = "data-separator-root";
 class SeparatorRootState {
     opts;
     constructor(opts) {
         this.opts = opts;
-        useRefById(opts);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -14,6 +13,7 @@ class SeparatorRootState {
         "aria-hidden": getAriaHidden(this.opts.decorative.current),
         "data-orientation": getDataOrientation(this.opts.orientation.current),
         [SEPARATOR_ROOT_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 export function useSeparatorRoot(props) {

package/dist/bits/slider/components/slider-range.svelte

@@ -2,13 +2,15 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { SliderRangeProps } from "../types.js";
 	import { useSliderRange } from "../slider.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		children,
 		child,
 		ref = $bindable(null),
-		id = useId(),
+		id = createId(uid),
 		...restProps
 	}: SliderRangeProps = $props();
 

package/dist/bits/slider/components/slider-thumb-label.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { SliderThumbLabelProps } from "../types.js";
+	import { SliderRootContext, useSliderThumbLabel } from "../slider.svelte.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
+
+	let {
+		children,
+		child,
+		ref = $bindable(null),
+		id = createId(uid),
+		index,
+		position: positionProp,
+		...restProps
+	}: SliderThumbLabelProps = $props();
+
+	const root = SliderRootContext.get();
+
+	const position = $derived.by(() => {
+		if (positionProp !== undefined) return positionProp;
+		switch (root.direction) {
+			case "lr":
+			case "rl":
+				return "top";
+			case "tb":
+			case "bt":
+				return "left";
+		}
+	});
+
+	const tickLabelState = useSliderThumbLabel({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+		index: box.with(() => index),
+		position: box.with(() => position),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, tickLabelState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<span {...mergedProps}>{@render children?.()}</span>
+{/if}

package/dist/bits/slider/components/slider-thumb-label.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SliderThumbLabelProps } from "../types.js";
+declare const SliderThumbLabel: import("svelte").Component<SliderThumbLabelProps, {}, "ref">;
+type SliderThumbLabel = ReturnType<typeof SliderThumbLabel>;
+export default SliderThumbLabel;

package/dist/bits/slider/components/slider-thumb.svelte

@@ -2,13 +2,15 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { SliderThumbProps } from "../types.js";
 	import { useSliderThumb } from "../slider.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		children,
 		child,
 		ref = $bindable(null),
-		id = useId(),
+		id = createId(uid),
 		index,
 		disabled = false,
 		...restProps

package/dist/bits/slider/components/slider-tick-label.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { SliderTickLabelProps } from "../types.js";
+	import { SliderRootContext, useSliderTickLabel } from "../slider.svelte.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
+
+	let {
+		children,
+		child,
+		ref = $bindable(null),
+		id = createId(uid),
+		index,
+		position: positionProp,
+		...restProps
+	}: SliderTickLabelProps = $props();
+
+	const root = SliderRootContext.get();
+
+	const position = $derived.by(() => {
+		if (positionProp !== undefined) return positionProp;
+		switch (root.direction) {
+			case "lr":
+			case "rl":
+				return "top";
+			case "tb":
+			case "bt":
+				return "left";
+		}
+	});
+
+	const tickLabelState = useSliderTickLabel({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+		index: box.with(() => index),
+		position: box.with(() => position),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, tickLabelState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<span {...mergedProps}>{@render children?.()}</span>
+{/if}

package/dist/bits/slider/components/slider-tick-label.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SliderTickLabelProps } from "../types.js";
+declare const SliderTickLabel: import("svelte").Component<SliderTickLabelProps, {}, "ref">;
+type SliderTickLabel = ReturnType<typeof SliderTickLabel>;
+export default SliderTickLabel;

package/dist/bits/slider/components/slider-tick.svelte

@@ -2,13 +2,15 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { SliderTickProps } from "../types.js";
 	import { useSliderTick } from "../slider.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		children,
 		child,
 		ref = $bindable(null),
-		id = useId(),
+		id = createId(uid),
 		index,
 		...restProps
 	}: SliderTickProps = $props();

package/dist/bits/slider/components/slider.svelte

@@ -2,32 +2,51 @@
 	import { box, mergeProps, type WritableBox } from "svelte-toolbelt";
 	import type { SliderRootProps } from "../types.js";
 	import { useSliderRoot } from "../slider.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 	import { watch } from "runed";
 
+	const uid = $props.id();
+
 	let {
 		children,
 		child,
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		value = $bindable(),
 		type,
 		onValueChange = noop,
 		onValueCommit = noop,
 		disabled = false,
-		min = 0,
-		max = 100,
+		min: minProp,
+		max: maxProp,
 		step = 1,
 		dir = "ltr",
 		autoSort = true,
 		orientation = "horizontal",
+		thumbPositioning = "contain",
+		trackPadding,
 		...restProps
 	}: SliderRootProps = $props();
 
+	const min = $derived.by(() => {
+		if (minProp !== undefined) return minProp;
+		if (Array.isArray(step)) return Math.min(...step);
+		return 0;
+	});
+
+	const max = $derived.by(() => {
+		if (maxProp !== undefined) return maxProp;
+		if (Array.isArray(step)) return Math.max(...step);
+		return 100;
+	});
+
 	function handleDefaultValue() {
 		if (value !== undefined) return;
-		value = type === "single" ? 0 : [];
+		if (type === "single") {
+			return min;
+		}
+		return [];
 	}
 
 	// SSR
@@ -63,7 +82,9 @@
 		dir: box.with(() => dir),
 		autoSort: box.with(() => autoSort),
 		orientation: box.with(() => orientation),
+		thumbPositioning: box.with(() => thumbPositioning),
 		type,
+		trackPadding: box.with(() => trackPadding),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, rootState.props));

package/dist/bits/slider/exports.d.ts

@@ -2,4 +2,6 @@ export { default as Root } from "./components/slider.svelte";
 export { default as Range } from "./components/slider-range.svelte";
 export { default as Thumb } from "./components/slider-thumb.svelte";
 export { default as Tick } from "./components/slider-tick.svelte";
-export type { SliderRootProps as RootProps, SliderRangeProps as RangeProps, SliderThumbProps as ThumbProps, SliderTickProps as TickProps, } from "./types.js";
+export { default as TickLabel } from "./components/slider-tick-label.svelte";
+export { default as ThumbLabel } from "./components/slider-thumb-label.svelte";
+export type { SliderRootProps as RootProps, SliderRangeProps as RangeProps, SliderThumbProps as ThumbProps, SliderTickProps as TickProps, SliderTickLabelProps as TickLabelProps, SliderThumbLabelProps as ThumbLabelProps, } from "./types.js";

package/dist/bits/slider/exports.js

@@ -2,3 +2,5 @@ export { default as Root } from "./components/slider.svelte";
 export { default as Range } from "./components/slider-range.svelte";
 export { default as Thumb } from "./components/slider-thumb.svelte";
 export { default as Tick } from "./components/slider-tick.svelte";
+export { default as TickLabel } from "./components/slider-tick-label.svelte";
+export { default as ThumbLabel } from "./components/slider-thumb-label.svelte";

package/dist/bits/slider/helpers.d.ts

@@ -2,3 +2,17 @@ import type { StyleProperties } from "../../shared/index.js";
 export declare function getRangeStyles(direction: "lr" | "rl" | "tb" | "bt", min: number, max: number): StyleProperties;
 export declare function getThumbStyles(direction: "lr" | "rl" | "tb" | "bt", thumbPos: number): StyleProperties;
 export declare function getTickStyles(direction: "lr" | "rl" | "tb" | "bt", tickPosition: number, offsetPercentage: number): StyleProperties;
+export declare function getTickLabelStyles(direction: "lr" | "rl" | "tb" | "bt", tickPosition: number, labelPosition?: "top" | "bottom" | "left" | "right"): StyleProperties;
+export declare function getThumbLabelStyles(direction: "lr" | "rl" | "tb" | "bt", thumbPosition: number, labelPosition?: "top" | "bottom" | "left" | "right"): StyleProperties;
+/**
+ * Normalizes step to always be a sorted array of valid values within min/max range
+ */
+export declare function normalizeSteps(step: number | number[], min: number, max: number): number[];
+/**
+ * Snaps a value to the nearest step in a custom steps array
+ */
+export declare function snapValueToCustomSteps(value: number, steps: number[]): number;
+/**
+ * Gets the next/previous step value for keyboard navigation
+ */
+export declare function getAdjacentStepValue(currentValue: number, steps: number[], direction: "next" | "prev"): number;

package/dist/bits/slider/helpers.js

@@ -64,3 +64,125 @@ export function getTickStyles(direction, tickPosition, offsetPercentage) {
     }
     return style;
 }
+export function getTickLabelStyles(direction, tickPosition, labelPosition = "top") {
+    const style = {
+        position: "absolute",
+    };
+    if (direction === "lr" || direction === "rl") {
+        // Horizontal slider
+        style.left = direction === "lr" ? `${tickPosition}%` : undefined;
+        style.right = direction === "rl" ? `${tickPosition}%` : undefined;
+        style.translate = "-50% 0";
+        if (labelPosition === "top") {
+            style.bottom = "100%";
+        }
+        else if (labelPosition === "bottom") {
+            style.top = "100%";
+        }
+    }
+    else {
+        // Vertical slider - use same positioning as ticks
+        if (direction === "tb") {
+            style.top = `${tickPosition}%`;
+        }
+        else {
+            style.bottom = `${tickPosition}%`;
+        }
+        style.translate = "0 50%";
+        if (labelPosition === "left") {
+            style.right = "100%";
+        }
+        else if (labelPosition === "right") {
+            style.left = "100%";
+        }
+    }
+    return style;
+}
+export function getThumbLabelStyles(direction, thumbPosition, labelPosition = "top") {
+    const style = {
+        position: "absolute",
+    };
+    if (direction === "lr" || direction === "rl") {
+        // Horizontal slider
+        style.left = direction === "lr" ? `${thumbPosition}%` : undefined;
+        style.right = direction === "rl" ? `${thumbPosition}%` : undefined;
+        style.translate = "-50% 0";
+        if (labelPosition === "top") {
+            style.bottom = "100%";
+        }
+        else if (labelPosition === "bottom") {
+            style.top = "100%";
+        }
+    }
+    else {
+        // Vertical slider
+        if (direction === "tb") {
+            style.top = `${thumbPosition}%`;
+        }
+        else {
+            style.bottom = `${thumbPosition}%`;
+        }
+        style.translate = "0 -50%";
+        if (labelPosition === "left") {
+            style.right = "100%";
+        }
+        else if (labelPosition === "right") {
+            style.left = "100%";
+        }
+    }
+    return style;
+}
+/**
+ * Normalizes step to always be a sorted array of valid values within min/max range
+ */
+export function normalizeSteps(step, min, max) {
+    if (typeof step === "number") {
+        // generate regular steps - match original behavior exactly
+        const difference = max - min;
+        let count = Math.ceil(difference / step);
+        if (difference % step === 0) {
+            count++;
+        }
+        const steps = [];
+        for (let i = 0; i < count; i++) {
+            const value = min + i * step;
+            steps.push(value);
+        }
+        return steps;
+    }
+    return [...new Set(step)].filter((value) => value >= min && value <= max).sort((a, b) => a - b);
+}
+/**
+ * Snaps a value to the nearest step in a custom steps array
+ */
+export function snapValueToCustomSteps(value, steps) {
+    if (steps.length === 0)
+        return value;
+    // Find the closest step
+    let closest = steps[0];
+    let minDistance = Math.abs(value - closest);
+    for (const step of steps) {
+        const distance = Math.abs(value - step);
+        if (distance < minDistance) {
+            minDistance = distance;
+            closest = step;
+        }
+    }
+    return closest;
+}
+/**
+ * Gets the next/previous step value for keyboard navigation
+ */
+export function getAdjacentStepValue(currentValue, steps, direction) {
+    const currentIndex = steps.indexOf(currentValue);
+    if (currentIndex === -1) {
+        // current value is not in steps, snap to nearest
+        return snapValueToCustomSteps(currentValue, steps);
+    }
+    if (direction === "next") {
+        return currentIndex < steps.length - 1 ? steps[currentIndex + 1] : currentValue;
+    }
+    else {
+        return currentIndex > 0 ? steps[currentIndex - 1] : currentValue;
+    }
+}