feat(dialog): added new component using base <dialog>

.changeset/sharp-keys-camp.md

@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+feat(dialog): added new component to use native dialog tag

packages/evo-marko/src/tags/evo-dialog/index.marko

@@ -0,0 +1,35 @@
+<!-- NOTE, this is not a full implementation but only here so the code is not lost -->
+<let/open = false>
+<let/visible = false>
+<script>
+  if (open) {
+    $dialog().showModal();
+    visible = true;
+  } else {
+    if (visible) {
+      $dialog().classList.add("dialog-close");
+      $dialog().addEventListener(
+        "animationend",
+        () => {
+          $dialog().close();
+          visible = false;
+          $dialog().classList.remove("dialog-close");
+        },
+        {
+          signal: $signal,
+          once: true,
+        },
+      );
+    }
+  }
+</script>
+
+<dialog/$dialog
+  class="dialog"
+  // closedby="any"
+  onCancel(e) {
+    e.preventDefault();
+    open = false;
+  }
+ ...input>
+</dialog>

packages/skin/dialog.mjs

@@ -0,0 +1 @@
+import './dist/dialog/dialog.css';

packages/skin/dist/dialog/dialog.css

@@ -0,0 +1,212 @@
+:root {
+    --dialog-scrim-color-hide: rgb(17 24 32 / 0);
+    --dialog-scrim-color-show: rgb(17 24 32 / 0.7);
+    --dialog-lightbox-max-width: 616px;
+    --dialog-max-width: 616px;
+    --dialog-wide-max-width: 896px;
+    --dialog-narrow-max-width: 480px;
+    --dialog-scrim-color: rgb(17 24 32 / 0.7);
+    scrollbar-gutter: stable;
+}
+@keyframes dialog-open-scrim {
+    0% {
+        background: transparent;
+    }
+    to {
+        background-color: var(--dialog-scrim-color);
+    }
+}
+@keyframes dialog-close-scrim {
+    0% {
+        background-color: var(--dialog-scrim-color);
+    }
+    to {
+        background: transparent;
+    }
+}
+@keyframes dialog-open-scale {
+    0% {
+        scale: 0.75;
+    }
+    to {
+        scale: 1;
+    }
+}
+@keyframes dialog-close-scale {
+    0% {
+        scale: 1;
+    }
+    to {
+        scale: 0.75;
+    }
+}
+@keyframes dialog-open-opacity {
+    0% {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+@keyframes dialog-close-opacity {
+    0% {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}
+body:has(.dialog[open]) {
+    overflow: hidden !important;
+}
+.dialog {
+    background-color: var(--color-background-primary);
+    border: none;
+    border-radius: var(--border-radius-150);
+    color: var(--color-foreground-primary);
+    flex-direction: column;
+    max-height: 90%;
+    max-width: 88%;
+    min-height: 55px;
+    min-width: 208px;
+    padding: 0;
+}
+.dialog__header {
+    display: flex;
+    flex-shrink: 0;
+    padding: var(--spacing-200) var(--spacing-200) 0;
+    position: relative;
+}
+.dialog__header h1,
+.dialog__header h2,
+.dialog__header h3,
+.dialog__header h4,
+.dialog__header h5,
+.dialog__header h6 {
+    align-self: center;
+    flex: 1 1 auto;
+    margin: 0;
+    overflow-wrap: anywhere;
+}
+.dialog__header > :last-child:not(:only-child) {
+    flex-shrink: 0;
+    margin-inline-start: var(--spacing-200);
+}
+.dialog__main {
+    box-sizing: border-box;
+    flex: 1 1 auto;
+    overflow: auto;
+    padding: var(--spacing-200);
+    position: relative;
+}
+.dialog__main > :first-child {
+    margin-top: 0;
+}
+.dialog__main > :last-child {
+    margin-bottom: 0;
+}
+.dialog__footer {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: var(--spacing-200);
+    position: relative;
+}
+.dialog__footer > :not(:first-child) {
+    margin-top: var(--spacing-200);
+}
+.dialog__image {
+    background-position: 50%;
+    background-repeat: no-repeat;
+    background-size: cover;
+    border-radius: var(--border-radius-100) var(--border-radius-100) 0 0;
+    height: 218px;
+    position: absolute;
+    width: 100%;
+}
+.dialog--expressive .dialog__header > * {
+    margin-top: 218px;
+}
+button.icon-btn.dialog__prev {
+    margin-inline-end: var(--spacing-200);
+}
+.dialog[open] {
+    display: flex;
+}
+.dialog[open].dialog--close::backdrop {
+    animation: dialog-close-scrim var(--motion-duration-short-3)
+        var(--motion-easing-continuous) forwards;
+}
+.dialog[open]::backdrop {
+    animation: dialog-open-scrim var(--motion-duration-short-3)
+        var(--motion-easing-continuous) forwards;
+}
+.dialog[open].dialog--close {
+    animation:
+        dialog-close-scale var(--motion-duration-medium-3)
+            var(--motion-easing-soft-exit),
+        dialog-close-opacity var(--motion-duration-short-3)
+            var(--motion-easing-continuous);
+    transition:
+        display var(--motion-duration-short-3) allow-discrete,
+        overlay var(--motion-duration-short-3) allow-discrete;
+}
+.dialog[open] {
+    animation:
+        dialog-open-scale var(--motion-duration-medium-3)
+            var(--motion-easing-standard),
+        dialog-open-opacity var(--motion-duration-short-3)
+            var(--motion-easing-continuous);
+}
+.dialog--large {
+    height: 98%;
+    max-height: 98%;
+    width: 95%;
+}
+@media (min-width: 512px) {
+    .dialog {
+        border-radius: var(--border-radius-100);
+    }
+    .dialog--wide {
+        max-width: 88%;
+    }
+    .dialog--wide .dialog__image {
+        height: 256px;
+    }
+    .dialog--wide.dialog--expressive .dialog__header > * {
+        margin-top: 256px;
+    }
+    .dialog__footer {
+        flex-direction: row;
+        justify-content: flex-end;
+    }
+    .dialog__footer > :not(:first-child) {
+        margin-left: var(--spacing-100);
+        margin-top: 0;
+    }
+    .dialog--large {
+        align-self: center;
+        height: 70%;
+        max-height: 95%;
+    }
+}
+@media (min-width: 768px) {
+    .dialog {
+        max-width: var(--dialog-max-width);
+    }
+    .dialog--narrow {
+        max-width: var(--dialog-narrow-max-width);
+    }
+    .dialog--wide {
+        max-width: var(--dialog-wide-max-width);
+        max-width: 88%;
+    }
+}
+@media (min-width: 1024px) {
+    .dialog--wide {
+        max-width: var(--dialog-wide-max-width);
+    }
+}
+[dir="rtl"] button.icon-btn.dialog__prev .icon--16 {
+    transform: rotate(180deg);
+}

packages/skin/index.mjs

@@ -17,6 +17,7 @@ import './dist/confirm-dialog/confirm-dialog.css';
 import './dist/cta-button/cta-button.css';
 import './dist/date-textbox/date-textbox.css';
 import './dist/details/details.css';
+import './dist/dialog/dialog.css';
 import './dist/donut-chart/donut-chart.css';
 import './dist/drawer-dialog/drawer-dialog.css';
 import './dist/education-notice/education-notice.css';

packages/skin/src/sass/bundles/skin-headless.scss

@@ -21,6 +21,7 @@
 @use "../cta-button/cta-button";
 @use "../date-textbox/date-textbox";
 @use "../details/details";
+@use "../dialog/dialog";
 @use "../donut-chart/donut-chart";
 @use "../drawer-dialog/drawer-dialog";
 @use "../education-notice/education-notice";