@astryx-vue/core 0.2.6 → 0.4.0

package/dist/{DropdownMenu-BEasdJ6R.js → DropdownMenu-BzQrNV9C.js}

@@ -1,79 +1,89 @@
 import { n as useLinkComponent } from "./context-C_peZbXf.js";
-import { t as _sfc_main$5 } from "./Button-B6Hj_O_s.js";
+import { t as _sfc_main$7 } from "./Button-ONOoHdkg.js";
 import { t as useMediaQuery } from "./useMediaQuery-GMmgp28-.js";
-import { n as useDismiss, t as usePositionedLayer } from "./usePositionedLayer-Cru9_00b.js";
-import { n as getFocusables } from "./focus-CpficIgf.js";
-import { t as useTypeahead } from "./useTypeahead-PAK8lMYz.js";
-import { t as _sfc_main$6 } from "./BottomSheet-eJ3FzTBD.js";
-import { t as _sfc_main$7 } from "./Icon-bteSId7T.js";
-import { t as _sfc_main$8 } from "./Item-KhFKX9St.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-DzKGkTho.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, resolveDynamicComponent, shallowRef, toDisplayString, toRaw, unref, useAttrs, useId, useModel, useSlots, vShow, watch, withCtx, withDirectives } from "vue";
+import { n as useDismiss, t as usePositionedLayer } from "./usePositionedLayer-B7cvG-_v.js";
+import { r as getFocusables } from "./focus-l8jVTcqd.js";
+import { r as trackInteractionModality, t as getInteractionModality } from "./interactionModality-ACpTMhak.js";
+import { s as useAstryxMessages } from "./context-DWfi56sq.js";
+import { a as isMenuPressActivation, t as useMenuPress } from "./useMenuPress-8foxY8z4.js";
+import { n as useOverflow } from "./useOverflow-VrwF5oek.js";
+import { t as useTypeahead } from "./useTypeahead-BvtflkRk.js";
+import { t as _sfc_main$8 } from "./LayerContentBoundary-CvsKxwwm.js";
+import { t as useScrollbars } from "./useScrollbars-C2NJ6Qwq.js";
+import { t as _sfc_main$9 } from "./BottomSheet-B4sc3F1S.js";
+import { t as _sfc_main$10 } from "./Icon-KDnUyY7f.js";
+import { t as _sfc_main$11 } from "./Item-DWMIjN8n.js";
+import { a as dropdownMenuContextKey, i as _sfc_main$13, n as _sfc_main$12, o as useDropdownMenuContext, r as _sfc_main$14, t as useMenuDrillIn } from "./useMenuDrillIn-DhUnPvKs.js";
+import { n as clampInlineSize, r as isIntrinsicInlineSize, t as LAYER_MAX_INLINE_SIZE } from "./inlineSize-BNe8wggI.js";
+import { t as _sfc_main$15 } from "./Divider-mOZ6vIQw.js";
+import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, h, inject, markRaw, mergeModels, mergeProps, nextTick, normalizeProps, normalizeStyle, onBeforeUnmount, onMounted, openBlock, provide, reactive, ref, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toRaw, unref, useAttrs, useId, useModel, useSlots, vShow, watch, withCtx, withDirectives } from "vue";
 import "../styles/dropdown-menu.css";
-//#region src/DropdownMenu/menuItemRoles.ts
-/**
-* Rows a menu's roving focus, typeahead, and keyboard activation all agree on.
-*/
-const MENU_ITEM_ROLES = /* @__PURE__ */ new Set([
-	"menuitem",
-	"menuitemradio",
-	"menuitemcheckbox"
-]);
-/** Rows the arrow keys may land on: enabled menu items, in DOM order. */
-const MENU_ITEM_SELECTOR = [...MENU_ITEM_ROLES].map((role) => `[role="${role}"]:not([aria-disabled="true"])`).join(",");
-/** Scopes item collection and key handling to one menu level. */
-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 it a meaning of its own, which the row leaves alone.
-*/
-function isModifiedClick(event) {
-	return event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0;
-}
+//#region src/composables/internal/useFocusReturnVisibility.ts
 /**
-* Activate a row from the keyboard: a synthesized click that carries the key's
-* modifiers, so a ⌘-Enter on a link row opens it the way a ⌘-click would.
-* `detail` stays 0, the mark of a non-pointer activation.
+* 对应原版 Astryx 的 `hooks/useFocusReturnVisibility`（内部用）。
+*
+* 焦点照常还回去，但用鼠标或手指关掉浮层时不画焦点环。给那些自己画焦点环、
+* 光靠 `focusForLastInput` 不够的触发器（例如 DropdownMenu 的触发按钮、Selector）。
 */
-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 useFocusReturnVisibility() {
+	const isFocusRingSuppressed = shallowRef(false);
+	onMounted(trackInteractionModality);
+	return {
+		isFocusRingSuppressed,
+		onFocusReturnTargetFocus: () => {
+			if (getInteractionModality() === "keyboard") isFocusRingSuppressed.value = false;
+		},
+		prepareFocusReturn: () => {
+			isFocusRingSuppressed.value = getInteractionModality() === "pointer";
+		},
+		resetFocusReturn: () => {
+			isFocusRingSuppressed.value = false;
+		}
+	};
 }
 //#endregion
