@deriv-com/dds-marketing 1.0.1 → 1.1.0

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

@@ -0,0 +1,32 @@
+import type { ReactNode } from 'react';
+import type { SceneScrollScene } from '../../scene-scroll-data.js';
+export interface SceneScrollOwnProps {
+    /**
+     * `h2` — The default: the section sits under the page's own h1, and the scenes' titles are drawn at font.h2
+     * `h1` — The section opens a campaign page and the first scene's title is the page's heading — the reference design's hero use. Drawn at font.h1, the opening band's size
+     */
+    headingLevel?: 'h2' | 'h1';
+    /** Always. The scene the section opens on: a title in a few words, a line under it where the title needs one, and the photograph filling the band behind them. Its title names the section, so it is the one to write as the section's heading. Give the photograph's width and height; `alt` empty unless it shows something the words do not. */
+    first: SceneScrollScene;
+    /** Always. The scene the section changes over to, in the same shape as the first. A title of about the same length as the first, so the words change in place rather than jumping, and a photograph of the same composition where there is one, so the dissolve reads as one place changing rather than a cut. */
+    second: SceneScrollScene;
+    /** A way on for the reader who wants more — "See trading hours", "Learn more". A standalone Link under the words, and it stays put through the change-over: it belongs to the section rather than to either scene, so it never fades while the reader is reaching for it. */
+    link?: ReactNode;
+}
+export type SceneScrollProps = SceneScrollOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const sceneScrollParts: {
+    readonly root: "dds-scenescroll";
+    readonly stage: "dds-scenescroll__stage";
+    readonly scene: "dds-scenescroll__scene";
+    readonly media: "dds-scenescroll__media";
+    readonly image: "dds-scenescroll__image";
+    readonly content: "dds-scenescroll__content";
+    readonly title: "dds-scenescroll__title";
+    readonly description: "dds-scenescroll__description";
+    readonly link: "dds-scenescroll__link";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const sceneScrollDefaults: {
+    readonly headingLevel: "h2";
+};

package/dist/components/blocks/scene-scroll/SceneScroll.types.js

@@ -0,0 +1,15 @@
+// GENERATED from scene-scroll.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const sceneScrollParts = {
+    root: 'dds-scenescroll',
+    stage: 'dds-scenescroll__stage',
+    scene: 'dds-scenescroll__scene',
+    media: 'dds-scenescroll__media',
+    image: 'dds-scenescroll__image',
+    content: 'dds-scenescroll__content',
+    title: 'dds-scenescroll__title',
+    description: 'dds-scenescroll__description',
+    link: 'dds-scenescroll__link',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const sceneScrollDefaults = { headingLevel: 'h2' };

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

@@ -0,0 +1,275 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * `:where([data-dds-context="marketing"])` confines these rules without contributing specificity,
+ * so each is decided against the generated rule on its own terms.
+ */
+
+/*
+ * Each scene is a screen tall, the photograph behind and the words over it.
+ *
+ * This is the whole of the layout wherever the scroll does not drive the change-over — a browser
+ * with no scroll timeline, a reader who asked for less motion, the page before any script: two
+ * scenes one after the other, each its own screen, every word at full strength and nothing pinned.
+ * The rules further down only add the track, the pin and the dissolve on top of it.
+ *
+ * `100cqh` rather than `100svh`, LandingHero's reason: with no ancestor declaring size containment
+ * a container query length falls back to the small viewport, so on a real page the two are the same
+ * number — the small viewport, measured with the browser's chrome showing, so a phone's address bar
+ * coming and going never resizes the scene mid-scroll as `vh` would. What the container unit adds
+ * is a frame standing in for a window: the preview's frame declares `container-type: size`, and the
+ * scene measures against that rather than escaping it. The section's own `container-type` is
+ * `inline-size`, which answers no question about height, so the unit passes straight through it.
+ * A screen is a length no token holds, which is why it is written here.
+ *
+ * `min-block-size`, so a scene whose words run long grows rather than clipping them.
+ */
+:where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__scene {
+  min-block-size: 100cqh;
+}
+
+/*
+ * The photograph fills its scene, edge to edge, cropped to fill — the scene is a shape the screen
+ * decided, and a photograph letterboxed in it would show the band through the gaps.
+ *
+ * Stacking order inside the scene, which `isolation` on the scene keeps to itself: the photograph
+ * at the back, the words over it. An integer with no unit, which is why it is here.
+ */
+:where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__media {
+  inset: 0;
+  z-index: 0;
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__image {
+  block-size: 100%;
+  inline-size: 100%;
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__content {
+  z-index: 1;
+}
+
+/*
+ * The scrim, the same over the whole scene.
+ *
+ * color.bg.overlay is ImageBanner cover's scrim, held here across the whole photograph rather than
+ * fading to clear: the words are centred over the scene from the fold and run its width on a phone,
+ * so there is no clear side to leave. White over it keeps AA over any photograph, a pale one
+ * included — a white photograph comes out a mid grey, which white words clear comfortably — so the
+ * words never depend on the photograph being dark, and neither scene's words change colour.
+ *
+ * A pseudo-element of the photograph's frame, so it dissolves in with the second photograph rather
+ * than being laid over the first a second time.
+ */
+:where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__media::after {
+  background-color: var(--color-bg-overlay);
+  content: '';
+  inset: 0;
+  pointer-events: none;
+  position: absolute;
+}
+
+/*
+ * A title with nothing under it carries no step under it.
+ */
+:where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__title:last-child {
+  margin-block-end: 0;
+}
+
+/*
+ * Where the words sit, the reference design's arrangement.
+ *
+ * Below 62rem — the reference's 992px, the same bound FeatureCards takes from it — the words are at
+ * the top of the stage and start at the edge, under the room a navigation bar takes: size.bar-height
+ * and the section's own step over it, about the reference's 112. From 62rem they are centred in
+ * the stage, across and down — a centred title wraps to ragged lines whose edge the eye loses on a
+ * narrow screen, which is the section-title rule's reason too. The group and its line are capped
+ * narrower than the column, so `margin-inline: auto` centres those boxes as well as their words.
+ *
+ * Longhand because `var()` is not permitted in a container query condition; `61.9375rem` is the last
+ * width below that bound. The section declares the container, and these are rules on what is inside
+ * it, which is the only thing a container query can style.
+ */
+@container (max-width: 61.9375rem) {
+  :where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__scene {
+    justify-content: flex-start;
+    padding-block-start: calc(var(--size-bar-height) + var(--space-section-default));
+  }
+}
+
+@container (min-width: 62rem) {
+  :where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__content {
+    align-items: center;
+    margin-inline: auto;
+    text-align: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__description {
+    margin-inline: auto;
+  }
+}
+
+/*
+ * The photographs are anchored at their foot, as the reference's are, so a crop takes from the sky
+ * rather than from the ground the scene stands on.
+ */
+:where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__image {
+  object-position: bottom;
+}
+
+/*
+ * The change-over, scrubbed by the scroll.
+ *
+ * The section becomes the track: two and a half screens tall, `250cqh` (the small viewport on a
+ * real page, for the reason above). The stage pins to the top of the window for the length of it,
+ * a screen tall, with both scenes stacked in its one cell, the second over the first. That leaves a
+ * screen and a half of scrolling while the stage holds still, which is the reference design's
+ * 250vh track and its 150vh of travel, without `vh`.
+ *
+ * The section names a view timeline, and three things run down it over `contain` — the stretch in
+ * which the track covers the whole window, which is exactly the stretch the stage is pinned for:
+ *
+ *   the second photograph, and its scrim with it, dissolves in from 20% to 80%;
+ *   the first scene's words fade out from 20% to 45%;
+ *   the second scene's words fade in from 55% to 80%.
+ *
+ * The words change one after the other rather than crossing, so two titles are never on screen
+ * half-drawn over each other; the photograph takes the whole stretch, so the place changes under
+ * them while they do. A fifth of the stretch is held still at each end, so a reader arriving sees
+ * the first scene settled and one leaving sees the second. The reference ran the change over the
+ * middle third of the section's whole pass; this is the same middle, measured on the pin.
+ *
+ * Linear, because the scroll is the easing. Only one end of each fade is written — the other is
+ * the element's own resting opacity — so nothing here restates full strength as a number, and
+ * opacity.hidden is the role for what a reveal fades from.
+ *
+ * Only for a reader who has not asked for less motion, and only where a scroll timeline exists —
+ * asked around the rules rather than undone after them, because an undoing reset that loses to a
+ * more specific rule leaves the movement running for exactly the reader who asked it not to. Both
+ * conditions false is the layout at the top of this file: two scenes, one after the other.
+ *
+ * The timeline and the pin both measure against the nearest scroll container, which is why nothing
+ * between the section and the page may clip with `overflow: hidden`: `hidden` makes a box a scroll
+ * container even when it never scrolls, which freezes the dissolve and unpins the stage. The stage
+ * clips with `overflow: clip`, which does neither.
+ */
+@keyframes dds-scenescroll-arrive {
+  from {
+    opacity: var(--opacity-hidden);
+  }
+}
+
+@keyframes dds-scenescroll-leave {
+  to {
+    opacity: var(--opacity-hidden);
+  }
+}
+
+@supports (animation-timeline: view()) {
+  @media (prefers-reduced-motion: no-preference) {
+    :where([data-dds-context="marketing"]) .dds-scenescroll {
+      block-size: 250cqh;
+      view-timeline: --dds-scenescroll-track block;
+    }
+
+    :where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__stage {
+      inset-block-start: 0;
+      min-block-size: 100cqh;
+      overflow: clip;
+      position: sticky;
+    }
+
+    :where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__scene[data-scene="second"] .dds-scenescroll__media {
+      animation: dds-scenescroll-arrive linear both;
+      animation-range: contain 20% contain 80%;
+      animation-timeline: --dds-scenescroll-track;
+    }
+
+    :where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__scene[data-scene="first"] .dds-scenescroll__content {
+      animation: dds-scenescroll-leave linear both;
+      animation-range: contain 20% contain 45%;
+      animation-timeline: --dds-scenescroll-track;
+    }
+
+    :where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__scene[data-scene="second"] .dds-scenescroll__content {
+      animation: dds-scenescroll-arrive linear both;
+      animation-range: contain 55% contain 80%;
+      animation-timeline: --dds-scenescroll-track;
+    }
+  }
+}
+
+/*
+ * The link sits right under the words, whichever scene's words are showing.
+ *
+ * It belongs to the section rather than to a scene, so it does not fade with either. While the
+ * scenes change over, both scenes' words are laid into one grid area of the stage — the scenes
+ * themselves step out of the way (`display: contents`), so their photographs and their words become
+ * the stage's own items — and that area is as tall as the taller of the two. The link is the row
+ * under it, at space.heading.description-actions, the step from words to what a reader can do: under
+ * the text on every screen, and still while the text changes over it.
+ *
+ * Below 62rem the words and the link sit at the top of the stage, under the room a navigation bar
+ * takes; from 62rem they are centred down the stage, the empty rows above and below sharing what is
+ * left. The stage carries the section's insets here, since the scenes that held them are contents.
+ *
+ * In the plain fallback, where the scenes stack, the link is the stage's last row, under the second
+ * scene, on the band's own ground, with its own insets.
+ */
+@container (min-width: 62rem) {
+  :where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__link {
+    justify-content: center;
+  }
+}
+
+@supports (animation-timeline: view()) {
+  @media (prefers-reduced-motion: no-preference) {
+    :where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__stage {
+      grid-template-areas:
+        'words'
+        'link'
+        '.';
+      grid-template-columns: minmax(0, 1fr);
+      grid-template-rows: auto auto 1fr;
+      padding-block: calc(var(--size-bar-height) + var(--space-section-default)) var(--space-section-default);
+      padding-inline: var(--space-inset-page);
+    }
+
+    :where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__scene {
+      display: contents;
+    }
+
+    :where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__media {
+      inset: 0;
+      z-index: 0;
+    }
+
+    :where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__content {
+      grid-area: words;
+      z-index: 1;
+    }
+
+    :where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__link {
+      grid-area: link;
+      margin-block-start: var(--space-heading-description-actions);
+      padding: 0;
+      z-index: 1;
+    }
+  }
+}
+
+@container (min-width: 62rem) {
+  @supports (animation-timeline: view()) {
+    @media (prefers-reduced-motion: no-preference) {
+      :where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__stage {
+        grid-template-areas:
+          '.'
+          'words'
+          'link'
+          '.';
+        grid-template-rows: 1fr auto auto 1fr;
+        padding-block: var(--space-section-default);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,139 @@
+/* GENERATED from stats.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-stats {
+  box-sizing: border-box;
+  container-type: inline-size;
+  display: flex;
+  inline-size: 100%;
+  justify-content: center;
+  overflow-wrap: anywhere;
+}
+
+:where([data-dds-context="marketing"]) .dds-stats .dds-stats__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-stats .dds-stats__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-stats .dds-stats__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-stats .dds-stats__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-stats .dds-stats__list {
+  display: grid;
+  list-style: none;
+  margin: 0;
+  min-inline-size: 0;
+  padding: 0;
+  column-gap: var(--space-grid-gutter);
+  row-gap: var(--space-grid-gutter);
+}
+
+:where([data-dds-context="marketing"]) .dds-stats .dds-stats__dots {
+  display: none;
+  flex-direction: column;
+  row-gap: var(--space-gap-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-stats .dds-stats__dot {
+  background-color: currentcolor;
+  display: block;
+  block-size: var(--size-dot-diameter);
+  border-radius: var(--radius-pill);
+  inline-size: var(--size-dot-diameter);
+  opacity: var(--opacity-dot-rest);
+}
+
+:where([data-dds-context="marketing"]) .dds-stats .dds-stats__item {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  row-gap: var(--space-gap-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-stats .dds-stats__value {
+  display: grid;
+  font-variant-numeric: tabular-nums;
+  font-family: var(--font-figure-family);
+  font-size: var(--font-figure-size);
+  font-weight: var(--font-figure-weight);
+  letter-spacing: var(--font-figure-letter-spacing);
+  line-height: var(--font-figure-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-stats .dds-stats__amount {
+  display: block;
+}
+
+:where([data-dds-context="marketing"]) .dds-stats .dds-stats__count {
+  display: block;
+}
+
+:where([data-dds-context="marketing"]) .dds-stats .dds-stats__label {
+  display: block;
+  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);
+}
+
+:where([data-dds-context="marketing"]) .dds-stats[data-ground="page"] {
+  background-color: var(--color-bg-page);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-stats[data-ground="page"] .dds-stats__label {
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"]) .dds-stats[data-ground="strong"] {
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-stats[data-ground="strong"] .dds-stats__label {
+  color: var(--color-fg-muted-inverse);
+}
+
+:where([data-dds-context="marketing"]) .dds-stats[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);
+}
+
+:where([data-dds-context="marketing"]) .dds-stats[data-ground="subtle"] .dds-stats__label {
+  color: var(--color-fg-muted);
+}
+

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

@@ -0,0 +1,24 @@
+import './Stats.css';
+import './stats-impl.css';
+import '../block-reveal.css';
+import { type StatsProps } from './Stats.types.js';
+export type { StatsProps };
+/**
+ * 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 declare function Stats({ ground, title, description, stats }: StatsProps): import("react").JSX.Element | null;

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' };