From eb0537544a1e7e0d80f666781335c21e9babeb6f Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Wed, 12 Jun 2024 19:49:32 -0400
Subject: [PATCH 01/18] a

---
 .../components/navigation-menu.svelte         |   0
 .../src/lib/bits/navigation-menu/index.ts     |   0
 .../navigation-menu/navigation-menu.svelte.ts | 349 ++++++++++++++++++
 .../src/lib/bits/navigation-menu/types.ts     |   0
 4 files changed, 349 insertions(+)
 create mode 100644 packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu.svelte
 create mode 100644 packages/bits-ui/src/lib/bits/navigation-menu/index.ts
 create mode 100644 packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts
 create mode 100644 packages/bits-ui/src/lib/bits/navigation-menu/types.ts

diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu.svelte b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu.svelte
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/index.ts b/packages/bits-ui/src/lib/bits/navigation-menu/index.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts b/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts
new file mode 100644
index 000000000..15567ad6c
--- /dev/null
+++ b/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts
@@ -0,0 +1,349 @@
+import { untrack } from "svelte";
+import { box } from "svelte-toolbelt";
+import { getTabbableCandidates } from "../utilities/focus-scope/utils.js";
+import type { ReadableBoxedValues, WritableBoxedValues } from "$lib/internal/box.svelte.js";
+import type { Direction, Orientation } from "$lib/shared/index.js";
+import { getDataOrientation } from "$lib/internal/attrs.js";
+import { createContext } from "$lib/internal/createContext.js";
+import { useId } from "$lib/internal/useId.svelte.js";
+
+const [setNavigationMenuRootContext, getNavigationMenuRootContext] =
+	createContext<NavigationMenuRootState>("NavigationMenu.Root");
+
+const [setNavigationMenuProviderContext, getNavigationMenuProviderContext] =
+	createContext<NavigationMenuProviderState>("NavigationMenu.Provider");
+
+const ROOT_ATTR = "data-navigation-menu-root";
+const SUB_ATTR = "data-navigation-menu-sub";
+const ITEM_ATTR = "data-navigation-menu-item";
+
+type NavigationMenuRootStateProps = ReadableBoxedValues<{
+	id: string;
+	delayDuration: number;
+	skipDelayDuration: number;
+	orientation: Orientation;
+	dir: Direction;
+}> &
+	WritableBoxedValues<{ value: string }>;
+
+class NavigationMenuRootState {
+	id: NavigationMenuRootStateProps["id"];
+	delayDuration: NavigationMenuRootStateProps["delayDuration"];
+	skipDelayDuration: NavigationMenuRootStateProps["skipDelayDuration"];
+	orientation: NavigationMenuRootStateProps["orientation"];
+	dir: NavigationMenuRootStateProps["dir"];
+	value: NavigationMenuRootStateProps["value"];
+	openTimer = $state<number>(0);
+	closeTimer = $state<number>(0);
+	skipDelayTimer = $state<number>(0);
+	isOpenDelayed = $state(true);
+
+	constructor(props: NavigationMenuRootStateProps) {
+		this.id = props.id;
+		this.delayDuration = props.delayDuration;
+		this.skipDelayDuration = props.skipDelayDuration;
+		this.orientation = props.orientation;
+		this.dir = props.dir;
+		this.value = props.value;
+
+		$effect(() => {
+			const isOpen = this.value.value !== "";
+			untrack(() => {
+				const hasSkipDelayDuration = this.skipDelayDuration.value > 0;
+
+				if (isOpen) {
+					window.clearTimeout(this.skipDelayTimer);
+					if (hasSkipDelayDuration) this.isOpenDelayed = true;
+				} else {
+					window.clearTimeout(this.skipDelayTimer);
+					this.skipDelayTimer = window.setTimeout(() => {
+						this.isOpenDelayed = true;
+					}, this.skipDelayDuration.value);
+				}
+			});
+		});
+
+		$effect(() => {
+			return () => {
+				window.clearTimeout(this.openTimer);
+				window.clearTimeout(this.closeTimer);
+				window.clearTimeout(this.skipDelayTimer);
+			};
+		});
+	}
+	setValue(v: string) {
+		this.value.value = v;
+	}
+
+	startCloseTimer() {
+		window.clearTimeout(this.closeTimer);
+		this.closeTimer = window.setTimeout(() => this.setValue(""), 150);
+	}
+
+	handleOpen(itemValue: string) {
+		window.clearTimeout(this.closeTimer);
+		this.setValue(itemValue);
+	}
+
+	handleDelayedOpen(itemValue: string) {
+		const isOpen = this.value.value === itemValue;
+		if (isOpen) {
+			// If the item is already open (e.g. we're transitioning from the content to the trigger)
+			// then we want to clear the close timer immediately.
+			window.clearTimeout(this.closeTimer);
+		} else {
+			this.openTimer = window.setTimeout(() => {
+				window.clearTimeout(this.closeTimer);
+				this.setValue(itemValue);
+			});
+		}
+	}
+
+	onTriggerEnter(itemValue: string) {
+		window.clearTimeout(this.openTimer);
+		if (this.isOpenDelayed) this.handleDelayedOpen(itemValue);
+		else this.handleOpen(itemValue);
+	}
+
+	onTriggerLeave() {
+		window.clearTimeout(this.openTimer);
+		this.startCloseTimer();
+	}
+
+	onContentEnter() {
+		window.clearTimeout(this.closeTimer);
+	}
+
+	onContentLeave = this.startCloseTimer;
+
+	onItemSelect(itemValue: string) {
+		const newValue = this.value.value === itemValue ? "" : itemValue;
+		this.setValue(newValue);
+	}
+
+	onItemDismiss() {
+		this.setValue("");
+	}
+
+	props = $derived.by(() => ({
+		"aria-label": "Main",
+		"data-orientation": getDataOrientation(this.orientation.value),
+		dir: this.dir.value,
+		[ROOT_ATTR]: "",
+	}));
+
+	createProvider(props: NavigationMenuProviderStateProps) {
+		return new NavigationMenuProviderState({
+			...props,
+			isRoot: false,
+			rootNavigationId: this.id,
+		});
+	}
+}
+
+type NavigationMenuSubStateProps = ReadableBoxedValues<{
+	id: string;
+	orientation: Orientation;
+	dir: Direction;
+}> &
+	WritableBoxedValues<{ value: string }>;
+
+class NavigationMenuSubState {
+	id: NavigationMenuSubStateProps["id"];
+	orientation: NavigationMenuSubStateProps["orientation"];
+	dir: NavigationMenuSubStateProps["dir"];
+	value: NavigationMenuSubStateProps["value"];
+
+	constructor(props: NavigationMenuSubStateProps) {
+		this.id = props.id;
+		this.orientation = props.orientation;
+		this.dir = props.dir;
+		this.value = props.value;
+	}
+	setValue(v: string) {
+		this.value.value = v;
+	}
+
+	onTriggerEnter(itemValue: string) {
+		this.setValue(itemValue);
+	}
+
+	onItemSelect(itemValue: string) {
+		this.setValue(itemValue);
+	}
+
+	onItemDismiss() {
+		this.setValue("");
+	}
+
+	props = $derived.by(() => ({
+		"data-orientation": getDataOrientation(this.orientation.value),
+		[SUB_ATTR]: "",
+	}));
+}
+
+type NavigationMenuProviderStateProps = ReadableBoxedValues<{
+	rootNavigationId: string;
+	dir: Direction;
+	orientation: Orientation;
+}> &
+	WritableBoxedValues<{
+		value: string;
+	}> & {
+		isRoot: boolean;
+		onTriggerEnter: (itemValue: string) => void;
+		onTriggerLeave?: () => void;
+		onContentEnter?: () => void;
+		onContentLeave?: () => void;
+		onItemSelect: (itemValue: string) => void;
+		onItemDismiss: () => void;
+	};
+
+class NavigationMenuProviderState {
+	isRoot: NavigationMenuProviderStateProps["isRoot"] = $state(false);
+	rootNavigationId: NavigationMenuProviderStateProps["rootNavigationId"];
+	dir: NavigationMenuProviderStateProps["dir"];
+	orientation: NavigationMenuProviderStateProps["orientation"];
+	value: NavigationMenuProviderStateProps["value"];
+	onTriggerEnter: NavigationMenuProviderStateProps["onTriggerEnter"];
+	onTriggerLeave: NavigationMenuProviderStateProps["onTriggerLeave"];
+	onContentEnter: NavigationMenuProviderStateProps["onContentEnter"];
+	onContentLeave: NavigationMenuProviderStateProps["onContentLeave"];
+	onItemSelect: NavigationMenuProviderStateProps["onItemSelect"];
+	onItemDismiss: NavigationMenuProviderStateProps["onItemDismiss"];
+	viewportId = box.with<string | undefined>(() => undefined);
+	viewportContentId = box.with<string | undefined>(() => undefined);
+	indicatorTrackId = box.with<string | undefined>(() => undefined);
+
+	constructor(props: NavigationMenuProviderStateProps) {
+		this.isRoot = props.isRoot;
+		this.rootNavigationId = props.rootNavigationId;
+		this.dir = props.dir;
+		this.orientation = props.orientation;
+		this.value = props.value;
+		this.onTriggerEnter = props.onTriggerEnter;
+		this.onTriggerLeave = props.onTriggerLeave;
+		this.onContentEnter = props.onContentEnter;
+		this.onContentLeave = props.onContentLeave;
+		this.onItemSelect = props.onItemSelect;
+		this.onItemDismiss = props.onItemDismiss;
+	}
+}
+
+type NavigationMenuListStateProps = ReadableBoxedValues<{
+	id: string;
+}>;
+
+class NavigationMenuListState {
+	id: NavigationMenuListStateProps["id"];
+	indicatorId = box(useId());
+
+	constructor(
+		props: NavigationMenuListStateProps,
+		private provider: NavigationMenuProviderState
+	) {
+		this.id = props.id;
+	}
+
+	indicatorProps = $derived.by(
+		() =>
+			({
+				id: this.indicatorId.value,
+				style: {
+					position: "relative",
+				},
+			}) as const
+	);
+
+	props = $derived.by(
+		() =>
+			({
+				"data-orientation": getDataOrientation(this.provider.orientation.value),
+			}) as const
+	);
+}
+
+type NavigationMenuItemStateProps = ReadableBoxedValues<{
+	id: string;
+	value: string;
+}>;
+
+class NavigationMenuItemState {
+	id: NavigationMenuItemStateProps["id"];
+	value: NavigationMenuItemStateProps["value"];
+	contentId = box.with<string | undefined>(() => undefined);
+	triggerId = box.with<string | undefined>(() => undefined);
+	focusProxyId = box.with<string | undefined>(() => undefined);
+	restoreContentTabOrder = $state(() => {});
+	wasEscapeClose = $state(false);
+
+	constructor(
+		props: NavigationMenuItemStateProps,
+		private provider: NavigationMenuProviderState
+	) {
+		this.id = props.id;
+		this.value = props.value;
+	}
+
+	getContentNode() {
+		return document.getElementById(this.contentId.value ?? "");
+	}
+
+	getTriggerNode() {
+		return document.getElementById(this.triggerId.value ?? "");
+	}
+
+	getFocusProxyNode() {
+		return document.getElementById(this.focusProxyId.value ?? "");
+	}
+
+	handleContentEntry(side: "start" | "end" = "start") {
+		const contentNode = this.getContentNode();
+		if (!contentNode) return;
+		this.restoreContentTabOrder();
+		const candidates = getTabbableCandidates(contentNode);
+		if (candidates.length) {
+			focusFirst(side === "start" ? candidates : candidates.reverse());
+		}
+	}
+
+	handleContentExit() {
+		const contentNode = this.getContentNode();
+		if (!contentNode) return;
+		const candidates = getTabbableCandidates(contentNode);
+		if (candidates.length) {
+			this.restoreContentTabOrder = removeFromTabOrder(candidates);
+		}
+	}
+
+	props = $derived.by(
+		() =>
+			({
+				id: this.id.value,
+				[ITEM_ATTR]: "",
+			}) as const
+	);
+}
+
+function focusFirst(candidates: HTMLElement[]) {
+	const previouslyFocusedElement = document.activeElement;
+	return candidates.some((candidate) => {
+		// if focus is already where we want to go, we don't want to keep going through the candidates
+		if (candidate === previouslyFocusedElement) return true;
+		candidate.focus();
+		return document.activeElement !== previouslyFocusedElement;
+	});
+}
+
+function removeFromTabOrder(candidates: HTMLElement[]) {
+	candidates.forEach((candidate) => {
+		candidate.dataset.tabindex = candidate.getAttribute("tabindex") || "";
+		candidate.setAttribute("tabindex", "-1");
+	});
+	return () => {
+		candidates.forEach((candidate) => {
+			const prevTabIndex = candidate.dataset.tabindex as string;
+			candidate.setAttribute("tabindex", prevTabIndex);
+		});
+	};
+}
diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/types.ts b/packages/bits-ui/src/lib/bits/navigation-menu/types.ts
new file mode 100644
index 000000000..e69de29bb

From 34d7b99a2caac15bf7f4c0f0aa16c18044aace37 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 14 Jun 2024 22:06:11 -0400
Subject: [PATCH 02/18] idk

---
 eslint.config.js                              |  13 +-
 packages/bits-ui/package.json                 |   2 +-
 packages/bits-ui/src/lib/bits/index.ts        |   1 +
 .../components/navigation-menu-content.svelte |  66 ++
 .../navigation-menu-indicator.svelte          |  41 +
 .../components/navigation-menu-item.svelte    |  32 +
 .../components/navigation-menu-link.svelte    |  35 +
 .../components/navigation-menu-list.svelte    |  33 +
 .../components/navigation-menu-trigger.svelte |  40 +
 .../navigation-menu-viewport.svelte           |  30 +
 .../components/navigation-menu.svelte         |  50 +
 .../src/lib/bits/navigation-menu/index.ts     |  20 +
 .../navigation-menu/navigation-menu.svelte.ts | 910 +++++++++++++++---
 .../src/lib/bits/navigation-menu/types.ts     | 175 ++++
 packages/bits-ui/src/lib/internal/types.ts    |   4 +
 .../src/lib/internal/useArrowNavigation.ts    | 168 ++++
 packages/bits-ui/src/lib/types.ts             |   1 +
 pnpm-lock.yaml                                |  11 +-
 .../content/components/navigation-menu.md     |  23 +
 sites/docs/src/lib/components/demos/index.ts  |   1 +
 .../demos/navigation-menu-demo.svelte         | 160 +++
 sites/docs/src/lib/config/navigation.ts       |   5 +
 .../src/lib/content/api-reference/index.ts    |   1 +
 23 files changed, 1688 insertions(+), 134 deletions(-)
 create mode 100644 packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-content.svelte
 create mode 100644 packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-indicator.svelte
 create mode 100644 packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-item.svelte
 create mode 100644 packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-link.svelte
 create mode 100644 packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-list.svelte
 create mode 100644 packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-trigger.svelte
 create mode 100644 packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-viewport.svelte
 create mode 100644 packages/bits-ui/src/lib/internal/useArrowNavigation.ts
 create mode 100644 sites/docs/content/components/navigation-menu.md
 create mode 100644 sites/docs/src/lib/components/demos/navigation-menu-demo.svelte

diff --git a/eslint.config.js b/eslint.config.js
index 98b16da45..de0a168fc 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -2,9 +2,8 @@ import config, { DEFAULT_IGNORES } from "@huntabyte/eslint-config";
 
 const ignores = ["**/extended-types"];
 
