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

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"}

package/dist/popover/popover-close.mjs

@@ -0,0 +1,90 @@
+"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 { usePopoverContext } from "./popover-context.mjs";
+import { useCallback } from "react";
+//#region src/popover/popover-close.tsx
+const isDev = process.env.NODE_ENV !== "production";
+function isPopoverOpen(element) {
+	try {
+		return element.matches(":popover-open");
+	} catch {
+		return false;
+	}
+}
+/**
+* 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`.
+*/
+function PopoverClose({ action, disabled = false, className, style, children, render, ...rest }) {
+	const ctx = usePopoverContext("Popover.Close");
+	const { ids, popupRef, recordCloseIntent, openGeneration } = ctx;
+	const { pending, run } = useActionTrigger(openGeneration);
+	const isLibrary = ctx.mode === "library";
+	const installClick = isLibrary || action !== void 0;
+	const state = {
+		pending,
+		disabled
+	};
+	const devRef = useCallback((element) => {
+		if (isDev && !installClick && element.tagName !== "BUTTON") console.error(`Popover.Close: rendered a <${element.tagName.toLowerCase()}> in JS-free mode without \`action\`. Only a <button> runs \`command="hide-popover"\`; this element will not close the popover.`);
+		return () => {};
+	}, [installClick]);
+	const close = (event) => {
+		if (isLibrary) {
+			ctx.requestClose(event, "activate");
+			return;
+		}
+		const popup = popupRef.current;
+		if (popup === null || !popup.isConnected || !isPopoverOpen(popup)) return;
+		recordCloseIntent({
+			reason: "activate",
+			event
+		});
+		popup.hidePopover();
+	};
+	const onClick = (event) => {
+		event.preventDefault();
+		if (disabled) return;
+		const native = event.nativeEvent;
+		if (action === void 0) {
+			close(native);
+			return;
+		}
+		const details = createActionDetails(native, {});
+		run(() => action(details), () => close(native));
+	};
+	const libraryProps = {
+		...rendersButton(render) && { type: "button" },
+		disabled,
+		commandfor: ids.popup,
+		command: "hide-popover",
+		...installClick && { onClick },
+		"data-pending": dataAttr(pending),
+		"data-disabled": dataAttr(disabled)
+	};
+	return useRender({
+		defaultElement: "button",
+		render,
+		state,
+		className,
+		style,
+		children,
+		props: rest,
+		libraryProps,
+		ref: devRef
+	});
+}
+PopoverClose.displayName = "PopoverClose";
+//#endregion
+export { PopoverClose };
+
+//# sourceMappingURL=popover-close.mjs.map

