@deriv-com/dds-marketing 1.1.2 → 1.2.0

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

@@ -0,0 +1,370 @@
+/*
+ * 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-scenescrollword .dds-scenescrollword__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-scenescrollword .dds-scenescrollword__media {
+  inset: 0;
+  z-index: 0;
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__image {
+  block-size: 100%;
+  inline-size: 100%;
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__content {
+  z-index: 1;
+}
+
+/*
+ * The words sit straight on the photograph, in the ink the scene names.
+ *
+ * No scrim: the photograph is shown as it was taken, and the words are drawn in whichever ink it
+ * leaves room for — color.fg.on-media-light, near-black in both modes, over a light photograph such
+ * as a daylight sky, and the section's own color.fg.on-brand-strong, white, over a dark one. The
+ * photograph does not change with the theme, so neither ink does. The block cannot see the
+ * photograph, so the scene says which, and the author answers for the contrast.
+ *
+ * On the scene, so its title and its line take it together, and inherited through the scene even
+ * where the scroll lays the scenes out as `display: contents`.
+ */
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__scene[data-ink="dark"] {
+  color: var(--color-fg-on-media-light);
+}
+
+/*
+ * A title with nothing under it carries no step under it.
+ */
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__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 down
+ * the stage and still start at the edge, in a column capped at the heading group's measure: the
+ * reference design's later arrangement, which leaves the far side of the photograph to its subject
+ * rather than writing over the middle of it. On either side of the bound the words start, so the
+ * eye finds the same edge on every line and a photograph composed for one width holds at the other.
+ *
+ * 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-scenescrollword .dds-scenescrollword__scene {
+    justify-content: flex-start;
+    padding-block-start: calc(var(--size-bar-height) + var(--space-section-default));
+  }
+}
+
+/*
+ * The words keep to the page's content column.
+ *
+ * They start, from 62rem as below it, so on a wide window they would otherwise sit at the page's
+ * gutter while every section around them starts at the edge of size.content.max. The photograph
+ * still fills the band edge to edge; only the words and the action are inset, by the page's gutter or
+ * by however much the window is wider than the content column on each side, whichever is more —
+ * where the column starts in ImageBanner, FeatureCards and the rest.
+ *
+ * Named once on the section, because three boxes take it: each scene and the action in the plain
+ * fallback, and the stage, which carries the insets while the scroll drives the change-over.
+ */
+:where([data-dds-context="marketing"]) .dds-scenescrollword {
+  --dds-scenescrollword-column-inset: max(var(--space-inset-page), calc((100% - var(--size-content-max)) / 2));
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__scene,
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__action {
+  padding-inline: var(--dds-scenescrollword-column-inset);
+}
+
+/*
+ * 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-scenescrollword .dds-scenescrollword__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 the second photograph dissolves in down it from 20% to
+ * 80% of `contain` — the stretch in which the track covers the whole window, which
+ * is exactly the stretch the stage is pinned for. The words run down the same timeline, and how is
+ * set out with them at the end of this file.
+ *
+ * The photograph takes the whole stretch, so the place changes under the words 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-scenescrollword-arrive {
+  from {
+    opacity: var(--opacity-hidden);
+  }
+}
+
+@keyframes dds-scenescrollword-leave {
+  to {
+    opacity: var(--opacity-hidden);
+  }
+}
+
+@supports (animation-timeline: view()) {
+  @media (prefers-reduced-motion: no-preference) {
+    :where([data-dds-context="marketing"]) .dds-scenescrollword {
+      block-size: 250cqh;
+      view-timeline: --dds-scenescrollword-track block;
+    }
+
+    :where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__stage {
+      inset-block-start: 0;
+      min-block-size: 100cqh;
+      overflow: clip;
+      position: sticky;
+    }
+
+    :where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__scene[data-scene="second"] .dds-scenescrollword__media {
+      animation: dds-scenescrollword-arrive linear both;
+      animation-range: contain 20% contain 80%;
+      animation-timeline: --dds-scenescrollword-track;
+    }
+  }
+}
+
+/*
+ * The action 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 action 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 action 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, and start at the edge with the words on both sides of the bound. 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 action is the stage's last row, under the second
+ * scene, on the band's own ground, with its own insets.
+ */
+@supports (animation-timeline: view()) {
+  @media (prefers-reduced-motion: no-preference) {
+    :where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__stage {
+      grid-template-areas:
+        'words'
+        'action'
+        '.';
+      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(--dds-scenescrollword-column-inset);
+    }
+
+    :where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__scene {
+      display: contents;
+    }
+
+    :where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__media {
+      inset: 0;
+      z-index: 0;
+    }
+
+    :where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__content {
+      grid-area: words;
+      z-index: 1;
+    }
+
+    :where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__action {
+      grid-area: action;
+      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-scenescrollword .dds-scenescrollword__stage {
+        grid-template-areas:
+          '.'
+          'words'
+          'action'
+          '.';
+        grid-template-rows: 1fr auto auto 1fr;
+        padding-block: var(--space-section-default);
+      }
+    }
+  }
+}
+
+/*
+ * One claim, one word changed.
+ *
+ * The word's slot stacks the scene's own word and the other scene's in one cell, so the slot is as
+ * wide as the wider of the two and both titles lay out alike — the shared words before and after
+ * it in the same places, the words starting at the same point, at every width and in either
+ * direction. `start` is the reading side, so in a right-to-left page the words share their right
+ * edge. The other scene's word holds its room and is never drawn; it is kept from assistive
+ * technology in the markup, since the heading it belongs to is read in full.
+ *
+ * Wherever the scroll does not drive the change-over this is all there is: two scenes one after
+ * the other, each with its whole heading, "Trade all day" and then "Trade all night".
+ */
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__word > * {
+  grid-area: 1 / 1;
+  justify-self: start;
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__word > [data-word="other"] {
+  visibility: hidden;
+}
+
+/*
+ * Under the scroll, the scenes' words do not fade as wholes, as SceneScroll's do. Both headings lie
+ * in the one area of the stage, the second exactly over the first, and:
+ *
+ *   the first scene's line fades out from 20% to 45%, as its words did;
+ *   the first scene's word fades out as the second's fades in, from 45% to 55% — the stretch in
+ *   which neither line is showing, so nothing but the word is moving;
+ *   the second scene's line fades in from 55% to 80%.
+ *
+ * The second heading's shared words, before the word and after it, are never drawn here: the
+ * first's hold still over the whole pass, and two copies of the same words crossing would dip at
+ * the middle. They keep their opacity rather than their visibility so they stay in the
+ * accessibility tree, and the second heading is read whole.
+ *
+ * The words cross rather than one waiting for the other, because they share a place: a gap where
+ * the claim is missing its word reads as a fault, the reference's reason for crossing them in
+ * a few hundredths of the pass. A tenth here, slow enough to be seen to change.
+ */
+@supports (animation-timeline: view()) {
+  @media (prefers-reduced-motion: no-preference) {
+    :where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__scene[data-scene="second"] .dds-scenescrollword__before,
+    :where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__scene[data-scene="second"] .dds-scenescrollword__after {
+      opacity: var(--opacity-hidden);
+    }
+
+    /*
+     * Where the scenes name different inks the shared words cannot hold still in the first scene's:
+     * near-black words would be left on a night photograph. So they cross with the word instead,
+     * the first scene's out as the second's come in, over the same tenth of the pass — the same
+     * words in the same place, so what is seen is the claim changing colour as one piece.
+     *
+     * The second scene's are given back their resting strength first: the rule above leaves them
+     * undrawn, and an arrival comes up to whatever the element rests at.
+     */
+    :where([data-dds-context="marketing"]) .dds-scenescrollword[data-ink-change] .dds-scenescrollword__scene[data-scene="first"] :is(.dds-scenescrollword__before, .dds-scenescrollword__after) {
+      animation: dds-scenescrollword-leave linear both;
+      animation-range: contain 45% contain 55%;
+      animation-timeline: --dds-scenescrollword-track;
+    }
+
+    :where([data-dds-context="marketing"]) .dds-scenescrollword[data-ink-change] .dds-scenescrollword__scene[data-scene="second"] :is(.dds-scenescrollword__before, .dds-scenescrollword__after) {
+      animation: dds-scenescrollword-arrive linear both;
+      animation-range: contain 45% contain 55%;
+      animation-timeline: --dds-scenescrollword-track;
+      opacity: initial;
+    }
+
+    :where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__scene[data-scene="first"] .dds-scenescrollword__description {
+      animation: dds-scenescrollword-leave linear both;
+      animation-range: contain 20% contain 45%;
+      animation-timeline: --dds-scenescrollword-track;
+    }
+
+    :where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__scene[data-scene="first"] .dds-scenescrollword__word {
+      animation: dds-scenescrollword-leave linear both;
+      animation-range: contain 45% contain 55%;
+      animation-timeline: --dds-scenescrollword-track;
+    }
+
+    :where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__scene[data-scene="second"] .dds-scenescrollword__word {
+      animation: dds-scenescrollword-arrive linear both;
+      animation-range: contain 45% contain 55%;
+      animation-timeline: --dds-scenescrollword-track;
+    }
+
+    :where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__scene[data-scene="second"] .dds-scenescrollword__description {
+      animation: dds-scenescrollword-arrive linear both;
+      animation-range: contain 55% contain 80%;
+      animation-timeline: --dds-scenescrollword-track;
+    }
+  }
+}
+
+/*
+ * From 62rem the words keep to half the stage.
+ *
+ * The words start at the edge and the photograph's subject is on the far side, but the heading
+ * group's measure alone is most of a laptop's width: a title in a few words ran three quarters of
+ * the way across and over the face it was meant to sit beside. Held to half the stage, or the
+ * heading group's measure where that is narrower, the title wraps in the words' own half and the
+ * other half is the subject's — the reference design's left column. Below 62rem the words run the
+ * width, at the top of a photograph whose subject is below them.
+ */
+@container (min-width: 62rem) {
+  :where([data-dds-context="marketing"]) .dds-scenescrollword .dds-scenescrollword__content {
+    max-inline-size: min(var(--size-heading-group-max), 50%);
+  }
+}

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

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

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

@@ -4,12 +4,15 @@ import { useCallback, useId, useLayoutEffect, useRef, useState } from 'react';
 import './Stats.css';
 import './stats-impl.css';
 import '../block-reveal.css';
+import '../block-pattern.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';
+import { Background } from '../../core/background/Background.js';
+import { PATTERN_TONE } from '../pattern-tone.js';
 /**
  * Where a figure comes in the arrival, capped so a long set does not keep a reader waiting.
  *
@@ -37,7 +40,7 @@ const stepOf = (at) => Math.min(FIRST_FIGURE + at, LAST_STEP);
  *
  * `'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 }) {
+export function Stats({ ground = statsDefaults.ground, background, title, description, stats, }) {
     const titleId = useId();
     const [band, revealed] = useReveal();
     const held = useRef(null);
@@ -104,17 +107,17 @@ export function Stats({ ground = statsDefaults.ground, title, description, stats
     // 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));
-                    }) })] }) }));
+    return (_jsxs("section", { className: statsParts.root, ref: section, "data-ground": ground, "data-background": background, "aria-labelledby": titleId, children: [background ? _jsx(Background, { tone: PATTERN_TONE[ground], pattern: background, children: null }) : null, _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

@@ -6,6 +6,14 @@ export interface StatsOwnProps {
      * `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';
+    /**
+     * `halftone` — A field of coral dots that grow towards a soft glow at the band's foot and settle to a fine screen away from it.
+     * `aurora` — Curtains of the brand's light rising from the band's foot and swaying slowly.
+     * `mesh` — The band in the brand's reds folded into one another like a liquid — the loudest of the five, for a dark band.
+     * `grid` — Hairlines a pitch apart rising from a soft bloom at the band's foot — the quietest, and the one to reach for first.
+     * `rings` — Hairline circles spreading out from the middle of the band's foot.
+     */
+    background?: 'halftone' | 'aurora' | 'mesh' | 'grid' | 'rings';
     /** 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." */

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

@@ -91,9 +91,12 @@
 
 /*
  * 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.
+ * fade goes while it holds focus: a mask fades everything the list paints, its ring too, so the
+ * ring's top and foot would vanish into it — and a reader on the keyboard, holding the wheel still,
+ * is the one reader who wants every figure plainly.
  */
 :where([data-dds-context="marketing"]) .dds-stats .dds-stats__list[data-wheel]:focus-visible {
+  mask-image: none;
   outline: var(--border-width-focus) solid var(--color-border-focus);
   outline-offset: calc(-1 * var(--border-width-focus));
 }

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

@@ -24,7 +24,7 @@ export declare function slotOf(at: number, turn: number, count: number): WheelSl
  * - 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): {
+export declare function useWheel(section: RefObject<HTMLElement | null>, count: number, always?: boolean): {
     wheeling: boolean;
     turn: number;
     hold: {

package/dist/components/blocks/stats/use-wheel.js

@@ -39,7 +39,7 @@ export function slotOf(at, turn, count) {
  * - 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 function useWheel(section, count) {
+export function useWheel(section, count, always = false) {
     const [narrow, setNarrow] = useState(false);
     const [seen, setSeen] = useState(false);
     const [turn, setTurn] = useState(0);
@@ -54,7 +54,11 @@ export function useWheel(section, count) {
     */
     const [held, setHeld] = useState(false);
     const [stopped, setStopped] = useState(false);
-    const wheeling = narrow && count > 1 && !still;
+    // Whether there is anything to turn. The section is not in the page while there is not — the
+    // blocks draw nothing for an empty list — so the observers below attach once there is.
+    const present = count > 0;
+    // A carousel turns at every width; the row of figures turns only below the fold.
+    const wheeling = (always || narrow) && count > 1 && !still;
     // Asked live rather than once: a reader who turns on reduced motion mid-visit stops the wheel then.
     useEffect(() => {
         if (typeof window.matchMedia !== 'function')
@@ -81,7 +85,7 @@ export function useWheel(section, count) {
         const observer = new ResizeObserver(measure);
         observer.observe(element);
         return () => observer.disconnect();
-    }, [section]);
+    }, [section, present]);
     useEffect(() => {
         const element = section.current;
         if (element === null || typeof IntersectionObserver === 'undefined')
@@ -89,7 +93,7 @@ export function useWheel(section, count) {
         const observer = new IntersectionObserver(([entry]) => setSeen(entry?.isIntersecting ?? false));
         observer.observe(element);
         return () => observer.disconnect();
-    }, [section]);
+    }, [section, present]);
     useEffect(() => {
         const element = section.current;
         if (!wheeling || !seen || held || stopped || element === null)