@ds-gn/ui 0.7.0 → 0.8.0

package/custom-elements.json

@@ -1505,6 +1505,21 @@
               "privacy": "private",
               "default": "new AutoRotateController( this, DEFAULT_DURATION, () => this._inView.value === true, )"
             },
+            {
+              "kind": "field",
+              "name": "_motion",
+              "privacy": "private",
+              "default": "new MotionController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "_shownIndex",
+              "type": {
+                "text": "number | undefined"
+              },
+              "privacy": "private",
+              "description": "The feature whose detail last faded in; the fade replays when it changes."
+            },
             {
               "kind": "field",
               "name": "surface",
@@ -1591,6 +1606,12 @@
               "description": "Accessible label for the tab list.",
               "attribute": "tabs-aria-label"
             },
+            {
+              "kind": "method",
+              "name": "_fadeInDetail",
+              "privacy": "private",
+              "description": "Fade the detail in whenever the active feature changes. `keyed` renders a\nfresh element per feature, so each change animates a new node. This runs\nafter render and before paint, so the new detail never shows unfaded."
+            },
             {
               "kind": "method",
               "name": "_handleTabClick",
@@ -3620,6 +3641,13 @@
               "attribute": "no-escape-dismiss",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "_motion",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new MotionController(this)"
+            },
             {
               "kind": "field",
               "name": "_closing",
@@ -3627,8 +3655,17 @@
                 "text": "boolean"
               },
               "privacy": "private",
-              "default": "false",
-              "description": "Drives `data-state`, which the stylesheet keys the exit animation on."
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_closeRun",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0",
+              "description": "Invalidates an exit when reopened, disconnected, or closed externally."
             },
             {
               "kind": "field",
@@ -3724,7 +3761,7 @@
               "kind": "field",
               "name": "_motionOrigin",
               "type": {
-                "text": "string"
+                "text": "Exclude<ModalMotionType, 'inherit'>"
               },
               "privacy": "private",
               "description": "The resolved animation origin, with `inherit` folded into `placement`.",
@@ -3800,6 +3837,30 @@
               ],
               "description": "Play the exit animation, then leave the top layer. The dialog stays in the\ntop layer for the whole animation because `dialog.close()` is what removes\nit, and that is deliberately the last step — no timers involved, the wait is\non the animations' own `finished` promises."
             },
