bits-ui 1.8.0 → 2.1.0

package/dist/bits/select/components/select-trigger.svelte

@@ -2,11 +2,13 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import { useSelectTrigger } from "../select.svelte.js";
 	import type { SelectTriggerProps } from "../types.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { FloatingLayer } from "../../utilities/floating-layer/index.js";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		child,
 		children,
@@ -25,7 +27,7 @@
 	const mergedProps = $derived(mergeProps(restProps, triggerState.props, { type }));
 </script>
 
-<FloatingLayer.Anchor {id}>
+<FloatingLayer.Anchor {id} ref={triggerState.opts.ref}>
 	{#if child}
 		{@render child({ props: mergedProps })}
 	{:else}

package/dist/bits/select/components/select-viewport.svelte

@@ -2,10 +2,12 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { SelectViewportProps } from "../types.js";
 	import { useSelectViewport } from "../select.svelte.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),
 		children,
 		child,

package/dist/bits/select/components/select.svelte

@@ -72,7 +72,7 @@
 
 {#if Array.isArray(rootState.opts.value.current)}
 	{#if rootState.opts.value.current.length}
-		{#each rootState.opts.value.current as item}
+		{#each rootState.opts.value.current as item (item)}
 			<SelectHiddenInput value={item} />
 		{/each}
 	{/if}

package/dist/bits/select/select.svelte.d.ts

@@ -88,7 +88,6 @@ declare class SelectInputState {
     onkeydown(e: BitsKeyboardEvent): void;
     oninput(e: BitsEvent<Event, HTMLInputElement>): void;
     props: {
-        readonly [x: string]: string | true | ((e: BitsKeyboardEvent) => void) | ((e: BitsEvent<Event, HTMLInputElement>) => void) | undefined;
         readonly id: string;
         readonly role: "combobox";
         readonly disabled: true | undefined;
@@ -113,7 +112,6 @@ declare class SelectComboTriggerState {
      */
     onpointerdown(e: BitsPointerEvent): void;
     props: {
-        readonly [x: string]: string | true | ((e: BitsKeyboardEvent) => void) | ((e: BitsPointerEvent) => void) | undefined;
         readonly id: string;
         readonly disabled: true | undefined;
         readonly "aria-haspopup": "listbox";
@@ -134,7 +132,6 @@ declare class SelectTriggerState {
     onpointerdown(e: BitsPointerEvent): void;
     onpointerup(e: BitsPointerEvent): void;
     props: {
-        readonly [x: string]: string | true | ((e: BitsKeyboardEvent) => void) | ((e: BitsPointerEvent) => void) | undefined;
         readonly id: string;
         readonly disabled: true | undefined;
         readonly "aria-haspopup": "listbox";
@@ -169,13 +166,6 @@ declare class SelectContentState {
         open: boolean;
     };
     props: {
-        readonly [x: string]: string | ((_: BitsPointerEvent) => void) | {
-            readonly display: "flex";
-            readonly flexDirection: "column";
-            readonly outline: "none";
-            readonly boxSizing: "border-box";
-            readonly pointerEvents: "auto";
-        } | undefined;
         readonly id: string;
         readonly role: "listbox";
         readonly "aria-multiselectable": "true" | undefined;
@@ -228,7 +218,6 @@ declare class SelectItemState {
     onpointerup(e: BitsPointerEvent): void;
     onpointermove(e: BitsPointerEvent): void;
     props: {
-        readonly [x: string]: string | ((e: BitsPointerEvent) => void) | undefined;
         readonly id: string;
         readonly role: "option";
         readonly "aria-selected": "true" | undefined;
@@ -249,7 +238,6 @@ declare class SelectGroupState {
     labelNode: HTMLElement | null;
     constructor(opts: SelectGroupStateProps, root: SelectBaseRootState);
     props: {
-        readonly [x: string]: string | undefined;
         readonly id: string;
         readonly role: "group";
         readonly "aria-labelledby": string | undefined;
@@ -261,7 +249,6 @@ declare class SelectGroupHeadingState {
     readonly group: SelectGroupState;
     constructor(opts: SelectGroupHeadingStateProps, group: SelectGroupState);
     props: {
-        readonly [x: string]: string;
         readonly id: string;
     };
 }
@@ -290,11 +277,6 @@ declare class SelectViewportState {
     prevScrollTop: number;
     constructor(opts: SelectViewportStateProps, content: SelectContentState);
     props: {
-        readonly [x: string]: string | {
-            readonly position: "relative";
-            readonly flex: 1;
-            readonly overflow: "auto";
-        };
         readonly id: string;
         readonly role: "presentation";
         readonly style: {

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,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;