@funstack/ui 0.1.0-alpha.3 → 0.1.0-alpha.5

package/dist/number-field/use-step-button.mjs

@@ -0,0 +1,107 @@
+"use client";
+import { useEffect, useRef } from "react";
+/**
+* The press-and-hold of `NumberField.Increment` / `Decrement` (design 4.3): one step at
+* `pointerdown`, a repeat after 400 ms then every 60 ms, one commit at the release
+* (`pointerup`, `pointercancel`, `lostpointercapture`, or `blur` on the window). The press is
+* `preventDefault()`ed so focus stays where it is. A `click` with no pointer gesture before it
+* (assistive technology: `detail === 0`) is a one-step gesture.
+*/
+function useStepButton(ctx, direction, disabled) {
+	const active = useRef(null);
+	/** A pointer gesture started on this button; the click that follows it is not an activation. */
+	const pointerSeen = useRef(false);
+	const latest = useRef({
+		ctx,
+		disabled
+	});
+	useEffect(() => {
+		latest.current = {
+			ctx,
+			disabled
+		};
+	});
+	useEffect(() => () => {
+		active.current?.detach();
+		active.current = null;
+	}, []);
+	const onPointerDown = (event) => {
+		if (event.button !== 0 || !event.isPrimary) return;
+		if (disabled || active.current !== null) return;
+		const element = event.currentTarget;
+		const native = event.nativeEvent;
+		event.preventDefault();
+		pointerSeen.current = true;
+		const pointerId = native.pointerId;
+		try {
+			element.setPointerCapture(pointerId);
+		} catch {}
+		let timer;
+		const view = element.ownerDocument.defaultView;
+		const detach = () => {
+			if (timer !== void 0) clearTimeout(timer);
+			timer = void 0;
+			element.removeEventListener("pointerup", onEnd);
+			element.removeEventListener("pointercancel", onEnd);
+			element.removeEventListener("lostpointercapture", onEnd);
+			view?.removeEventListener("blur", onBlur);
+			if (active.current?.pointerId === pointerId) active.current = null;
+			setTimeout(() => {
+				pointerSeen.current = false;
+			}, 0);
+		};
+		function onEnd(endEvent) {
+			if (endEvent.pointerId !== pointerId) return;
+			detach();
+			latest.current.ctx.endHold(direction, endEvent);
+		}
+		function onBlur(blurEvent) {
+			detach();
+			latest.current.ctx.endHold(direction, blurEvent);
+		}
+		const tick = () => {
+			timer = setTimeout(() => {
+				timer = void 0;
+				if (latest.current.ctx.tickHold(direction, void 0)) tick();
+				else detach();
+			}, 60);
+		};
+		if (!ctx.beginHold(direction, native)) {
+			detach();
+			return;
+		}
+		element.addEventListener("pointerup", onEnd);
+		element.addEventListener("pointercancel", onEnd);
+		element.addEventListener("lostpointercapture", onEnd);
+		view?.addEventListener("blur", onBlur);
+		active.current = {
+			pointerId,
+			detach
+		};
+		timer = setTimeout(() => {
+			timer = void 0;
+			if (latest.current.ctx.tickHold(direction, void 0)) tick();
+			else detach();
+		}, 400);
+	};
+	const onClick = (event) => {
+		if (pointerSeen.current || active.current !== null || event.detail !== 0) {
+			pointerSeen.current = false;
+			return;
+		}
+		if (disabled) return;
+		ctx.activate(direction, event.nativeEvent);
+	};
+	const onContextMenu = (event) => {
+		if (active.current !== null) event.preventDefault();
+	};
+	return {
+		onPointerDown,
+		onClick,
+		onContextMenu
+	};
+}
+//#endregion
+export { useStepButton };
+
+//# sourceMappingURL=use-step-button.mjs.map