+//#region src/DropdownMenu/DropdownMenuBranch.vue
+const _sfc_main$6 = /*@__PURE__*/ defineComponent({
+	name: "AstryxDropdownMenuBranch",
+	__name: "DropdownMenuBranch",
+	props: { value: {} },
+	setup(__props) {
+		provide(dropdownMenuContextKey, __props.value);
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default");
+		};
+	}
+});
+//#endregion
+//#region src/DropdownMenu/frame.ts
+const dropdownMenuFrameKey = Symbol("astryx-dropdown-menu-frame");
+//#endregion
 //#region src/DropdownMenu/DropdownMenuDivider.vue
-const _sfc_main$4 = /*@__PURE__*/ defineComponent({
+const _sfc_main$5 = /*@__PURE__*/ defineComponent({
 	name: "AstryxDropdownMenuDivider",
 	__name: "DropdownMenuDivider",
 	setup(__props) {
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(_sfc_main$12, { class: "astryx-dropdown-menu-divider" });
+			return openBlock(), createBlock(_sfc_main$15, { class: "astryx-dropdown-menu-divider" });
 		};
 	}
 });
 //#endregion
 //#region src/DropdownMenu/DropdownMenuSectionHeading.vue
-const _hoisted_1$3 = { class: "astryx-dropdown-menu-section-heading" };
-const _sfc_main$3 = /*@__PURE__*/ defineComponent({
+const _hoisted_1$4 = { class: "astryx-dropdown-menu-section-heading" };
+const _sfc_main$4 = /*@__PURE__*/ defineComponent({
 	name: "AstryxDropdownMenuSectionHeading",
 	__name: "DropdownMenuSectionHeading",
 	setup(__props) {
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$3, [renderSlot(_ctx.$slots, "default")]);
+			return openBlock(), createElementBlock("div", _hoisted_1$4, [renderSlot(_ctx.$slots, "default")]);
 		};
 	}
 });
 //#endregion
 //#region src/DropdownMenu/DropdownMenuGroup.vue
-const _hoisted_1$2 = ["aria-labelledby"];
-const _sfc_main$2 = /*@__PURE__*/ defineComponent({
+const _hoisted_1$3 = ["aria-labelledby"];
+const _sfc_main$3 = /*@__PURE__*/ defineComponent({
 	name: "AstryxDropdownMenuGroup",
 	__name: "DropdownMenuGroup",
 	props: { title: {} },
@@ -86,19 +96,56 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 				class: "astryx-dropdown-menu-group",
 				role: "group",
 				"aria-labelledby": hasTitle.value ? headingId : void 0
-			}, [hasTitle.value || _ctx.$slots.title ? (openBlock(), createBlock(_sfc_main$3, {
+			}, [hasTitle.value || _ctx.$slots.title ? (openBlock(), createBlock(_sfc_main$4, {
 				key: 0,
 				id: headingId
 			}, {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(__props.title), 1)])]),
 				_: 3
-			})) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default")], 8, _hoisted_1$2);
+			})) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default")], 8, _hoisted_1$3);
 		};
 	}
 });
 //#endregion
+//#region src/DropdownMenu/menuItemRoles.ts
+/**
+* Rows a menu's roving focus, typeahead, and keyboard activation all agree on.
+*/
+const MENU_ITEM_ROLES = /* @__PURE__ */ new Set([
+	"menuitem",
+	"menuitemradio",
+	"menuitemcheckbox"
+]);
+/** Rows the arrow keys may land on: enabled menu items, in DOM order. */
+const MENU_ITEM_SELECTOR = [...MENU_ITEM_ROLES].map((role) => `[role="${role}"]:not([aria-disabled="true"])`).join(",");
+/** Scopes item collection and key handling to one menu level. */
+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 it a meaning of its own, which the row leaves alone.
+*/
+function isModifiedClick(event) {
+	return event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0;
+}
+/**
+* Activate a row from the keyboard: a synthesized click that carries the key's
+* modifiers, so a ⌘-Enter on a link row opens it the way a ⌘-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
+	}));
+}
+//#endregion
 //#region src/DropdownMenu/DropdownMenuItem.vue
-const _hoisted_1$1 = {
+const _hoisted_1$2 = {
 	key: 0,
 	class: "astryx-item__start"
 };
@@ -115,7 +162,7 @@ const _hoisted_5$1 = {
 	key: 1,
 	class: "astryx-item__end"
 };
-const _sfc_main$1 = /*@__PURE__*/ defineComponent({
+const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 	name: "AstryxDropdownMenuItem",
 	inheritAttrs: false,
 	__name: "DropdownMenuItem",
@@ -173,8 +220,16 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 				return;
 			}
 			if (!(isLink.value && isModifiedClick(event))) emit("click", event);
+			followPressActivation(event);
 			if (props.hasCloseOnSelect) menu?.closeMenu();
 		}
