From 531a17b0851ac053126d131a7c055c70fdbbbdec Mon Sep 17 00:00:00 2001
From: Marissa Huysentruyt <marissa.huysentruyt@heysparkbox.com>
Date: Mon, 17 Jun 2024 10:29:32 -0400
Subject: [PATCH 1/2] feat(dialog)!: s2 standard dialog migration

* docs(dialog): dialog controls/coverage
- adds new features/behaviors such as the checkbox in the footer,
wrapping for footer/header content, being able to have close button and
button group, hasHeroImage
- removes Divider support in dialog
- adds is-hidden-story to replicate what is on main and remove most
stories from the sidebar
- adds some comments and TODOs giving context to this choice
- removes layout from control table from default argTypes
- removes hasFooter from control table for fullscreen/fullscreenTakeover
argTypes
- adds a comment to explain the custom argTypes changes for those stories
- also adds a comment about multiple conditionals for argTypes

* refactor(modal): use corner-radius-extra-large-default to match design
specs

* fix(underlay): update comment notes for spectrum-overlay-color
- also comments out a duplicated custom property and adds a TODO comment

* refactor(dialog): new css for S2 dialog
- adds some opportunities for mod properties
- fixes dismissible grid spacing between additional header content and
close button
- scope passthrough mods to spectrum-Dialog class
- add flex-direction: column to footer (this should allow the footer
content and button group to stack at small screens at smallest dialog
sizes on the mobile scale.)

* feat(dialog): rebuild mods
- lots of mods are renamed to use "standard dialog" language

* chore(dialog): create changeset

* chore(dialog): update peer deps data
- remove divider from peerDependencies and peerDependenciesMeta
- adds closebutton, checkbox and typography to peerDependenciesMeta

* chore: remove divider tests

* chore(buttongroup): add flex-wrap mod property

* chore(buttongroup): creates buttongroup changeset

* chore(buttongroup,dialog): rebuild mods

* fix(dialog): platform custom variables
- calls for --spectrum-standard-dialog-spacing-edge-to-content

* chore(tokens): create changeset for custom standard dialog token

* chore(tray): fix spelling of isDismissible arg

* fix(dialog,modal): custom styles for modal background color
- because modal was originally setting the background color of dialogs,
there was some 'antialiasing bleed through' behind the dialog. By adding
customStyles to Modal, we can set --mod-modal-background-color to
transparent and get rid of the hairline color (especially noticeable
behind a hero image in a dialog)

* docs(dialog): adds modal background color documentation

* fix(dialog): use font-stack instead of font-family
---
 .changeset/few-doors-smile.md               |   5 +
 .changeset/loud-vans-brush.md               |   5 +
 .changeset/metal-fireants-switch.md         |  52 ++
 components/buttongroup/index.css            |  28 +-
 components/buttongroup/metadata/mods.md     |   1 +
 components/dialog/index.css                 | 665 ++++++++++----------
 components/dialog/metadata/mods.md          |  52 +-
 components/dialog/package.json              |  11 +-
 components/dialog/stories/dialog.stories.js | 267 +++++++-
 components/dialog/stories/dialog.test.js    |  83 +++
 components/dialog/stories/template.js       | 192 ++++--
 components/modal/index.css                  |  25 +-
 components/modal/stories/template.js        |   4 +
 components/tray/stories/tray.stories.js     |   4 +-
 components/underlay/index.css               |  61 +-
 tokens/custom/large-vars.css                |   2 +
 tokens/custom/medium-vars.css               |   2 +
 tokens/dist/css/large-vars.css              |   2 +
 tokens/dist/css/medium-vars.css             |   2 +
 tokens/dist/index.css                       |   4 +
 yarn.lock                                   |   9 +-
 21 files changed, 1000 insertions(+), 476 deletions(-)
 create mode 100644 .changeset/few-doors-smile.md
 create mode 100644 .changeset/loud-vans-brush.md
 create mode 100644 .changeset/metal-fireants-switch.md
 create mode 100644 components/dialog/stories/dialog.test.js

diff --git a/.changeset/few-doors-smile.md b/.changeset/few-doors-smile.md
new file mode 100644
index 00000000000..872a7c98e6d
--- /dev/null
+++ b/.changeset/few-doors-smile.md
@@ -0,0 +1,5 @@
+---
+"@spectrum-css/buttongroup": patch
+---
+
+Adds a new `--mod-buttongroup-flex-wrap` custom property to leverage if a user wishes to customize the `flex-wrap` property.
diff --git a/.changeset/loud-vans-brush.md b/.changeset/loud-vans-brush.md
new file mode 100644
index 00000000000..9853d5c122e
--- /dev/null
+++ b/.changeset/loud-vans-brush.md
@@ -0,0 +1,5 @@
+---
+"@spectrum-css/tokens": patch
+---
+
+Adds `--spectrum-standard-dialog-spacing-edge-to-content` to properly adjust the spacing for desktop/mobile dialog styles.
diff --git a/.changeset/metal-fireants-switch.md b/.changeset/metal-fireants-switch.md
new file mode 100644
index 00000000000..97acf890c52
--- /dev/null
+++ b/.changeset/metal-fireants-switch.md
@@ -0,0 +1,52 @@
+---
+"@spectrum-css/dialog": major
+"@spectrum-css/modal": patch
+"@spectrum-css/underlay": patch
+---
+
+Spectrum 2 Standard Dialog Migration
+
+This is the migration for standard dialog. The Divider component is no longer supported in S2 dialogs. In addition, some new and updated tokens are in place to update dialog corner rounding, font treatments, spacing/padding, and maximum/minimum widths. There were several new elements implemented as well, including optional header and footer content, hero/cover images, checkbox and text-only options in the footer content area.
+
+The `.spectrum-Dialog--small`, `.spectrum-Dialog--medium`, and `.spectrum-Dialog--large` sizing classes were deprecated and removed from the CSS in favor of the t-shirt sizes. Additionally, the spelling of the `.spectrum-Dialog--dismissable` class was corrected to `.spectrum-Dialog--dismissible`.
+
+Mod properties are either "new," have been renamed to reflect the respective dialog language, or were removed:
+
+_New Mods_
+`--mod-standard-dialog-spacing-title-to-header-content`
+`--mod-standard-dialog-spacing-title-to-description`
+`--mod-standard-dialog-header-content-font-size`
+
+_Renamed Mods_
+`--mod-dialog-confirm-small-width` > `--mod-standard-dialog-max-width-small`
+`--mod-dialog-confirm-medium-width` > `--mod-standard-dialog-max-width`
+`--mod-dialog-confirm-large-width` > `--mod-standard-dialog-max-width-large`
+`--mod-dialog-confirm-border-radius` > `--mod-standard-dialog-border-radius`
+`--mod-dialog-confirm-description-text-size` > `--mod-standard-dialog-description-font-size`
+`--mod-dialog-confirm-description-text-line-height` > `--mod-standard-dialog-description-line-height`
+`--mod-dialog-confirm-description-text-color` > `--mod-standard-dialog-description-text-color`
+`--mod-dialog-confirm-description-font-weight` > `--mod-standard-dialog-description-font-weight`
+`--mod-dialog-heading-font-weight` > `--mod-standard-dialog-heading-font-weight`
+`--mod-dialog-confirm-title-text-line-height` > `--mod-standard-dialog-heading-line-height`
+`--mod-dialog-confirm-title-text-color` > `--mod-standard-dialog-heading-text-color`
+`--mod-dialog-confirm-title-text-size` > `--mod-standard-dialog-heading-font-size`
+`--mod-dialog-confirm-hero-height` > `--mod-standard-dialog-hero-block-size`
+`--mod-dialog-min-inline-size` > `--mod-standard-dialog-min-inline-size`
+`--mod-dialog-confirm-padding-grid` > `--mod-standard-dialog-spacing-grid-padding`
+`--mod-dialog-confirm-footer-padding-top` > `--mod-standard-dialog-spacing-description-to-footer`
+`--mod-dialog-confirm-close-button-padding` > `--mod-standard-dialog-spacing-edge-to-close-button`
+`--mod-dialog-confirm-gap-size` > `--mod-standard-dialog-spacing-footer-to-button-group`
+
+_Removed Mods_
+`--mod-dialog-confirm-buttongroup-padding-top`
+`--mod-dialog-confirm-close-button-size`
+`--mod-dialog-confirm-description-margin`
+`--mod-dialog-confirm-description-padding`
+`--mod-dialog-confirm-divider-block-spacing-end`
+`--mod-dialog-confirm-divider-block-spacing-start`
+`--mod-dialog-confirm-divider-height`
+
+Modal and underlay updates
+
+- Modal component now uses the updated corner rounding.
+- Underlay has an updated comment that addresses the overlay-color/overlay-opacity tokens.
diff --git a/components/buttongroup/index.css b/components/buttongroup/index.css
index bdaf0716ccb..817cb894906 100644
--- a/components/buttongroup/index.css
+++ b/components/buttongroup/index.css
@@ -11,28 +11,28 @@ governing permissions and limitations under the License.
 */
 
 .spectrum-ButtonGroup {
-  --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-200);
-  --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-200);
+	--spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-200);
+	--spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-200);
 }
 
 .spectrum-ButtonGroup--sizeS {
-  --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-100);
-  --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-100);
+	--spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-100);
+	--spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-100);
 }
 
 .spectrum-ButtonGroup {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--mod-buttongroup-spacing-horizontal, var(--spectrum-buttongroup-spacing-horizontal));
-  justify-content: var(--mod-buttongroup-justify-content, normal);
+	display: flex;
+	flex-wrap: var(--mod-buttongroup-flex-wrap, wrap);
+	gap: var(--mod-buttongroup-spacing-horizontal, var(--spectrum-buttongroup-spacing-horizontal));
+	justify-content: var(--mod-buttongroup-justify-content, normal);
 
-  .spectrum-ButtonGroup-item {
-    flex-shrink: 0;
-  }
+	.spectrum-ButtonGroup-item {
+		flex-shrink: 0;
+	}
 }
 
 .spectrum-ButtonGroup--vertical {
-  display: inline-flex;
-  flex-direction: column;
-  gap: var(--mod-buttongroup-spacing-vertical, var(--spectrum-buttongroup-spacing-vertical));
+	display: inline-flex;
+	flex-direction: column;
+	gap: var(--mod-buttongroup-spacing-vertical, var(--spectrum-buttongroup-spacing-vertical));
 }
