@astryx-vue/core 0.2.2 → 0.2.4

package/dist/{ContextMenu-9Im6i43E.js → ContextMenu-BeJO5HYx.js}

@@ -1,33 +1,17 @@
 import { t as useMediaQuery } from "./useMediaQuery-GMmgp28-.js";
-import { t as useDismiss } from "./useDismiss-CAiHU6QD.js";
-import { t as useLongPress } from "./useLongPress-Cyxwa73s.js";
+import { t as useDismiss } from "./useDismiss-Cj8x_51F.js";
+import { o as useAstryxMessages } from "./context-CPh7kE-a.js";
+import { a as useLongPress, i as useMenuNav, n as useMenuPress, r as isModifiedClick, t as resetMenuPress } from "./useMenuPress-DUmEy4TB.js";
 import { n as useOverflow } from "./useOverflow-VrwF5oek.js";
 import { t as usePositionedLayer } from "./usePositionedLayer-C1NBOsVT.js";
-import { t as _sfc_main$6 } from "./BottomSheet-Dg95HB1s.js";
-import { t as _sfc_main$7 } from "./Icon-CJKjdJy-.js";
-import { t as _sfc_main$8 } from "./Divider-BtwnL18I.js";
+import { t as _sfc_main$6 } from "./BottomSheet-BV6vfgGu.js";
+import { t as _sfc_main$7 } from "./Icon-bteSId7T.js";
+import { c as contextMenuContextKey, d as useContextMenuSize, i as _sfc_main$8, l as submenuAncestorOpenKey, n as _sfc_main$10, r as _sfc_main$9, t as useMenuDrillIn, u as useContextMenu } from "./useMenuDrillIn-BgjJcY3K.js";
+import { t as _sfc_main$11 } from "./Divider-BtwnL18I.js";
+import { t as _sfc_main$12 } from "./Spinner-9cYUCnDy.js";
+import { t as useSubmenuMode } from "./useSubmenuMode-CZN9qrUo.js";
 import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onScopeDispose, openBlock, provide, ref, renderList, renderSlot, resolveComponent, resolveDynamicComponent, shallowRef, toDisplayString, unref, useAttrs, useId, useModel, useTemplateRef, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
 import "../styles/context-menu.css";
