@deriv-com/dds-marketing 1.1.3 → 1.2.0

package/dist/components/blocks/scene-scroll-word/SceneScrollWord.css

@@ -0,0 +1,105 @@
+/* GENERATED from scenescrollword.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword {
+  box-sizing: border-box;
+  container-type: inline-size;
+  display: block;
+  inline-size: 100%;
+  overflow-wrap: anywhere;
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__stage {
+  box-sizing: border-box;
+  display: grid;
+  inline-size: 100%;
+  min-inline-size: 0;
+  row-gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__scene {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  isolation: isolate;
+  justify-content: center;
+  min-inline-size: 0;
+  position: relative;
+  padding-block: var(--space-section-default);
+  padding-inline: var(--space-inset-page);
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__media {
+  overflow: clip;
+  position: absolute;
+  border-radius: var(--radius-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__image {
+  display: block;
+  object-fit: cover;
+  border-radius: var(--radius-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__content {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  position: relative;
+  max-inline-size: var(--size-heading-group-max);
+  row-gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__title {
+  margin-block: 0;
+  text-wrap: balance;
+  margin-block-end: var(--space-heading-title-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__before {
+  display: inline;
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__word {
+  display: inline-grid;
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__after {
+  display: inline;
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__description {
+  margin-block: 0;
+  font-family: var(--font-body-lg-family);
+  font-size: var(--font-body-lg-size);
+  font-weight: var(--font-body-lg-weight);
+  letter-spacing: var(--font-body-lg-letter-spacing);
+  line-height: var(--font-body-lg-line-height);
+  max-inline-size: var(--size-measure-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__action {
+  display: flex;
+  position: relative;
+  padding-block-end: var(--space-section-default);
+  padding-inline: var(--space-inset-page);
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword[data-heading-level="h1"] .dds-scenescrollword__title {
+  font-family: var(--font-h1-family);
+  font-size: var(--font-h1-size);
+  font-weight: var(--font-h1-weight);
+  letter-spacing: var(--font-h1-letter-spacing);
+  line-height: var(--font-h1-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword[data-heading-level="h2"] .dds-scenescrollword__title {
+  font-family: var(--font-h2-family);
+  font-size: var(--font-h2-size);
+  font-weight: var(--font-h2-weight);
+  letter-spacing: var(--font-h2-letter-spacing);
+  line-height: var(--font-h2-line-height);
+}
+

package/dist/components/blocks/scene-scroll-word/SceneScrollWord.d.ts

@@ -0,0 +1,31 @@
+import './SceneScrollWord.css';
+import './scene-scroll-word-impl.css';
+import { type SceneScrollWordProps } from './SceneScrollWord.types.js';
+export type { SceneScrollWordProps };
+/**
+ * SceneScroll's change-over told as one claim with one word changed — "Trade all day", then
+ * "Trade all night": the reference design's inline day-and-night headline, made generic.
+ *
+ * The same track, pin and view timeline as SceneScroll, and nothing here runs a script. Each scene
+ * draws its whole heading — the shared words and its own word — so the outline, a screen reader and
+ * the stacked fallback all read "Trade all day" then "Trade all night". The stylesheet lays the
+ * second heading exactly over the first, keeps the second's shared words undrawn, and changes the
+ * words over alone.
+ *
+ * The changing word falls where the language puts it, so the shared words come as what is before it
+ * and what is after it, either or both, and nothing here adds a space: Japanese has none to add, and
+ * a language that has them writes them into the strings.
+ *
+ * Each word sits in a slot holding the other scene's word too, undrawn: the slot is as wide as the
+ * wider of the two, so both titles wrap alike and the second's word lands exactly where the first's
+ * was. That duplicate is the one thing kept from assistive technology, since the heading it belongs
+ * to is read in full.
+ *
+ * The words sit straight on the photographs in the ink each scene names, as SceneScroll's do. Where
+ * the two inks differ the shared words cross over with the word, so the claim changes colour as one
+ * piece; the section says so as `data-ink-change`.
+ *
+ * `'use client'` for `useId`, which names the region by its heading. There is no arrival, for
+ * SceneScroll's reason: the change-over is this block's entrance.
+ */
+export declare function SceneScrollWord({ titleBefore, titleAfter, first, second, action, headingLevel, }: SceneScrollWordProps): import("react").JSX.Element | null;