diff --git a/components/buttongroup/metadata/mods.md b/components/buttongroup/metadata/mods.md
index d24339e5f5a..e3908110f6e 100644
--- a/components/buttongroup/metadata/mods.md
+++ b/components/buttongroup/metadata/mods.md
@@ -1,5 +1,6 @@
 | Modifiable custom properties           |
 | -------------------------------------- |
+| `--mod-buttongroup-flex-wrap`          |
 | `--mod-buttongroup-justify-content`    |
 | `--mod-buttongroup-spacing-horizontal` |
 | `--mod-buttongroup-spacing-vertical`   |
diff --git a/components/dialog/index.css b/components/dialog/index.css
index 30fe156565f..0895158764d 100644
--- a/components/dialog/index.css
+++ b/components/dialog/index.css
@@ -1,5 +1,5 @@
 /*!
-Copyright 2023 Adobe. All rights reserved.
+Copyright 2024 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
 of the License at http://www.apache.org/licenses/LICENSE-2.0
@@ -11,377 +11,408 @@ governing permissions and limitations under the License.
 */
 
 .spectrum-Dialog {
-  /* The font-size of the fullscreen dialog header */
-  --spectrum-dialog-fullscreen-header-text-size: 28px;
-  --spectrum-dialog-min-inline-size: 288px;
-  --spectrum-dialog-confirm-small-width: 400px;
-  --spectrum-dialog-confirm-medium-width: 480px;
-  --spectrum-dialog-confirm-large-width: 640px;
-  --spectrum-dialog-confirm-divider-block-spacing-start: var(--spectrum-spacing-300);
-  --spectrum-dialog-confirm-divider-block-spacing-end: var(--spectrum-spacing-200);
-  --spectrum-dialog-confirm-description-text-color: var(--spectrum-gray-800);
-  --spectrum-dialog-confirm-title-text-color: var(--spectrum-gray-900);
-  --spectrum-dialog-confirm-description-text-line-height: var(--spectrum-line-height-100);
-  --spectrum-dialog-confirm-title-text-line-height: var(--spectrum-line-height-100);
-  --spectrum-dialog-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight);
-
-
-  --spectrum-dialog-confirm-description-padding: var(--spectrum-spacing-50);
-  --spectrum-dialog-confirm-description-margin: calc(var(--spectrum-spacing-50) * -1);
-  --spectrum-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600);
-  --spectrum-dialog-confirm-gap-size: var(--spectrum-component-pill-edge-to-text-100);
-  --spectrum-dialog-confirm-buttongroup-padding-top: var(--spectrum-spacing-600);
-  --spectrum-dialog-confirm-close-button-size: var(--spectrum-component-height-100);
-  --spectrum-dialog-confirm-close-button-padding: calc(26px - var(--spectrum-component-bottom-to-text-300));
-  --spectrum-dialog-confirm-divider-height: var(--spectrum-spacing-50);
+	--spectrum-standard-dialog-max-width: var(--spectrum-standard-dialog-maximum-width-medium);
+	--spectrum-standard-dialog-min-inline-size: var(--spectrum-standard-dialog-minimum-width);
+	--spectrum-standard-dialog-border-radius: var(--spectrum-corner-radius-extra-large-default);
+
+	/* Fonts */
+	--spectrum-standard-dialog-heading-font-weight: var(--spectrum-title-sans-serif-font-weight);
+	--spectrum-standard-dialog-heading-font-size: var(--spectrum-standard-dialog-title-font-size);
+	--spectrum-standard-dialog-heading-font-style: var(--spectrum-title-sans-serif-font-style);
+	--spectrum-standard-dialog-heading-font-family: var(--spectrum-sans-font-family-stack);
+	--spectrum-standard-dialog-description-font-weight: var(--spectrum-body-sans-serif-font-weight);
+	--spectrum-standard-dialog-description-font-size: var(--spectrum-standard-dialog-body-font-size);
+	--spectrum-standard-dialog-description-font-style: var(--spectrum-body-sans-serif-font-style);
+	--spectrum-standard-dialog-description-font-family: var(--spectrum-sans-font-family-stack);
+	--spectrum-standard-dialog-header-content-font-size: var(--spectrum-standard-dialog-body-font-size);
+
+	--spectrum-standard-dialog-heading-line-height: var(--spectrum-title-line-height);
+	--spectrum-standard-dialog-description-line-height: var(--spectrum-line-height-200);
+
+	/* Colors */
+	--spectrum-standard-dialog-heading-text-color: var(--spectrum-heading-color);
+	--spectrum-standard-dialog-description-text-color: var(--spectrum-body-color);
+	--spectrum-standard-dialog-background-color: var(--spectrum-background-layer-2-color);
+
+	/* Spacing */
+	--spectrum-standard-dialog-padding: var(--spectrum-standard-dialog-spacing-edge-to-content);
+	--spectrum-standard-dialog-spacing-title-to-description: var(--spectrum-spacing-300);
+	--spectrum-standard-dialog-spacing-description-to-footer: var(--spectrum-spacing-500);
+	--spectrum-standard-dialog-spacing-title-to-header-content: var(--spectrum-spacing-400);
+	--spectrum-standard-dialog-spacing-edge-to-header-content-inline-end: var(--spectrum-spacing-400);
+	--spectrum-standard-dialog-spacing-footer-to-button-group: var(--spectrum-spacing-400);
+
+	/* Grid */
+	--spectrum-standard-dialog-spacing-grid-padding: var(--spectrum-standard-dialog-padding);
+	--spectrum-standard-dialog-spacing-edge-to-close-button: var(--spectrum-spacing-200);
+
+	/* Hero */
+	--spectrum-standard-dialog-hero-block-size: 140px;
+
+	/* Passthrough for nested component(s) */
+	--mod-buttongroup-justify-content: flex-end;
+	--mod-buttongroup-flex-wrap: nowrap;
 }
 
 .spectrum-Dialog {
-  /* Be a flexbox to allow a full sized content area that scrolls */
-  display: flex;
-
-  /* Allow 100% width, taking into account padding */
-  box-sizing: border-box;
-
-  /* Be no bigger than max-width,  but also be 90% if the viewport is smaller than max-width */
-  inline-size: fit-content;
-  min-inline-size: var(--mod-dialog-min-inline-size, var(--spectrum-dialog-min-inline-size));
-  max-inline-size: 100%;
-
-  max-block-size: inherit;
-
-  outline: none;
+	/* Be a flexbox to allow a full sized content area that scrolls */
+	display: flex;
+
+	/* Allow 100% width, taking into account padding */
+	box-sizing: border-box;
+
+	/* Be no bigger than max-width,  but also be 90% if the viewport is smaller than max-width */
+	inline-size: var(--mod-standard-dialog-max-width, var(--spectrum-standard-dialog-max-width));
+	min-inline-size: var(--mod-standard-dialog-min-inline-size, var(--spectrum-standard-dialog-min-inline-size));
+	max-inline-size: 100%;
+	max-block-size: inherit;
+	background-color: var(--mod-standard-dialog-background-color, var(--spectrum-standard-dialog-background-color));
+	outline: none;
+	border-radius: var(--mod-standard-dialog-border-radius, var(--spectrum-standard-dialog-border-radius));
+	overflow: hidden;
 }
 
-.spectrum-Dialog--small {
-  inline-size: var(--mod-dialog-confirm-small-width, var(--spectrum-dialog-confirm-small-width));
+.spectrum-Dialog--sizeS {
+	--spectrum-standard-dialog-max-width: var(--spectrum-standard-dialog-maximum-width-small);
+	inline-size: var(--mod-standard-dialog-max-width-small, var(--spectrum-standard-dialog-max-width));
 }
 
-.spectrum-Dialog--medium {
-  inline-size: var(--mod-dialog-confirm-medium-width, var(--spectrum-dialog-confirm-medium-width));
-}
-
-.spectrum-Dialog--large {
-  inline-size: var(--mod-dialog-confirm-large-width, var(--spectrum-dialog-confirm-large-width));
+.spectrum-Dialog--sizeL {
+	--spectrum-standard-dialog-max-width: var(--spectrum-standard-dialog-maximum-width-large);
+	inline-size: var(--mod-standard-dialog-max-width-large, var(--spectrum-standard-dialog-max-width));
 }
 
 .spectrum-Dialog-hero {
-  grid-area: hero;
-  block-size: var(--mod-dialog-confirm-hero-height, var(--spectrum-dialog-confirm-hero-height));
+	grid-area: hero;
 
-  border-start-start-radius: var(--mod-dialog-confirm-border-radius, var(--spectrum-dialog-confirm-border-radius));
-  border-start-end-radius: var(--mod-dialog-confirm-border-radius, var(--spectrum-dialog-confirm-border-radius));
+	block-size: var(--mod-standard-dialog-hero-block-size, var(--spectrum-standard-dialog-hero-block-size));
 
-  background-size: cover;
-  background-position: center center;
-  overflow: hidden;
+	background-size: cover;
+	background-position: center center;
 }
 
-.spectrum-Dialog .spectrum-Dialog-grid {
-  display: grid;
-  grid-template-columns:
-    var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto 1fr auto minmax(0,  auto)
-    var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid));
-  grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr auto var(
-      --mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)
-    );
-  grid-template-areas:
-    "hero hero    hero    hero        hero        hero"
-    ".    .       .       .           .           ."
-    ".    heading header  header      header      ."
-    ".    divider divider divider     divider     ."
-    ".    content content content     content     ."
-    ".    footer  footer  buttonGroup buttonGroup ."
-    ".    .       .       .           .           .";
-  inline-size: 100%;
+/* Non-Dismissible Dialog (no close button) */
+.spectrum-Dialog-grid {
+	display: grid;
+	grid-template-columns:
+		var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding))
+		auto
+		1fr
+		auto
+		var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding))
+		minmax(0, auto)
+		var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding));
+	grid-template-rows:
+		auto
+		var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding))
+		auto
+		1fr
+		auto
+		var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding));
+	grid-template-areas:
+		"hero hero    hero    hero     hero        hero        hero"
+		".    .       .       .        .           .           ."
+		".    heading header  header   header      header      ."
+		".    content content content  content     content     ."
+		".    footer  footer  footer   buttonGroup buttonGroup ."
+		".    .       .       .        .           .           .";
+	inline-size: 100%;
 }
 
