@maggioli-design-system/magma 2.0.0-beta.2 → 2.0.0-beta.3

package/dist/collection/components/mds-modal/mds-modal.css

@@ -134,35 +134,85 @@ mds-button {
   --mds-modal-z-index: var(--magma-modal-z-index);
 
   /* private */
+  --private-modal-transition-duration: var(--mds-modal-transition-duration, 500ms);
   --private-modal-width: calc(100vw - var(--private-modal-window-close-margin));
   --private-modal-custom-opened-transform: translate(0, 0);
+  --private-modal-opened-transform: none;
   --private-modal-transition-window-transform: translate(0);
   --private-modal-window-close-margin: --spacing(2000);
 
-  @apply ease-in-out-quint;
+  /* The host is a layout-neutral wrapper; the native <dialog> is the overlay. */
+  display: contents;
+}
 
+/*
+ * The native dialog is the overlay: full-viewport flex container that centers
+ * the window. The dim is rendered on its ::backdrop (below). Promoted to the
+ * top layer by showModal(). `overlay` and `display` are transitioned with
+ * `allow-discrete` so the dialog stays painted in the top layer while the outro
+ * animation plays.
+ */
+
+.dialog {
   align-items: center;
-  background-color: rgb(var(--mds-modal-overlay-color, var(--magma-overlay-color, 0 0 0)) / 0);
-  display: flex;
+  background-color: transparent;
+  border: 0;
+  box-sizing: border-box;
+  display: none;
   fill: rgb(var(--tone-neutral, 0 0 0));
+  height: auto;
   inset: 0;
   justify-content: center;
+  margin: 0;
+  max-height: none;
+  max-width: none;
+
+  /* Clip the window while it sits off-screen at translate(100%): without this
+   * the dialog (a scroll container) shows a transient scrollbar during the
+   * slide, shifting the layout - the "jump" seen with tall content. */
+  overflow: hidden;
+  padding: 0;
   perspective: 600px;
-  pointer-events: none;
   position: fixed;
-  transition-duration: var(--mds-modal-transition-duration, 500ms);
-  transition-property: background-color;
+  transition-behavior: allow-discrete;
+  transition-duration: var(--private-modal-transition-duration);
+  transition-property: overlay, display;
   transition-timing-function: var(--mds-modal-transition-timing-funciton);
+  width: auto;
   z-index: var(--mds-modal-z-index, 1000);
 }
 
+.dialog[open] {
+  display: flex;
+}
+
+/*
+ * The dim lives on the native ::backdrop (it exists only for modal dialogs, so
+ * only when [backdrop] is set / showModal). This is its closed/outro state and
+ * the value the entry transition starts from; the open value is in opened.css.
+ */
+
+.dialog::backdrop {
+  background-color: rgb(var(--mds-modal-overlay-color, var(--magma-overlay-color, 0 0 0)) / 0);
+  transition-behavior: allow-discrete;
+  transition-duration: var(--private-modal-transition-duration);
+  transition-property: background-color, overlay, display;
+  transition-timing-function: var(--mds-modal-transition-timing-funciton);
+}
+
+/* hide-backdrop: keep the page behind interactive (legacy click-through). */
+
+:host([hide-backdrop]) .dialog {
+  pointer-events: none;
+}
+
 .action-close {
   --mds-button-color: rgb(var(--tone-neutral-10, 60 60 60));
 
   opacity: 0;
   pointer-events: none;
   position: absolute;
-  transition-duration: var(--mds-modal-transition-duration, 500ms);
+  transition-duration: var(--private-modal-transition-duration);
   transition-property: background-color, bottom, color, fill, opacity, top, transform;
   transition-timing-function: var(--mds-modal-transition-timing-function);
 }