package/dist/number-field/use-step-button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-step-button.mjs","names":[],"sources":["../../src/number-field/use-step-button.ts"],"sourcesContent":["\"use client\";\nimport { useEffect, useRef } from \"react\";\nimport type { MouseEvent as ReactMouseEvent, PointerEvent as ReactPointerEvent } from \"react\";\nimport type { NumberFieldContextValue, StepDirection } from \"./number-field-context.js\";\n\n/** First repeat after the press, then the interval between repeats (Base UI, React Aria). */\nexport const HOLD_DELAY = 400;\nexport const HOLD_INTERVAL = 60;\n\ninterface ActiveHold {\n  readonly pointerId: number;\n  readonly detach: () => void;\n}\n\nexport interface StepButtonHandlers {\n  readonly onPointerDown: (event: ReactPointerEvent<HTMLElement>) => void;\n  readonly onClick: (event: ReactMouseEvent<HTMLElement>) => void;\n  readonly onContextMenu: (event: ReactMouseEvent<HTMLElement>) => void;\n}\n\n/**\n * The press-and-hold of `NumberField.Increment` / `Decrement` (design 4.3): one step at\n * `pointerdown`, a repeat after 400 ms then every 60 ms, one commit at the release\n * (`pointerup`, `pointercancel`, `lostpointercapture`, or `blur` on the window). The press is\n * `preventDefault()`ed so focus stays where it is. A `click` with no pointer gesture before it\n * (assistive technology: `detail === 0`) is a one-step gesture.\n */\nexport function useStepButton(\n  ctx: NumberFieldContextValue,\n  direction: StepDirection,\n  disabled: boolean,\n): StepButtonHandlers {\n  const active = useRef<ActiveHold | null>(null);\n  /** A pointer gesture started on this button; the click that follows it is not an activation. */\n  const pointerSeen = useRef(false);\n  const latest = useRef({ ctx, disabled });\n  useEffect(() => {\n    latest.current = { ctx, disabled };\n  });\n\n  // An unmount mid-hold leaves no timer or listener behind.\n  useEffect(\n    () => () => {\n      active.current?.detach();\n      active.current = null;\n    },\n    [],\n  );\n\n  const onPointerDown = (event: ReactPointerEvent<HTMLElement>): void => {\n    if (event.button !== 0 || !event.isPrimary) return;\n    if (disabled || active.current !== null) return;\n    const element = event.currentTarget;\n    const native = event.nativeEvent;\n    // No focus move off the input, no touch keyboard, no text selection.\n    event.preventDefault();\n    pointerSeen.current = true;\n    const pointerId = native.pointerId;\n    try {\n      element.setPointerCapture(pointerId);\n    } catch {\n      // An inactive pointer id (a synthetic event): the hold still follows the element.\n    }\n\n    let timer: ReturnType<typeof setTimeout> | undefined;\n    const view = element.ownerDocument.defaultView;\n    const detach = (): void => {\n      if (timer !== undefined) clearTimeout(timer);\n      timer = undefined;\n      element.removeEventListener(\"pointerup\", onEnd);\n      element.removeEventListener(\"pointercancel\", onEnd);\n      element.removeEventListener(\"lostpointercapture\", onEnd);\n      view?.removeEventListener(\"blur\", onBlur);\n      if (active.current?.pointerId === pointerId) active.current = null;\n      // A click that follows this release (same task, or a touch tap later) is ignored; an\n      // activation without a pointer afterwards is not.\n      setTimeout(() => {\n        pointerSeen.current = false;\n      }, 0);\n    };\n    function onEnd(endEvent: Event): void {\n      if ((endEvent as PointerEvent).pointerId !== pointerId) return;\n      detach();\n      latest.current.ctx.endHold(direction, endEvent);\n    }\n    function onBlur(blurEvent: Event): void {\n      detach();\n      latest.current.ctx.endHold(direction, blurEvent);\n    }\n    const tick = (): void => {\n      timer = setTimeout(() => {\n        timer = undefined;\n        if (latest.current.ctx.tickHold(direction, undefined)) tick();\n        else detach();\n      }, HOLD_INTERVAL);\n    };\n\n    if (!ctx.beginHold(direction, native)) {\n      // The first step reached the bound: the hold already committed.\n      detach();\n      return;\n    }\n    element.addEventListener(\"pointerup\", onEnd);\n    element.addEventListener(\"pointercancel\", onEnd);\n    element.addEventListener(\"lostpointercapture\", onEnd);\n    view?.addEventListener(\"blur\", onBlur);\n    active.current = { pointerId, detach };\n    timer = setTimeout(() => {\n      timer = undefined;\n      if (latest.current.ctx.tickHold(direction, undefined)) tick();\n      else detach();\n    }, HOLD_DELAY);\n  };\n\n  const onClick = (event: ReactMouseEvent<HTMLElement>): void => {\n    if (pointerSeen.current || active.current !== null || event.detail !== 0) {\n      pointerSeen.current = false;\n      return;\n    }\n    if (disabled) return;\n    ctx.activate(direction, event.nativeEvent);\n  };\n\n  const onContextMenu = (event: ReactMouseEvent<HTMLElement>): void => {\n    // A touch long-press would open the context menu mid-hold.\n    if (active.current !== null) event.preventDefault();\n  };\n\n  return { onPointerDown, onClick, onContextMenu };\n}\n"],"mappings":";;;;;;;;;AA2BA,SAAgB,cACd,KACA,WACA,UACoB;CACpB,MAAM,SAAS,OAA0B,IAAI;;CAE7C,MAAM,cAAc,OAAO,KAAK;CAChC,MAAM,SAAS,OAAO;EAAE;EAAK;CAAS,CAAC;CACvC,gBAAgB;EACd,OAAO,UAAU;GAAE;GAAK;EAAS;CACnC,CAAC;CAGD,sBACc;EACV,OAAO,SAAS,OAAO;EACvB,OAAO,UAAU;CACnB,GACA,CAAC,CACH;CAEA,MAAM,iBAAiB,UAAgD;EACrE,IAAI,MAAM,WAAW,KAAK,CAAC,MAAM,WAAW;EAC5C,IAAI,YAAY,OAAO,YAAY,MAAM;EACzC,MAAM,UAAU,MAAM;EACtB,MAAM,SAAS,MAAM;EAErB,MAAM,eAAe;EACrB,YAAY,UAAU;EACtB,MAAM,YAAY,OAAO;EACzB,IAAI;GACF,QAAQ,kBAAkB,SAAS;EACrC,QAAQ,CAER;EAEA,IAAI;EACJ,MAAM,OAAO,QAAQ,cAAc;EACnC,MAAM,eAAqB;GACzB,IAAI,UAAU,KAAA,GAAW,aAAa,KAAK;GAC3C,QAAQ,KAAA;GACR,QAAQ,oBAAoB,aAAa,KAAK;GAC9C,QAAQ,oBAAoB,iBAAiB,KAAK;GAClD,QAAQ,oBAAoB,sBAAsB,KAAK;GACvD,MAAM,oBAAoB,QAAQ,MAAM;GACxC,IAAI,OAAO,SAAS,cAAc,WAAW,OAAO,UAAU;GAG9D,iBAAiB;IACf,YAAY,UAAU;GACxB,GAAG,CAAC;EACN;EACA,SAAS,MAAM,UAAuB;GACpC,IAAK,SAA0B,cAAc,WAAW;GACxD,OAAO;GACP,OAAO,QAAQ,IAAI,QAAQ,WAAW,QAAQ;EAChD;EACA,SAAS,OAAO,WAAwB;GACtC,OAAO;GACP,OAAO,QAAQ,IAAI,QAAQ,WAAW,SAAS;EACjD;EACA,MAAM,aAAmB;GACvB,QAAQ,iBAAiB;IACvB,QAAQ,KAAA;IACR,IAAI,OAAO,QAAQ,IAAI,SAAS,WAAW,KAAA,CAAS,GAAG,KAAK;SACvD,OAAO;GACd,GAAA,EAAgB;EAClB;EAEA,IAAI,CAAC,IAAI,UAAU,WAAW,MAAM,GAAG;GAErC,OAAO;GACP;EACF;EACA,QAAQ,iBAAiB,aAAa,KAAK;EAC3C,QAAQ,iBAAiB,iBAAiB,KAAK;EAC/C,QAAQ,iBAAiB,sBAAsB,KAAK;EACpD,MAAM,iBAAiB,QAAQ,MAAM;EACrC,OAAO,UAAU;GAAE;GAAW;EAAO;EACrC,QAAQ,iBAAiB;GACvB,QAAQ,KAAA;GACR,IAAI,OAAO,QAAQ,IAAI,SAAS,WAAW,KAAA,CAAS,GAAG,KAAK;QACvD,OAAO;EACd,GAAA,GAAa;CACf;CAEA,MAAM,WAAW,UAA8C;EAC7D,IAAI,YAAY,WAAW,OAAO,YAAY,QAAQ,MAAM,WAAW,GAAG;GACxE,YAAY,UAAU;GACtB;EACF;EACA,IAAI,UAAU;EACd,IAAI,SAAS,WAAW,MAAM,WAAW;CAC3C;CAEA,MAAM,iBAAiB,UAA8C;EAEnE,IAAI,OAAO,YAAY,MAAM,MAAM,eAAe;CACpD;CAEA,OAAO;EAAE;EAAe;EAAS;CAAc;AACjD"}

