@lumx/react 4.17.1-alpha.2 → 4.17.1-alpha.3

package/_internal/packages/lumx-core/src/js/components/List/ListItemAction.js

@@ -0,0 +1,36 @@
+import { actionArea } from "../../utils/classNames/action-area/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { RawClickable } from "../RawClickable/index.js";
+//#region ../lumx-core/src/js/components/List/ListItemAction.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "ListItemAction";
+/**
+* Component classname (used by action area CSS pattern).
+*/
+var CLASSNAME = "lumx-action-area__action";
+var DEFAULT_PROPS = {};
+/**
+* ListItemAction component.
+*
+* Renders a button or link with action area classes.
+* When placed as a child of ListItem, it activates the action area pattern:
+* the entire list item becomes visually clickable, while other interactive
+* elements (in `before`/`after` slots) remain independently clickable.
+*/
+var ListItemAction = (props) => {
+	const { children, className, as: Element = "button", handleClick, ...forwardedProps } = props;
+	return RawClickable({
+		as: Element,
+		...forwardedProps,
+		className: import_classnames.default(className, actionArea.action({
+			"has-overlay": true,
+			"focus-inset": true
+		})),
+		handleClick,
+		children
+	});
+};
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, ListItemAction };

package/_internal/packages/lumx-core/src/js/components/List/ListSection.d.ts

@@ -0,0 +1,27 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+import { TextProps } from "../Text/index.js";
+
+//#region ../lumx-core/src/js/components/List/ListSection.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface ListSectionProps extends HasClassName {
+  /** Section label displayed as the group title. Accepts a plain string or custom JSX content. */
+  label?: string | JSXElement;
+  /** Section icon */
+  icon?: string;
+  /** List items (should be ListItem, ListDivider, etc.). */
+  children: JSXElement;
+  /** Items wrapper forwarded props */
+  itemsWrapperProps?: Record<string, any>;
+  /** ID for the label element (used for aria-labelledby). */
+  id: string;
+  /** ref to the root element */
+  ref?: CommonRef;
+  /** Text component to use for rendering the label */
+  Text: (props: TextProps & Record<string, any>) => any;
+}
+//#endregion
+export { ListSectionProps };

package/_internal/packages/lumx-core/src/js/components/List/ListSection.js

@@ -0,0 +1,51 @@
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { Icon } from "../Icon/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/List/ListSection.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "ListSection";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-list-section";
+var { block, element } = bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {};
+/**
+* ListSection component.
+*
+* @param  props Component props.
+* @return JSX element.
+*/
+var ListSection = (props) => {
+	const { children, className, label, icon, itemsWrapperProps, id, ref, Text, ...forwardedProps } = props;
+	const labelId = `${id}-label`;
+	const hasHeader = !!label;
+	return /* @__PURE__ */ jsxs("li", {
+		ref,
+		...forwardedProps,
+		className: import_classnames.default(className, block()),
+		children: [hasHeader && /* @__PURE__ */ jsxs(Text, {
+			as: "p",
+			typography: "overline",
+			className: element("title"),
+			id: labelId,
+			children: [icon && Icon({ icon }), label]
+		}), /* @__PURE__ */ jsx("ul", {
+			...itemsWrapperProps,
+			className: element("items"),
+			"aria-labelledby": hasHeader ? labelId : void 0,
+			children
+		})]
+	});
+};
+ListSection.displayName = COMPONENT_NAME;
+ListSection.className = CLASSNAME;
+ListSection.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, ListSection };

package/_internal/packages/lumx-core/src/js/components/List/index.d.ts

@@ -0,0 +1,20 @@
+import { Size } from "../../constants/enums/index.js";
+import { HasClassName } from "../../types/HasClassName.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/List/index.d.ts
+/** List item padding size. */
+type ListItemPadding = Extract<Size, 'big' | 'huge'>;
+/**
+ * Defines the props of the component.
+ */
+interface ListProps extends HasClassName {
+  /** List content (should be ListItem, ListDivider, etc.). */
+  children?: JSXElement;
+  /** Item padding size. */
+  itemPadding?: ListItemPadding;
+  /** ref to the root element */
+  ref?: CommonRef;
+}
+//#endregion
+export { ListProps };

