@astryx-vue/core 0.2.6 → 0.4.0

package/dist/{ContextMenu-DdLJnxNN.js → ContextMenu-C6hPYvYz.js}

@@ -1,15 +1,19 @@
 import { n as useLinkComponent } from "./context-C_peZbXf.js";
 import { t as useMediaQuery } from "./useMediaQuery-GMmgp28-.js";
-import { n as useDismiss, t as usePositionedLayer } from "./usePositionedLayer-Cru9_00b.js";
-import { o as useAstryxMessages } from "./context-iABt_ueM.js";
-import { a as useLongPress, i as useMenuNav, n as useMenuPress, r as isModifiedClick, t as resetMenuPress } from "./useMenuPress-D-FRNrBW.js";
+import { a as isImeKeyEvent } from "./layerDepth-CNDh-IHb.js";
+import { n as useDismiss, t as usePositionedLayer } from "./usePositionedLayer-B7cvG-_v.js";
+import { s as useAstryxMessages } from "./context-DWfi56sq.js";
+import { o as resetMenuPress, s as useLongPress, t as useMenuPress } from "./useMenuPress-8foxY8z4.js";
 import { n as useOverflow } from "./useOverflow-VrwF5oek.js";
-import { t as _sfc_main$6 } from "./BottomSheet-eJ3FzTBD.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-DzKGkTho.js";
-import { t as _sfc_main$11 } from "./Divider-BtwnL18I.js";
-import { t as _sfc_main$12 } from "./Spinner-9cYUCnDy.js";
+import { t as _sfc_main$6 } from "./LayerContentBoundary-CvsKxwwm.js";
+import { t as useScrollbars } from "./useScrollbars-C2NJ6Qwq.js";
+import { t as _sfc_main$7 } from "./BottomSheet-B4sc3F1S.js";
+import { t as _sfc_main$8 } from "./Icon-KDnUyY7f.js";
+import { c as contextMenuContextKey, d as useContextMenuSize, i as _sfc_main$9, l as submenuAncestorOpenKey, n as _sfc_main$11, r as _sfc_main$10, t as useMenuDrillIn, u as useContextMenu } from "./useMenuDrillIn-DhUnPvKs.js";
+import { t as _sfc_main$12 } from "./Divider-mOZ6vIQw.js";
+import { t as _sfc_main$13 } from "./Spinner-DdVUadii.js";
 import { t as useSubmenuMode } from "./useSubmenuMode-CZN9qrUo.js";
+import { t as createHideTimer } from "./hoverIntent-DMHGb85c.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, toRaw, unref, useAttrs, useId, useModel, useTemplateRef, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
 import "../styles/context-menu.css";
 //#region src/ContextMenu/ContextMenuDivider.vue