+/* the dialog's heading/title */
 .spectrum-Dialog-heading {
-  grid-area: heading;
-
-  margin: 0;
-
-  font-size: var(--mod-dialog-confirm-title-text-size, var(--spectrum-dialog-confirm-title-text-size));
-  font-weight: var(--mod-dialog-heading-font-weight, var(--spectrum-dialog-heading-font-weight));
-  line-height: var(--mod-dialog-confirm-title-text-line-height, var(--spectrum-dialog-confirm-title-text-line-height));
-  color: var(--mod-dialog-confirm-title-text-color, var(--spectrum-dialog-confirm-title-text-color));
-  outline: none; /* Hide focus outline */
-
-  padding-inline-end: var(--mod-dialog-confirm-gap-size, var(--spectrum-dialog-confirm-gap-size));
-
-  &.spectrum-Dialog-heading--noHeader {
-    grid-area: heading-start / heading-start / header-end / header-end;
-    padding-inline-end: 0;
-  }
+	grid-area: heading;
+
+	margin-block: 0;
+	font-size: var(--mod-standard-dialog-heading-font-size, var(--spectrum-standard-dialog-heading-font-size));
+	font-weight: var(--mod-standard-dialog-heading-font-weight, var(--spectrum-standard-dialog-heading-font-weight));
+	font-style: var(--spectrum-standard-dialog-heading-font-style);
+	font-family: var(--spectrum-standard-dialog-heading-font-family);
+	line-height: var(--mod-standard-dialog-heading-line-height, var(--spectrum-standard-dialog-heading-line-height));
+	color: var(--mod-standard-dialog-heading-text-color, var(--spectrum-standard-dialog-heading-text-color));
+	outline: none; /* Hide focus outline */
 }
 
+/* the container for the heading and any additional header content */
 .spectrum-Dialog-header {
-  grid-area: header;
-  display: flex;
-
-  /* Without this,  buttons will be stretched */
-  align-items: center;
-  justify-content: flex-end;
-
-  box-sizing: border-box;
-
-  outline: none; /* Hide focus outline around header */
-}
-
-.spectrum-Dialog .spectrum-Dialog-divider {
-  grid-area: divider;
-  inline-size: 100%;
-  margin-block-start: var(--mod-dialog-confirm-divider-block-spacing-end, var(--spectrum-dialog-confirm-divider-block-spacing-end));
-  margin-block-end: var(--mod-dialog-confirm-divider-block-spacing-start, var(--spectrum-dialog-confirm-divider-block-spacing-start));
-}
-
-/* remove top vertical padding of spectrum-Dialog-content from bottom margin of first divider after heading */
-.spectrum-Dialog--fullscreen .spectrum-Dialog-heading + .spectrum-Dialog-divider {
-  margin-block-end: calc(var(--mod-dialog-confirm-divider-block-spacing-start, var(--spectrum-dialog-confirm-divider-block-spacing-start)) - (var(--mod-dialog-confirm-description-padding, var(--spectrum-dialog-confirm-description-padding)) * 2));
-}
-
-.spectrum-Dialog--noDivider {
-  .spectrum-Dialog-divider {
-    display: none;
-  }
-
-  .spectrum-Dialog-heading {
-    padding-block-end: calc(
-      var(--mod-dialog-confirm-divider-block-spacing-end, var(--spectrum-dialog-confirm-divider-block-spacing-end)) +
-        var(--mod-dialog-confirm-divider-block-spacing-start, var(--spectrum-dialog-confirm-divider-block-spacing-start)) +
-        var(--mod-dialog-confirm-divider-height, var(--spectrum-dialog-confirm-divider-height))
-    );
-  }
+	grid-area: header;
+	display: flex;
+	max-inline-size: 100%;
+	margin-block-end: var(--mod-standard-dialog-spacing-title-to-description, var(--spectrum-standard-dialog-spacing-title-to-description));
+	gap: var(--mod-standard-dialog-spacing-title-to-header-content, var(--spectrum-standard-dialog-spacing-title-to-header-content));
+
+	/* Without this, buttons will be stretched */
+	align-items: flex-start;
+	justify-content: space-between;
+
+	box-sizing: border-box;
+
+	outline: none; /* Hide focus outline around header */
+
+	/* additional header content should grow/shrink with the text, but only until it takes up half of the header */
+	> .spectrum-Dialog-header-content {
+		max-inline-size: fit-content;
+		flex: 1 1 100%;
+		font-size: var(--mod-standard-dialog-header-content-font-size, var(--spectrum-standard-dialog-header-content-font-size));
+		text-wrap: pretty;
+	}
 }
 
 .spectrum-Dialog-content {
-  grid-area: content;
-  box-sizing: border-box;
-
-  /*
-  v2 is currently worse,  inputs that get focus rings get a slight clipping unless overflow: visible replaces this line
-  we should think of a better way to handle this,  see padding/margin below for fix
-  */
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-
-  outline: none; /* Hide focus outline */
-
-  font-size: var(--mod-dialog-confirm-description-text-size, var(--spectrum-dialog-confirm-description-text-size));
-  font-weight: var(--mod-dialog-confirm-description-font-weight, var(--spectrum-regular-font-weight));
-  line-height: var(--mod-dialog-confirm-description-text-line-height, var(--spectrum-dialog-confirm-description-text-line-height));
-  color: var(--mod-dialog-confirm-description-text-color, var(--spectrum-dialog-confirm-description-text-color));
-
-
-  /* this is kinda dumb,  but needed for the keyboard focus rings so they don't get clipped. is there a better way to treat this */
-  padding: calc(var(--mod-dialog-confirm-description-padding, var(--spectrum-dialog-confirm-description-padding)) * 2);
-  margin: 0 var(--mod-dialog-confirm-description-margin, var(--spectrum-dialog-confirm-description-margin));
+	grid-area: content;
+	box-sizing: border-box;
+	overflow-y: auto;
+	-webkit-overflow-scrolling: touch;
+
+	outline: none; /* Hide focus outline */
+	font-size: var(--mod-standard-dialog-description-font-size, var(--spectrum-standard-dialog-description-font-size));
+	font-weight: var(--mod-standard-dialog-description-font-weight, var(--spectrum-standard-dialog-description-font-weight));
+	font-family: var(--spectrum-standard-dialog-description-font-family);
+	font-style: var(--spectrum-standard-dialog-description-font-style);
+	line-height: var(--mod-standard-dialog-description-line-height, var(--spectrum-standard-dialog-description-line-height));
+	color: var(--mod-standard-dialog-description-text-color, var(--spectrum-standard-dialog-description-text-color));
 }
 
 .spectrum-Dialog-footer {
-  grid-area: footer;
+	grid-area: footer / footer / buttonGroup / buttonGroup;
+	max-inline-size: 100%;
+	display: flex;
+	align-items: flex-end;
 
-  /* this padding isn't built into the grid because it disappears with this footer */
-  padding-block-start: var(--mod-dialog-confirm-footer-padding-top, var(--spectrum-dialog-confirm-footer-padding-top));
+	/* this recreates padding between the footer content and button group. It should be safe as button group is always end aligned */
+	gap: var(--mod-standard-dialog-spacing-footer-to-button-group, var(--spectrum-standard-dialog-spacing-footer-to-button-group));
 
-  display: flex;
-  flex-wrap: wrap;
+	/* this padding isn't built into the grid because it disappears with this footer */
+	padding-block-start: var(--mod-standard-dialog-spacing-description-to-footer, var(--spectrum-standard-dialog-spacing-description-to-footer));
 
-  outline: none; /* Hide focus outline */
+	outline: none; /* Hide focus outline */
 
-  /* Both selectors are required to override the button + button rule */
-  > *,
-  > .spectrum-Button + .spectrum-Button {
-    margin-block-end: 0;
-  }
+	.spectrum-Dialog-footer-content {
+		/* this attempts to give as much space as possible for the button group, particularly to avoid stacking on mobile. Some sizes still may have to stack. */
+		flex: 1 1 100%;
+	}
+
+	&:has(.spectrum-Dialog-footer-content),
+	&:has(.spectrum-Dialog-buttonGroup) {
+		justify-content: space-between;
+	}
 }
 
 .spectrum-Dialog-buttonGroup {
-  grid-area: buttonGroup;
-
-  /* this padding isn't built into the grid because it disappears with this buttonGroup */
-  padding-block-start: var(--mod-dialog-confirm-buttongroup-padding-top, var(--spectrum-dialog-confirm-buttongroup-padding-top));
-  display: flex;
-  justify-content: flex-end;
-
-  /* this padding should be safe as button group is always end aligned */
-  padding-inline-start: var(--mod-dialog-confirm-gap-size, var(--spectrum-dialog-confirm-gap-size));
+	grid-area: buttonGroup;
+}
 
-  &.spectrum-Dialog-buttonGroup--noFooter {
-    grid-area: footer-start / footer-start / buttonGroup-end / buttonGroup-end;
-  }
+.spectrum-Dialog-buttonGroup--noFooter {
+	padding-block-start: var(--mod-standard-dialog-spacing-description-to-footer, var(--spectrum-standard-dialog-spacing-description-to-footer));
 }
 
