@deriv-com/dds-marketing 1.0.1 → 1.1.0

package/dist/components/blocks/tiers/Tiers.css

@@ -0,0 +1,233 @@
+/* GENERATED from tiers.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-tiers {
+  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-tiers .dds-tiers__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-tiers .dds-tiers__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-tiers .dds-tiers__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-tiers .dds-tiers__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-tiers .dds-tiers__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-tiers .dds-tiers__tier {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  row-gap: var(--space-gap-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__medal-row {
+  align-items: center;
+  display: flex;
+  min-inline-size: 0;
+  column-gap: var(--space-gap-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__line-start {
+  border-block-start-style: solid;
+  display: none;
+  min-inline-size: 0;
+  border-width: var(--border-width-emphasis);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__medal {
+  display: block;
+  flex: none;
+  object-fit: cover;
+  block-size: var(--size-tiers-medal);
+  border-radius: var(--radius-subtle);
+  inline-size: var(--size-tiers-medal);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__line-end {
+  border-block-start-style: solid;
+  display: none;
+  min-inline-size: 0;
+  border-width: var(--border-width-emphasis);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__heading {
+  align-items: baseline;
+  display: flex;
+  flex-wrap: wrap;
+  min-inline-size: 0;
+  column-gap: var(--space-gap-sm);
+  row-gap: var(--space-gap-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__name {
+  margin-block: 0;
+  font-family: var(--font-h5-family);
+  font-size: var(--font-h5-size);
+  font-weight: var(--font-h5-weight);
+  letter-spacing: var(--font-h5-letter-spacing);
+  line-height: var(--font-h5-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__stage {
+  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);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__benefit {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  padding-block: var(--space-inset-card);
+  padding-inline: var(--space-inset-card);
+  row-gap: var(--space-heading-title-description-compact);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__benefit-title {
+  margin-block: 0;
+  font-family: var(--font-subtitle-family);
+  font-size: var(--font-subtitle-size);
+  font-weight: var(--font-subtitle-weight);
+  letter-spacing: var(--font-subtitle-letter-spacing);
+  line-height: var(--font-subtitle-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__benefit-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);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__qualification {
+  margin-block: 0;
+  white-space: pre-line;
+  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-tiers .dds-tiers__footer {
+  display: flex;
+  margin-block-start: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers[data-ground="page"] {
+  background-color: var(--color-bg-page);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers[data-ground="page"] .dds-tiers__benefit-description {
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers[data-ground="page"] .dds-tiers__line-end {
+  border-color: var(--color-border-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers[data-ground="page"] .dds-tiers__line-start {
+  border-color: var(--color-border-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers[data-ground="page"] .dds-tiers__stage {
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers[data-ground="strong"] {
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers[data-ground="strong"] .dds-tiers__benefit-description {
+  color: var(--color-fg-muted-inverse);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers[data-ground="strong"] .dds-tiers__line-end {
+  border-color: var(--color-border-subtle-inverse);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers[data-ground="strong"] .dds-tiers__line-start {
+  border-color: var(--color-border-subtle-inverse);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers[data-ground="strong"] .dds-tiers__stage {
+  color: var(--color-fg-muted-inverse);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers[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-tiers[data-ground="subtle"] .dds-tiers__benefit-description {
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers[data-ground="subtle"] .dds-tiers__line-end {
+  border-color: var(--color-border-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers[data-ground="subtle"] .dds-tiers__line-start {
+  border-color: var(--color-border-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-tiers[data-ground="subtle"] .dds-tiers__stage {
+  color: var(--color-fg-muted);
+}
+

package/dist/components/blocks/tiers/Tiers.d.ts

@@ -0,0 +1,32 @@
+import './Tiers.css';
+import './tiers-impl.css';
+import '../block-reveal.css';
+import { type TiersProps } from './Tiers.types.js';
+export type { TiersProps };
+/**
+ * A partnership-tier section: a heading over a row of tiers, each a medal, a name and its stage, a
+ * card saying what the tier gives and the bar that reaches it — the reference site's Tiers.
+ *
+ * The tiers are a ladder, and the order is the argument. So the list is an `<ol>`, and a screen
+ * reader announces the count and each tier's place without being told; at full width a rule runs
+ * through the medals and joins them into one track, read start to end. The tiers are records rather
+ * than children for the reason Steps' are: a tier is words and a picture, nothing a page composes,
+ * and the order is the list's to hold rather than the page's to restate.
+ *
+ * Each benefit is the page's own Card, so its fill and corner are a card's anywhere else on the
+ * page, with the benefit's words inside it at the card's own inset. The block knows its ground and
+ * the card does not, so the card is re-coloured for the painted grounds in the stylesheet rather
+ * than here — the way FeatureCards and ComparisonCards answer the same question.
+ *
+ * The reference template took its way on as `showLink`, `linkText`, `linkHref` and `onLinkClick`.
+ * Here it is one node, the page's own Link, as FeatureCards' is: a link already knows its words,
+ * its destination and what it does when pressed. Its per-tier `accent`, which coloured the track in
+ * four metals, is gone — this package has no metal colours and a set of them for one block would be
+ * a palette of its own — and so is `iconAlt`: the medal is decoration, because the name under it is
+ * the heading a reader hears.
+ *
+ * It arrives the way every block does: the heading and the line, then each tier a step behind the
+ * one before, lowest first, and the way on last. `'use client'` for that and for `useId`, which
+ * names the region by its heading.
+ */
+export declare function Tiers({ ground, title, description, tiers, link }: TiersProps): import("react").JSX.Element;

