@funstack/ui 0.1.0-alpha.0 → 0.1.0-alpha.1

package/dist/menu/index.d.mts

@@ -0,0 +1,34 @@
+import "../internal/platform-attributes.mjs";
+import { MenuItem, MenuItemDetails, MenuItemProps, MenuItemState } from "./menu-item.mjs";
+import { MenuCheckboxItem, MenuCheckboxItemProps, MenuCheckboxItemState } from "./menu-checkbox-item.mjs";
+import { MenuGroup, MenuGroupLabel, MenuGroupLabelProps, MenuGroupLabelState, MenuGroupProps, MenuGroupState, MenuSeparator, MenuSeparatorProps, MenuSeparatorState } from "./menu-group.mjs";
+import { MenuAlign, MenuPopup, MenuPopupProps, MenuPopupState, MenuSide } from "./menu-popup.mjs";
+import { MenuRadioGroup, MenuRadioGroupProps, MenuRadioGroupState } from "./menu-radio-group.mjs";
+import { MenuRadioItem, MenuRadioItemProps, MenuRadioItemState } from "./menu-radio-item.mjs";
+import { MenuOpenChangeDetails, MenuRoot, MenuRootProps, MenuRootState } from "./menu-root.mjs";
+import { MenuTrigger, MenuTriggerProps, MenuTriggerState } from "./menu-trigger.mjs";
+import { MenuSubmenuTrigger, MenuSubmenuTriggerProps, MenuSubmenuTriggerState } from "./menu-submenu-trigger.mjs";
+//#region src/menu/index.d.ts
+/**
+ * Menu button (WAI-ARIA APG Menu Button + Menu) on `popover="auto"`: `Root` (no DOM) > `Trigger`
+ * (`button[aria-haspopup=menu]`) + `Popup` (`div[popover=auto][role=menu]`) > `Item`,
+ * `CheckboxItem`, `RadioGroup` > `RadioItem`, `Group` > `GroupLabel`, `Separator`, and submenus
+ * (a `Root` inside a `Popup`, opened by its `SubmenuTrigger`). An item's `action` runs in its own
+ * transition with `data-pending` on the item, and the whole menu closes when it settles.
+ */
+export declare const Menu: {
+  readonly Root: typeof MenuRoot;
+  readonly Trigger: typeof MenuTrigger;
+  readonly Popup: typeof MenuPopup;
+  readonly Item: typeof MenuItem;
+  readonly CheckboxItem: typeof MenuCheckboxItem;
+  readonly RadioGroup: typeof MenuRadioGroup;
+  readonly RadioItem: typeof MenuRadioItem;
+  readonly Group: typeof MenuGroup;
+  readonly GroupLabel: typeof MenuGroupLabel;
+  readonly Separator: typeof MenuSeparator;
+  readonly SubmenuTrigger: typeof MenuSubmenuTrigger;
+};
+//#endregion
+export type { MenuAlign, MenuCheckboxItemProps, MenuCheckboxItemState, MenuGroupLabelProps, MenuGroupLabelState, MenuGroupProps, MenuGroupState, MenuItemDetails, MenuItemProps, MenuItemState, MenuOpenChangeDetails, MenuPopupProps, MenuPopupState, MenuRadioGroupProps, MenuRadioGroupState, MenuRadioItemProps, MenuRadioItemState, MenuRootProps, MenuRootState, MenuSeparatorProps, MenuSeparatorState, MenuSide, MenuSubmenuTriggerProps, MenuSubmenuTriggerState, MenuTriggerProps, MenuTriggerState };
+//# sourceMappingURL=index.d.mts.map

package/dist/menu/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../../src/menu/index.ts"],"mappings":";;;;;;;;;;;;;;;;;;qBAoBa;WACX,aAAI;WACJ,gBAAO;WACP,cAAK;WACL,aAAI;WACJ,qBAAY;WACZ,mBAAU;WACV,kBAAS;WACT,cAAK;WACL,mBAAU;WACV,kBAAS;WACT,uBAAc"}

package/dist/menu/index.mjs

@@ -0,0 +1,34 @@
+import { MenuCheckboxItem } from "./menu-checkbox-item.mjs";
+import { MenuGroup, MenuGroupLabel, MenuSeparator } from "./menu-group.mjs";
+import { MenuItem } from "./menu-item.mjs";
+import { MenuPopup } from "./menu-popup.mjs";
+import { MenuRadioGroup } from "./menu-radio-group.mjs";
+import { MenuRadioItem } from "./menu-radio-item.mjs";
+import { MenuRoot } from "./menu-root.mjs";
+import { MenuTrigger } from "./menu-trigger.mjs";
+import { MenuSubmenuTrigger } from "./menu-submenu-trigger.mjs";
+//#region src/menu/index.ts
+/**
+* Menu button (WAI-ARIA APG Menu Button + Menu) on `popover="auto"`: `Root` (no DOM) > `Trigger`
+* (`button[aria-haspopup=menu]`) + `Popup` (`div[popover=auto][role=menu]`) > `Item`,
+* `CheckboxItem`, `RadioGroup` > `RadioItem`, `Group` > `GroupLabel`, `Separator`, and submenus
+* (a `Root` inside a `Popup`, opened by its `SubmenuTrigger`). An item's `action` runs in its own
+* transition with `data-pending` on the item, and the whole menu closes when it settles.
+*/
+const Menu = {
+	Root: MenuRoot,
+	Trigger: MenuTrigger,
+	Popup: MenuPopup,
+	Item: MenuItem,
+	CheckboxItem: MenuCheckboxItem,
+	RadioGroup: MenuRadioGroup,
+	RadioItem: MenuRadioItem,
+	Group: MenuGroup,
+	GroupLabel: MenuGroupLabel,
+	Separator: MenuSeparator,
+	SubmenuTrigger: MenuSubmenuTrigger
+};
+//#endregion
+export { Menu };
+
+//# sourceMappingURL=index.mjs.map

