bits-ui 1.8.0 → 2.2.0

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

@@ -2,13 +2,15 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import { useCalendarHeader } from "../calendar.svelte.js";
 	import type { CalendarHeaderProps } from "../types.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
 	}: CalendarHeaderProps = $props();
 

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

@@ -2,13 +2,15 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { CalendarHeadingProps } from "../types.js";
 	import { useCalendarHeading } from "../calendar.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
 	}: CalendarHeadingProps = $props();
 

package/dist/bits/calendar/components/calendar-next-button.svelte

@@ -2,12 +2,14 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import { useCalendarNextButton } from "../calendar.svelte.js";
 	import type { CalendarNextButtonProps } from "../types.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		children,
 		child,
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		...restProps
 	}: CalendarNextButtonProps = $props();

package/dist/bits/calendar/components/calendar-prev-button.svelte

@@ -2,12 +2,14 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { CalendarPrevButtonProps } from "../types.js";
 	import { useCalendarPrevButton } from "../calendar.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		children,
 		child,
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		...restProps
 	}: CalendarPrevButtonProps = $props();

package/dist/bits/checkbox/checkbox.svelte.js

@@ -1,4 +1,4 @@
-import { useRefById } from "svelte-toolbelt";
+import { attachRef } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { getAriaChecked, getAriaRequired, getDataDisabled } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
@@ -10,7 +10,6 @@ class CheckboxGroupState {
     labelId = $state(undefined);
     constructor(opts) {
         this.opts = opts;
-        useRefById(opts);
     }
     addValue(checkboxValue) {
         if (!checkboxValue)
@@ -37,6 +36,7 @@ class CheckboxGroupState {
         "aria-labelledby": this.labelId,
         "data-disabled": getDataDisabled(this.opts.disabled.current),
         [CHECKBOX_GROUP_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 class CheckboxGroupLabelState {
@@ -45,22 +45,12 @@ class CheckboxGroupLabelState {
     constructor(opts, group) {
         this.opts = opts;
         this.group = group;
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                if (node) {
-                    group.labelId = node.id;
-                }
-                else {
-                    group.labelId = undefined;
-                }
-            },
-        });
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "data-disabled": getDataDisabled(this.group.opts.disabled.current),
         [CHECKBOX_GROUP_LABEL_ATTR]: "",
+        ...attachRef(this.opts.ref, (v) => (this.group.labelId = v?.id)),
     }));
 }
 class CheckboxRootState {
@@ -91,7 +81,6 @@ class CheckboxRootState {
         this.group = group;
         this.onkeydown = this.onkeydown.bind(this);
         this.onclick = this.onclick.bind(this);
-        useRefById(opts);
         watch.pre([() => $state.snapshot(this.group?.opts.value.current), () => this.opts.value.current], ([groupValue, value]) => {
             if (!groupValue || !value)
                 return;
@@ -149,6 +138,7 @@ class CheckboxRootState {
         //
         onclick: this.onclick,
         onkeydown: this.onkeydown,
+        ...attachRef(this.opts.ref),
     }));
 }
 //

package/dist/bits/checkbox/components/checkbox-group-label.svelte

@@ -2,11 +2,13 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { CheckboxGroupLabelProps } from "../types.js";
 	import { useCheckboxGroupLabel } from "../checkbox.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		ref = $bindable(null),
-		id = useId(),
+		id = createId(uid),
 		child,
 		children,
 		...restProps

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

@@ -3,11 +3,13 @@
 	import type { CheckboxGroupProps } from "../types.js";
 	import { useCheckboxGroup } from "../checkbox.svelte.js";
 	import { noop } from "../../../internal/noop.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		ref = $bindable(null),
-		id = useId(),
+		id = createId(uid),
 		value = $bindable([]),
 		onValueChange = noop,
 		name,

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

@@ -3,9 +3,11 @@
 	import type { CheckboxRootProps } from "../types.js";
 	import { CheckboxGroupContext, useCheckboxRoot } from "../checkbox.svelte.js";
 	import CheckboxInput from "./checkbox-input.svelte";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { watch } from "runed";
 
+	const uid = $props.id();
+
 	let {
 		checked = $bindable(false),
 		ref = $bindable(null),
@@ -15,7 +17,7 @@
 		required = false,
 		name = undefined,
 		value = "on",
-		id = useId(),
+		id = createId(uid),
 		indeterminate = $bindable(false),
 		onIndeterminateChange,
 		child,

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

@@ -1,4 +1,4 @@
-import { afterTick, useRefById } from "svelte-toolbelt";
+import { afterTick, attachRef } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { getAriaExpanded, getDataDisabled, getDataOpenClosed } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
@@ -11,7 +11,6 @@ class CollapsibleRootState {
     constructor(opts) {
         this.opts = opts;
         this.toggleOpen = this.toggleOpen.bind(this);
-        useRefById(opts);
     }
     toggleOpen() {
         this.opts.open.current = !this.opts.open.current;
@@ -21,6 +20,7 @@ class CollapsibleRootState {
         "data-state": getDataOpenClosed(this.opts.open.current),
         "data-disabled": getDataDisabled(this.opts.disabled.current),
         [COLLAPSIBLE_ROOT_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 class CollapsibleContentState {
@@ -35,13 +35,6 @@ class CollapsibleContentState {
         this.opts = opts;
         this.root = root;
         this.#isMountAnimationPrevented = root.opts.open.current;
-        useRefById({
-            ...opts,
-            deps: () => this.present,
-            onRefChange: (node) => {
-                this.root.contentNode = node;
-            },
-        });
         $effect.pre(() => {
             const rAF = requestAnimationFrame(() => {
                 this.#isMountAnimationPrevented = false;
@@ -92,6 +85,7 @@ class CollapsibleContentState {
         "data-state": getDataOpenClosed(this.root.opts.open.current),
         "data-disabled": getDataDisabled(this.root.opts.disabled.current),
         [COLLAPSIBLE_CONTENT_ATTR]: "",
+        ...attachRef(this.opts.ref, (v) => (this.root.contentNode = v)),
     }));
 }
 class CollapsibleTriggerState {
@@ -103,7 +97,6 @@ class CollapsibleTriggerState {
         this.root = root;
         this.onclick = this.onclick.bind(this);
         this.onkeydown = this.onkeydown.bind(this);
-        useRefById(opts);
     }
     onclick(e) {
         if (this.#isDisabled)
@@ -132,6 +125,7 @@ class CollapsibleTriggerState {
         //
         onclick: this.onclick,
         onkeydown: this.onkeydown,
+        ...attachRef(this.opts.ref),
     }));
 }
 const CollapsibleRootContext = new Context("Collapsible.Root");

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

@@ -3,14 +3,16 @@
 	import { useCollapsibleContent } from "../collapsible.svelte.js";
 	import type { CollapsibleContentProps } from "../types.js";
 	import { PresenceLayer } from "../../utilities/presence-layer/index.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		child,
 		ref = $bindable(null),
 		forceMount = false,
 		children,
-		id = useId(),
+		id = createId(uid),
 		...restProps
 	}: CollapsibleContentProps & { forceMount?: boolean } = $props();
 
@@ -24,7 +26,7 @@
 	});
 </script>
 
-<PresenceLayer forceMount={true} present={contentState.present} {id}>
+<PresenceLayer forceMount={true} present={contentState.present} ref={contentState.opts.ref}>
 	{#snippet presence({ present })}
 		{@const mergedProps = mergeProps(restProps, contentState.props, {
 			hidden: forceMount ? undefined : !present.current,

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

@@ -2,13 +2,15 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { CollapsibleTriggerProps } from "../types.js";
 	import { useCollapsibleTrigger } from "../collapsible.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),
 		disabled = false,
 		...restProps
 	}: CollapsibleTriggerProps = $props();

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

@@ -2,13 +2,15 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { CollapsibleRootProps } from "../types.js";
 	import { useCollapsibleRoot } from "../collapsible.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 
+	const uid = $props.id();
+
 	let {
 		children,
 		child,
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		open = $bindable(false),
 		disabled = false,

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

@@ -24,15 +24,15 @@
 	});
 
 	if (defaultValue) {
-		inputState.root.inputValue = defaultValue;
+		inputState.root.opts.inputValue.current = defaultValue;
 	}
 
 	const mergedProps = $derived(
-		mergeProps(restProps, inputState.props, { value: inputState.root.inputValue })
+		mergeProps(restProps, inputState.props, { value: inputState.root.opts.inputValue.current })
 	);
 </script>
 
-<FloatingLayer.Anchor {id}>
+<FloatingLayer.Anchor {id} ref={inputState.opts.ref}>
 	{#if child}
 		{@render child({ props: mergedProps })}
 	{:else}

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

@@ -20,6 +20,7 @@
 		required = false,
 		items = [],
 		allowDeselect = true,
+		inputValue = "",
 		children,
 	}: ComboboxRootProps = $props();
 
@@ -61,6 +62,10 @@
 		isCombobox: true,
 		items: box.with(() => items),
 		allowDeselect: box.with(() => allowDeselect),
+		inputValue: box.with(
+			() => inputValue,
+			(v) => (inputValue = v)
+		),
 	});
 </script>
 
@@ -70,7 +75,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)}
 			<ListboxHiddenInput value={item} />
 		{/each}
 	{/if}

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

@@ -1,6 +1,23 @@
 import type { BitsPrimitiveInputAttributes } from "../../shared/attributes.js";
+import type { SelectBaseRootPropsWithoutHTML, SelectMultipleRootPropsWithoutHTML, SelectSingleRootPropsWithoutHTML } from "../select/types.js";
 import type { WithChild, Without } from "../../internal/types.js";
-export type { SelectBaseRootPropsWithoutHTML as ComboboxBaseRootPropsWithoutHTML, SelectContentProps as ComboboxContentProps, SelectContentPropsWithoutHTML as ComboboxContentPropsWithoutHTML, SelectContentStaticProps as ComboboxContentStaticProps, SelectContentStaticPropsWithoutHTML as ComboboxContentStaticPropsWithoutHTML, SelectItemProps as ComboboxItemProps, SelectItemPropsWithoutHTML as ComboboxItemPropsWithoutHTML, SelectItemSnippetProps as ComboboxItemSnippetProps, SelectMultipleRootProps as ComboboxMultipleRootProps, SelectMultipleRootPropsWithoutHTML as ComboboxMultipleRootPropsWithoutHTML, SelectRootProps as ComboboxRootProps, SelectRootPropsWithoutHTML as ComboboxRootPropsWithoutHTML, SelectSingleRootProps as ComboboxSingleRootProps, SelectSingleRootPropsWithoutHTML as ComboboxSingleRootPropsWithoutHTML, SelectTriggerProps as ComboboxTriggerProps, SelectTriggerPropsWithoutHTML as ComboboxTriggerPropsWithoutHTML, SelectGroupPropsWithoutHTML as ComboboxGroupPropsWithoutHTML, SelectGroupProps as ComboboxGroupProps, SelectGroupHeadingPropsWithoutHTML as ComboboxGroupHeadingPropsWithoutHTML, SelectGroupHeadingProps as ComboboxGroupHeadingProps, SelectViewportPropsWithoutHTML as ComboboxViewportPropsWithoutHTML, SelectViewportProps as ComboboxViewportProps, SelectScrollDownButtonProps as ComboboxScrollDownButtonProps, SelectScrollDownButtonPropsWithoutHTML as ComboboxScrollDownButtonPropsWithoutHTML, SelectScrollUpButtonProps as ComboboxScrollUpButtonProps, SelectScrollUpButtonPropsWithoutHTML as ComboboxScrollUpButtonPropsWithoutHTML, SelectArrowProps as ComboboxArrowProps, SelectArrowPropsWithoutHTML as ComboboxArrowPropsWithoutHTML, SelectPortalProps as ComboboxPortalProps, SelectPortalPropsWithoutHTML as ComboboxPortalPropsWithoutHTML, } from "../select/types.js";
+export type ComboboxBaseRootPropsWithoutHTML = SelectBaseRootPropsWithoutHTML & {
+    /**
+     * A read-only value that can be used to programmatically
+     * update the input value.
+     *
+     * This is useful for updating the displayed label/input
+     * when the value changes outside of Bits UI.
+     */
+    inputValue?: string;
+};
+export type ComboboxSingleRootPropsWithoutHTML = ComboboxBaseRootPropsWithoutHTML & SelectSingleRootPropsWithoutHTML;
+export type ComboboxSingleRootProps = ComboboxSingleRootPropsWithoutHTML;
+export type ComboboxMultipleRootPropsWithoutHTML = ComboboxBaseRootPropsWithoutHTML & SelectMultipleRootPropsWithoutHTML;
+export type ComboboxMultipleRootProps = ComboboxMultipleRootPropsWithoutHTML;
+export type ComboboxRootPropsWithoutHTML = ComboboxBaseRootPropsWithoutHTML & (ComboboxSingleRootPropsWithoutHTML | ComboboxMultipleRootPropsWithoutHTML);
+export type ComboboxRootProps = ComboboxRootPropsWithoutHTML;
+export type { SelectContentProps as ComboboxContentProps, SelectContentPropsWithoutHTML as ComboboxContentPropsWithoutHTML, SelectContentStaticProps as ComboboxContentStaticProps, SelectContentStaticPropsWithoutHTML as ComboboxContentStaticPropsWithoutHTML, SelectItemProps as ComboboxItemProps, SelectItemPropsWithoutHTML as ComboboxItemPropsWithoutHTML, SelectItemSnippetProps as ComboboxItemSnippetProps, SelectTriggerProps as ComboboxTriggerProps, SelectTriggerPropsWithoutHTML as ComboboxTriggerPropsWithoutHTML, SelectGroupPropsWithoutHTML as ComboboxGroupPropsWithoutHTML, SelectGroupProps as ComboboxGroupProps, SelectGroupHeadingPropsWithoutHTML as ComboboxGroupHeadingPropsWithoutHTML, SelectGroupHeadingProps as ComboboxGroupHeadingProps, SelectViewportPropsWithoutHTML as ComboboxViewportPropsWithoutHTML, SelectViewportProps as ComboboxViewportProps, SelectScrollDownButtonProps as ComboboxScrollDownButtonProps, SelectScrollDownButtonPropsWithoutHTML as ComboboxScrollDownButtonPropsWithoutHTML, SelectScrollUpButtonProps as ComboboxScrollUpButtonProps, SelectScrollUpButtonPropsWithoutHTML as ComboboxScrollUpButtonPropsWithoutHTML, SelectArrowProps as ComboboxArrowProps, SelectArrowPropsWithoutHTML as ComboboxArrowPropsWithoutHTML, SelectPortalProps as ComboboxPortalProps, SelectPortalPropsWithoutHTML as ComboboxPortalPropsWithoutHTML, } from "../select/types.js";
 export type ComboboxInputPropsWithoutHTML = WithChild<{
     /**
      * The default value of the input. This is not a reactive prop and is only used to populate

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

@@ -1,4 +1,4 @@
-import { afterSleep, afterTick, srOnlyStyles, useRefById } from "svelte-toolbelt";
+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";
@@ -100,7 +100,6 @@ class CommandRootState {
         const defaults = { ...this._commandState, value: this.opts.value.current ?? "" };
         this._commandState = defaults;
         this.commandState = defaults;
-        useRefById(opts);
         this.onkeydown = this.onkeydown.bind(this);
     }
     /**
@@ -572,6 +571,7 @@ class CommandRootState {
         [COMMAND_ROOT_ATTR]: "",
         tabindex: -1,
         onkeydown: this.onkeydown,
+        ...attachRef(this.opts.ref),
     }));
 }
 class CommandEmptyState {
@@ -588,15 +588,12 @@ class CommandEmptyState {
         $effect.pre(() => {
             this.#isInitialRender = false;
         });
-        useRefById({
-            ...opts,
-            deps: () => this.shouldRender,
-        });
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         role: "presentation",
         [COMMAND_EMPTY_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 class CommandGroupContainerState {
@@ -617,10 +614,6 @@ class CommandGroupContainerState {
         this.opts = opts;
         this.root = root;
         this.trueValue = opts.value.current ?? opts.id.current;
-        useRefById({
-            ...opts,
-            deps: () => this.shouldRender,
-        });
         watch(() => this.trueValue, () => {
             return this.root.registerGroup(this.trueValue);
         });
@@ -645,6 +638,7 @@ class CommandGroupContainerState {
         hidden: this.shouldRender ? undefined : true,
         "data-value": this.trueValue,
         [COMMAND_GROUP_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 class CommandGroupHeadingState {
@@ -653,16 +647,11 @@ class CommandGroupHeadingState {
     constructor(opts, group) {
         this.opts = opts;
         this.group = group;
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.group.headingNode = node;
-            },
-        });
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         [COMMAND_GROUP_HEADING_ATTR]: "",
+        ...attachRef(this.opts.ref, (v) => (this.group.headingNode = v)),
     }));
 }
 class CommandGroupItemsState {
@@ -671,13 +660,13 @@ class CommandGroupItemsState {
     constructor(opts, group) {
         this.opts = opts;
         this.group = group;
-        useRefById(opts);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         role: "group",
         [COMMAND_GROUP_ITEMS_ATTR]: "",
         "aria-labelledby": this.group.headingNode?.id ?? undefined,
+        ...attachRef(this.opts.ref),
     }));
 }
 class CommandInputState {
@@ -692,12 +681,6 @@ class CommandInputState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.root.inputNode = node;
-            },
-        });
         watch(() => this.opts.ref.current, () => {
             const node = this.opts.ref.current;
             if (node && this.opts.autofocus.current) {
@@ -723,6 +706,7 @@ class CommandInputState {
         "aria-controls": this.root.viewportNode?.id ?? undefined,
         "aria-labelledby": this.root.labelNode?.id ?? undefined,
         "aria-activedescendant": this.#selectedItemId,
+        ...attachRef(this.opts.ref, (v) => (this.root.inputNode = v)),
     }));
 }
 class CommandItemState {
@@ -751,10 +735,6 @@ class CommandItemState {
         this.root = root;
         this.#group = CommandGroupContainerContext.getOr(null);
         this.trueValue = opts.value.current;
-        useRefById({
-            ...opts,
-            deps: () => Boolean(this.root.commandState.search),
-        });
         watch([
             () => this.trueValue,
             () => this.#group?.trueValue,
@@ -807,13 +787,13 @@ class CommandItemState {
         role: "option",
         onpointermove: this.onpointermove,
         onclick: this.onclick,
+        ...attachRef(this.opts.ref),
     }));
 }
 class CommandLoadingState {
     opts;
     constructor(opts) {
         this.opts = opts;
-        useRefById(opts);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -823,6 +803,7 @@ class CommandLoadingState {
         "aria-valuemax": 100,
         "aria-label": "Loading...",
         [COMMAND_LOADING_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 class CommandSeparatorState {
@@ -832,16 +813,13 @@ class CommandSeparatorState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById({
-            ...opts,
-            deps: () => this.shouldRender,
-        });
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         // role="separator" cannot belong to a role="listbox"
         "aria-hidden": "true",
         [COMMAND_SEPARATOR_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 class CommandListState {
@@ -850,13 +828,13 @@ class CommandListState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         role: "listbox",
         "aria-label": this.opts.ariaLabel.current,
         [COMMAND_LIST_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 class CommandLabelState {
@@ -865,18 +843,13 @@ class CommandLabelState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.root.labelNode = node;
-            },
-        });
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         [COMMAND_INPUT_LABEL_ATTR]: "",
         for: this.opts.for?.current,
         style: srOnlyStyles,
+        ...attachRef(this.opts.ref, (v) => (this.root.labelNode = v)),
     }));
 }
 class CommandViewportState {
@@ -885,12 +858,6 @@ class CommandViewportState {
     constructor(opts, list) {
         this.opts = opts;
         this.list = list;
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.list.root.viewportNode = node;
-            },
-        });
         $effect(() => {
             const node = this.opts.ref.current;
             const listNode = this.list.opts.ref.current;
@@ -913,6 +880,7 @@ class CommandViewportState {
     props = $derived.by(() => ({
         id: this.opts.id.current,
         [COMMAND_VIEWPORT_ATTR]: "",
+        ...attachRef(this.opts.ref, (v) => (this.list.root.viewportNode = v)),
     }));
 }
 export function useCommandRoot(props) {

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

@@ -1,16 +1,15 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
 	import { useCommandLabel } from "../command.svelte.js";
-	import {
-		type BitsPrimitiveLabelAttributes,
-		type WithElementRef,
-		mergeProps,
-		useId,
-	} from "../../../shared/index.js";
+
 	import type { WithChildren } from "../../../internal/types.js";
+	import { createId } from "../../../internal/create-id.js";
+	import { mergeProps } from "svelte-toolbelt";
+	import type { BitsPrimitiveLabelAttributes, WithElementRef } from "../../../shared/index.js";
 
+	const uid = $props.id();
 	let {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		children,
 		...restProps

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

@@ -1,5 +1,5 @@
-import { type BitsPrimitiveLabelAttributes, type WithElementRef } from "../../../shared/index.js";
 import type { WithChildren } from "../../../internal/types.js";
+import type { BitsPrimitiveLabelAttributes, WithElementRef } from "../../../shared/index.js";
 declare const CommandLabel: import("svelte").Component<WithChildren<WithElementRef<BitsPrimitiveLabelAttributes>>, {}, "ref">;
 type CommandLabel = ReturnType<typeof CommandLabel>;
 export default CommandLabel;

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

@@ -2,10 +2,12 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { CommandEmptyProps } from "../types.js";
 	import { useCommandEmpty } from "../command.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/command/components/command-group-heading.svelte

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