@deriv-com/dds-marketing 1.0.1 → 1.1.0

package/dist/components/blocks/comparison-cards/ComparisonCards.js

@@ -0,0 +1,75 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import './ComparisonCards.css';
+import './comparison-cards-impl.css';
+import '../block-reveal.css';
+import { given } from '../../given.js';
+import { Badge } from '../../core/badge/Badge.js';
+import { Button } from '../../core/button/Button.js';
+import { Card } from '../../core/card/Card.js';
+import { Link } from '../../core/link/Link.js';
+import { arriving, useReveal } from '../use-reveal.js';
+import { comparisonCardsDefaults, comparisonCardsParts, } from './ComparisonCards.types.js';
+/** The most cards drawn. A fifth column of label and value is too narrow to read. */
+const MOST = 4;
+/**
+ * The page's own Card for each surface. The standard card is Card's own `surface`, which follows the
+ * theme — the recessed grey on a light page, a dark grey in dark mode — so a set of equals reads as
+ * part of the page in either. Highlighted, the cards are gray.50 with dark ink in both themes, set
+ * against the brand's coral with white for the one the variant recommends.
+ */
+const SURFACE = { surface: 'surface', light: 'surface-light', coral: 'accent' };
+/**
+ * A heading over two or three cards that repeat the same rows — the reference site's
+ * ComparisonCards.
+ *
+ * The cards are records rather than children, the one place a block here takes its cards that way.
+ * What a comparison is made of is structured — a name, a sentence, and labels each answered with a
+ * value — and the block has to lay each card's rows against its neighbour's, which it cannot do
+ * inside a Card it was handed whole. The surface is still the page's own Card, so a light or a coral
+ * card here is the same fill and corner as anywhere else on the page.
+ *
+ * Side by side, every card shares the grid's rows: one for the intros, one per line of the
+ * comparison, one for the footnotes. The count of those rows is the one thing the stylesheet cannot
+ * read from the markup — it is the longest card's, not any one card's — so it is handed over as a
+ * custom property, FeatureScroll's way of passing a count.
+ *
+ * It arrives the way every block does: the heading and the line, then each card a step behind the
+ * one before. `'use client'` for that and for `useId`, which names the region by its heading.
+ */
+export function ComparisonCards({ ground = comparisonCardsDefaults.ground, variant = comparisonCardsDefaults.variant, title, description, cards, }) {
+    const titleId = useId();
+    const [band, revealed] = useReveal();
+    const shown = cards.slice(0, MOST);
+    // Nothing to compare is nothing drawn: a named region holding no option leads nowhere.
+    if (shown.length === 0)
+        return null;
+    // The recommended card, in the highlighted variant: the first one marked so. One only — a
+    // recommendation made twice is no recommendation.
+    const recommended = variant === 'highlighted' ? shown.findIndex((card) => card.recommended === true) : -1;
+    // One track for the intros, one per row of the longest card, one for the feet.
+    const rows = Math.max(...shown.map((card) => card.rows.length));
+    const tracks = { '--dds-comparisoncards-tracks': rows + 2 };
+    return (_jsx("section", { className: comparisonCardsParts.root, "data-ground": ground, "data-variant": variant, "aria-labelledby": titleId, children: _jsxs("div", { className: comparisonCardsParts.inner, ref: band, "data-revealed": revealed, children: [_jsxs("div", { className: comparisonCardsParts.header, children: [_jsx("h2", { className: comparisonCardsParts.title, id: titleId, ...arriving(0), children: title }), given(description) ? (_jsx("p", { className: comparisonCardsParts.description, ...arriving(1), children: description })) : null] }), _jsx("ul", { className: comparisonCardsParts.grid, style: tracks, children: shown.map((card, at) => {
+                        // Standard, every card is the page's own surface, so the options read as equals; highlighted,
+                        // the recommended card alone is coral against light ones, the one card asking to be read
+                        // first.
+                        const chosen = at === recommended;
+                        const tone = variant === 'standard' ? 'surface' : chosen ? 'coral' : 'light';
+                        const footed = given(card.footnote) || card.action !== undefined;
+                        return (
+                        /* A card's place is its identity: the set is a list, and nothing reorders it. The cell
+                           is what arrives, so the Card inside keeps its own transitions. */
+                        _jsx("li", { className: comparisonCardsParts.item, "data-tone": tone, "data-recommended": chosen || undefined, ...arriving(2 + at), children: _jsx(Card, { variant: SURFACE[tone], children: _jsxs("div", { className: comparisonCardsParts.body, children: [_jsxs("div", { className: comparisonCardsParts.intro, children: [_jsxs("div", { className: comparisonCardsParts['card-head'], children: [_jsx("h3", { className: comparisonCardsParts['card-title'], children: card.title }), chosen && given(card.badge) ? (_jsx("div", { className: comparisonCardsParts.highlight, children: _jsx(Badge, { label: card.badge ?? '' }) })) : null] }), given(card.description) ? (_jsx("p", { className: comparisonCardsParts['card-description'], children: card.description })) : null] }), card.rows.length > 0 ? (_jsx("dl", { className: comparisonCardsParts.rows, children: card.rows.map((row, line) => (
+                                            // A wrapping div per pair is what a description list allows, and what
+                                            // lets the label and the value share a line and a rule.
+                                            _jsxs("div", { className: comparisonCardsParts.row, children: [_jsx("dt", { className: comparisonCardsParts['row-label'], children: row.label }), _jsx("dd", { className: comparisonCardsParts['row-value'], children: _jsx("bdi", { children: row.value }) })] }, line))) })) : null, footed ? (_jsxs("div", { className: comparisonCardsParts.footer, children: [given(card.footnote) ? (_jsx("p", { className: comparisonCardsParts.footnote, children: card.footnote })) : null, card.action === undefined ? null : (_jsx("div", { className: comparisonCardsParts.action, children: chosen ? (
+                                                    /* The recommended card's way on is the band's one solid button: the
+                                                       dark one CtaBanner puts on the coral. */
+                                                    _jsx(Button, { variant: "inverse", tone: "brand", href: card.action.href, children: card.action.label })) : (
+                                                    /* The card's own ink rather than the brand's: coral words on a coral
+                                                       card would vanish, and one tone serves every card. */
+                                                    _jsx(Link, { variant: "standalone", tone: "inherit", href: card.action.href, children: card.action.label })) }))] })) : null] }) }) }, at));
+                    }) })] }) }));
+}

