solid-baseui 0.1.0-alpha.0

package/dist/lib/server/navigation-menu/index.js

@@ -0,0 +1,1436 @@
+import { t as __exportAll } from "../rolldown-runtime-D7D4PA-g.js";
+import { getStateAttributesProps } from "../internals/getStateAttributesProps.js";
+import { x as linkPress } from "../internals/reasons.js";
+import { n as resolveClass, t as resolveStyle } from "../resolveStyle-XCSFDHAL.js";
+import { createChangeEventDetails } from "../internals/createBaseUIEventDetails.js";
+import { composeEventHandlers } from "../internals/composeEventHandlers.js";
+import { t as runOnceAnimationsFinish } from "../runOnceAnimationsFinish-DCHzXWZU.js";
+import { n as contains } from "../dom-Crg_2R-j.js";
+import { t as createAnchorPositioning } from "../createAnchorPositioning-C-cVOPwz.js";
+import { t as createClickInteraction } from "../createClickInteraction-BYsMgvup.js";
+import { c as useFloatingTree, i as createFloatingNode, n as FloatingTreeContext, r as FloatingTreeStore, s as useFloatingParentNodeId, t as FloatingParentNodeContext } from "../FloatingTree-z1JPD1dR.js";
+import { a as createPopupPresence, o as createDismiss, t as PopupStore } from "../PopupStore-DEs3FAEe.js";
+import { n as createInitialPositioning, r as createHoverInteraction, t as safePolygon } from "../safePolygon-CAm5RJGv.js";
+import { n as createPopupAutoResize } from "../createPopupAutoResize-DO50jjNX.js";
+import { t as createTransitionStatus } from "../createTransitionStatus-BTlrerSS.js";
+import { a as triggerOpenStateMapping, d as getTabbableAfterElement, g as FocusGuard, h as tabbable, i as pressableTriggerOpenStateMapping, n as popupStateMapping, o as PopupPortal, r as popupTransitionStateMapping } from "../popupStateMapping-nKoUwoke.js";
+import { t as FocusManager } from "../FocusManager-BrbZVWME.js";
+import { t as TriggerFocusGuards } from "../TriggerFocusGuards-sbGwf45f.js";
+import { a as stopButtonInteraction, i as preventDisabledButtonKeyDown, n as handleNonNativeButtonKeyUp, r as preventButtonInteraction, t as handleNonNativeButtonKeyDown } from "../buttonSemantics-BSwDxJhh.js";
+import { t as setRef } from "../setRef-Bt70sW7c.js";
+import { n as useDirection } from "../DirectionContext-YORWLF08.js";
+import { Dynamic, Portal, escape, memo, mergeProps, scope, ssr, ssrElement, ssrHydrationKey } from "@solidjs/web";
+import { Show, createContext, createEffect, createMemo, createSignal, createUniqueId, omit, onCleanup, untrack, useContext } from "solid-js";
+//#region src/navigation-menu/store/NavigationMenuStore.ts
+var NavigationMenuStore = class extends PopupStore {
+	tree;
+	parentStore;
+	orientation;
+	delay;
+	closeDelay;
+	controlled;
+	controlledValue;
+	onValueChange;
+	valueAccessor;
+	setValueSignal;
+	reasonAccessor;
+	setReasonSignal;
+	openMethodAccessor;
+	setOpenMethodSignal;
+	activationDirectionAccessor;
+	setActivationDirectionSignal;
+	viewportElementAccessor;
+	setViewportElementSignal;
+	viewportTargetAccessor;
+	setViewportTargetSignal;
+	contentVersionAccessor;
+	setContentVersionSignal;
+	valueTriggers = /* @__PURE__ */ new Map();
+	previousTrigger = null;
+	returnFocusTarget = null;
+	constructor(options) {
+		super(options);
+		this.tree = options.tree;
+		this.parentStore = options.parentStore;
+		this.orientation = options.orientation;
+		this.delay = options.delay;
+		this.closeDelay = options.closeDelay;
+		this.controlled = options.controlled;
+		this.controlledValue = options.value;
+		this.onValueChange = options.onValueChange;
+		const [value, setValue] = createSignal(() => options.defaultValue, { ownedWrite: true });
+		this.valueAccessor = value;
+		this.setValueSignal = setValue;
+		const [reason, setReason] = createSignal(null, { ownedWrite: true });
+		this.reasonAccessor = reason;
+		this.setReasonSignal = setReason;
+		const [openMethod, setOpenMethod] = createSignal(null, { ownedWrite: true });
+		this.openMethodAccessor = openMethod;
+		this.setOpenMethodSignal = setOpenMethod;
+		const [activationDirection, setActivationDirection] = createSignal(null, { ownedWrite: true });
+		this.activationDirectionAccessor = activationDirection;
+		this.setActivationDirectionSignal = setActivationDirection;
+		const [viewportElement, setViewportElement] = createSignal(null, { ownedWrite: true });
+		this.viewportElementAccessor = viewportElement;
+		this.setViewportElementSignal = setViewportElement;
+		const [viewportTarget, setViewportTarget] = createSignal(null, { ownedWrite: true });
+		this.viewportTargetAccessor = viewportTarget;
+		this.setViewportTargetSignal = setViewportTarget;
+		const [contentVersion, setContentVersion] = createSignal(0, { ownedWrite: true });
+		this.contentVersionAccessor = contentVersion;
+		this.setContentVersionSignal = setContentVersion;
+	}
+	value() {
+		return this.controlled ? this.controlledValue() ?? null : this.valueAccessor();
+	}
+	openChangeReason() {
+		return this.reasonAccessor();
+	}
+	openMethod() {
+		return this.openMethodAccessor();
+	}
+	setOpenMethod(value) {
+		this.setOpenMethodSignal(value);
+	}
+	activationDirection() {
+		return this.open() ? this.activationDirectionAccessor() : null;
+	}
+	viewportElement() {
+		return this.viewportElementAccessor();
+	}
+	setViewportElement(element) {
+		this.setViewportElementSignal(element);
+	}
+	viewportTarget() {
+		return this.viewportTargetAccessor();
+	}
+	setViewportTarget(element) {
+		this.setViewportTargetSignal(element);
+	}
+	contentVersion() {
+		return this.contentVersionAccessor();
+	}
+	returnFocusElement() {
+		return this.returnFocusTarget?.isConnected ? this.returnFocusTarget : null;
+	}
+	touchContent() {
+		this.setContentVersionSignal((value) => value + 1);
+	}
+	registerValueTrigger(token, id, element, value) {
+		this.valueTriggers.set(token, {
+			id,
+			element,
+			value
+		});
+		this.syncValue();
+		return () => {
+			this.valueTriggers.delete(token);
+			this.syncValue();
+		};
+	}
+	updateValueTrigger(token, id, element, value) {
+		this.valueTriggers.set(token, {
+			id,
+			element,
+			value
+		});
+		this.syncValue();
+	}
+	syncValue() {
+		const value = this.value();
+		const open = value != null;
+		const registration = open ? Array.from(this.valueTriggers.values()).find((entry) => Object.is(entry.value, value)) : void 0;
+		this.update({
+			open,
+			activeTriggerId: registration?.id ?? (open ? this.state.activeTriggerId : null),
+			activeTriggerElement: registration?.element ?? (open ? this.state.activeTriggerElement : null)
+		});
+		if (!open) {
+			this.setActivationDirectionSignal(null);
+			this.previousTrigger = null;
+			this.setOpenMethodSignal(null);
+		} else if (registration) this.updateActivationDirection(registration.element);
+		this.reconcileTriggers();
+	}
+	setValue(value, details) {
+		const currentValue = this.value();
+		if (!Object.is(value, currentValue)) this.onValueChange()?.(value, details);
+		if (details.isCanceled) return false;
+		const registration = value == null ? void 0 : Array.from(this.valueTriggers.values()).find((entry) => Object.is(entry.value, value));
+		if (registration && !details.trigger) details.trigger = registration.element;
+		if (!this.controlled) this.setValueSignal(() => value);
+		this.setReasonSignal(details.reason);
+		if (value != null && details.trigger instanceof HTMLElement) {
+			this.returnFocusTarget = details.trigger;
+			this.updateActivationDirection(details.trigger);
+		}
+		const accepted = super.setOpen(value != null, details);
+		if (accepted && !this.controlled) this.syncValue();
+		if (accepted && value == null && details.reason === "link-press" && this.parentStore) this.parentStore.setValue(null, details);
+		return accepted;
+	}
+	setOpen(open, details) {
+		if (!open) return this.setValue(null, details);
+		const trigger = details.trigger;
+		const registration = Array.from(this.valueTriggers.values()).find((entry) => entry.element === trigger || entry.id === trigger?.id);
+		return registration ? this.setValue(registration.value, details) : false;
+	}
+	updateActivationDirection(trigger) {
+		const previous = this.previousTrigger;
+		this.previousTrigger = trigger;
+		if (!previous || previous === trigger || !previous.isConnected) return;
+		const previousRect = previous.getBoundingClientRect();
+		const nextRect = trigger.getBoundingClientRect();
+		if (this.orientation() === "horizontal" && nextRect.left !== previousRect.left) this.setActivationDirectionSignal(nextRect.left > previousRect.left ? "right" : "left");
+		else if (this.orientation() === "vertical" && nextRect.top !== previousRect.top) this.setActivationDirectionSignal(nextRect.top > previousRect.top ? "down" : "up");
+	}
+};
+//#endregion
+//#region src/navigation-menu/root/NavigationMenuRootContext.ts
+var MISSING_CONTEXT$4 = Symbol("NavigationMenuRootContext");
+var NavigationMenuRootContext = createContext(MISSING_CONTEXT$4);
+function useNavigationMenuRootContext(optional = false) {
+	const context = useContext(NavigationMenuRootContext);
+	if (context === MISSING_CONTEXT$4) {
+		if (optional) return;
+		throw new Error("Base UI: NavigationMenuRootContext is missing. Navigation Menu parts must be placed within <NavigationMenu.Root>.");
+	}
+	return context;
+}
+//#endregion
+//#region src/navigation-menu/root/NavigationMenuRoot.tsx
+/** Groups the parts of a navigation menu. */
+function NavigationMenuRoot(props) {
+	const parent = useNavigationMenuRootContext(true);
+	const inheritedTree = useFloatingTree();
+	const inheritedParentNodeId = useFloatingParentNodeId();
+	const internalProps = props;
+	const allProps = props;
+	const controlled = untrack(() => internalProps.value !== void 0);
+	const nested = inheritedParentNodeId !== null && parent !== void 0;
+	const tree = inheritedTree ?? new FloatingTreeStore();
+	const nodeId = createUniqueId();
+	const floatingId = createUniqueId();
+	const orientation = createMemo(() => internalProps.orientation ?? "horizontal");
+	const delay = createMemo(() => internalProps.delay ?? 50);
+	const closeDelay = createMemo(() => internalProps.closeDelay ?? 50);
+	const store = new NavigationMenuStore({
+		controlled,
+		value: () => internalProps.value,
+		defaultValue: untrack(() => internalProps.defaultValue ?? null),
+		onValueChange: () => internalProps.onValueChange,
+		controlledOpen: () => controlled ? internalProps.value != null : void 0,
+		floatingId,
+		nested,
+		nodeId,
+		onOpenChangeComplete: () => internalProps.onOpenChangeComplete,
+		orientation,
+		delay,
+		closeDelay,
+		tree,
+		parentStore: parent?.store
+	});
+	store.update({ open: untrack(() => store.value() != null) });
+	const node = createFloatingNode({
+		tree,
+		id: nodeId,
+		parentId: inheritedParentNodeId,
+		context: () => store.context.floatingRoot
+	});
+	const [rootElement, setRootElement] = createSignal(null, { ownedWrite: true });
+	const [beforeContentGuard, setBeforeContentGuard] = createSignal(null, { ownedWrite: true });
+	const [afterTriggerGuard, setAfterTriggerGuard] = createSignal(null, { ownedWrite: true });
+	const [backdropElement, setBackdropElement] = createSignal(null, { ownedWrite: true });
+	const presence = createPopupPresence(store, () => store.track().popupElement);
+	const context = {
+		store,
+		nested,
+		presence,
+		rootElement,
+		beforeContentGuard,
+		setBeforeContentGuard,
+		afterTriggerGuard,
+		setAfterTriggerGuard,
+		backdropElement,
+		setBackdropElement
+	};
+	const state = createMemo(() => ({
+		open: store.open(),
+		nested
+	}));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state()));
+	const others = omit(allProps, "actionsRef", "as", "class", "closeDelay", "defaultValue", "delay", "onOpenChangeComplete", "onValueChange", "orientation", "ref", "style", "value");
+	store.context.floatingRoot.context.data.insideElements = () => [backdropElement()];
+	const dismiss = createDismiss({
+		context: store.context.floatingRoot,
+		tree: () => tree,
+		outsidePressEvent: () => "intentional"
+	});
+	store.setInteractionProps({
+		activeTriggerProps: { onKeyDown: dismiss.onKeyDown },
+		inactiveTriggerProps: { onKeyDown: dismiss.onKeyDown },
+		popupProps: { onKeyDown: dismiss.onKeyDown }
+	});
+	createEffect(() => ({
+		value: store.value(),
+		manualUnmount: internalProps.actionsRef !== void 0
+	}), (current) => untrack(() => {
+		if (current.value == null && current.manualUnmount) store.set("preventUnmountingOnClose", true);
+		store.syncValue();
+	}));
+	const actions = { unmount: presence.forceUnmount };
+	createEffect(() => internalProps.actionsRef, (ref) => {
+		ref?.(actions);
+	});
+	let restoreFocusFrame = 0;
+	createEffect(() => ({
+		mounted: presence.mounted(),
+		open: store.open(),
+		reason: store.openChangeReason()
+	}), (current) => {
+		if (current.open || current.mounted || current.reason == null || current.reason === "trigger-hover" || current.reason === "outside-press" || current.reason === "focus-out") return;
+		restoreFocusFrame = requestAnimationFrame(() => {
+			untrack(() => store.returnFocusElement())?.focus({ preventScroll: true });
+		});
+		return () => {
+			if (typeof cancelAnimationFrame === "function") cancelAnimationFrame(restoreFocusFrame);
+		};
+	});
+	onCleanup(() => {
+		if (typeof cancelAnimationFrame === "function") cancelAnimationFrame(restoreFocusFrame);
+		store.clearInteractionProps();
+		delete store.context.floatingRoot.context.data.insideElements;
+	});
+	return NavigationMenuRootContext({
+		value: context,
+		get children() {
+			return FloatingTreeContext({
+				value: tree,
+				get children() {
+					return FloatingParentNodeContext({
+						get value() {
+							return node.id ?? null;
+						},
+						get children() {
+							return Dynamic(mergeProps({
+								get component() {
+									return props.as ?? (nested ? "div" : "nav");
+								},
+								ref: [((element) => setRootElement(element)), internalProps.ref],
+								get ["class"]() {
+									return classValue();
+								},
+								get style() {
+									return styleValue();
+								}
+							}, stateAttributes, others));
+						}
+					});
+				}
+			});
+		}
+	});
+}
+//#endregion
+//#region src/navigation-menu/composite/NavigationMenuCompositeContext.ts
+var MISSING_CONTEXT$3 = Symbol("NavigationMenuCompositeContext");
+var NavigationMenuCompositeContext = createContext(MISSING_CONTEXT$3);
+function useNavigationMenuCompositeContext() {
+	const context = useContext(NavigationMenuCompositeContext);
+	return context === MISSING_CONTEXT$3 ? void 0 : context;
+}
+function createNavigationMenuComposite(options) {
+	const [activeToken, setActiveToken] = createSignal();
+	const [version, setVersion] = createSignal(0);
+	const items = /* @__PURE__ */ new Map();
+	let nextOrder = 0;
+	let updateQueued = false;
+	function notifyItemChange() {
+		if (updateQueued) return;
+		updateQueued = true;
+		queueMicrotask(() => {
+			updateQueued = false;
+			setVersion((value) => value + 1);
+		});
+	}
+	function registerItem(item) {
+		item.order = nextOrder;
+		nextOrder += 1;
+		items.set(item.token, item);
+		notifyItemChange();
+		return () => {
+			items.delete(item.token);
+			notifyItemChange();
+		};
+	}
+	function orderedItems() {
+		version();
+		return Array.from(items.values()).filter((item) => {
+			const element = item.element();
+			return Boolean(element?.isConnected && !item.disabled() && !element.matches(":disabled"));
+		}).sort((first, second) => {
+			const firstElement = first.element();
+			const secondElement = second.element();
+			if (firstElement && secondElement && firstElement !== secondElement) {
+				const position = firstElement.compareDocumentPosition(secondElement);
+				if ((position & Node.DOCUMENT_POSITION_DISCONNECTED) === 0) {
+					if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
+					if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;
+				}
+			}
+			return first.order - second.order;
+		});
+	}
+	function findEventItem(event) {
+		const path = event.composedPath();
+		return orderedItems().find((item) => {
+			const element = item.element();
+			return Boolean(element && path.includes(element));
+		});
+	}
+	return {
+		isTabStop(item) {
+			const ordered = orderedItems();
+			return (ordered.find((entry) => entry.token === activeToken()) ?? ordered[0])?.token === item.token;
+		},
+		notifyItemChange,
+		registerItem,
+		setActiveItem(item) {
+			if (!item.disabled()) setActiveToken(item.token);
+		},
+		handleKeyDown(event) {
+			if (event.shiftKey || event.ctrlKey || event.altKey || event.metaKey) return false;
+			const forward = options.orientation() === "vertical" ? "ArrowDown" : options.direction() === "rtl" ? "ArrowLeft" : "ArrowRight";
+			if (![
+				forward,
+				options.orientation() === "vertical" ? "ArrowUp" : options.direction() === "rtl" ? "ArrowRight" : "ArrowLeft",
+				"Home",
+				"End"
+			].includes(event.key)) return false;
+			const ordered = orderedItems();
+			if (ordered.length === 0) return true;
+			const current = findEventItem(event);
+			let index = current ? ordered.indexOf(current) : -1;
+			if (event.key === "Home") index = 0;
+			else if (event.key === "End") index = ordered.length - 1;
+			else index = Math.max(0, Math.min(ordered.length - 1, index + (event.key === forward ? 1 : -1)));
+			const next = ordered[index];
+			event.preventDefault();
+			event.stopPropagation();
+			if (next) {
+				setActiveToken(next.token);
+				queueMicrotask(() => next.element()?.focus({ preventScroll: true }));
+			}
+			return true;
+		}
+	};
+}
+//#endregion
+//#region src/navigation-menu/list/NavigationMenuList.tsx
+/** Contains a list of navigation menu items. */
+function NavigationMenuList(props) {
+	const root = useNavigationMenuRootContext();
+	const direction = useDirection();
+	const internalProps = props;
+	const allProps = props;
+	const state = createMemo(() => ({ open: root.store.open() }));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state()));
+	const others = omit(allProps, "as", "class", "onKeyDown", "ref", "style");
+	const composite = createNavigationMenuComposite({
+		orientation: root.store.orientation,
+		direction
+	});
+	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => (event) => {
+		if (!root.nested) composite.handleKeyDown(event);
+	});
+	function ListElement() {
+		return Dynamic(mergeProps({
+			get component() {
+				return props.as ?? "ul";
+			},
+			ref: [internalProps.ref],
+			get ["class"]() {
+				return classValue();
+			},
+			get style() {
+				return styleValue();
+			},
+			onKeyDown
+		}, stateAttributes, others));
+	}
+	if (root.nested) return ListElement({});
+	return NavigationMenuCompositeContext({
+		value: composite,
+		get children() {
+			return ListElement({});
+		}
+	});
+}
+//#endregion
+//#region src/navigation-menu/item/NavigationMenuItemContext.ts
+var MISSING_CONTEXT$2 = Symbol("NavigationMenuItemContext");
+var NavigationMenuItemContext = createContext(MISSING_CONTEXT$2);
+function useNavigationMenuItemContext() {
+	const context = useContext(NavigationMenuItemContext);
+	if (context === MISSING_CONTEXT$2) throw new Error("Base UI: NavigationMenuItem parts must be used within a <NavigationMenu.Item>.");
+	return context;
+}
+//#endregion
+//#region src/navigation-menu/item/NavigationMenuItem.tsx
+/** An individual navigation menu item. */
+function NavigationMenuItem(props) {
+	const generatedValue = `base-ui-${createUniqueId()}`;
+	const internalProps = props;
+	const allProps = props;
+	const value = createMemo(() => internalProps.value ?? generatedValue);
+	const state = {};
+	const classValue = createMemo(() => resolveClass(props.class, state));
+	const styleValue = createMemo(() => resolveStyle(props.style, state));
+	const others = omit(allProps, "as", "class", "ref", "style", "value");
+	return NavigationMenuItemContext({
+		value: { value },
+		get children() {
+			return Dynamic(mergeProps({
+				get component() {
+					return props.as ?? "li";
+				},
+				ref: [internalProps.ref],
+				get ["class"]() {
+					return classValue();
+				},
+				get style() {
+					return styleValue();
+				}
+			}, others));
+		}
+	});
+}
+//#endregion
+//#region src/navigation-menu/trigger/NavigationMenuTrigger.tsx
+/** Opens the content associated with its navigation menu item. */
+function NavigationMenuTrigger(props) {
+	const root = useNavigationMenuRootContext();
+	const item = useNavigationMenuItemContext();
+	const composite = useNavigationMenuCompositeContext();
+	const direction = useDirection();
+	const internalProps = props;
+	const allProps = props;
+	const generatedId = `base-ui-${createUniqueId()}`;
+	const id = createMemo(() => internalProps.id ?? generatedId);
+	const disabled = createMemo(() => internalProps.disabled ?? false);
+	const nativeButton = createMemo(() => internalProps.nativeButton ?? true);
+	const [element, setElement] = createSignal(null, { ownedWrite: true });
+	const open = createMemo(() => root.store.open() && Object.is(root.store.value(), item.value()));
+	const state = createMemo(() => ({ open: open() }));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), pressableTriggerOpenStateMapping));
+	const others = omit(allProps, "as", "class", "disabled", "id", "nativeButton", "onClick", "onFocus", "onKeyDown", "onKeyUp", "onMouseDown", "onPointerDown", "ref", "style");
+	const registration = {
+		token: Symbol("NavigationMenuTrigger"),
+		order: 0,
+		element,
+		disabled
+	};
+	const triggerToken = Symbol("NavigationMenuValueTrigger");
+	const unregisterComposite = composite?.registerItem(registration);
+	let unregisterTrigger;
+	let unregisterValueTrigger;
+	let clickHandlers;
+	let pointerType = "";
+	let patientClick = true;
+	let patientTimer;
+	let focusFrame = 0;
+	createEffect(() => ({
+		element: element(),
+		id: id(),
+		value: item.value()
+	}), (current) => {
+		unregisterTrigger?.();
+		unregisterValueTrigger?.();
+		if (!current.element) return;
+		untrack(() => {
+			unregisterTrigger = root.store.registerTrigger(current.id, current.element);
+			unregisterValueTrigger = root.store.registerValueTrigger(triggerToken, current.id, current.element, current.value);
+		});
+		return () => {
+			untrack(() => {
+				unregisterTrigger?.();
+				unregisterValueTrigger?.();
+			});
+			unregisterTrigger = void 0;
+			unregisterValueTrigger = void 0;
+		};
+	});
+	createEffect(() => ({
+		open: open(),
+		reason: root.store.openChangeReason()
+	}), (current) => {
+		clearTimeout(patientTimer);
+		patientClick = current.open && current.reason === "trigger-hover";
+		if (patientClick) patientTimer = setTimeout(() => {
+			patientClick = false;
+		}, 500);
+	});
+	createEffect(() => ({
+		element: element(),
+		disabled: disabled()
+	}), () => composite?.notifyItemChange());
+	clickHandlers = createClickInteraction({
+		context: root.store.context.floatingRoot,
+		enabled: () => !disabled(),
+		stickIfOpen: () => patientClick
+	});
+	createHoverInteraction({
+		context: root.store.context.floatingRoot,
+		reference: element,
+		floating: () => root.store.track().positionerElement ?? root.store.viewportElement(),
+		tree: () => root.store.tree,
+		enabled: () => !disabled(),
+		floatingEnabled: () => !disabled(),
+		delay: () => ({ close: root.store.closeDelay() }),
+		restMs: () => root.store.open() ? 0 : root.store.delay(),
+		restOnly: () => true,
+		handleClose: () => safePolygon({ blockPointerEvents: true }),
+		mouseOnly: () => true,
+		blockPointerEventsScope: () => root.nested && !root.store.track().positionerElement ? element()?.closest("ul") : element()?.closest("ul")
+	});
+	function handlePointerDown(event) {
+		pointerType = event.pointerType;
+		clickHandlers?.onPointerDown(event);
+	}
+	function handleMouseDown(event) {
+		clickHandlers?.onMouseDown(event);
+	}
+	function handleClick(event) {
+		root.store.setOpenMethod(pointerType || (event.detail === 0 ? "keyboard" : "mouse"));
+		clickHandlers?.onClick(event);
+		pointerType = "";
+	}
+	function handleFocus() {
+		composite?.setActiveItem(registration);
+	}
+	function handleKeyDown(event) {
+		const dismissHandler = root.store.state[open() ? "activeTriggerProps" : "inactiveTriggerProps"].onKeyDown;
+		if (typeof dismissHandler === "function") dismissHandler(event);
+		if (event.defaultPrevented || disabled()) return;
+		if (composite?.handleKeyDown(event)) return;
+		if (root.nested) return;
+		const openKey = root.store.orientation() === "horizontal" ? "ArrowDown" : direction() === "rtl" ? "ArrowLeft" : "ArrowRight";
+		if (event.key === openKey) {
+			event.preventDefault();
+			event.stopPropagation();
+			root.store.setOpenMethod("keyboard");
+			if (root.store.setValue(item.value(), createChangeEventDetails("list-navigation", event, element() ?? void 0))) {
+				let attempts = 0;
+				const focusContent = () => {
+					const target = root.store.viewportTarget();
+					const first = target ? tabbable(target).find((candidate) => !candidate.hasAttribute("data-base-ui-focus-guard")) : void 0;
+					if (first) {
+						first.focus({ preventScroll: true });
+						return;
+					}
+					attempts += 1;
+					if (attempts < 4) focusFrame = requestAnimationFrame(focusContent);
+				};
+				queueMicrotask(() => {
+					focusFrame = requestAnimationFrame(focusContent);
+				});
+			}
+		}
+	}
+	const onClick = composeEventHandlers(() => untrack(() => disabled() ? preventButtonInteraction : void 0), () => internalProps.onClick, () => handleClick);
+	const onFocus = composeEventHandlers(() => internalProps.onFocus, () => handleFocus);
+	const onPointerDown = composeEventHandlers(() => untrack(() => disabled() ? preventButtonInteraction : void 0), () => internalProps.onPointerDown, () => handlePointerDown);
+	const onMouseDown = composeEventHandlers(() => untrack(() => disabled() ? stopButtonInteraction : void 0), () => internalProps.onMouseDown, () => handleMouseDown);
+	const onKeyDown = composeEventHandlers(() => untrack(() => disabled() ? preventDisabledButtonKeyDown : void 0), () => internalProps.onKeyDown, () => handleKeyDown, () => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyDown));
+	const onKeyUp = composeEventHandlers(() => untrack(() => disabled() ? stopButtonInteraction : void 0), () => internalProps.onKeyUp, () => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyUp));
+	const trigger = Dynamic(mergeProps({
+		get component() {
+			return props.as ?? "button";
+		},
+		ref: [((value) => setElement(value)), internalProps.ref],
+		get id() {
+			return id();
+		},
+		get type() {
+			return nativeButton() ? "button" : void 0;
+		},
+		get role() {
+			return nativeButton() ? void 0 : "button";
+		},
+		get tabIndex() {
+			return composite ? composite.isTabStop(registration) ? 0 : -1 : 0;
+		},
+		get disabled() {
+			return (memo(() => {
+				return !!nativeButton();
+			})() ? disabled() : nativeButton()) || void 0;
+		},
+		get ["aria-disabled"]() {
+			return !nativeButton() && disabled() ? "true" : void 0;
+		},
+		get ["aria-expanded"]() {
+			return open() ? "true" : "false";
+		},
+		get ["aria-controls"]() {
+			return memo(() => {
+				return !!open();
+			})() ? root.store.popupId() : void 0;
+		},
+		"data-base-ui-navigation-menu-trigger": "",
+		get ["data-trigger-disabled"]() {
+			return disabled() ? "" : void 0;
+		},
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		},
+		onClick,
+		onFocus,
+		onKeyDown,
+		onKeyUp,
+		onMouseDown,
+		onPointerDown
+	}, stateAttributes, others));
+	onCleanup(() => {
+		clearTimeout(patientTimer);
+		if (typeof cancelAnimationFrame === "function") cancelAnimationFrame(focusFrame);
+		unregisterComposite?.();
+		unregisterTrigger?.();
+		unregisterValueTrigger?.();
+	});
+	return TriggerFocusGuards({
+		get context() {
+			return root.store.context.floatingRoot;
+		},
+		get enabled() {
+			return memo(() => {
+				return !!open();
+			})() ? root.presence.mounted() : open();
+		},
+		trigger: element,
+		positioner: () => root.store.track().positionerElement ?? root.store.viewportElement(),
+		get beforeContentGuard() {
+			return root.beforeContentGuard;
+		},
+		get afterGuardRef() {
+			return root.setAfterTriggerGuard;
+		},
+		children: trigger
+	});
+}
+//#endregion
+//#region src/navigation-menu/icon/NavigationMenuIcon.tsx
+/** Indicates that a navigation menu trigger opens content. */
+function NavigationMenuIcon(props) {
+	const root = useNavigationMenuRootContext();
+	const item = useNavigationMenuItemContext();
+	const internalProps = props;
+	const allProps = props;
+	const state = createMemo(() => ({ open: root.store.open() && Object.is(root.store.value(), item.value()) }));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), triggerOpenStateMapping));
+	const others = omit(allProps, "as", "class", "ref", "style");
+	const component = untrack(() => props.as);
+	if (!component) return ssrElement("span", () => {
+		return mergeProps({
+			"aria-hidden": "true",
+			get ["class"]() {
+				return classValue();
+			},
+			get style() {
+				return styleValue();
+			}
+		}, stateAttributes, others);
+	}, () => {
+		return () => {
+			return escape(props.children ?? "▼");
+		};
+	}, true);
+	return Dynamic(mergeProps({
+		component,
+		ref: [internalProps.ref],
+		"aria-hidden": "true",
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		}
+	}, stateAttributes, others, { get children() {
+		return props.children ?? "▼";
+	} }));
+}
+//#endregion
+//#region src/navigation-menu/utils/mergeNavigationMenuStyles.ts
+function mergeNavigationMenuStyles(internal, external) {
+	if (typeof external === "string") {
+		const serialized = Object.entries(internal).filter((entry) => entry[1] != null).map(([property, value]) => `${property}:${String(value)}`).join(";");
+		return serialized ? `${serialized};${external}` : external;
+	}
+	return {
+		...internal,
+		...external || void 0
+	};
+}
+//#endregion
+//#region src/navigation-menu/content/NavigationMenuContent.tsx
+var contentStateMapping = {
+	...popupTransitionStateMapping,
+	activationDirection: (value) => value ? { "data-activation-direction": value } : null
+};
+/** Content associated with a navigation menu item. */
+function NavigationMenuContent(props) {
+	const root = useNavigationMenuRootContext();
+	const item = useNavigationMenuItemContext();
+	const direction = useDirection();
+	const internalProps = props;
+	const allProps = props;
+	const open = createMemo(() => root.presence.mounted() && Object.is(root.store.value(), item.value()));
+	const transition = createTransitionStatus(open);
+	const [element, setElement] = createSignal(null, { ownedWrite: true });
+	const [hasPortaled, setHasPortaled] = createSignal(false, { ownedWrite: true });
+	const composite = createNavigationMenuComposite({
+		orientation: () => "vertical",
+		direction
+	});
+	const state = createMemo(() => ({
+		open: open(),
+		transitionStatus: transition.transitionStatus(),
+		activationDirection: root.store.activationDirection()
+	}));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => mergeNavigationMenuStyles(!open() && transition.mounted() ? {
+		position: "absolute",
+		top: 0,
+		left: 0
+	} : {}, resolveStyle(props.style, state())));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), contentStateMapping));
+	const others = omit(allProps, "as", "class", "keepMounted", "onKeyDown", "ref", "style");
+	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => (event) => composite.handleKeyDown(event));
+	createEffect(() => ({
+		open: open(),
+		mounted: transition.mounted(),
+		element: element()
+	}), (current) => {
+		if (!current.mounted || current.open) return;
+		if (!current.element) {
+			queueMicrotask(() => transition.setMounted(false));
+			return;
+		}
+		const controller = new AbortController();
+		runOnceAnimationsFinish(current.element, () => transition.setMounted(false), controller.signal);
+		return () => controller.abort();
+	});
+	createEffect(() => root.presence.mounted(), (mounted) => {
+		if (!mounted) transition.setMounted(false);
+	});
+	createEffect(() => ({
+		target: root.store.viewportTarget(),
+		open: open()
+	}), (current) => {
+		if (current.target) setHasPortaled(true);
+		if (current.open) untrack(() => root.store.touchContent());
+	});
+	createEffect(() => element(), (current) => {
+		if (!current || typeof MutationObserver === "undefined") return;
+		const observer = new MutationObserver(() => root.store.touchContent());
+		observer.observe(current, {
+			attributes: true,
+			childList: true,
+			subtree: true,
+			characterData: true,
+			attributeFilter: ["hidden"]
+		});
+		return () => observer.disconnect();
+	});
+	onCleanup(() => {
+		if (untrack(element)) setElement(null);
+	});
+	function ContentElement() {
+		return NavigationMenuCompositeContext({
+			value: composite,
+			get children() {
+				return Dynamic(mergeProps({
+					get component() {
+						return props.as ?? "div";
+					},
+					ref: [((value) => setElement(value)), internalProps.ref],
+					get hidden() {
+						return (memo(() => {
+							return !!(internalProps.keepMounted ?? false);
+						})() ? !transition.mounted() : internalProps.keepMounted ?? false) || void 0;
+					},
+					get inert() {
+						return memo(() => {
+							return !open();
+						})() && transition.mounted() || void 0;
+					},
+					get ["class"]() {
+						return classValue();
+					},
+					get style() {
+						return styleValue();
+					},
+					onKeyDown
+				}, stateAttributes, others));
+			}
+		});
+	}
+	return Show({
+		get when() {
+			return memo(() => {
+				return !!root.store.viewportTarget();
+			})() ? transition.mounted() || internalProps.keepMounted : root.store.viewportTarget();
+		},
+		get fallback() {
+			return Show({
+				get when() {
+					return memo(() => {
+						return !!internalProps.keepMounted;
+					})() ? !hasPortaled() : internalProps.keepMounted;
+				},
+				get children() {
+					return ContentElement({});
+				}
+			});
+		},
+		get children() {
+			return Portal({
+				get mount() {
+					return root.store.viewportTarget();
+				},
+				get children() {
+					return ContentElement({});
+				}
+			});
+		}
+	});
+}
+//#endregion
+//#region src/navigation-menu/link/NavigationMenuLink.tsx
+/** A link within the navigation menu. */
+function NavigationMenuLink(props) {
+	const root = useNavigationMenuRootContext();
+	const composite = useNavigationMenuCompositeContext();
+	const internalProps = props;
+	const allProps = props;
+	const [element, setElement] = createSignal(null, { ownedWrite: true });
+	const disabled = () => false;
+	const registration = {
+		token: Symbol("NavigationMenuLink"),
+		order: 0,
+		element,
+		disabled
+	};
+	const unregister = composite?.registerItem(registration);
+	const state = createMemo(() => ({ active: internalProps.active ?? false }));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state()));
+	const others = omit(allProps, "active", "as", "class", "closeOnClick", "onClick", "onFocus", "ref", "style");
+	createEffect(element, () => composite?.notifyItemChange());
+	const onFocus = composeEventHandlers(() => internalProps.onFocus, () => () => composite?.setActiveItem(registration));
+	const onClick = composeEventHandlers(() => internalProps.onClick, () => (event) => {
+		if (internalProps.closeOnClick) root.store.setValue(null, createChangeEventDetails(linkPress, event));
+	});
+	onCleanup(() => unregister?.());
+	const component = untrack(() => props.as);
+	if (!component) return ssrElement("a", () => {
+		return mergeProps({
+			get ["aria-current"]() {
+				return state().active ? "page" : void 0;
+			},
+			get tabIndex() {
+				return composite ? composite.isTabStop(registration) ? 0 : -1 : void 0;
+			},
+			get ["class"]() {
+				return classValue();
+			},
+			get style() {
+				return styleValue();
+			}
+		}, stateAttributes, others);
+	}, void 0, true);
+	return Dynamic(mergeProps({
+		component,
+		ref: [((value) => setElement(value)), internalProps.ref],
+		get ["aria-current"]() {
+			return state().active ? "page" : void 0;
+		},
+		get tabIndex() {
+			return composite ? composite.isTabStop(registration) ? 0 : -1 : void 0;
+		},
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		},
+		onClick,
+		onFocus
+	}, stateAttributes, others));
+}
+//#endregion
+//#region src/navigation-menu/portal/NavigationMenuPortalContext.ts
+var MISSING_CONTEXT$1 = Symbol("NavigationMenuPortalContext");
+var NavigationMenuPortalContext = createContext(MISSING_CONTEXT$1);
+function useNavigationMenuPortalContext() {
+	const context = useContext(NavigationMenuPortalContext);
+	if (context === MISSING_CONTEXT$1) throw new Error("Base UI: <NavigationMenu.Portal> is missing.");
+	return context;
+}
+//#endregion
+//#region src/navigation-menu/portal/NavigationMenuPortal.tsx
+/** Moves the navigation menu popup into a portal. */
+function NavigationMenuPortal(props) {
+	const root = useNavigationMenuRootContext();
+	const internalProps = props;
+	const allProps = props;
+	const keepMounted = createMemo(() => internalProps.keepMounted ?? false);
+	const shouldRender = createMemo(() => root.presence.mounted() || keepMounted());
+	const state = {};
+	const classValue = createMemo(() => resolveClass(props.class, state));
+	const styleValue = createMemo(() => resolveStyle(props.style, state));
+	const others = omit(allProps, "as", "class", "container", "keepMounted", "ref", "style");
+	const context = { keepMounted };
+	return Show({
+		get when() {
+			return shouldRender();
+		},
+		get children() {
+			return NavigationMenuPortalContext({
+				value: context,
+				get children() {
+					return PopupPortal(mergeProps({
+						get as() {
+							return props.as;
+						},
+						get container() {
+							return internalProps.container;
+						},
+						ref: (element) => setRef(internalProps.ref, element),
+						get ["class"]() {
+							return classValue();
+						},
+						get style() {
+							return styleValue();
+						}
+					}, others, { get children() {
+						return props.children;
+					} }));
+				}
+			});
+		}
+	});
+}
+//#endregion
+//#region src/navigation-menu/backdrop/NavigationMenuBackdrop.tsx
+/** A presentational backdrop beneath the navigation menu popup. */
+function NavigationMenuBackdrop(props) {
+	const root = useNavigationMenuRootContext();
+	const internalProps = props;
+	const allProps = props;
+	const state = createMemo(() => ({
+		open: root.store.open(),
+		transitionStatus: root.store.track().transitionStatus
+	}));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => mergeNavigationMenuStyles({
+		"user-select": "none",
+		"-webkit-user-select": "none"
+	}, resolveStyle(props.style, state())));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), popupTransitionStateMapping));
+	const others = omit(allProps, "as", "class", "ref", "style");
+	let backdrop = null;
+	onCleanup(() => {
+		if (root.backdropElement() === backdrop) root.setBackdropElement(null);
+	});
+	return Dynamic(mergeProps({
+		get component() {
+			return props.as ?? "div";
+		},
+		ref: [((element) => {
+			backdrop = element;
+			root.setBackdropElement(element);
+		}), internalProps.ref],
+		role: "presentation",
+		get hidden() {
+			return !root.presence.mounted();
+		},
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		}
+	}, stateAttributes, others));
+}
+//#endregion
+//#region src/navigation-menu/positioner/NavigationMenuPositionerContext.ts
+var MISSING_CONTEXT = Symbol("NavigationMenuPositionerContext");
+var NavigationMenuPositionerContext = createContext(MISSING_CONTEXT);
+function useNavigationMenuPositionerContext(optional = false) {
+	const context = useContext(NavigationMenuPositionerContext);
+	if (context === MISSING_CONTEXT) {
+		if (optional) return;
+		throw new Error("Base UI: NavigationMenuPositionerContext is missing. NavigationMenuPositioner parts must be placed within <NavigationMenu.Positioner>.");
+	}
+	return context;
+}
+//#endregion
+//#region src/navigation-menu/positioner/NavigationMenuPositioner.tsx
+/** Positions the navigation menu against its active trigger. */
+function NavigationMenuPositioner(props) {
+	useNavigationMenuPortalContext();
+	const root = useNavigationMenuRootContext();
+	const direction = useDirection();
+	const internalProps = props;
+	const allProps = props;
+	const [element, setElement] = createSignal(null, { ownedWrite: true });
+	const [resizing, setResizing] = createSignal(false, { ownedWrite: true });
+	const reference = createMemo(() => resolveAnchor(internalProps.anchor) ?? root.store.context.floatingRoot.referenceElement());
+	const positioning = createAnchorPositioning({
+		reference,
+		floating: element,
+		mounted: root.presence.mounted,
+		direction,
+		positionMethod: () => internalProps.positionMethod ?? "absolute",
+		side: () => internalProps.side ?? (root.nested ? "inline-end" : "bottom"),
+		sideOffset: () => internalProps.sideOffset ?? 0,
+		align: () => internalProps.align ?? (root.nested ? "start" : "center"),
+		alignOffset: () => internalProps.alignOffset ?? 0,
+		collisionBoundary: () => internalProps.collisionBoundary ?? "clipping-ancestors",
+		collisionPadding: () => internalProps.collisionPadding ?? 5,
+		arrowPadding: () => internalProps.arrowPadding ?? 5,
+		sticky: () => internalProps.sticky ?? false,
+		disableAnchorTracking: () => internalProps.disableAnchorTracking ?? false,
+		collisionAvoidance: () => internalProps.collisionAvoidance ?? { fallbackAxisSide: root.nested ? "end" : "none" },
+		shiftRootBoundary: () => "layoutViewport",
+		adaptiveOriginMiddleware: () => root.store.track().adaptiveOriginMiddleware
+	});
+	const initialPositioning = createInitialPositioning(() => root.store.open(), () => positioning.state().isPositioned);
+	const state = createMemo(() => ({
+		open: root.store.open(),
+		side: positioning.renderedSide(),
+		align: positioning.renderedAlign(),
+		anchorHidden: positioning.anchorHidden(),
+		instant: resizing() ? "resize" : initialPositioning() ? "initial" : void 0
+	}));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => mergeNavigationMenuStyles({
+		...positioning.styles(),
+		"pointer-events": root.store.open() ? void 0 : "none"
+	}, resolveStyle(props.style, state())));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), popupStateMapping));
+	const others = omit(allProps, "align", "alignOffset", "anchor", "arrowPadding", "as", "class", "collisionAvoidance", "collisionBoundary", "collisionPadding", "disableAnchorTracking", "positionMethod", "ref", "side", "sideOffset", "sticky", "style");
+	let resizeTimer;
+	createPopupAutoResize({
+		popup: () => root.store.track().popupElement,
+		positioner: element,
+		mounted: root.presence.mounted,
+		content: () => ({
+			value: root.store.value(),
+			version: root.store.contentVersion()
+		}),
+		side: positioning.renderedSide,
+		direction
+	});
+	createEffect(() => positioning.state().placement, (placement) => {
+		root.store.context.floatingRoot.context.data.placement = placement;
+	});
+	createEffect(() => ({
+		element: element(),
+		open: root.store.open()
+	}), (current) => {
+		if (!current.element || !current.open) return;
+		const onResize = () => {
+			setResizing(true);
+			clearTimeout(resizeTimer);
+			resizeTimer = setTimeout(() => setResizing(false), 100);
+			root.store.touchContent();
+		};
+		current.element.ownerDocument.defaultView?.addEventListener("resize", onResize);
+		return () => current.element?.ownerDocument.defaultView?.removeEventListener("resize", onResize);
+	});
+	onCleanup(() => {
+		clearTimeout(resizeTimer);
+		delete root.store.context.floatingRoot.context.data.placement;
+		if (root.store.state.positionerElement === untrack(element)) root.store.setPositionerElement(null);
+	});
+	return NavigationMenuPositionerContext({
+		value: positioning,
+		get children() {
+			return Dynamic(mergeProps({
+				get component() {
+					return props.as ?? "div";
+				},
+				ref: [((value) => {
+					setElement(value);
+					root.store.setPositionerElement(value);
+				}), internalProps.ref],
+				role: "presentation",
+				get hidden() {
+					return !root.presence.mounted();
+				},
+				get inert() {
+					return !root.store.open() || void 0;
+				},
+				get ["class"]() {
+					return classValue();
+				},
+				get style() {
+					return styleValue();
+				}
+			}, stateAttributes, others));
+		}
+	});
+}
+function resolveAnchor(anchor) {
+	if (typeof anchor === "function") return anchor();
+	if (anchor && "current" in anchor) return anchor.current;
+	return anchor;
+}
+//#endregion
+//#region src/navigation-menu/popup/NavigationMenuPopup.tsx
+/** A container for the navigation menu viewport. */
+function NavigationMenuPopup(props) {
+	const root = useNavigationMenuRootContext();
+	const positioner = useNavigationMenuPositionerContext();
+	const internalProps = props;
+	const allProps = props;
+	const id = createMemo(() => internalProps.id ?? root.store.context.floatingId);
+	const state = createMemo(() => ({
+		open: root.store.open(),
+		transitionStatus: root.store.track().transitionStatus,
+		side: positioner.renderedSide(),
+		align: positioner.renderedAlign(),
+		anchorHidden: positioner.anchorHidden()
+	}));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const originStyle = createMemo(() => {
+		const side = positioner.renderedSide();
+		const physicalLeft = side === "left" || side === "inline-start";
+		return side === "top" || physicalLeft ? {
+			position: "absolute",
+			[side === "top" ? "bottom" : "top"]: "0",
+			[physicalLeft ? "right" : "left"]: "0"
+		} : {};
+	});
+	const styleValue = createMemo(() => mergeNavigationMenuStyles(originStyle(), resolveStyle(props.style, state())));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), popupTransitionStateMapping));
+	const others = omit(allProps, "as", "class", "id", "onKeyDown", "ref", "style");
+	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => (event) => {
+		const handler = root.store.state.popupProps.onKeyDown;
+		if (typeof handler === "function") handler(event);
+	});
+	let popupElement = null;
+	createEffect(() => id(), (value) => root.store.setPopupId(value));
+	onCleanup(() => {
+		if (root.store.state.popupElement === popupElement) root.store.setPopupElement(null);
+	});
+	const returnFocus = () => untrack(() => {
+		const reason = root.store.openChangeReason();
+		return reason !== "trigger-hover" && reason !== "outside-press" && reason !== "focus-out";
+	});
+	return FocusManager({
+		get context() {
+			return root.store.context.floatingRoot;
+		},
+		get tree() {
+			return root.store.tree;
+		},
+		get disabled() {
+			return !root.presence.mounted();
+		},
+		initialFocus: false,
+		returnFocus,
+		restoreFocus: "popup",
+		modal: false,
+		get openInteractionType() {
+			return root.store.openMethod();
+		},
+		get previousFocusableElement() {
+			return root.store.track().activeTriggerElement;
+		},
+		get nextFocusableElement() {
+			return root.afterTriggerGuard;
+		},
+		get beforeContentGuardRef() {
+			return root.setBeforeContentGuard;
+		},
+		get children() {
+			return Dynamic(mergeProps({
+				get component() {
+					return props.as ?? "nav";
+				},
+				ref: [((element) => {
+					popupElement = element;
+					root.store.setPopupElement(element);
+				}), internalProps.ref],
+				get id() {
+					return id();
+				},
+				tabIndex: -1,
+				"data-base-ui-focusable": "",
+				get ["class"]() {
+					return classValue();
+				},
+				get style() {
+					return styleValue();
+				},
+				onKeyDown
+			}, stateAttributes, others));
+		}
+	});
+}
+//#endregion
+//#region src/navigation-menu/viewport/NavigationMenuViewport.tsx
+var _tmpl$ = [
+	"<div",
+	">",
+	"</div>"
+];
+/** The clipping viewport containing the active navigation menu content. */
+function NavigationMenuViewport(props) {
+	var _v$, _v$2;
+	const root = useNavigationMenuRootContext();
+	const positioned = useNavigationMenuPositionerContext(true) !== void 0;
+	const internalProps = props;
+	const allProps = props;
+	const state = {};
+	const classValue = createMemo(() => resolveClass(props.class, state));
+	const styleValue = createMemo(() => resolveStyle(props.style, state));
+	const others = omit(allProps, "as", "children", "class", "ref", "style");
+	let viewport = null;
+	let target = null;
+	let afterGuard = null;
+	const setViewport = (element) => {
+		viewport = element;
+		root.store.setViewportElement(element);
+		if (positioned) {
+			target = element;
+			root.store.setViewportTarget(element);
+		}
+	};
+	onCleanup(() => {
+		if (root.store.viewportElement() === viewport) root.store.setViewportElement(null);
+		if (root.store.viewportTarget() === target) root.store.setViewportTarget(null);
+		if (!positioned && root.beforeContentGuard()) root.setBeforeContentGuard(null);
+	});
+	const element = Dynamic(mergeProps({
+		get component() {
+			return props.as ?? "div";
+		},
+		ref: [setViewport, internalProps.ref],
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		}
+	}, others, { get children() {
+		return Show({
+			when: !positioned,
+			get fallback() {
+				return props.children;
+			},
+			get children() {
+				return _v$ = ssrHydrationKey(), _v$2 = scope(() => {
+					return escape(props.children);
+				}), ssr(_tmpl$, _v$, _v$2);
+			}
+		});
+	} }));
+	if (positioned) return element;
+	return [
+		FocusGuard({
+			ref: (guard) => root.setBeforeContentGuard(guard),
+			onFocus: (event) => {
+				const currentTarget = root.store.viewportTarget();
+				if (!currentTarget) return;
+				if (contains(currentTarget, event.relatedTarget)) root.store.track().activeTriggerElement?.focus();
+				else tabbable(currentTarget)[0]?.focus();
+			}
+		}),
+		element,
+		FocusGuard({
+			ref: (guard) => afterGuard = guard,
+			onFocus: (event) => {
+				const currentTarget = root.store.viewportTarget();
+				if (!currentTarget) return;
+				if (contains(currentTarget, event.relatedTarget)) getTabbableAfterElement(afterGuard)?.focus();
+				else {
+					const elements = tabbable(currentTarget);
+					elements[elements.length - 1]?.focus();
+				}
+			}
+		})
+	];
+}
+//#endregion
+//#region src/navigation-menu/arrow/NavigationMenuArrow.tsx
+/** Displays an element pointing toward the active navigation trigger. */
+function NavigationMenuArrow(props) {
+	const root = useNavigationMenuRootContext();
+	const positioner = useNavigationMenuPositionerContext();
+	const internalProps = props;
+	const allProps = props;
+	const state = createMemo(() => ({
+		open: root.store.open(),
+		side: positioner.renderedSide(),
+		align: positioner.renderedAlign(),
+		uncentered: positioner.arrowUncentered()
+	}));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => mergeNavigationMenuStyles(positioner.arrowStyles(), resolveStyle(props.style, state())));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), popupStateMapping));
+	const others = omit(allProps, "as", "class", "ref", "style");
+	let arrow = null;
+	onCleanup(() => {
+		if (arrow) positioner.setArrowElement(null);
+	});
+	return Dynamic(mergeProps({
+		get component() {
+			return props.as ?? "div";
+		},
+		ref: [((element) => {
+			arrow = element;
+			positioner.setArrowElement(element);
+		}), internalProps.ref],
+		"aria-hidden": "true",
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		}
+	}, stateAttributes, others));
+}
+//#endregion
+//#region src/navigation-menu/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Arrow: () => NavigationMenuArrow,
+	Backdrop: () => NavigationMenuBackdrop,
+	Content: () => NavigationMenuContent,
+	Icon: () => NavigationMenuIcon,
+	Item: () => NavigationMenuItem,
+	Link: () => NavigationMenuLink,
+	List: () => NavigationMenuList,
+	Popup: () => NavigationMenuPopup,
+	Portal: () => NavigationMenuPortal,
+	Positioner: () => NavigationMenuPositioner,
+	Root: () => NavigationMenuRoot,
+	Trigger: () => NavigationMenuTrigger,
+	Viewport: () => NavigationMenuViewport
+});
+//#endregion
+export { index_parts_exports as NavigationMenu };