bits-ui 1.7.0 → 2.1.0

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

@@ -32,7 +32,7 @@
 	);
 </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

@@ -70,7 +70,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/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,

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

@@ -2,10 +2,12 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { CommandGroupItemsProps } from "../types.js";
 	import { useCommandGroupItems } 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.svelte

@@ -2,10 +2,12 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { CommandGroupProps } from "../types.js";
 	import { useCommandGroupContainer } 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),
 		value = "",
 		forceMount = false,

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

@@ -2,12 +2,14 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { CommandInputProps } from "../types.js";
 	import { useCommandInput } from "../command.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		value = $bindable(""),
 		autofocus = false,
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		child,
 		...restProps

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

@@ -3,10 +3,12 @@
 	import type { CommandItemProps } from "../types.js";
 	import { useCommandItem } from "../command.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 {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		value = "",
 		disabled = false,

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

@@ -3,10 +3,12 @@
 	import type { CommandLinkItemProps } from "../types.js";
 	import { useCommandItem } from "../command.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 {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		value = "",
 		disabled = false,

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

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

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

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