@astryx-vue/core 0.6.1 → 0.7.1

package/dist/{Dialog-CL8u76KG.js → DialogHeader-B-Lz4rB5.js}

@@ -1,7 +1,7 @@
 import { t as _sfc_main$1 } from "./IconButton-BmMIccb4.js";
 import { s as useAstryxMessages } from "./context-CVUee2tp.js";
-import { n as DIALOG_CONTEXT_KEY, t as _sfc_main$2 } from "./Dialog-fhyxB00e.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, h, inject, mergeProps, normalizeClass, onBeforeUnmount, onMounted, openBlock, readonly, ref, renderSlot, shallowRef, toDisplayString, useAttrs, useId, useSlots, withCtx } from "vue";
+import { n as DIALOG_CONTEXT_KEY } from "./Dialog-BhxN-tp4.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, inject, mergeProps, normalizeClass, onBeforeUnmount, onMounted, openBlock, renderSlot, toDisplayString, useAttrs, useId, useSlots, withCtx } from "vue";
 import "../styles/dialog-header.css";
 //#region src/Dialog/DialogHeader.vue
 const _hoisted_1 = {
@@ -109,50 +109,4 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 	}
 });
 //#endregion
-//#region src/Dialog/useImperativeDialog.ts
-/**
-* 无需管理 `isOpen` 状态即可打开对话框。
-*
-* @example
-* ```
-* const dialog = useImperativeDialog()
-* // <button @click="dialog.show(() => h('p', 'Hello'))">Open</button>
-* // <dialog.Host />
-* ```
-*/
-function useImperativeDialog(defaultOptions = {}) {
-	const isOpen = ref(false);
-	const content = shallowRef(() => null);
-	const options = shallowRef(defaultOptions);
-	function show(nextContent, nextOptions) {
-		content.value = nextContent;
-		if (nextOptions) options.value = {
-			...options.value,
-			...nextOptions
-		};
-		isOpen.value = true;
-	}
-	function hide() {
-		isOpen.value = false;
-	}
-	const Host = defineComponent({
-		name: "AstryxImperativeDialogHost",
-		setup() {
-			return () => h(_sfc_main$2, {
-				...options.value,
-				isOpen: isOpen.value,
-				onOpenChange: (open) => {
-					if (!open) isOpen.value = false;
-				}
-			}, { default: () => content.value() });
-		}
-	});
-	return {
-		show,
-		hide,
-		isOpen: readonly(isOpen),
-		Host
-	};
-}
-//#endregion
-export { _sfc_main as n, useImperativeDialog as t };
+export { _sfc_main as t };

package/dist/Divider/index.d.ts

@@ -1,2 +1,2 @@
-import { i as DividerVariant, n as DividerOrientation, r as DividerProps, t as _default } from "../index-D05JGsT3.js";
+import { i as DividerVariant, n as DividerOrientation, r as DividerProps, t as _default } from "../index-C8wfe0Mr.js";
 export { _default as Divider, type DividerOrientation, type DividerProps, type DividerVariant };

package/dist/Drawer/index.d.ts

@@ -0,0 +1,2 @@
+import { Ci as DrawerHeaderSlots, Ei as DrawerSlots, Si as DrawerHeaderProps, Ti as DrawerProps, bi as DrawerEmits, vi as _default$1, wi as DrawerPlacement, xi as DrawerHeaderEmits, yi as _default } from "../index-CXdImpTj.js";
+export { _default as Drawer, type DrawerEmits, _default$1 as DrawerHeader, type DrawerHeaderEmits, type DrawerHeaderProps, type DrawerHeaderSlots, type DrawerPlacement, type DrawerProps, type DrawerSlots };

package/dist/Drawer/index.js

@@ -0,0 +1,2 @@
+import { n as _sfc_main, t as _sfc_main$1 } from "../Drawer-DjSbpQcy.js";
+export { _sfc_main as Drawer, _sfc_main$1 as DrawerHeader };

package/dist/Drawer-DjSbpQcy.js

