From 44146613aa156713e8fad5a5a264c28c2b04a5b6 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <cdransfeldt@adobe.com>
Date: Wed, 26 Mar 2025 15:09:15 -0700
Subject: [PATCH 01/11] feat(toast): S2 migration

---
 .changeset/red-kiwis-flash.md        | 32 ++++++++++
 components/toast/dist/metadata.json  | 52 ++++++++--------
 components/toast/index.css           | 91 +++++++++++-----------------
 components/toast/stories/template.js |  4 +-
 4 files changed, 97 insertions(+), 82 deletions(-)
 create mode 100644 .changeset/red-kiwis-flash.md

diff --git a/.changeset/red-kiwis-flash.md b/.changeset/red-kiwis-flash.md
new file mode 100644
index 00000000000..549de8af1a4
--- /dev/null
+++ b/.changeset/red-kiwis-flash.md
@@ -0,0 +1,32 @@
+---
+"@spectrum-css/toast": major
+---
+
+#### S2 toast migration
+
+This migrates the `toast` component to S2. Custom properties have been remapped per the design spec. Mods have been added and placeholder icons have been updated from the new workflow icons.
+
+##### Tokens
+
+| Before                       | After                        |
+| ---------------------------- | ---------------------------- |
+| --spectrum-corner-radius-100 | --spectrum-corner-radius-800 |
+
+##### Mods
+
+The following mods have been added.
+
+`--mod-toast-font-family`
+`--mod-toast-font-style`
+`--mod-toast-icon-block-size`
+`--mod-toast-spacing-action-button-to-close`
+`--mod-toast-spacing-bottom-edge-to-close-button`
+`--mod-toast-spacing-close-button-to-edge`
+`--mod-toast-spacing-text-to-close-button`
+`--mod-toast-spacing-top-edge-to-close-button`
+
+##### Passthroughs
+
+The following passthrough has been added.
+
+`--mod-closebutton-icon-color-default`
diff --git a/components/toast/dist/metadata.json b/components/toast/dist/metadata.json
index 853a11f961a..2ad062b2215 100644
--- a/components/toast/dist/metadata.json
+++ b/components/toast/dist/metadata.json
@@ -2,16 +2,13 @@
   "sourceFile": "index.css",
   "selectors": [
     ".spectrum-Toast",
+    ".spectrum-Toast .spectrum-Button",
     ".spectrum-Toast--info",
-    ".spectrum-Toast--info .spectrum-Toast-closeButton:focus-visible:not(:active)",
     ".spectrum-Toast--negative",
     ".spectrum-Toast--negative .spectrum-Toast-closeButton:focus-visible:not(:active)",
     ".spectrum-Toast--positive",
-    ".spectrum-Toast--positive .spectrum-Toast-closeButton:focus-visible:not(:active)",
     ".spectrum-Toast-body",
     ".spectrum-Toast-body + .spectrum-Toast-buttons",
-    ".spectrum-Toast-body .spectrum-Button",
-    ".spectrum-Toast-body .spectrum-Button:dir(rtl)",
     ".spectrum-Toast-buttons",
     ".spectrum-Toast-buttons .spectrum-CloseButton",
     ".spectrum-Toast-content",
@@ -19,32 +16,34 @@
     ".spectrum-Toast-content:lang(ko)",
     ".spectrum-Toast-content:lang(zh)",
     ".spectrum-Toast-typeIcon",
-    "[dir=\"rtl\"] .spectrum-Toast-body .spectrum-Button"
+    ".spectrum-Toast:has(.spectrum-Button) .spectrum-Toast-buttons"
   ],
   "modifiers": [
     "--mod-toast-background-color-default",
     "--mod-toast-block-size",
-    "--mod-toast-border-width",
     "--mod-toast-corner-radius",
-    "--mod-toast-divider-color",
+    "--mod-toast-font-family",
     "--mod-toast-font-size",
+    "--mod-toast-font-style",
     "--mod-toast-font-weight",
+    "--mod-toast-icon-block-size",
     "--mod-toast-informative-background-color-default",
     "--mod-toast-line-height",
     "--mod-toast-line-height-cjk",
     "--mod-toast-max-inline-size",
     "--mod-toast-negative-background-color-default",
     "--mod-toast-positive-background-color-default",
+    "--mod-toast-spacing-action-button-to-close-button",
     "--mod-toast-spacing-block-end",
     "--mod-toast-spacing-block-start",
-    "--mod-toast-spacing-bottom-edge-to-divider",
+    "--mod-toast-spacing-bottom-edge-to-close-button",
     "--mod-toast-spacing-bottom-edge-to-text",
-    "--mod-toast-spacing-close-button",
+    "--mod-toast-spacing-close-button-to-edge",
     "--mod-toast-spacing-icon-to-text",
     "--mod-toast-spacing-start-edge-to-text-and-icon",
-    "--mod-toast-spacing-text-and-action-button-to-divider",
     "--mod-toast-spacing-text-to-action-button-horizontal",
-    "--mod-toast-spacing-top-edge-to-divider",
+    "--mod-toast-spacing-text-to-close-button",
+    "--mod-toast-spacing-top-edge-to-close-button",
     "--mod-toast-spacing-top-edge-to-icon",
     "--mod-toast-spacing-top-edge-to-text",
     "--mod-toast-text-and-icon-color"
@@ -52,13 +51,14 @@
   "component": [
     "--spectrum-toast-background-color-default",
     "--spectrum-toast-block-size",
-    "--spectrum-toast-border-width",
     "--spectrum-toast-bottom-to-text",
     "--spectrum-toast-corner-radius",
-    "--spectrum-toast-divider-color",
+    "--spectrum-toast-font-family",
     "--spectrum-toast-font-size",
+    "--spectrum-toast-font-style",
     "--spectrum-toast-font-weight",
     "--spectrum-toast-height",
+    "--spectrum-toast-icon-block-size",
     "--spectrum-toast-informative-background-color-default",
     "--spectrum-toast-line-height",
     "--spectrum-toast-line-height-cjk",
@@ -66,16 +66,17 @@
     "--spectrum-toast-maximum-width",
     "--spectrum-toast-negative-background-color-default",
     "--spectrum-toast-positive-background-color-default",
+    "--spectrum-toast-spacing-action-button-to-close-button",
     "--spectrum-toast-spacing-block-end",
     "--spectrum-toast-spacing-block-start",
-    "--spectrum-toast-spacing-bottom-edge-to-divider",
+    "--spectrum-toast-spacing-bottom-edge-to-close-button",
     "--spectrum-toast-spacing-bottom-edge-to-text",
-    "--spectrum-toast-spacing-close-button",
+    "--spectrum-toast-spacing-close-button-to-edge",
     "--spectrum-toast-spacing-icon-to-text",
     "--spectrum-toast-spacing-start-edge-to-text-and-icon",
-    "--spectrum-toast-spacing-text-and-action-button-to-divider",
     "--spectrum-toast-spacing-text-to-action-button-horizontal",
-    "--spectrum-toast-spacing-top-edge-to-divider",
+    "--spectrum-toast-spacing-text-to-close-button",
+    "--spectrum-toast-spacing-top-edge-to-close-button",
     "--spectrum-toast-spacing-top-edge-to-icon",
     "--spectrum-toast-spacing-top-edge-to-text",
     "--spectrum-toast-text-and-icon-color",
@@ -83,9 +84,10 @@
     "--spectrum-toast-top-to-workflow-icon"
   ],
   "global": [
-    "--spectrum-border-width-100",
     "--spectrum-cjk-line-height-100",
-    "--spectrum-corner-radius-100",
+    "--spectrum-corner-radius-800",
+    "--spectrum-default-font-family",
+    "--spectrum-default-font-style",
     "--spectrum-font-size-100",
     "--spectrum-informative-background-color-default",
     "--spectrum-line-height-100",
@@ -94,11 +96,13 @@
     "--spectrum-positive-background-color-default",
     "--spectrum-regular-font-weight",
     "--spectrum-spacing-100",
+    "--spectrum-spacing-200",
     "--spectrum-spacing-300",
-    "--spectrum-text-to-visual-100",
-    "--spectrum-transparent-white-400",
-    "--spectrum-white"
+    "--spectrum-spacing-400",
+    "--spectrum-text-to-visual-300",
+    "--spectrum-white",
+    "--spectrum-workflow-icon-size-100"
   ],
-  "passthroughs": [],
-  "high-contrast": ["--highcontrast-toast-border-color"]
+  "passthroughs": ["--mod-closebutton-icon-color-default"],
+  "high-contrast": []
 }