-//#region src/ContextMenu/context.ts
-const contextMenuContextKey = Symbol("astryx-context-menu");
-/**
-* Whether the submenu flyout that contains this one is showing.
-*
-* Nested flyouts are teleported to `body`, so hiding an ancestor's DOM does
-* not hide them. Each submenu provides its own `showsFlyout` for the next
-* level; a row with no ancestor submenu reads as open.
-*/
-const submenuAncestorOpenKey = Symbol("astryx-submenu-ancestor-open");
-/** The surrounding menu, or `undefined` when the row stands alone. */
-function useContextMenu() {
-	return inject(contextMenuContextKey, void 0);
-}
-/** The row density of the surrounding menu, or the menu default. */
-function useContextMenuSize() {
-	const menu = useContextMenu();
-	return computed(() => menu?.menuSize.value ?? "md");
-}
-//#endregion
 //#region src/ContextMenu/ContextMenuDivider.vue
 const _sfc_main$5 = /*@__PURE__*/ defineComponent({
 	name: "AstryxContextMenuDivider",
@@ -35,7 +19,7 @@ const _sfc_main$5 = /*@__PURE__*/ defineComponent({
 	props: { variant: { default: "subtle" } },
 	setup(__props) {
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(_sfc_main$8, {
+			return openBlock(), createBlock(_sfc_main$11, {
 				class: "astryx-context-menu-divider",
 				variant: __props.variant
 			}, null, 8, ["variant"]);
@@ -67,233 +51,17 @@ const _sfc_main$4 = /*@__PURE__*/ defineComponent({
 	}
 });
 //#endregion
-//#region src/ContextMenu/menuNav.ts
-/**
-* Roles a menu row can carry. The selectable roles sit alongside the plain
-* one so every row is reachable by arrow keys, typeahead, and Enter/Space.
-*/
-const MENU_ITEM_ROLES = /* @__PURE__ */ new Set([
-	"menuitem",
-	"menuitemradio",
-	"menuitemcheckbox"
-]);
-/** Selector for the activatable rows of one menu level. */
-const MENU_ITEM_SELECTOR = [...MENU_ITEM_ROLES].map((role) => `[role="${role}"]:not([aria-disabled="true"])`).join(",");
-/** Selector for any menu level, used to scope a level's rows and key events. */
-const MENU_BOUNDARY_SELECTOR = "[role=\"menu\"]";
-/**
-* Whether a click carries a modifier or a non-primary button. On a row that is
-* a link the browser gives such a click a meaning of its own, which the row
-* must leave alone.
-*/
-function isModifiedClick(event) {
-	return event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || (event.button ?? 0) !== 0;
-}
-/**
-* Activate a row from the keyboard: a synthesized click that carries the key's
-* modifiers, so a modified Enter on a link row opens the way a modified click
-* would. `detail` stays 0, the mark of a non-pointer activation.
-*/
-function activateMenuItem(row, key) {
-	row.dispatchEvent(new MouseEvent("click", {
-		altKey: key.altKey,
-		bubbles: true,
-		cancelable: true,
-		composed: true,
-		ctrlKey: key.ctrlKey,
-		metaKey: key.metaKey,
-		shiftKey: key.shiftKey
-	}));
-}
-function isDisabledRow(row) {
-	return row.getAttribute("aria-disabled") === "true" || row.hasAttribute("disabled");
-}
-function isHiddenWithin(row, container) {
-	let current = row;
-	while (current != null && current !== container) {
-		if (current.hidden || current.getAttribute("aria-hidden") === "true") return true;
-		current = current.parentElement;
-	}
-	return false;
-}
-const TYPEAHEAD_RESET_MS = 750;
-/**
-* Roving focus, typeahead, and activation for one menu level.
-*
-* Both the menu panel and every submenu flyout own one of these, so a nested
-* level keeps its own highlight, its own typeahead buffer, and its own keys
-* without coordinating with its parent.
-*/
-function useMenuNav(options) {
-	const { menuRef, onClose } = options;
-	let typeaheadBuffer = "";
-	let typeaheadTimer;
-	function resetTypeahead() {
-		typeaheadBuffer = "";
-		if (typeaheadTimer != null) {
-			clearTimeout(typeaheadTimer);
-			typeaheadTimer = void 0;
-		}
-	}
-	function getItems() {
-		const menu = menuRef.value;
-		if (menu == null) return [];
-		return Array.from(menu.querySelectorAll(MENU_ITEM_SELECTOR)).filter((row) => !isHiddenWithin(row, menu)).filter((row) => row.closest(MENU_BOUNDARY_SELECTOR) === menu);
-	}
-	function ownsEvent(event) {
-		const menu = menuRef.value;
-		const target = event.target;
-		if (menu == null || !(target instanceof Element)) return true;
-		return target.closest(MENU_BOUNDARY_SELECTOR) === menu;
-	}
-	function getCurrentIndex(items) {
-		const active = menuRef.value?.ownerDocument.activeElement ?? null;
-		return items.findIndex((row) => row === active || row.contains(active));
-	}
-	function findEnabledIndex(items, start, step, wrap) {
-		const count = items.length;
-		if (count === 0) return -1;
-		let index = start;
-		for (let i = 0; i < count; i++) {
-			if (index < 0 || index >= count) {
-				if (!wrap) return -1;
-				index = (index + count) % count;
-			}
-			const row = items[index];
-			if (row != null && !isDisabledRow(row)) return index;
-			index += step;
-		}
-		return -1;
-	}
-	function focusIndex(items, index) {
-		const row = items[index];
-		if (row == null) return false;
-		row.focus();
-		return true;
-	}
-	function focusFirst() {
-		const items = getItems();
-		return focusIndex(items, findEnabledIndex(items, 0, 1, false));
-	}
-	function focusLast() {
-		const items = getItems();
-		return focusIndex(items, findEnabledIndex(items, items.length - 1, -1, false));
-	}
-	function moveBy(direction) {
-		const items = getItems();
-		if (items.length === 0) return false;
-		const current = getCurrentIndex(items);
-		return focusIndex(items, findEnabledIndex(items, current === -1 ? direction === 1 ? 0 : items.length - 1 : current + direction, direction, true));
-	}
-	/**
-	* PageDown / PageUp move by the rows a viewport shows, never wrapping; in a
-	* menu that does not scroll they act as End and Home.
-	*/
-	function focusPage(direction) {
-		const menu = menuRef.value;
-		const all = getItems();
-		const active = all.map((row, index) => isDisabledRow(row) ? -1 : index).filter((index) => index !== -1);
-		if (menu == null || active.length === 0) return false;
-		if (menu.clientHeight === 0 || menu.scrollHeight <= menu.clientHeight) return direction === 1 ? focusLast() : focusFirst();
-		const rowHeight = all[active[0]]?.getBoundingClientRect().height ?? 0;
-		const perPage = rowHeight > 0 ? Math.max(1, Math.floor(menu.clientHeight / rowHeight)) : active.length;
-		const position = active.indexOf(getCurrentIndex(all));
-		const from = position === -1 ? direction === 1 ? -1 : active.length : position;
-		return focusIndex(all, active[Math.max(0, Math.min(active.length - 1, from + direction * perPage))]);
-	}
-	/**
-	* Typeahead over the rows' label elements. Repeated presses of the same
-	* character cycle through the matches instead of filtering deeper.
-	*/
-	function handleTypeahead(event) {
-		const isSpaceMidType = event.key === " " && typeaheadBuffer.length > 0;
-		if (!(event.key.length === 1 && !event.ctrlKey && !event.metaKey && event.key !== " ") && !isSpaceMidType) return false;
-		const items = getItems();
-		const labels = items.map((row) => row.querySelector(`[data-menu-item-label]`)?.textContent ?? row.textContent);
-		if (labels.length === 0) return false;
-		const char = event.key.toLowerCase();
-		const nextBuffer = typeaheadBuffer.length > 0 && [...typeaheadBuffer].every((entry) => entry === char) ? char : typeaheadBuffer + char;
-		typeaheadBuffer = nextBuffer;
-		if (typeaheadTimer != null) clearTimeout(typeaheadTimer);
-		typeaheadTimer = setTimeout(resetTypeahead, TYPEAHEAD_RESET_MS);
-		const current = getCurrentIndex(items);
-		const hasCurrent = current >= 0;
-		const start = hasCurrent ? current : 0;
-		const offset = hasCurrent && nextBuffer.length === 1 ? 1 : 0;
-		for (let i = 0; i < labels.length; i++) {
-			const index = (start + offset + i + labels.length) % labels.length;
-			if (isDisabledRow(items[index])) continue;
-			const label = labels[index];
-			if (label != null && label.trim().toLowerCase().startsWith(nextBuffer)) {
-				focusIndex(items, index);
-				return true;
-			}
-		}
-		return true;
-	}
-	function handleKeyDown(event) {
-		if (event.defaultPrevented || event.isComposing || event.ctrlKey || event.metaKey || event.altKey) return;
-		if (!ownsEvent(event)) return;
-		if (event.key === "Enter" || event.key === " ") {
-			event.preventDefault();
-			if (event.repeat) return;
-			const active = menuRef.value?.ownerDocument.activeElement;
-			if (active instanceof HTMLElement && MENU_ITEM_ROLES.has(active.getAttribute("role") ?? "")) activateMenuItem(active, event);
-			return;
-		}
-		if (event.key === "Tab") {
-			onClose("tab");
-			return;
-		}
-		if (event.key === "Escape") {
-			event.preventDefault();
-			onClose("escape");
-			return;
-		}
-		if (handleTypeahead(event)) {
-			event.preventDefault();
-			return;
-		}
-		if (event.key === "ArrowDown" && moveBy(1)) {
-			event.preventDefault();
-			return;
-		}
-		if (event.key === "ArrowUp" && moveBy(-1)) {
-			event.preventDefault();
-			return;
-		}
-		if (event.key === "Home" && focusFirst()) {
-			event.preventDefault();
-			return;
-		}
-		if (event.key === "End" && focusLast()) {
-			event.preventDefault();
-			return;
-		}
-		if (event.key === "PageDown" && focusPage(1)) {
-			event.preventDefault();
-			return;
-		}
-		if (event.key === "PageUp" && focusPage(-1)) event.preventDefault();
-	}
-	return {
-		focusFirst,
-		handleKeyDown,
-		resetTypeahead
-	};
-}
-//#endregion
 //#region src/ContextMenu/ContextMenuItem.vue
 const _hoisted_1$2 = {
 	key: 0,
 	class: "astryx-context-menu-item__start"
 };
-const _hoisted_2$1 = { class: "astryx-context-menu-item__content" };
-const _hoisted_3$1 = {
+const _hoisted_2$2 = { class: "astryx-context-menu-item__content" };
+const _hoisted_3$2 = {
 	class: "astryx-context-menu-item__label",
 	"data-menu-item-label": ""
 };
-const _hoisted_4$1 = {
+const _hoisted_4$2 = {
 	key: 0,
 	class: "astryx-context-menu-item__description"
 };
@@ -377,7 +145,7 @@ const _sfc_main$3 = /*@__PURE__*/ defineComponent({
 						icon: __props.icon,
 						size: "sm"
 					}, null, 8, ["color", "icon"])])])) : createCommentVNode("v-if", true),
-					createElementVNode("span", _hoisted_2$1, [createElementVNode("span", _hoisted_3$1, [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])]), __props.description != null || _ctx.$slots.description ? (openBlock(), createElementBlock("span", _hoisted_4$1, [renderSlot(_ctx.$slots, "description", {}, () => [createTextVNode(toDisplayString(__props.description), 1)])])) : createCommentVNode("v-if", true)]),
+					createElementVNode("span", _hoisted_2$2, [createElementVNode("span", _hoisted_3$2, [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])]), __props.description != null || _ctx.$slots.description ? (openBlock(), createElementBlock("span", _hoisted_4$2, [renderSlot(_ctx.$slots, "description", {}, () => [createTextVNode(toDisplayString(__props.description), 1)])])) : createCommentVNode("v-if", true)]),
 					__props.endContent != null || _ctx.$slots.endContent ? (openBlock(), createElementBlock("span", _hoisted_5$1, [renderSlot(_ctx.$slots, "endContent", {}, () => [createTextVNode(toDisplayString(__props.endContent), 1)])])) : createCommentVNode("v-if", true)
 				]),
 				_: 3