@@ -0,0 +1,137 @@
+import { t as _sfc_main$2 } from "./Dialog-BhxN-tp4.js";
+import { t as _sfc_main$3 } from "./DialogHeader-B-Lz4rB5.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, defineComponent, getCurrentInstance, mergeProps, openBlock, renderSlot, unref, useAttrs, useSlots, withCtx } from "vue";
+import "../styles/drawer.css";
+//#region src/Drawer/Drawer.vue
+const _hoisted_1 = { class: "astryx-drawer-body" };
+const _hoisted_2 = {
+	key: 0,
+	class: "astryx-drawer-footer"
+};
+/**
+* 贴边的模态面板。模态、焦点陷阱、焦点归还、滚动锁和 `purpose` 的关闭规则
+* 都由 `Dialog` 负责，这里只决定贴哪一边和多大。
+*/
+const _sfc_main$1 = /*@__PURE__*/ defineComponent({
+	name: "AstryxDrawer",
+	inheritAttrs: false,
+	__name: "Drawer",
+	props: {
+		isOpen: { type: Boolean },
+		label: {},
+		placement: { default: "end" },
+		width: { default: 400 },
+		padding: { default: void 0 },
+		purpose: { default: "info" }
+	},
+	emits: ["openChange"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const attrs = useAttrs();
+		const position = computed(() => props.placement === "start" ? {
+			start: 0,
+			top: 0,
+			bottom: 0
+		} : {
+			end: 0,
+			top: 0,
+			bottom: 0
+		});
+		const rootAttrs = computed(() => Object.fromEntries(Object.entries(attrs).filter(([name]) => name !== "class" && name !== "style")));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(_sfc_main$2, mergeProps(rootAttrs.value, {
+				"aria-label": __props.label,
+				class: ["astryx-drawer", [`astryx-drawer--${__props.placement}`, unref(attrs).class]],
+				"is-open": __props.isOpen,
+				"max-height": "100dvh",
+				padding: __props.padding,
+				position: position.value,
+				purpose: __props.purpose,
+				style: unref(attrs).style,
+				width: __props.width,
+				onOpenChange: _cache[0] || (_cache[0] = ($event) => emit("openChange", $event))
+			}), {
+				default: withCtx(() => [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "default")]), _ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_2, [renderSlot(_ctx.$slots, "footer")])) : createCommentVNode("v-if", true)]),
+				_: 3
+			}, 16, [
+				"aria-label",
+				"class",
+				"is-open",
+				"padding",
+				"position",
+				"purpose",
+				"style",
+				"width"
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/Drawer/DrawerHeader.vue
+/**
+* 抽屉的标题行。布局、标题语义和关闭按钮的补偿边都复用 `DialogHeader`，
+* 这里只把关闭按钮的默认值和事件名换成抽屉的说法。
+*/
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxDrawerHeader",
+	__name: "DrawerHeader",
+	props: {
+		title: {},
+		subtitle: { default: void 0 },
+		hasCloseButton: {
+			type: Boolean,
+			default: void 0
+		},
+		closeButtonLabel: { default: void 0 }
+	},
+	emits: ["openChange"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const instance = getCurrentInstance();
+		const slots = useSlots();
+		/**
+		* 关闭按钮只在有人接关闭请求时出现：没人处理的按钮点了什么也不会发生。
+		* 显式传 `hasCloseButton` 时以传入值为准。监听函数在渲染时才看得到，所以放在 computed 里读。
+		*/
+		const showClose = computed(() => props.hasCloseButton ?? instance?.vnode?.props?.onOpenChange != null);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(_sfc_main$3, {
+				"close-button-label": __props.closeButtonLabel,
+				"has-close-button": showClose.value,
+				subtitle: __props.subtitle,
+				title: __props.title,
+				onOpenChange: _cache[0] || (_cache[0] = ($event) => emit("openChange", false))
+			}, createSlots({ _: 2 }, [
+				unref(slots).title ? {
+					name: "title",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "title")]),
+					key: "0"
+				} : void 0,
+				unref(slots).subtitle ? {
+					name: "subtitle",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "subtitle")]),
+					key: "1"
+				} : void 0,
+				unref(slots).startContent ? {
+					name: "startContent",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "startContent")]),
+					key: "2"
+				} : void 0,
+				unref(slots).endContent ? {
+					name: "endContent",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "endContent")]),
+					key: "3"
+				} : void 0
+			]), 1032, [
+				"close-button-label",
+				"has-close-button",
+				"subtitle",
+				"title"
+			]);
+		};
+	}
+});
+//#endregion
+export { _sfc_main$1 as n, _sfc_main as t };

package/dist/DropdownMenu/index.d.ts

