@ds-gn/ui 0.8.0 → 0.10.0

package/custom-elements.json

@@ -1219,6 +1219,22 @@
               "description": "Space below the content.",
               "attribute": "padding-bottom",
               "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "motion",
+              "type": {
+                "text": "MotionType"
+              },
+              "description": "Animate the section in when it scrolls into view. Each heading block\ninside fades in its eyebrow, writes its heading letter by letter, then\nfades in its description and actions; each form block then fades in its\ninput and button together, then its note. A section already in view when\nit loads, and reduced motion, stay static.",
+              "attribute": "motion",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "_entrance",
+              "privacy": "private",
+              "default": "new SectionEntranceController( this, () => this.motion === motionValues.ON, )"
             }
           ],
           "superclass": {
@@ -1268,6 +1284,14 @@
                 "text": "SectionSpaceType | undefined"
               },
               "description": "Space below the content."
+            },
+            {
+              "name": "motion",
+              "fieldName": "motion",
+              "type": {
+                "text": "MotionType"
+              },
+              "description": "Animate the section in when it scrolls into view. Each heading block\ninside fades in its eyebrow, writes its heading letter by letter, then\nfades in its description and actions; each form block then fades in its\ninput and button together, then its note. A section already in view when\nit loads, and reduced motion, stay static."
             }
           ]
         }
@@ -1520,6 +1544,15 @@
               "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",
@@ -1606,6 +1639,32 @@
               "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",
@@ -1862,6 +1921,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."
             }
           ]
         }
@@ -2642,6 +2709,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": {
@@ -2698,6 +2791,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."
             }
           ]
         }

package/dist/common/controllers/SectionEntranceController.d.ts

@@ -0,0 +1,37 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+type EntrancePart = {
+    kind: 'fade';
+    els: HTMLElement[];
+} | {
+    kind: 'letters';
+    el: HTMLElement;
+};
+/**
+ * The entrance parts inside `root`, in document order. Each heading block
+ * contributes its eyebrow (fade), heading (letter by letter), description,
+ * then actions; each form block its input and button together, then its note.
+ */
+export declare function sectionEntranceParts(root: Element): EntrancePart[];
+/**
+ * Plays a section's entrance when it scrolls into view: the heading blocks
+ * and form blocks it contains animate in one timeline (see
+ * `sectionEntranceParts`). Decided from the first visibility report: a
+ * section already on screen, and reduced motion, stay static; one off screen
+ * holds its parts hidden (from script, so nothing is hidden when scripts do
+ * not run) and plays once when it comes into view.
+ */
+export declare class SectionEntranceController implements ReactiveController {
+    private readonly host;
+    private readonly enabled;
+    private readonly motion;
+    private observer?;
+    private state?;
+    private parts;
+    constructor(host: ReactiveControllerHost & HTMLElement, enabled: () => boolean);
+    hostUpdated(): void;
+    hostDisconnected(): void;
+    private report;
+    private play;
+    private stopObserving;
+}
+export {};

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

@@ -1,6 +1,7 @@
 import '../../../types/global.d.ts';
 import { type CSSResultGroup } from 'lit';
 import { Base } from '../../../common/Base/Base.js';