package/dist/menu/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/menu/index.ts"],"sourcesContent":["// Ships the platform attribute typings (`command`, `commandfor`, `focusgroup`) with this subpath\n// (conventions 7.4). Type-only: the built JS has no import of it.\nimport \"../internal/platform-attributes.js\";\nimport { MenuCheckboxItem } from \"./menu-checkbox-item.js\";\nimport { MenuGroup, MenuGroupLabel, MenuSeparator } from \"./menu-group.js\";\nimport { MenuItem } from \"./menu-item.js\";\nimport { MenuPopup } from \"./menu-popup.js\";\nimport { MenuRadioGroup } from \"./menu-radio-group.js\";\nimport { MenuRadioItem } from \"./menu-radio-item.js\";\nimport { MenuRoot } from \"./menu-root.js\";\nimport { MenuSubmenuTrigger } from \"./menu-submenu-trigger.js\";\nimport { MenuTrigger } from \"./menu-trigger.js\";\n\n/**\n * Menu button (WAI-ARIA APG Menu Button + Menu) on `popover=\"auto\"`: `Root` (no DOM) > `Trigger`\n * (`button[aria-haspopup=menu]`) + `Popup` (`div[popover=auto][role=menu]`) > `Item`,\n * `CheckboxItem`, `RadioGroup` > `RadioItem`, `Group` > `GroupLabel`, `Separator`, and submenus\n * (a `Root` inside a `Popup`, opened by its `SubmenuTrigger`). An item's `action` runs in its own\n * transition with `data-pending` on the item, and the whole menu closes when it settles.\n */\nexport const Menu = {\n  Root: MenuRoot,\n  Trigger: MenuTrigger,\n  Popup: MenuPopup,\n  Item: MenuItem,\n  CheckboxItem: MenuCheckboxItem,\n  RadioGroup: MenuRadioGroup,\n  RadioItem: MenuRadioItem,\n  Group: MenuGroup,\n  GroupLabel: MenuGroupLabel,\n  Separator: MenuSeparator,\n  SubmenuTrigger: MenuSubmenuTrigger,\n} as const;\n\nexport type { MenuRootProps, MenuRootState, MenuOpenChangeDetails } from \"./menu-root.js\";\nexport type { MenuTriggerProps, MenuTriggerState } from \"./menu-trigger.js\";\nexport type { MenuPopupProps, MenuPopupState, MenuSide, MenuAlign } from \"./menu-popup.js\";\nexport type { MenuItemProps, MenuItemState, MenuItemDetails } from \"./menu-item.js\";\nexport type { MenuCheckboxItemProps, MenuCheckboxItemState } from \"./menu-checkbox-item.js\";\nexport type { MenuRadioGroupProps, MenuRadioGroupState } from \"./menu-radio-group.js\";\nexport type { MenuRadioItemProps, MenuRadioItemState } from \"./menu-radio-item.js\";\nexport type {\n  MenuGroupProps,\n  MenuGroupState,\n  MenuGroupLabelProps,\n  MenuGroupLabelState,\n  MenuSeparatorProps,\n  MenuSeparatorState,\n} from \"./menu-group.js\";\nexport type { MenuSubmenuTriggerProps, MenuSubmenuTriggerState } from \"./menu-submenu-trigger.js\";\n"],"mappings":";;;;;;;;;;;;;;;;;AAoBA,MAAa,OAAO;CAClB,MAAM;CACN,SAAS;CACT,OAAO;CACP,MAAM;CACN,cAAc;CACd,YAAY;CACZ,WAAW;CACX,OAAO;CACP,YAAY;CACZ,WAAW;CACX,gBAAgB;AAClB"}

package/dist/menu/menu-checkbox-item.d.mts