package/_internal/packages/lumx-core/src/js/components/List/index.js

@@ -0,0 +1,37 @@
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { jsx } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/List/index.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "List";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-list";
+var { block } = bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {};
+/**
+* List component.
+*
+* @param  props Component props.
+* @return JSX element.
+*/
+var List = (props) => {
+	const { children, className, itemPadding, ref, ...forwardedProps } = props;
+	return /* @__PURE__ */ jsx("ul", {
+		...forwardedProps,
+		className: import_classnames.default(className, block({ [`item-padding-${itemPadding}`]: Boolean(itemPadding) })),
+		ref,
+		children
+	});
+};
+List.displayName = COMPONENT_NAME;
+List.className = CLASSNAME;
+List.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, List };

package/_internal/packages/lumx-core/src/js/components/Menu/MenuButton.d.ts

@@ -0,0 +1,28 @@
+import { JSXElement } from "../../types/JSXElement.js";
+//#region ../lumx-core/src/js/components/Menu/MenuButton.d.ts
+type MenuButtonVariant = 'button' | 'icon-button' | 'chip' | 'link';
+/** ARIA keys set by MenuButton on the trigger — omitted from variant component props. */
+type MenuButtonAriaKeys = 'aria-haspopup' | 'aria-controls' | 'aria-expanded';
+/** Per-variant keys internally managed by MenuButton — omitted from variant component props. */
+type MenuButtonVariantsInternalKeys = {
+  button: MenuButtonAriaKeys;
+  'icon-button': MenuButtonAriaKeys;
+  chip: MenuButtonAriaKeys | 'isClickable';
+  link: MenuButtonAriaKeys | 'href' | 'linkAs';
+};
+/** Discriminated union of MenuButton props across all trigger variants. */
+type MenuButtonVariantsProps<TBase, TVariantProps extends Record<MenuButtonVariant, any>> = { [V in MenuButtonVariant]: TBase & (V extends 'button' ? {
+  variant?: V;
+} : {
+  variant: V;
+}) & Omit<TVariantProps[V], MenuButtonVariantsInternalKeys[V] | keyof TBase> }[MenuButtonVariant];
+interface MenuButtonProps {
+  variant?: MenuButtonVariant;
+  label?: JSXElement;
+  children?: JSXElement;
+  triggerProps?: Record<string, any>;
+  popoverProps?: Record<string, any>;
+  onOpen?: (isOpen: boolean) => void;
+}
+//#endregion
+export { MenuButtonProps, MenuButtonVariantsProps };

package/_internal/packages/lumx-core/src/js/components/Menu/MenuButton.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { mdiDotsVertical } from "@lumx/icons/esm/dots-vertical.js";
+//#region ../lumx-core/src/js/components/Menu/MenuButton.tsx
+var DEFAULT_PROPS = { variant: "button" };
+var COMPONENT_NAME = "MenuButton";
+/** Menu button core template (composition of menu provider, trigger, popover and list) */
+var MenuButton = (props, { MenuProvider, MenuTrigger, MenuPopover, MenuList }) => {
+	const { label, children, triggerProps, popoverProps, onOpen, variant } = props;
+	const extraTriggerProps = {};
+	if (variant === "chip") extraTriggerProps.isClickable = true;
+	let triggerChildren;
+	if (variant === "icon-button") {
+		extraTriggerProps.label = label;
+		if (!triggerProps?.icon) extraTriggerProps.icon = mdiDotsVertical;
+	} else triggerChildren = label;
+	return /* @__PURE__ */ jsxs(MenuProvider, {
+		onOpen,
+		children: [/* @__PURE__ */ jsx(MenuTrigger, {
+			...triggerProps,
+			...extraTriggerProps,
+			children: triggerChildren
+		}), /* @__PURE__ */ jsx(MenuPopover, {
+			...popoverProps,
+			children: /* @__PURE__ */ jsx(MenuList, { children })
+		})]
+	});
+};
+//#endregion
+export { COMPONENT_NAME, DEFAULT_PROPS, MenuButton };

package/_internal/packages/lumx-core/src/js/components/Menu/MenuItem.d.ts