-.spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid {
-  grid-template-columns:
-    var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto 1fr auto minmax(0,  auto)
-    minmax(0,  var(--mod-dialog-confirm-close-button-size, var(--spectrum-dialog-confirm-close-button-size))) var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid));
-  grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr auto var(
-      --mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)
-    );
-  grid-template-areas:
-    "hero hero    hero    hero        hero        hero        hero"
-    ".    .       .       .           .           closeButton closeButton"
-    ".    heading header  header      typeIcon    closeButton closeButton"
-    ".    divider divider divider     divider     divider     ."
-    ".    content content content     content     content     ."
-    ".    footer  footer  buttonGroup buttonGroup buttonGroup ."
-    ".    .       .       .           .           .           .";
-
-  .spectrum-Dialog-buttonGroup {
-    display: none;
-  }
-
-  .spectrum-Dialog-footer {
-    grid-area: footer / footer/ buttonGroup / buttonGroup;
-    color: var(--mod-dialog-confirm-description-text-color, var(--spectrum-dialog-confirm-description-text-color));
-  }
+/* Dismissible Dialog (with close button) */
+.spectrum-Dialog--dismissible .spectrum-Dialog-grid {
+	grid-template-columns:
+		var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding))
+		auto
+		1fr
+		auto
+		minmax(0, var(--spectrum-standard-dialog-spacing-edge-to-header-content-inline-end))
+		var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding));
+	grid-template-rows:
+		auto
+		var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding))
+		auto
+		1fr
+		auto
+		var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding));
+	grid-template-areas:
+		"hero hero    hero    hero     hero        hero"
+		".    .       .       .        closeButton closeButton"
+		".    heading header  header   closeButton closeButton"
+		".    content content content  content     ."
+		".    footer  footer  footer   footer      ."
+		".    .       .       .        .           .";
+
+	.spectrum-Dialog-footer {
+		grid-area: footer;
+	}
 }
 
 .spectrum-Dialog-closeButton {
-  grid-area: closeButton;
+	grid-area: closeButton;
 
-  /* align and justify so it doesn't do the default 'stretch' and end up with forced height/width */
-  align-self: start;
-  justify-self: end;
+	/* align and justify so it doesn't do the default 'stretch' and end up with forced height/width */
+	align-self: start;
+	justify-self: end;
 
-  margin-inline-end: var(--mod-dialog-confirm-close-button-padding, var(--spectrum-dialog-confirm-close-button-padding));
-  margin-block-start: var(--mod-dialog-confirm-close-button-padding, var(--spectrum-dialog-confirm-close-button-padding));
+	margin-block-start: var(--mod-standard-dialog-spacing-edge-to-close-button, var(--spectrum-standard-dialog-spacing-edge-to-close-button));
+	margin-inline-end: var(--mod-standard-dialog-spacing-edge-to-close-button, var(--spectrum-standard-dialog-spacing-edge-to-close-button));
 }
 
 .spectrum-Dialog--fullscreen {
-  inline-size: 100%;
-  block-size: 100%;
+	inline-size: 100%;
+	block-size: 100%;
 }
 
 .spectrum-Dialog--fullscreenTakeover {
-  inline-size: 100%;
-  block-size: 100%;
-
-  border-radius: 0;
+	inline-size: 100%;
+	block-size: 100%;
+	border-radius: 0;
 }
 
 .spectrum-Dialog--fullscreen,
 .spectrum-Dialog--fullscreenTakeover {
-  max-block-size: none;
-  max-inline-size: none;
-
-  &.spectrum-Dialog .spectrum-Dialog-grid {
-    display: grid;
-    grid-template-columns: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) 1fr auto auto var(
-        --mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)
-      );
-    grid-template-rows: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr var(
-        --mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)
-      );
-    grid-template-areas:
-      ".    .       .       .            ."
-      ".    heading header  buttonGroup  ."
-      ".    divider divider divider      ."
-      ".    content content content      ."
-      ".    .       .       .            .";
-  }
-
-  .spectrum-Dialog-heading {
-    font-size: var(--mod-dialog-fullscreen-header-text-size, var(--spectrum-dialog-fullscreen-header-text-size));
-  }
-
-  .spectrum-Dialog-content {
-    max-block-size: none;
-
-
-  }
-
-  .spectrum-Dialog-footer,
-  .spectrum-Dialog-buttonGroup {
-    padding-block-start: 0;
-  }
-
-  .spectrum-Dialog-footer {
-    display: none;
-  }
-
-  .spectrum-Dialog-buttonGroup {
-    grid-area: buttonGroup;
-    align-self: start;
-  }
+	max-block-size: none;
+	max-inline-size: none;
+
+	.spectrum-Dialog-grid {
+		display: grid;
+		grid-template-columns:
+			var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding))
+			1fr
+			auto
+			auto
+			var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding));
+		grid-template-rows:
+			var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding))
+			auto
+			1fr
+			var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding));
+		grid-template-areas:
+			".    .       .       .            ."
+			".    heading header  buttonGroup  ."
+			".    content content content      ."
+			".    .       .       .            .";
+	}
+
+	.spectrum-Dialog-header {
+		grid-area: heading;
+	}
+
+	.spectrum-Dialog-closeButton {
+		display: none;
+	}
+
+	.spectrum-Dialog-content {
+		max-block-size: none;
+	}
+
+	.spectrum-Dialog-footer {
+		display: none;
+	}
+
+	.spectrum-Dialog-buttonGroup {
+		grid-area: buttonGroup;
+	}
 }
 
 @media screen and (width <= 700px) {
-  .spectrum-Dialog .spectrum-Dialog-grid {
-    grid-template-columns:
-      var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto 1fr auto minmax(0,  auto)
-      var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid));
-    grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto auto 1fr auto var(
-        --mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)
-      );
-    grid-template-areas:
-      "hero hero    hero    hero        hero        hero"
-      ".    .       .       .           .           ."
-      ".    heading heading heading     heading   ."
-      ".    header  header  header      header      ."
-      ".    divider divider divider     divider     ."
-      ".    content content content     content     ."
-      ".    footer  footer  buttonGroup buttonGroup ."
-      ".    .       .       .           .           .";
-  }
-
-  .spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid {
-    grid-template-columns:
-      var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto 1fr auto minmax(0,  auto)
-      minmax(0,  var(--mod-dialog-confirm-close-button-size, var(--spectrum-dialog-confirm-close-button-size))) var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid));
-    grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto auto 1fr auto var(
-        --mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)
-      );
-    grid-template-areas:
-      "hero hero    hero    hero        hero        hero        hero"
-      ".    .       .       .           .           closeButton closeButton"
-      ".    heading heading heading     heading    closeButton closeButton"
-      ".    header  header  header      header      header      ."
-      ".    divider divider divider     divider     divider     ."
-      ".    content content content     content     content     ."
-      ".    footer  footer  buttonGroup buttonGroup buttonGroup ."
-      ".    .       .       .           .           .           .";
-  }
-
-  .spectrum-Dialog .spectrum-Dialog-header {
-    justify-content: flex-start;
-  }
-
-  .spectrum-Dialog--fullscreen,
-  .spectrum-Dialog--fullscreenTakeover {
-    &.spectrum-Dialog .spectrum-Dialog-grid {
-      display: grid;
-      grid-template-columns: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) 1fr var(
-          --mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)
-        );
-      grid-template-rows: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto auto 1fr auto var(
-          --mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)
-        );
-      grid-template-areas:
-        ".    .            ."
-        ".    heading      ."
-        ".    header       ."
-        ".    divider      ."
-        ".    content      ."
-        ".    buttonGroup  ."
-        ".    .            .";
-    }
-
-    .spectrum-Dialog-buttonGroup {
-      padding-block-start: var(
-        --mod-dialog-confirm-buttongroup-padding-top, var(--spectrum-dialog-confirm-buttongroup-padding-top)
-      );
-    }
-
-    .spectrum-Dialog-heading {
-      font-size: var(--mod-dialog-confirm-title-text-size, var(--spectrum-dialog-confirm-title-text-size));
-    }
-  }
+	.spectrum-Dialog-grid {
+		grid-template-columns:
+			var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding))
+			auto
+			1fr
+			auto
+			minmax(0, auto)
+			var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding));
+		grid-template-rows:
+			auto
+			var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding))
+			auto
+			auto
+			1fr
+			auto
+			var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding));
+
+		/* TODO: investigate if we could refactor the grid to make the footer text/checkbox stack on top of the button group */
+		grid-template-areas:
+			"hero hero    hero    hero        hero        hero"
+			".    .       .       .           .           ."
+			".    heading heading heading     heading     ."
+			".    header  header  header      header      ."
+			".    content content content     content     ."
+			".    footer  footer  buttonGroup buttonGroup ."
+			".    .       .       .           .           .";
+	}
+
+	.spectrum-Dialog-footer {
+		flex-direction: column;
+	}
+
+	.spectrum-Dialog--dismissible .spectrum-Dialog-grid {
+		grid-template-columns:
+			var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding))
+			auto
+			1fr
+			auto
+			minmax(0, auto)
+			minmax(0, calc(var(--spectrum-standard-dialog-spacing-edge-to-content) - var(--spectrum-standard-dialog-spacing-edge-to-close-button)))
+			var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding));
+		grid-template-rows:
+			auto
+			var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding))
+			auto
+			auto
+			1fr
+			auto
+			var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding));
+		grid-template-areas:
+			"hero hero    hero    hero        hero        hero        hero"
+			".    .       .       .           .           closeButton closeButton"
+			".    heading heading heading     heading     closeButton closeButton"
+			".    header  header  header      header      header      ."
+			".    content content content     content     content     ."
+			".    footer  footer  footer      footer      footer      ."
+			".    .       .       .           .           .           .";
+	}
+
+	.spectrum-Dialog .spectrum-Dialog-header {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		justify-content: flex-start;
+		gap: 0;
+	}
+
+	.spectrum-Dialog--fullscreen,
+	.spectrum-Dialog--fullscreenTakeover {
+		&.spectrum-Dialog .spectrum-Dialog-grid {
+			display: grid;
+			grid-template-columns:
+				var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding))
+				1fr
+				var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding));
+			grid-template-rows:
+				var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding))
+				auto
+				auto
+				1fr
+				var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding))
+				auto
+				var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding));
+			grid-template-areas:
+				".    .            ."
+				".    heading      ."
+				".    header       ."
+				".    content      ."
+				".    .            ."
+				".    buttonGroup  ."
+				".    .            .";
+		}
+
+		.spectrum-Dialog-header {
+			margin-inline-end: 0;
+		}
+
+		.spectrum-Dialog-heading {
+			margin-inline-end: 0;
+		}
+	}
+
+	.spectrum-Dialog-heading {
+		margin-block-end: var(--spectrum-standard-dialog-spacing-title-to-description);
+	}
 }
 
 @media (forced-colors: active) {
-  .spectrum-Dialog {
-    border: solid;
-  }
+	.spectrum-Dialog {
+		border: 1px solid var(--highcontrast-standard-dialog-border-color, rgba(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity)));
+	}
 }
