@astryx-vue/core 0.3.0 → 0.4.1

package/dist/{Dialog-FGHfDu5M.js → Dialog-fhyxB00e.js}

@@ -1,5 +1,8 @@
-import { n as useFocusTrap, t as useRestoreFocus } from "./useRestoreFocus-Djw9RUIf.js";
-import { t as useScrollLock } from "./scrollLock-BzIvIimL.js";
+import { r as resetLayerScopedContext } from "./scopedProvide-C-Df7c15.js";
+import { i as provideLayerMountTarget } from "./useLayerMountTarget-BmZyeKWE.js";
+import { n as useFocusTrap, t as useRestoreFocus } from "./useRestoreFocus-XEKs5-gp.js";
+import { t as useScrollLock } from "./scrollLock-C3aT4-0z.js";
+import { n as removeModalOutlet, t as addModalOutlet } from "./modalOutlet-CUOcrhIu.js";
 import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeStyle, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, useAttrs, useId, useTemplateRef, watch } from "vue";
 import "../styles/dialog.css";
 //#region src/Dialog/context.ts
@@ -59,6 +62,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const props = __props;
 		const emit = __emit;
 		const attrs = useAttrs();
+		resetLayerScopedContext();
 		const titleId = `astryx-dialog-title-${useId()}`;
 		const hasTitle = ref(false);
 		const isInlineRef = computed(() => props.isInline);
@@ -70,6 +74,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			}
 		});
 		const dialogRef = useTemplateRef("dialogRef");
+		const layerHostRef = ref(null);
+		provideLayerMountTarget(layerHostRef);
 		let triggerElement = null;
 		const isScrollLocked = ref(false);
 		useScrollLock(isScrollLocked);
@@ -140,6 +146,20 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			return dialogRef.value?.open ?? false;
 		});
 		const shouldRestoreFocus = computed(() => isDialogOpen.value);
+		let modalOutlet = null;
+		function attachModalOutlet(dialog) {
+			if (modalOutlet === dialog) return;
+			detachModalOutlet();
+			modalOutlet = dialog;
+			dialog.addEventListener("close", detachModalOutlet);
+			addModalOutlet(dialog);
+		}
+		function detachModalOutlet() {
+			if (modalOutlet == null) return;
+			modalOutlet.removeEventListener("close", detachModalOutlet);
+			removeModalOutlet(modalOutlet);
+			modalOutlet = null;
+		}
 		useFocusTrap({
 			container: dialogRef,
 			isEnabled: isDialogOpen,
@@ -160,12 +180,14 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			triggerElement = document.activeElement;
 			applyEntryDirection(dialog);
 			dialog.showModal();
+			attachModalOutlet(dialog);
 			lockScroll();
 		}
 		function closeDialog() {
 			if (props.isInline) return;
 			const dialog = dialogRef.value;
 			if (dialog?.open) dialog.close();
+			detachModalOutlet();
 			unlockScroll();
 		}
 		function onCancel(event) {
@@ -183,11 +205,12 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			if (props.isOpen) openDialog();
 		});
 		onBeforeUnmount(() => {
+			detachModalOutlet();
 			unlockScroll();
 		});
 		return (_ctx, _cache) => {
 			return __props.isInline ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [__props.isOpen ? (openBlock(), createElementBlock("div", mergeProps({ key: 0 }, rootAttrs(), {
-				class: ["astryx-dialog astryx-dialog--inline", { "astryx-dialog--fullscreen": isFullscreen.value }],
+				class: ["astryx-dialog astryx-dialog--inline astryx-layer", { "astryx-dialog--fullscreen": isFullscreen.value }],
 				"data-variant": __props.variant,
 				"data-padded": __props.padding == null ? void 0 : "",
 				"aria-labelledby": resolvedLabelledBy(),
@@ -199,7 +222,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				ref_key: "dialogRef",
 				ref: dialogRef
 			}, rootAttrs(), {
-				class: ["astryx-dialog", { "astryx-dialog--fullscreen": isFullscreen.value }],
+				class: ["astryx-dialog astryx-layer", { "astryx-dialog--fullscreen": isFullscreen.value }],
 				"data-variant": __props.variant,
 				"data-padded": __props.padding == null ? void 0 : "",
 				role: dialogRole.value,
@@ -211,7 +234,11 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			}), [createElementVNode("div", {
 				class: "astryx-dialog__inner",
 				style: normalizeStyle(innerStyle.value)
-			}, [renderSlot(_ctx.$slots, "default")], 4)], 16, _hoisted_2)], 2112));
+			}, [renderSlot(_ctx.$slots, "default")], 4), createElementVNode("div", {
+				ref_key: "layerHostRef",
+				ref: layerHostRef,
+				class: "astryx-dialog__layer-host"
+			}, null, 512)], 16, _hoisted_2)], 2112));
 		};
 	}
 });

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-Byar3h1e.js";
+import { i as DividerVariant, n as DividerOrientation, r as DividerProps, t as _default } from "../index-D05JGsT3.js";
 export { _default as Divider, type DividerOrientation, type DividerProps, type DividerVariant };

