bits-ui 1.8.0 → 2.2.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, DOMContext } 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";
@@ -18,7 +18,6 @@ export const CONTENT_MARGIN = 10;
 class SelectBaseRootState {
     opts;
     touchedInput = $state(false);
-    inputValue = $state("");
     inputNode = $state(null);
     contentNode = $state(null);
     triggerNode = $state(null);
@@ -42,6 +41,7 @@ class SelectBaseRootState {
     isUsingKeyboard = false;
     isCombobox = false;
     bitsAttrs;
+    domContext = new DOMContext(() => null);
     constructor(opts) {
         this.opts = opts;
         this.isCombobox = opts.isCombobox;
@@ -134,11 +134,12 @@ class SelectSingleRootState extends SelectBaseRootState {
     }
     toggleItem(itemValue, itemLabel = itemValue) {
         this.opts.value.current = this.includesItem(itemValue) ? "" : itemValue;
-        this.inputValue = itemLabel;
+        this.opts.inputValue.current = itemLabel;
     }
     setInitialHighlightedNode() {
         afterTick(() => {
-            if (this.highlightedNode && document.contains(this.highlightedNode))
+            if (this.highlightedNode &&
+                this.domContext.getDocument().contains(this.highlightedNode))
                 return;
             if (this.opts.value.current !== "") {
                 const node = this.getNodeByValue(this.opts.value.current);
@@ -183,11 +184,14 @@ class SelectMultipleRootState extends SelectBaseRootState {
         else {
             this.opts.value.current = [...this.opts.value.current, itemValue];
         }
-        this.inputValue = itemLabel;
+        this.opts.inputValue.current = itemLabel;
     }
     setInitialHighlightedNode() {
         afterTick(() => {
-            if (this.highlightedNode && document.contains(this.highlightedNode))
+            if (!this.domContext)
+                return;
+            if (this.highlightedNode &&
+                this.domContext.getDocument().contains(this.highlightedNode))
                 return;
             if (this.opts.value.current.length && this.opts.value.current[0] !== "") {
                 const node = this.getNodeByValue(this.opts.value.current[0]);
@@ -210,12 +214,7 @@ class SelectInputState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.root.inputNode = node;
-            },
-        });
+        this.root.domContext = new DOMContext(opts.ref);
         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]) => {
@@ -223,11 +222,11 @@ class SelectInputState {
                 return;
             if (Array.isArray(value) && Array.isArray(prevValue)) {
                 if (value.length === 0 && prevValue.length !== 0) {
-                    this.root.inputValue = "";
+                    this.root.opts.inputValue.current = "";
                 }
             }
             else if (value === "" && prevValue !== "") {
-                this.root.inputValue = "";
+                this.root.opts.inputValue.current = "";
             }
         });
     }
@@ -243,7 +242,7 @@ class SelectInputState {
                 return;
             if (e.key === kbd.TAB)
                 return;
-            if (e.key === kbd.BACKSPACE && this.root.inputValue === "")
+            if (e.key === kbd.BACKSPACE && this.root.opts.inputValue.current === "")
                 return;
             this.root.handleOpen();
             // we need to wait for a tick after the menu opens to ensure the highlighted nodes are
@@ -325,7 +324,7 @@ class SelectInputState {
         }
     }
     oninput(e) {
-        this.root.inputValue = e.currentTarget.value;
+        this.root.opts.inputValue.current = e.currentTarget.value;
         this.root.setHighlightedToFirstCandidate();
     }
     props = $derived.by(() => ({
@@ -340,6 +339,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,14 +348,15 @@ 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);
     }
     onkeydown(e) {
+        if (!this.root.domContext)
+            return;
         if (e.key === kbd.ENTER || e.key === kbd.SPACE) {
             e.preventDefault();
-            if (document.activeElement !== this.root.inputNode) {
+            if (this.root.domContext.getActiveElement() !== this.root.inputNode) {
                 this.root.inputNode?.focus();
             }
             this.root.toggleMenu();
@@ -366,10 +367,10 @@ class SelectComboTriggerState {
      * behavior of focusing the button and keep focus on the input.
      */
     onpointerdown(e) {
-        if (this.root.opts.disabled.current)
+        if (this.root.opts.disabled.current || !this.root.domContext)
             return;
         e.preventDefault();
-        if (document.activeElement !== this.root.inputNode) {
+        if (this.root.domContext.getActiveElement() !== this.root.inputNode) {
             this.root.inputNode?.focus();
         }
         this.root.toggleMenu();
@@ -383,6 +384,7 @@ class SelectComboTriggerState {
         [this.root.bitsAttrs.trigger]: "",
         onpointerdown: this.onpointerdown,
         onkeydown: this.onkeydown,
+        ...attachRef(this.opts.ref),
     }));
 }
 class SelectTriggerState {
@@ -393,17 +395,14 @@ class SelectTriggerState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.root.triggerNode = node;
-            },
-        });
+        this.root.domContext = new DOMContext(opts.ref);
         this.#domTypeahead = useDOMTypeahead({
             getCurrentItem: () => this.root.highlightedNode,
             onMatch: (node) => {
                 this.root.setHighlightedNode(node);
             },
+            getActiveElement: () => this.root.domContext.getActiveElement(),
+            getWindow: () => this.root.domContext.getWindow(),
         });
         this.#dataTypeahead = useDataTypeahead({
             getCurrentItem: () => {
@@ -423,6 +422,7 @@ class SelectTriggerState {
             },
             enabled: !this.root.isMulti && this.root.dataTypeaheadEnabled,
             candidateValues: () => (this.root.isMulti ? [] : this.root.candidateLabels),
+            getWindow: () => this.root.domContext.getWindow(),
         });
         this.onkeydown = this.onkeydown.bind(this);
         this.onpointerdown = this.onpointerdown.bind(this);
@@ -617,6 +617,7 @@ class SelectTriggerState {
         onkeydown: this.onkeydown,
         onclick: this.onclick,
         onpointerup: this.onpointerup,
+        ...attachRef(this.opts.ref, (v) => (this.root.triggerNode = v)),
     }));
 }
 class SelectContentState {
@@ -624,16 +625,14 @@ class SelectContentState {
     root;
     viewportNode = $state(null);
     isPositioned = $state(false);
+    domContext;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.root.contentNode = node;
-            },
-            deps: () => this.root.opts.open.current,
-        });
+        this.domContext = new DOMContext(this.opts.ref);
+        if (this.root.domContext === null) {
+            this.root.domContext = this.domContext;
+        }
         onDestroyEffect(() => {
             this.root.contentNode = null;
             this.isPositioned = false;
@@ -696,6 +695,7 @@ class SelectContentState {
             ...this.#styles,
         },
         onpointermove: this.onpointermove,
+        ...attachRef(this.opts.ref, (v) => (this.root.contentNode = v)),
     }));
     popperProps = {
         onInteractOutside: this.onInteractOutside,
@@ -723,10 +723,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 +826,7 @@ class SelectItemState {
         onpointermove: this.onpointermove,
         onpointerdown: this.onpointerdown,
         onpointerup: this.onpointerup,
+        ...attachRef(this.opts.ref),
     }));
 }
 class SelectGroupState {
@@ -839,13 +836,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 +851,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 +893,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 +906,7 @@ class SelectViewportState {
             flex: 1,
             overflow: "auto",
         },
+        ...attachRef(this.opts.ref, (v) => (this.content.viewportNode = v)),
     }));
 }
 class SelectScrollButtonImplState {
@@ -936,10 +922,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;
@@ -958,16 +940,16 @@ class SelectScrollButtonImplState {
         this.onpointerleave = this.onpointerleave.bind(this);
     }
     handleUserScroll() {
-        window.clearTimeout(this.userScrollTimer);
+        this.content.domContext.clearTimeout(this.userScrollTimer);
         this.isUserScrolling = true;
-        this.userScrollTimer = window.setTimeout(() => {
+        this.userScrollTimer = this.content.domContext.setTimeout(() => {
             this.isUserScrolling = false;
         }, 200);
     }
     clearAutoScrollInterval() {
         if (this.autoScrollTimer === null)
             return;
-        window.clearTimeout(this.autoScrollTimer);
+        this.content.domContext.clearTimeout(this.autoScrollTimer);
         this.autoScrollTimer = null;
     }
     onpointerdown(_) {
@@ -975,9 +957,9 @@ class SelectScrollButtonImplState {
             return;
         const autoScroll = (tick) => {
             this.onAutoScroll();
-            this.autoScrollTimer = window.setTimeout(() => autoScroll(tick + 1), this.opts.delay.current(tick));
+            this.autoScrollTimer = this.content.domContext.setTimeout(() => autoScroll(tick + 1), this.opts.delay.current(tick));
         };
-        this.autoScrollTimer = window.setTimeout(() => autoScroll(1), this.opts.delay.current(0));
+        this.autoScrollTimer = this.content.domContext.setTimeout(() => autoScroll(1), this.opts.delay.current(0));
     }
     onpointermove(e) {
         this.onpointerdown(e);
@@ -994,6 +976,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,33 +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
@@ -66,6 +84,7 @@
 		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;