@deriv-com/dds-marketing 1.1.3 → 1.2.0

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)

package/dist/components/blocks/stats-carousel/StatsCarousel.css

@@ -0,0 +1,209 @@
+/* GENERATED from statscarousel.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-statscarousel {
+  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-statscarousel .dds-statscarousel__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-statscarousel .dds-statscarousel__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-statscarousel .dds-statscarousel__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-statscarousel .dds-statscarousel__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-statscarousel .dds-statscarousel__stage {
+  align-items: center;
+  display: grid;
+  justify-items: center;
+  gap: var(--space-gap-xl);
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__card {
+  box-sizing: border-box;
+  display: grid;
+  overflow: clip;
+  place-items: center;
+  position: relative;
+  border-radius: var(--radius-expressive);
+  padding-inline: var(--space-inset-xl);
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__list {
+  display: grid;
+  list-style: none;
+  margin-block: 0;
+  padding-inline: 0;
+  column-gap: var(--space-grid-gutter);
+  row-gap: var(--space-grid-gutter);
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__item {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  text-align: center;
+  row-gap: var(--space-gap-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__awards {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin-block: 0;
+  padding-inline: 0;
+  row-gap: var(--space-gap-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__award {
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  min-inline-size: 0;
+  column-gap: var(--space-gap-xs);
+  max-inline-size: var(--size-grid-track-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__award-laurel {
+  display: block;
+  flex: none;
+  inline-size: var(--icon-size-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__award-copy {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  text-align: center;
+  row-gap: var(--space-heading-title-description-compact);
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__award-name {
+  margin: 0;
+  text-wrap: balance;
+  font-family: var(--font-label-sm-family);
+  font-size: var(--font-label-sm-size);
+  font-weight: var(--font-label-sm-weight);
+  letter-spacing: var(--font-label-sm-letter-spacing);
+  line-height: var(--font-label-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__award-issuer {
+  margin: 0;
+  font-family: var(--font-body-sm-family);
+  font-size: var(--font-body-sm-size);
+  font-weight: var(--font-body-sm-weight);
+  letter-spacing: var(--font-body-sm-letter-spacing);
+  line-height: var(--font-body-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__label {
+  font-family: var(--font-body-lg-family);
+  font-size: var(--font-body-lg-size);
+  font-weight: var(--font-body-lg-weight);
+  letter-spacing: var(--font-body-lg-letter-spacing);
+  line-height: var(--font-body-lg-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__value {
+  font-family: var(--font-figure-lg-family);
+  font-size: var(--font-figure-lg-size);
+  font-weight: var(--font-figure-lg-weight);
+  letter-spacing: var(--font-figure-lg-letter-spacing);
+  line-height: var(--font-figure-lg-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel[data-ground="page"] {
+  background-color: var(--color-bg-page);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel[data-ground="page"] .dds-statscarousel__award-laurel {
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel[data-ground="page"] .dds-statscarousel__card {
+  background-color: var(--color-bg-surface);
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel[data-ground="page"] .dds-statscarousel__label {
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel[data-ground="strong"] {
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel[data-ground="strong"] .dds-statscarousel__award-laurel {
+  color: var(--color-fg-muted-inverse);
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel[data-ground="strong"] .dds-statscarousel__card {
+  background-color: var(--color-bg-surface-inverse);
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel[data-ground="strong"] .dds-statscarousel__label {
+  color: var(--color-fg-muted-inverse);
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel[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-statscarousel[data-ground="subtle"] .dds-statscarousel__award-laurel {
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel[data-ground="subtle"] .dds-statscarousel__card {
+  background-color: var(--color-bg-surface-card-raised);
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel[data-ground="subtle"] .dds-statscarousel__label {
+  color: var(--color-fg-muted);
+}
+

package/dist/components/blocks/stats-carousel/StatsCarousel.d.ts

@@ -0,0 +1,20 @@
+import './StatsCarousel.css';
+import './stats-carousel-impl.css';
+import '../block-reveal.css';
+import { type StatsCarouselProps } from './StatsCarousel.types.js';
+export type { StatsCarouselProps };
+/**
+ * A heading over a square card that turns through a few key figures, one at a time, with the awards
+ * behind them beside it — the reference design's Stats.
+ *
+ * The turn is Stats' own wheel (use-wheel.ts), turning at every width here rather than only on a
+ * phone: the same hold and turn, held while a pointer rests on the card or focus is in it, stopped for
+ * good by a press, and never for a reader who asked for less movement — they get the figures two to
+ * a row in the card. Every figure is in the list the whole time, so a screen reader reads them all.
+ *
+ * The awards are drawn the way the Awards block draws them — the same laurel (laurel.tsx), the same
+ * tokens — from the same records, so an award looks the same wherever a page shows it.
+ *
+ * `'use client'` for the turn, the reveal and `useId`, which names the region by its heading.
+ */
+export declare function StatsCarousel({ ground, title, description, stats, awards, }: StatsCarouselProps): import("react").JSX.Element | null;