+            {
+              "kind": "method",
+              "name": "_animateDialog",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "dialog",
+                  "type": {
+                    "text": "HTMLDialogElement"
+                  }
+                },
+                {
+                  "name": "entering",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "_focusInitialElement",

package/dist/components/Background/src/Background.js

@@ -156,20 +156,8 @@ class Base extends LitElement {
 }
 defineElement("dsgn-base", Base);
 
-// common/helpers/motion.ts
-var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
-var cachedMatchMedia;
-var cachedQuery = null;
-function prefersReducedMotion() {
-  const mm = typeof matchMedia === "function" ? matchMedia : undefined;
-  if (mm !== cachedMatchMedia) {
-    cachedMatchMedia = mm;
-    cachedQuery = mm ? mm(REDUCED_MOTION_QUERY) : null;
-  }
-  return cachedQuery?.matches ?? false;
-}
-
 // common/controllers/AuroraMeshController.ts
+import { prefersReducedMotion } from "@ds-gn/motion";
 var X_MIN = -15;
 var X_MAX = 70;
 var Y_MIN = -20;

package/dist/components/FeatureTabs/src/FeatureTabs.d.ts

@@ -19,6 +19,9 @@ export declare class FeatureTabs extends Base {
     paddingBottom?: SectionSpaceType;
     private _inView;
     private _rotate;
+    private _motion;
+    /** The feature whose detail last faded in; the fade replays when it changes. */
+    private _shownIndex?;
     surface: SurfaceType;
     features: FeatureTabData[];
     duration: number;
@@ -37,6 +40,12 @@ export declare class FeatureTabs extends Base {
     constructor();
     firstUpdated(): void;
     updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    /**
+     * Fade the detail in whenever the active feature changes. `keyed` renders a
+     * fresh element per feature, so each change animates a new node. This runs
+     * after render and before paint, so the new detail never shows unfaded.
+     */
+    private _fadeInDetail;
     private _handleTabClick;
     private _handleTabKeyDown;
     private _handlePauseResume;

package/dist/components/FeatureTabs/src/FeatureTabs.js

@@ -95,20 +95,8 @@ class Base extends LitElement {
 }
 defineElement("dsgn-base", Base);
 
-// common/helpers/motion.ts
-var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
-var cachedMatchMedia;
-var cachedQuery = null;
-function prefersReducedMotion() {
-  const mm = typeof matchMedia === "function" ? matchMedia : undefined;
-  if (mm !== cachedMatchMedia) {
-    cachedMatchMedia = mm;
-    cachedQuery = mm ? mm(REDUCED_MOTION_QUERY) : null;
-  }
-  return cachedQuery?.matches ?? false;
-}
-
 // common/controllers/AutoRotateController.ts
+import { prefersReducedMotion } from "@ds-gn/motion";
 var TICK_MS = 32;
 
 class AutoRotateController {
@@ -229,6 +217,9 @@ var surfaceValues = {
 };
 var surfaceProps = enumCreator(Object.values(surfaceValues), "surface", String, { reflect: true });
 
+// components/FeatureTabs/src/FeatureTabs.ts
+import { MotionController } from "@ds-gn/motion/lit";
+
 // ../../node_modules/.bun/lit-html@3.3.3/node_modules/lit-html/development/is-server.js
 var NODE_MODE = false;
 var isServer = NODE_MODE;
@@ -338,8 +329,6 @@ var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.co
     --color-text-primary: inherit;
     --color-text-secondary: inherit;
     --color-text-tertiary: inherit;
-    --animate-fade-in-a: fade-in-a 0.3s ease-in;
-    --animate-fade-in-b: fade-in-b 0.3s ease-in;
   }
 }
 @layer utilities {
@@ -463,12 +452,6 @@ var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.co
   .shrink-0 {
     flex-shrink: 0;
   }
-  .animate-fade-in-a {
-    animation: var(--animate-fade-in-a);
-  }
-  .animate-fade-in-b {
-    animation: var(--animate-fade-in-b);
-  }
   .cursor-pointer {
     cursor: pointer;
   }
@@ -850,22 +833,6 @@ var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.co
   syntax: "*";
   inherits: false;
 }
-@keyframes fade-in-a {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@keyframes fade-in-b {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
 @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 {
@@ -1019,7 +986,7 @@ var patternOverlayStyles = () => ({
   maskImage: PATTERN_MASK,
   WebkitMaskImage: PATTERN_MASK
 });
-var detailContentClassNames = (idx) => clsx_default("relative", "flex", "flex-col", "flex-1", idx % 2 === 0 ? "animate-fade-in-a" : "animate-fade-in-b");
+var detailContentClassNames = () => clsx_default("relative", "flex", "flex-col", "flex-1");
 var detailHeaderClassNames = () => clsx_default("flex", "items-center", "gap-3", "mb-6");
 var detailEyebrowClassNames = () => clsx_default("font-mono", "text-[11px]", "tracking-[0.06em]", "uppercase", "text-text-tertiary");
 var detailCounterClassNames = () => clsx_default("ml-auto", "font-mono", "text-[12px]", "text-text-tertiary");
@@ -1069,6 +1036,7 @@ class FeatureTabs extends Base {
       config: { threshold: 0 },
       callback: (entries) => entries[entries.length - 1]?.isIntersecting ?? false
     });
+    this._motion = new MotionController(this);
     this.surface = surfaceValues.DARK;
     this.features = DEFAULT_FEATURES;
     this.duration = DEFAULT_DURATION;
@@ -1089,6 +1057,14 @@ class FeatureTabs extends Base {
     if (changedProperties.has("duration")) {
       this._rotate.setDuration(this.duration);
     }
+    this._fadeInDetail();
+  }
+  _fadeInDetail() {
+    const index = this._rotate.activeIndex;
+    if (index === this._shownIndex)
+      return;
+    this._shownIndex = index;
+    this.renderRoot.querySelectorAll("[data-detail-content]").forEach((detail) => void this._motion.enter(detail, "fade"));
   }
   _handleTabClick(index) {
     this._rotate.goTo(index);
@@ -1148,7 +1124,7 @@ class FeatureTabs extends Base {
         <div aria-hidden="true" style=${styleMap(patternOverlayStyles())}></div>
 
         ${keyed(idx, html2`
-            <div class="${detailContentClassNames(idx)}">
+            <div class="${detailContentClassNames()}" data-detail-content>
               <div class="${detailHeaderClassNames()}">
                 <span class="${iconBadgeClassNames(true, true)}">
                   ${this._renderIcon(feature.icon, "lg")}

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

@@ -18,7 +18,7 @@ export declare const controlBtnClassNames: () => string;
 export declare const controlDotClassNames: (rotating: boolean) => string;
 export declare const detailClassNames: () => string;
 export declare const patternOverlayStyles: () => Record<string, string>;
-export declare const detailContentClassNames: (idx: number) => string;
+export declare const detailContentClassNames: () => string;
 export declare const detailHeaderClassNames: () => string;
 export declare const detailEyebrowClassNames: () => string;
 export declare const detailCounterClassNames: () => string;

package/dist/components/Heading/src/Heading.js

@@ -157,20 +157,8 @@ class Base extends LitElement {
 }
 defineElement("dsgn-base", Base);
 
-// common/helpers/motion.ts
-var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
-var cachedMatchMedia;
-var cachedQuery = null;
-function prefersReducedMotion() {
-  const mm = typeof matchMedia === "function" ? matchMedia : undefined;
-  if (mm !== cachedMatchMedia) {
-    cachedMatchMedia = mm;
-    cachedQuery = mm ? mm(REDUCED_MOTION_QUERY) : null;
-  }
-  return cachedQuery?.matches ?? false;
-}
-
 // common/controllers/WordCycleController.ts
+import { prefersReducedMotion } from "@ds-gn/motion";
 var DEFAULT_INTERVAL = 1000;
 
 class WordCycleController {

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

@@ -72,8 +72,10 @@ export declare class Modal extends Base {
      * keyboard users are stuck.
      */
     noEscapeDismiss: boolean;
-    /** Drives `data-state`, which the stylesheet keys the exit animation on. */
+    private readonly _motion;
     private _closing;
+    /** Invalidates an exit when reopened, disconnected, or closed externally. */
+    private _closeRun;
     private _hasHeading;
     private _hasDescription;
     private _hasFooter;
@@ -118,6 +120,7 @@ export declare class Modal extends Base {
      * on the animations' own `finished` promises.
      */
     private _runCloseSequence;
+    private _animateDialog;
     /**
      * Deliberate initial focus: an author-marked `[autofocus]` (light DOM first,
      * since that is where the modal's content lives), otherwise the dialog itself.

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-gn/ui",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "UI components for the DS-GN Design System",
   "type": "module",
   "exports": {
@@ -308,11 +308,11 @@
     "generate:playground": "bun build/generate-playground-manifest.ts",
     "check:playground-manifest": "bun build/generate-playground-manifest.ts --check",
     "generate:react": "bun run generate:cem && bun run generate:playground && bun build/generate-react.ts",
-    "build": "bun run --cwd ../tokens build && bun build/build-all-components.ts",
+    "build": "bun run --cwd ../tokens build && bun run --cwd ../motion build && bun build/build-all-components.ts",
     "build:css": "bun run --cwd ../tokens build && bun build/generate-component-css.ts",
     "test": "bun run build && bun test --conditions=browser",
-    "build:dev": "bun run --cwd ../tokens build && cross-env NODE_ENV=development bun build/build-all-components.ts",
-    "build:prod": "bun run --cwd ../tokens build && cross-env NODE_ENV=production bun build/build-all-components.ts",
+    "build:dev": "bun run --cwd ../tokens build && bun run --cwd ../motion build && cross-env NODE_ENV=development bun build/build-all-components.ts",
+    "build:prod": "bun run --cwd ../tokens build && bun run --cwd ../motion build && cross-env NODE_ENV=production bun build/build-all-components.ts",
     "watch": "cross-env NODE_ENV=development bun build/watch.ts",
     "update:hash": "bun build/update-package-hash.ts"
   },
@@ -346,7 +346,8 @@
     "react-dom": "19.2.4"
   },
   "dependencies": {
-    "@ds-gn/tokens": "0.7.0",
+    "@ds-gn/motion": "0.8.0",
+    "@ds-gn/tokens": "0.8.0",
     "@lit-labs/observers": "^2.0.5",
     "@lit/react": "^1.0.7",
     "clsx": "^2.1.1"

package/dist/common/helpers/motion.d.ts

@@ -1,9 +0,0 @@
-/**
- * Whether the user has requested reduced motion via the OS/browser setting.
- *
- * Used as a gate for auto-animating controllers (e.g. AutoRotateController,
- * WordCycleController) so motion respects `prefers-reduced-motion: reduce`.
- * Guarded for environments without `matchMedia` (SSR, test DOMs), where it
- * reports `false` (motion allowed) rather than throwing.
- */
-export declare function prefersReducedMotion(): boolean;