From dbeebf58e3b475930d36299aded048bfe4098c90 Mon Sep 17 00:00:00 2001
From: Aaron Reisman <aaron.reisman@plane.so>
Date: Tue, 23 Jun 2026 16:09:48 +0700
Subject: [PATCH 1/2] Align alert-dialog anatomy to design-system spec

Per issue #117, the designer marked spacing, right-aligned action placement,
and max-width constraint as "always the same". These were previously left to
the consumer via ad-hoc layout divs inside the stories. This commit bakes
them in via two new anatomy parts and updates the popup's baked styles.
---
 .../alert-dialog/alert-dialog.stories.tsx     | 42 +++++++-------
 .../src/components/alert-dialog/index.tsx     |  4 ++
 .../ui/alert-dialog/alert-dialog-actions.tsx  | 13 +++++
 .../ui/alert-dialog/alert-dialog-intro.tsx    | 13 +++++
 .../ui/alert-dialog/alert-dialog.stories.tsx  | 55 ++++++++-----------
 packages/propel/src/ui/alert-dialog/index.tsx |  2 +
 .../propel/src/ui/alert-dialog/variants.ts    | 11 ++++
 7 files changed, 85 insertions(+), 55 deletions(-)
 create mode 100644 packages/propel/src/ui/alert-dialog/alert-dialog-actions.tsx
 create mode 100644 packages/propel/src/ui/alert-dialog/alert-dialog-intro.tsx

diff --git a/packages/propel/src/components/alert-dialog/alert-dialog.stories.tsx b/packages/propel/src/components/alert-dialog/alert-dialog.stories.tsx
index bc5c9e67..99ca146c 100644
--- a/packages/propel/src/components/alert-dialog/alert-dialog.stories.tsx
+++ b/packages/propel/src/components/alert-dialog/alert-dialog.stories.tsx
@@ -4,9 +4,11 @@ import { expect, userEvent, waitFor, within } from "storybook/test";
 import { Button } from "../../ui/button";
 import {
   AlertDialog,
+  AlertDialogActions,
   AlertDialogClose,
   AlertDialogContent,
   AlertDialogDescription,
+  AlertDialogIntro,
   AlertDialogTitle,
   AlertDialogTrigger,
 } from "./index";
@@ -23,8 +25,10 @@ const meta = {
   subcomponents: {
     AlertDialogTrigger,
     AlertDialogContent,
+    AlertDialogIntro,
     AlertDialogTitle,
     AlertDialogDescription,
+    AlertDialogActions,
     AlertDialogClose,
   },
 } satisfies Meta<typeof AlertDialog>;
@@ -40,29 +44,21 @@ export const Default: Story = {
         Delete project
       </Button>
       <AlertDialogContent>
-        {/*
-         * Two layout groups, separated by the parent's gap (never a margin on a
-         * child): an "intro" (title + description) and the "actions" row. These
-         * boundaries are the future anatomy surfaces — e.g. AlertDialogIntro and
-         * AlertDialogActions — so define them correctly here before hardening.
-         */}
-        <div className="flex w-80 flex-col gap-4">
-          <div className="flex flex-col gap-2">
-            <AlertDialogTitle>Delete project?</AlertDialogTitle>
-            <AlertDialogDescription>
-              This permanently removes the project and all of its work items. This action can&apos;t
-              be undone.
-            </AlertDialogDescription>
-          </div>
-          <div className="flex justify-end gap-2">
-            <Button variant="secondary" tone="neutral" magnitude="xl" render={<AlertDialogClose />}>
-              Cancel
-            </Button>
-            <Button variant="primary" tone="danger" magnitude="xl" render={<AlertDialogClose />}>
-              Delete
-            </Button>
-          </div>
-        </div>
+        <AlertDialogIntro>
+          <AlertDialogTitle>Delete project?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This permanently removes the project and all of its work items. This action can&apos;t
+            be undone.
+          </AlertDialogDescription>
+        </AlertDialogIntro>
+        <AlertDialogActions>
+          <Button variant="secondary" tone="neutral" magnitude="xl" render={<AlertDialogClose />}>
+            Cancel
+          </Button>
+          <Button variant="primary" tone="danger" magnitude="xl" render={<AlertDialogClose />}>
+            Delete
+          </Button>
+        </AlertDialogActions>
       </AlertDialogContent>
     </AlertDialog>
   ),
