@ds-gn/ui 0.8.0 → 0.9.0

package/custom-elements.json

@@ -1520,6 +1520,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 +1615,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 +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."
             }
           ]
         }
@@ -2642,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": {
@@ -2698,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."
             }
           ]
         }

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/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.9.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",