@@ -1,3 +1,3 @@
-import { A as DropdownMenuRadioGroupSlots, C as DropdownMenuGroupSlots, D as DropdownMenuItemVariant, E as DropdownMenuItemSlots, F as DropdownMenuSubMenuProps, I as DropdownMenuSubMenuSlots, M as DropdownMenuRadioItemSlots, N as DropdownMenuSubMenuEmits, O as DropdownMenuRadioGroupEmits, P as DropdownMenuSubMenuPresentation, S as DropdownMenuGroupProps, T as DropdownMenuItemProps, _ as DropdownMenuSlots, a as DropdownMenuCheckboxData, b as DropdownMenuCheckboxItemProps, c as DropdownMenuEntry, d as DropdownMenuPresentation, f as DropdownMenuProps, g as DropdownMenuSize, h as DropdownMenuSection, i as DropdownMenuButtonProps, j as DropdownMenuRadioItemProps, k as DropdownMenuRadioGroupProps, l as DropdownMenuItemData, m as DropdownMenuRadioOptionData, n as _default$5, o as DropdownMenuDividerData, p as DropdownMenuRadioData, r as _default$1, s as DropdownMenuEmits, t as _default$6, u as DropdownMenuOption, v as DropdownMenuTriggerProps, w as DropdownMenuItemEmits, x as DropdownMenuCheckboxItemSlots, y as DropdownMenuCheckboxItemEmits } from "../DropdownMenuRadioItem.vue-D-VSfulY.js";
-import { a as _default, c as useDropdownMenuContext, i as _default$2, l as useDropdownMenuRadioGroup, n as _default$4, o as DropdownMenuContextValue, r as _default$3, s as DropdownMenuRadioGroupContext, t as _default$7 } from "../index-B1WWphal.js";
+import { A as DropdownMenuRadioGroupSlots, C as DropdownMenuGroupSlots, D as DropdownMenuItemVariant, E as DropdownMenuItemSlots, F as DropdownMenuSubMenuProps, I as DropdownMenuSubMenuSlots, M as DropdownMenuRadioItemSlots, N as DropdownMenuSubMenuEmits, O as DropdownMenuRadioGroupEmits, P as DropdownMenuSubMenuPresentation, S as DropdownMenuGroupProps, T as DropdownMenuItemProps, _ as DropdownMenuSlots, a as DropdownMenuCheckboxData, b as DropdownMenuCheckboxItemProps, c as DropdownMenuEntry, d as DropdownMenuPresentation, f as DropdownMenuProps, g as DropdownMenuSize, h as DropdownMenuSection, i as DropdownMenuButtonProps, j as DropdownMenuRadioItemProps, k as DropdownMenuRadioGroupProps, l as DropdownMenuItemData, m as DropdownMenuRadioOptionData, n as _default$5, o as DropdownMenuDividerData, p as DropdownMenuRadioData, r as _default$1, s as DropdownMenuEmits, t as _default$6, u as DropdownMenuOption, v as DropdownMenuTriggerProps, w as DropdownMenuItemEmits, x as DropdownMenuCheckboxItemSlots, y as DropdownMenuCheckboxItemEmits } from "../DropdownMenuRadioItem.vue-z0XU7pZS.js";
+import { a as _default, c as useDropdownMenuContext, i as _default$2, l as useDropdownMenuRadioGroup, n as _default$4, o as DropdownMenuContextValue, r as _default$3, s as DropdownMenuRadioGroupContext, t as _default$7 } from "../index-IvAfdGCC.js";
 export { _default as DropdownMenu, type DropdownMenuButtonProps, type DropdownMenuCheckboxData, _default$1 as DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemEmits, type DropdownMenuCheckboxItemProps, type DropdownMenuCheckboxItemSlots, type DropdownMenuContextValue, _default$2 as DropdownMenuDivider, type DropdownMenuDividerData, type DropdownMenuEmits, type DropdownMenuEntry, _default$3 as DropdownMenuGroup, type DropdownMenuGroupProps, type DropdownMenuGroupSlots, _default$4 as DropdownMenuItem, type DropdownMenuItemData, type DropdownMenuItemEmits, type DropdownMenuItemProps, type DropdownMenuItemSlots, type DropdownMenuItemVariant, type DropdownMenuOption, type DropdownMenuPresentation, type DropdownMenuProps, type DropdownMenuRadioData, _default$5 as DropdownMenuRadioGroup, type DropdownMenuRadioGroupContext, type DropdownMenuRadioGroupEmits, type DropdownMenuRadioGroupProps, type DropdownMenuRadioGroupSlots, _default$6 as DropdownMenuRadioItem, type DropdownMenuRadioItemProps, type DropdownMenuRadioItemSlots, type DropdownMenuRadioOptionData, type DropdownMenuSection, type DropdownMenuSize, type DropdownMenuSlots, _default$7 as DropdownMenuSubMenu, type DropdownMenuSubMenuEmits, type DropdownMenuSubMenuPresentation, type DropdownMenuSubMenuProps, type DropdownMenuSubMenuSlots, type DropdownMenuTriggerProps, useDropdownMenuContext, useDropdownMenuRadioGroup };