@@ -0,0 +1,42 @@
+import { ChangeAction, RenderProp, StateValue } from "../internal/types.mjs";
+import { MenuItemProps } from "./menu-item.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/menu/menu-checkbox-item.d.ts
+export interface MenuCheckboxItemState {
+  /** Optimistic checked state (`aria-checked`). */
+  readonly checked: boolean;
+  /** `checkedChangeAction` is in flight. */
+  readonly pending: boolean;
+  readonly disabled: boolean;
+}
+export interface MenuCheckboxItemProps extends Omit<MenuItemProps, "action" | "closeOnActivate" | "className" | "style" | "children" | "render"> {
+  /** Controlled checked state. `undefined` means uncontrolled. */
+  checked?: boolean;
+  /** Initial checked state when uncontrolled. Default `false`. */
+  defaultChecked?: boolean;
+  /**
+   * Awaited inside the item's transition; `aria-checked` flips at once and rolls back on
+   * rejection (which reaches the nearest Error Boundary above the item). May be a Server
+   * Function.
+   */
+  checkedChangeAction?: ChangeAction<boolean>;
+  /** Close the whole menu once the change settles. Default `false`: the menu stays open. */
+  closeOnActivate?: boolean;
+  className?: StateValue<string | undefined, MenuCheckboxItemState>;
+  style?: StateValue<CSSProperties | undefined, MenuCheckboxItemState>;
+  children?: StateValue<ReactNode, MenuCheckboxItemState>;
+  render?: RenderProp<ComponentPropsWithRef<"button">, MenuCheckboxItemState>;
+}
+/**
+ * A checkable menu item: `<button type="button" role="menuitemcheckbox" aria-checked>`. Click,
+ * Enter or Space toggles it through its own transition with optimistic `aria-checked` /
+ * `data-checked` and `data-pending`; the menu stays open unless `closeOnActivate`.
+ *
+ * Owned keys (conventions 1.2): those of `Menu.Item`, plus `aria-checked` and `data-checked`.
+ */
+export declare function MenuCheckboxItem({ checked, defaultChecked, checkedChangeAction, closeOnActivate, disabled, label, className, style, children, render, ...rest }: MenuCheckboxItemProps): ReactNode;
+export declare namespace MenuCheckboxItem {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=menu-checkbox-item.d.mts.map

package/dist/menu/menu-checkbox-item.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-checkbox-item.d.mts","names":[],"sources":["../../src/menu/menu-checkbox-item.tsx"],"mappings":";;;;iBAaiB;;WAEN;;WAEA;WACA;;iBAGM,8BAA8B,KAC7C;;EAIA;;EAEA;;;;;;EAMA,sBAAsB;;EAEtB;EACA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,iCAAiC;;;;;;;;;wBAUvC,mBACd,SACA,gBACA,qBACA,iBACA,UACA,OACA,WACA,OACA,UACA,WACG,QACF,wBAAqB;yBAZR"}

package/dist/menu/menu-checkbox-item.mjs

@@ -0,0 +1,71 @@
+"use client";
+import { createActionDetails } from "../internal/action-details.mjs";
+import { dataAttr } from "../internal/data-attr.mjs";
+import { transitionTypes } from "../internal/transition-types.mjs";
+import { useControllableAction } from "../internal/use-controllable-action.mjs";
+import { rendersButton, useRender } from "../internal/use-render.mjs";
+import { closeStackLater, useMenuContext } from "./menu-context.mjs";
+import { useMenuItem } from "./use-menu-item.mjs";
+import { useRef } from "react";
+//#region src/menu/menu-checkbox-item.tsx
+/**
+* A checkable menu item: `<button type="button" role="menuitemcheckbox" aria-checked>`. Click,
+* Enter or Space toggles it through its own transition with optimistic `aria-checked` /
+* `data-checked` and `data-pending`; the menu stays open unless `closeOnActivate`.
+*
+* Owned keys (conventions 1.2): those of `Menu.Item`, plus `aria-checked` and `data-checked`.
+*/
+function MenuCheckboxItem({ checked, defaultChecked, checkedChangeAction, closeOnActivate = false, disabled = false, label, className, style, children, render, ...rest }) {
+	const menu = useMenuContext("Menu.CheckboxItem");
+	const after = useRef(/* @__PURE__ */ new WeakMap());
+	const { optimistic, pending, dispatch } = useControllableAction({
+		controlled: checked,
+		defaultValue: defaultChecked,
+		initialValue: false,
+		action: async (next, details) => {
+			await checkedChangeAction?.(next, details);
+			after.current.get(details)?.();
+		},
+		transitionTypes: (next) => transitionTypes("menu", next ? "check" : "uncheck"),
+		warn: {
+			component: "Menu.CheckboxItem",
+			prop: "checked"
+		}
+	});
+	const { libraryProps } = useMenuItem({
+		part: "Menu.CheckboxItem",
+		role: "menuitemcheckbox",
+		disabled,
+		label,
+		activate: (event) => {
+			const details = createActionDetails(event, {});
+			if (closeOnActivate) after.current.set(details, closeStackLater(menu, event));
+			dispatch(!optimistic, details);
+		}
+	});
+	return useRender({
+		defaultElement: "button",
+		render,
+		state: {
+			checked: optimistic,
+			pending,
+			disabled
+		},
+		className,
+		style,
+		children,
+		props: rest,
+		libraryProps: {
+			...rendersButton(render) && { type: "button" },
+			...libraryProps,
+			"aria-checked": optimistic,
+			"data-checked": dataAttr(optimistic),
+			"data-pending": dataAttr(pending)
+		}
+	});
+}
+MenuCheckboxItem.displayName = "MenuCheckboxItem";
+//#endregion
+export { MenuCheckboxItem };
+
+//# sourceMappingURL=menu-checkbox-item.mjs.map

package/dist/menu/menu-checkbox-item.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-checkbox-item.mjs","names":[],"sources":["../../src/menu/menu-checkbox-item.tsx"],"sourcesContent":["\"use client\";\nimport { useRef } from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport { createActionDetails } from \"../internal/action-details.js\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport { transitionTypes } from \"../internal/transition-types.js\";\nimport type { ActionDetails, ChangeAction, RenderProp, StateValue } from \"../internal/types.js\";\nimport { useControllableAction } from \"../internal/use-controllable-action.js\";\nimport { rendersButton, useRender } from \"../internal/use-render.js\";\nimport { closeStackLater, useMenuContext } from \"./menu-context.js\";\nimport type { MenuItemProps } from \"./menu-item.js\";\nimport { useMenuItem } from \"./use-menu-item.js\";\n\nexport interface MenuCheckboxItemState {\n  /** Optimistic checked state (`aria-checked`). */\n  readonly checked: boolean;\n  /** `checkedChangeAction` is in flight. */\n  readonly pending: boolean;\n  readonly disabled: boolean;\n}\n\nexport interface MenuCheckboxItemProps extends Omit<\n  MenuItemProps,\n  \"action\" | \"closeOnActivate\" | \"className\" | \"style\" | \"children\" | \"render\"\n> {\n  /** Controlled checked state. `undefined` means uncontrolled. */\n  checked?: boolean;\n  /** Initial checked state when uncontrolled. Default `false`. */\n  defaultChecked?: boolean;\n  /**\n   * Awaited inside the item's transition; `aria-checked` flips at once and rolls back on\n   * rejection (which reaches the nearest Error Boundary above the item). May be a Server\n   * Function.\n   */\n  checkedChangeAction?: ChangeAction<boolean>;\n  /** Close the whole menu once the change settles. Default `false`: the menu stays open. */\n  closeOnActivate?: boolean;\n  className?: StateValue<string | undefined, MenuCheckboxItemState>;\n  style?: StateValue<CSSProperties | undefined, MenuCheckboxItemState>;\n  children?: StateValue<ReactNode, MenuCheckboxItemState>;\n  render?: RenderProp<ComponentPropsWithRef<\"button\">, MenuCheckboxItemState>;\n}\n\n/**\n * A checkable menu item: `<button type=\"button\" role=\"menuitemcheckbox\" aria-checked>`. Click,\n * Enter or Space toggles it through its own transition with optimistic `aria-checked` /\n * `data-checked` and `data-pending`; the menu stays open unless `closeOnActivate`.\n *\n * Owned keys (conventions 1.2): those of `Menu.Item`, plus `aria-checked` and `data-checked`.\n */\nexport function MenuCheckboxItem({\n  checked,\n  defaultChecked,\n  checkedChangeAction,\n  closeOnActivate = false,\n  disabled = false,\n  label,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: MenuCheckboxItemProps) {\n  const menu = useMenuContext(\"Menu.CheckboxItem\");\n  // The close to run after a dispatch's action resolved, keyed by the dispatch's details.\n  const after = useRef(new WeakMap<object, () => void>());\n  const { optimistic, pending, dispatch } = useControllableAction<boolean>({\n    controlled: checked,\n    defaultValue: defaultChecked,\n    initialValue: false,\n    action: async (next, details) => {\n      await checkedChangeAction?.(next, details);\n      after.current.get(details)?.();\n    },\n    transitionTypes: (next) => transitionTypes(\"menu\", next ? \"check\" : \"uncheck\"),\n    warn: { component: \"Menu.CheckboxItem\", prop: \"checked\" },\n  });\n\n  const { libraryProps } = useMenuItem({\n    part: \"Menu.CheckboxItem\",\n    role: \"menuitemcheckbox\",\n    disabled,\n    label,\n    activate: (event) => {\n      const details = createActionDetails(event, {}) as ActionDetails;\n      if (closeOnActivate) after.current.set(details, closeStackLater(menu, event));\n      dispatch(!optimistic, details);\n    },\n  });\n\n  const state: MenuCheckboxItemState = { checked: optimistic, pending, disabled };\n\n  return useRender<ComponentPropsWithRef<\"button\">, MenuCheckboxItemState>({\n    defaultElement: \"button\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps: {\n      ...(rendersButton(render) && { type: \"button\" as const }),\n      ...libraryProps,\n      \"aria-checked\": optimistic,\n      \"data-checked\": dataAttr(optimistic),\n      \"data-pending\": dataAttr(pending),\n    },\n  });\n}\n\nMenuCheckboxItem.displayName = \"MenuCheckboxItem\";\n"],"mappings":";;;;;;;;;;;;;;;;;AAkDA,SAAgB,iBAAiB,EAC/B,SACA,gBACA,qBACA,kBAAkB,OAClB,WAAW,OACX,OACA,WACA,OACA,UACA,QACA,GAAG,QACqB;CACxB,MAAM,OAAO,eAAe,mBAAmB;CAE/C,MAAM,QAAQ,uBAAO,IAAI,QAA4B,CAAC;CACtD,MAAM,EAAE,YAAY,SAAS,aAAa,sBAA+B;EACvE,YAAY;EACZ,cAAc;EACd,cAAc;EACd,QAAQ,OAAO,MAAM,YAAY;GAC/B,MAAM,sBAAsB,MAAM,OAAO;GACzC,MAAM,QAAQ,IAAI,OAAO,CAAC,GAAG;EAC/B;EACA,kBAAkB,SAAS,gBAAgB,QAAQ,OAAO,UAAU,SAAS;EAC7E,MAAM;GAAE,WAAW;GAAqB,MAAM;EAAU;CAC1D,CAAC;CAED,MAAM,EAAE,iBAAiB,YAAY;EACnC,MAAM;EACN,MAAM;EACN;EACA;EACA,WAAW,UAAU;GACnB,MAAM,UAAU,oBAAoB,OAAO,CAAC,CAAC;GAC7C,IAAI,iBAAiB,MAAM,QAAQ,IAAI,SAAS,gBAAgB,MAAM,KAAK,CAAC;GAC5E,SAAS,CAAC,YAAY,OAAO;EAC/B;CACF,CAAC;CAID,OAAO,UAAkE;EACvE,gBAAgB;EAChB;EACA,OAAA;GALqC,SAAS;GAAY;GAAS;EAK/D;EACJ;EACA;EACA;EACA,OAAO;EACP,cAAc;GACZ,GAAI,cAAc,MAAM,KAAK,EAAE,MAAM,SAAkB;GACvD,GAAG;GACH,gBAAgB;GAChB,gBAAgB,SAAS,UAAU;GACnC,gBAAgB,SAAS,OAAO;EAClC;CACF,CAAC;AACH;AAEA,iBAAiB,cAAc"}

package/dist/menu/menu-context.d.mts

@@ -0,0 +1 @@
+import "../internal/use-popover-root.mjs";

package/dist/menu/menu-context.mjs

@@ -0,0 +1,28 @@
+"use client";
+import { createContext, use } from "react";
+//#region src/menu/menu-context.ts
+const MenuContext = createContext(null);
+/**
+* The close an activated item runs once its action settled: the whole stack, through the
+* top-level Root (design 2.2). Recorded at activation: if the menu was dismissed and opened again
+* meanwhile, the close belongs to the previous opening and does nothing (as `useActionTrigger`).
+*/
+function closeStackLater(menu, event) {
+	const { popover } = menu.root;
+	const generation = popover.openGeneration();
+	return () => {
+		if (popover.openGeneration() === generation) popover.requestClose(event, "activate");
+	};
+}
+function useMenuContext(part) {
+	const context = use(MenuContext);
+	if (context === null) throw new Error(`${part} must be rendered inside a Menu.Root.`);
+	return context;
+}
+const MenuListContext = createContext(null);
+const MenuGroupContext = createContext(null);
+const MenuRadioGroupContext = createContext(null);
+//#endregion
+export { MenuContext, MenuGroupContext, MenuListContext, MenuRadioGroupContext, closeStackLater, useMenuContext };
+
+//# sourceMappingURL=menu-context.mjs.map

