@deriv-com/dds-marketing 1.0.2 → 1.1.0

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

@@ -0,0 +1,222 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ */
+
+/*
+ * The header starts on a phone and is centred from the fold — FeatureCards' arrangement and its
+ * reason: centred text starts every line at a different edge, which costs little across a wide
+ * measure and a great deal across a narrow one. The header is capped narrower than the column, so
+ * `margin-inline: auto` is what centres the box rather than its words inside a box left at the
+ * start edge.
+ *
+ * `48rem` longhand because `var()` is not permitted in a container query condition, and it is the
+ * width the rest of this package folds at.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-awards .dds-awards__header {
+    align-items: center;
+    margin-inline: auto;
+    text-align: center;
+  }
+}
+
+/* A laurel keeps its own proportions at the width it is given. */
+:where([data-dds-context="marketing"]) .dds-awards .dds-awards__laurel {
+  block-size: auto;
+}
+
+/*
+ * The words take what the two laurels leave, from a zero basis so a long award wraps inside the
+ * badge rather than pushing a laurel out of it. Here rather than in the contract, whose static CSS
+ * holds keywords and a flex shorthand is three numbers.
+ */
+:where([data-dds-context="marketing"]) .dds-awards .dds-awards__copy {
+  flex: 1 1 0;
+}
+
+/*
+ * The laurels turn in toward the words.
+ *
+ * The drawing is the left-hand branch, its leaves curling toward whatever stands to its right, so
+ * the trailing one is mirrored. In a right-to-left page the row is laid from the other edge — the
+ * leading laurel on the right — and the mirroring swaps with it. `scale` rather than a transform,
+ * so nothing else that might move the laurel has to know about it.
+ */
+:where([data-dds-context="marketing"]) .dds-awards .dds-awards__laurel[data-side="trailing"],
+:where([data-dds-context="marketing"]) .dds-awards .dds-awards__laurel[data-side="leading"]:dir(rtl) {
+  scale: -1 1;
+}
+
+:where([data-dds-context="marketing"]) .dds-awards .dds-awards__laurel[data-side="trailing"]:dir(rtl) {
+  scale: none;
+}
+
+/*
+ * On a phone, one row across the band.
+ *
+ * This is the row as it stands still — swiped, the browser's own scrolling coming to rest on a
+ * badge. It is what a reader who asked for less motion gets, and what every reader gets until the
+ * running row below takes it over.
+ *
+ * It runs out to the band's edges while its first badge lines up with the heading — TestimonialRow's
+ * breakout. `cqi` is the band's width, the root declaring `container-type`, and the bleed is how far
+ * the column stands in from the band's edge: half of whatever the band has beyond the content
+ * measure, plus the gutter. A negative margin of that measure takes the row out to both edges, and a
+ * leading padding of it brings the first badge back. The padding is on the row that scrolls, so it
+ * scrolls away with the badges and a badge is cut off by the band rather than by the column, which
+ * is the sign that there is more. `scroll-padding-inline` matches it, or a browser reads the resting
+ * position as short of the first badge's snap point and scrolls the gutter away on load.
+ *
+ * The block padding is room for the row's focus ring and for each badge's arrival, which starts a
+ * step below where it lands and which a scroll container would otherwise clip; the negative margin
+ * gives it back.
+ *
+ * The scrollbar stays — Scroller's reasoning: with no arrows under the row it is the standing sign
+ * that the row moves.
+ *
+ * `47.9375rem` is the last width below the fold, LogoRows' bound.
+ */
+@container (max-width: 47.9375rem) {
+  :where([data-dds-context="marketing"]) .dds-awards .dds-awards__list {
+    --dds-awards-bleed: calc((100cqi - min(100cqi, var(--size-content-max))) / 2 + var(--space-inset-page));
+    flex-wrap: nowrap;
+    margin-block: calc(-1 * var(--space-gap-sm));
+    margin-inline: calc(-1 * var(--dds-awards-bleed));
+    overflow-x: auto;
+    overflow-y: hidden;
+    overscroll-behavior-x: contain;
+    padding-block: var(--space-gap-sm);
+    padding-inline-start: var(--dds-awards-bleed);
+    scroll-padding-inline: var(--dds-awards-bleed);
+    scroll-snap-type: x proximity;
+  }
+
+  /*
+   * The trailing gutter, as a spacer rather than a padding — TestimonialRow's. A scroll container
+   * leaves its end padding out of what it scrolls to once its content overflows, so the last badge
+   * would come to rest against the band's edge. A generated box is a flex item like a badge, and its
+   * width counts; the negative margin takes back the gap the row puts before it.
+   */
+  :where([data-dds-context="marketing"]) .dds-awards .dds-awards__list::after {
+    content: '';
+    flex: none;
+    inline-size: var(--dds-awards-bleed);
+    margin-inline-start: calc(-1 * var(--space-grid-gutter));
+  }
+
+  /*
+   * A badge on the row keeps its width and does not shrink: a flex item shrinks to fit before it
+   * overflows, and a row of squeezed badges is the one thing this is not. size.grid.track-md, its
+   * ceiling from the fold, so a badge is one width at every size and an award wraps the same way.
+   */
+  :where([data-dds-context="marketing"]) .dds-awards .dds-awards__award {
+    flex: none;
+    inline-size: var(--size-grid-track-md);
+    scroll-snap-align: start;
+  }
+
+  /*
+   * The row's focus ring is drawn inside it. The row runs out to the band's edges and the band clips
+   * its overflow, so a ring drawn outside would lose its two sides to the band.
+   */
+  :where([data-dds-context="marketing"]) .dds-awards .dds-awards__list:focus-visible {
+    outline-offset: calc(-1 * var(--border-width-focus));
+  }
+}
+
+/*
+ * The running row's second set is drawn only while the row runs.
+ */
+:where([data-dds-context="marketing"]) .dds-awards .dds-awards__award[data-copy] {
+  display: none;
+}
+
+/*
+ * On a phone, for a reader who has not asked for less motion, the row runs on its own — the
+ * reference's marquee.
+ *
+ * The awards are drawn twice, the second set hidden from assistive technology, and the row is moved
+ * along by one set's width and starts again, which lands each award exactly where its copy was: the
+ * loop has no seam. One set is half the row less half a gutter — the row is both sets and the
+ * gutters between them, one fewer gutter than it has badges.
+ *
+ * The row stops being a scroller while it runs, so nothing is scrolled under it, and starts at the
+ * band's edge rather than in line with the heading: a running row has no first badge to line up.
+ * The band clips it.
+ *
+ * It takes motion.duration.ticker per award for one loop, so a long set runs at the pace of a short
+ * one, and it holds still while the reader hovers on it, focuses inside it — the row is a tab stop
+ * while it runs past the band — or presses on it: the way to read an award that is moving, and the
+ * way to stop it.
+ *
+ * In a right-to-left page the row runs the other way, towards the edge it starts from.
+ */
+@container (max-width: 47.9375rem) {
+  @media (prefers-reduced-motion: no-preference) {
+    :where([data-dds-context="marketing"]) .dds-awards .dds-awards__list {
+      animation: dds-awards-run calc(var(--motion-duration-ticker) * var(--dds-awards-count, 1)) linear
+        infinite;
+      inline-size: max-content;
+      overflow: visible;
+      padding-inline-start: 0;
+      scroll-snap-type: none;
+    }
+
+    :where([data-dds-context="marketing"]) .dds-awards .dds-awards__list:dir(rtl) {
+      animation-name: dds-awards-run-rtl;
+    }
+
+    :where([data-dds-context="marketing"]) .dds-awards .dds-awards__list:is(:hover, :focus-within, :active) {
+      animation-play-state: paused;
+    }
+
+    :where([data-dds-context="marketing"]) .dds-awards .dds-awards__list::after {
+      content: none;
+    }
+
+    :where([data-dds-context="marketing"]) .dds-awards .dds-awards__award[data-copy] {
+      display: flex;
+    }
+  }
+}
+
+@keyframes dds-awards-run {
+  to {
+    translate: calc(-50% - var(--space-grid-gutter) / 2) 0;
+  }
+}
+
+@keyframes dds-awards-run-rtl {
+  to {
+    translate: calc(50% + var(--space-grid-gutter) / 2) 0;
+  }
+}
+
+/* Said again for the sheet's own sake: a reader who asked for less motion never gets the running row. */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-awards .dds-awards__list {
+    animation: none;
+  }
+}
+
+/*
+ * From the fold, centred rows of five at most.
+ *
+ * Each badge grows from a shared basis and stops at size.grid.track-md, so a row holds as many as fit
+ * and a short one is not stretched across the band; `justify-content` centres the rows, the short
+ * last one included. The basis is a fifth of the row — the space five badges and their four gutters
+ * leave — so a sixth never fits, however wide the band, and it never falls below
+ * size.grid.track-sm, the narrowest a badge's words survive at: as the band narrows the row drops to
+ * four, three, two. Column count read from the room rather than from a breakpoint, the
+ * gap-names-its-relationship rule's last paragraph.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-awards .dds-awards__list {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-awards .dds-awards__award {
+    flex: 1 1 max(var(--size-grid-track-sm), calc((100% - 4 * var(--space-grid-gutter)) / 5));
+  }
+}

package/dist/components/blocks/cards-of.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from 'react';
+/**
+ * The cards a block was handed, 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 block 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 block counts what is inside it.
+ *
+ * Shared because two blocks lay out the page's own cards, FeatureCards and FeatureCardsCarousel,
+ * and both have to count them the same way.
+ */
+export declare function cardsOf(children: ReactNode, within?: string): {
+    key: string;
+    card: ReactNode;
+}[];

