@deriv-com/dds-marketing 1.0.2 → 1.1.0

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

@@ -0,0 +1,93 @@
+/* GENERATED from scenescroll.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-scenescroll {
+  box-sizing: border-box;
+  container-type: inline-size;
+  display: block;
+  inline-size: 100%;
+  overflow-wrap: anywhere;
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__stage {
+  box-sizing: border-box;
+  display: grid;
+  inline-size: 100%;
+  min-inline-size: 0;
+  row-gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__scene {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  isolation: isolate;
+  justify-content: center;
+  min-inline-size: 0;
+  position: relative;
+  padding-block: var(--space-section-default);
+  padding-inline: var(--space-inset-page);
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__media {
+  overflow: clip;
+  position: absolute;
+  border-radius: var(--radius-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__image {
+  display: block;
+  object-fit: cover;
+  border-radius: var(--radius-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__content {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  position: relative;
+  max-inline-size: var(--size-heading-group-max);
+  row-gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__title {
+  margin-block: 0;
+  text-wrap: balance;
+  margin-block-end: var(--space-heading-title-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__description {
+  margin-block: 0;
+  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);
+  max-inline-size: var(--size-measure-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescroll .dds-scenescroll__link {
+  display: flex;
+  position: relative;
+  padding-block-end: var(--space-section-default);
+  padding-inline: var(--space-inset-page);
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescroll[data-heading-level="h1"] .dds-scenescroll__title {
+  font-family: var(--font-h1-family);
+  font-size: var(--font-h1-size);
+  font-weight: var(--font-h1-weight);
+  letter-spacing: var(--font-h1-letter-spacing);
+  line-height: var(--font-h1-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-scenescroll[data-heading-level="h2"] .dds-scenescroll__title {
+  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);
+}
+

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

@@ -0,0 +1,36 @@
+import './SceneScroll.css';
+import './scene-scroll-impl.css';
+import { type SceneScrollProps } from './SceneScroll.types.js';
+export type { SceneScrollProps };
+/**
+ * Two full-screen scenes that change over as the reader scrolls — the reference design's
+ * DayNightTransition, made generic: two photographs, each with a heading and a line, and the
+ * dissolve from one to the other.
+ *
+ * Nothing here runs a script. The reference tracked the section's scroll progress in Framer Motion,
+ * smoothed it with a spring and wrote opacities and an interpolated text colour inline every frame;
+ * a view timeline is the platform doing that, so the stylesheet does all of it. The section is the
+ * track and names the timeline, the stage pins inside it, and the second photograph and the two
+ * sets of words run down the timeline. Without one — an older browser, a reader who asked for less
+ * motion, the page before any script — the scenes are simply drawn one after the other.
+ *
+ * Both scenes' words are always in the DOM, in order, and neither is hidden from assistive
+ * technology. The reference hid the second state's words with `aria-hidden` while the first was
+ * showing, so a screen reader only ever heard half the section; here a reader hears both, first
+ * then second, which is the order the page tells them in.
+ *
+ * The section is named by the first scene's title rather than a label of its own: it is on screen,
+ * it is what the section is about, and a hidden name would be one more string for a page to
+ * translate and keep in step. The second scene's title sits one level under it, as the second half
+ * of the section the first one names.
+ *
+ * The words are white over a scrim, in both scenes and both modes, rather than the reference's text
+ * colour running black to white with the scroll: a colour that changes with the photograph has to
+ * be checked against every frame of the dissolve, and white over color.bg.overlay is legible over
+ * any photograph at every frame, a pale one included.
+ *
+ * `'use client'` for `useId`, which names the region by its heading. There is no arrival: every
+ * other block comes up on `useReveal`, and that arrival is an opacity of its own on the parts that
+ * make it — on these words it would fight the scrub. The change-over is this block's entrance.
+ */
+export declare function SceneScroll({ first, second, link, headingLevel, }: SceneScrollProps): import("react").JSX.Element | null;

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