package/dist/menu/menu-context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-context.mjs","names":[],"sources":["../../src/menu/menu-context.ts"],"sourcesContent":["\"use client\";\nimport { createContext, use } from \"react\";\nimport type { DelayedPair } from \"../internal/use-delayed-pair.js\";\nimport type { PopoverRootValue } from \"../internal/use-popover-root.js\";\n\n/**\n * Where focus goes when the menu opens (design/components/menu.md 6.1): the first enabled item,\n * the last one (ArrowUp on the Trigger), or nowhere (a hover-opened submenu keeps focus on its\n * SubmenuTrigger).\n */\nexport type MenuOpenCause = \"first\" | \"last\" | \"none\";\n\n/** How the open being shown should place focus (design 6.1; review H1). */\nexport interface MenuOpenFocus {\n  readonly cause: MenuOpenCause;\n  /**\n   * The open came from a pointer click (`detail > 0`): the item is focused without the focus\n   * ring where the engine supports `focus({ focusVisible: false })`.\n   */\n  readonly pointer: boolean;\n}\n\n/** One menu level: what its Root provides to its Trigger, Popup and items. */\nexport interface MenuContextValue {\n  /** The shared popover machinery (`usePopoverRoot`). */\n  readonly popover: PopoverRootValue;\n  /** This Root is nested in a `Menu.Popup`. */\n  readonly submenu: boolean;\n  /** The top-level menu: item activation closes the whole stack through it (design 2.2). */\n  readonly root: MenuContextValue;\n  /** The enclosing menu of a submenu; `null` at the top level. */\n  readonly parent: MenuContextValue | null;\n  readonly loop: boolean;\n  readonly delay: number;\n  readonly closeDelay: number;\n  /** The Trigger's id (`aria-labelledby` of the Popup). */\n  readonly triggerId: string;\n  /** Record the focus target of the next open (and whether a pointer asked for it). */\n  readonly setOpenCause: (cause: MenuOpenCause, pointer?: boolean) => void;\n  /** Read and clear the focus target of the open being shown (default `\"first\"`, keyboard). */\n  readonly takeOpenCause: () => MenuOpenFocus;\n  /** Submenu hover-intent timers, shared by the SubmenuTrigger and the Popup. */\n  readonly timers: DelayedPair;\n}\n\nexport const MenuContext = createContext<MenuContextValue | null>(null);\n\n/**\n * The close an activated item runs once its action settled: the whole stack, through the\n * top-level Root (design 2.2). Recorded at activation: if the menu was dismissed and opened again\n * meanwhile, the close belongs to the previous opening and does nothing (as `useActionTrigger`).\n */\nexport function closeStackLater(menu: MenuContextValue, event: Event): () => void {\n  const { popover } = menu.root;\n  const generation = popover.openGeneration();\n  return () => {\n    if (popover.openGeneration() === generation) popover.requestClose(event, \"activate\");\n  };\n}\n\nexport function useMenuContext(part: string): MenuContextValue {\n  const context = use(MenuContext);\n  if (context === null) {\n    throw new Error(`${part} must be rendered inside a Menu.Root.`);\n  }\n  return context;\n}\n\n/** What a `Menu.Popup` tells the items rendered in it. */\nexport interface MenuListContextValue {\n  /** The menu this popup belongs to. */\n  readonly menu: MenuContextValue;\n  /**\n   * `experimental_focusgroup` is on and the engine implements it: items render no `tabindex`\n   * (Chromium leaves `tabindex=\"-1\"` elements out of a focusgroup) and the JS arrow keys step\n   * aside.\n   */\n  readonly nativeFocusgroup: boolean;\n  /** A typeahead buffer is active: Space is a character, not an activation (design 5.1). */\n  readonly typingAhead: () => boolean;\n}\n\nexport const MenuListContext = createContext<MenuListContextValue | null>(null);\n\n/** `Menu.Group` / `Menu.RadioGroup`: the id their `Menu.GroupLabel` renders. */\nexport interface MenuGroupContextValue {\n  readonly labelId: string;\n}\n\nexport const MenuGroupContext = createContext<MenuGroupContextValue | null>(null);\n\n/** `Menu.RadioGroup`'s state for its `Menu.RadioItem`s. */\nexport interface MenuRadioGroupContextValue {\n  /** Optimistic value. */\n  readonly value: string | null;\n  readonly pending: boolean;\n  /**\n   * Dispatch `value` through the group's transition; `then` runs once the change action\n   * resolved (an item's `closeOnActivate`).\n   */\n  readonly select: (value: string, event: Event, then: (() => void) | undefined) => void;\n}\n\nexport const MenuRadioGroupContext = createContext<MenuRadioGroupContextValue | null>(null);\n"],"mappings":";;;AA6CA,MAAa,cAAc,cAAuC,IAAI;;;;;;AAOtE,SAAgB,gBAAgB,MAAwB,OAA0B;CAChF,MAAM,EAAE,YAAY,KAAK;CACzB,MAAM,aAAa,QAAQ,eAAe;CAC1C,aAAa;EACX,IAAI,QAAQ,eAAe,MAAM,YAAY,QAAQ,aAAa,OAAO,UAAU;CACrF;AACF;AAEA,SAAgB,eAAe,MAAgC;CAC7D,MAAM,UAAU,IAAI,WAAW;CAC/B,IAAI,YAAY,MACd,MAAM,IAAI,MAAM,GAAG,KAAK,sCAAsC;CAEhE,OAAO;AACT;AAgBA,MAAa,kBAAkB,cAA2C,IAAI;AAO9E,MAAa,mBAAmB,cAA4C,IAAI;AAchF,MAAa,wBAAwB,cAAiD,IAAI"}

package/dist/menu/menu-dom.mjs

@@ -0,0 +1,37 @@
+"use client";
+//#region src/menu/menu-dom.ts
+const ITEM_SELECTOR = "[role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"]";
+/** The items of `popup` in DOM order, without the items of its submenus. Disabled included. */
+function menuItems(popup) {
+	return Array.from(popup.querySelectorAll(ITEM_SELECTOR)).filter((item) => item.closest("[role=\"menu\"]") === popup);
+}
+function isMenuItem(element, popup) {
+	return element.matches(ITEM_SELECTOR) && element.closest("[role=\"menu\"]") === popup;
+}
+function isDisabledItem(item) {
+	return item.getAttribute("aria-disabled") === "true";
+}
+/** The first (or last) enabled item; the first (or last) item if all are disabled. */
+function edgeItem(popup, which) {
+	const items = menuItems(popup);
+	const ordered = which === "first" ? items : [...items].reverse();
+	return ordered.find((item) => !isDisabledItem(item)) ?? ordered[0] ?? null;
+}
+/** Keyboard focus: the ring shows even where the engine's heuristic would not (as Tabs). */
+function focusItem(item) {
+	item.focus({ focusVisible: true });
+}
+/** The text typeahead matches: the item's `label` prop, else its text content. */
+function typeaheadText(item) {
+	return (item.getAttribute("data-typeahead") ?? item.textContent ?? "").trim().toLowerCase();
+}
+function isRtl(element) {
+	return getComputedStyle(element).direction === "rtl";
+}
+function hasModifier(event) {
+	return event.altKey || event.ctrlKey || event.metaKey;
+}
+//#endregion
+export { edgeItem, focusItem, hasModifier, isDisabledItem, isMenuItem, isRtl, menuItems, typeaheadText };
+
+//# sourceMappingURL=menu-dom.mjs.map