package/dist/DropdownMenu/index.js

@@ -1,4 +1,4 @@
 import { i as _sfc_main$1, n as _sfc_main$6, o as useDropdownMenuContext, r as _sfc_main$5, s as useDropdownMenuRadioGroup } from "../useMenuDrillIn-CjU_ZMhh.js";
-import { o as _sfc_main$3, r as _sfc_main$4, s as _sfc_main$2, t as _sfc_main } from "../DropdownMenu-DO9lDRvW.js";
-import { t as _sfc_main$7 } from "../DropdownMenu-C0QDklYy.js";
+import { c as _sfc_main$2, i as _sfc_main$4, s as _sfc_main$3, t as _sfc_main } from "../DropdownMenu-CxbpuT2r.js";
+import { t as _sfc_main$7 } from "../DropdownMenu-CtrztU4N.js";
 export { _sfc_main as DropdownMenu, _sfc_main$1 as DropdownMenuCheckboxItem, _sfc_main$2 as DropdownMenuDivider, _sfc_main$3 as DropdownMenuGroup, _sfc_main$4 as DropdownMenuItem, _sfc_main$5 as DropdownMenuRadioGroup, _sfc_main$6 as DropdownMenuRadioItem, _sfc_main$7 as DropdownMenuSubMenu, useDropdownMenuContext, useDropdownMenuRadioGroup };

package/dist/{DropdownMenu-C0QDklYy.js → DropdownMenu-CtrztU4N.js}

@@ -6,12 +6,12 @@ import { n as useOverflow } from "./useOverflow-VrwF5oek.js";
 import { t as _sfc_main$2 } from "./LayerContentBoundary-CvsKxwwm.js";
 import { t as _sfc_main$3 } from "./Item-DWMIjN8n.js";
 import { o as useDropdownMenuContext } from "./useMenuDrillIn-CjU_ZMhh.js";
-import { a as activateMenuItem, c as _sfc_main$4, i as MENU_ITEM_ROLES, n as useMenuFocus, r as _sfc_main$5 } from "./DropdownMenu-DO9lDRvW.js";
+import { a as MENU_ITEM_ROLES, i as _sfc_main$5, l as _sfc_main$4, n as useMenuRegions, o as activateMenuItem, r as useMenuFocus } from "./DropdownMenu-CxbpuT2r.js";
 import { n as clampInlineSize, r as isIntrinsicInlineSize } from "./inlineSize-BNe8wggI.js";
 import { t as _sfc_main$6 } from "./Spinner-B7xuy3ZA.js";
 import { t as useSubmenuMode } from "./useSubmenuMode-CZN9qrUo.js";
