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

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

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

@@ -0,0 +1,64 @@
+import { ActionDetails, ChangeAction, ChangeReason, StateValue } from "../internal/types.mjs";
+import { ReactNode } from "react";
+//#region src/popover/popover-root.d.ts
+/** Details passed as the second argument of `openChangeAction`. */
+export interface PopoverOpenChangeDetails extends ActionDetails {
+  /**
+   * `"activate"`: the user acted on a part: Trigger (open or close), Close, or a foreign invoker
+   * (`details.event` is a `CommandEvent` / `ToggleEvent` then).
+   * `"dismiss"`: the user closed the popover without a part: Escape, Android back, an assistive-
+   * technology dismiss gesture, a click outside; or script / another top-layer element hid it.
+   * `"platform"`: the popover was found open on mount (opened before hydration); `event` is
+   * `undefined`.
+   */
+  readonly reason: ChangeReason;
+}
+export interface PopoverRootState {
+  /** Optimistic open state (`false` in JS-free mode). Content rendered from it must not suspend. */
+  readonly open: boolean;
+  /** An `openChangeAction` dispatched through this Popover is in flight (library mode only). */
+  readonly pending: boolean;
+}
+export interface PopoverRootProps {
+  /**
+   * Controlled open state. `undefined` means uncontrolled (and, with `defaultOpen` and
+   * `openChangeAction` also absent, JS-free mode).
+   */
+  open?: boolean;
+  /**
+   * Initial open state in uncontrolled library mode. Opens after hydration, never in the server
+   * HTML.
+   */
+  defaultOpen?: boolean;
+  /**
+   * Awaited for `true` (the popover opens when it resolves and the content has rendered) and for
+   * a `false` the user asked a part for (Trigger, Close: the popover hides when it resolves, with
+   * a view transition if `transition` is set; a controlled parent that keeps `open` vetoes it).
+   * A notification for a dismissal (Escape, click outside: the popover is already hidden; the
+   * action runs inside the Root's transition, and a controlled parent that keeps `open` gets it
+   * re-opened, which is not a veto). May be a Server Function. Rejections reach the nearest
+   * Error Boundary above Root.
+   *
+   * A `setState` placed after your own `await` is not a Transition update; wrap it in
+   * `startTransition` (React limitation).
+   */
+  openChangeAction?: ChangeAction<boolean, PopoverOpenChangeDetails>;
+  children?: StateValue<ReactNode, PopoverRootState>;
+}
+/**
+ * Owns the ids, the mode, the open state and the context. Renders no DOM, so it has no `ref`,
+ * `className` or `style`; `pending` is exposed through `children(state)` and the Trigger.
+ *
+ * Without `open`, `defaultOpen` and `openChangeAction` the Popover runs in **JS-free mode**: the
+ * Trigger is a native `command="toggle-popover"` invoker and the browser owns everything. With any
+ * of them it runs in **library mode**: opening and the closes the user asks a part for are
+ * transitions (the Trigger shows `data-pending`, content renders from committed state,
+ * `showPopover()` / `hidePopover()` run when the change has committed); dismissals are the
+ * browser's and `openChangeAction(false)` is a notification.
+ */
+export declare function PopoverRoot({ open, defaultOpen, openChangeAction, children }: PopoverRootProps): import("react").JSX.Element;
+export declare namespace PopoverRoot {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=popover-root.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover-root.d.mts","names":[],"sources":["../../src/popover/popover-root.tsx"],"mappings":";;;;iBAQiB,iCAAiC;;;;;;;;;WASvC,QAAQ;;iBAGF;;WAEN;;WAEA;;iBAGM;;;;;EAKf;;;;;EAKA;;;;;;;;;;;;;EAaA,mBAAmB,sBAAsB;EACzC,WAAW,WAAW,WAAW;;;;;;;;;;;;;wBAcnB,cAAc,MAAM,aAAa,kBAAkB,YAAY,mCAAgB,IAAA;yBAA/E"}

package/dist/popover/popover-root.mjs

@@ -0,0 +1,39 @@
+"use client";
+import { resolveStateValue } from "../internal/use-render.mjs";
+import { PopoverContext } from "./popover-context.mjs";
+import { usePopoverRoot } from "../internal/use-popover-root.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/popover/popover-root.tsx
+/**
+* Owns the ids, the mode, the open state and the context. Renders no DOM, so it has no `ref`,
+* `className` or `style`; `pending` is exposed through `children(state)` and the Trigger.
+*
+* Without `open`, `defaultOpen` and `openChangeAction` the Popover runs in **JS-free mode**: the
+* Trigger is a native `command="toggle-popover"` invoker and the browser owns everything. With any
+* of them it runs in **library mode**: opening and the closes the user asks a part for are
+* transitions (the Trigger shows `data-pending`, content renders from committed state,
+* `showPopover()` / `hidePopover()` run when the change has committed); dismissals are the
+* browser's and `openChangeAction(false)` is a notification.
+*/
+function PopoverRoot({ open, defaultOpen, openChangeAction, children }) {
+	const context = usePopoverRoot({
+		component: "popover",
+		part: "Popover.Root",
+		open,
+		defaultOpen,
+		openChangeAction
+	});
+	const state = {
+		open: context.optimistic,
+		pending: context.pending
+	};
+	return /* @__PURE__ */ jsx(PopoverContext, {
+		value: context,
+		children: resolveStateValue(children, state)
+	});
+}
+PopoverRoot.displayName = "PopoverRoot";
+//#endregion
+export { PopoverRoot };
+
+//# sourceMappingURL=popover-root.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover-root.mjs","names":[],"sources":["../../src/popover/popover-root.tsx"],"sourcesContent":["\"use client\";\nimport type { ReactNode } from \"react\";\nimport type { ActionDetails, ChangeAction, ChangeReason, StateValue } from \"../internal/types.js\";\nimport { usePopoverRoot } from \"../internal/use-popover-root.js\";\nimport { resolveStateValue } from \"../internal/use-render.js\";\nimport { PopoverContext } from \"./popover-context.js\";\n\n/** Details passed as the second argument of `openChangeAction`. */\nexport interface PopoverOpenChangeDetails extends ActionDetails {\n  /**\n   * `\"activate\"`: the user acted on a part: Trigger (open or close), Close, or a foreign invoker\n   * (`details.event` is a `CommandEvent` / `ToggleEvent` then).\n   * `\"dismiss\"`: the user closed the popover without a part: Escape, Android back, an assistive-\n   * technology dismiss gesture, a click outside; or script / another top-layer element hid it.\n   * `\"platform\"`: the popover was found open on mount (opened before hydration); `event` is\n   * `undefined`.\n   */\n  readonly reason: ChangeReason;\n}\n\nexport interface PopoverRootState {\n  /** Optimistic open state (`false` in JS-free mode). Content rendered from it must not suspend. */\n  readonly open: boolean;\n  /** An `openChangeAction` dispatched through this Popover is in flight (library mode only). */\n  readonly pending: boolean;\n}\n\nexport interface PopoverRootProps {\n  /**\n   * Controlled open state. `undefined` means uncontrolled (and, with `defaultOpen` and\n   * `openChangeAction` also absent, JS-free mode).\n   */\n  open?: boolean;\n  /**\n   * Initial open state in uncontrolled library mode. Opens after hydration, never in the server\n   * HTML.\n   */\n  defaultOpen?: boolean;\n  /**\n   * Awaited for `true` (the popover opens when it resolves and the content has rendered) and for\n   * a `false` the user asked a part for (Trigger, Close: the popover hides when it resolves, with\n   * a view transition if `transition` is set; a controlled parent that keeps `open` vetoes it).\n   * A notification for a dismissal (Escape, click outside: the popover is already hidden; the\n   * action runs inside the Root's transition, and a controlled parent that keeps `open` gets it\n   * re-opened, which is not a veto). May be a Server Function. Rejections reach the nearest\n   * Error Boundary above Root.\n   *\n   * A `setState` placed after your own `await` is not a Transition update; wrap it in\n   * `startTransition` (React limitation).\n   */\n  openChangeAction?: ChangeAction<boolean, PopoverOpenChangeDetails>;\n  children?: StateValue<ReactNode, PopoverRootState>;\n}\n\n/**\n * Owns the ids, the mode, the open state and the context. Renders no DOM, so it has no `ref`,\n * `className` or `style`; `pending` is exposed through `children(state)` and the Trigger.\n *\n * Without `open`, `defaultOpen` and `openChangeAction` the Popover runs in **JS-free mode**: the\n * Trigger is a native `command=\"toggle-popover\"` invoker and the browser owns everything. With any\n * of them it runs in **library mode**: opening and the closes the user asks a part for are\n * transitions (the Trigger shows `data-pending`, content renders from committed state,\n * `showPopover()` / `hidePopover()` run when the change has committed); dismissals are the\n * browser's and `openChangeAction(false)` is a notification.\n */\nexport function PopoverRoot({ open, defaultOpen, openChangeAction, children }: PopoverRootProps) {\n  const context = usePopoverRoot<PopoverOpenChangeDetails>({\n    component: \"popover\",\n    part: \"Popover.Root\",\n    open,\n    defaultOpen,\n    openChangeAction,\n  });\n\n  const state: PopoverRootState = { open: context.optimistic, pending: context.pending };\n\n  return <PopoverContext value={context}>{resolveStateValue(children, state)}</PopoverContext>;\n}\n\nPopoverRoot.displayName = \"PopoverRoot\";\n"],"mappings":";;;;;;;;;;;;;;;;;AAiEA,SAAgB,YAAY,EAAE,MAAM,aAAa,kBAAkB,YAA8B;CAC/F,MAAM,UAAU,eAAyC;EACvD,WAAW;EACX,MAAM;EACN;EACA;EACA;CACF,CAAC;CAED,MAAM,QAA0B;EAAE,MAAM,QAAQ;EAAY,SAAS,QAAQ;CAAQ;CAErF,OAAO,oBAAC,gBAAD;EAAgB,OAAO;EAAU,UAAA,kBAAkB,UAAU,KAAK;CAAkB,CAAA;AAC7F;AAEA,YAAY,cAAc"}

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

@@ -0,0 +1,23 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { PopoverPopupState } from "./popover-popup.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/popover/popover-title.d.ts
+export type PopoverTitleState = PopoverPopupState;
+export interface PopoverTitleProps extends Omit<ComponentPropsWithRef<"h2">, "id" | "className" | "style" | "children"> {
+  className?: StateValue<string | undefined, PopoverTitleState>;
+  style?: StateValue<CSSProperties | undefined, PopoverTitleState>;
+  children?: StateValue<ReactNode, PopoverTitleState>;
+  /** `render={<h3 />}` changes the heading level. */
+  render?: RenderProp<ComponentPropsWithRef<"h2">, PopoverTitleState>;
+}
+/**
+ * The popover's name: an `<h2>` whose id the Popup references with `aria-labelledby`.
+ *
+ * Owned key (conventions 1.2): `id`.
+ */
+export declare function PopoverTitle({ className, style, children, render, ...rest }: PopoverTitleProps): ReactNode;
+export declare namespace PopoverTitle {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=popover-title.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover-title.d.mts","names":[],"sources":["../../src/popover/popover-title.tsx"],"mappings":";;;;YAOY,oBAAoB;iBAEf,0BAA0B,KACzC;EAGA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;;EAEjC,SAAS,WAAW,6BAA6B;;;;;;;wBAQnC,eAAe,WAAW,OAAO,UAAU,WAAW,QAAQ,oBAAiB;yBAA/E"}

package/dist/popover/popover-title.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-title.tsx
+/**
+* The popover's name: an `<h2>` whose id the Popup references with `aria-labelledby`.
+*
+* Owned key (conventions 1.2): `id`.
+*/
+function PopoverTitle({ className, style, children, render, ...rest }) {
+	const ctx = usePopoverContext("Popover.Title");
+	const state = usePopoverPopupState(ctx);
+	return useRender({
+		defaultElement: "h2",
+		render,
+		state,
+		className,
+		style,
+		children,
+		props: rest,
+		libraryProps: { id: ctx.ids.title }
+	});
+}
+PopoverTitle.displayName = "PopoverTitle";
+//#endregion
+export { PopoverTitle };
+
+//# sourceMappingURL=popover-title.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover-title.mjs","names":[],"sources":["../../src/popover/popover-title.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 PopoverTitleState = PopoverPopupState;\n\nexport interface PopoverTitleProps extends Omit<\n  ComponentPropsWithRef<\"h2\">,\n  \"id\" | \"className\" | \"style\" | \"children\"\n> {\n  className?: StateValue<string | undefined, PopoverTitleState>;\n  style?: StateValue<CSSProperties | undefined, PopoverTitleState>;\n  children?: StateValue<ReactNode, PopoverTitleState>;\n  /** `render={<h3 />}` changes the heading level. */\n  render?: RenderProp<ComponentPropsWithRef<\"h2\">, PopoverTitleState>;\n}\n\n/**\n * The popover's name: an `<h2>` whose id the Popup references with `aria-labelledby`.\n *\n * Owned key (conventions 1.2): `id`.\n */\nexport function PopoverTitle({ className, style, children, render, ...rest }: PopoverTitleProps) {\n  const ctx = usePopoverContext(\"Popover.Title\");\n  const state = usePopoverPopupState(ctx);\n  return useRender<ComponentPropsWithRef<\"h2\">, PopoverTitleState>({\n    defaultElement: \"h2\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps: { id: ctx.ids.title },\n  });\n}\n\nPopoverTitle.displayName = \"PopoverTitle\";\n"],"mappings":";;;;;;;;;AAyBA,SAAgB,aAAa,EAAE,WAAW,OAAO,UAAU,QAAQ,GAAG,QAA2B;CAC/F,MAAM,MAAM,kBAAkB,eAAe;CAC7C,MAAM,QAAQ,qBAAqB,GAAG;CACtC,OAAO,UAA0D;EAC/D,gBAAgB;EAChB;EACA;EACA;EACA;EACA;EACA,OAAO;EACP,cAAc,EAAE,IAAI,IAAI,IAAI,MAAM;CACpC,CAAC;AACH;AAEA,aAAa,cAAc"}

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

@@ -0,0 +1,37 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/popover/popover-trigger.d.ts
+export interface PopoverTriggerState {
+  /** Optimistic open state (library mode); `false` in JS-free mode. */
+  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 PopoverTriggerProps extends Omit<ComponentPropsWithRef<"button">, "onClick" | "aria-expanded" | "className" | "style" | "children"> {
+  /** Native `disabled`: a disabled button is not a valid invoker and never dispatches. */
+  disabled?: boolean;
+  className?: StateValue<string | undefined, PopoverTriggerState>;
+  style?: StateValue<CSSProperties | undefined, PopoverTriggerState>;
+  /** Rendered from optimistic state; must not suspend. */
+  children?: StateValue<ReactNode, PopoverTriggerState>;
+  /** Should render a `<button>`; another element works only in library mode (click handler). */
+  render?: RenderProp<ComponentPropsWithRef<"button">, PopoverTriggerState>;
+}
+/**
+ * The toggle: `<button type="button" commandfor command="toggle-popover" aria-expanded>`. In
+ * JS-free mode the browser runs the command and the Popup keeps `aria-expanded` current. In
+ * library mode the click is cancelled (so the command does not run) and dispatched through the
+ * Root's transition: an open, or a library-owned close while open. The button shows optimistic
+ * `data-open` / `aria-expanded` and `data-pending` until the change has landed.
+ *
+ * Owned keys (conventions 1.2): `type` (on a `<button>` only), `disabled`, `commandfor`,
+ * `command`, `aria-expanded`, `onClick` (library mode), `data-open`, `data-pending`,
+ * `data-disabled`. `aria-haspopup` and `aria-controls` pass through.
+ */
+export declare function PopoverTrigger({ disabled, className, style, children, render, ...rest }: PopoverTriggerProps): ReactNode;
+export declare namespace PopoverTrigger {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=popover-trigger.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover-trigger.d.mts","names":[],"sources":["../../src/popover/popover-trigger.tsx"],"mappings":";;;iBAOiB;;WAEN;;WAEA;WACA;;iBAGM,4BAA4B,KAC3C;;EAIA;EACA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;;EAE9C,WAAW,WAAW,WAAW;;EAEjC,SAAS,WAAW,iCAAiC;;;;;;;;;;;;;wBAcvC,iBACd,UACA,WACA,OACA,UACA,WACG,QACF,sBAAmB;yBAPN"}