From 7e293fffac4fa524db81a9dc5ce6db6b4685a500 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <64506580+huntabyte@users.noreply.github.com>
Date: Wed, 24 Apr 2024 22:37:43 -0400
Subject: [PATCH] next: Dialog (#510)

---
 .../dialog/components/dialog-close.svelte     |  37 +--
 .../dialog/components/dialog-content.svelte   | 202 ++++++--------
 .../components/dialog-description.svelte      |  40 ++-
 .../dialog/components/dialog-overlay.svelte   | 100 +++----
 .../dialog/components/dialog-portal.svelte    |  28 --
 .../dialog/components/dialog-title.svelte     |  47 ++--
 .../dialog/components/dialog-trigger.svelte   |  48 ++--
 .../lib/bits/dialog/components/dialog.svelte  |  68 +----
 packages/bits-ui/src/lib/bits/dialog/ctx.ts   |  45 ----
 .../src/lib/bits/dialog/dialog.svelte.ts      | 248 ++++++++++++++++++
 packages/bits-ui/src/lib/bits/dialog/index.ts |   8 +-
 packages/bits-ui/src/lib/bits/dialog/types.ts | 152 ++++-------
 .../popover/components/popover-content.svelte |  17 +-
 .../src/lib/bits/popover/popover.svelte.ts    |  12 +-
 .../bits-ui/src/lib/bits/popover/types.ts     |  20 +-
 .../dismissable-layer.svelte                  |  10 +-
 .../bits/utilities/dismissable-layer/types.ts |  20 +-
 ...velte.ts => useDismissableLayer.svelte.ts} |   5 +-
 .../escape-layer/escape-layer.svelte          |  13 +-
 .../lib/bits/utilities/escape-layer/types.ts  |  11 +-
 ...yer.svelte.ts => useEscapeLayer.svelte.ts} |   6 +-
 .../components/floating-layer-anchor.svelte   |   2 +-
 .../components/floating-layer-arrow.svelte    |   2 +-
 .../components/floating-layer-content.svelte  |  17 +-
 .../components/floating-layer.svelte          |   2 +-
 .../floating-layer/components/index.ts        |   1 +
 .../bits/utilities/floating-layer/types.ts    |  29 +-
 ...r.svelte.ts => useFloatingLayer.svelte.ts} |   0
 .../utilities/focus-scope/focus-scope.svelte  |   6 +-
 .../lib/bits/utilities/focus-scope/types.ts   |  30 ++-
 ...cope.svelte.ts => useFocusScope.svelte.ts} |  16 +-
 .../popper-layer/popper-layer.svelte          |  10 +-
 .../lib/bits/utilities/popper-layer/types.ts  |  33 ++-
 .../utilities/portal/use-portal.svelte.ts     |  44 ----
 .../presence-layer/presence-layer.svelte      |  15 +-
 .../bits/utilities/presence-layer/types.ts    |  13 +-
 .../presence-layer}/usePresence.svelte.ts     |   2 +-
 .../lib/bits/utilities/scroll-lock/index.ts   |   8 +
 .../utilities/scroll-lock/scroll-lock.svelte  |   8 +
 .../text-selection-layer.svelte               |  10 +-
 .../utilities/text-selection-layer/types.ts   |  30 ++-
 ...lte.ts => useTextSelectionLayer.svelte.ts} |   6 +-
 packages/bits-ui/src/lib/internal/index.ts    |   2 +-
 .../lib/components/demos/dialog-demo.svelte   |   9 +-
 44 files changed, 714 insertions(+), 718 deletions(-)
 delete mode 100644 packages/bits-ui/src/lib/bits/dialog/components/dialog-portal.svelte
 delete mode 100644 packages/bits-ui/src/lib/bits/dialog/ctx.ts
 rename packages/bits-ui/src/lib/bits/utilities/dismissable-layer/{use-dismissable-layer.svelte.ts => useDismissableLayer.svelte.ts} (98%)
 rename packages/bits-ui/src/lib/bits/utilities/escape-layer/{use-escape-layer.svelte.ts => useEscapeLayer.svelte.ts} (93%)
 rename packages/bits-ui/src/lib/bits/utilities/floating-layer/{floating-layer.svelte.ts => useFloatingLayer.svelte.ts} (100%)
 rename packages/bits-ui/src/lib/bits/utilities/focus-scope/{use-focus-scope.svelte.ts => useFocusScope.svelte.ts} (94%)
 delete mode 100644 packages/bits-ui/src/lib/bits/utilities/portal/use-portal.svelte.ts
 rename packages/bits-ui/src/lib/{internal => bits/utilities/presence-layer}/usePresence.svelte.ts (99%)
 create mode 100644 packages/bits-ui/src/lib/bits/utilities/scroll-lock/index.ts
 create mode 100644 packages/bits-ui/src/lib/bits/utilities/scroll-lock/scroll-lock.svelte
 rename packages/bits-ui/src/lib/bits/utilities/text-selection-layer/{use-text-selection-layer.svelte.ts => useTextSelectionLayer.svelte.ts} (94%)

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 4f4f62aaf..d3f18848d 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
@@ -1,38 +1,19 @@
 <script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { getCtx } from "../ctx.js";
-	import type { CloseEvents, CloseProps } from "../index.js";
-	import { createDispatcher } from "$lib/internal/events.js";
+	import { setDialogCloseState } from "../dialog.svelte.js";
+	import type { CloseProps } from "../index.js";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
 
-	type $$Props = CloseProps;
-	type $$Events = CloseEvents;
+	let { asChild, children, child, el = $bindable(), ...restProps }: CloseProps = $props();
 
-	export let asChild: $$Props["asChild"] = false;
-	export let el: $$Props["el"] = undefined;
+	const state = setDialogCloseState();
 
