From 3a9e578b8329fb62fcaaefd23f5d347d332f7aa9 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <cdransfeldt@adobe.com>
Date: Thu, 8 May 2025 15:03:55 -0700
Subject: [PATCH 1/8] feat(alert dialog): s2 migration

---
 .changeset/lemon-flowers-poke.md              | 61 +++++++++++++
 components/alertdialog/dist/metadata.json     | 34 +++----
 components/alertdialog/index.css              | 37 ++++----
 .../stories/alertdialog.stories.js            | 88 ++++++-------------
 .../alertdialog/stories/alertdialog.test.js   | 46 +---------
 components/alertdialog/stories/template.js    | 77 +++++++++++++---
 tokens/custom/large-vars.css                  |  5 +-
 tokens/custom/medium-vars.css                 |  5 +-
 8 files changed, 198 insertions(+), 155 deletions(-)
 create mode 100644 .changeset/lemon-flowers-poke.md

diff --git a/.changeset/lemon-flowers-poke.md b/.changeset/lemon-flowers-poke.md
new file mode 100644
index 00000000000..fb7ddd0978e
--- /dev/null
+++ b/.changeset/lemon-flowers-poke.md
@@ -0,0 +1,61 @@
+---
+"@spectrum-css/alertdialog": major
+---
+
+#### S2 migration for alert dialog
+
+This migrates the `alert dialog` component to the latest Spectrum 2 designs. Custom properties have been remapped and added per the design specification.
+
+The icon in the dialog header has been moved from the right side to the left.
+
+The dialog divider has been removed.
+
+Primary button style has been updated to filled.
+
+Multiple variants are now supported:
+
+- Confirmation
+- Information
+- Destructive
+- Warning (with `AlertDiamond` icon)
+- Error (with `AlertTriangle` icon)
+
+Dialog buttons may be displayed either horizontally or vertically.
+
+##### Removed custom properties
+
+`--spectrum-alert-dialog-body-font-size`
+`--spectrum-alert-dialog-description-to-buttons`
+`--spectrum-alert-dialog-divider-to-description`
+`--spectrum-alert-dialog-padding`
+`--spectrum-alert-dialog-title-size`
+`--spectrum-alert-dialog-title-to-divider`
+`--spectrum-alert-dialog-title-to-icon`
+
+##### New custom properties
+
+`--spectrum-alert-dialog-background-color`
+`--spectrum-alert-dialog-corner-radius`
+`--spectrum-alert-dialog-description-to-button-group`
+`--spectrum-alert-dialog-edge-to-content`
+`--spectrum-alert-dialog-minimum-title-to-icon`
+`--spectrum-alert-dialog-title-to-description`
+
+##### Removed mods
+
+`--mod-alert-dialog-body-font-size`
+`--mod-alert-dialog-description-to-buttons`
+`--mod-alert-dialog-divider-to-description`
+`--mod-alert-dialog-padding`
+`--mod-alert-dialog-title-to-divider`
+`--mod-alert-dialog-title-to-icon`
+
+##### New mods
+
+`--mod-alert-dialog-background-color`
+`--mod-alert-dialog-corner-radius`
+`--mod-alert-dialog-description-size`
+`--mod-alert-dialog-description-to-button-group`
+`--mod-alert-dialog-edge-to-content`
+`--mod-alert-dialog-minimum-title-to-icon`
+`--mod-alert-dialog-title-to-description`
diff --git a/components/alertdialog/dist/metadata.json b/components/alertdialog/dist/metadata.json
index 4e34b0e5fb8..694569400a3 100644
--- a/components/alertdialog/dist/metadata.json
+++ b/components/alertdialog/dist/metadata.json
@@ -5,77 +5,81 @@
     ".spectrum-AlertDialog .spectrum-Icon",
     ".spectrum-AlertDialog--error",
     ".spectrum-AlertDialog--warning",
+    ".spectrum-AlertDialog-buttongroup",
     ".spectrum-AlertDialog-content",
     ".spectrum-AlertDialog-grid",
     ".spectrum-AlertDialog-header",
     ".spectrum-AlertDialog-heading"
   ],
   "modifiers": [
+    "--mod-alert-dialog-background-color",
     "--mod-alert-dialog-body-color",
     "--mod-alert-dialog-body-font-family",
-    "--mod-alert-dialog-body-font-size",
     "--mod-alert-dialog-body-font-style",
     "--mod-alert-dialog-body-font-weight",
     "--mod-alert-dialog-body-line-height",
-    "--mod-alert-dialog-description-to-buttons",
-    "--mod-alert-dialog-divider-to-description",
+    "--mod-alert-dialog-corner-radius",
+    "--mod-alert-dialog-description-size",
+    "--mod-alert-dialog-description-to-button-group",
+    "--mod-alert-dialog-edge-to-content",
     "--mod-alert-dialog-error-icon-color",
     "--mod-alert-dialog-icon-size",
     "--mod-alert-dialog-max-width",
     "--mod-alert-dialog-min-width",
-    "--mod-alert-dialog-padding",
+    "--mod-alert-dialog-minimum-title-to-icon",
     "--mod-alert-dialog-title-color",
     "--mod-alert-dialog-title-font-family",
     "--mod-alert-dialog-title-font-size",
     "--mod-alert-dialog-title-font-style",
     "--mod-alert-dialog-title-font-weight",
     "--mod-alert-dialog-title-line-height",
-    "--mod-alert-dialog-title-to-divider",
-    "--mod-alert-dialog-title-to-icon",
+    "--mod-alert-dialog-title-to-description",
     "--mod-alert-dialog-warning-icon-color"
   ],
   "component": [
+    "--spectrum-alert-dialog-background-color",
     "--spectrum-alert-dialog-body-color",
     "--spectrum-alert-dialog-body-font-family",
-    "--spectrum-alert-dialog-body-font-size",
     "--spectrum-alert-dialog-body-font-style",
     "--spectrum-alert-dialog-body-font-weight",
     "--spectrum-alert-dialog-body-line-height",
+    "--spectrum-alert-dialog-corner-radius",
     "--spectrum-alert-dialog-description-size",
-    "--spectrum-alert-dialog-description-to-buttons",
-    "--spectrum-alert-dialog-divider-to-description",
+    "--spectrum-alert-dialog-description-to-button-group",
+    "--spectrum-alert-dialog-edge-to-content",
     "--spectrum-alert-dialog-error-icon-color",
     "--spectrum-alert-dialog-icon-size",
     "--spectrum-alert-dialog-max-width",
     "--spectrum-alert-dialog-maximum-width",
     "--spectrum-alert-dialog-min-width",
+    "--spectrum-alert-dialog-minimum-title-to-icon",
     "--spectrum-alert-dialog-minimum-width",
-    "--spectrum-alert-dialog-padding",
     "--spectrum-alert-dialog-title-color",
     "--spectrum-alert-dialog-title-font-family",
     "--spectrum-alert-dialog-title-font-size",
     "--spectrum-alert-dialog-title-font-style",
     "--spectrum-alert-dialog-title-font-weight",
     "--spectrum-alert-dialog-title-line-height",
-    "--spectrum-alert-dialog-title-size",
-    "--spectrum-alert-dialog-title-to-divider",
-    "--spectrum-alert-dialog-title-to-icon",
+    "--spectrum-alert-dialog-title-to-description",
     "--spectrum-alert-dialog-warning-icon-color"
   ],
   "global": [
+    "--spectrum-background-layer-2-color",
     "--spectrum-body-color",
     "--spectrum-body-sans-serif-font-style",
     "--spectrum-body-sans-serif-font-weight",
+    "--spectrum-corner-radius-extra-large-default",
     "--spectrum-heading-color",
     "--spectrum-heading-line-height",
     "--spectrum-heading-sans-serif-font-style",
     "--spectrum-heading-sans-serif-font-weight",
-    "--spectrum-line-height-100",
+    "--spectrum-line-height-200",
     "--spectrum-negative-visual-color",
     "--spectrum-notice-visual-color",
     "--spectrum-sans-font-family-stack",
-    "--spectrum-spacing-200",
+    "--spectrum-spacing-100",
     "--spectrum-spacing-300",
+    "--spectrum-spacing-500",
     "--spectrum-workflow-icon-size-100"
   ],
   "passthroughs": ["--mod-buttongroup-justify-content", "--mod-icon-color"],
