ropav 0.0.10 → 0.0.12

package/dist/dropdown-menu.js

@@ -1,11 +1,1501 @@
 import './dropdown-menu.css';
 import { t as bem } from "./bem.js";
-import { t as useClickOutside } from "./useClickOutside.js";
-import { VaporTransition, computed, createComponent, createIf, createSlot, createTemplateRefSetter, defineComponent, defineVaporComponent, extend, h, markRaw, nextTick, onUnmounted, ref, renderEffect, setClass, setDynamicProps, setInsertionState, setStaticTemplateRef, setText, template, toDisplayString, txt, unref, useId, watch } from "vue";
+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 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");
+function optionalAttr(value) {
+	return value || void 0;
+}
+function getFocusTarget(options) {
+	if (typeof options === "string") return options;
+	return options?.focus ?? "first";
+}
+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 resolveHTMLElementRef(value, fallbackId, resolve) {
+	const element = toHTMLElement(value, fallbackId);
+	resolve(element);
+	if (element || !value) return;
+	nextTick(() => resolve(toHTMLElement(value, fallbackId)));
+}
+function createPointRect(point) {
+	return {
+		x: point.x,
+		y: point.y,
+		left: point.x,
+		right: point.x,
+		top: point.y,
+		bottom: point.y,
+		width: 0,
+		height: 0,
+		toJSON: () => ({})
+	};
+}
+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", {
+		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);
+	}
+	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) {
+		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;
+		}
+	}
+	const context = {
+		root: options.root,
+		element: options.element,
+		activeId,
+		actualPlacement: options.actualPlacement,
+		parentSub: options.parentSub,
+		registerItem,
+		unregisterItem,
+		registerSub,
+		unregisterSub,
+		closeSubmenus,
+		setActive,
+		isActive: (id) => activeId.value === id,
+		focus,
+		focusElement,
+		onKeydown
+	};
+	return context;
+}
+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 {
+		menu,
+		id,
+		element,
+		isDisabled,
+		focused,
+		checked: options.checked,
+		activate,
+		select,
+		setElement,
+		onPointerenter
+	};
+}
+//#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: {
+		modelValue: {
+			type: [Boolean, String],
+			default: void 0
+		},
+		defaultValue: {
+			type: [Boolean, String],
+			default: false
+		},
+		id: {},
+		as: { default: "button" },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		destructive: {
+			type: Boolean,
+			default: false
+		},
+		closeOnSelect: {
+			type: Boolean,
+			default: false
+		}
+	},
+	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);
+		}
+		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);
+		}
+		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;
+		}
+		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 });
+		}
+	});
+	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();
+		}
+		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();
+			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);
+		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 });
+	}
+	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: {},
+		as: { default: "div" },
+		placement: { default: "bottom-start" },
+		offset: {},
+		strategy: { default: "absolute" },
+		flip: {
+			type: Boolean,
+			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;
+		});
+	}
+});
+//#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: {},
+		as: { default: "span" },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		longPressDelay: { default: 700 },
+		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-expanded": root.isOpen.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 });
+		}, { _: 8 }), 1);
+		setTemplateRefBinding(n1, () => setElement);
+		return n1;
+	}
+});
+//#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: {},
+		as: { default: "button" },
+		value: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		destructive: {
+			type: Boolean,
+			default: false
+		},
+		closeOnSelect: {
+			type: Boolean,
+			default: true
+		}
+	},
+	emits: ["select"],
+	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;
+	}
+});
+//#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: {
+		as: { default: "span" },
+		forceMount: {
+			type: Boolean,
+			default: false
+		}
+	},
+	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);
+		});
+	}
+});
+//#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: {},
+		as: { default: "div" }
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
+		useRequiredInject(menuKey, "RpDropdownMenuLabel");
+		const rootAttrs = computed(() => mergeProps(attrs, {
+			id: props.id,
+			role: "presentation",
+			class: "rp-dropdown-menu__group-label"
+		}));
+		return createDynamicComponent(() => __props.as, { $: [() => rootAttrs.value] }, extend(() => {
+			return createSlot();
+		}, { _: 8 }), 1);
+	}
+});
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu-portal.vue
+var dropdown_menu_portal_default = /* @__PURE__ */ defineVaporComponent({
+	name: "RpDropdownMenuPortal",
+	__name: "dropdown-menu-portal",
+	props: {
+		to: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		teleport: {
+			type: Boolean,
+			default: true
+		},
+		teleportTo: { default: void 0 }
+	},
+	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);
+	}
+});
+//#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: {},
+		as: { default: "div" },
+		modelValue: { default: void 0 },
+		defaultValue: { default: null },
+		ariaLabel: {},
+		ariaLabelledby: {}
+	},
+	emits: ["update:modelValue"],
+	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);
+		function select(nextValue) {
+			if (value.value === nextValue) return;
+			if (props.modelValue === void 0) uncontrolled.value = nextValue;
+			emit("update:modelValue", nextValue);
+		}
+		provide(radioGroupKey, {
+			value,
+			select
+		});
+		const rootAttrs = computed(() => mergeProps(attrs, {
+			id: props.id,
+			role: "group",
+			class: "rp-dropdown-menu__radio-group",
+			"aria-label": props.ariaLabel,
+			"aria-labelledby": props.ariaLabelledby
+		}));
+		return createDynamicComponent(() => __props.as, { $: [() => rootAttrs.value] }, extend(() => {
+			return createSlot("default", { value: () => value.value });
+		}, { _: 8 }), 1);
+	}
+});
+//#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: {
+		value: {},
+		id: {},
+		as: { default: "button" },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		destructive: {
+			type: Boolean,
+			default: false
+		},
+		closeOnSelect: {
+			type: Boolean,
+			default: false
+		}
+	},
+	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();
+		});
+		watch(isOpen, (value) => {
+			if (!value) activeReference.value = null;
+		}, { flush: "sync" });
+		provide(rootKey, context);
+		__expose({
+			open,
+			close,
+			toggle,
+			openAt
+		});
+		return createSlot("default", { $: [() => slotProps.value] });
+	}
+});
+//#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: {
+		id: {},
+		as: { default: "div" },
+		orientation: { default: "horizontal" }
+	},
+	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);
+	}
+});
+//#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,
+			default: void 0
+		},
+		defaultOpen: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["update:open"],
+	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);
+		const trigger = ref(null);
+		const contentId = ref();
+		const actualPlacement = ref("right-start");
+		const pendingFocus = ref(false);
+		function setOpen(value) {
+			const previous = isOpen.value;
+			if (props.open === void 0) uncontrolled.value = value;
+			if (previous !== value) emit("update:open", value);
+		}
+		const context = {
+			isOpen,
+			trigger,
+			contentId,
+			actualPlacement,
+			pendingFocus,
+			menu: null,
+			open(focus = "first") {
+				parentMenu.closeSubmenus(context);
+				pendingFocus.value = focus;
+				setOpen(true);
+				if (focus) nextTick(() => context.menu?.focus(focus));
+			},
+			close(focusParent = false) {
+				setOpen(false);
+				pendingFocus.value = false;
+				context.menu?.closeSubmenus();
+				if (focusParent) {
+					parentMenu.setActive(trigger.value?.id ?? "");
+					parentMenu.focusElement();
+				}
+			}
+		};
+		parentMenu.registerSub(context);
+		provide(subKey, context);
+		watch(parentMenu.root.isOpen, (open) => {
+			if (!open) context.close(false);
+		});
+		onBeforeUnmount(() => parentMenu.unregisterSub(context));
+		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;
+		});
+	}
+});
+//#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: {},
+		as: { default: "button" },
+		disabled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
+		const menu = useRequiredInject(menuKey, "RpDropdownMenuSubTrigger");
+		const sub = useRequiredInject(subKey, "RpDropdownMenuSubTrigger");
+		const generatedId = useId();
+		const id = computed(() => props.id ?? `${generatedId}-sub-trigger`);
+		const isDisabled = computed(() => menu.root.disabled.value || props.disabled);
+		const focused = computed(() => menu.isActive(id.value));
+		const registration = {
+			get id() {
+				return id.value;
+			},
+			element: () => sub.trigger.value,
+			disabled: () => isDisabled.value,
+			activate: () => sub.open("first"),
+			submenu: sub
+		};
+		menu.registerItem(registration);
+		onBeforeUnmount(() => menu.unregisterItem(id.value));
+		function setElement(value) {
+			resolveHTMLElementRef(value, id.value, (resolved) => {
+				sub.trigger.value = resolved;
+			});
+		}
+		function onMouseenter() {
+			if (isDisabled.value) return;
+			menu.setActive(id.value);
+			sub.open(false);
+		}
+		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,
+				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",
@@ -72,140 +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 children = [h("button", props.context.getItemProps(props.item, currentPath, props.focused, props.disabled, props.submenuOpen), 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)
-			});
+		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
 		});
