diff --git a/package.json b/package.json
index 73fc05a59..c112d8947 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
 		"build:packages": "pnpm -F \"./packages/**\" --parallel build",
 		"check": "pnpm build:packages && pnpm -r check",
 		"ci:publish": "pnpm build:packages && changeset publish",
-		"dev": "pnpm -r --parallel dev",
+		"dev": "pnpm -F \"./packages/**\" svelte-kit sync && pnpm -r --parallel dev",
 		"format": "prettier --write .",
 		"lint": "prettier --check . && eslint .",
 		"lint:fix": "eslint --fix .",
diff --git a/packages/bits-ui/package.json b/packages/bits-ui/package.json
index 0467998cc..d3c96cb5d 100644
--- a/packages/bits-ui/package.json
+++ b/packages/bits-ui/package.json
@@ -50,7 +50,7 @@
 		"tslib": "^2.6.2",
 		"typescript": "^5.3.3",
 		"vite": "^5.2.8",
-		"vitest": "^1.5.0"
+		"vitest": "^1.6.0"
 	},
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts",
diff --git a/packages/bits-ui/src/lib/bits/accordion/accordion.svelte.ts b/packages/bits-ui/src/lib/bits/accordion/accordion.svelte.ts
index 4f8f89933..b944391f4 100644
--- a/packages/bits-ui/src/lib/bits/accordion/accordion.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/accordion/accordion.svelte.ts
@@ -1,4 +1,3 @@
-import type { WritableBox } from "svelte-toolbelt";
 import {
 	type Box,
 	type ReadableBoxedValues,
@@ -10,7 +9,7 @@ import {
 	getDataOpenClosed,
 	getDataOrientation,
 	kbd,
-	useNodeById,
+	useRefById,
 } from "$lib/internal/index.js";
 import { type UseRovingFocusReturn, useRovingFocus } from "$lib/internal/useRovingFocus.svelte.js";
 import type { Orientation } from "$lib/shared/index.js";
@@ -31,25 +30,33 @@ type AccordionBaseStateProps = ReadableBoxedValues<{
 	disabled: boolean;
 	orientation: Orientation;
 	loop: boolean;
-	ref: HTMLElement | null | undefined;
-}>;
+}> &
+	WritableBoxedValues<{
+		ref: HTMLElement | null;
+	}>;
 
 class AccordionBaseState {
-	id: AccordionBaseStateProps["id"];
-	node: WritableBox<HTMLElement | null>;
+	#id: AccordionBaseStateProps["id"];
+	#ref: AccordionBaseStateProps["ref"];
 	disabled: AccordionBaseStateProps["disabled"];
 	#loop: AccordionBaseStateProps["loop"];
 	orientation: AccordionBaseStateProps["orientation"];
 	rovingFocusGroup: UseRovingFocusReturn;
 
 	constructor(props: AccordionBaseStateProps) {
-		this.id = props.id;
+		this.#id = props.id;
 		this.disabled = props.disabled;
-		this.node = useNodeById(this.id);
+		this.#ref = props.ref;
+
+		useRefById({
+			id: props.id,
+			ref: this.#ref,
+		});
+
 		this.orientation = props.orientation;
 		this.#loop = props.loop;
 		this.rovingFocusGroup = useRovingFocus({
-			rootNodeId: this.id,
+			rootNodeId: this.#id,
 			candidateSelector: TRIGGER_ATTR,
 			loop: this.#loop,
 			orientation: this.orientation,
@@ -59,7 +66,7 @@ class AccordionBaseState {
 	props = $derived.by(
 		() =>
 			({
-				id: this.id.value,
+				id: this.#id.value,
 				"data-orientation": getDataOrientation(this.orientation.value),
 				"data-disabled": getDataDisabled(this.disabled.value),
 				[ROOT_ATTR]: "",
@@ -126,11 +133,16 @@ export class AccordionMultiState extends AccordionBaseState {
 type AccordionItemStateProps = ReadableBoxedValues<{
 	value: string;
 	disabled: boolean;
+	id: string;
 }> & {
 	rootState: AccordionState;
-};
+} & WritableBoxedValues<{
+		ref: HTMLElement | null;
+	}>;
 
 export class AccordionItemState {
+	#id: AccordionItemStateProps["id"];
+	#ref: AccordionItemStateProps["ref"];
 	value: AccordionItemStateProps["value"];
 	disabled: AccordionItemStateProps["disabled"];
 	root: AccordionState;
@@ -141,6 +153,13 @@ export class AccordionItemState {
 		this.value = props.value;
 		this.disabled = props.disabled;
 		this.root = props.rootState;
+		this.#id = props.id;
+		this.#ref = props.ref;
+
+		useRefById({
+			id: this.#id,
+			ref: this.#ref,
+		});
 	}
 
 	updateValue() {
@@ -162,6 +181,7 @@ export class AccordionItemState {
 	props = $derived.by(
 		() =>
 			({
+				id: this.#id.value,
 				[ITEM_ATTR]: "",
 				"data-state": getDataOpenClosed(this.isSelected),
 				"data-disabled": getDataDisabled(this.isDisabled),
@@ -176,12 +196,15 @@ export class AccordionItemState {
 type AccordionTriggerStateProps = ReadableBoxedValues<{
 	disabled: boolean;
 	id: string;
-}>;
+}> &
+	WritableBoxedValues<{
+		ref: HTMLElement | null;
+	}>;
 
 class AccordionTriggerState {
+	#ref: AccordionTriggerStateProps["ref"];
 	#disabled: AccordionTriggerStateProps["disabled"];
 	#id: AccordionTriggerStateProps["id"];
-	#node: Box<HTMLElement | null>;
 	#root: AccordionState;
 	#itemState: AccordionItemState;
 	#isDisabled = $derived.by(
@@ -193,8 +216,12 @@ class AccordionTriggerState {
 		this.#itemState = itemState;
 		this.#root = itemState.root;
 		this.#id = props.id;
+		this.#ref = props.ref;
 
-		this.#node = useNodeById(this.#id);
+		useRefById({
+			id: props.id,
+			ref: this.#ref,
+		});
 	}
 
 	#onclick = () => {
@@ -209,7 +236,7 @@ class AccordionTriggerState {
 			return;
 		}
 
-		this.#root.rovingFocusGroup.handleKeydown(this.#node.value, e);
+		this.#root.rovingFocusGroup.handleKeydown(this.#ref.value, e);
 	};
 
 	props = $derived.by(
@@ -238,11 +265,14 @@ class AccordionTriggerState {
 type AccordionContentStateProps = ReadableBoxedValues<{
 	forceMount: boolean;
 	id: string;
-}>;
+}> &
+	WritableBoxedValues<{
+		ref: HTMLElement | null;
+	}>;
 
 class AccordionContentState {
 	item: AccordionItemState;
-	node: WritableBox<HTMLElement | null>;
+	#ref: AccordionContentStateProps["ref"];
 	#id: AccordionContentStateProps["id"];
 	#originalStyles: { transitionDuration: string; animationName: string } | undefined = undefined;
 	#isMountAnimationPrevented = false;
@@ -257,8 +287,12 @@ class AccordionContentState {
 		this.#forceMount = props.forceMount;
 		this.#isMountAnimationPrevented = this.item.isSelected;
 		this.#id = props.id;
+		this.#ref = props.ref;
 
-		this.node = useNodeById(this.#id);
+		useRefById({
+			id: this.#id,
+			ref: this.#ref,
+		});
 
 		$effect.pre(() => {
 			const rAF = requestAnimationFrame(() => {
@@ -273,11 +307,11 @@ class AccordionContentState {
 		$effect(() => {
 			// eslint-disable-next-line no-unused-expressions
 			this.present;
-			const node = this.node.value;
+			const node = this.#ref.value;
 			if (!node) return;
 
 			afterTick(() => {
-				if (!this.node) return;
+				if (!this.#ref.value) return;
 				// get the dimensions of the element
 				this.#originalStyles = this.#originalStyles || {
 					transitionDuration: node.style.transitionDuration,
@@ -320,19 +354,34 @@ class AccordionContentState {
 
 type AccordionHeaderStateProps = ReadableBoxedValues<{
 	level: 1 | 2 | 3 | 4 | 5 | 6;
-}>;
+	id: string;
+}> &
+	WritableBoxedValues<{
+		ref: HTMLElement | null;
+	}>;
 
 class AccordionHeaderState {
-	#item: AccordionItemState;
+	#id: AccordionHeaderStateProps["id"];
+	#ref: AccordionHeaderStateProps["ref"];
 	#level: AccordionHeaderStateProps["level"];
+	#item: AccordionItemState;
 	constructor(props: AccordionHeaderStateProps, item: AccordionItemState) {
 		this.#level = props.level;
+		this.#id = props.id;
+		this.#ref = props.ref;
+
+		useRefById({
+			id: this.#id,
+			ref: this.#ref,
+		});
+
 		this.#item = item;
 	}
 
 	props = $derived.by(
 		() =>
 			({
+				id: this.#id.value,
 				role: "heading",
 				"aria-level": this.#level.value,
 				"data-heading-level": this.#level.value,
@@ -357,8 +406,10 @@ type InitAccordionProps = {
 	disabled: boolean;
 	orientation: Orientation;
 	loop: boolean;
-	ref: HTMLElement | null | undefined;
-}>;
+}> &
+	WritableBoxedValues<{
+		ref: HTMLElement | null;
+	}>;
 
 const [setAccordionRootContext, getAccordionRootContext] =
 	createContext<AccordionState>("Accordion.Root");
diff --git a/packages/bits-ui/src/lib/bits/accordion/components/accordion-content.svelte b/packages/bits-ui/src/lib/bits/accordion/components/accordion-content.svelte
index 455974937..b43627c5b 100644
--- a/packages/bits-ui/src/lib/bits/accordion/components/accordion-content.svelte
+++ b/packages/bits-ui/src/lib/bits/accordion/components/accordion-content.svelte
@@ -8,7 +8,7 @@
 	let {
 		child,
 		asChild,
-		ref = $bindable(),
+		ref = $bindable(null),
 		id = useId(),
 		forceMount = false,
 		children,
@@ -18,6 +18,10 @@
 	const contentState = useAccordionContent({
 		forceMount: box.with(() => forceMount),
 		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
 	});
 </script>
 
@@ -31,7 +35,7 @@
 				props: mergedProps,
 			})}
 		{:else}
-			<div {...mergedProps} bind:this={ref}>
+			<div {...mergedProps}>
 				{@render children?.()}
 			</div>
 		{/if}
diff --git a/packages/bits-ui/src/lib/bits/accordion/components/accordion-header.svelte b/packages/bits-ui/src/lib/bits/accordion/components/accordion-header.svelte
index e12000778..8a6882d50 100644
--- a/packages/bits-ui/src/lib/bits/accordion/components/accordion-header.svelte
+++ b/packages/bits-ui/src/lib/bits/accordion/components/accordion-header.svelte
@@ -3,18 +3,25 @@
 	import type { AccordionHeaderProps } from "../types.js";
 	import { useAccordionHeader } from "../accordion.svelte.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
+	import { useId } from "$lib/internal/useId.svelte.js";
 
 	let {
+		id = useId(),
 		asChild,
 		level = 2,
 		children,
 		child,
-		ref = $bindable(),
+		ref = $bindable(null),
 		...restProps
 	}: AccordionHeaderProps = $props();
 
 	const headerState = useAccordionHeader({
+		id: box.with(() => id),
 		level: box.with(() => level),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, headerState.props));
@@ -23,7 +30,7 @@
 {#if asChild}
 	{@render child?.({ props: mergedProps })}
 {:else}
-	<div {...mergedProps} bind:this={ref}>
+	<div {...mergedProps}>
 		{@render children?.()}
 	</div>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/accordion/components/accordion-item.svelte b/packages/bits-ui/src/lib/bits/accordion/components/accordion-item.svelte
index a0fb0fbb1..3033313de 100644
--- a/packages/bits-ui/src/lib/bits/accordion/components/accordion-item.svelte
+++ b/packages/bits-ui/src/lib/bits/accordion/components/accordion-item.svelte
@@ -3,20 +3,27 @@
 	import type { AccordionItemProps } from "../types.js";
 	import { useAccordionItem } from "../accordion.svelte.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
+	import { useId } from "$lib/internal/useId.svelte.js";
 
 	let {
+		id = useId(),
 		asChild,
 		disabled = false,
 		value,
 		children,
 		child,
-		ref = $bindable(),
+		ref = $bindable(null),
 		...restProps
 	}: AccordionItemProps = $props();
 
 	const itemState = useAccordionItem({
 		value: box.with(() => value),
 		disabled: box.with(() => disabled),
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, itemState.props));
@@ -25,7 +32,7 @@
 {#if asChild}
 	{@render child?.({ props: mergedProps })}
 {:else}
-	<div {...mergedProps} bind:this={ref}>
+	<div {...mergedProps}>
 		{@render children?.()}
 	</div>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/accordion/components/accordion-trigger.svelte b/packages/bits-ui/src/lib/bits/accordion/components/accordion-trigger.svelte
index 0b60990b4..fdbb43f8c 100644
--- a/packages/bits-ui/src/lib/bits/accordion/components/accordion-trigger.svelte
+++ b/packages/bits-ui/src/lib/bits/accordion/components/accordion-trigger.svelte
@@ -7,7 +7,7 @@
 	let {
 		disabled = false,
 		asChild,
-		ref = $bindable(),
+		ref = $bindable(null),
 		id = useId(),
 		children,
 		child,
@@ -17,6 +17,10 @@
 	const triggerState = useAccordionTrigger({
 		disabled: box.with(() => disabled),
 		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, triggerState.props));
@@ -25,7 +29,7 @@
 {#if asChild}
 	{@render child?.({ props: mergedProps })}
 {:else}
-	<button bind:this={ref} type="button" {...mergedProps}>
+	<button type="button" {...mergedProps}>
 		{@render children?.()}
 	</button>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/accordion/components/accordion.svelte b/packages/bits-ui/src/lib/bits/accordion/components/accordion.svelte
index 28cca6dd2..dfcc85fab 100644
--- a/packages/bits-ui/src/lib/bits/accordion/components/accordion.svelte
+++ b/packages/bits-ui/src/lib/bits/accordion/components/accordion.svelte
@@ -12,7 +12,7 @@
 		child,
 		type,
 		value = $bindable(),
-		ref = $bindable(),
+		ref = $bindable(null),
 		id = useId(),
 		onValueChange,
 		loop = true,
@@ -35,7 +35,10 @@
 		disabled: box.with(() => disabled),
 		loop: box.with(() => loop),
 		orientation: box.with(() => orientation),
-		ref: box.with(() => ref),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, rootState.props));
@@ -44,7 +47,7 @@
 {#if asChild}
 	{@render child?.({ props: mergedProps })}
 {:else}
-	<div bind:this={ref} {...mergedProps}>
+	<div {...mergedProps}>
 		{@render children?.()}
 	</div>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/checkbox/checkbox.svelte.ts b/packages/bits-ui/src/lib/bits/checkbox/checkbox.svelte.ts
index 577779a84..13321e583 100644
--- a/packages/bits-ui/src/lib/bits/checkbox/checkbox.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/checkbox/checkbox.svelte.ts
@@ -76,10 +76,14 @@ class CheckboxRootState {
 
 class CheckboxInputState {
 	root: CheckboxRootState;
-	shouldRender = $derived.by(() => this.root.name.value !== undefined);
+	shouldRender = $derived.by(() => Boolean(this.root.name.value));
 
 	constructor(root: CheckboxRootState) {
 		this.root = root;
+
+		$effect(() => {
+			console.log("shouldRender", this.shouldRender);
+		});
 	}
 
 	props = $derived.by(
diff --git a/packages/bits-ui/src/lib/bits/checkbox/components/checkbox-input.svelte b/packages/bits-ui/src/lib/bits/checkbox/components/checkbox-input.svelte
index c005f6c8d..060b977bb 100644
--- a/packages/bits-ui/src/lib/bits/checkbox/components/checkbox-input.svelte
+++ b/packages/bits-ui/src/lib/bits/checkbox/components/checkbox-input.svelte
@@ -1,9 +1,12 @@
 <script lang="ts">
+	import VisuallyHidden from "$lib/bits/utilities/visually-hidden/visually-hidden.svelte";
 	import { useCheckboxInput } from "../checkbox.svelte.js";
 
 	const inputState = useCheckboxInput();
 </script>
 
 {#if inputState.shouldRender}
-	<input {...inputState.props} type="checkbox" style="display: none !important;" />
+	<VisuallyHidden>
+		<input {...inputState.props} type="checkbox" style="display: none !important;" />
+	</VisuallyHidden>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/checkbox/components/checkbox.svelte b/packages/bits-ui/src/lib/bits/checkbox/components/checkbox.svelte
index dd32f2cd6..6dcc50ed2 100644
--- a/packages/bits-ui/src/lib/bits/checkbox/components/checkbox.svelte
+++ b/packages/bits-ui/src/lib/bits/checkbox/components/checkbox.svelte
@@ -11,7 +11,7 @@
 		children,
 		disabled = false,
 		required = false,
-		name,
+		name = undefined,
 		value = "on",
 		ref = $bindable(),
 		asChild,
diff --git a/packages/bits-ui/src/lib/bits/collapsible/collapsible.svelte.ts b/packages/bits-ui/src/lib/bits/collapsible/collapsible.svelte.ts
index c44a8737c..1098c44e5 100644
--- a/packages/bits-ui/src/lib/bits/collapsible/collapsible.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/collapsible/collapsible.svelte.ts
@@ -1,4 +1,3 @@
-import { box } from "svelte-toolbelt";
 import {
 	type ReadableBoxedValues,
 	type WritableBoxedValues,
@@ -6,8 +5,7 @@ import {
 	getAriaExpanded,
 	getDataDisabled,
 	getDataOpenClosed,
-	useId,
-	useNodeById,
+	useRefById,
 } from "$lib/internal/index.js";
 import { createContext } from "$lib/internal/createContext.js";
 
@@ -17,19 +15,30 @@ const TRIGGER_ATTR = "data-collapsible-trigger";
 
 type CollapsibleRootStateProps = WritableBoxedValues<{
 	open: boolean;
+	ref: HTMLElement | null;
 }> &
 	ReadableBoxedValues<{
 		disabled: boolean;
+		id: string;
 	}>;
 
 class CollapsibleRootState {
+	#id: CollapsibleRootStateProps["id"];
+	#ref: CollapsibleRootStateProps["ref"];
 	open: CollapsibleRootStateProps["open"];
 	disabled: CollapsibleRootStateProps["disabled"];
-	contentId = box.with(() => useId());
+	contentNode = $state<HTMLElement | null>(null);
 
 	constructor(props: CollapsibleRootStateProps) {
 		this.open = props.open;
 		this.disabled = props.disabled;
+		this.#id = props.id;
+		this.#ref = props.ref;
+
+		useRefById({
+			id: this.#id,
+			ref: this.#ref,
+		});
 	}
 
 	toggleOpen() {
@@ -40,13 +49,14 @@ class CollapsibleRootState {
 		return new CollapsibleContentState(props, this);
 	}
 
-	createTrigger() {
-		return new CollapsibleTriggerState(this);
+	createTrigger(props: CollapsibleTriggerStateProps) {
+		return new CollapsibleTriggerState(props, this);
 	}
 
 	props = $derived.by(
 		() =>
 			({
+				id: this.#id.value,
 				"data-state": getDataOpenClosed(this.open.value),
 				"data-disabled": getDataDisabled(this.disabled.value),
 				[ROOT_ATTR]: "",
@@ -57,42 +67,38 @@ class CollapsibleRootState {
 type CollapsibleContentStateProps = ReadableBoxedValues<{
 	id: string;
 	forceMount: boolean;
-}>;
+}> &
+	WritableBoxedValues<{
+		ref: HTMLElement | null;
+	}>;
 
 class CollapsibleContentState {
+	#id: CollapsibleContentStateProps["id"];
+	#ref: CollapsibleContentStateProps["ref"];
 	root: CollapsibleRootState;
 	#originalStyles: { transitionDuration: string; animationName: string } | undefined;
-	node = box<HTMLElement | null>(null);
 	#isMountAnimationPrevented = $state(false);
 	#width = $state(0);
 	#height = $state(0);
 	#forceMount: CollapsibleContentStateProps["forceMount"];
-	props = $derived.by(
-		() =>
-			({
-				id: this.root.contentId.value,
-				"data-state": getDataOpenClosed(this.root.open.value),
-				"data-disabled": getDataDisabled(this.root.disabled.value),
-				style: {
-					"--bits-collapsible-content-height": this.#height
-						? `${this.#height}px`
-						: undefined,
-					"--bits-collapsible-content-width": this.#width
-						? `${this.#width}px`
-						: undefined,
-				},
-				[CONTENT_ATTR]: "",
-			}) as const
-	);
+
 	present = $derived.by(() => this.#forceMount.value || this.root.open.value);
 
 	constructor(props: CollapsibleContentStateProps, root: CollapsibleRootState) {
 		this.root = root;
 		this.#isMountAnimationPrevented = root.open.value;
 		this.#forceMount = props.forceMount;
-		this.root.contentId = props.id;
-
-		this.node = useNodeById(this.root.contentId);
+		this.#id = props.id;
+		this.#ref = props.ref;
+
+		useRefById({
+			id: this.#id,
+			ref: this.#ref,
+			condition: () => this.present,
+			onRefChange: (node) => {
+				this.root.contentNode = node;
+			},
+		});
 
 		$effect.pre(() => {
 			const rAF = requestAnimationFrame(() => {
@@ -107,11 +113,11 @@ class CollapsibleContentState {
 		$effect(() => {
 			// eslint-disable-next-line no-unused-expressions
 			this.present;
-			const node = this.node.value;
+			const node = this.#ref.value;
 			if (!node) return;
 
 			afterTick(() => {
-				if (!this.node) return;
+				if (!this.#ref.value) return;
 				// get the dimensions of the element
 				this.#originalStyles = this.#originalStyles || {
 					transitionDuration: node.style.transitionDuration,
@@ -135,13 +141,47 @@ class CollapsibleContentState {
 			});
 		});
 	}
+
+	props = $derived.by(
+		() =>
+			({
+				id: this.#id.value,
+				"data-state": getDataOpenClosed(this.root.open.value),
+				"data-disabled": getDataDisabled(this.root.disabled.value),
+				style: {
+					"--bits-collapsible-content-height": this.#height
+						? `${this.#height}px`
+						: undefined,
+					"--bits-collapsible-content-width": this.#width
+						? `${this.#width}px`
+						: undefined,
+				},
+				[CONTENT_ATTR]: "",
+			}) as const
+	);
 }
 
+type CollapsibleTriggerStateProps = ReadableBoxedValues<{
+	id: string;
+}> &
+	WritableBoxedValues<{
+		ref: HTMLElement | null;
+	}>;
+
 class CollapsibleTriggerState {
 	#root: CollapsibleRootState;
+	#ref: CollapsibleTriggerStateProps["ref"];
+	#id: CollapsibleTriggerStateProps["id"];
 
-	constructor(root: CollapsibleRootState) {
+	constructor(props: CollapsibleTriggerStateProps, root: CollapsibleRootState) {
 		this.#root = root;
+		this.#id = props.id;
+		this.#ref = props.ref;
+
+		useRefById({
+			id: this.#id,
+			ref: this.#ref,
+		});
 	}
 
 	#onclick = () => {
@@ -151,8 +191,9 @@ class CollapsibleTriggerState {
 	props = $derived.by(
 		() =>
 			({
+				id: this.#id.value,
 				type: "button",
-				"aria-controls": this.#root.contentId.value,
+				"aria-controls": this.#root.contentNode?.id,
 				"aria-expanded": getAriaExpanded(this.#root.open.value),
 				"data-state": getDataOpenClosed(this.#root.open.value),
 				"data-disabled": getDataDisabled(this.#root.disabled.value),
@@ -171,8 +212,10 @@ export function useCollapsibleRoot(props: CollapsibleRootStateProps) {
 	return setCollapsibleRootContext(new CollapsibleRootState(props));
 }
 
-export function useCollapsibleTrigger(): CollapsibleTriggerState {
-	return getCollapsibleRootContext().createTrigger();
+export function useCollapsibleTrigger(
+	props: CollapsibleTriggerStateProps
+): CollapsibleTriggerState {
+	return getCollapsibleRootContext().createTrigger(props);
 }
 
 export function useCollapsibleContent(
diff --git a/packages/bits-ui/src/lib/bits/collapsible/components/collapsible-content.svelte b/packages/bits-ui/src/lib/bits/collapsible/components/collapsible-content.svelte
index f70208e8b..bbfad982a 100644
--- a/packages/bits-ui/src/lib/bits/collapsible/components/collapsible-content.svelte
+++ b/packages/bits-ui/src/lib/bits/collapsible/components/collapsible-content.svelte
@@ -8,7 +8,7 @@
 	let {
 		child,
 		asChild,
-		ref = $bindable(),
+		ref = $bindable(null),
 		forceMount = false,
 		children,
 		id = useId(),
@@ -18,6 +18,10 @@
 	const contentState = useCollapsibleContent({
 		id: box.with(() => id),
 		forceMount: box.with(() => forceMount),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
 	});
 </script>
 
diff --git a/packages/bits-ui/src/lib/bits/collapsible/components/collapsible-trigger.svelte b/packages/bits-ui/src/lib/bits/collapsible/components/collapsible-trigger.svelte
index 308dcabf5..5fbb95d70 100644
--- a/packages/bits-ui/src/lib/bits/collapsible/components/collapsible-trigger.svelte
+++ b/packages/bits-ui/src/lib/bits/collapsible/components/collapsible-trigger.svelte
@@ -2,10 +2,25 @@
 	import type { TriggerProps } from "../index.js";
 	import { useCollapsibleTrigger } from "../collapsible.svelte.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
+	import { useId } from "$lib/internal/useId.svelte.js";
+	import { box } from "svelte-toolbelt";
 
-	let { asChild, children, child, ref = $bindable(), ...restProps }: TriggerProps = $props();
+	let {
+		asChild,
+		children,
+		child,
+		ref = $bindable(null),
+		id = useId(),
+		...restProps
+	}: TriggerProps = $props();
 
-	const triggerState = useCollapsibleTrigger();
+	const triggerState = useCollapsibleTrigger({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
 	const mergedProps = $derived(mergeProps(restProps, triggerState.props));
 </script>
 
diff --git a/packages/bits-ui/src/lib/bits/collapsible/components/collapsible.svelte b/packages/bits-ui/src/lib/bits/collapsible/components/collapsible.svelte
index 3a3af4bb1..764063312 100644
--- a/packages/bits-ui/src/lib/bits/collapsible/components/collapsible.svelte
+++ b/packages/bits-ui/src/lib/bits/collapsible/components/collapsible.svelte
@@ -3,12 +3,14 @@
 	import type { RootProps } from "../index.js";
 	import { useCollapsibleRoot } from "../collapsible.svelte.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
+	import { useId } from "$lib/internal/useId.svelte.js";
 
 	let {
 		asChild,
 		children,
 		child,
-		ref = $bindable(),
+		id = useId(),
+		ref = $bindable(null),
 		open = $bindable(false),
 		disabled = false,
 		onOpenChange,
@@ -24,6 +26,11 @@
 			}
 		),
 		disabled: box.with(() => disabled),
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, rootState.props));
diff --git a/packages/bits-ui/src/lib/bits/dialog/components/dialog-close.svelte b/packages/bits-ui/src/lib/bits/dialog/components/dialog-close.svelte
index bcd244359..e224be16e 100644
--- a/packages/bits-ui/src/lib/bits/dialog/components/dialog-close.svelte
+++ b/packages/bits-ui/src/lib/bits/dialog/components/dialog-close.svelte
@@ -2,10 +2,25 @@
 	import { useDialogClose } from "../dialog.svelte.js";
 	import type { CloseProps } from "../index.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
+	import { useId } from "$lib/internal/useId.svelte.js";
+	import { box } from "svelte-toolbelt";
 
-	let { asChild, children, child, ref = $bindable(), ...restProps }: CloseProps = $props();
+	let {
+		asChild,
+		children,
+		child,
+		id = useId(),
+		ref = $bindable(null),
+		...restProps
+	}: CloseProps = $props();
 
-	const closeState = useDialogClose();
+	const closeState = useDialogClose({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
 
 	const mergedProps = $derived(mergeProps(restProps, closeState.props));
 </script>
@@ -13,7 +28,7 @@
 {#if asChild}
 	{@render child?.({ props: mergedProps })}
 {:else}
-	<button {...mergedProps} bind:this={ref}>
+	<button {...mergedProps}>
 		{@render children?.()}
 	</button>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/dialog/components/dialog-content.svelte b/packages/bits-ui/src/lib/bits/dialog/components/dialog-content.svelte
index d56e8e2a7..b467d5049 100644
--- a/packages/bits-ui/src/lib/bits/dialog/components/dialog-content.svelte
+++ b/packages/bits-ui/src/lib/bits/dialog/components/dialog-content.svelte
@@ -17,7 +17,7 @@
 		asChild,
 		children,
 		child,
-		ref = $bindable(),
+		ref = $bindable(null),
 		forceMount = false,
 		onDestroyAutoFocus = noop,
 		onEscapeKeydown = noop,
@@ -27,6 +27,10 @@
 
 	const contentState = useDialogContent({
 		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));
@@ -42,7 +46,7 @@
 			onDestroyAutoFocus={(e) => {
 				onDestroyAutoFocus(e);
 				if (e.defaultPrevented) return;
-				contentState.root.triggerNode?.value?.focus();
+				contentState.root.triggerNode?.focus();
 			}}
 		>
 			{#snippet focusScope({ props: focusScopeProps })}
@@ -78,7 +82,6 @@
 											pointerEvents: "auto",
 										},
 									})}
-									bind:this={ref}
 								>
 									{@render children?.()}
 								</div>
diff --git a/packages/bits-ui/src/lib/bits/dialog/components/dialog-description.svelte b/packages/bits-ui/src/lib/bits/dialog/components/dialog-description.svelte
index a0188ba56..16666ded7 100644
--- a/packages/bits-ui/src/lib/bits/dialog/components/dialog-description.svelte
+++ b/packages/bits-ui/src/lib/bits/dialog/components/dialog-description.svelte
@@ -10,12 +10,16 @@
 		asChild,
 		children,
 		child,
-		ref = $bindable(),
+		ref = $bindable(null),
 		...restProps
 	}: DescriptionProps = $props();
 
 	const descriptionState = useDialogDescription({
 		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, descriptionState.props));
@@ -24,7 +28,7 @@
 {#if asChild}
 	{@render child?.({ props: mergedProps })}
 {:else}
-	<div {...mergedProps} bind:this={ref}>
+	<div {...mergedProps}>
 		{@render children?.()}
 	</div>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/dialog/components/dialog-overlay.svelte b/packages/bits-ui/src/lib/bits/dialog/components/dialog-overlay.svelte
index 77c7ae1bf..241e9162d 100644
--- a/packages/bits-ui/src/lib/bits/dialog/components/dialog-overlay.svelte
+++ b/packages/bits-ui/src/lib/bits/dialog/components/dialog-overlay.svelte
@@ -12,12 +12,16 @@
 		asChild,
 		child,
 		children,
-		ref = $bindable(),
+		ref = $bindable(null),
 		...restProps
 	}: OverlayProps = $props();
 
 	const overlayState = useDialogOverlay({
 		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, overlayState.props));
@@ -28,7 +32,7 @@
 		{#if asChild}
 			{@render child?.({ props: mergeProps(mergedProps, { hidden: !present.value }) })}
 		{:else}
-			<div {...mergeProps(mergedProps, { hidden: !present.value })} bind:this={ref}>
+			<div {...mergeProps(mergedProps, { hidden: !present.value })}>
 				{@render children?.()}
 			</div>
 		{/if}
diff --git a/packages/bits-ui/src/lib/bits/dialog/components/dialog-title.svelte b/packages/bits-ui/src/lib/bits/dialog/components/dialog-title.svelte
index b0696be3a..06c8f07d7 100644
--- a/packages/bits-ui/src/lib/bits/dialog/components/dialog-title.svelte
+++ b/packages/bits-ui/src/lib/bits/dialog/components/dialog-title.svelte
@@ -7,7 +7,7 @@
 
 	let {
 		id = useId(),
-		ref = $bindable(),
+		ref = $bindable(null),
 		asChild,
 		child,
 		children,
@@ -18,6 +18,10 @@
 	const titleState = useDialogTitle({
 		id: box.with(() => id),
 		level: box.with(() => level),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, titleState.props));
@@ -26,7 +30,7 @@
 {#if asChild}
 	{@render child?.({ props: mergedProps })}
 {:else}
-	<div {...mergedProps} bind:this={ref}>
+	<div {...mergedProps}>
 		{@render children?.()}
 	</div>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/dialog/components/dialog-trigger.svelte b/packages/bits-ui/src/lib/bits/dialog/components/dialog-trigger.svelte
index faa4af2d9..dea61e1cf 100644
--- a/packages/bits-ui/src/lib/bits/dialog/components/dialog-trigger.svelte
+++ b/packages/bits-ui/src/lib/bits/dialog/components/dialog-trigger.svelte
@@ -7,7 +7,7 @@
 
 	let {
 		id = useId(),
-		ref = $bindable(),
+		ref = $bindable(null),
 		asChild,
 		children,
 		child,
@@ -16,6 +16,10 @@
 
 	const triggerState = useDialogTrigger({
 		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, triggerState.props));
@@ -24,7 +28,7 @@
 {#if asChild}
 	{@render child?.({ props: mergedProps })}
 {:else}
-	<button {...mergedProps} bind:this={ref}>
+	<button {...mergedProps}>
 		{@render children?.()}
 	</button>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/dialog/dialog.svelte.ts b/packages/bits-ui/src/lib/bits/dialog/dialog.svelte.ts
index eeec042dd..93a42d113 100644
--- a/packages/bits-ui/src/lib/bits/dialog/dialog.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/dialog/dialog.svelte.ts
@@ -1,8 +1,9 @@
 import { box } from "svelte-toolbelt";
 import { getAriaExpanded, getDataOpenClosed } from "$lib/internal/attrs.js";
 import type { ReadableBoxedValues, WritableBoxedValues } from "$lib/internal/box.svelte.js";
-import { useNodeById } from "$lib/internal/useNodeById.svelte.js";
+import { useRefById } from "$lib/internal/useNodeById.svelte.js";
 import { createContext } from "$lib/internal/createContext.js";
+import type { WithRefProps } from "$lib/internal/types.js";
 
 const CONTENT_ATTR = "data-dialog-content";
 const TITLE_ATTR = "data-dialog-title";
@@ -17,16 +18,14 @@ type DialogRootStateProps = WritableBoxedValues<{
 
 class DialogRootState {
 	open: DialogRootStateProps["open"];
-	triggerNode = box<HTMLElement | null>(null);
-	titleNode = box<HTMLElement | null>(null);
-	contentNode = box<HTMLElement | null>(null);
-	contentId = $derived(this.contentNode.value ? this.contentNode.value.id : undefined);
-	titleId = $derived(this.titleNode.value ? this.titleNode.value.id : undefined);
-	triggerId = $derived(this.triggerNode.value ? this.triggerNode.value.id : undefined);
-	descriptionNode = box<HTMLElement | null>(null);
-	descriptionId = $derived(
-		this.descriptionNode.value ? this.descriptionNode.value.id : undefined
-	);
+	triggerNode = $state<HTMLElement | null>(null);
+	titleNode = $state<HTMLElement | null>(null);
+	contentNode = $state<HTMLElement | null>(null);
+	descriptionNode = $state<HTMLElement | null>(null);
+	contentId = $derived(this.contentNode ? this.contentNode.id : undefined);
+	titleId = $derived(this.titleNode ? this.titleNode.id : undefined);
+	triggerId = $derived(this.triggerNode ? this.triggerNode.id : undefined);
+	descriptionId = $derived(this.descriptionNode ? this.descriptionNode.id : undefined);
 
 	constructor(props: DialogRootStateProps) {
 		this.open = props.open;
@@ -62,8 +61,8 @@ class DialogRootState {
 		return new DialogDescriptionState(props, this);
 	}
 
-	createClose() {
-		return new DialogCloseState(this);
+	createClose(props: DialogCloseStateProps) {
+		return new DialogCloseState(props, this);
 	}
 
 	sharedProps = $derived.by(
@@ -74,18 +73,25 @@ class DialogRootState {
 	);
 }
 
-type DialogTriggerStateProps = ReadableBoxedValues<{
-	id: string;
-}>;
+type DialogTriggerStateProps = WithRefProps;
 
 class DialogTriggerState {
 	#id: DialogTriggerStateProps["id"];
+	#ref: DialogTriggerStateProps["ref"];
 	#root: DialogRootState;
 
 	constructor(props: DialogTriggerStateProps, root: DialogRootState) {
 		this.#id = props.id;
 		this.#root = root;
-		this.#root.triggerNode = useNodeById(this.#id);
+		this.#ref = props.ref;
+
+		useRefById({
+			id: this.#id,
+			ref: this.#ref,
+			onRefChange: (node) => {
+				this.#root.triggerNode = node;
+			},
+		});
 	}
 
 	#onclick = () => {
@@ -106,11 +112,22 @@ class DialogTriggerState {
 	);
 }
 
+type DialogCloseStateProps = WithRefProps;
 class DialogCloseState {
+	#id: DialogCloseStateProps["id"];
+	#ref: DialogCloseStateProps["ref"];
 	#root: DialogRootState;
 
-	constructor(root: DialogRootState) {
+	constructor(props: DialogCloseStateProps, root: DialogRootState) {
 		this.#root = root;
+		this.#ref = props.ref;
+		this.#id = props.id;
+
+		useRefById({
+			id: this.#id,
+			ref: this.#ref,
+			condition: () => this.#root.open.value,
+		});
 	}
 
 	#onclick = () => {
@@ -120,6 +137,7 @@ class DialogCloseState {
 	props = $derived.by(
 		() =>
 			({
+				id: this.#id.value,
 				[CLOSE_ATTR]: "",
 				onclick: this.#onclick,
 				...this.#root.sharedProps,
@@ -127,21 +145,31 @@ class DialogCloseState {
 	);
 }
 
-type DialogTitleStateProps = ReadableBoxedValues<{
-	id: string;
-	level: 1 | 2 | 3 | 4 | 5 | 6;
-}>;
-
+type DialogTitleStateProps = WithRefProps<
+	ReadableBoxedValues<{
+		level: 1 | 2 | 3 | 4 | 5 | 6;
+	}>
+>;
 class DialogTitleState {
 	#id: DialogTitleStateProps["id"];
+	#ref: DialogTitleStateProps["ref"];
 	#root: DialogRootState;
 	#level: DialogTitleStateProps["level"];
 
 	constructor(props: DialogTitleStateProps, root: DialogRootState) {
 		this.#id = props.id;
 		this.#root = root;
-		this.#root.titleNode = useNodeById(this.#id);
+		this.#ref = props.ref;
 		this.#level = props.level;
+
+		useRefById({
+			id: this.#id,
+			ref: this.#ref,
+			onRefChange: (node) => {
+				this.#root.titleNode = node;
+			},
+			condition: () => this.#root.open.value,
+		});
 	}
 
 	props = $derived.by(
@@ -156,18 +184,26 @@ class DialogTitleState {
 	);
 }
 
-type DialogDescriptionStateProps = ReadableBoxedValues<{
-	id: string;
-}>;
+type DialogDescriptionStateProps = WithRefProps;
 
 class DialogDescriptionState {
 	#id: DialogDescriptionStateProps["id"];
+	#ref: DialogDescriptionStateProps["ref"];
 	#root: DialogRootState;
 
 	constructor(props: DialogDescriptionStateProps, root: DialogRootState) {
 		this.#id = props.id;
 		this.#root = root;
-		this.#root.descriptionNode = useNodeById(this.#id);
+		this.#ref = props.ref;
+
+		useRefById({
+			id: this.#id,
+			ref: this.#ref,
+			condition: () => this.#root.open.value,
+			onRefChange: (node) => {
+				this.#root.descriptionNode = node;
+			},
+		});
 	}
 
 	props = $derived.by(
@@ -180,18 +216,26 @@ class DialogDescriptionState {
 	);
 }
 
-type DialogContentStateProps = ReadableBoxedValues<{
-	id: string;
-}>;
+type DialogContentStateProps = WithRefProps;
 
 class DialogContentState {
 	#id: DialogContentStateProps["id"];
+	#ref: DialogContentStateProps["ref"];
 	root: DialogRootState;
 
 	constructor(props: DialogContentStateProps, root: DialogRootState) {
 		this.#id = props.id;
 		this.root = root;
-		this.root.contentNode = useNodeById(this.#id);
+		this.#ref = props.ref;
+
+		useRefById({
+			id: this.#id,
+			ref: this.#ref,
+			condition: () => this.root.open.value,
+			onRefChange: (node) => {
+				this.root.contentNode = node;
+			},
+		});
 	}
 
 	props = $derived.by(
@@ -207,17 +251,23 @@ class DialogContentState {
 	);
 }
 
-type DialogOverlayStateProps = ReadableBoxedValues<{
-	id: string;
-}>;
+type DialogOverlayStateProps = WithRefProps;
 
 class DialogOverlayState {
 	#id: DialogOverlayStateProps["id"];
+	#ref: DialogOverlayStateProps["ref"];
 	root: DialogRootState;
 
 	constructor(props: DialogOverlayStateProps, root: DialogRootState) {
 		this.#id = props.id;
+		this.#ref = props.ref;
 		this.root = root;
+
+		useRefById({
+			id: this.#id,
+			ref: this.#ref,
+			condition: () => this.root.open.value,
+		});
 	}
 
 	props = $derived.by(
@@ -256,6 +306,6 @@ export function useDialogDescription(props: DialogDescriptionStateProps) {
 	return getDialogRootContext().createDescription(props);
 }
 
-export function useDialogClose() {
-	return getDialogRootContext().createClose();
+export function useDialogClose(props: DialogCloseStateProps) {
+	return getDialogRootContext().createClose(props);
 }
diff --git a/packages/bits-ui/src/lib/bits/label/components/label.svelte b/packages/bits-ui/src/lib/bits/label/components/label.svelte
index 232bc0b26..d55b995d5 100644
--- a/packages/bits-ui/src/lib/bits/label/components/label.svelte
+++ b/packages/bits-ui/src/lib/bits/label/components/label.svelte
@@ -2,24 +2,33 @@
 	import type { RootProps } from "../index.js";
 	import { setLabelRootState } from "../label.svelte.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
+	import { useId } from "$lib/internal/useId.svelte.js";
+	import { box } from "svelte-toolbelt";
 
 	let {
 		asChild,
 		children,
 		child,
-		ref = $bindable(),
+		id = useId(),
+		ref = $bindable(null),
 		for: forProp,
 		...restProps
 	}: RootProps = $props();
 
-	const rootState = setLabelRootState();
+	const rootState = setLabelRootState({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
 	const mergedProps = $derived(mergeProps(restProps, rootState.props, { for: forProp }));
 </script>
 
 {#if asChild}
 	{@render child?.({ props: mergedProps })}
 {:else}
-	<label bind:this={ref} {...mergedProps} for={forProp}>
+	<label {...mergedProps} for={forProp}>
 		{@render children?.()}
 	</label>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/label/label.svelte.ts b/packages/bits-ui/src/lib/bits/label/label.svelte.ts
index ce14760ff..27cf5e8e7 100644
--- a/packages/bits-ui/src/lib/bits/label/label.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/label/label.svelte.ts
@@ -1,7 +1,21 @@
+import type { WithRefProps } from "$lib/internal/types.js";
+import { useRefById } from "$lib/internal/useNodeById.svelte.js";
+
 const ROOT_ATTR = "data-label-root";
 
+type LabelRootStateProps = WithRefProps;
 class LabelRootState {
-	constructor() {}
+	#id: LabelRootStateProps["id"];
+	#ref: LabelRootStateProps["ref"];
+	constructor(props: LabelRootStateProps) {
+		this.#id = props.id;
+		this.#ref = props.ref;
+
+		useRefById({
+			id: this.#id,
+			ref: this.#ref,
+		});
+	}
 
 	#onmousedown = (e: MouseEvent) => {
 		if (e.detail > 1) e.preventDefault();
@@ -13,6 +27,6 @@ class LabelRootState {
 	});
 }
 
-export function setLabelRootState() {
-	return new LabelRootState();
+export function setLabelRootState(props: LabelRootStateProps) {
+	return new LabelRootState(props);
 }
diff --git a/packages/bits-ui/src/lib/bits/menu/components/menu-checkbox-item.svelte b/packages/bits-ui/src/lib/bits/menu/components/menu-checkbox-item.svelte
index 0f2e53bda..09ec9e807 100644
--- a/packages/bits-ui/src/lib/bits/menu/components/menu-checkbox-item.svelte
+++ b/packages/bits-ui/src/lib/bits/menu/components/menu-checkbox-item.svelte
@@ -50,7 +50,7 @@
 {#if asChild}
 	{@render child?.({ props: mergedProps })}
 {:else}
-	<div {...mergedProps} bind:this={ref}>
+	<div {...mergedProps}>
 		{@render children?.({ checked })}
 	</div>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/menu/components/menu-content.svelte b/packages/bits-ui/src/lib/bits/menu/components/menu-content.svelte
index 48bfd3021..e626ff8f5 100644
--- a/packages/bits-ui/src/lib/bits/menu/components/menu-content.svelte
+++ b/packages/bits-ui/src/lib/bits/menu/components/menu-content.svelte
@@ -75,7 +75,7 @@
 		{#if asChild}
 			{@render child?.({ props: finalProps })}
 		{:else}
-			<div {...finalProps} bind:this={ref}>
+			<div {...finalProps}>
 				{@render children?.()}
 			</div>
 		{/if}
diff --git a/packages/bits-ui/src/lib/bits/menu/components/menu-group.svelte b/packages/bits-ui/src/lib/bits/menu/components/menu-group.svelte
index 4f7906793..94c584392 100644
--- a/packages/bits-ui/src/lib/bits/menu/components/menu-group.svelte
+++ b/packages/bits-ui/src/lib/bits/menu/components/menu-group.svelte
@@ -12,7 +12,7 @@
 {#if asChild}
 	{@render child?.({ props: mergedProps })}
 {:else}
-	<div {...mergedProps} bind:this={ref}>
+	<div {...mergedProps}>
 		{@render children?.()}
 	</div>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/menu/components/menu-item.svelte b/packages/bits-ui/src/lib/bits/menu/components/menu-item.svelte
index b742a2190..c1ead1fcb 100644
--- a/packages/bits-ui/src/lib/bits/menu/components/menu-item.svelte
+++ b/packages/bits-ui/src/lib/bits/menu/components/menu-item.svelte
@@ -33,7 +33,7 @@
 {#if asChild}
 	{@render child?.({ props: mergedProps })}
 {:else}
-	<div {...mergedProps} bind:this={ref}>
+	<div {...mergedProps}>
 		{@render children?.()}
 	</div>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/menu/components/menu-label.svelte b/packages/bits-ui/src/lib/bits/menu/components/menu-label.svelte
index d825fe6b7..df5e4301a 100644
--- a/packages/bits-ui/src/lib/bits/menu/components/menu-label.svelte
+++ b/packages/bits-ui/src/lib/bits/menu/components/menu-label.svelte
@@ -12,7 +12,7 @@
 {#if asChild}
 	{@render child?.({ props: mergedProps })}
 {:else}
-	<div {...mergedProps} bind:this={ref}>
+	<div {...mergedProps}>
 		{@render children?.()}
 	</div>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/menu/components/menu-radio-group.svelte b/packages/bits-ui/src/lib/bits/menu/components/menu-radio-group.svelte
index f960091d4..9fba450f6 100644
--- a/packages/bits-ui/src/lib/bits/menu/components/menu-radio-group.svelte
+++ b/packages/bits-ui/src/lib/bits/menu/components/menu-radio-group.svelte
@@ -40,7 +40,7 @@
 {#if asChild}
 	{@render child?.({ props: mergedProps })}
 {:else}
-	<div {...mergedProps} bind:this={ref}>
+	<div {...mergedProps}>
 		{@render children?.()}
 	</div>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/menu/components/menu-separator.svelte b/packages/bits-ui/src/lib/bits/menu/components/menu-separator.svelte
index cb3dd3bf4..bf77712d1 100644
--- a/packages/bits-ui/src/lib/bits/menu/components/menu-separator.svelte
+++ b/packages/bits-ui/src/lib/bits/menu/components/menu-separator.svelte
@@ -13,7 +13,7 @@
 {#if asChild}
 	{@render child?.({ props: mergedProps })}
 {:else}
-	<div {...mergedProps} bind:this={ref}>
+	<div {...mergedProps}>
 		{@render children?.()}
 	</div>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/menu/components/menu-sub-content.svelte b/packages/bits-ui/src/lib/bits/menu/components/menu-sub-content.svelte
index 4e98aa960..a0ee1043b 100644
--- a/packages/bits-ui/src/lib/bits/menu/components/menu-sub-content.svelte
+++ b/packages/bits-ui/src/lib/bits/menu/components/menu-sub-content.svelte
@@ -7,9 +7,10 @@
 	import { mergeProps } from "$lib/internal/mergeProps.js";
 	import PopperLayer from "$lib/bits/utilities/popper-layer/popper-layer.svelte";
 	import { noop } from "$lib/internal/callbacks.js";
-	import { isHTMLElement } from "$lib/internal/is.js";
+	import { isElement, isHTMLElement } from "$lib/internal/is.js";
 	import { afterTick } from "$lib/internal/afterTick.js";
 	import Mounted from "$lib/bits/utilities/mounted.svelte";
+	import { activeElement } from "runed";
 
 	let {
 		id = useId(),
@@ -62,11 +63,13 @@
 		})
 	);
 
+	const { onMountAutoFocus: _, ...rest } = $derived(mergedProps);
+
 	function onMountAutoFocus(e: Event) {
 		afterTick(() => {
 			e.preventDefault();
 			if (subContentState.parentMenu.root.isUsingKeyboard.value) {
-				const subContentEl = document.getElementById(id);
+				const subContentEl = subContentState.parentMenu.contentNode;
 				subContentEl?.focus();
 			}
 		});
@@ -81,6 +84,7 @@
 	{...mergedProps}
 	{interactOutsideBehavior}
 	{escapeKeydownBehavior}
+	{onMountAutoFocus}
 	present={subContentState.parentMenu.open.value || forceMount}
 	onInteractOutside={(e) => {
 		onInteractOutside(e);
@@ -97,7 +101,6 @@
 		// We prevent closing when the trigger is focused to avoid triggering a re-open animation
 		// on pointer interaction.
 		if (!isHTMLElement(e.target)) return;
-
 		if (e.target.id !== subContentState.parentMenu.triggerNode?.id) {
 			subContentState.parentMenu.onClose();
 		}
@@ -110,7 +113,7 @@
 		{#if asChild}
 			{@render child?.({ props: finalProps })}
 		{:else}
-			<div {...finalProps} bind:this={ref}>
+			<div {...finalProps}>
 				{@render children?.()}
 			</div>
 		{/if}
diff --git a/packages/bits-ui/src/lib/bits/menu/components/menu-sub-trigger.svelte b/packages/bits-ui/src/lib/bits/menu/components/menu-sub-trigger.svelte
index ce9a6b5f6..c1fca9960 100644
--- a/packages/bits-ui/src/lib/bits/menu/components/menu-sub-trigger.svelte
+++ b/packages/bits-ui/src/lib/bits/menu/components/menu-sub-trigger.svelte
@@ -31,7 +31,7 @@
 	{#if asChild}
 		{@render child?.({ props: mergedProps })}
 	{:else}
-		<div {...mergedProps} bind:this={ref}>
+		<div {...mergedProps}>
 			{@render children?.()}
 		</div>
 	{/if}
diff --git a/packages/bits-ui/src/lib/bits/menu/components/menu-trigger.svelte b/packages/bits-ui/src/lib/bits/menu/components/menu-trigger.svelte
index 2bfdb342d..db05f98e7 100644
--- a/packages/bits-ui/src/lib/bits/menu/components/menu-trigger.svelte
+++ b/packages/bits-ui/src/lib/bits/menu/components/menu-trigger.svelte
@@ -32,7 +32,7 @@
 	{#if asChild}
 		{@render child?.({ props: mergedProps })}
 	{:else}
-		<button {...mergedProps} bind:this={ref}>
+		<button {...mergedProps}>
 			{@render children?.()}
 		</button>
 	{/if}
diff --git a/packages/bits-ui/src/lib/bits/menu/menu.svelte.ts b/packages/bits-ui/src/lib/bits/menu/menu.svelte.ts
index 68b902159..7a59d1ff8 100644
--- a/packages/bits-ui/src/lib/bits/menu/menu.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/menu/menu.svelte.ts
@@ -1,4 +1,4 @@
-import { box, type WritableBox } from "svelte-toolbelt";
+import { box } from "svelte-toolbelt";
 import { tick } from "svelte";
 import { focusFirst } from "../utilities/focus-scope/utils.js";
 import {
@@ -10,7 +10,6 @@ import {
 	type Side,
 	getCheckedState,
 	isMouseEvent,
-	isPointerInGraceArea,
 } from "./utils.js";
 import {
 	type ReadableBoxedValues,
@@ -38,6 +37,7 @@ import { createContext } from "$lib/internal/createContext.js";
 import type { Direction } from "$lib/shared/index.js";
 import { afterTick } from "$lib/internal/afterTick.js";
 import { useRefById } from "$lib/internal/useNodeById.svelte.js";
+import { isPointerInGraceArea, makeHullFromElements } from "$lib/internal/polygon.js";
 
 const TRIGGER_ATTR = "data-menu-trigger";
 const CONTENT_ATTR = "data-menu-content";
@@ -209,7 +209,12 @@ class MenuContentState {
 		useRefById({
 			id: this.#id,
 			ref: this.contentRef,
-			condition: () => this.isMounted.value,
+			condition: () => this.parentMenu.open.value,
+			onRefChange: (node) => {
+				if (this.parentMenu.contentNode !== node) {
+					this.parentMenu.contentNode = node;
+				}
+			},
 		});
 
 		onDestroyEffect(() => {
@@ -295,7 +300,6 @@ class MenuContentState {
 
 	#onfocus = () => {
 		if (!this.parentMenu.root.isUsingKeyboard.value) return;
-
 		afterTick(() => this.rovingFocusGroup.focusFirstCandidate());
 	};
 
@@ -547,6 +551,14 @@ class MenuSubTriggerState {
 		onDestroyEffect(() => {
 			this.#clearOpenTimer();
 		});
+
+		useRefById({
+			id: this.#item.id,
+			ref: this.#item.ref,
+			onRefChange: (node) => {
+				this.#submenu.triggerNode = node;
+			},
+		});
 	}
 
 	#clearOpenTimer() {
@@ -572,27 +584,15 @@ class MenuSubTriggerState {
 		if (!isMouseEvent(e)) return;
 		this.#clearOpenTimer();
 
-		const contentNode = this.#content.parentMenu.contentNode;
+		const contentNode = this.#submenu.contentNode;
+		const subTriggerNode = this.#item.ref.value;
 
-		const contentRect = contentNode?.getBoundingClientRect();
-		if (contentRect?.width) {
+		if (contentNode && subTriggerNode) {
+			const polygon = makeHullFromElements([subTriggerNode, contentNode]);
 			const side = contentNode?.dataset.side as Side;
 
-			const rightSide = side === "right";
-			const bleed = rightSide ? -5 : +5;
-			const contentNearEdge = contentRect[rightSide ? "left" : "right"];
-			const contentFarEdge = contentRect[rightSide ? "right" : "left"];
-
 			this.#content.onPointerGraceIntentChange({
-				area: [
-					// Apply a bleed on clientX to ensure that our exit point is
-					// consistently within polygon bounds
-					{ x: e.clientX + bleed, y: e.clientY },
-					{ x: contentNearEdge, y: contentRect.top },
-					{ x: contentFarEdge, y: contentRect.top },
-					{ x: contentFarEdge, y: contentRect.bottom },
-					{ x: contentNearEdge, y: contentRect.bottom },
-				],
+				area: polygon,
 				side,
 			});
 
@@ -639,44 +639,36 @@ class MenuSubTriggerState {
 	};
 
 	props = $derived.by(() =>
-		mergeProps(this.#item.props, {
-			"aria-haspopup": "menu",
-			"aria-expanded": getAriaExpanded(this.#submenu.open.value),
-			"data-state": getDataOpenClosed(this.#submenu.open.value),
-			"aria-controls": this.#submenu.open.value ? this.#submenu.contentId.value : undefined,
-			[SUB_TRIGGER_ATTR]: "",
-			onclick: this.#onclick,
-			onpointermove: this.#onpointermove,
-			onpointerleave: this.#onpointerleave,
-			onkeydown: this.#onkeydown,
-		} as const)
+		mergeProps(
+			{
+				"aria-haspopup": "menu",
+				"aria-expanded": getAriaExpanded(this.#submenu.open.value),
+				"data-state": getDataOpenClosed(this.#submenu.open.value),
+				"aria-controls": this.#submenu.open.value
+					? this.#submenu.contentId.value
+					: undefined,
+				[SUB_TRIGGER_ATTR]: "",
+				onclick: this.#onclick,
+				onpointermove: this.#onpointermove,
+				onpointerleave: this.#onpointerleave,
+				onkeydown: this.#onkeydown,
+			},
+			this.#item.props
+		)
 	);
 }
 
 type MenuCheckboxItemStateProps = WritableBoxedValues<{
 	checked: boolean | "indeterminate";
-	ref: HTMLElement | null;
-}> &
-	ReadableBoxedValues<{
-		id: string;
-	}>;
+}>;
 
 class MenuCheckboxItemState {
-	#id: MenuCheckboxItemStateProps["id"];
 	#item: MenuItemState;
 	#checked: MenuCheckboxItemStateProps["checked"];
-	#ref: MenuCheckboxItemStateProps["ref"];
 
 	constructor(props: MenuCheckboxItemStateProps, item: MenuItemState) {
 		this.#item = item;
 		this.#checked = props.checked;
-		this.#ref = props.ref;
-		this.#id = props.id;
-
-		useRefById({
-			id: this.#id,
-			ref: this.#ref,
-		});
 	}
 
 	toggleChecked() {
diff --git a/packages/bits-ui/src/lib/bits/menu/utils.ts b/packages/bits-ui/src/lib/bits/menu/utils.ts
index 524658396..008d60358 100644
--- a/packages/bits-ui/src/lib/bits/menu/utils.ts
+++ b/packages/bits-ui/src/lib/bits/menu/utils.ts
@@ -38,30 +38,6 @@ export interface GraceIntent {
 	side: Side;
 }
 
-// Determine if a point is inside of a polygon.
-// Based on https://github.com/substack/point-in-polygon
-export function isPointInPolygon(point: Point, polygon: Polygon) {
-	const { x, y } = point;
-	let inside = false;
-	for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
-		const xi = polygon[i]!.x;
-		const yi = polygon[i]!.y;
-		const xj = polygon[j]!.x;
-		const yj = polygon[j]!.y;
-
-		const intersect = yi > y !== yj > y && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi;
-		if (intersect) inside = !inside;
-	}
-
-	return inside;
-}
-
-export function isPointerInGraceArea(event: PointerEvent, area?: Polygon) {
-	if (!area) return false;
-	const cursorPos = { x: event.clientX, y: event.clientY };
-	return isPointInPolygon(cursorPos, area);
-}
-
 export function isMouseEvent(event: PointerEvent) {
 	return event.pointerType === "mouse";
 }
diff --git a/packages/bits-ui/src/lib/bits/pagination/components/pagination-next-button.svelte b/packages/bits-ui/src/lib/bits/pagination/components/pagination-next-button.svelte
index 7edfcfe27..e2940d775 100644
--- a/packages/bits-ui/src/lib/bits/pagination/components/pagination-next-button.svelte
+++ b/packages/bits-ui/src/lib/bits/pagination/components/pagination-next-button.svelte
@@ -9,7 +9,7 @@
 		asChild,
 		child,
 		children,
-		ref = $bindable(),
+		ref = $bindable(null),
 		type = "button",
 		...restProps
 	}: NextButtonProps = $props();
@@ -17,6 +17,10 @@
 	const nextButtonState = usePaginationButton({
 		type: "next",
 		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, nextButtonState.props, { type }));
@@ -25,7 +29,7 @@
 {#if asChild}
 	{@render child?.({ props: mergedProps })}
 {:else}
-	<button bind:this={ref} {...mergedProps}>
+	<button {...mergedProps}>
 		{@render children?.()}
 	</button>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/pagination/components/pagination-page.svelte b/packages/bits-ui/src/lib/bits/pagination/components/pagination-page.svelte
index 09b40e989..1cf81b581 100644
--- a/packages/bits-ui/src/lib/bits/pagination/components/pagination-page.svelte
+++ b/packages/bits-ui/src/lib/bits/pagination/components/pagination-page.svelte
@@ -11,13 +11,17 @@
 		child,
 		children,
 		type = "button",
-		ref = $bindable(),
+		ref = $bindable(null),
 		...restProps
 	}: PageProps = $props();
 
 	const pageState = usePaginationPage({
 		id: box.with(() => id),
 		page: box.with(() => page),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, pageState.props, { type }));
@@ -26,7 +30,7 @@
 {#if asChild}
 	{@render child?.({ props: mergedProps })}
 {:else}
-	<button bind:this={ref} {...mergedProps}>
+	<button {...mergedProps}>
 		{#if children}
 			{@render children?.()}
 		{:else}
diff --git a/packages/bits-ui/src/lib/bits/pagination/components/pagination-prev-button.svelte b/packages/bits-ui/src/lib/bits/pagination/components/pagination-prev-button.svelte
index cb9211ff2..ed80431aa 100644
--- a/packages/bits-ui/src/lib/bits/pagination/components/pagination-prev-button.svelte
+++ b/packages/bits-ui/src/lib/bits/pagination/components/pagination-prev-button.svelte
@@ -9,7 +9,7 @@
 		asChild,
 		child,
 		children,
-		ref = $bindable(),
+		ref = $bindable(null),
 		type = "button",
 		...restProps
 	}: PrevButtonProps = $props();
@@ -17,6 +17,10 @@
 	const prevButtonState = usePaginationButton({
 		type: "prev",
 		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, prevButtonState.props, { type }));
@@ -25,7 +29,7 @@
 {#if asChild}
 	{@render child?.({ props: mergedProps })}
 {:else}
-	<button bind:this={ref} {...mergedProps}>
+	<button {...mergedProps}>
 		{@render children?.()}
 	</button>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/pagination/components/pagination.svelte b/packages/bits-ui/src/lib/bits/pagination/components/pagination.svelte
index 0b575b375..0a22666cb 100644
--- a/packages/bits-ui/src/lib/bits/pagination/components/pagination.svelte
+++ b/packages/bits-ui/src/lib/bits/pagination/components/pagination.svelte
@@ -9,7 +9,7 @@
 		count,
 		perPage = 1,
 		page = $bindable(1),
-		ref = $bindable(),
+		ref = $bindable(null),
 		siblingCount = 1,
 		onPageChange,
 		asChild,
@@ -35,6 +35,10 @@
 		loop: box.with(() => loop),
 		siblingCount: box.with(() => siblingCount),
 		orientation: box.with(() => orientation),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
 	});
 
 	const mergedProps = $derived({
@@ -47,7 +51,7 @@
 {#if asChild}
 	{@render child?.({ props: mergedProps, pages: rootState.pages, range: rootState.range })}
 {:else}
-	<div bind:this={ref} {...mergedProps}>
+	<div {...mergedProps}>
 		{@render children?.({ pages: rootState.pages, range: rootState.range })}
 	</div>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/pagination/pagination.svelte.ts b/packages/bits-ui/src/lib/bits/pagination/pagination.svelte.ts
index 221c1c405..bedb48197 100644
--- a/packages/bits-ui/src/lib/bits/pagination/pagination.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/pagination/pagination.svelte.ts
@@ -2,12 +2,13 @@ import { box } from "svelte-toolbelt";
 import type { Page, PageItem } from "./types.js";
 import {
 	type ReadableBoxedValues,
+	type WithRefProps,
 	type WritableBoxedValues,
 	getDataOrientation,
 	getDirectionalKeys,
 	getElemDirection,
 	kbd,
-	useNodeById,
+	useRefById,
 } from "$lib/internal/index.js";
 import type { Orientation } from "$lib/shared/index.js";
 import { createContext } from "$lib/internal/createContext.js";
@@ -17,22 +18,23 @@ const PAGE_ATTR = "data-pagination-page";
 const PREV_ATTR = "data-pagination-prev";
 const NEXT_ATTR = "data-pagination-next";
 
-type PaginationRootStateProps = ReadableBoxedValues<{
-	id: string;
-	count: number;
-	perPage: number;
-	siblingCount: number;
-	orientation: Orientation;
-	loop: boolean;
-}> &
-	WritableBoxedValues<{
-		page: number;
-	}>;
+type PaginationRootStateProps = WithRefProps<
+	ReadableBoxedValues<{
+		count: number;
+		perPage: number;
+		siblingCount: number;
+		orientation: Orientation;
+		loop: boolean;
+	}> &
+		WritableBoxedValues<{
+			page: number;
+		}>
+>;
 
 class PaginationRootState {
 	id: PaginationRootStateProps["id"];
+	ref: PaginationRootStateProps["ref"];
 	orientation: PaginationRootStateProps["orientation"];
-	node = box<HTMLElement | null>(null);
 	count: PaginationRootStateProps["count"];
 	perPage: PaginationRootStateProps["perPage"];
 	siblingCount: PaginationRootStateProps["siblingCount"];
@@ -56,11 +58,16 @@ class PaginationRootState {
 		this.id = props.id;
 		this.perPage = props.perPage;
 		this.count = props.count;
-		this.node = useNodeById(this.id);
 		this.siblingCount = props.siblingCount;
 		this.page = props.page;
 		this.orientation = props.orientation;
 		this.loop = props.loop;
+		this.ref = props.ref;
+
+		useRefById({
+			id: this.id,
+			ref: this.ref,
+		});
 	}
 
 	setPage(page: number) {
@@ -68,13 +75,13 @@ class PaginationRootState {
 	}
 
 	getPageTriggerNodes() {
-		const node = this.node.value;
+		const node = this.ref.value;
 		if (!node) return [];
 		return Array.from(node.querySelectorAll<HTMLElement>("[data-pagination-page]"));
 	}
 
 	getButtonNode(type: "prev" | "next") {
-		const node = this.node.value;
+		const node = this.ref.value;
 		if (!node) return;
 		return node.querySelector<HTMLElement>(`[data-pagination-${type}]`);
 	}
@@ -109,22 +116,28 @@ class PaginationRootState {
 // PAGE
 //
 
-type PaginationPageStateProps = ReadableBoxedValues<{
-	id: string;
-	page: Page;
-}>;
+type PaginationPageStateProps = WithRefProps<
+	ReadableBoxedValues<{
+		page: Page;
+	}>
+>;
 
 class PaginationPage {
 	#id: PaginationPageStateProps["id"];
+	#ref: PaginationPageStateProps["ref"];
 	#root: PaginationRootState;
-	#node = box<HTMLElement | null>(null);
 	page: PaginationPageStateProps["page"];
 
 	constructor(props: PaginationPageStateProps, root: PaginationRootState) {
 		this.#root = root;
 		this.#id = props.id;
 		this.page = props.page;
-		this.#node = useNodeById(this.#id);
+		this.#ref = props.ref;
+
+		useRefById({
+			id: this.#id,
+			ref: this.#ref,
+		});
 	}
 
 	#onclick = () => {
@@ -132,7 +145,7 @@ class PaginationPage {
 	};
 
 	#onkeydown = (e: KeyboardEvent) => {
-		handleTriggerKeydown(e, this.#node.value, this.#root);
+		handleTriggerKeydown(e, this.#ref.value, this.#root);
 	};
 
 	props = $derived.by(
@@ -154,23 +167,26 @@ class PaginationPage {
 // NEXT/PREV BUTTON
 //
 
-type PaginationButtonStateProps = ReadableBoxedValues<{
-	id: string;
-}> & {
+type PaginationButtonStateProps = WithRefProps<{
 	type: "prev" | "next";
-};
+}>;
 
 class PaginationButtonState {
 	id: PaginationButtonStateProps["id"];
+	#ref: PaginationButtonStateProps["ref"];
 	#root: PaginationRootState;
-	node = box<HTMLElement | null>(null);
 	type = $state() as PaginationButtonStateProps["type"];
 
 	constructor(props: PaginationButtonStateProps, root: PaginationRootState) {
 		this.#root = root;
 		this.id = props.id;
-		this.node = useNodeById(this.id);
 		this.type = props.type;
+		this.#ref = props.ref;
+
+		useRefById({
+			id: this.id,
+			ref: this.#ref,
+		});
 	}
 
 	#onclick = () => {
@@ -178,7 +194,7 @@ class PaginationButtonState {
 	};
 
 	#onkeydown = (e: KeyboardEvent) => {
-		handleTriggerKeydown(e, this.node.value, this.#root);
+		handleTriggerKeydown(e, this.#ref.value, this.#root);
 	};
 
 	props = $derived.by(
@@ -212,7 +228,7 @@ function handleTriggerKeydown(
 	node: HTMLElement | null,
 	root: PaginationRootState
 ) {
-	if (!node || !root.node.value) return;
+	if (!node || !root.ref.value) return;
 	const items = root.getPageTriggerNodes();
 	const nextButton = root.getButtonNode("next");
 	const prevButton = root.getButtonNode("prev");
@@ -226,7 +242,7 @@ function handleTriggerKeydown(
 
 	const currentIndex = items.indexOf(node);
 
-	const dir = getElemDirection(root.node.value);
+	const dir = getElemDirection(root.ref.value);
 
 	const { nextKey, prevKey } = getDirectionalKeys(dir, root.orientation.value);
 
diff --git a/packages/bits-ui/src/lib/bits/popover/components/popover-close.svelte b/packages/bits-ui/src/lib/bits/popover/components/popover-close.svelte
index c5f69ea98..27077068d 100644
--- a/packages/bits-ui/src/lib/bits/popover/components/popover-close.svelte
+++ b/packages/bits-ui/src/lib/bits/popover/components/popover-close.svelte
@@ -2,17 +2,32 @@
 	import type { CloseProps } from "../index.js";
 	import { usePopoverClose } from "../popover.svelte.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
+	import { useId } from "$lib/internal/useId.svelte.js";
+	import { box } from "svelte-toolbelt";
 
-	let { asChild, child, children, ref = $bindable(), ...restProps }: CloseProps = $props();
+	let {
+		asChild,
+		child,
+		children,
+		id = useId(),
+		ref = $bindable(null),
+		...restProps
+	}: CloseProps = $props();
 
-	const closeState = usePopoverClose();
+	const closeState = usePopoverClose({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
 	const mergedProps = $derived(mergeProps(restProps, closeState.props));
 </script>
 
 {#if asChild}
 	{@render child?.({ props: mergedProps })}
 {:else}
-	<button {...mergedProps} bind:this={ref}>
+	<button {...mergedProps}>
 		{@render children?.()}
 	</button>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/popover/components/popover-content.svelte b/packages/bits-ui/src/lib/bits/popover/components/popover-content.svelte
index e2137e86b..159b92367 100644
--- a/packages/bits-ui/src/lib/bits/popover/components/popover-content.svelte
+++ b/packages/bits-ui/src/lib/bits/popover/components/popover-content.svelte
@@ -9,7 +9,7 @@
 		asChild,
 		child,
 		children,
-		ref = $bindable(),
+		ref = $bindable(null),
 		id = useId(),
 		forceMount = false,
 		onDestroyAutoFocus = noop,
@@ -21,6 +21,10 @@
 
 	const contentState = usePopoverContent({
 		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
 	});
 </script>
 
@@ -42,7 +46,7 @@
 		onDestroyAutoFocus(e);
 		if (e.defaultPrevented) return;
 		e.preventDefault();
-		contentState.root.triggerNode?.value?.focus();
+		contentState.root.triggerNode?.focus();
 	}}
 	trapped
 	{loop}
@@ -52,7 +56,7 @@
 		{#if asChild}
 			{@render child?.({ props: mergedProps })}
 		{:else}
-			<div {...mergedProps} bind:this={ref}>
+			<div {...mergedProps}>
 				{@render children?.()}
 			</div>
 		{/if}
diff --git a/packages/bits-ui/src/lib/bits/popover/components/popover-trigger.svelte b/packages/bits-ui/src/lib/bits/popover/components/popover-trigger.svelte
index ed809926a..ed01df803 100644
--- a/packages/bits-ui/src/lib/bits/popover/components/popover-trigger.svelte
+++ b/packages/bits-ui/src/lib/bits/popover/components/popover-trigger.svelte
@@ -10,13 +10,17 @@
 		children,
 		child,
 		id = useId(),
-		ref = $bindable(),
+		ref = $bindable(null),
 		type = "button",
 		...restProps
 	}: TriggerProps = $props();
 
 	const triggerState = usePopoverTrigger({
 		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, triggerState.props, { type }));
@@ -26,7 +30,7 @@
 	{#if asChild}
 		{@render child?.({ props: mergedProps })}
 	{:else}
-		<button {...mergedProps} bind:this={ref}>
+		<button {...mergedProps}>
 			{@render children?.()}
 		</button>
 	{/if}
diff --git a/packages/bits-ui/src/lib/bits/popover/popover.svelte.ts b/packages/bits-ui/src/lib/bits/popover/popover.svelte.ts
index 3fd6d60be..0bef4599c 100644
--- a/packages/bits-ui/src/lib/bits/popover/popover.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/popover/popover.svelte.ts
@@ -1,9 +1,10 @@
 import { box } from "svelte-toolbelt";
 import type { ReadableBoxedValues, WritableBoxedValues } from "$lib/internal/box.svelte.js";
-import { useNodeById } from "$lib/internal/useNodeById.svelte.js";
+import { useRefById } from "$lib/internal/useNodeById.svelte.js";
 import { kbd } from "$lib/internal/kbd.js";
 import { getAriaExpanded, getDataOpenClosed } from "$lib/internal/attrs.js";
 import { createContext } from "$lib/internal/createContext.js";
+import type { WithRefProps } from "$lib/internal/types.js";
 
 type PopoverRootStateProps = WritableBoxedValues<{
 	open: boolean;
@@ -11,8 +12,8 @@ type PopoverRootStateProps = WritableBoxedValues<{
 
 class PopoverRootState {
 	open: PopoverRootStateProps["open"];
-	contentId = box.with<string | undefined>(() => undefined);
-	triggerNode = box<HTMLElement | null>(null);
+	contentNode = $state<HTMLElement | null>(null);
+	triggerNode = $state<HTMLElement | null>(null);
 
 	constructor(props: PopoverRootStateProps) {
 		this.open = props.open;
@@ -35,23 +36,30 @@ class PopoverRootState {
 		return new PopoverContentState(props, this);
 	}
 
-	createClose() {
-		return new PopoverCloseState(this);
+	createClose(props: PopoverCloseStateProps) {
+		return new PopoverCloseState(props, this);
 	}
 }
 
-type PopoverTriggerStateProps = ReadableBoxedValues<{
-	id: string;
-}>;
+type PopoverTriggerStateProps = WithRefProps;
 
 class PopoverTriggerState {
 	#id: PopoverTriggerStateProps["id"];
+	#ref: PopoverTriggerStateProps["ref"];
 	#root: PopoverRootState;
 
 	constructor(props: PopoverTriggerStateProps, root: PopoverRootState) {
 		this.#id = props.id;
 		this.#root = root;
-		this.#root.triggerNode = useNodeById(this.#id);
+		this.#ref = props.ref;
+
+		useRefById({
+			id: this.#id,
+			ref: this.#ref,
+			onRefChange: (node) => {
+				this.#root.triggerNode = node;
+			},
+		});
 	}
 
 	#onclick = () => {
@@ -65,8 +73,8 @@ class PopoverTriggerState {
 	};
 
 	#getAriaControls() {
-		if (this.#root.open.value && this.#root.contentId.value) {
-			return this.#root.contentId.value;
+		if (this.#root.open.value && this.#root.contentNode?.id) {
+			return this.#root.contentNode.id;
 		}
 		return undefined;
 	}
@@ -87,16 +95,22 @@ class PopoverTriggerState {
 	);
 }
 
-type PopoverContentStateProps = ReadableBoxedValues<{
-	id: string;
-}>;
+type PopoverContentStateProps = WithRefProps;
 class PopoverContentState {
 	#id: PopoverContentStateProps["id"];
+	#ref: PopoverContentStateProps["ref"];
 	root: PopoverRootState;
 
 	constructor(props: PopoverContentStateProps, root: PopoverRootState) {
 		this.#id = props.id;
 		this.root = root;
+		this.#ref = props.ref;
+
+		useRefById({
+			id: this.#id,
+			ref: this.#ref,
+			condition: () => this.root.open.value,
+		});
 	}
 
 	props = $derived.by(() => ({
@@ -107,11 +121,23 @@ class PopoverContentState {
 	}));
 }
 
+type PopoverCloseStateProps = WithRefProps;
+
 class PopoverCloseState {
+	#id: PopoverCloseStateProps["id"];
+	#ref: PopoverCloseStateProps["ref"];
 	#root: PopoverRootState;
 
-	constructor(root: PopoverRootState) {
+	constructor(props: PopoverCloseStateProps, root: PopoverRootState) {
 		this.#root = root;
+		this.#id = props.id;
+		this.#ref = props.ref;
+
+		useRefById({
+			id: this.#id,
+			ref: this.#ref,
+			condition: () => this.#root.open.value,
+		});
 	}
 
 	#onclick = () => {
@@ -124,12 +150,16 @@ class PopoverCloseState {
 		this.#root.close();
 	};
 
-	props = $derived({
-		onclick: this.#onclick,
-		onkeydown: this.#onkeydown,
-		type: "button",
-		"data-popover-close": "",
-	} as const);
+	props = $derived.by(
+		() =>
+			({
+				id: this.#id.value,
+				onclick: this.#onclick,
+				onkeydown: this.#onkeydown,
+				type: "button",
+				"data-popover-close": "",
+			}) as const
+	);
 }
 
 //
@@ -151,6 +181,6 @@ export function usePopoverContent(props: PopoverContentStateProps) {
 	return getPopoverRootContext().createContent(props);
 }
 
-export function usePopoverClose() {
-	return getPopoverRootContext().createClose();
+export function usePopoverClose(props: PopoverCloseStateProps) {
+	return getPopoverRootContext().createClose(props);
 }
diff --git a/packages/bits-ui/src/lib/bits/progress/components/progress.svelte b/packages/bits-ui/src/lib/bits/progress/components/progress.svelte
index b035f055e..95e2d9bdb 100644
--- a/packages/bits-ui/src/lib/bits/progress/components/progress.svelte
+++ b/packages/bits-ui/src/lib/bits/progress/components/progress.svelte
@@ -3,6 +3,7 @@
 	import type { RootProps } from "../index.js";
 	import { useProgressRootState } from "../progress.svelte.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
+	import { useId } from "$lib/internal/useId.svelte.js";
 
 	let {
 		asChild,
@@ -10,13 +11,19 @@
 		children,
 		value = 0,
 		max = 100,
-		ref = $bindable(),
+		id = useId(),
+		ref = $bindable(null),
 		...restProps
 	}: RootProps = $props();
 
 	const rootState = useProgressRootState({
 		value: box.with(() => value),
 		max: box.with(() => max),
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, rootState.props));
@@ -25,7 +32,7 @@
 {#if asChild}
 	{@render child?.({ props: mergedProps })}
 {:else}
-	<div bind:this={ref} {...mergedProps}>
+	<div {...mergedProps}>
 		{@render children?.()}
 	</div>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/progress/progress.svelte.ts b/packages/bits-ui/src/lib/bits/progress/progress.svelte.ts
index 4cce5fd32..d0fcba11b 100644
--- a/packages/bits-ui/src/lib/bits/progress/progress.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/progress/progress.svelte.ts
@@ -1,19 +1,32 @@
 import type { ReadableBoxedValues } from "$lib/internal/box.svelte.js";
+import type { WithRefProps } from "$lib/internal/types.js";
+import { useRefById } from "$lib/internal/useNodeById.svelte.js";
 
 const ROOT_ATTR = "data-progress-root";
 
-type ProgressRootStateProps = ReadableBoxedValues<{
-	value: number | null;
-	max: number;
-}>;
+type ProgressRootStateProps = WithRefProps<
+	ReadableBoxedValues<{
+		value: number | null;
+		max: number;
+	}>
+>;
 
 class ProgressRootState {
+	#id: ProgressRootStateProps["id"];
+	#ref: ProgressRootStateProps["ref"];
 	#value: ProgressRootStateProps["value"];
 	#max: ProgressRootStateProps["max"];
 
 	constructor(props: ProgressRootStateProps) {
 		this.#value = props.value;
 		this.#max = props.max;
+		this.#id = props.id;
+		this.#ref = props.ref;
+
+		useRefById({
+			id: this.#id,
+			ref: this.#ref,
+		});
 	}
 
 	props = $derived.by(
diff --git a/packages/bits-ui/src/lib/bits/radio-group/components/radio-group-item.svelte b/packages/bits-ui/src/lib/bits/radio-group/components/radio-group-item.svelte
index bf1a4c72e..4d4261fca 100644
--- a/packages/bits-ui/src/lib/bits/radio-group/components/radio-group-item.svelte
+++ b/packages/bits-ui/src/lib/bits/radio-group/components/radio-group-item.svelte
@@ -11,7 +11,7 @@
 		child,
 		value,
 		disabled = false,
-		ref = $bindable(),
+		ref = $bindable(null),
 		style = {},
 		...restProps
 	}: ItemProps = $props();
@@ -20,6 +20,10 @@
 		value: box.with(() => value),
 		disabled: box.with(() => disabled),
 		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
 	});
 
 	const mergedProps = $derived({
@@ -32,7 +36,7 @@
 {#if asChild}
 	{@render child?.({ props: mergedProps, checked: itemState.checked })}
 {:else}
-	<button bind:this={ref} {...mergedProps}>
+	<button {...mergedProps}>
 		{@render children?.({ checked: itemState.checked })}
 	</button>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/radio-group/components/radio-group.svelte b/packages/bits-ui/src/lib/bits/radio-group/components/radio-group.svelte
index 85dca2420..ae68b08f3 100644
--- a/packages/bits-ui/src/lib/bits/radio-group/components/radio-group.svelte
+++ b/packages/bits-ui/src/lib/bits/radio-group/components/radio-group.svelte
@@ -3,16 +3,15 @@
 	import type { RootProps } from "../index.js";
 	import { useRadioGroupRoot } from "../radio-group.svelte.js";
 	import RadioGroupInput from "./radio-group-input.svelte";
-	import { styleToString, useId } from "$lib/internal/index.js";
+	import { mergeProps, styleToString, useId } from "$lib/internal/index.js";
 
 	let {
 		disabled = false,
 		asChild,
 		children,
 		child,
-		style,
 		value = $bindable(""),
-		ref = $bindable(),
+		ref = $bindable(null),
 		orientation = "vertical",
 		loop = true,
 		name = undefined,
@@ -36,19 +35,19 @@
 				onValueChange?.(v);
 			}
 		),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
 	});
 
-	const mergedProps = $derived({
-		...restProps,
-		...rootState.props,
-		style: styleToString(style),
-	});
+	const mergedProps = $derived(mergeProps(restProps, rootState.props));
 </script>
 
 {#if asChild}
 	{@render child?.({ props: mergedProps })}
 {:else}
-	<div bind:this={ref} {...mergedProps}>
+	<div {...mergedProps}>
 		{@render children?.()}
 	</div>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/radio-group/radio-group.svelte.ts b/packages/bits-ui/src/lib/bits/radio-group/radio-group.svelte.ts
index 9bdac7524..2611c5259 100644
--- a/packages/bits-ui/src/lib/bits/radio-group/radio-group.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/radio-group/radio-group.svelte.ts
@@ -1,14 +1,13 @@
-import type { WritableBox } from "svelte-toolbelt";
 import {
-	type EventCallback,
 	type ReadableBoxedValues,
+	type WithRefProps,
 	type WritableBoxedValues,
 	getAriaChecked,
 	getAriaRequired,
 	getDataDisabled,
 	srOnlyStyles,
 	styleToString,
-	useNodeById,
+	useRefById,
 } from "$lib/internal/index.js";
 import type { Orientation } from "$lib/shared/index.js";
 import { type UseRovingFocusReturn, useRovingFocus } from "$lib/internal/useRovingFocus.svelte.js";
@@ -17,19 +16,19 @@ import { createContext } from "$lib/internal/createContext.js";
 const ROOT_ATTR = "data-radio-group-root";
 const ITEM_ATTR = "data-radio-group-item";
 
-type RadioGroupRootStateProps = ReadableBoxedValues<{
-	id: string;
-	disabled: boolean;
-	required: boolean;
-	loop: boolean;
-	orientation: Orientation;
-	name: string | undefined;
-}> &
-	WritableBoxedValues<{ value: string }>;
-
+type RadioGroupRootStateProps = WithRefProps<
+	ReadableBoxedValues<{
+		disabled: boolean;
+		required: boolean;
+		loop: boolean;
+		orientation: Orientation;
+		name: string | undefined;
+	}> &
+		WritableBoxedValues<{ value: string }>
+>;
 class RadioGroupRootState {
 	id: RadioGroupRootStateProps["id"];
-	node: WritableBox<HTMLElement | null>;
+	ref: RadioGroupRootStateProps["ref"];
 	disabled: RadioGroupRootStateProps["disabled"];
 	required: RadioGroupRootStateProps["required"];
 	loop: RadioGroupRootStateProps["loop"];
@@ -46,13 +45,18 @@ class RadioGroupRootState {
 		this.orientation = props.orientation;
 		this.name = props.name;
 		this.value = props.value;
-		this.node = useNodeById(this.id);
+		this.ref = props.ref;
 		this.rovingFocusGroup = useRovingFocus({
 			rootNodeId: this.id,
 			candidateSelector: ITEM_ATTR,
 			loop: this.loop,
 			orientation: this.orientation,
 		});
+
+		useRefById({
+			id: this.id,
+			ref: this.ref,
+		});
 	}
 
 	isChecked(value: string) {
@@ -88,15 +92,16 @@ class RadioGroupRootState {
 // RADIO GROUP ITEM
 //
 
-type RadioGroupItemStateProps = ReadableBoxedValues<{
-	disabled: boolean;
-	value: string;
-	id: string;
-}>;
+type RadioGroupItemStateProps = WithRefProps<
+	ReadableBoxedValues<{
+		disabled: boolean;
+		value: string;
+	}>
+>;
 
 class RadioGroupItemState {
 	#id: RadioGroupItemStateProps["id"];
-	#node: WritableBox<HTMLElement | null>;
+	#ref: RadioGroupItemStateProps["ref"];
 	#root: RadioGroupRootState;
 	#disabled: RadioGroupItemStateProps["disabled"];
 	#value: RadioGroupItemStateProps["value"];
@@ -109,8 +114,12 @@ class RadioGroupItemState {
 		this.#value = props.value;
 		this.#root = root;
 		this.#id = props.id;
+		this.#ref = props.ref;
 
-		this.#node = useNodeById(this.#id);
+		useRefById({
+			id: this.#id,
+			ref: this.#ref,
+		});
 	}
 
 	#onclick = () => {
@@ -122,10 +131,10 @@ class RadioGroupItemState {
 	};
 
 	#onkeydown = (e: KeyboardEvent) => {
-		this.#root.rovingFocusGroup.handleKeydown(this.#node.value, e);
+		this.#root.rovingFocusGroup.handleKeydown(this.#ref.value, e);
 	};
 
-	#tabIndex = $derived.by(() => this.#root.rovingFocusGroup.getTabIndex(this.#node.value).value);
+	#tabIndex = $derived.by(() => this.#root.rovingFocusGroup.getTabIndex(this.#ref.value));
 
 	props = $derived.by(
 		() =>
diff --git a/packages/bits-ui/src/lib/internal/polygon.ts b/packages/bits-ui/src/lib/internal/polygon.ts
new file mode 100644
index 000000000..75bc2d6e7
--- /dev/null
+++ b/packages/bits-ui/src/lib/internal/polygon.ts
@@ -0,0 +1,127 @@
+/*
+ * Convex hull algorithm - Library (TypeScript)
+ *
+ * Copyright (c) 2021 Project Nayuki
+ * https://www.nayuki.io/page/convex-hull-algorithm
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program (see COPYING.txt and COPYING.LESSER.txt).
+ * If not, see <http://www.gnu.org/licenses/>.
+ */
+
+export interface Point {
+	x: number;
+	y: number;
+}
+
+export type Polygon = Array<Point>;
+
+// Returns a new array of points representing the convex hull of
+// the given set of points. The convex hull excludes collinear points.
+// This algorithm runs in O(n log n) time.
+export function makeHull<P extends Point>(points: Readonly<Array<P>>): Array<P> {
+	const newPoints: Array<P> = points.slice();
+	newPoints.sort(POINT_COMPARATOR);
+	return makeHullPresorted(newPoints);
+}
+
+// Returns the convex hull, assuming that each points[i] <= points[i + 1]. Runs in O(n) time.
+export function makeHullPresorted<P extends Point>(points: Readonly<Array<P>>): Array<P> {
+	if (points.length <= 1) return points.slice();
+
+	// Andrew's monotone chain algorithm. Positive y coordinates correspond to "up"
+	// as per the mathematical convention, instead of "down" as per the computer
+	// graphics convention. This doesn't affect the correctness of the result.
+
+	const upperHull: Array<P> = [];
+	for (let i = 0; i < points.length; i++) {
+		const p: P = points[i]!;
+		while (upperHull.length >= 2) {
+			const q: P = upperHull[upperHull.length - 1]!;
+			const r: P = upperHull[upperHull.length - 2]!;
+			if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) upperHull.pop();
+			else break;
+		}
+		upperHull.push(p);
+	}
+	upperHull.pop();
+
+	const lowerHull: Array<P> = [];
+	for (let i = points.length - 1; i >= 0; i--) {
+		const p: P = points[i]!;
+		while (lowerHull.length >= 2) {
+			const q: P = lowerHull[lowerHull.length - 1]!;
+			const r: P = lowerHull[lowerHull.length - 2]!;
+			if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) lowerHull.pop();
+			else break;
+		}
+		lowerHull.push(p);
+	}
+	lowerHull.pop();
+
+	if (
+		upperHull.length == 1 &&
+		lowerHull.length == 1 &&
+		upperHull[0]!.x == lowerHull[0]!.x &&
+		upperHull[0]!.y == lowerHull[0]!.y
+	)
+		return upperHull;
+	else return upperHull.concat(lowerHull);
+}
+
+export function POINT_COMPARATOR(a: Point, b: Point): number {
+	if (a.x < b.x) return -1;
+	else if (a.x > b.x) return +1;
+	else if (a.y < b.y) return -1;
+	else if (a.y > b.y) return +1;
+	else return 0;
+}
+
+export function getPointsFromEl(el: HTMLElement): Array<Point> {
+	const rect = el.getBoundingClientRect();
+	return [
+		{ x: rect.left, y: rect.top },
+		{ x: rect.right, y: rect.top },
+		{ x: rect.right, y: rect.bottom },
+		{ x: rect.left, y: rect.bottom },
+	];
+}
+
+export function makeHullFromElements(els: Array<HTMLElement>): Array<Point> {
+	const points = els.flatMap((el) => getPointsFromEl(el));
+	return makeHull(points);
+}
+
+export function pointInPolygon(point: Point, polygon: Polygon) {
+	let inside = false;
+	for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+		const xi = polygon[i]!.x;
+		const yi = polygon[i]!.y;
+		const xj = polygon[j]!.x;
+		const yj = polygon[j]!.y;
+
+		const intersect =
+			yi > point.y !== yj > point.y &&
+			point.x < ((xj - xi) * (point.y - yi)) / (yj - yi) + xi;
+		if (intersect) inside = !inside;
+	}
+	return inside;
+}
+
+export function isPointerInGraceArea(
+	e: Pick<PointerEvent, "clientX" | "clientY">,
+	area?: Polygon
+): boolean {
+	if (!area) return false;
+	return pointInPolygon({ x: e.clientX, y: e.clientY }, area);
+}
diff --git a/packages/bits-ui/src/lib/internal/types.ts b/packages/bits-ui/src/lib/internal/types.ts
index 520c10e53..2267971e1 100644
--- a/packages/bits-ui/src/lib/internal/types.ts
+++ b/packages/bits-ui/src/lib/internal/types.ts
@@ -11,7 +11,7 @@ import type {
 	SVGAttributes,
 } from "svelte/elements";
 import type { TransitionConfig } from "svelte/transition";
-import type { Box } from "./box.svelte.js";
+import type { Box, ReadableBoxedValues, WritableBoxedValues } from "./box.svelte.js";
 import type { StyleProperties } from "$lib/shared/index.js";
 
 export type ObjectVariation<T> = T extends object ? T : never;
@@ -150,7 +150,7 @@ export type DefaultProps<Props, Ref> = {
 	asChild?: never;
 	child?: never;
 	children?: Snippet;
-	ref?: Ref;
+	ref?: Ref | null;
 	style?: StyleProperties;
 } & Omit<Props, "child" | "asChild">;
 
@@ -185,3 +185,7 @@ export type Fn = () => void;
 export type AnyFn = (...args: any[]) => any;
 
 export type ValueOf<T> = T[keyof T];
+
+export type WithRefProps<T = {}> = T &
+	ReadableBoxedValues<{ id: string }> &
+	WritableBoxedValues<{ ref: HTMLElement | null }>;
diff --git a/packages/bits-ui/src/tests/accordion/Accordion.spec.ts b/packages/bits-ui/src/tests/accordion/Accordion.spec.ts
index 5c53c0058..f6cb3c3bc 100644
--- a/packages/bits-ui/src/tests/accordion/Accordion.spec.ts
+++ b/packages/bits-ui/src/tests/accordion/Accordion.spec.ts
@@ -1,15 +1,16 @@
 /* eslint-disable ts/no-explicit-any */
-import { render, waitFor } from "@testing-library/svelte/svelte5";
+import { queryByTestId, render, waitFor } from "@testing-library/svelte/svelte5";
 import { userEvent } from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
 import { tick } from "svelte";
-import { getTestKbd } from "../utils.js";
+import { getTestKbd, setupUserEvents } from "../utils.js";
 import AccordionSingleTest from "./AccordionSingleTest.svelte";
 import AccordionMultiTest from "./AccordionMultiTest.svelte";
 import AccordionTestIsolated from "./AccordionTestIsolated.svelte";
 import AccordionSingleTestControlledSvelte from "./AccordionSingleTestControlled.svelte";
 import AccordionMultiTestControlled from "./AccordionMultiTestControlled.svelte";
+import { sleep } from "$lib/internal/sleep.js";
 
 export type Item = {
 	value: string;
@@ -80,7 +81,7 @@ describe("accordion - single", () => {
 	});
 
 	it("has expected data attributes", async () => {
-		const user = userEvent.setup();
+		const user = setupUserEvents();
 		const { getByTestId } = render(AccordionSingleTest as any, { items: itemsWithDisabled });
 		const itemEls = items.map((item) => getByTestId(`${item.value}-item`));
 		const triggerEls = items.map((item) => getByTestId(`${item.value}-trigger`));
@@ -100,7 +101,7 @@ describe("accordion - single", () => {
 	});
 
 	it("disables everything when the `disabled` prop is true", async () => {
-		const user = userEvent.setup();
+		const user = setupUserEvents();
 		const { getByTestId } = render(AccordionSingleTest as any, {
 			items,
 			disabled: true,
@@ -121,7 +122,7 @@ describe("accordion - single", () => {
 	});
 
 	it("displays content when an item is expanded", async () => {
-		const user = userEvent.setup();
+		const user = setupUserEvents();
 		const { getByTestId } = render(AccordionSingleTest as any, { items });
 
 		for (const item of items) {
@@ -139,7 +140,7 @@ describe("accordion - single", () => {
 	});
 
 	it("expands only one item at a time when `multiple` is false", async () => {
-		const user = userEvent.setup();
+		const user = setupUserEvents();
 		const { getByTestId } = render(AccordionSingleTest as any, { items });
 
 		for (const item of items) {
@@ -161,7 +162,7 @@ describe("accordion - single", () => {
 	});
 
 	it("expands when the trigger is focused and `Enter` key is pressed", async () => {
-		const user = userEvent.setup();
+		const user = setupUserEvents();
 		const { getByTestId } = render(AccordionSingleTest as any, {
 			items,
 		});
@@ -182,7 +183,7 @@ describe("accordion - single", () => {
 	});
 
 	it("expands when the trigger is focused and `Space` key is pressed", async () => {
-		const user = userEvent.setup();
+		const user = setupUserEvents();
 		const { getByTestId } = render(AccordionSingleTest as any, {
 			items,
 		});
@@ -203,7 +204,7 @@ describe("accordion - single", () => {
 	});
 
 	it("focuses the next item when `ArrowDown` key is pressed", async () => {
-		const user = userEvent.setup();
+		const user = setupUserEvents();
 		const { getByTestId } = render(AccordionSingleTest as any, { items });
 
 		const triggers = items.map((item) => getByTestId(`${item.value}-trigger`));
@@ -219,7 +220,7 @@ describe("accordion - single", () => {
 	});
 
 	it("focuses the previous item when the `ArrowUp` key is pressed", async () => {
-		const user = userEvent.setup();
+		const user = setupUserEvents();
 		const { getByTestId } = render(AccordionSingleTest as any, { items });
 
 		const triggers = items.map((item) => getByTestId(`${item.value}-trigger`));
@@ -235,7 +236,7 @@ describe("accordion - single", () => {
 	});
 
 	it("focuses the first item when the `Home` key is pressed", async () => {
-		const user = userEvent.setup();
+		const user = setupUserEvents();
 		const { getByTestId } = render(AccordionSingleTest as any, { items });
 
 		const triggers = items.map((item) => getByTestId(`${item.value}-trigger`));
@@ -248,7 +249,7 @@ describe("accordion - single", () => {
 	});
 
 	it("focuses the last item when the `End` key is pressed", async () => {
-		const user = userEvent.setup();
+		const user = setupUserEvents();
 		const { getByTestId } = render(AccordionSingleTest as any, { items });
 
 		const triggers = items.map((item) => getByTestId(`${item.value}-trigger`));
@@ -261,7 +262,7 @@ describe("accordion - single", () => {
 	});
 
 	it("respects the `disabled` prop for items", async () => {
-		const user = userEvent.setup();
+		const user = setupUserEvents();
 		const { getByTestId } = render(AccordionSingleTest as any, { items: itemsWithDisabled });
 
 		const triggers = items.map((item) => getByTestId(`${item.value}-trigger`));
@@ -289,7 +290,7 @@ describe("accordion - single", () => {
 	});
 
 	it("updates the `bind:value` prop when the value changes", async () => {
-		const user = userEvent.setup();
+		const user = setupUserEvents();
 		const { getByTestId } = render(AccordionSingleTestControlledSvelte as any, { items });
 		const trigger = getByTestId("item-1-trigger");
 
@@ -298,12 +299,11 @@ describe("accordion - single", () => {
 		expect(value).toHaveTextContent("");
 
 		await user.click(trigger);
-
 		expect(value).toHaveTextContent("item-1");
 	});
 
 	it('handles programatic changes to the "value" prop', async () => {
-		const user = userEvent.setup();
+		const user = setupUserEvents();
 		const { getByTestId } = render(AccordionSingleTestControlledSvelte as any, { items });
 		const updateButton = getByTestId("update-value");
 		const value = getByTestId("value");
@@ -314,7 +314,6 @@ describe("accordion - single", () => {
 		expect(itemTwoItem).toHaveAttribute("data-state", "closed");
 
 		await user.click(updateButton);
-
 		expect(value).toHaveTextContent("item-2");
 		expect(itemTwoItem).toHaveAttribute("data-state", "open");
 	});
@@ -331,7 +330,7 @@ describe("accordion - multiple", () => {
 	});
 
 	it("has expected data attributes", async () => {
-		const user = userEvent.setup();
+		const user = setupUserEvents();
 		const { getByTestId } = render(AccordionMultiTest as any, { items: itemsWithDisabled });
 		const itemEls = items.map((item) => getByTestId(`${item.value}-item`));
 		const triggerEls = items.map((item) => getByTestId(`${item.value}-trigger`));
@@ -350,7 +349,7 @@ describe("accordion - multiple", () => {
 	});
 
 	it("disables everything when the `disabled` prop is true", async () => {
-		const user = userEvent.setup();
+		const user = setupUserEvents();
 		const { getByTestId } = render(AccordionMultiTest as any, {
 			items,
 			disabled: true,
@@ -371,7 +370,7 @@ describe("accordion - multiple", () => {
 	});
 
 	it("displays content when an item is expanded", async () => {
-		const user = userEvent.setup();
+		const user = setupUserEvents();
 		const { getByTestId } = render(AccordionMultiTest as any, { items });
 
 		for (const item of items) {
@@ -384,12 +383,13 @@ describe("accordion - multiple", () => {
 			await user.click(trigger);
 			const contentAfter = getByTestId(`${item.value}-content`);
 			expect(contentAfter).toHaveTextContent(item.content);
-			expect(itemEl).toHaveAttribute("data-state", "open");
+
+			await waitFor(() => expect(itemEl).toHaveAttribute("data-state", "open"));
 		}
 	});
 
 	it("expands multiple items", async () => {
-		const user = userEvent.setup();
+		const user = setupUserEvents();
 		const { getByTestId } = render(AccordionMultiTest as any, {
 			items,
 		});
@@ -412,7 +412,7 @@ describe("accordion - multiple", () => {
 	});
 
 	it("expands when the trigger is focused and `Enter` key is pressed", async () => {
-		const user = userEvent.setup();
+		const user = setupUserEvents();
 		const { getByTestId } = render(AccordionMultiTest as any, {
 			items,
 		});
@@ -433,7 +433,7 @@ describe("accordion - multiple", () => {
 	});
 
 	it("expands when the trigger is focused and `Space` key is pressed", async () => {
-		const user = userEvent.setup();
+		const user = setupUserEvents();
 		const { getByTestId } = render(AccordionMultiTest as any, {
 			items,
 		});
@@ -447,6 +447,7 @@ describe("accordion - multiple", () => {
 			expect(content).not.toBeVisible();
 			trigger.focus();
 			await user.keyboard(kbd.SPACE);
+			await sleep(19);
 			const contentAfter = getByTestId(`${item.value}-content`);
 			expect(contentAfter).toHaveTextContent(item.content);
 			expect(itemEl).toHaveAttribute("data-state", "open");
@@ -454,7 +455,7 @@ describe("accordion - multiple", () => {
 	});
 
 	it("focuses the next item when `ArrowDown` key is pressed", async () => {
-		const user = userEvent.setup();
+		const user = setupUserEvents();
 		const { getByTestId } = render(AccordionMultiTest as any, { items });
 
 		const triggers = items.map((item) => getByTestId(`${item.value}-trigger`));
@@ -470,7 +471,7 @@ describe("accordion - multiple", () => {
 	});
 
 	it("focuses the previous item when the `ArrowUp` key is pressed", async () => {
-		const user = userEvent.setup();
+		const user = setupUserEvents();
 		const { getByTestId } = render(AccordionMultiTest as any, { items });
 
 		const triggers = items.map((item) => getByTestId(`${item.value}-trigger`));
@@ -486,7 +487,7 @@ describe("accordion - multiple", () => {
 	});
 
 	it("focuses the first item when the `Home` key is pressed", async () => {
-		const user = userEvent.setup();
+		const user = setupUserEvents();
 		const { getByTestId } = render(AccordionMultiTest as any, { items });
 
 		const triggers = items.map((item) => getByTestId(`${item.value}-trigger`));
@@ -499,7 +500,7 @@ describe("accordion - multiple", () => {
 	});
 
 	it("focuses the last item when the `End` key is pressed", async () => {
-		const user = userEvent.setup();
+		const user = setupUserEvents();
 		const { getByTestId } = render(AccordionMultiTest as any, { items });
 
 		const triggers = items.map((item) => getByTestId(`${item.value}-trigger`));
@@ -512,7 +513,7 @@ describe("accordion - multiple", () => {
 	});
 
 	it("respects the `disabled` prop for items", async () => {
-		const user = userEvent.setup();
+		const user = setupUserEvents();
 		const { getByTestId } = render(AccordionMultiTest as any, { items: itemsWithDisabled });
 
 		const triggers = items.map((item) => getByTestId(`${item.value}-trigger`));
@@ -540,8 +541,10 @@ describe("accordion - multiple", () => {
 	});
 
 	it("updates the `bind:value` prop when the value changes", async () => {
-		const user = userEvent.setup();
-		const { getByTestId } = render(AccordionMultiTestControlled as any, { items });
+		const user = setupUserEvents();
+		const { getByTestId, queryByTestId } = render(AccordionMultiTestControlled as any, {
+			items,
+		});
 		const trigger = getByTestId("item-1-trigger");
 
 		const value = getByTestId("value");
@@ -549,13 +552,14 @@ describe("accordion - multiple", () => {
 		expect(value).toHaveTextContent("");
 
 		await user.click(trigger);
-
-		expect(value).toHaveTextContent("item-1");
+		expect(queryByTestId("value")).toHaveTextContent("item-1");
 	});
 
 	it('handles programatic changes to the "value" prop', async () => {
-		const user = userEvent.setup();
-		const { getByTestId } = render(AccordionMultiTestControlled as any, { items });
+		const user = setupUserEvents();
+		const { getByTestId, queryByTestId } = render(AccordionMultiTestControlled as any, {
+			items,
+		});
 		const updateButton = getByTestId("update-value");
 		const value = getByTestId("value");
 
@@ -566,7 +570,7 @@ describe("accordion - multiple", () => {
 
 		await user.click(updateButton);
 
-		expect(value).toHaveTextContent("item-2");
+		expect(queryByTestId("value")).toHaveTextContent("item-2");
 		expect(itemTwoItem).toHaveAttribute("data-state", "open");
 	});
 });
diff --git a/packages/bits-ui/src/tests/checkbox/Checkbox.spec.ts b/packages/bits-ui/src/tests/checkbox/Checkbox.spec.ts
index ebc0afb4b..1575261a0 100644
--- a/packages/bits-ui/src/tests/checkbox/Checkbox.spec.ts
+++ b/packages/bits-ui/src/tests/checkbox/Checkbox.spec.ts
@@ -1,16 +1,15 @@
 import { render } from "@testing-library/svelte/svelte5";
-import { userEvent } from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
 import { tick } from "svelte";
-import { getTestKbd } from "../utils.js";
+import { getTestKbd, setupUserEvents } from "../utils.js";
 import CheckboxTest from "./CheckboxTest.svelte";
 import type { Checkbox } from "$lib/index.js";
 
 const kbd = getTestKbd();
 
 function setup(props?: Checkbox.RootProps) {
-	const user = userEvent.setup();
+	const user = setupUserEvents();
 	const returned = render(CheckboxTest, props);
 	const root = returned.getByTestId("root");
 	const input = document.querySelector("input") as HTMLInputElement;
@@ -34,7 +33,7 @@ describe("checkbox", () => {
 	});
 
 	it("doesn't render the checkbox input if a name prop isnt passed", async () => {
-		const { input } = setup();
+		const { input } = setup({ name: "" });
 		expect(input).not.toBeInTheDocument();
 	});
 
diff --git a/packages/bits-ui/src/tests/collapsible/Collapsible.spec.ts b/packages/bits-ui/src/tests/collapsible/Collapsible.spec.ts
index 26fcb5ff5..1e03c179b 100644
--- a/packages/bits-ui/src/tests/collapsible/Collapsible.spec.ts
+++ b/packages/bits-ui/src/tests/collapsible/Collapsible.spec.ts
@@ -1,13 +1,12 @@
 import { render } from "@testing-library/svelte/svelte5";
-import { userEvent } from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
-import { getTestKbd } from "../utils.js";
+import { setupUserEvents } from "../utils.js";
 import CollapsibleTest from "./CollapsibleTest.svelte";
 import type { Collapsible } from "$lib/index.js";
 
 function setup(props?: Collapsible.RootProps) {
-	const user = userEvent.setup();
+	const user = setupUserEvents();
 	const returned = render(CollapsibleTest, props);
 	const root = returned.getByTestId("root");
 	const trigger = returned.getByTestId("trigger");
diff --git a/packages/bits-ui/src/tests/context-menu/ContextMenu.spec.ts b/packages/bits-ui/src/tests/context-menu/ContextMenu.spec.ts
index 0dd27a29e..c6f78358d 100644
--- a/packages/bits-ui/src/tests/context-menu/ContextMenu.spec.ts
+++ b/packages/bits-ui/src/tests/context-menu/ContextMenu.spec.ts
@@ -1,8 +1,7 @@
-import { render, screen, waitFor } from "@testing-library/svelte/svelte5";
-import { userEvent } from "@testing-library/user-event";
+import { render, screen, waitFor, cleanup } from "@testing-library/svelte/svelte5";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
-import { getTestKbd } from "../utils.js";
+import { getTestKbd, setupUserEvents } from "../utils.js";
 import ContextMenuTest from "./ContextMenuTest.svelte";
 import type { ContextMenuTestProps } from "./ContextMenuTest.svelte";
 
@@ -12,7 +11,7 @@ const kbd = getTestKbd();
  * Helper function to reduce boilerplate in tests
  */
 function setup(props: ContextMenuTestProps = {}) {
-	const user = userEvent.setup({ pointerEventsCheck: 0 });
+	const user = setupUserEvents();
 	const { getByTestId, queryByTestId } = render(ContextMenuTest, { ...props });
 	const trigger = getByTestId("trigger");
 	return {
@@ -36,9 +35,8 @@ async function openSubmenu(props: Awaited<ReturnType<typeof open>>) {
 	const { user, queryByTestId, getByTestId, trigger } = props;
 	await user.keyboard(kbd.ARROW_DOWN);
 	await user.keyboard(kbd.ARROW_DOWN);
-	const subtrigger = getByTestId("sub-trigger");
 
-	await waitFor(() => expect(subtrigger).toHaveFocus());
+	await waitFor(() => expect(queryByTestId("sub-trigger")).toHaveFocus());
 	expect(queryByTestId("sub-content")).toBeNull();
 	await user.keyboard(kbd.ARROW_RIGHT);
 	expect(queryByTestId("sub-content")).not.toBeNull();
@@ -96,12 +94,14 @@ describe("context menu", () => {
 	});
 
 	it("manages focus correctly when opened with pointer", async () => {
-		const { getByTestId, user } = await open();
+		cleanup();
+		const { queryByTestId, user } = await open();
 
-		const item = getByTestId("item");
+		const item = queryByTestId("item");
 		expect(item).not.toHaveFocus();
 
 		await user.keyboard(kbd.ARROW_DOWN);
+
 		expect(item).toHaveFocus();
 	});
 
@@ -186,35 +186,35 @@ describe("context menu", () => {
 	});
 
 	it("skips over disabled items when navigating with the keyboard", async () => {
-		const { user, getByTestId } = await open();
+		const { user, getByTestId, queryByTestId } = await open();
 		await user.keyboard(kbd.ARROW_DOWN);
 		await user.keyboard(kbd.ARROW_DOWN);
-		await waitFor(() => expect(getByTestId("sub-trigger")).toHaveFocus());
+		await waitFor(() => expect(queryByTestId("sub-trigger")).toHaveFocus());
 		await user.keyboard(kbd.ARROW_DOWN);
-		await waitFor(() => expect(getByTestId("checkbox-item")).toHaveFocus());
-		expect(getByTestId("disabled-item")).not.toHaveFocus();
-		expect(getByTestId("disabled-item-2")).not.toHaveFocus();
+		await waitFor(() => expect(queryByTestId("checkbox-item")).toHaveFocus());
+		expect(queryByTestId("disabled-item")).not.toHaveFocus();
+		expect(queryByTestId("disabled-item-2")).not.toHaveFocus();
 	});
 
 	it("doesnt loop through the menu items when the `loop` prop is set to false", async () => {
-		const { user, getByTestId } = await open({
+		const { user, queryByTestId } = await open({
 			contentProps: {
 				loop: false,
 			},
 		});
 		await user.keyboard(kbd.ARROW_DOWN);
 		await user.keyboard(kbd.ARROW_DOWN);
-		await waitFor(() => expect(getByTestId("sub-trigger")).toHaveFocus());
+		await waitFor(() => expect(queryByTestId("sub-trigger")).toHaveFocus());
 		await user.keyboard(kbd.ARROW_DOWN);
-		await waitFor(() => expect(getByTestId("checkbox-item")).toHaveFocus());
+		await waitFor(() => expect(queryByTestId("checkbox-item")).toHaveFocus());
 		await user.keyboard(kbd.ARROW_DOWN);
-		await waitFor(() => expect(getByTestId("item-2")).toHaveFocus());
+		await waitFor(() => expect(queryByTestId("item-2")).toHaveFocus());
 		await user.keyboard(kbd.ARROW_DOWN);
-		await waitFor(() => expect(getByTestId("radio-item")).toHaveFocus());
+		await waitFor(() => expect(queryByTestId("radio-item")).toHaveFocus());
 		await user.keyboard(kbd.ARROW_DOWN);
-		await waitFor(() => expect(getByTestId("radio-item-2")).toHaveFocus());
+		await waitFor(() => expect(queryByTestId("radio-item-2")).toHaveFocus());
 		await user.keyboard(kbd.ARROW_DOWN);
-		await waitFor(() => expect(getByTestId("item")).not.toHaveFocus());
+		await waitFor(() => expect(queryByTestId("item")).not.toHaveFocus());
 	});
 
 	it("loops through the menu items when the `loop` prop is set to true", async () => {
diff --git a/packages/bits-ui/src/tests/utils.ts b/packages/bits-ui/src/tests/utils.ts
index 6d5692196..49f49ea8c 100644
--- a/packages/bits-ui/src/tests/utils.ts
+++ b/packages/bits-ui/src/tests/utils.ts
@@ -1,5 +1,6 @@
 import type { Matcher, MatcherOptions } from "@testing-library/svelte";
-import { getKbd } from "$lib/internal/index.js";
+import { getKbd, sleep } from "$lib/internal/index.js";
+import { userEvent } from "@testing-library/user-event";
 
 /**
  * A wrapper around the internal kbd object to make it easier to use in tests
@@ -28,3 +29,29 @@ export type queryByTestId = (
 	id: Matcher,
 	options?: MatcherOptions | undefined
 ) => HTMLElement | null;
+
+export function setupUserEvents() {
+	const user = userEvent.setup({ pointerEventsCheck: 0 });
+	const originalClick = user.click;
+	const originalKeyboard = user.keyboard;
+	const originalPointer = user.pointer;
+
+	const click = async (element: HTMLElement) => {
+		await originalClick(element);
+		await sleep(20);
+	};
+
+	const keyboard = async (keys: string) => {
+		await originalKeyboard(keys);
+		await sleep(20);
+	};
+
+	const pointer: typeof originalPointer = async (input) => {
+		await originalPointer(input);
+		await sleep(20);
+	};
+
+	Object.assign(user, { click, keyboard, pointer });
+
+	return user;
+}
diff --git a/packages/bits-ui/vite.config.ts b/packages/bits-ui/vite.config.ts
index 1f8e3173c..43160ee31 100644
--- a/packages/bits-ui/vite.config.ts
+++ b/packages/bits-ui/vite.config.ts
@@ -1,5 +1,6 @@
 import process from "node:process";
 import { sveltekit } from "@sveltejs/kit/vite";
+import { svelteTesting } from "@testing-library/svelte/vite";
 import { defineConfig } from "vitest/config";
 import type { Plugin } from "vite";
 
@@ -14,7 +15,7 @@ const vitestBrowserConditionPlugin: Plugin = {
 };
 
 export default defineConfig({
-	plugins: [vitestBrowserConditionPlugin, sveltekit()],
+	plugins: [vitestBrowserConditionPlugin, sveltekit(), svelteTesting()],
 	test: {
 		include: ["src/**/*.{test,spec}.{js,ts}"],
 		// jest like globals
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 20aa66921..f2a12b7a3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -154,7 +154,7 @@ importers:
         specifier: ^5.2.8
         version: 5.2.12(@types/node@20.12.13)
       vitest:
-        specifier: ^1.5.0
+        specifier: ^1.6.0
         version: 1.6.0(@types/node@20.12.13)(@vitest/ui@1.6.0)(jsdom@24.1.0)
 
   sites/docs:
@@ -1015,6 +1015,7 @@ packages:
   '@humanwhocodes/config-array@0.13.0':
     resolution: {integrity: sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==}
     engines: {node: '>=10.10.0'}
+    deprecated: Use @eslint/config-array instead
 
   '@humanwhocodes/module-importer@1.0.1':
     resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
@@ -1022,6 +1023,7 @@ packages:
 
   '@humanwhocodes/object-schema@2.0.3':
     resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==}
+    deprecated: Use @eslint/object-schema instead
 
   '@humanwhocodes/retry@0.3.0':
     resolution: {integrity: sha512-d2CGZR2o7fS6sWB7DG/3a95bGKQyHMACZ5aW8qGkkqQpUoZV6C0X7Pc7l4ZNMZkfNBf4VWNe9E1jRsf0G146Ew==}
diff --git a/sites/docs/src/lib/components/demos/dropdown-menu-demo.svelte b/sites/docs/src/lib/components/demos/dropdown-menu-demo.svelte
index fef517d1a..4dde50583 100644
--- a/sites/docs/src/lib/components/demos/dropdown-menu-demo.svelte
+++ b/sites/docs/src/lib/components/demos/dropdown-menu-demo.svelte
@@ -115,6 +115,7 @@
 					</div>
 				</DropdownMenu.SubTrigger>
 				<DropdownMenu.SubContent
+					id="subcontent"
 					class="w-full max-w-[209px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover !ring-0 !ring-transparent"
 					sideOffset={10}
 				>
diff --git a/sites/docs/src/lib/components/ui/sheet/sheet-content.svelte b/sites/docs/src/lib/components/ui/sheet/sheet-content.svelte
index 8e80a795d..1aafc62b5 100644
--- a/sites/docs/src/lib/components/ui/sheet/sheet-content.svelte
+++ b/sites/docs/src/lib/components/ui/sheet/sheet-content.svelte
@@ -9,7 +9,7 @@
 		class: className,
 		children,
 		...restProps
-	}: Omit<SheetPrimitive.ContentProps & { side?: Side }, "child" | "asChild"> = $props();
+	}: Omit<SheetPrimitive.ContentProps & { side?: Side }, "child" | "asChild" | "ref"> = $props();
 </script>
 
 <SheetPortal>