@deriv-com/dds-marketing 1.1.2 → 1.2.0

package/dist/components/blocks/testimonial-row/TestimonialRow.js

@@ -5,11 +5,14 @@ import { ChevronLeftRegularIcon, ChevronRightRegularIcon, StarSolidIcon } from "
 import "./TestimonialRow.css";
 import "./testimonial-row-impl.css";
 import "../block-reveal.css";
+import "../block-pattern.css";
 import { given } from "../../given.js";
 import { ButtonIcon } from "../../core/button-icon/ButtonIcon.js";
 import { Link } from "../../core/link/Link.js";
 import { visuallyHidden } from "../../visually-hidden.js";
 import { arriving, useReveal } from "../use-reveal.js";
+import { Background } from "../../core/background/Background.js";
+import { PATTERN_TONE } from "../pattern-tone.js";
 import { testimonialRowDefaults, testimonialRowParts, } from "./TestimonialRow.types.js";
 /**
  * Five stars, filled to a score out of five.
@@ -46,7 +49,7 @@ const AT_END = 2;
  * `'use client'` for the row's scroll position, the arrival, and `useId`, which names the region
  * by its heading.
  */
-export function TestimonialRow({ ground = testimonialRowDefaults.ground, title, reviews, summary, ratingLabel, label = testimonialRowDefaults.label, externalLabel = testimonialRowDefaults.externalLabel, previousLabel = testimonialRowDefaults.previousLabel, nextLabel = testimonialRowDefaults.nextLabel, }) {
+export function TestimonialRow({ ground = testimonialRowDefaults.ground, background, title, reviews, summary, ratingLabel, label = testimonialRowDefaults.label, externalLabel = testimonialRowDefaults.externalLabel, previousLabel = testimonialRowDefaults.previousLabel, nextLabel = testimonialRowDefaults.nextLabel, }) {
     const titleId = useId();
     const [band, revealed] = useReveal();
     const row = useRef(null);
@@ -114,16 +117,16 @@ export function TestimonialRow({ ground = testimonialRowDefaults.ground, title,
     const scrolls = ends.back || ends.on;
     // Button's secondary, as a circle; on the dark band its inverse tone turns the tint white.
     const arrow = { variant: "secondary", tone: ground === "strong" ? "inverse" : "default" };
-    return (_jsx("section", { className: testimonialRowParts.root, "data-ground": ground, "aria-labelledby": titleId, children: _jsxs("div", { className: testimonialRowParts.inner, ref: band, "data-revealed": revealed, children: [_jsxs("div", { className: testimonialRowParts.header, children: [_jsx("h2", { className: testimonialRowParts.title, id: titleId, ...arriving(0), children: title }), summary === undefined ? null : (_jsx("p", { className: testimonialRowParts.summary, ...arriving(1), children: summary.href !== undefined && given(summary.href) ? (
-                            // A link on its own line, so the standalone one: brand ink and a mark. On the dark
-                            // band it takes the band's ink, where coral is the wrong colour for words.
-                            _jsxs(Link, { variant: "standalone", tone: ground === "strong" ? "inherit" : "brand", external: true, href: summary.href, children: [summary.label, _jsx("span", { style: visuallyHidden, children: ` ${externalLabel}` })] })) : (_jsx("span", { children: summary.label })) }))] }), _jsxs("div", { className: testimonialRowParts.carousel, children: [_jsx("div", { ref: row, className: testimonialRowParts.track, role: "group", "aria-label": label, tabIndex: 0, onScroll: read, ...arriving(2), children: reviews.map((each, at) => {
-                                // A review's position is its identity: the set is a list, and nothing reorders it.
-                                const card = (_jsxs("figure", { className: testimonialRowParts.item, children: [each.rating === undefined ? null : (
-                                        // Named by the score it is drawn at, so a 4.3 is heard as the 4.5 a reader
-                                        // sees rather than as a number the stars do not show.
-                                        _jsx(Rating, { score: each.rating, label: ratingLabel?.(toHalves(each.rating)) ?? `Rated ${toHalves(each.rating)} out of 5` })), _jsx("blockquote", { className: testimonialRowParts.quote, children: each.quote }), _jsx("figcaption", { className: testimonialRowParts.author, children: _jsxs("span", { children: [_jsx("span", { className: testimonialRowParts.name, children: each.name }), given(each.detail) ? (_jsx("span", { className: testimonialRowParts.detail, children: each.detail })) : null] }) })] }, at));
-                                // The review is on a service the page does not own, so it opens beside the page.
-                                return given(each.href) ? (_jsxs("a", { className: testimonialRowParts["review-link"], href: each.href, target: "_blank", rel: "noopener noreferrer", children: [card, _jsx("span", { style: visuallyHidden, children: ` ${externalLabel}` })] }, at)) : (card);
-                            }) }), reviews.length > 1 ? (_jsx("div", { className: testimonialRowParts.footer, ...arriving(3), children: _jsxs("div", { className: testimonialRowParts.nav, hidden: !scrolls, children: [_jsx("span", { ref: back, className: testimonialRowParts["nav-slot"], "data-available": ends.back, inert: !ends.back, children: _jsx(ButtonIcon, { icon: _jsx(ChevronLeftRegularIcon, {}), label: previousLabel, ...arrow, onClick: () => step(-1) }) }), _jsx("span", { ref: on, className: testimonialRowParts["nav-slot"], "data-available": ends.on, inert: !ends.on, children: _jsx(ButtonIcon, { icon: _jsx(ChevronRightRegularIcon, {}), label: nextLabel, ...arrow, onClick: () => step(1) }) })] }) })) : null] })] }) }));
+    return (_jsxs("section", { className: testimonialRowParts.root, "data-ground": ground, "data-background": background, "aria-labelledby": titleId, children: [background ? _jsx(Background, { tone: PATTERN_TONE[ground], pattern: background, children: null }) : null, _jsxs("div", { className: testimonialRowParts.inner, ref: band, "data-revealed": revealed, children: [_jsxs("div", { className: testimonialRowParts.header, children: [_jsx("h2", { className: testimonialRowParts.title, id: titleId, ...arriving(0), children: title }), summary === undefined ? null : (_jsx("p", { className: testimonialRowParts.summary, ...arriving(1), children: summary.href !== undefined && given(summary.href) ? (
+                                // A link on its own line, so the standalone one: brand ink and a mark. On the dark
+                                // band it takes the band's ink, where coral is the wrong colour for words.
+                                _jsxs(Link, { variant: "standalone", tone: ground === "strong" ? "inherit" : "brand", external: true, href: summary.href, children: [summary.label, _jsx("span", { style: visuallyHidden, children: ` ${externalLabel}` })] })) : (_jsx("span", { children: summary.label })) }))] }), _jsxs("div", { className: testimonialRowParts.carousel, children: [_jsx("div", { ref: row, className: testimonialRowParts.track, role: "group", "aria-label": label, tabIndex: 0, onScroll: read, ...arriving(2), children: reviews.map((each, at) => {
+                                    // A review's position is its identity: the set is a list, and nothing reorders it.
+                                    const card = (_jsxs("figure", { className: testimonialRowParts.item, children: [each.rating === undefined ? null : (
+                                            // Named by the score it is drawn at, so a 4.3 is heard as the 4.5 a reader
+                                            // sees rather than as a number the stars do not show.
+                                            _jsx(Rating, { score: each.rating, label: ratingLabel?.(toHalves(each.rating)) ?? `Rated ${toHalves(each.rating)} out of 5` })), _jsx("blockquote", { className: testimonialRowParts.quote, children: each.quote }), _jsx("figcaption", { className: testimonialRowParts.author, children: _jsxs("span", { children: [_jsx("span", { className: testimonialRowParts.name, children: each.name }), given(each.detail) ? (_jsx("span", { className: testimonialRowParts.detail, children: each.detail })) : null] }) })] }, at));
+                                    // The review is on a service the page does not own, so it opens beside the page.
+                                    return given(each.href) ? (_jsxs("a", { className: testimonialRowParts["review-link"], href: each.href, target: "_blank", rel: "noopener noreferrer", children: [card, _jsx("span", { style: visuallyHidden, children: ` ${externalLabel}` })] }, at)) : (card);
+                                }) }), reviews.length > 1 ? (_jsx("div", { className: testimonialRowParts.footer, ...arriving(3), children: _jsxs("div", { className: testimonialRowParts.nav, hidden: !scrolls, children: [_jsx("span", { ref: back, className: testimonialRowParts["nav-slot"], "data-available": ends.back, inert: !ends.back, children: _jsx(ButtonIcon, { icon: _jsx(ChevronLeftRegularIcon, {}), label: previousLabel, ...arrow, onClick: () => step(-1) }) }), _jsx("span", { ref: on, className: testimonialRowParts["nav-slot"], "data-available": ends.on, inert: !ends.on, children: _jsx(ButtonIcon, { icon: _jsx(ChevronRightRegularIcon, {}), label: nextLabel, ...arrow, onClick: () => step(1) }) })] }) })) : null] })] })] }));
 }

package/dist/components/blocks/testimonial-row/TestimonialRow.types.d.ts

@@ -3,9 +3,17 @@ export interface TestimonialRowOwnProps {
     /**
      * `page` — The default, and the page's own white. The cards are the recessed gray that sets them off
      * `subtle` — The grey band, the reference design's ground for this section. The cards turn white on 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, the summary and the cards' words turn white, and the cards take color.bg.surface-card-strong — gray.900 in both themes, the colour a page card takes in dark mode — so the band reads as a dark-mode section in either theme. The arrows take ButtonIcon's inverse tone
+     * `strong` — `color.bg.brand-strong`, the dark band, for a section a reader should arrive at. The heading, the summary and the cards' words turn white, and the cards take color.bg.surface-card-strong-on-brand-strong — slate.850 in light and slate.900 in dark, a step above the band in both, a step lighter than the band — so the band reads as a dark-mode section in either theme. The arrows take ButtonIcon's inverse tone
      */
     ground?: 'page' | 'subtle' | 'strong';
+    /**
+     * `halftone` — A field of coral dots that grow towards a soft glow at the band's foot and settle to a fine screen away from it.
+     * `aurora` — Curtains of the brand's light rising from the band's foot and swaying slowly.
+     * `mesh` — The band in the brand's reds folded into one another like a liquid — the loudest of the five, for a dark band.
+     * `grid` — Hairlines a pitch apart rising from a soft bloom at the band's foot — the quietest, and the one to reach for first.
+     * `rings` — Hairline circles spreading out from the middle of the band's foot.
+     */
+    background?: 'halftone' | 'aurora' | 'mesh' | 'grid' | 'rings';
     /** Always. Whose reviews these are, in a few words — "What our customers say". */
     title: string;
     /** Always. The reviews, in the order they run along the row — five to ten of a sentence or two, each with the reviewer's name, its `rating` and, where there is one, the `href` of the review itself. An empty list draws nothing. */

package/dist/components/blocks/testimonial-slider/TestimonialSlider.css

@@ -157,7 +157,7 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-testimonialslider[data-ground="strong"] .dds-testimonialslider__item {
-  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/testimonial-slider/TestimonialSlider.types.d.ts

@@ -3,7 +3,7 @@ export interface TestimonialSliderOwnProps {
     /**
      * `page` — The default, and the page's own white. The card is the recessed gray that sets it off
      * `subtle` — The grey band, the reference design's ground for this section. The card turns white on 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 quote turn white and the card takes color.bg.surface-card-strong — gray.900 in both themes, the colour a page card takes in dark mode, and TestimonialRow's card on the same band — so the band reads as a dark-mode section in either theme. The coral dots sit on it
+     * `strong` — `color.bg.brand-strong`, the dark band, for a section a reader should arrive at. The heading and the quote turn white and the card takes color.bg.surface-card-strong-on-brand-strong — slate.850 in light and slate.900 in dark, a step above the band in both, a step lighter than the band, and TestimonialRow's card on the same band — so the band reads as a dark-mode section in either theme. The coral dots sit on it
      */
     ground?: 'page' | 'subtle' | 'strong';
     /** Always. Whose words these are, in a few — "What our partners say", "What our customers say". */

package/dist/components/blocks/tiers/Tiers.types.d.ts

@@ -11,7 +11,7 @@ export interface TiersOwnProps {
     title: string;
     /** A line saying how the tiers work, when the title alone does not — 'Our tiered partnership model rewards performance.' */
     description?: string;
-    /** Always. The tiers, lowest first — two to four, four for a partnership programme. Each is a one-word `name`, a one-verb `stage`, a `medal` picture, a `benefit` headline and the sentence under it, and — on every tier above the entry one — the `qualification` that reaches it, with a line break before the amount. The order of the list is the order of the ladder, so reordering it reorders the tiers. */
+    /** Always. The tiers, lowest first — two to four, four for a partnership programme. Each is a one-word `name`, a one-verb `stage`, a `medal` picture, a `benefit` headline and the sentence under it, and the `qualification` that reaches it, with a line break before the amount — the entry tier's too, saying what it takes to join, so every tier's card has the same line under it. The order of the list is the order of the ladder, so reordering it reorders the tiers. */
     tiers: TiersItem[];
     /** A way on to the programme's full terms — 'Learn more about partner tiers'. A standalone Link, under the row. */
     link?: ReactNode;

package/dist/components/core/background/Background.css

@@ -85,6 +85,25 @@
   background-color: var(--color-bg-page);
 }
 
+:where([data-dds-context="marketing"]) .dds-background[data-tone="subtle"] {
+  background-color: var(--color-bg-page);
+  background-image: linear-gradient(var(--color-bg-band-subtle), var(--color-bg-band-subtle));
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-tone="subtle"] .dds-background__canvas {
+  color: var(--color-bg-brand);
+  outline-color: var(--color-bg-brand);
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-tone="subtle"] .dds-background__content {
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-tone="subtle"] .dds-background__mesh {
+  background-color: var(--color-bg-page);
+  background-image: linear-gradient(var(--color-bg-band-subtle), var(--color-bg-band-subtle));
+}
+
 @media (prefers-reduced-motion: reduce) {
   :where([data-dds-context="marketing"]) .dds-background,
   :where([data-dds-context="marketing"]) .dds-background * { transition: none !important; }

package/dist/components/core/background/Background.types.d.ts

@@ -3,9 +3,10 @@ export interface BackgroundOwnProps {
     /**
      * `dark` — The band the halftone was drawn for: coral dots glowing on color.bg.brand-strong, which is dark in both modes. Reach for it for the band a page opens or closes on, where the glow gives the band a centre
      * `light` — Coral dots on the page's own ground, for a light page that wants one moment of brand colour without a solid coral band. The glow reads as warmth rather than light, so keep it for a section that is not competing with a dark one nearby
+     * `subtle` — The light pattern on the subtle band's grey — color.bg.band-subtle laid over the page, the grey a block's `ground="subtle"` paints — for a block that carries a pattern on that ground. The same coral as the light tone; only the ground under it is the band's grey rather than the page's white.
      * `brand` — The default: the brand's own coral, the ground the mesh was made for and the one a call to action stands on. White dots on it for the halftone. The heading is white too, and the glow rises from the foot of the band towards it, so check the words read on the coral alone — the pattern can only add to what is behind them
      */
-    tone?: 'dark' | 'light' | 'brand';
+    tone?: 'dark' | 'light' | 'subtle' | 'brand';
     /**
      * `halftone` — A grid of dots across the whole band that grow towards a soft glow and settle to a fine screen away from it, over a faint wash of their own ink. The glow's edge wanders from a plain ellipse as it drifts, so it reads as light on a surface rather than a spotlight. The default, and the one that moves most
      * `aurora` — Curtains of light rising from the band's foot: sheets of the brand's colour swaying and folding, with a ragged crest and fine rays running up through them — light falling through folds rather than pools of colour. Drawn by a shader with a grain over it; before it has drawn, and where it cannot, soft pools of the same colour painted by the stylesheet. At rest the curtains sway over motion.duration.drift; on an interactive band the pointer bends them towards it and brightens them. Reach for it where the halftone would be too busy — an opening band with a picture or a product on it, where dots behind the picture fight it and a wash of light does not

package/dist/components/core/background/background-impl.css

@@ -33,6 +33,29 @@
   position: relative;
 }
 
+/*
+ * The ground a light pattern is drawn on, as one solid colour: the page's own on the light tone, and
+ * the subtle band's grey on the subtle tone, so a block on its grey band can carry a pattern without
+ * the band turning white under it.
+ *
+ * The patterns are drawn by shaders that take their ground as one opaque colour, and the subtle band
+ * is a tint laid over the page — gray.50 in light mode, which is already solid, and white at six over
+ * the near-black page in dark mode, which is not. So in dark mode the grey is mixed out solid: the
+ * band's white at its own six percent into the page, which is the colour the tint comes to.
+ */
+:where([data-dds-context="marketing"]) .dds-background[data-tone='light'] {
+  --dds-background-ground: var(--color-bg-page);
+}
+
+:where([data-dds-context="marketing"]) .dds-background[data-tone='subtle'] {
+  --dds-background-ground: var(--color-bg-band-subtle);
+}
+
+:where([data-theme='dark']) :where([data-dds-context="marketing"]) .dds-background[data-tone='subtle'],
+:where([data-dds-context="marketing"][data-theme='dark']) .dds-background[data-tone='subtle'] {
+  --dds-background-ground: color-mix(in srgb, var(--color-fg-on-brand-strong) 6%, var(--color-bg-page));
+}
+
 /*
  * A Background with nothing to hold is a layer: it fills the band it is placed in, behind that
  * band's own content, which is how a block draws the pattern under itself without its layout
@@ -85,9 +108,9 @@
  * and the aurora's pools are there: a third of color.bg.brand, about as strong as the grey it
  * replaces, so the grid stays quiet but reads as the brand's. It lights up to the full coral.
  */
-:where([data-dds-context="marketing"]) .dds-background:is([data-pattern='grid'], [data-pattern='rings'])[data-tone='light'] {
+:where([data-dds-context="marketing"]) .dds-background:is([data-pattern='grid'], [data-pattern='rings']):is([data-tone='light'], [data-tone='subtle']) {
   --dds-background-rule: color-mix(in srgb, var(--color-bg-brand) 35%, transparent);
-  --dds-background-fade: var(--color-bg-page);
+  --dds-background-fade: var(--dds-background-ground);
 }
 
 /*
@@ -130,6 +153,15 @@
     left calc(var(--dds-background-shift, 0%) * -1);
 }
 
+/*
+ * On the subtle tone the band's tint is the root's background-image, which the grid's and the
+ * rings' own images replace — so the band would fall to the page's white under them, in the frame
+ * before the shader draws or wherever it cannot. The ground goes under them as a colour instead.
+ */
+:where([data-dds-context="marketing"]) .dds-background[data-tone='subtle']:is([data-pattern='grid'], [data-pattern='rings']) {
+  background-color: var(--dds-background-ground);
+}
+
 /*
  * The rings: circles at size.rings.pitch, centred on the middle of the band's foot, so they spread
  * up and out from where the halftone's glow would rest.
@@ -220,7 +252,7 @@
   background-image: var(--dds-background-rings);
 }
 
-:where([data-dds-context="marketing"]) .dds-background:is([data-pattern='grid'], [data-pattern='rings'])[data-tone='light']::before {
+:where([data-dds-context="marketing"]) .dds-background:is([data-pattern='grid'], [data-pattern='rings']):is([data-tone='light'], [data-tone='subtle'])::before {
   --dds-background-lit: var(--color-bg-brand);
 }
 
@@ -266,7 +298,7 @@
   --dds-background-hover: 0.25;
 }
 
-:where([data-dds-context="marketing"]) .dds-background[data-pattern='aurora'][data-tone='light'] {
+:where([data-dds-context="marketing"]) .dds-background[data-pattern='aurora']:is([data-tone='light'], [data-tone='subtle']) {
   --dds-background-pool-deep: var(--color-bg-brand-hover);
   --dds-background-strength: 0.22;
   --dds-background-hover: 0.3;
@@ -475,7 +507,7 @@
   --dds-background-mesh-strength: 0.6;
 }
 
-:where([data-dds-context="marketing"]) .dds-background[data-tone='light'] .dds-background__mesh {
+:where([data-dds-context="marketing"]) .dds-background:is([data-tone='light'], [data-tone='subtle']) .dds-background__mesh {
   --dds-background-mesh-1: var(--color-bg-brand-subtle);
   --dds-background-mesh-2: var(--color-bg-brand);
   --dds-background-mesh-3: var(--color-bg-brand-subtle);
@@ -620,7 +652,7 @@
   --dds-background-gl-grain: 0.05;
 }
 
-:where([data-dds-context="marketing"]) .dds-background[data-tone='light'] {
+:where([data-dds-context="marketing"]) .dds-background:is([data-tone='light'], [data-tone='subtle']) {
   --dds-background-gl-grain: 0.025;
 }
 
@@ -654,11 +686,11 @@
   --dds-background-gl-strength: 0.85;
 }
 
-:where([data-dds-context="marketing"]) .dds-background[data-pattern='aurora'][data-tone='light'] {
-  --dds-background-gl-ink0: var(--color-bg-page);
+:where([data-dds-context="marketing"]) .dds-background[data-pattern='aurora']:is([data-tone='light'], [data-tone='subtle']) {
+  --dds-background-gl-ink0: var(--dds-background-ground);
   --dds-background-gl-ink1: var(--color-bg-brand);
   --dds-background-gl-ink2: var(--color-bg-brand-hover);
-  --dds-background-gl-ink3: color-mix(in srgb, var(--color-bg-brand) 50%, var(--color-bg-page));
+  --dds-background-gl-ink3: color-mix(in srgb, var(--color-bg-brand) 50%, var(--dds-background-ground));
   --dds-background-gl-strength: 0.35;
 }
 
@@ -689,8 +721,8 @@
   --dds-background-gl-strength: 0.35;
 }
 
-:where([data-dds-context="marketing"]) .dds-background[data-pattern='mesh'][data-tone='light'] {
-  --dds-background-gl-ink0: var(--color-bg-page);
+:where([data-dds-context="marketing"]) .dds-background[data-pattern='mesh']:is([data-tone='light'], [data-tone='subtle']) {
+  --dds-background-gl-ink0: var(--dds-background-ground);
   --dds-background-gl-ink1: var(--color-bg-brand-subtle);
   --dds-background-gl-ink2: var(--color-bg-brand);
   --dds-background-gl-ink3: var(--color-bg-brand-subtle);
@@ -730,11 +762,11 @@
   --dds-background-gl-ink3: var(--color-bg-brand-deep);
 }
 
-:where([data-dds-context="marketing"]) .dds-background:is([data-pattern='grid'], [data-pattern='rings'])[data-tone='light'] {
-  --dds-background-gl-ink0: var(--color-bg-page);
-  --dds-background-gl-ink1: color-mix(in srgb, var(--color-bg-brand) 28%, var(--color-bg-page));
+:where([data-dds-context="marketing"]) .dds-background:is([data-pattern='grid'], [data-pattern='rings']):is([data-tone='light'], [data-tone='subtle']) {
+  --dds-background-gl-ink0: var(--dds-background-ground);
+  --dds-background-gl-ink1: color-mix(in srgb, var(--color-bg-brand) 28%, var(--dds-background-ground));
   --dds-background-gl-ink2: var(--color-bg-brand);
-  --dds-background-gl-ink3: color-mix(in srgb, var(--color-bg-brand) 12%, var(--color-bg-page));
+  --dds-background-gl-ink3: color-mix(in srgb, var(--color-bg-brand) 12%, var(--dds-background-ground));
 }
 
 /*

package/dist/components/core/background/halftone.js

@@ -37,7 +37,7 @@
  * the glow's heart outshone the words standing on it. The light and the coral grounds keep most of
  * theirs, where the dots are closer to the ground they sit on.
  */
-const OPACITY = { dark: 0.55, light: 0.85, brand: 0.85 };
+const OPACITY = { dark: 0.55, light: 0.85, subtle: 0.85, brand: 0.85 };
 const SETTINGS = {
     // A third opaque at the faintest: the edge of the glow is a dim field of dots rather than a
     // fade to nothing, so the pattern reaches the band's edges without competing with its heart.

package/dist/components/core/button/Button.css

@@ -136,16 +136,16 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-button[data-variant="secondary"][data-tone="brand"] {
-  background-color: var(--color-bg-subtle-on-brand-strong);
+  border-color: var(--color-border-strong-inverse);
   color: var(--color-fg-on-brand-strong);
 }
 
 :where([data-dds-context="marketing"]) .dds-button[data-variant="secondary"][data-tone="default"] {
-  background-color: var(--color-bg-subtle);
+  border-color: var(--color-border-strong);
 }
 
 :where([data-dds-context="marketing"]) .dds-button[data-variant="secondary"][data-tone="inverse"] {
-  background-color: var(--color-bg-subtle-on-brand-strong);
+  border-color: var(--color-border-strong-inverse);
   color: var(--color-fg-on-brand-strong);
 }
 
@@ -158,7 +158,7 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-button[data-variant="secondary"][data-tone="default"]:hover:where(:not(:disabled)) {
-  background-image: linear-gradient(var(--color-bg-hover), var(--color-bg-hover));
+  background-color: var(--color-bg-hover);
 }
 
 :where([data-dds-context="marketing"]) .dds-button[data-variant="secondary"][data-tone="inverse"]:hover:where(:not(:disabled)) {
@@ -174,7 +174,7 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-button[data-variant="secondary"][data-tone="default"]:active {
-  background-image: linear-gradient(var(--color-bg-active), var(--color-bg-active));
+  background-color: var(--color-bg-active);
 }
 
 :where([data-dds-context="marketing"]) .dds-button[data-variant="secondary"][data-tone="inverse"]:active {

package/dist/components/core/button-icon/ButtonIcon.types.d.ts

@@ -15,7 +15,7 @@ export interface ButtonIconOwnProps {
     size?: 'sm' | 'md' | 'lg';
     /**
      * `default` — The control is on a light ground, which is every surface this package paints by default
-     * `inverse` — The control stands on the dark band, color.bg.brand-strong — a mark in a navigation bar on a hero, a social mark in a footer — which is the same near-black in light and dark. The ink and the tints move to the band's fixed roles; nothing else does
+     * `inverse` — The control stands on the dark band, color.bg.brand-strong — a mark in a navigation bar on a hero, a social mark in a footer — which is near-black in light and dark alike — slate.900 in light, a step deeper in dark. The ink and the tints move to the band's fixed roles; nothing else does
      */
     tone?: 'default' | 'inverse';
     /** Always — the glyph is the whole control, so it is required rather than a slot that may be empty. Pass the glyph itself, from the icon package, rather than one already sized: the size a mark takes in this circle is this component's decision, at icon.control.md on md and icon.control.lg on lg, and the width and height the glyph shipped with are overridden by the class this component clones onto it. */

package/dist/components/core/card-body/CardBody.css

@@ -70,6 +70,7 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-cardbody .dds-cardbody__media-frame {
+  transition-property: border-radius;
   display: block;
   flex: auto;
   min-block-size: 0;
@@ -120,6 +121,10 @@
   line-height: var(--font-label-md-line-height);
 }
 
+:where([data-dds-context="marketing"]) .dds-cardbody[data-flush="true"] .dds-cardbody__media-frame {
+  border-radius: var(--radius-container);
+}
+
 :where([data-dds-context="marketing"]) .dds-cardbody[data-over-media="false"] .dds-cardbody__eyebrow {
   color: var(--color-fg-muted);
 }

package/dist/components/core/card-body/CardBody.types.d.ts

@@ -2,7 +2,7 @@ import type { HTMLAttributes, ReactNode } from 'react';
 export interface CardBodyOwnProps {
     /** The picture is the card's ground and the copy is read on top of it. Set explicitly rather than inferred from src, which BannerBody can afford to do and this cannot: there, art is always behind the words, so having art and being over it are the same fact. Here a picture is a region in the column by default, and the same src means two different cards */
     overMedia?: boolean;
-    /** The card has no fill for the copy to be held off — Card's `plain` variant, where the picture is the card's edge rather than the ground being it. The inline inset goes and the copy lines up with the picture above it; the block padding stays, because the space between a picture and the line under it is still doing its job */
+    /** The card has no fill for the copy to be held off — Card's `plain` variant, where the picture is the card's edge rather than the ground being it. The inline inset goes and the copy lines up with the picture above it; the block padding stays, because the space between a picture and the line under it is still doing its job. The picture takes the corners every contained picture in the blocks has, since with no fill around it the picture is the card's shape */
     flush?: boolean;
     /** The card is pressable and its picture is what answers the pointer — an editorial card inside a CardButton, on any ground. The picture grows by motion.scale.media-hover and media-frame clips it, so what the reader sees is the frame holding still while the art moves inside it. Setting this is also what stops the card lifting: CardButton suppresses its own lift when the body it holds zooms, so the two motions never compete */
     zoomOnHover?: boolean;

package/dist/components/core/document-link/DocumentLink.css

@@ -0,0 +1,59 @@
+/* GENERATED from documentlink.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-documentlink {
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+  row-gap: 0;
+  column-gap: var(--space-gap-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-documentlink .dds-documentlink__link {
+  align-items: center;
+  color: inherit;
+  display: inline-flex;
+  min-inline-size: 0;
+  text-decoration-line: none;
+  column-gap: var(--space-gap-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-documentlink .dds-documentlink__mark {
+  display: inline-flex;
+  flex: none;
+}
+
+:where([data-dds-context="marketing"]) .dds-documentlink .dds-documentlink__action {
+  display: flex;
+  flex: none;
+}
+
+:where([data-dds-context="marketing"]) .dds-documentlink[data-variant="chip"] {
+  background-color: var(--color-bg-surface-card-raised);
+  border-color: var(--color-border-subtle);
+  border-radius: var(--radius-surface);
+  border-width: var(--border-width-hairline);
+  color: var(--color-fg-default);
+  padding-block: var(--space-inset-sm);
+  padding-inline: var(--space-inset-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-documentlink[data-variant="chip"] .dds-documentlink__title {
+  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-documentlink[data-variant="plain"] .dds-documentlink__title {
+  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);
+}
+

package/dist/components/core/document-link/DocumentLink.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+import './DocumentLink.css';
+import './document-link-impl.css';
+import { type DocumentLinkProps } from './DocumentLink.types.js';
+export type { DocumentLinkProps };
+/**
+ * One document a reader can open or save — a policy, a key information document, a country's
+ * licence — drawn the same way wherever a page lists documents.
+ *
+ * The mark and the title are one link. A second link beside it (`action`) is its sibling, never its
+ * child, so the row is a surface holding two targets rather than a target holding another. An
+ * external document opens in a new tab and a download saves the file, and each says so in words a
+ * screen reader hears and nobody sees, after the title.
+ *
+ * No state and no script, so it renders on a server as it is.
+ */
+export declare function DocumentLink({ variant, href, external, download, mark, action, externalLabel, downloadLabel, children, ...rest }: DocumentLinkProps & {
+    children?: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/core/document-link/DocumentLink.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FileSolidIcon } from '@deriv-com/quill-icons-web';
+import './DocumentLink.css';
+import './document-link-impl.css';
+import { Icon } from '../icon/Icon.js';
+import { visuallyHidden } from '../../visually-hidden.js';
+import { documentLinkDefaults, documentLinkParts } from './DocumentLink.types.js';
+/**
+ * One document a reader can open or save — a policy, a key information document, a country's
+ * licence — drawn the same way wherever a page lists documents.
+ *
+ * The mark and the title are one link. A second link beside it (`action`) is its sibling, never its
+ * child, so the row is a surface holding two targets rather than a target holding another. An
+ * external document opens in a new tab and a download saves the file, and each says so in words a
+ * screen reader hears and nobody sees, after the title.
+ *
+ * No state and no script, so it renders on a server as it is.
+ */
+export function DocumentLink({ variant = documentLinkDefaults.variant, href, external = documentLinkDefaults.external, download = documentLinkDefaults.download, mark, action, externalLabel = documentLinkDefaults.externalLabel, downloadLabel = documentLinkDefaults.downloadLabel, children, ...rest }) {
+    return (_jsxs("div", { ...rest, className: documentLinkParts.root, "data-variant": variant, children: [_jsxs("a", { className: documentLinkParts.link, href: href, target: external ? '_blank' : undefined, rel: external ? 'noopener noreferrer' : undefined, download: download ? '' : undefined, children: [_jsx("span", { className: documentLinkParts.mark, "aria-hidden": "true", children: _jsx(Icon, { size: variant === 'chip' ? 'lg' : 'md', children: mark ?? _jsx(FileSolidIcon, {}) }) }), _jsx("span", { className: documentLinkParts.title, children: children }), external ? _jsxs("span", { style: visuallyHidden, children: [" ", externalLabel] }) : null, download ? _jsxs("span", { style: visuallyHidden, children: [" ", downloadLabel] }) : null] }), action ? _jsx("div", { className: documentLinkParts.action, children: action }) : null] }));
+}

package/dist/components/core/document-link/DocumentLink.types.d.ts

@@ -0,0 +1,41 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface DocumentLinkOwnProps {
+    /**
+     * `chip` — The default: the document on a surface of its own, for a list of documents grouped under headings
+     * `plain` — The mark and the title on the page itself, for a grid of many short entries — a licence per country, each behind its flag
+     */
+    variant?: 'chip' | 'plain';
+    /** Always. Where the document is: a URL, usually a PDF */
+    href: string;
+    /** The document is hosted off the site — opens in a new tab, and its accessible name ends with `externalLabel` */
+    external?: boolean;
+    /** The link saves the file rather than opening it — its accessible name ends with `downloadLabel` */
+    download?: boolean;
+    /** What kind of document it is, as a glyph — FilePdfSolidIcon for a PDF, FileShieldSolidIcon for a policy, or a country's flag from `@deriv-com/dds-marketing/icons/flag` (`MaltaIcon`, `GermanyIcon`) for one country's licence. Left out, a plain file */
+    mark?: ReactNode;
+    /** A second link beside the document — "Choose language" — drawn at the far end of the row as its own target */
+    action?: ReactNode;
+    /** What an external document's accessible name ends with. Never drawn. Translate it with the page */
+    externalLabel?: string;
+    /** What a download's accessible name ends with. Never drawn. Translate it with the page */
+    downloadLabel?: string;
+    /** Allowed: text */
+    children: ReactNode;
+}
+export type DocumentLinkProps = DocumentLinkOwnProps & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'variant' | 'href' | 'external' | 'download' | 'mark' | 'action' | 'externalLabel' | 'downloadLabel'>;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const documentLinkParts: {
+    readonly root: "dds-documentlink";
+    readonly link: "dds-documentlink__link";
+    readonly mark: "dds-documentlink__mark";
+    readonly title: "dds-documentlink__title";
+    readonly action: "dds-documentlink__action";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const documentLinkDefaults: {
+    readonly variant: "chip";
+    readonly external: false;
+    readonly download: false;
+    readonly externalLabel: "(opens in a new tab)";
+    readonly downloadLabel: "(downloads a file)";
+};

package/dist/components/core/document-link/DocumentLink.types.js

@@ -0,0 +1,11 @@
+// GENERATED from document-link.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const documentLinkParts = {
+    root: 'dds-documentlink',
+    link: 'dds-documentlink__link',
+    mark: 'dds-documentlink__mark',
+    title: 'dds-documentlink__title',
+    action: 'dds-documentlink__action',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const documentLinkDefaults = { variant: 'chip', external: false, download: false, externalLabel: '(opens in a new tab)', downloadLabel: '(downloads a file)' };

package/dist/components/core/document-link/document-link-impl.css

@@ -0,0 +1,23 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * The document's link answers the pointer and the keyboard itself, since the row around it is not
+ * interactive: its title underlines on hover, and focus draws the package's ring round the link —
+ * border.width.focus in color.border.focus — offset off the mark and the words.
+ */
+:where([data-dds-context="marketing"]) .dds-documentlink .dds-documentlink__link:hover .dds-documentlink__title {
+  text-decoration-line: underline;
+  text-decoration-thickness: var(--border-width-default);
+  text-underline-offset: 0.2em;
+}
+
+:where([data-dds-context="marketing"]) .dds-documentlink .dds-documentlink__link:focus-visible {
+  border-radius: var(--radius-subtle);
+  outline: var(--border-width-focus) solid var(--color-border-focus);
+  outline-offset: var(--border-width-focus);
+}
+
+/* A chip's border is drawn only where the chip is; a plain entry has none to draw. */
+:where([data-dds-context="marketing"]) .dds-documentlink[data-variant='chip'] {
+  border-style: solid;
+}

package/dist/components/core/illustration-card/IllustrationCard.css

@@ -26,6 +26,13 @@
   gap: var(--space-gap-sm);
 }
 
+:where([data-dds-context="marketing"]) .dds-illustrationcard .dds-illustrationcard__stage {
+  display: flex;
+  flex-direction: column;
+  min-block-size: 0;
+  row-gap: var(--space-gap-sm);
+}
+
 :where([data-dds-context="marketing"]) .dds-illustrationcard[data-ratio="landscape"] {
   aspect-ratio: var(--aspect-landscape);
 }

package/dist/components/core/illustration-card/IllustrationCard.d.ts

@@ -14,9 +14,13 @@ export type { IllustrationCardProps };
  * `label`, and its contents are `inert`: real components draw it, so it looks exactly like the
  * product, and none of them can be focused, pressed or typed into.
  *
+ * It can move once, as it arrives — frosting over its photograph, or playing two states of the
+ * product, the second after the first — and whatever moves inside it waits for it to land: it is
+ * the host its parts' arrivals follow (see arrival.ts).
+ *
  * And it scales like a picture. The UI is laid out at its own size and, where the pane is too small
  * to hold it, scaled down as a whole to fit — never up — so a pane on a phone shows the same picture
  * smaller rather than text overlapping or cut off. The scale is worked out when the pane changes
  * size and at no other time.
  */
-export declare function IllustrationCard({ ratio, label, children, ...rest }: IllustrationCardProps): import("react").JSX.Element;
+export declare function IllustrationCard({ ratio, label, motion, then, children, ...rest }: IllustrationCardProps): import("react").JSX.Element;