package/dist/components/blocks/cards-of.js

@@ -0,0 +1,23 @@
+import { Children, Fragment, isValidElement } from 'react';
+/**
+ * The cards a block was handed, 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 block 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 block counts what is inside it.
+ *
+ * Shared because two blocks lay out the page's own cards, FeatureCards and FeatureCardsCarousel,
+ * and both have to count them the same way.
+ */
+export 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 }];
+    });
+}

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

@@ -0,0 +1,195 @@
+/* GENERATED from comparisoncards.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-comparisoncards {
+  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-comparisoncards .dds-comparisoncards__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-comparisoncards .dds-comparisoncards__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-comparisoncards .dds-comparisoncards__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-comparisoncards .dds-comparisoncards__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-comparisoncards .dds-comparisoncards__grid {
+  display: grid;
+  list-style: none;
+  margin: 0;
+  min-inline-size: 0;
+  padding: 0;
+  column-gap: var(--space-grid-gutter);
+  row-gap: var(--space-grid-gutter);
+}
+
+:where([data-dds-context="marketing"]) .dds-comparisoncards .dds-comparisoncards__item {
+  display: grid;
+  min-inline-size: 0;
+}
+
+:where([data-dds-context="marketing"]) .dds-comparisoncards .dds-comparisoncards__body {
+  box-sizing: border-box;
+  display: flex;
+  flex: auto;
+  flex-direction: column;
+  min-inline-size: 0;
+  padding-block: var(--space-inset-card);
+  padding-inline: var(--space-inset-card);
+}
+
+:where([data-dds-context="marketing"]) .dds-comparisoncards .dds-comparisoncards__intro {
+  display: flex;
+  flex-direction: column;
+  margin-block-end: var(--space-gap-md);
+  row-gap: var(--space-heading-title-description-compact);
+}
+
+:where([data-dds-context="marketing"]) .dds-comparisoncards .dds-comparisoncards__card-head {
+  align-items: flex-start;
+  display: flex;
+  justify-content: space-between;
+  column-gap: var(--space-gap-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-comparisoncards .dds-comparisoncards__card-title {
+  margin-block: 0;
+  font-family: var(--font-h5-family);
+  font-size: var(--font-h5-size);
+  font-weight: var(--font-h5-weight);
+  letter-spacing: var(--font-h5-letter-spacing);
+  line-height: var(--font-h5-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-comparisoncards .dds-comparisoncards__highlight {
+  display: flex;
+  position: absolute;
+  padding-inline: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-comparisoncards .dds-comparisoncards__card-description {
+  margin-block: 0;
+  font-family: var(--font-body-md-family);
+  font-size: var(--font-body-md-size);
+  font-weight: var(--font-body-md-weight);
+  letter-spacing: var(--font-body-md-letter-spacing);
+  line-height: var(--font-body-md-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-comparisoncards .dds-comparisoncards__rows {
+  display: flex;
+  flex-direction: column;
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: 0;
+  row-gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-comparisoncards .dds-comparisoncards__row {
+  align-items: baseline;
+  border-block-end-style: solid;
+  display: flex;
+  justify-content: space-between;
+  border-block-end-width: var(--border-width-default);
+  column-gap: var(--space-gap-md);
+  padding-block: var(--space-inset-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-comparisoncards .dds-comparisoncards__row-label {
+  margin-inline: 0;
+  min-inline-size: 0;
+  font-family: var(--font-body-md-family);
+  font-size: var(--font-body-md-size);
+  font-weight: var(--font-body-md-weight);
+  letter-spacing: var(--font-body-md-letter-spacing);
+  line-height: var(--font-body-md-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-comparisoncards .dds-comparisoncards__row-value {
+  margin-inline: 0;
+  min-inline-size: 0;
+  text-align: end;
+  font-family: var(--font-label-md-family);
+  font-size: var(--font-label-md-size);
+  font-weight: var(--font-label-md-weight);
+  letter-spacing: var(--font-label-md-letter-spacing);
+  line-height: var(--font-label-md-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-comparisoncards .dds-comparisoncards__footer {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  margin-block-start: var(--space-gap-md);
+  row-gap: var(--space-gap-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-comparisoncards .dds-comparisoncards__footnote {
+  font-style: italic;
+  margin-block: 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);
+}
+
+:where([data-dds-context="marketing"]) .dds-comparisoncards .dds-comparisoncards__action {
+  display: flex;
+  margin-block-start: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-comparisoncards[data-ground="page"] {
+  background-color: var(--color-bg-page);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-comparisoncards[data-ground="strong"] {
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-comparisoncards[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/comparison-cards/ComparisonCards.d.ts

@@ -0,0 +1,24 @@
+import './ComparisonCards.css';
+import './comparison-cards-impl.css';
+import '../block-reveal.css';
+import { type ComparisonCardsProps } from './ComparisonCards.types.js';
+export type { ComparisonCardsProps };
+/**
+ * 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 declare function ComparisonCards({ ground, variant, title, description, cards, }: ComparisonCardsProps): import("react").JSX.Element | null;

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' };