package/dist/menu/menu-dom.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-dom.mjs","names":[],"sources":["../../src/menu/menu-dom.ts"],"sourcesContent":["\"use client\";\n// DOM helpers shared by the Menu parts. Items are read from the DOM when they are needed (a key\n// press, an open), never registered (design/components/menu.md 13 and 14).\n\nconst ITEM_SELECTOR = '[role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"]';\n\n/** The items of `popup` in DOM order, without the items of its submenus. Disabled included. */\nexport function menuItems(popup: Element): HTMLElement[] {\n  return Array.from(popup.querySelectorAll<HTMLElement>(ITEM_SELECTOR)).filter(\n    (item) => item.closest('[role=\"menu\"]') === popup,\n  );\n}\n\nexport function isMenuItem(element: Element, popup: Element): boolean {\n  return element.matches(ITEM_SELECTOR) && element.closest('[role=\"menu\"]') === popup;\n}\n\nexport function isDisabledItem(item: Element): boolean {\n  return item.getAttribute(\"aria-disabled\") === \"true\";\n}\n\n/** The first (or last) enabled item; the first (or last) item if all are disabled. */\nexport function edgeItem(popup: Element, which: \"first\" | \"last\"): HTMLElement | null {\n  const items = menuItems(popup);\n  const ordered = which === \"first\" ? items : [...items].reverse();\n  return ordered.find((item) => !isDisabledItem(item)) ?? ordered[0] ?? null;\n}\n\n/** Keyboard focus: the ring shows even where the engine's heuristic would not (as Tabs). */\nexport function focusItem(item: HTMLElement): void {\n  item.focus({ focusVisible: true } as FocusOptions);\n}\n\n/** The text typeahead matches: the item's `label` prop, else its text content. */\nexport function typeaheadText(item: Element): string {\n  return (item.getAttribute(\"data-typeahead\") ?? item.textContent ?? \"\").trim().toLowerCase();\n}\n\nexport function isRtl(element: Element): boolean {\n  return getComputedStyle(element).direction === \"rtl\";\n}\n\nexport function hasModifier(event: { altKey: boolean; ctrlKey: boolean; metaKey: boolean }) {\n  return event.altKey || event.ctrlKey || event.metaKey;\n}\n"],"mappings":";;AAIA,MAAM,gBAAgB;;AAGtB,SAAgB,UAAU,OAA+B;CACvD,OAAO,MAAM,KAAK,MAAM,iBAA8B,aAAa,CAAC,CAAC,CAAC,QACnE,SAAS,KAAK,QAAQ,iBAAe,MAAM,KAC9C;AACF;AAEA,SAAgB,WAAW,SAAkB,OAAyB;CACpE,OAAO,QAAQ,QAAQ,aAAa,KAAK,QAAQ,QAAQ,iBAAe,MAAM;AAChF;AAEA,SAAgB,eAAe,MAAwB;CACrD,OAAO,KAAK,aAAa,eAAe,MAAM;AAChD;;AAGA,SAAgB,SAAS,OAAgB,OAA6C;CACpF,MAAM,QAAQ,UAAU,KAAK;CAC7B,MAAM,UAAU,UAAU,UAAU,QAAQ,CAAC,GAAG,KAAK,CAAC,CAAC,QAAQ;CAC/D,OAAO,QAAQ,MAAM,SAAS,CAAC,eAAe,IAAI,CAAC,KAAK,QAAQ,MAAM;AACxE;;AAGA,SAAgB,UAAU,MAAyB;CACjD,KAAK,MAAM,EAAE,cAAc,KAAK,CAAiB;AACnD;;AAGA,SAAgB,cAAc,MAAuB;CACnD,QAAQ,KAAK,aAAa,gBAAgB,KAAK,KAAK,eAAe,GAAA,CAAI,KAAK,CAAC,CAAC,YAAY;AAC5F;AAEA,SAAgB,MAAM,SAA2B;CAC/C,OAAO,iBAAiB,OAAO,CAAC,CAAC,cAAc;AACjD;AAEA,SAAgB,YAAY,OAAgE;CAC1F,OAAO,MAAM,UAAU,MAAM,WAAW,MAAM;AAChD"}

package/dist/menu/menu-group.d.mts

