bits-ui 1.3.19 → 1.4.1

package/dist/bits/accordion/components/accordion.svelte

@@ -4,6 +4,7 @@
 	import type { AccordionRootProps } from "../types.js";
 	import { useId } from "../../../internal/use-id.js";
 	import { noop } from "../../../internal/noop.js";
+	import { watch } from "runed";
 
 	let {
 		disabled = false,
@@ -19,7 +20,20 @@
 		...restProps
 	}: AccordionRootProps = $props();
 
-	value === undefined && (value = type === "single" ? "" : []);
+	function handleDefaultValue() {
+		if (value !== undefined) return;
+		value = type === "single" ? "" : [];
+	}
+
+	// SSR
+	handleDefaultValue();
+
+	watch.pre(
+		() => value,
+		() => {
+			handleDefaultValue();
+		}
+	);
 
 	const rootState = useAccordionRoot({
 		type,

package/dist/bits/calendar/components/calendar.svelte

@@ -6,6 +6,7 @@
 	import { useId } from "../../../internal/use-id.js";
 	import { noop } from "../../../internal/noop.js";
 	import { getDefaultDate } from "../../../internal/date-time/utils.js";
+	import { watch } from "runed";
 
 	let {
 		child,
@@ -40,16 +41,36 @@
 		defaultValue: value,
 	});
 
-	if (placeholder === undefined) {
+	function handleDefaultPlaceholder() {
+		if (placeholder !== undefined) return;
 		placeholder = defaultPlaceholder;
 	}
 
-	if (value === undefined) {
-		const defaultValue = type === "single" ? undefined : [];
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		value = defaultValue as any;
+	// SSR
+	handleDefaultPlaceholder();
+
+	watch.pre(
+		() => placeholder,
+		() => {
+			handleDefaultPlaceholder();
+		}
+	);
+
+	function handleDefaultValue() {
+		if (value !== undefined) return;
+		value = type === "single" ? undefined : [];
 	}
 
+	// SSR
+	handleDefaultValue();
+
+	watch.pre(
+		() => value,
+		() => {
+			handleDefaultValue();
+		}
+	);
+
 	const rootState = useCalendarRoot({
 		id: box.with(() => id),
 		ref: box.with(

package/dist/bits/combobox/components/combobox.svelte

@@ -5,6 +5,7 @@
 	import FloatingLayer from "../../utilities/floating-layer/components/floating-layer.svelte";
 	import { useSelectRoot } from "../../select/select.svelte.js";
 	import ListboxHiddenInput from "../../select/components/select-hidden-input.svelte";
+	import { watch } from "runed";
 
 	let {
 		value = $bindable(),
@@ -27,6 +28,14 @@
 		value = defaultValue;
 	}
 
+	watch.pre(
+		() => value,
+		() => {
+			if (value !== undefined) return;
+			value = type === "single" ? "" : [];
+		}
+	);
+
 	const rootState = useSelectRoot({
 		type,
 		value: box.with(

package/dist/bits/command/components/command.svelte

@@ -36,8 +36,10 @@
 		value: box.with(
 			() => value,
 			(v) => {
-				value = v;
-				onValueChange(v);
+				if (value !== v) {
+					value = v;
+					onValueChange(v);
+				}
 			}
 		),
 		vimBindings: box.with(() => vimBindings),

package/dist/bits/date-field/components/date-field.svelte

@@ -5,6 +5,7 @@
 	import type { DateFieldRootProps } from "../types.js";
 	import { noop } from "../../../internal/noop.js";
 	import { getDefaultDate } from "../../../internal/date-time/utils.js";
+	import { watch } from "runed";
 
 	let {
 		disabled = false,
@@ -27,7 +28,9 @@
 		children,
 	}: DateFieldRootProps = $props();
 
-	if (placeholder === undefined) {
+	function handleDefaultPlaceholder() {
+		if (placeholder !== undefined) return;
+
 		const defaultPlaceholder = getDefaultDate({
 			granularity,
 			defaultValue: value,
@@ -36,6 +39,21 @@
 		placeholder = defaultPlaceholder;
 	}
 
+	// SSR
+	handleDefaultPlaceholder();
+
+	/**
+	 * Covers an edge case where when a spread props object is reassigned,
+	 * the props are reset to their default values, which would make placeholder
+	 * undefined which causes errors to be thrown.
+	 */
+	watch.pre(
+		() => placeholder,
+		() => {
+			handleDefaultPlaceholder();
+		}
+	);
+
 	useDateFieldRoot({
 		value: box.with(
 			() => value,

package/dist/bits/date-picker/components/date-picker.svelte

@@ -9,6 +9,7 @@
 	import { useDateFieldRoot } from "../../date-field/date-field.svelte.js";
 	import { FloatingLayer } from "../../utilities/floating-layer/index.js";
 	import { getDefaultDate } from "../../../internal/date-time/utils.js";
+	import { watch } from "runed";
 
 	let {
 		open = $bindable(false),
@@ -50,10 +51,26 @@
 		defaultValue: value,
 	});
 
-	if (placeholder === undefined) {
+	function handleDefaultPlaceholder() {
+		if (placeholder !== undefined) return;
 		placeholder = defaultPlaceholder;
 	}
 
+	// SSR
+	handleDefaultPlaceholder();
+
+	/**
+	 * Covers an edge case where when a spread props object is reassigned,
+	 * the props are reset to their default values, which would make placeholder
+	 * undefined which causes errors to be thrown.
+	 */
+	watch.pre(
+		() => placeholder,
+		() => {
+			handleDefaultPlaceholder();
+		}
+	);
+
 	function onDateSelect() {
 		if (closeOnDateSelect) {
 			open = false;

package/dist/bits/date-range-field/components/date-range-field.svelte

@@ -7,6 +7,7 @@
 	import { noop } from "../../../internal/noop.js";
 	import type { DateRange } from "../../../shared/index.js";
 	import { getDefaultDate } from "../../../internal/date-time/utils.js";
+	import { watch } from "runed";
 
 	let {
 		id = useId(),
@@ -38,21 +39,43 @@
 	let startValue = $state<DateValue | undefined>(value?.start);
 	let endValue = $state<DateValue | undefined>(value?.end);
 
-	if (placeholder === undefined) {
-		const defaultPlaceholder = getDefaultDate({
-			granularity,
-			defaultValue: value?.start,
-		});
-
+	function handleDefaultPlaceholder() {
+		if (placeholder !== undefined) return;
+		const defaultPlaceholder = getDefaultDate({ granularity, defaultValue: value?.start });
 		placeholder = defaultPlaceholder;
 	}
 
-	if (value === undefined) {
-		const defaultValue = { start: undefined, end: undefined };
+	// SSR
+	handleDefaultPlaceholder();
+
+	watch.pre(
+		() => placeholder,
+		() => {
+			handleDefaultPlaceholder();
+		}
+	);
 
+	function handleDefaultValue() {
+		if (value !== undefined) return;
+		const defaultValue = { start: undefined, end: undefined };
 		value = defaultValue;
 	}
 
+	// SSR
+	handleDefaultValue();
+
+	/**
+	 * Covers an edge case where when a spread props object is reassigned,
+	 * the props are reset to their default values, which would make value
+	 * undefined which causes errors to be thrown.
+	 */
+	watch.pre(
+		() => value,
+		() => {
+			handleDefaultValue();
+		}
+	);
+
 	const rootState = useDateRangeFieldRoot({
 		id: box.with(() => id),
 		ref: box.with(

package/dist/bits/date-range-picker/components/date-range-picker.svelte

@@ -10,6 +10,7 @@
 	import { useId } from "../../../internal/use-id.js";
 	import type { DateRange } from "../../../shared/index.js";
 	import { getDefaultDate } from "../../../internal/date-time/utils.js";
+	import { watch } from "runed";
 
 	let {
 		open = $bindable(false),
@@ -54,18 +55,51 @@
 	let startValue = $state<DateValue | undefined>(value?.start);
 	let endValue = $state<DateValue | undefined>(value?.end);
 
-	if (value === undefined) {
+	function handleDefaultValue() {
+		if (value !== undefined) return;
 		value = { start: undefined, end: undefined };
 	}
+
+	// SSR
+	handleDefaultValue();
+
+	/**
+	 * Covers an edge case where when a spread props object is reassigned,
+	 * the props are reset to their default values, which would make value
+	 * undefined which causes errors to be thrown.
+	 */
+	watch.pre(
+		() => value,
+		() => {
+			handleDefaultValue();
+		}
+	);
+
 	const defaultPlaceholder = getDefaultDate({
 		granularity,
 		defaultValue: value?.start,
 	});
 
-	if (placeholder === undefined) {
+	function handleDefaultPlaceholder() {
+		if (placeholder !== undefined) return;
 		placeholder = defaultPlaceholder;
 	}
 
+	// SSR
+	handleDefaultPlaceholder();
+
+	/**
+	 * Covers an edge case where when a spread props object is reassigned,
+	 * the props are reset to their default values, which would make placeholder
+	 * undefined which causes errors to be thrown.
+	 */
+	watch.pre(
+		() => placeholder,
+		() => {
+			handleDefaultPlaceholder();
+		}
+	);
+
 	function onRangeSelect() {
 		if (closeOnRangeSelect) {
 			open = false;

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

@@ -5,5 +5,4 @@ export { default as ContentStatic } from "./components/popover-content-static.sv
 export { default as Trigger } from "./components/popover-trigger.svelte";
 export { default as Close } from "./components/popover-close.svelte";
 export { default as Portal } from "../utilities/portal/portal.svelte";
-export type { PopoverRootProps as RootProps, PopoverArrowProps as ArrowProps, PopoverContentProps as ContentProps, PopoverContentStaticProps as ContentStaticProps, PopoverTriggerProps as TriggerProps, PopoverCloseProps as CloseProps, } from "./types.js";
-export type { PortalProps } from "../utilities/portal/types.js";
+export type { PopoverRootProps as RootProps, PopoverArrowProps as ArrowProps, PopoverContentProps as ContentProps, PopoverContentStaticProps as ContentStaticProps, PopoverTriggerProps as TriggerProps, PopoverCloseProps as CloseProps, PopoverPortalProps as PortalProps, } from "./types.js";

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

@@ -3,6 +3,7 @@ import type { PopperLayerProps, PopperLayerStaticProps } from "../utilities/popp
 import type { OnChangeFn, WithChild, WithChildNoChildrenSnippetProps, WithChildren, Without } from "../../internal/types.js";
 import type { BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
 import type { FloatingContentSnippetProps, StaticContentSnippetProps } from "../../shared/types.js";
+import type { PortalProps } from "../../types.js";
 export type PopoverRootPropsWithoutHTML = WithChildren<{
     /**
      * The open state of the popover.
@@ -24,3 +25,5 @@ export type PopoverClosePropsWithoutHTML = WithChild;
 export type PopoverCloseProps = PopoverClosePropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, PopoverClosePropsWithoutHTML>;
 export type PopoverArrowPropsWithoutHTML = ArrowPropsWithoutHTML;
 export type PopoverArrowProps = ArrowProps;
+export type PopoverPortalPropsWithoutHTML = PortalProps;
+export type PopoverPortalProps = PortalProps;

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

@@ -6,6 +6,7 @@
 	import { noop } from "../../../internal/noop.js";
 	import { useId } from "../../../internal/use-id.js";
 	import { getDefaultDate } from "../../../internal/date-time/utils.js";
+	import { watch } from "runed";
 
 	let {
 		children,
@@ -43,15 +44,36 @@
 		defaultValue: value?.start,
 	});
 
-	if (placeholder === undefined) {
+	function handleDefaultPlaceholder() {
+		if (placeholder !== undefined) return;
 		placeholder = defaultPlaceholder;
 	}
 
-	if (value === undefined) {
-		const defaultValue = { start: undefined, end: undefined };
-		value = defaultValue;
+	// SSR
+	handleDefaultPlaceholder();
+
+	watch.pre(
+		() => placeholder,
+		() => {
+			handleDefaultPlaceholder();
+		}
+	);
+
+	function handleDefaultValue() {
+		if (value !== undefined) return;
+		value = { start: undefined, end: undefined };
 	}
 
+	// SSR
+	handleDefaultValue();
+
+	watch.pre(
+		() => value,
+		() => {
+			handleDefaultValue();
+		}
+	);
+
 	const rootState = useRangeCalendarRoot({
 		id: box.with(() => id),
 		ref: box.with(

package/dist/bits/select/components/select-scroll-down-button.svelte

@@ -8,6 +8,7 @@
 	let {
 		id = useId(),
 		ref = $bindable(null),
+		delay = () => 50,
 		child,
 		children,
 		...restProps
@@ -19,6 +20,7 @@
 			() => ref,
 			(v) => (ref = v)
 		),
+		delay: box.with(() => delay),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, scrollButtonState.props));

package/dist/bits/select/components/select-scroll-up-button.svelte

@@ -8,6 +8,7 @@
 	let {
 		id = useId(),
 		ref = $bindable(null),
+		delay = () => 50,
 		child,
 		children,
 		...restProps
@@ -19,6 +20,7 @@
 			() => ref,
 			(v) => (ref = v)
 		),
+		delay: box.with(() => delay),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, scrollButtonState.props));

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

@@ -5,6 +5,7 @@
 	import { useSelectRoot } from "../select.svelte.js";
 	import type { SelectRootProps } from "../types.js";
 	import SelectHiddenInput from "./select-hidden-input.svelte";
+	import { watch } from "runed";
 
 	let {
 		value = $bindable(),
@@ -22,12 +23,21 @@
 		children,
 	}: SelectRootProps = $props();
 
-	if (value === undefined) {
-		const defaultValue = type === "single" ? "" : [];
-
-		value = defaultValue;
+	function handleDefaultValue() {
+		if (value !== undefined) return;
+		value = type === "single" ? "" : [];
 	}
 
+	// SSR
+	handleDefaultValue();
+
+	watch.pre(
+		() => value,
+		() => {
+			handleDefaultValue();
+		}
+	);
+
 	const rootState = useSelectRoot({
 		type,
 		value: box.with(

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

@@ -304,12 +304,14 @@ declare class SelectViewportState {
         };
     };
 }
-type SelectScrollButtonImplStateProps = WithRefProps;
+type SelectScrollButtonImplStateProps = WithRefProps & ReadableBoxedValues<{
+    delay: (tick: number) => number;
+}>;
 declare class SelectScrollButtonImplState {
     readonly opts: SelectScrollButtonImplStateProps;
     readonly content: SelectContentState;
     root: SelectBaseRootState;
-    autoScrollInterval: number | null;
+    autoScrollTimer: number | null;
     userScrollTimer: number;
     isUserScrolling: boolean;
     onAutoScroll: () => void;
@@ -318,7 +320,7 @@ declare class SelectScrollButtonImplState {
     handleUserScroll(): void;
     clearAutoScrollInterval(): void;
     onpointerdown(_: BitsPointerEvent): void;
-    onpointermove(_: BitsPointerEvent): void;
+    onpointermove(e: BitsPointerEvent): void;
     onpointerleave(_: BitsPointerEvent): void;
     props: {
         readonly id: string;
@@ -327,7 +329,7 @@ declare class SelectScrollButtonImplState {
             readonly flexShrink: 0;
         };
         readonly onpointerdown: (_: BitsPointerEvent) => void;
-        readonly onpointermove: (_: BitsPointerEvent) => void;
+        readonly onpointermove: (e: BitsPointerEvent) => void;
         readonly onpointerleave: (_: BitsPointerEvent) => void;
     };
 }
@@ -351,7 +353,7 @@ declare class SelectScrollDownButtonState {
             readonly flexShrink: 0;
         };
         readonly onpointerdown: (_: BitsPointerEvent) => void;
-        readonly onpointermove: (_: BitsPointerEvent) => void;
+        readonly onpointermove: (e: BitsPointerEvent) => void;
         readonly onpointerleave: (_: BitsPointerEvent) => void;
     };
 }
@@ -374,7 +376,7 @@ declare class SelectScrollUpButtonState {
             readonly flexShrink: 0;
         };
         readonly onpointerdown: (_: BitsPointerEvent) => void;
-        readonly onpointermove: (_: BitsPointerEvent) => void;
+        readonly onpointermove: (e: BitsPointerEvent) => void;
         readonly onpointerleave: (_: BitsPointerEvent) => void;
     };
 }

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

@@ -55,15 +55,14 @@ class SelectBaseRootState {
     setHighlightedNode(node, initial = false) {
         this.highlightedNode = node;
         if (node && (this.isUsingKeyboard || initial)) {
-            node.scrollIntoView({ block: "nearest" });
+            node.scrollIntoView({ block: this.opts.scrollAlignment.current });
         }
     }
     getCandidateNodes() {
         const node = this.contentNode;
         if (!node)
             return [];
-        const nodes = Array.from(node.querySelectorAll(`[${this.bitsAttrs.item}]:not([data-disabled])`));
-        return nodes;
+        return Array.from(node.querySelectorAll(`[${this.bitsAttrs.item}]:not([data-disabled])`));
     }
     setHighlightedToFirstCandidate() {
         this.setHighlightedNode(null);
@@ -817,7 +816,10 @@ class SelectItemState {
             : undefined,
         "data-value": this.opts.value.current,
         "data-disabled": getDataDisabled(this.opts.disabled.current),
-        "data-highlighted": this.root.highlightedValue === this.opts.value.current ? "" : undefined,
+        "data-highlighted": this.root.highlightedValue === this.opts.value.current &&
+            !this.opts.disabled.current
+            ? ""
+            : undefined,
         "data-selected": this.root.includesItem(this.opts.value.current) ? "" : undefined,
         "data-label": this.opts.label.current,
         [this.root.bitsAttrs.item]: "",
@@ -921,7 +923,7 @@ class SelectScrollButtonImplState {
     opts;
     content;
     root;
-    autoScrollInterval = null;
+    autoScrollTimer = null;
     userScrollTimer = -1;
     isUserScrolling = false;
     onAutoScroll = noop;
@@ -959,24 +961,22 @@ class SelectScrollButtonImplState {
         }, 200);
     }
     clearAutoScrollInterval() {
-        if (this.autoScrollInterval === null)
+        if (this.autoScrollTimer === null)
             return;
-        window.clearInterval(this.autoScrollInterval);
-        this.autoScrollInterval = null;
+        window.clearTimeout(this.autoScrollTimer);
+        this.autoScrollTimer = null;
     }
     onpointerdown(_) {
-        if (this.autoScrollInterval !== null)
+        if (this.autoScrollTimer !== null)
             return;
-        this.autoScrollInterval = window.setInterval(() => {
+        const autoScroll = (tick) => {
             this.onAutoScroll();
-        }, 50);
+            this.autoScrollTimer = window.setTimeout(() => autoScroll(tick + 1), this.opts.delay.current(tick));
+        };
+        this.autoScrollTimer = window.setTimeout(() => autoScroll(1), this.opts.delay.current(0));
     }
-    onpointermove(_) {
-        if (this.autoScrollInterval !== null)
-            return;
-        this.autoScrollInterval = window.setInterval(() => {
-            this.onAutoScroll();
-        }, 50);
+    onpointermove(e) {
+        this.onpointerdown(e);
     }
     onpointerleave(_) {
         this.clearAutoScrollInterval();
@@ -1018,7 +1018,7 @@ class SelectScrollDownButtonState {
             }
             this.scrollIntoViewTimer = afterSleep(5, () => {
                 const activeItem = this.root.highlightedNode;
-                activeItem?.scrollIntoView({ block: "nearest" });
+                activeItem?.scrollIntoView({ block: this.root.opts.scrollAlignment.current });
             });
         });
     }

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

@@ -177,7 +177,16 @@ export type SelectArrowPropsWithoutHTML = ArrowPropsWithoutHTML;
 export type SelectArrowProps = ArrowProps;
 export type SelectViewportPropsWithoutHTML = WithChild;
 export type SelectViewportProps = SelectViewportPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectViewportPropsWithoutHTML>;
-export type SelectScrollUpButtonPropsWithoutHTML = WithChild;
+export type SelectScrollButtonPropsWithoutHTML = WithChild<{
+    /**
+     * Controls the initial delay (tick 0) and delay between auto-scrolls in milliseconds.
+     * The default function always returns 50ms.
+     *
+     * @param tick current tick number
+     */
+    delay?: (tick: number) => number;
+}>;
+export type SelectScrollUpButtonPropsWithoutHTML = SelectScrollButtonPropsWithoutHTML;
 export type SelectScrollUpButtonProps = SelectScrollUpButtonPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectScrollUpButtonPropsWithoutHTML>;
-export type SelectScrollDownButtonPropsWithoutHTML = WithChild;
+export type SelectScrollDownButtonPropsWithoutHTML = SelectScrollButtonPropsWithoutHTML;
 export type SelectScrollDownButtonProps = SelectScrollDownButtonPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectScrollDownButtonPropsWithoutHTML>;

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

@@ -4,6 +4,7 @@
 	import { useSliderRoot } from "../slider.svelte.js";
 	import { useId } from "../../../internal/use-id.js";
 	import { noop } from "../../../internal/noop.js";
+	import { watch } from "runed";
 
 	let {
 		children,
@@ -24,10 +25,21 @@
 		...restProps
 	}: SliderRootProps = $props();
 
-	if (value === undefined) {
+	function handleDefaultValue() {
+		if (value !== undefined) return;
 		value = type === "single" ? 0 : [];
 	}
 
+	// SSR
+	handleDefaultValue();
+
+	watch.pre(
+		() => value,
+		() => {
+			handleDefaultValue();
+		}
+	);
+
 	const rootState = useSliderRoot({
 		id: box.with(() => id),
 		ref: box.with(

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

@@ -229,8 +229,8 @@ class SliderSingleRootState extends SliderBaseRootState {
         }
         const currValue = this.opts.value.current;
         return Array.from({ length: count }, (_, i) => {
-            const tickPosition = i * (step / difference) * 100;
-            const scale = linearScale([this.opts.min.current, this.opts.max.current], this.getThumbScale());
+            const tickPosition = i * step;
+            const scale = linearScale([0, (count - 1) * step], this.getThumbScale());
             const isFirst = i === 0;
             const isLast = i === count - 1;
             const offsetPercentage = isFirst ? 0 : isLast ? -100 : -50;
@@ -484,11 +484,12 @@ class SliderMultiRootState extends SliderBaseRootState {
         }
         const currValue = this.opts.value.current;
         return Array.from({ length: count }, (_, i) => {
-            const tickPosition = i * (step / difference) * 100;
+            const tickPosition = i * step;
+            const scale = linearScale([0, (count - 1) * step], this.getThumbScale());
             const isFirst = i === 0;
             const isLast = i === count - 1;
             const offsetPercentage = isFirst ? 0 : isLast ? -100 : -50;
-            const style = getTickStyles(this.direction, tickPosition, offsetPercentage);
+            const style = getTickStyles(this.direction, scale(tickPosition), offsetPercentage);
             const tickValue = min + i * step;
             const bounded = currValue.length === 1
                 ? tickValue <= currValue[0]

package/dist/bits/toggle-group/components/toggle-group.svelte

@@ -5,6 +5,7 @@
 	import { useToggleGroupRoot } from "../toggle-group.svelte.js";
 	import { useId } from "../../../internal/use-id.js";
 	import { noop } from "../../../internal/noop.js";
+	import { watch } from "runed";
 
 	let {
 		id = useId(),
@@ -21,12 +22,21 @@
 		...restProps
 	}: ToggleGroupRootProps = $props();
 
-	if (value === undefined) {
-		const defaultValue = type === "single" ? "" : [];
-
-		value = defaultValue;
+	function handleDefaultValue() {
+		if (value !== undefined) return;
+		value = type === "single" ? "" : [];
 	}
 
+	// SSR
+	handleDefaultValue();
+
+	watch.pre(
+		() => value,
+		() => {
+			handleDefaultValue();
+		}
+	);
+
 	const rootState = useToggleGroupRoot({
 		id: box.with(() => id),
 		value: box.with(

package/dist/bits/toolbar/components/toolbar-group.svelte

@@ -5,6 +5,7 @@
 	import { useToolbarGroup } from "../toolbar.svelte.js";
 	import { useId } from "../../../internal/use-id.js";
 	import { noop } from "../../../internal/noop.js";
+	import { watch } from "runed";
 
 	let {
 		id = useId(),
@@ -18,11 +19,21 @@
 		...restProps
 	}: ToolbarGroupProps = $props();
 
-	if (value === undefined) {
-		const defaultValue = type === "single" ? "" : [];
-		value = defaultValue;
+	function handleDefaultValue() {
+		if (value !== undefined) return;
+		value = type === "single" ? "" : [];
 	}
 
+	// SSR
+	handleDefaultValue();
+
+	watch.pre(
+		() => value,
+		() => {
+			handleDefaultValue();
+		}
+	);
+
 	const groupState = useToolbarGroup({
 		id: box.with(() => id),
 		disabled: box.with(() => disabled),

package/dist/bits/utilities/focus-scope/use-focus-scope.svelte.js

@@ -125,7 +125,7 @@ export function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoF
     }
     function handleClose(prevFocusedElement) {
         const destroyEvent = AutoFocusOnDestroyEvent.createEvent();
-        onCloseAutoFocus.current(destroyEvent);
+        onCloseAutoFocus.current?.(destroyEvent);
         const shouldIgnore = ctx.ignoreCloseAutoFocus;
         afterSleep(0, () => {
             if (!destroyEvent.defaultPrevented && prevFocusedElement && !shouldIgnore) {

package/dist/internal/use-dom-typeahead.svelte.js

@@ -10,13 +10,12 @@ export function useDOMTypeahead(opts) {
             return;
         search.current = search.current + key;
         const currentItem = getCurrentItem();
-        const currentMatch = candidates.find((item) => item === currentItem)?.textContent ?? "";
-        const values = candidates.map((item) => item.textContent ?? "");
+        const currentMatch = candidates.find((item) => item === currentItem)?.textContent?.trim() ?? "";
+        const values = candidates.map((item) => item.textContent?.trim() ?? "");
         const nextMatch = getNextMatch(values, search.current, currentMatch);
-        const newItem = candidates.find((item) => item.textContent === nextMatch);
-        if (newItem) {
+        const newItem = candidates.find((item) => item.textContent?.trim() === nextMatch);
+        if (newItem)
             onMatch(newItem);
-        }
         return newItem;
     }
     function resetTypeahead() {

package/package.json

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