@deriv-com/dds-marketing 1.0.2 → 1.1.1

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;

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

@@ -0,0 +1,100 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { given } from '../../given.js';
+import { Card } from '../../core/card/Card.js';
+import { Table } from '../../core/table/Table.js';
+import { TableHead } from '../../core/table-head/TableHead.js';
+import { TableBody } from '../../core/table-body/TableBody.js';
+import { TableRow } from '../../core/table-row/TableRow.js';
+import { TableCell } from '../../core/table-cell/TableCell.js';
+import { TableHeaderCell } from '../../core/table-header-cell/TableHeaderCell.js';
+import { tableCellParts } from '../../core/table-cell/TableCell.types.js';
+import { arriving, useReveal } from '../use-reveal.js';
+import './ComparisonTable.css';
+import './comparison-table-impl.css';
+import '../block-reveal.css';
+import { comparisonTableDefaults, comparisonTableParts, } from './ComparisonTable.types.js';
+/** The most columns drawn: the labels and three options. A fourth option is a column too narrow to read. */
+const MOST = 4;
+/**
+ * The Card for each ground. Card's own `surface` on the page; raised on the grey band, whose grey
+ * the plain surface would be; and turned round on the dark band, where a surface made for a light
+ * page would be dark words on near-black. The block knows its ground and the card does not, so the
+ * answer is here — FeatureCards' and ComparisonCards' rule for the same card.
+ */
+const SURFACE = {
+    page: { variant: 'surface', tone: 'default' },
+    subtle: { variant: 'surface-raised', tone: 'default' },
+    strong: { variant: 'surface', tone: 'inverse' },
+};
+/**
+ * A row's label, as the header of its row.
+ *
+ * The page's table has a header cell for a column and none for a row: TableHeaderCell is scoped to
+ * its column and holds its name on one line, and TableCell is a value, a `td`. So the label is
+ * TableCell's own cell rendered as a `th` scoped to its row — its class and the size, rule and
+ * wrapping the row hands every cell it holds — and the Table's sheet draws it exactly as it draws
+ * the values beside it. Nothing about its measure is restated here; what is this block's is the
+ * weight, which the contract binds on the part.
+ *
+ * It takes what TableRow clones onto each cell and spells it as the data the sheet reads, rather
+ * than letting it reach the element as attributes a `th` does not have.
+ */
+function RowHeader({ size = 'md', dividers = 'rows', overflow = 'wrap', children, }) {
+    return (_jsx("th", { scope: "row", className: `${tableCellParts.root} ${comparisonTableParts['row-header']}`, "data-size": size, "data-align": "start", "data-numeric": "false", "data-dividers": dividers, "data-overflow": overflow, children: children }));
+}
+/**
+ * One cell's words. A single line is text; several are a list, so a screen reader says how many
+ * there are and reads each as its own line rather than running a schedule's sessions together as
+ * one sentence. A list of one is the line it holds, and an empty list is an empty cell.
+ *
+ * `role="list"` spelled out: Safari drops a list's role once its markers are styled away, and the
+ * count is half of what the list tells a reader.
+ */
+function Lines({ value }) {
+    const lines = (Array.isArray(value) ? value : [value]).filter((line) => given(line));
+    if (lines.length === 0)
+        return null;
+    // Each line isolated, so a value keeps its own order in a right-to-left table: a sign or a
+    // range is neutral there, and "-3.00" came out "3.00-". Text in a right-to-left script still
+    // reads right to left — an isolate takes its direction from what it holds.
+    if (lines.length === 1)
+        return _jsx("bdi", { children: lines[0] });
+    return (_jsx("ul", { className: comparisonTableParts['cell-list'], role: "list", children: lines.map((line, at) => (
+        // A line's place is its identity: the cell is the page's copy, and nothing reorders it.
+        _jsx("li", { children: _jsx("bdi", { children: line }) }, at))) }));
+}
+/**
+ * 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 function ComparisonTable({ ground = comparisonTableDefaults.ground, title, description, columns, rows, footnote, }) {
+    const titleId = useId();
+    const [band, revealed] = useReveal();
+    const shown = columns.slice(0, MOST);
+    const [labels, ...options] = shown;
+    // Nothing to compare is nothing drawn: a named region holding no row or no option leads nowhere.
+    if (labels === undefined || options.length === 0 || rows.length === 0)
+        return null;
+    // How many columns share the card, which the sheet multiplies into the table's narrowest width.
+    const count = { '--dds-comparisontable-columns': shown.length };
+    return (_jsx("section", { className: comparisonTableParts.root, "data-ground": ground, "aria-labelledby": titleId, children: _jsxs("div", { className: comparisonTableParts.inner, ref: band, "data-revealed": revealed, children: [_jsxs("div", { className: comparisonTableParts.header, children: [_jsx("h2", { className: comparisonTableParts.title, id: titleId, ...arriving(0), children: title }), given(description) ? (_jsx("p", { className: comparisonTableParts.description, ...arriving(1), children: description })) : null] }), _jsxs("div", { className: comparisonTableParts.body, children: [_jsx(Card, { ...SURFACE[ground], ...arriving(2), children: _jsxs(Table, { "aria-label": title, layout: "fixed", hoverable: false, headerCase: "title", style: count, children: [_jsx(TableHead, { children: _jsx(TableRow, { children: shown.map((column, at) => (
+                                            // A column's place is its identity; keys are the page's and may repeat a label.
+                                            _jsx(TableHeaderCell, { children: column.label }, at))) }) }), _jsx(TableBody, { children: rows.map((row, at) => (_jsxs(TableRow, { children: [_jsx(RowHeader, { children: row.label }), options.map((column, place) => (_jsx(TableCell, { children: _jsx(Lines, { value: row.values[column.key] }) }, place)))] }, at))) })] }) }), given(footnote) ? (_jsx("p", { className: comparisonTableParts.footnote, ...arriving(3), children: footnote })) : null] })] }) }));
+}

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

@@ -0,0 +1,36 @@
+import type { ComparisonTableColumn, ComparisonTableRow } from '../../comparison-table-data.js';
+export interface ComparisonTableOwnProps {
+    /**
+     * `page` — The default, and the page's own white. The card is the recessed surface on it, Card's own `surface`, so it has an edge
+     * `subtle` — The grey band, the reference design's ground for this section. The card is raised to color.bg.surface-card-raised on it — white in light — because its own fill is 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 card turns to Card's inverse surface with white ink, its header band and rules to the band's own white veils
+     */
+    ground?: 'page' | 'subtle' | 'strong';
+    /** Always. What is being compared, in the fewest words that name it — "MT5 on every device", "Web terminal or desktop app?". It names the section and the table's scroll region both. */
+    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 columns, in reading order: first the labels' own — its `label` names what the rows are, "Features" — then the two or three options being compared, each with the `key` its values are filed under in every row and the `label` written over it. Only the first four are drawn; the columns share the card's width equally. */
+    columns: ComparisonTableColumn[];
+    /** Always. The rows, in reading order — each with its `label`, drawn as the row's header in the first column, and its `values` filed under the columns' keys. A value is one line, or a list of short lines that is drawn as a list. Keep them few enough to read without paging: a handful to a dozen. An empty list draws nothing. */
+    rows: ComparisonTableRow[];
+    /** A note true of the whole table — where the figures come from, what an asterisk means — under the card in small type. */
+    footnote?: string;
+}
+export type ComparisonTableProps = ComparisonTableOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const comparisonTableParts: {
+    readonly root: "dds-comparisontable";
+    readonly inner: "dds-comparisontable__inner";
+    readonly header: "dds-comparisontable__header";
+    readonly title: "dds-comparisontable__title";
+    readonly description: "dds-comparisontable__description";
+    readonly body: "dds-comparisontable__body";
+    readonly 'row-header': "dds-comparisontable__row-header";
+    readonly 'cell-list': "dds-comparisontable__cell-list";
+    readonly footnote: "dds-comparisontable__footnote";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const comparisonTableDefaults: {
+    readonly ground: "page";
+};

package/dist/components/blocks/comparison-table/ComparisonTable.types.js

@@ -0,0 +1,15 @@
+// GENERATED from comparison-table.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const comparisonTableParts = {
+    root: 'dds-comparisontable',
+    inner: 'dds-comparisontable__inner',
+    header: 'dds-comparisontable__header',
+    title: 'dds-comparisontable__title',
+    description: 'dds-comparisontable__description',
+    body: 'dds-comparisontable__body',
+    'row-header': 'dds-comparisontable__row-header',
+    'cell-list': 'dds-comparisontable__cell-list',
+    footnote: 'dds-comparisontable__footnote',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const comparisonTableDefaults = { ground: 'page' };