ropav 0.0.11 → 0.0.12

package/dist/dropdown-menu.js

@@ -2,17 +2,16 @@ import './dropdown-menu.css';
 import { t as bem } from "./bem.js";
 import { n as useStylesApi, t as presence } from "./styles-api.js";
 import { t as useRequiredInject } from "./useRequiredInject.js";
+import { t as useOverlayLayer } from "./useOverlayLayer.js";
 import { n as useFloatingPosition, r as useFloatingTarget, t as isElementReference } from "./useFloatingPosition.js";
-import { n as useTeleportTarget, t as provideTeleportTarget } from "./useTeleportTarget.js";
-import { t as useClickOutside } from "./useClickOutside.js";
-import { Teleport, VaporTeleport, VaporTransition, computed, createComponent, createIf, createSlot, createTemplateRefSetter, defineComponent, defineVaporComponent, extend, h, markRaw, mergeProps, nextTick, onBeforeUnmount, onMounted, onUnmounted, provide, ref, renderEffect, setAttr, setDynamicProps, setInsertionState, setStaticTemplateRef, setStyle, setText, shallowRef, template, toDisplayString, txt, unref, useId, watch } from "vue";
-//#region src/components/dropdown-menu/dropdown-menu-primitives.ts
+import { n as useTeleportPositioningKey, r as useTeleportTarget, t as provideTeleportTarget } from "./useTeleportTarget.js";
+import { VaporTeleport, VaporTransition, child, computed, createComponent, createComponentWithFallback, createDynamicComponent, createFor, createIf, createSlot, createTemplateRefSetter, defineVaporComponent, extend, isRef, markRaw, 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");
-var openLayers = [];
 function optionalAttr(value) {
 	return value || void 0;
 }
@@ -20,10 +19,20 @@ function getFocusTarget(options) {
 	if (typeof options === "string") return options;
 	return options?.focus ?? "first";
 }
-function toHTMLElement(value) {
+function toHTMLElement(value, fallbackId) {
 	if (typeof HTMLElement !== "undefined" && value instanceof HTMLElement) return value;
-	const element = value?.$el;
-	return typeof HTMLElement !== "undefined" && element instanceof HTMLElement ? element : null;
+	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 resolveHTMLElementRef(value, fallbackId, resolve) {
+	const element = toHTMLElement(value, fallbackId);
+	resolve(element);
+	if (element || !value) return;
+	nextTick(() => resolve(toHTMLElement(value, fallbackId)));
 }
 function createPointRect(point) {
 	return {
@@ -78,18 +87,6 @@ function getOpenDirection(sub) {
 function getCloseDirection(menu) {
 	return getPlacementSide(menu.actualPlacement.value) === "left" ? "ArrowRight" : "ArrowLeft";
 }
-function addOpenLayer(root) {
-	const index = openLayers.indexOf(root);
-	if (index >= 0) openLayers.splice(index, 1);
-	openLayers.push(root);
-}
-function removeOpenLayer(root) {
-	const index = openLayers.indexOf(root);
-	if (index >= 0) openLayers.splice(index, 1);
-}
-function isTopLayer(root) {
-	return openLayers[openLayers.length - 1] === root;
-}
 function blockDocumentClick(event) {
 	if (event.cancelable) event.preventDefault();
 	event.stopPropagation();
@@ -233,244 +230,438 @@ function createMenuContext(options) {
 	};
 	return context;
 }
-function primitiveAsProp(defaultValue) {
+function usePrimitiveItem(componentName, props, emitSelect, options) {
+	const menu = useRequiredInject(menuKey, componentName);
+	const generatedId = useId();
+	const id = computed(() => props.id ?? `${generatedId}-item`);
+	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;
+		const selectEvent = createSelectEvent(originalEvent, props.value);
+		emitSelect(selectEvent);
+		options.afterSelect?.();
+		if (!selectEvent.defaultPrevented && (props.closeOnSelect ?? options.defaultCloseOnSelect)) menu.root.close({ returnFocus: true });
+	}
+	const registration = {
+		get id() {
+			return id.value;
+		},
+		element: () => element.value,
+		disabled: () => isDisabled.value,
+		activate
+	};
+	menu.registerItem(registration);
+	watch(id, (nextId, previousId) => {
+		menu.unregisterItem(previousId);
+		menu.registerItem(registration);
+		if (menu.activeId.value === previousId) menu.activeId.value = nextId;
+	});
+	onBeforeUnmount(() => menu.unregisterItem(id.value));
+	function setElement(value) {
+		resolveHTMLElementRef(value, id.value, (resolved) => {
+			element.value = resolved;
+		});
+	}
+	function onPointerenter() {
+		if (isDisabled.value) return;
+		menu.closeSubmenus();
+		menu.setActive(id.value);
+	}
+	function select() {
+		activate(new Event("select"));
+	}
 	return {
-		type: [
-			String,
-			Object,
-			Function
-		],
-		default: defaultValue
+		menu,
+		id,
+		element,
+		isDisabled,
+		focused,
+		checked: options.checked,
+		activate,
+		select,
+		setElement,
+		onPointerenter
 	};
 }
-var DropdownMenuRoot = defineComponent({
-	name: "RpDropdownMenuRoot",
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu-checkbox-item.vue
+var dropdown_menu_checkbox_item_default = /* @__PURE__ */ defineVaporComponent({
+	name: "RpDropdownMenuCheckboxItem",
+	inheritAttrs: false,
+	__name: "dropdown-menu-checkbox-item",
 	props: {
-		id: String,
-		open: {
-			type: Boolean,
+		modelValue: {
+			type: [Boolean, String],
 			default: void 0
 		},
-		defaultOpen: {
-			type: Boolean,
+		defaultValue: {
+			type: [Boolean, String],
 			default: false
 		},
+		id: {},
+		as: { default: "button" },
 		disabled: {
 			type: Boolean,
 			default: false
 		},
-		modal: {
+		destructive: {
 			type: Boolean,
-			default: true
-		},
-		target: {
-			type: [String, Object],
-			default: null
+			default: false
 		},
-		virtualAnchor: {
-			type: Object,
-			default: null
+		closeOnSelect: {
+			type: Boolean,
+			default: false
 		}
 	},
-	emits: ["update:open"],
-	setup(props, { emit, expose, slots }) {
-		const generatedId = useId();
-		const id = computed(() => props.id ?? `${generatedId}-dropdown-menu`);
-		const uncontrolledOpen = ref(props.defaultOpen);
-		const isOpen = computed(() => props.open ?? uncontrolledOpen.value);
-		const disabled = computed(() => props.disabled);
-		const modal = computed(() => props.modal);
-		const trigger = ref(null);
-		const triggerId = ref();
-		const contentId = ref();
-		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 inside = /* @__PURE__ */ new Set();
-		let returnFocusElement = null;
-		function setOpen(value) {
-			if (value && disabled.value) return;
-			const previous = isOpen.value;
-			if (props.open === void 0) uncontrolledOpen.value = value;
-			if (previous !== value) emit("update:open", value);
-		}
-		function rememberFocus() {
-			if (typeof document === "undefined" || returnFocusElement) return;
-			const activeElement = document.activeElement;
-			if (activeElement instanceof HTMLElement) returnFocusElement = activeElement;
+	emits: ["select", "update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const attrs = useAttrs();
+		const uncontrolled = ref(props.defaultValue);
+		const value = computed(() => props.modelValue ?? uncontrolled.value);
+		const checked = computed(() => value.value === "indeterminate" ? "mixed" : value.value);
+		const state = computed(() => value.value === "indeterminate" ? "indeterminate" : value.value ? "checked" : "unchecked");
+		function toggleChecked() {
+			const nextValue = value.value === "indeterminate" ? true : !value.value;
+			if (props.modelValue === void 0) uncontrolled.value = nextValue;
+			emit("update:modelValue", nextValue);
 		}
-		function open(options) {
-			if (disabled.value) return;
-			rememberFocus();
-			pendingFocus.value = getFocusTarget(options);
-			setOpen(true);
+		provide(checkedKey, {
+			state,
+			checked: computed(() => value.value !== false)
+		});
+		const { id, isDisabled, focused, activate, select, setElement, onPointerenter } = usePrimitiveItem("RpDropdownMenuCheckboxItem", props, (event) => emit("select", event), {
+			checked,
+			defaultCloseOnSelect: false,
+			afterSelect: toggleChecked
+		});
+		function onClick(event) {
+			if (!event.defaultPrevented) activate(event);
 		}
-		function focusReturnTarget() {
-			const target = returnFocusElement ?? trigger.value;
-			nextTick(() => target?.focus());
+		const rootAttrs = computed(() => mergeProps(attrs, {
+			id: id.value,
+			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),
+			"aria-checked": checked.value,
+			"data-disabled": optionalAttr(isDisabled.value),
+			"data-focused": optionalAttr(focused.value),
+			"data-highlighted": optionalAttr(focused.value),
+			"data-state": state.value,
+			class: bem("rp-dropdown-menu__item", {
+				focused: focused.value,
+				disabled: isDisabled.value,
+				destructive: props.destructive
+			}),
+			onClick,
+			onMouseenter: onPointerenter
+		}));
+		const n1 = createDynamicComponent(() => __props.as, { $: [() => rootAttrs.value] }, extend(() => {
+			return createSlot("default", {
+				focused: () => unref(focused),
+				disabled: () => unref(isDisabled),
+				select: () => unref(select)
+			});
+		}, { _: 8 }), 1);
+		setTemplateRefBinding(n1, () => setElement, void 0, void 0, "setElement");
+		return n1;
+	}
+});
+//#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;
 		}
-		function close(options = {}) {
-			setOpen(false);
-			pendingFocus.value = false;
-			if (options.focusTrigger || options.returnFocus) focusReturnTarget();
+		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";
+	const root = useRequiredInject(rootKey, componentName);
+	const sub = submenu ? useRequiredInject(subKey, componentName) : void 0;
+	const generatedId = useId();
+	const id = computed(() => props.id ?? `${generatedId}-${submenu ? "submenu" : "menu"}`);
+	const element = ref(null);
+	const arrowElement = ref(null);
+	const defaultPlacement = submenu ? "right-start" : "bottom-start";
+	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);
+			events.escapeKeyDown(customEvent);
+			if (customEvent.defaultPrevented) return;
+			if (sub) sub.close(true);
+			else root.close({ returnFocus: true });
 		}
-		function toggle() {
-			if (isOpen.value) close({ returnFocus: true });
-			else open();
+	});
+	const floating = useFloatingPosition({
+		reference,
+		floating: element,
+		arrow: arrowElement,
+		open: isOpen,
+		placement: () => props.placement ?? defaultPlacement,
+		strategy: () => props.strategy ?? "absolute",
+		offset: () => props.offset,
+		flip: () => props.avoidCollisions !== false && props.flip !== false,
+		shift: () => props.avoidCollisions !== false && props.shift !== false,
+		collisionPadding: () => props.collisionPadding ?? 8,
+		restartKey: teleportPositioningKey
+	});
+	watch(floating.actualPlacement, (value) => {
+		actualPlacement.value = value;
+	}, { immediate: true });
+	const shouldRender = computed(() => props.forceMount === true || isOpen.value);
+	let layerBranchCleanup;
+	provide(menuKey, menu);
+	if (sub) sub.menu = menu;
+	function setElement(value) {
+		resolveHTMLElementRef(value, id.value, (resolved) => {
+			const previous = element.value;
+			if (previous) root.unregisterInside(previous);
+			layerBranchCleanup?.();
+			layerBranchCleanup = void 0;
+			element.value = resolved;
+			if (resolved) root.registerInside(resolved);
+			if (!sub) root.layer.element.value = resolved;
+			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();
 		}
-		function openAt(point, options) {
-			activeReference.value = createVirtualAnchor(point);
-			open(options);
+		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();
 		}
-		function setTrigger(element, nextId) {
-			if (trigger.value && trigger.value !== element) inside.delete(trigger.value);
-			trigger.value = element;
-			triggerId.value = nextId;
-			if (element) inside.add(element);
+		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();
+			return;
 		}
-		const context = {
-			id,
-			isOpen,
-			disabled,
-			modal,
-			trigger,
-			triggerId,
-			contentId,
-			reference,
-			pendingFocus,
-			open,
-			close,
-			toggle,
-			openAt,
-			setTrigger,
-			setReference(nextReference) {
-				activeReference.value = nextReference;
-			},
-			setReturnFocus(element) {
-				returnFocusElement = element;
-			},
-			registerInside(element) {
-				inside.add(element);
-			},
-			unregisterInside(element) {
-				inside.delete(element);
-			},
-			isInside(target) {
-				return target instanceof Node && [...inside].some((element) => element.contains(target));
-			}
-		};
-		const slotProps = computed(() => ({
-			isOpen: isOpen.value,
-			open,
-			close,
-			toggle,
-			openAt
-		}));
-		watch(disabled, (value) => {
-			if (value) close();
-		});
-		watch(isOpen, (value) => {
-			if (value) addOpenLayer(context);
-			else removeOpenLayer(context);
-		}, { immediate: true });
-		onBeforeUnmount(() => removeOpenLayer(context));
-		provide(rootKey, context);
-		expose({
-			open,
-			close,
-			toggle,
-			openAt
+		nextTick(() => {
+			const focus = sub ? sub.pendingFocus.value : root.pendingFocus.value;
+			menu.focus(focus || "first");
 		});
-		return () => slots.default?.(slotProps.value);
+	}, {
+		flush: "post",
+		immediate: true
+	});
+	onMounted(() => {
+		if (sub) sub.contentId.value = id.value;
+		else root.contentId.value = id.value;
+		if (isOpen.value) menu.focus((sub ? sub.pendingFocus.value : root.pendingFocus.value) || "first");
+	});
+	onBeforeUnmount(() => {
+		setDocumentListeners(false);
+		layerBranchCleanup?.();
+		if (element.value) root.unregisterInside(element.value);
+		if (!sub && root.layer.element.value === element.value) root.layer.element.value = null;
+		if (sub) sub.menu = null;
+		else if (root.contentId.value === id.value) root.contentId.value = void 0;
+	});
+	const placementSide = computed(() => floating.actualPlacement.value.split("-")[0]);
+	const placementAlign = computed(() => floating.actualPlacement.value.split("-")[1] ?? "center");
+	const rootAttrs = computed(() => mergeProps(attrs, {
+		id: id.value,
+		role: "menu",
+		tabindex: -1,
+		hidden: optionalAttr(!isOpen.value),
+		class: submenu ? bem("rp-dropdown-menu__submenu", {
+			compound: true,
+			open: isOpen.value
+		}) : bem("rp-dropdown-menu__content", {
+			compound: true,
+			open: isOpen.value
+		}),
+		style: [
+			floating.floatingStyle.value,
+			{ zIndex: root.layer.zIndex.value },
+			!isOpen.value ? { display: "none" } : void 0
+		],
+		"aria-label": props.ariaLabel,
+		"aria-labelledby": props.ariaLabelledby ?? (submenu ? void 0 : root.triggerId.value),
+		"aria-describedby": props.ariaDescribedby,
+		"aria-activedescendant": menu.activeId.value ?? void 0,
+		"data-state": isOpen.value ? "open" : "closed",
+		"data-placement": floating.actualPlacement.value,
+		"data-side": placementSide.value,
+		"data-align": placementAlign.value,
+		onKeydown: menu.onKeydown
+	}));
+	function close() {
+		if (sub) sub.close(true);
+		else root.close({ returnFocus: true });
 	}
-});
-var DropdownMenuTrigger = defineComponent({
-	name: "RpDropdownMenuTrigger",
+	return {
+		id,
+		element,
+		arrowElement,
+		actualPlacement,
+		isOpen,
+		shouldRender,
+		placementSide,
+		rootAttrs,
+		floating,
+		setElement,
+		close
+	};
+}
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu-content.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0$3 = template("<span class=rp-dropdown-menu__arrow aria-hidden=true>");
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu-content.vue
+var dropdown_menu_content_default = /* @__PURE__ */ defineVaporComponent({
+	name: "RpDropdownMenuContent",
 	inheritAttrs: false,
+	__name: "dropdown-menu-content",
 	props: {
-		id: String,
-		as: primitiveAsProp("button"),
-		disabled: {
+		id: {},
+		as: { default: "div" },
+		placement: { default: "bottom-start" },
+		offset: {},
+		strategy: { default: "absolute" },
+		flip: {
 			type: Boolean,
-			default: false
-		}
-	},
-	setup(props, { attrs, slots }) {
-		const root = useRequiredInject(rootKey, "RpDropdownMenuTrigger");
-		const generatedId = useId();
-		const id = computed(() => props.id ?? `${generatedId}-trigger`);
-		const element = ref(null);
-		const isDisabled = computed(() => root.disabled.value || props.disabled);
-		function setElement(value) {
-			element.value = toHTMLElement(value);
-			root.setTrigger(element.value, id.value);
-		}
-		function openWithReference(focus = "first") {
-			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();
-		}
-		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 });
-		}
-		onBeforeUnmount(() => root.setTrigger(null));
-		return () => {
-			const as = props.as ?? "button";
-			return h(as, mergeProps(attrs, {
-				id: id.value,
-				ref: setElement,
-				type: as === "button" ? "button" : void 0,
-				disabled: as === "button" ? optionalAttr(isDisabled.value) : void 0,
-				"aria-controls": root.contentId.value,
-				"aria-expanded": root.isOpen.value,
-				"aria-haspopup": "menu",
-				"aria-disabled": as === "button" ? void 0 : optionalAttr(isDisabled.value),
-				"data-state": root.isOpen.value ? "open" : "closed",
-				"data-disabled": optionalAttr(isDisabled.value),
-				onClick,
-				onKeydown
-			}), slots.default?.({ isOpen: root.isOpen.value }));
-		};
+			default: true
+		},
+		shift: {
+			type: Boolean,
+			default: true
+		},
+		collisionPadding: { default: 8 },
+		arrow: {
+			type: Boolean,
+			default: false
+		},
+		avoidCollisions: {
+			type: Boolean,
+			default: true
+		},
+		forceMount: {
+			type: Boolean,
+			default: false
+		},
+		ignore: {},
+		ariaLabel: {},
+		ariaLabelledby: {},
+		ariaDescribedby: {}
+	},
+	emits: [
+		"escapeKeyDown",
+		"pointerDownOutside",
+		"focusOutside",
+		"interactOutside"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { arrowElement, actualPlacement, isOpen, shouldRender, placementSide, rootAttrs, floating, setElement, close } = useDropdownMenuPrimitiveContent(props, useAttrs(), {
+			escapeKeyDown: (event) => emit("escapeKeyDown", event),
+			pointerDownOutside: (event) => emit("pointerDownOutside", event),
+			focusOutside: (event) => emit("focusOutside", event),
+			interactOutside: (event) => emit("interactOutside", event)
+		}, false);
+		const _setTemplateRef = createTemplateRefSetter();
+		return createIf(() => unref(shouldRender), () => {
+			const n6 = createDynamicComponent(() => __props.as, { $: [() => unref(rootAttrs)] }, extend(() => {
+				return [createIf(() => __props.arrow, () => {
+					const n4 = t0$3();
+					_setTemplateRef(n4, arrowElement, null, "arrowElement");
+					renderEffect(() => {
+						setAttr(n4, "data-side", unref(placementSide));
+						setStyle(n4, unref(floating).arrowStyle.value);
+					});
+					return n4;
+				}, null, 129), createSlot("default", {
+					isOpen: () => unref(isOpen),
+					placement: () => unref(actualPlacement),
+					close: () => unref(close)
+				})];
+			}, { _: 8 }), 1);
+			setTemplateRefBinding(n6, () => setElement, void 0, void 0, "setElement");
+			return n6;
+		});
 	}
 });
-var DropdownMenuContextTrigger = defineComponent({
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu-context-trigger.vue
+var dropdown_menu_context_trigger_default = /* @__PURE__ */ defineVaporComponent({
 	name: "RpDropdownMenuContextTrigger",
 	inheritAttrs: false,
+	__name: "dropdown-menu-context-trigger",
 	props: {
-		id: String,
-		as: primitiveAsProp("span"),
+		id: {},
+		as: { default: "span" },
 		disabled: {
 			type: Boolean,
 			default: false
 		},
-		longPressDelay: {
-			type: Number,
-			default: 700
-		},
-		longPressTolerance: {
-			type: Number,
-			default: 10
-		}
+		longPressDelay: { default: 700 },
+		longPressTolerance: { default: 10 }
 	},
-	setup(props, { attrs, slots }) {
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
 		const root = useRequiredInject(rootKey, "RpDropdownMenuContextTrigger");
 		const generatedId = useId();
 		const id = computed(() => props.id ?? `${generatedId}-context-trigger`);
@@ -482,11 +673,13 @@ var DropdownMenuContextTrigger = defineComponent({
 		let longPressOpened = false;
 		let suppressUntil = 0;
 		function setElement(value) {
-			const previous = element.value;
-			if (previous) root.unregisterInside(previous);
-			element.value = toHTMLElement(value);
-			if (element.value) root.registerInside(element.value);
-			if (!root.triggerId.value) root.triggerId.value = id.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);
@@ -550,14 +743,8 @@ var DropdownMenuContextTrigger = defineComponent({
 			event.preventDefault();
 			event.stopPropagation();
 		}
-		onBeforeUnmount(() => {
-			clearLongPress();
-			if (element.value) root.unregisterInside(element.value);
-			if (root.triggerId.value === id.value) root.triggerId.value = void 0;
-		});
-		return () => h(props.as ?? "span", mergeProps(attrs, {
+		const rootAttrs = computed(() => mergeProps(attrs, {
 			id: id.value,
-			ref: setElement,
 			"aria-controls": root.contentId.value,
 			"aria-expanded": root.isOpen.value,
 			"aria-haspopup": "menu",
@@ -571,330 +758,29 @@ var DropdownMenuContextTrigger = defineComponent({
 			onPointermove,
 			onPointerup: finishPointer,
 			onPointercancel: finishPointer
-		}), slots.default?.({ isOpen: root.isOpen.value }));
-	}
-});
-var DropdownMenuPortal = defineComponent({
-	name: "RpDropdownMenuPortal",
-	props: {
-		to: {
-			type: [String, Object],
-			default: void 0
-		},
-		teleportTo: {
-			type: [String, Object],
-			default: void 0
-		},
-		teleport: {
-			type: Boolean,
-			default: true
-		},
-		disabled: {
-			type: Boolean,
-			default: false
-		}
-	},
-	setup(props, { slots }) {
-		const teleportTo = provideTeleportTarget({ get teleportTo() {
-			return props.to ?? props.teleportTo;
-		} });
-		return () => h(Teleport, {
-			to: teleportTo.value,
-			disabled: props.disabled || !props.teleport
-		}, slots.default?.());
+		}));
+		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 });
+		}, { _: 8 }), 1);
+		setTemplateRefBinding(n1, () => setElement);
+		return n1;
 	}
 });
-function createContentComponent(submenu) {
-	return defineComponent({
-		name: submenu ? "RpDropdownMenuSubContent" : "RpDropdownMenuContent",
-		inheritAttrs: false,
-		props: {
-			id: String,
-			as: primitiveAsProp("div"),
-			placement: {
-				type: String,
-				default: submenu ? "right-start" : "bottom-start"
-			},
-			offset: {
-				type: [Number, Object],
-				default: void 0
-			},
-			strategy: {
-				type: String,
-				default: "absolute"
-			},
-			flip: {
-				type: Boolean,
-				default: true
-			},
-			shift: {
-				type: Boolean,
-				default: true
-			},
-			collisionPadding: {
-				type: [Number, Object],
-				default: 8
-			},
-			arrow: {
-				type: Boolean,
-				default: false
-			},
-			avoidCollisions: {
-				type: Boolean,
-				default: true
-			},
-			forceMount: {
-				type: Boolean,
-				default: false
-			},
-			ariaLabel: String,
-			ariaLabelledby: String,
-			ariaDescribedby: String
-		},
-		emits: [
-			"escapeKeyDown",
-			"pointerDownOutside",
-			"focusOutside",
-			"interactOutside"
-		],
-		setup(props, { attrs, emit, slots }) {
-			const root = useRequiredInject(rootKey, submenu ? "RpDropdownMenuSubContent" : "RpDropdownMenuContent");
-			const sub = submenu ? useRequiredInject(subKey, "RpDropdownMenuSubContent") : void 0;
-			const generatedId = useId();
-			const id = computed(() => props.id ?? `${generatedId}-${submenu ? "submenu" : "menu"}`);
-			const element = ref(null);
-			const arrowElement = ref(null);
-			const actualPlacement = ref(props.placement);
-			const isOpen = computed(() => sub ? sub.isOpen.value : root.isOpen.value);
-			const reference = computed(() => sub ? sub.trigger.value : root.reference.value);
-			const teleportTo = useTeleportTarget(() => void 0);
-			const menu = createMenuContext({
-				root,
-				element,
-				actualPlacement,
-				parentSub: sub,
-				onEscape(event) {
-					const customEvent = createCustomEvent("dropdown-menu-escape-key-down", { originalEvent: event }, event);
-					emit("escapeKeyDown", customEvent);
-					if (customEvent.defaultPrevented) return;
-					if (sub) sub.close(true);
-					else root.close({ returnFocus: true });
-				}
-			});
-			const floating = useFloatingPosition({
-				reference,
-				floating: element,
-				arrow: arrowElement,
-				open: isOpen,
-				placement: () => props.placement,
-				strategy: () => props.strategy,
-				offset: () => props.offset,
-				flip: () => props.avoidCollisions !== false && props.flip,
-				shift: () => props.avoidCollisions !== false && props.shift,
-				collisionPadding: () => props.collisionPadding,
-				arrowEnabled: () => !submenu && props.arrow,
-				restartKey: () => teleportTo.value
-			});
-			watch(floating.actualPlacement, (value) => {
-				actualPlacement.value = value;
-			}, { immediate: true });
-			const shouldRender = computed(() => props.forceMount || isOpen.value);
-			provide(menuKey, menu);
-			if (sub) sub.menu = menu;
-			function setElement(value) {
-				const previous = element.value;
-				if (previous) root.unregisterInside(previous);
-				element.value = toHTMLElement(value);
-				if (element.value) root.registerInside(element.value);
-			}
-			function emitOutside(type, originalEvent) {
-				const outsideEvent = createOutsideEvent(originalEvent);
-				if (type === "pointer") emit("pointerDownOutside", outsideEvent);
-				else emit("focusOutside", outsideEvent);
-				emit("interactOutside", outsideEvent);
-				return outsideEvent;
-			}
-			function onDocumentPointer(event) {
-				if (!isTopLayer(root) || root.isInside(event.target)) 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 (!isTopLayer(root) || root.isInside(event.target)) 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]("click", onDocumentPointer, true);
-				document[method]("focusin", onDocumentFocus, true);
-			}
-			watch(isOpen, (open) => {
-				setDocumentListeners(open);
-				if (!open) {
-					menu.activeId.value = null;
-					menu.closeSubmenus();
-					return;
-				}
-				nextTick(() => {
-					const focus = sub ? sub.pendingFocus.value : root.pendingFocus.value;
-					menu.focus(focus || "first");
-				});
-			}, {
-				flush: "post",
-				immediate: true
-			});
-			onMounted(() => {
-				if (sub) sub.contentId.value = id.value;
-				else root.contentId.value = id.value;
-				if (isOpen.value) menu.focus((sub ? sub.pendingFocus.value : root.pendingFocus.value) || "first");
-			});
-			onBeforeUnmount(() => {
-				setDocumentListeners(false);
-				if (element.value) root.unregisterInside(element.value);
-				if (sub) sub.menu = null;
-				else if (root.contentId.value === id.value) root.contentId.value = void 0;
-			});
-			return () => {
-				if (!shouldRender.value) return null;
-				const placement = floating.actualPlacement.value.split("-");
-				const className = submenu ? bem("rp-dropdown-menu__submenu", {
-					compound: true,
-					open: isOpen.value
-				}) : bem("rp-dropdown-menu__content", {
-					compound: true,
-					open: isOpen.value
-				});
-				return h(props.as ?? "div", mergeProps(attrs, {
-					id: id.value,
-					ref: setElement,
-					role: "menu",
-					tabindex: -1,
-					hidden: optionalAttr(!isOpen.value),
-					class: className,
-					style: [floating.floatingStyle.value, !isOpen.value ? { display: "none" } : void 0],
-					"aria-label": props.ariaLabel,
-					"aria-labelledby": props.ariaLabelledby ?? (submenu ? void 0 : root.triggerId.value),
-					"aria-describedby": props.ariaDescribedby,
-					"aria-activedescendant": menu.activeId.value ?? void 0,
-					"data-state": isOpen.value ? "open" : "closed",
-					"data-placement": floating.actualPlacement.value,
-					"data-side": placement[0],
-					"data-align": placement[1] ?? "center",
-					onKeydown: menu.onKeydown
-				}), [!submenu && props.arrow ? h("span", {
-					ref: arrowElement,
-					class: "rp-dropdown-menu__arrow",
-					"data-side": placement[0],
-					style: floating.arrowStyle.value,
-					"aria-hidden": "true"
-				}) : null, slots.default?.({
-					isOpen: isOpen.value,
-					placement: floating.actualPlacement.value,
-					close: () => sub ? sub.close(true) : root.close({ returnFocus: true })
-				})]);
-			};
-		}
-	});
-}
-var DropdownMenuContent = createContentComponent(false);
-var DropdownMenuSubContent = createContentComponent(true);
-function usePrimitiveItem(componentName, props, emit, options) {
-	const menu = useRequiredInject(menuKey, componentName);
-	const generatedId = useId();
-	const id = computed(() => props.id ?? `${generatedId}-item`);
-	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;
-		const selectEvent = createSelectEvent(originalEvent, props.value);
-		emit("select", selectEvent);
-		options.afterSelect?.();
-		if (!selectEvent.defaultPrevented && (props.closeOnSelect ?? options.defaultCloseOnSelect)) menu.root.close({ returnFocus: true });
-	}
-	const registration = {
-		get id() {
-			return id.value;
-		},
-		element: () => element.value,
-		disabled: () => isDisabled.value,
-		activate
-	};
-	menu.registerItem(registration);
-	watch(id, (nextId, previousId) => {
-		menu.unregisterItem(previousId);
-		menu.registerItem(registration);
-		if (menu.activeId.value === previousId) menu.activeId.value = nextId;
-	});
-	onBeforeUnmount(() => menu.unregisterItem(id.value));
-	function setElement(value) {
-		element.value = toHTMLElement(value);
-	}
-	function onPointerenter() {
-		if (isDisabled.value) return;
-		menu.closeSubmenus();
-		menu.setActive(id.value);
-	}
-	return {
-		menu,
-		id,
-		element,
-		isDisabled,
-		focused,
-		activate,
-		setElement,
-		render(attrs, slots) {
-			const as = props.as ?? "button";
-			return h(as, mergeProps(attrs, {
-				id: id.value,
-				ref: setElement,
-				type: as === "button" ? "button" : void 0,
-				role: options.role ?? "menuitem",
-				tabindex: -1,
-				disabled: as === "button" ? optionalAttr(isDisabled.value) : void 0,
-				"aria-disabled": optionalAttr(isDisabled.value),
-				"aria-checked": options.checked?.value,
-				"data-disabled": optionalAttr(isDisabled.value),
-				"data-focused": optionalAttr(focused.value),
-				"data-highlighted": optionalAttr(focused.value),
-				"data-state": options.checked ? options.checked.value === "mixed" ? "indeterminate" : options.checked.value ? "checked" : "unchecked" : void 0,
-				class: bem("rp-dropdown-menu__item", {
-					focused: focused.value,
-					disabled: isDisabled.value,
-					destructive: props.destructive
-				}),
-				onClick: (event) => {
-					if (!event.defaultPrevented) activate(event);
-				},
-				onMouseenter: onPointerenter
-			}), slots.default?.({
-				focused: focused.value,
-				disabled: isDisabled.value,
-				select: () => activate(new Event("select"))
-			}));
-		}
-	};
-}
-var DropdownMenuItem$1 = defineComponent({
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu-item.vue
+var dropdown_menu_item_default = /* @__PURE__ */ defineVaporComponent({
 	name: "RpDropdownMenuItem",
 	inheritAttrs: false,
+	__name: "dropdown-menu-item",
 	props: {
-		id: String,
-		as: primitiveAsProp("button"),
-		value: [String, Number],
+		id: {},
+		as: { default: "button" },
+		value: {},
 		disabled: {
 			type: Boolean,
 			default: false
@@ -909,119 +795,147 @@ var DropdownMenuItem$1 = defineComponent({
 		}
 	},
 	emits: ["select"],
-	setup(props, { attrs, emit, slots }) {
-		const item = usePrimitiveItem("RpDropdownMenuItem", props, emit, { defaultCloseOnSelect: true });
-		return () => item.render(attrs, slots);
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const attrs = useAttrs();
+		const { id, isDisabled, focused, activate, select, setElement, onPointerenter } = usePrimitiveItem("RpDropdownMenuItem", props, (event) => emit("select", event), { defaultCloseOnSelect: true });
+		function onClick(event) {
+			if (!event.defaultPrevented) activate(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),
+			"data-disabled": optionalAttr(isDisabled.value),
+			"data-focused": optionalAttr(focused.value),
+			"data-highlighted": optionalAttr(focused.value),
+			class: bem("rp-dropdown-menu__item", {
+				focused: focused.value,
+				disabled: isDisabled.value,
+				destructive: props.destructive
+			}),
+			onClick,
+			onMouseenter: onPointerenter
+		}));
+		const n1 = createDynamicComponent(() => __props.as, { $: [() => rootAttrs.value] }, extend(() => {
+			return createSlot("default", {
+				focused: () => unref(focused),
+				disabled: () => unref(isDisabled),
+				select: () => unref(select)
+			});
+		}, { _: 8 }), 1);
+		setTemplateRefBinding(n1, () => setElement, void 0, void 0, "setElement");
+		return n1;
 	}
 });
-var DropdownMenuSeparator = defineComponent({
-	name: "RpDropdownMenuSeparator",
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu-item-indicator.vue
+var dropdown_menu_item_indicator_default = /* @__PURE__ */ defineVaporComponent({
+	name: "RpDropdownMenuItemIndicator",
 	inheritAttrs: false,
+	__name: "dropdown-menu-item-indicator",
 	props: {
-		id: String,
-		as: primitiveAsProp("div"),
-		orientation: {
-			type: String,
-			default: "horizontal"
+		as: { default: "span" },
+		forceMount: {
+			type: Boolean,
+			default: false
 		}
 	},
-	setup(props, { attrs }) {
-		useRequiredInject(menuKey, "RpDropdownMenuSeparator");
-		return () => h(props.as ?? "div", mergeProps(attrs, {
-			id: props.id,
-			role: "separator",
-			"aria-orientation": props.orientation,
-			class: "rp-dropdown-menu__separator",
-			"data-orientation": props.orientation
+	setup(__props) {
+		const attrs = useAttrs();
+		const context = useRequiredInject(checkedKey, "RpDropdownMenuItemIndicator");
+		const rootAttrs = computed(() => mergeProps(attrs, {
+			class: "rp-dropdown-menu__indicator",
+			"data-state": context.state.value,
+			"aria-hidden": true
 		}));
+		return createIf(() => __props.forceMount || unref(context).checked.value, () => {
+			return createDynamicComponent(() => __props.as, { $: [() => rootAttrs.value] }, extend(() => {
+				return createSlot("default", {
+					state: () => unref(context).state.value,
+					checked: () => unref(context).checked.value
+				});
+			}, { _: 8 }), 1);
+		});
 	}
 });
-var DropdownMenuLabel = defineComponent({
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu-label.vue
+var dropdown_menu_label_default = /* @__PURE__ */ defineVaporComponent({
 	name: "RpDropdownMenuLabel",
 	inheritAttrs: false,
+	__name: "dropdown-menu-label",
 	props: {
-		id: String,
-		as: primitiveAsProp("div")
+		id: {},
+		as: { default: "div" }
 	},
-	setup(props, { attrs, slots }) {
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
 		useRequiredInject(menuKey, "RpDropdownMenuLabel");
-		return () => h(props.as ?? "div", mergeProps(attrs, {
+		const rootAttrs = computed(() => mergeProps(attrs, {
 			id: props.id,
 			role: "presentation",
 			class: "rp-dropdown-menu__group-label"
-		}), slots.default?.());
+		}));
+		return createDynamicComponent(() => __props.as, { $: [() => rootAttrs.value] }, extend(() => {
+			return createSlot();
+		}, { _: 8 }), 1);
 	}
 });
-var DropdownMenuCheckboxItem = defineComponent({
-	name: "RpDropdownMenuCheckboxItem",
-	inheritAttrs: false,
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu-portal.vue
+var dropdown_menu_portal_default = /* @__PURE__ */ defineVaporComponent({
+	name: "RpDropdownMenuPortal",
+	__name: "dropdown-menu-portal",
 	props: {
-		id: String,
-		as: primitiveAsProp("button"),
-		modelValue: {
-			type: [Boolean, String],
-			default: void 0
-		},
-		defaultValue: {
-			type: [Boolean, String],
-			default: false
-		},
+		to: { default: void 0 },
 		disabled: {
 			type: Boolean,
 			default: false
 		},
-		destructive: {
+		teleport: {
 			type: Boolean,
-			default: false
+			default: true
 		},
-		closeOnSelect: {
-			type: Boolean,
-			default: false
-		}
+		teleportTo: { default: void 0 }
 	},
-	emits: ["select", "update:modelValue"],
-	setup(props, { attrs, emit, slots }) {
-		const uncontrolled = ref(props.defaultValue);
-		const value = computed(() => props.modelValue ?? uncontrolled.value);
-		const checked = computed(() => value.value === "indeterminate" ? "mixed" : value.value);
-		const state = computed(() => value.value === "indeterminate" ? "indeterminate" : value.value ? "checked" : "unchecked");
-		function toggleChecked() {
-			const nextValue = value.value === "indeterminate" ? true : !value.value;
-			if (props.modelValue === void 0) uncontrolled.value = nextValue;
-			emit("update:modelValue", nextValue);
-		}
-		provide(checkedKey, {
-			state,
-			checked: computed(() => value.value !== false)
-		});
-		const item = usePrimitiveItem("RpDropdownMenuCheckboxItem", props, emit, {
-			role: "menuitemcheckbox",
-			checked,
-			defaultCloseOnSelect: false,
-			afterSelect: toggleChecked
-		});
-		return () => item.render(attrs, slots);
+	setup(__props) {
+		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
+		}, extend(() => {
+			return createSlot();
+		}, { _: 8 }), true);
 	}
 });
-var DropdownMenuRadioGroup = defineComponent({
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu-radio-group.vue
+var dropdown_menu_radio_group_default = /* @__PURE__ */ defineVaporComponent({
 	name: "RpDropdownMenuRadioGroup",
 	inheritAttrs: false,
+	__name: "dropdown-menu-radio-group",
 	props: {
-		id: String,
-		as: primitiveAsProp("div"),
-		modelValue: {
-			type: [String, Number],
-			default: void 0
-		},
-		defaultValue: {
-			type: [String, Number],
-			default: null
-		},
-		ariaLabel: String,
-		ariaLabelledby: String
+		id: {},
+		as: { default: "div" },
+		modelValue: { default: void 0 },
+		defaultValue: { default: null },
+		ariaLabel: {},
+		ariaLabelledby: {}
 	},
 	emits: ["update:modelValue"],
-	setup(props, { attrs, emit, slots }) {
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const attrs = useAttrs();
 		useRequiredInject(menuKey, "RpDropdownMenuRadioGroup");
 		const uncontrolled = ref(props.defaultValue);
 		const value = computed(() => props.modelValue === void 0 ? uncontrolled.value : props.modelValue);
@@ -1034,25 +948,28 @@ var DropdownMenuRadioGroup = defineComponent({
 			value,
 			select
 		});
-		return () => h(props.as ?? "div", mergeProps(attrs, {
+		const rootAttrs = computed(() => mergeProps(attrs, {
 			id: props.id,
 			role: "group",
 			class: "rp-dropdown-menu__radio-group",
 			"aria-label": props.ariaLabel,
 			"aria-labelledby": props.ariaLabelledby
-		}), slots.default?.({ value: value.value }));
+		}));
+		return createDynamicComponent(() => __props.as, { $: [() => rootAttrs.value] }, extend(() => {
+			return createSlot("default", { value: () => value.value });
+		}, { _: 8 }), 1);
 	}
 });
-var DropdownMenuRadioItem = defineComponent({
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu-radio-item.vue
+var dropdown_menu_radio_item_default = /* @__PURE__ */ defineVaporComponent({
 	name: "RpDropdownMenuRadioItem",
 	inheritAttrs: false,
+	__name: "dropdown-menu-radio-item",
 	props: {
-		id: String,
-		as: primitiveAsProp("button"),
-		value: {
-			type: [String, Number],
-			required: true
-		},
+		value: {},
+		id: {},
+		as: { default: "button" },
 		disabled: {
 			type: Boolean,
 			default: false
@@ -1065,52 +982,235 @@ var DropdownMenuRadioItem = defineComponent({
 			type: Boolean,
 			default: false
 		}
-	},
-	emits: ["select"],
-	setup(props, { attrs, emit, slots }) {
-		const group = useRequiredInject(radioGroupKey, "RpDropdownMenuRadioItem");
-		const isChecked = computed(() => group.value.value === props.value);
-		const checked = computed(() => isChecked.value);
-		provide(checkedKey, {
-			state: computed(() => isChecked.value ? "checked" : "unchecked"),
-			checked: isChecked
+	},
+	emits: ["select"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const attrs = useAttrs();
+		const group = useRequiredInject(radioGroupKey, "RpDropdownMenuRadioItem");
+		const isChecked = computed(() => group.value.value === props.value);
+		const checked = computed(() => isChecked.value);
+		const state = computed(() => isChecked.value ? "checked" : "unchecked");
+		provide(checkedKey, {
+			state,
+			checked: isChecked
+		});
+		const { id, isDisabled, focused, activate, select, setElement, onPointerenter } = usePrimitiveItem("RpDropdownMenuRadioItem", props, (event) => emit("select", event), {
+			checked,
+			defaultCloseOnSelect: false,
+			afterSelect: () => group.select(props.value)
+		});
+		function onClick(event) {
+			if (!event.defaultPrevented) activate(event);
+		}
+		const rootAttrs = computed(() => mergeProps(attrs, {
+			id: id.value,
+			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),
+			"aria-checked": checked.value,
+			"data-disabled": optionalAttr(isDisabled.value),
+			"data-focused": optionalAttr(focused.value),
+			"data-highlighted": optionalAttr(focused.value),
+			"data-state": state.value,
+			class: bem("rp-dropdown-menu__item", {
+				focused: focused.value,
+				disabled: isDisabled.value,
+				destructive: props.destructive
+			}),
+			onClick,
+			onMouseenter: onPointerenter
+		}));
+		const n1 = createDynamicComponent(() => __props.as, { $: [() => rootAttrs.value] }, extend(() => {
+			return createSlot("default", {
+				focused: () => unref(focused),
+				disabled: () => unref(isDisabled),
+				select: () => unref(select)
+			});
+		}, { _: 8 }), 1);
+		setTemplateRefBinding(n1, () => setElement, void 0, void 0, "setElement");
+		return n1;
+	}
+});
+//#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
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		modal: {
+			type: Boolean,
+			default: true
+		},
+		target: { default: null },
+		virtualAnchor: { default: null }
+	},
+	emits: ["update:open"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const generatedId = useId();
+		const id = computed(() => props.id ?? `${generatedId}-dropdown-menu`);
+		const uncontrolledOpen = ref(props.defaultOpen);
+		const isOpen = computed(() => props.open ?? uncontrolledOpen.value);
+		const disabled = computed(() => props.disabled);
+		const modal = computed(() => props.modal);
+		const trigger = ref(null);
+		const triggerId = ref();
+		const contentId = ref();
+		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 layer = useOverlayLayer({
+			active: computed(() => isOpen.value && !disabled.value),
+			element: contentElement,
+			baseZIndex: 100
+		});
+		function setOpen(value) {
+			if (value && disabled.value) return;
+			const previous = isOpen.value;
+			if (props.open === void 0) uncontrolledOpen.value = value;
+			if (previous !== value) emit("update:open", value);
+		}
+		function rememberFocus() {
+			if (typeof document === "undefined" || returnFocusElement) return;
+			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();
+		}
+		function openAt(point, options) {
+			activeReference.value = createVirtualAnchor(point);
+			open(options);
+		}
+		function setTrigger(element, nextId) {
+			if (trigger.value && trigger.value !== element) inside.delete(trigger.value);
+			trigger.value = element;
+			triggerId.value = nextId;
+			if (element) inside.add(element);
+		}
+		const context = {
+			id,
+			isOpen,
+			disabled,
+			modal,
+			trigger,
+			triggerId,
+			contentId,
+			reference,
+			pendingFocus,
+			layer,
+			open,
+			close,
+			toggle,
+			openAt,
+			setTrigger,
+			setReference(nextReference) {
+				activeReference.value = nextReference;
+			},
+			setReturnFocus(element) {
+				returnFocusElement = element;
+			},
+			registerInside(element) {
+				inside.add(element);
+			},
+			unregisterInside(element) {
+				inside.delete(element);
+			},
+			isInside(event) {
+				return [...inside].some((element) => isEventWithinElement(event, element));
+			}
+		};
+		const slotProps = computed(() => ({
+			isOpen: isOpen.value,
+			open,
+			close,
+			toggle,
+			openAt
+		}));
+		watch(disabled, (value) => {
+			if (value) close();
 		});
-		const item = usePrimitiveItem("RpDropdownMenuRadioItem", props, emit, {
-			role: "menuitemradio",
-			checked,
-			defaultCloseOnSelect: false,
-			afterSelect: () => group.select(props.value)
+		watch(isOpen, (value) => {
+			if (!value) activeReference.value = null;
+		}, { flush: "sync" });
+		provide(rootKey, context);
+		__expose({
+			open,
+			close,
+			toggle,
+			openAt
 		});
-		return () => item.render(attrs, slots);
+		return createSlot("default", { $: [() => slotProps.value] });
 	}
 });
-var DropdownMenuItemIndicator = defineComponent({
-	name: "RpDropdownMenuItemIndicator",
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu-separator.vue
+var dropdown_menu_separator_default = /* @__PURE__ */ defineVaporComponent({
+	name: "RpDropdownMenuSeparator",
 	inheritAttrs: false,
+	__name: "dropdown-menu-separator",
 	props: {
-		as: primitiveAsProp("span"),
-		forceMount: {
-			type: Boolean,
-			default: false
-		}
+		id: {},
+		as: { default: "div" },
+		orientation: { default: "horizontal" }
 	},
-	setup(props, { attrs, slots }) {
-		const context = useRequiredInject(checkedKey, "RpDropdownMenuItemIndicator");
-		return () => {
-			if (!props.forceMount && !context.checked.value) return null;
-			return h(props.as ?? "span", mergeProps(attrs, {
-				class: "rp-dropdown-menu__indicator",
-				"data-state": context.state.value,
-				"aria-hidden": true
-			}), slots.default?.({
-				state: context.state.value,
-				checked: context.checked.value
-			}));
-		};
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
+		useRequiredInject(menuKey, "RpDropdownMenuSeparator");
+		const rootAttrs = computed(() => mergeProps(attrs, {
+			id: props.id,
+			role: "separator",
+			"aria-orientation": props.orientation,
+			class: "rp-dropdown-menu__separator",
+			"data-orientation": props.orientation
+		}));
+		return createDynamicComponent(() => __props.as, { $: [() => rootAttrs.value] }, null, 1);
 	}
 });
-var DropdownMenuSub = defineComponent({
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu-sub.vue
+var dropdown_menu_sub_default = /* @__PURE__ */ defineVaporComponent({
 	name: "RpDropdownMenuSub",
+	__name: "dropdown-menu-sub",
 	props: {
 		open: {
 			type: Boolean,
@@ -1122,7 +1222,9 @@ var DropdownMenuSub = defineComponent({
 		}
 	},
 	emits: ["update:open"],
-	setup(props, { emit, slots }) {
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
 		const parentMenu = useRequiredInject(menuKey, "RpDropdownMenuSub");
 		const uncontrolled = ref(props.defaultOpen);
 		const isOpen = computed(() => props.open ?? uncontrolled.value);
@@ -1164,25 +1266,91 @@ var DropdownMenuSub = defineComponent({
 			if (!open) context.close(false);
 		});
 		onBeforeUnmount(() => parentMenu.unregisterSub(context));
-		return () => slots.default?.({
-			isOpen: isOpen.value,
-			open: context.open,
-			close: context.close
+		return createSlot("default", {
+			isOpen: () => isOpen.value,
+			open: () => context.open,
+			close: () => context.close
+		});
+	}
+});
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu-sub-content.vue
+var dropdown_menu_sub_content_default = /* @__PURE__ */ defineVaporComponent({
+	name: "RpDropdownMenuSubContent",
+	inheritAttrs: false,
+	__name: "dropdown-menu-sub-content",
+	props: {
+		placement: { default: "right-start" },
+		id: {},
+		as: { default: "div" },
+		offset: {},
+		strategy: { default: "absolute" },
+		flip: {
+			type: Boolean,
+			default: true
+		},
+		shift: {
+			type: Boolean,
+			default: true
+		},
+		collisionPadding: { default: 8 },
+		avoidCollisions: {
+			type: Boolean,
+			default: true
+		},
+		forceMount: {
+			type: Boolean,
+			default: false
+		},
+		ariaLabel: {},
+		ariaLabelledby: {},
+		ariaDescribedby: {}
+	},
+	emits: [
+		"escapeKeyDown",
+		"pointerDownOutside",
+		"focusOutside",
+		"interactOutside"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { actualPlacement, isOpen, shouldRender, rootAttrs, setElement, close } = useDropdownMenuPrimitiveContent(props, useAttrs(), {
+			escapeKeyDown: (event) => emit("escapeKeyDown", event),
+			pointerDownOutside: (event) => emit("pointerDownOutside", event),
+			focusOutside: (event) => emit("focusOutside", event),
+			interactOutside: (event) => emit("interactOutside", event)
+		}, true);
+		return createIf(() => unref(shouldRender), () => {
+			const n3 = createDynamicComponent(() => __props.as, { $: [() => unref(rootAttrs)] }, extend(() => {
+				return createSlot("default", {
+					isOpen: () => unref(isOpen),
+					placement: () => unref(actualPlacement),
+					close: () => unref(close)
+				});
+			}, { _: 8 }), 1);
+			setTemplateRefBinding(n3, () => setElement, void 0, void 0, "setElement");
+			return n3;
 		});
 	}
 });
-var DropdownMenuSubTrigger = defineComponent({
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu-sub-trigger.vue
+var dropdown_menu_sub_trigger_default = /* @__PURE__ */ defineVaporComponent({
 	name: "RpDropdownMenuSubTrigger",
 	inheritAttrs: false,
+	__name: "dropdown-menu-sub-trigger",
 	props: {
-		id: String,
-		as: primitiveAsProp("button"),
+		id: {},
+		as: { default: "button" },
 		disabled: {
 			type: Boolean,
 			default: false
 		}
 	},
-	setup(props, { attrs, slots }) {
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
 		const menu = useRequiredInject(menuKey, "RpDropdownMenuSubTrigger");
 		const sub = useRequiredInject(subKey, "RpDropdownMenuSubTrigger");
 		const generatedId = useId();
@@ -1201,55 +1369,133 @@ var DropdownMenuSubTrigger = defineComponent({
 		menu.registerItem(registration);
 		onBeforeUnmount(() => menu.unregisterItem(id.value));
 		function setElement(value) {
-			sub.trigger.value = toHTMLElement(value);
+			resolveHTMLElementRef(value, id.value, (resolved) => {
+				sub.trigger.value = resolved;
+			});
 		}
 		function onMouseenter() {
 			if (isDisabled.value) return;
 			menu.setActive(id.value);
 			sub.open(false);
 		}
-		return () => {
-			const as = props.as ?? "button";
-			return h(as, mergeProps(attrs, {
-				id: id.value,
-				ref: setElement,
-				type: as === "button" ? "button" : void 0,
-				role: "menuitem",
-				tabindex: -1,
-				disabled: as === "button" ? optionalAttr(isDisabled.value) : void 0,
-				"aria-disabled": optionalAttr(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-state": sub.isOpen.value ? "open" : "closed",
-				class: bem("rp-dropdown-menu__item", {
-					focused: focused.value,
-					disabled: isDisabled.value,
-					submenu: true,
-					open: sub.isOpen.value
-				}),
-				onClick: (event) => {
-					if (!event.defaultPrevented && !isDisabled.value) sub.open("first");
-				},
-				onMouseenter
-			}), slots.default?.({
+		function onClick(event) {
+			if (!event.defaultPrevented && !isDisabled.value) sub.open("first");
+		}
+		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),
+			"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-state": sub.isOpen.value ? "open" : "closed",
+			class: bem("rp-dropdown-menu__item", {
 				focused: focused.value,
 				disabled: isDisabled.value,
-				isOpen: sub.isOpen.value,
-				open: sub.open,
-				close: sub.close
-			}));
-		};
+				submenu: true,
+				open: sub.isOpen.value
+			}),
+			onClick,
+			onMouseenter
+		}));
+		const n1 = createDynamicComponent(() => __props.as, { $: [() => rootAttrs.value] }, extend(() => {
+			return createSlot("default", {
+				focused: () => focused.value,
+				disabled: () => isDisabled.value,
+				isOpen: () => unref(sub).isOpen.value,
+				open: () => unref(sub).open,
+				close: () => unref(sub).close
+			});
+		}, { _: 8 }), 1);
+		setTemplateRefBinding(n1, () => setElement);
+		return n1;
+	}
+});
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu-trigger.vue
+var dropdown_menu_trigger_default = /* @__PURE__ */ defineVaporComponent({
+	name: "RpDropdownMenuTrigger",
+	inheritAttrs: false,
+	__name: "dropdown-menu-trigger",
+	props: {
+		id: {},
+		as: { default: "button" },
+		disabled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
+		const root = useRequiredInject(rootKey, "RpDropdownMenuTrigger");
+		const generatedId = useId();
+		const id = computed(() => props.id ?? `${generatedId}-trigger`);
+		const element = ref(null);
+		const isDisabled = computed(() => root.disabled.value || props.disabled);
+		function setElement(value) {
+			resolveHTMLElementRef(value, id.value, (resolved) => {
+				element.value = resolved;
+				root.setTrigger(resolved, id.value);
+			});
+		}
+		function openWithReference(focus = "first") {
+			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();
+		}
+		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 });
+		}
+		const rootAttrs = computed(() => mergeProps(attrs, {
+			id: id.value,
+			type: props.as === "button" ? "button" : void 0,
+			disabled: props.as === "button" ? optionalAttr(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),
+			"data-state": root.isOpen.value ? "open" : "closed",
+			"data-disabled": optionalAttr(isDisabled.value),
+			onClick,
+			onKeydown
+		}));
+		onBeforeUnmount(() => root.setTrigger(null));
+		const n1 = createDynamicComponent(() => __props.as, { $: [() => rootAttrs.value] }, extend(() => {
+			return createSlot("default", { isOpen: () => unref(root).isOpen.value });
+		}, { _: 8 }), 1);
+		setTemplateRefBinding(n1, () => setElement);
+		return n1;
 	}
 });
 //#endregion
 //#region ~icons/lucide/chevron-right
-var t0$1 = template("<svg viewBox=\"0 0 24 24\"width=1.2em height=1.2em><path fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 d=\"m9 18l6-6l-6-6\">", 3, 1);
+var t0$2 = template("<svg viewBox=\"0 0 24 24\"width=1.2em height=1.2em><path fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 d=\"m9 18l6-6l-6-6\">", 3, 1);
 function render(_ctx) {
-	return t0$1();
+	return t0$2();
 }
 var chevron_right_default = markRaw(defineVaporComponent({
 	name: "lucide-chevron-right",
@@ -1316,170 +1562,121 @@ function getNextEnabledIndex(items, index, direction) {
 	return enabledIndexes[enabledIndexes.length - 1];
 }
 //#endregion
-//#region src/components/dropdown-menu/dropdown-menu-items.ts
-var contextProp = {
-	type: Object,
-	required: true
-};
-var renderItemProp = {
-	type: Function,
-	required: true
-};
-var DropdownMenuItemRow = defineComponent({
+//#region src/components/dropdown-menu/dropdown-menu-item-row.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0$1 = template("<div>");
+var t1$1 = template("<div class=rp-dropdown-menu__item-wrap role=none><button></button>", 1);
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu-item-row.vue
+var dropdown_menu_item_row_default = /* @__PURE__ */ defineVaporComponent({
 	name: "RpDropdownMenuItemRow",
+	__name: "dropdown-menu-item-row",
 	props: {
-		context: contextProp,
-		disabled: {
-			type: Boolean,
-			required: true
-		},
-		focused: {
-			type: Boolean,
-			required: true
-		},
-		index: {
-			type: Number,
-			required: true
-		},
-		item: {
-			type: Object,
-			required: true
-		},
-		parentPath: {
-			type: Array,
-			required: true
-		},
-		renderItem: renderItemProp,
-		submenuOpen: {
-			type: Boolean,
-			required: true
-		}
+		context: {},
+		index: {},
+		item: {},
+		parentPath: {}
 	},
-	setup(props) {
+	setup(__props) {
+		const props = __props;
 		const path = computed(() => [...props.parentPath, props.index]);
-		return () => {
-			const currentPath = path.value;
-			const hasSubmenu = hasItemSubmenu(props.item);
-			const itemProps = props.context.getItemProps(props.item, currentPath, props.focused, props.disabled, props.submenuOpen);
-			const children = [h("button", {
-				...itemProps,
-				...props.context.getPublicPartAttrs?.("item", { class: itemProps.class })
-			}, props.renderItem(props.context.getItemSlotProps(props.item, currentPath, props.focused, props.disabled, props.submenuOpen)))];
-			if (hasSubmenu && props.submenuOpen) children.push(h(DropdownMenuSubmenu, {
-				context: props.context,
-				item: props.item,
-				path: currentPath,
-				renderItem: props.renderItem
-			}));
-			return h("div", {
-				class: "rp-dropdown-menu__item-wrap",
-				role: "none"
-			}, children);
-		};
-	}
-});
-var DropdownMenuItemsList = defineComponent({
-	name: "RpDropdownMenuItemsList",
-	props: {
-		context: contextProp,
-		items: {
-			type: Array,
-			required: true
-		},
-		parentPath: {
-			type: Array,
-			default: () => []
-		},
-		renderItem: renderItemProp
-	},
-	setup(props) {
-		return () => props.items.map((item, index) => {
-			const path = [...props.parentPath, index];
-			const hasSubmenu = hasItemSubmenu(item);
-			return h(DropdownMenuItemRow, {
-				key: `${getPathKey(path)}:${String(item.value)}`,
-				context: props.context,
-				disabled: Boolean(item.disabled),
-				focused: props.context.isItemFocused(path),
-				index,
-				item,
-				parentPath: props.parentPath,
-				renderItem: props.renderItem,
-				submenuOpen: hasSubmenu && props.context.isSubmenuOpen(path)
-			});
-		});
-	}
-});
-var DropdownMenuSubmenu = defineComponent({
-	name: "RpDropdownMenuSubmenu",
-	props: {
-		context: contextProp,
-		item: {
-			type: Object,
-			required: true
-		},
-		path: {
-			type: Array,
-			required: true
-		},
-		renderItem: renderItemProp
-	},
-	setup(props) {
-		const element = ref(null);
-		const floating = useFloatingPosition({
-			reference: computed(() => props.context.getItemElement(props.path)),
-			floating: element,
-			open: computed(() => props.context.isSubmenuOpen(props.path)),
+		const hasSubmenu = computed(() => hasItemSubmenu(props.item));
+		const focused = computed(() => props.context.isItemFocused(path.value));
+		const disabled = computed(() => Boolean(props.item.disabled));
+		const submenuOpen = computed(() => hasSubmenu.value && props.context.isSubmenuOpen(path.value));
+		const itemProps = computed(() => props.context.getItemProps(props.item, path.value, focused.value, disabled.value, submenuOpen.value));
+		const publicItemProps = computed(() => ({
+			...itemProps.value,
+			...props.context.getPublicPartAttrs?.("item", { class: itemProps.value.class })
+		}));
+		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 { actualPlacement, floatingStyle } = useFloatingPosition({
+			reference: itemElement,
+			floating: submenuElement,
+			open: submenuOpen,
 			placement: props.context.getSubmenuPlacement,
 			strategy: props.context.getStrategy,
 			offset: () => 4,
 			flip: props.context.getFlip,
 			shift: props.context.getShift,
-			collisionPadding: props.context.getCollisionPadding,
-			arrowEnabled: () => false
+			collisionPadding: props.context.getCollisionPadding
 		});
-		return () => {
-			const submenuProps = props.context.getSubmenuProps(props.item, props.path, true);
-			return h("div", {
-				...submenuProps,
-				...props.context.getPublicPartAttrs?.("submenu", {
-					class: submenuProps.class,
-					style: floating.floatingStyle.value
-				}),
-				ref: element,
+		const submenuProps = computed(() => props.context.getSubmenuProps(props.item, path.value, true));
+		const publicSubmenuProps = computed(() => ({
+			...submenuProps.value,
+			...props.context.getPublicPartAttrs?.("submenu", {
+				class: submenuProps.value.class,
+				style: floatingStyle.value
+			})
+		}));
+		const placementSide = computed(() => actualPlacement.value.split("-")[0]);
+		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");
+		setInsertionState(n10, null, 1);
+		createIf(() => hasSubmenu.value && submenuOpen.value, () => {
+			const n9 = t0$1();
+			renderEffect(() => setDynamicProps(n9, [publicSubmenuProps.value, {
 				"data-state": "open",
-				"data-placement": floating.actualPlacement.value.split("-")[0],
-				"data-side": floating.actualPlacement.value.split("-")[0]
-			}, [h(DropdownMenuItemsList, {
-				context: props.context,
-				items: props.item.children ?? [],
-				parentPath: props.path,
-				renderItem: props.renderItem
-			})]);
-		};
+				"data-placement": unref(actualPlacement),
+				"data-side": placementSide.value
+			}]));
+			setInsertionState(n9, null, 0);
+			createFor(() => __props.item.children ?? [], (_for_item0, _for_key0) => {
+				return createComponentWithFallback(_component_DropdownMenuItemRow__self, {
+					context: () => __props.context,
+					index: () => _for_key0.value,
+					item: () => _for_item0.value,
+					"parent-path": () => path.value
+				}, { "item": extend((childSlotProps) => {
+					return createSlot("item", { $: [() => childSlotProps] });
+				}, { _: 8 }) });
+			}, (child, childIndex) => getChildKey(childIndex, child), 3);
+			_setTemplateRef(n9, submenuElement, null, "submenuElement");
+			return n9;
+		});
+		return n10;
 	}
 });
-var dropdown_menu_items_default = defineComponent({
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu-items.vue
+var dropdown_menu_items_default = /* @__PURE__ */ defineVaporComponent({
 	name: "RpDropdownMenuItems",
+	__name: "dropdown-menu-items",
 	props: {
-		context: contextProp,
-		items: {
-			type: Array,
-			required: true
-		}
+		context: {},
+		items: {},
+		parentPath: { default: () => [] }
 	},
-	setup(props, { slots }) {
-		const renderItem = (slotProps) => slots.item?.(slotProps);
-		return () => h(DropdownMenuItemsList, {
-			context: props.context,
-			items: props.items,
-			renderItem
-		});
+	setup(__props) {
+		const props = __props;
+		function getItemKey(index, item) {
+			return `${getPathKey([...props.parentPath, index])}:${String(item.value)}`;
+		}
+		return createFor(() => __props.items, (_for_item0, _for_key0) => {
+			return createComponent(dropdown_menu_item_row_default, {
+				context: () => __props.context,
+				index: () => _for_key0.value,
+				item: () => _for_item0.value,
+				"parent-path": () => __props.parentPath
+			}, { "item": extend((slotProps) => {
+				return createSlot("item", { $: [() => slotProps] });
+			}, { _: 8 }) });
+		}, (item, index) => getItemKey(index, item), 2);
 	}
 });
 //#endregion
 //#region src/components/dropdown-menu/useDropdownMenuDisclosure.ts
-function useDropdownMenuDisclosure({ props, emit, rootRef, menuRef, targetRef, uncontrolledOpen, isDisabled, isOpen, isVisible, focusedPath, resetFocus, resetSubmenus, resetHoverIntent, focusItem, focusMenu, focusTrigger }) {
+function useDropdownMenuDisclosure({ props, emit, rootRef, menuRef, targetRef, uncontrolledOpen, isDisabled, isOpen, isVisible, focusedPath, resetFocus, resetSubmenus, resetHoverIntent, focusItem, focusMenu, focusTrigger, layer }) {
 	function setOpen(nextOpen) {
 		if (nextOpen && isDisabled.value) return;
 		const previousOpen = isOpen.value;
@@ -1517,17 +1714,52 @@ function useDropdownMenuDisclosure({ props, emit, rootRef, menuRef, targetRef, u
 			focusMenu();
 		} else resetMenuFocus();
 	});
-	useClickOutside([
-		rootRef,
-		menuRef,
-		targetRef
-	], isVisible, (event) => {
-		if (props.modal) {
-			event.preventDefault();
-			event.stopPropagation();
-		}
-		close({ focusTrigger: Boolean(props.modal) });
-	});
+	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);
+	}
+	watch(isVisible, setDocumentListeners, { immediate: true });
+	onBeforeUnmount(() => setDocumentListeners(false));
 	return {
 		open,
 		close,
@@ -1963,7 +2195,6 @@ function useDropdownMenuPortalPosition(options) {
 		flip: () => options.props.flip !== false,
 		shift: () => options.props.shift !== false,
 		collisionPadding: () => options.props.collisionPadding ?? 8,
-		arrowEnabled: () => Boolean(options.props.arrow),
 		restartKey: options.restartKey
 	});
 	return {
@@ -2125,6 +2356,7 @@ function useDropdownMenu(props, emit = {}) {
 	const placement = computed(() => props.placement ?? "bottom-start");
 	const requestedTeleportTarget = computed(() => props.portalTo ?? props.teleportTo);
 	const teleportTo = useTeleportTarget(() => requestedTeleportTarget.value);
+	const teleportPositioningKey = useTeleportPositioningKey();
 	const shouldTeleport = computed(() => props.portal ?? props.teleport !== false);
 	const { isExplicitTarget, reference, resolvedTarget } = useFloatingTarget(() => props.target, rootRef);
 	const targetElement = computed(() => isElementReference(resolvedTarget.value) ? resolvedTarget.value : null);
@@ -2132,6 +2364,11 @@ function useDropdownMenu(props, emit = {}) {
 	const isDisabled = computed(() => Boolean(props.disabled));
 	const isOpen = computed(() => props.open ?? uncontrolledOpen.value);
 	const isVisible = computed(() => isOpen.value && !isDisabled.value);
+	const layer = useOverlayLayer({
+		active: isVisible,
+		element: menuRef,
+		baseZIndex: 100
+	});
 	const contentHasSubmenu = computed(() => hasNestedItems(visibleItems.value));
 	const isEmpty = computed(() => visibleItems.value.length === 0);
 	const { actualPlacement, arrowStyle, contentStyle } = useDropdownMenuPortalPosition({
@@ -2141,7 +2378,11 @@ function useDropdownMenu(props, emit = {}) {
 		arrowRef,
 		isVisible,
 		placement,
-		restartKey: () => [shouldTeleport.value, teleportTo.value]
+		restartKey: () => [
+			shouldTeleport.value,
+			teleportTo.value,
+			teleportPositioningKey.value
+		]
 	});
 	const placementSide = computed(() => actualPlacement.value.split("-")[0]);
 	const { focusedPath, focusedIndex, getItemAtPath, focusItem, resetFocus, isItemFocused, moveFocus } = useDropdownMenuNavigation(visibleItems);
@@ -2180,7 +2421,8 @@ function useDropdownMenu(props, emit = {}) {
 		resetHoverIntent: hoverIntent.resetHoverIntent,
 		focusItem,
 		focusMenu,
-		focusTrigger
+		focusTrigger,
+		layer
 	});
 	const { open, close, toggle } = disclosure;
 	const { activateItem, selectItem, openSubmenu, closeSubmenu, focusHoveredItem, onTriggerClick, onTriggerKeydown, onMenuKeydown, onMenuMousemove, onMenuMouseleave } = useDropdownMenuInteractions({
@@ -2300,7 +2542,10 @@ function useDropdownMenu(props, emit = {}) {
 		activeDescendantId,
 		rootClass,
 		contentClass,
-		contentStyle,
+		contentStyle: computed(() => ({
+			...contentStyle.value,
+			zIndex: layer.zIndex.value
+		})),
 		arrowStyle,
 		actualPlacement,
 		placementSide,
@@ -2358,6 +2603,7 @@ var dropdown_menu_default = /* @__PURE__ */ defineVaporComponent({
 			type: Boolean,
 			default: false
 		},
+		ignore: {},
 		portal: {
 			type: Boolean,
 			default: void 0
@@ -2388,13 +2634,22 @@ var dropdown_menu_default = /* @__PURE__ */ defineVaporComponent({
 		classNames: {},
 		styles: {}
 	},
-	emits: ["update:open", "select"],
+	emits: [
+		"update:open",
+		"select",
+		"pointerDownOutside",
+		"focusOutside",
+		"interactOutside"
+	],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const { rootRef, menuRef, arrowRef, isVisible, isEmpty, visibleItems, renderContext, rootClass, contentClass, contentStyle, arrowStyle, placementSide, isTargetMode, teleportTo, shouldTeleport, contentProps, slotProps } = useDropdownMenu(props, {
+		const { rootRef, menuRef, arrowRef, isVisible, isEmpty, visibleItems, renderContext, rootClass, contentClass, contentStyle, arrowStyle, actualPlacement, placementSide, isTargetMode, teleportTo, shouldTeleport, contentProps, slotProps } = useDropdownMenu(props, {
 			openChange: (open) => emit("update:open", open),
-			select: (item, event) => emit("select", item, event)
+			select: (item, event) => emit("select", item, event),
+			pointerDownOutside: (event) => emit("pointerDownOutside", event),
+			focusOutside: (event) => emit("focusOutside", event),
+			interactOutside: (event) => emit("interactOutside", event)
 		});
 		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
 		const state = computed(() => isVisible.value ? "open" : "closed");
@@ -2423,7 +2678,7 @@ var dropdown_menu_default = /* @__PURE__ */ defineVaporComponent({
 				style: contentStyle.value
 			}),
 			"data-state": state.value,
-			"data-placement": placementSide.value
+			"data-placement": actualPlacement.value
 		}));
 		const publicRenderContext = computed(() => ({
 			...renderContext,
@@ -2466,7 +2721,7 @@ var dropdown_menu_default = /* @__PURE__ */ defineVaporComponent({
 						return n13;
 					});
 					setInsertionState(n26, null, 2);
-					createComponent(unref(dropdown_menu_items_default), {
+					createComponent(dropdown_menu_items_default, {
 						items: () => unref(visibleItems),
 						context: () => publicRenderContext.value
 					}, { "item": extend((itemSlotProps) => {
@@ -2518,6 +2773,6 @@ var dropdownMenuParts = [
 ];
 //#endregion
 //#region src/components/dropdown-menu/index.ts
-var DropdownMenuItem = DropdownMenuItem$1;
+var DropdownMenuItem = dropdown_menu_item_default;
 //#endregion
-export { DropdownMenuSubTrigger as _, DropdownMenuCheckboxItem as a, DropdownMenuItemIndicator as c, DropdownMenuRadioGroup as d, DropdownMenuRadioItem as f, DropdownMenuSubContent as g, DropdownMenuSub as h, useDropdownMenu as i, DropdownMenuLabel as l, DropdownMenuSeparator as m, dropdownMenuParts as n, DropdownMenuContent as o, DropdownMenuRoot as p, dropdown_menu_default as r, DropdownMenuContextTrigger as s, DropdownMenuItem as t, DropdownMenuPortal as u, DropdownMenuTrigger as v };
+export { dropdown_menu_content_default as _, dropdown_menu_trigger_default as a, dropdown_menu_sub_default as c, dropdown_menu_radio_item_default as d, dropdown_menu_radio_group_default as f, dropdown_menu_context_trigger_default as g, dropdown_menu_item_indicator_default as h, useDropdownMenu as i, dropdown_menu_separator_default as l, dropdown_menu_label_default as m, dropdownMenuParts as n, dropdown_menu_sub_trigger_default as o, dropdown_menu_portal_default as p, dropdown_menu_default as r, dropdown_menu_sub_content_default as s, DropdownMenuItem as t, dropdown_menu_root_default as u, dropdown_menu_checkbox_item_default as v };