-	const {
-		elements: { close },
-		getAttrs,
-	} = getCtx();
-
-	const dispatch = createDispatcher();
-	const attrs = getAttrs("close");
-
-	$: builder = $close;
-	$: Object.assign(builder, attrs);
+	const mergedProps = $derived(mergeProps(restProps, state.props));
 </script>
 
 {#if asChild}
-	<slot {builder} />
+	{@render child?.({ props: mergedProps })}
 {:else}
-	<button
-		bind:this={el}
-		use:melt={builder}
-		type="button"
-		{...$$restProps}
-		on:m-click={dispatch}
-		on:m-keydown={dispatch}
-	>
-		<slot {builder} />
+	<button {...mergedProps} bind:this={el}>
+		{@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 ee5baeffd..7058c585e 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
@@ -1,122 +1,92 @@
 <script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { getCtx } from "../ctx.js";
-	import type { ContentEvents, ContentProps } from "../index.js";
-	import type { Transition } from "$lib/internal/index.js";
+	import { setDialogContentState } from "../dialog.svelte.js";
+	import type { ContentProps } from "../index.js";
+	import DismissableLayer from "$lib/bits/utilities/dismissable-layer/dismissable-layer.svelte";
+	import EscapeLayer from "$lib/bits/utilities/escape-layer/escape-layer.svelte";
+	import FocusScope from "$lib/bits/utilities/focus-scope/focus-scope.svelte";
+	import PresenceLayer from "$lib/bits/utilities/presence-layer/presence-layer.svelte";
+	import TextSelectionLayer from "$lib/bits/utilities/text-selection-layer/text-selection-layer.svelte";
+	import { readonlyBox } from "$lib/internal/box.svelte.js";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
+	import { useId } from "$lib/internal/useId.svelte.js";
+	import { noop } from "$lib/internal/callbacks.js";
+	import ScrollLock from "$lib/bits/utilities/scroll-lock/scroll-lock.svelte";
 
-	type T = $$Generic<Transition>;
-	type In = $$Generic<Transition>;
-	type Out = $$Generic<Transition>;
+	let {
+		id = useId(),
+		asChild,
+		children,
+		child,
+		el = $bindable(),
+		forceMount = false,
+		onDestroyAutoFocus = noop,
+		onEscapeKeydown = noop,
+		onInteractOutside = noop,
+		...restProps
+	}: ContentProps = $props();
 
-	type $$Props = ContentProps<T, In, Out>;
-	type $$Events = ContentEvents;
+	const state = setDialogContentState({
+		id: readonlyBox(() => id),
+	});
 
-	export let transition: $$Props["transition"] = undefined;
-	export let transitionConfig: $$Props["transitionConfig"] = undefined;
-	export let inTransition: $$Props["inTransition"] = undefined;
-	export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined;
-	export let outTransition: $$Props["outTransition"] = undefined;
-	export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined;
-	export let asChild: $$Props["asChild"] = false;
-	export let id: $$Props["id"] = undefined;
-	export let el: $$Props["el"] = undefined;
-
-	const {
-		elements: { content },
-		states: { open },
-		ids,
-		getAttrs,
-	} = getCtx();
-	const attrs = getAttrs("content");
-
-	$: if (id) {
-		ids.content.set(id);
-	}
-
-	$: builder = $content;
-	$: Object.assign(builder, attrs);
+	const mergedProps = $derived(mergeProps(restProps, state.props));
 </script>
 
-{#if asChild && $open}
-	<slot {builder} />
-{:else if transition && $open}
-	<div
-		bind:this={el}
-		transition:transition={transitionConfig}
-		use:melt={builder}
-		{...$$restProps}
-		on:pointerdown
-		on:pointermove
-		on:pointerup
-		on:touchend
-		on:touchstart
-		on:touchcancel
-		on:touchmove
-	>
-		<slot {builder} />
-	</div>
-{:else if inTransition && outTransition && $open}
-	<div
-		bind:this={el}
-		in:inTransition={inTransitionConfig}
-		out:outTransition={outTransitionConfig}
-		use:melt={builder}
-		on:pointerdown
-		on:pointermove
-		on:pointerup
-		on:touchend
-		on:touchstart
-		on:touchcancel
-		on:touchmove
-		{...$$restProps}
-	>
-		<slot {builder} />
-	</div>
-{:else if inTransition && $open}
-	<div
-		bind:this={el}
-		in:inTransition={inTransitionConfig}
-		use:melt={builder}
-		on:pointerdown
-		on:pointermove
-		on:pointerup
-		on:touchend
-		on:touchstart
-		on:touchcancel
-		on:touchmove
-		{...$$restProps}
-	>
-		<slot {builder} />
-	</div>
-{:else if outTransition && $open}
-	<div
-		bind:this={el}
-		out:outTransition={outTransitionConfig}
-		use:melt={builder}
-		on:pointerdown
-		on:pointermove
-		on:pointerup
-		on:touchend
-		on:touchstart
-		on:touchcancel
-		on:touchmove
-		{...$$restProps}
-	>
-		<slot {builder} />
-	</div>
-{:else if $open}
-	<div
-		bind:this={el}
-		use:melt={builder}
-		on:pointerdown
-		on:pointermove
-		on:pointerup
-		on:touchend
-		on:touchstart
-		on:touchcancel
-		on:touchmove
-		{...$$restProps}
-	>
-		<slot {builder} />
-	</div>
-{/if}
+<PresenceLayer {...mergedProps} present={state.root.open.value || forceMount}>
+	{#snippet presence({ present })}
+		<ScrollLock {...mergedProps} />
+		<FocusScope
+			loop
+			trapped={present.value}
+			{...mergedProps}
+			onDestroyAutoFocus={(e) => {
+				onDestroyAutoFocus(e);
+				if (e.defaultPrevented) return;
+				state.root.triggerNode?.value?.focus();
+			}}
+		>
+			{#snippet focusScope({ props: focusScopeProps })}
+				<EscapeLayer
+					{...mergedProps}
+					present={present.value}
+					onEscapeKeydown={(e) => {
+						onEscapeKeydown(e);
+						state.root.closeDialog();
+					}}
+				>
+					<DismissableLayer
+						{...mergedProps}
+						present={present.value}
+						onInteractOutside={(e) => {
+							onInteractOutside(e);
+							if (e.defaultPrevented) return;
+							state.root.closeDialog();
+						}}
+					>
+						<TextSelectionLayer {...mergedProps} present={present.value}>
+							{#if asChild}
+								{@render child?.({
+									props: mergeProps(mergedProps, focusScopeProps, {
+										hidden: !present.value,
+									}),
+								})}
+							{:else}
+								<div
+									{...mergeProps(mergedProps, focusScopeProps, {
+										hidden: !present.value,
+										style: {
+											pointerEvents: "auto",
+										},
+									})}
+									bind:this={el}
+								>
+									{@render children?.()}
+								</div>
+							{/if}
+						</TextSelectionLayer>
+					</DismissableLayer>
+				</EscapeLayer>
+			{/snippet}
+		</FocusScope>
+	{/snippet}
+</PresenceLayer>
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 cdf62ad4e..a1c873660 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
@@ -1,32 +1,30 @@
 <script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { getCtx } from "../ctx.js";
+	import { setDialogDescriptionState } from "../dialog.svelte.js";
 	import type { DescriptionProps } from "../index.js";
+	import { readonlyBox } from "$lib/internal/box.svelte.js";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
+	import { useId } from "$lib/internal/useId.svelte.js";
 
-	type $$Props = DescriptionProps;
+	let {
+		id = useId(),
+		asChild,
+		children,
+		child,
+		el = $bindable(),
+		...restProps
+	}: DescriptionProps = $props();
 
-	export let asChild: $$Props["asChild"] = false;
-	export let id: $$Props["id"] = undefined;
-	export let el: $$Props["el"] = undefined;
+	const state = setDialogDescriptionState({
+		id: readonlyBox(() => id),
+	});
 
-	const {
-		elements: { description },
-		ids,
-		getAttrs,
-	} = getCtx();
-	const attrs = getAttrs("description");
-
-	$: if (id) {
-		ids.description.set(id);
-	}
-	$: builder = $description;
-	$: Object.assign(builder, attrs);
+	const mergedProps = $derived(mergeProps(restProps, state.props));
 </script>
 
 {#if asChild}
-	<slot {builder} />
+	{@render child?.({ props: mergedProps })}
 {:else}
-	<div bind:this={el} use:melt={builder} {...$$restProps}>
-		<slot {builder} />
+	<div {...mergedProps} bind:this={el}>
+		{@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 f9f401df6..b37083573 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
@@ -1,76 +1,36 @@
 <script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { getCtx } from "../ctx.js";
-	import type { OverlayEvents, OverlayProps } from "../index.js";
-	import type { Transition } from "$lib/internal/index.js";
+	import { setDialogOverlayState } from "../dialog.svelte.js";
+	import type { OverlayProps } from "../index.js";
+	import { readonlyBox } from "$lib/internal/box.svelte.js";
+	import { useId } from "$lib/internal/useId.svelte.js";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
+	import PresenceLayer from "$lib/bits/utilities/presence-layer/presence-layer.svelte";
 
-	type T = $$Generic<Transition>;
-	type In = $$Generic<Transition>;
-	type Out = $$Generic<Transition>;
+	let {
+		id = useId(),
+		forceMount = false,
+		asChild,
+		child,
+		children,
+		el = $bindable(),
+		...restProps
+	}: OverlayProps = $props();
 
-	type $$Props = OverlayProps<T, In, Out>;
-	type $$Events = OverlayEvents;
+	const state = setDialogOverlayState({
+		id: readonlyBox(() => id),
+	});
 
-	export let transition: $$Props["transition"] = undefined;
-	export let transitionConfig: $$Props["transitionConfig"] = undefined;
-	export let inTransition: $$Props["inTransition"] = undefined;
-	export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined;
-	export let outTransition: $$Props["outTransition"] = undefined;
-	export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined;
-	export let asChild: $$Props["asChild"] = false;
-	export let el: $$Props["el"] = undefined;
-
-	const {
-		elements: { overlay },
-		states: { open },
-		getAttrs,
-	} = getCtx();
-	const attrs = getAttrs("overlay");
-
-	$: builder = $overlay;
-	$: Object.assign(builder, attrs);
+	const mergedProps = $derived(mergeProps(restProps, state.props));
 </script>
 
-{#if asChild && $open}
-	<slot {builder} />
-{:else if transition && $open}
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
-	<div
-		on:mouseup
-		bind:this={el}
-		transition:transition={transitionConfig}
-		use:melt={builder}
-		{...$$restProps}
-	/>
-{:else if inTransition && outTransition && $open}
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
-	<div
-		bind:this={el}
-		in:inTransition={inTransitionConfig}
-		out:outTransition={outTransitionConfig}
-		use:melt={builder}
-		on:mouseup
-		{...$$restProps}
-	/>
-{:else if inTransition && $open}
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
-	<div
-		bind:this={el}
-		in:inTransition={inTransitionConfig}
-		use:melt={builder}
-		on:mouseup
-		{...$$restProps}
-	/>
-{:else if outTransition && $open}
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
-	<div
-		bind:this={el}
-		out:outTransition={outTransitionConfig}
-		use:melt={builder}
-		on:mouseup
-		{...$$restProps}
-	/>
-{:else if $open}
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
-	<div bind:this={el} use:melt={builder} on:mouseup {...$$restProps} />
-{/if}
+<PresenceLayer {id} present={state.root.open.value || forceMount}>
+	{#snippet presence({ present })}
+		{#if asChild}
+			{@render child?.({ props: mergeProps(mergedProps, { hidden: !present.value }) })}
+		{:else}
+			<div {...mergeProps(mergedProps, { hidden: !present.value })} bind:this={el}>
+				{@render children?.()}
+			</div>
+		{/if}
+	{/snippet}
+</PresenceLayer>
diff --git a/packages/bits-ui/src/lib/bits/dialog/components/dialog-portal.svelte b/packages/bits-ui/src/lib/bits/dialog/components/dialog-portal.svelte
deleted file mode 100644
index 0dbf9b165..000000000
--- a/packages/bits-ui/src/lib/bits/dialog/components/dialog-portal.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-<script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { getCtx } from "../ctx.js";
-	import type { PortalProps } from "../index.js";
-
-	type $$Props = PortalProps;
-
-	export let asChild: $$Props["asChild"] = false;
-	export let el: $$Props["el"] = undefined;
-
-	const {
-		elements: { portalled },
-		getAttrs,
-	} = getCtx();
-
-	const attrs = getAttrs("portal");
-
-	$: builder = $portalled;
-	$: Object.assign(builder, attrs);
-</script>
-
-{#if asChild}
-	<slot {builder} />
-{:else}
-	<div bind:this={el} use:melt={builder} {...$$restProps}>
-		<slot {builder} />
-	</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 f6943dbd9..36961db65 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
@@ -1,35 +1,32 @@
 <script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { getCtx } from "../ctx.js";
+	import { setDialogTitleState } from "../dialog.svelte.js";
 	import type { TitleProps } from "../index.js";
+	import { readonlyBox } from "$lib/internal/box.svelte.js";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
+	import { useId } from "$lib/internal/useId.svelte.js";
 
-	type $$Props = TitleProps;
+	let {
+		id = useId(),
+		el = $bindable(),
+		asChild,
+		child,
+		children,
+		level = 2,
+		...restProps
+	}: TitleProps = $props();
 
-	export let level: $$Props["level"] = "h2";
-	export let asChild: $$Props["asChild"] = false;
-	export let id: $$Props["id"] = undefined;
-	export let el: $$Props["el"] = undefined;
+	const state = setDialogTitleState({
+		id: readonlyBox(() => id),
+		level: readonlyBox(() => level),
+	});
 
-	const {
-		elements: { title },
-		ids,
-		getAttrs,
-	} = getCtx();
-
-	const attrs = getAttrs("title");
-
-	$: if (id) {
-		ids.title.set(id);
-	}
-
-	$: builder = $title;
-	$: Object.assign(builder, attrs);
+	const mergedProps = $derived(mergeProps(restProps, state.props));
 </script>
 
 {#if asChild}
-	<slot {builder} />
+	{@render child?.({ props: mergedProps })}
 {:else}
-	<svelte:element this={level} bind:this={el} use:melt={builder} {...$$restProps}>
-		<slot {builder} />
-	</svelte:element>
+	<div {...mergedProps} bind:this={el}>
+		{@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 36a6eda0d..9906a8170 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
@@ -1,38 +1,30 @@
 <script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { getCtx } from "../ctx.js";
-	import type { TriggerEvents, TriggerProps } from "../index.js";
-	import { createDispatcher } from "$lib/internal/events.js";
+	import { setDialogTriggerState } from "../dialog.svelte.js";
+	import type { TriggerProps } from "../index.js";
+	import { readonlyBox } from "$lib/internal/box.svelte.js";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
+	import { useId } from "$lib/internal/useId.svelte.js";
 
-	type $$Props = TriggerProps;
-	type $$Events = TriggerEvents;
+	let {
+		id = useId(),
+		el = $bindable(),
+		asChild,
+		children,
+		child,
+		...restProps
+	}: TriggerProps = $props();
 
-	export let asChild: $$Props["asChild"] = false;
-	export let el: $$Props["el"] = undefined;
+	const state = setDialogTriggerState({
+		id: readonlyBox(() => id),
+	});
 
-	const {
-		elements: { trigger },
-		getAttrs,
-	} = getCtx();
-
-	const dispatch = createDispatcher();
-	const attrs = getAttrs("trigger");
-
-	$: builder = $trigger;
-	$: Object.assign(builder, attrs);
+	const mergedProps = $derived(mergeProps(restProps, state.props));
 </script>
 
 {#if asChild}
-	<slot {builder} />
+	{@render child?.({ props: mergedProps })}
 {:else}
-	<button
-		bind:this={el}
-		use:melt={builder}
-		type="button"
-		{...$$restProps}
-		on:m-click={dispatch}
-		on:m-keydown={dispatch}
-	>
-		<slot {builder} />
+	<button {...mergedProps} bind:this={el}>
+		{@render children?.()}
 	</button>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/dialog/components/dialog.svelte b/packages/bits-ui/src/lib/bits/dialog/components/dialog.svelte
index 50fbeaa3d..3534c5603 100644
--- a/packages/bits-ui/src/lib/bits/dialog/components/dialog.svelte
+++ b/packages/bits-ui/src/lib/bits/dialog/components/dialog.svelte
@@ -1,61 +1,21 @@
 <script lang="ts">
-	import { derived } from "svelte/store";
-	import { setCtx } from "../ctx.js";
-	import type { Props } from "../index.js";
+	import { setDialogRootState } from "../dialog.svelte.js";
+	import type { RootProps } from "../index.js";
+	import { box } from "$lib/internal/box.svelte.js";
 
-	type $$Props = Props;
+	let { open = $bindable(false), onOpenChange, children }: RootProps = $props();
 
-	export let preventScroll: $$Props["preventScroll"] = undefined;
-	export let closeOnEscape: $$Props["closeOnEscape"] = undefined;
-	export let closeOnOutsideClick: $$Props["closeOnOutsideClick"] = undefined;
-	export let portal: $$Props["portal"] = undefined;
-	export let open: $$Props["open"] = undefined;
-	export let onOpenChange: $$Props["onOpenChange"] = undefined;
-	export let openFocus: $$Props["openFocus"] = undefined;
-	export let closeFocus: $$Props["closeFocus"] = undefined;
-	export let onOutsideClick: $$Props["onOutsideClick"] = undefined;
-
-	const {
-		states: { open: localOpen },
-		updateOption,
-		ids,
-	} = setCtx({
-		closeOnEscape,
-		preventScroll,
-		closeOnOutsideClick,
-		portal,
-		forceVisible: true,
-		defaultOpen: open,
-		openFocus,
-		closeFocus,
-		onOutsideClick,
-		onOpenChange: ({ next }) => {
-			if (open !== next) {
-				onOpenChange?.(next);
-				open = next;
+	setDialogRootState({
+		open: box(
+			() => open,
+			(v) => {
+				if (v !== open) {
+					onOpenChange?.(v);
+					open = v;
+				}
 			}
-			return next;
-		},
+		),
 	});
-
-	const idValues = derived(
-		[ids.content, ids.description, ids.title],
-		([$contentId, $descriptionId, $titleId]) => ({
-			content: $contentId,
-			description: $descriptionId,
-			title: $titleId,
-		})
-	);
-
-	$: open !== undefined && localOpen.set(open);
-
-	$: updateOption("preventScroll", preventScroll);
-	$: updateOption("closeOnEscape", closeOnEscape);
-	$: updateOption("closeOnOutsideClick", closeOnOutsideClick);
-	$: updateOption("portal", portal);
-	$: updateOption("openFocus", openFocus);
-	$: updateOption("closeFocus", closeFocus);
-	$: updateOption("onOutsideClick", onOutsideClick);
 </script>
 
-<slot ids={$idValues} />
+{@render children?.()}
diff --git a/packages/bits-ui/src/lib/bits/dialog/ctx.ts b/packages/bits-ui/src/lib/bits/dialog/ctx.ts
deleted file mode 100644
index 11d661fa7..000000000
--- a/packages/bits-ui/src/lib/bits/dialog/ctx.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { type CreateDialogProps, createDialog } from "@melt-ui/svelte";
-import { getContext, setContext } from "svelte";
-import { createBitAttrs, getOptionUpdater, removeUndefined } from "$lib/internal/index.js";
-
-export function getDialogData() {
-	const NAME = "dialog" as const;
-	const PARTS = [
-		"close",
-		"content",
-		"description",
-		"overlay",
-		"portal",
-		"title",
-		"trigger",
-	] as const;
-
-	return {
-		NAME,
-		PARTS,
-	};
-}
-
-type SetProps = CreateDialogProps;
-type GetReturn = Omit<ReturnType<typeof setCtx>, "updateOption">;
-
-export function setCtx(props: SetProps) {
-	const { NAME, PARTS } = getDialogData();
-	const getAttrs = createBitAttrs(NAME, PARTS);
-
-	const dialog = {
-		...createDialog({ ...removeUndefined(props), role: "dialog", forceVisible: true }),
-		getAttrs,
-	};
-
-	setContext(NAME, dialog);
-	return {
-		...dialog,
-		updateOption: getOptionUpdater(dialog.options),
-	};
-}
-
-export function getCtx() {
-	const { NAME } = getDialogData();
-	return getContext<GetReturn>(NAME);
-}
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 e69de29bb..c8b25feb8 100644
--- a/packages/bits-ui/src/lib/bits/dialog/dialog.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/dialog/dialog.svelte.ts
@@ -0,0 +1,248 @@
+import { getContext, setContext } from "svelte";
+import { getAriaExpanded, getDataOpenClosed } from "$lib/internal/attrs.js";
+import {
+	type BoxedValues,
+	type ReadonlyBoxedValues,
+	boxedState,
+	readonlyBoxedState,
+} from "$lib/internal/box.svelte.js";
+import { useNodeById } from "$lib/internal/useNodeById.svelte.js";
+
+const CONTENT_ATTR = "data-dialog-content";
+const TITLE_ATTR = "data-dialog-title";
+const TRIGGER_ATTR = "data-dialog-trigger";
+const OVERLAY_ATTR = "data-dialog-overlay";
+const DESCRIPTION_ATTR = "data-dialog-description";
+const CLOSE_ATTR = "data-dialog-close";
+
+type DialogRootStateProps = BoxedValues<{
+	open: boolean;
+}>;
+
+class DialogRootState {
+	open = undefined as unknown as DialogRootStateProps["open"];
+	triggerNode = boxedState<HTMLElement | null>(null);
+	titleNode = boxedState<HTMLElement | null>(null);
+	contentNode = boxedState<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 = boxedState<HTMLElement | null>(null);
+	descriptionId = $derived(
+		this.descriptionNode.value ? this.descriptionNode.value.id : undefined
+	);
+
+	constructor(props: DialogRootStateProps) {
+		this.open = props.open;
+	}
+
+	openDialog() {
+		if (this.open.value) return;
+		this.open.value = true;
+	}
+
+	closeDialog() {
+		if (!this.open.value) return;
+		this.open.value = false;
+	}
+
+	createTrigger(props: DialogTriggerStateProps) {
+		return new DialogTriggerState(props, this);
+	}
+
+	createTitle(props: DialogTitleStateProps) {
+		return new DialogTitleState(props, this);
+	}
+
+	createContent(props: DialogContentStateProps) {
+		return new DialogContentState(props, this);
+	}
+
+	createOverlay(props: DialogOverlayStateProps) {
+		return new DialogOverlayState(props, this);
+	}
+
+	createDescription(props: DialogDescriptionStateProps) {
+		return new DialogDescriptionState(props, this);
+	}
+
+	createClose() {
+		return new DialogCloseState(this);
+	}
+
+	sharedProps = $derived({
+		"data-state": getDataOpenClosed(this.open.value),
+	});
+}
+
+type DialogTriggerStateProps = ReadonlyBoxedValues<{
+	id: string;
+}>;
+
+class DialogTriggerState {
+	#id = undefined as unknown as DialogTriggerStateProps["id"];
+	#root = undefined as unknown as DialogRootState;
+
+	constructor(props: DialogTriggerStateProps, root: DialogRootState) {
+		this.#id = props.id;
+		this.#root = root;
+		this.#root.triggerNode = useNodeById(this.#id);
+	}
+
+	#onclick = () => {
+		this.#root.openDialog();
+	};
+
+	props = $derived({
+		id: this.#id.value,
+		"aria-haspopup": "dialog",
+		"aria-expanded": getAriaExpanded(this.#root.open.value),
+		"aria-controls": this.#root.contentId,
+		[TRIGGER_ATTR]: "",
+		onclick: this.#onclick,
+		...this.#root.sharedProps,
+	} as const);
+}
+
+class DialogCloseState {
+	#root = undefined as unknown as DialogRootState;
+
+	constructor(root: DialogRootState) {
+		this.#root = root;
+	}
+
+	#onclick = () => {
+		this.#root.closeDialog();
+	};
+
+	props = $derived({
+		[CLOSE_ATTR]: "",
+		onclick: this.#onclick,
+		...this.#root.sharedProps,
+	} as const);
+}
+
+type DialogTitleStateProps = ReadonlyBoxedValues<{
+	id: string;
+	level: 1 | 2 | 3 | 4 | 5 | 6;
+}>;
+
+class DialogTitleState {
+	#id = undefined as unknown as DialogTitleStateProps["id"];
+	#root = undefined as unknown as DialogRootState;
+	#level = undefined as unknown as DialogTitleStateProps["level"];
+
+	constructor(props: DialogTitleStateProps, root: DialogRootState) {
+		this.#id = props.id;
+		this.#root = root;
+		this.#root.titleNode = useNodeById(this.#id);
+		this.#level = props.level;
+	}
+
+	props = $derived({
+		id: this.#id.value,
+		role: "heading",
+		"aria-level": String(this.#level),
+		[TITLE_ATTR]: "",
+		...this.#root.sharedProps,
+	} as const);
+}
+
+type DialogDescriptionStateProps = ReadonlyBoxedValues<{
+	id: string;
+}>;
+
+class DialogDescriptionState {
+	#id = undefined as unknown as DialogDescriptionStateProps["id"];
+	#root = undefined as unknown as DialogRootState;
+
+	constructor(props: DialogDescriptionStateProps, root: DialogRootState) {
+		this.#id = props.id;
+		this.#root = root;
+		this.#root.descriptionNode = useNodeById(this.#id);
+	}
+
+	props = $derived({
+		id: this.#id.value,
+		[DESCRIPTION_ATTR]: "",
+		...this.#root.sharedProps,
+	} as const);
+}
+
+type DialogContentStateProps = ReadonlyBoxedValues<{
+	id: string;
+}>;
+
+class DialogContentState {
+	#id = undefined as unknown as DialogContentStateProps["id"];
+	root = undefined as unknown as DialogRootState;
+
+	constructor(props: DialogContentStateProps, root: DialogRootState) {
+		this.#id = props.id;
+		this.root = root;
+		this.root.contentNode = useNodeById(this.#id);
+	}
+
+	props = $derived({
+		id: this.#id.value,
+		role: "dialog",
+		"aria-describedby": this.root.descriptionId,
+		"aria-labelledby": this.root.titleId,
+		[CONTENT_ATTR]: "",
+		...this.root.sharedProps,
+	} as const);
+}
+
+type DialogOverlayStateProps = ReadonlyBoxedValues<{
+	id: string;
+}>;
+
+class DialogOverlayState {
+	#id = undefined as unknown as DialogOverlayStateProps["id"];
+	root = undefined as unknown as DialogRootState;
+
+	constructor(props: DialogOverlayStateProps, root: DialogRootState) {
+		this.#id = props.id;
+		this.root = root;
+	}
+
+	props = $derived({
+		id: this.#id.value,
+		[OVERLAY_ATTR]: "",
+		...this.root.sharedProps,
+	} as const);
+}
+
+const DIALOG_ROOT_KEY = Symbol("Dialog.Root");
+
+export function setDialogRootState(props: DialogRootStateProps) {
+	return setContext(DIALOG_ROOT_KEY, new DialogRootState(props));
+}
+
+export function getDialogRootState(): DialogRootState {
+	return getContext(DIALOG_ROOT_KEY);
+}
+
+export function setDialogTriggerState(props: DialogTriggerStateProps) {
+	return getDialogRootState().createTrigger(props);
+}
+
+export function setDialogTitleState(props: DialogTitleStateProps) {
+	return getDialogRootState().createTitle(props);
+}
+
+export function setDialogContentState(props: DialogContentStateProps) {
+	return getDialogRootState().createContent(props);
+}
+
+export function setDialogOverlayState(props: DialogOverlayStateProps) {
+	return getDialogRootState().createOverlay(props);
+}
+
+export function setDialogDescriptionState(props: DialogDescriptionStateProps) {
+	return getDialogRootState().createDescription(props);
+}
+
+export function setDialogCloseState() {
+	return getDialogRootState().createClose();
+}
diff --git a/packages/bits-ui/src/lib/bits/dialog/index.ts b/packages/bits-ui/src/lib/bits/dialog/index.ts
index 12ce1764c..6ae9059b6 100644
--- a/packages/bits-ui/src/lib/bits/dialog/index.ts
+++ b/packages/bits-ui/src/lib/bits/dialog/index.ts
@@ -1,14 +1,14 @@
 export { default as Root } from "./components/dialog.svelte";
 export { default as Title } from "./components/dialog-title.svelte";
 export { default as Close } from "./components/dialog-close.svelte";
-export { default as Portal } from "./components/dialog-portal.svelte";
+export { default as Portal } from "$lib/bits/utilities/portal/portal.svelte";
 export { default as Content } from "./components/dialog-content.svelte";
 export { default as Overlay } from "./components/dialog-overlay.svelte";
 export { default as Trigger } from "./components/dialog-trigger.svelte";
 export { default as Description } from "./components/dialog-description.svelte";
 
 export type {
-	DialogProps as Props,
+	DialogRootProps as RootProps,
 	DialogTitleProps as TitleProps,
 	DialogCloseProps as CloseProps,
 	DialogPortalProps as PortalProps,
@@ -16,8 +16,4 @@ export type {
 	DialogOverlayProps as OverlayProps,
 	DialogTriggerProps as TriggerProps,
 	DialogDescriptionProps as DescriptionProps,
-	DialogTriggerEvents as TriggerEvents,
-	DialogCloseEvents as CloseEvents,
-	DialogContentEvents as ContentEvents,
-	DialogOverlayEvents as OverlayEvents,
 } from "./types.js";
diff --git a/packages/bits-ui/src/lib/bits/dialog/types.ts b/packages/bits-ui/src/lib/bits/dialog/types.ts
index 4310ca3f4..dccb4c5df 100644
--- a/packages/bits-ui/src/lib/bits/dialog/types.ts
+++ b/packages/bits-ui/src/lib/bits/dialog/types.ts
@@ -1,113 +1,69 @@
-import type { HTMLButtonAttributes } from "svelte/elements";
-import type { CreateDialogProps as MeltDialogProps } from "@melt-ui/svelte";
+import type { Snippet } from "svelte";
+import type { EscapeLayerProps } from "../utilities/escape-layer/types.js";
+import type { DismissableLayerProps } from "../utilities/dismissable-layer/types.js";
+import type { PresenceLayerProps } from "../utilities/presence-layer/types.js";
+import type { FocusScopeProps } from "../utilities/focus-scope/types.js";
+import type { TextSelectionLayerProps } from "../utilities/text-selection-layer/types.js";
 import type {
-	DOMElement,
-	Expand,
-	HTMLDivAttributes,
-	HTMLHeadingAttributes,
-	OmitOpen,
 	OnChangeFn,
-	SvelteEvent,
-	Transition,
-	TransitionProps,
-} from "$lib/internal/index.js";
-import type { CustomEventHandler } from "$lib/index.js";
-
-import type { FocusProp } from "$lib/shared/index.js";
-
-export type DialogPropsWithoutHTML = Expand<
-	OmitOpen<
-		Omit<MeltDialogProps, "role" | "ids" | "forceVisible" | "openFocus" | "closeFocus">
-	> & {
-		/**
-		 * The open state of the dialog.
-		 * You can bind this to a boolean value to programmatically control the open state.
-		 *
-		 * @defaultValue false
-		 */
-		open?: MeltDialogProps["defaultOpen"] & {};
-
-		/**
-		 * A callback function called when the open state changes.
-		 */
-		onOpenChange?: OnChangeFn<boolean>;
+	PrimitiveButtonAttributes,
+	PrimitiveDivAttributes,
+	WithAsChild,
+} from "$lib/internal/types.js";
+import type { PortalProps } from "$lib/bits/utilities/portal/index.js";
+import type { EventCallback } from "$lib/internal/events.js";
+
+export type DialogRootPropsWithoutHTML = {
+	/**
+	 * The open state of the dialog.
+	 */
+	open?: boolean;
+
+	/**
+	 * A callback that is called when the popover's open state changes.
+	 */
+	onOpenChange?: OnChangeFn<boolean>;
+
+	children?: Snippet;
+};
 
-		/**
-		 * Override the default autofocus behavior of the dialog when it opens
-		 */
-		openFocus?: FocusProp;
+export type DialogRootProps = DialogRootPropsWithoutHTML;
 
-		/**
-		 * Override the default autofocus behavior of the dialog after close
-		 */
-		closeFocus?: FocusProp;
-	}
+export type DialogContentPropsWithoutHTML = WithAsChild<
+	EscapeLayerProps &
+		DismissableLayerProps &
+		PresenceLayerProps &
+		FocusScopeProps &
+		TextSelectionLayerProps & {
+			preventScroll?: boolean;
+		}
 >;
 
-export type DialogTriggerPropsWithoutHTML = DOMElement<HTMLButtonElement>;
+export type DialogContentProps = DialogContentPropsWithoutHTML & PrimitiveDivAttributes;
 
-export type DialogClosePropsWithoutHTML = DialogTriggerPropsWithoutHTML;
+export type DialogOverlayPropsWithoutHTML = WithAsChild<PresenceLayerProps>;
+export type DialogOverlayProps = DialogOverlayPropsWithoutHTML & PrimitiveDivAttributes;
 
-export type DialogContentPropsWithoutHTML<
-	T extends Transition = Transition,
-	In extends Transition = Transition,
-	Out extends Transition = Transition,
-> = Expand<TransitionProps<T, In, Out> & DOMElement>;
+export type DialogPortalPropsWithoutHTML = PortalProps;
+export type DialogPortalProps = DialogPortalPropsWithoutHTML;
 
-export type DialogDescriptionPropsWithoutHTML = DOMElement;
+export type DialogTriggerPropsWithoutHTML = WithAsChild<{
+	onclick?: EventCallback<MouseEvent>;
+}>;
 
-export type DialogOverlayPropsWithoutHTML<
-	T extends Transition = Transition,
-	In extends Transition = Transition,
-	Out extends Transition = Transition,
-> = Expand<TransitionProps<T, In, Out> & DOMElement>;
+export type DialogTriggerProps = DialogTriggerPropsWithoutHTML & PrimitiveButtonAttributes;
 
-export type DialogPortalPropsWithoutHTML = DOMElement;
+export type DialogTitlePropsWithoutHTML = WithAsChild<{
+	/**
+	 * The heading level of the dialog title.
+	 */
+	level?: 1 | 2 | 3 | 4 | 5 | 6;
+}>;
 
-export type DialogTitlePropsWithoutHTML = Expand<
-	{
-		level?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-	} & DOMElement<HTMLHeadingElement>
->;
-
-export type DialogProps = DialogPropsWithoutHTML;
+export type DialogTitleProps = DialogTitlePropsWithoutHTML & PrimitiveDivAttributes;
 
-export type DialogTriggerProps = DialogTriggerPropsWithoutHTML & HTMLButtonAttributes;
+export type DialogClosePropsWithoutHTML = DialogTriggerPropsWithoutHTML;
 export type DialogCloseProps = DialogTriggerProps;
 
-export type DialogContentProps<
-	T extends Transition = Transition,
-	In extends Transition = Transition,
-	Out extends Transition = Transition,
-> = DialogContentPropsWithoutHTML<T, In, Out> & HTMLDivAttributes;
-
-export type DialogDescriptionProps = DialogDescriptionPropsWithoutHTML & HTMLDivAttributes;
-
-export type DialogOverlayProps<
-	T extends Transition = Transition,
-	In extends Transition = Transition,
-	Out extends Transition = Transition,
-> = DialogOverlayPropsWithoutHTML<T, In, Out> & HTMLDivAttributes;
-
-export type DialogPortalProps = DialogPortalPropsWithoutHTML & HTMLDivAttributes;
-export type DialogTitleProps = DialogTitlePropsWithoutHTML & HTMLHeadingAttributes;
-
-export type DialogOverlayEvents<T extends Element = HTMLElement> = {
-	mouseup: SvelteEvent<MouseEvent, T>;
-};
-
-export type DialogContentEvents<T extends Element = HTMLElement> = {
-	pointerdown: SvelteEvent<PointerEvent, T>;
-	pointerup: SvelteEvent<PointerEvent, T>;
-	pointermove: SvelteEvent<PointerEvent, T>;
-	touchend: SvelteEvent<TouchEvent, T>;
-	touchstart: SvelteEvent<TouchEvent, T>;
-	touchcancel: SvelteEvent<TouchEvent, T>;
-	touchmove: SvelteEvent<TouchEvent, T>;
-};
-
-export type DialogTriggerEvents<T extends Element = HTMLButtonElement> = {
-	click: CustomEventHandler<MouseEvent, T>;
-	keydown: CustomEventHandler<KeyboardEvent, T>;
-};
-export type DialogCloseEvents = DialogTriggerEvents;
+export type DialogDescriptionPropsWithoutHTML = WithAsChild<{}>;
+export type DialogDescriptionProps = DialogDescriptionPropsWithoutHTML & PrimitiveDivAttributes;
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 119f168f2..7c694f59a 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
@@ -12,6 +12,9 @@
 		id = useId(),
 		forceMount = false,
 		onDestroyAutoFocus = noop,
+		onEscapeKeydown = noop,
+		onInteractOutside = noop,
+		loop = true,
 		...restProps
 	}: ContentProps = $props();
 
@@ -24,8 +27,16 @@
 	{...restProps}
 	present={state.root.open.value || forceMount}
 	{id}
-	onInteractOutside={state.root.close}
-	onEscape={state.root.close}
+	onInteractOutside={(e) => {
+		onInteractOutside(e);
+		if (e.defaultPrevented) return;
+		state.root.close();
+	}}
+	onEscapeKeydown={(e) => {
+		// TODO: users should be able to cancel this
+		onEscapeKeydown(e);
+		state.root.close();
+	}}
 	onDestroyAutoFocus={(e) => {
 		onDestroyAutoFocus(e);
 		if (e.defaultPrevented) return;
@@ -33,7 +44,7 @@
 		state.root.triggerNode?.value?.focus();
 	}}
 	trapped
-	loop
+	{loop}
 >
 	{#snippet popper({ props })}
 		{@const mergedProps = mergeProps(restProps, state.props, props)}
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 e2885ab84..39a1154c2 100644
--- a/packages/bits-ui/src/lib/bits/popover/popover.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/popover/popover.svelte.ts
@@ -8,7 +8,7 @@ import {
 } from "$lib/internal/box.svelte.js";
 import { useNodeById } from "$lib/internal/useNodeById.svelte.js";
 import { kbd } from "$lib/internal/kbd.js";
-import { getAriaExpanded, getDataOpenClosed, getHiddenAttr } from "$lib/internal/attrs.js";
+import { getAriaExpanded, getDataOpenClosed } from "$lib/internal/attrs.js";
 import { verifyContextDeps } from "$lib/internal/context.js";
 
 type PopoverRootStateProps = BoxedValues<{
@@ -96,12 +96,10 @@ type PopoverContentStateProps = ReadonlyBoxedValues<{
 
 class PopoverContentState {
 	#id = undefined as unknown as PopoverContentStateProps["id"];
-	#node = undefined as unknown as Box<HTMLElement | null>;
 	root = undefined as unknown as PopoverRootState;
 
 	constructor(props: PopoverContentStateProps, root: PopoverRootState) {
 		this.#id = props.id;
-		this.#node = useNodeById(this.#id);
 		this.root = root;
 	}
 
@@ -114,20 +112,20 @@ class PopoverContentState {
 }
 
 class PopoverCloseState {
-	root = undefined as unknown as PopoverRootState;
+	#root = undefined as unknown as PopoverRootState;
 
 	constructor(root: PopoverRootState) {
-		this.root = root;
+		this.#root = root;
 	}
 
 	#onclick = () => {
-		this.root.close();
+		this.#root.close();
 	};
 
 	#onkeydown = (e: KeyboardEvent) => {
 		if (!(e.key === kbd.ENTER || e.key === kbd.SPACE)) return;
 		e.preventDefault();
-		this.root.close();
+		this.#root.close();
 	};
 
 	props = $derived({
diff --git a/packages/bits-ui/src/lib/bits/popover/types.ts b/packages/bits-ui/src/lib/bits/popover/types.ts
index bae972d88..42111a4db 100644
--- a/packages/bits-ui/src/lib/bits/popover/types.ts
+++ b/packages/bits-ui/src/lib/bits/popover/types.ts
@@ -1,5 +1,6 @@
 import type { Snippet } from "svelte";
 import type { ArrowProps, ArrowPropsWithoutHTML } from "../utilities/arrow/types.js";
+import type { PopperLayerProps } from "../utilities/popper-layer/types.js";
 import type {
 	EventCallback,
 	OnChangeFn,
@@ -8,7 +9,6 @@ import type {
 	WithAsChild,
 } from "$lib/internal/index.js";
 import type { CustomEventHandler } from "$lib/index.js";
-import type { FloatingLayer } from "$lib/bits/utilities/floating-layer/index.js";
 
 export type PopoverRootPropsWithoutHTML = {
 	/**
@@ -27,23 +27,9 @@ export type PopoverRootPropsWithoutHTML = {
 	children?: Snippet;
 };
 
-export type PopoverRootProps = PopoverRootPropsWithoutHTML & PrimitiveDivAttributes;
+export type PopoverRootProps = PopoverRootPropsWithoutHTML;
 
-export type PopoverContentPropsWithoutHTML = WithAsChild<
-	Partial<Omit<FloatingLayer.ContentProps, "content">> & {
-		forceMount?: boolean;
-	} & {
-		onMountAutoFocus?: EventCallback;
-		onDestroyAutoFocus?: EventCallback;
-	} & {
-		/**
-		 * Whether to prevent scrolling the body when the popover is open or not.
-		 *
-		 * @defaultValue true
-		 */
-		preventScroll?: boolean;
-	}
->;
+export type PopoverContentPropsWithoutHTML = WithAsChild<PopperLayerProps>;
 
 export type PopoverContentProps = PopoverContentPropsWithoutHTML & PrimitiveDivAttributes;
 
diff --git a/packages/bits-ui/src/lib/bits/utilities/dismissable-layer/dismissable-layer.svelte b/packages/bits-ui/src/lib/bits/utilities/dismissable-layer/dismissable-layer.svelte
index 7394982a4..3d615c9b1 100644
--- a/packages/bits-ui/src/lib/bits/utilities/dismissable-layer/dismissable-layer.svelte
+++ b/packages/bits-ui/src/lib/bits/utilities/dismissable-layer/dismissable-layer.svelte
@@ -1,20 +1,20 @@
 <script lang="ts">
-	import type { DismissableLayerProps } from "./types.js";
-	import { useDismissableLayer } from "./use-dismissable-layer.svelte.js";
+	import type { DismissableLayerImplProps } from "./types.js";
+	import { useDismissableLayer } from "./useDismissableLayer.svelte.js";
 	import { noop, readonlyBox } from "$lib/internal/index.js";
 
 	let {
-		behaviorType = "close",
+		interactOutsideBehavior = "close",
 		onInteractOutside = noop,
 		onInteractOutsideStart = noop,
 		id,
 		children,
 		present,
-	}: DismissableLayerProps = $props();
+	}: DismissableLayerImplProps = $props();
 
 	useDismissableLayer({
 		id: readonlyBox(() => id),
-		behaviorType: readonlyBox(() => behaviorType),
+		interactOutsideBehavior: readonlyBox(() => interactOutsideBehavior),
 		onInteractOutside: readonlyBox(() => onInteractOutside),
 		onInteractOutsideStart: readonlyBox(() => onInteractOutsideStart),
 		present: readonlyBox(() => present),
diff --git a/packages/bits-ui/src/lib/bits/utilities/dismissable-layer/types.ts b/packages/bits-ui/src/lib/bits/utilities/dismissable-layer/types.ts
index 044e3fca4..0e73c966d 100644
--- a/packages/bits-ui/src/lib/bits/utilities/dismissable-layer/types.ts
+++ b/packages/bits-ui/src/lib/bits/utilities/dismissable-layer/types.ts
@@ -10,13 +10,6 @@ export type InteractOutsideBehaviorType =
 	| "ignore";
 
 export type DismissableLayerProps = {
-	/**
-	 * DOM ID of the node.
-	 */
-	id: string;
-
-	children?: Snippet;
-
 	/**
 	 * Callback fired when an outside interaction event completes,
 	 * which is either a `pointerup`, `mouseup`, or `touchend`
@@ -44,14 +37,23 @@ export type DismissableLayerProps = {
 	 *
 	 * @defaultValue `close`
 	 */
-	behaviorType?: InteractOutsideBehaviorType;
+	interactOutsideBehavior?: InteractOutsideBehaviorType;
+};
 
+export type DismissableLayerImplProps = {
 	/**
 	 * Whether the layer is active. Currently, we determine this with the
 	 * `presence` returned from the `presence` layer.
 	 */
 	present: boolean;
-};
+
+	/**
+	 * ID of the layer.
+	 */
+	id: string;
+
+	children?: Snippet;
+} & DismissableLayerProps;
 
 export type InteractOutsideInterceptEventType =
 	| "pointerdown"
diff --git a/packages/bits-ui/src/lib/bits/utilities/dismissable-layer/use-dismissable-layer.svelte.ts b/packages/bits-ui/src/lib/bits/utilities/dismissable-layer/useDismissableLayer.svelte.ts
similarity index 98%
rename from packages/bits-ui/src/lib/bits/utilities/dismissable-layer/use-dismissable-layer.svelte.ts
rename to packages/bits-ui/src/lib/bits/utilities/dismissable-layer/useDismissableLayer.svelte.ts
index 60ebcfd08..8375c5327 100644
--- a/packages/bits-ui/src/lib/bits/utilities/dismissable-layer/use-dismissable-layer.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/utilities/dismissable-layer/useDismissableLayer.svelte.ts
@@ -1,5 +1,6 @@
 import { untrack } from "svelte";
 import type {
+	DismissableLayerImplProps,
 	DismissableLayerProps,
 	InteractOutsideBehaviorType,
 	InteractOutsideEvent,
@@ -36,7 +37,7 @@ const interactOutsideEndEvents = [
 ] satisfies InteractOutsideInterceptEventType[];
 
 type DismissableLayerStateProps = ReadonlyBoxedValues<
-	Required<Omit<DismissableLayerProps, "children">>
+	Required<Omit<DismissableLayerImplProps, "children">>
 >;
 
 export class DismissableLayerState {
@@ -60,7 +61,7 @@ export class DismissableLayerState {
 
 	constructor(props: DismissableLayerStateProps) {
 		this.node = useNodeById(props.id);
-		this.#behaviorType = props.behaviorType;
+		this.#behaviorType = props.interactOutsideBehavior;
 		this.#interactOutsideStartProp = props.onInteractOutsideStart;
 		this.#interactOutsideProp = props.onInteractOutside;
 		this.#present = props.present;
diff --git a/packages/bits-ui/src/lib/bits/utilities/escape-layer/escape-layer.svelte b/packages/bits-ui/src/lib/bits/utilities/escape-layer/escape-layer.svelte
index 82db0a95e..56cb8c6d8 100644
--- a/packages/bits-ui/src/lib/bits/utilities/escape-layer/escape-layer.svelte
+++ b/packages/bits-ui/src/lib/bits/utilities/escape-layer/escape-layer.svelte
@@ -1,13 +1,18 @@
 <script lang="ts">
-	import type { EscapeLayerProps } from "./types.js";
-	import { useEscapeLayer } from "./use-escape-layer.svelte.js";
+	import type { EscapeLayerImplProps } from "./types.js";
+	import { useEscapeLayer } from "./useEscapeLayer.svelte.js";
 	import { noop, readonlyBox } from "$lib/internal/index.js";
 
-	let { behaviorType = "close", onEscape = noop, children, present }: EscapeLayerProps = $props();
+	let {
+		behaviorType = "close",
+		onEscapeKeydown = noop,
+		children,
+		present,
+	}: EscapeLayerImplProps = $props();
 
 	useEscapeLayer({
 		behaviorType: readonlyBox(() => behaviorType),
-		onEscape: readonlyBox(() => onEscape),
+		onEscapeKeydown: readonlyBox(() => onEscapeKeydown),
 		present: readonlyBox(() => present),
 	});
 </script>
diff --git a/packages/bits-ui/src/lib/bits/utilities/escape-layer/types.ts b/packages/bits-ui/src/lib/bits/utilities/escape-layer/types.ts
index f0dd2e5b4..39090c132 100644
--- a/packages/bits-ui/src/lib/bits/utilities/escape-layer/types.ts
+++ b/packages/bits-ui/src/lib/bits/utilities/escape-layer/types.ts
@@ -7,12 +7,10 @@ export type EscapeBehaviorType =
 	| "ignore";
 
 export type EscapeLayerProps = {
-	children?: Snippet;
-
 	/**
 	 * Callback fired when escape is pressed.
 	 */
-	onEscape?: (e: KeyboardEvent) => void;
+	onEscapeKeydown?: (e: KeyboardEvent) => void;
 
 	/**
 	 * Escape behavior type.
@@ -24,10 +22,15 @@ export type EscapeLayerProps = {
 	 * @defaultValue `close`
 	 */
 	behaviorType?: EscapeBehaviorType;
+};
 
+// internal props not exposed to the user but used in the implementation
+export type EscapeLayerImplProps = {
 	/**
 	 * Whether the layer is enabled. Currently, we determine this with the
 	 * `presence` returned from the `presence` layer.
 	 */
 	present: boolean;
-};
+
+	children?: Snippet;
+} & EscapeLayerProps;
diff --git a/packages/bits-ui/src/lib/bits/utilities/escape-layer/use-escape-layer.svelte.ts b/packages/bits-ui/src/lib/bits/utilities/escape-layer/useEscapeLayer.svelte.ts
similarity index 93%
rename from packages/bits-ui/src/lib/bits/utilities/escape-layer/use-escape-layer.svelte.ts
rename to packages/bits-ui/src/lib/bits/utilities/escape-layer/useEscapeLayer.svelte.ts
index 4c2414d8b..71395df82 100644
--- a/packages/bits-ui/src/lib/bits/utilities/escape-layer/use-escape-layer.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/utilities/escape-layer/useEscapeLayer.svelte.ts
@@ -1,5 +1,5 @@
 import { untrack } from "svelte";
-import type { EscapeBehaviorType, EscapeLayerProps } from "./types.js";
+import type { EscapeBehaviorType, EscapeLayerImplProps } from "./types.js";
 import type { ReadonlyBox, ReadonlyBoxedValues } from "$lib/internal/box.svelte.js";
 import { type EventCallback, addEventListener } from "$lib/internal/events.js";
 import { kbd } from "$lib/internal/kbd.js";
@@ -7,7 +7,7 @@ import { noop } from "$lib/internal/callbacks.js";
 
 const layers = new Map<EscapeLayerState, ReadonlyBox<EscapeBehaviorType>>();
 
-type EscapeLayerStateProps = ReadonlyBoxedValues<Required<Omit<EscapeLayerProps, "children">>>;
+type EscapeLayerStateProps = ReadonlyBoxedValues<Required<Omit<EscapeLayerImplProps, "children">>>;
 
 export class EscapeLayerState {
 	#onEscapeProp: ReadonlyBox<EventCallback<KeyboardEvent>>;
@@ -16,7 +16,7 @@ export class EscapeLayerState {
 
 	constructor(props: EscapeLayerStateProps) {
 		this.#behaviorType = props.behaviorType;
-		this.#onEscapeProp = props.onEscape;
+		this.#onEscapeProp = props.onEscapeKeydown;
 		this.#present = props.present;
 
 		let unsubEvents = noop;
diff --git a/packages/bits-ui/src/lib/bits/utilities/floating-layer/components/floating-layer-anchor.svelte b/packages/bits-ui/src/lib/bits/utilities/floating-layer/components/floating-layer-anchor.svelte
index 20c732302..e2734c8f1 100644
--- a/packages/bits-ui/src/lib/bits/utilities/floating-layer/components/floating-layer-anchor.svelte
+++ b/packages/bits-ui/src/lib/bits/utilities/floating-layer/components/floating-layer-anchor.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { setFloatingAnchorState } from "../floating-layer.svelte.js";
+	import { setFloatingAnchorState } from "../useFloatingLayer.svelte.js";
 	import type { AnchorProps } from "./index.js";
 	import { readonlyBox } from "$lib/internal/box.svelte.js";
 
diff --git a/packages/bits-ui/src/lib/bits/utilities/floating-layer/components/floating-layer-arrow.svelte b/packages/bits-ui/src/lib/bits/utilities/floating-layer/components/floating-layer-arrow.svelte
index fb9f6c9e1..8b93c28bb 100644
--- a/packages/bits-ui/src/lib/bits/utilities/floating-layer/components/floating-layer-arrow.svelte
+++ b/packages/bits-ui/src/lib/bits/utilities/floating-layer/components/floating-layer-arrow.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { setFloatingArrowState } from "../floating-layer.svelte.js";
+	import { setFloatingArrowState } from "../useFloatingLayer.svelte.js";
 	import { Arrow, type ArrowProps } from "$lib/bits/utilities/arrow/index.js";
 	import { mergeProps, readonlyBox, useId } from "$lib/internal/index.js";
 
diff --git a/packages/bits-ui/src/lib/bits/utilities/floating-layer/components/floating-layer-content.svelte b/packages/bits-ui/src/lib/bits/utilities/floating-layer/components/floating-layer-content.svelte
index f3c28bc85..4f6eb2572 100644
--- a/packages/bits-ui/src/lib/bits/utilities/floating-layer/components/floating-layer-content.svelte
+++ b/packages/bits-ui/src/lib/bits/utilities/floating-layer/components/floating-layer-content.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { setFloatingContentState } from "../floating-layer.svelte.js";
-	import type { ContentProps } from "./index.js";
+	import { setFloatingContentState } from "../useFloatingLayer.svelte.js";
+	import type { ContentImplProps } from "./index.js";
 	import { mergeProps, readonlyBox, useId } from "$lib/internal/index.js";
 	import { useBodyScrollLock } from "$lib/internal/useBodyScrollLock.svelte.js";
 
@@ -24,7 +24,8 @@
 		style = {},
 		present,
 		wrapperId = useId(),
-	}: ContentProps = $props();
+		preventScroll = true,
+	}: ContentImplProps = $props();
 
 	const state = setFloatingContentState({
 		side: readonlyBox(() => side),
@@ -47,9 +48,15 @@
 		wrapperId: readonlyBox(() => wrapperId),
 	});
 
-	const mergedProps = $derived(mergeProps(state.wrapperProps));
+	const mergedProps = $derived(
+		mergeProps(state.wrapperProps, {
+			style: {
+				pointerEvents: "auto",
+			},
+		})
+	);
 
-	useBodyScrollLock(true);
+	useBodyScrollLock(preventScroll);
 </script>
 
 <div {...mergedProps}>
diff --git a/packages/bits-ui/src/lib/bits/utilities/floating-layer/components/floating-layer.svelte b/packages/bits-ui/src/lib/bits/utilities/floating-layer/components/floating-layer.svelte
index cdd61abdb..388f7b2ab 100644
--- a/packages/bits-ui/src/lib/bits/utilities/floating-layer/components/floating-layer.svelte
+++ b/packages/bits-ui/src/lib/bits/utilities/floating-layer/components/floating-layer.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
-	import { setFloatingRootState } from "../floating-layer.svelte.js";
+	import { setFloatingRootState } from "../useFloatingLayer.svelte.js";
 
 	let { children }: { children?: Snippet } = $props();
 
diff --git a/packages/bits-ui/src/lib/bits/utilities/floating-layer/components/index.ts b/packages/bits-ui/src/lib/bits/utilities/floating-layer/components/index.ts
index c64cdb147..8e3d3eba0 100644
--- a/packages/bits-ui/src/lib/bits/utilities/floating-layer/components/index.ts
+++ b/packages/bits-ui/src/lib/bits/utilities/floating-layer/components/index.ts
@@ -4,6 +4,7 @@ export { default as Content } from "./floating-layer-content.svelte";
 export { default as Root } from "./floating-layer.svelte";
 
 export type {
+	FloatingLayerContentImplProps as ContentImplProps,
 	FloatingLayerContentProps as ContentProps,
 	FloatingLayerAnchorProps as AnchorProps,
 } from "../types.js";
diff --git a/packages/bits-ui/src/lib/bits/utilities/floating-layer/types.ts b/packages/bits-ui/src/lib/bits/utilities/floating-layer/types.ts
index f76793c4d..84c9ee3ae 100644
--- a/packages/bits-ui/src/lib/bits/utilities/floating-layer/types.ts
+++ b/packages/bits-ui/src/lib/bits/utilities/floating-layer/types.ts
@@ -1,10 +1,9 @@
 import type { Snippet } from "svelte";
-import type { Align, Boundary, Side } from "./floating-layer.svelte.js";
+import type { Align, Boundary, Side } from "./useFloatingLayer.svelte.js";
 import type { Arrayable } from "$lib/internal/types.js";
-import type { StyleProperties, Direction } from "$lib/shared/index.js";
+import type { Direction, StyleProperties } from "$lib/shared/index.js";
 
 export type FloatingLayerContentProps = {
-	id: string;
 	/**
 	 * The preferred side of the anchor to render against when open.
 	 * Will be reversed when collisions occur.
@@ -76,11 +75,6 @@ export type FloatingLayerContentProps = {
 
 	updatePositionStrategy?: "optimized" | "always";
 
-	/**
-	 * Callback that is called when the floating element is placed.
-	 */
-	onPlaced?: () => void;
-
 	content?: Snippet<[{ props: Record<string, unknown> }]>;
 
 	/**
@@ -95,10 +89,13 @@ export type FloatingLayerContentProps = {
 	dir?: Direction;
 
 	/**
-	 * The style properties to apply to the content.
+	 * Whether to prevent scrolling the body when the content is open.
 	 */
-	style?: StyleProperties;
+	preventScroll?: boolean;
+};
 
+export type FloatingLayerContentImplProps = {
+	id: string;
 	/**
 	 * Whether the floating layer is present.
 	 */
@@ -108,7 +105,17 @@ export type FloatingLayerContentProps = {
 	 * The ID of the content wrapper element.
 	 */
 	wrapperId?: string;
-};
+
+	/**
+	 * The style properties to apply to the content.
+	 */
+	style?: StyleProperties;
+
+	/**
+	 * Callback that is called when the floating element is placed.
+	 */
+	onPlaced?: () => void;
+} & FloatingLayerContentProps;
 
 export type FloatingLayerAnchorProps = {
 	id: string;
diff --git a/packages/bits-ui/src/lib/bits/utilities/floating-layer/floating-layer.svelte.ts b/packages/bits-ui/src/lib/bits/utilities/floating-layer/useFloatingLayer.svelte.ts
similarity index 100%
rename from packages/bits-ui/src/lib/bits/utilities/floating-layer/floating-layer.svelte.ts
rename to packages/bits-ui/src/lib/bits/utilities/floating-layer/useFloatingLayer.svelte.ts
diff --git a/packages/bits-ui/src/lib/bits/utilities/focus-scope/focus-scope.svelte b/packages/bits-ui/src/lib/bits/utilities/focus-scope/focus-scope.svelte
index bf23a5926..0dbb1d81e 100644
--- a/packages/bits-ui/src/lib/bits/utilities/focus-scope/focus-scope.svelte
+++ b/packages/bits-ui/src/lib/bits/utilities/focus-scope/focus-scope.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { FocusScopeProps } from "./types.js";
-	import { useFocusScope } from "./use-focus-scope.svelte.js";
+	import type { FocusScopeImplProps } from "./types.js";
+	import { useFocusScope } from "./useFocusScope.svelte.js";
 	import { readonlyBox } from "$lib/internal/box.svelte.js";
 	import { noop } from "$lib/internal/callbacks.js";
 
@@ -11,7 +11,7 @@
 		onDestroyAutoFocus = noop,
 		onMountAutoFocus = noop,
 		focusScope,
-	}: FocusScopeProps = $props();
+	}: FocusScopeImplProps = $props();
 
 	const state = useFocusScope({
 		trapped: readonlyBox(() => trapped),
diff --git a/packages/bits-ui/src/lib/bits/utilities/focus-scope/types.ts b/packages/bits-ui/src/lib/bits/utilities/focus-scope/types.ts
index 7f7566162..da4731b13 100644
--- a/packages/bits-ui/src/lib/bits/utilities/focus-scope/types.ts
+++ b/packages/bits-ui/src/lib/bits/utilities/focus-scope/types.ts
@@ -1,13 +1,8 @@
 import type { Snippet } from "svelte";
-import type { FocusScopeContainerProps } from "./use-focus-scope.svelte.js";
+import type { FocusScopeContainerProps } from "./useFocusScope.svelte.js";
 import type { EventCallback } from "$lib/internal/events.js";
 
 export type FocusScopeProps = {
-	/**
-	 * The ID of the focus scope container node.
-	 */
-	id: string;
-
 	/**
 	 * When `true` will loop through the tabbable elements in the focus scope.
 	 *
@@ -15,13 +10,6 @@ export type FocusScopeProps = {
 	 */
 	loop?: boolean;
 
-	/**
-	 * Whether focus is trapped within the focus scope.
-	 *
-	 * @defaultValue false
-	 */
-	trapped?: boolean;
-
 	/**
 	 * Event handler called when auto-focusing onMount.
 	 * Can be prevented.
@@ -33,6 +21,20 @@ export type FocusScopeProps = {
 	 * Can be prevented.
 	 */
 	onDestroyAutoFocus?: EventCallback;
+};
+
+export type FocusScopeImplProps = {
+	/**
+	 * The ID of the focus scope container node.
+	 */
+	id: string;
+
+	/**
+	 * Whether focus is trapped within the focus scope.
+	 *
+	 * @defaultValue false
+	 */
+	trapped?: boolean;
 
 	focusScope?: Snippet<[{ props: FocusScopeContainerProps }]>;
-};
+} & FocusScopeProps;
diff --git a/packages/bits-ui/src/lib/bits/utilities/focus-scope/use-focus-scope.svelte.ts b/packages/bits-ui/src/lib/bits/utilities/focus-scope/useFocusScope.svelte.ts
similarity index 94%
rename from packages/bits-ui/src/lib/bits/utilities/focus-scope/use-focus-scope.svelte.ts
rename to packages/bits-ui/src/lib/bits/utilities/focus-scope/useFocusScope.svelte.ts
index de55849fa..f3ba1b416 100644
--- a/packages/bits-ui/src/lib/bits/utilities/focus-scope/use-focus-scope.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/utilities/focus-scope/useFocusScope.svelte.ts
@@ -19,6 +19,7 @@ import { useNodeById } from "$lib/internal/useNodeById.svelte.js";
 import { isHTMLElement } from "$lib/internal/is.js";
 import { executeCallbacks } from "$lib/internal/callbacks.js";
 import { kbd } from "$lib/internal/kbd.js";
+import { afterTick } from "$lib/internal/after-tick.js";
 
 type UseFocusScopeProps = ReadonlyBoxedValues<{
 	/**
@@ -72,6 +73,7 @@ export function useFocusScope({
 
 	$effect(() => {
 		const container = node.value;
+		if (!container) return;
 		if (!trapped.value) return;
 
 		function handleFocusIn(event: FocusEvent) {
@@ -154,11 +156,13 @@ export function useFocusScope({
 			container.dispatchEvent(mountEvent);
 
 			if (!mountEvent.defaultPrevented) {
-				focusFirst(removeLinks(getTabbableCandidates(container)), { select: true });
+				afterTick(() => {
+					focusFirst(removeLinks(getTabbableCandidates(container)), { select: true });
 
-				if (document.activeElement === previouslyFocusedElement) {
-					focus(container);
-				}
+					if (document.activeElement === previouslyFocusedElement) {
+						focus(container);
+					}
+				});
 			}
 		}
 
@@ -195,9 +199,9 @@ export function useFocusScope({
 		const focusedElement = document.activeElement as HTMLElement | null;
 
 		if (!(isTabKey && focusedElement)) return;
+		const container = node.value;
+		if (!container) return;
 
-		const container = e.currentTarget;
-		if (!isHTMLElement(container)) return;
 		const [first, last] = getTabbableEdges(container);
 		const hasTabbableElementsInside = first && last;
 
diff --git a/packages/bits-ui/src/lib/bits/utilities/popper-layer/popper-layer.svelte b/packages/bits-ui/src/lib/bits/utilities/popper-layer/popper-layer.svelte
index 1a42f1c59..eaa7d4dc2 100644
--- a/packages/bits-ui/src/lib/bits/utilities/popper-layer/popper-layer.svelte
+++ b/packages/bits-ui/src/lib/bits/utilities/popper-layer/popper-layer.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { PopperLayerProps } from "./index.js";
+	import type { PopperLayerImplProps } from "./types.js";
 	import { FloatingLayer } from "$lib/bits/utilities/floating-layer/index.js";
 	import { EscapeLayer } from "$lib/bits/utilities/escape-layer/index.js";
 	import { DismissableLayer } from "$lib/bits/utilities/dismissable-layer/index.js";
@@ -8,7 +8,7 @@
 	import { FocusScope } from "$lib/bits/utilities/focus-scope/index.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
 
-	let { popper, ...restProps }: PopperLayerProps = $props();
+	let { popper, ...restProps }: PopperLayerImplProps = $props();
 </script>
 
 <PresenceLayer {...restProps}>
@@ -21,7 +21,11 @@
 							<DismissableLayer {...restProps} present={present.value}>
 								<TextSelectionLayer {...restProps} present={present.value}>
 									{@render popper?.({
-										props: mergeProps(props, focusScopeProps),
+										props: mergeProps(props, focusScopeProps, {
+											style: {
+												pointerEvents: "auto",
+											},
+										}),
 									})}
 								</TextSelectionLayer>
 							</DismissableLayer>
diff --git a/packages/bits-ui/src/lib/bits/utilities/popper-layer/types.ts b/packages/bits-ui/src/lib/bits/utilities/popper-layer/types.ts
index d91730df2..15b68c356 100644
--- a/packages/bits-ui/src/lib/bits/utilities/popper-layer/types.ts
+++ b/packages/bits-ui/src/lib/bits/utilities/popper-layer/types.ts
@@ -1,15 +1,32 @@
 import type { Snippet } from "svelte";
-import type { EscapeLayerProps } from "../escape-layer/types.js";
-import type { DismissableLayerProps } from "../dismissable-layer/types.js";
-import type { FloatingLayerContentProps } from "../floating-layer/types.js";
-import type { TextSelectionLayerProps } from "../text-selection-layer/types.js";
-import type { PresenceLayerProps } from "../presence-layer/types.js";
-import type { FocusScopeProps } from "../focus-scope/types.js";
+import type { EscapeLayerImplProps, EscapeLayerProps } from "../escape-layer/types.js";
+import type {
+	DismissableLayerImplProps,
+	DismissableLayerProps,
+} from "../dismissable-layer/types.js";
+import type {
+	FloatingLayerContentImplProps,
+	FloatingLayerContentProps,
+} from "../floating-layer/types.js";
+import type {
+	TextSelectionLayerImplProps,
+	TextSelectionLayerProps,
+} from "../text-selection-layer/types.js";
+import type { PresenceLayerImplProps, PresenceLayerProps } from "../presence-layer/types.js";
+import type { FocusScopeImplProps, FocusScopeProps } from "../focus-scope/types.js";
 
 export type PopperLayerProps = EscapeLayerProps &
 	DismissableLayerProps &
 	FloatingLayerContentProps &
 	PresenceLayerProps &
-	TextSelectionLayerProps & {
+	TextSelectionLayerProps &
+	FocusScopeProps;
+
+export type PopperLayerImplProps = EscapeLayerImplProps &
+	DismissableLayerImplProps &
+	FloatingLayerContentImplProps &
+	PresenceLayerImplProps &
+	TextSelectionLayerImplProps &
+	FocusScopeImplProps & {
 		popper: Snippet<[{ props: Record<string, unknown> }]>;
-	} & FocusScopeProps;
+	};
diff --git a/packages/bits-ui/src/lib/bits/utilities/portal/use-portal.svelte.ts b/packages/bits-ui/src/lib/bits/utilities/portal/use-portal.svelte.ts
deleted file mode 100644
index 0dc8bd156..000000000
--- a/packages/bits-ui/src/lib/bits/utilities/portal/use-portal.svelte.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { untrack } from "svelte";
-import type { ReadonlyBox } from "$lib/internal/box.svelte.js";
-import { useNodeById } from "$lib/internal/useNodeById.svelte.js";
-
-export function usePortal(id: ReadonlyBox<string>, to: ReadonlyBox<HTMLElement | string>) {
-	const node = useNodeById(id);
-
-	const props = $derived({
-		id: id.value,
-		"data-portal": "",
-	});
-
-	$effect.pre(() => {
-		if (!node.value) return;
-		let target: HTMLElement | null = null;
-		if (typeof to.value === "string") {
-			target = document.querySelector(to.value);
-			if (!target) {
-				throw new Error(`Could not find target element with selector: ${to.value}`);
-			}
-			target.appendChild(node.value);
-		} else if (to.value instanceof HTMLElement) {
-			to.value.appendChild(node.value);
-		} else {
-			throw new TypeError(
-				`Unknown portal target type: ${
-					to.value === null ? "null" : typeof to.value
-				}. Allowed types: string (CSS selector) or HTMLElement.`
-			);
-		}
-	});
-
-	$effect(() => {
-		return () => {
-			untrack(() => node.value?.remove());
-		};
-	});
-
-	return {
-		get props() {
-			return props;
-		},
-	};
-}
diff --git a/packages/bits-ui/src/lib/bits/utilities/presence-layer/presence-layer.svelte b/packages/bits-ui/src/lib/bits/utilities/presence-layer/presence-layer.svelte
index 31307e2a0..dc39a2be4 100644
--- a/packages/bits-ui/src/lib/bits/utilities/presence-layer/presence-layer.svelte
+++ b/packages/bits-ui/src/lib/bits/utilities/presence-layer/presence-layer.svelte
@@ -1,16 +1,9 @@
 <script lang="ts">
-	import type { PresenceLayerProps } from "./types.js";
+	import type { PresenceLayerImplProps } from "./types.js";
 	import { readonlyBox } from "$lib/internal/box.svelte.js";
-	import { usePresence } from "$lib/internal/usePresence.svelte.js";
+	import { usePresence } from "$lib/bits/utilities/presence-layer/usePresence.svelte.js";
 
-	let {
-		present,
-		forceMount: forceMountProp = false,
-		presence,
-		id,
-	}: PresenceLayerProps = $props();
-
-	const forceMount = readonlyBox(() => forceMountProp);
+	let { present, forceMount = false, presence, id }: PresenceLayerImplProps = $props();
 
 	const isPresent = usePresence(
 		readonlyBox(() => present),
@@ -18,6 +11,6 @@
 	);
 </script>
 
-{#if forceMount.value || present || isPresent.value}
+{#if forceMount || present || isPresent.value}
 	{@render presence?.({ present: isPresent })}
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/utilities/presence-layer/types.ts b/packages/bits-ui/src/lib/bits/utilities/presence-layer/types.ts
index 18ee8b8c3..8bd5041d6 100644
--- a/packages/bits-ui/src/lib/bits/utilities/presence-layer/types.ts
+++ b/packages/bits-ui/src/lib/bits/utilities/presence-layer/types.ts
@@ -2,16 +2,17 @@ import type { Snippet } from "svelte";
 
 export type PresenceLayerProps = {
 	/**
-	 * The presence status.
+	 * Whether to force mount the component.
 	 */
-	present: boolean;
+	forceMount?: boolean;
+};
 
+export type PresenceLayerImplProps = PresenceLayerProps & {
+	id: string;
 	/**
-	 * Whether to force mount the component.
+	 * The presence status.
 	 */
-	forceMount?: boolean;
+	present: boolean;
 
 	presence?: Snippet<[{ present: { value: boolean } }]>;
-
-	id: string;
 };
diff --git a/packages/bits-ui/src/lib/internal/usePresence.svelte.ts b/packages/bits-ui/src/lib/bits/utilities/presence-layer/usePresence.svelte.ts
similarity index 99%
rename from packages/bits-ui/src/lib/internal/usePresence.svelte.ts
rename to packages/bits-ui/src/lib/bits/utilities/presence-layer/usePresence.svelte.ts
index b64dc6cda..0ded3a091 100644
--- a/packages/bits-ui/src/lib/internal/usePresence.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/utilities/presence-layer/usePresence.svelte.ts
@@ -1,5 +1,5 @@
 import { onDestroy } from "svelte";
-import { type Box, type ReadonlyBox, boxedState, watch } from "./box.svelte.js";
+import { type Box, type ReadonlyBox, boxedState, watch } from "../../../internal/box.svelte.js";
 import { afterTick, useStateMachine } from "$lib/internal/index.js";
 
 export function usePresence(present: ReadonlyBox<boolean>, id: ReadonlyBox<string>) {
diff --git a/packages/bits-ui/src/lib/bits/utilities/scroll-lock/index.ts b/packages/bits-ui/src/lib/bits/utilities/scroll-lock/index.ts
new file mode 100644
index 000000000..173b605d9
--- /dev/null
+++ b/packages/bits-ui/src/lib/bits/utilities/scroll-lock/index.ts
@@ -0,0 +1,8 @@
+export type ScrollLockProps = {
+	/**
+	 * Whether to prevent body scrolling when the content is open.
+	 *
+	 * @defaultValue true
+	 */
+	preventScroll?: boolean;
+};
diff --git a/packages/bits-ui/src/lib/bits/utilities/scroll-lock/scroll-lock.svelte b/packages/bits-ui/src/lib/bits/utilities/scroll-lock/scroll-lock.svelte
new file mode 100644
index 000000000..a52a62b40
--- /dev/null
+++ b/packages/bits-ui/src/lib/bits/utilities/scroll-lock/scroll-lock.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+	import type { ScrollLockProps } from "./index.js";
+	import { useBodyScrollLock } from "$lib/internal/useBodyScrollLock.svelte.js";
+
+	let { preventScroll = true }: ScrollLockProps = $props();
+
+	useBodyScrollLock(preventScroll);
+</script>
diff --git a/packages/bits-ui/src/lib/bits/utilities/text-selection-layer/text-selection-layer.svelte b/packages/bits-ui/src/lib/bits/utilities/text-selection-layer/text-selection-layer.svelte
index c876e2b36..881bfebea 100644
--- a/packages/bits-ui/src/lib/bits/utilities/text-selection-layer/text-selection-layer.svelte
+++ b/packages/bits-ui/src/lib/bits/utilities/text-selection-layer/text-selection-layer.svelte
@@ -1,20 +1,20 @@
 <script lang="ts">
-	import type { TextSelectionLayerProps } from "./types.js";
-	import { useTextSelectionLayer } from "./use-text-selection-layer.svelte.js";
+	import type { TextSelectionLayerImplProps } from "./types.js";
+	import { useTextSelectionLayer } from "./useTextSelectionLayer.svelte.js";
 	import { noop, readonlyBox } from "$lib/internal/index.js";
 
 	let {
-		enabled = true,
+		preventOverflowTextSelection = true,
 		onPointerDown = noop,
 		onPointerUp = noop,
 		id,
 		children,
 		present,
-	}: TextSelectionLayerProps = $props();
+	}: TextSelectionLayerImplProps = $props();
 
 	useTextSelectionLayer({
 		id: readonlyBox(() => id),
-		enabled: readonlyBox(() => enabled),
+		preventOverflowTextSelection: readonlyBox(() => preventOverflowTextSelection),
 		onPointerDown: readonlyBox(() => onPointerDown),
 		onPointerUp: readonlyBox(() => onPointerUp),
 		present: readonlyBox(() => present),
diff --git a/packages/bits-ui/src/lib/bits/utilities/text-selection-layer/types.ts b/packages/bits-ui/src/lib/bits/utilities/text-selection-layer/types.ts
index da5b093a4..6a3cb8c1c 100644
--- a/packages/bits-ui/src/lib/bits/utilities/text-selection-layer/types.ts
+++ b/packages/bits-ui/src/lib/bits/utilities/text-selection-layer/types.ts
@@ -3,6 +3,21 @@ import type { Snippet } from "svelte";
 export type PointerHandler = (e: PointerEvent) => void;
 
 export type TextSelectionLayerProps = {
+	/**
+	 * Passing `true` will prevent the overflow of text selection
+	 * outside the element, provided the element is the top layer.
+	 * @defaultValue `true`
+	 */
+	preventOverflowTextSelection?: boolean;
+};
+
+export type TextSelectionLayerImplProps = {
+	/**
+	 * Whether the layer is enabled. Currently, we determine this with the
+	 * `presence` returned from the `presence` layer.
+	 */
+	present: boolean;
+
 	/**
 	 * DOM ID of the node.
 	 */
@@ -20,17 +35,4 @@ export type TextSelectionLayerProps = {
 	 * Callback fired when pointerup event triggers.
 	 */
 	onPointerUp?: PointerHandler;
-
-	/**
-	 * Passing `enabled: true` will prevent the overflow of text selection
-	 * outside the element, provided the element is the top layer.
-	 * @defaultValue `true`
-	 */
-	enabled?: boolean;
-
-	/**
-	 * Whether the layer is enabled. Currently, we determine this with the
-	 * `presence` returned from the `presence` layer.
-	 */
-	present: boolean;
-};
+} & TextSelectionLayerProps;
diff --git a/packages/bits-ui/src/lib/bits/utilities/text-selection-layer/use-text-selection-layer.svelte.ts b/packages/bits-ui/src/lib/bits/utilities/text-selection-layer/useTextSelectionLayer.svelte.ts
similarity index 94%
rename from packages/bits-ui/src/lib/bits/utilities/text-selection-layer/use-text-selection-layer.svelte.ts
rename to packages/bits-ui/src/lib/bits/utilities/text-selection-layer/useTextSelectionLayer.svelte.ts
index df179f929..77494d4fe 100644
--- a/packages/bits-ui/src/lib/bits/utilities/text-selection-layer/use-text-selection-layer.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/utilities/text-selection-layer/useTextSelectionLayer.svelte.ts
@@ -1,5 +1,5 @@
 import { untrack } from "svelte";
-import type { TextSelectionLayerProps } from "./types.js";
+import type { TextSelectionLayerImplProps, TextSelectionLayerProps } from "./types.js";
 import {
 	type Box,
 	type EventCallback,
@@ -14,7 +14,7 @@ import {
 	useNodeById,
 } from "$lib/internal/index.js";
 
-type StateProps = ReadonlyBoxedValues<Required<Omit<TextSelectionLayerProps, "children">>>;
+type StateProps = ReadonlyBoxedValues<Required<Omit<TextSelectionLayerImplProps, "children">>>;
 
 const layers = new Map<TextSelectionLayerState, ReadonlyBox<boolean>>();
 
@@ -28,7 +28,7 @@ export class TextSelectionLayerState {
 
 	constructor(props: StateProps) {
 		this.#node = useNodeById(props.id);
-		this.#enabled = props.enabled;
+		this.#enabled = props.preventOverflowTextSelection;
 		this.#onPointerDownProp = props.onPointerDown;
 		this.#onPointerUpProp = props.onPointerUp;
 		this.#present = props.present;
diff --git a/packages/bits-ui/src/lib/internal/index.ts b/packages/bits-ui/src/lib/internal/index.ts
index ff29238cb..dfb1d2315 100644
--- a/packages/bits-ui/src/lib/internal/index.ts
+++ b/packages/bits-ui/src/lib/internal/index.ts
@@ -12,7 +12,7 @@ export * from "./focus.js";
 export * from "./context.js";
 export * from "./box.svelte.js";
 export * from "./useStateMachine.svelte.js";
-export * from "./usePresence.svelte.js";
+export * from "../bits/utilities/presence-layer/usePresence.svelte.js";
 export * from "./useNodeById.svelte.js";
 export * from "./after-tick.js";
 export * from "./locale.js";
diff --git a/sites/docs/src/lib/components/demos/dialog-demo.svelte b/sites/docs/src/lib/components/demos/dialog-demo.svelte
index 2b6a014f4..5337e7ae1 100644
--- a/sites/docs/src/lib/components/demos/dialog-demo.svelte
+++ b/sites/docs/src/lib/components/demos/dialog-demo.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
 	import { Dialog, Label, Separator } from "bits-ui";
-	import { fade } from "svelte/transition";
 	import { LockKeyOpen, X } from "$icons/index.js";
-	import { flyAndScale } from "$lib/utils/index.js";
 </script>
 
 <Dialog.Root>
@@ -15,13 +13,10 @@
 	</Dialog.Trigger>
 	<Dialog.Portal>
 		<Dialog.Overlay
-			transition={fade}
-			transitionConfig={{ duration: 150 }}
-			class="fixed inset-0 z-50 bg-black/80"
+			class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
 		/>
 		<Dialog.Content
-			transition={flyAndScale}
-			class="fixed left-[50%] top-[50%] z-50 w-full max-w-[94%] translate-x-[-50%] translate-y-[-50%] rounded-card-lg border bg-background p-5 shadow-popover outline-none sm:max-w-[490px] md:w-full"
+			class="fixed left-[50%] top-[50%] z-50 w-full max-w-[94%] translate-x-[-50%] translate-y-[-50%] rounded-card-lg border bg-background p-5 shadow-popover outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:max-w-[490px] md:w-full"
 		>
 			<Dialog.Title
 				class="flex w-full items-center justify-center text-lg font-semibold tracking-tight"