@ds-gn/ui 0.7.0 → 0.9.0

package/custom-elements.json

@@ -1505,6 +1505,30 @@
               "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": "_motionState",
+              "type": {
+                "text": "'static' | 'held' | 'played' | undefined"
+              },
+              "privacy": "private",
+              "description": "Motion progress, decided by the first visibility report."
+            },
             {
               "kind": "field",
               "name": "surface",
@@ -1591,6 +1615,38 @@
               "description": "Accessible label for the tab list.",
               "attribute": "tabs-aria-label"
             },
+            {
+              "kind": "field",
+              "name": "motion",
+              "type": {
+                "text": "MotionType"
+              },
+              "description": "Animate the section in when it scrolls into view: the header's heading\nletter by letter, then its description, then the tabs as a whole. The\neyebrow stays static. A section already in view when it loads, and\nreduced motion, stay static.",
+              "attribute": "motion",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "_updateMotion",
+              "privacy": "private",
+              "description": "Decide the motion from the first visibility report: a section already\non screen stays static; one off screen holds its parts hidden (from\nscript, so nothing is hidden when scripts do not run) and plays when it\ncomes into view, so even a jump to it shows no unanimated frame."
+            },
+            {
+              "kind": "method",
+              "name": "_motionParts",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_playMotion",
+              "privacy": "private"
+            },
+            {
+              "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",
@@ -1841,6 +1897,14 @@
               },
               "default": "DEFAULT_TABS_ARIA_LABEL",
               "description": "Accessible label for the tab list."
+            },
+            {
+              "name": "motion",
+              "fieldName": "motion",
+              "type": {
+                "text": "MotionType"
+              },
+              "description": "Animate the section in when it scrolls into view: the header's heading\nletter by letter, then its description, then the tabs as a whole. The\neyebrow stays static. A section already in view when it loads, and\nreduced motion, stay static."
             }
           ]
         }
@@ -2621,6 +2685,32 @@
               "description": "Space below the section. Unset follows the inherited section space.",
               "attribute": "padding-bottom",
               "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "motion",
+              "type": {
+                "text": "MotionType"
+              },
+              "description": "Animate the content's eyebrow in letter by letter once the hero loads,\neach letter fading in with a small rise.\nEverything else stays static, so the hero's largest text paints at once.\nUnder reduced motion the eyebrow is static too.",
+              "attribute": "motion",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "_motion",
+              "privacy": "private",
+              "default": "new MotionController(this)"
+            },
+            {
+              "kind": "method",
+              "name": "_eyebrows",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Element[]"
+                }
+              }
             }
           ],
           "superclass": {
@@ -2677,6 +2767,14 @@
                 "text": "SectionSpaceType | undefined"
               },
               "description": "Space below the section. Unset follows the inherited section space."
+            },
+            {
+              "name": "motion",
+              "fieldName": "motion",
+              "type": {
+                "text": "MotionType"
+              },
+              "description": "Animate the content's eyebrow in letter by letter once the hero loads,\neach letter fading in with a small rise.\nEverything else stays static, so the hero's largest text paints at once.\nUnder reduced motion the eyebrow is static too."
             }
           ]
         }
