From 1a599a655c29883076eadabbab02ed94a1928662 Mon Sep 17 00:00:00 2001
From: Westbrook Johnson <westbrook.johnson@gmail.com>
Date: Tue, 20 Oct 2020 16:29:09 -0400
Subject: [PATCH] feat(dialog): use latest @spectrum-css/dialog beta

MIGRATION: `sp-dialog` no longer supports the `open` attribute
and will be open by default
MIGRATION: `sp-dialog`'s `title` slot renamed to `heading`
MIGRATION: `dismissible` attribute renamed to `dismissable`
---
 packages/dialog/dialog-wrapper.md             |  39 +-
 packages/dialog/package.json                  |   3 +-
 packages/dialog/src/dialog-wrapper.css        |  13 -
 packages/dialog/src/dialog.css                |  74 ++-
 packages/dialog/src/spectrum-config.js        |  60 +-
 .../dialog/src/spectrum-dialog-wrapper.css    | 112 ----
 packages/dialog/src/spectrum-dialog.css       | 560 ++++++++----------
 packages/dialog/test/dialog-wrapper.test.ts   |  12 +-
 packages/dialog/test/dialog.test.ts           |  15 +-
 9 files changed, 378 insertions(+), 510 deletions(-)
 delete mode 100644 packages/dialog/src/dialog-wrapper.css
 delete mode 100644 packages/dialog/src/spectrum-dialog-wrapper.css

diff --git a/packages/dialog/dialog-wrapper.md b/packages/dialog/dialog-wrapper.md
index 41e76c41d0..f4e61d3114 100644
--- a/packages/dialog/dialog-wrapper.md
+++ b/packages/dialog/dialog-wrapper.md
@@ -31,7 +31,7 @@ import { DialogWrapper } from '@spectrum-web-components/dialog';
 <sp-dialog-wrapper
     id="dialog-wrapper-demo"
     headline="Dialog title"
-    dismissible
+    dismissable
     underlay
     footer="Content for footer"
     hidden