diff --git a/components/toast/index.css b/components/toast/index.css
index b8156dc08b9..3d4a0b83433 100644
--- a/components/toast/index.css
+++ b/components/toast/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
@@ -12,59 +12,50 @@
  */
 
 .spectrum-Toast {
-	--spectrum-toast-background-color-default: var(--spectrum-neutral-subdued-background-color-default);
-	--spectrum-toast-divider-color: var(--spectrum-transparent-white-400);
-
 	/* Hardcoded variables */
 	--spectrum-toast-font-weight: var(--spectrum-regular-font-weight);
 
 	/* Size */
-
+	--spectrum-toast-font-family: var(--spectrum-default-font-family);
+	--spectrum-toast-font-style: var(--spectrum-default-font-style);
 	--spectrum-toast-font-size: var(--spectrum-font-size-100);
-	--spectrum-toast-corner-radius: var(--spectrum-corner-radius-100);
+	--spectrum-toast-corner-radius: var(--spectrum-corner-radius-800);
 	--spectrum-toast-block-size: var(--spectrum-toast-height);
+	--spectrum-toast-icon-block-size: var(--spectrum-workflow-icon-size-100);
 	--spectrum-toast-max-inline-size: var(--spectrum-toast-maximum-width);
-	--spectrum-toast-border-width: var(--spectrum-border-width-100);
 
 	--spectrum-toast-line-height: var(--spectrum-line-height-100);
 	--spectrum-toast-line-height-cjk: var(--spectrum-cjk-line-height-100);
 
 	/* Space */
-
-	--spectrum-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-100);
+	--spectrum-toast-spacing-close-button-to-edge: var(--spectrum-spacing-100);
+	--spectrum-toast-spacing-text-to-close-button: var(--spectrum-spacing-300);
+	--spectrum-toast-spacing-text-to-action-button-horizontal: var(--spectrum-spacing-400);
+	--spectrum-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-300);
 
 	--spectrum-toast-spacing-start-edge-to-text-and-icon: var(--spectrum-spacing-300);
-	--spectrum-toast-spacing-text-and-action-button-to-divider: var(--spectrum-spacing-300);
+	--spectrum-toast-spacing-action-button-to-close-button: var(--spectrum-spacing-200);
 
-	--spectrum-toast-spacing-top-edge-to-divider: var(--spectrum-spacing-100);
-	--spectrum-toast-spacing-bottom-edge-to-divider: var(--spectrum-spacing-100);
+	--spectrum-toast-spacing-top-edge-to-close-button: var(--spectrum-spacing-200);
+	--spectrum-toast-spacing-bottom-edge-to-close-button: var(--spectrum-spacing-200);
 
 	--spectrum-toast-spacing-top-edge-to-icon: var(--spectrum-toast-top-to-workflow-icon);
 
-	--spectrum-toast-spacing-text-to-action-button-horizontal: var(--spectrum-spacing-300);
-	--spectrum-toast-spacing-close-button: var(--spectrum-spacing-100);
-
-	--spectrum-toast-spacing-block-start: var(--spectrum-spacing-100);
-	--spectrum-toast-spacing-block-end: var(--spectrum-spacing-100);
+	--spectrum-toast-spacing-block-start: var(--spectrum-spacing-200);
+	--spectrum-toast-spacing-block-end: var(--spectrum-spacing-200);
 
 	--spectrum-toast-spacing-top-edge-to-text: var(--spectrum-toast-top-to-text);
 	--spectrum-toast-spacing-bottom-edge-to-text: var(--spectrum-toast-bottom-to-text);
 
 	/* Color */
+	--spectrum-toast-background-color-default: var(--spectrum-neutral-subdued-background-color-default);
 	--spectrum-toast-negative-background-color-default: var(--spectrum-negative-background-color-default);
 	--spectrum-toast-positive-background-color-default: var(--spectrum-positive-background-color-default);
 	--spectrum-toast-informative-background-color-default: var(--spectrum-informative-background-color-default);
 
 	--spectrum-toast-text-and-icon-color: var(--spectrum-white);
-}
 