diff --git a/components/dialog/metadata/mods.md b/components/dialog/metadata/mods.md
index 2be49da8f6e..76e69f4c916 100644
--- a/components/dialog/metadata/mods.md
+++ b/components/dialog/metadata/mods.md
@@ -1,28 +1,24 @@
-| Modifiable custom properties                        |
-| --------------------------------------------------- |
-| `--mod-dialog-confirm-border-radius`                |
-| `--mod-dialog-confirm-buttongroup-padding-top`      |
-| `--mod-dialog-confirm-close-button-padding`         |
-| `--mod-dialog-confirm-close-button-size`            |
-| `--mod-dialog-confirm-description-font-weight`      |
-| `--mod-dialog-confirm-description-margin`           |
-| `--mod-dialog-confirm-description-padding`          |
-| `--mod-dialog-confirm-description-text-color`       |
-| `--mod-dialog-confirm-description-text-line-height` |
-| `--mod-dialog-confirm-description-text-size`        |
-| `--mod-dialog-confirm-divider-block-spacing-end`    |
-| `--mod-dialog-confirm-divider-block-spacing-start`  |
-| `--mod-dialog-confirm-divider-height`               |
-| `--mod-dialog-confirm-footer-padding-top`           |
-| `--mod-dialog-confirm-gap-size`                     |
-| `--mod-dialog-confirm-hero-height`                  |
-| `--mod-dialog-confirm-large-width`                  |
-| `--mod-dialog-confirm-medium-width`                 |
-| `--mod-dialog-confirm-padding-grid`                 |
-| `--mod-dialog-confirm-small-width`                  |
-| `--mod-dialog-confirm-title-text-color`             |
-| `--mod-dialog-confirm-title-text-line-height`       |
-| `--mod-dialog-confirm-title-text-size`              |
-| `--mod-dialog-fullscreen-header-text-size`          |
-| `--mod-dialog-heading-font-weight`                  |
-| `--mod-dialog-min-inline-size`                      |
+| Modifiable custom properties                            |
+| ------------------------------------------------------- |
+| `--mod-standard-dialog-background-color`                |
+| `--mod-standard-dialog-border-radius`                   |
+| `--mod-standard-dialog-description-font-size`           |
+| `--mod-standard-dialog-description-font-weight`         |
+| `--mod-standard-dialog-description-line-height`         |
+| `--mod-standard-dialog-description-text-color`          |
+| `--mod-standard-dialog-header-content-font-size`        |
+| `--mod-standard-dialog-heading-font-size`               |
+| `--mod-standard-dialog-heading-font-weight`             |
+| `--mod-standard-dialog-heading-line-height`             |
+| `--mod-standard-dialog-heading-text-color`              |
+| `--mod-standard-dialog-hero-block-size`                 |
+| `--mod-standard-dialog-max-width`                       |
+| `--mod-standard-dialog-max-width-large`                 |
+| `--mod-standard-dialog-max-width-small`                 |
+| `--mod-standard-dialog-min-inline-size`                 |
+| `--mod-standard-dialog-spacing-description-to-footer`   |
+| `--mod-standard-dialog-spacing-edge-to-close-button`    |
+| `--mod-standard-dialog-spacing-footer-to-button-group`  |
+| `--mod-standard-dialog-spacing-grid-padding`            |
+| `--mod-standard-dialog-spacing-title-to-description`    |
+| `--mod-standard-dialog-spacing-title-to-header-content` |
diff --git a/components/dialog/package.json b/components/dialog/package.json
index 2c667f84a5b..a5a21b5e6bd 100644
--- a/components/dialog/package.json
+++ b/components/dialog/package.json
@@ -32,19 +32,26 @@
 		"metadata/mods.md"
 	],
 	"peerDependencies": {
+		"@spectrum-css/checkbox": ">=9",
 		"@spectrum-css/closebutton": ">=5",
-		"@spectrum-css/divider": ">=3",
 		"@spectrum-css/modal": ">=5",
 		"@spectrum-css/tokens": ">=14.0.0-next.3",
+		"@spectrum-css/typography": ">=6",
 		"@spectrum-css/underlay": ">=3"
 	},
 	"peerDependenciesMeta": {
-		"@spectrum-css/divider": {
+		"@spectrum-css/checkbox": {
+			"optional": true
+		},
+		"@spectrum-css/closebutton": {
 			"optional": true
 		},
 		"@spectrum-css/modal": {
 			"optional": true
 		},
+		"@spectrum-css/typography": {
+			"optional": true
+		},
 		"@spectrum-css/underlay": {
 			"optional": true
 		}
diff --git a/components/dialog/stories/dialog.stories.js b/components/dialog/stories/dialog.stories.js
index cc0dee300f1..e6b4feb5043 100644
--- a/components/dialog/stories/dialog.stories.js
+++ b/components/dialog/stories/dialog.stories.js
@@ -1,9 +1,15 @@
-import { Template } from "./template";
-
 import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
+import { version } from "../package.json";
+// import { DialogFullscreen, DialogFullscreenTakeover, DialogGroup } from "./dialog.test.js";
+import { Template } from "./template.js";
 
 /**
- * A dialog displays important information that users need to acknowledge. They appear over the interface and block further interactions.
+ * A dialog displays important information that users need to acknowledge. They appear over the interface and block further interactions. Standard dialogs are the most frequent type of dialogs. They appear in the center of the screen over the interface and should be used for moderately complex tasks. Takeover dialogs are large types of dialogs. They use the totality of the screen and should be used for modal experiences with complex workflows.
+ * 
+ * ## Usage with modal component
+ * When a dialog component is used in tandem with a [modal](/docs/components-modal--docs), implementations should set `--mod-modal-background-color` to `transparent`. This will prevent any background color used in the modal from peeking through from behind the dialog at the rounded corners, allowing the dialog's background color to take precedence.
+ * 
+ * The alert variants that were previously a part of Dialog were moved to their own component, [alert dialog](/docs/components-alert-dialog--docs).
  */
 export default {
 	title: "Dialog",
@@ -11,22 +17,89 @@ export default {
 	argTypes: {
 		heading: {
 			name: "Heading",
+			description: "Title for the dialog.",
 			type: { name: "string" },
 			table: {
 				type: { summary: "string" },
-				category: "Component",
+				category: "Content",
+			},
+			control: { type: "text" },
+		},
+		header: { 
+			name: "Additional header content",
+			description: "Controls header content.",
+			type: { name: "string" },
+			table: {
+				type: { summary: "string" },
+				category: "Content",
 			},
 			control: { type: "text" },
 		},
 		content: { table: { disable: true } },
-		isDismissable: {
-			name: "Dismissable",
+		hasFooter: {
+			name: "Has footer",
+			description: "Adds a footer to the dialog, containing the button group, checkbox, and footer text. Currently only supported in the default layout.",
+			type: { name: "boolean" },
+			table: {
+				type: { summary: "boolean" },
+				category: "Content",
+			},
+			control: "boolean",
+		},
+		footer: {
+			name: "Footer text",
+			description: "Text content of the dialog footer. Represents the checkbox label if a checkbox is present, or stands alone if there is no checkbox. Currently only supported in the default layout.",
+			type: { name: "string" },
+			table: {
+				type: { summary: "string" },
+				category: "Content",
+			},
+			control: { type: "text" },
+			if: { arg: "hasFooter", truthy: true, },
+		},
+		hasCheckbox: {
+			name: "Has checkbox",
+			description: "Adds a checkbox to the footer content. Currently only supported in the default layout.",
+			type: { name: "boolean" },
+			table: {
+				type: { summary: "boolean" },
+				category: "Content",
+			},
+			control: { type: "boolean" },
+			if: { arg: "hasFooter", truthy: true, },
+		},
+		size: {
+			name: "Size",
+			type: { name: "string", required: true },
+			table: {
+				type: { summary: "string" },
+				category: "Component",
+			},
+			options: ["s", "m", "l"],
+			control: "select",
+		},
+		layout: {
+			name: "Layout",
+			type: { name: "string" },
+			defaultValue: "Default",
+			table: {
+				type: { summary: "string" },
+				category: "Component",
+				defaultValue: { summary: "Default" },
+				disable: true,
+			},
+			options: ["default", "fullscreen", "fullscreenTakeover"],
+			control: "select",
+		},
+		isDismissible: {
+			name: "Dismissible",
 			type: { name: "boolean" },
 			table: {
 				type: { summary: "boolean" },
 				category: "Component",
 			},
 			control: "boolean",
+			if: { arg: "layout", eq: "default" },
 		},
 		showModal: {
 			name: "Wrap the dialog in a modal",
@@ -46,39 +119,205 @@ export default {
 			},
 			control: "boolean",
 		},
+		hasHeroImage: {
+			name: "Has hero image",
+			type: { name: "boolean" },
+			description: "Adds a cover image to the header of a dialog.",
+			table: {
+				type: { summary: "boolean" },
+				category: "Content",
+			},
+			control: "boolean",
+			if: { arg: "layout", eq: "default" },
+		},
+		heroImageUrl: {
+			name: "Hero Image",
+			type: { name: "string" },
+			description: "Select a cover image for the hero section of a dialog.",
+			defaultValue: "example-card-portrait.png",
+			table: {
+				type: { summary: "string" },
+				category: "Content",
+				defaultValue: { summary: "example-card-portrait.png" },
+			},
+			control: { type: "file", accept: ".svg,.png,.jpg,.jpeg,.webc" },
+			if: { arg: "hasHeroImage", truthy: true },
+		},
 	},
 	args: {
 		rootClass: "spectrum-Dialog",
-		isDismissable: true,
-		showModal: false,
+		hasFooter: true,
+		footer: "Do not show this message again.",
+		isDismissible: false,
 		isOpen: true,
+		showModal: false,
+		size: "m",
+		layout: "default",
+		hasCheckbox: true,
+		hasHeroImage: false,
 	},
 	parameters: {
 		actions: {
-			handles: ["click .spectrum-Dialog button"],
+			handles: [],
 		},
 		docs: {
 			story: {
+				// inline: false,
 				height: "500px",
 			},
 		},
+		componentVersion: version,
 		status: {
 			type: "migrated",
 		},
 	},
 };
 
+const ExampleContent = "Standard dialog description. This should briefly communicate any additional information or context about the standard dialog title, to help users make one of the decisions offered by the buttons. Make it no more than a few short sentences.";
+
+/**
+ * The default size for dialog is medium. The default dialog also has a checkbox in the footer.
+ */
 export const Default = Template.bind({});
 Default.args = {
 	heading: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+	header: "* Required",
 	showModal: true,
 	content: [
-		() => Typography({
+		(passthroughs, context) =>  Typography({
 			semantics: "body",
 			size: "m",
-			content: [
-				"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris augue neque gravida. Libero volutpat sed ornare arcu. Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac ut consequat semper viverra nam libero justo laoreet. Enim ut tellus elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse interdum consectetur libero id faucibus nisl. Diam volutpat commodo sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum neque egestas congue. Rhoncus est pellentesque elit ullamcorper dignissim cras lobortis."
-			]
-		}),
+			content: [ ExampleContent ],
+			...passthroughs,
+		}, context),
 	],
 };
+
+/* TODO: For all dialog stories: the "is-hidden-story" tags in older versions of Storybook. In newer versions,
+use "!dev" to remove the stories from the side navigation, reflecting the intended behavior.
+Remove "is-hidden-story" in favor of "!dev" tags when possible.
+*/
+// ********* DOCS ONLY ********* //
+export const DefaultSmall = Template.bind({});
+DefaultSmall.tags = ["is-hidden-story", "!dev"];
+DefaultSmall.storyName = "Dialog - small",
+DefaultSmall.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+DefaultSmall.args = {
+	...Default.args,
+	size: "small",
+};
+
+export const DefaultLarge = Template.bind({});
+DefaultLarge.tags = ["is-hidden-story", "!dev"];
+DefaultLarge.storyName = "Dialog - large",
+DefaultLarge.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+DefaultLarge.args = {
+	...Default.args,
+	size: "large",
+};
+
+/**
+ * A dialog that can be dismissed without taking an action.
+ */
+export const Dismissible = Template.bind({});
+Dismissible.tags = ["is-hidden-story", "!dev"];
+Dismissible.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+Dismissible.args = {
+	...Default.args,
+	isDismissible: true,
+};
+
+/**
+ * Dialogs can have a hero or cover image header.
+ */
+export const WithHero = Template.bind({});
+WithHero.tags = ["is-hidden-story", "!dev"];
+WithHero.storyName = "With hero image";
+WithHero.parameters = {
+	docs: {
+		story: {
+			height: "650px",
+		},
+	},
+	chromatic: { disableSnapshot: true },
+};
+WithHero.args = {
+	...Default.args,
+	hasHeroImage: true,
+};
+
+/**
+ * The content inside the body area can scroll when necessary.
+ */
+export const WithScroll = Template.bind({});
+WithScroll.args = {
+	...Default.args,
+	content: [ ExampleContent, ExampleContent, ExampleContent, ExampleContent ],
+	customStyles: {
+		"max-block-size": "400px",
+	}
+};
+WithScroll.storyName = "Scrollable";
+WithScroll.tags = ["is-hidden-story", "!dev"];
+WithScroll.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+
+/* TODO: once this gets rebased with `main`, make sure to use the fullscreen and fullscreenTakeover test templates
+that are imported above, but commented out.
+ */
+/**
+ * The full screen variant shows a large dialog background, only revealing a small portion of the page around the outside of the dialog, behind an overlay. The size of the dialog varies with the size of the screen, in both width and height.
+ */
+export const Fullscreen = Template.bind({});
+Fullscreen.args = {
+	...Default.args,
+	layout: "fullscreen",
+	hasFooter: false,
+};
+Fullscreen.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+
+// TODO: Because storybook doesn't support for multiple conditionals, we've removed the hasFooter
+// arg from the control table for the fullscreen and fullscreenTakeover stories only. Ideally, we
+// could have some of our controls display when more than one arg is met to avoid custom argTypes.
+// For instance, hasCheckbox would appear when layout: "default", AND footer is truthy.
+// https://github.com/storybookjs/storybook/discussions/18542
+Fullscreen.argTypes = {
+	hasFooter: { table: { disable: true, } },
+};
+
+/**
+ * The full screen takeover variant is similar to the full screen variant except that the background covers the entire screen. The page behind the dialog is not visible. This variant should be reserved for workflows where displaying a second dialog on top of the first one is to be expected.
+ */
+export const FullscreenTakeover = Template.bind({});
+FullscreenTakeover.storyName = "Fullscreen takeover";
+FullscreenTakeover.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+FullscreenTakeover.args = {
+	...Default.args,
+	layout: "fullscreenTakeover",
+	hasFooter: false,
+	content: [ ExampleContent, ExampleContent, ExampleContent, ExampleContent, ExampleContent, ExampleContent, ExampleContent, ExampleContent ],
+};
+FullscreenTakeover.argTypes = {
+	hasFooter: { table: { disable: true, } },
+};
+
+// ********* VRT ONLY ********* //
+export const WithForcedColors = Default.bind({});
+WithForcedColors.args = Default.args;
+WithForcedColors.tags = ["!autodocs", "!dev"];
+WithForcedColors.parameters = {
+	chromatic: {
+		forcedColors: "active",
+	},
+};
diff --git a/components/dialog/stories/dialog.test.js b/components/dialog/stories/dialog.test.js
new file mode 100644
index 00000000000..dbccfd16d7e
--- /dev/null
+++ b/components/dialog/stories/dialog.test.js
@@ -0,0 +1,83 @@
+import { Variants } from "@spectrum-css/preview/decorators";
+import { Template } from "./template.js";
+
+export const DialogGroup = Variants({
+	Template: (args, context) => (
+		/*
+		 * This template forces each test case to showModal: false, and give a background 
+		 * color to the dialog grid container when isChromatic() is true.
+		 * This should ensure that the Sizes within the Variants() template to display correctly.
+		 */
+
+		Template({
+			...args,
+			showModal: window.isChromatic() ? false : args.showModal,
+			// TODO: The dialog's heading arg is getting passed as the "Sizing" heading arg (instead of the 
+			// TODO: word "Sizing"). We should be able to remove this arg once that no longers happens.
+			heading: window.isChromatic() ? "Lorem ipsum dolor sit amet, consectetur adipiscing elit" : args.heading,
+			customStyles: {
+				...(args.customStyles ?? {}),
+				"background-color": window.isChromatic() ? "var(--spectrum-gray-100)" : undefined,
+			},
+		}, context)
+	),
+	testData: [
+		{
+			wrapperStyles: {
+				"background-color": "var(--spectrum-gray-50)"
+			},
+		},
+		{
+			testHeading: "Dismissible",
+			isDismissible: true,
+			hasFooter: false,
+			wrapperStyles: {
+				"background-color": "var(--spectrum-gray-50)"
+			},
+		},
+		{
+			testHeading: "With hero/cover image",
+			heroImageUrl: "example-card-portrait.png",
+			wrapperStyles: {
+				"background-color": "var(--spectrum-gray-50)"
+			},
+		},
+		{
+			testHeading: "With hero/cover image, dismissible",
+			heroImageUrl: "example-card-portrait.png",
+			isDismissible: true,
+			hasFooter: false,
+			wrapperStyles: {
+				"background-color": "var(--spectrum-gray-50)"
+			},
+		},
+	],
+});
+
+export const DialogFullscreen = Variants({
+	Template,
+	withSizes: false,
+	testData: [
+		{
+			showModal: false,
+			layout: "fullscreen",
+			wrapperStyles: {
+				"background-color": "var(--spectrum-gray-50)"
+			},
+		},
+	],
+});
+
+export const DialogFullscreenTakeover = Variants({
+	Template,
+	withSizes: false,
+	testData: [
+		{
+			showModal: false,
+			layout: "fullscreenTakeover",
+			wrapperStyles: {
+				"background-color": "var(--spectrum-gray-50)"
+			},
+		},
+	],
+});
diff --git a/components/dialog/stories/template.js b/components/dialog/stories/template.js
index e2ce00de2af..84b4874bfd5 100644
--- a/components/dialog/stories/template.js
+++ b/components/dialog/stories/template.js
@@ -1,95 +1,191 @@
-import { useArgs } from "@storybook/preview-api";
+import { Template as ButtonGroup } from "@spectrum-css/buttongroup/stories/template.js";
+import { Template as Checkbox } from "@spectrum-css/checkbox/stories/template.js";
+import { Template as CloseButton } from "@spectrum-css/closebutton/stories/template.js";
+import { Template as Modal } from "@spectrum-css/modal/stories/template.js";
+import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
+import { Template as Underlay } from "@spectrum-css/underlay/stories/template.js";
+// import { getRandomId, renderContent } from "@spectrum-css/preview/decorators";
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { styleMap } from "lit/directives/style-map.js";
 import { when } from "lit/directives/when.js";
 
-import { Template as Button } from "@spectrum-css/button/stories/template.js";
-import { Template as CloseButton } from "@spectrum-css/closebutton/stories/template.js";
-import { Template as Divider } from "@spectrum-css/divider/stories/template.js";
-import { Template as Modal } from "@spectrum-css/modal/stories/template.js";
-import { Template as Underlay } from "@spectrum-css/underlay/stories/template.js";
-
 import "../index.css";
 
 export const Template = ({
 	rootClass = "spectrum-Dialog",
-	isDismissable = true,
+	isDismissible = false,
 	isOpen = true,
 	showModal = false,
+	hasFooter = false,
 	heading,
+	header,
+	footer,
+	hasCheckbox = false,
 	content = [],
 	customClasses = [],
 	id,
-	...globals
-}) => {
-	const { scale } = globals;
-	const [, updateArgs] = useArgs();
+	size = "m",
+	layout,
+	hasHeroImage = false,
+	heroImageUrl,
+	customStyles = {},
+} = {}, context = {}) => {
+	const { updateArgs } = context;
+	const toggleOpen = () => updateArgs({ isOpen: !isOpen });
 
 	const Dialog = html`
 		<div
 			class=${classMap({
 				[rootClass]: true,
-				[`${rootClass}--${scale}`]: true,
-				[`${rootClass}--dismissable`]: isDismissable,
+				[`${rootClass}--dismissible`]: isDismissible && ["fullscreen", "fullscreenTakeover"].every(l => layout !== l),
+				[`${rootClass}--${layout}`]: typeof layout !== "undefined",
+				[`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined", 
 				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 			})}
 			id=${ifDefined(id)}
 			role="dialog"
 			tabindex="-1"
 			aria-modal="true"
-		>
+			style=${ifDefined(styleMap(customStyles))}
+		> 
 			<div class="${rootClass}-grid">
-				${when(heading, () => [
-					html`<h1 class="${rootClass}-heading">${heading}</h1>`,
-					Divider({
-						horizontal: true,
-						customClasses: [`${rootClass}-divider`],
-						...globals,
-					}),
-				])}
+				${when(hasHeroImage, () =>
+					html`
+						<div 
+							class="spectrum-Dialog-hero"
+							style="background-image:url(${heroImageUrl ? heroImageUrl : "example-card-portrait.png"})">
+						</div>
+					`
+				)}
+				<div class="${rootClass}-header">
+					${when(heading, () => html`
+						<h1 class="${rootClass}-heading">${heading}</h1>
+					`)}
+					${when(header, () => html`
+						<span class="${rootClass}-header-content">
+							${Typography({
+								semantics: "body",
+								size: "m",
+								// @todo: takeover dialogs can accept other components in their headers. could the renderContent function work here?
+								content: [ header ]
+							})}
+						</span>
+					`,
+				)}
+				</div>
 				<section class="${rootClass}-content">${content.map((c) => (typeof c === "function" ? c({}) : c))}</section>
-				${when(isDismissable, () =>
+				${when(isDismissible, () =>
 					CloseButton({
 						customClasses: [`${rootClass}-closeButton`],
-						...globals,
 						onclick: () => {
-							updateArgs({ isOpen: !isOpen });
+							updateArgs(toggleOpen);
 						},
-					})
+					}, context)
 				)}
+				${when(layout === "fullscreen" || layout === "fullscreenTakeover", () => html`
+					<div class="${rootClass}-buttonGroup">
+						${ButtonGroup({
+							items: [
+								{
+									label: "Cancel",
+									treatment: "outline",
+									variant: "secondary",
+								},
+								{
+									label: "Save",
+									treatment: "fill",
+									variant: "accent"
+								},
+							],
+							onclick: () => {
+								updateArgs(toggleOpen);
+							},
+						}, context)}
+					</div>
+				`)}
+				${when(hasFooter, () => html`
+					<footer class="${rootClass}-footer">
+						${when(typeof footer !== "undefined", () => html`
+							<div class="${rootClass}-footer-content">
+								${when(hasCheckbox, () => html`
+						 			${Checkbox({
+										label: footer,
+									})}
+								`,
+									() => 
+										Typography({
+											semantics: "body",
+											size: "m",
+											content: [ footer ]
+										})
+								)}
+							</div>
+							<div class="${rootClass}-buttonGroup">
+								${ButtonGroup({
+									items: [
+										{
+											label: "Cancel",
+											treatment: "outline",
+											variant: "secondary",
+										},
+										{
+											label: "Save",
+											treatment: "fill",
+											variant: "accent"
+										},
+									],
+									onclick: () => {
+										updateArgs(toggleOpen);
+									},
+								}, context)}
+							</div>
+						`, 
+						() => html`
+						 	<div class="${rootClass}-noFooter"></div>
+							<div class="${rootClass}-buttonGroup">
+								${ButtonGroup({
+									items: [
+										{
+											label: "Cancel",
+											treatment: "outline",
+											variant: "secondary",
+										},
+										{
+											label: "Save",
+											treatment: "fill",
+											variant: "accent"
+										},
+									],
+									onclick: () => {
+										updateArgs(toggleOpen);
+									},
+								}, context)}
+							</div>
+						 `
+						)}
+					</footer>
+					`,
+					() => html`
+						<div class="${rootClass}-noFooter"></div>
+				`)}
 			</div>
 		</div>
 	`;
-
 	if (showModal) {
 		return html`
 			${Underlay({
-				...globals,
 				isOpen,
 			})}
-			${Button({
-				...globals,
-				size: "m",
-				variant: "secondary",
-				label: "Click to open dialog",
-				treatment: "outline",
-				customClasses: [],
-				customStyles: {
-					position: "absolute",
-					insetInlineStart: "50%",
-					insetBlockStart: "50%",
-					transform: "translate(-50%, -50%)",
-				},
-				onclick: () => {
-					updateArgs({ isOpen: !isOpen });
-				},
-			})}
 			${Modal({
-				...globals,
 				isOpen,
 				content: Dialog,
-			})}
+				variant: layout,
+				customStyles: {
+					"--mod-modal-background-color": "transparent"
+				},
+			}, context)}
 		`;
 	}
 	else {
diff --git a/components/modal/index.css b/components/modal/index.css
index 8f272e8da6f..3de72f1d193 100644
--- a/components/modal/index.css
+++ b/components/modal/index.css
@@ -22,7 +22,7 @@ governing permissions and limitations under the License.
 	--spectrum-modal-max-width: 90%;
 
 	--spectrum-modal-background-color: var(--spectrum-gray-75);
-	--spectrum-modal-confirm-border-radius: var(--spectrum-corner-radius-100);
+	--spectrum-modal-confirm-border-radius: var(--spectrum-corner-radius-extra-large-default);
 	--spectrum-modal-confirm-exit-animation-duration: var(--spectrum-animation-duration-100);
 	--spectrum-modal-confirm-entry-animation-duration: var(--spectrum-animation-duration-500);
 	--spectrum-modal-confirm-entry-animation-delay: var(--spectrum-animation-duration-200);
@@ -92,28 +92,19 @@ governing permissions and limitations under the License.
 	pointer-events: auto;
 
 	/* Exit animations */
-	transition: opacity var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-modal-confirm-exit-animation-duration)) var(--spectrum-animation-ease-in)
-			var(--mod-modal-confirm-exit-animation-delay, var(--spectrum-modal-confirm-exit-animation-delay)),
-		visibility 0ms linear
-			calc(
-				var(--mod-modal-confirm-exit-animation-delay, var(--spectrum-modal-confirm-exit-animation-delay)) +
-					var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-modal-confirm-exit-animation-duration))
-			),
-		transform 0ms linear
-			calc(
-				var(--mod-modal-confirm-exit-animation-delay, var(--spectrum-modal-confirm-exit-animation-delay)) +
-					var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-modal-confirm-exit-animation-duration))
-			);
+	transition:
+		opacity var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-modal-confirm-exit-animation-duration)) var(--spectrum-animation-ease-in) var(--mod-modal-confirm-exit-animation-delay, var(--spectrum-modal-confirm-exit-animation-delay)),
+		visibility 0ms linear calc(var(--mod-modal-confirm-exit-animation-delay, var(--spectrum-modal-confirm-exit-animation-delay)) + var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-modal-confirm-exit-animation-duration))),
+		transform 0ms linear calc(var(--mod-modal-confirm-exit-animation-delay, var(--spectrum-modal-confirm-exit-animation-delay)) + var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-modal-confirm-exit-animation-duration)));
 }
 
 .spectrum-Modal.is-open {
 	@extend %spectrum-overlay--open;
 
 	/* Entry animations */
-	transition: transform var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-modal-confirm-entry-animation-duration)) var(--spectrum-animation-ease-out)
-			var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-modal-confirm-entry-animation-delay)),
-		opacity var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-modal-confirm-entry-animation-duration)) var(--spectrum-animation-ease-out)
-			var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-modal-confirm-entry-animation-delay));
+	transition:
+		transform var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-modal-confirm-entry-animation-duration)) var(--spectrum-animation-ease-out) var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-modal-confirm-entry-animation-delay)),
+		opacity var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-modal-confirm-entry-animation-duration)) var(--spectrum-animation-ease-out) var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-modal-confirm-entry-animation-delay));
 
 	transform: translateY(0);
 }
diff --git a/components/modal/stories/template.js b/components/modal/stories/template.js
index c89a1eb484a..b72347a29df 100644
--- a/components/modal/stories/template.js
+++ b/components/modal/stories/template.js
@@ -1,5 +1,7 @@
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 
 import "../index.css";
 
@@ -9,6 +11,7 @@ export const Template = ({
 	isOpen = true,
 	variant,
 	content = [],
+	customStyles = {},
 }) => html`
 	<div class="${rootClass}-wrapper">
 		<div
