@ds-gn/ui 0.6.2 → 0.8.0

package/dist/components/Modal/src/Modal.js

@@ -11,6 +11,8 @@ var __legacyDecorateClassTS = function(decorators, target, key, desc) {
 
 // components/Modal/src/Modal.ts
 import"../../Button/src/Button.js";
+import { cancel } from "@ds-gn/motion";
+import { MotionController } from "@ds-gn/motion/lit";
 import { html as html2, nothing } from "lit";
 import { property, query, state } from "lit/decorators.js";
 
@@ -146,9 +148,6 @@ var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.co
     --font-weight-semibold: 600;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    --duration-moderate: var(--dsgn-src-duration-moderate, 240ms);
-    --duration-quick: var(--dsgn-src-duration-quick, 180ms);
-    --ease-emphasized: var(--dsgn-src-ease-emphasized, cubic-bezier(0.16, 1, 0.3, 1));
     --radius-surface: var(--dsgn-src-radius-surface, 1rem);
     --color-accent: inherit;
     --color-focus: inherit;
@@ -156,29 +155,6 @@ var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.co
     --color-text-primary: inherit;
     --color-text-secondary: inherit;
     --shadow-card: inherit;
-    --animate-fade-in: fade-in var(--duration-moderate) var(--ease-emphasized)
-    both;
-    --animate-fade-out: fade-out var(--duration-quick) var(--ease-emphasized) both;
-    --animate-scale-in: scale-in var(--duration-moderate) var(--ease-emphasized)
-    both;
-    --animate-scale-out: scale-out var(--duration-quick) var(--ease-emphasized)
-    both;
-    --animate-slide-in-left: slide-in-left var(--duration-moderate)
-    var(--ease-emphasized) both;
-    --animate-slide-out-left: slide-out-left var(--duration-quick)
-    var(--ease-emphasized) both;
-    --animate-slide-in-right: slide-in-right var(--duration-moderate)
-    var(--ease-emphasized) both;
-    --animate-slide-out-right: slide-out-right var(--duration-quick)
-    var(--ease-emphasized) both;
-    --animate-slide-in-top: slide-in-top var(--duration-moderate)
-    var(--ease-emphasized) both;
-    --animate-slide-out-top: slide-out-top var(--duration-quick)
-    var(--ease-emphasized) both;
-    --animate-slide-in-bottom: slide-in-bottom var(--duration-moderate)
-    var(--ease-emphasized) both;
-    --animate-slide-out-bottom: slide-out-bottom var(--duration-quick)
-    var(--ease-emphasized) both;
   }
 }
 @layer utilities {
@@ -640,122 +616,6 @@ var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.co
       --dsgn-modal-size: 56rem;
     }
   }
