@deriv-com/dds-marketing 0.2.0 → 1.0.1

package/dist/components/blocks/feature-cards/FeatureCards.css

@@ -0,0 +1,84 @@
+/* GENERATED from featurecards.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-featurecards {
+  box-sizing: border-box;
+  container-type: inline-size;
+  display: flex;
+  inline-size: 100%;
+  justify-content: center;
+}
+
+:where([data-dds-context="marketing"]) .dds-featurecards .dds-featurecards__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);
+  row-gap: var(--space-heading-content);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurecards .dds-featurecards__header {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  max-inline-size: var(--size-measure-heading);
+  row-gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurecards .dds-featurecards__title {
+  margin-block: 0;
+  text-wrap: balance;
+  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);
+  margin-block-end: var(--space-heading-title-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurecards .dds-featurecards__description {
+  margin-block: 0;
+  font-family: var(--font-body-md-family);
+  font-size: var(--font-body-md-size);
+  font-weight: var(--font-body-md-weight);
+  letter-spacing: var(--font-body-md-letter-spacing);
+  line-height: var(--font-body-md-line-height);
+  max-inline-size: var(--size-measure-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurecards .dds-featurecards__link {
+  display: flex;
+  margin-block-start: var(--space-heading-description-actions);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurecards .dds-featurecards__grid {
+  display: grid;
+  min-inline-size: 0;
+  column-gap: var(--space-grid-gutter);
+  row-gap: var(--space-grid-gutter);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurecards .dds-featurecards__item {
+  display: grid;
+  min-inline-size: 0;
+}
+
+:where([data-dds-context="marketing"]) .dds-featurecards[data-ground="page"] {
+  background-color: var(--color-bg-page);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurecards[data-ground="strong"] {
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurecards[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/feature-cards/FeatureCards.d.ts

@@ -0,0 +1,24 @@
+import './FeatureCards.css';
+import './feature-cards-impl.css';
+import '../block-reveal.css';
+import { type FeatureCardsProps } from './FeatureCards.types.js';
+export type { FeatureCardsProps };
+/**
+ * A heading over a grid of cards — the reference site's FeatureCards in its grid form.
+ *
+ * The cards are the page's own Card or CardButton, each holding a CardBody, rather than records
+ * this draws. A card already says everything a card can say — its fill, its picture, its mark,
+ * whether the whole of it is pressed — and a list of records here would be a second, smaller Card
+ * API to keep in step with the first. What this decides is the rest: the heading, the column, and
+ * how many cards share a row.
+ *
+ * The row is read from the cards. One column on a phone and two from the fold; at full width three,
+ * four when there are exactly four, and one or two held to two thirds of the row, centred. A card
+ * alone lays its words beside a portrait picture. The stylesheet asks all of it of the markup — the
+ * count is already there, and a prop restating it is a second place for the two to disagree.
+ *
+ * It arrives the way every block does: the heading, the line and the way on, then each card's cell
+ * a step behind the one before, in reading order. `'use client'` for that and for `useId`, which
+ * names the region by its heading.
+ */
+export declare function FeatureCards({ ground, title, description, link, children, }: FeatureCardsProps): import("react").JSX.Element;

package/dist/components/blocks/feature-cards/FeatureCards.js