+import { type MotionType } from '../../../common/props/motion/motion.props.js';
 import { type ContainerPaddingType, type ContainerSizeType, type SectionSpaceType } from './Container.props.js';
 /** @slot - Constrained page content. */
 export declare class Container extends Base {
@@ -22,6 +23,15 @@ export declare class Container extends Base {
     paddingTop?: SectionSpaceType;
     /** Space below the content. */
     paddingBottom?: SectionSpaceType;
+    /**
+     * Animate the section in when it scrolls into view. Each heading block
+     * inside fades in its eyebrow, writes its heading letter by letter, then
+     * fades in its description and actions; each form block then fades in its
+     * input and button together, then its note. A section already in view when
+     * it loads, and reduced motion, stay static.
+     */
+    motion: MotionType;
+    private _entrance;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

package/dist/components/Container/src/Container.js

@@ -91,6 +91,146 @@ class Base extends LitElement {
 }
 defineElement("dsgn-base", Base);
 
+// common/controllers/SectionEntranceController.ts
+import {
+  prefersReducedMotion,
+  splitText
+} from "@ds-gn/motion";
+import { MotionController } from "@ds-gn/motion/lit";
+var HEADING_STAGGER = 20;
+var HEADING_MAX_SPREAD = 500;
+var HEADING_RISE = 4;
+var MOTION_OVERLAP = 160;
+var holdHidden = (el) => el.style.setProperty("opacity", "0");
+var releaseHidden = (el) => el.style.removeProperty("opacity");
+var ENTRANCE_BLOCKS = new Set(["dsgn-heading-block", "dsgn-form-block"]);
+var hasContent = (el) => !["div", "span"].includes(el.localName) || el.children.length > 0 || (el.textContent ?? "").trim() !== "";
+var childrenIn = (parent, ...slots) => Array.from(parent.children).filter((child) => child instanceof HTMLElement && slots.includes(child.slot) && hasContent(child));
+function sectionEntranceParts(root) {
+  const parts = [];
+  const fade = (els) => {
+    if (els.length > 0)
+      parts.push({ kind: "fade", els });
+  };
+  Array.from(root.querySelectorAll("*")).filter((el) => ENTRANCE_BLOCKS.has(el.localName)).forEach((block) => {
+    if (block.localName === "dsgn-form-block") {
+      fade(childrenIn(block, "input", "button"));
+      fade(childrenIn(block, "note"));
+      return;
+    }
+    fade(childrenIn(block, "eyebrow"));
+    const [heading] = childrenIn(block, "heading");
+    if (heading)
+      parts.push({ kind: "letters", el: heading });
+    fade(childrenIn(block, "description"));
+    fade(childrenIn(block, "action-primary", "action-secondary"));
+  });
+  return parts;
+}
+var elementsOf = (part) => part.kind === "fade" ? part.els : [part.el];
+
+class SectionEntranceController {
+  constructor(host, enabled) {
+    this.parts = [];
+    this.host = host;
+    this.enabled = enabled;
+    this.motion = new MotionController(host);
+    host.addController(this);
+  }
+  hostUpdated() {
+    if (this.observer || this.state !== undefined || !this.enabled())
+      return;
+    if (typeof IntersectionObserver === "undefined") {
+      this.state = "static";
+      return;
+    }
+    this.observer = new IntersectionObserver((entries) => {
+      const entry = entries[entries.length - 1];
+      if (entry)
+        this.report(entry.isIntersecting);
+    });
+    this.observer.observe(this.host);
+  }
+  hostDisconnected() {
+    this.stopObserving();
+    if (this.state === "held") {
+      this.parts.flatMap(elementsOf).forEach(releaseHidden);
+      this.state = undefined;
+    }
+  }
+  report(inView) {
+    if (this.state === undefined) {
+      const play = !inView && !prefersReducedMotion();
+      this.state = play ? "held" : "static";
+      if (!play)
+        return this.stopObserving();
+      this.parts = sectionEntranceParts(this.host);
+      this.parts.flatMap(elementsOf).forEach(holdHidden);
+    }
+    if (this.state === "held" && inView) {
+      this.state = "played";
+      this.stopObserving();
+      this.play();
+    }
+  }
+  play() {
+    this.parts.flatMap(elementsOf).forEach(releaseHidden);
+    const splits = [];
+    const steps = this.parts.map((part, index) => {
+      const overlap = index === 0 ? undefined : MOTION_OVERLAP;
+      if (part.kind === "fade") {
+        return { targets: part.els, preset: "fade", stagger: 0, overlap };
+      }
+      const split = splitText(part.el);
+      splits.push(split);
+      return {
+        targets: split.chars,
+        preset: "fade",
+        y: HEADING_RISE,
+        stagger: HEADING_STAGGER,
+        maxDuration: HEADING_MAX_SPREAD
+      };
+    });
+    if (steps.length === 0)
+      return;
+    this.motion.timeline(steps).finished.then(() => splits.forEach((split) => split.revert()));
+  }
+  stopObserving() {
+    this.observer?.disconnect();
+    this.observer = undefined;
+  }
+}
+
+// common/helpers/enum-validator.ts
+var enumValidator = (propName, enumSet, candidateValue) => {
+  if (!enumSet.has(candidateValue)) {
+    throw new Error(`Invalid prop ${propName} of value ${candidateValue}. Expected one of: ${Array.from(enumSet).join(", ")}`);
+  }
+};
+
+// common/helpers/enum-creator.ts
+var enumCreator = (acceptableValues, propName, type, other = {}) => {
+  const acceptableValuesSet = new Set(acceptableValues);
+  return {
+    type,
+    hasChanged(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        enumValidator(propName, acceptableValuesSet, newValue);
+        return true;
+      }
+      return false;
+    },
+    ...other
+  };
+};
+
+// common/props/motion/motion.props.ts
+var motionValues = {
+  ON: "on",
+  OFF: "off"
+};
+var motionProps = enumCreator(Object.values(motionValues), "motion", String, { reflect: true });
+
 // components/Container/src/Container.css
 import { css as css2 } from "lit";
 var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
@@ -138,6 +278,9 @@ var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.co
   .mx-auto {
     margin-inline: auto;
   }
+  .block {
+    display: block;
+  }
   .w-full {
     width: 100%;
   }
@@ -229,29 +372,6 @@ var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.co
 `;
 var Container_default = styles2;
 
-// common/helpers/enum-validator.ts
-var enumValidator = (propName, enumSet, candidateValue) => {
-  if (!enumSet.has(candidateValue)) {
-    throw new Error(`Invalid prop ${propName} of value ${candidateValue}. Expected one of: ${Array.from(enumSet).join(", ")}`);
-  }
-};
-
-// common/helpers/enum-creator.ts
-var enumCreator = (acceptableValues, propName, type, other = {}) => {
-  const acceptableValuesSet = new Set(acceptableValues);
-  return {
-    type,
-    hasChanged(newValue, oldValue) {
-      if (newValue !== oldValue) {
-        enumValidator(propName, acceptableValuesSet, newValue);
-        return true;
-      }
-      return false;
-    },
-    ...other
-  };
-};
-
 // components/Container/src/Container.props.ts
 var containerSizeValues = {
   SM: "sm",
@@ -341,6 +461,8 @@ class Container extends Base {
     super(...arguments);
     this.size = containerSizeValues.LG;
     this.section = false;
+    this.motion = motionValues.OFF;
+    this._entrance = new SectionEntranceController(this, () => this.motion === motionValues.ON);
   }
   static styles = [Base.styles, Container_default];
   render() {
@@ -366,6 +488,9 @@ __legacyDecorateClassTS([
 __legacyDecorateClassTS([
   property({ ...paddingBottomProps })
 ], Container.prototype, "paddingBottom", undefined);
+__legacyDecorateClassTS([
+  property({ ...motionProps })
+], Container.prototype, "motion", undefined);
 defineElement("dsgn-container", Container);
 export {
   Container

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. */
@@ -22,6 +23,8 @@ export declare class FeatureTabs extends Base {
     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;
@@ -37,8 +40,24 @@ 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

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

@@ -218,6 +218,10 @@ 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
@@ -294,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,
@@ -1003,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) {
@@ -1046,11 +1066,67 @@ 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);
@@ -1058,6 +1134,7 @@ class FeatureTabs extends Base {
       this._rotate.setDuration(this.duration);
     }
     this._fadeInDetail();
+    this._updateMotion();
   }
   _fadeInDetail() {
     const index = this._rotate.activeIndex;
@@ -1262,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")}
@@ -1311,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/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/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.8.0",
+  "version": "0.10.0",
   "description": "UI components for the DS-GN Design System",
   "type": "module",
   "exports": {
@@ -346,7 +346,7 @@
     "react-dom": "19.2.4"
   },
   "dependencies": {
-    "@ds-gn/motion": "0.8.0",
+    "@ds-gn/motion": "0.9.0",
     "@ds-gn/tokens": "0.8.0",
     "@lit-labs/observers": "^2.0.5",
     "@lit/react": "^1.0.7",