-  .data-\\[state\\=closed\\]\\:backdrop\\:animate-fade-out {
-    &[data-state="closed"] {
-      &::backdrop {
-        animation: var(--animate-fade-out);
-      }
-    }
-  }
-  .data-\\[motion\\=bottom\\]\\:data-\\[state\\=closed\\]\\:animate-slide-out-bottom {
-    &[data-motion="bottom"] {
-      &[data-state="closed"] {
-        animation: var(--animate-slide-out-bottom);
-      }
-    }
-  }
-  .data-\\[motion\\=center\\]\\:data-\\[state\\=closed\\]\\:animate-scale-out {
-    &[data-motion="center"] {
-      &[data-state="closed"] {
-        animation: var(--animate-scale-out);
-      }
-    }
-  }
-  .data-\\[motion\\=left\\]\\:data-\\[state\\=closed\\]\\:animate-slide-out-left {
-    &[data-motion="left"] {
-      &[data-state="closed"] {
-        animation: var(--animate-slide-out-left);
-      }
-    }
-  }
-  .data-\\[motion\\=none\\]\\:data-\\[state\\=closed\\]\\:animate-fade-out {
-    &[data-motion="none"] {
-      &[data-state="closed"] {
-        animation: var(--animate-fade-out);
-      }
-    }
-  }
-  .data-\\[motion\\=right\\]\\:data-\\[state\\=closed\\]\\:animate-slide-out-right {
-    &[data-motion="right"] {
-      &[data-state="closed"] {
-        animation: var(--animate-slide-out-right);
-      }
-    }
-  }
-  .data-\\[motion\\=top\\]\\:data-\\[state\\=closed\\]\\:animate-slide-out-top {
-    &[data-motion="top"] {
-      &[data-state="closed"] {
-        animation: var(--animate-slide-out-top);
-      }
-    }
-  }
-  .data-\\[state\\=open\\]\\:backdrop\\:animate-fade-in {
-    &[data-state="open"] {
-      &::backdrop {
-        animation: var(--animate-fade-in);
-      }
-    }
-  }
-  .data-\\[motion\\=bottom\\]\\:data-\\[state\\=open\\]\\:animate-slide-in-bottom {
-    &[data-motion="bottom"] {
-      &[data-state="open"] {
-        animation: var(--animate-slide-in-bottom);
-      }
-    }
-  }
-  .data-\\[motion\\=center\\]\\:data-\\[state\\=open\\]\\:animate-scale-in {
-    &[data-motion="center"] {
-      &[data-state="open"] {
-        animation: var(--animate-scale-in);
-      }
-    }
-  }
-  .data-\\[motion\\=left\\]\\:data-\\[state\\=open\\]\\:animate-slide-in-left {
-    &[data-motion="left"] {
-      &[data-state="open"] {
-        animation: var(--animate-slide-in-left);
-      }
-    }
-  }
-  .data-\\[motion\\=none\\]\\:data-\\[state\\=open\\]\\:animate-fade-in {
-    &[data-motion="none"] {
-      &[data-state="open"] {
-        animation: var(--animate-fade-in);
-      }
-    }
-  }
-  .data-\\[motion\\=right\\]\\:data-\\[state\\=open\\]\\:animate-slide-in-right {
-    &[data-motion="right"] {
-      &[data-state="open"] {
-        animation: var(--animate-slide-in-right);
-      }
-    }
-  }
-  .data-\\[motion\\=top\\]\\:data-\\[state\\=open\\]\\:animate-slide-in-top {
-    &[data-motion="top"] {
-      &[data-state="open"] {
-        animation: var(--animate-slide-in-top);
-      }
-    }
-  }
-  .motion-reduce\\:data-\\[motion\\]\\:data-\\[state\\=closed\\]\\:animate-fade-out {
-    @media (prefers-reduced-motion: reduce) {
-      &[data-motion] {
-        &[data-state="closed"] {
-          animation: var(--animate-fade-out);
-        }
-      }
-    }
-  }
-  .motion-reduce\\:data-\\[motion\\]\\:data-\\[state\\=open\\]\\:animate-fade-in {
-    @media (prefers-reduced-motion: reduce) {
-      &[data-motion] {
-        &[data-state="open"] {
-          animation: var(--animate-fade-in);
-        }
-      }
-    }
-  }
 }
 @property --dsgn-border-sweep-angle {
   syntax: '<angle>';
@@ -877,106 +737,6 @@ var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.co
   inherits: false;
   initial-value: solid;
 }