package/dist/popover/popover-close.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-close.mjs","names":[],"sources":["../../src/popover/popover-close.tsx"],"sourcesContent":["\"use client\";\nimport { useCallback } from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties, MouseEvent, 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 type { DataAttributes } from \"../internal/use-render.js\";\nimport { usePopoverContext } from \"./popover-context.js\";\n\nexport interface PopoverCloseState {\n  /** The `action` is in flight. */\n  readonly pending: boolean;\n  readonly disabled: boolean;\n}\n\nexport interface PopoverCloseProps extends Omit<\n  ComponentPropsWithRef<\"button\">,\n  \"onClick\" | \"className\" | \"style\" | \"children\"\n> {\n  /**\n   * Runs inside this part's own transition (`data-pending` on the button), then closes the\n   * popover: in library mode through the Root (`openChangeAction(false)` awaited, view\n   * transition if set), in JS-free mode with `hidePopover()`. A rejection reaches the nearest\n   * Error Boundary above the Close part and leaves the popover open. If the popover was\n   * dismissed and opened again while the action ran, the close is dropped. Without `action` in JS-free\n   * mode the button is a native `command=\"hide-popover\"` invoker.\n   */\n  action?: Action<[details: ActionDetails]>;\n  /** Native `disabled`; owned, so a `render` element cannot re-enable the button. */\n  disabled?: boolean;\n  className?: StateValue<string | undefined, PopoverCloseState>;\n  style?: StateValue<CSSProperties | undefined, PopoverCloseState>;\n  children?: StateValue<ReactNode, PopoverCloseState>;\n  render?: RenderProp<ComponentPropsWithRef<\"button\">, PopoverCloseState>;\n}\n\nconst isDev = process.env.NODE_ENV !== \"production\";\n\nfunction isPopoverOpen(element: Element): boolean {\n  try {\n    return element.matches(\":popover-open\");\n  } catch {\n    return false;\n  }\n}\n\n/**\n * A close button: `<button type=\"button\" commandfor command=\"hide-popover\">`. In JS-free mode\n * without `action` the browser hides the popover. In library mode the click is always cancelled\n * and the close goes through the Root (`openChangeAction(false)` awaited, `hidePopover()` in the\n * commit). With `action` the action runs first in this part's own transition (`data-pending` on\n * the button); a rejection leaves the popover open.\n *\n * Owned keys (conventions 1.2): `type` (on a `<button>` only), `disabled`, `commandfor`,\n * `command`, `onClick` (library mode, or with `action`), `data-pending`, `data-disabled`.\n */\nexport function PopoverClose({\n  action,\n  disabled = false,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: PopoverCloseProps) {\n  const ctx = usePopoverContext(\"Popover.Close\");\n  const { ids, popupRef, recordCloseIntent, openGeneration } = ctx;\n  const { pending, run } = useActionTrigger(openGeneration);\n  const isLibrary = ctx.mode === \"library\";\n  const hasAction = action !== undefined;\n  const installClick = isLibrary || hasAction;\n\n  const state: PopoverCloseState = { pending, disabled };\n\n  const devRef = useCallback(\n    (element: HTMLElement) => {\n      if (isDev && !installClick && element.tagName !== \"BUTTON\") {\n        console.error(\n          `Popover.Close: rendered a <${element.tagName.toLowerCase()}> in JS-free mode without ` +\n            '`action`. Only a <button> runs `command=\"hide-popover\"`; this element will not ' +\n            \"close the popover.\",\n        );\n      }\n      // A cleanup, so the merged ref never calls back with `null`.\n      return () => {};\n    },\n    [installClick],\n  );\n\n  const close = (event: Event): void => {\n    if (isLibrary) {\n      // A library-owned close (design 2.3): awaited, then hidden in the commit.\n      ctx.requestClose(event, \"activate\");\n      return;\n    }\n    // JS-free mode with `action`: a browser-owned close; there is no Root state to notify.\n    const popup = popupRef.current;\n    if (popup === null || !popup.isConnected || !isPopoverOpen(popup)) return;\n    recordCloseIntent({ reason: \"activate\", event });\n    popup.hidePopover();\n  };\n\n  const onClick = (event: MouseEvent<HTMLElement>) => {\n    // Cancelling the click cancels the command.\n    event.preventDefault();\n    if (disabled) return;\n    const native = event.nativeEvent;\n    if (action === undefined) {\n      close(native);\n      return;\n    }\n    const details = createActionDetails(native, {});\n    // Repeated clicks re-run the action; the first close wins (design 3.4). A close whose open\n    // was superseded by a newer one (dismissed and re-opened meanwhile) is dropped by the hook.\n    run(\n      () => action(details),\n      () => close(native),\n    );\n  };\n\n  const libraryProps: ComponentPropsWithRef<\"button\"> & DataAttributes = {\n    ...(rendersButton(render) && { type: \"button\" as const }),\n    // Owned: a render element must not re-enable a disabled Close.\n    disabled,\n    commandfor: ids.popup,\n    command: \"hide-popover\",\n    ...(installClick && { onClick }),\n    \"data-pending\": dataAttr(pending),\n    \"data-disabled\": dataAttr(disabled),\n  };\n\n  return useRender<ComponentPropsWithRef<\"button\">, PopoverCloseState>({\n    defaultElement: \"button\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps,\n    ref: devRef,\n  });\n}\n\nPopoverClose.displayName = \"PopoverClose\";\n"],"mappings":";;;;;;;;AAsCA,MAAM,QAAQ,QAAQ,IAAI,aAAa;AAEvC,SAAS,cAAc,SAA2B;CAChD,IAAI;EACF,OAAO,QAAQ,QAAQ,eAAe;CACxC,QAAQ;EACN,OAAO;CACT;AACF;;;;;;;;;;;AAYA,SAAgB,aAAa,EAC3B,QACA,WAAW,OACX,WACA,OACA,UACA,QACA,GAAG,QACiB;CACpB,MAAM,MAAM,kBAAkB,eAAe;CAC7C,MAAM,EAAE,KAAK,UAAU,mBAAmB,mBAAmB;CAC7D,MAAM,EAAE,SAAS,QAAQ,iBAAiB,cAAc;CACxD,MAAM,YAAY,IAAI,SAAS;CAE/B,MAAM,eAAe,aADH,WAAW,KAAA;CAG7B,MAAM,QAA2B;EAAE;EAAS;CAAS;CAErD,MAAM,SAAS,aACZ,YAAyB;EACxB,IAAI,SAAS,CAAC,gBAAgB,QAAQ,YAAY,UAChD,QAAQ,MACN,8BAA8B,QAAQ,QAAQ,YAAY,EAAE,gIAG9D;EAGF,aAAa,CAAC;CAChB,GACA,CAAC,YAAY,CACf;CAEA,MAAM,SAAS,UAAuB;EACpC,IAAI,WAAW;GAEb,IAAI,aAAa,OAAO,UAAU;GAClC;EACF;EAEA,MAAM,QAAQ,SAAS;EACvB,IAAI,UAAU,QAAQ,CAAC,MAAM,eAAe,CAAC,cAAc,KAAK,GAAG;EACnE,kBAAkB;GAAE,QAAQ;GAAY;EAAM,CAAC;EAC/C,MAAM,YAAY;CACpB;CAEA,MAAM,WAAW,UAAmC;EAElD,MAAM,eAAe;EACrB,IAAI,UAAU;EACd,MAAM,SAAS,MAAM;EACrB,IAAI,WAAW,KAAA,GAAW;GACxB,MAAM,MAAM;GACZ;EACF;EACA,MAAM,UAAU,oBAAoB,QAAQ,CAAC,CAAC;EAG9C,UACQ,OAAO,OAAO,SACd,MAAM,MAAM,CACpB;CACF;CAEA,MAAM,eAAiE;EACrE,GAAI,cAAc,MAAM,KAAK,EAAE,MAAM,SAAkB;EAEvD;EACA,YAAY,IAAI;EAChB,SAAS;EACT,GAAI,gBAAgB,EAAE,QAAQ;EAC9B,gBAAgB,SAAS,OAAO;EAChC,iBAAiB,SAAS,QAAQ;CACpC;CAEA,OAAO,UAA8D;EACnE,gBAAgB;EAChB;EACA;EACA;EACA;EACA;EACA,OAAO;EACP;EACA,KAAK;CACP,CAAC;AACH;AAEA,aAAa,cAAc"}

