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

package/dist/menu/menu-root.mjs

@@ -0,0 +1,102 @@
+"use client";
+import { resolveStateValue } from "../internal/use-render.mjs";
+import { useDevWarning } from "../internal/use-dev-warning.mjs";
+import { useDelayedPair } from "../internal/use-delayed-pair.mjs";
+import { usePopoverRoot } from "../internal/use-popover-root.mjs";
+import { MenuContext, MenuListContext } from "./menu-context.mjs";
+import { use, useCallback, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/menu/menu-root.tsx
+/**
+* Owns the ids, the open state and the context of one menu level. Renders no DOM. A `Menu.Root`
+* rendered inside a `Menu.Popup` is a **submenu**: its Trigger is a `Menu.SubmenuTrigger` (an
+* item of the parent menu) and its Popup opens beside that item.
+*
+* A menu is always in library mode (design/components/menu.md 2.1): opening and the closes a
+* part asks for are transitions (pending Trigger, items render from committed state,
+* `showPopover()` / `hidePopover()` once the change has committed); dismissals are the
+* browser's and `openChangeAction(false)` is a notification.
+*/
+const DEFAULT_FOCUS = {
+	cause: "first",
+	pointer: false
+};
+function MenuRoot({ open, defaultOpen, openChangeAction, loop = true, delay, closeDelay, children }) {
+	const parent = use(MenuContext);
+	const list = use(MenuListContext);
+	const parentMenu = list !== null ? list.menu : null;
+	const submenu = parentMenu !== null;
+	useDevWarning(!submenu && (delay !== void 0 || closeDelay !== void 0), "Menu.Root: `delay` and `closeDelay` only apply to a submenu (a Menu.Root inside a Menu.Popup); a top-level menu does not open on hover.");
+	useDevWarning(parent !== null && !submenu, "Menu.Root: rendered inside another Menu.Root but outside its Menu.Popup. A submenu's Root goes inside the parent's Menu.Popup.");
+	const timers = useDelayedPair();
+	const nextCause = useRef(null);
+	const openCause = useRef(null);
+	const popover = usePopoverRoot({
+		component: "menu",
+		part: "Menu.Root",
+		mode: "library",
+		open,
+		defaultOpen,
+		openChangeAction,
+		onDispatch: (next) => {
+			timers.cancel();
+			if (next) openCause.current = nextCause.current ?? DEFAULT_FOCUS;
+			nextCause.current = null;
+		}
+	});
+	const setOpenCause = useCallback((cause, pointer = false) => {
+		nextCause.current = {
+			cause,
+			pointer
+		};
+	}, []);
+	const takeOpenCause = useCallback(() => {
+		const cause = openCause.current ?? DEFAULT_FOCUS;
+		openCause.current = null;
+		return cause;
+	}, []);
+	const resolvedDelay = delay ?? 100;
+	const resolvedCloseDelay = closeDelay ?? 150;
+	const value = useMemo(() => {
+		const self = {
+			popover,
+			submenu,
+			get root() {
+				return parentMenu?.root ?? self;
+			},
+			parent: parentMenu,
+			loop,
+			delay: resolvedDelay,
+			closeDelay: resolvedCloseDelay,
+			triggerId: `${popover.ids.popup}-trigger`,
+			setOpenCause,
+			takeOpenCause,
+			timers
+		};
+		return self;
+	}, [
+		popover,
+		submenu,
+		parentMenu,
+		loop,
+		resolvedDelay,
+		resolvedCloseDelay,
+		setOpenCause,
+		takeOpenCause,
+		timers
+	]);
+	const state = {
+		open: popover.optimistic,
+		pending: popover.pending,
+		submenu
+	};
+	return /* @__PURE__ */ jsx(MenuContext, {
+		value,
+		children: resolveStateValue(children, state)
+	});
+}
+MenuRoot.displayName = "MenuRoot";
+//#endregion
+export { MenuRoot };
+
+//# sourceMappingURL=menu-root.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-root.mjs","names":[],"sources":["../../src/menu/menu-root.tsx"],"sourcesContent":["\"use client\";\nimport { use, useCallback, useMemo, useRef } from \"react\";\nimport type { ReactNode } from \"react\";\nimport type { ActionDetails, ChangeAction, ChangeReason, StateValue } from \"../internal/types.js\";\nimport { useDelayedPair } from \"../internal/use-delayed-pair.js\";\nimport { useDevWarning } from \"../internal/use-dev-warning.js\";\nimport { usePopoverRoot } from \"../internal/use-popover-root.js\";\nimport { resolveStateValue } from \"../internal/use-render.js\";\nimport { MenuContext, MenuListContext } from \"./menu-context.js\";\nimport type { MenuContextValue, MenuOpenFocus } from \"./menu-context.js\";\n\n/** Details passed as the second argument of `Menu.Root`'s `openChangeAction`. */\nexport interface MenuOpenChangeDetails extends ActionDetails {\n  /**\n   * `\"activate\"`: the user acted on a part: the Trigger or SubmenuTrigger (click, Enter / Space,\n   * arrow keys), an item's activation (the close after its action), ArrowLeft in a submenu, or a\n   * foreign invoker.\n   * `\"dismiss\"`: Escape, a click outside, Tab or focus leaving the menu, the pointer leaving a\n   * hover-opened submenu, the parent menu closing (a submenu when the whole stack closes), script.\n   * `\"platform\"`: the menu was found open on mount (opened before hydration); `event` is\n   * `undefined`.\n   */\n  readonly reason: ChangeReason;\n}\n\nexport interface MenuRootState {\n  /** Optimistic open state. Content rendered from it must not suspend. */\n  readonly open: boolean;\n  /** An open or close of this Root is in flight (its `openChangeAction`). */\n  readonly pending: boolean;\n  /** This Root is a submenu (rendered inside a `Menu.Popup`). */\n  readonly submenu: boolean;\n}\n\nexport interface MenuRootProps {\n  /** Controlled open state. `undefined` means uncontrolled. */\n  open?: boolean;\n  /** Initial open state when uncontrolled. Opens after hydration. */\n  defaultOpen?: boolean;\n  /**\n   * Awaited for `true` (the menu opens when it resolves and the items have rendered) and for the\n   * closes the user asks a part for (Trigger toggle, an item's activation, ArrowLeft in a\n   * submenu); a notification for dismissals (Escape, a click outside, Tab, the parent menu\n   * closing). May be a Server Function. A `setState` placed after your own `await` needs\n   * `startTransition` (React limitation).\n   */\n  openChangeAction?: ChangeAction<boolean, MenuOpenChangeDetails>;\n  /** Arrow keys wrap from the last item to the first and back. Default `true`. */\n  loop?: boolean;\n  /** Submenu only: milliseconds from hovering the SubmenuTrigger to the open. Default 100. */\n  delay?: number;\n  /**\n   * Submenu only: milliseconds from the pointer leaving the SubmenuTrigger and the submenu to the\n   * close. Default 150.\n   */\n  closeDelay?: number;\n  children?: StateValue<ReactNode, MenuRootState>;\n}\n\n/**\n * Owns the ids, the open state and the context of one menu level. Renders no DOM. A `Menu.Root`\n * rendered inside a `Menu.Popup` is a **submenu**: its Trigger is a `Menu.SubmenuTrigger` (an\n * item of the parent menu) and its Popup opens beside that item.\n *\n * A menu is always in library mode (design/components/menu.md 2.1): opening and the closes a\n * part asks for are transitions (pending Trigger, items render from committed state,\n * `showPopover()` / `hidePopover()` once the change has committed); dismissals are the\n * browser's and `openChangeAction(false)` is a notification.\n */\nconst DEFAULT_FOCUS: MenuOpenFocus = { cause: \"first\", pointer: false };\n\nexport function MenuRoot({\n  open,\n  defaultOpen,\n  openChangeAction,\n  loop = true,\n  delay,\n  closeDelay,\n  children,\n}: MenuRootProps) {\n  const parent = use(MenuContext);\n  const list = use(MenuListContext);\n  // A Root inside a Popup's content is a submenu (design 1); the enclosing menu is the Popup's.\n  const parentMenu = list !== null ? list.menu : null;\n  const submenu = parentMenu !== null;\n\n  useDevWarning(\n    !submenu && (delay !== undefined || closeDelay !== undefined),\n    \"Menu.Root: `delay` and `closeDelay` only apply to a submenu (a Menu.Root inside a \" +\n      \"Menu.Popup); a top-level menu does not open on hover.\",\n  );\n  useDevWarning(\n    parent !== null && !submenu,\n    \"Menu.Root: rendered inside another Menu.Root but outside its Menu.Popup. A submenu's Root \" +\n      \"goes inside the parent's Menu.Popup.\",\n  );\n\n  const timers = useDelayedPair();\n  // The cause recorded by the part about to dispatch an open, and the cause of the open being\n  // shown (design 14, \"Open cause\").\n  const nextCause = useRef<MenuOpenFocus | null>(null);\n  const openCause = useRef<MenuOpenFocus | null>(null);\n\n  const popover = usePopoverRoot<MenuOpenChangeDetails>({\n    component: \"menu\",\n    part: \"Menu.Root\",\n    mode: \"library\",\n    open,\n    defaultOpen,\n    openChangeAction,\n    onDispatch: (next) => {\n      // Any dispatch cancels hover intent (walkthrough 9).\n      timers.cancel();\n      if (next) openCause.current = nextCause.current ?? DEFAULT_FOCUS;\n      nextCause.current = null;\n    },\n  });\n\n  const setOpenCause = useCallback((cause: MenuOpenFocus[\"cause\"], pointer = false) => {\n    nextCause.current = { cause, pointer };\n  }, []);\n  const takeOpenCause = useCallback(() => {\n    const cause = openCause.current ?? DEFAULT_FOCUS;\n    openCause.current = null;\n    return cause;\n  }, []);\n\n  const resolvedDelay = delay ?? 100;\n  const resolvedCloseDelay = closeDelay ?? 150;\n  // Note: `popover` is a new object on every render (the shared `usePopoverRoot` is not memoised:\n  // its `dispatch` closes over the render's state), so today this recomputes on every render of\n  // the Root and the parts re-render with it, as Popover's do. The other members are stable; the\n  // memo starts to hit without further change once that hook returns a stable value.\n  const value = useMemo<MenuContextValue>(() => {\n    const self: MenuContextValue = {\n      popover,\n      submenu,\n      // The top-level menu: this one, or the parent's root (design 2.2).\n      get root() {\n        return parentMenu?.root ?? self;\n      },\n      parent: parentMenu,\n      loop,\n      delay: resolvedDelay,\n      closeDelay: resolvedCloseDelay,\n      triggerId: `${popover.ids.popup}-trigger`,\n      setOpenCause,\n      takeOpenCause,\n      timers,\n    };\n    return self;\n  }, [\n    popover,\n    submenu,\n    parentMenu,\n    loop,\n    resolvedDelay,\n    resolvedCloseDelay,\n    setOpenCause,\n    takeOpenCause,\n    timers,\n  ]);\n\n  const state: MenuRootState = {\n    open: popover.optimistic,\n    pending: popover.pending,\n    submenu,\n  };\n\n  return <MenuContext value={value}>{resolveStateValue(children, state)}</MenuContext>;\n}\n\nMenuRoot.displayName = \"MenuRoot\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAqEA,MAAM,gBAA+B;CAAE,OAAO;CAAS,SAAS;AAAM;AAEtE,SAAgB,SAAS,EACvB,MACA,aACA,kBACA,OAAO,MACP,OACA,YACA,YACgB;CAChB,MAAM,SAAS,IAAI,WAAW;CAC9B,MAAM,OAAO,IAAI,eAAe;CAEhC,MAAM,aAAa,SAAS,OAAO,KAAK,OAAO;CAC/C,MAAM,UAAU,eAAe;CAE/B,cACE,CAAC,YAAY,UAAU,KAAA,KAAa,eAAe,KAAA,IACnD,yIAEF;CACA,cACE,WAAW,QAAQ,CAAC,SACpB,gIAEF;CAEA,MAAM,SAAS,eAAe;CAG9B,MAAM,YAAY,OAA6B,IAAI;CACnD,MAAM,YAAY,OAA6B,IAAI;CAEnD,MAAM,UAAU,eAAsC;EACpD,WAAW;EACX,MAAM;EACN,MAAM;EACN;EACA;EACA;EACA,aAAa,SAAS;GAEpB,OAAO,OAAO;GACd,IAAI,MAAM,UAAU,UAAU,UAAU,WAAW;GACnD,UAAU,UAAU;EACtB;CACF,CAAC;CAED,MAAM,eAAe,aAAa,OAA+B,UAAU,UAAU;EACnF,UAAU,UAAU;GAAE;GAAO;EAAQ;CACvC,GAAG,CAAC,CAAC;CACL,MAAM,gBAAgB,kBAAkB;EACtC,MAAM,QAAQ,UAAU,WAAW;EACnC,UAAU,UAAU;EACpB,OAAO;CACT,GAAG,CAAC,CAAC;CAEL,MAAM,gBAAgB,SAAS;CAC/B,MAAM,qBAAqB,cAAc;CAKzC,MAAM,QAAQ,cAAgC;EAC5C,MAAM,OAAyB;GAC7B;GACA;GAEA,IAAI,OAAO;IACT,OAAO,YAAY,QAAQ;GAC7B;GACA,QAAQ;GACR;GACA,OAAO;GACP,YAAY;GACZ,WAAW,GAAG,QAAQ,IAAI,MAAM;GAChC;GACA;GACA;EACF;EACA,OAAO;CACT,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,QAAuB;EAC3B,MAAM,QAAQ;EACd,SAAS,QAAQ;EACjB;CACF;CAEA,OAAO,oBAAC,aAAD;EAAoB;EAAQ,UAAA,kBAAkB,UAAU,KAAK;CAAe,CAAA;AACrF;AAEA,SAAS,cAAc"}

package/dist/menu/menu-submenu-trigger.d.mts

@@ -0,0 +1,31 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { MenuItemProps } from "./menu-item.mjs";
+import { MenuTriggerState } from "./menu-trigger.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/menu/menu-submenu-trigger.d.ts
+export type MenuSubmenuTriggerState = MenuTriggerState;
+export interface MenuSubmenuTriggerProps extends Omit<MenuItemProps, "action" | "closeOnActivate" | "aria-expanded" | "aria-haspopup" | "onPointerEnter" | "onPointerLeave" | "className" | "style" | "children" | "render"> {
+  className?: StateValue<string | undefined, MenuSubmenuTriggerState>;
+  style?: StateValue<CSSProperties | undefined, MenuSubmenuTriggerState>;
+  /** Rendered from optimistic state; must not suspend. */
+  children?: StateValue<ReactNode, MenuSubmenuTriggerState>;
+  render?: RenderProp<ComponentPropsWithRef<"button">, MenuSubmenuTriggerState>;
+}
+/**
+ * The item that opens a submenu: an item of the parent menu (`role="menuitem"`, roving
+ * `tabindex`, typeahead) and the Trigger of the submenu's Root (`commandfor`,
+ * `command="toggle-popover"`, `aria-haspopup="menu"`, `aria-expanded`). ArrowRight (ArrowLeft in
+ * RTL), Enter, Space or a click open the submenu with its first item focused; hovering it opens
+ * the submenu after the Root's `delay` and leaves focus where it is.
+ *
+ * Owned keys (conventions 1.2): the Trigger's (`type`, `id`, `commandfor`, `command`,
+ * `aria-haspopup`, `aria-expanded`, `data-open`, `data-pending`) and the item's (`role`,
+ * `tabIndex`, `disabled` (absent), `aria-disabled`, `data-disabled`, `data-typeahead`,
+ * `onClick`, `onKeyDown`, `onPointerMove`, `onPointerEnter`, `onPointerLeave`).
+ */
+export declare function MenuSubmenuTrigger({ disabled, label, className, style, children, render, ...rest }: MenuSubmenuTriggerProps): ReactNode;
+export declare namespace MenuSubmenuTrigger {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=menu-submenu-trigger.d.mts.map

package/dist/menu/menu-submenu-trigger.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-submenu-trigger.d.mts","names":[],"sources":["../../src/menu/menu-submenu-trigger.tsx"],"mappings":";;;;;YAoBY,0BAA0B;iBAErB,gCAAgC,KAC/C;EAYA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;;EAE9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,iCAAiC;;;;;;;;;;;;;;wBAevC,qBACd,UACA,OACA,WACA,OACA,UACA,WACG,QACF,0BAAuB;yBARV"}

package/dist/menu/menu-submenu-trigger.mjs

@@ -0,0 +1,92 @@
+"use client";
+import { useRender } from "../internal/use-render.mjs";
+import { useDevWarning } from "../internal/use-dev-warning.mjs";
+import { usePopoverTrigger } from "../internal/use-popover-trigger.mjs";
+import { useMenuContext } from "./menu-context.mjs";
+import { hasModifier, isRtl } from "./menu-dom.mjs";
+import { useMenuItem } from "./use-menu-item.mjs";
+import { scheduleHoverClose } from "./menu-hover.mjs";
+import { openMenuWithFocus } from "./menu-trigger.mjs";
+//#region src/menu/menu-submenu-trigger.tsx
+/**
+* The item that opens a submenu: an item of the parent menu (`role="menuitem"`, roving
+* `tabindex`, typeahead) and the Trigger of the submenu's Root (`commandfor`,
+* `command="toggle-popover"`, `aria-haspopup="menu"`, `aria-expanded`). ArrowRight (ArrowLeft in
+* RTL), Enter, Space or a click open the submenu with its first item focused; hovering it opens
+* the submenu after the Root's `delay` and leaves focus where it is.
+*
+* Owned keys (conventions 1.2): the Trigger's (`type`, `id`, `commandfor`, `command`,
+* `aria-haspopup`, `aria-expanded`, `data-open`, `data-pending`) and the item's (`role`,
+* `tabIndex`, `disabled` (absent), `aria-disabled`, `data-disabled`, `data-typeahead`,
+* `onClick`, `onKeyDown`, `onPointerMove`, `onPointerEnter`, `onPointerLeave`).
+*/
+function MenuSubmenuTrigger({ disabled = false, label, className, style, children, render, ...rest }) {
+	const menu = useMenuContext("Menu.SubmenuTrigger");
+	useDevWarning(!menu.submenu, "Menu.SubmenuTrigger: rendered in a top-level Menu.Root. Use Menu.Trigger, or put this Root inside the parent's Menu.Popup.");
+	const open = (event) => openMenuWithFocus(menu, event, "first");
+	const item = useMenuItem({
+		part: "Menu.SubmenuTrigger",
+		role: "menuitem",
+		disabled,
+		label,
+		activate: open
+	});
+	const onKeyDown = (event) => {
+		if (event.defaultPrevented || hasModifier(event) || disabled) return;
+		const parentPopup = event.currentTarget.closest("[role=\"menu\"]");
+		const forward = parentPopup !== null && isRtl(parentPopup) ? "ArrowLeft" : "ArrowRight";
+		if (event.key !== forward) return;
+		event.preventDefault();
+		open(event.nativeEvent);
+	};
+	const { state, libraryProps, ref } = usePopoverTrigger(menu.popover, {
+		part: "Menu.SubmenuTrigger",
+		disabled,
+		render,
+		disabledAs: "aria",
+		handlers: {
+			onKeyDown: (event) => {
+				item.libraryProps.onKeyDown(event);
+				onKeyDown(event);
+			},
+			onPointerMove: item.libraryProps.onPointerMove,
+			onPointerEnter: (event) => {
+				if (disabled || event.pointerType === "touch") return;
+				const native = event.nativeEvent;
+				menu.timers.open(menu.delay, () => {
+					menu.setOpenCause("none");
+					menu.popover.requestOpen(native, "activate");
+				});
+			},
+			onPointerLeave: (event) => {
+				if (event.pointerType === "touch") return;
+				if (menu.popover.intended()) scheduleHoverClose(menu, event.nativeEvent);
+				else menu.timers.cancel();
+			}
+		},
+		activate: (event) => open(event.nativeEvent)
+	});
+	return useRender({
+		defaultElement: "button",
+		render,
+		state,
+		className,
+		style,
+		children,
+		props: rest,
+		libraryProps: {
+			...libraryProps,
+			role: item.libraryProps.role,
+			tabIndex: item.libraryProps.tabIndex,
+			"data-typeahead": item.libraryProps["data-typeahead"],
+			id: menu.triggerId,
+			"aria-haspopup": "menu"
+		},
+		ref
+	});
+}
+MenuSubmenuTrigger.displayName = "MenuSubmenuTrigger";
+//#endregion
+export { MenuSubmenuTrigger };
+
+//# sourceMappingURL=menu-submenu-trigger.mjs.map

package/dist/menu/menu-submenu-trigger.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-submenu-trigger.mjs","names":[],"sources":["../../src/menu/menu-submenu-trigger.tsx"],"sourcesContent":["\"use client\";\nimport type {\n  ComponentPropsWithRef,\n  CSSProperties,\n  KeyboardEvent,\n  PointerEvent,\n  ReactNode,\n} from \"react\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useDevWarning } from \"../internal/use-dev-warning.js\";\nimport { usePopoverTrigger } from \"../internal/use-popover-trigger.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { useMenuContext } from \"./menu-context.js\";\nimport { hasModifier, isRtl } from \"./menu-dom.js\";\nimport { scheduleHoverClose } from \"./menu-hover.js\";\nimport type { MenuItemProps } from \"./menu-item.js\";\nimport { openMenuWithFocus } from \"./menu-trigger.js\";\nimport type { MenuTriggerState } from \"./menu-trigger.js\";\nimport { useMenuItem } from \"./use-menu-item.js\";\n\nexport type MenuSubmenuTriggerState = MenuTriggerState;\n\nexport interface MenuSubmenuTriggerProps extends Omit<\n  MenuItemProps,\n  | \"action\"\n  | \"closeOnActivate\"\n  | \"aria-expanded\"\n  | \"aria-haspopup\"\n  | \"onPointerEnter\"\n  | \"onPointerLeave\"\n  | \"className\"\n  | \"style\"\n  | \"children\"\n  | \"render\"\n> {\n  className?: StateValue<string | undefined, MenuSubmenuTriggerState>;\n  style?: StateValue<CSSProperties | undefined, MenuSubmenuTriggerState>;\n  /** Rendered from optimistic state; must not suspend. */\n  children?: StateValue<ReactNode, MenuSubmenuTriggerState>;\n  render?: RenderProp<ComponentPropsWithRef<\"button\">, MenuSubmenuTriggerState>;\n}\n\n/**\n * The item that opens a submenu: an item of the parent menu (`role=\"menuitem\"`, roving\n * `tabindex`, typeahead) and the Trigger of the submenu's Root (`commandfor`,\n * `command=\"toggle-popover\"`, `aria-haspopup=\"menu\"`, `aria-expanded`). ArrowRight (ArrowLeft in\n * RTL), Enter, Space or a click open the submenu with its first item focused; hovering it opens\n * the submenu after the Root's `delay` and leaves focus where it is.\n *\n * Owned keys (conventions 1.2): the Trigger's (`type`, `id`, `commandfor`, `command`,\n * `aria-haspopup`, `aria-expanded`, `data-open`, `data-pending`) and the item's (`role`,\n * `tabIndex`, `disabled` (absent), `aria-disabled`, `data-disabled`, `data-typeahead`,\n * `onClick`, `onKeyDown`, `onPointerMove`, `onPointerEnter`, `onPointerLeave`).\n */\nexport function MenuSubmenuTrigger({\n  disabled = false,\n  label,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: MenuSubmenuTriggerProps) {\n  const menu = useMenuContext(\"Menu.SubmenuTrigger\");\n  useDevWarning(\n    !menu.submenu,\n    \"Menu.SubmenuTrigger: rendered in a top-level Menu.Root. Use Menu.Trigger, or put this Root \" +\n      \"inside the parent's Menu.Popup.\",\n  );\n\n  const open = (event: Event) => openMenuWithFocus(menu, event, \"first\");\n\n  // The item half: role, roving tabindex, aria-disabled, Enter / Space, pointer focus. Its\n  // activation is the click, which the trigger half handles (`activate` below).\n  const item = useMenuItem({\n    part: \"Menu.SubmenuTrigger\",\n    role: \"menuitem\",\n    disabled,\n    label,\n    activate: open,\n  });\n\n  const onKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (event.defaultPrevented || hasModifier(event) || disabled) return;\n    const parentPopup = event.currentTarget.closest('[role=\"menu\"]');\n    const forward = parentPopup !== null && isRtl(parentPopup) ? \"ArrowLeft\" : \"ArrowRight\";\n    if (event.key !== forward) return;\n    event.preventDefault();\n    open(event.nativeEvent);\n  };\n\n  const { state, libraryProps, ref } = usePopoverTrigger(menu.popover, {\n    part: \"Menu.SubmenuTrigger\",\n    disabled,\n    render,\n    disabledAs: \"aria\",\n    // Item first (Enter / Space activation, pointer focus), then the submenu keys.\n    handlers: {\n      onKeyDown: (event) => {\n        item.libraryProps.onKeyDown(event);\n        onKeyDown(event);\n      },\n      onPointerMove: item.libraryProps.onPointerMove,\n      onPointerEnter: (event: PointerEvent<HTMLButtonElement>) => {\n        if (disabled || event.pointerType === \"touch\") return;\n        const native = event.nativeEvent;\n        menu.timers.open(menu.delay, () => {\n          menu.setOpenCause(\"none\");\n          menu.popover.requestOpen(native, \"activate\");\n        });\n      },\n      onPointerLeave: (event: PointerEvent<HTMLButtonElement>) => {\n        if (event.pointerType === \"touch\") return;\n        // Leaving before the open delay cancels it; leaving an open submenu's trigger starts the\n        // close delay (cancelled by entering the submenu).\n        if (menu.popover.intended()) scheduleHoverClose(menu, event.nativeEvent);\n        else menu.timers.cancel();\n      },\n    },\n    // A click opens (or moves focus into the open submenu); it never closes.\n    activate: (event) => open(event.nativeEvent),\n  });\n\n  return useRender<ComponentPropsWithRef<\"button\">, MenuSubmenuTriggerState>({\n    defaultElement: \"button\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps: {\n      ...libraryProps,\n      role: item.libraryProps.role,\n      tabIndex: item.libraryProps.tabIndex,\n      \"data-typeahead\": item.libraryProps[\"data-typeahead\"],\n      id: menu.triggerId,\n      \"aria-haspopup\": \"menu\",\n    },\n    ref,\n  });\n}\n\nMenuSubmenuTrigger.displayName = \"MenuSubmenuTrigger\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAsDA,SAAgB,mBAAmB,EACjC,WAAW,OACX,OACA,WACA,OACA,UACA,QACA,GAAG,QACuB;CAC1B,MAAM,OAAO,eAAe,qBAAqB;CACjD,cACE,CAAC,KAAK,SACN,4HAEF;CAEA,MAAM,QAAQ,UAAiB,kBAAkB,MAAM,OAAO,OAAO;CAIrE,MAAM,OAAO,YAAY;EACvB,MAAM;EACN,MAAM;EACN;EACA;EACA,UAAU;CACZ,CAAC;CAED,MAAM,aAAa,UAA4C;EAC7D,IAAI,MAAM,oBAAoB,YAAY,KAAK,KAAK,UAAU;EAC9D,MAAM,cAAc,MAAM,cAAc,QAAQ,iBAAe;EAC/D,MAAM,UAAU,gBAAgB,QAAQ,MAAM,WAAW,IAAI,cAAc;EAC3E,IAAI,MAAM,QAAQ,SAAS;EAC3B,MAAM,eAAe;EACrB,KAAK,MAAM,WAAW;CACxB;CAEA,MAAM,EAAE,OAAO,cAAc,QAAQ,kBAAkB,KAAK,SAAS;EACnE,MAAM;EACN;EACA;EACA,YAAY;EAEZ,UAAU;GACR,YAAY,UAAU;IACpB,KAAK,aAAa,UAAU,KAAK;IACjC,UAAU,KAAK;GACjB;GACA,eAAe,KAAK,aAAa;GACjC,iBAAiB,UAA2C;IAC1D,IAAI,YAAY,MAAM,gBAAgB,SAAS;IAC/C,MAAM,SAAS,MAAM;IACrB,KAAK,OAAO,KAAK,KAAK,aAAa;KACjC,KAAK,aAAa,MAAM;KACxB,KAAK,QAAQ,YAAY,QAAQ,UAAU;IAC7C,CAAC;GACH;GACA,iBAAiB,UAA2C;IAC1D,IAAI,MAAM,gBAAgB,SAAS;IAGnC,IAAI,KAAK,QAAQ,SAAS,GAAG,mBAAmB,MAAM,MAAM,WAAW;SAClE,KAAK,OAAO,OAAO;GAC1B;EACF;EAEA,WAAW,UAAU,KAAK,MAAM,WAAW;CAC7C,CAAC;CAED,OAAO,UAAoE;EACzE,gBAAgB;EAChB;EACA;EACA;EACA;EACA;EACA,OAAO;EACP,cAAc;GACZ,GAAG;GACH,MAAM,KAAK,aAAa;GACxB,UAAU,KAAK,aAAa;GAC5B,kBAAkB,KAAK,aAAa;GACpC,IAAI,KAAK;GACT,iBAAiB;EACnB;EACA;CACF,CAAC;AACH;AAEA,mBAAmB,cAAc"}

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

@@ -0,0 +1,36 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import "./menu-context.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/menu/menu-trigger.d.ts
+export interface MenuTriggerState {
+  /** Optimistic open state. */
+  readonly open: boolean;
+  /** The Root's transition is pending (an open, a part-initiated close or a dismissal notification). */
+  readonly pending: boolean;
+  readonly disabled: boolean;
+}
+export interface MenuTriggerProps extends Omit<ComponentPropsWithRef<"button">, "onClick" | "onKeyDown" | "aria-expanded" | "aria-haspopup" | "className" | "style" | "children"> {
+  /** Native `disabled`: the menu cannot be opened from this button. */
+  disabled?: boolean;
+  className?: StateValue<string | undefined, MenuTriggerState>;
+  style?: StateValue<CSSProperties | undefined, MenuTriggerState>;
+  /** Rendered from optimistic state; must not suspend. */
+  children?: StateValue<ReactNode, MenuTriggerState>;
+  /** Should render a `<button>` (the command path before hydration). */
+  render?: RenderProp<ComponentPropsWithRef<"button">, MenuTriggerState>;
+}
+/**
+ * The menu button: `<button type="button" commandfor command="toggle-popover"
+ * aria-haspopup="menu" aria-expanded>`. A click (Enter, Space) toggles the menu through the
+ * Root's transition; ArrowDown / ArrowUp open it with the first / last item focused.
+ *
+ * Owned keys (conventions 1.2): `type` (on a `<button>` only), `id`, `disabled`, `commandfor`,
+ * `command`, `aria-haspopup`, `aria-expanded`, `onClick`, `onKeyDown`, `data-open`,
+ * `data-pending`, `data-disabled`.
+ */
+export declare function MenuTrigger({ disabled, className, style, children, render, ...rest }: MenuTriggerProps): ReactNode;
+export declare namespace MenuTrigger {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=menu-trigger.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-trigger.d.mts","names":[],"sources":["../../src/menu/menu-trigger.tsx"],"mappings":";;;;iBAUiB;;WAEN;;WAEA;WACA;;iBAGM,yBAAyB,KACxC;;EAIA;EACA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;;EAE9C,WAAW,WAAW,WAAW;;EAEjC,SAAS,WAAW,iCAAiC;;;;;;;;;;;wBAuCvC,cACd,UACA,WACA,OACA,UACA,WACG,QACF,mBAAgB;yBAPH"}

package/dist/menu/menu-trigger.mjs

@@ -0,0 +1,81 @@
+"use client";
+import { useRender } from "../internal/use-render.mjs";
+import { useDevWarning } from "../internal/use-dev-warning.mjs";
+import { usePopoverTrigger } from "../internal/use-popover-trigger.mjs";
+import { useMenuContext } from "./menu-context.mjs";
+import { edgeItem, focusItem, hasModifier } from "./menu-dom.mjs";
+//#region src/menu/menu-trigger.tsx
+/**
+* Opens with the first (`"first"`) or last (`"last"`) item focused, or focuses that item when the
+* menu is already open (a pre-hydration open, walkthrough 10). Shared with SubmenuTrigger.
+*/
+function openMenuWithFocus(menu, event, which) {
+	const { popover } = menu;
+	if (popover.intended()) {
+		const popup = popover.popupRef.current;
+		if (popup !== null && popup.matches(":popover-open")) {
+			const item = edgeItem(popup, which);
+			if (item !== null) focusItem(item);
+		}
+		return;
+	}
+	menu.setOpenCause(which, isPointerClick(event));
+	popover.requestOpen(event, "activate");
+}
+/** A click from a pointing device (`detail` counts clicks; keyboard and `click()` give 0). */
+function isPointerClick(event) {
+	return event.type === "click" && event.detail > 0;
+}
+/**
+* The menu button: `<button type="button" commandfor command="toggle-popover"
+* aria-haspopup="menu" aria-expanded>`. A click (Enter, Space) toggles the menu through the
+* Root's transition; ArrowDown / ArrowUp open it with the first / last item focused.
+*
+* Owned keys (conventions 1.2): `type` (on a `<button>` only), `id`, `disabled`, `commandfor`,
+* `command`, `aria-haspopup`, `aria-expanded`, `onClick`, `onKeyDown`, `data-open`,
+* `data-pending`, `data-disabled`.
+*/
+function MenuTrigger({ disabled = false, className, style, children, render, ...rest }) {
+	const menu = useMenuContext("Menu.Trigger");
+	useDevWarning(menu.submenu, "Menu.Trigger: rendered in a submenu. Use Menu.SubmenuTrigger, which is also an item of the parent menu.");
+	const onKeyDown = (event) => {
+		if (disabled || hasModifier(event)) return;
+		if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
+		event.preventDefault();
+		openMenuWithFocus(menu, event.nativeEvent, event.key === "ArrowDown" ? "first" : "last");
+	};
+	const { state, libraryProps, ref } = usePopoverTrigger(menu.popover, {
+		part: "Menu.Trigger",
+		disabled,
+		render,
+		handlers: { onKeyDown },
+		activate: (event) => {
+			const native = event.nativeEvent;
+			if (menu.popover.intended()) menu.popover.requestClose(native, "activate");
+			else {
+				menu.setOpenCause("first", isPointerClick(native));
+				menu.popover.requestOpen(native, "activate");
+			}
+		}
+	});
+	return useRender({
+		defaultElement: "button",
+		render,
+		state,
+		className,
+		style,
+		children,
+		props: rest,
+		libraryProps: {
+			...libraryProps,
+			id: menu.triggerId,
+			"aria-haspopup": "menu"
+		},
+		ref
+	});
+}
+MenuTrigger.displayName = "MenuTrigger";
+//#endregion
+export { MenuTrigger, isPointerClick, openMenuWithFocus };
+
+//# sourceMappingURL=menu-trigger.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-trigger.mjs","names":[],"sources":["../../src/menu/menu-trigger.tsx"],"sourcesContent":["\"use client\";\nimport type { ComponentPropsWithRef, CSSProperties, KeyboardEvent, ReactNode } from \"react\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useDevWarning } from \"../internal/use-dev-warning.js\";\nimport { usePopoverTrigger } from \"../internal/use-popover-trigger.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { useMenuContext } from \"./menu-context.js\";\nimport type { MenuContextValue } from \"./menu-context.js\";\nimport { edgeItem, focusItem, hasModifier } from \"./menu-dom.js\";\n\nexport interface MenuTriggerState {\n  /** Optimistic open state. */\n  readonly open: boolean;\n  /** The Root's transition is pending (an open, a part-initiated close or a dismissal notification). */\n  readonly pending: boolean;\n  readonly disabled: boolean;\n}\n\nexport interface MenuTriggerProps extends Omit<\n  ComponentPropsWithRef<\"button\">,\n  \"onClick\" | \"onKeyDown\" | \"aria-expanded\" | \"aria-haspopup\" | \"className\" | \"style\" | \"children\"\n> {\n  /** Native `disabled`: the menu cannot be opened from this button. */\n  disabled?: boolean;\n  className?: StateValue<string | undefined, MenuTriggerState>;\n  style?: StateValue<CSSProperties | undefined, MenuTriggerState>;\n  /** Rendered from optimistic state; must not suspend. */\n  children?: StateValue<ReactNode, MenuTriggerState>;\n  /** Should render a `<button>` (the command path before hydration). */\n  render?: RenderProp<ComponentPropsWithRef<\"button\">, MenuTriggerState>;\n}\n\n/**\n * Opens with the first (`\"first\"`) or last (`\"last\"`) item focused, or focuses that item when the\n * menu is already open (a pre-hydration open, walkthrough 10). Shared with SubmenuTrigger.\n */\nexport function openMenuWithFocus(\n  menu: MenuContextValue,\n  event: Event,\n  which: \"first\" | \"last\",\n): void {\n  const { popover } = menu;\n  if (popover.intended()) {\n    const popup = popover.popupRef.current;\n    if (popup !== null && popup.matches(\":popover-open\")) {\n      const item = edgeItem(popup, which);\n      if (item !== null) focusItem(item);\n    }\n    return;\n  }\n  menu.setOpenCause(which, isPointerClick(event));\n  popover.requestOpen(event, \"activate\");\n}\n\n/** A click from a pointing device (`detail` counts clicks; keyboard and `click()` give 0). */\nexport function isPointerClick(event: Event): boolean {\n  return event.type === \"click\" && (event as MouseEvent).detail > 0;\n}\n\n/**\n * The menu button: `<button type=\"button\" commandfor command=\"toggle-popover\"\n * aria-haspopup=\"menu\" aria-expanded>`. A click (Enter, Space) toggles the menu through the\n * Root's transition; ArrowDown / ArrowUp open it with the first / last item focused.\n *\n * Owned keys (conventions 1.2): `type` (on a `<button>` only), `id`, `disabled`, `commandfor`,\n * `command`, `aria-haspopup`, `aria-expanded`, `onClick`, `onKeyDown`, `data-open`,\n * `data-pending`, `data-disabled`.\n */\nexport function MenuTrigger({\n  disabled = false,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: MenuTriggerProps) {\n  const menu = useMenuContext(\"Menu.Trigger\");\n  useDevWarning(\n    menu.submenu,\n    \"Menu.Trigger: rendered in a submenu. Use Menu.SubmenuTrigger, which is also an item of the \" +\n      \"parent menu.\",\n  );\n\n  const onKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (disabled || hasModifier(event)) return;\n    if (event.key !== \"ArrowDown\" && event.key !== \"ArrowUp\") return;\n    // No page scroll; Enter and Space stay the native click.\n    event.preventDefault();\n    openMenuWithFocus(menu, event.nativeEvent, event.key === \"ArrowDown\" ? \"first\" : \"last\");\n  };\n\n  const { state, libraryProps, ref } = usePopoverTrigger(menu.popover, {\n    part: \"Menu.Trigger\",\n    disabled,\n    render,\n    handlers: { onKeyDown },\n    activate: (event) => {\n      const native = event.nativeEvent;\n      if (menu.popover.intended()) {\n        menu.popover.requestClose(native, \"activate\");\n      } else {\n        menu.setOpenCause(\"first\", isPointerClick(native));\n        menu.popover.requestOpen(native, \"activate\");\n      }\n    },\n  });\n\n  return useRender<ComponentPropsWithRef<\"button\">, MenuTriggerState>({\n    defaultElement: \"button\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps: {\n      ...libraryProps,\n      id: menu.triggerId,\n      \"aria-haspopup\": \"menu\",\n    },\n    ref,\n  });\n}\n\nMenuTrigger.displayName = \"MenuTrigger\";\n"],"mappings":";;;;;;;;;;;AAoCA,SAAgB,kBACd,MACA,OACA,OACM;CACN,MAAM,EAAE,YAAY;CACpB,IAAI,QAAQ,SAAS,GAAG;EACtB,MAAM,QAAQ,QAAQ,SAAS;EAC/B,IAAI,UAAU,QAAQ,MAAM,QAAQ,eAAe,GAAG;GACpD,MAAM,OAAO,SAAS,OAAO,KAAK;GAClC,IAAI,SAAS,MAAM,UAAU,IAAI;EACnC;EACA;CACF;CACA,KAAK,aAAa,OAAO,eAAe,KAAK,CAAC;CAC9C,QAAQ,YAAY,OAAO,UAAU;AACvC;;AAGA,SAAgB,eAAe,OAAuB;CACpD,OAAO,MAAM,SAAS,WAAY,MAAqB,SAAS;AAClE;;;;;;;;;;AAWA,SAAgB,YAAY,EAC1B,WAAW,OACX,WACA,OACA,UACA,QACA,GAAG,QACgB;CACnB,MAAM,OAAO,eAAe,cAAc;CAC1C,cACE,KAAK,SACL,yGAEF;CAEA,MAAM,aAAa,UAA4C;EAC7D,IAAI,YAAY,YAAY,KAAK,GAAG;EACpC,IAAI,MAAM,QAAQ,eAAe,MAAM,QAAQ,WAAW;EAE1D,MAAM,eAAe;EACrB,kBAAkB,MAAM,MAAM,aAAa,MAAM,QAAQ,cAAc,UAAU,MAAM;CACzF;CAEA,MAAM,EAAE,OAAO,cAAc,QAAQ,kBAAkB,KAAK,SAAS;EACnE,MAAM;EACN;EACA;EACA,UAAU,EAAE,UAAU;EACtB,WAAW,UAAU;GACnB,MAAM,SAAS,MAAM;GACrB,IAAI,KAAK,QAAQ,SAAS,GACxB,KAAK,QAAQ,aAAa,QAAQ,UAAU;QACvC;IACL,KAAK,aAAa,SAAS,eAAe,MAAM,CAAC;IACjD,KAAK,QAAQ,YAAY,QAAQ,UAAU;GAC7C;EACF;CACF,CAAC;CAED,OAAO,UAA6D;EAClE,gBAAgB;EAChB;EACA;EACA;EACA;EACA;EACA,OAAO;EACP,cAAc;GACZ,GAAG;GACH,IAAI,KAAK;GACT,iBAAiB;EACnB;EACA;CACF,CAAC;AACH;AAEA,YAAY,cAAc"}

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

@@ -0,0 +1,54 @@
+"use client";
+import { dataAttr } from "../internal/data-attr.mjs";
+import { useDevWarning } from "../internal/use-dev-warning.mjs";
+import { MenuListContext } from "./menu-context.mjs";
+import { hasModifier } from "./menu-dom.mjs";
+import { use } from "react";
+//#region src/menu/use-menu-item.ts
+/**
+* The parts every menu item shares: role, roving `tabindex` (none on the native `focusgroup`
+* path), `aria-disabled`, activation by click / Enter / Space (Space is a typeahead character
+* while a buffer is active), and the current item following the pointer (design 6.2).
+*/
+function useMenuItem(options) {
+	const { part, role, disabled, label, activate } = options;
+	const list = use(MenuListContext);
+	useDevWarning(list === null, `${part}: rendered outside a Menu.Popup.`);
+	const onClick = (event) => {
+		if (disabled) {
+			event.preventDefault();
+			return;
+		}
+		activate(event.nativeEvent);
+	};
+	const onKeyDown = (event) => {
+		if (event.defaultPrevented || hasModifier(event)) return;
+		if (event.key !== "Enter" && event.key !== " ") return;
+		if (event.key === " " && list?.typingAhead()) return;
+		event.preventDefault();
+		if (disabled) return;
+		event.currentTarget.click();
+	};
+	const onPointerMove = (event) => {
+		const element = event.currentTarget;
+		if (element.ownerDocument.activeElement !== element) element.focus();
+	};
+	return {
+		list,
+		libraryProps: {
+			role,
+			tabIndex: list?.nativeFocusgroup === true ? void 0 : -1,
+			"aria-disabled": disabled ? true : void 0,
+			disabled: void 0,
+			"data-disabled": dataAttr(disabled),
+			"data-typeahead": label,
+			onClick,
+			onKeyDown,
+			onPointerMove
+		}
+	};
+}
+//#endregion
+export { useMenuItem };
+
+//# sourceMappingURL=use-menu-item.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-menu-item.mjs","names":[],"sources":["../../src/menu/use-menu-item.ts"],"sourcesContent":["\"use client\";\nimport { use } from \"react\";\nimport type { KeyboardEvent, MouseEvent, PointerEvent } from \"react\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport { useDevWarning } from \"../internal/use-dev-warning.js\";\nimport type { DataAttributes } from \"../internal/use-render.js\";\nimport { MenuListContext } from \"./menu-context.js\";\nimport type { MenuListContextValue } from \"./menu-context.js\";\nimport { hasModifier } from \"./menu-dom.js\";\n\nexport interface MenuItemBaseOptions {\n  /** Public name of the part for development warnings. */\n  readonly part: string;\n  readonly role: \"menuitem\" | \"menuitemcheckbox\" | \"menuitemradio\";\n  readonly disabled: boolean;\n  readonly label: string | undefined;\n  /** Runs for a click, Enter or Space on an enabled item (never for a disabled one). */\n  readonly activate: (event: Event) => void;\n}\n\nexport interface MenuItemBase {\n  readonly list: MenuListContextValue | null;\n  /** Owned props shared by every item kind (design 3.4). */\n  readonly libraryProps: {\n    role: string;\n    tabIndex: number | undefined;\n    \"aria-disabled\": true | undefined;\n    disabled: undefined;\n    onClick: (event: MouseEvent<HTMLElement>) => void;\n    onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;\n    onPointerMove: (event: PointerEvent<HTMLElement>) => void;\n  } & DataAttributes;\n}\n\n/**\n * The parts every menu item shares: role, roving `tabindex` (none on the native `focusgroup`\n * path), `aria-disabled`, activation by click / Enter / Space (Space is a typeahead character\n * while a buffer is active), and the current item following the pointer (design 6.2).\n */\nexport function useMenuItem(options: MenuItemBaseOptions): MenuItemBase {\n  const { part, role, disabled, label, activate } = options;\n  const list = use(MenuListContext);\n  useDevWarning(list === null, `${part}: rendered outside a Menu.Popup.`);\n\n  const onClick = (event: MouseEvent<HTMLElement>) => {\n    if (disabled) {\n      // A disabled link must not navigate either.\n      event.preventDefault();\n      return;\n    }\n    activate(event.nativeEvent);\n  };\n\n  const onKeyDown = (event: KeyboardEvent<HTMLElement>) => {\n    if (event.defaultPrevented || hasModifier(event)) return;\n    if (event.key !== \"Enter\" && event.key !== \" \") return;\n    if (event.key === \" \" && list?.typingAhead()) return;\n    // No page scroll for Space, no second native click.\n    event.preventDefault();\n    if (disabled) return;\n    // Activation is always the element's click: it runs `onClick` (and so `activate`) and the\n    // element's own activation behaviour, which a link (navigation) and an item composed with\n    // another trigger (`Dialog.Trigger render={<Menu.Item />}`: its command) depend on.\n    event.currentTarget.click();\n  };\n\n  const onPointerMove = (event: PointerEvent<HTMLElement>) => {\n    const element = event.currentTarget;\n    if (element.ownerDocument.activeElement !== element) element.focus();\n  };\n\n  return {\n    list,\n    libraryProps: {\n      role,\n      tabIndex: list?.nativeFocusgroup === true ? undefined : -1,\n      \"aria-disabled\": disabled ? true : undefined,\n      // Never the native attribute: disabled items stay focusable (APG), and Chromium's\n      // focusgroup skips natively disabled buttons.\n      disabled: undefined,\n      \"data-disabled\": dataAttr(disabled),\n      \"data-typeahead\": label,\n      onClick,\n      onKeyDown,\n      onPointerMove,\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;AAuCA,SAAgB,YAAY,SAA4C;CACtE,MAAM,EAAE,MAAM,MAAM,UAAU,OAAO,aAAa;CAClD,MAAM,OAAO,IAAI,eAAe;CAChC,cAAc,SAAS,MAAM,GAAG,KAAK,iCAAiC;CAEtE,MAAM,WAAW,UAAmC;EAClD,IAAI,UAAU;GAEZ,MAAM,eAAe;GACrB;EACF;EACA,SAAS,MAAM,WAAW;CAC5B;CAEA,MAAM,aAAa,UAAsC;EACvD,IAAI,MAAM,oBAAoB,YAAY,KAAK,GAAG;EAClD,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;EAChD,IAAI,MAAM,QAAQ,OAAO,MAAM,YAAY,GAAG;EAE9C,MAAM,eAAe;EACrB,IAAI,UAAU;EAId,MAAM,cAAc,MAAM;CAC5B;CAEA,MAAM,iBAAiB,UAAqC;EAC1D,MAAM,UAAU,MAAM;EACtB,IAAI,QAAQ,cAAc,kBAAkB,SAAS,QAAQ,MAAM;CACrE;CAEA,OAAO;EACL;EACA,cAAc;GACZ;GACA,UAAU,MAAM,qBAAqB,OAAO,KAAA,IAAY;GACxD,iBAAiB,WAAW,OAAO,KAAA;GAGnC,UAAU,KAAA;GACV,iBAAiB,SAAS,QAAQ;GAClC,kBAAkB;GAClB;GACA;GACA;EACF;CACF;AACF"}

package/dist/popover/index.d.mts

@@ -0,0 +1,28 @@
+import "../internal/platform-attributes.mjs";
+import { PopoverClose, PopoverCloseProps, PopoverCloseState } from "./popover-close.mjs";
+import { PopoverAlign, PopoverPopup, PopoverPopupProps, PopoverPopupState, PopoverSide } from "./popover-popup.mjs";
+import { PopoverDescription, PopoverDescriptionProps, PopoverDescriptionState } from "./popover-description.mjs";
+import { PopoverOpenChangeDetails, PopoverRoot, PopoverRootProps, PopoverRootState } from "./popover-root.mjs";
+import { PopoverTitle, PopoverTitleProps, PopoverTitleState } from "./popover-title.mjs";
+import { PopoverTrigger, PopoverTriggerProps, PopoverTriggerState } from "./popover-trigger.mjs";
+//#region src/popover/index.d.ts
+/**
+ * Popover built on `popover="auto"` and Invoker Commands: `Root` (no DOM) > `Trigger`
+ * (`button[command=toggle-popover]`) + `Popup` (`dialog[popover=auto][aria-modal=false]`) >
+ * `Title`, `Description`, `Close`. The platform gives the top layer, light dismiss, Escape,
+ * nesting, the implicit anchor and focus return. JS-free when the Root has none of `open` /
+ * `defaultOpen` / `openChangeAction`; otherwise opening and the closes a part asks for are
+ * transitions (pending Trigger, content from committed state), and dismissals are notified
+ * through `openChangeAction(false)`.
+ */
+export declare const Popover: {
+  readonly Root: typeof PopoverRoot;
+  readonly Trigger: typeof PopoverTrigger;
+  readonly Popup: typeof PopoverPopup;
+  readonly Close: typeof PopoverClose;
+  readonly Title: typeof PopoverTitle;
+  readonly Description: typeof PopoverDescription;
+};
+//#endregion
+export type { PopoverAlign, PopoverCloseProps, PopoverCloseState, PopoverDescriptionProps, PopoverDescriptionState, PopoverOpenChangeDetails, PopoverPopupProps, PopoverPopupState, PopoverRootProps, PopoverRootState, PopoverSide, PopoverTitleProps, PopoverTitleState, PopoverTriggerProps, PopoverTriggerState };
+//# sourceMappingURL=index.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../../src/popover/index.ts"],"mappings":";;;;;;;;;;;;;;;;;qBAmBa;WACX,aAAI;WACJ,gBAAO;WACP,cAAK;WACL,cAAK;WACL,cAAK;WACL,oBAAW"}

package/dist/popover/index.mjs

@@ -0,0 +1,28 @@
+import { PopoverClose } from "./popover-close.mjs";
+import { PopoverDescription } from "./popover-description.mjs";
+import { PopoverPopup } from "./popover-popup.mjs";
+import { PopoverRoot } from "./popover-root.mjs";
+import { PopoverTitle } from "./popover-title.mjs";
+import { PopoverTrigger } from "./popover-trigger.mjs";
+//#region src/popover/index.ts
+/**
+* Popover built on `popover="auto"` and Invoker Commands: `Root` (no DOM) > `Trigger`
+* (`button[command=toggle-popover]`) + `Popup` (`dialog[popover=auto][aria-modal=false]`) >
+* `Title`, `Description`, `Close`. The platform gives the top layer, light dismiss, Escape,
+* nesting, the implicit anchor and focus return. JS-free when the Root has none of `open` /
+* `defaultOpen` / `openChangeAction`; otherwise opening and the closes a part asks for are
+* transitions (pending Trigger, content from committed state), and dismissals are notified
+* through `openChangeAction(false)`.
+*/
+const Popover = {
+	Root: PopoverRoot,
+	Trigger: PopoverTrigger,
+	Popup: PopoverPopup,
+	Close: PopoverClose,
+	Title: PopoverTitle,
+	Description: PopoverDescription
+};
+//#endregion
+export { Popover };
+
+//# sourceMappingURL=index.mjs.map

package/dist/popover/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/popover/index.ts"],"sourcesContent":["// Ships the platform attribute typings (`command`, `commandfor`) with this subpath\n// (conventions 7.4). Type-only: the built JS has no import of it.\nimport \"../internal/platform-attributes.js\";\nimport { PopoverClose } from \"./popover-close.js\";\nimport { PopoverDescription } from \"./popover-description.js\";\nimport { PopoverPopup } from \"./popover-popup.js\";\nimport { PopoverRoot } from \"./popover-root.js\";\nimport { PopoverTitle } from \"./popover-title.js\";\nimport { PopoverTrigger } from \"./popover-trigger.js\";\n\n/**\n * Popover built on `popover=\"auto\"` and Invoker Commands: `Root` (no DOM) > `Trigger`\n * (`button[command=toggle-popover]`) + `Popup` (`dialog[popover=auto][aria-modal=false]`) >\n * `Title`, `Description`, `Close`. The platform gives the top layer, light dismiss, Escape,\n * nesting, the implicit anchor and focus return. JS-free when the Root has none of `open` /\n * `defaultOpen` / `openChangeAction`; otherwise opening and the closes a part asks for are\n * transitions (pending Trigger, content from committed state), and dismissals are notified\n * through `openChangeAction(false)`.\n */\nexport const Popover = {\n  Root: PopoverRoot,\n  Trigger: PopoverTrigger,\n  Popup: PopoverPopup,\n  Close: PopoverClose,\n  Title: PopoverTitle,\n  Description: PopoverDescription,\n} as const;\n\nexport type {\n  PopoverRootProps,\n  PopoverRootState,\n  PopoverOpenChangeDetails,\n} from \"./popover-root.js\";\nexport type { PopoverTriggerProps, PopoverTriggerState } from \"./popover-trigger.js\";\nexport type {\n  PopoverPopupProps,\n  PopoverPopupState,\n  PopoverSide,\n  PopoverAlign,\n} from \"./popover-popup.js\";\nexport type { PopoverCloseProps, PopoverCloseState } from \"./popover-close.js\";\nexport type { PopoverTitleProps, PopoverTitleState } from \"./popover-title.js\";\nexport type { PopoverDescriptionProps, PopoverDescriptionState } from \"./popover-description.js\";\n"],"mappings":";;;;;;;;;;;;;;;;AAmBA,MAAa,UAAU;CACrB,MAAM;CACN,SAAS;CACT,OAAO;CACP,OAAO;CACP,OAAO;CACP,aAAa;AACf"}

package/dist/popover/popover-close.d.mts

@@ -0,0 +1,41 @@
+import { Action, ActionDetails, RenderProp, StateValue } from "../internal/types.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/popover/popover-close.d.ts
+export interface PopoverCloseState {
+  /** The `action` is in flight. */
+  readonly pending: boolean;
+  readonly disabled: boolean;
+}
+export interface PopoverCloseProps extends Omit<ComponentPropsWithRef<"button">, "onClick" | "className" | "style" | "children"> {
+  /**
+   * Runs inside this part's own transition (`data-pending` on the button), then closes the
+   * popover: in library mode through the Root (`openChangeAction(false)` awaited, view
+   * transition if set), in JS-free mode with `hidePopover()`. A rejection reaches the nearest
+   * Error Boundary above the Close part and leaves the popover open. If the popover was
+   * dismissed and opened again while the action ran, the close is dropped. Without `action` in JS-free
+   * mode the button is a native `command="hide-popover"` invoker.
+   */
+  action?: Action<[details: ActionDetails]>;
+  /** Native `disabled`; owned, so a `render` element cannot re-enable the button. */
+  disabled?: boolean;
+  className?: StateValue<string | undefined, PopoverCloseState>;
+  style?: StateValue<CSSProperties | undefined, PopoverCloseState>;
+  children?: StateValue<ReactNode, PopoverCloseState>;
+  render?: RenderProp<ComponentPropsWithRef<"button">, PopoverCloseState>;
+}
+/**
+ * A close button: `<button type="button" commandfor command="hide-popover">`. In JS-free mode
+ * without `action` the browser hides the popover. In library mode the click is always cancelled
+ * and the close goes through the Root (`openChangeAction(false)` awaited, `hidePopover()` in the
+ * commit). With `action` the action runs first in this part's own transition (`data-pending` on
+ * the button); a rejection leaves the popover open.
+ *
+ * Owned keys (conventions 1.2): `type` (on a `<button>` only), `disabled`, `commandfor`,
+ * `command`, `onClick` (library mode, or with `action`), `data-pending`, `data-disabled`.
+ */
+export declare function PopoverClose({ action, disabled, className, style, children, render, ...rest }: PopoverCloseProps): ReactNode;
+export declare namespace PopoverClose {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=popover-close.d.mts.map

package/dist/popover/popover-close.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-close.d.mts","names":[],"sources":["../../src/popover/popover-close.tsx"],"mappings":";;;iBAWiB;;WAEN;WACA;;iBAGM,0BAA0B,KACzC;;;;;;;;;EAWA,SAAS,QAAQ,SAAS;;EAE1B;EACA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,iCAAiC;;;;;;;;;;;;wBAuBvC,eACd,QACA,UACA,WACA,OACA,UACA,WACG,QACF,oBAAiB;yBARJ"}