@deriv-com/dds-marketing 1.0.2 → 1.1.0

package/dist/components/blocks/stats/Stats.js

@@ -0,0 +1,120 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useId, useLayoutEffect, useRef, useState } from 'react';
+import './Stats.css';
+import './stats-impl.css';
+import '../block-reveal.css';
+import { given } from '../../given.js';
+import { milliseconds } from '../../css-time.js';
+import { arriving, useReveal } from '../use-reveal.js';
+import { countable, easing, partway } from './stats-count.js';
+import { slotOf, useWheel } from './use-wheel.js';
+import { statsDefaults, statsParts } from './Stats.types.js';
+/**
+ * Where a figure comes in the arrival, capped so a long set does not keep a reader waiting.
+ *
+ * The heading and the line under it take the first two steps; the figures follow one step apart up
+ * to the fourth, and the rest arrive with it — FeatureCards' cap and its reason.
+ */
+const FIRST_FIGURE = 2;
+const LAST_STEP = FIRST_FIGURE + 3;
+const stepOf = (at) => Math.min(FIRST_FIGURE + at, LAST_STEP);
+/**
+ * A heading over a row of key numbers, each counting up once as the section arrives — the reference
+ * site's StatsSimple.
+ *
+ * The count is decoration over a fact that is already written. Every figure is rendered as the page
+ * wrote it, from the first render — in the server's HTML, to a reader with no script, to a search
+ * engine — and that text is what assistive technology reads throughout. While a figure counts, the
+ * running number is laid over it in the same cell, hidden from assistive technology, and the figure
+ * beneath turns transparent rather than leaving: it still holds the cell's width, so nothing beside
+ * it moves as the digits change.
+ *
+ * The count is started by the arrival every block shares, `useReveal`, and only by that hook having
+ * hidden the section first. A reader who asked for less movement is never hidden, and so never
+ * counted at; nor is a renderer that cannot observe. Each figure starts as its own arrival does, a
+ * step behind the one before, and runs for motion.duration.reveal — the figure lands as it settles.
+ *
+ * `'use client'` for the count, the arrival, and `useId`, which names the region by its heading.
+ */
+export function Stats({ ground = statsDefaults.ground, title, description, stats }) {
+    const titleId = useId();
+    const [band, revealed] = useReveal();
+    const held = useRef(null);
+    const hold = useCallback((element) => {
+        held.current = element;
+        band(element);
+    }, [band]);
+    /** Milliseconds since the section arrived, while it counts; `null` at rest. */
+    const [elapsed, setElapsed] = useState(null);
+    const [timing, setTiming] = useState(null);
+    // Whether the section has been hidden to wait for its arrival. Only a section that waited counts:
+    // one shown from the start — reduced motion, no observer — was never at nought to count from.
+    const waited = useRef(false);
+    const figures = stats.length;
+    // On a phone the figures turn one at a time in a wheel rather than stacking — see useWheel.
+    const section = useRef(null);
+    const { wheeling, turn, hold: holdWheel } = useWheel(section, figures);
+    useLayoutEffect(() => {
+        if (!revealed) {
+            waited.current = true;
+            return;
+        }
+        if (!waited.current)
+            return;
+        waited.current = false;
+        const element = held.current;
+        if (element === null)
+            return;
+        // Asked again here, defensively: the hook declines to hide under this preference, so this
+        // should never be reached with it set — and if it is, the figures simply show.
+        if (typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+            return;
+        }
+        const style = getComputedStyle(element);
+        const duration = milliseconds(style.getPropertyValue('--motion-duration-reveal')) ?? 0;
+        const stagger = milliseconds(style.getPropertyValue('--motion-duration-stagger')) ?? 0;
+        if (duration <= 0)
+            return;
+        const curve = easing(style.getPropertyValue('--motion-easing-reveal'));
+        // The last figure starts a step behind the one before it, so the count is over when it lands.
+        const total = stepOf(Math.max(figures - 1, 0)) * stagger + duration;
+        // At nought before the first frame is painted, in this layout effect: the section is arriving
+        // from transparent, and a frame of the final figures first would be a flash of the answer.
+        setTiming({ duration, stagger, curve });
+        setElapsed(0);
+        let start = null;
+        let frame = window.requestAnimationFrame(function tick(now) {
+            start ??= now;
+            const since = now - start;
+            if (since >= total) {
+                frame = 0;
+                setElapsed(null);
+                return;
+            }
+            setElapsed(since);
+            frame = window.requestAnimationFrame(tick);
+        });
+        return () => {
+            if (frame !== 0)
+                window.cancelAnimationFrame(frame);
+            setElapsed(null);
+        };
+    }, [revealed, figures]);
+    // Nothing to show is nothing drawn: a named region with no figure in it leads nowhere.
+    if (figures === 0)
+        return null;
+    return (_jsx("section", { className: statsParts.root, ref: section, "data-ground": ground, "aria-labelledby": titleId, children: _jsxs("div", { className: statsParts.inner, ref: hold, "data-revealed": revealed, children: [_jsxs("div", { className: statsParts.header, children: [_jsx("h2", { className: statsParts.title, id: titleId, ...arriving(0), children: title }), given(description) ? (_jsx("p", { className: statsParts.description, ...arriving(1), children: description })) : null] }), _jsx("span", { className: statsParts.dots, "aria-hidden": "true", ...(wheeling ? arriving(FIRST_FIGURE) : {}), children: stats.map((_, at) => (_jsx("span", { className: statsParts.dot, "data-current": wheeling && at === turn % figures }, at))) }), _jsx("ul", { className: statsParts.list, role: "list", "data-wheel": wheeling || undefined, tabIndex: wheeling ? 0 : undefined, "aria-labelledby": wheeling ? titleId : undefined, ...(wheeling ? { ...arriving(FIRST_FIGURE), ...holdWheel } : {}), children: stats.map((figure, at) => {
+                        const step = stepOf(at);
+                        const number = elapsed === null || timing === null ? null : countable(figure.value);
+                        // The share of its count this figure has run, from its own arrival rather than the
+                        // section's — so each number starts climbing as it starts to rise.
+                        const share = number === null || timing === null || elapsed === null
+                            ? 1
+                            : timing.curve(Math.min(Math.max((elapsed - step * timing.stagger) / timing.duration, 0), 1));
+                        const counting = number !== null && share < 1;
+                        return (
+                        // A figure's position is its identity: the set is a list, and nothing reorders it.
+                        _jsxs("li", { className: statsParts.item, "data-slot": wheeling ? slotOf(at, turn, figures) : undefined, ...(wheeling ? {} : arriving(step)), children: [_jsxs("span", { className: statsParts.value, "data-counting": counting, children: [_jsx("span", { className: statsParts.amount, children: _jsx("bdi", { children: figure.value }) }), _jsx("span", { className: statsParts.count, "aria-hidden": "true", children: counting ? _jsx("bdi", { children: partway(number, share) }) : null })] }), _jsx("span", { className: statsParts.label, children: figure.label })] }, at));
+                    }) })] }) }));
+}

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