@@ -0,0 +1,54 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import './SceneScroll.css';
+import './scene-scroll-impl.css';
+import { given } from '../../given.js';
+import { sceneScrollDefaults, sceneScrollParts } from './SceneScroll.types.js';
+/** The level under the first scene's, for the second scene's title. */
+const under = { h1: 'h2', h2: 'h3' };
+/**
+ * Two full-screen scenes that change over as the reader scrolls — the reference design's
+ * DayNightTransition, made generic: two photographs, each with a heading and a line, and the
+ * dissolve from one to the other.
+ *
+ * Nothing here runs a script. The reference tracked the section's scroll progress in Framer Motion,
+ * smoothed it with a spring and wrote opacities and an interpolated text colour inline every frame;
+ * a view timeline is the platform doing that, so the stylesheet does all of it. The section is the
+ * track and names the timeline, the stage pins inside it, and the second photograph and the two
+ * sets of words run down the timeline. Without one — an older browser, a reader who asked for less
+ * motion, the page before any script — the scenes are simply drawn one after the other.
+ *
+ * Both scenes' words are always in the DOM, in order, and neither is hidden from assistive
+ * technology. The reference hid the second state's words with `aria-hidden` while the first was
+ * showing, so a screen reader only ever heard half the section; here a reader hears both, first
+ * then second, which is the order the page tells them in.
+ *
+ * The section is named by the first scene's title rather than a label of its own: it is on screen,
+ * it is what the section is about, and a hidden name would be one more string for a page to
+ * translate and keep in step. The second scene's title sits one level under it, as the second half
+ * of the section the first one names.
+ *
+ * The words are white over a scrim, in both scenes and both modes, rather than the reference's text
+ * colour running black to white with the scroll: a colour that changes with the photograph has to
+ * be checked against every frame of the dissolve, and white over color.bg.overlay is legible over
+ * any photograph at every frame, a pale one included.
+ *
+ * `'use client'` for `useId`, which names the region by its heading. There is no arrival: every
+ * other block comes up on `useReveal`, and that arrival is an opacity of its own on the parts that
+ * make it — on these words it would fight the scrub. The change-over is this block's entrance.
+ */
+export function SceneScroll({ first, second, link, headingLevel = sceneScrollDefaults.headingLevel, }) {
+    const titleId = useId();
+    // Both scenes are required, but a record from a feed or an editor is not typed: one that never
+    // arrived draws nothing rather than taking the page down, and a section with half its change-over
+    // missing is not the section, so neither scene is drawn alone.
+    if (!first || !second)
+        return null;
+    return (_jsx("section", { className: sceneScrollParts.root, "data-heading-level": headingLevel, "aria-labelledby": titleId, children: _jsxs("div", { className: sceneScrollParts.stage, children: [_jsx(Scene, { which: "first", scene: first, level: headingLevel, titleId: titleId, eager: headingLevel === 'h1' }), _jsx(Scene, { which: "second", scene: second, level: under[headingLevel] }), link ? _jsx("div", { className: sceneScrollParts.link, children: link }) : null] }) }));
+}
+function Scene({ which, scene, level, titleId, eager = false }) {
+    const Title = level;
+    const { image } = scene;
+    return (_jsxs("div", { className: sceneScrollParts.scene, "data-scene": which, children: [_jsx("div", { className: sceneScrollParts.media, children: image ? (_jsx("img", { className: sceneScrollParts.image, src: image.src, alt: image.alt ?? '', width: image.width, height: image.height, loading: eager ? 'eager' : 'lazy', decoding: "async" })) : null }), _jsxs("div", { className: sceneScrollParts.content, children: [_jsx(Title, { className: sceneScrollParts.title, id: titleId, children: scene.title }), given(scene.description) ? _jsx("p", { className: sceneScrollParts.description, children: scene.description }) : null] })] }));
+}

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;