-import { t as useMenuHover } from "./useMenuHover-Djreu23i.js";
-import { Fragment, Teleport, computed, createBlock, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, mergeProps, nextTick, normalizeStyle, openBlock, ref, renderSlot, unref, useId, useSlots, vShow, watch, withCtx, withDirectives, withKeys, withModifiers } from "vue";
+import { t as useMenuHover } from "./useMenuHover-Ctmp4Xkh.js";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, mergeProps, nextTick, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, unref, useId, useSlots, vShow, watch, withCtx, withDirectives, withKeys, withModifiers } from "vue";
 import "../styles/dropdown-menu.css";
 //#region src/DropdownMenu/DropdownMenuSubMenu.vue
 const _hoisted_1 = {
@@ -19,8 +19,20 @@ const _hoisted_1 = {
 	class: "astryx-dropdown-menu-spinner",
 	"aria-hidden": "true"
 };
-const _hoisted_2 = ["aria-label", "hidden"];
-const _hoisted_3 = ["aria-label", "data-overflow"];
+const _hoisted_2 = [
+	"role",
+	"aria-label",
+	"aria-modal",
+	"hidden"
+];
+const _hoisted_3 = ["aria-label"];
+const _hoisted_4 = [
+	"role",
+	"aria-label",
+	"aria-modal",
+	"data-overflow"
+];
+const _hoisted_5 = ["aria-label"];
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	name: "AstryxDropdownMenuSubMenu",
 	inheritAttrs: false,
@@ -56,10 +68,32 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const menuSize = computed(() => menu?.menuSize.value ?? "md");
 		const density = computed(() => menuSize.value === "sm" ? "compact" : "balanced");
 		const hasStart = computed(() => slots.icon != null || props.icon != null);
+		const hasRegions = computed(() => slots.header != null || slots.footer != null);
+		const headerRef = ref(null);
+		const footerRef = ref(null);
+		const regionMenuRef = ref(null);
+		function setHeader(el) {
+			headerRef.value = el ?? null;
+		}
+		function setFooter(el) {
+			footerRef.value = el ?? null;
+		}
+		function setRegionMenu(el) {
+			regionMenuRef.value = el ?? null;
+		}
 		const stringLabel = computed(() => typeof props.label === "string" ? props.label : void 0);
 		const focus = useMenuFocus({ list: flyoutRef });
 		const drillFocus = useMenuFocus({ list: drillRef });
 		const hasOverflow = useOverflow(flyoutRef, flyoutOpen);
+		/** Tab 循环里的「菜单」那一站：有头尾时是里层的 `role="menu"`，否则就是整个飞出层。 */
+		const menuStop = computed(() => hasRegions.value ? regionMenuRef.value : flyoutRef.value);
+		const regions = useMenuRegions({
+			header: headerRef,
+			footer: footerRef,
+			menu: menuStop,
+			hasRegions,
+			closeMenu: () => closeFlyout(true)
+		});
 		const mode = useSubmenuMode({
 			drillIn: computed(() => menu?.drillIn.value),
 			presentation: computed(() => props.presentation),
@@ -99,7 +133,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			if (!drillFocus.focusFirst()) drillRef.value?.focus({ preventScroll: true });
 		}
 		async function openFlyout(options) {
-			if (props.isDisabled) return;
+			if (props.isDisabled || menu?.isOpen.value === false) return;
 			const skipAutoFocus = options?.skipAutoFocus === true;
 			if (isDrill.value) {
 				const wasOpen = drillOnStack.value;
@@ -114,19 +148,32 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			await nextTick();
 			focus.focusFirst();
 		}
+		/**
+		* 焦点回到触发行。行的 `focus()` 只会找里面的链接或按钮，子菜单这一行两者都没有，
+		* 所以直接聚焦行元素本身。
+		*/
+		function focusRowElement() {
+			rowRef.value?.focus();
+			nextTick(() => rowRef.value?.focus());
+		}
 		function closeFlyout(focusRow = true) {
 			if (isDrill.value) {
 				if (!mode.closeDrill()) return;
 				emit("openChange", false);
-				if (focusRow) rowComponent.value?.focus();
+				if (focusRow) focusRowElement();
 				return;
 			}
-			if (!flyoutOpen.value) return;
-			flyoutOpen.value = false;
-			emit("openChange", false);
-			if (focusRow) rowComponent.value?.focus();
+			if (flyoutOpen.value) {
+				flyoutOpen.value = false;
+				emit("openChange", false);
+			}
+			if (focusRow) focusRowElement();
 		}
 		function onDrillKeydown(event) {
+			if (event.key === "Tab" && hasRegions.value) {
+				regions.moveDialogTab(event);
+				return;
+			}
 			if (event.key === "Tab" && menu?.hasRegions.value) {
 				event.preventDefault();
 				event.stopPropagation();
@@ -152,6 +199,10 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			drillFocus.handleKeyDown(event);
 		}
 		function onFlyoutKeydown(event) {
+			if (event.key === "Tab" && hasRegions.value) {
+				regions.moveDialogTab(event);
+				return;
+			}
 			if (event.key === "Tab" && menu?.hasRegions.value) {
 				event.preventDefault();
 				event.stopPropagation();
@@ -198,7 +249,10 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		};
 		const hover = useMenuHover({
 			show: (options) => void openFlyout(options),
-			hide: () => closeFlyout(false),
+			hide: () => {
+				if (hasRegions.value && flyoutRef.value?.contains(document.activeElement)) return;
+				closeFlyout(false);
+			},
 			isOpen: flyoutOpen,
 			isEnabled: () => !props.isDisabled && !isDrill.value,
 			flyoutRef,
@@ -214,11 +268,22 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			}
 			hover.triggerProps.onClick(event);
 		}
+		/**
+		* 关闭时焦点还留在面板里（Escape、外部关闭都会这样），就交还给触发行：
+		* 否则焦点会落进一个已经隐藏的容器。
+		*/
+		watch(flyoutOpen, (open, wasOpen) => {
+			if (open || !wasOpen) return;
+			if (isDrill.value) return;
+			const active = document.activeElement;
+			if (active instanceof Node && flyoutRef.value?.contains(active)) focusRowElement();
+		}, { flush: "pre" });
 		useDismiss({
 			container: flyoutRef,
 			trigger: rowRef,
 			isEnabled: computed(() => flyoutOpen.value && !isDrill.value),
-			onDismiss: () => closeFlyout(false)
+			onDismiss: () => closeFlyout(false),
+			onEscape: () => closeFlyout(true)
 		});
 		useDismiss({
 			container: drillRef,
@@ -228,10 +293,12 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			}
 		});
 		watch(() => menu?.isOpen.value, (open) => {
-			if (!open) flyoutOpen.value = false;
+			if (open) return;
+			hover.cancelPending();
+			if (!isDrill.value) closeFlyout(false);
 		});
 		watch(drillOnStack, (onStack, wasOnStack) => {
-			if (wasOnStack === true && !onStack && menu?.isOpen.value) rowComponent.value?.focus();
+			if (wasOnStack === true && !onStack && menu?.isOpen.value) focusRowElement();
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock(Fragment, null, [createVNode(_sfc_main$3, mergeProps(_ctx.$attrs, {
@@ -239,7 +306,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				ref: rowComponent,
 				class: "astryx-dropdown-menu-item",
 				role: "menuitem",
-				"aria-haspopup": "menu",
+				"aria-haspopup": hasRegions.value ? "dialog" : "menu",
 				"aria-expanded": isShown.value,
 				"data-menu-size": menuSize.value,
 				"data-variant": "default",
@@ -285,6 +352,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					key: "2"
 				} : void 0
 			]), 1040, [
+				"aria-haspopup",
 				"aria-expanded",
 				"data-menu-size",
 				"density",
@@ -297,21 +365,51 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			]), drillHost.value ? (openBlock(), createBlock(Teleport, {
 				key: 0,
 				to: drillHost.value
-			}, [withDirectives(createElementVNode("div", {
+			}, [createCommentVNode(" eslint-disable-next-line vue-a11y/no-static-element-interactions -- 键盘事件在面板根上接住再分发给头部、菜单和尾部，交互元素仍是里面的行和控件。 "), withDirectives(createElementVNode("div", {
 				ref_key: "drillRef",
 				ref: drillRef,
-				class: "astryx-dropdown-menu-drill",
-				role: "menu",
+				class: normalizeClass(["astryx-dropdown-menu-drill", { "is-frame": hasRegions.value }]),
+				role: hasRegions.value ? "dialog" : "menu",
 				"aria-label": stringLabel.value,
+				"aria-modal": hasRegions.value ? "true" : void 0,
 				hidden: unref(drillIsTop) ? void 0 : true,
 				tabindex: "-1",
 				onKeydown: onDrillKeydown
 			}, [createVNode(_sfc_main$2, null, {
 				default: withCtx(() => [createVNode(_sfc_main$4, { value: nestedContext }, {
-					default: withCtx(() => [createVNode(_sfc_main$5, {
+					default: withCtx(() => [hasRegions.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+						createElementVNode("div", {
+							ref: setHeader,
+							class: "astryx-dropdown-menu-region",
+							onKeydown: _cache[3] || (_cache[3] = (...args) => unref(regions).onRegionKeydown && unref(regions).onRegionKeydown(...args))
+						}, [renderSlot(_ctx.$slots, "header")], 544),
+						createElementVNode("div", {
+							ref: setRegionMenu,
+							class: "astryx-dropdown-menu-region-menu",
+							"aria-label": stringLabel.value,
+							role: "menu",
+							tabindex: "-1"
+						}, [createVNode(_sfc_main$5, {
+							"has-close-on-select": false,
+							label: backLabel.value,
+							onClick: _cache[4] || (_cache[4] = ($event) => closeFlyout(true))
+						}, {
+							icon: withCtx(() => [createVNode(_sfc_main$1, {
+								color: "secondary",
+								icon: "chevronLeft",
+								size: "sm"
+							})]),
+							_: 1
+						}, 8, ["label"]), renderSlot(_ctx.$slots, "default")], 8, _hoisted_3),
+						createElementVNode("div", {
+							ref: setFooter,
+							class: "astryx-dropdown-menu-region",
+							onKeydown: _cache[5] || (_cache[5] = (...args) => unref(regions).onRegionKeydown && unref(regions).onRegionKeydown(...args))
+						}, [renderSlot(_ctx.$slots, "footer")], 544)
+					], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createVNode(_sfc_main$5, {
 						"has-close-on-select": false,
 						label: backLabel.value,
-						onClick: _cache[3] || (_cache[3] = ($event) => closeFlyout(true))
+						onClick: _cache[6] || (_cache[6] = ($event) => closeFlyout(true))
 					}, {
 						icon: withCtx(() => [createVNode(_sfc_main$1, {
 							color: "secondary",
@@ -319,32 +417,51 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 							size: "sm"
 						})]),
 						_: 1
-					}, 8, ["label"]), renderSlot(_ctx.$slots, "default")]),
+					}, 8, ["label"]), renderSlot(_ctx.$slots, "default")], 64))]),
 					_: 3
 				})]),
 				_: 3
-			})], 40, _hoisted_2), [[vShow, unref(drillOnStack)]])], 8, ["to"])) : (openBlock(), createBlock(Teleport, {
+			})], 42, _hoisted_2), [[vShow, unref(drillOnStack)]])], 8, ["to"])) : (openBlock(), createBlock(Teleport, {
 				key: 1,
 				to: unref(teleportTarget)
-			}, [withDirectives(createElementVNode("div", {
+			}, [createCommentVNode(" eslint-disable-next-line vue-a11y/no-static-element-interactions -- 键盘事件在面板根上接住再分发给头部、菜单和尾部，交互元素仍是里面的行和控件。 "), withDirectives(createElementVNode("div", {
 				ref_key: "flyoutRef",
 				ref: flyoutRef,
-				class: "astryx-dropdown-menu astryx-dropdown-submenu",
-				role: "menu",
+				class: normalizeClass(["astryx-dropdown-menu astryx-dropdown-submenu", { "is-frame": hasRegions.value }]),
+				role: hasRegions.value ? "dialog" : "menu",
 				"aria-label": stringLabel.value,
+				"aria-modal": hasRegions.value ? "true" : void 0,
 				"data-overflow": unref(hasOverflow) || void 0,
 				style: normalizeStyle(flyoutStyle.value),
 				tabindex: "-1",
 				onKeydown: onFlyoutKeydown,
-				onMouseenter: _cache[4] || (_cache[4] = (...args) => unref(hover).contentProps.onMouseenter && unref(hover).contentProps.onMouseenter(...args)),
-				onMouseleave: _cache[5] || (_cache[5] = (...args) => unref(hover).contentProps.onMouseleave && unref(hover).contentProps.onMouseleave(...args))
+				onMouseenter: _cache[9] || (_cache[9] = (...args) => unref(hover).contentProps.onMouseenter && unref(hover).contentProps.onMouseenter(...args)),
+				onMouseleave: _cache[10] || (_cache[10] = (...args) => unref(hover).contentProps.onMouseleave && unref(hover).contentProps.onMouseleave(...args))
 			}, [createVNode(_sfc_main$2, null, {
 				default: withCtx(() => [createVNode(_sfc_main$4, { value: nestedContext }, {
-					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+					default: withCtx(() => [hasRegions.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+						createElementVNode("div", {
+							ref: setHeader,
+							class: "astryx-dropdown-menu-region",
+							onKeydown: _cache[7] || (_cache[7] = (...args) => unref(regions).onRegionKeydown && unref(regions).onRegionKeydown(...args))
+						}, [renderSlot(_ctx.$slots, "header")], 544),
+						createElementVNode("div", {
+							ref: setRegionMenu,
+							class: "astryx-dropdown-menu-region-menu",
+							"aria-label": stringLabel.value,
+							role: "menu",
+							tabindex: "-1"
+						}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_5),
+						createElementVNode("div", {
+							ref: setFooter,
+							class: "astryx-dropdown-menu-region",
+							onKeydown: _cache[8] || (_cache[8] = (...args) => unref(regions).onRegionKeydown && unref(regions).onRegionKeydown(...args))
+						}, [renderSlot(_ctx.$slots, "footer")], 544)
+					], 64)) : renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 1)]),
 					_: 3
 				})]),
 				_: 3
-			})], 44, _hoisted_3), [[vShow, flyoutOpen.value]])], 8, ["to"]))], 64);
+			})], 46, _hoisted_4), [[vShow, flyoutOpen.value]])], 8, ["to"]))], 64);
 		};
 	}
 });

