@deriv-com/dds-marketing 1.1.3 → 1.2.0

package/dist/components/arrival.js

@@ -0,0 +1,140 @@
+'use client';
+import { useLayoutEffect, useRef, useState } from 'react';
+/**
+ * When a part with a motion of its own — a figure that rolls, a word that swaps, a bar that fills —
+ * plays it. The part sets the answer on itself as `data-arrival`, and its stylesheet holds its
+ * animation paused while that reads `waiting` and lets it run at `playing`. Nothing about the
+ * motion itself is here: the steps, the timings and the easing are the stylesheet's, in the
+ * package's motion tokens.
+ *
+ * A part plays where it is, which is what makes the same motion usable anywhere:
+ *
+ * - inside a host that is itself arriving — an IllustrationCard, which marks itself
+ *   `data-arrival-host` — it follows that, so a pane's parts play when the pane has landed rather
+ *   than each on its own;
+ * - inside a block's reveal (`data-revealed`, see use-reveal.ts) it waits for the block to bring
+ *   it in, and for the part of the block that holds it to finish moving, so it plays on something
+ *   that has come to rest;
+ * - anywhere else it plays once it is well into view — six tenths of it showing — so a figure at
+ *   the foot of a section is not over before a reader reaches it.
+ *
+ * It answers `still` until it is running, for use-reveal's reason: a motion that held a part at
+ * its first frame until a script arrived would leave a reader with no script looking at zeros and
+ * empty boxes. And it fires once, then lets go.
+ */
+export function useArrival(enabled = true) {
+    const held = useRef(null);
+    const [arrival, setArrival] = useState('still');
+    useLayoutEffect(() => {
+        const element = held.current;
+        if (!enabled || element === null)
+            return undefined;
+        if (typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+            return undefined;
+        }
+        if (typeof IntersectionObserver === 'undefined' || typeof MutationObserver === 'undefined')
+            return undefined;
+        if (element.getClientRects().length === 0)
+            return undefined;
+        let cancelled = false;
+        const cleanups = [];
+        const play = () => {
+            // The next frame, for use-reveal's reason: a transition or an animation needs its first
+            // frame painted before it has anything to move from.
+            const frame = requestAnimationFrame(() => {
+                if (!cancelled)
+                    setArrival('playing');
+            });
+            cleanups.push(() => cancelAnimationFrame(frame));
+        };
+        // Following something that is itself arriving — a pane — its answer is this part's answer. The
+        // host is found by a mark it carries from its first render, because its own answer is set in a
+        // layout effect that runs after this one: a child's effects run before its parent's.
+        const leader = element.parentElement?.closest('[data-arrival-host]') ?? null;
+        if (leader !== null) {
+            // No frame put off here, unlike playing on its own below: a part following its host has been
+            // painted waiting beside it all along, so it has its first frame already — and a frame asked
+            // for from inside the host's own switch can be one the browser never draws.
+            const follow = () => {
+                if (leader.dataset['arrival'] !== 'playing')
+                    return false;
+                if (!cancelled)
+                    setArrival('playing');
+                return true;
+            };
+            setArrival('waiting');
+            if (!follow()) {
+                const watch = new MutationObserver(() => {
+                    if (follow())
+                        watch.disconnect();
+                });
+                watch.observe(leader, { attributes: true, attributeFilter: ['data-arrival'] });
+                cleanups.push(() => watch.disconnect());
+            }
+            return () => {
+                cancelled = true;
+                cleanups.forEach((clean) => clean());
+            };
+        }
+        setArrival('waiting');
+        const landed = () => {
+            // Inside a block's reveal, the part of the block that holds this one — or this one itself —
+            // is moving in on a transition. The motion starts when that has come to rest.
+            const mover = element.closest('[data-reveal-at]');
+            const settle = Math.max(restingIn(element), mover === null ? 0 : restingIn(mover));
+            if (settle === 0) {
+                play();
+                return;
+            }
+            const timer = window.setTimeout(play, settle);
+            cleanups.push(() => window.clearTimeout(timer));
+        };
+        const watchReveal = () => {
+            const block = element.closest('[data-revealed]');
+            if (block === null || block.dataset['revealed'] === 'true') {
+                landed();
+                return;
+            }
+            const watch = new MutationObserver(() => {
+                if (block.dataset['revealed'] === 'true') {
+                    watch.disconnect();
+                    landed();
+                }
+            });
+            watch.observe(block, { attributes: true, attributeFilter: ['data-revealed'] });
+            cleanups.push(() => watch.disconnect());
+        };
+        // Seen once most of it is on screen — or, for a part taller than the screen, once it fills most
+        // of the screen. Six-tenths of a part three screens tall is never on screen at once, and a part
+        // that waited for that would wait at its first frame forever. The finer thresholds are what let
+        // the callback hear a tall part fill the screen, which no single crossing of 0.6 would report.
+        const seen = new IntersectionObserver((entries) => {
+            const landedOnScreen = entries.some((entry) => entry.isIntersecting &&
+                (entry.intersectionRatio >= 0.6 ||
+                    (entry.rootBounds !== null && entry.intersectionRect.height >= entry.rootBounds.height * 0.6)));
+            if (!landedOnScreen)
+                return;
+            seen.disconnect();
+            watchReveal();
+        }, { threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6] });
+        seen.observe(element);
+        cleanups.push(() => seen.disconnect());
+        return () => {
+            cancelled = true;
+            cleanups.forEach((clean) => clean());
+        };
+    }, [enabled]);
+    return [held, arrival];
+}
+/** How long an element's own transition takes to finish from now: its first delay and duration. */
+function restingIn(element) {
+    const style = getComputedStyle(element);
+    const seconds = (value) => {
+        const first = value.split(',')[0]?.trim() ?? '0s';
+        const amount = Number.parseFloat(first);
+        if (!Number.isFinite(amount))
+            return 0;
+        return first.endsWith('ms') ? amount : amount * 1000;
+    };
+    return seconds(style.transitionDelay) + seconds(style.transitionDuration);
+}

