bits-ui 2.9.9 → 2.11.0

package/dist/bits/checkbox/components/checkbox.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { CheckboxRootProps } from "../types.js";
 	import { CheckboxGroupContext, CheckboxRootState } from "../checkbox.svelte.js";
 	import CheckboxInput from "./checkbox-input.svelte";
@@ -51,31 +51,31 @@
 
 	const rootState = CheckboxRootState.create(
 		{
-			checked: box.with(
+			checked: boxWith(
 				() => checked,
 				(v) => {
 					checked = v;
 					onCheckedChange?.(v);
 				}
 			),
-			disabled: box.with(() => disabled ?? false),
-			required: box.with(() => required),
-			name: box.with(() => name),
-			value: box.with(() => value),
-			id: box.with(() => id),
-			ref: box.with(
+			disabled: boxWith(() => disabled ?? false),
+			required: boxWith(() => required),
+			name: boxWith(() => name),
+			value: boxWith(() => value),
+			id: boxWith(() => id),
+			ref: boxWith(
 				() => ref,
 				(v) => (ref = v)
 			),
-			indeterminate: box.with(
+			indeterminate: boxWith(
 				() => indeterminate,
 				(v) => {
 					indeterminate = v;
 					onIndeterminateChange?.(v);
 				}
 			),
-			type: box.with(() => type),
-			readonly: box.with(() => Boolean(readonly)),
+			type: boxWith(() => type),
+			readonly: boxWith(() => Boolean(readonly)),
 		},
 		group
 	);

package/dist/bits/checkbox/components/checkbox.svelte.d.ts

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

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

@@ -23,6 +23,7 @@ export declare class CollapsibleRootState {
 }
 interface CollapsibleContentStateOpts extends WithRefOpts, ReadableBoxedValues<{
     forceMount: boolean;
+    hiddenUntilFound: boolean;
 }> {
 }
 export declare class CollapsibleContentState {
@@ -42,6 +43,7 @@ export declare class CollapsibleContentState {
             readonly "--bits-collapsible-content-height": string | undefined;
             readonly "--bits-collapsible-content-width": string | undefined;
         };
+        readonly hidden: "until-found" | undefined;
         readonly "data-state": "open" | "closed";
         readonly "data-disabled": "" | undefined;
     };

package/dist/bits/collapsible/collapsible.svelte.js

@@ -1,8 +1,9 @@
-import { afterTick, attachRef, box, } from "svelte-toolbelt";
+import { afterTick, attachRef, boxWith, } from "svelte-toolbelt";
 import { Context, watch } from "runed";
-import { createBitsAttrs, getAriaExpanded, getDataDisabled, getDataOpenClosed, } from "../../internal/attrs.js";
+import { createBitsAttrs, boolToStr, boolToEmptyStrOrUndef, getDataOpenClosed, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
 import { OpenChangeComplete } from "../../internal/open-change-complete.js";
+import { on } from "svelte/events";
 const collapsibleAttrs = createBitsAttrs({
     component: "collapsible",
     parts: ["root", "content", "trigger"],
@@ -21,7 +22,7 @@ export class CollapsibleRootState {
         this.toggleOpen = this.toggleOpen.bind(this);
         this.attachment = attachRef(this.opts.ref);
         new OpenChangeComplete({
-            ref: box.with(() => this.contentNode),
+            ref: boxWith(() => this.contentNode),
             open: this.opts.open,
             onComplete: () => {
                 this.opts.onOpenChangeComplete.current(this.opts.open.current);
@@ -34,7 +35,7 @@ export class CollapsibleRootState {
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "data-state": getDataOpenClosed(this.opts.open.current),
-        "data-disabled": getDataDisabled(this.opts.disabled.current),
+        "data-disabled": boolToEmptyStrOrUndef(this.opts.disabled.current),
         [collapsibleAttrs.root]: "",
         ...this.attachment,
     }));
@@ -46,7 +47,11 @@ export class CollapsibleContentState {
     opts;
     root;
     attachment;
-    present = $derived.by(() => this.opts.forceMount.current || this.root.opts.open.current);
+    present = $derived.by(() => {
+        if (this.opts.hiddenUntilFound.current)
+            return this.root.opts.open.current;
+        return this.opts.forceMount.current || this.root.opts.open.current;
+    });
     #originalStyles;
     #isMountAnimationPrevented = $state(false);
     #width = $state(0);
@@ -68,6 +73,21 @@ export class CollapsibleContentState {
                 cancelAnimationFrame(rAF);
             };
         });
+        watch.pre([() => this.opts.ref.current, () => this.opts.hiddenUntilFound.current], ([node, hiddenUntilFound]) => {
+            if (!node || !hiddenUntilFound)
+                return;
+            const handleBeforeMatch = () => {
+                if (this.root.opts.open.current)
+                    return;
+                // we need to defer opening until after browser completes search highlighting
+                // otherwise the browser will immediately open the collapsible
+                // and the search highlighting will not be visible
+                requestAnimationFrame(() => {
+                    this.root.opts.open.current = true;
+                });
+            };
+            return on(node, "beforematch", handleBeforeMatch);
+        });
         watch([() => this.opts.ref.current, () => this.present], ([node]) => {
             if (!node)
                 return;
@@ -107,8 +127,11 @@ export class CollapsibleContentState {
                 ? `${this.#width}px`
                 : undefined,
         },
+        hidden: this.opts.hiddenUntilFound.current && !this.root.opts.open.current
+            ? "until-found"
+            : undefined,
         "data-state": getDataOpenClosed(this.root.opts.open.current),
-        "data-disabled": getDataDisabled(this.root.opts.disabled.current),
+        "data-disabled": boolToEmptyStrOrUndef(this.root.opts.disabled.current),
         [collapsibleAttrs.content]: "",
         ...this.attachment,
     }));
@@ -148,9 +171,9 @@ export class CollapsibleTriggerState {
         type: "button",
         disabled: this.#isDisabled,
         "aria-controls": this.root.contentId,
-        "aria-expanded": getAriaExpanded(this.root.opts.open.current),
+        "aria-expanded": boolToStr(this.root.opts.open.current),
         "data-state": getDataOpenClosed(this.root.opts.open.current),
-        "data-disabled": getDataDisabled(this.#isDisabled),
+        "data-disabled": boolToEmptyStrOrUndef(this.#isDisabled),
         [collapsibleAttrs.trigger]: "",
         //
         onclick: this.onclick,

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import { CollapsibleContentState } from "../collapsible.svelte.js";
 	import type { CollapsibleContentProps } from "../types.js";
 	import { PresenceLayer } from "../../utilities/presence-layer/index.js";
@@ -11,15 +11,17 @@
 		child,
 		ref = $bindable(null),
 		forceMount = false,
+		hiddenUntilFound = false,
 		children,
 		id = createId(uid),
 		...restProps
 	}: CollapsibleContentProps = $props();
 
 	const contentState = CollapsibleContentState.create({
-		id: box.with(() => id),
-		forceMount: box.with(() => forceMount),
-		ref: box.with(
+		id: boxWith(() => id),
+		forceMount: boxWith(() => forceMount),
+		hiddenUntilFound: boxWith(() => hiddenUntilFound),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
@@ -28,9 +30,15 @@
 
 <PresenceLayer forceMount={true} open={contentState.present} ref={contentState.opts.ref}>
 	{#snippet presence({ present })}
-		{@const mergedProps = mergeProps(restProps, contentState.props, {
-			hidden: forceMount ? undefined : !present,
-		})}
+		{@const mergedProps = mergeProps(
+			restProps,
+			contentState.props,
+			hiddenUntilFound && !present
+				? {}
+				: {
+						hidden: hiddenUntilFound ? !present : forceMount ? undefined : !present,
+					}
+		)}
 		{#if child}
 			{@render child({
 				...contentState.snippetProps,

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { CollapsibleTriggerProps } from "../types.js";
 	import { CollapsibleTriggerState } from "../collapsible.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -16,12 +16,12 @@
 	}: CollapsibleTriggerProps = $props();
 
 	const triggerState = CollapsibleTriggerState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		disabled: box.with(() => disabled),
+		disabled: boxWith(() => disabled),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, triggerState.props));

package/dist/bits/collapsible/components/collapsible.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { CollapsibleRootProps } from "../types.js";
 	import { CollapsibleRootState } from "../collapsible.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -20,20 +20,20 @@
 	}: CollapsibleRootProps = $props();
 
 	const rootState = CollapsibleRootState.create({
-		open: box.with(
+		open: boxWith(
 			() => open,
 			(v) => {
 				open = v;
 				onOpenChange(v);
 			}
 		),
-		disabled: box.with(() => disabled),
-		id: box.with(() => id),
-		ref: box.with(
+		disabled: boxWith(() => disabled),
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		onOpenChangeComplete: box.with(() => onOpenChangeComplete),
+		onOpenChangeComplete: boxWith(() => onOpenChangeComplete),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, rootState.props));

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

@@ -4,13 +4,13 @@ export type CollapsibleRootPropsWithoutHTML = WithChild<{
     /**
      * Whether the collapsible is disabled.
      *
-     * @defaultValue false
+     * @default false
      */
     disabled?: boolean;
     /**
      * Whether the collapsible is open.
      *
-     * @defaultValue false
+     * @default false
      */
     open?: boolean;
     /**
@@ -30,9 +30,18 @@ export type CollapsibleContentPropsWithoutHTML = WithChildNoChildrenSnippetProps
     /**
      * Whether to force mount the content to the DOM.
      *
-     * @defaultValue false
+     * @default false
      */
     forceMount?: boolean;
+    /**
+     * Whether to allow the browser to expand the content when searching for content
+     * within the panel via the browser's built-in search functionality.
+     *
+     * When `true`, this prop will override the `forceMount` prop.
+     *
+     * @default true
+     */
+    hiddenUntilFound?: boolean;
 }, CollapsibleContentSnippetProps>;
 export type CollapsibleContentProps = CollapsibleContentPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, CollapsibleContentPropsWithoutHTML>;
 export type CollapsibleTriggerPropsWithoutHTML = WithChild;

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { ComboboxInputProps } from "../types.js";
 	import { useId } from "../../../internal/use-id.js";
 	import { FloatingLayer } from "../../utilities/floating-layer/index.js";
@@ -15,12 +15,12 @@
 	}: ComboboxInputProps = $props();
 
 	const inputState = SelectInputState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		clearOnDeselect: box.with(() => clearOnDeselect),
+		clearOnDeselect: boxWith(() => clearOnDeselect),
 	});
 
 	if (defaultValue) {

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { ComboboxTriggerProps } from "../types.js";
 	import { useId } from "../../../internal/use-id.js";
 	import { SelectComboTriggerState } from "../../select/select.svelte.js";
@@ -14,8 +14,8 @@
 	}: ComboboxTriggerProps = $props();
 
 	const triggerState = SelectComboTriggerState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { type WritableBox, box } from "svelte-toolbelt";
+	import { type WritableBox, boxWith } from "svelte-toolbelt";
 	import type { ComboboxRootProps } from "../types.js";
 	import { noop } from "../../../internal/noop.js";
 	import FloatingLayer from "../../utilities/floating-layer/components/floating-layer.svelte";
@@ -40,7 +40,7 @@
 
 	const rootState = SelectRootState.create({
 		type,
-		value: box.with(
+		value: boxWith(
 			() => value!,
 			(v) => {
 				value = v;
@@ -48,26 +48,26 @@
 				onValueChange(v);
 			}
 		) as WritableBox<string> | WritableBox<string[]>,
-		disabled: box.with(() => disabled),
-		required: box.with(() => required),
-		open: box.with(
+		disabled: boxWith(() => disabled),
+		required: boxWith(() => required),
+		open: boxWith(
 			() => open,
 			(v) => {
 				open = v;
 				onOpenChange(v);
 			}
 		),
-		loop: box.with(() => loop),
-		scrollAlignment: box.with(() => scrollAlignment),
-		name: box.with(() => name),
+		loop: boxWith(() => loop),
+		scrollAlignment: boxWith(() => scrollAlignment),
+		name: boxWith(() => name),
 		isCombobox: true,
-		items: box.with(() => items),
-		allowDeselect: box.with(() => allowDeselect),
-		inputValue: box.with(
+		items: boxWith(() => items),
+		allowDeselect: boxWith(() => allowDeselect),
+		inputValue: boxWith(
 			() => inputValue,
 			(v) => (inputValue = v)
 		),
-		onOpenChangeComplete: box.with(() => onOpenChangeComplete),
+		onOpenChangeComplete: boxWith(() => onOpenChangeComplete),
 	});
 </script>
 

package/dist/bits/command/command.svelte.js

@@ -2,7 +2,7 @@ import { afterSleep, afterTick, srOnlyStyles, attachRef, } from "svelte-toolbelt
 import { Context, watch } from "runed";
 import { findNextSibling, findPreviousSibling } from "./utils.js";
 import { kbd } from "../../internal/kbd.js";
-import { createBitsAttrs, getAriaDisabled, getAriaExpanded, getAriaSelected, getDataDisabled, getDataSelected, } from "../../internal/attrs.js";
+import { createBitsAttrs, boolToStr, boolToEmptyStrOrUndef } from "../../internal/attrs.js";
 import { getFirstNonCommentChild } from "../../internal/dom.js";
 import { computeCommandScore } from "./index.js";
 import { cssEscape } from "../../internal/css-escape.js";
@@ -1087,7 +1087,7 @@ export class CommandInputState {
         spellcheck: false,
         "aria-autocomplete": "list",
         role: "combobox",
-        "aria-expanded": getAriaExpanded(true),
+        "aria-expanded": boolToStr(true),
         "aria-controls": this.root.viewportNode?.id ?? undefined,
         "aria-labelledby": this.root.labelNode?.id ?? undefined,
         "aria-activedescendant": this.#selectedItemId,
@@ -1174,10 +1174,10 @@ export class CommandItemState {
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        "aria-disabled": getAriaDisabled(this.opts.disabled.current),
-        "aria-selected": getAriaSelected(this.isSelected),
-        "data-disabled": getDataDisabled(this.opts.disabled.current),
-        "data-selected": getDataSelected(this.isSelected),
+        "aria-disabled": boolToStr(this.opts.disabled.current),
+        "aria-selected": boolToStr(this.isSelected),
+        "data-disabled": boolToEmptyStrOrUndef(this.opts.disabled.current),
+        "data-selected": boolToEmptyStrOrUndef(this.isSelected),
         "data-value": this.trueValue,
         "data-group": this.#group?.trueValue,
         [commandAttrs.item]: "",

package/dist/bits/command/components/_command-label.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
+	import { boxWith } from "svelte-toolbelt";
 	import { CommandLabelState } from "../command.svelte.js";
 
 	import type { WithChildren } from "../../../internal/types.js";
@@ -16,8 +16,8 @@
 	}: WithChildren<WithElementRef<BitsPrimitiveLabelAttributes>> = $props();
 
 	const labelState = CommandLabelState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { CommandEmptyProps } from "../types.js";
 	import { CommandEmptyState } from "../command.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -16,12 +16,12 @@
 	}: CommandEmptyProps = $props();
 
 	const emptyState = CommandEmptyState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		forceMount: box.with(() => forceMount),
+		forceMount: boxWith(() => forceMount),
 	});
 
 	const mergedProps = $derived(mergeProps(emptyState.props, restProps));

package/dist/bits/command/components/command-group-heading.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import { CommandGroupHeadingState } from "../command.svelte.js";
 	import type { CommandGroupHeadingProps } from "../types.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -15,8 +15,8 @@
 	}: CommandGroupHeadingProps = $props();
 
 	const headingState = CommandGroupHeadingState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

package/dist/bits/command/components/command-group-items.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { CommandGroupItemsProps } from "../types.js";
 	import { CommandGroupItemsState } from "../command.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -15,8 +15,8 @@
 	}: CommandGroupItemsProps = $props();
 
 	const groupItemsState = CommandGroupItemsState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { CommandGroupProps } from "../types.js";
 	import { CommandGroupContainerState } from "../command.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -17,13 +17,13 @@
 	}: CommandGroupProps = $props();
 
 	const groupState = CommandGroupContainerState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		forceMount: box.with(() => forceMount),
-		value: box.with(() => value),
+		forceMount: boxWith(() => forceMount),
+		value: boxWith(() => value),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, groupState.props));

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { CommandInputProps } from "../types.js";
 	import { CommandInputState } from "../command.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -16,18 +16,18 @@
 	}: CommandInputProps = $props();
 
 	const inputState = CommandInputState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		value: box.with(
+		value: boxWith(
 			() => value,
 			(v) => {
 				value = v;
 			}
 		),
-		autofocus: box.with(() => autofocus ?? false),
+		autofocus: boxWith(() => autofocus ?? false),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, inputState.props));

package/dist/bits/command/components/command-input.svelte.d.ts

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

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { CommandItemProps } from "../types.js";
 	import { CommandItemState } from "../command.svelte.js";
 	import { noop } from "../../../internal/noop.js";
@@ -21,16 +21,16 @@
 	}: CommandItemProps = $props();
 
 	const itemState = CommandItemState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		value: box.with(() => value),
-		disabled: box.with(() => disabled),
-		onSelect: box.with(() => onSelect),
-		forceMount: box.with(() => forceMount),
-		keywords: box.with(() => keywords),
+		value: boxWith(() => value),
+		disabled: boxWith(() => disabled),
+		onSelect: boxWith(() => onSelect),
+		forceMount: boxWith(() => forceMount),
+		keywords: boxWith(() => keywords),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, itemState.props));

package/dist/bits/command/components/command-link-item.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { CommandLinkItemProps } from "../types.js";
 	import { CommandItemState } from "../command.svelte.js";
 	import { noop } from "../../../internal/noop.js";
@@ -21,16 +21,16 @@
 	}: CommandLinkItemProps = $props();
 
 	const itemState = CommandItemState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		value: box.with(() => value),
-		disabled: box.with(() => disabled),
-		onSelect: box.with(() => onSelect),
-		forceMount: box.with(() => forceMount),
-		keywords: box.with(() => keywords),
+		value: boxWith(() => value),
+		disabled: boxWith(() => disabled),
+		onSelect: boxWith(() => onSelect),
+		forceMount: boxWith(() => forceMount),
+		keywords: boxWith(() => keywords),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, itemState.props));

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { CommandListProps } from "../types.js";
 	import { CommandListState } from "../command.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -16,12 +16,12 @@
 	}: CommandListProps = $props();
 
 	const listState = CommandListState.create({
-		id: box.with(() => id),
-		ref: box.with(
+		id: boxWith(() => id),
+		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
 		),
-		ariaLabel: box.with(() => ariaLabel ?? "Suggestions..."),
+		ariaLabel: boxWith(() => ariaLabel ?? "Suggestions..."),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, listState.props));