diff --git a/package.json b/package.json
index 34d4abc43..f2da07854 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
 		"prettier": "^3.2.5",
 		"prettier-plugin-svelte": "^3.2.2",
 		"prettier-plugin-tailwindcss": "0.5.13",
-		"svelte": "5.0.0-next.108",
+		"svelte": "5.0.0-next.109",
 		"svelte-eslint-parser": "^0.34.1",
 		"wrangler": "^3.44.0"
 	},
diff --git a/packages/bits-ui/package.json b/packages/bits-ui/package.json
index 7b84b4f80..f7d69e0eb 100644
--- a/packages/bits-ui/package.json
+++ b/packages/bits-ui/package.json
@@ -44,7 +44,7 @@
 		"jsdom": "^24.0.0",
 		"publint": "^0.2.7",
 		"resize-observer-polyfill": "^1.5.1",
-		"svelte": "5.0.0-next.108",
+		"svelte": "5.0.0-next.109",
 		"svelte-check": "^3.6.9",
 		"tslib": "^2.6.2",
 		"typescript": "^5.3.3",
diff --git a/packages/bits-ui/src/lib/bits/index.ts b/packages/bits-ui/src/lib/bits/index.ts
index 9122e0fdd..aef73a2ea 100644
--- a/packages/bits-ui/src/lib/bits/index.ts
+++ b/packages/bits-ui/src/lib/bits/index.ts
@@ -9,9 +9,9 @@ export * as Collapsible from "./collapsible/index.js";
 export * as Combobox from "./combobox/index.js";
 export * as ContextMenu from "./context-menu/index.js";
 export * as DateField from "./date-field/index.js";
-export * as DatePicker from "./date-picker/index.js";
+// export * as DatePicker from "./date-picker/index.js";
 export * as DateRangeField from "./date-range-field/index.js";
-export * as DateRangePicker from "./date-range-picker/index.js";
+// export * as DateRangePicker from "./date-range-picker/index.js";
 export * as Dialog from "./dialog/index.js";
 export * as DropdownMenu from "./dropdown-menu/index.js";
 export * as Label from "./label/index.js";
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 2adb2ed97..c1f822292 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
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { ContentProps } from "../index.js";
 	import { setPopoverContentState } from "../popover.svelte.js";
-	import { FloatingLayer, PresenceLayer } from "$lib/bits/utilities/index.js";
+	import { PopperLayer } from "$lib/bits/utilities/index.js";
 	import { readonlyBox } from "$lib/internal/box.svelte.js";
 	import { generateId } from "$lib/internal/id.js";
 
@@ -21,24 +21,27 @@
 	});
 </script>
 