package/dist/popover/popover-context.mjs

@@ -0,0 +1,26 @@
+"use client";
+import { createContext, use } from "react";
+//#region src/popover/popover-context.ts
+const PopoverContext = createContext(null);
+function usePopoverContext(part) {
+	const context = use(PopoverContext);
+	if (context === null) throw new Error(`${part} must be rendered inside a Popover.Root.`);
+	return context;
+}
+/** The Popup's state, for Title and Description rendered inside it. */
+const PopoverPopupContext = createContext(null);
+/**
+* The state Title and Description receive: the enclosing Popup's, or (outside a Popup, which
+* `aria-labelledby` allows) the Root's committed open state with the default placement.
+*/
+function usePopoverPopupState(ctx) {
+	return use(PopoverPopupContext) ?? {
+		open: ctx.committed,
+		side: "bottom",
+		align: "center"
+	};
+}
+//#endregion
+export { PopoverContext, PopoverPopupContext, usePopoverContext, usePopoverPopupState };
+
+//# sourceMappingURL=popover-context.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover-context.mjs","names":[],"sources":["../../src/popover/popover-context.ts"],"sourcesContent":["\"use client\";\nimport { createContext, use } from \"react\";\nimport type { PopoverRootValue } from \"../internal/use-popover-root.js\";\nimport type { PopoverPopupState } from \"./popover-popup.js\";\n\nexport type PopoverContextValue = PopoverRootValue;\n\nexport const PopoverContext = createContext<PopoverContextValue | null>(null);\n\nexport function usePopoverContext(part: string): PopoverContextValue {\n  const context = use(PopoverContext);\n  if (context === null) {\n    throw new Error(`${part} must be rendered inside a Popover.Root.`);\n  }\n  return context;\n}\n\n/** The Popup's state, for Title and Description rendered inside it. */\nexport const PopoverPopupContext = createContext<PopoverPopupState | null>(null);\n\n/**\n * The state Title and Description receive: the enclosing Popup's, or (outside a Popup, which\n * `aria-labelledby` allows) the Root's committed open state with the default placement.\n */\nexport function usePopoverPopupState(ctx: PopoverContextValue): PopoverPopupState {\n  return use(PopoverPopupContext) ?? { open: ctx.committed, side: \"bottom\", align: \"center\" };\n}\n"],"mappings":";;;AAOA,MAAa,iBAAiB,cAA0C,IAAI;AAE5E,SAAgB,kBAAkB,MAAmC;CACnE,MAAM,UAAU,IAAI,cAAc;CAClC,IAAI,YAAY,MACd,MAAM,IAAI,MAAM,GAAG,KAAK,yCAAyC;CAEnE,OAAO;AACT;;AAGA,MAAa,sBAAsB,cAAwC,IAAI;;;;;AAM/E,SAAgB,qBAAqB,KAA6C;CAChF,OAAO,IAAI,mBAAmB,KAAK;EAAE,MAAM,IAAI;EAAW,MAAM;EAAU,OAAO;CAAS;AAC5F"}

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

