@deriv-com/dds-marketing 1.0.1 → 1.1.0

package/dist/components/blocks/awards/Awards.js

@@ -0,0 +1,114 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from 'react';
+import './Awards.css';
+import './awards-impl.css';
+import '../block-reveal.css';
+import { arriving, useReveal } from '../use-reveal.js';
+import { awardsDefaults, awardsParts, } from './Awards.types.js';
+/**
+ * Where an award comes in the arrival, capped so a long list does not keep a reader waiting.
+ *
+ * The heading takes the first step. The awards follow one step apart up to the fifth — a row's
+ * worth from the fold — and the rest arrive with it: block-reveal.css keeps a block's trail inside
+ * its own movement, and seventeen awards a step apart would trail the heading by most of a second.
+ */
+const FIRST_AWARD = 1;
+const LAST_STEP = FIRST_AWARD + 4;
+/**
+ * The reference design's laurel, the vector its Stats section draws, in one colour.
+ *
+ * The left-hand branch: its leaves curl up and in toward whatever stands to its right. The second
+ * branch is this one mirrored, by the stylesheet, so one drawing serves both sides and a right-to-left
+ * page can swap which side is mirrored without a second picture. The reference laid it at a fifth of
+ * its strength; here it takes the band's quieter ink instead, a colour role rather than an alpha, so
+ * it follows the ground the way every other quiet thing in the package does.
+ */
+const LAUREL_PATHS = [
+    'M20.8655 76.0151C21.3631 78.5487 22.4577 80.4673 23.4245 81.7447C23.7945 82.2337 24.145 82.6275 24.4343 82.9245C24.5003 81.0424 24.5392 77.0209 23.854 73.543C23.3836 71.2282 22.6189 69.4263 21.9723 68.1997C21.7486 67.7754 21.539 67.42 21.3608 67.1361C21.2158 67.6487 21.042 68.3446 20.8935 69.1718C20.5634 71.0111 20.3623 73.4782 20.8655 76.0151Z',
+    'M9.19518 69.4464C8.5612 69.2311 8.01354 69.0792 7.6041 68.9776C7.77674 69.5261 8.03563 70.2542 8.40971 71.0711C9.16156 72.713 10.3603 74.6729 12.1472 76.0342C13.9141 77.3864 15.8077 77.7752 17.2669 77.8239C17.9963 77.8483 18.6126 77.7873 19.0419 77.7209C18.3715 76.5307 16.6347 73.8279 14.0892 71.9349C12.4167 70.7081 10.6015 69.924 9.19518 69.4464Z',
+    'M14.1789 62.4853C14.1095 65.0056 14.7018 67.1343 15.3106 68.6265C15.5268 69.1563 15.7445 69.6045 15.9342 69.9597C16.0737 69.4242 16.2473 68.7196 16.4239 67.9038C16.8294 66.0308 17.2467 63.5892 17.309 61.2688C17.3584 58.9612 17.0322 57.019 16.6942 55.65C16.5809 55.1908 16.4663 54.7965 16.3643 54.4749C16.1414 54.8952 15.8702 55.4487 15.5956 56.1107C14.9268 57.7233 14.2444 59.9642 14.1789 62.4853Z',
+    'M6.16644 56.5363L5.92729 56.2113C4.18123 53.9739 2.10237 52.4221 0.99942 51.685C1.0448 52.2219 1.13195 52.9558 1.29599 53.7969C1.6458 55.5904 2.33816 57.834 3.68889 59.699C5.02796 61.5534 6.66938 62.5331 7.97363 63.0496C8.56984 63.2857 9.09434 63.4244 9.48448 63.5049C9.08235 62.1271 8.06278 59.1136 6.16644 56.5363Z',
+    'M12.9202 41.9556C12.9103 41.468 12.8857 41.0438 12.8578 40.6964C12.5852 41.0139 12.2554 41.4254 11.9043 41.9234C10.9787 43.2365 9.91222 45.1415 9.34811 47.5086L9.21888 48.0509C8.78948 50.2094 8.89878 52.2002 9.13088 53.6853C9.21855 54.2463 9.32345 54.7333 9.42253 55.1275C10.2101 53.5777 11.6117 50.5783 12.3444 47.5177C12.8519 45.3454 12.9491 43.3817 12.9202 41.9556Z',
+    'M4.26838 40.1575C3.16507 37.3338 1.55966 35.0449 0.658674 33.8839C0.595099 34.3962 0.53299 35.0674 0.509766 35.8425C0.454879 37.6743 0.618233 40.0556 1.46849 42.2871C2.30759 44.5064 3.60611 45.9871 4.68907 46.9107C5.12959 47.2864 5.53393 47.5694 5.85602 47.7717C5.82536 47.3041 5.77132 46.6715 5.67501 45.9295C5.46619 44.3205 5.06044 42.211 4.27156 40.1569L4.26838 40.1575Z',
+    'M12.6632 27.4606C11.6314 28.3597 10.3804 29.7129 9.40352 31.5834L9.20135 32.004C8.19489 34.0975 7.83678 36.2499 7.73379 37.8807C7.69736 38.4576 7.693 38.9667 7.70264 39.3814C7.98105 39.0479 8.31846 38.6306 8.68777 38.1462C9.68653 36.8365 10.9078 35.0512 11.829 33.1204C12.7356 31.1936 13.238 29.3215 13.5154 27.9233C13.6157 27.4178 13.6864 26.9753 13.7361 26.6158C13.4324 26.8302 13.0648 27.1106 12.6632 27.4606Z',
+    'M7.15889 23.0454L7.23043 22.5253C7.54518 19.6881 7.36017 17.0948 7.19664 15.6517C6.9244 16.0575 6.59747 16.5777 6.25738 17.1905C5.37216 18.7855 4.41002 20.986 4.07631 23.4177C3.74032 25.8399 4.108 27.8499 4.55657 29.25C4.7215 29.7648 4.89717 30.1965 5.05235 30.5349C5.64762 29.1157 6.71893 26.2445 7.15889 23.0454Z',
+    'M20.7056 14.8951C19.4372 15.269 17.7724 15.9875 16.1554 17.3693L16.021 17.4932C14.3576 18.9542 13.2217 20.7665 12.5041 22.2202C12.2403 22.7546 12.0346 23.2374 11.8812 23.6318C12.2297 23.4596 12.6507 23.2423 13.1195 22.9822C14.4495 22.2442 16.1506 21.1686 17.6705 19.808C19.177 18.446 20.3493 16.9414 21.1512 15.7693C21.4549 15.3255 21.7047 14.9307 21.8987 14.6109C21.5673 14.6707 21.1626 14.7604 20.7056 14.8951Z',
+    'M15.246 9.89451L15.3989 9.48769C16.3817 6.71545 16.8681 4.08928 17.0948 2.56556C16.7641 2.88544 16.3703 3.28963 15.9481 3.76978C14.7583 5.12276 13.3571 7.06214 12.4902 9.40367C11.6163 11.7394 11.483 13.8564 11.5665 15.3854C11.595 15.9081 11.6489 16.3613 11.7069 16.7298C11.9415 16.3768 12.2271 15.9318 12.5414 15.4103C13.3841 14.0121 14.4266 12.0747 15.246 9.89451Z',
+    'M24.236 2.86551C22.4046 4.24716 21.0854 6.09763 20.225 7.6144C19.8673 8.24502 19.5916 8.81333 19.3933 9.25894C19.765 9.11933 20.2233 8.93634 20.7396 8.70812C22.1292 8.09394 23.9267 7.15785 25.5896 5.86671C27.2408 4.56435 28.6049 3.04428 29.5633 1.84034C29.9762 1.32163 30.3123 0.863542 30.5622 0.509562C30.206 0.526204 29.7564 0.567871 29.2396 0.659382C27.8788 0.900297 26.0564 1.48555 24.236 2.86551Z',
+];
+/** One laurel branch. Decoration: hidden from assistive technology and never focusable. */
+function Laurel({ side }) {
+    return (_jsx("svg", { className: awardsParts.laurel, "data-side": side, viewBox: "0 0 32 84", fill: "none", "aria-hidden": "true", focusable: "false", children: LAUREL_PATHS.map((d) => (_jsx("path", { d: d, fill: "currentColor", stroke: "currentColor" }, d))) }));
+}
+/**
+ * Whether the list is wider than the room it has — the phone's row, and only while it runs on past
+ * the band's edge.
+ *
+ * Scroller writes its tab stop unconditionally, because it cannot see what it was given. This can:
+ * the list is one of two shapes, and only one of them scrolls. A tab stop on rows that show every
+ * award is a stop that does nothing, so the list carries one while it overflows and drops it when a
+ * wider band wraps it. Measured rather than read off a breakpoint, because a phone's row of two
+ * short awards fits and does not scroll either.
+ *
+ * `false` until it has measured — a list rendered on the server has no width to ask about — and
+ * left there by a renderer with no ResizeObserver, which is the test environment rather than a
+ * browser anyone reads in.
+ */
+function useOverflowing(list) {
+    const [overflowing, setOverflowing] = useState(false);
+    useEffect(() => {
+        const element = list.current;
+        if (element === null || typeof ResizeObserver === 'undefined')
+            return;
+        // Scrolled past its box, or — while the phone's row runs — drawn wider than the band it runs
+        // across: the running row is not a scroller, so it never scrolls, but it is still a row that
+        // goes past the edge, and its tab stop is how a keyboard holds it still.
+        const measure = () => {
+            const band = element.closest('section');
+            setOverflowing(element.scrollWidth > element.clientWidth ||
+                (band !== null && element.getBoundingClientRect().width > band.getBoundingClientRect().width + 1));
+        };
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [list]);
+    return overflowing;
+}
+/** One award's badge: the award's words between its two laurels. */
+function Badge({ award }) {
+    return (_jsxs(_Fragment, { children: [_jsx(Laurel, { side: "leading" }), _jsxs("div", { className: awardsParts.copy, children: [_jsx("p", { className: awardsParts.name, children: award.title }), _jsx("p", { className: awardsParts.issuer, children: award.issuer })] }), _jsx(Laurel, { side: "trailing" })] }));
+}
+/**
+ * A heading over the awards a company has won, each between two laurels — the reference design's
+ * FeatureAwards.
+ *
+ * One list, two shapes, and the stylesheet chooses between them on the section's width. From the
+ * fold it wraps into centred rows of five at most; on a phone it is one row across the band that
+ * runs on its own, the reference's marquee, holding still while the reader hovers, focuses or presses
+ * on it. The running row is the awards drawn twice, the second set hidden from assistive technology,
+ * so its loop has no seam and a screen reader counts each award once. A reader who asked for less
+ * motion gets the row still, to swipe.
+ *
+ * The awards are records rather than children, `Award` from `awards-data`: an award is
+ * two lines of words, and the laurels around them are the section's, the same for every award.
+ *
+ * It arrives the way every block does: the heading, then each award a step behind the one before,
+ * in reading order. `'use client'` for that, for `useId`, which names the region and the row by the
+ * heading, and for the measurement that gives the row its tab stop.
+ */
+export function Awards({ ground = awardsDefaults.ground, title, awards }) {
+    const titleId = useId();
+    const [band, revealed] = useReveal();
+    const list = useRef(null);
+    const overflowing = useOverflowing(list);
+    // Nothing to show is nothing drawn: a heading over no awards is a claim with nothing behind it.
+    if (awards.length === 0)
+        return null;
+    return (_jsx("section", { className: awardsParts.root, "data-ground": ground, "aria-labelledby": titleId, children: _jsxs("div", { className: awardsParts.inner, ref: band, "data-revealed": revealed, children: [_jsx("div", { className: awardsParts.header, children: _jsx("h2", { className: awardsParts.title, id: titleId, ...arriving(0), children: title }) }), _jsxs("ul", { className: awardsParts.list, ref: list, role: "list", tabIndex: overflowing ? 0 : undefined, "aria-labelledby": overflowing ? titleId : undefined, 
+                    // How many awards there are, which the phone's running row times its loop by.
+                    style: { '--dds-awards-count': awards.length }, children: [awards.map((award, at) => (
+                        // An award's place is its identity: the list is the page's, and nothing here reorders it.
+                        _jsx("li", { className: awardsParts.award, ...arriving(Math.min(FIRST_AWARD + at, LAST_STEP)), children: _jsx(Badge, { award: award }) }, at))), awards.map((award, at) => (_jsx("li", { className: awardsParts.award, "data-copy": "", "aria-hidden": "true", ...arriving(Math.min(FIRST_AWARD + at, LAST_STEP)), children: _jsx(Badge, { award: award }) }, `copy-${at}`)))] })] }) }));
+}

package/dist/components/blocks/awards/Awards.types.d.ts

@@ -0,0 +1,31 @@
+import type { Award } from '../../awards-data.js';
+export interface AwardsOwnProps {
+    /**
+     * `page` — The default, and the reference design's: the page's own white, with the laurels in color.fg.muted
+     * `subtle` — The grey band, for a section that needs setting apart from the one above it. Painted as the band's tint laid over the page's own ground, so it is the same grey whatever is behind the section
+     * `strong` — `color.bg.brand-strong`, the dark band, for a section a reader should arrive at. The heading and the awards turn white and the laurels take color.fg.muted-inverse, the band's own quieter ink
+     */
+    ground?: 'page' | 'subtle' | 'strong';
+    /** Always. What the badges are, in the fewest words that name them — "Our awards". */
+    title: string;
+    /** Always. The awards, in the order they are read — across each row from the fold, and along the one row on a phone. Newest first, usually: the year is what says a claim is current. Six or more, so the phone's row runs on past the band's edge. An empty list draws nothing. */
+    awards: Award[];
+}
+export type AwardsProps = AwardsOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const awardsParts: {
+    readonly root: "dds-awards";
+    readonly inner: "dds-awards__inner";
+    readonly header: "dds-awards__header";
+    readonly title: "dds-awards__title";
+    readonly list: "dds-awards__list";
+    readonly award: "dds-awards__award";
+    readonly laurel: "dds-awards__laurel";
+    readonly copy: "dds-awards__copy";
+    readonly name: "dds-awards__name";
+    readonly issuer: "dds-awards__issuer";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const awardsDefaults: {
+    readonly ground: "page";
+};

package/dist/components/blocks/awards/Awards.types.js

@@ -0,0 +1,16 @@
+// GENERATED from awards.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const awardsParts = {
+    root: 'dds-awards',
+    inner: 'dds-awards__inner',
+    header: 'dds-awards__header',
+    title: 'dds-awards__title',
+    list: 'dds-awards__list',
+    award: 'dds-awards__award',
+    laurel: 'dds-awards__laurel',
+    copy: 'dds-awards__copy',
+    name: 'dds-awards__name',
+    issuer: 'dds-awards__issuer',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const awardsDefaults = { ground: 'page' };

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;