package/dist/components/blocks/scene-scroll-word/SceneScrollWord.js

@@ -0,0 +1,67 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId } from 'react';
+import './SceneScrollWord.css';
+import './scene-scroll-word-impl.css';
+import { given } from '../../given.js';
+import { sceneScrollWordDefaults, sceneScrollWordParts, } from './SceneScrollWord.types.js';
+/**
+ * The spaces an author wrote at either edge of the shared words, set apart from them.
+ *
+ * Written into the strings rather than added here, because a language without spaces between words
+ * has none to add — but drawn between the parts rather than inside them. An accessible name is put
+ * together from each element's text with its edges trimmed, so "Trade all " in a span beside "day"
+ * was announced "Trade allday"; as text between the two it is the space it was written as.
+ */
+function edge(text) {
+    const start = /^\s*/.exec(text)[0];
+    const end = /\s*$/.exec(text)[0];
+    return { start, end, words: text.slice(start.length, text.length - end.length) };
+}
+/** The level under the first scene's, for the second scene's title. */
+const under = { h1: 'h2', h2: 'h3' };
+/**
+ * SceneScroll's change-over told as one claim with one word changed — "Trade all day", then
+ * "Trade all night": the reference design's inline day-and-night headline, made generic.
+ *
+ * The same track, pin and view timeline as SceneScroll, and nothing here runs a script. Each scene
+ * draws its whole heading — the shared words and its own word — so the outline, a screen reader and
+ * the stacked fallback all read "Trade all day" then "Trade all night". The stylesheet lays the
+ * second heading exactly over the first, keeps the second's shared words undrawn, and changes the
+ * words over alone.
+ *
+ * The changing word falls where the language puts it, so the shared words come as what is before it
+ * and what is after it, either or both, and nothing here adds a space: Japanese has none to add, and
+ * a language that has them writes them into the strings.
+ *
+ * Each word sits in a slot holding the other scene's word too, undrawn: the slot is as wide as the
+ * wider of the two, so both titles wrap alike and the second's word lands exactly where the first's
+ * was. That duplicate is the one thing kept from assistive technology, since the heading it belongs
+ * to is read in full.
+ *
+ * The words sit straight on the photographs in the ink each scene names, as SceneScroll's do. Where
+ * the two inks differ the shared words cross over with the word, so the claim changes colour as one
+ * piece; the section says so as `data-ink-change`.
+ *
+ * `'use client'` for `useId`, which names the region by its heading. There is no arrival, for
+ * SceneScroll's reason: the change-over is this block's entrance.
+ */
+export function SceneScrollWord({ titleBefore, titleAfter, first, second, action, headingLevel = sceneScrollWordDefaults.headingLevel, }) {
+    const titleId = useId();
+    // Both scenes are required, but a record from a feed or an editor is not typed: one that never
+    // arrived draws nothing rather than taking the page down, and a change-over missing a scene is not
+    // the section. Shared words missing on both sides still leave each scene a heading — its word —
+    // so that is drawn rather than the section vanishing over copy still being written.
+    if (!first || !second)
+        return null;
+    const before = given(titleBefore) ? titleBefore : undefined;
+    const after = given(titleAfter) ? titleAfter : undefined;
+    return (_jsx("section", { className: sceneScrollWordParts.root, "data-heading-level": headingLevel, "data-ink-change": (first.ink ?? 'light') === (second.ink ?? 'light') ? undefined : '', "aria-labelledby": titleId, children: _jsxs("div", { className: sceneScrollWordParts.stage, children: [_jsx(Scene, { which: "first", scene: first, other: second.word, before: before, after: after, level: headingLevel, titleId: titleId, eager: headingLevel === 'h1' }), _jsx(Scene, { which: "second", scene: second, other: first.word, before: before, after: after, level: under[headingLevel] }), action ? _jsx("div", { className: sceneScrollWordParts.action, children: action }) : null] }) }));
+}
+function Scene({ which, scene, other, before, after, level, titleId, eager = false }) {
+    const Title = level;
+    const { image } = scene;
+    const lead = before !== undefined ? edge(before) : undefined;
+    const tail = after !== undefined ? edge(after) : undefined;
+    return (_jsxs("div", { className: sceneScrollWordParts.scene, "data-scene": which, "data-ink": scene.ink ?? 'light', children: [_jsx("div", { className: sceneScrollWordParts.media, children: image ? (_jsx("img", { className: sceneScrollWordParts.image, src: image.src, alt: image.alt ?? '', width: image.width, height: image.height, loading: eager ? 'eager' : 'lazy', decoding: "async" })) : null }), _jsxs("div", { className: sceneScrollWordParts.content, children: [_jsxs(Title, { className: sceneScrollWordParts.title, id: titleId, children: [lead !== undefined ? (_jsxs(_Fragment, { children: [_jsx("span", { className: sceneScrollWordParts.before, children: lead.words }), lead.end] })) : null, _jsxs("span", { className: sceneScrollWordParts.word, children: [_jsx("span", { "data-word": "own", children: scene.word }), _jsx("span", { "data-word": "other", "aria-hidden": "true", children: other })] }), tail !== undefined ? (_jsxs(_Fragment, { children: [tail.start, _jsx("span", { className: sceneScrollWordParts.after, children: tail.words })] })) : null] }), given(scene.description) ? _jsx("p", { className: sceneScrollWordParts.description, children: scene.description }) : null] })] }));
+}