package/dist/components/blocks/stats-carousel/StatsCarousel.js

@@ -0,0 +1,48 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef } from 'react';
+import './StatsCarousel.css';
+import './stats-carousel-impl.css';
+import '../block-reveal.css';
+import { given } from '../../given.js';
+import { arriving, useReveal } from '../use-reveal.js';
+import { slotOf, useWheel } from '../stats/use-wheel.js';
+import { Laurel } from '../laurel.js';
+import { statsCarouselDefaults, statsCarouselParts, } from './StatsCarousel.types.js';
+/**
+ * A heading over a square card that turns through a few key figures, one at a time, with the awards
+ * behind them beside it — the reference design's Stats.
+ *
+ * The turn is Stats' own wheel (use-wheel.ts), turning at every width here rather than only on a
+ * phone: the same hold and turn, held while a pointer rests on the card or focus is in it, stopped for
+ * good by a press, and never for a reader who asked for less movement — they get the figures two to
+ * a row in the card. Every figure is in the list the whole time, so a screen reader reads them all.
+ *
+ * The awards are drawn the way the Awards block draws them — the same laurel (laurel.tsx), the same
+ * tokens — from the same records, so an award looks the same wherever a page shows it.
+ *
+ * `'use client'` for the turn, the reveal and `useId`, which names the region by its heading.
+ */
+export function StatsCarousel({ ground = statsCarouselDefaults.ground, title, description, stats, awards, }) {
+    const titleId = useId();
+    const [band, revealed] = useReveal();
+    const section = useRef(null);
+    const figures = Array.isArray(stats) ? stats.length : 0;
+    const { wheeling, turn, hold } = useWheel(section, figures, true);
+    // A record from a feed or an editor is not typed: an empty list draws nothing rather than a card
+    // with nothing in it.
+    if (figures === 0)
+        return null;
+    // The first half of the awards at the card's start, the rest at its end.
+    const listed = Array.isArray(awards) ? awards : [];
+    const half = Math.ceil(listed.length / 2);
+    const start = listed.slice(0, half);
+    const end = listed.slice(half);
+    return (_jsx("section", { className: statsCarouselParts.root, ref: section, "data-ground": ground, "aria-labelledby": titleId, children: _jsxs("div", { className: statsCarouselParts.inner, ref: band, "data-revealed": revealed, children: [_jsxs("div", { className: statsCarouselParts.header, children: [_jsx("h2", { className: statsCarouselParts.title, id: titleId, ...arriving(0), children: title }), given(description) ? (_jsx("p", { className: statsCarouselParts.description, ...arriving(1), children: description })) : null] }), _jsxs("div", { className: statsCarouselParts.stage, ...arriving(2), children: [start.length > 0 ? _jsx(AwardColumn, { awards: start, side: "start" }) : null, _jsx("div", { className: statsCarouselParts.card, children: _jsx("ul", { className: statsCarouselParts.list, role: "list", "data-wheel": wheeling || undefined, tabIndex: wheeling ? 0 : undefined, "aria-labelledby": wheeling ? titleId : undefined, ...(wheeling ? hold : {}), children: stats.map((figure, at) => (_jsxs("li", { className: statsCarouselParts.item, "data-slot": wheeling ? slotOf(at, turn, figures) : undefined, children: [_jsx("span", { className: statsCarouselParts.value, children: _jsx("bdi", { children: figure.value }) }), _jsx("span", { className: statsCarouselParts.label, children: figure.label })] }, at))) }) }), end.length > 0 ? _jsx(AwardColumn, { awards: end, side: "end" }) : null] })] }) }));
+}
+/** A column of award badges beside the card, each between two laurels as the Awards block draws them. */
+function AwardColumn({ awards, side }) {
+    return (
+    // `role="list"` spelled out: Safari drops a list's role once its markers are styled away.
+    _jsx("ul", { className: statsCarouselParts.awards, role: "list", "data-side": side, children: awards.map((award, at) => (_jsxs("li", { className: statsCarouselParts.award, children: [_jsx(Laurel, { className: statsCarouselParts['award-laurel'], side: "leading" }), _jsxs("div", { className: statsCarouselParts['award-copy'], children: [_jsx("p", { className: statsCarouselParts['award-name'], children: award.title }), _jsx("p", { className: statsCarouselParts['award-issuer'], children: award.issuer })] }), _jsx(Laurel, { className: statsCarouselParts['award-laurel'], side: "trailing" })] }, at))) }));
+}