@@ -0,0 +1,36 @@
+import type { StatsFigure } from '../../stats-data.js';
+export interface StatsOwnProps {
+    /**
+     * `page` — The default, and the page's own white. A row of figures between two sections that need nothing to separate them
+     * `subtle` — The grey band, for a row of figures 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 a set of figures a reader should arrive at — a home page's "Trade with confidence". The heading and the figures turn white and the labels take color.fg.muted-inverse
+     */
+    ground?: 'page' | 'subtle' | 'strong';
+    /** Always. What the numbers prove, in the fewest words — "Trade with confidence", "Deriv in numbers". */
+    title: string;
+    /** A line under the heading, when the heading alone does not say whose numbers these are or since when — "For over 25 years, a trusted partner of traders worldwide." */
+    description?: string;
+    /** Always. The figures, in the order they are read along the row — three to five, each a short `value` exactly as it is to be read and a `label` of a few words. A value holding one number counts up to it; '24/7', or a value with no number, simply shows. An empty list draws nothing. */
+    stats: StatsFigure[];
+}
+export type StatsProps = StatsOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const statsParts: {
+    readonly root: "dds-stats";
+    readonly inner: "dds-stats__inner";
+    readonly header: "dds-stats__header";
+    readonly title: "dds-stats__title";
+    readonly description: "dds-stats__description";
+    readonly list: "dds-stats__list";
+    readonly dots: "dds-stats__dots";
+    readonly dot: "dds-stats__dot";
+    readonly item: "dds-stats__item";
+    readonly value: "dds-stats__value";
+    readonly amount: "dds-stats__amount";
+    readonly count: "dds-stats__count";
+    readonly label: "dds-stats__label";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const statsDefaults: {
+    readonly ground: "page";
+};

package/dist/components/blocks/stats/Stats.types.js

@@ -0,0 +1,19 @@
+// GENERATED from stats.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const statsParts = {
+    root: 'dds-stats',
+    inner: 'dds-stats__inner',
+    header: 'dds-stats__header',
+    title: 'dds-stats__title',
+    description: 'dds-stats__description',
+    list: 'dds-stats__list',
+    dots: 'dds-stats__dots',
+    dot: 'dds-stats__dot',
+    item: 'dds-stats__item',
+    value: 'dds-stats__value',
+    amount: 'dds-stats__amount',
+    count: 'dds-stats__count',
+    label: 'dds-stats__label',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const statsDefaults = { ground: 'page' };

package/dist/components/blocks/stats/stats-count.d.ts

@@ -0,0 +1,34 @@
+/**
+ * The arithmetic of a Stats figure counting up: which figures can, what one reads partway there,
+ * and the curve it climbs on. Pure, so it is tested without a browser to animate in.
+ */
+/** A figure that can count: the one number in it, and what is written either side. */
+export interface Countable {
+    before: string;
+    whole: number;
+    /** How many places after the point the figure is written to — '1.2B' counts in tenths. */
+    places: number;
+    /** Whether the figure groups its thousands with commas — '1,000+' climbs as '640', '1,000'. */
+    grouped: boolean;
+    after: string;
+}
+/**
+ * The number in a figure, where it has exactly one.
+ *
+ * Exactly one, because a value with two is not a quantity: '24/7' counted up is '3/7' on the way,
+ * which is a different claim rather than a smaller one. A value with none — 'Free', 'Always' —
+ * simply shows. Everything either side of the number is kept as written, so '$' and 'M+' stand
+ * still while the digits climb.
+ */
+export declare function countable(value: string): Countable | null;
+/** The figure at a share of the way to its value, written the way the value is. */
+export declare function partway(figure: Countable, share: number): string;
+/**
+ * A `cubic-bezier()` easing, as a function of time.
+ *
+ * The count moves on motion.easing.reveal, the curve the figure itself rises on, so the number and
+ * the words under it settle together. A transition can name the token; a number drawn frame by
+ * frame cannot, so the curve is read off the token and walked here. Anything that is not a
+ * `cubic-bezier()` — a keyword, or nothing — counts evenly rather than on a curve invented here.
+ */
+export declare function easing(value: string): (time: number) => number;

package/dist/components/blocks/stats/stats-count.js

@@ -0,0 +1,61 @@
+/**
+ * The arithmetic of a Stats figure counting up: which figures can, what one reads partway there,
+ * and the curve it climbs on. Pure, so it is tested without a browser to animate in.
+ */
+/**
+ * The number in a figure, where it has exactly one.
+ *
+ * Exactly one, because a value with two is not a quantity: '24/7' counted up is '3/7' on the way,
+ * which is a different claim rather than a smaller one. A value with none — 'Free', 'Always' —
+ * simply shows. Everything either side of the number is kept as written, so '$' and 'M+' stand
+ * still while the digits climb.
+ */
+export function countable(value) {
+    const match = /^(\D*)(\d{1,3}(?:,\d{3})+|\d+)(?:\.(\d+))?(\D*)$/.exec(value);
+    if (match === null)
+        return null;
+    const [, before = '', digits = '', fraction = '', after = ''] = match;
+    return {
+        before,
+        whole: Number.parseFloat(`${digits.replace(/,/g, '')}.${fraction || '0'}`),
+        places: fraction.length,
+        grouped: digits.includes(','),
+        after,
+    };
+}
+/** The figure at a share of the way to its value, written the way the value is. */
+export function partway(figure, share) {
+    const [whole = '0', fraction] = (figure.whole * share).toFixed(figure.places).split('.');
+    const digits = figure.grouped ? whole.replace(/\B(?=(\d{3})+(?!\d))/g, ',') : whole;
+    return `${figure.before}${digits}${fraction === undefined ? '' : `.${fraction}`}${figure.after}`;
+}
+/**
+ * A `cubic-bezier()` easing, as a function of time.
+ *
+ * The count moves on motion.easing.reveal, the curve the figure itself rises on, so the number and
+ * the words under it settle together. A transition can name the token; a number drawn frame by
+ * frame cannot, so the curve is read off the token and walked here. Anything that is not a
+ * `cubic-bezier()` — a keyword, or nothing — counts evenly rather than on a curve invented here.
+ */
+export function easing(value) {
+    const points = /cubic-bezier\(([^)]*)\)/.exec(value)?.[1]?.split(',').map(Number);
+    if (points?.length !== 4 || points.some((point) => !Number.isFinite(point)))
+        return (time) => time;
+    const [x1 = 0, y1 = 0, x2 = 1, y2 = 1] = points;
+    const along = (a, b, s) => 3 * a * s * (1 - s) ** 2 + 3 * b * s * s * (1 - s) + s ** 3;
+    return (time) => {
+        // Halving for the point on the curve whose x is the time: monotonic in x, so it always lands,
+        // and twenty halvings is closer than a pixel of any figure this draws.
+        let low = 0;
+        let high = 1;
+        let s = time;
+        for (let step = 0; step < 20; step += 1) {
+            s = (low + high) / 2;
+            if (along(x1, x2, s) < time)
+                low = s;
+            else
+                high = s;
+        }
+        return along(y1, y2, s);
+    };
+}

