@igne-agency/react-web-ui 0.4.0 → 0.6.0

package/dist/components/photo-field/photo-input.js

@@ -1,8 +1,8 @@
-import { Button } from "../button/button.js";
 import { fieldStateAttributes } from "../field/field-state.js";
 import { PhotoInputContext, usePhotoInput } from "./photo-input-context.js";
 import photo_input_module_default from "./photo-input.module.js";
 import { c } from "react/compiler-runtime";
+import { useRender } from "@base-ui/react/use-render";
 import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useId, useRef, useState } from "react";
@@ -294,59 +294,121 @@ var PhotoInputWell = (t0) => {
 	} else t9 = $[12];
 	return t9;
 };
-/** The picture inside the well: the picked photo, else its children, such as a placeholder or the stored photo. */
+/**
+* The picture inside the well, holding the picked photo's `Image` and the
+* `Fallback` shown until one is picked.
+*
+* @example
+* <PhotoInput.Face>
+* 	<PhotoInput.Image alt="Preview" />
+* 	<PhotoInput.Fallback><Avatar name={user.name} /></PhotoInput.Fallback>
+* </PhotoInput.Face>
+*/
 var PhotoInputFace = (t0) => {
-	const $ = c(16);
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(photo_input_module_default.face, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx("span", {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+/**
+* The picked photo. Renders nothing until one is picked.
+*
+* @example
+* <PhotoInput.Image alt="Preview" />
+*/
+var PhotoInputImage = (t0) => {
+	const $ = c(8);
+	let alt;
+	let props;
+	if ($[0] !== t0) {
+		({alt, ...props} = t0);
+		$[0] = t0;
+		$[1] = alt;
+		$[2] = props;
+	} else {
+		alt = $[1];
+		props = $[2];
+	}
+	const { value } = usePhotoInput();
+	const previewSource = usePreviewSource(value);
+	let t1;
+	if ($[3] !== alt || $[4] !== previewSource || $[5] !== props || $[6] !== value) {
+		t1 = value === void 0 ? null : /* @__PURE__ */ jsx("img", {
+			ref: previewSource,
+			alt,
+			...props
+		});
+		$[3] = alt;
+		$[4] = previewSource;
+		$[5] = props;
+		$[6] = value;
+		$[7] = t1;
+	} else t1 = $[7];
+	return t1;
+};
+/**
+* What the face shows until a photo is picked, such as a placeholder or the
+* stored photo. Renders nothing once one is picked, or without children.
+*
+* @example
+* <PhotoInput.Fallback><Avatar name={user.name} /></PhotoInput.Fallback>
+*/
+var PhotoInputFallback = (t0) => {
+	const $ = c(9);
 	let children;
 	let className;
-	let previewLabel;
 	let props;
 	if ($[0] !== t0) {
-		({previewLabel, className, children, ...props} = t0);
+		({className, children, ...props} = t0);
 		$[0] = t0;
 		$[1] = children;
 		$[2] = className;
-		$[3] = previewLabel;
-		$[4] = props;
+		$[3] = props;
 	} else {
 		children = $[1];
 		className = $[2];
-		previewLabel = $[3];
-		props = $[4];
+		props = $[3];
 	}
 	const { value } = usePhotoInput();
-	const previewSource = usePreviewSource(value);
 	let t1;
-	if ($[5] !== className) {
-		t1 = clsx(photo_input_module_default.face, className);
-		$[5] = className;
-		$[6] = t1;
-	} else t1 = $[6];
-	let t2;
-	if ($[7] !== children || $[8] !== previewLabel || $[9] !== previewSource || $[10] !== value) {
-		t2 = value === void 0 ? children : /* @__PURE__ */ jsx("img", {
-			ref: previewSource,
-			alt: previewLabel
-		});
-		$[7] = children;
-		$[8] = previewLabel;
-		$[9] = previewSource;
-		$[10] = value;
-		$[11] = t2;
-	} else t2 = $[11];
-	let t3;
-	if ($[12] !== props || $[13] !== t1 || $[14] !== t2) {
-		t3 = /* @__PURE__ */ jsx("span", {
-			className: t1,
+	if ($[4] !== children || $[5] !== className || $[6] !== props || $[7] !== value) {
+		t1 = value !== void 0 || children === void 0 || children === null || children === false ? null : /* @__PURE__ */ jsx("span", {
+			className: clsx(photo_input_module_default.fallback, className),
 			...props,
-			children: t2
+			children
 		});
-		$[12] = props;
-		$[13] = t1;
-		$[14] = t2;
-		$[15] = t3;
-	} else t3 = $[15];
-	return t3;
+		$[4] = children;
+		$[5] = className;
+		$[6] = props;
+		$[7] = value;
+		$[8] = t1;
+	} else t1 = $[8];
+	return t1;
 };
 /** The badge on the well's rim. Its children are the icon, such as a camera; without them, or read-only, it renders nothing. */
 var PhotoInputBadge = (t0) => {
@@ -388,66 +450,82 @@ var PhotoInputBadge = (t0) => {
 	} else t2 = $[9];
 	return t2;
 };
-/** The icon-only button on the rim that removes a picked photo. It renders only while one is picked. */
+/**
+* The button on the rim that removes a picked photo. It renders whichever
+* button it is given, only while a photo is picked.
+*
+* @example
+* <PhotoInput.Remove
+* 	render={
+* 		<IconButton label="Remove photo" variant="secondary">
+* 			<CloseIcon />
+* 		</IconButton>
+* 	}
+* />
+*/
 var PhotoInputRemove = (t0) => {
-	const $ = c(17);
+	const $ = c(18);
 	let className;
-	let icon;
-	let label;
 	let onClick;
 	let props;
+	let render;
 	if ($[0] !== t0) {
-		({label, icon, className, onClick, ...props} = t0);
+		({render, className, onClick, ...props} = t0);
 		$[0] = t0;
 		$[1] = className;
-		$[2] = icon;
-		$[3] = label;
-		$[4] = onClick;
-		$[5] = props;
+		$[2] = onClick;
+		$[3] = props;
+		$[4] = render;
 	} else {
 		className = $[1];
-		icon = $[2];
-		label = $[3];
-		onClick = $[4];
-		props = $[5];
+		onClick = $[2];
+		props = $[3];
+		render = $[4];
 	}
 	const { value, readOnly, remove } = usePhotoInput();
-	if (readOnly || value === void 0) return null;
-	let t1;
-	if ($[6] !== className) {
-		t1 = clsx(photo_input_module_default.remove, className);
-		$[6] = className;
-		$[7] = t1;
-	} else t1 = $[7];
+	const t1 = !readOnly && value !== void 0;
 	let t2;
-	if ($[8] !== onClick || $[9] !== remove) {
-		t2 = (event) => {
+	if ($[5] !== className) {
+		t2 = clsx(photo_input_module_default.remove, className);
+		$[5] = className;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== onClick || $[8] !== remove) {
+		t3 = (event) => {
 			onClick?.(event);
 			remove();
 		};
-		$[8] = onClick;
-		$[9] = remove;
-		$[10] = t2;
-	} else t2 = $[10];
-	let t3;
-	if ($[11] !== icon || $[12] !== label || $[13] !== props || $[14] !== t1 || $[15] !== t2) {
-		t3 = /* @__PURE__ */ jsx(Button, {
-			iconOnly: true,
-			icon,
-			label,
-			variant: "secondary",
-			className: t1,
-			onClick: t2,
-			...props
-		});
-		$[11] = icon;
-		$[12] = label;
-		$[13] = props;
-		$[14] = t1;
-		$[15] = t2;
-		$[16] = t3;
-	} else t3 = $[16];
-	return t3;
+		$[7] = onClick;
+		$[8] = remove;
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== props || $[11] !== t2 || $[12] !== t3) {
+		t4 = {
+			type: "button",
+			...props,
+			className: t2,
+			onClick: t3
+		};
+		$[10] = props;
+		$[11] = t2;
+		$[12] = t3;
+		$[13] = t4;
+	} else t4 = $[13];
+	let t5;
+	if ($[14] !== render || $[15] !== t1 || $[16] !== t4) {
+		t5 = {
+			render,
+			enabled: t1,
+			props: t4
+		};
+		$[14] = render;
+		$[15] = t1;
+		$[16] = t4;
+		$[17] = t5;
+	} else t5 = $[17];
+	return useRender(t5);
 };
 /** The hidden text that describes the well, saying whether a photo is set. */
 var PhotoInputValueText = (t0) => {
@@ -502,12 +580,19 @@ var PhotoInputValueText = (t0) => {
 * @example
 * <PhotoInput.Root labelledBy={labelId} value={file} onValueChange={setFile}>
 * 	<PhotoInput.Well>
-* 		<PhotoInput.Face previewLabel="Preview">
-* 			<Avatar name={user.name} />
+* 		<PhotoInput.Face>
+* 			<PhotoInput.Image alt="Preview" />
+* 			<PhotoInput.Fallback><Avatar name={user.name} /></PhotoInput.Fallback>
 * 		</PhotoInput.Face>
 * 		<PhotoInput.Badge><PhotoCameraIcon /></PhotoInput.Badge>
 * 	</PhotoInput.Well>
-* 	<PhotoInput.Remove label="Remove photo" icon={<CloseIcon />} />
+* 	<PhotoInput.Remove
+* 		render={
+* 			<IconButton label="Remove photo" variant="secondary">
+* 				<CloseIcon />
+* 			</IconButton>
+* 		}
+* 	/>
 * 	<PhotoInput.ValueText photoSetLabel="Photo set" noPhotoLabel="No photo" />
 * </PhotoInput.Root>
 */
@@ -515,6 +600,8 @@ var PhotoInput = {
 	Root: PhotoInputRoot,
 	Well: PhotoInputWell,
 	Face: PhotoInputFace,
+	Image: PhotoInputImage,
+	Fallback: PhotoInputFallback,
 	Badge: PhotoInputBadge,
 	Remove: PhotoInputRemove,
 	ValueText: PhotoInputValueText

package/dist/components/photo-field/photo-input.module.js

@@ -1,18 +1,20 @@
 import './photo-input.css';// src/components/photo-field/photo-input.module.scss
-var photoInput = "_photoInput_1q2zc_3";
-var well = "_well_1q2zc_7";
-var face = "_face_1q2zc_62";
-var badge = "_badge_1q2zc_84";
-var remove = "_remove_1q2zc_98";
-var picker = "_picker_1q2zc_104";
-var valueText = "_valueText_1q2zc_105";
+var photoInput = "_photoInput_1l3vc_3";
+var well = "_well_1l3vc_7";
+var face = "_face_1l3vc_82";
+var fallback = "_fallback_1l3vc_104";
+var badge = "_badge_1l3vc_107";
+var remove = "_remove_1l3vc_121";
+var picker = "_picker_1l3vc_127";
+var valueText = "_valueText_1l3vc_128";
 var photo_input_module_default = {
 	photoInput,
 	well,
 	face,
+	fallback,
 	badge,
 	remove,
 	picker,
 	valueText
 };
-export { badge, photo_input_module_default as default, face, photoInput, picker, remove, valueText, well };
+export { badge, photo_input_module_default as default, face, fallback, photoInput, picker, remove, valueText, well };

package/dist/components/popover/popover.css

@@ -1,6 +1,6 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._positioner_ixh47_3 {
+  ._positioner_1yoda_3 {
     --_popup-edge-padding: var(
     	--popup-edge-padding,
     	var(--sys-unit-16)
@@ -11,11 +11,11 @@
     inherits: false;
     initial-value: 0px;
   }
-  ._positioner_ixh47_3 {
+  ._positioner_1yoda_3 {
     outline: none;
-    filter: var(--sys-elevation-1-filter);
+    filter: var(--popover-filter, var(--sys-elevation-1-filter));
   }
-  ._visuallyHidden_ixh47_18 {
+  ._visuallyHidden_1yoda_18 {
     position: absolute;
     overflow: hidden;
     clip-path: inset(50%);
@@ -23,98 +23,98 @@
     block-size: 1px;
     white-space: nowrap;
   }
-  ._popup_ixh47_26 {
+  ._popup_1yoda_26 {
     box-sizing: border-box;
     min-inline-size: min(var(--popover-min-inline-size, 22rem), var(--available-width));
-    max-inline-size: min(28rem, var(--available-width));
+    max-inline-size: min(var(--popover-max-inline-size, 28rem), var(--available-width));
     border: none;
     border-radius: var(--popover-radius, var(--sys-radius-lg));
     background: var(--popover-surface, var(--sys-color-surface-overlay));
     padding: var(--popover-padding, var(--sys-unit-16));
-    color: var(--sys-color-text);
-    font: var(--sys-font-body-medium);
+    color: var(--popover-fg, var(--sys-color-text));
+    font: var(--popover-font, var(--sys-font-body-medium));
     transform-origin: var(--transform-origin);
   }
   @media not (prefers-reduced-motion) {
-    ._popup_ixh47_26 {
+    ._popup_1yoda_26 {
       transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), transform var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._popup_ixh47_26[data-starting-style], ._popup_ixh47_26[data-ending-style] {
+  ._popup_1yoda_26[data-starting-style], ._popup_1yoda_26[data-ending-style] {
     opacity: 0;
     transform: scale(0.96);
   }
-  ._arrow_ixh47_47 {
+  ._arrow_1yoda_47 {
     display: flex;
   }
-  ._arrow_ixh47_47[data-side=top] {
+  ._arrow_1yoda_47[data-side=top] {
     bottom: -8px;
     transform: rotate(180deg);
   }
-  ._arrow_ixh47_47[data-side=bottom] {
+  ._arrow_1yoda_47[data-side=bottom] {
     top: -8px;
   }
-  ._arrow_ixh47_47[data-side=left] {
+  ._arrow_1yoda_47[data-side=left] {
     right: -12px;
     transform: rotate(90deg);
   }
-  ._arrow_ixh47_47[data-side=right] {
+  ._arrow_1yoda_47[data-side=right] {
     left: -12px;
     transform: rotate(-90deg);
   }
-  ._arrowFill_ixh47_65 {
+  ._arrowFill_1yoda_65 {
     fill: var(--popover-surface, var(--sys-color-surface-overlay));
   }
-  ._title_ixh47_68 {
-    margin-block-end: var(--sys-unit-8);
-    color: var(--sys-color-text);
-    font: var(--sys-font-label-large);
+  ._title_1yoda_68 {
+    margin-block-end: var(--popover-title-space, var(--sys-unit-8));
+    color: var(--popover-title-fg, var(--popover-fg, var(--sys-color-text)));
+    font: var(--popover-title-font, var(--sys-font-label-large));
   }
-  ._rows_ixh47_73,
-  ._row_ixh47_73 {
+  ._rows_1yoda_73,
+  ._row_1yoda_73 {
     display: grid;
     grid-template-columns: max-content minmax(0, 1fr);
     align-items: baseline;
-    gap: var(--sys-unit-3);
+    gap: var(--popover-rows-gap, var(--sys-unit-3));
   }
-  ._row_ixh47_73 {
-    padding-block: var(--sys-unit-2);
+  ._row_1yoda_73 {
+    padding-block: var(--popover-row-pad-y, var(--sys-unit-2));
   }
-  ._rows_ixh47_73 ._row_ixh47_73 {
+  ._rows_1yoda_73 ._row_1yoda_73 {
     display: contents;
   }
-  ._rows_ixh47_73 ._rowLabel_ixh47_86,
-  ._rows_ixh47_73 ._rowValue_ixh47_87 {
-    padding-block: var(--sys-unit-2);
+  ._rows_1yoda_73 ._rowLabel_1yoda_86,
+  ._rows_1yoda_73 ._rowValue_1yoda_87 {
+    padding-block: var(--popover-row-pad-y, var(--sys-unit-2));
   }
-  ._rowLabel_ixh47_86 {
-    color: var(--sys-color-text-muted);
-    font: var(--sys-font-body-medium);
+  ._rowLabel_1yoda_86 {
+    color: var(--popover-row-label-fg, var(--sys-color-text-muted));
+    font: var(--popover-row-label-font, var(--popover-font, var(--sys-font-body-medium)));
   }
-  ._rowValue_ixh47_87 {
-    color: var(--sys-color-text);
-    font: var(--sys-font-body-medium);
+  ._rowValue_1yoda_87 {
+    color: var(--popover-row-value-fg, var(--popover-fg, var(--sys-color-text)));
+    font: var(--popover-row-value-font, var(--popover-font, var(--sys-font-body-medium)));
   }
-  ._rowValue_ixh47_87[data-numeric] {
+  ._rowValue_1yoda_87[data-numeric] {
     font-variant-numeric: tabular-nums;
   }
-  ._skeletonText_ixh47_101 {
+  ._skeletonText_1yoda_101 {
     position: relative;
     display: inline-block;
   }
-  ._skeletonTextContent_ixh47_105 {
+  ._skeletonTextContent_1yoda_105 {
     visibility: hidden;
   }
-  ._skeletonTextOverlay_ixh47_108 {
+  ._skeletonTextOverlay_1yoda_108 {
     position: absolute;
     inset-block-start: 50%;
     inset-inline: 0;
     transform: translateY(-50%);
   }
-  ._titleSkeleton_ixh47_114 {
+  ._title_1yoda_68 ._skeletonText_1yoda_101 {
     min-inline-size: 12ch;
   }
-  ._valueSkeleton_ixh47_117 {
+  ._rowValue_1yoda_87 ._skeletonText_1yoda_101 {
     min-inline-size: 8ch;
   }
 }

package/dist/components/popover/popover.d.ts

@@ -1,5 +1,6 @@
 import { Popover as BasePopover } from "@base-ui/react/popover";
-import { type ComponentProps, type ReactNode } from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { type ComponentProps, type ReactElement, type ReactNode } from "react";
 export type PopoverRootProps<Payload = unknown> = Omit<BasePopover.Root.Props<Payload>, "open" | "defaultOpen" | "onOpenChange" | "modal" | "children"> & Readonly<{
     /** Whether the popover is open. Leave it out for a popover that keeps its own state. */
     open?: boolean;
@@ -23,24 +24,47 @@ declare const Trigger: ({ onIntent, onPointerEnter, onPointerLeave, onFocus, ...
 export type PopoverPositionerProps = Omit<ComponentProps<typeof BasePopover.Positioner>, "ref">;
 /** Places the popup against its trigger, clear of the viewport's edges. */
 declare const Positioner: ({ sideOffset, className, ...props }: PopoverPositionerProps) => ReactNode;
-export type PopoverPopupProps = ComponentProps<typeof BasePopover.Popup> & (Readonly<{
-    /** Whether the content the popup describes is still in flight. */
-    loading: boolean;
-    /** Announced once while loading, in place of the placeholders. */
-    loadingLabel: string;
-}> | Readonly<{
-    loading?: undefined;
-    loadingLabel?: undefined;
-}>);
+export type PopoverPopupProps = ComponentProps<typeof BasePopover.Popup> & Readonly<{
+    /** Whether the content the popup describes is still in flight, for its `Status` and `Skeleton`s. */
+    loading?: boolean;
+}>;
+/**
+ * The popover's surface. While `loading`, its `Status` speaks and its
+ * `Skeleton`s draw as placeholders.
+ *
+ * @example
+ * <Popover.Popup loading={rate.isPending}>…</Popover.Popup>
+ */
+declare const Popup: ({ loading, className, ...props }: PopoverPopupProps) => ReactNode;
+export type PopoverStatusProps = useRender.ComponentProps<"span">;
+/**
+ * A hidden live region that announces its children once while the popup is
+ * loading, such as "Loading the rate".
+ *
+ * @example
+ * <Popover.Status>Loading the rate</Popover.Status>
+ */
+declare const Status: ({ render, className, ref, children, ...props }: PopoverStatusProps) => ReactElement;
+export type PopoverSkeletonProps = useRender.ComponentProps<"span">;
 /**
- * The popover's surface. While `loading`, its title and values draw as
- * placeholders and `loadingLabel` is announced once.
+ * Text inside a `Title` or a `RowValue` that draws as a placeholder of its
+ * width while the popup is loading, and stays readable to assistive tech.
+ * Otherwise it renders its children as they are.
+ *
+ * @example
+ * <Popover.RowValue numeric><Popover.Skeleton>{rate.data?.base}</Popover.Skeleton></Popover.RowValue>
+ */
+declare const PopoverSkeleton: ({ render, className, ref, children, ...props }: PopoverSkeletonProps) => ReactNode;
+/**
+ * The arrow pointing from the popup at its trigger: the kit's own shape, or the
+ * children given in its place.
+ *
+ * @example
+ * <Popover.Arrow />
  */
-declare const Popup: ({ loading, loadingLabel, className, children, ...props }: PopoverPopupProps) => ReactNode;
-/** The arrow pointing from the popup at its trigger. */
-declare const Arrow: ({ className, ...props }: ComponentProps<typeof BasePopover.Arrow>) => ReactNode;
+declare const Arrow: ({ className, children, ...props }: ComponentProps<typeof BasePopover.Arrow>) => ReactNode;
 /** The popover's heading, which names it. */
-declare const Title: ({ className, children, ...props }: ComponentProps<typeof BasePopover.Title>) => ReactNode;
+declare const Title: ({ className, ...props }: ComponentProps<typeof BasePopover.Title>) => ReactNode;
 /** A table of `Row`s whose labels and values line up in two columns. */
 declare const Rows: ({ className, ...props }: ComponentProps<"div">) => ReactNode;
 export type PopoverRowProps = ComponentProps<"div">;
@@ -53,14 +77,26 @@ export type PopoverRowValueProps = ComponentProps<"span"> & Readonly<{
     /** Uses tabular figures for evenly spaced numbers. */
     numeric?: boolean;
 }>;
-/** The row's value, beside its label; a placeholder while the popup is loading. */
-declare const RowValue: ({ numeric, className, children, ...props }: PopoverRowValueProps) => ReactNode;
-export type PopoverContentProps = PopoverPopupProps & Readonly<Pick<PopoverPositionerProps, "side" | "sideOffset" | "align" | "alignOffset"> & {
+/** The row's value, beside its label. */
+declare const RowValue: ({ numeric, className, ...props }: PopoverRowValueProps) => ReactNode;
+export type PopoverContentProps = Omit<PopoverPopupProps, "loading"> & Readonly<Pick<PopoverPositionerProps, "side" | "sideOffset" | "align" | "alignOffset"> & {
     /** The element the popover is portalled into. @default document.body */
     container?: BasePopover.Portal.Props["container"];
-}>;
-/** `Portal`, `Positioner` and `Popup` in one: the popover's surface, placed against its trigger. */
-declare const Content: ({ container, side, sideOffset, align, alignOffset, ...props }: PopoverContentProps) => ReactNode;
+}> & (Readonly<{
+    /** Whether the content the popup describes is still in flight, for its `Skeleton`s. */
+    loading: boolean;
+    /** Announced once while loading, through a `Status`. */
+    loadingLabel: string;
+}> | Readonly<{
+    loading?: undefined;
+    loadingLabel?: undefined;
+}>);
+/**
+ * `Portal`, `Positioner` and `Popup` in one: the popover's surface, placed
+ * against its trigger. With a `loadingLabel` it holds the `Status` that
+ * announces it.
+ */
+declare const Content: ({ container, side, sideOffset, align, alignOffset, loadingLabel, children, ...props }: PopoverContentProps) => ReactNode;
 type PopoverParts = Readonly<{
     Root: typeof Root;
     Trigger: typeof Trigger;
@@ -68,6 +104,8 @@ type PopoverParts = Readonly<{
     Positioner: typeof Positioner;
     Popup: typeof Popup;
     Content: typeof Content;
+    Status: typeof Status;
+    Skeleton: typeof PopoverSkeleton;
     Arrow: typeof Arrow;
     Title: typeof Title;
     Rows: typeof Rows;
@@ -80,8 +118,9 @@ type PopoverParts = Readonly<{
 }>;
 /**
  * A rich popover over base-ui's `Popover`, with a `Title` and rows of labelled
- * values. `Content` bundles the portal, positioner and popup; the unbundled
- * parts stay.
+ * values. `Content` bundles the portal, positioner and popup, and the `Status`
+ * for a `loadingLabel`; the unbundled parts stay. While loading, text wrapped in
+ * a `Skeleton` draws as a placeholder.
  *
  * @example
  * <Popover.Root>
@@ -94,7 +133,9 @@ type PopoverParts = Readonly<{
  *     <Popover.Rows>
  *       <Popover.Row>
  *         <Popover.RowLabel>Base</Popover.RowLabel>
- *         <Popover.RowValue numeric>{rate.data?.base}</Popover.RowValue>
+ *         <Popover.RowValue numeric>
+ *           <Popover.Skeleton>{rate.data?.base}</Popover.Skeleton>
+ *         </Popover.RowValue>
  *       </Popover.Row>
  *     </Popover.Rows>
  *   </Popover.Content>