@deriv-com/dds-marketing 1.0.1 → 1.1.0

package/dist/components/blocks/team-grid/TeamGrid.types.d.ts

@@ -0,0 +1,51 @@
+import type { TeamGridMember } from '../../team-grid-data.js';
+export interface TeamGridOwnProps {
+    /**
+     * `page` — The default, and the page's own white. Most people sections have nothing to separate themselves from
+     * `subtle` — A quiet step off the page — the reference design's slate band — for a section that wants to read as its own. Painted as the band's tint laid over the page's own ground, so it is the same grey whatever is behind the section; the photographs' placeholder is raised to color.bg.surface-card-raised so it does not vanish into the band
+     * `strong` — `color.bg.brand-strong`, the dark band, for a section a reader should arrive at. The heading, the names and the roles turn white, the profile links take the band's ink rather than the brand's, and the button takes Button's inverse tone
+     */
+    ground?: 'page' | 'subtle' | 'strong';
+    /** Always. Who these people are, in the fewest words — "Meet our leadership team". It names the section as a region, so a screen reader can jump to it and past it. */
+    title: string;
+    /** A line saying who the set is, when the title alone does not — "The people steering Deriv's products, markets and teams". */
+    description?: string;
+    /** Always. The people, in the order the page wants them read — by seniority or by relevance, the first `collapsedCount` of them showing at once. Each has a name, a role, a picture with its `alt`, and where there is one a `profile` link. The same framing in every photograph: the grid crops each to a square, and a set of faces at different distances reads as a set of different sources. An empty list draws the heading alone. */
+    people: TeamGridMember[];
+    /** How many people show before the rest are asked for. Four, the default, is one row at full width, so the button sits under a complete row. A list no longer than this has no button at all — there is nothing more to show. */
+    collapsedCount?: number;
+    /** The button's words while the rest of the list is hidden. Translate it with the page, and keep it parallel to collapseLabel. */
+    expandLabel?: string;
+    /** The button's words once the whole list is showing, for the reason expandLabel exists. */
+    collapseLabel?: string;
+    /** The accessible name of a person's profile link, given the person. The visible word is the profile's own — "LinkedIn" — and it is the same on every card, so the link is named for its person too. Without this the name is the profile's label and then the person's, "LinkedIn, Alex Morgan": the visible word first, so a reader using speech can say what they see. Pass it to translate that with the page. */
+    profileName?: (person: TeamGridMember) => string;
+    /** Said after every profile link's name, because a profile opens in a new tab and a reader should know before they press it — ResourceBanner's words for the same thing. Translate it with the page. */
+    externalLabel?: string;
+}
+export type TeamGridProps = TeamGridOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const teamGridParts: {
+    readonly root: "dds-teamgrid";
+    readonly inner: "dds-teamgrid__inner";
+    readonly header: "dds-teamgrid__header";
+    readonly title: "dds-teamgrid__title";
+    readonly description: "dds-teamgrid__description";
+    readonly people: "dds-teamgrid__people";
+    readonly list: "dds-teamgrid__list";
+    readonly item: "dds-teamgrid__item";
+    readonly media: "dds-teamgrid__media";
+    readonly text: "dds-teamgrid__text";
+    readonly name: "dds-teamgrid__name";
+    readonly role: "dds-teamgrid__role";
+    readonly profile: "dds-teamgrid__profile";
+    readonly actions: "dds-teamgrid__actions";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const teamGridDefaults: {
+    readonly ground: "page";
+    readonly collapsedCount: 4;
+    readonly expandLabel: "View all";
+    readonly collapseLabel: "View less";
+    readonly externalLabel: "(opens in a new tab)";
+};

package/dist/components/blocks/team-grid/TeamGrid.types.js

@@ -0,0 +1,20 @@
+// GENERATED from team-grid.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const teamGridParts = {
+    root: 'dds-teamgrid',
+    inner: 'dds-teamgrid__inner',
+    header: 'dds-teamgrid__header',
+    title: 'dds-teamgrid__title',
+    description: 'dds-teamgrid__description',
+    people: 'dds-teamgrid__people',
+    list: 'dds-teamgrid__list',
+    item: 'dds-teamgrid__item',
+    media: 'dds-teamgrid__media',
+    text: 'dds-teamgrid__text',
+    name: 'dds-teamgrid__name',
+    role: 'dds-teamgrid__role',
+    profile: 'dds-teamgrid__profile',
+    actions: 'dds-teamgrid__actions',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const teamGridDefaults = { ground: 'page', collapsedCount: 4, expandLabel: 'View all', collapseLabel: 'View less', externalLabel: '(opens in a new tab)' };

package/dist/components/blocks/team-grid/team-grid-impl.css

@@ -0,0 +1,129 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ */
+
+/*
+ * The header starts on a phone and is centred once the band is wide enough to hold a line.
+ *
+ * FeatureCards' rule and its reason: centred text starts every line at a different edge, which
+ * costs little across a wide measure and a great deal across a narrow one. The header and the line
+ * under it are capped narrower than the column, so `margin-inline: auto` is what centres those
+ * boxes rather than their words inside a box left at the start edge.
+ *
+ * `48rem` longhand because `var()` is not permitted in a container query condition, and it is the
+ * width the rest of this package folds at.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-teamgrid .dds-teamgrid__header {
+    align-items: center;
+    margin-inline: auto;
+    text-align: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-teamgrid .dds-teamgrid__description {
+    margin-inline: auto;
+  }
+}
+
+/*
+ * One column on a phone, two from the fold, four at full width — the reference design's grid, so
+ * the four people showing at first are one row on a desktop. `minmax(0, 1fr)` rather than `1fr`, so
+ * a long unbroken name shrinks to its column instead of pushing the grid past the page.
+ *
+ * Four from 64rem rather than FeatureCards' 62rem: four photographs and four names a row want the
+ * extra width, and below it two a row keeps each face large enough to be one.
+ */
+:where([data-dds-context="marketing"]) .dds-teamgrid .dds-teamgrid__list {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-teamgrid .dds-teamgrid__list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@container (min-width: 64rem) {
+  :where([data-dds-context="marketing"]) .dds-teamgrid .dds-teamgrid__list {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+/*
+ * A person waiting behind the button is not there at all.
+ *
+ * The item is a flex column by its contract, and an author's `display` beats the browser's own
+ * `[hidden] { display: none }` — so without this the attribute would take a person out of the
+ * accessibility tree while leaving them drawn on the page.
+ */
+:where([data-dds-context="marketing"]) .dds-teamgrid .dds-teamgrid__item[hidden] {
+  display: none;
+}
+
+/*
+ * And arrives when the button shows them: faded up from opacity.hidden and risen
+ * motion.translate.reveal, the arrival every block makes, a stagger step behind the person before.
+ *
+ * A keyframe rather than a transition because the person was `display: none` a moment earlier and
+ * a transition has no painted starting state to move from — the same reason a block's entrance is
+ * keyframed. `both`, so a person waiting out their delay waits at the start rather than showing
+ * and then jumping back to it. The reference also grew the grid's height open; that needs the
+ * extras in a second list, and one list a screen reader counts is worth more than the slide.
+ */
+@keyframes dds-teamgrid-arrive {
+  from {
+    opacity: var(--opacity-hidden);
+    translate: var(--motion-translate-reveal);
+  }
+}
+
+:where([data-dds-context="marketing"]) .dds-teamgrid .dds-teamgrid__item[data-extra]:not([hidden]) {
+  animation: dds-teamgrid-arrive var(--motion-duration-reveal) var(--motion-easing-reveal) both;
+  animation-delay: calc(var(--dds-teamgrid-extra-at, 0) * var(--motion-duration-stagger));
+}
+
+/*
+ * A reader who asked for less movement gets the people without the arrival: they are simply there
+ * the moment the button is pressed.
+ */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-teamgrid .dds-teamgrid__item[data-extra]:not([hidden]) {
+    animation: none;
+  }
+}
+
+/*
+ * The photograph's frame takes the whole of the card's width; AspectRatio inside it holds the
+ * square and the frame's clip rounds the corners of whatever the picture is.
+ */
+:where([data-dds-context="marketing"]) .dds-teamgrid .dds-teamgrid__media {
+  inline-size: 100%;
+}
+
+/*
+ * A profile link is a pointer target, so it is at least size.target.min tall. A standalone Link is
+ * as tall as its line, which is under that at the label step — the profile part holds the height
+ * and the link fills it, so the whole of the row is the target rather than the words alone.
+ */
+:where([data-dds-context="marketing"]) .dds-teamgrid .dds-teamgrid__profile > .dds-link {
+  min-block-size: var(--size-target-min);
+}
+
+/*
+ * The button fills the column on a phone, the rule for a section's actions — the part is a column,
+ * which stretches it. From the fold it is its own width, centred under the grid it lengthens.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-teamgrid .dds-teamgrid__actions {
+    align-items: center;
+  }
+}
+
+/*
+ * A heading with no line under it closes up: its bound step is the distance to the line, and with
+ * nothing there it would only add to the step from the header to the people. `:last-child` is the
+ * condition itself, DataTable's way, rather than a prop standing in for it.
+ */
+:where([data-dds-context="marketing"]) .dds-teamgrid .dds-teamgrid__title:last-child {
+  margin-block-end: 0;
+}

package/dist/components/blocks/testimonial-row/TestimonialRow.css

@@ -7,6 +7,7 @@
   inline-size: 100%;
   justify-content: center;
   overflow: clip;
+  overflow-wrap: anywhere;
 }
 
 :where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__inner {

package/dist/components/blocks/testimonial-row/TestimonialRow.d.ts

@@ -17,4 +17,4 @@ export type { TestimonialRowProps };
  * `'use client'` for the row's scroll position, the arrival, and `useId`, which names the region
  * by its heading.
  */
-export declare function TestimonialRow({ ground, title, reviews, summary, ratingLabel, label, previousLabel, nextLabel, }: TestimonialRowProps): import("react").JSX.Element | null;
+export declare function TestimonialRow({ ground, title, reviews, summary, ratingLabel, label, externalLabel, previousLabel, nextLabel, }: TestimonialRowProps): import("react").JSX.Element | null;

package/dist/components/blocks/testimonial-row/TestimonialRow.js

@@ -8,6 +8,7 @@ import "../block-reveal.css";
 import { given } from "../../given.js";
 import { ButtonIcon } from "../../core/button-icon/ButtonIcon.js";
 import { Link } from "../../core/link/Link.js";
+import { visuallyHidden } from "../../visually-hidden.js";
 import { arriving, useReveal } from "../use-reveal.js";
 import { testimonialRowDefaults, testimonialRowParts, } from "./TestimonialRow.types.js";
 /**
@@ -45,7 +46,7 @@ const AT_END = 2;
  * `'use client'` for the row's scroll position, the arrival, and `useId`, which names the region
  * by its heading.
  */
-export function TestimonialRow({ ground = testimonialRowDefaults.ground, title, reviews, summary, ratingLabel, label = testimonialRowDefaults.label, previousLabel = testimonialRowDefaults.previousLabel, nextLabel = testimonialRowDefaults.nextLabel, }) {
+export function TestimonialRow({ ground = testimonialRowDefaults.ground, title, reviews, summary, ratingLabel, label = testimonialRowDefaults.label, externalLabel = testimonialRowDefaults.externalLabel, previousLabel = testimonialRowDefaults.previousLabel, nextLabel = testimonialRowDefaults.nextLabel, }) {
     const titleId = useId();
     const [band, revealed] = useReveal();
     const row = useRef(null);
@@ -116,13 +117,13 @@ export function TestimonialRow({ ground = testimonialRowDefaults.ground, title,
     return (_jsx("section", { className: testimonialRowParts.root, "data-ground": ground, "aria-labelledby": titleId, children: _jsxs("div", { className: testimonialRowParts.inner, ref: band, "data-revealed": revealed, children: [_jsxs("div", { className: testimonialRowParts.header, children: [_jsx("h2", { className: testimonialRowParts.title, id: titleId, ...arriving(0), children: title }), summary === undefined ? null : (_jsx("p", { className: testimonialRowParts.summary, ...arriving(1), children: summary.href !== undefined && given(summary.href) ? (
                             // A link on its own line, so the standalone one: brand ink and a mark. On the dark
                             // band it takes the band's ink, where coral is the wrong colour for words.
-                            _jsx(Link, { variant: "standalone", tone: ground === "strong" ? "inherit" : "brand", external: true, href: summary.href, children: summary.label })) : (_jsx("span", { children: summary.label })) }))] }), _jsxs("div", { className: testimonialRowParts.carousel, children: [_jsx("div", { ref: row, className: testimonialRowParts.track, role: "group", "aria-label": label, tabIndex: 0, onScroll: read, ...arriving(2), children: reviews.map((each, at) => {
+                            _jsxs(Link, { variant: "standalone", tone: ground === "strong" ? "inherit" : "brand", external: true, href: summary.href, children: [summary.label, _jsx("span", { style: visuallyHidden, children: ` ${externalLabel}` })] })) : (_jsx("span", { children: summary.label })) }))] }), _jsxs("div", { className: testimonialRowParts.carousel, children: [_jsx("div", { ref: row, className: testimonialRowParts.track, role: "group", "aria-label": label, tabIndex: 0, onScroll: read, ...arriving(2), children: reviews.map((each, at) => {
                                 // A review's position is its identity: the set is a list, and nothing reorders it.
                                 const card = (_jsxs("figure", { className: testimonialRowParts.item, children: [each.rating === undefined ? null : (
                                         // Named by the score it is drawn at, so a 4.3 is heard as the 4.5 a reader
                                         // sees rather than as a number the stars do not show.
                                         _jsx(Rating, { score: each.rating, label: ratingLabel?.(toHalves(each.rating)) ?? `Rated ${toHalves(each.rating)} out of 5` })), _jsx("blockquote", { className: testimonialRowParts.quote, children: each.quote }), _jsx("figcaption", { className: testimonialRowParts.author, children: _jsxs("span", { children: [_jsx("span", { className: testimonialRowParts.name, children: each.name }), given(each.detail) ? (_jsx("span", { className: testimonialRowParts.detail, children: each.detail })) : null] }) })] }, at));
                                 // The review is on a service the page does not own, so it opens beside the page.
-                                return given(each.href) ? (_jsx("a", { className: testimonialRowParts["review-link"], href: each.href, target: "_blank", rel: "noopener noreferrer", children: card }, at)) : (card);
+                                return given(each.href) ? (_jsxs("a", { className: testimonialRowParts["review-link"], href: each.href, target: "_blank", rel: "noopener noreferrer", children: [card, _jsx("span", { style: visuallyHidden, children: ` ${externalLabel}` })] }, at)) : (card);
                             }) }), reviews.length > 1 ? (_jsx("div", { className: testimonialRowParts.footer, ...arriving(3), children: _jsxs("div", { className: testimonialRowParts.nav, hidden: !scrolls, children: [_jsx("span", { ref: back, className: testimonialRowParts["nav-slot"], "data-available": ends.back, inert: !ends.back, children: _jsx(ButtonIcon, { icon: _jsx(ChevronLeftRegularIcon, {}), label: previousLabel, ...arrow, onClick: () => step(-1) }) }), _jsx("span", { ref: on, className: testimonialRowParts["nav-slot"], "data-available": ends.on, inert: !ends.on, children: _jsx(ButtonIcon, { icon: _jsx(ChevronRightRegularIcon, {}), label: nextLabel, ...arrow, onClick: () => step(1) }) })] }) })) : null] })] }) }));
 }

package/dist/components/blocks/testimonial-row/TestimonialRow.types.d.ts

@@ -20,6 +20,8 @@ export interface TestimonialRowOwnProps {
     previousLabel?: string;
     /** The accessible name of the arrow stepping the row on, for the reason previousLabel exists. */
     nextLabel?: string;
+    /** Said after the summary link and every linked review, because both open on a service the page does not own, in a new tab, and a reader should know before they press — TeamGrid's and ResourceBanner's words for the same thing. Translate it with the page. */
+    externalLabel?: string;
 }
 export type TestimonialRowProps = TestimonialRowOwnProps;
 /** The class each part carries. Apply these — do not retype them. */
@@ -51,4 +53,5 @@ export declare const testimonialRowDefaults: {
     readonly label: "Reviews";
     readonly previousLabel: "Previous reviews";
     readonly nextLabel: "Next reviews";
+    readonly externalLabel: "(opens in a new tab)";
 };

package/dist/components/blocks/testimonial-row/TestimonialRow.types.js

@@ -23,4 +23,4 @@ export const testimonialRowParts = {
     'nav-slot': 'dds-testimonialrow__nav-slot',
 };
 /** Generated so defaults cannot drift from the contract. */
-export const testimonialRowDefaults = { ground: 'page', label: 'Reviews', previousLabel: 'Previous reviews', nextLabel: 'Next reviews' };
+export const testimonialRowDefaults = { ground: 'page', label: 'Reviews', previousLabel: 'Previous reviews', nextLabel: 'Next reviews', externalLabel: '(opens in a new tab)' };

package/dist/components/blocks/testimonial-row/testimonial-row-impl.css

@@ -193,3 +193,11 @@
 :where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__nav-slot[data-available='false'] {
   opacity: var(--opacity-disabled);
 }
+
+/*
+ * Previous and next point along the row. A right-to-left row puts previous on the right, so the
+ * chevrons are mirrored to point the way each one moves; as they ship, both pointed backwards.
+ */
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__nav-slot svg:dir(rtl) {
+  scale: -1 1;
+}

package/dist/components/blocks/testimonial-slider/TestimonialSlider.css

@@ -7,6 +7,7 @@
   inline-size: 100%;
   justify-content: center;
   overflow: clip;
+  overflow-wrap: anywhere;
 }
 
 :where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__inner {

package/dist/components/blocks/testimonial-slider/TestimonialSlider.d.ts

@@ -19,4 +19,4 @@ export type { TestimonialSliderProps };
  * comes into view. `'use client'` for that, for the rotation, and for `useId`, which names the
  * region by its heading.
  */
-export declare function TestimonialSlider({ ground, title, quotes, imageStart, imageEnd, autoplay, controlsLabel, slideLabel, }: TestimonialSliderProps): import("react").JSX.Element | null;
+export declare function TestimonialSlider({ ground, title, quotes, imageStart, imageEnd, autoplay, controlsLabel, slideLabel, roleDescription, slideRoleDescription, positionLabel, }: TestimonialSliderProps): import("react").JSX.Element | null;

package/dist/components/blocks/testimonial-slider/TestimonialSlider.js

@@ -25,10 +25,10 @@ import { testimonialSliderDefaults, testimonialSliderParts, } from "./Testimonia
  * comes into view. `'use client'` for that, for the rotation, and for `useId`, which names the
  * region by its heading.
  */
-export function TestimonialSlider({ ground = testimonialSliderDefaults.ground, title, quotes, imageStart, imageEnd, autoplay = testimonialSliderDefaults.autoplay, controlsLabel = testimonialSliderDefaults.controlsLabel, slideLabel = testimonialSliderDefaults.slideLabel, }) {
+export function TestimonialSlider({ ground = testimonialSliderDefaults.ground, title, quotes, imageStart, imageEnd, autoplay = testimonialSliderDefaults.autoplay, controlsLabel = testimonialSliderDefaults.controlsLabel, slideLabel = testimonialSliderDefaults.slideLabel, roleDescription = testimonialSliderDefaults.roleDescription, slideRoleDescription = testimonialSliderDefaults.slideRoleDescription, positionLabel, }) {
     const titleId = useId();
     const [band, revealed] = useReveal();
-    const { rotating, root, region, track, item, away, dots } = useRotation(quotes.length, autoplay);
+    const { rotating, root, region, track, item, away, dots } = useRotation(quotes.length, autoplay, { roleDescription, slideRoleDescription, positionLabel });
     // Nothing to show is nothing drawn: a named region with no quote in it leads nowhere.
     if (quotes.length === 0)
         return null;

package/dist/components/blocks/testimonial-slider/TestimonialSlider.types.d.ts

@@ -20,6 +20,12 @@ export interface TestimonialSliderOwnProps {
     controlsLabel?: string;
     /** The word each dot is announced by, before its number — 'Slide 2'. Translate it with the page, as controlsLabel is; a page that translates only the group's name still has every dot announced in English. */
     slideLabel?: string;
+    /** What a screen reader calls the set while it rotates — announced in place of a region, as the word for this kind of thing. Translate it with the page: it is read out as given, so an untranslated one announces an English word on every page in every language. */
+    roleDescription?: string;
+    /** What a screen reader calls each item while the set rotates, for the reason roleDescription exists. Translate it with the page. */
+    slideRoleDescription?: string;
+    /** The accessible name of each item while the set rotates, given its place in the set counting from one — so a reader hears where they are. Without it each is named "2 of 5"; pass it to translate that with the page, in that language's own order and digits. */
+    positionLabel?: (position: number, count: number) => string;
 }
 export type TestimonialSliderProps = TestimonialSliderOwnProps;
 /** The class each part carries. Apply these — do not retype them. */
@@ -46,4 +52,6 @@ export declare const testimonialSliderDefaults: {
     readonly autoplay: false;
     readonly controlsLabel: "Testimonials";
     readonly slideLabel: "Slide";
+    readonly roleDescription: "carousel";
+    readonly slideRoleDescription: "slide";
 };

package/dist/components/blocks/testimonial-slider/TestimonialSlider.types.js

@@ -18,4 +18,4 @@ export const testimonialSliderParts = {
     controls: 'dds-testimonialslider__controls',
 };
 /** Generated so defaults cannot drift from the contract. */
-export const testimonialSliderDefaults = { ground: 'page', autoplay: false, controlsLabel: 'Testimonials', slideLabel: 'Slide' };
+export const testimonialSliderDefaults = { ground: 'page', autoplay: false, controlsLabel: 'Testimonials', slideLabel: 'Slide', roleDescription: 'carousel', slideRoleDescription: 'slide' };

package/dist/components/blocks/text-scroll/TextScroll.css

@@ -0,0 +1,53 @@
+/* GENERATED from textscroll.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-textscroll {
+  box-sizing: border-box;
+  container-type: inline-size;
+  display: flex;
+  inline-size: 100%;
+  justify-content: center;
+  overflow-wrap: anywhere;
+}
+
+:where([data-dds-context="marketing"]) .dds-textscroll .dds-textscroll__inner {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  min-inline-size: 0;
+  max-inline-size: var(--size-content-max);
+  padding-block: var(--space-section-default);
+  padding-inline: var(--space-inset-page);
+}
+
+:where([data-dds-context="marketing"]) .dds-textscroll .dds-textscroll__text {
+  margin-block: 0;
+  text-wrap: pretty;
+  font-family: var(--font-h4-family);
+  font-size: var(--font-h4-size);
+  font-weight: var(--font-h4-weight);
+  letter-spacing: var(--font-h4-letter-spacing);
+  line-height: var(--font-h4-line-height);
+  max-inline-size: var(--size-measure-hero-heading);
+}
+
+:where([data-dds-context="marketing"]) .dds-textscroll .dds-textscroll__word {
+  display: inline;
+}
+
+:where([data-dds-context="marketing"]) .dds-textscroll[data-ground="page"] {
+  background-color: var(--color-bg-page);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-textscroll[data-ground="strong"] {
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-textscroll[data-ground="subtle"] {
+  background-color: var(--color-bg-page);
+  background-image: linear-gradient(var(--color-bg-band-subtle), var(--color-bg-band-subtle));
+  color: var(--color-fg-default);
+}
+

package/dist/components/blocks/text-scroll/TextScroll.d.ts

@@ -0,0 +1,5 @@
+import './TextScroll.css';
+import './text-scroll-impl.css';
+import { type TextScrollProps } from './TextScroll.types.js';
+export type { TextScrollProps };
+export declare function TextScroll({ ground, text }: TextScrollProps): import("react").JSX.Element | null;

package/dist/components/blocks/text-scroll/TextScroll.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import './TextScroll.css';
+import './text-scroll-impl.css';
+import { textScrollDefaults, textScrollParts } from './TextScroll.types.js';
+const SPACE = /^\s+$/u;
+/**
+ * The sentence in words and the spaces between them, every character kept.
+ *
+ * By the language's own word boundaries rather than by spaces. Chinese, Japanese and Thai write
+ * none between words, so a split on whitespace handed the whole paragraph back as one word and it
+ * brightened all at once. `Intl.Segmenter` knows where their words end, in the browser and on the
+ * server alike.
+ *
+ * The spaces are kept as written rather than rebuilt as one ordinary space: French sets a narrow
+ * no-break space before `?` and `%`, and turning it into a breaking one let the line wrap before
+ * the punctuation it exists to hold on to. Punctuation rides with the word beside it, so a full
+ * stop brightens with its word instead of standing lit on its own.
+ */
+function piecesOf(text) {
+    const runs = typeof Intl !== 'undefined' && 'Segmenter' in Intl
+        ? Array.from(new Intl.Segmenter(undefined, { granularity: 'word' }).segment(text), (each) => ({
+            text: each.segment,
+            wordLike: each.isWordLike === true,
+        }))
+        : text.split(/(\s+)/u).map((run) => ({ text: run, wordLike: !SPACE.test(run) }));
+    const pieces = [];
+    // The word being built, and whether it holds a word yet or only punctuation leading into one.
+    let open = null;
+    const close = () => {
+        if (open !== null)
+            pieces.push({ word: true, text: open.text });
+        open = null;
+    };
+    for (const run of runs) {
+        if (run.text === '')
+            continue;
+        if (SPACE.test(run.text)) {
+            close();
+            pieces.push({ word: false, text: run.text });
+        }
+        else if (run.wordLike && open?.holdsWord) {
+            // Two words with nothing between them — the ordinary case in a script that writes no spaces.
+            close();
+            open = { text: run.text, holdsWord: true };
+        }
+        else if (open === null) {
+            open = { text: run.text, holdsWord: run.wordLike };
+        }
+        else {
+            open = { text: open.text + run.text, holdsWord: open.holdsWord || run.wordLike };
+        }
+    }
+    close();
+    return pieces;
+}
+export function TextScroll({ ground = textScrollDefaults.ground, text }) {
+    const pieces = piecesOf(text.trim());
+    const count = pieces.filter((piece) => piece.word).length;
+    // Nothing to say is nothing drawn: an empty band between two sections is a gap, not a pause.
+    if (count === 0)
+        return null;
+    let at = -1;
+    return (_jsx("section", { className: textScrollParts.root, "data-ground": ground, children: _jsx("div", { className: textScrollParts.inner, children: _jsx("p", { className: textScrollParts.text, style: { '--dds-textscroll-words': count }, children: pieces.map((piece, index) => {
+                    // A piece's place is its identity: the sentence is the page's, and nothing reorders it.
+                    if (!piece.word)
+                        return _jsx(Fragment, { children: piece.text }, index);
+                    at += 1;
+                    return (_jsx("span", { className: textScrollParts.word, style: { '--dds-textscroll-at': at }, children: piece.text }, index));
+                }) }) }) }));
+}

package/dist/components/blocks/text-scroll/TextScroll.types.d.ts

@@ -0,0 +1,22 @@
+export interface TextScrollOwnProps {
+    /**
+     * `page` — The default, and the page's own white. A statement between two sections that need nothing to separate them
+     * `subtle` — The grey band, for a statement that should read as a section of its own without changing the page's voice. Painted as the band's tint laid over the page's own ground, so it is the same grey whatever is behind the section
+     * `strong` — `color.bg.brand-strong`, the dark band, for the statement a page is built around — the mission on an About page. The words turn white and dim toward the band
+     */
+    ground?: 'page' | 'subtle' | 'strong';
+    /** Always. The statement, as plain text — one sentence or two short ones, under about three hundred characters. Split into words on its whitespace, so a run of spaces or a line break is one space in what is drawn. Written so it reads well a word at a time, because that is how the reveal delivers it: "We believe trading should be accessible to everyone, everywhere, with the tools and the trust to do it well." */
+    text: string;
+}
+export type TextScrollProps = TextScrollOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const textScrollParts: {
+    readonly root: "dds-textscroll";
+    readonly inner: "dds-textscroll__inner";
+    readonly text: "dds-textscroll__text";
+    readonly word: "dds-textscroll__word";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const textScrollDefaults: {
+    readonly ground: "page";
+};

package/dist/components/blocks/text-scroll/TextScroll.types.js

@@ -0,0 +1,10 @@
+// GENERATED from text-scroll.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const textScrollParts = {
+    root: 'dds-textscroll',
+    inner: 'dds-textscroll__inner',
+    text: 'dds-textscroll__text',
+    word: 'dds-textscroll__word',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const textScrollDefaults = { ground: 'page' };

package/dist/components/blocks/text-scroll/text-scroll-impl.css

@@ -0,0 +1,115 @@
+/*
+ * 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.
+ */
+
+/*
+ * Centred from the fold, and at the start on a phone — the section-title rule and its reason: on a
+ * phone the measure is the screen, and a centred statement wraps to ragged lines whose left edge
+ * the eye loses. The reference design turns at 768px, which is this package's `48rem`.
+ *
+ * The paragraph is held to a measure, so centring its words is half of it: the capped box has to
+ * come to the middle as well, or the lines are centred inside a column sitting at the start.
+ *
+ * `48rem` longhand because `var()` is not permitted in a container query condition.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-textscroll .dds-textscroll__text {
+    margin-inline: auto;
+    text-align: center;
+  }
+}
+
+/*
+ * The words brighten with the scroll, one after another.
+ *
+ * The section names a view timeline, and every word runs down it from opacity.track — the dimmed
+ * share of the same ink, which is the job that role already does for a track behind what travels
+ * over it — up to the full strength it has at rest. Scroll-driven, so the reveal moves forward as
+ * the reader scrolls down and back as they scroll up, and stands still while the page does. Linear,
+ * because the scroll is the easing; a curve here would be a second one on top of the reader's own.
+ * Only `from` is written: the end of the animation is the word's own resting opacity, so nothing
+ * here restates full strength as a number.
+ *
+ * The window runs from the section's top edge a quarter of the way up the viewport to its bottom
+ * edge reaching the viewport's foot. On the `cover` range that is `25vh` in from the start to
+ * `100% - 100vh` — the section's own height. The reference design ran it until the bottom edge
+ * crossed the middle of the viewport instead, and that is a point a page cannot always reach: as
+ * the last section, or above less than half a screen of page, the last words stayed dim for good,
+ * at about 1.6:1. The bottom edge reaching the foot of the viewport is the one end every section
+ * can be scrolled to. The start is held to the end where a section is shorter than a quarter of the
+ * viewport, so the window never runs backwards.
+ *
+ * Each word takes its own stretch of that window, the reference's stagger said as arithmetic. There
+ * a word brightened over five steps and the next one started a step later, so a word is still
+ * coming up while the four after it begin and the front of the reveal is a soft edge rather than a
+ * hard one. With `n` words that is `n + 4` steps in all: a word at place `i` starts at step `i` and
+ * lands at step `i + 5`. The place and the count are set on the word and the paragraph by the
+ * component, the only two numbers that change from one statement to the next.
+ *
+ * The timeline measures 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, and the words would then sit wherever they started however far the
+ * page moved. Clip with `overflow: clip` instead.
+ *
+ * A browser with no scroll timeline never applies the dim at all, so every word is at full strength
+ * from the start, which is the whole of the fallback — and the same is true before any script,
+ * because nothing here waits for one.
+ */
+@keyframes dds-textscroll-brighten {
+  from {
+    opacity: var(--opacity-track);
+  }
+}
+
+@supports (animation-timeline: view()) {
+  :where([data-dds-context="marketing"]) .dds-textscroll {
+    view-timeline: --dds-textscroll-pass block;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-textscroll .dds-textscroll__word {
+    /* How many steps a word takes to come up; the next word starts one step after it. */
+    --dds-textscroll-span: 5;
+    --dds-textscroll-steps: calc(var(--dds-textscroll-words) + var(--dds-textscroll-span) - 1);
+    --dds-textscroll-to: calc(100% - 100vh);
+    --dds-textscroll-from: min(25vh, var(--dds-textscroll-to));
+    --dds-textscroll-step: calc((var(--dds-textscroll-to) - var(--dds-textscroll-from)) / var(--dds-textscroll-steps));
+    animation: dds-textscroll-brighten linear both;
+    animation-range:
+      cover calc(var(--dds-textscroll-from) + var(--dds-textscroll-step) * var(--dds-textscroll-at))
+      cover calc(var(--dds-textscroll-from) + var(--dds-textscroll-step) * (var(--dds-textscroll-at) + var(--dds-textscroll-span)));
+    animation-timeline: --dds-textscroll-pass;
+  }
+}
+
+/*
+ * A reader who asked for less movement gets none of it: the whole statement at full strength and
+ * still, exactly as it is in a browser that cannot scroll-drive it.
+ */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-textscroll .dds-textscroll__word {
+    animation: none;
+  }
+}
+
+/*
+ * On a phone the statement takes the h3 step rather than h4.
+ *
+ * h4 there is 24px, the size of a card's title, and this is the one thing the band says, the width of
+ * the screen to itself — set at h4 it read as a caption waiting for something bigger. h3 is 32px on a
+ * phone. From the fold it is h4 again, 36px, the reference's size, where the wider measure already
+ * gives the line its presence. The whole h3 step, its heavier weight too, so the phone's line is
+ * one of the scale's steps rather than h4's weight at h3's size.
+ *
+ * `47.9375rem` is the last width below the fold, LogoRows' bound.
+ */
+@container (max-width: 47.9375rem) {
+  :where([data-dds-context="marketing"]) .dds-textscroll .dds-textscroll__text {
+    font-size: var(--font-h3-size);
+    font-weight: var(--font-h3-weight);
+    letter-spacing: var(--font-h3-letter-spacing);
+    line-height: var(--font-h3-line-height);
+  }
+}