package/dist/components/blocks/comparison-cards/ComparisonCards.types.d.ts

@@ -0,0 +1,49 @@
+import type { ComparisonCardsCard } from '../../comparison-cards-data.js';
+export interface ComparisonCardsOwnProps {
+    /**
+     * `page` — The default, and the page's own white. The standard card is the recessed surface on it, the highlighted set's light card gray.50, so both have an edge
+     * `subtle` — The grey band, the reference design's ground for this section. The standard card is raised to color.bg.surface-card-raised on it and the light card turns white, color.bg.surface-card-light-raised, because their own fills are the band's grey. Painted as the band's tint over the page's own ground, so it is the same grey whatever is behind the section
+     * `strong` — `color.bg.brand-strong`, the dark band, for a section a reader should arrive at. The heading and the line under it turn white; the standard card turns to Card's inverse surface with white ink, since its own would be dark words on near-black; the light and coral cards keep their own grounds and ink
+     */
+    ground?: 'page' | 'subtle' | 'strong';
+    /**
+     * `standard` — The default: options set side by side as equals — every card Card's own `surface`, which follows the theme, the recessed grey on a light page and a dark grey in dark mode, nothing pointing at one of them. A card marked `recommended` is drawn like the rest here.
+     * `highlighted` — One option is the one the page recommends: the card marked `recommended` is drawn coral and lifted off the page, every other card on the light card, gray.50 in both themes, quiet beside it. Where the recommended card has a `badge`, its word stands on a badge pinned to the card's top end corner; where it has an `action`, the action is a solid button. For account and plan comparisons where the page has a recommendation and says so. A known exception: white running copy on the coral is about 3.4:1, under the 4.5:1 body text asks for — the package's ground rule keeps the coral to a headline and an action, and this card carries rows. Recorded rather than recoloured, as CtaBanner's band is; where the copy is long or the contrast matters, use the standard variant.
+     */
+    variant?: 'standard' | 'highlighted';
+    /** Always. What is being compared, in the fewest words that name it — "What you can trade", "Choose your account". */
+    title: string;
+    /** A line saying what the options have in common, or what the reader is choosing between, when the title alone does not. */
+    description?: string;
+    /** Always. The options, in reading order — two to four, each with its `title`, a `description`, its `rows` and, where it has them, a `footnote` and an `action`. Every card is drawn the same card. Keep the same labels in the same order on every card, so each row lines up with its counterpart. Two sit side by side from the fold; three stay stacked until full width; four are two rows of two from the fold and one row of four at full width. Only the first four are drawn, and an empty list draws nothing. With `variant="highlighted"`, the card marked `recommended` is the one drawn coral; give it a `badge` — "Most popular", "Recommended" — only where the page wants to say why. */
+    cards: ComparisonCardsCard[];
+}
+export type ComparisonCardsProps = ComparisonCardsOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const comparisonCardsParts: {
+    readonly root: "dds-comparisoncards";
+    readonly inner: "dds-comparisoncards__inner";
+    readonly header: "dds-comparisoncards__header";
+    readonly title: "dds-comparisoncards__title";
+    readonly description: "dds-comparisoncards__description";
+    readonly grid: "dds-comparisoncards__grid";
+    readonly item: "dds-comparisoncards__item";
+    readonly body: "dds-comparisoncards__body";
+    readonly intro: "dds-comparisoncards__intro";
+    readonly 'card-head': "dds-comparisoncards__card-head";
+    readonly 'card-title': "dds-comparisoncards__card-title";
+    readonly highlight: "dds-comparisoncards__highlight";
+    readonly 'card-description': "dds-comparisoncards__card-description";
+    readonly rows: "dds-comparisoncards__rows";
+    readonly row: "dds-comparisoncards__row";
+    readonly 'row-label': "dds-comparisoncards__row-label";
+    readonly 'row-value': "dds-comparisoncards__row-value";
+    readonly footer: "dds-comparisoncards__footer";
+    readonly footnote: "dds-comparisoncards__footnote";
+    readonly action: "dds-comparisoncards__action";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const comparisonCardsDefaults: {
+    readonly ground: "page";
+    readonly variant: "standard";
+};

package/dist/components/blocks/comparison-cards/ComparisonCards.types.js

@@ -0,0 +1,26 @@
+// GENERATED from comparison-cards.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const comparisonCardsParts = {
+    root: 'dds-comparisoncards',
+    inner: 'dds-comparisoncards__inner',
+    header: 'dds-comparisoncards__header',
+    title: 'dds-comparisoncards__title',
+    description: 'dds-comparisoncards__description',
+    grid: 'dds-comparisoncards__grid',
+    item: 'dds-comparisoncards__item',
+    body: 'dds-comparisoncards__body',
+    intro: 'dds-comparisoncards__intro',
+    'card-head': 'dds-comparisoncards__card-head',
+    'card-title': 'dds-comparisoncards__card-title',
+    highlight: 'dds-comparisoncards__highlight',
+    'card-description': 'dds-comparisoncards__card-description',
+    rows: 'dds-comparisoncards__rows',
+    row: 'dds-comparisoncards__row',
+    'row-label': 'dds-comparisoncards__row-label',
+    'row-value': 'dds-comparisoncards__row-value',
+    footer: 'dds-comparisoncards__footer',
+    footnote: 'dds-comparisoncards__footnote',
+    action: 'dds-comparisoncards__action',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const comparisonCardsDefaults = { ground: 'page', variant: 'standard' };

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

@@ -0,0 +1,262 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ */
+
+/*
+ * The header starts on a phone and is centred once the band is wide enough to hold a line.
+ *
+ * FeatureCards' rule and its reason: the cards are stacked content under the heading, so a centred
+ * heading is symmetric with them — but centred text starts every line at a different edge, which
+ * costs a great deal across a phone's measure. The header and its line are capped narrower than the
+ * column, so `margin-inline: auto` is what centres those boxes rather than their words.
+ *
+ * `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-comparisoncards .dds-comparisoncards__header {
+    align-items: center;
+    margin-inline: auto;
+    text-align: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-comparisoncards .dds-comparisoncards__description {
+    margin-inline: auto;
+  }
+}
+
+/*
+ * One column on a phone. `minmax(0, 1fr)` rather than `1fr`, so a long unbroken value shrinks to
+ * the column instead of pushing the grid past the page.
+ */
+:where([data-dds-context="marketing"]) .dds-comparisoncards .dds-comparisoncards__grid {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+/*
+ * A rule under every row but the last, in the card's own ink receded to opacity.track.
+ *
+ * The cards are several grounds — the page's own surface, which follows the theme, the fixed light
+ * surface and the coral of the highlighted set — and no one border role reads on all of them: the
+ * page's rules follow the theme, so color.border.default is white at sixteen on the fixed light card
+ * in dark mode and gone. The card's ink is the one colour certain to read on its own ground, so the
+ * rule is that ink, receded the way a track recedes behind the mark it carries. One rule for every
+ * card, and nothing to keep in step with the card's tone.
+ */
+:where([data-dds-context="marketing"]) .dds-comparisoncards .dds-comparisoncards__row {
+  border-block-end-color: color-mix(in srgb, currentColor calc(var(--opacity-track) * 100%), transparent);
+}
+
+/*
+ * A long value wraps before it squeezes its label.
+ *
+ * Both halves of a row start at the width of their words and shrink in proportion to it, so a value
+ * a sentence long took the whole line and broke a two-word label over two lines. The value is held
+ * to three fifths of the row, the reference design's own cap give or take, and wraps at the end
+ * edge inside it; the label keeps the rest.
+ */
+:where([data-dds-context="marketing"]) .dds-comparisoncards .dds-comparisoncards__row-value {
+  max-inline-size: 60%;
+}
+
+:where([data-dds-context="marketing"]) .dds-comparisoncards .dds-comparisoncards__row:last-child {
+  border-block-end-width: var(--border-width-none);
+}
+
+/*
+ * Side by side, the cards share the grid's rows.
+ *
+ * Two cards from the fold and three at full width — and three stay stacked until then, because a
+ * third card under a pair is compared with nothing beside it. Four are two rows of two from the
+ * fold, every card with a neighbour, and one row of four at full width. `:has()` asks the markup how many
+ * there are, FeatureCards' way; 64rem is where three columns of label and value have room.
+ *
+ * What lines the rows up is subgrid. Each cell spans the same run of the grid's rows — one for the
+ * intro, one per row of the longest card, one for the foot, a count the component hands over as
+ * `--dds-comparisoncards-tracks` — and the cell, the Card, the body and the list each pass those rows
+ * down rather than starting their own. So an intro two lines long in one card makes the intro row
+ * two lines long in all of them, and every card's first row starts level; a value that wraps in one
+ * card makes that row taller in every card, and the rules under it stay level too. Every card is as
+ * tall as the tallest for the same reason.
+ *
+ * The grid's row gap goes to nothing here, because its rows are now the cards' own lines rather than
+ * rows of cards: a gutter between them would open inside every card. Side by side there is only one
+ * row of cards, so the gutter has nothing else to separate.
+ *
+ * Written twice, once for each width, because a container query cannot be shared and the pair's
+ * rules have to hold from the fold while the three's start at full width. Where subgrid is not
+ * supported the cards still sit side by side, stretched to one height, and only the rows go unaligned.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-comparisoncards .dds-comparisoncards__grid:is(:has(> :nth-child(2):last-child), :has(> :nth-child(4):last-child)) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    row-gap: var(--space-gap-none);
+  }
+
+  :where([data-dds-context="marketing"]) .dds-comparisoncards .dds-comparisoncards__grid:is(:has(> :nth-child(2):last-child), :has(> :nth-child(4):last-child)) > .dds-comparisoncards__item {
+    grid-row: span var(--dds-comparisoncards-tracks);
+    grid-template-rows: subgrid;
+  }
+
+  /* The Card is a flex column of its own; here it is a grid passing the cell's rows on. */
+  :where([data-dds-context="marketing"]) .dds-comparisoncards .dds-comparisoncards__grid:is(:has(> :nth-child(2):last-child), :has(> :nth-child(4):last-child)) > .dds-comparisoncards__item > .dds-card,
+  :where([data-dds-context="marketing"]) .dds-comparisoncards .dds-comparisoncards__grid:is(:has(> :nth-child(2):last-child), :has(> :nth-child(4):last-child)) .dds-comparisoncards__body {
+    display: grid;
+    grid-row: 1 / -1;
+    grid-template-rows: subgrid;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-comparisoncards .dds-comparisoncards__grid:is(:has(> :nth-child(2):last-child), :has(> :nth-child(4):last-child)) .dds-comparisoncards__intro {
+    grid-row: 1;
+  }
+
+  /* Every row but the first and the last, so a card with fewer rows than its neighbour leaves the
+     rest empty and its foot still lands in the last row with the others. */
+  :where([data-dds-context="marketing"]) .dds-comparisoncards .dds-comparisoncards__grid:is(:has(> :nth-child(2):last-child), :has(> :nth-child(4):last-child)) .dds-comparisoncards__rows {
+    display: grid;
+    grid-row: 2 / -2;
+    grid-template-rows: subgrid;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-comparisoncards .dds-comparisoncards__grid:is(:has(> :nth-child(2):last-child), :has(> :nth-child(4):last-child)) .dds-comparisoncards__footer {
+    grid-row: -2 / -1;
+  }
+
+  /* Four make two rows of two, and the second pair stands a gutter below the first. The grid's own
+     row gap is spent — it would open inside every card — so the gap is the lower cells' margin,
+     which a subgrid adds to the rows at its edge and keeps out of the rows inside it. */
+  :where([data-dds-context="marketing"]) .dds-comparisoncards .dds-comparisoncards__grid:has(> :nth-child(4):last-child) > .dds-comparisoncards__item:nth-child(n + 3) {
+    margin-block-start: var(--space-grid-gutter);
+  }
+}
+
+@container (min-width: 64rem) {
+  :where([data-dds-context="marketing"]) .dds-comparisoncards .dds-comparisoncards__grid:has(> :nth-child(3):last-child) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    row-gap: var(--space-gap-none);
+  }
+
+  /* And four in one row of four: the second pair back level with the first. */
+  :where([data-dds-context="marketing"]) .dds-comparisoncards .dds-comparisoncards__grid:has(> :nth-child(4):last-child) {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  :where([data-dds-context="marketing"]) .dds-comparisoncards .dds-comparisoncards__grid:has(> :nth-child(4):last-child) > .dds-comparisoncards__item:nth-child(n + 3) {
+    margin-block-start: 0;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-comparisoncards .dds-comparisoncards__grid:is(:has(> :nth-child(3):last-child), :has(> :nth-child(4):last-child)) > .dds-comparisoncards__item {
+    grid-row: span var(--dds-comparisoncards-tracks);
+    grid-template-rows: subgrid;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-comparisoncards .dds-comparisoncards__grid:is(:has(> :nth-child(3):last-child), :has(> :nth-child(4):last-child)) > .dds-comparisoncards__item > .dds-card,
+  :where([data-dds-context="marketing"]) .dds-comparisoncards .dds-comparisoncards__grid:is(:has(> :nth-child(3):last-child), :has(> :nth-child(4):last-child)) .dds-comparisoncards__body {
+    display: grid;
+    grid-row: 1 / -1;
+    grid-template-rows: subgrid;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-comparisoncards .dds-comparisoncards__grid:is(:has(> :nth-child(3):last-child), :has(> :nth-child(4):last-child)) .dds-comparisoncards__intro {
+    grid-row: 1;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-comparisoncards .dds-comparisoncards__grid:is(:has(> :nth-child(3):last-child), :has(> :nth-child(4):last-child)) .dds-comparisoncards__rows {
+    display: grid;
+    grid-row: 2 / -2;
+    grid-template-rows: subgrid;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-comparisoncards .dds-comparisoncards__grid:is(:has(> :nth-child(3):last-child), :has(> :nth-child(4):last-child)) .dds-comparisoncards__footer {
+    grid-row: -2 / -1;
+  }
+}
+
+/*
+ * The light card turns white on the subtle band.
+ *
+ * FeatureCards' answer and its reason. surface-light is gray.50 in both themes, and so is the subtle
+ * band in light mode, so the card had no edge there: it takes color.bg.surface-card-light-raised,
+ * white in light and its own gray.50 in dark. The block knows its ground and the card does not, so
+ * the answer is here rather than in Card; the ink is the card's own and does not change.
+ */
+:where([data-dds-context="marketing"])
+  .dds-comparisoncards[data-ground="subtle"]
+  .dds-comparisoncards__item
+  > .dds-card[data-variant="surface-light"] {
+  background-color: var(--color-bg-surface-card-light-raised);
+}
+
+/*
+ * And the standard card — Card's own surface, which follows the theme — on the painted grounds,
+ * FeatureCards' rules for the same card. On the grey band its recessed fill is the band's grey and
+ * 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.
+ */
+:where([data-dds-context="marketing"])
+  .dds-comparisoncards[data-ground="subtle"]
+  .dds-comparisoncards__item
+  > .dds-card[data-variant="surface"] {
+  background-color: var(--color-bg-surface-card-raised);
+}
+
+:where([data-dds-context="marketing"])
+  .dds-comparisoncards[data-ground="strong"]
+  .dds-comparisoncards__item
+  > .dds-card[data-variant="surface"] {
+  background-color: var(--color-bg-surface-inverse);
+  color: var(--color-fg-on-brand-strong);
+}
+
+/*
+ * The highlighted variant: the recommended card lifted off the page.
+ *
+ * The lift is elevation.surface.raised rather than movement — a card moved up would move its rows
+ * off their neighbours', and the rows lining up is the point of the block.
+ *
+ * Its badge is pinned to the card's top end corner, space.inset.xs in from the top and from the
+ * end edge, out of the card's flow so it moves no row; the card is what it is placed against.
+ */
+:where([data-dds-context="marketing"]) .dds-comparisoncards[data-variant='highlighted'] .dds-comparisoncards__item[data-recommended] > .dds-card {
+  box-shadow: var(--elevation-surface-raised);
+  position: relative;
+}
+
+:where([data-dds-context="marketing"]) .dds-comparisoncards .dds-comparisoncards__highlight {
+  inset-block-start: var(--space-inset-xs);
+  inset-inline-end: var(--space-inset-xs);
+}
+
+/*
+ * A heading with no line under it closes up: its bound step is the distance to the line, and with
+ * nothing there it would only add to the step from the header to what follows. `:last-child` is the
+ * condition itself, DataTable's way, rather than a prop standing in for it.
+ */
+:where([data-dds-context="marketing"]) .dds-comparisoncards .dds-comparisoncards__title:last-child {
+  margin-block-end: 0;
+}
+
+/*
+ * A recommended card with a badge starts its title below the badge.
+ *
+ * The badge is pinned into the card's top end corner, out of the flow, and the title runs under it
+ * — a long title on a narrow card ran beneath the badge. The head steps down by space.inset.md, so
+ * the title's first line clears the badge however long it runs, and the rows below still line up
+ * with the other cards', the head being the row the subgrid lets grow.
+ */
+:where([data-dds-context="marketing"]) .dds-comparisoncards[data-variant='highlighted'] .dds-comparisoncards__item[data-recommended]:has(.dds-comparisoncards__highlight) .dds-comparisoncards__card-head {
+  padding-block-start: var(--space-inset-md);
+}
+
+/*
+ * A pair holds to two thirds of the row from full width, centred — FeatureCards' rule and its
+ * reason: two cards across the whole width put each label half a page from its value.
+ */
+@container (min-width: 64rem) {
+  :where([data-dds-context="marketing"]) .dds-comparisoncards .dds-comparisoncards__grid:has(> :nth-child(2):last-child) {
+    inline-size: 100%;
+    margin-inline: auto;
+    max-inline-size: calc((100% - 2 * var(--space-grid-gutter)) * 2 / 3 + var(--space-grid-gutter));
+  }
+}

package/dist/components/blocks/comparison-table/ComparisonTable.css

@@ -0,0 +1,111 @@
+/* GENERATED from comparisontable.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-comparisontable {
+  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-comparisontable .dds-comparisontable__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-comparisontable .dds-comparisontable__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-comparisontable .dds-comparisontable__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-comparisontable .dds-comparisontable__description {
+  margin: 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-comparisontable .dds-comparisontable__body {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  row-gap: var(--space-gap-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-comparisontable .dds-comparisontable__cell-list {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  row-gap: var(--space-gap-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-comparisontable .dds-comparisontable__footnote {
+  margin: 0;
+  font-family: var(--font-body-sm-family);
+  font-size: var(--font-body-sm-size);
+  font-weight: var(--font-body-sm-weight);
+  letter-spacing: var(--font-body-sm-letter-spacing);
+  line-height: var(--font-body-sm-line-height);
+  max-inline-size: var(--size-measure-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-comparisontable .dds-comparisontable__row-header {
+  font-weight: var(--font-label-md-weight);
+  letter-spacing: var(--font-label-md-letter-spacing);
+}
+
+:where([data-dds-context="marketing"]) .dds-comparisontable[data-ground="page"] {
+  background-color: var(--color-bg-page);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-comparisontable[data-ground="page"] .dds-comparisontable__footnote {
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"]) .dds-comparisontable[data-ground="strong"] {
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-comparisontable[data-ground="strong"] .dds-comparisontable__footnote {
+  color: var(--color-fg-muted-inverse);
+}
+
+:where([data-dds-context="marketing"]) .dds-comparisontable[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-comparisontable[data-ground="subtle"] .dds-comparisontable__footnote {
+  color: var(--color-fg-muted);
+}
+

package/dist/components/blocks/comparison-table/ComparisonTable.d.ts

@@ -0,0 +1,25 @@
+import './ComparisonTable.css';
+import './comparison-table-impl.css';
+import '../block-reveal.css';
+import { type ComparisonTableProps } from './ComparisonTable.types.js';
+export type { ComparisonTableProps };
+/**
+ * A heading over a short comparison table — the reference site's DynamicTable, named for its job.
+ *
+ * Nothing is drawn here that the page already has. The card is the page's own Card and the grid is
+ * the page's own Table — its head, body, rows and cells — so the corner, the rules, a cell's inset
+ * and the scroll on a phone are theirs. What is this block's is the section around them and the
+ * three things the reference asks of the table that its props do not reach: the light band under
+ * the column names, the bold first column, and the columns' share of a card that scrolls rather
+ * than squeezes. The first is the impl sheet's, the second the row header above, the third a column
+ * count handed to the sheet as a custom property, FeatureScroll's way of passing a count.
+ *
+ * Its columns and rows are records rather than children, the way ComparisonCards takes its cards:
+ * every row has to be drawn against the same columns, which the block cannot check inside rows it
+ * was handed whole. Only the first four columns are drawn, the reference's own ceiling.
+ *
+ * It arrives the way every block does: the heading and the line, then the table, then its note.
+ * `'use client'` for that, for `useId`, which names the region by its heading — and because Table,
+ * which it composes, is a client component already.
+ */
+export declare function ComparisonTable({ ground, title, description, columns, rows, footnote, }: ComparisonTableProps): import("react").JSX.Element | null;