bits-ui 1.0.0-next.75 → 1.0.0-next.76

package/dist/bits/accordion/accordion.svelte.js

@@ -20,7 +20,7 @@ class AccordionBaseState {
         this.disabled = props.disabled;
         this.#ref = props.ref;
         useRefById({
-            id: props.id,
+            id: this.#id,
             ref: this.#ref,
         });
         this.orientation = props.orientation;

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

@@ -63,12 +63,10 @@ declare class DialogCloseState {
     #private;
     constructor(props: DialogCloseStateProps, root: DialogRootState);
     onclick(e: BitsMouseEvent): void;
-    onpointerdown(e: BitsPointerEvent): void;
     onkeydown(e: BitsKeyboardEvent): void;
     props: {
         readonly "data-state": "open" | "closed";
         readonly id: string;
-        readonly onpointerdown: (e: BitsPointerEvent) => void;
         readonly onclick: (e: BitsMouseEvent) => void;
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
     };
@@ -146,12 +144,10 @@ declare class AlertDialogCancelState {
     #private;
     constructor(props: AlertDialogCancelStateProps, root: DialogRootState);
     onclick(e: BitsMouseEvent): void;
-    onpointerdown(e: BitsPointerEvent): void;
     onkeydown(e: BitsKeyboardEvent): void;
     props: {
         readonly "data-state": "open" | "closed";
         readonly id: string;
-        readonly onpointerdown: (e: BitsPointerEvent) => void;
         readonly onclick: (e: BitsMouseEvent) => void;
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
     };

package/dist/bits/dialog/dialog.svelte.js

@@ -119,7 +119,6 @@ class DialogCloseState {
         this.#variant = props.variant;
         this.#disabled = props.disabled;
         this.onclick = this.onclick.bind(this);
-        this.onpointerdown = this.onpointerdown.bind(this);
         this.onkeydown = this.onkeydown.bind(this);
         useRefById({
             id: this.#id,
@@ -134,16 +133,6 @@ class DialogCloseState {
             return;
         this.#root.handleClose();
     }
-    onpointerdown(e) {
-        if (this.#disabled.current)
-            return;
-        if (e.button > 0)
-            return;
-        // by default, it will attempt to focus this trigger on pointerdown
-        // since this also closes the dialog and restores focus we want to prevent that behavior
-        e.preventDefault();
-        this.#root.handleClose();
-    }
     onkeydown(e) {
         if (this.#disabled.current)
             return;
@@ -155,7 +144,6 @@ class DialogCloseState {
     props = $derived.by(() => ({
         id: this.#id.current,
         [this.#attr]: "",
-        onpointerdown: this.onpointerdown,
         onclick: this.onclick,
         onkeydown: this.onkeydown,
         ...this.#root.sharedProps,
@@ -299,7 +287,6 @@ class AlertDialogCancelState {
         this.#root = root;
         this.#disabled = props.disabled;
         this.onclick = this.onclick.bind(this);
-        this.onpointerdown = this.onpointerdown.bind(this);
         this.onkeydown = this.onkeydown.bind(this);
         useRefById({
             id: this.#id,
@@ -317,18 +304,6 @@ class AlertDialogCancelState {
             return;
         this.#root.handleClose();
     }
-    onpointerdown(e) {
-        if (this.#disabled.current)
-            return;
-        if (e.pointerType === "touch")
-            return e.preventDefault();
-        if (e.button > 0)
-            return;
-        // by default, it will attempt to focus this trigger on pointerdown
-        // since this also opens the dialog we want to prevent that behavior
-        e.preventDefault();
-        this.#root.handleClose();
-    }
     onkeydown(e) {
         if (this.#disabled.current)
             return;
@@ -340,7 +315,6 @@ class AlertDialogCancelState {
     props = $derived.by(() => ({
         id: this.#id.current,
         [this.#root.attrs.cancel]: "",
-        onpointerdown: this.onpointerdown,
         onclick: this.onclick,
         onkeydown: this.onkeydown,
         ...this.#root.sharedProps,

package/dist/bits/popover/components/popover-content-static.svelte

@@ -19,6 +19,7 @@
 		onInteractOutside = noop,
 		trapFocus = true,
 		preventScroll = false,
+
 		...restProps
 	}: PopoverContentStaticProps = $props();
 
@@ -28,28 +29,12 @@
 			() => ref,
 			(v) => (ref = v)
 		),
+		onInteractOutside: box.with(() => onInteractOutside),
+		onEscapeKeydown: box.with(() => onEscapeKeydown),
+		onCloseAutoFocus: box.with(() => onCloseAutoFocus),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));
-
-	function handleInteractOutside(e: PointerEvent) {
-		onInteractOutside(e);
-		if (e.defaultPrevented) return;
-		contentState.root.handleClose();
-	}
-
-	function handleEscapeKeydown(e: KeyboardEvent) {
-		onEscapeKeydown(e);
-		if (e.defaultPrevented) return;
-		contentState.root.handleClose();
-	}
-
-	function handleCloseAutoFocus(e: Event) {
-		onCloseAutoFocus(e);
-		if (e.defaultPrevented) return;
-		e.preventDefault();
-		contentState.root.triggerNode?.focus();
-	}
 </script>
 
 {#if forceMount}
@@ -58,9 +43,9 @@
 		isStatic
 		enabled={contentState.root.open.current}
 		{id}
-		onInteractOutside={handleInteractOutside}
-		onEscapeKeydown={handleEscapeKeydown}
-		onCloseAutoFocus={handleCloseAutoFocus}
+		onInteractOutside={contentState.handleInteractOutside}
+		onEscapeKeydown={contentState.handleEscapeKeydown}
+		onCloseAutoFocus={contentState.handleCloseAutoFocus}
 		{trapFocus}
 		{preventScroll}
 		loop
@@ -85,9 +70,9 @@
 		isStatic
 		present={contentState.root.open.current}
 		{id}
-		onInteractOutside={handleInteractOutside}
-		onEscapeKeydown={handleEscapeKeydown}
-		onCloseAutoFocus={handleCloseAutoFocus}
+		onInteractOutside={contentState.handleInteractOutside}
+		onEscapeKeydown={contentState.handleEscapeKeydown}
+		onCloseAutoFocus={contentState.handleCloseAutoFocus}
 		{trapFocus}
 		{preventScroll}
 		loop

package/dist/bits/popover/components/popover-content.svelte

@@ -7,7 +7,6 @@
 	import { useId } from "../../../internal/use-id.js";
 	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
 	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
-	import { isHTMLElement } from "../../../internal/is.js";
 
 	let {
 		child,
@@ -29,29 +28,12 @@
 			() => ref,
 			(v) => (ref = v)
 		),
+		onInteractOutside: box.with(() => onInteractOutside),
+		onEscapeKeydown: box.with(() => onEscapeKeydown),
+		onCloseAutoFocus: box.with(() => onCloseAutoFocus),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));
-
-	function handleInteractOutside(e: PointerEvent) {
-		onInteractOutside(e);
-		if (e.defaultPrevented) return;
-		if (isHTMLElement(e.target) && e.target.closest("[data-popover-trigger")) return;
-		contentState.root.handleClose();
-	}
-
-	function handleEscapeKeydown(e: KeyboardEvent) {
-		onEscapeKeydown(e);
-		if (e.defaultPrevented) return;
-		contentState.root.handleClose();
-	}
-
-	function handleCloseAutoFocus(e: Event) {
-		onCloseAutoFocus(e);
-		if (e.defaultPrevented) return;
-		e.preventDefault();
-		contentState.root.triggerNode?.focus();
-	}
 </script>
 
 {#if forceMount}
@@ -59,9 +41,9 @@
 		{...mergedProps}
 		enabled={contentState.root.open.current}
 		{id}
-		onInteractOutside={handleInteractOutside}
-		onEscapeKeydown={handleEscapeKeydown}
-		onCloseAutoFocus={handleCloseAutoFocus}
+		onInteractOutside={contentState.handleInteractOutside}
+		onEscapeKeydown={contentState.handleEscapeKeydown}
+		onCloseAutoFocus={contentState.handleCloseAutoFocus}
 		{trapFocus}
 		{preventScroll}
 		loop
@@ -87,9 +69,9 @@
 		{...mergedProps}
 		present={contentState.root.open.current}
 		{id}
-		onInteractOutside={handleInteractOutside}
-		onEscapeKeydown={handleEscapeKeydown}
-		onCloseAutoFocus={handleCloseAutoFocus}
+		onInteractOutside={contentState.handleInteractOutside}
+		onEscapeKeydown={contentState.handleEscapeKeydown}
+		onCloseAutoFocus={contentState.handleCloseAutoFocus}
 		{trapFocus}
 		{preventScroll}
 		loop

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

@@ -34,11 +34,18 @@ declare class PopoverTriggerState {
         readonly onclick: (e: BitsMouseEvent) => void;
     };
 }
-type PopoverContentStateProps = WithRefProps;
+type PopoverContentStateProps = WithRefProps & ReadableBoxedValues<{
+    onInteractOutside: (e: PointerEvent) => void;
+    onEscapeKeydown: (e: KeyboardEvent) => void;
+    onCloseAutoFocus: (e: Event) => void;
+}>;
 declare class PopoverContentState {
     #private;
     root: PopoverRootState;
     constructor(props: PopoverContentStateProps, root: PopoverRootState);
+    handleInteractOutside(e: PointerEvent): void;
+    handleEscapeKeydown(e: KeyboardEvent): void;
+    handleCloseAutoFocus(e: Event): void;
     snippetProps: {
         open: boolean;
     };

package/dist/bits/popover/popover.svelte.js

@@ -2,6 +2,7 @@ import { useRefById } from "svelte-toolbelt";
 import { Context } from "runed";
 import { kbd } from "../../internal/kbd.js";
 import { getAriaExpanded, getDataOpenClosed } from "../../internal/attrs.js";
+import { isElement } from "../../internal/is.js";
 class PopoverRootState {
     open;
     contentNode = $state(null);
@@ -87,10 +88,16 @@ class PopoverContentState {
     #id;
     #ref;
     root;
+    #onInteractOutside;
+    #onEscapeKeydown;
+    #onCloseAutoFocus;
     constructor(props, root) {
         this.#id = props.id;
         this.root = root;
         this.#ref = props.ref;
+        this.#onEscapeKeydown = props.onEscapeKeydown;
+        this.#onInteractOutside = props.onInteractOutside;
+        this.#onCloseAutoFocus = props.onCloseAutoFocus;
         useRefById({
             id: this.#id,
             ref: this.#ref,
@@ -99,6 +106,33 @@ class PopoverContentState {
                 this.root.contentNode = node;
             },
         });
+        this.handleInteractOutside = this.handleInteractOutside.bind(this);
+        this.handleEscapeKeydown = this.handleEscapeKeydown.bind(this);
+        this.handleCloseAutoFocus = this.handleCloseAutoFocus.bind(this);
+    }
+    handleInteractOutside(e) {
+        this.#onInteractOutside.current(e);
+        if (e.defaultPrevented)
+            return;
+        if (!isElement(e.target))
+            return;
+        const closestTrigger = e.target.closest(`[data-popover-trigger]`);
+        if (closestTrigger === this.root.triggerNode)
+            return;
+        this.root.handleClose();
+    }
+    handleEscapeKeydown(e) {
+        this.#onEscapeKeydown.current(e);
+        if (e.defaultPrevented)
+            return;
+        this.root.handleClose();
+    }
+    handleCloseAutoFocus(e) {
+        this.#onCloseAutoFocus.current(e);
+        if (e.defaultPrevented)
+            return;
+        e.preventDefault();
+        this.root.triggerNode?.focus();
     }
     snippetProps = $derived.by(() => ({ open: this.root.open.current }));
     props = $derived.by(() => ({

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	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";
@@ -10,7 +10,8 @@
 		child,
 		id = useId(),
 		ref = $bindable(null),
-		value = $bindable([]),
+		value = $bindable(),
+		type,
 		onValueChange = noop,
 		onValueCommit = noop,
 		disabled = false,
@@ -24,6 +25,10 @@
 		...restProps
 	}: SliderRootProps = $props();
 
+	if (value === undefined) {
+		value = type === "single" ? 0 : [];
+	}
+
 	const rootState = useSliderRoot({
 		id: box.with(() => id),
 		ref: box.with(
@@ -34,13 +39,16 @@
 			() => value,
 			(v) => {
 				if (controlledValue) {
+					// @ts-expect-error - we know
 					onValueChange(v);
 				} else {
 					value = v;
+					// @ts-expect-error - we know
 					onValueChange(v);
 				}
 			}
-		),
+		) as WritableBox<number> | WritableBox<number[]>,
+		// @ts-expect-error - we know
 		onValueCommit: box.with(() => onValueCommit),
 		disabled: box.with(() => disabled),
 		min: box.with(() => min),
@@ -49,6 +57,7 @@
 		dir: box.with(() => dir),
 		autoSort: box.with(() => autoSort),
 		orientation: box.with(() => orientation),
+		type,
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, rootState.props));

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

@@ -1,7 +1,8 @@
+import { type Box, type ReadableBox } from "svelte-toolbelt";
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import type { BitsKeyboardEvent, OnChangeFn, WithRefProps } from "../../internal/types.js";
 import type { Direction, Orientation } from "../../shared/index.js";
-type SliderRootStateProps = WithRefProps<ReadableBoxedValues<{
+type SliderBaseRootStateProps = WithRefProps<ReadableBoxedValues<{
     disabled: boolean;
     orientation: Orientation;
     min: number;
@@ -9,31 +10,95 @@ type SliderRootStateProps = WithRefProps<ReadableBoxedValues<{
     step: number;
     dir: Direction;
     autoSort: boolean;
+}>>;
+declare class SliderBaseRootState {
+    #private;
+    id: SliderBaseRootStateProps["id"];
+    ref: SliderBaseRootStateProps["ref"];
+    disabled: SliderBaseRootStateProps["disabled"];
+    orientation: SliderBaseRootStateProps["orientation"];
+    min: SliderBaseRootStateProps["min"];
+    max: SliderBaseRootStateProps["max"];
+    step: SliderBaseRootStateProps["step"];
+    dir: SliderBaseRootStateProps["dir"];
+    autoSort: SliderBaseRootStateProps["autoSort"];
+    isActive: boolean;
+    direction: "rl" | "lr" | "tb" | "bt";
+    constructor(props: SliderBaseRootStateProps);
+    getAllThumbs: () => HTMLElement[];
+    props: {
+        readonly id: string;
+        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-disabled": "" | undefined;
+        readonly style: {
+            readonly touchAction: string | undefined;
+        };
+        readonly "data-slider-root": "";
+    };
+}
+type SliderSingleRootStateProps = SliderBaseRootStateProps & ReadableBoxedValues<{
+    onValueCommit: OnChangeFn<number>;
+}> & WritableBoxedValues<{
+    value: number;
+}>;
+declare class SliderSingleRootState extends SliderBaseRootState {
+    value: SliderSingleRootStateProps["value"];
+    onValueCommit: SliderSingleRootStateProps["onValueCommit"];
+    isMulti: false;
+    constructor(props: SliderSingleRootStateProps);
+    applyPosition({ clientXY, start, end }: {
+        clientXY: number;
+        start: number;
+        end: number;
+    }): void;
+    updateValue: (newValue: number) => void;
+    handlePointerMove: (e: PointerEvent) => void;
+    handlePointerDown: (e: PointerEvent) => void;
+    handlePointerUp: () => void;
+    getPositionFromValue: (thumbValue: number) => number;
+    thumbsPropsArr: {
+        readonly role: "slider";
+        readonly "aria-valuemin": number;
+        readonly "aria-valuemax": number;
+        readonly "aria-valuenow": number;
+        readonly "aria-disabled": "true" | "false";
+        readonly "aria-orientation": "horizontal" | "vertical";
+        readonly "data-value": number;
+        readonly tabindex: 0 | -1;
+        readonly style: import("../../shared/index.js").StyleProperties;
+        readonly "data-slider-thumb": "";
+    }[];
+    thumbsRenderArr: number[];
+    ticksPropsArr: {
+        readonly "data-disabled": "" | undefined;
+        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-bounded": "" | undefined;
+        readonly "data-value": number;
+        readonly style: import("../../shared/index.js").StyleProperties;
+        readonly "data-slider-tick": "";
+    }[];
+    ticksRenderArr: number[];
+    snippetProps: {
+        readonly ticks: number[];
+        readonly thumbs: number[];
+    };
+}
+type SliderMultiRootStateProps = SliderBaseRootStateProps & ReadableBoxedValues<{
     onValueCommit: OnChangeFn<number[]>;
 }> & WritableBoxedValues<{
     value: number[];
-}>>;
-declare class SliderRootState {
+}>;
+declare class SliderMultiRootState extends SliderBaseRootState {
     #private;
-    id: SliderRootStateProps["id"];
-    ref: SliderRootStateProps["ref"];
-    value: SliderRootStateProps["value"];
-    disabled: SliderRootStateProps["disabled"];
-    orientation: SliderRootStateProps["orientation"];
-    min: SliderRootStateProps["min"];
-    max: SliderRootStateProps["max"];
-    step: SliderRootStateProps["step"];
-    dir: SliderRootStateProps["dir"];
-    autoSort: SliderRootStateProps["autoSort"];
+    value: SliderMultiRootStateProps["value"];
+    isMulti: true;
     activeThumb: {
         node: HTMLElement;
         idx: number;
     } | null;
-    isActive: boolean;
     currentThumbIdx: number;
-    direction: "rl" | "lr" | "tb" | "bt";
-    onValueCommit: SliderRootStateProps["onValueCommit"];
-    constructor(props: SliderRootStateProps);
+    onValueCommit: SliderMultiRootStateProps["onValueCommit"];
+    constructor(props: SliderMultiRootStateProps);
     applyPosition({ clientXY, activeThumbIdx, start, end, }: {
         clientXY: number;
         activeThumbIdx: number;
@@ -72,15 +137,6 @@ declare class SliderRootState {
         readonly ticks: number[];
         readonly thumbs: number[];
     };
-    props: {
-        readonly id: string;
-        readonly "data-orientation": "horizontal" | "vertical";
-        readonly "data-disabled": "" | undefined;
-        readonly style: {
-            readonly touchAction: string | undefined;
-        };
-        readonly "data-slider-root": "";
-    };
 }
 type SliderRangeStateProps = WithRefProps;
 declare class SliderRangeState {
@@ -1756,6 +1812,19 @@ declare class SliderThumbState {
     constructor(props: SliderThumbStateProps, root: SliderRootState);
     onkeydown(e: BitsKeyboardEvent): void;
     props: {
+        readonly id: string;
+        readonly onkeydown: (e: BitsKeyboardEvent) => void;
+        readonly role: "slider";
+        readonly "aria-valuemin": number;
+        readonly "aria-valuemax": number;
+        readonly "aria-valuenow": number;
+        readonly "aria-disabled": "true" | "false";
+        readonly "aria-orientation": "horizontal" | "vertical";
+        readonly "data-value": number;
+        readonly tabindex: 0 | -1;
+        readonly style: import("../../shared/index.js").StyleProperties;
+        readonly "data-slider-thumb": "";
+    } | {
         readonly id: string;
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
         readonly role: "slider";
@@ -1784,9 +1853,23 @@ declare class SliderTickState {
         readonly "data-value": number;
         readonly style: import("../../shared/index.js").StyleProperties;
         readonly "data-slider-tick": "";
+    } | {
+        readonly id: string;
+        readonly "data-disabled": "" | undefined;
+        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-bounded": "" | undefined;
+        readonly "data-value": number;
+        readonly style: import("../../shared/index.js").StyleProperties;
+        readonly "data-slider-tick": "";
     };
 }
-export declare function useSliderRoot(props: SliderRootStateProps): SliderRootState;
+type SliderRootState = SliderSingleRootState | SliderMultiRootState;
+type InitSliderRootStateProps = {
+    type: "single" | "multiple";
+    value: Box<number> | Box<number[]>;
+    onValueCommit: ReadableBox<OnChangeFn<number>> | ReadableBox<OnChangeFn<number[]>>;
+} & Omit<SliderBaseRootStateProps, "type">;
+export declare function useSliderRoot(props: InitSliderRootStateProps): SliderRootState;
 export declare function useSliderRange(props: SliderRangeStateProps): SliderRangeState;
 export declare function useSliderThumb(props: SliderThumbStateProps): SliderThumbState;
 export declare function useSliderTick(props: SliderTickStateProps): SliderTickState;

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

@@ -3,9 +3,9 @@
  * Abdelrahman (https://github.com/abdel-17)
  */
 import { untrack } from "svelte";
-import { executeCallbacks, useRefById } from "svelte-toolbelt";
+import { executeCallbacks, onMountEffect, useRefById, } from "svelte-toolbelt";
 import { on } from "svelte/events";
-import { Context } from "runed";
+import { Context, watch } from "runed";
 import { getRangeStyles, getThumbStyles, getTickStyles } from "./helpers.js";
 import { getAriaDisabled, getAriaOrientation, getDataDisabled, getDataOrientation, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
@@ -16,10 +16,9 @@ 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";
-class SliderRootState {
+class SliderBaseRootState {
     id;
     ref;
-    value;
     disabled;
     orientation;
     min;
@@ -27,9 +26,7 @@ class SliderRootState {
     step;
     dir;
     autoSort;
-    activeThumb = $state(null);
     isActive = $state(false);
-    currentThumbIdx = $state(0);
     direction = $derived.by(() => {
         if (this.orientation.current === "horizontal") {
             return this.dir.current === "rtl" ? "rl" : "lr";
@@ -38,7 +35,6 @@ class SliderRootState {
             return this.dir.current === "rtl" ? "tb" : "bt";
         }
     });
-    onValueCommit;
     constructor(props) {
         this.id = props.id;
         this.ref = props.ref;
@@ -49,20 +45,234 @@ class SliderRootState {
         this.step = props.step;
         this.dir = props.dir;
         this.autoSort = props.autoSort;
-        this.value = props.value;
-        this.onValueCommit = props.onValueCommit;
         useRefById({
             id: this.id,
             ref: this.ref,
         });
-        $effect(() => {
+    }
+    #touchAction = $derived.by(() => {
+        if (this.disabled.current)
+            return undefined;
+        return this.orientation.current === "horizontal" ? "pan-y" : "pan-x";
+    });
+    getAllThumbs = () => {
+        const node = this.ref.current;
+        if (!node)
+            return [];
+        return Array.from(node.querySelectorAll(`[${SLIDER_THUMB_ATTR}]`));
+    };
+    props = $derived.by(() => ({
+        id: this.id.current,
+        "data-orientation": getDataOrientation(this.orientation.current),
+        "data-disabled": getDataDisabled(this.disabled.current),
+        style: {
+            touchAction: this.#touchAction,
+        },
+        [SLIDER_ROOT_ATTR]: "",
+    }));
+}
+class SliderSingleRootState extends SliderBaseRootState {
+    value;
+    onValueCommit;
+    isMulti = false;
+    constructor(props) {
+        super(props);
+        this.value = props.value;
+        this.onValueCommit = props.onValueCommit;
+        onMountEffect(() => {
             return executeCallbacks(on(document, "pointerdown", this.handlePointerDown), on(document, "pointerup", this.handlePointerUp), on(document, "pointermove", this.handlePointerMove), on(document, "pointerleave", this.handlePointerUp));
         });
-        $effect(() => {
+        watch([
+            () => this.step.current,
+            () => this.min.current,
+            () => this.max.current,
+            () => this.value.current,
+        ], ([step, min, max, value]) => {
+            const isValidValue = (v) => {
+                const snappedValue = snapValueToStep(v, min, max, step);
+                return snappedValue === v;
+            };
+            const gcv = (v) => {
+                return snapValueToStep(v, min, max, step);
+            };
+            if (!isValidValue(value)) {
+                this.value.current = gcv(value);
+            }
+        });
+    }
+    applyPosition({ clientXY, start, end }) {
+        const min = this.min.current;
+        const max = this.max.current;
+        const percent = (clientXY - start) / (end - start);
+        const val = percent * (max - min) + min;
+        if (val < min) {
+            this.updateValue(min);
+        }
+        else if (val > max) {
+            this.updateValue(max);
+        }
+        else {
             const step = this.step.current;
-            const min = this.min.current;
-            const max = this.max.current;
-            const value = this.value.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);
+            }
+        }
+    }
+    updateValue = (newValue) => {
+        this.value.current = snapValueToStep(newValue, this.min.current, this.max.current, this.step.current);
+    };
+    handlePointerMove = (e) => {
+        if (!this.isActive || this.disabled.current)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        const sliderNode = this.ref.current;
+        const activeThumb = this.getAllThumbs()[0];
+        if (!sliderNode || !activeThumb)
+            return;
+        activeThumb.focus();
+        const { left, right, top, bottom } = sliderNode.getBoundingClientRect();
+        if (this.direction === "lr") {
+            this.applyPosition({
+                clientXY: e.clientX,
+                start: left,
+                end: right,
+            });
+        }
+        else if (this.direction === "rl") {
+            this.applyPosition({
+                clientXY: e.clientX,
+                start: right,
+                end: left,
+            });
+        }
+        else if (this.direction === "bt") {
+            this.applyPosition({
+                clientXY: e.clientY,
+                start: bottom,
+                end: top,
+            });
+        }
+        else if (this.direction === "tb") {
+            this.applyPosition({
+                clientXY: e.clientY,
+                start: top,
+                end: bottom,
+            });
+        }
+    };
+    handlePointerDown = (e) => {
+        if (e.button !== 0 || this.disabled.current)
+            return;
+        const sliderNode = this.ref.current;
+        const closestThumb = this.getAllThumbs()[0];
+        if (!closestThumb || !sliderNode)
+            return;
+        const target = e.target;
+        if (!isElementOrSVGElement(target) || !sliderNode.contains(target))
+            return;
+        e.preventDefault();
+        closestThumb.focus();
+        this.isActive = true;
+        this.handlePointerMove(e);
+    };
+    handlePointerUp = () => {
+        if (this.disabled.current)
+            return;
+        if (this.isActive) {
+            this.onValueCommit.current(untrack(() => this.value.current));
+        }
+        this.isActive = false;
+    };
+    getPositionFromValue = (thumbValue) => {
+        const min = this.min.current;
+        const max = this.max.current;
+        return ((thumbValue - min) / (max - min)) * 100;
+    };
+    thumbsPropsArr = $derived.by(() => {
+        const currValue = this.value.current;
+        return Array.from({ length: 1 }, () => {
+            const thumbValue = currValue;
+            const thumbPosition = this.getPositionFromValue(thumbValue ?? 0);
+            const style = getThumbStyles(this.direction, thumbPosition);
+            return {
+                role: "slider",
+                "aria-valuemin": this.min.current,
+                "aria-valuemax": this.max.current,
+                "aria-valuenow": thumbValue,
+                "aria-disabled": getAriaDisabled(this.disabled.current),
+                "aria-orientation": getAriaOrientation(this.orientation.current),
+                "data-value": thumbValue,
+                tabindex: this.disabled.current ? -1 : 0,
+                style,
+                [SLIDER_THUMB_ATTR]: "",
+            };
+        });
+    });
+    thumbsRenderArr = $derived.by(() => {
+        return this.thumbsPropsArr.map((_, i) => i);
+    });
+    ticksPropsArr = $derived.by(() => {
+        const max = this.max.current;
+        const min = this.min.current;
+        const step = this.step.current;
+        const difference = max - min;
+        let count = Math.ceil(difference / step);
+        if (difference % step == 0) {
+            count++;
+        }
+        const currValue = this.value.current;
+        return Array.from({ length: count }, (_, i) => {
+            const tickPosition = i * (step / difference) * 100;
+            const isFirst = i === 0;
+            const isLast = i === count - 1;
+            const offsetPercentage = isFirst ? 0 : isLast ? -100 : -50;
+            const style = getTickStyles(this.direction, tickPosition, offsetPercentage);
+            const tickValue = min + i * step;
+            const bounded = tickValue <= currValue;
+            return {
+                "data-disabled": getDataDisabled(this.disabled.current),
+                "data-orientation": getDataOrientation(this.orientation.current),
+                "data-bounded": bounded ? "" : undefined,
+                "data-value": tickValue,
+                style,
+                [SLIDER_TICK_ATTR]: "",
+            };
+        });
+    });
+    ticksRenderArr = $derived.by(() => {
+        return this.ticksPropsArr.map((_, i) => i);
+    });
+    snippetProps = $derived.by(() => ({
+        ticks: this.ticksRenderArr,
+        thumbs: this.thumbsRenderArr,
+    }));
+}
+class SliderMultiRootState extends SliderBaseRootState {
+    value;
+    isMulti = true;
+    activeThumb = $state(null);
+    currentThumbIdx = $state(0);
+    onValueCommit;
+    constructor(props) {
+        super(props);
+        this.value = props.value;
+        this.onValueCommit = props.onValueCommit;
+        onMountEffect(() => {
+            return executeCallbacks(on(document, "pointerdown", this.handlePointerDown), on(document, "pointerup", this.handlePointerUp), on(document, "pointermove", this.handlePointerMove), on(document, "pointerleave", this.handlePointerUp));
+        });
+        watch([
+            () => this.step.current,
+            () => this.min.current,
+            () => this.max.current,
+            () => this.value.current,
+        ], ([step, min, max, value]) => {
             const isValidValue = (v) => {
                 const snappedValue = snapValueToStep(v, min, max, step);
                 return snappedValue === v;
@@ -306,20 +516,6 @@ class SliderRootState {
         ticks: this.ticksRenderArr,
         thumbs: this.thumbsRenderArr,
     }));
-    #touchAction = $derived.by(() => {
-        if (this.disabled.current)
-            return undefined;
-        return this.orientation.current === "horizontal" ? "pan-y" : "pan-x";
-    });
-    props = $derived.by(() => ({
-        id: this.id.current,
-        "data-orientation": getDataOrientation(this.orientation.current),
-        "data-disabled": getDataDisabled(this.disabled.current),
-        style: {
-            touchAction: this.#touchAction,
-        },
-        [SLIDER_ROOT_ATTR]: "",
-    }));
 }
 const VALID_SLIDER_KEYS = [
     kbd.ARROW_LEFT,
@@ -343,9 +539,14 @@ class SliderRangeState {
         });
     }
     rangeStyles = $derived.by(() => {
-        const value = this.#root.value.current;
-        const min = value.length > 1 ? this.#root.getPositionFromValue(Math.min(...value) ?? 0) : 0;
-        const max = 100 - this.#root.getPositionFromValue(Math.max(...value) ?? 0);
+        const min = Array.isArray(this.#root.value.current)
+            ? this.#root.value.current.length > 1
+                ? this.#root.getPositionFromValue(Math.min(...this.#root.value.current) ?? 0)
+                : 0
+            : 0;
+        const max = Array.isArray(this.#root.value.current)
+            ? 100 - this.#root.getPositionFromValue(Math.max(...this.#root.value.current) ?? 0)
+            : 100 - this.#root.getPositionFromValue(this.#root.value.current);
         return {
             position: "absolute",
             ...getRangeStyles(this.#root.direction, min, max),
@@ -377,7 +578,12 @@ class SliderThumbState {
         this.onkeydown = this.onkeydown.bind(this);
     }
     #updateValue(newValue) {
-        this.#root.updateValue(newValue, this.#index.current);
+        if (this.#root.isMulti) {
+            this.#root.updateValue(newValue, this.#index.current);
+        }
+        else {
+            this.#root.updateValue(newValue);
+        }
     }
     onkeydown(e) {
         if (this.#isDisabled)
@@ -389,14 +595,16 @@ class SliderThumbState {
         if (!thumbs.length)
             return;
         const idx = thumbs.indexOf(currNode);
-        this.#root.currentThumbIdx = idx;
+        if (this.#root.isMulti) {
+            this.#root.currentThumbIdx = idx;
+        }
         if (!VALID_SLIDER_KEYS.includes(e.key))
             return;
         e.preventDefault();
         const min = this.#root.min.current;
         const max = this.#root.max.current;
         const value = this.#root.value.current;
-        const thumbValue = value[idx];
+        const thumbValue = Array.isArray(value) ? value[idx] : value;
         const orientation = this.#root.orientation.current;
         const direction = this.#root.direction;
         const step = this.#root.step.current;
@@ -460,6 +668,7 @@ class SliderThumbState {
                 }
                 break;
         }
+        // @ts-expect-error - this is fine
         this.#root.onValueCommit.current(this.#root.value.current);
     }
     props = $derived.by(() => ({
@@ -490,7 +699,11 @@ class SliderTickState {
 }
 const SliderRootContext = new Context("Slider.Root");
 export function useSliderRoot(props) {
-    return SliderRootContext.set(new SliderRootState(props));
+    const { type, ...rest } = props;
+    const rootState = type === "single"
+        ? new SliderSingleRootState(rest)
+        : new SliderMultiRootState(rest);
+    return SliderRootContext.set(rootState);
 }
 export function useSliderRange(props) {
     return new SliderRangeState(props, SliderRootContext.get());

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

@@ -5,22 +5,7 @@ export type SliderRootSnippetProps = {
     ticks: number[];
     thumbs: number[];
 };
-export type SliderRootPropsWithoutHTML = WithChild<{
-    /**
-     * The value of the slider.
-     * @bindable
-     */
-    value?: number[];
-    /**
-     * A callback function called when the value changes.
-     */
-    onValueChange?: OnChangeFn<number[]>;
-    /**
-     * A callback function called when the user stops dragging the thumb,
-     * which is useful for knowing when the user has finished interacting with the
-     * slider and _commits_ the value.
-     */
-    onValueCommit?: OnChangeFn<number[]>;
+export type BaseSliderRootPropsWithoutHTML = {
     /**
      * Whether to automatically sort the values in the array when moving thumbs past
      * one another.
@@ -43,7 +28,7 @@ export type SliderRootPropsWithoutHTML = WithChild<{
     /**
      * The amount to increment the value by when the user presses the arrow keys.
      *
-     * @defayltValue 1
+     * @defaultValue 1
      */
     step?: number;
     /**
@@ -77,7 +62,56 @@ export type SliderRootPropsWithoutHTML = WithChild<{
      * @defaultValue false
      */
     controlledValue?: boolean;
-}, SliderRootSnippetProps>;
+};
+export type SliderSingleRootPropsWithoutHTML = BaseSliderRootPropsWithoutHTML & {
+    /**
+     * The type of slider. If set to `'multiple'`, the slider will
+     * allow multiple ticks and the `value` will be an array of numbers.
+     *
+     * @required
+     */
+    type: "single";
+    /**
+     * The value of the slider.
+     * @bindable
+     */
+    value?: number;
+    /**
+     * A callback function called when the value changes.
+     */
+    onValueChange?: OnChangeFn<number>;
+    /**
+     * A callback function called when the user stops dragging the
+     * thumb and the value is committed.
+     */
+    onValueCommit?: OnChangeFn<number>;
+};
+export type SliderMultiRootPropsWithoutHTML = BaseSliderRootPropsWithoutHTML & {
+    /**
+     * The type of slider. If set to `'multiple'`, the slider will
+     * allow multiple ticks and the `value` will be an array of numbers.
+     *
+     * @required
+     */
+    type: "multiple";
+    /**
+     * The value of the slider.
+     * @bindable
+     */
+    value?: number[];
+    /**
+     * A callback function called when the value changes.
+     */
+    onValueChange?: OnChangeFn<number[]>;
+    /**
+     * A callback function called when the user stops dragging the
+     * thumb and the value is committed.
+     */
+    onValueCommit?: OnChangeFn<number[]>;
+};
+export type SliderRootPropsWithoutHTML = WithChild<SliderSingleRootPropsWithoutHTML, SliderRootSnippetProps> | WithChild<SliderMultiRootPropsWithoutHTML, SliderRootSnippetProps>;
+export type SliderSingleRootProps = SliderSingleRootPropsWithoutHTML & Without<BitsPrimitiveSpanAttributes, WithChild<SliderSingleRootPropsWithoutHTML, SliderRootSnippetProps>>;
+export type SliderMultipleRootProps = SliderMultiRootPropsWithoutHTML & Without<BitsPrimitiveSpanAttributes, WithChild<SliderMultiRootPropsWithoutHTML, SliderRootSnippetProps>>;
 export type SliderRootProps = SliderRootPropsWithoutHTML & Without<BitsPrimitiveSpanAttributes, SliderRootPropsWithoutHTML>;
 export type SliderRangePropsWithoutHTML = WithChild;
 export type SliderRangeProps = SliderRangePropsWithoutHTML & Without<BitsPrimitiveSpanAttributes, SliderRangePropsWithoutHTML>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bits-ui",
-  "version": "1.0.0-next.75",
+  "version": "1.0.0-next.76",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "funding": "https://github.com/sponsors/huntabyte",