@@ -0,0 +1,66 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, Fragment, isValidElement, useId } from 'react';
+import './FeatureCards.css';
+import './feature-cards-impl.css';
+import '../block-reveal.css';
+import { given } from '../../given.js';
+import { arriving, useReveal } from '../use-reveal.js';
+import { featureCardsDefaults, featureCardsParts } from './FeatureCards.types.js';
+/**
+ * The cards, with any fragment opened out.
+ *
+ * `Children.toArray` flattens arrays and leaves a fragment whole, so a page writing
+ * `<>{cards}</>` handed over one child: every card in a single cell, and the grid reading the set
+ * as one card alone. A fragment is the page grouping its own markup, never a card, so it is opened
+ * out here and the grid counts what is inside it.
+ */
+function cardsOf(children, within = '') {
+    return Children.toArray(children).flatMap((child, at) => {
+        // `toArray` keys a fragment's children afresh — `.0`, `.1` — so a card is keyed by the
+        // fragment it came out of as well as its own place, or two cards from different groups share a
+        // key and React reconciles one into the other's cell.
+        const key = `${within}${isValidElement(child) && child.key !== null ? child.key : at}`;
+        return isValidElement(child) && child.type === Fragment
+            ? cardsOf(child.props.children, `${key}/`)
+            : [{ key, card: child }];
+    });
+}
+/**
+ * Where a card comes in the arrival, capped so a long set does not keep a reader waiting.
+ *
+ * The heading, the line and the way on take the first three steps. The cards follow one step
+ * apart up to the fourth, and the rest arrive with it: block-reveal.css keeps a block's trail
+ * inside its own movement, and eight cards a step apart would trail the heading by most of a
+ * second.
+ */
+const FIRST_CARD = 3;
+const LAST_STEP = FIRST_CARD + 3;
+/**
+ * A heading over a grid of cards — the reference site's FeatureCards in its grid form.
+ *
+ * The cards are the page's own Card or CardButton, each holding a CardBody, rather than records
+ * this draws. A card already says everything a card can say — its fill, its picture, its mark,
+ * whether the whole of it is pressed — and a list of records here would be a second, smaller Card
+ * API to keep in step with the first. What this decides is the rest: the heading, the column, and
+ * how many cards share a row.
+ *
+ * The row is read from the cards. One column on a phone and two from the fold; at full width three,
+ * four when there are exactly four, and one or two held to two thirds of the row, centred. A card
+ * alone lays its words beside a portrait picture. The stylesheet asks all of it of the markup — the
+ * count is already there, and a prop restating it is a second place for the two to disagree.
+ *
+ * It arrives the way every block does: the heading, the line and the way on, then each card's cell
+ * a step behind the one before, in reading order. `'use client'` for that and for `useId`, which
+ * names the region by its heading.
+ */
+export function FeatureCards({ ground = featureCardsDefaults.ground, title, description, link, children, }) {
+    const titleId = useId();
+    const [band, revealed] = useReveal();
+    return (_jsx("section", { className: featureCardsParts.root, "data-ground": ground, "aria-labelledby": titleId, children: _jsxs("div", { className: featureCardsParts.inner, ref: band, "data-revealed": revealed, children: [_jsxs("div", { className: featureCardsParts.header, children: [_jsx("h2", { className: featureCardsParts.title, id: titleId, ...arriving(0), children: title }), given(description) ? (_jsx("p", { className: featureCardsParts.description, ...arriving(1), children: description })) : null, link ? (_jsx("div", { className: featureCardsParts.link, ...arriving(2), children: link })) : null] }), _jsx("div", { className: featureCardsParts.grid, children: cardsOf(children).map(({ key, card }, at) => (
+                    /* Each card in a cell of its own, and the cell is what arrives: the card is the page's
+                       element and keeps its own transitions, which an arrival set on it would overwrite.
+                       Keyed by the card's own key, made unique across fragments by cardsOf, so a set the
+                       page reorders moves its cards rather than remounting them. */
+                    _jsx("div", { className: featureCardsParts.item, ...arriving(Math.min(FIRST_CARD + at, LAST_STEP)), children: card }, key))) })] }) }));
+}