+		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": 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 DropdownMenuSubmenu = defineComponent({
-	name: "RpDropdownMenuSubmenu",
-	props: {
-		context: contextProp,
-		item: {
-			type: Object,
-			required: true
-		},
-		path: {
-			type: Array,
-			required: true
-		},
-		renderItem: renderItemProp
-	},
-	setup(props) {
-		return () => h("div", props.context.getSubmenuProps(props.item, props.path, true), [h(DropdownMenuItemsList, {
-			context: props.context,
-			items: props.item.children ?? [],
-			parentPath: props.path,
-			renderItem: props.renderItem
-		})]);
-	}
-});
-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, 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;
@@ -243,7 +1714,52 @@ function useDropdownMenuDisclosure({ props, emit, rootRef, uncontrolledOpen, isD
 			focusMenu();
 		} else resetMenuFocus();
 	});
-	useClickOutside(rootRef, isVisible, () => close());
+	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,
@@ -253,13 +1769,17 @@ function useDropdownMenuDisclosure({ props, emit, rootRef, uncontrolledOpen, isD
 }
 //#endregion
 //#region src/components/dropdown-menu/useDropdownMenuDom.ts
-function useDropdownMenuDom({ menuId, rootRef, menuRef, placement, focusedPath }) {
+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());
 	}
 	function focusTrigger() {
 		nextTick(() => {
+			if (targetRef.value instanceof HTMLElement) {
+				targetRef.value.focus();
+				return;
+			}
 			(rootRef.value?.querySelector("[aria-haspopup=\"menu\"]"))?.focus();
 		});
 	}