@@ -627,12 +395,12 @@ const _hoisted_1$1 = [
 	"data-size",
 	"tabindex"
 ];
-const _hoisted_2 = {
+const _hoisted_2$1 = {
 	key: 0,
 	class: "astryx-context-menu-item__start"
 };
-const _hoisted_3 = { class: "astryx-context-menu-item__content" };
-const _hoisted_4 = {
+const _hoisted_3$1 = { class: "astryx-context-menu-item__content" };
+const _hoisted_4$1 = {
 	class: "astryx-context-menu-item__label",
 	"data-menu-item-label": ""
 };
@@ -641,7 +409,12 @@ const _hoisted_5 = {
 	class: "astryx-context-menu-item__description"
 };
 const _hoisted_6 = { class: "astryx-context-menu-item__end" };
-const _hoisted_7 = [
+const _hoisted_7 = {
+	key: 0,
+	"aria-hidden": "true"
+};
+const _hoisted_8 = ["aria-label", "hidden"];
+const _hoisted_9 = [
 	"aria-label",
 	"data-overflow",
 	"data-placement",
@@ -660,7 +433,13 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 			type: Boolean,
 			default: false
 		},
-		items: {}
+		items: {},
+		hasSpinner: {
+			type: Boolean,
+			default: false
+		},
+		menuWidth: {},
+		presentation: { default: "adaptive" }
 	},
 	emits: ["openChange", "select"],
 	setup(__props, { emit: __emit }) {
@@ -669,6 +448,21 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 		const attrs = useAttrs();
 		const menu = useContextMenu();
 		const size = useContextMenuSize();
+		const messages = useAstryxMessages();
+		const viewId = useId();
+		const mode = useSubmenuMode({
+			drillIn: computed(() => menu?.drillIn.value),
+			presentation: computed(() => props.presentation),
+			viewId
+		});
+		const isDrill = mode.isDrill;
+		const drillOnStack = mode.isOnStack;
+		const drillIsTop = mode.isTop;
+		const drillHost = computed(() => isDrill.value ? menu?.drillIn.value.host ?? null : null);
+		const backLabel = computed(() => {
+			const parent = menu?.menuLabel.value;
+			return parent != null && parent !== "" ? messages.value.dropdownMenu.backTo(parent) : messages.value.dropdownMenu.back;
+		});
 		const row = useTemplateRef("row");
 		const flyout = useTemplateRef("flyout");
 		const isOpen = ref(false);
@@ -685,10 +479,14 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 			alignment: computed(() => "start"),
 			gap: GAP$1
 		});
-		const flyoutStyle = computed(() => ({
-			left: `${position.value.left}px`,
-			top: `${position.value.top}px`
-		}));
+		const flyoutStyle = computed(() => {
+			const style = {
+				left: `${position.value.left}px`,
+				top: `${position.value.top}px`
+			};
+			if (props.menuWidth != null) style.minWidth = `min(${typeof props.menuWidth === "number" ? `${props.menuWidth}px` : props.menuWidth}, calc(100vw - 16px))`;
+			return style;
+		});
 		const hasOverflow = useOverflow(flyout, showsFlyout);
 		const nav = useMenuNav({
 			menuRef: flyout,
@@ -714,6 +512,13 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 		});
 		function open(focusFirstRow) {
 			if (props.isDisabled) return;
+			if (isDrill.value) {
+				const wasOpen = drillOnStack.value;
+				mode.openDrill();
+				if (!wasOpen) emit("openChange", true);
+				if (focusFirstRow) nextTick(() => nav.focusFirst());
+				return;
+			}
 			if (isOpen.value) {
 				if (focusFirstRow) nav.focusFirst();
 				return;
@@ -730,6 +535,12 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 			hover.noteHoverOpened();
 		}
 		function close(focusRow) {
+			if (isDrill.value) {
+				if (!mode.closeDrill()) return;
+				emit("openChange", false);
+				if (focusRow) row.value?.focus();
+				return;
+			}
 			const wasOpen = isOpen.value;
 			hover.markClosed();
 			if (!wasOpen) return;
@@ -799,7 +610,7 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 				}, unref(attrs), {
 					"aria-controls": flyoutId,
 					"aria-disabled": __props.isDisabled || void 0,
-					"aria-expanded": showsFlyout.value,
+					"aria-expanded": showsFlyout.value || unref(drillOnStack),
 					"aria-haspopup": "menu",
 					class: ["astryx-context-menu-item astryx-context-menu-item--submenu", unref(attrs).class],
 					"data-disabled": __props.isDisabled || void 0,
@@ -814,20 +625,50 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 					onPointerleave: _cache[0] || (_cache[0] = (...args) => unref(hover).onTriggerPointerLeave && unref(hover).onTriggerPointerLeave(...args)),
 					onPointermove: onRowPointerMove
 				}), [
-					__props.icon != null || _ctx.$slots.icon ? (openBlock(), createElementBlock("span", _hoisted_2, [renderSlot(_ctx.$slots, "icon", {}, () => [createVNode(_sfc_main$7, {
+					__props.icon != null || _ctx.$slots.icon ? (openBlock(), createElementBlock("span", _hoisted_2$1, [renderSlot(_ctx.$slots, "icon", {}, () => [createVNode(_sfc_main$7, {
 						icon: __props.icon,
 						color: "secondary",
 						size: "sm"
 					}, null, 8, ["icon"])])])) : createCommentVNode("v-if", true),
-					createElementVNode("span", _hoisted_3, [createElementVNode("span", _hoisted_4, [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])]), __props.description != null || _ctx.$slots.description ? (openBlock(), createElementBlock("span", _hoisted_5, [renderSlot(_ctx.$slots, "description", {}, () => [createTextVNode(toDisplayString(__props.description), 1)])])) : createCommentVNode("v-if", true)]),
-					createElementVNode("span", _hoisted_6, [renderSlot(_ctx.$slots, "endContent", {}, () => [createVNode(_sfc_main$7, {
+					createElementVNode("span", _hoisted_3$1, [createElementVNode("span", _hoisted_4$1, [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])]), __props.description != null || _ctx.$slots.description ? (openBlock(), createElementBlock("span", _hoisted_5, [renderSlot(_ctx.$slots, "description", {}, () => [createTextVNode(toDisplayString(__props.description), 1)])])) : createCommentVNode("v-if", true)]),
+					createElementVNode("span", _hoisted_6, [renderSlot(_ctx.$slots, "endContent", {}, () => [__props.hasSpinner ? (openBlock(), createElementBlock("span", _hoisted_7, [createVNode(_sfc_main$12, { size: "sm" })])) : (openBlock(), createBlock(_sfc_main$7, {
+						key: 1,
 						class: "astryx-context-menu-item__chevron",
 						icon: "chevronRight",
 						color: "secondary",
 						size: "sm"
-					})])])
+					}))])])
 				], 16, _hoisted_1$1),
-				(openBlock(), createBlock(Teleport, { to: "body" }, [createVNode(Transition, {
+				drillHost.value ? (openBlock(), createBlock(Teleport, {
+					key: 0,
+					to: drillHost.value
+				}, [withDirectives(createElementVNode("div", {
+					ref_key: "flyout",
+					ref: flyout,
+					class: "astryx-context-menu astryx-context-menu--flyout",
+					role: "menu",
+					"aria-label": flyoutLabel.value,
+					hidden: unref(drillIsTop) ? void 0 : true,
+					tabindex: "-1",
+					onKeydown: onFlyoutKeyDown
+				}, [createVNode(_sfc_main$3, {
+					"has-close-on-select": false,
+					label: backLabel.value,
+					onClick: _cache[1] || (_cache[1] = ($event) => close(true))
+				}, {
+					icon: withCtx(() => [createVNode(_sfc_main$7, {
+						color: "secondary",
+						icon: "chevronLeft",
+						size: "sm"
+					})]),
+					_: 1
+				}, 8, ["label"]), renderSlot(_ctx.$slots, "default", {}, () => [createVNode(_sfc_main$1, {
+					items: __props.items ?? [],
+					onSelect: onNestedSelect
+				}, null, 8, ["items"])])], 40, _hoisted_8), [[vShow, unref(drillOnStack)]])], 8, ["to"])) : (openBlock(), createBlock(Teleport, {
+					key: 1,
+					to: "body"
+				}, [createVNode(Transition, {
 					name: "astryx-context-menu-flyout",
 					persisted: ""
 				}, {
@@ -843,14 +684,14 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 						role: "menu",
 						style: normalizeStyle(flyoutStyle.value),
 						tabindex: "-1",
-						onContextmenu: _cache[1] || (_cache[1] = withModifiers(() => {}, ["prevent"])),
+						onContextmenu: _cache[2] || (_cache[2] = withModifiers(() => {}, ["prevent"])),
 						onKeydown: onFlyoutKeyDown,
-						onPointerenter: _cache[2] || (_cache[2] = (...args) => unref(hover).onFlyoutPointerEnter && unref(hover).onFlyoutPointerEnter(...args)),
-						onPointerleave: _cache[3] || (_cache[3] = (...args) => unref(hover).onFlyoutPointerLeave && unref(hover).onFlyoutPointerLeave(...args))
+						onPointerenter: _cache[3] || (_cache[3] = (...args) => unref(hover).onFlyoutPointerEnter && unref(hover).onFlyoutPointerEnter(...args)),
+						onPointerleave: _cache[4] || (_cache[4] = (...args) => unref(hover).onFlyoutPointerLeave && unref(hover).onFlyoutPointerLeave(...args))
 					}, [renderSlot(_ctx.$slots, "default", {}, () => [createVNode(_sfc_main$1, {
 						items: __props.items ?? [],
 						onSelect: onNestedSelect
-					}, null, 8, ["items"])])], 44, _hoisted_7), [[vShow, showsFlyout.value]])]),
+					}, null, 8, ["items"])])], 44, _hoisted_9), [[vShow, showsFlyout.value]])]),
 					_: 3
 				})]))
 			], 64);