package/dist/components/blocks/scene-scroll-word/SceneScrollWord.types.d.ts

@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react';
+import type { SceneScrollWordScene } from '../../scene-scroll-data.js';
+export interface SceneScrollWordOwnProps {
+    /**
+     * `h2` — The default: the section sits under the page's own h1, and the scenes' titles are drawn at font.h2
+     * `h1` — The section opens a campaign page and the first scene's title is the page's heading — the reference design's hero use. Drawn at font.h1, the opening band's size
+     */
+    headingLevel?: 'h2' | 'h1';
+    /** The words of the title that come before the changing word, the same in both scenes — "Trade all ", for "Trade all day" and "Trade all night". With the space that separates them from the word written in, where the language uses one: the block adds none. Give this, `titleAfter`, or both; a title with neither is SceneScroll's. */
+    titleBefore?: string;
+    /** The words of the title that come after the changing word, the same in both scenes — " handeln", for German "Den ganzen Tag handeln" and "Die ganze Nacht handeln"; "取引" for Japanese "一日中取引" and "夜通し取引", with no space. With the space written in where the language uses one: the block adds none. */
+    titleAfter?: string;
+    /** Always. The scene the section opens on: the word that completes the title, a line under it where the title needs one, and the photograph filling the band behind them. With the shared words around it, it names the section. Give its `ink` — `dark` over a light photograph, `light` over a dark one — and the photograph's width and height; `alt` empty unless it shows something the words do not. */
+    first: SceneScrollWordScene;
+    /** Always. The scene the section changes over to, in the same shape as the first. A word of about the same length as the first, so the words after it do not move as one replaces the other, and a photograph of the same composition where there is one, so the dissolve reads as one place changing rather than a cut. Its `ink` is its own, so a daylight first scene in dark words can change over to a night one in white. */
+    second: SceneScrollWordScene;
+    /** One thing for the reader to do or a way on — "Trade now", "See trading hours" — under the words. It belongs to the section rather than to either scene, so it holds still through the change-over and never fades while the reader is reaching for it. A primary Button, or a standalone Link at its brand tone: either reads over both photographs, where a Link taking the ink around it would take the band's white over a light photograph. */
+    action?: ReactNode;
+}
+export type SceneScrollWordProps = SceneScrollWordOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const sceneScrollWordParts: {
+    readonly root: "dds-scenescrollword";
+    readonly stage: "dds-scenescrollword__stage";
+    readonly scene: "dds-scenescrollword__scene";
+    readonly media: "dds-scenescrollword__media";
+    readonly image: "dds-scenescrollword__image";
+    readonly content: "dds-scenescrollword__content";
+    readonly title: "dds-scenescrollword__title";
+    readonly before: "dds-scenescrollword__before";
+    readonly word: "dds-scenescrollword__word";
+    readonly after: "dds-scenescrollword__after";
+    readonly description: "dds-scenescrollword__description";
+    readonly action: "dds-scenescrollword__action";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const sceneScrollWordDefaults: {
+    readonly headingLevel: "h2";
+};

package/dist/components/blocks/scene-scroll-word/SceneScrollWord.types.js

@@ -0,0 +1,18 @@
+// GENERATED from scene-scroll-word.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const sceneScrollWordParts = {
+    root: 'dds-scenescrollword',
+    stage: 'dds-scenescrollword__stage',
+    scene: 'dds-scenescrollword__scene',
+    media: 'dds-scenescrollword__media',
+    image: 'dds-scenescrollword__image',
+    content: 'dds-scenescrollword__content',
+    title: 'dds-scenescrollword__title',
+    before: 'dds-scenescrollword__before',
+    word: 'dds-scenescrollword__word',
+    after: 'dds-scenescrollword__after',
+    description: 'dds-scenescrollword__description',
+    action: 'dds-scenescrollword__action',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const sceneScrollWordDefaults = { headingLevel: 'h2' };

package/dist/components/blocks/scene-scroll-word/scene-scroll-word-impl.css

@@ -0,0 +1,370 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * `:where([data-dds-context="marketing"])` confines these rules without contributing specificity,
+ * so each is decided against the generated rule on its own terms.
+ */
+
+/*
+ * Each scene is a screen tall, the photograph behind and the words over it.
+ *
+ * This is the whole of the layout wherever the scroll does not drive the change-over — a browser
+ * with no scroll timeline, a reader who asked for less motion, the page before any script: two
+ * scenes one after the other, each its own screen, every word at full strength and nothing pinned.
+ * The rules further down only add the track, the pin and the dissolve on top of it.
+ *
+ * `100cqh` rather than `100svh`, LandingHero's reason: with no ancestor declaring size containment
+ * a container query length falls back to the small viewport, so on a real page the two are the same
+ * number — the small viewport, measured with the browser's chrome showing, so a phone's address bar
+ * coming and going never resizes the scene mid-scroll as `vh` would. What the container unit adds
+ * is a frame standing in for a window: the preview's frame declares `container-type: size`, and the
+ * scene measures against that rather than escaping it. The section's own `container-type` is
+ * `inline-size`, which answers no question about height, so the unit passes straight through it.
+ * A screen is a length no token holds, which is why it is written here.
+ *
+ * `min-block-size`, so a scene whose words run long grows rather than clipping them.
+ */
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__scene {
+  min-block-size: 100cqh;
+}
+
+/*
+ * The photograph fills its scene, edge to edge, cropped to fill — the scene is a shape the screen
+ * decided, and a photograph letterboxed in it would show the band through the gaps.
+ *
+ * Stacking order inside the scene, which `isolation` on the scene keeps to itself: the photograph
+ * at the back, the words over it. An integer with no unit, which is why it is here.
+ */
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__media {
+  inset: 0;
+  z-index: 0;
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__image {
+  block-size: 100%;
+  inline-size: 100%;
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__content {
+  z-index: 1;
+}
+
+/*
+ * The words sit straight on the photograph, in the ink the scene names.
+ *
+ * No scrim: the photograph is shown as it was taken, and the words are drawn in whichever ink it
+ * leaves room for — color.fg.on-media-light, near-black in both modes, over a light photograph such
+ * as a daylight sky, and the section's own color.fg.on-brand-strong, white, over a dark one. The
+ * photograph does not change with the theme, so neither ink does. The block cannot see the
+ * photograph, so the scene says which, and the author answers for the contrast.
+ *
+ * On the scene, so its title and its line take it together, and inherited through the scene even
+ * where the scroll lays the scenes out as `display: contents`.
+ */
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__scene[data-ink="dark"] {
+  color: var(--color-fg-on-media-light);
+}
+
+/*
+ * A title with nothing under it carries no step under it.
+ */
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__title:last-child {
+  margin-block-end: 0;
+}
+
+/*
+ * Where the words sit, the reference design's arrangement.
+ *
+ * Below 62rem — the reference's 992px, the same bound FeatureCards takes from it — the words are at
+ * the top of the stage and start at the edge, under the room a navigation bar takes: size.bar-height
+ * and the section's own step over it, about the reference's 112. From 62rem they are centred down
+ * the stage and still start at the edge, in a column capped at the heading group's measure: the
+ * reference design's later arrangement, which leaves the far side of the photograph to its subject
+ * rather than writing over the middle of it. On either side of the bound the words start, so the
+ * eye finds the same edge on every line and a photograph composed for one width holds at the other.
+ *
+ * Longhand because `var()` is not permitted in a container query condition; `61.9375rem` is the last
+ * width below that bound. The section declares the container, and these are rules on what is inside
+ * it, which is the only thing a container query can style.
+ */
+@container (max-width: 61.9375rem) {
+  :where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__scene {
+    justify-content: flex-start;
+    padding-block-start: calc(var(--size-bar-height) + var(--space-section-default));
+  }
+}
+
+/*
+ * The words keep to the page's content column.
+ *
+ * They start, from 62rem as below it, so on a wide window they would otherwise sit at the page's
+ * gutter while every section around them starts at the edge of size.content.max. The photograph
+ * still fills the band edge to edge; only the words and the action are inset, by the page's gutter or
+ * by however much the window is wider than the content column on each side, whichever is more —
+ * where the column starts in ImageBanner, FeatureCards and the rest.
+ *
+ * Named once on the section, because three boxes take it: each scene and the action in the plain
+ * fallback, and the stage, which carries the insets while the scroll drives the change-over.
+ */
+:where([data-dds-context="marketing"]) .dds-scenescrollword {
+  --dds-scenescrollword-column-inset: max(var(--space-inset-page), calc((100% - var(--size-content-max)) / 2));
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__scene,
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__action {
+  padding-inline: var(--dds-scenescrollword-column-inset);
+}
+
+/*
+ * The photographs are anchored at their foot, as the reference's are, so a crop takes from the sky
+ * rather than from the ground the scene stands on.
+ */
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__image {
+  object-position: bottom;
+}
+
+/*
+ * The change-over, scrubbed by the scroll.
+ *
+ * The section becomes the track: two and a half screens tall, `250cqh` (the small viewport on a
+ * real page, for the reason above). The stage pins to the top of the window for the length of it,
+ * a screen tall, with both scenes stacked in its one cell, the second over the first. That leaves a
+ * screen and a half of scrolling while the stage holds still, which is the reference design's
+ * 250vh track and its 150vh of travel, without `vh`.
+ *
+ * The section names a view timeline, and the second photograph dissolves in down it from 20% to
+ * 80% of `contain` — the stretch in which the track covers the whole window, which
+ * is exactly the stretch the stage is pinned for. The words run down the same timeline, and how is
+ * set out with them at the end of this file.
+ *
+ * The photograph takes the whole stretch, so the place changes under the words while they do. A fifth of the stretch is held still at each end, so a reader arriving sees
+ * the first scene settled and one leaving sees the second. The reference ran the change over the
+ * middle third of the section's whole pass; this is the same middle, measured on the pin.
+ *
+ * Linear, because the scroll is the easing. Only one end of each fade is written — the other is
+ * the element's own resting opacity — so nothing here restates full strength as a number, and
+ * opacity.hidden is the role for what a reveal fades from.
+ *
+ * Only for a reader who has not asked for less motion, and only where a scroll timeline exists —
+ * asked around the rules rather than undone after them, because an undoing reset that loses to a
+ * more specific rule leaves the movement running for exactly the reader who asked it not to. Both
+ * conditions false is the layout at the top of this file: two scenes, one after the other.
+ *
+ * The timeline and the pin both measure against the nearest scroll container, which is why nothing
+ * between the section and the page may clip with `overflow: hidden`: `hidden` makes a box a scroll
+ * container even when it never scrolls, which freezes the dissolve and unpins the stage. The stage
+ * clips with `overflow: clip`, which does neither.
+ */
+@keyframes dds-scenescrollword-arrive {
+  from {
+    opacity: var(--opacity-hidden);
+  }
+}
+
+@keyframes dds-scenescrollword-leave {
+  to {
+    opacity: var(--opacity-hidden);
+  }
+}
+
+@supports (animation-timeline: view()) {
+  @media (prefers-reduced-motion: no-preference) {
+    :where([data-dds-context="marketing"]) .dds-scenescrollword {
+      block-size: 250cqh;
+      view-timeline: --dds-scenescrollword-track block;
+    }
+
+    :where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__stage {
+      inset-block-start: 0;
+      min-block-size: 100cqh;
+      overflow: clip;
+      position: sticky;
+    }
+
+    :where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__scene[data-scene="second"] .dds-scenescrollword__media {
+      animation: dds-scenescrollword-arrive linear both;
+      animation-range: contain 20% contain 80%;
+      animation-timeline: --dds-scenescrollword-track;
+    }
+  }
+}
+
+/*
+ * The action sits right under the words, whichever scene's words are showing.
+ *
+ * It belongs to the section rather than to a scene, so it does not fade with either. While the
+ * scenes change over, both scenes' words are laid into one grid area of the stage — the scenes
+ * themselves step out of the way (`display: contents`), so their photographs and their words become
+ * the stage's own items — and that area is as tall as the taller of the two. The action is the row
+ * under it, at space.heading.description-actions, the step from words to what a reader can do: under
+ * the text on every screen, and still while the text changes over it.
+ *
+ * Below 62rem the words and the action sit at the top of the stage, under the room a navigation bar
+ * takes; from 62rem they are centred down the stage, the empty rows above and below sharing what is
+ * left, and start at the edge with the words on both sides of the bound. The stage carries the section's insets here, since the scenes that held them are contents.
+ *
+ * In the plain fallback, where the scenes stack, the action is the stage's last row, under the second
+ * scene, on the band's own ground, with its own insets.
+ */
+@supports (animation-timeline: view()) {
+  @media (prefers-reduced-motion: no-preference) {
+    :where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__stage {
+      grid-template-areas:
+        'words'
+        'action'
+        '.';
+      grid-template-columns: minmax(0, 1fr);
+      grid-template-rows: auto auto 1fr;
+      padding-block: calc(var(--size-bar-height) + var(--space-section-default)) var(--space-section-default);
+      padding-inline: var(--dds-scenescrollword-column-inset);
+    }
+
+    :where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__scene {
+      display: contents;
+    }
+
+    :where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__media {
+      inset: 0;
+      z-index: 0;
+    }
+
+    :where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__content {
+      grid-area: words;
+      z-index: 1;
+    }
+
+    :where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__action {
+      grid-area: action;
+      margin-block-start: var(--space-heading-description-actions);
+      padding: 0;
+      z-index: 1;
+    }
+  }
+}
+
+@container (min-width: 62rem) {
+  @supports (animation-timeline: view()) {
+    @media (prefers-reduced-motion: no-preference) {
+      :where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__stage {
+        grid-template-areas:
+          '.'
+          'words'
+          'action'
+          '.';
+        grid-template-rows: 1fr auto auto 1fr;
+        padding-block: var(--space-section-default);
+      }
+    }
+  }
+}
+
+/*
+ * One claim, one word changed.
+ *
+ * The word's slot stacks the scene's own word and the other scene's in one cell, so the slot is as
+ * wide as the wider of the two and both titles lay out alike — the shared words before and after
+ * it in the same places, the words starting at the same point, at every width and in either
+ * direction. `start` is the reading side, so in a right-to-left page the words share their right
+ * edge. The other scene's word holds its room and is never drawn; it is kept from assistive
+ * technology in the markup, since the heading it belongs to is read in full.
+ *
+ * Wherever the scroll does not drive the change-over this is all there is: two scenes one after
+ * the other, each with its whole heading, "Trade all day" and then "Trade all night".
+ */
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__word > * {
+  grid-area: 1 / 1;
+  justify-self: start;
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__word > [data-word="other"] {
+  visibility: hidden;
+}
+
+/*
+ * Under the scroll, the scenes' words do not fade as wholes, as SceneScroll's do. Both headings lie
+ * in the one area of the stage, the second exactly over the first, and:
+ *
+ *   the first scene's line fades out from 20% to 45%, as its words did;
+ *   the first scene's word fades out as the second's fades in, from 45% to 55% — the stretch in
+ *   which neither line is showing, so nothing but the word is moving;
+ *   the second scene's line fades in from 55% to 80%.
+ *
+ * The second heading's shared words, before the word and after it, are never drawn here: the
+ * first's hold still over the whole pass, and two copies of the same words crossing would dip at
+ * the middle. They keep their opacity rather than their visibility so they stay in the
+ * accessibility tree, and the second heading is read whole.
+ *
+ * The words cross rather than one waiting for the other, because they share a place: a gap where
+ * the claim is missing its word reads as a fault, the reference's reason for crossing them in
+ * a few hundredths of the pass. A tenth here, slow enough to be seen to change.
+ */
+@supports (animation-timeline: view()) {
+  @media (prefers-reduced-motion: no-preference) {
+    :where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__scene[data-scene="second"] .dds-scenescrollword__before,
+    :where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__scene[data-scene="second"] .dds-scenescrollword__after {
+      opacity: var(--opacity-hidden);
+    }
+
+    /*
+     * Where the scenes name different inks the shared words cannot hold still in the first scene's:
+     * near-black words would be left on a night photograph. So they cross with the word instead,
+     * the first scene's out as the second's come in, over the same tenth of the pass — the same
+     * words in the same place, so what is seen is the claim changing colour as one piece.
+     *
+     * The second scene's are given back their resting strength first: the rule above leaves them
+     * undrawn, and an arrival comes up to whatever the element rests at.
+     */
+    :where([data-dds-context="marketing"]) .dds-scenescrollword[data-ink-change] .dds-scenescrollword__scene[data-scene="first"] :is(.dds-scenescrollword__before, .dds-scenescrollword__after) {
+      animation: dds-scenescrollword-leave linear both;
+      animation-range: contain 45% contain 55%;
+      animation-timeline: --dds-scenescrollword-track;
+    }
+
+    :where([data-dds-context="marketing"]) .dds-scenescrollword[data-ink-change] .dds-scenescrollword__scene[data-scene="second"] :is(.dds-scenescrollword__before, .dds-scenescrollword__after) {
+      animation: dds-scenescrollword-arrive linear both;
+      animation-range: contain 45% contain 55%;
+      animation-timeline: --dds-scenescrollword-track;
+      opacity: initial;
+    }
+
+    :where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__scene[data-scene="first"] .dds-scenescrollword__description {
+      animation: dds-scenescrollword-leave linear both;
+      animation-range: contain 20% contain 45%;
+      animation-timeline: --dds-scenescrollword-track;
+    }
+
+    :where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__scene[data-scene="first"] .dds-scenescrollword__word {
+      animation: dds-scenescrollword-leave linear both;
+      animation-range: contain 45% contain 55%;
+      animation-timeline: --dds-scenescrollword-track;
+    }
+
+    :where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__scene[data-scene="second"] .dds-scenescrollword__word {
+      animation: dds-scenescrollword-arrive linear both;
+      animation-range: contain 45% contain 55%;
+      animation-timeline: --dds-scenescrollword-track;
+    }
+
+    :where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__scene[data-scene="second"] .dds-scenescrollword__description {
+      animation: dds-scenescrollword-arrive linear both;
+      animation-range: contain 55% contain 80%;
+      animation-timeline: --dds-scenescrollword-track;
+    }
+  }
+}
+
+/*
+ * From 62rem the words keep to half the stage.
+ *
+ * The words start at the edge and the photograph's subject is on the far side, but the heading
+ * group's measure alone is most of a laptop's width: a title in a few words ran three quarters of
+ * the way across and over the face it was meant to sit beside. Held to half the stage, or the
+ * heading group's measure where that is narrower, the title wraps in the words' own half and the
+ * other half is the subject's — the reference design's left column. Below 62rem the words run the
+ * width, at the top of a photograph whose subject is below them.
+ */
+@container (min-width: 62rem) {
+  :where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__content {
+    max-inline-size: min(var(--size-heading-group-max), 50%);
+  }
+}

package/dist/components/blocks/stats/Stats.d.ts

@@ -1,6 +1,7 @@
 import './Stats.css';
 import './stats-impl.css';
 import '../block-reveal.css';
+import '../block-pattern.css';
 import { type StatsProps } from './Stats.types.js';
 export type { StatsProps };
 /**
@@ -21,4 +22,4 @@ export type { StatsProps };
  *
  * `'use client'` for the count, the arrival, and `useId`, which names the region by its heading.
  */
-export declare function Stats({ ground, title, description, stats }: StatsProps): import("react").JSX.Element | null;
+export declare function Stats({ ground, background, title, description, stats, }: StatsProps): import("react").JSX.Element | null;