diff --git a/.gitignore b/.gitignore
index f9467c03..30e84771 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,5 @@
 # IDE's
 .idea
-.vscode
 
 # Artifacts
 node_modules
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..eeebd611
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,6 @@
+{
+	"[typescript][javascript][json][html][css][jsonc][markdown][typescriptreact]": {
+		"editor.defaultFormatter": "biomejs.biome",
+		"editor.formatOnSave": true
+	}
+}
\ No newline at end of file
diff --git a/biome.json b/biome.json
index cc6b0797..fef776a3 100644
--- a/biome.json
+++ b/biome.json
@@ -9,7 +9,24 @@
 				"rules": {
 					"style": {
 						"useConst": "off",
-						"useImportType": "off"
+						"useImportType": "off",
+						"noNonNullAssertion": "off"
+					},
+					"suspicious": {
+						"noAssignInExpressions": "off"
+					}
+				}
+			}
+		},
+		{
+			"include": ["*.ts"],
+			"linter": {
+				"rules": {
+					"style": {
+						"noNonNullAssertion": "off"
+					},
+					"suspicious": {
+						"noAssignInExpressions": "off"
 					}
 				}
 			}
diff --git a/package.json b/package.json
index d1da242f..3a206a9a 100644
--- a/package.json
+++ b/package.json
@@ -2,14 +2,14 @@
 	"name": "monorepo",
 	"private": true,
 	"scripts": {
+		"dev": "pnpm -F \"./packages/**\" sync && pnpm -r --parallel --reporter append-only --color dev",
 		"format": "biome check . --write",
 		"format:check": "biome check .",
 		"build": "pnpm --recursive build",
 		"build:watch": "pnpm --recursive --parallel build:watch",
-		"test": "pnpm --recursive test",
-		"test:watch": "pnpm --recursive test:watch",
-		"sync": "pnpm --recursive sync",
-		"postinstall": "pnpm sync"
+		"test": "pnpm --recursive --reporter append-only --color test",
+		"test:watch": "pnpm --recursive --reporter append-only --color test:watch",
+		"sync": "pnpm --recursive sync"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "^1.9.4",
diff --git a/packages/floating-ui-svelte/package.json b/packages/floating-ui-svelte/package.json
index 6dfa0f6f..f4ba5206 100644
--- a/packages/floating-ui-svelte/package.json
+++ b/packages/floating-ui-svelte/package.json
@@ -2,9 +2,12 @@
 	"name": "@skeletonlabs/floating-ui-svelte",
 	"version": "0.3.9",
 	"scripts": {
+		"dev": "pnpm \"/dev:/\"",
 		"build": "svelte-package --input ./src",
 		"build:watch": "pnpm build --watch",
 		"test": "vitest run",
+		"dev:visual": "vite dev",
+		"dev:build": "pnpm build:watch",
 		"test:watch": "pnpm test --watch",
 		"sync": "svelte-kit sync && pnpm build"
 	},
@@ -31,17 +34,26 @@
 		"@sveltejs/kit": "^2.15.1",
 		"@sveltejs/package": "^2.3.7",
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
+		"@tailwindcss/vite": "4.0.0-beta.9",
 		"@testing-library/jest-dom": "^6.6.3",
 		"@testing-library/svelte": "^5.2.6",
 		"@testing-library/user-event": "^14.5.2",
+		"bits-ui": "^1.0.0-next.78",
+		"clsx": "^2.1.1",
 		"csstype": "^3.1.3",
-		"svelte": "^5.16.0",
+		"lucide-svelte": "^0.469.0",
+		"resize-observer-polyfill": "^1.5.1",
+		"svelte": "^5.17.3",
+		"tailwindcss": "4.0.0-beta.9",
 		"typescript": "^5.7.2",
-		"vite": "^6.0.6",
+		"vite": "6.0.7",
 		"vitest": "^2.1.8"
 	},
 	"dependencies": {
 		"@floating-ui/dom": "^1.6.12",
-		"@floating-ui/utils": "^0.2.8"
+		"@floating-ui/utils": "^0.2.8",
+		"esm-env": "^1.2.1",
+		"style-to-object": "^1.0.8",
+		"tabbable": "^6.2.0"
 	}
 }
diff --git a/packages/floating-ui-svelte/src/app.d.ts b/packages/floating-ui-svelte/src/app.d.ts
new file mode 100644
index 00000000..cdbaaf52
--- /dev/null
+++ b/packages/floating-ui-svelte/src/app.d.ts
@@ -0,0 +1,12 @@
+// These global variables enable projects that potentially use multiple versions of
+// floating ui via dependencies, etc. to share these variables across all instances.
+// From experience with vaul-svelte using Bits UI under the hood, without these globals,
+// composing multiple instances of floating ui components would not work as expected.
+declare global {
+	var fuiLockCount: { current: number };
+	// biome-ignore lint/complexity/noBannedTypes: <explanation>
+	var fuiLockCleanup: { current: Function };
+	var fuiPrevFocusedElements: Element[];
+}
+
+export {};
diff --git a/packages/floating-ui-svelte/src/components/composite/composite-item.svelte b/packages/floating-ui-svelte/src/components/composite/composite-item.svelte
new file mode 100644
index 00000000..a76a8ba8
--- /dev/null
+++ b/packages/floating-ui-svelte/src/components/composite/composite-item.svelte
@@ -0,0 +1,56 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { Boxed, WithRef } from "../../types.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { CompositeContext } from "./context.js";
+	import { useListItem } from "../floating-list/hooks.svelte.js";
+	import { box } from "../../internal/box.svelte.js";
+
+	interface CompositeItemProps {
+		render?: Snippet<
+			[HTMLAttributes<HTMLElement>, Boxed<HTMLElement | null>]
+		>;
+	}
+
+	export type { CompositeItemProps };
+</script>
+
+<script lang="ts">
+	let {
+		ref = $bindable(null),
+		render,
+		...rest
+	}: WithRef & HTMLAttributes<HTMLElement> & CompositeItemProps = $props();
+
+	const ctx = CompositeContext.get();
+	const listItem = useListItem();
+
+	const isActive = $derived(ctx.activeIndex === listItem.index);
+
+	const mergedProps: HTMLAttributes<HTMLElement> = $derived({
+		...rest,
+		tabindex: isActive ? 0 : -1,
+		"data-active": isActive ? "" : undefined,
+		onfocus: (event) => {
+			rest.onfocus?.(event);
+			ctx.onNavigate(listItem.index);
+		},
+	});
+
+	const boxedRef = box.with(
+		() => ref,
+		(v) => {
+			ref = v;
+			listItem.ref = v;
+		}
+	);
+</script>
+
+{#if render}
+	{@render render(mergedProps, boxedRef)}
+{:else}
+	{@const { children, ...restMerged } = mergedProps}
+	<div {...restMerged} bind:this={boxedRef.current}>
+		{@render children?.()}
+	</div>
+{/if}
diff --git a/packages/floating-ui-svelte/src/components/composite/composite.svelte b/packages/floating-ui-svelte/src/components/composite/composite.svelte
new file mode 100644
index 00000000..ad898d62
--- /dev/null
+++ b/packages/floating-ui-svelte/src/components/composite/composite.svelte
@@ -0,0 +1,301 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { Boxed, Dimensions, WithRef } from "../../types.js";
+	import {
+		ARROW_DOWN,
+		ARROW_LEFT,
+		ARROW_RIGHT,
+		ARROW_UP,
+		buildCellMap,
+		findNonDisabledIndex,
+		getCellIndexOfCorner,
+		getCellIndices,
+		getGridNavigatedIndex,
+		getMaxIndex,
+		getMinIndex,
+		isDisabled,
+		isIndexOutOfBounds,
+	} from "../../internal/composite.js";
+	import { CompositeContext } from "./context.js";
+
+	interface CompositeProps {
+		/**
+		 * Determines the element to render.
+		 * @example
+		 * ```svelte
+		 * <Composite>
+		 * 	{#snippet render({ children, ...props })}
+		 * 		<select {...props}>
+		 * 			{@render children?.()}
+		 * 		</select>
+		 * 	{/snippet}
+		 * </Composite>
+		 * ```
+		 */
+		render?: Snippet<
+			[HTMLAttributes<HTMLElement>, Boxed<HTMLElement | null>]
+		>;
+		/**
+		 * Determines the orientation of the composite.
+		 */
+		orientation?: "horizontal" | "vertical" | "both";
+		/**
+		 * Determines whether focus should loop around when navigating past the first
+		 * or last item.
+		 */
+		loop?: boolean;
+		/**
+		 * Whether the direction of the composite’s navigation is in RTL layout.
+		 */
+		rtl?: boolean;
+		/**
+		 * Determines the number of columns there are in the composite
+		 * (i.e. it’s a grid).
+		 */
+		cols?: number;
+		/**
+		 * Determines which items are disabled. The `disabled` or `aria-disabled`
+		 * attributes are used by default.
+		 */
+		disabledIndices?: number[];
+		/**
+		 * Determines which item is active. Used to externally control the active
+		 * item.
+		 */
+		activeIndex?: number;
+		/**
+		 * Called when the user navigates to a new item. Used to externally control
+		 * the active item.
+		 */
+		onNavigate?(index: number): void;
+		/**
+		 * Only for `cols > 1`, specify sizes for grid items.
+		 * `{ width: 2, height: 2 }` means an item is 2 columns wide and 2 rows tall.
+		 */
+		itemSizes?: Dimensions[];
+		/**
+		 * Only relevant for `cols > 1` and items with different sizes, specify if
+		 * the grid is dense (as defined in the CSS spec for grid-auto-flow).
+		 */
+		dense?: boolean;
+	}
+
+	const horizontalKeys = [ARROW_LEFT, ARROW_RIGHT];
+	const verticalKeys = [ARROW_UP, ARROW_DOWN];
+	const allKeys = [...horizontalKeys, ...verticalKeys];
+
+	export type { CompositeProps };
+</script>
+
+<script lang="ts">
+	import FloatingList from "../floating-list/floating-list.svelte";
+	import { box } from "../../internal/box.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		render,
+		orientation = "both",
+		loop = true,
+		rtl = false,
+		cols = 1,
+		disabledIndices,
+		activeIndex = 0,
+		onNavigate: externalOnNavigate,
+		itemSizes,
+		dense = false,
+		...rest
+	}: HTMLAttributes<HTMLElement> & WithRef & CompositeProps = $props();
+
+	let elements = $state<Array<HTMLDivElement | null>>([]);
+
+	function onNavigate(index: number) {
+		if (externalOnNavigate) {
+			externalOnNavigate(index);
+		}
+		activeIndex = index;
+	}
+
+	CompositeContext.set({
+		get activeIndex() {
+			return activeIndex;
+		},
+		onNavigate,
+	});
+
+	const isGrid = $derived(cols > 1);
+
+	function handleKeyDown(
+		event: KeyboardEvent & { currentTarget: HTMLElement }
+	) {
+		if (!allKeys.includes(event.key)) return;
+
+		let nextIndex = activeIndex;
+
+		const minIndex = getMinIndex(elements, disabledIndices);
+		const maxIndex = getMaxIndex(elements, disabledIndices);
+
+		const horizontalEndKey = rtl ? ARROW_LEFT : ARROW_RIGHT;
+		const horizontalStartKey = rtl ? ARROW_RIGHT : ARROW_LEFT;
+
+		if (isGrid) {
+			const sizes =
+				itemSizes ||
+				Array.from({ length: elements.length }, () => ({
+					width: 1,
+					height: 1,
+				}));
+
+			// To calculate movements on the grid, we use hypothetical cell indices
+			// as if every item was 1x1, then convert back to real indices.
+			const cellMap = buildCellMap(sizes, cols, dense);
+			const minGridIndex = cellMap.findIndex(
+				(index) =>
+					index != null &&
+					!isDisabled(elements, index, disabledIndices)
+			);
+			// last enabled index
+			const maxGridIndex = cellMap.reduce(
+				(foundIndex: number, index, cellIndex) =>
+					index != null &&
+					!isDisabled(elements, index, disabledIndices)
+						? cellIndex
+						: foundIndex,
+				-1
+			);
+
+			const maybeNextIndex =
+				cellMap[
+					getGridNavigatedIndex(
+						cellMap.map((itemIndex) =>
+							itemIndex ? elements[itemIndex] : null
+						),
+						{
+							event,
+							orientation,
+							loop,
+							rtl,
+							cols,
+							// treat undefined (empty grid spaces) as disabled indices so we
+							// don't end up in them
+							disabledIndices: getCellIndices(
+								[
+									...(disabledIndices ||
+										elements.map((_, index) =>
+											isDisabled(elements, index)
+												? index
+												: undefined
+										)),
+									undefined,
+								],
+								cellMap
+							),
+							minIndex: minGridIndex,
+							maxIndex: maxGridIndex,
+							prevIndex: getCellIndexOfCorner(
+								activeIndex > maxIndex ? minIndex : activeIndex,
+								sizes,
+								cellMap,
+								cols,
+								// use a corner matching the edge closest to the direction we're
+								// moving in so we don't end up in the same item. Prefer
+								// top/left over bottom/right.
+								event.key === ARROW_DOWN
+									? "bl"
+									: event.key === horizontalEndKey
+										? "tr"
+										: "tl"
+							),
+						}
+					)
+				];
+
+			if (maybeNextIndex != null) {
+				nextIndex = maybeNextIndex;
+			}
+		}
+
+		const toEndKeys = {
+			horizontal: [horizontalEndKey],
+			vertical: [ARROW_DOWN],
+			both: [horizontalEndKey, ARROW_DOWN],
+		}[orientation];
+
+		const toStartKeys = {
+			horizontal: [horizontalStartKey],
+			vertical: [ARROW_UP],
+			both: [horizontalStartKey, ARROW_UP],
+		}[orientation];
+
+		const preventedKeys = isGrid
+			? allKeys
+			: {
+					horizontal: horizontalKeys,
+					vertical: verticalKeys,
+					both: allKeys,
+				}[orientation];
+
+		if (
+			nextIndex === activeIndex &&
+			[...toEndKeys, ...toStartKeys].includes(event.key)
+		) {
+			if (
+				loop &&
+				nextIndex === maxIndex &&
+				toEndKeys.includes(event.key)
+			) {
+				nextIndex = minIndex;
+			} else if (
+				loop &&
+				nextIndex === minIndex &&
+				toStartKeys.includes(event.key)
+			) {
+				nextIndex = maxIndex;
+			} else {
+				nextIndex = findNonDisabledIndex(elements, {
+					startingIndex: nextIndex,
+					decrement: toStartKeys.includes(event.key),
+					disabledIndices,
+				});
+			}
+		}
+
+		if (
+			nextIndex !== activeIndex &&
+			!isIndexOutOfBounds(elements, nextIndex)
+		) {
+			event.stopPropagation();
+
+			if (preventedKeys.includes(event.key)) {
+				event.preventDefault();
+			}
+
+			onNavigate(nextIndex);
+			elements[nextIndex]?.focus();
+		}
+	}
+
+	const mergedProps: HTMLAttributes<HTMLElement> = $derived({
+		...rest,
+		"aria-orientation": orientation === "both" ? undefined : orientation,
+		onkeydown: (event) => {
+			rest.onkeydown?.(event);
+			handleKeyDown(event);
+		},
+	});
+
+	const boxedRef = box.with(
+		() => ref,
+		(v) => (ref = v)
+	);
+</script>
+
+<FloatingList bind:elements>
+	{#if render}
+		{@render render?.(mergedProps, boxedRef)}
+	{:else}
+		<div {...mergedProps} bind:this={boxedRef.current}>
+			{@render mergedProps.children?.()}
+		</div>
+	{/if}
+</FloatingList>
diff --git a/packages/floating-ui-svelte/src/components/composite/context.ts b/packages/floating-ui-svelte/src/components/composite/context.ts
new file mode 100644
index 00000000..8de53829
--- /dev/null
+++ b/packages/floating-ui-svelte/src/components/composite/context.ts
@@ -0,0 +1,8 @@
+import { Context } from "../../internal/context.js";
+
+const CompositeContext = new Context<{
+	activeIndex: number;
+	onNavigate: (index: number) => void;
+}>("CompositeContext");
+
+export { CompositeContext };
diff --git a/packages/floating-ui-svelte/src/components/floating-arrow.svelte b/packages/floating-ui-svelte/src/components/floating-arrow.svelte
index fda2b9b0..0486017c 100644
--- a/packages/floating-ui-svelte/src/components/floating-arrow.svelte
+++ b/packages/floating-ui-svelte/src/components/floating-arrow.svelte
@@ -1,178 +1,197 @@
 <script lang="ts" module>
-import type { SVGAttributes } from "svelte/elements";
-import type { FloatingContext } from "../../src/index.js";
-
-export interface FloatingArrowProps extends SVGAttributes<SVGElement> {
-	/** The bound HTML element reference. */
-	ref: Element | null;
-	/** The floating context. */
-	context: FloatingContext;
-	/**
-	 * Width of the arrow.
-	 * @default 14
-	 */
-	width?: number;
-	/**
-	 * Height of the arrow.
-	 * @default 7
-	 */
-	height?: number;
-	/**
-	 * The corner radius (rounding) of the arrow tip.
-	 * @default 0 (sharp)
-	 */
-	tipRadius?: number;
-	/**
-	 * Forces a static offset over dynamic positioning under a certain condition.
-	 * @default undefined (use dynamic position)
-	 */
-	staticOffset?: string | number | null;
-	/**
-	 * Custom path string.
-	 * @default undefined (use dynamic path)
-	 */
-	d?: string;
-	/**
-	 * Stroke (border) color of the arrow.
-	 * @default "none"
-	 */
-	stroke?: string;
-	/**
-	 * Stroke (border) width of the arrow.
-	 * @default 0
-	 */
-	strokeWidth?: number;
-
-	// Styling ---
-	/** Set transform styles. */
-	transform?: string;
-	/** Set fill styles. */
-	fill?: string;
-}
+	import type { SVGAttributes } from "svelte/elements";
+
+	interface FloatingArrowProps extends SVGAttributes<SVGElement> {
+		/** The bound HTML element reference. */
+		ref: Element | null;
+		/** The floating context. */
+		context: FloatingContextData;
+		/**
+		 * Width of the arrow.
+		 * @default 14
+		 */
+		width?: number;
+		/**
+		 * Height of the arrow.
+		 * @default 7
+		 */
+		height?: number;
+		/**
+		 * The corner radius (rounding) of the arrow tip.
+		 * @default 0 (sharp)
+		 */
+		tipRadius?: number;
+		/**
+		 * Forces a static offset over dynamic positioning under a certain condition.
+		 * @default undefined (use dynamic position)
+		 */
+		staticOffset?: string | number | null;
+		/**
+		 * Custom path string.
+		 * @default undefined (use dynamic path)
+		 */
+		d?: string;
+		/**
+		 * Stroke (border) color of the arrow.
+		 * @default "none"
+		 */
+		stroke?: string;
+		/**
+		 * Stroke (border) width of the arrow.
+		 * @default 0
+		 */
+		strokeWidth?: number;
+	}
+
+	export type { FloatingArrowProps };
 </script>
 
 <script lang="ts">
-import type { Alignment, Side } from "@floating-ui/dom";
-import { platform } from "@floating-ui/dom";
-import { useId } from "../hooks/use-id.js";
-import { styleObjectToString } from "../internal/style-object-to-string.js";
-
-let {
-	ref = $bindable(null),
-	context,
-	// ---
-	width = 14,
-	height = 7,
-	tipRadius = 0,
-	strokeWidth = 0,
-	staticOffset,
-	stroke,
-	d,
-	// ---
-	transform,
-	fill,
-	// ---
-	...rest
-}: FloatingArrowProps = $props();
-
-const {
-	placement,
-	elements: { floating },
-	middlewareData: { arrow },
-} = $derived(context);
-
-const clipPathId = useId();
-
-// Strokes must be double the border width, this ensures the stroke's width
-// works as you'd expect.
-const computedStrokeWidth = $derived(strokeWidth * 2);
-const halfStrokeWidth = $derived(computedStrokeWidth / 2);
-
-const svgX = $derived((width / 2) * (tipRadius / -8 + 1));
-const svgY = $derived(((height / 2) * tipRadius) / 4);
-
-const [side, alignment] = $derived(placement.split("-") as [Side, Alignment]);
-const isRTL = $derived(floating && platform.isRTL(floating));
-const isCustomShape = $derived(!!d);
-const isVerticalSide = $derived(side === "top" || side === "bottom");
-
-const yOffsetProp = $derived(
-	staticOffset && alignment === "end" ? "bottom" : "top",
-);
-const xOffsetProp = $derived.by(() => {
-	if (!staticOffset) {
-		return "left";
-	}
-	if (isRTL) {
+	import type { Alignment, Side } from "@floating-ui/dom";
+	import { useId } from "../hooks/use-id.js";
+	import {
+		styleObjectToString,
+		styleStringToObject,
+	} from "../internal/style-object-to-string.js";
+	import type { FloatingContextData } from "../hooks/use-floating-context.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		context,
+		// ---
+		width = 14,
+		height = 7,
+		tipRadius = 0,
+		strokeWidth = 0,
+		staticOffset,
+		stroke,
+		d,
+		style: styleProp = "",
+		...rest
+	}: FloatingArrowProps = $props();
+
+	const { transform, ...restStyle } = $derived(
+		styleStringToObject(styleProp)
+	);
+
+	const clipPathId = useId();
+
+	let isRTL = $state(false);
+
+	// https://github.com/floating-ui/floating-ui/issues/2932
+
+	$effect(() => {
+		if (!context.elements.floating) return;
+		if (getComputedStyle(context.elements.floating).direction === "rtl") {
+			isRTL = true;
+		}
+	});
+
+	const [side, alignment] = $derived(
+		context.placement.split("-") as [Side, Alignment]
+	);
+	const isVerticalSide = $derived(side === "top" || side === "bottom");
+
+	const computedStaticOffset = $derived.by(() => {
+		if (
+			(isVerticalSide && context.middlewareData.shift?.x) ||
+			(!isVerticalSide && context.middlewareData.shift?.y)
+		) {
+			return null;
+		}
+		return staticOffset;
+	});
+
+	// Strokes must be double the border width, this ensures the stroke's width
+	// works as you'd expect.
+	const computedStrokeWidth = $derived(strokeWidth * 2);
+	const halfStrokeWidth = $derived(computedStrokeWidth / 2);
+
+	const svgX = $derived((width / 2) * (tipRadius / -8 + 1));
+	const svgY = $derived(((height / 2) * tipRadius) / 4);
+
+	const isCustomShape = $derived(!!d);
+
+	const yOffsetProp = $derived(
+		computedStaticOffset && alignment === "end" ? "bottom" : "top"
+	);
+	const xOffsetProp = $derived.by(() => {
+		if (computedStaticOffset && isRTL) {
+			return alignment === "end" ? "left" : "right";
+		}
 		return alignment === "end" ? "right" : "left";
-	}
-	return alignment === "end" ? "right" : "left";
-});
-
-const arrowX = $derived(arrow?.x != null ? staticOffset || `${arrow.x}px` : "");
-const arrowY = $derived(arrow?.y != null ? staticOffset || `${arrow.y}px` : "");
-
-const dValue = $derived(
-	d ||
-		`M0,0 H${width} L${width - svgX},${height - svgY} Q${width / 2},${height} ${svgX},${height - svgY} Z`,
-);
-
-const rotation = $derived.by(() => {
-	switch (side) {
-		case "top":
-			return isCustomShape ? "rotate(180deg)" : "";
-		case "left":
-			return isCustomShape ? "rotate(90deg)" : "rotate(-90deg)";
-		case "bottom":
-			return isCustomShape ? "" : "rotate(180deg)";
-		case "right":
-			return isCustomShape ? "rotate(-90deg)" : "rotate(90deg)";
-	}
-});
+	});
+
+	const arrowX = $derived(
+		context.middlewareData.arrow?.x != null
+			? staticOffset || `${context.middlewareData.arrow.x}px`
+			: ""
+	);
+	const arrowY = $derived(
+		context.middlewareData.arrow?.y != null
+			? staticOffset || `${context.middlewareData.arrow.y}px`
+			: ""
+	);
+
+	const dValue = $derived(
+		d ||
+			`M0,0 H${width} L${width - svgX},${height - svgY} Q${width / 2},${height} ${svgX},${height - svgY} Z`
+	);
+
+	const rotation = $derived.by(() => {
+		return {
+			top: isCustomShape ? "rotate(180deg)" : "",
+			left: isCustomShape ? "rotate(90deg)" : "rotate(-90deg)",
+			bottom: isCustomShape ? "" : "rotate(180deg)",
+			right: isCustomShape ? "rotate(-90deg)" : "rotate(90deg)",
+		}[side];
+	});
 </script>
 
-<!-- FIXME: extend styleObjectToString type to accept `rest.styles` -->
-
-<svg
-        bind:this={ref}
-        width={isCustomShape ? width : width + computedStrokeWidth}
-        height={width}
-        viewBox={`0 0 ${width} ${height > width ? height : width}`}
-        aria-hidden="true"
-        style={styleObjectToString({
-		position: 'absolute',
-		'pointer-events': 'none',
-		[xOffsetProp]: `${arrowX}`,
-		[yOffsetProp]: `${arrowY}`,
-		[side]: isVerticalSide || isCustomShape ? '100%' : `calc(100% - ${computedStrokeWidth / 2}px)`,
-		transform: `${rotation} ${transform ?? ''}`,
-		fill,
-	})}
-        data-testid="floating-arrow"
-        {...rest}
->
-    {#if computedStrokeWidth > 0}
-        <!-- Account for the stroke on the fill path rendered below. -->
-        <path
-                fill="none"
-                {stroke}
-                clip-path={`url(#${clipPathId})`}
-                stroke-width={computedStrokeWidth + (d ? 0 : 1)}
-                d={dValue}
-        />
-    {/if}
-    <!--
+{#if context.elements.floating}
+	<svg
+		bind:this={ref}
+		{...rest}
+		width={isCustomShape ? width : width + computedStrokeWidth}
+		height={width}
+		viewBox={`0 0 ${width} ${height > width ? height : width}`}
+		aria-hidden="true"
+		style={styleObjectToString({
+			position: "absolute",
+			"pointer-events": "none",
+			[xOffsetProp]: `${arrowX}`,
+			[yOffsetProp]: `${arrowY}`,
+			[side]:
+				isVerticalSide || isCustomShape
+					? "100%"
+					: `calc(100% - ${computedStrokeWidth / 2}px)`,
+			transform: [rotation, transform].filter((t) => !!t).join(" "),
+			...restStyle,
+		})}
+		data-testid="floating-arrow">
+		{#if computedStrokeWidth > 0}
+			<!-- Account for the stroke on the fill path rendered below. -->
+			<path
+				clip-path={`url(#${clipPathId})`}
+				fill="none"
+				{stroke}
+				stroke-width={computedStrokeWidth + (d ? 0 : 1)}
+				d={dValue} />
+		{/if}
+		<!--
         In Firefox, for left/right placements there's a ~0.5px gap where the
         border can show through. Adding a stroke on the fill removes it.
     -->
-    <path stroke={computedStrokeWidth && !d ? fill : 'none'} d={dValue} />
-    <!-- Assumes the border-width of the floating element matches the stroke. -->
-    <clipPath id={clipPathId}>
-        <rect
-                x={-halfStrokeWidth}
-                y={halfStrokeWidth * (isCustomShape ? -1 : 1)}
-                width={width + computedStrokeWidth}
-                height={width}
-        />
-    </clipPath>
-</svg>
\ No newline at end of file
+		<path
+			stroke={computedStrokeWidth && !d ? rest.fill : "none"}
+			d={dValue} />
+		<!-- Assumes the border-width of the floating element matches the stroke. -->
+		<clipPath id={clipPathId}>
+			<rect
+				x={-halfStrokeWidth}
+				y={halfStrokeWidth * (isCustomShape ? -1 : 1)}
+				width={width + computedStrokeWidth}
+				height={width} />
+		</clipPath>
+	</svg>
+{/if}
diff --git a/packages/floating-ui-svelte/src/components/floating-delay-group.svelte b/packages/floating-ui-svelte/src/components/floating-delay-group.svelte
new file mode 100644
index 00000000..7ac689de
--- /dev/null
+++ b/packages/floating-ui-svelte/src/components/floating-delay-group.svelte
@@ -0,0 +1,220 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import { watch } from "../internal/watch.svelte.js";
+	import {
+		box,
+		type ReadableBox,
+		type WritableBox,
+	} from "../internal/box.svelte.js";
+	import { Context } from "../internal/context.js";
+	import type { MaybeGetter } from "../types.js";
+	import { extract } from "../internal/extract.js";
+	import { getDelay } from "../hooks/use-hover.svelte.js";
+	import type { FloatingRootContext } from "../hooks/use-floating-root-context.svelte.js";
+	import type { FloatingContextData } from "../hooks/use-floating-context.svelte.js";
+
+	type Delay = number | Partial<{ open: number; close: number }>;
+
+	interface DelayGroupStateOptions {
+		timeoutMs: WritableBox<number>;
+		delay: WritableBox<Delay>;
+		initialDelay: ReadableBox<Delay>;
+	}
+
+	class DelayGroupState {
+		#delay = box<Delay>(0);
+		#initialDelay = box.with<Delay>(() => 0);
+		#timeoutMs = box(0);
+		// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+		currentId: any = $state(null);
+		isInstantPhase: boolean = $state(false);
+
+		constructor(options?: DelayGroupStateOptions) {
+			if (options) {
+				this.#delay = options.delay;
+				this.#initialDelay = options.initialDelay;
+				this.#timeoutMs = options.timeoutMs;
+			}
+		}
+
+		get delay() {
+			return this.#delay.current;
+		}
+
+		set delay(value: Delay) {
+			this.#delay.current = value;
+		}
+
+		get initialDelay() {
+			return this.#initialDelay.current;
+		}
+
+		get timeoutMs() {
+			return this.#timeoutMs.current;
+		}
+
+		set timeoutMs(value: number) {
+			this.#timeoutMs.current = value;
+		}
+	}
+
+	const FloatingDelayGroupContext = new Context<DelayGroupState>(
+		"FloatingDelayGroup"
+	);
+
+	interface UseDelayGroupOptions {
+		/**
+		 * Whether delay grouping should be enabled.
+		 * @default true
+		 */
+		enabled?: MaybeGetter<boolean>;
+
+		// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+		id?: MaybeGetter<any>;
+	}
+
+	function useDelayGroupContext(): DelayGroupState {
+		return FloatingDelayGroupContext.getOr(new DelayGroupState());
+	}
+
+	/**
+	 * Enables grouping when called inside a component that's a child of a
+	 * `FloatingDelayGroup`.
+	 * @see https://floating-ui-svelte.vercel.app/docs/FloatingDelayGroup
+	 */
+	function useDelayGroup(
+		context: FloatingContextData | FloatingRootContext,
+		options: UseDelayGroupOptions = {}
+	): DelayGroupState {
+		const enabled = $derived.by(() => extract(options.enabled, true));
+		const id = $derived.by(() => extract(options.id) ?? context.floatingId);
+		const groupContext = useDelayGroupContext();
+
+		watch.pre(
+			[
+				() => enabled,
+				() => id,
+				() => groupContext.currentId,
+				() => groupContext.initialDelay,
+			],
+			() => {
+				if (!enabled || !groupContext.currentId) return;
+
+				groupContext.delay = {
+					open: 1,
+					close: getDelay(groupContext.initialDelay, "close"),
+				};
+
+				if (groupContext.currentId !== id) {
+					context.onOpenChange(false);
+				}
+			}
+		);
+
+		watch.pre(
+			[
+				() => enabled,
+				() => context.open,
+				() => groupContext.currentId,
+				() => id,
+				() => groupContext.initialDelay,
+				() => groupContext.timeoutMs,
+			],
+			() => {
+				const unset = () => {
+					context.onOpenChange(false);
+					groupContext.delay = groupContext.initialDelay;
+					groupContext.currentId = null;
+				};
+
+				if (!enabled || !groupContext.currentId) return;
+
+				if (!context.open && groupContext.currentId === id) {
+					if (groupContext.timeoutMs) {
+						const timeout = window.setTimeout(
+							unset,
+							groupContext.timeoutMs
+						);
+						return () => {
+							window.clearTimeout(timeout);
+						};
+					}
+
+					unset();
+				}
+			}
+		);
+
+		watch.pre([() => enabled, () => context.open, () => id], () => {
+			if (!enabled || !context.open) return;
+			groupContext.currentId = id;
+		});
+
+		return groupContext;
+	}
+
+	interface FloatingDelayGroupProps {
+		children?: Snippet;
+		/**
+		 * The delay to use for the group.
+		 */
+		delay: Delay;
+		/**
+		 * An optional explicit timeout to use for the group, which represents when
+		 * grouping logic will no longer be active after the close delay completes.
+		 * This is useful if you want grouping to “last” longer than the close delay,
+		 * for example if there is no close delay at all.
+		 */
+		timeoutMs?: number;
+	}
+
+	export type { FloatingDelayGroupProps, UseDelayGroupOptions, Delay };
+	export { useDelayGroup };
+</script>
+
+<script lang="ts">
+	let { children, delay, timeoutMs = 0 }: FloatingDelayGroupProps = $props();
+
+	let initialCurrentId: any = null;
+	let stableDelay = $state(delay);
+	let stableInitialDelay = $state(delay);
+
+	watch.pre(
+		() => delay,
+		() => {
+			stableDelay = delay;
+			stableInitialDelay = delay;
+		}
+	);
+
+	const delayGroupState = new DelayGroupState({
+		delay: box.with(
+			() => stableDelay,
+			(v) => (stableDelay = v)
+		),
+		timeoutMs: box.with(
+			() => timeoutMs,
+			(v) => (timeoutMs = v)
+		),
+		initialDelay: box.with(() => stableInitialDelay),
+	});
+
+	$effect.pre(() => {
+		if (delayGroupState.currentId) {
+			if (initialCurrentId === null) {
+				initialCurrentId = delayGroupState.currentId;
+			} else if (!delayGroupState.isInstantPhase) {
+				delayGroupState.isInstantPhase = true;
+			}
+		} else {
+			if (delayGroupState.isInstantPhase) {
+				delayGroupState.isInstantPhase = false;
+			}
+			initialCurrentId = null;
+		}
+	});
+
+	FloatingDelayGroupContext.set(delayGroupState);
+</script>
+
+{@render children?.()}
diff --git a/packages/floating-ui-svelte/src/components/floating-focus-manager/floating-focus-manager.svelte b/packages/floating-ui-svelte/src/components/floating-focus-manager/floating-focus-manager.svelte
new file mode 100644
index 00000000..47f96174
--- /dev/null
+++ b/packages/floating-ui-svelte/src/components/floating-focus-manager/floating-focus-manager.svelte
@@ -0,0 +1,779 @@
+<script lang="ts" module>
+	import { type Snippet } from "svelte";
+	import type { FloatingRootContext } from "../../hooks/use-floating-root-context.svelte.js";
+	import { getNodeName, isHTMLElement } from "@floating-ui/utils/dom";
+	import {
+		getNextTabbable,
+		getPreviousTabbable,
+		getTabbableOptions,
+		isOutsideEvent,
+	} from "../../internal/tabbable.js";
+	import { isTabbable, tabbable, type FocusableElement } from "tabbable";
+	import { isTypeableCombobox } from "../../internal/is-typeable-element.js";
+	import { markOthers, supportsInert } from "../../internal/mark-others.js";
+	import { useFloatingTree } from "../floating-tree/hooks.svelte.js";
+	import { usePortalContext } from "../floating-portal/hooks.svelte.js";
+	import { getFloatingFocusElement } from "../../internal/get-floating-focus-element.js";
+	import {
+		activeElement,
+		contains,
+		createAttribute,
+		getDocument,
+		getTarget,
+		isVirtualClick,
+		isVirtualPointerEvent,
+		stopEvent,
+	} from "../../internal/dom.js";
+	import { enqueueFocus } from "../../internal/enqueue-focus.js";
+	import { on } from "svelte/events";
+	import { getChildren } from "../../internal/get-children.js";
+	import { getAncestors } from "../../internal/get-ancestors.js";
+	import { executeCallbacks } from "../../internal/execute-callbacks.js";
+	import type { Boxed, OpenChangeReason } from "../../types.js";
+	import { watch } from "../../internal/watch.svelte.js";
+	import FocusGuard, { HIDDEN_STYLES_STRING } from "../focus-guard.svelte";
+
+	const LIST_LIMIT = 20;
+	globalThis.fuiPrevFocusedElements ??= [];
+
+	function addPreviouslyFocusedElement(element: Element | null) {
+		globalThis.fuiPrevFocusedElements =
+			globalThis.fuiPrevFocusedElements.filter((el) => el.isConnected);
+
+		if (element && getNodeName(element) !== "body") {
+			globalThis.fuiPrevFocusedElements.push(element);
+			if (globalThis.fuiPrevFocusedElements.length > LIST_LIMIT) {
+				globalThis.fuiPrevFocusedElements =
+					globalThis.fuiPrevFocusedElements.slice(-LIST_LIMIT);
+			}
+		}
+	}
+
+	function getPreviouslyFocusedElement() {
+		return globalThis.fuiPrevFocusedElements
+			.slice()
+			.reverse()
+			.find((el) => el.isConnected);
+	}
+
+	function getFirstTabbableElement(container: Element) {
+		const tabbableOptions = getTabbableOptions();
+		if (isTabbable(container, tabbableOptions)) {
+			return container;
+		}
+
+		return tabbable(container, tabbableOptions)[0] || container;
+	}
+
+	interface FloatingFocusManagerProps {
+		children: Snippet;
+		/**
+		 * The floating context returned from `useFloatingRootContext`.
+		 */
+		context: FloatingRootContext | FloatingContextData;
+		/**
+		 * Whether or not the focus manager should be disabled. Useful to delay focus
+		 * management until after a transition completes or some other conditional
+		 * state.
+		 * @default false
+		 */
+		disabled?: boolean;
+		/**
+		 * The order in which focus cycles.
+		 * @default ['content']
+		 */
+		order?: Array<"reference" | "floating" | "content">;
+		/**
+		 * Which element to initially focus. Can be either a number (tabbable index as
+		 * specified by the `order`) or a ref.
+		 * @default 0
+		 */
+		initialFocus?: number | HTMLElement | null;
+		/**
+		 * Determines if the focus guards are rendered. If not, focus can escape into
+		 * the address bar/console/browser UI, like in native dialogs.
+		 * @default true
+		 */
+		guards?: boolean;
+		/**
+		 * Determines if focus should be returned to the reference element once the
+		 * floating element closes/unmounts (or if that is not available, the
+		 * previously focused element). This prop is ignored if the floating element
+		 * lost focus.
+		 * It can be also set to a ref to explicitly control the element to return focus to.
+		 * @default true
+		 */
+		returnFocus?: boolean | HTMLElement | null;
+		/**
+		 * Determines if focus should be restored to the nearest tabbable element if
+		 * focus inside the floating element is lost (such as due to the removal of
+		 * the currently focused element from the DOM).
+		 * @default false
+		 */
+		restoreFocus?: boolean;
+		/**
+		 * Determines if focus is “modal”, meaning focus is fully trapped inside the
+		 * floating element and outside content cannot be accessed. This includes
+		 * screen reader virtual cursors.
+		 * @default true
+		 */
+		modal?: boolean;
+		/**
+		 * If your focus management is modal and there is no explicit close button
+		 * available, you can use this prop to render a visually-hidden dismiss
+		 * button at the start and end of the floating element. This allows
+		 * touch-based screen readers to escape the floating element due to lack of
+		 * an `esc` key.
+		 * @default undefined
+		 */
+		visuallyHiddenDismiss?: boolean | string;
+		/**
+		 * Determines whether `focusout` event listeners that control whether the
+		 * floating element should be closed if the focus moves outside of it are
+		 * attached to the reference and floating elements. This affects non-modal
+		 * focus management.
+		 * @default true
+		 */
+		closeOnFocusOut?: boolean;
+		/**
+		 * Determines whether outside elements are `inert` when `modal` is enabled.
+		 * This enables pointer modality without a backdrop.
+		 * @default false
+		 */
+		outsideElementsInert?: boolean;
+	}
+
+	type DismissButtonSnippetProps = {
+		ref: Boxed<HTMLElement>;
+	};
+
+	export type { FloatingFocusManagerProps };
+</script>
+
+<script lang="ts">
+	import VisuallyHiddenDismiss from "./visually-hidden-dismiss.svelte";
+	import { box } from "../../internal/box.svelte.js";
+	import { reactiveActiveElement } from "../../internal/active-element.svelte.js";
+	import { handleGuardFocus } from "../../internal/handle-guard-focus.js";
+	import { afterSleep } from "../../internal/after-sleep.js";
+	import type { FloatingContextData } from "../../hooks/use-floating-context.svelte.js";
+
+	let {
+		context,
+		children,
+		disabled = false,
+		order = ["content"],
+		guards: _guards = true,
+		initialFocus = 0,
+		returnFocus = true,
+		restoreFocus = false,
+		modal = true,
+		visuallyHiddenDismiss = false,
+		closeOnFocusOut = true,
+		outsideElementsInert = false,
+	}: FloatingFocusManagerProps = $props();
+
+	const nodeId = $derived(context.data.floatingContext?.nodeId);
+	const ignoreInitialFocus = $derived(
+		typeof initialFocus === "number" && initialFocus < 0
+	);
+
+	// If the reference is a combobox and is typeable (e.g. input/textarea),
+	// there are different focus semantics. The guards should not be rendered, but
+	// aria-hidden should be applied to all nodes still. Further, the visually
+	// hidden dismiss button should only appear at the end of the list, not the
+	// start.
+	const isUntrappedTypeableCombobox = $derived(
+		isTypeableCombobox(context.elements.domReference) && ignoreInitialFocus
+	);
+
+	const inertSupported = supportsInert();
+	const guards = inertSupported ? _guards : true;
+	const useInert = $derived(
+		!guards || (inertSupported && outsideElementsInert)
+	);
+	const tree = useFloatingTree();
+	const portalContext = usePortalContext();
+
+	const startDismissButtonRef = box<HTMLElement>(null!);
+	const endDismissButtonRef = box<HTMLButtonElement>(null!);
+
+	let preventReturnFocus = false;
+	let isPointerDown = false;
+	let tabbableIndex = -1;
+	let prevActiveElement: Element | null = null;
+
+	let beforeGuardRef = $state<HTMLSpanElement | null>(null);
+	let afterGuardRef = $state<HTMLSpanElement | null>(null);
+
+	const isInsidePortal = portalContext != null;
+
+	$effect(() => {
+		if (reactiveActiveElement.current === null) return;
+		prevActiveElement = reactiveActiveElement.current;
+	});
+
+	const floatingFocusElement = $derived(
+		getFloatingFocusElement(context.elements.floating)
+	);
+
+	function getTabbableContent(
+		container: Element | null = floatingFocusElement
+	) {
+		return container ? tabbable(container, getTabbableOptions()) : [];
+	}
+
+	function getTabbableElements(container?: Element) {
+		const content = getTabbableContent(container);
+		const ordered = order
+			.map((type) => {
+				if (context.elements.domReference && type === "reference") {
+					return context.elements.domReference;
+				}
+
+				if (floatingFocusElement && type === "floating") {
+					return floatingFocusElement;
+				}
+
+				return content;
+			})
+			.filter(Boolean)
+			.flat() as Array<FocusableElement>;
+		return ordered;
+	}
+
+	function onKeyDown(event: KeyboardEvent) {
+		if (event.key !== "Tab") return;
+
+		// The focus guards have nothing to focus, so we need to stop the event.
+		if (
+			contains(
+				floatingFocusElement,
+				activeElement(getDocument(floatingFocusElement))
+			) &&
+			getTabbableContent().length === 0 &&
+			!isUntrappedTypeableCombobox
+		) {
+			stopEvent(event);
+		}
+
+		const els = getTabbableElements();
+		const target = getTarget(event);
+
+		if (
+			order[0] === "reference" &&
+			target === context.elements.domReference
+		) {
+			stopEvent(event);
+			if (event.shiftKey) {
+				enqueueFocus(els[els.length - 1]);
+			} else {
+				enqueueFocus(els[1]);
+			}
+		}
+
+		if (
+			order[1] === "floating" &&
+			target === floatingFocusElement &&
+			event.shiftKey
+		) {
+			stopEvent(event);
+			enqueueFocus(els[0]);
+		}
+	}
+
+	$effect(() => {
+		if (disabled || !modal) return;
+		const doc = getDocument(floatingFocusElement);
+		return on(doc, "keydown", onKeyDown);
+	});
+
+	function handleFocusIn(event: FocusEvent) {
+		const target = getTarget(event) as Element | null;
+		const tabbableContent = getTabbableContent() as Array<Element | null>;
+		const index = tabbableContent.indexOf(target);
+		if (index !== -1) {
+			tabbableIndex = index;
+		}
+	}
+
+	$effect(() => {
+		if (disabled || !context.elements.floating) return;
+		return on(context.elements.floating, "focusin", handleFocusIn);
+	});
+	// In Safari, buttons lose focus when pressing them.
+	function handlePointerDown() {
+		isPointerDown = true;
+		setTimeout(() => {
+			isPointerDown = false;
+		});
+	}
+
+	function handleFocusOutside(event: FocusEvent) {
+		const relatedTarget = event.relatedTarget as HTMLElement | null;
+
+		queueMicrotask(() => {
+			const movedToUnrelatedNode = !(
+				contains(context.elements.domReference, relatedTarget) ||
+				contains(context.elements.floating, relatedTarget) ||
+				contains(relatedTarget, context.elements.floating) ||
+				contains(portalContext?.portalNode, relatedTarget) ||
+				relatedTarget?.hasAttribute(createAttribute("focus-guard")) ||
+				(tree &&
+					(getChildren(tree.nodes, nodeId).find(
+						(node) =>
+							contains(
+								node.context?.elements.floating,
+								relatedTarget
+							) ||
+							contains(
+								node.context?.elements.domReference,
+								relatedTarget
+							)
+					) ||
+						getAncestors(tree.nodes, nodeId).find(
+							(node) =>
+								[
+									node.context?.elements.floating,
+									getFloatingFocusElement(
+										node.context?.elements.floating
+									),
+								].includes(relatedTarget) ||
+								node.context?.elements.domReference ===
+									relatedTarget
+						)))
+			);
+
+			// Restore focus to the previous tabbable element index to prevent
+			// focus from being lost outside the floating tree.
+			if (
+				restoreFocus &&
+				movedToUnrelatedNode &&
+				activeElement(getDocument(floatingFocusElement)) ===
+					getDocument(floatingFocusElement).body
+			) {
+				// Let `FloatingPortal` effect knows that focus is still inside the
+				// floating tree.
+				if (isHTMLElement(floatingFocusElement)) {
+					floatingFocusElement.focus();
+				}
+
+				const prevTabbableIndex = tabbableIndex;
+				const tabbableContent =
+					getTabbableContent() as Array<Element | null>;
+				const nodeToFocus =
+					tabbableContent[prevTabbableIndex] ||
+					tabbableContent[tabbableContent.length - 1] ||
+					floatingFocusElement;
+
+				if (isHTMLElement(nodeToFocus)) {
+					nodeToFocus.focus();
+				}
+			}
+
+			// Focus did not move inside the floating tree, and there are no tabbable
+			// portal guards to handle closing.
+			if (
+				(isUntrappedTypeableCombobox ? true : !modal) &&
+				relatedTarget &&
+				movedToUnrelatedNode &&
+				!isPointerDown &&
+				relatedTarget !== getPreviouslyFocusedElement()
+			) {
+				preventReturnFocus = true;
+				context.onOpenChange(false, event, "focus-out");
+			}
+		});
+	}
+
+	$effect(() => {
+		if (disabled || !closeOnFocusOut) return;
+
+		if (
+			context.elements.floating &&
+			isHTMLElement(context.elements.domReference)
+		) {
+			return executeCallbacks(
+				on(
+					context.elements.domReference,
+					"focusout",
+					handleFocusOutside
+				),
+				on(
+					context.elements.domReference,
+					"pointerdown",
+					handlePointerDown
+				),
+				on(context.elements.floating, "focusout", handleFocusOutside)
+			);
+		}
+	});
+
+	$effect.pre(() => {
+		if (!portalContext) return;
+		portalContext.beforeInsideGuard = beforeGuardRef;
+	});
+	$effect.pre(() => {
+		if (!portalContext) return;
+		portalContext.afterInsideGuard = afterGuardRef;
+	});
+
+	$effect(() => {
+		if (disabled || !context.elements.floating) return;
+
+		// Don't hide portals nested within the parent portal.
+		const portalNodes = Array.from(
+			portalContext?.portalNode?.querySelectorAll(
+				`[${createAttribute("portal")}]`
+			) || []
+		);
+
+		const ancestorFloatingNodes =
+			tree && !modal
+				? getAncestors(tree?.nodes, nodeId).map(
+						(node) => node.context?.elements.floating
+					)
+				: [];
+
+		const insideElements = [
+			context.elements.floating,
+			...portalNodes,
+			...ancestorFloatingNodes,
+			startDismissButtonRef.current,
+			endDismissButtonRef.current,
+			beforeGuardRef,
+			afterGuardRef,
+			portalContext?.beforeOutsideGuard,
+			portalContext?.afterOutsideGuard,
+			order.includes("reference") || isUntrappedTypeableCombobox
+				? context.elements.domReference
+				: null,
+		].filter((x): x is Element => x != null);
+
+		const cleanup =
+			modal || isUntrappedTypeableCombobox
+				? markOthers(insideElements, !useInert, useInert)
+				: markOthers(insideElements);
+
+		return () => {
+			cleanup();
+		};
+	});
+
+	$effect.pre(() => {
+		if (disabled || !isHTMLElement(floatingFocusElement)) return;
+
+		const doc = getDocument(floatingFocusElement);
+		const previouslyFocusedElement = activeElement(doc);
+		// Wait for any effect state setters to execute to set `tabindex`.
+		queueMicrotask(() => {
+			const focusableElements = getTabbableElements(floatingFocusElement);
+			const initialFocusValue = initialFocus;
+			const elToFocus =
+				(typeof initialFocusValue === "number"
+					? focusableElements[initialFocusValue]
+					: initialFocusValue) || floatingFocusElement;
+			const focusAlreadyInsideFloatingEl = contains(
+				floatingFocusElement,
+				previouslyFocusedElement
+			);
+
+			if (
+				!ignoreInitialFocus &&
+				!focusAlreadyInsideFloatingEl &&
+				context.open
+			) {
+				enqueueFocus(elToFocus, {
+					preventScroll: elToFocus === floatingFocusElement,
+				});
+			}
+		});
+	});
+
+	$effect.pre(() => {
+		if (disabled || !floatingFocusElement) return;
+
+		let preventReturnFocusScroll = false;
+
+		const doc = getDocument(floatingFocusElement);
+		const previouslyFocusedElement = activeElement(doc);
+		const contextData = context.data;
+		let openEvent = contextData.openEvent;
+
+		addPreviouslyFocusedElement(previouslyFocusedElement);
+
+		// Dismissing via outside press should always ignore `returnFocus` to
+		// prevent unwanted scrolling.
+		function onOpenChange({
+			open,
+			reason,
+			event,
+			nested,
+		}: {
+			open: boolean;
+			reason: OpenChangeReason;
+			event: Event;
+			nested: boolean;
+		}) {
+			if (open) {
+				openEvent = event;
+			}
+
+			if (reason === "escape-key" && context.elements.domReference) {
+				addPreviouslyFocusedElement(context.elements.domReference);
+			}
+
+			if (
+				["hover", "safe-polygon"].includes(reason) &&
+				event.type === "mouseleave"
+			) {
+				preventReturnFocus = true;
+			}
+
+			if (reason !== "outside-press") return;
+
+			if (nested) {
+				preventReturnFocus = false;
+				preventReturnFocusScroll = true;
+			} else {
+				preventReturnFocus = !(
+					isVirtualClick(event as MouseEvent) ||
+					isVirtualPointerEvent(event as PointerEvent)
+				);
+			}
+		}
+
+		context.events.on("openchange", onOpenChange);
+
+		const fallbackEl = doc.createElement("span");
+		fallbackEl.setAttribute("tabindex", "-1");
+		fallbackEl.setAttribute("aria-hidden", "true");
+		fallbackEl.setAttribute("style", HIDDEN_STYLES_STRING);
+
+		if (isInsidePortal && context.elements.domReference) {
+			context.elements.domReference.insertAdjacentElement(
+				"afterend",
+				fallbackEl
+			);
+		}
+
+		function getReturnElement() {
+			if (typeof returnFocus === "boolean") {
+				return getPreviouslyFocusedElement() || fallbackEl;
+			}
+
+			return returnFocus || fallbackEl;
+		}
+
+		return () => {
+			context.events.off("openchange", onOpenChange);
+
+			const isFocusInsideFloatingTree =
+				contains(context.elements.floating, prevActiveElement) ||
+				(tree &&
+					getChildren(tree.nodes, nodeId).some((node) =>
+						contains(
+							node.context?.elements.floating,
+							prevActiveElement
+						)
+					));
+			const shouldFocusReference =
+				isFocusInsideFloatingTree ||
+				(openEvent && ["click", "mousedown"].includes(openEvent.type));
+
+			if (shouldFocusReference && context.elements.domReference) {
+				addPreviouslyFocusedElement(context.elements.domReference);
+			}
+
+			const returnElement = getReturnElement();
+
+			queueMicrotask(() => {
+				// This is `returnElement`, if it's tabbable, or its first tabbable child.
+				const tabbableReturnElement =
+					getFirstTabbableElement(returnElement);
+				if (
+					// eslint-disable-next-line react-hooks/exhaustive-deps
+					returnFocus &&
+					!preventReturnFocus &&
+					isHTMLElement(tabbableReturnElement) &&
+					// If the focus moved somewhere else after mount, avoid returning focus
+					// since it likely entered a different element which should be
+					// respected: https://github.com/floating-ui/floating-ui/issues/2607
+					(tabbableReturnElement !== prevActiveElement &&
+					prevActiveElement !== doc.body
+						? isFocusInsideFloatingTree
+						: true)
+				) {
+					tabbableReturnElement.focus({
+						preventScroll: preventReturnFocusScroll,
+					});
+				}
+
+				fallbackEl.remove();
+			});
+		};
+	});
+
+	watch(
+		() => disabled,
+		() => {
+			disabled;
+			// The `returnFocus` cleanup behavior is inside a microtask; ensure we
+			// wait for it to complete before resetting the flag.
+			queueMicrotask(() => {
+				preventReturnFocus = false;
+			});
+		}
+	);
+
+	$effect.pre(() => {
+		if (disabled || !portalContext) return;
+
+		portalContext.setFocusManagerState({
+			modal,
+			open: context.open,
+			closeOnFocusOut,
+			onOpenChange: context.onOpenChange,
+			domReference: context.elements.domReference,
+		});
+
+		return () => {
+			portalContext.setFocusManagerState(null);
+		};
+	});
+
+	$effect.pre(() => {
+		if (disabled) return;
+		if (!floatingFocusElement) return;
+		if (typeof MutationObserver !== "function") return;
+		if (ignoreInitialFocus) return;
+
+		const handleMutation = () => {
+			const tabIndex = floatingFocusElement.getAttribute("tabindex");
+			const tabbableContent =
+				getTabbableContent() as Array<Element | null>;
+			const activeEl = activeElement(
+				getDocument(context.elements.floating)
+			);
+			const _tabbableIndex = tabbableContent.indexOf(activeEl);
+
+			if (_tabbableIndex !== -1) {
+				tabbableIndex = _tabbableIndex;
+			}
+
+			if (
+				order.includes("floating") ||
+				(activeEl !== context.elements.domReference &&
+					tabbableContent.length === 0)
+			) {
+				if (tabIndex !== "0") {
+					floatingFocusElement.setAttribute("tabindex", "0");
+				}
+			} else if (tabIndex !== "-1") {
+				floatingFocusElement.setAttribute("tabindex", "-1");
+			}
+		};
+
+		handleMutation();
+		const observer = new MutationObserver(handleMutation);
+
+		observer.observe(floatingFocusElement, {
+			childList: true,
+			subtree: true,
+			attributes: true,
+		});
+
+		return () => {
+			observer.disconnect();
+		};
+	});
+
+	const shouldRenderGuards = $derived(
+		!disabled &&
+			guards &&
+			(modal ? !isUntrappedTypeableCombobox : true) &&
+			(isInsidePortal || modal)
+	);
+</script>
+
+{#snippet DismissButton({ ref }: DismissButtonSnippetProps)}
+	{#if !disabled && visuallyHiddenDismiss && modal}
+		<VisuallyHiddenDismiss
+			bind:ref={ref.current}
+			onclick={(event) => context.onOpenChange(false, event)}>
+			{typeof visuallyHiddenDismiss === "string"
+				? visuallyHiddenDismiss
+				: "Dismiss"}
+		</VisuallyHiddenDismiss>
+	{/if}
+{/snippet}
+
+{#if shouldRenderGuards}
+	<FocusGuard
+		type="inside"
+		bind:ref={() => beforeGuardRef, (v) => (beforeGuardRef = v)}
+		onfocus={(event) => {
+			if (modal) {
+				afterSleep(0, () => {
+					const els = getTabbableElements();
+					enqueueFocus(
+						order[0] === "reference" ? els[0] : els[els.length - 1]
+					);
+				});
+			} else if (
+				portalContext?.preserveTabOrder &&
+				portalContext.portalNode
+			) {
+				preventReturnFocus = false;
+				if (isOutsideEvent(event, portalContext.portalNode)) {
+					afterSleep(0, () => {
+						const nextTabbable =
+							getNextTabbable() || context.elements.domReference;
+						nextTabbable?.focus();
+					});
+				} else {
+					handleGuardFocus(portalContext.beforeOutsideGuard);
+				}
+			}
+		}} />
+{/if}
+<!--
+Ensure the first swipe is the list item. The end of the listbox popup
+will have a dismiss button.
+-->
+{#if !isUntrappedTypeableCombobox}
+	{@render DismissButton({ ref: startDismissButtonRef })}
+{/if}
+{@render children?.()}
+{@render DismissButton({ ref: endDismissButtonRef })}
+{#if shouldRenderGuards}
+	<FocusGuard
+		type="inside"
+		bind:ref={() => afterGuardRef, (v) => (afterGuardRef = v)}
+		onfocus={(event) => {
+			if (modal) {
+				afterSleep(0, () => {
+					enqueueFocus(getTabbableElements()[0]);
+				});
+			} else if (
+				portalContext?.preserveTabOrder &&
+				portalContext.portalNode
+			) {
+				if (closeOnFocusOut) {
+					preventReturnFocus = true;
+				}
+
+				if (isOutsideEvent(event, portalContext.portalNode)) {
+					afterSleep(0, () => {
+						const prevTabbable =
+							getPreviousTabbable() ||
+							context.elements.domReference;
+
+						prevTabbable?.focus();
+					});
+				} else {
+					handleGuardFocus(portalContext.afterOutsideGuard);
+				}
+			}
+		}} />
+{/if}
diff --git a/packages/floating-ui-svelte/src/components/floating-focus-manager/visually-hidden-dismiss.svelte b/packages/floating-ui-svelte/src/components/floating-focus-manager/visually-hidden-dismiss.svelte
new file mode 100644
index 00000000..6871941c
--- /dev/null
+++ b/packages/floating-ui-svelte/src/components/floating-focus-manager/visually-hidden-dismiss.svelte
@@ -0,0 +1,28 @@
+<script lang="ts" module>
+	import type { HTMLButtonAttributes } from "svelte/elements";
+	import type { WithRef } from "../../types.js";
+	import { HIDDEN_STYLES_STRING } from "../focus-guard.svelte";
+
+	interface VisuallyHiddenDismissProps
+		extends HTMLButtonAttributes,
+			Required<WithRef<HTMLElement>> {}
+
+	export type { VisuallyHiddenDismissProps };
+</script>
+
+<script lang="ts">
+	let {
+		ref = $bindable(null),
+		children,
+		...rest
+	}: VisuallyHiddenDismissProps = $props();
+</script>
+
+<button
+	{...rest}
+	bind:this={ref}
+	type="button"
+	tabindex={-1}
+	style={HIDDEN_STYLES_STRING}>
+	{@render children?.()}
+</button>
diff --git a/packages/floating-ui-svelte/src/components/floating-list/floating-list.svelte b/packages/floating-ui-svelte/src/components/floating-list/floating-list.svelte
new file mode 100644
index 00000000..c6eaa418
--- /dev/null
+++ b/packages/floating-ui-svelte/src/components/floating-list/floating-list.svelte
@@ -0,0 +1,79 @@
+<script lang="ts" module>
+	import { type Snippet } from "svelte";
+	import { SvelteMap } from "svelte/reactivity";
+	import { FloatingListContext } from "./hooks.svelte.js";
+
+	function sortByDocumentPosition(a: Node, b: Node) {
+		const position = a.compareDocumentPosition(b);
+
+		if (
+			position & Node.DOCUMENT_POSITION_FOLLOWING ||
+			position & Node.DOCUMENT_POSITION_CONTAINED_BY
+		) {
+			return -1;
+		}
+
+		if (
+			position & Node.DOCUMENT_POSITION_PRECEDING ||
+			position & Node.DOCUMENT_POSITION_CONTAINS
+		) {
+			return 1;
+		}
+
+		return 0;
+	}
+
+	interface FloatingListProps {
+		children: Snippet;
+
+		/**
+		 * A reference to the list of HTMLElements, ordered by their index.
+		 * `useListNavigation's` `listRef` prop.
+		 */
+		elements: Array<HTMLElement | null>;
+
+		/**
+		 * A ref to the list of element labels, ordered by their index.
+		 * `useTypeahead`'s `listRef` prop.
+		 */
+		labels?: Array<string | null>;
+	}
+</script>
+
+<script lang="ts">
+	let {
+		children,
+		elements = $bindable(),
+		labels,
+	}: FloatingListProps = $props();
+
+	let map = new SvelteMap<Node, number | null>();
+
+	function register(node: Node) {
+		map.set(node, null);
+		const nodes = Array.from(map.keys()).sort(sortByDocumentPosition);
+		nodes.forEach((node, index) => {
+			map.set(node, index);
+		});
+	}
+
+	function unregister(node: Node) {
+		map.delete(node);
+		const nodes = Array.from(map.keys()).sort(sortByDocumentPosition);
+		nodes.forEach((node, index) => {
+			map.set(node, index);
+		});
+	}
+
+	FloatingListContext.set({
+		elements,
+		get labels() {
+			return labels;
+		},
+		map,
+		register,
+		unregister,
+	});
+</script>
+
+{@render children()}
diff --git a/packages/floating-ui-svelte/src/components/floating-list/hooks.svelte.ts b/packages/floating-ui-svelte/src/components/floating-list/hooks.svelte.ts
new file mode 100644
index 00000000..794144e0
--- /dev/null
+++ b/packages/floating-ui-svelte/src/components/floating-list/hooks.svelte.ts
@@ -0,0 +1,91 @@
+import { extract } from "../../internal/extract.js";
+import type { MaybeGetter } from "../../types.js";
+import { Context } from "../../internal/context.js";
+import { watch } from "../../internal/watch.svelte.js";
+import { SvelteMap } from "svelte/reactivity";
+
+type FloatingListContextType = {
+	register: (node: Node) => void;
+	unregister: (node: Node) => void;
+	map: SvelteMap<Node, number | null>;
+	elements: Array<HTMLElement | null>;
+	labels?: Array<string | null>;
+};
+
+const FloatingListContext = new Context<FloatingListContextType>(
+	"FloatingListContext",
+);
+
+interface UseListItemOptions {
+	label?: MaybeGetter<string | null>;
+}
+
+/**
+ * Used to register a list item and its index (DOM position) in the
+ * `FloatingList`.
+ */
+function useListItem(opts: UseListItemOptions = {}) {
+	const label = $derived(extract(opts.label));
+	const listContext = FloatingListContext.getOr({
+		elements: [],
+		map: new SvelteMap(),
+		register: () => {},
+		unregister: () => {},
+	} as FloatingListContextType);
+	let index = $state<number | null>(null);
+	let ref = $state<Node | null>(null);
+
+	watch(
+		() => ref,
+		() => {
+			const node = ref;
+			return () => {
+				if (node) {
+					listContext.unregister(node);
+				}
+			};
+		},
+	);
+
+	$effect(() => {
+		const localIndex = ref ? listContext.map.get(ref) : null;
+		if (localIndex != null) {
+			index = localIndex;
+		}
+	});
+
+	return {
+		get index() {
+			return index == null ? -1 : index;
+		},
+		get ref() {
+			return ref as HTMLElement | null;
+		},
+		set ref(node: HTMLElement | null) {
+			ref = node;
+			if (node) {
+				listContext.register(node);
+			}
+			const idx = node ? listContext.map.get(node) : null;
+			if (idx === undefined) return;
+			if (idx != null) {
+				index = idx;
+			}
+			if (idx === null) return;
+
+			listContext.elements[idx] = node;
+			if (listContext.labels) {
+				if (label !== undefined) {
+					listContext.labels[idx] = label;
+				} else {
+					listContext.labels[idx] = node?.textContent ?? null;
+				}
+			}
+		},
+	};
+}
+
+// function useListItem(opts: UseListItemOptions = {})
+
+export { FloatingListContext, useListItem };
+export type { UseListItemOptions };
diff --git a/packages/floating-ui-svelte/src/components/floating-overlay.svelte b/packages/floating-ui-svelte/src/components/floating-overlay.svelte
new file mode 100644
index 00000000..0c6a808d
--- /dev/null
+++ b/packages/floating-ui-svelte/src/components/floating-overlay.svelte
@@ -0,0 +1,123 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from "svelte/elements";
+	import { getPlatform } from "../internal/environment.js";
+	import type { WithRef } from "../types.js";
+
+	// So we can use the same object even if multiple libs with different versions
+	// that use floating UI are loaded :)
+	globalThis.fuiLockCount ??= { current: 0 };
+	globalThis.fuiLockCleanup ??= { current: () => {} };
+
+	interface FloatingOverlayProps
+		extends WithRef,
+			HTMLAttributes<HTMLDivElement> {
+		/**
+		 * Whether the overlay should lock scrolling on the document body.
+		 * @default false
+		 */
+		lockScroll?: boolean;
+	}
+
+	function enableScrollLock() {
+		const isIOS = /iP(hone|ad|od)|iOS/.test(getPlatform());
+		const bodyStyle = document.body.style;
+		// RTL <body> scrollbar
+		const scrollbarX =
+			Math.round(document.documentElement.getBoundingClientRect().left) +
+			document.documentElement.scrollLeft;
+		const paddingProp = scrollbarX ? "paddingLeft" : "paddingRight";
+		const scrollbarWidth =
+			window.innerWidth - document.documentElement.clientWidth;
+		const scrollX = bodyStyle.left
+			? Number.parseFloat(bodyStyle.left)
+			: window.scrollX;
+		const scrollY = bodyStyle.top
+			? Number.parseFloat(bodyStyle.top)
+			: window.scrollY;
+
+		bodyStyle.overflow = "hidden";
+
+		if (scrollbarWidth) {
+			bodyStyle[paddingProp] = `${scrollbarWidth}px`;
+		}
+
+		// Only iOS doesn't respect `overflow: hidden` on document.body, and this
+		// technique has fewer side effects.
+		if (isIOS) {
+			// iOS 12 does not support `visualViewport`.
+			const offsetLeft = window.visualViewport?.offsetLeft || 0;
+			const offsetTop = window.visualViewport?.offsetTop || 0;
+
+			Object.assign(bodyStyle, {
+				position: "fixed",
+				top: `${-(scrollY - Math.floor(offsetTop))}px`,
+				left: `${-(scrollX - Math.floor(offsetLeft))}px`,
+				right: "0",
+			});
+		}
+
+		return () => {
+			Object.assign(bodyStyle, {
+				overflow: "",
+				[paddingProp]: "",
+			});
+
+			if (isIOS) {
+				Object.assign(bodyStyle, {
+					position: "",
+					top: "",
+					left: "",
+					right: "",
+				});
+				window.scrollTo(scrollX, scrollY);
+			}
+		};
+	}
+
+	export type { FloatingOverlayProps };
+</script>
+
+<script lang="ts">
+	import { mergeStyles } from "../internal/style-object-to-string.js";
+
+	let {
+		ref = $bindable(null),
+		lockScroll = false,
+		children,
+		style,
+		...rest
+	}: FloatingOverlayProps = $props();
+
+	$effect(() => {
+		if (!lockScroll) return;
+
+		globalThis.fuiLockCount.current++;
+		if (globalThis.fuiLockCount.current === 1) {
+			globalThis.fuiLockCleanup.current = enableScrollLock();
+		}
+
+		return () => {
+			globalThis.fuiLockCount.current--;
+			if (globalThis.fuiLockCount.current === 0) {
+				globalThis.fuiLockCleanup.current();
+			}
+		};
+	});
+</script>
+
+<div
+	bind:this={ref}
+	{...rest}
+	style={mergeStyles(
+		{
+			position: "fixed",
+			overflow: "auto",
+			top: 0,
+			right: 0,
+			bottom: 0,
+			left: 0,
+		},
+		style
+	)}>
+	{@render children?.()}
+</div>
diff --git a/packages/floating-ui-svelte/src/components/floating-portal/floating-portal.svelte b/packages/floating-ui-svelte/src/components/floating-portal/floating-portal.svelte
new file mode 100644
index 00000000..06a26862
--- /dev/null
+++ b/packages/floating-ui-svelte/src/components/floating-portal/floating-portal.svelte
@@ -0,0 +1,214 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import {
+		type FocusManagerState,
+		PortalContext,
+		useFloatingPortalNode,
+	} from "./hooks.svelte.js";
+	import {
+		disableFocusInside,
+		enableFocusInside,
+		getNextTabbable,
+		getPreviousTabbable,
+		isOutsideEvent,
+	} from "../../internal/tabbable.js";
+	import { executeCallbacks } from "../../internal/execute-callbacks.js";
+	import { on } from "svelte/events";
+	import FocusGuard, { HIDDEN_STYLES_STRING } from "../focus-guard.svelte";
+
+	interface FloatingPortalProps {
+		children?: Snippet;
+		/**
+		 * Optionally selects the node with the id if it exists, or create it and
+		 * append it to the specified `root` (by default `document.body`).
+		 */
+		id?: string;
+		/**
+		 * Specifies the root node the portal container will be appended to.
+		 */
+		root?: HTMLElement | null;
+		/**
+		 * When using non-modal focus management using `FloatingFocusManager`, this
+		 * will preserve the tab order context based on the React tree instead of the
+		 * DOM tree.
+		 */
+		preserveTabOrder?: boolean;
+	}
+
+	export type { FloatingPortalProps };
+</script>
+
+<script lang="ts">
+	import Portal from "./portal.svelte";
+	import { handleGuardFocus } from "../../internal/handle-guard-focus.js";
+	import { FLOATING_ID_ATTRIBUTE } from "../../internal/attributes.js";
+	import { afterSleep } from "../../internal/after-sleep.js";
+
+	let {
+		children,
+		id,
+		root,
+		preserveTabOrder = true,
+	}: FloatingPortalProps = $props();
+
+	let focusManagerState = $state.raw<FocusManagerState>(null);
+	let beforeOutsideGuard = $state<HTMLSpanElement | null>(null);
+	let afterOutsideGuard = $state<HTMLSpanElement | null>(null);
+	let beforeInsideGuard = $state<HTMLSpanElement | null>(null);
+	let afterInsideGuard = $state<HTMLSpanElement | null>(null);
+	let portalOriginMarker = $state<HTMLSpanElement | null>(null);
+	let originFloatingId = $state<string | null>(null);
+
+	const portalNode = useFloatingPortalNode({
+		id: () => id,
+		root: () => root,
+		originFloatingId: () => originFloatingId,
+	});
+
+	$effect(() => {
+		if (!portalOriginMarker) {
+			originFloatingId = null;
+			return;
+		}
+		const closestFloatingNode = portalOriginMarker.closest(
+			`[${FLOATING_ID_ATTRIBUTE}]`
+		);
+		if (closestFloatingNode) {
+			originFloatingId = closestFloatingNode.getAttribute(
+				FLOATING_ID_ATTRIBUTE
+			);
+		} else {
+			originFloatingId = null;
+		}
+	});
+
+	const modal = $derived(focusManagerState?.modal);
+	const open = $derived(focusManagerState?.open);
+	const shouldRenderGuards = $derived(
+		// The FocusManager and therefore floating element are currently open/
+		// rendered.
+		!!focusManagerState &&
+			// Guards are only for non-modal focus management.
+			!focusManagerState.modal &&
+			// Don't render if unmount is transitioning.
+			focusManagerState.open &&
+			preserveTabOrder &&
+			!!(root || portalNode.current)
+	);
+
+	// Make sure elements inside the portal element are tabbable only when the
+	// portal has already been focused, either by tabbing into a focus trap
+	// element outside or using the mouse.
+	function onFocus(event: FocusEvent) {
+		if (portalNode.current && isOutsideEvent(event)) {
+			const focusing = event.type === "focusin";
+			const manageFocus = focusing
+				? enableFocusInside
+				: disableFocusInside;
+
+			manageFocus(portalNode.current);
+		}
+	}
+
+	$effect.pre(() => {
+		if (!portalNode.current || !preserveTabOrder || modal) return;
+		return executeCallbacks(
+			on(portalNode.current, "focusin", onFocus, { capture: true }),
+			on(portalNode.current, "focusout", onFocus, { capture: true })
+		);
+	});
+
+	$effect.pre(() => {
+		if (!portalNode.current || open) return;
+		enableFocusInside(portalNode.current);
+	});
+
+	PortalContext.set({
+		get preserveTabOrder() {
+			return preserveTabOrder;
+		},
+		get beforeInsideGuard() {
+			return beforeInsideGuard;
+		},
+		set beforeInsideGuard(value: HTMLSpanElement | null) {
+			beforeInsideGuard = value;
+		},
+		get beforeOutsideGuard() {
+			return beforeOutsideGuard;
+		},
+		get afterInsideGuard() {
+			return afterInsideGuard;
+		},
+		set afterInsideGuard(value: HTMLSpanElement | null) {
+			afterInsideGuard = value;
+		},
+		get afterOutsideGuard() {
+			return afterOutsideGuard;
+		},
+		get portalNode() {
+			return portalNode.current;
+		},
+		setFocusManagerState: (state) => {
+			focusManagerState = state;
+		},
+	});
+</script>
+
+<span
+	data-floating-ui-portal-origin
+	bind:this={portalOriginMarker}
+	style="display: none !important;"></span>
+
+{#if shouldRenderGuards && portalNode.current}
+	<FocusGuard
+		type="outside"
+		data-name="before"
+		bind:ref={() => beforeOutsideGuard, (v) => (beforeOutsideGuard = v)}
+		onfocus={(event) => {
+			if (isOutsideEvent(event, portalNode.current)) {
+				handleGuardFocus(beforeInsideGuard);
+			} else {
+				afterSleep(0, () => {
+					const prevTabbable =
+						getPreviousTabbable() ||
+						focusManagerState?.domReference;
+					prevTabbable?.focus();
+				});
+			}
+		}} />
+{/if}
+
+{#if shouldRenderGuards && portalNode.current}
+	<span aria-owns={portalNode.current.id} style={HIDDEN_STYLES_STRING}></span>
+{/if}
+
+{#if portalNode.current}
+	<Portal to={portalNode.current} {children} />
+{/if}
+
+{#if shouldRenderGuards && portalNode.current}
+	<FocusGuard
+		type="outside"
+		data-name="after"
+		bind:ref={() => afterOutsideGuard, (v) => (afterOutsideGuard = v)}
+		onfocus={(event) => {
+			if (isOutsideEvent(event, portalNode.current)) {
+				handleGuardFocus(afterInsideGuard);
+			} else {
+				afterSleep(0, () => {
+					const nextTabbable =
+						getNextTabbable() || focusManagerState?.domReference;
+
+					nextTabbable?.focus();
+
+					if (focusManagerState?.closeOnFocusOut) {
+						focusManagerState?.onOpenChange(
+							false,
+							event,
+							"focus-out"
+						);
+					}
+				});
+			}
+		}} />
+{/if}
diff --git a/packages/floating-ui-svelte/src/components/floating-portal/hooks.svelte.ts b/packages/floating-ui-svelte/src/components/floating-portal/hooks.svelte.ts
new file mode 100644
index 00000000..03c10280
--- /dev/null
+++ b/packages/floating-ui-svelte/src/components/floating-portal/hooks.svelte.ts
@@ -0,0 +1,121 @@
+import { useId } from "../../hooks/use-id.js";
+import { ORIGIN_ID_ATTRIBUTE } from "../../internal/attributes.js";
+import { Context } from "../../internal/context.js";
+import { createAttribute } from "../../internal/dom.js";
+import { extract } from "../../internal/extract.js";
+import { watch } from "../../internal/watch.svelte.js";
+import type { MaybeGetter, OnOpenChange } from "../../types.js";
+
+type FocusManagerState = {
+	modal: boolean;
+	open: boolean;
+	onOpenChange: OnOpenChange;
+	domReference: Element | null;
+	closeOnFocusOut: boolean;
+} | null;
+
+const PortalContext = new Context<{
+	preserveTabOrder: boolean;
+	portalNode: HTMLElement | null;
+	setFocusManagerState: (state: FocusManagerState) => void;
+	beforeInsideGuard: HTMLSpanElement | null;
+	afterInsideGuard: HTMLSpanElement | null;
+	beforeOutsideGuard: HTMLSpanElement | null;
+	afterOutsideGuard: HTMLSpanElement | null;
+} | null>("PortalContext");
+
+const attr = createAttribute("portal");
+
+function usePortalContext() {
+	return PortalContext.getOr(null);
+}
+
+interface UseFloatingPortalNodeProps {
+	id?: MaybeGetter<string | undefined>;
+	root?: MaybeGetter<HTMLElement | null | undefined>;
+	originFloatingId?: MaybeGetter<string | null | undefined>;
+}
+
+function useFloatingPortalNode(props: UseFloatingPortalNodeProps = {}) {
+	const id = $derived(extract(props.id));
+	const root = $derived(extract(props.root));
+	const originFloatingId = $derived(extract(props.originFloatingId));
+
+	const uniqueId = useId();
+	const portalContext = usePortalContext();
+
+	let portalNode = $state<HTMLElement | null>(null);
+
+	watch(
+		() => originFloatingId,
+		() => {
+			if (originFloatingId && portalNode) {
+				portalNode.setAttribute(ORIGIN_ID_ATTRIBUTE, originFloatingId);
+			}
+		},
+	);
+
+	$effect.pre(() => {
+		return () => {
+			portalNode?.remove();
+			// Allow the subsequent layout effects to create a new node on updates.
+			// The portal node will still be cleaned up on unmount.
+			// https://github.com/floating-ui/floating-ui/issues/2454
+			queueMicrotask(() => {
+				portalNode = null;
+			});
+		};
+	});
+
+	watch.pre(
+		() => id,
+		(id) => {
+			if (portalNode) return;
+			const existingIdRoot = id ? document.getElementById(id) : null;
+			if (!existingIdRoot) return;
+
+			const subRoot = document.createElement("div");
+			subRoot.id = uniqueId;
+			subRoot.setAttribute(attr, "");
+			existingIdRoot.appendChild(subRoot);
+			portalNode = subRoot;
+		},
+	);
+
+	watch.pre(
+		[() => id, () => root, () => portalContext?.portalNode],
+		([id, root, portalContextNode]) => {
+			// Wait for the root to exist before creating the portal node.
+			if (root === null) return;
+			if (portalNode) return;
+
+			let container = root || portalContextNode;
+			container = container || document.body;
+
+			let idWrapper: HTMLDivElement | null = null;
+			if (id) {
+				idWrapper = document.createElement("div");
+				idWrapper.id = id;
+				container.appendChild(idWrapper);
+			}
+
+			const subRoot = document.createElement("div");
+
+			subRoot.id = uniqueId;
+			subRoot.setAttribute(attr, "");
+
+			container = idWrapper || container;
+			container.appendChild(subRoot);
+			portalNode = subRoot;
+		},
+	);
+
+	return {
+		get current() {
+			return portalNode;
+		},
+	};
+}
+
+export { usePortalContext, useFloatingPortalNode, PortalContext };
+export type { UseFloatingPortalNodeProps, FocusManagerState };
diff --git a/packages/floating-ui-svelte/src/components/floating-portal/portal-consumer.svelte b/packages/floating-ui-svelte/src/components/floating-portal/portal-consumer.svelte
new file mode 100644
index 00000000..da153b75
--- /dev/null
+++ b/packages/floating-ui-svelte/src/components/floating-portal/portal-consumer.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	const { children }: { children?: Snippet } = $props();
+</script>
+
+{#key children}
+	{@render children?.()}
+{/key}
diff --git a/packages/floating-ui-svelte/src/components/floating-portal/portal.svelte b/packages/floating-ui-svelte/src/components/floating-portal/portal.svelte
new file mode 100644
index 00000000..0b0b3fea
--- /dev/null
+++ b/packages/floating-ui-svelte/src/components/floating-portal/portal.svelte
@@ -0,0 +1,94 @@
+<script lang="ts" module>
+	import { getAllContexts, mount, unmount, type Snippet } from "svelte";
+	interface PortalProps {
+		/**
+		 * Where to portal the content to.
+		 *
+		 * @defaultValue document.body
+		 */
+		to?: HTMLElement | string | DocumentFragment;
+
+		/**
+		 * Disable portalling and render the component inline
+		 *
+		 * @defaultValue false
+		 */
+		disabled?: boolean;
+
+		/**
+		 * The children content to render within the portal.
+		 */
+		children?: Snippet;
+	}
+
+	export type { PortalProps };
+</script>
+
+<script lang="ts">
+	import { DEV, BROWSER } from "esm-env";
+	import PortalConsumer from "./portal-consumer.svelte";
+	import { watch } from "../../internal/watch.svelte.js";
+
+	let { to = "body", children, disabled }: PortalProps = $props();
+
+	const context = getAllContexts();
+
+	const target = $derived(getTarget());
+
+	function getTarget() {
+		if (!BROWSER || disabled) return null;
+		let localTarget: HTMLElement | null | DocumentFragment | Element = null;
+		if (typeof to === "string") {
+			localTarget = document.querySelector(to);
+			if (localTarget === null) {
+				if (DEV) {
+					throw new Error(`Target element "${to}" not found.`);
+				}
+			}
+		} else if (
+			to instanceof HTMLElement ||
+			to instanceof DocumentFragment
+		) {
+			localTarget = to;
+		} else {
+			if (DEV) {
+				throw new TypeError(
+					`Unknown portal target type: ${
+						to === null ? "null" : typeof to
+					}. Allowed types: string (query selector), HTMLElement, or DocumentFragment.`
+				);
+			}
+		}
+
+		return localTarget;
+	}
+
+	let instance: any;
+
+	function unmountInstance() {
+		if (instance) {
+			unmount(instance);
+			instance = null;
+		}
+	}
+
+	watch([() => target, () => disabled], ([target, disabled]) => {
+		if (!target || disabled) {
+			unmountInstance();
+			return;
+		}
+		instance = mount(PortalConsumer, {
+			target: target as any,
+			props: { children },
+			context,
+		});
+
+		return () => {
+			unmountInstance();
+		};
+	});
+</script>
+
+{#if disabled}
+	{@render children?.()}
+{/if}
diff --git a/packages/floating-ui-svelte/src/components/floating-tree/floating-node.svelte b/packages/floating-ui-svelte/src/components/floating-tree/floating-node.svelte
new file mode 100644
index 00000000..280bf521
--- /dev/null
+++ b/packages/floating-ui-svelte/src/components/floating-tree/floating-node.svelte
@@ -0,0 +1,30 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import {
+		FloatingNodeContext,
+		useFloatingParentNodeId,
+	} from "./hooks.svelte.js";
+
+	interface FloatingNodeProps {
+		children?: Snippet;
+		id: string | undefined;
+	}
+	export type { FloatingNodeProps };
+</script>
+
+<script lang="ts">
+	let { children, id } = $props();
+
+	const parentId = useFloatingParentNodeId();
+
+	FloatingNodeContext.set({
+		get id() {
+			return id;
+		},
+		get parentId() {
+			return parentId;
+		},
+	});
+</script>
+
+{@render children?.()}
diff --git a/packages/floating-ui-svelte/src/components/floating-tree/floating-tree.svelte b/packages/floating-ui-svelte/src/components/floating-tree/floating-tree.svelte
new file mode 100644
index 00000000..940a8344
--- /dev/null
+++ b/packages/floating-ui-svelte/src/components/floating-tree/floating-tree.svelte
@@ -0,0 +1,36 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { FloatingNodeType } from "../../types.js";
+	import { createPubSub } from "../../internal/create-pub-sub.js";
+	import { FloatingTreeContext } from "./hooks.svelte.js";
+
+	interface FloatingTreeProps {
+		children?: Snippet;
+	}
+	export type { FloatingTreeProps };
+</script>
+
+<script lang="ts">
+	let { children } = $props();
+
+	let nodes: FloatingNodeType[] = $state.raw([]);
+
+	FloatingTreeContext.set({
+		addNode: (node: FloatingNodeType) => {
+			nodes = [...nodes, node];
+
+			return () => {
+				nodes = nodes.filter((n) => n !== node);
+			};
+		},
+		removeNode: (node: FloatingNodeType) => {
+			nodes = nodes.filter((n) => n !== node);
+		},
+		events: createPubSub(),
+		get nodes() {
+			return nodes;
+		},
+	});
+</script>
+
+{@render children?.()}
diff --git a/packages/floating-ui-svelte/src/components/floating-tree/hooks.svelte.ts b/packages/floating-ui-svelte/src/components/floating-tree/hooks.svelte.ts
new file mode 100644
index 00000000..4084a73d
--- /dev/null
+++ b/packages/floating-ui-svelte/src/components/floating-tree/hooks.svelte.ts
@@ -0,0 +1,64 @@
+import { useId } from "../../hooks/use-id.js";
+import { Context } from "../../internal/context.js";
+import type {
+	FloatingNodeType,
+	FloatingTreeType,
+	ReferenceType,
+} from "../../types.js";
+import { untrack } from "svelte";
+
+const FloatingNodeContext = new Context<FloatingNodeType>(
+	"FloatingNodeContext",
+);
+
+const FloatingTreeContext = new Context<FloatingTreeType>(
+	"FloatingTreeContext",
+);
+
+/**
+ * Returns the parent node id for nested floating elements, if available.
+ * Returns `null` for top-level floating elements.
+ */
+function useFloatingParentNodeId(): string | null {
+	return FloatingNodeContext.getOr(null)?.id || null;
+}
+
+/**
+ * Returns the nearest floating tree context, if available.
+ */
+function useFloatingTree<
+	RT extends ReferenceType = ReferenceType,
+>(): FloatingTreeType<RT> | null {
+	return FloatingTreeContext.getOr(null) as FloatingTreeType<RT> | null;
+}
+
+/**
+ * Registers a node into the `FloatingTree`, returning its id.
+ * @see https://floating-ui-svelte.vercel.app/docs/api/use-floating-node-id
+ */
+function useFloatingNodeId(customParentId?: string): string | undefined {
+	const id = useId();
+	const tree = useFloatingTree();
+	const _parentId = useFloatingParentNodeId();
+	const parentId = customParentId || _parentId;
+
+	$effect.pre(() => {
+		return untrack(() => {
+			const node = { id, parentId };
+			tree?.addNode(node);
+			return () => {
+				tree?.removeNode(node);
+			};
+		});
+	});
+
+	return id;
+}
+
+export {
+	useFloatingNodeId,
+	useFloatingParentNodeId,
+	useFloatingTree,
+	FloatingNodeContext,
+	FloatingTreeContext,
+};
diff --git a/packages/floating-ui-svelte/src/components/focus-guard.svelte b/packages/floating-ui-svelte/src/components/focus-guard.svelte
new file mode 100644
index 00000000..90f0bf47
--- /dev/null
+++ b/packages/floating-ui-svelte/src/components/focus-guard.svelte
@@ -0,0 +1,79 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { PropertiesHyphen } from "csstype";
+	import { styleObjectToString } from "../internal/style-object-to-string.js";
+	import { isSafari } from "../internal/environment.js";
+	import { on } from "svelte/events";
+	import { createAttribute } from "../internal/dom.js";
+
+	export const HIDDEN_STYLES: PropertiesHyphen = {
+		border: 0,
+		clip: "rect(0 0 0 0)",
+		height: "1px",
+		margin: "-1px",
+		overflow: "hidden",
+		padding: 0,
+		position: "fixed",
+		"white-space": "nowrap",
+		width: "1px",
+		top: 0,
+		left: 0,
+	};
+
+	export const HIDDEN_STYLES_STRING = styleObjectToString(HIDDEN_STYLES);
+
+	let activeElement: HTMLElement | undefined;
+	let timeoutId: number | undefined;
+
+	function setActiveElementOnTab(event: KeyboardEvent) {
+		if (event.key === "Tab") {
+			activeElement = event.target as typeof activeElement;
+			clearTimeout(timeoutId);
+		}
+	}
+
+	interface FocusGuardProps extends HTMLAttributes<HTMLSpanElement> {
+		ref: HTMLElement | null;
+		type: "inside" | "outside";
+	}
+
+	export type { FocusGuardProps };
+</script>
+
+<script lang="ts">
+	let {
+		ref = $bindable(null),
+		children,
+		type,
+		...rest
+	}: FocusGuardProps = $props();
+
+	let role = $state<"button">();
+
+	$effect.pre(() => {
+		if (isSafari()) {
+			// Unlike other screen readers such as NVDA and JAWS, the virtual cursor
+			// on VoiceOver does trigger the onFocus event, so we can use the focus
+			// trap element. On Safari, only buttons trigger the onFocus event.
+			// NB: "group" role in the Sandbox no longer appears to work, must be a
+			// button role.
+			role = "button";
+		}
+
+		return on(document, "keydown", setActiveElementOnTab);
+	});
+
+	const mergedProps: HTMLAttributes<HTMLSpanElement> = $derived({
+		...rest,
+		tabindex: 0,
+		role,
+		"aria-hidden": role ? undefined : "true",
+		[createAttribute("focus-guard")]: "",
+		style: HIDDEN_STYLES_STRING,
+		"data-type": type,
+	});
+</script>
+
+<span {...mergedProps} bind:this={ref}>
+	{@render children?.()}
+</span>
diff --git a/packages/floating-ui-svelte/src/hooks/use-click.svelte.ts b/packages/floating-ui-svelte/src/hooks/use-click.svelte.ts
index a2418f60..e3369426 100644
--- a/packages/floating-ui-svelte/src/hooks/use-click.svelte.ts
+++ b/packages/floating-ui-svelte/src/hooks/use-click.svelte.ts
@@ -1,8 +1,10 @@
 import { isHTMLElement } from "@floating-ui/utils/dom";
-import { isMouseLikePointerType } from "../internal/dom.js";
-import { isTypeableElement } from "../internal/is-typable-element.js";
-import type { FloatingContext } from "./use-floating.svelte.js";
+import { isMouseLikePointerType, isPointerType } from "../internal/dom.js";
+import { isTypeableElement } from "../internal/is-typeable-element.js";
+import type { MaybeGetter, ReferenceType } from "../types.js";
+import { extract } from "../internal/extract.js";
 import type { ElementProps } from "./use-interactions.svelte.js";
+import type { FloatingContextData } from "./use-floating-context.svelte.js";
 
 interface UseClickOptions {
 	/**
@@ -10,20 +12,20 @@ interface UseClickOptions {
 	 * handlers.
 	 * @default true
 	 */
-	enabled?: boolean;
+	enabled?: MaybeGetter<boolean>;
 
 	/**
 	 * The type of event to use to determine a “click” with mouse input.
 	 * Keyboard clicks work as normal.
 	 * @default 'click'
 	 */
-	event?: "click" | "mousedown";
+	event?: MaybeGetter<"click" | "mousedown">;
 
 	/**
 	 * Whether to toggle the open state with repeated clicks.
 	 * @default true
 	 */
-	toggle?: boolean;
+	toggle?: MaybeGetter<boolean>;
 
 	/**
 	 * Whether to ignore the logic for mouse input (for example, if `useHover()`
@@ -33,7 +35,7 @@ interface UseClickOptions {
 	 * even once the cursor leaves. This may be not be desirable in some cases.
 	 * @default false
 	 */
-	ignoreMouse?: boolean;
+	ignoreMouse?: MaybeGetter<boolean>;
 
 	/**
 	 * Whether to add keyboard handlers (Enter and Space key functionality) for
@@ -41,139 +43,146 @@ interface UseClickOptions {
 	 * “click”).
 	 * @default true
 	 */
-	keyboardHandlers?: boolean;
+	keyboardHandlers?: MaybeGetter<boolean>;
+
+	/**
+	 * If already open from another event such as the `useHover()` Hook,
+	 * determines whether to keep the floating element open when clicking the
+	 * reference element for the first time.
+	 * @default true
+	 */
+	stickIfOpen?: MaybeGetter<boolean>;
 }
 
 function isButtonTarget(event: KeyboardEvent) {
 	return isHTMLElement(event.target) && event.target.tagName === "BUTTON";
 }
 
-function isSpaceIgnored(element: Element | null) {
+function isSpaceIgnored(element: ReferenceType | null) {
 	return isTypeableElement(element);
 }
 
+const pointerTypes = ["mouse", "pen", "touch"] as const;
+
+type PointerType = (typeof pointerTypes)[number];
+
 function useClick(
-	context: FloatingContext,
-	options: UseClickOptions = {},
+	context: FloatingContextData,
+	opts: UseClickOptions = {},
 ): ElementProps {
-	const {
-		open,
-		onOpenChange,
-		data,
-		elements: { reference },
-	} = $derived(context);
-
-	const {
-		enabled = true,
-		event: eventOption = "click",
-		toggle = true,
-		ignoreMouse = false,
-		keyboardHandlers = true,
-	} = $derived(options);
-
-	let pointerType: PointerEvent["pointerType"] | undefined = undefined;
+	const enabled = $derived(extract(opts.enabled, true));
+	const eventOption = $derived(extract(opts.event, "click"));
+	const toggle = $derived(extract(opts.toggle, true));
+	const ignoreMouse = $derived(extract(opts.ignoreMouse, false));
+	const stickIfOpen = $derived(extract(opts.stickIfOpen, true));
+	const keyboardHandlers = $derived(extract(opts.keyboardHandlers, true));
+	let pointerType: PointerType | undefined = undefined;
 	let didKeyDown = false;
 
+	function onpointerdown(event: PointerEvent) {
+		if (!isPointerType(event.pointerType)) return;
+		pointerType = event.pointerType;
+	}
+
+	function onmousedown(event: MouseEvent) {
+		// Ignore all buttons except for the "main" button.
+		// https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
+		if (event.button !== 0) return;
+		if (eventOption === "click") return;
+		if (isMouseLikePointerType(pointerType, true) && ignoreMouse) {
+			return;
+		}
+
+		if (
+			context.open &&
+			toggle &&
+			(context.data.openEvent && stickIfOpen
+				? context.data.openEvent.type === "mousedown"
+				: true)
+		) {
+			context.onOpenChange(false, event, "click");
+		} else {
+			// Prevent stealing focus from the floating element
+			event.preventDefault();
+			context.onOpenChange(true, event, "click");
+		}
+	}
+
+	function onclick(event: MouseEvent) {
+		if (eventOption === "mousedown" && pointerType) {
+			pointerType = undefined;
+			return;
+		}
+
+		if (isMouseLikePointerType(pointerType, true) && ignoreMouse) return;
+
+		if (
+			context.open &&
+			toggle &&
+			(context.data.openEvent && stickIfOpen
+				? context.data.openEvent.type === "click"
+				: true)
+		) {
+			context.onOpenChange(false, event, "click");
+		} else {
+			context.onOpenChange(true, event, "click");
+		}
+	}
+
+	function onkeydown(event: KeyboardEvent) {
+		pointerType = undefined;
+
+		if (event.defaultPrevented || !keyboardHandlers || isButtonTarget(event)) {
+			return;
+		}
+
+		if (event.key === " " && !isSpaceIgnored(context.elements.domReference)) {
+			// Prevent scrolling
+			event.preventDefault();
+			didKeyDown = true;
+		}
+
+		if (event.key === "Enter") {
+			if (context.open && toggle) {
+				context.onOpenChange(false, event, "click");
+			} else {
+				context.onOpenChange(true, event, "click");
+			}
+		}
+	}
+
+	function onkeyup(event: KeyboardEvent) {
+		if (
+			event.defaultPrevented ||
+			!keyboardHandlers ||
+			isButtonTarget(event) ||
+			isSpaceIgnored(context.elements.domReference)
+		) {
+			return;
+		}
+
+		if (event.key === " " && didKeyDown) {
+			didKeyDown = false;
+			if (context.open && toggle) {
+				context.onOpenChange(false, event, "click");
+			} else {
+				context.onOpenChange(true, event, "click");
+			}
+		}
+	}
+
+	const reference = $derived({
+		onpointerdown: onpointerdown,
+		onmousedown: onmousedown,
+		onclick: onclick,
+		onkeydown: onkeydown,
+		onkeyup: onkeyup,
+	});
+
 	return {
 		get reference() {
-			if (!enabled) {
-				return {};
-			}
-			return {
-				onpointerdown: (event: PointerEvent) => {
-					pointerType = event.pointerType;
-				},
-				onmousedown: (event: MouseEvent) => {
-					if (event.button !== 0) {
-						return;
-					}
-
-					if (isMouseLikePointerType(pointerType, true) && ignoreMouse) {
-						return;
-					}
-
-					if (eventOption === "click") {
-						return;
-					}
-
-					if (
-						open &&
-						toggle &&
-						(data.openEvent ? data.openEvent.type === "mousedown" : true)
-					) {
-						onOpenChange(false, event, "click");
-					} else {
-						// Prevent stealing focus from the floating element
-						event.preventDefault();
-						onOpenChange(true, event, "click");
-					}
-				},
-				onclick: (event: MouseEvent) => {
-					if (eventOption === "mousedown" && pointerType) {
-						pointerType = undefined;
-						return;
-					}
-
-					if (isMouseLikePointerType(pointerType, true) && ignoreMouse) {
-						return;
-					}
-
-					if (
-						open &&
-						toggle &&
-						(data.openEvent ? data.openEvent.type === "click" : true)
-					) {
-						onOpenChange(false, event, "click");
-					} else {
-						onOpenChange(true, event, "click");
-					}
-				},
-				onkeydown: (event: KeyboardEvent) => {
-					pointerType = undefined;
-
-					if (
-						event.defaultPrevented ||
-						!keyboardHandlers ||
-						isButtonTarget(event)
-					) {
-						return;
-					}
-					// @ts-expect-error FIXME
-					if (event.key === " " && !isSpaceIgnored(reference)) {
-						// Prevent scrolling
-						event.preventDefault();
-						didKeyDown = true;
-					}
-
-					if (event.key === "Enter") {
-						if (open && toggle) {
-							onOpenChange(false, event, "click");
-						} else {
-							onOpenChange(true, event, "click");
-						}
-					}
-				},
-				onkeyup: (event: KeyboardEvent) => {
-					if (
-						event.defaultPrevented ||
-						!keyboardHandlers ||
-						isButtonTarget(event) ||
-						// @ts-expect-error FIXME
-						isSpaceIgnored(reference)
-					) {
-						return;
-					}
-
-					if (event.key === " " && didKeyDown) {
-						didKeyDown = false;
-						if (open && toggle) {
-							onOpenChange(false, event, "click");
-						} else {
-							onOpenChange(true, event, "click");
-						}
-					}
-				},
-			};
+			if (!enabled) return {};
+			return reference;
 		},
 	};
 }
diff --git a/packages/floating-ui-svelte/src/hooks/use-client-point.svelte.ts b/packages/floating-ui-svelte/src/hooks/use-client-point.svelte.ts
new file mode 100644
index 00000000..92e9af79
--- /dev/null
+++ b/packages/floating-ui-svelte/src/hooks/use-client-point.svelte.ts
@@ -0,0 +1,270 @@
+import { getWindow } from "@floating-ui/utils/dom";
+import {
+	contains,
+	getTarget,
+	isMouseLikePointerType,
+} from "../internal/dom.js";
+import { extract } from "../internal/extract.js";
+import type { ContextData, MaybeGetter } from "../types.js";
+import type { ElementProps } from "./use-interactions.svelte.js";
+import type { FloatingContextData } from "./use-floating-context.svelte.js";
+
+function createVirtualElement(
+	domElement: Element | null | undefined,
+	data: {
+		axis: "x" | "y" | "both";
+		data: ContextData;
+		pointerType: string | undefined;
+		x: number | null;
+		y: number | null;
+	},
+) {
+	let offsetX: number | null = null;
+	let offsetY: number | null = null;
+	let isAutoUpdateEvent = false;
+
+	return {
+		contextElement: domElement || undefined,
+		getBoundingClientRect() {
+			const domRect = domElement?.getBoundingClientRect() || {
+				width: 0,
+				height: 0,
+				x: 0,
+				y: 0,
+			};
+
+			const isXAxis = data.axis === "x" || data.axis === "both";
+			const isYAxis = data.axis === "y" || data.axis === "both";
+			const canTrackCursorOnAutoUpdate =
+				["mouseenter", "mousemove"].includes(data.data.openEvent?.type || "") &&
+				data.pointerType !== "touch";
+
+			let width = domRect.width;
+			let height = domRect.height;
+			let x = domRect.x;
+			let y = domRect.y;
+
+			if (offsetX == null && data.x && isXAxis) {
+				offsetX = domRect.x - data.x;
+			}
+
+			if (offsetY == null && data.y && isYAxis) {
+				offsetY = domRect.y - data.y;
+			}
+
+			x -= offsetX || 0;
+			y -= offsetY || 0;
+			width = 0;
+			height = 0;
+
+			if (!isAutoUpdateEvent || canTrackCursorOnAutoUpdate) {
+				width = data.axis === "y" ? domRect.width : 0;
+				height = data.axis === "x" ? domRect.height : 0;
+				x = isXAxis && data.x != null ? data.x : x;
+				y = isYAxis && data.y != null ? data.y : y;
+			} else if (isAutoUpdateEvent && !canTrackCursorOnAutoUpdate) {
+				height = data.axis === "x" ? domRect.height : height;
+				width = data.axis === "y" ? domRect.width : width;
+			}
+
+			isAutoUpdateEvent = true;
+
+			return {
+				width,
+				height,
+				x,
+				y,
+				top: y,
+				right: x + width,
+				bottom: y + height,
+				left: x,
+			};
+		},
+	};
+}
+
+function isMouseBasedEvent(event: Event | undefined): event is MouseEvent {
+	return event != null && (event as MouseEvent).clientX != null;
+}
+
+interface UseClientPointOptions {
+	/**
+	 * Whether the Hook is enabled, including all internal Effects and event
+	 * handlers.
+	 * @default true
+	 */
+	enabled?: MaybeGetter<boolean>;
+	/**
+	 * Whether to restrict the client point to an axis and use the reference
+	 * element (if it exists) as the other axis. This can be useful if the
+	 * floating element is also interactive.
+	 * @default 'both'
+	 */
+	axis?: MaybeGetter<"x" | "y" | "both">;
+	/**
+	 * An explicitly defined `x` client coordinate.
+	 * @default null
+	 */
+	x?: MaybeGetter<number | null>;
+	/**
+	 * An explicitly defined `y` client coordinate.
+	 * @default null
+	 */
+	y?: MaybeGetter<number | null>;
+}
+
+function useClientPoint(
+	context: FloatingContextData,
+	opts: UseClientPointOptions = {},
+): ElementProps {
+	const enabled = $derived(extract(opts.enabled, true));
+	const axis = $derived(extract(opts.axis, "both"));
+	const x = $derived(extract(opts.x, null));
+	const y = $derived(extract(opts.y, null));
+	let initial = false;
+	let cleanupListener: (() => void) | null = null;
+	let pointerType = $state<string | undefined>();
+	let listenerDeps = $state.raw<never[]>([]);
+
+	// If the pointer is a mouse-like pointer, we want to continue following the
+	// mouse even if the floating element is transitioning out. On touch
+	// devices, this is undesirable because the floating element will move to
+	// the dismissal touch point.
+	const openCheck = $derived(
+		isMouseLikePointerType(pointerType)
+			? context.elements.floating
+			: context.open,
+	);
+
+	function setReference(x: number | null, y: number | null) {
+		if (initial) return;
+
+		// Prevent setting if the open event was not a mouse-like one
+		// (e.g. focus to open, then hover over the reference element).
+		// Only apply if the event exists.
+		if (context.data.openEvent && !isMouseBasedEvent(context.data.openEvent)) {
+			return;
+		}
+
+		context.setPositionReference(
+			createVirtualElement(context.elements.domReference, {
+				x,
+				y,
+				axis: axis,
+				data: context.data,
+				pointerType: pointerType,
+			}),
+		);
+	}
+
+	function handleReferenceEnterOrMove(event: MouseEvent) {
+		if (x != null || y != null) return;
+
+		if (!context.open) {
+			setReference(event.clientX, event.clientY);
+		} else if (!cleanupListener) {
+			// If there's no cleanup, there's no listener, but we want to ensure
+			// we add the listener if the cursor landed on the floating element and
+			// then back on the reference (i.e. it's interactive).
+			listenerDeps = [];
+		}
+	}
+
+	function addListener() {
+		if (!openCheck || !enabled || x != null || y != null) {
+			// Clear existing listener when conditions change
+			if (cleanupListener) {
+				cleanupListener();
+				cleanupListener = null;
+			}
+			return;
+		}
+
+		// Clear existing listener before adding new one
+		if (cleanupListener) {
+			cleanupListener();
+			cleanupListener = null;
+		}
+
+		const win = getWindow(context.elements.floating);
+
+		const handleMouseMove = (event: MouseEvent) => {
+			const target = getTarget(event) as Element | null;
+			if (!contains(context.elements.floating, target)) {
+				setReference(event.clientX, event.clientY);
+			} else {
+				win.removeEventListener("mousemove", handleMouseMove);
+				cleanupListener = null;
+			}
+		};
+
+		if (!context.data.openEvent || isMouseBasedEvent(context.data.openEvent)) {
+			win.addEventListener("mousemove", handleMouseMove);
+			const cleanup = () => {
+				win.removeEventListener("mousemove", handleMouseMove);
+				cleanupListener = null;
+			};
+			cleanupListener = cleanup;
+			return cleanup;
+		}
+
+		context.setPositionReference(context.elements.domReference);
+	}
+
+	function setPointerType(event: PointerEvent) {
+		pointerType = event.pointerType;
+	}
+
+	$effect(() => {
+		listenerDeps;
+		return addListener();
+	});
+
+	$effect(() => {
+		if (enabled && !context.elements.floating) {
+			initial = false;
+		}
+	});
+
+	$effect(() => {
+		if (!enabled && context.open) {
+			initial = true;
+		}
+	});
+
+	$effect.pre(() => {
+		if (enabled && (x != null || y != null)) {
+			initial = false;
+			setReference(x, y);
+		}
+	});
+
+	$effect(() => {
+		if (enabled && context.open) {
+			listenerDeps = [];
+		}
+	});
+
+	$effect(() => {
+		if (!openCheck && cleanupListener) {
+			cleanupListener();
+		}
+	});
+
+	const reference = $derived({
+		onpointerdown: setPointerType,
+		onpointerenter: setPointerType,
+		onmousemove: handleReferenceEnterOrMove,
+		onmouseenter: handleReferenceEnterOrMove,
+	});
+
+	return {
+		get reference() {
+			if (!enabled) return {};
+			return reference;
+		},
+	};
+}
+
+export type { UseClientPointOptions };
+export { useClientPoint };
diff --git a/packages/floating-ui-svelte/src/hooks/use-dismiss.svelte.ts b/packages/floating-ui-svelte/src/hooks/use-dismiss.svelte.ts
index 583e446c..2fd56c79 100644
--- a/packages/floating-ui-svelte/src/hooks/use-dismiss.svelte.ts
+++ b/packages/floating-ui-svelte/src/hooks/use-dismiss.svelte.ts
@@ -4,6 +4,7 @@ import {
 	isElement,
 	isHTMLElement,
 	isLastTraversableNode,
+	isWebKit,
 } from "@floating-ui/utils/dom";
 import {
 	contains,
@@ -13,7 +14,14 @@ import {
 	isEventTargetWithin,
 	isRootElement,
 } from "../internal/dom.js";
-import type { FloatingContext } from "./use-floating.svelte.js";
+import type { MaybeGetter } from "../types.js";
+import { useFloatingTree } from "../components/floating-tree/hooks.svelte.js";
+import { getChildren } from "../internal/get-children.js";
+import { on } from "svelte/events";
+import { extract } from "../internal/extract.js";
+import type { ElementProps } from "./use-interactions.svelte.js";
+import { FLOATING_ID_ATTRIBUTE } from "../internal/attributes.js";
+import type { FloatingContextData } from "./use-floating-context.svelte.js";
 
 const bubbleHandlerKeys = {
 	pointerdown: "onpointerdown",
@@ -27,9 +35,9 @@ const captureHandlerKeys = {
 	click: "onclickcapture",
 };
 
-const normalizeProp = (
+function normalizeProp(
 	normalizable?: boolean | { escapeKey?: boolean; outsidePress?: boolean },
-) => {
+) {
 	return {
 		escapeKey:
 			typeof normalizable === "boolean"
@@ -40,7 +48,7 @@ const normalizeProp = (
 				? normalizable
 				: (normalizable?.outsidePress ?? true),
 	};
-};
+}
 
 interface UseDismissOptions {
 	/**
@@ -48,19 +56,19 @@ interface UseDismissOptions {
 	 * handlers.
 	 * @default true
 	 */
-	enabled?: boolean;
+	enabled?: MaybeGetter<boolean>;
 	/**
 	 * Whether to dismiss the floating element upon pressing the `esc` key.
 	 * @default true
 	 */
-	escapeKey?: boolean;
+	escapeKey?: MaybeGetter<boolean>;
 	/**
 	 * Whether to dismiss the floating element upon pressing the reference
 	 * element. You likely want to ensure the `move` option in the `useHover()`
 	 * Hook has been disabled when this is in use.
 	 * @default false
 	 */
-	referencePress?: boolean;
+	referencePress?: MaybeGetter<boolean>;
 	/**
 	 * The type of event to use to determine a “press”.
 	 * - `pointerdown` is eager on both mouse + touch input.
@@ -68,7 +76,7 @@ interface UseDismissOptions {
 	 * - `click` is lazy on both mouse + touch input.
 	 * @default 'pointerdown'
 	 */
-	referencePressEvent?: "pointerdown" | "mousedown" | "click";
+	referencePressEvent?: MaybeGetter<"pointerdown" | "mousedown" | "click">;
 	/**
 	 * Whether to dismiss the floating element upon pressing outside of the
 	 * floating element.
@@ -90,120 +98,115 @@ interface UseDismissOptions {
 	 * - `click` is lazy on both mouse + touch input.
 	 * @default 'pointerdown'
 	 */
-	outsidePressEvent?: "pointerdown" | "mousedown" | "click";
+	outsidePressEvent?: MaybeGetter<"pointerdown" | "mousedown" | "click">;
 	/**
 	 * Whether to dismiss the floating element upon scrolling an overflow
 	 * ancestor.
 	 * @default false
 	 */
-	ancestorScroll?: boolean;
+	ancestorScroll?: MaybeGetter<boolean>;
 	/**
 	 * Determines whether event listeners bubble upwards through a tree of
 	 * floating elements.
 	 */
-	bubbles?: boolean | { escapeKey?: boolean; outsidePress?: boolean };
+	bubbles?: MaybeGetter<
+		boolean | { escapeKey?: boolean; outsidePress?: boolean }
+	>;
 	/**
 	 * Determines whether to use capture phase event listeners.
 	 */
-	capture?: boolean | { escapeKey?: boolean; outsidePress?: boolean };
+	capture?: MaybeGetter<
+		boolean | { escapeKey?: boolean; outsidePress?: boolean }
+	>;
 }
 
-function useDismiss(context: FloatingContext, options: UseDismissOptions = {}) {
-	const {
-		open,
-		onOpenChange,
-		// nodeId,
-		elements: { reference, floating },
-		data,
-	} = $derived(context);
-
-	const {
-		enabled = true,
-		escapeKey = true,
-		outsidePress: unstable_outsidePress = true,
-		outsidePressEvent = "pointerdown",
-		referencePress = false,
-		referencePressEvent = "pointerdown",
-		ancestorScroll = false,
-		bubbles,
-		capture,
-	} = $derived(options);
-
-	// const tree = useFloatingTree();
+function useDismiss(
+	context: FloatingContextData,
+	opts: UseDismissOptions = {},
+): ElementProps {
+	const enabled = $derived(extract(opts.enabled, true));
+	const escapeKey = $derived(extract(opts.escapeKey, true));
+	const outsidePressProp = $derived(opts.outsidePress ?? true);
+	const outsidePressEvent = $derived(
+		extract(opts.outsidePressEvent, "pointerdown"),
+	);
+	const referencePress = $derived(extract(opts.referencePress, false));
+	const referencePressEvent = $derived(
+		extract(opts.referencePressEvent, "pointerdown"),
+	);
+	const ancestorScroll = $derived(extract(opts.ancestorScroll, false));
+	const bubbles = $derived(extract(opts.bubbles));
+	const capture = $derived(extract(opts.capture));
+	const tree = useFloatingTree();
+
 	const outsidePressFn = $derived(
-		typeof unstable_outsidePress === "function"
-			? unstable_outsidePress
-			: () => false,
+		typeof outsidePressProp === "function" ? outsidePressProp : () => false,
 	);
 	const outsidePress = $derived(
-		typeof unstable_outsidePress === "function"
-			? outsidePressFn
-			: unstable_outsidePress,
+		typeof outsidePressProp === "function" ? outsidePressFn : outsidePressProp,
 	);
-	let insideReactTree = false;
+	const bubbleOptions = $derived(normalizeProp(bubbles));
+	const captureOptions = $derived(normalizeProp(capture));
+
 	let endedOrStartedInside = false;
-	const { escapeKey: escapeKeyBubbles, outsidePress: outsidePressBubbles } =
-		normalizeProp(bubbles);
-	const { escapeKey: escapeKeyCapture, outsidePress: outsidePressCapture } =
-		normalizeProp(capture);
+	let isComposing = false;
+	let insideTree = false;
 
-	const closeOnEscapeKeyDown = (event: KeyboardEvent) => {
-		if (!open || !enabled || !escapeKey || event.key !== "Escape") {
+	function closeOnEscapeKeyDown(event: KeyboardEvent) {
+		if (!context.open || !enabled || !escapeKey || event.key !== "Escape")
 			return;
-		}
 
-		// const children = tree ? getChildren(tree.nodesRef.current, nodeId) : [];
+		// Wait until IME is settled. Pressing `Escape` while composing should
+		// close the compose menu, but not the floating element.
+		if (isComposing) return;
 
-		if (!escapeKeyBubbles) {
+		const nodeId = context.data.floatingContext?.nodeId;
+		const children = tree ? getChildren(tree?.nodes, nodeId) : [];
+
+		if (!bubbleOptions.escapeKey) {
 			event.stopPropagation();
 
-			// if (children.length > 0) {
-			// 	let shouldDismiss = true;
+			if (children.length > 0) {
+				let shouldDismiss = true;
 
-			// 	children.forEach((child) => {
-			// 		if (child.context?.open && !child.context.dataRef.current.__escapeKeyBubbles) {
-			// 			shouldDismiss = false;
-			// 			return;
-			// 		}
-			// 	});
+				for (const child of children) {
+					if (child.context?.open && !child.context.data.__escapeKeyBubbles) {
+						shouldDismiss = false;
+						break;
+					}
+				}
 
-			// 	if (!shouldDismiss) {
-			// 		return;
-			// 	}
-			// }
+				if (!shouldDismiss) return;
+			}
 		}
 
-		onOpenChange(false, event, "escape-key");
-	};
+		context.onOpenChange(false, event, "escape-key");
+	}
 
-	const closeOnEscapeKeyDownCapture = (event: KeyboardEvent) => {
+	function closeOnEscapeKeyDownCapture(event: KeyboardEvent) {
 		const callback = () => {
 			closeOnEscapeKeyDown(event);
 			getTarget(event)?.removeEventListener("keydown", callback);
 		};
 		getTarget(event)?.addEventListener("keydown", callback);
-	};
+	}
 
-	const closeOnPressOutside = (event: MouseEvent) => {
-		// Given developers can stop the propagation of the synthetic event,
-		// we can only be confident with a positive value.
-		const insideReactTreeLocal = insideReactTree;
-		insideReactTree = false;
+	function closeOnPressOutside(event: MouseEvent) {
+		const localInsideTree = insideTree;
+		insideTree = false;
 
 		// When click outside is lazy (`click` event), handle dragging.
 		// Don't close if:
 		// - The click started inside the floating element.
 		// - The click ended inside the floating element.
-		const endedOrStartedInsideLocal = endedOrStartedInside;
+		const localEndedOrStartedInside = endedOrStartedInside;
 		endedOrStartedInside = false;
 
-		if (outsidePressEvent === "click" && endedOrStartedInsideLocal) {
+		if (outsidePressEvent === "click" && localEndedOrStartedInside) {
 			return;
 		}
 
-		if (insideReactTreeLocal) {
-			return;
-		}
+		if (localInsideTree) return;
 
 		if (typeof outsidePress === "function" && !outsidePress(event)) {
 			return;
@@ -211,14 +214,15 @@ function useDismiss(context: FloatingContext, options: UseDismissOptions = {}) {
 
 		const target = getTarget(event);
 		const inertSelector = `[${createAttribute("inert")}]`;
-		const markers = getDocument(floating).querySelectorAll(inertSelector);
+		const markers = getDocument(context.elements.floating).querySelectorAll(
+			inertSelector,
+		);
 
 		let targetRootAncestor = isElement(target) ? target : null;
+
 		while (targetRootAncestor && !isLastTraversableNode(targetRootAncestor)) {
 			const nextParent = getParentNode(targetRootAncestor);
-			if (isLastTraversableNode(nextParent) || !isElement(nextParent)) {
-				break;
-			}
+			if (isLastTraversableNode(nextParent) || !isElement(nextParent)) break;
 
 			targetRootAncestor = nextParent;
 		}
@@ -230,7 +234,7 @@ function useDismiss(context: FloatingContext, options: UseDismissOptions = {}) {
 			isElement(target) &&
 			!isRootElement(target) &&
 			// Clicked on a direct ancestor (e.g. FloatingOverlay).
-			!contains(target, floating) &&
+			!contains(target, context.elements.floating) &&
 			// If the target root element contains none of the markers, then the
 			// element was injected after the floating element rendered.
 			Array.from(markers).every(
@@ -241,115 +245,180 @@ function useDismiss(context: FloatingContext, options: UseDismissOptions = {}) {
 		}
 
 		// Check if the click occurred on the scrollbar
-		if (isHTMLElement(target) && floating) {
-			// In Firefox, `target.scrollWidth > target.clientWidth` for inline
-			// elements.
+		if (isHTMLElement(target) && context.elements.floating) {
+			const lastTraversableNode = isLastTraversableNode(target);
+			const style = getComputedStyle(target);
+			const scrollRe = /auto|scroll/;
+			const isScrollableX =
+				lastTraversableNode || scrollRe.test(style.overflowX);
+			const isScrollableY =
+				lastTraversableNode || scrollRe.test(style.overflowY);
+
 			const canScrollX =
-				target.clientWidth > 0 && target.scrollWidth > target.clientWidth;
+				isScrollableX &&
+				target.clientWidth > 0 &&
+				target.scrollWidth > target.clientWidth;
 			const canScrollY =
-				target.clientHeight > 0 && target.scrollHeight > target.clientHeight;
+				isScrollableY &&
+				target.clientHeight > 0 &&
+				target.scrollHeight > target.clientHeight;
 
-			let xCond = canScrollY && event.offsetX > target.clientWidth;
+			const isRTL = style.direction === "rtl";
 
+			// Check click position relative to scrollbar.
 			// In some browsers it is possible to change the <body> (or window)
 			// scrollbar to the left side, but is very rare and is difficult to
 			// check for. Plus, for modal dialogs with backdrops, it is more
 			// important that the backdrop is checked but not so much the window.
-			if (canScrollY) {
-				const isRTL = getComputedStyle(target).direction === "rtl";
+			const pressedVerticalScrollbar =
+				canScrollY &&
+				(isRTL
+					? event.offsetX <= target.offsetWidth - target.clientWidth
+					: event.offsetX > target.clientWidth);
 
-				if (isRTL) {
-					xCond = event.offsetX <= target.offsetWidth - target.clientWidth;
-				}
-			}
+			const pressedHorizontalScrollbar =
+				canScrollX && event.offsetY > target.clientHeight;
 
-			if (xCond || (canScrollX && event.offsetY > target.clientHeight)) {
+			if (pressedVerticalScrollbar || pressedHorizontalScrollbar) {
 				return;
 			}
 		}
 
-		// const targetIsInsideChildren =
-		// 	tree &&
-		// 	getChildren(tree.nodesRef.current, nodeId).some((node) =>
-		// 		isEventTargetWithin(event, node.context?.elements.floating),
-		// 	);
+		const nodeId = context.data.floatingContext?.nodeId;
+
+		const targetIsInsideChildren =
+			tree &&
+			getChildren(tree?.nodes, nodeId).some((node) =>
+				isEventTargetWithin(event, node.context?.elements.floating),
+			);
 
 		if (
-			isEventTargetWithin(event, floating) ||
-			// @ts-expect-error - FIXME
-			isEventTargetWithin(event, reference)
-			// targetIsInsideChildren
+			isEventTargetWithin(event, context.elements.floating) ||
+			isEventTargetWithin(event, context.elements.domReference) ||
+			targetIsInsideChildren
 		) {
 			return;
 		}
 
-		// const children = tree ? getChildren(tree.nodesRef.current, nodeId) : [];
-		// if (children.length > 0) {
-		// 	let shouldDismiss = true;
+		const children = tree ? getChildren(tree?.nodes, nodeId) : [];
 
-		// 	children.forEach((child) => {
-		// 		if (child.context?.open && !child.context.dataRef.current.__outsidePressBubbles) {
-		// 			shouldDismiss = false;
-		// 			return;
-		// 		}
-		// 	});
+		if (children.length > 0) {
+			let shouldDismiss = true;
 
-		// 	if (!shouldDismiss) {
-		// 		return;
-		// 	}
-		// }
+			for (const child of children) {
+				if (child.context?.open && !child.context.data.__outsidePressBubbles) {
+					shouldDismiss = false;
+					break;
+				}
+			}
 
-		onOpenChange(false, event, "outside-press");
-	};
+			if (!shouldDismiss) return;
+		}
+
+		// if the event occurred inside a portal created within this floating element, return
+		const closestPortalOrigin = isElement(target)
+			? target.closest("[data-floating-ui-origin-id]")
+			: null;
+
+		if (
+			closestPortalOrigin &&
+			closestPortalOrigin.getAttribute("data-floating-ui-origin-id") ===
+				context.floatingId
+		)
+			return;
+
+		context.onOpenChange(false, event, "outside-press");
+	}
 
-	const closeOnPressOutsideCapture = (event: MouseEvent) => {
+	function closeOnPressOutsideCapture(event: MouseEvent) {
 		const callback = () => {
 			closeOnPressOutside(event);
 			getTarget(event)?.removeEventListener(outsidePressEvent, callback);
 		};
 		getTarget(event)?.addEventListener(outsidePressEvent, callback);
-	};
+	}
+
+	function onScroll(event: Event) {
+		context.onOpenChange(false, event, "ancestor-scroll");
+	}
+
+	let compositionTimeout = -1;
+
+	function handleCompositionStart() {
+		window.clearTimeout(compositionTimeout);
+		isComposing = true;
+	}
+
+	function handleCompositionEnd() {
+		// Safari fires `compositionend` before `keydown`, so we need to wait
+		// until the next tick to set `isComposing` to `false`.
+		// https://bugs.webkit.org/show_bug.cgi?id=165004
+		compositionTimeout = window.setTimeout(
+			() => {
+				isComposing = false;
+			},
+			// 0ms or 1ms don't work in Safari. 5ms appears to consistently work.
+			// Only apply to WebKit for the test to remain 0ms.
+			isWebKit() ? 5 : 0,
+		);
+	}
 
-	$effect(() => {
-		if (!open || !enabled) {
-			return;
-		}
+	$effect.pre(() => {
+		if (!context.open || !enabled) return;
+		context.data.__escapeKeyBubbles = bubbleOptions.escapeKey;
+		context.data.__outsidePressBubbles = bubbleOptions.outsidePress;
 
-		data.__escapeKeyBubbles = escapeKeyBubbles;
-		data.__outsidePressBubbles = outsidePressBubbles;
+		const doc = getDocument(context.elements.floating);
+		const listenersToRemove: Array<() => void> = [];
 
-		function onScroll(event: Event) {
-			onOpenChange(false, event, "ancestor-scroll");
+		if (escapeKey) {
+			listenersToRemove.push(
+				on(
+					doc,
+					"keydown",
+					captureOptions.escapeKey
+						? closeOnEscapeKeyDownCapture
+						: closeOnEscapeKeyDown,
+					{ capture: captureOptions.escapeKey },
+				),
+				on(doc, "compositionstart", handleCompositionStart),
+				on(doc, "compositionend", handleCompositionEnd),
+			);
 		}
 
-		const doc = getDocument(floating);
-		escapeKey &&
-			doc.addEventListener(
-				"keydown",
-				escapeKeyCapture ? closeOnEscapeKeyDownCapture : closeOnEscapeKeyDown,
-				escapeKeyCapture,
-			);
-		outsidePress &&
-			doc.addEventListener(
-				outsidePressEvent,
-				outsidePressCapture ? closeOnPressOutsideCapture : closeOnPressOutside,
-				outsidePressCapture,
+		if (outsidePress) {
+			listenersToRemove.push(
+				on(
+					doc,
+					outsidePressEvent,
+					captureOptions.outsidePress
+						? closeOnPressOutsideCapture
+						: closeOnPressOutside,
+					{ capture: captureOptions.outsidePress },
+				),
 			);
+		}
 
 		let ancestors: (Element | Window | VisualViewport)[] = [];
 
 		if (ancestorScroll) {
-			if (isElement(reference)) {
-				ancestors = getOverflowAncestors(reference);
+			if (isElement(context.elements.domReference)) {
+				ancestors = getOverflowAncestors(context.elements.domReference);
 			}
 
-			if (isElement(floating)) {
-				ancestors = ancestors.concat(getOverflowAncestors(floating));
+			if (isElement(context.elements.floating)) {
+				ancestors = ancestors.concat(
+					getOverflowAncestors(context.elements.floating),
+				);
 			}
 
-			if (!isElement(reference) && reference && reference.contextElement) {
+			if (
+				!isElement(context.elements.reference) &&
+				context.elements.reference &&
+				context.elements.reference.contextElement
+			) {
 				ancestors = ancestors.concat(
-					getOverflowAncestors(reference.contextElement),
+					getOverflowAncestors(context.elements.reference.contextElement),
 				);
 			}
 		}
@@ -360,69 +429,63 @@ function useDismiss(context: FloatingContext, options: UseDismissOptions = {}) {
 		);
 
 		for (const ancestor of ancestors) {
-			ancestor.addEventListener("scroll", onScroll, { passive: true });
+			listenersToRemove.push(
+				on(ancestor, "scroll", onScroll, { passive: true }),
+			);
 		}
 
 		return () => {
-			escapeKey &&
-				doc.removeEventListener(
-					"keydown",
-					escapeKeyCapture ? closeOnEscapeKeyDownCapture : closeOnEscapeKeyDown,
-					escapeKeyCapture,
-				);
-			outsidePress &&
-				doc.removeEventListener(
-					outsidePressEvent,
-					outsidePressCapture
-						? closeOnPressOutsideCapture
-						: closeOnPressOutside,
-					outsidePressCapture,
-				);
-			for (const ancestor of ancestors) {
-				ancestor.removeEventListener("scroll", onScroll);
+			for (const removeListener of listenersToRemove) {
+				removeListener();
 			}
+			window.clearTimeout(compositionTimeout);
 		};
 	});
 
-	$effect(() => {
+	$effect.pre(() => {
 		[outsidePress, outsidePressEvent];
-		insideReactTree = false;
+		insideTree = false;
 	});
 
-	return {
-		get reference() {
-			if (!enabled) {
-				return {};
-			}
-			return {
-				onKeyDown: closeOnEscapeKeyDown,
-				[bubbleHandlerKeys[referencePressEvent]]: (event: Event) => {
-					if (referencePress) {
-						onOpenChange(false, event, "reference-press");
-					}
+	const reference = $derived({
+		onkeydown: closeOnEscapeKeyDown,
+		...(referencePress && {
+			[bubbleHandlerKeys[referencePressEvent]]: (event: Event) => {
+				context.onOpenChange(false, event, "reference-press");
+			},
+			...(referencePressEvent !== "click" && {
+				onclick: (event: MouseEvent) => {
+					context.onOpenChange(false, event, "reference-press");
 				},
-			};
+			}),
+		}),
+	});
+
+	const floating = $derived({
+		onkeydown: closeOnEscapeKeyDown,
+		onmousedown: () => {
+			endedOrStartedInside = true;
+		},
+		onmouseup: () => {
+			endedOrStartedInside = true;
+		},
+		[captureHandlerKeys[outsidePressEvent]]: () => {
+			insideTree = true;
 		},
+		[FLOATING_ID_ATTRIBUTE]: context.floatingId,
+	});
 
+	return {
+		get reference() {
+			if (!enabled) return {};
+			return reference;
+		},
 		get floating() {
-			if (!enabled) {
-				return {};
-			}
-			return {
-				onKeyDown: closeOnEscapeKeyDown,
-				onMouseDown() {
-					endedOrStartedInside = true;
-				},
-				onMouseUp() {
-					endedOrStartedInside = true;
-				},
-				[captureHandlerKeys[outsidePressEvent]]: () => {
-					insideReactTree = true;
-				},
-			};
+			if (!enabled) return {};
+			return floating;
 		},
 	};
 }
 
 export type { UseDismissOptions };
-export { useDismiss };
+export { useDismiss, normalizeProp };
diff --git a/packages/floating-ui-svelte/src/hooks/use-floating-context.svelte.ts b/packages/floating-ui-svelte/src/hooks/use-floating-context.svelte.ts
new file mode 100644
index 00000000..3bc491e2
--- /dev/null
+++ b/packages/floating-ui-svelte/src/hooks/use-floating-context.svelte.ts
@@ -0,0 +1,108 @@
+import type {
+	ContextData,
+	FloatingEvents,
+	OnOpenChange,
+	ReferenceType,
+} from "../types.js";
+import type { FloatingRootContext } from "./use-floating-root-context.svelte.js";
+import type { PositionState } from "./use-position.svelte.js";
+import type { Placement, Strategy } from "@floating-ui/utils";
+import type { MiddlewareData } from "@floating-ui/dom";
+import type { FloatingOptions } from "./use-floating-options.svelte.js";
+import type { FloatingState } from "./use-floating.svelte.js";
+
+export interface FloatingContextOptions<
+	RT extends ReferenceType = ReferenceType,
+> {
+	floatingState: Omit<FloatingState<RT>, "context">;
+	floatingOptions: FloatingOptions<RT>;
+	rootContext: FloatingRootContext<RT>;
+	positionState: PositionState<RT>;
+}
+
+export interface FloatingContextData<RT extends ReferenceType = ReferenceType> {
+	elements: {
+		reference: ReferenceType | null;
+		floating: HTMLElement | null;
+		domReference: HTMLElement | null;
+	};
+	x: number;
+	y: number;
+	placement: Placement;
+	strategy: Strategy;
+	middlewareData: MiddlewareData;
+	isPositioned: boolean;
+	update: () => Promise<void>;
+	floatingStyles: string;
+	onOpenChange: OnOpenChange;
+	open: boolean;
+	data: ContextData<RT>;
+	floatingId: string;
+	events: FloatingEvents;
+	nodeId: string | undefined;
+	setPositionReference: (node: ReferenceType | null) => void;
+	"~position": PositionState<RT>;
+}
+
+export function useFloatingContext<RT extends ReferenceType = ReferenceType>(
+	opts: FloatingContextOptions<RT>,
+): FloatingContextData<RT> {
+	const elements = $state({
+		get reference() {
+			return opts.floatingOptions.reference.current as ReferenceType | null;
+		},
+		get floating() {
+			return opts.floatingOptions.floating.current;
+		},
+		set floating(node: HTMLElement | null) {
+			opts.floatingOptions.floating.current = node;
+		},
+		get domReference() {
+			return opts.floatingState.elements.domReference;
+		},
+	});
+
+	return {
+		elements,
+		get x() {
+			return opts.floatingState.x;
+		},
+		get y() {
+			return opts.floatingState.y;
+		},
+		get placement() {
+			return opts.floatingState.placement;
+		},
+		get strategy() {
+			return opts.floatingState.strategy;
+		},
+		get middlewareData() {
+			return opts.floatingState.middlewareData;
+		},
+		get isPositioned() {
+			return opts.floatingState.isPositioned;
+		},
+		get floatingStyles() {
+			return opts.floatingState.floatingStyles;
+		},
+		get open() {
+			return opts.rootContext.open;
+		},
+		get data() {
+			return opts.rootContext.data;
+		},
+		get floatingId() {
+			return opts.rootContext.floatingId;
+		},
+		get events() {
+			return opts.rootContext.events;
+		},
+		get nodeId() {
+			return opts.floatingOptions.nodeId.current;
+		},
+		onOpenChange: opts.rootContext.onOpenChange,
+		update: opts.floatingState.update,
+		setPositionReference: opts.floatingState.setPositionReference,
+		"~position": opts.positionState,
+	};
+}
diff --git a/packages/floating-ui-svelte/src/hooks/use-floating-options.svelte.ts b/packages/floating-ui-svelte/src/hooks/use-floating-options.svelte.ts
new file mode 100644
index 00000000..0a547171
--- /dev/null
+++ b/packages/floating-ui-svelte/src/hooks/use-floating-options.svelte.ts
@@ -0,0 +1,163 @@
+import type {
+	MaybeGetter,
+	OpenChangeReason,
+	ReferenceType,
+	WhileElementsMounted,
+} from "../types.js";
+import type { FloatingRootContext } from "./use-floating-root-context.svelte.js";
+import type { Placement, Strategy } from "@floating-ui/utils";
+import type { Middleware } from "@floating-ui/dom";
+import { box } from "../internal/box.svelte.js";
+import { extract } from "../internal/extract.js";
+import { noop } from "../internal/noop.js";
+import { useId } from "./use-id.js";
+
+export interface UseFloatingOptions<RT extends ReferenceType = ReferenceType> {
+	/**
+	 * Represents the open/close state of the floating element.
+	 * @default true
+	 */
+	open?: MaybeGetter<boolean>;
+
+	/**
+	 * Where to place the floating element relative to its reference element.
+	 * @default 'bottom'
+	 */
+	placement?: MaybeGetter<Placement | undefined>;
+
+	/**
+	 * The type of CSS position property to use.
+	 * @default 'absolute'
+	 */
+	strategy?: MaybeGetter<Strategy>;
+
+	/**
+	 * These are plain objects that modify the positioning coordinates in some fashion, or provide useful data for the consumer to use.
+	 * @default []
+	 */
+	middleware?: MaybeGetter<Array<Middleware | undefined | null | false>>;
+
+	/**
+	 * Whether to use `transform` instead of `top` and `left` styles to
+	 * position the floating element (`floatingStyles`).
+	 * @default true
+	 */
+	transform?: MaybeGetter<boolean>;
+
+	/**
+	 * Callback to handle mounting/unmounting of the elements.
+	 * @default undefined
+	 */
+	whileElementsMounted?: WhileElementsMounted;
+
+	rootContext?: MaybeGetter<FloatingRootContext<RT>>;
+	elements?: {
+		/**
+		 * The reference element.
+		 */
+		reference?: MaybeGetter<Element | null>;
+		/**
+		 * The floating element.
+		 */
+		floating?: MaybeGetter<HTMLElement | null>;
+	};
+
+	/**
+	 * A callback that is invoked when the reference element changes.
+	 */
+	onReferenceChange?(node: Element | null): void;
+
+	/**
+	 * A callback that is invoked when the floating element changes.
+	 */
+	onFloatingChange?(node: HTMLElement | null): void;
+
+	/**
+	 * An event callback that is invoked when the floating element is opened or
+	 * closed.
+	 */
+	onOpenChange?(open: boolean, event?: Event, reason?: OpenChangeReason): void;
+	/**
+	 * Unique node id when using `FloatingTree`.
+	 */
+	nodeId?: MaybeGetter<string | undefined>;
+
+	/**
+	 * A unique id for the floating element.
+	 *
+	 * @default useId()
+	 */
+	floatingId?: MaybeGetter<string | undefined | null>;
+}
+
+export interface FloatingOptions<RT extends ReferenceType = ReferenceType>
+	extends ReturnType<typeof useFloatingOptions<RT>> {}
+
+/**
+ * Returns reactive options state to use with the various internal hooks.
+ */
+export function useFloatingOptions<RT extends ReferenceType = ReferenceType>(
+	options: UseFloatingOptions<RT>,
+) {
+	const floatingId = box.with(() => extract(options.floatingId) ?? useId());
+	const floatingProp = $derived(extract(options.elements?.floating, null));
+	const referenceProp = $derived(extract(options.elements?.reference, null));
+	const open = box.with(() => extract(options.open, true));
+	const placement = box.with(() => extract(options.placement, "bottom"));
+	const strategy = box.with(() => extract(options.strategy, "absolute"));
+	const middleware = box.with(() => extract(options.middleware, []));
+	const transform = box.with(() => extract(options.transform, true));
+	const onOpenChange = options.onOpenChange ?? noop;
+	const onReferenceChange = options.onReferenceChange ?? noop;
+	const onFloatingChange = options.onFloatingChange ?? noop;
+	const whileElementsMounted = options.whileElementsMounted;
+	const nodeId = box.with(() => extract(options.nodeId));
+	const rootContext = box.with(
+		() => extract(options.rootContext) as FloatingRootContext<RT> | undefined,
+	);
+	let _stableReference = $state<Element | null>(null);
+	let _stableFloating = $state<HTMLElement | null>(null);
+	const reference = box.with(
+		() => _stableReference,
+		(node) => {
+			_stableReference = node;
+			onReferenceChange(node);
+		},
+	);
+	const floating = box.with(
+		() => _stableFloating,
+		(node) => {
+			_stableFloating = node;
+			onFloatingChange(node);
+		},
+	);
+	reference.current = extract(options.elements?.reference, null);
+	floating.current = extract(options.elements?.floating, null);
+
+	$effect.pre(() => {
+		if (!floatingProp) return;
+		floating.current = floatingProp;
+	});
+
+	$effect.pre(() => {
+		if (!referenceProp) return;
+		reference.current = referenceProp;
+	});
+
+	return {
+		open,
+		placement,
+		strategy,
+		middleware,
+		transform,
+		whileElementsMounted,
+		rootContext,
+		floatingId,
+		onReferenceChange,
+		onFloatingChange,
+		onOpenChange,
+		nodeId,
+		reference,
+		floating,
+	};
+}
diff --git a/packages/floating-ui-svelte/src/hooks/use-floating-root-context.svelte.ts b/packages/floating-ui-svelte/src/hooks/use-floating-root-context.svelte.ts
new file mode 100644
index 00000000..d8118fa7
--- /dev/null
+++ b/packages/floating-ui-svelte/src/hooks/use-floating-root-context.svelte.ts
@@ -0,0 +1,154 @@
+import type { ReferenceElement } from "@floating-ui/dom";
+import type {
+	ContextData,
+	MaybeGetter,
+	OnOpenChange,
+	OpenChangeReason,
+	ReferenceType,
+} from "../types.js";
+import { useId } from "./use-id.js";
+import { createPubSub } from "../internal/create-pub-sub.js";
+import { useFloatingParentNodeId } from "../components/floating-tree/hooks.svelte.js";
+import { DEV } from "esm-env";
+import { isElement } from "@floating-ui/utils/dom";
+import { error } from "../internal/log.js";
+import { box } from "../internal/box.svelte.js";
+import { extract } from "../internal/extract.js";
+import { noop } from "../internal/noop.js";
+
+interface UseFloatingRootContextOptions {
+	open?: MaybeGetter<boolean>;
+	onOpenChange?: OnOpenChange;
+	reference: MaybeGetter<Element | null>;
+	floating: MaybeGetter<HTMLElement | null>;
+	onReferenceChange?: (node: Element | null) => void;
+	onFloatingChange?: (node: HTMLElement | null) => void;
+	/**
+	 * The id to assign to the floating element.
+	 *
+	 * @default useId()
+	 */
+	floatingId?: MaybeGetter<string | undefined | null>;
+}
+
+interface FloatingRootContextOptions
+	extends ReturnType<typeof useFloatingRootContextOptions> {}
+
+function useFloatingRootContextOptions(opts: UseFloatingRootContextOptions) {
+	const open = box.with(() => extract(opts.open, false));
+	const floatingId = $derived(extract(opts.floatingId, useId()) ?? useId());
+	let _stableReference = $state<Element | null>(null);
+	let _stableFloating = $state<HTMLElement | null>(null);
+	const reference = box.with(
+		() => _stableReference,
+		(node) => {
+			_stableReference = node;
+			opts.onReferenceChange?.(node as Element | null);
+		},
+	);
+	const floating = box.with(
+		() => _stableFloating,
+		(node) => {
+			_stableFloating = node;
+			opts.onFloatingChange?.(node);
+		},
+	);
+
+	reference.current = extract(opts.reference, null);
+	floating.current = extract(opts.floating, null);
+
+	$effect.pre(() => {
+		reference.current = extract(opts.reference, null);
+	});
+
+	$effect.pre(() => {
+		floating.current = extract(opts.floating, null);
+	});
+
+	return {
+		open,
+		onOpenChange: opts.onOpenChange ?? noop,
+		onReferenceChange: opts.onReferenceChange ?? noop,
+		onFloatingChange: opts.onFloatingChange ?? noop,
+		reference,
+		floating,
+		get floatingId() {
+			return floatingId;
+		},
+	};
+}
+
+export interface FloatingRootContext<RT extends ReferenceType = ReferenceType>
+	extends ReturnType<typeof useFloatingRootContext<RT>> {}
+
+export function useFloatingRootContext<
+	RT extends ReferenceType = ReferenceType,
+>(_opts: UseFloatingRootContextOptions) {
+	const opts = useFloatingRootContextOptions(_opts);
+
+	if (DEV) {
+		if (opts.reference.current && !isElement(opts.reference.current)) {
+			error(
+				"Cannot pass a virtual element to the `elements.reference` option,",
+				"as it must be a real DOM element. Use `floating.setPositionReference()`",
+				"instead.",
+			);
+		}
+	}
+	const data: ContextData<RT> = $state({});
+	const events = createPubSub();
+	/** Whether the floating element is nested inside another floating element. */
+	const nested = useFloatingParentNodeId() != null;
+	/** Enables the user to specify a position reference after initialization. */
+	let positionReference = $state<ReferenceElement | null>(
+		opts.reference.current,
+	);
+	const reference = $derived(
+		(positionReference || opts.reference.current || null) as RT | null,
+	);
+
+	function onOpenChange(
+		open: boolean,
+		event?: Event,
+		reason?: OpenChangeReason,
+	) {
+		data.openEvent = open ? event : undefined;
+		events.emit("openchange", {
+			open,
+			event,
+			reason,
+			nested,
+		});
+		opts.onOpenChange?.(open, event, reason);
+	}
+
+	function setPositionReference(node: ReferenceElement | null) {
+		positionReference = node;
+	}
+
+	const elements = $state({
+		get reference() {
+			return reference;
+		},
+		get floating() {
+			return opts.floating.current;
+		},
+		get domReference() {
+			return opts.reference.current;
+		},
+	});
+
+	return {
+		get floatingId() {
+			return opts.floatingId;
+		},
+		data,
+		events,
+		get open() {
+			return opts.open.current;
+		},
+		elements,
+		onOpenChange,
+		setPositionReference,
+	};
+}
diff --git a/packages/floating-ui-svelte/src/hooks/use-floating.svelte.ts b/packages/floating-ui-svelte/src/hooks/use-floating.svelte.ts
index dfe3f1e0..a8db4116 100644
--- a/packages/floating-ui-svelte/src/hooks/use-floating.svelte.ts
+++ b/packages/floating-ui-svelte/src/hooks/use-floating.svelte.ts
@@ -1,401 +1,139 @@
+import { useFloatingTree } from "../components/floating-tree/hooks.svelte.js";
+import type { NarrowedElement, ReferenceType } from "../types.js";
 import {
-	type ComputePositionConfig,
-	type FloatingElement,
-	type Middleware,
-	type MiddlewareData,
-	type Placement,
-	type ReferenceElement,
-	type Strategy,
-	computePosition,
-} from "@floating-ui/dom";
-import { createPubSub } from "../internal/create-pub-sub.js";
-import { getDPR, roundByDPR } from "../internal/dpr.js";
-import { noop } from "../internal/noop.js";
-import { styleObjectToString } from "../internal/style-object-to-string.js";
-import type { OpenChangeReason } from "../types.js";
-import { useId } from "./use-id.js";
-
-interface FloatingElements {
-	/**
-	 * The reference element.
-	 */
-	reference?: ReferenceElement | null;
-
-	/**
-	 * The floating element.
-	 */
-	floating?: FloatingElement | null;
-}
-
-interface UseFloatingOptions {
-	/**
-	 * Represents the open/close state of the floating element.
-	 * @default true
-	 */
-	open?: boolean;
-
-	/**
-	 * Callback that is called whenever the open state changes.
-	 */
-	onOpenChange?: (
-		open: boolean,
-		event?: Event,
-		reason?: OpenChangeReason,
-	) => void;
-
-	/**
-	 * Where to place the floating element relative to its reference element.
-	 * @default 'bottom'
-	 */
-	placement?: Placement;
-
-	/**
-	 * The type of CSS position property to use.
-	 * @default 'absolute'
-	 */
-	strategy?: Strategy;
-
-	/**
-	 * These are plain objects that modify the positioning coordinates in some fashion, or provide useful data for the consumer to use.
-	 * @default []
-	 */
-	middleware?: Array<Middleware | undefined | null | false>;
-
-	/**
-	 * Whether to use `transform` instead of `top` and `left` styles to
-	 * position the floating element (`floatingStyles`).
-	 * @default true
-	 */
-	transform?: boolean;
-
-	/**
-	 * Object containing the floating and reference elements.
-	 * @default {}
-	 */
-	elements?: FloatingElements;
-
-	/**
-	 * Callback to handle mounting/unmounting of the elements.
-	 * @default undefined
-	 */
-	whileElementsMounted?: (
-		reference: ReferenceElement,
-		floating: FloatingElement,
-		update: () => void,
-	) => () => void;
-
-	/**
-	 * Unique node id when using `FloatingTree`.
-	 * @default undefined
-	 */
-	nodeId?: string;
-}
-
-interface UseFloatingData {
-	/**
-	 * The x-coordinate of the floating element.
-	 */
-	x: number;
-
-	/**
-	 * The y-coordinate of the floating element.
-	 */
-	y: number;
-
-	/**
-	 * The stateful placement, which can be different from the initial `placement` passed as options.
-	 */
+	type FloatingRootContext,
+	useFloatingRootContext,
+} from "./use-floating-root-context.svelte.js";
+import { isElement } from "@floating-ui/utils/dom";
+import {
+	useFloatingOptions,
+	type UseFloatingOptions,
+} from "./use-floating-options.svelte.js";
+import { usePosition } from "./use-position.svelte.js";
+import {
+	useFloatingContext,
+	type FloatingContextData,
+} from "./use-floating-context.svelte.js";
+import type { Placement } from "@floating-ui/utils";
+import type { Strategy } from "@floating-ui/utils";
+import type { MiddlewareData } from "@floating-ui/dom";
+
+export interface FloatingState<RT extends ReferenceType = ReferenceType> {
+	elements: {
+		domReference: HTMLElement | null;
+		reference: Element | null;
+		floating: HTMLElement | null;
+	};
 	placement: Placement;
-
-	/**
-	 * The stateful strategy, which can be different from the initial `strategy` passed as options.
-	 */
 	strategy: Strategy;
-
-	/**
-	 * Additional data from middleware.
-	 */
 	middlewareData: MiddlewareData;
-
-	/**
-	 * The boolean that let you know if the floating element has been positioned.
-	 */
 	isPositioned: boolean;
-}
-
-interface FloatingEvents {
-	// biome-ignore lint/suspicious/noExplicitAny: From the port
-	emit<T extends string>(event: T, data?: any): void;
-	// biome-ignore lint/suspicious/noExplicitAny: From the port
-	on(event: string, handler: (data: any) => void): void;
-	// biome-ignore lint/suspicious/noExplicitAny: From the port
-	off(event: string, handler: (data: any) => void): void;
-}
-
-interface ContextData {
-	/**
-	 * The latest even that caused the open state to change.
-	 */
-	openEvent?: Event;
-
-	/**
-	 * Arbitrary data produced and consumed by other hooks.
-	 */
-	[key: string]: unknown;
-}
-
-interface FloatingContext extends UseFloatingData {
-	/**
-	 * Represents the open/close state of the floating element.
-	 */
-	open: boolean;
-
-	/**
-	 * Callback that is called whenever the open state changes.
-	 */
-	onOpenChange(open: boolean, event?: Event, reason?: OpenChangeReason): void;
-
-	/**
-	 * Events for other hooks to consume.
-	 */
-	events: FloatingEvents;
-
-	/**
-	 * Arbitrary data produced and consumer by other hooks.
-	 */
-	data: ContextData;
-
-	/**
-	 * The id for the reference element
-	 */
-	nodeId: string | undefined;
-
-	/**
-	 * The id for the floating element
-	 */
-	floatingId: string;
-
-	/**
-	 * Object containing the floating and reference elements.
-	 */
-	elements: FloatingElements;
-}
-
-interface UseFloatingReturn extends UseFloatingData {
-	/**
-	 * Represents the open/close state of the floating element.
-	 */
-	readonly open: boolean;
-
-	/**
-	 * CSS styles to apply to the floating element to position it.
-	 */
-	readonly floatingStyles: string;
-
-	/**
-	 * The reference and floating elements.
-	 */
-	readonly elements: FloatingElements;
-
-	/**
-	 * Updates the floating element position.
-	 */
-	readonly update: () => Promise<void>;
-
-	/**
-	 * Additional context meant for other hooks to consume.
-	 */
-	readonly context: FloatingContext;
+	x: number;
+	y: number;
+	floatingStyles: string;
+	update: () => Promise<void>;
+	setPositionReference: (node: ReferenceType | null) => void;
+	context: FloatingContextData<RT>;
 }
 
 /**
- * Hook for managing floating elements.
+ * Provides data to position a floating element and context to add interactions.
  */
-function useFloating(options: UseFloatingOptions = {}): UseFloatingReturn {
-	const elements = $state(options.elements ?? {});
-	const {
-		placement = "bottom",
-		strategy = "absolute",
-		middleware = [],
-		transform = true,
-		open = true,
-		onOpenChange: unstableOnOpenChange = noop,
-		whileElementsMounted,
-		nodeId,
-	} = $derived(options);
-	const floatingStyles = $derived.by(() => {
-		const initialStyles = {
-			position: strategy,
-			left: "0px",
-			top: "0px",
-		};
-
-		if (!elements.floating) {
-			return styleObjectToString(initialStyles);
-		}
-
-		const x = roundByDPR(elements.floating, state.x);
-		const y = roundByDPR(elements.floating, state.y);
-
-		if (transform) {
-			return styleObjectToString({
-				...initialStyles,
-				transform: `translate(${x}px, ${y}px)`,
-				...(getDPR(elements.floating) >= 1.5 && { willChange: "transform" }),
-			});
-		}
-
-		return styleObjectToString({
-			position: strategy,
-			left: `${x}px`,
-			top: `${y}px`,
-		});
+export function useFloating<RT extends ReferenceType = ReferenceType>(
+	_opts: UseFloatingOptions<RT> = {},
+) {
+	const opts = useFloatingOptions(_opts);
+	const internalRootContext = useFloatingRootContext({
+		open: () => opts.open.current ?? true,
+		reference: () => opts.reference.current,
+		floating: () => opts.floating.current,
+		onOpenChange: opts.onOpenChange,
+		floatingId: () => opts.floatingId.current,
 	});
-
-	const events = createPubSub();
-	const data: ContextData = $state({});
-
-	const onOpenChange = (
-		open: boolean,
-		event?: Event,
-		reason?: OpenChangeReason,
-	) => {
-		data.openEvent = open ? event : undefined;
-		events.emit("openchange", { open, event, reason });
-		unstableOnOpenChange(open, event, reason);
-	};
-
-	const state: UseFloatingData = $state({
-		x: 0,
-		y: 0,
-		strategy,
-		placement,
-		middlewareData: {},
-		isPositioned: false,
-	});
-
-	const context: FloatingContext = $state({
-		data,
-		events,
-		elements,
-		onOpenChange,
-		floatingId: useId(),
-		get nodeId() {
-			return nodeId;
-		},
-		get x() {
-			return state.x;
-		},
-		get y() {
-			return state.y;
+	const rootContext = (opts.rootContext.current ??
+		internalRootContext) as unknown as FloatingRootContext<RT>;
+	const tree = useFloatingTree();
+	let positionReference = $state<ReferenceType | null>(null);
+	const position = usePosition<RT>(
+		opts,
+		rootContext,
+		() => positionReference as RT | null,
+	);
+	const derivedDomReference = $derived(
+		(rootContext.elements.domReference ||
+			opts.reference.current) as NarrowedElement<RT>,
+	);
+
+	const floatingState = {
+		elements: {
+			get domReference() {
+				return derivedDomReference as HTMLElement | null;
+			},
+			get reference() {
+				return position.referenceEl as Element | null;
+			},
+			set reference(node: Element | null) {
+				if (isElement(node) || node === null) {
+					opts.reference.current = node;
+				}
+			},
+			get floating() {
+				return opts.floating.current;
+			},
+			set floating(node: HTMLElement | null) {
+				opts.floating.current = node;
+			},
 		},
 		get placement() {
-			return state.placement;
+			return position.data.placement;
 		},
 		get strategy() {
-			return state.strategy;
+			return position.data.strategy;
 		},
 		get middlewareData() {
-			return state.middlewareData;
+			return position.data.middlewareData;
 		},
 		get isPositioned() {
-			return state.isPositioned;
+			return position.data.isPositioned;
 		},
-		get open() {
-			return open;
+		get x() {
+			return position.data.x;
+		},
+		get y() {
+			return position.data.y;
+		},
+		get floatingStyles() {
+			return position.floatingStyles;
+		},
+		update: position.update,
+		setPositionReference: (node: ReferenceType | null) => {
+			const computedPositionReference = isElement(node)
+				? {
+						getBoundingClientRect: () => node.getBoundingClientRect(),
+						contextElement: node,
+					}
+				: node;
+			positionReference = computedPositionReference;
 		},
-	});
-
-	const update = async () => {
-		if (!elements.floating || !elements.reference) {
-			return;
-		}
-
-		const config: ComputePositionConfig = {
-			placement,
-			strategy,
-			middleware,
-		};
-
-		const position = await computePosition(
-			elements.reference,
-			elements.floating,
-			config,
-		);
-
-		state.x = position.x;
-		state.y = position.y;
-		state.placement = position.placement;
-		state.strategy = position.strategy;
-		state.middlewareData = position.middlewareData;
-		state.isPositioned = true;
 	};
 
-	$effect.pre(() => {
-		if (!options.elements || !options.elements.reference) {
-			return;
-		}
-		elements.reference = options.elements.reference;
-	});
-
-	$effect.pre(() => {
-		if (!options.elements || !options.elements.floating) {
-			return;
-		}
-		elements.floating = options.elements.floating;
+	const context = useFloatingContext<RT>({
+		floatingState: floatingState,
+		floatingOptions: opts,
+		rootContext,
+		positionState: position,
 	});
 
-	$effect.pre(() => {
-		if (open || !state.isPositioned) {
-			return;
-		}
-
-		state.isPositioned = false;
-	});
+	Object.assign(floatingState, { context });
 
 	$effect.pre(() => {
-		if (!elements.floating || !elements.reference) {
-			return;
-		}
+		rootContext.data.floatingContext = context;
 
-		if (!whileElementsMounted) {
-			update();
-			return;
+		const node = tree?.nodes.find((node) => node.id === opts.nodeId.current);
+		if (node) {
+			node.context = context;
 		}
-
-		return whileElementsMounted(elements.reference, elements.floating, update);
 	});
 
-	return {
-		update,
-		context,
-		elements,
-		get x() {
-			return state.x;
-		},
-		get y() {
-			return state.y;
-		},
-		get placement() {
-			return state.placement;
-		},
-		get strategy() {
-			return state.strategy;
-		},
-		get middlewareData() {
-			return state.middlewareData;
-		},
-		get isPositioned() {
-			return state.isPositioned;
-		},
-		get open() {
-			return open;
-		},
-		get floatingStyles() {
-			return floatingStyles;
-		},
-	};
+	return floatingState as FloatingState<RT>;
 }
-
-export type { UseFloatingOptions, UseFloatingReturn, FloatingContext };
-export { useFloating };
diff --git a/packages/floating-ui-svelte/src/hooks/use-focus.svelte.ts b/packages/floating-ui-svelte/src/hooks/use-focus.svelte.ts
index a3a87d84..29286dc5 100644
--- a/packages/floating-ui-svelte/src/hooks/use-focus.svelte.ts
+++ b/packages/floating-ui-svelte/src/hooks/use-focus.svelte.ts
@@ -8,9 +8,12 @@ import {
 	isVirtualPointerEvent,
 } from "../internal/dom.js";
 import { isMac, isSafari } from "../internal/environment.js";
-import { isTypeableElement } from "../internal/is-typable-element.js";
-import type { OpenChangeReason } from "../types.js";
-import type { FloatingContext } from "./use-floating.svelte.js";
+import { isTypeableElement } from "../internal/is-typeable-element.js";
+import type { MaybeGetter, OpenChangeReason } from "../types.js";
+import { on } from "svelte/events";
+import { executeCallbacks } from "../internal/execute-callbacks.js";
+import { extract } from "../internal/extract.js";
+import type { FloatingContextData } from "./use-floating-context.svelte.js";
 
 interface UseFocusOptions {
 	/**
@@ -18,162 +21,153 @@ interface UseFocusOptions {
 	 * handlers.
 	 * @default true
 	 */
-	enabled?: boolean;
+	enabled?: MaybeGetter<boolean>;
 	/**
 	 * Whether the open state only changes if the focus event is considered
 	 * visible (`:focus-visible` CSS selector).
 	 * @default true
 	 */
-	visibleOnly?: boolean;
+	visibleOnly?: MaybeGetter<boolean>;
 }
 
-function useFocus(context: FloatingContext, options: UseFocusOptions = {}) {
-	const {
-		open,
-		onOpenChange,
-		events,
-		elements: { reference, floating },
-	} = $derived(context);
-
-	const { enabled = true, visibleOnly = true } = $derived(options);
-
+function useFocus(context: FloatingContextData, opts: UseFocusOptions = {}) {
+	const enabled = $derived(extract(opts.enabled, true));
+	const visibleOnly = $derived(extract(opts.visibleOnly, true));
 	let blockFocus = false;
 	let timeout = -1;
 	let keyboardModality = true;
 
-	$effect(() => {
-		if (!enabled) {
+	function onpointerdown(event: PointerEvent) {
+		if (isVirtualPointerEvent(event)) return;
+		keyboardModality = false;
+	}
+
+	function onmouseleave() {
+		blockFocus = false;
+	}
+
+	function onfocus(event: FocusEvent) {
+		if (blockFocus) {
 			return;
 		}
 
-		const win = getWindow(reference);
+		const target = getTarget(event);
+
+		if (visibleOnly && isElement(target)) {
+			try {
+				// Mac Safari unreliably matches `:focus-visible` on the reference
+				// if focus was outside the page initially - use the fallback
+				// instead.
+				if (isSafari() && isMac()) throw Error();
+				if (!target.matches(":focus-visible")) return;
+			} catch {
+				// Old browsers will throw an error when using `:focus-visible`.
+				if (!keyboardModality && !isTypeableElement(target)) {
+					return;
+				}
+			}
+		}
 
-		// If the reference was focused and the user left the tab/window, and the
-		// floating element was not open, the focus should be blocked when they
-		// return to the tab/window.
-		function onBlur() {
+		context.onOpenChange(true, event, "focus");
+	}
+
+	function onblur(event: FocusEvent) {
+		blockFocus = false;
+		const relatedTarget = event.relatedTarget;
+
+		// Hit the non-modal focus management portal guard. Focus will be
+		// moved into the floating element immediately after.
+		const movedToFocusGuard =
+			isElement(relatedTarget) &&
+			relatedTarget.hasAttribute(createAttribute("focus-guard")) &&
+			relatedTarget.getAttribute("data-type") === "outside";
+
+		// Wait for the window blur listener to fire.
+		timeout = window.setTimeout(() => {
+			const activeEl = activeElement(
+				isElement(context.elements.domReference)
+					? context.elements.domReference.ownerDocument
+					: document,
+			);
+
+			// Focus left the page, keep it open.
+			if (!relatedTarget && activeEl === context.elements.domReference) return;
+
+			// When focusing the reference element (e.g. regular click), then
+			// clicking into the floating element, prevent it from hiding.
+			// Note: it must be focusable, e.g. `tabindex="-1"`.
+			// We can not rely on relatedTarget to point to the correct element
+			// as it will only point to the shadow host of the newly focused element
+			// and not the element that actually has received focus if it is located
+			// inside a shadow root.
 			if (
-				!open &&
-				isHTMLElement(reference) &&
-				reference === activeElement(getDocument(reference))
+				contains(context.elements.floating, activeEl) ||
+				contains(context.elements.domReference, activeEl) ||
+				movedToFocusGuard
 			) {
-				blockFocus = true;
+				return;
 			}
-		}
 
-		function onKeyDown() {
-			keyboardModality = true;
+			context.onOpenChange(false, event, "focus");
+		});
+	}
+
+	// If the domReference was focused and the user left the tab/window, and the
+	// floating element was not open, the focus should be blocked when they
+	// return to the tab/window.
+	function handleBlur() {
+		if (
+			!context.open &&
+			isHTMLElement(context.elements.domReference) &&
+			context.elements.domReference ===
+				activeElement(getDocument(context.elements.domReference))
+		) {
+			blockFocus = true;
 		}
+	}
 
-		win.addEventListener("blur", onBlur);
-		win.addEventListener("keydown", onKeyDown, true);
-		return () => {
-			win.removeEventListener("blur", onBlur);
-			win.removeEventListener("keydown", onKeyDown, true);
-		};
-	});
+	function handleKeyDown() {
+		keyboardModality = true;
+	}
 
 	$effect(() => {
-		if (!enabled) {
-			return;
-		}
+		if (!enabled) return;
+		const win = getWindow(context.elements.domReference);
 
-		function onOpenChange({ reason }: { reason: OpenChangeReason }) {
-			if (reason === "reference-press" || reason === "escape-key") {
-				blockFocus = true;
-			}
+		return executeCallbacks(
+			on(win, "blur", handleBlur),
+			on(win, "keydown", handleKeyDown, { capture: true }),
+		);
+	});
+
+	function onOpenChange({ reason }: { reason: OpenChangeReason }) {
+		if (reason === "reference-press" || reason === "escape-key") {
+			blockFocus = true;
 		}
+	}
 
-		events.on("openchange", onOpenChange);
-		return () => {
-			events.off("openchange", onOpenChange);
-		};
+	$effect(() => {
+		if (!enabled) return;
+		return context.events.on("openchange", onOpenChange);
 	});
 
 	$effect(() => {
 		return () => {
-			clearTimeout(timeout);
+			window.clearTimeout(timeout);
 		};
 	});
 
+	const reference = $derived({
+		onpointerdown: onpointerdown,
+		onmouseleave: onmouseleave,
+		onfocus: onfocus,
+		onblur: onblur,
+	});
+
 	return {
 		get reference() {
-			if (!enabled) {
-				return {};
-			}
-			return {
-				onpointerdown: (event: PointerEvent) => {
-					if (isVirtualPointerEvent(event)) return;
-					keyboardModality = false;
-				},
-				onmouseleave() {
-					blockFocus = false;
-				},
-				onfocus: (event: FocusEvent) => {
-					if (blockFocus) {
-						return;
-					}
-
-					const target = getTarget(event);
-
-					if (visibleOnly && isElement(target)) {
-						try {
-							// Mac Safari unreliably matches `:focus-visible` on the reference
-							// if focus was outside the page initially - use the fallback
-							// instead.
-							if (isSafari() && isMac()) throw Error();
-							if (!target.matches(":focus-visible")) return;
-						} catch {
-							// Old browsers will throw an error when using `:focus-visible`.
-							if (!keyboardModality && !isTypeableElement(target)) {
-								return;
-							}
-						}
-					}
-
-					onOpenChange(true, event, "focus");
-				},
-				onblur: (event: FocusEvent) => {
-					blockFocus = false;
-					const relatedTarget = event.relatedTarget;
-
-					// Hit the non-modal focus management portal guard. Focus will be
-					// moved into the floating element immediately after.
-					const movedToFocusGuard =
-						isElement(relatedTarget) &&
-						relatedTarget.hasAttribute(createAttribute("focus-guard")) &&
-						relatedTarget.getAttribute("data-type") === "outside";
-
-					// Wait for the window blur listener to fire.
-					timeout = window.setTimeout(() => {
-						const activeEl = activeElement(
-							// @ts-expect-error - FIXME
-							reference ? reference.ownerDocument : document,
-						);
-
-						// Focus left the page, keep it open.
-						if (!relatedTarget && activeEl === reference) return;
-
-						// When focusing the reference element (e.g. regular click), then
-						// clicking into the floating element, prevent it from hiding.
-						// Note: it must be focusable, e.g. `tabindex="-1"`.
-						// We can not rely on relatedTarget to point to the correct element
-						// as it will only point to the shadow host of the newly focused element
-						// and not the element that actually has received focus if it is located
-						// inside a shadow root.
-						if (
-							contains(floating, activeEl) ||
-							// @ts-expect-error FIXME
-							contains(reference, activeEl) ||
-							movedToFocusGuard
-						) {
-							return;
-						}
-
-						onOpenChange(false, event, "focus");
-					});
-				},
-			};
+			if (!enabled) return {};
+			return reference;
 		},
 	};
 }
diff --git a/packages/floating-ui-svelte/src/hooks/use-hover.svelte.ts b/packages/floating-ui-svelte/src/hooks/use-hover.svelte.ts
index 48171e03..bd7e1418 100644
--- a/packages/floating-ui-svelte/src/hooks/use-hover.svelte.ts
+++ b/packages/floating-ui-svelte/src/hooks/use-hover.svelte.ts
@@ -4,11 +4,25 @@ import {
 	createAttribute,
 	getDocument,
 	isMouseLikePointerType,
+	isPointerType,
+	type PointerType,
 } from "../internal/dom.js";
 import { noop } from "../internal/noop.js";
-import type { OpenChangeReason } from "../internal/types.js";
-import type { FloatingContext } from "./use-floating.svelte.js";
+import type {
+	FloatingTreeType,
+	MaybeGetter,
+	OpenChangeReason,
+} from "../types.js";
+import {
+	useFloatingParentNodeId,
+	useFloatingTree,
+} from "../components/floating-tree/hooks.svelte.js";
+import { snapshotFloatingContext } from "../internal/snapshot.svelte.js";
+import { extract } from "../internal/extract.js";
 import type { ElementProps } from "./use-interactions.svelte.js";
+import { on } from "svelte/events";
+import { untrack } from "svelte";
+import type { FloatingContextData } from "./use-floating-context.svelte.js";
 
 interface DelayOptions {
 	/**
@@ -26,8 +40,9 @@ interface DelayOptions {
 
 interface HandleCloseFn {
 	(
-		context: FloatingContext & {
+		context: FloatingContextData & {
 			onClose: () => void;
+			tree?: FloatingTreeType | null;
 			leave?: boolean;
 		},
 	): (event: MouseEvent) => void;
@@ -41,31 +56,33 @@ interface UseHoverOptions {
 	 * Enables/disables the hook.
 	 * @default true
 	 */
-	enabled?: boolean;
+	enabled?: MaybeGetter<boolean>;
 
 	/**
 	 * Only allow pointers of type mouse to trigger the hover (thus excluding pens and touchscreens).
 	 * @default false
 	 */
-	mouseOnly?: boolean;
+	mouseOnly?: MaybeGetter<boolean>;
 
 	/**
 	 * Time in ms that will delay the change of the open state.
 	 * @default 0
 	 */
-	delay?: number | DelayOptions;
+	delay?: MaybeGetter<number | DelayOptions>;
 
 	/**
-	 * Time in ms that the pointer must rest on the reference element before the open state is set to true.
+	 * Time in ms that the pointer must rest on the reference element before the open state
+	 * is set to true.
 	 * @default 0
 	 */
-	restMs?: number;
+	restMs?: MaybeGetter<number>;
 
 	/**
-	 * Whether moving the pointer over the floating element will open it, without a regular hover event required.
+	 * Whether moving the pointer over the reference element will open its floating
+	 * element without a regular hover event required.
 	 * @default true
 	 */
-	move?: boolean;
+	move?: MaybeGetter<boolean>;
 
 	/**
 	 * Callback to handle the closing of the floating element.
@@ -76,341 +93,364 @@ interface UseHoverOptions {
 
 const safePolygonIdentifier = createAttribute("safe-polygon");
 
+/**
+ * Returns the delay value for the given prop.
+ */
 function getDelay(
-	value: UseHoverOptions["delay"],
+	value: number | DelayOptions,
 	prop: "open" | "close",
-	pointerType?: PointerEvent["pointerType"],
+	pointerType?: PointerType,
 ) {
-	if (pointerType && !isMouseLikePointerType(pointerType)) {
-		return 0;
-	}
-
-	if (typeof value === "number") {
-		return value;
-	}
-
+	if (pointerType && !isMouseLikePointerType(pointerType)) return 0;
+	if (typeof value === "number") return value;
 	return value?.[prop];
 }
 
-function useHover(
-	context: FloatingContext,
-	options: UseHoverOptions = {},
-): ElementProps {
-	const {
-		open,
-		onOpenChange,
-		data,
-		events,
-		elements: { reference, floating },
-	} = $derived(context);
-
-	const {
-		enabled = true,
-		mouseOnly = false,
-		delay = 0,
-		restMs = 0,
-		move = true,
-		handleClose = null,
-	} = $derived(options);
-
-	// const tree = useFloatingTree();
-	// const parentId = useFloatingParentNodeId();
-	let pointerType: string | undefined = undefined;
-	let timeout = -1;
-	let handler: ((event: MouseEvent) => void) | undefined = undefined;
-	let restTimeout = -1;
+function useHover(context: FloatingContextData, opts: UseHoverOptions = {}) {
+	const enabled = $derived(extract(opts.enabled, true));
+	const delay = $derived(extract(opts.delay, 0));
+	const handleClose = opts.handleClose ?? null;
+	const mouseOnly = $derived(extract(opts.mouseOnly, false));
+	const restMs = $derived(extract(opts.restMs, 0));
+	const move = $derived(extract(opts.move, true));
+	const tree = useFloatingTree();
+	const parentId = useFloatingParentNodeId();
+
+	let pointerType: PointerType | undefined;
+	let openChangeTimeout = -1;
+	let restOpenChangeTimeout = -1;
+	let restTimeoutPending = false;
+	let handler: ((e: MouseEvent) => void) | undefined = noop;
 	let blockMouseMove = true;
-	let performedPointerEventsMutation = false;
-	let unbindMouseMove = noop;
+	let mouseMoveListener = noop;
+	let clearPointerEvents = noop;
+
+	function cleanupPointerEvents() {
+		clearPointerEvents();
+		clearPointerEvents = noop;
+	}
+
+	function removeMouseMoveListener() {
+		mouseMoveListener();
+		mouseMoveListener = noop;
+	}
 
 	const isHoverOpen = $derived.by(() => {
-		const type = data.openEvent?.type;
+		const type = context.data.openEvent?.type;
 		return type?.includes("mouse") && type !== "mousedown";
 	});
 
 	const isClickLikeOpenEvent = $derived(
-		data.openEvent
-			? ["click", "mousedown"].includes(data.openEvent.type)
+		context.data.openEvent
+			? ["click", "mousedown"].includes(context.data.openEvent.type)
 			: false,
 	);
 
-	$effect(() => {
-		if (!enabled) {
-			return;
-		}
-
-		const onOpenChange = ({ open }: { open: boolean }) => {
-			if (!open) {
-				clearTimeout(timeout);
-				clearTimeout(restTimeout);
-				blockMouseMove = true;
-			}
-		};
+	function onOpenChange({ open }: { open: boolean }) {
+		if (open) return;
+		window.clearTimeout(openChangeTimeout);
+		window.clearTimeout(restOpenChangeTimeout);
+		blockMouseMove = true;
+		restTimeoutPending = false;
+	}
 
-		events.on("openchange", onOpenChange);
-		return () => {
-			events.off("openchange", onOpenChange);
-		};
+	$effect(() => {
+		if (!enabled) return;
+		return context.events.on("openchange", onOpenChange);
 	});
 
-	$effect(() => {
-		if (enabled || !handleClose || !open) {
-			return;
+	function htmlOnLeave(event: MouseEvent) {
+		if (isHoverOpen) {
+			context.onOpenChange(false, event, "hover");
 		}
+	}
 
-		const onLeave = (event: MouseEvent) => {
-			if (!isHoverOpen) {
-				return;
-			}
-			onOpenChange(false, event, "hover");
-		};
+	$effect(() => {
+		if (!enabled) return;
+		if (!handleClose) return;
+		if (!context.open) return;
 
-		const document = getDocument(floating);
-		document.addEventListener("mouseleave", onLeave);
-		return () => {
-			document.removeEventListener("mouseleave", onLeave);
-		};
+		const html = getDocument(context.elements.floating).documentElement;
+		return on(html, "mouseleave", htmlOnLeave);
 	});
 
-	const closeWithDelay = (
+	function closeWithDelay(
 		event: Event,
 		runElseBranch = true,
 		reason: OpenChangeReason = "hover",
-	) => {
+	) {
 		const closeDelay = getDelay(delay, "close", pointerType);
 		if (closeDelay && !handler) {
-			clearTimeout(timeout);
-			timeout = window.setTimeout(
-				() => onOpenChange(false, event, reason),
+			window.clearTimeout(openChangeTimeout);
+			openChangeTimeout = window.setTimeout(
+				() => context.onOpenChange(false, event, reason),
 				closeDelay,
 			);
 		} else if (runElseBranch) {
-			clearTimeout(timeout);
-			onOpenChange(false, event, reason);
+			clearTimeout(openChangeTimeout);
+			context.onOpenChange(false, event, reason);
 		}
-	};
+	}
 
-	const cleanupMouseMoveHandler = () => {
-		unbindMouseMove();
+	function cleanupMouseMoveHandler() {
+		removeMouseMoveListener();
 		handler = undefined;
-	};
+	}
+
+	function onReferenceMouseEnter(event: MouseEvent) {
+		window.clearTimeout(openChangeTimeout);
+		blockMouseMove = false;
+
+		const failedMouseOnlyCheck =
+			mouseOnly && !isMouseLikePointerType(pointerType);
+		const failedRestMsCheck = restMs > 0 && !getDelay(delay, "open");
+
+		if (failedMouseOnlyCheck || failedRestMsCheck) return;
+
+		const openDelay = getDelay(delay, "open", pointerType);
+
+		if (openDelay) {
+			// if there is an open delay, we set a timeout to open the floating element
+			// after the delay has passed
+			openChangeTimeout = window.setTimeout(() => {
+				if (!context.open) {
+					context.onOpenChange(true, event, "hover");
+				}
+			}, openDelay);
+		} else if (!context.open) {
+			// if no delay and the floating element is not open, we open it immediately
+			context.onOpenChange(true, event, "hover");
+		}
+	}
+
+	function onReferenceMouseLeave(event: MouseEvent) {
+		// if opened via a click-like event, we don't handle the mouseleave event
+		if (isClickLikeOpenEvent) return;
+
+		const doc = getDocument(context.elements.floating);
+
+		// clear the rest timeout and set pending to false
+		window.clearTimeout(restOpenChangeTimeout);
+		restTimeoutPending = false;
+
+		if (handleClose && context.data.floatingContext) {
+			// if not open already, we clear any open change timeouts that may
+			// be pending
+			if (!context.open) {
+				window.clearTimeout(openChangeTimeout);
+			}
+
+			handler = handleClose({
+				...snapshotFloatingContext(context.data.floatingContext).current,
+				tree,
+				x: event.clientX,
+				y: event.clientY,
+				onClose: () => {
+					cleanupPointerEvents();
+					cleanupMouseMoveHandler();
+					if (!isClickLikeOpenEvent) {
+						closeWithDelay(event, true, "safe-polygon");
+					}
+				},
+			});
+
+			const localHandler = handler;
+
+			// clean up any existing mousemove listeners
+			doc.addEventListener("mousemove", localHandler);
+			mouseMoveListener();
+			mouseMoveListener = () => {
+				doc.removeEventListener("mousemove", localHandler);
+			};
 
-	const clearPointerEvents = () => {
-		if (!performedPointerEventsMutation) {
 			return;
 		}
-		const body = getDocument(floating).body;
-		body.style.pointerEvents = "";
-		body.removeAttribute(safePolygonIdentifier);
-		performedPointerEventsMutation = false;
-	};
+
+		// Allow interactivity without `safePolygon` on touch devices. With a
+		// pointer, a short close delay is an alternative, so it should work
+		// consistently.
+		const shouldClose =
+			pointerType === "touch"
+				? !contains(
+						context.elements.floating,
+						event.relatedTarget as Element | null,
+					)
+				: true;
+
+		if (shouldClose) {
+			closeWithDelay(event);
+		}
+	}
+
+	$effect(() => {
+		if (!enabled) return;
+
+		if (isElement(context.elements.domReference) && move) {
+			return on(
+				context.elements.domReference,
+				"mousemove",
+				(e) => {
+					onReferenceMouseEnter(e);
+				},
+				{
+					once: true,
+				},
+			);
+		}
+	});
+
+	function disableBodyPointerEvents() {
+		const body = getDocument(context.elements.floating).body;
+		body.setAttribute(safePolygonIdentifier, "");
+		body.style.pointerEvents = "none";
+
+		return () => {
+			body.style.pointerEvents = "";
+			body.removeAttribute(safePolygonIdentifier);
+		};
+	}
 
 	// Block pointer-events of every element other than the reference and floating
 	// while the floating element is open and has a `handleClose` handler. Also
 	// handles nested floating elements.
 	// https://github.com/floating-ui/floating-ui/issues/1722
 	$effect(() => {
-		if (!enabled) {
+		if (
+			!enabled ||
+			!context.open ||
+			!handleClose?.__options.blockPointerEvents ||
+			!untrack(() => isHoverOpen)
+		) {
 			return;
 		}
 
-		if (open && handleClose?.__options.blockPointerEvents && isHoverOpen) {
-			const body = getDocument(floating).body;
-			body.setAttribute(safePolygonIdentifier, "");
-			body.style.pointerEvents = "none";
-			performedPointerEventsMutation = true;
+		const floatingEl = context.elements.floating;
+		const domReferenceEl = context.elements.domReference;
+		if (!isElement(domReferenceEl) || !floatingEl) return;
 
-			if (isElement(reference) && floating) {
-				const ref = reference as unknown as HTMLElement | SVGSVGElement;
+		const parentContext = tree?.nodes?.find(
+			(node) => node.id === parentId,
+		)?.context;
 
-				// const parentFloating = tree?.nodesRef.current.find((node) => node.id === parentId)?.context
-				// 	?.elements.floating;
+		if (parentContext) {
+			parentContext["~position"].setFloatingPointerEvents("inherit");
+		}
 
-				// if (parentFloating) {
-				// 	parentFloating.style.pointerEvents = '';
-				// }
+		clearPointerEvents = disableBodyPointerEvents();
+		domReferenceEl.style.pointerEvents = "auto";
 
-				ref.style.pointerEvents = "auto";
-				floating.style.pointerEvents = "auto";
+		context["~position"].setFloatingPointerEvents("auto");
+		const body = getDocument(context.elements.floating).body;
 
-				return () => {
-					ref.style.pointerEvents = "";
-					floating.style.pointerEvents = "";
-				};
-			}
-		}
+		return () => {
+			body.style.pointerEvents = "";
+			domReferenceEl.style.pointerEvents = "";
+			context["~position"].setFloatingPointerEvents(undefined);
+		};
 	});
 
 	$effect(() => {
-		if (!open) {
-			pointerType = undefined;
-			cleanupMouseMoveHandler();
-			clearPointerEvents();
-		}
+		if (context.open) return;
+		pointerType = undefined;
+		restTimeoutPending = false;
+		cleanupMouseMoveHandler();
+		cleanupPointerEvents();
 	});
 
 	$effect(() => {
+		[enabled, context.elements.domReference];
 		return () => {
 			cleanupMouseMoveHandler();
-			clearTimeout(timeout);
-			clearTimeout(restTimeout);
-			clearPointerEvents();
+			window.clearTimeout(openChangeTimeout);
+			window.clearTimeout(restOpenChangeTimeout);
+			cleanupPointerEvents();
 		};
 	});
 
-	return {
-		get reference() {
-			if (!enabled) {
-				return {};
-			}
-
-			const onmouseenter = (event: MouseEvent) => {
-				clearTimeout(timeout);
-				blockMouseMove = false;
-
-				if (
-					(mouseOnly && !isMouseLikePointerType(pointerType)) ||
-					(restMs > 0 && !getDelay(delay, "open"))
-				) {
-					return;
-				}
-
-				const openDelay = getDelay(delay, "open", pointerType);
-
-				if (openDelay) {
-					timeout = window.setTimeout(() => {
-						onOpenChange(true, event, "hover");
-					}, openDelay);
-				} else {
-					onOpenChange(true, event, "hover");
-				}
-			};
-			return {
-				onpointerdown: (event: PointerEvent) => {
-					pointerType = event.pointerType;
-				},
-				onpointerenter: (event: PointerEvent) => {
-					pointerType = event.pointerType;
-				},
-				onmouseenter,
-				onmousemove: (event: MouseEvent) => {
-					if (move) {
-						onmouseenter(event);
-					}
-					function handleMouseMove() {
-						if (!blockMouseMove) {
-							onOpenChange(true, event, "hover");
-						}
-					}
+	function handleReferenceMouseMove(event: MouseEvent) {
+		/**
+		 * if we aren't blocking the mousemove event and the floating element isn't open,
+		 * we open the floating element on mousemove via the reference.
+		 */
+		if (!blockMouseMove && !context.open) {
+			context.onOpenChange(true, event, "hover");
+		}
+	}
 
-					if (mouseOnly && !isMouseLikePointerType(pointerType)) {
-						return;
-					}
+	/**
+	 * Set the latest pointer type that triggered an event on the
+	 * reference element.
+	 */
+	function setPointerType(event: PointerEvent) {
+		pointerType = isPointerType(event.pointerType)
+			? event.pointerType
+			: undefined;
+	}
 
-					if (open || restMs === 0) {
-						return;
-					}
+	function isInsignificantMovement(event: MouseEvent) {
+		return (
+			restTimeoutPending && event.movementX ** 2 + event.movementY ** 2 < 2
+		);
+	}
 
-					clearTimeout(restTimeout);
+	function onReferenceMouseMove(event: MouseEvent) {
+		if (mouseOnly && !isMouseLikePointerType(pointerType)) return;
+		// if the floating element is open, or the rest timeout is 0, we don't
+		// do anything here.
+		if (context.open || restMs === 0) return;
+
+		// ignore insignificant mouse movements to account for tremors
+		if (isInsignificantMovement(event)) return;
+
+		// clear open change rest timeout
+		window.clearTimeout(restOpenChangeTimeout);
+
+		// if it is a touch event, we cut to the chase and handle the mousemove
+		if (pointerType === "touch") {
+			handleReferenceMouseMove(event);
+		} else {
+			// otherwise, we set a timeout to handle the mousemove event
+			// based on the restMs prop
+			restTimeoutPending = true;
+			restOpenChangeTimeout = window.setTimeout(() => {
+				handleReferenceMouseMove(event);
+			}, restMs);
+		}
+	}
 
-					if (pointerType === "touch") {
-						handleMouseMove();
-					} else {
-						restTimeout = window.setTimeout(handleMouseMove, restMs);
-					}
-				},
-				onmouseleave: (event: MouseEvent) => {
-					if (!isClickLikeOpenEvent) {
-						unbindMouseMove();
-
-						const doc = getDocument(floating);
-						clearTimeout(restTimeout);
-
-						if (handleClose) {
-							// Prevent clearing `onScrollMouseLeave` timeout.
-							if (!open) {
-								clearTimeout(timeout);
-							}
-
-							handler = handleClose({
-								...context,
-								// tree,
-								x: event.clientX,
-								y: event.clientY,
-								onClose() {
-									clearPointerEvents();
-									cleanupMouseMoveHandler();
-									closeWithDelay(event, true, "safe-polygon");
-								},
-							});
-
-							const localHandler = handler;
-
-							doc.addEventListener("mousemove", localHandler);
-							unbindMouseMove = () => {
-								doc.removeEventListener("mousemove", localHandler);
-							};
-
-							return;
-						}
-
-						// Allow interactivity without `safePolygon` on touch devices. With a
-						// pointer, a short close delay is an alternative, so it should work
-						// consistently.
-						const shouldClose =
-							pointerType === "touch"
-								? !contains(floating, event.relatedTarget as Element | null)
-								: true;
-						if (shouldClose) {
-							closeWithDelay(event);
-						}
-					}
+	const reference: ElementProps["reference"] = {
+		onpointerdown: setPointerType,
+		onpointerenter: setPointerType,
+		onmouseenter: onReferenceMouseEnter,
+		onmousemove: onReferenceMouseMove,
+		onmouseleave: onReferenceMouseLeave,
+	};
 
-					if (open && !isClickLikeOpenEvent) {
-						handleClose?.({
-							...context,
-							// tree,
-							x: event.clientX,
-							y: event.clientY,
-							onClose() {
-								clearPointerEvents();
-								cleanupMouseMoveHandler();
-								closeWithDelay(event);
-							},
-						})(event);
-					}
-				},
-			};
+	const floating: ElementProps["floating"] = {
+		onmouseenter: () => {
+			// when we enter the floating element, we clear any existing open change timeouts
+			// to prevent a close event from firing
+			window.clearTimeout(openChangeTimeout);
+		},
+		onmouseleave: (event) => {
+			// when we leave, if not opened via a click-like event, we close it.
+			if (!isClickLikeOpenEvent) {
+				closeWithDelay(event, false);
+			}
 		},
+	};
 
+	return {
+		get reference() {
+			if (!enabled) return {};
+			return reference;
+		},
 		get floating() {
-			if (!enabled) {
-				return {};
-			}
-			return {
-				onmouseenter() {
-					clearTimeout(timeout);
-				},
-				onmouseleave(event: MouseEvent) {
-					if (!isClickLikeOpenEvent) {
-						handleClose?.({
-							...context,
-							// tree,
-							x: event.clientX,
-							y: event.clientY,
-							onClose() {
-								clearPointerEvents();
-								cleanupMouseMoveHandler();
-								closeWithDelay(event);
-							},
-						})(event);
-					}
-					closeWithDelay(event, false);
-				},
-			};
+			if (!enabled) return {};
+			return floating;
 		},
 	};
 }
 
-export type { UseHoverOptions };
-export { useHover };
+export type { UseHoverOptions, HandleCloseFn };
+export { useHover, getDelay };
diff --git a/packages/floating-ui-svelte/src/hooks/use-interactions.svelte.ts b/packages/floating-ui-svelte/src/hooks/use-interactions.svelte.ts
index 9480354d..e280646c 100644
--- a/packages/floating-ui-svelte/src/hooks/use-interactions.svelte.ts
+++ b/packages/floating-ui-svelte/src/hooks/use-interactions.svelte.ts
@@ -1,4 +1,5 @@
 import type { HTMLAttributes } from "svelte/elements";
+import { FOCUSABLE_ATTRIBUTE } from "../internal/get-floating-focus-element.js";
 
 const ACTIVE_KEY = "active";
 const SELECTED_KEY = "selected";
@@ -10,21 +11,21 @@ interface ExtendedUserProps {
 
 interface ElementProps {
 	reference?: HTMLAttributes<Element>;
-	floating?: HTMLAttributes<Element>;
+	floating?: HTMLAttributes<HTMLElement>;
 	item?:
-		| HTMLAttributes<Element>
-		| ((props: ExtendedUserProps) => HTMLAttributes<Element>);
+		| HTMLAttributes<HTMLElement>
+		| ((props: ExtendedUserProps) => HTMLAttributes<HTMLElement>);
 }
 
 interface UseInteractionsReturn {
 	getReferenceProps: (
-		userProps?: HTMLAttributes<Element>,
+		userProps?: Record<string, unknown>,
 	) => Record<string, unknown>;
 	getFloatingProps: (
-		userProps?: HTMLAttributes<Element>,
+		userProps?: Record<string, unknown>,
 	) => Record<string, unknown>;
 	getItemProps: (
-		userProps?: Omit<HTMLAttributes<Element>, "selected" | "active"> &
+		userProps?: Omit<Record<string, unknown>, "selected" | "active"> &
 			ExtendedUserProps,
 	) => Record<string, unknown>;
 }
@@ -44,7 +45,10 @@ function mergeProps<Key extends keyof ElementProps>(
 	}
 
 	return {
-		...(elementKey === "floating" && { tabIndex: -1 }),
+		...(elementKey === "floating" && {
+			tabindex: -1,
+			[FOCUSABLE_ATTRIBUTE]: "",
+		}),
 		...domUserProps,
 		...propsList
 			.map((value) => {
@@ -56,9 +60,8 @@ function mergeProps<Key extends keyof ElementProps>(
 			})
 			.concat(userProps)
 			.reduce((acc: Record<string, unknown>, props) => {
-				if (!props) {
-					return acc;
-				}
+				if (!props) return acc;
+
 				for (const [key, value] of Object.entries(props)) {
 					if (isItem && [ACTIVE_KEY, SELECTED_KEY].includes(key)) {
 						continue;
@@ -87,28 +90,32 @@ function mergeProps<Key extends keyof ElementProps>(
 	};
 }
 
-function useInteractions(
-	propsList: Array<ElementProps> = [],
-): UseInteractionsReturn {
-	const getReferenceProps = $derived((userProps?: HTMLAttributes<Element>) => {
-		return mergeProps(userProps, propsList, "reference");
+class Interactions {
+	constructor(private readonly propsList: Array<ElementProps> = []) {}
+
+	getReferenceProps = $derived((userProps?: HTMLAttributes<Element>) => {
+		return mergeProps(userProps, this.propsList, "reference");
 	});
 
-	const getFloatingProps = $derived((userProps?: HTMLAttributes<Element>) => {
-		return mergeProps(userProps, propsList, "floating");
+	getFloatingProps = $derived((userProps?: HTMLAttributes<Element>) => {
+		return mergeProps(userProps, this.propsList, "floating");
 	});
 
-	const getItemProps = $derived(
+	getItemProps = $derived(
 		(
 			userProps?: Omit<HTMLAttributes<Element>, "selected" | "active"> &
 				ExtendedUserProps,
 		) => {
-			return mergeProps(userProps, propsList, "item");
+			return mergeProps(userProps, this.propsList, "item");
 		},
 	);
+}
 
-	return { getReferenceProps, getFloatingProps, getItemProps };
+function useInteractions(
+	propsList: Array<ElementProps> = [],
+): UseInteractionsReturn {
+	return new Interactions(propsList);
 }
 
 export type { UseInteractionsReturn, ElementProps, ExtendedUserProps };
-export { useInteractions };
+export { useInteractions, Interactions };
diff --git a/packages/floating-ui-svelte/src/hooks/use-list-navigation.svelte.ts b/packages/floating-ui-svelte/src/hooks/use-list-navigation.svelte.ts
new file mode 100644
index 00000000..70d88bce
--- /dev/null
+++ b/packages/floating-ui-svelte/src/hooks/use-list-navigation.svelte.ts
@@ -0,0 +1,935 @@
+import { DEV } from "esm-env";
+import { extract } from "../internal/extract.js";
+import type { Boxed, Dimensions, MaybeGetter } from "../types.js";
+import { warn } from "../internal/log.js";
+import { getFloatingFocusElement } from "../internal/get-floating-focus-element.js";
+import {
+	useFloatingParentNodeId,
+	useFloatingTree,
+} from "../components/floating-tree/hooks.svelte.js";
+import { isTypeableCombobox } from "../internal/is-typeable-element.js";
+import { enqueueFocus } from "../internal/enqueue-focus.js";
+import type {
+	FocusEventHandler,
+	MouseEventHandler,
+	PointerEventHandler,
+} from "svelte/elements";
+import type { ElementProps } from "./use-interactions.svelte.js";
+import { watch } from "../internal/watch.svelte.js";
+import {
+	ARROW_DOWN,
+	ARROW_LEFT,
+	ARROW_RIGHT,
+	ARROW_UP,
+	buildCellMap,
+	findNonDisabledIndex,
+	getCellIndexOfCorner,
+	getCellIndices,
+	getGridNavigatedIndex,
+	getMaxIndex,
+	getMinIndex,
+	isDisabled,
+	isIndexOutOfBounds,
+} from "../internal/composite.js";
+import {
+	activeElement,
+	contains,
+	getDocument,
+	isVirtualClick,
+	isVirtualPointerEvent,
+	stopEvent,
+} from "../internal/dom.js";
+import { isElement, isHTMLElement } from "@floating-ui/utils/dom";
+import { getDeepestNode } from "../internal/get-children.js";
+import type { FloatingContextData } from "./use-floating-context.svelte.js";
+import type { FloatingRootContext } from "./use-floating-root-context.svelte.js";
+
+interface UseListNavigationOptions {
+	/**
+	 * A ref that holds an array of list items.
+	 * @default empty list
+	 */
+	listRef: MaybeGetter<Array<HTMLElement | null>>;
+	/**
+	 * The index of the currently active (focused or highlighted) item, which may
+	 * or may not be selected.
+	 * @default null
+	 */
+	activeIndex: MaybeGetter<number | null>;
+	/**
+	 * A callback that is called when the user navigates to a new active item,
+	 * passed in a new `activeIndex`.
+	 */
+	onNavigate?: (activeIndex: number | null) => void;
+	/**
+	 * Whether the Hook is enabled, including all internal Effects and event
+	 * handlers.
+	 * @default true
+	 */
+	enabled?: MaybeGetter<boolean>;
+	/**
+	 * The currently selected item index, which may or may not be active.
+	 * @default null
+	 */
+	selectedIndex?: MaybeGetter<number | null>;
+	/**
+	 * Whether to focus the item upon opening the floating element. 'auto' infers
+	 * what to do based on the input type (keyboard vs. pointer), while a boolean
+	 * value will force the value.
+	 * @default 'auto'
+	 */
+	focusItemOnOpen?: MaybeGetter<boolean | "auto">;
+	/**
+	 * Whether hovering an item synchronizes the focus.
+	 * @default true
+	 */
+	focusItemOnHover?: MaybeGetter<boolean>;
+	/**
+	 * Whether pressing an arrow key on the navigation’s main axis opens the
+	 * floating element.
+	 * @default true
+	 */
+	openOnArrowKeyDown?: MaybeGetter<boolean>;
+	/**
+	 * By default elements with either a `disabled` or `aria-disabled` attribute
+	 * are skipped in the list navigation — however, this requires the items to
+	 * be rendered.
+	 * This prop allows you to manually specify indices which should be disabled,
+	 * overriding the default logic.
+	 * For Windows-style select menus, where the menu does not open when
+	 * navigating via arrow keys, specify an empty array.
+	 * @default undefined
+	 */
+	disabledIndices?: MaybeGetter<Array<number>>;
+	/**
+	 * Determines whether focus can escape the list, such that nothing is selected
+	 * after navigating beyond the boundary of the list. In some
+	 * autocomplete/combobox components, this may be desired, as screen
+	 * readers will return to the input.
+	 * `loop` must be `true`.
+	 * @default false
+	 */
+	allowEscape?: MaybeGetter<boolean>;
+	/**
+	 * Determines whether focus should loop around when navigating past the first
+	 * or last item.
+	 * @default false
+	 */
+	loop?: MaybeGetter<boolean>;
+	/**
+	 * If the list is nested within another one (e.g. a nested submenu), the
+	 * navigation semantics change.
+	 * @default false
+	 */
+	nested?: MaybeGetter<boolean>;
+	/**
+	 * Whether the direction of the floating element’s navigation is in RTL
+	 * layout.
+	 * @default false
+	 */
+	rtl?: MaybeGetter<boolean>;
+	/**
+	 * Whether the focus is virtual (using `aria-activedescendant`).
+	 * Use this if you need focus to remain on the reference element
+	 * (such as an input), but allow arrow keys to navigate list items.
+	 * This is common in autocomplete listbox components.
+	 * Your virtually-focused list items must have a unique `id` set on them.
+	 * If you’re using a component role with the `useRole()` Hook, then an `id` is
+	 * generated automatically.
+	 * @default false
+	 */
+	virtual?: MaybeGetter<boolean>;
+	/**
+	 * The orientation in which navigation occurs.
+	 * @default 'vertical'
+	 */
+	orientation?: MaybeGetter<"vertical" | "horizontal" | "both">;
+	/**
+	 * Specifies how many columns the list has (i.e., it’s a grid). Use an
+	 * orientation of 'horizontal' (e.g. for an emoji picker/date picker, where
+	 * pressing ArrowRight or ArrowLeft can change rows), or 'both' (where the
+	 * current row cannot be escaped with ArrowRight or ArrowLeft, only ArrowUp
+	 * and ArrowDown).
+	 * @default 1
+	 */
+	cols?: MaybeGetter<number>;
+	/**
+	 * Whether to scroll the active item into view when navigating. The default
+	 * value uses nearest options.
+	 */
+	scrollItemIntoView?: MaybeGetter<boolean | ScrollIntoViewOptions>;
+	/**
+	 * When using virtual focus management, this holds a ref to the
+	 * virtually-focused item. This allows nested virtual navigation to be
+	 * enabled, and lets you know when a nested element is virtually focused from
+	 * the root reference handling the events. Requires `FloatingTree` to be
+	 * setup.
+	 */
+	virtualItemRef?: Boxed<HTMLElement | null>;
+	/**
+	 * Only for `cols > 1`, specify sizes for grid items.
+	 * `{ width: 2, height: 2 }` means an item is 2 columns wide and 2 rows tall.
+	 */
+	itemSizes?: MaybeGetter<Dimensions[]>;
+	/**
+	 * Only relevant for `cols > 1` and items with different sizes, specify if
+	 * the grid is dense (as defined in the CSS spec for `grid-auto-flow`).
+	 * @default false
+	 */
+	dense?: MaybeGetter<boolean>;
+}
+
+function useListNavigation(
+	context: FloatingContextData | FloatingRootContext,
+	opts: UseListNavigationOptions,
+) {
+	const { virtualItemRef, onNavigate: onNavigateProp } = opts;
+	const listRef = $derived(extract(opts.listRef));
+	const selectedIndex = $derived(extract(opts.selectedIndex, null));
+	const activeIndex = $derived(extract(opts.activeIndex, null));
+	const enabled = $derived(extract(opts.enabled, true));
+	const allowEscape = $derived(extract(opts.allowEscape, false));
+	const loop = $derived(extract(opts.loop, false));
+	const nested = $derived(extract(opts.nested, false));
+	const rtl = $derived(extract(opts.rtl, false));
+	const virtual = $derived(extract(opts.virtual, false));
+	const focusItemOnOpenProp = $derived(extract(opts.focusItemOnOpen, "auto"));
+	const focusItemOnHover = $derived(extract(opts.focusItemOnHover, true));
+	const openOnArrowKeyDown = $derived(extract(opts.openOnArrowKeyDown, true));
+	const disabledIndices = $derived(extract(opts.disabledIndices, undefined));
+	const orientation = $derived(extract(opts.orientation, "vertical"));
+	const cols = $derived(extract(opts.cols, 1));
+	const scrollItemIntoView = $derived(extract(opts.scrollItemIntoView, true));
+	const itemSizes = $derived(extract(opts.itemSizes));
+	const dense = $derived(extract(opts.dense, false));
+	const floatingFocusElement = $derived(
+		getFloatingFocusElement(context.elements.floating),
+	);
+	const parentId = useFloatingParentNodeId();
+	const tree = useFloatingTree();
+	const typeableComboboxReference = $derived(
+		isTypeableCombobox(context.elements.domReference),
+	);
+
+	const hasActiveIndex = $derived(activeIndex != null);
+
+	const ariaActiveDescendantProp = $derived.by(() => {
+		if (virtual && context.open && hasActiveIndex) {
+			return {
+				"aria-activedescendant": virtualId || activeId,
+			};
+		}
+		return {};
+	});
+
+	let index = $state(selectedIndex ?? -1);
+	let key: string | null = null;
+	let isPointerModality = true;
+	let forceSyncFocus = false;
+	let forceScrollIntoView = false;
+	let activeId = $state<string | undefined>();
+	let virtualId = $state<string | undefined>();
+	let mounted = !!context.elements.floating;
+	let focusItemOnOpen = $state(focusItemOnOpenProp);
+
+	const onNavigate = () => {
+		onNavigateProp?.(index === -1 ? null : index);
+	};
+
+	if (DEV) {
+		if (allowEscape) {
+			if (!loop) {
+				warn("`useListNavigation` looping must be enabled to allow escaping");
+			}
+
+			if (!virtual) {
+				warn("`useListNavigation` must be virtual to allow escaping");
+			}
+		}
+
+		if (orientation === "vertical" && cols > 1) {
+			warn(
+				"In grid list navigation mode (`cols` > 1), the `orientation` should",
+				'be either "horizontal" or "both".',
+			);
+		}
+	}
+
+	// Sync `selectedIndex` to be the `activeIndex` upon opening the floating
+	// element. Also, reset `activeIndex` upon closing the floating element.
+	watch.pre(
+		[
+			() => enabled,
+			() => context.open,
+			() => context.elements.floating,
+			() => selectedIndex,
+		],
+		(_, [__, ___, prevFloating]) => {
+			if (!enabled) return;
+			const prevMounted = !!prevFloating;
+			if (context.open && context.elements.floating) {
+				if (focusItemOnOpen && selectedIndex != null) {
+					// Regardless of the pointer modality, we want to ensure the selected
+					// item comes into view when the floating element is opened.
+					forceScrollIntoView = true;
+					index = selectedIndex;
+					onNavigate();
+				}
+			} else if (prevMounted) {
+				index = -1;
+				onNavigate();
+			}
+		},
+	);
+
+	// Sync `activeIndex` to be the focused item while the floating element is
+	// open.
+	watch.pre(
+		[
+			() => enabled,
+			() => context.open,
+			() => context.elements.floating,
+			() => activeIndex,
+			() => selectedIndex,
+			() => nested,
+			() => $state.snapshot(listRef),
+			() => orientation,
+			() => rtl,
+			() => disabledIndices,
+		],
+		(_, [__, prevOpen, prevFloating]) => {
+			const prevMounted = !!prevFloating;
+			if (!enabled) return;
+			if (!context.open) return;
+			if (!context.elements.floating) return;
+
+			if (activeIndex == null) {
+				forceSyncFocus = false;
+
+				if (selectedIndex != null) {
+					return;
+				}
+
+				// Reset while the floating element was open (e.g. the list changed).
+				if (prevMounted) {
+					index = -1;
+					focusItem();
+				}
+
+				// Initial sync.
+				if (
+					(!prevOpen || !prevMounted) &&
+					focusItemOnOpen &&
+					(key != null || (focusItemOnOpen === true && key == null))
+				) {
+					let runs = 0;
+					const waitForListPopulated = () => {
+						if (listRef[0] == null) {
+							// Avoid letting the browser paint if possible on the first try,
+							// otherwise use rAF. Don't try more than twice, since something
+							// is wrong otherwise.
+							if (runs < 2) {
+								const scheduler = runs ? requestAnimationFrame : queueMicrotask;
+								scheduler(waitForListPopulated);
+							}
+							runs++;
+						} else {
+							index =
+								key == null ||
+								isMainOrientationToEndKey(key, orientation, rtl) ||
+								nested
+									? getMinIndex(listRef, disabledIndices)
+									: getMaxIndex(listRef, disabledIndices);
+							key = null;
+							onNavigate();
+						}
+					};
+
+					waitForListPopulated();
+				}
+			} else if (!isIndexOutOfBounds(listRef, activeIndex)) {
+				index = activeIndex;
+				focusItem();
+				forceScrollIntoView = false;
+			}
+		},
+	);
+
+	// Ensure the parent floating element has focus when a nested child closes
+	// to allow arrow key navigation to work after the pointer leaves the child.
+
+	$effect.pre(() => {
+		if (!enabled || context.elements.floating || !tree || virtual || !mounted)
+			return;
+
+		const nodes = tree.nodes;
+		const parent = nodes.find((node) => node.id === parentId)?.context?.elements
+			.floating;
+		const activeEl = activeElement(getDocument(context.elements.floating));
+		const treeContainsActiveEl = nodes.some(
+			(node) =>
+				node.context && contains(node.context.elements.floating, activeEl),
+		);
+
+		if (parent && !treeContainsActiveEl && isPointerModality) {
+			parent.focus({ preventScroll: true });
+		}
+	});
+
+	watch.pre(
+		[() => enabled, () => virtual, () => virtualItemRef?.current],
+		() => {
+			if (!enabled) return;
+			if (!tree) return;
+			if (!virtual) return;
+			if (parentId) return;
+
+			const handleVirtualFocus = (item: HTMLElement) => {
+				virtualId = item.id;
+				if (virtualItemRef) {
+					virtualItemRef.current = item;
+				}
+			};
+
+			tree.events.on("virtualfocus", handleVirtualFocus);
+
+			return () => {
+				tree.events.off("virtualfocus", handleVirtualFocus);
+			};
+		},
+	);
+
+	$effect.pre(() => {
+		mounted = !!context.elements.floating;
+	});
+
+	$effect.pre(() => {
+		focusItemOnOpen = focusItemOnOpenProp;
+	});
+
+	function focusItem() {
+		const runFocus = (item: HTMLElement) => {
+			if (virtual) {
+				activeId = item.id;
+				tree?.events.emit("virtualfocus", item);
+				if (virtualItemRef) {
+					virtualItemRef.current = item;
+				}
+			} else {
+				enqueueFocus(item, {
+					sync: forceSyncFocus,
+					preventScroll: true,
+				});
+			}
+		};
+
+		const initialItem = listRef[index];
+
+		if (initialItem) {
+			runFocus(initialItem);
+		}
+
+		const scheduler = forceSyncFocus
+			? (v: () => void) => v()
+			: requestAnimationFrame;
+
+		scheduler(() => {
+			const waitedItem = listRef[index] || initialItem;
+
+			if (!waitedItem) return;
+
+			if (!initialItem) {
+				runFocus(waitedItem);
+			}
+
+			const scrollIntoViewOptions = scrollItemIntoView;
+			const shouldScrollIntoView =
+				scrollIntoViewOptions &&
+				item &&
+				(forceScrollIntoView || !isPointerModality);
+
+			if (shouldScrollIntoView) {
+				// JSDOM doesn't support `.scrollIntoView()` but it's widely supported
+				// by all browsers.
+				waitedItem.scrollIntoView?.(
+					typeof scrollIntoViewOptions === "boolean"
+						? { block: "nearest", inline: "nearest" }
+						: scrollIntoViewOptions,
+				);
+			}
+		});
+	}
+
+	const syncCurrentTarget = (currentTarget: HTMLElement | null) => {
+		if (!context.open) return;
+		const localIndex = listRef.indexOf(currentTarget);
+		if (localIndex !== -1 && index !== localIndex) {
+			index = localIndex;
+			onNavigate();
+		}
+	};
+
+	const itemOnFocus: FocusEventHandler<HTMLElement> = ({ currentTarget }) => {
+		forceSyncFocus = true;
+		syncCurrentTarget(currentTarget);
+	};
+
+	const itemOnClick: MouseEventHandler<HTMLElement> = ({ currentTarget }) =>
+		currentTarget.focus({ preventScroll: true }); // safari
+
+	const itemOnMouseMove: MouseEventHandler<HTMLElement> = ({
+		currentTarget,
+	}) => {
+		forceSyncFocus = true;
+		forceScrollIntoView = false;
+		syncCurrentTarget(currentTarget);
+	};
+
+	const itemOnPointerLeave: PointerEventHandler<HTMLElement> = ({
+		pointerType,
+	}) => {
+		if (!isPointerModality || pointerType === "touch") return;
+
+		forceSyncFocus = true;
+		index = -1;
+		onNavigate();
+
+		if (!virtual) {
+			floatingFocusElement?.focus({ preventScroll: true });
+		}
+	};
+
+	const item: ElementProps["item"] = $derived({
+		onfocus: itemOnFocus,
+		onclick: itemOnClick,
+		...(focusItemOnHover && {
+			onmousemove: itemOnMouseMove,
+			onpointerleave: itemOnPointerLeave,
+		}),
+	});
+
+	const commonOnKeyDown = (event: KeyboardEvent) => {
+		isPointerModality = true;
+		forceSyncFocus = true;
+
+		// When composing a character, Chrome fires ArrowDown twice. Firefox/Safari
+		// don't appear to suffer from this. `event.isComposing` is avoided due to
+		// Safari not supporting it properly (although it's not needed in the first
+		// place for Safari, just avoiding any possible issues).
+		if (event.which === 229) return;
+
+		// If the floating element is animating out, ignore navigation. Otherwise,
+		// the `activeIndex` gets set to 0 despite not being open so the next time
+		// the user ArrowDowns, the first item won't be focused.
+		if (!context.open && event.currentTarget === floatingFocusElement) return;
+
+		if (nested && isCrossOrientationCloseKey(event.key, orientation, rtl)) {
+			stopEvent(event);
+			context.onOpenChange(false, event, "list-navigation");
+
+			if (isHTMLElement(context.elements.domReference)) {
+				if (virtual) {
+					tree?.events.emit("virtualfocus", context.elements.domReference);
+				} else {
+					context.elements.domReference.focus();
+				}
+			}
+
+			return;
+		}
+
+		const currentIndex = index;
+		const filteredListRef = listRef.filter((item) => item !== null);
+		const minIndex = getMinIndex(filteredListRef, disabledIndices);
+		const maxIndex = getMaxIndex(filteredListRef, disabledIndices);
+
+		if (!typeableComboboxReference) {
+			if (event.key === "Home") {
+				stopEvent(event);
+				index = minIndex;
+				onNavigate();
+			}
+
+			if (event.key === "End") {
+				stopEvent(event);
+				index = maxIndex;
+				onNavigate();
+			}
+		}
+
+		// Grid navigation.
+		if (cols > 1) {
+			const sizes =
+				itemSizes ||
+				Array.from({ length: filteredListRef.length }, () => ({
+					width: 1,
+					height: 1,
+				}));
+			// To calculate movements on the grid, we use hypothetical cell indices
+			// as if every item was 1x1, then convert back to real indices.
+			const cellMap = buildCellMap(sizes, cols, dense);
+			const minGridIndex = cellMap.findIndex(
+				(index) =>
+					index != null && !isDisabled(filteredListRef, index, disabledIndices),
+			);
+			// last enabled index
+			const maxGridIndex = cellMap.reduce(
+				(foundIndex: number, index, cellIndex) =>
+					index != null && !isDisabled(filteredListRef, index, disabledIndices)
+						? cellIndex
+						: foundIndex,
+				-1,
+			);
+
+			const localIndex =
+				cellMap[
+					getGridNavigatedIndex(
+						cellMap.map((itemIndex) =>
+							itemIndex != null ? filteredListRef[itemIndex] : null,
+						),
+						{
+							event,
+							orientation,
+							loop,
+							rtl,
+							cols,
+							// treat undefined (empty grid spaces) as disabled indices so we
+							// don't end up in them
+							disabledIndices: getCellIndices(
+								[
+									...(disabledIndices ||
+										filteredListRef.map((_, index) =>
+											isDisabled(filteredListRef, index) ? index : undefined,
+										)),
+									undefined,
+								],
+								cellMap,
+							),
+							minIndex: minGridIndex,
+							maxIndex: maxGridIndex,
+							prevIndex: getCellIndexOfCorner(
+								index > maxIndex ? minIndex : index,
+								sizes,
+								cellMap,
+								cols,
+								// use a corner matching the edge closest to the direction
+								// we're moving in so we don't end up in the same item. Prefer
+								// top/left over bottom/right.
+								event.key === ARROW_DOWN
+									? "bl"
+									: event.key === (rtl ? ARROW_LEFT : ARROW_RIGHT)
+										? "tr"
+										: "tl",
+							),
+							stopEvent: true,
+						},
+					)
+				];
+
+			if (localIndex != null) {
+				index = localIndex;
+				onNavigate();
+			}
+
+			if (orientation === "both") return;
+		}
+
+		if (isMainOrientationKey(event.key, orientation)) {
+			stopEvent(event);
+
+			// Reset the index if no item is focused.
+			if (
+				context.open &&
+				!virtual &&
+				isElement(event.currentTarget) &&
+				activeElement(event.currentTarget.ownerDocument) === event.currentTarget
+			) {
+				index = isMainOrientationToEndKey(event.key, orientation, rtl)
+					? minIndex
+					: maxIndex;
+				onNavigate();
+				return;
+			}
+
+			if (isMainOrientationToEndKey(event.key, orientation, rtl)) {
+				if (loop) {
+					index =
+						currentIndex >= maxIndex
+							? allowEscape && currentIndex !== filteredListRef.length
+								? -1
+								: minIndex
+							: findNonDisabledIndex(filteredListRef, {
+									startingIndex: currentIndex,
+									disabledIndices: disabledIndices,
+								});
+				} else {
+					index = Math.min(
+						maxIndex,
+						findNonDisabledIndex(filteredListRef, {
+							startingIndex: currentIndex,
+							disabledIndices: disabledIndices,
+						}),
+					);
+				}
+			} else {
+				if (loop) {
+					index =
+						currentIndex <= minIndex
+							? allowEscape && currentIndex !== -1
+								? filteredListRef.length
+								: maxIndex
+							: findNonDisabledIndex(filteredListRef, {
+									startingIndex: currentIndex,
+									decrement: true,
+									disabledIndices: disabledIndices,
+								});
+				} else {
+					index = Math.max(
+						minIndex,
+						findNonDisabledIndex(filteredListRef, {
+							startingIndex: currentIndex,
+							decrement: true,
+							disabledIndices: disabledIndices,
+						}),
+					);
+				}
+			}
+
+			if (isIndexOutOfBounds(filteredListRef, index)) {
+				index = -1;
+			}
+
+			onNavigate();
+		}
+	};
+
+	const floatingOnPointerMove: PointerEventHandler<HTMLElement> = () => {
+		isPointerModality = true;
+	};
+
+	const floating: ElementProps["floating"] = $derived({
+		"aria-orientation": orientation === "both" ? undefined : orientation,
+		...(!typeableComboboxReference ? ariaActiveDescendantProp : {}),
+		onkeydown: commonOnKeyDown,
+		onpointermove: floatingOnPointerMove,
+	});
+
+	const checkVirtualMouse = (event: MouseEvent) => {
+		if (focusItemOnOpenProp === "auto" && isVirtualClick(event)) {
+			focusItemOnOpen = true;
+		}
+	};
+
+	const checkVirtualPointer = (event: PointerEvent) => {
+		// `pointerdown` fires first, reset the state then perform the checks.
+		focusItemOnOpen = focusItemOnOpenProp;
+		if (focusItemOnOpenProp === "auto" && isVirtualPointerEvent(event)) {
+			focusItemOnOpen = true;
+		}
+	};
+
+	const referenceOnKeyDown = (event: KeyboardEvent) => {
+		isPointerModality = false;
+		const isOpen = context.open;
+
+		const isArrowKey = event.key.startsWith("Arrow");
+		const isHomeOrEndKey = ["Home", "End"].includes(event.key);
+		const isMoveKey = isArrowKey || isHomeOrEndKey;
+		const isCrossOpenKey = isCrossOrientationOpenKey(
+			event.key,
+			orientation,
+			rtl,
+		);
+		const isCrossCloseKey = isCrossOrientationCloseKey(
+			event.key,
+			orientation,
+			rtl,
+		);
+		const isMainKey = isMainOrientationKey(event.key, orientation);
+		const isNavigationKey =
+			(nested ? isCrossOpenKey : isMainKey) ||
+			event.key === "Enter" ||
+			event.key.trim() === "";
+
+		if (virtual && isOpen) {
+			const rootNode = tree?.nodes.find((node) => node.parentId == null);
+			const deepestNode =
+				tree && rootNode ? getDeepestNode(tree.nodes, rootNode.id) : null;
+
+			if (isMoveKey && deepestNode && virtualItemRef) {
+				const eventObject = new KeyboardEvent("keydown", {
+					key: event.key,
+					bubbles: true,
+				});
+
+				if (isCrossOpenKey || isCrossCloseKey) {
+					const isCurrentTarget =
+						deepestNode.context?.elements.domReference === event.currentTarget;
+					const dispatchItem =
+						isCrossCloseKey && !isCurrentTarget
+							? deepestNode.context?.elements.domReference
+							: isCrossOpenKey
+								? listRef.find((item) => item?.id === activeId)
+								: null;
+
+					if (dispatchItem) {
+						stopEvent(event);
+						dispatchItem.dispatchEvent(eventObject);
+						virtualId = undefined;
+					}
+				}
+
+				if ((isMainKey || isHomeOrEndKey) && deepestNode.context) {
+					if (
+						deepestNode.context.open &&
+						deepestNode.parentId &&
+						event.currentTarget !== deepestNode.context.elements.domReference
+					) {
+						stopEvent(event);
+						deepestNode.context.elements.domReference?.dispatchEvent(
+							eventObject,
+						);
+						return;
+					}
+				}
+			}
+
+			return commonOnKeyDown(event);
+		}
+
+		// If a floating element should not open on arrow key down, avoid
+		// setting `activeIndex` while it's closed.
+		if (!isOpen && !openOnArrowKeyDown && isArrowKey) return;
+
+		if (isNavigationKey) {
+			key = nested && isMainKey ? null : event.key;
+		}
+
+		if (nested) {
+			if (isCrossOpenKey) {
+				stopEvent(event);
+
+				if (isOpen) {
+					index = getMinIndex(listRef, disabledIndices);
+					onNavigate();
+				} else {
+					context.onOpenChange(true, event, "list-navigation");
+				}
+			}
+
+			return;
+		}
+
+		if (isMainKey) {
+			if (selectedIndex != null) {
+				index = selectedIndex;
+			}
+
+			stopEvent(event);
+
+			if (!isOpen && openOnArrowKeyDown) {
+				context.onOpenChange(true, event, "list-navigation");
+			} else {
+				commonOnKeyDown(event);
+			}
+
+			if (isOpen) {
+				onNavigate();
+			}
+		}
+	};
+
+	const referenceOnFocus = () => {
+		if (context.open && !virtual) {
+			index = -1;
+			onNavigate();
+		}
+	};
+
+	const reference: ElementProps["reference"] = $derived({
+		...ariaActiveDescendantProp,
+		onkeydown: referenceOnKeyDown,
+		onfocus: referenceOnFocus,
+		onpointerdown: checkVirtualPointer,
+		onpointerenter: checkVirtualPointer,
+		onmousedown: checkVirtualMouse,
+		onclick: checkVirtualMouse,
+	});
+
+	return {
+		get floating() {
+			if (!enabled) return {};
+			return floating;
+		},
+		get item() {
+			if (!enabled) return {};
+			return item;
+		},
+		get reference() {
+			if (!enabled) return {};
+			return reference;
+		},
+	};
+}
+
+function doSwitch(
+	orientation: UseListNavigationOptions["orientation"],
+	vertical: boolean,
+	horizontal: boolean,
+) {
+	switch (orientation) {
+		case "vertical":
+			return vertical;
+		case "horizontal":
+			return horizontal;
+		default:
+			return vertical || horizontal;
+	}
+}
+
+function isMainOrientationKey(
+	key: string,
+	orientation: UseListNavigationOptions["orientation"],
+) {
+	const vertical = key === ARROW_UP || key === ARROW_DOWN;
+	const horizontal = key === ARROW_LEFT || key === ARROW_RIGHT;
+	return doSwitch(orientation, vertical, horizontal);
+}
+
+function isMainOrientationToEndKey(
+	key: string,
+	orientation: UseListNavigationOptions["orientation"],
+	rtl: boolean,
+) {
+	const vertical = key === ARROW_DOWN;
+	const horizontal = rtl ? key === ARROW_LEFT : key === ARROW_RIGHT;
+	return (
+		doSwitch(orientation, vertical, horizontal) ||
+		key === "Enter" ||
+		key === " " ||
+		key === ""
+	);
+}
+
+function isCrossOrientationOpenKey(
+	key: string,
+	orientation: UseListNavigationOptions["orientation"],
+	rtl: boolean,
+) {
+	const vertical = rtl ? key === ARROW_LEFT : key === ARROW_RIGHT;
+	const horizontal = key === ARROW_DOWN;
+	return doSwitch(orientation, vertical, horizontal);
+}
+
+function isCrossOrientationCloseKey(
+	key: string,
+	orientation: UseListNavigationOptions["orientation"],
+	rtl: boolean,
+) {
+	const vertical = rtl ? key === ARROW_RIGHT : key === ARROW_LEFT;
+	const horizontal = key === ARROW_UP;
+	return doSwitch(orientation, vertical, horizontal);
+}
+
+export { useListNavigation };
+export type { UseListNavigationOptions };
diff --git a/packages/floating-ui-svelte/src/hooks/use-position.svelte.ts b/packages/floating-ui-svelte/src/hooks/use-position.svelte.ts
new file mode 100644
index 00000000..424a8c7a
--- /dev/null
+++ b/packages/floating-ui-svelte/src/hooks/use-position.svelte.ts
@@ -0,0 +1,174 @@
+import {
+	type ComputePositionConfig,
+	type Middleware,
+	type MiddlewareData,
+	type Placement,
+	type Strategy,
+	computePosition,
+} from "@floating-ui/dom";
+import { getDPR, roundByDPR } from "../internal/dpr.js";
+import { styleObjectToString } from "../internal/style-object-to-string.js";
+import type { Boxed, ReferenceType } from "../types.js";
+import type { PropertiesHyphen } from "csstype";
+import type { FloatingRootContext } from "./use-floating-root-context.svelte.js";
+import type { FloatingOptions } from "./use-floating-options.svelte.js";
+
+interface UsePositionData {
+	/**
+	 * The x-coordinate of the floating element.
+	 */
+	x: number;
+
+	/**
+	 * The y-coordinate of the floating element.
+	 */
+	y: number;
+
+	/**
+	 * The stateful placement, which can be different from the initial `placement` passed as options.
+	 */
+	placement: Placement;
+
+	/**
+	 * The stateful strategy, which can be different from the initial `strategy` passed as options.
+	 */
+	strategy: Strategy;
+
+	/**
+	 * Additional data from middleware.
+	 */
+	middlewareData: MiddlewareData;
+
+	/**
+	 * The boolean that let you know if the floating element has been positioned.
+	 */
+	isPositioned: boolean;
+}
+
+export interface PositionState<RT extends ReferenceType = ReferenceType>
+	extends ReturnType<typeof usePosition<RT>> {}
+
+/**
+ * Manages the positioning of floating elements.
+ */
+export function usePosition<RT extends ReferenceType = ReferenceType>(
+	opts: FloatingOptions<RT>,
+	rootContext: FloatingRootContext<RT>,
+	getPositionReference: () => RT | null,
+) {
+	const referenceEl = $derived(
+		getPositionReference() || opts.reference.current || null,
+	);
+	const data: UsePositionData = $state({
+		x: 0,
+		y: 0,
+		strategy: opts.strategy.current,
+		placement: opts.placement.current,
+		middlewareData: {},
+		isPositioned: false,
+	});
+
+	let floatingPointerEvents = $state.raw<
+		Boxed<PropertiesHyphen["pointer-events"] | undefined>
+	>({ current: undefined });
+
+	function setFloatingPointerEvents(
+		pointerEvents: PropertiesHyphen["pointer-events"] | undefined,
+	) {
+		floatingPointerEvents = { current: pointerEvents };
+	}
+
+	const floatingStyles = $derived.by(() => {
+		const pointerEvents = $state.snapshot(floatingPointerEvents);
+		const initialStyles: PropertiesHyphen = {
+			position: opts.strategy.current,
+			left: "0px",
+			top: "0px",
+			...(pointerEvents.current && {
+				"pointer-events": pointerEvents.current,
+			}),
+		};
+
+		if (!opts.floating.current) {
+			return styleObjectToString(initialStyles);
+		}
+
+		const x = roundByDPR(opts.floating.current, data.x);
+		const y = roundByDPR(opts.floating.current, data.y);
+
+		if (opts.transform.current) {
+			return styleObjectToString({
+				...initialStyles,
+				transform: `translate(${x}px, ${y}px)`,
+				...(getDPR(opts.floating.current) >= 1.5 && {
+					willChange: "transform",
+				}),
+			});
+		}
+
+		return styleObjectToString({
+			position: opts.strategy.current,
+			left: `${x}px`,
+			top: `${y}px`,
+			...(pointerEvents.current && {
+				"pointer-events": pointerEvents.current,
+			}),
+		});
+	});
+
+	async function update() {
+		if (!referenceEl || !opts.floating.current) return;
+
+		const config: ComputePositionConfig = {
+			placement: opts.placement.current,
+			strategy: opts.strategy.current,
+			middleware: opts.middleware.current,
+		};
+
+		const position = await computePosition(
+			referenceEl,
+			opts.floating.current,
+			config,
+		);
+
+		data.x = position.x;
+		data.y = position.y;
+		data.placement = position.placement;
+		data.strategy = position.strategy;
+		data.middlewareData = position.middlewareData;
+		data.isPositioned = rootContext.open !== false;
+	}
+
+	$effect.pre(() => {
+		if (rootContext.open || !data.isPositioned) return;
+		data.isPositioned = false;
+	});
+
+	$effect.pre(() => {
+		if (referenceEl && opts.floating.current) {
+			if (opts?.whileElementsMounted) {
+				return opts.whileElementsMounted(
+					referenceEl,
+					opts.floating.current,
+					update,
+				);
+			}
+
+			update();
+		}
+	});
+
+	return {
+		get referenceEl() {
+			return referenceEl;
+		},
+		data,
+		setFloatingPointerEvents,
+		get floatingStyles() {
+			return floatingStyles;
+		},
+		update,
+	};
+}
+
+export type { UsePositionData };
diff --git a/packages/floating-ui-svelte/src/hooks/use-role.svelte.ts b/packages/floating-ui-svelte/src/hooks/use-role.svelte.ts
index 1ef66000..33493162 100644
--- a/packages/floating-ui-svelte/src/hooks/use-role.svelte.ts
+++ b/packages/floating-ui-svelte/src/hooks/use-role.svelte.ts
@@ -1,4 +1,7 @@
-import type { FloatingContext } from "./use-floating.svelte.js";
+import { useFloatingParentNodeId } from "../components/floating-tree/hooks.svelte.js";
+import { extract } from "../internal/extract.js";
+import type { MaybeGetter } from "../types.js";
+import type { FloatingContextData } from "./use-floating-context.svelte.js";
 import { useId } from "./use-id.js";
 import type {
 	ElementProps,
@@ -22,12 +25,12 @@ interface UseRoleOptions {
 	 * handlers.
 	 * @default true
 	 */
-	enabled?: boolean;
+	enabled?: MaybeGetter<boolean>;
 	/**
 	 * The role of the floating element.
 	 * @default 'dialog'
 	 */
-	role?: AriaRole | ComponentRole;
+	role?: MaybeGetter<AriaRole | ComponentRole>;
 }
 
 const componentRoleToAriaRoleMap = new Map<
@@ -40,96 +43,96 @@ const componentRoleToAriaRoleMap = new Map<
 ]);
 
 function useRole(
-	context: FloatingContext,
-	options: UseRoleOptions = {},
+	context: FloatingContextData,
+	opts: UseRoleOptions = {},
 ): ElementProps {
-	const { open, floatingId } = $derived(context);
-
-	const { enabled = true, role = "dialog" } = $derived(options);
-
+	const enabled = $derived(extract(opts.enabled, true));
+	const role = $derived(extract(opts.role, "dialog"));
 	const ariaRole = $derived(
 		(componentRoleToAriaRoleMap.get(role) ?? role) as
 			| AriaRole
 			| false
 			| undefined,
 	);
-
-	// FIXME: Uncomment the commented code once useId and useFloatingParentNodeId are implemented.
+	const parentId = useFloatingParentNodeId();
+	const isNested = parentId != null;
 	const referenceId = useId();
-	const parentId = undefined;
-	// const parentId = useFloatingParentNodeId();
 
-	const isNested = parentId != null;
+	const reference: ElementProps["reference"] = $derived.by(() => {
+		if (ariaRole === "tooltip" || role === "label") {
+			return {
+				[`aria-${role === "label" ? "labelledby" : "describedby"}`]:
+					context.open ? context.floatingId : undefined,
+			};
+		}
 
-	const floatingProps = $derived({
-		id: floatingId,
-		...(ariaRole && { role: ariaRole }),
+		return {
+			"aria-expanded": context.open ? "true" : "false",
+			"aria-haspopup": ariaRole === "alertdialog" ? "dialog" : ariaRole,
+			"aria-controls": context.open ? context.floatingId : undefined,
+			...(ariaRole === "listbox" && { role: "combobox" }),
+			...(ariaRole === "menu" && { id: referenceId }),
+			...(ariaRole === "menu" && isNested && { role: "menuitem" }),
+			...(role === "select" && { "aria-autocomplete": "none" }),
+			...(role === "combobox" && { "aria-autocomplete": "list" }),
+		};
 	});
 
-	return {
-		// @ts-expect-error - variable prop is not specific enough
-		get reference() {
-			if (!enabled) {
-				return {};
-			}
-			if (ariaRole === "tooltip" || role === "label") {
-				return {
-					[`aria-${role === "label" ? "labelledby" : "describedby"}` as const]:
-						open ? floatingId : undefined,
-				};
-			}
-			return {
-				"aria-expanded": open ? "true" : "false",
-				"aria-haspopup": ariaRole === "alertdialog" ? "dialog" : ariaRole,
-				"aria-controls": open ? floatingId : undefined,
-				...(ariaRole === "listbox" && { role: "combobox" }),
-				...(ariaRole === "menu" && { id: referenceId }),
-				...(ariaRole === "menu" && isNested && { role: "menuitem" }),
-				...(role === "select" && { "aria-autocomplete": "none" }),
-				...(role === "combobox" && { "aria-autocomplete": "list" }),
-			};
-		},
-		get floating() {
-			if (!enabled) {
-				return {};
-			}
-			if (ariaRole === "tooltip" || role === "label") {
-				return floatingProps;
-			}
-			return {
-				...floatingProps,
-				...(ariaRole === "menu" && { "aria-labelledby": referenceId }),
+	const floating: ElementProps["floating"] = $derived.by(() => {
+		const floatingProps = {
+			id: context.floatingId,
+			...(ariaRole && { role: ariaRole }),
+		};
+
+		if (ariaRole === "tooltip" || role === "label") {
+			return floatingProps;
+		}
+
+		return {
+			...floatingProps,
+			...(ariaRole === "menu" && {
+				"aria-labelledby": referenceId,
+			}),
+		};
+	});
+
+	const item: ElementProps["item"] = $derived.by(() => {
+		return ({ active, selected }: ExtendedUserProps) => {
+			const commonProps = {
+				role: "option",
+				...(active && { id: `${context.floatingId}-option` }),
 			};
-		},
-		get item() {
-			if (!enabled) {
-				return {};
-			}
-			return ({ active, selected }: ExtendedUserProps) => {
-				const commonProps = {
-					role: "option",
-					...(active && { id: `${context.floatingId}-option` }),
-				};
 
-				// For `menu`, we are unable to tell if the item is a `menuitemradio`
-				// or `menuitemcheckbox`. For backwards-compatibility reasons, also
-				// avoid defaulting to `menuitem` as it may overwrite custom role props.
-				switch (role) {
-					case "select":
-						return {
-							...commonProps,
-							"aria-selected": active && selected,
-						};
-					case "combobox": {
-						return {
-							...commonProps,
-							...(active && { "aria-selected": true }),
-						};
-					}
+			switch (role) {
+				case "select":
+					return {
+						...commonProps,
+						"aria-selected": active && selected,
+					};
+				case "combobox": {
+					return {
+						...commonProps,
+						...(active && { "aria-selected": true }),
+					};
 				}
+			}
 
-				return {};
-			};
+			return {};
+		};
+	});
+
+	return {
+		get reference() {
+			if (!enabled) return {};
+			return reference;
+		},
+		get item() {
+			if (!enabled) return {};
+			return item;
+		},
+		get floating() {
+			if (!enabled) return {};
+			return floating;
 		},
 	};
 }
diff --git a/packages/floating-ui-svelte/src/hooks/use-transition.svelte.ts b/packages/floating-ui-svelte/src/hooks/use-transition.svelte.ts
new file mode 100644
index 00000000..b85f5c5c
--- /dev/null
+++ b/packages/floating-ui-svelte/src/hooks/use-transition.svelte.ts
@@ -0,0 +1,238 @@
+import type { PropertiesHyphen } from "csstype";
+import { extract } from "../internal/extract.js";
+import { watch } from "../internal/watch.svelte.js";
+import type { Boxed, Getter, MaybeGetter } from "../types.js";
+import type { Placement, Side } from "@floating-ui/utils";
+import { styleObjectToString } from "../internal/style-object-to-string.js";
+import type { FloatingContextData } from "./use-floating-context.svelte.js";
+
+function execWithArgsOrReturn<Value extends object | undefined, SidePlacement>(
+	valueOrFn: Value | ((args: SidePlacement) => Value),
+	args: SidePlacement,
+): Value {
+	return typeof valueOrFn === "function" ? valueOrFn(args) : valueOrFn;
+}
+
+type UseDelayUnmountOptions = {
+	open: Getter<boolean>;
+	durationMs: Getter<number>;
+};
+
+function useDelayUnmount(options: UseDelayUnmountOptions): Boxed<boolean> {
+	const open = $derived(extract(options.open));
+	const durationMs = $derived(extract(options.durationMs));
+
+	let isMounted = $state(open);
+
+	$effect(() => {
+		if (open && !isMounted) {
+			isMounted = true;
+		}
+	});
+
+	$effect(() => {
+		if (!open && isMounted) {
+			const timeout = window.setTimeout(() => {
+				isMounted = false;
+			}, durationMs);
+			return () => window.clearTimeout(timeout);
+		}
+	});
+
+	return {
+		get current() {
+			return isMounted;
+		},
+	};
+}
+
+interface UseTransitionStatusOptions {
+	/**
+	 * The duration of the transition in milliseconds, or an object containing
+	 * `open` and `close` keys for different durations.
+	 */
+	duration?: MaybeGetter<number | { open?: number; close?: number }>;
+}
+type TransitionStatus = "unmounted" | "initial" | "open" | "close";
+
+/**
+ * Provides a status string to apply CSS transitions to a floating element,
+ * correctly handling placement-aware transitions.
+ */
+function useTransitionStatus(
+	context: FloatingContextData,
+	opts: UseTransitionStatusOptions = {},
+): { isMounted: boolean; status: TransitionStatus } {
+	const duration = $derived(extract(opts.duration, 250));
+	const closeDuration = $derived.by(() => {
+		if (typeof duration === "number") {
+			return duration;
+		}
+		return duration.close || 0;
+	});
+
+	const isMounted = useDelayUnmount({
+		open: () => context.open,
+		durationMs: () => closeDuration,
+	});
+
+	let status: TransitionStatus = $state("unmounted");
+
+	$effect.pre(() => {
+		if (!isMounted.current && status === "close") {
+			status = "unmounted";
+		}
+	});
+
+	$effect.pre(() => {
+		if (!context.elements.floating) return;
+		if (context.open) {
+			status = "initial";
+
+			const frame = requestAnimationFrame(() => {
+				status = "open";
+			});
+
+			return () => {
+				cancelAnimationFrame(frame);
+			};
+		}
+
+		status = "close";
+	});
+
+	return {
+		get isMounted() {
+			return isMounted.current;
+		},
+		get status() {
+			return status;
+		},
+	};
+}
+
+type CSSStylesProperty =
+	| PropertiesHyphen
+	| ((params: { side: Side; placement: Placement }) => PropertiesHyphen);
+
+interface UseTransitionStylesOptions extends UseTransitionStatusOptions {
+	/**
+	 * The styles to apply when the floating element is initially mounted.
+	 */
+	initial?: CSSStylesProperty;
+	/**
+	 * The styles to apply when the floating element is transitioning to the
+	 * `open` state.
+	 */
+	open?: CSSStylesProperty;
+	/**
+	 * The styles to apply when the floating element is transitioning to the
+	 * `close` state.
+	 */
+	close?: CSSStylesProperty;
+	/**
+	 * The styles to apply to all states.
+	 */
+	common?: CSSStylesProperty;
+}
+
+function useTransitionStyles(
+	context: FloatingContextData,
+	opts: UseTransitionStylesOptions = {},
+): {
+	styles: string;
+	isMounted: boolean;
+} {
+	const initial = $derived(opts.initial ?? { opacity: 0 });
+	const open = $derived(opts.open);
+	const close = $derived(opts.close);
+	const common = $derived(opts.common);
+	const duration = $derived(extract(opts.duration, 250));
+	const placement = $derived(context.placement);
+	const side = $derived(placement.split("-")[0] as Side);
+	const fnArgs = $derived({ side, placement });
+	const openDuration = $derived.by(() => {
+		if (typeof duration === "number") {
+			return duration;
+		}
+		return duration.open || 0;
+	});
+	const closeDuration = $derived.by(() => {
+		if (typeof duration === "number") {
+			return duration;
+		}
+		return duration.close || 0;
+	});
+	let styles = $state.raw<PropertiesHyphen>({
+		...execWithArgsOrReturn(common, fnArgs),
+		...execWithArgsOrReturn(initial, fnArgs),
+	});
+	const transitionStatus = useTransitionStatus(context, {
+		duration: opts.duration,
+	});
+	const status = $derived(transitionStatus.status);
+
+	watch.pre(
+		[
+			() => closeDuration,
+			() => close,
+			() => initial,
+			() => open,
+			() => common,
+			() => openDuration,
+			() => status,
+			() => fnArgs,
+		],
+		() => {
+			const initialStyles = execWithArgsOrReturn(initial, fnArgs);
+			const closeStyles = execWithArgsOrReturn(close, fnArgs);
+			const commonStyles = execWithArgsOrReturn(common, fnArgs);
+			const openStyles =
+				execWithArgsOrReturn(open, fnArgs) ||
+				Object.keys(initialStyles).reduce((acc: Record<string, "">, key) => {
+					acc[key] = "";
+					return acc;
+				}, {});
+
+			if (status === "initial") {
+				styles = {
+					"transition-property": styles["transition-property"],
+					...commonStyles,
+					...initialStyles,
+				};
+			}
+
+			if (status === "open") {
+				styles = {
+					"transition-property": Object.keys(openStyles).join(", "),
+					"transition-duration": `${openDuration}ms`,
+					...commonStyles,
+					...openStyles,
+				};
+			}
+
+			if (status === "close") {
+				const localStyles = closeStyles || initialStyles;
+				styles = {
+					"transition-property": Object.keys(localStyles).join(", "),
+					"transition-duration": `${closeDuration}ms`,
+					...commonStyles,
+					...localStyles,
+				};
+			}
+		},
+	);
+
+	return {
+		get styles() {
+			return styleObjectToString(styles);
+		},
+
+		get isMounted() {
+			return transitionStatus.isMounted;
+		},
+	};
+}
+
+export { useTransitionStyles, useTransitionStatus };
+export type { UseTransitionStatusOptions, UseTransitionStylesOptions };
diff --git a/packages/floating-ui-svelte/src/hooks/use-typeahead.svelte.ts b/packages/floating-ui-svelte/src/hooks/use-typeahead.svelte.ts
new file mode 100644
index 00000000..28941934
--- /dev/null
+++ b/packages/floating-ui-svelte/src/hooks/use-typeahead.svelte.ts
@@ -0,0 +1,233 @@
+import { stopEvent } from "../internal/dom.js";
+import { extract } from "../internal/extract.js";
+import type { MaybeGetter } from "../types.js";
+import type { FloatingContextData } from "./use-floating-context.svelte.js";
+import type { FloatingRootContext } from "./use-floating-root-context.svelte.js";
+import type { ElementProps } from "./use-interactions.svelte.js";
+
+interface UseTypeaheadOptions {
+	/**
+	 * A ref which contains an array of strings whose indices match the HTML
+	 * elements of the list.
+	 * @default empty list
+	 */
+	listRef: MaybeGetter<Array<string | null>>;
+	/**
+	 * The index of the active (focused or highlighted) item in the list.
+	 * @default null
+	 */
+	activeIndex: MaybeGetter<number | null>;
+	/**
+	 * Callback invoked with the matching index if found as the user types.
+	 */
+	onMatch?: (index: number) => void;
+	/**
+	 * Callback invoked with the typing state as the user types.
+	 */
+	onTypingChange?: (isTyping: boolean) => void;
+	/**
+	 * Whether the Hook is enabled, including all internal Effects and event
+	 * handlers.
+	 * @default true
+	 */
+	enabled?: MaybeGetter<boolean>;
+	/**
+	 * A function that returns the matching string from the list.
+	 * @default lowercase-finder
+	 */
+	findMatch?:
+		| null
+		| ((
+				list: Array<string | null>,
+				typedString: string,
+		  ) => string | null | undefined);
+	/**
+	 * The number of milliseconds to wait before resetting the typed string.
+	 * @default 750
+	 */
+	resetMs?: MaybeGetter<number>;
+	/**
+	 * An array of keys to ignore when typing.
+	 * @default []
+	 */
+	ignoreKeys?: MaybeGetter<Array<string>>;
+	/**
+	 * The index of the selected item in the list, if available.
+	 * @default null
+	 */
+	selectedIndex?: MaybeGetter<number | null>;
+}
+
+/**
+ * Provides a matching callback that can be used to focus an item as the user
+ * types, often used in tandem with `useListNavigation()`.
+ */
+function useTypeahead(
+	context: FloatingContextData | FloatingRootContext,
+	opts: UseTypeaheadOptions,
+): ElementProps {
+	const listRef = $derived(extract(opts.listRef, []));
+	const activeIndex = $derived(extract(opts.activeIndex, null));
+	const enabled = $derived(extract(opts.enabled, true));
+	const findMatch = opts.findMatch ?? null;
+	const resetMs = $derived(extract(opts.resetMs, 750));
+	const ignoreKeys = $derived(extract(opts.ignoreKeys, []));
+	const selectedIndex = $derived(extract(opts.selectedIndex, null));
+
+	let prevIndex: number | null = selectedIndex ?? activeIndex ?? -1;
+	let timeoutId = -1;
+	let str = "";
+	let matchIndex: number | null = null;
+
+	$effect.pre(() => {
+		if (!context.open) return;
+		window.clearTimeout(timeoutId);
+		matchIndex = null;
+		str = "";
+	});
+
+	$effect.pre(() => {
+		if (context.open && str === "") {
+			prevIndex = selectedIndex ?? activeIndex ?? -1;
+		}
+	});
+
+	function setTypingChange(value: boolean) {
+		if (value) {
+			if (!context.data.typing) {
+				context.data.typing = value;
+				opts.onTypingChange?.(value);
+			}
+		} else {
+			if (context.data.typing) {
+				context.data.typing = value;
+				opts.onTypingChange?.(value);
+			}
+		}
+	}
+
+	function getMatchingIndex(
+		list: Array<string | null>,
+		orderedList: Array<string | null>,
+		string: string,
+	) {
+		const str = findMatch
+			? findMatch(orderedList, string)
+			: orderedList.find(
+					(text) =>
+						text?.toLocaleLowerCase().indexOf(string.toLocaleLowerCase()) === 0,
+				);
+
+		return str ? list.indexOf(str) : -1;
+	}
+
+	function onkeydown(event: KeyboardEvent) {
+		const listContent = listRef;
+		const isOpen = context.open;
+
+		if (str.length > 0 && str[0] !== " ") {
+			if (getMatchingIndex(listContent, listContent, str) === -1) {
+				setTypingChange(false);
+			} else if (event.key === " ") {
+				stopEvent(event);
+			}
+		}
+
+		if (
+			listContent == null ||
+			ignoreKeys.includes(event.key) ||
+			// Character key.
+			event.key.length !== 1 ||
+			// Modifier key.
+			event.ctrlKey ||
+			event.metaKey ||
+			event.altKey
+		) {
+			return;
+		}
+
+		if (isOpen && event.key !== " ") {
+			stopEvent(event);
+			setTypingChange(true);
+		}
+
+		// Bail out if the list contains a word like "llama" or "aaron". TODO:
+		// allow it in this case, too.
+		const allowRapidSuccessionOfFirstLetter = listContent.every((text) =>
+			text
+				? text[0]?.toLocaleLowerCase() !== text[1]?.toLocaleLowerCase()
+				: true,
+		);
+
+		// Allows the user to cycle through items that start with the same letter
+		// in rapid succession.
+		if (allowRapidSuccessionOfFirstLetter && str === event.key) {
+			str = "";
+			prevIndex = matchIndex;
+		}
+
+		str += event.key;
+		window.clearTimeout(timeoutId);
+		timeoutId = window.setTimeout(() => {
+			str = "";
+			prevIndex = matchIndex;
+			setTypingChange(false);
+		}, resetMs);
+
+		const index = getMatchingIndex(
+			listContent,
+			[
+				...listContent.slice((prevIndex || 0) + 1),
+				...listContent.slice(0, (prevIndex || 0) + 1),
+			],
+			str,
+		);
+
+		if (index !== -1) {
+			opts.onMatch?.(index);
+			matchIndex = index;
+		} else if (event.key !== " ") {
+			str = "";
+			setTypingChange(false);
+		}
+	}
+
+	function floatingOnKeyUp(event: KeyboardEvent) {
+		if (event.key === " ") {
+			setTypingChange(false);
+		}
+	}
+
+	$effect(() => {
+		return () => {
+			window.clearTimeout(timeoutId);
+		};
+	});
+
+	const reference: ElementProps["reference"] = $derived(
+		enabled
+			? {
+					onkeydown,
+				}
+			: {},
+	);
+
+	const floating: ElementProps["floating"] = $derived({
+		onkeydown,
+		onkeyup: floatingOnKeyUp,
+	});
+
+	return {
+		get reference() {
+			if (!enabled) return {};
+			return reference;
+		},
+		get floating() {
+			if (!enabled) return {};
+			return floating;
+		},
+	};
+}
+
+export { useTypeahead };
+export type { UseTypeaheadOptions };
diff --git a/packages/floating-ui-svelte/src/index.ts b/packages/floating-ui-svelte/src/index.ts
index fec9bd7c..573e47f5 100644
--- a/packages/floating-ui-svelte/src/index.ts
+++ b/packages/floating-ui-svelte/src/index.ts
@@ -4,10 +4,39 @@
 export * from "./components/floating-arrow.svelte";
 export { default as FloatingArrow } from "./components/floating-arrow.svelte";
 
+export * from "./components/floating-portal/floating-portal.svelte";
+export { default as FloatingPortal } from "./components/floating-portal/floating-portal.svelte";
+export * from "./components/floating-portal/hooks.svelte.js";
+
+export * from "./components/floating-tree/floating-tree.svelte";
+export { default as FloatingTree } from "./components/floating-tree/floating-tree.svelte";
+export * from "./components/floating-tree/floating-node.svelte";
+export { default as FloatingNode } from "./components/floating-tree/floating-node.svelte";
+export * from "./components/floating-tree/hooks.svelte.js";
+
+export * from "./components/floating-focus-manager/floating-focus-manager.svelte";
+export { default as FloatingFocusManager } from "./components/floating-focus-manager/floating-focus-manager.svelte";
+
+export * from "./components/floating-overlay.svelte";
+export { default as FloatingOverlay } from "./components/floating-overlay.svelte";
+
+export * from "./components/floating-delay-group.svelte";
+export { default as FloatingDelayGroup } from "./components/floating-delay-group.svelte";
+
+export * from "./components/floating-list/floating-list.svelte";
+export { default as FloatingList } from "./components/floating-list/floating-list.svelte";
+
+export * from "./components/composite/composite-item.svelte";
+export { default as CompositeItem } from "./components/composite/composite-item.svelte";
+
+export * from "./components/composite/composite.svelte";
+export { default as Composite } from "./components/composite/composite.svelte";
+
 /**
  * Hooks
  */
 export * from "./hooks/use-click.svelte.js";
+export * from "./hooks/use-client-point.svelte.js";
 export * from "./hooks/use-dismiss.svelte.js";
 export * from "./hooks/use-floating.svelte.js";
 export * from "./hooks/use-focus.svelte.js";
@@ -15,6 +44,10 @@ export * from "./hooks/use-hover.svelte.js";
 export * from "./hooks/use-id.js";
 export * from "./hooks/use-interactions.svelte.js";
 export * from "./hooks/use-role.svelte.js";
+export * from "./hooks/use-transition.svelte.js";
+export * from "./hooks/use-list-navigation.svelte.js";
+export * from "./hooks/use-typeahead.svelte.js";
+export * from "./safe-polygon.js";
 
 /**
  * Types
diff --git a/packages/floating-ui-svelte/src/internal/active-element.svelte.ts b/packages/floating-ui-svelte/src/internal/active-element.svelte.ts
new file mode 100644
index 00000000..2d381397
--- /dev/null
+++ b/packages/floating-ui-svelte/src/internal/active-element.svelte.ts
@@ -0,0 +1,71 @@
+import { BROWSER } from "esm-env";
+import { on } from "svelte/events";
+import { createSubscriber } from "svelte/reactivity";
+
+const defaultWindow = BROWSER ? window : undefined;
+
+/**
+ * Handles getting the active element in a document or shadow root.
+ * If the active element is within a shadow root, it will traverse the shadow root
+ * to find the active element.
+ * If not, it will return the active element in the document.
+ *
+ * @param document A document or shadow root to get the active element from.
+ * @returns The active element in the document or shadow root.
+ */
+function getActiveElement(document: DocumentOrShadowRoot): Element | null {
+	let activeElement = document.activeElement;
+
+	while (activeElement?.shadowRoot) {
+		const node = activeElement.shadowRoot.activeElement;
+		if (node === activeElement) break;
+		activeElement = node;
+	}
+
+	return activeElement;
+}
+
+interface ActiveElementOptions {
+	document?: Document;
+	window?: Window;
+}
+
+class ActiveElement {
+	readonly #document?: DocumentOrShadowRoot;
+	readonly #subscribe?: () => void;
+
+	constructor(options: ActiveElementOptions = {}) {
+		const { window = defaultWindow, document = window?.document } = options;
+		if (window === undefined) return;
+
+		this.#document = document;
+		this.#subscribe = createSubscriber((update) => {
+			const cleanupFocusIn = on(window, "focusin", update);
+			const cleanupFocusOut = on(window, "focusout", update);
+			return () => {
+				cleanupFocusIn();
+				cleanupFocusOut();
+			};
+		});
+	}
+
+	get current(): Element | null {
+		this.#subscribe?.();
+		if (!this.#document) return null;
+		return getActiveElement(this.#document);
+	}
+}
+
+/**
+ * An object holding a reactive value that is equal to `document.activeElement`.
+ * It automatically listens for changes, keeping the reference up to date.
+ *
+ * If you wish to use a custom document or shadowRoot, you should use
+ * [useActiveElement](https://runed.dev/docs/utilities/active-element) instead.
+ *
+ * @see {@link https://runed.dev/docs/utilities/active-element}
+ */
+const reactiveActiveElement = new ActiveElement();
+
+export { reactiveActiveElement, ActiveElement };
+export type { ActiveElementOptions };
diff --git a/packages/floating-ui-svelte/src/internal/after-sleep.ts b/packages/floating-ui-svelte/src/internal/after-sleep.ts
new file mode 100644
index 00000000..25cfa5a9
--- /dev/null
+++ b/packages/floating-ui-svelte/src/internal/after-sleep.ts
@@ -0,0 +1,8 @@
+/**
+ * A utility function that executes a callback after a specified number of milliseconds.
+ */
+function afterSleep(ms: number, cb: () => void) {
+	return setTimeout(cb, ms);
+}
+
+export { afterSleep };
diff --git a/packages/floating-ui-svelte/src/internal/attributes.ts b/packages/floating-ui-svelte/src/internal/attributes.ts
new file mode 100644
index 00000000..ad415d39
--- /dev/null
+++ b/packages/floating-ui-svelte/src/internal/attributes.ts
@@ -0,0 +1,6 @@
+import { createAttribute } from "./dom.js";
+
+const FLOATING_ID_ATTRIBUTE = createAttribute("id");
+const ORIGIN_ID_ATTRIBUTE = createAttribute("origin-id");
+
+export { FLOATING_ID_ATTRIBUTE, ORIGIN_ID_ATTRIBUTE };
diff --git a/packages/floating-ui-svelte/src/internal/box.svelte.ts b/packages/floating-ui-svelte/src/internal/box.svelte.ts
new file mode 100644
index 00000000..862bb207
--- /dev/null
+++ b/packages/floating-ui-svelte/src/internal/box.svelte.ts
@@ -0,0 +1,235 @@
+import type { Getter } from "../types.js";
+import { isFunction, isObject } from "./is.js";
+
+type MaybeBoxOrGetter<T> = T | Getter<T> | ReadableBox<T>;
+
+const BoxSymbol = Symbol("box");
+const isWritableSymbol = Symbol("is-writable");
+
+type ReadableBox<T> = {
+	readonly [BoxSymbol]: true;
+	readonly current: T;
+};
+
+type WritableBox<T> = ReadableBox<T> & {
+	readonly [isWritableSymbol]: true;
+	current: T;
+};
+
+/**
+ * @returns Whether the value is a Box
+ *
+ * @see {@link https://runed.dev/docs/functions/box}
+ */
+function isBox(value: unknown): value is ReadableBox<unknown> {
+	return isObject(value) && BoxSymbol in value;
+}
+/**
+ * @returns Whether the value is a WritableBox
+ *
+ * @see {@link https://runed.dev/docs/functions/box}
+ */
+function isWritableBox(value: unknown): value is WritableBox<unknown> {
+	return box.isBox(value) && isWritableSymbol in value;
+}
+
+/**
+ * Creates a writable box.
+ *
+ * @returns A box with a `current` property which can be set to a new value.
+ * Useful to pass state to other functions.
+ *
+ * @see {@link https://runed.dev/docs/functions/box}
+ */
+function box<T>(): WritableBox<T | undefined>;
+/**
+ * Creates a writable box with an initial value.
+ *
+ * @param initialValue The initial value of the box.
+ * @returns A box with a `current` property which can be set to a new value.
+ * Useful to pass state to other functions.
+ *
+ * @see {@link https://runed.dev/docs/functions/box}
+ */
+function box<T>(initialValue: T): WritableBox<T>;
+function box(initialValue?: unknown) {
+	let current = $state(initialValue);
+
+	return {
+		[BoxSymbol]: true,
+		[isWritableSymbol]: true,
+		get current() {
+			return current as unknown;
+		},
+		set current(v: unknown) {
+			current = v;
+		},
+	};
+}
+
+/**
+ * Creates a readonly box
+ *
+ * @param getter Function to get the value of the box
+ * @returns A box with a `current` property whose value is the result of the getter.
+ * Useful to pass state to other functions.
+ *
+ * @see {@link https://runed.dev/docs/functions/box}
+ */
+function boxWith<T>(getter: () => T): ReadableBox<T>;
+/**
+ * Creates a writable box
+ *
+ * @param getter Function to get the value of the box
+ * @param setter Function to set the value of the box
+ * @returns A box with a `current` property which can be set to a new value.
+ * Useful to pass state to other functions.
+ *
+ * @see {@link https://runed.dev/docs/functions/box}
+ */
+function boxWith<T>(getter: () => T, setter: (v: T) => void): WritableBox<T>;
+function boxWith<T>(getter: () => T, setter?: (v: T) => void) {
+	const derived = $derived.by(getter);
+
+	if (setter) {
+		return {
+			[BoxSymbol]: true,
+			[isWritableSymbol]: true,
+			get current() {
+				return derived;
+			},
+			set current(v: T) {
+				setter(v);
+			},
+		};
+	}
+
+	return {
+		[BoxSymbol]: true,
+		get current() {
+			return getter();
+		},
+	};
+}
+
+/**
+ * Creates a box from either a static value, a box, or a getter function.
+ * Useful when you want to receive any of these types of values and generate a boxed version of it.
+ *
+ * @returns A box with a `current` property whose value.
+ *
+ * @see {@link https://runed.dev/docs/functions/box}
+ */
+function boxFrom<T>(value: T | WritableBox<T>): WritableBox<T>;
+function boxFrom<T>(value: ReadableBox<T>): ReadableBox<T>;
+function boxFrom<T>(value: Getter<T>): ReadableBox<T>;
+function boxFrom<T>(value: MaybeBoxOrGetter<T>): ReadableBox<T>;
+function boxFrom<T>(value: T): WritableBox<T>;
+function boxFrom<T>(value: MaybeBoxOrGetter<T>) {
+	if (box.isBox(value)) return value;
+	if (isFunction(value)) return box.with(value);
+	return box(value);
+}
+
+type GetKeys<T, U> = {
+	[K in keyof T]: T[K] extends U ? K : never;
+}[keyof T];
+type RemoveValues<T, U> = Omit<T, GetKeys<T, U>>;
+
+type BoxFlatten<R extends Record<string, unknown>> = Expand<
+	RemoveValues<
+		{
+			[K in keyof R]: R[K] extends WritableBox<infer T> ? T : never;
+		},
+		never
+	> &
+		RemoveValues<
+			{
+				readonly [K in keyof R]: R[K] extends WritableBox<infer _>
+					? never
+					: R[K] extends ReadableBox<infer T>
+						? T
+						: never;
+			},
+			never
+		>
+> &
+	RemoveValues<
+		{
+			[K in keyof R]: R[K] extends ReadableBox<infer _> ? never : R[K];
+		},
+		never
+	>;
+
+/**
+ * Function that gets an object of boxes, and returns an object of reactive values
+ *
+ * @example
+ * const count = box(0)
+ * const flat = box.flatten({ count, double: box.with(() => count.current) })
+ * // type of flat is { count: number, readonly double: number }
+ *
+ * @see {@link https://runed.dev/docs/functions/box}
+ */
+function boxFlatten<R extends Record<string, unknown>>(
+	boxes: R,
+): BoxFlatten<R> {
+	return Object.entries(boxes).reduce<BoxFlatten<R>>(
+		(acc, [key, b]) => {
+			if (!box.isBox(b)) {
+				return Object.assign(acc, { [key]: b });
+			}
+
+			if (box.isWritableBox(b)) {
+				Object.defineProperty(acc, key, {
+					get() {
+						return b.current;
+					},
+					// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+					set(v: any) {
+						b.current = v;
+					},
+				});
+			} else {
+				Object.defineProperty(acc, key, {
+					get() {
+						return b.current;
+					},
+				});
+			}
+
+			return acc;
+		},
+		{} as BoxFlatten<R>,
+	);
+}
+
+/**
+ * Function that converts a box to a readonly box.
+ *
+ * @example
+ * const count = box(0) // WritableBox<number>
+ * const countReadonly = box.readonly(count) // ReadableBox<number>
+ *
+ * @see {@link https://runed.dev/docs/functions/box}
+ */
+function toReadonlyBox<T>(b: ReadableBox<T>): ReadableBox<T> {
+	if (!box.isWritableBox(b)) return b;
+
+	return {
+		[BoxSymbol]: true,
+		get current() {
+			return b.current;
+		},
+	};
+}
+
+box.from = boxFrom;
+box.with = boxWith;
+box.flatten = boxFlatten;
+box.readonly = toReadonlyBox;
+box.isBox = isBox;
+box.isWritableBox = isWritableBox;
+
+export type { MaybeBoxOrGetter, ReadableBox, WritableBox };
+export { box };
diff --git a/packages/floating-ui-svelte/src/internal/composite.ts b/packages/floating-ui-svelte/src/internal/composite.ts
new file mode 100644
index 00000000..2eee7cc3
--- /dev/null
+++ b/packages/floating-ui-svelte/src/internal/composite.ts
@@ -0,0 +1,344 @@
+import { floor } from "@floating-ui/utils";
+import { stopEvent } from "./dom.js";
+import type { Dimensions } from "../types.js";
+import { DEV } from "esm-env";
+
+const ARROW_UP = "ArrowUp";
+const ARROW_DOWN = "ArrowDown";
+const ARROW_LEFT = "ArrowLeft";
+const ARROW_RIGHT = "ArrowRight";
+
+function isDifferentRow(index: number, cols: number, prevRow: number) {
+	return Math.floor(index / cols) !== prevRow;
+}
+
+function isIndexOutOfBounds(listRef: Array<HTMLElement | null>, index: number) {
+	return index < 0 || index >= listRef.length;
+}
+
+function getMinIndex(
+	listRef: Array<HTMLElement | null>,
+	disabledIndices: Array<number> | undefined,
+) {
+	return findNonDisabledIndex(listRef, { disabledIndices });
+}
+
+function getMaxIndex(
+	listRef: Array<HTMLElement | null>,
+	disabledIndices: Array<number> | undefined,
+) {
+	return findNonDisabledIndex(listRef, {
+		decrement: true,
+		startingIndex: listRef.length,
+		disabledIndices,
+	});
+}
+
+function findNonDisabledIndex(
+	listRef: Array<HTMLElement | null>,
+	{
+		startingIndex = -1,
+		decrement = false,
+		disabledIndices,
+		amount = 1,
+	}: {
+		startingIndex?: number;
+		decrement?: boolean;
+		disabledIndices?: Array<number>;
+		amount?: number;
+	} = {},
+): number {
+	const list = listRef;
+
+	let index = startingIndex;
+	do {
+		index += decrement ? -amount : amount;
+	} while (
+		index >= 0 &&
+		index <= list.length - 1 &&
+		isDisabled(list, index, disabledIndices)
+	);
+
+	return index;
+}
+
+function getGridNavigatedIndex(
+	elementsRef: Array<HTMLElement | null>,
+	{
+		event,
+		orientation,
+		loop,
+		rtl,
+		cols,
+		disabledIndices,
+		minIndex,
+		maxIndex,
+		prevIndex,
+		stopEvent: stop = false,
+	}: {
+		event: KeyboardEvent;
+		orientation: "horizontal" | "vertical" | "both";
+		loop: boolean;
+		rtl: boolean;
+		cols: number;
+		disabledIndices: Array<number> | undefined;
+		minIndex: number;
+		maxIndex: number;
+		prevIndex: number;
+		stopEvent?: boolean;
+	},
+) {
+	let nextIndex = prevIndex;
+
+	if (event.key === ARROW_UP) {
+		stop && stopEvent(event);
+
+		if (prevIndex === -1) {
+			nextIndex = maxIndex;
+		} else {
+			nextIndex = findNonDisabledIndex(elementsRef, {
+				startingIndex: nextIndex,
+				amount: cols,
+				decrement: true,
+				disabledIndices,
+			});
+
+			if (loop && (prevIndex - cols < minIndex || nextIndex < 0)) {
+				const col = prevIndex % cols;
+				const maxCol = maxIndex % cols;
+				const offset = maxIndex - (maxCol - col);
+
+				if (maxCol === col) {
+					nextIndex = maxIndex;
+				} else {
+					nextIndex = maxCol > col ? offset : offset - cols;
+				}
+			}
+		}
+
+		if (isIndexOutOfBounds(elementsRef, nextIndex)) {
+			nextIndex = prevIndex;
+		}
+	}
+
+	if (event.key === ARROW_DOWN) {
+		stop && stopEvent(event);
+
+		if (prevIndex === -1) {
+			nextIndex = minIndex;
+		} else {
+			nextIndex = findNonDisabledIndex(elementsRef, {
+				startingIndex: prevIndex,
+				amount: cols,
+				disabledIndices,
+			});
+
+			if (loop && prevIndex + cols > maxIndex) {
+				nextIndex = findNonDisabledIndex(elementsRef, {
+					startingIndex: (prevIndex % cols) - cols,
+					amount: cols,
+					disabledIndices,
+				});
+			}
+		}
+
+		if (isIndexOutOfBounds(elementsRef, nextIndex)) {
+			nextIndex = prevIndex;
+		}
+	}
+
+	// Remains on the same row/column.
+	if (orientation === "both") {
+		const prevRow = floor(prevIndex / cols);
+
+		if (event.key === (rtl ? ARROW_LEFT : ARROW_RIGHT)) {
+			stop && stopEvent(event);
+
+			if (prevIndex % cols !== cols - 1) {
+				nextIndex = findNonDisabledIndex(elementsRef, {
+					startingIndex: prevIndex,
+					disabledIndices,
+				});
+
+				if (loop && isDifferentRow(nextIndex, cols, prevRow)) {
+					nextIndex = findNonDisabledIndex(elementsRef, {
+						startingIndex: prevIndex - (prevIndex % cols) - 1,
+						disabledIndices,
+					});
+				}
+			} else if (loop) {
+				nextIndex = findNonDisabledIndex(elementsRef, {
+					startingIndex: prevIndex - (prevIndex % cols) - 1,
+					disabledIndices,
+				});
+			}
+
+			if (isDifferentRow(nextIndex, cols, prevRow)) {
+				nextIndex = prevIndex;
+			}
+		}
+
+		if (event.key === (rtl ? ARROW_RIGHT : ARROW_LEFT)) {
+			stop && stopEvent(event);
+
+			if (prevIndex % cols !== 0) {
+				nextIndex = findNonDisabledIndex(elementsRef, {
+					startingIndex: prevIndex,
+					decrement: true,
+					disabledIndices,
+				});
+
+				if (loop && isDifferentRow(nextIndex, cols, prevRow)) {
+					nextIndex = findNonDisabledIndex(elementsRef, {
+						startingIndex: prevIndex + (cols - (prevIndex % cols)),
+						decrement: true,
+						disabledIndices,
+					});
+				}
+			} else if (loop) {
+				nextIndex = findNonDisabledIndex(elementsRef, {
+					startingIndex: prevIndex + (cols - (prevIndex % cols)),
+					decrement: true,
+					disabledIndices,
+				});
+			}
+
+			if (isDifferentRow(nextIndex, cols, prevRow)) {
+				nextIndex = prevIndex;
+			}
+		}
+
+		const lastRow = floor(maxIndex / cols) === prevRow;
+
+		if (isIndexOutOfBounds(elementsRef, nextIndex)) {
+			if (loop && lastRow) {
+				nextIndex =
+					event.key === (rtl ? ARROW_RIGHT : ARROW_LEFT)
+						? maxIndex
+						: findNonDisabledIndex(elementsRef, {
+								startingIndex: prevIndex - (prevIndex % cols) - 1,
+								disabledIndices,
+							});
+			} else {
+				nextIndex = prevIndex;
+			}
+		}
+	}
+
+	return nextIndex;
+}
+
+/** For each cell index, gets the item index that occupies that cell */
+function buildCellMap(sizes: Dimensions[], cols: number, dense: boolean) {
+	const cellMap: (number | undefined)[] = [];
+	let startIndex = 0;
+	sizes.forEach(({ width, height }, index) => {
+		if (width > cols) {
+			if (DEV) {
+				throw new Error(
+					`[Floating UI]: Invalid grid - item width at index ${index} is greater than grid columns`,
+				);
+			}
+		}
+		let itemPlaced = false;
+		if (dense) {
+			startIndex = 0;
+		}
+		while (!itemPlaced) {
+			const targetCells: number[] = [];
+			for (let i = 0; i < width; i++) {
+				for (let j = 0; j < height; j++) {
+					targetCells.push(startIndex + i + j * cols);
+				}
+			}
+			if (
+				(startIndex % cols) + width <= cols &&
+				targetCells.every((cell) => cellMap[cell] == null)
+			) {
+				for (const cell of targetCells) {
+					cellMap[cell] = index;
+				}
+				itemPlaced = true;
+			} else {
+				startIndex++;
+			}
+		}
+	});
+
+	// convert into a non-sparse array
+	return [...cellMap];
+}
+
+/** Gets cell index of an item's corner or -1 when index is -1. */
+function getCellIndexOfCorner(
+	index: number,
+	sizes: Dimensions[],
+	cellMap: (number | undefined)[],
+	cols: number,
+	corner: "tl" | "tr" | "bl" | "br",
+) {
+	if (index === -1) return -1;
+
+	const firstCellIndex = cellMap.indexOf(index);
+	const sizeItem = sizes[index];
+
+	switch (corner) {
+		case "tl":
+			return firstCellIndex;
+		case "tr":
+			if (!sizeItem) {
+				return firstCellIndex;
+			}
+			return firstCellIndex + sizeItem.width - 1;
+		case "bl":
+			if (!sizeItem) {
+				return firstCellIndex;
+			}
+			return firstCellIndex + (sizeItem.height - 1) * cols;
+		case "br":
+			return cellMap.lastIndexOf(index);
+	}
+}
+
+/** Gets all cell indices that correspond to the specified indices */
+function getCellIndices(
+	indices: (number | undefined)[],
+	cellMap: (number | undefined)[],
+) {
+	return cellMap.flatMap((index, cellIndex) =>
+		indices.includes(index) ? [cellIndex] : [],
+	);
+}
+
+function isDisabled(
+	list: Array<HTMLElement | null>,
+	index: number,
+	disabledIndices?: Array<number>,
+) {
+	if (disabledIndices) {
+		return disabledIndices.includes(index);
+	}
+
+	const element = list[index];
+	return (
+		element == null ||
+		element.hasAttribute("disabled") ||
+		element.getAttribute("aria-disabled") === "true"
+	);
+}
+
+export {
+	getCellIndexOfCorner,
+	getCellIndices,
+	ARROW_DOWN,
+	ARROW_LEFT,
+	ARROW_RIGHT,
+	ARROW_UP,
+	buildCellMap,
+	getGridNavigatedIndex,
+	getMinIndex,
+	getMaxIndex,
+	isIndexOutOfBounds,
+	isDisabled,
+	findNonDisabledIndex,
+};
diff --git a/packages/floating-ui-svelte/src/internal/context.ts b/packages/floating-ui-svelte/src/internal/context.ts
new file mode 100644
index 00000000..0d50cc8e
--- /dev/null
+++ b/packages/floating-ui-svelte/src/internal/context.ts
@@ -0,0 +1,75 @@
+/**
+ * Sourced from Runed `Context`: https://runed.dev/docs/utilities/context
+ */
+import { getContext, hasContext, setContext } from "svelte";
+
+export class Context<TContext> {
+	readonly #name: string;
+	readonly #key: symbol;
+
+	/**
+	 * @param name The name of the context.
+	 * This is used for generating the context key and error messages.
+	 */
+	constructor(name: string) {
+		this.#name = name;
+		this.#key = Symbol(name);
+	}
+
+	/**
+	 * The key used to get and set the context.
+	 *
+	 * It is not recommended to use this value directly.
+	 * Instead, use the methods provided by this class.
+	 */
+	get key(): symbol {
+		return this.#key;
+	}
+
+	/**
+	 * Checks whether this has been set in the context of a parent component.
+	 *
+	 * Must be called during component initialization.
+	 */
+	exists(): boolean {
+		return hasContext(this.#key);
+	}
+
+	/**
+	 * Retrieves the context that belongs to the closest parent component.
+	 *
+	 * Must be called during component initialization.
+	 *
+	 * @throws An error if the context does not exist.
+	 */
+	get(): TContext {
+		const context: TContext | undefined = getContext(this.#key);
+		if (context === undefined) {
+			throw new Error(`Context "${this.#name}" not found`);
+		}
+		return context;
+	}
+
+	/**
+	 * Retrieves the context that belongs to the closest parent component,
+	 * or the given fallback value if the context does not exist.
+	 *
+	 * Must be called during component initialization.
+	 */
+	getOr<TFallback>(fallback: TFallback): TContext | TFallback {
+		const context: TContext | undefined = getContext(this.#key);
+		if (context === undefined) {
+			return fallback;
+		}
+		return context;
+	}
+
+	/**
+	 * Associates the given value with the current component and returns it.
+	 *
+	 * Must be called during component initialization.
+	 */
+	set(context: TContext): TContext {
+		return setContext(this.#key, context);
+	}
+}
diff --git a/packages/floating-ui-svelte/src/internal/create-pub-sub.ts b/packages/floating-ui-svelte/src/internal/create-pub-sub.ts
index 949bca80..ee91e983 100644
--- a/packages/floating-ui-svelte/src/internal/create-pub-sub.ts
+++ b/packages/floating-ui-svelte/src/internal/create-pub-sub.ts
@@ -1,7 +1,8 @@
 function createPubSub() {
 	const map = new Map<string, Array<(data: unknown) => void>>();
 	return {
-		emit(event: string, data: unknown) {
+		// biome-ignore lint/suspicious/noExplicitAny: TODO: Type this with the actual structures?
+		emit(event: string, data: any) {
 			const handlers = map.get(event);
 			if (!handlers) {
 				return;
@@ -10,10 +11,16 @@ function createPubSub() {
 				handler(data);
 			}
 		},
-		on(event: string, listener: (data: unknown) => void) {
+		// biome-ignore lint/suspicious/noExplicitAny: TODO: Type this with the actual structures?
+		on(event: string, listener: (data: any) => void) {
 			map.set(event, [...(map.get(event) || []), listener]);
+
+			return () => {
+				map.set(event, map.get(event)?.filter((l) => l !== listener) || []);
+			};
 		},
-		off(event: string, listener: (data: unknown) => void) {
+		// biome-ignore lint/suspicious/noExplicitAny: TODO: Type this with the actual structures maybe not since people could make their own custom ones? Idk we'll see
+		off(event: string, listener: (data: any) => void) {
 			map.set(event, map.get(event)?.filter((l) => l !== listener) || []);
 		},
 	};
diff --git a/packages/floating-ui-svelte/src/internal/dom.ts b/packages/floating-ui-svelte/src/internal/dom.ts
index e1c27a73..60f1903b 100644
--- a/packages/floating-ui-svelte/src/internal/dom.ts
+++ b/packages/floating-ui-svelte/src/internal/dom.ts
@@ -20,16 +20,12 @@ function createAttribute(name: string) {
 }
 
 function contains(parent?: Element | null, child?: Element | null) {
-	if (!parent || !child) {
-		return false;
-	}
+	if (!parent || !child) return false;
 
 	const rootNode = child.getRootNode?.();
 
 	// First, attempt with faster native method
-	if (parent.contains(child)) {
-		return true;
-	}
+	if (parent.contains(child)) return true;
 
 	// then fallback to custom implementation with Shadow DOM support
 	if (rootNode && isShadowRoot(rootNode)) {
@@ -47,27 +43,6 @@ function contains(parent?: Element | null, child?: Element | null) {
 	return false;
 }
 
-function isVirtualPointerEvent(event: PointerEvent) {
-	if (isJSDOM()) {
-		return false;
-	}
-	return (
-		(!isAndroid() && event.width === 0 && event.height === 0) ||
-		(isAndroid() &&
-			event.width === 1 &&
-			event.height === 1 &&
-			event.pressure === 0 &&
-			event.detail === 0 &&
-			event.pointerType === "mouse") ||
-		// iOS VoiceOver returns 0.333• for width/height.
-		(event.width < 1 &&
-			event.height < 1 &&
-			event.pressure === 0 &&
-			event.detail === 0 &&
-			event.pointerType === "touch")
-	);
-}
-
 function getTarget(event: Event) {
 	if ("composedPath" in event) {
 		return event.composedPath()[0];
@@ -79,12 +54,12 @@ function getTarget(event: Event) {
 }
 
 function isEventTargetWithin(event: Event, node: Node | null | undefined) {
-	if (node == null) {
-		return false;
-	}
+	if (node == null) return false;
 
 	if ("composedPath" in event) {
-		return event.composedPath().includes(node);
+		return (
+			event.composedPath().includes(node) || node.contains(event.target as Node)
+		);
 	}
 
 	// TS thinks `event` is of type never as it assumes all browsers support composedPath, but browsers without shadow dom don't
@@ -109,6 +84,52 @@ function isMouseLikePointerType(
 	return values.includes(pointerType);
 }
 
+const pointerTypes = ["mouse", "pen", "touch"] as const;
+type PointerType = (typeof pointerTypes)[number];
+function isPointerType(str: string): str is PointerType {
+	return pointerTypes.includes(str as PointerType);
+}
+
+function stopEvent(event: Event) {
+	event.preventDefault();
+	event.stopPropagation();
+}
+
+// License: https://github.com/adobe/react-spectrum/blob/b35d5c02fe900badccd0cf1a8f23bb593419f238/packages/@react-aria/utils/src/isVirtualEvent.ts
+export function isVirtualClick(event: MouseEvent | PointerEvent): boolean {
+	// FIXME: Firefox is now emitting a deprecation warning for `mozInputSource`.
+	// Try to find a workaround for this. `react-aria` source still has the check.
+	// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+	if ((event as any).mozInputSource === 0 && event.isTrusted) {
+		return true;
+	}
+
+	if (isAndroid() && (event as PointerEvent).pointerType) {
+		return event.type === "click" && event.buttons === 1;
+	}
+
+	return event.detail === 0 && !(event as PointerEvent).pointerType;
+}
+
+function isVirtualPointerEvent(event: PointerEvent) {
+	if (isJSDOM()) return false;
+	return (
+		(!isAndroid() && event.width === 0 && event.height === 0) ||
+		(isAndroid() &&
+			event.width === 1 &&
+			event.height === 1 &&
+			event.pressure === 0 &&
+			event.detail === 0 &&
+			event.pointerType === "mouse") ||
+		// iOS VoiceOver returns 0.333• for width/height.
+		(event.width < 1 &&
+			event.height < 1 &&
+			event.pressure === 0 &&
+			event.detail === 0 &&
+			event.pointerType === "touch")
+	);
+}
+
 export {
 	getDocument,
 	activeElement,
@@ -119,4 +140,8 @@ export {
 	isEventTargetWithin,
 	isRootElement,
 	isMouseLikePointerType,
+	isPointerType,
+	stopEvent,
 };
+
+export type { PointerType };
diff --git a/packages/floating-ui-svelte/src/internal/enqueue-focus.ts b/packages/floating-ui-svelte/src/internal/enqueue-focus.ts
new file mode 100644
index 00000000..a0a49933
--- /dev/null
+++ b/packages/floating-ui-svelte/src/internal/enqueue-focus.ts
@@ -0,0 +1,25 @@
+import type { FocusableElement } from "tabbable";
+
+interface Options {
+	preventScroll?: boolean;
+	cancelPrevious?: boolean;
+	sync?: boolean;
+}
+
+let rafId = 0;
+function enqueueFocus(el: FocusableElement | null, options: Options = {}) {
+	const {
+		preventScroll = false,
+		cancelPrevious = true,
+		sync = false,
+	} = options;
+	cancelPrevious && cancelAnimationFrame(rafId);
+	const exec = () => el?.focus({ preventScroll });
+	if (sync) {
+		exec();
+	} else {
+		rafId = requestAnimationFrame(exec);
+	}
+}
+
+export { enqueueFocus };
diff --git a/packages/floating-ui-svelte/src/internal/execute-callbacks.ts b/packages/floating-ui-svelte/src/internal/execute-callbacks.ts
new file mode 100644
index 00000000..8365339e
--- /dev/null
+++ b/packages/floating-ui-svelte/src/internal/execute-callbacks.ts
@@ -0,0 +1,17 @@
+/**
+ * Executes an array of callback functions with the same arguments.
+ * @template T The types of the arguments that the callback functions take.
+ * @param callbacks array of callback functions to execute.
+ * @returns A new function that executes all of the original callback functions with the same arguments.
+ */
+export function executeCallbacks<T extends unknown[]>(
+	...callbacks: T
+): (...args: unknown[]) => void {
+	return (...args: unknown[]) => {
+		for (const callback of callbacks) {
+			if (typeof callback === "function") {
+				callback(...args);
+			}
+		}
+	};
+}
diff --git a/packages/floating-ui-svelte/src/internal/extract.ts b/packages/floating-ui-svelte/src/internal/extract.ts
new file mode 100644
index 00000000..037ed550
--- /dev/null
+++ b/packages/floating-ui-svelte/src/internal/extract.ts
@@ -0,0 +1,41 @@
+import type { Getter, MaybeGetter } from "../types.js";
+import { isFunction } from "./is.js";
+
+/**
+ * Extracts the value from a getter or a value.
+ * Optionally, a default value can be provided.
+ */
+function extract<T>(value: MaybeGetter<T>): T;
+function extract<T, D extends T>(
+	value: MaybeGetter<T>,
+	defaultValue: D,
+): Exclude<T, undefined>;
+function extract<T, D extends T | undefined = undefined>(
+	value: MaybeGetter<T>,
+	defaultValue?: D,
+): D extends undefined ? T : Exclude<T, undefined> {
+	if (isFunction(value)) {
+		const getter = value as Getter<T>;
+
+		const res =
+			getter() !== undefined
+				? getter()
+				: defaultValue !== undefined
+					? defaultValue
+					: getter();
+
+		// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+		return res as any;
+	}
+
+	// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+	if (value !== undefined) return value as any;
+
+	// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+	if (defaultValue !== undefined) return defaultValue as any;
+
+	// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+	return value as any;
+}
+
+export { extract };
diff --git a/packages/floating-ui-svelte/src/internal/get-ancestors.ts b/packages/floating-ui-svelte/src/internal/get-ancestors.ts
new file mode 100644
index 00000000..783674d5
--- /dev/null
+++ b/packages/floating-ui-svelte/src/internal/get-ancestors.ts
@@ -0,0 +1,20 @@
+import type { FloatingNodeType, ReferenceType } from "../types.js";
+
+export function getAncestors<RT extends ReferenceType = ReferenceType>(
+	nodes: Array<FloatingNodeType<RT>>,
+	id: string | undefined,
+) {
+	let allAncestors: Array<FloatingNodeType<RT>> = [];
+	let currentParentId = nodes.find((node) => node.id === id)?.parentId;
+
+	while (currentParentId) {
+		const currentNode = nodes.find((node) => node.id === currentParentId);
+		currentParentId = currentNode?.parentId;
+
+		if (currentNode) {
+			allAncestors = allAncestors.concat(currentNode);
+		}
+	}
+
+	return allAncestors;
+}
diff --git a/packages/floating-ui-svelte/src/internal/get-children.ts b/packages/floating-ui-svelte/src/internal/get-children.ts
new file mode 100644
index 00000000..caecf814
--- /dev/null
+++ b/packages/floating-ui-svelte/src/internal/get-children.ts
@@ -0,0 +1,50 @@
+import type { FloatingNodeType, ReferenceType } from "../types.js";
+
+function getChildren<RT extends ReferenceType = ReferenceType>(
+	nodes: Array<FloatingNodeType<RT>>,
+	id: string | undefined,
+) {
+	let allChildren = nodes.filter(
+		(node) => node.parentId === id && node.context?.open,
+	);
+	let currentChildren = allChildren;
+
+	while (currentChildren.length) {
+		currentChildren = nodes.filter((node) =>
+			currentChildren?.some(
+				(n) => node.parentId === n.id && node.context?.open,
+			),
+		);
+
+		allChildren = allChildren.concat(currentChildren);
+	}
+
+	return allChildren;
+}
+
+function getDeepestNode<RT extends ReferenceType = ReferenceType>(
+	nodes: Array<FloatingNodeType<RT>>,
+	id: string | undefined,
+) {
+	let deepestNodeId: string | undefined;
+	let maxDepth = -1;
+
+	function findDeepest(nodeId: string | undefined, depth: number) {
+		if (depth > maxDepth) {
+			deepestNodeId = nodeId;
+			maxDepth = depth;
+		}
+
+		const children = getChildren(nodes, nodeId);
+
+		for (const child of children) {
+			findDeepest(child.id, depth + 1);
+		}
+	}
+
+	findDeepest(id, 0);
+
+	return nodes.find((node) => node.id === deepestNodeId);
+}
+
+export { getChildren, getDeepestNode };
diff --git a/packages/floating-ui-svelte/src/internal/get-floating-focus-element.ts b/packages/floating-ui-svelte/src/internal/get-floating-focus-element.ts
new file mode 100644
index 00000000..21442e62
--- /dev/null
+++ b/packages/floating-ui-svelte/src/internal/get-floating-focus-element.ts
@@ -0,0 +1,15 @@
+export const FOCUSABLE_ATTRIBUTE = "data-floating-ui-focusable";
+
+export function getFloatingFocusElement(
+	floatingElement: HTMLElement | null | undefined,
+): HTMLElement | null {
+	if (!floatingElement) return null;
+	// Try to find the element that has `{...getFloatingProps()}` spread on it.
+	// This indicates the floating element is acting as a positioning wrapper, and
+	// so focus should be managed on the child element with the event handlers and
+	// aria props.
+	return floatingElement.hasAttribute(FOCUSABLE_ATTRIBUTE)
+		? floatingElement
+		: floatingElement.querySelector(`[${FOCUSABLE_ATTRIBUTE}]`) ||
+				floatingElement;
+}
diff --git a/packages/floating-ui-svelte/src/internal/handle-guard-focus.ts b/packages/floating-ui-svelte/src/internal/handle-guard-focus.ts
new file mode 100644
index 00000000..87c7ed56
--- /dev/null
+++ b/packages/floating-ui-svelte/src/internal/handle-guard-focus.ts
@@ -0,0 +1,33 @@
+import { afterSleep } from "./after-sleep.js";
+
+/**
+ *
+ * We apply the `aria-hidden` attribute to elements that should not be visible to screen readers
+ * under specific circumstances, mostly when in a "modal" context or when they are strictly for
+ * utility purposes, like the focus guards.
+ *
+ * When these elements receive focus before we can remove the aria-hidden attribute, we need to
+ * handle the focus in a way that does not cause an error to be logged.
+ *
+ * This function handles the focus of the guard element first by momentary removing the
+ * `aria-hidden` attribute, focusing the guard (which will cause something else to focus), and then
+ * restoring the attribute.
+ */
+function handleGuardFocus(
+	guard: HTMLElement | null,
+	focusOptions?: Parameters<HTMLElement["focus"]>[0],
+) {
+	if (!guard) return;
+	const ariaHidden = guard.getAttribute("aria-hidden");
+	guard.removeAttribute("aria-hidden");
+	guard.focus(focusOptions);
+	afterSleep(0, () => {
+		if (ariaHidden === null) {
+			guard.setAttribute("aria-hidden", "");
+		} else {
+			guard.setAttribute("aria-hidden", ariaHidden);
+		}
+	});
+}
+
+export { handleGuardFocus };
diff --git a/packages/floating-ui-svelte/src/internal/is-typable-element.ts b/packages/floating-ui-svelte/src/internal/is-typeable-element.ts
similarity index 58%
rename from packages/floating-ui-svelte/src/internal/is-typable-element.ts
rename to packages/floating-ui-svelte/src/internal/is-typeable-element.ts
index a77bb97a..b48262c0 100644
--- a/packages/floating-ui-svelte/src/internal/is-typable-element.ts
+++ b/packages/floating-ui-svelte/src/internal/is-typeable-element.ts
@@ -8,4 +8,11 @@ function isTypeableElement(element: unknown): boolean {
 	return isHTMLElement(element) && element.matches(TYPEABLE_SELECTOR);
 }
 
-export { TYPEABLE_SELECTOR, isTypeableElement };
+function isTypeableCombobox(element: Element | null) {
+	if (!element) return false;
+	return (
+		element.getAttribute("role") === "combobox" && isTypeableElement(element)
+	);
+}
+
+export { TYPEABLE_SELECTOR, isTypeableElement, isTypeableCombobox };
diff --git a/packages/floating-ui-svelte/src/internal/is.ts b/packages/floating-ui-svelte/src/internal/is.ts
new file mode 100644
index 00000000..cd957d41
--- /dev/null
+++ b/packages/floating-ui-svelte/src/internal/is.ts
@@ -0,0 +1,9 @@
+function isFunction(value: unknown): value is (...args: unknown[]) => unknown {
+	return typeof value === "function";
+}
+
+function isObject(value: unknown): value is Record<PropertyKey, unknown> {
+	return value !== null && typeof value === "object";
+}
+
+export { isFunction, isObject };
diff --git a/packages/floating-ui-svelte/src/internal/log.ts b/packages/floating-ui-svelte/src/internal/log.ts
new file mode 100644
index 00000000..71d44f94
--- /dev/null
+++ b/packages/floating-ui-svelte/src/internal/log.ts
@@ -0,0 +1,24 @@
+import { DEV } from "esm-env";
+
+let devMessageSet: Set<string> | undefined;
+if (DEV) {
+	devMessageSet = new Set();
+}
+
+function warn(...messages: string[]) {
+	const message = `Floating UI Svelte: ${messages.join(" ")}`;
+	if (!devMessageSet?.has(message)) {
+		devMessageSet?.add(message);
+		console.warn(message);
+	}
+}
+
+function error(...messages: string[]) {
+	const message = `Floating UI Svelte: ${messages.join(" ")}`;
+	if (!devMessageSet?.has(message)) {
+		devMessageSet?.add(message);
+		console.error(message);
+	}
+}
+
+export { warn, error };
diff --git a/packages/floating-ui-svelte/src/internal/mark-others.ts b/packages/floating-ui-svelte/src/internal/mark-others.ts
new file mode 100644
index 00000000..5bd0b620
--- /dev/null
+++ b/packages/floating-ui-svelte/src/internal/mark-others.ts
@@ -0,0 +1,152 @@
+import { getDocument } from "./dom.js";
+import { getNodeName } from "@floating-ui/utils/dom";
+
+type Undo = () => void;
+
+let counterMap = new WeakMap<Element, number>();
+let uncontrolledElementsSet = new WeakSet<Element>();
+let markerMap: Record<string, WeakMap<Element, number>> = {};
+let lockCount = 0;
+
+export function supportsInert(): boolean {
+	return typeof HTMLElement !== "undefined" && "inert" in HTMLElement.prototype;
+}
+
+function unwrapHost(node: Element | ShadowRoot): Element | null {
+	return (
+		node &&
+		((node as ShadowRoot).host || unwrapHost(node.parentNode as Element))
+	);
+}
+
+function correctElements(parent: HTMLElement, targets: Element[]): Element[] {
+	return targets
+		.map((target) => {
+			if (parent.contains(target)) return target;
+			const correctedTarget = unwrapHost(target);
+			if (parent.contains(correctedTarget)) return correctedTarget;
+			return null;
+		})
+		.filter((x): x is Element => x != null);
+}
+
+function applyAttributeToOthers(
+	uncorrectedAvoidElements: Element[],
+	body: HTMLElement,
+	ariaHidden: boolean,
+	inert: boolean,
+): Undo {
+	const markerName = "data-floating-ui-inert";
+	const controlAttribute = inert ? "inert" : ariaHidden ? "aria-hidden" : null;
+	const avoidElements = correctElements(body, uncorrectedAvoidElements);
+	const elementsToKeep = new Set<Node>();
+	const elementsToStop = new Set<Node>(avoidElements);
+	const hiddenElements: Element[] = [];
+
+	if (!markerMap[markerName]) {
+		markerMap[markerName] = new WeakMap();
+	}
+
+	const markerCounter = markerMap[markerName];
+
+	avoidElements.forEach(keep);
+	deep(body);
+	elementsToKeep.clear();
+
+	function keep(el: Node | undefined) {
+		if (!el || elementsToKeep.has(el)) return;
+
+		elementsToKeep.add(el);
+		el.parentNode && keep(el.parentNode);
+	}
+
+	function deep(parent: Element | null) {
+		if (!parent || elementsToStop.has(parent)) return;
+
+		[].forEach.call(parent.children, (node: Element) => {
+			if (getNodeName(node) === "script") return;
+
+			if (elementsToKeep.has(node)) {
+				deep(node);
+			} else {
+				const attr = controlAttribute
+					? node.getAttribute(controlAttribute)
+					: null;
+				const alreadyHidden = attr !== null && attr !== "false";
+				const currentCounterValue = counterMap.get(node) || 0;
+				const counterValue = controlAttribute
+					? currentCounterValue + 1
+					: currentCounterValue;
+				const markerValue = (markerCounter.get(node) || 0) + 1;
+
+				counterMap.set(node, counterValue);
+				markerCounter.set(node, markerValue);
+				hiddenElements.push(node);
+
+				if (counterValue === 1 && alreadyHidden) {
+					uncontrolledElementsSet.add(node);
+				}
+
+				if (markerValue === 1) {
+					node.setAttribute(markerName, "");
+				}
+
+				if (!alreadyHidden && controlAttribute) {
+					node.setAttribute(controlAttribute, "true");
+				}
+			}
+		});
+	}
+
+	lockCount++;
+
+	return () => {
+		for (const element of hiddenElements) {
+			const currentCounterValue = counterMap.get(element) || 0;
+			const counterValue = controlAttribute
+				? currentCounterValue - 1
+				: currentCounterValue;
+			const markerValue = (markerCounter.get(element) || 0) - 1;
+
+			counterMap.set(element, counterValue);
+			markerCounter.set(element, markerValue);
+
+			if (!counterValue) {
+				if (!uncontrolledElementsSet.has(element) && controlAttribute) {
+					element.removeAttribute(controlAttribute);
+				}
+
+				uncontrolledElementsSet.delete(element);
+			}
+
+			if (!markerValue) {
+				element.removeAttribute(markerName);
+			}
+		}
+
+		lockCount--;
+
+		if (!lockCount) {
+			counterMap = new WeakMap();
+			counterMap = new WeakMap();
+			uncontrolledElementsSet = new WeakSet();
+			markerMap = {};
+		}
+	};
+}
+
+function markOthers(
+	avoidElements: Element[],
+	ariaHidden = false,
+	inert = false,
+): Undo {
+	const body = getDocument(avoidElements[0]).body;
+	return applyAttributeToOthers(
+		avoidElements.concat(Array.from(body.querySelectorAll("[aria-live]"))),
+		body,
+		ariaHidden,
+		inert,
+	);
+}
+
+export { markOthers };
diff --git a/packages/floating-ui-svelte/src/internal/snapshot.svelte.ts b/packages/floating-ui-svelte/src/internal/snapshot.svelte.ts
new file mode 100644
index 00000000..65572f97
--- /dev/null
+++ b/packages/floating-ui-svelte/src/internal/snapshot.svelte.ts
@@ -0,0 +1,39 @@
+import type { FloatingContextData } from "../hooks/use-floating-context.svelte.js";
+import type { ReferenceType } from "../types.js";
+
+// TODO: consider the following:
+// Is it worth it to include this as part of the `FloatingContext` instance?
+// So users can call context.snapshot() and get an object?
+function snapshotFloatingContext<RT extends ReferenceType = ReferenceType>(
+	context: FloatingContextData<RT>,
+) {
+	return {
+		get current(): FloatingContextData<RT> {
+			return {
+				elements: {
+					reference: context.elements.reference,
+					floating: context.elements.floating,
+					domReference: context.elements.domReference,
+				},
+				x: context.x,
+				y: context.y,
+				placement: context.placement,
+				strategy: context.strategy,
+				middlewareData: context.middlewareData,
+				isPositioned: context.isPositioned,
+				update: context.update,
+				floatingStyles: context.floatingStyles,
+				onOpenChange: context.onOpenChange,
+				open: context.open,
+				data: context.data,
+				floatingId: context.floatingId,
+				events: context.events,
+				nodeId: context.nodeId,
+				setPositionReference: context.setPositionReference,
+				"~position": context["~position"],
+			};
+		},
+	};
+}
+
+export { snapshotFloatingContext };
diff --git a/packages/floating-ui-svelte/src/internal/style-object-to-string.ts b/packages/floating-ui-svelte/src/internal/style-object-to-string.ts
index 614f7cbf..cb868954 100644
--- a/packages/floating-ui-svelte/src/internal/style-object-to-string.ts
+++ b/packages/floating-ui-svelte/src/internal/style-object-to-string.ts
@@ -1,4 +1,6 @@
-import type { PropertiesHyphen } from "csstype";
+import type { Properties, PropertiesHyphen } from "csstype";
+import { error } from "./log.js";
+import parse from "style-to-object";
 
 function styleObjectToString(styleObject: PropertiesHyphen) {
 	return Object.entries(styleObject)
@@ -6,4 +8,35 @@ function styleObjectToString(styleObject: PropertiesHyphen) {
 		.join(" ");
 }
 
-export { styleObjectToString };
+function styleStringToObject(
+	style: string | null | undefined,
+): PropertiesHyphen {
+	if (!style) return {};
+	try {
+		return parse(style) as PropertiesHyphen;
+	} catch (err) {
+		error("Invalid style string provided via `style` prop. No styles applied.");
+		return {};
+	}
+}
+
+type MergeStylesArg = string | PropertiesHyphen | null | undefined;
+
+function mergeStyles<T extends MergeStylesArg[]>(
+	...args: T
+): string | undefined {
+	const mergedStyleObj: PropertiesHyphen = {};
+
+	for (const arg of args) {
+		if (arg === null) continue;
+		if (typeof arg === "string") {
+			Object.assign(mergedStyleObj, styleStringToObject(arg));
+		} else if (arg) {
+			Object.assign(mergedStyleObj, arg);
+		}
+	}
+
+	return styleObjectToString(mergedStyleObj);
+}
+
+export { styleObjectToString, styleStringToObject, mergeStyles };
diff --git a/packages/floating-ui-svelte/src/internal/tabbable.ts b/packages/floating-ui-svelte/src/internal/tabbable.ts
new file mode 100644
index 00000000..5e26a453
--- /dev/null
+++ b/packages/floating-ui-svelte/src/internal/tabbable.ts
@@ -0,0 +1,77 @@
+import { activeElement, contains, getDocument } from "./dom.js";
+import { tabbable } from "tabbable";
+
+function getTabbableOptions() {
+	return {
+		getShadowRoot: true,
+		displayCheck:
+			// JSDOM does not support the `tabbable` library. To solve this we can
+			// check if `ResizeObserver` is a real function (not polyfilled), which
+			// determines if the current environment is JSDOM-like.
+			typeof ResizeObserver === "function" &&
+			ResizeObserver.toString().includes("[native code]")
+				? "full"
+				: "none",
+	} as const;
+}
+
+function getTabbableIn(container: HTMLElement, direction: "next" | "prev") {
+	const allTabbable = tabbable(container, getTabbableOptions());
+
+	if (direction === "prev") {
+		allTabbable.reverse();
+	}
+
+	const activeEl = activeElement(getDocument(container)) as HTMLElement;
+
+	const activeIndex = allTabbable.indexOf(activeEl);
+	const nextTabbableElements = allTabbable.slice(activeIndex + 1);
+	return nextTabbableElements[0];
+}
+
+function getNextTabbable() {
+	return getTabbableIn(document.body, "next");
+}
+
+function getPreviousTabbable() {
+	return getTabbableIn(document.body, "prev");
+}
+
+function isOutsideEvent(event: FocusEvent, container?: Element | null) {
+	const containerElement = container || (event.currentTarget as Element);
+	const relatedTarget = event.relatedTarget as HTMLElement | null;
+	return !relatedTarget || !contains(containerElement, relatedTarget);
+}
+
+function disableFocusInside(container: HTMLElement) {
+	const tabbableElements = tabbable(container, getTabbableOptions());
+	for (const element of tabbableElements) {
+		element.dataset.tabindex = element.getAttribute("tabindex") || "";
+		element.setAttribute("tabindex", "-1");
+	}
+}
+
+function enableFocusInside(container: HTMLElement) {
+	const elements = Array.from(
+		container.querySelectorAll<HTMLElement>("[data-tabindex]"),
+	);
+	for (const element of elements) {
+		const tabindex = element.dataset.tabindex;
+		delete element.dataset.tabindex;
+		if (tabindex) {
+			element.setAttribute("tabindex", tabindex);
+		} else {
+			element.removeAttribute("tabindex");
+		}
+	}
+}
+
+export {
+	getTabbableOptions,
+	getTabbableIn,
+	getNextTabbable,
+	getPreviousTabbable,
+	isOutsideEvent,
+	disableFocusInside,
+	enableFocusInside,
+};
diff --git a/packages/floating-ui-svelte/src/internal/watch.svelte.ts b/packages/floating-ui-svelte/src/internal/watch.svelte.ts
new file mode 100644
index 00000000..236276e7
--- /dev/null
+++ b/packages/floating-ui-svelte/src/internal/watch.svelte.ts
@@ -0,0 +1,217 @@
+import { untrack } from "svelte";
+
+type Getter<T> = () => T;
+
+function runEffect(
+	flush: "post" | "pre",
+	effect: (() => void) | VoidFunction,
+): void {
+	switch (flush) {
+		case "post":
+			$effect(effect);
+			break;
+		case "pre":
+			$effect.pre(effect);
+			break;
+	}
+}
+
+export type WatchOptions = {
+	/**
+	 * If `true`, the effect doesn't run until one of the `sources` changes.
+	 *
+	 * @default false
+	 */
+	lazy?: boolean;
+};
+
+function runWatcher<T>(
+	sources: Getter<T> | Array<Getter<T>>,
+	flush: "post" | "pre",
+	effect:
+		| ((
+				values: T | Array<T>,
+				previousValues: T | undefined | Array<T | undefined>,
+		  ) => void)
+		| VoidFunction,
+	options: WatchOptions = {},
+): void {
+	const { lazy = false } = options;
+
+	// Run the effect immediately if `lazy` is `false`.
+	let active = !lazy;
+
+	// On the first run, if the dependencies are an array, pass an empty array
+	// to the previous value instead of `undefined` to allow destructuring.
+	//
+	// watch(() => [a, b], ([a, b], [prevA, prevB]) => { ... });
+	let previousValues: T | undefined | Array<T | undefined> = Array.isArray(
+		sources,
+	)
+		? []
+		: undefined;
+
+	runEffect(flush, () => {
+		const values = Array.isArray(sources)
+			? sources.map((source) => source())
+			: sources();
+
+		if (!active) {
+			active = true;
+			previousValues = values;
+			return;
+		}
+
+		const cleanup = untrack(() => effect(values, previousValues));
+		previousValues = values;
+		return cleanup;
+	});
+}
+
+function runWatcherOnce<T>(
+	sources: Getter<T> | Array<Getter<T>>,
+	flush: "post" | "pre",
+	effect:
+		| ((values: T | Array<T>, previousValues: T | Array<T>) => void)
+		| VoidFunction,
+): void {
+	const cleanupRoot = $effect.root(() => {
+		let stop = false;
+		runWatcher(
+			sources,
+			flush,
+			(values, previousValues) => {
+				if (stop) {
+					cleanupRoot();
+					return;
+				}
+
+				// Since `lazy` is `true`, `previousValues` is always defined.
+				const cleanup = effect(values, previousValues as T | Array<T>);
+				stop = true;
+				return cleanup;
+			},
+			// Running the effect immediately just once makes no sense at all.
+			// That's just `onMount` with extra steps.
+			{ lazy: true },
+		);
+	});
+
+	$effect(() => {
+		return cleanupRoot;
+	});
+}
+
+export function watch<T extends Array<unknown>>(
+	sources: {
+		[K in keyof T]: Getter<T[K]>;
+	},
+	effect:
+		| ((
+				values: T,
+				previousValues: {
+					[K in keyof T]: T[K] | undefined;
+				},
+		  ) => void)
+		| VoidFunction,
+	options?: WatchOptions,
+): void;
+
+export function watch<T>(
+	source: Getter<T>,
+	effect: ((value: T, previousValue: T | undefined) => void) | VoidFunction,
+	options?: WatchOptions,
+): void;
+
+export function watch<T>(
+	sources: Getter<T> | Array<Getter<T>>,
+	effect:
+		| ((
+				values: T | Array<T>,
+				previousValues: T | undefined | Array<T | undefined>,
+		  ) => void)
+		| VoidFunction,
+	options?: WatchOptions,
+): void {
+	runWatcher(sources, "post", effect, options);
+}
+
+function watchPre<T extends Array<unknown>>(
+	sources: {
+		[K in keyof T]: Getter<T[K]>;
+	},
+	effect:
+		| ((
+				values: T,
+				previousValues: {
+					[K in keyof T]: T[K] | undefined;
+				},
+		  ) => void)
+		| VoidFunction,
+	options?: WatchOptions,
+): void;
+
+function watchPre<T>(
+	source: Getter<T>,
+	effect: ((value: T, previousValue: T | undefined) => void) | VoidFunction,
+	options?: WatchOptions,
+): void;
+
+function watchPre<T>(
+	sources: Getter<T> | Array<Getter<T>>,
+	effect:
+		| ((
+				values: T | Array<T>,
+				previousValues: T | undefined | Array<T | undefined>,
+		  ) => void)
+		| VoidFunction,
+	options?: WatchOptions,
+): void {
+	runWatcher(sources, "pre", effect, options);
+}
+
+watch.pre = watchPre;
+
+export function watchOnce<T extends Array<unknown>>(
+	sources: {
+		[K in keyof T]: Getter<T[K]>;
+	},
+	effect: ((values: T, previousValues: T) => void) | VoidFunction,
+): void;
+
+export function watchOnce<T>(
+	source: Getter<T>,
+	effect: ((value: T, previousValue: T) => void) | VoidFunction,
+): void;
+
+export function watchOnce<T>(
+	source: Getter<T> | Array<Getter<T>>,
+	effect:
+		| ((value: T | Array<T>, previousValue: T | Array<T>) => void)
+		| VoidFunction,
+): void {
+	runWatcherOnce(source, "post", effect);
+}
+
+function watchOncePre<T extends Array<unknown>>(
+	sources: {
+		[K in keyof T]: Getter<T[K]>;
+	},
+	effect: ((values: T, previousValues: T) => void) | VoidFunction,
+): void;
+
+function watchOncePre<T>(
+	source: Getter<T>,
+	effect: ((value: T, previousValue: T) => void) | VoidFunction,
+): void;
+
+function watchOncePre<T>(
+	source: Getter<T> | Array<Getter<T>>,
+	effect:
+		| ((value: T | Array<T>, previousValue: T | Array<T>) => void)
+		| VoidFunction,
+): void {
+	runWatcherOnce(source, "pre", effect);
+}
+
+watchOnce.pre = watchOncePre;
diff --git a/packages/floating-ui-svelte/src/safe-polygon.ts b/packages/floating-ui-svelte/src/safe-polygon.ts
new file mode 100644
index 00000000..86d8f15d
--- /dev/null
+++ b/packages/floating-ui-svelte/src/safe-polygon.ts
@@ -0,0 +1,412 @@
+import { isElement } from "@floating-ui/utils/dom";
+import type { Rect, Side } from "./types.js";
+import { contains, getTarget } from "./internal/dom.js";
+import { getChildren } from "./internal/get-children.js";
+import type { HandleCloseFn } from "./hooks/use-hover.svelte.js";
+
+type Point = [number, number];
+type Polygon = Point[];
+
+function isPointInPolygon(point: Point, polygon: Polygon) {
+	const [x, y] = point;
+	let isInside = false;
+	const length = polygon.length;
+	for (let i = 0, j = length - 1; i < length; j = i++) {
+		const [xi, yi] = polygon[i] || [0, 0];
+		const [xj, yj] = polygon[j] || [0, 0];
+		const intersect =
+			yi >= y !== yj >= y && x <= ((xj - xi) * (y - yi)) / (yj - yi) + xi;
+		if (intersect) {
+			isInside = !isInside;
+		}
+	}
+	return isInside;
+}
+
+function isInside(point: Point, rect: Rect) {
+	return (
+		point[0] >= rect.x &&
+		point[0] <= rect.x + rect.width &&
+		point[1] >= rect.y &&
+		point[1] <= rect.y + rect.height
+	);
+}
+
+interface SafePolygonOptions {
+	buffer?: number;
+	blockPointerEvents?: boolean;
+	requireIntent?: boolean;
+}
+
+interface IntentState {
+	velocities: Array<{ x: number; y: number; timestamp: number }>;
+	maxSamples: number;
+}
+
+/**
+ * Generates a safe polygon area that the user can traverse without closing the
+ * floating element once leaving the reference element.
+ * @see https://floating-ui.com/docs/useHover#safepolygon
+ */
+function safePolygon(options: SafePolygonOptions = {}) {
+	const {
+		buffer = 0.5,
+		blockPointerEvents = false,
+		requireIntent = true,
+	} = options;
+
+	const fn: HandleCloseFn = (context) => {
+		let timeoutId: number;
+		let hasLanded = false;
+
+		const intentState: IntentState = {
+			velocities: [],
+			maxSamples: 5,
+		};
+
+		function updateIntentState(x: number, y: number): boolean {
+			const now = performance.now();
+			const velocities = intentState.velocities;
+
+			if (velocities.length >= intentState.maxSamples) {
+				velocities.shift();
+			}
+
+			velocities.push({ x, y, timestamp: now });
+
+			if (velocities.length < 3) return false;
+
+			// Calculate average velocity over last few samples
+			const avgVelocity =
+				velocities.reduce((acc, curr, i, arr) => {
+					if (i === 0) return acc;
+					const prev = arr[i - 1];
+					const dt = curr.timestamp - prev.timestamp;
+					const dx = curr.x - prev.x;
+					const dy = curr.y - prev.y;
+					return acc + Math.sqrt(dx * dx + dy * dy) / dt;
+				}, 0) /
+				(velocities.length - 1);
+
+			return avgVelocity < 0.03;
+		}
+		return function onMouseMove(event: MouseEvent) {
+			function close() {
+				window.clearTimeout(timeoutId);
+				context.onClose();
+			}
+
+			window.clearTimeout(timeoutId);
+
+			if (
+				!context.elements.domReference ||
+				!context.elements.floating ||
+				context.placement == null ||
+				context.x == null ||
+				context.y == null
+			) {
+				return;
+			}
+
+			const { clientX, clientY } = event;
+			const clientPoint: Point = [clientX, clientY];
+			const target = getTarget(event) as Element | null;
+			const isLeave = event.type === "mouseleave";
+			const isOverFloatingEl = contains(context.elements.floating, target);
+			const isOverReferenceEl = contains(context.elements.domReference, target);
+			const refRect = context.elements.domReference.getBoundingClientRect();
+			const rect = context.elements.floating.getBoundingClientRect();
+			const side = context.placement.split("-")[0] as Side;
+			const cursorLeaveFromRight = context.x > rect.right - rect.width / 2;
+			const cursorLeaveFromBottom = context.y > rect.bottom - rect.height / 2;
+			const isOverReferenceRect = isInside(clientPoint, refRect);
+			const isFloatingWider = rect.width > refRect.width;
+			const isFloatingTaller = rect.height > refRect.height;
+			const left = (isFloatingWider ? refRect : rect).left;
+			const right = (isFloatingWider ? refRect : rect).right;
+			const top = (isFloatingTaller ? refRect : rect).top;
+			const bottom = (isFloatingTaller ? refRect : rect).bottom;
+
+			if (isOverFloatingEl) {
+				hasLanded = true;
+				intentState.velocities = [];
+
+				if (!isLeave) return;
+			}
+
+			if (isOverReferenceEl) {
+				hasLanded = false;
+			}
+
+			if (isOverReferenceEl && !isLeave) {
+				hasLanded = true;
+				return;
+			}
+
+			// Prevent overlapping floating element from being stuck in an open-close
+			// loop: https://github.com/floating-ui/floating-ui/issues/1910
+			if (
+				isLeave &&
+				isElement(event.relatedTarget) &&
+				contains(context.elements.floating, event.relatedTarget)
+			) {
+				return;
+			}
+
+			// If any nested child is open, abort.
+
+			if (
+				context.tree &&
+				getChildren(context.tree.nodes, context.nodeId).some(
+					({ context }) => context?.open,
+				)
+			) {
+				return;
+			}
+
+			// If the pointer is leaving from the opposite side, the "buffer" logic
+			// creates a point where the floating element remains open, but should be
+			// ignored.
+			// A constant of 1 handles floating point rounding errors.
+			if (
+				(side === "top" && context.y >= refRect.bottom - 1) ||
+				(side === "bottom" && context.y <= refRect.top + 1) ||
+				(side === "left" && context.x >= refRect.right - 1) ||
+				(side === "right" && context.x <= refRect.left + 1)
+			) {
+				return close();
+			}
+
+			// Ignore when the cursor is within the rectangular trough between the
+			// two elements. Since the triangle is created from the cursor point,
+			// which can start beyond the ref element's edge, traversing back and
+			// forth from the ref to the floating element can cause it to close. This
+			// ensures it always remains open in that case.
+			let rectPoly: Point[] = [];
+
+			switch (side) {
+				case "top":
+					rectPoly = [
+						[left, refRect.top + 1],
+						[left, rect.bottom - 1],
+						[right, rect.bottom - 1],
+						[right, refRect.top + 1],
+					];
+					break;
+				case "bottom":
+					rectPoly = [
+						[left, rect.top + 1],
+						[left, refRect.bottom - 1],
+						[right, refRect.bottom - 1],
+						[right, rect.top + 1],
+					];
+					break;
+				case "left":
+					rectPoly = [
+						[rect.right - 1, bottom],
+						[rect.right - 1, top],
+						[refRect.left + 1, top],
+						[refRect.left + 1, bottom],
+					];
+					break;
+				case "right":
+					rectPoly = [
+						[refRect.right - 1, bottom],
+						[refRect.right - 1, top],
+						[rect.left + 1, top],
+						[rect.left + 1, bottom],
+					];
+					break;
+			}
+
+			function getPolygon([x, y]: Point): Array<Point> {
+				switch (side) {
+					case "top": {
+						const cursorPointOne: Point = [
+							isFloatingWider
+								? x + buffer / 2
+								: cursorLeaveFromRight
+									? x + buffer * 4
+									: x - buffer * 4,
+							y + buffer + 1,
+						];
+						const cursorPointTwo: Point = [
+							isFloatingWider
+								? x - buffer / 2
+								: cursorLeaveFromRight
+									? x + buffer * 4
+									: x - buffer * 4,
+							y + buffer + 1,
+						];
+						const commonPoints: [Point, Point] = [
+							[
+								rect.left,
+								cursorLeaveFromRight
+									? rect.bottom - buffer
+									: isFloatingWider
+										? rect.bottom - buffer
+										: rect.top,
+							],
+							[
+								rect.right,
+								cursorLeaveFromRight
+									? isFloatingWider
+										? rect.bottom - buffer
+										: rect.top
+									: rect.bottom - buffer,
+							],
+						];
+
+						return [cursorPointOne, cursorPointTwo, ...commonPoints];
+					}
+					case "bottom": {
+						const cursorPointOne: Point = [
+							isFloatingWider
+								? x + buffer / 2
+								: cursorLeaveFromRight
+									? x + buffer * 4
+									: x - buffer * 4,
+							y - buffer,
+						];
+						const cursorPointTwo: Point = [
+							isFloatingWider
+								? x - buffer / 2
+								: cursorLeaveFromRight
+									? x + buffer * 4
+									: x - buffer * 4,
+							y - buffer,
+						];
+						const commonPoints: [Point, Point] = [
+							[
+								rect.left,
+								cursorLeaveFromRight
+									? rect.top + buffer
+									: isFloatingWider
+										? rect.top + buffer
+										: rect.bottom,
+							],
+							[
+								rect.right,
+								cursorLeaveFromRight
+									? isFloatingWider
+										? rect.top + buffer
+										: rect.bottom
+									: rect.top + buffer,
+							],
+						];
+
+						return [cursorPointOne, cursorPointTwo, ...commonPoints];
+					}
+					case "left": {
+						const cursorPointOne: Point = [
+							x + buffer + 1,
+							isFloatingTaller
+								? y + buffer / 2
+								: cursorLeaveFromBottom
+									? y + buffer * 4
+									: y - buffer * 4,
+						];
+						const cursorPointTwo: Point = [
+							x + buffer + 1,
+							isFloatingTaller
+								? y - buffer / 2
+								: cursorLeaveFromBottom
+									? y + buffer * 4
+									: y - buffer * 4,
+						];
+						const commonPoints: [Point, Point] = [
+							[
+								cursorLeaveFromBottom
+									? rect.right - buffer
+									: isFloatingTaller
+										? rect.right - buffer
+										: rect.left,
+								rect.top,
+							],
+							[
+								cursorLeaveFromBottom
+									? isFloatingTaller
+										? rect.right - buffer
+										: rect.left
+									: rect.right - buffer,
+								rect.bottom,
+							],
+						];
+
+						return [...commonPoints, cursorPointOne, cursorPointTwo];
+					}
+					case "right": {
+						const cursorPointOne: Point = [
+							x - buffer,
+							isFloatingTaller
+								? y + buffer / 2
+								: cursorLeaveFromBottom
+									? y + buffer * 4
+									: y - buffer * 4,
+						];
+						const cursorPointTwo: Point = [
+							x - buffer,
+							isFloatingTaller
+								? y - buffer / 2
+								: cursorLeaveFromBottom
+									? y + buffer * 4
+									: y - buffer * 4,
+						];
+						const commonPoints: [Point, Point] = [
+							[
+								cursorLeaveFromBottom
+									? rect.left + buffer
+									: isFloatingTaller
+										? rect.left + buffer
+										: rect.right,
+								rect.top,
+							],
+							[
+								cursorLeaveFromBottom
+									? isFloatingTaller
+										? rect.left + buffer
+										: rect.right
+									: rect.left + buffer,
+								rect.bottom,
+							],
+						];
+
+						return [cursorPointOne, cursorPointTwo, ...commonPoints];
+					}
+				}
+			}
+
+			if (isPointInPolygon([clientX, clientY], rectPoly)) {
+				return;
+			}
+
+			if (hasLanded && !isOverReferenceRect) {
+				return close();
+			}
+
+			if (!isLeave && requireIntent && updateIntentState(clientX, clientY)) {
+				return close();
+			}
+
+			if (
+				!isPointInPolygon(
+					[clientX, clientY],
+					getPolygon([context.x, context.y]),
+				)
+			) {
+				close();
+			} else if (!hasLanded && requireIntent) {
+				timeoutId = window.setTimeout(close, 40);
+			}
+		};
+	};
+
+	fn.__options = {
+		blockPointerEvents,
+	};
+
+	return fn;
+}
+
+export type { SafePolygonOptions };
+export { safePolygon };
diff --git a/packages/floating-ui-svelte/src/types.ts b/packages/floating-ui-svelte/src/types.ts
index 4b19995d..f72e1db1 100644
--- a/packages/floating-ui-svelte/src/types.ts
+++ b/packages/floating-ui-svelte/src/types.ts
@@ -1,3 +1,6 @@
+import type { Axis, Length, Side, VirtualElement } from "@floating-ui/dom";
+import type { FloatingContextData } from "./hooks/use-floating-context.svelte.js";
+
 type OpenChangeReason =
 	| "outside-press"
 	| "escape-key"
@@ -6,7 +9,112 @@ type OpenChangeReason =
 	| "click"
 	| "hover"
 	| "focus"
+	| "focus-out"
 	| "list-navigation"
 	| "safe-polygon";
 
-export type { OpenChangeReason };
+type ReferenceType = Element | VirtualElement;
+
+type NarrowedElement<T> = T extends Element ? T : Element;
+
+type Boxed<T> = { current: T };
+
+type Coords = { [key in Axis]: number };
+type Dimensions = { [key in Length]: number };
+type Rect = Coords & Dimensions;
+
+interface FloatingEvents {
+	// biome-ignore lint/suspicious/noExplicitAny: From the port
+	emit<T extends string>(event: T, data?: any): void;
+	/**
+	 * Listen for events emitted by the floating tree.
+	 * Returns a function to remove the listener.
+	 */
+	// biome-ignore lint/suspicious/noExplicitAny: From the port
+	on(event: string, handler: (data: any) => void): () => void;
+	// biome-ignore lint/suspicious/noExplicitAny: From the port
+	off(event: string, handler: (data: any) => void): void;
+}
+
+interface ContextData<RT extends ReferenceType = ReferenceType> {
+	/**
+	 * The latest even that caused the open state to change.
+	 */
+	openEvent?: Event;
+
+	floatingContext?: FloatingContextData<RT>;
+
+	/** @deprecated use `onTypingChange` prop in `useTypeahead` */
+	typing?: boolean;
+
+	/**
+	 * Arbitrary data produced and consumed by other hooks.
+	 */
+	[key: string]: unknown;
+}
+
+type OnOpenChange = (
+	open: boolean,
+	event?: Event,
+	reason?: OpenChangeReason,
+) => void;
+
+interface FloatingNodeType<RT extends ReferenceType = ReferenceType> {
+	/**
+	 * The unique id for the node.
+	 */
+	id: string | undefined;
+
+	/**
+	 * The parent id for the node.
+	 */
+	parentId: string | null;
+
+	/**
+	 * An optional context object that can be used to pass data between hooks.
+	 */
+	context?: FloatingContextData<RT>;
+}
+
+interface FloatingTreeType<RT extends ReferenceType = ReferenceType> {
+	nodes: FloatingNodeType<RT>[];
+	events: FloatingEvents;
+	addNode(node: FloatingNodeType): void;
+	removeNode(node: FloatingNodeType): void;
+}
+
+type WhileElementsMounted<RT extends ReferenceType = ReferenceType> = (
+	reference: RT,
+	floating: HTMLElement,
+	update: () => void,
+) => () => void;
+
+type Getter<T> = () => T;
+type MaybeGetter<T> = T | Getter<T>;
+
+interface WithRef<T extends Element = HTMLElement> {
+	/**
+	 * A bindable reference to the element.
+	 */
+	ref?: T | null;
+}
+
+export type {
+	OpenChangeReason,
+	FloatingEvents,
+	ContextData,
+	FloatingNodeType,
+	FloatingTreeType,
+	ReferenceType,
+	NarrowedElement,
+	OnOpenChange,
+	Getter,
+	MaybeGetter,
+	WhileElementsMounted,
+	WithRef,
+	Boxed,
+	Rect,
+	Coords,
+	Dimensions,
+	Side,
+};
diff --git a/packages/floating-ui-svelte/svelte.config.js b/packages/floating-ui-svelte/svelte.config.js
index 40126808..169e5230 100644
--- a/packages/floating-ui-svelte/svelte.config.js
+++ b/packages/floating-ui-svelte/svelte.config.js
@@ -4,6 +4,13 @@ import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	preprocess: [vitePreprocess()],
+	kit: {
+		files: {
+			routes: "./test/visual/routes",
+			appTemplate: "./test/visual/app.html",
+			params: "./test/visual/params",
+		},
+	},
 };
 
 export default config;
diff --git a/packages/floating-ui-svelte/test/components/floating-arrow.ts b/packages/floating-ui-svelte/test/components/floating-arrow.ts
deleted file mode 100644
index 053b210c..00000000
--- a/packages/floating-ui-svelte/test/components/floating-arrow.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import { render, screen } from "@testing-library/svelte";
-import { describe, expect, it } from "vitest";
-import FloatingArrow from "../../src/components/floating-arrow.svelte";
-import { useFloating } from "../../src/hooks/use-floating.svelte.js";
-import { withRunes } from "../internal/with-runes.svelte.js";
-
-describe("FloatingArrow", () => {
-	it(
-		"renders the component to default props",
-		withRunes(() => {
-			const arrowRef = document.createElement("div");
-			const floating = useFloating();
-			render(FloatingArrow, {
-				props: { ref: arrowRef, context: floating.context },
-			});
-			const component = screen.getByTestId("floating-arrow");
-			expect(component).toBeInTheDocument();
-		}),
-	);
-
-	it(
-		"renders position based on context placement",
-		withRunes(() => {
-			const arrowRef = document.createElement("div");
-			const floating = useFloating({ placement: "left" });
-			render(FloatingArrow, {
-				props: {
-					ref: arrowRef,
-					context: floating.context,
-					width: 20,
-					height: 20,
-				},
-			});
-			const component = screen.getByTestId("floating-arrow");
-			expect(component.style.left).toBe("calc(100% - 0px)");
-		}),
-	);
-
-	it(
-		"renders with a custom width and height",
-		withRunes(() => {
-			const arrowRef = document.createElement("div");
-			const floating = useFloating();
-			render(FloatingArrow, {
-				props: {
-					ref: arrowRef,
-					context: floating.context,
-					width: 20,
-					height: 20,
-				},
-			});
-			const component = screen.getByTestId("floating-arrow");
-			expect(component.getAttribute("width")).equals("20");
-			expect(component.getAttribute("height")).equals("20");
-		}),
-	);
-
-	it(
-		"renders with a custom transform",
-		withRunes(() => {
-			const arrowRef = document.createElement("div");
-			const floating = useFloating();
-			render(FloatingArrow, {
-				props: { ref: arrowRef, context: floating.context, transform: "123px" },
-			});
-			const component = screen.getByTestId("floating-arrow");
-			expect(component.style.transform).toContain("123px");
-		}),
-	);
-
-	it(
-		"renders with a custom fill",
-		withRunes(() => {
-			const arrowRef = document.createElement("div");
-			const floating = useFloating();
-			const testFillColor = "green";
-			render(FloatingArrow, {
-				props: {
-					ref: arrowRef,
-					context: floating.context,
-					fill: testFillColor,
-				},
-			});
-			const component = screen.getByTestId("floating-arrow");
-			expect(component.style.fill).toContain(testFillColor);
-		}),
-	);
-});
diff --git a/packages/floating-ui-svelte/test/hooks/use-dismiss.ts b/packages/floating-ui-svelte/test/hooks/use-dismiss.ts
deleted file mode 100644
index a4df043d..00000000
--- a/packages/floating-ui-svelte/test/hooks/use-dismiss.ts
+++ /dev/null
@@ -1,271 +0,0 @@
-import { fireEvent, render, screen } from "@testing-library/svelte";
-import { describe, expect, it, vi } from "vitest";
-import App from "./wrapper-components/use-dismiss.svelte";
-
-describe("useDismiss", () => {
-	describe("default", () => {
-		it("does dismiss on outside pointerdown", async () => {
-			render(App, { open: true });
-
-			expect(screen.queryByTestId("floating")).toBeInTheDocument();
-
-			await fireEvent.pointerDown(document);
-
-			expect(screen.queryByTestId("floating")).not.toBeInTheDocument();
-		});
-
-		it("does dismiss on `Escape` key press", async () => {
-			render(App, { open: true });
-
-			expect(screen.queryByTestId("floating")).toBeInTheDocument();
-
-			await fireEvent.keyDown(document, { key: "Escape" });
-
-			expect(screen.queryByTestId("floating")).not.toBeInTheDocument();
-		});
-	});
-
-	describe("enabled", () => {
-		it("does dismiss when set to `true`", async () => {
-			render(App, { open: true, enabled: true });
-
-			expect(screen.queryByTestId("floating")).toBeInTheDocument();
-
-			await fireEvent.pointerDown(document);
-
-			expect(screen.queryByTestId("floating")).not.toBeInTheDocument();
-		});
-
-		it("does not dismiss when set to `false`", async () => {
-			render(App, { open: true, enabled: false });
-
-			expect(screen.queryByTestId("floating")).toBeInTheDocument();
-
-			await fireEvent.pointerDown(document);
-
-			expect(screen.queryByTestId("floating")).toBeInTheDocument();
-		});
-	});
-
-	describe("escapeKey", () => {
-		it("does dismiss on `Escape` key press when set to `true`", async () => {
-			render(App, { open: true, escapeKey: true });
-
-			expect(screen.queryByTestId("floating")).toBeInTheDocument();
-
-			await fireEvent.keyDown(document, { key: "Escape" });
-
-			expect(screen.queryByTestId("floating")).not.toBeInTheDocument();
-		});
-
-		it("does not dismiss on `Escape` key press when set to `false`", async () => {
-			render(App, { open: true, escapeKey: false });
-
-			expect(screen.queryByTestId("floating")).toBeInTheDocument();
-
-			await fireEvent.keyDown(document, { key: "Escape" });
-
-			expect(screen.queryByTestId("floating")).toBeInTheDocument();
-		});
-	});
-
-	describe("outsidePress", () => {
-		describe("boolean", () => {
-			it("does dismiss on outside press when set to `true`", async () => {
-				render(App, { open: true, outsidePress: true });
-
-				expect(screen.queryByTestId("floating")).toBeInTheDocument();
-
-				await fireEvent.pointerDown(document);
-
-				expect(screen.queryByTestId("floating")).not.toBeInTheDocument();
-			});
-
-			it("does not dismiss on outside press when set to `false`", async () => {
-				render(App, { open: true, outsidePress: false });
-
-				expect(screen.queryByTestId("floating")).toBeInTheDocument();
-
-				await fireEvent.pointerDown(document);
-
-				expect(screen.queryByTestId("floating")).toBeInTheDocument();
-			});
-		});
-		describe("function", () => {
-			it("does dismiss on outside press when the function returns `true`", async () => {
-				const outsidePress = vi.fn(() => true);
-				render(App, { open: true, outsidePress });
-
-				expect(outsidePress).not.toHaveBeenCalled();
-
-				expect(screen.queryByTestId("floating")).toBeInTheDocument();
-
-				await fireEvent.pointerDown(document);
-
-				expect(outsidePress).toHaveBeenCalledOnce();
-
-				expect(screen.queryByTestId("floating")).not.toBeInTheDocument();
-			});
-
-			it("does not dismiss on outside press when the function returns `false`", async () => {
-				const outsidePress = vi.fn(() => false);
-				render(App, { open: true, outsidePress: outsidePress });
-
-				expect(outsidePress).not.toHaveBeenCalled();
-
-				expect(screen.queryByTestId("floating")).toBeInTheDocument();
-
-				await fireEvent.pointerDown(document);
-
-				expect(outsidePress).toHaveBeenCalledOnce();
-
-				expect(screen.queryByTestId("floating")).toBeInTheDocument();
-			});
-
-			it.skip("passes the corresponding event as argument", async () => {
-				const outsidePress = vi.fn(() => true);
-				render(App, { open: true, outsidePress });
-
-				expect(outsidePress).not.toHaveBeenCalled();
-
-				const event = new MouseEvent("pointerdown");
-
-				await fireEvent.pointerDown(document, event);
-
-				expect(outsidePress.mock.calls.at(0)?.at(0)).toBe(event);
-			});
-		});
-	});
-
-	describe("outsidePressEvent", () => {
-		it("does dismiss on outside `pointerdown` event when set to `pointerdown`", async () => {
-			render(App, {
-				open: true,
-				outsidePress: true,
-				outsidePressEvent: "pointerdown",
-			});
-
-			expect(screen.queryByTestId("floating")).toBeInTheDocument();
-
-			await fireEvent.pointerDown(document);
-
-			expect(screen.queryByTestId("floating")).not.toBeInTheDocument();
-		});
-
-		it("does dismiss on outside `mousedown` event when set to `mousedown`", async () => {
-			render(App, {
-				open: true,
-				outsidePress: true,
-				outsidePressEvent: "mousedown",
-			});
-
-			expect(screen.queryByTestId("floating")).toBeInTheDocument();
-
-			await fireEvent.mouseDown(document);
-
-			expect(screen.queryByTestId("floating")).not.toBeInTheDocument();
-		});
-
-		it("does dismiss on outside `click` event when set to `click`", async () => {
-			render(App, {
-				open: true,
-				outsidePress: true,
-				outsidePressEvent: "click",
-			});
-
-			expect(screen.queryByTestId("floating")).toBeInTheDocument();
-
-			await fireEvent.click(document);
-
-			expect(screen.queryByTestId("floating")).not.toBeInTheDocument();
-		});
-	});
-
-	describe("referencePress", () => {
-		it("does dismiss on reference press when set to `true`", async () => {
-			render(App, { open: true, referencePress: true });
-
-			expect(screen.queryByTestId("floating")).toBeInTheDocument();
-
-			await fireEvent.pointerDown(screen.getByTestId("reference"));
-
-			expect(screen.queryByTestId("floating")).not.toBeInTheDocument();
-		});
-
-		it("does not dismiss on reference press when set to `false`", async () => {
-			render(App, { open: true, referencePress: false });
-
-			expect(screen.queryByTestId("floating")).toBeInTheDocument();
-
-			await fireEvent.pointerDown(screen.getByTestId("reference"));
-
-			expect(screen.queryByTestId("floating")).toBeInTheDocument();
-		});
-	});
-
-	describe("referencePressEvent", () => {
-		it("does dismiss on reference `pointerdown` event when set to `pointerdown`", async () => {
-			render(App, {
-				open: true,
-				referencePress: true,
-				referencePressEvent: "pointerdown",
-			});
-
-			expect(screen.queryByTestId("floating")).toBeInTheDocument();
-
-			await fireEvent.pointerDown(screen.getByTestId("reference"));
-
-			expect(screen.queryByTestId("floating")).not.toBeInTheDocument();
-		});
-
-		it("does dismiss on reference `mousedown` event when set to `mousedown`", async () => {
-			render(App, {
-				open: true,
-				referencePress: true,
-				referencePressEvent: "mousedown",
-			});
-
-			expect(screen.queryByTestId("floating")).toBeInTheDocument();
-
-			await fireEvent.mouseDown(screen.getByTestId("reference"));
-
-			expect(screen.queryByTestId("floating")).not.toBeInTheDocument();
-		});
-
-		it("does dismiss on reference `click` event when set to `click`", async () => {
-			render(App, {
-				open: true,
-				referencePress: true,
-				referencePressEvent: "click",
-			});
-
-			expect(screen.queryByTestId("floating")).toBeInTheDocument();
-
-			await fireEvent.click(screen.getByTestId("reference"));
-
-			expect(screen.queryByTestId("floating")).not.toBeInTheDocument();
-		});
-	});
-
-	describe("ancestorScroll", () => {
-		it("does dismiss on ancestor scroll when set to `true`", async () => {
-			render(App, { open: true, ancestorScroll: true });
-
-			expect(screen.queryByTestId("floating")).toBeInTheDocument();
-
-			await fireEvent.scroll(window);
-
-			expect(screen.queryByTestId("floating")).not.toBeInTheDocument();
-		});
-
-		it("does not dismiss on ancestor scroll when set to `false`", async () => {
-			render(App, { open: true, ancestorScroll: false });
-
-			expect(screen.queryByTestId("floating")).toBeInTheDocument();
-
-			await fireEvent.scroll(window);
-
-			expect(screen.queryByTestId("floating")).toBeInTheDocument();
-		});
-	});
-});
diff --git a/packages/floating-ui-svelte/test/hooks/wrapper-components/use-click.svelte b/packages/floating-ui-svelte/test/hooks/wrapper-components/use-click.svelte
deleted file mode 100644
index 7174f591..00000000
--- a/packages/floating-ui-svelte/test/hooks/wrapper-components/use-click.svelte
+++ /dev/null
@@ -1,53 +0,0 @@
-<script lang="ts">
-import { autoUpdate } from "@floating-ui/dom";
-import {
-	type UseClickOptions,
-	useClick,
-} from "../../../src/hooks/use-click.svelte.js";
-import { useFloating } from "../../../src/hooks/use-floating.svelte.js";
-import { useHover } from "../../../src/hooks/use-hover.svelte.js";
-import { useInteractions } from "../../../src/hooks/use-interactions.svelte.js";
-
-interface Props extends UseClickOptions {
-	open?: boolean;
-	element?: string;
-	enableHover?: boolean;
-}
-
-let {
-	open = false,
-	element = "button",
-	enableHover = false,
-	...useClickOptions
-}: Props = $props();
-
-const floating = useFloating({
-	whileElementsMounted: autoUpdate,
-	get open() {
-		return open;
-	},
-	onOpenChange(v) {
-		open = v;
-	},
-});
-
-const click = useClick(floating.context, useClickOptions);
-const hover = useHover(floating.context, { enabled: enableHover });
-const interactions = useInteractions([click, hover]);
-</script>
-
-<svelte:element
-        this={element}
-        data-testid="reference"
-        bind:this={floating.elements.reference}
-        {...interactions.getReferenceProps()}
-></svelte:element>
-
-{#if open}
-    <div
-            data-testid="floating"
-            bind:this={floating.elements.floating}
-            style={floating.floatingStyles}
-            {...interactions.getFloatingProps()}
-    ></div>
-{/if}
\ No newline at end of file
diff --git a/packages/floating-ui-svelte/test/hooks/wrapper-components/use-dismiss.svelte b/packages/floating-ui-svelte/test/hooks/wrapper-components/use-dismiss.svelte
deleted file mode 100644
index a03f3759..00000000
--- a/packages/floating-ui-svelte/test/hooks/wrapper-components/use-dismiss.svelte
+++ /dev/null
@@ -1,43 +0,0 @@
-<script lang="ts">
-import { autoUpdate } from "@floating-ui/dom";
-import {
-	type UseDismissOptions,
-	useDismiss,
-} from "../../../src/hooks/use-dismiss.svelte";
-import { useFloating } from "../../../src/hooks/use-floating.svelte";
-import { useInteractions } from "../../../src/hooks/use-interactions.svelte";
-
-interface Props extends UseDismissOptions {
-	open?: boolean;
-}
-
-let { open = false, ...useDismissOptions }: Props = $props();
-
-const floating = useFloating({
-	whileElementsMounted: autoUpdate,
-	get open() {
-		return open;
-	},
-	onOpenChange(v) {
-		open = v;
-	},
-});
-
-const dismiss = useDismiss(floating.context, useDismissOptions);
-const interactions = useInteractions([dismiss]);
-</script>
-
-<button
-        data-testid="reference"
-        bind:this={floating.elements.reference}
-        {...interactions.getReferenceProps()}
-></button>
-
-{#if open}
-    <div
-            data-testid="floating"
-            bind:this={floating.elements.floating}
-            style={floating.floatingStyles}
-            {...interactions.getFloatingProps()}
-    ></div>
-{/if}
\ No newline at end of file
diff --git a/packages/floating-ui-svelte/test/hooks/wrapper-components/use-focus.svelte b/packages/floating-ui-svelte/test/hooks/wrapper-components/use-focus.svelte
deleted file mode 100644
index 0a531e0c..00000000
--- a/packages/floating-ui-svelte/test/hooks/wrapper-components/use-focus.svelte
+++ /dev/null
@@ -1,43 +0,0 @@
-<script lang="ts">
-import { autoUpdate } from "@floating-ui/dom";
-import { useFloating } from "../../../src/hooks/use-floating.svelte";
-import {
-	type UseFocusOptions,
-	useFocus,
-} from "../../../src/hooks/use-focus.svelte";
-import { useInteractions } from "../../../src/hooks/use-interactions.svelte";
-
-interface Props extends UseFocusOptions {
-	open?: boolean;
-}
-
-let { open = false, ...useFocusOptions }: Props = $props();
-
-const floating = useFloating({
-	whileElementsMounted: autoUpdate,
-	get open() {
-		return open;
-	},
-	onOpenChange(v) {
-		open = v;
-	},
-});
-
-const focus = useFocus(floating.context, useFocusOptions);
-const interactions = useInteractions([focus]);
-</script>
-
-<button
-        data-testid="reference"
-        bind:this={floating.elements.reference}
-        {...interactions.getReferenceProps()}
-></button>
-
-{#if open}
-    <div
-            data-testid="floating"
-            bind:this={floating.elements.floating}
-            style={floating.floatingStyles}
-            {...interactions.getFloatingProps()}
-    ></div>
-{/if}
\ No newline at end of file
diff --git a/packages/floating-ui-svelte/test/hooks/wrapper-components/use-hover.svelte b/packages/floating-ui-svelte/test/hooks/wrapper-components/use-hover.svelte
deleted file mode 100644
index 341e4e06..00000000
--- a/packages/floating-ui-svelte/test/hooks/wrapper-components/use-hover.svelte
+++ /dev/null
@@ -1,50 +0,0 @@
-<script lang="ts">
-import { autoUpdate } from "@floating-ui/dom";
-import { useFloating } from "../../../src/hooks/use-floating.svelte";
-import {
-	type UseHoverOptions,
-	useHover,
-} from "../../../src/hooks/use-hover.svelte";
-import { useInteractions } from "../../../src/hooks/use-interactions.svelte.js";
-
-interface Props extends UseHoverOptions {
-	open?: boolean;
-	showReference?: boolean;
-}
-
-let {
-	open = false,
-	showReference = true,
-	...useHoverOptions
-}: Props = $props();
-
-const floating = useFloating({
-	whileElementsMounted: autoUpdate,
-	get open() {
-		return open;
-	},
-	onOpenChange(v) {
-		open = v;
-	},
-});
-
-const hover = useHover(floating.context, useHoverOptions);
-const interactions = useInteractions([hover]);
-</script>
-
-{#if showReference}
-    <button
-            data-testid="reference"
-            bind:this={floating.elements.reference}
-            {...interactions.getReferenceProps()}
-    ></button>
-{/if}
-
-{#if open}
-    <div
-            data-testid="floating"
-            bind:this={floating.elements.floating}
-            style={floating.floatingStyles}
-            {...interactions.getFloatingProps()}
-    ></div>
-{/if}
\ No newline at end of file
diff --git a/packages/floating-ui-svelte/test/hooks/wrapper-components/use-role.svelte b/packages/floating-ui-svelte/test/hooks/wrapper-components/use-role.svelte
deleted file mode 100644
index a0c879b5..00000000
--- a/packages/floating-ui-svelte/test/hooks/wrapper-components/use-role.svelte
+++ /dev/null
@@ -1,46 +0,0 @@
-<script lang="ts">
-import { autoUpdate } from "@floating-ui/dom";
-import { useFloating } from "../../../src/hooks/use-floating.svelte.js";
-import { useInteractions } from "../../../src/hooks/use-interactions.svelte.js";
-import {
-	type UseRoleOptions,
-	useRole,
-} from "../../../src/hooks/use-role.svelte.js";
-interface Props extends UseRoleOptions {
-	open?: boolean;
-}
-let { open = false, ...useRoleOptions }: Props = $props();
-const floating = useFloating({
-	whileElementsMounted: autoUpdate,
-	get open() {
-		return open;
-	},
-	onOpenChange: (v) => {
-		open = v;
-	},
-});
-const role = useRole(floating.context, useRoleOptions);
-const interactions = useInteractions([role]);
-</script>
-
-<button
-        data-testid="reference"
-        bind:this={floating.elements.reference}
-        {...interactions.getReferenceProps()}
-></button>
-
-{#if open}
-    <div
-            data-testid="floating"
-            bind:this={floating.elements.floating}
-            style={floating.floatingStyles}
-            {...interactions.getFloatingProps()}
-    >
-        {#each [1, 2, 3] as i}
-            <div
-                    data-testid="item-{i}"
-                    {...interactions.getItemProps({ active: i === 2, selected: i === 2 })}
-            ></div>
-        {/each}
-    </div>
-{/if}
\ No newline at end of file
diff --git a/packages/floating-ui-svelte/test/internal/setup.ts b/packages/floating-ui-svelte/test/internal/setup.ts
deleted file mode 100644
index f149f27a..00000000
--- a/packages/floating-ui-svelte/test/internal/setup.ts
+++ /dev/null
@@ -1 +0,0 @@
-import "@testing-library/jest-dom/vitest";
diff --git a/packages/floating-ui-svelte/test/unit/components/floating-arrow.test.ts b/packages/floating-ui-svelte/test/unit/components/floating-arrow.test.ts
new file mode 100644
index 00000000..c2cad593
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/components/floating-arrow.test.ts
@@ -0,0 +1,97 @@
+// import { render, screen } from "@testing-library/svelte";
+// import { describe, expect, it, vi } from "vitest";
+// import { withRunes } from "../../with-runes.svelte.js";
+// import { useFloating, FloatingArrow } from "../../../src/index.js";
+
+import { describe } from "vitest";
+
+describe.skip("FloatingArrow");
+// describe.skip("FloatingArrow", () => {
+// 	vi.mock(import("svelte"), async (importOriginal) => {
+// 		const actual = await importOriginal();
+// 		return {
+// 			...actual,
+// 			getContext: vi.fn().mockReturnValue(null),
+// 		};
+// 	});
+// 	it(
+// 		"renders the component to default props",
+// 		withRunes(() => {
+// 			const arrowRef = document.createElement("div");
+// 			const floating = useFloating();
+// 			render(FloatingArrow, {
+// 				props: { ref: arrowRef, context: floating.context },
+// 			});
+// 			const component = screen.getByTestId("floating-arrow");
+// 			expect(component).toBeInTheDocument();
+// 		}),
+// 	);
+
+// 	it(
+// 		"renders position based on context placement",
+// 		withRunes(() => {
+// 			const arrowRef = document.createElement("div");
+// 			const floating = useFloating({ placement: "left" });
+// 			render(FloatingArrow, {
+// 				props: {
+// 					ref: arrowRef,
+// 					context: floating.context,
+// 					width: 20,
+// 					height: 20,
+// 				},
+// 			});
+// 			const component = screen.getByTestId("floating-arrow");
+// 			expect(component.style.left).toBe("calc(100% - 0px)");
+// 		}),
+// 	);
+
+// 	it(
+// 		"renders with a custom width and height",
+// 		withRunes(() => {
+// 			const arrowRef = document.createElement("div");
+// 			const floating = useFloating();
+// 			render(FloatingArrow, {
+// 				props: {
+// 					ref: arrowRef,
+// 					context: floating.context,
+// 					width: 20,
+// 					height: 20,
+// 				},
+// 			});
+// 			const component = screen.getByTestId("floating-arrow");
+// 			expect(component.getAttribute("width")).equals("20");
+// 			expect(component.getAttribute("height")).equals("20");
+// 		}),
+// 	);
+
+// 	it(
+// 		"renders with a custom transform",
+// 		withRunes(() => {
+// 			const arrowRef = document.createElement("div");
+// 			const floating = useFloating();
+// 			render(FloatingArrow, {
+// 				props: { ref: arrowRef, context: floating.context, transform: "123px" },
+// 			});
+// 			const component = screen.getByTestId("floating-arrow");
+// 			expect(component.style.transform).toContain("123px");
+// 		}),
+// 	);
+
+// 	it(
+// 		"renders with a custom fill",
+// 		withRunes(() => {
+// 			const arrowRef = document.createElement("div");
+// 			const floating = useFloating();
+// 			const testFillColor = "green";
+// 			render(FloatingArrow, {
+// 				props: {
+// 					ref: arrowRef,
+// 					context: floating.context,
+// 					fill: testFillColor,
+// 				},
+// 			});
+// 			const component = screen.getByTestId("floating-arrow");
+// 			expect(component.style.fill).toContain(testFillColor);
+// 		}),
+// 	);
+// });
diff --git a/packages/floating-ui-svelte/test/unit/components/floating-delay-group/components/main.svelte b/packages/floating-ui-svelte/test/unit/components/floating-delay-group/components/main.svelte
new file mode 100644
index 00000000..37d552a2
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/components/floating-delay-group/components/main.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+	import type { ComponentProps } from "svelte";
+	import Tooltip from "./tooltip.svelte";
+	import FloatingDelayGroup from "../../../../../src/components/floating-delay-group.svelte";
+
+	let {
+		delay = { open: 1000, close: 100 },
+		...rest
+	}: Omit<
+		Partial<ComponentProps<typeof FloatingDelayGroup>>,
+		"children"
+	> = $props();
+</script>
+
+<FloatingDelayGroup {...rest} {delay}>
+	<Tooltip label="one">
+		{#snippet reference(ref, props)}
+			<button
+				data-testid="reference-one"
+				bind:this={ref.current}
+				{...props}>
+				one
+			</button>
+		{/snippet}
+	</Tooltip>
+	<Tooltip label="two">
+		{#snippet reference(ref, props)}
+			<button
+				data-testid="reference-two"
+				bind:this={ref.current}
+				{...props}>
+				two
+			</button>
+		{/snippet}
+	</Tooltip>
+	<Tooltip label="three">
+		{#snippet reference(ref, props)}
+			<button
+				data-testid="reference-three"
+				bind:this={ref.current}
+				{...props}>
+				three
+			</button>
+		{/snippet}
+	</Tooltip>
+</FloatingDelayGroup>
diff --git a/packages/floating-ui-svelte/test/unit/components/floating-delay-group/components/tooltip.svelte b/packages/floating-ui-svelte/test/unit/components/floating-delay-group/components/tooltip.svelte
new file mode 100644
index 00000000..ed567e4a
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/components/floating-delay-group/components/tooltip.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import {
+		useDelayGroup,
+		useFloating,
+		useHover,
+		useInteractions,
+	} from "../../../../../src/index.js";
+	import {
+		box,
+		type WritableBox,
+	} from "../../../../../src/internal/box.svelte.js";
+	import { styleObjectToString } from "../../../../../src/internal/style-object-to-string.js";
+
+	let {
+		reference,
+		label,
+	}: {
+		reference: Snippet<
+			[ref: WritableBox<Element | null>, props: Record<string, unknown>]
+		>;
+		label: string;
+	} = $props();
+
+	let open = $state(false);
+
+	const ref = box<Element | null>(null);
+
+	const f = useFloating({
+		elements: {
+			reference: () => ref.current,
+		},
+		onReferenceChange: (v) => {
+			ref.current = v;
+		},
+		open: () => open,
+		onOpenChange: (v) => {
+			open = v;
+		},
+	});
+
+	const group = useDelayGroup(f.context);
+
+	const ints = useInteractions([
+		useHover(f.context, { delay: () => group.delay }),
+	]);
+</script>
+
+{@render reference(ref, ints.getReferenceProps())}
+
+{#if open}
+	<div
+		data-testid={`floating-${label}`}
+		bind:this={f.elements.floating}
+		style={styleObjectToString({
+			position: f.strategy,
+			top: f.y ? `${f.y}` : "",
+			left: f.x ? `${f.x}` : "",
+		})}>
+		{label}
+	</div>
+{/if}
diff --git a/packages/floating-ui-svelte/test/unit/components/floating-delay-group/floating-delay-group.test.ts b/packages/floating-ui-svelte/test/unit/components/floating-delay-group/floating-delay-group.test.ts
new file mode 100644
index 00000000..531e640c
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/components/floating-delay-group/floating-delay-group.test.ts
@@ -0,0 +1,104 @@
+import { act, fireEvent, render, screen } from "@testing-library/svelte";
+import { expect, it, vi } from "vitest";
+import Main from "./components/main.svelte";
+
+vi.useFakeTimers();
+
+it("groups delays correctly", async () => {
+	render(Main);
+
+	await fireEvent.mouseEnter(screen.getByTestId("reference-one"));
+
+	await act(async () => {
+		vi.advanceTimersByTime(1);
+	});
+
+	expect(screen.queryByTestId("floating-one")).not.toBeInTheDocument();
+
+	await act(async () => {
+		vi.advanceTimersByTime(999);
+	});
+
+	expect(screen.queryByTestId("floating-one")).toBeInTheDocument();
+	await fireEvent.mouseEnter(screen.getByTestId("reference-two"));
+
+	await act(async () => {
+		vi.advanceTimersByTime(1);
+	});
+
+	expect(screen.queryByTestId("floating-one")).not.toBeInTheDocument();
+	expect(screen.queryByTestId("floating-two")).toBeInTheDocument();
+
+	await fireEvent.mouseEnter(screen.getByTestId("reference-three"));
+
+	await act(async () => {
+		vi.advanceTimersByTime(1);
+	});
+
+	expect(screen.queryByTestId("floating-two")).not.toBeInTheDocument();
+	expect(screen.queryByTestId("floating-three")).toBeInTheDocument();
+
+	await fireEvent.mouseLeave(screen.getByTestId("reference-three"));
+
+	await act(async () => {
+		vi.advanceTimersByTime(1);
+	});
+
+	expect(screen.queryByTestId("floating-three")).toBeInTheDocument();
+	await act(async () => {
+		vi.advanceTimersByTime(199);
+	});
+
+	expect(screen.queryByTestId("floating-three")).not.toBeInTheDocument();
+});
+
+it("respects timeoutMs prop", async () => {
+	render(Main, { timeoutMs: 500 });
+
+	await fireEvent.mouseEnter(screen.getByTestId("reference-one"));
+
+	await act(async () => {
+		vi.advanceTimersByTime(1000);
+	});
+
+	await fireEvent.mouseLeave(screen.getByTestId("reference-one"));
+
+	expect(screen.queryByTestId("floating-one")).toBeInTheDocument();
+
+	await act(async () => {
+		vi.advanceTimersByTime(499);
+	});
+
+	expect(screen.queryByTestId("floating-one")).not.toBeInTheDocument();
+
+	await fireEvent.mouseEnter(screen.getByTestId("reference-two"));
+
+	await act(async () => {
+		vi.advanceTimersByTime(1);
+	});
+
+	expect(screen.queryByTestId("floating-two")).toBeInTheDocument();
+
+	await fireEvent.mouseEnter(screen.getByTestId("reference-three"));
+
+	await act(async () => {
+		vi.advanceTimersByTime(1);
+	});
+
+	expect(screen.queryByTestId("floating-two")).not.toBeInTheDocument();
+	expect(screen.queryByTestId("floating-three")).toBeInTheDocument();
+
+	await fireEvent.mouseLeave(screen.getByTestId("reference-three"));
+
+	await act(async () => {
+		vi.advanceTimersByTime(1);
+	});
+
+	expect(screen.queryByTestId("floating-three")).toBeInTheDocument();
+
+	await act(async () => {
+		vi.advanceTimersByTime(99);
+	});
+
+	expect(screen.queryByTestId("floating-three")).not.toBeInTheDocument();
+});
diff --git a/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/combobox.svelte b/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/combobox.svelte
new file mode 100644
index 00000000..04bc4171
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/combobox.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import FloatingFocusManager from "../../../../../src/components/floating-focus-manager/floating-focus-manager.svelte";
+	import { useFloating } from "../../../../../src/index.js";
+
+	let {
+		outsideElementsInert = false,
+		modal = true,
+	}: { outsideElementsInert?: boolean; modal?: boolean } = $props();
+
+	let open = $state(false);
+	const f = useFloating({
+		open: () => open,
+		onOpenChange: (v) => {
+			open = v;
+		},
+	});
+</script>
+
+<!-- svelte-ignore a11y_role_has_required_aria_props -->
+<input
+	role="combobox"
+	data-testid="reference"
+	bind:this={f.elements.reference}
+	onfocus={() => (open = true)} />
+<button data-testid="btn-1">btn1</button>
+<button data-testid="btn-2">btn2</button>
+
+{#if open}
+	<FloatingFocusManager
+		context={f.context}
+		{modal}
+		order={["reference"]}
+		{outsideElementsInert}>
+		<div
+			role="listbox"
+			bind:this={f.elements.floating}
+			data-testid="floating">
+		</div>
+	</FloatingFocusManager>
+{/if}
diff --git a/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/connected-drawer.svelte b/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/connected-drawer.svelte
new file mode 100644
index 00000000..c908d119
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/connected-drawer.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import FloatingFocusManager from "../../../../../src/components/floating-focus-manager/floating-focus-manager.svelte";
+	import {
+		useDismiss,
+		useFloating,
+		useInteractions,
+	} from "../../../../../src/index.js";
+
+	let {
+		open,
+		onOpenChange,
+	}: { open: boolean; onOpenChange: (v: boolean) => void } = $props();
+
+	const f = useFloating({
+		open,
+		onOpenChange,
+	});
+
+	const ints = useInteractions([useDismiss(f.context)]);
+</script>
+
+<FloatingFocusManager context={f.context}>
+	<div bind:this={f.elements.floating} {...ints.getFloatingProps()}>
+		<button data-testid="child-reference"> child reference </button>
+	</div>
+</FloatingFocusManager>
diff --git a/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/connected.svelte b/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/connected.svelte
new file mode 100644
index 00000000..0871262d
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/connected.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+	import FloatingFocusManager from "../../../../../src/components/floating-focus-manager/floating-focus-manager.svelte";
+	import {
+		useClick,
+		useDismiss,
+		useFloating,
+		useInteractions,
+	} from "../../../../../src/index.js";
+	import ConnectedDrawer from "./connected-drawer.svelte";
+
+	let open = $state(false);
+	let isDrawerOpen = $state(false);
+
+	const f = useFloating({
+		open: () => open,
+		onOpenChange: (v) => {
+			open = v;
+		},
+	});
+
+	const ints = useInteractions([useClick(f.context), useDismiss(f.context)]);
+</script>
+
+<button
+	bind:this={f.elements.reference}
+	data-testid="parent-reference"
+	{...ints.getReferenceProps()}>ref</button>
+{#if open}
+	<FloatingFocusManager context={f.context}>
+		<div bind:this={f.elements.floating} {...ints.getFloatingProps()}>
+			Parent Floating
+			<button
+				data-testid="parent-floating-reference"
+				onclick={() => {
+					isDrawerOpen = true;
+					open = false;
+				}}>parent floating ref</button>
+		</div>
+	</FloatingFocusManager>
+{/if}
+{#if isDrawerOpen}
+	<ConnectedDrawer
+		open={isDrawerOpen}
+		onOpenChange={(v) => (isDrawerOpen = v)} />
+{/if}
diff --git a/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/dialog-fallback-ref.svelte b/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/dialog-fallback-ref.svelte
new file mode 100644
index 00000000..41e8e869
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/dialog-fallback-ref.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+	import FloatingFocusManager from "../../../../../src/components/floating-focus-manager/floating-focus-manager.svelte";
+	import FloatingPortal from "../../../../../src/components/floating-portal/floating-portal.svelte";
+	import {
+		useClick,
+		useFloating,
+		useInteractions,
+	} from "../../../../../src/index.js";
+
+	let { modal = true }: { modal: boolean } = $props();
+
+	let open = $state(false);
+	let removed = $state(false);
+
+	const f = useFloating({
+		open: () => open,
+		onOpenChange: (v) => {
+			open = v;
+		},
+	});
+
+	const ints = useInteractions([useClick(f.context)]);
+</script>
+
+{#if !removed}
+	<button
+		bind:this={f.elements.reference}
+		{...ints.getReferenceProps()}
+		data-testid="reference">reference</button>
+{/if}
+{#if open}
+	<FloatingPortal>
+		<FloatingFocusManager context={f.context} {modal}>
+			<div bind:this={f.elements.floating} {...ints.getFloatingProps()}>
+				<button
+					data-testid="remove"
+					onclick={() => {
+						removed = true;
+						open = false;
+					}}>
+					remove
+				</button>
+			</div>
+		</FloatingFocusManager>
+	</FloatingPortal>
+{/if}
+<button data-testid="fallback">fallback</button>
diff --git a/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/dialog-non-focusable-ref.svelte b/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/dialog-non-focusable-ref.svelte
new file mode 100644
index 00000000..604482e8
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/dialog-non-focusable-ref.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import Dialog from "./dialog.svelte";
+</script>
+
+<Dialog>
+	{#snippet reference(ref, props)}
+		<div
+			{...props}
+			bind:this={ref.current}
+			data-testid="non-focusable-reference">
+			<button data-testid="open-dialog"> open dialog </button>
+		</div>
+	{/snippet}
+
+	{#snippet content(handleClose)}
+		<button onclick={handleClose} data-testid="close-dialog">close</button>
+	{/snippet}
+</Dialog>
diff --git a/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/dialog.svelte b/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/dialog.svelte
new file mode 100644
index 00000000..0000782f
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/dialog.svelte
@@ -0,0 +1,66 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import FloatingNode from "../../../../../src/components/floating-tree/floating-node.svelte";
+	import {
+		useClick,
+		useDismiss,
+		useFloating,
+		useFloatingNodeId,
+		useInteractions,
+		type Boxed,
+	} from "../../../../../src/index.js";
+	import { box } from "../../../../../src/internal/box.svelte.js";
+	import FloatingPortal from "../../../../../src/components/floating-portal/floating-portal.svelte";
+	import FloatingFocusManager from "../../../../../src/components/floating-focus-manager/floating-focus-manager.svelte";
+
+	let {
+		open: passedOpen = false,
+		reference,
+		content,
+	}: {
+		open?: boolean;
+		reference: Snippet<
+			[ref: Boxed<Element | null>, props: Record<string, unknown>]
+		>;
+		content: Snippet<[close: () => void]>;
+	} = $props();
+
+	let open = $state(passedOpen);
+	const nodeId = useFloatingNodeId();
+
+	const referenceRef = box<Element | null>(null);
+
+	const f = useFloating({
+		elements: {
+			reference: () => referenceRef.current,
+		},
+		open: () => open,
+		onOpenChange: (v) => {
+			open = v;
+		},
+		nodeId: () => nodeId,
+		onReferenceChange: (v) => {
+			referenceRef.current = v;
+		},
+	});
+
+	const ints = useInteractions([
+		useClick(f.context),
+		useDismiss(f.context, { bubbles: false }),
+	]);
+</script>
+
+<FloatingNode id={nodeId}>
+	{@render reference(referenceRef, ints.getReferenceProps())}
+	<FloatingPortal>
+		{#if open}
+			<FloatingFocusManager context={f.context}>
+				<div
+					{...ints.getFloatingProps()}
+					bind:this={f.elements.floating}>
+					{@render content(close)}
+				</div>
+			</FloatingFocusManager>
+		{/if}
+	</FloatingPortal>
+</FloatingNode>
diff --git a/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/floating-fallback.svelte b/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/floating-fallback.svelte
new file mode 100644
index 00000000..4b242995
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/floating-fallback.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import FloatingFocusManager from "../../../../../src/components/floating-focus-manager/floating-focus-manager.svelte";
+	import { useFloating } from "../../../../../src/index.js";
+
+	const f = useFloating({ open: true });
+</script>
+
+<button data-testid="reference" bind:this={f.elements.reference}
+	>reference</button>
+<FloatingFocusManager context={f.context} modal={true}>
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+	<div bind:this={f.elements.floating} data-testid="floating" tabindex={-1}>
+	</div>
+</FloatingFocusManager>
diff --git a/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/floating-wrapper.svelte b/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/floating-wrapper.svelte
new file mode 100644
index 00000000..efe01941
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/floating-wrapper.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import FloatingFocusManager from "../../../../../src/components/floating-focus-manager/floating-focus-manager.svelte";
+	import {
+		useFloating,
+		useInteractions,
+		useRole,
+	} from "../../../../../src/index.js";
+
+	let open = $state(false);
+
+	const f = useFloating({
+		open: () => open,
+		onOpenChange: (v) => {
+			open = v;
+		},
+	});
+
+	const ints = useInteractions([useRole(f.context)]);
+</script>
+
+<button
+	bind:this={f.elements.reference}
+	{...ints.getReferenceProps({
+		onclick: () => (open = !open),
+	})}>
+	ref
+</button>
+
+{#if open}
+	<FloatingFocusManager context={f.context}>
+		<div bind:this={f.elements.floating} data-testid="outer">
+			<div {...ints.getFloatingProps()} data-testid="inner"></div>
+		</div>
+	</FloatingFocusManager>
+{/if}
diff --git a/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/hover.svelte b/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/hover.svelte
new file mode 100644
index 00000000..645b0f3c
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/hover.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import FloatingFocusManager from "../../../../../src/components/floating-focus-manager/floating-focus-manager.svelte";
+	import {
+		useFloating,
+		useHover,
+		useInteractions,
+	} from "../../../../../src/index.js";
+
+	let open = $state(false);
+
+	const f = useFloating({
+		open: () => open,
+		onOpenChange: (v) => {
+			open = v;
+		},
+	});
+
+	const ints = useInteractions([useHover(f.context)]);
+</script>
+
+<button
+	bind:this={f.elements.reference}
+	{...ints.getReferenceProps()}
+	data-testid="reference">btn</button>
+{#if open}
+	<FloatingFocusManager context={f.context}>
+		<div
+			bind:this={f.elements.floating}
+			{...ints.getFloatingProps()}
+			data-testid="floating">
+		</div>
+	</FloatingFocusManager>
+{/if}
+<button>outside</button>
diff --git a/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/keep-mounted.svelte b/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/keep-mounted.svelte
new file mode 100644
index 00000000..3194d588
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/keep-mounted.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import FloatingFocusManager from "../../../../../src/components/floating-focus-manager/floating-focus-manager.svelte";
+	import {
+		useClick,
+		useDismiss,
+		useFloating,
+		useInteractions,
+	} from "../../../../../src/index.js";
+
+	let open = $state(false);
+
+	const f = useFloating({
+		open: () => open,
+		onOpenChange: (v) => {
+			open = v;
+		},
+	});
+
+	const ints = useInteractions([useClick(f.context), useDismiss(f.context)]);
+</script>
+
+<button
+	data-testid="reference"
+	bind:this={f.elements.reference}
+	{...ints.getReferenceProps()}>reference</button>
+<FloatingFocusManager context={f.context} disabled={!open} modal={false}>
+	<div
+		bind:this={f.elements.floating}
+		data-testid="floating"
+		{...ints.getFloatingProps()}>
+		<button data-testid="child">child</button>
+	</div>
+</FloatingFocusManager>
+<button data-testid="after">after</button>
diff --git a/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/main.svelte b/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/main.svelte
new file mode 100644
index 00000000..e057c466
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/main.svelte
@@ -0,0 +1,75 @@
+<script lang="ts">
+	import type { FloatingFocusManagerProps } from "../../../../../src/components/floating-focus-manager/floating-focus-manager.svelte";
+	import FloatingFocusManager from "../../../../../src/components/floating-focus-manager/floating-focus-manager.svelte";
+	import { useFloating } from "../../../../../src/index.js";
+
+	let {
+		renderInput = false,
+		initialFocus,
+		returnFocus = true,
+		...rest
+	}: Partial<
+		Omit<FloatingFocusManagerProps, "initialFocus" | "returnFocus"> & {
+			initialFocus?: "two" | number;
+			renderInput?: boolean;
+			returnFocus?: boolean | "inputRef";
+		}
+	> = $props();
+
+	let ref = $state<HTMLButtonElement | null>(null);
+	let open = $state(false);
+	let inputRef = $state<HTMLInputElement | null>(null);
+
+	const f = useFloating({
+		open: () => open,
+		onOpenChange: (v) => {
+			open = v;
+		},
+	});
+</script>
+
+<button
+	data-testid="increment-initialFocus"
+	onclick={() => {
+		if (typeof initialFocus === "number") {
+			initialFocus++;
+		}
+	}}>
+	increment initial focus
+</button>
+
+<button
+	data-testid="reference"
+	bind:this={f.elements.reference}
+	onclick={() => {
+		open = !open;
+	}}>button</button>
+
+<input />
+<input data-testid="focus-target" bind:this={inputRef} />
+<input />
+
+{#if open}
+	<FloatingFocusManager
+		{...rest}
+		initialFocus={initialFocus === "two" ? ref : initialFocus}
+		returnFocus={returnFocus === "inputRef" ? inputRef : returnFocus}
+		context={f.context}>
+		<div
+			role="dialog"
+			bind:this={f.elements.floating}
+			data-testid="floating">
+			<button data-testid="one">close</button>
+			<button data-testid="two" bind:this={ref}> confirm </button>
+			<button data-testid="three" onclick={() => (open = false)}>
+				x
+			</button>
+			{#if renderInput}
+				<!-- svelte-ignore a11y_autofocus -->
+				<input autofocus data-testid="input" />
+			{/if}
+		</div>
+	</FloatingFocusManager>
+{/if}
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div tabindex={0} data-testid="last">x</div>
diff --git a/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/mixed-mod-dialog.svelte b/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/mixed-mod-dialog.svelte
new file mode 100644
index 00000000..3ded37ed
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/mixed-mod-dialog.svelte
@@ -0,0 +1,73 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import {
+		useClick,
+		useDismiss,
+		useFloating,
+		useFloatingNodeId,
+		useInteractions,
+	} from "../../../../../src/index.js";
+	import FloatingNode from "../../../../../src/components/floating-tree/floating-node.svelte";
+	import { box } from "../../../../../src/internal/box.svelte.js";
+	import FloatingPortal from "../../../../../src/components/floating-portal/floating-portal.svelte";
+	import FloatingFocusManager from "../../../../../src/components/floating-focus-manager/floating-focus-manager.svelte";
+
+	let {
+		open: controlledOpen,
+		modal = true,
+		reference,
+		sideChildren,
+		content,
+	}: {
+		open?: boolean;
+		modal?: boolean;
+		content?: Snippet<[() => void]>;
+		reference?: Snippet<
+			[{ current: Element | null }, Record<string, unknown>]
+		>;
+		sideChildren?: Snippet;
+	} = $props();
+
+	let internalOpen = $state(false);
+	const nodeId = useFloatingNodeId();
+	const open = $derived(
+		controlledOpen !== undefined ? controlledOpen : internalOpen
+	);
+
+	const ref = box<Element | null>(null);
+
+	const f = useFloating({
+		elements: {
+			reference: () => ref.current,
+		},
+		onReferenceChange: (v) => {
+			ref.current = v;
+		},
+		open: () => open,
+		onOpenChange: (v) => {
+			internalOpen = v;
+		},
+		nodeId: () => nodeId,
+	});
+
+	const ints = useInteractions([
+		useClick(f.context),
+		useDismiss(f.context, { bubbles: false }),
+	]);
+</script>
+
+<FloatingNode id={nodeId}>
+	{@render reference?.(ref, ints.getReferenceProps())}
+	{#if open}
+		<FloatingPortal>
+			<FloatingFocusManager context={f.context} {modal}>
+				<div
+					bind:this={f.elements.floating}
+					{...ints.getFloatingProps()}>
+					{@render content?.(() => (controlledOpen = false))}
+				</div>
+			</FloatingFocusManager>
+		</FloatingPortal>
+	{/if}
+	{@render sideChildren?.()}
+</FloatingNode>
diff --git a/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/mixed-mod-main.svelte b/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/mixed-mod-main.svelte
new file mode 100644
index 00000000..62a203a4
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/mixed-mod-main.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import NestedDialog from "./mixed-mod-nested-dialog.svelte";
+
+	let sideDialogOpen = $state(false);
+</script>
+
+<NestedDialog modal={false}>
+	{#snippet reference(ref, props)}
+		<button data-testid="open-dialog" bind:this={ref.current} {...props}>
+			Open Dialog
+		</button>
+	{/snippet}
+
+	{#snippet content(handleClose)}
+		<button onclick={handleClose} data-testid="close-dialog">
+			Close Dialog
+		</button>
+		<button
+			onclick={() => (sideDialogOpen = true)}
+			data-testid="open-nested-dialog">
+			Open nested Dialog
+		</button>
+	{/snippet}
+
+	{#snippet sideChildren()}
+		<NestedDialog modal={true} open={sideDialogOpen}>
+			{#snippet content(handleClose)}
+				<button onclick={handleClose} data-testid="close-nested-dialog">
+					Close Nested Dialog
+				</button>
+			{/snippet}
+		</NestedDialog>
+	{/snippet}
+</NestedDialog>
diff --git a/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/mixed-mod-nested-dialog.svelte b/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/mixed-mod-nested-dialog.svelte
new file mode 100644
index 00000000..0ed4d412
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/mixed-mod-nested-dialog.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import Dialog from "./mixed-mod-dialog.svelte";
+	import { useFloatingParentNodeId } from "../../../../../src/index.js";
+	import FloatingTree from "../../../../../src/components/floating-tree/floating-tree.svelte";
+	import type { ComponentProps } from "svelte";
+
+	const parentId = useFloatingParentNodeId();
+
+	let props: ComponentProps<typeof Dialog> = $props();
+</script>
+
+{#if parentId == null}
+	<FloatingTree>
+		<Dialog {...props} />
+	</FloatingTree>
+{:else}
+	<Dialog {...props} />
+{/if}
diff --git a/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/modal-combobox.svelte b/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/modal-combobox.svelte
new file mode 100644
index 00000000..dbde5418
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/modal-combobox.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import FloatingFocusManager from "../../../../../src/components/floating-focus-manager/floating-focus-manager.svelte";
+	import {
+		useClick,
+		useFloating,
+		useInteractions,
+	} from "../../../../../src/index.js";
+
+	let open = $state(false);
+
+	const f = useFloating({
+		open: () => open,
+		onOpenChange: (v) => {
+			open = v;
+		},
+	});
+
+	const ints = useInteractions([useClick(f.context)]);
+</script>
+
+<!-- svelte-ignore a11y_role_has_required_aria_props -->
+<input
+	bind:this={f.elements.reference}
+	{...ints.getReferenceProps()}
+	data-testid="input"
+	role="combobox" />
+{#if open}
+	<FloatingFocusManager context={f.context} initialFocus={-1}>
+		<div
+			bind:this={f.elements.floating}
+			{...ints.getFloatingProps()}
+			data-testid="floating">
+			<button tabindex={-1}>one</button>
+		</div>
+	</FloatingFocusManager>
+{/if}
+<!-- svelte-ignore a11y_consider_explicit_label, element_invalid_self_closing_tag -->
+<button data-testid="after" />
diff --git a/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/nested-dialog.svelte b/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/nested-dialog.svelte
new file mode 100644
index 00000000..eb65eff5
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/nested-dialog.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { ComponentProps } from "svelte";
+	import Dialog from "./dialog.svelte";
+	import { useFloatingParentNodeId } from "../../../../../src/index.js";
+	import FloatingTree from "../../../../../src/components/floating-tree/floating-tree.svelte";
+
+	let props: ComponentProps<typeof Dialog> = $props();
+
+	const parentId = useFloatingParentNodeId();
+</script>
+
+{#if parentId == null}
+	<FloatingTree>
+		<Dialog {...props} />
+	</FloatingTree>
+{:else}
+	<Dialog {...props} />
+{/if}
diff --git a/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/nested-nested.svelte b/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/nested-nested.svelte
new file mode 100644
index 00000000..d7ebec7c
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/nested-nested.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import NestedDialog from "./nested-dialog.svelte";
+</script>
+
+<NestedDialog>
+	{#snippet reference(ref, refProps)}
+		<button data-testid="open-dialog" bind:this={ref.current} {...refProps}>
+			open dialog
+		</button>
+	{/snippet}
+	{#snippet content(close)}
+		<NestedDialog>
+			{#snippet reference(nestedRef, nestedRefProps)}
+				<button
+					data-testid="open-nested-dialog"
+					bind:this={nestedRef.current}
+					{...nestedRefProps}>
+					open nested dialog
+				</button>
+			{/snippet}
+
+			{#snippet content(nestedClose)}
+				<button onclick={nestedClose} data-testid="close-nested-dialog">
+					close nested dialog
+				</button>
+			{/snippet}
+		</NestedDialog>
+		<button onclick={close} data-testid="close-dialog">
+			close dialog
+		</button>
+	{/snippet}
+</NestedDialog>
diff --git a/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/non-modal-floating-portal.svelte b/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/non-modal-floating-portal.svelte
new file mode 100644
index 00000000..36a34c31
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/non-modal-floating-portal.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+	import type { ComponentProps } from "svelte";
+	import FloatingFocusManager from "../../../../../src/components/floating-focus-manager/floating-focus-manager.svelte";
+	import FloatingPortal from "../../../../../src/components/floating-portal/floating-portal.svelte";
+	import { useFloating } from "../../../../../src/index.js";
+
+	let {
+		order,
+	}: Omit<
+		ComponentProps<typeof FloatingFocusManager>,
+		"context" | "children"
+	> = $props();
+
+	let open = $state(false);
+	const f = useFloating({
+		open: () => open,
+		onOpenChange: (v) => {
+			open = v;
+		},
+	});
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<span id="first" tabindex={0} data-testid="first"></span>
+<button
+	id="reference"
+	data-testid="reference"
+	bind:this={f.elements.reference}
+	onclick={() => (open = true)}>ref</button>
+{#if open}
+	<FloatingPortal>
+		<FloatingFocusManager context={f.context} modal={false} {order}>
+			<div
+				id="floating"
+				data-testid="floating"
+				bind:this={f.elements.floating}
+				class="bg-blue-800 w-48 z-[1000] fixed left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%]">
+				<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+				<span id="inside" tabindex={0} data-testid="inside"></span>
+			</div>
+		</FloatingFocusManager>
+	</FloatingPortal>
+{/if}
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<span tabindex={0} data-testid="last" id="last"></span>
diff --git a/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/outside-nodes.svelte b/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/outside-nodes.svelte
new file mode 100644
index 00000000..e3fe0729
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/outside-nodes.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { useFloating } from "../../../../../src/index.js";
+	import FloatingFocusManager from "../../../../../src/components/floating-focus-manager/floating-focus-manager.svelte";
+
+	let {
+		outsideElementsInert = false,
+		modal = true,
+	}: { outsideElementsInert?: boolean; modal?: boolean } = $props();
+
+	let open = $state(false);
+
+	const floating = useFloating({
+		open: () => open,
+		onOpenChange: (v) => {
+			open = v;
+		},
+	});
+</script>
+
+<input
+	data-testid="reference"
+	bind:this={floating.elements.reference}
+	onclick={() => (open = !open)} />
+<div>
+	<div data-testid="aria-live" aria-live="polite"></div>
+	<button data-testid="btn-1">btn1</button>
+	<button data-testid="btn-2">btn2</button>
+</div>
+{#if open}
+	<FloatingFocusManager
+		context={floating.context}
+		{outsideElementsInert}
+		{modal}>
+		<div bind:this={floating.elements.floating} data-testid="floating">
+		</div>
+	</FloatingFocusManager>
+{/if}
diff --git a/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/restore-focus.svelte b/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/restore-focus.svelte
new file mode 100644
index 00000000..0ff2e55f
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/restore-focus.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+	import FloatingFocusManager from "../../../../../src/components/floating-focus-manager/floating-focus-manager.svelte";
+	import {
+		useClick,
+		useFloating,
+		useInteractions,
+	} from "../../../../../src/index.js";
+
+	let { restoreFocus = true }: { restoreFocus?: boolean } = $props();
+
+	let open = $state(false);
+	let removedIndex = $state(0);
+
+	const f = useFloating({
+		open: () => open,
+		onOpenChange: (v) => {
+			open = v;
+		},
+	});
+
+	const ints = useInteractions([useClick(f.context)]);
+</script>
+
+<button
+	bind:this={f.elements.reference}
+	{...ints.getReferenceProps()}
+	data-testid="reference">ref</button>
+{#if open}
+	<FloatingFocusManager context={f.context} initialFocus={1} {restoreFocus}>
+		<div
+			bind:this={f.elements.floating}
+			{...ints.getFloatingProps()}
+			data-testid="floating">
+			{#if removedIndex < 3}
+				<button onclick={() => (removedIndex = removedIndex + 1)}>
+					three
+				</button>
+			{/if}
+			{#if removedIndex < 1}
+				<button onclick={() => (removedIndex = removedIndex + 1)}>
+					one
+				</button>
+			{/if}
+			{#if removedIndex < 2}
+				<button onclick={() => (removedIndex = removedIndex + 1)}>
+					two
+				</button>
+			{/if}
+		</div>
+	</FloatingFocusManager>
+{/if}
diff --git a/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/toggle-disabled.svelte b/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/toggle-disabled.svelte
new file mode 100644
index 00000000..3dbd98d6
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/toggle-disabled.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import FloatingFocusManager from "../../../../../src/components/floating-focus-manager/floating-focus-manager.svelte";
+	import {
+		useClick,
+		useFloating,
+		useInteractions,
+	} from "../../../../../src/index.js";
+
+	let { disabled: disabledProp = true }: { disabled?: boolean } = $props();
+
+	let disabled = $state(disabledProp);
+	let open = $state(false);
+
+	const f = useFloating({
+		open: () => open,
+		onOpenChange: (v) => {
+			open = v;
+		},
+	});
+
+	const ints = useInteractions([useClick(f.context)]);
+</script>
+
+<button
+	data-testid="reference"
+	bind:this={f.elements.reference}
+	{...ints.getReferenceProps()}>
+	ref
+</button>
+<button data-testid="toggle" onclick={() => (disabled = !disabled)}>
+	toggle disabled
+</button>
+
+{#if open}
+	<FloatingFocusManager context={f.context} {disabled}>
+		<div
+			bind:this={f.elements.floating}
+			data-testid="floating"
+			{...ints.getFloatingProps()}>
+		</div>
+	</FloatingFocusManager>
+{/if}
diff --git a/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/trapped-combobox.svelte b/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/trapped-combobox.svelte
new file mode 100644
index 00000000..cff00391
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/trapped-combobox.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+	import FloatingFocusManager from "../../../../../src/components/floating-focus-manager/floating-focus-manager.svelte";
+	import {
+		useClick,
+		useDismiss,
+		useFloating,
+		useInteractions,
+		useRole,
+	} from "../../../../../src/index.js";
+
+	let open = $state(false);
+
+	const f = useFloating({
+		open: () => open,
+		onOpenChange: (v) => {
+			open = v;
+		},
+	});
+
+	const ints = useInteractions([
+		useRole(f.context),
+		useDismiss(f.context),
+		useClick(f.context),
+	]);
+</script>
+
+<div class="App">
+	<!-- svelte-ignore a11y_role_has_required_aria_props -->
+	<input
+		bind:this={f.elements.reference}
+		{...ints.getReferenceProps()}
+		data-testid="input"
+		role="combobox" />
+	{#if open}
+		<FloatingFocusManager context={f.context}>
+			<div
+				bind:this={f.elements.floating}
+				style={f.floatingStyles}
+				{...ints.getFloatingProps()}>
+				<button>one</button>
+				<button>two</button>
+			</div>
+		</FloatingFocusManager>
+	{/if}
+</div>
diff --git a/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/untrapped-combobox.svelte b/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/untrapped-combobox.svelte
new file mode 100644
index 00000000..119dc68b
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/components/untrapped-combobox.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+	import FloatingFocusManager from "../../../../../src/components/floating-focus-manager/floating-focus-manager.svelte";
+	import FloatingPortal from "../../../../../src/components/floating-portal/floating-portal.svelte";
+	import {
+		useClick,
+		useDismiss,
+		useFloating,
+		useInteractions,
+		useRole,
+	} from "../../../../../src/index.js";
+
+	let open = $state(false);
+
+	const f = useFloating({
+		open: () => open,
+		onOpenChange: (v) => {
+			open = v;
+		},
+	});
+
+	const ints = useInteractions([
+		useRole(f.context),
+		useDismiss(f.context),
+		useClick(f.context),
+	]);
+</script>
+
+<div class="App">
+	<!-- svelte-ignore a11y_role_has_required_aria_props -->
+	<input
+		bind:this={f.elements.reference}
+		{...ints.getReferenceProps()}
+		data-testid="input"
+		role="combobox" />
+	{#if open}
+		<FloatingPortal>
+			<FloatingFocusManager
+				context={f.context}
+				initialFocus={-1}
+				modal={false}>
+				<div
+					bind:this={f.elements.floating}
+					style={f.floatingStyles}
+					{...ints.getFloatingProps()}>
+					<button>one</button>
+					<button>two</button>
+				</div>
+			</FloatingFocusManager>
+		</FloatingPortal>
+	{/if}
+	<button>outside</button>
+</div>
diff --git a/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/floating-focus-manager.test.ts b/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/floating-focus-manager.test.ts
new file mode 100644
index 00000000..7de2fd64
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/components/floating-focus-manager/floating-focus-manager.test.ts
@@ -0,0 +1,820 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/svelte";
+import { describe, expect, it, vi } from "vitest";
+import { userEvent } from "@testing-library/user-event";
+import Main from "./components/main.svelte";
+import NestedNested from "./components/nested-nested.svelte";
+import DialogNonFocusableRef from "./components/dialog-non-focusable-ref.svelte";
+import { sleep, testKbd } from "../../../utils.js";
+import DialogFallbackRef from "./components/dialog-fallback-ref.svelte";
+import Combobox from "./components/combobox.svelte";
+import FloatingFallback from "./components/floating-fallback.svelte";
+import MixedModMain from "./components/mixed-mod-main.svelte";
+import OutsideNodes from "./components/outside-nodes.svelte";
+import ToggleDisabled from "./components/toggle-disabled.svelte";
+import KeepMounted from "./components/keep-mounted.svelte";
+import NonModalFloatingPortal from "./components/non-modal-floating-portal.svelte";
+import Navigation from "../../../visual/components/navigation/main.svelte";
+import Drawer from "../../../visual/components/drawer/main.svelte";
+import RestoreFocus from "./components/restore-focus.svelte";
+import TrappedCombobox from "./components/trapped-combobox.svelte";
+import UntrappedCombobox from "./components/untrapped-combobox.svelte";
+import Connected from "./components/connected.svelte";
+import FloatingWrapper from "./components/floating-wrapper.svelte";
+import ModalCombobox from "./components/modal-combobox.svelte";
+import Hover from "./components/hover.svelte";
+import Menubar from "../../../visual/components/menubar/main.svelte";
+
+describe("initialFocus", () => {
+	it("handles numbers", async () => {
+		render(Main);
+
+		await fireEvent.click(screen.getByTestId("reference"));
+		await sleep(20);
+
+		expect(screen.getByTestId("one")).toHaveFocus();
+		const incrementButton = screen.getByTestId("increment-initialFocus");
+
+		await fireEvent.click(incrementButton);
+		expect(screen.getByTestId("two")).not.toHaveFocus();
+
+		await fireEvent.click(incrementButton);
+		expect(screen.getByTestId("three")).not.toHaveFocus();
+	});
+
+	it("handles elements", async () => {
+		render(Main, { initialFocus: "two" });
+		await fireEvent.click(screen.getByTestId("reference"));
+		await sleep(20);
+
+		expect(screen.getByTestId("two")).toHaveFocus();
+	});
+
+	it("respects autofocus", async () => {
+		render(Main, { renderInput: true });
+
+		await fireEvent.click(screen.getByTestId("reference"));
+		expect(screen.getByTestId("input")).toHaveFocus();
+	});
+});
+
+describe("returnFocus", () => {
+	it("respects true", async () => {
+		render(Main);
+
+		screen.getByTestId("reference").focus();
+		await fireEvent.click(screen.getByTestId("reference"));
+		await sleep(20);
+
+		expect(screen.getByTestId("one")).toHaveFocus();
+
+		await fireEvent.click(screen.getByTestId("three"));
+		expect(screen.getByTestId("reference")).toHaveFocus();
+	});
+
+	it("respects false", async () => {
+		render(Main, { returnFocus: false });
+
+		screen.getByTestId("reference").focus();
+		await fireEvent.click(screen.getByTestId("reference"));
+		await sleep(20);
+
+		expect(screen.getByTestId("one")).toHaveFocus();
+
+		await fireEvent.click(screen.getByTestId("three"));
+		expect(screen.getByTestId("reference")).not.toHaveFocus();
+	});
+
+	it("respects ref", async () => {
+		render(Main, { returnFocus: "inputRef" });
+		screen.getByTestId("reference").focus();
+		await fireEvent.click(screen.getByTestId("reference"));
+		await sleep(20);
+
+		expect(screen.getByTestId("one")).toHaveFocus();
+
+		await fireEvent.click(screen.getByTestId("three"));
+		expect(screen.getByTestId("reference")).not.toHaveFocus();
+		expect(screen.getByTestId("focus-target")).toHaveFocus();
+	});
+
+	it("return to reference for nested", async () => {
+		render(NestedNested);
+
+		screen.getByTestId("open-dialog").focus();
+		await userEvent.keyboard(testKbd.ENTER);
+
+		await fireEvent.click(screen.getByTestId("open-nested-dialog"));
+
+		expect(screen.queryByTestId("close-nested-dialog")).toBeInTheDocument();
+
+		await userEvent.click(document.body);
+
+		expect(screen.queryByTestId("close-nested-dialog")).not.toBeInTheDocument();
+
+		expect(screen.queryByTestId("close-dialog")).toBeInTheDocument();
+
+		await userEvent.keyboard(testKbd.ESCAPE);
+
+		expect(screen.queryByTestId("close-dialog")).not.toBeInTheDocument();
+		expect(screen.getByTestId("open-dialog")).toHaveFocus();
+	});
+
+	it("returns to the first focusable descendent of the reference if the reference is not focusable", async () => {
+		render(DialogNonFocusableRef);
+
+		screen.getByTestId("open-dialog").focus();
+		await userEvent.keyboard(testKbd.ENTER);
+
+		expect(screen.queryByTestId("close-dialog")).toBeInTheDocument();
+
+		await userEvent.keyboard(testKbd.ESCAPE);
+
+		expect(screen.queryByTestId("close-dialog")).not.toBeInTheDocument();
+
+		expect(screen.getByTestId("open-dialog")).toHaveFocus();
+	});
+
+	it("preserves tabbable context next to reference element if removed (modal)", async () => {
+		render(DialogFallbackRef);
+
+		await fireEvent.click(screen.getByTestId("reference"));
+		await fireEvent.click(screen.getByTestId("remove"));
+		await userEvent.tab();
+		expect(screen.getByTestId("fallback")).toHaveFocus();
+	});
+
+	it("preserves tabbable context next to reference element if removed (non-modal)", async () => {
+		render(DialogFallbackRef, { modal: false });
+
+		await fireEvent.click(screen.getByTestId("reference"));
+		await fireEvent.click(screen.getByTestId("remove"));
+		await userEvent.tab();
+		expect(screen.getByTestId("fallback")).toHaveFocus();
+	});
+});
+
+describe("guards", () => {
+	it("respects true", async () => {
+		render(Main, { guards: true });
+
+		await fireEvent.click(screen.getByTestId("reference"));
+
+		await userEvent.tab();
+		await userEvent.tab();
+		await userEvent.tab();
+
+		expect(document.body).not.toHaveFocus();
+	});
+	it("respects false", async () => {
+		render(Main, { guards: false });
+		await fireEvent.click(screen.getByTestId("reference"));
+		await sleep(20);
+
+		await userEvent.tab();
+		await userEvent.tab();
+		await userEvent.tab();
+
+		await waitFor(() =>
+			expect(document.activeElement).toHaveAttribute("data-floating-ui-inert"),
+		);
+	});
+});
+
+describe("modal", () => {
+	it("respects true", async () => {
+		render(Main, { modal: true });
+		await fireEvent.click(screen.getByTestId("reference"));
+
+		await waitFor(() => expect(screen.getByTestId("one")).toHaveFocus());
+
+		await userEvent.tab();
+		await waitFor(() => expect(screen.getByTestId("two")).toHaveFocus());
+
+		await userEvent.tab();
+		await waitFor(() => expect(screen.getByTestId("three")).toHaveFocus());
+
+		await userEvent.tab();
+		await waitFor(() => expect(screen.getByTestId("one")).toHaveFocus());
+
+		await userEvent.tab({ shift: true });
+		await waitFor(() => expect(screen.getByTestId("three")).toHaveFocus());
+
+		await userEvent.tab({ shift: true });
+		await waitFor(() => expect(screen.getByTestId("two")).toHaveFocus());
+
+		await userEvent.tab({ shift: true });
+		await waitFor(() => expect(screen.getByTestId("one")).toHaveFocus());
+
+		await userEvent.tab({ shift: true });
+		await waitFor(() => expect(screen.getByTestId("three")).toHaveFocus());
+
+		await userEvent.tab();
+		await waitFor(() => expect(screen.getByTestId("one")).toHaveFocus());
+	});
+
+	it("respects false", async () => {
+		render(Main, { modal: false });
+		await fireEvent.click(screen.getByTestId("reference"));
+		await waitFor(() => expect(screen.getByTestId("one")).toHaveFocus());
+		await userEvent.tab();
+		await waitFor(() => expect(screen.getByTestId("two")).toHaveFocus());
+
+		await userEvent.tab();
+		await waitFor(() => expect(screen.getByTestId("three")).toHaveFocus());
+
+		await userEvent.tab();
+
+		// Focus leaving the floating element closes it.
+		await waitFor(() =>
+			expect(screen.queryByRole("dialog")).not.toBeInTheDocument(),
+		);
+
+		expect(screen.getByTestId("last")).toHaveFocus();
+	});
+
+	it("false - shift tabbing does not trap focus when reference is in order", async () => {
+		render(Main, { modal: false, order: ["reference", "content"] });
+		await fireEvent.click(screen.getByTestId("reference"));
+
+		await userEvent.tab();
+		await userEvent.tab({ shift: true });
+		await userEvent.tab({ shift: true });
+
+		await waitFor(() =>
+			expect(screen.queryByRole("dialog")).toBeInTheDocument(),
+		);
+	});
+
+	it("true - combobox hide all other nodes with aria-hidden", async () => {
+		render(Combobox);
+
+		await fireEvent.focus(screen.getByTestId("reference"));
+
+		expect(screen.getByTestId("reference")).not.toHaveAttribute("aria-hidden");
+		expect(screen.getByTestId("floating")).not.toHaveAttribute("aria-hidden");
+		expect(screen.getByTestId("btn-1")).toHaveAttribute("aria-hidden");
+		expect(screen.getByTestId("btn-2")).toHaveAttribute("aria-hidden");
+	});
+
+	it("true - combobox hide all other nodes with inert when outsideElementsInert=true", async () => {
+		render(Combobox, { outsideElementsInert: true });
+
+		await fireEvent.focus(screen.getByTestId("reference"));
+
+		expect(screen.getByTestId("reference")).not.toHaveAttribute("inert");
+		expect(screen.getByTestId("floating")).not.toHaveAttribute("inert");
+		await waitFor(() =>
+			expect(screen.getByTestId("btn-1")).toHaveAttribute("inert"),
+		);
+		await waitFor(() =>
+			expect(screen.getByTestId("btn-2")).toHaveAttribute("inert"),
+		);
+	});
+
+	it("false - comboboxes do not hide all other nodes", async () => {
+		render(Combobox, { modal: false });
+
+		await fireEvent.focus(screen.getByTestId("reference"));
+
+		expect(screen.getByTestId("reference")).not.toHaveAttribute("inert");
+		expect(screen.getByTestId("floating")).not.toHaveAttribute("inert");
+		expect(screen.getByTestId("btn-1")).not.toHaveAttribute("inert");
+		expect(screen.getByTestId("btn-2")).not.toHaveAttribute("inert");
+	});
+
+	it("falls back to the floating element when it has no tabbable content", async () => {
+		render(FloatingFallback);
+
+		await waitFor(() => expect(screen.getByTestId("floating")).toHaveFocus());
+		await userEvent.tab();
+		await waitFor(() => expect(screen.getByTestId("floating")).toHaveFocus());
+		await userEvent.tab({ shift: true });
+		await waitFor(() => expect(screen.getByTestId("floating")).toHaveFocus());
+	});
+
+	it("correctly handles mixed modality and nesting ", async () => {
+		render(MixedModMain);
+
+		await userEvent.click(screen.getByTestId("open-dialog"));
+		await userEvent.click(screen.getByTestId("open-nested-dialog"));
+
+		expect(screen.queryByTestId("close-dialog")).toBeInTheDocument();
+		expect(screen.queryByTestId("close-nested-dialog")).toBeInTheDocument();
+	});
+
+	it("true - applies aria-hidden to outside nodes", async () => {
+		render(OutsideNodes);
+		await fireEvent.click(screen.getByTestId("reference"));
+
+		expect(screen.getByTestId("reference")).toHaveAttribute(
+			"aria-hidden",
+			"true",
+		);
+		expect(screen.getByTestId("floating")).not.toHaveAttribute("aria-hidden");
+		expect(screen.getByTestId("aria-live")).not.toHaveAttribute("aria-hidden");
+		expect(screen.getByTestId("btn-1")).toHaveAttribute("aria-hidden", "true");
+		expect(screen.getByTestId("btn-2")).toHaveAttribute("aria-hidden", "true");
+
+		await fireEvent.click(screen.getByTestId("reference"));
+
+		expect(screen.getByTestId("reference")).not.toHaveAttribute("aria-hidden");
+		expect(screen.getByTestId("aria-live")).not.toHaveAttribute("aria-hidden");
+		expect(screen.getByTestId("btn-1")).not.toHaveAttribute("aria-hidden");
+		expect(screen.getByTestId("btn-2")).not.toHaveAttribute("aria-hidden");
+	});
+
+	it("true - applies inert to outside nodes when outsideElementsInert=true", async () => {
+		render(OutsideNodes, { outsideElementsInert: true });
+		await fireEvent.click(screen.getByTestId("reference"));
+
+		expect(screen.getByTestId("reference")).toHaveAttribute("inert");
+		expect(screen.getByTestId("floating")).not.toHaveAttribute("inert");
+		expect(screen.getByTestId("aria-live")).not.toHaveAttribute("inert");
+		expect(screen.getByTestId("btn-1")).toHaveAttribute("inert");
+		expect(screen.getByTestId("btn-2")).toHaveAttribute("inert");
+
+		await fireEvent.click(screen.getByTestId("reference"));
+
+		expect(screen.getByTestId("reference")).not.toHaveAttribute("inert");
+		expect(screen.getByTestId("aria-live")).not.toHaveAttribute("inert");
+		expect(screen.getByTestId("btn-1")).not.toHaveAttribute("inert");
+		expect(screen.getByTestId("btn-2")).not.toHaveAttribute("inert");
+	});
+
+	it("false - does not apply inert to outside nodes", async () => {
+		render(OutsideNodes, { modal: false });
+		await fireEvent.click(screen.getByTestId("reference"));
+
+		expect(screen.getByTestId("floating")).not.toHaveAttribute("inert");
+		expect(screen.getByTestId("aria-live")).not.toHaveAttribute("inert");
+		expect(screen.getByTestId("btn-1")).not.toHaveAttribute("inert");
+		expect(screen.getByTestId("btn-2")).not.toHaveAttribute("inert");
+		expect(screen.getByTestId("reference")).toHaveAttribute(
+			"data-floating-ui-inert",
+		);
+		expect(screen.getByTestId("btn-1")).toHaveAttribute(
+			"data-floating-ui-inert",
+		);
+		expect(screen.getByTestId("btn-2")).toHaveAttribute(
+			"data-floating-ui-inert",
+		);
+
+		await fireEvent.click(screen.getByTestId("reference"));
+
+		expect(screen.getByTestId("reference")).not.toHaveAttribute(
+			"data-floating-ui-inert",
+		);
+		expect(screen.getByTestId("btn-1")).not.toHaveAttribute(
+			"data-floating-ui-inert",
+		);
+		expect(screen.getByTestId("btn-2")).not.toHaveAttribute(
+			"data-floating-ui-inert",
+		);
+	});
+});
+
+describe("disabled", () => {
+	it("respects true -> false", async () => {
+		render(ToggleDisabled);
+
+		await fireEvent.click(screen.getByTestId("reference"));
+		expect(screen.getByTestId("floating")).not.toHaveFocus();
+		await waitFor(() =>
+			expect(screen.getByTestId("floating")).not.toHaveFocus(),
+		);
+		await fireEvent.click(screen.getByTestId("toggle"));
+		await waitFor(() => expect(screen.getByTestId("floating")).toHaveFocus());
+	});
+
+	it("respects false", async () => {
+		render(ToggleDisabled, { disabled: false });
+
+		await fireEvent.click(screen.getByTestId("reference"));
+		await waitFor(() => expect(screen.getByTestId("floating")).toHaveFocus());
+	});
+
+	it("supports keepMounted behavior", async () => {
+		render(KeepMounted);
+
+		expect(screen.getByTestId("floating")).not.toHaveFocus();
+
+		await fireEvent.click(screen.getByTestId("reference"));
+
+		await waitFor(() => expect(screen.getByTestId("child")).toHaveFocus());
+
+		await userEvent.tab();
+
+		await waitFor(() => expect(screen.getByTestId("after")).toHaveFocus());
+
+		await userEvent.tab({ shift: true });
+
+		await fireEvent.click(screen.getByTestId("reference"));
+
+		await waitFor(() => expect(screen.getByTestId("child")).toHaveFocus());
+
+		await userEvent.keyboard(testKbd.ESCAPE);
+
+		await waitFor(() => expect(screen.getByTestId("reference")).toHaveFocus());
+	});
+});
+
+describe("order", () => {
+	it("handles [reference, content]", async () => {
+		render(Main, { order: ["reference", "content"] });
+		await fireEvent.click(screen.getByTestId("reference"));
+
+		await waitFor(() => expect(screen.getByTestId("reference")).toHaveFocus());
+
+		await userEvent.tab();
+		await waitFor(() => expect(screen.getByTestId("one")).toHaveFocus());
+
+		await userEvent.tab();
+		await waitFor(() => expect(screen.getByTestId("two")).toHaveFocus());
+	});
+
+	it("handles [floating, content]", async () => {
+		render(Main, { order: ["floating", "content"] });
+
+		await fireEvent.click(screen.getByTestId("reference"));
+
+		await waitFor(() => expect(screen.getByTestId("floating")).toHaveFocus());
+
+		await userEvent.tab();
+		await waitFor(() => expect(screen.getByTestId("one")).toHaveFocus());
+
+		await userEvent.tab();
+		await waitFor(() => expect(screen.getByTestId("two")).toHaveFocus());
+
+		await userEvent.tab();
+		await waitFor(() => expect(screen.getByTestId("three")).toHaveFocus());
+
+		await userEvent.tab();
+		await waitFor(() => expect(screen.getByTestId("floating")).toHaveFocus());
+
+		await userEvent.tab({ shift: true });
+		await waitFor(() => expect(screen.getByTestId("three")).toHaveFocus());
+
+		await userEvent.tab({ shift: true });
+		await waitFor(() => expect(screen.getByTestId("two")).toHaveFocus());
+
+		await userEvent.tab({ shift: true });
+		await waitFor(() => expect(screen.getByTestId("one")).toHaveFocus());
+
+		await userEvent.tab({ shift: true });
+		await waitFor(() => expect(screen.getByTestId("floating")).toHaveFocus());
+	});
+
+	it("handles [reference, floating, content]", async () => {
+		render(Main, { order: ["reference", "floating", "content"] });
+		await fireEvent.click(screen.getByTestId("reference"));
+
+		await waitFor(() => expect(screen.getByTestId("reference")).toHaveFocus());
+
+		await userEvent.tab();
+		await waitFor(() => expect(screen.getByTestId("floating")).toHaveFocus());
+
+		await userEvent.tab();
+		await waitFor(() => expect(screen.getByTestId("one")).toHaveFocus());
+
+		await userEvent.tab();
+		await waitFor(() => expect(screen.getByTestId("two")).toHaveFocus());
+
+		await userEvent.tab();
+		await waitFor(() => expect(screen.getByTestId("three")).toHaveFocus());
+
+		await userEvent.tab();
+		await waitFor(() => expect(screen.getByTestId("reference")).toHaveFocus());
+
+		await userEvent.tab({ shift: true });
+		await waitFor(() => expect(screen.getByTestId("three")).toHaveFocus());
+
+		await userEvent.tab({ shift: true });
+		await userEvent.tab({ shift: true });
+		await userEvent.tab({ shift: true });
+		await userEvent.tab({ shift: true });
+
+		await waitFor(() => expect(screen.getByTestId("reference")).toHaveFocus());
+	});
+});
+
+describe("non-modal + FloatingPortal", () => {
+	it("focuses inside element, tabbing out focuses last document element", async () => {
+		render(NonModalFloatingPortal);
+		await userEvent.click(screen.getByTestId("reference"));
+
+		await waitFor(() => expect(screen.getByTestId("inside")).toHaveFocus());
+
+		await userEvent.tab();
+
+		await waitFor(() =>
+			expect(screen.queryByTestId("floating")).not.toBeInTheDocument(),
+		);
+		await waitFor(() => expect(screen.getByTestId("last")).toHaveFocus());
+	});
+
+	it("handles order: [reference, content] focuses reference, then inside, then, last document element", async () => {
+		render(NonModalFloatingPortal, { order: ["reference", "content"] });
+
+		await userEvent.click(screen.getByTestId("reference"));
+		await waitFor(() => expect(screen.getByTestId("reference")).toHaveFocus());
+		await sleep(20);
+		await userEvent.tab();
+
+		await waitFor(() => expect(screen.getByTestId("inside")).toHaveFocus());
+
+		await userEvent.tab();
+
+		await waitFor(() => expect(screen.getByTestId("last")).toHaveFocus());
+	});
+
+	it("handles order: [reference, floating, content] focuses reference, then floating, then inside, then, last document element", async () => {
+		render(NonModalFloatingPortal, {
+			order: ["reference", "floating", "content"],
+		});
+
+		await userEvent.click(screen.getByTestId("reference"));
+		await waitFor(() => expect(screen.getByTestId("reference")).toHaveFocus());
+		await sleep(20);
+
+		await userEvent.tab();
+
+		await waitFor(() => expect(screen.getByTestId("floating")).toHaveFocus());
+
+		await userEvent.tab();
+
+		await waitFor(() => expect(screen.getByTestId("inside")).toHaveFocus());
+
+		await userEvent.tab();
+
+		await waitFor(() => expect(screen.getByTestId("last")).toHaveFocus());
+	});
+
+	it("handles shift + tab", async () => {
+		render(NonModalFloatingPortal);
+
+		await userEvent.click(screen.getByTestId("reference"));
+		await waitFor(() =>
+			expect(screen.queryByTestId("floating")).toBeInTheDocument(),
+		);
+		await sleep(20);
+		await userEvent.tab({ shift: true });
+
+		expect(screen.queryByTestId("floating")).toBeInTheDocument();
+
+		await userEvent.tab({ shift: true });
+
+		expect(screen.queryByTestId("floating")).not.toBeInTheDocument();
+	});
+});
+
+describe("Navigation", () => {
+	it("does not focus reference when hovering it", async () => {
+		render(Navigation);
+		await userEvent.hover(screen.getByText("Product"));
+		await userEvent.unhover(screen.getByText("Product"));
+		expect(screen.getByText("Product")).not.toHaveFocus();
+	});
+
+	it("returns focus to reference when floating element was opened by hover but is closed by esc key", async () => {
+		render(Navigation);
+		await userEvent.hover(screen.getByText("Product"));
+		await userEvent.keyboard(testKbd.ESCAPE);
+		expect(screen.getByText("Product")).toHaveFocus();
+	});
+
+	it("returns focus to reference when floating element was opened by hover but is closed by an explicit close action", async () => {
+		render(Navigation);
+		await userEvent.hover(screen.getByText("Product"));
+
+		await userEvent.click(screen.getByText("Close").parentElement!);
+		await userEvent.keyboard(testKbd.TAB);
+		await waitFor(() => expect(screen.getByText("Close")).toHaveFocus());
+		await userEvent.keyboard(testKbd.ENTER);
+		await sleep(20);
+
+		await waitFor(() => expect(screen.getByText("Product")).toHaveFocus());
+	});
+
+	it("does not re-open after closing via escape key", async () => {
+		render(Navigation);
+		await userEvent.hover(screen.getByText("Product"));
+		await userEvent.keyboard(testKbd.ESCAPE);
+		expect(screen.queryByText("Link 1")).not.toBeInTheDocument();
+	});
+
+	it("closes when unhovering floating element even when focus is inside it", async () => {
+		render(Navigation);
+		await userEvent.hover(screen.getByText("Product"));
+		await userEvent.click(screen.getByTestId("subnavigation"));
+		await userEvent.unhover(screen.getByTestId("subnavigation"));
+		await userEvent.hover(screen.getByText("Product"));
+		await userEvent.unhover(screen.getByText("Product"));
+		await waitFor(() =>
+			expect(screen.queryByTestId("subnavigation")).not.toBeInTheDocument(),
+		);
+	});
+});
+
+describe("Drawer", () => {
+	window.matchMedia = vi.fn().mockImplementation((query) => ({
+		matches: true,
+		media: query,
+		onchange: null,
+		addListener: vi.fn(),
+		removeListener: vi.fn(),
+		addEventListener: vi.fn(),
+		removeEventListener: vi.fn(),
+		dispatchEvent: vi.fn(),
+	}));
+	it("does not close when clicking another button outside", async () => {
+		render(Drawer);
+
+		await userEvent.click(screen.getByText("My button"));
+		expect(screen.queryByText("Close")).toBeInTheDocument();
+		await userEvent.click(screen.getByText("Next button"));
+		await waitFor(() =>
+			expect(screen.queryByText("Close")).toBeInTheDocument(),
+		);
+	});
+
+	it("closeOnFocusOut=false - does not close when tabbing out", async () => {
+		render(Drawer);
+
+		await userEvent.click(screen.getByText("My button"));
+		await sleep(20);
+		expect(screen.queryByText("Close")).toBeInTheDocument();
+		await userEvent.keyboard(testKbd.TAB);
+		await waitFor(() =>
+			expect(document.activeElement).toBe(screen.getByText("Next button")),
+		);
+		expect(screen.queryByText("Close")).toBeInTheDocument();
+	});
+
+	it("returns focus when tabbing out then back to close button", async () => {
+		render(Drawer);
+
+		await userEvent.click(screen.getByText("My button"));
+		await sleep(20);
+		expect(screen.queryByText("Close")).toBeInTheDocument();
+		await userEvent.keyboard(testKbd.TAB);
+		await waitFor(() => expect(screen.getByText("Next button")).toHaveFocus());
+		await userEvent.keyboard("{Shift>}{Tab}{/Shift}");
+		await sleep(20);
+		await waitFor(() => expect(screen.getByText("Close")).toHaveFocus());
+		await userEvent.click(screen.getByText("Close"));
+		await waitFor(() => expect(screen.getByText("My button")).toHaveFocus());
+	});
+});
+
+describe("restoreFocus", () => {
+	it("true: restores focus to nearest tabbable element if currently focused element is removed", async () => {
+		render(RestoreFocus);
+
+		await userEvent.click(screen.getByTestId("reference"));
+
+		const one = screen.getByRole("button", { name: "one" });
+		const two = screen.getByRole("button", { name: "two" });
+		const three = screen.getByRole("button", { name: "three" });
+		const floating = screen.getByTestId("floating");
+
+		await waitFor(() => expect(one).toHaveFocus());
+		await fireEvent.click(one);
+		await fireEvent.focusOut(floating);
+
+		expect(two).toHaveFocus();
+		await fireEvent.click(two);
+		await fireEvent.focusOut(floating);
+
+		expect(three).toHaveFocus();
+		await fireEvent.click(three);
+		await fireEvent.focusOut(floating);
+
+		expect(floating).toHaveFocus();
+	});
+
+	it("false: does not restore focus to nearest tabbable element if currently focused element is removed", async () => {
+		render(RestoreFocus, { restoreFocus: false });
+
+		await userEvent.click(screen.getByTestId("reference"));
+
+		const one = screen.getByRole("button", { name: "one" });
+		const floating = screen.getByTestId("floating");
+
+		await waitFor(() => expect(one).toHaveFocus());
+		await fireEvent.click(one);
+		await fireEvent.focusOut(floating);
+
+		expect(document.body).toHaveFocus();
+	});
+});
+
+it("trapped combobox prevents focus moving outside floating element", async () => {
+	render(TrappedCombobox);
+	await userEvent.click(screen.getByTestId("input"));
+	await waitFor(() => expect(screen.getByTestId("input")).not.toHaveFocus());
+	await waitFor(() =>
+		expect(screen.getByRole("button", { name: "one" })).toHaveFocus(),
+	);
+	await userEvent.tab();
+	await waitFor(() =>
+		expect(screen.getByRole("button", { name: "two" })).toHaveFocus(),
+	);
+	await userEvent.tab();
+	await waitFor(() =>
+		expect(screen.getByRole("button", { name: "one" })).toHaveFocus(),
+	);
+});
+
+it("untrapped combobox creates non-modal focus management", async () => {
+	render(UntrappedCombobox);
+	await userEvent.click(screen.getByTestId("input"));
+	await waitFor(() => expect(screen.getByTestId("input")).toHaveFocus());
+	await userEvent.tab();
+	await waitFor(() =>
+		expect(screen.getByRole("button", { name: "one" })).toHaveFocus(),
+	);
+	await userEvent.tab({ shift: true });
+	await waitFor(() => expect(screen.getByTestId("input")).toHaveFocus());
+});
+
+it("returns focus to the last connected element", async () => {
+	render(Connected);
+	await userEvent.click(screen.getByTestId("parent-reference"));
+	await waitFor(() =>
+		expect(screen.getByTestId("parent-floating-reference")).toHaveFocus(),
+	);
+	await userEvent.click(screen.getByTestId("parent-floating-reference"));
+	await waitFor(() =>
+		expect(screen.getByTestId("child-reference")).toHaveFocus(),
+	);
+	await userEvent.keyboard(testKbd.ESCAPE);
+	await waitFor(() =>
+		expect(screen.getByTestId("parent-reference")).toHaveFocus(),
+	);
+});
+
+it("places focus on an element with floating props when floating element is a wrapper", async () => {
+	render(FloatingWrapper);
+
+	await userEvent.click(screen.getByRole("button"));
+
+	await waitFor(() => expect(screen.getByTestId("inner")).toHaveFocus());
+});
+
+it("closes the floating element upon tabbing out of a modal combobox", async () => {
+	render(ModalCombobox);
+
+	await userEvent.click(screen.getByTestId("input"));
+	await waitFor(() => expect(screen.getByTestId("input")).toHaveFocus());
+	await userEvent.tab();
+	await waitFor(() => expect(screen.getByTestId("after")).toHaveFocus());
+});
+
+it("does not return focus to the reference when floating element is triggered by hover", async () => {
+	render(Hover);
+
+	const reference = screen.getByTestId("reference");
+	reference.focus();
+	await waitFor(() => expect(reference).toHaveFocus());
+
+	await userEvent.hover(reference);
+
+	await waitFor(() => expect(screen.getByTestId("floating")).toHaveFocus());
+
+	await userEvent.unhover(screen.getByTestId("floating"));
+
+	await waitFor(() =>
+		expect(screen.getByTestId("reference")).not.toHaveFocus(),
+	);
+});
+
+it("uses aria-hidden instead of inert on outside nodes if opened with hover and modal=true", async () => {
+	render(Hover);
+
+	await userEvent.hover(screen.getByTestId("reference"));
+
+	await waitFor(() =>
+		expect(screen.getByText("outside")).not.toHaveAttribute("inert"),
+	);
+	await waitFor(() =>
+		expect(screen.getByText("outside")).toHaveAttribute("aria-hidden", "true"),
+	);
+});
+
+it("returns focus to the appropriate trigger when navigating submenus with keyboard", async () => {
+	render(Menubar);
+
+	await userEvent.click(screen.getByText("Edit"));
+	await sleep(20);
+	await userEvent.keyboard(testKbd.ARROW_DOWN);
+	await userEvent.keyboard(testKbd.ARROW_DOWN);
+	await userEvent.keyboard(testKbd.ARROW_DOWN);
+	await userEvent.keyboard(testKbd.ARROW_DOWN);
+	await waitFor(() => expect(screen.getByText("Submenu")).toHaveFocus());
+	await userEvent.keyboard(testKbd.ARROW_RIGHT);
+	await sleep(20);
+	await waitFor(() => expect(screen.getByText("Second level")).toHaveFocus());
+	await userEvent.keyboard(testKbd.ARROW_LEFT);
+	await sleep(20);
+	await waitFor(() => expect(screen.getByText("Submenu")).toHaveFocus());
+});
diff --git a/packages/floating-ui-svelte/test/unit/components/floating-portal/components/main.svelte b/packages/floating-ui-svelte/test/unit/components/floating-portal/components/main.svelte
new file mode 100644
index 00000000..60e97eaf
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/components/floating-portal/components/main.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import FloatingPortal from "../../../../../src/components/floating-portal/floating-portal.svelte";
+	import { useFloating } from "../../../../../src/index.js";
+	import type { Boxed } from "../../../../../src/types.js";
+
+	let props: { root?: HTMLElement | null; id?: string } = $props();
+
+	let open = $state(false);
+	const f = useFloating({
+		open: () => open,
+		onOpenChange: (v) => {
+			open = v;
+		},
+	});
+</script>
+
+<button
+	data-testid="reference"
+	bind:this={f.elements.reference}
+	onclick={() => (open = !open)}>open</button>
+<FloatingPortal {...props}>
+	{#if open}
+		<div bind:this={f.elements.floating} data-testid="floating"></div>
+	{/if}
+</FloatingPortal>
diff --git a/packages/floating-ui-svelte/test/unit/components/floating-portal/floating-portal.test.ts b/packages/floating-ui-svelte/test/unit/components/floating-portal/floating-portal.test.ts
new file mode 100644
index 00000000..b4e39986
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/components/floating-portal/floating-portal.test.ts
@@ -0,0 +1,36 @@
+import {
+	act,
+	fireEvent,
+	render,
+	screen,
+	waitFor,
+} from "@testing-library/svelte";
+import { expect, it } from "vitest";
+import Main from "./components/main.svelte";
+import { sleep } from "../../../utils.js";
+
+it("creates a custom id node", async () => {
+	render(Main, { id: "custom-id" });
+
+	await waitFor(() =>
+		expect(document.querySelector("#custom-id")).toBeInTheDocument(),
+	);
+	const customId = document.getElementById("custom-id");
+	customId?.remove();
+});
+
+it("uses a custom id node as the root", async () => {
+	const customRoot = document.createElement("div");
+	customRoot.id = "custom-root";
+	document.body.appendChild(customRoot);
+	render(Main, { id: "custom-root" });
+	await fireEvent.click(screen.getByTestId("reference"));
+	await sleep(200);
+	await act(async () => {});
+	await waitFor(() => {
+		expect(screen.getByTestId("floating").parentElement?.parentElement).toBe(
+			customRoot,
+		);
+	});
+	customRoot.remove();
+});
diff --git a/packages/floating-ui-svelte/test/hooks/use-click.ts b/packages/floating-ui-svelte/test/unit/hooks/use-click.test.ts
similarity index 96%
rename from packages/floating-ui-svelte/test/hooks/use-click.ts
rename to packages/floating-ui-svelte/test/unit/hooks/use-click.test.ts
index c3820898..0d71ae74 100644
--- a/packages/floating-ui-svelte/test/hooks/use-click.ts
+++ b/packages/floating-ui-svelte/test/unit/hooks/use-click.test.ts
@@ -177,7 +177,7 @@ describe("useClick", () => {
 			expect(screen.queryByTestId("floating")).toBeInTheDocument();
 		});
 
-		it("when applied to a typable reference does not return a `Space` key event handler", async () => {
+		it("when applied to a typeable reference does not return a `Space` key event handler", async () => {
 			render(App, { element: "input" });
 
 			await fireEvent.keyDown(screen.getByTestId("reference"), { key: " " });
@@ -186,7 +186,7 @@ describe("useClick", () => {
 			expect(screen.queryByTestId("floating")).not.toBeInTheDocument();
 		});
 
-		it("when applied to a typable reference does not return a `Enter` key event handler", async () => {
+		it("when applied to a typeable reference does not return a `Enter` key event handler", async () => {
 			render(App, { element: "input" });
 
 			await fireEvent.keyDown(screen.getByTestId("reference"), {
diff --git a/packages/floating-ui-svelte/test/unit/hooks/use-client-point.test.ts b/packages/floating-ui-svelte/test/unit/hooks/use-client-point.test.ts
new file mode 100644
index 00000000..fcf9cb46
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/hooks/use-client-point.test.ts
@@ -0,0 +1,224 @@
+import type { Coords } from "../../../src/types.js";
+import { screen, fireEvent, render } from "@testing-library/svelte";
+import { expect, it } from "vitest";
+import UseClientPoint from "./wrapper-components/use-client-point.svelte";
+import { sleep } from "../../utils.js";
+
+function expectLocation({ x, y }: Coords) {
+	expect(Number(screen.getByTestId("x")?.textContent)).toBe(x);
+	expect(Number(screen.getByTestId("y")?.textContent)).toBe(y);
+	expect(Number(screen.getByTestId("width")?.textContent)).toBe(0);
+	expect(Number(screen.getByTestId("height")?.textContent)).toBe(0);
+}
+
+it("renders at explicit client point and can be updated", async () => {
+	render(UseClientPoint, { x: 0, y: 0 });
+
+	await fireEvent.click(screen.getByTestId("toggle-open"));
+
+	expectLocation({ x: 0, y: 0 });
+
+	await fireEvent.click(screen.getByTestId("set-point"));
+	await sleep(10);
+
+	expectLocation({ x: 1000, y: 1000 });
+});
+
+it("renders at mouse event coords", async () => {
+	render(UseClientPoint);
+
+	await fireEvent(
+		screen.getByTestId("reference"),
+		new MouseEvent("mousemove", {
+			bubbles: true,
+			clientX: 500,
+			clientY: 500,
+		}),
+	);
+
+	expectLocation({ x: 500, y: 500 });
+
+	await fireEvent(
+		screen.getByTestId("reference"),
+		new MouseEvent("mousemove", {
+			bubbles: true,
+			clientX: 1000,
+			clientY: 1000,
+		}),
+	);
+
+	expectLocation({ x: 1000, y: 1000 });
+
+	// Window listener isn't registered unless the floating element is open.
+	await fireEvent(
+		window,
+		new MouseEvent("mousemove", {
+			bubbles: true,
+			clientX: 700,
+			clientY: 700,
+		}),
+	);
+
+	expectLocation({ x: 1000, y: 1000 });
+
+	await fireEvent.click(screen.getByTestId("toggle-open"));
+
+	await fireEvent(
+		screen.getByTestId("reference"),
+		new MouseEvent("mousemove", {
+			bubbles: true,
+			clientX: 700,
+			clientY: 700,
+		}),
+	);
+
+	expectLocation({ x: 700, y: 700 });
+
+	await fireEvent(
+		document.body,
+		new MouseEvent("mousemove", {
+			bubbles: true,
+			clientX: 0,
+			clientY: 0,
+		}),
+	);
+
+	expectLocation({ x: 0, y: 0 });
+});
+
+it("ignores mouse when explicit coords are specified", async () => {
+	render(UseClientPoint, { x: 0, y: 0 });
+
+	await fireEvent(
+		screen.getByTestId("reference"),
+		new MouseEvent("mousemove", {
+			bubbles: true,
+			clientX: 500,
+			clientY: 500,
+		}),
+	);
+
+	expectLocation({ x: 0, y: 0 });
+});
+
+it("cleans up window listener when closing or disabling", async () => {
+	render(UseClientPoint);
+
+	await fireEvent.click(screen.getByTestId("toggle-open"));
+
+	await fireEvent(
+		screen.getByTestId("reference"),
+		new MouseEvent("mousemove", {
+			bubbles: true,
+			clientX: 500,
+			clientY: 500,
+		}),
+	);
+
+	await fireEvent.click(screen.getByTestId("toggle-open"));
+
+	await fireEvent(
+		document.body,
+		new MouseEvent("mousemove", {
+			bubbles: true,
+			clientX: 0,
+			clientY: 0,
+		}),
+	);
+
+	expectLocation({ x: 500, y: 500 });
+
+	await fireEvent.click(screen.getByTestId("toggle-open"));
+
+	await fireEvent(
+		document.body,
+		new MouseEvent("mousemove", {
+			bubbles: true,
+			clientX: 500,
+			clientY: 500,
+		}),
+	);
+
+	expectLocation({ x: 500, y: 500 });
+
+	await fireEvent.click(screen.getByTestId("toggle-enabled"));
+
+	await fireEvent(
+		document.body,
+		new MouseEvent("mousemove", {
+			bubbles: true,
+			clientX: 0,
+			clientY: 0,
+		}),
+	);
+
+	expectLocation({ x: 500, y: 500 });
+});
+
+it("respects axis x", async () => {
+	render(UseClientPoint, { axis: "x" });
+
+	await fireEvent.click(screen.getByTestId("toggle-open"));
+
+	await fireEvent(
+		screen.getByTestId("reference"),
+		new MouseEvent("mousemove", {
+			bubbles: true,
+			clientX: 500,
+			clientY: 500,
+		}),
+	);
+
+	expectLocation({ x: 500, y: 0 });
+});
+
+it("respects axis y", async () => {
+	render(UseClientPoint, { axis: "y" });
+
+	await fireEvent.click(screen.getByTestId("toggle-open"));
+
+	await fireEvent(
+		screen.getByTestId("reference"),
+		new MouseEvent("mousemove", {
+			bubbles: true,
+			clientX: 500,
+			clientY: 500,
+		}),
+	);
+
+	expectLocation({ x: 0, y: 500 });
+});
+
+it("removes window listener when cursor lands on floating element", async () => {
+	render(UseClientPoint);
+	await fireEvent.click(screen.getByTestId("toggle-open"));
+
+	await fireEvent(
+		screen.getByTestId("reference"),
+		new MouseEvent("mousemove", {
+			bubbles: true,
+			clientX: 500,
+			clientY: 500,
+		}),
+	);
+
+	await fireEvent(
+		screen.getByTestId("floating"),
+		new MouseEvent("mousemove", {
+			bubbles: true,
+			clientX: 500,
+			clientY: 500,
+		}),
+	);
+
+	await fireEvent(
+		document.body,
+		new MouseEvent("mousemove", {
+			bubbles: true,
+			clientX: 0,
+			clientY: 0,
+		}),
+	);
+
+	expectLocation({ x: 500, y: 500 });
+});
diff --git a/packages/floating-ui-svelte/test/unit/hooks/use-dismiss.test.ts b/packages/floating-ui-svelte/test/unit/hooks/use-dismiss.test.ts
new file mode 100644
index 00000000..465d9c68
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/hooks/use-dismiss.test.ts
@@ -0,0 +1,485 @@
+import {
+	act,
+	fireEvent,
+	render,
+	screen,
+	waitFor,
+} from "@testing-library/svelte";
+import { describe, expect, it, vi } from "vitest";
+import Dismiss from "./wrapper-components/use-dismiss/dismiss.svelte";
+import { sleep, testKbd } from "../../utils.js";
+import { userEvent } from "@testing-library/user-event";
+import ThirdParty from "./wrapper-components/use-dismiss/third-party.svelte";
+import DismissNestedPopovers from "./wrapper-components/use-dismiss/dismiss-nested-popovers.svelte";
+import DismissPortaledChildren from "./wrapper-components/use-dismiss/dismiss-portaled-children.svelte";
+import { normalizeProp } from "../../../src/index.js";
+import DismissNestedNested from "./wrapper-components/use-dismiss/dismiss-nested-nested.svelte";
+import DismissWithoutFloatingTree from "./wrapper-components/use-dismiss/dismiss-without-floating-tree.svelte";
+import DismissCaptureDialogsMulti from "./wrapper-components/use-dismiss/dismiss-capture-dialogs-multi.svelte";
+
+describe("true", () => {
+	it("dismisses with escape key", async () => {
+		render(Dismiss);
+		await fireEvent.keyDown(document.body, { key: "Escape" });
+		expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
+	});
+
+	it("does not dismiss with escape key if IME is active", async () => {
+		const onClose = vi.fn();
+
+		render(Dismiss, { onClose, escapeKey: true });
+
+		const textbox = screen.getByRole("textbox");
+
+		await fireEvent.focus(textbox);
+
+		// Simulate behavior when "あ" (Japanese) is entered and Esc is pressed for IME
+		// cancellation.
+		await fireEvent.change(textbox, { target: { value: "あ" } });
+		await fireEvent.compositionStart(textbox);
+		await fireEvent.keyDown(textbox, { key: "Escape" });
+		await fireEvent.compositionEnd(textbox);
+
+		// Wait for the compositionend timeout tick due to Safari
+		await sleep();
+
+		expect(onClose).toHaveBeenCalledTimes(0);
+
+		await fireEvent.keyDown(textbox, { key: "Escape" });
+
+		expect(onClose).toHaveBeenCalledTimes(1);
+	});
+
+	it("dismisses with outside pointer press", async () => {
+		render(Dismiss);
+		await userEvent.click(document.body);
+		expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
+	});
+
+	it("dismisses with reference press", async () => {
+		render(Dismiss, { referencePress: true });
+		await userEvent.click(screen.getByRole("button"));
+		expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
+	});
+
+	it("dismisses with native click", async () => {
+		render(Dismiss, { referencePress: true });
+		await fireEvent.click(screen.getByRole("button"));
+		expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
+	});
+
+	it("dismisses with ancestor scroll", async () => {
+		render(Dismiss, { ancestorScroll: true });
+		await fireEvent.scroll(window);
+		expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
+	});
+
+	it("respects outside press function guard", async () => {
+		render(Dismiss, { outsidePress: () => false });
+		await userEvent.click(document.body);
+		expect(screen.queryByRole("tooltip")).toBeInTheDocument();
+	});
+
+	it("ignores outside press for third party elements", async () => {
+		render(ThirdParty);
+		await act(async () => {});
+
+		const thirdParty = document.createElement("div");
+		thirdParty.setAttribute("data-testid", "third-party");
+		document.body.appendChild(thirdParty);
+		await userEvent.click(thirdParty);
+		expect(screen.queryByRole("dialog")).toBeInTheDocument();
+		thirdParty.remove();
+	});
+
+	describe("does not ignore outside press for nested floating elements", () => {
+		it("respects when both are modals", async () => {
+			render(DismissNestedPopovers, { modal: [true, true] });
+			await act(async () => {});
+
+			const popover1 = screen.getByTestId("popover-1");
+			const popover2 = screen.getByTestId("popover-2");
+			await userEvent.click(popover2);
+			expect(popover1).toBeInTheDocument();
+			expect(popover2).toBeInTheDocument();
+			await userEvent.click(popover1);
+			expect(popover2).not.toBeInTheDocument();
+		});
+
+		it("respects when outside is modal and inside is not", async () => {
+			render(DismissNestedPopovers, { modal: [true, false] });
+			await act(async () => {});
+
+			const popover1 = screen.getByTestId("popover-1");
+			const popover2 = screen.getByTestId("popover-2");
+
+			await userEvent.click(popover2);
+			expect(popover1).toBeInTheDocument();
+			expect(popover2).toBeInTheDocument();
+			await userEvent.click(popover1);
+			expect(popover2).not.toBeInTheDocument();
+		});
+
+		it("respects when inside is modal and outside is not", async () => {
+			render(DismissNestedPopovers, { modal: [false, true] });
+			await act(async () => {});
+
+			const popover1 = screen.getByTestId("popover-1");
+			const popover2 = screen.getByTestId("popover-2");
+			await userEvent.click(popover2);
+			expect(popover1).toBeInTheDocument();
+			expect(popover2).toBeInTheDocument();
+			await userEvent.click(popover1);
+			expect(popover2).not.toBeInTheDocument();
+		});
+
+		it("respects when neither are modals", async () => {
+			render(DismissNestedPopovers, { modal: null });
+			await act(async () => {});
+
+			const popover1 = screen.getByTestId("popover-1");
+			const popover2 = screen.getByTestId("popover-2");
+			await userEvent.click(popover2);
+			expect(popover1).toBeInTheDocument();
+			expect(popover2).toBeInTheDocument();
+			await userEvent.click(popover1);
+			expect(popover2).not.toBeInTheDocument();
+		});
+	});
+});
+
+describe("false", () => {
+	it("dismisses with escape key", async () => {
+		render(Dismiss, { escapeKey: false });
+		await fireEvent.keyDown(document.body, { key: "Escape" });
+		expect(screen.queryByRole("tooltip")).toBeInTheDocument();
+	});
+
+	it("dismisses with outside press", async () => {
+		render(Dismiss, { outsidePress: false });
+		await userEvent.click(document.body);
+		expect(screen.queryByRole("tooltip")).toBeInTheDocument();
+	});
+
+	it("dismisses with reference pointer down", async () => {
+		render(Dismiss, { referencePress: false });
+		await userEvent.click(screen.getByRole("button"));
+		expect(screen.queryByRole("tooltip")).toBeInTheDocument();
+	});
+
+	it("dismisses with ancestor scroll", async () => {
+		render(Dismiss, { ancestorScroll: false });
+		await fireEvent.scroll(window);
+		expect(screen.queryByRole("tooltip")).toBeInTheDocument();
+	});
+
+	it("does not dismiss when clicking portaled children", async () => {
+		render(DismissPortaledChildren);
+		await sleep(100);
+
+		await fireEvent.pointerDown(screen.getByTestId("portaled-button"), {
+			bubbles: true,
+		});
+
+		await waitFor(() =>
+			expect(screen.queryByTestId("portaled-button")).toBeInTheDocument(),
+		);
+	});
+
+	it("respects outsidePress function guard", async () => {
+		render(Dismiss, { outsidePress: () => true });
+		await userEvent.click(document.body);
+		expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
+	});
+});
+
+describe("bubbles", () => {
+	describe("prop resolution", () => {
+		it("undefined", () => {
+			const { escapeKey: escapeKeyBubbles, outsidePress: outsidePressBubbles } =
+				normalizeProp();
+
+			expect(escapeKeyBubbles).toBe(false);
+			expect(outsidePressBubbles).toBe(true);
+		});
+
+		it("false", () => {
+			const { escapeKey: escapeKeyBubbles, outsidePress: outsidePressBubbles } =
+				normalizeProp(false);
+
+			expect(escapeKeyBubbles).toBe(false);
+			expect(outsidePressBubbles).toBe(false);
+		});
+
+		it("{}", () => {
+			const { escapeKey: escapeKeyBubbles, outsidePress: outsidePressBubbles } =
+				normalizeProp({});
+
+			expect(escapeKeyBubbles).toBe(false);
+			expect(outsidePressBubbles).toBe(true);
+		});
+
+		it("{ escapeKey: false }", () => {
+			const { escapeKey: escapeKeyBubbles, outsidePress: outsidePressBubbles } =
+				normalizeProp({
+					escapeKey: false,
+				});
+
+			expect(escapeKeyBubbles).toBe(false);
+			expect(outsidePressBubbles).toBe(true);
+		});
+
+		it("{ outsidePress: false }", () => {
+			const { escapeKey: escapeKeyBubbles, outsidePress: outsidePressBubbles } =
+				normalizeProp({
+					outsidePress: false,
+				});
+
+			expect(escapeKeyBubbles).toBe(false);
+			expect(outsidePressBubbles).toBe(false);
+		});
+	});
+
+	describe("outsidePress", () => {
+		it("true", async () => {
+			render(DismissNestedNested);
+
+			expect(screen.queryByTestId("outer")).toBeInTheDocument();
+			expect(screen.queryByTestId("inner")).toBeInTheDocument();
+
+			await fireEvent.pointerDown(document.body);
+
+			expect(screen.queryByTestId("outer")).not.toBeInTheDocument();
+			expect(screen.queryByTestId("inner")).not.toBeInTheDocument();
+		});
+
+		it("false", async () => {
+			render(DismissNestedNested, { outsidePress: [false, false] });
+
+			expect(screen.queryByTestId("outer")).toBeInTheDocument();
+			expect(screen.queryByTestId("inner")).toBeInTheDocument();
+
+			await fireEvent.pointerDown(document.body);
+
+			await waitFor(() =>
+				expect(screen.queryByTestId("outer")).toBeInTheDocument(),
+			);
+			await waitFor(() =>
+				expect(screen.queryByTestId("inner")).not.toBeInTheDocument(),
+			);
+
+			await fireEvent.pointerDown(document.body);
+
+			await waitFor(() =>
+				expect(screen.queryByTestId("outer")).not.toBeInTheDocument(),
+			);
+			await waitFor(() =>
+				expect(screen.queryByTestId("inner")).not.toBeInTheDocument(),
+			);
+		});
+
+		it("mixed", async () => {
+			render(DismissNestedNested, { outsidePress: [true, false] });
+
+			expect(screen.queryByTestId("outer")).toBeInTheDocument();
+			expect(screen.queryByTestId("inner")).toBeInTheDocument();
+
+			await fireEvent.pointerDown(document.body);
+
+			expect(screen.queryByTestId("outer")).toBeInTheDocument();
+			expect(screen.queryByTestId("inner")).not.toBeInTheDocument();
+
+			await fireEvent.pointerDown(document.body);
+
+			expect(screen.queryByTestId("outer")).not.toBeInTheDocument();
+			expect(screen.queryByTestId("inner")).not.toBeInTheDocument();
+		});
+	});
+
+	describe("escapeKey", () => {
+		it("without FloatingTree", async () => {
+			render(DismissWithoutFloatingTree);
+
+			screen.getByTestId("focus-button").focus();
+			await waitFor(() =>
+				expect(screen.queryByRole("tooltip")).toBeInTheDocument(),
+			);
+
+			await userEvent.keyboard(testKbd.ESCAPE);
+
+			expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
+			expect(screen.queryByRole("dialog")).toBeInTheDocument();
+		});
+
+		it("true", async () => {
+			render(DismissNestedNested, { bubbles: true });
+			expect(screen.queryByTestId("outer")).toBeInTheDocument();
+			expect(screen.queryByTestId("inner")).toBeInTheDocument();
+
+			await userEvent.keyboard(testKbd.ESCAPE);
+
+			expect(screen.queryByTestId("outer")).not.toBeInTheDocument();
+			expect(screen.queryByTestId("inner")).not.toBeInTheDocument();
+		});
+
+		it("false", async () => {
+			render(DismissNestedNested, { escapeKey: [false, false] });
+
+			expect(screen.queryByTestId("outer")).toBeInTheDocument();
+			expect(screen.queryByTestId("inner")).toBeInTheDocument();
+
+			await sleep(30);
+
+			await userEvent.keyboard(testKbd.ESCAPE);
+
+			expect(screen.queryByTestId("outer")).toBeInTheDocument();
+			await waitFor(() => {
+				expect(screen.queryByTestId("inner")).not.toBeInTheDocument();
+			});
+
+			await userEvent.keyboard(testKbd.ESCAPE);
+
+			expect(screen.queryByTestId("outer")).not.toBeInTheDocument();
+			expect(screen.queryByTestId("inner")).not.toBeInTheDocument();
+		});
+
+		it("mixed", async () => {
+			render(DismissNestedNested, { escapeKey: [true, false] });
+
+			expect(screen.queryByTestId("outer")).toBeInTheDocument();
+			expect(screen.queryByTestId("inner")).toBeInTheDocument();
+			await sleep(30);
+
+			await userEvent.keyboard(testKbd.ESCAPE);
+
+			expect(screen.queryByTestId("outer")).toBeInTheDocument();
+			expect(screen.queryByTestId("inner")).not.toBeInTheDocument();
+
+			await userEvent.keyboard(testKbd.ESCAPE);
+
+			expect(screen.queryByTestId("outer")).not.toBeInTheDocument();
+			expect(screen.queryByTestId("inner")).not.toBeInTheDocument();
+		});
+	});
+});
+
+/**
+ * We don't have first party portal support with Svelte, meaning we lose the ability to
+ * test this scenario following the original floating-ui, where they call `e.stopPropagation()`
+ * on the component that wraps the portalled content, thus stopping it from reaching the portalled
+ * content.
+ *
+ * With our implementation, the event nevers goes through that wrapper component, since events don't
+ * bubble/propagate through the "component tree", but rather through the DOM tree.
+ *
+ * I've explored a few ideas around handling this via a proxy element that would be inserted in
+ * the DOM tree where the portal component is called vs rendered and then dispatching events back
+ * and forth but I need to spend some more time on it.
+ */
+describe.todo("capture", () => {
+	describe("prop resolution", () => {
+		it("undefined", () => {
+			const { escapeKey: escapeKeyCapture, outsidePress: outsidePressCapture } =
+				normalizeProp();
+
+			expect(escapeKeyCapture).toBe(false);
+			expect(outsidePressCapture).toBe(true);
+		});
+
+		it("{}", () => {
+			const { escapeKey: escapeKeyCapture, outsidePress: outsidePressCapture } =
+				normalizeProp({});
+
+			expect(escapeKeyCapture).toBe(false);
+			expect(outsidePressCapture).toBe(true);
+		});
+
+		it("true", () => {
+			const { escapeKey: escapeKeyCapture, outsidePress: outsidePressCapture } =
+				normalizeProp(true);
+
+			expect(escapeKeyCapture).toBe(true);
+			expect(outsidePressCapture).toBe(true);
+		});
+
+		it("false", () => {
+			const { escapeKey: escapeKeyCapture, outsidePress: outsidePressCapture } =
+				normalizeProp(false);
+
+			expect(escapeKeyCapture).toBe(false);
+			expect(outsidePressCapture).toBe(false);
+		});
+
+		it("{ escapeKey: true }", () => {
+			const { escapeKey: escapeKeyCapture, outsidePress: outsidePressCapture } =
+				normalizeProp({
+					escapeKey: true,
+				});
+
+			expect(escapeKeyCapture).toBe(true);
+			expect(outsidePressCapture).toBe(true);
+		});
+
+		it("{ outsidePress: false }", () => {
+			const { escapeKey: escapeKeyCapture, outsidePress: outsidePressCapture } =
+				normalizeProp({
+					outsidePress: false,
+				});
+
+			expect(escapeKeyCapture).toBe(false);
+			expect(outsidePressCapture).toBe(false);
+		});
+	});
+
+	describe("outsidePress", () => {
+		it("false", async () => {
+			render(DismissCaptureDialogsMulti, { outsidePress: [false, false] });
+
+			expect(screen.getByText("outer")).toBeInTheDocument();
+			expect(screen.getByText("inner")).toBeInTheDocument();
+
+			await sleep(30);
+
+			await userEvent.click(screen.getByText("outer"));
+			expect(screen.getByText("outer")).toBeInTheDocument();
+			expect(screen.getByText("inner")).toBeInTheDocument();
+			await userEvent.click(screen.getByText("outside"));
+
+			expect(screen.getByText("outer")).toBeInTheDocument();
+			expect(screen.getByText("inner")).toBeInTheDocument();
+		});
+	});
+});
+
+describe("outsidePressEvent click", () => {
+	it("does not close when dragging outside the floating element", async () => {
+		render(Dismiss, { outsidePressEvent: "click" });
+
+		const floatingEl = screen.getByRole("tooltip");
+		await fireEvent.mouseDown(floatingEl);
+		await fireEvent.mouseUp(document.body);
+		expect(screen.queryByRole("tooltip")).toBeInTheDocument();
+	});
+
+	it("does not close when dragging inside the floating element", async () => {
+		render(Dismiss, { outsidePressEvent: "click" });
+
+		const floatingEl = screen.getByRole("tooltip");
+
+		await fireEvent.mouseDown(document.body);
+		await fireEvent.mouseUp(floatingEl);
+		expect(screen.queryByRole("tooltip")).toBeInTheDocument();
+	});
+
+	it("closes when dragging outside the floating element and then clicking outside", async () => {
+		render(Dismiss, { outsidePressEvent: "click" });
+		const floatingEl = screen.getByRole("tooltip");
+		await fireEvent.mouseDown(floatingEl);
+		await fireEvent.mouseUp(document.body);
+		// a click event will have fired before the proper "outside" click
+		await fireEvent.click(document.body);
+		await fireEvent.click(document.body);
+
+		expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
+	});
+});
diff --git a/packages/floating-ui-svelte/test/hooks/use-floating.svelte.ts b/packages/floating-ui-svelte/test/unit/hooks/use-floating.test.svelte.ts
similarity index 80%
rename from packages/floating-ui-svelte/test/hooks/use-floating.svelte.ts
rename to packages/floating-ui-svelte/test/unit/hooks/use-floating.test.svelte.ts
index 70175865..b959fc91 100644
--- a/packages/floating-ui-svelte/test/hooks/use-floating.svelte.ts
+++ b/packages/floating-ui-svelte/test/unit/hooks/use-floating.test.svelte.ts
@@ -6,11 +6,14 @@ import {
 	offset,
 } from "@floating-ui/dom";
 import { describe, expect, expectTypeOf, it, vi } from "vitest";
-import { type FloatingContext, useFloating } from "../../src/index.js";
-import { useId } from "../../src/index.js";
-import { withRunes } from "../internal/with-runes.svelte.js";
-
-function createElements(): { reference: HTMLElement; floating: HTMLElement } {
+import { type FloatingContext, useFloating } from "../../../src/index.js";
+import { useId } from "../../../src/index.js";
+import { withRunes } from "../../with-runes.svelte.js";
+
+function createElements(): {
+	reference: Element | null;
+	floating: HTMLElement | null;
+} {
 	const reference = document.createElement("div");
 	const floating = document.createElement("div");
 	reference.id = useId();
@@ -19,66 +22,67 @@ function createElements(): { reference: HTMLElement; floating: HTMLElement } {
 }
 
 describe("useFloating", () => {
+	vi.mock(import("svelte"), async (importOriginal) => {
+		const actual = await importOriginal();
+		return {
+			...actual,
+			getContext: vi.fn().mockReturnValue(null),
+		};
+	});
+
 	describe("elements", () => {
 		it(
 			"can be set",
 			withRunes(() => {
 				const elements = createElements();
-				const floating = useFloating({ elements });
-				expect(floating.elements).toEqual(elements);
+				const floating = useFloating(elements);
+				expect(floating.floating).toEqual(elements.floating);
+				expect(floating.reference).toEqual(elements.reference);
 			}),
 		);
 		it(
 			"can be set through the return value",
 			withRunes(() => {
 				const floating = useFloating();
-
 				const elements = createElements();
 
-				floating.elements.reference = elements.reference;
-				floating.elements.floating = elements.floating;
+				floating.reference = elements.reference;
+				floating.floating = elements.floating;
 
-				expect(floating.elements).toEqual(elements);
+				expect(floating.reference).toEqual(elements.reference);
+				expect(floating.floating).toEqual(elements.floating);
 			}),
 		);
 		it(
 			"is returned",
 			withRunes(() => {
 				const floating = useFloating();
-				expect(floating).toHaveProperty("elements");
-			}),
-		);
-		it(
-			"is an object",
-			withRunes(() => {
-				const floating = useFloating();
-				expect(floating.elements).toBeTypeOf("object");
-			}),
-		);
-		it(
-			"defaults to {}",
-			withRunes(() => {
-				const floating = useFloating();
-				expect(floating.elements).toEqual({});
+				expect(floating).toHaveProperty("reference");
+				expect(floating).toHaveProperty("floating");
 			}),
 		);
+
 		it(
 			"is reactive",
 			withRunes(async () => {
-				let elements = $state(createElements());
+				const elements = $state(createElements());
 
 				const floating = useFloating({
-					get elements() {
-						return elements;
-					},
+					reference: () => elements.reference,
+					floating: () => elements.floating,
 				});
 
-				expect(floating.elements).toEqual(elements);
+				expect(floating.reference).toEqual(elements.reference);
+				expect(floating.floating).toEqual(elements.floating);
 
-				elements = createElements();
+				const newElements = createElements();
+
+				elements.reference = newElements.reference;
+				elements.floating = newElements.floating;
 
 				await vi.waitFor(() => {
-					expect(floating.elements).toEqual(elements);
+					expect(floating.reference).toEqual(newElements.reference);
+					expect(floating.floating).toEqual(newElements.floating);
 				});
 			}),
 		);
@@ -88,15 +92,20 @@ describe("useFloating", () => {
 				const elements = $state(createElements());
 
 				const floating = useFloating({
-					get elements() {
-						return elements;
+					reference: () => elements.reference,
+					onReferenceChange: (v) => {
+						elements.reference = v;
+					},
+					floating: () => elements.floating,
+					onFloatingChange: (v) => {
+						elements.floating = v;
 					},
 				});
 
 				const newElements = createElements();
 
-				floating.elements.reference = newElements.reference;
-				floating.elements.floating = newElements.floating;
+				floating.reference = newElements.reference;
+				floating.floating = newElements.floating;
 
 				expect(elements).toEqual(newElements);
 			}),
@@ -109,7 +118,7 @@ describe("useFloating", () => {
 			withRunes(async () => {
 				const transform = true;
 				const floating = useFloating({
-					elements: createElements(),
+					...createElements(),
 					transform,
 				});
 
@@ -124,7 +133,7 @@ describe("useFloating", () => {
 			'defaults to "true"',
 			withRunes(async () => {
 				const floating = useFloating({
-					elements: createElements(),
+					...createElements(),
 				});
 				await vi.waitFor(() => {
 					expect(floating.floatingStyles).contain(
@@ -139,10 +148,8 @@ describe("useFloating", () => {
 				let transform = $state(true);
 
 				const floating = useFloating({
-					elements: createElements(),
-					get transform() {
-						return transform;
-					},
+					...createElements(),
+					transform: () => transform,
 				});
 
 				await vi.waitFor(() => {
@@ -198,10 +205,8 @@ describe("useFloating", () => {
 				let strategy: Strategy = $state("absolute");
 
 				const floating = useFloating({
-					elements: createElements(),
-					get strategy() {
-						return strategy;
-					},
+					...createElements(),
+					strategy: () => strategy,
 				});
 
 				expect(floating.strategy).toBe(strategy);
@@ -251,10 +256,8 @@ describe("useFloating", () => {
 				let placement: Placement = $state("bottom");
 
 				const floating = useFloating({
-					elements: createElements(),
-					get placement() {
-						return placement;
-					},
+					...createElements(),
+					placement: () => placement,
 				});
 
 				expect(floating.placement).toBe(placement);
@@ -275,7 +278,7 @@ describe("useFloating", () => {
 				const middleware: Array<Middleware> = [offset(5)];
 
 				const floating = useFloating({
-					elements: createElements(),
+					...createElements(),
 					middleware,
 				});
 				await vi.waitFor(() => {
@@ -290,10 +293,8 @@ describe("useFloating", () => {
 				const middleware: Array<Middleware> = $state([]);
 
 				const floating = useFloating({
-					elements: createElements(),
-					get middleware() {
-						return middleware;
-					},
+					...createElements(),
+					middleware: () => middleware,
 				});
 
 				await vi.waitFor(() => {
@@ -316,28 +317,28 @@ describe("useFloating", () => {
 			"can be set",
 			withRunes(() => {
 				const floating = useFloating({ open: true });
-				expect(floating.open).toBe(true);
+				expect(floating.context.open).toBe(true);
 			}),
 		);
 		it(
 			"is returned",
 			withRunes(() => {
 				const floating = useFloating();
-				expect(floating).toHaveProperty("open");
+				expect(floating.context).toHaveProperty("open");
 			}),
 		);
 		it(
 			"defaults to true",
 			withRunes(() => {
 				const floating = useFloating();
-				expect(floating.open).toBe(true);
+				expect(floating.context.open).toBe(true);
 			}),
 		);
 		it(
 			"is of type boolean",
 			withRunes(() => {
 				const floating = useFloating();
-				expectTypeOf(floating.open).toMatchTypeOf<boolean>();
+				expectTypeOf(floating.context.open).toMatchTypeOf<boolean>();
 			}),
 		);
 		it(
@@ -346,18 +347,16 @@ describe("useFloating", () => {
 				let open = $state(false);
 
 				const floating = useFloating({
-					elements: createElements(),
-					get open() {
-						return open;
-					},
+					...createElements(),
+					open: () => open,
 				});
 
-				expect(floating.open).toBe(open);
+				expect(floating.context.open).toBe(open);
 
 				open = true;
 
 				await vi.waitFor(() => {
-					expect(floating.open).toBe(open);
+					expect(floating.context.open).toBe(open);
 				});
 			}),
 		);
@@ -370,7 +369,7 @@ describe("useFloating", () => {
 				const whileElementsMounted = vi.fn();
 
 				useFloating({
-					elements: createElements(),
+					...createElements(),
 					whileElementsMounted,
 				});
 
@@ -385,7 +384,6 @@ describe("useFloating", () => {
 				const whileElementsMounted = vi.fn();
 
 				useFloating({
-					elements: undefined,
 					whileElementsMounted,
 				});
 
@@ -401,7 +399,7 @@ describe("useFloating", () => {
 				const whileElementsMounted = vi.fn(() => cleanup);
 
 				const floating = useFloating({
-					elements: createElements(),
+					...createElements(),
 					whileElementsMounted,
 				});
 
@@ -409,8 +407,8 @@ describe("useFloating", () => {
 					expect(whileElementsMounted).toHaveBeenCalled();
 				});
 
-				floating.elements.reference = undefined;
-				floating.elements.floating = undefined;
+				floating.reference = null;
+				floating.floating = null;
 
 				await vi.waitFor(() => {
 					expect(cleanup).toHaveBeenCalled();
@@ -424,7 +422,7 @@ describe("useFloating", () => {
 				const elements = createElements();
 
 				const floating = useFloating({
-					elements,
+					...elements,
 					whileElementsMounted,
 				});
 
@@ -446,7 +444,7 @@ describe("useFloating", () => {
 				const onOpenChange = vi.fn();
 
 				useFloating({
-					elements: createElements(),
+					...createElements(),
 					onOpenChange,
 				});
 
@@ -486,11 +484,9 @@ describe("useFloating", () => {
 				let placement: Placement = $state("left");
 
 				const floating = useFloating({
-					elements: createElements(),
+					...createElements(),
 					middleware: [offset(10)],
-					get placement() {
-						return placement;
-					},
+					placement: () => placement,
 				});
 
 				await vi.waitFor(() => {
@@ -534,11 +530,9 @@ describe("useFloating", () => {
 				let placement: Placement = $state("top");
 
 				const floating = useFloating({
-					elements: createElements(),
+					...createElements(),
 					middleware: [offset(10)],
-					get placement() {
-						return placement;
-					},
+					placement: () => placement,
 				});
 
 				await vi.waitFor(() => {
@@ -582,10 +576,8 @@ describe("useFloating", () => {
 				const middleware: Array<Middleware> = $state([]);
 
 				const floating = useFloating({
-					elements: createElements(),
-					get middleware() {
-						return middleware;
-					},
+					...createElements(),
+					middleware: () => middleware,
 				});
 
 				await vi.waitFor(() => {
@@ -631,10 +623,8 @@ describe("useFloating", () => {
 			withRunes(async () => {
 				const floating = useFloating({
 					open: false,
-					elements: {
-						reference: document.createElement("div"),
-						floating: document.createElement("div"),
-					},
+					reference: document.createElement("div"),
+					floating: document.createElement("div"),
 				});
 
 				expect(floating.isPositioned).toBe(false);
@@ -652,10 +642,8 @@ describe("useFloating", () => {
 				let open = $state(true);
 
 				const floating = useFloating({
-					elements: createElements(),
-					get open() {
-						return open;
-					},
+					...createElements(),
+					open: () => open,
 				});
 
 				await vi.waitFor(() => {
@@ -735,10 +723,8 @@ describe("useFloating", () => {
 				let open = $state(true);
 
 				const floating = useFloating({
-					elements: createElements(),
-					get open() {
-						return open;
-					},
+					...createElements(),
+					open: () => open,
 				});
 
 				expect(floating.context.open).toBe(true);
@@ -754,10 +740,8 @@ describe("useFloating", () => {
 				let placement: Placement = $state("left");
 
 				const floating = useFloating({
-					elements: createElements(),
-					get placement() {
-						return placement;
-					},
+					...createElements(),
+					placement: () => placement,
 				});
 
 				expect(floating.context.placement).toBe("left");
@@ -775,10 +759,8 @@ describe("useFloating", () => {
 				let strategy: Strategy = $state("absolute");
 
 				const floating = useFloating({
-					elements: createElements(),
-					get strategy() {
-						return strategy;
-					},
+					...createElements(),
+					strategy: () => strategy,
 				});
 
 				expect(floating.context.strategy).toBe("absolute");
@@ -796,11 +778,9 @@ describe("useFloating", () => {
 				const middleware: Array<Middleware> = $state([]);
 
 				const floating = useFloating({
-					elements: createElements(),
+					...createElements(),
 					placement: "right",
-					get middleware() {
-						return middleware;
-					},
+					middleware: () => middleware,
 				});
 
 				expect(floating.context.x).toBe(0);
@@ -818,11 +798,9 @@ describe("useFloating", () => {
 				const middleware: Array<Middleware> = $state([]);
 
 				const floating = useFloating({
-					elements: createElements(),
+					...createElements(),
 					placement: "bottom",
-					get middleware() {
-						return middleware;
-					},
+					middleware: () => middleware,
 				});
 
 				expect(floating.context.y).toBe(0);
@@ -840,10 +818,8 @@ describe("useFloating", () => {
 				let open = $state(true);
 
 				const floating = useFloating({
-					elements: createElements(),
-					get open() {
-						return open;
-					},
+					...createElements(),
+					open: () => open,
 				});
 
 				await vi.waitFor(() => {
@@ -864,10 +840,8 @@ describe("useFloating", () => {
 				const middleware: Array<Middleware> = $state([]);
 
 				const floating = useFloating({
-					elements: createElements(),
-					get middleware() {
-						return middleware;
-					},
+					...createElements(),
+					middleware: () => middleware,
 				});
 
 				expect(floating.context.middlewareData).toEqual({});
@@ -890,17 +864,17 @@ describe("useFloating", () => {
 				let elements = $state(createElements());
 
 				const floating = useFloating({
-					get elements() {
-						return elements;
-					},
+					reference: () => elements.reference,
+					floating: () => elements.floating,
 				});
-
-				expect(floating.context.elements).toEqual(elements);
+				expect(floating.context.reference).toEqual(elements.reference);
+				expect(floating.context.floating).toEqual(elements.floating);
 
 				elements = createElements();
 
 				await vi.waitFor(() => {
-					expect(floating.context.elements).toEqual(elements);
+					expect(floating.context.reference).toEqual(elements.reference);
+					expect(floating.context.floating).toEqual(elements.floating);
 				});
 			}),
 		);
@@ -909,9 +883,7 @@ describe("useFloating", () => {
 			withRunes(async () => {
 				let nodeId = $state(useId());
 				const floating = useFloating({
-					get nodeId() {
-						return nodeId;
-					},
+					nodeId: () => nodeId,
 				});
 
 				expect(floating.context.nodeId).toBe(nodeId);
diff --git a/packages/floating-ui-svelte/test/hooks/use-focus.ts b/packages/floating-ui-svelte/test/unit/hooks/use-focus.test.ts
similarity index 100%
rename from packages/floating-ui-svelte/test/hooks/use-focus.ts
rename to packages/floating-ui-svelte/test/unit/hooks/use-focus.test.ts
diff --git a/packages/floating-ui-svelte/test/hooks/use-hover.ts b/packages/floating-ui-svelte/test/unit/hooks/use-hover.test.ts
similarity index 95%
rename from packages/floating-ui-svelte/test/hooks/use-hover.ts
rename to packages/floating-ui-svelte/test/unit/hooks/use-hover.test.ts
index 1869f289..48f4bf25 100644
--- a/packages/floating-ui-svelte/test/hooks/use-hover.ts
+++ b/packages/floating-ui-svelte/test/unit/hooks/use-hover.test.ts
@@ -145,15 +145,15 @@ describe("useHover", () => {
 		});
 	});
 
-	it.skip("does not show after delay when reference element changes mid delay", async () => {
-		const { rerender } = render(App, { delay: 100 });
+	it("does not show after delay when reference element changes mid delay", async () => {
+		render(App, { delay: 100 });
 		await fireEvent.mouseEnter(screen.getByTestId("reference"));
 
 		await act(async () => {
 			vi.advanceTimersByTime(50);
 		});
 
-		await rerender({ showReference: false });
+		await fireEvent.click(screen.getByTestId("toggle-reference"));
 
 		await act(async () => {
 			vi.advanceTimersByTime(50);
diff --git a/packages/floating-ui-svelte/test/hooks/use-id.ts b/packages/floating-ui-svelte/test/unit/hooks/use-id.test.ts
similarity index 90%
rename from packages/floating-ui-svelte/test/hooks/use-id.ts
rename to packages/floating-ui-svelte/test/unit/hooks/use-id.test.ts
index 403674c0..85effd38 100644
--- a/packages/floating-ui-svelte/test/hooks/use-id.ts
+++ b/packages/floating-ui-svelte/test/unit/hooks/use-id.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, expectTypeOf, test } from "vitest";
-import { useId } from "../../src/index.js";
+import { useId } from "../../../src/index.js";
 
 describe("useId", () => {
 	test("returns an id", () => {
diff --git a/packages/floating-ui-svelte/test/hooks/use-interactions.svelte.ts b/packages/floating-ui-svelte/test/unit/hooks/use-interactions.test.svelte.ts
similarity index 94%
rename from packages/floating-ui-svelte/test/hooks/use-interactions.svelte.ts
rename to packages/floating-ui-svelte/test/unit/hooks/use-interactions.test.svelte.ts
index 3dc922e1..32b5ca59 100644
--- a/packages/floating-ui-svelte/test/hooks/use-interactions.svelte.ts
+++ b/packages/floating-ui-svelte/test/unit/hooks/use-interactions.test.svelte.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it, vi } from "vitest";
-import { type ElementProps, useInteractions } from "../../src/index.js";
-import { withRunes } from "../internal/with-runes.svelte";
+import { type ElementProps, useInteractions } from "../../../src/index.js";
+import { withRunes } from "../../with-runes.svelte";
 
 describe("useInteractions", () => {
 	it("returns props to the corresponding getter", () => {
diff --git a/packages/floating-ui-svelte/test/unit/hooks/use-list-navigation.test.ts b/packages/floating-ui-svelte/test/unit/hooks/use-list-navigation.test.ts
new file mode 100644
index 00000000..d390ec88
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/hooks/use-list-navigation.test.ts
@@ -0,0 +1,1196 @@
+import {
+	act,
+	fireEvent,
+	render,
+	screen,
+	waitFor,
+} from "@testing-library/svelte";
+import { describe, expect, it, vi } from "vitest";
+import Main from "./wrapper-components/use-list-navigation/main.svelte";
+import Autocomplete from "./wrapper-components/use-list-navigation/autocomplete.svelte";
+import { userEvent } from "@testing-library/user-event";
+import { sleep, testKbd } from "../../utils.js";
+import Grid from "../../visual/components/grid/main.svelte";
+import ComplexGrid from "../../visual/components/complex-grid/main.svelte";
+import Scheduled from "./wrapper-components/use-list-navigation/scheduled.svelte";
+import Select from "./wrapper-components/use-list-navigation/select.svelte";
+import EmojiPicker from "../../visual/components/emoji-picker/main.svelte";
+import ListboxFocus from "../../visual/components/listbox-focus/main.svelte";
+import NestedMenu from "../../visual/components/menu/main.svelte";
+import VirtualNested from "../../visual/components/menu-virtual/virtual-nested.svelte";
+import HomeEndIgnore from "./wrapper-components/use-list-navigation/home-end-ignore.svelte";
+
+it("opens on ArrowDown and focuses first item", async () => {
+	render(Main);
+
+	await fireEvent.keyDown(screen.getByRole("button"), { key: "ArrowDown" });
+
+	await waitFor(() => expect(screen.getByRole("menu")).toBeInTheDocument());
+	await waitFor(() => expect(screen.getByTestId("item-0")).toHaveFocus());
+});
+
+it("opens on ArrowUp and focuses last item", async () => {
+	render(Main);
+
+	await fireEvent.keyDown(screen.getByRole("button"), { key: "ArrowUp" });
+
+	await waitFor(() => expect(screen.getByRole("menu")).toBeInTheDocument());
+	await waitFor(() => expect(screen.getByTestId("item-2")).toHaveFocus());
+});
+
+it("navigates down on ArrowDown", async () => {
+	render(Main);
+
+	await fireEvent.keyDown(screen.getByRole("button"), { key: "ArrowDown" });
+	await waitFor(() => expect(screen.queryByRole("menu")).toBeInTheDocument());
+	await waitFor(() => expect(screen.getByTestId("item-0")).toHaveFocus());
+
+	await fireEvent.keyDown(screen.getByRole("menu"), { key: "ArrowDown" });
+	await waitFor(() => expect(screen.getByTestId("item-1")).toHaveFocus());
+
+	await fireEvent.keyDown(screen.getByRole("menu"), { key: "ArrowDown" });
+	await waitFor(() => expect(screen.getByTestId("item-2")).toHaveFocus());
+
+	// Reached the end of the list.
+	await fireEvent.keyDown(screen.getByRole("menu"), { key: "ArrowDown" });
+	await waitFor(() => expect(screen.getByTestId("item-2")).toHaveFocus());
+});
+
+it("navigates up on ArrowUp", async () => {
+	render(Main);
+	await fireEvent.keyDown(screen.getByRole("button"), { key: "ArrowUp" });
+	await waitFor(() => expect(screen.queryByRole("menu")).toBeInTheDocument());
+	await waitFor(() => expect(screen.getByTestId("item-2")).toHaveFocus());
+
+	await fireEvent.keyDown(screen.getByRole("menu"), { key: "ArrowUp" });
+	await waitFor(() => expect(screen.getByTestId("item-1")).toHaveFocus());
+
+	await fireEvent.keyDown(screen.getByRole("menu"), { key: "ArrowUp" });
+	await waitFor(() => expect(screen.getByTestId("item-0")).toHaveFocus());
+
+	// Reached the end of the list.
+	await fireEvent.keyDown(screen.getByRole("menu"), { key: "ArrowUp" });
+	await waitFor(() => expect(screen.getByTestId("item-0")).toHaveFocus());
+});
+
+it("resets index to -1 upon close", async () => {
+	render(Autocomplete);
+	screen.getByTestId("reference").focus();
+
+	await userEvent.keyboard("a");
+
+	expect(screen.getByTestId("floating")).toBeInTheDocument();
+	await waitFor(() =>
+		expect(screen.getByTestId("active-index").textContent).toBe(""),
+	);
+
+	await userEvent.keyboard(testKbd.ARROW_DOWN);
+	await userEvent.keyboard(testKbd.ARROW_DOWN);
+	await userEvent.keyboard(testKbd.ARROW_DOWN);
+
+	expect(screen.getByTestId("active-index").textContent).toBe("2");
+
+	await userEvent.keyboard(testKbd.ESCAPE);
+
+	expect(screen.getByTestId("active-index").textContent).toBe("");
+
+	await userEvent.keyboard(testKbd.BACKSPACE);
+	await userEvent.keyboard("a");
+
+	expect(screen.getByTestId("floating")).toBeInTheDocument();
+	expect(screen.getByTestId("active-index").textContent).toBe("");
+
+	await userEvent.keyboard(testKbd.ARROW_DOWN);
+
+	expect(screen.getByTestId("active-index").textContent).toBe("0");
+});
+
+describe("loop", () => {
+	it("handles ArrowDown looping", async () => {
+		render(Main, { loop: true });
+
+		await fireEvent.keyDown(screen.getByRole("button"), { key: "ArrowDown" });
+		await waitFor(() => expect(screen.queryByRole("menu")).toBeInTheDocument());
+		await waitFor(() => expect(screen.getByTestId("item-0")).toHaveFocus());
+
+		await fireEvent.keyDown(screen.getByRole("menu"), { key: "ArrowDown" });
+		await waitFor(() => expect(screen.getByTestId("item-1")).toHaveFocus());
+
+		await fireEvent.keyDown(screen.getByRole("menu"), { key: "ArrowDown" });
+		await waitFor(() => expect(screen.getByTestId("item-2")).toHaveFocus());
+
+		// Reached the end of the list and loops.
+		await fireEvent.keyDown(screen.getByRole("menu"), { key: "ArrowDown" });
+		await waitFor(() => expect(screen.getByTestId("item-0")).toHaveFocus());
+	});
+
+	it("handles ArrowDown looping", async () => {
+		render(Main, { loop: true });
+
+		await fireEvent.keyDown(screen.getByRole("button"), { key: "ArrowUp" });
+		await waitFor(() => expect(screen.queryByRole("menu")).toBeInTheDocument());
+		await waitFor(() => expect(screen.getByTestId("item-2")).toHaveFocus());
+
+		await fireEvent.keyDown(screen.getByRole("menu"), { key: "ArrowUp" });
+		await waitFor(() => expect(screen.getByTestId("item-1")).toHaveFocus());
+
+		await fireEvent.keyDown(screen.getByRole("menu"), { key: "ArrowUp" });
+		await waitFor(() => expect(screen.getByTestId("item-0")).toHaveFocus());
+
+		// Reached the end of the list and loops.
+		await fireEvent.keyDown(screen.getByRole("menu"), { key: "ArrowUp" });
+		await waitFor(() => expect(screen.getByTestId("item-2")).toHaveFocus());
+	});
+});
+
+describe("orientation", () => {
+	it("navigates down on ArrowRight", async () => {
+		render(Main, { orientation: "horizontal" });
+		await fireEvent.keyDown(screen.getByRole("button"), { key: "ArrowRight" });
+		await waitFor(() => expect(screen.queryByRole("menu")).toBeInTheDocument());
+		await waitFor(() => expect(screen.getByTestId("item-0")).toHaveFocus());
+
+		await fireEvent.keyDown(screen.getByRole("menu"), { key: "ArrowRight" });
+		await waitFor(() => expect(screen.getByTestId("item-1")).toHaveFocus());
+
+		await fireEvent.keyDown(screen.getByRole("menu"), { key: "ArrowRight" });
+		await waitFor(() => expect(screen.getByTestId("item-2")).toHaveFocus());
+
+		// Reached the end of the list.
+		await fireEvent.keyDown(screen.getByRole("menu"), { key: "ArrowRight" });
+		await waitFor(() => expect(screen.getByTestId("item-2")).toHaveFocus());
+	});
+
+	it("navigates up on ArrowLeft", async () => {
+		render(Main, { orientation: "horizontal" });
+
+		await fireEvent.keyDown(screen.getByRole("button"), { key: "ArrowLeft" });
+		await waitFor(() => expect(screen.queryByRole("menu")).toBeInTheDocument());
+		await waitFor(() => expect(screen.getByTestId("item-2")).toHaveFocus());
+
+		await fireEvent.keyDown(screen.getByRole("menu"), { key: "ArrowLeft" });
+		await waitFor(() => expect(screen.getByTestId("item-1")).toHaveFocus());
+
+		await fireEvent.keyDown(screen.getByRole("menu"), { key: "ArrowLeft" });
+		await waitFor(() => expect(screen.getByTestId("item-0")).toHaveFocus());
+
+		// Reached the end of the list.
+		await fireEvent.keyDown(screen.getByRole("menu"), { key: "ArrowLeft" });
+		await waitFor(() => expect(screen.getByTestId("item-0")).toHaveFocus());
+	});
+});
+
+describe("rtl", () => {
+	it("navigates down on ArrowLeft", async () => {
+		render(Main, { rtl: true, orientation: "horizontal" });
+
+		await fireEvent.keyDown(screen.getByRole("button"), { key: "ArrowLeft" });
+		await waitFor(() => expect(screen.queryByRole("menu")).toBeInTheDocument());
+		await waitFor(() => expect(screen.getByTestId("item-0")).toHaveFocus());
+
+		await fireEvent.keyDown(screen.getByRole("menu"), { key: "ArrowLeft" });
+		await waitFor(() => expect(screen.getByTestId("item-1")).toHaveFocus());
+
+		await fireEvent.keyDown(screen.getByRole("menu"), { key: "ArrowLeft" });
+		await waitFor(() => expect(screen.getByTestId("item-2")).toHaveFocus());
+
+		// Reached the end of the list.
+		await fireEvent.keyDown(screen.getByRole("menu"), { key: "ArrowLeft" });
+		await waitFor(() => expect(screen.getByTestId("item-2")).toHaveFocus());
+	});
+
+	it("navigates up on ArrowRight", async () => {
+		render(Main, { rtl: true, orientation: "horizontal" });
+		await fireEvent.keyDown(screen.getByRole("button"), { key: "ArrowRight" });
+		await waitFor(() => expect(screen.queryByRole("menu")).toBeInTheDocument());
+		await waitFor(() => expect(screen.getByTestId("item-2")).toHaveFocus());
+
+		await fireEvent.keyDown(screen.getByRole("menu"), { key: "ArrowRight" });
+		await waitFor(() => expect(screen.getByTestId("item-1")).toHaveFocus());
+
+		await fireEvent.keyDown(screen.getByRole("menu"), { key: "ArrowRight" });
+		await waitFor(() => expect(screen.getByTestId("item-0")).toHaveFocus());
+
+		// Reached the end of the list.
+		await fireEvent.keyDown(screen.getByRole("menu"), { key: "ArrowRight" });
+		await waitFor(() => expect(screen.getByTestId("item-0")).toHaveFocus());
+	});
+});
+
+describe("focusItemOnOpen", () => {
+	it("respects true", async () => {
+		render(Main, { focusItemOnOpen: true });
+
+		await fireEvent.click(screen.getByRole("button"));
+		await waitFor(() => expect(screen.getByTestId("item-0")).toHaveFocus());
+	});
+
+	it("respects false", async () => {
+		render(Main, { focusItemOnOpen: false });
+
+		await fireEvent.click(screen.getByRole("button"));
+		await waitFor(() => expect(screen.getByTestId("item-0")).not.toHaveFocus());
+	});
+});
+
+describe("allowEscape + virtual", () => {
+	it("respects true", async () => {
+		render(Main, { allowEscape: true, virtual: true, loop: true });
+		await fireEvent.keyDown(screen.getByRole("button"), { key: "ArrowDown" });
+		await waitFor(() =>
+			expect(screen.getByTestId("item-0").getAttribute("aria-selected")).toBe(
+				"true",
+			),
+		);
+		await fireEvent.keyDown(screen.getByRole("button"), { key: "ArrowUp" });
+		await waitFor(() =>
+			expect(screen.getByTestId("item-0").getAttribute("aria-selected")).toBe(
+				"false",
+			),
+		);
+		await fireEvent.keyDown(screen.getByRole("button"), { key: "ArrowDown" });
+		await waitFor(() =>
+			expect(screen.getByTestId("item-0").getAttribute("aria-selected")).toBe(
+				"true",
+			),
+		);
+		await fireEvent.keyDown(screen.getByRole("button"), { key: "ArrowDown" });
+		await waitFor(() =>
+			expect(screen.getByTestId("item-1").getAttribute("aria-selected")).toBe(
+				"true",
+			),
+		);
+		await fireEvent.keyDown(screen.getByRole("button"), { key: "ArrowDown" });
+		await waitFor(() =>
+			expect(screen.getByTestId("item-2").getAttribute("aria-selected")).toBe(
+				"true",
+			),
+		);
+		await fireEvent.keyDown(screen.getByRole("button"), { key: "ArrowDown" });
+		await waitFor(() =>
+			expect(screen.getByTestId("item-2").getAttribute("aria-selected")).toBe(
+				"false",
+			),
+		);
+	});
+
+	it("respects false", async () => {
+		render(Main, { allowEscape: false, virtual: true, loop: true });
+		await fireEvent.keyDown(screen.getByRole("button"), { key: "ArrowDown" });
+		await waitFor(() =>
+			expect(screen.getByTestId("item-0").getAttribute("aria-selected")).toBe(
+				"true",
+			),
+		);
+		await fireEvent.keyDown(screen.getByRole("button"), { key: "ArrowDown" });
+		await waitFor(() =>
+			expect(screen.getByTestId("item-1").getAttribute("aria-selected")).toBe(
+				"true",
+			),
+		);
+	});
+
+	it("true - calls `onNavigate` with `null` when escaped", async () => {
+		const spy = vi.fn();
+		render(Main, {
+			allowEscape: true,
+			virtual: true,
+			loop: true,
+			onNavigate: spy,
+		});
+		await fireEvent.keyDown(screen.getByRole("button"), { key: "ArrowDown" });
+		await fireEvent.keyDown(screen.getByRole("button"), { key: "ArrowUp" });
+		await waitFor(() => expect(spy).toHaveBeenCalledTimes(2));
+		await waitFor(() => expect(spy).toHaveBeenCalledWith(null));
+	});
+});
+
+describe("openOnArrowKeyDown", () => {
+	it("true ArrowDown opens", async () => {
+		render(Main, { openOnArrowKeyDown: true });
+		await fireEvent.keyDown(screen.getByRole("button"), { key: "ArrowDown" });
+		await waitFor(() => expect(screen.getByRole("menu")).toBeInTheDocument());
+	});
+
+	it("true ArrowUp opens", async () => {
+		render(Main, { openOnArrowKeyDown: true });
+		await fireEvent.keyDown(screen.getByRole("button"), { key: "ArrowUp" });
+		await waitFor(() => expect(screen.getByRole("menu")).toBeInTheDocument());
+	});
+
+	it("false ArrowDown does not open", async () => {
+		render(Main, { openOnArrowKeyDown: false });
+		await fireEvent.keyDown(screen.getByRole("button"), { key: "ArrowDown" });
+		await waitFor(() =>
+			expect(screen.queryByRole("menu")).not.toBeInTheDocument(),
+		);
+	});
+
+	it("false ArrowUp does not open", async () => {
+		render(Main, { openOnArrowKeyDown: false });
+		await fireEvent.keyDown(screen.getByRole("button"), { key: "ArrowUp" });
+		await waitFor(() =>
+			expect(screen.queryByRole("menu")).not.toBeInTheDocument(),
+		);
+	});
+});
+
+describe("disabledIndices", () => {
+	it("skips disabled indices", async () => {
+		render(Main, { disabledIndices: [0] });
+
+		await fireEvent.keyDown(screen.getByRole("button"), { key: "ArrowDown" });
+		await waitFor(() => expect(screen.getByTestId("item-1")).toHaveFocus());
+		await fireEvent.keyDown(screen.getByRole("menu"), { key: "ArrowUp" });
+		await waitFor(() => expect(screen.getByTestId("item-1")).toHaveFocus());
+	});
+});
+
+describe("focusOnHover", () => {
+	it("true - focuses item on hover and syncs the active index", async () => {
+		const spy = vi.fn();
+		render(Main, { onNavigate: spy });
+
+		await fireEvent.click(screen.getByRole("button"));
+		await fireEvent.mouseMove(screen.getByTestId("item-1"));
+		await waitFor(() => expect(screen.getByTestId("item-1")).toHaveFocus());
+		await fireEvent.pointerLeave(screen.getByTestId("item-1"));
+		await waitFor(() => expect(screen.getByRole("menu")).toHaveFocus());
+		await waitFor(() => expect(spy).toHaveBeenCalledWith(1));
+	});
+
+	it("false - does not focus item on hover and does not sync the active index", async () => {
+		const spy = vi.fn();
+		render(Main, {
+			onNavigate: spy,
+			focusItemOnOpen: false,
+			focusItemOnHover: false,
+		});
+		await userEvent.click(screen.getByRole("button"));
+		await waitFor(() => expect(screen.getByRole("button")).toHaveFocus());
+		await fireEvent.mouseMove(screen.getByTestId("item-1"));
+		expect(screen.getByTestId("item-1")).not.toHaveFocus();
+		expect(spy).toHaveBeenCalledTimes(0);
+	});
+});
+
+describe("grid navigation", () => {
+	it("focuses first item on ArrowDown", async () => {
+		render(Grid);
+		await fireEvent.click(screen.getByRole("button"));
+		await waitFor(() => expect(screen.queryByRole("menu")).toBeInTheDocument());
+		await fireEvent.keyDown(document, { key: "ArrowDown" });
+		await waitFor(() => expect(screen.getAllByRole("option")[8]).toHaveFocus());
+	});
+
+	it("focuses first non-disabled item in grid", async () => {
+		render(Grid);
+		await fireEvent.keyDown(screen.getByRole("button"), { key: "Enter" });
+		await fireEvent.click(screen.getByRole("button"));
+		await waitFor(() => expect(screen.getAllByRole("option")[8]).toHaveFocus());
+	});
+
+	it("focuses next item using ArrowRight ke, skipping disabled items", async () => {
+		render(Grid);
+		await fireEvent.keyDown(screen.getByRole("button"), { key: "Enter" });
+		await fireEvent.click(screen.getByRole("button"));
+		await fireEvent.keyDown(screen.getByTestId("floating"), {
+			key: "ArrowRight",
+		});
+		expect(screen.getAllByRole("option")[9]).toHaveFocus();
+		await fireEvent.keyDown(screen.getByTestId("floating"), {
+			key: "ArrowRight",
+		});
+		expect(screen.getAllByRole("option")[11]).toHaveFocus();
+		await fireEvent.keyDown(screen.getByTestId("floating"), {
+			key: "ArrowRight",
+		});
+		await fireEvent.keyDown(screen.getByTestId("floating"), {
+			key: "ArrowRight",
+		});
+		await fireEvent.keyDown(screen.getByTestId("floating"), {
+			key: "ArrowRight",
+		});
+		expect(screen.getAllByRole("option")[14]).toHaveFocus();
+		await fireEvent.keyDown(screen.getByTestId("floating"), {
+			key: "ArrowRight",
+		});
+		expect(screen.getAllByRole("option")[16]).toHaveFocus();
+	});
+
+	it("focuses previous item using ArrowLeft key, skipping disabled items", async () => {
+		render(Grid);
+		await fireEvent.keyDown(screen.getByRole("button"), { key: "Enter" });
+		await fireEvent.click(screen.getByRole("button"));
+
+		await act(() => screen.getAllByRole("option")[47].focus());
+
+		await fireEvent.keyDown(screen.getByTestId("floating"), {
+			key: "ArrowLeft",
+		});
+		expect(screen.getAllByRole("option")[46]).toHaveFocus();
+		await fireEvent.keyDown(screen.getByTestId("floating"), {
+			key: "ArrowLeft",
+		});
+		await waitFor(() =>
+			expect(screen.getAllByRole("option")[44]).toHaveFocus(),
+		);
+		await fireEvent.keyDown(screen.getByTestId("floating"), {
+			key: "ArrowLeft",
+		});
+		await fireEvent.keyDown(screen.getByTestId("floating"), {
+			key: "ArrowLeft",
+		});
+		await fireEvent.keyDown(screen.getByTestId("floating"), {
+			key: "ArrowLeft",
+		});
+		expect(screen.getAllByRole("option")[41]).toHaveFocus();
+	});
+
+	it("skips row and remains on same column when pressing ArrowDown", async () => {
+		render(Grid);
+		await fireEvent.keyDown(screen.getByRole("button"), { key: "Enter" });
+		await fireEvent.click(screen.getByRole("button"));
+		await fireEvent.keyDown(screen.getByTestId("floating"), {
+			key: "ArrowDown",
+		});
+		expect(screen.getAllByRole("option")[13]).toHaveFocus();
+		await fireEvent.keyDown(screen.getByTestId("floating"), {
+			key: "ArrowDown",
+		});
+		expect(screen.getAllByRole("option")[18]).toHaveFocus();
+		await fireEvent.keyDown(screen.getByTestId("floating"), {
+			key: "ArrowDown",
+		});
+		expect(screen.getAllByRole("option")[23]).toHaveFocus();
+		await fireEvent.keyDown(screen.getByTestId("floating"), {
+			key: "ArrowDown",
+		});
+		expect(screen.getAllByRole("option")[28]).toHaveFocus();
+	});
+
+	it("skips row and remains on same column when pressing ArrowUp", async () => {
+		render(Grid);
+		await fireEvent.keyDown(screen.getByRole("button"), { key: "Enter" });
+		await fireEvent.click(screen.getByRole("button"));
+
+		await act(() => screen.getAllByRole("option")[47].focus());
+
+		await fireEvent.keyDown(screen.getByTestId("floating"), { key: "ArrowUp" });
+		expect(screen.getAllByRole("option")[42]).toHaveFocus();
+		await fireEvent.keyDown(screen.getByTestId("floating"), { key: "ArrowUp" });
+		expect(screen.getAllByRole("option")[37]).toHaveFocus();
+		await fireEvent.keyDown(screen.getByTestId("floating"), { key: "ArrowUp" });
+		expect(screen.getAllByRole("option")[32]).toHaveFocus();
+		await fireEvent.keyDown(screen.getByTestId("floating"), { key: "ArrowUp" });
+		expect(screen.getAllByRole("option")[27]).toHaveFocus();
+	});
+
+	it("loops on the same column with ArrowDown", async () => {
+		render(Grid, { loop: true });
+		await fireEvent.keyDown(screen.getByRole("button"), { key: "Enter" });
+		await fireEvent.click(screen.getByRole("button"));
+
+		await fireEvent.keyDown(screen.getByTestId("floating"), {
+			key: "ArrowDown",
+		});
+		await fireEvent.keyDown(screen.getByTestId("floating"), {
+			key: "ArrowDown",
+		});
+		await fireEvent.keyDown(screen.getByTestId("floating"), {
+			key: "ArrowDown",
+		});
+		await fireEvent.keyDown(screen.getByTestId("floating"), {
+			key: "ArrowDown",
+		});
+		await fireEvent.keyDown(screen.getByTestId("floating"), {
+			key: "ArrowDown",
+		});
+		await fireEvent.keyDown(screen.getByTestId("floating"), {
+			key: "ArrowDown",
+		});
+		await fireEvent.keyDown(screen.getByTestId("floating"), {
+			key: "ArrowDown",
+		});
+		await fireEvent.keyDown(screen.getByTestId("floating"), {
+			key: "ArrowDown",
+		});
+
+		expect(screen.getAllByRole("option")[8]).toHaveFocus();
+	});
+
+	it("loops on the same column with ArrowUp", async () => {
+		render(Grid, { loop: true });
+		await fireEvent.keyDown(screen.getByRole("button"), { key: "Enter" });
+		await fireEvent.click(screen.getByRole("button"));
+
+		await act(() => screen.getAllByRole("option")[43].focus());
+
+		await fireEvent.keyDown(screen.getByTestId("floating"), { key: "ArrowUp" });
+		await fireEvent.keyDown(screen.getByTestId("floating"), { key: "ArrowUp" });
+		await fireEvent.keyDown(screen.getByTestId("floating"), { key: "ArrowUp" });
+		await fireEvent.keyDown(screen.getByTestId("floating"), { key: "ArrowUp" });
+		await fireEvent.keyDown(screen.getByTestId("floating"), { key: "ArrowUp" });
+		await fireEvent.keyDown(screen.getByTestId("floating"), { key: "ArrowUp" });
+		await fireEvent.keyDown(screen.getByTestId("floating"), { key: "ArrowUp" });
+		await fireEvent.keyDown(screen.getByTestId("floating"), { key: "ArrowUp" });
+
+		expect(screen.getAllByRole("option")[43]).toHaveFocus();
+	});
+
+	it("does not leave row with 'both' orientation while looping", async () => {
+		render(Grid, { orientation: "both", loop: true });
+		await fireEvent.keyDown(screen.getByRole("button"), { key: "Enter" });
+		await fireEvent.click(screen.getByRole("button"));
+
+		await fireEvent.keyDown(screen.getByTestId("floating"), {
+			key: "ArrowRight",
+		});
+		expect(screen.getAllByRole("option")[9]).toHaveFocus();
+		await fireEvent.keyDown(screen.getByTestId("floating"), {
+			key: "ArrowRight",
+		});
+		expect(screen.getAllByRole("option")[8]).toHaveFocus();
+		await fireEvent.keyDown(screen.getByTestId("floating"), {
+			key: "ArrowLeft",
+		});
+		expect(screen.getAllByRole("option")[9]).toHaveFocus();
+		await fireEvent.keyDown(screen.getByTestId("floating"), {
+			key: "ArrowLeft",
+		});
+		expect(screen.getAllByRole("option")[8]).toHaveFocus();
+
+		await fireEvent.keyDown(screen.getByTestId("floating"), {
+			key: "ArrowDown",
+		});
+		expect(screen.getAllByRole("option")[13]).toHaveFocus();
+		await fireEvent.keyDown(screen.getByTestId("floating"), {
+			key: "ArrowRight",
+		});
+		expect(screen.getAllByRole("option")[14]).toHaveFocus();
+		await fireEvent.keyDown(screen.getByTestId("floating"), {
+			key: "ArrowRight",
+		});
+		expect(screen.getAllByRole("option")[11]).toHaveFocus();
+		await fireEvent.keyDown(screen.getByTestId("floating"), {
+			key: "ArrowLeft",
+		});
+		expect(screen.getAllByRole("option")[14]).toHaveFocus();
+	});
+
+	it("loops on the last row", async () => {
+		render(Grid, { orientation: "both", loop: true });
+		await fireEvent.keyDown(screen.getByRole("button"), { key: "Enter" });
+		await fireEvent.click(screen.getByRole("button"));
+
+		await act(() => screen.getAllByRole("option")[46].focus());
+
+		await fireEvent.keyDown(screen.getByTestId("floating"), {
+			key: "ArrowRight",
+		});
+		expect(screen.getAllByRole("option")[47]).toHaveFocus();
+		await fireEvent.keyDown(screen.getByTestId("floating"), {
+			key: "ArrowRight",
+		});
+		expect(screen.getAllByRole("option")[46]).toHaveFocus();
+		await fireEvent.keyDown(screen.getByTestId("floating"), {
+			key: "ArrowLeft",
+		});
+		expect(screen.getAllByRole("option")[47]).toHaveFocus();
+		await fireEvent.keyDown(screen.getByTestId("floating"), {
+			key: "ArrowLeft",
+		});
+		expect(screen.getAllByRole("option")[46]).toHaveFocus();
+	});
+});
+
+describe("grid navigation when items have different sizes", () => {
+	it("focuses first non-disabled item in a grid", async () => {
+		render(ComplexGrid);
+		await fireEvent.keyDown(screen.getByRole("button"), { key: "Enter" });
+		await fireEvent.click(screen.getByRole("button"));
+		await waitFor(() => expect(screen.getAllByRole("option")[7]).toHaveFocus());
+	});
+
+	describe.each([
+		{ rtl: false, arrowToStart: "ArrowLeft", arrowToEnd: "ArrowRight" },
+		{ rtl: true, arrowToStart: "ArrowRight", arrowToEnd: "ArrowLeft" },
+	])("with rtl $rtl", ({ rtl, arrowToStart, arrowToEnd }) => {
+		it(`focuses next item using ${arrowToEnd} key, skipping disabled items`, async () => {
+			render(ComplexGrid, { rtl });
+			await fireEvent.keyDown(screen.getByRole("button"), { key: "Enter" });
+			await fireEvent.click(screen.getByRole("button"));
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToEnd,
+			});
+			await waitFor(() =>
+				expect(screen.getAllByRole("option")[8]).toHaveFocus(),
+			);
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToEnd,
+			});
+			await waitFor(() =>
+				expect(screen.getAllByRole("option")[10]).toHaveFocus(),
+			);
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToEnd,
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToEnd,
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToEnd,
+			});
+			await waitFor(() =>
+				expect(screen.getAllByRole("option")[13]).toHaveFocus(),
+			);
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToEnd,
+			});
+			await waitFor(() =>
+				expect(screen.getAllByRole("option")[15]).toHaveFocus(),
+			);
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToEnd,
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToEnd,
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToEnd,
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToEnd,
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToEnd,
+			});
+			await waitFor(() =>
+				expect(screen.getAllByRole("option")[20]).toHaveFocus(),
+			);
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToEnd,
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToEnd,
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToEnd,
+			});
+			await waitFor(() =>
+				expect(screen.getAllByRole("option")[24]).toHaveFocus(),
+			);
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToEnd,
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToEnd,
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToEnd,
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToEnd,
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToEnd,
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToEnd,
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToEnd,
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToEnd,
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToEnd,
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToEnd,
+			});
+			await waitFor(() =>
+				expect(screen.getAllByRole("option")[34]).toHaveFocus(),
+			);
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToEnd,
+			});
+			await waitFor(() =>
+				expect(screen.getAllByRole("option")[36]).toHaveFocus(),
+			);
+		});
+
+		it(`focuses previous item using ${arrowToStart} key, skipping disabled items`, async () => {
+			render(ComplexGrid, { rtl });
+
+			await fireEvent.keyDown(screen.getByRole("button"), { key: "Enter" });
+			await fireEvent.click(screen.getByRole("button"));
+
+			await act(() => screen.getAllByRole("option")[36].focus());
+
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToStart,
+			});
+			await waitFor(() =>
+				expect(screen.getAllByRole("option")[34]).toHaveFocus(),
+			);
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToStart,
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToStart,
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToStart,
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToStart,
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToStart,
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToStart,
+			});
+			await waitFor(() =>
+				expect(screen.getAllByRole("option")[28]).toHaveFocus(),
+			);
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToStart,
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToStart,
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToStart,
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToStart,
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToStart,
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToStart,
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToStart,
+			});
+			await waitFor(() =>
+				expect(screen.getAllByRole("option")[20]).toHaveFocus(),
+			);
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToStart,
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToStart,
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToStart,
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToStart,
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToStart,
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToStart,
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToStart,
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToStart,
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToStart,
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToStart,
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToStart,
+			});
+			await waitFor(() =>
+				expect(screen.getAllByRole("option")[7]).toHaveFocus(),
+			);
+		});
+
+		it(`moves through rows when pressing ArrowDown, prefers ${rtl ? "right" : "left"} side of wide items`, async () => {
+			render(ComplexGrid, { rtl });
+			await fireEvent.keyDown(screen.getByRole("button"), { key: "Enter" });
+			await fireEvent.click(screen.getByRole("button"));
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: "ArrowDown",
+			});
+			await waitFor(() =>
+				expect(screen.getAllByRole("option")[20]).toHaveFocus(),
+			);
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: "ArrowDown",
+			});
+			await waitFor(() =>
+				expect(screen.getAllByRole("option")[25]).toHaveFocus(),
+			);
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: "ArrowDown",
+			});
+			await waitFor(() =>
+				expect(screen.getAllByRole("option")[31]).toHaveFocus(),
+			);
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: "ArrowDown",
+			});
+			await waitFor(() =>
+				expect(screen.getAllByRole("option")[36]).toHaveFocus(),
+			);
+		});
+
+		it(`moves through rows when pressing ArrowUp, prefers ${rtl ? "right" : "left"} side of wide items`, async () => {
+			render(ComplexGrid, { rtl });
+
+			await fireEvent.keyDown(screen.getByRole("button"), { key: "Enter" });
+			await fireEvent.click(screen.getByRole("button"));
+
+			await act(() => screen.getAllByRole("option")[29].focus());
+
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: "ArrowUp",
+			});
+			await waitFor(() =>
+				expect(screen.getAllByRole("option")[21]).toHaveFocus(),
+			);
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: "ArrowUp",
+			});
+			await waitFor(() =>
+				expect(screen.getAllByRole("option")[15]).toHaveFocus(),
+			);
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: "ArrowUp",
+			});
+			await waitFor(() =>
+				expect(screen.getAllByRole("option")[8]).toHaveFocus(),
+			);
+		});
+
+		it(`loops over column with ArrowDown, prefers ${rtl ? "right" : "left"} side of wide items`, async () => {
+			render(ComplexGrid, { rtl, loop: true });
+			await fireEvent.keyDown(screen.getByRole("button"), { key: "Enter" });
+			await fireEvent.click(screen.getByRole("button"));
+
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: "ArrowDown",
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: "ArrowDown",
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: "ArrowDown",
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: "ArrowDown",
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: "ArrowDown",
+			});
+
+			await waitFor(() =>
+				expect(screen.getAllByRole("option")[13]).toHaveFocus(),
+			);
+		});
+
+		it(`loops over column with ArrowUp, prefers ${rtl ? "right" : "left"} side of wide items`, async () => {
+			render(ComplexGrid, { rtl, loop: true });
+			await fireEvent.keyDown(screen.getByRole("button"), { key: "Enter" });
+			await fireEvent.click(screen.getByRole("button"));
+
+			await act(() => screen.getAllByRole("option")[30].focus());
+
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: "ArrowUp",
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: "ArrowUp",
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: "ArrowUp",
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: "ArrowUp",
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: "ArrowUp",
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: "ArrowUp",
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: "ArrowUp",
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: "ArrowUp",
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: "ArrowUp",
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: "ArrowUp",
+			});
+
+			await waitFor(() =>
+				expect(screen.getAllByRole("option")[8]).toHaveFocus(),
+			);
+		});
+
+		it("loops over row with 'both' orientation, prefers top side of tall items", async () => {
+			render(ComplexGrid, { rtl, orientation: "both", loop: true });
+			await fireEvent.keyDown(screen.getByRole("button"), { key: "Enter" });
+			await fireEvent.click(screen.getByRole("button"));
+
+			await act(() => screen.getAllByRole("option")[20].focus());
+
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToEnd,
+			});
+			await waitFor(() =>
+				expect(screen.getAllByRole("option")[21]).toHaveFocus(),
+			);
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToEnd,
+			});
+			await waitFor(() =>
+				expect(screen.getAllByRole("option")[20]).toHaveFocus(),
+			);
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToStart,
+			});
+			await waitFor(() =>
+				expect(screen.getAllByRole("option")[21]).toHaveFocus(),
+			);
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToStart,
+			});
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToStart,
+			});
+			await waitFor(() =>
+				expect(screen.getAllByRole("option")[21]).toHaveFocus(),
+			);
+
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: "ArrowDown",
+			});
+			await waitFor(() =>
+				expect(screen.getAllByRole("option")[22]).toHaveFocus(),
+			);
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToEnd,
+			});
+			await waitFor(() =>
+				expect(screen.getAllByRole("option")[24]).toHaveFocus(),
+			);
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToEnd,
+			});
+			await waitFor(() =>
+				expect(screen.getAllByRole("option")[20]).toHaveFocus(),
+			);
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToEnd,
+			});
+			await waitFor(() =>
+				expect(screen.getAllByRole("option")[21]).toHaveFocus(),
+			);
+		});
+
+		it("handles looping on the last row", async () => {
+			render(ComplexGrid, { rtl, orientation: "both", loop: true });
+			await fireEvent.keyDown(screen.getByRole("button"), { key: "Enter" });
+			await fireEvent.click(screen.getByRole("button"));
+
+			await act(() => screen.getAllByRole("option")[36].focus());
+
+			await fireEvent.keyDown(screen.getByTestId("floating"), {
+				key: arrowToEnd,
+			});
+			await waitFor(() =>
+				expect(screen.getAllByRole("option")[36]).toHaveFocus(),
+			);
+		});
+	});
+});
+
+it("handles scheduled list population", async () => {
+	render(Scheduled);
+
+	await fireEvent.keyDown(screen.getByRole("button"), { key: "ArrowUp" });
+
+	await act(async () => {});
+
+	await waitFor(() => expect(screen.getAllByRole("option")[2]).toHaveFocus());
+
+	await fireEvent.click(screen.getByRole("button"));
+	await fireEvent.keyDown(screen.getByRole("button"), { key: "ArrowDown" });
+
+	await act(async () => {});
+
+	await waitFor(() => expect(screen.getAllByRole("option")[0]).toHaveFocus());
+});
+
+it("async selectedIndex", async () => {
+	render(Select);
+
+	await userEvent.click(screen.getByRole("button"));
+	await act(async () => {});
+
+	await waitFor(() => expect(screen.getAllByRole("option")[2]).toHaveFocus());
+	await userEvent.keyboard(testKbd.ARROW_DOWN);
+	await waitFor(() => expect(screen.getAllByRole("option")[3]).toHaveFocus());
+});
+
+it("grid navigation with changing list items", async () => {
+	render(EmojiPicker);
+
+	await fireEvent.click(screen.getByRole("button"));
+
+	await act(async () => {});
+
+	await waitFor(() => expect(screen.getByRole("textbox")).toHaveFocus());
+
+	await userEvent.keyboard("appl");
+	await sleep(200);
+	await userEvent.keyboard(testKbd.ARROW_DOWN);
+
+	await waitFor(() =>
+		expect(screen.getByLabelText("apple")).toHaveAttribute("data-active"),
+	);
+
+	await userEvent.keyboard(testKbd.ARROW_DOWN);
+
+	await waitFor(() =>
+		expect(screen.getByLabelText("apple")).toHaveAttribute("data-active"),
+	);
+});
+
+it("grid navigation with disabled list items after input", async () => {
+	render(EmojiPicker);
+
+	await fireEvent.click(screen.getByRole("button"));
+
+	await act(async () => {});
+
+	await waitFor(() => expect(screen.getByRole("textbox")).toHaveFocus());
+
+	await userEvent.keyboard("o");
+	await userEvent.keyboard("{ArrowDown}");
+
+	await waitFor(() =>
+		expect(screen.getByLabelText("orange")).not.toHaveAttribute("data-active"),
+	);
+	await waitFor(() =>
+		expect(screen.getByLabelText("watermelon")).toHaveAttribute("data-active"),
+	);
+
+	await userEvent.keyboard("{ArrowDown}");
+
+	await waitFor(() =>
+		expect(screen.getByLabelText("watermelon")).toHaveAttribute("data-active"),
+	);
+});
+
+it("grid navigation with disabled list items", async () => {
+	render(EmojiPicker);
+
+	await fireEvent.click(screen.getByRole("button"));
+
+	await waitFor(() => expect(screen.getByRole("textbox")).toHaveFocus());
+
+	await userEvent.keyboard(testKbd.ARROW_DOWN);
+	await userEvent.keyboard(testKbd.ARROW_DOWN);
+	await userEvent.keyboard(testKbd.ARROW_RIGHT);
+	await userEvent.keyboard(testKbd.ARROW_UP);
+
+	await waitFor(() =>
+		expect(screen.getByLabelText("cherry")).toHaveAttribute("data-active"),
+	);
+});
+
+it("selectedIndex changing does not steal focus", async () => {
+	render(ListboxFocus);
+
+	await userEvent.click(screen.getByTestId("reference"));
+	await waitFor(() => expect(screen.getByTestId("reference")).toHaveFocus());
+});
+
+it("focus management in nested lists", async () => {
+	render(NestedMenu);
+	await userEvent.click(screen.getByRole("button", { name: "Edit" }));
+	await sleep(20);
+	await userEvent.keyboard(testKbd.ARROW_DOWN);
+	await userEvent.keyboard(testKbd.ARROW_DOWN);
+	await userEvent.keyboard(testKbd.ARROW_DOWN);
+	await userEvent.keyboard(testKbd.ARROW_RIGHT);
+
+	await waitFor(() => expect(screen.getByText("Text")).toHaveFocus());
+});
+
+it("virtual nested home or end key presses", async () => {
+	render(VirtualNested);
+
+	await act(() => {
+		screen.getByRole("combobox").focus();
+	});
+
+	await userEvent.keyboard(testKbd.ARROW_DOWN); // open menu
+	await userEvent.keyboard(testKbd.ARROW_DOWN);
+	await userEvent.keyboard(testKbd.ARROW_DOWN); // focus Copy as menu
+	await userEvent.keyboard(testKbd.ARROW_RIGHT); // open Copy as submenu
+	await userEvent.keyboard(testKbd.END);
+
+	expect(screen.getByText("Audio")).toHaveAttribute("aria-selected", "true");
+	expect(screen.getByText("Share")).not.toHaveAttribute(
+		"aria-selected",
+		"true",
+	);
+});
+
+it("domReference trigger in nested virtual menu is set as virtual item", async () => {
+	render(VirtualNested);
+
+	await act(() => {
+		screen.getByRole("combobox").focus();
+	});
+
+	await userEvent.keyboard(testKbd.ARROW_DOWN); // open menu
+	await userEvent.keyboard(testKbd.ARROW_DOWN);
+	await userEvent.keyboard(testKbd.ARROW_DOWN); // focus Copy as menu
+	await userEvent.keyboard(testKbd.ARROW_RIGHT); // open Copy as submenu
+
+	expect(screen.getByText("Text")).toHaveAttribute("aria-selected", "true");
+
+	await userEvent.keyboard(testKbd.ARROW_LEFT); // close Copy as submenu
+
+	expect(screen.getByTestId("value")).toHaveTextContent("copy");
+});
+
+it("Home or End key press is ignored for typeable combobox reference", async () => {
+	render(HomeEndIgnore);
+	await userEvent.click(screen.getByRole("combobox"));
+
+	await userEvent.keyboard(testKbd.ARROW_DOWN);
+	await sleep(20);
+
+	await waitFor(() => expect(screen.getByTestId("item-0")).toHaveFocus());
+
+	await userEvent.keyboard(testKbd.END);
+
+	await waitFor(() => expect(screen.getByTestId("item-0")).toHaveFocus());
+
+	await userEvent.keyboard(testKbd.ARROW_DOWN);
+	await userEvent.keyboard(testKbd.HOME);
+
+	await waitFor(() => expect(screen.getByTestId("item-1")).toHaveFocus());
+});
diff --git a/packages/floating-ui-svelte/test/hooks/use-role.ts b/packages/floating-ui-svelte/test/unit/hooks/use-role.test.ts
similarity index 100%
rename from packages/floating-ui-svelte/test/hooks/use-role.ts
rename to packages/floating-ui-svelte/test/unit/hooks/use-role.test.ts
diff --git a/packages/floating-ui-svelte/test/unit/hooks/use-typeahead.test.ts b/packages/floating-ui-svelte/test/unit/hooks/use-typeahead.test.ts
new file mode 100644
index 00000000..6ab6dc6a
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/hooks/use-typeahead.test.ts
@@ -0,0 +1,200 @@
+import { act, render, screen, waitFor } from "@testing-library/svelte";
+import { expect, it, vi } from "vitest";
+import Combobox from "./wrapper-components/use-typeahead/typeahead-combobox.svelte";
+import Full from "./wrapper-components/use-typeahead/typeahead-full.svelte";
+import Select from "./wrapper-components/use-typeahead/typeahead-select.svelte";
+import { userEvent } from "@testing-library/user-event";
+import { sleep, testKbd } from "../../utils.js";
+import Menu from "../../visual/components/menu/main.svelte";
+
+vi.useFakeTimers({ shouldAdvanceTime: true });
+
+it("rapidly focuses list items when they start with the same letter", async () => {
+	const spy = vi.fn();
+	render(Combobox, { onMatch: spy });
+
+	await userEvent.click(screen.getByRole("combobox"));
+
+	await userEvent.keyboard("t");
+	expect(spy).toHaveBeenCalledWith(1);
+
+	await userEvent.keyboard("t");
+	expect(spy).toHaveBeenCalledWith(2);
+
+	await userEvent.keyboard("t");
+	expect(spy).toHaveBeenCalledWith(1);
+});
+
+it("bails out of rapid focus of first letter if the list contains a string that starts with two of the same letter", async () => {
+	const spy = vi.fn();
+	render(Combobox, { onMatch: spy, list: ["apple", "aaron", "apricot"] });
+
+	await userEvent.click(screen.getByRole("combobox"));
+
+	await userEvent.keyboard("a");
+	expect(spy).toHaveBeenCalledWith(0);
+
+	await userEvent.keyboard("a");
+	expect(spy).toHaveBeenCalledWith(0);
+});
+
+it("starts from the current activeIndex and correctly loops", async () => {
+	const spy = vi.fn();
+	render(Combobox, {
+		onMatch: spy,
+		list: ["Toy Story 2", "Toy Story 3", "Toy Story 4"],
+	});
+
+	await userEvent.click(screen.getByRole("combobox"));
+
+	await userEvent.keyboard("t");
+	await userEvent.keyboard("o");
+	await userEvent.keyboard("y");
+	expect(spy).toHaveBeenCalledWith(0);
+
+	spy.mockReset();
+
+	await userEvent.keyboard("t");
+	await userEvent.keyboard("o");
+	await userEvent.keyboard("y");
+	expect(spy).not.toHaveBeenCalled();
+
+	vi.advanceTimersByTime(750);
+
+	await userEvent.keyboard("t");
+	await userEvent.keyboard("o");
+	await userEvent.keyboard("y");
+	expect(spy).toHaveBeenCalledWith(1);
+
+	vi.advanceTimersByTime(750);
+
+	await userEvent.keyboard("t");
+	await userEvent.keyboard("o");
+	await userEvent.keyboard("y");
+	expect(spy).toHaveBeenCalledWith(2);
+
+	vi.advanceTimersByTime(750);
+
+	await userEvent.keyboard("t");
+	await userEvent.keyboard("o");
+	await userEvent.keyboard("y");
+	expect(spy).toHaveBeenCalledWith(0);
+});
+
+it("should match capslock characters", async () => {
+	const spy = vi.fn();
+	render(Combobox, { onMatch: spy });
+
+	await userEvent.click(screen.getByRole("combobox"));
+
+	await userEvent.keyboard(`${testKbd.CAPS_LOCK}t`);
+	expect(spy).toHaveBeenCalledWith(1);
+});
+
+const oneTwoThree = ["one", "two", "three"];
+
+it("matches when focus is within reference", async () => {
+	const spy = vi.fn();
+	render(Full, { onMatch: spy, list: oneTwoThree });
+
+	await userEvent.click(screen.getByRole("combobox"));
+
+	await userEvent.keyboard("t");
+	expect(spy).toHaveBeenCalledWith(1);
+});
+
+it("matches when focus is within floating", async () => {
+	const spy = vi.fn();
+	render(Full, { onMatch: spy, list: oneTwoThree });
+
+	await userEvent.click(screen.getByRole("combobox"));
+	await userEvent.keyboard("t");
+
+	const option = await screen.findByRole("option", { selected: true });
+	expect(option.textContent).toBe("two");
+	option.focus();
+	expect(option).toHaveFocus();
+
+	await userEvent.keyboard("h");
+	expect(
+		(await screen.findByRole("option", { selected: true })).textContent,
+	).toBe("three");
+});
+
+it("calls onTypingChange when typing starts or stops", async () => {
+	const spy = vi.fn();
+	render(Combobox, { onTypingChange: spy, list: oneTwoThree });
+
+	await act(() => screen.getByRole("combobox").focus());
+
+	await userEvent.keyboard("t");
+	expect(spy).toHaveBeenCalledTimes(1);
+	expect(spy).toHaveBeenCalledWith(true);
+
+	vi.advanceTimersByTime(750);
+	expect(spy).toHaveBeenCalledTimes(2);
+	expect(spy).toHaveBeenCalledWith(false);
+});
+
+it("Menu - skips disabled items and opens submenu on space if no match", async () => {
+	vi.useRealTimers();
+
+	render(Menu);
+
+	await userEvent.click(screen.getByText("Edit"));
+	await act(async () => {});
+	expect(screen.getByRole("menu")).toBeInTheDocument();
+
+	await userEvent.keyboard("copy as ");
+
+	expect(screen.getByText("Copy as").getAttribute("aria-expanded")).toBe(
+		"false",
+	);
+
+	await sleep(750);
+	await userEvent.keyboard(" ");
+
+	await waitFor(() =>
+		expect(screen.getByText("Copy as").getAttribute("aria-expanded")).toBe(
+			"true",
+		),
+	);
+});
+
+it("Menu - resets once a match is no longer found", async () => {
+	vi.useFakeTimers({ shouldAdvanceTime: true });
+
+	render(Menu);
+
+	await userEvent.click(screen.getByText("Edit"));
+
+	expect(screen.getByRole("menu")).toBeInTheDocument();
+
+	await userEvent.keyboard("undr");
+
+	expect(screen.getByText("Undo")).toHaveFocus();
+
+	await userEvent.keyboard("r");
+
+	expect(screen.getByText("Redo")).toHaveFocus();
+});
+
+it("typing spaces on <div> references does not open the menu", async () => {
+	vi.useFakeTimers({ shouldAdvanceTime: true });
+	const spy = vi.fn();
+	render(Select, { onMatch: spy });
+
+	await userEvent.click(screen.getByRole("combobox"));
+
+	await userEvent.keyboard("h");
+	await userEvent.keyboard(" ");
+
+	expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+
+	vi.advanceTimersByTime(750);
+
+	await userEvent.keyboard(" ");
+	await act(async () => {});
+
+	expect(screen.queryByRole("listbox")).toBeInTheDocument();
+});
diff --git a/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-click.svelte b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-click.svelte
new file mode 100644
index 00000000..7ac5c6cb
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-click.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { autoUpdate } from "@floating-ui/dom";
+	import { useFloating } from "../../../../src/hooks/use-floating.svelte.js";
+	import { useHover } from "../../../../src/hooks/use-hover.svelte.js";
+	import { useInteractions } from "../../../../src/hooks/use-interactions.svelte.js";
+	import { useClick, type UseClickOptions } from "../../../../src/index.js";
+
+	interface Props extends UseClickOptions {
+		open?: boolean;
+		element?: string;
+		enableHover?: boolean;
+	}
+
+	let {
+		open = false,
+		element = "button",
+		enableHover = false,
+		...useClickOptions
+	}: Props = $props();
+
+	const floating = useFloating({
+		whileElementsMounted: autoUpdate,
+		open: () => open,
+		onOpenChange: (v) => {
+			open = v;
+		},
+	});
+
+	const click = useClick(floating.context, useClickOptions);
+	const hover = useHover(floating.context, { enabled: enableHover });
+	const interactions = useInteractions([click, hover]);
+</script>
+
+<svelte:element
+	this={element}
+	bind:this={floating.elements.reference}
+	data-testid="reference"
+	{...interactions.getReferenceProps()}></svelte:element>
+{#if open}
+	<div
+		data-testid="floating"
+		bind:this={floating.elements.floating}
+		style={floating.floatingStyles}
+		{...interactions.getFloatingProps()}>
+	</div>
+{/if}
diff --git a/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-client-point.svelte b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-client-point.svelte
new file mode 100644
index 00000000..1bf5f1c1
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-client-point.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+	import {
+		useClientPoint,
+		useFloating,
+		useInteractions,
+	} from "../../../../src/index.js";
+
+	let {
+		enabled = true,
+		x = null,
+		y = null,
+		axis,
+	}: {
+		enabled?: boolean;
+		x?: number | null;
+		y?: number | null;
+		axis?: "both" | "x" | "y";
+	} = $props();
+
+	let open = $state(false);
+
+	const f = useFloating({
+		open: () => open,
+		onOpenChange: (v) => {
+			open = v;
+		},
+	});
+
+	const clientPoint = useClientPoint(f.context, {
+		enabled: () => enabled,
+		x: () => x,
+		y: () => y,
+		axis,
+	});
+
+	const ints = useInteractions([clientPoint]);
+
+	const rect = $derived(f.elements.reference?.getBoundingClientRect());
+</script>
+
+<button onclick={() => (open = !open)} data-testid="toggle-open"
+	>toggle open</button>
+<button onclick={() => (enabled = !enabled)} data-testid="toggle-enabled"
+	>toggle enabled</button>
+<div
+	data-testid="reference"
+	bind:this={f.elements.reference}
+	{...ints.getReferenceProps()}>
+	Reference
+</div>
+{#if open}
+	<div
+		data-testid="floating"
+		bind:this={f.elements.floating}
+		{...ints.getFloatingProps()}>
+		Floating
+	</div>
+{/if}
+<span data-testid="x">{rect?.x}</span>
+<span data-testid="y">{rect?.y}</span>
+<span data-testid="width">{rect?.width}</span>
+<span data-testid="height">{rect?.height}</span>
+<button
+	data-testid="set-point"
+	onclick={() => {
+		x = 1000;
+		y = 1000;
+	}}>set point</button>
diff --git a/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-dismiss.svelte b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-dismiss.svelte
new file mode 100644
index 00000000..0901e158
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-dismiss.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { autoUpdate } from "@floating-ui/dom";
+	import {
+		type UseDismissOptions,
+		useDismiss,
+	} from "../../../../src/hooks/use-dismiss.svelte";
+	import { useFloating } from "../../../../src/hooks/use-floating.svelte";
+	import { useInteractions } from "../../../../src/hooks/use-interactions.svelte";
+
+	interface Props extends UseDismissOptions {
+		open?: boolean;
+	}
+
+	let { open = false, ...useDismissOptions }: Props = $props();
+
+	const floating = useFloating({
+		whileElementsMounted: autoUpdate,
+		open: () => open,
+		onOpenChange: (v) => {
+			open = v;
+		},
+	});
+
+	const dismiss = useDismiss(floating.context, useDismissOptions);
+	const interactions = useInteractions([dismiss]);
+</script>
+
+<button
+	data-testid="reference"
+	bind:this={floating.elements.reference}
+	{...interactions.getReferenceProps()}>
+	button
+</button>
+
+{#if open}
+	<div
+		data-testid="floating"
+		bind:this={floating.elements.floating}
+		style={floating.floatingStyles}
+		{...interactions.getFloatingProps()}>
+	</div>
+{/if}
diff --git a/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-dismiss/dismiss-capture-dialog.svelte b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-dismiss/dismiss-capture-dialog.svelte
new file mode 100644
index 00000000..6b931b13
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-dismiss/dismiss-capture-dialog.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import {
+		useDismiss,
+		useFloating,
+		useFloatingNodeId,
+		useInteractions,
+		type UseDismissOptions,
+	} from "../../../../../src/index.js";
+	import FloatingNode from "../../../../../src/components/floating-tree/floating-node.svelte";
+	import FloatingPortal from "../../../../../src/components/floating-portal/floating-portal.svelte";
+	import FloatingFocusManager from "../../../../../src/components/floating-focus-manager/floating-focus-manager.svelte";
+
+	let {
+		id,
+		children,
+		...rest
+	}: UseDismissOptions & { id: string; children?: Snippet } = $props();
+
+	let open = $state(true);
+	const nodeId = useFloatingNodeId();
+
+	const f = useFloating({
+		open: () => open,
+		onOpenChange: (v) => (open = v),
+		nodeId,
+	});
+
+	const ints = useInteractions([useDismiss(f.context, rest)]);
+</script>
+
+<FloatingNode id={nodeId}>
+	<button bind:this={f.elements.reference} {...ints.getReferenceProps()}
+		>open</button>
+	{#if open}
+		<FloatingPortal>
+			<FloatingFocusManager context={f.context}>
+				<div
+					bind:this={f.elements.floating}
+					{...ints.getFloatingProps()}>
+					<span>{id}</span>
+					{@render children?.()}
+				</div>
+			</FloatingFocusManager>
+		</FloatingPortal>
+	{/if}
+</FloatingNode>
diff --git a/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-dismiss/dismiss-capture-dialogs-multi.svelte b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-dismiss/dismiss-capture-dialogs-multi.svelte
new file mode 100644
index 00000000..2dbb1b7a
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-dismiss/dismiss-capture-dialogs-multi.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import DismissCaptureNestedDialog from "./dismiss-capture-nested-dialog.svelte";
+	import DismissOverlay from "./dismiss-overlay.svelte";
+
+	let {
+		outsidePress = [false, false],
+		escapeKey = [false, false],
+	}: { outsidePress?: [boolean, boolean]; escapeKey?: [boolean, boolean] } =
+		$props();
+</script>
+
+<DismissOverlay>
+	<DismissCaptureNestedDialog
+		id="outer"
+		capture={{ outsidePress: outsidePress[0], escapeKey: escapeKey[0] }}>
+		<DismissCaptureNestedDialog
+			id="inner"
+			capture={{
+				outsidePress: outsidePress[1],
+				escapeKey: escapeKey[1],
+			}}>
+			{null}
+		</DismissCaptureNestedDialog>
+	</DismissCaptureNestedDialog>
+</DismissOverlay>
diff --git a/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-dismiss/dismiss-capture-nested-dialog.svelte b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-dismiss/dismiss-capture-nested-dialog.svelte
new file mode 100644
index 00000000..3ad8bc31
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-dismiss/dismiss-capture-nested-dialog.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import {
+		useFloatingParentNodeId,
+		type UseDismissOptions,
+	} from "../../../../../src/index.js";
+	import FloatingTree from "../../../../../src/components/floating-tree/floating-tree.svelte";
+	import DismissCaptureDialog from "./dismiss-capture-dialog.svelte";
+
+	let props: UseDismissOptions & { id: string; children?: Snippet } =
+		$props();
+
+	const parentId = useFloatingParentNodeId();
+</script>
+
+{#if parentId == null}
+	<FloatingTree>
+		<DismissCaptureDialog {...props} />
+	</FloatingTree>
+{:else}
+	<DismissCaptureDialog {...props} />
+{/if}
diff --git a/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-dismiss/dismiss-dialog.svelte b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-dismiss/dismiss-dialog.svelte
new file mode 100644
index 00000000..6d7268fc
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-dismiss/dismiss-dialog.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import {
+		useDismiss,
+		useFloating,
+		useFloatingNodeId,
+		useInteractions,
+		type UseDismissOptions,
+	} from "../../../../../src/index.js";
+	import FloatingNode from "../../../../../src/components/floating-tree/floating-node.svelte";
+	import FloatingFocusManager from "../../../../../src/components/floating-focus-manager/floating-focus-manager.svelte";
+
+	let {
+		testId,
+		children,
+		...rest
+	}: UseDismissOptions & { testId: string; children: Snippet } = $props();
+
+	let open = $state(true);
+	const nodeId = useFloatingNodeId();
+
+	const f = useFloating({
+		open: () => open,
+		onOpenChange: (v) => (open = v),
+		nodeId,
+	});
+
+	const ints = useInteractions([useDismiss(f.context, rest)]);
+</script>
+
+<FloatingNode id={nodeId}>
+	<button
+		{...ints.getReferenceProps()}
+		bind:this={f.elements.reference}
+		onclick={() => (open = !open)}>Open</button>
+	{#if open}
+		<FloatingFocusManager context={f.context}>
+			<div
+				bind:this={f.elements.floating}
+				{...ints.getFloatingProps()}
+				data-testid={testId}>
+				this is my content here for {testId}
+
+				{@render children()}
+			</div>
+		</FloatingFocusManager>
+	{/if}
+</FloatingNode>
diff --git a/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-dismiss/dismiss-nested-dialog.svelte b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-dismiss/dismiss-nested-dialog.svelte
new file mode 100644
index 00000000..de5e63b5
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-dismiss/dismiss-nested-dialog.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import {
+		useFloatingParentNodeId,
+		type UseDismissOptions,
+	} from "../../../../../src/index.js";
+	import FloatingTree from "../../../../../src/components/floating-tree/floating-tree.svelte";
+	import DismissDialog from "./dismiss-dialog.svelte";
+
+	let props: UseDismissOptions & { testId: string; children: Snippet } =
+		$props();
+
+	const parentId = useFloatingParentNodeId();
+</script>
+
+{#if parentId == null}
+	<FloatingTree>
+		<DismissDialog {...props} />
+	</FloatingTree>
+{:else}
+	<DismissDialog {...props} />
+{/if}
diff --git a/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-dismiss/dismiss-nested-nested.svelte b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-dismiss/dismiss-nested-nested.svelte
new file mode 100644
index 00000000..1895950f
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-dismiss/dismiss-nested-nested.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+	import DismissNestedDialog from "./dismiss-nested-dialog.svelte";
+
+	let {
+		escapeKey,
+		outsidePress,
+		bubbles,
+	}: {
+		outsidePress?: [boolean, boolean];
+		escapeKey?: [boolean, boolean];
+		bubbles?: boolean;
+	} = $props();
+
+	const firstBubbles = $derived(
+		outsidePress === undefined && escapeKey === undefined
+			? undefined
+			: {
+					outsidePress: outsidePress ? outsidePress[0] : undefined,
+					escapeKey: escapeKey ? escapeKey[0] : undefined,
+				}
+	);
+
+	const secondBubbles = $derived(
+		outsidePress === undefined && escapeKey === undefined
+			? undefined
+			: {
+					outsidePress: outsidePress ? outsidePress[1] : undefined,
+					escapeKey: escapeKey ? escapeKey[1] : undefined,
+				}
+	);
+</script>
+
+<DismissNestedDialog
+	testId="outer"
+	bubbles={bubbles === true ? true : firstBubbles}>
+	<DismissNestedDialog
+		testId="inner"
+		bubbles={bubbles === true ? true : secondBubbles}>
+		<button>test button</button>
+	</DismissNestedDialog>
+</DismissNestedDialog>
diff --git a/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-dismiss/dismiss-nested-popovers.svelte b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-dismiss/dismiss-nested-popovers.svelte
new file mode 100644
index 00000000..c0f1c614
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-dismiss/dismiss-nested-popovers.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import DismissPopover from "./dismiss-popover.svelte";
+
+	let { modal }: { modal: [boolean, boolean] | null } = $props();
+</script>
+
+<DismissPopover id="popover-1" modal={modal ? modal[0] : true}>
+	<DismissPopover id="popover-2" modal={modal ? modal[1] : null} />
+</DismissPopover>
diff --git a/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-dismiss/dismiss-overlay.svelte b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-dismiss/dismiss-overlay.svelte
new file mode 100644
index 00000000..13a380db
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-dismiss/dismiss-overlay.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { styleObjectToString } from "../../../../../src/internal/style-object-to-string.js";
+
+	let { children }: { children: Snippet } = $props();
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	style={styleObjectToString({ width: "100vw", height: "100vh" })}
+	onpointerdown={(e) => {
+		e.stopPropagation();
+	}}
+	onkeydown={(e) => {
+		if (e.key === "Escape") {
+			e.stopPropagation();
+		}
+	}}>
+	<span>outside</span>
+	{@render children?.()}
+</div>
diff --git a/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-dismiss/dismiss-popover.svelte b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-dismiss/dismiss-popover.svelte
new file mode 100644
index 00000000..b2d3b0c6
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-dismiss/dismiss-popover.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import {
+		useDismiss,
+		useFloating,
+		useInteractions,
+	} from "../../../../../src/index.js";
+	import FloatingFocusManager from "../../../../../src/components/floating-focus-manager/floating-focus-manager.svelte";
+
+	let {
+		children,
+		id,
+		modal,
+	}: { children?: Snippet; id: string; modal?: boolean | null } = $props();
+
+	let open = $state(true);
+
+	const f = useFloating({
+		open: () => open,
+		onOpenChange: (v) => (open = v),
+	});
+
+	const dismiss = useDismiss(f.context);
+
+	const ints = useInteractions([dismiss]);
+</script>
+
+{#snippet Dialog()}
+	<div
+		role="dialog"
+		data-testid={id}
+		bind:this={f.elements.floating}
+		{...ints.getFloatingProps()}>
+		{@render children?.()}
+	</div>
+{/snippet}
+
+<button bind:this={f.elements.reference} {...ints.getReferenceProps()}
+	>open</button>
+{#if open}
+	{#if modal == null}
+		{@render Dialog()}
+	{:else}
+		<FloatingFocusManager context={f.context} {modal}>
+			{@render Dialog()}
+		</FloatingFocusManager>
+	{/if}
+{/if}
diff --git a/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-dismiss/dismiss-portaled-children.svelte b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-dismiss/dismiss-portaled-children.svelte
new file mode 100644
index 00000000..d6d73678
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-dismiss/dismiss-portaled-children.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import FloatingPortal from "../../../../../src/components/floating-portal/floating-portal.svelte";
+	import {
+		useDismiss,
+		useFloating,
+		useInteractions,
+	} from "../../../../../src/index.js";
+
+	let open = $state(true);
+
+	const f = useFloating({
+		open: () => open,
+		onOpenChange: (v) => (open = v),
+	});
+
+	const ints = useInteractions([useDismiss(f.context)]);
+</script>
+
+<button bind:this={f.elements.reference} {...ints.getReferenceProps()}
+	>open</button>
+{#if open}
+	<div bind:this={f.elements.floating} {...ints.getFloatingProps()}>
+		<FloatingPortal>
+			<button data-testid="portaled-button">portaled-button</button>
+		</FloatingPortal>
+	</div>
+{/if}
diff --git a/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-dismiss/dismiss-without-floating-tree.svelte b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-dismiss/dismiss-without-floating-tree.svelte
new file mode 100644
index 00000000..7e7d9a66
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-dismiss/dismiss-without-floating-tree.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+	import {
+		useDismiss,
+		useFloating,
+		useFocus,
+		useInteractions,
+	} from "../../../../../src/index.js";
+
+	let popoverOpen = $state(true);
+	let tooltipOpen = $state(false);
+
+	const popover = useFloating({
+		open: () => popoverOpen,
+		onOpenChange: (v) => (popoverOpen = v),
+	});
+
+	const tooltip = useFloating({
+		open: () => tooltipOpen,
+		onOpenChange: (v) => (tooltipOpen = v),
+	});
+
+	const popoverInts = useInteractions([useDismiss(popover.context)]);
+
+	const tooltipInts = useInteractions([
+		useFocus(tooltip.context, { visibleOnly: false }),
+		useDismiss(tooltip.context),
+	]);
+</script>
+
+<button
+	bind:this={popover.elements.reference}
+	{...popoverInts.getReferenceProps()}>open popover</button>
+{#if popoverOpen}
+	<div
+		role="dialog"
+		bind:this={popover.elements.floating}
+		{...popoverInts.getFloatingProps()}>
+		<button
+			data-testid="focus-button"
+			bind:this={tooltip.elements.reference}
+			{...tooltipInts.getReferenceProps()}>open tooltip</button>
+	</div>
+{/if}
+{#if tooltipOpen}
+	<div
+		role="tooltip"
+		bind:this={tooltip.elements.floating}
+		{...tooltipInts.getFloatingProps()}>
+	</div>
+{/if}
diff --git a/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-dismiss/dismiss.svelte b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-dismiss/dismiss.svelte
new file mode 100644
index 00000000..755e5f9e
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-dismiss/dismiss.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { expect } from "vitest";
+	import {
+		useDismiss,
+		useFloating,
+		useInteractions,
+		type UseDismissOptions,
+	} from "../../../../../src/index.js";
+
+	let props: UseDismissOptions & { onClose?: () => void } = $props();
+
+	let open = $state(true);
+	const f = useFloating({
+		open: () => open,
+		onOpenChange: (newOpen, _, reason) => {
+			open = newOpen;
+			if (props.outsidePress) {
+				expect(reason).toBe("outside-press");
+			} else if (props.escapeKey) {
+				expect(reason).toBe("escape-key");
+				if (!newOpen) {
+					props.onClose?.();
+				}
+			} else if (props.referencePress) {
+				expect(reason).toBe("reference-press");
+			} else if (props.ancestorScroll) {
+				expect(reason).toBe("ancestor-scroll");
+			}
+		},
+	});
+
+	const ints = useInteractions([useDismiss(f.context, props)]);
+</script>
+
+<button bind:this={f.elements.reference} {...ints.getReferenceProps()}>
+	open
+</button>
+
+{#if open}
+	<div
+		bind:this={f.elements.floating}
+		role="tooltip"
+		{...ints.getFloatingProps()}>
+		<input />
+	</div>
+{/if}
diff --git a/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-dismiss/third-party.svelte b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-dismiss/third-party.svelte
new file mode 100644
index 00000000..85f6e63d
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-dismiss/third-party.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import FloatingFocusManager from "../../../../../src/components/floating-focus-manager/floating-focus-manager.svelte";
+	import {
+		useDismiss,
+		useFloating,
+		useInteractions,
+	} from "../../../../../src/index.js";
+
+	let open = $state(true);
+	const f = useFloating({
+		open: () => open,
+		onOpenChange: (v) => (open = v),
+	});
+
+	const dismiss = useDismiss(f.context);
+
+	const ints = useInteractions([dismiss]);
+</script>
+
+<button bind:this={f.elements.reference} {...ints.getReferenceProps()}
+	>open</button>
+{#if open}
+	<FloatingFocusManager context={f.context}>
+		<div
+			role="dialog"
+			bind:this={f.elements.floating}
+			{...ints.getFloatingProps()}>
+		</div>
+	</FloatingFocusManager>
+{/if}
diff --git a/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-focus.svelte b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-focus.svelte
new file mode 100644
index 00000000..63f22441
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-focus.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { autoUpdate } from "@floating-ui/dom";
+	import { useFloating } from "../../../../src/hooks/use-floating.svelte";
+	import {
+		type UseFocusOptions,
+		useFocus,
+	} from "../../../../src/hooks/use-focus.svelte";
+	import { useInteractions } from "../../../../src/hooks/use-interactions.svelte";
+
+	interface Props extends UseFocusOptions {
+		open?: boolean;
+	}
+
+	let { open = false, ...useFocusOptions }: Props = $props();
+
+	const floating = useFloating({
+		whileElementsMounted: autoUpdate,
+		open: () => open,
+		onOpenChange: (v) => {
+			open = v;
+		},
+	});
+
+	const focus = useFocus(floating.context, useFocusOptions);
+	const interactions = useInteractions([focus]);
+</script>
+
+<button
+	data-testid="reference"
+	bind:this={floating.elements.reference}
+	{...interactions.getReferenceProps()}>
+	button
+</button>
+
+{#if open}
+	<div
+		data-testid="floating"
+		bind:this={floating.floating}
+		style={floating.floatingStyles}
+		{...interactions.getFloatingProps()}>
+	</div>
+{/if}
diff --git a/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-hover.svelte b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-hover.svelte
new file mode 100644
index 00000000..655f095a
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-hover.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+	import { autoUpdate } from "@floating-ui/dom";
+	import { useFloating } from "../../../../src/hooks/use-floating.svelte";
+	import {
+		type UseHoverOptions,
+		useHover,
+	} from "../../../../src/hooks/use-hover.svelte";
+	import { useInteractions } from "../../../../src/hooks/use-interactions.svelte.js";
+
+	interface Props extends UseHoverOptions {
+		open?: boolean;
+		showReference?: boolean;
+	}
+
+	let {
+		open = false,
+		showReference = true,
+		...useHoverOptions
+	}: Props = $props();
+
+	const floating = useFloating({
+		whileElementsMounted: autoUpdate,
+		open: () => open,
+		onOpenChange: (v) => {
+			open = v;
+		},
+	});
+
+	const hover = useHover(floating.context, useHoverOptions);
+	const interactions = useInteractions([hover]);
+</script>
+
+<button
+	data-testid="toggle-reference"
+	onclick={() => (showReference = !showReference)}>
+	toggle reference
+</button>
+
+{#if showReference}
+	<button
+		data-testid="reference"
+		bind:this={floating.elements.reference}
+		{...interactions.getReferenceProps()}>
+		button
+	</button>
+{/if}
+
+{#if open}
+	<div
+		data-testid="floating"
+		bind:this={floating.elements.floating}
+		style={floating.floatingStyles}
+		{...interactions.getFloatingProps()}>
+	</div>
+{/if}
diff --git a/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-list-navigation/autocomplete.svelte b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-list-navigation/autocomplete.svelte
new file mode 100644
index 00000000..bccb3840
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-list-navigation/autocomplete.svelte
@@ -0,0 +1,91 @@
+<script lang="ts">
+	import {
+		useDismiss,
+		useFloating,
+		useInteractions,
+		useListNavigation,
+	} from "../../../../../src/index.js";
+	import { styleObjectToString } from "../../../../../src/internal/style-object-to-string.js";
+
+	let open = $state(false);
+	let inputValue = $state("");
+	let activeIndex = $state<number | null>(null);
+
+	let listRef = $state<Array<HTMLElement | null>>([]);
+
+	const data = ["a", "ab", "abc", "abcd"];
+
+	const f = useFloating({
+		open: () => open,
+		onOpenChange: (v) => (open = v),
+	});
+
+	const ints = useInteractions([
+		useDismiss(f.context),
+		useListNavigation(f.context, {
+			listRef: () => listRef,
+			activeIndex: () => activeIndex,
+			onNavigate: (index) => {
+				activeIndex = index;
+			},
+			virtual: () => true,
+			loop: true,
+		}),
+	]);
+
+	$effect(() => {
+		if (inputValue) {
+			activeIndex = null;
+			open = true;
+		} else {
+			open = false;
+		}
+	});
+
+	const items = $derived(
+		data.filter((item) =>
+			item.toLowerCase().startsWith(inputValue.toLowerCase())
+		)
+	);
+</script>
+
+<input
+	bind:this={f.elements.reference}
+	{...ints.getReferenceProps({
+		placeholder: "Enter fruit",
+		"aria-autocomplete": "list",
+	})}
+	bind:value={inputValue}
+	data-testid="reference" />
+{#if open}
+	<div
+		bind:this={f.elements.floating}
+		{...ints.getFloatingProps({
+			style: styleObjectToString({
+				position: f.strategy,
+				left: f.x ? `${f.x}` : "",
+				top: f.y ? `${f.y}` : "",
+				background: "#eee",
+				color: "black",
+				"overflow-y": "auto",
+			}),
+		})}
+		data-testid="floating">
+		<ul>
+			{#each items as item, index (item)}
+				<li
+					bind:this={listRef[index]}
+					{...ints.getItemProps({
+						onclick: () => {
+							inputValue = item;
+							open = false;
+							f.elements.domReference?.focus();
+						},
+					})}>
+					{item}
+				</li>
+			{/each}
+		</ul>
+	</div>
+{/if}
+<div data-testid="active-index">{activeIndex}</div>
diff --git a/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-list-navigation/home-end-ignore.svelte b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-list-navigation/home-end-ignore.svelte
new file mode 100644
index 00000000..35593069
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-list-navigation/home-end-ignore.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+	import {
+		useClick,
+		useFloating,
+		useInteractions,
+		useListNavigation,
+	} from "../../../../../src/index.js";
+
+	let open = $state(false);
+	let list = $state<Array<HTMLLIElement | null>>([]);
+	let activeIndex = $state<number | null>(null);
+	const f = useFloating({
+		open: () => open,
+		onOpenChange: (v) => (open = v),
+	});
+
+	const ints = useInteractions([
+		useClick(f.context),
+		useListNavigation(f.context, {
+			listRef: () => list,
+			activeIndex: () => activeIndex,
+			onNavigate: (v) => (activeIndex = v),
+		}),
+	]);
+</script>
+
+<!-- svelte-ignore a11y_role_has_required_aria_props -->
+<input
+	role="combobox"
+	bind:this={f.elements.reference}
+	{...ints.getReferenceProps()} />
+{#if open}
+	<div
+		role="menu"
+		bind:this={f.elements.floating}
+		{...ints.getFloatingProps()}>
+		<ul>
+			{#each ["one", "two", "three"] as string, index}
+				<!-- svelte-ignore a11y_role_supports_aria_props_implicit -->
+				<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+				<li
+					data-testid={`item-${index}`}
+					aria-selected={activeIndex === index}
+					tabindex={-1}
+					bind:this={list[index]}
+					{...ints.getItemProps()}>
+					{string}
+				</li>
+			{/each}
+		</ul>
+	</div>
+{/if}
diff --git a/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-list-navigation/main.svelte b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-list-navigation/main.svelte
new file mode 100644
index 00000000..7b5d917c
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-list-navigation/main.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+	import {
+		useClick,
+		useFloating,
+		useInteractions,
+		useListNavigation,
+		type UseListNavigationOptions,
+	} from "../../../../../src/index.js";
+
+	let props: Omit<Partial<UseListNavigationOptions>, "listRef"> = $props();
+
+	let open = $state(false);
+	let listRef = $state<Array<HTMLLIElement | null>>([]);
+	let activeIndex = $state<number | null>(null);
+
+	const f = useFloating({
+		open: () => open,
+		onOpenChange: (v) => (open = v),
+	});
+
+	const ints = useInteractions([
+		useClick(f.context),
+		useListNavigation(f.context, {
+			...props,
+			listRef: () => listRef,
+			activeIndex: () => activeIndex,
+			onNavigate: (index) => {
+				activeIndex = index;
+				props.onNavigate?.(index);
+			},
+		}),
+	]);
+</script>
+
+<button {...ints.getReferenceProps()} bind:this={f.elements.reference}>
+	Open
+</button>
+{#if open}
+	<div
+		role="menu"
+		{...ints.getFloatingProps()}
+		bind:this={f.elements.floating}>
+		<ul>
+			{#each ["one", "two", "three"] as str, index (str)}
+				<li
+					role="option"
+					data-testid={`item-${index}`}
+					aria-selected={activeIndex === index}
+					tabindex={-1}
+					{...ints.getItemProps()}
+					bind:this={listRef[index]}>
+					{str}
+				</li>
+			{/each}
+		</ul>
+	</div>
+{/if}
diff --git a/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-list-navigation/scheduled-option.svelte b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-list-navigation/scheduled-option.svelte
new file mode 100644
index 00000000..aa49c145
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-list-navigation/scheduled-option.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { watch } from "../../../../../src/internal/watch.svelte.js";
+
+	let {
+		listRef = $bindable(),
+		getItemProps,
+		active,
+		index: propIndex,
+	}: {
+		listRef: Array<HTMLElement | null>;
+		getItemProps: () => Record<string, unknown>;
+		active: boolean;
+		index: number;
+	} = $props();
+
+	let index = $state(propIndex);
+
+	$effect(() => {
+		index = propIndex;
+	});
+
+	let ref = $state<HTMLElement | null>(null);
+
+	watch.pre(
+		() => ref,
+		() => {
+			if (index !== -1) {
+				listRef[index] = ref;
+			}
+		}
+	);
+</script>
+
+<div
+	role="option"
+	aria-selected={active}
+	tabindex={active ? 0 : -1}
+	bind:this={ref}
+	{...getItemProps()}>
+	opt
+</div>
diff --git a/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-list-navigation/scheduled.svelte b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-list-navigation/scheduled.svelte
new file mode 100644
index 00000000..c55ab9eb
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-list-navigation/scheduled.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+	import {
+		useFloating,
+		useInteractions,
+		useListNavigation,
+	} from "../../../../../src/index.js";
+	import ScheduledOption from "./scheduled-option.svelte";
+
+	let open = $state(false);
+	let activeIndex = $state<number | null>(null);
+	let listRef = $state<Array<HTMLElement | null>>([]);
+
+	const f = useFloating({
+		open: () => open,
+		onOpenChange: (v) => (open = v),
+	});
+
+	const listNav = useListNavigation(f.context, {
+		listRef: () => listRef,
+		activeIndex: () => activeIndex,
+		onNavigate: (v) => (activeIndex = v),
+	});
+
+	const ints = useInteractions([listNav]);
+</script>
+
+<button
+	bind:this={f.elements.reference}
+	{...ints.getReferenceProps({
+		onclick: () => (open = !open),
+	})}>
+	Open
+</button>
+{#if open}
+	<div bind:this={f.elements.floating} {...ints.getFloatingProps()}>
+		{#each ["one", "two", "three"] as option, index (option)}
+			<ScheduledOption
+				bind:listRef
+				getItemProps={ints.getItemProps}
+				{index}
+				active={activeIndex === index} />
+		{/each}
+	</div>
+{/if}
diff --git a/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-list-navigation/select-option.svelte b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-list-navigation/select-option.svelte
new file mode 100644
index 00000000..16ece6c9
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-list-navigation/select-option.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { useListItem } from "../../../../../src/components/floating-list/hooks.svelte.js";
+
+	let {
+		option,
+		activeIndex,
+		selectedIndex,
+	}: {
+		option: string;
+		activeIndex: number | null;
+		selectedIndex: number | null;
+	} = $props();
+
+	const listItem = useListItem();
+</script>
+
+<button
+	id="option-{option}"
+	bind:this={listItem.ref}
+	role="option"
+	tabindex={listItem.index === activeIndex ? 0 : -1}
+	aria-selected={listItem.index === selectedIndex}>
+	<span>
+		{option} listItemIndex {listItem.index} activeIndex {activeIndex}
+	</span>
+</button>
diff --git a/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-list-navigation/select.svelte b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-list-navigation/select.svelte
new file mode 100644
index 00000000..97b2c6a3
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-list-navigation/select.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+	import FloatingFocusManager from "../../../../../src/components/floating-focus-manager/floating-focus-manager.svelte";
+	import FloatingList from "../../../../../src/components/floating-list/floating-list.svelte";
+	import {
+		useClick,
+		useFloating,
+		useInteractions,
+		useListNavigation,
+	} from "../../../../../src/index.js";
+	import SelectOption from "./select-option.svelte";
+
+	let activeIndex = $state<number | null>(null);
+	let selectedIndex = $state<number | null>(2);
+	let open = $state(false);
+
+	const f = useFloating({
+		open: () => open,
+		onOpenChange: (v) => (open = v),
+	});
+
+	let elements = $state<Array<HTMLElement | null>>([]);
+
+	const click = useClick(f.context);
+	const listNav = useListNavigation(f.context, {
+		listRef: () => elements,
+		activeIndex: () => activeIndex,
+		selectedIndex: () => selectedIndex,
+		onNavigate: (idx) => (activeIndex = idx),
+	});
+
+	const ints = useInteractions([listNav, click]);
+	const options = [
+		"core",
+		"dom",
+		"react",
+		"react-dom",
+		"vue",
+		"react-native",
+	];
+</script>
+
+<button bind:this={f.elements.reference} {...ints.getReferenceProps()}>
+	Open
+</button>
+{#if open}
+	<FloatingFocusManager context={f.context} modal={false}>
+		<div
+			bind:this={f.elements.floating}
+			style={f.floatingStyles}
+			{...ints.getFloatingProps()}>
+			<FloatingList bind:elements>
+				{#each options as option (option)}
+					<SelectOption {option} {activeIndex} {selectedIndex} />
+				{/each}
+			</FloatingList>
+		</div>
+	</FloatingFocusManager>
+{/if}
diff --git a/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-role.svelte b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-role.svelte
new file mode 100644
index 00000000..cd412e24
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-role.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { autoUpdate } from "@floating-ui/dom";
+	import { useFloating } from "../../../../src/hooks/use-floating.svelte.js";
+	import { useInteractions } from "../../../../src/hooks/use-interactions.svelte.js";
+	import {
+		type UseRoleOptions,
+		useRole,
+	} from "../../../../src/hooks/use-role.svelte.js";
+	interface Props extends UseRoleOptions {
+		open?: boolean;
+	}
+	let { open = false, ...useRoleOptions }: Props = $props();
+	const floating = useFloating({
+		whileElementsMounted: autoUpdate,
+		open: () => open,
+		onOpenChange: (v) => {
+			open = v;
+		},
+	});
+	const role = useRole(floating.context, useRoleOptions);
+	const interactions = useInteractions([role]);
+</script>
+
+<button
+	data-testid="reference"
+	bind:this={floating.elements.reference}
+	{...interactions.getReferenceProps()}>
+	button
+</button>
+
+{#if open}
+	<div
+		data-testid="floating"
+		bind:this={floating.elements.floating}
+		style={floating.floatingStyles}
+		{...interactions.getFloatingProps()}>
+		{#each [1, 2, 3] as i}
+			<div
+				data-testid="item-{i}"
+				{...interactions.getItemProps({
+					active: i === 2,
+					selected: i === 2,
+				})}>
+			</div>
+		{/each}
+	</div>
+{/if}
diff --git a/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-typeahead/impl.svelte.ts b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-typeahead/impl.svelte.ts
new file mode 100644
index 00000000..c3079659
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-typeahead/impl.svelte.ts
@@ -0,0 +1,64 @@
+import type {
+	HTMLAttributeAnchorTarget,
+	HTMLAttributes,
+} from "svelte/elements";
+import {
+	useClick,
+	useInteractions,
+	useTypeahead,
+	type UseTypeaheadOptions,
+} from "../../../../../src/index.js";
+import type { Getter } from "../../../../../src/types.js";
+import { useFloating } from "../../../../../src/hooks/use-floating.svelte.js";
+
+export function useImpl({
+	addUseClick = false,
+	...props
+}: Pick<UseTypeaheadOptions, "onMatch" | "onTypingChange"> & {
+	list?: Array<string | null>;
+	open?: Getter<boolean>;
+	onOpenChange?: (open: boolean) => void;
+	addUseClick?: boolean;
+}) {
+	let open = $state(true);
+	let activeIndex = $state<number | null>(null);
+	const f = useFloating({
+		open: () => props.open?.() ?? open,
+		onOpenChange: props.onOpenChange ?? ((o) => (open = o)),
+	});
+	const list = props.list ?? ["one", "two", "three"];
+
+	const typeahead = useTypeahead(f.context, {
+		listRef: list,
+		activeIndex: () => activeIndex,
+		onMatch: (idx) => {
+			activeIndex = idx;
+			props.onMatch?.(idx);
+		},
+		onTypingChange: props.onTypingChange,
+	});
+	const click = useClick(f.context, {
+		enabled: addUseClick,
+	});
+
+	const ints = useInteractions([typeahead, click]);
+
+	return {
+		floating: f,
+		get activeIndex() {
+			return activeIndex;
+		},
+		get open() {
+			return open;
+		},
+		getReferenceProps: (userProps?: HTMLAttributes<Element>) =>
+			ints.getReferenceProps({
+				role: "combobox",
+				...userProps,
+			}),
+		getFloatingProps: () =>
+			ints.getFloatingProps({
+				role: "listbox",
+			}),
+	};
+}
diff --git a/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-typeahead/typeahead-combobox.svelte b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-typeahead/typeahead-combobox.svelte
new file mode 100644
index 00000000..3d25145c
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-typeahead/typeahead-combobox.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { UseTypeaheadOptions } from "../../../../../src/index.js";
+	import { useImpl } from "./impl.svelte.js";
+
+	let props: Pick<UseTypeaheadOptions, "onMatch" | "onTypingChange"> & {
+		list?: Array<string>;
+	} = $props();
+
+	const impl = useImpl(props);
+</script>
+
+<input
+	bind:this={impl.floating.elements.reference}
+	{...impl.getReferenceProps()} />
+<div bind:this={impl.floating.elements.floating} {...impl.getFloatingProps()}>
+</div>
diff --git a/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-typeahead/typeahead-full.svelte b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-typeahead/typeahead-full.svelte
new file mode 100644
index 00000000..3db1300a
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-typeahead/typeahead-full.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import type { UseTypeaheadOptions } from "../../../../../src/index.js";
+	import { useImpl } from "./impl.svelte.js";
+
+	let props: Pick<UseTypeaheadOptions, "onMatch"> & { list: Array<string> } =
+		$props();
+	const impl = useImpl(props);
+	let input = $state<HTMLInputElement>(null!);
+</script>
+
+<div
+	bind:this={impl.floating.elements.reference}
+	{...impl.getReferenceProps({
+		onclick: () => input.focus(),
+	})}>
+	<input bind:this={input} readOnly={true} />
+</div>
+{#if impl.open}
+	<div
+		bind:this={impl.floating.elements.floating}
+		{...impl.getFloatingProps()}>
+		{#each props.list as value, i (value)}
+			<div
+				role="option"
+				tabindex={i === impl.activeIndex ? 0 : -1}
+				aria-selected={i === impl.activeIndex}>
+				{value}
+			</div>
+		{/each}
+	</div>
+{/if}
diff --git a/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-typeahead/typeahead-select.svelte b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-typeahead/typeahead-select.svelte
new file mode 100644
index 00000000..d3e7387f
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/hooks/wrapper-components/use-typeahead/typeahead-select.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { UseTypeaheadOptions } from "../../../../../src/index.js";
+	import { useImpl } from "./impl.svelte.js";
+
+	let props: Pick<UseTypeaheadOptions, "onMatch" | "onTypingChange"> & {
+		list?: Array<string>;
+	} = $props();
+
+	let open = $state(false);
+	const impl = useImpl({
+		...props,
+		open: () => open,
+		onOpenChange: (v) => (open = v),
+		addUseClick: true,
+	});
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div
+	tabindex={0}
+	bind:this={impl.floating.elements.reference}
+	{...impl.getReferenceProps()}>
+</div>
+{#if open}
+	<div
+		bind:this={impl.floating.elements.floating}
+		{...impl.getFloatingProps()}>
+	</div>
+{/if}
diff --git a/packages/floating-ui-svelte/test/unit/internal/get-ancestors.test.ts b/packages/floating-ui-svelte/test/unit/internal/get-ancestors.test.ts
new file mode 100644
index 00000000..f7a0f019
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/internal/get-ancestors.test.ts
@@ -0,0 +1,18 @@
+import { expect, it } from "vitest";
+import { getAncestors } from "../../../src/internal/get-ancestors.js";
+
+it("returns an array of ancestors", () => {
+	expect(
+		getAncestors(
+			[
+				{ id: "0", parentId: null },
+				{ id: "1", parentId: "0" },
+				{ id: "2", parentId: "1" },
+			],
+			"2",
+		),
+	).toEqual([
+		{ id: "1", parentId: "0" },
+		{ id: "0", parentId: null },
+	]);
+});
diff --git a/packages/floating-ui-svelte/test/unit/internal/get-children.test.ts b/packages/floating-ui-svelte/test/unit/internal/get-children.test.ts
new file mode 100644
index 00000000..b5388454
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/internal/get-children.test.ts
@@ -0,0 +1,25 @@
+import { expect, it } from "vitest";
+import type { FloatingContext } from "../../../src/index.js";
+import { getChildren } from "../../../src/internal/get-children.js";
+
+const contextOpen = { open: true } as FloatingContext;
+const contextClosed = { open: false } as FloatingContext;
+
+it("returns an array of children, ignoring closed ones", () => {
+	expect(
+		getChildren(
+			[
+				{ id: "0", parentId: null, context: contextOpen },
+				{ id: "1", parentId: "0", context: contextOpen },
+				{ id: "2", parentId: "1", context: contextOpen },
+				{ id: "3", parentId: "1", context: contextOpen },
+				{ id: "4", parentId: "1", context: contextClosed },
+			],
+			"0",
+		),
+	).toEqual([
+		{ id: "1", parentId: "0", context: contextOpen },
+		{ id: "2", parentId: "1", context: contextOpen },
+		{ id: "3", parentId: "1", context: contextOpen },
+	]);
+});
diff --git a/packages/floating-ui-svelte/test/unit/internal/mark-others.test.ts b/packages/floating-ui-svelte/test/unit/internal/mark-others.test.ts
new file mode 100644
index 00000000..29c4f696
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/internal/mark-others.test.ts
@@ -0,0 +1,114 @@
+import { afterEach, expect, it } from "vitest";
+import { markOthers } from "../../../src/internal/mark-others.js";
+
+afterEach(() => {
+	document.body.innerHTML = "";
+});
+
+it("single call", () => {
+	const other = document.createElement("div");
+	document.body.appendChild(other);
+	const target = document.createElement("div");
+	document.body.appendChild(target);
+
+	const cleanup = markOthers([target], true);
+
+	expect(other.getAttribute("aria-hidden")).toBe("true");
+
+	cleanup();
+
+	expect(other.getAttribute("aria-hidden")).toBe(null);
+});
+
+it("multiple calls", () => {
+	const other = document.createElement("div");
+	document.body.appendChild(other);
+	const target = document.createElement("div");
+	document.body.appendChild(target);
+
+	const cleanup = markOthers([target], true);
+
+	expect(other.getAttribute("aria-hidden")).toBe("true");
+
+	const nextTarget = document.createElement("div");
+	document.body.appendChild(nextTarget);
+
+	const nextCleanup = markOthers([nextTarget], true);
+
+	expect(target.getAttribute("aria-hidden")).toBe("true");
+	expect(nextTarget.getAttribute("aria-hidden")).toBe(null);
+
+	document.body.removeChild(nextTarget);
+
+	nextCleanup();
+
+	expect(target.getAttribute("aria-hidden")).toBe(null);
+	expect(other.getAttribute("aria-hidden")).toBe("true");
+
+	cleanup();
+
+	expect(other.getAttribute("aria-hidden")).toBe(null);
+
+	document.body.appendChild(nextTarget);
+});
+
+it("out of order cleanup", () => {
+	const other = document.createElement("div");
+	document.body.appendChild(other);
+	const target = document.createElement("div");
+	target.setAttribute("data-testid", "");
+	document.body.appendChild(target);
+
+	const cleanup = markOthers([target], true);
+
+	expect(other.getAttribute("aria-hidden")).toBe("true");
+
+	const nextTarget = document.createElement("div");
+	document.body.appendChild(nextTarget);
+
+	const nextCleanup = markOthers([nextTarget], true);
+
+	expect(target.getAttribute("aria-hidden")).toBe("true");
+	expect(nextTarget.getAttribute("aria-hidden")).toBe(null);
+
+	cleanup();
+
+	expect(nextTarget.getAttribute("aria-hidden")).toBe(null);
+	expect(target.getAttribute("aria-hidden")).toBe("true");
+	expect(other.getAttribute("aria-hidden")).toBe("true");
+
+	nextCleanup();
+
+	expect(nextTarget.getAttribute("aria-hidden")).toBe(null);
+	expect(other.getAttribute("aria-hidden")).toBe(null);
+	expect(target.getAttribute("aria-hidden")).toBe(null);
+});
+
+it("multiple cleanups with differing controlAttribute", () => {
+	const other = document.createElement("div");
+	document.body.appendChild(other);
+	const target = document.createElement("div");
+	target.setAttribute("data-testid", "1");
+	document.body.appendChild(target);
+
+	const cleanup = markOthers([target], true);
+
+	expect(other.getAttribute("aria-hidden")).toBe("true");
+
+	const target2 = document.createElement("div");
+	target.setAttribute("data-testid", "2");
+	document.body.appendChild(target2);
+
+	const cleanup2 = markOthers([target2]);
+
+	expect(target.getAttribute("aria-hidden")).not.toBe("true");
+	expect(target.getAttribute("data-floating-ui-inert")).toBe("");
+
+	cleanup();
+
+	expect(other.getAttribute("aria-hidden")).toBe(null);
+
+	cleanup2();
+
+	expect(target.getAttribute("data-floating-ui-inert")).toBe(null);
+});
diff --git a/packages/floating-ui-svelte/test/unit/setup.ts b/packages/floating-ui-svelte/test/unit/setup.ts
new file mode 100644
index 00000000..8bc2e4bb
--- /dev/null
+++ b/packages/floating-ui-svelte/test/unit/setup.ts
@@ -0,0 +1,38 @@
+import "@testing-library/jest-dom/vitest";
+
+HTMLElement.prototype.inert = true;
+
+global.ResizeObserver = require("resize-observer-polyfill");
+
+class PointerEvent extends MouseEvent {
+	public isPrimary: boolean;
+	public pointerId: number;
+	public pointerType: string;
+	public height: number;
+	public width: number;
+	public tiltX: number;
+	public tiltY: number;
+	public twist: number;
+	public pressure: number;
+	public tangentialPressure: number;
+
+	constructor(type: string, params: PointerEventInit = {}) {
+		super(type, params);
+
+		// Using defaults from W3C specs:
+		// https://w3c.github.io/pointerevents/#pointerevent-interface
+		this.isPrimary = params.isPrimary ?? false;
+		this.pointerId = params.pointerId ?? 0;
+		this.pointerType = params.pointerType ?? "";
+		this.width = params.width ?? 1;
+		this.height = params.height ?? 1;
+		this.tiltX = params.tiltX ?? 0;
+		this.tiltY = params.tiltY ?? 0;
+		this.twist = params.twist ?? 0;
+		this.pressure = params.pressure ?? 0;
+		this.tangentialPressure = params.tangentialPressure ?? 0;
+	}
+}
+
+global.PointerEvent =
+	global.PointerEvent ?? (PointerEvent as typeof globalThis.PointerEvent);
diff --git a/packages/floating-ui-svelte/test/utils.d.ts b/packages/floating-ui-svelte/test/utils.d.ts
new file mode 100644
index 00000000..c503768a
--- /dev/null
+++ b/packages/floating-ui-svelte/test/utils.d.ts
@@ -0,0 +1,49 @@
+declare function sleep(ms?: number): Promise<unknown>;
+/**
+ * A wrapper around the internal kbd object to make it easier to use in tests
+ * which require the key names to be wrapped in curly braces.
+ */
+declare const testKbd: {
+    SHIFT_TAB: string;
+    k: string;
+    a: string;
+    p: string;
+    F1: string;
+    F10: string;
+    F11: string;
+    F12: string;
+    F2: string;
+    F3: string;
+    F4: string;
+    F5: string;
+    F6: string;
+    F7: string;
+    F8: string;
+    F9: string;
+    P: string;
+    A: string;
+    n: string;
+    j: string;
+    ALT: string;
+    ARROW_DOWN: string;
+    ARROW_LEFT: string;
+    ARROW_RIGHT: string;
+    ARROW_UP: string;
+    BACKSPACE: string;
+    CAPS_LOCK: string;
+    CONTROL: string;
+    DELETE: string;
+    END: string;
+    ENTER: string;
+    ESCAPE: string;
+    HOME: string;
+    META: string;
+    PAGE_DOWN: string;
+    PAGE_UP: string;
+    SHIFT: string;
+    SPACE: string;
+    TAB: string;
+    CTRL: string;
+    ASTERISK: string;
+};
+export { testKbd, sleep };
diff --git a/packages/floating-ui-svelte/test/utils.ts b/packages/floating-ui-svelte/test/utils.ts
new file mode 100644
index 00000000..17f8e22b
--- /dev/null
+++ b/packages/floating-ui-svelte/test/utils.ts
@@ -0,0 +1,70 @@
+function sleep(ms = 0) {
+	return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+type KbdKeys = keyof typeof kbd;
+const kbd = {
+	ALT: "Alt",
+	ARROW_DOWN: "ArrowDown",
+	ARROW_LEFT: "ArrowLeft",
+	ARROW_RIGHT: "ArrowRight",
+	ARROW_UP: "ArrowUp",
+	BACKSPACE: "Backspace",
+	CAPS_LOCK: "CapsLock",
+	CONTROL: "Control",
+	DELETE: "Delete",
+	END: "End",
+	ENTER: "Enter",
+	ESCAPE: "Escape",
+	F1: "F1",
+	F10: "F10",
+	F11: "F11",
+	F12: "F12",
+	F2: "F2",
+	F3: "F3",
+	F4: "F4",
+	F5: "F5",
+	F6: "F6",
+	F7: "F7",
+	F8: "F8",
+	F9: "F9",
+	HOME: "Home",
+	META: "Meta",
+	PAGE_DOWN: "PageDown",
+	PAGE_UP: "PageUp",
+	SHIFT: "Shift",
+	SPACE: " ",
+	TAB: "Tab",
+	CTRL: "Control",
+	ASTERISK: "*",
+	a: "a",
+	P: "P",
+	A: "A",
+	p: "p",
+	n: "n",
+	j: "j",
+	k: "k",
+};
+
+function getTestKbd() {
+	const initTestKbd: Record<KbdKeys, string> = Object.entries(kbd).reduce(
+		(acc, [key, value]) => {
+			acc[key as KbdKeys] = `{${value}}`;
+			return acc;
+		},
+		{} as Record<KbdKeys, string>,
+	);
+
+	return {
+		...initTestKbd,
+		SHIFT_TAB: `{Shift>}{${kbd.TAB}}`,
+	};
+}
+
+/**
+ * A wrapper around the internal kbd object to make it easier to use in tests
+ * which require the key names to be wrapped in curly braces.
+ */
+const testKbd = getTestKbd();
+
+export { testKbd, sleep };
diff --git a/packages/floating-ui-svelte/test/visual/app.css b/packages/floating-ui-svelte/test/visual/app.css
new file mode 100644
index 00000000..963a6edc
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/app.css
@@ -0,0 +1,13 @@
+@import "tailwindcss";
+
+button {
+	@apply cursor-default;
+  }
+
+  .scrollbar-none::-webkit-scrollbar {
+	display: none;
+  }
+  .scrollbar-none {
+	-ms-overflow-style: none; /* IE and Edge */
+	scrollbar-width: none; /* Firefox */
+  }
diff --git a/packages/floating-ui-svelte/test/visual/app.d.ts b/packages/floating-ui-svelte/test/visual/app.d.ts
new file mode 100644
index 00000000..743f07b2
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/app.d.ts
@@ -0,0 +1,13 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};
diff --git a/packages/floating-ui-svelte/test/visual/app.html b/packages/floating-ui-svelte/test/visual/app.html
new file mode 100644
index 00000000..f22aeaad
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/app.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div>%sveltekit.body%</div>
+	</body>
+</html>
diff --git a/packages/floating-ui-svelte/test/visual/components/arrow/demo.svelte b/packages/floating-ui-svelte/test/visual/components/arrow/demo.svelte
new file mode 100644
index 00000000..52f9bceb
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/components/arrow/demo.svelte
@@ -0,0 +1,81 @@
+<script lang="ts">
+	import type { Placement } from "@floating-ui/utils";
+	import type { ComponentProps, Snippet } from "svelte";
+	import FloatingArrow from "../../../../src/components/floating-arrow.svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { Middleware } from "@floating-ui/dom";
+	import { useFloating } from "../../../../src/index.js";
+	import { arrow, autoUpdate, offset } from "@floating-ui/dom";
+	import { mergeStyles } from "../../../../src/internal/style-object-to-string.js";
+	import type { PropertiesHyphen } from "csstype";
+
+	let {
+		placement: placementProp,
+		arrowProps,
+		middleware,
+		floatingProps,
+		floatingStyle,
+		children,
+	}: {
+		placement?: Placement;
+		arrowProps?: Partial<ComponentProps<typeof FloatingArrow>>;
+		floatingStyle?: PropertiesHyphen;
+		floatingProps?: HTMLAttributes<HTMLDivElement>;
+		middleware?: Array<Middleware>;
+		children?: Snippet;
+	} = $props();
+
+	let open = $state(true);
+
+	let arrowRef: SVGSVGElement = $state(null!);
+
+	const f = useFloating({
+		placement: () => placementProp,
+		open: () => open,
+		onOpenChange: (v) => {
+			open = v;
+		},
+		whileElementsMounted: autoUpdate,
+		middleware: () => [
+			offset(8),
+			...(middleware ?? []),
+			arrow({ element: arrowRef }),
+		],
+	});
+
+	const edgeAlignment = $derived(placementProp?.split("-")[1]);
+</script>
+
+<div>
+	<span
+		bind:this={f.elements.reference}
+		style="background: royalblue; padding: 5; color: white;">
+		{f.placement}
+	</span>
+	{#if open}
+		<div
+			bind:this={f.elements.floating}
+			class="bg-black text-white p-2 bg-clip-padding"
+			{...floatingProps}
+			style={mergeStyles(
+				{
+					visibility: f.middlewareData.hide?.referenceHidden
+						? "hidden"
+						: "visible",
+				},
+				f.floatingStyles,
+				floatingStyle
+			)}>
+			{#if children}
+				{@render children?.()}
+			{:else}
+				Tooltip
+			{/if}
+			<FloatingArrow
+				context={f.context}
+				bind:ref={arrowRef}
+				staticOffset={edgeAlignment ? "15%" : null}
+				{...arrowProps} />
+		</div>
+	{/if}
+</div>
diff --git a/packages/floating-ui-svelte/test/visual/components/autocomplete/autocomplete-item.svelte b/packages/floating-ui-svelte/test/visual/components/autocomplete/autocomplete-item.svelte
new file mode 100644
index 00000000..218d6cce
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/components/autocomplete/autocomplete-item.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithRef } from "../../../../src/types.js";
+	import c from "clsx";
+
+	let {
+		ref = $bindable(),
+		active,
+		children,
+		...rest
+	}: Required<WithRef> &
+		HTMLAttributes<HTMLDivElement> & { active: boolean } = $props();
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div
+	bind:this={ref}
+	tabindex={-1}
+	class={c("p-2 cursor-default", {
+		"bg-blue-500 text-white": active,
+	})}
+	{...rest}>
+	{@render children?.()}
+</div>
diff --git a/packages/floating-ui-svelte/test/visual/components/autocomplete/main.svelte b/packages/floating-ui-svelte/test/visual/components/autocomplete/main.svelte
new file mode 100644
index 00000000..1b3e9390
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/components/autocomplete/main.svelte
@@ -0,0 +1,257 @@
+<script lang="ts" module>
+	export const data = [
+		"Alfalfa Sprouts",
+		"Apple",
+		"Apricot",
+		"Artichoke",
+		"Asian Pear",
+		"Asparagus",
+		"Atemoya",
+		"Avocado",
+		"Bamboo Shoots",
+		"Banana",
+		"Bean Sprouts",
+		"Beans",
+		"Beets",
+		"Belgian Endive",
+		"Bell Peppers",
+		"Bitter Melon",
+		"Blackberries",
+		"Blueberries",
+		"Bok Choy",
+		"Boniato",
+		"Boysenberries",
+		"Broccoflower",
+		"Broccoli",
+		"Brussels Sprouts",
+		"Cabbage",
+		"Cactus Pear",
+		"Cantaloupe",
+		"Carambola",
+		"Carrots",
+		"Casaba Melon",
+		"Cauliflower",
+		"Celery",
+		"Chayote",
+		"Cherimoya",
+		"Cherries",
+		"Coconuts",
+		"Collard Greens",
+		"Corn",
+		"Cranberries",
+		"Cucumber",
+		"Dates",
+		"Dried Plums",
+		"Eggplant",
+		"Endive",
+		"Escarole",
+		"Feijoa",
+		"Fennel",
+		"Figs",
+		"Garlic",
+		"Gooseberries",
+		"Grapefruit",
+		"Grapes",
+		"Green Beans",
+		"Green Onions",
+		"Greens",
+		"Guava",
+		"Hominy",
+		"Honeydew Melon",
+		"Horned Melon",
+		"Iceberg Lettuce",
+		"Jerusalem Artichoke",
+		"Jicama",
+		"Kale",
+		"Kiwifruit",
+		"Kohlrabi",
+		"Kumquat",
+		"Leeks",
+		"Lemons",
+		"Lettuce",
+		"Lima Beans",
+		"Limes",
+		"Longan",
+		"Loquat",
+		"Lychee",
+		"Madarins",
+		"Malanga",
+		"Mandarin Oranges",
+		"Mangos",
+		"Mulberries",
+		"Mushrooms",
+		"Napa",
+		"Nectarines",
+		"Okra",
+		"Onion",
+		"Oranges",
+		"Papayas",
+		"Parsnip",
+		"Passion Fruit",
+		"Peaches",
+		"Pears",
+		"Peas",
+		"Peppers",
+		"Persimmons",
+		"Pineapple",
+		"Plantains",
+		"Plums",
+		"Pomegranate",
+		"Potatoes",
+		"Prickly Pear",
+		"Prunes",
+		"Pummelo",
+		"Pumpkin",
+		"Quince",
+		"Radicchio",
+		"Radishes",
+		"Raisins",
+		"Raspberries",
+		"Red Cabbage",
+		"Rhubarb",
+		"Romaine Lettuce",
+		"Rutabaga",
+		"Shallots",
+		"Snow Peas",
+		"Spinach",
+		"Sprouts",
+		"Squash",
+		"Strawberries",
+		"String Beans",
+		"Sweet Potato",
+		"Tangelo",
+		"Tangerines",
+		"Tomatillo",
+		"Tomato",
+		"Turnip",
+		"Ugli Fruit",
+		"Water Chestnuts",
+		"Watercress",
+		"Watermelon",
+		"Waxed Beans",
+		"Yams",
+		"Yellow Squash",
+		"Yuca/Cassava",
+		"Zucchini Squash",
+	];
+</script>
+
+<script lang="ts">
+	import { autoUpdate, flip, offset, size } from "@floating-ui/dom";
+
+	import {
+		useDismiss,
+		useFloating,
+		useInteractions,
+		useListNavigation,
+		useRole,
+	} from "../../../../src/index.js";
+	import FloatingPortal from "../../../../src/components/floating-portal/floating-portal.svelte";
+	import FloatingFocusManager from "../../../../src/components/floating-focus-manager/floating-focus-manager.svelte";
+	import AutocompleteItem from "./autocomplete-item.svelte";
+
+	let open = $state(false);
+	let inputValue = $state("");
+	let activeIndex = $state<number | null>(null);
+
+	let listRef = $state<Array<HTMLElement | null>>([]);
+
+	const f = useFloating<HTMLInputElement>({
+		whileElementsMounted: autoUpdate,
+		open: () => open,
+		onOpenChange: (v) => (open = v),
+		middleware: [
+			offset(5),
+			flip({ padding: 10 }),
+			size({
+				apply({ rects, elements, availableHeight }) {
+					Object.assign(elements.floating.style, {
+						width: `${rects.reference.width}px`,
+						maxHeight: `${availableHeight}px`,
+					});
+				},
+				padding: 10,
+			}),
+		],
+	});
+
+	const ints = useInteractions([
+		useRole(f.context, { role: "combobox" }),
+		useDismiss(f.context),
+		useListNavigation(f.context, {
+			listRef: () => listRef,
+			activeIndex: () => activeIndex,
+			onNavigate: (v) => (activeIndex = v),
+			virtual: true,
+			loop: true,
+			allowEscape: true,
+		}),
+	]);
+
+	const filteredItems = $derived(
+		data.filter((item) =>
+			item.toLowerCase().startsWith(inputValue.toLowerCase())
+		)
+	);
+</script>
+
+<h1 class="text-5xl font-bold mb-8">Autocomplete</h1>
+<div
+	class="grid place-items-center border border-slate-400 rounded lg:w-[40rem] h-[20rem] mb-4">
+	<input
+		bind:this={f.elements.reference}
+		bind:value={() => inputValue,
+		(v) => {
+			inputValue = v;
+			if (!open) {
+				open = true;
+			}
+		}}
+		class="border-2 p-2 rounded border-slate-300 focus:border-blue-500 outline-none"
+		placeholder="Enter fruit"
+		aria-autocomplete="list"
+		{...ints.getReferenceProps({
+			onkeydown: (event: KeyboardEvent) => {
+				if (
+					event.key === "Enter" &&
+					activeIndex != null &&
+					filteredItems[activeIndex]
+				) {
+					inputValue = filteredItems[activeIndex];
+					activeIndex = null;
+					open = false;
+				}
+			},
+		})} />
+	{#if open}
+		<FloatingPortal>
+			<FloatingFocusManager
+				context={f.context}
+				initialFocus={-1}
+				visuallyHiddenDismiss>
+				<div
+					bind:this={f.elements.floating}
+					class="bg-slate-100 rounded overflow-y-auto"
+					style={f.floatingStyles}
+					{...ints.getFloatingProps()}>
+					{#each filteredItems as item, index (item)}
+						<AutocompleteItem
+							bind:ref={() => listRef[index],
+							(v) => (listRef[index] = v)}
+							{...ints.getItemProps({
+								active: activeIndex === index,
+								onclick() {
+									inputValue = item;
+									open = false;
+									f.elements.domReference?.focus();
+								},
+							})}
+							active={activeIndex === index}>
+							{item}
+						</AutocompleteItem>
+					{/each}
+				</div>
+			</FloatingFocusManager>
+		</FloatingPortal>
+	{/if}
+</div>
diff --git a/packages/floating-ui-svelte/test/visual/components/button.svelte b/packages/floating-ui-svelte/test/visual/components/button.svelte
new file mode 100644
index 00000000..a6addfdc
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/components/button.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { HTMLButtonAttributes } from "svelte/elements";
+	import type { WithRef } from "../../../src/types.js";
+	import cn from "clsx";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...rest
+	}: HTMLButtonAttributes & Partial<WithRef<Element>> = $props();
+</script>
+
+<button
+	{...rest}
+	bind:this={ref}
+	class={cn(
+		className,
+		"bg-slate-200/90 rounded p-2 px-3 transition-colors hover:bg-slate-200/50 data-[open]:bg-slate-200/50"
+	)}>
+	{@render children?.()}
+</button>
diff --git a/packages/floating-ui-svelte/test/visual/components/complex-grid/main.svelte b/packages/floating-ui-svelte/test/visual/components/complex-grid/main.svelte
new file mode 100644
index 00000000..4068f09b
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/components/complex-grid/main.svelte
@@ -0,0 +1,113 @@
+<script lang="ts">
+	import FloatingFocusManager from "../../../../src/components/floating-focus-manager/floating-focus-manager.svelte";
+	import {
+		useClick,
+		useFloating,
+		useInteractions,
+		useListNavigation,
+	} from "../../../../src/index.js";
+	import {
+		mergeStyles,
+		styleObjectToString,
+	} from "../../../../src/internal/style-object-to-string.js";
+
+	/*
+	 * Grid diagram for reference:
+	 * Disabled indices marked with ()
+	 *
+	 * (0)  (1)  (1)  (2)  (3)  (4)  (5)
+	 * (6)   7    8   (9)  10   11   12
+	 * 13  (14)  15   16   17   18   19
+	 * 20   20   21   21   21   21   21
+	 * 20   20   22  (23) (23) (23)  24
+	 * 25   26   27   28   29   29   30
+	 * 31   32   33   34   29   29  (35)
+	 * 36   36
+	 */
+	let {
+		orientation = "horizontal",
+		loop = false,
+		rtl = false,
+	}: {
+		orientation?: "horizontal" | "both";
+		loop?: boolean;
+		rtl?: boolean;
+	} = $props();
+
+	let open = $state(false);
+	let activeIndex = $state<number | null>(null);
+	let listRef = $state<Array<HTMLElement | null>>([]);
+
+	const f = useFloating({
+		open: () => open,
+		onOpenChange: (v) => (open = v),
+		placement: "bottom-start",
+	});
+
+	const disabledIndices = [0, 1, 2, 3, 4, 5, 6, 9, 14, 23, 35];
+
+	const itemSizes = Array.from(Array(37), () => ({ width: 1, height: 1 }));
+	itemSizes[1].width = 2;
+	itemSizes[20].width = 2;
+	itemSizes[20].height = 2;
+	itemSizes[21].width = 5;
+	itemSizes[23].width = 3;
+	itemSizes[29].width = 2;
+	itemSizes[29].height = 2;
+	itemSizes[36].width = 2;
+
+	const ints = useInteractions([
+		useClick(f.context),
+		useListNavigation(f.context, {
+			listRef: () => listRef,
+			activeIndex: () => activeIndex,
+			onNavigate: (v) => (activeIndex = v),
+			cols: 7,
+			orientation,
+			loop,
+			rtl,
+			openOnArrowKeyDown: false,
+			disabledIndices,
+			itemSizes,
+		}),
+	]);
+</script>
+
+<h1>Complex Grid</h1>
+<div class="container">
+	<button bind:this={f.elements.reference} {...ints.getReferenceProps()}>
+		Reference
+	</button>
+	{#if open}
+		<FloatingFocusManager context={f.context}>
+			<div
+				bind:this={f.elements.floating}
+				data-testid="floating"
+				class="grid gap-2"
+				style={mergeStyles(f.floatingStyles, {
+					display: "grid",
+					"grid-template-columns":
+						"100px 100px 100px 100px 100px 100px 100px",
+					"z-index": 999,
+				})}
+				{...ints.getFloatingProps()}>
+				{#each { length: 37 } as _, index (index)}
+					<button
+						role="option"
+						aria-selected={activeIndex === index}
+						tabindex={activeIndex === index ? 0 : -1}
+						disabled={disabledIndices.includes(index)}
+						bind:this={listRef[index]}
+						class="border border-black disabled:opacity-20"
+						style={styleObjectToString({
+							"grid-row": `span ${itemSizes[index].height}`,
+							"grid-column": `span ${itemSizes[index].width}`,
+						})}
+						{...ints.getItemProps()}>
+						Item {index}
+					</button>
+				{/each}
+			</div>
+		</FloatingFocusManager>
+	{/if}
+</div>
diff --git a/packages/floating-ui-svelte/test/visual/components/drawer/drawer.svelte b/packages/floating-ui-svelte/test/visual/components/drawer/drawer.svelte
new file mode 100644
index 00000000..7dc34ee8
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/components/drawer/drawer.svelte
@@ -0,0 +1,96 @@
+<script lang="ts">
+	import {
+		useClick,
+		useDismiss,
+		useFloating,
+		useId,
+		useInteractions,
+		useRole,
+		type Boxed,
+	} from "../../../../src/index.js";
+	import FloatingFocusManager from "../../../../src/components/floating-focus-manager/floating-focus-manager.svelte";
+	import type { Snippet } from "svelte";
+	import { box } from "../../../../src/internal/box.svelte.js";
+	import FloatingPortal from "../../../../src/components/floating-portal/floating-portal.svelte";
+	import FloatingOverlay from "../../../../src/components/floating-overlay.svelte";
+	import type { ReferenceSnippetProps } from "../../types.js";
+	import { MediaQuery } from "svelte/reactivity";
+
+	let {
+		reference,
+		content,
+	}: {
+		reference: Snippet<ReferenceSnippetProps>;
+		content: Snippet<
+			[{ labelId: string; descriptionId: string; close: () => void }]
+		>;
+	} = $props();
+
+	let open = $state(false);
+
+	const ref = box<Element | null>(null);
+
+	const isLargeScreen = new MediaQuery("min-width: 1400px");
+
+	const f = useFloating({
+		elements: {
+			reference: () => ref.current,
+		},
+		onReferenceChange: (v) => {
+			ref.current = v;
+		},
+		open: () => open,
+		onOpenChange: (v) => {
+			open = v;
+		},
+	});
+
+	const id = useId();
+
+	const labelId = `${id}-label`;
+	const descriptionId = `${id}-description`;
+
+	const modal = $derived(!isLargeScreen);
+
+	const ints = useInteractions([
+		useClick(f.context),
+		useRole(f.context),
+		useDismiss(f.context, {
+			outsidePress: () => modal,
+			outsidePressEvent: "mousedown",
+		}),
+	]);
+</script>
+
+{#snippet Content()}
+	<FloatingFocusManager context={f.context} {modal} closeOnFocusOut={modal}>
+		<div
+			bind:this={f.elements.floating}
+			aria-labelledby={labelId}
+			aria-describedby={descriptionId}
+			class="absolute top-0 right-0 h-full w-48 bg-slate-100 p-4"
+			{...ints.getFloatingProps()}>
+			{@render content({
+				labelId,
+				descriptionId,
+				close: () => (open = false),
+			})}
+		</div>
+	</FloatingFocusManager>
+{/snippet}
+
+{@render reference?.(ref, ints.getReferenceProps())}
+
+{#if open}
+	<FloatingPortal id="drawer-root">
+		{#if modal}
+			<FloatingOverlay
+				lockScroll
+				style="background: rgba(0, 0, 0, 0.8); z-index: 1;">
+				{@render Content()}
+			</FloatingOverlay>
+		{:else}
+			{@render Content()}
+		{/if}
+	</FloatingPortal>
+{/if}
diff --git a/packages/floating-ui-svelte/test/visual/components/drawer/main.svelte b/packages/floating-ui-svelte/test/visual/components/drawer/main.svelte
new file mode 100644
index 00000000..38cb823d
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/components/drawer/main.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import Button from "../../../visual/components/button.svelte";
+	import Drawer from "./drawer.svelte";
+</script>
+
+<h1 class="text-5xl font-bold mb-8">Drawer</h1>
+<div
+	class="grid place-items-center border border-slate-400 rounded lg:w-[40rem] h-[20rem] mb-4">
+	<Drawer>
+		{#snippet reference(ref, props)}
+			<Button bind:ref={ref.current} {...props}>My button</Button>
+		{/snippet}
+		{#snippet content({ labelId, descriptionId, close })}
+			<h2 id={labelId} class="text-xl font-bold">Title</h2>
+			<p id={descriptionId}>Description</p>
+			<Button class="bg-white mt-4" onclick={close}>Close</Button>
+		{/snippet}
+	</Drawer>
+	<Button>Next button</Button>
+	<div id="drawer-root"></div>
+</div>
diff --git a/packages/floating-ui-svelte/test/visual/components/emoji-picker/main.svelte b/packages/floating-ui-svelte/test/visual/components/emoji-picker/main.svelte
new file mode 100644
index 00000000..ad917d99
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/components/emoji-picker/main.svelte
@@ -0,0 +1,236 @@
+<script lang="ts" module>
+	const emojis = [
+		{
+			name: "apple",
+			emoji: "🍎",
+		},
+		{
+			name: "orange",
+			emoji: "🍊",
+		},
+		{
+			name: "watermelon",
+			emoji: "🍉",
+		},
+		{
+			name: "strawberry",
+			emoji: "🍓",
+		},
+		{
+			name: "pear",
+			emoji: "🍐",
+		},
+		{
+			name: "banana",
+			emoji: "🍌",
+		},
+		{
+			name: "pineapple",
+			emoji: "🍍",
+		},
+		{
+			name: "cherry",
+			emoji: "🍒",
+		},
+		{
+			name: "peach",
+			emoji: "🍑",
+		},
+	];
+</script>
+
+<script lang="ts">
+	import type { Placement } from "@floating-ui/utils";
+	import {
+		useClick,
+		useDismiss,
+		useFloating,
+		useId,
+		useInteractions,
+		useListNavigation,
+		useRole,
+	} from "../../../../src/index.js";
+	import { arrow, autoUpdate, flip, offset } from "@floating-ui/dom";
+	import type { KeyboardEventHandler } from "svelte/elements";
+	import Button from "../button.svelte";
+	import FloatingPortal from "../../../../src/components/floating-portal/floating-portal.svelte";
+	import FloatingFocusManager from "../../../../src/components/floating-focus-manager/floating-focus-manager.svelte";
+	import FloatingArrow from "../../../../src/components/floating-arrow.svelte";
+	import Option from "./option.svelte";
+
+	let open = $state(false);
+	let search = $state("");
+	let selectedEmoji = $state<string | null>(null);
+	let activeIndex = $state<number | null>(null);
+	let placement = $state<Placement | null>(null);
+
+	let arrowEl: HTMLElement = $state(null)!;
+	let listRef = $state<Array<HTMLElement | null>>([]);
+
+	const noResultsId = useId();
+
+	const f = useFloating({
+		placement: () => placement ?? "bottom-start",
+		open: () => open,
+		onOpenChange: (v) => (open = v),
+		middleware: () =>
+			// We don't want flipping to occur while searching, as the floating element
+			// will resize and cause disorientation.
+			[
+				offset(8),
+				...(placement ? [] : [flip()]),
+				arrow({
+					element: arrowEl,
+					padding: 20,
+				}),
+			],
+		whileElementsMounted: autoUpdate,
+	});
+
+	// Handles opening the floating element via the Choose Emoji button.
+	const openInts = useInteractions([
+		useClick(f.context),
+		useDismiss(f.context),
+		useRole(f.context, { role: "menu" }),
+	]);
+
+	const listInts = useInteractions([
+		useListNavigation(f.context, {
+			listRef: () => listRef,
+			// I don't think its possible to do open ? (index) => activeIndex = index : undefined
+			// because this wouldn't react to the open state.
+			// We don't have a way to discriminate between getters and regular functions, so we
+			// need to leave this up to the user to handle within the function?
+			onNavigate: (index) => {
+				if (open) {
+					activeIndex = index;
+				}
+			},
+			activeIndex: () => activeIndex,
+			cols: 3,
+			orientation: "horizontal",
+			loop: true,
+			focusItemOnOpen: false,
+			virtual: true,
+			allowEscape: true,
+		}),
+	]);
+
+	$effect(() => {
+		if (open) {
+			placement = f.placement;
+		} else {
+			search = "";
+			activeIndex = null;
+			placement = null;
+		}
+	});
+
+	const filteredEmojis = $derived(
+		emojis.filter(({ name }) =>
+			name.toLocaleLowerCase().includes(search.toLocaleLowerCase())
+		)
+	);
+
+	function handleEmojiClick() {
+		if (activeIndex !== null) {
+			selectedEmoji = filteredEmojis[activeIndex].emoji;
+			open = false;
+		}
+	}
+
+	const handleKeyDown: KeyboardEventHandler<HTMLElement> = (event) => {
+		if (event.key === "Enter") {
+			handleEmojiClick();
+		}
+	};
+</script>
+
+<h1 class="text-5xl font-bold mb-8">Emoji Picker</h1>
+<div
+	class="grid place-items-center border border-slate-400 rounded lg:w-[40rem] h-[20rem] mb-4">
+	<div class="text-center">
+		<Button
+			bind:ref={f.elements.reference}
+			class="text-2xl"
+			aria-label="Choose emoji"
+			aria-describedby="emoji-label"
+			data-open={open ? "" : undefined}
+			{...openInts.getReferenceProps()}>
+			☻
+		</Button>
+		<br />
+		{#if selectedEmoji}
+			<span id="emoji-label">
+				<span
+					style="font-size: 30;"
+					aria-label={emojis.find(
+						({ emoji }) => emoji === selectedEmoji
+					)?.name}>
+					{selectedEmoji}
+				</span>{" "}
+				selected
+			</span>
+		{/if}
+		{#if open}
+			<FloatingPortal>
+				<FloatingFocusManager context={f.context} modal={false}>
+					<div
+						bind:this={f.elements.floating}
+						class="bg-white/70 backdrop-blur-sm border border-slate-900/10 shadow-md rounded-lg p-4 bg-clip-padding"
+						style={f.floatingStyles}
+						{...openInts.getFloatingProps(
+							listInts.getFloatingProps()
+						)}>
+						<FloatingArrow
+							bind:ref={arrowEl}
+							context={f.context}
+							fill="white"
+							stroke="rgba(0,0,0,0.1)"
+							strokeWidth={1}
+							height={8}
+							tipRadius={1} />
+						<span class="opacity-40 text-sm uppercase">
+							Emoji Picker
+						</span>
+						<input
+							class="block w-36 my-2 p-1 border border-slate-300 outline-none focus:border-blue-600 rounded"
+							placeholder="Search emoji"
+							bind:value={search}
+							aria-controls={filteredEmojis.length === 0
+								? noResultsId
+								: undefined}
+							{...listInts.getReferenceProps({
+								onkeydown: handleKeyDown,
+							})} />
+						{#if filteredEmojis.length === 0}
+							<p
+								id={noResultsId}
+								role="region"
+								aria-atomic="true"
+								aria-live="assertive">
+								No results.
+							</p>
+						{:else}
+							<div class="grid grid-cols-3" role="listbox">
+								{#each filteredEmojis as { name, emoji }, index (name)}
+									<Option
+										{name}
+										bind:ref={listRef[index]}
+										selected={selectedEmoji === emoji}
+										active={activeIndex === index}
+										{index}
+										{...listInts.getItemProps({
+											onclick: handleEmojiClick,
+										})}>
+										{emoji}
+									</Option>
+								{/each}
+							</div>
+						{/if}
+					</div>
+				</FloatingFocusManager>
+			</FloatingPortal>
+		{/if}
+	</div>
+</div>
diff --git a/packages/floating-ui-svelte/test/visual/components/emoji-picker/option.svelte b/packages/floating-ui-svelte/test/visual/components/emoji-picker/option.svelte
new file mode 100644
index 00000000..43ee578e
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/components/emoji-picker/option.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+	import type { HTMLButtonAttributes } from "svelte/elements";
+	import { useId, type WithRef } from "../../../../src/index.js";
+	import c from "clsx";
+
+	let {
+		id = useId(),
+		name,
+		children,
+		active,
+		selected,
+		ref = $bindable(),
+		index,
+		...rest
+	}: HTMLButtonAttributes & {
+		name: string;
+		active: boolean;
+		selected: boolean;
+		index: number;
+	} & WithRef<HTMLElement> = $props();
+</script>
+
+<button
+	{...rest}
+	bind:this={ref}
+	{id}
+	role="option"
+	class={c(
+		"rounded text-3xl text-center cursor-default select-none aspect-square",
+		{
+			"bg-cyan-100": selected && !active,
+			"bg-cyan-200": active,
+			"opacity-40": name === "orange",
+		}
+	)}
+	aria-selected={selected}
+	disabled={name === "orange"}
+	aria-label={name}
+	tabindex={-1}
+	data-index={index}
+	data-active={active ? "" : undefined}>
+	{@render children?.()}
+</button>
diff --git a/packages/floating-ui-svelte/test/visual/components/grid/main.svelte b/packages/floating-ui-svelte/test/visual/components/grid/main.svelte
new file mode 100644
index 00000000..99273706
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/components/grid/main.svelte
@@ -0,0 +1,78 @@
+<script lang="ts">
+	import FloatingFocusManager from "../../../../src/components/floating-focus-manager/floating-focus-manager.svelte";
+	import {
+		useClick,
+		useDismiss,
+		useFloating,
+		useInteractions,
+		useListNavigation,
+	} from "../../../../src/index.js";
+	import { mergeStyles } from "../../../../src/internal/style-object-to-string.js";
+
+	let {
+		orientation = "horizontal",
+		loop = false,
+	}: { orientation?: "horizontal" | "both"; loop?: boolean } = $props();
+
+	let open = $state(false);
+	let activeIndex = $state<number | null>(null);
+
+	let listRef = $state<Array<HTMLElement | null>>([]);
+
+	const f = useFloating({
+		open: () => open,
+		onOpenChange: (v) => (open = v),
+		placement: "bottom-start",
+	});
+
+	const disabledIndices = [0, 1, 2, 3, 4, 5, 6, 7, 10, 15, 45, 48];
+
+	const ints = useInteractions([
+		useClick(f.context),
+		useListNavigation(f.context, {
+			listRef: () => listRef,
+			activeIndex: () => activeIndex,
+			onNavigate: (v) => (activeIndex = v),
+			cols: 5,
+			orientation: () => orientation,
+			loop: () => loop,
+			openOnArrowKeyDown: false,
+			disabledIndices,
+		}),
+		useDismiss(f.context),
+	]);
+</script>
+
+<h1>Grid</h1>
+<div class="container">
+	<button bind:this={f.elements.reference} {...ints.getReferenceProps()}>
+		Reference
+	</button>
+	{#if open}
+		<FloatingFocusManager context={f.context}>
+			<div
+				role="menu"
+				bind:this={f.elements.floating}
+				data-testid="floating"
+				class="grid gap-2"
+				style={mergeStyles(f.floatingStyles, {
+					"grid-template-columns": "100px 100px 100px 100px 100px",
+					"z-index": 999,
+				})}
+				{...ints.getFloatingProps()}>
+				{#each { length: 49 } as _, index (index)}
+					<button
+						role="option"
+						aria-selected={activeIndex === index}
+						tabindex={activeIndex === index ? 0 : -1}
+						disabled={disabledIndices.includes(index)}
+						bind:this={listRef[index]}
+						class="border border-black disabled:opacity-20"
+						{...ints.getItemProps()}>
+						Item {index}
+					</button>
+				{/each}
+			</div>
+		</FloatingFocusManager>
+	{/if}
+</div>
diff --git a/packages/floating-ui-svelte/test/visual/components/listbox-focus/context.ts b/packages/floating-ui-svelte/test/visual/components/listbox-focus/context.ts
new file mode 100644
index 00000000..1e8e7f30
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/components/listbox-focus/context.ts
@@ -0,0 +1,11 @@
+import type { useInteractions } from "../../../../src/index.js";
+import { Context } from "../../../../src/internal/context.js";
+
+export interface SelectContextValue {
+	activeIndex: number | null;
+	selectedIndex: number | null;
+	getItemProps: ReturnType<typeof useInteractions>["getItemProps"];
+	handleSelect: (index: number | null) => void;
+}
+
+export const SelectContext = new Context<SelectContextValue>("SelectContext");
diff --git a/packages/floating-ui-svelte/test/visual/components/listbox-focus/listbox.svelte b/packages/floating-ui-svelte/test/visual/components/listbox-focus/listbox.svelte
new file mode 100644
index 00000000..470b75da
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/components/listbox-focus/listbox.svelte
@@ -0,0 +1,71 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import {
+		useFloating,
+		useInteractions,
+		useListNavigation,
+		useRole,
+		useTypeahead,
+	} from "../../../../src/index.js";
+	import { SelectContext } from "./context.js";
+	import FloatingList from "../../../../src/components/floating-list/floating-list.svelte";
+
+	let { children }: { children: Snippet } = $props();
+
+	let activeIndex = $state<number | null>(1);
+	let selectedIndex = $state<number | null>(null);
+
+	const f = useFloating({
+		open: true,
+	});
+
+	let elements = $state<Array<HTMLElement | null>>([]);
+	let labels = $state<Array<string>>([]);
+
+	function handleSelect(index: number | null) {
+		selectedIndex = index;
+	}
+
+	function handleTypeaheadMatch(index: number | null) {
+		activeIndex = index;
+	}
+
+	const listNav = useListNavigation(f.context, {
+		listRef: () => elements,
+		activeIndex: () => activeIndex,
+		selectedIndex: () => selectedIndex,
+		onNavigate: (v) => (activeIndex = v),
+		focusItemOnHover: false,
+	});
+
+	const typeahead = useTypeahead(f.context, {
+		listRef: () => labels,
+		activeIndex: () => activeIndex,
+		selectedIndex: () => selectedIndex,
+		onMatch: handleTypeaheadMatch,
+	});
+
+	const role = useRole(f.context, { role: "listbox" });
+
+	const ints = useInteractions([listNav, typeahead, role]);
+
+	SelectContext.set({
+		get activeIndex() {
+			return activeIndex;
+		},
+		get selectedIndex() {
+			return selectedIndex;
+		},
+		getItemProps: ints.getItemProps,
+		handleSelect,
+	});
+</script>
+
+<button onclick={() => (selectedIndex = 1)} data-testid="reference">
+	Select
+</button>
+<div bind:this={f.elements.floating} {...ints.getFloatingProps()}>
+	<FloatingList bind:elements {labels}>
+		{@render children?.()}
+	</FloatingList>
+</div>
diff --git a/packages/floating-ui-svelte/test/visual/components/listbox-focus/main.svelte b/packages/floating-ui-svelte/test/visual/components/listbox-focus/main.svelte
new file mode 100644
index 00000000..54cf6a36
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/components/listbox-focus/main.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import Listbox from "./listbox.svelte";
+	import Option from "./option.svelte";
+</script>
+
+<Listbox>
+	<Option label="Apple" />
+	<Option label="Blueberry" />
+	<Option label="Watermelon" />
+	<Option label="Banana" />
+</Listbox>
diff --git a/packages/floating-ui-svelte/test/visual/components/listbox-focus/option.svelte b/packages/floating-ui-svelte/test/visual/components/listbox-focus/option.svelte
new file mode 100644
index 00000000..b2c8fa97
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/components/listbox-focus/option.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { useListItem } from "../../../../src/components/floating-list/hooks.svelte.js";
+	import { styleObjectToString } from "../../../../src/internal/style-object-to-string.js";
+	import { SelectContext } from "./context.js";
+
+	let { label }: { label: string } = $props();
+
+	const ctx = SelectContext.get();
+
+	const listItem = useListItem({
+		label: () => label,
+	});
+
+	const isActive = $derived(ctx.activeIndex === listItem.index);
+	const isSelected = $derived(ctx.selectedIndex === listItem.index);
+
+	const isFocusable = $derived(
+		ctx.activeIndex !== null
+			? isActive
+			: ctx.selectedIndex !== null
+				? isSelected
+				: listItem.index === 0
+	);
+</script>
+
+<button
+	bind:this={listItem.ref}
+	role="option"
+	aria-selected={isActive && isSelected}
+	tabindex={isFocusable ? 0 : -1}
+	style={styleObjectToString({
+		background: isActive ? "cyan" : "",
+		"font-weight": isSelected ? "bold" : "",
+	})}
+	{...ctx.getItemProps({
+		onclick: () => ctx.handleSelect(listItem.index),
+	})}>
+	{label}
+</button>
diff --git a/packages/floating-ui-svelte/test/visual/components/menu-virtual/main.svelte b/packages/floating-ui-svelte/test/visual/components/menu-virtual/main.svelte
new file mode 100644
index 00000000..d20baee9
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/components/menu-virtual/main.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { box } from "../../../../src/internal/box.svelte.js";
+	import MenuItem from "./menu-item.svelte";
+	import Menu from "./menu.svelte";
+
+	let virtualItemRef = box<HTMLElement | null>(null);
+</script>
+
+<h1 class="text-5xl font-bold mb-8">Menu Virtual</h1>
+<div
+	class="grid place-items-center border border-slate-400 rounded lg:w-[40rem] h-[20rem] mb-4">
+	<Menu label="Edit" {virtualItemRef}>
+		<MenuItem label="Undo" onclick={() => console.log("Undo")} />
+		<MenuItem label="Redo" />
+		<MenuItem label="Cut" disabled />
+		<Menu label="Copy as" {virtualItemRef}>
+			<MenuItem label="Text" />
+			<MenuItem label="Video" />
+			<Menu label="Image" {virtualItemRef}>
+				<MenuItem label=".png" />
+				<MenuItem label=".jpg" />
+				<MenuItem label=".svg" />
+				<MenuItem label=".gif" />
+			</Menu>
+			<MenuItem label="Audio" />
+		</Menu>
+		<Menu label="Share" {virtualItemRef}>
+			<MenuItem label="Mail" />
+			<MenuItem label="Instagram" />
+		</Menu>
+	</Menu>
+</div>
diff --git a/packages/floating-ui-svelte/test/visual/components/menu-virtual/menu-impl.svelte b/packages/floating-ui-svelte/test/visual/components/menu-virtual/menu-impl.svelte
new file mode 100644
index 00000000..8f71ab18
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/components/menu-virtual/menu-impl.svelte
@@ -0,0 +1,283 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { Boxed } from "../../../../src/types.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import {
+		safePolygon,
+		useDismiss,
+		useFloating,
+		useFloatingNodeId,
+		useFloatingParentNodeId,
+		useFloatingTree,
+		useHover,
+		useId,
+		useInteractions,
+		useListNavigation,
+		useRole,
+	} from "../../../../src/index.js";
+	import { useListItem } from "../../../../src/components/floating-list/hooks.svelte.js";
+	import { autoUpdate, flip, offset, shift } from "@floating-ui/dom";
+	import { on } from "svelte/events";
+	import { box } from "../../../../src/internal/box.svelte.js";
+	import type { WithRef } from "../../../../src/types.js";
+	import FloatingNode from "../../../../src/components/floating-tree/floating-node.svelte";
+
+	interface MenuProps {
+		label: string;
+		nested?: boolean;
+		children?: Snippet;
+		virtualItemRef: Boxed<HTMLElement | null>;
+	}
+	export type { MenuProps };
+</script>
+
+<script lang="ts">
+	import ChevronRight from "lucide-svelte/icons/chevron-right";
+	import c from "clsx";
+	import MenuContextProvider, {
+		MenuContext,
+		type MenuContextType,
+	} from "../menu/menu-context-provider.svelte";
+	import FloatingList from "../../../../src/components/floating-list/floating-list.svelte";
+	import FloatingPortal from "../../../../src/components/floating-portal/floating-portal.svelte";
+	import FloatingFocusManager from "../../../../src/components/floating-focus-manager/floating-focus-manager.svelte";
+	let {
+		children,
+		label,
+		virtualItemRef,
+		ref = $bindable(null),
+		...rest
+	}: MenuProps & HTMLAttributes<HTMLElement> & WithRef = $props();
+
+	let open = $state(false);
+	let activeIndex = $state<number | null>(null);
+	let allowHover = $state(false);
+	let hasFocusInside = $state(false);
+
+	let elements = $state<Array<HTMLElement | null>>([]);
+	let labels = $state<Array<string>>([]);
+
+	const tree = useFloatingTree();
+	const nodeId = useFloatingNodeId();
+	const parentId = useFloatingParentNodeId();
+	const isNested = parentId != null;
+
+	const parent = MenuContext.getOr({
+		getItemProps: () => ({}),
+		activeIndex: null,
+		setHasFocusInside: () => {},
+		allowHover: true,
+		open: false,
+		parent: null,
+	} satisfies MenuContextType);
+
+	const item = useListItem();
+
+	const f = useFloating({
+		nodeId,
+		open: () => open,
+		onOpenChange: (v) => (open = v),
+		placement: isNested ? "right-start" : "bottom-start",
+		middleware: [
+			offset({
+				mainAxis: isNested ? 0 : 4,
+				alignmentAxis: isNested ? -4 : 0,
+			}),
+			flip(),
+			shift(),
+		],
+		whileElementsMounted: autoUpdate,
+	});
+
+	const hover = useHover(f.context, {
+		enabled: () => isNested && allowHover,
+		delay: { open: 75 },
+		handleClose: safePolygon({ blockPointerEvents: true }),
+	});
+
+	const role = useRole(f.context, { role: "listbox" });
+	const dismiss = useDismiss(f.context, { bubbles: true });
+	const listNav = useListNavigation(f.context, {
+		listRef: () => elements,
+		activeIndex: () => activeIndex,
+		nested: isNested,
+		onNavigate: (v) => (activeIndex = v),
+		virtual: true,
+		virtualItemRef,
+	});
+
+	const ints = useInteractions([hover, role, dismiss, listNav]);
+	function handleTreeClick() {
+		open = false;
+	}
+
+	function onSubMenuOpen(event: { nodeId: string; parentId: string }) {
+		if (event.nodeId !== nodeId && event.parentId === parentId) {
+			open = false;
+		}
+	}
+
+	$effect(() => {
+		if (!tree) return;
+
+		tree.events.on("click", handleTreeClick);
+		tree.events.on("open", onSubMenuOpen);
+
+		return () => {
+			tree.events.off("click", handleTreeClick);
+			tree.events.off("open", onSubMenuOpen);
+		};
+	});
+
+	$effect(() => {
+		if (open && tree) {
+			tree.events.emit("menuopen", { parentId, nodeId });
+		}
+	});
+	function onPointerMove({ pointerType }: PointerEvent) {
+		if (pointerType !== "touch") {
+			allowHover = true;
+		}
+	}
+
+	function onKeyDown() {
+		allowHover = false;
+	}
+	// Determine if "hover" logic can run based on the modality of input. This
+	// prevents unwanted focus synchronization as menus open and close with
+	// keyboard navigation and the cursor is resting on the menu.
+	$effect(() => {
+		const removePointerMove = on(window, "pointermove", onPointerMove, {
+			once: true,
+			capture: true,
+		});
+		const removeKeyDown = on(window, "keydown", onKeyDown, {
+			capture: true,
+		});
+
+		return () => {
+			removePointerMove();
+			removeKeyDown();
+		};
+	});
+
+	const id = useId();
+
+	const mergedReference = box.with(
+		() => ref,
+		(v) => {
+			ref = v;
+			f.elements.reference = v;
+			item.ref = v;
+		}
+	);
+</script>
+
+<FloatingNode id={nodeId}>
+	{#if isNested}
+		<!-- svelte-ignore a11y_role_supports_aria_props -->
+		<div
+			{id}
+			bind:this={mergedReference.current}
+			data-open={open ? "" : undefined}
+			tabindex={-1}
+			role="menuitem"
+			aria-autocomplete="list"
+			class={c(
+				rest.class ||
+					"text-left flex gap-4 justify-between items-center rounded py-1 px-2 cursor-default",
+				{
+					"bg-red-500 text-white": parent.activeIndex === item.index,
+					"focus:bg-red-500 outline-none": isNested,
+					"bg-red-100 text-red-900":
+						open && isNested && !hasFocusInside,
+					"bg-red-100 rounded py-1 px-2":
+						isNested && open && hasFocusInside,
+				}
+			)}
+			{...ints.getReferenceProps({
+				...parent.getItemProps({
+					...rest,
+					onfocus(
+						event: FocusEvent & { currentTarget: HTMLElement }
+					) {
+						rest.onfocus?.(event);
+						hasFocusInside = false;
+						parent.setHasFocusInside(true);
+					},
+					onmouseenter(
+						event: MouseEvent & { currentTarget: HTMLElement }
+					) {
+						rest.onmouseenter?.(event);
+						if (parent.allowHover && parent.open) {
+							parent.activeIndex = item.index;
+						}
+					},
+				}),
+			})}>
+			{label}
+			<span aria-hidden="true" class="ml-4">
+				<ChevronRight />
+			</span>
+		</div>
+	{:else}
+		<!-- svelte-ignore a11y_role_has_required_aria_props -->
+		<input
+			class="border border-slate-500"
+			bind:this={mergedReference.current}
+			{id}
+			data-open={open ? "" : undefined}
+			tabindex={isNested ? -1 : 0}
+			role="combobox"
+			aria-autocomplete="list"
+			{...ints.getReferenceProps({
+				onkeydown(event: KeyboardEvent) {
+					if (event.key === " " || event.key === "Enter") {
+						// console.log("clicked", virtualItemRef.current);
+					}
+				},
+			})} />
+	{/if}
+	<MenuContextProvider
+		value={{
+			get activeIndex() {
+				return activeIndex;
+			},
+			set activeIndex(v: number | null) {
+				activeIndex = v;
+			},
+			getItemProps: ints.getItemProps,
+			setHasFocusInside: (v: boolean) => {
+				hasFocusInside = v;
+			},
+			get allowHover() {
+				return allowHover;
+			},
+			get open() {
+				return open;
+			},
+			set open(v: boolean) {
+				open = v;
+			},
+			parent,
+		}}>
+		<FloatingList bind:elements {labels}>
+			{#if open}
+				<FloatingPortal>
+					<FloatingFocusManager
+						context={f.context}
+						initialFocus={-1}
+						returnFocus={!isNested}>
+						<div
+							bind:this={f.elements.floating}
+							class="flex flex-col rounded bg-white shadow-lg outline-none p-1 border border-slate-900/10 bg-clip-padding"
+							style={f.floatingStyles}
+							{...ints.getFloatingProps()}>
+							{@render children?.()}
+						</div>
+					</FloatingFocusManager>
+				</FloatingPortal>
+			{/if}
+		</FloatingList>
+	</MenuContextProvider>
+</FloatingNode>
diff --git a/packages/floating-ui-svelte/test/visual/components/menu-virtual/menu-item.svelte b/packages/floating-ui-svelte/test/visual/components/menu-virtual/menu-item.svelte
new file mode 100644
index 00000000..4cde32e3
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/components/menu-virtual/menu-item.svelte
@@ -0,0 +1,91 @@
+<script lang="ts" module>
+	interface MenuItemProps {
+		label: string;
+		disabled?: boolean;
+	}
+</script>
+
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import c from "clsx";
+	import type { WithRef } from "../../../../src/types.js";
+	import { useListItem } from "../../../../src/components/floating-list/hooks.svelte.js";
+	import { useFloatingTree, useId } from "../../../../src/index.js";
+	import { box } from "../../../../src/internal/box.svelte.js";
+	import {
+		MenuContext,
+		type MenuContextType,
+	} from "../menu/menu-context-provider.svelte";
+
+	let {
+		label,
+		disabled,
+		ref = $bindable(null),
+		...rest
+	}: WithRef & MenuItemProps & HTMLAttributes<HTMLElement> = $props();
+
+	const menu = MenuContext.get();
+	const item = useListItem({ label: () => (disabled ? null : label) });
+	const tree = useFloatingTree();
+	const isActive = $derived(item.index === menu.activeIndex);
+	const id = useId();
+
+	const mergedRef = box.with(
+		() => ref,
+		(v) => {
+			item.ref = v;
+			ref = v;
+		}
+	);
+</script>
+
+<div
+	{...rest}
+	{id}
+	bind:this={mergedRef.current}
+	role="option"
+	tabindex={-1}
+	aria-selected={isActive}
+	aria-disabled={disabled}
+	class={c(
+		"text-left flex py-1 px-2 focus:bg-red-500 outline-none rounded cursor-default",
+		{ "opacity-40": disabled },
+		isActive && "bg-red-500 text-white"
+	)}
+	{...menu.getItemProps({
+		onclick(event: MouseEvent & { currentTarget: HTMLElement }) {
+			rest.onclick?.(event);
+			tree?.events.emit("click");
+		},
+		onfocus(event: FocusEvent & { currentTarget: HTMLElement }) {
+			rest.onfocus?.(event);
+			menu.setHasFocusInside(true);
+		},
+		onmouseenter(event: MouseEvent & { currentTarget: HTMLElement }) {
+			rest.onmouseenter?.(event);
+			if (menu.allowHover && menu.open) {
+				menu.activeIndex = item.index;
+			}
+		},
+		onkeydown(event: KeyboardEvent & { currentTarget: HTMLElement }) {
+			function closeParents(parent: MenuContextType | null) {
+				if (!parent) return;
+				parent.open = false;
+				if (parent?.parent) {
+					closeParents(parent.parent);
+				}
+			}
+
+			if (
+				event.key === "ArrowRight" &&
+				// If the root reference is in a menubar, close parents
+				tree?.nodes[0].context?.elements.domReference?.closest(
+					'[role="menubar"]'
+				)
+			) {
+				closeParents(menu.parent);
+			}
+		},
+	})}>
+	{label}
+</div>
diff --git a/packages/floating-ui-svelte/test/visual/components/menu-virtual/menu.svelte b/packages/floating-ui-svelte/test/visual/components/menu-virtual/menu.svelte
new file mode 100644
index 00000000..e7bcde61
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/components/menu-virtual/menu.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithRef } from "../../../../src/types.js";
+	import type { MenuProps } from "./menu-impl.svelte";
+	import { useFloatingParentNodeId } from "../../../../src/index.js";
+	import FloatingTree from "../../../../src/components/floating-tree/floating-tree.svelte";
+	import MenuImpl from "./menu-impl.svelte";
+
+	let {
+		ref = $bindable(null),
+		...rest
+	}: MenuProps & WithRef & HTMLAttributes<HTMLElement> = $props();
+
+	const parentId = useFloatingParentNodeId();
+</script>
+
+{#if parentId === null}
+	<FloatingTree>
+		<MenuImpl {...rest} bind:ref />
+	</FloatingTree>
+{:else}
+	<MenuImpl {...rest} bind:ref />
+{/if}
diff --git a/packages/floating-ui-svelte/test/visual/components/menu-virtual/virtual-nested.svelte b/packages/floating-ui-svelte/test/visual/components/menu-virtual/virtual-nested.svelte
new file mode 100644
index 00000000..9d4de753
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/components/menu-virtual/virtual-nested.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { box } from "../../../../src/internal/box.svelte.js";
+	import MenuItem from "./menu-item.svelte";
+	import Menu from "./menu.svelte";
+
+	const ref = box<HTMLElement | null>(null);
+</script>
+
+<div data-testid="value">
+	{ref.current?.getAttribute("data-testid")}
+</div>
+
+<Menu label="Edit" virtualItemRef={ref}>
+	<MenuItem label="Undo" />
+	<MenuItem label="Redo" />
+	<Menu label="Copy as" data-testid="copy" virtualItemRef={ref}>
+		<MenuItem label="Text" />
+		<MenuItem label="Video" />
+		<Menu label="Image" virtualItemRef={ref}>
+			<MenuItem label=".png" />
+			<MenuItem label=".jpg" />
+			<MenuItem label=".svg" />
+			<MenuItem label=".gif" />
+		</Menu>
+		<MenuItem label="Audio" />
+	</Menu>
+	<Menu label="Share" virtualItemRef={ref}>
+		<MenuItem label="Mail" />
+		<MenuItem label="Instagram" />
+	</Menu>
+</Menu>
diff --git a/packages/floating-ui-svelte/test/visual/components/menu/main.svelte b/packages/floating-ui-svelte/test/visual/components/menu/main.svelte
new file mode 100644
index 00000000..06869cc9
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/components/menu/main.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import MenuItem from "./menu-item.svelte";
+	import Menu from "./menu.svelte";
+</script>
+
+<h1 class="text-5xl font-bold mb-8">Menu</h1>
+<div
+	class="grid place-items-center border border-slate-400 rounded lg:w-[40rem] h-[20rem] mb-4">
+	<Menu label="Edit" id="main-ref">
+		<MenuItem label="Undo" onclick={() => console.log("Undo")} />
+		<MenuItem label="Redo" />
+		<MenuItem label="Cut" disabled />
+		<Menu label="Copy as" forceMount id="copy-as-ref">
+			<MenuItem label="Text" />
+			<MenuItem label="Video" />
+			<Menu label="Image" forceMount id="image-ref">
+				<MenuItem label=".png" />
+				<MenuItem label=".jpg" />
+				<MenuItem label=".svg" />
+				<MenuItem label=".gif" />
+			</Menu>
+			<MenuItem label="Audio" />
+		</Menu>
+		<Menu label="Share">
+			<MenuItem label="Mail" />
+			<MenuItem label="Instagram" />
+		</Menu>
+	</Menu>
+</div>
diff --git a/packages/floating-ui-svelte/test/visual/components/menu/menu-context-provider.svelte b/packages/floating-ui-svelte/test/visual/components/menu/menu-context-provider.svelte
new file mode 100644
index 00000000..ec791349
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/components/menu/menu-context-provider.svelte
@@ -0,0 +1,24 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { useInteractions } from "../../../../src/index.js";
+	import { Context } from "../../../../src/internal/context.js";
+
+	export type MenuContextType = {
+		getItemProps: ReturnType<typeof useInteractions>["getItemProps"];
+		activeIndex: number | null;
+		setHasFocusInside: (curr: boolean) => void;
+		allowHover: boolean;
+		open: boolean;
+		parent: MenuContextType | null;
+	};
+
+	export const MenuContext = new Context<MenuContextType>("MenuContext");
+</script>
+
+<script lang="ts">
+	let props: { value: MenuContextType; children: Snippet } = $props();
+
+	MenuContext.set(props.value);
+</script>
+
+{@render props.children?.()}
diff --git a/packages/floating-ui-svelte/test/visual/components/menu/menu-impl.svelte b/packages/floating-ui-svelte/test/visual/components/menu/menu-impl.svelte
new file mode 100644
index 00000000..867c5e73
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/components/menu/menu-impl.svelte
@@ -0,0 +1,284 @@
+<script lang="ts">
+	import type { HTMLButtonAttributes } from "svelte/elements";
+	import type { WithRef } from "../../../../src/types.js";
+	import type { MenuProps } from "./types.js";
+	import {
+		safePolygon,
+		useClick,
+		useDismiss,
+		useFloating,
+		useFloatingNodeId,
+		useFloatingParentNodeId,
+		useFloatingTree,
+		useHover,
+		useInteractions,
+		useListNavigation,
+		useRole,
+		useTypeahead,
+	} from "../../../../src/index.js";
+	import MenuContextProvider, {
+		MenuContext,
+		type MenuContextType,
+	} from "./menu-context-provider.svelte";
+	import { useListItem } from "../../../../src/components/floating-list/hooks.svelte.js";
+	import { autoUpdate, flip, offset, shift } from "@floating-ui/dom";
+	import { on } from "svelte/events";
+	import { executeCallbacks } from "../../../../src/internal/execute-callbacks.js";
+	import { watch } from "../../../../src/internal/watch.svelte.js";
+	import FloatingNode from "../../../../src/components/floating-tree/floating-node.svelte";
+	import { box } from "../../../../src/internal/box.svelte.js";
+	import c from "clsx";
+	import ChevronRight from "lucide-svelte/icons/chevron-right";
+	import FloatingList from "../../../../src/components/floating-list/floating-list.svelte";
+	import FloatingPortal from "../../../../src/components/floating-portal/floating-portal.svelte";
+	import FloatingFocusManager from "../../../../src/components/floating-focus-manager/floating-focus-manager.svelte";
+	import { mergeStyles } from "../../../../src/internal/style-object-to-string.js";
+
+	let {
+		children,
+		label,
+		forceMount = false,
+		ref = $bindable(null),
+		class: className,
+		floatingId,
+		...rest
+	}: MenuProps &
+		WithRef<HTMLElement> &
+		HTMLButtonAttributes & { floatingId?: string } = $props();
+
+	let open = $state(false);
+	let activeIndex = $state<number | null>(null);
+	let allowHover = $state(false);
+	let hasFocusInside = $state(false);
+
+	let elements = $state<Array<HTMLElement | null>>([]);
+	let labels = $state<Array<string>>([]);
+
+	const tree = useFloatingTree();
+	const nodeId = useFloatingNodeId();
+	const parentId = useFloatingParentNodeId();
+	const isNested = parentId !== null;
+
+	const parent = MenuContext.getOr({
+		getItemProps: () => ({}),
+		activeIndex: null,
+		setHasFocusInside: () => {},
+		allowHover: true,
+		open: false,
+		parent: null,
+	} satisfies MenuContextType);
+
+	const item = useListItem();
+
+	const f = useFloating<HTMLButtonElement>({
+		nodeId,
+		floatingId,
+		open: () => open,
+		onOpenChange: (v) => (open = v),
+		placement: () => (isNested ? "right-start" : "bottom-start"),
+		middleware: [
+			offset({
+				mainAxis: isNested ? 0 : 4,
+				alignmentAxis: isNested ? -4 : 0,
+			}),
+			flip(),
+			shift(),
+		],
+		whileElementsMounted: autoUpdate,
+	});
+
+	const hover = useHover(f.context, {
+		enabled: () => isNested && allowHover,
+		delay: { open: 75 },
+		handleClose: safePolygon({
+			blockPointerEvents: true,
+		}),
+	});
+
+	const click = useClick(f.context, {
+		event: "mousedown",
+		toggle: () => !isNested || !allowHover,
+		ignoreMouse: () => isNested,
+	});
+
+	const role = useRole(f.context, { role: "menu" });
+	const dismiss = useDismiss(f.context, {
+		bubbles: true,
+	});
+	const listNav = useListNavigation(f.context, {
+		listRef: () => elements,
+		activeIndex: () => activeIndex,
+		nested: () => isNested,
+		onNavigate: (v) => (activeIndex = v),
+	});
+	const typeahead = useTypeahead(f.context, {
+		listRef: () => labels,
+		onMatch: (v) => {
+			if (open) {
+				activeIndex = v;
+			}
+		},
+		activeIndex: () => activeIndex,
+	});
+
+	const ints = useInteractions([
+		hover,
+		click,
+		role,
+		dismiss,
+		listNav,
+		typeahead,
+	]);
+
+	// Event emitter allows you to communicate across tree components.
+	// This effect closes all menus when an item gets clicked anywhere
+	// in the tree.
+	$effect(() => {
+		if (!tree) return;
+
+		function handleTreeClick() {
+			open = false;
+		}
+
+		function onSubMenuOpen(event: { nodeId: string; parentId: string }) {
+			if (event.nodeId !== nodeId && event.parentId === parentId) {
+				open = false;
+			}
+		}
+		return executeCallbacks(
+			tree.events.on("click", handleTreeClick),
+			tree.events.on("open", onSubMenuOpen)
+		);
+	});
+
+	// Determine if "hover" logic can run based on the modality of input. This
+	// prevents unwanted focus synchronization as menus open and close with
+	// keyboard navigation and the cursor is resting on the menu.
+	watch(
+		() => allowHover,
+		() => {
+			function onPointerMove({ pointerType }: PointerEvent) {
+				if (pointerType !== "touch") allowHover = true;
+			}
+
+			function onKeyDown() {
+				allowHover = false;
+			}
+
+			return executeCallbacks(
+				on(window, "pointermove", onPointerMove, {
+					once: true,
+					capture: true,
+				}),
+				on(window, "keydown", onKeyDown, { capture: true })
+			);
+		}
+	);
+
+	const mergedReference = box.with(
+		() => ref,
+		(v) => {
+			ref = v;
+			f.elements.reference = v;
+			item.ref = v;
+		}
+	);
+</script>
+
+<FloatingNode id={nodeId}>
+	<button
+		bind:this={mergedReference.current}
+		data-open={open ? "" : undefined}
+		tabindex={!isNested
+			? rest.tabindex
+			: parent.activeIndex === item.index
+				? 0
+				: -1}
+		class={c(
+			className ||
+				"text-left flex gap-4 justify-between items-center rounded py-1 px-2",
+			{
+				"focus:bg-blue-500 focus:text-white outline-none": isNested,
+				"bg-blue-500 text-white": open && isNested && !hasFocusInside,
+				"bg-slate-200 rounded py-1 px-2":
+					isNested && open && hasFocusInside,
+				"bg-slate-200": !isNested && open,
+			}
+		)}
+		{...ints.getReferenceProps({
+			...rest,
+			onfocus: (
+				event: FocusEvent & { currentTarget: HTMLButtonElement }
+			) => {
+				rest.onfocus?.(event);
+				hasFocusInside = false;
+				parent.setHasFocusInside(true);
+			},
+			onmouseenter: (
+				event: MouseEvent & { currentTarget: HTMLButtonElement }
+			) => {
+				rest.onmouseenter?.(event);
+				if (parent.allowHover && parent.open) {
+					parent.activeIndex = item.index;
+				}
+			},
+		})}>
+		{label}
+		{#if isNested}
+			<span aria-hidden="true" class="ml-4">
+				<ChevronRight />
+			</span>
+		{/if}
+	</button>
+	<MenuContextProvider
+		value={{
+			get activeIndex() {
+				return activeIndex;
+			},
+			set activeIndex(v: number | null) {
+				activeIndex = v;
+			},
+			getItemProps: (u) => ints.getItemProps(u),
+			setHasFocusInside: (v: boolean) => {
+				hasFocusInside = v;
+			},
+			get allowHover() {
+				return allowHover;
+			},
+			get open() {
+				return open;
+			},
+			set open(v: boolean) {
+				open = v;
+			},
+			parent,
+		}}>
+		<FloatingList bind:elements {labels}>
+			{#if forceMount || open}
+				<FloatingPortal>
+					<FloatingFocusManager
+						context={f.context}
+						modal={false}
+						initialFocus={isNested ? -1 : 0}
+						returnFocus={!isNested}>
+						<div
+							bind:this={f.elements.floating}
+							class="flex flex-col rounded bg-white shadow-lg outline-none p-1 border border-slate-900/10 bg-clip-padding"
+							style={mergeStyles(f.floatingStyles, {
+								visibility: !forceMount
+									? undefined
+									: open
+										? "visible"
+										: "hidden",
+							})}
+							aria-hidden={!open}
+							{...ints.getFloatingProps()}
+							id={floatingId}>
+							{@render children?.()}
+						</div>
+					</FloatingFocusManager>
+				</FloatingPortal>
+			{/if}
+		</FloatingList>
+	</MenuContextProvider>
+</FloatingNode>
diff --git a/packages/floating-ui-svelte/test/visual/components/menu/menu-item.svelte b/packages/floating-ui-svelte/test/visual/components/menu/menu-item.svelte
new file mode 100644
index 00000000..d4647894
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/components/menu/menu-item.svelte
@@ -0,0 +1,81 @@
+<script lang="ts">
+	import type { HTMLButtonAttributes } from "svelte/elements";
+	import {
+		MenuContext,
+		type MenuContextType,
+	} from "./menu-context-provider.svelte";
+	import { useListItem } from "../../../../src/components/floating-list/hooks.svelte.js";
+	import { useFloatingTree } from "../../../../src/index.js";
+	import c from "clsx";
+
+	interface MenuItemProps {
+		label: string;
+		disabled?: boolean;
+	}
+
+	let {
+		label,
+		disabled,
+		class: className,
+		...rest
+	}: MenuItemProps & HTMLButtonAttributes = $props();
+
+	const menu = MenuContext.get();
+	const item = useListItem({ label: () => (disabled ? null : label) });
+	const tree = useFloatingTree();
+	const isActive = $derived(item.index === menu.activeIndex);
+
+	type ButtonEvent<T> = T & { currentTarget: HTMLButtonElement };
+</script>
+
+<button
+	{...rest}
+	bind:this={item.ref}
+	type="button"
+	role="menuitem"
+	{disabled}
+	tabindex={isActive ? 0 : -1}
+	class={c(
+		"text-left flex py-1 px-2 focus:bg-blue-500 focus:text-white outline-none rounded",
+		{ "opacity-40": disabled },
+		className
+	)}
+	{...menu.getItemProps({
+		active: isActive,
+		onclick: (event: ButtonEvent<MouseEvent>) => {
+			rest.onclick?.(event);
+			tree?.events.emit("click");
+		},
+		onfocus: (event: ButtonEvent<FocusEvent>) => {
+			rest.onfocus?.(event);
+			menu.setHasFocusInside(true);
+		},
+		onmouseenter: (event: ButtonEvent<MouseEvent>) => {
+			rest.onmouseenter?.(event);
+			if (menu.allowHover && menu.open) {
+				menu.activeIndex = item.index;
+			}
+		},
+		onkeydown: (event: ButtonEvent<KeyboardEvent>) => {
+			function closeParents(parent: MenuContextType | null) {
+				if (parent) {
+					parent.open = false;
+				}
+				if (parent?.parent) {
+					closeParents(parent.parent);
+				}
+			}
+
+			if (
+				event.key === "ArrowRight" &&
+				// If the root reference is in a menubar, close parents
+				tree?.nodes[0].context?.elements.domReference?.closest(
+					'[role="menubar"]'
+				)
+			) {
+				closeParents(menu.parent);
+			}
+		},
+	})}>
+	{label}
+</button>
diff --git a/packages/floating-ui-svelte/test/visual/components/menu/menu.svelte b/packages/floating-ui-svelte/test/visual/components/menu/menu.svelte
new file mode 100644
index 00000000..dda1b7d3
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/components/menu/menu.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { HTMLButtonAttributes } from "svelte/elements";
+	import type { MenuProps } from "./types.js";
+	import {
+		useFloatingParentNodeId,
+		type WithRef,
+	} from "../../../../src/index.js";
+	import FloatingTree from "../../../../src/components/floating-tree/floating-tree.svelte";
+	import MenuImpl from "./menu-impl.svelte";
+
+	let {
+		ref = $bindable(null),
+		...rest
+	}: WithRef<HTMLElement> &
+		MenuProps &
+		HTMLButtonAttributes & { floatingId?: string } = $props();
+
+	const parentId = useFloatingParentNodeId();
+</script>
+
+{#if parentId === null}
+	<FloatingTree>
+		<MenuImpl {...rest} bind:ref />
+	</FloatingTree>
+{:else}
+	<MenuImpl {...rest} bind:ref />
+{/if}
+
+<!-- <DebugPolygon /> -->
diff --git a/packages/floating-ui-svelte/test/visual/components/menu/types.ts b/packages/floating-ui-svelte/test/visual/components/menu/types.ts
new file mode 100644
index 00000000..0f18ada1
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/components/menu/types.ts
@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+
+export interface MenuProps {
+	label: string;
+	nested?: boolean;
+	children?: Snippet;
+	forceMount?: boolean;
+}
diff --git a/packages/floating-ui-svelte/test/visual/components/menubar/main.svelte b/packages/floating-ui-svelte/test/visual/components/menubar/main.svelte
new file mode 100644
index 00000000..8616d473
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/components/menubar/main.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+	import CompositeItem from "../../../../src/components/composite/composite-item.svelte";
+	import Composite from "../../../../src/components/composite/composite.svelte";
+	import MenuItem from "../menu/menu-item.svelte";
+	import Menu from "../menu/menu.svelte";
+
+	let compositeRef = $state<HTMLDivElement | null>(null);
+	let compositeItemRef = $state<HTMLDivElement | null>(null);
+</script>
+
+<h1 class="text-5xl font-bold mb-8">Menubar</h1>
+<div
+	class="grid place-items-center border border-slate-400 rounded lg:w-[40rem] h-[20rem] mb-4">
+	<Composite class="grid grid-cols-3" cols={3} orientation="horizontal">
+		{#each { length: 9 } as _, i (i)}
+			<CompositeItem role="menuitem" class="focus:bg-gray-200 p-2">
+				Item {i + 1}
+			</CompositeItem>
+		{/each}
+	</Composite>
+</div>
+<div
+	class="grid place-items-center border border-slate-400 rounded lg:w-[40rem] h-[20rem] mb-4">
+	<Composite
+		class="flex"
+		ref={compositeRef}
+		role="menubar"
+		orientation="horizontal">
+		<CompositeItem role="menuitem" class="focus:bg-gray-200 p-2">
+			File
+		</CompositeItem>
+		<CompositeItem
+			role="menuitem"
+			ref={compositeItemRef}
+			class="focus:bg-gray-200 p-2 inline-block">
+			{#snippet render({ children, ...props }, ref)}
+				<div {...props} bind:this={ref.current}>
+					{@render children?.()}
+				</div>
+			{/snippet}
+			View
+		</CompositeItem>
+		<CompositeItem role="menuitem" class="focus:bg-gray-200 p-2">
+			{#snippet render(props, ref)}
+				<Menu label="Edit" {...props} bind:ref={ref.current}>
+					<MenuItem label=".jpg" />
+					<MenuItem label=".png" />
+					<MenuItem label=".gif" />
+					<Menu label="Submenu">
+						<MenuItem label="Second level" />
+						<Menu label="Open third level">
+							<MenuItem label="Third level" />
+						</Menu>
+					</Menu>
+				</Menu>
+			{/snippet}
+		</CompositeItem>
+		<CompositeItem role="menuitem" class="focus:bg-gray-200 p-2">
+			{#snippet render(props, ref)}
+				<select {...props} bind:this={ref.current}>
+					<option>Left</option>
+					<option>Center</option>
+					<option>Right</option>
+				</select>
+			{/snippet}
+			Align
+		</CompositeItem>
+	</Composite>
+</div>
diff --git a/packages/floating-ui-svelte/test/visual/components/navigation/main.svelte b/packages/floating-ui-svelte/test/visual/components/navigation/main.svelte
new file mode 100644
index 00000000..aa345fbc
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/components/navigation/main.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import NavigationItem from "./navigation-item.svelte";
+	import NavigationSubItem from "./navigation-sub-item.svelte";
+	import Navigation from "./navigation.svelte";
+</script>
+
+<h1 class="text-5xl font-bold mb-8">Navigation</h1>
+<div
+	class="grid place-items-center border border-slate-400 rounded lg:w-[40rem] h-[20rem] mb-4">
+	<Navigation>
+		<NavigationItem label="Home" href="#" />
+		<NavigationItem label="Product" href="#">
+			<NavigationSubItem label="Link 1" href="#" />
+			<NavigationSubItem label="Link 2" href="#" />
+			<NavigationSubItem label="Link 3" href="#" />
+		</NavigationItem>
+		<NavigationItem label="About" href="#" />
+	</Navigation>
+</div>
diff --git a/packages/floating-ui-svelte/test/visual/components/navigation/navigation-item.svelte b/packages/floating-ui-svelte/test/visual/components/navigation/navigation-item.svelte
new file mode 100644
index 00000000..8475de06
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/components/navigation/navigation-item.svelte
@@ -0,0 +1,98 @@
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from "svelte/elements";
+	import {
+		safePolygon,
+		useDismiss,
+		useFloating,
+		useFloatingNodeId,
+		useFocus,
+		useHover,
+		useInteractions,
+	} from "../../../../src/index.js";
+	import { flip, offset, shift } from "@floating-ui/dom";
+	import FloatingNode from "../../../../src/components/floating-tree/floating-node.svelte";
+	import FloatingPortal from "../../../../src/components/floating-portal/floating-portal.svelte";
+	import FloatingFocusManager from "../../../../src/components/floating-focus-manager/floating-focus-manager.svelte";
+
+	let {
+		label,
+		href,
+		children,
+		...restProps
+	}: Omit<HTMLAnchorAttributes, "href"> & {
+		label: string;
+		href: string;
+	} = $props();
+
+	let open = $state(false);
+	const hasChildren = $derived(!!children);
+
+	const nodeId = useFloatingNodeId();
+
+	const f = useFloating<HTMLAnchorElement>({
+		open: () => open,
+		onOpenChange: (v) => {
+			open = v;
+		},
+		nodeId,
+		middleware: [offset(8), flip(), shift()],
+		placement: "right-start",
+	});
+
+	const ints = useInteractions([
+		useHover(f.context, {
+			handleClose: safePolygon(),
+			enabled: () => hasChildren,
+		}),
+		useFocus(f.context, {
+			enabled: () => hasChildren,
+		}),
+		useDismiss(f.context, {
+			enabled: () => hasChildren,
+		}),
+	]);
+</script>
+
+<FloatingNode id={nodeId}>
+	<li>
+		<a
+			{href}
+			bind:this={f.elements.reference}
+			class="w-48 bg-slate-100 p-2 rounded my-1 flex justify-between items-center"
+			{...ints.getReferenceProps(restProps)}>
+			{label}
+			{#if hasChildren}
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width="32"
+					height="32"
+					viewBox="0 0 15 15"
+					><path
+						fill="currentColor"
+						fill-rule="evenodd"
+						d="M6.158 3.135a.5.5 0 0 1 .707.023l3.75 4a.5.5 0 0 1 0 .684l-3.75 4a.5.5 0 1 1-.73-.684L9.566 7.5l-3.43-3.658a.5.5 0 0 1 .023-.707"
+						clip-rule="evenodd" /></svg>
+			{/if}
+		</a>
+	</li>
+	{#if open}
+		<FloatingPortal>
+			<FloatingFocusManager
+				context={f.context}
+				modal={false}
+				initialFocus={-1}>
+				<div
+					data-testid="subnavigation"
+					bind:this={f.elements.floating}
+					class="flex flex-col bg-slate-100 overflow-y-auto rounded outline-none px-4 py-2 backdrop-blur-sm"
+					style={f.floatingStyles}
+					{...ints.getFloatingProps()}>
+					<button type="button" onclick={() => (open = false)}>
+						Close
+					</button>
+					<ul class="flex flex-col">{@render children?.()}</ul>
+				</div>
+			</FloatingFocusManager>
+		</FloatingPortal>
+	{/if}
+</FloatingNode>
diff --git a/packages/floating-ui-svelte/test/visual/components/navigation/navigation-sub-item.svelte b/packages/floating-ui-svelte/test/visual/components/navigation/navigation-sub-item.svelte
new file mode 100644
index 00000000..eff06244
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/components/navigation/navigation-sub-item.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from "svelte/elements";
+
+	let {
+		label,
+		href,
+		...restProps
+	}: Omit<HTMLAnchorAttributes, "href" | "children"> & {
+		label: string;
+		href: string;
+	} = $props();
+</script>
+
+<a {href} {...restProps} class="NavigationItem">
+	{label}
+</a>
diff --git a/packages/floating-ui-svelte/test/visual/components/navigation/navigation.svelte b/packages/floating-ui-svelte/test/visual/components/navigation/navigation.svelte
new file mode 100644
index 00000000..89ec72f6
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/components/navigation/navigation.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	let { children }: { children: Snippet } = $props();
+</script>
+
+<nav class="Navigation">
+	<ul class="NavigationList">{@render children?.()}</ul>
+</nav>
diff --git a/packages/floating-ui-svelte/test/visual/components/new/main.svelte b/packages/floating-ui-svelte/test/visual/components/new/main.svelte
new file mode 100644
index 00000000..73e68e6a
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/components/new/main.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import DismissNestedDialog from "../../../unit/hooks/wrapper-components/use-dismiss/dismiss-nested-dialog.svelte";
+
+	let {
+		outsidePress = [false, false],
+	}: { outsidePress?: [boolean, boolean] } = $props();
+</script>
+
+<DismissNestedDialog testId="outer" capture={{ outsidePress: false }}>
+	<DismissNestedDialog
+		testId="inner"
+		capture={{
+			outsidePress: false,
+		}}>
+		<button>test button</button>
+	</DismissNestedDialog>
+</DismissNestedDialog>
diff --git a/packages/floating-ui-svelte/test/visual/components/omnibox/context.ts b/packages/floating-ui-svelte/test/visual/components/omnibox/context.ts
new file mode 100644
index 00000000..6f355167
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/components/omnibox/context.ts
@@ -0,0 +1,12 @@
+import type { useInteractions } from "../../../../src/index.js";
+import { Context } from "../../../../src/internal/context.js";
+
+interface SelectContextValue {
+	activeIndex: number | null;
+	getItemProps: ReturnType<typeof useInteractions>["getItemProps"];
+}
+
+const SelectContext = new Context<SelectContextValue>("SelectContext");
+
+export { SelectContext };
+export type { SelectContextValue };
diff --git a/packages/floating-ui-svelte/test/visual/components/omnibox/main.svelte b/packages/floating-ui-svelte/test/visual/components/omnibox/main.svelte
new file mode 100644
index 00000000..1ab5c3cf
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/components/omnibox/main.svelte
@@ -0,0 +1,171 @@
+<script lang="ts">
+	import { autoUpdate, flip, offset, size } from "@floating-ui/dom";
+	import {
+		useDismiss,
+		useFloating,
+		useFocus,
+		useInteractions,
+		useListNavigation,
+		useRole,
+	} from "../../../../src/index.js";
+	import FloatingFocusManager from "../../../../src/components/floating-focus-manager/floating-focus-manager.svelte";
+	import FloatingList from "../../../../src/components/floating-list/floating-list.svelte";
+	import { SelectContext } from "./context.js";
+	import SearchOption from "./search-option.svelte";
+
+	let open = $state(false);
+	let activeIndex = $state<number | null>(null);
+	let isFocusEnabled = $state(true);
+
+	let options = $state(["svelte", "floating-ui", "skeleton-ui", "bits-ui"]);
+
+	let removedIndex = null;
+
+	const f = useFloating<HTMLInputElement>({
+		open: () => open,
+		onOpenChange: (v) => (open = v),
+		whileElementsMounted: autoUpdate,
+		middleware: [
+			offset(2),
+			flip({ padding: 15 }),
+			size({
+				apply({ availableHeight, elements, rects }) {
+					Object.assign(elements.floating.style, {
+						width: `${rects.reference.width}px`,
+						maxHeight: `${availableHeight}px`,
+					});
+				},
+				padding: 15,
+			}),
+		],
+	});
+
+	let elements = $state<Array<HTMLElement | null>>([]);
+
+	const hasOptions = $derived(options.length > 0);
+
+	const focus = useFocus(f.context, {
+		enabled: () => hasOptions && isFocusEnabled,
+	});
+
+	const dismiss = useDismiss(f.context);
+
+	const role = useRole(f.context, {
+		enabled: () => hasOptions,
+		role: "listbox",
+	});
+	const listNav = useListNavigation(f.context, {
+		listRef: () => elements,
+		activeIndex: () => activeIndex,
+		onNavigate: (v) => (activeIndex = v),
+		virtual: true,
+		allowEscape: true,
+		loop: true,
+	});
+
+	const ints = useInteractions([focus, dismiss, role, listNav]);
+
+	function handleKeyDown(
+		event: KeyboardEvent & { currentTarget: HTMLInputElement }
+	) {
+		const value = event.currentTarget.value.trim();
+
+		if (event.key !== "Enter" && !event.key.startsWith("Arrow")) {
+			activeIndex = null;
+			return;
+		}
+
+		if (event.key === "Enter" && value && !options.includes(value)) {
+			options = [value, ...options];
+		}
+
+		if (event.key === "Enter" && activeIndex !== null) {
+			event.currentTarget.value = options[activeIndex];
+			open = false;
+		}
+	}
+
+	function handleOnBlur() {
+		isFocusEnabled = true;
+	}
+
+	SelectContext.set({
+		get activeIndex() {
+			return activeIndex;
+		},
+		getItemProps: ints.getItemProps,
+	});
+</script>
+
+<h1 class="text-5xl font-bold mb-8">Omnibox</h1>
+<div
+	class="grid place-items-center border border-slate-400 rounded lg:w-[40rem] h-[20rem] mb-4">
+	<input
+		bind:this={f.elements.reference}
+		class="rounded-full sm:w-48 md:w-96 bg-gray-100 px-4 py-2 border border-transparent focus:bg-white focus focus:border-blue-500 outline-none"
+		placeholder="Search"
+		{...ints.getReferenceProps({
+			onkeydown: (
+				e: KeyboardEvent & { currentTarget: HTMLInputElement }
+			) => handleKeyDown(e),
+			onblur: handleOnBlur,
+		})} />
+	{#if open}
+		<FloatingFocusManager
+			context={f.context}
+			initialFocus={-1}
+			restoreFocus
+			modal={false}>
+			<div
+				class="bg-white bg-clip-padding rounded-lg shadow-md border border-slate-900/10 text-left overflow-y-auto"
+				bind:this={f.elements.floating}
+				style={f.floatingStyles}
+				{...ints.getFloatingProps()}>
+				<div class="flex justify-between align-items-center p-4">
+					<h3 class="font-bold text-xl">Recent</h3>
+					{#if hasOptions}
+						<button
+							class="text-blue-500 font-bold px-2 py-1 rounded-lg hover:bg-sky-50"
+							onclick={() => {
+								options = [];
+								open = false;
+							}}
+							onkeydown={(e) => {
+								if (e.key !== "Escape") {
+									e.stopPropagation();
+								}
+							}}>
+							Clear all
+						</button>
+					{/if}
+				</div>
+				{#if !hasOptions}
+					<p class="px-4 pb-4">No recent searches.</p>
+				{/if}
+				<FloatingList bind:elements>
+					{#each options as option, index (option)}
+						<SearchOption
+							value={option}
+							onRemove={() => {
+								removedIndex = index;
+								options = options.filter((o) => o !== option);
+							}}
+							onclick={() => {
+								if (
+									activeIndex === null ||
+									!f.elements.domReference
+								) {
+									return;
+								}
+								open = false;
+								isFocusEnabled = false;
+								const domRef = f.elements
+									.domReference as HTMLInputElement;
+								domRef.value = options[activeIndex];
+							}} />
+					{/each}
+				</FloatingList>
+			</div>
+		</FloatingFocusManager>
+	{/if}
+</div>
diff --git a/packages/floating-ui-svelte/test/visual/components/omnibox/search-option.svelte b/packages/floating-ui-svelte/test/visual/components/omnibox/search-option.svelte
new file mode 100644
index 00000000..1c2b8d08
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/components/omnibox/search-option.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { useListItem } from "../../../../src/components/floating-list/hooks.svelte.js";
+	import { useId } from "../../../../src/index.js";
+	import { SelectContext } from "./context.js";
+	import X from "lucide-svelte/icons/x";
+	import c from "clsx";
+
+	let {
+		value,
+		onclick,
+		onRemove,
+	}: {
+		value: string;
+		onclick: () => void;
+		onRemove: () => void;
+	} = $props();
+
+	const listItem = useListItem();
+	const ctx = SelectContext.get();
+	const isActive = $derived(listItem.index === ctx.activeIndex);
+	const id = useId();
+</script>
+
+<div
+	{id}
+	bind:this={listItem.ref}
+	tabindex={0}
+	role="option"
+	aria-selected={isActive}
+	class={c(
+		"p-4 outline-none cursor-default flex justify-between align-items-center",
+		{
+			"bg-slate-50": isActive,
+		}
+	)}
+	{...ctx.getItemProps({
+		onclick,
+		onkeydown(event: KeyboardEvent & { currentTarget: HTMLElement }) {
+			if (event.currentTarget !== event.target) return;
+
+			if (event.key === "Backspace") {
+				onRemove();
+			} else if (event.key === " " || event.key === "Enter") {
+				onclick();
+			}
+		},
+	})}>
+	{value}
+	<button
+		class="flex justify-center items-center text-blue-600 w-8 h-8 text-xl hover:bg-sky-100 transition-colors rounded-full"
+		onclick={(e) => {
+			e.stopPropagation();
+			onRemove();
+		}}
+		aria-label="Remove">
+		<X />
+	</button>
+</div>
diff --git a/packages/floating-ui-svelte/test/visual/components/popover/main.svelte b/packages/floating-ui-svelte/test/visual/components/popover/main.svelte
new file mode 100644
index 00000000..72070636
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/components/popover/main.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+	import Button from "../button.svelte";
+	import Popover from "./popover.svelte";
+	import { Checkbox } from "bits-ui";
+	import Check from "lucide-svelte/icons/check";
+
+	let modal = $state(true);
+</script>
+
+<h1 class="text-5xl font-bold mb-8">Popover</h1>
+<div
+	class="grid place-items-center border border-slate-400 rounded lg:w-[40rem] h-[20rem] mb-4">
+	<Popover {modal} bubbles={true}>
+		{#snippet children(ref, props)}
+			<Button bind:ref={ref.current} {...props}>My button</Button>
+		{/snippet}
+		{#snippet content({ labelId, descriptionId, close })}
+			<h2 id={labelId} class="text-2xl font-bold mb-2">Title</h2>
+			<p id={descriptionId} class="mb-2">Description</p>
+			<Popover {modal} bubbles={true}>
+				{#snippet content({ labelId, descriptionId, close })}
+					<h2 id={labelId} class="text-2xl font-bold mb-2">Title</h2>
+					<p id={descriptionId} class="mb-2">Description</p>
+					<Popover {modal} bubbles={false}>
+						{#snippet children(ref, props)}
+							<Button bind:ref={ref.current} {...props}
+								>My button</Button>
+						{/snippet}
+						{#snippet content({ labelId, descriptionId, close })}
+							<h2 id={labelId} class="text-2xl font-bold mb-2">
+								Title
+							</h2>
+							<p id={descriptionId} class="mb-2">Description</p>
+							<button onclick={close} class="font-bold">
+								Close
+							</button>
+						{/snippet}
+					</Popover>
+					<button onclick={close} class="font-bold"> Close </button>
+				{/snippet}
+				{#snippet children(ref, props)}
+					<Button bind:ref={ref.current} {...props}>My button</Button>
+				{/snippet}
+			</Popover>
+
+			<button onclick={close} class="font-bold"> Close </button>
+		{/snippet}
+	</Popover>
+</div>
+
+<label class="flex items-center">
+	<Checkbox.Root
+		class="bg-slate-900 text-white rounded w-5 h-5 mr-2 grid place-items-center shadow"
+		checked={modal}
+		onCheckedChange={(value) => (modal = value)}>
+		{#snippet children({ checked })}
+			{#if checked}
+				<Check class="size-5" />
+			{/if}
+		{/snippet}
+	</Checkbox.Root>
+	Modal focus management
+</label>
diff --git a/packages/floating-ui-svelte/test/visual/components/popover/popover-impl.svelte b/packages/floating-ui-svelte/test/visual/components/popover/popover-impl.svelte
new file mode 100644
index 00000000..c6f0cde0
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/components/popover/popover-impl.svelte
@@ -0,0 +1,108 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { Placement } from "@floating-ui/utils";
+	import {
+		box,
+		type WritableBox,
+	} from "../../../../src/internal/box.svelte.js";
+	export interface PopoverImplProps {
+		content: Snippet<
+			[
+				{
+					close: () => void;
+					labelId: string;
+					descriptionId: string;
+				},
+			]
+		>;
+		placement?: Placement;
+		modal?: boolean;
+		children?: Snippet<
+			[ref: WritableBox<Element | null>, props: Record<string, unknown>]
+		>;
+		bubbles?: boolean;
+	}
+</script>
+
+<script lang="ts">
+	import {
+		useClick,
+		useDismiss,
+		useFloating,
+		useFloatingNodeId,
+		useId,
+		useInteractions,
+		useRole,
+	} from "../../../../src/index.js";
+	import { autoUpdate, flip, offset, shift } from "@floating-ui/dom";
+	import FloatingNode from "../../../../src/components/floating-tree/floating-node.svelte";
+	import FloatingPortal from "../../../../src/components/floating-portal/floating-portal.svelte";
+	import FloatingFocusManager from "../../../../src/components/floating-focus-manager/floating-focus-manager.svelte";
+
+	let {
+		content,
+		placement,
+		children,
+		modal = true,
+		bubbles = true,
+	}: PopoverImplProps = $props();
+
+	let open = $state(false);
+
+	const nodeId = useFloatingNodeId();
+	const ref = box<Element | null>(null);
+
+	const f = useFloating({
+		elements: {
+			reference: () => ref.current,
+		},
+		onReferenceChange: (v) => {
+			ref.current = v;
+		},
+		open: () => open,
+		onOpenChange: (v) => {
+			open = v;
+		},
+		nodeId,
+		placement: () => placement,
+		middleware: [offset(10), flip(), shift()],
+		whileElementsMounted: autoUpdate,
+	});
+
+	const id = useId();
+	const labelId = `${id}-label`;
+	const descriptionId = `${id}-description`;
+
+	const ints = useInteractions([
+		useClick(f.context),
+		useRole(f.context),
+		useDismiss(f.context, { bubbles: () => bubbles }),
+	]);
+</script>
+
+<FloatingNode id={nodeId}>
+	{@render children?.(
+		ref,
+		ints.getReferenceProps({ "data-open": open ? "" : undefined })
+	)}
+
+	{#if open}
+		<FloatingPortal>
+			<FloatingFocusManager context={f.context} {modal}>
+				<div
+					class="bg-white border border-slate-900/10 shadow-md rounded px-4 py-6 bg-clip-padding"
+					bind:this={f.elements.floating}
+					style={f.floatingStyles}
+					aria-labelledby={labelId}
+					aria-describedby={descriptionId}
+					{...ints.getFloatingProps()}>
+					{@render content({
+						labelId,
+						descriptionId,
+						close: () => (open = false),
+					})}
+				</div>
+			</FloatingFocusManager>
+		</FloatingPortal>
+	{/if}
+</FloatingNode>
diff --git a/packages/floating-ui-svelte/test/visual/components/popover/popover.svelte b/packages/floating-ui-svelte/test/visual/components/popover/popover.svelte
new file mode 100644
index 00000000..380ede00
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/components/popover/popover.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import FloatingTree from "../../../../src/components/floating-tree/floating-tree.svelte";
+	import { useFloatingParentNodeId } from "../../../../src/index.js";
+	import type { PopoverImplProps } from "./popover-impl.svelte";
+	import PopoverImpl from "./popover-impl.svelte";
+
+	let props: PopoverImplProps = $props();
+
+	const parentId = useFloatingParentNodeId();
+</script>
+
+<!-- This is a root, so we wrap it with the tree -->
+{#if parentId === null}
+	<FloatingTree>
+		<PopoverImpl {...props} />
+	</FloatingTree>
+{:else}
+	<PopoverImpl {...props} />
+{/if}
diff --git a/packages/floating-ui-svelte/test/visual/components/select/color-swatch.svelte b/packages/floating-ui-svelte/test/visual/components/select/color-swatch.svelte
new file mode 100644
index 00000000..27c5f178
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/components/select/color-swatch.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { styleObjectToString } from "../../../../src/internal/style-object-to-string.js";
+
+	let { color }: { color?: string } = $props();
+</script>
+
+<div
+	aria-hidden="true"
+	class="rounded-full w-4 h-4 border border-slate-900/20 bg-clip-padding"
+	style={styleObjectToString({ background: color?.toLowerCase() })}>
+</div>
diff --git a/packages/floating-ui-svelte/test/visual/components/select/context.ts b/packages/floating-ui-svelte/test/visual/components/select/context.ts
new file mode 100644
index 00000000..62929d11
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/components/select/context.ts
@@ -0,0 +1,13 @@
+import type { useInteractions } from "../../../../src/index.js";
+import { Context } from "../../../../src/internal/context.js";
+
+export interface SelectContextData {
+	getItemProps: ReturnType<typeof useInteractions>["getItemProps"];
+	activeIndex: number | null;
+	selectedIndex: number | null;
+	isTyping: boolean;
+	setSelectedValue: (value: string, index: number) => void;
+	selectedValue: string;
+}
+
+export const SelectContext = new Context<SelectContextData>("SelectContext");
diff --git a/packages/floating-ui-svelte/test/visual/components/select/main.svelte b/packages/floating-ui-svelte/test/visual/components/select/main.svelte
new file mode 100644
index 00000000..5b9b8428
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/components/select/main.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import SelectOption from "./select-option.svelte";
+	import Select from "./select.svelte";
+</script>
+
+<Select>
+	<SelectOption value="Red">Red</SelectOption>
+	<SelectOption value="Orange">Orange</SelectOption>
+	<SelectOption value="Yellow">Yellow</SelectOption>
+	<SelectOption value="Green">Green</SelectOption>
+	<SelectOption value="Blue">Blue</SelectOption>
+</Select>
diff --git a/packages/floating-ui-svelte/test/visual/components/select/select-option.svelte b/packages/floating-ui-svelte/test/visual/components/select/select-option.svelte
new file mode 100644
index 00000000..04826a27
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/components/select/select-option.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+	import { untrack, type Snippet } from "svelte";
+	import { SelectContext, type SelectContextData } from "./context.js";
+	import { useListItem } from "../../../../src/components/floating-list/hooks.svelte.js";
+	import c from "clsx";
+	import ColorSwatch from "./color-swatch.svelte";
+	import Check from "lucide-svelte/icons/check";
+
+	let { children, value }: { children: Snippet; value: string } = $props();
+
+	const ctx = SelectContext.get();
+
+	const listItem = useListItem({ label: () => value });
+	const isActive = $derived(listItem.index === ctx.activeIndex);
+	const isSelected = $derived(listItem.index === ctx.selectedIndex);
+
+	$effect.pre(() => {
+		if (
+			listItem.index !== ctx.selectedIndex &&
+			value === ctx.selectedValue
+		) {
+			untrack(() => (ctx.selectedIndex = listItem.index));
+		}
+	});
+
+	function onSelect() {
+		ctx.setSelectedValue(value, listItem.index);
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div
+	bind:this={listItem.ref}
+	class={c(
+		"flex gap-2 items-center p-2 rounded outline-none cursor-default scroll-my-1",
+		{
+			"bg-cyan-200": isActive,
+		}
+	)}
+	tabindex={isActive ? 0 : -1}
+	{...ctx.getItemProps({
+		active: isActive,
+		selected: isSelected,
+		// Handle pointer select.
+		onclick: () => {
+			onSelect();
+		},
+		// Handle keyboard select.
+		onkeydown: (event: KeyboardEvent) => {
+			if (event.key === "Enter") {
+				event.preventDefault();
+				onSelect();
+			}
+
+			// Only if not using typeahead.
+			if (event.key === " " && !ctx.isTyping) {
+				event.preventDefault();
+				onSelect();
+			}
+		},
+	})}>
+	<ColorSwatch color={value?.toLowerCase()} />
+	{@render children?.()}
+	<span aria-hidden="true" class="absolute right-4">
+		{#if isSelected}
+			<Check width={20} height={20} />
+		{/if}
+	</span>
+</div>
diff --git a/packages/floating-ui-svelte/test/visual/components/select/select.svelte b/packages/floating-ui-svelte/test/visual/components/select/select.svelte
new file mode 100644
index 00000000..bc72ade8
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/components/select/select.svelte
@@ -0,0 +1,154 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import {
+		useClick,
+		useDismiss,
+		useFloating,
+		useInteractions,
+		useListNavigation,
+		useRole,
+		useTypeahead,
+	} from "../../../../src/index.js";
+	import { autoUpdate, flip, offset, size } from "@floating-ui/dom";
+	import Button from "../button.svelte";
+	import ColorSwatch from "./color-swatch.svelte";
+	import FloatingList from "../../../../src/components/floating-list/floating-list.svelte";
+	import { SelectContext } from "./context.js";
+	import FloatingPortal from "../../../../src/components/floating-portal/floating-portal.svelte";
+	import FloatingFocusManager from "../../../../src/components/floating-focus-manager/floating-focus-manager.svelte";
+
+	let {
+		children,
+		onChange,
+	}: {
+		children: Snippet;
+		onChange?: (value: string) => void;
+	} = $props();
+
+	let value = $state("");
+	let open = $state(false);
+	let activeIndex = $state<number | null>(null);
+	let selectedIndex = $state<number | null>(null);
+
+	function setSelectedValue(newValue: string, newIndex: number) {
+		selectedIndex = newIndex;
+		value = newValue;
+		onChange?.(newValue);
+		open = false;
+	}
+
+	const f = useFloating({
+		placement: "bottom-start",
+		open: () => open,
+		onOpenChange: (v) => (open = v),
+		whileElementsMounted: autoUpdate,
+		middleware: [
+			offset(5),
+			flip({ padding: 10 }),
+			size({
+				apply({ rects, elements, availableHeight }) {
+					Object.assign(elements.floating.style, {
+						maxHeight: `${availableHeight}px`,
+						width: `${rects.reference.width}px`,
+					});
+				},
+				padding: 10,
+			}),
+		],
+	});
+
+	let elements = $state<Array<HTMLElement | null>>([]);
+	let labels = $state<Array<string | null>>([]);
+	let isTyping = $state(false);
+
+	const click = useClick(f.context, { event: "mousedown" });
+	const dismiss = useDismiss(f.context);
+	const role = useRole(f.context, { role: "select" });
+	const listNav = useListNavigation(f.context, {
+		listRef: () => elements,
+		activeIndex: () => activeIndex,
+		selectedIndex: () => selectedIndex,
+		onNavigate: (idx) => (activeIndex = idx),
+		loop: true,
+	});
+	const typeahead = useTypeahead(f.context, {
+		listRef: () => labels,
+		activeIndex: () => activeIndex,
+		selectedIndex: () => selectedIndex,
+		onMatch: (idx) => {
+			if (open) {
+				activeIndex = idx;
+			} else {
+				setSelectedValue(labels[idx] || "", idx);
+			}
+		},
+		onTypingChange: (newIsTyping) => {
+			isTyping = newIsTyping;
+		},
+	});
+
+	const ints = useInteractions([click, dismiss, role, listNav, typeahead]);
+
+	SelectContext.set({
+		get activeIndex() {
+			return activeIndex;
+		},
+		set activeIndex(v) {
+			activeIndex = v;
+		},
+		getItemProps: ints.getItemProps,
+		get isTyping() {
+			return isTyping;
+		},
+		get selectedIndex() {
+			return selectedIndex;
+		},
+		set selectedIndex(v) {
+			selectedIndex = v;
+		},
+		get selectedValue() {
+			return value;
+		},
+		setSelectedValue,
+	});
+</script>
+
+<h1 class="text-5xl font-bold mb-8">Select</h1>
+<div
+	class="grid place-items-center border border-slate-400 rounded lg:w-[40rem] h-[20rem] mb-4">
+	<div>
+		<!-- svelte-ignore a11y_label_has_associated_control -->
+		<label class="flex flex-col items-center" id="select-label">
+			Select balloon color
+		</label>
+		<Button
+			bind:ref={f.elements.reference}
+			aria-labelledby="select-label"
+			data-open={open ? "" : undefined}
+			class="flex items-center gap-2 bg-slate-200 rounded w-[10rem]"
+			{...ints.getReferenceProps()}>
+			{#if value}
+				<ColorSwatch color={value} />
+			{/if}
+
+			{value || "Select..."}
+		</Button>
+	</div>
+	<FloatingList bind:elements {labels}>
+		{#if open}
+			<FloatingPortal>
+				<FloatingFocusManager context={f.context} modal={false}>
+					<div
+						bind:this={f.elements.floating}
+						style={f.floatingStyles}
+						class="bg-slate-200/50 max-h-[20rem] overflow-y-auto rounded outline-none p-1 backdrop-blur-sm"
+						{...ints.getFloatingProps()}>
+						{@render children?.()}
+					</div>
+				</FloatingFocusManager>
+			</FloatingPortal>
+		{:else}
+			<div hidden>{@render children?.()}</div>
+		{/if}
+	</FloatingList>
+</div>
diff --git a/packages/floating-ui-svelte/test/visual/components/tooltip/main.svelte b/packages/floating-ui-svelte/test/visual/components/tooltip/main.svelte
new file mode 100644
index 00000000..342e312e
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/components/tooltip/main.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import FloatingDelayGroup from "../../../../src/components/floating-delay-group.svelte";
+	import Button from "../button.svelte";
+	import Tooltip from "./tooltip.svelte";
+</script>
+
+<h1 class="text-5xl font-bold mb-8">Tooltip</h1>
+<div
+	class="grid place-items-center border border-slate-400 rounded lg:w-[40rem] h-[20rem] mb-4">
+	<Tooltip label="My tooltip">
+		{#snippet children(ref, props)}
+			<Button bind:ref={ref.current} {...props}>My button</Button>
+		{/snippet}
+	</Tooltip>
+</div>
+<div
+	class="grid place-items-center border border-slate-400 rounded lg:w-[40rem] h-[20rem] mb-4">
+	<div class="flex gap-1">
+		<FloatingDelayGroup delay={{ open: 500, close: 200 }} timeoutMs={200}>
+			<Tooltip label="My tooltip">
+				{#snippet children(ref, props)}
+					<Button bind:ref={ref.current} {...props}>My button</Button>
+				{/snippet}
+			</Tooltip>
+			<Tooltip label="My tooltip 2">
+				{#snippet children(ref, props)}
+					<Button bind:ref={ref.current} {...props}>My button</Button>
+				{/snippet}
+			</Tooltip>
+			<Tooltip label="My tooltip 3">
+				{#snippet children(ref, props)}
+					<Button bind:ref={ref.current} {...props}>My button</Button>
+				{/snippet}
+			</Tooltip>
+		</FloatingDelayGroup>
+	</div>
+</div>
diff --git a/packages/floating-ui-svelte/test/visual/components/tooltip/tooltip.svelte b/packages/floating-ui-svelte/test/visual/components/tooltip/tooltip.svelte
new file mode 100644
index 00000000..ff08e869
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/components/tooltip/tooltip.svelte
@@ -0,0 +1,118 @@
+<script lang="ts">
+	import type { Placement } from "@floating-ui/utils";
+	import {
+		useDelayGroup,
+		useDismiss,
+		useFloating,
+		useFocus,
+		useHover,
+		useInteractions,
+		useRole,
+		useTransitionStyles,
+		type Delay,
+	} from "../../../../src/index.js";
+	import type { Snippet } from "svelte";
+	import { autoUpdate, flip, offset, shift } from "@floating-ui/dom";
+	import {
+		box,
+		type WritableBox,
+	} from "../../../../src/internal/box.svelte.js";
+	import FloatingPortal from "../../../../src/components/floating-portal/floating-portal.svelte";
+
+	let {
+		label,
+		placement = "top",
+		delay = 0,
+		children,
+	}: {
+		label: string;
+		placement?: Placement;
+		delay?: Delay;
+		children?: Snippet<
+			[ref: WritableBox<Element | null>, props: Record<string, unknown>]
+		>;
+	} = $props();
+
+	let open = $state(false);
+
+	const reference = box<Element | null>(null);
+
+	const f = useFloating({
+		elements: {
+			reference: () => reference.current,
+		},
+		onReferenceChange: (v) => {
+			reference.current = v;
+		},
+		open: () => open,
+		onOpenChange: (v) => {
+			open = v;
+		},
+		placement: () => placement,
+		middleware: () => [offset(5), flip(), shift({ padding: 8 })],
+		whileElementsMounted: autoUpdate,
+	});
+
+	const delayGroup = useDelayGroup(f.context);
+
+	const ints = useInteractions([
+		useHover(f.context, {
+			delay: () => (delayGroup.delay === 0 ? delay : delayGroup.delay),
+			move: false,
+		}),
+		useFocus(f.context),
+		useRole(f.context, { role: "tooltip" }),
+		useDismiss(f.context),
+	]);
+
+	const instantDuration = 0;
+	const openDuration = 750;
+	const closeDuration = 250;
+
+	const transitions = useTransitionStyles(f.context, {
+		duration: () =>
+			delayGroup.isInstantPhase
+				? {
+						open: openDuration,
+						close:
+							delayGroup.currentId === f.context.floatingId
+								? closeDuration
+								: instantDuration,
+					}
+				: {
+						open: openDuration,
+						close: closeDuration,
+					},
+		initial: {
+			opacity: 0,
+			scale: "0.925",
+		},
+		common: ({ side }) => ({
+			"transition-timing-function": "cubic-bezier(.18,.87,.4,.97)",
+			"transform-origin": {
+				top: "bottom",
+				left: "right",
+				bottom: "top",
+				right: "left",
+			}[side],
+		}),
+	});
+</script>
+
+{@render children?.(reference, ints.getReferenceProps())}
+
+{#if transitions.isMounted}
+	<FloatingPortal>
+		<div
+			role="presentation"
+			bind:this={f.elements.floating}
+			style={f.floatingStyles}>
+			<div
+				class="bg-black text-white p-1 px-2 rounded"
+				style={transitions.styles}
+				{...ints.getFloatingProps()}>
+				{label}
+			</div>
+		</div>
+	</FloatingPortal>
+{/if}
diff --git a/packages/floating-ui-svelte/test/visual/components/utils/debug-polygon.svelte b/packages/floating-ui-svelte/test/visual/components/utils/debug-polygon.svelte
new file mode 100644
index 00000000..4833935d
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/components/utils/debug-polygon.svelte
@@ -0,0 +1,29 @@
+<script lang="ts" module>
+	import { box } from "../../../../src/internal/box.svelte.js";
+
+	export const debugPolygon = box<{
+		rect: [number, number][];
+		tri: [number, number][];
+	}>({ rect: [], tri: [] });
+</script>
+
+<script lang="ts">
+	const paths = $derived([
+		{
+			d: `M ${debugPolygon.current.rect.map(([x, y]) => `${x},${y}`).join(" L ")} Z`,
+			fill: "rgba(255,0,0,0.2)",
+		},
+		{
+			d: `M ${debugPolygon.current.tri.map(([x, y]) => `${x},${y}`).join(" L ")} Z`,
+			fill: "rgba(0,255,0,0.2)",
+		},
+	]);
+</script>
+
+{#if debugPolygon.current.rect.length && debugPolygon.current.tri.length}
+	<svg class="fixed inset-0 w-full h-full pointer-events-none z-[99999]">
+		{#each paths as { d, fill }}
+			<path {d} {fill} />
+		{/each}
+	</svg>
+{/if}
diff --git a/packages/floating-ui-svelte/test/visual/components/utils/debug-polygon.svelte.d.ts b/packages/floating-ui-svelte/test/visual/components/utils/debug-polygon.svelte.d.ts
new file mode 100644
index 00000000..86854435
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/components/utils/debug-polygon.svelte.d.ts
@@ -0,0 +1,7 @@
+export declare const debugPolygon: import("../../../../src/internal/box.svelte.js").WritableBox<{
+    rect: [number, number][];
+    tri: [number, number][];
+}>;
+declare const DebugPolygon: import("svelte").Component<Record<string, never>, {}, "">;
+type DebugPolygon = ReturnType<typeof DebugPolygon>;
+export default DebugPolygon;
diff --git a/packages/floating-ui-svelte/test/visual/routes/+layout.svelte b/packages/floating-ui-svelte/test/visual/routes/+layout.svelte
new file mode 100644
index 00000000..4bd74526
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/routes/+layout.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+	import "../app.css";
+	import { page } from "$app/state";
+	import { styleObjectToString } from "../../../src/internal/style-object-to-string.js";
+
+	let { children } = $props();
+
+	const ROUTES = [
+		"tooltip",
+		"popover",
+		"menu",
+		"select",
+		"mac-select",
+		"emoji-picker",
+		"autocomplete",
+		"navigation",
+		"drawer",
+		"arrow",
+		"menubar",
+		"menu-virtual",
+		"omnibox",
+		"grid",
+		"complex-grid",
+	];
+</script>
+
+<div>
+	<main class="p-12 lg:ml-64">
+		{@render children?.()}
+	</main>
+	<nav
+		class="fixed top-0 left-0 flex-col hidden h-full p-8 overflow-y-auto bg-slate-100 lg:w-64 lg:flex">
+		<div class="">
+			<a href="/" class="block mb-4 text-2xl font-bold"> Tests </a>
+			<a
+				href="/new"
+				class="inline-block px-4 py-2 mb-4 font-bold text-white bg-blue-500 rounded">
+				New
+			</a>
+		</div>
+		<ul class="flex flex-col text-lg capitalize">
+			{#each ROUTES as path (path)}
+				<a
+					href="/{path}"
+					class="py-1"
+					style={styleObjectToString({
+						color: page.url.pathname === `/${path}` ? "black" : "",
+						"font-weight":
+							page.url.pathname === `/${path}` ? "bold" : "",
+					})}>
+					{path.replace("-", " ")}
+				</a>
+			{/each}
+		</ul>
+	</nav>
+</div>
diff --git a/packages/floating-ui-svelte/test/visual/routes/+page.svelte b/packages/floating-ui-svelte/test/visual/routes/+page.svelte
new file mode 100644
index 00000000..db55647c
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/routes/+page.svelte
@@ -0,0 +1,5 @@
+<h1>Floating UI Testing Grounds</h1>
+<p>
+	Welcome! On the left is a navigation bar to browse through different testing
+	files.
+</p>
diff --git a/packages/floating-ui-svelte/test/visual/routes/arrow/+page.svelte b/packages/floating-ui-svelte/test/visual/routes/arrow/+page.svelte
new file mode 100644
index 00000000..c04dafe3
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/routes/arrow/+page.svelte
@@ -0,0 +1,141 @@
+<script lang="ts" module>
+	const ROUND_D =
+		"M0 20C0 20 2.06906 19.9829 5.91817 15.4092C7.49986 13.5236 8.97939 12.3809 10.0002 12.3809C11.0202 12.3809 12.481 13.6451 14.0814 15.5472C17.952 20.1437 20 20 20 20H0Z";
+
+	const allPlacements = ["top", "bottom", "right", "left"].flatMap(
+		(placement) =>
+			[
+				placement,
+				`${placement}-start`,
+				`${placement}-end`,
+			] as Array<Placement>
+	);
+
+	const borderWidth = 1;
+</script>
+
+<script lang="ts">
+	import type { Placement } from "@floating-ui/utils";
+	import Demo from "../../components/arrow/demo.svelte";
+	import { autoPlacement, hide, shift } from "@floating-ui/dom";
+</script>
+
+<h1 class="text-5xl font-bold">Arrow</h1>
+<h2 class="text-xl font-bold mb-6 my-8">Slight transparency</h2>
+<div
+	class="grid grid-cols-3 place-items-center border border-slate-400 rounded lg:w-[40rem] h-[20rem] mb-4">
+	{#each allPlacements as placement (placement)}
+		<Demo
+			{placement}
+			arrowProps={{
+				fill: "rgba(0,0,0,0.75)",
+			}}
+			floatingProps={{
+				class: "bg-black/75 text-white p-2",
+			}} />
+	{/each}
+</div>
+<h2 class="text-xl font-bold mb-6 mt-10">{"tipRadius={2}"}</h2>
+<div
+	class="grid grid-cols-3 place-items-center border border-slate-400 rounded lg:w-[40rem] h-[20rem] mb-4">
+	{#each allPlacements as placement (placement)}
+		<Demo {placement} arrowProps={{ tipRadius: 2 }} />
+	{/each}
+</div>
+<h2 class="text-xl font-bold mb-6 mt-10">{"tipRadius={5}"}</h2>
+<div
+	class="grid grid-cols-3 place-items-center border border-slate-400 rounded lg:w-[40rem] h-[20rem] mb-4">
+	{#each allPlacements as placement (placement)}
+		<Demo {placement} arrowProps={{ tipRadius: 5 }} />
+	{/each}
+</div>
+<h2 class="text-xl font-bold mb-6 mt-10">Transparent stroke + tipRadius</h2>
+<div
+	class="grid grid-cols-3 place-items-center border border-slate-400 rounded lg:w-[40rem] h-[20rem] mb-4">
+	{#each allPlacements as placement (placement)}
+		<Demo
+			{placement}
+			arrowProps={{
+				fill: "white",
+				stroke: "rgba(0,0,0,0.4)",
+				strokeWidth: borderWidth,
+				tipRadius: 1,
+			}}
+			floatingStyle={{
+				border: `${borderWidth}px solid rgba(0,0,0,0.4)`,
+				color: "black",
+				"background-color": "white",
+			}} />
+	{/each}
+</div>
+<h2 class="text-xl font-bold mb-6 mt-10">Custom path + transparent stroke</h2>
+<div
+	class="grid grid-cols-3 place-items-center border border-slate-400 rounded lg:w-[40rem] h-[20rem] mb-4">
+	{#each allPlacements as placement (placement)}
+		<Demo
+			{placement}
+			arrowProps={{
+				width: 20,
+				height: 20,
+				fill: "white",
+				stroke: "rgba(0,0,0,0.4)",
+				strokeWidth: borderWidth,
+				d: ROUND_D,
+			}}
+			floatingStyle={{
+				border: `${borderWidth}px solid rgba(0,0,0,0.4)`,
+				color: "black",
+				"background-color": "white",
+			}} />
+	{/each}
+</div>
+<h2 class="text-xl font-bold mb-6 mt-10">
+	Tailwind classs for fill and stroke
+</h2>
+<div
+	class="grid grid-cols-3 place-items-center border border-slate-400 rounded lg:w-[40rem] h-[20rem] mb-4">
+	{#each allPlacements as placement (placement)}
+		<Demo
+			{placement}
+			arrowProps={{
+				class: "fill-white [&>path:first-of-type]:stroke-pink-500 [&>path:last-of-type]:stroke-white",
+				strokeWidth: 1,
+			}}
+			floatingProps={{
+				class: "border border-pink-500 text-pink-500 bg-white p-2",
+			}} />
+	{/each}
+</div>
+<h2 class="text-xl font-bold mb-6 mt-10">Arrow with shift()</h2>
+<div
+	class="grid grid-cols-1 place-items-center border border-slate-400 rounded lg:w-[40rem] h-[130rem] mb-4">
+	{#each allPlacements as placement (placement)}
+		<Demo
+			arrowProps={{
+				fill: "rgba(255,0,0)",
+				staticOffset: undefined,
+			}}
+			floatingStyle={{
+				"z-index": 1500,
+			}}
+			{placement}
+			middleware={[
+				shift(),
+				// Use hide() so the examples are not shifted onto the screen while we're not looking at this section
+				hide(),
+			]}>
+			{"0123456789 ".repeat(40)}
+		</Demo>
+	{/each}
+</div>
+<h2 class="text-xl font-bold mb-6 mt-10">Arrow with autoPlacement()</h2>
+<div
+	class="grid grid-cols-3 place-items-center border border-slate-400 rounded lg:w-[40rem] h-[20rem] mb-4">
+	{#each allPlacements as placement (placement)}
+		<Demo
+			arrowProps={{
+				fill: "rgba(255,0,0)",
+			}}
+			middleware={[autoPlacement({ allowedPlacements: [placement] })]} />
+	{/each}
+</div>
diff --git a/packages/floating-ui-svelte/test/visual/routes/autocomplete/+page.svelte b/packages/floating-ui-svelte/test/visual/routes/autocomplete/+page.svelte
new file mode 100644
index 00000000..184fc5a9
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/routes/autocomplete/+page.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	import Main from "../../components/autocomplete/main.svelte";
+</script>
+
+<Main />
diff --git a/packages/floating-ui-svelte/test/visual/routes/complex-grid/+page.svelte b/packages/floating-ui-svelte/test/visual/routes/complex-grid/+page.svelte
new file mode 100644
index 00000000..3c36f3e9
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/routes/complex-grid/+page.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	import Main from "../../components/complex-grid/main.svelte";
+</script>
+
+<Main />
diff --git a/packages/floating-ui-svelte/test/visual/routes/drawer/+page.svelte b/packages/floating-ui-svelte/test/visual/routes/drawer/+page.svelte
new file mode 100644
index 00000000..645e302b
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/routes/drawer/+page.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	import Main from "../../components/drawer/main.svelte";
+</script>
+
+<Main />
diff --git a/packages/floating-ui-svelte/test/visual/routes/emoji-picker/+page.svelte b/packages/floating-ui-svelte/test/visual/routes/emoji-picker/+page.svelte
new file mode 100644
index 00000000..19149048
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/routes/emoji-picker/+page.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	import Main from "../../components/emoji-picker/main.svelte";
+</script>
+
+<Main />
diff --git a/packages/floating-ui-svelte/test/visual/routes/grid/+page.svelte b/packages/floating-ui-svelte/test/visual/routes/grid/+page.svelte
new file mode 100644
index 00000000..84982fa8
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/routes/grid/+page.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	import Main from "../../components/grid/main.svelte";
+</script>
+
+<Main />
diff --git a/packages/floating-ui-svelte/test/visual/routes/menu-virtual/+page.svelte b/packages/floating-ui-svelte/test/visual/routes/menu-virtual/+page.svelte
new file mode 100644
index 00000000..15744f45
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/routes/menu-virtual/+page.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	import Main from "../../components/menu-virtual/main.svelte";
+</script>
+
+<Main />
diff --git a/packages/floating-ui-svelte/test/visual/routes/menu/+page.svelte b/packages/floating-ui-svelte/test/visual/routes/menu/+page.svelte
new file mode 100644
index 00000000..5f098ba5
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/routes/menu/+page.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	import Main from "../../components/menu/main.svelte";
+</script>
+
+<Main />
diff --git a/packages/floating-ui-svelte/test/visual/routes/menubar/+page.svelte b/packages/floating-ui-svelte/test/visual/routes/menubar/+page.svelte
new file mode 100644
index 00000000..bee7c8ec
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/routes/menubar/+page.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	import Main from "../../components/menubar/main.svelte";
+</script>
+
+<Main />
diff --git a/packages/floating-ui-svelte/test/visual/routes/new/+page.svelte b/packages/floating-ui-svelte/test/visual/routes/new/+page.svelte
new file mode 100644
index 00000000..ea735089
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/routes/new/+page.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	import Main from "../../../unit/hooks/wrapper-components/use-list-navigation/home-end-ignore.svelte";
+</script>
+
+<Main />
diff --git a/packages/floating-ui-svelte/test/visual/routes/omnibox/+page.svelte b/packages/floating-ui-svelte/test/visual/routes/omnibox/+page.svelte
new file mode 100644
index 00000000..9eea3555
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/routes/omnibox/+page.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	import Main from "../../components/omnibox/main.svelte";
+</script>
+
+<Main />
diff --git a/packages/floating-ui-svelte/test/visual/routes/popover/+page.svelte b/packages/floating-ui-svelte/test/visual/routes/popover/+page.svelte
new file mode 100644
index 00000000..b02ba659
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/routes/popover/+page.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	import Main from "../../components/popover/main.svelte";
+</script>
+
+<Main />
diff --git a/packages/floating-ui-svelte/test/visual/routes/select/+page.svelte b/packages/floating-ui-svelte/test/visual/routes/select/+page.svelte
new file mode 100644
index 00000000..3f67c5e8
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/routes/select/+page.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	import Main from "../../components/select/main.svelte";
+</script>
+
+<Main />
diff --git a/packages/floating-ui-svelte/test/visual/routes/tooltip/+page.svelte b/packages/floating-ui-svelte/test/visual/routes/tooltip/+page.svelte
new file mode 100644
index 00000000..e8b39e65
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/routes/tooltip/+page.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	import Main from "../../components/tooltip/main.svelte";
+</script>
+
+<Main />
diff --git a/packages/floating-ui-svelte/test/visual/types.ts b/packages/floating-ui-svelte/test/visual/types.ts
new file mode 100644
index 00000000..94ade655
--- /dev/null
+++ b/packages/floating-ui-svelte/test/visual/types.ts
@@ -0,0 +1,6 @@
+import type { WritableBox } from "../../src/internal/box.svelte.js";
+
+export type ReferenceSnippetProps = [
+	WritableBox<Element | null>,
+	Record<string, unknown>,
+];
diff --git a/packages/floating-ui-svelte/test/internal/with-runes.svelte.ts b/packages/floating-ui-svelte/test/with-runes.svelte.ts
similarity index 100%
rename from packages/floating-ui-svelte/test/internal/with-runes.svelte.ts
rename to packages/floating-ui-svelte/test/with-runes.svelte.ts
diff --git a/packages/floating-ui-svelte/tsconfig.json b/packages/floating-ui-svelte/tsconfig.json
index 666df877..3a2eeeee 100644
--- a/packages/floating-ui-svelte/tsconfig.json
+++ b/packages/floating-ui-svelte/tsconfig.json
@@ -13,5 +13,22 @@
 		"moduleResolution": "NodeNext",
 		"types": ["svelte"]
 	},
-	"include": ["src", "test"]
+	"include": [
+		"ambient.d.ts",
+		"non-ambient.d.ts",
+		"./.svelte-kit/types/**/$types.d.ts",
+		"./vite.config.js",
+		"./vite.config.ts",
+		"./test/visual/routes/**/*.js",
+		"./test/visual/routes/**/*.ts",
+		"./test/visual/routes/**/*.svelte",
+		"./src/**/*.js",
+		"./src/**/*.ts",
+		"./src/**/*.svelte",
+		"./tests/**/*.js",
+		"./tests/**/*.ts",
+		"./tests/**/*.svelte",
+		"src",
+		"test"
+	]
 }
diff --git a/packages/floating-ui-svelte/vite.config.ts b/packages/floating-ui-svelte/vite.config.ts
index 2860c75a..641212f6 100644
--- a/packages/floating-ui-svelte/vite.config.ts
+++ b/packages/floating-ui-svelte/vite.config.ts
@@ -1,12 +1,21 @@
-import { svelte } from "@sveltejs/vite-plugin-svelte";
 import { svelteTesting } from "@testing-library/svelte/vite";
 import { defineConfig } from "vitest/config";
+import tailwindcss from "@tailwindcss/vite";
+import { sveltekit } from "@sveltejs/kit/vite";
 
 export default defineConfig({
-	plugins: [svelte(), svelteTesting()],
+	server: {
+		port: 1234,
+		fs: {
+			strict: false,
+		},
+	},
+	root: "./test/visual",
+	plugins: [sveltekit(), tailwindcss(), svelteTesting()],
 	test: {
-		include: ["./test/{hooks, components}/*.ts"],
-		setupFiles: ["./test/internal/setup.ts"],
+		root: "./test/unit",
+		include: ["./**/*.test.ts"],
+		setupFiles: ["./test/unit/setup.ts"],
 		environment: "jsdom",
 	},
 });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a19e8ee2..2b449628 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,40 +23,67 @@ importers:
       '@floating-ui/utils':
         specifier: ^0.2.8
         version: 0.2.8
+      esm-env:
+        specifier: ^1.2.1
+        version: 1.2.1
+      style-to-object:
+        specifier: ^1.0.8
+        version: 1.0.8
+      tabbable:
+        specifier: ^6.2.0
+        version: 6.2.0
     devDependencies:
       '@sveltejs/kit':
         specifier: ^2.15.1
-        version: 2.15.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.16.0)(vite@6.0.6(@types/node@22.10.5)(jiti@1.21.7)(yaml@2.7.0)))(svelte@5.16.0)(vite@6.0.6(@types/node@22.10.5)(jiti@1.21.7)(yaml@2.7.0))
+        version: 2.15.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.17.3)(vite@6.0.7(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0)))(svelte@5.17.3)(vite@6.0.7(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0))
       '@sveltejs/package':
         specifier: ^2.3.7
-        version: 2.3.7(svelte@5.16.0)(typescript@5.7.2)
+        version: 2.3.7(svelte@5.17.3)(typescript@5.7.2)
       '@sveltejs/vite-plugin-svelte':
         specifier: ^5.0.3
-        version: 5.0.3(svelte@5.16.0)(vite@6.0.6(@types/node@22.10.5)(jiti@1.21.7)(yaml@2.7.0))
+        version: 5.0.3(svelte@5.17.3)(vite@6.0.7(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0))
+      '@tailwindcss/vite':
+        specifier: 4.0.0-beta.9
+        version: 4.0.0-beta.9(vite@6.0.7(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0))
       '@testing-library/jest-dom':
         specifier: ^6.6.3
         version: 6.6.3
       '@testing-library/svelte':
         specifier: ^5.2.6
-        version: 5.2.6(svelte@5.16.0)(vite@6.0.6(@types/node@22.10.5)(jiti@1.21.7)(yaml@2.7.0))(vitest@2.1.8(@types/node@22.10.5)(jsdom@25.0.1))
+        version: 5.2.6(svelte@5.17.3)(vite@6.0.7(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0))(vitest@2.1.8(@types/node@22.10.5)(jsdom@25.0.1)(lightningcss@1.29.1))
       '@testing-library/user-event':
         specifier: ^14.5.2
         version: 14.5.2(@testing-library/dom@10.4.0)
+      bits-ui:
+        specifier: ^1.0.0-next.78
+        version: 1.0.0-next.78(svelte@5.17.3)
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
       csstype:
         specifier: ^3.1.3
         version: 3.1.3
+      lucide-svelte:
+        specifier: ^0.469.0
+        version: 0.469.0(svelte@5.17.3)
+      resize-observer-polyfill:
+        specifier: ^1.5.1
+        version: 1.5.1
       svelte:
-        specifier: ^5.16.0
-        version: 5.16.0
+        specifier: ^5.17.3
+        version: 5.17.3
+      tailwindcss:
+        specifier: 4.0.0-beta.9
+        version: 4.0.0-beta.9
       typescript:
         specifier: ^5.7.2
         version: 5.7.2
       vite:
-        specifier: ^6.0.6
-        version: 6.0.6(@types/node@22.10.5)(jiti@1.21.7)(yaml@2.7.0)
+        specifier: 6.0.7
+        version: 6.0.7(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0)
       vitest:
         specifier: ^2.1.8
-        version: 2.1.8(@types/node@22.10.5)(jsdom@25.0.1)
+        version: 2.1.8(@types/node@22.10.5)(jsdom@25.0.1)(lightningcss@1.29.1)
 
   sites/floating-ui-svelte.vercel.app:
     devDependencies:
@@ -65,22 +92,25 @@ importers:
         version: link:../../packages/floating-ui-svelte
       '@sveltejs/adapter-vercel':
         specifier: ^5.5.2
-        version: 5.5.2(@sveltejs/kit@2.15.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.16.0)(vite@6.0.6(@types/node@22.10.5)(jiti@1.21.7)(yaml@2.7.0)))(svelte@5.16.0)(vite@6.0.6(@types/node@22.10.5)(jiti@1.21.7)(yaml@2.7.0)))(rollup@4.29.1)
+        version: 5.5.2(@sveltejs/kit@2.15.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.17.3)(vite@6.0.6(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0)))(svelte@5.17.3)(vite@6.0.6(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0)))(rollup@4.29.1)
       '@sveltejs/kit':
         specifier: ^2.15.1
-        version: 2.15.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.16.0)(vite@6.0.6(@types/node@22.10.5)(jiti@1.21.7)(yaml@2.7.0)))(svelte@5.16.0)(vite@6.0.6(@types/node@22.10.5)(jiti@1.21.7)(yaml@2.7.0))
+        version: 2.15.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.17.3)(vite@6.0.6(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0)))(svelte@5.17.3)(vite@6.0.6(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0))
       '@sveltejs/vite-plugin-svelte':
         specifier: ^5.0.3
-        version: 5.0.3(svelte@5.16.0)(vite@6.0.6(@types/node@22.10.5)(jiti@1.21.7)(yaml@2.7.0))
+        version: 5.0.3(svelte@5.17.3)(vite@6.0.6(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0))
       autoprefixer:
         specifier: ^10.4.20
         version: 10.4.20(postcss@8.4.49)
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
       focus-trap:
         specifier: ^7.6.2
         version: 7.6.2
       lucide-svelte:
         specifier: ^0.469.0
-        version: 0.469.0(svelte@5.16.0)
+        version: 0.469.0(svelte@5.17.3)
       pagefind:
         specifier: ^1.3.0
         version: 1.3.0
@@ -88,11 +118,11 @@ importers:
         specifier: ^1.24.4
         version: 1.24.4
       svelte:
-        specifier: ^5.16.0
-        version: 5.16.0
+        specifier: ^5.17.3
+        version: 5.17.3
       svelte-check:
         specifier: ^4.1.1
-        version: 4.1.1(picomatch@4.0.2)(svelte@5.16.0)(typescript@5.7.2)
+        version: 4.1.1(picomatch@4.0.2)(svelte@5.17.3)(typescript@5.7.2)
       tailwindcss:
         specifier: ^3.4.17
         version: 3.4.17
@@ -101,10 +131,10 @@ importers:
         version: 5.7.2
       vite:
         specifier: ^6.0.6
-        version: 6.0.6(@types/node@22.10.5)(jiti@1.21.7)(yaml@2.7.0)
+        version: 6.0.6(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0)
       vite-plugin-pagefind:
         specifier: ^0.3.0
-        version: 0.3.0(vite@6.0.6(@types/node@22.10.5)(jiti@1.21.7)(yaml@2.7.0))
+        version: 0.3.0(vite@6.0.6(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0))
 
 packages:
 
@@ -536,6 +566,9 @@ packages:
   '@floating-ui/utils@0.2.8':
     resolution: {integrity: sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==}
 
+  '@internationalized/date@3.7.0':
+    resolution: {integrity: sha512-VJ5WS3fcVx0bejE/YHfbDKR/yawZgKqn/if+oEeLqNwBtPzVB06olkfcnojTmEMX+gTpH+FlQ69SHNitJ8/erQ==}
+
   '@isaacs/cliui@8.0.2':
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
     engines: {node: '>=12'}
@@ -772,6 +805,87 @@ packages:
       svelte: ^5.0.0
       vite: ^6.0.0
 
+  '@swc/helpers@0.5.15':
+    resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
+
+  '@tailwindcss/node@4.0.0-beta.9':
+    resolution: {integrity: sha512-KuKNhNVU5hd2L5BkXE/twBKkMnHG4wQiHes6axhDbdcRew0/YZtvlWvMIy7QmtBWnR1lM8scPhp0RXmxK/hZdw==}
+
+  '@tailwindcss/oxide-android-arm64@4.0.0-beta.9':
+    resolution: {integrity: sha512-MiDpTfYvRozM+40mV2wh7GCxyEj7zIOtX3bRNaJgu0adxzZaKkylks46kBY8X91NV3ch6CQSf9Zlr0vi4U5qdw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.0.0-beta.9':
+    resolution: {integrity: sha512-SjdLul42NElqSHO5uINXylMNDx4KjtN3iB2o5nv0dFJV119DB0rxSCswgSEfigqyMXLyOAw3dwdoJIUFiw5Sdg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.0.0-beta.9':
+    resolution: {integrity: sha512-pmAs3H+pYUxAYbz2y7Q2tIfcNVlnPiikZN0SejF7JaDROg4PhQsWWpvlzHZZvD6CuyFCRXayudG8PwpJSk29dg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.0.0-beta.9':
+    resolution: {integrity: sha512-l39LttvdeeueMxuVNn1Z/cNK1YMWNzoIUgTsHCgF2vhY9tl4R+QcSwlviAkvw4AkiAC4El84pGBBVGswyWa8Rw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.0.0-beta.9':
+    resolution: {integrity: sha512-sISzLGpVXNqOYJTo7KcdtUWQulZnW7cqFanBNbe8tCkS1KvlIuckC3MWAihLxpLrmobKh/Wv+wB1aE08VEfCww==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.0.0-beta.9':
+    resolution: {integrity: sha512-8nmeXyBchcqzQtyqjnmMxlLyxBPd+bwlnr5tDr3w6yol0z7Yrfz3T6L4QoZ4TbfhE26t6qWsUa+WQlzMJKsazg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.0.0-beta.9':
+    resolution: {integrity: sha512-x+Vr4SnZayMj5PEFHL7MczrvjK7fYuv2LvakPfXoDYnAOmjhrjX5go3I0Q65uUPWiZxGcS/y0JgAtQqgHSKU8A==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.0.0-beta.9':
+    resolution: {integrity: sha512-4HpvDn3k5P623exDRbo9rjEXcIuHBj3ZV9YcnWJNE9QZ2vzKXGXxCxPuShTAg25JmH8z+b2whmFsnbxDqtgKhA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.0.0-beta.9':
+    resolution: {integrity: sha512-RgJrSk7uAt5QC7ez0p0uNcd/Z0yoXuBL9VvMnZVdEMDA7dcf1/zMCcFt3p2nGsGY7q2qp0hULdBEhsRP2Gq0cw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.0.0-beta.9':
+    resolution: {integrity: sha512-FCpprAxJqDT27C2OaJTAR06+BsmHS2gW7Wu0lC9E6DwiizYP0YjSVFeYvnkluE5O2J4uVR3X2GAaqxbtG4z9Ug==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.0.0-beta.9':
+    resolution: {integrity: sha512-KOf2YKFwrvFVX+RNJsYVC6tsWBxDMTX7/u4SpUepqkwVgq2yCObx/Sqt820lXuKgGJ9dKsTYF2wvMUGom7B71A==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.0.0-beta.9':
+    resolution: {integrity: sha512-1bpui84CDnrjB6TI3AGR9jYUA28+VIfkrM4BH3+VXA9B80+cARtd3ON06ouA5/r/2xs4qe+T85Z1c0k5X6vLeA==}
+    engines: {node: '>= 10'}
+
+  '@tailwindcss/vite@4.0.0-beta.9':
+    resolution: {integrity: sha512-Hf28QkwSLM6bbOkcTQk1iEEOB37v+9vfqdpHUaLSluZpEGCVAFc0i+p2Gvp6MlK840tyixQu5L39VjL2lAZFFQ==}
+    peerDependencies:
+      vite: ^5.2.0 || ^6
+
   '@testing-library/dom@10.4.0':
     resolution: {integrity: sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==}
     engines: {node: '>=18'}
@@ -966,6 +1080,12 @@ packages:
   bindings@1.5.0:
     resolution: {integrity: sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==}
 
+  bits-ui@1.0.0-next.78:
+    resolution: {integrity: sha512-jZjG2ObZ/CNyCNaXecpItC7hRXqJAgEfMhr06/eNrf3wHiiPyhdcy4OkzLcJyxeOrDyj+xma8cZTd3JRWqJdAw==}
+    engines: {node: '>=18', pnpm: '>=8.7.0'}
+    peerDependencies:
+      svelte: ^5.11.0
+
   brace-expansion@1.1.11:
     resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
 
@@ -1130,6 +1250,11 @@ packages:
     resolution: {integrity: sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==}
     engines: {node: '>=8'}
 
+  detect-libc@1.0.3:
+    resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==}
+    engines: {node: '>=0.10'}
+    hasBin: true
+
   detect-libc@2.0.3:
     resolution: {integrity: sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==}
     engines: {node: '>=8'}
@@ -1171,6 +1296,10 @@ packages:
   emoji-regex@9.2.2:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
 
+  enhanced-resolve@5.18.0:
+    resolution: {integrity: sha512-0/r0MySGYG8YqlayBZ6MuCfECmHFdJ5qyPh8s8wa5Hnm6SaFLSK1VYCbj+NKp090Nm1caZhD+QTnmxO7esYGyQ==}
+    engines: {node: '>=10.13.0'}
+
   enquirer@2.4.1:
     resolution: {integrity: sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==}
     engines: {node: '>=8.6'}
@@ -1370,6 +1499,9 @@ packages:
   inherits@2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
 
+  inline-style-parser@0.2.4:
+    resolution: {integrity: sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==}
+
   is-binary-path@2.1.0:
     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
     engines: {node: '>=8'}
@@ -1418,6 +1550,10 @@ packages:
     resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
     hasBin: true
 
+  jiti@2.4.2:
+    resolution: {integrity: sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==}
+    hasBin: true
+
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
@@ -1441,6 +1577,70 @@ packages:
     resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
     engines: {node: '>=6'}
 
+  lightningcss-darwin-arm64@1.29.1:
+    resolution: {integrity: sha512-HtR5XJ5A0lvCqYAoSv2QdZZyoHNttBpa5EP9aNuzBQeKGfbyH5+UipLWvVzpP4Uml5ej4BYs5I9Lco9u1fECqw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.29.1:
+    resolution: {integrity: sha512-k33G9IzKUpHy/J/3+9MCO4e+PzaFblsgBjSGlpAaFikeBFm8B/CkO3cKU9oI4g+fjS2KlkLM/Bza9K/aw8wsNA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.29.1:
+    resolution: {integrity: sha512-0SUW22fv/8kln2LnIdOCmSuXnxgxVC276W5KLTwoehiO0hxkacBxjHOL5EtHD8BAXg2BvuhsJPmVMasvby3LiQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.29.1:
+    resolution: {integrity: sha512-sD32pFvlR0kDlqsOZmYqH/68SqUMPNj+0pucGxToXZi4XZgZmqeX/NkxNKCPsswAXU3UeYgDSpGhu05eAufjDg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.29.1:
+    resolution: {integrity: sha512-0+vClRIZ6mmJl/dxGuRsE197o1HDEeeRk6nzycSy2GofC2JsY4ifCRnvUWf/CUBQmlrvMzt6SMQNMSEu22csWQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-arm64-musl@1.29.1:
+    resolution: {integrity: sha512-UKMFrG4rL/uHNgelBsDwJcBqVpzNJbzsKkbI3Ja5fg00sgQnHw/VrzUTEc4jhZ+AN2BvQYz/tkHu4vt1kLuJyw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-x64-gnu@1.29.1:
+    resolution: {integrity: sha512-u1S+xdODy/eEtjADqirA774y3jLcm8RPtYztwReEXoZKdzgsHYPl0s5V52Tst+GKzqjebkULT86XMSxejzfISw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-linux-x64-musl@1.29.1:
+    resolution: {integrity: sha512-L0Tx0DtaNUTzXv0lbGCLB/c/qEADanHbu4QdcNOXLIe1i8i22rZRpbT3gpWYsCh9aSL9zFujY/WmEXIatWvXbw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-win32-arm64-msvc@1.29.1:
+    resolution: {integrity: sha512-QoOVnkIEFfbW4xPi+dpdft/zAKmgLgsRHfJalEPYuJDOWf7cLQzYg0DEh8/sn737FaeMJxHZRc1oBreiwZCjog==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.29.1:
+    resolution: {integrity: sha512-NygcbThNBe4JElP+olyTI/doBNGJvLs3bFCRPdvuCcxZCcCZ71B858IHpdm7L1btZex0FvCmM17FK98Y9MRy1Q==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.29.1:
+    resolution: {integrity: sha512-FmGoeD4S05ewj+AkhTY+D+myDvXI6eL27FjHIjoyUkO/uw7WZD1fBVs0QxeYWa7E17CUHJaYX/RUGISCtcrG4Q==}
+    engines: {node: '>= 12.0.0'}
+
   lilconfig@3.1.3:
     resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
     engines: {node: '>=14'}
@@ -1798,6 +1998,9 @@ packages:
   regex@5.1.1:
     resolution: {integrity: sha512-dN5I359AVGPnwzJm2jN1k0W9LPZ+ePvoOeVMMfqIMFz53sSwXkxaJoxr50ptnsC771lK95BnTrVSZxq0b9yCGw==}
 
+  resize-observer-polyfill@1.5.1:
+    resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==}
+
   resolve-from@5.0.0:
     resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
     engines: {node: '>=8'}
@@ -1826,6 +2029,16 @@ packages:
   run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
 
+  runed@0.20.0:
+    resolution: {integrity: sha512-YqPxaUdWL5nUXuSF+/v8a+NkVN8TGyEGbQwTA25fLY35MR/2bvZ1c6sCbudoo1kT4CAJPh4kUkcgGVxW127WKw==}
+    peerDependencies:
+      svelte: ^5.7.0
+
+  runed@0.22.0:
+    resolution: {integrity: sha512-ZWVXWhOr0P5xdNgtviz6D1ivLUDWKLCbeC5SUEJ3zBkqLReVqWHenFxMNFeFaiC5bfxhFxyxzyzB+98uYFtwdA==}
+    peerDependencies:
+      svelte: ^5.7.0
+
   sade@1.8.1:
     resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
     engines: {node: '>=6'}
@@ -1917,6 +2130,9 @@ packages:
     resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
     engines: {node: '>=8'}
 
+  style-to-object@1.0.8:
+    resolution: {integrity: sha512-xT47I/Eo0rwJmaXC4oilDGDWLohVhR6o/xAQcPQN8q6QBuZVL8qMYL85kLmST5cPjAorwvqIA4qXTRQoYHaL6g==}
+
   sucrase@3.35.0:
     resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -1938,14 +2154,20 @@ packages:
       svelte: ^4.0.0 || ^5.0.0-next.0
       typescript: '>=5.0.0'
 
+  svelte-toolbelt@0.7.0:
+    resolution: {integrity: sha512-i/Tv4NwAWWqJnK5H0F8y/ubDnogDYlwwyzKhrspTUFzrFuGnYshqd2g4/R43ds841wmaFiSW/HsdsdWhPOlrAA==}
+    engines: {node: '>=18', pnpm: '>=8.7.0'}
+    peerDependencies:
+      svelte: ^5.0.0
+
   svelte2tsx@0.7.31:
     resolution: {integrity: sha512-exrN1o9mdCLAA7hTCudz731FIxomH/0SN9ZIX+WrY/XnlLuno/NNC1PF6JXPZVqp/4sMMDKteqyKoG44hliljQ==}
     peerDependencies:
       svelte: ^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0
       typescript: ^4.9.4 || ^5.0.0
 
-  svelte@5.16.0:
-    resolution: {integrity: sha512-Ygqsiac6UogVED2ruKclU+pOeMThxWtp9LG+li7BXeDKC2paVIsRTMkNmcON4Zejerd1s5sZHWx6ZtU85xklVg==}
+  svelte@5.17.3:
+    resolution: {integrity: sha512-eLgtpR2JiTgeuNQRCDcLx35Z7Lu9Qe09GPOz+gvtR9nmIZu5xgFd6oFiLGQlxLD0/u7xVyF5AUkjDVyFHe6Bvw==}
     engines: {node: '>=18'}
 
   symbol-tree@3.2.4:
@@ -1959,6 +2181,13 @@ packages:
     engines: {node: '>=14.0.0'}
     hasBin: true
 
+  tailwindcss@4.0.0-beta.9:
+    resolution: {integrity: sha512-96KpsfQi+/sFIOfyFnGzyy5pobuzf1iMBD9NVtelerPM/lPI2XUS4Kikw9yuKRniXXw77ov1sl7gCSKLsn6CJA==}
+
+  tapable@2.2.1:
+    resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
+    engines: {node: '>=6'}
+
   tar@7.4.3:
     resolution: {integrity: sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==}
     engines: {node: '>=18'}
@@ -2089,8 +2318,8 @@ packages:
     peerDependencies:
       vite: ^6.0.0
 
-  vite@5.4.11:
-    resolution: {integrity: sha512-c7jFQRklXua0mTzneGW9QVyxFjUgwcihC4bXEtujIo2ouWCe1Ajt/amn2PCxYnhYfd5k09JX3SB7OYWFKYqj8Q==}
+  vite@5.4.8:
+    resolution: {integrity: sha512-FqrItQ4DT1NC4zCUqMB4c4AZORMKIa0m8/URVCZ77OZ/QSNeJ54bU1vrFADbDsuwfIPcgknRkmqakQcgnL4GiQ==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
@@ -2160,6 +2389,46 @@ packages:
       yaml:
         optional: true
 
+  vite@6.0.7:
+    resolution: {integrity: sha512-RDt8r/7qx9940f8FcOIAH9PTViRrghKaK2K1jY3RaAURrEUbm9Du1mJ72G+jlhtG3WwodnfzY8ORQZbBavZEAQ==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0
+      jiti: '>=1.21.0'
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      sass-embedded: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      jiti:
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
   vitefu@1.0.4:
     resolution: {integrity: sha512-y6zEE3PQf6uu/Mt6DTJ9ih+kyJLr4XcSgHR2zUkM8SWDhuixEJxfJ6CZGMHh1Ec3vPLoEA0IHU5oWzVqw8ulow==}
     peerDependencies:
@@ -2629,6 +2898,10 @@ snapshots:
 
   '@floating-ui/utils@0.2.8': {}
 
+  '@internationalized/date@3.7.0':
+    dependencies:
+      '@swc/helpers': 0.5.15
+
   '@isaacs/cliui@8.0.2':
     dependencies:
       string-width: 5.1.2
@@ -2812,9 +3085,9 @@ snapshots:
 
   '@shikijs/vscode-textmate@9.3.1': {}
 
-  '@sveltejs/adapter-vercel@5.5.2(@sveltejs/kit@2.15.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.16.0)(vite@6.0.6(@types/node@22.10.5)(jiti@1.21.7)(yaml@2.7.0)))(svelte@5.16.0)(vite@6.0.6(@types/node@22.10.5)(jiti@1.21.7)(yaml@2.7.0)))(rollup@4.29.1)':
+  '@sveltejs/adapter-vercel@5.5.2(@sveltejs/kit@2.15.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.17.3)(vite@6.0.6(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0)))(svelte@5.17.3)(vite@6.0.6(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0)))(rollup@4.29.1)':
     dependencies:
-      '@sveltejs/kit': 2.15.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.16.0)(vite@6.0.6(@types/node@22.10.5)(jiti@1.21.7)(yaml@2.7.0)))(svelte@5.16.0)(vite@6.0.6(@types/node@22.10.5)(jiti@1.21.7)(yaml@2.7.0))
+      '@sveltejs/kit': 2.15.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.17.3)(vite@6.0.6(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0)))(svelte@5.17.3)(vite@6.0.6(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0))
       '@vercel/nft': 0.27.10(rollup@4.29.1)
       esbuild: 0.24.2
     transitivePeerDependencies:
@@ -2822,9 +3095,9 @@ snapshots:
       - rollup
       - supports-color
 
-  '@sveltejs/kit@2.15.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.16.0)(vite@6.0.6(@types/node@22.10.5)(jiti@1.21.7)(yaml@2.7.0)))(svelte@5.16.0)(vite@6.0.6(@types/node@22.10.5)(jiti@1.21.7)(yaml@2.7.0))':
+  '@sveltejs/kit@2.15.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.17.3)(vite@6.0.6(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0)))(svelte@5.17.3)(vite@6.0.6(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.16.0)(vite@6.0.6(@types/node@22.10.5)(jiti@1.21.7)(yaml@2.7.0))
+      '@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.17.3)(vite@6.0.6(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0))
       '@types/cookie': 0.6.0
       cookie: 0.6.0
       devalue: 5.1.1
@@ -2836,43 +3109,148 @@ snapshots:
       sade: 1.8.1
       set-cookie-parser: 2.7.1
       sirv: 3.0.0
-      svelte: 5.16.0
+      svelte: 5.17.3
       tiny-glob: 0.2.9
-      vite: 6.0.6(@types/node@22.10.5)(jiti@1.21.7)(yaml@2.7.0)
+      vite: 6.0.6(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0)
 
-  '@sveltejs/package@2.3.7(svelte@5.16.0)(typescript@5.7.2)':
+  '@sveltejs/kit@2.15.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.17.3)(vite@6.0.7(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0)))(svelte@5.17.3)(vite@6.0.7(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0))':
+    dependencies:
+      '@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.17.3)(vite@6.0.7(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0))
+      '@types/cookie': 0.6.0
+      cookie: 0.6.0
+      devalue: 5.1.1
+      esm-env: 1.2.1
+      import-meta-resolve: 4.1.0
+      kleur: 4.1.5
+      magic-string: 0.30.17
+      mrmime: 2.0.0
+      sade: 1.8.1
+      set-cookie-parser: 2.7.1
+      sirv: 3.0.0
+      svelte: 5.17.3
+      tiny-glob: 0.2.9
+      vite: 6.0.7(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0)
+
+  '@sveltejs/package@2.3.7(svelte@5.17.3)(typescript@5.7.2)':
     dependencies:
       chokidar: 4.0.3
       kleur: 4.1.5
       sade: 1.8.1
       semver: 7.6.3
-      svelte: 5.16.0
-      svelte2tsx: 0.7.31(svelte@5.16.0)(typescript@5.7.2)
+      svelte: 5.17.3
+      svelte2tsx: 0.7.31(svelte@5.17.3)(typescript@5.7.2)
     transitivePeerDependencies:
       - typescript
 
-  '@sveltejs/vite-plugin-svelte-inspector@4.0.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.16.0)(vite@6.0.6(@types/node@22.10.5)(jiti@1.21.7)(yaml@2.7.0)))(svelte@5.16.0)(vite@6.0.6(@types/node@22.10.5)(jiti@1.21.7)(yaml@2.7.0))':
+  '@sveltejs/vite-plugin-svelte-inspector@4.0.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.17.3)(vite@6.0.6(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0)))(svelte@5.17.3)(vite@6.0.6(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0))':
+    dependencies:
+      '@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.17.3)(vite@6.0.6(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0))
+      debug: 4.4.0
+      svelte: 5.17.3
+      vite: 6.0.6(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@sveltejs/vite-plugin-svelte-inspector@4.0.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.17.3)(vite@6.0.7(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0)))(svelte@5.17.3)(vite@6.0.7(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.16.0)(vite@6.0.6(@types/node@22.10.5)(jiti@1.21.7)(yaml@2.7.0))
+      '@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.17.3)(vite@6.0.7(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0))
       debug: 4.4.0
-      svelte: 5.16.0
-      vite: 6.0.6(@types/node@22.10.5)(jiti@1.21.7)(yaml@2.7.0)
+      svelte: 5.17.3
+      vite: 6.0.7(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.16.0)(vite@6.0.6(@types/node@22.10.5)(jiti@1.21.7)(yaml@2.7.0))':
+  '@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.17.3)(vite@6.0.6(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 4.0.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.16.0)(vite@6.0.6(@types/node@22.10.5)(jiti@1.21.7)(yaml@2.7.0)))(svelte@5.16.0)(vite@6.0.6(@types/node@22.10.5)(jiti@1.21.7)(yaml@2.7.0))
+      '@sveltejs/vite-plugin-svelte-inspector': 4.0.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.17.3)(vite@6.0.6(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0)))(svelte@5.17.3)(vite@6.0.6(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0))
       debug: 4.4.0
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.17
-      svelte: 5.16.0
-      vite: 6.0.6(@types/node@22.10.5)(jiti@1.21.7)(yaml@2.7.0)
-      vitefu: 1.0.4(vite@6.0.6(@types/node@22.10.5)(jiti@1.21.7)(yaml@2.7.0))
+      svelte: 5.17.3
+      vite: 6.0.6(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0)
+      vitefu: 1.0.4(vite@6.0.6(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0))
     transitivePeerDependencies:
       - supports-color
 
+  '@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.17.3)(vite@6.0.7(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0))':
+    dependencies:
+      '@sveltejs/vite-plugin-svelte-inspector': 4.0.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.17.3)(vite@6.0.7(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0)))(svelte@5.17.3)(vite@6.0.7(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0))
+      debug: 4.4.0
+      deepmerge: 4.3.1
+      kleur: 4.1.5
+      magic-string: 0.30.17
+      svelte: 5.17.3
+      vite: 6.0.7(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0)
+      vitefu: 1.0.4(vite@6.0.7(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0))
+    transitivePeerDependencies:
+      - supports-color
+
+  '@swc/helpers@0.5.15':
+    dependencies:
+      tslib: 2.8.1
+
+  '@tailwindcss/node@4.0.0-beta.9':
+    dependencies:
+      enhanced-resolve: 5.18.0
+      jiti: 2.4.2
+      tailwindcss: 4.0.0-beta.9
+
+  '@tailwindcss/oxide-android-arm64@4.0.0-beta.9':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.0.0-beta.9':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.0.0-beta.9':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.0.0-beta.9':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.0.0-beta.9':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.0.0-beta.9':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.0.0-beta.9':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.0.0-beta.9':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.0.0-beta.9':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.0.0-beta.9':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.0.0-beta.9':
+    optional: true
+
+  '@tailwindcss/oxide@4.0.0-beta.9':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.0.0-beta.9
+      '@tailwindcss/oxide-darwin-arm64': 4.0.0-beta.9
+      '@tailwindcss/oxide-darwin-x64': 4.0.0-beta.9
+      '@tailwindcss/oxide-freebsd-x64': 4.0.0-beta.9
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.0.0-beta.9
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.0.0-beta.9
+      '@tailwindcss/oxide-linux-arm64-musl': 4.0.0-beta.9
+      '@tailwindcss/oxide-linux-x64-gnu': 4.0.0-beta.9
+      '@tailwindcss/oxide-linux-x64-musl': 4.0.0-beta.9
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.0.0-beta.9
+      '@tailwindcss/oxide-win32-x64-msvc': 4.0.0-beta.9
+
+  '@tailwindcss/vite@4.0.0-beta.9(vite@6.0.7(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0))':
+    dependencies:
+      '@tailwindcss/node': 4.0.0-beta.9
+      '@tailwindcss/oxide': 4.0.0-beta.9
+      lightningcss: 1.29.1
+      tailwindcss: 4.0.0-beta.9
+      vite: 6.0.7(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0)
+
   '@testing-library/dom@10.4.0':
     dependencies:
       '@babel/code-frame': 7.26.2
@@ -2894,13 +3272,13 @@ snapshots:
       lodash: 4.17.21
       redent: 3.0.0
 
-  '@testing-library/svelte@5.2.6(svelte@5.16.0)(vite@6.0.6(@types/node@22.10.5)(jiti@1.21.7)(yaml@2.7.0))(vitest@2.1.8(@types/node@22.10.5)(jsdom@25.0.1))':
+  '@testing-library/svelte@5.2.6(svelte@5.17.3)(vite@6.0.7(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0))(vitest@2.1.8(@types/node@22.10.5)(jsdom@25.0.1)(lightningcss@1.29.1))':
     dependencies:
       '@testing-library/dom': 10.4.0
-      svelte: 5.16.0
+      svelte: 5.17.3
     optionalDependencies:
-      vite: 6.0.6(@types/node@22.10.5)(jiti@1.21.7)(yaml@2.7.0)
-      vitest: 2.1.8(@types/node@22.10.5)(jsdom@25.0.1)
+      vite: 6.0.7(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0)
+      vitest: 2.1.8(@types/node@22.10.5)(jsdom@25.0.1)(lightningcss@1.29.1)
 
   '@testing-library/user-event@14.5.2(@testing-library/dom@10.4.0)':
     dependencies:
@@ -2957,13 +3335,13 @@ snapshots:
       chai: 5.1.2
       tinyrainbow: 1.2.0
 
-  '@vitest/mocker@2.1.8(vite@5.4.11(@types/node@22.10.5))':
+  '@vitest/mocker@2.1.8(vite@5.4.8(@types/node@22.10.5)(lightningcss@1.29.1))':
     dependencies:
       '@vitest/spy': 2.1.8
       estree-walker: 3.0.3
       magic-string: 0.30.17
     optionalDependencies:
-      vite: 5.4.11(@types/node@22.10.5)
+      vite: 5.4.8(@types/node@22.10.5)(lightningcss@1.29.1)
 
   '@vitest/pretty-format@2.1.8':
     dependencies:
@@ -3070,6 +3448,16 @@ snapshots:
     dependencies:
       file-uri-to-path: 1.0.0
 
+  bits-ui@1.0.0-next.78(svelte@5.17.3):
+    dependencies:
+      '@floating-ui/core': 1.6.8
+      '@floating-ui/dom': 1.6.12
+      '@internationalized/date': 3.7.0
+      esm-env: 1.2.1
+      runed: 0.22.0(svelte@5.17.3)
+      svelte: 5.17.3
+      svelte-toolbelt: 0.7.0(svelte@5.17.3)
+
   brace-expansion@1.1.11:
     dependencies:
       balanced-match: 1.0.2
@@ -3212,6 +3600,8 @@ snapshots:
 
   detect-indent@6.1.0: {}
 
+  detect-libc@1.0.3: {}
+
   detect-libc@2.0.3: {}
 
   devalue@5.1.1: {}
@@ -3242,6 +3632,11 @@ snapshots:
 
   emoji-regex@9.2.2: {}
 
+  enhanced-resolve@5.18.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.2.1
+
   enquirer@2.4.1:
     dependencies:
       ansi-colors: 4.1.3
@@ -3507,6 +3902,8 @@ snapshots:
 
   inherits@2.0.4: {}
 
+  inline-style-parser@0.2.4: {}
+
   is-binary-path@2.1.0:
     dependencies:
       binary-extensions: 2.3.0
@@ -3548,6 +3945,8 @@ snapshots:
 
   jiti@1.21.7: {}
 
+  jiti@2.4.2: {}
+
   js-tokens@4.0.0: {}
 
   js-yaml@3.14.1:
@@ -3590,6 +3989,51 @@ snapshots:
 
   kleur@4.1.5: {}
 
+  lightningcss-darwin-arm64@1.29.1:
+    optional: true
+
+  lightningcss-darwin-x64@1.29.1:
+    optional: true
+
+  lightningcss-freebsd-x64@1.29.1:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.29.1:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.29.1:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.29.1:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.29.1:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.29.1:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.29.1:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.29.1:
+    optional: true
+
+  lightningcss@1.29.1:
+    dependencies:
+      detect-libc: 1.0.3
+    optionalDependencies:
+      lightningcss-darwin-arm64: 1.29.1
+      lightningcss-darwin-x64: 1.29.1
+      lightningcss-freebsd-x64: 1.29.1
+      lightningcss-linux-arm-gnueabihf: 1.29.1
+      lightningcss-linux-arm64-gnu: 1.29.1
+      lightningcss-linux-arm64-musl: 1.29.1
+      lightningcss-linux-x64-gnu: 1.29.1
+      lightningcss-linux-x64-musl: 1.29.1
+      lightningcss-win32-arm64-msvc: 1.29.1
+      lightningcss-win32-x64-msvc: 1.29.1
+
   lilconfig@3.1.3: {}
 
   lines-and-columns@1.2.4: {}
@@ -3612,9 +4056,9 @@ snapshots:
 
   lru-cache@10.4.3: {}
 
-  lucide-svelte@0.469.0(svelte@5.16.0):
+  lucide-svelte@0.469.0(svelte@5.17.3):
     dependencies:
-      svelte: 5.16.0
+      svelte: 5.17.3
 
   lz-string@1.5.0: {}
 
@@ -3899,6 +4343,8 @@ snapshots:
     dependencies:
       regex-utilities: 2.3.0
 
+  resize-observer-polyfill@1.5.1: {}
+
   resolve-from@5.0.0: {}
 
   resolve@1.22.10:
@@ -3945,6 +4391,16 @@ snapshots:
     dependencies:
       queue-microtask: 1.2.3
 
+  runed@0.20.0(svelte@5.17.3):
+    dependencies:
+      esm-env: 1.2.1
+      svelte: 5.17.3
+
+  runed@0.22.0(svelte@5.17.3):
+    dependencies:
+      esm-env: 1.2.1
+      svelte: 5.17.3
+
   sade@1.8.1:
     dependencies:
       mri: 1.2.0
@@ -4033,6 +4489,10 @@ snapshots:
     dependencies:
       min-indent: 1.0.1
 
+  style-to-object@1.0.8:
+    dependencies:
+      inline-style-parser: 0.2.4
+
   sucrase@3.35.0:
     dependencies:
       '@jridgewell/gen-mapping': 0.3.8
@@ -4049,26 +4509,33 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  svelte-check@4.1.1(picomatch@4.0.2)(svelte@5.16.0)(typescript@5.7.2):
+  svelte-check@4.1.1(picomatch@4.0.2)(svelte@5.17.3)(typescript@5.7.2):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       chokidar: 4.0.3
       fdir: 6.4.2(picomatch@4.0.2)
       picocolors: 1.1.1
       sade: 1.8.1
-      svelte: 5.16.0
+      svelte: 5.17.3
       typescript: 5.7.2
     transitivePeerDependencies:
       - picomatch
 
-  svelte2tsx@0.7.31(svelte@5.16.0)(typescript@5.7.2):
+  svelte-toolbelt@0.7.0(svelte@5.17.3):
+    dependencies:
+      clsx: 2.1.1
+      runed: 0.20.0(svelte@5.17.3)
+      style-to-object: 1.0.8
+      svelte: 5.17.3
+
+  svelte2tsx@0.7.31(svelte@5.17.3)(typescript@5.7.2):
     dependencies:
       dedent-js: 1.0.1
       pascal-case: 3.1.2
-      svelte: 5.16.0
+      svelte: 5.17.3
       typescript: 5.7.2
 
-  svelte@5.16.0:
+  svelte@5.17.3:
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@jridgewell/sourcemap-codec': 1.5.0
@@ -4117,6 +4584,10 @@ snapshots:
     transitivePeerDependencies:
       - ts-node
 
+  tailwindcss@4.0.0-beta.9: {}
+
+  tapable@2.2.1: {}
+
   tar@7.4.3:
     dependencies:
       '@isaacs/fs-minipass': 4.0.1
@@ -4237,13 +4708,13 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.2
 
-  vite-node@2.1.8(@types/node@22.10.5):
+  vite-node@2.1.8(@types/node@22.10.5)(lightningcss@1.29.1):
     dependencies:
       cac: 6.7.14
       debug: 4.4.0
       es-module-lexer: 1.6.0
       pathe: 1.1.2
-      vite: 5.4.11(@types/node@22.10.5)
+      vite: 5.4.8(@types/node@22.10.5)(lightningcss@1.29.1)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -4255,13 +4726,13 @@ snapshots:
       - supports-color
       - terser
 
-  vite-plugin-pagefind@0.3.0(vite@6.0.6(@types/node@22.10.5)(jiti@1.21.7)(yaml@2.7.0)):
+  vite-plugin-pagefind@0.3.0(vite@6.0.6(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0)):
     dependencies:
       colorette: 2.0.20
       valibot: 0.31.0-rc.4
-      vite: 6.0.6(@types/node@22.10.5)(jiti@1.21.7)(yaml@2.7.0)
+      vite: 6.0.6(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0)
 
-  vite@5.4.11(@types/node@22.10.5):
+  vite@5.4.8(@types/node@22.10.5)(lightningcss@1.29.1):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.4.49
@@ -4269,8 +4740,9 @@ snapshots:
     optionalDependencies:
       '@types/node': 22.10.5
       fsevents: 2.3.3
+      lightningcss: 1.29.1
 
-  vite@6.0.6(@types/node@22.10.5)(jiti@1.21.7)(yaml@2.7.0):
+  vite@6.0.6(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0):
     dependencies:
       esbuild: 0.24.2
       postcss: 8.4.49
@@ -4278,17 +4750,34 @@ snapshots:
     optionalDependencies:
       '@types/node': 22.10.5
       fsevents: 2.3.3
-      jiti: 1.21.7
+      jiti: 2.4.2
+      lightningcss: 1.29.1
+      yaml: 2.7.0
+
+  vite@6.0.7(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0):
+    dependencies:
+      esbuild: 0.24.2
+      postcss: 8.4.49
+      rollup: 4.29.1
+    optionalDependencies:
+      '@types/node': 22.10.5
+      fsevents: 2.3.3
+      jiti: 2.4.2
+      lightningcss: 1.29.1
       yaml: 2.7.0
 
-  vitefu@1.0.4(vite@6.0.6(@types/node@22.10.5)(jiti@1.21.7)(yaml@2.7.0)):
+  vitefu@1.0.4(vite@6.0.6(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0)):
+    optionalDependencies:
+      vite: 6.0.6(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0)
+
+  vitefu@1.0.4(vite@6.0.7(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0)):
     optionalDependencies:
-      vite: 6.0.6(@types/node@22.10.5)(jiti@1.21.7)(yaml@2.7.0)
+      vite: 6.0.7(@types/node@22.10.5)(jiti@2.4.2)(lightningcss@1.29.1)(yaml@2.7.0)
 
-  vitest@2.1.8(@types/node@22.10.5)(jsdom@25.0.1):
+  vitest@2.1.8(@types/node@22.10.5)(jsdom@25.0.1)(lightningcss@1.29.1):
     dependencies:
       '@vitest/expect': 2.1.8
-      '@vitest/mocker': 2.1.8(vite@5.4.11(@types/node@22.10.5))
+      '@vitest/mocker': 2.1.8(vite@5.4.8(@types/node@22.10.5)(lightningcss@1.29.1))
       '@vitest/pretty-format': 2.1.8
       '@vitest/runner': 2.1.8
       '@vitest/snapshot': 2.1.8
@@ -4304,8 +4793,8 @@ snapshots:
       tinyexec: 0.3.2
       tinypool: 1.0.2
       tinyrainbow: 1.2.0
-      vite: 5.4.11(@types/node@22.10.5)
-      vite-node: 2.1.8(@types/node@22.10.5)
+      vite: 5.4.8(@types/node@22.10.5)(lightningcss@1.29.1)
+      vite-node: 2.1.8(@types/node@22.10.5)(lightningcss@1.29.1)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 22.10.5
diff --git a/sites/floating-ui-svelte.vercel.app/package.json b/sites/floating-ui-svelte.vercel.app/package.json
index 5987db4b..a63261ce 100644
--- a/sites/floating-ui-svelte.vercel.app/package.json
+++ b/sites/floating-ui-svelte.vercel.app/package.json
@@ -6,6 +6,7 @@
 	"scripts": {
 		"build": "vite build && pagefind",
 		"build:watch": "vite dev",
+		"dev": "vite dev",
 		"sync": "svelte-kit sync"
 	},
 	"devDependencies": {
@@ -14,11 +15,12 @@
 		"@sveltejs/kit": "^2.15.1",
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
 		"autoprefixer": "^10.4.20",
+		"clsx": "^2.1.1",
 		"focus-trap": "^7.6.2",
 		"lucide-svelte": "^0.469.0",
 		"pagefind": "^1.3.0",
 		"shiki": "^1.24.4",
-		"svelte": "^5.16.0",
+		"svelte": "^5.17.3",
 		"svelte-check": "^4.1.1",
 		"tailwindcss": "^3.4.17",
 		"typescript": "^5.7.2",
diff --git a/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/+layout.svelte b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/+layout.svelte
index cb3338ec..09f3ee97 100644
--- a/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/+layout.svelte
+++ b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/+layout.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-// Components
-import Navigation from "$lib/components/Navigation/Navigation.svelte";
-import PageFooter from "$lib/components/PageFooter/PageFooter.svelte";
-import PageHeader from "$lib/components/PageHeader/PageHeader.svelte";
+	// Components
+	import Navigation from "$lib/components/Navigation/Navigation.svelte";
+	import PageFooter from "$lib/components/PageFooter/PageFooter.svelte";
+	import PageHeader from "$lib/components/PageHeader/PageHeader.svelte";
 
-// Props
-let { children } = $props();
+	// Props
+	let { children } = $props();
 </script>
 
 <!-- Layout -->
@@ -20,8 +20,7 @@ let { children } = $props();
 		<article
 			id="page-container"
 			class="container p-10 text-lg mx-auto lg:ml-auto lg:px-32"
-			data-pagefind-body
-		>
+			data-pagefind-body>
 			{@render children()}
 		</article>
 		<!-- Page Footer -->
diff --git a/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/api/floating-arrow/+page.svelte b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/api/floating-arrow/+page.svelte
index e902cd53..294c06c9 100644
--- a/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/api/floating-arrow/+page.svelte
+++ b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/api/floating-arrow/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-import CodeBlock from "$lib/components/CodeBlock/CodeBlock.svelte";
-import Table from "$lib/components/Table/Table.svelte";
-import { tableProps } from "./data.js";
+	import CodeBlock from "$lib/components/CodeBlock/CodeBlock.svelte";
+	import Table from "$lib/components/Table/Table.svelte";
+	import { tableProps } from "./data.js";
 </script>
 
 <div class="space-y-10">
@@ -9,13 +9,12 @@ import { tableProps } from "./data.js";
 	<header class="card card-gradient space-y-8">
 		<h1 class="h1"><span>FloatingArrow</span></h1>
 		<p>
-			Renders a customizable <code class="code">{'<svg>'}</code> pointing arrow triangle inside the floating
-			element that gets automatically positioned.
+			Renders a customizable <code class="code">{"<svg>"}</code> pointing arrow
+			triangle inside the floating element that gets automatically positioned.
 		</p>
 		<CodeBlock
 			lang="ts"
-			code={`import { FloatingArrow } from '@skeletonlabs/floating-ui-svelte';`}
-		/>
+			code={`import { FloatingArrow } from '@skeletonlabs/floating-ui-svelte';`} />
 	</header>
 	<!-- Usage -->
 	<section class="space-y-8">
@@ -35,8 +34,7 @@ const floating = useFloating({
 		];
 	}
 });
-`}
-		/>
+`} />
 		<CodeBlock
 			lang="svelte"
 			code={`
@@ -57,8 +55,7 @@ const floating = useFloating({
 		context="{floating.context}"
 	/>
 </div>
-		`}
-		/>
+		`} />
 	</section>
 	<!-- Table: Props -->
 	<section class="space-y-8">
@@ -69,7 +66,9 @@ const floating = useFloating({
 	<section class="space-y-8">
 		<h2 class="h2">Utility Classes and Styles</h2>
 		<p>Provide arbitrary utility classes using the standard attribute.</p>
-		<CodeBlock lang="svelte" code={`<FloatingArrow class="fill-white" />`} />
+		<CodeBlock
+			lang="svelte"
+			code={`<FloatingArrow class="fill-white" />`} />
 	</section>
 	<!-- Compare -->
 	<section class="space-y-8">
diff --git a/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/api/use-click/Example.svelte b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/api/use-click/Example.svelte
index 52307dd8..b19b33c5 100644
--- a/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/api/use-click/Example.svelte
+++ b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/api/use-click/Example.svelte
@@ -1,25 +1,24 @@
 <script lang="ts">
-import {
-	useClick,
-	useFloating,
-	useInteractions,
-} from "@skeletonlabs/floating-ui-svelte";
+	import {
+		useClick,
+		useFloating,
+		useInteractions,
+	} from "@skeletonlabs/floating-ui-svelte";
 
-const floating = useFloating();
-const click = useClick(floating.context);
-const interactions = useInteractions([click]);
+	const floating = useFloating();
+	const click = useClick(floating.context);
+	const interactions = useInteractions([click]);
 </script>
 
 <!-- Reference Element -->
-<button bind:this={floating.elements.reference} {...interactions.getReferenceProps()}>
+<button bind:this={floating.reference} {...interactions.getReferenceProps()}>
 	Reference
 </button>
 
 <!-- Floating Element -->
 <div
-	bind:this={floating.elements.floating}
+	bind:this={floating.floating}
 	style={floating.floatingStyles}
-	{...interactions.getFloatingProps()}
->
+	{...interactions.getFloatingProps()}>
 	Floating
 </div>
diff --git a/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/api/use-dismiss/Example.svelte b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/api/use-dismiss/Example.svelte
index 2ae97bea..707dc851 100644
--- a/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/api/use-dismiss/Example.svelte
+++ b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/api/use-dismiss/Example.svelte
@@ -1,25 +1,24 @@
 <script lang="ts">
-import {
-	useDismiss,
-	useFloating,
-	useInteractions,
-} from "@skeletonlabs/floating-ui-svelte";
+	import {
+		useDismiss,
+		useFloating,
+		useInteractions,
+	} from "@skeletonlabs/floating-ui-svelte";
 
-const floating = useFloating();
-const dismiss = useDismiss(floating.context);
-const interactions = useInteractions([dismiss]);
+	const floating = useFloating();
+	const dismiss = useDismiss(floating.context);
+	const interactions = useInteractions([dismiss]);
 </script>
 
 <!-- Reference Element -->
-<button bind:this={floating.elements.reference} {...interactions.getReferenceProps()}>
+<button bind:this={floating.reference} {...interactions.getReferenceProps()}>
 	Reference
 </button>
 
 <!-- Floating Element -->
 <div
-	bind:this={floating.elements.floating}
+	bind:this={floating.floating}
 	style={floating.floatingStyles}
-	{...interactions.getFloatingProps()}
->
+	{...interactions.getFloatingProps()}>
 	Floating
 </div>
diff --git a/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/api/use-floating/+page.svelte b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/api/use-floating/+page.svelte
index 30f29ba1..47739eae 100644
--- a/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/api/use-floating/+page.svelte
+++ b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/api/use-floating/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-import CodeBlock from "$lib/components/CodeBlock/CodeBlock.svelte";
-import Table from "$lib/components/Table/Table.svelte";
-import { tableOptions, tableReturns } from "./data.js";
+	import CodeBlock from "$lib/components/CodeBlock/CodeBlock.svelte";
+	import Table from "$lib/components/Table/Table.svelte";
+	import { tableOptions, tableReturns } from "./data.js";
 </script>
 
 <div class="space-y-10">
@@ -9,20 +9,26 @@ import { tableOptions, tableReturns } from "./data.js";
 	<header class="card card-gradient space-y-8">
 		<h1 class="h1"><span>useFloating</span></h1>
 		<p>
-			The main Hook of the library that acts as a controller for all other Hooks and components.
+			The main Hook of the library that acts as a controller for all other
+			Hooks and components.
 		</p>
-		<CodeBlock lang="ts" code={`import { useFloating } from '@skeletonlabs/floating-ui-svelte';`} />
+		<CodeBlock
+			lang="ts"
+			code={`import { useFloating } from '@skeletonlabs/floating-ui-svelte';`} />
 	</header>
 	<!-- Usage -->
 	<section class="space-y-8">
 		<h2 class="h2">Usage</h2>
 		<p>
-			The <code class="code">useFloating</code> Svelte hook acts as a controller for all other Floating
-			UI Svelte features. It handles positioning your floating elements (tooltips, popovers, etc.) relative
-			to an anchored element. Automatically calculates the best placement and updates it as needed, providing
-			access to properties for position and style.
+			The <code class="code">useFloating</code> Svelte hook acts as a controller
+			for all other Floating UI Svelte features. It handles positioning your
+			floating elements (tooltips, popovers, etc.) relative to an anchored
+			element. Automatically calculates the best placement and updates it as
+			needed, providing access to properties for position and style.
 		</p>
-		<CodeBlock lang="ts" code={`const floating = useFloating({\n\t/* options */\n});`} />
+		<CodeBlock
+			lang="ts"
+			code={`const floating = useFloating({\n\t/* options */\n});`} />
 		<CodeBlock
 			lang="html"
 			code={`
@@ -38,13 +44,15 @@ import { tableOptions, tableReturns } from "./data.js";
 >
 	Floating
 </div>
-		`}
-		/>
+		`} />
 	</section>
 	<!-- Alert: Destructuring -->
 	<div class="alert">
 		<h3 class="h3">Note</h3>
-		<p>Destructured variables are not supported as this would break reactivity.</p>
+		<p>
+			Destructured variables are not supported as this would break
+			reactivity.
+		</p>
 	</div>
 	<!-- Table: Options -->
 	<section class="space-y-8">
diff --git a/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/api/use-focus/+page.svelte b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/api/use-focus/+page.svelte
index ab366c73..9c9c997c 100644
--- a/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/api/use-focus/+page.svelte
+++ b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/api/use-focus/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-import CodeBlock from "$lib/components/CodeBlock/CodeBlock.svelte";
-import Table from "$lib/components/Table/Table.svelte";
-import ExampleRaw from "./Example.svelte?raw";
-import { tableOptions } from "./data.js";
+	import CodeBlock from "$lib/components/CodeBlock/CodeBlock.svelte";
+	import Table from "$lib/components/Table/Table.svelte";
+	import ExampleRaw from "./Example.svelte?raw";
+	import { tableOptions } from "./data.js";
 </script>
 
 <div class="space-y-10">
@@ -10,10 +10,13 @@ import { tableOptions } from "./data.js";
 	<header class="card card-gradient space-y-8">
 		<h1 class="h1"><span>useFocus</span></h1>
 		<p>
-			Opens the floating element while the reference element has focus, like CSS
+			Opens the floating element while the reference element has focus,
+			like CSS
 			<code class="code">:focus</code>.
 		</p>
-		<CodeBlock lang="ts" code={`import { useFocus } from '@skeletonlabs/floating-ui-svelte';`} />
+		<CodeBlock
+			lang="ts"
+			code={`import { useFocus } from '@skeletonlabs/floating-ui-svelte';`} />
 		<!-- TODO: add when FloatingFocusManager is ready -->
 		<!-- <p>To manage focus within the floating element itself, use <a class="anchor" href="/api/floating-focus-manager">FloatingFocusManager</a>.</p> -->
 	</header>
@@ -21,10 +24,11 @@ import { tableOptions } from "./data.js";
 	<section class="space-y-8">
 		<h2 class="h2">Usage</h2>
 		<p>
-			This Hook returns event handler props. To use it, pass it the context object returned from <code
-				class="code">useFloating()</code
-			>, and then feed its result into the <code class="code">useInteractions()</code> array. The returned
-			prop getters are then spread onto the elements for rendering.
+			This Hook returns event handler props. To use it, pass it the
+			context object returned from <code class="code">useFloating()</code
+			>, and then feed its result into the
+			<code class="code">useInteractions()</code> array. The returned prop
+			getters are then spread onto the elements for rendering.
 		</p>
 		<CodeBlock code={ExampleRaw} lang="svelte" mark={[2, 5, 6]} />
 	</section>
diff --git a/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/api/use-focus/Example.svelte b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/api/use-focus/Example.svelte
index ab5a4278..a75d6df4 100644
--- a/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/api/use-focus/Example.svelte
+++ b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/api/use-focus/Example.svelte
@@ -1,25 +1,24 @@
 <script lang="ts">
-import {
-	useFloating,
-	useFocus,
-	useInteractions,
-} from "@skeletonlabs/floating-ui-svelte";
+	import {
+		useFloating,
+		useFocus,
+		useInteractions,
+	} from "@skeletonlabs/floating-ui-svelte";
 
-const floating = useFloating();
-const focus = useFocus(floating.context);
-const interactions = useInteractions([focus]);
+	const floating = useFloating();
+	const focus = useFocus(floating.context);
+	const interactions = useInteractions([focus]);
 </script>
 
 <!-- Reference Element -->
-<button bind:this={floating.elements.reference} {...interactions.getReferenceProps()}>
+<button bind:this={floating.reference} {...interactions.getReferenceProps()}>
 	Reference
 </button>
 
 <!-- Floating Element -->
 <div
-	bind:this={floating.elements.floating}
+	bind:this={floating.floating}
 	style={floating.floatingStyles}
-	{...interactions.getFloatingProps()}
->
+	{...interactions.getFloatingProps()}>
 	Floating
 </div>
diff --git a/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/api/use-hover/+page.svelte b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/api/use-hover/+page.svelte
index 8fad14ff..34e8c679 100644
--- a/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/api/use-hover/+page.svelte
+++ b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/api/use-hover/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-import CodeBlock from "$lib/components/CodeBlock/CodeBlock.svelte";
-import Table from "$lib/components/Table/Table.svelte";
-import { tableOptions } from "./data.js";
+	import CodeBlock from "$lib/components/CodeBlock/CodeBlock.svelte";
+	import Table from "$lib/components/Table/Table.svelte";
+	import { tableOptions } from "./data.js";
 </script>
 
 <div class="space-y-10">
@@ -9,10 +9,13 @@ import { tableOptions } from "./data.js";
 	<header class="card card-gradient space-y-8">
 		<h1 class="h1"><span>useHover</span></h1>
 		<p>
-			Opens the floating element while hovering over the reference element, like CSS
+			Opens the floating element while hovering over the reference
+			element, like CSS
 			<code class="code">:hover</code>.
 		</p>
-		<CodeBlock lang="ts" code={`import { useHover } from '@skeletonlabs/floating-ui-svelte';`} />
+		<CodeBlock
+			lang="ts"
+			code={`import { useHover } from '@skeletonlabs/floating-ui-svelte';`} />
 	</header>
 	<!-- Usage -->
 	<section class="space-y-8">
@@ -25,8 +28,7 @@ import { useFloating, useInteractions, useHover } from '@skeletonlabs/floating-u
 const floating = useFloating();
 const hover = useHover(floating.context);
 const interactions = useInteractions([hover]);
-`}
-		/>
+`} />
 		<CodeBlock
 			lang="svelte"
 			code={`
@@ -46,8 +48,7 @@ const interactions = useInteractions([hover]);
 >
 	Tooltip
 </div>
-		`}
-		/>
+		`} />
 	</section>
 	<!-- Table: Options -->
 	<section class="space-y-8">
diff --git a/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/api/use-interactions/+page.svelte b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/api/use-interactions/+page.svelte
index 25e79947..990c44c7 100644
--- a/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/api/use-interactions/+page.svelte
+++ b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/api/use-interactions/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-import CodeBlock from "$lib/components/CodeBlock/CodeBlock.svelte";
-import Table from "$lib/components/Table/Table.svelte";
-import { tableReturns } from "./data.js";
+	import CodeBlock from "$lib/components/CodeBlock/CodeBlock.svelte";
+	import Table from "$lib/components/Table/Table.svelte";
+	import { tableReturns } from "./data.js";
 </script>
 
 <div class="space-y-10">
@@ -11,16 +11,16 @@ import { tableReturns } from "./data.js";
 		<p>A hook to merge or compose interaction event handlers together.</p>
 		<CodeBlock
 			lang="ts"
-			code={`import { useInteractions } from '@skeletonlabs/floating-ui-svelte';`}
-		/>
+			code={`import { useInteractions } from '@skeletonlabs/floating-ui-svelte';`} />
 	</header>
 	<!-- Usage -->
 	<section class="space-y-8">
 		<h2 class="h2">Usage</h2>
 		<p>
-			The <code class="code">useInteractions</code> Svelte hook allows you to consume multiple interactions.
-			It ensures that event listeners from different hooks are properly registered instead of being overruled
-			by one another.
+			The <code class="code">useInteractions</code> Svelte hook allows you
+			to consume multiple interactions. It ensures that event listeners from
+			different hooks are properly registered instead of being overruled by
+			one another.
 		</p>
 		<CodeBlock
 			lang="ts"
@@ -33,8 +33,7 @@ const hover = useHover(floating.context);
 const focus = useFocus(floating.context);
 
 const interactions = useInteractions([hover, focus]);
-`}
-		/>
+`} />
 		<CodeBlock
 			lang="svelte"
 			code={`
@@ -47,11 +46,11 @@ const interactions = useInteractions([hover, focus]);
 <div {...interactions.getFloatingProps()}>
 	Floating
 </div>
-		`}
-		/>
+		`} />
 		<p>
-			When you want to apply an event handler to an element that uses a props getter, make sure to
-			pass it through the getter instead of applying it directly:
+			When you want to apply an event handler to an element that uses a
+			props getter, make sure to pass it through the getter instead of
+			applying it directly:
 		</p>
 		<CodeBlock
 			lang="svelte"
@@ -61,10 +60,10 @@ const interactions = useInteractions([hover, focus]);
 
 <!-- Correct -->
 <div {...interactions.getReferenceProps({ onclick: /* event handler */})}>Reference</div>
-		`}
-		/>
+		`} />
 		<p>
-			This will ensure all event handlers will be registered rather being overruled by each-other.
+			This will ensure all event handlers will be registered rather being
+			overruled by each-other.
 		</p>
 	</section>
 	<!-- Table: Returns -->
diff --git a/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/api/use-role/+page.svelte b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/api/use-role/+page.svelte
index d16b8804..fa91aa96 100644
--- a/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/api/use-role/+page.svelte
+++ b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/api/use-role/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-import CodeBlock from "$lib/components/CodeBlock/CodeBlock.svelte";
-import Table from "$lib/components/Table/Table.svelte";
-import { tableOptions } from "./data.js";
+	import CodeBlock from "$lib/components/CodeBlock/CodeBlock.svelte";
+	import Table from "$lib/components/Table/Table.svelte";
+	import { tableOptions } from "./data.js";
 </script>
 
 <div class="space-y-10">
@@ -9,14 +9,17 @@ import { tableOptions } from "./data.js";
 	<header class="card card-gradient space-y-8">
 		<h1 class="h1"><span>useRole</span></h1>
 		<p>
-			Adds base screen reader props to the reference and floating elements for a given
+			Adds base screen reader props to the reference and floating elements
+			for a given
 			<code class="code">role</code>.
 		</p>
-		<CodeBlock lang="ts" code={`import { useRole } from '@skeletonlabs/floating-ui-svelte';`} />
+		<CodeBlock
+			lang="ts"
+			code={`import { useRole } from '@skeletonlabs/floating-ui-svelte';`} />
 		<p>
-			This is useful to automatically apply ARIA props to the reference and floating elements to
-			ensure they’re accessible to assistive technology, including item elements if narrowly
-			specified.
+			This is useful to automatically apply ARIA props to the reference
+			and floating elements to ensure they’re accessible to assistive
+			technology, including item elements if narrowly specified.
 		</p>
 	</header>
 	<!-- Usage -->
@@ -30,8 +33,7 @@ import { useFloating, useInteractions, useRole } from '@skeletonlabs/floating-ui
 const floating = useFloating();
 const role = useRole(floating.context, { role: 'tooltip' });
 const interactions = useInteractions([role]);
-`}
-		/>
+`} />
 		<CodeBlock
 			lang="svelte"
 			code={`
@@ -51,8 +53,7 @@ const interactions = useInteractions([role]);
 >
 	Tooltip
 </div>
-		`}
-		/>
+		`} />
 	</section>
 	<!-- Table: Options -->
 	<section class="space-y-8">
diff --git a/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/api/utilities/+page.svelte b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/api/utilities/+page.svelte
index 410ce1a6..a49bf738 100644
--- a/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/api/utilities/+page.svelte
+++ b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/api/utilities/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-import CodeBlock from "$lib/components/CodeBlock/CodeBlock.svelte";
+	import CodeBlock from "$lib/components/CodeBlock/CodeBlock.svelte";
 </script>
 
 <div class="space-y-10">
@@ -12,8 +12,8 @@ import CodeBlock from "$lib/components/CodeBlock/CodeBlock.svelte";
 	<section class="space-y-8">
 		<h2 class="h2">useId</h2>
 		<p>
-			Generates a unique identifier string. This function combines a random string and an
-			incrementing counter to ensure uniqueness.
+			Generates a unique identifier string. This function combines a
+			random string and an incrementing counter to ensure uniqueness.
 		</p>
 		<CodeBlock
 			lang="ts"
@@ -21,8 +21,7 @@ import CodeBlock from "$lib/components/CodeBlock/CodeBlock.svelte";
 import { useId } from '@skeletonlabs/floating-ui-svelte';
 
 const id = useId();
-`}
-		/>
+`} />
 	</section>
 	<!-- Compare -->
 	<section class="space-y-8">
diff --git a/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/examples/popovers/Example.svelte b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/examples/popovers/Example.svelte
index f0c04315..3b2abe98 100644
--- a/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/examples/popovers/Example.svelte
+++ b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/examples/popovers/Example.svelte
@@ -1,67 +1,70 @@
 <script lang="ts">
-import {
-	FloatingArrow,
-	arrow,
-	autoUpdate,
-	flip,
-	offset,
-	useClick,
-	useDismiss,
-	useFloating,
-	useInteractions,
-	useRole,
-} from "@skeletonlabs/floating-ui-svelte";
-import { fade } from "svelte/transition";
+	import {
+		FloatingArrow,
+		arrow,
+		autoUpdate,
+		flip,
+		offset,
+		useClick,
+		useDismiss,
+		useFloating,
+		useFocus,
+		useInteractions,
+		useRole,
+	} from "@skeletonlabs/floating-ui-svelte";
+	import { fade } from "svelte/transition";
 
-// State
-let open = $state(false);
-let elemArrow: HTMLElement | null = $state(null);
+	// State
+	let open = $state(false);
+	let elemArrow: HTMLElement | null = $state(null);
 
-// Use Floating
-const floating = useFloating({
-	whileElementsMounted: autoUpdate,
-	get open() {
-		return open;
-	},
-	onOpenChange: (v) => {
-		open = v;
-	},
-	placement: "top",
-	get middleware() {
-		return [offset(10), flip(), elemArrow && arrow({ element: elemArrow })];
-	},
-});
+	// Use Floating
+	const floating = useFloating({
+		whileElementsMounted: autoUpdate,
+		open: () => open,
+		onOpenChange: (v) => {
+			open = v;
+		},
+		placement: "top",
+		middleware: () => [
+			offset(10),
+			flip(),
+			elemArrow && arrow({ element: elemArrow }),
+		],
+	});
 
-// Interactions
-const role = useRole(floating.context);
-const click = useClick(floating.context);
-const dismiss = useDismiss(floating.context);
-const interactions = useInteractions([role, click, dismiss]);
+	// Interactions
+	const role = useRole(floating.context);
+	const click = useClick(floating.context);
+	const dismiss = useDismiss(floating.context);
+	const interactions = useInteractions([role, click, dismiss]);
 </script>
 
 <div>
 	<!-- Reference Element -->
 	<button
-		bind:this={floating.elements.reference}
+		bind:this={floating.reference}
 		{...interactions.getReferenceProps()}
-		class="btn-gradient"
-	>
+		class="btn-gradient">
 		Click Me
 	</button>
 	<!-- Floating Element -->
 	{#if open}
 		<div
-			bind:this={floating.elements.floating}
+			bind:this={floating.floating}
 			style={floating.floatingStyles}
 			{...interactions.getFloatingProps()}
 			class="floating popover-neutral"
-			transition:fade={{ duration: 200 }}
-		>
+			transition:fade={{ duration: 200 }}>
 			<p>
-				You can press the <kbd class="kbd">esc</kbd> key or click outside to
+				You can press the <kbd class="kbd">esc</kbd> key or click
+				outside to
 				<strong>*dismiss*</strong> this floating element.
 			</p>
-			<FloatingArrow bind:ref={elemArrow} context={floating.context} fill="#575969" />
+			<FloatingArrow
+				bind:ref={elemArrow}
+				context={floating.context}
+				fill="#575969" />
 		</div>
 	{/if}
 </div>
diff --git a/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/examples/tooltips/+page.svelte b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/examples/tooltips/+page.svelte
index bcd9ad4e..8c06a0e3 100644
--- a/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/examples/tooltips/+page.svelte
+++ b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/examples/tooltips/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-import CodeBlock from "$lib/components/CodeBlock/CodeBlock.svelte";
-import Preview from "$lib/components/Preview/Preview.svelte";
-import Example from "./Example.svelte";
-import exampleCode from "./Example.svelte?raw";
+	import CodeBlock from "$lib/components/CodeBlock/CodeBlock.svelte";
+	import Preview from "$lib/components/Preview/Preview.svelte";
+	import Example from "./Example.svelte";
+	import exampleCode from "./Example.svelte?raw";
 </script>
 
 <div class="space-y-10">
@@ -10,8 +10,9 @@ import exampleCode from "./Example.svelte?raw";
 	<header class="card card-gradient space-y-8">
 		<h1 class="h1"><span>Tooltips</span></h1>
 		<p>
-			A tooltip is a floating element that displays information related to a button or anchor
-			element when it receives keyboard focus or the mouse hovers over it.
+			A tooltip is a floating element that displays information related to
+			a button or anchor element when it receives keyboard focus or the
+			mouse hovers over it.
 		</p>
 	</header>
 	<!-- Essentials -->
@@ -20,21 +21,25 @@ import exampleCode from "./Example.svelte?raw";
 		<p>An accessible tooltip component has the following qualities:</p>
 		<ul class="ul">
 			<li>
-				<span class="highlight">Dynamic anchor positioning</span>: The tooltip is positioned next to
-				its reference element, and remains anchored to it while avoiding collisions.
+				<span class="highlight">Dynamic anchor positioning</span>: The
+				tooltip is positioned next to its reference element, and remains
+				anchored to it while avoiding collisions.
 			</li>
 			<li>
-				<span class="highlight">Events</span>: When the mouse hovers over the reference element, or
-				when the reference element receives keyboard focus, the tooltip opens. When the mouse
+				<span class="highlight">Events</span>: When the mouse hovers
+				over the reference element, or when the reference element
+				receives keyboard focus, the tooltip opens. When the mouse
 				leaves, or the reference is blurred, the tooltip closes.
 			</li>
 			<li>
-				<span class="highlight">Dismissal</span>: When the user presses the
+				<span class="highlight">Dismissal</span>: When the user presses
+				the
 				<kbd class="kbd">esc</kbd> key while the tooltip is open, it closes.
 			</li>
 			<li>
-				<span class="highlight">Role</span>: The elements are given relevant role and ARIA
-				attributes to be accessible to screen readers.
+				<span class="highlight">Role</span>: The elements are given
+				relevant role and ARIA attributes to be accessible to screen
+				readers.
 			</li>
 		</ul>
 	</section>
@@ -43,7 +48,9 @@ import exampleCode from "./Example.svelte?raw";
 		<h2 class="h2">Example</h2>
 		<Preview>
 			{#snippet preview()}<Example />{/snippet}
-			{#snippet code()}<CodeBlock code={exampleCode} lang="html" />{/snippet}
+			{#snippet code()}<CodeBlock
+					code={exampleCode}
+					lang="html" />{/snippet}
 		</Preview>
 	</section>
 	<!-- Open State -->
@@ -51,34 +58,40 @@ import exampleCode from "./Example.svelte?raw";
 		<h2 class="h2">Open State</h2>
 		<CodeBlock code={`let open = $state(false);`} lang="ts" />
 		<p>
-			<code class="code">open</code> determines whether or not the tooltip is currently open on the screen.
-			It is used for conditional rendering.
+			<code class="code">open</code> determines whether or not the tooltip
+			is currently open on the screen. It is used for conditional rendering.
 		</p>
 	</section>
 	<!-- useFloating Hook -->
 	<section class="space-y-8">
 		<h2 class="h2">useFloating Hook</h2>
 		<p>
-			The <a class="anchor" href="/api/use-floating">useFloating</a> hook provides positioning and context
-			for our tooltip. We need to pass it some information:
+			The <a class="anchor" href="/api/use-floating">useFloating</a> hook provides
+			positioning and context for our tooltip. We need to pass it some information:
 		</p>
-		<CodeBlock code={`const floating = useFloating({ /* ...settings... */ });`} lang="ts" />
+		<CodeBlock
+			code={`const floating = useFloating({ /* ...settings... */ });`}
+			lang="ts" />
 		<ul class="ul">
 			<li>
-				<code class="code">open</code>: The open state from our <code class="code">useState()</code>
+				<code class="code">open</code>: The open state from our
+				<code class="code">useState()</code>
 				Hook above.
 			</li>
 			<li>
-				<code class="code">onOpenChange</code>: A callback function that will be called when the
-				tooltip is opened or closed. We’ll use this to update our <code class="code">open</code> state.
+				<code class="code">onOpenChange</code>: A callback function that
+				will be called when the tooltip is opened or closed. We’ll use
+				this to update our <code class="code">open</code> state.
 			</li>
 			<li>
-				<code class="code">middleware</code>: Import and pass middleware to the array that ensure
-				the tooltip remains on the screen, no matter where it ends up being positioned.
+				<code class="code">middleware</code>: Import and pass middleware
+				to the array that ensure the tooltip remains on the screen, no
+				matter where it ends up being positioned.
 			</li>
 			<li>
-				<code class="code">whileElementsMounted</code>: Ensure the tooltip remains anchored to the
-				reference element by updating the position when necessary, only while both the reference and
+				<code class="code">whileElementsMounted</code>: Ensure the
+				tooltip remains anchored to the reference element by updating
+				the position when necessary, only while both the reference and
 				floating elements are mounted for performance.
 			</li>
 		</ul>
@@ -87,10 +100,13 @@ import exampleCode from "./Example.svelte?raw";
 	<section class="space-y-8">
 		<h2 class="h2">Interaction Hooks</h2>
 		<p>
-			The <a class="anchor" href="/api/use-interactions">useInteractions</a> hooks returns an object
-			containing keys of props that enable the tooltip to be opened, closed, or accessible to screen
-			readers. Using the
-			<code class="code">context</code> that was returned from the Hook, call the interaction Hooks.
+			The <a class="anchor" href="/api/use-interactions"
+				>useInteractions</a>
+			hooks returns an object containing keys of props that enable the
+			tooltip to be opened, closed, or accessible to screen readers. Using
+			the
+			<code class="code">context</code> that was returned from the Hook, call
+			the interaction Hooks.
 		</p>
 		<CodeBlock
 			code={`
@@ -99,34 +115,40 @@ const hover = useHover(floating.context, { move: false });
 const dismiss = useDismiss(floating.context);
 const interactions = useInteractions([role, hover, dismiss]);
 		`}
-			lang="ts"
-		/>
+			lang="ts" />
 		<ul class="ul">
 			<li>
-				<code class="code">useRole()</code>: adds the correct ARIA attributes for a
+				<code class="code">useRole()</code>: adds the correct ARIA
+				attributes for a
 				<code class="code">tooltip</code> to the tooltip and reference elements.
 			</li>
 			<li>
-				<code class="code">useHover()</code>: adds the ability to toggle the tooltip open or closed
-				when the reference element is hovered over. The <code class="code">move</code> option is set
-				to false so that
+				<code class="code">useHover()</code>: adds the ability to toggle
+				the tooltip open or closed when the reference element is hovered
+				over. The <code class="code">move</code> option is set to false
+				so that
 				<code class="code">mousemove</code> events are ignored.
 			</li>
 			<li>
-				<code class="code">useDismiss()</code>: adds the ability to dismiss the tooltip when the
-				user presses the <kbd class="kbd">esc</kbd> key.
+				<code class="code">useDismiss()</code>: adds the ability to
+				dismiss the tooltip when the user presses the
+				<kbd class="kbd">esc</kbd> key.
 			</li>
 			<!-- TODO: update when useFocus is ready -->
 			<li class="opacity-50 line-through">
-				COMING SOON: <code class="code">useFocus()</code>: adds the ability to toggle the tooltip
-				open or closed when the reference element is focused.
+				COMING SOON: <code class="code">useFocus()</code>: adds the
+				ability to toggle the tooltip open or closed when the reference
+				element is focused.
 			</li>
 		</ul>
 	</section>
 	<!-- Rendering -->
 	<section class="space-y-8">
 		<h2 class="h2">Rendering</h2>
-		<p>Now we have all the variables and Hooks set up, we can render out our elements.</p>
+		<p>
+			Now we have all the variables and Hooks set up, we can render out
+			our elements.
+		</p>
 		<CodeBlock
 			lang="html"
 			code={`
@@ -155,13 +177,14 @@ const interactions = useInteractions([role, hover, dismiss]);
 		<FloatingArrow bind:ref={elemArrow} context={floating.context} fill="#575969" />
 	</div>
 {/if}
-		`}
-		/>
+		`} />
 		<p>
 			<code class="code">{`{...getReferenceProps()}`}</code> and
-			<code class="code">{`{...getFloatingProps()}`}</code> spreads the props from the interaction
-			Hooks onto the relevant elements. They contain props like
-			<code class="code">onMouseEnter</code>, <code class="code">aria-describedby</code>, etc.
+			<code class="code">{`{...getFloatingProps()}`}</code> spreads the
+			props from the interaction Hooks onto the relevant elements. They
+			contain props like
+			<code class="code">onMouseEnter</code>,
+			<code class="code">aria-describedby</code>, etc.
 		</p>
 	</section>
 </div>
diff --git a/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/examples/tooltips/Example.svelte b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/examples/tooltips/Example.svelte
index bee630a9..c569417d 100644
--- a/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/examples/tooltips/Example.svelte
+++ b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/examples/tooltips/Example.svelte
@@ -1,67 +1,68 @@
 <script lang="ts">
-import {
-	FloatingArrow,
-	arrow,
-	autoUpdate,
-	flip,
-	offset,
-	useDismiss,
-	useFloating,
-	useHover,
-	useInteractions,
-	useRole,
-} from "@skeletonlabs/floating-ui-svelte";
-import { fade } from "svelte/transition";
+	import {
+		FloatingArrow,
+		arrow,
+		autoUpdate,
+		flip,
+		offset,
+		useDismiss,
+		useFloating,
+		useHover,
+		useInteractions,
+		useRole,
+	} from "@skeletonlabs/floating-ui-svelte";
+	import { fade } from "svelte/transition";
 
-// State
-let open = $state(false);
-let elemArrow: HTMLElement | null = $state(null);
+	// State
+	let open = $state(false);
+	let elemArrow: HTMLElement | null = $state(null);
 
-// Use Floating
-const floating = useFloating({
-	whileElementsMounted: autoUpdate,
-	get open() {
-		return open;
-	},
-	onOpenChange: (v) => {
-		open = v;
-	},
-	placement: "top",
-	get middleware() {
-		return [offset(10), flip(), elemArrow && arrow({ element: elemArrow })];
-	},
-});
+	// Use Floating
+	const floating = useFloating({
+		whileElementsMounted: autoUpdate,
+		open: () => open,
+		onOpenChange: (v) => {
+			open = v;
+		},
+		placement: "top",
+		middleware: () => [
+			offset(10),
+			flip(),
+			elemArrow && arrow({ element: elemArrow }),
+		],
+	});
 
-// Interactions
-const role = useRole(floating.context, { role: "tooltip" });
-const hover = useHover(floating.context, { move: false });
-const dismiss = useDismiss(floating.context);
-const interactions = useInteractions([role, hover, dismiss]);
+	// Interactions
+	const role = useRole(floating.context, { role: "tooltip" });
+	const hover = useHover(floating.context, { move: false });
+	const dismiss = useDismiss(floating.context);
+	const interactions = useInteractions([role, hover, dismiss]);
 </script>
 
 <div>
 	<!-- Reference Element -->
 	<button
-		bind:this={floating.elements.reference}
 		{...interactions.getReferenceProps()}
-		class="btn-gradient"
-	>
+		bind:this={floating.reference}
+		class="btn-gradient">
 		Hover Me
 	</button>
 	<!-- Floating Element -->
 	{#if open}
 		<div
-			bind:this={floating.elements.floating}
+			bind:this={floating.floating}
 			style={floating.floatingStyles}
 			{...interactions.getFloatingProps()}
 			class="floating popover-neutral"
-			transition:fade={{ duration: 200 }}
-		>
+			transition:fade={{ duration: 200 }}>
 			<p>
-				A <strong>floating element</strong> is one that floats on top of the UI without disrupting the
-				flow, like this one!
+				A <strong>floating element</strong> is one that floats on top of
+				the UI without disrupting the flow, like this one!
 			</p>
-			<FloatingArrow bind:ref={elemArrow} context={floating.context} fill="#575969" />
+			<FloatingArrow
+				bind:ref={elemArrow}
+				context={floating.context}
+				fill="#575969" />
 		</div>
 	{/if}
 </div>
diff --git a/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/sink/(drawer)/drawer.svelte b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/sink/(drawer)/drawer.svelte
new file mode 100644
index 00000000..ae3d1cd9
--- /dev/null
+++ b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/sink/(drawer)/drawer.svelte
@@ -0,0 +1,93 @@
+<script lang="ts">
+	import {
+		FloatingFocusManager,
+		FloatingOverlay,
+		FloatingPortal,
+		useClick,
+		useDismiss,
+		useFloating,
+		useId,
+		useInteractions,
+		useRole,
+		type Boxed,
+	} from "@skeletonlabs/floating-ui-svelte";
+	import type { Snippet } from "svelte";
+	import { MediaQuery } from "svelte/reactivity";
+
+	let {
+		reference,
+		content,
+	}: {
+		reference: Snippet<
+			[reference: Boxed<Element | null>, props: Record<string, unknown>]
+		>;
+		content: Snippet<
+			[{ labelId: string; descriptionId: string; close: () => void }]
+		>;
+	} = $props();
+
+	let open = $state(false);
+
+	const ref = $state<{ current: Element | null }>({ current: null });
+
+	const isLargeScreen = new MediaQuery("min-width: 1400px");
+	const f = useFloating({
+		reference: () => ref.current,
+		onReferenceChange: (v) => {
+			ref.current = v;
+		},
+		open: () => open,
+		onOpenChange: (v) => {
+			open = v;
+		},
+	});
+
+	const id = useId();
+
+	const labelId = `${id}-label`;
+	const descriptionId = `${id}-description`;
+
+	const modal = $derived(!isLargeScreen.current);
+
+	const ints = useInteractions([
+		useClick(f.context),
+		useRole(f.context),
+		useDismiss(f.context, {
+			outsidePress: () => modal,
+			outsidePressEvent: "mousedown",
+		}),
+	]);
+</script>
+
+{#snippet Content()}
+	<FloatingFocusManager context={f.context} {modal} closeOnFocusOut={modal}>
+		<div
+			bind:this={f.floating}
+			aria-labelledby={labelId}
+			aria-describedby={descriptionId}
+			class="absolute top-0 right-0 h-full w-48 bg-slate-100 p-4"
+			{...ints.getFloatingProps()}>
+			{@render content({
+				labelId,
+				descriptionId,
+				close: () => (open = false),
+			})}
+		</div>
+	</FloatingFocusManager>
+{/snippet}
+
+{@render reference?.(ref, ints.getReferenceProps())}
+
+{#if open}
+	<FloatingPortal id="drawer-root">
+		{#if modal}
+			<FloatingOverlay
+				lockScroll
+				style="background: rgba(0, 0, 0, 0.8); z-index: 1;">
+				{@render Content()}
+			</FloatingOverlay>
+		{:else}
+			{@render Content()}
+		{/if}
+	</FloatingPortal>
+{/if}
diff --git a/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/sink/(drawer)/main.svelte b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/sink/(drawer)/main.svelte
new file mode 100644
index 00000000..3597a882
--- /dev/null
+++ b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/sink/(drawer)/main.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import Button from "../button.svelte";
+	import Drawer from "./drawer.svelte";
+</script>
+
+<h1 class="text-5xl font-bold mb-8">Drawer</h1>
+<div
+	class="grid place-items-center border border-slate-400 rounded lg:w-[40rem] h-[20rem] mb-4">
+	<Drawer>
+		{#snippet reference(ref, props)}
+			<Button
+				id="my-button"
+				bind:ref={() => ref.current, (v) => (ref.current = v)}
+				{...props}>
+				My button
+			</Button>
+		{/snippet}
+		{#snippet content({ labelId, descriptionId, close })}
+			<h2 id={labelId} class="text-xl font-bold">Title</h2>
+			<p id={descriptionId}>Description</p>
+			<Button id="close-button" class="bg-white mt-4" onclick={close}
+				>Close</Button>
+		{/snippet}
+	</Drawer>
+	<Button id="next-button">Next button</Button>
+	<div id="drawer-root"></div>
+</div>
diff --git a/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/sink/(navigation)/main.svelte b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/sink/(navigation)/main.svelte
new file mode 100644
index 00000000..aa345fbc
--- /dev/null
+++ b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/sink/(navigation)/main.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import NavigationItem from "./navigation-item.svelte";
+	import NavigationSubItem from "./navigation-sub-item.svelte";
+	import Navigation from "./navigation.svelte";
+</script>
+
+<h1 class="text-5xl font-bold mb-8">Navigation</h1>
+<div
+	class="grid place-items-center border border-slate-400 rounded lg:w-[40rem] h-[20rem] mb-4">
+	<Navigation>
+		<NavigationItem label="Home" href="#" />
+		<NavigationItem label="Product" href="#">
+			<NavigationSubItem label="Link 1" href="#" />
+			<NavigationSubItem label="Link 2" href="#" />
+			<NavigationSubItem label="Link 3" href="#" />
+		</NavigationItem>
+		<NavigationItem label="About" href="#" />
+	</Navigation>
+</div>
diff --git a/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/sink/(navigation)/navigation-item.svelte b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/sink/(navigation)/navigation-item.svelte
new file mode 100644
index 00000000..c1692e0a
--- /dev/null
+++ b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/sink/(navigation)/navigation-item.svelte
@@ -0,0 +1,100 @@
+<script lang="ts">
+	import {
+		flip,
+		FloatingFocusManager,
+		FloatingNode,
+		FloatingPortal,
+		offset,
+		safePolygon,
+		shift,
+		useDismiss,
+		useFloating,
+		useFloatingNodeId,
+		useFocus,
+		useHover,
+		useInteractions,
+	} from "@skeletonlabs/floating-ui-svelte";
+	import type { HTMLAnchorAttributes } from "svelte/elements";
+
+	let {
+		label,
+		href,
+		children,
+		...restProps
+	}: Omit<HTMLAnchorAttributes, "href"> & {
+		label: string;
+		href: string;
+	} = $props();
+
+	let open = $state(false);
+	const hasChildren = $derived(!!children);
+
+	const nodeId = useFloatingNodeId();
+
+	const f = useFloating<HTMLAnchorElement>({
+		open: () => open,
+		onOpenChange: (v) => {
+			open = v;
+		},
+		nodeId,
+		middleware: [offset(8), flip(), shift()],
+		placement: "right-start",
+	});
+
+	const ints = useInteractions([
+		useHover(f.context, {
+			handleClose: safePolygon(),
+			enabled: () => hasChildren,
+		}),
+		useFocus(f.context, {
+			enabled: () => hasChildren,
+		}),
+		useDismiss(f.context, {
+			enabled: () => hasChildren,
+		}),
+	]);
+</script>
+
+<FloatingNode id={nodeId}>
+	<li>
+		<a
+			{href}
+			bind:this={f.reference}
+			class="w-48 bg-slate-100 p-2 rounded my-1 flex justify-between items-center"
+			{...ints.getReferenceProps(restProps)}>
+			{label}
+			{#if hasChildren}
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width="32"
+					height="32"
+					viewBox="0 0 15 15"
+					><path
+						fill="currentColor"
+						fill-rule="evenodd"
+						d="M6.158 3.135a.5.5 0 0 1 .707.023l3.75 4a.5.5 0 0 1 0 .684l-3.75 4a.5.5 0 1 1-.73-.684L9.566 7.5l-3.43-3.658a.5.5 0 0 1 .023-.707"
+						clip-rule="evenodd" /></svg>
+			{/if}
+		</a>
+	</li>
+	{#if open}
+		<FloatingPortal>
+			<FloatingFocusManager
+				context={f.context}
+				modal={false}
+				initialFocus={-1}>
+				<div
+					data-testid="subnavigation"
+					bind:this={f.floating}
+					class="flex flex-col bg-slate-100 overflow-y-auto rounded outline-none px-4 py-2 backdrop-blur-sm"
+					style={f.floatingStyles}
+					{...ints.getFloatingProps()}>
+					<button type="button" onclick={() => (open = false)}>
+						Close
+					</button>
+					<ul class="flex flex-col">{@render children?.()}</ul>
+				</div>
+			</FloatingFocusManager>
+		</FloatingPortal>
+	{/if}
+</FloatingNode>
diff --git a/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/sink/(navigation)/navigation-sub-item.svelte b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/sink/(navigation)/navigation-sub-item.svelte
new file mode 100644
index 00000000..eff06244
--- /dev/null
+++ b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/sink/(navigation)/navigation-sub-item.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from "svelte/elements";
+
+	let {
+		label,
+		href,
+		...restProps
+	}: Omit<HTMLAnchorAttributes, "href" | "children"> & {
+		label: string;
+		href: string;
+	} = $props();
+</script>
+
+<a {href} {...restProps} class="NavigationItem">
+	{label}
+</a>
diff --git a/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/sink/(navigation)/navigation.svelte b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/sink/(navigation)/navigation.svelte
new file mode 100644
index 00000000..89ec72f6
--- /dev/null
+++ b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/sink/(navigation)/navigation.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	let { children }: { children: Snippet } = $props();
+</script>
+
+<nav class="Navigation">
+	<ul class="NavigationList">{@render children?.()}</ul>
+</nav>
diff --git a/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/sink/+page.svelte b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/sink/+page.svelte
new file mode 100644
index 00000000..f259cb10
--- /dev/null
+++ b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/sink/+page.svelte
@@ -0,0 +1,66 @@
+<script lang="ts">
+	import {
+		useClientPoint,
+		useFloating,
+		useInteractions,
+	} from "@skeletonlabs/floating-ui-svelte";
+
+	let {
+		enabled = true,
+		x = null,
+		y = null,
+		axis,
+	}: {
+		enabled?: boolean;
+		x?: number | null;
+		y?: number | null;
+		axis?: "both" | "x" | "y";
+	} = $props();
+
+	let open = $state(false);
+
+	const f = useFloating({
+		open: () => open,
+		onOpenChange: (v) => {
+			open = v;
+		},
+	});
+
+	const clientPoint = useClientPoint(f.context, {
+		enabled: () => enabled,
+		x: () => x,
+		y: () => y,
+		axis,
+	});
+
+	const ints = useInteractions([clientPoint]);
+
+	const rect = $derived(f.reference?.getBoundingClientRect());
+</script>
+
+<div
+	data-testid="reference"
+	bind:this={f.reference}
+	{...ints.getReferenceProps()}>
+	Reference
+</div>
+{#if open}
+	<div
+		data-testid="floating"
+		bind:this={f.floating}
+		{...ints.getFloatingProps()}>
+		Floating
+	</div>
+{/if}
+<button onclick={() => (open = !open)} data-testid="toggle-open"
+	>toggle open</button>
+<span data-testid="x">{rect?.x}</span>
+<span data-testid="y">{rect?.y}</span>
+<span data-testid="width">{rect?.width}</span>
+<span data-testid="height">{rect?.height}</span>
+<button
+	data-testid="set-point"
+	onclick={() => {
+		x = 1000;
+		y = 1000;
+	}}>set point</button>
diff --git a/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/sink/button.svelte b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/sink/button.svelte
new file mode 100644
index 00000000..c956b1e2
--- /dev/null
+++ b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/sink/button.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLButtonAttributes } from "svelte/elements";
+	import cn from "clsx";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...rest
+	}: HTMLButtonAttributes & {
+		ref?: Element | null;
+	} = $props();
+</script>
+
+<button
+	{...rest}
+	bind:this={ref}
+	class={cn(
+		className,
+		"bg-slate-200/90 rounded p-2 px-3 transition-colors hover:bg-slate-200/50 data-[open]:bg-slate-200/50"
+	)}>
+	{@render children?.()}
+</button>
diff --git a/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/sink/dialog.svelte b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/sink/dialog.svelte
new file mode 100644
index 00000000..75c0dd56
--- /dev/null
+++ b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/sink/dialog.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+	import {
+		FloatingFocusManager,
+		FloatingNode,
+		FloatingPortal,
+		useClick,
+		useDismiss,
+		useFloating,
+		useFloatingNodeId,
+		useInteractions,
+	} from "@skeletonlabs/floating-ui-svelte";
+	import type { Snippet } from "svelte";
+
+	let {
+		open: passedOpen = false,
+		reference,
+		content,
+	}: {
+		open?: boolean;
+		reference: Snippet<
+			[ref: { current: Element | null }, props: Record<string, unknown>]
+		>;
+		content: Snippet<[close: () => void]>;
+	} = $props();
+
+	let open = $state(passedOpen);
+	const nodeId = useFloatingNodeId();
+
+	const referenceRef = $state<{ current: Element | null }>({ current: null });
+
+	const floating = useFloating({
+		open: () => open,
+		onOpenChange: (v) => {
+			open = v;
+		},
+		nodeId: () => nodeId,
+		reference: () => referenceRef.current,
+		onReferenceChange: (v) => {
+			referenceRef.current = v;
+		},
+	});
+
+	const ints = useInteractions([
+		useClick(floating.context),
+		useDismiss(floating.context, { bubbles: false }),
+	]);
+</script>
+
+<FloatingNode id={nodeId}>
+	{@render reference(referenceRef, ints.getReferenceProps())}
+	{#if open}
+		<FloatingPortal>
+			<FloatingFocusManager context={floating.context}>
+				<div
+					{...ints.getFloatingProps()}
+					bind:this={floating.floating}
+					class="bg-blue-800 w-48 z-[1000] fixed left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%]">
+					{@render content(() => (open = false))}
+				</div>
+			</FloatingFocusManager>
+		</FloatingPortal>
+	{/if}
+</FloatingNode>
diff --git a/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/sink/nested-dialog.svelte b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/sink/nested-dialog.svelte
new file mode 100644
index 00000000..db5a06c3
--- /dev/null
+++ b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/sink/nested-dialog.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import {
+		FloatingTree,
+		useFloatingParentNodeId,
+	} from "@skeletonlabs/floating-ui-svelte";
+	import type { ComponentProps } from "svelte";
+	import Dialog from "./dialog.svelte";
+
+	let props: ComponentProps<typeof Dialog> = $props();
+
+	const parentId = useFloatingParentNodeId();
+</script>
+
+{#if parentId == null}
+	<FloatingTree>
+		<Dialog {...props} />
+	</FloatingTree>
+{:else}
+	<Dialog {...props} />
+{/if}
diff --git a/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/sink/nested-nested.svelte b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/sink/nested-nested.svelte
new file mode 100644
index 00000000..848008d2
--- /dev/null
+++ b/sites/floating-ui-svelte.vercel.app/src/routes/(inner)/sink/nested-nested.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import NestedDialog from "./nested-dialog.svelte";
+</script>
+
+<NestedDialog>
+	{#snippet reference(ref, refProps)}
+		<button data-testid="open-dialog" bind:this={ref.current} {...refProps}>
+			open dialog
+		</button>
+	{/snippet}
+	{#snippet content(close)}
+		<NestedDialog>
+			{#snippet reference(nestedRef, nestedRefProps)}
+				<button
+					data-testid="open-nested-dialog"
+					bind:this={nestedRef.current}
+					{...nestedRefProps}>
+					open nested dialog
+				</button>
+			{/snippet}
+
+			{#snippet content(nestedClose)}
+				<button
+					onclick={() => nestedClose()}
+					data-testid="close-nested-dialog">
+					close nested dialog
+				</button>
+			{/snippet}
+		</NestedDialog>
+		<button onclick={() => close()} data-testid="close-dialog">
+			close dialog
+		</button>
+	{/snippet}
+</NestedDialog>
diff --git a/sites/floating-ui-svelte.vercel.app/src/routes/+error.svelte b/sites/floating-ui-svelte.vercel.app/src/routes/+error.svelte
index 6c941507..763baa04 100644
--- a/sites/floating-ui-svelte.vercel.app/src/routes/+error.svelte
+++ b/sites/floating-ui-svelte.vercel.app/src/routes/+error.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-import { page } from "$app/state";
-import Logo from "$lib/components/Logo/Logo.svelte";
+	import { page } from "$app/state";
+	import Logo from "$lib/components/Logo/Logo.svelte";
 
-const status = $derived(page.status);
-const message = $derived(page.error ? page.error.message : "Unknown error");
+	const status = $derived(page.status);
+	const message = $derived(page.error ? page.error.message : "Unknown error");
 </script>
 
 <svelte:head>
diff --git a/sites/floating-ui-svelte.vercel.app/src/routes/+layout.svelte b/sites/floating-ui-svelte.vercel.app/src/routes/+layout.svelte
index 464a5011..e058899a 100644
--- a/sites/floating-ui-svelte.vercel.app/src/routes/+layout.svelte
+++ b/sites/floating-ui-svelte.vercel.app/src/routes/+layout.svelte
@@ -1,37 +1,39 @@
 <script lang="ts">
-// Stylesheets
-import "../app.pcss";
-import { page } from "$app/state";
-import Dialog from "$lib/components/Dialog/Dialog.svelte";
-import Navigation from "$lib/components/Navigation/Navigation.svelte";
-import Overlay from "$lib/components/Overlay/Overlay.svelte";
-import { setDrawer } from "$lib/stores.svelte.js";
+	// Stylesheets
+	import "../app.pcss";
+	import { page } from "$app/state";
+	import Dialog from "$lib/components/Dialog/Dialog.svelte";
+	import Navigation from "$lib/components/Navigation/Navigation.svelte";
+	import Overlay from "$lib/components/Overlay/Overlay.svelte";
+	import { setDrawer } from "$lib/stores.svelte.js";
 
-// Props
-let { children } = $props();
+	// Props
+	let { children } = $props();
 
-const title = $derived.by(() => {
-	const pathname = page.url.pathname;
-	const titleRaw =
-		pathname === "/"
-			? "Home"
-			: (pathname.split("/").pop() ?? "Floating UI Svelte");
-	return titleRaw.replace("-", " ").replace(/\b\w/g, (c) => c.toUpperCase());
-});
+	const title = $derived.by(() => {
+		const pathname = page.url.pathname;
+		const titleRaw =
+			pathname === "/"
+				? "Home"
+				: (pathname.split("/").pop() ?? "Floating UI Svelte");
+		return titleRaw
+			.replace("-", " ")
+			.replace(/\b\w/g, (c) => c.toUpperCase());
+	});
 
-const drawer = setDrawer(
-	(() => {
-		let open = $state(false);
-		return {
-			get open() {
-				return open;
-			},
-			set open(value) {
-				open = value;
-			},
-		};
-	})(),
-);
+	const drawer = setDrawer(
+		(() => {
+			let open = $state(false);
+			return {
+				get open() {
+					return open;
+				},
+				set open(value) {
+					open = value;
+				},
+			};
+		})()
+	);
 </script>
 
 <svelte:head>
diff --git a/sites/floating-ui-svelte.vercel.app/vite.config.ts b/sites/floating-ui-svelte.vercel.app/vite.config.ts
index 2278a279..195661bf 100644
--- a/sites/floating-ui-svelte.vercel.app/vite.config.ts
+++ b/sites/floating-ui-svelte.vercel.app/vite.config.ts
@@ -4,4 +4,7 @@ import pagefind from "vite-plugin-pagefind";
 
 export default defineConfig({
 	plugins: [sveltekit(), pagefind()],
+	optimizeDeps: {
+		exclude: ["@skeletonlabs/floating-ui-svelte"],
+	},
 });