+		function followPressActivation(event) {
+			if (!isMenuPressActivation() || isModifiedClick(event) || linkRoot.value !== "a") return;
+			const href = props.href;
+			if (href == null || !(event.currentTarget instanceof HTMLAnchorElement)) return;
+			if (props.target === "_blank") window.open(href, "_blank", "noopener,noreferrer");
+			else window.location.assign(href);
+		}
 		function handleAuxClick(event) {
 			if (props.isDisabled) {
 				event.preventDefault();
@@ -198,6 +253,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 				"data-density": density.value,
 				"data-disabled": __props.isDisabled || void 0,
 				"data-interactive": true,
+				draggable: "false",
 				"data-menu-size": menuSize.value,
 				"data-variant": __props.variant,
 				href: linkHref.value,
@@ -211,7 +267,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 				onPointermove: handlePointerMove
 			}), {
 				default: withCtx(() => [
-					hasStart.value ? (openBlock(), createElementBlock("span", _hoisted_1$1, [renderSlot(_ctx.$slots, "icon", {}, () => [createVNode(_sfc_main$7, {
+					hasStart.value ? (openBlock(), createElementBlock("span", _hoisted_1$2, [renderSlot(_ctx.$slots, "icon", {}, () => [createVNode(_sfc_main$10, {
 						color: iconColor.value,
 						icon: __props.icon,
 						size: "sm"
@@ -233,7 +289,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 				"style",
 				"tabindex",
 				"target"
-			])) : (openBlock(), createBlock(_sfc_main$8, mergeProps({ key: 1 }, unref(attrs), {
+			])) : (openBlock(), createBlock(_sfc_main$11, mergeProps({ key: 1 }, unref(attrs), {
 				class: "astryx-dropdown-menu-item",
 				role: "menuitem",
 				"data-menu-size": menuSize.value,
@@ -249,7 +305,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 			}), createSlots({ _: 2 }, [
 				hasStart.value ? {
 					name: "startContent",
-					fn: withCtx(() => [renderSlot(_ctx.$slots, "icon", {}, () => [createVNode(_sfc_main$7, {
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "icon", {}, () => [createVNode(_sfc_main$10, {
 						color: iconColor.value,
 						icon: __props.icon,
 						size: "sm"
@@ -290,14 +346,14 @@ function endSlot(endContent) {
 }
 function renderRadioOption(option, index) {
 	const { endContent, id, ...itemProps } = option;
-	return h(_sfc_main$9, {
+	return h(_sfc_main$12, {
 		key: id ?? `radio-${index}`,
 		...itemProps
 	}, endSlot(endContent));
 }
 function renderCheckbox(item, index) {
 	const { checked, endContent, id, onChange, ...itemProps } = item;
-	return h(_sfc_main$10, {
+	return h(_sfc_main$13, {
 		"key": id ?? `checkbox-${index}`,
 		...itemProps,
 		"modelValue": checked,
@@ -305,7 +361,7 @@ function renderCheckbox(item, index) {
 	}, endSlot(endContent));
 }
 function renderRadio(item, index) {
-	return h(_sfc_main$11, {
+	return h(_sfc_main$14, {
 		"key": item.id ?? `radio-group-${index}`,
 		"label": item.label,
 		"modelValue": item.value,
@@ -317,7 +373,7 @@ function renderRadio(item, index) {
 }
 function renderItem(item, index) {
 	const { endContent, id, ...itemProps } = item;
-	return h(_sfc_main$1, {
+	return h(_sfc_main$2, {
 		key: id ?? `item-${index}`,
 		...itemProps
 	}, endSlot(endContent));
@@ -332,8 +388,8 @@ function renderEntry(entry, index) {
 * 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, {
+	if ("type" in option && option.type === "divider") return h(_sfc_main$5, { key: `divider-${index}` });
+	if ("type" in option && option.type === "section") return h(_sfc_main$3, {
 		key: option.id ?? `section-${index}`,
 		title: option.title
 	}, { default: () => option.items.map((item, itemIndex) => renderEntry(item, itemIndex)) });
@@ -354,6 +410,188 @@ const DropdownMenuItems = defineComponent({
 	}
 });
 //#endregion
+//#region src/DropdownMenu/DropdownMenuFrame.vue
+const _hoisted_1$1 = [
+	"id",
+	"aria-labelledby",
+	"aria-label",
+	"data-overflow"
+];
+const _hoisted_2 = ["hidden", "inert"];
+const _hoisted_3 = [
+	"id",
+	"aria-label",
+	"data-placement"
+];
+const _hoisted_4 = [
+	"id",
+	"aria-labelledby",
+	"aria-label",
+	"data-overflow",
+	"data-region-focus"
+];
+const _hoisted_5 = ["hidden", "inert"];
+const _hoisted_6 = [
+	"id",
+	"aria-labelledby",
+	"aria-label",
+	"data-placement",
+	"data-overflow"
+];
+const _hoisted_7 = ["hidden", "inert"];
+const _sfc_main$1 = /*@__PURE__*/ defineComponent({
+	name: "AstryxDropdownMenuFrame",
+	__name: "DropdownMenuFrame",
+	setup(__props) {
+		const frame = inject(dropdownMenuFrameKey);
+		if (frame == null) throw new Error("DropdownMenuFrame must render inside DropdownMenu");
+		return (_ctx, _cache) => {
+			return unref(frame).isSheet ? (openBlock(), createBlock(_sfc_main$9, {
+				key: 0,
+				"is-open": unref(frame).sheetOpen,
+				"onUpdate:isOpen": _cache[3] || (_cache[3] = ($event) => unref(frame).sheetOpen = $event),
+				height: "hug",
+				label: unref(frame).sheetLabel,
+				padding: 2
+			}, {
+				default: withCtx(() => [createVNode(_sfc_main$8, null, {
+					default: withCtx(() => [createVNode(_sfc_main$6, { value: unref(frame).menuContext }, {
+						default: withCtx(() => [
+							_ctx.$slots.header ? (openBlock(), createElementBlock("div", {
+								key: 0,
+								ref: unref(frame).setHeader,
+								class: "astryx-dropdown-menu-region",
+								onKeydown: _cache[0] || (_cache[0] = (...args) => unref(frame).regions.onRegionKeydown && unref(frame).regions.onRegionKeydown(...args))
+							}, [renderSlot(_ctx.$slots, "header")], 544)) : createCommentVNode("v-if", true),
+							createElementVNode("div", mergeProps({
+								id: unref(frame).surfaceId,
+								ref: unref(frame).setSurface
+							}, unref(frame).menuBindings, {
+								"aria-labelledby": unref(frame).menuAriaLabelledBy,
+								"aria-label": unref(frame).menuAriaLabel,
+								class: ["astryx-dropdown-menu is-sheet", unref(frame).surfaceClass],
+								"data-overflow": unref(frame).hasOverflow || void 0,
+								role: "menu",
+								tabindex: "-1",
+								onKeydown: _cache[1] || (_cache[1] = (...args) => unref(frame).onSurfaceKeydown && unref(frame).onSurfaceKeydown(...args))
+							}), [createElementVNode("div", {
+								class: "astryx-dropdown-menu-tree",
+								hidden: unref(frame).isDrilled || void 0,
+								inert: unref(frame).isDrilled || void 0
+							}, [unref(frame).items != null ? (openBlock(), createBlock(unref(DropdownMenuItems), {
+								key: 0,
+								items: unref(frame).items
+							}, null, 8, ["items"])) : renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 1)], 8, _hoisted_2), createElementVNode("div", {
+								ref: unref(frame).setHost,
+								class: "astryx-dropdown-menu-tree"
+							}, null, 512)], 16, _hoisted_1$1),
+							_ctx.$slots.footer ? (openBlock(), createElementBlock("div", {
+								key: 1,
+								ref: unref(frame).setFooter,
+								class: "astryx-dropdown-menu-region",
+								onKeydown: _cache[2] || (_cache[2] = (...args) => unref(frame).regions.onRegionKeydown && unref(frame).regions.onRegionKeydown(...args))
+							}, [renderSlot(_ctx.$slots, "footer")], 544)) : createCommentVNode("v-if", true)
+						]),
+						_: 3
+					}, 8, ["value"])]),
+					_: 3
+				})]),
+				_: 3
+			}, 8, ["is-open", "label"])) : (openBlock(), createBlock(Teleport, {
+				key: 1,
+				to: unref(frame).teleportTarget
+			}, [createVNode(Transition, { name: "astryx-dropdown-menu" }, {
+				default: withCtx(() => [unref(frame).hasRegions ? withDirectives((openBlock(), createElementBlock("div", {
+					key: 0,
+					id: unref(frame).dialogId,
+					ref: unref(frame).setPopover,
+					class: "astryx-dropdown-menu-popover",
+					role: "dialog",
+					"aria-modal": "true",
+					"aria-label": unref(frame).dialogLabel,
+					"data-placement": unref(frame).placement,
+					style: normalizeStyle(unref(frame).surfaceStyle)
+				}, [createVNode(_sfc_main$8, null, {
+					default: withCtx(() => [createVNode(_sfc_main$6, { value: unref(frame).menuContext }, {
+						default: withCtx(() => [
+							_ctx.$slots.header ? (openBlock(), createElementBlock("div", {
+								key: 0,
+								ref: unref(frame).setHeader,
+								class: "astryx-dropdown-menu-region",
+								onKeydown: _cache[4] || (_cache[4] = (...args) => unref(frame).regions.onRegionKeydown && unref(frame).regions.onRegionKeydown(...args))
+							}, [renderSlot(_ctx.$slots, "header")], 544)) : createCommentVNode("v-if", true),
+							createElementVNode("div", mergeProps({
+								id: unref(frame).surfaceId,
+								ref: unref(frame).setSurface
+							}, unref(frame).menuBindings, {
+								"aria-labelledby": unref(frame).menuAriaLabelledBy,
+								"aria-label": unref(frame).menuAriaLabel,
+								class: ["astryx-dropdown-menu is-in-frame", unref(frame).surfaceClass],
+								"data-overflow": unref(frame).hasOverflow || void 0,
+								"data-region-focus": unref(frame).regionFocus || void 0,
+								role: "menu",
+								tabindex: "0",
+								onFocus: _cache[5] || (_cache[5] = (...args) => unref(frame).onSurfaceFocus && unref(frame).onSurfaceFocus(...args)),
+								onKeydown: _cache[6] || (_cache[6] = (...args) => unref(frame).onSurfaceKeydown && unref(frame).onSurfaceKeydown(...args))
+							}), [createElementVNode("div", {
+								class: "astryx-dropdown-menu-tree",
+								hidden: unref(frame).isDrilled || void 0,
+								inert: unref(frame).isDrilled || void 0
+							}, [unref(frame).items != null ? (openBlock(), createBlock(unref(DropdownMenuItems), {
+								key: 0,
+								items: unref(frame).items
+							}, null, 8, ["items"])) : renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 1)], 8, _hoisted_5), createElementVNode("div", {
+								ref: unref(frame).setHost,
+								class: "astryx-dropdown-menu-tree"
+							}, null, 512)], 16, _hoisted_4),
+							_ctx.$slots.footer ? (openBlock(), createElementBlock("div", {
+								key: 1,
+								ref: unref(frame).setFooter,
+								class: "astryx-dropdown-menu-region",
+								onKeydown: _cache[7] || (_cache[7] = (...args) => unref(frame).regions.onRegionKeydown && unref(frame).regions.onRegionKeydown(...args))
+							}, [renderSlot(_ctx.$slots, "footer")], 544)) : createCommentVNode("v-if", true)
+						]),
+						_: 3
+					}, 8, ["value"])]),
+					_: 3
+				})], 12, _hoisted_3)), [[vShow, unref(frame).isOpen]]) : withDirectives((openBlock(), createElementBlock("div", mergeProps({
+					key: 1,
+					id: unref(frame).surfaceId,
+					ref: unref(frame).setSurface
+				}, unref(frame).menuBindings, {
+					"aria-labelledby": unref(frame).menuAriaLabelledBy,
+					"aria-label": unref(frame).menuAriaLabel,
+					class: ["astryx-dropdown-menu", unref(frame).surfaceClass],
+					"data-placement": unref(frame).placement,
+					"data-overflow": unref(frame).hasOverflow || void 0,
+					role: "menu",
+					style: unref(frame).surfaceStyle,
+					tabindex: "-1",
+					onFocus: _cache[8] || (_cache[8] = (...args) => unref(frame).onSurfaceFocus && unref(frame).onSurfaceFocus(...args)),
+					onKeydown: _cache[9] || (_cache[9] = (...args) => unref(frame).onSurfaceKeydown && unref(frame).onSurfaceKeydown(...args))
+				}), [createVNode(_sfc_main$8, null, {
+					default: withCtx(() => [createVNode(_sfc_main$6, { value: unref(frame).menuContext }, {
+						default: withCtx(() => [createElementVNode("div", {
+							class: "astryx-dropdown-menu-tree",
+							hidden: unref(frame).isDrilled || void 0,
+							inert: unref(frame).isDrilled || void 0
+						}, [unref(frame).items != null ? (openBlock(), createBlock(unref(DropdownMenuItems), {
+							key: 0,
+							items: unref(frame).items
+						}, null, 8, ["items"])) : renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 1)], 8, _hoisted_7), createElementVNode("div", {
+							ref: unref(frame).setHost,
+							class: "astryx-dropdown-menu-tree"
+						}, null, 512)]),
+						_: 3
+					}, 8, ["value"])]),
+					_: 3
+				})], 16, _hoisted_6)), [[vShow, unref(frame).isOpen]])]),
+				_: 3
+			})], 8, ["to"]));
+		};
+	}
+});
+//#endregion
 //#region src/DropdownMenu/useMenuFocus.ts
 function isDisabled(el) {
 	return el.getAttribute("aria-disabled") === "true" || el.hasAttribute("disabled");
@@ -524,11 +762,45 @@ function focusControl(element) {
 	element.focus();
 	return element.ownerDocument.activeElement === element;
 }
+function radioGroupKey(element) {
+	if (!(element instanceof HTMLInputElement) || element.getAttribute("type") !== "radio" || element.name === "") return null;
+	return `${element.form?.id ?? ""}\u0000${element.name}`;
+}
+/**
+* A named radio group is one Tab stop: the focused radio, else the checked
+* one, else the first radio going forward or the last going backward.
+*/
+function collapseRadioGroups(elements, active, isBackward) {
+	const groups = /* @__PURE__ */ new Map();
+	for (const element of elements) {
+		const key = radioGroupKey(element);
+		if (key == null) continue;
+		const members = groups.get(key) ?? [];
+		members.push(element);
+		groups.set(key, members);
+	}
+	const placed = /* @__PURE__ */ new Set();
+	const result = [];
+	for (const element of elements) {
+		const key = radioGroupKey(element);
+		if (key == null) {
+			result.push(element);
+			continue;
+		}
+		if (placed.has(key)) continue;
+		placed.add(key);
+		const members = groups.get(key) ?? [];
+		const stop = members.find((radio) => radio === active) ?? members.find((radio) => radio.checked) ?? (isBackward ? members[members.length - 1] : members[0]);
+		if (stop != null) result.push(stop);
+	}
+	return result;
+}
 /**
 * 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.
+* With either region the popover is a dialog: Tab cycles the header, the menu
+* as one stop, and the footer, and wraps at both ends. A row counts as the
+* menu's stop, so Shift+Tab from a row lands on the header.
 */
 function useMenuRegions(options) {
 	function focusRegion(direction) {
@@ -539,68 +811,50 @@ function useMenuRegions(options) {
 		}
 		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();
+	function moveDialogTab(event, isFromFlyout = false) {
+		const menu = options.menu.value;
+		if (menu == null || !options.hasRegions.value) return;
+		event.preventDefault();
+		event.stopPropagation();
+		const active = menu.ownerDocument.activeElement;
+		const cycle = collapseRadioGroups([
+			...tabbablesIn(options.header.value),
+			menu,
+			...tabbablesIn(options.footer.value)
+		], active, event.shiftKey);
+		if (cycle.length <= 1) {
+			if (isFromFlyout) menu.focus();
+			return;
 		}
-		return true;
+		const menuIndex = cycle.indexOf(menu);
+		let index = active instanceof Node && menu.contains(active) ? menuIndex : cycle.findIndex((element) => element === active || element.contains(active));
+		if (index < 0) index = menuIndex;
+		const step = event.shiftKey ? -1 : 1;
+		const next = cycle[(index + step + cycle.length) % cycle.length];
+		if (!focusControl(next)) menu.focus();
 	}
 	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();
+		if (event.key === "Tab") moveDialogTab(event);
 	}
 	return {
 		focusRegion,
-		onMenuTab,
+		moveDialogTab,
 		onRegionKeydown
 	};
 }
 //#endregion
 //#region src/DropdownMenu/DropdownMenu.vue
 const _hoisted_1 = ["data-open"];
-const _hoisted_2 = [
-	"id",
-	"aria-labelledby",
-	"aria-label"
-];
-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";
-const COMPACT_TOUCH_QUERY = "(max-width: 639px) and (pointer: coarse) and (hover: none)";
+const COMPACT_TOUCH_QUERY = "(max-width: 768px) and (pointer: coarse)";
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	name: "AstryxDropdownMenu",
 	inheritAttrs: false,
 	__name: "DropdownMenu",
 	props: /*@__PURE__*/ mergeModels({
-		button: { default: () => ({ label: "Menu" }) },
+		button: {},
 		items: {},
 		isMenuOpen: { type: Boolean },
 		menuWidth: {},
@@ -629,7 +883,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const emit = __emit;
 		const attrs = useAttrs();
 		const slots = useSlots();
-		const INTRINSIC_SIZE = /^(?:auto|min-content|max-content|fit-content|fit-content\(.*\)|inherit|initial|unset|revert|revert-layer)$/i;
+		const messages = useAstryxMessages();
+		const focusReturn = useFocusReturnVisibility();
 		const open = useModel(__props, "isMenuOpen");
 		const localIsOpen = shallowRef(false);
 		const isOpen = computed(() => open.value ?? localIsOpen.value);
@@ -638,6 +893,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const triggerId = `astryx-dropdown-menu-trigger-${uid}`;
 		const anchorRef = ref(null);
 		const surfaceRef = ref(null);
+		useScrollbars(surfaceRef);
 		const popoverRef = ref(null);
 		const headerRef = ref(null);
 		const footerRef = ref(null);
@@ -659,8 +915,11 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				if (!open) closeMenu();
 			}
 		});
-		const buttonProps = computed(() => props.button ?? {});
-		const sheetLabel = computed(() => typeof buttonProps.value.label === "string" ? buttonProps.value.label : "Menu");
+		const buttonProps = computed(() => ({
+			label: messages.value.dropdownMenu.label,
+			...props.button
+		}));
+		const sheetLabel = computed(() => typeof buttonProps.value.label === "string" ? buttonProps.value.label : messages.value.dropdownMenu.label);
 		const menuSize = computed(() => buttonProps.value.size ?? "md");
 		const isIconOnly = computed(() => buttonProps.value.isIconOnly === true);
 		const hasChevron = computed(() => props.hasChevron && !isIconOnly.value);
@@ -679,6 +938,12 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			if (slots.trigger != null) return void 0;
 			return typeof buttonProps.value.label === "string" ? buttonProps.value.label : void 0;
 		});
+		const dialogLabel = computed(() => menuLabel.value ?? messages.value.dropdownMenu.label);
+		const dialogId = `${menuId}-dialog`;
+		const popupKind = computed(() => hasRegions.value ? "dialog" : "menu");
+		const controlsId = computed(() => hasRegions.value ? dialogId : surfaceId.value);
+		const focusRing = computed(() => focusReturn.isFocusRingSuppressed.value ? "off" : void 0);
+		const hasOverflow = useOverflow(surfaceRef, isOpen);
 		const menuAriaLabelledBy = computed(() => {
 			const explicit = attrs["aria-labelledby"];
 			if (typeof explicit === "string") return explicit;
@@ -692,13 +957,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			"aria-label",
 			"aria-labelledby"
 		].includes(key))));
-		/**
-		* The layer tracks its own open state so a menu that mounts already open still
-		* gets one open transition: the layer's own watcher only reacts to a change,
-		* and a controlled menu renders open from the first frame.
-		*/
 		const layerIsOpen = ref(false);
-		const { position, detach: detachPosition } = usePositionedLayer({
+		const { position, teleportTarget, detach: detachPosition } = usePositionedLayer({
 			anchor: anchorRef,
 			layer: positionedEl,
 			isOpen: layerIsOpen,
@@ -715,15 +975,15 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				"top": `${position.value.top}px`,
 				"left": `${position.value.left}px`,
 				"--_dropdown-menu-max-block": `min(${props.menuMaxHeight == null ? DEFAULT_MAX_HEIGHT : `${props.menuMaxHeight}px`}, calc(100dvh - 16px))`,
-				"maxWidth": props.menuWidth == null ? `min(${DEFAULT_MAX_WIDTH}px, calc(100vw - 16px))` : "calc(100vw - 16px)"
+				"maxWidth": props.menuWidth == null ? clampInlineSize(`${DEFAULT_MAX_WIDTH}px`) : LAYER_MAX_INLINE_SIZE
 			};
 			if (props.menuWidth == null) {
 				style.minWidth = `min(${anchorWidth.value}px, ${DEFAULT_MAX_WIDTH}px)`;
 				return style;
 			}
 			const width = (typeof props.menuWidth === "number" ? `${props.menuWidth}px` : props.menuWidth).trim();
-			if (INTRINSIC_SIZE.test(width)) style.width = width;
-			else style.minWidth = `min(${width}, calc(100vw - 16px))`;
+			if (isIntrinsicInlineSize(width)) style.width = width;
+			else style.minWidth = clampInlineSize(width);
 			return style;
 		});
 		const focusNav = useMenuFocus({ list: surfaceRef });
@@ -767,17 +1027,40 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			}
 			regionFocus.value = hasRegions.value && !suppressRegionRing;
 		}
+		function assignElement(target, element) {
+			target.value = element instanceof HTMLElement ? element : null;
+		}
 		function assignHost(element) {
 			host.value = element instanceof HTMLElement ? element : null;
 		}
+		function isTriggerDisabled() {
+			return getTriggerControl()?.matches(":disabled, [aria-disabled=\"true\"]") === true;
+		}
 		function openMenu(modality) {
-			if (isOpen.value) return;
+			if (isTriggerDisabled() || isOpen.value) return false;
+			focusReturn.resetFocusReturn();
 			openModality = modality;
 			shouldFocusOnOpen.value = true;
 			emitOpenChange(true);
+			return true;
 		}
+		const press = useMenuPress({
+			menuRef: surfaceRef,
+			triggerRef: anchorRef,
+			isEnabled: () => !isSheet.value && !isTriggerDisabled(),
+			onTriggerPress: () => {
+				if (isOpen.value) {
+					closeMenu();
+					return false;
+				}
+				return openMenu("pointer");
+			},
+			onDismiss: () => closeMenu()
+		});
 		function closeMenu() {
 			if (!isOpen.value) return;
+			focusReturn.prepareFocusReturn();
+			press.cancel();
 			emitOpenChange(false);
 		}
 		function getTriggerControl() {
@@ -802,7 +1085,10 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			typeahead.reset();
 			const active = typeof document !== "undefined" ? document.activeElement : null;
 			const surface = surfaceRef.value;
-			if (active == null || active === (typeof document !== "undefined" ? document.body : null) || surface != null && surface.contains(active)) getTriggerControl()?.focus({ preventScroll: true });
+			if (active == null || active === (typeof document !== "undefined" ? document.body : null) || surface != null && surface.contains(active)) {
+				await nextTick();
+				getTriggerControl()?.focus({ preventScroll: true });
+			}
 		});
 		const regions = useMenuRegions({
 			closeMenu,
@@ -813,10 +1099,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		});
 		function onSurfaceKeydown(event) {
 			if (!focusNav.ownsEvent(event)) {
-				if (event.key === "Tab" && hasRegions.value) {
-					event.preventDefault();
-					regions.focusRegion(event.shiftKey ? "previous" : "next");
-				}
+				if (event.key === "Tab" && hasRegions.value) regions.moveDialogTab(event, true);
 				return;
 			}
 			if (event.key === "Enter" || event.key === " ") {
@@ -826,9 +1109,9 @@ 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();
+				if (hasRegions.value) regions.moveDialogTab(event);
+				else closeMenu();
 				return;
 			}
 			if (typeahead.onKeyDown(event)) {
@@ -838,7 +1121,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			focusNav.handleKeyDown(event);
 		}
 		function onTriggerClick(event) {
-			if (armedTriggerClickGuard) {
+			if (armedTriggerClickGuard || press.isTriggerClickFromPress()) {
 				armedTriggerClickGuard = false;
 				return;
 			}
@@ -872,21 +1155,60 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		}
 		const triggerProps = computed(() => ({
 			"id": triggerId,
-			"aria-haspopup": "menu",
+			"aria-haspopup": popupKind.value,
 			"aria-expanded": isOpen.value,
-			"aria-controls": surfaceId.value,
+			"aria-controls": controlsId.value,
+			"data-astryx-focus-ring": focusRing.value,
 			"onClick": onTriggerClick,
-			"onKeyDown": onTriggerKeydown
+			"onKeyDown": onTriggerKeydown,
+			"onFocus": focusReturn.onFocusReturnTargetFocus
 		}));
-		provide(dropdownMenuContextKey, {
+		const menuContext = markRaw({
 			closeMenu,
 			drillIn,
 			focusRegion: regions.focusRegion,
+			moveDialogTab: regions.moveDialogTab,
 			hasRegions,
 			isOpen,
 			menuLabel,
 			menuSize
 		});
+		const paintedStyle = computed(() => [surfaceStyle.value, attrs.style]);
+		const menuBindings = computed(() => ({
+			...forwardedAttrs.value,
+			...press.menuProps
+		}));
+		provide(dropdownMenuFrameKey, reactive({
+			isSheet,
+			sheetOpen,
+			sheetLabel,
+			hasRegions,
+			isOpen,
+			isDrilled,
+			hasOverflow,
+			regionFocus,
+			surfaceId,
+			dialogId,
+			dialogLabel,
+			menuAriaLabel,
+			menuAriaLabelledBy,
+			forwardedAttrs,
+			menuBindings,
+			surfaceClass: computed(() => attrs.class),
+			surfaceStyle: paintedStyle,
+			placement: computed(() => position.value.placement),
+			teleportTarget,
+			items: computed(() => props.items),
+			menuContext,
+			regions,
+			setSurface: (element) => assignElement(surfaceRef, element),
+			setPopover: (element) => assignElement(popoverRef, element),
+			setHeader: (element) => assignElement(headerRef, element),
+			setFooter: (element) => assignElement(footerRef, element),
+			setHost: assignHost,
+			onSurfaceKeydown,
+			onSurfaceFocus
+		}));
 		onMounted(() => {
 			if (!isOpen.value) return;
 			layerIsOpen.value = true;
@@ -900,18 +1222,23 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				ref_key: "anchorRef",
 				ref: anchorRef,
 				class: "astryx-dropdown-menu-trigger",
-				"data-open": isOpen.value ? "true" : void 0
-			}, [unref(slots).trigger ? renderSlot(_ctx.$slots, "trigger", normalizeProps(guardReactiveProps(triggerProps.value)), void 0, void 0, 0) : (openBlock(), createBlock(_sfc_main$5, mergeProps({ key: 1 }, buttonProps.value, {
+				"data-open": isOpen.value ? "true" : void 0,
+				onContextmenu: _cache[0] || (_cache[0] = (...args) => unref(press).triggerProps.onContextmenu && unref(press).triggerProps.onContextmenu(...args)),
+				onFocusin: _cache[1] || (_cache[1] = (...args) => unref(focusReturn).onFocusReturnTargetFocus && unref(focusReturn).onFocusReturnTargetFocus(...args)),
+				onPointerdown: _cache[2] || (_cache[2] = (...args) => unref(press).triggerProps.onPointerdown && unref(press).triggerProps.onPointerdown(...args))
+			}, [unref(slots).trigger ? renderSlot(_ctx.$slots, "trigger", normalizeProps(guardReactiveProps(triggerProps.value)), void 0, void 0, 0) : (openBlock(), createBlock(_sfc_main$7, mergeProps({ key: 1 }, buttonProps.value, {
 				id: triggerId,
-				"aria-controls": surfaceId.value,
+				"aria-controls": controlsId.value,
 				"aria-expanded": isOpen.value,
-				"aria-haspopup": "menu",
+				"aria-haspopup": popupKind.value,
+				"data-astryx-focus-ring": focusRing.value,
 				tooltip: isOpen.value ? void 0 : buttonProps.value.tooltip,
 				onClick: onTriggerClick,
+				onFocus: unref(focusReturn).onFocusReturnTargetFocus,
 				onKeydown: onTriggerKeydown
 			}), createSlots({ _: 2 }, [hasChevron.value ? {
 				name: "end",
-				fn: withCtx(() => [createVNode(_sfc_main$7, {
+				fn: withCtx(() => [createVNode(_sfc_main$10, {
 					color: "inherit",
 					icon: "chevronDown",
 					size: "sm"
@@ -920,134 +1247,24 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			} : void 0]), 1040, [
 				"aria-controls",
 				"aria-expanded",
-				"tooltip"
-			]))], 8, _hoisted_1), isSheet.value ? (openBlock(), createBlock(_sfc_main$6, {
-				key: 0,
-				"is-open": sheetOpen.value,
-				"onUpdate:isOpen": _cache[2] || (_cache[2] = ($event) => sheetOpen.value = $event),
-				height: "hug",
-				label: sheetLabel.value,
-				padding: 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" }, {
-				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
-				}, forwardedAttrs.value, {
-					"aria-labelledby": menuAriaLabelledBy.value,
-					"aria-label": menuAriaLabel.value,
-					class: ["astryx-dropdown-menu", unref(attrs).class],
-					"data-placement": unref(position).placement,
-					role: "menu",
-					style: [surfaceStyle.value, unref(attrs).style],
-					tabindex: "-1",
-					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_8), createElementVNode("div", {
-					ref: assignHost,
-					class: "astryx-dropdown-menu-tree"
-				}, null, 512)], 16, _hoisted_7)), [[vShow, isOpen.value]])]),
-				_: 3
-			})]))], 64);
+				"aria-haspopup",
+				"data-astryx-focus-ring",
+				"tooltip",
+				"onFocus"
+			]))], 40, _hoisted_1), createVNode(_sfc_main$1, null, createSlots({
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 2
+			}, [unref(slots).header ? {
+				name: "header",
+				fn: withCtx(() => [renderSlot(_ctx.$slots, "header")]),
+				key: "0"
+			} : void 0, unref(slots).footer ? {
+				name: "footer",
+				fn: withCtx(() => [renderSlot(_ctx.$slots, "footer")]),
+				key: "1"
+			} : void 0]), 1024)], 64);
 		};
 	}
 });
 //#endregion
-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 };
+export { activateMenuItem as a, _sfc_main$6 as c, MENU_ITEM_ROLES as i, useMenuFocus as n, _sfc_main$3 as o, _sfc_main$2 as r, _sfc_main$5 as s, _sfc_main as t };