package/dist/popover/popover-close.mjs

@@ -1,7 +1,8 @@
 "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 { rendersButton } from "../internal/render-element.mjs";
+import { useRender } from "../internal/use-render.mjs";
 import { useActionTrigger } from "../internal/use-action-trigger.mjs";
 import { usePopoverContext } from "./popover-context.mjs";
 import { useCallback } from "react";

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

@@ -1 +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"}
+{"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-popup.d.mts.map

@@ -1 +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"}
+{"version":3,"file":"popover-popup.d.mts","names":[],"sources":["../../src/popover/popover-popup.tsx"],"mappings":";;;YAmBY;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

@@ -1,6 +1,8 @@
 "use client";
 import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
-import { resolveStateValue, useRender } from "../internal/use-render.mjs";
+import { resolveStateValue } from "../internal/render-element.mjs";
+import { useRender } from "../internal/use-render.mjs";
+import { ToolbarContext } from "../internal/toolbar-context.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";
@@ -51,7 +53,10 @@ function PopoverPopup({ side = "bottom", align = "center", keepMounted, initialF
 		else node = visible ? wrapContent(resolveStateValue(children, s)) : null;
 		return /* @__PURE__ */ jsx(PopoverPopupContext, {
 			value: s,
-			children: node
+			children: /* @__PURE__ */ jsx(ToolbarContext, {
+				value: null,
+				children: node
+			})
 		});
 	};
 	const libraryProps = {

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

@@ -1 +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"}
+{"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 { ToolbarContext } from \"../internal/toolbar-context.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    // Popup content is not part of an enclosing Toolbar's sequence (the engine excludes\n    // `[popover]`), so parts inside it must not see the Toolbar either.\n    return (\n      <PopoverPopupContext value={s}>\n        <ToolbarContext value={null}>{node}</ToolbarContext>\n      </PopoverPopupContext>\n    );\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0GA,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;EAIjE,OACE,oBAAC,qBAAD;GAAqB,OAAO;GAC1B,UAAA,oBAAC,gBAAD;IAAgB,OAAO;IAAO,UAAA;GAAqB,CAAA;EAChC,CAAA;CAEzB;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.mjs

@@ -1,5 +1,5 @@
 "use client";
-import { resolveStateValue } from "../internal/use-render.mjs";
+import { resolveStateValue } from "../internal/render-element.mjs";
 import { PopoverContext } from "./popover-context.mjs";
 import { usePopoverRoot } from "../internal/use-popover-root.mjs";
 import { jsx } from "react/jsx-runtime";

package/dist/progress/index.d.mts

@@ -0,0 +1,24 @@
+import "../internal/platform-attributes.mjs";
+import { ProgressRoot, ProgressRootProps, ProgressState } from "./progress-root.mjs";
+import { ProgressIndicator, ProgressIndicatorProps } from "./progress-indicator.mjs";
+import { ProgressLabel, ProgressLabelProps } from "./progress-label.mjs";
+import { ProgressTrack, ProgressTrackProps } from "./progress-track.mjs";
+import { ProgressValue, ProgressValueProps } from "./progress-value.mjs";
+//#region src/progress/index.d.ts
+/**
+ * Progress (WAI-ARIA `progressbar`): `Root` (`div[role=progressbar]`, directive-free, so a
+ * Server Component may render it and it runs on the server), `Track` (the rail), `Indicator`
+ * (the fill, sized by your CSS from `--progress-value`), `Label` and `Value`. Output-only: no
+ * actions and no pending state; a `value` of `null` (the default) is indeterminate. Write a value
+ * that reports on a pending action with a plain `setState`, never inside `startTransition`.
+ */
+export declare const Progress: {
+  readonly Root: typeof ProgressRoot;
+  readonly Track: typeof ProgressTrack;
+  readonly Indicator: typeof ProgressIndicator;
+  readonly Label: typeof ProgressLabel;
+  readonly Value: typeof ProgressValue;
+};
+//#endregion
+export type { ProgressIndicatorProps, ProgressLabelProps, ProgressRootProps, ProgressState, ProgressTrackProps, ProgressValueProps };
+//# sourceMappingURL=index.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../../src/progress/index.ts"],"mappings":";;;;;;;;;;;;;;qBAgBa;WACX,aAAI;WACJ,cAAK;WACL,kBAAS;WACT,cAAK;WACL,cAAK"}

package/dist/progress/index.mjs

@@ -0,0 +1,24 @@
+import { ProgressIndicator } from "./progress-indicator.mjs";
+import { ProgressLabel } from "./progress-label.mjs";
+import { ProgressRoot } from "./progress-root.mjs";
+import { ProgressTrack } from "./progress-track.mjs";
+import { ProgressValue } from "./progress-value.mjs";
+//#region src/progress/index.ts
+/**
+* Progress (WAI-ARIA `progressbar`): `Root` (`div[role=progressbar]`, directive-free, so a
+* Server Component may render it and it runs on the server), `Track` (the rail), `Indicator`
+* (the fill, sized by your CSS from `--progress-value`), `Label` and `Value`. Output-only: no
+* actions and no pending state; a `value` of `null` (the default) is indeterminate. Write a value
+* that reports on a pending action with a plain `setState`, never inside `startTransition`.
+*/
+const Progress = {
+	Root: ProgressRoot,
+	Track: ProgressTrack,
+	Indicator: ProgressIndicator,
+	Label: ProgressLabel,
+	Value: ProgressValue
+};
+//#endregion
+export { Progress };
+
+//# sourceMappingURL=index.mjs.map

package/dist/progress/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/progress/index.ts"],"sourcesContent":["// Ships the platform attribute typings with this subpath (conventions 7.4). Type-only: the\n// built JS has no import of it.\nimport \"../internal/platform-attributes.js\";\nimport { ProgressIndicator } from \"./progress-indicator.js\";\nimport { ProgressLabel } from \"./progress-label.js\";\nimport { ProgressRoot } from \"./progress-root.js\";\nimport { ProgressTrack } from \"./progress-track.js\";\nimport { ProgressValue } from \"./progress-value.js\";\n\n/**\n * Progress (WAI-ARIA `progressbar`): `Root` (`div[role=progressbar]`, directive-free, so a\n * Server Component may render it and it runs on the server), `Track` (the rail), `Indicator`\n * (the fill, sized by your CSS from `--progress-value`), `Label` and `Value`. Output-only: no\n * actions and no pending state; a `value` of `null` (the default) is indeterminate. Write a value\n * that reports on a pending action with a plain `setState`, never inside `startTransition`.\n */\nexport const Progress = {\n  Root: ProgressRoot,\n  Track: ProgressTrack,\n  Indicator: ProgressIndicator,\n  Label: ProgressLabel,\n  Value: ProgressValue,\n} as const;\n\nexport type { ProgressRootProps, ProgressState } from \"./progress-root.js\";\nexport type { ProgressTrackProps } from \"./progress-track.js\";\nexport type { ProgressIndicatorProps } from \"./progress-indicator.js\";\nexport type { ProgressLabelProps } from \"./progress-label.js\";\nexport type { ProgressValueProps } from \"./progress-value.js\";\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAa,WAAW;CACtB,MAAM;CACN,OAAO;CACP,WAAW;CACX,OAAO;CACP,OAAO;AACT"}

package/dist/progress/progress-context.mjs

@@ -0,0 +1,13 @@
+"use client";
+import { createContext, use } from "react";
+//#region src/progress/progress-context.ts
+const ProgressContext = createContext(null);
+function useProgressContext(part) {
+	const context = use(ProgressContext);
+	if (context === null) throw new Error(`${part} must be rendered inside a Progress.Root.`);
+	return context;
+}
+//#endregion
+export { ProgressContext, useProgressContext };
+
+//# sourceMappingURL=progress-context.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"progress-context.mjs","names":[],"sources":["../../src/progress/progress-context.ts"],"sourcesContent":["\"use client\";\nimport { createContext, use } from \"react\";\nimport type { ProgressState } from \"./progress-root.js\";\n\n/**\n * What the directive-free `Progress.Root` provides to its parts: plain serialisable data, so the\n * provider can be rendered by a Root running as a Server Component (design 8.1).\n */\nexport interface ProgressContextValue {\n  /** The Root's `useId`; `Progress.Label` renders `${id}-label`. */\n  readonly id: string;\n  readonly state: ProgressState;\n}\n\nexport const ProgressContext = createContext<ProgressContextValue | null>(null);\n\nexport function useProgressContext(part: string): ProgressContextValue {\n  const context = use(ProgressContext);\n  if (context === null) {\n    throw new Error(`${part} must be rendered inside a Progress.Root.`);\n  }\n  return context;\n}\n"],"mappings":";;;AAcA,MAAa,kBAAkB,cAA2C,IAAI;AAE9E,SAAgB,mBAAmB,MAAoC;CACrE,MAAM,UAAU,IAAI,eAAe;CACnC,IAAI,YAAY,MACd,MAAM,IAAI,MAAM,GAAG,KAAK,0CAA0C;CAEpE,OAAO;AACT"}

package/dist/progress/progress-indicator.d.mts

@@ -0,0 +1,19 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { ProgressState } from "./progress-root.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/progress/progress-indicator.d.ts
+export interface ProgressIndicatorProps extends Omit<ComponentPropsWithRef<"span">, "className" | "style" | "children"> {
+  className?: StateValue<string | undefined, ProgressState>;
+  style?: StateValue<CSSProperties | undefined, ProgressState>;
+  children?: StateValue<ReactNode, ProgressState>;
+  render?: RenderProp<ComponentPropsWithRef<"span">, ProgressState>;
+}
+/**
+ * `Progress.Indicator`: the fill. It renders no inline size: the consumer's CSS sizes it from the Root's inherited custom property. Owned keys: `data-indeterminate`, `data-complete`.
+ */
+export declare function ProgressIndicator({ className, style, children, render, ...rest }: ProgressIndicatorProps): ReactNode;
+export declare namespace ProgressIndicator {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=progress-indicator.d.mts.map

package/dist/progress/progress-indicator.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-indicator.d.mts","names":[],"sources":["../../src/progress/progress-indicator.tsx"],"mappings":";;;;iBAQiB,+BAA+B,KAC9C;EAGA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,+BAA+B;;;;;wBAMrC,oBACd,WACA,OACA,UACA,WACG,QACF,yBAAsB;yBANT"}

package/dist/progress/progress-indicator.mjs

@@ -0,0 +1,29 @@
+"use client";
+import { dataAttr } from "../internal/data-attr.mjs";
+import { useRender } from "../internal/use-render.mjs";
+import { useProgressContext } from "./progress-context.mjs";
+//#region src/progress/progress-indicator.tsx
+/**
+* `Progress.Indicator`: the fill. It renders no inline size: the consumer's CSS sizes it from the Root's inherited custom property. Owned keys: `data-indeterminate`, `data-complete`.
+*/
+function ProgressIndicator({ className, style, children, render, ...rest }) {
+	const { state } = useProgressContext("Progress.Indicator");
+	return useRender({
+		defaultElement: "span",
+		render,
+		state,
+		className,
+		style,
+		children,
+		props: rest,
+		libraryProps: {
+			"data-indeterminate": dataAttr(state.indeterminate),
+			"data-complete": dataAttr(state.complete)
+		}
+	});
+}
+ProgressIndicator.displayName = "ProgressIndicator";
+//#endregion
+export { ProgressIndicator };
+
+//# sourceMappingURL=progress-indicator.mjs.map

package/dist/progress/progress-indicator.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-indicator.mjs","names":[],"sources":["../../src/progress/progress-indicator.tsx"],"sourcesContent":["\"use client\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { useProgressContext } from \"./progress-context.js\";\nimport type { ProgressState } from \"./progress-root.js\";\n\nexport interface ProgressIndicatorProps extends Omit<\n  ComponentPropsWithRef<\"span\">,\n  \"className\" | \"style\" | \"children\"\n> {\n  className?: StateValue<string | undefined, ProgressState>;\n  style?: StateValue<CSSProperties | undefined, ProgressState>;\n  children?: StateValue<ReactNode, ProgressState>;\n  render?: RenderProp<ComponentPropsWithRef<\"span\">, ProgressState>;\n}\n\n/**\n * `Progress.Indicator`: the fill. It renders no inline size: the consumer's CSS sizes it from the Root's inherited custom property. Owned keys: `data-indeterminate`, `data-complete`.\n */\nexport function ProgressIndicator({\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: ProgressIndicatorProps) {\n  const { state } = useProgressContext(\"Progress.Indicator\");\n  return useRender<ComponentPropsWithRef<\"span\">, ProgressState>({\n    defaultElement: \"span\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps: {\n      \"data-indeterminate\": dataAttr(state.indeterminate),\n      \"data-complete\": dataAttr(state.complete),\n    },\n  });\n}\n\nProgressIndicator.displayName = \"ProgressIndicator\";\n"],"mappings":";;;;;;;;AAqBA,SAAgB,kBAAkB,EAChC,WACA,OACA,UACA,QACA,GAAG,QACsB;CACzB,MAAM,EAAE,UAAU,mBAAmB,oBAAoB;CACzD,OAAO,UAAwD;EAC7D,gBAAgB;EAChB;EACA;EACA;EACA;EACA;EACA,OAAO;EACP,cAAc;GACZ,sBAAsB,SAAS,MAAM,aAAa;GAClD,iBAAiB,SAAS,MAAM,QAAQ;EAC1C;CACF,CAAC;AACH;AAEA,kBAAkB,cAAc"}

package/dist/progress/progress-label.d.mts

@@ -0,0 +1,19 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { ProgressState } from "./progress-root.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/progress/progress-label.d.ts
+export interface ProgressLabelProps extends Omit<ComponentPropsWithRef<"span">, "id" | "className" | "style" | "children"> {
+  className?: StateValue<string | undefined, ProgressState>;
+  style?: StateValue<CSSProperties | undefined, ProgressState>;
+  children?: StateValue<ReactNode, ProgressState>;
+  render?: RenderProp<ComponentPropsWithRef<"span">, ProgressState>;
+}
+/**
+ * `Progress.Label`: a `span` whose id the Root always references through `aria-labelledby` (the Root is not a labelable element, so a `<label for>` would associate nothing). Owned keys: `id`, `data-indeterminate`, `data-complete`.
+ */
+export declare function ProgressLabel({ className, style, children, render, ...rest }: ProgressLabelProps): ReactNode;
+export declare namespace ProgressLabel {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=progress-label.d.mts.map

package/dist/progress/progress-label.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-label.d.mts","names":[],"sources":["../../src/progress/progress-label.tsx"],"mappings":";;;;iBAQiB,2BAA2B,KAC1C;EAGA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,+BAA+B;;;;;wBAMrC,gBAAgB,WAAW,OAAO,UAAU,WAAW,QAAQ,qBAAkB;yBAAjF"}

package/dist/progress/progress-label.mjs

@@ -0,0 +1,30 @@
+"use client";
+import { dataAttr } from "../internal/data-attr.mjs";
+import { useRender } from "../internal/use-render.mjs";
+import { useProgressContext } from "./progress-context.mjs";
+//#region src/progress/progress-label.tsx
+/**
+* `Progress.Label`: a `span` whose id the Root always references through `aria-labelledby` (the Root is not a labelable element, so a `<label for>` would associate nothing). Owned keys: `id`, `data-indeterminate`, `data-complete`.
+*/
+function ProgressLabel({ className, style, children, render, ...rest }) {
+	const { id, state } = useProgressContext("Progress.Label");
+	return useRender({
+		defaultElement: "span",
+		render,
+		state,
+		className,
+		style,
+		children,
+		props: rest,
+		libraryProps: {
+			id: `${id}-label`,
+			"data-indeterminate": dataAttr(state.indeterminate),
+			"data-complete": dataAttr(state.complete)
+		}
+	});
+}
+ProgressLabel.displayName = "ProgressLabel";
+//#endregion
+export { ProgressLabel };
+
+//# sourceMappingURL=progress-label.mjs.map

package/dist/progress/progress-label.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-label.mjs","names":[],"sources":["../../src/progress/progress-label.tsx"],"sourcesContent":["\"use client\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { useProgressContext } from \"./progress-context.js\";\nimport type { ProgressState } from \"./progress-root.js\";\n\nexport interface ProgressLabelProps extends Omit<\n  ComponentPropsWithRef<\"span\">,\n  \"id\" | \"className\" | \"style\" | \"children\"\n> {\n  className?: StateValue<string | undefined, ProgressState>;\n  style?: StateValue<CSSProperties | undefined, ProgressState>;\n  children?: StateValue<ReactNode, ProgressState>;\n  render?: RenderProp<ComponentPropsWithRef<\"span\">, ProgressState>;\n}\n\n/**\n * `Progress.Label`: a `span` whose id the Root always references through `aria-labelledby` (the Root is not a labelable element, so a `<label for>` would associate nothing). Owned keys: `id`, `data-indeterminate`, `data-complete`.\n */\nexport function ProgressLabel({ className, style, children, render, ...rest }: ProgressLabelProps) {\n  const { id, state } = useProgressContext(\"Progress.Label\");\n  return useRender<ComponentPropsWithRef<\"span\">, ProgressState>({\n    defaultElement: \"span\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps: {\n      id: `${id}-label`,\n      \"data-indeterminate\": dataAttr(state.indeterminate),\n      \"data-complete\": dataAttr(state.complete),\n    },\n  });\n}\n\nProgressLabel.displayName = \"ProgressLabel\";\n"],"mappings":";;;;;;;;AAqBA,SAAgB,cAAc,EAAE,WAAW,OAAO,UAAU,QAAQ,GAAG,QAA4B;CACjG,MAAM,EAAE,IAAI,UAAU,mBAAmB,gBAAgB;CACzD,OAAO,UAAwD;EAC7D,gBAAgB;EAChB;EACA;EACA;EACA;EACA;EACA,OAAO;EACP,cAAc;GACZ,IAAI,GAAG,GAAG;GACV,sBAAsB,SAAS,MAAM,aAAa;GAClD,iBAAiB,SAAS,MAAM,QAAQ;EAC1C;CACF,CAAC;AACH;AAEA,cAAc,cAAc"}

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

@@ -0,0 +1,68 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/progress/progress-root.d.ts
+/** The state every Progress part receives. */
+export interface ProgressState {
+  /** The value clamped to `[min, max]`, or `null` while indeterminate. */
+  readonly value: number | null;
+  readonly min: number;
+  readonly max: number;
+  /** `(value - min) / (max - min) * 100`, a number 0–100; `null` while indeterminate. */
+  readonly percentage: number | null;
+  /**
+   * The `Intl.NumberFormat` text of the value (or of the fraction, for the percent style): what
+   * `Progress.Value` shows. `null` while indeterminate.
+   */
+  readonly formattedValue: string | null;
+  /** What `aria-valuetext` carries: `getAriaValueText`'s result, else `formattedValue`. */
+  readonly valueText: string | null;
+  /** `value` is `null`. */
+  readonly indeterminate: boolean;
+  /** The clamped value has reached `max`. */
+  readonly complete: boolean;
+}
+export interface ProgressRootProps extends Omit<ComponentPropsWithRef<"div">, "role" | "aria-valuemin" | "aria-valuemax" | "aria-valuenow" | "aria-valuetext" | "defaultValue" | "defaultChecked" | "className" | "style" | "children"> {
+  /** The current value. Absent or `null`: indeterminate. Clamped to `[min, max]`. */
+  value?: number | null;
+  /** @default 0 */
+  min?: number;
+  /** @default 100 */
+  max?: number;
+  /**
+   * `Intl.NumberFormat` options for `aria-valuetext` and `Progress.Value`. Default
+   * `{ style: "percent" }`. A `percent` style formats the fraction of the range; any other style
+   * formats the value. Serialisable: a Server Component may pass it.
+   */
+  format?: Intl.NumberFormatOptions;
+  /**
+   * BCP 47 tag for `Intl.NumberFormat`; default: the runtime's locale. Pass it when a client
+   * tree is server-rendered.
+   */
+  locale?: string;
+  /**
+   * The `aria-valuetext` to render instead of `formattedValue`. Called with the clamped value
+   * (`null` while indeterminate) and the state as it would be without this prop. Return `null`
+   * to render no `aria-valuetext`. A function: from a Server Component it works when this Root
+   * is rendered by that Server Component (the Root runs on the server), not when the Root is
+   * rendered by a client component.
+   */
+  getAriaValueText?: (value: number | null, state: ProgressState) => string | null | undefined;
+  className?: StateValue<string | undefined, ProgressState>;
+  style?: StateValue<CSSProperties | undefined, ProgressState>;
+  children?: StateValue<ReactNode, ProgressState>;
+  render?: RenderProp<ComponentPropsWithRef<"div">, ProgressState>;
+}
+/**
+ * `Progress.Root`: a `div[role=progressbar]` with the ARIA values, `aria-valuetext` from
+ * `Intl.NumberFormat`, `data-indeterminate` / `data-complete`, and `--progress-value` (the
+ * percentage, absent while indeterminate) in `style`, where the consumer's entries win. Owned
+ * keys: `role`, `aria-valuemin`, `aria-valuemax`, `aria-valuenow`, `aria-valuetext`,
+ * `aria-labelledby` (token-merged: the consumer's tokens, then `Progress.Label`'s id, always),
+ * `data-indeterminate`, `data-complete`.
+ */
+export declare function ProgressRoot({ value, min, max, format, locale, getAriaValueText, className, style, children, render, ref, ...rest }: ProgressRootProps): import("react").JSX.Element;
+export declare namespace ProgressRoot {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=progress-root.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"progress-root.d.mts","names":[],"sources":["../../src/progress/progress-root.tsx"],"mappings":";;;;iBAeiB;;WAEN;WACA;WACA;;WAEA;;;;;WAKA;;WAEA;;WAEA;;WAEA;;iBAGM,0BAA0B,KACzC;;EAaA;;EAEA;;EAEA;;;;;;EAMA,SAAS,KAAK;;;;;EAKd;;;;;;;;EAQA,oBAAoB,sBAAsB,OAAO;EACjD,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,8BAA8B;;;;;;;;;;wBAWpC,eACd,OACA,KACA,KACA,QACA,QACA,kBACA,WACA,OACA,UACA,QACA,QACG,QACF,oCAAiB,IAAA;yBAbJ"}

package/dist/progress/progress-root.mjs

@@ -0,0 +1,80 @@
+import { dataAttr } from "../internal/data-attr.mjs";
+import { mergeRenderRef, renderElement, resolveStateValue } from "../internal/render-element.mjs";
+import { ProgressContext } from "./progress-context.mjs";
+import { warnOnce } from "../internal/dev-warn.mjs";
+import { clamp, formatRangeValue, isDegenerate, percentage } from "../internal/range-value.mjs";
+import { useId } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/progress/progress-root.tsx
+/**
+* `Progress.Root`: a `div[role=progressbar]` with the ARIA values, `aria-valuetext` from
+* `Intl.NumberFormat`, `data-indeterminate` / `data-complete`, and `--progress-value` (the
+* percentage, absent while indeterminate) in `style`, where the consumer's entries win. Owned
+* keys: `role`, `aria-valuemin`, `aria-valuemax`, `aria-valuenow`, `aria-valuetext`,
+* `aria-labelledby` (token-merged: the consumer's tokens, then `Progress.Label`'s id, always),
+* `data-indeterminate`, `data-complete`.
+*/
+function ProgressRoot({ value = null, min = 0, max = 100, format, locale, getAriaValueText, className, style, children, render, ref, ...rest }) {
+	const id = useId();
+	let given = value;
+	if (given !== null && !Number.isFinite(given)) {
+		warnOnce(`Progress.Root:non-finite:${given}`, `Progress.Root: \`value\` is ${given}, which is not a finite number; the bar is rendered as indeterminate. Pass \`null\` for an unknown value.`);
+		given = null;
+	}
+	const degenerate = isDegenerate(min, max);
+	if (degenerate) warnOnce(`Progress.Root:degenerate:${min}:${max}`, `Progress.Root: \`max\` (${max}) must be greater than \`min\` (${min}); the percentage is rendered as 0. Pass \`value={null}\` while the total is unknown or empty.`);
+	const clamped = given === null ? null : clamp(given, min, max);
+	const formattedValue = clamped === null ? null : formatRangeValue(clamped, min, max, format, locale);
+	const base = {
+		value: clamped,
+		min,
+		max,
+		percentage: clamped === null ? null : percentage(clamped, min, max),
+		formattedValue,
+		valueText: formattedValue,
+		indeterminate: clamped === null,
+		complete: clamped !== null && !degenerate && clamped >= max
+	};
+	const valueText = getAriaValueText === void 0 ? formattedValue : getAriaValueText(clamped, base) ?? null;
+	const state = valueText === base.valueText ? base : {
+		...base,
+		valueText
+	};
+	const variables = state.percentage === null ? {} : { "--progress-value": `${state.percentage}%` };
+	const libraryProps = {
+		role: "progressbar",
+		"aria-valuemin": min,
+		"aria-valuemax": max,
+		"aria-valuenow": clamped ?? void 0,
+		"aria-valuetext": valueText ?? void 0,
+		"aria-labelledby": `${id}-label`,
+		"data-indeterminate": dataAttr(state.indeterminate),
+		"data-complete": dataAttr(state.complete)
+	};
+	const element = renderElement({
+		defaultElement: "div",
+		render,
+		state,
+		className,
+		style: (s) => ({
+			...variables,
+			...resolveStateValue(style, s)
+		}),
+		children,
+		props: rest,
+		libraryProps,
+		ref: mergeRenderRef(ref, render)
+	});
+	return /* @__PURE__ */ jsx(ProgressContext, {
+		value: {
+			id,
+			state
+		},
+		children: element
+	});
+}
+ProgressRoot.displayName = "ProgressRoot";
+//#endregion
+export { ProgressRoot };
+
+//# sourceMappingURL=progress-root.mjs.map