From ab0d584acfe188dafcddef503bd4eb25181dd7ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20=C4=8Curda?= <jakub.curda@almacareer.com>
Date: Mon, 30 Dec 2024 14:52:17 +0100
Subject: [PATCH] Feat(web): Introduce Drawer component #DS-1580

---
 .../web/src/scss/components/Drawer/README.md  |    1 +
 .../src/scss/components/Drawer/_Drawer.scss   |   53 +
 .../scss/components/Drawer/_DrawerDialog.scss |   37 +
 .../src/scss/components/Drawer/_theme.scss    |   25 +
 .../web/src/scss/components/Drawer/index.html | 1296 +++++++++++++++++
 .../web/src/scss/components/Drawer/index.scss |    2 +
 packages/web/src/scss/components/index.scss   |    1 +
 7 files changed, 1415 insertions(+)
 create mode 100644 packages/web/src/scss/components/Drawer/README.md
 create mode 100644 packages/web/src/scss/components/Drawer/_Drawer.scss
 create mode 100644 packages/web/src/scss/components/Drawer/_DrawerDialog.scss
 create mode 100644 packages/web/src/scss/components/Drawer/_theme.scss
 create mode 100644 packages/web/src/scss/components/Drawer/index.html
 create mode 100644 packages/web/src/scss/components/Drawer/index.scss

