@astryx-vue/core 0.2.2 → 0.2.3

package/dist/{DropdownMenu-Dh-WAHKb.js → DropdownMenu-BoZChdev.js}

@@ -1,21 +1,16 @@
 import { t as _sfc_main$5 } from "./Button-DrqeomlE.js";
 import { t as useMediaQuery } from "./useMediaQuery-GMmgp28-.js";
-import { t as useDismiss } from "./useDismiss-CAiHU6QD.js";
+import { t as useDismiss } from "./useDismiss-Cj8x_51F.js";
+import { n as getFocusables } from "./focus-CpficIgf.js";
 import { t as useTypeahead } from "./useTypeahead-PAK8lMYz.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$9 } from "./Item-C1z6gXn8.js";
-import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, h, inject, mergeModels, mergeProps, nextTick, normalizeProps, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, shallowRef, toDisplayString, unref, useAttrs, useId, useModel, useSlots, vShow, watch, withCtx, withDirectives } from "vue";
+import { t as _sfc_main$7 } from "./Icon-bteSId7T.js";
+import { t as _sfc_main$8 } from "./Item-C1z6gXn8.js";
+import { a as dropdownMenuContextKey, i as _sfc_main$10, n as _sfc_main$9, o as useDropdownMenuContext, r as _sfc_main$11, t as useMenuDrillIn } from "./useMenuDrillIn-OaEwjK44.js";
+import { t as _sfc_main$12 } from "./Divider-BtwnL18I.js";
+import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, h, mergeModels, mergeProps, nextTick, normalizeProps, normalizeStyle, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, shallowRef, toDisplayString, unref, useAttrs, useId, useModel, useSlots, vShow, watch, withCtx, withDirectives } from "vue";
 import "../styles/dropdown-menu.css";
-//#region src/DropdownMenu/context.ts
-const dropdownMenuContextKey = Symbol("astryx-dropdown-menu-context");
-/** The surrounding menu, or `undefined` when a row stands alone. */
-function useDropdownMenuContext() {
-	return inject(dropdownMenuContextKey, void 0);
-}
-//#endregion
 //#region src/DropdownMenu/menuItemRoles.ts
 /**
 * Rows a menu's roving focus, typeahead, and keyboard activation all agree on.
@@ -59,7 +54,7 @@ const _sfc_main$4 = /*@__PURE__*/ defineComponent({
 	__name: "DropdownMenuDivider",
 	setup(__props) {
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(_sfc_main$8, { class: "astryx-dropdown-menu-divider" });
+			return openBlock(), createBlock(_sfc_main$12, { class: "astryx-dropdown-menu-divider" });
 		};
 	}
 });
@@ -119,15 +114,15 @@ const _hoisted_2$1 = {
 	class: "astryx-item__start"
 };
 const _hoisted_3$1 = { class: "astryx-item__content" };
-const _hoisted_4 = {
+const _hoisted_4$1 = {
 	key: 0,
 	class: "astryx-item__label"
 };
-const _hoisted_5 = {
+const _hoisted_5$1 = {
 	key: 1,
 	class: "astryx-item__description"
 };
-const _hoisted_6 = {
+const _hoisted_6$1 = {
 	key: 1,
 	class: "astryx-item__end"
 };
@@ -227,9 +222,9 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 					icon: __props.icon,
 					size: "sm"
 				}, null, 8, ["color", "icon"])])])) : createCommentVNode("v-if", true),