@@ -18,6 +21,7 @@ export const Template = ({
 				"is-open": isOpen,
 				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 			})}
+			style=${ifDefined(styleMap(customStyles))}	
 		>
 			${content}
 		</div>
diff --git a/components/tray/stories/tray.stories.js b/components/tray/stories/tray.stories.js
index 7965a71f669..00f6d1f6526 100644
--- a/components/tray/stories/tray.stories.js
+++ b/components/tray/stories/tray.stories.js
@@ -58,7 +58,7 @@ export const Default = ({
 				() => Dialog({
 						heading,
 						content: ["You have 5 new messages!"],
-						isDismissable: false,
+						isDismissible: false,
 					})
 			],
 		})}
@@ -71,7 +71,7 @@ export const Default = ({
 					() => Dialog({
 							heading: "You have new messages waiting in your inbox",
 							content: ["You have 5 new messages! This notification is extra long so it wraps to the next line"],
-							isDismissable: false,
+							isDismissible: false,
 						})
 				],
 				customStyles: {
diff --git a/components/underlay/index.css b/components/underlay/index.css
index d3b4472b8e7..a88bbf4fab5 100644
--- a/components/underlay/index.css
+++ b/components/underlay/index.css
@@ -10,50 +10,47 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import '@spectrum-css/commons/overlay.css';
+@import "@spectrum-css/commons/overlay.css";
 
 .spectrum-Underlay {
-  --spectrum-underlay-background-entry-animation-delay: var(--spectrum-animation-duration-0);
-  --spectrum-underlay-background-exit-animation-ease: var(--spectrum-animation-ease-in);
-  --spectrum-underlay-background-entry-animation-ease: var(--spectrum-animation-ease-out);
-  --spectrum-underlay-background-exit-animation-duration: var(--spectrum-animation-duration-100);
-  --spectrum-underlay-background-entry-animation-duration: var(--spectrum-animation-duration-600);
-  --spectrum-underlay-background-exit-animation-duration: var(--spectrum-animation-duration-300);
-  --spectrum-underlay-background-exit-animation-delay: var(--spectrum-animation-duration-200);
-
-    /* TODO update to --spectrum-overlay-color token once an RGB stripped value is available */
-  --spectrum-underlay-background-color: rgba(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity));;
+	--spectrum-underlay-background-entry-animation-delay: var(--spectrum-animation-duration-0);
+	--spectrum-underlay-background-exit-animation-ease: var(--spectrum-animation-ease-in);
+	--spectrum-underlay-background-entry-animation-ease: var(--spectrum-animation-ease-out);
+
+	/* TODO: --spectrum-underlay-background-exit-animation-duration is duplicated, but with different values. 
+	This first declaration is commented out until we know which value is determined "correct." */
+	/* --spectrum-underlay-background-exit-animation-duration: var(--spectrum-animation-duration-100); */
+	--spectrum-underlay-background-entry-animation-duration: var(--spectrum-animation-duration-600);
+	--spectrum-underlay-background-exit-animation-duration: var(--spectrum-animation-duration-300);
+	--spectrum-underlay-background-exit-animation-delay: var(--spectrum-animation-duration-200);
+
+	/* TODO Cannot use --spectrum-overlay-color token until it is pointing to a token without the alpha value. */
+	--spectrum-underlay-background-color: rgba(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity));
 }
 
 .spectrum-Underlay {
-  @extend %spectrum-overlay;
+	@extend %spectrum-overlay;
 
-  position: fixed;
-  inset-block: 0;
-  inset-inline: 0;
+	position: fixed;
+	inset-block: 0;
+	inset-inline: 0;
 
-  background-color: var(--mod-underlay-background-color, var(--spectrum-underlay-background-color));
+	background-color: var(--mod-underlay-background-color, var(--spectrum-underlay-background-color));
 
-  /* Float above things by default */
-  z-index: 1;
+	/* Float above things by default */
+	z-index: 1;
 
-  overflow: hidden;
+	overflow: hidden;
 
-  /* Exit animations */
-  transition: opacity var(--mod-underlay-background-exit-animation-duration, var(--spectrum-underlay-background-exit-animation-duration))
-                      var(--mod-underlay-background-exit-animation-ease, var(--spectrum-underlay-background-exit-animation-ease))
-                      var(--mod-underlay-background-exit-animation-delay, var(--spectrum-underlay-background-exit-animation-delay)),
-              visibility 0ms
-              linear calc(
-                      var(--mod-underlay-background-exit-animation-delay, var(--spectrum-underlay-background-exit-animation-delay)) +
-                      var(--mod-underlay-background-exit-animation-duration, var(--spectrum-underlay-background-exit-animation-duration)));
+	/* Exit animations */
+	transition:
+		opacity var(--mod-underlay-background-exit-animation-duration, var(--spectrum-underlay-background-exit-animation-duration)) var(--mod-underlay-background-exit-animation-ease, var(--spectrum-underlay-background-exit-animation-ease)) var(--mod-underlay-background-exit-animation-delay, var(--spectrum-underlay-background-exit-animation-delay)),
+		visibility 0ms linear calc(var(--mod-underlay-background-exit-animation-delay, var(--spectrum-underlay-background-exit-animation-delay)) + var(--mod-underlay-background-exit-animation-duration, var(--spectrum-underlay-background-exit-animation-duration)));
 }
 
 .spectrum-Underlay.is-open {
-  @extend %spectrum-overlay--open;
+	@extend %spectrum-overlay--open;
 
-  /* Entry animations */
-  transition: opacity var(--mod-underlay-background-entry-animation-duration, var(--spectrum-underlay-background-entry-animation-duration))
-                      var(--mod-underlay-background-entry-animation-ease, var(--spectrum-underlay-background-entry-animation-ease))
-                      var(--mod-underlay-background-entry-animation-delay, var(--spectrum-underlay-background-entry-animation-delay));
+	/* Entry animations */
+	transition: opacity var(--mod-underlay-background-entry-animation-duration, var(--spectrum-underlay-background-entry-animation-duration)) var(--mod-underlay-background-entry-animation-ease, var(--spectrum-underlay-background-entry-animation-ease)) var(--mod-underlay-background-entry-animation-delay, var(--spectrum-underlay-background-entry-animation-delay));
 }