@@ -866,6 +707,12 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 	emits: ["select"],
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
+		function isCheckbox(option) {
+			return option.type === "checkbox";
+		}
+		function isRadio(option) {
+			return option.type === "radio";
+		}
 		function isDivider(option) {
 			return option.type === "divider";
 		}
@@ -889,6 +736,8 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 		function keyOf(option, index) {
 			if (option.type === "divider") return `divider-${index}`;
 			if (option.type === "section") return `section-${option.id ?? index}`;
+			if (option.type === "checkbox") return `checkbox-${option.id ?? index}`;
+			if (option.type === "radio") return `radio-${option.id ?? index}`;
 			return `item-${option.id ?? index}`;
 		}
 		function onRowClick(option, event) {
@@ -899,11 +748,60 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 		function onNestedSelect(item, event) {
 			emit("select", item, event);
 		}
+		function onRadioModel(option, value) {
+			if (value != null) option.onChange?.(value);
+		}
 		return (_ctx, _cache) => {
 			const _component_ContextMenuItems = resolveComponent("ContextMenuItems", true);
 			return openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (option, index) => {
-				return openBlock(), createElementBlock(Fragment, { key: keyOf(option, index) }, [isDivider(option) ? (openBlock(), createBlock(_sfc_main$5, { key: 0 })) : isSection(option) ? (openBlock(), createBlock(_sfc_main$4, {
+				return openBlock(), createElementBlock(Fragment, { key: keyOf(option, index) }, [isDivider(option) ? (openBlock(), createBlock(_sfc_main$5, { key: 0 })) : isCheckbox(option) ? (openBlock(), createBlock(_sfc_main$8, {
 					key: 1,
+					description: option.description,
+					"has-close-on-select": option.hasCloseOnSelect,
+					icon: option.icon,
+					"is-disabled": option.isDisabled,
+					label: option.label,
+					"model-value": option.checked,
+					"onUpdate:modelValue": ($event) => option.onChange?.($event)
+				}, null, 8, [
+					"description",
+					"has-close-on-select",
+					"icon",
+					"is-disabled",
+					"label",
+					"model-value",
+					"onUpdate:modelValue"
+				])) : isRadio(option) ? (openBlock(), createBlock(_sfc_main$9, {
+					key: 2,
+					"has-close-on-select": option.hasCloseOnSelect,
+					label: option.label,
+					"model-value": option.value,
+					"onUpdate:modelValue": ($event) => onRadioModel(option, $event)
+				}, {
+					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(option.items, (choice, choiceIndex) => {
+						return openBlock(), createBlock(_sfc_main$10, {
+							key: choice.id ?? choiceIndex,
+							description: choice.description,
+							icon: choice.icon,
+							"is-disabled": choice.isDisabled,
+							label: choice.label,
+							value: choice.value
+						}, null, 8, [
+							"description",
+							"icon",
+							"is-disabled",
+							"label",
+							"value"
+						]);
+					}), 128))]),
+					_: 2
+				}, 1032, [
+					"has-close-on-select",
+					"label",
+					"model-value",
+					"onUpdate:modelValue"
+				])) : isSection(option) ? (openBlock(), createBlock(_sfc_main$4, {
+					key: 3,
 					title: option.title
 				}, {
 					default: withCtx(() => [createVNode(_component_ContextMenuItems, {
@@ -912,7 +810,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 					}, null, 8, ["items"])]),
 					_: 2
 				}, 1032, ["title"])) : isSubMenu(option) ? (openBlock(), createBlock(_sfc_main$2, {
-					key: 2,
+					key: 4,
 					icon: option.icon,
 					"is-disabled": option.isDisabled,
 					items: option.items,
@@ -924,7 +822,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 					"items",
 					"label"
 				])) : (openBlock(), createBlock(_sfc_main$3, mergeProps({
-					key: 3,
+					key: 5,
 					ref_for: true
 				}, itemProps(option), { onClick: ($event) => onRowClick(option, $event) }), null, 16, ["onClick"]))], 64);
 			}), 128);
@@ -932,155 +830,6 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 	}
 });
 //#endregion