-				createElementVNode("span", _hoisted_3$1, [hasLabel.value ? (openBlock(), createElementBlock("span", _hoisted_4, [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])])) : createCommentVNode("v-if", true), hasDescription.value ? (openBlock(), createElementBlock("span", _hoisted_5, [renderSlot(_ctx.$slots, "description", {}, () => [createTextVNode(toDisplayString(__props.description), 1)])])) : createCommentVNode("v-if", true)]),
-				hasEnd.value ? (openBlock(), createElementBlock("span", _hoisted_6, [renderSlot(_ctx.$slots, "endContent")])) : createCommentVNode("v-if", true)
-			], 16, _hoisted_1$1)) : (openBlock(), createBlock(_sfc_main$9, mergeProps({ key: 1 }, unref(attrs), {
+				createElementVNode("span", _hoisted_3$1, [hasLabel.value ? (openBlock(), createElementBlock("span", _hoisted_4$1, [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])])) : createCommentVNode("v-if", true), hasDescription.value ? (openBlock(), createElementBlock("span", _hoisted_5$1, [renderSlot(_ctx.$slots, "description", {}, () => [createTextVNode(toDisplayString(__props.description), 1)])])) : createCommentVNode("v-if", true)]),
+				hasEnd.value ? (openBlock(), createElementBlock("span", _hoisted_6$1, [renderSlot(_ctx.$slots, "endContent")])) : createCommentVNode("v-if", true)
+			], 16, _hoisted_1$1)) : (openBlock(), createBlock(_sfc_main$8, mergeProps({ key: 1 }, unref(attrs), {
 				class: "astryx-dropdown-menu-item",
 				role: "menuitem",
 				"data-menu-size": menuSize.value,
@@ -281,26 +276,61 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 });
 //#endregion
 //#region src/DropdownMenu/renderItems.ts
-/**
-* Renders one data-mode entry. A section renders through `DropdownMenuGroup`,
-* so both modes produce one `role="group"` named by its visible heading.
-*/
-function renderOption(option, index) {
-	if ("type" in option) {
-		if (option.type === "divider") return h(_sfc_main$4, { key: `divider-${index}` });
-		return h(_sfc_main$2, {
-			key: option.id ?? `section-${index}`,
-			title: option.title
-		}, { default: () => option.items.map((item, itemIndex) => renderItem(item, itemIndex)) });
-	}
-	return renderItem(option, index);
+function endSlot(endContent) {
+	return endContent == null ? void 0 : { endContent: () => endContent };
+}
+function renderRadioOption(option, index) {
+	const { endContent, id, ...itemProps } = option;
+	return h(_sfc_main$9, {
+		key: id ?? `radio-${index}`,
+		...itemProps
+	}, endSlot(endContent));
+}
+function renderCheckbox(item, index) {
+	const { checked, endContent, id, onChange, ...itemProps } = item;
+	return h(_sfc_main$10, {
+		"key": id ?? `checkbox-${index}`,
+		...itemProps,
+		"modelValue": checked,
+		"onUpdate:modelValue": (value) => onChange?.(value)
+	}, endSlot(endContent));
+}
+function renderRadio(item, index) {
+	return h(_sfc_main$11, {
+		"key": item.id ?? `radio-group-${index}`,
+		"label": item.label,
+		"modelValue": item.value,
+		"onUpdate:modelValue": (value) => {
+			if (value != null) item.onChange?.(value);
+		},
+		...item.hasCloseOnSelect == null ? {} : { hasCloseOnSelect: item.hasCloseOnSelect }
+	}, { default: () => item.items.map((option, optionIndex) => renderRadioOption(option, optionIndex)) });
 }
 function renderItem(item, index) {
 	const { endContent, id, ...itemProps } = item;
 	return h(_sfc_main$1, {
 		key: id ?? `item-${index}`,
 		...itemProps
-	}, endContent == null ? void 0 : { endContent: () => endContent });
+	}, endSlot(endContent));
+}
+function renderEntry(entry, index) {
+	if ("type" in entry && entry.type === "checkbox") return renderCheckbox(entry, index);
+	if ("type" in entry && entry.type === "radio") return renderRadio(entry, index);
+	return renderItem(entry, index);
+}
+/**
+* Renders one data-mode entry. A section renders through `DropdownMenuGroup`,
+* so both modes produce one `role="group"` named by its visible heading.
+*/
+function renderOption(option, index) {
+	if ("type" in option && option.type === "divider") return h(_sfc_main$4, { key: `divider-${index}` });
+	if ("type" in option && option.type === "section") return h(_sfc_main$2, {
+		key: option.id ?? `section-${index}`,
+		title: option.title
+	}, { default: () => option.items.map((item, itemIndex) => renderEntry(item, itemIndex)) });
+	if ("type" in option && option.type === "checkbox") return renderCheckbox(option, index);
+	if ("type" in option && option.type === "radio") return renderRadio(option, index);
+	return renderItem(option, index);
 }
 /** Data-mode content of a `DropdownMenu`, as a component so the template stays flat. */
 const DropdownMenuItems = defineComponent({
@@ -319,6 +349,15 @@ const DropdownMenuItems = defineComponent({
 function isDisabled(el) {
 	return el.getAttribute("aria-disabled") === "true" || el.hasAttribute("disabled");
 }
+/** A row inside a drilled-away view stays mounted and must not take focus. */
+function isHiddenRow(el, listEl) {
+	let current = el;
+	while (current != null && current !== listEl) {
+		if (current.hidden || current.getAttribute("aria-hidden") === "true") return true;
+		current = current.parentElement;
+	}
+	return false;
+}
 /**
 * Roving focus over a menu's rows.
 *
@@ -334,7 +373,7 @@ function useMenuFocus(options) {
 	function getItems() {
 		const listEl = list.value;
 		if (listEl == null) return [];
-		return Array.from(listEl.querySelectorAll(MENU_ITEM_SELECTOR)).filter((el) => belongsHere(el, listEl) && !isDisabled(el));
+		return Array.from(listEl.querySelectorAll(MENU_ITEM_SELECTOR)).filter((el) => belongsHere(el, listEl) && !isDisabled(el) && !isHiddenRow(el, listEl));
 	}
 	function getCurrentIndex() {
 		const active = document.activeElement;
@@ -446,7 +485,77 @@ function useMenuFocus(options) {
 		focusItem,
 		focusLast,
 		getItems,
-		handleKeyDown
+		handleKeyDown,
+		ownsEvent
+	};
+}
+//#endregion
+//#region src/DropdownMenu/useMenuRegions.ts
+/**
+* Controls Tab can land on inside a header or footer, in DOM order.
+*
+* Hidden, `display: none`, and `aria-hidden` controls are skipped, so a field
+* that the layout has put away is not a stop.
+*/
+function tabbablesIn(region) {
+	if (region == null) return [];
+	return getFocusables(region).filter((element) => {
+		if (element.tabIndex < 0) return false;
+		let node = element;
+		while (node != null && node !== region.parentElement) {
+			if (node.hidden || node.getAttribute("aria-hidden") === "true") return false;
+			if (typeof window !== "undefined" && window.getComputedStyle(node).display === "none") return false;
+			node = node.parentElement;
+		}
+		return true;
+	});
+}
+function focusControl(element) {
+	if (element == null) return false;
+	element.focus();
+	return element.ownerDocument.activeElement === element;
+}
+/**
+* Keyboard between a menu and the header and footer beside it.
+*
+* The menu is one Tab stop. Shift+Tab from a row skips that stop and lands on
+* the header, because the menu element would otherwise catch the key first.
+*/
+function useMenuRegions(options) {
+	function focusRegion(direction) {
+		const tabbables = tabbablesIn(direction === "previous" ? options.header.value : options.footer.value);
+		if (!focusControl(direction === "previous" ? tabbables[tabbables.length - 1] : tabbables[0])) {
+			options.closeMenu();
+			return false;
+		}
+		return true;
+	}
+	function onMenuTab(event) {
+		if (event.key !== "Tab" || !options.hasRegions.value) return false;
+		const tabbables = tabbablesIn(event.shiftKey ? options.header.value : options.footer.value);
+		if (tabbables.length === 0) {
+			options.closeMenu();
+			return true;
+		}
+		if (event.shiftKey && event.target !== options.menu.value) {
+			event.preventDefault();
+			event.stopPropagation();
+			if (!focusControl(tabbables[tabbables.length - 1])) options.closeMenu();
+		}
+		return true;
+	}
+	function onRegionKeydown(event) {
+		if (event.key !== "Tab") return;
+		const region = event.currentTarget;
+		if (!(region instanceof HTMLElement)) return;
+		const tabbables = tabbablesIn(region);
+		const exit = region === options.header.value ? event.shiftKey ? tabbables[0] : void 0 : event.shiftKey ? void 0 : tabbables[tabbables.length - 1];
+		if (exit != null && exit === region.ownerDocument.activeElement) options.closeMenu();
+	}
+	return {
+		focusRegion,
+		onMenuTab,
+		onRegionKeydown
 	};
 }
 //#endregion
@@ -457,12 +566,22 @@ const _hoisted_2 = [
 	"aria-labelledby",
 	"aria-label"
 ];
-const _hoisted_3 = [
+const _hoisted_3 = ["hidden", "inert"];
+const _hoisted_4 = ["data-placement"];
+const _hoisted_5 = [
+	"id",
+	"aria-labelledby",
+	"aria-label",
+	"data-region-focus"
+];
+const _hoisted_6 = ["hidden", "inert"];
+const _hoisted_7 = [
 	"id",
 	"aria-labelledby",
 	"aria-label",
 	"data-placement"
 ];
+const _hoisted_8 = ["hidden", "inert"];
 const GAP = 4;
 const DEFAULT_MAX_WIDTH = 320;
 const DEFAULT_MAX_HEIGHT = "300px";
@@ -510,12 +629,20 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const triggerId = `astryx-dropdown-menu-trigger-${uid}`;
 		const anchorRef = ref(null);
 		const surfaceRef = ref(null);
+		const popoverRef = ref(null);
+		const headerRef = ref(null);
+		const footerRef = ref(null);
 		const anchorWidth = ref(0);
+		const regionFocus = ref(false);
+		let suppressRegionRing = false;
 		const shouldFocusOnOpen = shallowRef(false);
 		const focusLastOnOpen = shallowRef(false);
 		let openModality = "keyboard";
 		let armedTriggerClickGuard = false;
 		const isCompactTouch = useMediaQuery(COMPACT_TOUCH_QUERY);
+		const hasRegions = computed(() => slots.header != null || slots.footer != null);
+		const { drillIn, host, isDrilled } = useMenuDrillIn(isOpen, COMPACT_TOUCH_QUERY);
+		const positionedEl = computed(() => hasRegions.value ? popoverRef.value : surfaceRef.value);
 		const isSheet = computed(() => props.presentation === "bottom-sheet" || props.presentation === "adaptive" && isCompactTouch.value);
 		const sheetOpen = computed({
 			get: () => isSheet.value && isOpen.value,
@@ -532,6 +659,11 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			const provided = attrs.id;
 			return typeof provided === "string" && provided.length > 0 ? provided : menuId;
 		});
+		const menuLabel = computed(() => {
+			const explicit = attrs["aria-label"];
+			if (typeof explicit === "string" && explicit.length > 0) return explicit;
+			return typeof buttonProps.value.label === "string" ? buttonProps.value.label : void 0;
+		});
 		const menuAriaLabel = computed(() => {
 			const explicit = attrs["aria-label"];
 			if (typeof explicit === "string") return explicit;
@@ -559,7 +691,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const layerIsOpen = ref(false);
 		const { position, detach: detachPosition } = usePositionedLayer({
 			anchor: anchorRef,
-			layer: surfaceRef,
+			layer: positionedEl,
 			isOpen: layerIsOpen,
 			placement: computed(() => props.placement),
 			alignment: computed(() => props.alignment),
@@ -597,10 +729,17 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			onMatch: (index) => focusNav.focusItem(index)
 		});
 		useDismiss({
-			container: surfaceRef,
+			container: positionedEl,
 			trigger: anchorRef,
 			isEnabled: computed(() => isOpen.value && !isSheet.value),
-			onDismiss: closeMenu
+			onDismiss: closeMenu,
+			onEscape: () => {
+				if (drillIn.value.viewStack.length > 0) {
+					drillIn.value.pop();
+					return;
+				}
+				closeMenu();
+			}
 		});
 		function emitOpenChange(next) {
 			localIsOpen.value = next;
@@ -608,7 +747,19 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			emit("openChange", next);
 		}
 		function focusSurface() {
+			suppressRegionRing = openModality === "pointer";
 			surfaceRef.value?.focus({ preventScroll: true });
+			suppressRegionRing = false;
+		}
+		function onSurfaceFocus(event) {
+			if (event.target !== surfaceRef.value) {
+				regionFocus.value = false;
+				return;
+			}
+			regionFocus.value = hasRegions.value && !suppressRegionRing;
+		}
+		function assignHost(element) {
+			host.value = element instanceof HTMLElement ? element : null;
 		}
 		function openMenu(modality) {
 			if (isOpen.value) return;
@@ -644,7 +795,21 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			const surface = surfaceRef.value;
 			if (active == null || active === (typeof document !== "undefined" ? document.body : null) || surface != null && surface.contains(active)) getTriggerControl()?.focus({ preventScroll: true });
 		});
+		const regions = useMenuRegions({
+			closeMenu,
+			footer: footerRef,
+			hasRegions,
+			header: headerRef,
+			menu: surfaceRef
+		});
 		function onSurfaceKeydown(event) {
+			if (!focusNav.ownsEvent(event)) {
+				if (event.key === "Tab" && hasRegions.value) {
+					event.preventDefault();
+					regions.focusRegion(event.shiftKey ? "previous" : "next");
+				}
+				return;
+			}
 			if (event.key === "Enter" || event.key === " ") {
 				event.preventDefault();
 				if (event.repeat) return;
@@ -652,6 +817,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				if (focused instanceof HTMLElement && MENU_ITEM_ROLES.has(focused.getAttribute("role") ?? "")) activateMenuItem(focused, event);
 				return;
 			}
+			if (regions.onMenuTab(event)) return;
 			if (event.key === "Tab") {
 				closeMenu();
 				return;
@@ -705,7 +871,11 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		}));
 		provide(dropdownMenuContextKey, {
 			closeMenu,
+			drillIn,
+			focusRegion: regions.focusRegion,
+			hasRegions,
 			isOpen,
+			menuLabel,
 			menuSize
 		});
 		onMounted(() => {
@@ -745,35 +915,102 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			]))], 8, _hoisted_1), isSheet.value ? (openBlock(), createBlock(_sfc_main$6, {
 				key: 0,
 				"is-open": sheetOpen.value,
-				"onUpdate:isOpen": _cache[0] || (_cache[0] = ($event) => sheetOpen.value = $event),
+				"onUpdate:isOpen": _cache[2] || (_cache[2] = ($event) => sheetOpen.value = $event),
 				height: "hug",
 				label: sheetLabel.value,
 				padding: 2
 			}, {
-				default: withCtx(() => [createElementVNode("div", mergeProps({
-					id: surfaceId.value,
-					ref_key: "surfaceRef",
-					ref: surfaceRef
-				}, forwardedAttrs.value, {
-					"aria-labelledby": menuAriaLabelledBy.value,
-					"aria-label": menuAriaLabel.value,
-					class: ["astryx-dropdown-menu is-sheet", unref(attrs).class],
-					role: "menu",
-					tabindex: "-1",
-					onKeydown: onSurfaceKeydown
-				}), [__props.items != null ? (openBlock(), createBlock(unref(DropdownMenuItems), {
-					key: 0,
-					items: __props.items
-				}, null, 8, ["items"])) : renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 1)], 16, _hoisted_2)]),
+				default: withCtx(() => [
+					unref(slots).header ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						ref_key: "headerRef",
+						ref: headerRef,
+						class: "astryx-dropdown-menu-region",
+						onKeydown: _cache[0] || (_cache[0] = (...args) => unref(regions).onRegionKeydown && unref(regions).onRegionKeydown(...args))
+					}, [renderSlot(_ctx.$slots, "header")], 544)) : createCommentVNode("v-if", true),
+					createElementVNode("div", mergeProps({
+						id: surfaceId.value,
+						ref_key: "surfaceRef",
+						ref: surfaceRef
+					}, forwardedAttrs.value, {
+						"aria-labelledby": menuAriaLabelledBy.value,
+						"aria-label": menuAriaLabel.value,
+						class: ["astryx-dropdown-menu is-sheet", unref(attrs).class],
+						role: "menu",
+						tabindex: "-1",
+						onKeydown: onSurfaceKeydown
+					}), [createElementVNode("div", {
+						class: "astryx-dropdown-menu-tree",
+						hidden: unref(isDrilled) || void 0,
+						inert: unref(isDrilled) || void 0
+					}, [__props.items != null ? (openBlock(), createBlock(unref(DropdownMenuItems), {
+						key: 0,
+						items: __props.items
+					}, null, 8, ["items"])) : renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 1)], 8, _hoisted_3), createElementVNode("div", {
+						ref: assignHost,
+						class: "astryx-dropdown-menu-tree"
+					}, null, 512)], 16, _hoisted_2),
+					unref(slots).footer ? (openBlock(), createElementBlock("div", {
+						key: 1,
+						ref_key: "footerRef",
+						ref: footerRef,
+						class: "astryx-dropdown-menu-region",
+						onKeydown: _cache[1] || (_cache[1] = (...args) => unref(regions).onRegionKeydown && unref(regions).onRegionKeydown(...args))
+					}, [renderSlot(_ctx.$slots, "footer")], 544)) : createCommentVNode("v-if", true)
+				]),
 				_: 3
 			}, 8, ["is-open", "label"])) : (openBlock(), createBlock(Teleport, {
 				key: 1,
 				to: "body"
-			}, [createVNode(Transition, {
-				name: "astryx-dropdown-menu",
-				persisted: ""
-			}, {
-				default: withCtx(() => [withDirectives(createElementVNode("div", mergeProps({
+			}, [createVNode(Transition, { name: "astryx-dropdown-menu" }, {
+				default: withCtx(() => [hasRegions.value ? withDirectives((openBlock(), createElementBlock("div", {
+					key: 0,
+					ref_key: "popoverRef",
+					ref: popoverRef,
+					class: "astryx-dropdown-menu-popover",
+					"data-placement": unref(position).placement,
+					style: normalizeStyle([surfaceStyle.value, unref(attrs).style])
+				}, [
+					unref(slots).header ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						ref_key: "headerRef",
+						ref: headerRef,
+						class: "astryx-dropdown-menu-region",
+						onKeydown: _cache[3] || (_cache[3] = (...args) => unref(regions).onRegionKeydown && unref(regions).onRegionKeydown(...args))
+					}, [renderSlot(_ctx.$slots, "header")], 544)) : createCommentVNode("v-if", true),
+					createElementVNode("div", mergeProps({
+						id: surfaceId.value,
+						ref_key: "surfaceRef",
+						ref: surfaceRef
+					}, forwardedAttrs.value, {
+						"aria-labelledby": menuAriaLabelledBy.value,
+						"aria-label": menuAriaLabel.value,
+						class: ["astryx-dropdown-menu is-in-frame", unref(attrs).class],
+						"data-region-focus": regionFocus.value || void 0,
+						role: "menu",
+						tabindex: "0",
+						onFocus: onSurfaceFocus,
+						onKeydown: onSurfaceKeydown
+					}), [createElementVNode("div", {
+						class: "astryx-dropdown-menu-tree",
+						hidden: unref(isDrilled) || void 0,
+						inert: unref(isDrilled) || void 0
+					}, [__props.items != null ? (openBlock(), createBlock(unref(DropdownMenuItems), {
+						key: 0,
+						items: __props.items
+					}, null, 8, ["items"])) : renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 1)], 8, _hoisted_6), createElementVNode("div", {
+						ref: assignHost,
+						class: "astryx-dropdown-menu-tree"
+					}, null, 512)], 16, _hoisted_5),
+					unref(slots).footer ? (openBlock(), createElementBlock("div", {
+						key: 1,
+						ref_key: "footerRef",
+						ref: footerRef,
+						class: "astryx-dropdown-menu-region",
+						onKeydown: _cache[4] || (_cache[4] = (...args) => unref(regions).onRegionKeydown && unref(regions).onRegionKeydown(...args))
+					}, [renderSlot(_ctx.$slots, "footer")], 544)) : createCommentVNode("v-if", true)
+				], 12, _hoisted_4)), [[vShow, isOpen.value]]) : withDirectives((openBlock(), createElementBlock("div", mergeProps({
+					key: 1,
 					id: surfaceId.value,
 					ref_key: "surfaceRef",
 					ref: surfaceRef
@@ -785,15 +1022,23 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					role: "menu",
 					style: [surfaceStyle.value, unref(attrs).style],
 					tabindex: "-1",
+					onFocus: onSurfaceFocus,
 					onKeydown: onSurfaceKeydown
-				}), [__props.items != null ? (openBlock(), createBlock(unref(DropdownMenuItems), {
+				}), [createElementVNode("div", {
+					class: "astryx-dropdown-menu-tree",
+					hidden: unref(isDrilled) || void 0,
+					inert: unref(isDrilled) || void 0
+				}, [__props.items != null ? (openBlock(), createBlock(unref(DropdownMenuItems), {
 					key: 0,
 					items: __props.items
-				}, null, 8, ["items"])) : renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 1)], 16, _hoisted_3), [[vShow, isOpen.value]])]),
+				}, null, 8, ["items"])) : renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 1)], 8, _hoisted_8), createElementVNode("div", {
+					ref: assignHost,
+					class: "astryx-dropdown-menu-tree"
+				}, null, 512)], 16, _hoisted_7)), [[vShow, isOpen.value]])]),
 				_: 3
 			})]))], 64);
 		};
 	}
 });
 //#endregion
-export { _sfc_main$4 as a, useDropdownMenuContext as c, _sfc_main$2 as i, useMenuFocus as n, MENU_ITEM_ROLES as o, _sfc_main$1 as r, activateMenuItem as s, _sfc_main as t };
+export { _sfc_main$4 as a, _sfc_main$2 as i, useMenuFocus as n, MENU_ITEM_ROLES as o, _sfc_main$1 as r, activateMenuItem as s, _sfc_main as t };