-export default config({ svelte: true, ignores: [...DEFAULT_IGNORES, ...ignores] }).override(
-	"antfu/typescript/rules",
-	{
+export default config({ svelte: true, ignores: [...DEFAULT_IGNORES, ...ignores] })
+	.override("antfu/typescript/rules", {
 		rules: {
 			"ts/consistent-type-definitions": "off",
 			"ts/ban-types": [
@@ -16,5 +15,9 @@ export default config({ svelte: true, ignores: [...DEFAULT_IGNORES, ...ignores]
 				},
 			],
 		},
-	}
-);
+	})
+	.override("antfu/js/rules", {
+		rules: {
+			"no-unused-expressions": "off",
+		},
+	});
diff --git a/packages/bits-ui/package.json b/packages/bits-ui/package.json
index 96313d71d..0467998cc 100644
--- a/packages/bits-ui/package.json
+++ b/packages/bits-ui/package.json
@@ -63,7 +63,7 @@
 		"clsx": "^2.1.0",
 		"esm-env": "^1.0.0",
 		"nanoid": "^5.0.5",
-		"runed": "^0.5.0",
+		"runed": "^0.12.1",
 		"scule": "^1.3.0",
 		"style-object-to-css-string": "^1.1.3",
 		"style-to-object": "^1.0.6",
diff --git a/packages/bits-ui/src/lib/bits/index.ts b/packages/bits-ui/src/lib/bits/index.ts
index 17d09640a..2905b49d7 100644
--- a/packages/bits-ui/src/lib/bits/index.ts
+++ b/packages/bits-ui/src/lib/bits/index.ts
@@ -19,6 +19,7 @@ export * as DropdownMenu from "./dropdown-menu/index.js";
 export * as Label from "./label/index.js";
 export * as LinkPreview from "./link-preview/index.js";
 export * as Menubar from "./menubar/index.js";
+export * as NavigationMenu from "./navigation-menu/index.js";
 export * as Pagination from "./pagination/index.js";
 export * as PinInput from "./pin-input/index.js";
 export * as Popover from "./popover/index.js";
diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-content.svelte b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-content.svelte
new file mode 100644
index 000000000..1aac4a617
--- /dev/null
+++ b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-content.svelte
@@ -0,0 +1,66 @@
+<script lang="ts">
+	import { useId } from "$lib/internal/useId.svelte.js";
+	import { box } from "svelte-toolbelt";
+	import type { ContentProps } from "../index.js";
+	import { useNavigationMenuContent } from "../navigation-menu.svelte.js";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
+	import Portal from "$lib/bits/utilities/portal/portal.svelte";
+	import { PresenceLayer } from "$lib/bits/utilities/presence-layer/index.js";
+	import EscapeLayer from "$lib/bits/utilities/escape-layer/escape-layer.svelte";
+	import DismissableLayer from "$lib/bits/utilities/dismissable-layer/dismissable-layer.svelte";
+	import TextSelectionLayer from "$lib/bits/utilities/text-selection-layer/text-selection-layer.svelte";
+	import { IsMounted } from "runed";
+	import { isBrowser } from "$lib/internal/is.js";
+
+	let {
+		asChild,
+		children,
+		child,
+		ref = $bindable(),
+		id = useId(),
+		forceMount = false,
+		...restProps
+	}: ContentProps = $props();
+
+	const contentState = useNavigationMenuContent({
+		id: box.with(() => id),
+	});
+	const mergedProps = $derived(mergeProps(restProps, contentState.props));
+	const viewportId = $derived(contentState.menu.viewportId.value);
+	const viewportNode = $derived.by(() => {
+		if (!isBrowser) return undefined;
+		const node = document.getElementById(viewportId ?? "");
+		if (!node) return undefined;
+	});
+	const portalDisabled = $derived(!Boolean(contentState.menu.viewportId.value));
+
+	const isMounted = new IsMounted();
+</script>
+
+{#if isMounted.current}
+	<Portal to={viewportNode} disabled={portalDisabled}>
+		<PresenceLayer
+			{id}
+			present={forceMount || contentState.open || contentState.isLastActiveValue}
+		>
+			{#snippet presence({ present })}
+				<EscapeLayer enabled={present.value}>
+					<DismissableLayer {id} enabled={present.value}>
+						{#snippet children({ props: dismissableProps })}
+							<TextSelectionLayer {id} enabled={present.value}>
+								{@const finalProps = mergeProps(mergedProps, dismissableProps)}
+								{#if asChild}
+									{@render child?.({ props: finalProps })}
+								{:else}
+									<div bind:this={ref} {...finalProps}>
+										{@render children?.()}
+									</div>
+								{/if}
+							</TextSelectionLayer>
+						{/snippet}
+					</DismissableLayer>
+				</EscapeLayer>
+			{/snippet}
+		</PresenceLayer>
+	</Portal>
+{/if}
diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-indicator.svelte b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-indicator.svelte
new file mode 100644
index 000000000..34cbfcbe8
--- /dev/null
+++ b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-indicator.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { mergeProps } from "$lib/internal/mergeProps.js";
+	import { useId } from "$lib/internal/useId.svelte.js";
+	import { box } from "svelte-toolbelt";
+	import type { IndicatorProps } from "../index.js";
+	import { useNavigationMenuIndicator } from "../navigation-menu.svelte.js";
+	import PresenceLayer from "$lib/bits/utilities/presence-layer/presence-layer.svelte";
+	import Portal from "$lib/bits/utilities/portal/portal.svelte";
+
+	let {
+		id = useId(),
+		ref = $bindable(),
+		asChild,
+		children,
+		child,
+		forceMount = false,
+		...restProps
+	}: IndicatorProps = $props();
+
+	const indicatorState = useNavigationMenuIndicator({
+		id: box.with(() => id),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, indicatorState.props));
+</script>
+
+{#if indicatorState.indicatorTrackNode}
+	<Portal to={`#${indicatorState.indicatorTrackNode.id}`}>
+		<PresenceLayer {id} present={forceMount || indicatorState.isVisible}>
+			{#snippet presence()}
+				{#if asChild}
+					{@render child?.({ props: mergedProps })}
+				{:else}
+					<div bind:this={ref} {...mergedProps}>
+						{@render children?.()}
+					</div>
+				{/if}
+			{/snippet}
+		</PresenceLayer>
+	</Portal>
+{/if}
diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-item.svelte b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-item.svelte
new file mode 100644
index 000000000..7731d29ba
--- /dev/null
+++ b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-item.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { box } from "svelte-toolbelt";
+	import type { ItemProps } from "../index.js";
+	import { useNavigationMenuItem } from "../navigation-menu.svelte.js";
+	import { useId } from "$lib/internal/useId.svelte.js";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
+
+	let {
+		id = useId(),
+		value = useId(),
+		asChild,
+		child,
+		children,
+		ref = $bindable(),
+		...restProps
+	}: ItemProps = $props();
+
+	const itemState = useNavigationMenuItem({
+		id: box.with(() => id),
+		value: box.with(() => value),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, itemState.props));
+</script>
+
+{#if asChild}
+	{@render child?.({ props: mergedProps })}
+{:else}
+	<li {...mergedProps} bind:this={ref}>
+		{@render children?.()}
+	</li>
+{/if}
diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-link.svelte b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-link.svelte
new file mode 100644
index 000000000..9aef7cf81
--- /dev/null
+++ b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-link.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { noop } from "$lib/internal/callbacks.js";
+	import { useId } from "$lib/internal/useId.svelte.js";
+	import { box } from "svelte-toolbelt";
+	import type { LinkProps } from "../index.js";
+	import { useNavigationMenuLink } from "../navigation-menu.svelte.js";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
+
+	let {
+		id = useId(),
+		ref = $bindable(),
+		asChild,
+		child,
+		children,
+		active = false,
+		onSelect = noop,
+		...restProps
+	}: LinkProps = $props();
+
+	const linkState = useNavigationMenuLink({
+		id: box.with(() => id),
+		active: box.with(() => active),
+		onSelect: box.with(() => onSelect),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, linkState.props));
+</script>
+
+{#if asChild}
+	{@render child?.({ props: mergedProps })}
+{:else}
+	<a {...mergedProps} bind:this={ref}>
+		{@render children?.()}
+	</a>
+{/if}
diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-list.svelte b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-list.svelte
new file mode 100644
index 000000000..5d8df47a9
--- /dev/null
+++ b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-list.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { box } from "svelte-toolbelt";
+	import type { ListProps } from "../index.js";
+	import { useNavigationMenuList } from "../navigation-menu.svelte.js";
+	import { useId } from "$lib/internal/useId.svelte.js";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
+
+	let {
+		id = useId(),
+		asChild,
+		children,
+		child,
+		ref = $bindable(),
+		...restProps
+	}: ListProps = $props();
+
+	const listState = useNavigationMenuList({
+		id: box.with(() => id),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, listState.props));
+	const indicatorProps = $derived(mergeProps(listState.indicatorProps, {}));
+</script>
+
+<div {...indicatorProps}>
+	{#if asChild}
+		{@render child?.({ props: mergedProps })}
+	{:else}
+		<ul {...mergedProps} bind:this={ref}>
+			{@render children?.()}
+		</ul>
+	{/if}
+</div>
diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-trigger.svelte b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-trigger.svelte
new file mode 100644
index 000000000..0f34dc45d
--- /dev/null
+++ b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-trigger.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { box } from "svelte-toolbelt";
+	import type { TriggerProps } from "../index.js";
+	import { useNavigationMenuTrigger } from "../navigation-menu.svelte.js";
+	import { useId } from "$lib/internal/useId.svelte.js";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
+	import VisuallyHidden from "$lib/bits/utilities/visually-hidden/visually-hidden.svelte";
+
+	let {
+		id = useId(),
+		disabled = false,
+		asChild,
+		children,
+		child,
+		ref = $bindable(),
+		...restProps
+	}: TriggerProps = $props();
+
+	const triggerState = useNavigationMenuTrigger({
+		id: box.with(() => id),
+		disabled: box.with(() => disabled),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, triggerState.props));
+</script>
+
+{#if asChild}
+	{@render child?.({ props: mergedProps })}
+{:else}
+	<button {...mergedProps} bind:this={ref}>
+		{@render children?.()}
+	</button>
+{/if}
+
+{#if triggerState.open}
+	<VisuallyHidden {...triggerState.visuallyHiddenProps} />
+	{#if triggerState.menu.viewportId.value}
+		<span aria-owns={triggerState.item.contentId.value}></span>
+	{/if}
+{/if}
diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-viewport.svelte b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-viewport.svelte
new file mode 100644
index 000000000..32cbd6ffd
--- /dev/null
+++ b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-viewport.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { box } from "svelte-toolbelt";
+	import type { ViewportProps } from "../index.js";
+	import { useNavigationMenuViewport } from "../navigation-menu.svelte.js";
+	import { useId } from "$lib/internal/useId.svelte.js";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
+
+	let {
+		id = useId(),
+		ref = $bindable(),
+		asChild,
+		children,
+		child,
+		...restProps
+	}: ViewportProps = $props();
+
+	const viewportState = useNavigationMenuViewport({
+		id: box.with(() => id),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, viewportState.props));
+</script>
+
+{#if asChild}
+	{@render child?.({ props: mergedProps })}
+{:else}
+	<div {...mergedProps} bind:this={ref}>
+		{@render children?.()}
+	</div>
+{/if}
diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu.svelte b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu.svelte
index e69de29bb..ee0396f34 100644
--- a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu.svelte
+++ b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+	import { useId } from "$lib/internal/useId.svelte.js";
+	import { box } from "svelte-toolbelt";
+	import type { RootProps } from "../index.js";
+	import { useNavigationMenuRoot } from "../navigation-menu.svelte.js";
+	import { noop } from "$lib/internal/callbacks.js";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
+
+	let {
+		asChild,
+		child,
+		children,
+		id = useId(),
+		ref = $bindable(),
+		value = $bindable(""),
+		onValueChange = noop,
+		delayDuration = 200,
+		skipDelayDuration = 300,
+		dir = "ltr",
+		orientation = "horizontal",
+		...restProps
+	}: RootProps = $props();
+
+	const rootState = useNavigationMenuRoot({
+		id: box.with(() => id),
+		value: box.with(
+			() => value,
+			(v) => {
+				if (v !== value) {
+					value = v;
+					onValueChange(v);
+				}
+			}
+		),
+		delayDuration: box.with(() => delayDuration),
+		skipDelayDuration: box.with(() => skipDelayDuration),
+		dir: box.with(() => dir),
+		orientation: box.with(() => orientation),
+	});
+
+	const mergedProps = $derived(mergeProps({ "aria-label": "main" }, restProps, rootState.props));
+</script>
+
+{#if asChild}
+	{@render child?.({ props: mergedProps })}
+{:else}
+	<nav {...mergedProps} bind:this={ref}>
+		{@render children?.()}
+	</nav>
+{/if}
diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/index.ts b/packages/bits-ui/src/lib/bits/navigation-menu/index.ts
index e69de29bb..eaddb3d25 100644
--- a/packages/bits-ui/src/lib/bits/navigation-menu/index.ts
+++ b/packages/bits-ui/src/lib/bits/navigation-menu/index.ts
@@ -0,0 +1,20 @@
+export { default as Root } from "./components/navigation-menu.svelte";
+export { default as Content } from "./components/navigation-menu-content.svelte";
+export { default as Indicator } from "./components/navigation-menu-indicator.svelte";
+export { default as Item } from "./components/navigation-menu-item.svelte";
+export { default as Link } from "./components/navigation-menu-link.svelte";
+export { default as List } from "./components/navigation-menu-list.svelte";
+export { default as Trigger } from "./components/navigation-menu-trigger.svelte";
+export { default as Viewport } from "./components/navigation-menu-viewport.svelte";
+
+export type {
+	NavigationMenuRootProps as RootProps,
+	NavigationMenuSubProps as SubProps,
+	NavigationMenuItemProps as ItemProps,
+	NavigationMenuListProps as ListProps,
+	NavigationMenuTriggerProps as TriggerProps,
+	NavigationMenuViewportProps as ViewportProps,
+	NavigationMenuIndicatorProps as IndicatorProps,
+	NavigationMenuContentProps as ContentProps,
+	NavigationMenuLinkProps as LinkProps,
+} from "./types.js";
diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts b/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts
index 15567ad6c..af8da1fc8 100644
--- a/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts
@@ -1,21 +1,43 @@
 import { untrack } from "svelte";
-import { box } from "svelte-toolbelt";
+import { box, type WritableBox } from "svelte-toolbelt";
+import { useDebounce } from "runed";
 import { getTabbableCandidates } from "../utilities/focus-scope/utils.js";
 import type { ReadableBoxedValues, WritableBoxedValues } from "$lib/internal/box.svelte.js";
 import type { Direction, Orientation } from "$lib/shared/index.js";
-import { getDataOrientation } from "$lib/internal/attrs.js";
+import {
+	getAriaExpanded,
+	getAriaHidden,
+	getDataDisabled,
+	getDataOpenClosed,
+	getDataOrientation,
+	getDisabledAttr,
+} from "$lib/internal/attrs.js";
 import { createContext } from "$lib/internal/createContext.js";
 import { useId } from "$lib/internal/useId.svelte.js";
+import { kbd } from "$lib/internal/kbd.js";
+import { isBrowser } from "$lib/internal/is.js";
+import { useArrowNavigation } from "$lib/internal/useArrowNavigation.js";
+import { boxAutoReset } from "$lib/internal/boxAutoReset.svelte.js";
 
 const [setNavigationMenuRootContext, getNavigationMenuRootContext] =
 	createContext<NavigationMenuRootState>("NavigationMenu.Root");
 
-const [setNavigationMenuProviderContext, getNavigationMenuProviderContext] =
-	createContext<NavigationMenuProviderState>("NavigationMenu.Provider");
+const [setNavigationMenuMenuContext, getNavigationMenuMenuContext] =
+	createContext<NavigationMenuMenuState>("NavigationMenu.Root or NavigationMenu.Sub");
+
+const [setNavigationMenuItemContext, getNavigationMenuItemContext] =
+	createContext<NavigationMenuItemState>("NavigationMenu.Item");
+
+const EVENT_ROOT_CONTENT_DISMISS = "navigationMenu.rootContentDismiss";
 
 const ROOT_ATTR = "data-navigation-menu-root";
 const SUB_ATTR = "data-navigation-menu-sub";
 const ITEM_ATTR = "data-navigation-menu-item";
+const INDICATOR_ATTR = "data-navigation-menu-indicator";
+const LIST_ATTR = "data-navigation-menu-list";
+const TRIGGER_ATTR = "data-navigation-menu-trigger";
+const CONTENT_ATTR = "data-navigation-menu-content";
+const LINK_ATTR = "data-navigation-menu-link";
 
 type NavigationMenuRootStateProps = ReadableBoxedValues<{
 	id: string;
@@ -33,10 +55,19 @@ class NavigationMenuRootState {
 	orientation: NavigationMenuRootStateProps["orientation"];
 	dir: NavigationMenuRootStateProps["dir"];
 	value: NavigationMenuRootStateProps["value"];
-	openTimer = $state<number>(0);
-	closeTimer = $state<number>(0);
-	skipDelayTimer = $state<number>(0);
+	previousValue = box("");
 	isOpenDelayed = $state(true);
+	triggerIds = new Set<string>();
+	isDelaySkipped: WritableBox<boolean>;
+	derivedDelay = $derived.by(() => {
+		const isOpen = this.value.value !== "";
+		if (isOpen || this.isDelaySkipped.value) return 150;
+		return this.delayDuration.value;
+	});
+	setValue = useDebounce((v: string) => {
+		this.previousValue.value = this.value.value;
+		this.value.value = v;
+	}, 1000);
 
 	constructor(props: NavigationMenuRootStateProps) {
 		this.id = props.id;
@@ -45,85 +76,53 @@ class NavigationMenuRootState {
 		this.orientation = props.orientation;
 		this.dir = props.dir;
 		this.value = props.value;
-
-		$effect(() => {
-			const isOpen = this.value.value !== "";
-			untrack(() => {
-				const hasSkipDelayDuration = this.skipDelayDuration.value > 0;
-
-				if (isOpen) {
-					window.clearTimeout(this.skipDelayTimer);
-					if (hasSkipDelayDuration) this.isOpenDelayed = true;
-				} else {
-					window.clearTimeout(this.skipDelayTimer);
-					this.skipDelayTimer = window.setTimeout(() => {
-						this.isOpenDelayed = true;
-					}, this.skipDelayDuration.value);
-				}
-			});
-		});
-
-		$effect(() => {
-			return () => {
-				window.clearTimeout(this.openTimer);
-				window.clearTimeout(this.closeTimer);
-				window.clearTimeout(this.skipDelayTimer);
-			};
-		});
-	}
-	setValue(v: string) {
-		this.value.value = v;
+		this.isDelaySkipped = boxAutoReset(false, this.skipDelayDuration.value);
 	}
 
-	startCloseTimer() {
-		window.clearTimeout(this.closeTimer);
-		this.closeTimer = window.setTimeout(() => this.setValue(""), 150);
-	}
-
-	handleOpen(itemValue: string) {
-		window.clearTimeout(this.closeTimer);
-		this.setValue(itemValue);
-	}
+	getNode = () => {
+		return document.getElementById(this.id.value);
+	};
 
-	handleDelayedOpen(itemValue: string) {
-		const isOpen = this.value.value === itemValue;
-		if (isOpen) {
-			// If the item is already open (e.g. we're transitioning from the content to the trigger)
-			// then we want to clear the close timer immediately.
-			window.clearTimeout(this.closeTimer);
-		} else {
-			this.openTimer = window.setTimeout(() => {
-				window.clearTimeout(this.closeTimer);
-				this.setValue(itemValue);
-			});
-		}
-	}
+	registerTriggerId = (triggerId: string) => {
+		this.triggerIds.add(triggerId);
+	};
 
-	onTriggerEnter(itemValue: string) {
-		window.clearTimeout(this.openTimer);
-		if (this.isOpenDelayed) this.handleDelayedOpen(itemValue);
-		else this.handleOpen(itemValue);
-	}
+	deRegisterTriggerId = (triggerId: string) => {
+		this.triggerIds.delete(triggerId);
+	};
 
-	onTriggerLeave() {
-		window.clearTimeout(this.openTimer);
-		this.startCloseTimer();
-	}
+	getTriggerNodes = () => {
+		return Array.from(this.triggerIds)
+			.map((triggerId) => document.getElementById(triggerId))
+			.filter((node): node is HTMLElement => Boolean(node));
+	};
 
-	onContentEnter() {
-		window.clearTimeout(this.closeTimer);
-	}
+	onTriggerEnter = (itemValue: string) => {
+		this.setValue(itemValue);
+	};
 
-	onContentLeave = this.startCloseTimer;
+	onTriggerLeave = () => {
+		this.isDelaySkipped.value = false;
+		this.setValue("");
+	};
 
-	onItemSelect(itemValue: string) {
-		const newValue = this.value.value === itemValue ? "" : itemValue;
-		this.setValue(newValue);
-	}
+	onContentEnter = (itemValue: string) => {
+		this.setValue(itemValue);
+	};
 
-	onItemDismiss() {
+	onContentLeave = () => {
 		this.setValue("");
-	}
+	};
+
+	onItemSelect = (itemValue: string) => {
+		this.previousValue.value = this.value.value;
+		this.value.value = itemValue;
+	};
+
+	onItemDismiss = () => {
+		this.previousValue.value = this.value.value;
+		this.value.value = "";
+	};
 
 	props = $derived.by(() => ({
 		"aria-label": "Main",
@@ -132,12 +131,8 @@ class NavigationMenuRootState {
 		[ROOT_ATTR]: "",
 	}));
 
-	createProvider(props: NavigationMenuProviderStateProps) {
-		return new NavigationMenuProviderState({
-			...props,
-			isRoot: false,
-			rootNavigationId: this.id,
-		});
+	createMenu(props: NavigationMenuMenuStateProps) {
+		return new NavigationMenuMenuState(props, this);
 	}
 }
 
@@ -153,28 +148,46 @@ class NavigationMenuSubState {
 	orientation: NavigationMenuSubStateProps["orientation"];
 	dir: NavigationMenuSubStateProps["dir"];
 	value: NavigationMenuSubStateProps["value"];
+	triggerIds = new Set<string>();
+	root: NavigationMenuRootState;
 
-	constructor(props: NavigationMenuSubStateProps) {
+	constructor(props: NavigationMenuSubStateProps, root: NavigationMenuRootState) {
 		this.id = props.id;
 		this.orientation = props.orientation;
 		this.dir = props.dir;
 		this.value = props.value;
+		this.root = root;
 	}
-	setValue(v: string) {
+
+	registerTriggerId = (triggerId: string) => {
+		this.triggerIds.add(triggerId);
+	};
+
+	deRegisterTriggerId = (triggerId: string) => {
+		this.triggerIds.delete(triggerId);
+	};
+
+	getTriggerNodes = () => {
+		return Array.from(this.triggerIds)
+			.map((triggerId) => document.getElementById(triggerId))
+			.filter((node): node is HTMLElement => Boolean(node));
+	};
+
+	setValue = (v: string) => {
 		this.value.value = v;
-	}
+	};
 
-	onTriggerEnter(itemValue: string) {
+	onTriggerEnter = (itemValue: string) => {
 		this.setValue(itemValue);
-	}
+	};
 
-	onItemSelect(itemValue: string) {
+	onItemSelect = (itemValue: string) => {
 		this.setValue(itemValue);
-	}
+	};
 
-	onItemDismiss() {
+	onItemDismiss = () => {
 		this.setValue("");
-	}
+	};
 
 	props = $derived.by(() => ({
 		"data-orientation": getDataOrientation(this.orientation.value),
@@ -182,51 +195,86 @@ class NavigationMenuSubState {
 	}));
 }
 
-type NavigationMenuProviderStateProps = ReadableBoxedValues<{
+type NavigationMenuMenuStateProps = ReadableBoxedValues<{
 	rootNavigationId: string;
 	dir: Direction;
 	orientation: Orientation;
 }> &
 	WritableBoxedValues<{
 		value: string;
+		previousValue: string;
 	}> & {
 		isRoot: boolean;
 		onTriggerEnter: (itemValue: string) => void;
 		onTriggerLeave?: () => void;
-		onContentEnter?: () => void;
+		onContentEnter?: (itemValue: string) => void;
 		onContentLeave?: () => void;
 		onItemSelect: (itemValue: string) => void;
 		onItemDismiss: () => void;
+		getTriggerNodes: () => HTMLElement[];
+		registerTriggerId: (triggerId: string) => void;
+		deRegisterTriggerId: (triggerId: string) => void;
 	};
 
-class NavigationMenuProviderState {
-	isRoot: NavigationMenuProviderStateProps["isRoot"] = $state(false);
-	rootNavigationId: NavigationMenuProviderStateProps["rootNavigationId"];
-	dir: NavigationMenuProviderStateProps["dir"];
-	orientation: NavigationMenuProviderStateProps["orientation"];
-	value: NavigationMenuProviderStateProps["value"];
-	onTriggerEnter: NavigationMenuProviderStateProps["onTriggerEnter"];
-	onTriggerLeave: NavigationMenuProviderStateProps["onTriggerLeave"];
-	onContentEnter: NavigationMenuProviderStateProps["onContentEnter"];
-	onContentLeave: NavigationMenuProviderStateProps["onContentLeave"];
-	onItemSelect: NavigationMenuProviderStateProps["onItemSelect"];
-	onItemDismiss: NavigationMenuProviderStateProps["onItemDismiss"];
+class NavigationMenuMenuState {
+	isRoot: NavigationMenuMenuStateProps["isRoot"] = $state(false);
+	rootNavigationId: NavigationMenuMenuStateProps["rootNavigationId"];
+	dir: NavigationMenuMenuStateProps["dir"];
+	orientation: NavigationMenuMenuStateProps["orientation"];
+	value: NavigationMenuMenuStateProps["value"];
+	previousValue: NavigationMenuMenuStateProps["previousValue"];
+	onTriggerEnter: NavigationMenuMenuStateProps["onTriggerEnter"];
+	onTriggerLeave: NavigationMenuMenuStateProps["onTriggerLeave"];
+	onContentEnter: NavigationMenuMenuStateProps["onContentEnter"];
+	onContentLeave: NavigationMenuMenuStateProps["onContentLeave"];
+	onItemSelect: NavigationMenuMenuStateProps["onItemSelect"];
+	onItemDismiss: NavigationMenuMenuStateProps["onItemDismiss"];
+	getTriggerNodes: NavigationMenuMenuStateProps["getTriggerNodes"];
+	registerTriggerId: NavigationMenuMenuStateProps["registerTriggerId"];
+	deRegisterTriggerId: NavigationMenuMenuStateProps["deRegisterTriggerId"];
 	viewportId = box.with<string | undefined>(() => undefined);
 	viewportContentId = box.with<string | undefined>(() => undefined);
 	indicatorTrackId = box.with<string | undefined>(() => undefined);
+	root: NavigationMenuRootState;
 
-	constructor(props: NavigationMenuProviderStateProps) {
+	constructor(props: NavigationMenuMenuStateProps, root: NavigationMenuRootState) {
 		this.isRoot = props.isRoot;
 		this.rootNavigationId = props.rootNavigationId;
 		this.dir = props.dir;
 		this.orientation = props.orientation;
 		this.value = props.value;
+		console.log(props.onTriggerEnter);
 		this.onTriggerEnter = props.onTriggerEnter;
 		this.onTriggerLeave = props.onTriggerLeave;
 		this.onContentEnter = props.onContentEnter;
 		this.onContentLeave = props.onContentLeave;
 		this.onItemSelect = props.onItemSelect;
 		this.onItemDismiss = props.onItemDismiss;
+		this.deRegisterTriggerId = props.deRegisterTriggerId;
+		this.registerTriggerId = props.registerTriggerId;
+		this.getTriggerNodes = props.getTriggerNodes;
+		this.root = root;
+		this.previousValue = props.previousValue;
+	}
+
+	getViewportNode = () => {
+		return document.getElementById(this.viewportId.value ?? "");
+	};
+
+	createList(props: NavigationMenuListStateProps) {
+		return new NavigationMenuListState(props, this);
+	}
+
+	createItem(props: NavigationMenuItemStateProps) {
+		return new NavigationMenuItemState(props, this);
+	}
+
+	createIndicator(props: NavigationMenuIndicatorStateProps) {
+		return new NavigationMenuIndicatorState(props, this);
+	}
+
+	createViewport(props: NavigationMenuViewportStateProps) {
+		return new NavigationMenuViewportState(props, this);
 	}
 }
 
@@ -240,7 +288,7 @@ class NavigationMenuListState {
 
 	constructor(
 		props: NavigationMenuListStateProps,
-		private provider: NavigationMenuProviderState
+		private menu: NavigationMenuMenuState
 	) {
 		this.id = props.id;
 	}
@@ -258,7 +306,8 @@ class NavigationMenuListState {
 	props = $derived.by(
 		() =>
 			({
-				"data-orientation": getDataOrientation(this.provider.orientation.value),
+				"data-orientation": getDataOrientation(this.menu.orientation.value),
+				[LIST_ATTR]: "",
 			}) as const
 	);
 }
@@ -273,31 +322,30 @@ class NavigationMenuItemState {
 	value: NavigationMenuItemStateProps["value"];
 	contentId = box.with<string | undefined>(() => undefined);
 	triggerId = box.with<string | undefined>(() => undefined);
-	focusProxyId = box.with<string | undefined>(() => undefined);
+	focusProxyId = box.with<string | undefined>(() => useId());
 	restoreContentTabOrder = $state(() => {});
 	wasEscapeClose = $state(false);
+	menu: NavigationMenuMenuState;
 
-	constructor(
-		props: NavigationMenuItemStateProps,
-		private provider: NavigationMenuProviderState
-	) {
+	constructor(props: NavigationMenuItemStateProps, menu: NavigationMenuMenuState) {
 		this.id = props.id;
 		this.value = props.value;
+		this.menu = menu;
 	}
 
-	getContentNode() {
+	getContentNode = () => {
 		return document.getElementById(this.contentId.value ?? "");
-	}
+	};
 
-	getTriggerNode() {
+	getTriggerNode = () => {
 		return document.getElementById(this.triggerId.value ?? "");
-	}
+	};
 
-	getFocusProxyNode() {
+	getFocusProxyNode = () => {
 		return document.getElementById(this.focusProxyId.value ?? "");
-	}
+	};
 
-	handleContentEntry(side: "start" | "end" = "start") {
+	#handleContentEntry = (side: "start" | "end" = "start") => {
 		const contentNode = this.getContentNode();
 		if (!contentNode) return;
 		this.restoreContentTabOrder();
@@ -305,16 +353,21 @@ class NavigationMenuItemState {
 		if (candidates.length) {
 			focusFirst(side === "start" ? candidates : candidates.reverse());
 		}
-	}
+	};
 
-	handleContentExit() {
+	#handleContentExit = () => {
 		const contentNode = this.getContentNode();
 		if (!contentNode) return;
 		const candidates = getTabbableCandidates(contentNode);
 		if (candidates.length) {
 			this.restoreContentTabOrder = removeFromTabOrder(candidates);
 		}
-	}
+	};
+
+	onEntryKeydown = this.#handleContentEntry;
+	onFocusProxyEnter = this.#handleContentEntry;
+	onContentFocusOutside = this.#handleContentExit;
+	onRootContentClose = this.#handleContentExit;
 
 	props = $derived.by(
 		() =>
@@ -323,8 +376,599 @@ class NavigationMenuItemState {
 				[ITEM_ATTR]: "",
 			}) as const
 	);
+
+	createTrigger(props: NavigationMenuTriggerStateProps) {
+		return new NavigationMenuTriggerState(props, this);
+	}
+
+	createContent(props: NavigationMenuContentStateProps) {
+		return new NavigationMenuContentState(props, this);
+	}
+
+	createLink(props: NavigationMenuLinkStateProps) {
+		return new NavigationMenuLinkState(props);
+	}
+}
+
+type NavigationMenuTriggerStateProps = ReadableBoxedValues<{
+	id: string;
+	disabled: boolean;
+}>;
+
+class NavigationMenuTriggerState {
+	menu: NavigationMenuMenuState;
+	item: NavigationMenuItemState;
+	disabled: NavigationMenuTriggerStateProps["disabled"];
+	hasPointerMoveOpened = boxAutoReset(false, 300);
+	wasClickClose = $state(false);
+	open = $derived.by(() => this.item.value.value === this.menu.value.value);
+
+	constructor(props: NavigationMenuTriggerStateProps, item: NavigationMenuItemState) {
+		this.item = item;
+		this.menu = item.menu;
+		this.item.triggerId = props.id;
+		this.disabled = props.disabled;
+	}
+
+	#onpointerenter = () => {
+		this.wasClickClose = false;
+		this.item.wasEscapeClose = false;
+	};
+
+	#onpointermove = (e: PointerEvent) => {
+		if (e.pointerType !== "mouse") return;
+		if (
+			this.disabled.value ||
+			this.wasClickClose ||
+			this.item.wasEscapeClose ||
+			this.hasPointerMoveOpened.value
+		)
+			return;
+		this.menu.onTriggerEnter(this.item.value.value);
+		this.hasPointerMoveOpened.value = true;
+	};
+
+	#onpointerleave = (e: PointerEvent) => {
+		if (e.pointerType !== "mouse" || this.disabled.value) return;
+		this.menu.onTriggerLeave?.();
+		this.hasPointerMoveOpened.value = false;
+	};
+
+	#onclick = () => {
+		// if opened via pointer move, we prevent clicke event
+		if (this.hasPointerMoveOpened.value) return;
+		if (this.open) {
+			this.menu.onItemSelect("");
+		} else {
+			this.menu.onItemSelect(this.item.value.value);
+		}
+		this.wasClickClose = this.open;
+	};
+
+	#onkeydown = (e: KeyboardEvent) => {
+		const verticalEntryKey = this.menu.dir.value === "rtl" ? kbd.ARROW_LEFT : kbd.ARROW_RIGHT;
+		const entryKey = {
+			horizontal: kbd.ARROW_DOWN,
+			vertical: verticalEntryKey,
+		}[this.menu.orientation.value];
+		if (this.open && e.key === entryKey) {
+			this.item.onEntryKeydown();
+			e.preventDefault();
+			e.stopPropagation();
+		}
+	};
+
+	props = $derived.by(
+		() =>
+			({
+				id: this.item.triggerId.value,
+				disabled: getDisabledAttr(this.disabled.value),
+				"data-disabled": getDataDisabled(this.disabled.value),
+				"data-state": getDataOpenClosed(this.open),
+				"aria-expanded": getAriaExpanded(this.open),
+				"aria-controls": this.item.contentId.value ? this.item.contentId.value : undefined,
+				"data-value": this.item.value.value,
+				onpointerenter: this.#onpointerenter,
+				onpointermove: this.#onpointermove,
+				onpointerleave: this.#onpointerleave,
+				onclick: this.#onclick,
+				onkeydown: this.#onkeydown,
+				[TRIGGER_ATTR]: "",
+			}) as const
+	);
+
+	visuallyHiddenProps = $derived.by(
+		() =>
+			({
+				id: this.item.focusProxyId.value,
+				"aria-hidden": "true",
+				tabIndex: 0,
+				onfocus: (e: FocusEvent) => {
+					const contentNode = this.item.getContentNode();
+					const prevFocusedElement = e.relatedTarget as HTMLElement | null;
+					const wasTriggerFocused = prevFocusedElement === this.item.getFocusProxyNode();
+					const wasFocusFromContent = contentNode?.contains(prevFocusedElement);
+
+					if (wasTriggerFocused || !wasFocusFromContent) {
+						this.item.onFocusProxyEnter(wasTriggerFocused ? "start" : "end");
+					}
+				},
+			}) as const
+	);
+}
+
+type NavigationMenuLinkStateProps = ReadableBoxedValues<{
+	id: string;
+	active: boolean;
+	onSelect: (e: Event) => void;
+}>;
+
+class NavigationMenuLinkState {
+	id: NavigationMenuItemState["id"];
+	active: NavigationMenuLinkStateProps["active"];
+	onSelect: NavigationMenuLinkStateProps["onSelect"];
+
+	constructor(props: NavigationMenuLinkStateProps) {
+		this.id = props.id;
+		this.active = props.active;
+		this.onSelect = props.onSelect;
+	}
+
+	#onclick = (e: MouseEvent) => {
+		const linkSelectEvent = new CustomEvent(" navigationMenu.linkSelect", {
+			bubbles: true,
+			cancelable: true,
+		});
+
+		this.onSelect.value(linkSelectEvent);
+
+		if (!linkSelectEvent.defaultPrevented && !e.metaKey) {
+			// TODO: handle dismiss
+		}
+	};
+
+	props = $derived.by(
+		() =>
+			({
+				id: this.id.value,
+				"data-active": this.active.value ? "" : undefined,
+				"aria-current": this.active.value ? "page" : undefined,
+				onclick: this.#onclick,
+			}) as const
+	);
+}
+
+type NavigationMenuIndicatorStateProps = ReadableBoxedValues<{
+	id: string;
+}>;
+
+class NavigationMenuIndicatorState {
+	id: NavigationMenuIndicatorStateProps["id"];
+	menu: NavigationMenuMenuState;
+	activeTrigger = $state<HTMLElement | null>(null);
+	position = $state<{ size: number; offset: number } | null>(null);
+	isHorizontal = $derived.by(() => this.menu.orientation.value === "horizontal");
+	isVisible = $derived.by(() => Boolean(this.menu.value.value));
+	indicatorTrackNode = $state<HTMLElement | null>(null);
+
+	constructor(props: NavigationMenuIndicatorStateProps, menu: NavigationMenuMenuState) {
+		this.id = props.id;
+		this.menu = menu;
+
+		$effect(() => {
+			console.log("3");
+			const triggerNodes = this.menu.getTriggerNodes();
+			const triggerNode = triggerNodes.find(
+				(node) => node.dataset.value === this.menu.value.value
+			);
+			if (triggerNode) {
+				untrack(() => {
+					this.activeTrigger = triggerNode;
+				});
+			}
+		});
+
+		$effect(() => {
+			console.log("4");
+			const indicatorTrackNode = document.getElementById(
+				this.menu.indicatorTrackId.value ?? ""
+			);
+			untrack(() => (this.indicatorTrackNode = indicatorTrackNode));
+		});
+
+		useResizeObserver(() => this.activeTrigger, this.handlePositionChange);
+		useResizeObserver(() => this.indicatorTrackNode, this.handlePositionChange);
+	}
+
+	handlePositionChange = () => {
+		if (!this.activeTrigger) return;
+		this.position = {
+			size: this.isHorizontal
+				? this.activeTrigger.offsetWidth
+				: this.activeTrigger.offsetHeight,
+			offset: this.isHorizontal
+				? this.activeTrigger.offsetLeft
+				: this.activeTrigger.offsetTop,
+		};
+	};
+
+	props = $derived.by(
+		() =>
+			({
+				"aria-hidden": getAriaHidden(true),
+				"data-state": this.isVisible ? "visible" : "hidden",
+				"data-orientation": getDataOrientation(this.menu.orientation.value),
+				style: {
+					position: "absolute",
+					...(this.isHorizontal
+						? {
+								left: 0,
+								width: this.position ? `${this.position.size}px` : undefined,
+								transform: this.position
+									? `translateX(${this.position.offset}px)`
+									: undefined,
+							}
+						: {
+								top: 0,
+								height: this.position ? `${this.position.size}px` : undefined,
+								transform: this.position
+									? `translateY(${this.position.offset}px)`
+									: undefined,
+							}),
+				},
+			}) as const
+	);
+}
+
+type NavigationMenuContentStateProps = ReadableBoxedValues<{
+	id: string;
+}>;
+
+type MotionAttribute = "to-start" | "to-end" | "from-start" | "from-end";
+
+class NavigationMenuContentState {
+	id: NavigationMenuContentStateProps["id"];
+	menu: NavigationMenuMenuState;
+	item: NavigationMenuItemState;
+	prevMotionAttribute = $state<MotionAttribute | null>(null);
+	motionAttribute = $state<MotionAttribute | null>(null);
+	open = $derived.by(() => this.menu.value.value === this.item.value.value);
+	isLastActiveValue = $derived.by(() => {
+		if (!isBrowser) return false;
+		if (this.menu.viewportId.value) {
+			const viewportNode = document.getElementById(this.menu.viewportId.value);
+			if (viewportNode) {
+				if (!this.menu.value.value && this.menu.previousValue.value) {
+					return this.menu.previousValue.value === this.item.value.value;
+				}
+			}
+		}
+		return false;
+	});
+
+	constructor(props: NavigationMenuContentStateProps, item: NavigationMenuItemState) {
+		this.id = props.id;
+		this.item = item;
+		this.menu = item.menu;
+
+		$effect(() => {
+			console.log("1");
+			const contentNode = this.getNode();
+			if (this.menu.isRoot && contentNode) {
+				// bubble dimiss to the root content node and focus its trigger
+				const handleClose = () => {
+					this.menu.onItemDismiss();
+					this.item.onRootContentClose();
+					if (contentNode.contains(document.activeElement)) {
+						this.item.getTriggerNode()?.focus();
+					}
+				};
+
+				contentNode.addEventListener(EVENT_ROOT_CONTENT_DISMISS, handleClose);
+
+				return () => {
+					contentNode.removeEventListener(EVENT_ROOT_CONTENT_DISMISS, handleClose);
+				};
+			}
+		});
+
+		$effect(() => {
+			console.log("menu.value.value", this.menu.value.value);
+		});
+		$effect(() => {
+			console.log("item.value.value", this.item.value.value);
+		});
+
+		$effect(() => {
+			const items = untrack(() => this.menu.getTriggerNodes());
+			const prev = untrack(() => this.menu.previousValue.value);
+			const values = items
+				.map((item) => item.dataset.value)
+				.filter((v): v is string => Boolean(v));
+			if (this.menu.dir.value === "rtl") values.reverse();
+			const index = values.indexOf(this.menu.value.value);
+			const prevIndex = values.indexOf(prev ?? "");
+			const isSelected = untrack(() => this.item.value.value === this.menu.value.value);
+			const wasSelected = untrack(() => prevIndex === values.indexOf(this.item.value.value));
+
+			// We only want to update selected and the last selected content
+			// this avoids animations being interrupted outside of that range
+			if (!isSelected && !wasSelected) {
+				untrack(() => (this.motionAttribute = this.prevMotionAttribute));
+			}
+
+			untrack(() => {
+				const attribute = (() => {
+					// Don't provide a direction on the initial open
+					if (index !== prevIndex) {
+						// If we're moving to this item from another
+						if (isSelected && prevIndex !== -1) {
+							return index > prevIndex ? "from-end" : "from-start";
+						}
+						// If we're leaving this item for another
+						if (wasSelected && index !== -1) {
+							return index > prevIndex ? "to-start" : "to-end";
+						}
+					}
+					// Otherwise we're entering from closed or leaving the list
+					// entirely and should not animate in any direction
+					return null;
+				})();
+				this.prevMotionAttribute = attribute;
+				this.motionAttribute = attribute;
+			});
+		});
+	}
+
+	getNode = () => {
+		return document.getElementById(this.id.value);
+	};
+
+	onFocusOutside = (e: Event) => {
+		if (e.defaultPrevented) return;
+		this.item.onContentFocusOutside();
+		const target = e.target as HTMLElement;
+		// only dismiss content when focus moves outside the menu
+		if (this.menu.root.getNode()?.contains(target)) {
+			e.preventDefault();
+		}
+	};
+
+	onInteractOutside = (e: Event) => {
+		if (e.defaultPrevented) return;
+		const target = e.target as HTMLElement;
+		const isTrigger = this.menu.getTriggerNodes().some((node) => node.contains(target));
+		const isRootViewport = this.menu.isRoot && this.menu.getViewportNode()?.contains(target);
+
+		if (isTrigger || isRootViewport || !this.menu.isRoot) {
+			e.preventDefault();
+		}
+	};
+
+	onEscapeKeydown = (e: KeyboardEvent) => {
+		if (e.defaultPrevented) return;
+		this.menu.onItemDismiss();
+		this.item.getTriggerNode()?.focus();
+		this.item.wasEscapeClose = true;
+	};
+
+	#onkeydown = (e: KeyboardEvent) => {
+		const isMetaKey = e.altKey || e.ctrlKey || e.metaKey;
+		const isTabKey = e.key === kbd.TAB && !isMetaKey;
+		const candidates = getTabbableCandidates(e.currentTarget as HTMLElement);
+
+		if (isTabKey) {
+			const focusedElement = document.activeElement;
+			const index = candidates.findIndex((candidate) => candidate === focusedElement);
+			const isMovingBackwards = e.shiftKey;
+			const nextCandidates = isMovingBackwards
+				? candidates.slice(0, index).reverse()
+				: candidates.slice(index + 1, candidates.length);
+
+			if (focusFirst(nextCandidates)) {
+				// prevent browser tab keydown because we've handled focus
+				e.preventDefault();
+			} else {
+				// If we can't focus that means we're at the edges
+				// so focus the proxy and let browser handle
+				// tab/shift+tab keypress on the proxy instead
+				this.item.getFocusProxyNode()?.focus();
+			}
+		}
+		const newSelectedElement = useArrowNavigation(
+			e,
+			document.activeElement as HTMLElement,
+			undefined,
+			{
+				itemsArray: candidates,
+				attributeName: `[${LINK_ATTR}]`,
+				loop: false,
+				enableIgnoredElement: true,
+			}
+		);
+
+		newSelectedElement?.focus();
+	};
+
+	props = $derived.by(
+		() =>
+			({
+				id: this.id.value,
+				"aria-labelledby": this.item.triggerId.value,
+				"data-motion": this.motionAttribute,
+				"data-state": getDataOpenClosed(this.menu.value.value === this.item.value.value),
+				"data-orientation": getDataOrientation(this.menu.orientation.value),
+				[CONTENT_ATTR]: "",
+				onkeydown: this.#onkeydown,
+			}) as const
+	);
 }
 
+type NavigationMenuViewportStateProps = ReadableBoxedValues<{
+	id: string;
+}>;
+
+class NavigationMenuViewportState {
+	id: NavigationMenuViewportStateProps["id"];
+	menu: NavigationMenuMenuState;
+	size = $state<{ width: number; height: number } | null>(null);
+	open = $derived.by(() => this.menu.value.value !== "");
+	activeContentValue = $derived.by(() => this.menu.value.value);
+	contentNode = $state<HTMLElement | null>();
+
+	constructor(props: NavigationMenuViewportStateProps, menu: NavigationMenuMenuState) {
+		this.id = props.id;
+		this.menu = menu;
+		this.menu.viewportId = props.id;
+
+		$effect(() => {
+			this.open;
+			this.activeContentValue;
+			const currentNode = untrack(() => this.getNode());
+			if (!currentNode) return;
+			untrack(() => {
+				this.contentNode = currentNode.querySelector("[data-state=open]")
+					?.children?.[0] as HTMLElement | null;
+			});
+		});
+
+		useResizeObserver(
+			() => this.contentNode,
+			() => {
+				if (this.contentNode) {
+					this.size = {
+						width: this.contentNode.offsetWidth,
+						height: this.contentNode.offsetHeight,
+					};
+				}
+			}
+		);
+	}
+
+	getNode = () => {
+		return document.getElementById(this.id.value);
+	};
+
+	#onpointerenter = () => {
+		this.menu.onContentEnter?.(this.menu.value.value);
+	};
+
+	#onpointerleave = (e: PointerEvent) => {
+		if (e.pointerType !== "mouse") return;
+		this.menu.onContentLeave?.();
+	};
+
+	props = $derived.by(
+		() =>
+			({
+				id: this.id.value,
+				"data-state": getDataOpenClosed(this.open),
+				"data-orientation": getDataOrientation(this.menu.orientation.value),
+				style: {
+					pointerEvents: !this.open && this.menu.isRoot ? "none" : undefined,
+					"--bits-navigation-menu-viewport-width": this.size
+						? `${this.size.width}px`
+						: undefined,
+					"--bits-navigation-menu-viewport-height": this.size
+						? `${this.size.height}px`
+						: undefined,
+				},
+				onpointerenter: this.#onpointerenter,
+				onpointerleave: this.#onpointerleave,
+			}) as const
+	);
+}
+
+// Context Methods
+
+export function useNavigationMenuSub(props: NavigationMenuSubStateProps) {
+	const rootState = getNavigationMenuRootContext();
+	const menuState = rootState.createMenu({
+		getTriggerNodes: rootState.getTriggerNodes,
+		rootNavigationId: rootState.id,
+		dir: rootState.dir,
+		orientation: rootState.orientation,
+		value: rootState.value,
+		isRoot: false,
+		deRegisterTriggerId: rootState.deRegisterTriggerId,
+		registerTriggerId: rootState.registerTriggerId,
+		onTriggerEnter: rootState.onTriggerEnter,
+		onItemSelect: rootState.onItemSelect,
+		onItemDismiss: rootState.onItemDismiss,
+		onContentEnter: rootState.onContentEnter,
+		onContentLeave: rootState.onContentLeave,
+		onTriggerLeave: rootState.onTriggerLeave,
+		previousValue: box(""),
+	});
+
+	setNavigationMenuMenuContext(menuState);
+	return new NavigationMenuSubState(
+		{
+			dir: props.dir,
+			id: props.id,
+			orientation: props.orientation,
+			value: props.value,
+		},
+		rootState
+	);
+}
+
+export function useNavigationMenuRoot(props: NavigationMenuRootStateProps) {
+	const rootState = new NavigationMenuRootState(props);
+	const menuState = rootState.createMenu({
+		getTriggerNodes: rootState.getTriggerNodes,
+		rootNavigationId: rootState.id,
+		dir: rootState.dir,
+		orientation: rootState.orientation,
+		value: rootState.value,
+		isRoot: true,
+		deRegisterTriggerId: rootState.deRegisterTriggerId,
+		registerTriggerId: rootState.registerTriggerId,
+		onTriggerEnter: rootState.onTriggerEnter,
+		onItemSelect: rootState.onItemSelect,
+		onItemDismiss: rootState.onItemDismiss,
+		onContentEnter: rootState.onContentEnter,
+		onContentLeave: rootState.onContentLeave,
+		onTriggerLeave: rootState.onTriggerLeave,
+		previousValue: rootState.previousValue,
+	});
+
+	setNavigationMenuMenuContext(menuState);
+	return setNavigationMenuRootContext(new NavigationMenuRootState(props));
+}
+
+export function useNavigationMenuList(props: NavigationMenuListStateProps) {
+	const menuState = getNavigationMenuMenuContext();
+	return menuState.createList(props);
+}
+
+export function useNavigationMenuItem(props: NavigationMenuItemStateProps) {
+	const menuState = getNavigationMenuMenuContext();
+	return setNavigationMenuItemContext(menuState.createItem(props));
+}
+
+export function useNavigationMenuTrigger(props: NavigationMenuTriggerStateProps) {
+	return getNavigationMenuItemContext().createTrigger(props);
+}
+
+export function useNavigationMenuContent(props: NavigationMenuContentStateProps) {
+	return getNavigationMenuItemContext().createContent(props);
+}
+
+export function useNavigationMenuViewport(props: NavigationMenuViewportStateProps) {
+	return getNavigationMenuMenuContext().createViewport(props);
+}
+
+export function useNavigationMenuIndicator(props: NavigationMenuIndicatorStateProps) {
+	return getNavigationMenuMenuContext().createIndicator(props);
+}
+
+export function useNavigationMenuLink(props: NavigationMenuLinkStateProps) {
+	return new NavigationMenuLinkState(props);
+}
+
+/// Utils
+
 function focusFirst(candidates: HTMLElement[]) {
 	const previouslyFocusedElement = document.activeElement;
 	return candidates.some((candidate) => {
@@ -347,3 +991,23 @@ function removeFromTabOrder(candidates: HTMLElement[]) {
 		});
 	};
 }
+
+function useResizeObserver(element: () => HTMLElement | null | undefined, onResize: () => void) {
+	$effect(() => {
+		let rAF = 0;
+		const node = element();
+		if (node) {
+			const resizeObserver = new ResizeObserver(() => {
+				cancelAnimationFrame(rAF);
+				rAF = window.requestAnimationFrame(onResize);
+			});
+
+			resizeObserver.observe(node);
+
+			return () => {
+				window.cancelAnimationFrame(rAF);
+				resizeObserver.unobserve(node);
+			};
+		}
+	});
+}
diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/types.ts b/packages/bits-ui/src/lib/bits/navigation-menu/types.ts
index e69de29bb..e1ff842de 100644
--- a/packages/bits-ui/src/lib/bits/navigation-menu/types.ts
+++ b/packages/bits-ui/src/lib/bits/navigation-menu/types.ts
@@ -0,0 +1,175 @@
+import type {
+	OnChangeFn,
+	PrimitiveAnchorAttributes,
+	PrimitiveButtonAttributes,
+	PrimitiveDivAttributes,
+	PrimitiveElementAttributes,
+	PrimitiveLiAttributes,
+	PrimitiveUListAttributes,
+	WithAsChild,
+	Without,
+} from "$lib/internal/types.js";
+import type { Direction, Orientation } from "$lib/shared/index.js";
+import type { InteractOutsideEvent } from "@melt-ui/svelte";
+
+export type NavigationMenuRootPropsWithoutHTML = WithAsChild<{
+	/**
+	 * The value of the currently open menu item.
+	 *
+	 * @bindable
+	 */
+	value?: string;
+
+	/**
+	 * The callback to call when a menu item is selected.
+	 */
+	onValueChange?: OnChangeFn<string>;
+
+	/**
+	 * The duration from when the mouse enters a trigger until the content opens.
+	 */
+	delayDuration?: number;
+
+	/**
+	 * How much time a user has to enter another trigger without incurring a delay again.
+	 */
+	skipDelayDuration?: number;
+
+	/**
+	 * The reading direction of the content.
+	 */
+	dir?: Direction;
+
+	/**
+	 * The orientation of the menu.
+	 */
+	orientation?: Orientation;
+}>;
+
+export type NavigationMenuRootProps = NavigationMenuRootPropsWithoutHTML &
+	Without<PrimitiveElementAttributes, NavigationMenuRootPropsWithoutHTML>;
+
+export type NavigationMenuSubPropsWithoutHTML = WithAsChild<{
+	/**
+	 * The value of the currently open menu item within the menu.
+	 *
+	 * @bindable
+	 */
+	value?: string;
+
+	/**
+	 * A callback fired when the active menu item changes.
+	 */
+	onValueChange?: OnChangeFn<string>;
+
+	/**
+	 * The orientation of the menu.
+	 */
+	orientation?: Orientation;
+}>;
+
+export type NavigationMenuSubProps = NavigationMenuSubPropsWithoutHTML &
+	Without<PrimitiveDivAttributes, NavigationMenuSubPropsWithoutHTML>;
+
+export type NavigationMenuListPropsWithoutHTML = WithAsChild<{}>;
+
+export type NavigationMenuListProps = NavigationMenuListPropsWithoutHTML &
+	Without<PrimitiveUListAttributes, NavigationMenuListPropsWithoutHTML>;
+
+export type NavigationMenuItemPropsWithoutHTML = WithAsChild<{
+	/**
+	 * The value of the menu item.
+	 */
+	value?: string;
+}>;
+
+export type NavigationMenuItemProps = NavigationMenuItemPropsWithoutHTML &
+	Without<PrimitiveLiAttributes, NavigationMenuItemPropsWithoutHTML>;
+
+export type NavigationMenuTriggerPropsWithoutHTML = WithAsChild<{
+	/**
+	 * Whether the trigger is disabled.
+	 * @defaultValue false
+	 */
+	disabled?: boolean;
+}>;
+
+export type NavigationMenuTriggerProps = NavigationMenuTriggerPropsWithoutHTML &
+	Without<PrimitiveButtonAttributes, NavigationMenuTriggerPropsWithoutHTML>;
+
+export type NavigationMenuContentPropsWithoutHTML = WithAsChild<{
+	/**
+	 * Callback fired when an interaction occurs outside the content.
+	 * Default behavior can be prevented with `event.preventDefault()`
+	 *
+	 */
+	onInteractOutside?: (event: InteractOutsideEvent) => void;
+
+	/**
+	 * Callback fired when a focus event occurs outside the content.
+	 * Default behavior can be prevented with `event.preventDefault()`
+	 */
+	onFocusOutside?: (event: FocusEvent) => void;
+
+	/**
+	 * Callback fires when an escape keydown event occurs.
+	 * Default behavior can be prevented with `event.preventDefault()`
+	 */
+	onEscapeKeydown?: (event: KeyboardEvent) => void;
+
+	/**
+	 * Whether to forcefully mount the content, regardless of the open state.
+	 * This is useful when wanting to use more custom transition and animation
+	 * libraries.
+	 *
+	 * @defaultValue false
+	 */
+	forceMount?: boolean;
+}>;
+
+export type NavigationMenuContentProps = NavigationMenuContentPropsWithoutHTML &
+	Without<PrimitiveDivAttributes, NavigationMenuContentPropsWithoutHTML>;
+
+export type NavigationMenuLinkPropsWithoutHTML = WithAsChild<{
+	/**
+	 * Whether the link is the current active page
+	 */
+	active?: boolean;
+
+	/**
+	 * A callback fired when the link is clicked.
+	 * Default behavior can be prevented with `event.preventDefault()`
+	 */
+	onSelect?: (e: Event) => void;
+}>;
+
+export type NavigationMenuLinkProps = NavigationMenuLinkPropsWithoutHTML &
+	Without<PrimitiveAnchorAttributes, NavigationMenuLinkPropsWithoutHTML>;
+
+export type NavigationMenuIndicatorPropsWithoutHTML = WithAsChild<{
+	/**
+	 * Whether to forcefully mount the content, regardless of the open state.
+	 * This is useful when wanting to use more custom transition and animation
+	 * libraries.
+	 *
+	 * @defaultValue false
+	 */
+	forceMount?: boolean;
+}>;
+
+export type NavigationMenuIndicatorProps = NavigationMenuIndicatorPropsWithoutHTML &
+	Without<PrimitiveDivAttributes, NavigationMenuIndicatorPropsWithoutHTML>;
+
+export type NavigationMenuViewportPropsWithoutHTML = WithAsChild<{
+	/**
+	 * Whether to forcefully mount the content, regardless of the open state.
+	 * This is useful when wanting to use more custom transition and animation
+	 * libraries.
+	 *
+	 * @defaultValue false
+	 */
+	forceMount?: boolean;
+}>;
+
+export type NavigationMenuViewportProps = NavigationMenuViewportPropsWithoutHTML &
+	Without<PrimitiveDivAttributes, NavigationMenuViewportPropsWithoutHTML>;
diff --git a/packages/bits-ui/src/lib/internal/types.ts b/packages/bits-ui/src/lib/internal/types.ts
index aebf3ad28..b550f7df6 100644
--- a/packages/bits-ui/src/lib/internal/types.ts
+++ b/packages/bits-ui/src/lib/internal/types.ts
@@ -7,6 +7,7 @@ import type {
 	HTMLImgAttributes,
 	HTMLInputAttributes,
 	HTMLLabelAttributes,
+	HTMLLiAttributes,
 	SVGAttributes,
 } from "svelte/elements";
 import type { TransitionConfig } from "svelte/transition";
@@ -133,6 +134,9 @@ export type PrimitiveHeadingAttributes = Primitive<HTMLHeadingAttributes>;
 export type PrimitiveLabelAttributes = Primitive<HTMLLabelAttributes>;
 export type PrimitiveSVGAttributes = Primitive<SVGAttributes<SVGElement>>;
 export type PrimitiveAnchorAttributes = Primitive<HTMLAnchorAttributes>;
+export type PrimitiveLiAttributes = Primitive<HTMLLiAttributes>;
+export type PrimitiveElementAttributes = Primitive<HTMLAttributes<HTMLElement>>;
+export type PrimitiveUListAttributes = Primitive<HTMLAttributes<HTMLUListElement>>;
 
 export type AsChildProps<Props, SnippetProps, Ref> = {
 	child: Snippet<[SnippetProps & { props: Record<string, unknown> }]>;
diff --git a/packages/bits-ui/src/lib/internal/useArrowNavigation.ts b/packages/bits-ui/src/lib/internal/useArrowNavigation.ts
new file mode 100644
index 000000000..1d88751eb
--- /dev/null
+++ b/packages/bits-ui/src/lib/internal/useArrowNavigation.ts
@@ -0,0 +1,168 @@
+import type { Direction } from "$lib/shared/index.js";
+
+type ArrowKeyOptions = "horizontal" | "vertical" | "both";
+
+interface ArrowNavigationOptions {
+	/**
+	 * The arrow key options to allow navigation
+	 *
+	 * @defaultValue "both"
+	 */
+	arrowKeyOptions?: ArrowKeyOptions;
+
+	/**
+	 * The attribute name to find the collection items in the parent element.
+	 */
+	attributeName: string;
+
+	/**
+	 * The parent element where contains all the collection items, this will collect every item to be used when nav
+	 * It will be ignored if attributeName is provided
+	 *
+	 * @defaultValue []
+	 */
+	itemsArray?: HTMLElement[];
+
+	/**
+	 * Allow loop navigation. If false, it will stop at the first and last element
+	 *
+	 * @defaultValue true
+	 */
+	loop?: boolean;
+
+	/**
+	 * The orientation of the collection
+	 *
+	 * @defaultValue "ltr"
+	 */
+	dir?: Direction;
+
+	/**
+	 * Prevent the scroll when navigating. This happens when the direction of the
+	 * key matches the scroll direction of any ancestor scrollable elements.
+	 *
+	 * @defaultValue true
+	 */
+	preventScroll?: boolean;
+
+	/**
+	 * By default all currentElement would trigger navigation. If `true`, currentElement nodeName in the ignore list will return null
+	 *
+	 * @defaultValue false
+	 */
+	enableIgnoredElement?: boolean;
+
+	/**
+	 * Focus the element after navigation
+	 *
+	 * @defaultValue false
+	 */
+	focus?: boolean;
+}
+
+const ignoredElement = ["INPUT", "TEXTAREA"];
+
+/**
+ * Allow arrow navigation for every html element with data-radix-vue-collection-item tag
+ *
+ * @param e               Keyboard event
+ * @param currentElement  Event initiator element or any element that wants to handle the navigation
+ * @param parentElement   Parent element where contains all the collection items, this will collect every item to be used when nav
+ * @param options         further options
+ * @returns               the navigated html element or null if none
+ */
+export function useArrowNavigation(
+	e: KeyboardEvent,
+	currentElement: HTMLElement,
+	parentElement: HTMLElement | undefined,
+	options: ArrowNavigationOptions
+): HTMLElement | null {
+	if (
+		!currentElement ||
+		(options.enableIgnoredElement && ignoredElement.includes(currentElement.nodeName))
+	)
+		return null;
+
+	const {
+		arrowKeyOptions = "both",
+		attributeName,
+		itemsArray = [],
+		loop = true,
+		dir = "ltr",
+		preventScroll = true,
+		focus = false,
+	} = options;
+
+	const [right, left, up, down, home, end] = [
+		e.key === "ArrowRight",
+		e.key === "ArrowLeft",
+		e.key === "ArrowUp",
+		e.key === "ArrowDown",
+		e.key === "Home",
+		e.key === "End",
+	];
+	const goingVertical = up || down;
+	const goingHorizontal = right || left;
+	if (
+		!home &&
+		!end &&
+		((!goingVertical && !goingHorizontal) ||
+			(arrowKeyOptions === "vertical" && goingHorizontal) ||
+			(arrowKeyOptions === "horizontal" && goingVertical))
+	)
+		return null;
+
+	const allCollectionItems: HTMLElement[] = parentElement
+		? Array.from(parentElement.querySelectorAll(attributeName))
+		: itemsArray;
+
+	if (!allCollectionItems.length) return null;
+
+	if (preventScroll) e.preventDefault();
+
+	let item: HTMLElement | null = null;
+
+	if (goingHorizontal || goingVertical) {
+		const goForward = goingVertical ? down : dir === "ltr" ? right : left;
+		item = findNextFocusableElement(allCollectionItems, currentElement, {
+			goForward,
+			loop,
+		});
+	} else if (home) {
+		item = allCollectionItems.at(0) || null;
+	} else if (end) {
+		item = allCollectionItems.at(-1) || null;
+	}
+
+	if (focus) item?.focus();
+
+	return item;
+}
+
+/**
+ * Recursive function to find the next focusable element to avoid disabled elements
+ */
+function findNextFocusableElement(
+	elements: HTMLElement[],
+	currentElement: HTMLElement,
+	{ goForward, loop }: { goForward: boolean; loop?: boolean },
+	iterations = elements.length
+): HTMLElement | null {
+	if (--iterations === 0) return null;
+
+	const index = elements.indexOf(currentElement);
+	const newIndex = goForward ? index + 1 : index - 1;
+
+	if (!loop && (newIndex < 0 || newIndex >= elements.length)) return null;
+
+	const adjustedNewIndex = (newIndex + elements.length) % elements.length;
+	const candidate = elements[adjustedNewIndex];
+	if (!candidate) return null;
+
+	const isDisabled =
+		candidate.hasAttribute("disabled") && candidate.getAttribute("disabled") !== "false";
+	if (isDisabled) {
+		return findNextFocusableElement(elements, candidate, { goForward, loop }, iterations);
+	}
+	return candidate;
+}
diff --git a/packages/bits-ui/src/lib/types.ts b/packages/bits-ui/src/lib/types.ts
index a4654b463..7a5675f6f 100644
--- a/packages/bits-ui/src/lib/types.ts
+++ b/packages/bits-ui/src/lib/types.ts
@@ -18,6 +18,7 @@ export type * from "$lib/bits/dropdown-menu/types.js";
 export type * from "$lib/bits/label/types.js";
 export type * from "$lib/bits/link-preview/types.js";
 export type * from "$lib/bits/menubar/types.js";
+export type * from "$lib/bits/navigation-menu/types.js";
 export type * from "$lib/bits/pagination/types.js";
 export type * from "$lib/bits/pin-input/types.js";
 export type * from "$lib/bits/popover/types.js";
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fec03738e..20aa66921 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -69,8 +69,8 @@ importers:
         specifier: ^5.0.5
         version: 5.0.7
       runed:
-        specifier: ^0.5.0
-        version: 0.5.0(svelte@5.0.0-next.143)
+        specifier: ^0.12.1
+        version: 0.12.1(svelte@5.0.0-next.143)
       scule:
         specifier: ^1.3.0
         version: 1.3.0
@@ -4403,8 +4403,8 @@ packages:
   run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
 
-  runed@0.5.0:
-    resolution: {integrity: sha512-nJ/36UhthXG1KNieQhxtvuoK0eHrgEesTkEwV/Tbo7HNka2QqQfoL5vq755ngisrufZl6oQVPJKPdan6msMDGw==}
+  runed@0.12.1:
+    resolution: {integrity: sha512-BlVXcGQ8+Rb7Klh2WO4y1em1Z15kYQMM0lG8bZhknAOKFUAyNHA5DgBhFNzKAUCCkgXf7GTmQng100Z5Xc7QwA==}
     peerDependencies:
       svelte: ^5.0.0
 
@@ -10295,8 +10295,9 @@ snapshots:
     dependencies:
       queue-microtask: 1.2.3
 
-  runed@0.5.0(svelte@5.0.0-next.143):
+  runed@0.12.1(svelte@5.0.0-next.143):
     dependencies:
+      esm-env: 1.0.0
       nanoid: 5.0.7
       svelte: 5.0.0-next.143
 
diff --git a/sites/docs/content/components/navigation-menu.md b/sites/docs/content/components/navigation-menu.md
new file mode 100644
index 000000000..f816706b0
--- /dev/null
+++ b/sites/docs/content/components/navigation-menu.md
@@ -0,0 +1,23 @@
+---
+title: Navigation Menu
+description: A list of links that allow users to navigate between pages or sections of a website.
+---
+
+<script>
+	import { APISection, ComponentPreview, NavigationMenuDemo } from '$lib/components/index.js'
+	export let schemas;
+</script>
+
+<ComponentPreview name="navigation-menu-demo" comp="Navigation Menu">
+
+<NavigationMenuDemo slot="preview" />
+
+</ComponentPreview>
+
+## Structure
+
+```svelte
+<script lang="ts">
+	import { NavigationMenu } from "bits-ui";
+</script>
+```
diff --git a/sites/docs/src/lib/components/demos/index.ts b/sites/docs/src/lib/components/demos/index.ts
index 77350037f..2d35e6c1e 100644
--- a/sites/docs/src/lib/components/demos/index.ts
+++ b/sites/docs/src/lib/components/demos/index.ts
@@ -17,6 +17,7 @@ export { default as DropdownMenuDemo } from "./dropdown-menu-demo.svelte";
 export { default as LabelDemo } from "./label-demo.svelte";
 export { default as LinkPreviewDemo } from "./link-preview-demo.svelte";
 export { default as MenubarDemo } from "./menubar-demo.svelte";
+export { default as NavigationMenuDemo } from "./navigation-menu-demo.svelte";
 export { default as PaginationDemo } from "./pagination-demo.svelte";
 export { default as PinInputDemo } from "./pin-input-demo.svelte";
 export { default as PopoverDemo } from "./popover-demo.svelte";
diff --git a/sites/docs/src/lib/components/demos/navigation-menu-demo.svelte b/sites/docs/src/lib/components/demos/navigation-menu-demo.svelte
new file mode 100644
index 000000000..30ca5a9fd
--- /dev/null
+++ b/sites/docs/src/lib/components/demos/navigation-menu-demo.svelte
@@ -0,0 +1,160 @@
+<script lang="ts">
+	import { NavigationMenu } from "bits-ui";
+	import { CaretDown } from "$icons/index.js";
+	import { cn } from "$lib/utils/styles.js";
+
+	const components: { title: string; href: string; description: string }[] = [
+		{
+			title: "Alert Dialog",
+			href: "/docs/primitives/alert-dialog",
+			description:
+				"A modal dialog that interrupts the user with important content and expects a response.",
+		},
+		{
+			title: "Hover Card",
+			href: "/docs/primitives/hover-card",
+			description: "For sighted users to preview content available behind a link.",
+		},
+		{
+			title: "Progress",
+			href: "/docs/primitives/progress",
+			description:
+				"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
+		},
+		{
+			title: "Scroll-area",
+			href: "/docs/primitives/scroll-area",
+			description: "Visually or semantically separates content.",
+		},
+		{
+			title: "Tabs",
+			href: "/docs/primitives/tabs",
+			description:
+				"A set of layered sections of content—known as tab panels—that are displayed one at a time.",
+		},
+		{
+			title: "Tooltip",
+			href: "/docs/primitives/tooltip",
+			description:
+				"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
+		},
+	];
+
+	type ListItemProps = {
+		className?: string;
+		title: string;
+		href: string;
+		content: string;
+	};
+</script>
+
+{#snippet ListItem({ className, title, content, href }: ListItemProps)}
+	<li>
+		<NavigationMenu.Link
+			class={cn(
+				"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-muted hover:text-accent-foreground focus:bg-muted focus:text-accent-foreground",
+				className
+			)}
+			{href}
+		>
+			<div class="text-sm font-medium leading-none">{title}</div>
+			<p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
+				{content}
+			</p>
+		</NavigationMenu.Link>
+	</li>
+{/snippet}
+
+<NavigationMenu.Root class="relative z-10 flex max-w-max flex-1 items-center justify-center">
+	<NavigationMenu.List class="group flex flex-1 list-none items-center justify-center space-x-1">
+		<NavigationMenu.Item>
+			<NavigationMenu.Trigger
+				class="group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-muted hover:text-accent-foreground focus:bg-muted focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-muted/50 data-[state=open]:bg-muted/50"
+			>
+				Getting started
+				<CaretDown
+					class="group-data[state=open]:rotate-180 relative top-[1px] ml-1 size-3 transition duration-200"
+					aria-hidden="true"
+				/>
+			</NavigationMenu.Trigger>
+			<NavigationMenu.Content
+				class="left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto"
+			>
+				<ul class="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
+					<li class="row-span-3">
+						<NavigationMenu.Link
+							href="/"
+							class="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
+						>
+							<!-- <Icons.logo class="h-6 w-6" /> -->
+							<div class="mb-2 mt-4 text-lg font-medium">Bits UI</div>
+							<p class="text-sm leading-tight text-muted-foreground">
+								The headless components for Svelte.
+							</p>
+						</NavigationMenu.Link>
+					</li>
+
+					{@render ListItem({
+						href: "/docs",
+						title: "Introduction",
+						content: "Headless components for Svelte and SvelteKit",
+					})}
+					{@render ListItem({
+						href: "/docs/getting-started",
+						title: "Getting Started",
+						content: "How to install and use Bits UI",
+					})}
+					{@render ListItem({
+						href: "/docs/styling",
+						title: "Styling",
+						content: "How to style Bits UI components",
+					})}
+				</ul>
+			</NavigationMenu.Content>
+		</NavigationMenu.Item>
+		<NavigationMenu.Item>
+			<NavigationMenu.Trigger
+				class="group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-muted hover:text-accent-foreground focus:bg-muted focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-muted/50 data-[state=open]:bg-muted/50"
+			>
+				Components
+				<CaretDown
+					class="group-data[state=open]:rotate-180 relative top-[1px] ml-1 size-3 transition duration-200"
+					aria-hidden="true"
+				/>
+			</NavigationMenu.Trigger>
+			<NavigationMenu.Content
+				class="left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto"
+			>
+				<ul class="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
+					{#each components as component (component.title)}
+						{@render ListItem({
+							href: component.href,
+							title: component.title,
+							content: component.description,
+						})}
+					{/each}
+				</ul>
+			</NavigationMenu.Content>
+		</NavigationMenu.Item>
+		<NavigationMenu.Item>
+			<NavigationMenu.Link
+				class="group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-muted hover:text-accent-foreground focus:bg-muted focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-muted/50 data-[state=open]:bg-muted/50"
+				href="/docs"
+			>
+				Documentation
+			</NavigationMenu.Link>
+		</NavigationMenu.Item>
+		<NavigationMenu.Indicator
+			class="top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in"
+		>
+			<div
+				class="relative top-[60%] size-2 rotate-45 rounded-tl-sm bg-border shadow-md"
+			></div>
+		</NavigationMenu.Indicator>
+	</NavigationMenu.List>
+	<div class="absolute left-0 top-full flex justify-center">
+		<NavigationMenu.Viewport
+			class="origin-top-center bg-popover text-popover-foreground relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]"
+		/>
+	</div>
+</NavigationMenu.Root>
diff --git a/sites/docs/src/lib/config/navigation.ts b/sites/docs/src/lib/config/navigation.ts
index c98094db7..4a4906e74 100644
--- a/sites/docs/src/lib/config/navigation.ts
+++ b/sites/docs/src/lib/config/navigation.ts
@@ -151,6 +151,11 @@ export const navigation: Navigation = {
 					href: "/docs/components/menubar",
 					items: [],
 				},
+				{
+					title: "Navigation Menu",
+					href: "/docs/components/navigation-menu",
+					items: [],
+				},
 				{
 					title: "Pagination",
 					href: "/docs/components/pagination",
diff --git a/sites/docs/src/lib/content/api-reference/index.ts b/sites/docs/src/lib/content/api-reference/index.ts
index a319d94c7..ee4181ab5 100644
--- a/sites/docs/src/lib/content/api-reference/index.ts
+++ b/sites/docs/src/lib/content/api-reference/index.ts
@@ -54,6 +54,7 @@ export const bits = [
 	"label",
 	"link-preview",
 	"menubar",
+	"navigation-menu",
 	"pagination",
 	"pin-input",
 	"popover",

From 9219f8bfb567d6137ebd92033e274ddc4ebd63af Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 14 Jun 2024 22:31:33 -0400
Subject: [PATCH 03/18] infinite loop hell

---
 .../components/navigation-menu-content.svelte |  30 +-
 .../navigation-menu/navigation-menu.svelte.ts | 317 +++++++-----------
 2 files changed, 136 insertions(+), 211 deletions(-)

diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-content.svelte b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-content.svelte
index 1aac4a617..f10702fdf 100644
--- a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-content.svelte
+++ b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-content.svelte
@@ -8,7 +8,6 @@
 	import { PresenceLayer } from "$lib/bits/utilities/presence-layer/index.js";
 	import EscapeLayer from "$lib/bits/utilities/escape-layer/escape-layer.svelte";
 	import DismissableLayer from "$lib/bits/utilities/dismissable-layer/dismissable-layer.svelte";
-	import TextSelectionLayer from "$lib/bits/utilities/text-selection-layer/text-selection-layer.svelte";
 	import { IsMounted } from "runed";
 	import { isBrowser } from "$lib/internal/is.js";
 
@@ -33,30 +32,25 @@
 		if (!node) return undefined;
 	});
 	const portalDisabled = $derived(!Boolean(contentState.menu.viewportId.value));
-
-	const isMounted = new IsMounted();
+	const mounted = new IsMounted();
 </script>
 
-{#if isMounted.current}
+{#if mounted.current}
 	<Portal to={viewportNode} disabled={portalDisabled}>
-		<PresenceLayer
-			{id}
-			present={forceMount || contentState.open || contentState.isLastActiveValue}
-		>
+		<PresenceLayer {id} present={forceMount || contentState.open}>
 			{#snippet presence({ present })}
 				<EscapeLayer enabled={present.value}>
 					<DismissableLayer {id} enabled={present.value}>
 						{#snippet children({ props: dismissableProps })}
-							<TextSelectionLayer {id} enabled={present.value}>
-								{@const finalProps = mergeProps(mergedProps, dismissableProps)}
-								{#if asChild}
-									{@render child?.({ props: finalProps })}
-								{:else}
-									<div bind:this={ref} {...finalProps}>
-										{@render children?.()}
-									</div>
-								{/if}
-							</TextSelectionLayer>
+							{@const finalProps = mergeProps(mergedProps, dismissableProps)}
+
+							{#if asChild}
+								{@render child?.({ props: finalProps })}
+							{:else}
+								<div bind:this={ref} {...finalProps}>
+									{@render children?.()}
+								</div>
+							{/if}
 						{/snippet}
 					</DismissableLayer>
 				</EscapeLayer>
diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts b/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts
index af8da1fc8..b8f7af5f9 100644
--- a/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts
@@ -1,6 +1,6 @@
 import { untrack } from "svelte";
 import { box, type WritableBox } from "svelte-toolbelt";
-import { useDebounce } from "runed";
+import { Previous, useDebounce } from "runed";
 import { getTabbableCandidates } from "../utilities/focus-scope/utils.js";
 import type { ReadableBoxedValues, WritableBoxedValues } from "$lib/internal/box.svelte.js";
 import type { Direction, Orientation } from "$lib/shared/index.js";
@@ -55,19 +55,19 @@ class NavigationMenuRootState {
 	orientation: NavigationMenuRootStateProps["orientation"];
 	dir: NavigationMenuRootStateProps["dir"];
 	value: NavigationMenuRootStateProps["value"];
-	previousValue = box("");
-	isOpenDelayed = $state(true);
+	previousValue = new Previous(() => this.value.value);
 	triggerIds = new Set<string>();
 	isDelaySkipped: WritableBox<boolean>;
 	derivedDelay = $derived.by(() => {
-		const isOpen = this.value.value !== "";
-		if (isOpen || this.isDelaySkipped.value) return 150;
+		const isOpen = this.value?.value !== "";
+		if (isOpen || this.isDelaySkipped?.value) return 150;
 		return this.delayDuration.value;
 	});
+
 	setValue = useDebounce((v: string) => {
-		this.previousValue.value = this.value.value;
+		if (this.value.value === v) return;
 		this.value.value = v;
-	}, 1000);
+	}, this.derivedDelay);
 
 	constructor(props: NavigationMenuRootStateProps) {
 		this.id = props.id;
@@ -115,12 +115,10 @@ class NavigationMenuRootState {
 	};
 
 	onItemSelect = (itemValue: string) => {
-		this.previousValue.value = this.value.value;
 		this.value.value = itemValue;
 	};
 
 	onItemDismiss = () => {
-		this.previousValue.value = this.value.value;
 		this.value.value = "";
 	};
 
@@ -136,65 +134,6 @@ class NavigationMenuRootState {
 	}
 }
 
-type NavigationMenuSubStateProps = ReadableBoxedValues<{
-	id: string;
-	orientation: Orientation;
-	dir: Direction;
-}> &
-	WritableBoxedValues<{ value: string }>;
-
-class NavigationMenuSubState {
-	id: NavigationMenuSubStateProps["id"];
-	orientation: NavigationMenuSubStateProps["orientation"];
-	dir: NavigationMenuSubStateProps["dir"];
-	value: NavigationMenuSubStateProps["value"];
-	triggerIds = new Set<string>();
-	root: NavigationMenuRootState;
-
-	constructor(props: NavigationMenuSubStateProps, root: NavigationMenuRootState) {
-		this.id = props.id;
-		this.orientation = props.orientation;
-		this.dir = props.dir;
-		this.value = props.value;
-		this.root = root;
-	}
-
-	registerTriggerId = (triggerId: string) => {
-		this.triggerIds.add(triggerId);
-	};
-
-	deRegisterTriggerId = (triggerId: string) => {
-		this.triggerIds.delete(triggerId);
-	};
-
-	getTriggerNodes = () => {
-		return Array.from(this.triggerIds)
-			.map((triggerId) => document.getElementById(triggerId))
-			.filter((node): node is HTMLElement => Boolean(node));
-	};
-
-	setValue = (v: string) => {
-		this.value.value = v;
-	};
-
-	onTriggerEnter = (itemValue: string) => {
-		this.setValue(itemValue);
-	};
-
-	onItemSelect = (itemValue: string) => {
-		this.setValue(itemValue);
-	};
-
-	onItemDismiss = () => {
-		this.setValue("");
-	};
-
-	props = $derived.by(() => ({
-		"data-orientation": getDataOrientation(this.orientation.value),
-		[SUB_ATTR]: "",
-	}));
-}
-
 type NavigationMenuMenuStateProps = ReadableBoxedValues<{
 	rootNavigationId: string;
 	dir: Direction;
@@ -202,7 +141,6 @@ type NavigationMenuMenuStateProps = ReadableBoxedValues<{
 }> &
 	WritableBoxedValues<{
 		value: string;
-		previousValue: string;
 	}> & {
 		isRoot: boolean;
 		onTriggerEnter: (itemValue: string) => void;
@@ -214,6 +152,7 @@ type NavigationMenuMenuStateProps = ReadableBoxedValues<{
 		getTriggerNodes: () => HTMLElement[];
 		registerTriggerId: (triggerId: string) => void;
 		deRegisterTriggerId: (triggerId: string) => void;
+		previousValue: Previous<string>;
 	};
 
 class NavigationMenuMenuState {
@@ -243,7 +182,6 @@ class NavigationMenuMenuState {
 		this.dir = props.dir;
 		this.orientation = props.orientation;
 		this.value = props.value;
-		console.log(props.onTriggerEnter);
 		this.onTriggerEnter = props.onTriggerEnter;
 		this.onTriggerLeave = props.onTriggerLeave;
 		this.onContentEnter = props.onContentEnter;
@@ -434,7 +372,7 @@ class NavigationMenuTriggerState {
 		this.hasPointerMoveOpened.value = false;
 	};
 
-	#onclick = () => {
+	#onclick = (e: PointerEvent) => {
 		// if opened via pointer move, we prevent clicke event
 		if (this.hasPointerMoveOpened.value) return;
 		if (this.open) {
@@ -556,10 +494,9 @@ class NavigationMenuIndicatorState {
 		this.menu = menu;
 
 		$effect(() => {
-			console.log("3");
 			const triggerNodes = this.menu.getTriggerNodes();
 			const triggerNode = triggerNodes.find(
-				(node) => node.dataset.value === this.menu.value.value
+				(node) => node.dataset.value === untrack(() => this.menu.value.value)
 			);
 			if (triggerNode) {
 				untrack(() => {
@@ -569,7 +506,6 @@ class NavigationMenuIndicatorState {
 		});
 
 		$effect(() => {
-			console.log("4");
 			const indicatorTrackNode = document.getElementById(
 				this.menu.indicatorTrackId.value ?? ""
 			);
@@ -581,15 +517,17 @@ class NavigationMenuIndicatorState {
 	}
 
 	handlePositionChange = () => {
-		if (!this.activeTrigger) return;
-		this.position = {
-			size: this.isHorizontal
-				? this.activeTrigger.offsetWidth
-				: this.activeTrigger.offsetHeight,
-			offset: this.isHorizontal
-				? this.activeTrigger.offsetLeft
-				: this.activeTrigger.offsetTop,
-		};
+		untrack(() => {
+			if (!this.activeTrigger) return;
+			this.position = {
+				size: this.isHorizontal
+					? this.activeTrigger.offsetWidth
+					: this.activeTrigger.offsetHeight,
+				offset: this.isHorizontal
+					? this.activeTrigger.offsetLeft
+					: this.activeTrigger.offsetTop,
+			};
+		});
 	};
 
 	props = $derived.by(
@@ -633,91 +571,84 @@ class NavigationMenuContentState {
 	prevMotionAttribute = $state<MotionAttribute | null>(null);
 	motionAttribute = $state<MotionAttribute | null>(null);
 	open = $derived.by(() => this.menu.value.value === this.item.value.value);
-	isLastActiveValue = $derived.by(() => {
-		if (!isBrowser) return false;
-		if (this.menu.viewportId.value) {
-			const viewportNode = document.getElementById(this.menu.viewportId.value);
-			if (viewportNode) {
-				if (!this.menu.value.value && this.menu.previousValue.value) {
-					return this.menu.previousValue.value === this.item.value.value;
-				}
-			}
-		}
-		return false;
-	});
+	// isLastActiveValue = $derived.by(() => {
+	// 	if (!isBrowser) return false;
+	// 	if (this.menu.viewportId.value) {
+	// 		const viewportNode = document.getElementById(this.menu.viewportId.value);
+	// 		if (viewportNode) {
+	// 			if (!this.menu.value.value && this.menu.previousValue.current) {
+	// 				return this.menu.previousValue.current === this.item.value.value;
+	// 			}
+	// 		}
+	// 	}
+	// 	return false;
+	// });
 
 	constructor(props: NavigationMenuContentStateProps, item: NavigationMenuItemState) {
 		this.id = props.id;
 		this.item = item;
 		this.menu = item.menu;
 
-		$effect(() => {
-			console.log("1");
-			const contentNode = this.getNode();
-			if (this.menu.isRoot && contentNode) {
-				// bubble dimiss to the root content node and focus its trigger
-				const handleClose = () => {
-					this.menu.onItemDismiss();
-					this.item.onRootContentClose();
-					if (contentNode.contains(document.activeElement)) {
-						this.item.getTriggerNode()?.focus();
-					}
-				};
-
-				contentNode.addEventListener(EVENT_ROOT_CONTENT_DISMISS, handleClose);
-
-				return () => {
-					contentNode.removeEventListener(EVENT_ROOT_CONTENT_DISMISS, handleClose);
-				};
-			}
-		});
-
-		$effect(() => {
-			console.log("menu.value.value", this.menu.value.value);
-		});
-		$effect(() => {
-			console.log("item.value.value", this.item.value.value);
-		});
-
-		$effect(() => {
-			const items = untrack(() => this.menu.getTriggerNodes());
-			const prev = untrack(() => this.menu.previousValue.value);
-			const values = items
-				.map((item) => item.dataset.value)
-				.filter((v): v is string => Boolean(v));
-			if (this.menu.dir.value === "rtl") values.reverse();
-			const index = values.indexOf(this.menu.value.value);
-			const prevIndex = values.indexOf(prev ?? "");
-			const isSelected = untrack(() => this.item.value.value === this.menu.value.value);
-			const wasSelected = untrack(() => prevIndex === values.indexOf(this.item.value.value));
-
-			// We only want to update selected and the last selected content
-			// this avoids animations being interrupted outside of that range
-			if (!isSelected && !wasSelected) {
-				untrack(() => (this.motionAttribute = this.prevMotionAttribute));
-			}
-
-			untrack(() => {
-				const attribute = (() => {
-					// Don't provide a direction on the initial open
-					if (index !== prevIndex) {
-						// If we're moving to this item from another
-						if (isSelected && prevIndex !== -1) {
-							return index > prevIndex ? "from-end" : "from-start";
-						}
-						// If we're leaving this item for another
-						if (wasSelected && index !== -1) {
-							return index > prevIndex ? "to-start" : "to-end";
-						}
-					}
-					// Otherwise we're entering from closed or leaving the list
-					// entirely and should not animate in any direction
-					return null;
-				})();
-				this.prevMotionAttribute = attribute;
-				this.motionAttribute = attribute;
-			});
-		});
+		// $effect(() => {
+		// 	console.log("1");
+		// 	const contentNode = this.getNode();
+		// 	if (this.menu.isRoot && contentNode) {
+		// 		// bubble dimiss to the root content node and focus its trigger
+		// 		const handleClose = () => {
+		// 			this.menu.onItemDismiss();
+		// 			this.item.onRootContentClose();
+		// 			if (contentNode.contains(document.activeElement)) {
+		// 				this.item.getTriggerNode()?.focus();
+		// 			}
+		// 		};
+
+		// 		contentNode.addEventListener(EVENT_ROOT_CONTENT_DISMISS, handleClose);
+
+		// 		return () => {
+		// 			contentNode.removeEventListener(EVENT_ROOT_CONTENT_DISMISS, handleClose);
+		// 		};
+		// 	}
+		// });
+
+		// $effect(() => {
+		// 	const items = untrack(() => this.menu.getTriggerNodes());
+		// 	const prev = untrack(() => this.menu.previousValue.value);
+		// 	const values = items
+		// 		.map((item) => item.dataset.value)
+		// 		.filter((v): v is string => Boolean(v));
+		// 	if (this.menu.dir.value === "rtl") values.reverse();
+		// 	const index = values.indexOf(this.menu.value.value);
+		// 	const prevIndex = values.indexOf(prev ?? "");
+		// 	const isSelected = untrack(() => this.item.value.value === this.menu.value.value);
+		// 	const wasSelected = untrack(() => prevIndex === values.indexOf(this.item.value.value));
+
+		// 	// We only want to update selected and the last selected content
+		// 	// this avoids animations being interrupted outside of that range
+		// 	if (!isSelected && !wasSelected) {
+		// 		untrack(() => (this.motionAttribute = this.prevMotionAttribute));
+		// 	}
+
+		// 	untrack(() => {
+		// 		const attribute = (() => {
+		// 			// Don't provide a direction on the initial open
+		// 			if (index !== prevIndex) {
+		// 				// If we're moving to this item from another
+		// 				if (isSelected && prevIndex !== -1) {
+		// 					return index > prevIndex ? "from-end" : "from-start";
+		// 				}
+		// 				// If we're leaving this item for another
+		// 				if (wasSelected && index !== -1) {
+		// 					return index > prevIndex ? "to-start" : "to-end";
+		// 				}
+		// 			}
+		// 			// Otherwise we're entering from closed or leaving the list
+		// 			// entirely and should not animate in any direction
+		// 			return null;
+		// 		})();
+		// 		this.prevMotionAttribute = attribute;
+		// 		this.motionAttribute = attribute;
+		// 	});
+		// });
 	}
 
 	getNode = () => {
@@ -881,37 +812,37 @@ class NavigationMenuViewportState {
 
 // Context Methods
 
-export function useNavigationMenuSub(props: NavigationMenuSubStateProps) {
-	const rootState = getNavigationMenuRootContext();
-	const menuState = rootState.createMenu({
-		getTriggerNodes: rootState.getTriggerNodes,
-		rootNavigationId: rootState.id,
-		dir: rootState.dir,
-		orientation: rootState.orientation,
-		value: rootState.value,
-		isRoot: false,
-		deRegisterTriggerId: rootState.deRegisterTriggerId,
-		registerTriggerId: rootState.registerTriggerId,
-		onTriggerEnter: rootState.onTriggerEnter,
-		onItemSelect: rootState.onItemSelect,
-		onItemDismiss: rootState.onItemDismiss,
-		onContentEnter: rootState.onContentEnter,
-		onContentLeave: rootState.onContentLeave,
-		onTriggerLeave: rootState.onTriggerLeave,
-		previousValue: box(""),
-	});
-
-	setNavigationMenuMenuContext(menuState);
-	return new NavigationMenuSubState(
-		{
-			dir: props.dir,
-			id: props.id,
-			orientation: props.orientation,
-			value: props.value,
-		},
-		rootState
-	);
-}
+// export function useNavigationMenuSub(props: NavigationMenuSubStateProps) {
+// 	const rootState = getNavigationMenuRootContext();
+// 	const menuState = rootState.createMenu({
+// 		getTriggerNodes: rootState.getTriggerNodes,
+// 		rootNavigationId: rootState.id,
+// 		dir: rootState.dir,
+// 		orientation: rootState.orientation,
+// 		value: rootState.value,
+// 		isRoot: false,
+// 		deRegisterTriggerId: rootState.deRegisterTriggerId,
+// 		registerTriggerId: rootState.registerTriggerId,
+// 		onTriggerEnter: rootState.onTriggerEnter,
+// 		onItemSelect: rootState.onItemSelect,
+// 		onItemDismiss: rootState.onItemDismiss,
+// 		onContentEnter: rootState.onContentEnter,
+// 		onContentLeave: rootState.onContentLeave,
+// 		onTriggerLeave: rootState.onTriggerLeave,
+// 		previousValue: new Previous,
+// 	});
+
+// 	setNavigationMenuMenuContext(menuState);
+// 	return new NavigationMenuSubState(
+// 		{
+// 			dir: props.dir,
+// 			id: props.id,
+// 			orientation: props.orientation,
+// 			value: props.value,
+// 		},
+// 		rootState
+// 	);
+// }
 
 export function useNavigationMenuRoot(props: NavigationMenuRootStateProps) {
 	const rootState = new NavigationMenuRootState(props);

From f1f27f019c5ea2f13dde701964657843237c4e98 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 14 Jun 2024 22:38:51 -0400
Subject: [PATCH 04/18] somewhere over the rainbow

---
 .../components/navigation-menu-content.svelte |  24 +--
 .../navigation-menu/navigation-menu.svelte.ts | 158 +++++++++---------
 2 files changed, 88 insertions(+), 94 deletions(-)

diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-content.svelte b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-content.svelte
index f10702fdf..e796ea553 100644
--- a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-content.svelte
+++ b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-content.svelte
@@ -31,7 +31,7 @@
 		const node = document.getElementById(viewportId ?? "");
 		if (!node) return undefined;
 	});
-	const portalDisabled = $derived(!Boolean(contentState.menu.viewportId.value));
+	const portalDisabled = $derived(!Boolean(viewportNode));
 	const mounted = new IsMounted();
 </script>
 
@@ -39,21 +39,13 @@
 	<Portal to={viewportNode} disabled={portalDisabled}>
 		<PresenceLayer {id} present={forceMount || contentState.open}>
 			{#snippet presence({ present })}
-				<EscapeLayer enabled={present.value}>
-					<DismissableLayer {id} enabled={present.value}>
-						{#snippet children({ props: dismissableProps })}
-							{@const finalProps = mergeProps(mergedProps, dismissableProps)}
-
-							{#if asChild}
-								{@render child?.({ props: finalProps })}
-							{:else}
-								<div bind:this={ref} {...finalProps}>
-									{@render children?.()}
-								</div>
-							{/if}
-						{/snippet}
-					</DismissableLayer>
-				</EscapeLayer>
+				{#if asChild}
+					{@render child?.({ props: mergedProps })}
+				{:else}
+					<div bind:this={ref} {...mergedProps}>
+						{@render children?.()}
+					</div>
+				{/if}
 			{/snippet}
 		</PresenceLayer>
 	</Portal>
diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts b/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts
index b8f7af5f9..1acd1d55a 100644
--- a/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts
@@ -571,84 +571,84 @@ class NavigationMenuContentState {
 	prevMotionAttribute = $state<MotionAttribute | null>(null);
 	motionAttribute = $state<MotionAttribute | null>(null);
 	open = $derived.by(() => this.menu.value.value === this.item.value.value);
-	// isLastActiveValue = $derived.by(() => {
-	// 	if (!isBrowser) return false;
-	// 	if (this.menu.viewportId.value) {
-	// 		const viewportNode = document.getElementById(this.menu.viewportId.value);
-	// 		if (viewportNode) {
-	// 			if (!this.menu.value.value && this.menu.previousValue.current) {
-	// 				return this.menu.previousValue.current === this.item.value.value;
-	// 			}
-	// 		}
-	// 	}
-	// 	return false;
-	// });
+	isLastActiveValue = $derived.by(() => {
+		if (!isBrowser) return false;
+		if (this.menu.viewportId.value) {
+			const viewportNode = document.getElementById(this.menu.viewportId.value);
+			if (viewportNode) {
+				if (!this.menu.value.value && this.menu.previousValue.current) {
+					return this.menu.previousValue.current === this.item.value.value;
+				}
+			}
+		}
+		return false;
+	});
 
 	constructor(props: NavigationMenuContentStateProps, item: NavigationMenuItemState) {
 		this.id = props.id;
 		this.item = item;
 		this.menu = item.menu;
 
-		// $effect(() => {
-		// 	console.log("1");
-		// 	const contentNode = this.getNode();
-		// 	if (this.menu.isRoot && contentNode) {
-		// 		// bubble dimiss to the root content node and focus its trigger
-		// 		const handleClose = () => {
-		// 			this.menu.onItemDismiss();
-		// 			this.item.onRootContentClose();
-		// 			if (contentNode.contains(document.activeElement)) {
-		// 				this.item.getTriggerNode()?.focus();
-		// 			}
-		// 		};
-
-		// 		contentNode.addEventListener(EVENT_ROOT_CONTENT_DISMISS, handleClose);
-
-		// 		return () => {
-		// 			contentNode.removeEventListener(EVENT_ROOT_CONTENT_DISMISS, handleClose);
-		// 		};
-		// 	}
-		// });
-
-		// $effect(() => {
-		// 	const items = untrack(() => this.menu.getTriggerNodes());
-		// 	const prev = untrack(() => this.menu.previousValue.value);
-		// 	const values = items
-		// 		.map((item) => item.dataset.value)
-		// 		.filter((v): v is string => Boolean(v));
-		// 	if (this.menu.dir.value === "rtl") values.reverse();
-		// 	const index = values.indexOf(this.menu.value.value);
-		// 	const prevIndex = values.indexOf(prev ?? "");
-		// 	const isSelected = untrack(() => this.item.value.value === this.menu.value.value);
-		// 	const wasSelected = untrack(() => prevIndex === values.indexOf(this.item.value.value));
-
-		// 	// We only want to update selected and the last selected content
-		// 	// this avoids animations being interrupted outside of that range
-		// 	if (!isSelected && !wasSelected) {
-		// 		untrack(() => (this.motionAttribute = this.prevMotionAttribute));
-		// 	}
-
-		// 	untrack(() => {
-		// 		const attribute = (() => {
-		// 			// Don't provide a direction on the initial open
-		// 			if (index !== prevIndex) {
-		// 				// If we're moving to this item from another
-		// 				if (isSelected && prevIndex !== -1) {
-		// 					return index > prevIndex ? "from-end" : "from-start";
-		// 				}
-		// 				// If we're leaving this item for another
-		// 				if (wasSelected && index !== -1) {
-		// 					return index > prevIndex ? "to-start" : "to-end";
-		// 				}
-		// 			}
-		// 			// Otherwise we're entering from closed or leaving the list
-		// 			// entirely and should not animate in any direction
-		// 			return null;
-		// 		})();
-		// 		this.prevMotionAttribute = attribute;
-		// 		this.motionAttribute = attribute;
-		// 	});
-		// });
+		$effect(() => {
+			console.log("1");
+			const contentNode = this.getNode();
+			if (this.menu.isRoot && contentNode) {
+				// bubble dimiss to the root content node and focus its trigger
+				const handleClose = () => {
+					this.menu.onItemDismiss();
+					this.item.onRootContentClose();
+					if (contentNode.contains(document.activeElement)) {
+						this.item.getTriggerNode()?.focus();
+					}
+				};
+
+				contentNode.addEventListener(EVENT_ROOT_CONTENT_DISMISS, handleClose);
+
+				return () => {
+					contentNode.removeEventListener(EVENT_ROOT_CONTENT_DISMISS, handleClose);
+				};
+			}
+		});
+
+		$effect(() => {
+			const items = untrack(() => this.menu.getTriggerNodes());
+			const prev = untrack(() => this.menu.previousValue.current);
+			const values = items
+				.map((item) => item.dataset.value)
+				.filter((v): v is string => Boolean(v));
+			if (this.menu.dir.value === "rtl") values.reverse();
+			const index = values.indexOf(this.menu.value.value);
+			const prevIndex = values.indexOf(prev ?? "");
+			const isSelected = untrack(() => this.item.value.value === this.menu.value.value);
+			const wasSelected = untrack(() => prevIndex === values.indexOf(this.item.value.value));
+
+			// We only want to update selected and the last selected content
+			// this avoids animations being interrupted outside of that range
+			if (!isSelected && !wasSelected) {
+				untrack(() => (this.motionAttribute = this.prevMotionAttribute));
+			}
+
+			untrack(() => {
+				const attribute = (() => {
+					// Don't provide a direction on the initial open
+					if (index !== prevIndex) {
+						// If we're moving to this item from another
+						if (isSelected && prevIndex !== -1) {
+							return index > prevIndex ? "from-end" : "from-start";
+						}
+						// If we're leaving this item for another
+						if (wasSelected && index !== -1) {
+							return index > prevIndex ? "to-start" : "to-end";
+						}
+					}
+					// Otherwise we're entering from closed or leaving the list
+					// entirely and should not animate in any direction
+					return null;
+				})();
+				this.prevMotionAttribute = attribute;
+				this.motionAttribute = attribute;
+			});
+		});
 	}
 
 	getNode = () => {
@@ -766,12 +766,14 @@ class NavigationMenuViewportState {
 		useResizeObserver(
 			() => this.contentNode,
 			() => {
-				if (this.contentNode) {
-					this.size = {
-						width: this.contentNode.offsetWidth,
-						height: this.contentNode.offsetHeight,
-					};
-				}
+				untrack(() => {
+					if (this.contentNode) {
+						this.size = {
+							width: this.contentNode.offsetWidth,
+							height: this.contentNode.offsetHeight,
+						};
+					}
+				});
 			}
 		);
 	}

From 0fa8ff5e15bc8fe4ee4a78e143986a37e1cc1aa5 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 14 Jun 2024 22:53:20 -0400
Subject: [PATCH 05/18] closer

---
 .../components/navigation-menu-content.svelte | 28 +++++++++++++------
 .../navigation-menu/navigation-menu.svelte.ts | 17 +++++++++--
 .../demos/navigation-menu-demo.svelte         |  2 +-
 3 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-content.svelte b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-content.svelte
index e796ea553..8e4a81654 100644
--- a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-content.svelte
+++ b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-content.svelte
@@ -26,18 +26,16 @@
 	});
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));
 	const viewportId = $derived(contentState.menu.viewportId.value);
-	const viewportNode = $derived.by(() => {
-		if (!isBrowser) return undefined;
-		const node = document.getElementById(viewportId ?? "");
-		if (!node) return undefined;
-	});
-	const portalDisabled = $derived(!Boolean(viewportNode));
+	const portalDisabled = $derived(!Boolean(contentState.menu.viewportNode));
 	const mounted = new IsMounted();
 </script>
 
-{#if mounted.current}
-	<Portal to={viewportNode} disabled={portalDisabled}>
-		<PresenceLayer {id} present={forceMount || contentState.open}>
+{#if mounted.current && contentState.menu.viewportNode}
+	<Portal to={contentState.menu.viewportNode} disabled={portalDisabled}>
+		<PresenceLayer
+			{id}
+			present={forceMount || contentState.open || contentState.isLastActiveValue}
+		>
 			{#snippet presence({ present })}
 				{#if asChild}
 					{@render child?.({ props: mergedProps })}
@@ -49,4 +47,16 @@
 			{/snippet}
 		</PresenceLayer>
 	</Portal>
+{:else}
+	<PresenceLayer {id} present={forceMount || contentState.open || contentState.isLastActiveValue}>
+		{#snippet presence({ present })}
+			{#if asChild}
+				{@render child?.({ props: mergedProps })}
+			{:else}
+				<div bind:this={ref} {...mergedProps}>
+					{@render children?.()}
+				</div>
+			{/if}
+		{/snippet}
+	</PresenceLayer>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts b/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts
index 1acd1d55a..08c7a823f 100644
--- a/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts
@@ -18,6 +18,7 @@ import { kbd } from "$lib/internal/kbd.js";
 import { isBrowser } from "$lib/internal/is.js";
 import { useArrowNavigation } from "$lib/internal/useArrowNavigation.js";
 import { boxAutoReset } from "$lib/internal/boxAutoReset.svelte.js";
+import { afterTick } from "$lib/internal/afterTick.js";
 
 const [setNavigationMenuRootContext, getNavigationMenuRootContext] =
 	createContext<NavigationMenuRootState>("NavigationMenu.Root");
@@ -171,7 +172,8 @@ class NavigationMenuMenuState {
 	getTriggerNodes: NavigationMenuMenuStateProps["getTriggerNodes"];
 	registerTriggerId: NavigationMenuMenuStateProps["registerTriggerId"];
 	deRegisterTriggerId: NavigationMenuMenuStateProps["deRegisterTriggerId"];
-	viewportId = box.with<string | undefined>(() => undefined);
+	viewportId = box("");
+	viewportNode = $state<HTMLElement | null>(null);
 	viewportContentId = box.with<string | undefined>(() => undefined);
 	indicatorTrackId = box.with<string | undefined>(() => undefined);
 	root: NavigationMenuRootState;
@@ -193,6 +195,14 @@ class NavigationMenuMenuState {
 		this.getTriggerNodes = props.getTriggerNodes;
 		this.root = root;
 		this.previousValue = props.previousValue;
+
+		$effect(() => {
+			if (this.viewportId.value) {
+				afterTick(() => {
+					this.viewportNode = document.getElementById(this.viewportId.value ?? "");
+				});
+			}
+		});
 	}
 
 	getViewportNode = () => {
@@ -750,7 +760,10 @@ class NavigationMenuViewportState {
 	constructor(props: NavigationMenuViewportStateProps, menu: NavigationMenuMenuState) {
 		this.id = props.id;
 		this.menu = menu;
-		this.menu.viewportId = props.id;
+
+		$effect(() => {
+			this.menu.viewportId.value = props.id.value;
+		});
 
 		$effect(() => {
 			this.open;
diff --git a/sites/docs/src/lib/components/demos/navigation-menu-demo.svelte b/sites/docs/src/lib/components/demos/navigation-menu-demo.svelte
index 30ca5a9fd..02ddb6113 100644
--- a/sites/docs/src/lib/components/demos/navigation-menu-demo.svelte
+++ b/sites/docs/src/lib/components/demos/navigation-menu-demo.svelte
@@ -154,7 +154,7 @@
 	</NavigationMenu.List>
 	<div class="absolute left-0 top-full flex justify-center">
 		<NavigationMenu.Viewport
-			class="origin-top-center bg-popover text-popover-foreground relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]"
+			class="origin-top-center text-popover-foreground relative mt-1.5 h-[var(--bits-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-background shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--bits-navigation-menu-viewport-width)]"
 		/>
 	</div>
 </NavigationMenu.Root>

From 805e5c3c7649bb2820cf3ed4bf0bb2539fdfc2e9 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 14 Jun 2024 23:35:37 -0400
Subject: [PATCH 06/18] closer

---
 .../components/navigation-menu-content.svelte |  63 +++++++----
 .../navigation-menu/navigation-menu.svelte.ts | 104 +++++++++---------
 .../useDismissableLayer.svelte.ts             |   1 -
 .../demos/navigation-menu-demo.svelte         |   4 +-
 4 files changed, 92 insertions(+), 80 deletions(-)

diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-content.svelte b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-content.svelte
index 8e4a81654..2d5392065 100644
--- a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-content.svelte
+++ b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-content.svelte
@@ -6,14 +6,13 @@
 	import { mergeProps } from "$lib/internal/mergeProps.js";
 	import Portal from "$lib/bits/utilities/portal/portal.svelte";
 	import { PresenceLayer } from "$lib/bits/utilities/presence-layer/index.js";
-	import EscapeLayer from "$lib/bits/utilities/escape-layer/escape-layer.svelte";
-	import DismissableLayer from "$lib/bits/utilities/dismissable-layer/dismissable-layer.svelte";
 	import { IsMounted } from "runed";
-	import { isBrowser } from "$lib/internal/is.js";
+	import { untrack } from "svelte";
+	import DismissableLayer from "$lib/bits/utilities/dismissable-layer/dismissable-layer.svelte";
 
 	let {
 		asChild,
-		children,
+		children: contentChildren,
 		child,
 		ref = $bindable(),
 		id = useId(),
@@ -25,38 +24,54 @@
 		id: box.with(() => id),
 	});
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));
-	const viewportId = $derived(contentState.menu.viewportId.value);
 	const portalDisabled = $derived(!Boolean(contentState.menu.viewportNode));
 	const mounted = new IsMounted();
+
+	const isPresent = $derived(forceMount || contentState.open || contentState.isLastActiveValue);
 </script>
 
 {#if mounted.current && contentState.menu.viewportNode}
 	<Portal to={contentState.menu.viewportNode} disabled={portalDisabled}>
-		<PresenceLayer
-			{id}
-			present={forceMount || contentState.open || contentState.isLastActiveValue}
-		>
+		<PresenceLayer {id} present={isPresent}>
 			{#snippet presence({ present })}
-				{#if asChild}
-					{@render child?.({ props: mergedProps })}
-				{:else}
-					<div bind:this={ref} {...mergedProps}>
-						{@render children?.()}
-					</div>
-				{/if}
+				<DismissableLayer
+					enabled={present.value}
+					{id}
+					onInteractOutside={contentState.onInteractOutside}
+					onFocusOutside={contentState.onFocusOutside}
+				>
+					{#snippet children({ props: dismissableProps })}
+						{#if asChild}
+							{@render child?.({ props: mergeProps(mergedProps, dismissableProps) })}
+						{:else}
+							<div bind:this={ref} {...mergeProps(mergedProps, dismissableProps)}>
+								{@render contentChildren?.()}
+							</div>
+						{/if}
+					{/snippet}
+				</DismissableLayer>
 			{/snippet}
 		</PresenceLayer>
 	</Portal>
 {:else}
-	<PresenceLayer {id} present={forceMount || contentState.open || contentState.isLastActiveValue}>
+	<PresenceLayer {id} present={isPresent}>
 		{#snippet presence({ present })}
-			{#if asChild}
-				{@render child?.({ props: mergedProps })}
-			{:else}
-				<div bind:this={ref} {...mergedProps}>
-					{@render children?.()}
-				</div>
-			{/if}
+			<DismissableLayer
+				enabled={present.value}
+				{id}
+				onFocusOutside={contentState.onFocusOutside}
+				onInteractOutside={contentState.onInteractOutside}
+			>
+				{#snippet children({ props: dismissableProps })}
+					{#if asChild}
+						{@render child?.({ props: mergeProps(mergedProps, dismissableProps) })}
+					{:else}
+						<div bind:this={ref} {...mergeProps(mergedProps, dismissableProps)}>
+							{@render contentChildren?.()}
+						</div>
+					{/if}
+				{/snippet}
+			</DismissableLayer>
 		{/snippet}
 	</PresenceLayer>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts b/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts
index 08c7a823f..4e3fe6eac 100644
--- a/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts
@@ -506,7 +506,7 @@ class NavigationMenuIndicatorState {
 		$effect(() => {
 			const triggerNodes = this.menu.getTriggerNodes();
 			const triggerNode = triggerNodes.find(
-				(node) => node.dataset.value === untrack(() => this.menu.value.value)
+				(node) => node.dataset.value === this.menu.value.value
 			);
 			if (triggerNode) {
 				untrack(() => {
@@ -527,17 +527,15 @@ class NavigationMenuIndicatorState {
 	}
 
 	handlePositionChange = () => {
-		untrack(() => {
-			if (!this.activeTrigger) return;
-			this.position = {
-				size: this.isHorizontal
-					? this.activeTrigger.offsetWidth
-					: this.activeTrigger.offsetHeight,
-				offset: this.isHorizontal
-					? this.activeTrigger.offsetLeft
-					: this.activeTrigger.offsetTop,
-			};
-		});
+		if (!this.activeTrigger) return;
+		this.position = {
+			size: this.isHorizontal
+				? this.activeTrigger.offsetWidth
+				: this.activeTrigger.offsetHeight,
+			offset: this.isHorizontal
+				? this.activeTrigger.offsetLeft
+				: this.activeTrigger.offsetTop,
+		};
 	};
 
 	props = $derived.by(
@@ -583,12 +581,10 @@ class NavigationMenuContentState {
 	open = $derived.by(() => this.menu.value.value === this.item.value.value);
 	isLastActiveValue = $derived.by(() => {
 		if (!isBrowser) return false;
-		if (this.menu.viewportId.value) {
-			const viewportNode = document.getElementById(this.menu.viewportId.value);
-			if (viewportNode) {
-				if (!this.menu.value.value && this.menu.previousValue.current) {
-					return this.menu.previousValue.current === this.item.value.value;
-				}
+		if (this.menu.viewportNode) {
+			console.log("this.menu.viewportNode", this.menu.viewportNode);
+			if (!this.menu.value.value && this.menu.previousValue.current) {
+				return this.menu.previousValue.current === this.item.value.value;
 			}
 		}
 		return false;
@@ -600,7 +596,13 @@ class NavigationMenuContentState {
 		this.menu = item.menu;
 
 		$effect(() => {
-			console.log("1");
+			console.log("open", this.open);
+		});
+		$effect(() => {
+			console.log("isLastActiveValue", this.isLastActiveValue);
+		});
+
+		$effect(() => {
 			const contentNode = this.getNode();
 			if (this.menu.isRoot && contentNode) {
 				// bubble dimiss to the root content node and focus its trigger
@@ -621,43 +623,41 @@ class NavigationMenuContentState {
 		});
 
 		$effect(() => {
-			const items = untrack(() => this.menu.getTriggerNodes());
-			const prev = untrack(() => this.menu.previousValue.current);
+			const items = this.menu.getTriggerNodes();
+			const prev = this.menu.previousValue.current;
 			const values = items
 				.map((item) => item.dataset.value)
 				.filter((v): v is string => Boolean(v));
 			if (this.menu.dir.value === "rtl") values.reverse();
 			const index = values.indexOf(this.menu.value.value);
 			const prevIndex = values.indexOf(prev ?? "");
-			const isSelected = untrack(() => this.item.value.value === this.menu.value.value);
-			const wasSelected = untrack(() => prevIndex === values.indexOf(this.item.value.value));
+			const isSelected = this.item.value.value === this.menu.value.value;
+			const wasSelected = prevIndex === values.indexOf(this.item.value.value);
 
 			// We only want to update selected and the last selected content
 			// this avoids animations being interrupted outside of that range
 			if (!isSelected && !wasSelected) {
-				untrack(() => (this.motionAttribute = this.prevMotionAttribute));
+				this.motionAttribute = this.prevMotionAttribute;
 			}
 
-			untrack(() => {
-				const attribute = (() => {
-					// Don't provide a direction on the initial open
-					if (index !== prevIndex) {
-						// If we're moving to this item from another
-						if (isSelected && prevIndex !== -1) {
-							return index > prevIndex ? "from-end" : "from-start";
-						}
-						// If we're leaving this item for another
-						if (wasSelected && index !== -1) {
-							return index > prevIndex ? "to-start" : "to-end";
-						}
+			const attribute = (() => {
+				// Don't provide a direction on the initial open
+				if (index !== prevIndex) {
+					// If we're moving to this item from another
+					if (isSelected && prevIndex !== -1) {
+						return index > prevIndex ? "from-end" : "from-start";
 					}
-					// Otherwise we're entering from closed or leaving the list
-					// entirely and should not animate in any direction
-					return null;
-				})();
-				this.prevMotionAttribute = attribute;
-				this.motionAttribute = attribute;
-			});
+					// If we're leaving this item for another
+					if (wasSelected && index !== -1) {
+						return index > prevIndex ? "to-start" : "to-end";
+					}
+				}
+				// Otherwise we're entering from closed or leaving the list
+				// entirely and should not animate in any direction
+				return null;
+			})();
+			this.prevMotionAttribute = attribute;
+			this.motionAttribute = attribute;
 		});
 	}
 
@@ -679,7 +679,7 @@ class NavigationMenuContentState {
 		if (e.defaultPrevented) return;
 		const target = e.target as HTMLElement;
 		const isTrigger = this.menu.getTriggerNodes().some((node) => node.contains(target));
-		const isRootViewport = this.menu.isRoot && this.menu.getViewportNode()?.contains(target);
+		const isRootViewport = this.menu.isRoot && this.menu.viewportNode?.contains(target);
 
 		if (isTrigger || isRootViewport || !this.menu.isRoot) {
 			e.preventDefault();
@@ -779,14 +779,12 @@ class NavigationMenuViewportState {
 		useResizeObserver(
 			() => this.contentNode,
 			() => {
-				untrack(() => {
-					if (this.contentNode) {
-						this.size = {
-							width: this.contentNode.offsetWidth,
-							height: this.contentNode.offsetHeight,
-						};
-					}
-				});
+				if (this.contentNode) {
+					this.size = {
+						width: this.contentNode.offsetWidth,
+						height: this.contentNode.offsetHeight,
+					};
+				}
 			}
 		);
 	}
@@ -880,7 +878,7 @@ export function useNavigationMenuRoot(props: NavigationMenuRootStateProps) {
 	});
 
 	setNavigationMenuMenuContext(menuState);
-	return setNavigationMenuRootContext(new NavigationMenuRootState(props));
+	return setNavigationMenuRootContext(rootState);
 }
 
 export function useNavigationMenuList(props: NavigationMenuListStateProps) {
diff --git a/packages/bits-ui/src/lib/bits/utilities/dismissable-layer/useDismissableLayer.svelte.ts b/packages/bits-ui/src/lib/bits/utilities/dismissable-layer/useDismissableLayer.svelte.ts
index 6c95a2692..5a588865c 100644
--- a/packages/bits-ui/src/lib/bits/utilities/dismissable-layer/useDismissableLayer.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/utilities/dismissable-layer/useDismissableLayer.svelte.ts
@@ -21,7 +21,6 @@ import {
 	noop,
 	useNodeById,
 } from "$lib/internal/index.js";
-import { eventLogs } from "$lib/bits/index.js";
 
 const layers = new Map<DismissableLayerState, ReadableBox<InteractOutsideBehaviorType>>();
 
diff --git a/sites/docs/src/lib/components/demos/navigation-menu-demo.svelte b/sites/docs/src/lib/components/demos/navigation-menu-demo.svelte
index 02ddb6113..430494175 100644
--- a/sites/docs/src/lib/components/demos/navigation-menu-demo.svelte
+++ b/sites/docs/src/lib/components/demos/navigation-menu-demo.svelte
@@ -112,7 +112,7 @@
 				</ul>
 			</NavigationMenu.Content>
 		</NavigationMenu.Item>
-		<NavigationMenu.Item>
+		<!-- <NavigationMenu.Item>
 			<NavigationMenu.Trigger
 				class="group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-muted hover:text-accent-foreground focus:bg-muted focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-muted/50 data-[state=open]:bg-muted/50"
 			>
@@ -135,7 +135,7 @@
 					{/each}
 				</ul>
 			</NavigationMenu.Content>
-		</NavigationMenu.Item>
+		</NavigationMenu.Item> -->
 		<NavigationMenu.Item>
 			<NavigationMenu.Link
 				class="group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-muted hover:text-accent-foreground focus:bg-muted focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-muted/50 data-[state=open]:bg-muted/50"

From 2b227bfb8bb9c32f105ffc679e544f151b2c8e86 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 14 Jun 2024 23:37:44 -0400
Subject: [PATCH 07/18] cleanup menubar demo

---
 sites/docs/src/lib/components/demos/menubar-demo.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/sites/docs/src/lib/components/demos/menubar-demo.svelte b/sites/docs/src/lib/components/demos/menubar-demo.svelte
index af87c0289..dde2e1420 100644
--- a/sites/docs/src/lib/components/demos/menubar-demo.svelte
+++ b/sites/docs/src/lib/components/demos/menubar-demo.svelte
@@ -96,7 +96,7 @@
 			<Menubar.RadioGroup bind:value={selectedView}>
 				{#each views as view}
 					<Menubar.RadioItem
-						value="table"
+						value={view.value}
 						class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
 					>
 						{#snippet children({ checked })}

From eabf11760964d7075adda594219906ed7f02f838 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 14 Jun 2024 23:44:42 -0400
Subject: [PATCH 08/18] bits

---
 .../navigation-menu/navigation-menu.svelte.ts   | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts b/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts
index 4e3fe6eac..a795721cd 100644
--- a/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts
@@ -356,6 +356,14 @@ class NavigationMenuTriggerState {
 		this.menu = item.menu;
 		this.item.triggerId = props.id;
 		this.disabled = props.disabled;
+
+		$effect(() => {
+			this.menu.registerTriggerId(props.id.value);
+
+			return () => {
+				this.menu.deRegisterTriggerId(props.id.value);
+			};
+		});
 	}
 
 	#onpointerenter = () => {
@@ -582,7 +590,6 @@ class NavigationMenuContentState {
 	isLastActiveValue = $derived.by(() => {
 		if (!isBrowser) return false;
 		if (this.menu.viewportNode) {
-			console.log("this.menu.viewportNode", this.menu.viewportNode);
 			if (!this.menu.value.value && this.menu.previousValue.current) {
 				return this.menu.previousValue.current === this.item.value.value;
 			}
@@ -595,13 +602,6 @@ class NavigationMenuContentState {
 		this.item = item;
 		this.menu = item.menu;
 
-		$effect(() => {
-			console.log("open", this.open);
-		});
-		$effect(() => {
-			console.log("isLastActiveValue", this.isLastActiveValue);
-		});
-
 		$effect(() => {
 			const contentNode = this.getNode();
 			if (this.menu.isRoot && contentNode) {
@@ -656,6 +656,7 @@ class NavigationMenuContentState {
 				// entirely and should not animate in any direction
 				return null;
 			})();
+
 			this.prevMotionAttribute = attribute;
 			this.motionAttribute = attribute;
 		});

From 7b87c086e88ab2e86bce0102763b3f797222b9ee Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sat, 15 Jun 2024 15:11:58 -0400
Subject: [PATCH 09/18] more

---
 package.json                                  |   2 +-
 packages/bits-ui/package.json                 |   2 +-
 .../components/navigation-menu-content.svelte |  44 +---
 .../navigation-menu-indicator.svelte          |  12 +-
 .../components/navigation-menu-list.svelte    |  11 +-
 .../components/navigation-menu-trigger.svelte |  12 +-
 .../navigation-menu-viewport.svelte           |  26 +-
 .../components/navigation-menu.svelte         |   8 +-
 .../navigation-menu/navigation-menu.svelte.ts | 244 ++++++++++--------
 .../lib/bits/utilities/portal/portal.svelte   |  24 +-
 .../presence-layer/usePresence.svelte.ts      |   7 +-
 packages/bits-ui/src/lib/internal/types.ts    |   4 +-
 .../src/lib/internal/useNodeById.svelte.ts    |  54 +++-
 pnpm-lock.yaml                                | 190 +++++++-------
 sites/docs/package.json                       |   2 +-
 .../demos/navigation-menu-demo.svelte         |   4 +-
 16 files changed, 368 insertions(+), 278 deletions(-)

diff --git a/package.json b/package.json
index 73fc05a59..0ec25dc1d 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
 		"prettier": "^3.2.5",
 		"prettier-plugin-svelte": "^3.2.2",
 		"prettier-plugin-tailwindcss": "0.5.13",
-		"svelte": "5.0.0-next.143",
+		"svelte": "5.0.0-next.155",
 		"svelte-eslint-parser": "^0.34.1",
 		"wrangler": "^3.44.0"
 	},
diff --git a/packages/bits-ui/package.json b/packages/bits-ui/package.json
index 0467998cc..16aca21a5 100644
--- a/packages/bits-ui/package.json
+++ b/packages/bits-ui/package.json
@@ -45,7 +45,7 @@
 		"jsdom": "^24.0.0",
 		"publint": "^0.2.7",
 		"resize-observer-polyfill": "^1.5.1",
-		"svelte": "5.0.0-next.143",
+		"svelte": "5.0.0-next.155",
 		"svelte-check": "^3.6.9",
 		"tslib": "^2.6.2",
 		"typescript": "^5.3.3",
diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-content.svelte b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-content.svelte
index 2d5392065..5b99d39aa 100644
--- a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-content.svelte
+++ b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-content.svelte
@@ -7,14 +7,13 @@
 	import Portal from "$lib/bits/utilities/portal/portal.svelte";
 	import { PresenceLayer } from "$lib/bits/utilities/presence-layer/index.js";
 	import { IsMounted } from "runed";
-	import { untrack } from "svelte";
 	import DismissableLayer from "$lib/bits/utilities/dismissable-layer/dismissable-layer.svelte";
 
 	let {
 		asChild,
 		children: contentChildren,
 		child,
-		ref = $bindable(),
+		ref = $bindable(null),
 		id = useId(),
 		forceMount = false,
 		...restProps
@@ -22,45 +21,28 @@
 
 	const contentState = useNavigationMenuContent({
 		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => {
+				ref = v;
+			}
+		),
+		forceMount: box.with(() => forceMount),
 	});
+
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));
 	const portalDisabled = $derived(!Boolean(contentState.menu.viewportNode));
 	const mounted = new IsMounted();
-
-	const isPresent = $derived(forceMount || contentState.open || contentState.isLastActiveValue);
 </script>
 
-{#if mounted.current && contentState.menu.viewportNode}
-	<Portal to={contentState.menu.viewportNode} disabled={portalDisabled}>
-		<PresenceLayer {id} present={isPresent}>
-			{#snippet presence({ present })}
-				<DismissableLayer
-					enabled={present.value}
-					{id}
-					onInteractOutside={contentState.onInteractOutside}
-					onFocusOutside={contentState.onFocusOutside}
-				>
-					{#snippet children({ props: dismissableProps })}
-						{#if asChild}
-							{@render child?.({ props: mergeProps(mergedProps, dismissableProps) })}
-						{:else}
-							<div bind:this={ref} {...mergeProps(mergedProps, dismissableProps)}>
-								{@render contentChildren?.()}
-							</div>
-						{/if}
-					{/snippet}
-				</DismissableLayer>
-			{/snippet}
-		</PresenceLayer>
-	</Portal>
-{:else}
-	<PresenceLayer {id} present={isPresent}>
+<Portal to={contentState.menu.viewportNode} disabled={portalDisabled}>
+	<PresenceLayer {id} present={contentState.isPresent}>
 		{#snippet presence({ present })}
 			<DismissableLayer
 				enabled={present.value}
 				{id}
-				onFocusOutside={contentState.onFocusOutside}
 				onInteractOutside={contentState.onInteractOutside}
+				onFocusOutside={contentState.onFocusOutside}
 			>
 				{#snippet children({ props: dismissableProps })}
 					{#if asChild}
@@ -74,4 +56,4 @@
 			</DismissableLayer>
 		{/snippet}
 	</PresenceLayer>
-{/if}
+</Portal>
diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-indicator.svelte b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-indicator.svelte
index 34cbfcbe8..2f44da5cf 100644
--- a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-indicator.svelte
+++ b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-indicator.svelte
@@ -9,7 +9,7 @@
 
 	let {
 		id = useId(),
-		ref = $bindable(),
+		ref = $bindable(null),
 		asChild,
 		children,
 		child,
@@ -19,19 +19,23 @@
 
 	const indicatorState = useNavigationMenuIndicator({
 		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, indicatorState.props));
 </script>
 
-{#if indicatorState.indicatorTrackNode}
-	<Portal to={`#${indicatorState.indicatorTrackNode.id}`}>
+{#if indicatorState.menu.indicatorTrackNode}
+	<Portal to={indicatorState.menu.indicatorTrackNode}>
 		<PresenceLayer {id} present={forceMount || indicatorState.isVisible}>
 			{#snippet presence()}
 				{#if asChild}
 					{@render child?.({ props: mergedProps })}
 				{:else}
-					<div bind:this={ref} {...mergedProps}>
+					<div {...mergedProps}>
 						{@render children?.()}
 					</div>
 				{/if}
diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-list.svelte b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-list.svelte
index 5d8df47a9..fdb801d6b 100644
--- a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-list.svelte
+++ b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-list.svelte
@@ -10,19 +10,24 @@
 		asChild,
 		children,
 		child,
-		ref = $bindable(),
+		ref = $bindable(null),
 		...restProps
 	}: ListProps = $props();
 
 	const listState = useNavigationMenuList({
 		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+		indicatorTrackRef: box(null),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, listState.props));
-	const indicatorProps = $derived(mergeProps(listState.indicatorProps, {}));
+	const indicatorTrackProps = $derived(mergeProps(listState.indicatorTrackProps, {}));
 </script>
 
-<div {...indicatorProps}>
+<div {...indicatorTrackProps}>
 	{#if asChild}
 		{@render child?.({ props: mergedProps })}
 	{:else}
diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-trigger.svelte b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-trigger.svelte
index 0f34dc45d..4b96c91f6 100644
--- a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-trigger.svelte
+++ b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-trigger.svelte
@@ -12,13 +12,17 @@
 		asChild,
 		children,
 		child,
-		ref = $bindable(),
+		ref = $bindable(null),
 		...restProps
 	}: TriggerProps = $props();
 
 	const triggerState = useNavigationMenuTrigger({
 		id: box.with(() => id),
 		disabled: box.with(() => disabled),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, triggerState.props));
@@ -27,14 +31,14 @@
 {#if asChild}
 	{@render child?.({ props: mergedProps })}
 {:else}
-	<button {...mergedProps} bind:this={ref}>
+	<button {...mergedProps}>
 		{@render children?.()}
 	</button>
 {/if}
 
 {#if triggerState.open}
 	<VisuallyHidden {...triggerState.visuallyHiddenProps} />
-	{#if triggerState.menu.viewportId.value}
-		<span aria-owns={triggerState.item.contentId.value}></span>
+	{#if triggerState.menu.viewportNode}
+		<span aria-owns={triggerState.item.contentNode?.id ?? undefined}></span>
 	{/if}
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-viewport.svelte b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-viewport.svelte
index 32cbd6ffd..68cbd9add 100644
--- a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-viewport.svelte
+++ b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-viewport.svelte
@@ -4,27 +4,37 @@
 	import { useNavigationMenuViewport } from "../navigation-menu.svelte.js";
 	import { useId } from "$lib/internal/useId.svelte.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
+	import PresenceLayer from "$lib/bits/utilities/presence-layer/presence-layer.svelte";
 
 	let {
 		id = useId(),
-		ref = $bindable(),
+		ref = $bindable(null),
 		asChild,
 		children,
 		child,
+		forceMount = false,
 		...restProps
 	}: ViewportProps = $props();
 
 	const viewportState = useNavigationMenuViewport({
 		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, viewportState.props));
 </script>
 
-{#if asChild}
-	{@render child?.({ props: mergedProps })}
-{:else}
-	<div {...mergedProps} bind:this={ref}>
-		{@render children?.()}
-	</div>
-{/if}
+<PresenceLayer {id} present={forceMount || viewportState.open}>
+	{#snippet presence({ present })}
+		{#if asChild}
+			{@render child?.({ props: mergedProps })}
+		{:else}
+			<div {...mergedProps}>
+				{@render children?.()}
+			</div>
+		{/if}
+	{/snippet}
+</PresenceLayer>
diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu.svelte b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu.svelte
index ee0396f34..a468a6217 100644
--- a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu.svelte
+++ b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu.svelte
@@ -11,7 +11,7 @@
 		child,
 		children,
 		id = useId(),
-		ref = $bindable(),
+		ref = $bindable(null),
 		value = $bindable(""),
 		onValueChange = noop,
 		delayDuration = 200,
@@ -36,6 +36,10 @@
 		skipDelayDuration: box.with(() => skipDelayDuration),
 		dir: box.with(() => dir),
 		orientation: box.with(() => orientation),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
 	});
 
 	const mergedProps = $derived(mergeProps({ "aria-label": "main" }, restProps, rootState.props));
@@ -44,7 +48,7 @@
 {#if asChild}
 	{@render child?.({ props: mergedProps })}
 {:else}
-	<nav {...mergedProps} bind:this={ref}>
+	<nav {...mergedProps}>
 		{@render children?.()}
 	</nav>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts b/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts
index a795721cd..941c11977 100644
--- a/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts
@@ -18,6 +18,8 @@ import { kbd } from "$lib/internal/kbd.js";
 import { isBrowser } from "$lib/internal/is.js";
 import { useArrowNavigation } from "$lib/internal/useArrowNavigation.js";
 import { boxAutoReset } from "$lib/internal/boxAutoReset.svelte.js";
+import { useRefById } from "$lib/internal/useNodeById.svelte.js";
+import type { ElementRef } from "$lib/internal/types.js";
 import { afterTick } from "$lib/internal/afterTick.js";
 
 const [setNavigationMenuRootContext, getNavigationMenuRootContext] =
@@ -47,10 +49,11 @@ type NavigationMenuRootStateProps = ReadableBoxedValues<{
 	orientation: Orientation;
 	dir: Direction;
 }> &
-	WritableBoxedValues<{ value: string }>;
+	WritableBoxedValues<{ value: string; ref: HTMLElement | null }>;
 
 class NavigationMenuRootState {
 	id: NavigationMenuRootStateProps["id"];
+	rootRef: NavigationMenuRootStateProps["ref"];
 	delayDuration: NavigationMenuRootStateProps["delayDuration"];
 	skipDelayDuration: NavigationMenuRootStateProps["skipDelayDuration"];
 	orientation: NavigationMenuRootStateProps["orientation"];
@@ -58,7 +61,9 @@ class NavigationMenuRootState {
 	value: NavigationMenuRootStateProps["value"];
 	previousValue = new Previous(() => this.value.value);
 	triggerIds = new Set<string>();
-	isDelaySkipped: WritableBox<boolean>;
+	triggerRefs = new Set<ElementRef>();
+	isDelaySkipped: WritableBox<boolean> = box(false);
+
 	derivedDelay = $derived.by(() => {
 		const isOpen = this.value?.value !== "";
 		if (isOpen || this.isDelaySkipped?.value) return 150;
@@ -66,7 +71,6 @@ class NavigationMenuRootState {
 	});
 
 	setValue = useDebounce((v: string) => {
-		if (this.value.value === v) return;
 		this.value.value = v;
 	}, this.derivedDelay);
 
@@ -78,23 +82,25 @@ class NavigationMenuRootState {
 		this.dir = props.dir;
 		this.value = props.value;
 		this.isDelaySkipped = boxAutoReset(false, this.skipDelayDuration.value);
-	}
+		this.rootRef = props.ref;
 
-	getNode = () => {
-		return document.getElementById(this.id.value);
-	};
+		useRefById({
+			id: this.id,
+			ref: this.rootRef,
+		});
+	}
 
-	registerTriggerId = (triggerId: string) => {
-		this.triggerIds.add(triggerId);
+	registerTrigger = (ref: ElementRef) => {
+		this.triggerRefs.add(ref);
 	};
 
-	deRegisterTriggerId = (triggerId: string) => {
-		this.triggerIds.delete(triggerId);
+	deRegisterTrigger = (ref: ElementRef) => {
+		this.triggerRefs.delete(ref);
 	};
 
 	getTriggerNodes = () => {
-		return Array.from(this.triggerIds)
-			.map((triggerId) => document.getElementById(triggerId))
+		return Array.from(this.triggerRefs)
+			.map((ref) => ref.value)
 			.filter((node): node is HTMLElement => Boolean(node));
 	};
 
@@ -151,8 +157,8 @@ type NavigationMenuMenuStateProps = ReadableBoxedValues<{
 		onItemSelect: (itemValue: string) => void;
 		onItemDismiss: () => void;
 		getTriggerNodes: () => HTMLElement[];
-		registerTriggerId: (triggerId: string) => void;
-		deRegisterTriggerId: (triggerId: string) => void;
+		registerTrigger: (ref: ElementRef) => void;
+		deRegisterTrigger: (ref: ElementRef) => void;
 		previousValue: Previous<string>;
 	};
 
@@ -170,12 +176,11 @@ class NavigationMenuMenuState {
 	onItemSelect: NavigationMenuMenuStateProps["onItemSelect"];
 	onItemDismiss: NavigationMenuMenuStateProps["onItemDismiss"];
 	getTriggerNodes: NavigationMenuMenuStateProps["getTriggerNodes"];
-	registerTriggerId: NavigationMenuMenuStateProps["registerTriggerId"];
-	deRegisterTriggerId: NavigationMenuMenuStateProps["deRegisterTriggerId"];
-	viewportId = box("");
+	registerTrigger: NavigationMenuMenuStateProps["registerTrigger"];
+	deRegisterTrigger: NavigationMenuMenuStateProps["deRegisterTrigger"];
 	viewportNode = $state<HTMLElement | null>(null);
+	indicatorTrackNode = $state<HTMLElement | null>(null);
 	viewportContentId = box.with<string | undefined>(() => undefined);
-	indicatorTrackId = box.with<string | undefined>(() => undefined);
 	root: NavigationMenuRootState;
 
 	constructor(props: NavigationMenuMenuStateProps, root: NavigationMenuRootState) {
@@ -190,25 +195,13 @@ class NavigationMenuMenuState {
 		this.onContentLeave = props.onContentLeave;
 		this.onItemSelect = props.onItemSelect;
 		this.onItemDismiss = props.onItemDismiss;
-		this.deRegisterTriggerId = props.deRegisterTriggerId;
-		this.registerTriggerId = props.registerTriggerId;
+		this.deRegisterTrigger = props.deRegisterTrigger;
+		this.registerTrigger = props.registerTrigger;
 		this.getTriggerNodes = props.getTriggerNodes;
 		this.root = root;
 		this.previousValue = props.previousValue;
-
-		$effect(() => {
-			if (this.viewportId.value) {
-				afterTick(() => {
-					this.viewportNode = document.getElementById(this.viewportId.value ?? "");
-				});
-			}
-		});
 	}
 
-	getViewportNode = () => {
-		return document.getElementById(this.viewportId.value ?? "");
-	};
-
 	createList(props: NavigationMenuListStateProps) {
 		return new NavigationMenuListState(props, this);
 	}
@@ -228,23 +221,44 @@ class NavigationMenuMenuState {
 
 type NavigationMenuListStateProps = ReadableBoxedValues<{
 	id: string;
-}>;
+}> &
+	WritableBoxedValues<{
+		ref: HTMLElement | null;
+		indicatorTrackRef: HTMLElement | null;
+	}>;
 
 class NavigationMenuListState {
 	id: NavigationMenuListStateProps["id"];
-	indicatorId = box(useId());
+	listRef: NavigationMenuListStateProps["ref"];
+	indicatorTrackRef: NavigationMenuListStateProps["indicatorTrackRef"];
+	indicatorTrackId = box(useId());
 
 	constructor(
 		props: NavigationMenuListStateProps,
 		private menu: NavigationMenuMenuState
 	) {
 		this.id = props.id;
+		this.listRef = props.ref;
+		this.indicatorTrackRef = props.indicatorTrackRef;
+
+		useRefById({
+			id: this.id,
+			ref: this.listRef,
+		});
+
+		useRefById({
+			id: this.indicatorTrackId,
+			ref: this.indicatorTrackRef,
+			onRefChange: (node) => {
+				this.menu.indicatorTrackNode = node;
+			},
+		});
 	}
 
-	indicatorProps = $derived.by(
+	indicatorTrackProps = $derived.by(
 		() =>
 			({
-				id: this.indicatorId.value,
+				id: this.indicatorTrackId.value,
 				style: {
 					position: "relative",
 				},
@@ -268,8 +282,8 @@ type NavigationMenuItemStateProps = ReadableBoxedValues<{
 class NavigationMenuItemState {
 	id: NavigationMenuItemStateProps["id"];
 	value: NavigationMenuItemStateProps["value"];
-	contentId = box.with<string | undefined>(() => undefined);
-	triggerId = box.with<string | undefined>(() => undefined);
+	contentNode = $state<HTMLElement | null>(null);
+	triggerNode = $state<HTMLElement | null>(null);
 	focusProxyId = box.with<string | undefined>(() => useId());
 	restoreContentTabOrder = $state(() => {});
 	wasEscapeClose = $state(false);
@@ -281,32 +295,22 @@ class NavigationMenuItemState {
 		this.menu = menu;
 	}
 
-	getContentNode = () => {
-		return document.getElementById(this.contentId.value ?? "");
-	};
-
-	getTriggerNode = () => {
-		return document.getElementById(this.triggerId.value ?? "");
-	};
-
 	getFocusProxyNode = () => {
 		return document.getElementById(this.focusProxyId.value ?? "");
 	};
 
 	#handleContentEntry = (side: "start" | "end" = "start") => {
-		const contentNode = this.getContentNode();
-		if (!contentNode) return;
+		if (!this.contentNode) return;
 		this.restoreContentTabOrder();
-		const candidates = getTabbableCandidates(contentNode);
+		const candidates = getTabbableCandidates(this.contentNode);
 		if (candidates.length) {
 			focusFirst(side === "start" ? candidates : candidates.reverse());
 		}
 	};
 
 	#handleContentExit = () => {
-		const contentNode = this.getContentNode();
-		if (!contentNode) return;
-		const candidates = getTabbableCandidates(contentNode);
+		if (!this.contentNode) return;
+		const candidates = getTabbableCandidates(this.contentNode);
 		if (candidates.length) {
 			this.restoreContentTabOrder = removeFromTabOrder(candidates);
 		}
@@ -341,27 +345,40 @@ class NavigationMenuItemState {
 type NavigationMenuTriggerStateProps = ReadableBoxedValues<{
 	id: string;
 	disabled: boolean;
-}>;
+}> &
+	WritableBoxedValues<{
+		ref: HTMLElement | null;
+	}>;
 
 class NavigationMenuTriggerState {
+	id: NavigationMenuTriggerStateProps["id"];
 	menu: NavigationMenuMenuState;
 	item: NavigationMenuItemState;
 	disabled: NavigationMenuTriggerStateProps["disabled"];
 	hasPointerMoveOpened = boxAutoReset(false, 300);
 	wasClickClose = $state(false);
 	open = $derived.by(() => this.item.value.value === this.menu.value.value);
+	triggerRef: NavigationMenuTriggerStateProps["ref"];
 
 	constructor(props: NavigationMenuTriggerStateProps, item: NavigationMenuItemState) {
+		this.id = props.id;
+		this.triggerRef = props.ref;
 		this.item = item;
 		this.menu = item.menu;
-		this.item.triggerId = props.id;
 		this.disabled = props.disabled;
 
-		$effect(() => {
-			this.menu.registerTriggerId(props.id.value);
+		useRefById({
+			id: this.id,
+			ref: this.triggerRef,
+			onRefChange: (node) => {
+				this.item.triggerNode = node;
+			},
+		});
 
+		$effect(() => {
+			this.menu.registerTrigger(this.triggerRef);
 			return () => {
-				this.menu.deRegisterTriggerId(props.id.value);
+				this.menu.deRegisterTrigger(this.triggerRef);
 			};
 		});
 	}
@@ -417,12 +434,12 @@ class NavigationMenuTriggerState {
 	props = $derived.by(
 		() =>
 			({
-				id: this.item.triggerId.value,
+				id: this.id.value,
 				disabled: getDisabledAttr(this.disabled.value),
 				"data-disabled": getDataDisabled(this.disabled.value),
 				"data-state": getDataOpenClosed(this.open),
 				"aria-expanded": getAriaExpanded(this.open),
-				"aria-controls": this.item.contentId.value ? this.item.contentId.value : undefined,
+				"aria-controls": this.item.contentNode ? this.item.contentNode.id : undefined,
 				"data-value": this.item.value.value,
 				onpointerenter: this.#onpointerenter,
 				onpointermove: this.#onpointermove,
@@ -440,7 +457,7 @@ class NavigationMenuTriggerState {
 				"aria-hidden": "true",
 				tabIndex: 0,
 				onfocus: (e: FocusEvent) => {
-					const contentNode = this.item.getContentNode();
+					const contentNode = this.item.contentNode;
 					const prevFocusedElement = e.relatedTarget as HTMLElement | null;
 					const wasTriggerFocused = prevFocusedElement === this.item.getFocusProxyNode();
 					const wasFocusFromContent = contentNode?.contains(prevFocusedElement);
@@ -496,7 +513,10 @@ class NavigationMenuLinkState {
 
 type NavigationMenuIndicatorStateProps = ReadableBoxedValues<{
 	id: string;
-}>;
+}> &
+	WritableBoxedValues<{
+		ref: HTMLElement | null;
+	}>;
 
 class NavigationMenuIndicatorState {
 	id: NavigationMenuIndicatorStateProps["id"];
@@ -505,12 +525,21 @@ class NavigationMenuIndicatorState {
 	position = $state<{ size: number; offset: number } | null>(null);
 	isHorizontal = $derived.by(() => this.menu.orientation.value === "horizontal");
 	isVisible = $derived.by(() => Boolean(this.menu.value.value));
-	indicatorTrackNode = $state<HTMLElement | null>(null);
+	indicatorRef: NavigationMenuIndicatorStateProps["ref"];
 
 	constructor(props: NavigationMenuIndicatorStateProps, menu: NavigationMenuMenuState) {
 		this.id = props.id;
+		this.indicatorRef = props.ref;
 		this.menu = menu;
 
+		useRefById({
+			id: this.id,
+			ref: this.indicatorRef,
+			onRefChange: (node) => {
+				this.menu.viewportNode = node;
+			},
+		});
+
 		$effect(() => {
 			const triggerNodes = this.menu.getTriggerNodes();
 			const triggerNode = triggerNodes.find(
@@ -523,15 +552,8 @@ class NavigationMenuIndicatorState {
 			}
 		});
 
-		$effect(() => {
-			const indicatorTrackNode = document.getElementById(
-				this.menu.indicatorTrackId.value ?? ""
-			);
-			untrack(() => (this.indicatorTrackNode = indicatorTrackNode));
-		});
-
 		useResizeObserver(() => this.activeTrigger, this.handlePositionChange);
-		useResizeObserver(() => this.indicatorTrackNode, this.handlePositionChange);
+		useResizeObserver(() => this.menu.indicatorTrackNode, this.handlePositionChange);
 	}
 
 	handlePositionChange = () => {
@@ -576,19 +598,24 @@ class NavigationMenuIndicatorState {
 
 type NavigationMenuContentStateProps = ReadableBoxedValues<{
 	id: string;
-}>;
+	forceMount: boolean;
+}> &
+	WritableBoxedValues<{
+		ref: HTMLElement | null;
+	}>;
 
 type MotionAttribute = "to-start" | "to-end" | "from-start" | "from-end";
 
 class NavigationMenuContentState {
 	id: NavigationMenuContentStateProps["id"];
+	forceMount: NavigationMenuContentStateProps["forceMount"];
+	contentRef: NavigationMenuContentStateProps["ref"];
 	menu: NavigationMenuMenuState;
 	item: NavigationMenuItemState;
 	prevMotionAttribute = $state<MotionAttribute | null>(null);
 	motionAttribute = $state<MotionAttribute | null>(null);
 	open = $derived.by(() => this.menu.value.value === this.item.value.value);
 	isLastActiveValue = $derived.by(() => {
-		if (!isBrowser) return false;
 		if (this.menu.viewportNode) {
 			if (!this.menu.value.value && this.menu.previousValue.current) {
 				return this.menu.previousValue.current === this.item.value.value;
@@ -596,31 +623,14 @@ class NavigationMenuContentState {
 		}
 		return false;
 	});
+	isPresent = $derived.by(() => this.open || this.isLastActiveValue || this.forceMount.value);
 
 	constructor(props: NavigationMenuContentStateProps, item: NavigationMenuItemState) {
 		this.id = props.id;
+		this.forceMount = props.forceMount;
 		this.item = item;
 		this.menu = item.menu;
-
-		$effect(() => {
-			const contentNode = this.getNode();
-			if (this.menu.isRoot && contentNode) {
-				// bubble dimiss to the root content node and focus its trigger
-				const handleClose = () => {
-					this.menu.onItemDismiss();
-					this.item.onRootContentClose();
-					if (contentNode.contains(document.activeElement)) {
-						this.item.getTriggerNode()?.focus();
-					}
-				};
-
-				contentNode.addEventListener(EVENT_ROOT_CONTENT_DISMISS, handleClose);
-
-				return () => {
-					contentNode.removeEventListener(EVENT_ROOT_CONTENT_DISMISS, handleClose);
-				};
-			}
-		});
+		this.contentRef = props.ref;
 
 		$effect(() => {
 			const items = this.menu.getTriggerNodes();
@@ -662,16 +672,12 @@ class NavigationMenuContentState {
 		});
 	}
 
-	getNode = () => {
-		return document.getElementById(this.id.value);
-	};
-
 	onFocusOutside = (e: Event) => {
 		if (e.defaultPrevented) return;
 		this.item.onContentFocusOutside();
 		const target = e.target as HTMLElement;
 		// only dismiss content when focus moves outside the menu
-		if (this.menu.root.getNode()?.contains(target)) {
+		if (this.menu.root.rootRef.value?.contains(target)) {
 			e.preventDefault();
 		}
 	};
@@ -690,7 +696,7 @@ class NavigationMenuContentState {
 	onEscapeKeydown = (e: KeyboardEvent) => {
 		if (e.defaultPrevented) return;
 		this.menu.onItemDismiss();
-		this.item.getTriggerNode()?.focus();
+		this.item.triggerNode?.focus();
 		this.item.wasEscapeClose = true;
 	};
 
@@ -736,11 +742,14 @@ class NavigationMenuContentState {
 		() =>
 			({
 				id: this.id.value,
-				"aria-labelledby": this.item.triggerId.value,
+				"aria-labelledby": this.item.triggerNode?.id ?? undefined,
 				"data-motion": this.motionAttribute,
 				"data-state": getDataOpenClosed(this.menu.value.value === this.item.value.value),
 				"data-orientation": getDataOrientation(this.menu.orientation.value),
 				[CONTENT_ATTR]: "",
+				style: {
+					pointerEvents: !this.open && this.menu.isRoot ? "none" : undefined,
+				},
 				onkeydown: this.#onkeydown,
 			}) as const
 	);
@@ -748,7 +757,10 @@ class NavigationMenuContentState {
 
 type NavigationMenuViewportStateProps = ReadableBoxedValues<{
 	id: string;
-}>;
+}> &
+	WritableBoxedValues<{
+		ref: HTMLElement | null;
+	}>;
 
 class NavigationMenuViewportState {
 	id: NavigationMenuViewportStateProps["id"];
@@ -756,24 +768,32 @@ class NavigationMenuViewportState {
 	size = $state<{ width: number; height: number } | null>(null);
 	open = $derived.by(() => this.menu.value.value !== "");
 	activeContentValue = $derived.by(() => this.menu.value.value);
+	viewportRef: NavigationMenuViewportStateProps["ref"];
 	contentNode = $state<HTMLElement | null>();
 
 	constructor(props: NavigationMenuViewportStateProps, menu: NavigationMenuMenuState) {
 		this.id = props.id;
 		this.menu = menu;
-
-		$effect(() => {
-			this.menu.viewportId.value = props.id.value;
+		this.viewportRef = props.ref;
+
+		useRefById({
+			id: this.id,
+			ref: this.viewportRef,
+			onRefChange: (node) => {
+				this.menu.viewportNode = node;
+			},
+			condition: () => this.open,
 		});
 
 		$effect(() => {
 			this.open;
 			this.activeContentValue;
-			const currentNode = untrack(() => this.getNode());
+			const currentNode = untrack(() => this.viewportRef.value);
 			if (!currentNode) return;
-			untrack(() => {
-				this.contentNode = currentNode.querySelector("[data-state=open]")
-					?.children?.[0] as HTMLElement | null;
+			afterTick(() => {
+				const contentNode = currentNode.querySelector("[data-state=open]")
+					?.children?.[0] as HTMLElement;
+				this.contentNode = contentNode;
 			});
 		});
 
@@ -790,10 +810,6 @@ class NavigationMenuViewportState {
 		);
 	}
 
-	getNode = () => {
-		return document.getElementById(this.id.value);
-	};
-
 	#onpointerenter = () => {
 		this.menu.onContentEnter?.(this.menu.value.value);
 	};
@@ -867,8 +883,8 @@ export function useNavigationMenuRoot(props: NavigationMenuRootStateProps) {
 		orientation: rootState.orientation,
 		value: rootState.value,
 		isRoot: true,
-		deRegisterTriggerId: rootState.deRegisterTriggerId,
-		registerTriggerId: rootState.registerTriggerId,
+		deRegisterTrigger: rootState.deRegisterTrigger,
+		registerTrigger: rootState.registerTrigger,
 		onTriggerEnter: rootState.onTriggerEnter,
 		onItemSelect: rootState.onItemSelect,
 		onItemDismiss: rootState.onItemDismiss,
diff --git a/packages/bits-ui/src/lib/bits/utilities/portal/portal.svelte b/packages/bits-ui/src/lib/bits/utilities/portal/portal.svelte
index 32a2b55d0..9a277779c 100644
--- a/packages/bits-ui/src/lib/bits/utilities/portal/portal.svelte
+++ b/packages/bits-ui/src/lib/bits/utilities/portal/portal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getAllContexts, mount, unmount } from "svelte";
+	import { getAllContexts, mount, unmount, untrack } from "svelte";
 	import PortalConsumer from "./portal-consumer.svelte";
 	import type { PortalProps } from "./types.js";
 	import { isBrowser } from "$lib/internal/is.js";
@@ -11,7 +11,7 @@
 	let target = $derived(getTarget());
 
 	function getTarget() {
-		if (!isBrowser) return null;
+		if (!isBrowser || disabled) return null;
 		let target: HTMLElement | null | DocumentFragment | Element = null;
 		if (typeof to === "string") {
 			target = document.querySelector(to);
@@ -35,12 +35,26 @@
 
 	$effect(() => {
 		if (!target || disabled) {
-			return unmount(instance);
+			if (instance) {
+				unmount(instance);
+				instance = null;
+			}
+			return;
 		}
-		instance = mount(PortalConsumer, { target: target as any, props: { children }, context });
+		untrack(
+			() =>
+				(instance = mount(PortalConsumer, {
+					target: target as any,
+					props: { children },
+					context,
+				}))
+		);
 
 		return () => {
-			unmount(instance);
+			if (instance) {
+				unmount(instance);
+				instance = null;
+			}
 		};
 	});
 </script>
diff --git a/packages/bits-ui/src/lib/bits/utilities/presence-layer/usePresence.svelte.ts b/packages/bits-ui/src/lib/bits/utilities/presence-layer/usePresence.svelte.ts
index 19330c8ae..e64c8dd05 100644
--- a/packages/bits-ui/src/lib/bits/utilities/presence-layer/usePresence.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/utilities/presence-layer/usePresence.svelte.ts
@@ -112,10 +112,9 @@ export function usePresence(present: ReadableBox<boolean>, id: ReadableBox<strin
 		node.addEventListener("animationend", handleAnimationEnd);
 
 		return () => {
-			if (!node) return;
-			node.removeEventListener("animationstart", handleAnimationStart);
-			node.removeEventListener("animationcancel", handleAnimationEnd);
-			node.removeEventListener("animationend", handleAnimationEnd);
+			node?.removeEventListener("animationstart", handleAnimationStart);
+			node?.removeEventListener("animationcancel", handleAnimationEnd);
+			node?.removeEventListener("animationend", handleAnimationEnd);
 		};
 	});
 
diff --git a/packages/bits-ui/src/lib/internal/types.ts b/packages/bits-ui/src/lib/internal/types.ts
index b550f7df6..520c10e53 100644
--- a/packages/bits-ui/src/lib/internal/types.ts
+++ b/packages/bits-ui/src/lib/internal/types.ts
@@ -142,7 +142,7 @@ export type AsChildProps<Props, SnippetProps, Ref> = {
 	child: Snippet<[SnippetProps & { props: Record<string, unknown> }]>;
 	children?: never;
 	asChild: true;
-	ref?: Ref;
+	ref?: Ref | null;
 	style?: StyleProperties;
 } & Omit<Props, "children" | "asChild">;
 
@@ -154,7 +154,7 @@ export type DefaultProps<Props, Ref> = {
 	style?: StyleProperties;
 } & Omit<Props, "child" | "asChild">;
 
-export type ElementRef = Box<HTMLElement | undefined>;
+export type ElementRef = Box<HTMLElement | null>;
 
 export type WithAsChild<
 	Props,
diff --git a/packages/bits-ui/src/lib/internal/useNodeById.svelte.ts b/packages/bits-ui/src/lib/internal/useNodeById.svelte.ts
index 52e3a3559..1f3698ab1 100644
--- a/packages/bits-ui/src/lib/internal/useNodeById.svelte.ts
+++ b/packages/bits-ui/src/lib/internal/useNodeById.svelte.ts
@@ -1,5 +1,8 @@
-import { type ReadableBox, type WritableBox, box } from "svelte-toolbelt";
+import { type Getter, type ReadableBox, type WritableBox, box } from "svelte-toolbelt";
 import { afterTick } from "./afterTick.js";
+import type { Box } from "./box.svelte.js";
+import { untrack } from "svelte";
+import { noop } from "./callbacks.js";
 
 /**
  * Finds the node with that ID and sets it to the boxed node.
@@ -34,3 +37,52 @@ export function useNodeById(
 
 	return node;
 }
+
+type UseRefByIdProps = {
+	/**
+	 * The ID of the node to find.
+	 */
+	id: Box<string>;
+
+	/**
+	 * The ref to set the node to.
+	 */
+	ref: WritableBox<HTMLElement | null>;
+
+	/**
+	 * A condition that determines whether the ref should be set or not.
+	 */
+	condition?: Getter<boolean>;
+
+	/**
+	 * A callback fired when the ref changes.
+	 */
+	onRefChange?: (node: HTMLElement | null) => void;
+};
+
+/**
+ * Finds the node with that ID and sets it to the boxed node.
+ * Reactive using `$effect` to ensure when the ID or condition changes,
+ * an update is triggered and new node is found.
+ *
+ * @param id The boxed ID of the node to find.
+ */
+export function useRefById({
+	id,
+	ref,
+	condition = () => true,
+	onRefChange = noop,
+}: UseRefByIdProps) {
+	$effect(() => {
+		// re-run when the ID changes.
+		id.value;
+		// re-run when the condition changes.
+		if (condition()) {
+			const node = document.getElementById(id.value);
+			if (node !== ref.value) {
+				untrack(() => (ref.value = node));
+				untrack(() => onRefChange(node));
+			}
+		}
+	});
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 20aa66921..c852d9515 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -13,7 +13,7 @@ importers:
         version: 2.27.5
       '@huntabyte/eslint-config':
         specifier: ^0.3.1
-        version: 0.3.1(@vue/compiler-sfc@3.4.27)(eslint-plugin-svelte@2.39.0(eslint@9.3.0)(svelte@5.0.0-next.143))(eslint@9.3.0)(svelte-eslint-parser@0.34.1(svelte@5.0.0-next.143))(svelte@5.0.0-next.143)(typescript@5.4.5)(vitest@1.6.0)
+        version: 0.3.1(@vue/compiler-sfc@3.4.27)(eslint-plugin-svelte@2.39.0(eslint@9.3.0)(svelte@5.0.0-next.155))(eslint@9.3.0)(svelte-eslint-parser@0.34.1(svelte@5.0.0-next.155))(svelte@5.0.0-next.155)(typescript@5.4.5)(vitest@1.6.0)
       '@huntabyte/eslint-plugin':
         specifier: ^0.1.0
         version: 0.1.0(eslint@9.3.0)
@@ -25,22 +25,22 @@ importers:
         version: 9.3.0
       eslint-plugin-svelte:
         specifier: ^2.37.0
-        version: 2.39.0(eslint@9.3.0)(svelte@5.0.0-next.143)
+        version: 2.39.0(eslint@9.3.0)(svelte@5.0.0-next.155)
       prettier:
         specifier: ^3.2.5
         version: 3.2.5
       prettier-plugin-svelte:
         specifier: ^3.2.2
-        version: 3.2.3(prettier@3.2.5)(svelte@5.0.0-next.143)
+        version: 3.2.3(prettier@3.2.5)(svelte@5.0.0-next.155)
       prettier-plugin-tailwindcss:
         specifier: 0.5.13
-        version: 0.5.13(prettier-plugin-svelte@3.2.3(prettier@3.2.5)(svelte@5.0.0-next.143))(prettier@3.2.5)
+        version: 0.5.13(prettier-plugin-svelte@3.2.3(prettier@3.2.5)(svelte@5.0.0-next.155))(prettier@3.2.5)
       svelte:
-        specifier: 5.0.0-next.143
-        version: 5.0.0-next.143
+        specifier: 5.0.0-next.155
+        version: 5.0.0-next.155
       svelte-eslint-parser:
         specifier: ^0.34.1
-        version: 0.34.1(svelte@5.0.0-next.143)
+        version: 0.34.1(svelte@5.0.0-next.155)
       wrangler:
         specifier: ^3.44.0
         version: 3.57.2(@cloudflare/workers-types@4.20240524.0)
@@ -58,7 +58,7 @@ importers:
         version: 3.5.4
       '@melt-ui/svelte':
         specifier: 0.76.2
-        version: 0.76.2(svelte@5.0.0-next.143)
+        version: 0.76.2(svelte@5.0.0-next.155)
       clsx:
         specifier: ^2.1.0
         version: 2.1.1
@@ -70,7 +70,7 @@ importers:
         version: 5.0.7
       runed:
         specifier: ^0.12.1
-        version: 0.12.1(svelte@5.0.0-next.143)
+        version: 0.12.1(svelte@5.0.0-next.155)
       scule:
         specifier: ^1.3.0
         version: 1.3.0
@@ -82,20 +82,20 @@ importers:
         version: 1.0.6
       svelte-toolbelt:
         specifier: ^0.0.2
-        version: 0.0.2(svelte@5.0.0-next.143)
+        version: 0.0.2(svelte@5.0.0-next.155)
     devDependencies:
       '@melt-ui/pp':
         specifier: ^0.3.0
-        version: 0.3.2(@melt-ui/svelte@0.76.2(svelte@5.0.0-next.143))(svelte@5.0.0-next.143)
+        version: 0.3.2(@melt-ui/svelte@0.76.2(svelte@5.0.0-next.155))(svelte@5.0.0-next.155)
       '@sveltejs/kit':
         specifier: ^2.5.0
-        version: 2.5.10(@sveltejs/vite-plugin-svelte@3.1.1(svelte@5.0.0-next.143)(vite@5.2.12(@types/node@20.12.13)))(svelte@5.0.0-next.143)(vite@5.2.12(@types/node@20.12.13))
+        version: 2.5.10(@sveltejs/vite-plugin-svelte@3.1.1(svelte@5.0.0-next.155)(vite@5.2.12(@types/node@20.12.13)))(svelte@5.0.0-next.155)(vite@5.2.12(@types/node@20.12.13))
       '@sveltejs/package':
         specifier: ^2.2.7
-        version: 2.3.1(svelte@5.0.0-next.143)(typescript@5.4.5)
+        version: 2.3.1(svelte@5.0.0-next.155)(typescript@5.4.5)
       '@sveltejs/vite-plugin-svelte':
         specifier: ^3.1.0
-        version: 3.1.1(svelte@5.0.0-next.143)(vite@5.2.12(@types/node@20.12.13))
+        version: 3.1.1(svelte@5.0.0-next.155)(vite@5.2.12(@types/node@20.12.13))
       '@testing-library/dom':
         specifier: ^10.0.0
         version: 10.1.0
@@ -104,7 +104,7 @@ importers:
         version: 6.4.5(@types/jest@29.5.12)(vitest@1.6.0(@types/node@20.12.13)(@vitest/ui@1.6.0)(jsdom@24.1.0))
       '@testing-library/svelte':
         specifier: ^5.0.1
-        version: 5.1.0(svelte@5.0.0-next.143)(vite@5.2.12(@types/node@20.12.13))(vitest@1.6.0(@types/node@20.12.13)(@vitest/ui@1.6.0)(jsdom@24.1.0))
+        version: 5.1.0(svelte@5.0.0-next.155)(vite@5.2.12(@types/node@20.12.13))(vitest@1.6.0(@types/node@20.12.13)(@vitest/ui@1.6.0)(jsdom@24.1.0))
       '@testing-library/user-event':
         specifier: ^14.5.2
         version: 14.5.2(@testing-library/dom@10.1.0)
@@ -139,11 +139,11 @@ importers:
         specifier: ^1.5.1
         version: 1.5.1
       svelte:
-        specifier: 5.0.0-next.143
-        version: 5.0.0-next.143
+        specifier: 5.0.0-next.155
+        version: 5.0.0-next.155
       svelte-check:
         specifier: ^3.6.9
-        version: 3.8.0(postcss-load-config@5.1.0(jiti@1.21.0)(postcss@8.4.38))(postcss@8.4.38)(svelte@5.0.0-next.143)
+        version: 3.8.0(postcss-load-config@5.1.0(postcss@8.4.38))(postcss@8.4.38)(svelte@5.0.0-next.155)
       tslib:
         specifier: ^2.6.2
         version: 2.6.2
@@ -164,26 +164,26 @@ importers:
         version: 3.5.4
       '@melt-ui/svelte':
         specifier: 0.76.2
-        version: 0.76.2(svelte@5.0.0-next.143)
+        version: 0.76.2(svelte@5.0.0-next.155)
       bits-ui:
         specifier: workspace:*
         version: link:../../packages/bits-ui
     devDependencies:
       '@melt-ui/pp':
         specifier: ^0.3.0
-        version: 0.3.2(@melt-ui/svelte@0.76.2(svelte@5.0.0-next.143))(svelte@5.0.0-next.143)
+        version: 0.3.2(@melt-ui/svelte@0.76.2(svelte@5.0.0-next.155))(svelte@5.0.0-next.155)
       '@prettier/sync':
         specifier: 0.3.0
         version: 0.3.0(prettier@3.2.5)
       '@sveltejs/adapter-cloudflare':
         specifier: ^4.2.0
-        version: 4.4.0(@sveltejs/kit@2.5.10(@sveltejs/vite-plugin-svelte@3.1.1(svelte@5.0.0-next.143)(vite@5.2.12(@types/node@20.12.13)))(svelte@5.0.0-next.143)(vite@5.2.12(@types/node@20.12.13)))(wrangler@3.57.2(@cloudflare/workers-types@4.20240524.0))
+        version: 4.4.0(@sveltejs/kit@2.5.10(@sveltejs/vite-plugin-svelte@3.1.1(svelte@5.0.0-next.155)(vite@5.2.12(@types/node@20.12.13)))(svelte@5.0.0-next.155)(vite@5.2.12(@types/node@20.12.13)))(wrangler@3.57.2(@cloudflare/workers-types@4.20240524.0))
       '@sveltejs/kit':
         specifier: ^2.5.0
-        version: 2.5.10(@sveltejs/vite-plugin-svelte@3.1.1(svelte@5.0.0-next.143)(vite@5.2.12(@types/node@20.12.13)))(svelte@5.0.0-next.143)(vite@5.2.12(@types/node@20.12.13))
+        version: 2.5.10(@sveltejs/vite-plugin-svelte@3.1.1(svelte@5.0.0-next.155)(vite@5.2.12(@types/node@20.12.13)))(svelte@5.0.0-next.155)(vite@5.2.12(@types/node@20.12.13))
       '@sveltejs/vite-plugin-svelte':
         specifier: ^3.1.0
-        version: 3.1.1(svelte@5.0.0-next.143)(vite@5.2.12(@types/node@20.12.13))
+        version: 3.1.1(svelte@5.0.0-next.155)(vite@5.2.12(@types/node@20.12.13))
       '@tailwindcss/typography':
         specifier: ^0.5.10
         version: 0.5.13(tailwindcss@3.4.3)
@@ -216,13 +216,13 @@ importers:
         version: 3.0.1
       mdsx:
         specifier: ^0.0.5
-        version: 0.0.5(svelte@5.0.0-next.143)
+        version: 0.0.5(svelte@5.0.0-next.155)
       mode-watcher:
         specifier: ^0.2.0
-        version: 0.2.2(svelte@5.0.0-next.143)
+        version: 0.2.2(svelte@5.0.0-next.155)
       phosphor-svelte:
         specifier: ^1.4.2
-        version: 1.4.2(svelte@5.0.0-next.143)
+        version: 1.4.2(svelte@5.0.0-next.155)
       postcss:
         specifier: ^8.4.33
         version: 8.4.38
@@ -242,11 +242,11 @@ importers:
         specifier: ^1.1.1
         version: 1.6.1
       svelte:
-        specifier: 5.0.0-next.143
-        version: 5.0.0-next.143
+        specifier: 5.0.0-next.155
+        version: 5.0.0-next.155
       svelte-check:
         specifier: ^3.6.9
-        version: 3.8.0(postcss-load-config@5.1.0(jiti@1.21.0)(postcss@8.4.38))(postcss@8.4.38)(svelte@5.0.0-next.143)
+        version: 3.8.0(postcss-load-config@5.1.0(postcss@8.4.38))(postcss@8.4.38)(svelte@5.0.0-next.155)
       tailwind-merge:
         specifier: ^2.2.1
         version: 2.3.0
@@ -4762,8 +4762,8 @@ packages:
       svelte: ^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0
       typescript: ^4.9.4 || ^5.0.0
 
-  svelte@5.0.0-next.143:
-    resolution: {integrity: sha512-hRm52FjYUfd24eUlkBS41JSmqHOx6wt0cV+wMzgwqhhxIpJoz96eiMcnvcLqXx+gTxM1m0Pt/+7xP3vlm2QvPg==}
+  svelte@5.0.0-next.155:
+    resolution: {integrity: sha512-4a4EZuiTmg4eQJuQ6LTyK+DxRAZCYm4mXgqSWcZ7TellzLfaC1Je5nxBl1aZP3xdNhvPFIstQ8c7I6d+99FdZQ==}
     engines: {node: '>=18'}
 
   symbol-tree@3.2.4:
@@ -5345,7 +5345,7 @@ snapshots:
       '@jridgewell/gen-mapping': 0.3.5
       '@jridgewell/trace-mapping': 0.3.25
 
-  '@antfu/eslint-config@2.19.1(@vue/compiler-sfc@3.4.27)(eslint-plugin-svelte@2.39.0(eslint@9.3.0)(svelte@5.0.0-next.143))(eslint@9.3.0)(svelte-eslint-parser@0.34.1(svelte@5.0.0-next.143))(svelte@5.0.0-next.143)(typescript@5.4.5)(vitest@1.6.0)':
+  '@antfu/eslint-config@2.19.1(@vue/compiler-sfc@3.4.27)(eslint-plugin-svelte@2.39.0(eslint@9.3.0)(svelte@5.0.0-next.155))(eslint@9.3.0)(svelte-eslint-parser@0.34.1(svelte@5.0.0-next.155))(svelte@5.0.0-next.155)(typescript@5.4.5)(vitest@1.6.0)':
     dependencies:
       '@antfu/install-pkg': 0.3.3
       '@clack/prompts': 0.7.0
@@ -5365,7 +5365,7 @@ snapshots:
       eslint-plugin-markdown: 5.0.0(eslint@9.3.0)
       eslint-plugin-n: 17.7.0(eslint@9.3.0)
       eslint-plugin-no-only-tests: 3.1.0
-      eslint-plugin-perfectionist: 2.10.0(eslint@9.3.0)(svelte-eslint-parser@0.34.1(svelte@5.0.0-next.143))(svelte@5.0.0-next.143)(typescript@5.4.5)(vue-eslint-parser@9.4.2(eslint@9.3.0))
+      eslint-plugin-perfectionist: 2.10.0(eslint@9.3.0)(svelte-eslint-parser@0.34.1(svelte@5.0.0-next.155))(svelte@5.0.0-next.155)(typescript@5.4.5)(vue-eslint-parser@9.4.2(eslint@9.3.0))
       eslint-plugin-regexp: 2.6.0(eslint@9.3.0)
       eslint-plugin-toml: 0.11.0(eslint@9.3.0)
       eslint-plugin-unicorn: 53.0.0(eslint@9.3.0)
@@ -5384,8 +5384,8 @@ snapshots:
       yaml-eslint-parser: 1.2.3
       yargs: 17.7.2
     optionalDependencies:
-      eslint-plugin-svelte: 2.39.0(eslint@9.3.0)(svelte@5.0.0-next.143)
-      svelte-eslint-parser: 0.34.1(svelte@5.0.0-next.143)
+      eslint-plugin-svelte: 2.39.0(eslint@9.3.0)(svelte@5.0.0-next.155)
+      svelte-eslint-parser: 0.34.1(svelte@5.0.0-next.155)
     transitivePeerDependencies:
       - '@vue/compiler-sfc'
       - supports-color
@@ -6050,9 +6050,9 @@ snapshots:
 
   '@humanwhocodes/retry@0.3.0': {}
 
-  '@huntabyte/eslint-config@0.3.1(@vue/compiler-sfc@3.4.27)(eslint-plugin-svelte@2.39.0(eslint@9.3.0)(svelte@5.0.0-next.143))(eslint@9.3.0)(svelte-eslint-parser@0.34.1(svelte@5.0.0-next.143))(svelte@5.0.0-next.143)(typescript@5.4.5)(vitest@1.6.0)':
+  '@huntabyte/eslint-config@0.3.1(@vue/compiler-sfc@3.4.27)(eslint-plugin-svelte@2.39.0(eslint@9.3.0)(svelte@5.0.0-next.155))(eslint@9.3.0)(svelte-eslint-parser@0.34.1(svelte@5.0.0-next.155))(svelte@5.0.0-next.155)(typescript@5.4.5)(vitest@1.6.0)':
     dependencies:
-      '@antfu/eslint-config': 2.19.1(@vue/compiler-sfc@3.4.27)(eslint-plugin-svelte@2.39.0(eslint@9.3.0)(svelte@5.0.0-next.143))(eslint@9.3.0)(svelte-eslint-parser@0.34.1(svelte@5.0.0-next.143))(svelte@5.0.0-next.143)(typescript@5.4.5)(vitest@1.6.0)
+      '@antfu/eslint-config': 2.19.1(@vue/compiler-sfc@3.4.27)(eslint-plugin-svelte@2.39.0(eslint@9.3.0)(svelte@5.0.0-next.155))(eslint@9.3.0)(svelte-eslint-parser@0.34.1(svelte@5.0.0-next.155))(svelte@5.0.0-next.155)(typescript@5.4.5)(vitest@1.6.0)
       '@antfu/install-pkg': 0.3.3
       '@clack/prompts': 0.7.0
       '@huntabyte/eslint-plugin': 0.1.0(eslint@9.3.0)
@@ -6061,10 +6061,10 @@ snapshots:
       chalk: 5.3.0
       eslint: 9.3.0
       eslint-flat-config-utils: 0.2.5
-      eslint-plugin-svelte: 2.39.0(eslint@9.3.0)(svelte@5.0.0-next.143)
+      eslint-plugin-svelte: 2.39.0(eslint@9.3.0)(svelte@5.0.0-next.155)
       local-pkg: 0.5.0
       parse-gitignore: 2.0.0
-      svelte-eslint-parser: 0.34.1(svelte@5.0.0-next.143)
+      svelte-eslint-parser: 0.34.1(svelte@5.0.0-next.155)
       yargs: 17.7.2
     transitivePeerDependencies:
       - '@eslint-react/eslint-plugin'
@@ -6201,14 +6201,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@melt-ui/pp@0.3.2(@melt-ui/svelte@0.76.2(svelte@5.0.0-next.143))(svelte@5.0.0-next.143)':
+  '@melt-ui/pp@0.3.2(@melt-ui/svelte@0.76.2(svelte@5.0.0-next.155))(svelte@5.0.0-next.155)':
     dependencies:
-      '@melt-ui/svelte': 0.76.2(svelte@5.0.0-next.143)
+      '@melt-ui/svelte': 0.76.2(svelte@5.0.0-next.155)
       estree-walker: 3.0.3
       magic-string: 0.30.10
-      svelte: 5.0.0-next.143
+      svelte: 5.0.0-next.155
 
-  '@melt-ui/svelte@0.76.2(svelte@5.0.0-next.143)':
+  '@melt-ui/svelte@0.76.2(svelte@5.0.0-next.155)':
     dependencies:
       '@floating-ui/core': 1.6.2
       '@floating-ui/dom': 1.6.5
@@ -6216,7 +6216,7 @@ snapshots:
       dequal: 2.0.3
       focus-trap: 7.5.4
       nanoid: 5.0.7
-      svelte: 5.0.0-next.143
+      svelte: 5.0.0-next.155
 
   '@nodelib/fs.scandir@2.1.5':
     dependencies:
@@ -6478,17 +6478,17 @@ snapshots:
       - supports-color
       - typescript
 
-  '@sveltejs/adapter-cloudflare@4.4.0(@sveltejs/kit@2.5.10(@sveltejs/vite-plugin-svelte@3.1.1(svelte@5.0.0-next.143)(vite@5.2.12(@types/node@20.12.13)))(svelte@5.0.0-next.143)(vite@5.2.12(@types/node@20.12.13)))(wrangler@3.57.2(@cloudflare/workers-types@4.20240524.0))':
+  '@sveltejs/adapter-cloudflare@4.4.0(@sveltejs/kit@2.5.10(@sveltejs/vite-plugin-svelte@3.1.1(svelte@5.0.0-next.155)(vite@5.2.12(@types/node@20.12.13)))(svelte@5.0.0-next.155)(vite@5.2.12(@types/node@20.12.13)))(wrangler@3.57.2(@cloudflare/workers-types@4.20240524.0))':
     dependencies:
       '@cloudflare/workers-types': 4.20240524.0
-      '@sveltejs/kit': 2.5.10(@sveltejs/vite-plugin-svelte@3.1.1(svelte@5.0.0-next.143)(vite@5.2.12(@types/node@20.12.13)))(svelte@5.0.0-next.143)(vite@5.2.12(@types/node@20.12.13))
+      '@sveltejs/kit': 2.5.10(@sveltejs/vite-plugin-svelte@3.1.1(svelte@5.0.0-next.155)(vite@5.2.12(@types/node@20.12.13)))(svelte@5.0.0-next.155)(vite@5.2.12(@types/node@20.12.13))
       esbuild: 0.20.2
       worktop: 0.8.0-next.18
       wrangler: 3.57.2(@cloudflare/workers-types@4.20240524.0)
 
-  '@sveltejs/kit@2.5.10(@sveltejs/vite-plugin-svelte@3.1.1(svelte@5.0.0-next.143)(vite@5.2.12(@types/node@20.12.13)))(svelte@5.0.0-next.143)(vite@5.2.12(@types/node@20.12.13))':
+  '@sveltejs/kit@2.5.10(@sveltejs/vite-plugin-svelte@3.1.1(svelte@5.0.0-next.155)(vite@5.2.12(@types/node@20.12.13)))(svelte@5.0.0-next.155)(vite@5.2.12(@types/node@20.12.13))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 3.1.1(svelte@5.0.0-next.143)(vite@5.2.12(@types/node@20.12.13))
+      '@sveltejs/vite-plugin-svelte': 3.1.1(svelte@5.0.0-next.155)(vite@5.2.12(@types/node@20.12.13))
       '@types/cookie': 0.6.0
       cookie: 0.6.0
       devalue: 5.0.0
@@ -6500,39 +6500,39 @@ snapshots:
       sade: 1.8.1
       set-cookie-parser: 2.6.0
       sirv: 2.0.4
-      svelte: 5.0.0-next.143
+      svelte: 5.0.0-next.155
       tiny-glob: 0.2.9
       vite: 5.2.12(@types/node@20.12.13)
 
-  '@sveltejs/package@2.3.1(svelte@5.0.0-next.143)(typescript@5.4.5)':
+  '@sveltejs/package@2.3.1(svelte@5.0.0-next.155)(typescript@5.4.5)':
     dependencies:
       chokidar: 3.6.0
       kleur: 4.1.5
       sade: 1.8.1
       semver: 7.6.2
-      svelte: 5.0.0-next.143
-      svelte2tsx: 0.7.9(svelte@5.0.0-next.143)(typescript@5.4.5)
+      svelte: 5.0.0-next.155
+      svelte2tsx: 0.7.9(svelte@5.0.0-next.155)(typescript@5.4.5)
     transitivePeerDependencies:
       - typescript
 
-  '@sveltejs/vite-plugin-svelte-inspector@2.1.0(@sveltejs/vite-plugin-svelte@3.1.1(svelte@5.0.0-next.143)(vite@5.2.12(@types/node@20.12.13)))(svelte@5.0.0-next.143)(vite@5.2.12(@types/node@20.12.13))':
+  '@sveltejs/vite-plugin-svelte-inspector@2.1.0(@sveltejs/vite-plugin-svelte@3.1.1(svelte@5.0.0-next.155)(vite@5.2.12(@types/node@20.12.13)))(svelte@5.0.0-next.155)(vite@5.2.12(@types/node@20.12.13))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 3.1.1(svelte@5.0.0-next.143)(vite@5.2.12(@types/node@20.12.13))
+      '@sveltejs/vite-plugin-svelte': 3.1.1(svelte@5.0.0-next.155)(vite@5.2.12(@types/node@20.12.13))
       debug: 4.3.4
-      svelte: 5.0.0-next.143
+      svelte: 5.0.0-next.155
       vite: 5.2.12(@types/node@20.12.13)
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@3.1.1(svelte@5.0.0-next.143)(vite@5.2.12(@types/node@20.12.13))':
+  '@sveltejs/vite-plugin-svelte@3.1.1(svelte@5.0.0-next.155)(vite@5.2.12(@types/node@20.12.13))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 2.1.0(@sveltejs/vite-plugin-svelte@3.1.1(svelte@5.0.0-next.143)(vite@5.2.12(@types/node@20.12.13)))(svelte@5.0.0-next.143)(vite@5.2.12(@types/node@20.12.13))
+      '@sveltejs/vite-plugin-svelte-inspector': 2.1.0(@sveltejs/vite-plugin-svelte@3.1.1(svelte@5.0.0-next.155)(vite@5.2.12(@types/node@20.12.13)))(svelte@5.0.0-next.155)(vite@5.2.12(@types/node@20.12.13))
       debug: 4.3.4
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.10
-      svelte: 5.0.0-next.143
-      svelte-hmr: 0.16.0(svelte@5.0.0-next.143)
+      svelte: 5.0.0-next.155
+      svelte-hmr: 0.16.0(svelte@5.0.0-next.155)
       vite: 5.2.12(@types/node@20.12.13)
       vitefu: 0.2.5(vite@5.2.12(@types/node@20.12.13))
     transitivePeerDependencies:
@@ -6593,10 +6593,10 @@ snapshots:
       '@types/jest': 29.5.12
       vitest: 1.6.0(@types/node@20.12.13)(@vitest/ui@1.6.0)(jsdom@24.1.0)
 
-  '@testing-library/svelte@5.1.0(svelte@5.0.0-next.143)(vite@5.2.12(@types/node@20.12.13))(vitest@1.6.0(@types/node@20.12.13)(@vitest/ui@1.6.0)(jsdom@24.1.0))':
+  '@testing-library/svelte@5.1.0(svelte@5.0.0-next.155)(vite@5.2.12(@types/node@20.12.13))(vitest@1.6.0(@types/node@20.12.13)(@vitest/ui@1.6.0)(jsdom@24.1.0))':
     dependencies:
       '@testing-library/dom': 9.3.4
-      svelte: 5.0.0-next.143
+      svelte: 5.0.0-next.155
     optionalDependencies:
       vite: 5.2.12(@types/node@20.12.13)
       vitest: 1.6.0(@types/node@20.12.13)(@vitest/ui@1.6.0)(jsdom@24.1.0)
@@ -7720,15 +7720,15 @@ snapshots:
 
   eslint-plugin-no-only-tests@3.1.0: {}
 
-  eslint-plugin-perfectionist@2.10.0(eslint@9.3.0)(svelte-eslint-parser@0.34.1(svelte@5.0.0-next.143))(svelte@5.0.0-next.143)(typescript@5.4.5)(vue-eslint-parser@9.4.2(eslint@9.3.0)):
+  eslint-plugin-perfectionist@2.10.0(eslint@9.3.0)(svelte-eslint-parser@0.34.1(svelte@5.0.0-next.155))(svelte@5.0.0-next.155)(typescript@5.4.5)(vue-eslint-parser@9.4.2(eslint@9.3.0)):
     dependencies:
       '@typescript-eslint/utils': 7.11.0(eslint@9.3.0)(typescript@5.4.5)
       eslint: 9.3.0
       minimatch: 9.0.4
       natural-compare-lite: 1.4.0
     optionalDependencies:
-      svelte: 5.0.0-next.143
-      svelte-eslint-parser: 0.34.1(svelte@5.0.0-next.143)
+      svelte: 5.0.0-next.155
+      svelte-eslint-parser: 0.34.1(svelte@5.0.0-next.155)
       vue-eslint-parser: 9.4.2(eslint@9.3.0)
     transitivePeerDependencies:
       - supports-color
@@ -7745,7 +7745,7 @@ snapshots:
       regexp-ast-analysis: 0.7.1
       scslre: 0.3.0
 
-  eslint-plugin-svelte@2.39.0(eslint@9.3.0)(svelte@5.0.0-next.143):
+  eslint-plugin-svelte@2.39.0(eslint@9.3.0)(svelte@5.0.0-next.155):
     dependencies:
       '@eslint-community/eslint-utils': 4.4.0(eslint@9.3.0)
       '@jridgewell/sourcemap-codec': 1.4.15
@@ -7759,9 +7759,9 @@ snapshots:
       postcss-safe-parser: 6.0.0(postcss@8.4.38)
       postcss-selector-parser: 6.1.0
       semver: 7.6.2
-      svelte-eslint-parser: 0.36.0(svelte@5.0.0-next.143)
+      svelte-eslint-parser: 0.36.0(svelte@5.0.0-next.155)
     optionalDependencies:
-      svelte: 5.0.0-next.143
+      svelte: 5.0.0-next.155
     transitivePeerDependencies:
       - supports-color
       - ts-node
@@ -9108,7 +9108,7 @@ snapshots:
     dependencies:
       '@types/mdast': 4.0.4
 
-  mdsx@0.0.5(svelte@5.0.0-next.143):
+  mdsx@0.0.5(svelte@5.0.0-next.155):
     dependencies:
       esrap: 1.2.2
       hast-util-to-html: 9.0.1
@@ -9117,7 +9117,7 @@ snapshots:
       rehype-stringify: 10.0.0
       remark-parse: 11.0.0
       remark-rehype: 11.1.0
-      svelte: 5.0.0-next.143
+      svelte: 5.0.0-next.155
       unified: 11.0.4
       unist-util-visit: 5.0.0
       vfile: 6.0.1
@@ -9645,9 +9645,9 @@ snapshots:
       pkg-types: 1.1.1
       ufo: 1.5.3
 
-  mode-watcher@0.2.2(svelte@5.0.0-next.143):
+  mode-watcher@0.2.2(svelte@5.0.0-next.155):
     dependencies:
-      svelte: 5.0.0-next.143
+      svelte: 5.0.0-next.155
 
   mri@1.2.0: {}
 
@@ -9884,9 +9884,9 @@ snapshots:
       estree-walker: 3.0.3
       is-reference: 3.0.2
 
-  phosphor-svelte@1.4.2(svelte@5.0.0-next.143):
+  phosphor-svelte@1.4.2(svelte@5.0.0-next.155):
     dependencies:
-      svelte: 5.0.0-next.143
+      svelte: 5.0.0-next.155
 
   picocolors@1.0.1: {}
 
@@ -9988,16 +9988,16 @@ snapshots:
 
   prelude-ls@1.2.1: {}
 
-  prettier-plugin-svelte@3.2.3(prettier@3.2.5)(svelte@5.0.0-next.143):
+  prettier-plugin-svelte@3.2.3(prettier@3.2.5)(svelte@5.0.0-next.155):
     dependencies:
       prettier: 3.2.5
-      svelte: 5.0.0-next.143
+      svelte: 5.0.0-next.155
 
-  prettier-plugin-tailwindcss@0.5.13(prettier-plugin-svelte@3.2.3(prettier@3.2.5)(svelte@5.0.0-next.143))(prettier@3.2.5):
+  prettier-plugin-tailwindcss@0.5.13(prettier-plugin-svelte@3.2.3(prettier@3.2.5)(svelte@5.0.0-next.155))(prettier@3.2.5):
     dependencies:
       prettier: 3.2.5
     optionalDependencies:
-      prettier-plugin-svelte: 3.2.3(prettier@3.2.5)(svelte@5.0.0-next.143)
+      prettier-plugin-svelte: 3.2.3(prettier@3.2.5)(svelte@5.0.0-next.155)
 
   prettier@2.8.8: {}
 
@@ -10295,11 +10295,11 @@ snapshots:
     dependencies:
       queue-microtask: 1.2.3
 
-  runed@0.12.1(svelte@5.0.0-next.143):
+  runed@0.12.1(svelte@5.0.0-next.155):
     dependencies:
       esm-env: 1.0.0
       nanoid: 5.0.7
-      svelte: 5.0.0-next.143
+      svelte: 5.0.0-next.155
 
   rxjs@7.8.1:
     dependencies:
@@ -10596,7 +10596,7 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  svelte-check@3.8.0(postcss-load-config@5.1.0(jiti@1.21.0)(postcss@8.4.38))(postcss@8.4.38)(svelte@5.0.0-next.143):
+  svelte-check@3.8.0(postcss-load-config@5.1.0(postcss@8.4.38))(postcss@8.4.38)(svelte@5.0.0-next.155):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       chokidar: 3.6.0
@@ -10604,8 +10604,8 @@ snapshots:
       import-fresh: 3.3.0
       picocolors: 1.0.1
       sade: 1.8.1
-      svelte: 5.0.0-next.143
-      svelte-preprocess: 5.1.4(postcss-load-config@5.1.0(jiti@1.21.0)(postcss@8.4.38))(postcss@8.4.38)(svelte@5.0.0-next.143)(typescript@5.4.5)
+      svelte: 5.0.0-next.155
+      svelte-preprocess: 5.1.4(postcss-load-config@5.1.0(postcss@8.4.38))(postcss@8.4.38)(svelte@5.0.0-next.155)(typescript@5.4.5)
       typescript: 5.4.5
     transitivePeerDependencies:
       - '@babel/core'
@@ -10618,7 +10618,7 @@ snapshots:
       - stylus
       - sugarss
 
-  svelte-eslint-parser@0.34.1(svelte@5.0.0-next.143):
+  svelte-eslint-parser@0.34.1(svelte@5.0.0-next.155):
     dependencies:
       eslint-scope: 7.2.2
       eslint-visitor-keys: 3.4.3
@@ -10626,9 +10626,9 @@ snapshots:
       postcss: 8.4.38
       postcss-scss: 4.0.9(postcss@8.4.38)
     optionalDependencies:
-      svelte: 5.0.0-next.143
+      svelte: 5.0.0-next.155
 
-  svelte-eslint-parser@0.36.0(svelte@5.0.0-next.143):
+  svelte-eslint-parser@0.36.0(svelte@5.0.0-next.155):
     dependencies:
       eslint-scope: 7.2.2
       eslint-visitor-keys: 3.4.3
@@ -10636,37 +10636,37 @@ snapshots:
       postcss: 8.4.38
       postcss-scss: 4.0.9(postcss@8.4.38)
     optionalDependencies:
-      svelte: 5.0.0-next.143
+      svelte: 5.0.0-next.155
 
-  svelte-hmr@0.16.0(svelte@5.0.0-next.143):
+  svelte-hmr@0.16.0(svelte@5.0.0-next.155):
     dependencies:
-      svelte: 5.0.0-next.143
+      svelte: 5.0.0-next.155
 
-  svelte-preprocess@5.1.4(postcss-load-config@5.1.0(jiti@1.21.0)(postcss@8.4.38))(postcss@8.4.38)(svelte@5.0.0-next.143)(typescript@5.4.5):
+  svelte-preprocess@5.1.4(postcss-load-config@5.1.0(postcss@8.4.38))(postcss@8.4.38)(svelte@5.0.0-next.155)(typescript@5.4.5):
     dependencies:
       '@types/pug': 2.0.10
       detect-indent: 6.1.0
       magic-string: 0.30.10
       sorcery: 0.11.0
       strip-indent: 3.0.0
-      svelte: 5.0.0-next.143
+      svelte: 5.0.0-next.155
     optionalDependencies:
       postcss: 8.4.38
       postcss-load-config: 5.1.0(jiti@1.21.0)(postcss@8.4.38)
       typescript: 5.4.5
 
-  svelte-toolbelt@0.0.2(svelte@5.0.0-next.143):
+  svelte-toolbelt@0.0.2(svelte@5.0.0-next.155):
     dependencies:
-      svelte: 5.0.0-next.143
+      svelte: 5.0.0-next.155
 
-  svelte2tsx@0.7.9(svelte@5.0.0-next.143)(typescript@5.4.5):
+  svelte2tsx@0.7.9(svelte@5.0.0-next.155)(typescript@5.4.5):
     dependencies:
       dedent-js: 1.0.1
       pascal-case: 3.1.2
-      svelte: 5.0.0-next.143
+      svelte: 5.0.0-next.155
       typescript: 5.4.5
 
-  svelte@5.0.0-next.143:
+  svelte@5.0.0-next.155:
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@jridgewell/sourcemap-codec': 1.4.15
diff --git a/sites/docs/package.json b/sites/docs/package.json
index b95c165ef..b5e5c9a62 100644
--- a/sites/docs/package.json
+++ b/sites/docs/package.json
@@ -39,7 +39,7 @@
 		"rehype-slug": "^6.0.0",
 		"remark-gfm": "^4.0.0",
 		"shiki": "^1.1.1",
-		"svelte": "5.0.0-next.143",
+		"svelte": "5.0.0-next.155",
 		"svelte-check": "^3.6.9",
 		"tailwind-merge": "^2.2.1",
 		"tailwind-variants": "^0.1.20",
diff --git a/sites/docs/src/lib/components/demos/navigation-menu-demo.svelte b/sites/docs/src/lib/components/demos/navigation-menu-demo.svelte
index 430494175..02ddb6113 100644
--- a/sites/docs/src/lib/components/demos/navigation-menu-demo.svelte
+++ b/sites/docs/src/lib/components/demos/navigation-menu-demo.svelte
@@ -112,7 +112,7 @@
 				</ul>
 			</NavigationMenu.Content>
 		</NavigationMenu.Item>
-		<!-- <NavigationMenu.Item>
+		<NavigationMenu.Item>
 			<NavigationMenu.Trigger
 				class="group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-muted hover:text-accent-foreground focus:bg-muted focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-muted/50 data-[state=open]:bg-muted/50"
 			>
@@ -135,7 +135,7 @@
 					{/each}
 				</ul>
 			</NavigationMenu.Content>
-		</NavigationMenu.Item> -->
+		</NavigationMenu.Item>
 		<NavigationMenu.Item>
 			<NavigationMenu.Link
 				class="group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-muted hover:text-accent-foreground focus:bg-muted focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-muted/50 data-[state=open]:bg-muted/50"

From 9e914130f3cdf3018db797da3a4ce8840accd103 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sat, 15 Jun 2024 17:51:49 -0400
Subject: [PATCH 10/18] perf

---
 .../navigation-menu/navigation-menu.svelte.ts | 91 +++++++++++++++----
 .../content/components/navigation-menu.md     |  2 +-
 .../demos/navigation-menu-demo.svelte         | 14 +--
 3 files changed, 81 insertions(+), 26 deletions(-)

diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts b/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts
index 941c11977..7d0fec2b2 100644
--- a/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts
@@ -2,7 +2,11 @@ import { untrack } from "svelte";
 import { box, type WritableBox } from "svelte-toolbelt";
 import { Previous, useDebounce } from "runed";
 import { getTabbableCandidates } from "../utilities/focus-scope/utils.js";
-import type { ReadableBoxedValues, WritableBoxedValues } from "$lib/internal/box.svelte.js";
+import {
+	watch,
+	type ReadableBoxedValues,
+	type WritableBoxedValues,
+} from "$lib/internal/box.svelte.js";
 import type { Direction, Orientation } from "$lib/shared/index.js";
 import {
 	getAriaExpanded,
@@ -15,7 +19,6 @@ import {
 import { createContext } from "$lib/internal/createContext.js";
 import { useId } from "$lib/internal/useId.svelte.js";
 import { kbd } from "$lib/internal/kbd.js";
-import { isBrowser } from "$lib/internal/is.js";
 import { useArrowNavigation } from "$lib/internal/useArrowNavigation.js";
 import { boxAutoReset } from "$lib/internal/boxAutoReset.svelte.js";
 import { useRefById } from "$lib/internal/useNodeById.svelte.js";
@@ -63,16 +66,14 @@ class NavigationMenuRootState {
 	triggerIds = new Set<string>();
 	triggerRefs = new Set<ElementRef>();
 	isDelaySkipped: WritableBox<boolean> = box(false);
+	openTimer = 0;
+	closeTimer = 0;
+	skipDelayTimer = 0;
+	isOpenDelayed = $state<boolean>(false);
 
-	derivedDelay = $derived.by(() => {
-		const isOpen = this.value?.value !== "";
-		if (isOpen || this.isDelaySkipped?.value) return 150;
-		return this.delayDuration.value;
-	});
-
-	setValue = useDebounce((v: string) => {
+	setValue = (v: string) => {
 		this.value.value = v;
-	}, this.derivedDelay);
+	};
 
 	constructor(props: NavigationMenuRootStateProps) {
 		this.id = props.id;
@@ -88,8 +89,56 @@ class NavigationMenuRootState {
 			id: this.id,
 			ref: this.rootRef,
 		});
+
+		watch(this.value, (curr) => {
+			const isOpen = curr !== "";
+			const hasSkipDelayDuration = this.skipDelayDuration.value > 0;
+
+			if (isOpen) {
+				window.clearTimeout(this.skipDelayTimer);
+				if (hasSkipDelayDuration) this.isOpenDelayed = false;
+			} else {
+				window.clearTimeout(this.skipDelayTimer);
+				this.skipDelayTimer = window.setTimeout(
+					() => (this.isOpenDelayed = true),
+					this.skipDelayDuration.value
+				);
+			}
+		});
+
+		$effect(() => {
+			return () => {
+				window.clearTimeout(this.openTimer);
+				window.clearTimeout(this.closeTimer);
+				window.clearTimeout(this.skipDelayTimer);
+			};
+		});
 	}
 
+	startCloseTimer = () => {
+		window.clearTimeout(this.closeTimer);
+		this.closeTimer = window.setTimeout(() => this.setValue(""), 150);
+	};
+
+	handleOpen = (itemValue: string) => {
+		window.clearTimeout(this.closeTimer);
+		this.setValue(itemValue);
+	};
+
+	handleDelayedOpen = (itemValue: string) => {
+		const isOpenItem = this.value.value === itemValue;
+		if (isOpenItem) {
+			// If the item is already open (e.g. we're transitioning from the content to the trigger)
+			// then we want to clear the close timer immediately.
+			window.clearTimeout(this.closeTimer);
+		} else {
+			this.openTimer = window.setTimeout(() => {
+				window.clearTimeout(this.closeTimer);
+				this.setValue(itemValue);
+			}, this.delayDuration.value);
+		}
+	};
+
 	registerTrigger = (ref: ElementRef) => {
 		this.triggerRefs.add(ref);
 	};
@@ -105,28 +154,34 @@ class NavigationMenuRootState {
 	};
 
 	onTriggerEnter = (itemValue: string) => {
-		this.setValue(itemValue);
+		window.clearTimeout(this.openTimer);
+		if (this.isOpenDelayed) {
+			this.handleDelayedOpen(itemValue);
+		} else {
+			this.handleOpen(itemValue);
+		}
 	};
 
 	onTriggerLeave = () => {
-		this.isDelaySkipped.value = false;
-		this.setValue("");
+		window.clearTimeout(this.openTimer);
+		this.startCloseTimer();
 	};
 
 	onContentEnter = (itemValue: string) => {
-		this.setValue(itemValue);
+		window.clearTimeout(this.closeTimer);
 	};
 
 	onContentLeave = () => {
-		this.setValue("");
+		this.startCloseTimer();
 	};
 
 	onItemSelect = (itemValue: string) => {
-		this.value.value = itemValue;
+		const prevValue = this.value.value;
+		this.setValue(prevValue === itemValue ? "" : itemValue);
 	};
 
 	onItemDismiss = () => {
-		this.value.value = "";
+		this.setValue("");
 	};
 
 	props = $derived.by(() => ({
@@ -355,7 +410,7 @@ class NavigationMenuTriggerState {
 	menu: NavigationMenuMenuState;
 	item: NavigationMenuItemState;
 	disabled: NavigationMenuTriggerStateProps["disabled"];
-	hasPointerMoveOpened = boxAutoReset(false, 300);
+	hasPointerMoveOpened = boxAutoReset(false, 150);
 	wasClickClose = $state(false);
 	open = $derived.by(() => this.item.value.value === this.menu.value.value);
 	triggerRef: NavigationMenuTriggerStateProps["ref"];
diff --git a/sites/docs/content/components/navigation-menu.md b/sites/docs/content/components/navigation-menu.md
index f816706b0..6e56a8482 100644
--- a/sites/docs/content/components/navigation-menu.md
+++ b/sites/docs/content/components/navigation-menu.md
@@ -1,6 +1,6 @@
 ---
 title: Navigation Menu
-description: A list of links that allow users to navigate between pages or sections of a website.
+description: A list of links that allow users to navigate between pages of a website.
 ---
 
 <script>
diff --git a/sites/docs/src/lib/components/demos/navigation-menu-demo.svelte b/sites/docs/src/lib/components/demos/navigation-menu-demo.svelte
index 02ddb6113..c85e51e65 100644
--- a/sites/docs/src/lib/components/demos/navigation-menu-demo.svelte
+++ b/sites/docs/src/lib/components/demos/navigation-menu-demo.svelte
@@ -6,35 +6,35 @@
 	const components: { title: string; href: string; description: string }[] = [
 		{
 			title: "Alert Dialog",
-			href: "/docs/primitives/alert-dialog",
+			href: "/docs/components/alert-dialog",
 			description:
 				"A modal dialog that interrupts the user with important content and expects a response.",
 		},
 		{
-			title: "Hover Card",
-			href: "/docs/primitives/hover-card",
+			title: "Link Preview",
+			href: "/docs/components/link-preview",
 			description: "For sighted users to preview content available behind a link.",
 		},
 		{
 			title: "Progress",
-			href: "/docs/primitives/progress",
+			href: "/docs/components/progress",
 			description:
 				"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
 		},
 		{
 			title: "Scroll-area",
-			href: "/docs/primitives/scroll-area",
+			href: "/docs/components/scroll-area",
 			description: "Visually or semantically separates content.",
 		},
 		{
 			title: "Tabs",
-			href: "/docs/primitives/tabs",
+			href: "/docs/components/tabs",
 			description:
 				"A set of layered sections of content—known as tab panels—that are displayed one at a time.",
 		},
 		{
 			title: "Tooltip",
-			href: "/docs/primitives/tooltip",
+			href: "/docs/components/tooltip",
 			description:
 				"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
 		},

From 62873ecfa2f5429d42d246016fbf9d2247efdb4b Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sat, 15 Jun 2024 19:02:45 -0400
Subject: [PATCH 11/18] getting somewhere

---
 .../components/navigation-menu-content.svelte | 39 ++++++-----
 .../components/navigation-menu-list.svelte    |  2 +-
 .../navigation-menu/navigation-menu.svelte.ts | 70 +++++++++++++------
 .../src/lib/internal/useNodeById.svelte.ts    | 11 ++-
 4 files changed, 73 insertions(+), 49 deletions(-)

diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-content.svelte b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-content.svelte
index 5b99d39aa..4a8ae36bb 100644
--- a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-content.svelte
+++ b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-content.svelte
@@ -6,8 +6,8 @@
 	import { mergeProps } from "$lib/internal/mergeProps.js";
 	import Portal from "$lib/bits/utilities/portal/portal.svelte";
 	import { PresenceLayer } from "$lib/bits/utilities/presence-layer/index.js";
-	import { IsMounted } from "runed";
 	import DismissableLayer from "$lib/bits/utilities/dismissable-layer/dismissable-layer.svelte";
+	import EscapeLayer from "$lib/bits/utilities/escape-layer/escape-layer.svelte";
 
 	let {
 		asChild,
@@ -32,28 +32,29 @@
 
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));
 	const portalDisabled = $derived(!Boolean(contentState.menu.viewportNode));
-	const mounted = new IsMounted();
 </script>
 
-<Portal to={contentState.menu.viewportNode} disabled={portalDisabled}>
+<Portal to={contentState.menu.viewportNode ?? undefined} disabled={portalDisabled}>
 	<PresenceLayer {id} present={contentState.isPresent}>
 		{#snippet presence({ present })}
-			<DismissableLayer
-				enabled={present.value}
-				{id}
-				onInteractOutside={contentState.onInteractOutside}
-				onFocusOutside={contentState.onFocusOutside}
-			>
-				{#snippet children({ props: dismissableProps })}
-					{#if asChild}
-						{@render child?.({ props: mergeProps(mergedProps, dismissableProps) })}
-					{:else}
-						<div bind:this={ref} {...mergeProps(mergedProps, dismissableProps)}>
-							{@render contentChildren?.()}
-						</div>
-					{/if}
-				{/snippet}
-			</DismissableLayer>
+			<EscapeLayer enabled={present.value} onEscapeKeydown={contentState.onEscapeKeydown}>
+				<DismissableLayer
+					enabled={present.value}
+					{id}
+					onInteractOutside={contentState.onInteractOutside}
+					onFocusOutside={contentState.onFocusOutside}
+				>
+					{#snippet children({ props: dismissableProps })}
+						{#if asChild}
+							{@render child?.({ props: mergeProps(mergedProps, dismissableProps) })}
+						{:else}
+							<div {...mergeProps(mergedProps, dismissableProps)}>
+								{@render contentChildren?.()}
+							</div>
+						{/if}
+					{/snippet}
+				</DismissableLayer>
+			</EscapeLayer>
 		{/snippet}
 	</PresenceLayer>
 </Portal>
diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-list.svelte b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-list.svelte
index fdb801d6b..c002aa01d 100644
--- a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-list.svelte
+++ b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-list.svelte
@@ -31,7 +31,7 @@
 	{#if asChild}
 		{@render child?.({ props: mergedProps })}
 	{:else}
-		<ul {...mergedProps} bind:this={ref}>
+		<ul {...mergedProps}>
 			{@render children?.()}
 		</ul>
 	{/if}
diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts b/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts
index 7d0fec2b2..0c33a201f 100644
--- a/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts
@@ -1,7 +1,6 @@
-import { untrack } from "svelte";
-import { box, type WritableBox } from "svelte-toolbelt";
-import { Previous, useDebounce } from "runed";
-import { getTabbableCandidates } from "../utilities/focus-scope/utils.js";
+import { tick, untrack } from "svelte";
+import { box } from "svelte-toolbelt";
+import { Previous } from "runed";
 import {
 	watch,
 	type ReadableBoxedValues,
@@ -24,6 +23,8 @@ import { boxAutoReset } from "$lib/internal/boxAutoReset.svelte.js";
 import { useRefById } from "$lib/internal/useNodeById.svelte.js";
 import type { ElementRef } from "$lib/internal/types.js";
 import { afterTick } from "$lib/internal/afterTick.js";
+import { getTabbableCandidates } from "../utilities/focus-scope/utils.js";
+import { sleep } from "$lib/internal/sleep.js";
 
 const [setNavigationMenuRootContext, getNavigationMenuRootContext] =
 	createContext<NavigationMenuRootState>("NavigationMenu.Root");
@@ -65,7 +66,6 @@ class NavigationMenuRootState {
 	previousValue = new Previous(() => this.value.value);
 	triggerIds = new Set<string>();
 	triggerRefs = new Set<ElementRef>();
-	isDelaySkipped: WritableBox<boolean> = box(false);
 	openTimer = 0;
 	closeTimer = 0;
 	skipDelayTimer = 0;
@@ -82,7 +82,6 @@ class NavigationMenuRootState {
 		this.orientation = props.orientation;
 		this.dir = props.dir;
 		this.value = props.value;
-		this.isDelaySkipped = boxAutoReset(false, this.skipDelayDuration.value);
 		this.rootRef = props.ref;
 
 		useRefById({
@@ -339,7 +338,9 @@ class NavigationMenuItemState {
 	value: NavigationMenuItemStateProps["value"];
 	contentNode = $state<HTMLElement | null>(null);
 	triggerNode = $state<HTMLElement | null>(null);
-	focusProxyId = box.with<string | undefined>(() => useId());
+	focusProxyRef = box<HTMLElement | null>(null);
+	focusProxyNode = $state<HTMLElement | null>(null);
+	focusProxyId = box.with<string>(() => useId());
 	restoreContentTabOrder = $state(() => {});
 	wasEscapeClose = $state(false);
 	menu: NavigationMenuMenuState;
@@ -348,18 +349,26 @@ class NavigationMenuItemState {
 		this.id = props.id;
 		this.value = props.value;
 		this.menu = menu;
-	}
 
-	getFocusProxyNode = () => {
-		return document.getElementById(this.focusProxyId.value ?? "");
-	};
+		useRefById({
+			id: this.focusProxyId,
+			ref: this.focusProxyRef,
+			onRefChange: (node) => {
+				this.focusProxyNode = node;
+			},
+		});
+	}
 
 	#handleContentEntry = (side: "start" | "end" = "start") => {
-		if (!this.contentNode) return;
-		this.restoreContentTabOrder();
-		const candidates = getTabbableCandidates(this.contentNode);
+		const contentNode = document.getElementById(this.contentNode?.id ?? "");
+		if (!contentNode) return;
+		const candidates = getTabbableCandidates(contentNode);
 		if (candidates.length) {
-			focusFirst(side === "start" ? candidates : candidates.reverse());
+			if (side === "start") {
+				candidates[0]?.focus();
+			} else {
+				candidates[candidates.length - 1]?.focus();
+			}
 		}
 	};
 
@@ -482,7 +491,6 @@ class NavigationMenuTriggerState {
 		if (this.open && e.key === entryKey) {
 			this.item.onEntryKeydown();
 			e.preventDefault();
-			e.stopPropagation();
 		}
 	};
 
@@ -510,12 +518,14 @@ class NavigationMenuTriggerState {
 			({
 				id: this.item.focusProxyId.value,
 				"aria-hidden": "true",
+				tabindex: 0,
 				tabIndex: 0,
 				onfocus: (e: FocusEvent) => {
-					const contentNode = this.item.contentNode;
+					const contentNode = document.getElementById(this.item.contentNode?.id ?? "");
 					const prevFocusedElement = e.relatedTarget as HTMLElement | null;
-					const wasTriggerFocused = prevFocusedElement === this.item.getFocusProxyNode();
+					const wasTriggerFocused = prevFocusedElement === this.item.triggerNode;
 					const wasFocusFromContent = contentNode?.contains(prevFocusedElement);
+					console.log("wasFocusFromContent", wasFocusFromContent);
 
 					if (wasTriggerFocused || !wasFocusFromContent) {
 						this.item.onFocusProxyEnter(wasTriggerFocused ? "start" : "end");
@@ -562,6 +572,9 @@ class NavigationMenuLinkState {
 				"data-active": this.active.value ? "" : undefined,
 				"aria-current": this.active.value ? "page" : undefined,
 				onclick: this.#onclick,
+				onfocus: (e: FocusEvent) => {
+					console.log("focused link!");
+				},
 			}) as const
 	);
 }
@@ -687,6 +700,15 @@ class NavigationMenuContentState {
 		this.menu = item.menu;
 		this.contentRef = props.ref;
 
+		useRefById({
+			id: this.id,
+			ref: this.contentRef,
+			onRefChange: (node) => {
+				this.item.contentNode = node;
+			},
+			condition: () => this.isPresent,
+		});
+
 		$effect(() => {
 			const items = this.menu.getTriggerNodes();
 			const prev = this.menu.previousValue.current;
@@ -732,18 +754,22 @@ class NavigationMenuContentState {
 		this.item.onContentFocusOutside();
 		const target = e.target as HTMLElement;
 		// only dismiss content when focus moves outside the menu
-		if (this.menu.root.rootRef.value?.contains(target)) {
-			e.preventDefault();
-		}
+		// if (this.menu.root.rootRef.value?.contains(target)) {
+		// 	e.preventDefault();
+		// }
 	};
 
 	onInteractOutside = (e: Event) => {
 		if (e.defaultPrevented) return;
 		const target = e.target as HTMLElement;
 		const isTrigger = this.menu.getTriggerNodes().some((node) => node.contains(target));
+		console.log("is Trigger", isTrigger);
+
 		const isRootViewport = this.menu.isRoot && this.menu.viewportNode?.contains(target);
+		console.log("is Root Viewport", isRootViewport);
 
 		if (isTrigger || isRootViewport || !this.menu.isRoot) {
+			console.log("prevent default");
 			e.preventDefault();
 		}
 	};
@@ -775,7 +801,7 @@ class NavigationMenuContentState {
 				// If we can't focus that means we're at the edges
 				// so focus the proxy and let browser handle
 				// tab/shift+tab keypress on the proxy instead
-				this.item.getFocusProxyNode()?.focus();
+				this.item.focusProxyNode?.focus();
 			}
 		}
 		const newSelectedElement = useArrowNavigation(
diff --git a/packages/bits-ui/src/lib/internal/useNodeById.svelte.ts b/packages/bits-ui/src/lib/internal/useNodeById.svelte.ts
index 1f3698ab1..5b6639a5a 100644
--- a/packages/bits-ui/src/lib/internal/useNodeById.svelte.ts
+++ b/packages/bits-ui/src/lib/internal/useNodeById.svelte.ts
@@ -76,13 +76,10 @@ export function useRefById({
 	$effect(() => {
 		// re-run when the ID changes.
 		id.value;
+		condition();
 		// re-run when the condition changes.
-		if (condition()) {
-			const node = document.getElementById(id.value);
-			if (node !== ref.value) {
-				untrack(() => (ref.value = node));
-				untrack(() => onRefChange(node));
-			}
-		}
+		const node = document.getElementById(id.value);
+		untrack(() => (ref.value = node));
+		untrack(() => onRefChange(node));
 	});
 }

From d3b5c7e91a4a3a454e2c72b28f622129a7d9ac63 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sat, 15 Jun 2024 21:16:06 -0400
Subject: [PATCH 12/18] getting closer

---
 .../components/navigation-menu-content.svelte |  5 ++
 .../components/navigation-menu-trigger.svelte |  5 ++
 .../navigation-menu/navigation-menu.svelte.ts | 58 ++++++++++---------
 .../bits-ui/src/lib/bits/utilities/index.ts   |  1 +
 .../src/lib/bits/utilities/mounted.svelte     | 10 ++++
 .../presence-layer/usePresence.svelte.ts      |  2 +-
 .../src/lib/internal/useNodeById.svelte.ts    |  8 ++-
 7 files changed, 57 insertions(+), 32 deletions(-)
 create mode 100644 packages/bits-ui/src/lib/bits/utilities/mounted.svelte

diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-content.svelte b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-content.svelte
index 4a8ae36bb..e6d97aaa7 100644
--- a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-content.svelte
+++ b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-content.svelte
@@ -8,6 +8,7 @@
 	import { PresenceLayer } from "$lib/bits/utilities/presence-layer/index.js";
 	import DismissableLayer from "$lib/bits/utilities/dismissable-layer/dismissable-layer.svelte";
 	import EscapeLayer from "$lib/bits/utilities/escape-layer/escape-layer.svelte";
+	import Mounted from "$lib/bits/utilities/mounted.svelte";
 
 	let {
 		asChild,
@@ -19,6 +20,8 @@
 		...restProps
 	}: ContentProps = $props();
 
+	let isMounted = $state(false);
+
 	const contentState = useNavigationMenuContent({
 		id: box.with(() => id),
 		ref: box.with(
@@ -28,6 +31,7 @@
 			}
 		),
 		forceMount: box.with(() => forceMount),
+		isMounted: box.with(() => isMounted),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));
@@ -49,6 +53,7 @@
 							{@render child?.({ props: mergeProps(mergedProps, dismissableProps) })}
 						{:else}
 							<div {...mergeProps(mergedProps, dismissableProps)}>
+								<Mounted bind:isMounted />
 								{@render contentChildren?.()}
 							</div>
 						{/if}
diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-trigger.svelte b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-trigger.svelte
index 4b96c91f6..1e195e1a6 100644
--- a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-trigger.svelte
+++ b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-trigger.svelte
@@ -5,6 +5,7 @@
 	import { useId } from "$lib/internal/useId.svelte.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
 	import VisuallyHidden from "$lib/bits/utilities/visually-hidden/visually-hidden.svelte";
+	import Mounted from "$lib/bits/utilities/mounted.svelte";
 
 	let {
 		id = useId(),
@@ -16,6 +17,8 @@
 		...restProps
 	}: TriggerProps = $props();
 
+	let focusProxyMounted = $state(false);
+
 	const triggerState = useNavigationMenuTrigger({
 		id: box.with(() => id),
 		disabled: box.with(() => disabled),
@@ -23,6 +26,7 @@
 			() => ref,
 			(v) => (ref = v)
 		),
+		focusProxyMounted: box.with(() => focusProxyMounted),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, triggerState.props));
@@ -37,6 +41,7 @@
 {/if}
 
 {#if triggerState.open}
+	<Mounted bind:isMounted={focusProxyMounted} />
 	<VisuallyHidden {...triggerState.visuallyHiddenProps} />
 	{#if triggerState.menu.viewportNode}
 		<span aria-owns={triggerState.item.contentNode?.id ?? undefined}></span>
diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts b/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts
index 0c33a201f..2e28fc0ea 100644
--- a/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts
@@ -1,5 +1,5 @@
 import { tick, untrack } from "svelte";
-import { box } from "svelte-toolbelt";
+import { box, type WritableBox } from "svelte-toolbelt";
 import { Previous } from "runed";
 import {
 	watch,
@@ -340,7 +340,7 @@ class NavigationMenuItemState {
 	triggerNode = $state<HTMLElement | null>(null);
 	focusProxyRef = box<HTMLElement | null>(null);
 	focusProxyNode = $state<HTMLElement | null>(null);
-	focusProxyId = box.with<string>(() => useId());
+	focusProxyId = box(useId());
 	restoreContentTabOrder = $state(() => {});
 	wasEscapeClose = $state(false);
 	menu: NavigationMenuMenuState;
@@ -349,20 +349,11 @@ class NavigationMenuItemState {
 		this.id = props.id;
 		this.value = props.value;
 		this.menu = menu;
-
-		useRefById({
-			id: this.focusProxyId,
-			ref: this.focusProxyRef,
-			onRefChange: (node) => {
-				this.focusProxyNode = node;
-			},
-		});
 	}
 
 	#handleContentEntry = (side: "start" | "end" = "start") => {
-		const contentNode = document.getElementById(this.contentNode?.id ?? "");
-		if (!contentNode) return;
-		const candidates = getTabbableCandidates(contentNode);
+		if (!this.contentNode) return;
+		const candidates = getTabbableCandidates(this.contentNode);
 		if (candidates.length) {
 			if (side === "start") {
 				candidates[0]?.focus();
@@ -409,6 +400,7 @@ class NavigationMenuItemState {
 type NavigationMenuTriggerStateProps = ReadableBoxedValues<{
 	id: string;
 	disabled: boolean;
+	focusProxyMounted: boolean;
 }> &
 	WritableBoxedValues<{
 		ref: HTMLElement | null;
@@ -416,6 +408,7 @@ type NavigationMenuTriggerStateProps = ReadableBoxedValues<{
 
 class NavigationMenuTriggerState {
 	id: NavigationMenuTriggerStateProps["id"];
+	focusProxyMounted: NavigationMenuTriggerStateProps["focusProxyMounted"];
 	menu: NavigationMenuMenuState;
 	item: NavigationMenuItemState;
 	disabled: NavigationMenuTriggerStateProps["disabled"];
@@ -430,6 +423,7 @@ class NavigationMenuTriggerState {
 		this.item = item;
 		this.menu = item.menu;
 		this.disabled = props.disabled;
+		this.focusProxyMounted = props.focusProxyMounted;
 
 		useRefById({
 			id: this.id,
@@ -439,6 +433,16 @@ class NavigationMenuTriggerState {
 			},
 		});
 
+		useRefById({
+			id: this.item.focusProxyId,
+			ref: this.item.focusProxyRef,
+			onRefChange: (node) => {
+				console.log("ref changed", node);
+				this.item.focusProxyNode = node;
+			},
+			condition: () => this.focusProxyMounted.value,
+		});
+
 		$effect(() => {
 			this.menu.registerTrigger(this.triggerRef);
 			return () => {
@@ -518,14 +522,11 @@ class NavigationMenuTriggerState {
 			({
 				id: this.item.focusProxyId.value,
 				"aria-hidden": "true",
-				tabindex: 0,
 				tabIndex: 0,
 				onfocus: (e: FocusEvent) => {
-					const contentNode = document.getElementById(this.item.contentNode?.id ?? "");
 					const prevFocusedElement = e.relatedTarget as HTMLElement | null;
 					const wasTriggerFocused = prevFocusedElement === this.item.triggerNode;
-					const wasFocusFromContent = contentNode?.contains(prevFocusedElement);
-					console.log("wasFocusFromContent", wasFocusFromContent);
+					const wasFocusFromContent = this.item.contentNode?.contains(prevFocusedElement);
 
 					if (wasTriggerFocused || !wasFocusFromContent) {
 						this.item.onFocusProxyEnter(wasTriggerFocused ? "start" : "end");
@@ -553,7 +554,7 @@ class NavigationMenuLinkState {
 	}
 
 	#onclick = (e: MouseEvent) => {
-		const linkSelectEvent = new CustomEvent(" navigationMenu.linkSelect", {
+		const linkSelectEvent = new CustomEvent("navigationMenu.linkSelect", {
 			bubbles: true,
 			cancelable: true,
 		});
@@ -572,9 +573,7 @@ class NavigationMenuLinkState {
 				"data-active": this.active.value ? "" : undefined,
 				"aria-current": this.active.value ? "page" : undefined,
 				onclick: this.#onclick,
-				onfocus: (e: FocusEvent) => {
-					console.log("focused link!");
-				},
+				onfocus: (e: FocusEvent) => {},
 			}) as const
 	);
 }
@@ -667,6 +666,7 @@ class NavigationMenuIndicatorState {
 type NavigationMenuContentStateProps = ReadableBoxedValues<{
 	id: string;
 	forceMount: boolean;
+	isMounted: boolean;
 }> &
 	WritableBoxedValues<{
 		ref: HTMLElement | null;
@@ -677,6 +677,7 @@ type MotionAttribute = "to-start" | "to-end" | "from-start" | "from-end";
 class NavigationMenuContentState {
 	id: NavigationMenuContentStateProps["id"];
 	forceMount: NavigationMenuContentStateProps["forceMount"];
+	isMounted: NavigationMenuContentStateProps["isMounted"];
 	contentRef: NavigationMenuContentStateProps["ref"];
 	menu: NavigationMenuMenuState;
 	item: NavigationMenuItemState;
@@ -696,6 +697,7 @@ class NavigationMenuContentState {
 	constructor(props: NavigationMenuContentStateProps, item: NavigationMenuItemState) {
 		this.id = props.id;
 		this.forceMount = props.forceMount;
+		this.isMounted = props.isMounted;
 		this.item = item;
 		this.menu = item.menu;
 		this.contentRef = props.ref;
@@ -706,7 +708,7 @@ class NavigationMenuContentState {
 			onRefChange: (node) => {
 				this.item.contentNode = node;
 			},
-			condition: () => this.isPresent,
+			condition: () => this.isMounted.value,
 		});
 
 		$effect(() => {
@@ -754,22 +756,19 @@ class NavigationMenuContentState {
 		this.item.onContentFocusOutside();
 		const target = e.target as HTMLElement;
 		// only dismiss content when focus moves outside the menu
-		// if (this.menu.root.rootRef.value?.contains(target)) {
-		// 	e.preventDefault();
-		// }
+		if (this.menu.root.rootRef.value?.contains(target)) {
+			e.preventDefault();
+		}
 	};
 
 	onInteractOutside = (e: Event) => {
 		if (e.defaultPrevented) return;
 		const target = e.target as HTMLElement;
 		const isTrigger = this.menu.getTriggerNodes().some((node) => node.contains(target));
-		console.log("is Trigger", isTrigger);
 
 		const isRootViewport = this.menu.isRoot && this.menu.viewportNode?.contains(target);
-		console.log("is Root Viewport", isRootViewport);
 
 		if (isTrigger || isRootViewport || !this.menu.isRoot) {
-			console.log("prevent default");
 			e.preventDefault();
 		}
 	};
@@ -794,6 +793,8 @@ class NavigationMenuContentState {
 				? candidates.slice(0, index).reverse()
 				: candidates.slice(index + 1, candidates.length);
 
+			console.log("nextCandidates", nextCandidates);
+
 			if (focusFirst(nextCandidates)) {
 				// prevent browser tab keydown because we've handled focus
 				e.preventDefault();
@@ -801,6 +802,7 @@ class NavigationMenuContentState {
 				// If we can't focus that means we're at the edges
 				// so focus the proxy and let browser handle
 				// tab/shift+tab keypress on the proxy instead
+				console.log("focusProxyNode", this.item.focusProxyNode);
 				this.item.focusProxyNode?.focus();
 			}
 		}
diff --git a/packages/bits-ui/src/lib/bits/utilities/index.ts b/packages/bits-ui/src/lib/bits/utilities/index.ts
index b2f2161c6..8db904f17 100644
--- a/packages/bits-ui/src/lib/bits/utilities/index.ts
+++ b/packages/bits-ui/src/lib/bits/utilities/index.ts
@@ -1 +1,2 @@
 export { default as WithTransition } from "./with-transition.svelte";
+export { default as Mounted } from "./mounted.svelte";
diff --git a/packages/bits-ui/src/lib/bits/utilities/mounted.svelte b/packages/bits-ui/src/lib/bits/utilities/mounted.svelte
new file mode 100644
index 000000000..bee1fb215
--- /dev/null
+++ b/packages/bits-ui/src/lib/bits/utilities/mounted.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	let { isMounted = $bindable(false) }: { isMounted: boolean } = $props();
+
+	$effect(() => {
+		isMounted = true;
+		return () => {
+			isMounted = false;
+		};
+	});
+</script>
diff --git a/packages/bits-ui/src/lib/bits/utilities/presence-layer/usePresence.svelte.ts b/packages/bits-ui/src/lib/bits/utilities/presence-layer/usePresence.svelte.ts
index e64c8dd05..f2d4cb6c1 100644
--- a/packages/bits-ui/src/lib/bits/utilities/presence-layer/usePresence.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/utilities/presence-layer/usePresence.svelte.ts
@@ -7,7 +7,7 @@ export function usePresence(present: ReadableBox<boolean>, id: ReadableBox<strin
 	const initialState = present.value ? "mounted" : "unmounted";
 	let node = $state<HTMLElement | null>(null);
 
-	$effect.pre(() => {
+	$effect(() => {
 		if (!id.value) return;
 		if (!present.value) return;
 
diff --git a/packages/bits-ui/src/lib/internal/useNodeById.svelte.ts b/packages/bits-ui/src/lib/internal/useNodeById.svelte.ts
index 5b6639a5a..45b574b69 100644
--- a/packages/bits-ui/src/lib/internal/useNodeById.svelte.ts
+++ b/packages/bits-ui/src/lib/internal/useNodeById.svelte.ts
@@ -78,8 +78,10 @@ export function useRefById({
 		id.value;
 		condition();
 		// re-run when the condition changes.
-		const node = document.getElementById(id.value);
-		untrack(() => (ref.value = node));
-		untrack(() => onRefChange(node));
+		untrack(() => {
+			const node = document.getElementById(id.value);
+			ref.value = node;
+			onRefChange(ref.value);
+		});
 	});
 }

From c8936ef2e7c265e19269d8c6e9a55dff849a0da8 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sat, 15 Jun 2024 21:16:51 -0400
Subject: [PATCH 13/18] cleanup

---
 .../src/lib/bits/navigation-menu/navigation-menu.svelte.ts    | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts b/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts
index 2e28fc0ea..5a11d0f4b 100644
--- a/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts
@@ -437,7 +437,6 @@ class NavigationMenuTriggerState {
 			id: this.item.focusProxyId,
 			ref: this.item.focusProxyRef,
 			onRefChange: (node) => {
-				console.log("ref changed", node);
 				this.item.focusProxyNode = node;
 			},
 			condition: () => this.focusProxyMounted.value,
@@ -793,8 +792,6 @@ class NavigationMenuContentState {
 				? candidates.slice(0, index).reverse()
 				: candidates.slice(index + 1, candidates.length);
 
-			console.log("nextCandidates", nextCandidates);
-
 			if (focusFirst(nextCandidates)) {
 				// prevent browser tab keydown because we've handled focus
 				e.preventDefault();
@@ -802,7 +799,6 @@ class NavigationMenuContentState {
 				// If we can't focus that means we're at the edges
 				// so focus the proxy and let browser handle
 				// tab/shift+tab keypress on the proxy instead
-				console.log("focusProxyNode", this.item.focusProxyNode);
 				this.item.focusProxyNode?.focus();
 			}
 		}

From b256045084ece095d08497793ddba831bfdd4592 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sat, 15 Jun 2024 21:26:29 -0400
Subject: [PATCH 14/18] more better

---
 .../navigation-menu/navigation-menu.svelte.ts | 22 +++++++++++++------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts b/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts
index 5a11d0f4b..ee03f0d16 100644
--- a/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts
@@ -35,8 +35,6 @@ const [setNavigationMenuMenuContext, getNavigationMenuMenuContext] =
 const [setNavigationMenuItemContext, getNavigationMenuItemContext] =
 	createContext<NavigationMenuItemState>("NavigationMenu.Item");
 
-const EVENT_ROOT_CONTENT_DISMISS = "navigationMenu.rootContentDismiss";
-
 const ROOT_ATTR = "data-navigation-menu-root";
 const SUB_ATTR = "data-navigation-menu-sub";
 const ITEM_ATTR = "data-navigation-menu-item";
@@ -64,7 +62,6 @@ class NavigationMenuRootState {
 	dir: NavigationMenuRootStateProps["dir"];
 	value: NavigationMenuRootStateProps["value"];
 	previousValue = new Previous(() => this.value.value);
-	triggerIds = new Set<string>();
 	triggerRefs = new Set<ElementRef>();
 	openTimer = 0;
 	closeTimer = 0;
@@ -124,6 +121,11 @@ class NavigationMenuRootState {
 		this.setValue(itemValue);
 	};
 
+	handleClose = () => {
+		this.onItemDismiss();
+		this.onContentLeave();
+	};
+
 	handleDelayedOpen = (itemValue: string) => {
 		const isOpenItem = this.value.value === itemValue;
 		if (isOpenItem) {
@@ -184,6 +186,7 @@ class NavigationMenuRootState {
 	};
 
 	props = $derived.by(() => ({
+		id: this.id.value,
 		"aria-label": "Main",
 		"data-orientation": getDataOrientation(this.orientation.value),
 		dir: this.dir.value,
@@ -393,7 +396,7 @@ class NavigationMenuItemState {
 	}
 
 	createLink(props: NavigationMenuLinkStateProps) {
-		return new NavigationMenuLinkState(props);
+		return new NavigationMenuLinkState(props, this.menu.root);
 	}
 }
 
@@ -546,7 +549,7 @@ class NavigationMenuLinkState {
 	active: NavigationMenuLinkStateProps["active"];
 	onSelect: NavigationMenuLinkStateProps["onSelect"];
 
-	constructor(props: NavigationMenuLinkStateProps) {
+	constructor(props: NavigationMenuLinkStateProps, root: NavigationMenuRootState) {
 		this.id = props.id;
 		this.active = props.active;
 		this.onSelect = props.onSelect;
@@ -561,7 +564,6 @@ class NavigationMenuLinkState {
 		this.onSelect.value(linkSelectEvent);
 
 		if (!linkSelectEvent.defaultPrevented && !e.metaKey) {
-			// TODO: handle dismiss
 		}
 	};
 
@@ -751,12 +753,18 @@ class NavigationMenuContentState {
 	}
 
 	onFocusOutside = (e: Event) => {
+		console.log("focus outside");
 		if (e.defaultPrevented) return;
 		this.item.onContentFocusOutside();
 		const target = e.target as HTMLElement;
 		// only dismiss content when focus moves outside the menu
+		console.log("target", target);
+		console.log(this.menu.root.rootRef.value);
+
 		if (this.menu.root.rootRef.value?.contains(target)) {
 			e.preventDefault();
+		} else {
+			this.menu.root.handleClose();
 		}
 	};
 
@@ -1004,7 +1012,7 @@ export function useNavigationMenuIndicator(props: NavigationMenuIndicatorStatePr
 }
 
 export function useNavigationMenuLink(props: NavigationMenuLinkStateProps) {
-	return new NavigationMenuLinkState(props);
+	return getNavigationMenuItemContext().createLink(props);
 }
 
 /// Utils

From 79a6dada6b2f97b67298b2f190f4f00b4611a5e5 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sat, 15 Jun 2024 21:49:05 -0400
Subject: [PATCH 15/18] bit more

---
 .../components/navigation-menu-content.svelte |  5 +++-
 .../navigation-menu/navigation-menu.svelte.ts | 29 +++++++++++--------
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-content.svelte b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-content.svelte
index e6d97aaa7..f281b6c64 100644
--- a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-content.svelte
+++ b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-content.svelte
@@ -41,7 +41,10 @@
 <Portal to={contentState.menu.viewportNode ?? undefined} disabled={portalDisabled}>
 	<PresenceLayer {id} present={contentState.isPresent}>
 		{#snippet presence({ present })}
-			<EscapeLayer enabled={present.value} onEscapeKeydown={contentState.onEscapeKeydown}>
+			<EscapeLayer
+				enabled={present.value}
+				onEscapeKeydown={(e) => contentState.onEscapeKeydown(e)}
+			>
 				<DismissableLayer
 					enabled={present.value}
 					{id}
diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts b/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts
index ee03f0d16..52523e573 100644
--- a/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts
@@ -25,6 +25,7 @@ import type { ElementRef } from "$lib/internal/types.js";
 import { afterTick } from "$lib/internal/afterTick.js";
 import { getTabbableCandidates } from "../utilities/focus-scope/utils.js";
 import { sleep } from "$lib/internal/sleep.js";
+import { noop } from "$lib/internal/callbacks.js";
 
 const [setNavigationMenuRootContext, getNavigationMenuRootContext] =
 	createContext<NavigationMenuRootState>("NavigationMenu.Root");
@@ -168,7 +169,7 @@ class NavigationMenuRootState {
 		this.startCloseTimer();
 	};
 
-	onContentEnter = (itemValue: string) => {
+	onContentEnter = () => {
 		window.clearTimeout(this.closeTimer);
 	};
 
@@ -209,7 +210,7 @@ type NavigationMenuMenuStateProps = ReadableBoxedValues<{
 		isRoot: boolean;
 		onTriggerEnter: (itemValue: string) => void;
 		onTriggerLeave?: () => void;
-		onContentEnter?: (itemValue: string) => void;
+		onContentEnter?: () => void;
 		onContentLeave?: () => void;
 		onItemSelect: (itemValue: string) => void;
 		onItemDismiss: () => void;
@@ -344,7 +345,7 @@ class NavigationMenuItemState {
 	focusProxyRef = box<HTMLElement | null>(null);
 	focusProxyNode = $state<HTMLElement | null>(null);
 	focusProxyId = box(useId());
-	restoreContentTabOrder = $state(() => {});
+	restoreContentTabOrder = noop;
 	wasEscapeClose = $state(false);
 	menu: NavigationMenuMenuState;
 
@@ -356,6 +357,7 @@ class NavigationMenuItemState {
 
 	#handleContentEntry = (side: "start" | "end" = "start") => {
 		if (!this.contentNode) return;
+		this.restoreContentTabOrder();
 		const candidates = getTabbableCandidates(this.contentNode);
 		if (candidates.length) {
 			if (side === "start") {
@@ -753,13 +755,9 @@ class NavigationMenuContentState {
 	}
 
 	onFocusOutside = (e: Event) => {
-		console.log("focus outside");
-		if (e.defaultPrevented) return;
 		this.item.onContentFocusOutside();
 		const target = e.target as HTMLElement;
 		// only dismiss content when focus moves outside the menu
-		console.log("target", target);
-		console.log(this.menu.root.rootRef.value);
 
 		if (this.menu.root.rootRef.value?.contains(target)) {
 			e.preventDefault();
@@ -781,17 +779,20 @@ class NavigationMenuContentState {
 	};
 
 	onEscapeKeydown = (e: KeyboardEvent) => {
-		if (e.defaultPrevented) return;
-		this.menu.onItemDismiss();
-		this.item.triggerNode?.focus();
+		this.menu.root.handleClose();
+		const target = e.target as HTMLElement;
+
+		if (this.contentRef.value?.contains(target)) {
+			this.item.triggerNode?.focus();
+		}
 		this.item.wasEscapeClose = true;
 	};
 
 	#onkeydown = (e: KeyboardEvent) => {
 		const isMetaKey = e.altKey || e.ctrlKey || e.metaKey;
 		const isTabKey = e.key === kbd.TAB && !isMetaKey;
-		const candidates = getTabbableCandidates(e.currentTarget as HTMLElement);
 
+		const candidates = getTabbableCandidates(e.currentTarget as HTMLElement);
 		if (isTabKey) {
 			const focusedElement = document.activeElement;
 			const index = candidates.findIndex((candidate) => candidate === focusedElement);
@@ -803,11 +804,13 @@ class NavigationMenuContentState {
 			if (focusFirst(nextCandidates)) {
 				// prevent browser tab keydown because we've handled focus
 				e.preventDefault();
+				return;
 			} else {
 				// If we can't focus that means we're at the edges
 				// so focus the proxy and let browser handle
 				// tab/shift+tab keypress on the proxy instead
 				this.item.focusProxyNode?.focus();
+				return;
 			}
 		}
 		const newSelectedElement = useArrowNavigation(
@@ -898,7 +901,7 @@ class NavigationMenuViewportState {
 	}
 
 	#onpointerenter = () => {
-		this.menu.onContentEnter?.(this.menu.value.value);
+		this.menu.onContentEnter?.();
 	};
 
 	#onpointerleave = (e: PointerEvent) => {
@@ -1033,9 +1036,11 @@ function removeFromTabOrder(candidates: HTMLElement[]) {
 		candidate.setAttribute("tabindex", "-1");
 	});
 	return () => {
+		console.log("restoring tab order");
 		candidates.forEach((candidate) => {
 			const prevTabIndex = candidate.dataset.tabindex as string;
 			candidate.setAttribute("tabindex", prevTabIndex);
+			console.log(candidate.getAttribute("tabindex"));
 		});
 	};
 }

From 86bd22b26ca77315932fd72210576687db5c0abb Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sun, 16 Jun 2024 16:18:13 -0400
Subject: [PATCH 16/18] there we go

---
 .../components/navigation-menu-content.svelte | 11 ++--
 .../navigation-menu/navigation-menu.svelte.ts |  5 +-
 .../useDismissableLayer.svelte.ts             | 61 +++++++++++++------
 .../popper-layer/popper-layer.svelte          | 14 ++---
 .../demos/navigation-menu-demo.svelte         |  1 +
 5 files changed, 59 insertions(+), 33 deletions(-)

diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-content.svelte b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-content.svelte
index f281b6c64..78aabada4 100644
--- a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-content.svelte
+++ b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-content.svelte
@@ -42,21 +42,22 @@
 	<PresenceLayer {id} present={contentState.isPresent}>
 		{#snippet presence({ present })}
 			<EscapeLayer
-				enabled={present.value}
+				enabled={contentState.isPresent}
 				onEscapeKeydown={(e) => contentState.onEscapeKeydown(e)}
 			>
 				<DismissableLayer
-					enabled={present.value}
+					enabled={contentState.isPresent}
 					{id}
 					onInteractOutside={contentState.onInteractOutside}
 					onFocusOutside={contentState.onFocusOutside}
 				>
 					{#snippet children({ props: dismissableProps })}
 						{#if asChild}
-							{@render child?.({ props: mergeProps(mergedProps, dismissableProps) })}
+							<Mounted bind:isMounted />
+							{@render child?.({ props: mergeProps(dismissableProps, mergedProps) })}
 						{:else}
-							<div {...mergeProps(mergedProps, dismissableProps)}>
-								<Mounted bind:isMounted />
+							<Mounted bind:isMounted />
+							<div {...mergeProps(dismissableProps, mergedProps)}>
 								{@render contentChildren?.()}
 							</div>
 						{/if}
diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts b/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts
index 52523e573..e86ebc214 100644
--- a/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts
@@ -533,6 +533,7 @@ class NavigationMenuTriggerState {
 					const wasFocusFromContent = this.item.contentNode?.contains(prevFocusedElement);
 
 					if (wasTriggerFocused || !wasFocusFromContent) {
+						e.preventDefault();
 						this.item.onFocusProxyEnter(wasTriggerFocused ? "start" : "end");
 					}
 				},
@@ -695,7 +696,7 @@ class NavigationMenuContentState {
 		}
 		return false;
 	});
-	isPresent = $derived.by(() => this.open || this.isLastActiveValue || this.forceMount.value);
+	isPresent = $derived.by(() => this.open || this.forceMount.value);
 
 	constructor(props: NavigationMenuContentStateProps, item: NavigationMenuItemState) {
 		this.id = props.id;
@@ -1036,11 +1037,9 @@ function removeFromTabOrder(candidates: HTMLElement[]) {
 		candidate.setAttribute("tabindex", "-1");
 	});
 	return () => {
-		console.log("restoring tab order");
 		candidates.forEach((candidate) => {
 			const prevTabIndex = candidate.dataset.tabindex as string;
 			candidate.setAttribute("tabindex", prevTabIndex);
-			console.log(candidate.getAttribute("tabindex"));
 		});
 	};
 }
diff --git a/packages/bits-ui/src/lib/bits/utilities/dismissable-layer/useDismissableLayer.svelte.ts b/packages/bits-ui/src/lib/bits/utilities/dismissable-layer/useDismissableLayer.svelte.ts
index 5a588865c..a9deadd45 100644
--- a/packages/bits-ui/src/lib/bits/utilities/dismissable-layer/useDismissableLayer.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/utilities/dismissable-layer/useDismissableLayer.svelte.ts
@@ -1,5 +1,5 @@
 import { untrack } from "svelte";
-import type { ReadableBox } from "svelte-toolbelt";
+import { box, type ReadableBox, type WritableBox } from "svelte-toolbelt";
 import type {
 	DismissableLayerImplProps,
 	InteractOutsideBehaviorType,
@@ -19,7 +19,7 @@ import {
 	isElement,
 	isOrContainsTarget,
 	noop,
-	useNodeById,
+	useRefById,
 } from "$lib/internal/index.js";
 
 const layers = new Map<DismissableLayerState, ReadableBox<InteractOutsideBehaviorType>>();
@@ -53,40 +53,64 @@ export class DismissableLayerState {
 	};
 	#isPointerDownOutside = false;
 	#isResponsibleLayer = false;
-	node: Box<HTMLElement | null>;
+	node: WritableBox<HTMLElement | null> = box(null);
 	#documentObj = undefined as unknown as Document;
 	#enabled: ReadableBox<boolean>;
 	#isFocusInsideDOMTree = $state(false);
 	#onFocusOutside: DismissableLayerStateProps["onFocusOutside"];
+	currNode = $state<HTMLElement | null>(null);
 
 	constructor(props: DismissableLayerStateProps) {
-		this.node = useNodeById(props.id);
+		this.#enabled = props.enabled;
+
+		useRefById({
+			id: props.id,
+			ref: this.node,
+			condition: () => this.#enabled.value,
+			onRefChange: (node) => {
+				this.currNode = node;
+			},
+		});
+
 		this.#behaviorType = props.interactOutsideBehavior;
 		this.#interactOutsideStartProp = props.onInteractOutsideStart;
 		this.#interactOutsideProp = props.onInteractOutside;
-		this.#enabled = props.enabled;
 		this.#onFocusOutside = props.onFocusOutside;
 
 		$effect(() => {
-			this.#documentObj = getOwnerDocument(this.node.value);
+			this.#documentObj = getOwnerDocument(this.currNode);
+		});
+
+		$effect(() => {
+			if (props.id.value === "123") {
+				console.log("enabled", this.#enabled.value);
+			}
 		});
 
 		let unsubEvents = noop;
 
+		const cleanup = () => {
+			this.#resetState();
+			layers.delete(this);
+			this.#onInteractOutsideStart.destroy();
+			this.#onInteractOutside.destroy();
+			unsubEvents();
+		};
+
 		$effect(() => {
 			if (this.#enabled.value) {
 				layers.set(
 					this,
 					untrack(() => this.#behaviorType)
 				);
-				unsubEvents = this.#addEventListeners();
+				console.log("adding event listeners");
+				untrack(() => {
+					unsubEvents();
+					unsubEvents = this.#addEventListeners();
+				});
 			}
 			return () => {
-				this.#resetState();
-				layers.delete(this);
-				this.#onInteractOutsideStart.destroy();
-				this.#onInteractOutside.destroy();
-				unsubEvents();
+				cleanup();
 			};
 		});
 
@@ -105,9 +129,10 @@ export class DismissableLayerState {
 	}
 
 	#handleFocus = (event: FocusEvent) => {
-		if (!this.node.value) return;
+		if (event.defaultPrevented) return;
+		if (!this.currNode) return;
 		afterTick(() => {
-			if (!this.node.value || this.#isTargetWithinLayer(event.target as HTMLElement)) return;
+			if (!this.currNode || this.#isTargetWithinLayer(event.target as HTMLElement)) return;
 
 			if (event.target && !this.#isFocusInsideDOMTree) {
 				this.#onFocusOutside.value?.(event);
@@ -173,11 +198,11 @@ export class DismissableLayerState {
 	}
 
 	#onInteractOutsideStart = debounce((e: InteractOutsideEvent) => {
-		if (!this.node.value) return;
+		if (!this.currNode) return;
 		if (
 			!this.#isResponsibleLayer ||
 			this.#isAnyEventIntercepted() ||
-			!isValidEvent(e, this.node.value)
+			!isValidEvent(e, this.currNode)
 		)
 			return;
 		this.#interactOutsideStartProp.value(e);
@@ -186,13 +211,13 @@ export class DismissableLayerState {
 	}, 10);
 
 	#onInteractOutside = debounce((e: InteractOutsideEvent) => {
-		if (!this.node.value) return;
+		if (!this.currNode) return;
 
 		const behaviorType = this.#behaviorType.value;
 		if (
 			!this.#isResponsibleLayer ||
 			this.#isAnyEventIntercepted() ||
-			!isValidEvent(e, this.node.value)
+			!isValidEvent(e, this.currNode)
 		) {
 			return;
 		}
diff --git a/packages/bits-ui/src/lib/bits/utilities/popper-layer/popper-layer.svelte b/packages/bits-ui/src/lib/bits/utilities/popper-layer/popper-layer.svelte
index a7992f7f5..31cc9d8f6 100644
--- a/packages/bits-ui/src/lib/bits/utilities/popper-layer/popper-layer.svelte
+++ b/packages/bits-ui/src/lib/bits/utilities/popper-layer/popper-layer.svelte
@@ -8,19 +8,19 @@
 	import { FocusScope } from "$lib/bits/utilities/focus-scope/index.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
 
-	let { popper, ...restProps }: PopperLayerImplProps = $props();
+	let { popper, present, ...restProps }: PopperLayerImplProps = $props();
 </script>
 
-<PresenceLayer {...restProps}>
-	{#snippet presence({ present })}
-		<FloatingLayer.Content {...restProps} enabled={present.value}>
+<PresenceLayer {present} {...restProps}>
+	{#snippet presence({})}
+		<FloatingLayer.Content {...restProps} enabled={present}>
 			{#snippet content({ props: floatingProps })}
 				<FocusScope {...restProps}>
 					{#snippet focusScope({ props: focusScopeProps })}
-						<EscapeLayer {...restProps} enabled={present.value}>
-							<DismissableLayer {...restProps} enabled={present.value}>
+						<EscapeLayer {...restProps} enabled={present}>
+							<DismissableLayer {...restProps} enabled={present}>
 								{#snippet children({ props: dismissableProps })}
-									<TextSelectionLayer {...restProps} enabled={present.value}>
+									<TextSelectionLayer {...restProps} enabled={present}>
 										{@render popper?.({
 											props: mergeProps(
 												restProps,
diff --git a/sites/docs/src/lib/components/demos/navigation-menu-demo.svelte b/sites/docs/src/lib/components/demos/navigation-menu-demo.svelte
index c85e51e65..68c36b636 100644
--- a/sites/docs/src/lib/components/demos/navigation-menu-demo.svelte
+++ b/sites/docs/src/lib/components/demos/navigation-menu-demo.svelte
@@ -123,6 +123,7 @@
 				/>
 			</NavigationMenu.Trigger>
 			<NavigationMenu.Content
+				id="123"
 				class="left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto"
 			>
 				<ul class="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">

From 7193c3a359a6d43d81de504ccd18bb1f8fa3cb07 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sun, 16 Jun 2024 16:20:08 -0400
Subject: [PATCH 17/18] a

---
 .../dismissable-layer/useDismissableLayer.svelte.ts        | 7 -------
 .../lib/bits/utilities/popper-layer/popper-layer.svelte    | 2 +-
 2 files changed, 1 insertion(+), 8 deletions(-)

diff --git a/packages/bits-ui/src/lib/bits/utilities/dismissable-layer/useDismissableLayer.svelte.ts b/packages/bits-ui/src/lib/bits/utilities/dismissable-layer/useDismissableLayer.svelte.ts
index a9deadd45..3dec0630d 100644
--- a/packages/bits-ui/src/lib/bits/utilities/dismissable-layer/useDismissableLayer.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/utilities/dismissable-layer/useDismissableLayer.svelte.ts
@@ -81,12 +81,6 @@ export class DismissableLayerState {
 			this.#documentObj = getOwnerDocument(this.currNode);
 		});
 
-		$effect(() => {
-			if (props.id.value === "123") {
-				console.log("enabled", this.#enabled.value);
-			}
-		});
-
 		let unsubEvents = noop;
 
 		const cleanup = () => {
@@ -103,7 +97,6 @@ export class DismissableLayerState {
 					this,
 					untrack(() => this.#behaviorType)
 				);
-				console.log("adding event listeners");
 				untrack(() => {
 					unsubEvents();
 					unsubEvents = this.#addEventListeners();
diff --git a/packages/bits-ui/src/lib/bits/utilities/popper-layer/popper-layer.svelte b/packages/bits-ui/src/lib/bits/utilities/popper-layer/popper-layer.svelte
index 31cc9d8f6..33b5828d5 100644
--- a/packages/bits-ui/src/lib/bits/utilities/popper-layer/popper-layer.svelte
+++ b/packages/bits-ui/src/lib/bits/utilities/popper-layer/popper-layer.svelte
@@ -12,7 +12,7 @@
 </script>
 
 <PresenceLayer {present} {...restProps}>
-	{#snippet presence({})}
+	{#snippet presence()}
 		<FloatingLayer.Content {...restProps} enabled={present}>
 			{#snippet content({ props: floatingProps })}
 				<FocusScope {...restProps}>

From 52e0134ec742f4b36ea496fd09e56b1d9825aafd Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sun, 16 Jun 2024 18:51:15 -0400
Subject: [PATCH 18/18] without sub for now

---
 .../components/navigation-menu-sub.svelte     |  48 ++++
 .../src/lib/bits/navigation-menu/index.ts     |   1 -
 .../navigation-menu/navigation-menu.svelte.ts | 230 +++++++++++-------
 .../demos/navigation-menu-demo.svelte         |   3 +-
 4 files changed, 194 insertions(+), 88 deletions(-)
 create mode 100644 packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-sub.svelte

diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-sub.svelte b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-sub.svelte
new file mode 100644
index 000000000..283374245
--- /dev/null
+++ b/packages/bits-ui/src/lib/bits/navigation-menu/components/navigation-menu-sub.svelte
@@ -0,0 +1,48 @@
+<!-- <script lang="ts">
+	import { useId } from "$lib/internal/useId.svelte.js";
+	import { box } from "svelte-toolbelt";
+	import type { SubProps } from "../index.js";
+	import { useNavigationMenuSub } from "../navigation-menu.svelte.js";
+	import { noop } from "$lib/internal/callbacks.js";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
+
+	let {
+		id = useId(),
+		asChild,
+		children,
+		child,
+		ref = $bindable(null),
+		value = $bindable(""),
+		orientation = "horizontal",
+		onValueChange = noop,
+		...restProps
+	}: SubProps = $props();
+
+	const subState = useNavigationMenuSub({
+		id: box.with(() => id),
+		orientation: box.with(() => orientation),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+		value: box.with(
+			() => value,
+			(v) => {
+				if (v !== value) {
+					value = v;
+					onValueChange(v);
+				}
+			}
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, subState.props));
+</script>
+
+{#if asChild}
+	{@render child?.({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if} -->
diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/index.ts b/packages/bits-ui/src/lib/bits/navigation-menu/index.ts
index eaddb3d25..edfa842a0 100644
--- a/packages/bits-ui/src/lib/bits/navigation-menu/index.ts
+++ b/packages/bits-ui/src/lib/bits/navigation-menu/index.ts
@@ -9,7 +9,6 @@ export { default as Viewport } from "./components/navigation-menu-viewport.svelt
 
 export type {
 	NavigationMenuRootProps as RootProps,
-	NavigationMenuSubProps as SubProps,
 	NavigationMenuItemProps as ItemProps,
 	NavigationMenuListProps as ListProps,
 	NavigationMenuTriggerProps as TriggerProps,
diff --git a/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts b/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts
index e86ebc214..c200e72dd 100644
--- a/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts
@@ -1,5 +1,5 @@
-import { tick, untrack } from "svelte";
-import { box, type WritableBox } from "svelte-toolbelt";
+import { untrack } from "svelte";
+import { box } from "svelte-toolbelt";
 import { Previous } from "runed";
 import {
 	watch,
@@ -24,14 +24,14 @@ import { useRefById } from "$lib/internal/useNodeById.svelte.js";
 import type { ElementRef } from "$lib/internal/types.js";
 import { afterTick } from "$lib/internal/afterTick.js";
 import { getTabbableCandidates } from "../utilities/focus-scope/utils.js";
-import { sleep } from "$lib/internal/sleep.js";
 import { noop } from "$lib/internal/callbacks.js";
 
 const [setNavigationMenuRootContext, getNavigationMenuRootContext] =
 	createContext<NavigationMenuRootState>("NavigationMenu.Root");
 
-const [setNavigationMenuMenuContext, getNavigationMenuMenuContext] =
-	createContext<NavigationMenuMenuState>("NavigationMenu.Root or NavigationMenu.Sub");
+const [setNavigationMenuMenuContext, getNavigationMenuMenuContext] = createContext<
+	NavigationMenuMenuState | NavigationMenuSubState
+>("NavigationMenu.Root or NavigationMenu.Sub");
 
 const [setNavigationMenuItemContext, getNavigationMenuItemContext] =
 	createContext<NavigationMenuItemState>("NavigationMenu.Item");
@@ -63,7 +63,6 @@ class NavigationMenuRootState {
 	dir: NavigationMenuRootStateProps["dir"];
 	value: NavigationMenuRootStateProps["value"];
 	previousValue = new Previous(() => this.value.value);
-	triggerRefs = new Set<ElementRef>();
 	openTimer = 0;
 	closeTimer = 0;
 	skipDelayTimer = 0;
@@ -141,20 +140,6 @@ class NavigationMenuRootState {
 		}
 	};
 
-	registerTrigger = (ref: ElementRef) => {
-		this.triggerRefs.add(ref);
-	};
-
-	deRegisterTrigger = (ref: ElementRef) => {
-		this.triggerRefs.delete(ref);
-	};
-
-	getTriggerNodes = () => {
-		return Array.from(this.triggerRefs)
-			.map((ref) => ref.value)
-			.filter((node): node is HTMLElement => Boolean(node));
-	};
-
 	onTriggerEnter = (itemValue: string) => {
 		window.clearTimeout(this.openTimer);
 		if (this.isOpenDelayed) {
@@ -214,9 +199,6 @@ type NavigationMenuMenuStateProps = ReadableBoxedValues<{
 		onContentLeave?: () => void;
 		onItemSelect: (itemValue: string) => void;
 		onItemDismiss: () => void;
-		getTriggerNodes: () => HTMLElement[];
-		registerTrigger: (ref: ElementRef) => void;
-		deRegisterTrigger: (ref: ElementRef) => void;
 		previousValue: Previous<string>;
 	};
 
@@ -233,13 +215,11 @@ class NavigationMenuMenuState {
 	onContentLeave: NavigationMenuMenuStateProps["onContentLeave"];
 	onItemSelect: NavigationMenuMenuStateProps["onItemSelect"];
 	onItemDismiss: NavigationMenuMenuStateProps["onItemDismiss"];
-	getTriggerNodes: NavigationMenuMenuStateProps["getTriggerNodes"];
-	registerTrigger: NavigationMenuMenuStateProps["registerTrigger"];
-	deRegisterTrigger: NavigationMenuMenuStateProps["deRegisterTrigger"];
 	viewportNode = $state<HTMLElement | null>(null);
 	indicatorTrackNode = $state<HTMLElement | null>(null);
 	viewportContentId = box.with<string | undefined>(() => undefined);
 	root: NavigationMenuRootState;
+	triggerRefs = new Set<ElementRef>();
 
 	constructor(props: NavigationMenuMenuStateProps, root: NavigationMenuRootState) {
 		this.isRoot = props.isRoot;
@@ -253,13 +233,113 @@ class NavigationMenuMenuState {
 		this.onContentLeave = props.onContentLeave;
 		this.onItemSelect = props.onItemSelect;
 		this.onItemDismiss = props.onItemDismiss;
-		this.deRegisterTrigger = props.deRegisterTrigger;
-		this.registerTrigger = props.registerTrigger;
-		this.getTriggerNodes = props.getTriggerNodes;
 		this.root = root;
 		this.previousValue = props.previousValue;
 	}
 
+	registerTrigger = (ref: ElementRef) => {
+		this.triggerRefs.add(ref);
+	};
+
+	deRegisterTrigger = (ref: ElementRef) => {
+		this.triggerRefs.delete(ref);
+	};
+
+	getTriggerNodes = () => {
+		return Array.from(this.triggerRefs)
+			.map((ref) => ref.value)
+			.filter((node): node is HTMLElement => Boolean(node));
+	};
+
+	createList(props: NavigationMenuListStateProps) {
+		return new NavigationMenuListState(props, this);
+	}
+
+	createItem(props: NavigationMenuItemStateProps) {
+		return new NavigationMenuItemState(props, this);
+	}
+
+	createIndicator(props: NavigationMenuIndicatorStateProps) {
+		return new NavigationMenuIndicatorState(props, this);
+	}
+
+	createViewport(props: NavigationMenuViewportStateProps) {
+		return new NavigationMenuViewportState(props, this);
+	}
+
+	createSubMenu(props: NavigationMenuSubStateProps) {
+		return new NavigationMenuSubState(props, this.root);
+	}
+}
+
+type NavigationMenuSubStateProps = ReadableBoxedValues<{
+	id: string;
+	orientation: Orientation;
+}> &
+	WritableBoxedValues<{
+		value: string;
+		ref: HTMLElement | null;
+	}>;
+
+class NavigationMenuSubState {
+	id: NavigationMenuSubStateProps["id"];
+	isRoot = false;
+	rootNavigationId: NavigationMenuMenuStateProps["rootNavigationId"];
+	dir: NavigationMenuMenuStateProps["dir"];
+	orientation: NavigationMenuMenuStateProps["orientation"];
+	value: NavigationMenuMenuStateProps["value"];
+	previousValue = new Previous(() => this.value.value);
+	onTriggerLeave: NavigationMenuMenuStateProps["onTriggerLeave"];
+	onContentEnter: NavigationMenuMenuStateProps["onContentEnter"];
+	onContentLeave: NavigationMenuMenuStateProps["onContentLeave"];
+	viewportNode = $state<HTMLElement | null>(null);
+	indicatorTrackNode = $state<HTMLElement | null>(null);
+	viewportContentId = box.with<string | undefined>(() => undefined);
+	root: NavigationMenuRootState;
+	triggerRefs = new Set<ElementRef>();
+	ref: NavigationMenuSubStateProps["ref"];
+
+	constructor(props: NavigationMenuSubStateProps, root: NavigationMenuRootState) {
+		this.id = props.id;
+		this.rootNavigationId = root.id;
+		this.dir = root.dir;
+		this.orientation = props.orientation;
+		this.value = props.value;
+		this.root = root;
+		this.ref = props.ref;
+
+		useRefById({
+			id: this.id,
+			ref: this.ref,
+		});
+	}
+
+	onTriggerEnter = (itemValue: string) => {
+		this.value.value = itemValue;
+	};
+
+	onItemSelect = (itemValue: string) => {
+		this.value.value = itemValue;
+	};
+
+	onItemDismiss = () => {
+		this.value.value = "";
+	};
+
+	registerTrigger = (ref: ElementRef) => {
+		this.triggerRefs.add(ref);
+	};
+
+	deRegisterTrigger = (ref: ElementRef) => {
+		this.triggerRefs.delete(ref);
+	};
+
+	getTriggerNodes = () => {
+		return Array.from(this.triggerRefs)
+			.map((ref) => ref.value)
+			.filter((node): node is HTMLElement => Boolean(node));
+	};
+
 	createList(props: NavigationMenuListStateProps) {
 		return new NavigationMenuListState(props, this);
 	}
@@ -275,6 +355,12 @@ class NavigationMenuMenuState {
 	createViewport(props: NavigationMenuViewportStateProps) {
 		return new NavigationMenuViewportState(props, this);
 	}
+
+	props = $derived.by(() => ({
+		id: this.id.value,
+		"data-orientation": getDataOrientation(this.orientation.value),
+		[SUB_ATTR]: "",
+	}));
 }
 
 type NavigationMenuListStateProps = ReadableBoxedValues<{
@@ -293,7 +379,7 @@ class NavigationMenuListState {
 
 	constructor(
 		props: NavigationMenuListStateProps,
-		private menu: NavigationMenuMenuState
+		private menu: NavigationMenuMenuState | NavigationMenuSubState
 	) {
 		this.id = props.id;
 		this.listRef = props.ref;
@@ -347,9 +433,12 @@ class NavigationMenuItemState {
 	focusProxyId = box(useId());
 	restoreContentTabOrder = noop;
 	wasEscapeClose = $state(false);
-	menu: NavigationMenuMenuState;
+	menu: NavigationMenuMenuState | NavigationMenuSubState;
 
-	constructor(props: NavigationMenuItemStateProps, menu: NavigationMenuMenuState) {
+	constructor(
+		props: NavigationMenuItemStateProps,
+		menu: NavigationMenuMenuState | NavigationMenuSubState
+	) {
 		this.id = props.id;
 		this.value = props.value;
 		this.menu = menu;
@@ -398,7 +487,7 @@ class NavigationMenuItemState {
 	}
 
 	createLink(props: NavigationMenuLinkStateProps) {
-		return new NavigationMenuLinkState(props, this.menu.root);
+		return new NavigationMenuLinkState(props);
 	}
 }
 
@@ -414,7 +503,7 @@ type NavigationMenuTriggerStateProps = ReadableBoxedValues<{
 class NavigationMenuTriggerState {
 	id: NavigationMenuTriggerStateProps["id"];
 	focusProxyMounted: NavigationMenuTriggerStateProps["focusProxyMounted"];
-	menu: NavigationMenuMenuState;
+	menu: NavigationMenuMenuState | NavigationMenuSubState;
 	item: NavigationMenuItemState;
 	disabled: NavigationMenuTriggerStateProps["disabled"];
 	hasPointerMoveOpened = boxAutoReset(false, 150);
@@ -552,7 +641,7 @@ class NavigationMenuLinkState {
 	active: NavigationMenuLinkStateProps["active"];
 	onSelect: NavigationMenuLinkStateProps["onSelect"];
 
-	constructor(props: NavigationMenuLinkStateProps, root: NavigationMenuRootState) {
+	constructor(props: NavigationMenuLinkStateProps) {
 		this.id = props.id;
 		this.active = props.active;
 		this.onSelect = props.onSelect;
@@ -591,14 +680,17 @@ type NavigationMenuIndicatorStateProps = ReadableBoxedValues<{
 
 class NavigationMenuIndicatorState {
 	id: NavigationMenuIndicatorStateProps["id"];
-	menu: NavigationMenuMenuState;
+	menu: NavigationMenuMenuState | NavigationMenuSubState;
 	activeTrigger = $state<HTMLElement | null>(null);
 	position = $state<{ size: number; offset: number } | null>(null);
 	isHorizontal = $derived.by(() => this.menu.orientation.value === "horizontal");
 	isVisible = $derived.by(() => Boolean(this.menu.value.value));
 	indicatorRef: NavigationMenuIndicatorStateProps["ref"];
 
-	constructor(props: NavigationMenuIndicatorStateProps, menu: NavigationMenuMenuState) {
+	constructor(
+		props: NavigationMenuIndicatorStateProps,
+		menu: NavigationMenuMenuState | NavigationMenuSubState
+	) {
 		this.id = props.id;
 		this.indicatorRef = props.ref;
 		this.menu = menu;
@@ -683,19 +775,11 @@ class NavigationMenuContentState {
 	forceMount: NavigationMenuContentStateProps["forceMount"];
 	isMounted: NavigationMenuContentStateProps["isMounted"];
 	contentRef: NavigationMenuContentStateProps["ref"];
-	menu: NavigationMenuMenuState;
+	menu: NavigationMenuMenuState | NavigationMenuSubState;
 	item: NavigationMenuItemState;
 	prevMotionAttribute = $state<MotionAttribute | null>(null);
 	motionAttribute = $state<MotionAttribute | null>(null);
 	open = $derived.by(() => this.menu.value.value === this.item.value.value);
-	isLastActiveValue = $derived.by(() => {
-		if (this.menu.viewportNode) {
-			if (!this.menu.value.value && this.menu.previousValue.current) {
-				return this.menu.previousValue.current === this.item.value.value;
-			}
-		}
-		return false;
-	});
 	isPresent = $derived.by(() => this.open || this.forceMount.value);
 
 	constructor(props: NavigationMenuContentStateProps, item: NavigationMenuItemState) {
@@ -855,14 +939,17 @@ type NavigationMenuViewportStateProps = ReadableBoxedValues<{
 
 class NavigationMenuViewportState {
 	id: NavigationMenuViewportStateProps["id"];
-	menu: NavigationMenuMenuState;
+	menu: NavigationMenuMenuState | NavigationMenuSubState;
 	size = $state<{ width: number; height: number } | null>(null);
 	open = $derived.by(() => this.menu.value.value !== "");
 	activeContentValue = $derived.by(() => this.menu.value.value);
 	viewportRef: NavigationMenuViewportStateProps["ref"];
 	contentNode = $state<HTMLElement | null>();
 
-	constructor(props: NavigationMenuViewportStateProps, menu: NavigationMenuMenuState) {
+	constructor(
+		props: NavigationMenuViewportStateProps,
+		menu: NavigationMenuMenuState | NavigationMenuSubState
+	) {
 		this.id = props.id;
 		this.menu = menu;
 		this.viewportRef = props.ref;
@@ -931,51 +1018,14 @@ class NavigationMenuViewportState {
 	);
 }
 
-// Context Methods
-
-// export function useNavigationMenuSub(props: NavigationMenuSubStateProps) {
-// 	const rootState = getNavigationMenuRootContext();
-// 	const menuState = rootState.createMenu({
-// 		getTriggerNodes: rootState.getTriggerNodes,
-// 		rootNavigationId: rootState.id,
-// 		dir: rootState.dir,
-// 		orientation: rootState.orientation,
-// 		value: rootState.value,
-// 		isRoot: false,
-// 		deRegisterTriggerId: rootState.deRegisterTriggerId,
-// 		registerTriggerId: rootState.registerTriggerId,
-// 		onTriggerEnter: rootState.onTriggerEnter,
-// 		onItemSelect: rootState.onItemSelect,
-// 		onItemDismiss: rootState.onItemDismiss,
-// 		onContentEnter: rootState.onContentEnter,
-// 		onContentLeave: rootState.onContentLeave,
-// 		onTriggerLeave: rootState.onTriggerLeave,
-// 		previousValue: new Previous,
-// 	});
-
-// 	setNavigationMenuMenuContext(menuState);
-// 	return new NavigationMenuSubState(
-// 		{
-// 			dir: props.dir,
-// 			id: props.id,
-// 			orientation: props.orientation,
-// 			value: props.value,
-// 		},
-// 		rootState
-// 	);
-// }
-
 export function useNavigationMenuRoot(props: NavigationMenuRootStateProps) {
 	const rootState = new NavigationMenuRootState(props);
 	const menuState = rootState.createMenu({
-		getTriggerNodes: rootState.getTriggerNodes,
 		rootNavigationId: rootState.id,
 		dir: rootState.dir,
 		orientation: rootState.orientation,
 		value: rootState.value,
 		isRoot: true,
-		deRegisterTrigger: rootState.deRegisterTrigger,
-		registerTrigger: rootState.registerTrigger,
 		onTriggerEnter: rootState.onTriggerEnter,
 		onItemSelect: rootState.onItemSelect,
 		onItemDismiss: rootState.onItemDismiss,
@@ -989,6 +1039,16 @@ export function useNavigationMenuRoot(props: NavigationMenuRootStateProps) {
 	return setNavigationMenuRootContext(rootState);
 }
 
+export function useNavigationMenuSub(props: NavigationMenuSubStateProps) {
+	const parentMenu = getNavigationMenuMenuContext();
+	if (parentMenu instanceof NavigationMenuMenuState) {
+		return setNavigationMenuMenuContext(
+			parentMenu.createSubMenu(props)
+		) as NavigationMenuSubState;
+	}
+	throw new Error("useNavigationMenuSub must be used within a NavigationMenuMenu");
+}
+
 export function useNavigationMenuList(props: NavigationMenuListStateProps) {
 	const menuState = getNavigationMenuMenuContext();
 	return menuState.createList(props);
diff --git a/sites/docs/src/lib/components/demos/navigation-menu-demo.svelte b/sites/docs/src/lib/components/demos/navigation-menu-demo.svelte
index 68c36b636..61f73bf65 100644
--- a/sites/docs/src/lib/components/demos/navigation-menu-demo.svelte
+++ b/sites/docs/src/lib/components/demos/navigation-menu-demo.svelte
@@ -123,10 +123,9 @@
 				/>
 			</NavigationMenu.Trigger>
 			<NavigationMenu.Content
-				id="123"
 				class="left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto"
 			>
-				<ul class="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
+				<ul class="grid w-[400px] gap-3 p-6 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
 					{#each components as component (component.title)}
 						{@render ListItem({
 							href: component.href,