@@ -0,0 +1,48 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/menu/menu-group.d.ts
+/** `Menu.Group`, `Menu.GroupLabel` and `Menu.Separator` have no state. */
+export type MenuGroupState = Record<string, never>;
+export type MenuGroupLabelState = Record<string, never>;
+export type MenuSeparatorState = Record<string, never>;
+export interface MenuGroupProps extends Omit<ComponentPropsWithRef<"div">, "role" | "className" | "style" | "children"> {
+  className?: StateValue<string | undefined, MenuGroupState>;
+  style?: StateValue<CSSProperties | undefined, MenuGroupState>;
+  children?: StateValue<ReactNode, MenuGroupState>;
+  render?: RenderProp<ComponentPropsWithRef<"div">, MenuGroupState>;
+}
+/**
+ * A labelled set of items: `<div role="group" aria-labelledby>` named by the `Menu.GroupLabel`
+ * inside it. Owned keys: `role`, `aria-labelledby` (token-merged).
+ */
+export declare function MenuGroup({ className, style, children, render, ...rest }: MenuGroupProps): import("react").JSX.Element;
+export declare namespace MenuGroup {
+  var displayName: string;
+}
+export interface MenuGroupLabelProps extends Omit<ComponentPropsWithRef<"div">, "id" | "className" | "style" | "children"> {
+  className?: StateValue<string | undefined, MenuGroupLabelState>;
+  style?: StateValue<CSSProperties | undefined, MenuGroupLabelState>;
+  children?: StateValue<ReactNode, MenuGroupLabelState>;
+  render?: RenderProp<ComponentPropsWithRef<"div">, MenuGroupLabelState>;
+}
+/**
+ * The name of the enclosing `Menu.Group` or `Menu.RadioGroup`: a `<div>` with the id the group's
+ * `aria-labelledby` references. Owned key: `id`.
+ */
+export declare function MenuGroupLabel({ className, style, children, render, ...rest }: MenuGroupLabelProps): ReactNode;
+export declare namespace MenuGroupLabel {
+  var displayName: string;
+}
+export interface MenuSeparatorProps extends Omit<ComponentPropsWithRef<"hr">, "className" | "style" | "children"> {
+  className?: StateValue<string | undefined, MenuSeparatorState>;
+  style?: StateValue<CSSProperties | undefined, MenuSeparatorState>;
+  /** Another element must carry `role="separator"` itself. */
+  render?: RenderProp<ComponentPropsWithRef<"hr">, MenuSeparatorState>;
+}
+/** A divider between items: `<hr>` (implicit `role="separator"`). Owns no keys. */
+export declare function MenuSeparator({ className, style, render, ...rest }: MenuSeparatorProps): ReactNode;
+export declare namespace MenuSeparator {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=menu-group.d.mts.map

package/dist/menu/menu-group.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-group.d.mts","names":[],"sources":["../../src/menu/menu-group.tsx"],"mappings":";;;;YASY,iBAAiB;YACjB,sBAAsB;YACtB,qBAAqB;iBAIhB,uBAAuB,KACtC;EAGA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,8BAA8B;;;;;;wBAOpC,YAAY,WAAW,OAAO,UAAU,WAAW,QAAQ,iCAAc,IAAA;yBAAzE;;;iBAiBC,4BAA4B,KAC3C;EAGA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,8BAA8B;;;;;;wBAOpC,iBACd,WACA,OACA,UACA,WACG,QACF,sBAAmB;yBANN;;;iBA0BC,2BAA2B,KAC1C;EAGA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;;EAE9C,SAAS,WAAW,6BAA6B;;;wBAInC,gBAAgB,WAAW,OAAO,WAAW,QAAQ,qBAAkB;yBAAvE"}

package/dist/menu/menu-group.mjs

@@ -0,0 +1,69 @@
+"use client";
+import { useRender } from "../internal/use-render.mjs";
+import { useDevWarning } from "../internal/use-dev-warning.mjs";
+import { MenuGroupContext } from "./menu-context.mjs";
+import { use, useId } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/menu/menu-group.tsx
+const EMPTY = {};
+/**
+* A labelled set of items: `<div role="group" aria-labelledby>` named by the `Menu.GroupLabel`
+* inside it. Owned keys: `role`, `aria-labelledby` (token-merged).
+*/
+function MenuGroup({ className, style, children, render, ...rest }) {
+	const labelId = `${useId()}-label`;
+	const element = useRender({
+		defaultElement: "div",
+		render,
+		state: EMPTY,
+		className,
+		style,
+		children,
+		props: rest,
+		libraryProps: {
+			role: "group",
+			"aria-labelledby": labelId
+		}
+	});
+	return /* @__PURE__ */ jsx(MenuGroupContext, {
+		value: { labelId },
+		children: element
+	});
+}
+MenuGroup.displayName = "MenuGroup";
+/**
+* The name of the enclosing `Menu.Group` or `Menu.RadioGroup`: a `<div>` with the id the group's
+* `aria-labelledby` references. Owned key: `id`.
+*/
+function MenuGroupLabel({ className, style, children, render, ...rest }) {
+	const group = use(MenuGroupContext);
+	useDevWarning(group === null, "Menu.GroupLabel: rendered outside a Menu.Group or Menu.RadioGroup; it names nothing.");
+	return useRender({
+		defaultElement: "div",
+		render,
+		state: EMPTY,
+		className,
+		style,
+		children,
+		props: rest,
+		libraryProps: group === null ? {} : { id: group.labelId }
+	});
+}
+MenuGroupLabel.displayName = "MenuGroupLabel";
+/** A divider between items: `<hr>` (implicit `role="separator"`). Owns no keys. */
+function MenuSeparator({ className, style, render, ...rest }) {
+	return useRender({
+		defaultElement: "hr",
+		render,
+		state: EMPTY,
+		className,
+		style,
+		children: void 0,
+		props: rest
+	});
+}
+MenuSeparator.displayName = "MenuSeparator";
+//#endregion
+export { MenuGroup, MenuGroupLabel, MenuSeparator };
+
+//# sourceMappingURL=menu-group.mjs.map

package/dist/menu/menu-group.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-group.mjs","names":[],"sources":["../../src/menu/menu-group.tsx"],"sourcesContent":["\"use client\";\nimport { use, useId } from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useDevWarning } from \"../internal/use-dev-warning.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { MenuGroupContext } from \"./menu-context.js\";\n\n/** `Menu.Group`, `Menu.GroupLabel` and `Menu.Separator` have no state. */\nexport type MenuGroupState = Record<string, never>;\nexport type MenuGroupLabelState = Record<string, never>;\nexport type MenuSeparatorState = Record<string, never>;\n\nconst EMPTY: Record<string, never> = {};\n\nexport interface MenuGroupProps extends Omit<\n  ComponentPropsWithRef<\"div\">,\n  \"role\" | \"className\" | \"style\" | \"children\"\n> {\n  className?: StateValue<string | undefined, MenuGroupState>;\n  style?: StateValue<CSSProperties | undefined, MenuGroupState>;\n  children?: StateValue<ReactNode, MenuGroupState>;\n  render?: RenderProp<ComponentPropsWithRef<\"div\">, MenuGroupState>;\n}\n\n/**\n * A labelled set of items: `<div role=\"group\" aria-labelledby>` named by the `Menu.GroupLabel`\n * inside it. Owned keys: `role`, `aria-labelledby` (token-merged).\n */\nexport function MenuGroup({ className, style, children, render, ...rest }: MenuGroupProps) {\n  const labelId = `${useId()}-label`;\n  const element = useRender<ComponentPropsWithRef<\"div\">, MenuGroupState>({\n    defaultElement: \"div\",\n    render,\n    state: EMPTY,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps: { role: \"group\", \"aria-labelledby\": labelId },\n  });\n  return <MenuGroupContext value={{ labelId }}>{element}</MenuGroupContext>;\n}\n\nMenuGroup.displayName = \"MenuGroup\";\n\nexport interface MenuGroupLabelProps extends Omit<\n  ComponentPropsWithRef<\"div\">,\n  \"id\" | \"className\" | \"style\" | \"children\"\n> {\n  className?: StateValue<string | undefined, MenuGroupLabelState>;\n  style?: StateValue<CSSProperties | undefined, MenuGroupLabelState>;\n  children?: StateValue<ReactNode, MenuGroupLabelState>;\n  render?: RenderProp<ComponentPropsWithRef<\"div\">, MenuGroupLabelState>;\n}\n\n/**\n * The name of the enclosing `Menu.Group` or `Menu.RadioGroup`: a `<div>` with the id the group's\n * `aria-labelledby` references. Owned key: `id`.\n */\nexport function MenuGroupLabel({\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: MenuGroupLabelProps) {\n  const group = use(MenuGroupContext);\n  useDevWarning(\n    group === null,\n    \"Menu.GroupLabel: rendered outside a Menu.Group or Menu.RadioGroup; it names nothing.\",\n  );\n  return useRender<ComponentPropsWithRef<\"div\">, MenuGroupLabelState>({\n    defaultElement: \"div\",\n    render,\n    state: EMPTY,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps: group === null ? {} : { id: group.labelId },\n  });\n}\n\nMenuGroupLabel.displayName = \"MenuGroupLabel\";\n\nexport interface MenuSeparatorProps extends Omit<\n  ComponentPropsWithRef<\"hr\">,\n  \"className\" | \"style\" | \"children\"\n> {\n  className?: StateValue<string | undefined, MenuSeparatorState>;\n  style?: StateValue<CSSProperties | undefined, MenuSeparatorState>;\n  /** Another element must carry `role=\"separator\"` itself. */\n  render?: RenderProp<ComponentPropsWithRef<\"hr\">, MenuSeparatorState>;\n}\n\n/** A divider between items: `<hr>` (implicit `role=\"separator\"`). Owns no keys. */\nexport function MenuSeparator({ className, style, render, ...rest }: MenuSeparatorProps) {\n  return useRender<ComponentPropsWithRef<\"hr\">, MenuSeparatorState>({\n    defaultElement: \"hr\",\n    render,\n    state: EMPTY,\n    className,\n    style,\n    children: undefined,\n    props: rest,\n  });\n}\n\nMenuSeparator.displayName = \"MenuSeparator\";\n"],"mappings":";;;;;;;AAaA,MAAM,QAA+B,CAAC;;;;;AAgBtC,SAAgB,UAAU,EAAE,WAAW,OAAO,UAAU,QAAQ,GAAG,QAAwB;CACzF,MAAM,UAAU,GAAG,MAAM,EAAE;CAC3B,MAAM,UAAU,UAAwD;EACtE,gBAAgB;EAChB;EACA,OAAO;EACP;EACA;EACA;EACA,OAAO;EACP,cAAc;GAAE,MAAM;GAAS,mBAAmB;EAAQ;CAC5D,CAAC;CACD,OAAO,oBAAC,kBAAD;EAAkB,OAAO,EAAE,QAAQ;EAAI,UAAA;CAA0B,CAAA;AAC1E;AAEA,UAAU,cAAc;;;;;AAgBxB,SAAgB,eAAe,EAC7B,WACA,OACA,UACA,QACA,GAAG,QACmB;CACtB,MAAM,QAAQ,IAAI,gBAAgB;CAClC,cACE,UAAU,MACV,sFACF;CACA,OAAO,UAA6D;EAClE,gBAAgB;EAChB;EACA,OAAO;EACP;EACA;EACA;EACA,OAAO;EACP,cAAc,UAAU,OAAO,CAAC,IAAI,EAAE,IAAI,MAAM,QAAQ;CAC1D,CAAC;AACH;AAEA,eAAe,cAAc;;AAa7B,SAAgB,cAAc,EAAE,WAAW,OAAO,QAAQ,GAAG,QAA4B;CACvF,OAAO,UAA2D;EAChE,gBAAgB;EAChB;EACA,OAAO;EACP;EACA;EACA,UAAU,KAAA;EACV,OAAO;CACT,CAAC;AACH;AAEA,cAAc,cAAc"}