diff --git a/components/alertdialog/index.css b/components/alertdialog/index.css
index 32f5367d1ca..d2abcd433ec 100644
--- a/components/alertdialog/index.css
+++ b/components/alertdialog/index.css
@@ -1,5 +1,5 @@
 /*!
- * Copyright 2024 Adobe. All rights reserved.
+ * Copyright 2025 Adobe. All rights reserved.
  *
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License. You may obtain a copy
@@ -15,30 +15,30 @@
 	--spectrum-alert-dialog-min-width: var(--spectrum-alert-dialog-minimum-width);
 	--spectrum-alert-dialog-max-width: var(--spectrum-alert-dialog-maximum-width);
 	--spectrum-alert-dialog-icon-size: var(--spectrum-workflow-icon-size-100);
+	--spectrum-alert-dialog-corner-radius: var(--spectrum-corner-radius-extra-large-default);
 
 	/* color */
 	--spectrum-alert-dialog-warning-icon-color: var(--spectrum-notice-visual-color);
 	--spectrum-alert-dialog-error-icon-color: var(--spectrum-negative-visual-color);
+	--spectrum-alert-dialog-background-color: var(--spectrum-background-layer-2-color);
 
 	/* typography */
 	--spectrum-alert-dialog-title-font-family: var(--spectrum-sans-font-family-stack);
 	--spectrum-alert-dialog-title-font-weight: var(--spectrum-heading-sans-serif-font-weight);
 	--spectrum-alert-dialog-title-font-style: var(--spectrum-heading-sans-serif-font-style);
-	--spectrum-alert-dialog-title-font-size: var(--spectrum-alert-dialog-title-size);
 	--spectrum-alert-dialog-title-line-height: var(--spectrum-heading-line-height);
 	--spectrum-alert-dialog-title-color: var(--spectrum-heading-color);
 
 	--spectrum-alert-dialog-body-font-family: var(--spectrum-sans-font-family-stack);
 	--spectrum-alert-dialog-body-font-weight: var(--spectrum-body-sans-serif-font-weight);
 	--spectrum-alert-dialog-body-font-style: var(--spectrum-body-sans-serif-font-style);
-	--spectrum-alert-dialog-body-font-size: var(--spectrum-alert-dialog-description-size);
-	--spectrum-alert-dialog-body-line-height: var(--spectrum-line-height-100);
+	--spectrum-alert-dialog-body-line-height: var(--spectrum-line-height-200);
 	--spectrum-alert-dialog-body-color: var(--spectrum-body-color);
 
 	/* spacing */
-	--spectrum-alert-dialog-title-to-divider: var(--spectrum-spacing-200);
-	--spectrum-alert-dialog-divider-to-description: var(--spectrum-spacing-300);
-	--spectrum-alert-dialog-title-to-icon: var(--spectrum-spacing-300);
+	--spectrum-alert-dialog-title-to-description: var(--spectrum-spacing-300);
+	--spectrum-alert-dialog-minimum-title-to-icon: var(--spectrum-spacing-100);
+	--spectrum-alert-dialog-description-to-button-group: var(--spectrum-spacing-500);
 
 	/* @passthrough -- mods for nested component */
 	--mod-buttongroup-justify-content: flex-end;
@@ -51,13 +51,14 @@
 	min-inline-size: var(--mod-alert-dialog-min-width, var(--spectrum-alert-dialog-min-width));
 	max-inline-size: var(--mod-alert-dialog-max-width, var(--spectrum-alert-dialog-max-width));
 	max-block-size: inherit;
+	background-color: var(--mod-alert-dialog-background-color, var(--spectrum-alert-dialog-background-color));
 	outline: none;
-	padding: var(--mod-alert-dialog-padding, var(--spectrum-alert-dialog-padding));
+	padding: var(--mod-alert-dialog-edge-to-content, var(--spectrum-alert-dialog-edge-to-content));
+	border-radius: var(--mod-alert-dialog-corner-radius, var(--spectrum-alert-dialog-corner-radius));
 
 	.spectrum-Icon {
 		inline-size: var(--mod-alert-dialog-icon-size, var(--spectrum-alert-dialog-icon-size));
 		block-size: var(--mod-alert-dialog-icon-size, var(--spectrum-alert-dialog-icon-size));
-		margin-inline-start: var(--mod-alert-dialog-title-to-icon, var(--spectrum-alert-dialog-title-to-icon));
 		flex-shrink: 0;
 	}
 }