-//#region src/ContextMenu/useMenuPress.ts
-/** How long after a tracked release the browser's own click is still swallowed. */
-const STRAY_CLICK_MS = 400;
-let swallower = null;
-function disarmStrayClick() {
-	if (swallower == null) return;
-	swallower.isArmed = false;
-	if (swallower.timer != null) {
-		clearTimeout(swallower.timer);
-		swallower.timer = null;
-	}
-}
-function onWindowClickCapture(event) {
-	if (swallower == null || !swallower.isArmed) return;
-	if (event.detail === 0) return;
-	event.preventDefault();
-	event.stopImmediatePropagation();
-	disarmStrayClick();
-}
-/**
-* Swallow the browser's compatibility click for a gesture the press model
-* already acted on. The listener sits on the window in the capture phase, so
-* it runs ahead of any listener the application or the row itself installed.
-*/
-function armStrayClick(doc) {
-	const view = doc.defaultView;
-	if (view == null) return;
-	if (swallower == null || swallower.doc !== doc) {
-		if (swallower != null) {
-			swallower.doc.defaultView?.removeEventListener("click", onWindowClickCapture, true);
-			swallower.doc.removeEventListener("pointerdown", disarmStrayClick, true);
-		}
-		view.addEventListener("click", onWindowClickCapture, true);
-		doc.addEventListener("pointerdown", disarmStrayClick, true);
-		swallower = {
-			doc,
-			isArmed: false,
-			timer: null
-		};
-	}
-	disarmStrayClick();
-	swallower.isArmed = true;
-	swallower.timer = setTimeout(disarmStrayClick, STRAY_CLICK_MS);
-}
-/** Forget an armed swallower. Called when a surface unmounts and in tests. */
-function resetMenuPress() {
-	disarmStrayClick();
-}
-/**
-* The press model of a painted menu surface.
-*
-* A finger's pointer events stay with the element it landed on, so the gesture
-* is tracked at the document level by `pointerId`:
-*
-* - The highlight follows the finger.
-* - The row under the RELEASE acts, the way its own click would, carrying the
-*   release's modifiers; the browser's own click for that gesture is swallowed
-*   so the row never acts twice.
-* - A finger released outside leaves the menu open; a mouse released outside
-*   dismisses it.
-* - `pointercancel` and a second pointer end the gesture with nothing acting.
-*/
-function useMenuPress(options) {
-	const { menuRef, isEnabled, onDismiss } = options;
-	let trackedId = null;
-	let trackedIsMouse = false;
-	let highlighted = null;
-	let doc = null;
-	function isRowInsideMenu(row) {
-		const menu = menuRef.value;
-		return row instanceof HTMLElement && menu != null && menu.contains(row) && row.closest("[role=\"menu\"]") === menu;
-	}
-	function rowFromEvent(event) {
-		const hit = doc?.elementFromPoint?.(event.clientX, event.clientY) ?? null;
-		const fromPoint = hit instanceof Element ? hit.closest(MENU_ITEM_SELECTOR) : null;
-		if (fromPoint != null && isRowInsideMenu(fromPoint)) return fromPoint;
-		const target = event.target;
-		const fromTarget = target instanceof Element ? target.closest(MENU_ITEM_SELECTOR) : null;
-		return fromTarget != null && isRowInsideMenu(fromTarget) ? fromTarget : null;
-	}
-	function isEventInsideMenu(event) {
-		const menu = menuRef.value;
-		if (menu == null) return false;
-		const hit = doc?.elementFromPoint?.(event.clientX, event.clientY) ?? null;
-		if (hit instanceof Node && menu.contains(hit)) return true;
-		const target = event.target;
-		return target instanceof Node && menu.contains(target);
-	}
-	function highlight(row) {
-		if (row === highlighted) return;
-		highlighted = row;
-		row?.focus({ preventScroll: true });
-	}
-	function onDocumentPointerMove(event) {
-		if (event.pointerId !== trackedId) return;
-		const row = rowFromEvent(event);
-		if (row != null) highlight(row);
-	}
-	function onDocumentPointerUp(event) {
-		if (event.pointerId !== trackedId) return;
-		const row = rowFromEvent(event);
-		endGesture();
-		if (row == null) return;
-		if (doc != null) armStrayClick(doc);
-		activateMenuItem(row, event);
-	}
-	function onDocumentPointerCancel(event) {
-		if (event.pointerId !== trackedId) return;
-		endGesture();
-	}
-	function onDocumentMouseUp(event) {
-		const isInside = isEventInsideMenu(event);
-		endGesture();
-		if (!isInside) onDismiss();
-	}
-	function endGesture() {
-		const current = doc;
-		if (current != null) {
-			current.removeEventListener("pointermove", onDocumentPointerMove, true);
-			current.removeEventListener("pointerup", onDocumentPointerUp, true);
-			current.removeEventListener("pointercancel", onDocumentPointerCancel, true);
-			current.removeEventListener("mouseup", onDocumentMouseUp, true);
-		}
-		trackedId = null;
-		trackedIsMouse = false;
-		highlighted = null;
-	}
-	function onPointerDown(event) {
-		if (!isEnabled()) return;
-		if (trackedId != null) endGesture();
-		const target = event.target;
-		const row = target instanceof Element ? target.closest(MENU_ITEM_SELECTOR) : null;
-		if (row == null || !isRowInsideMenu(row)) return;
-		highlighted = row;
-		trackedId = event.pointerId;
-		trackedIsMouse = event.pointerType === "mouse";
-		doc = menuRef.value?.ownerDocument ?? null;
-		if (trackedIsMouse) {
-			doc?.addEventListener("mouseup", onDocumentMouseUp, true);
-			return;
-		}
-		doc?.addEventListener("pointermove", onDocumentPointerMove, true);
-		doc?.addEventListener("pointerup", onDocumentPointerUp, true);
-		doc?.addEventListener("pointercancel", onDocumentPointerCancel, true);
-	}
-	onBeforeUnmount(endGesture);
-	return { onPointerDown };
-}
-//#endregion
 //#region src/ContextMenu/ContextMenu.vue
 const _hoisted_1 = [
 	"aria-label",
@@ -1089,6 +838,9 @@ const _hoisted_1 = [
 	"data-size",
 	"data-width"
 ];
+const _hoisted_2 = ["hidden", "inert"];
+const _hoisted_3 = ["aria-label"];
+const _hoisted_4 = ["hidden", "inert"];
 const GAP = 0;
 const DEFAULT_MIN_WIDTH = 160;
 const ADAPTIVE_QUERY = "(max-width: 768px) and (pointer: coarse)";
@@ -1176,10 +928,18 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				openAt(rect == null ? point.x : point.x - rect.left, rect == null ? point.y : point.y - rect.top);
 			}
 		});