diff --git a/packages/web/src/scss/components/Drawer/README.md b/packages/web/src/scss/components/Drawer/README.md
new file mode 100644
index 0000000000..96f088846f
--- /dev/null
+++ b/packages/web/src/scss/components/Drawer/README.md
@@ -0,0 +1 @@
+# Drawer
diff --git a/packages/web/src/scss/components/Drawer/_Drawer.scss b/packages/web/src/scss/components/Drawer/_Drawer.scss
new file mode 100644
index 0000000000..90aae6694b
--- /dev/null
+++ b/packages/web/src/scss/components/Drawer/_Drawer.scss
@@ -0,0 +1,53 @@
+@use 'theme';
+
+.Drawer {
+    --drawer-scale: #{theme.$transition-scale-ratio};
+
+    all: unset;
+    position: fixed;
+    inset: 0;
+    z-index: 1;
+    display: flex;
+    overflow-y: auto;
+    background: linear-gradient(#{theme.$backdrop-background-color}, #{theme.$backdrop-background-color});
+    visibility: hidden;
+    opacity: 0;
+    pointer-events: none;
+    overscroll-behavior: contain;
+
+    &::backdrop {
+        background-color: transparent;
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+        transition-property: visibility, opacity;
+        transition-duration: theme.$transition-duration;
+    }
+}
+
+.Drawer:has(.DrawerDialog--scrollable) {
+    overflow: hidden;
+}
+
+.Drawer--center,
+.Drawer:not(.Drawer--left, .Drawer--right) {
+    justify-content: center;
+}
+
+.Drawer--left {
+    justify-content: start;
+}
+
+.Drawer--right {
+    justify-content: end;
+}
+
+.Drawer[open] {
+    --drawer-scale: 1;
+    --drawer-translate-y: 0;
+
+    visibility: visible;
+    opacity: 1;
+    user-select: text; // 6.
+    pointer-events: auto;
+}
diff --git a/packages/web/src/scss/components/Drawer/_DrawerDialog.scss b/packages/web/src/scss/components/Drawer/_DrawerDialog.scss
new file mode 100644
index 0000000000..d8e513f665
--- /dev/null
+++ b/packages/web/src/scss/components/Drawer/_DrawerDialog.scss
@@ -0,0 +1,37 @@
+// 1. Use ScrollView's backdoor to fix its height inside DrawerDialog in Safari.
+// 2. We need to set the box-sizing again because the parent element unsets styles using `all: unset`.
+// 3. Intentionally transition also the worse performing properties to smooth out the changes of viewport size around
+//    the tablet breakpoint. However, `top` and `bottom` are not transitioned when switching from and to `auto`.
+// 4. Override bottom padding of parent `.Drawer` in the docked variant.
+
+@use 'sass:map';
+@use '../../tools/breakpoint';
+@use '../../tools/typography';
+@use 'theme';
+
+.DrawerDialog {
+    @include typography.generate(theme.$typography);
+
+    --scroll-view-vertical-height: auto;
+
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    width: theme.$dialog-width;
+    max-width: calc(100% - #{theme.$padding-x});
+    height: theme.$dialog-height;
+    max-height: theme.$dialog-max-height;
+    overflow-x: var(--drawer-body-overflow-x, visible);
+    overflow-y: var(--drawer-body-overflow-y, visible);
+    color: theme.$dialog-text-color;
+    background-color: theme.$dialog-background-color;
+    box-shadow: theme.$dialog-shadow;
+    transform: translateY(var(--drawer-translate-y)) scale(var(--drawer-scale));
+    transform-origin: var(--drawer-transform-origin);
+    overscroll-behavior: contain;
+
+    @media (prefers-reduced-motion: no-preference) {
+        transition-property: width, height, max-height, border-radius, transform;
+        transition-duration: inherit;
+    }
+}
diff --git a/packages/web/src/scss/components/Drawer/_theme.scss b/packages/web/src/scss/components/Drawer/_theme.scss
new file mode 100644
index 0000000000..6e70512f1d
--- /dev/null
+++ b/packages/web/src/scss/components/Drawer/_theme.scss
@@ -0,0 +1,25 @@
+@use '@tokens' as tokens;
+@use '../../settings/transitions';
+
+$breakpoints: tokens.$breakpoints;
+$padding-x: tokens.$space-900;
+$padding-x-tablet: tokens.$space-1400;
+$padding-y: tokens.$space-700;
+$typography: tokens.$body-medium-regular;
+$transition-duration: transitions.$duration-200;
+$transition-scale-ratio: transitions.$scale-ratio-large-objects;
+$transition-shift-distance: transitions.$shift-distance-medium;
+
+$backdrop-background-color: tokens.$background-backdrop;
+
+$common-padding-x: tokens.$space-900;
+$common-padding-x-tablet: tokens.$space-1000;
+
+// ModalDialog
+$dialog-width: 375px;
+$dialog-height: auto;
+$dialog-max-height: none;
+$dialog-text-color: tokens.$text-primary;
+$dialog-border-radius: tokens.$radius-300;
+$dialog-background-color: tokens.$background-primary;
+$dialog-shadow: tokens.$shadow-300;
diff --git a/packages/web/src/scss/components/Drawer/index.html b/packages/web/src/scss/components/Drawer/index.html
new file mode 100644
index 0000000000..868fe467e7
--- /dev/null
+++ b/packages/web/src/scss/components/Drawer/index.html
@@ -0,0 +1,1296 @@
+{{#> web/layout/default title="Modal" parentPageName="Components" }}
+
+<script>
+  const setModalAlignment = (event, selector) => {
+    const modalElement = document.querySelector(selector);
+
+    modalElement.classList.remove('Modal--top', 'Modal--center', 'Modal--bottom');
+    modalElement.classList.add(`Modal--${event.target.value}`);
+  };
+
+  const setFooterAlignment = (event, selector) => {
+    const footerElement = document.querySelector(selector);
+
+    footerElement.classList.remove('ModalFooter--left', 'ModalFooter--center', 'ModalFooter--right');
+    footerElement.classList.add(`ModalFooter--${event.target.value}`);
+  };
+
+  const toggleDockOnMobile = (selector, dependingInputSelectors) => {
+    const dependingInputElements = document.querySelectorAll(dependingInputSelectors);
+
+    document.querySelector(selector).classList.toggle('ModalDialog--dockOnMobile');
+
+    dependingInputElements.forEach((element) => {
+      element.disabled = !element.disabled;
+
+      if (element.type == 'checkbox') {
+        element.closest('label').classList.toggle('Checkbox--disabled');
+      }
+
+      if (element.type == 'radio') {
+        element.closest('label').classList.toggle('Radio--disabled');
+      }
+    });
+  }
+
+  const toggleExpandOnMobile = (selector) => {
+    document.querySelector(selector).classList.toggle('ModalDialog--expandOnMobile');
+  }
+
+  const toggleScrolling = (selector) => {
+    document.querySelector(selector).classList.toggle('ModalDialog--scrollable');
+  }
+</script>
+
+<section class="UNSTABLE_Section">
+
+  <div class="Container">
+
+    <h2 class="docs-Heading">Modal</h2>
+
+    <div class="docs-Stack docs-Stack--start">
+
+      <button
+        type="button"
+        class="Button Button--primary Button--medium"
+        data-spirit-toggle="modal"
+        data-spirit-target="#example-basic"
+        aria-controls="example-basic"
+        aria-expanded="false"
+        data-test-id="modal-basic"
+      >
+        Open Modal
+      </button>
+
+      <!-- Modal: start -->
+      <dialog id="example-basic" class="Modal Modal--center" aria-labelledby="example-basic-title">
+
+        <!-- ModalDialog: start -->
+        <article class="ModalDialog ModalDialog--expandOnMobile">
+
+          <!-- ModalHeader: start -->
+          <header class="ModalHeader">
+            <h2 id="example-basic-title" class="ModalHeader__title">Modal Title</h2>
+            <button
+              type="button"
+              class="Button Button--tertiary Button--symmetrical Button--medium"
+              data-spirit-dismiss="modal"
+              data-spirit-target="#example-basic"
+              aria-controls="example-basic"
+              aria-expanded="false"
+            >
+              <svg width="24" height="24" aria-hidden="true">
+                <use xlink:href="/assets/icons/svg/sprite.svg#close" />
+              </svg>
+              <span class="accessibility-hidden">Close</span>
+            </button>
+          </header>
+          <!-- ModalHeader: end -->
+
+          <!-- ModalBody: start -->
+          <div class="ModalBody">
+            <!-- Content: start -->
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+              perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+              provident unde. Eveniet, iste, molestiae?
+            </p>
+            <!-- Modal alignment demo: start -->
+            <form onchange="setModalAlignment(event, '#example-basic')" class="mb-600">
+              <div>Modal alignment:</div>
+              <label for="modal-demo-alignment-top" class="Radio mr-600">
+                <input type="radio" id="modal-demo-alignment-top" name="modal-alignment" value="top" class="Radio__input" autocomplete="off" />
+                <span class="Radio__label">Top</span>
+              </label>
+              <label for="modal-demo-alignment-center" class="Radio mr-600">
+                <input type="radio" id="modal-demo-alignment-center" name="modal-alignment" value="center" class="Radio__input" autocomplete="off" checked />
+                <span class="Radio__label">Center</span>
+              </label>
+              <label for="modal-demo-alignment-bottom" class="Radio mr-600">
+                <input type="radio" id="modal-demo-alignment-bottom" name="modal-alignment" value="bottom" class="Radio__input" autocomplete="off" />
+                <span class="Radio__label">Bottom</span>
+              </label>
+            </form>
+            <!-- Modal alignment demo: end -->
+            <!-- Footer alignment demo: start -->
+            <form onchange="setFooterAlignment(event, '#example-basic .ModalFooter')" class="d-none d-tablet-block mb-600">
+              <div>Footer alignment (from tablet up):</div>
+              <label for="footer-uniform-alignment-left" class="Radio mr-600">
+                <input type="radio" id="footer-uniform-alignment-left" name="footer-alignment" value="left" class="Radio__input" autocomplete="off" />
+                <span class="Radio__label">Left</span>
+              </label>
+              <label for="footer-uniform-alignment-center" class="Radio mr-600">
+                <input type="radio" id="footer-uniform-alignment-center" name="footer-alignment" value="center" class="Radio__input" autocomplete="off" />
+                <span class="Radio__label">Center</span>
+              </label>
+              <label for="footer-uniform-alignment-right" class="Radio mr-600">
+                <input type="radio" id="footer-uniform-alignment-right" name="footer-alignment" value="right" class="Radio__input" autocomplete="off" checked />
+                <span class="Radio__label">Right</span>
+              </label>
+            </form>
+            <!-- Footer alignment demo: end -->
+            <!-- Modal features demo: start -->
+            <form class="Stack Stack--hasSpacing">
+              <label for="modal-demo-docked" class="Checkbox">
+                <input type="checkbox" id="modal-demo-docked" class="Checkbox__input" onchange="toggleDockOnMobile('#example-basic > .ModalDialog', '#modal-demo-expanded')" autocomplete="off" />
+                <span class="Checkbox__text">
+                <span class="Checkbox__label">Dock on mobile</span>
+              </span>
+              </label>
+              <label for="modal-demo-expanded" class="Checkbox Checkbox--disabled" id="modal-demo-expanded-label">
+                <input type="checkbox" id="modal-demo-expanded" class="Checkbox__input" onchange="toggleExpandOnMobile('#example-basic > .ModalDialog')" autocomplete="off" checked disabled />
+                <span class="Checkbox__text">
+                <span class="Checkbox__label">Expand on mobile (docked only)</span>
+              </span>
+              </label>
+              <label for="modal-demo-scrolling" class="Checkbox">
+                <input type="checkbox" id="modal-demo-scrolling" class="Checkbox__input" onchange="toggleScrolling('#example-basic > .ModalDialog')" autocomplete="off" />
+                <span class="Checkbox__text">
+                <span class="Checkbox__label">Scrolling inside</span>
+              </span>
+              </label>
+            </form>
+            <!-- Modal features demo: end -->
+            <!-- Content: end -->
+          </div>
+          <!-- ModalBody: end -->
+
+          <!-- ModalFooter: start -->
+          <footer class="ModalFooter ModalFooter--right">
+            <div class="ModalFooter__description">
+              Optional description
+            </div>
+            <div class="ModalFooter__actions">
+              <button
+                type="button"
+                class="Button Button--primary Button--medium"
+                data-spirit-dismiss="modal"
+                data-spirit-target="#example-basic"
+              >
+                Primary action
+              </button>
+              <button
+                type="button"
+                class="Button Button--secondary Button--medium"
+                data-spirit-dismiss="modal"
+                data-spirit-target="#example-basic"
+              >
+                Secondary action
+              </button>
+            </div>
+          </footer>
+          <!-- ModalFooter: end -->
+
+        </article>
+        <!-- ModalDialog: end -->
+
+      </dialog>
+      <!-- Modal: end -->
+
+      <button
+        type="button"
+        class="Button Button--primary Button--medium"
+        data-spirit-toggle="modal"
+        data-spirit-target="#example-form"
+        aria-controls="example-form"
+        aria-expanded="false"
+        data-test-id="modal-with-form"
+      >
+        Open Modal with Form
+      </button>
+
+      <!-- Modal: start -->
+      <dialog id="example-form" class="Modal Modal--center" aria-labelledby="example-form-title">
+
+        <!-- ModalDialog: start -->
+        <form class="ModalDialog" method="dialog">
+
+          <!-- ModalHeader: start -->
+          <header class="ModalHeader">
+            <h2 id="example-form-title" class="ModalHeader__title">Modal with a Form</h2>
+            <button
+              type="button"
+              class="Button Button--tertiary Button--symmetrical Button--medium"
+              data-spirit-dismiss="modal"
+              data-spirit-target="#example-form"
+              aria-controls="example-form"
+              aria-expanded="false"
+            >
+              <svg width="24" height="24" aria-hidden="true">
+                <use xlink:href="/assets/icons/svg/sprite.svg#close" />
+              </svg>
+              <span class="accessibility-hidden">Close</span>
+            </button>
+          </header>
+          <!-- ModalHeader: end -->
+
+          <!-- ModalBody: start -->
+          <div class="ModalBody">
+            <!-- Content: start -->
+            <div class="TextField mb-400">
+              <label for="text-field" class="TextField__label">Label</label>
+              <input type="text" id="text-field" class="TextField__input" placeholder="TextField" />
+            </div>
+            <p>
+              The primary action is a button with <code>type="submit"</code> and closes the dialog on submission.
+            </p>
+            <!-- Content: end -->
+          </div>
+          <!-- ModalBody: end -->
+
+          <!-- ModalFooter: start -->
+          <footer class="ModalFooter ModalFooter--right">
+            <div class="ModalFooter__actions">
+              <button type="submit" class="Button Button--primary Button--medium">
+                Primary action
+              </button>
+              <button
+                type="button"
+                class="Button Button--secondary Button--medium"
+                data-spirit-dismiss="modal"
+                data-spirit-target="#example-form"
+              >
+                Secondary action
+              </button>
+            </div>
+          </footer>
+          <!-- ModalFooter: end -->
+
+        </form>
+        <!-- ModalDialog: end -->
+
+      </dialog>
+      <!-- Modal: end -->
+
+      <button
+        type="button"
+        class="Button Button--primary Button--medium"
+        data-spirit-toggle="modal"
+        data-spirit-target="#example-dropdown"
+        aria-controls="example-dropdown"
+        aria-expanded="false"
+        data-test-id="modal-with-dropdown"
+      >
+        Open Modal with Dropdown
+      </button>
+
+      <!-- Modal: start -->
+      <dialog id="example-dropdown" class="Modal Modal--center" aria-labelledby="example-dropdown-title">
+
+        <!-- ModalDialog: start -->
+        <article class="ModalDialog ModalDialog--expandOnMobile">
+
+          <!-- ModalHeader: start -->
+          <header class="ModalHeader">
+            <h2 id="example-dropdown-title" class="ModalHeader__title">Modal Title</h2>
+            <button
+              type="button"
+              class="Button Button--tertiary Button--symmetrical Button--medium"
+              data-spirit-dismiss="modal"
+              data-spirit-target="#example-dropdown"
+              aria-controls="example-dropdown"
+              aria-expanded="false"
+            >
+              <svg width="24" height="24" aria-hidden="true">
+                <use xlink:href="/assets/icons/svg/sprite.svg#close" />
+              </svg>
+              <span class="accessibility-hidden">Close</span>
+            </button>
+          </header>
+          <!-- ModalHeader: end -->
+
+          <!-- ModalBody: start -->
+          <div class="ModalBody">
+            <!-- Content: start -->
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+              perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+              provident unde. Eveniet, iste, molestiae?
+            </p>
+            <div class="Dropdown">
+              <button
+                type="button"
+                data-spirit-toggle="dropdown"
+                data-spirit-target="#dropdown-in-modal"
+                class="Button Button--secondary Button--medium"
+                aria-expanded="false"
+                aria-controls="dropdown-in-modal"
+              >
+                Dropdown
+              </button>
+              <div class="DropdownPopover" data-spirit-placement="bottom-start" id="dropdown-in-modal">
+                <a href="#" class="Item">
+                  <span class="Item__label">Action</span>
+                </a>
+                <a href="#" class="Item">
+                  <span class="Item__label">Another action</span>
+                </a>
+                <a href="#" class="Item">
+                  <span class="Item__label">Something else here</span>
+                </a>
+              </div>
+            </div>
+            <!-- Content: end -->
+          </div>
+          <!-- ModalBody: end -->
+
+          <!-- ModalFooter: start -->
+          <footer class="ModalFooter ModalFooter--right">
+            <div class="ModalFooter__description">
+              Optional description
+            </div>
+            <div class="ModalFooter__actions">
+              <button
+                type="button"
+                class="Button Button--primary Button--medium"
+                data-spirit-dismiss="modal"
+                data-spirit-target="#example-dropdown"
+              >
+                Primary action
+              </button>
+              <button
+                type="button"
+                class="Button Button--secondary Button--medium"
+                data-spirit-dismiss="modal"
+                data-spirit-target="#example-dropdown"
+              >
+                Secondary action
+              </button>
+            </div>
+          </footer>
+          <!-- ModalFooter: end -->
+
+        </article>
+        <!-- ModalDialog: end -->
+
+      </dialog>
+      <!-- Modal: end -->
+
+    </div>
+
+  </div>
+
+</section>
+
+<section class="UNSTABLE_Section">
+
+  <div class="Container">
+
+    <h2 class="docs-Heading">Scrolling Long Content</h2>
+
+    <div class="docs-Stack docs-Stack--start">
+
+      <button
+        type="button"
+        class="Button Button--primary Button--medium"
+        data-spirit-toggle="modal"
+        data-spirit-target="#example-long-content"
+        aria-controls="example-long-content"
+        aria-expanded="false"
+        data-test-id="modal-with-long-content"
+      >
+        Open Modal with Long Content
+      </button>
+
+      <!-- Modal: start -->
+      <dialog id="example-long-content" class="Modal Modal--center" aria-labelledby="example-long-content-title">
+
+        <!-- ModalDialog: start -->
+        <article class="ModalDialog">
+
+          <!-- ModalHeader: start -->
+          <header class="ModalHeader">
+            <h2 id="example-long-content-title" class="ModalHeader__title">
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia perferendis reprehenderit, voluptate. Cum delectus dicta
+            </h2>
+            <button
+              type="button"
+              class="Button Button--tertiary Button--symmetrical Button--medium"
+              data-spirit-dismiss="modal"
+              data-spirit-target="#example-long-content"
+              aria-controls="example-long-content"
+              aria-expanded="false"
+            >
+              <svg width="24" height="24" aria-hidden="true">
+                <use xlink:href="/assets/icons/svg/sprite.svg#close" />
+              </svg>
+              <span class="accessibility-hidden">Close</span>
+            </button>
+          </header>
+          <!-- ModalHeader: end -->
+
+          <!-- ModalBody: start -->
+          <div class="ModalBody">
+
+            <!-- Content: start -->
+            {{setVar "blocks" 1 2 3 4 5 6 7 8 9 }}
+            {{#each @root.blocks}}
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+              perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+              provident unde. Eveniet, iste, molestiae?
+            </p>
+            {{/each}}
+            <!-- Content: end -->
+
+          </div>
+          <!-- ModalBody: end -->
+
+          <!-- ModalFooter: start -->
+          <footer class="ModalFooter ModalFooter--right">
+            <div class="ModalFooter__actions">
+              <button
+                type="button"
+                class="Button Button--primary Button--medium"
+                data-spirit-dismiss="modal"
+                data-spirit-target="#example-long-content"
+              >
+                Primary action
+              </button>
+              <button
+                type="button"
+                class="Button Button--secondary Button--medium"
+                data-spirit-dismiss="modal"
+                data-spirit-target="#example-long-content"
+              >
+                Secondary action
+              </button>
+            </div>
+          </footer>
+          <!-- ModalFooter: end -->
+
+        </article>
+        <!-- ModalDialog: end -->
+
+      </dialog>
+      <!-- Modal: end -->
+
+      <button
+        type="button"
+        class="Button Button--primary Button--medium"
+        data-spirit-toggle="modal"
+        data-spirit-target="#example-scrolling-modal"
+        aria-controls="example-scrolling-modal"
+        aria-expanded="false"
+        data-test-id="modal-with-scrolling-inside"
+      >
+        Open Modal with Scrolling Inside
+      </button>
+
+      <!-- Modal: start -->
+      <dialog id="example-scrolling-modal" class="Modal Modal--center" aria-labelledby="example-scrolling-modal-title">
+
+        <!-- ModalDialog: start -->
+        <article class="ModalDialog ModalDialog--scrollable">
+
+          <!-- ModalHeader: start -->
+          <header class="ModalHeader">
+            <h2 id="example-scrolling-modal-title" class="ModalHeader__title">
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia perferendis reprehenderit, voluptate. Cum delectus dicta
+            </h2>
+            <button
+              type="button"
+              class="Button Button--tertiary Button--symmetrical Button--medium"
+              data-spirit-dismiss="modal"
+              data-spirit-target="#example-scrolling-modal"
+              aria-controls="example-scrolling-modal"
+              aria-expanded="false"
+            >
+              <svg width="24" height="24" aria-hidden="true">
+                <use xlink:href="/assets/icons/svg/sprite.svg#close" />
+              </svg>
+              <span class="accessibility-hidden">Close</span>
+            </button>
+          </header>
+          <!-- ModalHeader: end -->
+
+          <!-- ModalBody: start -->
+          <div class="ModalBody">
+            <!-- Content: start -->
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+              perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+              provident unde. Eveniet, iste, molestiae?
+            </p>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+              perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+              provident unde. Eveniet, iste, molestiae?
+            </p>
+            <p style="margin-bottom: 100vh">
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+              perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+              provident unde. Eveniet, iste, molestiae?
+            </p>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+              perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+              provident unde. Eveniet, iste, molestiae?
+            </p>
+            <!-- Content: end -->
+          </div>
+          <!-- ModalBody: end -->
+
+          <!-- ModalFooter: start -->
+          <footer class="ModalFooter ModalFooter--right">
+            <div class="ModalFooter__actions">
+              <button
+                type="button"
+                class="Button Button--primary Button--medium"
+                data-spirit-dismiss="modal"
+                data-spirit-target="#example-scrolling-modal"
+              >
+                Primary action
+              </button>
+              <button
+                type="button"
+                class="Button Button--secondary Button--medium"
+                data-spirit-dismiss="modal"
+                data-spirit-target="#example-scrolling-modal"
+              >
+                Secondary action
+              </button>
+            </div>
+          </footer>
+          <!-- ModalFooter: end -->
+
+        </article>
+        <!-- ModalDialog: end -->
+
+      </dialog>
+      <!-- Modal: end -->
+
+      <button
+        type="button"
+        class="Button Button--primary Button--medium"
+        data-spirit-toggle="modal"
+        data-spirit-target="#example-scroll-view"
+        aria-controls="example-scroll-view"
+        aria-expanded="false"
+        data-test-id="modal-with-scrollview"
+      >
+        Open Modal with ScrollView
+      </button>
+
+      <!-- Modal: start -->
+      <dialog id="example-scroll-view" class="Modal Modal--center" aria-labelledby="example-scroll-view-title">
+
+        <!-- ModalDialog: start -->
+        <article class="ModalDialog ModalDialog--scrollable">
+
+          <!-- ModalHeader: start -->
+          <header class="ModalHeader">
+            <h2 id="example-scroll-view-title" class="ModalHeader__title">
+              Modal with ScrollView
+            </h2>
+            <button
+              type="button"
+              class="Button Button--tertiary Button--symmetrical Button--medium"
+              data-spirit-dismiss="modal"
+              data-spirit-target="#example-scroll-view"
+              aria-controls="example-scroll-view"
+              aria-expanded="false"
+            >
+              <svg width="24" height="24" aria-hidden="true">
+                <use xlink:href="/assets/icons/svg/sprite.svg#close" />
+              </svg>
+              <span class="accessibility-hidden">Close</span>
+            </button>
+          </header>
+          <!-- ModalHeader: end -->
+
+          <!-- ScrollView: start -->
+          <div class="ScrollView ScrollView--vertical" data-spirit-toggle="scrollView">
+            <div class="ScrollView__viewport" data-spirit-element="viewport">
+              <div class="ScrollView__content" data-spirit-element="content">
+
+                <!-- ModalBody: start -->
+                <div class="ModalBody">
+                  <!-- Content: start -->
+                  <p>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+                    perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+                    provident unde. Eveniet, iste, molestiae?
+                  </p>
+                  <p>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+                    perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+                    provident unde. Eveniet, iste, molestiae?
+                  </p>
+                  <p>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+                    perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+                    provident unde. Eveniet, iste, molestiae?
+                  </p>
+                  <p>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+                    perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+                    provident unde. Eveniet, iste, molestiae?
+                  </p>
+                  <p>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+                    perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+                    provident unde. Eveniet, iste, molestiae?
+                  </p>
+                  <p>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+                    perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+                    provident unde. Eveniet, iste, molestiae?
+                  </p>
+                  <p>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+                    perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+                    provident unde. Eveniet, iste, molestiae?
+                  </p>
+                  <p>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+                    perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+                    provident unde. Eveniet, iste, molestiae?
+                  </p>
+                  <!-- Content: end -->
+                </div>
+                <!-- ModalBody: end -->
+
+              </div>
+            </div>
+            <div class="ScrollView__overflowDecorators ScrollView__overflowDecorators--borders" aria-hidden="true"></div>
+          </div>
+          <!-- ScrollView: end -->
+
+          <!-- ModalFooter: start -->
+          <footer class="ModalFooter ModalFooter--right">
+            <div class="ModalFooter__actions">
+              <button
+                type="button"
+                class="Button Button--primary Button--medium"
+                data-spirit-dismiss="modal"
+                data-spirit-target="#example-scroll-view"
+              >
+                Primary action
+              </button>
+              <button
+                type="button"
+                class="Button Button--secondary Button--medium"
+                data-spirit-dismiss="modal"
+                data-spirit-target="#example-scroll-view"
+              >
+                Secondary action
+              </button>
+            </div>
+          </footer>
+          <!-- ModalFooter: end -->
+
+        </article>
+        <!-- ModalDialog: end -->
+
+      </dialog>
+      <!-- Modal: end -->
+
+      <button
+        type="button"
+        class="Button Button--primary Button--medium"
+        data-spirit-toggle="modal"
+        data-spirit-target="#example-custom-height"
+        aria-controls="example-custom-height"
+        aria-expanded="false"
+        data-test-id="modal-with-custom-height"
+      >
+        Open Modal with Custom Height
+      </button>
+
+      <!-- Modal: start -->
+      <dialog
+        id="example-custom-height"
+        class="Modal Modal--center"
+        aria-labelledby="example-custom-height-title"
+      >
+
+        <!-- ModalDialog: start -->
+        <article
+          class="ModalDialog ModalDialog--scrollable"
+          style="--modal-dialog-height: 400px; --modal-dialog-height-tablet: 500px; --modal-dialog-height-desktop: 600px"
+        >
+
+          <!-- ModalHeader: start -->
+          <header class="ModalHeader">
+            <h2 id="example-custom-height-title" class="ModalHeader__title">Modal with Custom Height</h2>
+            <button
+              type="button"
+              class="Button Button--tertiary Button--symmetrical Button--medium"
+              data-spirit-dismiss="modal"
+              data-spirit-target="#example-custom-height"
+              aria-controls="example-custom-height"
+              aria-expanded="false"
+            >
+              <svg width="24" height="24" aria-hidden="true">
+                <use xlink:href="/assets/icons/svg/sprite.svg#close" />
+              </svg>
+              <span class="accessibility-hidden">Close</span>
+            </button>
+          </header>
+          <!-- ModalHeader: end -->
+
+          <!-- ModalBody: start -->
+          <div class="ModalBody">
+            <!-- Content: start -->
+            <!-- Modal custom height demo: start -->
+            <script>
+              const toggleCustomHeight = (event, selector, breakpoint) => {
+                const isCustomHeightEnabled = event.target.checked;
+                const breakpointSuffix = breakpoint === 'mobile' ? '' : `-${breakpoint}`;
+
+                const modalElement = document.querySelector(selector);
+                const modalHeightInputElement = document.querySelector(`#custom-height-${breakpoint}`);
+                const modalHeightValueElement = document.querySelector(`#custom-height-${breakpoint}-value`);
+                const modalMaxHeightInputElement = document.querySelector(`#custom-max-height-${breakpoint}`);
+                const modalMaxHeightValueElement = document.querySelector(`#custom-max-height-${breakpoint}-value`);
+
+                if (isCustomHeightEnabled) {
+                  modalElement.style.setProperty(`--modal-dialog-height${breakpointSuffix}`, `${modalHeightInputElement.value}px`);
+                  modalElement.style.setProperty(`--modal-dialog-max-height${breakpointSuffix}`, `${modalMaxHeightInputElement.value}px`);
+                  modalHeightInputElement.disabled = false;
+                  modalHeightValueElement.textContent = `${modalHeightInputElement.value} px`;
+                  modalMaxHeightInputElement.disabled = false;
+                  modalMaxHeightValueElement.textContent = `${modalMaxHeightInputElement.value} px`;
+                } else {
+                  modalElement.style.setProperty(`--modal-dialog-height${breakpointSuffix}`, 'unset');
+                  modalElement.style.setProperty(`--modal-dialog-max-height${breakpointSuffix}`, 'unset');
+                  modalHeightInputElement.disabled = true;
+                  modalHeightValueElement.textContent = '—';
+                  modalMaxHeightInputElement.disabled = true;
+                  modalMaxHeightValueElement.textContent = '—';
+                }
+              };
+
+              const setModalHeight = (event, selector, breakpoint) => {
+                const breakpointSuffix = breakpoint === 'mobile' ? '' : `-${breakpoint}`;
+                const modalElement = document.querySelector(selector);
+                const modalHeightValueElement = document.querySelector(`#custom-height-${breakpoint}-value`);
+
+                modalElement.style.setProperty(`--modal-dialog-height${breakpointSuffix}`, `${event.target.value}px`);
+                modalHeightValueElement.textContent = `${event.target.value} px`;
+              };
+
+              const setModalMaxHeight = (event, selector, breakpoint) => {
+                const breakpointSuffix = breakpoint === 'mobile' ? '' : `-${breakpoint}`;
+                const modalElement = document.querySelector(selector);
+                const modalHeightValueElement = document.querySelector(`#custom-max-height-${breakpoint}-value`);
+
+                modalElement.style.setProperty(`--modal-dialog-max-height${breakpointSuffix}`, `${event.target.value}px`);
+                modalHeightValueElement.textContent = `${event.target.value} px`;
+              };
+            </script>
+            <form>
+              <fieldset class="Stack Stack--hasSpacing mb-800" style="border: 0;">
+                <legend hidden>Mobile</legend>
+                <label for="custom-height-mobile-enabled" class="Checkbox">
+                  <input
+                    type="checkbox"
+                    id="custom-height-mobile-enabled"
+                    class="Checkbox__input"
+                    onchange="toggleCustomHeight(event, '#example-custom-height > .ModalDialog', 'mobile')"
+                    checked
+                    autocomplete="off"
+                  />
+                  <span class="Checkbox__text">
+                  <span class="Checkbox__label">Mobile</span>
+                </span>
+                </label>
+                <div class="Grid" style="column-gap: var(--spirit-space-600)">
+                  <label for="custom-height-mobile" class="GridItem" style="--grid-item-column-start: 1; --grid-item-column-end: 6; --grid-item-column-end-tablet: 4;">
+                    Height
+                  </label>
+                  <span id="custom-height-mobile-value" class="GridItem" style="--grid-item-column-start: 6; --grid-item-column-end: 13; --grid-item-column-start-tablet: 4; --grid-item-column-end-tablet: 7;">
+                  400 px
+                </span>
+                  <input
+                    type="range"
+                    id="custom-height-mobile"
+                    class="GridItem"
+                    style="--grid-item-column-start: 1; --grid-item-column-end: 13; --grid-item-column-start-tablet: 7;"
+                    onchange="setModalHeight(event, '#example-custom-height > .ModalDialog', 'mobile')"
+                    min="200"
+                    max="1000"
+                    step="100"
+                    value="400"
+                    autocomplete="off"
+                  />
+                </div>
+                <div class="Grid" style="column-gap: var(--spirit-space-600)">
+                  <label for="custom-max-height-mobile" class="GridItem" style="--grid-item-column-start: 1; --grid-item-column-end: 6; --grid-item-column-end-tablet: 4;">
+                    Max height
+                  </label>
+                  <span id="custom-max-height-mobile-value" class="GridItem" style="--grid-item-column-start: 6; --grid-item-column-end: 13; --grid-item-column-start-tablet: 4; --grid-item-column-end-tablet: 7;">
+                  600 px
+                </span>
+                  <input
+                    type="range"
+                    id="custom-max-height-mobile"
+                    class="GridItem"
+                    style="--grid-item-column-start: 1; --grid-item-column-end: 13; --grid-item-column-start-tablet: 7;"
+                    onchange="setModalMaxHeight(event, '#example-custom-height > .ModalDialog', 'mobile')"
+                    min="200"
+                    max="1000"
+                    step="100"
+                    value="600"
+                    autocomplete="off"
+                  />
+                </div>
+              </fieldset>
+              <fieldset class="Stack Stack--hasSpacing d-none d-tablet-grid mb-tablet-800" style="border: 0;">
+                <legend hidden>Tablet</legend>
+                <label for="custom-height-tablet-enabled" class="Checkbox">
+                  <input
+                    type="checkbox"
+                    id="custom-height-tablet-enabled"
+                    class="Checkbox__input"
+                    onchange="toggleCustomHeight(event, '#example-custom-height > .ModalDialog', 'tablet')"
+                    checked
+                    autocomplete="off"
+                  />
+                  <span class="Checkbox__text">
+                  <span class="Checkbox__label">Tablet</span>
+                </span>
+                </label>
+                <div class="Grid" style="column-gap: var(--spirit-space-600)">
+                  <label for="custom-height-tablet" class="GridItem" style="--grid-item-column-start: 1; --grid-item-column-end: 6; --grid-item-column-end-tablet: 4;">
+                    Height
+                  </label>
+                  <span id="custom-height-tablet-value" class="GridItem" style="--grid-item-column-start: 6; --grid-item-column-end: 13; --grid-item-column-start-tablet: 4; --grid-item-column-end-tablet: 7;">
+                  500 px
+                </span>
+                  <input
+                    type="range"
+                    id="custom-height-tablet"
+                    class="GridItem"
+                    style="--grid-item-column-start: 1; --grid-item-column-end: 13; --grid-item-column-start-tablet: 7;"
+                    onchange="setModalHeight(event, '#example-custom-height > .ModalDialog', 'tablet')"
+                    min="200"
+                    max="1000"
+                    step="100"
+                    value="500"
+                    autocomplete="off"
+                  />
+                </div>
+                <div class="Grid" style="column-gap: var(--spirit-space-600)">
+                  <label for="custom-max-height-tablet" class="GridItem" style="--grid-item-column-start: 1; --grid-item-column-end: 6; --grid-item-column-end-tablet: 4;">
+                    Max height
+                  </label>
+                  <span id="custom-max-height-tablet-value" class="GridItem" style="--grid-item-column-start: 6; --grid-item-column-end: 13; --grid-item-column-start-tablet: 4; --grid-item-column-end-tablet: 7;">
+                  600 px
+                </span>
+                  <input
+                    type="range"
+                    id="custom-max-height-tablet"
+                    class="GridItem"
+                    style="--grid-item-column-start: 1; --grid-item-column-end: 13; --grid-item-column-start-tablet: 7;"
+                    onchange="setModalMaxHeight(event, '#example-custom-height > .ModalDialog', 'tablet')"
+                    min="200"
+                    max="1000"
+                    step="100"
+                    value="600"
+                    autocomplete="off"
+                  />
+                </div>
+              </fieldset>
+              <fieldset class="Stack Stack--hasSpacing d-none d-desktop-grid" style="border: 0;">
+                <legend hidden>Desktop</legend>
+                <label for="custom-height-desktop-enabled" class="Checkbox">
+                  <input
+                    type="checkbox"
+                    id="custom-height-desktop-enabled"
+                    class="Checkbox__input"
+                    onchange="toggleCustomHeight(event, '#example-custom-height > .ModalDialog', 'desktop')"
+                    checked
+                    autocomplete="off"
+                  />
+                  <span class="Checkbox__text">
+                  <span class="Checkbox__label">Desktop</span>
+                </span>
+                </label>
+                <div class="Grid" style="column-gap: var(--spirit-space-600)">
+                  <label for="custom-height-desktop" class="GridItem" style="--grid-item-column-start: 1; --grid-item-column-end: 6; --grid-item-column-end-tablet: 4;">
+                    Height
+                  </label>
+                  <span id="custom-height-desktop-value" class="GridItem" style="--grid-item-column-start: 6; --grid-item-column-end: 13; --grid-item-column-start-tablet: 4; --grid-item-column-end-tablet: 7;">
+                  600 px
+                </span>
+                  <input
+                    type="range"
+                    id="custom-height-desktop"
+                    class="GridItem"
+                    style="--grid-item-column-start: 1; --grid-item-column-end: 13; --grid-item-column-start-tablet: 7;"
+                    onchange="setModalHeight(event, '#example-custom-height > .ModalDialog', 'desktop')"
+                    min="200"
+                    max="1000"
+                    step="100"
+                    value="600"
+                    autocomplete="off"
+                  />
+                </div>
+                <div class="Grid" style="column-gap: var(--spirit-space-600)">
+                  <label for="custom-max-height-desktop" class="GridItem" style="--grid-item-column-start: 1; --grid-item-column-end: 6; --grid-item-column-end-tablet: 4;">
+                    Max height
+                  </label>
+                  <span id="custom-max-height-desktop-value" class="GridItem" style="--grid-item-column-start: 6; --grid-item-column-end: 13; --grid-item-column-start-tablet: 4; --grid-item-column-end-tablet: 7;">
+                  600 px
+                </span>
+                  <input
+                    type="range"
+                    id="custom-max-height-desktop"
+                    class="GridItem"
+                    style="--grid-item-column-start: 1; --grid-item-column-end: 13; --grid-item-column-start-tablet: 7;"
+                    onchange="setModalMaxHeight(event, '#example-custom-height > .ModalDialog', 'desktop')"
+                    min="200"
+                    max="1000"
+                    step="100"
+                    value="600"
+                    autocomplete="off"
+                  />
+                </div>
+              </fieldset>
+            </form>
+            <!-- Modal custom height demo: end -->
+            <!-- Content: end -->
+          </div>
+          <!-- ModalBody: end -->
+
+          <!-- ModalFooter: start -->
+          <footer class="ModalFooter ModalFooter--right">
+            <div class="ModalFooter__actions">
+              <button
+                type="button"
+                class="Button Button--primary Button--medium"
+                data-spirit-dismiss="modal"
+                data-spirit-target="#example-custom-height"
+              >
+                Primary action
+              </button>
+              <button
+                type="button"
+                class="Button Button--secondary Button--medium"
+                data-spirit-dismiss="modal"
+                data-spirit-target="#example-custom-height"
+              >
+                Secondary action
+              </button>
+            </div>
+          </footer>
+          <!-- ModalFooter: end -->
+
+        </article>
+        <!-- ModalDialog: end -->
+
+      </dialog>
+      <!-- Modal: end -->
+
+    </div>
+
+  </div>
+
+</section>
+
+<section class="UNSTABLE_Section">
+
+  <div class="Container">
+
+    <h2 class="docs-Heading">Stacking Modals</h2>
+
+    <div class="docs-Stack docs-Stack--start">
+
+      <button
+        type="button"
+        class="Button Button--primary Button--medium"
+        data-spirit-toggle="modal"
+        data-spirit-target="#example-stacking-parent"
+        aria-controls="example-stacking-parent"
+        aria-expanded="false"
+        data-test-id="modal-stacking"
+      >
+        Open Modal
+      </button>
+
+      <!-- Modal: start -->
+      <dialog id="example-stacking-parent" class="Modal Modal--center" aria-labelledby="example-stacking-parent-title">
+
+        <!-- ModalDialog: start -->
+        <article class="ModalDialog">
+
+          <!-- ModalHeader: start -->
+          <header class="ModalHeader">
+            <h2 id="example-stacking-parent-title" class="ModalHeader__title">Modal Title</h2>
+            <button
+              type="button"
+              class="Button Button--tertiary Button--symmetrical Button--medium"
+              data-spirit-dismiss="modal"
+              data-spirit-target="#example-stacking-parent"
+              aria-controls="example-stacking-parent"
+              aria-expanded="false"
+            >
+              <svg width="24" height="24" aria-hidden="true">
+                <use xlink:href="/assets/icons/svg/sprite.svg#close" />
+              </svg>
+              <span class="accessibility-hidden">Close</span>
+            </button>
+          </header>
+          <!-- ModalHeader: end -->
+
+          <!-- ModalBody: start -->
+          <div class="ModalBody">
+            <!-- Content: start -->
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+              perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+              provident unde. Eveniet, iste, molestiae?
+            </p>
+            <!-- Content: end -->
+          </div>
+          <!-- ModalBody: end -->
+
+          <!-- ModalFooter: start -->
+          <footer class="ModalFooter ModalFooter--right">
+            <div class="ModalFooter__actions">
+              <button
+                type="button"
+                class="Button Button--primary Button--medium"
+                data-spirit-toggle="modal"
+                data-spirit-target="#example-stacking-nested"
+                aria-controls="example-stacking-nested"
+                aria-expanded="false"
+              >
+                Open stacked dialog
+              </button>
+            </div>
+          </footer>
+          <!-- ModalFooter: end -->
+
+        </article>
+        <!-- ModalDialog: end -->
+
+      </dialog>
+      <!-- Modal: end -->
+      <!-- Modal: start -->
+      <dialog id="example-stacking-nested" class="Modal Modal--center" aria-labelledby="example-stacking-nested-title">
+
+        <!-- ModalDialog: start -->
+        <article class="ModalDialog">
+
+          <!-- ModalHeader: start -->
+          <header class="ModalHeader">
+            <h2 id="example-stacking-nested-title" class="ModalHeader__title">Stacked Modal Title</h2>
+            <button
+              type="button"
+              class="Button Button--tertiary Button--symmetrical Button--medium"
+              data-spirit-dismiss="modal"
+              data-spirit-target="#example-stacking-nested"
+              aria-controls="example-stacking-nested"
+              aria-expanded="false"
+            >
+              <svg width="24" height="24" aria-hidden="true">
+                <use xlink:href="/assets/icons/svg/sprite.svg#close" />
+              </svg>
+              <span class="accessibility-hidden">Close</span>
+            </button>
+          </header>
+          <!-- ModalHeader: end -->
+
+          <!-- ModalBody: start -->
+          <div class="ModalBody">
+            <!-- Content: start -->
+            <p>
+              Dolor quis metus a lorem, et elit pulvinar ligula condimentum non congue rhoncus molestie, at sem
+              viverra maximus nunc. Posuere pretium accumsan, pharetra vel integer sit amet volutpat neque fringilla,
+              non mauris erat id augue libero. Porta non congue, et iaculis et vehicula convallis non purus placerat
+              cursus, rhoncus laoreet nec et elit. Proin luctus, bibendum adipiscing ut ollicitudin vehicula nisi
+              nunc et, sollicitudin eget tristique nec commodo. Porttitor ligula, tellus vehicula arcu vestibulum
+              sed rutrum placerat, dui quis facilisis eget. Suscipit molestie, nibh maximus enim vestibulum aenean
+              ut libero sed imperdiet, curabitur et elit venenatis posuere.
+              <br />
+              Sapien vitae, dui sollicitudin nullam dolor quis nec nulla sapien, diam a ollicitudin non nulla nisl.
+              Quis orci porta, ac nec sapien ornare imperdiet a vel convallis, adipiscing ullamcorper lectus quis
+              pharetra. At nullam rutrum, nisl eget sit amet pulvinar ultricies nec porta, diam a sem odio a mauris
+              eu. Suscipit sodales, fusce ante cursus convallis dui vel dolor potenti nulla fusce gravida.
+            </p>
+            <!-- Content: end -->
+          </div>
+          <!-- ModalBody: end -->
+
+          <!-- ModalFooter: start -->
+          <footer class="ModalFooter ModalFooter--right">
+            <div class="ModalFooter__actions">
+              <button type="submit" class="Button Button--primary Button--medium">
+                Primary action
+              </button>
+              <button
+                type="button"
+                class="Button Button--secondary Button--medium"
+                data-spirit-dismiss="modal"
+                data-spirit-target="#example-stacking-nested"
+              >
+                Secondary action
+              </button>
+            </div>
+          </footer>
+          <!-- ModalFooter: end -->
+
+        </article>
+        <!-- ModalDialog: end -->
+
+      </dialog>
+      <!-- Modal: end -->
+
+    </div>
+
+  </div>
+
+</section>
+
+<section class="UNSTABLE_Section">
+
+  <div class="Container">
+
+    <h2 class="docs-Heading">Disabled Backdrop Click</h2>
+
+    <div class="docs-Stack docs-Stack--start">
+
+      <button
+        type="button"
+        class="Button Button--primary Button--medium"
+        data-spirit-toggle="modal"
+        data-spirit-target="#example-disabled-backdrop-click"
+        aria-controls="example-disabled-backdrop-click"
+        aria-expanded="false"
+        data-test-id="modal-with-disabled-backdrop-click"
+      >
+        Open Modal
+      </button>
+
+      <dialog id="example-disabled-backdrop-click" class="Modal Modal--center" aria-labelledby="example-disabled-backdrop-click-title" data-spirit-close-on-backdrop-click="false">
+
+        <article class="ModalDialog ModalDialog--expandOnMobile">
+
+          <header class="ModalHeader">
+            <h2 id="example-disabled-backdrop-click-title" class="ModalHeader__title">Modal Title</h2>
+            <button
+              type="button"
+              class="Button Button--tertiary Button--symmetrical Button--medium"
+              data-spirit-dismiss="modal"
+              data-spirit-target="#example-disabled-backdrop-click"
+              aria-controls="example-disabled-backdrop-click"
+              aria-expanded="false"
+            >
+              <svg width="24" height="24" aria-hidden="true">
+                <use xlink:href="/assets/icons/svg/sprite.svg#close" />
+              </svg>
+              <span class="accessibility-hidden">Close</span>
+            </button>
+          </header>
+
+          <div class="ModalBody">
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+              perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+              provident unde. Eveniet, iste, molestiae?
+            </p>
+          </div>
+
+          <footer class="ModalFooter ModalFooter--right">
+            <div class="ModalFooter__actions">
+              <button
+                type="button"
+                class="Button Button--primary Button--medium"
+                data-spirit-dismiss="modal"
+                data-spirit-target="#example-disabled-backdrop-click"
+              >
+                Primary action
+              </button>
+              <button
+                type="button"
+                class="Button Button--secondary Button--medium"
+                data-spirit-dismiss="modal"
+                data-spirit-target="#example-disabled-backdrop-click"
+              >
+                Secondary action
+              </button>
+            </div>
+          </footer>
+
+        </article>
+
+      </dialog>
+
+    </div>
+
+  </div>
+
+</section>
+
+<section class="UNSTABLE_Section">
+
+  <div class="Container">
+
+    <h2 class="docs-Heading">Hidden Close Button and Disabled Escape Key</h2>
+
+    <div class="docs-Stack docs-Stack--start">
+
+
+      <button
+        type="button"
+        class="Button Button--primary Button--medium"
+        data-spirit-toggle="modal"
+        data-spirit-target="#example-hide-close-button"
+        aria-controls="example-hide-close-button"
+        aria-expanded="false"
+        data-test-id="modal-with-hidden-close-button"
+      >
+        Open Modal
+      </button>
+
+      <dialog id="example-hide-close-button" class="Modal Modal--center" aria-labelledby="example-hide-close-button-title" data-spirit-close-on-backdrop-click="false" data-spirit-close-on-escape-key-down="false">
+
+        <article class="ModalDialog ModalDialog--expandOnMobile">
+
+          <header class="ModalHeader">
+            <h2 id="example-hide-close-button-title" class="ModalHeader__title">Modal Title</h2>
+          </header>
+
+          <div class="ModalBody">
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+              perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+              provident unde. Eveniet, iste, molestiae?
+            </p>
+          </div>
+
+          <footer class="ModalFooter ModalFooter--right">
+            <div class="ModalFooter__actions">
+              <button
+                type="button"
+                class="Button Button--primary Button--medium"
+                data-spirit-dismiss="modal"
+                data-spirit-target="#example-hide-close-button"
+              >
+                Primary action
+              </button>
+              <button
+                type="button"
+                class="Button Button--secondary Button--medium"
+                data-spirit-dismiss="modal"
+                data-spirit-target="#example-hide-close-button"
+              >
+                Secondary action
+              </button>
+            </div>
+          </footer>
+
+        </article>
+
+      </dialog>
+
+    </div>
+
+  </div>
+
+</section>
+
+{{/web/layout/default }}
diff --git a/packages/web/src/scss/components/Drawer/index.scss b/packages/web/src/scss/components/Drawer/index.scss
new file mode 100644
index 0000000000..1cfc43df90
--- /dev/null
+++ b/packages/web/src/scss/components/Drawer/index.scss
@@ -0,0 +1,2 @@
+@forward 'Drawer';
+@forward 'DrawerDialog';
diff --git a/packages/web/src/scss/components/index.scss b/packages/web/src/scss/components/index.scss
index 13a2888365..a9123faa6b 100644
--- a/packages/web/src/scss/components/index.scss
+++ b/packages/web/src/scss/components/index.scss
@@ -8,6 +8,7 @@
 @forward 'Collapse';
 @forward 'Container';
 @forward 'Divider';
+@forward 'Drawer';
 @forward 'Dropdown';
 @forward 'FieldGroup';
 @forward 'FileUploader';