@deriv-com/dds-marketing 0.2.0 → 1.0.0

package/dist/components/blocks/faq-accordion/FaqAccordion.types.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+export interface FaqAccordionOwnProps {
+    /**
+     * `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 — and the ground a reader is already on
+     * `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's slate FAQ. 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. 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 questions turn round with it: white headings, a muted chevron and rules in the band's own veil, fixed like the band
+     */
+    ground?: 'page' | 'subtle' | 'strong';
+    /** Always. What the questions are about, in the fewest words — "Frequently asked questions", "Withdrawals". */
+    title: string;
+    /** Allowed: AccordionItem */
+    children: ReactNode;
+}
+export type FaqAccordionProps = FaqAccordionOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const faqAccordionParts: {
+    readonly root: "dds-faqaccordion";
+    readonly inner: "dds-faqaccordion__inner";
+    readonly title: "dds-faqaccordion__title";
+    readonly list: "dds-faqaccordion__list";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const faqAccordionDefaults: {
+    readonly ground: "page";
+};

package/dist/components/blocks/faq-accordion/FaqAccordion.types.js

@@ -0,0 +1,10 @@
+// GENERATED from faq-accordion.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const faqAccordionParts = {
+    root: 'dds-faqaccordion',
+    inner: 'dds-faqaccordion__inner',
+    title: 'dds-faqaccordion__title',
+    list: 'dds-faqaccordion__list',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const faqAccordionDefaults = { ground: 'page' };

package/dist/components/blocks/faq-accordion/faq-accordion-impl.css

@@ -0,0 +1,54 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ */
+
+/*
+ * The heading starts on a phone and is centred once the band is wide enough to hold a line.
+ *
+ * PageHeader's rule and FeatureCards', at the same width, so the sections on one page agree about
+ * where a heading sits. The heading is capped at the heading measure, so `margin-inline: auto` is
+ * what centres the box rather than its words inside a box left at the start edge. The questions
+ * stay at the start edge: a row is read from its start, and a centred question would put the chevron at
+ * a different distance from every one of them.
+ *
+ * `48rem` longhand because `var()` is not permitted in a container query condition.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-faqaccordion .dds-faqaccordion__title {
+    margin-inline: auto;
+    text-align: center;
+  }
+}
+
+/*
+ * The questions turn round on the dark band.
+ *
+ * AccordionItem draws its question in color.fg.default, its chevron and its hover in color.fg.muted,
+ * its rules in color.border.subtle and its focus ring in color.border.focus — every one of them made
+ * for a light page, and every one dark on near-black. It has no tone to answer with, so the block,
+ * which knows its ground, gives it the dark band's fixed roles: white questions, a chevron and a
+ * hover at fg.muted-inverse, rules at the band's veil, the band's own focus ring. The answers need
+ * nothing: they take the section's ink, which is already white.
+ */
+:where([data-dds-context="marketing"]) .dds-faqaccordion[data-ground="strong"] .dds-accordionitem {
+  border-color: var(--color-border-subtle-inverse);
+}
+
+:where([data-dds-context="marketing"]) .dds-faqaccordion[data-ground="strong"] .dds-accordionitem .dds-accordionitem__trigger {
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"])
+  .dds-faqaccordion[data-ground="strong"]
+  .dds-accordionitem
+  .dds-accordionitem__trigger:hover:where(:not(:disabled)),
+:where([data-dds-context="marketing"]) .dds-faqaccordion[data-ground="strong"] .dds-accordionitem .dds-accordionitem__marker {
+  color: var(--color-fg-muted-inverse);
+}
+
+:where([data-dds-context="marketing"])
+  .dds-faqaccordion[data-ground="strong"]
+  .dds-accordionitem
+  .dds-accordionitem__trigger:focus-visible {
+  outline-color: var(--color-border-focus-on-brand-strong);
+}

package/dist/components/blocks/feature-bullets/FeatureBullets.css

@@ -0,0 +1,139 @@
+/* GENERATED from featurebullets.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-featurebullets {
+  box-sizing: border-box;
+  container-type: inline-size;
+  display: flex;
+  inline-size: 100%;
+  justify-content: center;
+}
+
+:where([data-dds-context="marketing"]) .dds-featurebullets .dds-featurebullets__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);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurebullets .dds-featurebullets__split {
+  align-items: stretch;
+  display: flex;
+  min-inline-size: 0;
+  column-gap: var(--space-gap-3xl);
+  row-gap: var(--space-gap-2xl);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurebullets .dds-featurebullets__content {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  row-gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurebullets .dds-featurebullets__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-content);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurebullets .dds-featurebullets__list {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin-block: 0;
+  padding-inline-start: 0;
+  row-gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurebullets .dds-featurebullets__item {
+  align-items: flex-start;
+  border-block-start-style: solid;
+  box-sizing: border-box;
+  display: flex;
+  border-width: var(--border-width-default);
+  column-gap: var(--space-gap-md);
+  padding-block: var(--space-inset-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurebullets .dds-featurebullets__mark {
+  align-items: center;
+  display: flex;
+  flex: 0;
+  justify-content: center;
+  block-size: var(--icon-size-md);
+  inline-size: var(--icon-size-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurebullets .dds-featurebullets__media {
+  min-inline-size: 0;
+  overflow: hidden;
+  position: relative;
+  aspect-ratio: var(--aspect-square);
+  border-radius: var(--radius-container);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurebullets[data-media-position="end"] .dds-featurebullets__split {
+  flex-direction: row;
+}
+
+:where([data-dds-context="marketing"]) .dds-featurebullets[data-media-position="start"] .dds-featurebullets__split {
+  flex-direction: row-reverse;
+}
+
+:where([data-dds-context="marketing"]) .dds-featurebullets .dds-featurebullets__text {
+  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-featurebullets[data-ground="page"] {
+  background-color: var(--color-bg-page);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurebullets[data-ground="page"] .dds-featurebullets__item {
+  border-color: var(--color-border-subtle);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurebullets[data-ground="page"] .dds-featurebullets__mark {
+  color: var(--color-fg-brand-accent);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurebullets[data-ground="strong"] {
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurebullets[data-ground="strong"] .dds-featurebullets__item {
+  border-color: var(--color-border-subtle-inverse);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurebullets[data-ground="strong"] .dds-featurebullets__mark {
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurebullets[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-featurebullets[data-ground="subtle"] .dds-featurebullets__item {
+  border-color: var(--color-border-subtle);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurebullets[data-ground="subtle"] .dds-featurebullets__mark {
+  color: var(--color-fg-brand);
+}
+

package/dist/components/blocks/feature-bullets/FeatureBullets.d.ts

@@ -0,0 +1,31 @@
+import './FeatureBullets.css';
+import './feature-bullets-impl.css';
+import '../block-reveal.css';
+import { type FeatureBulletsProps } from './FeatureBullets.types.js';
+export type { FeatureBulletsProps };
+/**
+ * A section pairing a claim and a ruled list of inclusions with one supporting picture.
+ *
+ * The list is the argument. Each line is one thing a reader gets, marked as included, and the
+ * column is meant to be counted rather than read — which is why the lines are strings rather than
+ * nodes. A line free to bring its own mark is a list that has stopped being one.
+ *
+ * The mark is the component's own and the only thing here the page does not supply. It is what
+ * separates a list of inclusions from a list: the same six strings with a bullet are a summary,
+ * with a check they are a promise. Drawn from the package's glyph set the way FooterGroup draws
+ * its chevron, and hidden from assistive technology — what it says is what the title says once,
+ * and announcing it per line is six repetitions of one fact.
+ *
+ * `<ul>` rather than a stack of divs, because a screen reader announces how many items there are
+ * before reading the first, and the count is most of what a reader takes from this section.
+ *
+ * Each row is ruled above rather than below. That is Accordion's arrangement and it is right for
+ * the same reason: every rule then belongs to a row and sits over it, so the lines fall between
+ * the rows and none is left hanging under the last one. The first row's is suppressed in the
+ * stylesheet, which is the one thing a binding cannot say.
+ *
+ * The title carries the section's accessible name through `aria-labelledby`. A `<section>` is only
+ * a region landmark once it has a name, and an unnamed one is a thing a screen reader user walks
+ * through rather than a place they can skip.
+ */
+export declare function FeatureBullets({ ground, mediaPosition, title, bullets, media, }: FeatureBulletsProps): import("react").JSX.Element;

package/dist/components/blocks/feature-bullets/FeatureBullets.js

@@ -0,0 +1,55 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { CircleCheckSolidIcon } from '@deriv-com/quill-icons-web';
+import './FeatureBullets.css';
+import './feature-bullets-impl.css';
+import '../block-reveal.css';
+import { arriving, useReveal } from '../use-reveal.js';
+import { featureBulletsDefaults, featureBulletsParts, } from './FeatureBullets.types.js';
+/**
+ * A section pairing a claim and a ruled list of inclusions with one supporting picture.
+ *
+ * The list is the argument. Each line is one thing a reader gets, marked as included, and the
+ * column is meant to be counted rather than read — which is why the lines are strings rather than
+ * nodes. A line free to bring its own mark is a list that has stopped being one.
+ *
+ * The mark is the component's own and the only thing here the page does not supply. It is what
+ * separates a list of inclusions from a list: the same six strings with a bullet are a summary,
+ * with a check they are a promise. Drawn from the package's glyph set the way FooterGroup draws
+ * its chevron, and hidden from assistive technology — what it says is what the title says once,
+ * and announcing it per line is six repetitions of one fact.
+ *
+ * `<ul>` rather than a stack of divs, because a screen reader announces how many items there are
+ * before reading the first, and the count is most of what a reader takes from this section.
+ *
+ * Each row is ruled above rather than below. That is Accordion's arrangement and it is right for
+ * the same reason: every rule then belongs to a row and sits over it, so the lines fall between
+ * the rows and none is left hanging under the last one. The first row's is suppressed in the
+ * stylesheet, which is the one thing a binding cannot say.
+ *
+ * The title carries the section's accessible name through `aria-labelledby`. A `<section>` is only
+ * a region landmark once it has a name, and an unnamed one is a thing a screen reader user walks
+ * through rather than a place they can skip.
+ */
+export function FeatureBullets({ ground = featureBulletsDefaults.ground, mediaPosition = featureBulletsDefaults.mediaPosition, title, bullets, media, }) {
+    const titleId = useId();
+    const [band, revealed] = useReveal();
+    return (_jsx("section", { className: featureBulletsParts.root, "data-ground": ground, "data-media-position": mediaPosition, "aria-labelledby": titleId, children: _jsx("div", { className: featureBulletsParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: featureBulletsParts.split, children: [_jsxs("div", { className: featureBulletsParts.content, children: [_jsx("h2", { className: featureBulletsParts.title, ...arriving(0), id: titleId, children: title }), _jsx("ul", { className: featureBulletsParts.list, children: bullets
+                                    .filter((bullet) => bullet.trim() !== '')
+                                    .map((bullet, at) => (
+                                /* Keyed by the line itself. An index would key a list by position, so removing a
+                                 line above would renumber every row under it and React would reconcile the
+                                 wrong ones — and these lines are the content, so two the same would be a
+                                 duplicate claim rather than a key collision worth tolerating.
+              
+                                 The position is still what decides when a row arrives, and that is a different
+                                 question with a different answer: the rows come up in the order they are read,
+                                 so the set counts itself down rather than landing all at once. Taken after the
+                                 blank lines are dropped, so a line somebody is still typing does not leave a
+                                 gap in the count.
+              
+                                 Two behind the claim, which the picture beside them takes — the two halves of
+                                 the split arrive first and the list follows them. */
+                                _jsxs("li", { className: featureBulletsParts.item, ...arriving(2 + at), children: [_jsx("span", { className: featureBulletsParts.mark, "aria-hidden": "true", children: _jsx(CircleCheckSolidIcon, {}) }), _jsx("span", { className: featureBulletsParts.text, children: bullet })] }, bullet))) })] }), _jsx("div", { className: featureBulletsParts.media, ...arriving(1), "aria-hidden": "true", children: media })] }) }) }));
+}

