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

package/dist/components/confirm-dialog/confirm-dialog.css

@@ -1,68 +1,68 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._backdrop_19j93_3 {
-    --overlay-dim: 0.4;
+  ._backdrop_19hfo_3 {
+    --_overlay-dim: 0.4;
     --overlay-opacity: 1;
     position: fixed;
     inset: 0;
-    background-color: rgb(0, 0, 0, var(--overlay-dim));
-    backdrop-filter: blur(1px);
+    background-color: var(--overlay-bg, rgb(0, 0, 0, var(--overlay-dim, var(--_overlay-dim))));
+    backdrop-filter: var(--overlay-backdrop-filter, blur(1px));
     opacity: var(--overlay-opacity);
   }
   @media not (prefers-reduced-motion) {
-    ._backdrop_19j93_3 {
+    ._backdrop_19hfo_3 {
       transition: opacity var(--sys-motion-short) var(--sys-motion-standard);
     }
   }
-  html[data-theme="dark"] ._backdrop_19j93_3 {
-    --overlay-dim: 0.6;
+  html[data-theme="dark"] ._backdrop_19hfo_3 {
+    --_overlay-dim: 0.6;
   }
   @media (prefers-color-scheme: dark) {
-    html:not([data-theme="light"]) ._backdrop_19j93_3 {
-      --overlay-dim: 0.6;
+    html:not([data-theme="light"]) ._backdrop_19hfo_3 {
+      --_overlay-dim: 0.6;
     }
   }
-  ._backdrop_19j93_3[data-starting-style], ._backdrop_19j93_3[data-ending-style] {
+  ._backdrop_19hfo_3[data-starting-style], ._backdrop_19hfo_3[data-ending-style] {
     opacity: 0;
   }
-  ._popup_19j93_28 {
+  ._popup_19hfo_28 {
     position: fixed;
     top: 50%;
     left: 50%;
     box-sizing: border-box;
-    inline-size: min(32rem, 100dvw - var(--sys-unit-16));
+    inline-size: min(var(--dialog-inline-size, 32rem), var(--dialog-max-inline-size, calc(100dvw - var(--sys-unit-16))));
     border: none;
-    border-radius: var(--sys-radius-xl);
-    background: var(--sys-color-surface-overlay);
-    color: var(--sys-color-text);
+    border-radius: var(--dialog-radius, var(--sys-radius-xl));
+    background: var(--dialog-bg, var(--sys-color-surface-overlay));
+    color: var(--dialog-fg, var(--sys-color-text));
     transform: translate(-50%, -50%);
   }
   @media not (prefers-reduced-motion) {
-    ._popup_19j93_28 {
+    ._popup_19hfo_28 {
       transition: opacity var(--sys-motion-short) var(--sys-motion-standard), transform var(--sys-motion-short) var(--sys-motion-emphasized);
     }
   }
-  ._popup_19j93_28[data-starting-style], ._popup_19j93_28[data-ending-style] {
+  ._popup_19hfo_28[data-starting-style], ._popup_19hfo_28[data-ending-style] {
     opacity: 0;
     transform: translate(-50%, -48%) scale(0.96);
   }
-  ._popup_19j93_28 {
-    padding: var(--sys-unit-20);
+  ._popup_19hfo_28 {
+    padding: var(--confirm-dialog-pad, var(--sys-unit-20));
   }
-  ._title_19j93_52 {
-    color: var(--sys-color-text);
-    font: var(--sys-font-heading-small);
-    margin-block-end: var(--sys-unit-8);
+  ._title_19hfo_52 {
+    color: var(--dialog-title-fg, var(--dialog-fg, var(--sys-color-text)));
+    font: var(--dialog-title-font, var(--sys-font-heading-small));
+    margin-block-end: var(--dialog-title-space, var(--sys-unit-8));
   }
-  ._description_19j93_57 {
-    color: var(--sys-color-text-muted);
-    font: var(--sys-font-body-medium);
+  ._description_19hfo_57 {
+    color: var(--dialog-description-fg, var(--sys-color-text-muted));
+    font: var(--dialog-description-font, var(--sys-font-body-medium));
   }
-  ._actions_19j93_61 {
+  ._actions_19hfo_61 {
     display: flex;
     flex-wrap: wrap;
     justify-content: end;
-    gap: var(--sys-unit-8);
-    margin-block-start: var(--sys-unit-20);
+    gap: var(--dialog-actions-gap, var(--sys-unit-8));
+    margin-block-start: var(--dialog-actions-space, var(--sys-unit-20));
   }
 }

package/dist/components/confirm-dialog/confirm-dialog.d.ts

@@ -1,6 +1,7 @@
 import { AlertDialog } from "@base-ui/react/alert-dialog";
 import { type ComponentProps, type ReactNode } from "react";
 import { type ButtonTone } from "../button/button.tsx";
+import { type SpinnerProps } from "../spinner/spinner.tsx";
 /** What a confirm runs: a promise keeps the dialog open and busy until it settles. */
 export type ConfirmAction = () => void | Promise<unknown>;
 export type ConfirmDialogRootProps = Readonly<{
@@ -10,8 +11,43 @@ export type ConfirmDialogRootProps = Readonly<{
     onOpenChange: (open: boolean) => void;
     children: ReactNode;
 }>;
-/** The controlled alert dialog: its portal, backdrop and surface. */
+/**
+ * Holds the controlled alert dialog's open state and its confirm for the parts
+ * inside it. It renders no element of its own.
+ *
+ * @example
+ * <ConfirmDialog.Root open={open} onOpenChange={setOpen}>
+ * 	<ConfirmDialog.Content>…</ConfirmDialog.Content>
+ * </ConfirmDialog.Root>
+ */
 declare const ConfirmDialogRoot: ({ open, onOpenChange, children, }: ConfirmDialogRootProps) => ReactNode;
+/**
+ * The dimmed layer behind the dialog.
+ *
+ * @example
+ * <ConfirmDialog.Backdrop />
+ */
+declare const ConfirmDialogBackdrop: ({ className, ...props }: AlertDialog.Backdrop.Props) => ReactNode;
+/**
+ * The dialog's surface, marked busy while a confirm is pending.
+ *
+ * @example
+ * <ConfirmDialog.Popup>…</ConfirmDialog.Popup>
+ */
+declare const ConfirmDialogPopup: ({ className, ...props }: AlertDialog.Popup.Props) => ReactNode;
+export type ConfirmDialogContentProps = AlertDialog.Popup.Props & Readonly<{
+    /** The element the dialog is portalled into. @default document.body */
+    container?: AlertDialog.Portal.Props["container"];
+}>;
+/**
+ * `Portal`, `Backdrop` and `Popup` in one: the dialog's surface, above the page.
+ *
+ * @example
+ * <ConfirmDialog.Content>
+ * 	<ConfirmDialog.Title>Delete this invoice?</ConfirmDialog.Title>
+ * </ConfirmDialog.Content>
+ */
+declare const ConfirmDialogContent: ({ container, ...props }: ConfirmDialogContentProps) => ReactNode;
 /** The question the dialog asks. */
 declare const ConfirmDialogTitle: ({ className, ...props }: AlertDialog.Title.Props) => ReactNode;
 /** What confirming does; renders nothing without children. */
@@ -34,8 +70,20 @@ export type ConfirmDialogConfirmProps = Readonly<{
     tone?: ButtonTone;
     children: ReactNode;
 }>;
-/** Acts, then closes once the action has settled. */
+/** Acts, then closes once the action has settled. Put a `Spinner` in it to show the wait. */
 declare const ConfirmDialogConfirm: ({ onConfirm, tone, children, }: ConfirmDialogConfirmProps) => ReactNode;
+export type ConfirmDialogSpinnerProps = Omit<SpinnerProps, "size"> & Readonly<{
+    /** Size relative to the current font size (in `em`). @default 1 */
+    size?: number;
+}>;
+/**
+ * The spinner a pending confirm shows once it has run long enough to notice.
+ * Renders nothing otherwise.
+ *
+ * @example
+ * <ConfirmDialog.Confirm onConfirm={send}><ConfirmDialog.Spinner />Send</ConfirmDialog.Confirm>
+ */
+declare const ConfirmDialogSpinner: ({ size, ...props }: ConfirmDialogSpinnerProps) => ReactNode;
 export type ConfirmDialogProps = Omit<ConfirmDialogRootProps, "children"> & Omit<ConfirmDialogConfirmProps, "children"> & Readonly<{
     /** Heading text. */
     title: ReactNode;
@@ -49,16 +97,22 @@ export type ConfirmDialogProps = Omit<ConfirmDialogRootProps, "children"> & Omit
 declare const ConfirmDialogShorthand: ({ open, onOpenChange, title, description, confirmLabel, cancelLabel, onConfirm, tone, }: ConfirmDialogProps) => ReactNode;
 type ConfirmDialogParts = typeof ConfirmDialogShorthand & Readonly<{
     Root: typeof ConfirmDialogRoot;
+    Portal: typeof AlertDialog.Portal;
+    Backdrop: typeof ConfirmDialogBackdrop;
+    Popup: typeof ConfirmDialogPopup;
+    Content: typeof ConfirmDialogContent;
     Title: typeof ConfirmDialogTitle;
     Description: typeof ConfirmDialogDescription;
     Footer: typeof ConfirmDialogFooter;
     Cancel: typeof ConfirmDialogCancel;
     Confirm: typeof ConfirmDialogConfirm;
+    Spinner: typeof ConfirmDialogSpinner;
 }>;
 /**
  * A controlled confirmation over base-ui's `AlertDialog`. A promise from
  * `onConfirm` keeps it busy until it settles, closing on resolve and staying open
- * on reject; the parts hanging off it build one by hand.
+ * on reject; the parts hanging off it build one by hand, with `Content`
+ * bundling the portal, backdrop and popup.
  *
  * @example
  * <ConfirmDialog

package/dist/components/confirm-dialog/confirm-dialog.js

@@ -72,9 +72,17 @@ var useConfirmAttempt = (close) => {
 	} else t3 = $[8];
 	return t3;
 };
-/** The controlled alert dialog: its portal, backdrop and surface. */
+/**
+* Holds the controlled alert dialog's open state and its confirm for the parts
+* inside it. It renders no element of its own.
+*
+* @example
+* <ConfirmDialog.Root open={open} onOpenChange={setOpen}>
+* 	<ConfirmDialog.Content>…</ConfirmDialog.Content>
+* </ConfirmDialog.Root>
+*/
 var ConfirmDialogRoot = (t0) => {
-	const $ = c(19);
+	const $ = c(15);
 	const { open, onOpenChange, children } = t0;
 	let t1;
 	if ($[0] !== onOpenChange) {
@@ -84,11 +92,11 @@ var ConfirmDialogRoot = (t0) => {
 	} else t1 = $[1];
 	const attempt = useConfirmAttempt(t1);
 	let t2;
-	if ($[2] !== attempt.pending || $[3] !== onOpenChange) {
+	if ($[2] !== attempt || $[3] !== onOpenChange) {
 		t2 = (next) => {
 			if (!attempt.pending) onOpenChange(next);
 		};
-		$[2] = attempt.pending;
+		$[2] = attempt;
 		$[3] = onOpenChange;
 		$[4] = t2;
 	} else t2 = $[4];
@@ -101,47 +109,152 @@ var ConfirmDialogRoot = (t0) => {
 		$[6] = t3;
 	} else t3 = $[6];
 	let t4;
-	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = /* @__PURE__ */ jsx(AlertDialog.Backdrop, { className: confirm_dialog_module_default.backdrop });
-		$[7] = t4;
-	} else t4 = $[7];
-	const t5 = attempt.pending || void 0;
-	let t6;
-	if ($[8] !== attempt || $[9] !== children) {
-		t6 = /* @__PURE__ */ jsx(ConfirmContext, {
+	if ($[7] !== attempt || $[8] !== children) {
+		t4 = /* @__PURE__ */ jsx(ConfirmContext, {
 			value: attempt,
 			children
 		});
-		$[8] = attempt;
-		$[9] = children;
-		$[10] = t6;
-	} else t6 = $[10];
-	let t7;
-	if ($[11] !== t5 || $[12] !== t6) {
-		t7 = /* @__PURE__ */ jsxs(AlertDialog.Portal, { children: [t4, /* @__PURE__ */ jsx(AlertDialog.Popup, {
-			className: confirm_dialog_module_default.popup,
-			"aria-busy": t5,
-			children: t6
-		})] });
-		$[11] = t5;
-		$[12] = t6;
-		$[13] = t7;
-	} else t7 = $[13];
-	let t8;
-	if ($[14] !== open || $[15] !== t2 || $[16] !== t3 || $[17] !== t7) {
-		t8 = /* @__PURE__ */ jsx(AlertDialog.Root, {
+		$[7] = attempt;
+		$[8] = children;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== open || $[11] !== t2 || $[12] !== t3 || $[13] !== t4) {
+		t5 = /* @__PURE__ */ jsx(AlertDialog.Root, {
 			open,
 			onOpenChange: t2,
 			onOpenChangeComplete: t3,
-			children: t7
+			children: t4
 		});
-		$[14] = open;
-		$[15] = t2;
-		$[16] = t3;
-		$[17] = t7;
-		$[18] = t8;
-	} else t8 = $[18];
-	return t8;
+		$[10] = open;
+		$[11] = t2;
+		$[12] = t3;
+		$[13] = t4;
+		$[14] = t5;
+	} else t5 = $[14];
+	return t5;
+};
+/**
+* The dimmed layer behind the dialog.
+*
+* @example
+* <ConfirmDialog.Backdrop />
+*/
+var ConfirmDialogBackdrop = (t0) => {
+	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(confirm_dialog_module_default.backdrop, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(AlertDialog.Backdrop, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+/**
+* The dialog's surface, marked busy while a confirm is pending.
+*
+* @example
+* <ConfirmDialog.Popup>…</ConfirmDialog.Popup>
+*/
+var ConfirmDialogPopup = (t0) => {
+	const $ = c(9);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	const { pending } = useContext(ConfirmContext);
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(confirm_dialog_module_default.popup, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	const t2 = pending || void 0;
+	let t3;
+	if ($[5] !== props || $[6] !== t1 || $[7] !== t2) {
+		t3 = /* @__PURE__ */ jsx(AlertDialog.Popup, {
+			className: t1,
+			"aria-busy": t2,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	return t3;
+};
+/**
+* `Portal`, `Backdrop` and `Popup` in one: the dialog's surface, above the page.
+*
+* @example
+* <ConfirmDialog.Content>
+* 	<ConfirmDialog.Title>Delete this invoice?</ConfirmDialog.Title>
+* </ConfirmDialog.Content>
+*/
+var ConfirmDialogContent = (t0) => {
+	const $ = c(9);
+	let container;
+	let props;
+	if ($[0] !== t0) {
+		({container, ...props} = t0);
+		$[0] = t0;
+		$[1] = container;
+		$[2] = props;
+	} else {
+		container = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(ConfirmDialogBackdrop, {});
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== props) {
+		t2 = /* @__PURE__ */ jsx(ConfirmDialogPopup, { ...props });
+		$[4] = props;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== container || $[7] !== t2) {
+		t3 = /* @__PURE__ */ jsxs(AlertDialog.Portal, {
+			container,
+			children: [t1, t2]
+		});
+		$[6] = container;
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	return t3;
 };
 /** The question the dialog asks. */
 var ConfirmDialogTitle = (t0) => {
@@ -264,56 +377,84 @@ var ConfirmDialogCancel = (t0) => {
 	} else t2 = $[4];
 	return t2;
 };
-/** Acts, then closes once the action has settled. */
+/** Acts, then closes once the action has settled. Put a `Spinner` in it to show the wait. */
 var ConfirmDialogConfirm = (t0) => {
-	const $ = c(14);
+	const $ = c(9);
 	const { onConfirm, tone: t1, children } = t0;
 	const tone = t1 === void 0 ? "brand" : t1;
 	const { pending, confirm } = useContext(ConfirmContext);
-	let t2;
-	if ($[0] !== pending) {
-		t2 = { busy: pending };
-		$[0] = pending;
-		$[1] = t2;
-	} else t2 = $[1];
-	const phase = useBusyPhase(t2);
+	const t2 = pending || void 0;
 	const t3 = pending || void 0;
-	const t4 = pending || void 0;
+	let t4;
+	if ($[0] !== confirm || $[1] !== onConfirm) {
+		t4 = () => confirm(onConfirm);
+		$[0] = confirm;
+		$[1] = onConfirm;
+		$[2] = t4;
+	} else t4 = $[2];
 	let t5;
-	if ($[2] !== confirm || $[3] !== onConfirm) {
-		t5 = () => confirm(onConfirm);
-		$[2] = confirm;
-		$[3] = onConfirm;
-		$[4] = t5;
-	} else t5 = $[4];
-	let t6;
-	if ($[5] !== phase) {
-		t6 = phase === "fresh" ? null : /* @__PURE__ */ jsx(Spinner, { size: 1 });
-		$[5] = phase;
-		$[6] = t6;
-	} else t6 = $[6];
-	let t7;
-	if ($[7] !== children || $[8] !== t3 || $[9] !== t4 || $[10] !== t5 || $[11] !== t6 || $[12] !== tone) {
-		t7 = /* @__PURE__ */ jsxs(Button, {
+	if ($[3] !== children || $[4] !== t2 || $[5] !== t3 || $[6] !== t4 || $[7] !== tone) {
+		t5 = /* @__PURE__ */ jsx(Button, {
 			variant: "primary",
 			tone,
-			"aria-busy": t3,
-			"aria-disabled": t4,
-			onClick: t5,
-			children: [t6, children]
+			"aria-busy": t2,
+			"aria-disabled": t3,
+			onClick: t4,
+			children
 		});
-		$[7] = children;
+		$[3] = children;
+		$[4] = t2;
+		$[5] = t3;
+		$[6] = t4;
+		$[7] = tone;
+		$[8] = t5;
+	} else t5 = $[8];
+	return t5;
+};
+/**
+* The spinner a pending confirm shows once it has run long enough to notice.
+* Renders nothing otherwise.
+*
+* @example
+* <ConfirmDialog.Confirm onConfirm={send}><ConfirmDialog.Spinner />Send</ConfirmDialog.Confirm>
+*/
+var ConfirmDialogSpinner = (t0) => {
+	const $ = c(9);
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({size: t1, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = t1;
+	} else {
+		props = $[1];
+		t1 = $[2];
+	}
+	const size = t1 === void 0 ? 1 : t1;
+	const { pending } = useContext(ConfirmContext);
+	let t2;
+	if ($[3] !== pending) {
+		t2 = { busy: pending };
+		$[3] = pending;
+		$[4] = t2;
+	} else t2 = $[4];
+	const phase = useBusyPhase(t2);
+	let t3;
+	if ($[5] !== phase || $[6] !== props || $[7] !== size) {
+		t3 = phase === "fresh" ? null : /* @__PURE__ */ jsx(Spinner, {
+			size,
+			...props
+		});
+		$[5] = phase;
+		$[6] = props;
+		$[7] = size;
 		$[8] = t3;
-		$[9] = t4;
-		$[10] = t5;
-		$[11] = t6;
-		$[12] = tone;
-		$[13] = t7;
-	} else t7 = $[13];
-	return t7;
+	} else t3 = $[8];
+	return t3;
 };
 var ConfirmDialogShorthand = (t0) => {
-	const $ = c(19);
+	const $ = c(22);
 	const { open, onOpenChange, title, description, confirmLabel, cancelLabel, onConfirm, tone } = t0;
 	let t1;
 	if ($[0] !== title) {
@@ -334,48 +475,60 @@ var ConfirmDialogShorthand = (t0) => {
 		$[5] = t3;
 	} else t3 = $[5];
 	let t4;
-	if ($[6] !== confirmLabel || $[7] !== onConfirm || $[8] !== tone) {
-		t4 = /* @__PURE__ */ jsx(ConfirmDialogConfirm, {
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(ConfirmDialogSpinner, {});
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== confirmLabel || $[8] !== onConfirm || $[9] !== tone) {
+		t5 = /* @__PURE__ */ jsxs(ConfirmDialogConfirm, {
 			onConfirm,
 			tone,
-			children: confirmLabel
+			children: [t4, confirmLabel]
 		});
-		$[6] = confirmLabel;
-		$[7] = onConfirm;
-		$[8] = tone;
-		$[9] = t4;
-	} else t4 = $[9];
-	let t5;
-	if ($[10] !== t3 || $[11] !== t4) {
-		t5 = /* @__PURE__ */ jsxs(ConfirmDialogFooter, { children: [t3, t4] });
-		$[10] = t3;
-		$[11] = t4;
-		$[12] = t5;
-	} else t5 = $[12];
+		$[7] = confirmLabel;
+		$[8] = onConfirm;
+		$[9] = tone;
+		$[10] = t5;
+	} else t5 = $[10];
 	let t6;
-	if ($[13] !== onOpenChange || $[14] !== open || $[15] !== t1 || $[16] !== t2 || $[17] !== t5) {
-		t6 = /* @__PURE__ */ jsxs(ConfirmDialogRoot, {
+	if ($[11] !== t3 || $[12] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(ConfirmDialogFooter, { children: [t3, t5] });
+		$[11] = t3;
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== t1 || $[15] !== t2 || $[16] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(ConfirmDialogContent, { children: [
+			t1,
+			t2,
+			t6
+		] });
+		$[14] = t1;
+		$[15] = t2;
+		$[16] = t6;
+		$[17] = t7;
+	} else t7 = $[17];
+	let t8;
+	if ($[18] !== onOpenChange || $[19] !== open || $[20] !== t7) {
+		t8 = /* @__PURE__ */ jsx(ConfirmDialogRoot, {
 			open,
 			onOpenChange,
-			children: [
-				t1,
-				t2,
-				t5
-			]
+			children: t7
 		});
-		$[13] = onOpenChange;
-		$[14] = open;
-		$[15] = t1;
-		$[16] = t2;
-		$[17] = t5;
-		$[18] = t6;
-	} else t6 = $[18];
-	return t6;
+		$[18] = onOpenChange;
+		$[19] = open;
+		$[20] = t7;
+		$[21] = t8;
+	} else t8 = $[21];
+	return t8;
 };
 /**
 * A controlled confirmation over base-ui's `AlertDialog`. A promise from
 * `onConfirm` keeps it busy until it settles, closing on resolve and staying open
-* on reject; the parts hanging off it build one by hand.
+* on reject; the parts hanging off it build one by hand, with `Content`
+* bundling the portal, backdrop and popup.
 *
 * @example
 * <ConfirmDialog
@@ -391,10 +544,15 @@ var ConfirmDialogShorthand = (t0) => {
 */
 var ConfirmDialog = Object.assign(ConfirmDialogShorthand, {
 	Root: ConfirmDialogRoot,
+	Portal: AlertDialog.Portal,
+	Backdrop: ConfirmDialogBackdrop,
+	Popup: ConfirmDialogPopup,
+	Content: ConfirmDialogContent,
 	Title: ConfirmDialogTitle,
 	Description: ConfirmDialogDescription,
 	Footer: ConfirmDialogFooter,
 	Cancel: ConfirmDialogCancel,
-	Confirm: ConfirmDialogConfirm
+	Confirm: ConfirmDialogConfirm,
+	Spinner: ConfirmDialogSpinner
 });
 export { ConfirmDialog };

package/dist/components/confirm-dialog/confirm-dialog.module.js

@@ -1,9 +1,9 @@
 import './confirm-dialog.css';// src/components/confirm-dialog/confirm-dialog.module.scss
-var backdrop = "_backdrop_19j93_3";
-var popup = "_popup_19j93_28";
-var title = "_title_19j93_52";
-var description = "_description_19j93_57";
-var actions = "_actions_19j93_61";
+var backdrop = "_backdrop_19hfo_3";
+var popup = "_popup_19hfo_28";
+var title = "_title_19hfo_52";
+var description = "_description_19hfo_57";
+var actions = "_actions_19hfo_61";
 var confirm_dialog_module_default = {
 	backdrop,
 	popup,