@@ -78,8 +79,9 @@
 
 .spectrum-AlertDialog-header {
 	display: flex;
-	justify-content: space-between;
-	align-items: baseline;
+	gap: var(--mod-alert-dialog-minimum-title-to-icon, var(--spectrum-alert-dialog-minimum-title-to-icon));
+	align-items: center;
+	margin-block-end: var(--mod-alert-dialog-title-to-description, var(--spectrum-alert-dialog-title-to-description));
 }
 
 .spectrum-AlertDialog-heading {
@@ -90,24 +92,29 @@
 	line-height: var(--mod-alert-dialog-title-line-height, var(--spectrum-alert-dialog-title-line-height));
 	color: var(--mod-alert-dialog-title-color, var(--spectrum-alert-dialog-title-color));
 	margin: 0;
-	margin-block-end: var(--mod-alert-dialog-title-to-divider, var(--spectrum-alert-dialog-title-to-divider));
 }
 
 .spectrum-AlertDialog-content {
 	font-family: var(--mod-alert-dialog-body-font-family, var(--spectrum-alert-dialog-body-font-family));
 	font-weight: var(--mod-alert-dialog-body-font-weight, var(--spectrum-alert-dialog-body-font-weight));
 	font-style: var(--mod-alert-dialog-body-font-style, var(--spectrum-alert-dialog-body-font-style));
-	font-size: var(--mod-alert-dialog-body-font-size, var(--spectrum-alert-dialog-body-font-size));
+
+	/* @TODO: update to `--spectrum-alert-dialog-body-font-size` when available	 */
+	font-size: var(--mod-alert-dialog-description-size, var(--spectrum-alert-dialog-description-size));
 	line-height: var(--mod-alert-dialog-body-line-height, var(--spectrum-alert-dialog-body-line-height));
 	color: var(--mod-alert-dialog-body-color, var(--spectrum-alert-dialog-body-color));
 	margin: 0;
-	margin-block-start: var(--mod-alert-dialog-divider-to-description, var(--spectrum-alert-dialog-divider-to-description));
-	margin-block-end: var(--mod-alert-dialog-description-to-buttons, var(--spectrum-alert-dialog-description-to-buttons));
+	margin-block-end: var(--mod-alert-dialog-description-to-button-group, var(--spectrum-alert-dialog-description-to-button-group));
 
 	overflow-y: auto;
 	-webkit-overflow-scrolling: touch;
 }
 
