@deriv-com/dds-marketing 0.2.0 → 1.0.0

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;

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

@@ -0,0 +1,167 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useLayoutEffect, useRef, useState } from 'react';
+import './FeatureScroll.css';
+import './feature-scroll-impl.css';
+import '../block-reveal.css';
+import { arriving, useReveal } from '../use-reveal.js';
+import { Link } from '../../core/link/Link.js';
+import { featureScrollDefaults, featureScrollParts, } from './FeatureScroll.types.js';
+/**
+ * Where the fold is, in pixels — the stylesheet's `48rem`, read against the page's own root font
+ * size, so the two agree when a page or a reader has changed it. See `showing` below.
+ */
+const FOLD_REM = 48;
+const foldsAt = () => FOLD_REM * (Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16);
+/**
+ * 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 function FeatureScroll({ ground = featureScrollDefaults.ground, title, steps, mediaPosition = featureScrollDefaults.mediaPosition, }) {
+    const titleId = useId();
+    const [heading, revealed] = useReveal();
+    const root = useRef(null);
+    const titles = useRef([]);
+    const band = useRef(null);
+    const [showing, setShowing] = useState(0);
+    const count = steps.length;
+    useLayoutEffect(() => {
+        if (count === 0)
+            return;
+        /**
+         * The line the pictures are pinned at, read off the pinned band itself.
+         *
+         * Asked of the element rather than held here, because the offset is the stylesheet's — it is
+         * `size.bar-height`, so that a picture comes to rest under a navigation bar rather than behind
+         * one. A copy of the number in this file would be a second answer to drift from it, and the
+         * band already knows.
+         */
+        const line = () => {
+            const pinned = band.current;
+            if (pinned === null)
+                return 0;
+            const top = Number.parseFloat(getComputedStyle(pinned).insetBlockStart);
+            return Number.isFinite(top) ? top : 0;
+        };
+        let frame = 0;
+        const read = () => {
+            frame = 0;
+            const section = root.current;
+            if (section === null)
+                return;
+            // The fold is the section's own width, which is what the stylesheet asks. Below it every
+            // stop carries its own picture and there is nothing to choose between.
+            if (section.clientWidth < foldsAt())
+                return;
+            const at = line();
+            let reached = -1;
+            for (let i = 0; i < count; i += 1) {
+                const heading = titles.current[i];
+                if (heading === null || heading === undefined)
+                    continue;
+                if (heading.getBoundingClientRect().top <= at)
+                    reached = i;
+            }
+            const next = Math.min(count - 1, reached + 1);
+            setShowing((held) => (held === next ? held : next));
+        };
+        const schedule = () => {
+            if (frame !== 0)
+                return;
+            frame = window.requestAnimationFrame(read);
+        };
+        /**
+         * Heard on the way down, because a scroll does not come back up.
+         *
+         * A `scroll` event fired at an element does not bubble, so a listener on the window hears only
+         * the window's own scrolling. Wherever the section sits inside something that scrolls — a
+         * pane, a dialog, the workbench's own stage — the pictures simply never changed, while the
+         * same section on a page of its own worked perfectly. That is a difference no reader should be
+         * able to find, and the reference design has it too: it listens on the window alone.
+         *
+         * The capture phase is what catches them. Every scroll passes through the window on its way to
+         * its target whether or not it comes back, so one listener here answers for every scroller on
+         * the page, and the read itself is unchanged — `getBoundingClientRect` is measured against the
+         * viewport, which is the right frame however the section came to move within it.
+         *
+         * The flag has to be given to the removal as well: a capturing listener and a bubbling one are
+         * two different registrations, and taking off the wrong one leaves the other listening.
+         */
+        const heard = { passive: true, capture: true };
+        read();
+        window.addEventListener('scroll', schedule, heard);
+        window.addEventListener('resize', schedule, { passive: true });
+        return () => {
+            window.removeEventListener('scroll', schedule, { capture: true });
+            window.removeEventListener('resize', schedule);
+            if (frame !== 0)
+                window.cancelAnimationFrame(frame);
+        };
+    }, [count]);
+    return (_jsx("section", { className: featureScrollParts.root, "data-ground": ground, "data-media-position": mediaPosition, "aria-labelledby": titleId, ref: root, children: _jsxs("div", { className: featureScrollParts.inner, children: [_jsx("h2", { className: featureScrollParts.heading, ref: heading, "data-revealed": revealed, ...arriving(0), id: titleId, children: title }), _jsx("div", { className: featureScrollParts.steps, style: { '--dds-featurescroll-stops': count }, children: steps.map((step, index) => (
+                    /* Keyed by the title. An index would key the set by position, so filtering a stop out
+                       would renumber every stop under it and React would reconcile the wrong ones — and
+                       these are the content, so two the same would be a duplicate stop rather than a key
+                       collision worth tolerating. */
+                    _jsx(Stop, { step: step, showing: index === showing, onTitle: (held) => {
+                            titles.current[index] = held;
+                        }, onBand: index === 0 ? band : undefined }, step.title))) })] }) }));
+}
+/**
+ * One stop, which arrives on its own below the fold and not at all above it.
+ *
+ * A component of its own for one reason: it holds a `useReveal` each, and a hook cannot be called
+ * inside a loop. Private to this file, because a stop is not a thing a page composes — the section
+ * takes its set as data, and this is how one record is drawn.
+ *
+ * Two arrivals rather than one, and the gap between them is the layout's rather than a number. The
+ * words and the picture each watch for themselves, and on a phone the picture sits under the line
+ * it belongs to — so it comes up a beat later because it reaches the viewport a beat later. A delay
+ * would have been a guess about how far apart they are; this is the distance itself.
+ *
+ * Above the fold neither moves, and the stylesheet says so. What moves there is the picture, which
+ * is pinned beside the words and exchanged as a reader passes each title — the section's own
+ * motion, and enough of it. It is also the one place a transform cannot go: the band is
+ * `position: sticky`, and the crossfade owns its opacity.
+ *
+ * Below the fold there is no pinning and nothing is exchanged: the stops are ordinary blocks in a
+ * column, so without this the only thing on a phone that moved was the section's heading — one
+ * flourish at the top and six screens of nothing after it.
+ */
+function Stop({ step, showing, onTitle, onBand, }) {
+    const [words, wordsHere] = useReveal();
+    const [picture, pictureHere] = useReveal();
+    return (_jsxs("div", { className: featureScrollParts.step, children: [_jsxs("div", { className: featureScrollParts.content, "data-revealed": wordsHere, children: [_jsx("h3", { className: featureScrollParts.title, ...arriving(0), ref: (held) => {
+                            words(held);
+                            onTitle(held);
+                        }, children: step.title }), _jsx("p", { className: featureScrollParts.description, ...arriving(1), children: step.description }), step.href !== undefined && step.linkLabel !== undefined ? (_jsx("div", { className: featureScrollParts.link, ...arriving(2), children: _jsx(Link, { href: step.href, children: step.linkLabel }) })) : null] }), _jsx("div", { className: featureScrollParts.media, "data-showing": showing, "data-revealed": pictureHere, "aria-hidden": "true", ref: onBand, children: _jsx("img", { className: featureScrollParts.picture, src: step.image, alt: "", ...arriving(0), ref: picture }) })] }));
+}