package/dist/components/arrives.d.ts

@@ -0,0 +1,17 @@
+import { type ReactElement, type Ref } from 'react';
+type Element = ReactElement<Record<string, unknown> & {
+    ref?: Ref<HTMLElement>;
+}>;
+/**
+ * Gives one element its arrival — `data-arrival`, from useArrival — so a component with no script
+ * of its own can move once on arrival without becoming a client component: it wraps the element it
+ * draws only when a motion has been asked for. The element keeps everything it was given, and
+ * anything handed to this wrapper — a tooltip's handlers, cloned onto what it holds — is passed on
+ * to it.
+ */
+export declare function Arrives({ children, ...handed }: {
+    children: Element;
+} & Record<string, unknown>): ReactElement<Record<string, unknown> & {
+    ref?: Ref<HTMLElement>;
+}, string | import("react").JSXElementConstructor<any>>;
+export {};

package/dist/components/arrives.js

@@ -0,0 +1,14 @@
+'use client';
+import { cloneElement } from 'react';
+import { useArrival } from './arrival.js';
+/**
+ * Gives one element its arrival — `data-arrival`, from useArrival — so a component with no script
+ * of its own can move once on arrival without becoming a client component: it wraps the element it
+ * draws only when a motion has been asked for. The element keeps everything it was given, and
+ * anything handed to this wrapper — a tooltip's handlers, cloned onto what it holds — is passed on
+ * to it.
+ */
+export function Arrives({ children, ...handed }) {
+    const [held, arrival] = useArrival();
+    return cloneElement(children, { ...handed, ref: held, 'data-arrival': arrival === 'still' ? undefined : arrival });
+}

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

@@ -5,6 +5,7 @@ import './Awards.css';
 import './awards-impl.css';
 import '../block-reveal.css';
 import { arriving, useReveal } from '../use-reveal.js';