package/dist/{DropdownMenu-DO9lDRvW.js → DropdownMenu-CxbpuT2r.js}

@@ -11,7 +11,7 @@ import { n as useOverflow } from "./useOverflow-VrwF5oek.js";
 import { t as useTypeahead } from "./useTypeahead-BvtflkRk.js";
 import { t as _sfc_main$9 } from "./LayerContentBoundary-CvsKxwwm.js";
 import { t as useScrollbars } from "./useScrollbars-C2NJ6Qwq.js";
-import { t as _sfc_main$10 } from "./BottomSheet-B4sc3F1S.js";
+import { t as _sfc_main$10 } from "./BottomSheet-itRm1Yh5.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-CjU_ZMhh.js";
 import { n as clampInlineSize, r as isIntrinsicInlineSize, t as LAYER_MAX_INLINE_SIZE } from "./inlineSize-BNe8wggI.js";
@@ -1267,4 +1267,4 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 	}
 });
 //#endregion
-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 };
+export { MENU_ITEM_ROLES as a, _sfc_main$5 as c, _sfc_main$2 as i, _sfc_main$6 as l, useMenuRegions as n, activateMenuItem as o, useMenuFocus as r, _sfc_main$3 as s, _sfc_main as t };

package/dist/{DropdownMenuRadioItem.vue-D-VSfulY.d.ts → DropdownMenuRadioItem.vue-z0XU7pZS.d.ts}