@@ -457,15 +1977,22 @@ function useDropdownMenuInteractions({ props, emit, isDisabled, focusedPath, ope
 	function activateItem(item, path, event) {
 		if (item.disabled) return;
 		if (hasItemSubmenu(item)) {
-			openSubmenu(path, DEFAULT_FOCUS_TARGET, event ? getEventPoint(event) : void 0);
+			openSubmenu(path, DEFAULT_FOCUS_TARGET, event instanceof MouseEvent ? getEventPoint(event) : void 0);
 			return;
 		}
-		selectItem(item);
+		selectItem(item, event);
 	}
-	function selectItem(item) {
+	function selectItem(item, originalEvent = new Event("select")) {
 		if (item.disabled) return;
-		emit.select?.(item);
-		if (props.closeOnSelect !== false) disclosure.close({ focusTrigger: true });
+		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 closeSubmenusAfter(menuPath) {
 		submenus.closeSubmenusAfter(menuPath);
@@ -497,10 +2024,10 @@ function useDropdownMenuInteractions({ props, emit, isDisabled, focusedPath, ope
 		const path = normalizePath(indexOrPath);
 		hoverIntent.handleItemHover(item, path, event, commitHoveredItem);
 	}
-	function selectFocusedItem() {
+	function selectFocusedItem(event) {
 		const item = getItemAtPath(focusedPath.value);
 		if (!item) return;
-		activateItem(item, focusedPath.value);
+		activateItem(item, focusedPath.value, event);
 	}
 	function moveFocusedItem(direction) {
 		const menuPath = moveFocus(direction);
@@ -553,7 +2080,7 @@ function useDropdownMenuInteractions({ props, emit, isDisabled, focusedPath, ope
 			case "Enter":
 			case " ":
 				event.preventDefault();
-				selectFocusedItem();
+				selectFocusedItem(event);
 				break;
 			case "Escape":
 				event.preventDefault();
@@ -655,8 +2182,30 @@ function useDropdownMenuNavigation(items) {
 	};
 }
 //#endregion
+//#region src/components/dropdown-menu/useDropdownMenuPortalPosition.ts
+function useDropdownMenuPortalPosition(options) {
+	const floating = useFloatingPosition({
+		reference: options.reference,
+		floating: options.menuRef,
+		arrow: options.arrowRef,
+		open: options.isVisible,
+		placement: () => options.placement.value,
+		strategy: () => options.props.strategy ?? "absolute",
+		offset: () => options.props.offset,
+		flip: () => options.props.flip !== false,
+		shift: () => options.props.shift !== false,
+		collisionPadding: () => options.props.collisionPadding ?? 8,
+		restartKey: options.restartKey
+	});
+	return {
+		actualPlacement: floating.actualPlacement,
+		arrowStyle: floating.arrowStyle,
+		contentStyle: floating.floatingStyle
+	};
+}
+//#endregion
 //#region src/components/dropdown-menu/useDropdownMenuRenderItems.ts
-function useDropdownMenuRenderItems({ items, getItemId, getSubmenuId, getMenuActiveDescendant, isItemFocused, isSubmenuOpen, activateItem, focusHoveredItem, selectItem, openSubmenu, closeSubmenu, close }) {
+function useDropdownMenuRenderItems({ props, actualPlacement, items, getItemId, getSubmenuId, getMenuActiveDescendant, getItemElement, isItemFocused, isSubmenuOpen, activateItem, focusHoveredItem, selectItem, openSubmenu, closeSubmenu, close }) {
 	const renderedItems = computed(() => getRenderedItems(items.value));
 	function getRenderedItems(dropdownItems, parentPath = []) {
 		return dropdownItems.map((item, index) => {
@@ -697,9 +2246,9 @@ function useDropdownMenuRenderItems({ items, getItemId, getSubmenuId, getMenuAct
 			"aria-expanded": hasSubmenu ? resolvedSubmenuOpen : void 0,
 			"aria-haspopup": hasSubmenu ? "menu" : void 0,
 			"aria-disabled": disabled || void 0,
-			"data-disabled": disabled || void 0,
-			"data-focused": focused || void 0,
-			"data-submenu": hasSubmenu || void 0,
+			"data-disabled": disabled ? "" : void 0,
+			"data-highlighted": focused ? "" : void 0,
+			"data-submenu": hasSubmenu ? "" : void 0,
 			onClick: (event) => activateItem(item, path, event),
 			onMouseenter: (event) => focusHoveredItem(item, path, event)
 		};
@@ -742,7 +2291,13 @@ function useDropdownMenuRenderItems({ items, getItemId, getSubmenuId, getMenuAct
 			isSubmenuOpen,
 			getItemProps,
 			getSubmenuProps,
-			getItemSlotProps
+			getItemSlotProps,
+			getItemElement,
+			getSubmenuPlacement: () => actualPlacement.value.endsWith("end") ? "left-start" : "right-start",
+			getStrategy: () => props.strategy ?? "absolute",
+			getFlip: () => props.flip !== false,
+			getShift: () => props.shift !== false,
+			getCollisionPadding: () => props.collisionPadding ?? 8
 		},
 		getItemProps,
 		getItemSlotProps
@@ -794,16 +2349,42 @@ function useDropdownSubmenus({ focusedPath, getItemAtPath, focusItem }) {
 function useDropdownMenu(props, emit = {}) {
 	const rootRef = ref(null);
 	const menuRef = ref(null);
+	const arrowRef = ref(null);
 	const uncontrolledOpen = ref(false);
 	const generatedId = useId();
 	const menuId = computed(() => props.id ?? `${generatedId}-menu`);
 	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);
 	const visibleItems = computed(() => props.items ?? []);
 	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({
+		props,
+		reference,
+		menuRef,
+		arrowRef,
+		isVisible,
+		placement,
+		restartKey: () => [
+			shouldTeleport.value,
+			teleportTo.value,
+			teleportPositioningKey.value
+		]
+	});
+	const placementSide = computed(() => actualPlacement.value.split("-")[0]);
 	const { focusedPath, focusedIndex, getItemAtPath, focusItem, resetFocus, isItemFocused, moveFocus } = useDropdownMenuNavigation(visibleItems);
 	const submenus = useDropdownSubmenus({
 		focusedPath,
@@ -815,7 +2396,8 @@ function useDropdownMenu(props, emit = {}) {
 		menuId,
 		rootRef,
 		menuRef,
-		placement,
+		targetRef: targetElement,
+		placement: actualPlacement,
 		focusedPath
 	});
 	const hoverIntent = useDropdownMenuHoverIntent({
@@ -827,6 +2409,8 @@ function useDropdownMenu(props, emit = {}) {
 		props,
 		emit,
 		rootRef,
+		menuRef,
+		targetRef: targetElement,
 		uncontrolledOpen,
 		isDisabled,
 		isOpen,
@@ -837,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({
@@ -855,7 +2440,8 @@ function useDropdownMenu(props, emit = {}) {
 		isSubmenuOpeningLeft
 	});
 	const rootClass = computed(() => bem("rp-dropdown-menu", {
-		[`placement-${placement.value}`]: true,
+		[`placement-${actualPlacement.value}`]: true,
+		target: isExplicitTarget.value,
 		open: isVisible.value,
 		disabled: isDisabled.value
 	}));
@@ -886,10 +2472,13 @@ function useDropdownMenu(props, emit = {}) {
 		toggle
 	}));
 	const { renderedItems, renderContext, getItemProps, getItemSlotProps } = useDropdownMenuRenderItems({
+		props,
+		actualPlacement,
 		items: visibleItems,
 		getItemId,
 		getSubmenuId,
 		getMenuActiveDescendant,
+		getItemElement,
 		isItemFocused,
 		isSubmenuOpen,
 		activateItem,
@@ -899,9 +2488,49 @@ function useDropdownMenu(props, emit = {}) {
 		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([
+		isExplicitTarget,
+		targetElement,
+		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" });
 	return {
 		rootRef,
 		menuRef,
+		arrowRef,
 		menuId,
 		isVisible,
 		isEmpty,
@@ -913,6 +2542,16 @@ function useDropdownMenu(props, emit = {}) {
 		activeDescendantId,
 		rootClass,
 		contentClass,
+		contentStyle: computed(() => ({
+			...contentStyle.value,
+			zIndex: layer.zIndex.value
+		})),
+		arrowStyle,
+		actualPlacement,
+		placementSide,
+		isTargetMode: isExplicitTarget,
+		teleportTo,
+		shouldTeleport,
 		triggerProps,
 		contentProps,
 		slotProps,
@@ -931,22 +2570,22 @@ function useDropdownMenu(props, emit = {}) {
 }
 //#endregion
 //#region src/components/dropdown-menu/dropdown-menu.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("No actions", 2);
-var t1 = template("<div class=rp-dropdown-menu__empty>");
-var t2 = template("<span class=rp-dropdown-menu__label> </span>");
-var t3 = template("<kbd class=rp-dropdown-menu__shortcut> ");
-var t4 = template("<span class=rp-dropdown-menu__submenu-icon aria-hidden=true>");
-var t5 = template("<div>");
+var t0 = template("<span class=rp-dropdown-menu__arrow aria-hidden=true>");
+var t1 = template("No actions", 2);
+var t2 = template("<div>");
+var t3 = template("<span> </span>");
+var t4 = template("<kbd> ");
+var t5 = template("<span>");
 var t6 = template("<span>", 1);
 //#endregion
 //#region src/components/dropdown-menu/dropdown-menu.vue
 var dropdown_menu_default = /* @__PURE__ */ defineVaporComponent({
 	name: "RpDropdownMenu",
+	inheritAttrs: false,
 	__name: "dropdown-menu",
 	props: {
 		id: {},
 		items: { default: () => [] },
-		placement: { default: "bottom-start" },
 		open: {
 			type: Boolean,
 			default: void 0
@@ -959,64 +2598,181 @@ var dropdown_menu_default = /* @__PURE__ */ defineVaporComponent({
 			type: Boolean,
 			default: true
 		},
-		ariaLabel: {}
+		ariaLabel: {},
+		modal: {
+			type: Boolean,
+			default: false
+		},
+		ignore: {},
+		portal: {
+			type: Boolean,
+			default: void 0
+		},
+		portalTo: {},
+		target: {},
+		placement: { default: "bottom-start" },
+		strategy: { default: "absolute" },
+		offset: {},
+		flip: {
+			type: Boolean,
+			default: true
+		},
+		shift: {
+			type: Boolean,
+			default: true
+		},
+		collisionPadding: { default: 8 },
+		arrow: {
+			type: Boolean,
+			default: false
+		},
+		teleport: {
+			type: Boolean,
+			default: true
+		},
+		teleportTo: {},
+		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, isVisible, isEmpty, visibleItems, renderContext, rootClass, contentClass, 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) => emit("select", item)
+			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");
+		const rootAttrs = computed(() => getRootAttrs({
+			class: rootClass.value,
+			"data-state": state.value,
+			"data-disabled": presence(props.disabled)
+		}));
+		const publicSlotProps = computed(() => {
+			const partAttrs = getPartAttrs("trigger");
+			return {
+				...slotProps.value,
+				triggerProps: {
+					...slotProps.value.triggerProps,
+					...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)
+				}
+			};
 		});
+		const publicContentProps = computed(() => ({
+			...contentProps.value,
+			...getPartAttrs("content", {
+				class: contentClass.value,
+				style: contentStyle.value
+			}),
+			"data-state": state.value,
+			"data-placement": actualPlacement.value
+		}));
+		const publicRenderContext = computed(() => ({
+			...renderContext,
+			getPublicPartAttrs: getPartAttrs
+		}));
 		const _setTemplateRef = createTemplateRefSetter();
-		const n23 = t6();
-		renderEffect(() => setClass(n23, unref(rootClass)));
-		setInsertionState(n23, null, 0);
-		createSlot("default", { $: [() => unref(slotProps)] });
-		setInsertionState(n23, null, 1);
-		createComponent(VaporTransition, { name: "rp-dropdown-menu-content" }, extend(() => {
-			return createIf(() => unref(isVisible), () => {
-				const n21 = t5();
-				renderEffect(() => setDynamicProps(n21, [{ class: unref(contentClass) }, unref(contentProps)]));
-				setInsertionState(n21, null, 0);
-				createIf(() => unref(isEmpty), () => {
-					const n8 = t1();
-					setInsertionState(n8, null, 0);
-					createSlot("empty", null, () => {
-						return t0();
+		const n29 = t6();
+		renderEffect(() => setDynamicProps(n29, [rootAttrs.value]));
+		setInsertionState(n29, null, 0);
+		createIf(() => !unref(isTargetMode), () => {
+			return createSlot("default", { $: [() => publicSlotProps.value] });
+		});
+		setInsertionState(n29, null, 1);
+		createComponent(VaporTeleport, {
+			to: () => unref(teleportTo),
+			disabled: () => !unref(shouldTeleport)
+		}, () => {
+			return createComponent(VaporTransition, { name: "rp-dropdown-menu-content" }, extend(() => {
+				return createIf(() => unref(isVisible), () => {
+					const n26 = t2();
+					renderEffect(() => setDynamicProps(n26, [publicContentProps.value, { "data-side": unref(placementSide) }]));
+					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));
+						});
+						return n7;
 					});
-					return n8;
-				});
-				setInsertionState(n21, null, 1);
-				createComponent(unref(dropdown_menu_items_default), {
-					items: () => unref(visibleItems),
-					context: () => unref(renderContext)
-				}, { "item": extend((itemSlotProps) => {
-					return [createSlot("item", { $: [() => itemSlotProps] }, () => {
-						const n11 = t2();
-						const x11 = txt(n11);
-						renderEffect(() => setText(x11, toDisplayString(itemSlotProps.item.label)));
-						return [n11, createIf(() => itemSlotProps.item.shortcut, () => {
-							const n14 = t3();
-							const x14 = txt(n14);
-							renderEffect(() => setText(x14, toDisplayString(itemSlotProps.item.shortcut)));
-							return n14;
+					setInsertionState(n26, null, 1);
+					createIf(() => unref(isEmpty), () => {
+						const n13 = t2();
+						renderEffect(() => setDynamicProps(n13, [unref(getPartAttrs)("empty", { class: "rp-dropdown-menu__empty" })]));
+						setInsertionState(n13, null, 0);
+						createSlot("empty", null, () => {
+							return t1();
+						});
+						return n13;
+					});
+					setInsertionState(n26, null, 2);
+					createComponent(dropdown_menu_items_default, {
+						items: () => unref(visibleItems),
+						context: () => publicRenderContext.value
+					}, { "item": extend((itemSlotProps) => {
+						return [createSlot("item", { $: [() => itemSlotProps] }, () => {
+							const n16 = t3();
+							const x16 = txt(n16);
+							renderEffect(() => {
+								setDynamicProps(n16, [unref(getPartAttrs)("label", { class: "rp-dropdown-menu__label" })]);
+								setText(x16, toDisplayString(itemSlotProps.item.label));
+							});
+							return [n16, createIf(() => itemSlotProps.item.shortcut, () => {
+								const n19 = t4();
+								const x19 = txt(n19);
+								renderEffect(() => {
+									setDynamicProps(n19, [unref(getPartAttrs)("shortcut", { class: "rp-dropdown-menu__shortcut" })]);
+									setText(x19, toDisplayString(itemSlotProps.item.shortcut));
+								});
+								return n19;
+							}, null, 129)];
+						}), createIf(() => itemSlotProps.hasSubmenu, () => {
+							const n23 = t5();
+							renderEffect(() => setDynamicProps(n23, [unref(getPartAttrs)("submenuIndicator", { class: "rp-dropdown-menu__submenu-icon" }), { "aria-hidden": "true" }]));
+							setInsertionState(n23, null, 0);
+							createComponent(unref(chevron_right_default));
+							return n23;
 						}, null, 129)];
-					}), createIf(() => itemSlotProps.hasSubmenu, () => {
-						const n18 = t4();
-						setInsertionState(n18, null, 0);
-						createComponent(unref(chevron_right_default));
-						return n18;
-					}, null, 129)];
-				}, { _: 8 }) });
-				_setTemplateRef(n21, menuRef, null, "menuRef");
-				return n21;
-			}, null, 129);
-		}, { _: 8 }));
-		setStaticTemplateRef(n23, rootRef, null, "rootRef");
-		return n23;
+					}, { _: 8 }) });
+					_setTemplateRef(n26, menuRef, null, "menuRef");
+					return n26;
+				}, null, 129);
+			}, { _: 8 }));
+		});
+		setStaticTemplateRef(n29, rootRef, null, "rootRef");
+		return n29;
 	}
 });
 //#endregion
-export { useDropdownMenu as n, dropdown_menu_default as t };
+//#region src/components/dropdown-menu/types.ts
+var dropdownMenuParts = [
+	"root",
+	"trigger",
+	"content",
+	"item",
+	"label",
+	"shortcut",
+	"submenu",
+	"submenuIndicator",
+	"empty"
+];
+//#endregion
+//#region src/components/dropdown-menu/index.ts
+var DropdownMenuItem = dropdown_menu_item_default;
+//#endregion
+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 };