ropav 0.1.6 → 0.1.7

package/dist/dropdown-menu.js

@@ -1,41 +1,49 @@
 import './dropdown-menu.css';
 import { t as useControllableValue } from "./useControllableValue.js";
-import { n as useStylesApi, t as presence } from "./styles-api.js";
-import { t as useRequiredInject } from "./useRequiredInject.js";
+import { t as useStylesApi } from "./styles-api.js";
+import { n as toPresenceAttribute, t as toOptionalAttribute } from "./attributes.js";
 import { t as bem } from "./bem.js";
+import { t as isElement } from "./query.js";
+import { t as useRequiredInject } from "./useRequiredInject.js";
+import { t as clamp } from "./number.js";
+import { a as snapshotAttributes, i as restoreAttributes } from "./attributes2.js";
+import { t as resolveHTMLElementRef } from "./componentRef.js";
+import { n as isEventWithinElement, r as isEventWithinTargets, t as createCancelableCustomEvent } from "./events.js";
 import { n as useOverlayZIndex, r as useOverlayLayer } from "./useOverlayZIndex.js";
-import { n as useFloatingPosition, r as useFloatingTarget, t as isElementReference } from "./useFloatingPosition.js";
-import { n as useTeleportPositioningKey, r as useTeleportTarget, t as provideTeleportTarget } from "./useTeleportTarget.js";
-import { n as getNextEnabledIndex, r as useTypeahead, t as getEnabledIndexes } from "./collectionNavigation.js";
+import { n as useFloatingTarget, t as useFloatingPosition } from "./useFloatingPosition.js";
+import { n as useTeleportTarget, t as provideTeleportTarget } from "./useTeleportTarget.js";
+import { t as useTypeahead } from "./useTypeahead.js";
 import { t as chevron_right_default } from "./chevron-right.js";