@@ -92,3 +92,40 @@ import { DialogWrapper } from '@spectrum-web-components/dialog';
     Toggle Dialog
 </sp-button>
 ```
+
+### Fullscreen Takeover Mode
+
+```html
+<sp-dialog-wrapper
+    id="dialog-wrapper-demo"
+    headline="Dialog title"
+    mode="fullscreenTakeover"
+    confirm-label="Keep Both"
+    secondary-label="Replace"
+    cancel-label="Cancel"
+    footer="Content for footer"
+    hidden
+>
+    Content of the dialog
+</sp-dialog-wrapper>
+<sp-button
+    onClick="
+        const dialogWrapper = this.previousElementSibling;
+        dialogWrapper.hidden = false;
+        dialogWrapper.open = true;
+        function handleEvent({type}) {
+            spAlert(this, `<sp-dialog-wrapper> '${type}' event handled.`);
+            dialogWrapper.open = false;
+            dialogWrapper.removeEventListener('confirm', handleEvent);
+            dialogWrapper.removeEventListener('secondary', handleEvent);
+            dialogWrapper.removeEventListener('cancel', handleEvent);
+        }
+        dialogWrapper.addEventListener('confirm', handleEvent);
+        dialogWrapper.addEventListener('secondary', handleEvent);
+        dialogWrapper.addEventListener('cancel', handleEvent);
+    "
+    variant="primary"
+>
+    Toggle Dialog
+</sp-button>
+```
diff --git a/packages/dialog/package.json b/packages/dialog/package.json
index 083a6be53d..858a2e88f8 100644
--- a/packages/dialog/package.json
+++ b/packages/dialog/package.json
@@ -50,13 +50,14 @@
     "author": "",
     "license": "Apache-2.0",
     "devDependencies": {
-        "@spectrum-css/dialog": "^3.0.0-beta.3"
+        "@spectrum-css/dialog": "^3.0.0-beta.4"
     },
     "dependencies": {
         "@spectrum-web-components/base": "^0.1.3",
         "@spectrum-web-components/button": "^0.9.4",
         "@spectrum-web-components/icon": "^0.6.3",
         "@spectrum-web-components/icons-ui": "^0.3.3",
+        "@spectrum-web-components/modal": "^0.0.1",
         "@spectrum-web-components/shared": "^0.7.4",
         "@spectrum-web-components/underlay": "^0.3.3",
         "tslib": "^2.0.0"
diff --git a/packages/dialog/src/dialog-wrapper.css b/packages/dialog/src/dialog-wrapper.css
deleted file mode 100644
index b4a7940e28..0000000000
--- a/packages/dialog/src/dialog-wrapper.css
+++ /dev/null
@@ -1,13 +0,0 @@
-/*
-Copyright 2020 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
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-
-@import './spectrum-dialog-wrapper.css';
diff --git a/packages/dialog/src/dialog.css b/packages/dialog/src/dialog.css
index 9fe61dc906..397031fc6c 100644
--- a/packages/dialog/src/dialog.css
+++ b/packages/dialog/src/dialog.css
@@ -12,13 +12,6 @@ governing permissions and limitations under the License.
 
 @import './spectrum-dialog.css';
 
-::slotted([slot='button']) {
-    margin-left: var(
-        --spectrum-buttongroup-button-gap-x,
-        var(--spectrum-global-dimension-static-size-200)
-    );
-}
-
 .content {
     overflow: hidden;
 }
@@ -26,3 +19,70 @@ governing permissions and limitations under the License.
 .content[tabindex] {
     overflow: auto;
 }
+
+::slotted(img[slot='hero']) {
+    width: 100%;
+    height: auto;
+}
+
+/**
+ * When precessing CSS we don't take into account @media syntax: 
+ * https://github.com/adobe/spectrum-web-components/issues/593
+ * This manually prefers the "desktop" styling for this content.Z
+ */
+
+:host([mode='fullscreen']),
+:host([mode='fullscreenTakeover']) {
+    /* .spectrum-Dialog--fullscreen,
+   * .spectrum-Dialog--fullscreenTakeover */
+    max-height: none;
+    max-width: none;
+}
+:host([mode='fullscreen']) .grid,
+:host([mode='fullscreenTakeover']) .grid {
+    /* .spectrum-Dialog--fullscreen.spectrum-Dialog .spectrum-Dialog-grid,
+   * .spectrum-Dialog--fullscreenTakeover.spectrum-Dialog .spectrum-Dialog-grid */
+    display: grid;
+    grid-template-columns: var(--spectrum-dialog-confirm-padding) 1fr auto auto var(
+            --spectrum-dialog-confirm-padding
+        );
+    grid-template-rows: var(--spectrum-dialog-confirm-padding) auto auto 1fr var(
+            --spectrum-dialog-confirm-padding
+        );
+    grid-template-areas: '.    .       .       .            .' '.    heading header  buttonGroup  .' '.    divider divider divider      .' '.    content content content      .' '.    .       .       .            .';
+}
+:host([mode='fullscreen']) ::slotted([slot='heading']),
+:host([mode='fullscreenTakeover']) ::slotted([slot='heading']) {
+    /* .spectrum-Dialog--fullscreen .spectrum-Dialog-heading,
+   * .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-heading */
+    font-size: 28px;
+}
+:host([mode='fullscreen']) .content,
+:host([mode='fullscreenTakeover']) .content {
+    /* .spectrum-Dialog--fullscreen .spectrum-Dialog-content,
+   * .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-content */
+    max-height: none;
+}
+:host([mode='fullscreen']) .buttonGroup,
+:host([mode='fullscreen']) .footer,
+:host([mode='fullscreenTakeover']) .buttonGroup,
+:host([mode='fullscreenTakeover']) .footer {
+    /* .spectrum-Dialog--fullscreen .spectrum-Dialog-buttonGroup,
+   * .spectrum-Dialog--fullscreen .spectrum-Dialog-footer,
+   * .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-buttonGroup,
+   * .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-footer */
+    padding-top: 0;
+}
+:host([mode='fullscreen']) .footer,
+:host([mode='fullscreenTakeover']) .footer {
+    /* .spectrum-Dialog--fullscreen .spectrum-Dialog-footer,
+   * .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-footer */
+    display: none;
+}
+:host([mode='fullscreen']) .buttonGroup,
+:host([mode='fullscreenTakeover']) .buttonGroup {
+    /* .spectrum-Dialog--fullscreen .spectrum-Dialog-buttonGroup,
+   * .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-buttonGroup */
+    grid-area: buttonGroup;
+    align-self: start;
+}
diff --git a/packages/dialog/src/spectrum-config.js b/packages/dialog/src/spectrum-config.js
index 69e1c350c4..2cf47c4307 100644
--- a/packages/dialog/src/spectrum-config.js
+++ b/packages/dialog/src/spectrum-config.js
@@ -13,42 +13,6 @@ governing permissions and limitations under the License.
 const config = {
     spectrum: 'dialog',
     components: [
-        {
-            name: 'dialog-wrapper',
-            host: {
-                selector: '.spectrum-Dialog-wrapper',
-            },
-            attributes: [
-                {
-                    type: 'boolean',
-                    selector: '.is-open',
-                    name: 'open',
-                },
-                {
-                    type: 'boolean',
-                    selector: '.spectrum-Dialog--responsive',
-                    name: 'responsive',
-                },
-            ],
-            descendantAttributes: [
-                {
-                    type: 'boolean',
-                    name: 'mode="fullscreen"',
-                    selector: '.spectrum-Dialog--fullscreen',
-                },
-                {
-                    type: 'boolean',
-                    name: 'mode="fullscreen"',
-                    selector: '.spectrum-Dialog--fullscreenTakeover',
-                },
-            ],
-            classes: [
-                {
-                    selector: '.spectrum-Dialog',
-                    name: 'dialog',
-                },
-            ],
-        },
         {
             name: 'dialog',
             host: {
@@ -67,8 +31,8 @@ const config = {
                 },
                 {
                     type: 'boolean',
-                    selector: '.spectrum-Dialog--dismissible',
-                    name: 'dismissible',
+                    selector: '.spectrum-Dialog--dismissable',
+                    name: 'dismissable',
                 },
                 {
                     type: 'boolean',
@@ -96,8 +60,8 @@ const config = {
             ],
             slots: [
                 {
-                    selector: '.spectrum-Dialog-title',
-                    name: 'title',
+                    selector: '.spectrum-Dialog-heading',
+                    name: 'heading',
                 },
                 {
                     selector: '.spectrum-Dialog-hero',
@@ -109,6 +73,14 @@ const config = {
                 },
             ],
             classes: [
+                {
+                    selector: '.spectrum-Dialog-grid',
+                    name: 'grid',
+                },
+                {
+                    selector: '.spectrum-Dialog-divider',
+                    name: 'divider',
+                },
                 {
                     selector: '.spectrum-Dialog-content',
                     name: 'content',
@@ -133,6 +105,14 @@ const config = {
                     selector: '.spectrum-Button',
                     name: 'button',
                 },
+                {
+                    selector: '.spectrum-Dialog-buttonGroup',
+                    name: 'buttonGroup',
+                },
+                {
+                    selector: '.spectrum-Dialog-buttonGroup--noFooter',
+                    name: 'buttonGroup--noFooter',
+                },
             ],
             exclude: [/\.spectrum-Dialog-wrapper/],
         },
diff --git a/packages/dialog/src/spectrum-dialog-wrapper.css b/packages/dialog/src/spectrum-dialog-wrapper.css
deleted file mode 100644
index a389e7670a..0000000000
--- a/packages/dialog/src/spectrum-dialog-wrapper.css
+++ /dev/null
@@ -1,112 +0,0 @@
-/* stylelint-disable */ /* 
-Copyright 2020 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
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-
-THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
-:host([dir='ltr']) .spectrum-Dialog-hero {
-    /* [dir=ltr] .spectrum-Dialog-hero */
-    margin-left: calc(
-        -1 * var(--spectrum-dialog-padding)
-    ); /* [dir=ltr] .spectrum-Dialog-hero */
-    border-top-left-radius: var(
-        --spectrum-dialog-border-radius,
-        var(--spectrum-global-dimension-size-50)
-    );
-}
-:host([dir='ltr']) .spectrum-Dialog-hero,
-:host([dir='rtl']) .spectrum-Dialog-hero {
-    /* [dir=ltr] .spectrum-Dialog-hero,
-   * [dir=rtl] .spectrum-Dialog-hero */
-    margin-right: calc(-1 * var(--spectrum-dialog-padding));
-}
-:host([dir='rtl']) .spectrum-Dialog-hero {
-    /* [dir=rtl] .spectrum-Dialog-hero */
-    margin-left: calc(
-        -1 * var(--spectrum-dialog-padding)
-    ); /* [dir=rtl] .spectrum-Dialog-hero */
-    border-top-left-radius: var(
-        --spectrum-dialog-border-radius,
-        var(--spectrum-global-dimension-size-50)
-    );
-}
-:host([dir='ltr']) .spectrum-Dialog-hero,
-:host([dir='rtl']) .spectrum-Dialog-hero {
-    /* [dir=ltr] .spectrum-Dialog-hero,
-   * [dir=rtl] .spectrum-Dialog-hero */
-    border-top-right-radius: var(
-        --spectrum-dialog-border-radius,
-        var(--spectrum-global-dimension-size-50)
-    );
-}
-:host {
-    /* .spectrum-Dialog-wrapper */
-    position: fixed;
-    left: 0;
-    right: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    width: 100%;
-    height: 100%;
-    visibility: hidden;
-    pointer-events: none;
-    z-index: 2;
-    transition: visibility 0ms linear
-        var(--spectrum-global-animation-duration-100, 0.13s);
-}
-:host([open]) {
-    /* .spectrum-Dialog-wrapper.is-open */
-    visibility: visible;
-}
-.dialog:not([mode='fullscreen']):not([mode='fullscreen']) {
-    /* .spectrum-Dialog-wrapper .spectrum-Dialog:not(.spectrum-Dialog--fullscreen):not(.spectrum-Dialog--fullscreenTakeover) */
-    pointer-events: auto;
-    position: relative;
-    left: auto;
-    top: auto;
-    transform: translateY(
-        var(
-            --spectrum-dialog-entry-animation-distance,
-            var(--spectrum-global-dimension-size-250)
-        )
-    );
-    margin-top: -2vh;
-}
-:host([open]) .dialog:not([mode='fullscreen']):not([mode='fullscreen']) {
-    /* .spectrum-Dialog-wrapper .spectrum-Dialog:not(.spectrum-Dialog--fullscreen):not(.spectrum-Dialog--fullscreenTakeover).is-open */
-    transform: translateY(0);
-}
-:host([responsive]) {
-    /* .spectrum-Dialog-wrapper .spectrum-Dialog--responsive */
-    margin-top: 0;
-}
-:host([dir='ltr']) .spectrum-Dialog-closeButton {
-    /* [dir=ltr] .spectrum-Dialog-closeButton */
-    right: calc(-1 * var(--spectrum-global-dimension-size-350));
-}
-:host([dir='rtl']) .spectrum-Dialog-closeButton {
-    /* [dir=rtl] .spectrum-Dialog-closeButton */
-    left: calc(-1 * var(--spectrum-global-dimension-size-350));
-}
-:host([dir='ltr']) .spectrum-Dialog-typeIcon {
-    /* [dir=ltr] .spectrum-Dialog-typeIcon */
-    margin-left: var(
-        --spectrum-dialog-icon-margin-left,
-        var(--spectrum-global-dimension-static-size-300)
-    );
-}
-:host([dir='rtl']) .spectrum-Dialog-typeIcon {
-    /* [dir=rtl] .spectrum-Dialog-typeIcon */
-    margin-right: var(
-        --spectrum-dialog-icon-margin-left,
-        var(--spectrum-global-dimension-static-size-300)
-    );
-}
diff --git a/packages/dialog/src/spectrum-dialog.css b/packages/dialog/src/spectrum-dialog.css
index d40a420837..921b0a76eb 100644
--- a/packages/dialog/src/spectrum-dialog.css
+++ b/packages/dialog/src/spectrum-dialog.css
@@ -12,106 +12,18 @@ governing permissions and limitations under the License.
 THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
 :host {
     /* .spectrum-Dialog */
-    visibility: hidden;
-    opacity: 0;
-    transition: transform var(--spectrum-global-animation-duration-100, 0.13s)
-            ease-in-out,
-        opacity var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out,
-        visibility 0ms linear
-            var(--spectrum-global-animation-duration-100, 0.13s);
-    pointer-events: none; /* .spectrum-Dialog */
     display: flex;
-    flex-direction: column;
-    position: fixed;
-    left: 50%;
-    top: 50%;
-    transform: translateX(-50%) translateY(-50%)
-        translateY(
-            var(
-                --spectrum-dialog-entry-animation-distance,
-                var(--spectrum-global-dimension-size-250)
-            )
-        );
-    z-index: 2;
     box-sizing: border-box;
-    max-width: 90vw;
-    max-height: 90vh;
     width: -webkit-fit-content;
     width: -moz-fit-content;
     width: fit-content;
     min-width: var(
-        --spectrum-dialog-min-width,
+        --spectrum-dialog-confirm-min-width,
         var(--spectrum-global-dimension-static-size-3600)
     );
-    padding: var(--spectrum-dialog-padding);
-    border-radius: var(
-        --spectrum-dialog-border-radius,
-        var(--spectrum-global-dimension-size-50)
-    );
+    max-width: 100%;
+    max-height: inherit;
     outline: none;
-    transition: opacity
-            var(
-                --spectrum-dialog-exit-animation-duration,
-                var(--spectrum-global-animation-duration-100)
-            )
-            var(--spectrum-global-animation-ease-in, cubic-bezier(0.5, 0, 1, 1))
-            0ms,
-        visibility 0ms linear
-            calc(
-                0ms +
-                    var(
-                        --spectrum-dialog-exit-animation-duration,
-                        var(--spectrum-global-animation-duration-100)
-                    )
-            ),
-        transform 0ms linear
-            calc(
-                0ms +
-                    var(
-                        --spectrum-dialog-exit-animation-duration,
-                        var(--spectrum-global-animation-duration-100)
-                    )
-            );
-}
-:host([open]) {
-    /* .spectrum-Dialog.is-open */
-    visibility: visible;
-    opacity: 1;
-    transition-delay: 0ms;
-    pointer-events: auto; /* .spectrum-Dialog.is-open */
-    transition: transform
-            var(
-                --spectrum-dialog-entry-animation-duration,
-                var(--spectrum-global-animation-duration-500)
-            )
-            var(
-                --spectrum-global-animation-ease-out,
-                cubic-bezier(0, 0, 0.4, 1)
-            )
-            var(
-                --spectrum-dialog-entry-animation-delay,
-                var(--spectrum-global-animation-duration-200)
-            ),
-        opacity
-            var(
-                --spectrum-dialog-entry-animation-duration,
-                var(--spectrum-global-animation-duration-500)
-            )
-            var(
-                --spectrum-global-animation-ease-out,
-                cubic-bezier(0, 0, 0.4, 1)
-            )
-            var(
-                --spectrum-dialog-entry-animation-delay,
-                var(--spectrum-global-animation-duration-200)
-            );
-    transform: translate(-50%, calc(-50% + -2vh));
-}
-.close-button {
-    /* .spectrum-Dialog .spectrum-Dialog-closeButton */
-    display: none; /* .spectrum-Dialog-closeButton */
-    position: absolute;
-    top: calc(-1 * var(--spectrum-global-dimension-size-350));
 }
 :host([size='small']) {
     /* .spectrum-Dialog--small */
@@ -125,270 +37,249 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
     /* .spectrum-Dialog--large */
     width: 640px;
 }
-:host([dir='ltr']) ::slotted([slot='hero']) {
-    /* [dir=ltr] .spectrum-Dialog-hero */
-    margin-left: calc(
-        -1 * var(--spectrum-dialog-padding)
-    ); /* [dir=ltr] .spectrum-Dialog-hero */
-    border-top-left-radius: var(
-        --spectrum-dialog-border-radius,
-        var(--spectrum-global-dimension-size-50)
-    );
-}
-:host([dir='ltr']) ::slotted([slot='hero']),
-:host([dir='rtl']) ::slotted([slot='hero']) {
-    /* [dir=ltr] .spectrum-Dialog-hero,
-   * [dir=rtl] .spectrum-Dialog-hero */
-    margin-right: calc(-1 * var(--spectrum-dialog-padding));
-}
-:host([dir='rtl']) ::slotted([slot='hero']) {
-    /* [dir=rtl] .spectrum-Dialog-hero */
-    margin-left: calc(
-        -1 * var(--spectrum-dialog-padding)
-    ); /* [dir=rtl] .spectrum-Dialog-hero */
+::slotted([slot='hero']) {
+    /* .spectrum-Dialog-hero */
+    grid-area: hero;
+    height: var(--spectrum-global-dimension-size-1600);
     border-top-left-radius: var(
-        --spectrum-dialog-border-radius,
+        --spectrum-dialog-confirm-border-radius,
         var(--spectrum-global-dimension-size-50)
     );
-}
-:host([dir='ltr']) ::slotted([slot='hero']),
-:host([dir='rtl']) ::slotted([slot='hero']) {
-    /* [dir=ltr] .spectrum-Dialog-hero,
-   * [dir=rtl] .spectrum-Dialog-hero */
     border-top-right-radius: var(
-        --spectrum-dialog-border-radius,
+        --spectrum-dialog-confirm-border-radius,
         var(--spectrum-global-dimension-size-50)
     );
-}
-::slotted([slot='hero']) {
-    /* .spectrum-Dialog-hero */
-    height: var(--spectrum-global-dimension-size-1600);
-    margin-top: calc(-1 * var(--spectrum-dialog-padding));
-    margin-bottom: var(--spectrum-dialog-padding);
     background-size: cover;
     background-position: 50%;
+    overflow: hidden;
+}
+.grid {
+    /* .spectrum-Dialog .spectrum-Dialog-grid */
+    display: grid;
+    grid-template-columns: var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(
+            0,
+            auto
+        ) var(--spectrum-dialog-confirm-padding);
+    grid-template-rows: auto var(--spectrum-dialog-confirm-padding) auto auto 1fr auto var(
+            --spectrum-dialog-confirm-padding
+        );
+    grid-template-areas: 'hero hero    hero    hero        hero        hero' '.    .       .       .           .           .' '.    heading header  header      typeIcon    .' '.    divider divider divider     divider     .' '.    content content content     content     .' '.    footer  footer  buttonGroup buttonGroup .' '.    .       .       .           .           .';
+    width: 100%; /* .spectrum-Dialog .spectrum-Dialog-grid */
+    grid-template-columns: var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(
+            0,
+            auto
+        ) var(--spectrum-dialog-confirm-padding);
+    grid-template-areas: 'hero hero    hero    hero        hero        hero' '.    .       .       .           .           .' '.    heading heading heading     typeIcon    .' '.    header  header  header      header      .' '.    divider divider divider     divider     .' '.    content content content     content     .' '.    footer  footer  buttonGroup buttonGroup .' '.    .       .       .           .           .';
+}
+:host([dir='ltr']) ::slotted([slot='heading']) {
+    /* [dir=ltr] .spectrum-Dialog-heading */
+    padding-right: var(--spectrum-global-dimension-size-200);
+}
+:host([dir='rtl']) ::slotted([slot='heading']) {
+    /* [dir=rtl] .spectrum-Dialog-heading */
+    padding-left: var(--spectrum-global-dimension-size-200);
+}
+::slotted([slot='heading']) {
+    /* .spectrum-Dialog-heading */
+    grid-area: heading;
+    margin: 0;
+    font-size: var(--spectrum-dialog-confirm-title-text-size);
+    font-weight: var(
+        --spectrum-dialog-confirm-title-text-font-weight,
+        var(--spectrum-global-font-weight-bold)
+    );
+    line-height: var(
+        --spectrum-dialog-confirm-title-text-line-height,
+        var(--spectrum-alias-heading-text-line-height)
+    );
+    outline: none; /* .spectrum-Dialog-heading */
+    color: var(
+        --spectrum-dialog-confirm-title-text-color,
+        var(--spectrum-global-color-gray-900)
+    );
 }
 .header {
     /* .spectrum-Dialog-header */
+    grid-area: header;
     display: flex;
     align-items: center;
-    position: relative;
+    justify-content: flex-end;
     box-sizing: border-box;
-    width: 100%;
-    flex-shrink: 0;
-    border-top-left-radius: var(
-        --spectrum-dialog-border-radius,
-        var(--spectrum-global-dimension-size-50)
-    );
-    border-top-right-radius: var(
-        --spectrum-dialog-border-radius,
-        var(--spectrum-global-dimension-size-50)
-    );
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
-    outline: none;
-    padding-bottom: calc(
-        var(
-                --spectrum-dialog-rule-margin-top,
-                var(--spectrum-global-dimension-static-size-150)
-            ) +
-            var(
-                --spectrum-dialog-rule-margin-bottom,
-                var(--spectrum-global-dimension-static-size-200)
-            ) +
-            var(
-                --spectrum-dialog-rule-height,
-                var(--spectrum-global-dimension-static-size-25)
-            )
-    );
+    outline: none; /* .spectrum-Dialog .spectrum-Dialog-header */
+    justify-content: flex-start;
 }
-.header:after {
-    /* .spectrum-Dialog-header:after */
-    position: absolute;
-    bottom: var(
-        --spectrum-dialog-rule-margin-bottom,
-        var(--spectrum-global-dimension-static-size-200)
-    );
-    left: 0;
-    right: 0;
-    content: '';
-    height: var(
-        --spectrum-dialog-rule-height,
-        var(--spectrum-global-dimension-static-size-25)
-    ); /* .spectrum-Dialog-header:after */
-    background: var(
-        --spectrum-dialog-rule-color,
-        var(--spectrum-global-color-gray-300)
+.type-icon {
+    /* .spectrum-Dialog-typeIcon */
+    grid-area: typeIcon; /* .spectrum-Dialog-typeIcon */
+    color: var(
+        --spectrum-dialog-confirm-icon-color,
+        var(--spectrum-global-color-gray-900)
     );
 }
-.spectrum-Dialog--responsive {
-    /* .spectrum-Dialog--responsive */
+.divider {
+    /* .spectrum-Dialog .spectrum-Dialog-divider */
+    grid-area: divider;
     width: 100%;
-    height: 100%;
-    max-width: 100%;
-    max-height: 100%;
-    border-radius: 0;
-}
-:host([dismissible]) .footer,
-:host([no-divider]) .header:after {
-    /* .spectrum-Dialog--dismissible .spectrum-Dialog-footer,
-   * .spectrum-Dialog--noDivider .spectrum-Dialog-header:after */
-    display: none;
-}
-:host([dismissible]) .close-button {
-    /* .spectrum-Dialog--dismissible .spectrum-Dialog-closeButton */
-    display: initial;
-}
-:host([dir='ltr']) .close-button {
-    /* [dir=ltr] .spectrum-Dialog-closeButton */
-    right: calc(-1 * var(--spectrum-global-dimension-size-350));
-}
-:host([dir='rtl']) .close-button {
-    /* [dir=rtl] .spectrum-Dialog-closeButton */
-    left: calc(-1 * var(--spectrum-global-dimension-size-350));
-}
-:host([dir='ltr']) .type-icon {
-    /* [dir=ltr] .spectrum-Dialog-typeIcon */
-    margin-left: var(
-        --spectrum-dialog-icon-margin-left,
-        var(--spectrum-global-dimension-static-size-300)
+    margin-top: var(
+        --spectrum-dialog-confirm-divider-margin-top,
+        var(--spectrum-global-dimension-static-size-150)
     );
-}
-:host([dir='rtl']) .type-icon {
-    /* [dir=rtl] .spectrum-Dialog-typeIcon */
-    margin-right: var(
-        --spectrum-dialog-icon-margin-left,
-        var(--spectrum-global-dimension-static-size-300)
+    margin-bottom: var(
+        --spectrum-dialog-confirm-divider-margin-bottom,
+        var(--spectrum-global-dimension-static-size-200)
     );
 }
-.type-icon {
-    /* .spectrum-Dialog-typeIcon */
-    display: block;
-    flex-shrink: 0;
-    align-self: flex-start; /* .spectrum-Dialog-typeIcon */
-    color: var(
-        --spectrum-dialog-icon-color,
-        var(--spectrum-global-color-gray-900)
+:host([no-divider]) .divider {
+    /* .spectrum-Dialog--noDivider .spectrum-Dialog-divider */
+    display: none;
+}
+:host([no-divider]) ::slotted([slot='heading']) {
+    /* .spectrum-Dialog--noDivider .spectrum-Dialog-heading */
+    padding-bottom: calc(
+        var(--spectrum-global-dimension-static-size-150, 12px) +
+            var(--spectrum-global-dimension-static-size-200, 16px) +
+            var(--spectrum-global-dimension-static-size-25, 2px)
     );
 }
 .content {
     /* .spectrum-Dialog-content */
-    display: block;
+    grid-area: content;
     box-sizing: border-box;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
-    flex: 1 1 auto;
     outline: none;
-    font-size: var(--spectrum-dialog-content-text-size);
+    font-size: var(--spectrum-dialog-confirm-description-text-size);
     font-weight: var(
-        --spectrum-dialog-content-text-font-weight,
+        --spectrum-dialog-confirm-description-text-font-weight,
         var(--spectrum-global-font-weight-regular)
     );
     line-height: var(
-        --spectrum-dialog-content-text-line-height,
+        --spectrum-dialog-confirm-description-text-line-height,
         var(--spectrum-alias-body-text-line-height)
-    ); /* .spectrum-Dialog-content */
-    max-height: 70vh; /* .spectrum-Dialog-content */
+    );
+    padding: 0 var(--spectrum-global-dimension-size-25);
+    margin: 0 calc(var(--spectrum-global-dimension-size-25) * -1); /* .spectrum-Dialog-content */
     color: var(
-        --spectrum-dialog-content-text-color,
+        --spectrum-dialog-confirm-description-text-color,
         var(--spectrum-global-color-gray-800)
     );
 }
 .footer {
     /* .spectrum-Dialog-footer */
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: var(
-        --spectrum-dialog-border-radius,
-        var(--spectrum-global-dimension-size-50)
-    );
-    border-bottom-left-radius: var(
-        --spectrum-dialog-border-radius,
-        var(--spectrum-global-dimension-size-50)
-    );
-    padding-top: calc(
-        var(--spectrum-global-dimension-size-450) -
-            var(--spectrum-global-dimension-size-200) / 2
-    );
-    flex: 0 1 auto;
-    flex-wrap: wrap;
+    grid-area: footer;
+    padding-top: var(--spectrum-global-dimension-static-size-500, 40px);
     display: flex;
-    justify-content: flex-end;
+    flex-wrap: wrap;
     outline: none;
-    margin: calc(-1 * var(--spectrum-global-dimension-size-200) / 2);
-    margin-top: 0; /* .spectrum-Dialog-footer */
-    background: var(
-        --spectrum-dialog-background-color,
-        var(--spectrum-alias-background-color-default)
-    );
 }
 .footer > ::slotted(*),
 .footer > .button + .button {
     /* .spectrum-Dialog-footer>*,
    * .spectrum-Dialog-footer>.spectrum-Button+.spectrum-Button */
-    margin: calc(var(--spectrum-global-dimension-size-200) / 2);
+    margin-bottom: 0;
 }
-::slotted([slot='title']) {
-    /* .spectrum-Dialog-title */
-    flex: 1 1 auto;
-    margin: 0;
-    font-size: var(--spectrum-dialog-title-text-size);
-    font-weight: var(
-        --spectrum-dialog-title-text-font-weight,
-        var(--spectrum-global-font-weight-bold)
-    );
-    line-height: var(
-        --spectrum-dialog-title-text-line-height,
-        var(--spectrum-alias-heading-text-line-height)
-    );
-    outline: none; /* .spectrum-Dialog-title */
-    color: var(
-        --spectrum-dialog-title-text-color,
-        var(--spectrum-global-color-gray-900)
-    );
+:host([dir='ltr']) .buttonGroup {
+    /* [dir=ltr] .spectrum-Dialog-buttonGroup */
+    padding-left: var(--spectrum-global-dimension-size-200);
+}
+:host([dir='rtl']) .buttonGroup {
+    /* [dir=rtl] .spectrum-Dialog-buttonGroup */
+    padding-right: var(--spectrum-global-dimension-size-200);
+}
+.buttonGroup {
+    /* .spectrum-Dialog-buttonGroup */
+    grid-area: buttonGroup;
+    padding-top: var(--spectrum-global-dimension-static-size-500, 40px);
+    display: flex;
+    justify-content: flex-end;
+}
+.buttonGroup.buttonGroup--noFooter {
+    /* .spectrum-Dialog-buttonGroup.spectrum-Dialog-buttonGroup--noFooter */
+    grid-area: footer-start/footer-start/buttonGroup-end/buttonGroup-end;
+}
+:host([dismissable]) .grid {
+    /* .spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid */
+    grid-template-columns: var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(
+            0,
+            auto
+        ) minmax(0, var(--spectrum-global-dimension-size-400)) var(
+            --spectrum-dialog-confirm-padding
+        );
+    grid-template-rows: auto var(--spectrum-dialog-confirm-padding) auto auto 1fr auto var(
+            --spectrum-dialog-confirm-padding
+        );
+    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.spectrum-Dialog--dismissable .spectrum-Dialog-grid */
+    grid-template-columns: var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(
+            0,
+            auto
+        ) minmax(0, var(--spectrum-global-dimension-size-400)) var(
+            --spectrum-dialog-confirm-padding
+        );
+    grid-template-areas: 'hero hero    hero    hero        hero        hero        hero' '.    .       .       .           .           closeButton closeButton' '.    heading heading heading     typeIcon    closeButton closeButton' '.    header  header  header      header      header      .' '.    divider divider divider     divider     divider     .' '.    content content content     content     content     .' '.    footer  footer  buttonGroup buttonGroup buttonGroup .' '.    .       .       .           .           .           .';
+}
+:host([dismissable]) .grid .buttonGroup {
+    /* .spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid .spectrum-Dialog-buttonGroup */
+    display: none;
+}
+:host([dismissable]) .grid .footer {
+    /* .spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid .spectrum-Dialog-footer */
+    grid-area: footer/footer/buttonGroup/buttonGroup;
 }
-:host([size='alert']) {
-    /* .spectrum-Dialog--alert */
+:host([dir='ltr']) .close-button {
+    /* [dir=ltr] .spectrum-Dialog-closeButton */
+    margin-right: calc(26px - var(--spectrum-global-dimension-size-175));
+}
+:host([dir='rtl']) .close-button {
+    /* [dir=rtl] .spectrum-Dialog-closeButton */
+    margin-left: calc(26px - var(--spectrum-global-dimension-size-175));
+}
+.close-button {
+    /* .spectrum-Dialog-closeButton */
+    grid-area: closeButton;
+    align-self: start;
+    justify-self: end;
+    margin-top: calc(26px - var(--spectrum-global-dimension-size-175));
+}
+:host([error]) {
+    /* .spectrum-Dialog--error */
     width: 480px;
 }
 :host([mode='fullscreen']) {
     /* .spectrum-Dialog--fullscreen */
-    top: 32px;
-    right: 32px;
-    bottom: 32px;
-    left: 32px;
-    transform: translateY(
-        var(
-            --spectrum-dialog-entry-animation-distance,
-            var(--spectrum-global-dimension-size-250)
-        )
-    );
+    width: 100%;
+    height: 100%;
 }
-:host([mode='fullscreen'][open]) {
-    /* .spectrum-Dialog--fullscreen.is-open */
-    transform: translate(0);
+:host([mode='fullscreenTakeover']) {
+    /* .spectrum-Dialog--fullscreenTakeover */
+    width: 100%;
+    height: 100%;
+    border-radius: 0;
 }
 :host([mode='fullscreen']),
 :host([mode='fullscreenTakeover']) {
     /* .spectrum-Dialog--fullscreen,
    * .spectrum-Dialog--fullscreenTakeover */
-    width: auto;
     max-height: none;
     max-width: none;
-    padding-top: calc(var(--spectrum-dialog-padding) - 10px);
-}
-:host([mode='fullscreen']) .header,
-:host([mode='fullscreenTakeover']) .header {
-    /* .spectrum-Dialog--fullscreen .spectrum-Dialog-header,
-   * .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-header */
-    flex-shrink: 0;
-}
-:host([mode='fullscreen']) ::slotted([slot='title']),
-:host([mode='fullscreenTakeover']) ::slotted([slot='title']) {
-    /* .spectrum-Dialog--fullscreen .spectrum-Dialog-title,
-   * .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-title */
+}
+:host([mode='fullscreen']) .grid,
+:host([mode='fullscreenTakeover']) .grid {
+    /* .spectrum-Dialog--fullscreen.spectrum-Dialog .spectrum-Dialog-grid,
+   * .spectrum-Dialog--fullscreenTakeover.spectrum-Dialog .spectrum-Dialog-grid */
+    display: grid;
+    grid-template-columns: var(--spectrum-dialog-confirm-padding) 1fr auto auto var(
+            --spectrum-dialog-confirm-padding
+        );
+    grid-template-rows: var(--spectrum-dialog-confirm-padding) auto auto 1fr var(
+            --spectrum-dialog-confirm-padding
+        );
+    grid-template-areas: '.    .       .       .            .' '.    heading header  buttonGroup  .' '.    divider divider divider      .' '.    content content content      .' '.    .       .       .            .';
+}
+:host([mode='fullscreen']) ::slotted([slot='heading']),
+:host([mode='fullscreenTakeover']) ::slotted([slot='heading']) {
+    /* .spectrum-Dialog--fullscreen .spectrum-Dialog-heading,
+   * .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-heading */
     font-size: 28px;
-    font-weight: 100;
 }
 :host([mode='fullscreen']) .content,
 :host([mode='fullscreenTakeover']) .content {
@@ -396,38 +287,61 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
    * .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-content */
     max-height: none;
 }
-:host([mode='fullscreenTakeover']) {
-    /* .spectrum-Dialog--fullscreenTakeover */
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    box-sizing: border-box;
-    border: none;
-    border-radius: 0;
-}
-:host([mode='fullscreenTakeover']),
-:host([mode='fullscreenTakeover'][open]) {
-    /* .spectrum-Dialog--fullscreenTakeover,
-   * .spectrum-Dialog--fullscreenTakeover.is-open */
-    transform: none;
+:host([mode='fullscreen']) .buttonGroup,
+:host([mode='fullscreen']) .footer,
+:host([mode='fullscreenTakeover']) .buttonGroup,
+:host([mode='fullscreenTakeover']) .footer {
+    /* .spectrum-Dialog--fullscreen .spectrum-Dialog-buttonGroup,
+   * .spectrum-Dialog--fullscreen .spectrum-Dialog-footer,
+   * .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-buttonGroup,
+   * .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-footer */
+    padding-top: 0;
+}
+:host([mode='fullscreen']) .footer,
+:host([mode='fullscreenTakeover']) .footer {
+    /* .spectrum-Dialog--fullscreen .spectrum-Dialog-footer,
+   * .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-footer */
+    display: none;
 }
-:host,
-.header {
-    /* .spectrum-Dialog,
-   * .spectrum-Dialog-header */
-    background: var(
-        --spectrum-dialog-background-color,
-        var(--spectrum-alias-background-color-default)
-    );
+:host([mode='fullscreen']) .buttonGroup,
+:host([mode='fullscreenTakeover']) .buttonGroup {
+    /* .spectrum-Dialog--fullscreen .spectrum-Dialog-buttonGroup,
+   * .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-buttonGroup */
+    grid-area: buttonGroup;
+    align-self: start;
+}
+:host([dismissable]) .grid,
+.grid {
+    /* .spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid,
+   * .spectrum-Dialog .spectrum-Dialog-grid */
+    grid-template-rows: auto var(--spectrum-dialog-confirm-padding) auto auto auto 1fr auto var(
+            --spectrum-dialog-confirm-padding
+        );
 }
-:host([error]) ::slotted([slot='title']) {
-    /* .spectrum-Dialog--error .spectrum-Dialog-title */
-    color: var(
-        --spectrum-dialog-error-title-text-color,
-        var(--spectrum-global-color-gray-900)
-    );
+:host([mode='fullscreen']) .grid,
+:host([mode='fullscreenTakeover']) .grid {
+    /* .spectrum-Dialog--fullscreen.spectrum-Dialog .spectrum-Dialog-grid,
+   * .spectrum-Dialog--fullscreenTakeover.spectrum-Dialog .spectrum-Dialog-grid */
+    display: grid;
+    grid-template-columns: var(--spectrum-dialog-confirm-padding) 1fr var(
+            --spectrum-dialog-confirm-padding
+        );
+    grid-template-rows: var(--spectrum-dialog-confirm-padding) auto auto auto 1fr auto var(
+            --spectrum-dialog-confirm-padding
+        );
+    grid-template-areas: '.    .            .' '.    heading      .' '.    header       .' '.    divider      .' '.    content      .' '.    buttonGroup  .' '.    .            .';
+}
+:host([mode='fullscreen']) .buttonGroup,
+:host([mode='fullscreenTakeover']) .buttonGroup {
+    /* .spectrum-Dialog--fullscreen .spectrum-Dialog-buttonGroup,
+   * .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-buttonGroup */
+    padding-top: var(--spectrum-global-dimension-static-size-500, 40px);
+}
+:host([mode='fullscreen']) ::slotted([slot='heading']),
+:host([mode='fullscreenTakeover']) ::slotted([slot='heading']) {
+    /* .spectrum-Dialog--fullscreen .spectrum-Dialog-heading,
+   * .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-heading */
+    font-size: var(--spectrum-dialog-confirm-title-text-size);
 }
 :host([error]) .type-icon {
     /* .spectrum-Dialog--error .spectrum-Dialog-typeIcon */
diff --git a/packages/dialog/test/dialog-wrapper.test.ts b/packages/dialog/test/dialog-wrapper.test.ts
index 32e194c0c4..93da343217 100644
--- a/packages/dialog/test/dialog-wrapper.test.ts
+++ b/packages/dialog/test/dialog-wrapper.test.ts
@@ -19,7 +19,7 @@ import { Button, ActionButton } from '@spectrum-web-components/button';
 import { Underlay } from '@spectrum-web-components/underlay';
 import {
     wrapperLabeledHero,
-    wrapperDismissible,
+    wrapperDismissable,
     wrapperButtons,
     wrapperFullscreen,
     wrapperButtonsUnderlay,
@@ -27,7 +27,7 @@ import {
 
 describe('Dialog Wrapper', () => {
     it('loads wrapped dialog accessibly', async () => {
-        const el = await fixture<DialogWrapper>(wrapperDismissible());
+        const el = await fixture<DialogWrapper>(wrapperDismissable());
 
         await elementUpdated(el);
 
@@ -58,7 +58,7 @@ describe('Dialog Wrapper', () => {
         const el = await fixture<DialogWrapper>(wrapperButtonsUnderlay());
         await elementUpdated(el);
         expect(el.open).to.be.true;
-        el.dismissible = true;
+        el.dismissable = true;
         const root = el.shadowRoot ? el.shadowRoot : el;
         const underlay = root.querySelector('sp-underlay') as Underlay;
         underlay.click();
@@ -67,7 +67,7 @@ describe('Dialog Wrapper', () => {
     });
     it('dismisses', async () => {
         const el = await fixture<DialogWrapper>(
-            wrapperDismissible({ actionTracking: false })
+            wrapperDismissable({ actionTracking: false })
         );
 
         await elementUpdated(el);
@@ -84,8 +84,8 @@ describe('Dialog Wrapper', () => {
         await elementUpdated(el);
         expect(el.open).to.be.false;
     });
-    it('manages entry focus - dismissible', async () => {
-        const el = await fixture<DialogWrapper>(wrapperDismissible());
+    it('manages entry focus - dismissable', async () => {
+        const el = await fixture<DialogWrapper>(wrapperDismissable());
 
         await elementUpdated(el);
         expect(el.open).to.be.true;
diff --git a/packages/dialog/test/dialog.test.ts b/packages/dialog/test/dialog.test.ts
index c4659d3938..43db5385e6 100644
--- a/packages/dialog/test/dialog.test.ts
+++ b/packages/dialog/test/dialog.test.ts
@@ -16,10 +16,11 @@ import '../sp-dialog.js';
 import { Dialog } from '..';
 import {
     small,
-    dismissible,
+    dismissable,
     alertError,
     fullscreen,
 } from '../stories/dialog.stories.js';
+import { spy } from 'sinon';
 
 describe('Dialog', () => {
     it('loads `[size=small]` dialog accessibly', async () => {
@@ -36,8 +37,8 @@ describe('Dialog', () => {
 
         await expect(el).to.be.accessible();
     });
-    it('loads `[dismissible]` dialog accessibly', async () => {
-        const el = await fixture<Dialog>(dismissible());
+    it('loads `[dismissable]` dialog accessibly', async () => {
+        const el = await fixture<Dialog>(dismissable());
 
         await elementUpdated(el);
 
@@ -63,10 +64,10 @@ describe('Dialog', () => {
         await expect(el).to.be.accessible();
     });
     it('closes', async () => {
-        const el = await fixture<Dialog>(dismissible());
-
+        const closeSpy = spy();
+        const el = await fixture<Dialog>(dismissable());
+        el.addEventListener('close', () => closeSpy());
         await elementUpdated(el);
-        expect(el.open).to.be.true;
 
         const closeButton = (el.shadowRoot
             ? el.shadowRoot.querySelector('.close-button')
@@ -75,6 +76,6 @@ describe('Dialog', () => {
         closeButton.click();
 
         await elementUpdated(el);
-        expect(el.open).to.be.false;
+        expect(closeSpy.calledOnce).to.be.true;
     });
 });