@@ -178,7 +228,7 @@ mds-button {
   - - -
 */
 
-:host([position='top-left'][animation='3d']:not([opened])) {
+:host([position='top-left'][animation='3d']) {
   --private-modal-transition-window-transform: rotateX(22deg) rotateY(22deg) scale(0.5)
     translate(-80%, 80%);
 }
@@ -189,7 +239,7 @@ mds-button {
   - - -
 */
 
-:host([position='top'][animation='3d']:not([opened])) {
+:host([position='top'][animation='3d']) {
   --private-modal-transition-window-transform: rotateX(-22deg) rotateY(0) scale(0.5)
     translate(0, -80%);
 }
@@ -200,7 +250,7 @@ mds-button {
   - - -
 */
 
-:host([position='top-right'][animation='3d']:not([opened])) {
+:host([position='top-right'][animation='3d']) {
   --private-modal-transition-window-transform: rotateX(-22deg) rotateY(-22deg) scale(0.5)
     translate(80%, 80%);
 }
@@ -211,7 +261,7 @@ mds-button {
   - - -
 */
 
-:host([position='left'][animation='3d']:not([opened])) {
+:host([position='left'][animation='3d']) {
   --private-modal-transition-window-transform: rotateX(0) rotateY(22deg) rotateZ(0) scale(0.5)
     translate(-100%, 0%);
 }
@@ -222,7 +272,7 @@ mds-button {
   - - -
 */
 
-:host([position='center'][animation='3d']:not([opened])) {
+:host([position='center'][animation='3d']) {
   --private-modal-transition-window-transform: rotateX(0) rotateY(22deg) scale(0.5)
     translate(0, 40%);
 }
@@ -233,7 +283,7 @@ mds-button {
   - - -
 */
 
-:host([position='right'][animation='3d']:not([opened])) {
+:host([position='right'][animation='3d']) {
   --private-modal-transition-window-transform: rotateX(0) rotateY(-22deg) rotateZ(0) scale(0.5)
     translate(100%, 0%);
 }
@@ -244,7 +294,7 @@ mds-button {
   x - -
 */
 
-:host([position='bottom-left'][animation='3d']:not([opened])) {
+:host([position='bottom-left'][animation='3d']) {
   --private-modal-transition-window-transform: rotateX(22deg) rotateY(22deg) scale(0.5)
     translate(-80%, 80%);
 }
@@ -255,7 +305,7 @@ mds-button {
   - x -
 */
 
-:host([position='bottom'][animation='3d']:not([opened])) {
+:host([position='bottom'][animation='3d']) {
   --private-modal-transition-window-transform: rotateX(22deg) rotateY(0) scale(0.5)
     translate(0, 80%);
 }
@@ -266,26 +316,23 @@ mds-button {
   - - x
 */
 
-:host([position='bottom-right'][animation='3d']:not([opened])) {
+:host([position='bottom-right'][animation='3d']) {
   --private-modal-transition-window-transform: rotateX(-22deg) rotateY(-22deg) scale(0.5)
     translate(80%, 80%);
 }
 
-:host([animation='custom']:not([opened])) {
+:host([animation='custom']) {
+  --private-modal-opened-transform: var(--private-modal-custom-opened-transform);
   --private-modal-transition-window-transform: var(--mds-modal-custom-closed-transform, rotateX(10deg) rotateY(0) scale(1.25) translate(0, 10%));
 }
 
-:host([animation='custom'][opened]) {
-  --private-modal-transition-window-transform: var(--private-modal-custom-opened-transform);
-}
-
 /*
   x - -
   - - -
   - - -
 */
 
-:host([position='top-left'][animation='slide']:not([opened])) {
+:host([position='top-left'][animation='slide']) {
   --private-modal-transition-window-transform: translate(-50%, -100%);
 }
 
@@ -295,7 +342,7 @@ mds-button {
   - - -
 */
 
-:host([position='top'][animation='slide']:not([opened])) {
+:host([position='top'][animation='slide']) {
   --private-modal-transition-window-transform: translate(0, -100%);
 }
 
@@ -305,7 +352,7 @@ mds-button {
   - - -
 */
 
-:host([position='top-right'][animation='slide']:not([opened])) {
+:host([position='top-right'][animation='slide']) {
   --private-modal-transition-window-transform: translate(50%, -100%);
 }
 
@@ -315,7 +362,7 @@ mds-button {
   - - -
 */
 
-:host([position='left'][animation='slide']:not([opened])) {
+:host([position='left'][animation='slide']) {
   --private-modal-transition-window-transform: translate(-100%, 0%);
 }
 
@@ -325,7 +372,7 @@ mds-button {
   - - -
 */
 
-:host([position='center'][animation='slide']:not([opened])) {
+:host([position='center'][animation='slide']) {
   --private-modal-transition-window-transform: translate(0, 25%);
 }
 
@@ -335,7 +382,7 @@ mds-button {
   - - -
 */
 
-:host([position='right'][animation='slide']:not([opened])) {
+:host([position='right'][animation='slide']) {
   --private-modal-transition-window-transform: translate(100%, 0%);
 }
 
@@ -345,7 +392,7 @@ mds-button {
   x - -
 */
 
-:host([position='bottom-left'][animation='slide']:not([opened])) {
+:host([position='bottom-left'][animation='slide']) {
   --private-modal-transition-window-transform: translate(-50%, 100%);
 }
 
@@ -355,7 +402,7 @@ mds-button {
   - x -
 */
 
-:host([position='bottom'][animation='slide']:not([opened])) {
+:host([position='bottom'][animation='slide']) {
   --private-modal-transition-window-transform: translateY(50%);
 }
 
@@ -365,15 +412,23 @@ mds-button {
   - - x
 */
 
-:host([position='bottom-right'][animation='slide']:not([opened])) {
+:host([position='bottom-right'][animation='slide']) {
   --private-modal-transition-window-transform: translate(50%, 100%);
 }
 
-:host([opened][backdrop]) {
-  --private-modal-transition-window-transform: none;
+/* Open state of the native backdrop dim. ::backdrop only renders for modal
+ * dialogs (showModal), i.e. when [backdrop] is set, so no extra guard needed. */
 
+.dialog[open]::backdrop {
   background-color: rgb(var(--mds-modal-overlay-color, var(--magma-overlay-color, 0 0 0)) / var(--mds-modal-overlay-opacity, var(--magma-overlay-opacity, 0.5)));
-  pointer-events: auto;
+}
+
+/* Fade the dim in when the dialog enters the top layer. */
+
+@starting-style {
+  .dialog[open]::backdrop {
+    background-color: rgb(var(--mds-modal-overlay-color, var(--magma-overlay-color, 0 0 0)) / 0);
+  }
 }
 
 :host ::slotted([slot='window']) {
@@ -381,13 +436,12 @@ mds-button {
 }
 
 .window {
-  @apply gap-0;
-
   background-color: var(--mds-modal-window-background, rgb(var(--tone-neutral, 0 0 0)));
   border-radius: var(--mds-modal-window-radius, 0);
   box-shadow: var(--mds-modal-window-shadow);
   box-sizing: border-box;
   display: grid;
+  gap: 0;
   grid-template-columns: repeat(1, minmax(0, 100%));
   margin: var(--mds-modal-window-distance, 0);
   overflow: var(--mds-modal-window-overflow, auto);
@@ -398,9 +452,14 @@ mds-button {
   display: none;
 }
 
+/* `overflow` here is the closed/initial state. While the window's transform is
+ * animating, the component freezes this to `hidden` inline and restores it on
+ * the transform's `transitionend` (a live overflow:auto with overflowing
+ * content janks the transform). See setContentOverflow in the component. */
+
 .window-content-wrapper {
   max-height: calc(100dvh - calc(var(--mds-modal-window-distance, 0) * 2));
-  overflow: auto;
+  overflow: hidden;
 }
 
 .window-header,
@@ -429,20 +488,46 @@ mds-button {
   grid-template-rows: auto 1fr auto;
 } */
 
-:host .window,
-:host > ::slotted([slot='window']) {
+/*
+ * Closed / outro state (also the value the entry transition starts from).
+ * Keyed on the native `.dialog[open]` (synchronous) rather than the reflected
+ * `:host([opened])` (one tick late), so `@starting-style` matches the frame the
+ * window first renders and the slide actually plays instead of popping.
+ */
+
+.dialog .window,
+.dialog ::slotted([slot='window']) {
   opacity: 0;
   transform: var(--private-modal-transition-window-transform);
-  transition-duration: var(--mds-modal-transition-duration, 500ms);
+  transition-duration: var(--private-modal-transition-duration);
   transition-property: transform, opacity;
   transition-timing-function: var(--mds-modal-transition-timing-funciton);
 }
 
-:host([opened]) .window,
-:host([opened]) > ::slotted([slot='window']) {
+/* Open / resting state. Resting transform comes from a variable (`none` by
+ * default, a caller-defined transform for the custom animation) so the custom
+ * override can stay a `:host()`-only rule and avoid a `:host(...) .descendant`
+ * selector list, which the CSS compiler mangles. */
+
+.dialog[open] .window,
+.dialog[open] ::slotted([slot='window']) {
   opacity: 1;
   pointer-events: auto;
-  transition-timing-function: var(--mds-modal-transition-timing-funciton);
+  transform: var(--private-modal-opened-transform);
+}
+
+/* Entry: start from the closed transform when the dialog enters the top layer. */
+
+@starting-style {
+  .dialog[open] .window,
+  .dialog[open] ::slotted([slot='window']) {
+    opacity: 0;
+    transform: var(--private-modal-transition-window-transform);
+  }
+
+  .window-content-wrapper {
+    overflow: hidden;
+  }
 }
 
 .window {
@@ -453,6 +538,48 @@ mds-button {
   width: 100%;
 }
 
+/*
+ * Flex alignment of the window inside the overlay. The host is `display: contents`,
+ * so the alignment lives on the native dialog (the flex container). The existing
+ * `:host([position=...])` align rules below become inert on a display:contents host.
+ */
+
+:host([position='top-left']) .dialog,
+:host([position='top']) .dialog,
+:host([position='top-right']) .dialog {
+  align-items: flex-start;
+}
+
+:host([position='left']) .dialog,
+:host([position='center']) .dialog,
+:host([position='right']) .dialog {
+  align-items: center;
+}
+
+:host([position='bottom-left']) .dialog,
+:host([position='bottom']) .dialog,
+:host([position='bottom-right']) .dialog {
+  align-items: flex-end;
+}
+
+:host([position='top-left']) .dialog,
+:host([position='left']) .dialog,
+:host([position='bottom-left']) .dialog {
+  justify-content: flex-start;
+}
+
+:host([position='top']) .dialog,
+:host([position='center']) .dialog,
+:host([position='bottom']) .dialog {
+  justify-content: center;
+}
+
+:host([position='top-right']) .dialog,
+:host([position='right']) .dialog,
+:host([position='bottom-right']) .dialog {
+  justify-content: flex-end;
+}
+
 /*
   x - -
   - - -
@@ -732,43 +859,47 @@ mds-button {
   justify-content: flex-end;
 }
 
-:host-context(:root.pref-animation-reduce) {
-  --mds-modal-transition-duration: 0s;
-
-  transition-duration: 0s !important;
+/* Animation preference. The component mirrors the resolved mode from <html>
+ * onto its host as pref-animation (see subscribePreference in @common/preference);
+ * these plain shadow selectors then zero the private duration(s) the base CSS
+ * reads. `reduce` always stops; `system` and no controller follow the OS via
+ * @media; `no-preference` keeps the base value. Customization composes (the base
+ * sets --private from the public token, this only overrides it when reduced). */
 
-  .action-close,
-  .window {
-    transition-duration: 0s !important;
-  }
+:host([pref-animation='reduce']) {
+  --private-modal-transition-duration: 0s;
 }
 
-@media (prefers-reduced-motion) {
-  :host-context(:root.pref-animation-system),
-  :host-context(:root:not([data-magma-pref])) {
-    --mds-modal-transition-duration: 0s;
-
-    transition-duration: 0s !important;
-
-    .action-close,
-    .window {
-      transition-duration: 0s !important;
-    }
+@media (prefers-reduced-motion: reduce) {
+  :host([pref-animation='system']),
+  :host(:not([pref-animation])) {
+    --private-modal-transition-duration: 0s;
   }
 }
 
-:host-context(:root.pref-contrast-more) {
+/* Contrast preference. The component reflects the resolved mode from <html> onto
+ * its host as pref-contrast (see subscribePreference in @common/preference); these
+ * plain shadow selectors refine for high contrast. `more` is the explicit choice;
+ * `system` and no controller follow the OS via @media. Cross-browser, no :host-context. */
+
+:host([pref-contrast='more']) {
   --mds-modal-window-shadow: var(--shadow-outline-strong-50), var(--shadow-2xl, 0 25px 50px -12px rgb(0 0 0 / 0.25));
 }
 
 @media (prefers-contrast: more) {
-  :host-context(:root.pref-contrast-system),
-  :host-context(:root:not([data-magma-pref])) {
+  :host([pref-contrast='system']),
+  :host(:not([pref-contrast])) {
     --mds-modal-window-shadow: var(--shadow-outline-strong-50), var(--shadow-2xl, 0 25px 50px -12px rgb(0 0 0 / 0.25));
   }
 }
 
-:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)) {
+/* Theme preference. The component reflects the resolved theme mode and scheme
+ * from <html> onto its host as pref-theme + pref-theme-scheme (see
+ * subscribePreference in @common/preference); these plain shadow selectors refine
+ * for dark. `dark` is the explicit choice; `system` and no controller follow the
+ * OS via @media; the scheme axis gates it. Cross-browser, no :host-context. */
+
+:host([pref-theme='dark']:not([pref-theme-scheme='light'])) {
   --mds-modal-window-background: rgb(var(--tone-neutral-10, 60 60 60));
   --mds-modal-window-shadow: var(--shadow-outline), var(--shadow-xl, 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1));
 
@@ -778,8 +909,8 @@ mds-button {
 }
 
 @media (prefers-color-scheme: dark) {
-  :host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),
-  :host-context(:root:not([data-magma-pref])) {
+  :host([pref-theme='system']:not([pref-theme-scheme='light'])),
+  :host(:not([pref-theme])) {
     --mds-modal-window-background: rgb(var(--tone-neutral-10, 60 60 60));
     --mds-modal-window-shadow: var(--shadow-outline), var(--shadow-xl, 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1));