diff --git a/tokens/custom/large-vars.css b/tokens/custom/large-vars.css
index fe98b05d9e7..f3c5e001f67 100644
--- a/tokens/custom/large-vars.css
+++ b/tokens/custom/large-vars.css
@@ -105,6 +105,8 @@
 	--spectrum-slider-tick-mark-height: 13px;
 	--spectrum-slider-ramp-track-height: 20px;
 
+  --spectrum-standard-dialog-spacing-edge-to-content: var(--spectrum-spacing-400);
+
 	--spectrum-treeview-item-indentation-medium: 20px;
 	--spectrum-treeview-item-indentation-small: 15px;
 	--spectrum-treeview-item-indentation-large: 25px;
diff --git a/tokens/custom/medium-vars.css b/tokens/custom/medium-vars.css
index a8afcb49477..448683fe8b5 100644
--- a/tokens/custom/medium-vars.css
+++ b/tokens/custom/medium-vars.css
@@ -103,6 +103,8 @@
 	--spectrum-slider-ramp-track-height: 16px;
 	--spectrum-slider-tick-mark-height: 10px;
 
+	--spectrum-standard-dialog-spacing-edge-to-content: var(--spectrum-spacing-500);
+
 	--spectrum-treeview-indicator-inset-block-start: 5px;
 	--spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200);
 	--spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300);
