@deriv-com/dds-marketing 1.1.2 → 1.2.0

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

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

@@ -0,0 +1,233 @@
+/*
+ * 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.
+ */
+
+/*
+ * The header starts on a phone and is centred from the fold, over the card it names — Stats' rule
+ * and its reason: a centred line starts at a different edge each time, which costs little across a
+ * wide measure and a great deal across a narrow one.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__header {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    margin-inline: auto;
+    text-align: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__description {
+    margin-inline: auto;
+  }
+}
+
+/* A title with nothing under it carries no step under it. */
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__title:last-child {
+  margin-block-end: 0;
+}
+
+/*
+ * The card and the awards. Below 62rem the card is over the awards, their two columns side by side
+ * under it — the reference's two-up grid. From 62rem the columns stand either side of the card, its
+ * own column the card's size. `62rem` longhand because `var()` is not permitted in a container query
+ * condition; it is the reference's 992px.
+ *
+ * The card is square, as wide as size.grid.track-lg and the card's inset either side, or the column
+ * it is in where that is narrower. It holds its square whatever the turn inside it needs: the list
+ * keeps the room it leaves above and below the figure in place, centred in the card and clipped by it.
+ */
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__stage {
+  --dds-statscarousel-card-size: min(100%, calc(var(--size-grid-track-lg) + 2 * var(--space-inset-xl)));
+
+  grid-template-areas:
+    'card card'
+    'start end';
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  inline-size: 100%;
+}
+
+@container (min-width: 62rem) {
+  :where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__stage {
+    grid-template-areas: 'start card end';
+    grid-template-columns: minmax(0, 1fr) var(--dds-statscarousel-card-size) minmax(0, 1fr);
+  }
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__card {
+  aspect-ratio: var(--aspect-square);
+  grid-area: card;
+  inline-size: var(--dds-statscarousel-card-size);
+  min-block-size: 0;
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__list {
+  inline-size: 100%;
+}
+
+/*
+ * Still — a reader who asked for less movement, or a single figure — the figures stand two to a row
+ * in the card, at font.h4: a square card's width holds two figures, not four, and at the turn's size
+ * "168M+" broke over two lines.
+ */
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__list:not([data-wheel]) {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__list:not([data-wheel]) .dds-statscarousel__value {
+  font-family: var(--font-h4-family);
+  font-size: var(--font-h4-size);
+  font-weight: var(--font-h4-weight);
+  letter-spacing: var(--font-h4-letter-spacing);
+  line-height: var(--font-h4-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__list:not([data-wheel]) .dds-statscarousel__label {
+  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);
+}
+
+/*
+ * The turn, Stats' phone wheel (stats-impl.css) centred in the card: one figure in place, the one
+ * before it smaller above, the next smaller below, turning every motion.duration.hold over
+ * motion.duration.turn. useWheel sets `data-wheel` for two figures or more and never for a reader who
+ * asked for less movement.
+ *
+ * Every figure stands in the one cell and is moved off it; a step is a whole figure's height. The side
+ * figures stand at --dds-statscarousel-side of their size (0.65), the reference's scale, and fade into
+ * the card by a mask rather than an ink of their own, so the turn reads on every ground. The block
+ * padding is the room the side figures need above and below.
+ */
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__list[data-wheel] {
+  --dds-statscarousel-item: calc(
+    var(--font-figure-lg-size) * var(--font-figure-lg-line-height) + var(--space-gap-sm) + var(--font-body-lg-size) *
+      var(--font-body-lg-line-height)
+  );
+  --dds-statscarousel-side: 0.65;
+  --dds-statscarousel-away: 0.4;
+  --dds-statscarousel-room: 0.85;
+  --dds-statscarousel-fade: 35%;
+
+  grid-template-columns: minmax(0, 1fr);
+  mask-image: linear-gradient(
+    transparent,
+    black var(--dds-statscarousel-fade),
+    black calc(100% - var(--dds-statscarousel-fade)),
+    transparent
+  );
+  padding-block: calc(var(--dds-statscarousel-item) * var(--dds-statscarousel-room));
+}
+
+/*
+ * A tab stop while it turns — focus holds it still — so it shows where focus is, as Stats' wheel
+ * does: the ring drawn inside, and the fade gone while it holds focus, since the mask would fade
+ * the ring's top and foot with the figures.
+ */
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__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));
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel[data-ground="strong"] .dds-statscarousel__list[data-wheel]:focus-visible {
+  outline-color: var(--color-border-focus-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__list[data-wheel] > .dds-statscarousel__item {
+  grid-area: 1 / 1;
+  inline-size: 100%;
+  transform-origin: center;
+  transition-duration: var(--motion-duration-turn);
+  transition-property: opacity, scale, translate;
+  transition-timing-function: var(--motion-easing-reveal);
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__list[data-wheel] > [data-slot='above'] {
+  scale: var(--dds-statscarousel-side);
+  translate: 0 -100%;
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__list[data-wheel] > [data-slot='below'] {
+  animation: dds-statscarousel-in var(--motion-duration-turn) var(--motion-easing-reveal);
+  scale: var(--dds-statscarousel-side);
+  translate: 0 100%;
+}
+
+/*
+ * Out of sight, a figure waits where the one above leaves to — risen and shrunk away — so leaving is
+ * a movement on, never back; it comes in below by an arrival of its own.
+ */
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__list[data-wheel] > [data-slot='hidden'] {
+  opacity: var(--opacity-hidden);
+  scale: var(--dds-statscarousel-away);
+  translate: 0 -100%;
+}
+
+@keyframes dds-statscarousel-in {
+  from {
+    opacity: var(--opacity-hidden);
+    scale: var(--dds-statscarousel-away);
+    translate: 0 200%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__list[data-wheel] > .dds-statscarousel__item {
+    animation: none;
+    transition: none;
+  }
+}
+
+/*
+ * The award columns. Each fills its side of the stage — centred, as the stage centres its items, a
+ * column shrank to its words — with its badges centred below 62rem and leaning toward the card from
+ * there, as the reference's do.
+ */
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__awards {
+  justify-self: stretch;
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__awards[data-side="start"] {
+  grid-area: start;
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__awards[data-side="end"] {
+  grid-area: end;
+}
+
+@container (min-width: 62rem) {
+  :where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__awards[data-side="start"] {
+    align-items: flex-end;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__awards[data-side="end"] {
+    align-items: flex-start;
+  }
+}
+
+/* The badges, as the Awards block draws them (awards-impl.css), each its column's width up to theirs. */
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__award {
+  inline-size: 100%;
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__award-laurel {
+  block-size: auto;
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__award-copy {
+  flex: 1 1 0;
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__award-laurel[data-side="trailing"],
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__award-laurel[data-side="leading"]:dir(rtl) {
+  scale: -1 1;
+}
+
+:where([data-dds-context="marketing"]) .dds-statscarousel .dds-statscarousel__award-laurel[data-side="trailing"]:dir(rtl) {
+  scale: none;
+}

package/dist/components/blocks/sticky-cards/sticky-cards-impl.css

@@ -73,6 +73,13 @@
   background-color: var(--color-bg-surface-card-strong-raised);
 }
 
+:where([data-dds-context="marketing"])
+  .dds-stickycards[data-ground="strong"]
+  .dds-stickycards__item
+  > .dds-card[data-variant="accent-strong"] {
+  background-color: var(--color-bg-surface-card-strong-on-brand-strong);
+}
+
 /*
  * ── compact ──────────────────────────────────────────────────────────────────────────────────
  *
@@ -140,6 +147,7 @@
 :where([data-dds-context="marketing"]) .dds-stickycards .dds-card[data-variant="accent"] { --dds-stickycards-fill: var(--color-bg-brand); }
 :where([data-dds-context="marketing"]) .dds-stickycards .dds-card[data-variant="surface-light"] { --dds-stickycards-fill: var(--color-bg-surface-card-light); }
 :where([data-dds-context="marketing"]) .dds-stickycards[data-ground="subtle"] .dds-card[data-variant="accent-strong"] { --dds-stickycards-fill: var(--color-bg-surface-card-strong-raised); }
+:where([data-dds-context="marketing"]) .dds-stickycards[data-ground="strong"] .dds-card[data-variant="accent-strong"] { --dds-stickycards-fill: var(--color-bg-surface-card-strong-on-brand-strong); }
 :where([data-dds-context="marketing"]) .dds-stickycards[data-ground="subtle"] .dds-card[data-variant="surface-light"] { --dds-stickycards-fill: var(--color-bg-surface-card-light-raised); }
 
 :where([data-dds-context="marketing"]) .dds-stickycards .dds-stickycards__body {

package/dist/components/blocks/testimonial-row/TestimonialRow.css

@@ -213,7 +213,7 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-testimonialrow[data-ground="strong"] .dds-testimonialrow__item {
-  background-color: var(--color-bg-surface-card-strong);
+  background-color: var(--color-bg-surface-card-strong-on-brand-strong);
   color: var(--color-fg-on-brand-strong);
 }
 

package/dist/components/blocks/testimonial-row/TestimonialRow.d.ts

@@ -1,6 +1,7 @@
 import "./TestimonialRow.css";
 import "./testimonial-row-impl.css";
 import "../block-reveal.css";
+import "../block-pattern.css";
 import { type TestimonialRowProps } from "./TestimonialRow.types.js";
 export type { TestimonialRowProps };
 /**
@@ -17,4 +18,4 @@ export type { TestimonialRowProps };
  * `'use client'` for the row's scroll position, the arrival, and `useId`, which names the region
  * by its heading.
  */
-export declare function TestimonialRow({ ground, title, reviews, summary, ratingLabel, label, externalLabel, previousLabel, nextLabel, }: TestimonialRowProps): import("react").JSX.Element | null;
+export declare function TestimonialRow({ ground, background, title, reviews, summary, ratingLabel, label, externalLabel, previousLabel, nextLabel, }: TestimonialRowProps): import("react").JSX.Element | null;