diff --git a/packages/propel/src/components/alert-dialog/index.tsx b/packages/propel/src/components/alert-dialog/index.tsx
index 4cfb2aa9..e9e52921 100644
--- a/packages/propel/src/components/alert-dialog/index.tsx
+++ b/packages/propel/src/components/alert-dialog/index.tsx
@@ -3,10 +3,14 @@ export { AlertDialogContent, type AlertDialogContentProps } from "./alert-dialog
 export {
   AlertDialog,
   type AlertDialogProps,
+  AlertDialogActions,
+  type AlertDialogActionsProps,
   AlertDialogClose,
   type AlertDialogCloseProps,
   AlertDialogDescription,
   type AlertDialogDescriptionProps,
+  AlertDialogIntro,
+  type AlertDialogIntroProps,
   AlertDialogTitle,
   type AlertDialogTitleProps,
   AlertDialogTrigger,
diff --git a/packages/propel/src/ui/alert-dialog/alert-dialog-actions.tsx b/packages/propel/src/ui/alert-dialog/alert-dialog-actions.tsx
new file mode 100644
index 00000000..64aebf1d
--- /dev/null
+++ b/packages/propel/src/ui/alert-dialog/alert-dialog-actions.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+
+import { alertDialogActionsVariants } from "./variants";
+
+export type AlertDialogActionsProps = React.HTMLAttributes<HTMLDivElement>;
+
+/**
+ * Right-aligns action buttons with consistent horizontal spacing. The placement and gap are always
+ * the same — baked in by the design system.
+ */
+export function AlertDialogActions({ ...props }: AlertDialogActionsProps) {
+  return <div className={alertDialogActionsVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/alert-dialog/alert-dialog-intro.tsx b/packages/propel/src/ui/alert-dialog/alert-dialog-intro.tsx
new file mode 100644
index 00000000..0f96c134
--- /dev/null
+++ b/packages/propel/src/ui/alert-dialog/alert-dialog-intro.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+
+import { alertDialogIntroVariants } from "./variants";
+
+export type AlertDialogIntroProps = React.HTMLAttributes<HTMLDivElement>;
+
+/**
+ * Groups the title and description with consistent vertical spacing. The gap between title and
+ * description is always the same — baked in by the design system.
+ */
+export function AlertDialogIntro({ ...props }: AlertDialogIntroProps) {
+  return <div className={alertDialogIntroVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/alert-dialog/alert-dialog.stories.tsx b/packages/propel/src/ui/alert-dialog/alert-dialog.stories.tsx
index 9c48b16c..c4f445ca 100644
--- a/packages/propel/src/ui/alert-dialog/alert-dialog.stories.tsx
+++ b/packages/propel/src/ui/alert-dialog/alert-dialog.stories.tsx
@@ -4,9 +4,11 @@ import { expect, userEvent, waitFor, within } from "storybook/test";
 import { Button } from "../button";
 import {
   AlertDialog,
+  AlertDialogActions,
   AlertDialogBackdrop,
   AlertDialogClose,
   AlertDialogDescription,
+  AlertDialogIntro,
   AlertDialogPopup,
   AlertDialogPortal,
   AlertDialogTitle,
@@ -30,8 +32,10 @@ const meta = {
     AlertDialogBackdrop,
     AlertDialogViewport,
     AlertDialogPopup,
+    AlertDialogIntro,
     AlertDialogTitle,
     AlertDialogDescription,
+    AlertDialogActions,
     AlertDialogClose,
   },
 } satisfies Meta<typeof AlertDialog>;
@@ -50,38 +54,25 @@ export const Anatomy: Story = {
         <AlertDialogBackdrop />
         <AlertDialogViewport>
           <AlertDialogPopup>
-            {/*
-             * Two layout groups, separated by the parent's gap (never a margin on a
-             * child): an "intro" (title + description) and the "actions" row. These
-             * boundaries are the future anatomy surfaces — e.g. AlertDialogIntro and
-             * AlertDialogActions — so define them correctly here before hardening.
-             */}
-            <div className="flex w-80 flex-col gap-4">
-              <div className="flex flex-col gap-2">
-                <AlertDialogTitle>Delete account?</AlertDialogTitle>
-                <AlertDialogDescription>
-                  This permanently deletes your account and cannot be undone.
-                </AlertDialogDescription>
-              </div>
-              <div className="flex justify-end gap-2">
-                <Button
-                  variant="secondary"
-                  tone="neutral"
-                  magnitude="xl"
-                  render={<AlertDialogClose />}
-                >
-                  Cancel
-                </Button>
-                <Button
-                  variant="primary"
-                  tone="danger"
-                  magnitude="xl"
-                  render={<AlertDialogClose />}
-                >
-                  Delete
-                </Button>
-              </div>
-            </div>
+            <AlertDialogIntro>
+              <AlertDialogTitle>Delete account?</AlertDialogTitle>
+              <AlertDialogDescription>
+                This permanently deletes your account and cannot be undone.
+              </AlertDialogDescription>
+            </AlertDialogIntro>
+            <AlertDialogActions>
+              <Button
+                variant="secondary"
+                tone="neutral"
+                magnitude="xl"
+                render={<AlertDialogClose />}
+              >
+                Cancel
+              </Button>
+              <Button variant="primary" tone="danger" magnitude="xl" render={<AlertDialogClose />}>
+                Delete
+              </Button>
+            </AlertDialogActions>
           </AlertDialogPopup>
         </AlertDialogViewport>
       </AlertDialogPortal>
diff --git a/packages/propel/src/ui/alert-dialog/index.tsx b/packages/propel/src/ui/alert-dialog/index.tsx
index b94d221b..f57b90e6 100644
--- a/packages/propel/src/ui/alert-dialog/index.tsx
+++ b/packages/propel/src/ui/alert-dialog/index.tsx
@@ -1,10 +1,12 @@
 export { AlertDialog, type AlertDialogProps } from "./alert-dialog";
+export { AlertDialogActions, type AlertDialogActionsProps } from "./alert-dialog-actions";
 export { AlertDialogBackdrop, type AlertDialogBackdropProps } from "./alert-dialog-backdrop";
 export { AlertDialogClose, type AlertDialogCloseProps } from "./alert-dialog-close";
 export {
   AlertDialogDescription,
   type AlertDialogDescriptionProps,
 } from "./alert-dialog-description";
+export { AlertDialogIntro, type AlertDialogIntroProps } from "./alert-dialog-intro";
 export { AlertDialogPopup, type AlertDialogPopupProps } from "./alert-dialog-popup";
 export { AlertDialogPortal } from "./alert-dialog-portal";
 export { AlertDialogTitle, type AlertDialogTitleProps } from "./alert-dialog-title";
diff --git a/packages/propel/src/ui/alert-dialog/variants.ts b/packages/propel/src/ui/alert-dialog/variants.ts
index 25a2bb93..e278e0d9 100644
--- a/packages/propel/src/ui/alert-dialog/variants.ts
+++ b/packages/propel/src/ui/alert-dialog/variants.ts
@@ -20,6 +20,9 @@ export const alertDialogViewportVariants = cva(
 
 export const alertDialogPopupVariants = cva(
   cx(
+    // Fixed width and layout: the max-width constraint and internal spacing are
+    // always the same per spec — baked here, not left to the consumer.
+    "flex w-80 flex-col gap-4",
     "rounded-lg border-sm border-subtle bg-layer-1 p-4 shadow-overlay-100 outline-none",
     "origin-(--transform-origin) transition-[opacity,transform] duration-200",
     "data-starting-style:scale-95 data-starting-style:opacity-0",
@@ -31,6 +34,14 @@ export const alertDialogTitleVariants = cva("text-16 font-semibold text-primary"
 
 export const alertDialogDescriptionVariants = cva("text-14 text-secondary");
 
+// Intro: groups the title and description with consistent vertical spacing.
+// Always the same per spec (spacing between title and description).
+export const alertDialogIntroVariants = cva("flex flex-col gap-2");
+
+// Actions: right-aligns action buttons with consistent horizontal spacing.
+// Always the same per spec (action button placement, right-aligned in footer).
+export const alertDialogActionsVariants = cva("flex justify-end gap-2");
+
 export const alertDialogCloseVariants = cva(
   cx(
     "inline-flex items-center justify-center rounded-md text-icon-secondary outline-none",

From 514d8a4ff081098c5c592d9f30cee8ef77f9ad8d Mon Sep 17 00:00:00 2001
From: Aaron Reisman <aaron.reisman@plane.so>
Date: Tue, 23 Jun 2026 16:46:21 +0700
Subject: [PATCH 2/2] Extend alert-dialog anatomy: Header + Icon parts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The popup now exposes the leading-icon region the design spec calls out
("icon placement, left of title"; "icon type warning/error/info"). Two new
ui parts:

- AlertDialogIcon: a decorative single-element node slot for the leading
  glyph, with a required `tone` (danger/warning/info/success) — the
  destructive-vs-informational axis the spec marks adjustable, no default.
- AlertDialogHeader: the row that places the icon at the inline-start of
  the intro so the icon sits left of the title.

Styling stays in ui/.../variants.ts (cva); the components tier only
composes parts. Stories compose the new parts and register them in
subcomponents.
---
 .../alert-dialog/alert-dialog.stories.tsx     | 24 ++++++++----
 .../src/components/alert-dialog/index.tsx     |  5 +++
 .../ui/alert-dialog/alert-dialog-header.tsx   | 17 +++++++++
 .../src/ui/alert-dialog/alert-dialog-icon.tsx | 26 +++++++++++++
 .../ui/alert-dialog/alert-dialog.stories.tsx  | 22 ++++++++---
 packages/propel/src/ui/alert-dialog/index.tsx |  6 +++
 .../propel/src/ui/alert-dialog/variants.ts    | 37 ++++++++++++++++---
 7 files changed, 118 insertions(+), 19 deletions(-)
 create mode 100644 packages/propel/src/ui/alert-dialog/alert-dialog-header.tsx
 create mode 100644 packages/propel/src/ui/alert-dialog/alert-dialog-icon.tsx

diff --git a/packages/propel/src/components/alert-dialog/alert-dialog.stories.tsx b/packages/propel/src/components/alert-dialog/alert-dialog.stories.tsx
index 99ca146c..c27bdb54 100644
--- a/packages/propel/src/components/alert-dialog/alert-dialog.stories.tsx
+++ b/packages/propel/src/components/alert-dialog/alert-dialog.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import { TriangleAlert } from "lucide-react";
 import { expect, userEvent, waitFor, within } from "storybook/test";
 
 import { Button } from "../../ui/button";
@@ -8,6 +9,8 @@ import {
   AlertDialogClose,
   AlertDialogContent,
   AlertDialogDescription,
+  AlertDialogHeader,
+  AlertDialogIcon,
   AlertDialogIntro,
   AlertDialogTitle,
   AlertDialogTrigger,
@@ -25,6 +28,8 @@ const meta = {
   subcomponents: {
     AlertDialogTrigger,
     AlertDialogContent,
+    AlertDialogHeader,
+    AlertDialogIcon,
     AlertDialogIntro,
     AlertDialogTitle,
     AlertDialogDescription,
@@ -44,13 +49,18 @@ export const Default: Story = {
         Delete project
       </Button>
       <AlertDialogContent>
-        <AlertDialogIntro>
-          <AlertDialogTitle>Delete project?</AlertDialogTitle>
-          <AlertDialogDescription>
-            This permanently removes the project and all of its work items. This action can&apos;t
-            be undone.
-          </AlertDialogDescription>
-        </AlertDialogIntro>
+        <AlertDialogHeader>
+          <AlertDialogIcon tone="danger">
+            <TriangleAlert />
+          </AlertDialogIcon>
+          <AlertDialogIntro>
+            <AlertDialogTitle>Delete project?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This permanently removes the project and all of its work items. This action can&apos;t
+              be undone.
+            </AlertDialogDescription>
+          </AlertDialogIntro>
+        </AlertDialogHeader>
         <AlertDialogActions>
           <Button variant="secondary" tone="neutral" magnitude="xl" render={<AlertDialogClose />}>
             Cancel
diff --git a/packages/propel/src/components/alert-dialog/index.tsx b/packages/propel/src/components/alert-dialog/index.tsx
index e9e52921..039ba639 100644
--- a/packages/propel/src/components/alert-dialog/index.tsx
+++ b/packages/propel/src/components/alert-dialog/index.tsx
@@ -9,6 +9,11 @@ export {
   type AlertDialogCloseProps,
   AlertDialogDescription,
   type AlertDialogDescriptionProps,
+  AlertDialogHeader,
+  type AlertDialogHeaderProps,
+  AlertDialogIcon,
+  type AlertDialogIconProps,
+  type AlertDialogIconTone,
   AlertDialogIntro,
   type AlertDialogIntroProps,
   AlertDialogTitle,
diff --git a/packages/propel/src/ui/alert-dialog/alert-dialog-header.tsx b/packages/propel/src/ui/alert-dialog/alert-dialog-header.tsx
new file mode 100644
index 00000000..57786cca
--- /dev/null
+++ b/packages/propel/src/ui/alert-dialog/alert-dialog-header.tsx
@@ -0,0 +1,17 @@
+import type * as React from "react";
+
+import { alertDialogHeaderVariants } from "./variants";
+
+export type AlertDialogHeaderProps = Omit<
+  React.ComponentPropsWithoutRef<"div">,
+  "className" | "style"
+>;
+
+/**
+ * The top region of the popup: lays out the leading `AlertDialogIcon` at the inline-start of the
+ * `AlertDialogIntro` (icon left of title), per the design spec. The icon and intro are passed as
+ * children.
+ */
+export function AlertDialogHeader(props: AlertDialogHeaderProps) {
+  return <div className={alertDialogHeaderVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/alert-dialog/alert-dialog-icon.tsx b/packages/propel/src/ui/alert-dialog/alert-dialog-icon.tsx
new file mode 100644
index 00000000..bf516467
--- /dev/null
+++ b/packages/propel/src/ui/alert-dialog/alert-dialog-icon.tsx
@@ -0,0 +1,26 @@
+import { type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { alertDialogIconVariants } from "./variants";
+
+export type AlertDialogIconTone = NonNullable<VariantProps<typeof alertDialogIconVariants>["tone"]>;
+
+export type AlertDialogIconProps = Omit<
+  React.ComponentPropsWithoutRef<"span">,
+  "className" | "style"
+> & {
+  /**
+   * Intent of the alert, the destructive-vs-informational axis the spec marks adjustable. Drives
+   * the icon's color; required so the caller always states the intent.
+   */
+  tone: AlertDialogIconTone;
+};
+
+/**
+ * The decorative leading glyph shown at the inline-start of the title. Sizes its single child to
+ * `--node-size`, so the caller passes a bare icon (warning, error, info, …). Decorative — the title
+ * carries the accessible name — so it is `aria-hidden`.
+ */
+export function AlertDialogIcon({ tone, ...props }: AlertDialogIconProps) {
+  return <span aria-hidden className={alertDialogIconVariants({ tone })} {...props} />;
+}
diff --git a/packages/propel/src/ui/alert-dialog/alert-dialog.stories.tsx b/packages/propel/src/ui/alert-dialog/alert-dialog.stories.tsx
index c4f445ca..e99c8e84 100644
--- a/packages/propel/src/ui/alert-dialog/alert-dialog.stories.tsx
+++ b/packages/propel/src/ui/alert-dialog/alert-dialog.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import { TriangleAlert } from "lucide-react";
 import { expect, userEvent, waitFor, within } from "storybook/test";
 
 import { Button } from "../button";
@@ -8,6 +9,8 @@ import {
   AlertDialogBackdrop,
   AlertDialogClose,
   AlertDialogDescription,
+  AlertDialogHeader,
+  AlertDialogIcon,
   AlertDialogIntro,
   AlertDialogPopup,
   AlertDialogPortal,
@@ -32,6 +35,8 @@ const meta = {
     AlertDialogBackdrop,
     AlertDialogViewport,
     AlertDialogPopup,
+    AlertDialogHeader,
+    AlertDialogIcon,
     AlertDialogIntro,
     AlertDialogTitle,
     AlertDialogDescription,
@@ -54,12 +59,17 @@ export const Anatomy: Story = {
         <AlertDialogBackdrop />
         <AlertDialogViewport>
           <AlertDialogPopup>
-            <AlertDialogIntro>
-              <AlertDialogTitle>Delete account?</AlertDialogTitle>
-              <AlertDialogDescription>
-                This permanently deletes your account and cannot be undone.
-              </AlertDialogDescription>
-            </AlertDialogIntro>
+            <AlertDialogHeader>
+              <AlertDialogIcon tone="danger">
+                <TriangleAlert />
+              </AlertDialogIcon>
+              <AlertDialogIntro>
+                <AlertDialogTitle>Delete account?</AlertDialogTitle>
+                <AlertDialogDescription>
+                  This permanently deletes your account and cannot be undone.
+                </AlertDialogDescription>
+              </AlertDialogIntro>
+            </AlertDialogHeader>
             <AlertDialogActions>
               <Button
                 variant="secondary"
diff --git a/packages/propel/src/ui/alert-dialog/index.tsx b/packages/propel/src/ui/alert-dialog/index.tsx
index f57b90e6..79aa3d82 100644
--- a/packages/propel/src/ui/alert-dialog/index.tsx
+++ b/packages/propel/src/ui/alert-dialog/index.tsx
@@ -6,6 +6,12 @@ export {
   AlertDialogDescription,
   type AlertDialogDescriptionProps,
 } from "./alert-dialog-description";
+export { AlertDialogHeader, type AlertDialogHeaderProps } from "./alert-dialog-header";
+export {
+  AlertDialogIcon,
+  type AlertDialogIconProps,
+  type AlertDialogIconTone,
+} from "./alert-dialog-icon";
 export { AlertDialogIntro, type AlertDialogIntroProps } from "./alert-dialog-intro";
 export { AlertDialogPopup, type AlertDialogPopupProps } from "./alert-dialog-popup";
 export { AlertDialogPortal } from "./alert-dialog-portal";
diff --git a/packages/propel/src/ui/alert-dialog/variants.ts b/packages/propel/src/ui/alert-dialog/variants.ts
index e278e0d9..dfe7debe 100644
--- a/packages/propel/src/ui/alert-dialog/variants.ts
+++ b/packages/propel/src/ui/alert-dialog/variants.ts
@@ -1,11 +1,14 @@
 import { cva, cx } from "class-variance-authority";
 
+import { nodeSlotClass } from "../../internal/node-slot";
+
 // AlertDialog is a structural overlay primitive. It is always modal and
 // non-dismissible, and Base UI drives every interactive state (open/closed,
-// starting/ending transition styles) as data attributes — so there are no
-// styling axes (variant/tone/magnitude) to expose. The cva pairings below hold
-// the static chrome so each part is styled in one place, with no `className` at
-// the boundary. Root, Trigger, and Portal carry no styling.
+// starting/ending transition styles) as data attributes. The one design axis the
+// spec calls out is the leading icon's intent (destructive vs informational), which
+// the `AlertDialogIcon` exposes as a required `tone` — every other part is static
+// chrome held in a single cva so there is no `className` at the boundary. Root,
+// Trigger, and Portal carry no styling.
 
 export const alertDialogBackdropVariants = cva(
   cx(
@@ -34,9 +37,31 @@ export const alertDialogTitleVariants = cva("text-16 font-semibold text-primary"
 
 export const alertDialogDescriptionVariants = cva("text-14 text-secondary");
 
+// Header: the top region that places the leading icon at the inline-start of the
+// intro (icon left of title, per spec). Items align to the start so a multi-line
+// description keeps the icon level with the title.
+export const alertDialogHeaderVariants = cva("flex items-start gap-3");
+
+// Icon: the decorative leading glyph beside the title. Sizes its single child to
+// `--node-size` (via the shared node-slot class) and tints it by `tone` — the
+// destructive-vs-informational axis the spec marks as adjustable. The glyph itself
+// (warning/error/info) is whatever child the caller passes. No default tone: the
+// caller must state the intent.
+export const alertDialogIconVariants = cva(cx(nodeSlotClass, "mt-0.5 [--node-size:1.25rem]"), {
+  variants: {
+    tone: {
+      danger: "text-icon-danger",
+      warning: "text-icon-warning-primary",
+      info: "text-icon-info-primary",
+      success: "text-icon-success-primary",
+    },
+  },
+});
+
 // Intro: groups the title and description with consistent vertical spacing.
-// Always the same per spec (spacing between title and description).
-export const alertDialogIntroVariants = cva("flex flex-col gap-2");
+// Always the same per spec (spacing between title and description). `min-w-0` lets
+// long copy wrap instead of pushing the icon out of the header row.
+export const alertDialogIntroVariants = cva("flex min-w-0 flex-col gap-2");
 
 // Actions: right-aligns action buttons with consistent horizontal spacing.
 // Always the same per spec (action button placement, right-aligned in footer).