-<PresenceLayer.Root forceMount={true} present={state.root.open.value || forceMount} {id}>
-	{#snippet presence({ present })}
-		<FloatingLayer.Content {id} {style} {...restProps}>
-			{#snippet content({ props })}
-				{@const mergedProps = {
-					...state.props,
-					...props,
-					hidden: present.value ? undefined : true,
-					...restProps,
-				}}
-				{#if asChild}
-					{@render child?.({ props: mergedProps })}
-				{:else}
-					<div {...mergedProps} bind:this={el}>
-						{@render children?.()}
-					</div>
-				{/if}
-			{/snippet}
-		</FloatingLayer.Content>
+<PopperLayer.Root
+	{...restProps}
+	forceMount={true}
+	present={state.root.open.value || forceMount}
+	{id}
+	{style}
+	onInteractOutside={state.root.close}
+	onEscape={state.root.close}
+>
+	{#snippet popper({ props })}
+		{@const mergedProps = {
+			...restProps,
+			...state.props,
+			...props,
+		}}
+		{#if asChild}
+			{@render child?.({ props: mergedProps })}
+		{:else}
+			<div {...mergedProps} bind:this={el}>
+				{@render children?.()}
+			</div>
+		{/if}
 	{/snippet}
-</PresenceLayer.Root>
+</PopperLayer.Root>
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 170000038..eac37c7cb 100644
--- a/packages/bits-ui/src/lib/bits/popover/popover.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/popover/popover.svelte.ts
@@ -29,6 +29,11 @@ class PopoverRootState {
 		this.open.value = !this.open.value;
 	}
 
+	close = () => {
+		if (!this.open.value) return;
+		this.open.value = false;
+	};
+
 	createTrigger(props: PopoverTriggerStateProps) {
 		return new PopoverTriggerState(props, this);
 	}
@@ -82,6 +87,7 @@ class PopoverTriggerState {
 
 	#onkeydown = (e: KeyboardEvent) => {
 		if (!(e.key === kbd.ENTER || e.key === kbd.SPACE)) return;
+		e.preventDefault();
 		this.root.toggleOpen();
 	};
 }
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 169ce27e0..eb90a5948 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
@@ -9,6 +9,7 @@
 		onInteractOutsideStart = noop,
 		id,
 		children,
+		present,
 	}: DismissableLayerProps = $props();
 
 	useDismissableLayer({
@@ -16,6 +17,7 @@
 		behaviorType: readonlyBox(() => behaviorType),
 		onInteractOutside: readonlyBox(() => onInteractOutside),
 		onInteractOutsideStart: readonlyBox(() => onInteractOutsideStart),
+		present: readonlyBox(() => present),
 	});
 </script>
 
diff --git a/packages/bits-ui/src/lib/bits/utilities/dismissable-layer/dismissable-layer.svelte.ts b/packages/bits-ui/src/lib/bits/utilities/dismissable-layer/dismissable-layer.svelte.ts
index 8d151553b..60ebcfd08 100644
--- a/packages/bits-ui/src/lib/bits/utilities/dismissable-layer/dismissable-layer.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/utilities/dismissable-layer/dismissable-layer.svelte.ts
@@ -1,4 +1,4 @@
-import { onDestroy } from "svelte";
+import { untrack } from "svelte";
 import type {
 	DismissableLayerProps,
 	InteractOutsideBehaviorType,
@@ -17,6 +17,7 @@ import {
 	getOwnerDocument,
 	isElement,
 	isOrContainsTarget,
+	noop,
 	useNodeById,
 } from "$lib/internal/index.js";
 
@@ -55,26 +56,48 @@ export class DismissableLayerState {
 	#isResponsibleLayer = false;
 	node: Box<HTMLElement | null>;
 	#documentObj = undefined as unknown as Document;
+	#present: ReadonlyBox<boolean>;
 
 	constructor(props: DismissableLayerStateProps) {
 		this.node = useNodeById(props.id);
 		this.#behaviorType = props.behaviorType;
 		this.#interactOutsideStartProp = props.onInteractOutsideStart;
 		this.#interactOutsideProp = props.onInteractOutside;
-
-		layers.set(this, this.#behaviorType);
+		this.#present = props.present;
 
 		$effect(() => {
 			this.#documentObj = getOwnerDocument(this.node.value);
+		});
 
-			const unsubEvents = this.#addEventListeners();
+		let unsubEvents = noop;
 
+		$effect(() => {
+			if (this.#present.value) {
+				layers.set(
+					this,
+					untrack(() => this.#behaviorType)
+				);
+				unsubEvents = this.#addEventListeners();
+			}
 			return () => {
-				unsubEvents();
-				this.#resetState.destroy();
+				this.#resetState();
+				layers.delete(this);
 				this.#onInteractOutsideStart.destroy();
 				this.#onInteractOutside.destroy();
-				layers.delete(this);
+				unsubEvents();
+			};
+		});
+
+		$effect(() => {
+			return () => {
+				// onDestroy, cleanup anything leftover
+				untrack(() => {
+					this.#resetState.destroy();
+					layers.delete(this);
+					this.#onInteractOutsideStart.destroy();
+					this.#onInteractOutside.destroy();
+					unsubEvents();
+				});
 			};
 		});
 	}
@@ -132,8 +155,12 @@ export class DismissableLayerState {
 	}
 
 	#onInteractOutsideStart = debounce((e: InteractOutsideEvent) => {
-		const node = this.node.value!;
-		if (!this.#isResponsibleLayer || this.#isAnyEventIntercepted() || !isValidEvent(e, node))
+		if (!this.node.value) return;
+		if (
+			!this.#isResponsibleLayer ||
+			this.#isAnyEventIntercepted() ||
+			!isValidEvent(e, this.node.value)
+		)
 			return;
 		this.#interactOutsideStartProp.value(e);
 		if (e.defaultPrevented) return;
@@ -141,10 +168,16 @@ export class DismissableLayerState {
 	}, 10);
 
 	#onInteractOutside = debounce((e: InteractOutsideEvent) => {
-		const node = this.node.value!;
+		if (!this.node.value) return;
+
 		const behaviorType = this.#behaviorType.value;
-		if (!this.#isResponsibleLayer || this.#isAnyEventIntercepted() || !isValidEvent(e, node))
+		if (
+			!this.#isResponsibleLayer ||
+			this.#isAnyEventIntercepted() ||
+			!isValidEvent(e, this.node.value)
+		) {
 			return;
+		}
 		if (behaviorType !== "close" && behaviorType !== "defer-otherwise-close") return;
 		if (!this.#isPointerDownOutside) return;
 		this.#interactOutsideProp.value(e);
@@ -159,8 +192,8 @@ export class DismissableLayerState {
 	};
 
 	#markResponsibleLayer = () => {
-		const node = this.node.value!;
-		this.#isResponsibleLayer = isResponsibleLayer(node);
+		if (!this.node.value) return;
+		this.#isResponsibleLayer = isResponsibleLayer(this.node.value);
 	};
 
 	#resetState = debounce(() => {
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 f245451a8..044e3fca4 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
@@ -45,6 +45,12 @@ export type DismissableLayerProps = {
 	 * @defaultValue `close`
 	 */
 	behaviorType?: InteractOutsideBehaviorType;
+
+	/**
+	 * Whether the layer is active. Currently, we determine this with the
+	 * `presence` returned from the `presence` layer.
+	 */
+	present: boolean;
 };
 
 export type InteractOutsideInterceptEventType =
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 2d8e25c99..dbb13614c 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
@@ -3,11 +3,12 @@
 	import { useEscapeLayer } from "./escape-layer.svelte.js";
 	import { noop, readonlyBox } from "$lib/internal/index.js";
 
-	let { behaviorType = "close", onEscape = noop, children }: EscapeLayerProps = $props();
+	let { behaviorType = "close", onEscape = noop, children, present }: EscapeLayerProps = $props();
 
 	useEscapeLayer({
 		behaviorType: readonlyBox(() => behaviorType),
 		onEscape: readonlyBox(() => onEscape),
+		present: readonlyBox(() => present),
 	});
 </script>
 
diff --git a/packages/bits-ui/src/lib/bits/utilities/escape-layer/escape-layer.svelte.ts b/packages/bits-ui/src/lib/bits/utilities/escape-layer/escape-layer.svelte.ts
index 6de829913..4c2414d8b 100644
--- a/packages/bits-ui/src/lib/bits/utilities/escape-layer/escape-layer.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/utilities/escape-layer/escape-layer.svelte.ts
@@ -1,8 +1,9 @@
-import { onDestroy } from "svelte";
+import { untrack } from "svelte";
 import type { EscapeBehaviorType, EscapeLayerProps } 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";
+import { noop } from "$lib/internal/callbacks.js";
 
 const layers = new Map<EscapeLayerState, ReadonlyBox<EscapeBehaviorType>>();
 
@@ -11,14 +12,23 @@ type EscapeLayerStateProps = ReadonlyBoxedValues<Required<Omit<EscapeLayerProps,
 export class EscapeLayerState {
 	#onEscapeProp: ReadonlyBox<EventCallback<KeyboardEvent>>;
 	#behaviorType: ReadonlyBox<EscapeBehaviorType>;
+	#present: ReadonlyBox<boolean>;
 
 	constructor(props: EscapeLayerStateProps) {
 		this.#behaviorType = props.behaviorType;
 		this.#onEscapeProp = props.onEscape;
-		layers.set(this, this.#behaviorType);
+		this.#present = props.present;
 
-		$effect.root(() => {
-			const unsubEvents = this.#addEventListener();
+		let unsubEvents = noop;
+
+		$effect(() => {
+			if (this.#present.value) {
+				layers.set(
+					this,
+					untrack(() => this.#behaviorType)
+				);
+				unsubEvents = this.#addEventListener();
+			}
 
 			return () => {
 				unsubEvents();
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 59f21dc40..f0dd2e5b4 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
@@ -24,4 +24,10 @@ export type EscapeLayerProps = {
 	 * @defaultValue `close`
 	 */
 	behaviorType?: EscapeBehaviorType;
+
+	/**
+	 * Whether the layer is enabled. Currently, we determine this with the
+	 * `presence` returned from the `presence` layer.
+	 */
+	present: boolean;
 };
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 a1b6abec4..1597dc258 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
@@ -21,6 +21,7 @@
 		strategy = "fixed",
 		dir = "ltr",
 		style = {},
+		present,
 	}: ContentProps = $props();
 
 	const state = setFloatingContentState({
@@ -40,6 +41,7 @@
 		strategy: readonlyBox(() => strategy),
 		dir: readonlyBox(() => dir),
 		style: readonlyBox(() => style),
+		present: readonlyBox(() => present),
 	});
 </script>
 
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/floating-layer.svelte.ts
index c30867e24..9c0b555d5 100644
--- a/packages/bits-ui/src/lib/bits/utilities/floating-layer/floating-layer.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/utilities/floating-layer/floating-layer.svelte.ts
@@ -1,4 +1,3 @@
-import type { VirtualElement } from "@floating-ui/core";
 import { getContext, setContext, untrack } from "svelte";
 import {
 	type Middleware,
@@ -17,6 +16,7 @@ import {
 	type Box,
 	type ReadonlyBox,
 	type ReadonlyBoxedValues,
+	afterTick,
 	boxedState,
 	generateId,
 	styleToString,
@@ -83,6 +83,7 @@ export type FloatingContentStateProps = ReadonlyBoxedValues<{
 	onPlaced: () => void;
 	dir: TextDirection;
 	style: StyleProperties;
+	present: boolean;
 }>;
 
 class FloatingContentState {
@@ -104,6 +105,7 @@ class FloatingContentState {
 	updatePositionStrategy =
 		undefined as unknown as FloatingContentStateProps["updatePositionStrategy"];
 	onPlaced = undefined as unknown as FloatingContentStateProps["onPlaced"];
+	present = undefined as unknown as FloatingContentStateProps["present"];
 	arrowSize: {
 		readonly value:
 			| {
@@ -201,7 +203,7 @@ class FloatingContentState {
 			...this.style.value,
 			// if the FloatingContent hasn't been placed yet (not all measurements done)
 			// we prevent animations so that users's animation don't kick in too early referring wrong sides
-			animation: !this.floating.isPositioned ? "none" : undefined,
+			// animation: !this.floating.isPositioned ? "none" : undefined,
 		}),
 	});
 
@@ -223,6 +225,9 @@ class FloatingContentState {
 		this.dir = props.dir;
 		this.style = props.style;
 		this.root = root;
+		this.present = props.present;
+		this.arrowSize = useSize(this.root.arrowNode);
+		this.root.contentNode = useNodeById(this.id);
 		this.floating = useFloating({
 			strategy: () => this.strategy.value,
 			placement: () => this.desiredPlacement,
@@ -234,12 +239,9 @@ class FloatingContentState {
 				});
 				return cleanup;
 			},
+			open: () => this.present.value,
 		});
 
-		this.arrowSize = useSize(this.root.arrowNode);
-
-		this.root.contentNode = useNodeById(this.id);
-
 		$effect(() => {
 			if (this.floating.isPositioned) {
 				this.onPlaced?.value();
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 749d418a3..ec964d05f 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
@@ -98,6 +98,11 @@ export type FloatingLayerContentProps = {
 	 * The style properties to apply to the content.
 	 */
 	style?: StyleProperties;
+
+	/**
+	 * Whether the floating layer is present.
+	 */
+	present: boolean;
 };
 
 export type FloatingLayerArrowProps = {
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 52249a3f3..741a3cc3c 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
@@ -13,11 +13,14 @@
 
 <PresenceLayer.Root {...restProps}>
 	{#snippet presence({ present })}
-		<FloatingLayer.Content {...restProps}>
+		<FloatingLayer.Content {...restProps} present={present.value}>
 			{#snippet content({ props })}
-				<EscapeLayer.Root {...restProps}>
-					<DismissableLayer.Root {...restProps}>
-						<PreventTextSelectionOverflowLayer.Root {...restProps}>
+				<EscapeLayer.Root {...restProps} present={present.value}>
+					<DismissableLayer.Root {...restProps} present={present.value}>
+						<PreventTextSelectionOverflowLayer.Root
+							{...restProps}
+							present={present.value}
+						>
 							{@render popper?.({
 								props: { ...props, hidden: present.value ? undefined : true },
 							})}
diff --git a/packages/bits-ui/src/lib/bits/utilities/prevent-text-selection-overflow-layer/prevent-text-selection-overflow-layer.svelte b/packages/bits-ui/src/lib/bits/utilities/prevent-text-selection-overflow-layer/prevent-text-selection-overflow-layer.svelte
index 824fc4852..e48686f99 100644
--- a/packages/bits-ui/src/lib/bits/utilities/prevent-text-selection-overflow-layer/prevent-text-selection-overflow-layer.svelte
+++ b/packages/bits-ui/src/lib/bits/utilities/prevent-text-selection-overflow-layer/prevent-text-selection-overflow-layer.svelte
@@ -9,6 +9,7 @@
 		onPointerUp = noop,
 		id,
 		children,
+		present,
 	}: PreventTextSelectionOverflowLayerProps = $props();
 
 	usePreventTextSelectionOverflowLayer({
@@ -16,6 +17,7 @@
 		enabled: readonlyBox(() => enabled),
 		onPointerDown: readonlyBox(() => onPointerDown),
 		onPointerUp: readonlyBox(() => onPointerUp),
+		present: readonlyBox(() => present),
 	});
 </script>
 
diff --git a/packages/bits-ui/src/lib/bits/utilities/prevent-text-selection-overflow-layer/prevent-text-selection-overflow-layer.svelte.ts b/packages/bits-ui/src/lib/bits/utilities/prevent-text-selection-overflow-layer/prevent-text-selection-overflow-layer.svelte.ts
index 66f416853..11525dc19 100644
--- a/packages/bits-ui/src/lib/bits/utilities/prevent-text-selection-overflow-layer/prevent-text-selection-overflow-layer.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/utilities/prevent-text-selection-overflow-layer/prevent-text-selection-overflow-layer.svelte.ts
@@ -1,4 +1,4 @@
-import { onDestroy } from "svelte";
+import { untrack } from "svelte";
 import type { PreventTextSelectionOverflowLayerProps } from "./types.js";
 import {
 	type Box,
@@ -26,18 +26,25 @@ export class PreventTextSelectionOverflowLayerState {
 	#enabled: ReadonlyBox<boolean>;
 	#unsubSelectionLock = noop;
 	#node: Box<HTMLElement | null>;
+	#present: ReadonlyBox<boolean>;
 
 	constructor(props: StateProps) {
 		this.#node = useNodeById(props.id);
 		this.#enabled = props.enabled;
 		this.#onPointerDownProp = props.onPointerDown;
 		this.#onPointerUpProp = props.onPointerUp;
+		this.#present = props.present;
 
-		layers.set(this, this.#enabled);
-
-		$effect.root(() => {
-			const unsubEvents = this.#addEventListeners();
+		let unsubEvents = noop;
 
+		$effect(() => {
+			if (this.#present.value) {
+				layers.set(
+					this,
+					untrack(() => this.#enabled)
+				);
+				unsubEvents = this.#addEventListeners();
+			}
 			return () => {
 				unsubEvents();
 				this.#resetSelectionLock();
@@ -102,6 +109,9 @@ function setUserSelect(node: HTMLElement, value: string) {
 }
 
 function isHighestLayer(instance: PreventTextSelectionOverflowLayerState) {
-	const [topLayer] = [...layers].at(-1)!;
-	return topLayer === instance;
+	const layersArr = [...layers];
+	if (!layersArr.length) return false;
+	const highestLayer = layersArr.at(-1);
+	if (!highestLayer) return false;
+	return highestLayer[0] === instance;
 }
diff --git a/packages/bits-ui/src/lib/bits/utilities/prevent-text-selection-overflow-layer/types.ts b/packages/bits-ui/src/lib/bits/utilities/prevent-text-selection-overflow-layer/types.ts
index 0fbac8849..fd78c7051 100644
--- a/packages/bits-ui/src/lib/bits/utilities/prevent-text-selection-overflow-layer/types.ts
+++ b/packages/bits-ui/src/lib/bits/utilities/prevent-text-selection-overflow-layer/types.ts
@@ -27,4 +27,10 @@ export type PreventTextSelectionOverflowLayerProps = {
 	 * @defaultValue `true`
 	 */
 	enabled?: boolean;
+
+	/**
+	 * Whether the layer is enabled. Currently, we determine this with the
+	 * `presence` returned from the `presence` layer.
+	 */
+	present: boolean;
 };
diff --git a/packages/bits-ui/src/lib/internal/debounce.ts b/packages/bits-ui/src/lib/internal/debounce.ts
index 5d837cce6..718f703c0 100644
--- a/packages/bits-ui/src/lib/internal/debounce.ts
+++ b/packages/bits-ui/src/lib/internal/debounce.ts
@@ -8,6 +8,8 @@ export function debounce<T extends (...args: any[]) => any>(fn: T, wait = 500) {
 		timeout = setTimeout(later, wait);
 	};
 
-	debounced.destroy = () => clearTimeout(timeout);
+	debounced.destroy = () => {
+		clearTimeout(timeout);
+	};
 	return debounced;
 }
diff --git a/packages/bits-ui/src/lib/internal/floating-svelte/use-floating.svelte.ts b/packages/bits-ui/src/lib/internal/floating-svelte/use-floating.svelte.ts
index ef727f5ac..b8a56c932 100644
--- a/packages/bits-ui/src/lib/internal/floating-svelte/use-floating.svelte.ts
+++ b/packages/bits-ui/src/lib/internal/floating-svelte/use-floating.svelte.ts
@@ -1,5 +1,6 @@
 import { computePosition } from "@floating-ui/dom";
 import { box, boxedState } from "../box.svelte.js";
+import { afterTick } from "../after-tick.js";
 import type { UseFloatingOptions, UseFloatingReturn } from "./types.js";
 import { get, getDPR, roundByDPR } from "./utils.js";
 
@@ -59,7 +60,6 @@ export function useFloating(options: UseFloatingOptions): UseFloatingReturn {
 
 	function update() {
 		if (reference.value === null || floating.value === null) return;
-
 		computePosition(reference.value, floating.value, {
 			middleware: middlewareOption,
 			placement: placementOption,
diff --git a/packages/bits-ui/src/lib/internal/use-presence.svelte.ts b/packages/bits-ui/src/lib/internal/use-presence.svelte.ts
index 89bee80c6..fa39c07c0 100644
--- a/packages/bits-ui/src/lib/internal/use-presence.svelte.ts
+++ b/packages/bits-ui/src/lib/internal/use-presence.svelte.ts
@@ -1,6 +1,6 @@
-import { onDestroy } from "svelte";
+import { onDestroy, untrack } from "svelte";
 import { type Box, type ReadonlyBox, boxedState, watch } from "./box.svelte.js";
-import { useNodeById, useStateMachine } from "$lib/internal/index.js";
+import { afterTick, useNodeById, useStateMachine } from "$lib/internal/index.js";
 
 export function usePresence(present: ReadonlyBox<boolean>, id: ReadonlyBox<string>) {
 	const styles = boxedState({}) as unknown as Box<CSSStyleDeclaration>;
@@ -34,7 +34,7 @@ export function usePresence(present: ReadonlyBox<boolean>, id: ReadonlyBox<strin
 
 			if (currPresent) {
 				dispatch("MOUNT");
-			} else if (currAnimationName === "none" || styles.value?.display === "none") {
+			} else if (currAnimationName === "none" || styles.value.display === "none") {
 				// If there is no exit animation or the element is hidden, animations won't run
 				// so we unmount instantly
 				dispatch("UNMOUNT");
@@ -46,6 +46,7 @@ export function usePresence(present: ReadonlyBox<boolean>, id: ReadonlyBox<strin
 				 * fires after `animation-delay` has expired which would be too late.
 				 */
 				const isAnimating = prevAnimationName !== currAnimationName;
+
 				if (prevPresent && isAnimating) {
 					dispatch("ANIMATION_OUT");
 				} else {
@@ -53,7 +54,7 @@ export function usePresence(present: ReadonlyBox<boolean>, id: ReadonlyBox<strin
 				}
 			}
 		},
-		{ immediate: false }
+		{ immediate: true }
 	);
 
 	/**
@@ -85,23 +86,19 @@ export function usePresence(present: ReadonlyBox<boolean>, id: ReadonlyBox<strin
 		prevAnimationNameState.value = state.value === "mounted" ? currAnimationName : "none";
 	});
 
-	const watcher = watch(
-		node,
-		(currNode, prevNode) => {
-			if (currNode) {
-				styles.value = getComputedStyle(currNode);
-				currNode.addEventListener("animationstart", handleAnimationStart);
-				currNode.addEventListener("animationcancel", handleAnimationEnd);
-				currNode.addEventListener("animationend", handleAnimationEnd);
-			} else {
-				dispatch("ANIMATION_END");
-				prevNode?.removeEventListener("animationstart", handleAnimationStart);
-				prevNode?.removeEventListener("animationcancel", handleAnimationEnd);
-				prevNode?.removeEventListener("animationend", handleAnimationEnd);
-			}
-		},
-		{ immediate: true }
-	);
+	const watcher = watch(node, (currNode, prevNode) => {
+		if (currNode) {
+			styles.value = getComputedStyle(currNode);
+			currNode.addEventListener("animationstart", handleAnimationStart);
+			currNode.addEventListener("animationcancel", handleAnimationEnd);
+			currNode.addEventListener("animationend", handleAnimationEnd);
+		} else {
+			dispatch("ANIMATION_END");
+			prevNode?.removeEventListener("animationstart", handleAnimationStart);
+			prevNode?.removeEventListener("animationcancel", handleAnimationEnd);
+			prevNode?.removeEventListener("animationend", handleAnimationEnd);
+		}
+	});
 
 	onDestroy(() => {
 		watcher();
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a97f884a4..748daef23 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -13,7 +13,7 @@ importers:
         version: 2.27.1
       '@huntabyte/eslint-config':
         specifier: ^0.3.1
-        version: 0.3.1(@vue/compiler-sfc@3.4.21)(eslint-plugin-svelte@2.37.0)(eslint@9.0.0)(svelte-eslint-parser@0.34.1)(svelte@5.0.0-next.108)(typescript@5.4.3)
+        version: 0.3.1(@vue/compiler-sfc@3.4.21)(eslint-plugin-svelte@2.37.0)(eslint@9.0.0)(svelte-eslint-parser@0.34.1)(svelte@5.0.0-next.109)(typescript@5.4.3)
       '@huntabyte/eslint-plugin':
         specifier: ^0.1.0
         version: 0.1.0(eslint@9.0.0)
@@ -25,22 +25,22 @@ importers:
         version: 9.0.0
       eslint-plugin-svelte:
         specifier: ^2.37.0
-        version: 2.37.0(eslint@9.0.0)(svelte@5.0.0-next.108)
+        version: 2.37.0(eslint@9.0.0)(svelte@5.0.0-next.109)
       prettier:
         specifier: ^3.2.5
         version: 3.2.5
       prettier-plugin-svelte:
         specifier: ^3.2.2
-        version: 3.2.2(prettier@3.2.5)(svelte@5.0.0-next.108)
+        version: 3.2.2(prettier@3.2.5)(svelte@5.0.0-next.109)
       prettier-plugin-tailwindcss:
         specifier: 0.5.13
         version: 0.5.13(prettier-plugin-svelte@3.2.2)(prettier@3.2.5)
       svelte:
-        specifier: 5.0.0-next.108
-        version: 5.0.0-next.108
+        specifier: 5.0.0-next.109
+        version: 5.0.0-next.109
       svelte-eslint-parser:
         specifier: ^0.34.1
-        version: 0.34.1(svelte@5.0.0-next.108)
+        version: 0.34.1(svelte@5.0.0-next.109)
       wrangler:
         specifier: ^3.44.0
         version: 3.44.0
@@ -58,7 +58,7 @@ importers:
         version: 3.5.2
       '@melt-ui/svelte':
         specifier: 0.76.2
-        version: 0.76.2(svelte@5.0.0-next.108)
+        version: 0.76.2(svelte@5.0.0-next.109)
       esm-env:
         specifier: ^1.0.0
         version: 1.0.0
@@ -71,16 +71,16 @@ importers:
     devDependencies:
       '@melt-ui/pp':
         specifier: ^0.3.0
-        version: 0.3.0(@melt-ui/svelte@0.76.2)(svelte@5.0.0-next.108)
+        version: 0.3.0(@melt-ui/svelte@0.76.2)(svelte@5.0.0-next.109)
       '@sveltejs/kit':
         specifier: ^2.5.0
-        version: 2.5.5(@sveltejs/vite-plugin-svelte@3.1.0)(svelte@5.0.0-next.108)(vite@5.2.8)
+        version: 2.5.5(@sveltejs/vite-plugin-svelte@3.1.0)(svelte@5.0.0-next.109)(vite@5.2.8)
       '@sveltejs/package':
         specifier: ^2.2.7
-        version: 2.3.0(svelte@5.0.0-next.108)(typescript@5.4.3)
+        version: 2.3.0(svelte@5.0.0-next.109)(typescript@5.4.3)
       '@sveltejs/vite-plugin-svelte':
         specifier: ^3.1.0
-        version: 3.1.0(svelte@5.0.0-next.108)(vite@5.2.8)
+        version: 3.1.0(svelte@5.0.0-next.109)(vite@5.2.8)
       '@testing-library/dom':
         specifier: ^10.0.0
         version: 10.0.0
@@ -89,7 +89,7 @@ importers:
         version: 6.4.2(vitest@1.5.0)
       '@testing-library/svelte':
         specifier: ^4.2.2
-        version: 4.2.2(svelte@5.0.0-next.108)
+        version: 4.2.2(svelte@5.0.0-next.109)
       '@testing-library/user-event':
         specifier: ^14.5.2
         version: 14.5.2(@testing-library/dom@10.0.0)
@@ -121,11 +121,11 @@ importers:
         specifier: ^1.5.1
         version: 1.5.1
       svelte:
-        specifier: 5.0.0-next.108
-        version: 5.0.0-next.108
+        specifier: 5.0.0-next.109
+        version: 5.0.0-next.109
       svelte-check:
         specifier: ^3.6.9
-        version: 3.6.9(postcss-load-config@5.0.3)(postcss@8.4.38)(svelte@5.0.0-next.108)
+        version: 3.6.9(postcss-load-config@5.0.3)(postcss@8.4.38)(svelte@5.0.0-next.109)
       tslib:
         specifier: ^2.6.2
         version: 2.6.2
@@ -146,14 +146,14 @@ importers:
         version: 3.5.2
       '@melt-ui/svelte':
         specifier: 0.76.2
-        version: 0.76.2(svelte@5.0.0-next.108)
+        version: 0.76.2(svelte@5.0.0-next.109)
       bits-ui:
         specifier: workspace:*
         version: link:../../packages/bits-ui
     devDependencies:
       '@melt-ui/pp':
         specifier: ^0.3.0
-        version: 0.3.0(@melt-ui/svelte@0.76.2)(svelte@5.0.0-next.108)
+        version: 0.3.0(@melt-ui/svelte@0.76.2)(svelte@5.0.0-next.109)
       '@prettier/sync':
         specifier: 0.3.0
         version: 0.3.0(prettier@3.2.5)
@@ -162,10 +162,10 @@ importers:
         version: 4.2.0(@sveltejs/kit@2.5.5)(wrangler@3.44.0)
       '@sveltejs/kit':
         specifier: ^2.5.0
-        version: 2.5.5(@sveltejs/vite-plugin-svelte@3.1.0)(svelte@5.0.0-next.108)(vite@5.2.8)
+        version: 2.5.5(@sveltejs/vite-plugin-svelte@3.1.0)(svelte@5.0.0-next.109)(vite@5.2.8)
       '@sveltejs/vite-plugin-svelte':
         specifier: ^3.1.0
-        version: 3.1.0(svelte@5.0.0-next.108)(vite@5.2.8)
+        version: 3.1.0(svelte@5.0.0-next.109)(vite@5.2.8)
       '@tailwindcss/typography':
         specifier: ^0.5.10
         version: 0.5.12(tailwindcss@3.4.3)
@@ -195,13 +195,13 @@ importers:
         version: 0.3.4(esbuild@0.20.2)
       mdsx:
         specifier: ^0.0.5
-        version: 0.0.5(svelte@5.0.0-next.108)
+        version: 0.0.5(svelte@5.0.0-next.109)
       mode-watcher:
         specifier: ^0.2.0
-        version: 0.2.2(svelte@5.0.0-next.108)
+        version: 0.2.2(svelte@5.0.0-next.109)
       phosphor-svelte:
         specifier: ^1.4.2
-        version: 1.4.2(svelte@5.0.0-next.108)
+        version: 1.4.2(svelte@5.0.0-next.109)
       postcss:
         specifier: ^8.4.33
         version: 8.4.38
@@ -221,11 +221,11 @@ importers:
         specifier: ^1.1.1
         version: 1.2.2
       svelte:
-        specifier: 5.0.0-next.108
-        version: 5.0.0-next.108
+        specifier: 5.0.0-next.109
+        version: 5.0.0-next.109
       svelte-check:
         specifier: ^3.6.9
-        version: 3.6.9(postcss-load-config@5.0.3)(postcss@8.4.38)(svelte@5.0.0-next.108)
+        version: 3.6.9(postcss-load-config@5.0.3)(postcss@8.4.38)(svelte@5.0.0-next.109)
       tailwind-merge:
         specifier: ^2.2.1
         version: 2.2.2
@@ -280,7 +280,7 @@ packages:
       '@jridgewell/gen-mapping': 0.3.5
       '@jridgewell/trace-mapping': 0.3.25
 
-  /@antfu/eslint-config@2.13.3(@vue/compiler-sfc@3.4.21)(eslint-plugin-svelte@2.37.0)(eslint@9.0.0)(svelte-eslint-parser@0.34.1)(svelte@5.0.0-next.108)(typescript@5.4.3):
+  /@antfu/eslint-config@2.13.3(@vue/compiler-sfc@3.4.21)(eslint-plugin-svelte@2.37.0)(eslint@9.0.0)(svelte-eslint-parser@0.34.1)(svelte@5.0.0-next.109)(typescript@5.4.3):
     resolution: {integrity: sha512-DCyrnFgWtIc0mUTn8HeVB15Z/t9oEQZk8ce6S14Kq6z42LbMfZxPu6hs4SmPFYWLJoEzYq87dxsRv3glOX+aGw==}
     hasBin: true
     peerDependencies:
@@ -340,8 +340,8 @@ packages:
       eslint-plugin-markdown: 4.0.1(eslint@9.0.0)
       eslint-plugin-n: 17.2.0(eslint@9.0.0)
       eslint-plugin-no-only-tests: 3.1.0
-      eslint-plugin-perfectionist: 2.8.0(eslint@9.0.0)(svelte-eslint-parser@0.34.1)(svelte@5.0.0-next.108)(typescript@5.4.3)(vue-eslint-parser@9.4.2)
-      eslint-plugin-svelte: 2.37.0(eslint@9.0.0)(svelte@5.0.0-next.108)
+      eslint-plugin-perfectionist: 2.8.0(eslint@9.0.0)(svelte-eslint-parser@0.34.1)(svelte@5.0.0-next.109)(typescript@5.4.3)(vue-eslint-parser@9.4.2)
+      eslint-plugin-svelte: 2.37.0(eslint@9.0.0)(svelte@5.0.0-next.109)
       eslint-plugin-toml: 0.11.0(eslint@9.0.0)
       eslint-plugin-unicorn: 52.0.0(eslint@9.0.0)
       eslint-plugin-unused-imports: 3.1.0(@typescript-eslint/eslint-plugin@7.6.0)(eslint@9.0.0)
@@ -354,7 +354,7 @@ packages:
       local-pkg: 0.5.0
       parse-gitignore: 2.0.0
       picocolors: 1.0.0
-      svelte-eslint-parser: 0.34.1(svelte@5.0.0-next.108)
+      svelte-eslint-parser: 0.34.1(svelte@5.0.0-next.109)
       toml-eslint-parser: 0.9.3
       vue-eslint-parser: 9.4.2(eslint@9.0.0)
       yaml-eslint-parser: 1.2.2
@@ -1640,7 +1640,7 @@ packages:
     resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==}
     dev: true
 
-  /@huntabyte/eslint-config@0.3.1(@vue/compiler-sfc@3.4.21)(eslint-plugin-svelte@2.37.0)(eslint@9.0.0)(svelte-eslint-parser@0.34.1)(svelte@5.0.0-next.108)(typescript@5.4.3):
+  /@huntabyte/eslint-config@0.3.1(@vue/compiler-sfc@3.4.21)(eslint-plugin-svelte@2.37.0)(eslint@9.0.0)(svelte-eslint-parser@0.34.1)(svelte@5.0.0-next.109)(typescript@5.4.3):
     resolution: {integrity: sha512-aLnVtA+n556gtv+NfCfIi1OoM0j0tsHP9ERlVaaJ3p+AHoZyT6FYefEInX6Snxwt4U5WzmL/gJ8w0QbyZdyH4w==}
     hasBin: true
     peerDependencies:
@@ -1648,7 +1648,7 @@ packages:
       eslint-plugin-svelte: ^2.37.0
       svelte-eslint-parser: ^0.34.1
     dependencies:
-      '@antfu/eslint-config': 2.13.3(@vue/compiler-sfc@3.4.21)(eslint-plugin-svelte@2.37.0)(eslint@9.0.0)(svelte-eslint-parser@0.34.1)(svelte@5.0.0-next.108)(typescript@5.4.3)
+      '@antfu/eslint-config': 2.13.3(@vue/compiler-sfc@3.4.21)(eslint-plugin-svelte@2.37.0)(eslint@9.0.0)(svelte-eslint-parser@0.34.1)(svelte@5.0.0-next.109)(typescript@5.4.3)
       '@antfu/install-pkg': 0.3.2
       '@clack/prompts': 0.7.0
       '@huntabyte/eslint-plugin': 0.1.0(eslint@9.0.0)
@@ -1657,10 +1657,10 @@ packages:
       chalk: 5.3.0
       eslint: 9.0.0
       eslint-flat-config-utils: 0.2.2
-      eslint-plugin-svelte: 2.37.0(eslint@9.0.0)(svelte@5.0.0-next.108)
+      eslint-plugin-svelte: 2.37.0(eslint@9.0.0)(svelte@5.0.0-next.109)
       local-pkg: 0.5.0
       parse-gitignore: 2.0.0
-      svelte-eslint-parser: 0.34.1(svelte@5.0.0-next.108)
+      svelte-eslint-parser: 0.34.1(svelte@5.0.0-next.109)
       yargs: 17.7.2
     transitivePeerDependencies:
       - '@unocss/eslint-plugin'
@@ -1832,20 +1832,20 @@ packages:
       - supports-color
     dev: true
 
-  /@melt-ui/pp@0.3.0(@melt-ui/svelte@0.76.2)(svelte@5.0.0-next.108):
+  /@melt-ui/pp@0.3.0(@melt-ui/svelte@0.76.2)(svelte@5.0.0-next.109):
     resolution: {integrity: sha512-b07Bdh8l2KcwKVCXOY+SoBw1dk9eWvQfMSi6SoacpRVyVmmfpi0kV4oGt3HYF0tUCB3sEmVicxse50ZzZxEzEA==}
     engines: {pnpm: '>=8.6.3'}
     peerDependencies:
       '@melt-ui/svelte': '>= 0.29.0'
       svelte: ^3.55.0 || ^4.0.0 || ^5.0.0-next.1
     dependencies:
-      '@melt-ui/svelte': 0.76.2(svelte@5.0.0-next.108)
+      '@melt-ui/svelte': 0.76.2(svelte@5.0.0-next.109)
       estree-walker: 3.0.3
       magic-string: 0.30.9
-      svelte: 5.0.0-next.108
+      svelte: 5.0.0-next.109
     dev: true
 
-  /@melt-ui/svelte@0.76.2(svelte@5.0.0-next.108):
+  /@melt-ui/svelte@0.76.2(svelte@5.0.0-next.109):
     resolution: {integrity: sha512-7SbOa11tXUS95T3fReL+dwDs5FyJtCEqrqG3inRziDws346SYLsxOQ6HmX+4BkIsQh1R8U3XNa+EMmdMt38lMA==}
     peerDependencies:
       svelte: '>=3 <5'
@@ -1856,7 +1856,7 @@ packages:
       dequal: 2.0.3
       focus-trap: 7.5.4
       nanoid: 5.0.6
-      svelte: 5.0.0-next.108
+      svelte: 5.0.0-next.109
 
   /@nodelib/fs.scandir@2.1.5:
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
@@ -2358,13 +2358,13 @@ packages:
       wrangler: ^3.28.4
     dependencies:
       '@cloudflare/workers-types': 4.20240329.0
-      '@sveltejs/kit': 2.5.5(@sveltejs/vite-plugin-svelte@3.1.0)(svelte@5.0.0-next.108)(vite@5.2.8)
+      '@sveltejs/kit': 2.5.5(@sveltejs/vite-plugin-svelte@3.1.0)(svelte@5.0.0-next.109)(vite@5.2.8)
       esbuild: 0.19.12
       worktop: 0.8.0-next.18
       wrangler: 3.44.0
     dev: true
 
-  /@sveltejs/kit@2.5.5(@sveltejs/vite-plugin-svelte@3.1.0)(svelte@5.0.0-next.108)(vite@5.2.8):
+  /@sveltejs/kit@2.5.5(@sveltejs/vite-plugin-svelte@3.1.0)(svelte@5.0.0-next.109)(vite@5.2.8):
     resolution: {integrity: sha512-ULe3PB00q4+wYRL+IS5FDPsCEVnhEITofm7b9Yz8malcH3r1SAnW/JJ6T13hIMeu8QNRIuVQWo+P4+2VklbnLQ==}
     engines: {node: '>=18.13'}
     hasBin: true
@@ -2374,7 +2374,7 @@ packages:
       svelte: ^4.0.0 || ^5.0.0-next.0
       vite: ^5.0.3
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 3.1.0(svelte@5.0.0-next.108)(vite@5.2.8)
+      '@sveltejs/vite-plugin-svelte': 3.1.0(svelte@5.0.0-next.109)(vite@5.2.8)
       '@types/cookie': 0.6.0
       cookie: 0.6.0
       devalue: 4.3.2
@@ -2386,12 +2386,12 @@ packages:
       sade: 1.8.1
       set-cookie-parser: 2.6.0
       sirv: 2.0.4
-      svelte: 5.0.0-next.108
+      svelte: 5.0.0-next.109
       tiny-glob: 0.2.9
       vite: 5.2.8(@types/node@20.12.2)
     dev: true
 
-  /@sveltejs/package@2.3.0(svelte@5.0.0-next.108)(typescript@5.4.3):
+  /@sveltejs/package@2.3.0(svelte@5.0.0-next.109)(typescript@5.4.3):
     resolution: {integrity: sha512-wmtwEfi3gQnmtotAjygRHR6cmLfpblQl1dU764f3N2I5DPe34llFs44bHOYcuk91Bp2sSq6bWUmNwxGlYCchOA==}
     engines: {node: ^16.14 || >=18}
     hasBin: true
@@ -2402,13 +2402,13 @@ packages:
       kleur: 4.1.5
       sade: 1.8.1
       semver: 7.6.0
-      svelte: 5.0.0-next.108
-      svelte2tsx: 0.7.5(svelte@5.0.0-next.108)(typescript@5.4.3)
+      svelte: 5.0.0-next.109
+      svelte2tsx: 0.7.5(svelte@5.0.0-next.109)(typescript@5.4.3)
     transitivePeerDependencies:
       - typescript
     dev: true
 
-  /@sveltejs/vite-plugin-svelte-inspector@2.0.0(@sveltejs/vite-plugin-svelte@3.1.0)(svelte@5.0.0-next.108)(vite@5.2.8):
+  /@sveltejs/vite-plugin-svelte-inspector@2.0.0(@sveltejs/vite-plugin-svelte@3.1.0)(svelte@5.0.0-next.109)(vite@5.2.8):
     resolution: {integrity: sha512-gjr9ZFg1BSlIpfZ4PRewigrvYmHWbDrq2uvvPB1AmTWKuM+dI1JXQSUu2pIrYLb/QncyiIGkFDFKTwJ0XqQZZg==}
     engines: {node: ^18.0.0 || >=20}
     peerDependencies:
@@ -2416,28 +2416,28 @@ packages:
       svelte: ^4.0.0 || ^5.0.0-next.0
       vite: ^5.0.0
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 3.1.0(svelte@5.0.0-next.108)(vite@5.2.8)
+      '@sveltejs/vite-plugin-svelte': 3.1.0(svelte@5.0.0-next.109)(vite@5.2.8)
       debug: 4.3.4
-      svelte: 5.0.0-next.108
+      svelte: 5.0.0-next.109
       vite: 5.2.8(@types/node@20.12.2)
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@sveltejs/vite-plugin-svelte@3.1.0(svelte@5.0.0-next.108)(vite@5.2.8):
+  /@sveltejs/vite-plugin-svelte@3.1.0(svelte@5.0.0-next.109)(vite@5.2.8):
     resolution: {integrity: sha512-sY6ncCvg+O3njnzbZexcVtUqOBE3iYmQPJ9y+yXSkOwG576QI/xJrBnQSRXFLGwJNBa0T78JEKg5cIR0WOAuUw==}
     engines: {node: ^18.0.0 || >=20}
     peerDependencies:
       svelte: ^4.0.0 || ^5.0.0-next.0
       vite: ^5.0.0
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 2.0.0(@sveltejs/vite-plugin-svelte@3.1.0)(svelte@5.0.0-next.108)(vite@5.2.8)
+      '@sveltejs/vite-plugin-svelte-inspector': 2.0.0(@sveltejs/vite-plugin-svelte@3.1.0)(svelte@5.0.0-next.109)(vite@5.2.8)
       debug: 4.3.4
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.9
-      svelte: 5.0.0-next.108
-      svelte-hmr: 0.16.0(svelte@5.0.0-next.108)
+      svelte: 5.0.0-next.109
+      svelte-hmr: 0.16.0(svelte@5.0.0-next.109)
       vite: 5.2.8(@types/node@20.12.2)
       vitefu: 0.2.5(vite@5.2.8)
     transitivePeerDependencies:
@@ -2531,14 +2531,14 @@ packages:
       vitest: 1.5.0(@types/node@20.12.2)(jsdom@24.0.0)
     dev: true
 
-  /@testing-library/svelte@4.2.2(svelte@5.0.0-next.108):
+  /@testing-library/svelte@4.2.2(svelte@5.0.0-next.109):
     resolution: {integrity: sha512-zl2V/39V/uIRe+FjXfeB7Nvg/2DBqAFlKbpqtbAogtyoYtdQ0Z/d8Was8ZdtXl3QCa8NBNd3J0QUKSTDaEQYCA==}
     engines: {node: '>= 10'}
     peerDependencies:
       svelte: ^3 || ^4 || ^5
     dependencies:
       '@testing-library/dom': 9.3.4
-      svelte: 5.0.0-next.108
+      svelte: 5.0.0-next.109
     dev: true
 
   /@testing-library/user-event@14.5.2(@testing-library/dom@10.0.0):
@@ -4366,7 +4366,7 @@ packages:
     engines: {node: '>=5.0.0'}
     dev: true
 
-  /eslint-plugin-perfectionist@2.8.0(eslint@9.0.0)(svelte-eslint-parser@0.34.1)(svelte@5.0.0-next.108)(typescript@5.4.3)(vue-eslint-parser@9.4.2):
+  /eslint-plugin-perfectionist@2.8.0(eslint@9.0.0)(svelte-eslint-parser@0.34.1)(svelte@5.0.0-next.109)(typescript@5.4.3)(vue-eslint-parser@9.4.2):
     resolution: {integrity: sha512-XBjQ4ctU1rOzQ4bFJoUowe8XdsIIz42JqNrouFlae1TO78HjoyYBaRP8+gAHDDQCSdHY10pbChyzlJeBA6D51w==}
     peerDependencies:
       astro-eslint-parser: ^0.16.0
@@ -4388,15 +4388,15 @@ packages:
       eslint: 9.0.0
       minimatch: 9.0.4
       natural-compare-lite: 1.4.0
-      svelte: 5.0.0-next.108
-      svelte-eslint-parser: 0.34.1(svelte@5.0.0-next.108)
+      svelte: 5.0.0-next.109
+      svelte-eslint-parser: 0.34.1(svelte@5.0.0-next.109)
       vue-eslint-parser: 9.4.2(eslint@9.0.0)
     transitivePeerDependencies:
       - supports-color
       - typescript
     dev: true
 
-  /eslint-plugin-svelte@2.37.0(eslint@9.0.0)(svelte@5.0.0-next.108):
+  /eslint-plugin-svelte@2.37.0(eslint@9.0.0)(svelte@5.0.0-next.109):
     resolution: {integrity: sha512-H/2Gz7agYHEMEEzRuLYuCmAIdjuBnbhFG9hOK0yCdSBvvJGJMkjo+lR6j67OIvLOavgp4L7zA5LnDKi8WqdPhQ==}
     engines: {node: ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -4418,8 +4418,8 @@ packages:
       postcss-safe-parser: 6.0.0(postcss@8.4.38)
       postcss-selector-parser: 6.0.16
       semver: 7.6.0
-      svelte: 5.0.0-next.108
-      svelte-eslint-parser: 0.34.1(svelte@5.0.0-next.108)
+      svelte: 5.0.0-next.109
+      svelte-eslint-parser: 0.34.1(svelte@5.0.0-next.109)
     transitivePeerDependencies:
       - supports-color
       - ts-node
@@ -6494,7 +6494,7 @@ packages:
       '@types/mdast': 4.0.3
     dev: true
 
-  /mdsx@0.0.5(svelte@5.0.0-next.108):
+  /mdsx@0.0.5(svelte@5.0.0-next.109):
     resolution: {integrity: sha512-crYbZC0L5kQjaRABvHIXj9H2O1qikIw9KKqS3bo2En4XVgvHH7TO5bJ2X86PxJK7H6QEBAubjUma9+qpbsPC5A==}
     peerDependencies:
       svelte: ^4.0.0
@@ -6506,7 +6506,7 @@ packages:
       rehype-stringify: 10.0.0
       remark-parse: 11.0.0
       remark-rehype: 11.1.0
-      svelte: 5.0.0-next.108
+      svelte: 5.0.0-next.109
       unified: 11.0.4
       unist-util-visit: 5.0.0
       vfile: 6.0.1
@@ -7221,12 +7221,12 @@ packages:
       ufo: 1.5.3
     dev: true
 
-  /mode-watcher@0.2.2(svelte@5.0.0-next.108):
+  /mode-watcher@0.2.2(svelte@5.0.0-next.109):
     resolution: {integrity: sha512-QjkHQL9pXrr7Vb0P3WbOWAF8mv1Q6jEwUZ5GUyCnI9eEoXH234zuaOGChUF7ZQtjxwtmXDzKFSW/36TvLDg1/A==}
     peerDependencies:
       svelte: ^4.0.0
     dependencies:
-      svelte: 5.0.0-next.108
+      svelte: 5.0.0-next.109
     dev: true
 
   /mri@1.2.0:
@@ -7647,12 +7647,12 @@ packages:
       is-reference: 3.0.2
     dev: true
 
-  /phosphor-svelte@1.4.2(svelte@5.0.0-next.108):
+  /phosphor-svelte@1.4.2(svelte@5.0.0-next.109):
     resolution: {integrity: sha512-wdHKlZbE5D3ad1dd4K9bqWxpOb6gIwe+/ZeXGI9YpdKqECxqd+g3/NsLYE1+/hjlXixTWhQ7VMVIxTtBRXegCg==}
     peerDependencies:
       svelte: '>=3'
     dependencies:
-      svelte: 5.0.0-next.108
+      svelte: 5.0.0-next.109
     dev: true
 
   /picocolors@1.0.0:
@@ -7854,14 +7854,14 @@ packages:
     engines: {node: '>= 0.8.0'}
     dev: true
 
-  /prettier-plugin-svelte@3.2.2(prettier@3.2.5)(svelte@5.0.0-next.108):
+  /prettier-plugin-svelte@3.2.2(prettier@3.2.5)(svelte@5.0.0-next.109):
     resolution: {integrity: sha512-ZzzE/wMuf48/1+Lf2Ffko0uDa6pyCfgHV6+uAhtg2U0AAXGrhCSW88vEJNAkAxW5qyrFY1y1zZ4J8TgHrjW++Q==}
     peerDependencies:
       prettier: ^3.0.0
       svelte: ^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0
     dependencies:
       prettier: 3.2.5
-      svelte: 5.0.0-next.108
+      svelte: 5.0.0-next.109
     dev: true
 
   /prettier-plugin-tailwindcss@0.5.13(prettier-plugin-svelte@3.2.2)(prettier@3.2.5):
@@ -7917,7 +7917,7 @@ packages:
         optional: true
     dependencies:
       prettier: 3.2.5
-      prettier-plugin-svelte: 3.2.2(prettier@3.2.5)(svelte@5.0.0-next.108)
+      prettier-plugin-svelte: 3.2.2(prettier@3.2.5)(svelte@5.0.0-next.109)
     dev: true
 
   /prettier@2.8.8:
@@ -8831,7 +8831,7 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
-  /svelte-check@3.6.9(postcss-load-config@5.0.3)(postcss@8.4.38)(svelte@5.0.0-next.108):
+  /svelte-check@3.6.9(postcss-load-config@5.0.3)(postcss@8.4.38)(svelte@5.0.0-next.109):
     resolution: {integrity: sha512-hDQrk3L0osX07djQyMiXocKysTLfusqi8AriNcCiQxhQR49/LonYolcUGMtZ0fbUR8HTR198Prrgf52WWU9wEg==}
     hasBin: true
     peerDependencies:
@@ -8843,8 +8843,8 @@ packages:
       import-fresh: 3.3.0
       picocolors: 1.0.0
       sade: 1.8.1
-      svelte: 5.0.0-next.108
-      svelte-preprocess: 5.1.3(postcss-load-config@5.0.3)(postcss@8.4.38)(svelte@5.0.0-next.108)(typescript@5.4.3)
+      svelte: 5.0.0-next.109
+      svelte-preprocess: 5.1.3(postcss-load-config@5.0.3)(postcss@8.4.38)(svelte@5.0.0-next.109)(typescript@5.4.3)
       typescript: 5.4.3
     transitivePeerDependencies:
       - '@babel/core'
@@ -8858,7 +8858,7 @@ packages:
       - sugarss
     dev: true
 
-  /svelte-eslint-parser@0.34.1(svelte@5.0.0-next.108):
+  /svelte-eslint-parser@0.34.1(svelte@5.0.0-next.109):
     resolution: {integrity: sha512-9+uLA1pqI9AZioKVGJzYYmlOZWxfoCXSbAM9iaNm7H01XlYlzRTtJfZgl9o3StQGN41PfGJIbkKkfk3e/pHFfA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -8872,19 +8872,19 @@ packages:
       espree: 9.6.1
       postcss: 8.4.38
       postcss-scss: 4.0.9(postcss@8.4.38)
-      svelte: 5.0.0-next.108
+      svelte: 5.0.0-next.109
     dev: true
 
-  /svelte-hmr@0.16.0(svelte@5.0.0-next.108):
+  /svelte-hmr@0.16.0(svelte@5.0.0-next.109):
     resolution: {integrity: sha512-Gyc7cOS3VJzLlfj7wKS0ZnzDVdv3Pn2IuVeJPk9m2skfhcu5bq3wtIZyQGggr7/Iim5rH5cncyQft/kRLupcnA==}
     engines: {node: ^12.20 || ^14.13.1 || >= 16}
     peerDependencies:
       svelte: ^3.19.0 || ^4.0.0
     dependencies:
-      svelte: 5.0.0-next.108
+      svelte: 5.0.0-next.109
     dev: true
 
-  /svelte-preprocess@5.1.3(postcss-load-config@5.0.3)(postcss@8.4.38)(svelte@5.0.0-next.108)(typescript@5.4.3):
+  /svelte-preprocess@5.1.3(postcss-load-config@5.0.3)(postcss@8.4.38)(svelte@5.0.0-next.109)(typescript@5.4.3):
     resolution: {integrity: sha512-xxAkmxGHT+J/GourS5mVJeOXZzne1FR5ljeOUAMXUkfEhkLEllRreXpbl3dIYJlcJRfL1LO1uIAPpBpBfiqGPw==}
     engines: {node: '>= 16.0.0', pnpm: ^8.0.0}
     requiresBuild: true
@@ -8929,11 +8929,11 @@ packages:
       postcss-load-config: 5.0.3(postcss@8.4.38)
       sorcery: 0.11.0
       strip-indent: 3.0.0
-      svelte: 5.0.0-next.108
+      svelte: 5.0.0-next.109
       typescript: 5.4.3
     dev: true
 
-  /svelte2tsx@0.7.5(svelte@5.0.0-next.108)(typescript@5.4.3):
+  /svelte2tsx@0.7.5(svelte@5.0.0-next.109)(typescript@5.4.3):
     resolution: {integrity: sha512-+y8z4YLGsCYN8yjkqPXrqg6yKa73IZfU2WC3MVxiM0YU2/HbGZ1Tiq1ceKCOhMQVBFWjOgC/C465wN/ux6FsDQ==}
     peerDependencies:
       svelte: ^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0
@@ -8941,12 +8941,12 @@ packages:
     dependencies:
       dedent-js: 1.0.1
       pascal-case: 3.1.2
-      svelte: 5.0.0-next.108
+      svelte: 5.0.0-next.109
       typescript: 5.4.3
     dev: true
 
-  /svelte@5.0.0-next.108:
-    resolution: {integrity: sha512-4COuyOm+U2Iflb2VqxDev2iFeh214YHE6yOkKOKoDCGrd6IuEOaoopf+BpWgsF5v2PLqcF4HNkLYSbdwNc8AAA==}
+  /svelte@5.0.0-next.109:
+    resolution: {integrity: sha512-KiUxHKORb3zP0s6V3aoehLJtwBptolhQEvhvoALJUfuASa3Lq+pEqsoff1ShpN42nPGKcq9kH4a2MGEefUsRGg==}
     engines: {node: '>=18'}
     dependencies:
       '@ampproject/remapping': 2.3.0
diff --git a/sites/docs/package.json b/sites/docs/package.json
index 263f55efb..7a2bbfb43 100644
--- a/sites/docs/package.json
+++ b/sites/docs/package.json
@@ -38,7 +38,7 @@
 		"rehype-slug": "^6.0.0",
 		"remark-gfm": "^4.0.0",
 		"shiki": "^1.1.1",
-		"svelte": "5.0.0-next.108",
+		"svelte": "5.0.0-next.109",
 		"svelte-check": "^3.6.9",
 		"tailwind-merge": "^2.2.1",
 		"tailwind-variants": "^0.1.20",
diff --git a/sites/docs/src/lib/components/api-ref/data-attr-value-content.svelte b/sites/docs/src/lib/components/api-ref/data-attr-value-content.svelte
index 9cd4308ab..4a5bcded2 100644
--- a/sites/docs/src/lib/components/api-ref/data-attr-value-content.svelte
+++ b/sites/docs/src/lib/components/api-ref/data-attr-value-content.svelte
@@ -3,7 +3,6 @@
 	import { Info } from "$icons/index.js";
 	import { Code } from "$lib/components/index.js";
 	import type { DataAttrSchema } from "$lib/types/index.js";
-	import { flyAndScale } from "$lib/utils/index.js";
 
 	export let attr: DataAttrSchema;
 </script>
@@ -23,8 +22,6 @@
 			<Popover.Content
 				side="top"
 				sideOffset={10}
-				transition={flyAndScale}
-				transitionConfig={{ y: 8 }}
 				class="z-50 max-h-[400px] overflow-auto rounded-input border border-border bg-background p-4 shadow-popover"
 			>
 				<Code class="h-auto bg-transparent px-0 tracking-tight text-foreground">
diff --git a/sites/docs/src/lib/components/api-ref/prop-copy.svelte b/sites/docs/src/lib/components/api-ref/prop-copy.svelte
index 6507c771b..2cffa29fc 100644
--- a/sites/docs/src/lib/components/api-ref/prop-copy.svelte
+++ b/sites/docs/src/lib/components/api-ref/prop-copy.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { Popover } from "bits-ui";
 	import { Code } from "$lib/components/index.js";
-	import { flyAndScale } from "$lib/utils/index.js";
 
 	export let name: string;
 </script>
@@ -16,8 +15,6 @@
 		<Popover.Content
 			side="top"
 			sideOffset={10}
-			transition={flyAndScale}
-			transitionConfig={{ y: 8 }}
 			class="z-50 max-h-[400px] overflow-auto rounded-input border border-border bg-background p-4 shadow-popover"
 		>
 			<button class="bg-transparent"> Copy to clipboard </button>
diff --git a/sites/docs/src/lib/components/api-ref/prop-type-content.svelte b/sites/docs/src/lib/components/api-ref/prop-type-content.svelte
index 112264292..c25792df2 100644
--- a/sites/docs/src/lib/components/api-ref/prop-type-content.svelte
+++ b/sites/docs/src/lib/components/api-ref/prop-type-content.svelte
@@ -3,7 +3,7 @@
 	import { Info } from "$icons/index.js";
 	import { Code } from "$lib/components/index.js";
 	import type { PropType } from "$lib/types/index.js";
-	import { flyAndScale, parseTypeDef } from "$lib/utils/index.js";
+	import { parseTypeDef } from "$lib/utils/index.js";
 
 	export let type: PropType | string;
 </script>
@@ -23,8 +23,6 @@
 			<Popover.Content
 				side="top"
 				sideOffset={10}
-				transition={flyAndScale}
-				transitionConfig={{ y: 8 }}
 				class="z-50 max-h-[400px] overflow-auto rounded-input border border-border bg-background p-4 shadow-popover"
 			>
 				<Code class="h-auto bg-transparent px-0 tracking-tight text-foreground">
diff --git a/sites/docs/src/lib/components/demos/date-picker-demo.svelte b/sites/docs/src/lib/components/demos/date-picker-demo.svelte
index e09f1434a..ed820f90a 100644
--- a/sites/docs/src/lib/components/demos/date-picker-demo.svelte
+++ b/sites/docs/src/lib/components/demos/date-picker-demo.svelte
@@ -1,4 +1,4 @@
-<script lang="ts">
+<!-- <script lang="ts">
 	import { DatePicker } from "bits-ui";
 	import { CalendarBlank, CaretLeft, CaretRight } from "$icons/index.js";
 	import { flyAndScale } from "$lib/utils/index.js";
@@ -100,4 +100,4 @@
 			</DatePicker.Calendar>
 		</DatePicker.Content>
 	</div>
-</DatePicker.Root>
+</DatePicker.Root> -->
diff --git a/sites/docs/src/lib/components/demos/date-range-picker-demo.svelte b/sites/docs/src/lib/components/demos/date-range-picker-demo.svelte
index 67cd4084a..628ba22f5 100644
--- a/sites/docs/src/lib/components/demos/date-range-picker-demo.svelte
+++ b/sites/docs/src/lib/components/demos/date-range-picker-demo.svelte
@@ -1,4 +1,4 @@
-<script lang="ts">
+<!-- <script lang="ts">
 	import { type DateRange, DateRangePicker } from "bits-ui";
 	import { CalendarBlank, CaretLeft, CaretRight } from "$icons/index.js";
 	import { cn, flyAndScale } from "$lib/utils/index.js";
@@ -128,4 +128,4 @@
 			</DateRangePicker.Calendar>
 		</DateRangePicker.Content>
 	</div>
-</DateRangePicker.Root>
+</DateRangePicker.Root> -->
diff --git a/sites/docs/src/routes/sink/+page.svelte b/sites/docs/src/routes/sink/+page.svelte
new file mode 100644
index 000000000..b570287b9
--- /dev/null
+++ b/sites/docs/src/routes/sink/+page.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import PopoverDemo from "$lib/components/demos/popover-demo.svelte";
+</script>
+
+<div class="flex items-center justify-center">
+	<PopoverDemo />
+</div>