+import { Laurel } from '../laurel.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.
@@ -15,32 +16,6 @@ import { awardsDefaults, awardsParts, } from './Awards.types.js';
  */
 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.
@@ -78,7 +53,7 @@ function useOverflowing(list) {
 }
 /** 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" })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Laurel, { className: awardsParts.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, { className: awardsParts.laurel, side: "trailing" })] }));
 }
 /**
  * A heading over the awards a company has won, each between two laurels — the reference design's

package/dist/components/blocks/block-pattern.css

@@ -0,0 +1,23 @@
+/*
+ * The page's one patterned band, drawn as a block's first layer.
+ *
+ * A block that offers `background` places a Background with nothing to hold as its section's first
+ * child, and Background, as a layer, fills its positioned parent behind that parent's content. So
+ * the section is positioned and isolated, and its own content is lifted over the layer by being
+ * positioned after it: the pattern is under the content and over nothing — the section's first
+ * layer, not a wrapper round it.
+ *
+ * Defined once, as block-reveal.css is, and imported by each block that offers the pattern, so a fix
+ * to how the layer stacks lands in every one of them. Keyed on the layer being there rather than on
+ * each block's name, so a block that comes to offer the pattern needs nothing added here — and not
+ * on `data-background` alone, which CtaBanner, LandingHero and PageHeader set too, for a ground of
+ * their own: this sheet is global once any block loads it, and theirs must not be repositioned.
+ */
+:where([data-dds-context="marketing"]) [data-background]:has(> .dds-background[data-layer='true']) {
+  isolation: isolate;
+  position: relative;
+}
+
+:where([data-dds-context="marketing"]) [data-background]:has(> .dds-background[data-layer='true']) > :not(.dds-background) {
+  position: relative;
+}

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

@@ -209,6 +209,35 @@
   color: var(--color-fg-on-brand-strong);
 }
 