package/dist/components/blocks/stats/stats-impl.css

@@ -0,0 +1,284 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ */
+
+/*
+ * 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 figures. `:last-child` is the
+ * condition itself, TestimonialRow's way, rather than a prop standing in for it.
+ */
+:where([data-dds-context="marketing"]) .dds-stats .dds-stats__title:last-child {
+  margin-block-end: 0;
+}
+
+/*
+ * The figure as written and the running number share one cell.
+ *
+ * Both in the first row and column, so the cell is as wide as the wider of the two — which is the
+ * final figure, the running number never having more digits than the one it is climbing to. That
+ * is what holds the width while it counts: the label under it and the figures beside it stay where
+ * they are. A grid area is a pair of lines rather than a keyword, so it cannot sit in the contract.
+ */
+:where([data-dds-context="marketing"]) .dds-stats .dds-stats__value > * {
+  grid-area: 1 / 1;
+}
+
+/*
+ * While it counts, the figure as written steps back behind the running number.
+ *
+ * Transparent rather than hidden: `visibility` and `display` would take it out of the accessibility
+ * tree, and it is the one thing there a screen reader should hear — the final figure, once. It also
+ * still holds the cell's width, which a hidden element would not.
+ */
+:where([data-dds-context="marketing"]) .dds-stats .dds-stats__value[data-counting="true"] > .dds-stats__amount {
+  opacity: var(--opacity-hidden);
+}
+
+/*
+ * Two to a row on a phone. `minmax(0, 1fr)` rather than `1fr`, so a figure that will not break —
+ * a long one, at the figure's size — shrinks to its column instead of pushing the row past the page.
+ */
+:where([data-dds-context="marketing"]) .dds-stats .dds-stats__list {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+/*
+ * On a phone, the wheel: one figure in place, the one before it smaller above, the next smaller
+ * below, turning on every motion.duration.hold — the reference site's mobile stats. useWheel sets
+ * `data-wheel` only below the fold, for two figures or more, and never for a reader who asked for
+ * less motion; without it the figures are the grid above.
+ *
+ * Start-aligned, as the heading is on a phone, and larger than the grid's figures — font.figure-lg
+ * for the number and body.lg for its label: one figure has the row to itself, and it is the one
+ * thing the band is showing.
+ *
+ * Every figure stands in the same cell, so the list is as tall as the tallest figure and each one
+ * is moved off it rather than laid out beside it. A step is a whole figure's own height — `100%` of
+ * the item, which the cell stretches to the tallest — rather than the arithmetic below: that sum is
+ * one line of label, and a label that wraps to two in German, or stands taller in Tamil, set every
+ * figure on the wheel into the next. The sum still sizes the room above and below. `--item` is a figure's height, the figure's line
+ * and the label's under it, so a step on the wheel is one figure: the one above sits a whole figure
+ * higher, at --dds-stats-wheel-side of its size (0.65) — the reference's scale, small enough that the one in place is plainly
+ * the one being read. The block padding is the room the side figures need, which is what is left of
+ * a figure's height once it is that far out and that much smaller.
+ *
+ * The side figures fade towards the band by a mask rather than by an ink of their own, so the wheel
+ * reads on every ground without a colour per ground.
+ */
+:where([data-dds-context="marketing"]) .dds-stats .dds-stats__list[data-wheel] {
+  --dds-stats-wheel-item: calc(
+    var(--font-figure-lg-size) * var(--font-figure-lg-line-height) + var(--space-gap-sm) + var(--font-body-lg-size) *
+      var(--font-body-lg-line-height)
+  );
+
+  /* The wheel's geometry, the reference's numbers, named once. The side figures' scale; the scale a
+     figure shrinks to out of sight; the share of a figure's height the side figures need as room
+     above and below; and where the mask's fade stops, from either edge. */
+  --dds-stats-wheel-side: 0.65;
+  --dds-stats-wheel-away: 0.4;
+  --dds-stats-wheel-room: 0.85;
+  --dds-stats-wheel-fade: 35%;
+
+  grid-template-columns: minmax(0, 1fr);
+  mask-image: linear-gradient(
+    transparent,
+    black var(--dds-stats-wheel-fade),
+    black calc(100% - var(--dds-stats-wheel-fade)),
+    transparent
+  );
+  padding-block: calc(var(--dds-stats-wheel-item) * var(--dds-stats-wheel-room));
+}
+
+/*
+ * The wheel is a tab stop while it turns — focus holds it still — so it shows where focus is. The
+ * ring is drawn inside: the mask would fade one drawn outside at its top and foot.
+ */
+:where([data-dds-context="marketing"]) .dds-stats .dds-stats__list[data-wheel]:focus-visible {
+  outline: var(--border-width-focus) solid var(--color-border-focus);
+  outline-offset: calc(-1 * var(--border-width-focus));
+}
+
+:where([data-dds-context="marketing"]) .dds-stats[data-ground="strong"] .dds-stats__list[data-wheel]:focus-visible {
+  outline-color: var(--color-border-focus-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-stats .dds-stats__list[data-wheel] > .dds-stats__item {
+  grid-area: 1 / 1;
+  transform-origin: left center;
+  transition-duration: var(--motion-duration-turn);
+  transition-property: opacity, scale, translate;
+  transition-timing-function: var(--motion-easing-reveal);
+}
+
+:where([data-dds-context="marketing"]) .dds-stats .dds-stats__list[data-wheel] .dds-stats__value {
+  font-family: var(--font-figure-lg-family);
+  font-size: var(--font-figure-lg-size);
+  font-weight: var(--font-figure-lg-weight);
+  letter-spacing: var(--font-figure-lg-letter-spacing);
+  line-height: var(--font-figure-lg-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-stats .dds-stats__list[data-wheel] .dds-stats__label {
+  font-family: var(--font-body-lg-family);
+  font-size: var(--font-body-lg-size);
+  font-weight: var(--font-body-lg-weight);
+  letter-spacing: var(--font-body-lg-letter-spacing);
+  line-height: var(--font-body-lg-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-stats .dds-stats__list[data-wheel] > [data-slot='above'] {
+  scale: var(--dds-stats-wheel-side);
+  translate: 0 -100%;
+}
+
+:where([data-dds-context="marketing"]) .dds-stats .dds-stats__list[data-wheel] > [data-slot='below'] {
+  animation: dds-stats-wheel-in var(--motion-duration-turn) var(--motion-easing-reveal);
+  scale: var(--dds-stats-wheel-side);
+  translate: 0 100%;
+}
+
+/*
+ * Out of sight, a figure waits where the one above leaves to — risen and shrunk away — so leaving is
+ * a movement on, never back. It comes in below by an arrival of its own, from further down and
+ * smaller, rather than by crossing the wheel to get there.
+ */
+:where([data-dds-context="marketing"]) .dds-stats .dds-stats__list[data-wheel] > [data-slot='hidden'] {
+  opacity: var(--opacity-hidden);
+  scale: var(--dds-stats-wheel-away);
+  translate: 0 -100%;
+}
+
+@keyframes dds-stats-wheel-in {
+  from {
+    opacity: var(--opacity-hidden);
+    scale: var(--dds-stats-wheel-away);
+    translate: 0 200%;
+  }
+}
+
+/*
+ * A reader who asked for less motion never gets the wheel — useWheel leaves the figures a grid — so
+ * this only says so in the sheet as well: were a wheel ever drawn for them, it would change places
+ * without moving.
+ */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-stats .dds-stats__list[data-wheel] > .dds-stats__item {
+    animation: none;
+    transition: none;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-stats .dds-stats__dot {
+    transition: none;
+  }
+}
+
+/*
+ * The wheel's dots on its start edge, and the figures beside them.
+ *
+ * While the wheel turns the section is a grid of two columns: the dots as wide as a dot, the figures
+ * the rest, the heading across both. The dots stand level with the figure in place, which is the
+ * middle of the list. Between the two, space.gap.md — the step between a control and what it
+ * describes.
+ *
+ * The dot in place is drawn long, size.dot.current, at full strength: PaginationDots' current dot
+ * on end, growing as the next figure turns in, the dots after it moving along to make room. It is
+ * the brand's coral, color.bg.brand, where the rest take the band's ink: the one mark of colour in
+ * the section says which figure is being read, and it holds on all three grounds.
+ */
+:where([data-dds-context="marketing"]) .dds-stats .dds-stats__inner:has(> .dds-stats__list[data-wheel]) {
+  column-gap: var(--space-gap-md);
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+}
+
+:where([data-dds-context="marketing"]) .dds-stats .dds-stats__inner:has(> .dds-stats__list[data-wheel]) > .dds-stats__header {
+  grid-column: 1 / -1;
+}
+
+:where([data-dds-context="marketing"]) .dds-stats .dds-stats__inner:has(> .dds-stats__list[data-wheel]) > .dds-stats__dots {
+  align-self: center;
+  display: flex;
+}
+
+:where([data-dds-context="marketing"]) .dds-stats .dds-stats__dot {
+  transition-duration: var(--motion-duration-turn);
+  transition-property: background-color, block-size, opacity;
+  transition-timing-function: var(--motion-easing-reveal);
+}
+
+:where([data-dds-context="marketing"]) .dds-stats .dds-stats__dot[data-current="true"] {
+  background-color: var(--color-bg-brand);
+  block-size: var(--size-dot-current);
+  opacity: var(--opacity-dot-current);
+}
+
+/*
+ * The figures shrink towards the edge they start at, so the one above and the one below stay in line
+ * with the one in place and with the heading over them.
+ */
+:where([data-dds-context="marketing"]) .dds-stats:dir(rtl) .dds-stats__list[data-wheel] > .dds-stats__item {
+  transform-origin: right center;
+}
+
+/*
+ * From the fold, the header and every figure are centred, the heading over the set it names.
+ *
+ * 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. A figure is centred in its
+ * column, so a row of them sits under the middle of the heading rather than to its start.
+ *
+ * `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-stats .dds-stats__header {
+    align-items: center;
+    margin-inline: auto;
+    text-align: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-stats .dds-stats__description {
+    margin-inline: auto;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-stats .dds-stats__item {
+    align-items: center;
+    text-align: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-stats .dds-stats__value {
+    justify-items: center;
+  }
+
+  /*
+   * How many figures share a row, read from the figures — FeatureCards' way, `:has()` asking the
+   * markup for the count it already holds rather than a prop restating it.
+   *
+   * Three to a row by default, which is five as three and two, and six as two rows of three. Three
+   * or fewer take one row of their own. Four are two rows of two here and one row at full width:
+   * four figures across a tablet's column are each narrower than a figure is wide at this size.
+   *
+   * Where `:has()` is not supported every count takes three to a row: the set still reads, only
+   * less exactly.
+   */
+  :where([data-dds-context="marketing"]) .dds-stats .dds-stats__list {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  :where([data-dds-context="marketing"]) .dds-stats .dds-stats__list:has(> :nth-child(4):last-child),
+  :where([data-dds-context="marketing"]) .dds-stats .dds-stats__list:has(> :nth-child(2):last-child) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  :where([data-dds-context="marketing"]) .dds-stats .dds-stats__list:has(> :only-child) {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+@container (min-width: 64rem) {
+  :where([data-dds-context="marketing"]) .dds-stats .dds-stats__list:has(> :nth-child(4):last-child) {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}

package/dist/components/blocks/stats/use-wheel.d.ts

@@ -0,0 +1,37 @@
+import { type FocusEvent, type PointerEvent, type RefObject } from 'react';
+/** Where a figure stands on the wheel, relative to the one in place. */
+export type WheelSlot = 'active' | 'above' | 'below' | 'hidden';
+/**
+ * A figure's place on the wheel at a given turn: the one in place, the one it replaced above it, the
+ * one coming in below it, and every other figure out of sight.
+ *
+ * With two figures there is no "above" — the one that leaves comes straight back in below — and with
+ * three the one above goes straight to below, which the stylesheet draws as an arrival from below
+ * rather than as a figure crossing the wheel.
+ */
+export declare function slotOf(at: number, turn: number, count: number): WheelSlot;
+/**
+ * The phone's wheel of figures — the reference site's mobile stats: one figure in place, the one
+ * before it smaller above and the next smaller below, turning on to the next every
+ * motion.duration.hold plus motion.duration.turn.
+ *
+ * It turns only where every condition for it holds, and otherwise hands back `wheeling: false` and
+ * the figures are the grid they are from the fold:
+ * - the section is narrower than the fold, read off the section itself — a container, not the
+ *   viewport, as the stylesheet reads it;
+ * - there are two figures or more;
+ * - the reader has not asked for less motion — the grid is the still version of the same set;
+ * - the section is on screen. A wheel nobody can see does not turn, and starts again where it was;
+ * - nothing holds or has stopped it — see `hold`.
+ */
+export declare function useWheel(section: RefObject<HTMLElement | null>, count: number): {
+    wheeling: boolean;
+    turn: number;
+    hold: {
+        onPointerEnter: (event: PointerEvent<HTMLElement>) => void;
+        onPointerLeave: (event: PointerEvent<HTMLElement>) => void;
+        onFocus: () => void;
+        onBlur: (event: FocusEvent<HTMLElement>) => void;
+        onPointerDownCapture: (event: PointerEvent<HTMLElement>) => void;
+    };
+};