package/dist/menu/menu-hover.mjs

@@ -0,0 +1,29 @@
+"use client";
+//#region src/menu/menu-hover.ts
+function hovered(element) {
+	if (element === null) return false;
+	try {
+		return element.matches(":hover");
+	} catch {
+		return false;
+	}
+}
+/**
+* Starts the submenu's `closeDelay` (design/components/menu.md 7): on expiry the submenu closes
+* with `"dismiss"` unless the pointer is back over its SubmenuTrigger or Popup, or keyboard focus
+* is inside it (a user who arrowed in and nudged the mouse keeps the submenu).
+*/
+function scheduleHoverClose(menu, event) {
+	const { popover, timers, closeDelay } = menu;
+	timers.close(closeDelay, () => {
+		const popup = popover.popupRef.current;
+		if (hovered(popover.triggerRef.current) || hovered(popup)) return;
+		const active = popup?.ownerDocument.activeElement ?? null;
+		if (popup !== null && active !== null && popup.contains(active)) return;
+		popover.requestClose(event, "dismiss");
+	});
+}
+//#endregion
+export { scheduleHoverClose };
+
+//# sourceMappingURL=menu-hover.mjs.map

package/dist/menu/menu-hover.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-hover.mjs","names":[],"sources":["../../src/menu/menu-hover.ts"],"sourcesContent":["\"use client\";\nimport type { MenuContextValue } from \"./menu-context.js\";\n\nfunction hovered(element: Element | null): boolean {\n  if (element === null) return false;\n  try {\n    return element.matches(\":hover\");\n  } catch {\n    return false;\n  }\n}\n\n/**\n * Starts the submenu's `closeDelay` (design/components/menu.md 7): on expiry the submenu closes\n * with `\"dismiss\"` unless the pointer is back over its SubmenuTrigger or Popup, or keyboard focus\n * is inside it (a user who arrowed in and nudged the mouse keeps the submenu).\n */\nexport function scheduleHoverClose(menu: MenuContextValue, event: Event): void {\n  const { popover, timers, closeDelay } = menu;\n  timers.close(closeDelay, () => {\n    const popup = popover.popupRef.current;\n    if (hovered(popover.triggerRef.current) || hovered(popup)) return;\n    const active = popup?.ownerDocument.activeElement ?? null;\n    if (popup !== null && active !== null && popup.contains(active)) return;\n    popover.requestClose(event, \"dismiss\");\n  });\n}\n"],"mappings":";;AAGA,SAAS,QAAQ,SAAkC;CACjD,IAAI,YAAY,MAAM,OAAO;CAC7B,IAAI;EACF,OAAO,QAAQ,QAAQ,QAAQ;CACjC,QAAQ;EACN,OAAO;CACT;AACF;;;;;;AAOA,SAAgB,mBAAmB,MAAwB,OAAoB;CAC7E,MAAM,EAAE,SAAS,QAAQ,eAAe;CACxC,OAAO,MAAM,kBAAkB;EAC7B,MAAM,QAAQ,QAAQ,SAAS;EAC/B,IAAI,QAAQ,QAAQ,WAAW,OAAO,KAAK,QAAQ,KAAK,GAAG;EAC3D,MAAM,SAAS,OAAO,cAAc,iBAAiB;EACrD,IAAI,UAAU,QAAQ,WAAW,QAAQ,MAAM,SAAS,MAAM,GAAG;EACjE,QAAQ,aAAa,OAAO,SAAS;CACvC,CAAC;AACH"}

package/dist/menu/menu-item.d.mts