@@ -0,0 +1,30 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { LumxClassName } from "../../types/LumxClassName.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/Menu/MenuItem.d.ts
+/** MenuItem props. */
+interface MenuItemProps extends HasClassName {
+  /** Item label content. */
+  children?: JSXElement;
+  /** Content rendered before the label (e.g. an icon). */
+  before?: JSXElement;
+  /** Content rendered after the label (e.g. a shortcut hint). */
+  after?: JSXElement;
+  /** Whether the item is disabled. Skipped by Tab and arrow nav. */
+  isDisabled?: boolean;
+  /** Click handler for the action element. */
+  handleClick?(event: any): void;
+  /** Extra props forwarded to the inner action element (e.g. link props when `as="a"`). */
+  actionProps?: Record<string, any>;
+  /** ref to the inner action element (the focusable `<button>` / `<a>`). */
+  actionRef?: CommonRef;
+  /** ref to the root `<li>` element. */
+  ref?: CommonRef;
+}
+/** Props overridden by framework wrappers. */
+type MenuItemPropsToOverride = 'before' | 'after' | 'children' | 'handleClick' | 'actionProps' | 'actionRef';
+declare const COMPONENT_NAME = "MenuItem";
+declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, MenuItemProps, MenuItemPropsToOverride };

package/_internal/packages/lumx-core/src/js/components/Menu/MenuItem.js

@@ -0,0 +1,34 @@
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { ListItem } from "../List/ListItem.js";
+import { ListItemAction } from "../List/ListItemAction.js";
+//#region ../lumx-core/src/js/components/Menu/MenuItem.tsx
+var COMPONENT_NAME = "MenuItem";
+var CLASSNAME = "lumx-menu-item";
+var { block, element } = bem(CLASSNAME);
+/** MenuItem core template. Renders a `ListItem` with a `ListItemAction`. */
+var MenuItem = (props) => {
+	const { children, className, before, after, isDisabled, handleClick, actionProps, actionRef, ref, ...rest } = props;
+	const actionElement = ListItemAction({
+		as: "button",
+		type: "button",
+		...actionProps,
+		ref: actionRef,
+		className: element("action"),
+		handleClick,
+		"data-menu-item": "",
+		"aria-disabled": isDisabled ? "true" : void 0,
+		children
+	});
+	return ListItem({
+		ref,
+		size: "tiny",
+		...rest,
+		className: import_classnames.default(className, block()),
+		before,
+		after,
+		children: actionElement
+	});
+};
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, MenuItem };

package/_internal/packages/lumx-core/src/js/components/Menu/MenuList.js

@@ -0,0 +1,20 @@
+import { import_classnames } from "../../utils/classNames/index.js";
+import { List } from "../List/index.js";
+//#region ../lumx-core/src/js/components/Menu/MenuList.tsx
+var COMPONENT_NAME = "Menu";
+var CLASSNAME = "lumx-menu";
+/** MenuList core template. Wraps `List` with menu-specific class and ARIA labelling. */
+var MenuList = (props) => {
+	const { "aria-labelledby": ariaLabelledby, children, className, id, ref, ...rest } = props;
+	return List({
+		...rest,
+		ref,
+		id,
+		className: import_classnames.default(className, CLASSNAME),
+		itemPadding: "big",
+		"aria-labelledby": ariaLabelledby,
+		children
+	});
+};
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, MenuList };

package/_internal/packages/lumx-core/src/js/components/Menu/MenuPopover.d.ts

@@ -0,0 +1,12 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { PopoverProps } from "../Popover/index.js";
+
+//#region ../lumx-core/src/js/components/Menu/MenuPopover.d.ts
+/** MenuPopover props. */
+interface MenuPopoverProps extends HasClassName, Pick<PopoverProps, 'placement' | 'anchorRef' | 'isOpen' | 'handleClose'> {
+  /** Popover content (a `Menu`). */
+  children?: JSXElement;
+}
+//#endregion
+export { MenuPopoverProps };

package/_internal/packages/lumx-core/src/js/components/Menu/MenuPopover.js