package/dist/components/blocks/stats-carousel/StatsCarousel.types.d.ts

@@ -0,0 +1,43 @@
+import type { Award } from '../../awards-data.js';
+import type { StatsFigure } from '../../stats-data.js';
+export interface StatsCarouselOwnProps {
+    /**
+     * `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 turn — three to five, each a short `value` exactly as it is to be read and a `label` of a few words. Two or more turn; one simply stands in the card. An empty list draws nothing. */
+    stats: StatsFigure[];
+    /** Two to four awards the figures stand beside: the first half in a column at the card's start, the rest at its end; on a phone, the two columns side by side under the card. Each between two laurels, as the Awards block draws its badges, from the same records */
+    awards?: Award[];
+}
+export type StatsCarouselProps = StatsCarouselOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const statsCarouselParts: {
+    readonly root: "dds-statscarousel";
+    readonly inner: "dds-statscarousel__inner";
+    readonly header: "dds-statscarousel__header";
+    readonly title: "dds-statscarousel__title";
+    readonly description: "dds-statscarousel__description";
+    readonly stage: "dds-statscarousel__stage";
+    readonly card: "dds-statscarousel__card";
+    readonly list: "dds-statscarousel__list";
+    readonly item: "dds-statscarousel__item";
+    readonly value: "dds-statscarousel__value";
+    readonly label: "dds-statscarousel__label";
+    readonly awards: "dds-statscarousel__awards";
+    readonly award: "dds-statscarousel__award";
+    readonly 'award-laurel': "dds-statscarousel__award-laurel";
+    readonly 'award-copy': "dds-statscarousel__award-copy";
+    readonly 'award-name': "dds-statscarousel__award-name";
+    readonly 'award-issuer': "dds-statscarousel__award-issuer";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const statsCarouselDefaults: {
+    readonly ground: "page";
+};

package/dist/components/blocks/stats-carousel/StatsCarousel.types.js

@@ -0,0 +1,23 @@
+// GENERATED from stats-carousel.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const statsCarouselParts = {
+    root: 'dds-statscarousel',
+    inner: 'dds-statscarousel__inner',
+    header: 'dds-statscarousel__header',
+    title: 'dds-statscarousel__title',
+    description: 'dds-statscarousel__description',
+    stage: 'dds-statscarousel__stage',
+    card: 'dds-statscarousel__card',
+    list: 'dds-statscarousel__list',
+    item: 'dds-statscarousel__item',
+    value: 'dds-statscarousel__value',
+    label: 'dds-statscarousel__label',
+    awards: 'dds-statscarousel__awards',
+    award: 'dds-statscarousel__award',
+    'award-laurel': 'dds-statscarousel__award-laurel',
+    'award-copy': 'dds-statscarousel__award-copy',
+    'award-name': 'dds-statscarousel__award-name',
+    'award-issuer': 'dds-statscarousel__award-issuer',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const statsCarouselDefaults = { ground: 'page' };