+		const { drillIn, host, isDrilled } = useMenuDrillIn(isOpen, ADAPTIVE_QUERY);
 		useDismiss({
 			container: panel,
 			isEnabled: isOpen,
-			onDismiss: () => closeMenu()
+			onDismiss: () => closeMenu(),
+			onEscape: () => {
+				if (drillIn.value.viewStack.length > 0) {
+					drillIn.value.pop();
+					return;
+				}
+				closeMenu({ restoreFocus: true });
+			}
 		});
 		function formatSize(value) {
 			return typeof value === "number" ? `${value}px` : value;
@@ -1256,8 +1016,12 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		function onSelect(item, event) {
 			emit("select", item, event);
 		}
+		function assignHost(element) {
+			host.value = element instanceof HTMLElement ? element : null;
+		}
 		provide(contextMenuContextKey, {
 			closeMenu,
+			drillIn,
 			isOpen,
 			menuLabel: computed(() => props.label),
 			menuSize: computed(() => props.size)
@@ -1346,11 +1110,19 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						onContextmenu: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"])),
 						onKeydown: _cache[1] || (_cache[1] = (...args) => unref(nav).handleKeyDown && unref(nav).handleKeyDown(...args)),
 						onPointerdown: _cache[2] || (_cache[2] = (...args) => unref(menuPress).onPointerDown && unref(menuPress).onPointerDown(...args))
-					}, [__props.items != null && !isSheet.value ? (openBlock(), createBlock(_sfc_main$1, {
+					}, [createElementVNode("div", {
+						class: "astryx-dropdown-menu-tree",
+						hidden: unref(isDrilled) || void 0,
+						inert: unref(isDrilled) || void 0
+					}, [__props.items != null ? (openBlock(), createBlock(_sfc_main$1, {
 						key: 0,
 						items: __props.items,
 						onSelect
-					}, null, 8, ["items"])) : !isSheet.value ? renderSlot(_ctx.$slots, "content", {}, void 0, void 0, 1) : createCommentVNode("v-if", true)], 46, _hoisted_1), [[vShow, isOpen.value && !isSheet.value]])]),
+					}, null, 8, ["items"])) : renderSlot(_ctx.$slots, "content", {}, void 0, void 0, 1)], 8, _hoisted_2), !isSheet.value ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						ref: assignHost,
+						class: "astryx-dropdown-menu-tree"
+					}, null, 512)) : createCommentVNode("v-if", true)], 46, _hoisted_1), [[vShow, isOpen.value && !isSheet.value]])]),
 					_: 3
 				})])),
 				isSheet.value ? (openBlock(), createBlock(_sfc_main$6, {
@@ -1359,11 +1131,22 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					label: __props.label,
 					"onUpdate:isOpen": onSheetOpen
 				}, {
-					default: withCtx(() => [__props.items != null ? (openBlock(), createBlock(_sfc_main$1, {
+					default: withCtx(() => [createElementVNode("div", {
+						class: "astryx-context-menu-sheet",
+						role: "menu",
+						"aria-label": __props.label
+					}, [createElementVNode("div", {
+						class: "astryx-dropdown-menu-tree",
+						hidden: unref(isDrilled) || void 0,
+						inert: unref(isDrilled) || void 0
+					}, [__props.items != null ? (openBlock(), createBlock(_sfc_main$1, {
 						key: 0,
 						items: __props.items,
 						onSelect
-					}, null, 8, ["items"])) : renderSlot(_ctx.$slots, "content", {}, void 0, void 0, 1)]),
+					}, null, 8, ["items"])) : renderSlot(_ctx.$slots, "content", {}, void 0, void 0, 1)], 8, _hoisted_4), createElementVNode("div", {
+						ref: assignHost,
+						class: "astryx-dropdown-menu-tree"
+					}, null, 512)], 8, _hoisted_3)]),
 					_: 3
 				}, 8, ["is-open", "label"])) : createCommentVNode("v-if", true)
 			], 64);
@@ -1371,4 +1154,4 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 	}
 });
 //#endregion
-export { _sfc_main$5 as a, _sfc_main$4 as i, _sfc_main$2 as n, useContextMenu as o, _sfc_main$3 as r, useContextMenuSize as s, _sfc_main as t };
+export { _sfc_main$5 as a, _sfc_main$4 as i, _sfc_main$2 as n, _sfc_main$3 as r, _sfc_main as t };