+/*
+ * The standard card's supporting words recede, so its title and its values read first.
+ *
+ * The line under the card's title, each row's label and the footnote take the muted ink — the
+ * answers are what a reader compares across the cards, and the labels only say which question each
+ * answers. On the page and the subtle band that is color.fg.muted, which follows the theme as the
+ * standard card's surface does; on the dark band, where that card has turned to the inverse surface
+ * and white ink above, it is color.fg.muted-inverse. CardBody's eyebrow takes the same two.
+ *
+ * Only the standard card, which is Card's own `surface`. The highlighted set's light card is gray.50
+ * in both themes and the page's muted grey turns pale with dark mode, and the coral card's white is
+ * already at the edge of its contrast, so neither has a muted ink to recede to and both keep their own.
+ */
+:where([data-dds-context="marketing"])
+  .dds-comparisoncards:is([data-ground="page"], [data-ground="subtle"])
+  .dds-comparisoncards__item
+  > .dds-card[data-variant="surface"]
+  :is(.dds-comparisoncards__card-description, .dds-comparisoncards__row-label, .dds-comparisoncards__footnote) {
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"])
+  .dds-comparisoncards[data-ground="strong"]
+  .dds-comparisoncards__item
+  > .dds-card[data-variant="surface"]
+  :is(.dds-comparisoncards__card-description, .dds-comparisoncards__row-label, .dds-comparisoncards__footnote) {
+  color: var(--color-fg-muted-inverse);
+}
+
 /*
  * The highlighted variant: the recommended card lifted off the page.
  *

package/dist/components/blocks/documents/Documents.css

@@ -0,0 +1,90 @@
+/* GENERATED from documents.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-documents {
+  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-documents .dds-documents__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-documents .dds-documents__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);
+  max-inline-size: var(--size-measure-heading);
+}
+
+:where([data-dds-context="marketing"]) .dds-documents .dds-documents__header {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  row-gap: var(--space-heading-title-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-documents .dds-documents__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-documents .dds-documents__body {
+  inline-size: 100%;
+  min-inline-size: 0;
+  row-gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-documents .dds-documents__list {
+  display: grid;
+  list-style: none;
+  margin-block: 0;
+  padding-inline: 0;
+  column-gap: var(--space-gap-lg);
+  row-gap: var(--space-gap-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-documents .dds-documents__item {
+  min-inline-size: 0;
+}
+
+:where([data-dds-context="marketing"]) .dds-documents[data-layout="grid"] .dds-documents__inner {
+  display: grid;
+}
+
+:where([data-dds-context="marketing"]) .dds-documents[data-ground="page"] {
+  background-color: var(--color-bg-page);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-documents[data-ground="strong"] {
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-documents[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/documents/Documents.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from 'react';
+import './Documents.css';
+import './documents-impl.css';
+import '../block-reveal.css';
+import { type DocumentsProps } from './Documents.types.js';
+export type { DocumentsProps };
+/**
+ * A section of documents — the reference design's DocumentChips and CountryLinkGrid, one block
+ * because they are one job.
+ *
+ * Under `groups` the children are AccordionItems, each holding DocumentLink chips, drawn as one
+ * Accordion: one group open at a time, the documents two to a row from the fold. Under `grid` the
+ * children are DocumentLinks, laid as a list beside the heading. Built from children rather than
+ * records so a page writes the documents it has — and a country's flag is the package's own icon,
+ * not an image fetched from elsewhere.
+ *
+ * It arrives the way every block does: the heading and its line, then the documents. `'use client'`
+ * for that and for `useId`, which names the region by its heading.
+ */
+export declare function Documents({ ground, layout, title, description, children, }: DocumentsProps & {
+    children?: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/blocks/documents/Documents.js

@@ -0,0 +1,30 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, useId } from 'react';
+import './Documents.css';
+import './documents-impl.css';
+import '../block-reveal.css';
+import { Accordion } from '../../core/accordion/Accordion.js';
+import { given } from '../../given.js';
+import { arriving, useReveal } from '../use-reveal.js';
+import { documentsDefaults, documentsParts } from './Documents.types.js';
+/**
+ * A section of documents — the reference design's DocumentChips and CountryLinkGrid, one block
+ * because they are one job.
+ *
+ * Under `groups` the children are AccordionItems, each holding DocumentLink chips, drawn as one
+ * Accordion: one group open at a time, the documents two to a row from the fold. Under `grid` the
+ * children are DocumentLinks, laid as a list beside the heading. Built from children rather than
+ * records so a page writes the documents it has — and a country's flag is the package's own icon,
+ * not an image fetched from elsewhere.
+ *
+ * It arrives the way every block does: the heading and its line, then the documents. `'use client'`
+ * for that and for `useId`, which names the region by its heading.
+ */
+export function Documents({ ground = documentsDefaults.ground, layout = documentsDefaults.layout, title, description, children, }) {
+    const titleId = useId();
+    const [band, revealed] = useReveal();
+    return (_jsx("section", { className: documentsParts.root, "data-ground": ground, "data-layout": layout, "aria-labelledby": titleId, children: _jsxs("div", { className: documentsParts.inner, ref: band, "data-revealed": revealed, children: [_jsxs("div", { className: documentsParts.header, children: [_jsx("h2", { className: documentsParts.title, id: titleId, ...arriving(0), children: title }), given(description) ? (_jsx("p", { className: documentsParts.description, ...arriving(1), children: description })) : null] }), _jsx("div", { className: documentsParts.body, ...arriving(2), children: layout === 'grid' ? (
+                    // `role="list"` spelled out: Safari drops a list's role once its markers are styled away.
+                    _jsx("ul", { className: documentsParts.list, role: "list", children: Children.toArray(children).map((child, at) => (_jsx("li", { className: documentsParts.item, children: child }, at))) })) : (_jsx(Accordion, { children: children })) })] }) }));
+}

package/dist/components/blocks/documents/Documents.types.d.ts

@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react';
+export interface DocumentsOwnProps {
+    /**
+     * `page` — The default, and the page's own white. A section that has nothing to separate itself from what is above it — most of them — and the ground a reader is already on
+     * `subtle` — A quiet step off the page, for a band that wants to read as its own section without changing the page's voice — the reference design's slate FAQ. 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. It stops the page rather than dividing it, so it is for a section a reader should arrive at — and one per page is usually one more than enough. The documents turn round with it: white group headings, a muted chevron, rules in the band's own veil and a focus ring drawn for the dark, fixed like the band
+     */
+    ground?: 'page' | 'subtle' | 'strong';
+    /**
+     * `groups` — The default: the documents under headings that expand, one group open at a time — AccordionItem children, each holding DocumentLink chips, two to a row from the fold. The reference design's DocumentChips
+     * `grid` — Many short entries of one kind — a document per country, each behind its flag — DocumentLink children with `variant="plain"`, in a grid beside the heading from 62rem and under it below. The reference design's CountryLinkGrid
+     */
+    layout?: 'groups' | 'grid';
+    /** Always. What the documents are, in a few words — "Regulatory documents", "Licences by country". It names the section */
+    title: string;
+    /** A line under the heading saying what the documents are for or who they apply to */
+    description?: string;
+    /** Allowed: AccordionItem, DocumentLink */
+    children: ReactNode;
+}
+export type DocumentsProps = DocumentsOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const documentsParts: {
+    readonly root: "dds-documents";
+    readonly inner: "dds-documents__inner";
+    readonly title: "dds-documents__title";
+    readonly header: "dds-documents__header";
+    readonly description: "dds-documents__description";
+    readonly body: "dds-documents__body";
+    readonly list: "dds-documents__list";
+    readonly item: "dds-documents__item";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const documentsDefaults: {
+    readonly ground: "page";
+    readonly layout: "groups";
+};

package/dist/components/blocks/documents/Documents.types.js

@@ -0,0 +1,14 @@
+// GENERATED from documents.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const documentsParts = {
+    root: 'dds-documents',
+    inner: 'dds-documents__inner',
+    title: 'dds-documents__title',
+    header: 'dds-documents__header',
+    description: 'dds-documents__description',
+    body: 'dds-documents__body',
+    list: 'dds-documents__list',
+    item: 'dds-documents__item',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const documentsDefaults = { ground: 'page', layout: 'groups' };

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

@@ -0,0 +1,103 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * `groups`: the heading is centred from the fold over the groups it names, FaqAccordion's rule; and
+ * inside an open group the documents stand two to a row from 62rem, a lone one across the whole row
+ * rather than half of it with a hole beside it. `62rem` longhand because `var()` is not permitted in
+ * a container query condition; it is the reference's 992px.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-documents[data-layout="groups"] .dds-documents__header {
+    align-items: center;
+    margin-inline: auto;
+    text-align: center;
+  }
+}
+
+:where([data-dds-context="marketing"]) .dds-documents .dds-accordionitem__content:has(> .dds-documentlink) {
+  display: grid;
+  gap: var(--space-gap-sm);
+  grid-template-columns: minmax(0, 1fr);
+}
+
+@container (min-width: 62rem) {
+  :where([data-dds-context="marketing"]) .dds-documents .dds-accordionitem__content:has(> .dds-documentlink) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  :where([data-dds-context="marketing"]) .dds-documents .dds-accordionitem__content > .dds-documentlink:only-child {
+    grid-column: 1 / -1;
+  }
+}
+
+/* On the strong band, the accordion takes the band's inks, as FaqAccordion's does. */
+:where([data-dds-context="marketing"]) .dds-documents[data-ground="strong"] .dds-accordionitem {
+  border-color: var(--color-border-subtle-inverse);
+}
+
+:where([data-dds-context="marketing"]) .dds-documents[data-ground="strong"] .dds-accordionitem .dds-accordionitem__trigger {
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-documents[data-ground="strong"] .dds-accordionitem .dds-accordionitem__marker {
+  color: var(--color-fg-muted-inverse);
+}
+
+/*
+ * `grid`: the heading over the entries below 62rem and beside them from there, the two columns
+ * sharing the width; the entries two across on a phone, three from 35rem and four from 48rem, then
+ * two again from 62rem, where they share the width with the heading, and three from 75rem — the
+ * reference's own measured steps, each the narrowest at which a country's name keeps to one line.
+ */
+:where([data-dds-context="marketing"]) .dds-documents[data-layout="grid"] .dds-documents__list {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+@container (min-width: 35rem) {
+  :where([data-dds-context="marketing"]) .dds-documents[data-layout="grid"] .dds-documents__list {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-documents[data-layout="grid"] .dds-documents__list {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+@container (min-width: 62rem) {
+  :where([data-dds-context="marketing"]) .dds-documents[data-layout="grid"] .dds-documents__inner {
+    align-items: start;
+    column-gap: var(--space-grid-gutter);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  :where([data-dds-context="marketing"]) .dds-documents[data-layout="grid"] .dds-documents__list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@container (min-width: 75rem) {
+  :where([data-dds-context="marketing"]) .dds-documents[data-layout="grid"] .dds-documents__list {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+/*
+ * And the focus ring with them, as FaqAccordion's does: color.border.focus is near-black in light
+ * mode, a ring nobody can see on the dark band. A chip keeps its own light fill, so only the group
+ * headings and a plain entry change.
+ */
+:where([data-dds-context="marketing"])
+  .dds-documents[data-ground="strong"]
+  .dds-accordionitem
+  .dds-accordionitem__trigger:focus-visible {
+  outline-color: var(--color-border-focus-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"])
+  .dds-documents[data-ground="strong"]
+  .dds-documentlink[data-variant="plain"]
+  .dds-documentlink__link:focus-visible {
+  outline-color: var(--color-border-focus-on-brand-strong);
+}

package/dist/components/blocks/download-banner/DownloadBanner.css

@@ -195,7 +195,7 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-downloadbanner[data-ground="strong"] .dds-downloadbanner__card {
-  background-color: var(--color-bg-surface-card-strong);
+  background-color: var(--color-bg-surface-card-strong-on-brand-strong);
   color: var(--color-fg-on-brand-strong);
 }
 

package/dist/components/blocks/download-banner/DownloadBanner.types.d.ts

@@ -4,7 +4,7 @@ export interface DownloadBannerOwnProps {
     /**
      * `page` — The default, and the page's own white. The card is the recessed gray that sets it off — the reference design's light-2
      * `subtle` — The grey band, with the card white on it — the reference design's light. 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, with the card at color.bg.surface-card-strong and white words on it — the reference design's dark. For a download section a reader should arrive at; the badges are black and keep their own edge on it
+     * `strong` — `color.bg.brand-strong`, the dark band, with the card at color.bg.surface-card-strong-on-brand-strong and white words on it — the reference design's dark. For a download section a reader should arrive at; the badges are black and keep their own edge on it
      */
     ground?: 'page' | 'subtle' | 'strong';
     /** The featured card only: the app itself — a screenshot of it in a phone, the page's own image. It stands at the card's end, rising out of the card's top edge and resting on its bottom one, so the card reads as the app being held out to the reader. On a phone it sits under the badges. */

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

@@ -1,6 +1,7 @@
 import './FeatureCards.css';
 import './feature-cards-impl.css';
 import '../block-reveal.css';
+import '../block-pattern.css';
 import '../block-parallax.css';
 import { type FeatureCardsProps } from './FeatureCards.types.js';
 export type { FeatureCardsProps };
@@ -23,4 +24,4 @@ export type { FeatureCardsProps };
  * a step behind the one before, in reading order. `'use client'` for that and for `useId`, which
  * names the region by its heading.
  */
-export declare function FeatureCards({ ground, title, description, link, children, }: FeatureCardsProps): import("react").JSX.Element;
+export declare function FeatureCards({ ground, background, title, description, link, children, }: FeatureCardsProps): import("react").JSX.Element;