ajo-ui 0.1.0

package/dist/chunks/menu-B45IyHHC.js

@@ -0,0 +1,704 @@
+import { flag, popupStyle, text, triggerAttrs } from "../utils.js";
+import { t as collection } from "./collection-DtRB63U4.js";
+import { n as popup, t as contentAttrs } from "./popup-C8Bb3l_g.js";
+import { callHandler, controlled, dom, frame, listen, roving, statefulRootAttrs, typeahead } from "ajo-cloves";
+import { context } from "ajo/context";
+import { Fragment, jsx, jsxs } from "ajo/jsx-runtime";
+//#region packages/ajo-ui/src/menu-cluster.ts
+var CompositionContext = context(null);
+var InvocationContext = context(null);
+/** Selects ContextMenu policy for exactly one descendant Menu root. */
+var provideContextMenuComposition = (invoke, restoreFocus) => CompositionContext({
+	invoke,
+	profile: "context",
+	restoreFocus
+});
+/** Selects Menubar policy and its commit-time focus acknowledgement. */
+var provideMenubarComposition = (ackFocus) => CompositionContext({
+	ackFocus,
+	profile: "menubar"
+});
+/** Returns the private family policy selected by a composing Menu root. */
+var menuComposition = () => CompositionContext();
+/** Prevents a composing family policy from leaking into nested Menu roots. */
+var isolateMenuComposition = () => CompositionContext(null);
+/** Publishes Menu's private context-invocation controller to its trigger. */
+var provideMenuInvocation = (value) => InvocationContext(value);
+/** Prevents a context invocation controller from leaking through a nested Menu. */
+var isolateMenuInvocation = () => InvocationContext(null);
+/** Returns the nearest private context-invocation controller. */
+var menuInvocation = () => InvocationContext();
+/** Collection registry for menu items; disabled items are skipped in the focus order. */
+var menuItems = collection("menu");
+/** Matches root and submenu content surfaces. */
+var SURFACE_SELECTOR = "[data-menu-sub-content=\"true\"],[data-menu-content=\"true\"]";
+/** Items owned directly by one menu surface, excluding nested submenu items. */
+var surfaceItems = (surface) => menuItems.items(surface).filter((item) => item.closest(SURFACE_SELECTOR) === surface);
+/** Focuses the first or last direct item of one menu surface. */
+var focusEdge = (surface, which) => {
+	const list = surfaceItems(surface);
+	menuItems.focusItem(surface, which === "first" ? list[0] : list[list.length - 1]);
+};
+/** Private tree seam: each menu level owns only its direct submenu branches. */
+var cluster = () => {
+	const branches = /* @__PURE__ */ new Set();
+	const contains = (branch, target) => Boolean(branch.trigger()?.contains(target) || branch.content()?.contains(target));
+	return {
+		/** Registers one direct branch for exactly its mounted lifetime. */
+		register(branch) {
+			branches.add(branch);
+			return () => branches.delete(branch);
+		},
+		/** Closes every direct branch except an optional active sibling. */
+		close(event, except) {
+			for (const branch of [...branches]) if (branch !== except) branch.close(event);
+		},
+		/** Retains the branch containing target, closes siblings, and recurses. */
+		prune(target, event) {
+			for (const branch of [...branches]) if (contains(branch, target)) branch.prune(target, event);
+			else branch.close(event);
+		}
+	};
+};
+//#endregion
+//#region packages/ajo-ui/src/menu.tsx
+var MenuContext = context(null);
+var RadioContext = context(null);
+var SubContext = context(null);
+var LevelContext = context(null);
+var pointerHighlight = (disabled, closeSubmenus, keep) => (event) => {
+	if (disabled) return;
+	const content = event.currentTarget.closest(SURFACE_SELECTOR);
+	menuItems.focusItem(content, event.currentTarget);
+	closeSubmenus?.(event, keep);
+};
+var MenuRoot = function* ({ defaultOpen, open }) {
+	const composition = menuComposition();
+	const contextComposition = composition?.profile === "context" ? composition : null;
+	const ownerDocument = dom(this) ? this.ownerDocument : null;
+	const node = (value) => {
+		const view = ownerDocument?.defaultView;
+		return Boolean(view && value instanceof view.Node);
+	};
+	const submenus = cluster();
+	let contextSource = null;
+	let disabled = false;
+	let focusRestore = 0;
+	let geometryReady = false;
+	let onOpenChange;
+	let pendingFocus;
+	let menu;
+	const commitMenubarFocus = frame(() => {
+		if (composition?.profile === "menubar" && composition.ackFocus()) focusEdge(menu.content, "first");
+	});
+	this.signal.addEventListener("abort", commitMenubarFocus.cancel);
+	menu = popup(this, {
+		prefix: "menu",
+		profile: composition?.profile ?? "menu",
+		initialOpen: Boolean(open ?? defaultOpen),
+		disabled: () => disabled,
+		onOpenChange: (next, event) => onOpenChange?.(next, event),
+		reference: (view) => view.reference ?? view.trigger,
+		source: (view) => contextComposition ? contextSource : view.trigger ?? (dom(view.reference) ? view.reference : null),
+		reopenOnReferenceChange: Boolean(contextComposition),
+		referenceHidden: "close",
+		dismiss: {
+			prevent: true,
+			outside: true,
+			onDismiss: (event) => {
+				if (event.type === "keydown") close(event);
+				else setOpen(false, event);
+			}
+		},
+		onPosition: () => {
+			geometryReady = true;
+			if (pendingFocus === "content") menu.content?.focus();
+			else if (pendingFocus) focusEdge(menu.content, pendingFocus);
+			else if (composition?.profile === "menubar") commitMenubarFocus();
+			pendingFocus = void 0;
+		},
+		onSync: (opened) => {
+			if (!opened) {
+				commitMenubarFocus.cancel();
+				geometryReady = false;
+				menuItems.clearHighlight(menu.content);
+				submenus.close();
+				pendingFocus = void 0;
+			}
+		}
+	});
+	const focusWhenReady = (focus) => {
+		if (geometryReady) if (focus === "content") menu.content?.focus();
+		else focusEdge(menu.content, focus);
+		else pendingFocus = focus;
+	};
+	const setOpen = (next, event, focus) => {
+		if (disabled && next) return;
+		if (next) focusRestore++;
+		if (next === menu.open) {
+			if (next && focus) focusWhenReady(focus);
+			return;
+		}
+		if (!next) {
+			submenus.close(event);
+			pendingFocus = void 0;
+		} else geometryReady = false;
+		if (next && focus) pendingFocus = focus;
+		menu.setOpen(next, event);
+	};
+	const invoke = (reference, source, event, focus) => {
+		geometryReady = false;
+		pendingFocus = focus;
+		contextSource = source;
+		const changed = menu.reference !== reference;
+		submenus.close(event);
+		menu.setReference(reference);
+		if (menu.open) {
+			if (!changed) menu.update();
+		} else menu.setOpen(true, event);
+	};
+	const close = (event) => {
+		const wasOpen = menu.open;
+		const restore = ++focusRestore;
+		setOpen(false, event);
+		if (contextComposition) {
+			if (wasOpen && !menu.open) contextComposition.restoreFocus();
+		} else queueMicrotask(() => {
+			if (restore === focusRestore && wasOpen && !menu.open) menu.trigger?.focus();
+		});
+	};
+	const dismiss = (event) => {
+		const target = event.target;
+		const reference = menu.reference;
+		if (node(target) && Boolean(this.contains(target) || menu.trigger?.contains(target) || menu.content?.contains(target) || dom(reference) && reference.contains(target))) submenus.prune(target, event);
+		else setOpen(false, event);
+	};
+	const focusedSurface = () => {
+		const active = ownerDocument?.activeElement;
+		return (dom(active) ? active.closest("[data-menu-sub-content=\"true\"],[data-menu-content=\"true\"]") : null) ?? menu.content;
+	};
+	const nav = roving(this, {
+		items: () => surfaceItems(focusedSurface()),
+		onMove: (target) => menuItems.focusItem(focusedSurface(), target)
+	});
+	const ta = typeahead(this, {
+		items: () => surfaceItems(focusedSurface()),
+		onMatch: (target) => menuItems.focusItem(focusedSurface(), target)
+	});
+	listen(this, "keydown", (event) => {
+		if (event.defaultPrevented) return;
+		const target = event.target;
+		if (!target?.closest("[data-menu-trigger=\"true\"],[data-menu-content=\"true\"]")) return;
+		if (target.closest("[data-menu-trigger=\"true\"]")) {
+			if (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ") {
+				event.preventDefault();
+				setOpen(true, event, "first");
+			} else if (event.key === "ArrowUp") {
+				event.preventDefault();
+				setOpen(true, event, "last");
+			}
+			return;
+		}
+		if (nav.handle(event)) return;
+		else if (event.key === "Enter" || event.key === " ") {
+			const item = menuItems.item(event);
+			if (!item) return;
+			event.preventDefault();
+			item.click();
+		} else if (ta.handle(event)) event.preventDefault();
+	});
+	for (const args of this) {
+		disabled = Boolean(args.disabled);
+		onOpenChange = args.onOpenChange;
+		const wasOpen = menu.open;
+		const opened = menu.sync(args.open != null ? Boolean(args.open) : null, {
+			placement: args.placement,
+			gap: args.gap
+		});
+		if (!wasOpen && opened) focusRestore++;
+		if (wasOpen && !opened) {
+			geometryReady = false;
+			commitMenubarFocus.cancel();
+			pendingFocus = void 0;
+			submenus.close();
+		}
+		isolateMenuComposition();
+		isolateMenuInvocation();
+		MenuContext({
+			adoptTriggerId: menu.adoptTriggerId,
+			close,
+			contentId: menu.contentId,
+			contentStyle: menu.contentStyle,
+			disabled,
+			dismiss,
+			open: opened,
+			setContent: menu.setContent,
+			setOpen,
+			setTrigger: menu.setTrigger,
+			get triggerId() {
+				return menu.triggerId;
+			}
+		});
+		if (contextComposition) provideMenuInvocation({
+			adoptTriggerId: menu.adoptTriggerId,
+			contentId: menu.contentId,
+			disabled,
+			invoke: (x, y, event, source, focus) => contextComposition.invoke(invoke, x, y, event, source, focus),
+			open: opened
+		});
+		LevelContext({
+			cluster: submenus,
+			content: () => menu.content,
+			open: () => menu.open
+		});
+		yield /* @__PURE__ */ jsx(Fragment, { children: args.children });
+	}
+};
+/** Root provider for a menu. */
+var Menu = ({ children, class: classes, defaultOpen, disabled, gap, onOpenChange, open, placement, ...attrs }) => /* @__PURE__ */ jsx(MenuRoot, {
+	...statefulRootAttrs(attrs),
+	defaultOpen,
+	disabled,
+	gap,
+	onOpenChange,
+	open,
+	placement,
+	"attr:class": classes,
+	"attr:data-slot": "menu",
+	children
+});
+/** Button that opens a Menu. */
+var MenuTrigger = ({ children, "data-slot": slot = "menu-trigger", disabled, id, ref, type = "button", "set:onclick": onClick, ...attrs }) => {
+	const menu = MenuContext();
+	const disabledFlag = Boolean(disabled ?? menu?.disabled);
+	const adoptedId = menu?.adoptTriggerId(id);
+	return /* @__PURE__ */ jsx("button", {
+		...attrs,
+		...triggerAttrs({
+			controls: menu?.contentId,
+			expanded: Boolean(menu?.open),
+			haspopup: "menu",
+			id: adoptedId ?? id,
+			open: Boolean(menu?.open),
+			ref,
+			setTrigger: menu?.setTrigger,
+			triggerId: menu?.triggerId
+		}),
+		"data-menu-trigger": "true",
+		"data-slot": slot,
+		disabled: disabledFlag,
+		"set:onclick": (event) => {
+			callHandler(onClick, event);
+			if (event.defaultPrevented) return;
+			menu?.setOpen(!menu.open, event, event.detail === 0 ? "first" : void 0);
+		},
+		type,
+		children
+	});
+};
+/** Popover menu content. */
+var MenuContent = ({ children, class: classes, "data-slot": slot = "menu-content", ref, style, ...attrs }) => {
+	const menu = MenuContext();
+	return /* @__PURE__ */ jsx("div", {
+		...attrs,
+		...contentAttrs({
+			id: menu?.contentId,
+			open: Boolean(menu?.open),
+			ref,
+			setContent: menu?.setContent,
+			style: menu?.contentStyle(style) ?? popupStyle(style),
+			tabindex: "-1"
+		}),
+		"aria-labelledby": menu?.triggerId,
+		class: classes,
+		"data-menu-content": "true",
+		"data-slot": slot,
+		hidden: void 0,
+		role: "menu",
+		children
+	});
+};
+/** Group of menu items. */
+var MenuGroup = ({ children, class: classes, "data-slot": slot = "menu-group", ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	class: classes,
+	"data-slot": slot,
+	role: "group",
+	children
+});
+/** Non-interactive label inside a menu. */
+var MenuLabel = ({ children, class: classes, "data-slot": slot = "menu-label", inset, ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	class: classes,
+	"data-inset": flag(inset),
+	"data-slot": slot,
+	children
+});
+/** Single activation guard for every item kind: disabled check, composed onclick, then the kind's action. */
+var activate = (disabled, onClick, action) => (event) => {
+	if (disabled) return;
+	callHandler(onClick, event);
+	if (event.defaultPrevented) return;
+	action(event);
+};
+/** Standard menu action item. */
+var MenuItem = ({ children, class: classes, "data-slot": slot = "menu-item", disabled, inset, onSelect, textValue, variant = "default", "set:onclick": onClick, ...attrs }) => {
+	const menu = MenuContext();
+	const level = LevelContext();
+	const disabledFlag = Boolean(disabled ?? menu?.disabled);
+	const label = textValue ?? text(children);
+	const highlight = pointerHighlight(disabledFlag, level?.cluster.close);
+	return /* @__PURE__ */ jsx("div", {
+		...attrs,
+		...menuItems.attrs({
+			disabled: disabledFlag,
+			label
+		}),
+		"aria-disabled": flag(disabledFlag),
+		class: classes,
+		"data-inset": flag(inset),
+		"data-slot": slot,
+		"data-variant": variant,
+		role: "menuitem",
+		"set:onclick": activate(disabledFlag, onClick, (event) => {
+			onSelect?.(event);
+			if (!event.defaultPrevented) menu?.close(event);
+		}),
+		"set:onpointerenter": highlight,
+		"set:onpointermove": highlight,
+		tabindex: "-1",
+		children
+	});
+};
+/** Shared row shell for checkbox/radio choice items; only role, checked source, and action differ. */
+var choiceItem = (opts) => {
+	const highlight = pointerHighlight(opts.disabled, LevelContext()?.cluster.close);
+	return /* @__PURE__ */ jsxs("div", {
+		...opts.attrs,
+		...menuItems.attrs({
+			disabled: opts.disabled,
+			label: opts.label,
+			value: opts.value
+		}),
+		"aria-checked": opts.checked ? "true" : "false",
+		"aria-disabled": flag(opts.disabled),
+		class: opts.class,
+		"data-checked": flag(opts.checked),
+		"data-slot": opts.slot,
+		role: opts.role,
+		"set:onclick": activate(opts.disabled, opts.onClick, opts.action),
+		"set:onpointerenter": highlight,
+		"set:onpointermove": highlight,
+		tabindex: "-1",
+		children: [/* @__PURE__ */ jsx("span", {
+			class: opts.indicatorClass,
+			children: opts.checked ? /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				class: opts.indicatorIconClass
+			}) : null
+		}), opts.children]
+	});
+};
+/** Checkable menu item. */
+var MenuCheckboxItem = ({ checked, children, class: classes, "data-slot": slot = "menu-checkbox-item", disabled, indicatorClass, indicatorIconClass, onCheckedChange, textValue, "set:onclick": onClick, ...attrs }) => {
+	const menu = MenuContext();
+	const checkedFlag = Boolean(checked);
+	return choiceItem({
+		attrs,
+		checked: checkedFlag,
+		children,
+		class: classes,
+		disabled: Boolean(disabled ?? menu?.disabled),
+		indicatorClass,
+		indicatorIconClass,
+		label: textValue ?? text(children),
+		menu,
+		action: (event) => onCheckedChange?.(!checkedFlag, event),
+		onClick,
+		role: "menuitemcheckbox",
+		slot
+	});
+};
+var MenuRadioGroupRoot = function* ({ defaultValue, value }) {
+	let onValueChange;
+	const state = controlled(this, {
+		fallback: String(value ?? defaultValue ?? ""),
+		onChange: (next, event) => onValueChange?.(next, event)
+	});
+	const change = (next, event) => {
+		state.set(next, event);
+	};
+	for (const args of this) {
+		onValueChange = args.onValueChange;
+		state.sync(args.value != null ? String(args.value ?? "") : void 0);
+		RadioContext({
+			change,
+			value: state.value
+		});
+		yield /* @__PURE__ */ jsx(Fragment, { children: args.children });
+	}
+};
+/** Radio group inside a menu. */
+var MenuRadioGroup = ({ children, class: classes, "data-slot": slot = "menu-radio-group", defaultValue, onValueChange, value, ...attrs }) => /* @__PURE__ */ jsx(MenuRadioGroupRoot, {
+	...statefulRootAttrs(attrs),
+	defaultValue,
+	onValueChange,
+	value,
+	"attr:class": classes,
+	"attr:data-slot": slot,
+	"attr:role": "group",
+	children
+});
+/** Radio item inside a menu radio group. */
+var MenuRadioItem = ({ children, class: classes, "data-slot": slot = "menu-radio-item", disabled, indicatorClass, indicatorIconClass, textValue, value, "set:onclick": onClick, ...attrs }) => {
+	const menu = MenuContext();
+	const group = RadioContext();
+	const itemValue = String(value);
+	return choiceItem({
+		attrs,
+		checked: group?.value === itemValue,
+		children,
+		class: classes,
+		disabled: Boolean(disabled ?? menu?.disabled),
+		indicatorClass,
+		indicatorIconClass,
+		label: textValue ?? text(children),
+		menu,
+		action: (event) => group?.change(itemValue, event),
+		onClick,
+		role: "menuitemradio",
+		slot,
+		value: itemValue
+	});
+};
+/** Visual separator between menu groups. */
+var MenuSeparator = ({ class: classes, "data-slot": slot = "menu-separator", ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	class: classes,
+	"data-slot": slot,
+	role: "separator"
+});
+/** Right-aligned shortcut hint inside a menu item. */
+var MenuShortcut = ({ children, class: classes, "data-slot": slot = "menu-shortcut", ...attrs }) => /* @__PURE__ */ jsx("span", {
+	...attrs,
+	class: classes,
+	"data-slot": slot,
+	children
+});
+var MenuSubRoot = function* ({ defaultOpen, open }) {
+	const children = cluster();
+	const parent = LevelContext();
+	let focusRestore = 0;
+	let geometryReady = false;
+	let menu = null;
+	let onOpenChange;
+	const parentCluster = parent?.cluster ?? null;
+	let pendingFocus = false;
+	let unregister;
+	let branch;
+	let submenu;
+	submenu = popup(this, {
+		prefix: "menu-sub",
+		profile: "submenu",
+		initialOpen: Boolean(open ?? defaultOpen),
+		onOpenChange: (next, event) => onOpenChange?.(next, event),
+		reference: (view) => view.trigger,
+		source: (view) => view.trigger,
+		referenceBoundary: () => parent?.content() ?? null,
+		referenceHidden: "close",
+		dismiss: {
+			prevent: true,
+			outside: true,
+			onDismiss: (event) => {
+				if (event.type === "keydown") close(event);
+				else if (menu) menu.dismiss(event);
+				else setOpen(false, event);
+			}
+		},
+		onSync: (opened) => {
+			if (opened) {
+				geometryReady = true;
+				if (pendingFocus) focusEdge(submenu.content, "first");
+			} else {
+				geometryReady = false;
+				menuItems.clearHighlight(submenu.content);
+				children.close();
+			}
+			pendingFocus = false;
+		}
+	});
+	const focusWhenReady = () => {
+		if (geometryReady) focusEdge(submenu.content, "first");
+		else pendingFocus = true;
+	};
+	const setOpen = (next, event, focus = false) => {
+		if (next) focusRestore++;
+		if (next === submenu.open) {
+			if (next && focus) focusWhenReady();
+			return;
+		}
+		if (next) {
+			geometryReady = false;
+			parentCluster?.close(event, branch);
+		} else children.close(event);
+		pendingFocus = next && focus;
+		submenu.setOpen(next, event);
+	};
+	branch = {
+		close: (event) => setOpen(false, event),
+		content: () => submenu.content,
+		prune: (target, event) => children.prune(target, event),
+		trigger: () => submenu.trigger
+	};
+	unregister = parentCluster?.register(branch);
+	const close = (event) => {
+		const wasOpen = submenu.open;
+		const restore = ++focusRestore;
+		setOpen(false, event);
+		queueMicrotask(() => {
+			if (restore === focusRestore && wasOpen && !submenu.open) submenu.trigger?.focus();
+		});
+	};
+	this.signal.addEventListener("abort", () => unregister?.());
+	listen(this, "keydown", (event) => {
+		if (event.defaultPrevented) return;
+		const target = event.target;
+		if (!target?.closest("[data-menu-sub-trigger=\"true\"],[data-menu-sub-content=\"true\"]")) return;
+		if (event.key === "ArrowRight" && target.matches("[data-menu-sub-trigger=\"true\"]")) {
+			event.preventDefault();
+			setOpen(true, event, true);
+		} else if (event.key === "ArrowLeft") {
+			if (!submenu.open) return;
+			event.preventDefault();
+			close(event);
+		}
+	});
+	for (const args of this) {
+		menu = MenuContext();
+		onOpenChange = args.onOpenChange;
+		const parentOpen = parent?.open() ?? menu?.open ?? true;
+		if (!parentOpen) {
+			children.close();
+			submenu.init(false);
+		}
+		const wasOpen = submenu.open;
+		const opened = submenu.sync(parentOpen ? args.open != null ? Boolean(args.open) : null : false);
+		if (!wasOpen && opened) focusRestore++;
+		if (wasOpen && !opened) {
+			geometryReady = false;
+			pendingFocus = false;
+			children.close();
+		}
+		SubContext({
+			adoptTriggerId: submenu.adoptTriggerId,
+			branch,
+			close,
+			contentId: submenu.contentId,
+			contentStyle: submenu.contentStyle,
+			open: opened,
+			setContent: submenu.setContent,
+			setOpen,
+			setTrigger: submenu.setTrigger,
+			get triggerId() {
+				return submenu.triggerId;
+			}
+		});
+		LevelContext({
+			cluster: children,
+			content: () => submenu.content,
+			open: () => submenu.open
+		});
+		yield /* @__PURE__ */ jsx(Fragment, { children: args.children });
+	}
+};
+/** Root provider for a nested menu. */
+var MenuSub = ({ children, "data-slot": slot = "menu-sub", defaultOpen, onOpenChange, open, ...attrs }) => /* @__PURE__ */ jsx(MenuSubRoot, {
+	...statefulRootAttrs(attrs),
+	defaultOpen,
+	onOpenChange,
+	open,
+	"attr:data-slot": slot,
+	children
+});
+/** Trigger item that opens a nested menu. */
+var MenuSubTrigger = ({ children, class: classes, "data-slot": slot = "menu-sub-trigger", disabled, iconClass, id, inset, ref, textValue, "set:onclick": onClick, "set:onmouseenter": onMouseEnter, "set:onpointerenter": onPointerEnter, "set:onpointermove": onPointerMove, ...attrs }) => {
+	const menu = MenuContext();
+	const parent = LevelContext();
+	const sub = SubContext();
+	const disabledFlag = Boolean(disabled ?? menu?.disabled);
+	const label = textValue ?? text(children);
+	const highlight = pointerHighlight(disabledFlag, parent?.cluster.close, sub?.branch);
+	const adoptedId = sub?.adoptTriggerId(id);
+	return /* @__PURE__ */ jsxs("div", {
+		...attrs,
+		...menuItems.attrs({
+			disabled: disabledFlag,
+			label
+		}),
+		...triggerAttrs({
+			controls: sub?.contentId,
+			expanded: Boolean(sub?.open),
+			haspopup: "menu",
+			id: adoptedId ?? id,
+			open: Boolean(sub?.open),
+			ref,
+			setTrigger: sub?.setTrigger,
+			triggerId: sub?.triggerId
+		}),
+		"aria-disabled": flag(disabledFlag),
+		class: classes,
+		"data-inset": flag(inset),
+		"data-menu-sub-trigger": "true",
+		"data-slot": slot,
+		role: "menuitem",
+		"set:onclick": (event) => {
+			callHandler(onClick, event);
+			if (event.defaultPrevented) return;
+			if (disabledFlag) return;
+			sub?.setOpen(!sub.open, event, true);
+		},
+		"set:onpointerenter": (event) => {
+			callHandler(onPointerEnter, event);
+			if (!event.defaultPrevented) highlight(event);
+		},
+		"set:onpointermove": (event) => {
+			callHandler(onPointerMove, event);
+			if (!event.defaultPrevented) highlight(event);
+		},
+		"set:onmouseenter": (event) => {
+			callHandler(onMouseEnter, event);
+			if (event.defaultPrevented) return;
+			if (disabledFlag) return;
+			sub?.setOpen(true, event);
+		},
+		tabindex: "-1",
+		children: [children, /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			class: iconClass
+		})]
+	});
+};
+/** Content for a nested menu. */
+var MenuSubContent = ({ children, class: classes, "data-slot": slot = "menu-sub-content", ref, style, ...attrs }) => {
+	const sub = SubContext();
+	return /* @__PURE__ */ jsx("div", {
+		...attrs,
+		...contentAttrs({
+			id: sub?.contentId,
+			open: Boolean(sub?.open),
+			ref,
+			setContent: sub?.setContent,
+			style: sub?.contentStyle(style) ?? popupStyle(style),
+			tabindex: "-1"
+		}),
+		"aria-labelledby": sub?.triggerId,
+		class: classes,
+		"data-menu-sub-content": "true",
+		"data-slot": slot,
+		hidden: void 0,
+		role: "menu",
+		children
+	});
+};
+//#endregion
+export { provideContextMenuComposition as _, MenuItem as a, MenuRadioItem as c, MenuSub as d, MenuSubContent as f, menuInvocation as g, SURFACE_SELECTOR as h, MenuGroup as i, MenuSeparator as l, MenuTrigger as m, MenuCheckboxItem as n, MenuLabel as o, MenuSubTrigger as p, MenuContent as r, MenuRadioGroup as s, Menu as t, MenuShortcut as u, provideMenubarComposition as v };