package/dist/components/blocks/tiers/Tiers.js

@@ -0,0 +1,68 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import './Tiers.css';
+import './tiers-impl.css';
+import '../block-reveal.css';
+import { given } from '../../given.js';
+import { Card } from '../../core/card/Card.js';
+import { arriving, useReveal } from '../use-reveal.js';
+import { tiersDefaults, tiersParts } from './Tiers.types.js';
+/**
+ * The most tiers drawn. The row holds four at full width, and the track through the medals has
+ * nowhere to run past the last column — a fifth would start a second row the line cannot reach.
+ */
+const MOST = 4;
+/**
+ * Says once that tiers past the fourth were left out — a page that passes five gets
+ * four drawn and would otherwise never learn why. Navbar's way of saying so about its actions.
+ */
+let warned = false;
+function warnIfTooMany(count) {
+    if (count <= MOST || warned)
+        return;
+    warned = true;
+    // eslint-disable-next-line no-console
+    console.warn(`Tiers was handed ${count} tiers and draws the first ${MOST}. A ladder of more than four rungs is ` +
+        'read as a table; put the rest on a page of their own, or use DataTable.');
+}
+/**
+ * A partnership-tier section: a heading over a row of tiers, each a medal, a name and its stage, a
+ * card saying what the tier gives and the bar that reaches it — the reference site's Tiers.
+ *
+ * The tiers are a ladder, and the order is the argument. So the list is an `<ol>`, and a screen
+ * reader announces the count and each tier's place without being told; at full width a rule runs
+ * through the medals and joins them into one track, read start to end. The tiers are records rather
+ * than children for the reason Steps' are: a tier is words and a picture, nothing a page composes,
+ * and the order is the list's to hold rather than the page's to restate.
+ *
+ * Each benefit is the page's own Card, so its fill and corner are a card's anywhere else on the
+ * page, with the benefit's words inside it at the card's own inset. The block knows its ground and
+ * the card does not, so the card is re-coloured for the painted grounds in the stylesheet rather
+ * than here — the way FeatureCards and ComparisonCards answer the same question.
+ *
+ * The reference template took its way on as `showLink`, `linkText`, `linkHref` and `onLinkClick`.
+ * Here it is one node, the page's own Link, as FeatureCards' is: a link already knows its words,
+ * its destination and what it does when pressed. Its per-tier `accent`, which coloured the track in
+ * four metals, is gone — this package has no metal colours and a set of them for one block would be
+ * a palette of its own — and so is `iconAlt`: the medal is decoration, because the name under it is
+ * the heading a reader hears.
+ *
+ * It arrives the way every block does: the heading and the line, then each tier a step behind the
+ * one before, lowest first, and the way on last. `'use client'` for that and for `useId`, which
+ * names the region by its heading.
+ */
+export function Tiers({ ground = tiersDefaults.ground, title, description, tiers, link }) {
+    const titleId = useId();
+    const [band, revealed] = useReveal();
+    // A tier with no name is somebody mid-sentence in the workbench rather than a tier, and a medal
+    // over nothing is a rung the page did not write — so it is dropped before the row is counted.
+    const named = tiers.filter((tier) => given(tier.name));
+    warnIfTooMany(named.length);
+    const shown = named.slice(0, MOST);
+    return (_jsx("section", { className: tiersParts.root, "data-ground": ground, "aria-labelledby": titleId, children: _jsxs("div", { className: tiersParts.inner, ref: band, "data-revealed": revealed, children: [_jsxs("div", { className: tiersParts.header, children: [_jsx("h2", { className: tiersParts.title, id: titleId, ...arriving(0), children: title }), given(description) ? (_jsx("p", { className: tiersParts.description, ...arriving(1), children: description })) : null] }), _jsx("ol", { className: tiersParts.list, role: "list", children: shown.map((tier, at) => (
+                    /* Keyed by the tier's own name: an index would key the ladder by position, and removing a
+                       rung would have React reconcile every tier above it into its neighbour. Two tiers with
+                       one name are one tier written twice. */
+                    _jsxs("li", { className: tiersParts.tier, ...arriving(2 + at), children: [_jsxs("div", { className: tiersParts['medal-row'], children: [_jsx("span", { className: tiersParts['line-start'], "aria-hidden": "true" }), _jsx("img", { className: tiersParts.medal, src: tier.medal, alt: "", loading: "lazy", decoding: "async" }), _jsx("span", { className: tiersParts['line-end'], "aria-hidden": "true" })] }), _jsxs("div", { className: tiersParts.heading, children: [_jsx("h3", { className: tiersParts.name, children: tier.name }), _jsx("p", { className: tiersParts.stage, children: tier.stage })] }), _jsx(Card, { variant: "surface", children: _jsxs("div", { className: tiersParts.benefit, children: [_jsx("p", { className: tiersParts['benefit-title'], children: tier.benefit }), _jsx("p", { className: tiersParts['benefit-description'], children: tier.description })] }) }), given(tier.qualification) ? (_jsx("p", { className: tiersParts.qualification, children: tier.qualification })) : null] }, `${at}:${tier.name}`))) }), link ? (_jsx("div", { className: tiersParts.footer, ...arriving(2 + shown.length), children: link })) : null] }) }));
+}