@@ -0,0 +1,45 @@
+import { Action, ActionDetails, RenderProp, StateValue } from "../internal/types.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/menu/menu-item.d.ts
+/** Details passed to `Menu.Item`'s `action`. */
+export interface MenuItemDetails extends ActionDetails {}
+export interface MenuItemState {
+  /** This item's `action` is in flight. */
+  readonly pending: boolean;
+  readonly disabled: boolean;
+}
+export interface MenuItemProps extends Omit<ComponentPropsWithRef<"button">, "onClick" | "onKeyDown" | "onPointerMove" | "disabled" | "className" | "style" | "children"> {
+  /**
+   * Runs inside this item's own transition (`data-pending` on the item); the menu stays open
+   * until it settles, then the whole menu closes (`closeOnActivate`). May be a Server Function
+   * (`details.event` is virtual). A rejection leaves the menu open and reaches the nearest Error
+   * Boundary above the item. Without `action`, activation only closes.
+   */
+  action?: Action<[details: MenuItemDetails]>;
+  /** Close the whole menu once `action` settles. Default `true`. */
+  closeOnActivate?: boolean;
+  /** Renders `aria-disabled`: the item stays focusable and never activates. */
+  disabled?: boolean;
+  /** Text typeahead matches when the item's text content is not representative (an icon). */
+  label?: string;
+  className?: StateValue<string | undefined, MenuItemState>;
+  style?: StateValue<CSSProperties | undefined, MenuItemState>;
+  children?: StateValue<ReactNode, MenuItemState>;
+  render?: RenderProp<ComponentPropsWithRef<"button">, MenuItemState>;
+}
+/**
+ * A menu command: `<button type="button" role="menuitem" tabindex="-1">`. Click, Enter or Space
+ * runs `action` in the item's own transition; once it resolves the whole menu stack closes
+ * through the top-level Root (`openChangeAction(false, { reason: "activate" })` awaited, view
+ * transition if set). Hovering the item focuses it.
+ *
+ * Owned keys (conventions 1.2): `type` (on a `<button>`), `role`, `tabIndex`, `disabled`
+ * (always absent), `aria-disabled`, `onClick`, `onKeyDown`, `onPointerMove`, `data-pending`,
+ * `data-disabled`, `data-typeahead`.
+ */
+export declare function MenuItem({ action, closeOnActivate, disabled, label, className, style, children, render, ...rest }: MenuItemProps): ReactNode;
+export declare namespace MenuItem {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=menu-item.d.mts.map

package/dist/menu/menu-item.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item.d.mts","names":[],"sources":["../../src/menu/menu-item.tsx"],"mappings":";;;;iBAWiB,wBAAwB;iBAExB;;WAEN;WACA;;iBAGM,sBAAsB,KACrC;;;;;;;EASA,SAAS,QAAQ,SAAS;;EAE1B;;EAEA;;EAEA;EACA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,iCAAiC;;;;;;;;;;;;wBAavC,WACd,QACA,iBACA,UACA,OACA,WACA,OACA,UACA,WACG,QACF,gBAAa;yBAVA"}

package/dist/menu/menu-item.mjs

@@ -0,0 +1,54 @@
+"use client";
+import { createActionDetails } from "../internal/action-details.mjs";
+import { dataAttr } from "../internal/data-attr.mjs";
+import { rendersButton, useRender } from "../internal/use-render.mjs";
+import { useActionTrigger } from "../internal/use-action-trigger.mjs";
+import { useMenuContext } from "./menu-context.mjs";
+import { useMenuItem } from "./use-menu-item.mjs";
+//#region src/menu/menu-item.tsx
+/**
+* A menu command: `<button type="button" role="menuitem" tabindex="-1">`. Click, Enter or Space
+* runs `action` in the item's own transition; once it resolves the whole menu stack closes
+* through the top-level Root (`openChangeAction(false, { reason: "activate" })` awaited, view
+* transition if set). Hovering the item focuses it.
+*
+* Owned keys (conventions 1.2): `type` (on a `<button>`), `role`, `tabIndex`, `disabled`
+* (always absent), `aria-disabled`, `onClick`, `onKeyDown`, `onPointerMove`, `data-pending`,
+* `data-disabled`, `data-typeahead`.
+*/
+function MenuItem({ action, closeOnActivate = true, disabled = false, label, className, style, children, render, ...rest }) {
+	const menu = useMenuContext("Menu.Item");
+	const { pending, run } = useActionTrigger(menu.root.popover.openGeneration);
+	const { libraryProps } = useMenuItem({
+		part: "Menu.Item",
+		role: "menuitem",
+		disabled,
+		label,
+		activate: (event) => {
+			const details = createActionDetails(event, {});
+			run(() => action?.(details), closeOnActivate ? () => menu.root.popover.requestClose(event, "activate") : void 0);
+		}
+	});
+	return useRender({
+		defaultElement: "button",
+		render,
+		state: {
+			pending,
+			disabled
+		},
+		className,
+		style,
+		children,
+		props: rest,
+		libraryProps: {
+			...rendersButton(render) && { type: "button" },
+			...libraryProps,
+			"data-pending": dataAttr(pending)
+		}
+	});
+}
+MenuItem.displayName = "MenuItem";
+//#endregion
+export { MenuItem };
+
+//# sourceMappingURL=menu-item.mjs.map

package/dist/menu/menu-item.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item.mjs","names":[],"sources":["../../src/menu/menu-item.tsx"],"sourcesContent":["\"use client\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport { createActionDetails } from \"../internal/action-details.js\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport type { Action, ActionDetails, RenderProp, StateValue } from \"../internal/types.js\";\nimport { useActionTrigger } from \"../internal/use-action-trigger.js\";\nimport { rendersButton, useRender } from \"../internal/use-render.js\";\nimport { useMenuContext } from \"./menu-context.js\";\nimport { useMenuItem } from \"./use-menu-item.js\";\n\n/** Details passed to `Menu.Item`'s `action`. */\nexport interface MenuItemDetails extends ActionDetails {}\n\nexport interface MenuItemState {\n  /** This item's `action` is in flight. */\n  readonly pending: boolean;\n  readonly disabled: boolean;\n}\n\nexport interface MenuItemProps extends Omit<\n  ComponentPropsWithRef<\"button\">,\n  \"onClick\" | \"onKeyDown\" | \"onPointerMove\" | \"disabled\" | \"className\" | \"style\" | \"children\"\n> {\n  /**\n   * Runs inside this item's own transition (`data-pending` on the item); the menu stays open\n   * until it settles, then the whole menu closes (`closeOnActivate`). May be a Server Function\n   * (`details.event` is virtual). A rejection leaves the menu open and reaches the nearest Error\n   * Boundary above the item. Without `action`, activation only closes.\n   */\n  action?: Action<[details: MenuItemDetails]>;\n  /** Close the whole menu once `action` settles. Default `true`. */\n  closeOnActivate?: boolean;\n  /** Renders `aria-disabled`: the item stays focusable and never activates. */\n  disabled?: boolean;\n  /** Text typeahead matches when the item's text content is not representative (an icon). */\n  label?: string;\n  className?: StateValue<string | undefined, MenuItemState>;\n  style?: StateValue<CSSProperties | undefined, MenuItemState>;\n  children?: StateValue<ReactNode, MenuItemState>;\n  render?: RenderProp<ComponentPropsWithRef<\"button\">, MenuItemState>;\n}\n\n/**\n * A menu command: `<button type=\"button\" role=\"menuitem\" tabindex=\"-1\">`. Click, Enter or Space\n * runs `action` in the item's own transition; once it resolves the whole menu stack closes\n * through the top-level Root (`openChangeAction(false, { reason: \"activate\" })` awaited, view\n * transition if set). Hovering the item focuses it.\n *\n * Owned keys (conventions 1.2): `type` (on a `<button>`), `role`, `tabIndex`, `disabled`\n * (always absent), `aria-disabled`, `onClick`, `onKeyDown`, `onPointerMove`, `data-pending`,\n * `data-disabled`, `data-typeahead`.\n */\nexport function MenuItem({\n  action,\n  closeOnActivate = true,\n  disabled = false,\n  label,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: MenuItemProps) {\n  const menu = useMenuContext(\"Menu.Item\");\n  // The close belongs to the top-level menu, so its open generation guards it.\n  const { pending, run } = useActionTrigger(menu.root.popover.openGeneration);\n\n  const { libraryProps } = useMenuItem({\n    part: \"Menu.Item\",\n    role: \"menuitem\",\n    disabled,\n    label,\n    activate: (event) => {\n      const details: MenuItemDetails = createActionDetails(event, {});\n      // Repeated activations re-run the action; the first close wins (design 2.3).\n      run(\n        () => action?.(details),\n        closeOnActivate ? () => menu.root.popover.requestClose(event, \"activate\") : undefined,\n      );\n    },\n  });\n\n  const state: MenuItemState = { pending, disabled };\n\n  return useRender<ComponentPropsWithRef<\"button\">, MenuItemState>({\n    defaultElement: \"button\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps: {\n      ...(rendersButton(render) && { type: \"button\" as const }),\n      ...libraryProps,\n      \"data-pending\": dataAttr(pending),\n    },\n  });\n}\n\nMenuItem.displayName = \"MenuItem\";\n"],"mappings":";;;;;;;;;;;;;;;;;;AAoDA,SAAgB,SAAS,EACvB,QACA,kBAAkB,MAClB,WAAW,OACX,OACA,WACA,OACA,UACA,QACA,GAAG,QACa;CAChB,MAAM,OAAO,eAAe,WAAW;CAEvC,MAAM,EAAE,SAAS,QAAQ,iBAAiB,KAAK,KAAK,QAAQ,cAAc;CAE1E,MAAM,EAAE,iBAAiB,YAAY;EACnC,MAAM;EACN,MAAM;EACN;EACA;EACA,WAAW,UAAU;GACnB,MAAM,UAA2B,oBAAoB,OAAO,CAAC,CAAC;GAE9D,UACQ,SAAS,OAAO,GACtB,wBAAwB,KAAK,KAAK,QAAQ,aAAa,OAAO,UAAU,IAAI,KAAA,CAC9E;EACF;CACF,CAAC;CAID,OAAO,UAA0D;EAC/D,gBAAgB;EAChB;EACA,OAAA;GAL6B;GAAS;EAKlC;EACJ;EACA;EACA;EACA,OAAO;EACP,cAAc;GACZ,GAAI,cAAc,MAAM,KAAK,EAAE,MAAM,SAAkB;GACvD,GAAG;GACH,gBAAgB,SAAS,OAAO;EAClC;CACF,CAAC;AACH;AAEA,SAAS,cAAc"}