package/dist/components/blocks/feature-bullets/FeatureBullets.types.d.ts

@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react';
+export interface FeatureBulletsOwnProps {
+    /**
+     * `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 — and the ground a reader is already on
+     * `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 one to reach for first when two sections need telling apart. Painted as the band's tint laid over the page's own ground, so it is the same grey whatever is behind the section — in dark mode the tint alone took on whatever it was set against, and on a light surface it was light ink on white.
+     * `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
+     */
+    ground?: 'page' | 'subtle' | 'strong';
+    /**
+     * `end` — The default. The list is read first, which is the order the section argues in
+     * `start` — The second of two on a page, so the two do not read as one column with a picture stuck to one side
+     */
+    mediaPosition?: 'end' | 'start';
+    /** Always. What the list is a list of, in the fewest words that say it */
+    title: string;
+    /** Always. One line per thing included, each short enough to take in at a glance. Strings rather than nodes, because every line is marked the same way and a line free to bring its own mark is a list that stops being one */
+    bullets: string[];
+    /** Always. The picture that sits beside the list — a screenshot, a photograph, an illustration. The section is a split and the picture is one half of it: without one the list runs to a measure it was never sized for, and what is left is a heading over a column with a gap beside it. */
+    media: ReactNode;
+}
+export type FeatureBulletsProps = FeatureBulletsOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const featureBulletsParts: {
+    readonly root: "dds-featurebullets";
+    readonly inner: "dds-featurebullets__inner";
+    readonly split: "dds-featurebullets__split";
+    readonly content: "dds-featurebullets__content";
+    readonly title: "dds-featurebullets__title";
+    readonly list: "dds-featurebullets__list";
+    readonly item: "dds-featurebullets__item";
+    readonly mark: "dds-featurebullets__mark";
+    readonly text: "dds-featurebullets__text";
+    readonly media: "dds-featurebullets__media";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const featureBulletsDefaults: {
+    readonly ground: "page";
+    readonly mediaPosition: "end";
+};

package/dist/components/blocks/feature-bullets/FeatureBullets.types.js

@@ -0,0 +1,16 @@
+// GENERATED from feature-bullets.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const featureBulletsParts = {
+    root: 'dds-featurebullets',
+    inner: 'dds-featurebullets__inner',
+    split: 'dds-featurebullets__split',
+    content: 'dds-featurebullets__content',
+    title: 'dds-featurebullets__title',
+    list: 'dds-featurebullets__list',
+    item: 'dds-featurebullets__item',
+    mark: 'dds-featurebullets__mark',
+    text: 'dds-featurebullets__text',
+    media: 'dds-featurebullets__media',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const featureBulletsDefaults = { ground: 'page', mediaPosition: 'end' };

package/dist/components/blocks/feature-bullets/feature-bullets-impl.css

@@ -0,0 +1,104 @@
+/*
+ * 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 first row is not ruled off from what is above it, because nothing is.
+ *
+ * Every row carries a rule on its start edge, which is what puts a line between each pair and
+ * none under the last. The cost is one at the top of the set, where it reads as a lid rather
+ * than a separator — and the set is already bounded by the section's own step above it.
+ *
+ * `:first-child` is the condition itself. Nothing about a row knows it is first, and a prop
+ * standing in for the question would be the page answering something the DOM already has.
+ */
+:where([data-dds-context="marketing"]) .dds-featurebullets .dds-featurebullets__item:first-child {
+  border-block-start-width: 0;
+  padding-block-start: 0;
+}
+
+/*
+ * The mark sits on the first line of the text, not in the middle of the row.
+ *
+ * `align-items: flex-start` puts it at the row's top edge, which is right for a line that wraps
+ * and a pixel high for one that does not: a 24px glyph beside a 24px line-height sits a touch
+ * proud, because the glyph is a full square and the letters inside the line are not. Nudging it
+ * by the difference is what makes the two look aligned rather than measure aligned.
+ *
+ * A raw length, and the one in this file. It is an optical correction — the amount by which a
+ * circle looks high next to a lowercase x — and there is no role for that because it is a
+ * property of these two shapes at this size rather than a decision the system makes.
+ */
+:where([data-dds-context="marketing"]) .dds-featurebullets .dds-featurebullets__mark {
+  margin-block-start: 0.125rem;
+}
+
+/*
+ * One column below the fold, and the list leads it.
+ *
+ * The row direction is the contract's to say — it varies by a styling axis, which is what
+ * `structure[]` is for, and the generated sheet carries both values. What is left here is the
+ * fold, which a binding cannot express: `structure` has no width to attach a rule to.
+ *
+ * Written a class deeper than it looks so it wins. The generated rule is
+ * `.dds-featurebullets[data-media-position="end"] .dds-featurebullets__split` — a class, an
+ * attribute and a class — and a plainer selector here loses to it however late it is loaded.
+ * That is exactly what went wrong before this rule existed: the split stayed a column at every
+ * width, and a picture given `flex: 1 1 0` on the block axis collapsed to nothing.
+ *
+ * `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 (max-width: 47.9375rem) {
+  :where([data-dds-context="marketing"])
+    .dds-featurebullets[data-media-position]
+    .dds-featurebullets__split {
+    flex-direction: column;
+  }
+}
+
+/*
+ * At full width the list takes a measure and the picture takes the rest.
+ *
+ * The reference design writes 540px against its 1280, which is a number only right at one width.
+ * A share holds everywhere, and the picture growing into whatever is left is what keeps the
+ * square square without either half naming a height.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-featurebullets .dds-featurebullets__split {
+    align-items: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-featurebullets .dds-featurebullets__content {
+    flex: 0 0 45%;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-featurebullets .dds-featurebullets__media {
+    flex: 1 1 0;
+  }
+}
+
+/*
+ * Whatever the page put in the picture fills the square.
+ *
+ * The slot takes a node rather than a source, so what arrives is the page's element and this
+ * cannot know whether it carries dimensions. `cover` rather than `contain`, because the slot is a
+ * square the section decided on and a picture letterboxed inside it would show the ground through
+ * a corner the section rounded.
+ */
+:where([data-dds-context="marketing"]) .dds-featurebullets .dds-featurebullets__media > * {
+  block-size: 100%;
+  display: block;
+  inline-size: 100%;
+  object-fit: cover;
+}
+
+:where([data-dds-context="marketing"]) .dds-featurebullets .dds-featurebullets__media img {
+  block-size: 100%;
+  display: block;
+  inline-size: 100%;
+  object-fit: cover;
+}

package/dist/components/blocks/feature-cards/FeatureCards.css

@@ -0,0 +1,84 @@
+/* GENERATED from featurecards.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-featurecards {
+  box-sizing: border-box;
+  container-type: inline-size;
+  display: flex;
+  inline-size: 100%;
+  justify-content: center;
+}
+
+:where([data-dds-context="marketing"]) .dds-featurecards .dds-featurecards__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-featurecards .dds-featurecards__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-featurecards .dds-featurecards__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-featurecards .dds-featurecards__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-featurecards .dds-featurecards__link {
+  display: flex;
+  margin-block-start: var(--space-heading-description-actions);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurecards .dds-featurecards__grid {
+  display: grid;
+  min-inline-size: 0;
+  column-gap: var(--space-grid-gutter);
+  row-gap: var(--space-grid-gutter);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurecards .dds-featurecards__item {
+  display: grid;
+  min-inline-size: 0;
+}
+
+:where([data-dds-context="marketing"]) .dds-featurecards[data-ground="page"] {
+  background-color: var(--color-bg-page);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurecards[data-ground="strong"] {
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurecards[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);
+}
+

package/dist/components/blocks/feature-cards/FeatureCards.d.ts

@@ -0,0 +1,24 @@
+import './FeatureCards.css';
+import './feature-cards-impl.css';
+import '../block-reveal.css';
+import { type FeatureCardsProps } from './FeatureCards.types.js';
+export type { FeatureCardsProps };
+/**
+ * A heading over a grid of cards — the reference site's FeatureCards in its grid form.
+ *
+ * The cards are the page's own Card or CardButton, each holding a CardBody, rather than records
+ * this draws. A card already says everything a card can say — its fill, its picture, its mark,
+ * whether the whole of it is pressed — and a list of records here would be a second, smaller Card
+ * API to keep in step with the first. What this decides is the rest: the heading, the column, and
+ * how many cards share a row.
+ *
+ * The row is read from the cards. One column on a phone and two from the fold; at full width three,
+ * four when there are exactly four, and one or two held to two thirds of the row, centred. A card
+ * alone lays its words beside a portrait picture. The stylesheet asks all of it of the markup — the
+ * count is already there, and a prop restating it is a second place for the two to disagree.
+ *
+ * It arrives the way every block does: the heading, the line and the way on, then each card's cell
+ * a step behind the one before, in reading order. `'use client'` for that and for `useId`, which
+ * names the region by its heading.
+ */
+export declare function FeatureCards({ ground, title, description, link, children, }: FeatureCardsProps): import("react").JSX.Element;

package/dist/components/blocks/feature-cards/FeatureCards.js

@@ -0,0 +1,66 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, Fragment, isValidElement, useId } from 'react';
+import './FeatureCards.css';
+import './feature-cards-impl.css';
+import '../block-reveal.css';
+import { given } from '../../given.js';
+import { arriving, useReveal } from '../use-reveal.js';
+import { featureCardsDefaults, featureCardsParts } from './FeatureCards.types.js';
+/**
+ * The cards, with any fragment opened out.
+ *
+ * `Children.toArray` flattens arrays and leaves a fragment whole, so a page writing
+ * `<>{cards}</>` handed over one child: every card in a single cell, and the grid reading the set
+ * as one card alone. A fragment is the page grouping its own markup, never a card, so it is opened
+ * out here and the grid counts what is inside it.
+ */
+function cardsOf(children, within = '') {
+    return Children.toArray(children).flatMap((child, at) => {
+        // `toArray` keys a fragment's children afresh — `.0`, `.1` — so a card is keyed by the
+        // fragment it came out of as well as its own place, or two cards from different groups share a
+        // key and React reconciles one into the other's cell.
+        const key = `${within}${isValidElement(child) && child.key !== null ? child.key : at}`;
+        return isValidElement(child) && child.type === Fragment
+            ? cardsOf(child.props.children, `${key}/`)
+            : [{ key, card: child }];
+    });
+}
+/**
+ * Where a card comes in the arrival, capped so a long set does not keep a reader waiting.
+ *
+ * The heading, the line and the way on take the first three steps. The cards follow one step
+ * apart up to the fourth, and the rest arrive with it: block-reveal.css keeps a block's trail
+ * inside its own movement, and eight cards a step apart would trail the heading by most of a
+ * second.
+ */
+const FIRST_CARD = 3;
+const LAST_STEP = FIRST_CARD + 3;
+/**
+ * A heading over a grid of cards — the reference site's FeatureCards in its grid form.
+ *
+ * The cards are the page's own Card or CardButton, each holding a CardBody, rather than records
+ * this draws. A card already says everything a card can say — its fill, its picture, its mark,
+ * whether the whole of it is pressed — and a list of records here would be a second, smaller Card
+ * API to keep in step with the first. What this decides is the rest: the heading, the column, and
+ * how many cards share a row.
+ *
+ * The row is read from the cards. One column on a phone and two from the fold; at full width three,
+ * four when there are exactly four, and one or two held to two thirds of the row, centred. A card
+ * alone lays its words beside a portrait picture. The stylesheet asks all of it of the markup — the
+ * count is already there, and a prop restating it is a second place for the two to disagree.
+ *
+ * It arrives the way every block does: the heading, the line and the way on, then each card's cell
+ * a step behind the one before, in reading order. `'use client'` for that and for `useId`, which
+ * names the region by its heading.
+ */
+export function FeatureCards({ ground = featureCardsDefaults.ground, title, description, link, children, }) {
+    const titleId = useId();
+    const [band, revealed] = useReveal();
+    return (_jsx("section", { className: featureCardsParts.root, "data-ground": ground, "aria-labelledby": titleId, children: _jsxs("div", { className: featureCardsParts.inner, ref: band, "data-revealed": revealed, children: [_jsxs("div", { className: featureCardsParts.header, children: [_jsx("h2", { className: featureCardsParts.title, id: titleId, ...arriving(0), children: title }), given(description) ? (_jsx("p", { className: featureCardsParts.description, ...arriving(1), children: description })) : null, link ? (_jsx("div", { className: featureCardsParts.link, ...arriving(2), children: link })) : null] }), _jsx("div", { className: featureCardsParts.grid, children: cardsOf(children).map(({ key, card }, at) => (
+                    /* Each card in a cell of its own, and the cell is what arrives: the card is the page's
+                       element and keeps its own transitions, which an arrival set on it would overwrite.
+                       Keyed by the card's own key, made unique across fragments by cardsOf, so a set the
+                       page reorders moves its cards rather than remounting them. */
+                    _jsx("div", { className: featureCardsParts.item, ...arriving(Math.min(FIRST_CARD + at, LAST_STEP)), children: card }, key))) })] }) }));
+}