package/dist/components/blocks/tiers/Tiers.types.d.ts

@@ -0,0 +1,45 @@
+import type { ReactNode } from 'react';
+import type { TiersItem } from '../../tiers-data.js';
+export interface TiersOwnProps {
+    /**
+     * `page` — The default, and the page's own white. A section that has nothing to separate itself from what is above it — most of them. The benefit cards are Card's recessed grey on it.
+     * `subtle` — A quiet step off the page, for a band that wants to read as its own section without changing the page's voice. The reference design paints this section grey, and a page following it closely takes this. The benefit cards turn white on it, color.bg.surface-card-raised, because their recessed grey is the band's own and would vanish into it.
+     * `strong` — `color.bg.brand-strong`, the dark band. It stops the page rather than dividing it, so it is for a section a reader should arrive at — and one per page is usually one more than enough. The benefit cards turn round to the inverse surface and white ink, and the track between the medals to the band's own quiet rule.
+     */
+    ground?: 'page' | 'subtle' | 'strong';
+    /** Always. What the tiers add up to, in the fewest words that say it — 'Growing rewards as you scale'. */
+    title: string;
+    /** A line saying how the tiers work, when the title alone does not — 'Our tiered partnership model rewards performance.' */
+    description?: string;
+    /** Always. The tiers, lowest first — two to four, four for a partnership programme. Each is a one-word `name`, a one-verb `stage`, a `medal` picture, a `benefit` headline and the sentence under it, and — on every tier above the entry one — the `qualification` that reaches it, with a line break before the amount. The order of the list is the order of the ladder, so reordering it reorders the tiers. */
+    tiers: TiersItem[];
+    /** A way on to the programme's full terms — 'Learn more about partner tiers'. A standalone Link, under the row. */
+    link?: ReactNode;
+}
+export type TiersProps = TiersOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const tiersParts: {
+    readonly root: "dds-tiers";
+    readonly inner: "dds-tiers__inner";
+    readonly header: "dds-tiers__header";
+    readonly title: "dds-tiers__title";
+    readonly description: "dds-tiers__description";
+    readonly list: "dds-tiers__list";
+    readonly tier: "dds-tiers__tier";
+    readonly 'medal-row': "dds-tiers__medal-row";
+    readonly 'line-start': "dds-tiers__line-start";
+    readonly medal: "dds-tiers__medal";
+    readonly 'line-end': "dds-tiers__line-end";
+    readonly heading: "dds-tiers__heading";
+    readonly name: "dds-tiers__name";
+    readonly stage: "dds-tiers__stage";
+    readonly benefit: "dds-tiers__benefit";
+    readonly 'benefit-title': "dds-tiers__benefit-title";
+    readonly 'benefit-description': "dds-tiers__benefit-description";
+    readonly qualification: "dds-tiers__qualification";
+    readonly footer: "dds-tiers__footer";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const tiersDefaults: {
+    readonly ground: "page";
+};

package/dist/components/blocks/tiers/Tiers.types.js

@@ -0,0 +1,25 @@
+// GENERATED from tiers.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const tiersParts = {
+    root: 'dds-tiers',
+    inner: 'dds-tiers__inner',
+    header: 'dds-tiers__header',
+    title: 'dds-tiers__title',
+    description: 'dds-tiers__description',
+    list: 'dds-tiers__list',
+    tier: 'dds-tiers__tier',
+    'medal-row': 'dds-tiers__medal-row',
+    'line-start': 'dds-tiers__line-start',
+    medal: 'dds-tiers__medal',
+    'line-end': 'dds-tiers__line-end',
+    heading: 'dds-tiers__heading',
+    name: 'dds-tiers__name',
+    stage: 'dds-tiers__stage',
+    benefit: 'dds-tiers__benefit',
+    'benefit-title': 'dds-tiers__benefit-title',
+    'benefit-description': 'dds-tiers__benefit-description',
+    qualification: 'dds-tiers__qualification',
+    footer: 'dds-tiers__footer',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const tiersDefaults = { ground: 'page' };

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

@@ -0,0 +1,185 @@
+/*
+ * 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 section has no motion of its own beyond the arrival every block shares, which block-reveal.css
+ * states once and turns off under reduced motion. Nothing here animates.
+ */
+
+/*
+ * The header and the way on start on a phone and are centred once the band is wide enough.
+ *
+ * PageHeader's rule and FeatureCards' copy of it: centred text starts every line at a different
+ * edge, which costs little across a wide measure and a great deal across a narrow one. The header
+ * and the line under it are capped narrower than the column, so `margin-inline: auto` is what
+ * centres those boxes rather than their words inside a box left at the start edge.
+ *
+ * `48rem` longhand because `var()` is not permitted in a container query condition, and it is the
+ * width the rest of this package folds at.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__header {
+    align-items: center;
+    margin-inline: auto;
+    text-align: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__description {
+    margin-inline: auto;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__footer {
+    justify-content: center;
+  }
+}
+
+/*
+ * One column on a phone, two from the fold, and at full width one row holding every tier.
+ *
+ * `minmax(0, 1fr)` rather than `1fr`, so a long unbroken word in a benefit shrinks to the column
+ * instead of pushing the row past the page. At full width the row is as many columns as there are
+ * tiers — two, three, or four, the most this draws — read from the markup with `:has()`, the way
+ * FeatureCards counts its cards, so the ladder is always one row and the track through the medals
+ * always has every medal on it. Where `:has()` is not supported every count takes four columns: a
+ * shorter ladder leaves the end of the row empty, and still reads.
+ */
+:where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__list {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@container (min-width: 64rem) {
+  :where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__list {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  :where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__list:has(> :nth-child(3):last-child) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  :where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__list:has(> :nth-child(2):last-child) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+/*
+ * A tier starts at the edge on a phone and is centred from the fold.
+ *
+ * On a phone the medal, the name and the card all start where the heading above them starts, and
+ * the name and its stage share a line — the reference design's narrow arrangement, which keeps a
+ * column of four tiers from running to four screens. From the fold each tier is a column of its
+ * own, centred under its medal, with the stage under the name.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__tier {
+    text-align: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__medal-row {
+    justify-content: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__heading {
+    align-items: center;
+    flex-direction: column;
+  }
+}
+
+/*
+ * From the fold, the tiers in a row share their rows: the medals on one line, the names on the
+ * next, the cards level, and the qualifications under them starting on one line.
+ *
+ * Each tier spans four of the list's rows and lays its parts on them as a subgrid, so the card row
+ * is as tall as the tallest card in it and every card stretches to it. Growing the card to fill the
+ * tier instead made the entry tier's card — the one with no qualification under it — the tallest in
+ * the row, by exactly the qualification it does not have. The tier keeps its own gap between its
+ * parts; the list's gutter is still what separates one row of tiers from the next.
+ *
+ * Where subgrid is not supported the tier stays a column: the cards end ragged, and still read.
+ */
+@container (min-width: 48rem) {
+  @supports (grid-template-rows: subgrid) {
+    :where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__tier {
+      display: grid;
+      grid-row: span 4;
+      grid-template-rows: subgrid;
+    }
+  }
+}
+
+/*
+ * The track through the medals, at full width only.
+ *
+ * Each tier draws its own two halves, either side of its medal, and the row they sit in reaches
+ * half a gutter past the tier at each end — so one tier's outgoing half meets the next one's
+ * incoming half in the middle of the gutter, and the rule reads as one line through every medal
+ * rather than a dash under each. Below this width the tiers are stacked or in two columns, and a
+ * line would join a medal to nothing.
+ *
+ * The first tier's incoming half and the last one's outgoing half are kept for their width and not
+ * drawn: kept, so every medal sits in the middle of its tier; not drawn, so the track starts at the
+ * first medal and stops at the last rather than running to the edges of the page.
+ *
+ * `64rem` longhand for the reason the fold is.
+ */
+@container (min-width: 64rem) {
+  :where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__medal-row {
+    margin-inline: calc(var(--space-grid-gutter) / -2);
+  }
+
+  :where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__medal-row > :is(.dds-tiers__line-start, .dds-tiers__line-end) {
+    display: block;
+    flex: 1 1 0;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__tier:first-child .dds-tiers__line-start,
+  :where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__tier:last-child .dds-tiers__line-end {
+    visibility: hidden;
+  }
+}
+
+/*
+ * The benefit card on the painted grounds — FeatureCards' and ComparisonCards' rules for the same
+ * card, and their reasons.
+ *
+ * Card's surface is the recessed grey made for the page. On the grey band that is the band's own
+ * grey and the card vanishes, so it takes the raised fill, color.bg.surface-card-raised. On the
+ * dark band its fill and ink are made for a light page — dark words on near-black — so it turns
+ * round to the inverse surface and white ink, the values Card's own inverse uses. The block knows
+ * its ground and the card does not, so the answer is here rather than in Card.
+ */
+:where([data-dds-context="marketing"])
+  .dds-tiers[data-ground="subtle"]
+  .dds-tiers__tier
+  > .dds-card[data-variant="surface"] {
+  background-color: var(--color-bg-surface-card-raised);
+}
+
+:where([data-dds-context="marketing"])
+  .dds-tiers[data-ground="strong"]
+  .dds-tiers__tier
+  > .dds-card[data-variant="surface"] {
+  background-color: var(--color-bg-surface-inverse);
+  color: var(--color-fg-on-brand-strong);
+}
+
+/*
+ * Stacked — one to a row on a phone, two to a row before the full width — the tiers are held further
+ * apart than a tier's own parts: the grid's gutter alone left one tier's qualification about as close
+ * to the next tier's medal as to its own card, and the ladder ran together. space.gap.2xl between
+ * rungs; from 64rem they stand in one row and the gutter is the gap between columns again.
+ *
+ * `63.9375rem` is the last width below the full-width fold.
+ */
+@container (max-width: 63.9375rem) {
+  :where([data-dds-context="marketing"]) .dds-tiers .dds-tiers__list {
+    row-gap: var(--space-gap-2xl);
+  }
+}

package/dist/components/blocks/use-rotation.d.ts

@@ -17,13 +17,23 @@ import { type FocusEvent, type MouseEvent, type PointerEvent } from 'react';
  * - `region`, spread on that element: the carousel's role description and the hold and stop
  *   handlers;
  * - `track`, spread on the element holding the items: the swipe and what is announced;
- * - `item(at)`, spread on each item: its group role, its "2 / 3" name and its inert state;
+ * - `item(at)`, spread on each item: its group role, its "2 of 3" name and its inert state;
  * - `dots`, spread on PaginationDots alongside the block's own label.
  *
  * Fewer than two items is a set with nothing to move to, drawn still rather than broken: every
  * attribute that says "carousel" is left off and the dots are the block's to omit.
  */
-export declare function useRotation(count: number, autoplay: boolean): {
+/**
+ * The words the set is announced in. Every one is the page's to translate: a role description is
+ * read out exactly as given, so one left in English is heard in English on a page in any language.
+ */
+export interface RotationWords {
+    roleDescription: string;
+    slideRoleDescription: string;
+    /** An item's name from its place, counting from one. */
+    positionLabel?: (position: number, count: number) => string;
+}
+export declare function useRotation(count: number, autoplay: boolean, words: RotationWords): {
     current: number;
     rotating: boolean;
     root: import("react").RefObject<HTMLElement | null>;

package/dist/components/blocks/use-rotation.js

@@ -9,31 +9,7 @@ const SWIPE_CLICK_MS = 300;
 function tokenOn(element, name) {
     return element === null ? '' : getComputedStyle(element).getPropertyValue(name);
 }
-/**
- * One block rotating between a few things in place — which one is in view, and every way a reader
- * moves it, holds it or stops it.
- *
- * Shared because two blocks rotate, CtaBannerSlider and TestimonialSlider, and a carousel is the
- * kind of thing that drifts: one stops on a press and the other does not, one swallows the click a swipe
- * ends in and the other follows the link. The rules are stated once here and each block spreads
- * what this hands back onto its own parts.
- *
- * The clock is not here. PaginationDots holds the timer and the reduced-motion stillness, and this
- * tells it when to wait — so there is one clock per block, and it is the one a reader can see.
- *
- * What it hands back:
- * - `root`, the ref for the block's own element, which the swipe threshold and the reading
- *   direction are read off;
- * - `region`, spread on that element: the carousel's role description and the hold and stop
- *   handlers;
- * - `track`, spread on the element holding the items: the swipe and what is announced;
- * - `item(at)`, spread on each item: its group role, its "2 / 3" name and its inert state;
- * - `dots`, spread on PaginationDots alongside the block's own label.
- *
- * Fewer than two items is a set with nothing to move to, drawn still rather than broken: every
- * attribute that says "carousel" is left off and the dots are the block's to omit.
- */
-export function useRotation(count, autoplay) {
+export function useRotation(count, autoplay, words) {
     const rotating = count > 1;
     const root = useRef(null);
     const [index, setIndex] = useState(0);
@@ -122,7 +98,7 @@ export function useRotation(count, autoplay) {
         rotating,
         root,
         region: {
-            'aria-roledescription': rotating ? 'carousel' : undefined,
+            'aria-roledescription': rotating ? words.roleDescription : undefined,
             onPointerEnter: (event) => {
                 if (event.pointerType === 'mouse')
                     setHeld(true);
@@ -159,8 +135,10 @@ export function useRotation(count, autoplay) {
             const away = rotating && at !== current;
             return {
                 role: rotating ? 'group' : undefined,
-                'aria-roledescription': rotating ? 'slide' : undefined,
-                'aria-label': rotating ? `${at + 1} / ${count}` : undefined,
+                'aria-roledescription': rotating ? words.slideRoleDescription : undefined,
+                'aria-label': rotating
+                    ? words.positionLabel?.(at + 1, count) ?? `${at + 1} of ${count}`
+                    : undefined,
                 'aria-hidden': away || undefined,
                 inert: away || undefined,
             };