+.spectrum-AlertDialog-buttongroup {
+	display: flex;
+	justify-content: end;
+}
+
 @media (forced-colors: active) {
 	.spectrum-AlertDialog {
 		border: solid;
diff --git a/components/alertdialog/stories/alertdialog.stories.js b/components/alertdialog/stories/alertdialog.stories.js
index 6f647f0e1ea..e1e0e6d5f91 100644
--- a/components/alertdialog/stories/alertdialog.stories.js
+++ b/components/alertdialog/stories/alertdialog.stories.js
@@ -32,12 +32,31 @@ export default {
 			control: { type: "text" },
 		},
 		isOpen,
-		variant: { table: { disable: true } },
-		buttons: { table: { disable: true } },
+		variant: {
+			name: "Variant",
+			type: { name: "string" },
+			table: {
+				type: { summary: "string" },
+				category: "Component",
+			},
+			options: ["confirmation", "information", "destructive", "warning", "error"],
+			control: "select",
+		},
+		buttonsAreVertical: {
+			name: "Vertical buttons",
+			description: "Buttons can be displayed horizontally (default) or vertically.",
+			type: { name: "boolean" },
+			table: {
+				type: { summary: "boolean" },
+				category: "Component",
+			},
+			control: "boolean",
+		}
 	},
 	args: {
 		rootClass: "spectrum-AlertDialog",
-		isOpen: false,
+		isOpen: true,
+		buttonsAreVertical: false,
 		variant: "confirmation",
 	},
 	parameters: {
@@ -57,6 +76,7 @@ export default {
 		packageJson,
 		metadata,
 	},
+	tags: ["migrated"],
 	decorators: [
 		withUnderlayWrapper,
 	],
@@ -66,15 +86,6 @@ export const Default = AlertDialogGroup.bind({});
 Default.args = {
 	isOpen: true,
 	heading: "Enable smart filters?",
-	buttons: [{
-		variant: "secondary",
-		treatment: "outline",
-		label: "Remind me later"
-	}, {
-		treatment: "fill",
-		label: "Enable",
-		variant: "accent"
-	}],
 	content: "Smart filters are nondestructive and will preserve your original images.",
 };
 
@@ -101,19 +112,6 @@ Information.args = {
 	isOpen: true,
 	variant: "information",
 	heading: "Informative Dialog with a wrapping title text because the text is longer than the width of the alert dialog",
-	buttons: [{
-		variant: "secondary",
-		treatment: "outline",
-		label: "No, thanks"
-	},{
-		variant: "secondary",
-		treatment: "outline",
-		label: "Remind me later"
-	}, {
-		variant: "primary",
-		treatment: "outline",
-		label: "Rate now",
-	}],
 	content: "If you enjoy our app, would you mind taking a moment to rate it?",
 };
 Information.parameters = {
@@ -134,16 +132,7 @@ Warning.args = {
 	isOpen: true,
 	variant: "warning",
 	heading: "Unverified format",
-	icon: true,
-	buttons: [{
-		variant: "secondary",
-		treatment: "outline",
-		label: "Cancel"
-	}, {
-		treatment: "outline",
-		label: "Continue",
-		variant: "primary"
-	}],
+	icon: "Warning",
 	content: "This format has not been verified and may not be viewable for some users. Do you want to continue publishing?",
 };
 Warning.parameters = {
@@ -159,16 +148,7 @@ Error.args = {
 	isOpen: true,
 	variant: "error",
 	heading: "Unable to share",
-	icon: true,
-	buttons: [{
-		variant: "secondary",
-		treatment: "outline",
-		label: "Cancel"
-	}, {
-		treatment: "outline",
-		label: "Continue",
-		variant: "primary"
-	}],
+	icon: "Alert",
 	content: "An error occured while sharing your project. Please verify the email address and try again.",
 };
 Error.parameters = {
@@ -184,15 +164,6 @@ Destructive.args = {
 	isOpen: true,
 	variant: "destructive",
 	heading: "Delete 3 documents?",
-	buttons: [{
-		variant: "secondary",
-		treatment: "outline",
-		label: "Cancel"
-	}, {
-		treatment: "fill",
-		label: "Delete",
-		variant: "negative"
-	}],
 	content: "Are you sure you want to delete the 3 selected documents?",
 };
 Destructive.parameters = {
@@ -205,15 +176,6 @@ Scroll.args = {
 	isOpen: true,
 	variant: "confirmation",
 	heading: "Enable Smart Filters?",
-	buttons: [{
-		variant: "secondary",
-		treatment: "outline",
-		label: "Remind me later"
-	}, {
-		treatment: "fill",
-		label: "Enable",
-		variant: "accent"
-	}],
 	content: "Smart filters are nondestructive and will preserve your original images. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices est eu lacus interdum, vitae volutpat tortor laoreet. Phasellus consectetur erat quis massa congue, vel placerat ipsum hendrerit. Aenean eleifend augue quam, quis blandit lacus pretium eget. Aliquam aliquam fermentum nunc, sed dictum metus varius in. Suspendisse in nisl libero. Nulla egestas massa eget lectus ullamcorper placerat. Vivamus cursus, nunc quis pharetra auctor, eros mi tempus elit, sit amet placerat ipsum velit ut dolor. Nam sit amet eleifend erat. Duis sollicitudin orci sit amet tellus tincidunt, vel lobortis risus pellentesque. Integer viverra urna elementum metus dignissim placerat. Nulla posuere eros ipsum. Pellentesque viverra urna justo, eu ultricies nisl fermentum et. Vivamus tristique porttitor dictum.",
 	customStyles: {
 		"max-block-size": "275px",
diff --git a/components/alertdialog/stories/alertdialog.test.js b/components/alertdialog/stories/alertdialog.test.js
index a74e2092864..c9751aa9b66 100644
--- a/components/alertdialog/stories/alertdialog.test.js
+++ b/components/alertdialog/stories/alertdialog.test.js
@@ -2,72 +2,30 @@ import { Variants } from "@spectrum-css/preview/decorators";
 import { Dialog, Template } from "./template.js";
 
 export const AlertDialogGroup = Variants({
-	// Test this without Modal to focus on the dialog solo
 	Template,
 	TestTemplate: Dialog,
 	wrapperStyles: {
 		"z-index": "1",
 		"inline-size": "fit-content",
-		"background-color": "var(--spectrum-gray-50, white)",
+		"background-color": "transparent",
+		"border": "none",
 		"min-block-size": "auto",
 	},
 	testData: [{}, {
 		variant: "warning",
 		heading: "Unverified format",
-		icon: true,
-		buttons: [{
-			variant: "secondary",
-			treatment: "outline",
-			label: "Cancel"
-		}, {
-			treatment: "outline",
-			label: "Continue",
-			variant: "primary"
-		}],
 		content: "This format has not been verified and may not be viewable for some users. Do you want to continue publishing?",
 	}, {
 		variant: "error",
 		heading: "Unable to share",
-		icon: true,
-		buttons: [{
-			variant: "secondary",
-			treatment: "outline",
-			label: "Cancel"
-		}, {
-			treatment: "outline",
-			label: "Continue",
-			variant: "primary"
-		}],
 		content: "An error occured while sharing your project. Please verify the email address and try again.",
 	}, {
 		variant: "destructive",
 		heading: "Delete 3 documents?",
-		buttons: [{
-			variant: "secondary",
-			treatment: "outline",
-			label: "Cancel"
-		}, {
-			treatment: "fill",
-			label: "Delete",
-			variant: "negative"
-		}],
 		content: "Are you sure you want to delete the 3 selected documents?",
 	}, {
 		variant: "information",
 		heading: "Informative Dialog with a wrapping title text because the text is longer than the width of the alert dialog",
-		buttons: [{
-			variant: "secondary",
-			treatment: "outline",
-			label: "No, thanks"
-		},{
-			variant: "secondary",
-			treatment: "outline",
-			label: "Remind me later"
-		}, {
-			variant: "primary",
-			treatment: "outline",
-			label: "Rate now",
-		}],
 		content: "If you enjoy our app, would you mind taking a moment to rate it?",
 	}],
 });
diff --git a/components/alertdialog/stories/template.js b/components/alertdialog/stories/template.js
index 5de1e37972c..80c4b8fc774 100644
--- a/components/alertdialog/stories/template.js
+++ b/components/alertdialog/stories/template.js
@@ -1,5 +1,4 @@
 import { Template as ButtonGroup } from "@spectrum-css/buttongroup/stories/template.js";
-import { Template as Divider } from "@spectrum-css/divider/stories/template.js";
 import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
 import { Template as Modal } from "@spectrum-css/modal/stories/template.js";
 import { getRandomId } from "@spectrum-css/preview/decorators";
@@ -11,14 +10,70 @@ import { when } from "lit/directives/when.js";
 
 import "../index.css";
 
+const iconMap = {
+	warning: "AlertDiamond",
+	error: "AlertTriangle"
+};
+
+const buttonMap = {
+	confirmation: [{
+		variant: "secondary",
+		treatment: "outline",
+		label: "Remind me later"
+	}, {
+		treatment: "fill",
+		label: "Enable",
+		variant: "accent"
+	}],
+	warning: [{
+		variant: "secondary",
+		treatment: "outline",
+		label: "Cancel"
+	}, {
+		treatment: "outline",
+		label: "Continue",
+		variant: "primary"
+	}],
+	error: [{
+		variant: "secondary",
+		treatment: "outline",
+		label: "Cancel"
+	}, {
+		treatment: "outline",
+		label: "Continue",
+		variant: "primary"
+	}],
+	destructive: [{
+		variant: "secondary",
+		treatment: "outline",
+		label: "Cancel"
+	}, {
+		treatment: "fill",
+		label: "Delete",
+		variant: "negative"
+	}],
+	information: [{
+		variant: "secondary",
+		treatment: "outline",
+		label: "No, thanks"
+	},{
+		variant: "secondary",
+		treatment: "outline",
+		label: "Remind me later"
+	}, {
+		variant: "primary",
+		treatment: "outline",
+		label: "Rate now",
+	}],
+};
+
 export const Dialog = ({
 	rootClass = "spectrum-AlertDialog",
 	heading,
 	content,
 	customClasses = [],
-	buttons,
 	variant,
-	icon = false,
+	buttonsAreVertical,
 	id = getRandomId("alertdialog"),
 	customStyles = {},
 } = {}, context = {}) => {
@@ -26,7 +81,7 @@ export const Dialog = ({
 		<div
 			class=${classMap({
 				[rootClass]: true,
-				[`${rootClass}--${variant}`]: true,
+				[`${rootClass}--${variant}`]: typeof variant !== "undefined",
 				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 			})}
 			id=${ifDefined(id)}
@@ -38,20 +93,18 @@ export const Dialog = ({
 		>
 			<div class="${rootClass}-grid">
 				<div class="spectrum-AlertDialog-header">
-					<h1 class="${rootClass}-heading" id="dialog_label">${heading}</h1>
-					${when(icon, () => Icon({
+					${when(iconMap[variant], () => Icon({
 						size: "m",
-						iconName: "Alert",
+						iconName: iconMap[variant],
 						setName: "workflow",
 						customClasses: [`${rootClass}-icon`],
 					}, context))}
+					<h1 class="${rootClass}-heading" id="dialog_label">${heading}</h1>
 				</div>
-				${Divider({
-					horizontal: true,
-					customClasses: [`${rootClass}-divider`],
-					}, context)}
 				<section class="${rootClass}-content">${content}</section>
-				${ButtonGroup({ items: buttons }, context)}
+				<section class="${rootClass}-buttongroup">
+					${ButtonGroup({ items: buttonMap[variant], vertical: buttonsAreVertical }, context)}
+				</section>
 			</div>
 		</div>
 	`;
diff --git a/tokens/custom/large-vars.css b/tokens/custom/large-vars.css
index 7e076444f77..3f52ee6d58f 100644
--- a/tokens/custom/large-vars.css
+++ b/tokens/custom/large-vars.css
@@ -1,5 +1,5 @@
 /*!
- * Copyright 2024 Adobe. All rights reserved.
+ * Copyright 2025 Adobe. All rights reserved.
  *
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License. You may obtain a copy
@@ -22,8 +22,7 @@
 	--spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200);
 	--spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-200);
 
-	--spectrum-alert-dialog-padding: var(--spectrum-spacing-400);
-	--spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600);
+	--spectrum-alert-dialog-edge-to-content: var(--spectrum-spacing-500);
 
 	--spectrum-assetcard-focus-ring-border-radius: 9px;
 	--spectrum-assetcard-selectionindicator-margin: 15px;
diff --git a/tokens/custom/medium-vars.css b/tokens/custom/medium-vars.css
index 63c1191f713..d8acc929c55 100644
--- a/tokens/custom/medium-vars.css
+++ b/tokens/custom/medium-vars.css
@@ -1,5 +1,5 @@
 /*!
- * Copyright 2024 Adobe. All rights reserved.
+ * Copyright 2025 Adobe. All rights reserved.
  *
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License. You may obtain a copy
@@ -22,8 +22,7 @@
 	--spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100);
 	--spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-100);
 
-	--spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700);
-	--spectrum-alert-dialog-padding: var(--spectrum-spacing-500);
+	--spectrum-alert-dialog-edge-to-content: var(--spectrum-spacing-400);
 
 	--spectrum-assetcard-content-font-size: var(--spectrum-body-size-s);
 	--spectrum-assetcard-focus-ring-border-radius: 8px;

From dda09612c4a6ddf1c28f5ae0c680a89d932242ef Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <cdransfeldt@adobe.com>
Date: Mon, 12 May 2025 15:30:09 -0700
Subject: [PATCH 2/8] chore(alert dialog): add vertical button display test +
 story

---
 components/alertdialog/stories/alertdialog.stories.js | 9 +++++++++
 components/alertdialog/stories/alertdialog.test.js    | 4 ++++
 2 files changed, 13 insertions(+)

diff --git a/components/alertdialog/stories/alertdialog.stories.js b/components/alertdialog/stories/alertdialog.stories.js
index e1e0e6d5f91..b72bb0c07ff 100644
--- a/components/alertdialog/stories/alertdialog.stories.js
+++ b/components/alertdialog/stories/alertdialog.stories.js
@@ -184,3 +184,12 @@ Scroll.args = {
 Scroll.parameters = {
 	chromatic: { disableSnapshot: true },
 };
+
+export const VerticalButtons = Template.bind({});
+VerticalButtons.tags = ["!dev"];
+VerticalButtons.args = {
+	buttonsAreVertical: true,
+	isOpen: true,
+	heading: "Vertical button group",
+	content: "This is what an alert dialog looks like with buttons arranged vertically.",
+};
diff --git a/components/alertdialog/stories/alertdialog.test.js b/components/alertdialog/stories/alertdialog.test.js
index c9751aa9b66..72be2848e98 100644
--- a/components/alertdialog/stories/alertdialog.test.js
+++ b/components/alertdialog/stories/alertdialog.test.js
@@ -12,6 +12,10 @@ export const AlertDialogGroup = Variants({
 		"min-block-size": "auto",
 	},
 	testData: [{}, {
+		heading: "Vertical button group",
+		content: "This is what an alert dialog looks like with buttons arranged vertically.",
+		buttonsAreVertical: true,
+	}, {
 		variant: "warning",
 		heading: "Unverified format",
 		content: "This format has not been verified and may not be viewable for some users. Do you want to continue publishing?",

From 8c4db311a1e5268ba16c845a1eee1af680a8f429 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <cdransfeldt@adobe.com>
Date: Wed, 14 May 2025 08:50:47 -0700
Subject: [PATCH 3/8] fix(alert dialog): adjust treatment to match designs for
 error + warning

---
 components/alertdialog/stories/template.js | 36 +++++++++++-----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/components/alertdialog/stories/template.js b/components/alertdialog/stories/template.js
index 80c4b8fc774..79947497e06 100644
--- a/components/alertdialog/stories/template.js
+++ b/components/alertdialog/stories/template.js
@@ -25,23 +25,18 @@ const buttonMap = {
 		label: "Enable",
 		variant: "accent"
 	}],
-	warning: [{
+	information: [{
 		variant: "secondary",
 		treatment: "outline",
-		label: "Cancel"
-	}, {
-		treatment: "outline",
-		label: "Continue",
-		variant: "primary"
-	}],
-	error: [{
+		label: "No, thanks"
+	},{
 		variant: "secondary",
 		treatment: "outline",
-		label: "Cancel"
+		label: "Remind me later"
 	}, {
+		variant: "primary",
 		treatment: "outline",
-		label: "Continue",
-		variant: "primary"
+		label: "Rate now",
 	}],
 	destructive: [{
 		variant: "secondary",
@@ -52,18 +47,23 @@ const buttonMap = {
 		label: "Delete",
 		variant: "negative"
 	}],
-	information: [{
+	warning: [{
 		variant: "secondary",
 		treatment: "outline",
-		label: "No, thanks"
-	},{
+		label: "Cancel"
+	}, {
+		treatment: "fill",
+		label: "Continue",
+		variant: "primary"
+	}],
+	error: [{
 		variant: "secondary",
 		treatment: "outline",
-		label: "Remind me later"
+		label: "Cancel"
 	}, {
-		variant: "primary",
-		treatment: "outline",
-		label: "Rate now",
+		treatment: "fill",
+		label: "Continue",
+		variant: "primary"
 	}],
 };
 

From 798baa1c86767e87a79b79480ef3422a8025f03b Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <cdransfeldt@adobe.com>
Date: Thu, 15 May 2025 09:01:45 -0700
Subject: [PATCH 4/8] fix(alert dialog): add vertical button arrangement usage
 notes to story

---
 components/alertdialog/stories/alertdialog.stories.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/components/alertdialog/stories/alertdialog.stories.js b/components/alertdialog/stories/alertdialog.stories.js
index b72bb0c07ff..ed35dd7099d 100644
--- a/components/alertdialog/stories/alertdialog.stories.js
+++ b/components/alertdialog/stories/alertdialog.stories.js
@@ -185,6 +185,9 @@ Scroll.parameters = {
 	chromatic: { disableSnapshot: true },
 };
 
+/**
+ * When horizontal space is limited, button groups stack vertically. They should appear in ascending order based on importance, with the most critical action at the bottom.
+ */
 export const VerticalButtons = Template.bind({});
 VerticalButtons.tags = ["!dev"];
 VerticalButtons.args = {

From 3c6810fbce0f255ebc3c42aab4b0fab48abd5f5c Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <cdransfeldt@adobe.com>
Date: Thu, 15 May 2025 14:00:55 -0700
Subject: [PATCH 5/8] chore(alert dialog): add overflow story + scroll
 description

---
 .../stories/alertdialog.stories.js            | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/components/alertdialog/stories/alertdialog.stories.js b/components/alertdialog/stories/alertdialog.stories.js
index ed35dd7099d..4056a920d93 100644
--- a/components/alertdialog/stories/alertdialog.stories.js
+++ b/components/alertdialog/stories/alertdialog.stories.js
@@ -75,6 +75,9 @@ export default {
 		},
 		packageJson,
 		metadata,
+		status: {
+			type: "migrated",
+		}
 	},
 	tags: ["migrated"],
 	decorators: [
@@ -170,6 +173,29 @@ Destructive.parameters = {
 	chromatic: { disableSnapshot: true },
 };
 
+/**
+ * When the title and description text are too long for the available horizontal space, they wrap to form another line.
+ */
+export const Overflow = Template.bind({});
+Overflow.tags = ["!dev"];
+Overflow.args = {
+	isOpen: true,
+	variant: "confirmation",
+	heading: "Alert dialogs allow for text overflow by wrapping when the description and dialog are too long",
+	content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices est eu lacus interdum, vitae volutpat tortor laoreet. Phasellus consectetur erat quis massa congue, vel placerat ipsum hendrerit. Aenean eleifend augue quam, quis blandit lacus pretium eget. Aliquam aliquam fermentum nunc, sed dictum metus varius in. Suspendisse in nisl libero. Nulla egestas massa eget lectus ullamcorper placerat. Vivamus cursus, nunc quis pharetra auctor, eros mi tempus elit, sit amet placerat ipsum velit ut dolor. Nam sit amet eleifend erat. Duis sollicitudin orci sit amet tellus tincidunt, vel lobortis risus pellentesque. Integer viverra urna elementum metus dignissim placerat. Nulla posuere eros ipsum."
+};
+Overflow.parameters = {
+	chromatic: { disableSnapshot: true },
+	docs: {
+		story: {
+			height: "525px",
+		},
+	},
+};
+
+/**
+ * The dialog description may also scroll if the height of the dialog is constrained.
+ */
 export const Scroll = Template.bind({});
 Scroll.tags = ["!dev"];
 Scroll.args = {

From 4c2077d6253ba3b904ae52b91467178f8c5ad269 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <cdransfeldt@adobe.com>
Date: Fri, 16 May 2025 08:50:16 -0700
Subject: [PATCH 6/8] fix(alert dialog): add inline-size: 100% to
 spectrum-AlertDialog-grid to fix case where header + footer wouldn't fill
 width appropriately with short content (CSS-1133)

---
 components/alertdialog/index.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/alertdialog/index.css b/components/alertdialog/index.css
index d2abcd433ec..03f4a6e5594 100644
--- a/components/alertdialog/index.css
+++ b/components/alertdialog/index.css
@@ -75,6 +75,7 @@
 
 .spectrum-AlertDialog-grid {
 	display: grid;
+	inline-size: 100%;
 }
 
 .spectrum-AlertDialog-header {

From b723ad6db61d426853e9ced129fc56c885774055 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <cdransfeldt@adobe.com>
Date: Mon, 19 May 2025 11:38:55 -0700
Subject: [PATCH 7/8] chore(alert dialog): cleanup for stories, templates and
 styles

---
 .changeset/lemon-flowers-poke.md              |  9 ++++---
 components/alertdialog/dist/metadata.json     |  8 +++---
 components/alertdialog/index.css              |  8 +++---
 .../stories/alertdialog.stories.js            | 14 +++++-----
 .../alertdialog/stories/alertdialog.test.js   |  9 +++++--
 components/alertdialog/stories/template.js    | 26 +++++++++----------
 tokens/custom/large-vars.css                  |  2 +-
 tokens/custom/medium-vars.css                 |  2 +-
 8 files changed, 43 insertions(+), 35 deletions(-)

diff --git a/.changeset/lemon-flowers-poke.md b/.changeset/lemon-flowers-poke.md
index fb7ddd0978e..34307255d04 100644
--- a/.changeset/lemon-flowers-poke.md
+++ b/.changeset/lemon-flowers-poke.md
@@ -12,7 +12,7 @@ The dialog divider has been removed.
 
 Primary button style has been updated to filled.
 
-Multiple variants are now supported:
+The following variants remain supported:
 
 - Confirmation
 - Information
@@ -24,7 +24,6 @@ Dialog buttons may be displayed either horizontally or vertically.
 
 ##### Removed custom properties
 
-`--spectrum-alert-dialog-body-font-size`
 `--spectrum-alert-dialog-description-to-buttons`
 `--spectrum-alert-dialog-divider-to-description`
 `--spectrum-alert-dialog-padding`
@@ -36,9 +35,10 @@ Dialog buttons may be displayed either horizontally or vertically.
 
 `--spectrum-alert-dialog-background-color`
 `--spectrum-alert-dialog-corner-radius`
+`--spectrum-alert-dialog-description-font-size`
 `--spectrum-alert-dialog-description-to-button-group`
 `--spectrum-alert-dialog-edge-to-content`
-`--spectrum-alert-dialog-minimum-title-to-icon`
+`--spectrum-alert-dialog-heading-size`
 `--spectrum-alert-dialog-title-to-description`
 
 ##### Removed mods
@@ -54,8 +54,9 @@ Dialog buttons may be displayed either horizontally or vertically.
 
 `--mod-alert-dialog-background-color`
 `--mod-alert-dialog-corner-radius`
-`--mod-alert-dialog-description-size`
+`--mod-alert-dialog-description-content-size`
 `--mod-alert-dialog-description-to-button-group`
 `--mod-alert-dialog-edge-to-content`
+`--mod-alert-dialog-heading-size`
 `--mod-alert-dialog-minimum-title-to-icon`
 `--mod-alert-dialog-title-to-description`
diff --git a/components/alertdialog/dist/metadata.json b/components/alertdialog/dist/metadata.json
index 694569400a3..7510ea9f7aa 100644
--- a/components/alertdialog/dist/metadata.json
+++ b/components/alertdialog/dist/metadata.json
@@ -19,17 +19,17 @@
     "--mod-alert-dialog-body-font-weight",
     "--mod-alert-dialog-body-line-height",
     "--mod-alert-dialog-corner-radius",
-    "--mod-alert-dialog-description-size",
+    "--mod-alert-dialog-description-content-size",
     "--mod-alert-dialog-description-to-button-group",
     "--mod-alert-dialog-edge-to-content",
     "--mod-alert-dialog-error-icon-color",
+    "--mod-alert-dialog-heading-size",
     "--mod-alert-dialog-icon-size",
     "--mod-alert-dialog-max-width",
     "--mod-alert-dialog-min-width",
     "--mod-alert-dialog-minimum-title-to-icon",
     "--mod-alert-dialog-title-color",
     "--mod-alert-dialog-title-font-family",
-    "--mod-alert-dialog-title-font-size",
     "--mod-alert-dialog-title-font-style",
     "--mod-alert-dialog-title-font-weight",
     "--mod-alert-dialog-title-line-height",
@@ -44,10 +44,12 @@
     "--spectrum-alert-dialog-body-font-weight",
     "--spectrum-alert-dialog-body-line-height",
     "--spectrum-alert-dialog-corner-radius",
-    "--spectrum-alert-dialog-description-size",
+    "--spectrum-alert-dialog-description-content-size",
+    "--spectrum-alert-dialog-description-font-size",
     "--spectrum-alert-dialog-description-to-button-group",
     "--spectrum-alert-dialog-edge-to-content",
     "--spectrum-alert-dialog-error-icon-color",
+    "--spectrum-alert-dialog-heading-size",
     "--spectrum-alert-dialog-icon-size",
     "--spectrum-alert-dialog-max-width",
     "--spectrum-alert-dialog-maximum-width",
diff --git a/components/alertdialog/index.css b/components/alertdialog/index.css
index 03f4a6e5594..0bc24598937 100644
--- a/components/alertdialog/index.css
+++ b/components/alertdialog/index.css
@@ -28,6 +28,8 @@
 	--spectrum-alert-dialog-title-font-style: var(--spectrum-heading-sans-serif-font-style);
 	--spectrum-alert-dialog-title-line-height: var(--spectrum-heading-line-height);
 	--spectrum-alert-dialog-title-color: var(--spectrum-heading-color);
+	--spectrum-alert-dialog-heading-size: var(--spectrum-alert-dialog-title-font-size);
+	--spectrum-alert-dialog-description-content-size: var(--spectrum-alert-dialog-description-font-size);
 
 	--spectrum-alert-dialog-body-font-family: var(--spectrum-sans-font-family-stack);
 	--spectrum-alert-dialog-body-font-weight: var(--spectrum-body-sans-serif-font-weight);
@@ -89,7 +91,7 @@
 	font-family: var(--mod-alert-dialog-title-font-family, var(--spectrum-alert-dialog-title-font-family));
 	font-weight: var(--mod-alert-dialog-title-font-weight, var(--spectrum-alert-dialog-title-font-weight));
 	font-style: var(--mod-alert-dialog-title-font-style, var(--spectrum-alert-dialog-title-font-style));
-	font-size: var(--mod-alert-dialog-title-font-size, var(--spectrum-alert-dialog-title-font-size));
+	font-size: var(--mod-alert-dialog-heading-size, var(--spectrum-alert-dialog-heading-size));
 	line-height: var(--mod-alert-dialog-title-line-height, var(--spectrum-alert-dialog-title-line-height));
 	color: var(--mod-alert-dialog-title-color, var(--spectrum-alert-dialog-title-color));
 	margin: 0;
@@ -99,9 +101,7 @@
 	font-family: var(--mod-alert-dialog-body-font-family, var(--spectrum-alert-dialog-body-font-family));
 	font-weight: var(--mod-alert-dialog-body-font-weight, var(--spectrum-alert-dialog-body-font-weight));
 	font-style: var(--mod-alert-dialog-body-font-style, var(--spectrum-alert-dialog-body-font-style));
-
-	/* @TODO: update to `--spectrum-alert-dialog-body-font-size` when available	 */
-	font-size: var(--mod-alert-dialog-description-size, var(--spectrum-alert-dialog-description-size));
+	font-size: var(--mod-alert-dialog-description-content-size, var(--spectrum-alert-dialog-description-content-size));
 	line-height: var(--mod-alert-dialog-body-line-height, var(--spectrum-alert-dialog-body-line-height));
 	color: var(--mod-alert-dialog-body-color, var(--spectrum-alert-dialog-body-color));
 	margin: 0;
diff --git a/components/alertdialog/stories/alertdialog.stories.js b/components/alertdialog/stories/alertdialog.stories.js
index 4056a920d93..44039079756 100644
--- a/components/alertdialog/stories/alertdialog.stories.js
+++ b/components/alertdialog/stories/alertdialog.stories.js
@@ -42,9 +42,9 @@ export default {
 			options: ["confirmation", "information", "destructive", "warning", "error"],
 			control: "select",
 		},
-		buttonsAreVertical: {
+		hasVerticalButtons: {
 			name: "Vertical buttons",
-			description: "Buttons can be displayed horizontally (default) or vertically.",
+			description: "In limited horizontal space, the button group may stack vertically.",
 			type: { name: "boolean" },
 			table: {
 				type: { summary: "boolean" },
@@ -56,7 +56,7 @@ export default {
 	args: {
 		rootClass: "spectrum-AlertDialog",
 		isOpen: true,
-		buttonsAreVertical: false,
+		hasVerticalButtons: false,
 		variant: "confirmation",
 	},
 	parameters: {
@@ -86,6 +86,7 @@ export default {
 };
 
 export const Default = AlertDialogGroup.bind({});
+Default.storyName = "Default (confirmation)";
 Default.args = {
 	isOpen: true,
 	heading: "Enable smart filters?",
@@ -152,7 +153,7 @@ Error.args = {
 	variant: "error",
 	heading: "Unable to share",
 	icon: "Alert",
-	content: "An error occured while sharing your project. Please verify the email address and try again.",
+	content: "An error occurred while sharing your project. Please verify the email address and try again.",
 };
 Error.parameters = {
 	chromatic: { disableSnapshot: true },
@@ -212,12 +213,13 @@ Scroll.parameters = {
 };
 
 /**
- * When horizontal space is limited, button groups stack vertically. They should appear in ascending order based on importance, with the most critical action at the bottom.
+ * Buttons are stacked by the importance of the action, with the most critical or primary action at the bottom.
  */
 export const VerticalButtons = Template.bind({});
+VerticalButtons.storyName = "Vertical buttons";
 VerticalButtons.tags = ["!dev"];
 VerticalButtons.args = {
-	buttonsAreVertical: true,
+	hasVerticalButtons: true,
 	isOpen: true,
 	heading: "Vertical button group",
 	content: "This is what an alert dialog looks like with buttons arranged vertically.",
diff --git a/components/alertdialog/stories/alertdialog.test.js b/components/alertdialog/stories/alertdialog.test.js
index 72be2848e98..c2c850cb58c 100644
--- a/components/alertdialog/stories/alertdialog.test.js
+++ b/components/alertdialog/stories/alertdialog.test.js
@@ -12,24 +12,29 @@ export const AlertDialogGroup = Variants({
 		"min-block-size": "auto",
 	},
 	testData: [{}, {
+		testHeading: "Vertical button display",
 		heading: "Vertical button group",
 		content: "This is what an alert dialog looks like with buttons arranged vertically.",
-		buttonsAreVertical: true,
+		hasVerticalButtons: true,
 	}, {
+		testHeading: "Warning",
 		variant: "warning",
 		heading: "Unverified format",
 		content: "This format has not been verified and may not be viewable for some users. Do you want to continue publishing?",
 	}, {
+		testHeading: "Error",
 		variant: "error",
 		heading: "Unable to share",
 		content: "An error occured while sharing your project. Please verify the email address and try again.",
 	}, {
+		testHeading: "Destructive",
 		variant: "destructive",
 		heading: "Delete 3 documents?",
 		content: "Are you sure you want to delete the 3 selected documents?",
 	}, {
+		testHeading: "Informative",
 		variant: "information",
-		heading: "Informative Dialog with a wrapping title text because the text is longer than the width of the alert dialog",
+		heading: "Informative dialog with a wrapping title text because the text is longer than the width of the alert dialog",
 		content: "If you enjoy our app, would you mind taking a moment to rate it?",
 	}],
 });
diff --git a/components/alertdialog/stories/template.js b/components/alertdialog/stories/template.js
index 79947497e06..7504cc687da 100644
--- a/components/alertdialog/stories/template.js
+++ b/components/alertdialog/stories/template.js
@@ -21,9 +21,9 @@ const buttonMap = {
 		treatment: "outline",
 		label: "Remind me later"
 	}, {
+		variant: "accent",
 		treatment: "fill",
-		label: "Enable",
-		variant: "accent"
+		label: "Enable"
 	}],
 	information: [{
 		variant: "secondary",
@@ -35,35 +35,35 @@ const buttonMap = {
 		label: "Remind me later"
 	}, {
 		variant: "primary",
-		treatment: "outline",
-		label: "Rate now",
+		treatment: "fill",
+		label: "Rate now"
 	}],
 	destructive: [{
 		variant: "secondary",
 		treatment: "outline",
 		label: "Cancel"
 	}, {
+		variant: "negative",
 		treatment: "fill",
-		label: "Delete",
-		variant: "negative"
+		label: "Delete"
 	}],
 	warning: [{
 		variant: "secondary",
 		treatment: "outline",
 		label: "Cancel"
 	}, {
+		variant: "primary",
 		treatment: "fill",
-		label: "Continue",
-		variant: "primary"
+		label: "Continue"
 	}],
 	error: [{
 		variant: "secondary",
 		treatment: "outline",
 		label: "Cancel"
 	}, {
+		variant: "primary",
 		treatment: "fill",
-		label: "Continue",
-		variant: "primary"
+		label: "Continue"
 	}],
 };
 
@@ -73,7 +73,7 @@ export const Dialog = ({
 	content,
 	customClasses = [],
 	variant,
-	buttonsAreVertical,
+	hasVerticalButtons,
 	id = getRandomId("alertdialog"),
 	customStyles = {},
 } = {}, context = {}) => {
@@ -103,7 +103,7 @@ export const Dialog = ({
 				</div>
 				<section class="${rootClass}-content">${content}</section>
 				<section class="${rootClass}-buttongroup">
-					${ButtonGroup({ items: buttonMap[variant], vertical: buttonsAreVertical }, context)}
+					${ButtonGroup({ items: buttonMap[variant], vertical: hasVerticalButtons }, context)}
 				</section>
 			</div>
 		</div>
@@ -112,7 +112,6 @@ export const Dialog = ({
 
 export const Template = ({
 	isOpen = true,
-	customModalStyles = {},
 	skipWrapper = false,
 	...args
 } = {}, context = {}) => {
@@ -121,7 +120,6 @@ export const Template = ({
 		content: [
 			Dialog(args, context)
 		],
-		customStyles: customModalStyles,
 		skipWrapper,
 	}, context);
 };
diff --git a/tokens/custom/large-vars.css b/tokens/custom/large-vars.css
index 3f52ee6d58f..d1573c98a11 100644
--- a/tokens/custom/large-vars.css
+++ b/tokens/custom/large-vars.css
@@ -22,7 +22,7 @@
 	--spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200);
 	--spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-200);
 
-	--spectrum-alert-dialog-edge-to-content: var(--spectrum-spacing-500);
+	--spectrum-alert-dialog-edge-to-content: var(--spectrum-spacing-400);
 
 	--spectrum-assetcard-focus-ring-border-radius: 9px;
 	--spectrum-assetcard-selectionindicator-margin: 15px;
diff --git a/tokens/custom/medium-vars.css b/tokens/custom/medium-vars.css
index d8acc929c55..d9f08666d34 100644
--- a/tokens/custom/medium-vars.css
+++ b/tokens/custom/medium-vars.css
@@ -22,7 +22,7 @@
 	--spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100);
 	--spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-100);
 
-	--spectrum-alert-dialog-edge-to-content: var(--spectrum-spacing-400);
+	--spectrum-alert-dialog-edge-to-content: var(--spectrum-spacing-500);
 
 	--spectrum-assetcard-content-font-size: var(--spectrum-body-size-s);
 	--spectrum-assetcard-focus-ring-border-radius: 8px;

From 0c646ed79770770c4727ac0b21385ecd7c5668b8 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <cdransfeldt@adobe.com>
Date: Thu, 22 May 2025 07:23:26 -0700
Subject: [PATCH 8/8] fix(alert dialog): correct figma link in story to point
 to proper component

---
 components/alertdialog/stories/alertdialog.stories.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/alertdialog/stories/alertdialog.stories.js b/components/alertdialog/stories/alertdialog.stories.js
index 44039079756..e5b563f7658 100644
--- a/components/alertdialog/stories/alertdialog.stories.js
+++ b/components/alertdialog/stories/alertdialog.stories.js
@@ -66,7 +66,7 @@ export default {
 		},
 		design: {
 			type: "figma",
-			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=21917-157",
+			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2---Desktop?node-id=21917-157",
 		},
 		docs: {
 			story: {