@deriv-com/dds-marketing 0.1.0 → 1.0.0

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))) })] }) }));
+}

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

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+export interface FeatureCardsOwnProps {
+    /**
+     * `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. A light card — surface-light — turns white on it, color.bg.surface-card-light-raised, because its own gray.50 is the band's and would vanish into it. A dark card — accent-strong — is lifted to color.bg.surface-card-strong-raised, a step lighter in dark mode, where the band is within a shade of its gray.900. A plain surface card is raised off it the same way, to color.bg.surface-card-raised, because the recessed fill is the band's gray too. 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. The coloured cards keep their own grounds on it; a neutral card — surface or surface-raised — turns to Card's inverse fill and white ink, and a plain card takes the white ink alone, because their own would be dark ink on near-black; an eyebrow inside any of them takes the band's quieter ink
+     */
+    ground?: 'page' | 'subtle' | 'strong';
+    /** Always. What the cards are, in the fewest words that name them — "Why trade with Deriv", "Markets you can trade". */
+    title: string;
+    /** A line saying what the set has in common, when the title alone does not. */
+    description?: string;
+    /** A way on to the page the whole set belongs to — "See all markets". A standalone Link, under the line. */
+    link?: ReactNode;
+    /** Allowed: Card, CardButton */
+    children: ReactNode;
+}
+export type FeatureCardsProps = FeatureCardsOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const featureCardsParts: {
+    readonly root: "dds-featurecards";
+    readonly inner: "dds-featurecards__inner";
+    readonly header: "dds-featurecards__header";
+    readonly title: "dds-featurecards__title";
+    readonly description: "dds-featurecards__description";
+    readonly link: "dds-featurecards__link";
+    readonly grid: "dds-featurecards__grid";
+    readonly item: "dds-featurecards__item";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const featureCardsDefaults: {
+    readonly ground: "page";
+};

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

@@ -0,0 +1,14 @@
+// GENERATED from feature-cards.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const featureCardsParts = {
+    root: 'dds-featurecards',
+    inner: 'dds-featurecards__inner',
+    header: 'dds-featurecards__header',
+    title: 'dds-featurecards__title',
+    description: 'dds-featurecards__description',
+    link: 'dds-featurecards__link',
+    grid: 'dds-featurecards__grid',
+    item: 'dds-featurecards__item',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const featureCardsDefaults = { ground: 'page' };