ropav 0.0.10 → 0.0.11

package/dist/dropdown-menu.js

@@ -1,7 +1,1251 @@
 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 { 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 { 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 { 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
+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;
+}
+function getFocusTarget(options) {
+	if (typeof options === "string") return options;
+	return options?.focus ?? "first";
+}
+function toHTMLElement(value) {
+	if (typeof HTMLElement !== "undefined" && value instanceof HTMLElement) return value;
+	const element = value?.$el;
+	return typeof HTMLElement !== "undefined" && element instanceof HTMLElement ? element : null;
+}
+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 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();
+	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 primitiveAsProp(defaultValue) {
+	return {
+		type: [
+			String,
+			Object,
+			Function
+		],
+		default: defaultValue
+	};
+}
+var DropdownMenuRoot = defineComponent({
+	name: "RpDropdownMenuRoot",
+	props: {
+		id: String,
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultOpen: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		modal: {
+			type: Boolean,
+			default: true
+		},
+		target: {
+			type: [String, Object],
+			default: null
+		},
+		virtualAnchor: {
+			type: Object,
+			default: null
+		}
+	},
+	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;
+		}
+		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,
+			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
+		});
+		return () => slots.default?.(slotProps.value);
+	}
+});
+var DropdownMenuTrigger = defineComponent({
+	name: "RpDropdownMenuTrigger",
+	inheritAttrs: false,
+	props: {
+		id: String,
+		as: primitiveAsProp("button"),
+		disabled: {
+			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 }));
+		};
+	}
+});
+var DropdownMenuContextTrigger = defineComponent({
+	name: "RpDropdownMenuContextTrigger",
+	inheritAttrs: false,
+	props: {
+		id: String,
+		as: primitiveAsProp("span"),
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		longPressDelay: {
+			type: Number,
+			default: 700
+		},
+		longPressTolerance: {
+			type: Number,
+			default: 10
+		}
+	},
+	setup(props, { attrs, slots }) {
+		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) {
+			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;
+		}
+		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();
+		}
+		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, {
+			id: id.value,
+			ref: setElement,
+			"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
+		}), 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?.());
+	}
+});
+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({
+	name: "RpDropdownMenuItem",
+	inheritAttrs: false,
+	props: {
+		id: String,
+		as: primitiveAsProp("button"),
+		value: [String, Number],
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		destructive: {
+			type: Boolean,
+			default: false
+		},
+		closeOnSelect: {
+			type: Boolean,
+			default: true
+		}
+	},
+	emits: ["select"],
+	setup(props, { attrs, emit, slots }) {
+		const item = usePrimitiveItem("RpDropdownMenuItem", props, emit, { defaultCloseOnSelect: true });
+		return () => item.render(attrs, slots);
+	}
+});
+var DropdownMenuSeparator = defineComponent({
+	name: "RpDropdownMenuSeparator",
+	inheritAttrs: false,
+	props: {
+		id: String,
+		as: primitiveAsProp("div"),
+		orientation: {
+			type: String,
+			default: "horizontal"
+		}
+	},
+	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
+		}));
+	}
+});
+var DropdownMenuLabel = defineComponent({
+	name: "RpDropdownMenuLabel",
+	inheritAttrs: false,
+	props: {
+		id: String,
+		as: primitiveAsProp("div")
+	},
+	setup(props, { attrs, slots }) {
+		useRequiredInject(menuKey, "RpDropdownMenuLabel");
+		return () => h(props.as ?? "div", mergeProps(attrs, {
+			id: props.id,
+			role: "presentation",
+			class: "rp-dropdown-menu__group-label"
+		}), slots.default?.());
+	}
+});
+var DropdownMenuCheckboxItem = defineComponent({
+	name: "RpDropdownMenuCheckboxItem",
+	inheritAttrs: false,
+	props: {
+		id: String,
+		as: primitiveAsProp("button"),
+		modelValue: {
+			type: [Boolean, String],
+			default: void 0
+		},
+		defaultValue: {
+			type: [Boolean, String],
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		destructive: {
+			type: Boolean,
+			default: false
+		},
+		closeOnSelect: {
+			type: Boolean,
+			default: false
+		}
+	},
+	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);
+	}
+});
+var DropdownMenuRadioGroup = defineComponent({
+	name: "RpDropdownMenuRadioGroup",
+	inheritAttrs: false,
+	props: {
+		id: String,
+		as: primitiveAsProp("div"),
+		modelValue: {
+			type: [String, Number],
+			default: void 0
+		},
+		defaultValue: {
+			type: [String, Number],
+			default: null
+		},
+		ariaLabel: String,
+		ariaLabelledby: String
+	},
+	emits: ["update:modelValue"],
+	setup(props, { attrs, emit, slots }) {
+		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
+		});
+		return () => h(props.as ?? "div", 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 }));
+	}
+});
+var DropdownMenuRadioItem = defineComponent({
+	name: "RpDropdownMenuRadioItem",
+	inheritAttrs: false,
+	props: {
+		id: String,
+		as: primitiveAsProp("button"),
+		value: {
+			type: [String, Number],
+			required: true
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		destructive: {
+			type: Boolean,
+			default: false
+		},
+		closeOnSelect: {
+			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
+		});
+		const item = usePrimitiveItem("RpDropdownMenuRadioItem", props, emit, {
+			role: "menuitemradio",
+			checked,
+			defaultCloseOnSelect: false,
+			afterSelect: () => group.select(props.value)
+		});
+		return () => item.render(attrs, slots);
+	}
+});
+var DropdownMenuItemIndicator = defineComponent({
+	name: "RpDropdownMenuItemIndicator",
+	inheritAttrs: false,
+	props: {
+		as: primitiveAsProp("span"),
+		forceMount: {
+			type: Boolean,
+			default: false
+		}
+	},
+	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
+			}));
+		};
+	}
+});
+var DropdownMenuSub = defineComponent({
+	name: "RpDropdownMenuSub",
+	props: {
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultOpen: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["update:open"],
+	setup(props, { emit, slots }) {
+		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 () => slots.default?.({
+			isOpen: isOpen.value,
+			open: context.open,
+			close: context.close
+		});
+	}
+});
+var DropdownMenuSubTrigger = defineComponent({
+	name: "RpDropdownMenuSubTrigger",
+	inheritAttrs: false,
+	props: {
+		id: String,
+		as: primitiveAsProp("button"),
+		disabled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(props, { attrs, slots }) {
+		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) {
+			sub.trigger.value = toHTMLElement(value);
+		}
+		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?.({
+				focused: focused.value,
+				disabled: isDisabled.value,
+				isOpen: sub.isOpen.value,
+				open: sub.open,
+				close: sub.close
+			}));
+		};
+	}
+});
+//#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);
 function render(_ctx) {
@@ -116,7 +1360,11 @@ var DropdownMenuItemRow = defineComponent({
 		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)))];