-@keyframes fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@keyframes fade-out {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-@keyframes scale-in {
-  from {
-    opacity: 0;
-    transform: scale(0.96);
-  }
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-@keyframes scale-out {
-  from {
-    opacity: 1;
-    transform: none;
-  }
-  to {
-    opacity: 0;
-    transform: scale(0.96);
-  }
-}
-@keyframes slide-in-left {
-  from {
-    transform: translateX(-100%);
-  }
-  to {
-    transform: none;
-  }
-}
-@keyframes slide-out-left {
-  from {
-    transform: none;
-  }
-  to {
-    transform: translateX(-100%);
-  }
-}
-@keyframes slide-in-right {
-  from {
-    transform: translateX(100%);
-  }
-  to {
-    transform: none;
-  }
-}
-@keyframes slide-out-right {
-  from {
-    transform: none;
-  }
-  to {
-    transform: translateX(100%);
-  }
-}
-@keyframes slide-in-top {
-  from {
-    transform: translateY(-100%);
-  }
-  to {
-    transform: none;
-  }
-}
-@keyframes slide-out-top {
-  from {
-    transform: none;
-  }
-  to {
-    transform: translateY(-100%);
-  }
-}
-@keyframes slide-in-bottom {
-  from {
-    transform: translateY(100%);
-  }
-  to {
-    transform: none;
-  }
-}
-@keyframes slide-out-bottom {
-  from {
-    transform: none;
-  }
-  to {
-    transform: translateY(100%);
-  }
-}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
@@ -1031,6 +791,14 @@ var modalMotionValues = {
   TOP: "top",
   BOTTOM: "bottom"
 };
+var modalMotionPresets = {
+  center: "scaleIn",
+  left: "slideInLeft",
+  right: "slideInRight",
+  top: "slideInTop",
+  bottom: "slideInBottom",
+  none: "fade"
+};
 var modalMotionProps = enumCreator(Object.values(modalMotionValues), "motion", String, { reflect: true });
 var modalSizeValues = {
   SM: "sm",
@@ -1077,7 +845,7 @@ var hostStyles = css3`
     display: contents;
   }
 `;
-var dialogClasses = () => clsx_default("box-border", "p-0", "border-0", "overflow-hidden", "flex-col", "open:flex", "text-text-primary", "bg-surface-elevated", "rounded-[var(--radius-surface)]", "shadow-[var(--shadow-card),0_0_18px_color-mix(in_oklab,var(--color-accent)_14.625%,transparent)]", "focus-visible:outline-2", "focus-visible:outline-focus", "focus-visible:outline-offset-2", "[--dsgn-modal-size:32rem]", "[--dsgn-modal-gutter:1rem]", "data-[size=sm]:[--dsgn-modal-size:24rem]", "data-[size=md]:[--dsgn-modal-size:32rem]", "data-[size=lg]:[--dsgn-modal-size:42rem]", "data-[size=xl]:[--dsgn-modal-size:56rem]", "data-[placement=center]:m-auto", "data-[placement=center]:w-[min(var(--dsgn-modal-size),calc(100vw-2*var(--dsgn-modal-gutter)))]", "data-[placement=center]:max-h-[calc(100dvh-2*var(--dsgn-modal-gutter))]", "data-[placement=left]:m-0", "data-[placement=left]:top-0", "data-[placement=left]:bottom-0", "data-[placement=left]:h-dvh", "data-[placement=left]:max-h-dvh", "data-[placement=left]:w-[min(var(--dsgn-modal-size),calc(100vw-var(--dsgn-modal-gutter)))]", "data-[placement=left]:left-0", "data-[placement=left]:right-auto", "data-[placement=left]:rounded-ss-none", "data-[placement=left]:rounded-es-none", "data-[placement=right]:m-0", "data-[placement=right]:top-0", "data-[placement=right]:bottom-0", "data-[placement=right]:h-dvh", "data-[placement=right]:max-h-dvh", "data-[placement=right]:w-[min(var(--dsgn-modal-size),calc(100vw-var(--dsgn-modal-gutter)))]", "data-[placement=right]:left-auto", "data-[placement=right]:right-0", "data-[placement=right]:rounded-se-none", "data-[placement=right]:rounded-ee-none", "data-[placement=top]:m-0", "data-[placement=top]:left-0", "data-[placement=top]:right-0", "data-[placement=top]:w-screen", "data-[placement=top]:max-w-screen", "data-[placement=top]:max-h-[min(var(--dsgn-modal-size),calc(100dvh-var(--dsgn-modal-gutter)))]", "data-[placement=top]:top-0", "data-[placement=top]:bottom-auto", "data-[placement=top]:rounded-ss-none", "data-[placement=top]:rounded-se-none", "data-[placement=bottom]:m-0", "data-[placement=bottom]:left-0", "data-[placement=bottom]:right-0", "data-[placement=bottom]:w-screen", "data-[placement=bottom]:max-w-screen", "data-[placement=bottom]:max-h-[min(var(--dsgn-modal-size),calc(100dvh-var(--dsgn-modal-gutter)))]", "data-[placement=bottom]:top-auto", "data-[placement=bottom]:bottom-0", "data-[placement=bottom]:rounded-es-none", "data-[placement=bottom]:rounded-ee-none", "data-[size=full]:inset-0", "data-[size=full]:m-0", "data-[size=full]:w-screen", "data-[size=full]:max-w-screen", "data-[size=full]:h-dvh", "data-[size=full]:max-h-dvh", "data-[size=full]:rounded-none", "backdrop:bg-[rgb(2_6_23/0.6)]", "backdrop:backdrop-blur-[12px]", "data-[state=open]:backdrop:animate-fade-in", "data-[state=closed]:backdrop:animate-fade-out", "data-[motion=center]:data-[state=open]:animate-scale-in", "data-[motion=center]:data-[state=closed]:animate-scale-out", "data-[motion=left]:data-[state=open]:animate-slide-in-left", "data-[motion=left]:data-[state=closed]:animate-slide-out-left", "data-[motion=right]:data-[state=open]:animate-slide-in-right", "data-[motion=right]:data-[state=closed]:animate-slide-out-right", "data-[motion=top]:data-[state=open]:animate-slide-in-top", "data-[motion=top]:data-[state=closed]:animate-slide-out-top", "data-[motion=bottom]:data-[state=open]:animate-slide-in-bottom", "data-[motion=bottom]:data-[state=closed]:animate-slide-out-bottom", "data-[motion=none]:data-[state=open]:animate-fade-in", "data-[motion=none]:data-[state=closed]:animate-fade-out", "motion-reduce:data-[motion]:data-[state=open]:animate-fade-in", "motion-reduce:data-[motion]:data-[state=closed]:animate-fade-out");
+var dialogClasses = () => clsx_default("box-border", "p-0", "border-0", "overflow-hidden", "flex-col", "open:flex", "text-text-primary", "bg-surface-elevated", "rounded-[var(--radius-surface)]", "shadow-[var(--shadow-card),0_0_18px_color-mix(in_oklab,var(--color-accent)_14.625%,transparent)]", "focus-visible:outline-2", "focus-visible:outline-focus", "focus-visible:outline-offset-2", "[--dsgn-modal-size:32rem]", "[--dsgn-modal-gutter:1rem]", "data-[size=sm]:[--dsgn-modal-size:24rem]", "data-[size=md]:[--dsgn-modal-size:32rem]", "data-[size=lg]:[--dsgn-modal-size:42rem]", "data-[size=xl]:[--dsgn-modal-size:56rem]", "data-[placement=center]:m-auto", "data-[placement=center]:w-[min(var(--dsgn-modal-size),calc(100vw-2*var(--dsgn-modal-gutter)))]", "data-[placement=center]:max-h-[calc(100dvh-2*var(--dsgn-modal-gutter))]", "data-[placement=left]:m-0", "data-[placement=left]:top-0", "data-[placement=left]:bottom-0", "data-[placement=left]:h-dvh", "data-[placement=left]:max-h-dvh", "data-[placement=left]:w-[min(var(--dsgn-modal-size),calc(100vw-var(--dsgn-modal-gutter)))]", "data-[placement=left]:left-0", "data-[placement=left]:right-auto", "data-[placement=left]:rounded-ss-none", "data-[placement=left]:rounded-es-none", "data-[placement=right]:m-0", "data-[placement=right]:top-0", "data-[placement=right]:bottom-0", "data-[placement=right]:h-dvh", "data-[placement=right]:max-h-dvh", "data-[placement=right]:w-[min(var(--dsgn-modal-size),calc(100vw-var(--dsgn-modal-gutter)))]", "data-[placement=right]:left-auto", "data-[placement=right]:right-0", "data-[placement=right]:rounded-se-none", "data-[placement=right]:rounded-ee-none", "data-[placement=top]:m-0", "data-[placement=top]:left-0", "data-[placement=top]:right-0", "data-[placement=top]:w-screen", "data-[placement=top]:max-w-screen", "data-[placement=top]:max-h-[min(var(--dsgn-modal-size),calc(100dvh-var(--dsgn-modal-gutter)))]", "data-[placement=top]:top-0", "data-[placement=top]:bottom-auto", "data-[placement=top]:rounded-ss-none", "data-[placement=top]:rounded-se-none", "data-[placement=bottom]:m-0", "data-[placement=bottom]:left-0", "data-[placement=bottom]:right-0", "data-[placement=bottom]:w-screen", "data-[placement=bottom]:max-w-screen", "data-[placement=bottom]:max-h-[min(var(--dsgn-modal-size),calc(100dvh-var(--dsgn-modal-gutter)))]", "data-[placement=bottom]:top-auto", "data-[placement=bottom]:bottom-0", "data-[placement=bottom]:rounded-es-none", "data-[placement=bottom]:rounded-ee-none", "data-[size=full]:inset-0", "data-[size=full]:m-0", "data-[size=full]:w-screen", "data-[size=full]:max-w-screen", "data-[size=full]:h-dvh", "data-[size=full]:max-h-dvh", "data-[size=full]:rounded-none", "backdrop:bg-[rgb(2_6_23/0.6)]", "backdrop:backdrop-blur-[12px]");
 var panelClasses = () => clsx_default("flex", "flex-col", "flex-auto", "min-h-0", "font-sans");
 var headerClasses = (visible) => clsx_default("shrink-0", "items-start", "justify-between", "gap-4", "px-6", "pt-6", "pb-2", visible ? "flex" : "hidden");
 var headingClasses = () => clsx_default("min-w-0", "text-lg", "font-semibold", "text-text-primary");
@@ -1118,17 +886,6 @@ var unlockBodyScroll = () => {
     document.body.style.removeProperty("overflow");
   }
 };
-var whenAnimationsSettle = async (dialog) => {
-  if (typeof dialog.getAnimations !== "function")
-    return;
-  const animations = dialog.getAnimations({ subtree: true }).filter((animation) => {
-    const effect = animation.effect;
-    return effect?.target === dialog;
-  });
-  if (animations.length === 0)
-    return;
-  await Promise.allSettled(animations.map((animation) => animation.finished));
-};
 var isInTopLayer = (dialog) => {
   try {
     return dialog.matches(":modal");
@@ -1150,7 +907,9 @@ class Modal extends Base {
     this.noCloseControl = false;
     this.noBackdropDismiss = false;
     this.noEscapeDismiss = false;
+    this._motion = new MotionController(this);
     this._closing = false;
+    this._closeRun = 0;
     this._hasHeading = false;
     this._hasDescription = false;
     this._hasFooter = false;
@@ -1191,11 +950,13 @@ class Modal extends Base {
   }
   connectedCallback() {
     super.connectedCallback();
-    if (this.open) {
+    if (this.open || this._dialog?.open) {
       this.updateComplete.then(() => this._syncDialogState());
     }
   }
   disconnectedCallback() {
+    this._closeRun += 1;
+    this._closing = false;
     super.disconnectedCallback();
     this._releaseScrollLock();
   }
@@ -1208,11 +969,23 @@ class Modal extends Base {
   }
   _syncDialogState() {
     const dialog = this._dialog;
-    if (!dialog)
+    if (!dialog || !this.isConnected)
       return;
     if (this.open) {
-      if (isInTopLayer(dialog))
+      this._closeReason = modalCloseReasonValues.API;
+      this._returnValue = "";
+      if (this._closing) {
+        this._closing = false;
+        this._closeRun += 1;
+        if (isInTopLayer(dialog)) {
+          this._animateDialog(dialog, true);
+          return;
+        }
+      }
+      if (isInTopLayer(dialog)) {
+        this._acquireScrollLock();
         return;
+      }
       this._openDialog(dialog);
     } else if (dialog.open) {
       this._runCloseSequence(dialog);
@@ -1222,25 +995,38 @@ class Modal extends Base {
     if (dialog.open)
       dialog.close();
     this._closing = false;
-    this._previouslyFocused = deepActiveElement();
+    this._previouslyFocused ??= deepActiveElement();
     dialog.returnValue = "";
     dialog.showModal();
     this._acquireScrollLock();
     this._focusInitialElement(dialog);
+    this._animateDialog(dialog, true);
     this.emit("dsgn-modal-open");
   }
   async _runCloseSequence(dialog) {
     if (this._closing)
       return;
     this._closing = true;
-    await this.updateComplete;
-    await whenAnimationsSettle(dialog);
+    const run = ++this._closeRun;
+    await this._animateDialog(dialog, false);
+    if (run !== this._closeRun || !this.isConnected)
+      return;
     if (!dialog.open || this.open) {
       this._closing = false;
       return;
     }
     dialog.close(this._returnValue);
   }
+  _animateDialog(dialog, entering) {
+    const preset = modalMotionPresets[this._motionOrigin];
+    const play = entering ? this._motion.enter.bind(this._motion) : this._motion.exit.bind(this._motion);
+    return Promise.all([
+      play(dialog, preset),
+      play(dialog, "fade", { pseudoElement: "::backdrop" })
+    ]).then(() => {
+      return;
+    });
+  }
   _focusInitialElement(dialog) {
     const target = this.querySelector("[autofocus]") ?? dialog.querySelector("[autofocus]") ?? dialog;
     target.focus();
@@ -1266,7 +1052,10 @@ class Modal extends Base {
   _handleNativeClose() {
     if (this._dialog?.open)
       return;
+    this._closeRun += 1;
     this._closing = false;
+    if (this._dialog)
+      cancel(this._dialog);
     this.open = false;
     this._releaseScrollLock();
     this._restoreFocus();
@@ -1325,7 +1114,6 @@ class Modal extends Base {
         data-placement=${this.placement}
         data-motion=${this._motionOrigin}
         data-size=${this.size}
-        data-state=${this._closing ? "closed" : "open"}
         aria-label=${!this._hasHeading && this.ariaLabel ? this.ariaLabel : nothing}
         aria-labelledby=${this._hasHeading ? "modal-heading" : nothing}
         aria-describedby=${this._hasDescription ? "modal-description" : nothing}
@@ -1412,9 +1200,6 @@ __legacyDecorateClassTS([
 __legacyDecorateClassTS([
   property({ type: Boolean, reflect: true, attribute: "no-escape-dismiss" })
 ], Modal.prototype, "noEscapeDismiss", undefined);
-__legacyDecorateClassTS([
-  state()
-], Modal.prototype, "_closing", undefined);
 __legacyDecorateClassTS([
   state()
 ], Modal.prototype, "_hasHeading", undefined);

package/dist/components/Modal/src/Modal.props.d.ts

@@ -1,3 +1,4 @@
+import type { PresetName } from '@ds-gn/motion';
 /**
  * Where the dialog sits in the viewport. `center` is a classic modal; the four
  * edges are sheets/drawers that span that edge.
@@ -28,6 +29,8 @@ export declare const modalMotionValues: {
     readonly BOTTOM: "bottom";
 };
 export type ModalMotionType = (typeof modalMotionValues)[keyof typeof modalMotionValues];
+/** Motion names select an enter/exit pair; placement remains independent. */
+export declare const modalMotionPresets: Record<Exclude<ModalMotionType, 'inherit'>, PresetName>;
 export declare const modalMotionProps: import("lit").PropertyDeclaration<unknown, unknown>;
 /**
  * Size along the axis the placement grows on: width for `center`/`left`/`right`,

package/dist/components/Modal/src/Modal.props.js

@@ -39,6 +39,14 @@ var modalMotionValues = {
   TOP: "top",
   BOTTOM: "bottom"
 };
+var modalMotionPresets = {
+  center: "scaleIn",
+  left: "slideInLeft",
+  right: "slideInRight",
+  top: "slideInTop",
+  bottom: "slideInBottom",
+  none: "fade"
+};
 var modalMotionProps = enumCreator(Object.values(modalMotionValues), "motion", String, { reflect: true });
 var modalSizeValues = {
   SM: "sm",
@@ -56,6 +64,7 @@ var modalCloseReasonValues = {
 };
 export {
   modalCloseReasonValues,
+  modalMotionPresets,
   modalMotionProps,
   modalMotionValues,
   modalPlacementProps,

package/dist/components/Modal/src/Modal.styles.d.ts

@@ -1,8 +1,7 @@
 /**
  * `:host` is the only rule with no utility equivalent — the host is the
  * consumer's own `<dsgn-modal>` element, so there is no class we can put on it.
- * Everything else, including `::backdrop`, the `[data-*]` state selectors and
- * the enter/exit motion, is expressed as Tailwind utilities in
+ * Layout and backdrop styling are expressed as Tailwind utilities in
  * `dialogClasses()` below.
  */
 export declare const hostStyles: import("lit").CSSResult;
@@ -10,14 +9,11 @@ export declare const hostStyles: import("lit").CSSResult;
  * Every style the `<dialog>` needs, as one static utility list.
  *
  * Nothing here is conditional: the dialog carries `data-placement`,
- * `data-size`, `data-motion` and `data-state`, and the `data-[…]:` variants
+ * `data-size`, and the `data-[…]:` variants
  * select which rules apply at runtime. That is also a requirement rather than a
  * preference — Tailwind only generates classes it finds as *literal* strings in
  * the source, so these cannot be composed or interpolated.
- *
- * Ordering note: `motion-reduce:` is emitted after the `data-motion` rules and
- * matches their specificity, so it wins — the reduced-motion cross-fade
- * overrides whichever spatial animation the placement selected.
+ * Motion is played by MotionController, independently of these styles.
  */
 export declare const dialogClasses: () => string;
 export declare const panelClasses: () => string;

package/dist/components/Nav/src/Nav.js

@@ -125,10 +125,7 @@ var surfaceValues = {
 var surfaceProps = enumCreator(Object.values(surfaceValues), "surface", String, { reflect: true });
 
 // components/Nav/src/Nav.ts
-import {
-  containerPaddingValues,
-  containerSizeValues
-} from "../../Container/src/Container.props.js";
+import { containerSizeValues } from "../../Container/src/Container.props.js";
 // components/Icon/src/icons/menu.ts
 import { svg } from "lit";
 var menu = svg`<line x1="4" x2="20" y1="12" y2="12" /><line x1="4" x2="20" y1="6" y2="6" /><line x1="4" x2="20" y1="18" y2="18" />`;
@@ -672,11 +669,7 @@ class Nav extends Base {
   render() {
     return html2`
       <nav class="${classNames(this.transparent)}">
-        <dsgn-container
-          size="${containerSizeValues.XXL}"
-          padding-x="${containerPaddingValues.SM}"
-          padding-y="${containerPaddingValues.NONE}"
-        >
+        <dsgn-container size="${containerSizeValues.XXL}">
           <div class="${innerClasses()}">
             <div class="${logoClasses()}">
               <slot name="logo"></slot>