diff --git a/tokens/dist/css/large-vars.css b/tokens/dist/css/large-vars.css
index be7f0ae5feb..d1c5432fc1d 100644
--- a/tokens/dist/css/large-vars.css
+++ b/tokens/dist/css/large-vars.css
@@ -760,6 +760,8 @@
 	--spectrum-slider-tick-mark-height:13px;
 	--spectrum-slider-ramp-track-height:20px;
 
+  --spectrum-standard-dialog-spacing-edge-to-content:var(--spectrum-spacing-400);
+
 	--spectrum-treeview-item-indentation-medium:20px;
 	--spectrum-treeview-item-indentation-small:15px;
 	--spectrum-treeview-item-indentation-large:25px;
diff --git a/tokens/dist/css/medium-vars.css b/tokens/dist/css/medium-vars.css
index db07bf4204a..e1f0e19e9c7 100644
--- a/tokens/dist/css/medium-vars.css
+++ b/tokens/dist/css/medium-vars.css
@@ -758,6 +758,8 @@
 	--spectrum-slider-ramp-track-height:16px;
 	--spectrum-slider-tick-mark-height:10px;
 
+	--spectrum-standard-dialog-spacing-edge-to-content:var(--spectrum-spacing-500);
+
 	--spectrum-treeview-indicator-inset-block-start:5px;
 	--spectrum-treeview-item-indentation-small:var(--spectrum-spacing-200);
 	--spectrum-treeview-item-indentation-medium:var(--spectrum-spacing-300);
diff --git a/tokens/dist/index.css b/tokens/dist/index.css
index 8a6b1d66614..e36e769368a 100644
--- a/tokens/dist/index.css
+++ b/tokens/dist/index.css
@@ -2610,6 +2610,8 @@
 	--spectrum-slider-tick-mark-height: 13px;
 	--spectrum-slider-ramp-track-height: 20px;
 
+	--spectrum-standard-dialog-spacing-edge-to-content: var(--spectrum-spacing-400);
+
 	--spectrum-treeview-item-indentation-medium: 20px;
 	--spectrum-treeview-item-indentation-small: 15px;
 	--spectrum-treeview-item-indentation-large: 25px;
@@ -4199,6 +4201,8 @@
 	--spectrum-slider-ramp-track-height: 16px;
 	--spectrum-slider-tick-mark-height: 10px;
 
+	--spectrum-standard-dialog-spacing-edge-to-content: var(--spectrum-spacing-500);
+
 	--spectrum-treeview-indicator-inset-block-start: 5px;
 	--spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200);
 	--spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300);
diff --git a/yarn.lock b/yarn.lock
index 1cee1fe6925..e4e81b0c929 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3293,16 +3293,21 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@spectrum-css/dialog@workspace:components/dialog"
   peerDependencies:
+    "@spectrum-css/checkbox": ">=9"
     "@spectrum-css/closebutton": ">=5"
-    "@spectrum-css/divider": ">=3"
     "@spectrum-css/modal": ">=5"
     "@spectrum-css/tokens": ">=14.0.0-next.3"
+    "@spectrum-css/typography": ">=6"
     "@spectrum-css/underlay": ">=3"
   peerDependenciesMeta:
-    "@spectrum-css/divider":
+    "@spectrum-css/checkbox":
+      optional: true
+    "@spectrum-css/closebutton":
       optional: true
     "@spectrum-css/modal":
       optional: true
+    "@spectrum-css/typography":
+      optional: true
     "@spectrum-css/underlay":
       optional: true
   languageName: unknown

From 6505da4293d55694d789ba89eb084858b85cec07 Mon Sep 17 00:00:00 2001
From: Marissa Huysentruyt <marissa.huysentruyt@heysparkbox.com>
Date: Mon, 9 Dec 2024 15:34:58 -0500
Subject: [PATCH 2/2] docs(dialog): rebase fixes

- override layout:centered parameter with layout:padded instead so the
dialogs are visible on their canvases on the docs page.
- correct the t-shirt sizes for small and large dialogs on the docs page
---
 components/dialog/stories/dialog.stories.js | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/components/dialog/stories/dialog.stories.js b/components/dialog/stories/dialog.stories.js
index e6b4feb5043..936a11cb7ce 100644
--- a/components/dialog/stories/dialog.stories.js
+++ b/components/dialog/stories/dialog.stories.js
@@ -5,10 +5,10 @@ import { Template } from "./template.js";
 
 /**
  * A dialog displays important information that users need to acknowledge. They appear over the interface and block further interactions. Standard dialogs are the most frequent type of dialogs. They appear in the center of the screen over the interface and should be used for moderately complex tasks. Takeover dialogs are large types of dialogs. They use the totality of the screen and should be used for modal experiences with complex workflows.
- * 
+ *
  * ## Usage with modal component
  * When a dialog component is used in tandem with a [modal](/docs/components-modal--docs), implementations should set `--mod-modal-background-color` to `transparent`. This will prevent any background color used in the modal from peeking through from behind the dialog at the rounded corners, allowing the dialog's background color to take precedence.
- * 
+ *
  * The alert variants that were previously a part of Dialog were moved to their own component, [alert dialog](/docs/components-alert-dialog--docs).
  */
 export default {
@@ -25,7 +25,7 @@ export default {
 			},
 			control: { type: "text" },
 		},
-		header: { 
+		header: {
 			name: "Additional header content",
 			description: "Controls header content.",
 			type: { name: "string" },
@@ -170,6 +170,7 @@ export default {
 		status: {
 			type: "migrated",
 		},
+		layout: "padded",
 	},
 };
 
@@ -206,7 +207,7 @@ DefaultSmall.parameters = {
 };
 DefaultSmall.args = {
 	...Default.args,
-	size: "small",
+	size: "s",
 };
 
 export const DefaultLarge = Template.bind({});
@@ -217,7 +218,7 @@ DefaultLarge.parameters = {
 };
 DefaultLarge.args = {
 	...Default.args,
-	size: "large",
+	size: "l",
 };
 
 /**