@@ -0,0 +1,22 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { PopoverPopupState } from "./popover-popup.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/popover/popover-description.d.ts
+export type PopoverDescriptionState = PopoverPopupState;
+export interface PopoverDescriptionProps extends Omit<ComponentPropsWithRef<"p">, "id" | "className" | "style" | "children"> {
+  className?: StateValue<string | undefined, PopoverDescriptionState>;
+  style?: StateValue<CSSProperties | undefined, PopoverDescriptionState>;
+  children?: StateValue<ReactNode, PopoverDescriptionState>;
+  render?: RenderProp<ComponentPropsWithRef<"p">, PopoverDescriptionState>;
+}
+/**
+ * The popover's description: a `<p>` whose id the Popup references with `aria-describedby`.
+ *
+ * Owned key (conventions 1.2): `id`.
+ */
+export declare function PopoverDescription({ className, style, children, render, ...rest }: PopoverDescriptionProps): ReactNode;
+export declare namespace PopoverDescription {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=popover-description.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover-description.d.mts","names":[],"sources":["../../src/popover/popover-description.tsx"],"mappings":";;;;YAOY,0BAA0B;iBAErB,gCAAgC,KAC/C;EAGA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,4BAA4B;;;;;;;wBAQlC,qBACd,WACA,OACA,UACA,WACG,QACF,0BAAuB;yBANV"}

package/dist/popover/popover-description.mjs

@@ -0,0 +1,28 @@
+"use client";
+import { useRender } from "../internal/use-render.mjs";
+import { usePopoverContext, usePopoverPopupState } from "./popover-context.mjs";
+//#region src/popover/popover-description.tsx
+/**
+* The popover's description: a `<p>` whose id the Popup references with `aria-describedby`.
+*
+* Owned key (conventions 1.2): `id`.
+*/
+function PopoverDescription({ className, style, children, render, ...rest }) {
+	const ctx = usePopoverContext("Popover.Description");
+	const state = usePopoverPopupState(ctx);
+	return useRender({
+		defaultElement: "p",
+		render,
+		state,
+		className,
+		style,
+		children,
+		props: rest,
+		libraryProps: { id: ctx.ids.description }
+	});
+}
+PopoverDescription.displayName = "PopoverDescription";
+//#endregion
+export { PopoverDescription };
+
+//# sourceMappingURL=popover-description.mjs.map

package/dist/popover/popover-description.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-description.mjs","names":[],"sources":["../../src/popover/popover-description.tsx"],"sourcesContent":["\"use client\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { usePopoverContext, usePopoverPopupState } from \"./popover-context.js\";\nimport type { PopoverPopupState } from \"./popover-popup.js\";\n\nexport type PopoverDescriptionState = PopoverPopupState;\n\nexport interface PopoverDescriptionProps extends Omit<\n  ComponentPropsWithRef<\"p\">,\n  \"id\" | \"className\" | \"style\" | \"children\"\n> {\n  className?: StateValue<string | undefined, PopoverDescriptionState>;\n  style?: StateValue<CSSProperties | undefined, PopoverDescriptionState>;\n  children?: StateValue<ReactNode, PopoverDescriptionState>;\n  render?: RenderProp<ComponentPropsWithRef<\"p\">, PopoverDescriptionState>;\n}\n\n/**\n * The popover's description: a `<p>` whose id the Popup references with `aria-describedby`.\n *\n * Owned key (conventions 1.2): `id`.\n */\nexport function PopoverDescription({\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: PopoverDescriptionProps) {\n  const ctx = usePopoverContext(\"Popover.Description\");\n  const state = usePopoverPopupState(ctx);\n  return useRender<ComponentPropsWithRef<\"p\">, PopoverDescriptionState>({\n    defaultElement: \"p\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps: { id: ctx.ids.description },\n  });\n}\n\nPopoverDescription.displayName = \"PopoverDescription\";\n"],"mappings":";;;;;;;;;AAwBA,SAAgB,mBAAmB,EACjC,WACA,OACA,UACA,QACA,GAAG,QACuB;CAC1B,MAAM,MAAM,kBAAkB,qBAAqB;CACnD,MAAM,QAAQ,qBAAqB,GAAG;CACtC,OAAO,UAA+D;EACpE,gBAAgB;EAChB;EACA;EACA;EACA;EACA;EACA,OAAO;EACP,cAAc,EAAE,IAAI,IAAI,IAAI,YAAY;CAC1C,CAAC;AACH;AAEA,mBAAmB,cAAc"}

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