@@ -19,7 +23,7 @@ const _sfc_main$5 = /*@__PURE__*/ defineComponent({
 	props: { variant: { default: "subtle" } },
 	setup(__props) {
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(_sfc_main$11, {
+			return openBlock(), createBlock(_sfc_main$12, {
 				class: "astryx-context-menu-divider",
 				variant: __props.variant
 			}, null, 8, ["variant"]);
@@ -51,6 +55,222 @@ 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 || isImeKeyEvent(event) || 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,
@@ -144,7 +364,7 @@ const _sfc_main$3 = /*@__PURE__*/ defineComponent({
 				onPointermove: handlePointerMove
 			}, {
 				default: withCtx(() => [
-					__props.icon != null || _ctx.$slots.icon ? (openBlock(), createElementBlock("span", _hoisted_1$2, [renderSlot(_ctx.$slots, "icon", {}, () => [createVNode(_sfc_main$7, {
+					__props.icon != null || _ctx.$slots.icon ? (openBlock(), createElementBlock("span", _hoisted_1$2, [renderSlot(_ctx.$slots, "icon", {}, () => [createVNode(_sfc_main$8, {
 						color: iconColor.value,
 						icon: __props.icon,
 						size: "sm"
@@ -168,93 +388,22 @@ const _sfc_main$3 = /*@__PURE__*/ defineComponent({
 		};
 	}
 });
-function sign(p1, p2, p3) {
-	return (p1.x - p3.x) * (p2.y - p3.y) - (p2.x - p3.x) * (p1.y - p3.y);
-}
-function isPointInTriangle(p, a, b, c) {
-	const d1 = sign(p, a, b);
-	const d2 = sign(p, b, c);
-	const d3 = sign(p, c, a);
-	return !((d1 < 0 || d2 < 0 || d3 < 0) && (d1 > 0 || d2 > 0 || d3 > 0));
-}
-/**
-* Whether `point` lies inside the triangle from `origin` (where the pointer
-* left the row) to the flyout's near edge — the edge facing the origin.
-*/
-function isPointInSafeTriangle(point, origin, flyout) {
-	const pad = 8;
-	let edgeStart;
-	let edgeEnd;
-	if (origin.x <= flyout.left) {
-		edgeStart = {
-			x: flyout.left,
-			y: flyout.top - pad
-		};
-		edgeEnd = {
-			x: flyout.left,
-			y: flyout.bottom + pad
-		};
-	} else if (origin.x >= flyout.right) {
-		edgeStart = {
-			x: flyout.right,
-			y: flyout.top - pad
-		};
-		edgeEnd = {
-			x: flyout.right,
-			y: flyout.bottom + pad
-		};
-	} else if (origin.y <= flyout.top) {
-		edgeStart = {
-			x: flyout.left - pad,
-			y: flyout.top
-		};
-		edgeEnd = {
-			x: flyout.right + pad,
-			y: flyout.top
-		};
-	} else if (origin.y >= flyout.bottom) {
-		edgeStart = {
-			x: flyout.left - pad,
-			y: flyout.bottom
-		};
-		edgeEnd = {
-			x: flyout.right + pad,
-			y: flyout.bottom
-		};
-	} else return false;
-	return isPointInTriangle(point, origin, edgeStart, edgeEnd);
-}
 function useSubmenuHover(options) {
 	const hasHover = useMediaQuery("(hover: hover)");
 	let showTimer;
-	let hideTimer;
-	let stopTriangle = null;
 	/** Hover opened this flyout, so leaving may close it. */
 	let provenance = null;
 	let hoverOpenedAt = 0;
 	/** When the flyout last closed. A pointer enter inside the suppress window is ignored. */
 	let closedAt = 0;
-	/** While true, a point inside `isInsideTriangle` is still heading for the flyout. */
-	let isTracking = false;
-	let isInsideTriangle = () => false;
+	const hideTimer = createHideTimer(() => 200, closeNow);
 	function clearShowTimer() {
 		if (showTimer != null) clearTimeout(showTimer);
 		showTimer = void 0;
 	}
-	function clearHideTimer() {
-		if (hideTimer != null) clearTimeout(hideTimer);
-		hideTimer = void 0;
-	}
-	function clearTriangle() {
-		stopTriangle?.();
-		stopTriangle = null;
-		isTracking = false;
-		isInsideTriangle = () => false;
-	}
 	function cancelTimers() {
 		clearShowTimer();
-		clearHideTimer();
-		clearTriangle();
+		hideTimer.clear();
 	}
 	function markClosed() {
 		const shouldStamp = options.isOpen() || provenance != null;
@@ -282,55 +431,16 @@ function useSubmenuHover(options) {
 	}
 	function scheduleHide(event) {
 		if (provenance !== "hover") return;
-		clearHideTimer();
-		clearTriangle();
-		let lastPoint = null;
-		const arm = () => {
-			clearHideTimer();
-			hideTimer = setTimeout(() => {
-				if (isTracking && lastPoint != null && isInsideTriangle(lastPoint)) {
-					arm();
-					return;
-				}
-				closeNow();
-			}, 200);
-		};
-		arm();
-		const menu = unref(options.flyout);
 		const apex = event != null ? {
 			x: event.clientX,
 			y: event.clientY
 		} : null;
-		if (menu == null || apex == null || !options.isOpen()) return;
-		const rect = menu.getBoundingClientRect();
-		if (rect.width <= 0 || rect.height <= 0) return;
-		const doc = menu.ownerDocument;
-		isInsideTriangle = (point) => isPointInSafeTriangle(point, apex, rect);
-		isTracking = true;
-		lastPoint = apex;
-		const onPointerMove = (move) => {
-			const point = {
-				x: move.clientX,
-				y: move.clientY
-			};
-			lastPoint = point;
-			if (isInsideTriangle(point)) {
-				arm();
-				return;
-			}
-			isTracking = false;
-			clearTriangle();
-		};
-		doc.addEventListener("pointermove", onPointerMove, true);
-		stopTriangle = () => {
-			doc.removeEventListener("pointermove", onPointerMove, true);
-		};
+		hideTimer.schedule(apex, unref(options.flyout), options.isOpen());
 	}
 	function onTriggerPointerEnter(event) {
 		if (event.pointerType !== "mouse" || !hasHover.value) return;
 		if (options.isOpen()) {
-			clearHideTimer();
-			clearTriangle();
+			hideTimer.clear();
 			return;
 		}
 		if (closedAt > 0 && Date.now() - closedAt < 300) return;
@@ -350,9 +460,7 @@ function useSubmenuHover(options) {
 	}
 	function onFlyoutPointerEnter(event) {
 		if (event.pointerType !== "mouse") return;
-		clearShowTimer();
-		clearHideTimer();
-		clearTriangle();
+		cancelTimers();
 	}
 	function onFlyoutPointerLeave(event) {
 		if (event.pointerType !== "mouse") return;
@@ -476,7 +584,7 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 		const ancestorOpen = inject(submenuAncestorOpenKey, computed(() => true));
 		const showsFlyout = computed(() => isOpen.value && (menu?.isOpen.value ?? true) && ancestorOpen.value);
 		provide(submenuAncestorOpenKey, showsFlyout);
-		const { position } = usePositionedLayer({
+		const { position, teleportTarget } = usePositionedLayer({
 			anchor: row,
 			layer: flyout,
 			isOpen: showsFlyout,
@@ -504,7 +612,7 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 			container: flyout,
 			trigger: row,
 			isEnabled: showsFlyout,
-			enableEscape: computed(() => true),
+			dismissOnEscape: "close",
 			onDismiss: () => close(true)
 		});
 		const hover = useSubmenuHover({
@@ -555,7 +663,7 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 			if (focusRow) row.value?.focus();
 		}
 		function onRowKeyDown(event) {
-			if (props.isDisabled || event.isComposing) return;
+			if (props.isDisabled || isImeKeyEvent(event)) return;
 			if (event.key === "Enter" || event.key === " " || event.key === "ArrowRight") {
 				event.preventDefault();
 				open(true);
@@ -581,7 +689,7 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 			element.focus({ preventScroll: true });
 		}
 		function onFlyoutKeyDown(event) {
-			if (event.isComposing) return;
+			if (isImeKeyEvent(event)) return;
 			if (event.key === "ArrowLeft") {
 				event.preventDefault();
 				close(true);
@@ -630,13 +738,13 @@ 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$1, [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$8, {
 						icon: __props.icon,
 						color: "secondary",
 						size: "sm"
 					}, null, 8, ["icon"])])])) : createCommentVNode("v-if", true),
 					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, {
+					createElementVNode("span", _hoisted_6, [renderSlot(_ctx.$slots, "endContent", {}, () => [__props.hasSpinner ? (openBlock(), createElementBlock("span", _hoisted_7, [createVNode(_sfc_main$13, { size: "sm" })])) : (openBlock(), createBlock(_sfc_main$8, {
 						key: 1,
 						class: "astryx-context-menu-item__chevron",
 						icon: "chevronRight",
@@ -656,23 +764,26 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 					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, {
+				}, [createVNode(_sfc_main$6, null, {
+					default: withCtx(() => [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$8, {
+							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"])])]),
+					_: 3
+				})], 40, _hoisted_8), [[vShow, unref(drillOnStack)]])], 8, ["to"])) : (openBlock(), createBlock(Teleport, {
 					key: 1,
-					to: "body"
+					to: unref(teleportTarget)
 				}, [createVNode(Transition, {
 					name: "astryx-context-menu-flyout",
 					persisted: ""
@@ -693,12 +804,15 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 						onKeydown: onFlyoutKeyDown,
 						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_9), [[vShow, showsFlyout.value]])]),
+					}, [createVNode(_sfc_main$6, null, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, () => [createVNode(_sfc_main$1, {
+							items: __props.items ?? [],
+							onSelect: onNestedSelect
+						}, null, 8, ["items"])])]),
+						_: 3
+					})], 44, _hoisted_9), [[vShow, showsFlyout.value]])]),
 					_: 3
-				})]))
+				})], 8, ["to"]))
 			], 64);
 		};
 	}
@@ -759,7 +873,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 		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 })) : isCheckbox(option) ? (openBlock(), createBlock(_sfc_main$8, {
+				return openBlock(), createElementBlock(Fragment, { key: keyOf(option, index) }, [isDivider(option) ? (openBlock(), createBlock(_sfc_main$5, { key: 0 })) : isCheckbox(option) ? (openBlock(), createBlock(_sfc_main$9, {
 					key: 1,
 					description: option.description,
 					"has-close-on-select": option.hasCloseOnSelect,
@@ -776,7 +890,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 					"label",
 					"model-value",
 					"onUpdate:modelValue"
-				])) : isRadio(option) ? (openBlock(), createBlock(_sfc_main$9, {
+				])) : isRadio(option) ? (openBlock(), createBlock(_sfc_main$10, {
 					key: 2,
 					"has-close-on-select": option.hasCloseOnSelect,
 					label: option.label,
@@ -784,7 +898,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 					"onUpdate:modelValue": ($event) => onRadioModel(option, $event)
 				}, {
 					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(option.items, (choice, choiceIndex) => {
-						return openBlock(), createBlock(_sfc_main$10, {
+						return openBlock(), createBlock(_sfc_main$11, {
 							key: choice.id ?? choiceIndex,
 							description: choice.description,
 							icon: choice.icon,
@@ -857,7 +971,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		items: {},
 		menuWidth: {},
 		size: { default: "md" },
-		label: { default: "Context menu" },
+		label: {},
 		isDisabled: {
 			type: Boolean,
 			default: false
@@ -881,6 +995,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const props = __props;
 		const emit = __emit;
 		const attrs = useAttrs();
+		const messages = useAstryxMessages();
+		const menuName = computed(() => props.label ?? messages.value.contextMenu.label);
 		/**
 		* `class` and `style` describe the painted menu surface, the way upstream's
 		* `className`/`style` do; everything else describes the trigger area.
@@ -903,12 +1019,13 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const trigger = useTemplateRef("trigger");
 		const cursorAnchor = useTemplateRef("cursorAnchor");
 		const panel = useTemplateRef("panel");
+		useScrollbars(panel);
 		const cursorPoint = ref({
 			x: 0,
 			y: 0
 		});
 		let previouslyFocused = null;
-		const { position, update: updatePosition } = usePositionedLayer({
+		const { position, teleportTarget, update: updatePosition } = usePositionedLayer({
 			anchor: cursorAnchor,
 			layer: panel,
 			isOpen,
@@ -1028,7 +1145,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			closeMenu,
 			drillIn,
 			isOpen,
-			menuLabel: computed(() => props.label),
+			menuLabel: menuName,
 			menuSize: computed(() => props.size)
 		});
 		function applyOpenState(next) {
@@ -1094,7 +1211,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					"onPointercancel",
 					"onPointerup"
 				])),
-				(openBlock(), createBlock(Teleport, { to: "body" }, [createVNode(Transition, {
+				(openBlock(), createBlock(Teleport, { to: unref(teleportTarget) }, [createVNode(Transition, {
 					name: "astryx-context-menu",
 					persisted: ""
 				}, {
@@ -1102,7 +1219,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						id: menuId,
 						ref_key: "panel",
 						ref: panel,
-						"aria-label": __props.label,
+						"aria-label": menuName.value,
 						class: normalizeClass(["astryx-context-menu", unref(attrs).class]),
 						"data-overflow": unref(hasOverflow) || void 0,
 						"data-placement": unref(position).placement,
@@ -1115,31 +1232,34 @@ 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))
-					}, [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)], 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]])]),
+					}, [createVNode(_sfc_main$6, null, {
+						default: withCtx(() => [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)], 8, _hoisted_2), !isSheet.value ? (openBlock(), createElementBlock("div", {
+							key: 0,
+							ref: assignHost,
+							class: "astryx-dropdown-menu-tree"
+						}, null, 512)) : createCommentVNode("v-if", true)]),
+						_: 3
+					})], 46, _hoisted_1), [[vShow, isOpen.value && !isSheet.value]])]),
 					_: 3
-				})])),
-				isSheet.value ? (openBlock(), createBlock(_sfc_main$6, {
+				})], 8, ["to"])),
+				isSheet.value ? (openBlock(), createBlock(_sfc_main$7, {
 					key: 0,
 					"is-open": isOpen.value,
-					label: __props.label,
+					label: menuName.value,
 					"onUpdate:isOpen": onSheetOpen
 				}, {
 					default: withCtx(() => [createElementVNode("div", {
 						class: "astryx-context-menu-sheet",
 						role: "menu",
-						"aria-label": __props.label
+						"aria-label": menuName.value
 					}, [createElementVNode("div", {
 						class: "astryx-dropdown-menu-tree",
 						hidden: unref(isDrilled) || void 0,