package/dist/components/blocks/feature-cards/FeatureCards.types.d.ts

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+export interface FeatureCardsOwnProps {
+    /**
+     * `page` — The default, and the page's own white. A section that has nothing to separate itself from what is above it — most of them — and the ground a reader is already on
+     * `subtle` — A quiet step off the page, for a band that wants to read as its own section without changing the page's voice. The one to reach for first when two sections need telling apart. A light card — surface-light — turns white on it, color.bg.surface-card-light-raised, because its own gray.50 is the band's and would vanish into it. A dark card — accent-strong — is lifted to color.bg.surface-card-strong-raised, a step lighter in dark mode, where the band is within a shade of its gray.900. A plain surface card is raised off it the same way, to color.bg.surface-card-raised, because the recessed fill is the band's gray too. Painted as the band's tint laid over the page's own ground, so it is the same grey whatever is behind the section — in dark mode the tint alone took on whatever it was set against, and on a light surface it was light ink on white.
+     * `strong` — `color.bg.brand-strong`, the dark band. It stops the page rather than dividing it, so it is for a section a reader should arrive at — and one per page is usually one more than enough. The coloured cards keep their own grounds on it; a neutral card — surface or surface-raised — turns to Card's inverse fill and white ink, and a plain card takes the white ink alone, because their own would be dark ink on near-black; an eyebrow inside any of them takes the band's quieter ink
+     */
+    ground?: 'page' | 'subtle' | 'strong';
+    /** Always. What the cards are, in the fewest words that name them — "Why trade with Deriv", "Markets you can trade". */
+    title: string;
+    /** A line saying what the set has in common, when the title alone does not. */
+    description?: string;
+    /** A way on to the page the whole set belongs to — "See all markets". A standalone Link, under the line. */
+    link?: ReactNode;
+    /** Allowed: Card, CardButton */
+    children: ReactNode;
+}
+export type FeatureCardsProps = FeatureCardsOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const featureCardsParts: {
+    readonly root: "dds-featurecards";
+    readonly inner: "dds-featurecards__inner";
+    readonly header: "dds-featurecards__header";
+    readonly title: "dds-featurecards__title";
+    readonly description: "dds-featurecards__description";
+    readonly link: "dds-featurecards__link";
+    readonly grid: "dds-featurecards__grid";
+    readonly item: "dds-featurecards__item";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const featureCardsDefaults: {
+    readonly ground: "page";
+};

package/dist/components/blocks/feature-cards/FeatureCards.types.js

@@ -0,0 +1,14 @@
+// GENERATED from feature-cards.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const featureCardsParts = {
+    root: 'dds-featurecards',
+    inner: 'dds-featurecards__inner',
+    header: 'dds-featurecards__header',
+    title: 'dds-featurecards__title',
+    description: 'dds-featurecards__description',
+    link: 'dds-featurecards__link',
+    grid: 'dds-featurecards__grid',
+    item: 'dds-featurecards__item',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const featureCardsDefaults = { ground: 'page' };

package/dist/components/blocks/feature-cards/feature-cards-impl.css

@@ -0,0 +1,245 @@
+/*
+ * 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.
+ *
+ * PageHeader's 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-featurecards .dds-featurecards__header {
+    align-items: center;
+    margin-inline: auto;
+    text-align: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-featurecards .dds-featurecards__description {
+    margin-inline: auto;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-featurecards .dds-featurecards__link {
+    justify-content: center;
+  }
+}
+
+/*
+ * One column on a phone. `minmax(0, 1fr)` rather than `1fr`, so a card holding a long unbroken
+ * word or a wide picture shrinks to the column instead of pushing the grid past the page.
+ */
+:where([data-dds-context="marketing"]) .dds-featurecards .dds-featurecards__grid {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+/*
+ * How many cards share a row, read from the cards.
+ *
+ * Two from the fold, three at full width, four when there are exactly four — the reference
+ * design's rule, so a set of four is one row rather than a row of three and an orphan — and a pair
+ * as two columns. `:has()` asks the markup how many there are; the count is already there, and a
+ * prop restating it would be a second place for the two to disagree. 62rem is the reference's
+ * desktop step.
+ *
+ * Where `:has()` is not supported every count takes the three columns and a single card stays
+ * stacked: the set still reads, only less exactly.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-featurecards .dds-featurecards__grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  /* One card takes the row. Above the three- and four-column rules below by specificity, not by
+     order — `:has()` counts the selector inside it — so it holds at every width from here up. */
+  :where([data-dds-context="marketing"]) .dds-featurecards .dds-featurecards__grid:has(> :only-child) {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  /*
+   * And a card alone lays its words and its picture side by side.
+   *
+   * A card the width of the section with its picture under the words is a strip of copy over a
+   * letterbox. The reference design's single panel is a split instead — words at the start, the
+   * picture at the end — and the block is what knows the card is alone, so the row is said here
+   * rather than asked of CardBody. Its parts keep their own order: a body whose picture leads
+   * (mediaPosition="above") leads with it here too. Only a body with its picture in the column;
+   * one whose copy sits over its picture is already the whole card and has nothing to split.
+   *
+   * The two halves share the width, and the words start at the top of theirs, level with the top
+   * of the picture, the way a card's words start at the top when they are stacked.
+   */
+  :where([data-dds-context="marketing"])
+    .dds-featurecards
+    .dds-featurecards__grid:has(> :only-child)
+    .dds-cardbody[data-over-media="false"] {
+    flex-direction: row;
+  }
+
+  :where([data-dds-context="marketing"])
+    .dds-featurecards
+    .dds-featurecards__grid:has(> :only-child)
+    .dds-cardbody[data-over-media="false"]
+    > :is(.dds-cardbody__content, .dds-cardbody__media-frame) {
+    flex: 1 1 0;
+    min-inline-size: 0;
+  }
+
+  /*
+   * The picture beside a single card's words is portrait, aspect.portrait.
+   *
+   * Half a wide card is a tall column, and a landscape picture in it is a letterbox with the words
+   * running past its lower edge. Portrait fills the half the way the reference's single panel does.
+   * `align-self: flex-start` so the ratio decides the frame's height rather than the row stretching
+   * it to the words; the picture inside covers, so whatever shape the source is, the frame is
+   * portrait — unless the page set CardBody's `aspect`, whose inline ratio is the page's to choose.
+   */
+  :where([data-dds-context="marketing"])
+    .dds-featurecards
+    .dds-featurecards__grid:has(> :only-child)
+    .dds-cardbody[data-over-media="false"]
+    > .dds-cardbody__media-frame {
+    align-self: flex-start;
+    aspect-ratio: var(--aspect-portrait);
+    /* Half the card when CardBody's own `aspect` is set: that writes `flex: none` and the page's
+       ratio inline, which win over the rule above, and a frame with no flex and no width sizes to
+       the picture's own pixels — eight hundred of them, past the card's edge. The width is what
+       holds it to its half; where the flex rule does apply, its zero basis overrides this. */
+    inline-size: 50%;
+  }
+}
+
+@container (min-width: 62rem) {
+  :where([data-dds-context="marketing"]) .dds-featurecards .dds-featurecards__grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  :where([data-dds-context="marketing"]) .dds-featurecards .dds-featurecards__grid:has(> :nth-child(4):last-child) {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  /* A pair as two columns of their own, rather than two of three with an empty third beside them —
+     the rule below then holds the pair to the width two columns take in a row of three. */
+  :where([data-dds-context="marketing"]) .dds-featurecards .dds-featurecards__grid:has(> :nth-child(2):last-child) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  /*
+   * One or two cards hold to two thirds of the row, centred, rather than the whole of it.
+   *
+   * Two cards across the full width are each half as wide again as a card in a row of three, and
+   * one alone is a banner. Two thirds is exactly two of the three columns and the gutter between
+   * them, so a pair is the width a pair is in any other set, and a single card the width of that
+   * pair. Computed from the row's own width and gutter rather than a fixed measure, so it follows
+   * the grid wherever the grid is.
+   */
+  :where([data-dds-context="marketing"]) .dds-featurecards .dds-featurecards__grid:is(:has(> :only-child), :has(> :nth-child(2):last-child)) {
+    margin-inline: auto;
+    max-inline-size: calc((100% - 2 * var(--space-grid-gutter)) * 2 / 3 + var(--space-grid-gutter));
+    inline-size: 100%;
+  }
+}
+
+/*
+ * A light card turns white on the subtle band.
+ *
+ * surface-light is gray.50 in both themes so it stays light beside a dark card, and the subtle
+ * band is gray.50 too — so on that band the light card had no edge at all. The block knows its
+ * ground and the card does not, so the answer is here rather than in Card: the card keeps its
+ * variant, its ink and its hover (a lift, which this leaves alone), and only its fill moves to
+ * color.bg.surface-card-light-raised. White in light mode; in dark mode the band is a white tint
+ * over near-black rather than gray.50, so the role is the card's own gray.50 there and nothing
+ * changes — a white card on the dark band was brighter than every card beside it.
+ */
+:where([data-dds-context="marketing"])
+  .dds-featurecards[data-ground="subtle"]
+  .dds-featurecards__item
+  > :is(.dds-card, .dds-cardbutton)[data-variant="surface-light"] {
+  background-color: var(--color-bg-surface-card-light-raised);
+}
+
+/*
+ * A neutral card turns round on the dark band.
+ *
+ * surface and surface-raised carry the page's dark ink and a fill made for a light page, which on
+ * color.bg.brand-strong is dark words on near-black. Card answers that with tone="inverse", and
+ * CardButton has no tone to answer with — so the block, which knows its ground, gives both the
+ * values Card's own inverse uses: the inverse surface, the raised veil, and white ink. The coloured
+ * cards — surface-light, accent, accent-strong — already paint their own ground and ink and are
+ * left as they are.
+ */
+:where([data-dds-context="marketing"])
+  .dds-featurecards[data-ground="strong"]
+  .dds-featurecards__item
+  > :is(.dds-card, .dds-cardbutton)[data-variant="surface"] {
+  background-color: var(--color-bg-surface-inverse);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"])
+  .dds-featurecards[data-ground="strong"]
+  .dds-featurecards__item
+  > :is(.dds-card, .dds-cardbutton)[data-variant="surface-raised"] {
+  background-color: var(--color-bg-surface-raised-on-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+/*
+ * A plain card has no ground of its own, so on the dark band it is the band's words: white ink,
+ * the value Card's own plain-and-inverse takes. Without it a plain CardButton drew the page's
+ * near-black ink on the near-black band.
+ */
+:where([data-dds-context="marketing"])
+  .dds-featurecards[data-ground="strong"]
+  .dds-featurecards__item
+  > :is(.dds-card, .dds-cardbutton)[data-variant="plain"] {
+  color: var(--color-fg-on-brand-strong);
+}
+
+/*
+ * And the eyebrow inside a card turned round. CardBody quietens its eyebrow by its own tone, which
+ * a card recoloured here does not change, so the eyebrow kept the page's muted grey on a dark card.
+ * It takes the band's own quieter ink, the value CardBody's inverse tone uses.
+ */
+:where([data-dds-context="marketing"])
+  .dds-featurecards[data-ground="strong"]
+  .dds-featurecards__item
+  > :is(.dds-card, .dds-cardbutton):is([data-variant="surface"], [data-variant="surface-raised"], [data-variant="plain"])
+  .dds-cardbody__eyebrow {
+  color: var(--color-fg-muted-inverse);
+}
+
+/*
+ * And a dark card is lifted a step in dark mode.
+ *
+ * accent-strong is gray.900, and in dark mode the subtle band is a white tint over near-black that
+ * lands within a shade of it — the card blended into the band the way the light card did in light
+ * mode. color.bg.surface-card-strong-raised is the same gray.900 in light, where the dark card
+ * already stands off the band, and gray.800 in dark, a step up so it lifts off it. The ink is
+ * unchanged: white on either.
+ */
+:where([data-dds-context="marketing"])
+  .dds-featurecards[data-ground="subtle"]
+  .dds-featurecards__item
+  > :is(.dds-card, .dds-cardbutton)[data-variant="accent-strong"] {
+  background-color: var(--color-bg-surface-card-strong-raised);
+}
+
+/*
+ * And a plain card is raised off it.
+ *
+ * surface is the recessed fill for a card on the page, color.bg.surface — the same gray the subtle
+ * band is, so on the band it vanished exactly as the light card did. It takes the raised fill,
+ * color.bg.surface-card-raised, which is what Card's surface-raised variant paints: white on the
+ * light band and the raised veil on the dark one, following the theme as surface does.
+ */
+:where([data-dds-context="marketing"])
+  .dds-featurecards[data-ground="subtle"]
+  .dds-featurecards__item
+  > :is(.dds-card, .dds-cardbutton)[data-variant="surface"] {
+  background-color: var(--color-bg-surface-card-raised);
+}

package/dist/components/blocks/feature-scroll/FeatureScroll.css

@@ -0,0 +1,137 @@
+/* GENERATED from featurescroll.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-featurescroll {
+  box-sizing: border-box;
+  container-type: inline-size;
+  display: flex;
+  inline-size: 100%;
+  justify-content: center;
+}
+
+:where([data-dds-context="marketing"]) .dds-featurescroll .dds-featurescroll__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);
+  row-gap: var(--space-heading-content);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurescroll .dds-featurescroll__heading {
+  margin-block: 0;
+  text-wrap: balance;
+  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);
+  max-inline-size: var(--size-measure-heading);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurescroll .dds-featurescroll__steps {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  column-gap: var(--space-gap-3xl);
+  row-gap: var(--space-gap-2xl);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurescroll .dds-featurescroll__step {
+  box-sizing: border-box;
+  display: flex;
+  min-inline-size: 0;
+  row-gap: var(--space-gap-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurescroll .dds-featurescroll__content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-inline-size: 0;
+  row-gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurescroll .dds-featurescroll__title {
+  margin-block: 0;
+  text-wrap: balance;
+  font-family: var(--font-h3-family);
+  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);
+  margin-block-end: var(--space-heading-title-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurescroll .dds-featurescroll__description {
+  margin-block: 0;
+  font-family: var(--font-body-md-family);
+  font-size: var(--font-body-md-size);
+  font-weight: var(--font-body-md-weight);
+  letter-spacing: var(--font-body-md-letter-spacing);
+  line-height: var(--font-body-md-line-height);
+  margin-block-end: var(--space-heading-description-actions);
+  max-inline-size: var(--size-measure-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurescroll .dds-featurescroll__link {
+  display: flex;
+  margin-block-start: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurescroll .dds-featurescroll__media {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  min-inline-size: 0;
+  padding-block: var(--space-gap-lg);
+  transition-duration: var(--motion-duration-media-hover);
+  transition-timing-function: var(--motion-easing-media-hover);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurescroll .dds-featurescroll__picture {
+  display: block;
+  object-fit: cover;
+  aspect-ratio: var(--aspect-square);
+  border-radius: var(--radius-container);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurescroll[data-media-position="end"] .dds-featurescroll__content {
+  grid-column: words;
+}
+
+:where([data-dds-context="marketing"]) .dds-featurescroll[data-media-position="start"] .dds-featurescroll__content {
+  grid-column: picture;
+}
+
+:where([data-dds-context="marketing"]) .dds-featurescroll[data-media-position="end"] .dds-featurescroll__media {
+  grid-column: picture;
+}
+
+:where([data-dds-context="marketing"]) .dds-featurescroll[data-media-position="start"] .dds-featurescroll__media {
+  grid-column: words;
+}
+
+:where([data-dds-context="marketing"]) .dds-featurescroll[data-ground="page"] {
+  background-color: var(--color-bg-page);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurescroll[data-ground="strong"] {
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurescroll[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);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-featurescroll,
+  :where([data-dds-context="marketing"]) .dds-featurescroll * { transition: none !important; }
+}
+

package/dist/components/blocks/feature-scroll/FeatureScroll.d.ts

@@ -0,0 +1,39 @@
+import './FeatureScroll.css';
+import './feature-scroll-impl.css';
+import '../block-reveal.css';
+import { type FeatureScrollProps } from './FeatureScroll.types.js';
+export type { FeatureScrollProps };
+/**
+ * A section that gives a set of things one screen each, with the picture pinned beside the words.
+ *
+ * Two mechanisms, and which does what is the thing to understand here. Holding a picture in place
+ * while words move past it is `position: sticky`, and nothing in this file measures it. Knowing
+ * *which* picture belongs to the words a reader has reached is a question about where each title
+ * has got to, and no stylesheet can ask it — so that much is below, and only that much.
+ *
+ * The rule the reference design settles on: a stop's picture is the one showing once the *next*
+ * stop's title has risen to the line the pictures are pinned at. Read as "the last title at or
+ * above the line" plus one, clamped to the end. It means the square changes at the moment a reader
+ * reaches a new heading rather than at some fraction of the way through, which is the only moment
+ * they would notice either way.
+ *
+ * Throttled to one read per frame through `requestAnimationFrame`, on a passive listener, and the
+ * read itself is `getBoundingClientRect` on the titles — no layout is written back, so the loop
+ * cannot thrash. `useLayoutEffect` rather than `useEffect` so the first measurement lands before
+ * the browser paints; the effect otherwise ran after the first frame and the section opened on
+ * step one for that frame however far down the page a reader had already scrolled.
+ *
+ * It measures the section's own width rather than the window's, because the fold is a container
+ * query on the section and the two disagree wherever a frame stands in for a window. The fold is
+ * the stylesheet's own `48rem`, turned into pixels against the root font size each time it is
+ * asked: a fixed 768 agreed with it only while the root stayed at sixteen, and a page that set it
+ * smaller pinned the picture on the first stop for the width in between.
+ *
+ * The parts of a stop are in the order a phone reads them, which is the order they are written:
+ * name, picture, line, way onward. At full width each stop gives up its box — `display: contents`
+ * — and the grid places the words in one column and every picture in the other, stacked, so the
+ * change is a change in one square rather than one picture leaving and another arriving. The
+ * reference design ships two DOM trees to get that; one tree means a reader's assistive technology
+ * and anybody reading the markup meet each stop once.
+ */
+export declare function FeatureScroll({ ground, title, steps, mediaPosition, }: FeatureScrollProps): import("react").JSX.Element;