-import { VaporTeleport, VaporTransition, child, computed, createComponent, createComponentWithFallback, createDynamicComponent, createFor, createIf, createSlot, createTemplateRefSetter, defineVaporComponent, extend, isRef, mergeProps, nextTick, onBeforeUnmount, onMounted, onUnmounted, provide, ref, renderEffect, resolveComponent, setAttr, setDynamicProps, setInsertionState, setStaticTemplateRef, setStyle, setTemplateRefBinding, setText, shallowRef, template, toDisplayString, txt, unref, useAttrs, useId, watch } from "vue";
-//#region src/components/dropdown-menu/dropdown-menu-primitive-core.ts
-var rootKey = Symbol("dropdown-menu-root");
-var menuKey = Symbol("dropdown-menu-content");
-var subKey = Symbol("dropdown-menu-sub");
-var radioGroupKey = Symbol("dropdown-menu-radio-group");
-var checkedKey = Symbol("dropdown-menu-checked");
-function optionalAttr(value) {
-	return value || void 0;
+import { VaporTeleport, VaporTransition, child, computed, createComponent, createComponentWithFallback, createDynamicComponent, createFor, createIf, createSlot, createTemplateRefSetter, defineVaporComponent, extend, isRef, mergeProps, nextTick, onBeforeUnmount, onMounted, onUnmounted, provide, ref, renderEffect, resolveComponent, setAttr, setDynamicProps, setInsertionState, setStyle, setTemplateRefBinding, setText, shallowRef, template, toDisplayString, txt, unref, useAttrs, useId, watch } from "vue";
+//#region src/utils/geometry.ts
+function getClientPoint(event) {
+	return {
+		x: event.clientX,
+		y: event.clientY
+	};
 }
-function getFocusTarget(options) {
-	if (typeof options === "string") return options;
-	return options?.focus ?? "first";
+function hasMeasuredRect(rect) {
+	return rect.width > 0 || rect.height > 0;
+}
+function isPointInRect(point, rect, padding = 0) {
+	return point.x >= rect.left - padding && point.x <= rect.right + padding && point.y >= rect.top - padding && point.y <= rect.bottom + padding;
+}
+function getTriangleArea(a, b, c) {
+	return Math.abs((a.x * (b.y - c.y) + b.x * (c.y - a.y) + c.x * (a.y - b.y)) / 2);
 }
-function toHTMLElement(value, fallbackId) {
-	if (typeof HTMLElement !== "undefined" && value instanceof HTMLElement) return value;
-	if (typeof HTMLElement === "undefined") return null;
-	const vdomElement = value?.$el;
-	if (vdomElement instanceof HTMLElement) return vdomElement;
-	const vaporBlock = value?.block;
-	if (vaporBlock instanceof HTMLElement) return vaporBlock;
-	return fallbackId && typeof document !== "undefined" ? document.getElementById(fallbackId) : null;
+function isPointInTriangle(point, triangle, tolerance = .5) {
+	const [a, b, c] = triangle;
+	const area = getTriangleArea(a, b, c);
+	const area1 = getTriangleArea(point, b, c);
+	const area2 = getTriangleArea(a, point, c);
+	const area3 = getTriangleArea(a, b, point);
+	return Math.abs(area - (area1 + area2 + area3)) < tolerance;
 }
-function resolveHTMLElementRef(value, fallbackId, resolve) {
-	const element = toHTMLElement(value, fallbackId);
-	resolve(element);
-	if (element || !value) return;
-	nextTick(() => resolve(toHTMLElement(value, fallbackId)));
+function clampPointToRect(point, rect) {
+	return {
+		x: clamp(point.x, rect.left, rect.right),
+		y: clamp(point.y, rect.top, rect.bottom)
+	};
 }
 function createPointRect(point) {
 	return {
@@ -50,202 +58,72 @@ function createPointRect(point) {
 		toJSON: () => ({})
 	};
 }
+//#endregion
+//#region src/components/dropdown-menu/dropdownMenuContext.ts
+var rootKey = Symbol("dropdown-menu-root");
+var menuKey = Symbol("dropdown-menu-content");
+var subKey = Symbol("dropdown-menu-sub");
+var radioGroupKey = Symbol("dropdown-menu-radio-group");
+var checkedKey = Symbol("dropdown-menu-checked");
 function createVirtualAnchor(point) {
 	return { getBoundingClientRect: () => createPointRect(point) };
 }
-function createCustomEvent(type, detail, originalEvent) {
-	const target = originalEvent.target;
-	return new (((target instanceof Node ? target.ownerDocument?.defaultView : null)?.CustomEvent) ?? CustomEvent)(type, {
-		bubbles: false,
-		cancelable: true,
-		detail
-	});
-}
 function createSelectEvent(originalEvent, value) {
-	return createCustomEvent("dropdown-menu-select", {
+	return createCancelableCustomEvent("dropdown-menu-select", {
 		originalEvent,
 		value
 	}, originalEvent);
 }
-function createOutsideEvent(originalEvent) {
-	return createCustomEvent("dropdown-menu-interact-outside", { originalEvent }, originalEvent);
-}
-function sortItems(items) {
-	return [...items].sort((left, right) => {
-		const leftElement = left.element();
-		const rightElement = right.element();
-		if (!leftElement || !rightElement || leftElement === rightElement) return 0;
-		const position = leftElement.compareDocumentPosition(rightElement);
-		if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
-		if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;
-		return 0;
-	});
-}
-function getPlacementSide(placement) {
-	return placement.split("-")[0];
-}
-function getOpenDirection(sub) {
-	return getPlacementSide(sub.actualPlacement.value) === "left" ? "ArrowLeft" : "ArrowRight";
-}
-function getCloseDirection(menu) {
-	return getPlacementSide(menu.actualPlacement.value) === "left" ? "ArrowRight" : "ArrowLeft";
-}
-function blockDocumentClick(event) {
-	if (event.cancelable) event.preventDefault();
-	event.stopPropagation();
-	document.removeEventListener("click", blockDocumentClick, true);
-}
-function blockNextDocumentClick() {
-	if (typeof document === "undefined") return;
-	document.addEventListener("click", blockDocumentClick, true);
-	window.setTimeout(() => document.removeEventListener("click", blockDocumentClick, true), 1e3);
-}
 function createMenuContext(options) {
-	const items = shallowRef([]);
-	const activeId = ref(null);
-	const submenus = /* @__PURE__ */ new Set();
-	function getEnabledItems() {
-		return sortItems(items.value).filter((item) => !item.disabled());
-	}
-	function registerItem(item) {
-		items.value = [...items.value.filter((current) => current.id !== item.id), item];
-		if ((options.parentSub?.isOpen.value ?? options.root.isOpen.value) && activeId.value == null && !item.disabled()) {
-			activeId.value = item.id;
-			nextTick(() => {
-				options.element.value?.focus();
-				item.element()?.scrollIntoView?.({ block: "nearest" });
-			});
-		}
-	}
-	function unregisterItem(id) {
-		items.value = items.value.filter((item) => item.id !== id);
-		if (activeId.value === id) activeId.value = null;
-	}
-	function registerSub(sub) {
-		submenus.add(sub);
-	}
-	function unregisterSub(sub) {
-		submenus.delete(sub);
-	}
-	function closeSubmenus(except) {
-		for (const submenu of submenus) if (submenu !== except) submenu.close(false);
-	}
-	function setActive(id) {
-		const item = items.value.find((current) => current.id === id);
-		if (!item || item.disabled()) return;
-		activeId.value = id;
-		nextTick(() => item.element()?.scrollIntoView?.({ block: "nearest" }));
-	}
-	function focus(target = "first") {
-		const enabledItems = getEnabledItems();
-		const item = target === "last" ? enabledItems[enabledItems.length - 1] : enabledItems[0];
-		if (!item) {
-			activeId.value = null;
-			options.element.value?.focus();
-			return false;
-		}
-		activeId.value = item.id;
-		options.element.value?.focus();
-		item.element()?.scrollIntoView?.({ block: "nearest" });
-		return true;
-	}
-	function focusElement() {
-		options.element.value?.focus();
-	}
-	function move(direction) {
-		const enabledItems = getEnabledItems();
-		if (enabledItems.length === 0) return;
-		const currentIndex = enabledItems.findIndex((item) => item.id === activeId.value);
-		const item = enabledItems[((currentIndex < 0 ? direction === 1 ? -1 : 0 : currentIndex) + direction + enabledItems.length) % enabledItems.length];
-		if (item) setActive(item.id);
-	}
-	const typeahead = useTypeahead({
-		items: () => sortItems(items.value),
-		activeIndex: () => sortItems(items.value).findIndex((item) => item.id === activeId.value),
-		getKey: (item) => item.id,
-		getTextValue: (item) => item.textValue(),
-		isDisabled: (item) => item.disabled(),
-		onMatch: (item) => setActive(item.id)
+	const id = options.parentSub?.menuId ?? options.root.interaction.rootMenuId;
+	const interaction = options.root.interaction;
+	const activeId = interaction.getActiveId(id);
+	const cleanupMenu = interaction.registerMenu({
+		id,
+		parentItemId: () => options.parentSub?.trigger.value?.id,
+		element: () => options.element.value,
+		placement: () => options.actualPlacement.value,
+		isOpen: () => options.parentSub?.isOpen.value ?? options.root.isOpen.value,
+		setOpen: options.parentSub?.setOpen,
+		stopKeyPropagation: true,
+		onEscape: options.onEscape
 	});
-	watch(computed(() => options.parentSub?.isOpen.value ?? options.root.isOpen.value), (open) => {
-		if (!open) typeahead.reset();
-	}, { flush: "sync" });
-	function onHorizontalKeydown(event, active) {
-		if (options.parentSub && event.key === getCloseDirection(context)) {
-			event.preventDefault();
-			event.stopPropagation();
-			options.parentSub.close(true);
-			return;
-		}
-		if (!active?.submenu || event.key !== getOpenDirection(active.submenu)) return;
-		event.preventDefault();
-		event.stopPropagation();
-		active.submenu.open("first");
-	}
-	function onKeydown(event) {
-		if (typeahead.handleKey(event)) {
-			event.stopPropagation();
-			return;
-		}
-		const active = items.value.find((item) => item.id === activeId.value);
-		switch (event.key) {
-			case "ArrowDown":
-				event.preventDefault();
-				event.stopPropagation();
-				move(1);
-				break;
-			case "ArrowUp":
-				event.preventDefault();
-				event.stopPropagation();
-				move(-1);
-				break;
-			case "Home":
-				event.preventDefault();
-				event.stopPropagation();
-				focus("first");
-				break;
-			case "End":
-				event.preventDefault();
-				event.stopPropagation();
-				focus("last");
-				break;
-			case "ArrowRight":
-			case "ArrowLeft":
-				onHorizontalKeydown(event, active);
-				break;
-			case "Enter":
-			case " ":
-				event.preventDefault();
-				event.stopPropagation();
-				active?.activate(event);
-				break;
-			case "Escape":
-				event.preventDefault();
-				event.stopPropagation();
-				options.onEscape(event);
-				break;
-			case "Tab":
-				options.root.close({ returnFocus: false });
-				break;
-		}
+	function registerItem(item) {
+		interaction.registerItem({
+			get id() {
+				return item.id;
+			},
+			menuId: id,
+			element: item.element,
+			textValue: item.textValue,
+			disabled: item.disabled,
+			submenuId: () => item.submenu?.menuId,
+			submenuDirection: () => item.submenu?.actualPlacement.value.startsWith("left") ? "left" : "right",
+			select: item.activate,
+			closeOnSelect: item.closeOnSelect
+		});
 	}
 	const context = {
 		root: options.root,
+		id,
 		element: options.element,
 		activeId,
 		actualPlacement: options.actualPlacement,
 		parentSub: options.parentSub,
 		registerItem,
-		unregisterItem,
-		registerSub,
-		unregisterSub,
-		closeSubmenus,
-		setActive,
-		isActive: (id) => activeId.value === id,
-		focus,
-		focusElement,
-		onKeydown
+		unregisterItem: interaction.unregisterItem,
+		closeSubmenus: (except) => interaction.closeSubmenus(id, except?.menuId),
+		setActive: (itemId) => {
+			interaction.setActive(itemId);
+		},
+		isActive: interaction.isActive,
+		focus: (target = "first") => interaction.focusMenu(id, target),
+		focusElement: () => interaction.focusMenuElement(id),
+		activate: interaction.activateItem,
+		hover: interaction.hoverItem,
+		onKeydown: (event) => interaction.onMenuKeydown(id, event)
 	};
+	onBeforeUnmount(cleanupMenu);
 	return context;
 }
 function usePrimitiveItem(componentName, props, emitSelect, options) {
@@ -255,12 +133,12 @@ function usePrimitiveItem(componentName, props, emitSelect, options) {
 	const element = ref(null);
 	const isDisabled = computed(() => Boolean(menu.root.disabled.value || props.disabled));
 	const focused = computed(() => menu.isActive(id.value));
-	function activate(originalEvent) {
-		if (isDisabled.value) return;
+	function emitSelection(originalEvent) {
+		if (isDisabled.value) return void 0;
 		const selectEvent = createSelectEvent(originalEvent, props.value);
 		emitSelect(selectEvent);
 		options.afterSelect?.();
-		if (!selectEvent.defaultPrevented && (props.closeOnSelect ?? options.defaultCloseOnSelect)) menu.root.close({ returnFocus: true });
+		return selectEvent;
 	}
 	const registration = {
 		get id() {
@@ -269,27 +147,33 @@ function usePrimitiveItem(componentName, props, emitSelect, options) {
 		element: () => element.value,
 		textValue: () => props.textValue ?? element.value?.textContent?.trim() ?? "",
 		disabled: () => isDisabled.value,
-		activate
+		activate: emitSelection,
+		closeOnSelect: () => props.closeOnSelect ?? options.defaultCloseOnSelect
 	};
 	menu.registerItem(registration);
 	watch(id, (nextId, previousId) => {
+		const wasActive = menu.activeId.value === previousId;
 		menu.unregisterItem(previousId);
 		menu.registerItem(registration);
-		if (menu.activeId.value === previousId) menu.activeId.value = nextId;
-	});
+		if (wasActive) menu.setActive(nextId);
+	}, { flush: "sync" });
+	watch(isDisabled, () => menu.root.interaction.reconcile(menu.id));
 	onBeforeUnmount(() => menu.unregisterItem(id.value));
 	function setElement(value) {
 		resolveHTMLElementRef(value, id.value, (resolved) => {
 			element.value = resolved;
+			menu.root.interaction.reconcile(menu.id);
 		});
 	}
+	function activate(originalEvent) {
+		menu.activate(id.value, originalEvent);
+	}
 	function onPointerenter() {
 		if (isDisabled.value) return;
-		menu.closeSubmenus();
-		menu.setActive(id.value);
+		menu.hover(id.value);
 	}
 	function select() {
-		activate(new Event("select"));
+		menu.activate(id.value, new Event("select"));
 	}
 	return {
 		menu,
@@ -369,12 +253,12 @@ var dropdown_menu_checkbox_item_default = /* @__PURE__ */ defineVaporComponent({
 			type: props.as === "button" ? "button" : void 0,
 			role: "menuitemcheckbox",
 			tabindex: -1,
-			disabled: props.as === "button" ? optionalAttr(isDisabled.value) : void 0,
-			"aria-disabled": optionalAttr(isDisabled.value),
+			disabled: props.as === "button" ? toOptionalAttribute(isDisabled.value) : void 0,
+			"aria-disabled": toOptionalAttribute(isDisabled.value),
 			"aria-checked": checked.value,
-			"data-disabled": optionalAttr(isDisabled.value),
-			"data-focused": optionalAttr(focused.value),
-			"data-highlighted": optionalAttr(focused.value),
+			"data-disabled": toOptionalAttribute(isDisabled.value),
+			"data-focused": toOptionalAttribute(focused.value),
+			"data-highlighted": toOptionalAttribute(focused.value),
 			"data-state": state.value,
 			class: bem("rp-dropdown-menu__item", {
 				focused: focused.value,
@@ -396,31 +280,6 @@ var dropdown_menu_checkbox_item_default = /* @__PURE__ */ defineVaporComponent({
 	}
 });
 //#endregion
-//#region src/components/dropdown-menu/dropdown-menu-outside.ts
-function isNode(value) {
-	return typeof value === "object" && value !== null && "nodeType" in value;
-}
-function isEventWithinElement(event, element) {
-	const path = event.composedPath();
-	if (path.length > 0) return path.some((entry) => entry === element || isNode(entry) && element.contains(entry));
-	return isNode(event.target) && element.contains(event.target);
-}
-function isEventWithinTargets(event, targets) {
-	for (const source of targets) {
-		const target = isRef(source) ? source.value : source;
-		if (!target) continue;
-		if (typeof target === "string") {
-			if (typeof document === "undefined") continue;
-			try {
-				if ([...document.querySelectorAll(target)].some((element) => isEventWithinElement(event, element))) return true;
-			} catch {}
-			continue;
-		}
-		if (isEventWithinElement(event, target)) return true;
-	}
-	return false;
-}
-//#endregion
 //#region src/components/dropdown-menu/useDropdownMenuPrimitiveContent.ts
 function useDropdownMenuPrimitiveContent(props, attrs, events, submenu) {
 	const componentName = submenu ? "RpDropdownMenuSubContent" : "RpDropdownMenuContent";
@@ -434,20 +293,23 @@ function useDropdownMenuPrimitiveContent(props, attrs, events, submenu) {
 	const actualPlacement = ref(props.placement ?? defaultPlacement);
 	const isOpen = computed(() => sub ? sub.isOpen.value : root.isOpen.value);
 	const reference = computed(() => sub ? sub.trigger.value : root.reference.value);
-	const teleportPositioningKey = useTeleportPositioningKey();
 	const menu = createMenuContext({
 		root,
 		element,
 		actualPlacement,
 		parentSub: sub,
 		onEscape(event) {
-			const customEvent = createCustomEvent("dropdown-menu-escape-key-down", { originalEvent: event }, event);
+			const customEvent = createCancelableCustomEvent("dropdown-menu-escape-key-down", { originalEvent: event }, event);
 			events.escapeKeyDown(customEvent);
-			if (customEvent.defaultPrevented) return;
-			if (sub) sub.close(true);
-			else root.close({ returnFocus: true });
+			return !customEvent.defaultPrevented;
 		}
 	});
+	const cleanupDismissal = submenu ? void 0 : root.interaction.registerDismissal({
+		ignoredTargets: () => props.ignore ?? [],
+		pointerDownOutside: events.pointerDownOutside,
+		focusOutside: events.focusOutside,
+		interactOutside: events.interactOutside
+	});
 	const floating = useFloatingPosition({
 		reference,
 		floating: element,
@@ -460,8 +322,7 @@ function useDropdownMenuPrimitiveContent(props, attrs, events, submenu) {
 		flipOptions: () => props.flipOptions,
 		shift: () => props.shift !== false,
 		collisionPadding: () => props.collisionPadding ?? 8,
-		autoUpdateOptions: () => props.autoUpdateOptions,
-		restartKey: teleportPositioningKey
+		autoUpdateOptions: () => props.autoUpdateOptions
 	});
 	watch(floating.actualPlacement, (value) => {
 		actualPlacement.value = value;
@@ -482,44 +343,9 @@ function useDropdownMenuPrimitiveContent(props, attrs, events, submenu) {
 			else if (resolved) layerBranchCleanup = root.layer.registerBranch(resolved);
 		});
 	}
-	function emitOutside(type, originalEvent) {
-		const outsideEvent = createOutsideEvent(originalEvent);
-		if (type === "pointer") events.pointerDownOutside(outsideEvent);
-		else events.focusOutside(outsideEvent);
-		events.interactOutside(outsideEvent);
-		return outsideEvent;
-	}
-	function onDocumentPointer(event) {
-		if (!root.layer.isTopLayer() || root.isInside(event) || isEventWithinTargets(event, props.ignore ?? [])) return;
-		const outsideEvent = emitOutside("pointer", event);
-		if (root.modal.value) {
-			if (event.cancelable) event.preventDefault();
-			event.stopPropagation();
-			if (event.type === "pointerdown") blockNextDocumentClick();
-		}
-		if (!outsideEvent.defaultPrevented) root.close({ returnFocus: root.modal.value });
-	}
-	function onDocumentFocus(event) {
-		if (!root.layer.isTopLayer() || root.isInside(event) || isEventWithinTargets(event, props.ignore ?? [])) return;
-		const outsideEvent = emitOutside("focus", event);
-		if (root.modal.value) {
-			if (event.cancelable) event.preventDefault();
-			event.stopPropagation();
-		}
-		if (!outsideEvent.defaultPrevented) root.close({ returnFocus: root.modal.value });
-		else if (root.modal.value) nextTick(menu.focusElement);
-	}
-	function setDocumentListeners(active) {
-		if (submenu || typeof document === "undefined") return;
-		const method = active ? "addEventListener" : "removeEventListener";
-		document[method]("pointerdown", onDocumentPointer, true);
-		document[method]("focusin", onDocumentFocus, true);
-	}
 	watch(isOpen, (open) => {
-		setDocumentListeners(open);
 		if (!open) {
-			menu.activeId.value = null;
-			menu.closeSubmenus();
+			if (sub) root.interaction.closeMenu(menu.id, false);
 			return;
 		}
 		nextTick(() => {
@@ -536,7 +362,7 @@ function useDropdownMenuPrimitiveContent(props, attrs, events, submenu) {
 		if (isOpen.value) menu.focus((sub ? sub.pendingFocus.value : root.pendingFocus.value) || "first");
 	});
 	onBeforeUnmount(() => {
-		setDocumentListeners(false);
+		cleanupDismissal?.();
 		layerBranchCleanup?.();
 		if (element.value) root.unregisterInside(element.value);
 		if (!sub && root.layer.element.value === element.value) root.layer.element.value = null;
@@ -549,7 +375,7 @@ function useDropdownMenuPrimitiveContent(props, attrs, events, submenu) {
 		id: id.value,
 		role: "menu",
 		tabindex: -1,
-		hidden: optionalAttr(!isOpen.value),
+		hidden: toOptionalAttribute(!isOpen.value),
 		class: submenu ? bem("rp-dropdown-menu__submenu", {
 			compound: true,
 			open: isOpen.value
@@ -644,15 +470,16 @@ var dropdown_menu_content_default = /* @__PURE__ */ defineVaporComponent({
 			focusOutside: (event) => emit("focusOutside", event),
 			interactOutside: (event) => emit("interactOutside", event)
 		}, false);
+		const templateRefs = { arrow: arrowElement };
 		const _setTemplateRef = createTemplateRefSetter();
 		return createIf(() => unref(shouldRender), () => {
 			const n6 = createDynamicComponent(() => __props.as, { $: [() => unref(rootAttrs)] }, extend(() => {
 				return [createIf(() => __props.arrow, () => {
 					const n4 = t0$2();
-					_setTemplateRef(n4, arrowElement, null, "arrowElement");
 					renderEffect(() => {
 						setAttr(n4, "data-side", unref(placementSide));
 						setStyle(n4, unref(floating).arrowStyle.value);
+						_setTemplateRef(n4, templateRefs.arrow);
 					});
 					return n4;
 				}, null, 129), createSlot("default", {
@@ -667,6 +494,117 @@ var dropdown_menu_content_default = /* @__PURE__ */ defineVaporComponent({
 	}
 });
 //#endregion
+//#region src/components/dropdown-menu/useDropdownMenuContextTrigger.ts
+function useDropdownMenuContextTrigger(props) {
+	const attrs = useAttrs();
+	const root = useRequiredInject(rootKey, "RpDropdownMenuContextTrigger");
+	const generatedId = useId();
+	const id = computed(() => props.id ?? `${generatedId}-context-trigger`);
+	const element = ref(null);
+	const isDisabled = computed(() => root.disabled.value || props.disabled);
+	let timer;
+	let pointerId;
+	let startPoint;
+	let longPressOpened = false;
+	let suppressUntil = 0;
+	function setElement(value) {
+		resolveHTMLElementRef(value, id.value, (resolved) => {
+			const previous = element.value;
+			if (previous) root.unregisterInside(previous);
+			element.value = resolved;
+			if (resolved) root.registerInside(resolved);
+			if (!root.triggerId.value) root.triggerId.value = id.value;
+		});
+	}
+	function clearLongPress() {
+		if (timer) clearTimeout(timer);
+		timer = void 0;
+		pointerId = void 0;
+		startPoint = void 0;
+		element.value?.ownerDocument.defaultView?.removeEventListener("scroll", clearLongPress, true);
+	}
+	function openAt(point) {
+		root.setReturnFocus(element.value);
+		root.openAt(point);
+	}
+	function onContextmenu(event) {
+		if (isDisabled.value) return;
+		event.preventDefault();
+		if (Date.now() < suppressUntil) return;
+		openAt({
+			x: event.clientX,
+			y: event.clientY
+		});
+	}
+	function onKeydown(event) {
+		if (isDisabled.value) return;
+		if (event.key !== "ContextMenu" && !(event.shiftKey && event.key === "F10")) return;
+		event.preventDefault();
+		const rect = element.value?.getBoundingClientRect();
+		openAt({
+			x: rect?.left ?? 0,
+			y: rect?.bottom ?? 0
+		});
+	}
+	function onPointerdown(event) {
+		if (isDisabled.value || event.pointerType !== "touch" && event.pointerType !== "pen") return;
+		clearLongPress();
+		pointerId = event.pointerId;
+		startPoint = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		longPressOpened = false;
+		(element.value?.ownerDocument.defaultView)?.addEventListener("scroll", clearLongPress, true);
+		timer = setTimeout(() => {
+			if (!startPoint) return;
+			longPressOpened = true;
+			suppressUntil = Date.now() + 1e3;
+			openAt(startPoint);
+			timer = void 0;
+		}, props.longPressDelay);
+	}
+	function onPointermove(event) {
+		if (event.pointerId !== pointerId || !startPoint) return;
+		if (Math.hypot(event.clientX - startPoint.x, event.clientY - startPoint.y) > (props.longPressTolerance ?? 0)) clearLongPress();
+	}
+	function finishPointer(event) {
+		if (event.pointerId !== pointerId) return;
+		if (longPressOpened) event.preventDefault();
+		clearLongPress();
+	}
+	function onClick(event) {
+		if (Date.now() >= suppressUntil) return;
+		event.preventDefault();
+		event.stopPropagation();
+	}
+	const rootAttrs = computed(() => mergeProps(attrs, {
+		id: id.value,
+		"aria-controls": root.contentId.value,
+		"aria-haspopup": "menu",
+		"aria-disabled": toOptionalAttribute(isDisabled.value),
+		"data-state": root.isOpen.value ? "open" : "closed",
+		"data-disabled": toOptionalAttribute(isDisabled.value),
+		onClick,
+		onContextmenu,
+		onKeydown,
+		onPointerdown,
+		onPointermove,
+		onPointerup: finishPointer,
+		onPointercancel: finishPointer
+	}));
+	onBeforeUnmount(() => {
+		clearLongPress();
+		if (element.value) root.unregisterInside(element.value);
+		if (root.triggerId.value === id.value) root.triggerId.value = void 0;
+	});
+	return {
+		isOpen: root.isOpen,
+		rootAttrs,
+		setElement
+	};
+}
+//#endregion
 //#region src/components/dropdown-menu/dropdown-menu-context-trigger.vue
 var dropdown_menu_context_trigger_default = /* @__PURE__ */ defineVaporComponent({
 	name: "RpDropdownMenuContextTrigger",
@@ -683,113 +621,11 @@ var dropdown_menu_context_trigger_default = /* @__PURE__ */ defineVaporComponent
 		longPressTolerance: { default: 10 }
 	},
 	setup(__props) {
-		const props = __props;
-		const attrs = useAttrs();
-		const root = useRequiredInject(rootKey, "RpDropdownMenuContextTrigger");
-		const generatedId = useId();
-		const id = computed(() => props.id ?? `${generatedId}-context-trigger`);
-		const element = ref(null);
-		const isDisabled = computed(() => root.disabled.value || props.disabled);
-		let timer;
-		let pointerId;
-		let startPoint;
-		let longPressOpened = false;
-		let suppressUntil = 0;
-		function setElement(value) {
-			resolveHTMLElementRef(value, id.value, (resolved) => {
-				const previous = element.value;
-				if (previous) root.unregisterInside(previous);
-				element.value = resolved;
-				if (resolved) root.registerInside(resolved);
-				if (!root.triggerId.value) root.triggerId.value = id.value;
-			});
-		}
-		function clearLongPress() {
-			if (timer) clearTimeout(timer);
-			timer = void 0;
-			pointerId = void 0;
-			startPoint = void 0;
-			element.value?.ownerDocument.defaultView?.removeEventListener("scroll", clearLongPress, true);
-		}
-		function openAt(point) {
-			root.setReturnFocus(element.value);
-			root.openAt(point);
-		}
-		function onContextmenu(event) {
-			if (isDisabled.value) return;
-			event.preventDefault();
-			if (Date.now() < suppressUntil) return;
-			openAt({
-				x: event.clientX,
-				y: event.clientY
-			});
-		}
-		function onKeydown(event) {
-			if (isDisabled.value) return;
-			if (event.key !== "ContextMenu" && !(event.shiftKey && event.key === "F10")) return;
-			event.preventDefault();
-			const rect = element.value?.getBoundingClientRect();
-			openAt({
-				x: rect?.left ?? 0,
-				y: rect?.bottom ?? 0
-			});
-		}
-		function onPointerdown(event) {
-			if (isDisabled.value || event.pointerType !== "touch" && event.pointerType !== "pen") return;
-			clearLongPress();
-			pointerId = event.pointerId;
-			startPoint = {
-				x: event.clientX,
-				y: event.clientY
-			};
-			longPressOpened = false;
-			(element.value?.ownerDocument.defaultView)?.addEventListener("scroll", clearLongPress, true);
-			timer = setTimeout(() => {
-				if (!startPoint) return;
-				longPressOpened = true;
-				suppressUntil = Date.now() + 1e3;
-				openAt(startPoint);
-				timer = void 0;
-			}, props.longPressDelay);
-		}
-		function onPointermove(event) {
-			if (event.pointerId !== pointerId || !startPoint) return;
-			if (Math.hypot(event.clientX - startPoint.x, event.clientY - startPoint.y) > props.longPressTolerance) clearLongPress();
-		}
-		function finishPointer(event) {
-			if (event.pointerId !== pointerId) return;
-			if (longPressOpened) event.preventDefault();
-			clearLongPress();
-		}
-		function onClick(event) {
-			if (Date.now() >= suppressUntil) return;
-			event.preventDefault();
-			event.stopPropagation();
-		}
-		const rootAttrs = computed(() => mergeProps(attrs, {
-			id: id.value,
-			"aria-controls": root.contentId.value,
-			"aria-haspopup": "menu",
-			"aria-disabled": optionalAttr(isDisabled.value),
-			"data-state": root.isOpen.value ? "open" : "closed",
-			"data-disabled": optionalAttr(isDisabled.value),
-			onClick,
-			onContextmenu,
-			onKeydown,
-			onPointerdown,
-			onPointermove,
-			onPointerup: finishPointer,
-			onPointercancel: finishPointer
-		}));
-		onBeforeUnmount(() => {
-			clearLongPress();
-			if (element.value) root.unregisterInside(element.value);
-			if (root.triggerId.value === id.value) root.triggerId.value = void 0;
-		});
-		const n1 = createDynamicComponent(() => __props.as, { $: [() => rootAttrs.value] }, extend(() => {
-			return createSlot("default", { isOpen: () => unref(root).isOpen.value });
+		const { isOpen, rootAttrs, setElement } = useDropdownMenuContextTrigger(__props);
+		const n1 = createDynamicComponent(() => __props.as, { $: [() => unref(rootAttrs)] }, extend(() => {
+			return createSlot("default", { isOpen: () => unref(isOpen) });
 		}, { _: 8 }), 1);
-		setTemplateRefBinding(n1, () => setElement);
+		setTemplateRefBinding(n1, () => setElement, void 0, void 0, "setElement");
 		return n1;
 	}
 });
@@ -831,11 +667,11 @@ var dropdown_menu_item_default = /* @__PURE__ */ defineVaporComponent({
 			type: props.as === "button" ? "button" : void 0,
 			role: "menuitem",
 			tabindex: -1,
-			disabled: props.as === "button" ? optionalAttr(isDisabled.value) : void 0,
-			"aria-disabled": optionalAttr(isDisabled.value),
-			"data-disabled": optionalAttr(isDisabled.value),
-			"data-focused": optionalAttr(focused.value),
-			"data-highlighted": optionalAttr(focused.value),
+			disabled: props.as === "button" ? toOptionalAttribute(isDisabled.value) : void 0,
+			"aria-disabled": toOptionalAttribute(isDisabled.value),
+			"data-disabled": toOptionalAttribute(isDisabled.value),
+			"data-focused": toOptionalAttribute(focused.value),
+			"data-highlighted": toOptionalAttribute(focused.value),
 			class: bem("rp-dropdown-menu__item", {
 				focused: focused.value,
 				disabled: isDisabled.value,
@@ -931,7 +767,7 @@ var dropdown_menu_portal_default = /* @__PURE__ */ defineVaporComponent({
 		const props = __props;
 		const teleportTo = provideTeleportTarget({ get teleportTo() {
 			return props.to ?? props.teleportTo;
-		} }, () => Boolean(props.teleport && !props.disabled));
+		} });
 		return createComponent(VaporTeleport, {
 			to: () => unref(teleportTo),
 			disabled: () => __props.disabled || !__props.teleport
@@ -1038,12 +874,12 @@ var dropdown_menu_radio_item_default = /* @__PURE__ */ defineVaporComponent({
 			type: props.as === "button" ? "button" : void 0,
 			role: "menuitemradio",
 			tabindex: -1,
-			disabled: props.as === "button" ? optionalAttr(isDisabled.value) : void 0,
-			"aria-disabled": optionalAttr(isDisabled.value),
+			disabled: props.as === "button" ? toOptionalAttribute(isDisabled.value) : void 0,
+			"aria-disabled": toOptionalAttribute(isDisabled.value),
 			"aria-checked": checked.value,
-			"data-disabled": optionalAttr(isDisabled.value),
-			"data-focused": optionalAttr(focused.value),
-			"data-highlighted": optionalAttr(focused.value),
+			"data-disabled": toOptionalAttribute(isDisabled.value),
+			"data-focused": toOptionalAttribute(focused.value),
+			"data-highlighted": toOptionalAttribute(focused.value),
 			"data-state": state.value,
 			class: bem("rp-dropdown-menu__item", {
 				focused: focused.value,
@@ -1065,21 +901,657 @@ var dropdown_menu_radio_item_default = /* @__PURE__ */ defineVaporComponent({
 	}
 });
 //#endregion
-//#region src/components/dropdown-menu/dropdown-menu-root.vue
-var dropdown_menu_root_default = /* @__PURE__ */ defineVaporComponent({
-	name: "RpDropdownMenuRoot",
-	__name: "dropdown-menu-root",
-	props: {
-		id: {},
-		open: {
-			type: Boolean,
-			default: void 0
-		},
-		defaultOpen: {
-			type: Boolean,
-			default: false
-		},
-		baseZIndex: {},
+//#region src/components/dropdown-menu/dropdownMenuInteractionNavigation.ts
+function createDropdownMenuInteractionNavigation({ host, registry, closeRoot }) {
+	const state = registry.state;
+	function closeMenu(menuId, focusParent = false) {
+		const menu = registry.getMenu(menuId);
+		const menuState = state.getMenuState(menuId);
+		if (!menu && !menuState || menuId === host.rootMenuId) return false;
+		const wasOpen = registry.isMenuOpen(menuId);
+		closeSubmenus(menuId);
+		const shouldRestoreParent = focusParent || registry.activeMenuId.value === menuId;
+		if (wasOpen) state.setMenuOpen(menuId, false);
+		state.clearPendingMenuFocus(menuId);
+		state.clearMenuState(menuId);
+		if (shouldRestoreParent) {
+			const parentItem = state.getParentItem(menuId);
+			if (!parentItem || !registry.setActive(parentItem.id, focusParent)) {
+				const parentMenuId = parentItem?.menuId ?? host.rootMenuId;
+				registry.activeMenuId.value = parentMenuId;
+				registry.activeItemId.value = state.getActiveIdValue(parentMenuId);
+				if (focusParent) registry.focusMenuElement(parentMenuId);
+			}
+		}
+		return wasOpen;
+	}
+	function closeSubmenus(menuId, exceptMenuId) {
+		for (const item of state.getItems(menuId)) {
+			const submenuId = item.submenuId?.();
+			if (!submenuId || submenuId === exceptMenuId) continue;
+			closeMenu(submenuId, false);
+		}
+	}
+	function closeAllSubmenus() {
+		closeSubmenus(host.rootMenuId);
+		for (const menuId of state.getMenuIds()) if (menuId !== host.rootMenuId && registry.isMenuOpen(menuId)) closeMenu(menuId, false);
+	}
+	function focusMenu(menuId, target = "first") {
+		const enabledItems = state.getEnabledItems(menuId);
+		const item = target === "last" ? enabledItems.at(-1) : enabledItems[0];
+		registry.focusMenuElement(menuId);
+		if (!item) {
+			state.clearMenuState(menuId);
+			registry.activeMenuId.value = menuId;
+			const parentItem = state.getParentItem(menuId);
+			if (parentItem) registry.activeItemId.value = parentItem.id;
+			return false;
+		}
+		return registry.setActive(item.id);
+	}
+	function openMenu(menuId, focus = "first") {
+		const menu = registry.getMenu(menuId);
+		const menuState = state.getMenuState(menuId);
+		if (!menu && !menuState || menuId === host.rootMenuId) return false;
+		const parentItem = state.getParentItem(menuId);
+		if (!parentItem || parentItem.disabled()) return false;
+		closeSubmenus(parentItem.menuId, menuId);
+		state.setPendingMenuFocus(menuId, focus);
+		state.setMenuOpen(menuId, true);
+		if (focus && menu) focusMenu(menuId, focus);
+		return true;
+	}
+	function selectItem(id, originalEvent = new Event("select")) {
+		const item = registry.getItem(id);
+		if (!item || item.disabled()) return;
+		const selectEvent = item.select?.(originalEvent);
+		if (selectEvent && !selectEvent.defaultPrevented && (item.closeOnSelect?.() ?? true)) closeRoot({ focusTrigger: true });
+	}
+	function activateItem(id, originalEvent = new Event("select")) {
+		const item = registry.getItem(id);
+		if (!item || item.disabled()) return;
+		const submenuId = item.submenuId?.();
+		if (submenuId) {
+			openMenu(submenuId, "first");
+			return;
+		}
+		selectItem(id, originalEvent);
+	}
+	function hoverItem(id, openSubmenu = false) {
+		const item = registry.getItem(id);
+		if (!item || item.disabled()) return;
+		registry.setActive(id);
+		const submenuId = item.submenuId?.();
+		if (openSubmenu && submenuId) openMenu(submenuId, false);
+		else closeSubmenus(item.menuId, submenuId && registry.isMenuOpen(submenuId) ? submenuId : void 0);
+	}
+	function reconcileOpenSubmenus() {
+		for (const menuId of state.getMenuIds()) {
+			if (menuId === host.rootMenuId || !registry.isMenuOpen(menuId)) continue;
+			const parentItem = state.getParentItem(menuId);
+			if (!parentItem || parentItem.disabled()) closeMenu(menuId, false);
+		}
+	}
+	function reconcile(menuId) {
+		const menuIds = menuId ? [menuId] : state.getRegisteredMenuIds();
+		for (const id of menuIds) {
+			const activeId = state.getActiveIdValue(id);
+			if (!activeId) continue;
+			const currentItems = state.getItems(id);
+			const activeIndex = currentItems.findIndex((item) => item.id === activeId);
+			const activeItem = currentItems[activeIndex];
+			if (activeItem && !activeItem.disabled()) continue;
+			state.chooseNeighbor(id, Math.max(0, activeIndex));
+		}
+		reconcileOpenSubmenus();
+	}
+	return {
+		closeMenu,
+		closeSubmenus,
+		closeAllSubmenus,
+		focusMenu,
+		openMenu,
+		selectItem,
+		activateItem,
+		hoverItem,
+		reconcile,
+		reconcileOpenSubmenus
+	};
+}
+//#endregion
+//#region src/components/dropdown-menu/dropdownMenuInteractionRegistry.ts
+function compareItems(left, right) {
+	const leftElement = left.element();
+	const rightElement = right.element();
+	if (leftElement && rightElement && leftElement !== rightElement && typeof Node !== "undefined") {
+		const position = leftElement.compareDocumentPosition(rightElement);
+		if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
+		if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;
+	}
+	return (left.order?.() ?? 0) - (right.order?.() ?? 0);
+}
+function scrollItemIntoView(item) {
+	nextTick(() => item.element()?.scrollIntoView?.({ block: "nearest" }));
+}
+function createDropdownMenuInteractionRegistry(host, navigation) {
+	const menus = /* @__PURE__ */ new Map();
+	const menuStates = /* @__PURE__ */ new Map();
+	const items = /* @__PURE__ */ new Map();
+	const activeIds = ref(/* @__PURE__ */ new Map());
+	const activeItemId = ref(null);
+	const activeMenuId = ref(host.rootMenuId);
+	const pendingRootFocus = ref("first");
+	const pendingMenuFocus = /* @__PURE__ */ new Map();
+	function getMenu(id) {
+		return menus.get(id);
+	}
+	function getMenuState(id) {
+		return menuStates.get(id);
+	}
+	function getItem(id) {
+		return items.get(id);
+	}
+	function getItems(menuId) {
+		return [...items.values()].filter((item) => item.menuId === menuId).sort(compareItems);
+	}
+	function getEnabledItems(menuId) {
+		return getItems(menuId).filter((item) => !item.disabled());
+	}
+	function getActiveIdValue(menuId) {
+		return activeIds.value.get(menuId) ?? null;
+	}
+	function setActiveId(menuId, id) {
+		const next = new Map(activeIds.value);
+		if (id) next.set(menuId, id);
+		else next.delete(menuId);
+		activeIds.value = next;
+	}
+	function getActiveId(menuId) {
+		return computed(() => getActiveIdValue(menuId));
+	}
+	function isMenuOpen(menuId) {
+		if (menuId === host.rootMenuId) return host.isOpen.value;
+		return menuStates.get(menuId)?.isOpen() ?? menus.get(menuId)?.isOpen() ?? false;
+	}
+	function focusMenuElement(menuId) {
+		nextTick(() => {
+			const menu = menus.get(menuId);
+			(menu?.focusTarget?.() ?? menu?.element())?.focus();
+		});
+	}
+	function clearMenuState(menuId) {
+		const activeId = getActiveIdValue(menuId);
+		if (activeId && activeItemId.value === activeId) activeItemId.value = null;
+		setActiveId(menuId, null);
+	}
+	function setActive(id, focusElement = false) {
+		if (id === null) {
+			clearMenuState(activeMenuId.value);
+			activeItemId.value = null;
+			return true;
+		}
+		const item = items.get(id);
+		if (!item || item.disabled()) return false;
+		setActiveId(item.menuId, item.id);
+		activeItemId.value = item.id;
+		activeMenuId.value = item.menuId;
+		pendingMenuFocus.delete(item.menuId);
+		if (focusElement) focusMenuElement(item.menuId);
+		scrollItemIntoView(item);
+		return true;
+	}
+	function isActive(id) {
+		return getActiveIdValue(items.get(id)?.menuId ?? "") === id;
+	}
+	function getParentItem(menuId) {
+		const parentItemId = menus.get(menuId)?.parentItemId?.();
+		if (parentItemId) {
+			const parentItem = items.get(parentItemId);
+			if (parentItem) return parentItem;
+		}
+		return [...items.values()].find((item) => item.submenuId?.() === menuId);
+	}
+	function setMenuOpen(menuId, open) {
+		const state = menuStates.get(menuId);
+		if (state) state.setOpen(open);
+		else menus.get(menuId)?.setOpen?.(open);
+	}
+	function chooseNeighbor(menuId, previousIndex) {
+		const currentItems = getItems(menuId);
+		const nextCandidates = currentItems.slice(Math.max(0, previousIndex));
+		const previousCandidates = [];
+		for (let index = Math.max(0, previousIndex) - 1; index >= 0; index -= 1) {
+			const item = currentItems[index];
+			if (item) previousCandidates.push(item);
+		}
+		const next = [...nextCandidates, ...previousCandidates].find((item) => !item.disabled());
+		if (next) setActive(next.id);
+		else {
+			clearMenuState(menuId);
+			focusMenuElement(menuId);
+		}
+	}
+	function unregisterItem(id) {
+		const item = items.get(id);
+		if (!item) return;
+		const previousIndex = getItems(item.menuId).findIndex((current) => current.id === id);
+		const submenuId = item.submenuId?.();
+		if (submenuId) navigation.closeMenu(submenuId, false);
+		items.delete(id);
+		if (getActiveIdValue(item.menuId) === id) chooseNeighbor(item.menuId, previousIndex);
+		navigation.reconcileOpenSubmenus();
+	}
+	function registerItem(registration) {
+		const previous = items.get(registration.id);
+		if (previous && previous.menuId !== registration.menuId && getActiveIdValue(previous.menuId) === previous.id) clearMenuState(previous.menuId);
+		items.set(registration.id, registration);
+		if (isMenuOpen(registration.menuId) && !getActiveIdValue(registration.menuId) && !registration.disabled()) {
+			const enabledItems = getEnabledItems(registration.menuId);
+			const candidate = pendingMenuFocus.get(registration.menuId) === "last" ? enabledItems.at(-1) : enabledItems[0];
+			if (candidate) setActive(candidate.id);
+		} else navigation.reconcile(registration.menuId);
+		return () => {
+			if (items.get(registration.id) === registration) unregisterItem(registration.id);
+		};
+	}
+	function unregisterMenu(id) {
+		if (!menus.get(id)) return;
+		navigation.closeSubmenus(id);
+		if (id !== host.rootMenuId) navigation.closeMenu(id, false);
+		clearMenuState(id);
+		menus.delete(id);
+	}
+	function registerMenu(registration) {
+		menus.set(registration.id, registration);
+		const pending = pendingMenuFocus.get(registration.id);
+		if (registration.isOpen() && pending) nextTick(() => navigation.focusMenu(registration.id, pending));
+		return () => {
+			if (menus.get(registration.id) === registration) unregisterMenu(registration.id);
+		};
+	}
+	function registerMenuState(registration) {
+		menuStates.set(registration.id, registration);
+		return () => {
+			if (menuStates.get(registration.id) !== registration) return;
+			menuStates.delete(registration.id);
+			pendingMenuFocus.delete(registration.id);
+			if (!menus.has(registration.id)) clearMenuState(registration.id);
+		};
+	}
+	return {
+		activeItemId,
+		activeMenuId,
+		pendingRootFocus,
+		registerMenu,
+		unregisterMenu,
+		registerMenuState,
+		registerItem,
+		unregisterItem,
+		getActiveId,
+		getItem,
+		getMenu,
+		isActive,
+		isMenuOpen,
+		setActive,
+		focusMenuElement,
+		state: {
+			getMenuState,
+			getItems,
+			getEnabledItems,
+			getActiveIdValue,
+			clearMenuState,
+			getParentItem,
+			setMenuOpen,
+			chooseNeighbor,
+			getMenuIds: () => /* @__PURE__ */ new Set([...menus.keys(), ...menuStates.keys()]),
+			getRegisteredMenuIds: () => [...menus.keys()],
+			getPendingMenuFocus: (menuId) => pendingMenuFocus.get(menuId),
+			setPendingMenuFocus: (menuId, focus) => pendingMenuFocus.set(menuId, focus),
+			clearPendingMenuFocus: (menuId) => pendingMenuFocus.delete(menuId)
+		}
+	};
+}
+//#endregion
+//#region src/components/dropdown-menu/useDropdownMenuInteractionDismissal.ts
+function createOutsideEvent(originalEvent) {
+	return createCancelableCustomEvent("dropdown-menu-interact-outside", { originalEvent }, originalEvent);
+}
+function blockDocumentClick(event) {
+	if (event.cancelable) event.preventDefault();
+	event.stopPropagation();
+	document.removeEventListener("click", blockDocumentClick, true);
+}
+function blockNextDocumentClick() {
+	if (typeof document === "undefined") return;
+	document.addEventListener("click", blockDocumentClick, true);
+	window.setTimeout(() => document.removeEventListener("click", blockDocumentClick, true), 1e3);
+}
+function useDropdownMenuInteractionDismissal({ host, registry, closeRoot }) {
+	const inside = /* @__PURE__ */ new Set();
+	let dismissal;
+	let isListening = false;
+	function registerInside(element) {
+		inside.add(element);
+	}
+	function unregisterInside(element) {
+		inside.delete(element);
+	}
+	function isInside(event) {
+		return [...inside].some((element) => isEventWithinElement(event, element));
+	}
+	function emitOutside(type, originalEvent) {
+		const outsideEvent = createOutsideEvent(originalEvent);
+		if (type === "pointer") dismissal?.pointerDownOutside?.(outsideEvent);
+		else dismissal?.focusOutside?.(outsideEvent);
+		dismissal?.interactOutside?.(outsideEvent);
+		return outsideEvent;
+	}
+	function blockModalInteraction(event) {
+		if (!host.modal.value) return;
+		if (event.cancelable) event.preventDefault();
+		event.stopPropagation();
+		if (event.type === "pointerdown") blockNextDocumentClick();
+	}
+	function shouldIgnoreOutside(event) {
+		const ignoredTargets = (dismissal?.ignoredTargets() ?? []).map((target) => isRef(target) ? target.value : target);
+		return isInside(event) || isEventWithinTargets(event, ignoredTargets);
+	}
+	function onDocumentPointer(event) {
+		if (!host.isTopLayer() || shouldIgnoreOutside(event)) return;
+		const outsideEvent = emitOutside("pointer", event);
+		blockModalInteraction(event);
+		if (!outsideEvent.defaultPrevented) closeRoot({ focusTrigger: host.modal.value });
+	}
+	function onDocumentFocus(event) {
+		if (!host.isTopLayer() || shouldIgnoreOutside(event)) return;
+		const outsideEvent = emitOutside("focus", event);
+		blockModalInteraction(event);
+		if (!outsideEvent.defaultPrevented) closeRoot({ focusTrigger: host.modal.value });
+		else if (host.modal.value) registry.focusMenuElement(registry.activeMenuId.value);
+	}
+	function setDocumentListeners(active) {
+		if (typeof document === "undefined" || active === isListening) return;
+		isListening = active;
+		const method = active ? "addEventListener" : "removeEventListener";
+		document[method]("pointerdown", onDocumentPointer, true);
+		document[method]("focusin", onDocumentFocus, true);
+	}
+	function registerDismissal(registration) {
+		dismissal = registration;
+		setDocumentListeners(host.isOpen.value);
+		return () => {
+			if (dismissal !== registration) return;
+			dismissal = void 0;
+			setDocumentListeners(false);
+		};
+	}
+	watch(host.isOpen, (open) => setDocumentListeners(open && Boolean(dismissal)));
+	onBeforeUnmount(() => setDocumentListeners(false));
+	return {
+		registerInside,
+		unregisterInside,
+		registerDismissal
+	};
+}
+//#endregion
+//#region src/components/dropdown-menu/useDropdownMenuInteractionKeyboard.ts
+function getPlacementSide(placement) {
+	return placement.split("-")[0];
+}
+function useDropdownMenuInteractionKeyboard({ host, registry, navigation, openRoot, closeRoot }) {
+	const state = registry.state;
+	const typeaheadMenuId = ref(host.rootMenuId);
+	const typeahead = useTypeahead({
+		items: () => state.getItems(typeaheadMenuId.value),
+		activeIndex: () => state.getItems(typeaheadMenuId.value).findIndex((item) => item.id === state.getActiveIdValue(typeaheadMenuId.value)),
+		getKey: (item) => item.id,
+		getTextValue: (item) => item.textValue(),
+		isDisabled: (item) => item.disabled(),
+		scopeKey: () => typeaheadMenuId.value,
+		onMatch(item) {
+			registry.setActive(item.id);
+			navigation.closeSubmenus(item.menuId);
+		}
+	});
+	function move(menuId, direction) {
+		const enabledItems = state.getEnabledItems(menuId);
+		if (enabledItems.length === 0) {
+			state.clearMenuState(menuId);
+			return;
+		}
+		const currentIndex = enabledItems.findIndex((item) => item.id === state.getActiveIdValue(menuId));
+		const item = enabledItems[((currentIndex < 0 ? direction === 1 ? -1 : 0 : currentIndex) + direction + enabledItems.length) % enabledItems.length];
+		if (item) {
+			registry.setActive(item.id);
+			navigation.closeSubmenus(menuId);
+		}
+	}
+	function handleHorizontalKey(menuId, event, activeItem) {
+		const menu = registry.getMenu(menuId);
+		const isRight = event.key === "ArrowRight";
+		if (menuId !== host.rootMenuId && menu) {
+			if (isRight === (getPlacementSide(menu.placement()) === "left")) {
+				event.preventDefault();
+				if (menu.stopKeyPropagation) event.stopPropagation();
+				navigation.closeMenu(menuId, true);
+				return;
+			}
+		}
+		const submenuId = activeItem?.submenuId?.();
+		if (!activeItem || activeItem.disabled() || !submenuId) return;
+		const submenu = registry.getMenu(submenuId);
+		if (isRight !== (activeItem.submenuDirection?.() !== "left" && (!submenu || getPlacementSide(submenu.placement()) !== "left"))) return;
+		event.preventDefault();
+		if (menu?.stopKeyPropagation) event.stopPropagation();
+		navigation.openMenu(submenuId, "first");
+	}
+	function onMenuKeydown(menuId, event) {
+		const menu = registry.getMenu(menuId);
+		typeaheadMenuId.value = menuId;
+		if (typeahead.handleKey(event)) {
+			if (menu?.stopKeyPropagation) event.stopPropagation();
+			return;
+		}
+		const activeId = state.getActiveIdValue(menuId);
+		const activeItem = activeId ? registry.getItem(activeId) : void 0;
+		const stop = () => {
+			if (menu?.stopKeyPropagation) event.stopPropagation();
+		};
+		switch (event.key) {
+			case "ArrowDown":
+				event.preventDefault();
+				stop();
+				move(menuId, 1);
+				break;
+			case "ArrowUp":
+				event.preventDefault();
+				stop();
+				move(menuId, -1);
+				break;
+			case "Home":
+				event.preventDefault();
+				stop();
+				navigation.focusMenu(menuId, "first");
+				navigation.closeSubmenus(menuId);
+				break;
+			case "End":
+				event.preventDefault();
+				stop();
+				navigation.focusMenu(menuId, "last");
+				navigation.closeSubmenus(menuId);
+				break;
+			case "ArrowRight":
+			case "ArrowLeft":
+				handleHorizontalKey(menuId, event, activeItem);
+				break;
+			case "Enter":
+			case " ":
+				event.preventDefault();
+				stop();
+				if (activeItem) navigation.activateItem(activeItem.id, event);
+				break;
+			case "Escape":
+				event.preventDefault();
+				stop();
+				if (menu?.onEscape && !menu.onEscape(event)) return;
+				if (!navigation.closeMenu(menuId, true)) closeRoot({ focusTrigger: true });
+				break;
+			case "Tab":
+				closeRoot();
+				break;
+		}
+	}
+	function onTriggerKeydown(event, beforeOpen) {
+		if (host.disabled.value) return;
+		switch (event.key) {
+			case "Enter":
+			case " ":
+			case "ArrowDown":
+				event.preventDefault();
+				beforeOpen?.();
+				openRoot("first");
+				break;
+			case "ArrowUp":
+				event.preventDefault();
+				beforeOpen?.();
+				openRoot("last");
+				break;
+			case "Escape":
+				closeRoot({ focusTrigger: true });
+				break;
+		}
+	}
+	return {
+		onMenuKeydown,
+		onTriggerKeydown,
+		resetTypeahead: typeahead.reset
+	};
+}
+//#endregion
+//#region src/components/dropdown-menu/dropdownMenuInteraction.ts
+function resolveOpenFocusTarget(options) {
+	if (typeof options === "string") return options;
+	return options?.focus ?? "first";
+}
+function useDropdownMenuInteraction(host) {
+	let navigation;
+	const registry = createDropdownMenuInteractionRegistry(host, {
+		closeMenu: (menuId, focusParent) => navigation.closeMenu(menuId, focusParent),
+		closeSubmenus: (menuId, exceptMenuId) => navigation.closeSubmenus(menuId, exceptMenuId),
+		focusMenu: (menuId, target) => navigation.focusMenu(menuId, target),
+		reconcile: (menuId) => navigation.reconcile(menuId),
+		reconcileOpenSubmenus: () => navigation.reconcileOpenSubmenus()
+	});
+	function open(options) {
+		if (host.disabled.value) return;
+		host.beforeOpen?.();
+		registry.pendingRootFocus.value = resolveOpenFocusTarget(options);
+		host.setOpen(true);
+		navigation.focusMenu(host.rootMenuId, registry.pendingRootFocus.value);
+	}
+	function close(options = {}) {
+		host.beforeClose?.();
+		host.setOpen(false);
+		registry.pendingRootFocus.value = false;
+		navigation.closeAllSubmenus();
+		registry.state.clearMenuState(host.rootMenuId);
+		registry.activeItemId.value = null;
+		registry.activeMenuId.value = host.rootMenuId;
+		keyboard.resetTypeahead();
+		if (options.focusTrigger || options.returnFocus) host.focusTrigger();
+	}
+	function toggle() {
+		if (host.isOpen.value) close({ returnFocus: true });
+		else open();
+	}
+	function onTriggerClick(beforeToggle) {
+		beforeToggle?.();
+		toggle();
+	}
+	navigation = createDropdownMenuInteractionNavigation({
+		host,
+		registry,
+		closeRoot: close
+	});
+	const keyboard = useDropdownMenuInteractionKeyboard({
+		host,
+		registry,
+		navigation,
+		openRoot: open,
+		closeRoot: close
+	});
+	const dismissal = useDropdownMenuInteractionDismissal({
+		host,
+		registry,
+		closeRoot: close
+	});
+	watch(host.disabled, (disabled) => {
+		if (disabled) close();
+	});
+	watch(host.isOpen, (isOpen) => {
+		if (!isOpen) {
+			navigation.closeAllSubmenus();
+			registry.state.clearMenuState(host.rootMenuId);
+			registry.activeItemId.value = null;
+			registry.activeMenuId.value = host.rootMenuId;
+			keyboard.resetTypeahead();
+			return;
+		}
+		const focus = registry.pendingRootFocus.value || "first";
+		navigation.focusMenu(host.rootMenuId, focus);
+	}, { immediate: true });
+	return {
+		rootMenuId: host.rootMenuId,
+		activeItemId: registry.activeItemId,
+		activeMenuId: registry.activeMenuId,
+		pendingRootFocus: registry.pendingRootFocus,
+		registerMenu: registry.registerMenu,
+		unregisterMenu: registry.unregisterMenu,
+		registerMenuState: registry.registerMenuState,
+		registerItem: registry.registerItem,
+		unregisterItem: registry.unregisterItem,
+		registerInside: dismissal.registerInside,
+		unregisterInside: dismissal.unregisterInside,
+		registerDismissal: dismissal.registerDismissal,
+		getActiveId: registry.getActiveId,
+		getItem: registry.getItem,
+		getMenu: registry.getMenu,
+		isActive: registry.isActive,
+		isMenuOpen: registry.isMenuOpen,
+		setActive: registry.setActive,
+		focusMenu: navigation.focusMenu,
+		focusMenuElement: registry.focusMenuElement,
+		open,
+		close,
+		toggle,
+		openMenu: navigation.openMenu,
+		closeMenu: navigation.closeMenu,
+		closeSubmenus: navigation.closeSubmenus,
+		selectItem: navigation.selectItem,
+		activateItem: navigation.activateItem,
+		hoverItem: navigation.hoverItem,
+		reconcile: navigation.reconcile,
+		onTriggerClick,
+		onTriggerKeydown: keyboard.onTriggerKeydown,
+		onMenuKeydown: keyboard.onMenuKeydown
+	};
+}
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu-root.vue
+var dropdown_menu_root_default = /* @__PURE__ */ defineVaporComponent({
+	name: "RpDropdownMenuRoot",
+	__name: "dropdown-menu-root",
+	props: {
+		id: {},
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultOpen: {
+			type: Boolean,
+			default: false
+		},
+		baseZIndex: {},
 		disabled: {
 			type: Boolean,
 			default: false
@@ -1111,9 +1583,7 @@ var dropdown_menu_root_default = /* @__PURE__ */ defineVaporComponent({
 		const activeReference = shallowRef(null);
 		const { reference: configuredReference } = useFloatingTarget(() => props.target ?? props.virtualAnchor, trigger);
 		const reference = computed(() => activeReference.value ?? configuredReference.value);
-		const pendingFocus = ref("first");
 		const contentElement = ref(null);
-		const inside = /* @__PURE__ */ new Set();
 		let returnFocusElement = null;
 		const baseZIndex = useOverlayZIndex({
 			baseZIndex: () => props.baseZIndex,
@@ -1134,34 +1604,30 @@ var dropdown_menu_root_default = /* @__PURE__ */ defineVaporComponent({
 			const activeElement = document.activeElement;
 			if (activeElement instanceof HTMLElement) returnFocusElement = activeElement;
 		}
-		function open(options) {
-			if (disabled.value) return;
-			rememberFocus();
-			pendingFocus.value = getFocusTarget(options);
-			setOpen(true);
-		}
 		function focusReturnTarget() {
 			const target = returnFocusElement ?? trigger.value;
 			nextTick(() => target?.focus());
 		}
-		function close(options = {}) {
-			setOpen(false);
-			pendingFocus.value = false;
-			if (options.focusTrigger || options.returnFocus) focusReturnTarget();
-		}
-		function toggle() {
-			if (isOpen.value) close({ returnFocus: true });
-			else open();
-		}
+		const interaction = useDropdownMenuInteraction({
+			rootMenuId: `${generatedId}-interaction-root`,
+			isOpen,
+			disabled,
+			modal,
+			setOpen,
+			isTopLayer: layer.isTopLayer,
+			focusTrigger: focusReturnTarget,
+			beforeOpen: rememberFocus
+		});
+		const { pendingRootFocus: pendingFocus, open, close, toggle } = interaction;
 		function openAt(point, options) {
 			activeReference.value = createVirtualAnchor(point);
 			open(options);
 		}
 		function setTrigger(element, nextId) {
-			if (trigger.value && trigger.value !== element) inside.delete(trigger.value);
+			if (trigger.value && trigger.value !== element) interaction.unregisterInside(trigger.value);
 			trigger.value = element;
 			triggerId.value = nextId;
-			if (element) inside.add(element);
+			if (element) interaction.registerInside(element);
 		}
 		const context = {
 			id,
@@ -1174,6 +1640,7 @@ var dropdown_menu_root_default = /* @__PURE__ */ defineVaporComponent({
 			reference,
 			pendingFocus,
 			layer,
+			interaction,
 			open,
 			close,
 			toggle,
@@ -1186,13 +1653,10 @@ var dropdown_menu_root_default = /* @__PURE__ */ defineVaporComponent({
 				returnFocusElement = element;
 			},
 			registerInside(element) {
-				inside.add(element);
+				interaction.registerInside(element);
 			},
 			unregisterInside(element) {
-				inside.delete(element);
-			},
-			isInside(event) {
-				return [...inside].some((element) => isEventWithinElement(event, element));
+				interaction.unregisterInside(element);
 			}
 		};
 		const slotProps = computed(() => ({
@@ -1202,9 +1666,6 @@ var dropdown_menu_root_default = /* @__PURE__ */ defineVaporComponent({
 			toggle,
 			openAt
 		}));
-		watch(disabled, (value) => {
-			if (value) close();
-		});
 		watch(isOpen, (value) => {
 			if (!value) activeReference.value = null;
 		}, { flush: "sync" });
@@ -1263,6 +1724,7 @@ var dropdown_menu_sub_default = /* @__PURE__ */ defineVaporComponent({
 		const props = __props;
 		const emit = __emit;
 		const parentMenu = useRequiredInject(menuKey, "RpDropdownMenuSub");
+		const menuId = `${useId()}-interaction-menu`;
 		const controllableOpen = useControllableValue({
 			modelValue: () => props.open,
 			defaultValue: () => props.defaultOpen,
@@ -1276,35 +1738,31 @@ var dropdown_menu_sub_default = /* @__PURE__ */ defineVaporComponent({
 		function setOpen(value) {
 			if (isOpen.value !== value) controllableOpen.setValue(value);
 		}
+		const cleanupMenuState = parentMenu.root.interaction.registerMenuState({
+			id: menuId,
+			isOpen: () => isOpen.value,
+			setOpen
+		});
 		const context = {
+			menuId,
 			isOpen,
 			trigger,
 			contentId,
 			actualPlacement,
 			pendingFocus,
 			menu: null,
+			setOpen,
 			open(focus = "first") {
-				parentMenu.closeSubmenus(context);
 				pendingFocus.value = focus;
-				setOpen(true);
-				if (focus) nextTick(() => context.menu?.focus(focus));
+				if (!parentMenu.root.interaction.openMenu(menuId, focus)) setOpen(true);
 			},
 			close(focusParent = false) {
-				setOpen(false);
 				pendingFocus.value = false;
-				context.menu?.closeSubmenus();
-				if (focusParent) {
-					parentMenu.setActive(trigger.value?.id ?? "");
-					parentMenu.focusElement();
-				}
+				if (!parentMenu.root.interaction.closeMenu(menuId, focusParent)) setOpen(false);
 			}
 		};
-		parentMenu.registerSub(context);
 		provide(subKey, context);
-		watch(parentMenu.root.isOpen, (open) => {
-			if (!open) context.close(false);
-		});
-		onBeforeUnmount(() => parentMenu.unregisterSub(context));
+		onBeforeUnmount(cleanupMenuState);
 		return createSlot("default", {
 			isOpen: () => unref(isOpen),
 			open: () => context.open,
@@ -1402,10 +1860,17 @@ var dropdown_menu_sub_trigger_default = /* @__PURE__ */ defineVaporComponent({
 			element: () => sub.trigger.value,
 			textValue: () => props.textValue ?? sub.trigger.value?.textContent?.trim() ?? "",
 			disabled: () => isDisabled.value,
-			activate: () => sub.open("first"),
+			activate: () => void 0,
 			submenu: sub
 		};
 		menu.registerItem(registration);
+		watch(id, (nextId, previousId) => {
+			const wasActive = menu.activeId.value === previousId;
+			menu.unregisterItem(previousId);
+			menu.registerItem(registration);
+			if (wasActive) menu.setActive(nextId);
+		}, { flush: "sync" });
+		watch(isDisabled, () => menu.root.interaction.reconcile(menu.id));
 		onBeforeUnmount(() => menu.unregisterItem(id.value));
 		function setElement(value) {
 			resolveHTMLElementRef(value, id.value, (resolved) => {
@@ -1414,25 +1879,24 @@ var dropdown_menu_sub_trigger_default = /* @__PURE__ */ defineVaporComponent({
 		}
 		function onMouseenter() {
 			if (isDisabled.value) return;
-			menu.setActive(id.value);
-			sub.open(false);
+			menu.hover(id.value, true);
 		}
 		function onClick(event) {
-			if (!event.defaultPrevented && !isDisabled.value) sub.open("first");
+			if (!event.defaultPrevented && !isDisabled.value) menu.activate(id.value, event);
 		}
 		const rootAttrs = computed(() => mergeProps(attrs, {
 			id: id.value,
 			type: props.as === "button" ? "button" : void 0,
 			role: "menuitem",
 			tabindex: -1,
-			disabled: props.as === "button" ? optionalAttr(isDisabled.value) : void 0,
-			"aria-disabled": optionalAttr(isDisabled.value),
+			disabled: props.as === "button" ? toOptionalAttribute(isDisabled.value) : void 0,
+			"aria-disabled": toOptionalAttribute(isDisabled.value),
 			"aria-haspopup": "menu",
 			"aria-expanded": sub.isOpen.value,
 			"aria-controls": sub.contentId.value,
-			"data-disabled": optionalAttr(isDisabled.value),
-			"data-focused": optionalAttr(focused.value),
-			"data-highlighted": optionalAttr(focused.value),
+			"data-disabled": toOptionalAttribute(isDisabled.value),
+			"data-focused": toOptionalAttribute(focused.value),
+			"data-highlighted": toOptionalAttribute(focused.value),
 			"data-state": sub.isOpen.value ? "open" : "closed",
 			class: bem("rp-dropdown-menu__item", {
 				focused: focused.value,
@@ -1484,41 +1948,28 @@ var dropdown_menu_trigger_default = /* @__PURE__ */ defineVaporComponent({
 				root.setTrigger(resolved, id.value);
 			});
 		}
-		function openWithReference(focus = "first") {
+		function prepareReference() {
 			root.setReference(element.value);
 			root.setReturnFocus(element.value);
-			root.open({ focus });
 		}
 		function onClick(event) {
 			if (event.defaultPrevented || isDisabled.value) return;
-			root.setReference(element.value);
-			root.setReturnFocus(element.value);
-			root.toggle();
+			root.interaction.onTriggerClick(prepareReference);
 		}
 		function onKeydown(event) {
 			if (isDisabled.value) return;
-			if (event.key === "ArrowUp") {
-				event.preventDefault();
-				openWithReference("last");
-			} else if ([
-				"Enter",
-				" ",
-				"ArrowDown"
-			].includes(event.key)) {
-				event.preventDefault();
-				openWithReference("first");
-			} else if (event.key === "Escape") root.close({ focusTrigger: true });
+			root.interaction.onTriggerKeydown(event, prepareReference);
 		}
 		const rootAttrs = computed(() => mergeProps(attrs, {
 			id: id.value,
 			type: props.as === "button" ? "button" : void 0,
-			disabled: props.as === "button" ? optionalAttr(isDisabled.value) : void 0,
+			disabled: props.as === "button" ? toOptionalAttribute(isDisabled.value) : void 0,
 			"aria-controls": root.contentId.value,
 			"aria-expanded": root.isOpen.value,
 			"aria-haspopup": "menu",
-			"aria-disabled": props.as === "button" ? void 0 : optionalAttr(isDisabled.value),
+			"aria-disabled": props.as === "button" ? void 0 : toOptionalAttribute(isDisabled.value),
 			"data-state": root.isOpen.value ? "open" : "closed",
-			"data-disabled": optionalAttr(isDisabled.value),
+			"data-disabled": toOptionalAttribute(isDisabled.value),
 			onClick,
 			onKeydown
 		}));
@@ -1530,31 +1981,10 @@ var dropdown_menu_trigger_default = /* @__PURE__ */ defineVaporComponent({
 		return n1;
 	}
 });
-var DEFAULT_FOCUS_TARGET = "first";
-function getOpenFocusTarget(options) {
-	if (typeof options === "string") return options;
-	return options?.focus ?? "first";
-}
-function getItemClass(item, focused, disabled, hasSubmenu, submenuOpen) {
-	return bem("rp-dropdown-menu__item", {
-		focused,
-		disabled,
-		destructive: item.destructive,
-		submenu: hasSubmenu,
-		open: submenuOpen
-	});
-}
-function hasItemSubmenu(item) {
-	return (item.children?.length ?? 0) > 0;
-}
-function hasNestedItems(items) {
-	return items.some(hasItemSubmenu);
-}
-function getPathKey(path) {
-	return path.length === 0 ? "root" : path.join("-");
-}
-function getParentPath(path) {
-	return path.slice(0, -1);
+//#endregion
+//#region src/utils/indexPath.ts
+function getPathKey(path) {
+	return path.length === 0 ? "root" : path.join("-");
 }
 function arePathsEqual(a, b) {
 	return a.length === b.length && a.every((part, index) => part === b[index]);
@@ -1565,17 +1995,21 @@ function isPathPrefix(prefix, path) {
 function normalizePath(indexOrPath) {
 	return Array.isArray(indexOrPath) ? indexOrPath : [indexOrPath];
 }
-function getEventPoint(event) {
-	return {
-		x: event.clientX,
-		y: event.clientY
-	};
+var DEFAULT_FOCUS_TARGET = "first";
+function getItemClass(item, focused, disabled, hasSubmenu, submenuOpen) {
+	return bem("rp-dropdown-menu__item", {
+		focused,
+		disabled,
+		destructive: item.destructive,
+		submenu: hasSubmenu,
+		open: submenuOpen
+	});
 }
-function hasMeasuredRect(rect) {
-	return rect.width > 0 || rect.height > 0;
+function hasItemSubmenu(item) {
+	return (item.children?.length ?? 0) > 0;
 }
-function isPointInRect(point, rect, padding = 0) {
-	return point.x >= rect.left - padding && point.x <= rect.right + padding && point.y >= rect.top - padding && point.y <= rect.bottom + padding;
+function hasNestedItems(items) {
+	return items.some(hasItemSubmenu);
 }
 //#endregion
 //#region src/components/dropdown-menu/dropdown-menu-item-row.vue?vue&type=script&setup=true&vapor=true&lang.ts
@@ -1607,6 +2041,10 @@ var dropdown_menu_item_row_default = /* @__PURE__ */ defineVaporComponent({
 		const slotProps = computed(() => props.context.getItemSlotProps(props.item, path.value, focused.value, disabled.value, submenuOpen.value));
 		const itemElement = ref(null);
 		const submenuElement = ref(null);
+		const templateRefs = {
+			item: itemElement,
+			submenu: submenuElement
+		};
 		const { actualPlacement, floatingStyle } = useFloatingPosition({
 			reference: itemElement,
 			floating: submenuElement,
@@ -1632,14 +2070,13 @@ var dropdown_menu_item_row_default = /* @__PURE__ */ defineVaporComponent({
 		function getChildKey(index, child) {
 			return `${getPathKey([...path.value, index])}:${String(child.value)}`;
 		}
-		const _setTemplateRef = createTemplateRefSetter();
 		const _component_DropdownMenuItemRow__self = resolveComponent("DropdownMenuItemRow", true);
 		const n10 = t1$1();
 		const n1 = child(n10);
 		renderEffect(() => setDynamicProps(n1, [publicItemProps.value]));
 		setInsertionState(n1, null, 0);
 		createSlot("item", { $: [() => slotProps.value] });
-		setStaticTemplateRef(n1, itemElement, null, "itemElement");
+		setTemplateRefBinding(n1, () => templateRefs.item);
 		setInsertionState(n10, null, 1);
 		createIf(() => hasSubmenu.value && submenuOpen.value, () => {
 			const n9 = t0$1();
@@ -1659,7 +2096,7 @@ var dropdown_menu_item_row_default = /* @__PURE__ */ defineVaporComponent({
 					return createSlot("item", { $: [() => childSlotProps] });
 				}, { _: 8 }) });
 			}, (child, childIndex) => getChildKey(childIndex, child), 3);
-			_setTemplateRef(n9, submenuElement, null, "submenuElement");
+			setTemplateRefBinding(n9, () => templateRefs.submenu);
 			return n9;
 		});
 		return n10;
@@ -1693,151 +2130,167 @@ var dropdown_menu_items_default = /* @__PURE__ */ defineVaporComponent({
 	}
 });
 //#endregion
-//#region src/components/dropdown-menu/useDropdownMenuDisclosure.ts
-function useDropdownMenuDisclosure({ props, emit, rootRef, menuRef, targetRef, setControllableOpen, isDisabled, isOpen, isVisible, focusedPath, resetFocus, resetSubmenus, resetHoverIntent, focusItem, focusMenu, focusTrigger, layer }) {
-	function setOpen(nextOpen) {
-		if (nextOpen && isDisabled.value) return;
-		if (isOpen.value !== nextOpen) setControllableOpen(nextOpen);
-	}
-	function resetMenuFocus() {
-		resetFocus();
-		resetSubmenus();
-		resetHoverIntent();
-	}
-	function open(options) {
-		if (isDisabled.value) return;
-		setOpen(true);
-		focusItem(getOpenFocusTarget(options));
-		resetSubmenus();
-		resetHoverIntent();
-		focusMenu();
-	}
-	function close(options = {}) {
-		setOpen(false);
-		resetMenuFocus();
-		if (options.focusTrigger) focusTrigger();
-	}
-	function toggle() {
-		if (isVisible.value) close({ focusTrigger: true });
-		else open();
-	}
-	watch(isDisabled, (disabled) => {
-		if (disabled) close();
-	});
-	watch(isVisible, (visible) => {
-		if (visible) {
-			if (focusedPath.value.length === 0) focusItem(DEFAULT_FOCUS_TARGET);
-			focusMenu();
-		} else resetMenuFocus();
-	});
-	function emitOutside(type, originalEvent) {
-		const outsideEvent = createOutsideEvent(originalEvent);
-		if (type === "pointer") emit.pointerDownOutside?.(outsideEvent);
-		else emit.focusOutside?.(outsideEvent);
-		emit.interactOutside?.(outsideEvent);
-		return outsideEvent;
-	}
-	function isInside(event) {
-		return isEventWithinTargets(event, [
-			rootRef,
-			menuRef,
-			targetRef,
-			...props.ignore ?? []
-		]);
-	}
-	function blockModalInteraction(event) {
-		if (!props.modal) return;
-		if (event.cancelable) event.preventDefault();
-		event.stopPropagation();
-		if (event.type === "pointerdown") blockNextDocumentClick();
-	}
-	function onDocumentPointerdown(event) {
-		if (!layer.isTopLayer()) return;
-		if (isInside(event)) return;
-		const outsideEvent = emitOutside("pointer", event);
-		blockModalInteraction(event);
-		if (!outsideEvent.defaultPrevented) close({ focusTrigger: Boolean(props.modal) });
-	}
-	function onDocumentFocus(event) {
-		if (!layer.isTopLayer()) return;
-		if (isInside(event)) return;
-		const outsideEvent = emitOutside("focus", event);
-		blockModalInteraction(event);
-		if (!outsideEvent.defaultPrevented) close({ focusTrigger: Boolean(props.modal) });
-		else if (props.modal) focusMenu();
-	}
-	let isListening = false;
-	function setDocumentListeners(active) {
-		if (typeof document === "undefined" || active === isListening) return;
-		isListening = active;
-		const method = active ? "addEventListener" : "removeEventListener";
-		document[method]("pointerdown", onDocumentPointerdown, true);
-		document[method]("focusin", onDocumentFocus, true);
+//#region src/components/dropdown-menu/dropdownMenuDataModel.ts
+function createDataIndexState(rootMenuId) {
+	return {
+		entries: [],
+		itemIdByPath: /* @__PURE__ */ new Map(),
+		pathByItemId: /* @__PURE__ */ new Map(),
+		menuIdByPath: /* @__PURE__ */ new Map([["root", rootMenuId]]),
+		pathByMenuId: /* @__PURE__ */ new Map([[rootMenuId, []]]),
+		primaryItemId: /* @__PURE__ */ new WeakMap(),
+		occurrences: /* @__PURE__ */ new Map()
+	};
+}
+function getOccurrenceItemId(item, state, getStableItemId) {
+	const occurrence = state.occurrences.get(item) ?? 0;
+	state.occurrences.set(item, occurrence + 1);
+	const stableItemId = getStableItemId(item);
+	return {
+		occurrence,
+		itemId: occurrence === 0 ? stableItemId : `${stableItemId}-copy-${occurrence}`
+	};
+}
+function indexItems(items, parentPath, ownerMenuId, state, getStableItemId) {
+	for (const [order, item] of items.entries()) {
+		const path = [...parentPath, order];
+		const pathKey = getPathKey(path);
+		const { itemId, occurrence } = getOccurrenceItemId(item, state, getStableItemId);
+		const submenuMenuId = hasItemSubmenu(item) ? `${itemId}-menu` : void 0;
+		state.entries.push({
+			item,
+			path,
+			itemId,
+			ownerMenuId,
+			order,
+			submenuMenuId
+		});
+		state.itemIdByPath.set(pathKey, itemId);
+		state.pathByItemId.set(itemId, path);
+		if (occurrence === 0) state.primaryItemId.set(item, itemId);
+		if (!submenuMenuId) continue;
+		state.menuIdByPath.set(pathKey, submenuMenuId);
+		state.pathByMenuId.set(submenuMenuId, path);
+		indexItems(item.children ?? [], path, submenuMenuId, state, getStableItemId);
 	}
-	watch(isVisible, setDocumentListeners, { immediate: true });
-	onBeforeUnmount(() => setDocumentListeners(false));
+}
+function buildDropdownMenuDataIndex(items, rootMenuId, getStableItemId) {
+	const state = createDataIndexState(rootMenuId);
+	indexItems(items, [], rootMenuId, state, getStableItemId);
 	return {
-		open,
-		close,
-		toggle,
-		resetMenuFocus
+		entries: state.entries,
+		itemIdByPath: state.itemIdByPath,
+		pathByItemId: state.pathByItemId,
+		menuIdByPath: state.menuIdByPath,
+		pathByMenuId: state.pathByMenuId,
+		primaryItemId: state.primaryItemId
 	};
 }
+function getDropdownMenuDataCollectionState(items) {
+	const state = [];
+	function collect(currentItems) {
+		state.push(currentItems.length);
+		for (const item of currentItems) {
+			const children = item.children;
+			state.push(item, Boolean(item.disabled), children);
+			if (children) collect(children);
+		}
+	}
+	collect(items);
+	return state;
+}
 //#endregion
-//#region src/components/dropdown-menu/useDropdownMenuDom.ts
-function useDropdownMenuDom({ menuId, rootRef, menuRef, targetRef, placement, focusedPath }) {
-	const activeDescendantId = computed(() => focusedPath.value.length === 0 ? void 0 : getItemId(focusedPath.value));
-	function focusMenu() {
-		nextTick(() => menuRef.value?.focus());
+//#region src/components/dropdown-menu/useDropdownMenuDataRegistration.ts
+function getCurrentPath(index, entry) {
+	return index.pathByItemId.get(entry.itemId) ?? entry.path;
+}
+function useDropdownMenuDataRegistration({ props, items, rootMenuId, interaction, menuRef, getItemElement, getSubmenuElement, isSubmenuOpeningLeft, onSelect }) {
+	const openMenuIds = ref(/* @__PURE__ */ new Set());
+	const itemIdentity = /* @__PURE__ */ new WeakMap();
+	let nextItemIdentity = 0;
+	let registeredItemIds = /* @__PURE__ */ new Set();
+	let registeredMenuIds = /* @__PURE__ */ new Set();
+	function getStableItemId(item) {
+		const existing = itemIdentity.get(item);
+		if (existing) return existing;
+		nextItemIdentity += 1;
+		const id = `${rootMenuId}-item-${nextItemIdentity}`;
+		itemIdentity.set(item, id);
+		return id;
+	}
+	const registrationIndex = shallowRef(buildDropdownMenuDataIndex([], rootMenuId, getStableItemId));
+	const collectionState = computed(() => getDropdownMenuDataCollectionState(items.value));
+	function setMenuOpen(id, open) {
+		const next = new Set(openMenuIds.value);
+		if (open) next.add(id);
+		else next.delete(id);
+		openMenuIds.value = next;
+	}
+	function createMenuRegistration(index, entry) {
+		const submenuMenuId = entry.submenuMenuId;
+		if (!submenuMenuId) return void 0;
+		return {
+			id: submenuMenuId,
+			parentItemId: () => entry.itemId,
+			element: () => getSubmenuElement(getCurrentPath(index, entry)),
+			focusTarget: () => menuRef.value,
+			placement: () => {
+				return getSubmenuElement(getCurrentPath(index, entry))?.dataset.placement ?? "right-start";
+			},
+			isOpen: () => openMenuIds.value.has(submenuMenuId),
+			setOpen: (open) => setMenuOpen(submenuMenuId, open)
+		};
 	}
-	function focusTrigger() {
-		nextTick(() => {
-			if (targetRef.value instanceof HTMLElement) {
-				targetRef.value.focus();
-				return;
+	function createSelectEvent(entry, originalEvent) {
+		const event = new CustomEvent("dropdown-menu-select", {
+			cancelable: true,
+			detail: {
+				originalEvent,
+				value: entry.item.value
 			}
-			(rootRef.value?.querySelector("[aria-haspopup=\"menu\"]"))?.focus();
+		});
+		onSelect?.(entry.item, event);
+		return event;
+	}
+	function registerEntry(index, entry) {
+		const menuRegistration = createMenuRegistration(index, entry);
+		if (menuRegistration) interaction.registerMenu(menuRegistration);
+		interaction.registerItem({
+			id: entry.itemId,
+			menuId: entry.ownerMenuId,
+			element: () => getItemElement(getCurrentPath(index, entry)),
+			textValue: () => entry.item.label,
+			disabled: () => Boolean(entry.item.disabled || props.disabled),
+			order: () => entry.order,
+			submenuId: () => entry.submenuMenuId,
+			submenuDirection: () => isSubmenuOpeningLeft(getCurrentPath(index, entry)) ? "left" : "right",
+			select: (originalEvent) => createSelectEvent(entry, originalEvent),
+			closeOnSelect: () => props.closeOnSelect !== false
 		});
 	}
-	function getItemId(indexOrPath) {
-		return `${menuId.value}-item-${getPathKey(normalizePath(indexOrPath))}`;
-	}
-	function getSubmenuId(path) {
-		return `${menuId.value}-submenu-${getPathKey(path)}`;
-	}
-	function getItemElement(path) {
-		return document.getElementById(getItemId(path));
-	}
-	function getSubmenuElement(path) {
-		return document.getElementById(getSubmenuId(path));
-	}
-	function isSubmenuOpeningLeft(path) {
-		const submenuRect = getSubmenuElement(path)?.getBoundingClientRect();
-		const itemRect = getItemElement(path)?.getBoundingClientRect();
-		if (submenuRect && itemRect && hasMeasuredRect(submenuRect) && hasMeasuredRect(itemRect)) return submenuRect.right <= itemRect.left;
-		return placement.value.endsWith("end");
-	}
-	function getMenuActiveDescendant(menuPath) {
-		return arePathsEqual(getParentPath(focusedPath.value), menuPath) ? getItemId(focusedPath.value) : void 0;
+	function unregisterStaleEntries(nextRegisteredItemIds, nextRegisteredMenuIds) {
+		for (const id of registeredItemIds) if (!nextRegisteredItemIds.has(id)) interaction.unregisterItem(id);
+		for (const id of registeredMenuIds) {
+			if (nextRegisteredMenuIds.has(id)) continue;
+			interaction.unregisterMenu(id);
+			setMenuOpen(id, false);
+		}
 	}
-	watch(focusedPath, (path) => {
-		if (path.length === 0) return;
-		const targetPath = [...path];
-		nextTick(() => {
-			if (!arePathsEqual(targetPath, focusedPath.value)) return;
-			getItemElement(targetPath)?.scrollIntoView?.({ block: "nearest" });
-		});
-	});
+	function registerItems() {
+		const nextIndex = buildDropdownMenuDataIndex(items.value, rootMenuId, getStableItemId);
+		const nextRegisteredItemIds = new Set(nextIndex.entries.map((entry) => entry.itemId));
+		const nextRegisteredMenuIds = new Set(nextIndex.entries.flatMap((entry) => entry.submenuMenuId ? [entry.submenuMenuId] : []));
+		for (const entry of nextIndex.entries) registerEntry(nextIndex, entry);
+		unregisterStaleEntries(nextRegisteredItemIds, nextRegisteredMenuIds);
+		registeredItemIds = nextRegisteredItemIds;
+		registeredMenuIds = nextRegisteredMenuIds;
+		registrationIndex.value = nextIndex;
+		interaction.reconcile();
+	}
+	watch(collectionState, registerItems, { immediate: true });
 	return {
-		activeDescendantId,
-		focusMenu,
-		focusTrigger,
-		getItemId,
-		getSubmenuId,
-		getItemElement,
-		getSubmenuElement,
-		isSubmenuOpeningLeft,
-		getMenuActiveDescendant
+		openMenuIds,
+		registrationIndex
 	};
 }
 //#endregion
@@ -1845,26 +2298,6 @@ function useDropdownMenuDom({ menuId, rootRef, menuRef, targetRef, placement, fo
 var SAFE_TRIANGLE_PADDING = 2;
 var SAFE_TRIANGLE_ORIGIN_OFFSET = 2;
 var SAFE_TRIANGLE_TIMEOUT = 400;
-function getTriangleArea(a, b, c) {
-	return Math.abs((a.x * (b.y - c.y) + b.x * (c.y - a.y) + c.x * (a.y - b.y)) / 2);
-}
-function isPointInTriangle(point, triangle) {
-	const [a, b, c] = triangle;
-	const area = getTriangleArea(a, b, c);
-	const area1 = getTriangleArea(point, b, c);
-	const area2 = getTriangleArea(a, point, c);
-	const area3 = getTriangleArea(a, b, point);
-	return Math.abs(area - (area1 + area2 + area3)) < .5;
-}
-function clamp(value, min, max) {
-	return Math.min(Math.max(value, min), max);
-}
-function clampPointToRect(point, rect) {
-	return {
-		x: clamp(point.x, rect.left, rect.right),
-		y: clamp(point.y, rect.top, rect.bottom)
-	};
-}
 function getDropdownMenuSafeTriangle({ itemRect, submenuRect, origin }) {
 	const measuredItemRect = itemRect && hasMeasuredRect(itemRect) ? itemRect : null;
 	const opensRight = !measuredItemRect || submenuRect.left >= measuredItemRect.right;
@@ -1961,7 +2394,7 @@ function useDropdownMenuHoverIntent({ openSubmenuPath, getItemElement, getSubmen
 		}, SAFE_TRIANGLE_TIMEOUT);
 	}
 	function handleItemHover(item, path, event, commit) {
-		const point = event ? getEventPoint(event) : void 0;
+		const point = event ? getClientPoint(event) : void 0;
 		latestPointerPoint = point ?? latestPointerPoint;
 		if (point && shouldDelayHover(path, point)) {
 			delayHoveredItem(item, path, commit);
@@ -1970,7 +2403,7 @@ function useDropdownMenuHoverIntent({ openSubmenuPath, getItemElement, getSubmen
 		commit(item, path, point);
 	}
 	function handleMenuMousemove(event, commit) {
-		const point = getEventPoint(event);
+		const point = getClientPoint(event);
 		latestPointerPoint = point;
 		updateSafeTriangleOrigin(point);
 		if (!pendingHover) return;
@@ -1988,221 +2421,131 @@ function useDropdownMenuHoverIntent({ openSubmenuPath, getItemElement, getSubmen
 	};
 }
 //#endregion
-//#region src/components/dropdown-menu/useDropdownMenuInteractions.ts
-function useDropdownMenuInteractions({ props, emit, isDisabled, focusedPath, openSubmenuPath, getItemAtPath, focusItem, moveFocus, handleTypeahead, submenus, hoverIntent, disclosure, isSubmenuOpeningLeft }) {
-	function activateItem(item, path, event) {
-		if (item.disabled) return;
-		if (hasItemSubmenu(item)) {
-			openSubmenu(path, DEFAULT_FOCUS_TARGET, event instanceof MouseEvent ? getEventPoint(event) : void 0);
-			return;
-		}
-		selectItem(item, event);
+//#region src/components/dropdown-menu/useDropdownMenuDataController.ts
+function useDropdownMenuDataController({ props, items, rootMenuId, menuId, menuRef, actualPlacement, interaction, onSelect }) {
+	function getItemId(path) {
+		return `${menuId.value}-item-${getPathKey(path)}`;
 	}
-	function selectItem(item, originalEvent = new Event("select")) {
-		if (item.disabled) return;
-		const event = new CustomEvent("dropdown-menu-select", {
-			cancelable: true,
-			detail: {
-				originalEvent,
-				value: item.value
-			}
-		});
-		emit.select?.(item, event);
-		if (!event.defaultPrevented && props.closeOnSelect !== false) disclosure.close({ focusTrigger: true });
+	function getSubmenuId(path) {
+		return `${menuId.value}-submenu-${getPathKey(path)}`;
+	}
+	function getItemElement(path) {
+		return typeof document === "undefined" ? null : document.getElementById(getItemId(path));
+	}
+	function getSubmenuElement(path) {
+		return typeof document === "undefined" ? null : document.getElementById(getSubmenuId(path));
+	}
+	function isSubmenuOpeningLeft(path) {
+		const submenuRect = getSubmenuElement(path)?.getBoundingClientRect();
+		const itemRect = getItemElement(path)?.getBoundingClientRect();
+		if (submenuRect && itemRect && hasMeasuredRect(submenuRect) && hasMeasuredRect(itemRect)) return submenuRect.right <= itemRect.left;
+		return actualPlacement.value.endsWith("end");
+	}
+	const { openMenuIds, registrationIndex } = useDropdownMenuDataRegistration({
+		props,
+		items,
+		rootMenuId,
+		interaction,
+		menuRef,
+		getItemElement,
+		getSubmenuElement,
+		isSubmenuOpeningLeft,
+		onSelect
+	});
+	function getDataItemId(path) {
+		return registrationIndex.value.itemIdByPath.get(getPathKey(path));
 	}
-	function closeSubmenusAfter(menuPath) {
-		submenus.closeSubmenusAfter(menuPath);
-		hoverIntent.resetHoverIntent();
+	const focusedPath = computed({
+		get() {
+			const id = interaction.activeItemId.value;
+			return id ? [...registrationIndex.value.pathByItemId.get(id) ?? []] : [];
+		},
+		set(path) {
+			interaction.setActive(path.length > 0 ? getDataItemId(path) ?? null : null);
+		}
+	});
+	const focusedIndex = computed(() => focusedPath.value[0] ?? -1);
+	const activeDescendantId = computed(() => focusedPath.value.length === 0 ? void 0 : getItemId(focusedPath.value));
+	const openSubmenuPath = computed(() => {
+		let deepest = [];
+		for (const id of openMenuIds.value) {
+			const path = registrationIndex.value.pathByMenuId.get(id);
+			if (path && path.length > deepest.length) deepest = path;
+		}
+		return [...deepest];
+	});
+	function isItemFocused(indexOrPath) {
+		const id = getDataItemId(normalizePath(indexOrPath));
+		return Boolean(id && interaction.activeItemId.value === id);
+	}
+	function isSubmenuOpen(path) {
+		const itemId = getDataItemId(path);
+		const submenuId = itemId ? interaction.getItem(itemId)?.submenuId?.() : void 0;
+		return Boolean(submenuId && interaction.isMenuOpen(submenuId));
 	}
 	function openSubmenu(path, focus = DEFAULT_FOCUS_TARGET, point) {
-		const opened = submenus.openSubmenu(path, focus);
-		if (opened) hoverIntent.trackSubmenuOpen(path, point);
-		return opened;
+		const itemId = getDataItemId(path);
+		const submenuId = itemId ? interaction.getItem(itemId)?.submenuId?.() : void 0;
+		if (!submenuId || !interaction.openMenu(submenuId, focus)) return false;
+		hoverIntent.trackSubmenuOpen(path, point);
+		return true;
 	}
 	function closeSubmenu(path) {
-		const closed = submenus.closeSubmenu(path);
-		if (closed) hoverIntent.resetHoverIntent();
-		return closed;
-	}
-	function closeCurrentSubmenu() {
-		const closed = submenus.closeCurrentSubmenu();
+		const itemId = getDataItemId(path);
+		const submenuId = itemId ? interaction.getItem(itemId)?.submenuId?.() : void 0;
+		const closed = submenuId ? interaction.closeMenu(submenuId, false) : false;
 		if (closed) hoverIntent.resetHoverIntent();
 		return closed;
 	}
 	function commitHoveredItem(item, path, point) {
+		const itemId = getDataItemId(path);
+		const itemRegistration = itemId ? interaction.getItem(itemId) : void 0;
+		if (!itemRegistration) return;
 		hoverIntent.clearPendingHover();
-		focusedPath.value = [...path];
+		interaction.setActive(itemRegistration.id);
 		if (hasItemSubmenu(item)) openSubmenu(path, false, point);
-		else closeSubmenusAfter(getParentPath(path));
+		else interaction.closeSubmenus(itemRegistration.menuId);
 	}
+	const hoverIntent = useDropdownMenuHoverIntent({
+		openSubmenuPath,
+		getItemElement,
+		getSubmenuElement
+	});
 	function focusHoveredItem(item, indexOrPath, event) {
 		if (item.disabled) return;
-		const path = normalizePath(indexOrPath);
-		hoverIntent.handleItemHover(item, path, event, commitHoveredItem);
-	}
-	function selectFocusedItem(event) {
-		const item = getItemAtPath(focusedPath.value);
-		if (!item) return;
-		activateItem(item, focusedPath.value, event);
-	}
-	function moveFocusedItem(direction) {
-		const menuPath = moveFocus(direction);
-		if (menuPath) closeSubmenusAfter(menuPath);
-	}
-	function onTriggerClick() {
-		disclosure.toggle();
-	}
-	function onTriggerKeydown(event) {
-		if (isDisabled.value) return;
-		switch (event.key) {
-			case "Enter":
-			case " ":
-			case "ArrowDown":
-				event.preventDefault();
-				disclosure.open();
-				break;
-			case "ArrowUp":
-				event.preventDefault();
-				disclosure.open({ focus: "last" });
-				break;
-			case "Escape":
-				disclosure.close({ focusTrigger: true });
-				break;
-		}
+		hoverIntent.handleItemHover(item, normalizePath(indexOrPath), event, commitHoveredItem);
 	}
-	function onMenuKeydown(event) {
-		hoverIntent.resetHoverIntent();
-		if (handleTypeahead(event)) return;
-		switch (event.key) {
-			case "ArrowDown":
-				event.preventDefault();
-				moveFocusedItem(1);
-				break;
-			case "ArrowUp":
-				event.preventDefault();
-				moveFocusedItem(-1);
-				break;
-			case "Home":
-				event.preventDefault();
-				focusItem("first", getParentPath(focusedPath.value));
-				break;
-			case "End":
-				event.preventDefault();
-				focusItem("last", getParentPath(focusedPath.value));
-				break;
-			case "ArrowRight":
-			case "ArrowLeft":
-				onMenuHorizontalKeydown(event);
-				break;
-			case "Enter":
-			case " ":
-				event.preventDefault();
-				selectFocusedItem(event);
-				break;
-			case "Escape":
-				event.preventDefault();
-				if (!closeCurrentSubmenu()) disclosure.close({ focusTrigger: true });
-				break;
-			case "Tab":
-				disclosure.close();
-				break;
-		}
-	}
-	function onMenuHorizontalKeydown(event) {
-		const isRight = event.key === "ArrowRight";
-		const currentMenuPath = getParentPath(focusedPath.value);
-		const closePath = focusedPath.value.length > 1 ? currentMenuPath : arePathsEqual(focusedPath.value, openSubmenuPath.value) ? focusedPath.value : void 0;
-		if (closePath && isRight === isSubmenuOpeningLeft(closePath)) {
-			event.preventDefault();
-			closeSubmenu(closePath);
-			return;
-		}
-		const item = getItemAtPath(focusedPath.value);
-		if (!item || item.disabled || !hasItemSubmenu(item)) return;
-		if (isRight === isSubmenuOpeningLeft(focusedPath.value)) return;
-		event.preventDefault();
-		openSubmenu(focusedPath.value);
-	}
-	function onMenuMousemove(event) {
-		hoverIntent.handleMenuMousemove(event, commitHoveredItem);
-	}
-	function onMenuMouseleave() {
-		hoverIntent.resetHoverIntent();
-	}
-	return {
-		activateItem,
-		selectItem,
-		openSubmenu,
-		closeSubmenu,
-		focusHoveredItem,
-		onTriggerClick,
-		onTriggerKeydown,
-		onMenuKeydown,
-		onMenuMousemove,
-		onMenuMouseleave
-	};
-}
-//#endregion
-//#region src/components/dropdown-menu/useDropdownMenuNavigation.ts
-function useDropdownMenuNavigation(items) {
-	const focusedPath = ref([]);
-	const focusedIndex = computed(() => focusedPath.value[0] ?? -1);
-	function getItemsAtPath(path) {
-		let currentItems = items.value;
-		for (const index of path) {
-			const item = currentItems[index];
-			if (!item) return [];
-			currentItems = item.children ?? [];
-		}
-		return currentItems;
-	}
-	function getItemAtPath(path) {
-		if (path.length === 0) return void 0;
-		return getItemsAtPath(getParentPath(path))[path[path.length - 1]];
-	}
-	function focusItem(target, menuPath = []) {
-		const enabledIndexes = getEnabledIndexes(getItemsAtPath(menuPath), (item) => Boolean(item.disabled));
-		const index = target === "last" ? enabledIndexes[enabledIndexes.length - 1] : enabledIndexes[0];
-		if (index === void 0) {
-			if (menuPath.length === 0) focusedPath.value = [];
-			return false;
-		}
-		focusedPath.value = [...menuPath, index];
-		return true;
+	function selectItem(item, originalEvent = new Event("select")) {
+		const id = registrationIndex.value.primaryItemId.get(item);
+		if (id) interaction.selectItem(id, originalEvent);
 	}
-	function resetFocus() {
-		focusedPath.value = [];
+	function activateItem(_item, path, event) {
+		const id = getDataItemId(path);
+		if (id) interaction.activateItem(id, event);
 	}
-	function setFocusedIndex(index, menuPath = []) {
-		const item = getItemsAtPath(menuPath)[index];
-		if (!item || item.disabled) return false;
-		focusedPath.value = [...menuPath, index];
-		return true;
-	}
-	function isItemFocused(indexOrPath) {
-		return arePathsEqual(normalizePath(indexOrPath), focusedPath.value);
-	}
-	function moveFocus(direction) {
-		const menuPath = getParentPath(focusedPath.value);
-		const itemsAtPath = getItemsAtPath(menuPath);
-		const nextIndex = getNextEnabledIndex(itemsAtPath, focusedPath.value.length === 0 ? direction === 1 ? -1 : itemsAtPath.length : focusedPath.value[focusedPath.value.length - 1], direction, (item) => Boolean(item.disabled));
-		if (nextIndex === void 0) {
-			focusedPath.value = [];
-			return;
-		}
-		focusedPath.value = [...menuPath, nextIndex];
-		return menuPath;
+	function getMenuActiveDescendant(path) {
+		const pathKey = getPathKey(path);
+		const activeId = interaction.getActiveId(registrationIndex.value.menuIdByPath.get(pathKey) ?? rootMenuId).value;
+		const activePath = activeId ? registrationIndex.value.pathByItemId.get(activeId) : void 0;
+		return activePath ? getItemId(activePath) : void 0;
 	}
 	return {
 		focusedPath,
 		focusedIndex,
-		getItemsAtPath,
-		getItemAtPath,
-		focusItem,
-		resetFocus,
-		setFocusedIndex,
+		activeDescendantId,
+		getItemId,
+		getSubmenuId,
+		getItemElement,
+		getMenuActiveDescendant,
 		isItemFocused,
-		moveFocus
+		isSubmenuOpen,
+		openSubmenu,
+		closeSubmenu,
+		focusHoveredItem,
+		onMenuMousemove: (event) => hoverIntent.handleMenuMousemove(event, commitHoveredItem),
+		resetHoverIntent: hoverIntent.resetHoverIntent,
+		selectItem,
+		activateItem
 	};
 }
 //#endregion
@@ -2220,8 +2563,7 @@ function useDropdownMenuPortalPosition(options) {
 		flipOptions: () => options.props.flipOptions,
 		shift: () => options.props.shift !== false,
 		collisionPadding: () => options.props.collisionPadding ?? 8,
-		autoUpdateOptions: () => options.props.autoUpdateOptions,
-		restartKey: options.restartKey
+		autoUpdateOptions: () => options.props.autoUpdateOptions
 	});
 	return {
 		actualPlacement: floating.actualPlacement,
@@ -2230,6 +2572,67 @@ function useDropdownMenuPortalPosition(options) {
 	};
 }
 //#endregion
+//#region src/components/dropdown-menu/useDropdownMenuPresentation.ts
+function useDropdownMenuPresentation({ props, rootMenuId, menuId, isDisabled, isVisible, isExplicitTarget, actualPlacement, contentHasSubmenu, activeDescendantId, interaction, resetHoverIntent, onMenuMousemove, open, close, toggle }) {
+	const rootClass = computed(() => bem("rp-dropdown-menu", {
+		[`placement-${actualPlacement.value}`]: true,
+		target: isExplicitTarget.value,
+		open: isVisible.value,
+		disabled: isDisabled.value
+	}));
+	const contentClass = computed(() => bem("rp-dropdown-menu__content", { "has-submenu": contentHasSubmenu.value }));
+	const triggerProps = computed(() => ({
+		"aria-controls": isDisabled.value ? void 0 : menuId.value,
+		"aria-expanded": isDisabled.value ? void 0 : isVisible.value,
+		"aria-haspopup": "menu",
+		disabled: isDisabled.value || void 0,
+		onClick: () => interaction.onTriggerClick(),
+		onKeydown: (event) => interaction.onTriggerKeydown(event)
+	}));
+	function getKeyboardMenuId(event) {
+		const activeItem = interaction.activeItemId.value ? interaction.getItem(interaction.activeItemId.value) : void 0;
+		const openSubmenuId = activeItem?.submenuId?.();
+		if (openSubmenuId && interaction.isMenuOpen(openSubmenuId)) {
+			if (event.key === "Escape") return openSubmenuId;
+			const opensLeft = activeItem?.submenuDirection?.() === "left" || interaction.getMenu(openSubmenuId)?.placement().startsWith("left");
+			if (event.key === (opensLeft ? "ArrowRight" : "ArrowLeft")) return openSubmenuId;
+		}
+		if ([
+			"ArrowLeft",
+			"ArrowRight",
+			"Escape"
+		].includes(event.key) && interaction.activeMenuId.value !== rootMenuId) return interaction.activeMenuId.value;
+		return activeItem?.menuId ?? interaction.activeMenuId.value;
+	}
+	function onMenuKeydown(event) {
+		resetHoverIntent();
+		interaction.onMenuKeydown(getKeyboardMenuId(event), event);
+	}
+	return {
+		rootClass,
+		contentClass,
+		triggerProps,
+		contentProps: computed(() => ({
+			id: menuId.value,
+			role: "menu",
+			tabindex: -1,
+			"aria-label": props.ariaLabel || void 0,
+			"aria-activedescendant": activeDescendantId.value,
+			onKeydown: onMenuKeydown,
+			onMousemove: onMenuMousemove,
+			onMouseleave: resetHoverIntent
+		})),
+		slotProps: computed(() => ({
+			triggerProps: triggerProps.value,
+			isOpen: isVisible.value,
+			open,
+			close,
+			toggle
+		})),
+		onMenuKeydown
+	};
+}
+//#endregion
 //#region src/components/dropdown-menu/useDropdownMenuRenderItems.ts
 function useDropdownMenuRenderItems({ props, actualPlacement, items, getItemId, getSubmenuId, getMenuActiveDescendant, getItemElement, isItemFocused, isSubmenuOpen, activateItem, focusHoveredItem, selectItem, openSubmenu, closeSubmenu, close }) {
 	const renderedItems = computed(() => getRenderedItems(items.value));
@@ -2272,9 +2675,9 @@ function useDropdownMenuRenderItems({ props, actualPlacement, items, getItemId,
 			"aria-expanded": hasSubmenu ? resolvedSubmenuOpen : void 0,
 			"aria-haspopup": hasSubmenu ? "menu" : void 0,
 			"aria-disabled": disabled || void 0,
-			"data-disabled": disabled ? "" : void 0,
-			"data-highlighted": focused ? "" : void 0,
-			"data-submenu": hasSubmenu ? "" : void 0,
+			"data-disabled": toPresenceAttribute(disabled),
+			"data-highlighted": toPresenceAttribute(focused),
+			"data-submenu": toPresenceAttribute(hasSubmenu),
 			onClick: (event) => activateItem(item, path, event),
 			onMouseenter: (event) => focusHoveredItem(item, path, event)
 		};
@@ -2332,45 +2735,66 @@ function useDropdownMenuRenderItems({ props, actualPlacement, items, getItemId,
 	};
 }
 //#endregion
-//#region src/components/dropdown-menu/useDropdownSubmenus.ts
-function useDropdownSubmenus({ focusedPath, getItemAtPath, focusItem }) {
-	const openSubmenuPath = ref([]);
-	function resetSubmenus() {
-		openSubmenuPath.value = [];
-	}
-	function isSubmenuOpen(path) {
-		return path.length > 0 && isPathPrefix(path, openSubmenuPath.value);
-	}
-	function closeSubmenusAfter(menuPath) {
-		openSubmenuPath.value = [...menuPath];
-	}
-	function openSubmenu(path, focus = DEFAULT_FOCUS_TARGET) {
-		const item = getItemAtPath(path);
-		if (!item || item.disabled || !hasItemSubmenu(item)) return false;
-		openSubmenuPath.value = [...path];
-		if (focus && !focusItem(focus, path)) focusedPath.value = [...path];
-		return true;
-	}
-	function closeSubmenu(path) {
-		if (!isSubmenuOpen(path)) return false;
-		openSubmenuPath.value = getParentPath(path);
-		if (isPathPrefix(path, focusedPath.value) && focusedPath.value.length > path.length) focusedPath.value = [...path];
-		return true;
-	}
-	function closeCurrentSubmenu() {
-		const path = focusedPath.value.length > 1 ? getParentPath(focusedPath.value) : focusedPath.value;
-		if (path.length === 0 || !isSubmenuOpen(path)) return false;
-		return closeSubmenu(path);
-	}
-	return {
-		openSubmenuPath,
-		resetSubmenus,
-		isSubmenuOpen,
-		closeSubmenusAfter,
-		openSubmenu,
-		closeSubmenu,
-		closeCurrentSubmenu
-	};
+//#region src/components/dropdown-menu/useDropdownMenuTargetBindings.ts
+var TARGET_ATTRIBUTES = [
+	"aria-controls",
+	"aria-expanded",
+	"aria-haspopup",
+	"aria-disabled"
+];
+function syncTargetAttributes(target, id, visible, disabled) {
+	if (disabled) {
+		target.removeAttribute("aria-controls");
+		target.removeAttribute("aria-expanded");
+		target.removeAttribute("aria-haspopup");
+		target.setAttribute("aria-disabled", "true");
+		return;
+	}
+	target.setAttribute("aria-controls", id);
+	target.setAttribute("aria-expanded", String(visible));
+	target.setAttribute("aria-haspopup", "menu");
+	target.removeAttribute("aria-disabled");
+}
+function useDropdownMenuTargetBindings({ interaction, rootRef, menuRef, targetElement, isExplicitTarget, menuId, isVisible, isDisabled, ignoredTargets, pointerDownOutside, focusOutside, interactOutside }) {
+	function watchInside(source) {
+		watch(source, (element, previous) => {
+			if (previous) interaction.unregisterInside(previous);
+			if (element) interaction.registerInside(element);
+		}, { immediate: true });
+	}
+	watchInside(rootRef);
+	watchInside(menuRef);
+	watchInside(targetElement);
+	const cleanupDismissal = interaction.registerDismissal({
+		ignoredTargets,
+		pointerDownOutside,
+		focusOutside,
+		interactOutside
+	});
+	watch([isExplicitTarget, targetElement], ([explicit, target], _previous, onCleanup) => {
+		if (!explicit || !target) return;
+		const onClick = () => interaction.onTriggerClick();
+		const onKeydown = (event) => interaction.onTriggerKeydown(event);
+		target.addEventListener("click", onClick);
+		target.addEventListener("keydown", onKeydown);
+		onCleanup(() => {
+			target.removeEventListener("click", onClick);
+			target.removeEventListener("keydown", onKeydown);
+		});
+	}, { flush: "sync" });
+	watch([
+		isExplicitTarget,
+		targetElement,
+		menuId,
+		isVisible,
+		isDisabled
+	], ([explicit, target, id, visible, disabled], _previous, onCleanup) => {
+		if (!explicit || !target) return;
+		const snapshot = snapshotAttributes(target, TARGET_ATTRIBUTES);
+		syncTargetAttributes(target, id, visible, disabled);
+		onCleanup(() => restoreAttributes(target, snapshot));
+	}, { flush: "sync" });
+	onBeforeUnmount(cleanupDismissal);
 }
 //#endregion
 //#region src/components/dropdown-menu/useDropdownMenu.ts
@@ -2378,21 +2802,22 @@ function useDropdownMenu(props, emit = {}) {
 	const rootRef = ref(null);
 	const menuRef = ref(null);
 	const arrowRef = ref(null);
+	const generatedId = useId();
+	const interactionRootMenuId = `${generatedId}-interaction-root`;
 	const controllableOpen = useControllableValue({
 		modelValue: () => props.open,
 		defaultValue: () => false,
 		onChange: (open) => emit.openChange?.(open)
 	});
-	const generatedId = useId();
 	const menuId = computed(() => props.id ?? `${generatedId}-menu`);
 	const placement = computed(() => props.placement ?? "bottom-start");
 	const teleportTo = useTeleportTarget(() => props.teleportTo);
-	const teleportPositioningKey = useTeleportPositioningKey();
 	const shouldTeleport = computed(() => props.teleport !== false);
 	const { isExplicitTarget, reference, resolvedTarget } = useFloatingTarget(() => props.target, rootRef);
-	const targetElement = computed(() => isElementReference(resolvedTarget.value) ? resolvedTarget.value : null);
+	const targetElement = computed(() => isElement(resolvedTarget.value) ? resolvedTarget.value : null);
 	const visibleItems = computed(() => props.items ?? []);
 	const isDisabled = computed(() => Boolean(props.disabled));
+	const modal = computed(() => Boolean(props.modal));
 	const isOpen = controllableOpen.value;
 	const isVisible = computed(() => isOpen.value && !isDisabled.value);
 	const layer = useOverlayLayer({
@@ -2412,173 +2837,107 @@ function useDropdownMenu(props, emit = {}) {
 		menuRef,
 		arrowRef,
 		isVisible,
-		placement,
-		restartKey: () => [
-			shouldTeleport.value,
-			teleportTo.value,
-			teleportPositioningKey.value
-		]
+		placement
 	});
 	const placementSide = computed(() => actualPlacement.value.split("-")[0]);
-	const { focusedPath, focusedIndex, getItemsAtPath, getItemAtPath, focusItem, resetFocus, setFocusedIndex, isItemFocused, moveFocus } = useDropdownMenuNavigation(visibleItems);
-	const submenus = useDropdownSubmenus({
-		focusedPath,
-		getItemAtPath,
-		focusItem
+	function focusTrigger() {
+		nextTick(() => {
+			if (targetElement.value instanceof HTMLElement) {
+				targetElement.value.focus();
+				return;
+			}
+			rootRef.value?.querySelector("[aria-haspopup=\"menu\"]")?.focus();
+		});
+	}
+	function setOpen(nextOpen) {
+		if (nextOpen && isDisabled.value) return;
+		if (isOpen.value !== nextOpen) controllableOpen.setValue(nextOpen);
+	}
+	let resetHoverIntent;
+	const interaction = useDropdownMenuInteraction({
+		rootMenuId: interactionRootMenuId,
+		isOpen: isVisible,
+		disabled: isDisabled,
+		modal,
+		setOpen,
+		isTopLayer: layer.isTopLayer,
+		focusTrigger,
+		beforeOpen: () => resetHoverIntent(),
+		beforeClose: () => resetHoverIntent()
 	});
-	const { openSubmenuPath, isSubmenuOpen } = submenus;
-	const activeMenuPath = computed(() => getParentPath(focusedPath.value));
-	const typeahead = useTypeahead({
-		items: () => getItemsAtPath(activeMenuPath.value),
-		activeIndex: () => focusedPath.value.at(-1) ?? -1,
-		getKey: (item) => item.value,
-		getTextValue: (item) => item.label,
-		isDisabled: (item) => Boolean(item.disabled),
-		scopeKey: () => activeMenuPath.value.join("/"),
-		onMatch(_item, index) {
-			const menuPath = activeMenuPath.value;
-			if (setFocusedIndex(index, menuPath)) submenus.closeSubmenusAfter(menuPath);
-		}
+	const open = interaction.open;
+	const close = (options = {}) => interaction.close(options);
+	const toggle = interaction.toggle;
+	const cleanupRootMenu = interaction.registerMenu({
+		id: interactionRootMenuId,
+		element: () => menuRef.value,
+		placement: () => actualPlacement.value,
+		isOpen: () => isVisible.value
 	});
-	const { activeDescendantId, focusMenu, focusTrigger, getItemId, getSubmenuId, getItemElement, getSubmenuElement, isSubmenuOpeningLeft, getMenuActiveDescendant } = useDropdownMenuDom({
+	const dataController = useDropdownMenuDataController({
+		props,
+		items: visibleItems,
+		rootMenuId: interactionRootMenuId,
 		menuId,
-		rootRef,
 		menuRef,
-		targetRef: targetElement,
-		placement: actualPlacement,
-		focusedPath
-	});
-	const hoverIntent = useDropdownMenuHoverIntent({
-		openSubmenuPath,
-		getItemElement,
-		getSubmenuElement
+		actualPlacement,
+		interaction,
+		onSelect: (item, event) => emit.select?.(item, event)
 	});
-	const disclosure = useDropdownMenuDisclosure({
+	resetHoverIntent = dataController.resetHoverIntent;
+	const { renderedItems, renderContext, getItemProps, getItemSlotProps } = useDropdownMenuRenderItems({
 		props,
-		emit,
-		rootRef,
-		menuRef,
-		targetRef: targetElement,
-		setControllableOpen: controllableOpen.setValue,
-		isDisabled,
-		isOpen,
-		isVisible,
-		focusedPath,
-		resetFocus,
-		resetSubmenus: submenus.resetSubmenus,
-		resetHoverIntent: hoverIntent.resetHoverIntent,
-		focusItem,
-		focusMenu,
-		focusTrigger,
-		layer
+		actualPlacement,
+		items: visibleItems,
+		getItemId: dataController.getItemId,
+		getSubmenuId: dataController.getSubmenuId,
+		getMenuActiveDescendant: dataController.getMenuActiveDescendant,
+		getItemElement: dataController.getItemElement,
+		isItemFocused: dataController.isItemFocused,
+		isSubmenuOpen: dataController.isSubmenuOpen,
+		activateItem: dataController.activateItem,
+		focusHoveredItem: dataController.focusHoveredItem,
+		selectItem: dataController.selectItem,
+		openSubmenu: dataController.openSubmenu,
+		closeSubmenu: dataController.closeSubmenu,
+		close
 	});
-	const { open, close, toggle } = disclosure;
-	const { activateItem, selectItem, openSubmenu, closeSubmenu, focusHoveredItem, onTriggerClick, onTriggerKeydown, onMenuKeydown, onMenuMousemove, onMenuMouseleave } = useDropdownMenuInteractions({
+	const presentation = useDropdownMenuPresentation({
 		props,
-		emit,
+		rootMenuId: interactionRootMenuId,
+		menuId,
 		isDisabled,
-		focusedPath,
-		openSubmenuPath,
-		getItemAtPath,
-		focusItem,
-		moveFocus,
-		handleTypeahead: typeahead.handleKey,
-		submenus,
-		hoverIntent,
-		disclosure,
-		isSubmenuOpeningLeft
-	});
-	const rootClass = computed(() => bem("rp-dropdown-menu", {
-		[`placement-${actualPlacement.value}`]: true,
-		target: isExplicitTarget.value,
-		open: isVisible.value,
-		disabled: isDisabled.value
-	}));
-	const contentClass = computed(() => bem("rp-dropdown-menu__content", { "has-submenu": contentHasSubmenu.value }));
-	const triggerProps = computed(() => ({
-		"aria-controls": isDisabled.value ? void 0 : menuId.value,
-		"aria-expanded": isDisabled.value ? void 0 : isVisible.value,
-		"aria-haspopup": "menu",
-		disabled: isDisabled.value || void 0,
-		onClick: onTriggerClick,
-		onKeydown: onTriggerKeydown
-	}));
-	const contentProps = computed(() => ({
-		id: menuId.value,
-		role: "menu",
-		tabindex: -1,
-		"aria-label": props.ariaLabel || void 0,
-		"aria-activedescendant": activeDescendantId.value,
-		onKeydown: onMenuKeydown,
-		onMousemove: onMenuMousemove,
-		onMouseleave: onMenuMouseleave
-	}));
-	const slotProps = computed(() => ({
-		triggerProps: triggerProps.value,
-		isOpen: isVisible.value,
+		isVisible,
+		isExplicitTarget,
+		actualPlacement,
+		contentHasSubmenu,
+		activeDescendantId: dataController.activeDescendantId,
+		interaction,
+		resetHoverIntent,
+		onMenuMousemove: dataController.onMenuMousemove,
 		open,
 		close,
 		toggle
-	}));
-	const { renderedItems, renderContext, getItemProps, getItemSlotProps } = useDropdownMenuRenderItems({
-		props,
-		actualPlacement,
-		items: visibleItems,
-		getItemId,
-		getSubmenuId,
-		getMenuActiveDescendant,
-		getItemElement,
-		isItemFocused,
-		isSubmenuOpen,
-		activateItem,
-		focusHoveredItem,
-		selectItem,
-		openSubmenu,
-		closeSubmenu,
-		close
 	});
-	watch([isExplicitTarget, targetElement], ([explicit, target], _previous, onCleanup) => {
-		if (!explicit || !target) return;
-		target.addEventListener("click", onTriggerClick);
-		target.addEventListener("keydown", onTriggerKeydown);
-		onCleanup(() => {
-			target.removeEventListener("click", onTriggerClick);
-			target.removeEventListener("keydown", onTriggerKeydown);
-		});
-	}, { flush: "sync" });
-	watch(isVisible, (visible) => {
-		if (!visible) typeahead.reset();
-	}, { flush: "sync" });
-	watch([
-		isExplicitTarget,
+	useDropdownMenuTargetBindings({
+		interaction,
+		rootRef,
+		menuRef,
 		targetElement,
+		isExplicitTarget,
 		menuId,
 		isVisible,
-		isDisabled
-	], ([explicit, target, id, visible, disabled], _previous, onCleanup) => {
-		if (!explicit || !target) return;
-		const snapshot = new Map([
-			"aria-controls",
-			"aria-expanded",
-			"aria-haspopup",
-			"aria-disabled"
-		].map((attribute) => [attribute, target.getAttribute(attribute)]));
-		if (disabled) {
-			target.removeAttribute("aria-controls");
-			target.removeAttribute("aria-expanded");
-			target.removeAttribute("aria-haspopup");
-			target.setAttribute("aria-disabled", "true");
-		} else {
-			target.setAttribute("aria-controls", id);
-			target.setAttribute("aria-expanded", String(visible));
-			target.setAttribute("aria-haspopup", "menu");
-			target.removeAttribute("aria-disabled");
-		}
-		onCleanup(() => {
-			for (const [attribute, value] of snapshot) if (value == null) target.removeAttribute(attribute);
-			else target.setAttribute(attribute, value);
-		});
-	}, { flush: "sync" });
+		isDisabled,
+		ignoredTargets: () => props.ignore ?? [],
+		pointerDownOutside: emit.pointerDownOutside,
+		focusOutside: emit.focusOutside,
+		interactOutside: emit.interactOutside
+	});
+	const layeredContentStyle = computed(() => ({
+		...contentStyle.value,
+		zIndex: layer.zIndex.value
+	}));
+	onBeforeUnmount(cleanupRootMenu);
 	return {
 		rootRef,
 		menuRef,
@@ -2589,33 +2948,30 @@ function useDropdownMenu(props, emit = {}) {
 		visibleItems,
 		renderedItems,
 		renderContext,
-		focusedIndex,
-		focusedPath,
-		activeDescendantId,
-		rootClass,
-		contentClass,
-		contentStyle: computed(() => ({
-			...contentStyle.value,
-			zIndex: layer.zIndex.value
-		})),
+		focusedIndex: dataController.focusedIndex,
+		focusedPath: dataController.focusedPath,
+		activeDescendantId: dataController.activeDescendantId,
+		rootClass: presentation.rootClass,
+		contentClass: presentation.contentClass,
+		contentStyle: layeredContentStyle,
 		arrowStyle,
 		actualPlacement,
 		placementSide,
 		isTargetMode: isExplicitTarget,
 		teleportTo,
 		shouldTeleport,
-		triggerProps,
-		contentProps,
-		slotProps,
+		triggerProps: presentation.triggerProps,
+		contentProps: presentation.contentProps,
+		slotProps: presentation.slotProps,
 		open,
 		close,
 		toggle,
-		selectItem,
-		openSubmenu,
-		closeSubmenu,
-		onItemMouseenter: focusHoveredItem,
-		onTriggerKeydown,
-		onMenuKeydown,
+		selectItem: dataController.selectItem,
+		openSubmenu: dataController.openSubmenu,
+		closeSubmenu: dataController.closeSubmenu,
+		onItemMouseenter: dataController.focusHoveredItem,
+		onTriggerKeydown: (event) => interaction.onTriggerKeydown(event),
+		onMenuKeydown: presentation.onMenuKeydown,
 		getItemProps,
 		getItemSlotProps
 	};
@@ -2701,12 +3057,17 @@ var dropdown_menu_default = /* @__PURE__ */ defineVaporComponent({
 			focusOutside: (event) => emit("focusOutside", event),
 			interactOutside: (event) => emit("interactOutside", event)
 		});
+		const templateRefs = {
+			root: rootRef,
+			menu: menuRef,
+			arrow: arrowRef
+		};
 		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
 		const state = computed(() => isVisible.value ? "open" : "closed");
 		const rootAttrs = computed(() => getRootAttrs({
 			class: rootClass.value,
 			"data-state": state.value,
-			"data-disabled": presence(props.disabled)
+			"data-disabled": toPresenceAttribute(props.disabled)
 		}));
 		const publicSlotProps = computed(() => {
 			const partAttrs = getPartAttrs("trigger");
@@ -2717,7 +3078,7 @@ var dropdown_menu_default = /* @__PURE__ */ defineVaporComponent({
 					...props.classNames?.trigger !== void 0 ? { class: partAttrs.class } : {},
 					...props.styles?.trigger !== void 0 ? { style: partAttrs.style } : {},
 					"data-state": state.value,
-					"data-disabled": presence(props.disabled)
+					"data-disabled": toPresenceAttribute(props.disabled)
 				}
 			};
 		});
@@ -2753,10 +3114,10 @@ var dropdown_menu_default = /* @__PURE__ */ defineVaporComponent({
 					setInsertionState(n26, null, 0);
 					createIf(() => __props.arrow, () => {
 						const n7 = t0();
-						_setTemplateRef(n7, arrowRef, null, "arrowRef");
 						renderEffect(() => {
 							setAttr(n7, "data-side", unref(placementSide));
 							setStyle(n7, unref(arrowStyle));
+							_setTemplateRef(n7, templateRefs.arrow);
 						});
 						return n7;
 					});
@@ -2799,12 +3160,12 @@ var dropdown_menu_default = /* @__PURE__ */ defineVaporComponent({
 							return n23;
 						}, null, 129)];
 					}, { _: 8 }) });
-					_setTemplateRef(n26, menuRef, null, "menuRef");
+					setTemplateRefBinding(n26, () => templateRefs.menu, _setTemplateRef);
 					return n26;
 				}, null, 129);
 			}, { _: 8 }));
 		});
-		setStaticTemplateRef(n29, rootRef, null, "rootRef");
+		setTemplateRefBinding(n29, () => templateRefs.root);
 		return n29;
 	}
 });