package/dist/Divider/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../Divider-BtwnL18I.js";
+import { t as _sfc_main } from "../Divider-mOZ6vIQw.js";
 export { _sfc_main as Divider };

package/dist/{Divider-BtwnL18I.js → Divider-mOZ6vIQw.js}

@@ -30,7 +30,11 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const attrs = useAttrs();
 		const slots = useSlots();
 		const labelId = `astryx-divider-label-${useId()}`;
-		const hasLabel = computed(() => Boolean(props.label) || Boolean(slots.label));
+		const hasLabel = computed(() => {
+			if (slots.label) return true;
+			if (typeof props.label === "number") return Number.isFinite(props.label);
+			return typeof props.label === "string" && props.label.length > 0;
+		});
 		const rootAttrs = computed(() => Object.fromEntries(Object.entries(attrs).filter(([key]) => key !== "aria-labelledby")));
 		const labelledBy = computed(() => {
 			const explicit = attrs["aria-labelledby"];

package/dist/DropdownMenu/index.d.ts

@@ -1,3 +1,3 @@
-import { A as DropdownMenuSize, C as DropdownMenuRadioGroupEmits, D as DropdownMenuRadioItemSlots, E as DropdownMenuRadioItemProps, F as DropdownMenuSubMenuSlots, I as DropdownMenuTriggerProps, M as DropdownMenuSubMenuEmits, N as DropdownMenuSubMenuPresentation, O as DropdownMenuRadioOptionData, P as DropdownMenuSubMenuProps, S as DropdownMenuRadioData, T as DropdownMenuRadioGroupSlots, _ as DropdownMenuItemSlots, a as DropdownMenuCheckboxData, b as DropdownMenuPresentation, c as DropdownMenuCheckboxItemSlots, d as DropdownMenuEntry, f as DropdownMenuGroupProps, g as DropdownMenuItemProps, h as DropdownMenuItemEmits, i as DropdownMenuButtonProps, j as DropdownMenuSlots, k as DropdownMenuSection, l as DropdownMenuDividerData, m as DropdownMenuItemData, n as _default$5, o as DropdownMenuCheckboxItemEmits, p as DropdownMenuGroupSlots, r as _default$1, s as DropdownMenuCheckboxItemProps, t as _default$6, u as DropdownMenuEmits, v as DropdownMenuItemVariant, w as DropdownMenuRadioGroupProps, x as DropdownMenuProps, y as DropdownMenuOption } from "../DropdownMenuRadioItem.vue-CXEURBcq.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-12QYAbiz.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-Qd-8Rg4Q.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-CRrSHbok.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-DzKGkTho.js";
-import { a as _sfc_main$2, i as _sfc_main$3, r as _sfc_main$4, t as _sfc_main } from "../DropdownMenu-DEb2dSSP.js";
-import { t as _sfc_main$7 } from "../DropdownMenu-CoOQVlRp.js";
+import { i as _sfc_main$1, n as _sfc_main$6, o as useDropdownMenuContext, r as _sfc_main$5, s as useDropdownMenuRadioGroup } from "../useMenuDrillIn-DhUnPvKs.js";
+import { o as _sfc_main$3, r as _sfc_main$4, s as _sfc_main$2, t as _sfc_main } from "../DropdownMenu-G-pWSiBk.js";
+import { t as _sfc_main$7 } from "../DropdownMenu-C6wBC18g.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-CoOQVlRp.js → DropdownMenu-C6wBC18g.js}

@@ -1,12 +1,17 @@
-import { n as useDismiss, t as usePositionedLayer } from "./usePositionedLayer-Cru9_00b.js";
-import { o as useAstryxMessages } from "./context-iABt_ueM.js";
-import { t as _sfc_main$1 } from "./Icon-bteSId7T.js";
-import { t as _sfc_main$2 } from "./Item-KhFKX9St.js";
-import { a as dropdownMenuContextKey, o as useDropdownMenuContext } from "./useMenuDrillIn-DzKGkTho.js";
-import { n as useMenuFocus, o as MENU_ITEM_ROLES, r as _sfc_main$3, s as activateMenuItem } from "./DropdownMenu-DEb2dSSP.js";
-import { t as _sfc_main$4 } from "./Spinner-9cYUCnDy.js";
+import { n as useDismiss, t as usePositionedLayer } from "./usePositionedLayer-B7cvG-_v.js";
+import { t as _sfc_main$1 } from "./Icon-KDnUyY7f.js";
+import { s as useAstryxMessages } from "./context-CM-cjGg_.js";
+import { a as isMenuPressActivation } from "./useMenuPress-8foxY8z4.js";
+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-DhUnPvKs.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-G-pWSiBk.js";
+import { n as clampInlineSize, r as isIntrinsicInlineSize } from "./inlineSize-BNe8wggI.js";
+import { t as _sfc_main$6 } from "./Spinner-BY8iQz--.js";
 import { t as useSubmenuMode } from "./useSubmenuMode-CZN9qrUo.js";
-import { Fragment, Teleport, computed, createBlock, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, mergeProps, nextTick, normalizeStyle, onBeforeUnmount, openBlock, provide, ref, renderSlot, unref, useId, useSlots, vShow, watch, withCtx, withDirectives, withKeys, withModifiers } from "vue";
+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 "../styles/dropdown-menu.css";
 //#region src/DropdownMenu/DropdownMenuSubMenu.vue
 const _hoisted_1 = {
@@ -15,6 +20,7 @@ const _hoisted_1 = {
 	"aria-hidden": "true"
 };
 const _hoisted_2 = ["aria-label", "hidden"];
+const _hoisted_3 = ["aria-label", "data-overflow"];
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	name: "AstryxDropdownMenuSubMenu",
 	inheritAttrs: false,
@@ -38,7 +44,6 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const INTRINSIC_SIZE = /^(?:auto|min-content|max-content|fit-content|fit-content\(.*\)|inherit|initial|unset|revert|revert-layer)$/i;
 		const slots = useSlots();
 		const messages = useAstryxMessages();
 		const menu = useDropdownMenuContext();
@@ -54,6 +59,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		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);
 		const mode = useSubmenuMode({
 			drillIn: computed(() => menu?.drillIn.value),
 			presentation: computed(() => props.presentation),
@@ -67,7 +73,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			const parent = menu?.menuLabel.value;
 			return parent != null && parent !== "" ? messages.value.dropdownMenu.backTo(parent) : messages.value.dropdownMenu.back;
 		});
-		const { position } = usePositionedLayer({
+		const { position, teleportTarget } = usePositionedLayer({
 			anchor: rowRef,
 			layer: flyoutRef,
 			isOpen: flyoutOpen,
@@ -83,44 +89,32 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			};
 			if (props.menuWidth == null) 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 drillHost = computed(() => isDrill.value ? menu?.drillIn.value.host ?? null : null);
-		let closeTimer = 0;
-		function cancelClose() {
-			if (closeTimer !== 0) window.clearTimeout(closeTimer);
-			closeTimer = 0;
-		}
-		function scheduleClose() {
-			if (isDrill.value) return;
-			cancelClose();
-			closeTimer = window.setTimeout(() => {
-				closeFlyout(false);
-			}, 120);
-		}
 		async function focusDrillFirst() {
 			await nextTick();
 			if (!drillFocus.focusFirst()) drillRef.value?.focus({ preventScroll: true });
 		}
-		async function openFlyout() {
+		async function openFlyout(options) {
 			if (props.isDisabled) return;
+			const skipAutoFocus = options?.skipAutoFocus === true;
 			if (isDrill.value) {
 				const wasOpen = drillOnStack.value;
 				mode.openDrill();
 				if (!wasOpen) emit("openChange", true);
-				await focusDrillFirst();
+				if (!skipAutoFocus) await focusDrillFirst();
 				return;
 			}
-			cancelClose();
 			if (!flyoutOpen.value) emit("openChange", true);
 			flyoutOpen.value = true;
+			if (skipAutoFocus) return;
 			await nextTick();
 			focus.focusFirst();
 		}
 		function closeFlyout(focusRow = true) {
-			cancelClose();
 			if (isDrill.value) {
 				if (!mode.closeDrill()) return;
 				emit("openChange", false);
@@ -137,7 +131,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				event.preventDefault();
 				event.stopPropagation();
 				closeFlyout(false);
-				menu.focusRegion(event.shiftKey ? "previous" : "next");
+				menu.moveDialogTab(event, true);
 				return;
 			}
 			if (event.key === "ArrowLeft" || event.key === "Escape") {
@@ -160,8 +154,9 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		function onFlyoutKeydown(event) {
 			if (event.key === "Tab" && menu?.hasRegions.value) {
 				event.preventDefault();
+				event.stopPropagation();
 				closeFlyout(false);
-				menu.focusRegion(event.shiftKey ? "previous" : "next");
+				menu.moveDialogTab(event, true);
 				return;
 			}
 			if (event.key === "ArrowLeft" || event.key === "Escape") {
@@ -188,18 +183,37 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			push: () => {},
 			viewStack: []
 		};
-		provide(dropdownMenuContextKey, {
+		const nestedContext = {
 			closeMenu: () => {
 				closeFlyout(false);
 				menu?.closeMenu();
 			},
 			drillIn: computed(() => menu?.drillIn.value ?? emptyDrill),
 			focusRegion: (direction) => menu?.focusRegion(direction) ?? false,
+			moveDialogTab: (event, fromFlyout) => menu?.moveDialogTab(event, fromFlyout),
 			hasRegions: computed(() => menu?.hasRegions.value ?? false),
 			isOpen: computed(() => (menu?.isOpen.value ?? true) && isShown.value),
 			menuLabel: computed(() => stringLabel.value ?? menu?.menuLabel.value),
 			menuSize
+		};
+		const hover = useMenuHover({
+			show: (options) => void openFlyout(options),
+			hide: () => closeFlyout(false),
+			isOpen: flyoutOpen,
+			isEnabled: () => !props.isDisabled && !isDrill.value,
+			flyoutRef,
+			ownsFocus: false
 		});
+		watch(rowRef, (element) => {
+			hover.setTriggerEl(element);
+		}, { immediate: true });
+		function onRowClick(event) {
+			if (isDrill.value) {
+				openFlyout({ skipAutoFocus: event.detail > 0 || isMenuPressActivation() });
+				return;
+			}
+			hover.triggerProps.onClick(event);
+		}
 		useDismiss({
 			container: flyoutRef,
 			trigger: rowRef,
@@ -219,9 +233,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		watch(drillOnStack, (onStack, wasOnStack) => {
 			if (wasOnStack === true && !onStack && menu?.isOpen.value) rowComponent.value?.focus();
 		});
-		onBeforeUnmount(cancelClose);
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock(Fragment, null, [createVNode(_sfc_main$2, mergeProps(_ctx.$attrs, {
+			return openBlock(), createElementBlock(Fragment, null, [createVNode(_sfc_main$3, mergeProps(_ctx.$attrs, {
 				ref_key: "rowComponent",
 				ref: rowComponent,
 				class: "astryx-dropdown-menu-item",
@@ -235,16 +248,16 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				"is-disabled": __props.isDisabled,
 				label: __props.label,
 				tabindex: __props.isDisabled ? void 0 : -1,
-				"on-click": openFlyout,
+				"on-click": onRowClick,
 				onKeydown: [
-					withKeys(withModifiers(openFlyout, ["prevent", "stop"]), ["right"]),
-					withKeys(withModifiers(openFlyout, ["prevent", "stop"]), ["enter"]),
-					withKeys(withModifiers(openFlyout, ["prevent", "stop"]), ["space"])
+					_cache[0] || (_cache[0] = withKeys(withModifiers(($event) => openFlyout(), ["prevent", "stop"]), ["right"])),
+					_cache[1] || (_cache[1] = withKeys(withModifiers(($event) => openFlyout(), ["prevent", "stop"]), ["enter"])),
+					_cache[2] || (_cache[2] = withKeys(withModifiers(($event) => openFlyout(), ["prevent", "stop"]), ["space"]))
 				],
-				onPointerenter: openFlyout,
-				onPointerleave: scheduleClose
+				onMouseenter: unref(hover).triggerProps.onMouseenter,
+				onMouseleave: unref(hover).triggerProps.onMouseleave
 			}), createSlots({
-				endContent: withCtx(() => [__props.hasSpinner ? (openBlock(), createElementBlock("span", _hoisted_1, [createVNode(_sfc_main$4, { size: "sm" })])) : (openBlock(), createBlock(_sfc_main$1, {
+				endContent: withCtx(() => [__props.hasSpinner ? (openBlock(), createElementBlock("span", _hoisted_1, [createVNode(_sfc_main$6, { size: "sm" })])) : (openBlock(), createBlock(_sfc_main$1, {
 					key: 1,
 					color: "secondary",
 					icon: "chevronRight",
@@ -279,7 +292,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				"is-disabled",
 				"label",
 				"tabindex",
-				"onKeydown"
+				"onMouseenter",
+				"onMouseleave"
 			]), drillHost.value ? (openBlock(), createBlock(Teleport, {
 				key: 0,
 				to: drillHost.value
@@ -292,31 +306,45 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				hidden: unref(drillIsTop) ? void 0 : true,
 				tabindex: "-1",
 				onKeydown: onDrillKeydown
-			}, [createVNode(_sfc_main$3, {
-				"has-close-on-select": false,
-				label: backLabel.value,
-				onClick: _cache[0] || (_cache[0] = ($event) => closeFlyout(true))
-			}, {
-				icon: withCtx(() => [createVNode(_sfc_main$1, {
-					color: "secondary",
-					icon: "chevronLeft",
-					size: "sm"
+			}, [createVNode(_sfc_main$2, null, {
+				default: withCtx(() => [createVNode(_sfc_main$4, { value: nestedContext }, {
+					default: withCtx(() => [createVNode(_sfc_main$5, {
+						"has-close-on-select": false,
+						label: backLabel.value,
+						onClick: _cache[3] || (_cache[3] = ($event) => closeFlyout(true))
+					}, {
+						icon: withCtx(() => [createVNode(_sfc_main$1, {
+							color: "secondary",
+							icon: "chevronLeft",
+							size: "sm"
+						})]),
+						_: 1
+					}, 8, ["label"]), renderSlot(_ctx.$slots, "default")]),
+					_: 3
 				})]),
-				_: 1
-			}, 8, ["label"]), renderSlot(_ctx.$slots, "default")], 40, _hoisted_2), [[vShow, unref(drillOnStack)]])], 8, ["to"])) : (openBlock(), createBlock(Teleport, {
+				_: 3
+			})], 40, _hoisted_2), [[vShow, unref(drillOnStack)]])], 8, ["to"])) : (openBlock(), createBlock(Teleport, {
 				key: 1,
-				to: "body"
+				to: unref(teleportTarget)
 			}, [withDirectives(createElementVNode("div", {
 				ref_key: "flyoutRef",
 				ref: flyoutRef,
 				class: "astryx-dropdown-menu astryx-dropdown-submenu",
 				role: "menu",
+				"aria-label": stringLabel.value,
+				"data-overflow": unref(hasOverflow) || void 0,
 				style: normalizeStyle(flyoutStyle.value),
 				tabindex: "-1",
 				onKeydown: onFlyoutKeydown,
-				onPointerenter: cancelClose,
-				onPointerleave: scheduleClose
-			}, [renderSlot(_ctx.$slots, "default")], 36), [[vShow, flyoutOpen.value]])]))], 64);
+				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))
+			}, [createVNode(_sfc_main$2, null, {
+				default: withCtx(() => [createVNode(_sfc_main$4, { value: nestedContext }, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+					_: 3
+				})]),
+				_: 3
+			})], 44, _hoisted_3), [[vShow, flyoutOpen.value]])], 8, ["to"]))], 64);
 		};
 	}
 });