@@ -0,0 +1,32 @@
+import { bem } from "../../utils/classNames/bem/index.js";
+import { jsx } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/Menu/MenuPopover.tsx
+var COMPONENT_NAME = "MenuPopover";
+var CLASSNAME = "lumx-menu-popover";
+var { block, element } = bem(CLASSNAME);
+/** MenuPopover core template. Renders a `Popover` with menu-friendly defaults. */
+var MenuPopover = (props, { Popover, FlexBox }) => {
+	const { children, className, isOpen, placement = "bottom-start", anchorRef, handleClose, ...forwardedProps } = props;
+	return /* @__PURE__ */ jsx(Popover, {
+		...forwardedProps,
+		placement,
+		anchorRef,
+		isOpen,
+		onClose: handleClose,
+		closeOnClickAway: true,
+		closeOnEscape: true,
+		usePortal: false,
+		focusAnchorOnClose: true,
+		withFocusTrap: false,
+		closeMode: "hide",
+		fitToAnchorWidth: false,
+		className: block([className]),
+		children: /* @__PURE__ */ jsx(FlexBox, {
+			orientation: "vertical",
+			className: element("scroll"),
+			children
+		})
+	});
+};
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, MenuPopover };

package/_internal/packages/lumx-core/src/js/components/Menu/MenuTrigger.js

@@ -0,0 +1,20 @@
+import { import_classnames } from "../../utils/classNames/index.js";
+import { jsx } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/components/Menu/MenuTrigger.tsx
+var COMPONENT_NAME = "MenuTrigger";
+var CLASSNAME = "lumx-menu-trigger";
+/** MenuTrigger core template. Renders `Trigger` with disclosure ARIA attributes. */
+var MenuTrigger = (props, { Trigger }) => {
+	const { children, className, menuId, isOpen, ref, ...forwardedProps } = props;
+	return /* @__PURE__ */ jsx(Trigger, {
+		ref,
+		...forwardedProps,
+		className: import_classnames.default(className, CLASSNAME),
+		"aria-haspopup": "true",
+		"aria-controls": menuId,
+		"aria-expanded": isOpen ? "true" : "false",
+		children
+	});
+};
+//#endregion
+export { CLASSNAME, COMPONENT_NAME, MenuTrigger };

package/_internal/packages/lumx-core/src/js/components/Menu/setupMenu.js