+			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,
@@ -177,12 +1425,38 @@ var DropdownMenuSubmenu = defineComponent({
 		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
-		})]);
+		const element = ref(null);
+		const floating = useFloatingPosition({
+			reference: computed(() => props.context.getItemElement(props.path)),
+			floating: element,
+			open: computed(() => props.context.isSubmenuOpen(props.path)),
+			placement: props.context.getSubmenuPlacement,
+			strategy: props.context.getStrategy,
+			offset: () => 4,
+			flip: props.context.getFlip,
+			shift: props.context.getShift,
+			collisionPadding: props.context.getCollisionPadding,
+			arrowEnabled: () => false
+		});
+		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,
+				"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
+			})]);
+		};
 	}
 });
 var dropdown_menu_items_default = defineComponent({
@@ -205,7 +1479,7 @@ var dropdown_menu_items_default = defineComponent({
 });
 //#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 }) {
 	function setOpen(nextOpen) {
 		if (nextOpen && isDisabled.value) return;
 		const previousOpen = isOpen.value;
@@ -243,7 +1517,17 @@ function useDropdownMenuDisclosure({ props, emit, rootRef, uncontrolledOpen, isD
 			focusMenu();
 		} else resetMenuFocus();
 	});
-	useClickOutside(rootRef, isVisible, () => close());
+	useClickOutside([
+		rootRef,
+		menuRef,
+		targetRef
+	], isVisible, (event) => {
+		if (props.modal) {
+			event.preventDefault();
+			event.stopPropagation();
+		}
+		close({ focusTrigger: Boolean(props.modal) });
+	});
 	return {
 		open,
 		close,
@@ -253,13 +1537,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 +1745,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 +1792,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 +1848,7 @@ function useDropdownMenuInteractions({ props, emit, isDisabled, focusedPath, ope
 			case "Enter":
 			case " ":
 				event.preventDefault();
-				selectFocusedItem();
+				selectFocusedItem(event);
 				break;
 			case "Escape":
 				event.preventDefault();
@@ -655,8 +1950,31 @@ 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,
+		arrowEnabled: () => Boolean(options.props.arrow),
+		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 +2015,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 +2060,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 +2118,32 @@ 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 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 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]
+	});
+	const placementSide = computed(() => actualPlacement.value.split("-")[0]);
 	const { focusedPath, focusedIndex, getItemAtPath, focusItem, resetFocus, isItemFocused, moveFocus } = useDropdownMenuNavigation(visibleItems);
 	const submenus = useDropdownSubmenus({
 		focusedPath,
@@ -815,7 +2155,8 @@ function useDropdownMenu(props, emit = {}) {
 		menuId,
 		rootRef,
 		menuRef,
-		placement,
+		targetRef: targetElement,
+		placement: actualPlacement,
 		focusedPath
 	});
 	const hoverIntent = useDropdownMenuHoverIntent({
@@ -827,6 +2168,8 @@ function useDropdownMenu(props, emit = {}) {
 		props,
 		emit,
 		rootRef,
+		menuRef,
+		targetRef: targetElement,
 		uncontrolledOpen,
 		isDisabled,
 		isOpen,
@@ -855,7 +2198,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 +2230,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 +2246,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 +2300,13 @@ function useDropdownMenu(props, emit = {}) {
 		activeDescendantId,
 		rootClass,
 		contentClass,
+		contentStyle,
+		arrowStyle,
+		actualPlacement,
+		placementSide,
+		isTargetMode: isExplicitTarget,
+		teleportTo,
+		shouldTeleport,
 		triggerProps,
 		contentProps,
 		slotProps,
@@ -931,22 +2325,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 +2353,171 @@ var dropdown_menu_default = /* @__PURE__ */ defineVaporComponent({
 			type: Boolean,
 			default: true
 		},
-		ariaLabel: {}
+		ariaLabel: {},
+		modal: {
+			type: Boolean,
+			default: false
+		},
+		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"],
 	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, 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)
+		});
+		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": placementSide.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(unref(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 = DropdownMenuItem$1;
+//#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 };