@capra/core 1.5.0 → 1.5.1

package/README.md

@@ -4,6 +4,12 @@
 
 `@capra/core` publishes the foundational React components for the Capra design system, along with the package stylesheet entry point at `@capra/core/styles.css`.
 
+## Documentation
+
+Human-readable documentation is available at https://capra.cribl.io.
+
+LLM-readable documentation is available at https://capra.cribl.io/llms.txt.
+
 ## Install
 
 ```sh

package/dist/index.cjs

@@ -2937,20 +2937,74 @@ function createConfirmationModalOpener(appearance) {
 //#endregion
 //#region src/components/Drawer/Drawer.module.css
 var Drawer_module_default = {
-	"body": "capra-Drawer-module-wiZVBa-body",
-	"description": "capra-Drawer-module-wiZVBa-description",
-	"drawerInFromLeft": "capra-Drawer-module-wiZVBa-drawerInFromLeft",
-	"drawerInFromRight": "capra-Drawer-module-wiZVBa-drawerInFromRight",
-	"expandedTitleLayout": "capra-Drawer-module-wiZVBa-expandedTitleLayout",
-	"footer": "capra-Drawer-module-wiZVBa-footer",
-	"header": "capra-Drawer-module-wiZVBa-header",
-	"headerMain": "capra-Drawer-module-wiZVBa-headerMain",
-	"headerTrailing": "capra-Drawer-module-wiZVBa-headerTrailing",
-	"overlay": "capra-Drawer-module-wiZVBa-overlay",
-	"root": "capra-Drawer-module-wiZVBa-root",
-	"sheet": "capra-Drawer-module-wiZVBa-sheet"
+	"body": "capra-Drawer-module-H0eofa-body",
+	"description": "capra-Drawer-module-H0eofa-description",
+	"drawerInFromLeft": "capra-Drawer-module-H0eofa-drawerInFromLeft",
+	"drawerInFromRight": "capra-Drawer-module-H0eofa-drawerInFromRight",
+	"drawerOutToLeft": "capra-Drawer-module-H0eofa-drawerOutToLeft",
+	"drawerOutToRight": "capra-Drawer-module-H0eofa-drawerOutToRight",
+	"expandedTitleLayout": "capra-Drawer-module-H0eofa-expandedTitleLayout",
+	"footer": "capra-Drawer-module-H0eofa-footer",
+	"header": "capra-Drawer-module-H0eofa-header",
+	"headerMain": "capra-Drawer-module-H0eofa-headerMain",
+	"headerTrailing": "capra-Drawer-module-H0eofa-headerTrailing",
+	"overlay": "capra-Drawer-module-H0eofa-overlay",
+	"root": "capra-Drawer-module-H0eofa-root",
+	"sheet": "capra-Drawer-module-H0eofa-sheet"
 };
 //#endregion
+//#region src/components/Drawer/useDrawerExitAnimation.ts
+/** Matches `motion.duration.medium.2` — keep in sync with Drawer.module.css sheet animations. */
+const drawerAnimationMs = 300;
+/**
+* Keeps the drawer portal mounted through the close animation and unmounts after it finishes
+* (via `animationend` or a duration fallback timeout).
+*/
+function useDrawerExitAnimation(isOpen) {
+	const [isRendered, setIsRendered] = react$1.useState(isOpen);
+	const closeTimeoutRef = react$1.useRef(void 0);
+	const finishCloseAnimation = react$1.useCallback(() => {
+		if (isOpen) return;
+		if (closeTimeoutRef.current !== void 0) {
+			window.clearTimeout(closeTimeoutRef.current);
+			closeTimeoutRef.current = void 0;
+		}
+		setIsRendered(false);
+	}, [isOpen]);
+	react$1.useEffect(() => {
+		if (isOpen) {
+			if (closeTimeoutRef.current !== void 0) {
+				window.clearTimeout(closeTimeoutRef.current);
+				closeTimeoutRef.current = void 0;
+			}
+			setIsRendered(true);
+			return;
+		}
+		if (!isRendered) return;
+		if (typeof window === "undefined") {
+			setIsRendered(false);
+			return;
+		}
+		closeTimeoutRef.current = window.setTimeout(() => {
+			closeTimeoutRef.current = void 0;
+			setIsRendered(false);
+		}, drawerAnimationMs);
+		return () => {
+			if (closeTimeoutRef.current !== void 0) {
+				window.clearTimeout(closeTimeoutRef.current);
+				closeTimeoutRef.current = void 0;
+			}
+		};
+	}, [isOpen, isRendered]);
+	return {
+		isRendered,
+		onSheetAnimationEnd: react$1.useCallback((event) => {
+			if (event.target !== event.currentTarget || isOpen) return;
+			finishCloseAnimation();
+		}, [finishCloseAnimation, isOpen])
+	};
+}
+//#endregion
 //#region src/components/Drawer/Drawer.tsx
 const DrawerTitleContext = react.createContext(void 0);
 function cssSize(value) {
@@ -2958,11 +3012,6 @@ function cssSize(value) {
 	return typeof value === "number" ? `${value}px` : value;
 }
 const defaultWidth = 480;
-/** History state marker so we can sync `history.back()` when the drawer closes without a popstate. */
-const DRAWER_HISTORY_STATE = { __capraUiDrawer: 1 };
-function isDrawerHistoryState(state) {
-	return typeof state === "object" && state !== null && "__capraUiDrawer" in state && state.__capraUiDrawer === DRAWER_HISTORY_STATE.__capraUiDrawer;
-}
 function resolvePortalContainer(getContainer) {
 	if (typeof document === "undefined") return null;
 	if (getContainer === false || getContainer === void 0) return document.body;
@@ -2988,6 +3037,7 @@ function DrawerDescription({ children }) {
 }
 function DrawerInner({ isOpen = false, onClose, onOpenChange, placement = "right", width, title, footer, closable = true, modal = true, getContainer, FORCE__className, children, "aria-label": ariaLabel }) {
 	const isModal = modal !== false;
+	const { isRendered, onSheetAnimationEnd } = useDrawerExitAnimation(isOpen);
 	react.useEffect(() => {
 		onOpenChange?.(isOpen);
 	}, [isOpen, onOpenChange]);
@@ -2999,20 +3049,6 @@ function DrawerInner({ isOpen = false, onClose, onOpenChange, placement = "right
 	const requestClose = react.useCallback(() => {
 		onCloseRef.current?.();
 	}, []);
-	react.useEffect(() => {
-		if (!isOpen || typeof window === "undefined") return;
-		window.history.pushState(DRAWER_HISTORY_STATE, "", window.location.href);
-		let historyPushed = true;
-		const onPopState = () => {
-			historyPushed = false;
-			requestClose();
-		};
-		window.addEventListener("popstate", onPopState);
-		return () => {
-			window.removeEventListener("popstate", onPopState);
-			if (historyPushed && isDrawerHistoryState(window.history.state)) window.history.back();
-		};
-	}, [isOpen, requestClose]);
 	react.useEffect(() => {
 		if (!isOpen) return;
 		const onKeyDown = (e) => {
@@ -3035,24 +3071,11 @@ function DrawerInner({ isOpen = false, onClose, onOpenChange, placement = "right
 	const sheetVars = react.useMemo(() => ({ "--drawer-width": widthCss }), [widthCss]);
 	const titleId = react.useId();
 	const portalContainer = react.useMemo(() => resolvePortalContainer(getContainer), [getContainer]);
-	if (!isOpen) return null;
+	if (!isRendered) return null;
 	if (!portalContainer) return null;
 	const labelledBy = title != null ? titleId : void 0;
 	const dialogLabel = title != null ? void 0 : ariaLabel ?? "Drawer";
-	return (0, react_dom.createPortal)(/* @__PURE__ */ react.createElement("div", {
-		className: clsx(Drawer_module_default.root, FORCE__className),
-		"data-open": "true",
-		"data-modal": isModal ? "true" : "false"
-	}, isModal ? /* @__PURE__ */ react.createElement("div", {
-		"data-drawer-overlay": true,
-		className: Drawer_module_default.overlay,
-		"aria-hidden": isOpen ? void 0 : true,
-		onPointerDown: onOverlayPointerDown
-	}) : null, /* @__PURE__ */ react.createElement(react_aria.FocusScope, {
-		contain: isOpen && isModal,
-		autoFocus: isOpen && isModal,
-		restoreFocus: true
-	}, /* @__PURE__ */ react.createElement("div", {
+	const sheet = /* @__PURE__ */ react.createElement("div", {
 		className: Drawer_module_default.sheet,
 		style: sheetVars,
 		"data-placement": placement,
@@ -3061,15 +3084,30 @@ function DrawerInner({ isOpen = false, onClose, onOpenChange, placement = "right
 		"aria-hidden": isOpen ? void 0 : true,
 		"aria-label": isOpen ? dialogLabel : void 0,
 		"aria-labelledby": isOpen ? labelledBy : void 0,
-		tabIndex: isOpen && isModal ? -1 : void 0
+		tabIndex: isOpen && isModal ? -1 : void 0,
+		onAnimationEnd: onSheetAnimationEnd
 	}, (title != null || closable) && /* @__PURE__ */ react.createElement("header", { className: Drawer_module_default.header }, /* @__PURE__ */ react.createElement("div", { className: Drawer_module_default.headerMain }, title != null ? /* @__PURE__ */ react.createElement(DrawerTitleContext.Provider, { value: titleId }, typeof title === "string" ? /* @__PURE__ */ react.createElement(DrawerHeading, null, title) : title) : null), /* @__PURE__ */ react.createElement("div", { className: Drawer_module_default.headerTrailing }, closable ? /* @__PURE__ */ react.createElement(IconButton, {
 		variant: "tertiary",
 		appearance: "neutral",
 		"aria-label": "Close drawer",
 		size: "sm",
 		icon: _capra_icons.CloseOutlined,
-		onClick: requestClose
-	}) : null)), /* @__PURE__ */ react.createElement("div", { className: Drawer_module_default.body }, children), footer ? /* @__PURE__ */ react.createElement("footer", { className: Drawer_module_default.footer }, footer) : null))), portalContainer);
+		onClick: isOpen ? requestClose : void 0
+	}) : null)), /* @__PURE__ */ react.createElement("div", { className: Drawer_module_default.body }, children), footer ? /* @__PURE__ */ react.createElement("footer", { className: Drawer_module_default.footer }, footer) : null);
+	return (0, react_dom.createPortal)(/* @__PURE__ */ react.createElement("div", {
+		className: clsx(Drawer_module_default.root, FORCE__className),
+		"data-open": isOpen ? "true" : "false",
+		"data-modal": isModal ? "true" : "false"
+	}, isModal ? /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement("div", {
+		"data-drawer-overlay": true,
+		className: Drawer_module_default.overlay,
+		"aria-hidden": isOpen ? void 0 : true,
+		onPointerDown: isOpen ? onOverlayPointerDown : void 0
+	}), /* @__PURE__ */ react.createElement(react_aria.FocusScope, {
+		contain: true,
+		autoFocus: isOpen,
+		restoreFocus: true
+	}, sheet)) : sheet), portalContainer);
 }
 /**
 * A side sheet aligned with Capra design: supports **modal** (scrim + scroll lock + focus trap) and **non-modal**
@@ -3389,42 +3427,47 @@ var EmptyState_module_default = {
 };
 //#endregion
 //#region src/components/EmptyState/EmptyState.tsx
+function lazyLoad(importFn) {
+	return react.default.lazy(() => importFn().then((m) => {
+		return { default: m[Object.getOwnPropertyNames(m)[0]] };
+	}));
+}
 const ILLUSTRATIONS = {
 	EmptyFolder: {
-		light: react.default.lazy(() => import("@capra/icons/images").then((m) => ({ default: m.EmptyFolder }))),
-		dark: react.default.lazy(() => import("@capra/icons/images").then((m) => ({ default: m.EmptyFolderDark })))
+		light: lazyLoad(() => import("@capra/icons/esm/images/EmptyFolder")),
+		dark: lazyLoad(() => import("@capra/icons/esm/images/EmptyFolderDark"))
 	},
 	ArtSupplies: {
-		light: react.default.lazy(() => import("@capra/icons/images").then((m) => ({ default: m.ArtSupplies }))),
-		dark: react.default.lazy(() => import("@capra/icons/images").then((m) => ({ default: m.ArtSuppliesDark })))
+		light: lazyLoad(() => import("@capra/icons/esm/images/ArtSupplies")),
+		dark: lazyLoad(() => import("@capra/icons/esm/images/ArtSuppliesDark"))
 	},
 	Sandcastle: {
-		light: react.default.lazy(() => import("@capra/icons/images").then((m) => ({ default: m.Sandcastle }))),
-		dark: react.default.lazy(() => import("@capra/icons/images").then((m) => ({ default: m.SandcastleDark })))
+		light: lazyLoad(() => import("@capra/icons/esm/images/Sandcastle")),
+		dark: lazyLoad(() => import("@capra/icons/esm/images/SandcastleDark"))
 	},
 	EmptyBowl: {
-		light: react.default.lazy(() => import("@capra/icons/images").then((m) => ({ default: m.EmptyBowl }))),
-		dark: react.default.lazy(() => import("@capra/icons/images").then((m) => ({ default: m.EmptyBowl })))
+		light: lazyLoad(() => import("@capra/icons/esm/images/EmptyBowl")),
+		dark: lazyLoad(() => import("@capra/icons/esm/images/EmptyBowl"))
 	},
 	EmptySuitcase: {
-		light: react.default.lazy(() => import("@capra/icons/images").then((m) => ({ default: m.EmptySuitcase }))),
-		dark: react.default.lazy(() => import("@capra/icons/images").then((m) => ({ default: m.EmptySuitcaseDark })))
+		light: lazyLoad(() => import("@capra/icons/esm/images/EmptySuitcase")),
+		dark: lazyLoad(() => import("@capra/icons/esm/images/EmptySuitcaseDark"))
 	},
 	Envelope: {
-		light: react.default.lazy(() => import("@capra/icons/images").then((m) => ({ default: m.Envelope }))),
-		dark: react.default.lazy(() => import("@capra/icons/images").then((m) => ({ default: m.Envelope })))
+		light: lazyLoad(() => import("@capra/icons/esm/images/Envelope")),
+		dark: lazyLoad(() => import("@capra/icons/esm/images/Envelope"))
 	},
 	MissingSock: {
-		light: react.default.lazy(() => import("@capra/icons/images").then((m) => ({ default: m.MissingSock }))),
-		dark: react.default.lazy(() => import("@capra/icons/images").then((m) => ({ default: m.MissingSock })))
+		light: lazyLoad(() => import("@capra/icons/esm/images/MissingSock")),
+		dark: lazyLoad(() => import("@capra/icons/esm/images/MissingSock"))
 	},
 	PizzaBox: {
-		light: react.default.lazy(() => import("@capra/icons/images").then((m) => ({ default: m.PizzaBox }))),
-		dark: react.default.lazy(() => import("@capra/icons/images").then((m) => ({ default: m.PizzaBox })))
+		light: lazyLoad(() => import("@capra/icons/esm/images/PizzaBox")),
+		dark: lazyLoad(() => import("@capra/icons/esm/images/PizzaBox"))
 	},
 	PottedPlant: {
-		light: react.default.lazy(() => import("@capra/icons/images").then((m) => ({ default: m.PottedPlant }))),
-		dark: react.default.lazy(() => import("@capra/icons/images").then((m) => ({ default: m.PottedPlant })))
+		light: lazyLoad(() => import("@capra/icons/esm/images/PottedPlant")),
+		dark: lazyLoad(() => import("@capra/icons/esm/images/PottedPlant"))
 	}
 };
 /**
@@ -4295,7 +4338,39 @@ const MenuRootTriggerPressable = react.forwardRef(function MenuRootTriggerPressa
 	}, /* @__PURE__ */ react.createElement(react_aria_components.Pressable, null, children));
 });
 MenuRootTriggerPressable.displayName = "MenuRootTriggerPressable";
-const Menu = ({ trigger, children, contentProps, open, onOpenChange, itemHoverAppearance = "default", itemActiveAccentBar = true, itemActiveLabelSemibold = true, panelPadding = "default", popoverOffset = 0, FORCE__className: classNameOverride }) => {
+/**
+* Wraps the menu list in a focus scope while the overlay is open. Must render under {@link AriaMenuTrigger} so
+* {@link OverlayTriggerStateContext} resolves for uncontrolled menus.
+*
+* `contain` is enabled only after focus moves inside the panel so the trigger (outside this subtree) can still
+* receive Tab/Enter to open the menu and so programmatic focus from the trigger into the first item is not blocked.
+*/
+function MenuPanelFocusScope({ controlledOpen, children }) {
+	const overlayState = react.useContext(react_aria_components.OverlayTriggerStateContext);
+	const isOpen = controlledOpen !== void 0 ? controlledOpen : overlayState?.isOpen ?? false;
+	const rootRef = react.useRef(null);
+	const [focusInsidePanel, setFocusInsidePanel] = react.useState(false);
+	react.useLayoutEffect(() => {
+		if (!isOpen) setFocusInsidePanel(false);
+	}, [isOpen]);
+	const onFocusCapture = react.useCallback(() => {
+		if (isOpen) setFocusInsidePanel(true);
+	}, [isOpen]);
+	const onBlurCapture = react.useCallback((event) => {
+		const next = event.relatedTarget;
+		if (rootRef.current?.contains(next)) return;
+		setFocusInsidePanel(false);
+	}, []);
+	return /* @__PURE__ */ react.createElement("div", {
+		ref: rootRef,
+		onFocusCapture,
+		onBlurCapture
+	}, /* @__PURE__ */ react.createElement(react_aria.FocusScope, {
+		contain: isOpen && focusInsidePanel,
+		restoreFocus: true
+	}, children));
+}
+const Menu = ({ trigger, children, contentProps, open, onOpenChange, itemHoverAppearance = "default", itemActiveAccentBar = true, itemActiveLabelSemibold = true, panelPadding = "default", popoverOffset = 0, trapFocus = false, FORCE__className: classNameOverride }) => {
 	const sessionId = react.useId();
 	const menuPanel = /* @__PURE__ */ react.createElement(react_aria_components.Menu, {
 		className: clsx(Menu_module_default.menu, classNameOverride),
@@ -4307,11 +4382,12 @@ const Menu = ({ trigger, children, contentProps, open, onOpenChange, itemHoverAp
 			itemActiveLabelSemibold
 		})
 	}, /* @__PURE__ */ react.createElement(MenuSectionIndentContext.Provider, { value: false }, children));
+	const panelBody = trapFocus ? /* @__PURE__ */ react.createElement(MenuPanelFocusScope, { controlledOpen: open }, menuPanel) : menuPanel;
 	const wrappedPanel = contentProps ? /* @__PURE__ */ react.createElement("div", {
 		...contentProps,
 		[MENU_SESSION_DATA_ATTR]: sessionId,
 		className: contentProps.className
-	}, menuPanel) : /* @__PURE__ */ react.createElement("div", { [MENU_SESSION_DATA_ATTR]: sessionId }, menuPanel);
+	}, panelBody) : /* @__PURE__ */ react.createElement("div", { [MENU_SESSION_DATA_ATTR]: sessionId }, panelBody);
 	return /* @__PURE__ */ react.createElement(MenuSessionContext.Provider, { value: sessionId }, /* @__PURE__ */ react.createElement(react_aria_components.MenuTrigger, {
 		isOpen: open,
 		onOpenChange
@@ -4337,23 +4413,23 @@ const submenuPanelClassName = Menu_module_default.menu;
 //#endregion
 //#region src/components/TabNav/TabNav.module.css
 var TabNav_module_default = {
-	"dropdownIcon": "capra-TabNav-module-VtoGYa-dropdownIcon",
-	"extraContent": "capra-TabNav-module-VtoGYa-extraContent",
-	"indentSpacer": "capra-TabNav-module-VtoGYa-indentSpacer",
-	"panel": "capra-TabNav-module-VtoGYa-panel",
-	"root": "capra-TabNav-module-VtoGYa-root",
-	"subMenu": "capra-TabNav-module-VtoGYa-subMenu",
-	"subMenuItem": "capra-TabNav-module-VtoGYa-subMenuItem",
-	"subMenuItemActive": "capra-TabNav-module-VtoGYa-subMenuItemActive",
-	"subTab": "capra-TabNav-module-VtoGYa-subTab",
-	"subTabList": "capra-TabNav-module-VtoGYa-subTabList",
-	"subTabListItem": "capra-TabNav-module-VtoGYa-subTabListItem",
-	"tab": "capra-TabNav-module-VtoGYa-tab",
-	"tabBar": "capra-TabNav-module-VtoGYa-tabBar",
-	"tabGroup": "capra-TabNav-module-VtoGYa-tabGroup",
-	"tabIcon": "capra-TabNav-module-VtoGYa-tabIcon",
-	"tabLabel": "capra-TabNav-module-VtoGYa-tabLabel",
-	"tabList": "capra-TabNav-module-VtoGYa-tabList"
+	"dropdownIcon": "capra-TabNav-module-e0IbmW-dropdownIcon",
+	"extraContent": "capra-TabNav-module-e0IbmW-extraContent",
+	"indentSpacer": "capra-TabNav-module-e0IbmW-indentSpacer",
+	"panel": "capra-TabNav-module-e0IbmW-panel",
+	"root": "capra-TabNav-module-e0IbmW-root",
+	"subMenu": "capra-TabNav-module-e0IbmW-subMenu",
+	"subMenuItem": "capra-TabNav-module-e0IbmW-subMenuItem",
+	"subMenuItemActive": "capra-TabNav-module-e0IbmW-subMenuItemActive",
+	"subTab": "capra-TabNav-module-e0IbmW-subTab",
+	"subTabList": "capra-TabNav-module-e0IbmW-subTabList",
+	"subTabListItem": "capra-TabNav-module-e0IbmW-subTabListItem",
+	"tab": "capra-TabNav-module-e0IbmW-tab",
+	"tabBar": "capra-TabNav-module-e0IbmW-tabBar",
+	"tabGroup": "capra-TabNav-module-e0IbmW-tabGroup",
+	"tabIcon": "capra-TabNav-module-e0IbmW-tabIcon",
+	"tabLabel": "capra-TabNav-module-e0IbmW-tabLabel",
+	"tabList": "capra-TabNav-module-e0IbmW-tabList"
 };
 //#endregion
 //#region src/components/TabNav/TabNav.tsx
@@ -4373,7 +4449,27 @@ function optionalAriaLabelProps(source) {
 const TabNav = ({ activeKey, onTabClick, items, tabPlacement = "horizontal", centered = false, tabBarExtraSlot, wrap = true, FORCE__className: classNameOverride, "aria-label": ariaLabel = "Navigation", ...props }) => {
 	const [subMenuOpen, setSubMenuOpen] = react.useState({});
 	const hoverCloseTimeoutRef = react.useRef(null);
-	const pointerDownOnTriggerRef = react.useRef(false);
+	const pendingKeyboardFocusKeyRef = react.useRef(null);
+	const menuContentRefs = react.useRef({});
+	const getTriggerElement = react.useCallback((key) => {
+		const trigger = document.getElementById(`tabnav-${key}`);
+		return trigger instanceof HTMLElement ? trigger : null;
+	}, []);
+	const getEnabledMenuItems = react.useCallback((key) => {
+		const menu = menuContentRefs.current[key]?.querySelector("[role=\"menu\"]");
+		if (!(menu instanceof HTMLElement)) return [];
+		return Array.from(menu.querySelectorAll("[role=\"menuitem\"]")).filter((element) => element.getAttribute("aria-disabled") !== "true");
+	}, []);
+	const focusMenuItem = react.useCallback((key, direction) => {
+		const menuItems = getEnabledMenuItems(key);
+		const target = direction === "first" ? menuItems[0] : menuItems[menuItems.length - 1];
+		if (target) {
+			target.focus();
+			return true;
+		}
+		getTriggerElement(key)?.focus();
+		return false;
+	}, [getEnabledMenuItems, getTriggerElement]);
 	const openSubMenu = react.useCallback((key) => {
 		if (hoverCloseTimeoutRef.current) {
 			clearTimeout(hoverCloseTimeoutRef.current);
@@ -4416,22 +4512,101 @@ const TabNav = ({ activeKey, onTabClick, items, tabPlacement = "horizontal", cen
 			hoverCloseTimeoutRef.current = null;
 		}
 	}, []);
+	const closeAllSubMenus = react.useCallback(() => {
+		if (hoverCloseTimeoutRef.current) {
+			clearTimeout(hoverCloseTimeoutRef.current);
+			hoverCloseTimeoutRef.current = null;
+		}
+		pendingKeyboardFocusKeyRef.current = null;
+		setSubMenuOpen({});
+	}, []);
 	const [activeMainKey, activeSubKey] = react.useMemo(() => {
 		if (!activeKey) return ["", ""];
 		const idx = activeKey.indexOf(SUB_KEY_SEP);
 		if (idx >= 0) return [activeKey.slice(0, idx), activeKey.slice(idx + 2)];
 		return [String(activeKey), ""];
 	}, [activeKey]);
+	/** While a horizontal flyout is open, sibling tab controls use roving `tabIndex` so Tab cannot reach them. */
+	const horizontalFlyoutOpenKey = react.useMemo(() => {
+		if (tabPlacement !== "horizontal") return;
+		return items.find((i) => Boolean(i.subItems?.length && subMenuOpen[i.key]))?.key;
+	}, [
+		items,
+		subMenuOpen,
+		tabPlacement
+	]);
 	/** Expand vertical groups when the active route targets a sub-item. */
 	react.useEffect(() => {
-		if (!activeSubKey) return;
+		if (tabPlacement !== "vertical" || !activeSubKey) return;
 		items.forEach((item) => {
 			if (item.subItems?.some((s) => s.key === activeSubKey)) setSubMenuOpen((prev) => ({
 				...prev,
 				[item.key]: true
 			}));
 		});
-	}, [activeSubKey, items]);
+	}, [
+		activeSubKey,
+		items,
+		tabPlacement
+	]);
+	react.useEffect(() => {
+		const key = pendingKeyboardFocusKeyRef.current;
+		if (!key || !subMenuOpen[key] || tabPlacement !== "horizontal") return;
+		const menuContent = menuContentRefs.current[key];
+		const focusFirstMenuItem = () => {
+			const items = getEnabledMenuItems(key);
+			const target = items.find((element) => element.getAttribute("aria-current") !== "page") ?? items[0];
+			if (target) {
+				target.focus();
+				pendingKeyboardFocusKeyRef.current = null;
+				return true;
+			}
+			return false;
+		};
+		if (focusFirstMenuItem()) return;
+		if (!menuContent) return;
+		const observer = new MutationObserver(() => {
+			if (focusFirstMenuItem()) observer.disconnect();
+		});
+		observer.observe(menuContent, {
+			childList: true,
+			subtree: true
+		});
+		return () => {
+			observer.disconnect();
+		};
+	}, [
+		getEnabledMenuItems,
+		subMenuOpen,
+		tabPlacement
+	]);
+	const closeHorizontalSubMenuFromKeyboard = react.useCallback((key) => {
+		pendingKeyboardFocusKeyRef.current = null;
+		closeAllSubMenus();
+		getTriggerElement(key)?.focus();
+	}, [closeAllSubMenus, getTriggerElement]);
+	const handleOpenSubMenuTabKey = react.useCallback((event, key) => {
+		const menuItems = getEnabledMenuItems(key);
+		if (menuItems.length === 0) {
+			event.preventDefault();
+			event.stopPropagation();
+			getTriggerElement(key)?.focus();
+			return;
+		}
+		const activeElement = document.activeElement;
+		const currentIndex = activeElement instanceof HTMLElement ? menuItems.indexOf(activeElement) : -1;
+		event.preventDefault();
+		event.stopPropagation();
+		if (currentIndex === -1) {
+			focusMenuItem(key, event.shiftKey ? "last" : "first");
+			return;
+		}
+		menuItems[(currentIndex + (event.shiftKey ? -1 : 1) + menuItems.length) % menuItems.length]?.focus();
+	}, [
+		focusMenuItem,
+		getEnabledMenuItems,
+		getTriggerElement
+	]);
 	const handleTabClick = (key, event) => {
 		const item = items.find((i) => i.key === key);
 		if (item?.disabled) {
@@ -4444,9 +4619,40 @@ const TabNav = ({ activeKey, onTabClick, items, tabPlacement = "horizontal", cen
 	const handleKeyDown = (event, key) => {
 		const itemIndex = items.findIndex((i) => i.key === key);
 		if (itemIndex === -1) return;
+		const item = items[itemIndex];
+		const hasSubItems = Boolean(item?.subItems?.length);
 		let nextIndex = itemIndex;
 		const isHorizontal = tabPlacement === "horizontal";
 		const isVertical = tabPlacement === "vertical";
+		if (hasSubItems && isHorizontal && (event.key === "Enter" || event.key === " ")) {
+			event.preventDefault();
+			event.stopPropagation();
+			if (subMenuOpen[key]) {
+				pendingKeyboardFocusKeyRef.current = null;
+				closeSubMenu(key);
+			} else {
+				pendingKeyboardFocusKeyRef.current = key;
+				openSubMenu(key);
+			}
+			return;
+		}
+		if (hasSubItems && isHorizontal && event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			closeHorizontalSubMenuFromKeyboard(key);
+			return;
+		}
+		if (hasSubItems && isHorizontal && subMenuOpen[key] && event.key === "Tab") {
+			handleOpenSubMenuTabKey(event, key);
+			return;
+		}
+		if (hasSubItems && isHorizontal && subMenuOpen[key]) {
+			if (event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "Home" || event.key === "End") {
+				event.preventDefault();
+				event.stopPropagation();
+			}
+			return;
+		}
 		if (isHorizontal) {
 			if (event.key === "ArrowLeft") {
 				event.preventDefault();
@@ -4510,6 +4716,7 @@ const TabNav = ({ activeKey, onTabClick, items, tabPlacement = "horizontal", cen
 		const isSubMenuOpen = hasSubItems && Boolean(subMenuOpen[item.key]);
 		/** Only one `aria-current="page"` in the nav: parent tab when no child route; sub-items set it when a child is current. */
 		const ariaCurrentPage = item.key === activeMainKey && (!hasSubItems || !activeSubKey);
+		const computedTabIndex = tabPlacement === "horizontal" && horizontalFlyoutOpenKey != null ? !item.disabled && item.key === horizontalFlyoutOpenKey && hasSubItems ? 0 : -1 : void 0;
 		const commonTabProps = {
 			"data-tab-key": item.key,
 			"data-indent": item.indent || void 0,
@@ -4519,7 +4726,8 @@ const TabNav = ({ activeKey, onTabClick, items, tabPlacement = "horizontal", cen
 			"data-disabled": item.disabled || void 0,
 			id: `tabnav-${item.key}`,
 			className: TabNav_module_default.tab,
-			...optionalAriaLabelProps(item)
+			...optionalAriaLabelProps(item),
+			...computedTabIndex !== void 0 ? { tabIndex: computedTabIndex } : {}
 		};
 		if (hasSubItems && tabPlacement === "vertical") {
 			const expanded = Boolean(subMenuOpen[item.key]);
@@ -4613,46 +4821,53 @@ const TabNav = ({ activeKey, onTabClick, items, tabPlacement = "horizontal", cen
 			const trigger = /* @__PURE__ */ react.createElement("button", {
 				type: "button",
 				...commonTabProps,
+				"aria-expanded": isSubMenuOpen,
+				"aria-haspopup": "menu",
 				"aria-current": ariaCurrentPage ? "page" : void 0,
 				disabled: item.disabled,
 				onMouseEnter: () => openSubMenu(item.key),
 				onMouseLeave: () => scheduleCloseSubMenu(item.key),
-				onPointerDown: () => {
-					pointerDownOnTriggerRef.current = true;
-				},
-				onPointerUp: () => {
-					pointerDownOnTriggerRef.current = false;
-				},
-				onFocus: () => {
-					if (!pointerDownOnTriggerRef.current) openSubMenu(item.key);
-				},
 				onKeyDown: (e) => handleKeyDown(e, item.key)
 			}, renderTabContent(item));
 			return /* @__PURE__ */ react.createElement(Menu, {
 				key: item.key,
 				trigger,
+				trapFocus: true,
 				itemHoverAppearance: "accent",
 				itemActiveAccentBar: false,
 				itemActiveLabelSemibold: false,
 				panelPadding: "none",
 				popoverOffset: 1,
 				open: subMenuOpen[item.key],
-				onOpenChange: (open) => setSubMenuOpen((prev) => ({
-					...prev,
-					[item.key]: open
-				})),
+				onOpenChange: (open) => {
+					if (open) {
+						openSubMenu(item.key);
+						return;
+					}
+					pendingKeyboardFocusKeyRef.current = null;
+					closeSubMenu(item.key);
+				},
 				contentProps: {
+					ref: (node) => {
+						menuContentRefs.current[item.key] = node;
+					},
 					onMouseEnter: () => {
 						cancelScheduledClose();
 						openSubMenu(item.key);
 					},
-					onMouseLeave: () => closeSubMenu(item.key)
+					onMouseLeave: () => closeSubMenu(item.key),
+					onKeyDownCapture: (event) => {
+						if (event.key === "Escape") {
+							event.preventDefault();
+							event.stopPropagation();
+							closeHorizontalSubMenuFromKeyboard(item.key);
+							return;
+						}
+						if (event.key === "Tab") handleOpenSubMenuTabKey(event, item.key);
+					}
 				}
 			}, item.subItems.map((sub) => {
-				const closeMenu = () => setSubMenuOpen((prev) => ({
-					...prev,
-					[item.key]: false
-				}));
+				const closeMenu = () => closeAllSubMenus();
 				return /* @__PURE__ */ react.createElement(Menu.Item, {
 					key: sub.key,
 					label: sub.name,
@@ -4681,7 +4896,7 @@ const TabNav = ({ activeKey, onTabClick, items, tabPlacement = "horizontal", cen
 			role: "link",
 			"aria-disabled": item.disabled,
 			"aria-current": ariaCurrentPage ? "page" : void 0,
-			tabIndex: 0,
+			tabIndex: item.disabled ? -1 : computedTabIndex ?? 0,
 			onKeyDown: (e) => {
 				if (e.key === "Enter" || e.key === " ") {
 					e.preventDefault();
@@ -4749,11 +4964,13 @@ var Tooltip_module_default = {
 };
 //#endregion
 //#region src/components/Tooltip/Tooltip.tsx
+const TOOLTIP_HOVER_SHOW_DELAY_MS = 500;
 /**
 * A component to display additional information when hovering or focusing on an interactive element.
 */
 function Tooltip({ children, title, shortcut, getContainer, placement = "bottom", isDisabled = false, FORCE__className: classNameOverride, ...props }) {
 	return /* @__PURE__ */ react.createElement(react_aria_components.TooltipTrigger, {
+		delay: TOOLTIP_HOVER_SHOW_DELAY_MS,
 		isDisabled,
 		shouldCloseOnPress: false
 	}, children, /* @__PURE__ */ react.createElement(react_aria.UNSAFE_PortalProvider, { getContainer }, /* @__PURE__ */ react.createElement(react_aria_components.Tooltip, {