yattho_view_components 0.0.1

data/app/components/yattho/alpha/dialog.css

@@ -0,0 +1,613 @@
+/* Overlay */
+
+.Overlay--hidden {
+  display: none !important;
+}
+
+.Overlay--visibilityHidden {
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+  opacity: 0;
+}
+
+.Overlay {
+  display: flex;
+  width: min(var(--overlay-width), 100vw - 2rem);
+  min-width: 192px;
+  max-height: min(calc(100vh - 2rem), var(--overlay-height));
+  white-space: normal;
+  flex-direction: column;
+  background-color: var(--color-canvas-overlay);
+  border-radius: var(--yattho-borderRadius-large, 12px);
+  box-shadow: var(--color-overlay-shadow);
+  opacity: 1;
+}
+
+.Overlay.Overlay--size-auto {
+    min-width: 192px;
+    max-width: calc(100vw - 2rem);
+    max-height: calc(100vh - 2rem);
+  }
+
+.Overlay.Overlay--size-full {
+    width: 100vw;
+    height: 100vh;
+  }
+
+.Overlay.Overlay--size-xsmall {
+    --overlay-width: 192px;
+
+    max-height: calc(100vh - 2rem);
+  }
+
+.Overlay.Overlay--size-small {
+    --overlay-height: 256px;
+    --overlay-width: 320px;
+  }
+
+.Overlay.Overlay--size-small-portrait {
+    --overlay-height: 432px;
+    --overlay-width: 320px;
+  }
+
+.Overlay.Overlay--size-medium {
+    --overlay-height: 320px;
+    --overlay-width: 480px;
+  }
+
+.Overlay.Overlay--size-medium-portrait {
+    --overlay-height: 600px;
+    --overlay-width: 480px;
+  }
+
+.Overlay.Overlay--size-large {
+    --overlay-height: 432px;
+    --overlay-width: 640px;
+  }
+
+.Overlay.Overlay--size-xlarge {
+    --overlay-height: 600px;
+    --overlay-width: 960px;
+  }
+
+.Overlay.Overlay--height-auto {
+    height: auto;
+  }
+
+/* start deprecate in favor of Alpha::Dialog */
+
+.Overlay.Overlay--height-xsmall {
+    height: min(192px, 100vh - 2rem);
+  }
+
+.Overlay.Overlay--height-small {
+    height: min(256px, 100vh - 2rem);
+  }
+
+.Overlay.Overlay--height-medium {
+    height: min(320px, 100vh - 2rem);
+  }
+
+.Overlay.Overlay--height-large {
+    height: min(432px, 100vh - 2rem);
+  }
+
+.Overlay.Overlay--height-xlarge {
+    height: min(600px, 100vh - 2rem);
+  }
+
+.Overlay.Overlay--width-auto {
+    width: auto;
+  }
+
+.Overlay.Overlay--width-small {
+    width: min(256px, 100vw - 2rem);
+  }
+
+.Overlay.Overlay--width-medium {
+    width: min(320px, 100vw - 2rem);
+  }
+
+.Overlay.Overlay--width-large {
+    width: min(480px, 100vw - 2rem);
+  }
+
+.Overlay.Overlay--width-xlarge {
+    width: min(640px, 100vw - 2rem);
+  }
+
+.Overlay.Overlay--width-xxlarge {
+    width: min(960px, 100vw - 2rem);
+  }
+
+/* end deprecate */
+
+@media screen and (prefers-reduced-motion: no-preference) {
+
+.Overlay.Overlay--motion-scaleFade {
+      animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-scaleFade;
+  }
+    }
+
+@keyframes Overlay--motion-scaleFade {
+  0% {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* for <form> element that wraps entire contents of overlay */
+
+.Overlay-form {
+  display: flex;
+  overflow: auto;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.Overlay-header {
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.Overlay-header.Overlay-header--divided {
+    padding-bottom: var(--yattho-stack-padding-condensed, 8px);
+    box-shadow: inset 0 calc(var(--yattho-borderWidth-thin, 1px) * -1) var(--color-border-default);
+  }
+
+.Overlay-header.Overlay-header--divided + .Overlay-body {
+      padding-top: var(--yattho-stack-padding-normal, 16px);
+    }
+
+.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap {
+        gap: var(--yattho-stack-gap-condensed, 8px);
+      }
+
+.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-title {
+          font-size: var(--yattho-text-title-size-medium, 20px);
+        }
+
+.Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description {
+          font-size: var(--yattho-text-body-size-medium, 14px);
+        }
+
+.Overlay-header .Overlay-headerContentWrap {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--yattho-stack-gap-condensed, 8px);
+    padding: var(--yattho-stack-gap-condensed, 8px) var(--yattho-stack-gap-condensed, 8px) 0 var(--yattho-stack-gap-condensed, 8px);
+  }
+
+.Overlay-header .Overlay-headerContentWrap .Overlay-actionWrap {
+      display: flex;
+      flex-direction: row;
+      gap: var(--yattho-stack-gap-condensed, 8px);
+    }
+
+.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap {
+      display: flex;
+      padding: calc(var(--yattho-stack-gap-condensed, 8px) * 0.75) 0 calc(var(--yattho-stack-gap-condensed, 8px) * 0.75) var(--yattho-stack-gap-condensed, 8px);
+      flex-direction: column;
+      flex-grow: 1;
+      gap: var(--yattho-control-small-gap, 4px);
+    }
+
+.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-title {
+        margin: 0;
+        font-size: var(--yattho-text-body-size-medium, 14px);
+        font-weight: var(--base-text-weight-semibold, 600);
+      }
+
+.Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description {
+        margin: 0;
+        font-size: var(--yattho-text-body-size-small, 12px);
+        font-weight: var(--base-text-weight-normal, 400);
+        color: var(--color-fg-muted);
+      }
+
+/* generic body content slot */
+
+.Overlay-body {
+  padding: var(--yattho-stack-padding-normal, 16px);
+  padding-top: 0;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  font-size: var(--yattho-text-body-size-medium, 14px);
+  flex-grow: 1;
+}
+
+.Overlay-body.Overlay-body--paddingCondensed {
+    padding: var(--yattho-stack-padding-condensed, 8px);
+    padding-top: 0;
+  }
+
+.Overlay-body.Overlay-body--paddingNone {
+    padding: 0;
+  }
+
+/* generic footer slot */
+
+.Overlay-footer {
+  z-index: 1;
+  display: flex;
+  padding: 0 var(--yattho-stack-padding-normal, 16px) var(--yattho-stack-padding-normal, 16px) var(--yattho-stack-padding-normal, 16px);
+  flex-direction: row;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+}
+
+.Overlay-footer.Overlay-footer--divided {
+    padding-top: var(--yattho-stack-padding-normal, 16px);
+    box-shadow: inset 0 var(--yattho-borderWidth-thin, 1px) var(--color-border-default);
+  }
+
+.Overlay-footer.Overlay-footer--alignStart {
+    justify-content: flex-start;
+    gap: var(--yattho-stack-gap-condensed, 8px);
+  }
+
+.Overlay-footer.Overlay-footer--alignCenter {
+    justify-content: center;
+    gap: var(--yattho-stack-gap-condensed, 8px);
+  }
+
+.Overlay-footer.Overlay-footer--alignEnd {
+    justify-content: flex-end;
+    gap: var(--yattho-stack-gap-condensed, 8px);
+  }
+
+/* TODO: replace with refactored IconButton */
+
+.Overlay-closeButton {
+  position: relative;
+  display: grid;
+  width: var(--base-size-32, 32px);
+  height: var(--base-size-32, 32px);
+  padding: 0;
+  color: var(--color-fg-muted);
+  cursor: pointer;
+  -webkit-user-select: none;
+          user-select: none;
+  background-color: transparent;
+  border: var(--yattho-borderWidth-thin, 1px) solid transparent;
+  border-radius: var(--yattho-borderRadius-medium, 6px);
+  transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+  transition-property: color, background-color, border-color;
+  place-content: center;
+  align-self: flex-start;
+  flex-shrink: 0;
+}
+
+.Overlay-closeButton:hover,
+  .Overlay-closeButton:focus {
+    background-color: var(--color-btn-hover-bg);
+    border: var(--yattho-borderWidth-thin, 1px) solid var(--color-btn-hover-bg);
+  }
+
+/* Override .close-button's `border: 0` that triggers a border-color transition on hover  */
+
+.Overlay-closeButton.close-button {
+    border: var(--yattho-borderWidth-thin, 1px) solid transparent;
+  }
+
+/* variants must be mixins so we can extend within a media query (@extend is not supported inside media queries) */
+
+/* border-radius repeats within placement options to ensure the original radius is reset when two classes co-exist */
+
+/* center */
+
+/* anchor */
+
+/* anchor side(s) */
+
+/* full width */
+
+/* Overlay variant classnames */
+
+.Overlay-backdrop--center {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 999;
+  display: flex;
+  background-color: var(--color-neutral-muted);
+  align-items: center;
+  justify-content: center;
+}
+
+.Overlay-backdrop--anchor {
+  position: absolute;
+  z-index: 999;
+  background-color: transparent;
+}
+
+.Overlay-backdrop--anchor .Overlay {
+    width: auto;
+  }
+
+.Overlay-backdrop--side {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 999;
+  display: flex;
+  background-color: var(--color-neutral-muted);
+  /* default left */
+  align-items: center;
+  justify-content: left;
+}
+
+.Overlay-backdrop--side.Overlay-backdrop--placement-left {
+    align-items: center;
+    justify-content: left;
+  }
+
+.Overlay-backdrop--side.Overlay-backdrop--placement-left > .Overlay {
+      height: 100vh;
+      max-height: unset;
+      border-radius: var(--yattho-borderRadius-large, 12px);
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+@media screen and (prefers-reduced-motion: no-preference) {
+
+.Overlay-backdrop--side.Overlay-backdrop--placement-left > .Overlay {
+        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideInRight;
+    }
+      }
+
+.Overlay-backdrop--side.Overlay-backdrop--placement-right {
+    align-items: center;
+    justify-content: right;
+  }
+
+.Overlay-backdrop--side.Overlay-backdrop--placement-right > .Overlay {
+      height: 100vh;
+      max-height: unset;
+      border-radius: var(--yattho-borderRadius-large, 12px);
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+@media screen and (prefers-reduced-motion: no-preference) {
+
+.Overlay-backdrop--side.Overlay-backdrop--placement-right > .Overlay {
+        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideInLeft;
+    }
+      }
+
+.Overlay-backdrop--side.Overlay-backdrop--placement-bottom {
+    align-items: end;
+    justify-content: center;
+  }
+
+.Overlay-backdrop--side.Overlay-backdrop--placement-bottom > .Overlay {
+      width: 100vw;
+      height: auto;
+      max-height: calc(100vh - 2rem);
+      border-radius: var(--yattho-borderRadius-large, 12px);
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+@media screen and (prefers-reduced-motion: no-preference) {
+
+.Overlay-backdrop--side.Overlay-backdrop--placement-bottom > .Overlay {
+        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideUp;
+    }
+      }
+
+.Overlay-backdrop--side.Overlay-backdrop--placement-top {
+    align-items: start;
+    justify-content: center;
+  }
+
+.Overlay-backdrop--side.Overlay-backdrop--placement-top > .Overlay {
+      border-radius: var(--yattho-borderRadius-large, 12px);
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+
+@media screen and (prefers-reduced-motion: no-preference) {
+
+.Overlay-backdrop--side.Overlay-backdrop--placement-top > .Overlay {
+        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideDown;
+    }
+      }
+
+.Overlay-backdrop--full {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 999;
+  display: flex;
+  background-color: var(--color-neutral-muted);
+}
+
+.Overlay-backdrop--full .Overlay {
+    border-radius: unset !important;
+  }
+
+.Overlay-backdrop--full .Overlay {
+    width: 100%;
+    max-width: 100vw;
+    height: 100%;
+    max-height: 100vh;
+    flex-grow: 1;
+  }
+
+/* responsive variants */
+
+/* --yattho-viewportRange-narrowLandscape */
+
+@media (max-width: 767px) {
+  .Overlay-backdrop--center-whenNarrow {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 999;
+    display: flex;
+    background-color: var(--color-neutral-muted);
+    align-items: center;
+    justify-content: center;
+  }
+
+  .Overlay-backdrop--anchor-whenNarrow {
+    position: absolute;
+    z-index: 999;
+    background-color: transparent;
+  }
+    .Overlay-backdrop--anchor-whenNarrow .Overlay {
+    width: auto;
+  }
+
+  .Overlay-backdrop--side-whenNarrow {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 999;
+    display: flex;
+    background-color: var(--color-neutral-muted);
+    /* default left */
+    align-items: center;
+    justify-content: left;
+  }
+    .Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow {
+    align-items: center;
+    justify-content: left;
+  }
+
+    .Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow > .Overlay-whenNarrow {
+      height: 100vh;
+      max-height: unset;
+      border-radius: var(--yattho-borderRadius-large, 12px);
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+      @media screen and (prefers-reduced-motion: no-preference) {
+
+    .Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow > .Overlay-whenNarrow {
+        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideInRight;
+    }
+      }
+    .Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-right-whenNarrow {
+    align-items: center;
+    justify-content: right;
+  }
+
+    .Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-right-whenNarrow > .Overlay-whenNarrow {
+      height: 100vh;
+      max-height: unset;
+      border-radius: var(--yattho-borderRadius-large, 12px);
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+      @media screen and (prefers-reduced-motion: no-preference) {
+
+    .Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-right-whenNarrow > .Overlay-whenNarrow {
+        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideInLeft;
+    }
+      }
+    .Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-bottom-whenNarrow {
+    align-items: end;
+    justify-content: center;
+  }
+
+    .Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-bottom-whenNarrow > .Overlay-whenNarrow {
+      width: 100vw;
+      height: auto;
+      max-height: calc(100vh - 2rem);
+      border-radius: var(--yattho-borderRadius-large, 12px);
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+      @media screen and (prefers-reduced-motion: no-preference) {
+
+    .Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-bottom-whenNarrow > .Overlay-whenNarrow {
+        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideUp;
+    }
+      }
+    .Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-top-whenNarrow {
+    align-items: start;
+    justify-content: center;
+  }
+
+    .Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-top-whenNarrow > .Overlay-whenNarrow {
+      border-radius: var(--yattho-borderRadius-large, 12px);
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+
+      @media screen and (prefers-reduced-motion: no-preference) {
+
+    .Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-top-whenNarrow > .Overlay-whenNarrow {
+        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideDown;
+    }
+      }
+
+  .Overlay-backdrop--full-whenNarrow {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 999;
+    display: flex;
+    background-color: var(--color-neutral-muted);
+  }
+    .Overlay-backdrop--full-whenNarrow .Overlay {
+    border-radius: unset !important;
+  }
+    .Overlay-backdrop--full-whenNarrow .Overlay {
+    width: 100%;
+    max-width: 100vw;
+    height: 100%;
+    max-height: 100vh;
+    flex-grow: 1;
+  }
+}
+
+@keyframes Overlay--motion-slideDown {
+  from {
+    transform: translateY(-100%);
+  }
+}
+
+@keyframes Overlay--motion-slideUp {
+  from {
+    transform: translateY(100%);
+  }
+}
+
+@keyframes Overlay--motion-slideInRight {
+  from {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes Overlay--motion-slideInLeft {
+  from {
+    transform: translateX(100%);
+  }
+}

data/app/components/yattho/alpha/dialog.css.json

@@ -0,0 +1 @@
+{"name":"alpha/dialog","selectors":[".Overlay--hidden",".Overlay--visibilityHidden",".Overlay",".Overlay.Overlay--size-auto",".Overlay.Overlay--size-full",".Overlay.Overlay--size-xsmall",".Overlay.Overlay--size-small",".Overlay.Overlay--size-small-portrait",".Overlay.Overlay--size-medium",".Overlay.Overlay--size-medium-portrait",".Overlay.Overlay--size-large",".Overlay.Overlay--size-xlarge",".Overlay.Overlay--height-auto",".Overlay.Overlay--height-xsmall",".Overlay.Overlay--height-small",".Overlay.Overlay--height-medium",".Overlay.Overlay--height-large",".Overlay.Overlay--height-xlarge",".Overlay.Overlay--width-auto",".Overlay.Overlay--width-small",".Overlay.Overlay--width-medium",".Overlay.Overlay--width-large",".Overlay.Overlay--width-xlarge",".Overlay.Overlay--width-xxlarge",".Overlay.Overlay--motion-scaleFade","0%","100%",".Overlay-form",".Overlay-header",".Overlay-header.Overlay-header--divided",".Overlay-header.Overlay-header--divided + .Overlay-body",".Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap",".Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-title",".Overlay-header.Overlay-header--large .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description",".Overlay-header .Overlay-headerContentWrap",".Overlay-header .Overlay-headerContentWrap .Overlay-actionWrap",".Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap",".Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-title",".Overlay-header .Overlay-headerContentWrap .Overlay-titleWrap .Overlay-description",".Overlay-body",".Overlay-body.Overlay-body--paddingCondensed",".Overlay-body.Overlay-body--paddingNone",".Overlay-footer",".Overlay-footer.Overlay-footer--divided",".Overlay-footer.Overlay-footer--alignStart",".Overlay-footer.Overlay-footer--alignCenter",".Overlay-footer.Overlay-footer--alignEnd",".Overlay-closeButton",".Overlay-closeButton:hover","\n  .Overlay-closeButton:focus",".Overlay-closeButton.close-button",".Overlay-backdrop--center",".Overlay-backdrop--anchor",".Overlay-backdrop--anchor .Overlay",".Overlay-backdrop--side",".Overlay-backdrop--side.Overlay-backdrop--placement-left",".Overlay-backdrop--side.Overlay-backdrop--placement-left > .Overlay",".Overlay-backdrop--side.Overlay-backdrop--placement-right",".Overlay-backdrop--side.Overlay-backdrop--placement-right > .Overlay",".Overlay-backdrop--side.Overlay-backdrop--placement-bottom",".Overlay-backdrop--side.Overlay-backdrop--placement-bottom > .Overlay",".Overlay-backdrop--side.Overlay-backdrop--placement-top",".Overlay-backdrop--side.Overlay-backdrop--placement-top > .Overlay",".Overlay-backdrop--full",".Overlay-backdrop--full .Overlay",".Overlay-backdrop--center-whenNarrow",".Overlay-backdrop--anchor-whenNarrow",".Overlay-backdrop--anchor-whenNarrow .Overlay",".Overlay-backdrop--side-whenNarrow",".Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow",".Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-left-whenNarrow > .Overlay-whenNarrow",".Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-right-whenNarrow",".Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-right-whenNarrow > .Overlay-whenNarrow",".Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-bottom-whenNarrow",".Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-bottom-whenNarrow > .Overlay-whenNarrow",".Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-top-whenNarrow",".Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-top-whenNarrow > .Overlay-whenNarrow",".Overlay-backdrop--full-whenNarrow",".Overlay-backdrop--full-whenNarrow .Overlay","from"]}

data/app/components/yattho/alpha/dialog.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["dialog.pcss"],"names":[],"mappings":"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","file":"dialog.css","sourcesContent":["/* Overlay */\n\n.Overlay--hidden {\n  display: none !important;\n}\n\n.Overlay--visibilityHidden {\n  height: 0;\n  overflow: hidden;\n  visibility: hidden;\n  opacity: 0;\n}\n\n.Overlay {\n  display: flex;\n  width: min(var(--overlay-width), 100vw - 2rem);\n  min-width: 192px;\n  max-height: min(calc(100vh - 2rem), var(--overlay-height));\n  white-space: normal;\n  flex-direction: column;\n  background-color: var(--color-canvas-overlay);\n  border-radius: var(--yattho-borderRadius-large, 12px);\n  box-shadow: var(--color-overlay-shadow);\n  opacity: 1;\n\n  &.Overlay--size-auto {\n    min-width: 192px;\n    max-width: calc(100vw - 2rem);\n    max-height: calc(100vh - 2rem);\n  }\n\n  &.Overlay--size-full {\n    width: 100vw;\n    height: 100vh;\n  }\n\n  &.Overlay--size-xsmall {\n    --overlay-width: 192px;\n\n    max-height: calc(100vh - 2rem);\n  }\n\n  &.Overlay--size-small {\n    --overlay-height: 256px;\n    --overlay-width: 320px;\n  }\n\n  &.Overlay--size-small-portrait {\n    --overlay-height: 432px;\n    --overlay-width: 320px;\n  }\n\n  &.Overlay--size-medium {\n    --overlay-height: 320px;\n    --overlay-width: 480px;\n  }\n\n  &.Overlay--size-medium-portrait {\n    --overlay-height: 600px;\n    --overlay-width: 480px;\n  }\n\n  &.Overlay--size-large {\n    --overlay-height: 432px;\n    --overlay-width: 640px;\n  }\n\n  &.Overlay--size-xlarge {\n    --overlay-height: 600px;\n    --overlay-width: 960px;\n  }\n\n  &.Overlay--height-auto {\n    height: auto;\n  }\n\n  /* start deprecate in favor of Alpha::Dialog */\n  &.Overlay--height-xsmall {\n    height: min(192px, 100vh - 2rem);\n  }\n\n  &.Overlay--height-small {\n    height: min(256px, 100vh - 2rem);\n  }\n\n  &.Overlay--height-medium {\n    height: min(320px, 100vh - 2rem);\n  }\n\n  &.Overlay--height-large {\n    height: min(432px, 100vh - 2rem);\n  }\n\n  &.Overlay--height-xlarge {\n    height: min(600px, 100vh - 2rem);\n  }\n\n  &.Overlay--width-auto {\n    width: auto;\n  }\n\n  &.Overlay--width-small {\n    width: min(256px, 100vw - 2rem);\n  }\n\n  &.Overlay--width-medium {\n    width: min(320px, 100vw - 2rem);\n  }\n\n  &.Overlay--width-large {\n    width: min(480px, 100vw - 2rem);\n  }\n\n  &.Overlay--width-xlarge {\n    width: min(640px, 100vw - 2rem);\n  }\n\n  &.Overlay--width-xxlarge {\n    width: min(960px, 100vw - 2rem);\n  }\n\n  /* end deprecate */\n\n  &.Overlay--motion-scaleFade {\n    @media screen and (prefers-reduced-motion: no-preference) {\n      animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-scaleFade;\n    }\n  }\n}\n\n@keyframes Overlay--motion-scaleFade {\n  0% {\n    opacity: 0;\n    transform: scale(0.5);\n  }\n\n  100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n/* for <form> element that wraps entire contents of overlay */\n.Overlay-form {\n  display: flex;\n  overflow: auto;\n  flex-direction: column;\n  flex-grow: 1;\n}\n\n.Overlay-header {\n  z-index: 1;\n  display: flex;\n  flex-direction: column;\n\n  &.Overlay-header--divided {\n    padding-bottom: var(--yattho-stack-padding-condensed, 8px);\n    box-shadow: inset 0 calc(var(--yattho-borderWidth-thin, 1px) * -1) var(--color-border-default);\n\n    & + .Overlay-body {\n      padding-top: var(--yattho-stack-padding-normal, 16px);\n    }\n  }\n\n  &.Overlay-header--large {\n    & .Overlay-headerContentWrap {\n      & .Overlay-titleWrap {\n        gap: var(--yattho-stack-gap-condensed, 8px);\n\n        & .Overlay-title {\n          font-size: var(--yattho-text-title-size-medium, 20px);\n        }\n\n        & .Overlay-description {\n          font-size: var(--yattho-text-body-size-medium, 14px);\n        }\n      }\n    }\n  }\n\n  & .Overlay-headerContentWrap {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--yattho-stack-gap-condensed, 8px);\n    padding: var(--yattho-stack-gap-condensed, 8px) var(--yattho-stack-gap-condensed, 8px) 0 var(--yattho-stack-gap-condensed, 8px);\n\n    & .Overlay-actionWrap {\n      display: flex;\n      flex-direction: row;\n      gap: var(--yattho-stack-gap-condensed, 8px);\n    }\n\n    & .Overlay-titleWrap {\n      display: flex;\n      padding: calc(var(--yattho-stack-gap-condensed, 8px) * 0.75) 0 calc(var(--yattho-stack-gap-condensed, 8px) * 0.75) var(--yattho-stack-gap-condensed, 8px);\n      flex-direction: column;\n      flex-grow: 1;\n      gap: var(--yattho-control-small-gap, 4px);\n\n      & .Overlay-title {\n        margin: 0;\n        font-size: var(--yattho-text-body-size-medium, 14px);\n        font-weight: var(--base-text-weight-semibold, 600);\n      }\n\n      & .Overlay-description {\n        margin: 0;\n        font-size: var(--yattho-text-body-size-small, 12px);\n        font-weight: var(--base-text-weight-normal, 400);\n        color: var(--color-fg-muted);\n      }\n    }\n  }\n}\n\n/* generic body content slot */\n.Overlay-body {\n  padding: var(--yattho-stack-padding-normal, 16px);\n  padding-top: 0;\n  overflow-y: auto;\n  scrollbar-width: thin;\n  font-size: var(--yattho-text-body-size-medium, 14px);\n  flex-grow: 1;\n\n  &.Overlay-body--paddingCondensed {\n    padding: var(--yattho-stack-padding-condensed, 8px);\n    padding-top: 0;\n  }\n\n  &.Overlay-body--paddingNone {\n    padding: 0;\n  }\n}\n\n/* generic footer slot */\n.Overlay-footer {\n  z-index: 1;\n  display: flex;\n  padding: 0 var(--yattho-stack-padding-normal, 16px) var(--yattho-stack-padding-normal, 16px) var(--yattho-stack-padding-normal, 16px);\n  flex-direction: row;\n  flex-shrink: 0;\n  flex-wrap: wrap;\n\n  &.Overlay-footer--divided {\n    padding-top: var(--yattho-stack-padding-normal, 16px);\n    box-shadow: inset 0 var(--yattho-borderWidth-thin, 1px) var(--color-border-default);\n  }\n\n  &.Overlay-footer--alignStart {\n    justify-content: flex-start;\n    gap: var(--yattho-stack-gap-condensed, 8px);\n  }\n\n  &.Overlay-footer--alignCenter {\n    justify-content: center;\n    gap: var(--yattho-stack-gap-condensed, 8px);\n  }\n\n  &.Overlay-footer--alignEnd {\n    justify-content: flex-end;\n    gap: var(--yattho-stack-gap-condensed, 8px);\n  }\n}\n\n/* TODO: replace with refactored IconButton */\n.Overlay-closeButton {\n  position: relative;\n  display: grid;\n  width: var(--base-size-32, 32px);\n  height: var(--base-size-32, 32px);\n  padding: 0;\n  color: var(--color-fg-muted);\n  cursor: pointer;\n  user-select: none;\n  background-color: transparent;\n  border: var(--yattho-borderWidth-thin, 1px) solid transparent;\n  border-radius: var(--yattho-borderRadius-medium, 6px);\n  transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n  transition-property: color, background-color, border-color;\n  place-content: center;\n  align-self: flex-start;\n  flex-shrink: 0;\n\n  &:hover,\n  &:focus {\n    background-color: var(--color-btn-hover-bg);\n    border: var(--yattho-borderWidth-thin, 1px) solid var(--color-btn-hover-bg);\n  }\n\n  /* Override .close-button's `border: 0` that triggers a border-color transition on hover  */\n  &.close-button {\n    border: var(--yattho-borderWidth-thin, 1px) solid transparent;\n  }\n}\n\n@define-mixin Overlay-backdrop {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 999;\n  display: flex;\n  background-color: var(--color-neutral-muted);\n}\n\n@define-mixin Overlay-backdrop--transparent {\n  position: absolute;\n  z-index: 999;\n  background-color: transparent;\n}\n\n/* variants must be mixins so we can extend within a media query (@extend is not supported inside media queries) */\n\n/* border-radius repeats within placement options to ensure the original radius is reset when two classes co-exist */\n\n/* center */\n@define-mixin Overlay-backdrop--center {\n  @mixin Overlay-backdrop;\n\n  align-items: center;\n  justify-content: center;\n}\n\n/* anchor */\n@define-mixin Overlay-backdrop--anchor {\n  @mixin Overlay-backdrop--transparent;\n\n  & .Overlay {\n    width: auto;\n  }\n}\n\n/* anchor side(s) */\n@define-mixin Overlay-backdrop--side $responsiveVariant {\n  @mixin Overlay-backdrop;\n\n  /* default left */\n  align-items: center;\n  justify-content: left;\n\n  &.Overlay-backdrop--placement-left$(responsiveVariant) {\n    align-items: center;\n    justify-content: left;\n\n    & > .Overlay$(responsiveVariant) {\n      height: 100vh;\n      max-height: unset;\n      border-radius: var(--yattho-borderRadius-large, 12px);\n      border-top-left-radius: 0;\n      border-bottom-left-radius: 0;\n\n      @media screen and (prefers-reduced-motion: no-preference) {\n        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideInRight;\n      }\n    }\n  }\n\n  &.Overlay-backdrop--placement-right$(responsiveVariant) {\n    align-items: center;\n    justify-content: right;\n\n    & > .Overlay$(responsiveVariant) {\n      height: 100vh;\n      max-height: unset;\n      border-radius: var(--yattho-borderRadius-large, 12px);\n      border-top-right-radius: 0;\n      border-bottom-right-radius: 0;\n\n      @media screen and (prefers-reduced-motion: no-preference) {\n        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideInLeft;\n      }\n    }\n  }\n\n  &.Overlay-backdrop--placement-bottom$(responsiveVariant) {\n    align-items: end;\n    justify-content: center;\n\n    & > .Overlay$(responsiveVariant) {\n      width: 100vw;\n      height: auto;\n      max-height: calc(100vh - 2rem);\n      border-radius: var(--yattho-borderRadius-large, 12px);\n      border-bottom-right-radius: 0;\n      border-bottom-left-radius: 0;\n\n      @media screen and (prefers-reduced-motion: no-preference) {\n        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideUp;\n      }\n    }\n  }\n\n  &.Overlay-backdrop--placement-top$(responsiveVariant) {\n    align-items: start;\n    justify-content: center;\n\n    & > .Overlay$(responsiveVariant) {\n      border-radius: var(--yattho-borderRadius-large, 12px);\n      border-top-left-radius: 0;\n      border-top-right-radius: 0;\n\n      @media screen and (prefers-reduced-motion: no-preference) {\n        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideDown;\n      }\n    }\n  }\n}\n\n/* full width */\n@define-mixin Overlay-backdrop--full {\n  @mixin Overlay-backdrop;\n\n  & .Overlay {\n    width: 100%;\n    max-width: 100vw;\n    height: 100%;\n    max-height: 100vh;\n    border-radius: unset !important;\n    flex-grow: 1;\n  }\n}\n\n/* Overlay variant classnames */\n.Overlay-backdrop--center {\n  @mixin Overlay-backdrop--center;\n}\n\n.Overlay-backdrop--anchor {\n  @mixin Overlay-backdrop--anchor;\n}\n\n.Overlay-backdrop--side {\n  @mixin Overlay-backdrop--side;\n}\n\n.Overlay-backdrop--full {\n  @mixin Overlay-backdrop--full;\n}\n\n/* responsive variants */\n\n/* --yattho-viewportRange-narrowLandscape */\n@media (max-width: 767px) {\n  .Overlay-backdrop--center-whenNarrow {\n    @mixin Overlay-backdrop--center;\n  }\n\n  .Overlay-backdrop--anchor-whenNarrow {\n    @mixin Overlay-backdrop--anchor;\n  }\n\n  .Overlay-backdrop--side-whenNarrow {\n    @mixin Overlay-backdrop--side -whenNarrow;\n  }\n\n  .Overlay-backdrop--full-whenNarrow {\n    @mixin Overlay-backdrop--full;\n  }\n}\n\n@keyframes Overlay--motion-slideDown {\n  from {\n    transform: translateY(-100%);\n  }\n}\n\n@keyframes Overlay--motion-slideUp {\n  from {\n    transform: translateY(100%);\n  }\n}\n\n@keyframes Overlay--motion-slideInRight {\n  from {\n    transform: translateX(-100%);\n  }\n}\n\n@keyframes Overlay--motion-slideInLeft {\n  from {\n    transform: translateX(100%);\n  }\n}"]}

data/app/components/yattho/alpha/dialog.html.erb

@@ -0,0 +1,12 @@
+<%= show_button %>
+<div class="Overlay--hidden <%= @backdrop_classes %>" data-modal-dialog-overlay>
+  <%= render Yattho::BaseComponent.new(**@system_arguments) do %>
+    <%= header %>
+    <% if content.present? %>
+      <%= content %>
+    <% else %>
+      <%= body %>
+      <%= footer %>
+    <% end %>
+  <% end %>
+</div>