@@ -3620,6 +3718,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 +3732,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 +3838,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 +3914,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/common/props/motion/motion.props.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Whether a section animates in. Components with their own motion
+ * vocabulary (Modal's direction values) declare their own `motion` values.
+ */
+export declare const motionValues: {
+    readonly ON: "on";
+    readonly OFF: "off";
+};
+export declare const motionProps: import("lit").PropertyDeclaration<unknown, unknown>;
+export type MotionType = (typeof motionValues)[keyof typeof motionValues];

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

@@ -8,6 +8,7 @@ import '../../Icon/src/Icon.js';
 import { Base } from '../../../common/Base/Base.js';
 import { type SurfaceType } from '../../../common/props/surface/surface.props.js';
 import { type CSSResultGroup } from 'lit';
+import { type MotionType } from '../../../common/props/motion/motion.props.js';
 import { type SectionSpaceType } from '../../Container/src/Container.props.js';
 import { type FeatureTabData } from './FeatureTabs.props.js';
 /** @slot header - Optional content above the tab interface. */
@@ -19,6 +20,11 @@ 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?;
+    /** Motion progress, decided by the first visibility report. */
+    private _motionState?;
     surface: SurfaceType;
     features: FeatureTabData[];
     duration: number;
@@ -34,9 +40,31 @@ export declare class FeatureTabs extends Base {
     resumeAriaLabel: string;
     /** Accessible label for the tab list. */
     tabsAriaLabel: string;
+    /**
+     * Animate the section in when it scrolls into view: the header's heading
+     * letter by letter, then its description, then the tabs as a whole. The
+     * eyebrow stays static. A section already in view when it loads, and
+     * reduced motion, stay static.
+     */
+    motion: MotionType;
     constructor();
     firstUpdated(): void;
+    /**
+     * Decide the motion from the first visibility report: a section already
+     * on screen stays static; one off screen holds its parts hidden (from
+     * script, so nothing is hidden when scripts do not run) and plays when it
+     * comes into view, so even a jump to it shows no unanimated frame.
+     */
+    private _updateMotion;
+    private _motionParts;
+    private _playMotion;
     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,13 @@ var surfaceValues = {
 };
 var surfaceProps = enumCreator(Object.values(surfaceValues), "surface", String, { reflect: true });
 
+// components/FeatureTabs/src/FeatureTabs.ts
+import {
+  prefersReducedMotion as prefersReducedMotion2,
+  splitText
+} from "@ds-gn/motion";
+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;
@@ -303,6 +298,15 @@ import {
 import { property } from "lit/decorators.js";
 import { keyed } from "lit/directives/keyed.js";
 import { styleMap } from "lit/directives/style-map.js";
+
+// common/props/motion/motion.props.ts
+var motionValues = {
+  ON: "on",
+  OFF: "off"
+};
+var motionProps = enumCreator(Object.values(motionValues), "motion", String, { reflect: true });
+
+// components/FeatureTabs/src/FeatureTabs.ts
 import {
   containerSizeValues,
   paddingBottomProps,
@@ -338,8 +342,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 +465,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 +846,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 +999,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");
@@ -1036,13 +1016,20 @@ var dotPipInnerClassNames = (active) => clsx_default("block", "rounded-full", "h
 var playPauseClassNames = () => clsx_default("appearance-none", "border-0", "outline-none", "bg-transparent", "cursor-pointer", "text-accent", "py-[10px]", "px-[8px]", "flex", "items-center", "justify-center", "rounded-full", "transition-colors", "duration-150");
 
 // components/FeatureTabs/src/FeatureTabs.ts
+var holdHidden = (el) => el.style.setProperty("opacity", "0");
+var releaseHidden = (el) => el.style.removeProperty("opacity");
+var HEADING_STAGGER = 20;
+var HEADING_MAX_SPREAD = 500;
+var HEADING_RISE = 4;
+var MOTION_OVERLAP = 160;
 var FEATURE_TAB_ICONS = {
   terminal: svg`<polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/>`,
   brain: svg`<path d="M9 4.5a2.5 2.5 0 0 0-2.5 2.5v.5a2.5 2.5 0 0 0-2 4 2.5 2.5 0 0 0 2 4v.5A2.5 2.5 0 0 0 9 18.5a2.5 2.5 0 0 0 3-2.5V6a2.5 2.5 0 0 0-3-1.5z"/><path d="M15 4.5A2.5 2.5 0 0 1 17.5 7v.5a2.5 2.5 0 0 1 2 4 2.5 2.5 0 0 1-2 4v.5A2.5 2.5 0 0 1 15 18.5a2.5 2.5 0 0 1-3-2.5V6a2.5 2.5 0 0 1 3-1.5z"/>`,
   cpu: svg`<rect x="5" y="5" width="14" height="14" rx="2"/><rect x="9" y="9" width="6" height="6"/><line x1="9" y1="2" x2="9" y2="5"/><line x1="15" y1="2" x2="15" y2="5"/><line x1="9" y1="19" x2="9" y2="22"/><line x1="15" y1="19" x2="15" y2="22"/><line x1="2" y1="9" x2="5" y2="9"/><line x1="2" y1="15" x2="5" y2="15"/><line x1="19" y1="9" x2="22" y2="9"/><line x1="19" y1="15" x2="22" y2="15"/>`,
   palette: svg`<circle cx="12" cy="12" r="9"/><circle cx="7.5" cy="10.5" r="1" fill="currentColor"/><circle cx="12" cy="7.5" r="1" fill="currentColor"/><circle cx="16.5" cy="10.5" r="1" fill="currentColor"/><path d="M12 21a3 3 0 0 1-3-3c0-1.5 1-2 1-3a2 2 0 0 0-2-2"/>`,
   plug: svg`<path d="M9 2v6"/><path d="M15 2v6"/><path d="M7 8h10v3a5 5 0 0 1-5 5 5 5 0 0 1-5-5z"/><path d="M12 16v6"/>`,
-  shield: svg`<path d="M12 3l8 3v5c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6z"/><path d="M9 12l2 2 4-4"/>`
+  shield: svg`<path d="M12 3l8 3v5c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6z"/><path d="M9 12l2 2 4-4"/>`,
+  zap: svg`<path d="M13 2 4 14h7l-1 8 9-12h-7z"/>`
 };
 var nextTabIndex = (key, index, lastIndex) => {
   switch (key) {
@@ -1069,6 +1056,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;
@@ -1078,17 +1066,82 @@ class FeatureTabs extends Base {
     this.pauseAriaLabel = DEFAULT_PAUSE_ARIA_LABEL;
     this.resumeAriaLabel = DEFAULT_RESUME_ARIA_LABEL;
     this.tabsAriaLabel = DEFAULT_TABS_ARIA_LABEL;
+    this.motion = motionValues.OFF;
     this._rotate = new AutoRotateController(this, DEFAULT_DURATION, () => this._inView.value === true);
   }
   firstUpdated() {
     this._rotate.resume(this.features.length);
   }
+  _updateMotion() {
+    const inView = this._inView.value;
+    if (inView === undefined)
+      return;
+    if (this._motionState === undefined) {
+      const play = this.motion === motionValues.ON && !inView && !prefersReducedMotion2();
+      this._motionState = play ? "held" : "static";
+      if (play)
+        this._motionParts().forEach(holdHidden);
+    }
+    if (this._motionState === "held" && inView) {
+      this._motionState = "played";
+      this._playMotion();
+    }
+  }
+  _motionParts() {
+    const header = Array.from(this.children).filter((el) => el.slot === "header");
+    const find = (slot) => header.map((el) => el.querySelector(`[slot="${slot}"]`)).find((el) => el !== null);
+    return [
+      find("heading"),
+      find("description"),
+      ...this.renderRoot.querySelectorAll("[data-motion-body]")
+    ].filter((el) => el !== undefined);
+  }
+  _playMotion() {
+    const parts = this._motionParts();
+    parts.forEach(releaseHidden);
+    const heading = parts.find((el) => el.slot === "heading");
+    const description = parts.find((el) => el.slot === "description");
+    const split = heading ? splitText(heading) : undefined;
+    const steps = [
+      ...split ? [
+        {
+          targets: split.chars,
+          preset: "fade",
+          y: HEADING_RISE,
+          stagger: HEADING_STAGGER,
+          maxDuration: HEADING_MAX_SPREAD
+        }
+      ] : [],
+      ...description ? [
+        {
+          el: description,
+          preset: "fade",
+          overlap: MOTION_OVERLAP
+        }
+      ] : [],
+      {
+        targets: parts.filter((el) => el.hasAttribute("data-motion-body")),
+        preset: "fade",
+        overlap: MOTION_OVERLAP
+      }
+    ];
+    this._motion.timeline(steps).finished.then(() => split?.revert());
+  }
   updated(changedProperties) {
     super.updated(changedProperties);
     this.updateTheme(changedProperties, this.surface);
     if (changedProperties.has("duration")) {
       this._rotate.setDuration(this.duration);
     }
+    this._fadeInDetail();
+    this._updateMotion();
+  }
+  _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 +1201,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")}
@@ -1286,12 +1339,12 @@ class FeatureTabs extends Base {
           </div>
 
           <!-- Mobile: detail panel only, no grid -->
-          <div class="lg:hidden">
+          <div class="lg:hidden" data-motion-body>
             ${this._renderDetailPanel(idx, activeFeature, progress, total, paused, features)}
           </div>
 
           <!-- Desktop: full grid with tabs + detail -->
-          <div class="hidden lg:block">
+          <div class="hidden lg:block" data-motion-body>
             <dsgn-grid cols="7-5" gap="xl" ?reverse=${true}>
               ${this._renderTabList(features, idx, progress, paused, "col-2")}
               ${this._renderDetailPanel(idx, activeFeature, progress, total, paused, features, "col-1")}
@@ -1335,6 +1388,9 @@ __legacyDecorateClassTS([
 __legacyDecorateClassTS([
   property({ type: String, attribute: "tabs-aria-label" })
 ], FeatureTabs.prototype, "tabsAriaLabel", undefined);
+__legacyDecorateClassTS([
+  property({ ...motionProps })
+], FeatureTabs.prototype, "motion", undefined);
 defineElement("dsgn-feature-tabs", FeatureTabs);
 export {
   FeatureTabs

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

@@ -1,4 +1,4 @@
-export type FeatureTabIcon = 'terminal' | 'brain' | 'cpu' | 'palette' | 'plug' | 'shield';
+export type FeatureTabIcon = 'terminal' | 'brain' | 'cpu' | 'palette' | 'plug' | 'shield' | 'zap';
 export interface FeatureTabData {
     id: string;
     eyebrow: string;

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/Hero/src/Hero.d.ts

@@ -5,6 +5,7 @@ import '../../Grid/src/Grid.js';
 import '../../HeadingBlock/src/HeadingBlock.js';
 import { type CSSResultGroup } from 'lit';
 import { Base } from '../../../common/Base/Base.js';
+import { type MotionType } from '../../../common/props/motion/motion.props.js';
 import { type SurfaceType } from '../../../common/props/surface/surface.props.js';
 import { type SectionSpaceType } from '../../Container/src/Container.props.js';
 import { type HeroContentAlignType, type HeroLayoutType, type HeroMinHeightType } from './Hero.props.js';
@@ -37,6 +38,16 @@ export declare class Hero extends Base {
     paddingTop?: SectionSpaceType;
     /** Space below the section. Unset follows the inherited section space. */
     paddingBottom?: SectionSpaceType;
+    /**
+     * Animate the content's eyebrow in letter by letter once the hero loads,
+     * each letter fading in with a small rise.
+     * Everything else stays static, so the hero's largest text paints at once.
+     * Under reduced motion the eyebrow is static too.
+     */
+    motion: MotionType;
+    private _motion;
+    firstUpdated(): void;
+    private _eyebrows;
     updated(changedProperties: Map<string | number | symbol, unknown>): void;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/components/Hero/src/Hero.js

@@ -14,6 +14,8 @@ import"../../Container/src/Container.js";
 import"../../FormBlock/src/FormBlock.js";
 import"../../Grid/src/Grid.js";
 import"../../HeadingBlock/src/HeadingBlock.js";
+import { prefersReducedMotion, splitText } from "@ds-gn/motion";
+import { MotionController } from "@ds-gn/motion/lit";
 import { html as html2 } from "lit";
 import { property } from "lit/decorators.js";
 
@@ -118,6 +120,13 @@ var enumCreator = (acceptableValues, propName, type, other = {}) => {
   };
 };
 
+// common/props/motion/motion.props.ts
+var motionValues = {
+  ON: "on",
+  OFF: "off"
+};
+var motionProps = enumCreator(Object.values(motionValues), "motion", String, { reflect: true });
+
 // common/props/surface/surface.props.ts
 var surfaceValues = {
   LIGHT: "light",
@@ -189,6 +198,9 @@ var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.co
   .grid {
     display: grid;
   }
+  .hidden {
+    display: none;
+  }
   .h-64 {
     height: calc(var(--spacing) * 64);
   }
@@ -412,6 +424,11 @@ var centeredFormClassNames = (contentAlign) => {
 };
 
 // components/Hero/src/Hero.ts
+var EYEBROW_DELAY = 500;
+var EYEBROW_STAGGER = 30;
+var EYEBROW_MAX_SPREAD = 600;
+var EYEBROW_RISE = 4;
+
 class Hero extends Base {
   constructor() {
     super(...arguments);
@@ -419,8 +436,27 @@ class Hero extends Base {
     this.layout = heroLayoutValues.ASSET_RIGHT;
     this.minHeight = heroMinHeightValues.MD;
     this.contentAlign = heroContentAlignValues.START;
+    this.motion = motionValues.OFF;
+    this._motion = new MotionController(this);
   }
   static styles = [Base.styles, Hero_default];
+  firstUpdated() {
+    if (this.motion !== motionValues.ON || prefersReducedMotion())
+      return;
+    this._eyebrows().forEach((eyebrow) => {
+      const split = splitText(eyebrow);
+      this._motion.sequence(split.chars, {
+        preset: "fade",
+        y: EYEBROW_RISE,
+        delay: EYEBROW_DELAY,
+        stagger: EYEBROW_STAGGER,
+        maxDuration: EYEBROW_MAX_SPREAD
+      }).finished.then(split.revert);
+    });
+  }
+  _eyebrows() {
+    return Array.from(this.children).filter((el) => el.slot === "content").flatMap((el) => Array.from(el.querySelectorAll('[slot="eyebrow"]')));
+  }
   updated(changedProperties) {
     super.updated(changedProperties);
     this.updateTheme(changedProperties, this.surface);
@@ -526,6 +562,9 @@ __legacyDecorateClassTS([
 __legacyDecorateClassTS([
   property({ ...paddingBottomProps })
 ], Hero.prototype, "paddingBottom", undefined);
+__legacyDecorateClassTS([
+  property({ ...motionProps })
+], Hero.prototype, "motion", undefined);
 defineElement("dsgn-hero", Hero);
 export {
   Hero

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/dist/styles/hero-fallback.css

@@ -489,6 +489,11 @@ dsgn-hero:not(:defined)[layout='asset-background']:not(:has(> [slot='features'])
   padding-bottom: calc(var(--spacing) * 6);
   grid-row: 3;
 }
+@media (prefers-reduced-motion: no-preference) {
+  dsgn-hero:not(:defined)[motion='on'] > [slot='content'] [slot='eyebrow'] {
+    opacity: 0;
+  }
+}
 @property --tw-tracking {
   syntax: "*";
   inherits: false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-gn/ui",
-  "version": "0.7.0",
+  "version": "0.9.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.9.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;