-@media (forced-colors: active) {
-	.spectrum-Toast {
-		/* Border is visible in high contrast mode */
-		--highcontrast-toast-border-color: ButtonText;
-
-		border: var(--mod-toast-border-width, var(--spectrum-toast-border-width)) solid var(--highcontrast-toast-border-color, transparent);
-	}
+	--mod-closebutton-icon-color-default: var(--mod-toast-text-and-icon-color, var(--spectrum-toast-text-and-icon-color));
 }
 
 .spectrum-Toast {
@@ -79,7 +70,9 @@
 
 	padding-inline-start: var(--mod-toast-spacing-start-edge-to-text-and-icon, var(--spectrum-toast-spacing-start-edge-to-text-and-icon));
 
+	font-family: var(--mod-toast-font-family, var(--spectrum-toast-font-family));
 	font-size: var(--mod-toast-font-size, var(--spectrum-toast-font-size));
+	font-style: var(--mod-toast-font-style, var(--spectrum-toast-font-style));
 	font-weight: var(--mod-toast-font-weight, var(--spectrum-toast-font-weight));
 
 	-webkit-font-smoothing: antialiased;
@@ -100,26 +93,17 @@
 
 .spectrum-Toast--info {
 	background-color: var(--mod-toast-informative-background-color-default, var(--spectrum-toast-informative-background-color-default));
-	color: var(--mod-toast-informative-background-color-default, var(--spectrum-toast-informative-background-color-default));
-
-	.spectrum-Toast-closeButton:focus-visible:not(:active) {
-		color: var(--mod-toast-informative-background-color-default, var(--spectrum-toast-informative-background-color-default));
-	}
 }
 
 .spectrum-Toast--positive {
 	background-color: var(--mod-toast-positive-background-color-default, var(--spectrum-toast-positive-background-color-default));
-	color: var(--mod-toast-positive-background-color-default, var(--spectrum-toast-positive-background-color-default));
-
-	.spectrum-Toast-closeButton:focus-visible:not(:active) {
-		color: var(--mod-toast-positive-background-color-default, var(--spectrum-toast-positive-background-color-default));
-	}
 }
 
 .spectrum-Toast-typeIcon {
 	flex-shrink: 0;
 	flex-grow: 0;
 
+	block-size: var(--mod-toast-icon-block-size, var(--spectrum-toast-icon-block-size));
 	margin-block-start: var(--mod-toast-spacing-top-edge-to-icon, var(--spectrum-toast-spacing-top-edge-to-icon));
 	margin-inline-end: var(--mod-toast-spacing-icon-to-text, var(--spectrum-toast-spacing-icon-to-text));
 	margin-inline-start: 0;
@@ -135,7 +119,6 @@
 	padding-block-start: calc(var(--mod-toast-spacing-top-edge-to-text, var(--spectrum-toast-spacing-top-edge-to-text)) - var(--mod-toast-spacing-block-start, var(--spectrum-toast-spacing-block-start)));
 	padding-block-end: calc(var(--mod-toast-spacing-bottom-edge-to-text, var(--spectrum-toast-spacing-bottom-edge-to-text)) - var(--mod-toast-spacing-block-end, var(--spectrum-toast-spacing-block-end)));
 
-	padding-inline-end: var(--mod-toast-spacing-text-to-action-button-horizontal, var(--spectrum-toast-spacing-text-to-action-button-horizontal));
 	padding-inline-start: 0;
 
 	line-height: var(--mod-toast-line-height, var(--spectrum-toast-line-height));
@@ -156,42 +139,38 @@
 	flex: 0 0 auto;
 	align-items: flex-start;
 
-	margin-block-start: var(--mod-toast-spacing-top-edge-to-divider, var(--spectrum-toast-spacing-top-edge-to-divider));
-	margin-block-end: var(--mod-toast-spacing-bottom-edge-to-divider, var(--spectrum-toast-spacing-bottom-edge-to-divider));
-
-	/* Divider color for Text | Action Button */
-	border-inline-start-color: var(--mod-toast-divider-color, var(--spectrum-toast-divider-color));
-	padding-inline-end: var(--mod-toast-spacing-close-button, var(--spectrum-toast-spacing-close-button));
+	margin-block-start: var(--mod-toast-spacing-top-edge-to-close-button, var(--spectrum-toast-spacing-top-edge-to-close-button));
+	margin-block-end: var(--mod-toast-spacing-bottom-edge-to-close-button, var(--spectrum-toast-spacing-bottom-edge-to-close-button));
+	padding-inline-start: var(--mod-toast-spacing-text-to-close-button, var(--spectrum-toast-spacing-text-to-close-button));
+	padding-inline-end: var(--mod-toast-spacing-close-button-to-edge, var(--spectrum-toast-spacing-close-button-to-edge));
 
 	.spectrum-CloseButton {
 		align-self: flex-start;
 	}
 }
 
+.spectrum-Toast .spectrum-Button {
+	margin-inline-start: var(--mod-toast-spacing-text-to-action-button-horizontal, var(--spectrum-toast-spacing-text-to-action-button-horizontal));
+}
+
+.spectrum-Toast:has(.spectrum-Button) {
+	.spectrum-Toast-buttons {
+		padding-inline-start: var(--mod-toast-spacing-action-button-to-close-button, var(--spectrum-toast-spacing-action-button-to-close-button));
+	}
+}
+
 .spectrum-Toast-body {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
 	flex: 1 1 auto;
 	align-self: center;
+	justify-content: flex-end;
 
 	padding-block-start: var(--mod-toast-spacing-block-start, var(--spectrum-toast-spacing-block-start));
 	padding-block-end: var(--mod-toast-spacing-block-end, var(--spectrum-toast-spacing-block-end));
 
-	.spectrum-Button {
-		margin-inline-start: auto;
-		margin-inline-end: var(--mod-toast-spacing-text-and-action-button-to-divider, var(--spectrum-toast-spacing-text-and-action-button-to-divider));
-
-		&:dir(rtl) {
-			margin-inline-end: auto;
-			margin-inline-end: var(--mod-toast-spacing-text-and-action-button-to-divider, var(--spectrum-toast-spacing-text-and-action-button-to-divider));
-		}
-	}
-
 	& + .spectrum-Toast-buttons {
-		padding-inline-start: var(--mod-toast-spacing-close-button, var(--spectrum-toast-spacing-close-button));
-
-		border-inline-start-width: 1px;
-		border-inline-start-style: solid;
+		padding-inline-start: var(--mod-toast-spacing-close-button-to-edge, var(--spectrum-toast-spacing-close-button-to-edge));
 	}
 }
diff --git a/components/toast/stories/template.js b/components/toast/stories/template.js
index 6bf43215408..2f4f97715fd 100644
--- a/components/toast/stories/template.js
+++ b/components/toast/stories/template.js
@@ -19,8 +19,8 @@ export const Template = ({
 	customStyles = {},
 	id = getRandomId("toast"),
 } = {}, context = {}) => {
-	let iconName = "Info";
-	if (variant === "negative") iconName = "Alert";
+	let iconName = "InfoCircle";
+	if (variant === "negative") iconName = "AlertTriangle";
 	if (variant === "positive") iconName = "CheckmarkCircle";
 	if (variant === "neutral") iconName = undefined;
 

From fdb0d1526b5a501b4700b3b82c2a5ab7335a2431 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <cdransfeldt@adobe.com>
Date: Thu, 3 Apr 2025 13:43:43 -0700
Subject: [PATCH 02/11] fix(toast): vertical and horizontal spacing

---
 .changeset/red-kiwis-flash.md             |  2 +-
 components/toast/dist/metadata.json       | 38 +++++-----
 components/toast/index.css                | 86 ++++++++---------------
 components/toast/stories/template.js      | 15 ++--
 components/toast/stories/toast.stories.js | 11 +++
 components/toast/stories/toast.test.js    |  4 +-
 6 files changed, 69 insertions(+), 87 deletions(-)

diff --git a/.changeset/red-kiwis-flash.md b/.changeset/red-kiwis-flash.md
index 549de8af1a4..c9a914f0e7f 100644
--- a/.changeset/red-kiwis-flash.md
+++ b/.changeset/red-kiwis-flash.md
@@ -4,7 +4,7 @@
 
 #### S2 toast migration
 
-This migrates the `toast` component to S2. Custom properties have been remapped per the design spec. Mods have been added and placeholder icons have been updated from the new workflow icons.
+This migrates the `toast` component to S2. Custom properties have been remapped per the design spec. Mods have been added and placeholder icons have been updated from the new workflow icons. The toast no longer supports a divider.
 
 ##### Tokens
 
diff --git a/components/toast/dist/metadata.json b/components/toast/dist/metadata.json
index 2ad062b2215..8c194890679 100644
--- a/components/toast/dist/metadata.json
+++ b/components/toast/dist/metadata.json
@@ -1,6 +1,7 @@
 {
   "sourceFile": "index.css",
   "selectors": [
+    ".spectrum-CloseButton",
     ".spectrum-Toast",
     ".spectrum-Toast .spectrum-Button",
     ".spectrum-Toast--info",
@@ -8,19 +9,15 @@
     ".spectrum-Toast--negative .spectrum-Toast-closeButton:focus-visible:not(:active)",
     ".spectrum-Toast--positive",
     ".spectrum-Toast-body",
-    ".spectrum-Toast-body + .spectrum-Toast-buttons",
-    ".spectrum-Toast-buttons",
-    ".spectrum-Toast-buttons .spectrum-CloseButton",
     ".spectrum-Toast-content",
     ".spectrum-Toast-content:lang(ja)",
     ".spectrum-Toast-content:lang(ko)",
     ".spectrum-Toast-content:lang(zh)",
     ".spectrum-Toast-typeIcon",
-    ".spectrum-Toast:has(.spectrum-Button) .spectrum-Toast-buttons"
+    ".spectrum-Toast:not(:has(.spectrum-Button))"
   ],
   "modifiers": [
     "--mod-toast-background-color-default",
-    "--mod-toast-block-size",
     "--mod-toast-corner-radius",
     "--mod-toast-font-family",
     "--mod-toast-font-size",
@@ -31,26 +28,24 @@
     "--mod-toast-line-height",
     "--mod-toast-line-height-cjk",
     "--mod-toast-max-inline-size",
+    "--mod-toast-min-block-size",
     "--mod-toast-negative-background-color-default",
     "--mod-toast-positive-background-color-default",
-    "--mod-toast-spacing-action-button-to-close-button",
-    "--mod-toast-spacing-block-end",
-    "--mod-toast-spacing-block-start",
-    "--mod-toast-spacing-bottom-edge-to-close-button",
     "--mod-toast-spacing-bottom-edge-to-text",
-    "--mod-toast-spacing-close-button-to-edge",
+    "--mod-toast-spacing-button-to-close-button-horizontal",
+    "--mod-toast-spacing-close-button-to-end-edge",
     "--mod-toast-spacing-icon-to-text",
     "--mod-toast-spacing-start-edge-to-text-and-icon",
-    "--mod-toast-spacing-text-to-action-button-horizontal",
+    "--mod-toast-spacing-text-to-button-horizontal",
+    "--mod-toast-spacing-text-to-button-vertical",
     "--mod-toast-spacing-text-to-close-button",
-    "--mod-toast-spacing-top-edge-to-close-button",
+    "--mod-toast-spacing-toast-to-edge",
     "--mod-toast-spacing-top-edge-to-icon",
     "--mod-toast-spacing-top-edge-to-text",
     "--mod-toast-text-and-icon-color"
   ],
   "component": [
     "--spectrum-toast-background-color-default",
-    "--spectrum-toast-block-size",
     "--spectrum-toast-bottom-to-text",
     "--spectrum-toast-corner-radius",
     "--spectrum-toast-font-family",
@@ -64,19 +59,20 @@
     "--spectrum-toast-line-height-cjk",
     "--spectrum-toast-max-inline-size",
     "--spectrum-toast-maximum-width",
+    "--spectrum-toast-min-block-size",
     "--spectrum-toast-negative-background-color-default",
     "--spectrum-toast-positive-background-color-default",
-    "--spectrum-toast-spacing-action-button-to-close-button",
-    "--spectrum-toast-spacing-block-end",
-    "--spectrum-toast-spacing-block-start",
-    "--spectrum-toast-spacing-bottom-edge-to-close-button",
+    "--spectrum-toast-spacing-bottom-edge-to-button",
     "--spectrum-toast-spacing-bottom-edge-to-text",
-    "--spectrum-toast-spacing-close-button-to-edge",
+    "--spectrum-toast-spacing-button-to-close-button-horizontal",
+    "--spectrum-toast-spacing-close-button-to-end-edge",
     "--spectrum-toast-spacing-icon-to-text",
     "--spectrum-toast-spacing-start-edge-to-text-and-icon",
-    "--spectrum-toast-spacing-text-to-action-button-horizontal",
+    "--spectrum-toast-spacing-text-to-button-horizontal",
+    "--spectrum-toast-spacing-text-to-button-vertical",
     "--spectrum-toast-spacing-text-to-close-button",
-    "--spectrum-toast-spacing-top-edge-to-close-button",
+    "--spectrum-toast-spacing-toast-to-edge",
+    "--spectrum-toast-spacing-top-edge-to-button",
     "--spectrum-toast-spacing-top-edge-to-icon",
     "--spectrum-toast-spacing-top-edge-to-text",
     "--spectrum-toast-text-and-icon-color",
@@ -86,7 +82,6 @@
   "global": [
     "--spectrum-cjk-line-height-100",
     "--spectrum-corner-radius-800",
-    "--spectrum-default-font-family",
     "--spectrum-default-font-style",
     "--spectrum-font-size-100",
     "--spectrum-informative-background-color-default",
@@ -95,6 +90,7 @@
     "--spectrum-neutral-subdued-background-color-default",
     "--spectrum-positive-background-color-default",
     "--spectrum-regular-font-weight",
+    "--spectrum-sans-font-family-stack",
     "--spectrum-spacing-100",
     "--spectrum-spacing-200",
     "--spectrum-spacing-300",
diff --git a/components/toast/index.css b/components/toast/index.css
index 3d4a0b83433..82efed98be5 100644
--- a/components/toast/index.css
+++ b/components/toast/index.css
@@ -12,47 +12,41 @@
  */
 
 .spectrum-Toast {
-	/* Hardcoded variables */
+	/* Font */
+	--spectrum-toast-font-family: var(--spectrum-sans-font-family-stack);
+	--spectrum-toast-font-style: var(--spectrum-default-font-style);
+	--spectrum-toast-font-size: var(--spectrum-font-size-100);
 	--spectrum-toast-font-weight: var(--spectrum-regular-font-weight);
 
 	/* Size */
-	--spectrum-toast-font-family: var(--spectrum-default-font-family);
-	--spectrum-toast-font-style: var(--spectrum-default-font-style);
-	--spectrum-toast-font-size: var(--spectrum-font-size-100);
 	--spectrum-toast-corner-radius: var(--spectrum-corner-radius-800);
-	--spectrum-toast-block-size: var(--spectrum-toast-height);
 	--spectrum-toast-icon-block-size: var(--spectrum-workflow-icon-size-100);
+	--spectrum-toast-min-block-size: var(--spectrum-toast-height);
 	--spectrum-toast-max-inline-size: var(--spectrum-toast-maximum-width);
 
 	--spectrum-toast-line-height: var(--spectrum-line-height-100);
 	--spectrum-toast-line-height-cjk: var(--spectrum-cjk-line-height-100);
 
 	/* Space */
-	--spectrum-toast-spacing-close-button-to-edge: var(--spectrum-spacing-100);
+	--spectrum-toast-spacing-toast-to-edge: var(--spectrum-spacing-300);
+	--spectrum-toast-spacing-close-button-to-end-edge: var(--spectrum-spacing-100);
 	--spectrum-toast-spacing-text-to-close-button: var(--spectrum-spacing-300);
-	--spectrum-toast-spacing-text-to-action-button-horizontal: var(--spectrum-spacing-400);
+	--spectrum-toast-spacing-text-to-button-vertical: var(--spectrum-spacing-100);
+	--spectrum-toast-spacing-text-to-button-horizontal: var(--spectrum-spacing-400);
+	--spectrum-toast-spacing-button-to-close-button-horizontal: var(--spectrum-spacing-200);
 	--spectrum-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-300);
-
 	--spectrum-toast-spacing-start-edge-to-text-and-icon: var(--spectrum-spacing-300);
-	--spectrum-toast-spacing-action-button-to-close-button: var(--spectrum-spacing-200);
-
-	--spectrum-toast-spacing-top-edge-to-close-button: var(--spectrum-spacing-200);
-	--spectrum-toast-spacing-bottom-edge-to-close-button: var(--spectrum-spacing-200);
-
 	--spectrum-toast-spacing-top-edge-to-icon: var(--spectrum-toast-top-to-workflow-icon);
-
-	--spectrum-toast-spacing-block-start: var(--spectrum-spacing-200);
-	--spectrum-toast-spacing-block-end: var(--spectrum-spacing-200);
-
 	--spectrum-toast-spacing-top-edge-to-text: var(--spectrum-toast-top-to-text);
 	--spectrum-toast-spacing-bottom-edge-to-text: var(--spectrum-toast-bottom-to-text);
+	--spectrum-toast-spacing-top-edge-to-button: var(--spectrum-spacing-200);
+	--spectrum-toast-spacing-bottom-edge-to-button: var(--spectrum-spacing-200);
 
 	/* Color */
 	--spectrum-toast-background-color-default: var(--spectrum-neutral-subdued-background-color-default);
 	--spectrum-toast-negative-background-color-default: var(--spectrum-negative-background-color-default);
 	--spectrum-toast-positive-background-color-default: var(--spectrum-positive-background-color-default);
 	--spectrum-toast-informative-background-color-default: var(--spectrum-informative-background-color-default);
-
 	--spectrum-toast-text-and-icon-color: var(--spectrum-white);
 
 	--mod-closebutton-icon-color-default: var(--mod-toast-text-and-icon-color, var(--spectrum-toast-text-and-icon-color));
@@ -63,7 +57,9 @@
 	display: inline-flex;
 	flex-direction: row;
 	align-items: stretch;
-	min-block-size: var(--mod-toast-block-size, var(--spectrum-toast-block-size));
+	margin: var(--mod-toast-spacing-toast-to-edge, var(--spectrum-toast-spacing-toast-to-edge));
+	min-block-size: var(--mod-toast-min-block-size, var(--spectrum-toast-min-block-size));
+	min-inline-size: calc(var(--mod-toast-max-inline-size, var(--spectrum-toast-max-inline-size)) / 2);
 	max-inline-size: var(--mod-toast-max-inline-size, var(--spectrum-toast-max-inline-size));
 
 	border-radius: var(--mod-toast-corner-radius, var(--spectrum-toast-corner-radius));
@@ -80,6 +76,10 @@
 	background-color: var(--mod-toast-background-color-default, var(--spectrum-toast-background-color-default));
 	color: var(--mod-toast-background-color-default, var(--spectrum-toast-background-color-default));
 	overflow-wrap: anywhere;
+
+	&:not(:has(.spectrum-Button)) {
+		column-gap: var(--mod-toast-spacing-text-to-close-button, var(--spectrum-toast-spacing-text-to-close-button));
+	}
 }
 
 .spectrum-Toast--negative {
@@ -113,19 +113,12 @@
 
 .spectrum-Toast-content {
 	flex: 1 1 auto;
-	display: inline-block;
+	display: inline-flex;
 	box-sizing: border-box;
-
-	padding-block-start: calc(var(--mod-toast-spacing-top-edge-to-text, var(--spectrum-toast-spacing-top-edge-to-text)) - var(--mod-toast-spacing-block-start, var(--spectrum-toast-spacing-block-start)));
-	padding-block-end: calc(var(--mod-toast-spacing-bottom-edge-to-text, var(--spectrum-toast-spacing-bottom-edge-to-text)) - var(--mod-toast-spacing-block-end, var(--spectrum-toast-spacing-block-end)));
-
-	padding-inline-start: 0;
-
 	line-height: var(--mod-toast-line-height, var(--spectrum-toast-line-height));
-
 	text-align: start;
-
 	color: var(--mod-toast-text-and-icon-color, var(--spectrum-toast-text-and-icon-color));
+	padding-inline-start: 0;
 
 	&:lang(ja),
 	&:lang(zh),
@@ -134,29 +127,16 @@
 	}
 }
 
-.spectrum-Toast-buttons {
-	display: flex;
-	flex: 0 0 auto;
-	align-items: flex-start;
-
-	margin-block-start: var(--mod-toast-spacing-top-edge-to-close-button, var(--spectrum-toast-spacing-top-edge-to-close-button));
-	margin-block-end: var(--mod-toast-spacing-bottom-edge-to-close-button, var(--spectrum-toast-spacing-bottom-edge-to-close-button));
-	padding-inline-start: var(--mod-toast-spacing-text-to-close-button, var(--spectrum-toast-spacing-text-to-close-button));
-	padding-inline-end: var(--mod-toast-spacing-close-button-to-edge, var(--spectrum-toast-spacing-close-button-to-edge));
+.spectrum-CloseButton {
+	margin-block-start: var(--mod-toast-spacing-top-edge-to-text, var(--spectrum-toast-spacing-top-edge-to-text));
+	margin-block-end: var(--mod-toast-spacing-top-edge-to-text, var(--spectrum-toast-spacing-top-edge-to-text));
+	margin-inline-end: var(--mod-toast-spacing-close-button-to-end-edge, var(--spectrum-toast-spacing-close-button-to-end-edge));
 
-	.spectrum-CloseButton {
-		align-self: flex-start;
-	}
+	flex-shrink: 0;
 }
 
 .spectrum-Toast .spectrum-Button {
-	margin-inline-start: var(--mod-toast-spacing-text-to-action-button-horizontal, var(--spectrum-toast-spacing-text-to-action-button-horizontal));
-}
-
-.spectrum-Toast:has(.spectrum-Button) {
-	.spectrum-Toast-buttons {
-		padding-inline-start: var(--mod-toast-spacing-action-button-to-close-button, var(--spectrum-toast-spacing-action-button-to-close-button));
-	}
+	margin-inline-end: var(--mod-toast-spacing-button-to-close-button-horizontal, var(--spectrum-toast-spacing-button-to-close-button-horizontal));
 }
 
 .spectrum-Toast-body {
@@ -165,12 +145,8 @@
 	align-items: center;
 	flex: 1 1 auto;
 	align-self: center;
-	justify-content: flex-end;
-
-	padding-block-start: var(--mod-toast-spacing-block-start, var(--spectrum-toast-spacing-block-start));
-	padding-block-end: var(--mod-toast-spacing-block-end, var(--spectrum-toast-spacing-block-end));
-
-	& + .spectrum-Toast-buttons {
-		padding-inline-start: var(--mod-toast-spacing-close-button-to-edge, var(--spectrum-toast-spacing-close-button-to-edge));
-	}
+	column-gap: var(--mod-toast-spacing-text-to-button-horizontal, var(--spectrum-toast-spacing-text-to-button-horizontal));
+	row-gap: var(--mod-toast-spacing-text-to-button-vertical, var(--spectrum-toast-spacing-text-to-button-vertical));
+	padding-block-start: var(--mod-toast-spacing-top-edge-to-text, var(--spectrum-toast-spacing-top-edge-to-text));
+	padding-block-end: var(--mod-toast-spacing-bottom-edge-to-text, var(--spectrum-toast-spacing-bottom-edge-to-text));
 }
diff --git a/components/toast/stories/template.js b/components/toast/stories/template.js
index 2f4f97715fd..fa0089f028f 100644
--- a/components/toast/stories/template.js
+++ b/components/toast/stories/template.js
@@ -13,6 +13,7 @@ import "../index.css";
 export const Template = ({
 	rootClass = "spectrum-Toast",
 	message,
+	hasButton,
 	inlineButtonLabel,
 	variant,
 	customClasses = [],
@@ -44,7 +45,7 @@ export const Template = ({
 			)}
 			<div class="${rootClass}-body">
 				<div class="${rootClass}-content">${message}</div>
-				${when(inlineButtonLabel, () =>
+				${when(hasButton && inlineButtonLabel, () =>
 					Button({
 						variant: "secondary",
 						size: "m",
@@ -54,13 +55,11 @@ export const Template = ({
 					}, context)
 				)}
 			</div>
-			<div class="${rootClass}-buttons">
-				${CloseButton({
-					size: "m",
-					staticColor: "white",
-					onclick,
-				}, context)}
-			</div>
+			${CloseButton({
+				size: "m",
+				staticColor: "white",
+				onclick,
+			}, context)}
 		</div>
 	`;
 };
diff --git a/components/toast/stories/toast.stories.js b/components/toast/stories/toast.stories.js
index 9271ef70225..0a02d04acbd 100644
--- a/components/toast/stories/toast.stories.js
+++ b/components/toast/stories/toast.stories.js
@@ -30,6 +30,15 @@ export default {
 			},
 			control: "text",
 		},
+		hasButton: {
+			name: "Button",
+			type: { name: "boolean" },
+			table: {
+				type: { summary: "boolean" },
+				category: "Component",
+			},
+			control: "boolean",
+		},
 		inlineButtonLabel: {
 			name: "Inline button label",
 			description: "Label for the inline button; if blank, no button is shown",
@@ -39,6 +48,7 @@ export default {
 				type: { summary: "string" },
 			},
 			control: "text",
+			if: { arg: "hasButton", truthy: true },
 		},
 	},
 	args: {
@@ -64,6 +74,7 @@ export default {
 export const Default = ToastGroup.bind({});
 Default.args = {
 	message: "File has been archived",
+	hasButton: true,
 	inlineButtonLabel: "Undo",
 	variant: "neutral"
 };
diff --git a/components/toast/stories/toast.test.js b/components/toast/stories/toast.test.js
index 7e784b44980..b21073eb57d 100644
--- a/components/toast/stories/toast.test.js
+++ b/components/toast/stories/toast.test.js
@@ -35,13 +35,13 @@ export const ToastGroup = Variants({
 			testHeading: "Wrapping without button",
 			variant: "info",
 			message: "A new version of Lightroom Classic is now available. Use the Update button below to start using the new version.",
-			inlineButtonLabel: undefined
+			hasButton: false
 		},
 		{
 			testHeading: "Short message, no required action",
 			variant: "neutral",
 			message: "The toast is done.",
-			inlineButtonLabel: undefined
+			hasButton: false
 		},
 	]
 });

From fe1f2cb3139f3c631cb232d04a64b73a29153a3a Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <cdransfeldt@adobe.com>
Date: Mon, 14 Apr 2025 15:56:14 -0700
Subject: [PATCH 03/11] chore(toast): remove unused properties

---
 components/toast/dist/metadata.json | 2 --
 components/toast/index.css          | 2 --
 2 files changed, 4 deletions(-)

diff --git a/components/toast/dist/metadata.json b/components/toast/dist/metadata.json
index 8c194890679..a2682d907d0 100644
--- a/components/toast/dist/metadata.json
+++ b/components/toast/dist/metadata.json
@@ -62,7 +62,6 @@
     "--spectrum-toast-min-block-size",
     "--spectrum-toast-negative-background-color-default",
     "--spectrum-toast-positive-background-color-default",
-    "--spectrum-toast-spacing-bottom-edge-to-button",
     "--spectrum-toast-spacing-bottom-edge-to-text",
     "--spectrum-toast-spacing-button-to-close-button-horizontal",
     "--spectrum-toast-spacing-close-button-to-end-edge",
@@ -72,7 +71,6 @@
     "--spectrum-toast-spacing-text-to-button-vertical",
     "--spectrum-toast-spacing-text-to-close-button",
     "--spectrum-toast-spacing-toast-to-edge",
-    "--spectrum-toast-spacing-top-edge-to-button",
     "--spectrum-toast-spacing-top-edge-to-icon",
     "--spectrum-toast-spacing-top-edge-to-text",
     "--spectrum-toast-text-and-icon-color",
diff --git a/components/toast/index.css b/components/toast/index.css
index 82efed98be5..8c3f00deba4 100644
--- a/components/toast/index.css
+++ b/components/toast/index.css
@@ -39,8 +39,6 @@
 	--spectrum-toast-spacing-top-edge-to-icon: var(--spectrum-toast-top-to-workflow-icon);
 	--spectrum-toast-spacing-top-edge-to-text: var(--spectrum-toast-top-to-text);
 	--spectrum-toast-spacing-bottom-edge-to-text: var(--spectrum-toast-bottom-to-text);
-	--spectrum-toast-spacing-top-edge-to-button: var(--spectrum-spacing-200);
-	--spectrum-toast-spacing-bottom-edge-to-button: var(--spectrum-spacing-200);
 
 	/* Color */
 	--spectrum-toast-background-color-default: var(--spectrum-neutral-subdued-background-color-default);

From cf674bb3ec347739ecdbebe9c0bad04276c0eacd Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <cdransfeldt@adobe.com>
Date: Mon, 14 Apr 2025 16:46:22 -0700
Subject: [PATCH 04/11] chore(toast): additional spacing refinements and
 explanatory comments

---
 components/toast/index.css | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/components/toast/index.css b/components/toast/index.css
index 8c3f00deba4..9c53cc09572 100644
--- a/components/toast/index.css
+++ b/components/toast/index.css
@@ -102,7 +102,9 @@
 	flex-grow: 0;
 
 	block-size: var(--mod-toast-icon-block-size, var(--spectrum-toast-icon-block-size));
-	margin-block-start: var(--mod-toast-spacing-top-edge-to-icon, var(--spectrum-toast-spacing-top-edge-to-icon));
+
+	/* Positions toast icon based on the difference between half the toast interior spacing to allow for consistent alignment with label when inline and wrapped */
+	margin-block: calc(var(--mod-toast-spacing-top-edge-to-icon, var(--spectrum-toast-spacing-top-edge-to-icon)) + calc(var(--spectrum-toast-top-to-text) / 2));
 	margin-inline-end: var(--mod-toast-spacing-icon-to-text, var(--spectrum-toast-spacing-icon-to-text));
 	margin-inline-start: 0;
 
@@ -126,8 +128,8 @@
 }
 
 .spectrum-CloseButton {
-	margin-block-start: var(--mod-toast-spacing-top-edge-to-text, var(--spectrum-toast-spacing-top-edge-to-text));
-	margin-block-end: var(--mod-toast-spacing-top-edge-to-text, var(--spectrum-toast-spacing-top-edge-to-text));
+	/* Adds 2px to bring close button in vertical alignment with button which has a 2px border */
+	margin-block: calc(var(--mod-toast-spacing-top-edge-to-text, var(--spectrum-toast-spacing-top-edge-to-text)) + 2px);
 	margin-inline-end: var(--mod-toast-spacing-close-button-to-end-edge, var(--spectrum-toast-spacing-close-button-to-end-edge));
 
 	flex-shrink: 0;

From b8df74cccc1686f84fb383a42c5d571a8a1ec046 Mon Sep 17 00:00:00 2001
From: Marissa Huysentruyt <marissa.huysentruyt@heysparkbox.com>
Date: Fri, 18 Apr 2025 11:06:38 -0400
Subject: [PATCH 05/11] marissa wip

---
 components/toast/stories/template.js      | 33 ++++++++++++-----------
 components/toast/stories/toast.stories.js |  2 +-
 2 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/components/toast/stories/template.js b/components/toast/stories/template.js
index fa0089f028f..779f3632bd9 100644
--- a/components/toast/stories/template.js
+++ b/components/toast/stories/template.js
@@ -35,28 +35,31 @@ export const Template = ({
 			id=${ifDefined(id)}
 			style=${styleMap(customStyles)}
 		>
-			${when(variant, () =>
-				Icon({
-					iconName,
-					setName: "workflow",
-					size: "m",
-					customClasses: [`${rootClass}-typeIcon`],
-				}, context)
-			)}
 			<div class="${rootClass}-body">
-				<div class="${rootClass}-content">${message}</div>
-				${when(hasButton && inlineButtonLabel, () =>
-					Button({
-						variant: "secondary",
+				${when(variant, () =>
+					Icon({
+						iconName,
+						setName: "workflow",
 						size: "m",
-						staticColor: "white",
-						treatment: "outline",
-						label: inlineButtonLabel,
+						customClasses: [`${rootClass}-typeIcon`],
 					}, context)
 				)}
+				<div class="${rootClass}-content">
+					<p class="spectrum-Toast-text">${message}</p>
+					${when(hasButton && inlineButtonLabel, () =>
+						Button({
+							variant: "secondary",
+							size: "m",
+							staticColor: "white",
+							treatment: "outline",
+							label: inlineButtonLabel,
+						}, context)
+					)}
+				</div>
 			</div>
 			${CloseButton({
 				size: "m",
+				iconSize: "large",
 				staticColor: "white",
 				onclick,
 			}, context)}
diff --git a/components/toast/stories/toast.stories.js b/components/toast/stories/toast.stories.js
index 0a02d04acbd..d8f003f4d73 100644
--- a/components/toast/stories/toast.stories.js
+++ b/components/toast/stories/toast.stories.js
@@ -153,7 +153,7 @@ Wrapping.parameters = {
 };
 
 /**
- * A toast can have up to one action: [a static white, secondary, outline button](?path=/docs/components-button--docs#static-white---secondary). This label should be kept concise, and it should only be used when there’s a direct action available that is related to the toast text.
+ * A toast can have up to one button: [a static white, secondary, outline button](?path=/docs/components-button--docs#static-white---secondary). That button's label should be kept concise, and it should only be used when there’s a direct action available that is related to the toast text.
 */
 
 export const Action = ActionTemplate.bind({});

From f6c246e9df7812fb0049cac8634adf42487b9dde Mon Sep 17 00:00:00 2001
From: Marissa Huysentruyt <marissa.huysentruyt@heysparkbox.com>
Date: Fri, 18 Apr 2025 12:25:42 -0400
Subject: [PATCH 06/11] styles wip

---
 components/toast/dist/metadata.json  |  8 +---
 components/toast/index.css           | 64 ++++++++++++++--------------
 components/toast/stories/template.js | 30 ++++++-------
 3 files changed, 48 insertions(+), 54 deletions(-)

diff --git a/components/toast/dist/metadata.json b/components/toast/dist/metadata.json
index a2682d907d0..9f1d40c1b9d 100644
--- a/components/toast/dist/metadata.json
+++ b/components/toast/dist/metadata.json
@@ -6,13 +6,13 @@
     ".spectrum-Toast .spectrum-Button",
     ".spectrum-Toast--info",
     ".spectrum-Toast--negative",
-    ".spectrum-Toast--negative .spectrum-Toast-closeButton:focus-visible:not(:active)",
     ".spectrum-Toast--positive",
     ".spectrum-Toast-body",
     ".spectrum-Toast-content",
     ".spectrum-Toast-content:lang(ja)",
     ".spectrum-Toast-content:lang(ko)",
     ".spectrum-Toast-content:lang(zh)",
+    ".spectrum-Toast-text",
     ".spectrum-Toast-typeIcon",
     ".spectrum-Toast:not(:has(.spectrum-Button))"
   ],
@@ -31,17 +31,13 @@
     "--mod-toast-min-block-size",
     "--mod-toast-negative-background-color-default",
     "--mod-toast-positive-background-color-default",
-    "--mod-toast-spacing-bottom-edge-to-text",
     "--mod-toast-spacing-button-to-close-button-horizontal",
     "--mod-toast-spacing-close-button-to-end-edge",
     "--mod-toast-spacing-icon-to-text",
     "--mod-toast-spacing-start-edge-to-text-and-icon",
-    "--mod-toast-spacing-text-to-button-horizontal",
     "--mod-toast-spacing-text-to-button-vertical",
     "--mod-toast-spacing-text-to-close-button",
     "--mod-toast-spacing-toast-to-edge",
-    "--mod-toast-spacing-top-edge-to-icon",
-    "--mod-toast-spacing-top-edge-to-text",
     "--mod-toast-text-and-icon-color"
   ],
   "component": [
@@ -65,10 +61,10 @@
     "--spectrum-toast-spacing-bottom-edge-to-text",
     "--spectrum-toast-spacing-button-to-close-button-horizontal",
     "--spectrum-toast-spacing-close-button-to-end-edge",
+    "--spectrum-toast-spacing-edge-to-button-vertical",
     "--spectrum-toast-spacing-icon-to-text",
     "--spectrum-toast-spacing-start-edge-to-text-and-icon",
     "--spectrum-toast-spacing-text-to-button-horizontal",
-    "--spectrum-toast-spacing-text-to-button-vertical",
     "--spectrum-toast-spacing-text-to-close-button",
     "--spectrum-toast-spacing-toast-to-edge",
     "--spectrum-toast-spacing-top-edge-to-icon",
diff --git a/components/toast/index.css b/components/toast/index.css
index 9c53cc09572..6de3628f3c7 100644
--- a/components/toast/index.css
+++ b/components/toast/index.css
@@ -29,9 +29,10 @@
 
 	/* Space */
 	--spectrum-toast-spacing-toast-to-edge: var(--spectrum-spacing-300);
+	--spectrum-toast-spacing-block-close-button: var(--spectrum-spacing-200);
 	--spectrum-toast-spacing-close-button-to-end-edge: var(--spectrum-spacing-100);
 	--spectrum-toast-spacing-text-to-close-button: var(--spectrum-spacing-300);
-	--spectrum-toast-spacing-text-to-button-vertical: var(--spectrum-spacing-100);
+	--spectrum-toast-spacing-edge-to-button-vertical: var(--spectrum-spacing-200);
 	--spectrum-toast-spacing-text-to-button-horizontal: var(--spectrum-spacing-400);
 	--spectrum-toast-spacing-button-to-close-button-horizontal: var(--spectrum-spacing-200);
 	--spectrum-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-300);
@@ -57,7 +58,6 @@
 	align-items: stretch;
 	margin: var(--mod-toast-spacing-toast-to-edge, var(--spectrum-toast-spacing-toast-to-edge));
 	min-block-size: var(--mod-toast-min-block-size, var(--spectrum-toast-min-block-size));
-	min-inline-size: calc(var(--mod-toast-max-inline-size, var(--spectrum-toast-max-inline-size)) / 2);
 	max-inline-size: var(--mod-toast-max-inline-size, var(--spectrum-toast-max-inline-size));
 
 	border-radius: var(--mod-toast-corner-radius, var(--spectrum-toast-corner-radius));
@@ -72,7 +72,7 @@
 	-webkit-font-smoothing: antialiased;
 
 	background-color: var(--mod-toast-background-color-default, var(--spectrum-toast-background-color-default));
-	color: var(--mod-toast-background-color-default, var(--spectrum-toast-background-color-default));
+	color: var(--mod-toast-text-and-icon-color, var(--spectrum-toast-text-and-icon-color));
 	overflow-wrap: anywhere;
 
 	&:not(:has(.spectrum-Button)) {
@@ -82,11 +82,6 @@
 
 .spectrum-Toast--negative {
 	background-color: var(--mod-toast-negative-background-color-default, var(--spectrum-toast-negative-background-color-default));
-	color: var(--mod-toast-negative-background-color-default, var(--spectrum-toast-negative-background-color-default));
-
-	.spectrum-Toast-closeButton:focus-visible:not(:active) {
-		color: var(--mod-toast-negative-background-color-default, var(--spectrum-toast-negative-background-color-default));
-	}
 }
 
 .spectrum-Toast--info {
@@ -103,22 +98,40 @@
 
 	block-size: var(--mod-toast-icon-block-size, var(--spectrum-toast-icon-block-size));
 
-	/* Positions toast icon based on the difference between half the toast interior spacing to allow for consistent alignment with label when inline and wrapped */
-	margin-block: calc(var(--mod-toast-spacing-top-edge-to-icon, var(--spectrum-toast-spacing-top-edge-to-icon)) + calc(var(--spectrum-toast-top-to-text) / 2));
+	/* Similar to the spectrum-Toast-text calc, now the icon only has an extra margin to add the difference between spacing-200 (which is now around the entire toast) and the requested toast-top-to-workflow-icon token. */
+	margin-block-start: calc(var(--spectrum-toast-spacing-top-edge-to-icon) - var(--spectrum-toast-spacing-edge-to-button-vertical));
 	margin-inline-end: var(--mod-toast-spacing-icon-to-text, var(--spectrum-toast-spacing-icon-to-text));
 	margin-inline-start: 0;
+}
+
+.spectrum-CloseButton {
+	margin-block: var(--mod--spectrum-toast-spacing-block-close-button, var(--spectrum-toast-spacing-block-close-button));
+	margin-inline-end: var(--mod-toast-spacing-close-button-to-end-edge, var(--spectrum-toast-spacing-close-button-to-end-edge));
+	flex-shrink: 0;
+}
+
+.spectrum-Toast .spectrum-Button {
+	margin-inline-end: var(--mod-toast-spacing-button-to-close-button-horizontal, var(--spectrum-toast-spacing-button-to-close-button-horizontal));
+}
+
+.spectrum-Toast-body {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: flex-end;
+	flex: 1 1 auto;
+	padding-block: var(--mod-toast-spacing-text-to-button-vertical, var(--spectrum-toast-spacing-edge-to-button-vertical));
+	column-gap: var(--spectrum-toast-spacing-text-to-button-horizontal);
 
-	color: var(--mod-toast-text-and-icon-color, var(--spectrum-toast-text-and-icon-color));
 }
 
 .spectrum-Toast-content {
 	flex: 1 1 auto;
 	display: inline-flex;
+	align-items: start;
 	box-sizing: border-box;
 	line-height: var(--mod-toast-line-height, var(--spectrum-toast-line-height));
 	text-align: start;
 	color: var(--mod-toast-text-and-icon-color, var(--spectrum-toast-text-and-icon-color));
-	padding-inline-start: 0;
 
 	&:lang(ja),
 	&:lang(zh),
@@ -127,26 +140,11 @@
 	}
 }
 
-.spectrum-CloseButton {
-	/* Adds 2px to bring close button in vertical alignment with button which has a 2px border */
-	margin-block: calc(var(--mod-toast-spacing-top-edge-to-text, var(--spectrum-toast-spacing-top-edge-to-text)) + 2px);
-	margin-inline-end: var(--mod-toast-spacing-close-button-to-end-edge, var(--spectrum-toast-spacing-close-button-to-end-edge));
-
-	flex-shrink: 0;
-}
-
-.spectrum-Toast .spectrum-Button {
-	margin-inline-end: var(--mod-toast-spacing-button-to-close-button-horizontal, var(--spectrum-toast-spacing-button-to-close-button-horizontal));
-}
+.spectrum-Toast-text {
+	/* the toast itself has spacing-200 spacing on the top and bottom. That ensures that the spectrum-Button has the requested spacing-200 token, but poses a problem for the text, which is smaller in height than the button. So this padding for this text is difference between the requested toast-top-to-text/toast-bottom-to-text tokens and the spacing-200.
 
-.spectrum-Toast-body {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	flex: 1 1 auto;
-	align-self: center;
-	column-gap: var(--mod-toast-spacing-text-to-button-horizontal, var(--spectrum-toast-spacing-text-to-button-horizontal));
-	row-gap: var(--mod-toast-spacing-text-to-button-vertical, var(--spectrum-toast-spacing-text-to-button-vertical));
-	padding-block-start: var(--mod-toast-spacing-top-edge-to-text, var(--spectrum-toast-spacing-top-edge-to-text));
-	padding-block-end: var(--mod-toast-spacing-bottom-edge-to-text, var(--spectrum-toast-spacing-bottom-edge-to-text));
+	This padding + the spacing-200 should equal the requested toast-top-to-text/toast-bottom-to-text tokens. */
+	padding-block-start: calc(var(--spectrum-toast-spacing-top-edge-to-text) - var(--spectrum-toast-spacing-edge-to-button-vertical));
+	padding-block-end: calc(var(--spectrum-toast-spacing-bottom-edge-to-text) - var(--spectrum-toast-spacing-edge-to-button-vertical));
+	margin: 0;
 }
diff --git a/components/toast/stories/template.js b/components/toast/stories/template.js
index 779f3632bd9..33c65c376d0 100644
--- a/components/toast/stories/template.js
+++ b/components/toast/stories/template.js
@@ -36,26 +36,26 @@ export const Template = ({
 			style=${styleMap(customStyles)}
 		>
 			<div class="${rootClass}-body">
-				${when(variant, () =>
-					Icon({
-						iconName,
-						setName: "workflow",
-						size: "m",
-						customClasses: [`${rootClass}-typeIcon`],
-					}, context)
-				)}
 				<div class="${rootClass}-content">
-					<p class="spectrum-Toast-text">${message}</p>
-					${when(hasButton && inlineButtonLabel, () =>
-						Button({
-							variant: "secondary",
+					${when(variant, () =>
+						Icon({
+							iconName,
+							setName: "workflow",
 							size: "m",
-							staticColor: "white",
-							treatment: "outline",
-							label: inlineButtonLabel,
+							customClasses: [`${rootClass}-typeIcon`],
 						}, context)
 					)}
+					<p class="spectrum-Toast-text">${message}</p>
 				</div>
+				${when(hasButton && inlineButtonLabel, () =>
+					Button({
+						variant: "secondary",
+						size: "m",
+						staticColor: "white",
+						treatment: "outline",
+						label: inlineButtonLabel,
+					}, context)
+				)}
 			</div>
 			${CloseButton({
 				size: "m",

From a633da40913033f297c97129c53af2a4efac4c52 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <cdransfeldt@adobe.com>
Date: Thu, 17 Apr 2025 09:27:41 -0700
Subject: [PATCH 07/11] chore(toast): add .spectrum-Toast--noButton for SWC use

---
 components/toast/dist/metadata.json | 1 +
 components/toast/index.css          | 1 +
 2 files changed, 2 insertions(+)

diff --git a/components/toast/dist/metadata.json b/components/toast/dist/metadata.json
index 9f1d40c1b9d..0225c218538 100644
--- a/components/toast/dist/metadata.json
+++ b/components/toast/dist/metadata.json
@@ -14,6 +14,7 @@
     ".spectrum-Toast-content:lang(zh)",
     ".spectrum-Toast-text",
     ".spectrum-Toast-typeIcon",
+    ".spectrum-Toast.spectrum-Toast--noButton",
     ".spectrum-Toast:not(:has(.spectrum-Button))"
   ],
   "modifiers": [
diff --git a/components/toast/index.css b/components/toast/index.css
index 6de3628f3c7..47b586ee53f 100644
--- a/components/toast/index.css
+++ b/components/toast/index.css
@@ -75,6 +75,7 @@
 	color: var(--mod-toast-text-and-icon-color, var(--spectrum-toast-text-and-icon-color));
 	overflow-wrap: anywhere;
 
+	&.spectrum-Toast--noButton,
 	&:not(:has(.spectrum-Button)) {
 		column-gap: var(--mod-toast-spacing-text-to-close-button, var(--spectrum-toast-spacing-text-to-close-button));
 	}

From c8a36af6d3956400c597e4c0c6f731db44bcf98e Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <cdransfeldt@adobe.com>
Date: Fri, 18 Apr 2025 09:19:48 -0700
Subject: [PATCH 08/11] fix(toast): update toast test case message w/out button

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

diff --git a/components/toast/stories/toast.test.js b/components/toast/stories/toast.test.js
index b21073eb57d..ef23bab9eb1 100644
--- a/components/toast/stories/toast.test.js
+++ b/components/toast/stories/toast.test.js
@@ -34,7 +34,7 @@ export const ToastGroup = Variants({
 		{
 			testHeading: "Wrapping without button",
 			variant: "info",
-			message: "A new version of Lightroom Classic is now available. Use the Update button below to start using the new version.",
+			message: "A new version of Lightroom Classic is now available.",
 			hasButton: false
 		},
 		{

From 899a1eaf8fb660c8da3e09f4b14568f6c83b3780 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <cdransfeldt@adobe.com>
Date: Fri, 18 Apr 2025 09:21:14 -0700
Subject: [PATCH 09/11] fix(toast): update toast has button story

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

diff --git a/components/toast/stories/toast.stories.js b/components/toast/stories/toast.stories.js
index d8f003f4d73..2a63b88c875 100644
--- a/components/toast/stories/toast.stories.js
+++ b/components/toast/stories/toast.stories.js
@@ -31,7 +31,8 @@ export default {
 			control: "text",
 		},
 		hasButton: {
-			name: "Button",
+			name: "Has button",
+			description: "Adds a button that is directly related to the toast's message.",
 			type: { name: "boolean" },
 			table: {
 				type: { summary: "boolean" },

From 5a807ef9724a145809c79076787eb001cdf378ab Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <cdransfeldt@adobe.com>
Date: Fri, 18 Apr 2025 10:14:37 -0700
Subject: [PATCH 10/11] fix(toast): scope close button styles to toast

---
 components/toast/dist/metadata.json |  4 +++-
 components/toast/index.css          | 13 ++++++-------
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/components/toast/dist/metadata.json b/components/toast/dist/metadata.json
index 0225c218538..5f13f6ba2d7 100644
--- a/components/toast/dist/metadata.json
+++ b/components/toast/dist/metadata.json
@@ -1,9 +1,9 @@
 {
   "sourceFile": "index.css",
   "selectors": [
-    ".spectrum-CloseButton",
     ".spectrum-Toast",
     ".spectrum-Toast .spectrum-Button",
+    ".spectrum-Toast .spectrum-CloseButton",
     ".spectrum-Toast--info",
     ".spectrum-Toast--negative",
     ".spectrum-Toast--positive",
@@ -18,6 +18,7 @@
     ".spectrum-Toast:not(:has(.spectrum-Button))"
   ],
   "modifiers": [
+    "--mod--spectrum-toast-spacing-block-close-button",
     "--mod-toast-background-color-default",
     "--mod-toast-corner-radius",
     "--mod-toast-font-family",
@@ -59,6 +60,7 @@
     "--spectrum-toast-min-block-size",
     "--spectrum-toast-negative-background-color-default",
     "--spectrum-toast-positive-background-color-default",
+    "--spectrum-toast-spacing-block-close-button",
     "--spectrum-toast-spacing-bottom-edge-to-text",
     "--spectrum-toast-spacing-button-to-close-button-horizontal",
     "--spectrum-toast-spacing-close-button-to-end-edge",
diff --git a/components/toast/index.css b/components/toast/index.css
index 47b586ee53f..93909ae6df6 100644
--- a/components/toast/index.css
+++ b/components/toast/index.css
@@ -79,6 +79,12 @@
 	&:not(:has(.spectrum-Button)) {
 		column-gap: var(--mod-toast-spacing-text-to-close-button, var(--spectrum-toast-spacing-text-to-close-button));
 	}
+
+	.spectrum-CloseButton {
+		margin-block: var(--mod--spectrum-toast-spacing-block-close-button, var(--spectrum-toast-spacing-block-close-button));
+		margin-inline-end: var(--mod-toast-spacing-close-button-to-end-edge, var(--spectrum-toast-spacing-close-button-to-end-edge));
+		flex-shrink: 0;
+	}
 }
 
 .spectrum-Toast--negative {
@@ -105,12 +111,6 @@
 	margin-inline-start: 0;
 }
 
-.spectrum-CloseButton {
-	margin-block: var(--mod--spectrum-toast-spacing-block-close-button, var(--spectrum-toast-spacing-block-close-button));
-	margin-inline-end: var(--mod-toast-spacing-close-button-to-end-edge, var(--spectrum-toast-spacing-close-button-to-end-edge));
-	flex-shrink: 0;
-}
-
 .spectrum-Toast .spectrum-Button {
 	margin-inline-end: var(--mod-toast-spacing-button-to-close-button-horizontal, var(--spectrum-toast-spacing-button-to-close-button-horizontal));
 }
@@ -122,7 +122,6 @@
 	flex: 1 1 auto;
 	padding-block: var(--mod-toast-spacing-text-to-button-vertical, var(--spectrum-toast-spacing-edge-to-button-vertical));
 	column-gap: var(--spectrum-toast-spacing-text-to-button-horizontal);
-
 }
 
 .spectrum-Toast-content {

From 1641138344fe1e51ecfdbecc9b89404c82e20ba2 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <cdransfeldt@adobe.com>
Date: Mon, 21 Apr 2025 12:52:11 -0700
Subject: [PATCH 11/11] fix(toast): clean up a few typos

---
 components/toast/dist/metadata.json | 2 +-
 components/toast/index.css          | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/toast/dist/metadata.json b/components/toast/dist/metadata.json
index 5f13f6ba2d7..50e0b73d5b1 100644
--- a/components/toast/dist/metadata.json
+++ b/components/toast/dist/metadata.json
@@ -18,7 +18,6 @@
     ".spectrum-Toast:not(:has(.spectrum-Button))"
   ],
   "modifiers": [
-    "--mod--spectrum-toast-spacing-block-close-button",
     "--mod-toast-background-color-default",
     "--mod-toast-corner-radius",
     "--mod-toast-font-family",
@@ -33,6 +32,7 @@
     "--mod-toast-min-block-size",
     "--mod-toast-negative-background-color-default",
     "--mod-toast-positive-background-color-default",
+    "--mod-toast-spacing-block-close-button",
     "--mod-toast-spacing-button-to-close-button-horizontal",
     "--mod-toast-spacing-close-button-to-end-edge",
     "--mod-toast-spacing-icon-to-text",
diff --git a/components/toast/index.css b/components/toast/index.css
index 93909ae6df6..1072f5a2cb7 100644
--- a/components/toast/index.css
+++ b/components/toast/index.css
@@ -81,7 +81,7 @@
 	}
 
 	.spectrum-CloseButton {
-		margin-block: var(--mod--spectrum-toast-spacing-block-close-button, var(--spectrum-toast-spacing-block-close-button));
+		margin-block: var(--mod-toast-spacing-block-close-button, var(--spectrum-toast-spacing-block-close-button));
 		margin-inline-end: var(--mod-toast-spacing-close-button-to-end-edge, var(--spectrum-toast-spacing-close-button-to-end-edge));
 		flex-shrink: 0;
 	}
@@ -141,7 +141,7 @@
 }
 
 .spectrum-Toast-text {
-	/* the toast itself has spacing-200 spacing on the top and bottom. That ensures that the spectrum-Button has the requested spacing-200 token, but poses a problem for the text, which is smaller in height than the button. So this padding for this text is difference between the requested toast-top-to-text/toast-bottom-to-text tokens and the spacing-200.
+	/* The toast itself has spacing-200 spacing on the top and bottom. That ensures that the spectrum-Button has the requested spacing-200 token, but poses a problem for the text, which is smaller in height than the button. So this padding for this text is the difference between the requested toast-top-to-text/toast-bottom-to-text tokens and the spacing-200.
 
 	This padding + the spacing-200 should equal the requested toast-top-to-text/toast-bottom-to-text tokens. */
 	padding-block-start: calc(var(--spectrum-toast-spacing-top-edge-to-text) - var(--spectrum-toast-spacing-edge-to-button-vertical));