Create overlay component

resources/styles/molecules/index.scss

@@ -3,12 +3,14 @@
 @forward "banner";
 @forward "card";
 @forward "checklist";
+@forward "dialog";
 @forward "field";
 @forward "list";
 @forward "logoCloud";
 @forward "mediaBanner";
 @forward "mobileNavigation";
 @forward "navigation";
+@forward "overlay";
 @forward "pagination";
 @forward "sitemap";
 @forward "tabs";

resources/styles/molecules/overlay/index.scss

@@ -0,0 +1,95 @@
+.overlay {
+  background: rgba(13, 0, 26, 0.70);
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  display: grid;
+  height: 100%;
+  inset: 0;
+  justify-items: center;
+  max-height: 100%;
+  max-width: 100%;
+  padding: var(--root-gap);
+  place-content: center;
+  position: fixed;
+  width: 100%;
+
+  &::backdrop {
+    backdrop-filter: blur(12px);
+    background: rgba(13, 0, 26, 0.70);
+  }
+
+  &:not([open]) {
+    display: none;
+  }
+
+  /**
+   * Note: This sibling element is only needed for static HTML demos using the `open` attribute.
+   * For production, use showModal() to open the dialog and the ::backdrop pseudo-element above
+   * will provide the blur effect. The .overlay__backdrop element can be omitted.
+   */
+  &__backdrop {
+    backdrop-filter: blur(12px);
+    background: rgba(13, 0, 26, 0.70);
+    inset: 0;
+    position: fixed;
+
+    &:not(:has(+ .overlay[open])) {
+      display: none;
+    }
+  }
+
+  &__close {
+    appearance: none;
+    background: transparent;
+    border: 0;
+    color: #fff;
+    cursor: pointer;
+    height: 5.25rem;
+    padding: 0;
+    position: absolute;
+    right: 1rem;
+    top: 1rem;
+    transition: opacity var(--root-ease-out-fast),
+      transform var(--root-ease-out-fast);
+    width: 5.25rem;
+    z-index: 1;
+
+    &:hover {
+      opacity: 0.8;
+      transform: scale(1.1);
+    }
+  }
+
+  &__content {
+    display: grid;
+    gap: 1rem;
+    justify-items: center;
+    max-height: calc(100vh - var(--root-gap) * 2);
+    max-width: min(90vw, 56rem);
+  }
+
+  &__figure {
+    display: grid;
+    gap: 1rem;
+    justify-items: center;
+    margin: 0;
+  }
+
+  &__image {
+    border-radius: 0.25rem;
+    box-shadow: var(--root-box-shadow-high);
+    display: block;
+    height: auto;
+    max-height: calc(100vh - 8rem);
+    max-width: 100%;
+    object-fit: contain;
+  }
+
+  &__caption {
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 1rem;
+    text-align: center;
+  }
+}
+

resources/styles/molecules/overlay/overlay--opened.html

@@ -0,0 +1,27 @@
+<div class="container">
+    <h2>Background Content</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
+    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
+  </div>
+
+  <!--
+    Note: The .overlay__backdrop element is only needed for static HTML demos using the `open` attribute.
+    For production, open the dialog with JavaScript's showModal() and the ::backdrop pseudo-element
+    will provide the blur effect automatically. The sibling element can be omitted.
+  -->
+  <div class="overlay__backdrop"></div>
+  <dialog class="overlay" ref="overlay" open>
+    <button class="overlay__close" aria-label="Close" @click="$refs.overlay.close()">
+      <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect x="32" y="34" width="2" height="48" rx="1" transform="rotate(-45 32 34)" fill="#F2E5FF"/>
+        <rect x="66" y="32" width="2" height="48" rx="1" transform="rotate(45 66 32)" fill="#F2E5FF"/>
+      </svg>
+    </button>
+    <div class="overlay__content">
+      <figure class="overlay__figure">
+        <img class="overlay__image" src="https://picsum.photos/800/600" alt="Example landscape image">
+        <figcaption class="overlay__caption">Eget nibh pretium ipsum auctor pharetra.</figcaption>
+      </figure>
+    </div>
+  </dialog>
+

resources/styles/molecules/overlay/overlay.html

@@ -0,0 +1,23 @@
+<div class="container">
+  <h2>Background Content</h2>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
+  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
+  <div class="actions">
+    <button class="button" @click="$refs.overlay.showModal()">Open Overlay</button>
+  </div>
+</div>
+
+<dialog class="overlay" ref="overlay">
+  <button class="overlay__close" aria-label="Close" @click="$refs.overlay.close()">
+    <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect x="32" y="34" width="2" height="48" rx="1" transform="rotate(-45 32 34)" fill="#F2E5FF"/>
+      <rect x="66" y="32" width="2" height="48" rx="1" transform="rotate(45 66 32)" fill="#F2E5FF"/>
+    </svg>
+  </button>
+  <div class="overlay__content">
+    <figure class="overlay__figure">
+      <img class="overlay__image" src="https://picsum.photos/800/600" alt="Example landscape image">
+      <figcaption class="overlay__caption">Eget nibh pretium ipsum auctor pharetra.</figcaption>
+    </figure>
+  </div>
+</dialog>

resources/styles/organisms/index.scss

@@ -1,6 +1,5 @@
 @forward "basicSection";
 @forward "callout";
-@forward "dialog";
 @forward "hero";
 @forward "message";
 @forward "richText";