🚧 [WIP] Dialog 4 layer specs

packages/react/package.json

@@ -26,6 +26,14 @@
       "types": "./dist/utils/test-helpers.d.ts",
       "default": "./dist/test-helpers.js"
     },
+    "./foundations/experimental": {
+      "types": "./dist/foundations/experimental/index.d.ts",
+      "default": "./dist/foundations/experimental/index.js"
+    },
+    "./hooks/experimental": {
+      "types": "./dist/hooks/experimental/index.d.ts",
+      "default": "./dist/hooks/experimental/index.js"
+    },
     "./generated/components.json": "./generated/components.json",
     "./generated/hooks.json": "./generated/hooks.json"
   },

packages/react/src/experimental/Dialog/Dialog.module.css

@@ -0,0 +1,231 @@
+/* Layer 2: Parts — Primer-styled Dialog */
+
+@keyframes dialog-backdrop-appear {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes dialog-content-scaleFade {
+  0% {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes dialog-content-slideUp {
+  from {
+    transform: translateY(100%);
+  }
+}
+
+@keyframes dialog-content-slideInRight {
+  from {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes dialog-content-slideInLeft {
+  from {
+    transform: translateX(100%);
+  }
+}
+
+/* --- Root (native <dialog>) --- */
+
+.Root {
+  border: none;
+  padding: 0;
+  background: transparent;
+  max-width: unset;
+  max-height: unset;
+  overflow: visible;
+  color: inherit;
+
+  /* Sheet positions: override native <dialog> centering (margin: auto) */
+  &:has(> [data-component='Dialog.Content'][data-position-regular='right']) {
+    margin-right: 0;
+  }
+
+  &:has(> [data-component='Dialog.Content'][data-position-regular='left']) {
+    margin-left: 0;
+  }
+
+  &::backdrop {
+    background-color: var(--overlay-backdrop-bgColor);
+    animation: dialog-backdrop-appear 200ms cubic-bezier(0.33, 1, 0.68, 1);
+  }
+}
+
+/* --- Content --- */
+
+.Content {
+  display: flex;
+  /* stylelint-disable-next-line primer/responsive-widths */
+  width: 640px;
+  min-width: 296px;
+  max-width: calc(100dvw - 64px);
+  height: auto;
+  max-height: calc(100dvh - 64px);
+  flex-direction: column;
+  background-color: var(--overlay-bgColor);
+  border-radius: var(--borderRadius-large);
+  box-shadow: var(--shadow-floating-small);
+  opacity: 1;
+
+  &:where([data-width='small']) {
+    width: 296px;
+  }
+
+  &:where([data-width='medium']) {
+    width: 320px;
+  }
+
+  &:where([data-width='large']) {
+    /* stylelint-disable-next-line primer/responsive-widths */
+    width: 480px;
+  }
+
+  &:where([data-height='small']) {
+    height: 480px;
+  }
+
+  &:where([data-height='large']) {
+    height: 640px;
+  }
+
+  @media screen and (prefers-reduced-motion: no-preference) {
+    animation: dialog-content-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;
+  }
+
+  &[data-position-regular='left'] {
+    height: 100dvh;
+    max-height: unset;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+
+    @media screen and (prefers-reduced-motion: no-preference) {
+      animation: dialog-content-slideInRight 0.25s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;
+    }
+  }
+
+  &[data-position-regular='right'] {
+    height: 100dvh;
+    max-height: unset;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+
+    @media screen and (prefers-reduced-motion: no-preference) {
+      animation: dialog-content-slideInLeft 0.25s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running;
+    }
+  }
+
+  &[data-position-regular='center'] {
+    &[data-align='top'] {
+      margin-top: var(--base-size-64);
+    }
+
+    &[data-align='bottom'] {
+      margin-bottom: var(--base-size-64);
+    }
+  }
+
+  @media (max-width: 767px) {
+    &[data-position-narrow='bottom'] {
+      width: 100dvw;
+      max-width: 100dvw;
+      height: auto;
+      max-height: calc(100dvh - 64px);
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+
+      @media screen and (prefers-reduced-motion: no-preference) {
+        animation: dialog-content-slideUp 0.25s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;
+      }
+    }
+
+    &[data-position-narrow='fullscreen'] {
+      width: 100%;
+      max-width: 100dvw;
+      height: 100%;
+      max-height: 100dvh;
+      border-radius: unset !important;
+      flex-grow: 1;
+
+      @media screen and (prefers-reduced-motion: no-preference) {
+        animation: dialog-content-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;
+      }
+    }
+  }
+}
+
+/* --- Header --- */
+
+.Header {
+  z-index: 1;
+  display: flex;
+  max-height: 35vh;
+  padding: var(--base-size-8);
+  overflow-y: auto;
+  /* stylelint-disable-next-line primer/box-shadow */
+  box-shadow: 0 1px 0 var(--borderColor-default);
+  flex-shrink: 0;
+}
+
+/* --- Title --- */
+
+.Title {
+  margin: 0;
+  padding-inline: var(--base-size-8);
+  padding-block: var(--base-size-6);
+  font-size: var(--text-body-size-medium);
+  font-weight: var(--text-title-weight-large);
+  flex-grow: 1;
+}
+
+/* --- Subtitle --- */
+
+.Subtitle {
+  margin: 0;
+  margin-top: var(--base-size-4);
+  padding-inline: var(--base-size-8);
+  font-size: var(--text-body-size-small);
+  font-weight: var(--base-text-weight-normal);
+  color: var(--fgColor-muted);
+}
+
+/* --- Body --- */
+
+.Body {
+  padding: var(--base-size-16);
+  overflow: auto;
+  flex-grow: 1;
+}
+
+/* --- Footer --- */
+
+.Footer {
+  z-index: 1;
+  display: flex;
+  flex-flow: wrap;
+  justify-content: flex-end;
+  padding: var(--base-size-16);
+  gap: var(--base-size-8);
+  flex-shrink: 0;
+
+  @media (max-height: 325px) {
+    flex-wrap: nowrap;
+    overflow-x: scroll;
+    flex-direction: row;
+    justify-content: unset;
+  }
+}