@@ -0,0 +1,82 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode, RefObject, ViewTransitionClass } from "react";
+//#region src/popover/popover-popup.d.ts
+export type PopoverSide = "top" | "bottom" | "left" | "right";
+export type PopoverAlign = "start" | "center" | "end";
+export interface PopoverPopupState {
+  /** Committed open state (library mode); `false` in JS-free mode. Read `:popover-open` for the DOM truth. */
+  readonly open: boolean;
+  readonly side: PopoverSide | null;
+  readonly align: PopoverAlign;
+}
+export interface PopoverPopupProps extends Omit<ComponentPropsWithRef<"dialog">, "id" | "popover" | "open" | "aria-modal" | "onToggle" | "onBeforeToggle" | "className" | "style" | "children"> {
+  /**
+   * Placement relative to the Trigger through inline `position-area`, with
+   * `position-try-fallbacks` flipping it when it does not fit. Default `"bottom"`. `null` emits
+   * no inline positioning (and no `data-side` / `data-align`), so a stylesheet owns placement.
+   */
+  side?: PopoverSide | null;
+  /** Alignment along the side. Default `"center"`. Ignored when `side` is `null`. */
+  align?: PopoverAlign;
+  /**
+   * Library mode: what happens to the children while the popover is closed.
+   * - `false` (default): not rendered. Mounting them is part of the opening transition, so
+   *   content that suspends holds the open until it is ready. Unmount waits for the popover's
+   *   exit animation (CSS), or happens in the close commit when `transition` is set.
+   * - `true`: rendered inside `<Activity mode="hidden">`: DOM and state preserved, effects
+   *   stopped, pre-rendered at low priority. Not in the server HTML.
+   *
+   * Ignored in JS-free mode (always mounted).
+   */
+  keepMounted?: boolean;
+  /**
+   * Element to focus when the popover opens: a ref, or a selector resolved inside the popup.
+   * The library writes `autofocus` on it right before `showPopover()` and the platform focuses
+   * it. Default: the platform's choice for a `<dialog>` (first focusable descendant; the popup
+   * itself if none); for `render={<div />}` focus stays on the Trigger.
+   *
+   * In JS-free mode the browser opens the popover itself, so the attribute is written after
+   * hydration and kept while mounted; before hydration only `autoFocus` in the markup works.
+   */
+  initialFocus?: RefObject<HTMLElement | null> | string;
+  /**
+   * Library mode only. Forwarded to the `<ViewTransition default>` around the popover element
+   * itself. Animates the opening commit, content changes while open, and every library-driven
+   * close (Trigger, Close, controlled `open={false}`), in all engines; dismissals (Escape,
+   * click outside) are the browser's and animate with CSS only. Ignored (dev warning) in JS-free
+   * mode.
+   *
+   * Static: without `transition` the part renders no `<ViewTransition>`; changing it between
+   * `undefined` and a value remounts the element. A Root inserted by a transition with
+   * `transition` set on its Popup pays the page cross-fade (issue #35); a plain open does not,
+   * because the children mount under the already-mounted popover element.
+   */
+  transition?: ViewTransitionClass;
+  className?: StateValue<string | undefined, PopoverPopupState>;
+  style?: StateValue<CSSProperties | undefined, PopoverPopupState>;
+  children?: StateValue<ReactNode, PopoverPopupState>;
+  /** A `<dialog>` (default) or a `<div>` (focus stays on the Trigger). */
+  render?: RenderProp<ComponentPropsWithRef<"dialog">, PopoverPopupState>;
+}
+/**
+ * The popover itself: a `<dialog popover="auto" aria-modal="false" role="dialog">` with the id
+ * the Trigger's `commandfor` names, placed against the Trigger with CSS Anchor Positioning and
+ * wired to Title and Description through `aria-labelledby` / `aria-describedby`. Style it with
+ * `:popover-open`; it emits `data-side` / `data-align` but no `data-open`.
+ *
+ * In library mode the children render from committed state, so content that suspends keeps the
+ * popover closed (and the Trigger pending) until it is ready; `showPopover({ source: trigger })`
+ * runs in the layout effect of the commit that mounted them, and a library-driven close runs
+ * `hidePopover()` in the commit that ends it. Dismissals are the browser's: the native `toggle`
+ * event becomes `openChangeAction(false, { reason: "dismiss" })`.
+ *
+ * Owned keys (conventions 1.2): `id`, `popover`, `open`, `aria-modal`, `aria-labelledby` and
+ * `aria-describedby` (token-merged), and `data-side` / `data-align` unless `side` is `null`.
+ * `role` is a default (`"dialog"`) the consumer may override.
+ */
+export declare function PopoverPopup({ side, align, keepMounted, initialFocus, transition, className, style, children, render, ...rest }: PopoverPopupProps): ReactNode;
+export declare namespace PopoverPopup {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=popover-popup.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover-popup.d.mts","names":[],"sources":["../../src/popover/popover-popup.tsx"],"mappings":";;;YAkBY;YACA;iBAEK;;WAEN;WACA,MAAM;WACN,OAAO;;iBAGD,0BAA0B,KACzC;;;;;;EAgBA,OAAO;;EAEP,QAAQ;;;;;;;;;;;EAWR;;;;;;;;;;EAUA,eAAe,UAAU;;;;;;;;;;;;;EAazB,aAAa;EACb,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;;EAEjC,SAAS,WAAW,iCAAiC;;;;;;;;;;;;;;;;;;wBAmBvC,eACd,MACA,OACA,aACA,cACA,YACA,WACA,OACA,UACA,WACG,QACF,oBAAiB;yBAXJ"}

package/dist/popover/popover-popup.mjs

@@ -0,0 +1,93 @@
+"use client";
+import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
+import { resolveStateValue, useRender } from "../internal/use-render.mjs";
+import { useDevWarning } from "../internal/use-dev-warning.mjs";
+import { POSITION_TRY_FALLBACKS, positionArea } from "../internal/anchor-position.mjs";
+import { PopoverPopupContext, usePopoverContext } from "./popover-context.mjs";
+import { usePopoverPopup } from "../internal/use-popover-popup.mjs";
+import { Activity } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/popover/popover-popup.tsx
+/**
+* The popover itself: a `<dialog popover="auto" aria-modal="false" role="dialog">` with the id
+* the Trigger's `commandfor` names, placed against the Trigger with CSS Anchor Positioning and
+* wired to Title and Description through `aria-labelledby` / `aria-describedby`. Style it with
+* `:popover-open`; it emits `data-side` / `data-align` but no `data-open`.
+*
+* In library mode the children render from committed state, so content that suspends keeps the
+* popover closed (and the Trigger pending) until it is ready; `showPopover({ source: trigger })`
+* runs in the layout effect of the commit that mounted them, and a library-driven close runs
+* `hidePopover()` in the commit that ends it. Dismissals are the browser's: the native `toggle`
+* event becomes `openChangeAction(false, { reason: "dismiss" })`.
+*
+* Owned keys (conventions 1.2): `id`, `popover`, `open`, `aria-modal`, `aria-labelledby` and
+* `aria-describedby` (token-merged), and `data-side` / `data-align` unless `side` is `null`.
+* `role` is a default (`"dialog"`) the consumer may override.
+*/
+function PopoverPopup({ side = "bottom", align = "center", keepMounted, initialFocus, transition, className, style, children, render, ...rest }) {
+	const ctx = usePopoverContext("Popover.Popup");
+	const isLibrary = ctx.mode === "library";
+	const { ids } = ctx;
+	useDevWarning(!isLibrary && transition !== void 0, "Popover.Popup: `transition` has no effect in JS-free mode; the browser opens and closes the popover outside any React transition. Animate it with CSS (`@starting-style`).");
+	useDevWarning(!isLibrary && keepMounted === false, "Popover.Popup: `keepMounted={false}` cannot be honoured in JS-free mode; the content is always mounted so that the server HTML is complete.");
+	const { setElement, visible, wrapContent } = usePopoverPopup(ctx, {
+		part: "Popover.Popup",
+		initialFocus,
+		keepMounted,
+		transition: isLibrary ? transition : void 0
+	});
+	const state = {
+		open: ctx.committed,
+		side,
+		align
+	};
+	const content = (s) => {
+		let node;
+		if (!isLibrary) node = resolveStateValue(children, s);
+		else if (keepMounted === true) node = /* @__PURE__ */ jsx(Activity, {
+			mode: visible ? "visible" : "hidden",
+			children: wrapContent(resolveStateValue(children, s))
+		});
+		else node = visible ? wrapContent(resolveStateValue(children, s)) : null;
+		return /* @__PURE__ */ jsx(PopoverPopupContext, {
+			value: s,
+			children: node
+		});
+	};
+	const libraryProps = {
+		id: ids.popup,
+		popover: "auto",
+		open: void 0,
+		"aria-modal": "false",
+		"aria-labelledby": ids.title,
+		"aria-describedby": ids.description,
+		...side !== null && {
+			"data-side": side,
+			"data-align": align
+		}
+	};
+	const element = useRender({
+		defaultElement: "dialog",
+		render,
+		state,
+		className,
+		style: side === null ? style : (s) => ({
+			positionArea: positionArea(side, align),
+			positionTryFallbacks: POSITION_TRY_FALLBACKS,
+			...resolveStateValue(style, s)
+		}),
+		children: content,
+		props: {
+			role: "dialog",
+			...rest
+		},
+		libraryProps,
+		ref: setElement
+	});
+	return useTransitionBoundary("Popover.Popup", isLibrary ? transition : void 0, element);
+}
+PopoverPopup.displayName = "PopoverPopup";
+//#endregion
+export { PopoverPopup };
+
+//# sourceMappingURL=popover-popup.mjs.map

package/dist/popover/popover-popup.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-popup.mjs","names":[],"sources":["../../src/popover/popover-popup.tsx"],"sourcesContent":["\"use client\";\nimport { Activity } from \"react\";\nimport type {\n  ComponentPropsWithRef,\n  CSSProperties,\n  ReactNode,\n  RefObject,\n  ViewTransitionClass,\n} from \"react\";\nimport { POSITION_TRY_FALLBACKS, positionArea } from \"../internal/anchor-position.js\";\nimport { useTransitionBoundary } from \"../internal/transition-boundary.js\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useDevWarning } from \"../internal/use-dev-warning.js\";\nimport { usePopoverPopup } from \"../internal/use-popover-popup.js\";\nimport { resolveStateValue, useRender } from \"../internal/use-render.js\";\nimport type { DataAttributes } from \"../internal/use-render.js\";\nimport { PopoverPopupContext, usePopoverContext } from \"./popover-context.js\";\n\nexport type PopoverSide = \"top\" | \"bottom\" | \"left\" | \"right\";\nexport type PopoverAlign = \"start\" | \"center\" | \"end\";\n\nexport interface PopoverPopupState {\n  /** Committed open state (library mode); `false` in JS-free mode. Read `:popover-open` for the DOM truth. */\n  readonly open: boolean;\n  readonly side: PopoverSide | null;\n  readonly align: PopoverAlign;\n}\n\nexport interface PopoverPopupProps extends Omit<\n  ComponentPropsWithRef<\"dialog\">,\n  | \"id\"\n  | \"popover\"\n  | \"open\"\n  | \"aria-modal\"\n  | \"onToggle\"\n  | \"onBeforeToggle\"\n  | \"className\"\n  | \"style\"\n  | \"children\"\n> {\n  /**\n   * Placement relative to the Trigger through inline `position-area`, with\n   * `position-try-fallbacks` flipping it when it does not fit. Default `\"bottom\"`. `null` emits\n   * no inline positioning (and no `data-side` / `data-align`), so a stylesheet owns placement.\n   */\n  side?: PopoverSide | null;\n  /** Alignment along the side. Default `\"center\"`. Ignored when `side` is `null`. */\n  align?: PopoverAlign;\n  /**\n   * Library mode: what happens to the children while the popover is closed.\n   * - `false` (default): not rendered. Mounting them is part of the opening transition, so\n   *   content that suspends holds the open until it is ready. Unmount waits for the popover's\n   *   exit animation (CSS), or happens in the close commit when `transition` is set.\n   * - `true`: rendered inside `<Activity mode=\"hidden\">`: DOM and state preserved, effects\n   *   stopped, pre-rendered at low priority. Not in the server HTML.\n   *\n   * Ignored in JS-free mode (always mounted).\n   */\n  keepMounted?: boolean;\n  /**\n   * Element to focus when the popover opens: a ref, or a selector resolved inside the popup.\n   * The library writes `autofocus` on it right before `showPopover()` and the platform focuses\n   * it. Default: the platform's choice for a `<dialog>` (first focusable descendant; the popup\n   * itself if none); for `render={<div />}` focus stays on the Trigger.\n   *\n   * In JS-free mode the browser opens the popover itself, so the attribute is written after\n   * hydration and kept while mounted; before hydration only `autoFocus` in the markup works.\n   */\n  initialFocus?: RefObject<HTMLElement | null> | string;\n  /**\n   * Library mode only. Forwarded to the `<ViewTransition default>` around the popover element\n   * itself. Animates the opening commit, content changes while open, and every library-driven\n   * close (Trigger, Close, controlled `open={false}`), in all engines; dismissals (Escape,\n   * click outside) are the browser's and animate with CSS only. Ignored (dev warning) in JS-free\n   * mode.\n   *\n   * Static: without `transition` the part renders no `<ViewTransition>`; changing it between\n   * `undefined` and a value remounts the element. A Root inserted by a transition with\n   * `transition` set on its Popup pays the page cross-fade (issue #35); a plain open does not,\n   * because the children mount under the already-mounted popover element.\n   */\n  transition?: ViewTransitionClass;\n  className?: StateValue<string | undefined, PopoverPopupState>;\n  style?: StateValue<CSSProperties | undefined, PopoverPopupState>;\n  children?: StateValue<ReactNode, PopoverPopupState>;\n  /** A `<dialog>` (default) or a `<div>` (focus stays on the Trigger). */\n  render?: RenderProp<ComponentPropsWithRef<\"dialog\">, PopoverPopupState>;\n}\n\n/**\n * The popover itself: a `<dialog popover=\"auto\" aria-modal=\"false\" role=\"dialog\">` with the id\n * the Trigger's `commandfor` names, placed against the Trigger with CSS Anchor Positioning and\n * wired to Title and Description through `aria-labelledby` / `aria-describedby`. Style it with\n * `:popover-open`; it emits `data-side` / `data-align` but no `data-open`.\n *\n * In library mode the children render from committed state, so content that suspends keeps the\n * popover closed (and the Trigger pending) until it is ready; `showPopover({ source: trigger })`\n * runs in the layout effect of the commit that mounted them, and a library-driven close runs\n * `hidePopover()` in the commit that ends it. Dismissals are the browser's: the native `toggle`\n * event becomes `openChangeAction(false, { reason: \"dismiss\" })`.\n *\n * Owned keys (conventions 1.2): `id`, `popover`, `open`, `aria-modal`, `aria-labelledby` and\n * `aria-describedby` (token-merged), and `data-side` / `data-align` unless `side` is `null`.\n * `role` is a default (`\"dialog\"`) the consumer may override.\n */\nexport function PopoverPopup({\n  side = \"bottom\",\n  align = \"center\",\n  keepMounted,\n  initialFocus,\n  transition,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: PopoverPopupProps) {\n  const ctx = usePopoverContext(\"Popover.Popup\");\n  const isLibrary = ctx.mode === \"library\";\n  const { ids } = ctx;\n\n  useDevWarning(\n    !isLibrary && transition !== undefined,\n    \"Popover.Popup: `transition` has no effect in JS-free mode; the browser opens and closes the \" +\n      \"popover outside any React transition. Animate it with CSS (`@starting-style`).\",\n  );\n  useDevWarning(\n    !isLibrary && keepMounted === false,\n    \"Popover.Popup: `keepMounted={false}` cannot be honoured in JS-free mode; the content is \" +\n      \"always mounted so that the server HTML is complete.\",\n  );\n\n  const { setElement, visible, wrapContent } = usePopoverPopup(ctx, {\n    part: \"Popover.Popup\",\n    initialFocus,\n    keepMounted,\n    transition: isLibrary ? transition : undefined,\n  });\n\n  const state: PopoverPopupState = { open: ctx.committed, side, align };\n\n  const content = (s: PopoverPopupState): ReactNode => {\n    let node: ReactNode;\n    if (!isLibrary) {\n      node = resolveStateValue(children, s);\n    } else if (keepMounted === true) {\n      // The mode changes with committed state, inside the Root's transition (conventions 5.5);\n      // it stays visible while an exit animation runs.\n      node = (\n        <Activity mode={visible ? \"visible\" : \"hidden\"}>\n          {wrapContent(resolveStateValue(children, s))}\n        </Activity>\n      );\n    } else {\n      node = visible ? wrapContent(resolveStateValue(children, s)) : null;\n    }\n    return <PopoverPopupContext value={s}>{node}</PopoverPopupContext>;\n  };\n\n  const libraryProps: ComponentPropsWithRef<\"dialog\"> & DataAttributes = {\n    id: ids.popup,\n    popover: \"auto\",\n    // Never rendered: `showPopover()` does not set it, and an `open` attribute would show the\n    // <dialog> outside the top layer. Owned so a `render` element cannot add it.\n    open: undefined,\n    // Chromium exposes a <dialog popover> as modal without it (research; issue #44).\n    \"aria-modal\": \"false\",\n    \"aria-labelledby\": ids.title,\n    \"aria-describedby\": ids.description,\n    // Not owned with `side={null}`: the stylesheet (or a render element) may set them.\n    ...(side !== null && { \"data-side\": side, \"data-align\": align }),\n  };\n\n  const element = useRender<ComponentPropsWithRef<\"dialog\">, PopoverPopupState>({\n    defaultElement: \"dialog\",\n    render,\n    state,\n    className,\n    // The inline placement sits under the consumer's style: the consumer wins (design 8).\n    style:\n      side === null\n        ? style\n        : (s) => ({\n            positionArea: positionArea(side, align),\n            positionTryFallbacks: POSITION_TRY_FALLBACKS,\n            ...resolveStateValue(style, s),\n          }),\n    children: content,\n    // `role` is a default the consumer's `rest` overrides (design 3.3): WebKit implements no\n    // minimum role for `[popover]`, and a `<div>` popup needs it.\n    props: { role: \"dialog\", ...rest },\n    libraryProps,\n    ref: setElement,\n  });\n\n  return useTransitionBoundary(\"Popover.Popup\", isLibrary ? transition : undefined, element);\n}\n\nPopoverPopup.displayName = \"PopoverPopup\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAyGA,SAAgB,aAAa,EAC3B,OAAO,UACP,QAAQ,UACR,aACA,cACA,YACA,WACA,OACA,UACA,QACA,GAAG,QACiB;CACpB,MAAM,MAAM,kBAAkB,eAAe;CAC7C,MAAM,YAAY,IAAI,SAAS;CAC/B,MAAM,EAAE,QAAQ;CAEhB,cACE,CAAC,aAAa,eAAe,KAAA,GAC7B,4KAEF;CACA,cACE,CAAC,aAAa,gBAAgB,OAC9B,6IAEF;CAEA,MAAM,EAAE,YAAY,SAAS,gBAAgB,gBAAgB,KAAK;EAChE,MAAM;EACN;EACA;EACA,YAAY,YAAY,aAAa,KAAA;CACvC,CAAC;CAED,MAAM,QAA2B;EAAE,MAAM,IAAI;EAAW;EAAM;CAAM;CAEpE,MAAM,WAAW,MAAoC;EACnD,IAAI;EACJ,IAAI,CAAC,WACH,OAAO,kBAAkB,UAAU,CAAC;OAC/B,IAAI,gBAAgB,MAGzB,OACE,oBAAC,UAAD;GAAU,MAAM,UAAU,YAAY;GACnC,UAAA,YAAY,kBAAkB,UAAU,CAAC,CAAC;EACnC,CAAA;OAGZ,OAAO,UAAU,YAAY,kBAAkB,UAAU,CAAC,CAAC,IAAI;EAEjE,OAAO,oBAAC,qBAAD;GAAqB,OAAO;GAAI,UAAA;EAA0B,CAAA;CACnE;CAEA,MAAM,eAAiE;EACrE,IAAI,IAAI;EACR,SAAS;EAGT,MAAM,KAAA;EAEN,cAAc;EACd,mBAAmB,IAAI;EACvB,oBAAoB,IAAI;EAExB,GAAI,SAAS,QAAQ;GAAE,aAAa;GAAM,cAAc;EAAM;CAChE;CAEA,MAAM,UAAU,UAA8D;EAC5E,gBAAgB;EAChB;EACA;EACA;EAEA,OACE,SAAS,OACL,SACC,OAAO;GACN,cAAc,aAAa,MAAM,KAAK;GACtC,sBAAsB;GACtB,GAAG,kBAAkB,OAAO,CAAC;EAC/B;EACN,UAAU;EAGV,OAAO;GAAE,MAAM;GAAU,GAAG;EAAK;EACjC;EACA,KAAK;CACP,CAAC;CAED,OAAO,sBAAsB,iBAAiB,YAAY,aAAa,KAAA,GAAW,OAAO;AAC3F;AAEA,aAAa,cAAc"}