@@ -133,6 +133,15 @@ interface DropdownMenuSubMenuEmits {
 interface DropdownMenuSubMenuSlots {
   /** The rows of the nested menu. */
   default?: () => VNodeChild;
+  /**
+   * 行内容上方、菜单之外的内容，例如筛选这些行的输入框。
+   * 有 header 或 footer 时，子菜单的面板变成以行为名的模态对话框：
+   * 行带 `aria-haspopup="dialog"`，Tab 在头部、行、尾部之间循环，
+   * Escape 回到行，指针离开时只要焦点还在里面就不关闭。
+   */
+  header?: () => VNodeChild;
+  /** 行内容下方、菜单之外的内容。规则和 header 相同。 */
+  footer?: () => VNodeChild;
   icon?: () => VNodeChild;
   label?: () => VNodeChild;
   description?: () => VNodeChild;

package/dist/EmptyState/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../EmptyState-QNsJMLv1.js";
+import { t as _sfc_main } from "../EmptyState-CM7cJ9fJ.js";
 export { _sfc_main as EmptyState };

package/dist/{EmptyState-QNsJMLv1.js → EmptyState-CM7cJ9fJ.js}

@@ -1,5 +1,5 @@
-import { t as _sfc_main$1 } from "./Heading-BzBunfN7.js";
-import { t as _sfc_main$2 } from "./Text-D5Cc7BMp.js";
+import { t as _sfc_main$1 } from "./Heading-Cdveyoqy.js";
+import { t as _sfc_main$2 } from "./Text-ukuKa6kX.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, renderSlot, toDisplayString, useTemplateRef, withCtx } from "vue";
 import "../styles/empty-state.css";
 //#region src/EmptyState/EmptyState.vue

package/dist/FileInput/index.d.ts

@@ -1,2 +1,2 @@
-import { _i as FileInputValue, di as _default, fi as FileInputEmits, gi as FileInputStatus, hi as FileInputSize, mi as FileInputProps, pi as FileInputMode } from "../index-B5cFQLav.js";
+import { _i as FileInputValue, di as _default, fi as FileInputEmits, gi as FileInputStatus, hi as FileInputSize, mi as FileInputProps, pi as FileInputMode } from "../index-CXdImpTj.js";
 export { _default as FileInput, type FileInputEmits, type FileInputMode, type FileInputProps, type FileInputSize, type FileInputStatus, type FileInputValue };

package/dist/Heading/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../Heading-BzBunfN7.js";
+import { t as _sfc_main } from "../Heading-Cdveyoqy.js";
 export { _sfc_main as Heading };

package/dist/{Heading-BzBunfN7.js → Heading-Cdveyoqy.js}

@@ -1,5 +1,5 @@
 import { n as useTruncation, t as truncatePlacement } from "./useTruncation-B5qXQzAP.js";
-import { t as _sfc_main$1 } from "./Tooltip-sAM8i1eO.js";
+import { t as _sfc_main$1 } from "./Tooltip-B0aQ9CKg.js";
 import { computed, createBlock, defineComponent, mergeProps, openBlock, renderSlot, resolveDynamicComponent, unref, useAttrs, withCtx } from "vue";
 import "../styles/heading.css";
 //#region src/Heading/Heading.vue

package/dist/HoverCard/index.js

@@ -1,2 +1,2 @@
-import { n as useHoverCard, t as _sfc_main } from "../HoverCard-BpJhT0sn.js";
+import { n as useHoverCard, t as _sfc_main } from "../HoverCard-C3zQizyS.js";
 export { _sfc_main as HoverCard, useHoverCard };