@@ -0,0 +1,256 @@
+import { createSelectorTreeWalker } from "../../utils/browser/createSelectorTreeWalker.js";
+import { createListFocusNavigation } from "../../utils/focusNavigation/createListFocusNavigation.js";
+import { createTypeahead } from "../../utils/typeahead/index.js";
+import { isPrintableKey } from "../../utils/browser/isPrintableKey.js";
+import { TABBABLE_ELEMENTS_SELECTOR } from "../../utils/focus/constants.js";
+import { MENU_ITEM_SELECTOR, getItemText, getItems } from "./utils.js";
+//#region ../lumx-core/src/js/components/Menu/setupMenu.ts
+/**
+* Find and focus the next sequential focusable element after the given trigger
+* in document tab order. Used by Tab-at-last-item to move focus forward past
+* the (now-closed) menu.
+*/
+function moveFocusAfterTrigger(trigger) {
+	const allFocusable = Array.from(document.querySelectorAll(TABBABLE_ELEMENTS_SELECTOR)).filter((el) => !el.matches("[hidden], [tabindex=\"-1\"], [disabled]:not([disabled=\"false\"])") && el.tabIndex >= 0);
+	const triggerIdx = allFocusable.indexOf(trigger);
+	if (triggerIdx === -1) return;
+	allFocusable[triggerIdx + 1]?.focus();
+}
+/**
+* Set up a disclosure-pattern menu handle.
+*
+* The trigger is registered separately via {@link MenuHandle.registerTrigger}
+* once the trigger mounts. The menu container is registered separately via
+* {@link MenuHandle.registerMenu} once on mount — the popover uses
+* `closeMode="hide"` so the `<ul>` stays in the DOM at all times.
+*
+* IMPORTANT: this is the **disclosure widget** pattern, NOT WAI-ARIA's
+* `role="menu"`. Items are native `<button>` / `<a>` elements with `tabindex="0"`,
+* so screen readers announce them naturally and Tab navigates between them in
+* DOM order. There is no focus trap.
+*
+* @param options Options (menuId for `aria-controls`).
+* @returns A {@link MenuHandle} for interacting with the menu.
+*/
+function setupMenu(options = {}) {
+	const { menuId } = options;
+	let trigger = null;
+	let menu = null;
+	let isOpenState = false;
+	/** Handle-lifetime abort controller (typeahead, etc.). */
+	const handleAbort = new AbortController();
+	/** Per-registration controller for trigger listeners. */
+	let triggerAbort = null;
+	/** Per-registration controller for menu list listeners. */
+	let menuAbort = null;
+	/** List focus nav controller */
+	let focusNav = null;
+	/** Menu handle */
+	let handle;
+	/**
+	* Shared typeahead controller (handle lifetime). Shared between the trigger and the
+	* menu list so a character typed on the closed trigger lands in the same buffer that
+	* in-menu typing reads.
+	*/
+	const typeahead = createTypeahead(() => menu ? createSelectorTreeWalker(menu, MENU_ITEM_SELECTOR) : null, getItemText, handleAbort.signal);
+	const subscribers = { open: /* @__PURE__ */ new Set() };
+	function notify(event, value) {
+		subscribers[event].forEach((cb) => cb(value));
+	}
+	/** Open the menu (if not already open), then navigate  */
+	function openAndGoTo(resolve) {
+		if (!isOpenState) handle.setOpen(true);
+		focusNav?.goTo(resolve);
+	}
+	/**
+	* Accumulate a printable key into the shared typeahead buffer, then navigate to the
+	* matching item using `goToItem` (immediate, for use inside the open menu).
+	* Returns the matched item, or `null` when nothing matches.
+	*/
+	function handleTypeaheadInMenu(key, currentItem) {
+		const match = typeahead.handle(key, currentItem);
+		if (match) focusNav?.goTo(() => match);
+		return match;
+	}
+	handle = {
+		get trigger() {
+			return trigger;
+		},
+		setOpen(open) {
+			if (isOpenState === open) return;
+			isOpenState = open;
+			if (trigger) trigger.setAttribute("aria-expanded", String(open));
+			notify("open", open);
+		},
+		registerTrigger(el) {
+			if (trigger && trigger !== el) {
+				triggerAbort?.abort();
+				triggerAbort = null;
+			}
+			trigger = el;
+			triggerAbort = new AbortController();
+			const { signal } = triggerAbort;
+			trigger.setAttribute("aria-haspopup", "true");
+			trigger.setAttribute("aria-expanded", String(isOpenState));
+			if (menuId) trigger.setAttribute("aria-controls", menuId);
+			trigger.addEventListener("click", () => {
+				if (!isOpenState) openAndGoTo((n) => n.getFirst());
+				else handle.setOpen(false);
+			}, { signal });
+			const needsManualActivation = trigger.tagName !== "BUTTON";
+			trigger.addEventListener("keydown", (event) => {
+				switch (event.key) {
+					case "ArrowDown":
+						event.preventDefault();
+						event.stopPropagation();
+						openAndGoTo((n) => n.getFirst());
+						break;
+					case "ArrowUp":
+						event.preventDefault();
+						event.stopPropagation();
+						openAndGoTo((n) => n.getLast());
+						break;
+					case "Enter":
+					case " ":
+						if (!needsManualActivation) break;
+						event.preventDefault();
+						event.stopPropagation();
+						el.click();
+						break;
+					default:
+						if (!isOpenState && isPrintableKey(event)) {
+							event.preventDefault();
+							event.stopPropagation();
+							typeahead.handle(event.key, null);
+							focusNav?.goTo((n) => typeahead.rematch(n.activeItem) ?? n.getFirst());
+							handle.setOpen(true);
+						}
+						break;
+				}
+			}, { signal });
+			return () => {
+				if (trigger === el) {
+					triggerAbort?.abort();
+					triggerAbort = null;
+					trigger = null;
+				}
+			};
+		},
+		registerMenu(el) {
+			if (menu && menu !== el) {
+				menuAbort?.abort();
+				menuAbort = null;
+			}
+			menu = el;
+			menuAbort = new AbortController();
+			const { signal } = menuAbort;
+			focusNav = createListFocusNavigation({
+				type: "list",
+				container: menu,
+				itemSelector: MENU_ITEM_SELECTOR,
+				wrap: true,
+				getActiveItem: () => {
+					const active = document.activeElement;
+					if (!active || !el.contains(active)) return null;
+					return active;
+				}
+			}, {
+				onActivate: (item) => {
+					item.focus({ preventScroll: false });
+				},
+				onDeactivate: () => {},
+				onClear: () => {}
+			}, signal);
+			menu.addEventListener("keydown", (event) => {
+				if (event.altKey || event.ctrlKey || event.metaKey) return;
+				switch (event.key) {
+					case "ArrowDown":
+						event.preventDefault();
+						event.stopPropagation();
+						focusNav?.goDown();
+						break;
+					case "ArrowUp":
+						event.preventDefault();
+						event.stopPropagation();
+						focusNav?.goUp();
+						break;
+					case "Home":
+						event.preventDefault();
+						event.stopPropagation();
+						focusNav?.goTo((s) => s.getFirst());
+						break;
+					case "End":
+						event.preventDefault();
+						event.stopPropagation();
+						focusNav?.goTo((s) => s.getLast());
+						break;
+					case "Escape":
+						event.preventDefault();
+						event.stopPropagation();
+						trigger?.focus();
+						handle.setOpen(false);
+						break;
+					case "Tab": {
+						const items = getItems(el);
+						if (items.length === 0) return;
+						const idx = items.indexOf(document.activeElement);
+						if (idx === -1) return;
+						if (event.shiftKey && idx === 0) {
+							event.preventDefault();
+							trigger?.focus();
+							handle.setOpen(false);
+						} else if (!event.shiftKey && idx === items.length - 1) {
+							event.preventDefault();
+							document.activeElement?.blur();
+							handle.setOpen(false);
+							setTimeout(() => {
+								if (trigger) moveFocusAfterTrigger(trigger);
+							}, 0);
+						}
+						break;
+					}
+					default:
+						if (isPrintableKey(event)) {
+							const active = document.activeElement;
+							const currentItem = active && el.contains(active) ? active : null;
+							if (handleTypeaheadInMenu(event.key, currentItem)) {
+								event.preventDefault();
+								event.stopPropagation();
+							}
+						}
+						break;
+				}
+			}, { signal });
+			return () => {
+				if (menu === el) {
+					menuAbort?.abort();
+					menuAbort = null;
+					menu = null;
+				}
+			};
+		},
+		flushPendingNavigation() {
+			focusNav?.flushPendingNavigation();
+		},
+		subscribe(event, listener) {
+			subscribers[event].add(listener);
+			return () => {
+				subscribers[event].delete(listener);
+			};
+		},
+		destroy() {
+			handleAbort.abort();
+			triggerAbort?.abort();
+			menuAbort?.abort();
+			triggerAbort = null;
+			menuAbort = null;
+			trigger = null;
+			menu = null;
+			isOpenState = false;
+			for (const set of Object.values(subscribers)) set.clear();
+		}
+	};
+	return handle;
+}
+//#endregion
+export { setupMenu };

package/_internal/packages/lumx-core/src/js/components/Menu/utils.js

@@ -0,0 +1,16 @@
+//#region ../lumx-core/src/js/components/Menu/utils.ts
+/**
+* CSS selector for menu items (inner focusable element). Includes disabled items: per
+* WAI-ARIA APG they stay focusable so AT announces them; click is no-op'd via `aria-disabled`.
+*/
+var MENU_ITEM_SELECTOR = "[data-menu-item]";
+/** Get an item's text label (trimmed `textContent`) for typeahead matching. */
+function getItemText(item) {
+	return item.textContent?.trim() ?? "";
+}
+/** Get all item elements within a menu container, in DOM order (includes disabled). */
+function getItems(menu) {
+	return Array.from(menu.querySelectorAll(MENU_ITEM_SELECTOR));
+}
+//#endregion
+export { MENU_ITEM_SELECTOR, getItemText, getItems };