@deriv-com/dds-marketing 1.1.3 → 1.2.1

package/dist/components/blocks/feature-tabs/FeatureTabs.css

@@ -0,0 +1,100 @@
+/* GENERATED from featuretabs.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-featuretabs {
+  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-featuretabs .dds-featuretabs__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-featuretabs .dds-featuretabs__header {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  row-gap: var(--space-heading-title-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-featuretabs .dds-featuretabs__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-featuretabs .dds-featuretabs__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-featuretabs .dds-featuretabs__tabs {
+  display: flex;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  margin-block-start: var(--space-heading-description-actions);
+}
+
+:where([data-dds-context="marketing"]) .dds-featuretabs .dds-featuretabs__panel {
+  min-inline-size: 0;
+  row-gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-featuretabs .dds-featuretabs__footnote {
+  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-featuretabs[data-ground="page"] {
+  background-color: var(--color-bg-page);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-featuretabs[data-ground="page"] .dds-featuretabs__footnote {
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"]) .dds-featuretabs[data-ground="strong"] {
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-featuretabs[data-ground="strong"] .dds-featuretabs__footnote {
+  color: var(--color-fg-muted-inverse);
+}
+
+:where([data-dds-context="marketing"]) .dds-featuretabs[data-ground="subtle"] {
+  background-color: var(--color-bg-page);
+  background-image: linear-gradient(var(--color-bg-band-subtle), var(--color-bg-band-subtle));
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-featuretabs[data-ground="subtle"] .dds-featuretabs__footnote {
+  color: var(--color-fg-muted);
+}
+

package/dist/components/blocks/feature-tabs/FeatureTabs.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from 'react';
+import './FeatureTabs.css';
+import './feature-tabs-impl.css';
+import '../block-reveal.css';
+import { type FeatureTabsProps } from './FeatureTabs.types.js';
+export type { FeatureTabsProps };
+/**
+ * Versions of one thing, one at a time — the reference design's OptionsTypes, made general.
+ *
+ * The section owns what the versions share — the heading, the tab strip and which tab is showing —
+ * and the page composes what each tab shows, one child per name in `labels`. A name without a child
+ * is not drawn, and neither is a child without a name. Two or more tabs get the strip; one is drawn
+ * with nothing to choose.
+ *
+ * Only the tab showing is in the page, so a picture playing in one stops when the reader turns to
+ * another — the reference stops its animations by hand, and an unmounted one has nothing to stop.
+ *
+ * It arrives the way every block does: the heading, its line, the tabs, then the content.
+ * `'use client'` for that, the selected tab, and `useId`, which names the region by its heading.
+ */
+export declare function FeatureTabs({ ground, title, description, labels, footnote, children, }: FeatureTabsProps & {
+    children?: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/blocks/feature-tabs/FeatureTabs.js

@@ -0,0 +1,38 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, useId, useState } from 'react';
+import './FeatureTabs.css';
+import './feature-tabs-impl.css';
+import '../block-reveal.css';
+import { Tab } from '../../core/tab/Tab.js';
+import { TabList } from '../../core/tab-list/TabList.js';
+import { given } from '../../given.js';
+import { arriving, useReveal } from '../use-reveal.js';
+import { featureTabsDefaults, featureTabsParts } from './FeatureTabs.types.js';
+/**
+ * Versions of one thing, one at a time — the reference design's OptionsTypes, made general.
+ *
+ * The section owns what the versions share — the heading, the tab strip and which tab is showing —
+ * and the page composes what each tab shows, one child per name in `labels`. A name without a child
+ * is not drawn, and neither is a child without a name. Two or more tabs get the strip; one is drawn
+ * with nothing to choose.
+ *
+ * Only the tab showing is in the page, so a picture playing in one stops when the reader turns to
+ * another — the reference stops its animations by hand, and an unmounted one has nothing to stop.
+ *
+ * It arrives the way every block does: the heading, its line, the tabs, then the content.
+ * `'use client'` for that, the selected tab, and `useId`, which names the region by its heading.
+ */
+export function FeatureTabs({ ground = featureTabsDefaults.ground, title, description, labels, footnote, children, }) {
+    const titleId = useId();
+    const [band, revealed] = useReveal();
+    // The selected tab by its name rather than its place, so a list of names that changes under it
+    // keeps the reader on the same tab where it is still there, and goes to the first where it is not.
+    const [selected, setSelected] = useState(null);
+    // A record from a feed or an editor is not typed, so the names are checked rather than trusted.
+    const names = Array.isArray(labels) ? labels : [];
+    const panels = Children.toArray(children);
+    const count = Math.min(names.length, panels.length);
+    const at = Math.max(0, selected === null ? 0 : names.slice(0, count).indexOf(selected));
+    return (_jsx("section", { className: featureTabsParts.root, "data-ground": ground, "aria-labelledby": titleId, children: _jsxs("div", { className: featureTabsParts.inner, ref: band, "data-revealed": revealed, children: [_jsxs("div", { className: featureTabsParts.header, children: [_jsx("h2", { className: featureTabsParts.title, id: titleId, ...arriving(0), children: title }), given(description) ? (_jsx("p", { className: featureTabsParts.description, ...arriving(1), children: description })) : null, _jsx("div", { className: featureTabsParts.tabs, ...arriving(2), children: count > 1 ? (_jsx(TabList, { label: title, value: String(at), onChange: (value) => setSelected(names[Number(value)] ?? null), children: names.slice(0, count).map((name, index) => (_jsx(Tab, { value: String(index), label: name }, index))) })) : null })] }), _jsx("div", { className: featureTabsParts.panel, ...arriving(3), children: count > 0 ? panels[at] : null }), given(footnote) ? (_jsx("p", { className: featureTabsParts.footnote, ...arriving(4), children: footnote })) : null] }) }));
+}

package/dist/components/blocks/feature-tabs/FeatureTabs.types.d.ts

@@ -0,0 +1,35 @@
+import type { ReactNode } from 'react';
+export interface FeatureTabsOwnProps {
+    /**
+     * `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 tab strip turns round with it: white names, a rule in the band's own veil and a focus ring drawn for the dark, fixed like the band
+     */
+    ground?: 'page' | 'subtle' | 'strong';
+    /** Always. What the versions are of, in a few words — "Types of digital options". It names the section and the tabs */
+    title: string;
+    /** A line under the heading saying what the tabs have in common */
+    description?: string;
+    /** Always. The tabs' names, in a word or two each, in the order of the children they choose between — the first names the first child. A name without a child is not drawn */
+    labels: string[];
+    /** Small print every tab shares — that what is offered varies by platform or device */
+    footnote?: string;
+    /** Allowed: any content */
+    children: ReactNode;
+}
+export type FeatureTabsProps = FeatureTabsOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const featureTabsParts: {
+    readonly root: "dds-featuretabs";
+    readonly inner: "dds-featuretabs__inner";
+    readonly header: "dds-featuretabs__header";
+    readonly title: "dds-featuretabs__title";
+    readonly description: "dds-featuretabs__description";
+    readonly tabs: "dds-featuretabs__tabs";
+    readonly panel: "dds-featuretabs__panel";
+    readonly footnote: "dds-featuretabs__footnote";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const featureTabsDefaults: {
+    readonly ground: "page";
+};

package/dist/components/blocks/feature-tabs/FeatureTabs.types.js

@@ -0,0 +1,14 @@
+// GENERATED from feature-tabs.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const featureTabsParts = {
+    root: 'dds-featuretabs',
+    inner: 'dds-featuretabs__inner',
+    header: 'dds-featuretabs__header',
+    title: 'dds-featuretabs__title',
+    description: 'dds-featuretabs__description',
+    tabs: 'dds-featuretabs__tabs',
+    panel: 'dds-featuretabs__panel',
+    footnote: 'dds-featuretabs__footnote',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const featureTabsDefaults = { ground: 'page' };

package/dist/components/blocks/feature-tabs/feature-tabs-impl.css

@@ -0,0 +1,53 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * The heading, the tabs and the footnote start on a phone, as every block's heading does there, and
+ * are centred from 48rem over the content they choose — Documents' and FaqAccordion's rule. `48rem`
+ * longhand because `var()` is not permitted in a container query condition.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-featuretabs .dds-featuretabs__header {
+    align-items: center;
+    text-align: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-featuretabs .dds-featuretabs__tabs {
+    justify-content: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-featuretabs .dds-featuretabs__footnote {
+    text-align: center;
+  }
+}
+
+/*
+ * A lone tab has no strip, and the strip it would have held is not left as a step in the
+ * header's rhythm: an empty part with a margin is a gap with nothing in it.
+ */
+:where([data-dds-context="marketing"]) .dds-featuretabs .dds-featuretabs__tabs:empty {
+  display: none;
+}
+
+/*
+ * On the strong band the tab strip takes the band's inks, as Documents' accordion does: TabList is
+ * drawn for a light ground, so a selected tab's near-black text would vanish on the dark one.
+ */
+:where([data-dds-context="marketing"]) .dds-featuretabs[data-ground="strong"] .dds-tablist {
+  border-color: var(--color-border-subtle-inverse);
+}
+
+:where([data-dds-context="marketing"]) .dds-featuretabs[data-ground="strong"] .dds-tab[data-selected="true"] :is(.dds-tab__label, .dds-tab__icon, .dds-tab__trailing-icon) {
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-featuretabs[data-ground="strong"] .dds-tab[data-selected="false"] :is(.dds-tab__label, .dds-tab__icon, .dds-tab__trailing-icon) {
+  color: var(--color-fg-muted-inverse);
+}
+
+:where([data-dds-context="marketing"]) .dds-featuretabs[data-ground="strong"] .dds-tab .dds-tab__surface:hover {
+  background-color: var(--color-bg-hover-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-featuretabs[data-ground="strong"] .dds-tab:focus-visible {
+  outline-color: var(--color-border-focus-on-brand-strong);
+}

package/dist/components/blocks/image-banner/ImageBanner.css

@@ -96,7 +96,7 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-imagebanner[data-ground="strong"] .dds-imagebanner__card {
-  background-color: var(--color-bg-surface-card-strong);
+  background-color: var(--color-bg-surface-card-strong-on-brand-strong);
 }
 
 :where([data-dds-context="marketing"]) .dds-imagebanner[data-ground="subtle"] {

package/dist/components/blocks/image-banner/ImageBanner.d.ts

@@ -30,4 +30,4 @@ export type { ImageBannerProps };
  * the photograph after them. A cover photograph is the card's ground rather than a part of what it
  * says, so it is there from the start and only the words arrive over it.
  */
-export declare function ImageBanner({ ground, variant, mediaPosition, parallax, title, headingLevel, description, action, media, }: ImageBannerProps): import("react").JSX.Element;
+export declare function ImageBanner({ ground, variant, mediaPosition, parallax, stackOnPhone, title, headingLevel, description, action, media, }: ImageBannerProps): import("react").JSX.Element;

package/dist/components/blocks/image-banner/ImageBanner.js

@@ -34,9 +34,9 @@ import { imageBannerDefaults, imageBannerParts } from './ImageBanner.types.js';
  * the photograph after them. A cover photograph is the card's ground rather than a part of what it
  * says, so it is there from the start and only the words arrive over it.
  */
-export function ImageBanner({ ground = imageBannerDefaults.ground, variant = imageBannerDefaults.variant, mediaPosition = imageBannerDefaults.mediaPosition, parallax = imageBannerDefaults.parallax, title, headingLevel = imageBannerDefaults.headingLevel, description, action, media, }) {
+export function ImageBanner({ ground = imageBannerDefaults.ground, variant = imageBannerDefaults.variant, mediaPosition = imageBannerDefaults.mediaPosition, parallax = imageBannerDefaults.parallax, stackOnPhone = imageBannerDefaults.stackOnPhone, title, headingLevel = imageBannerDefaults.headingLevel, description, action, media, }) {
     const titleId = useId();
     const Title = headingLevel;
     const [band, revealed] = useReveal();
-    return (_jsx("section", { className: imageBannerParts.root, "data-ground": ground, "data-variant": variant, "data-media-position": mediaPosition, "data-parallax": parallax, "aria-labelledby": titleId, children: _jsx("div", { className: imageBannerParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: imageBannerParts.card, children: [_jsxs("div", { className: imageBannerParts.content, children: [_jsx(Title, { className: imageBannerParts.title, id: titleId, ...arriving(0), children: title }), given(description) ? (_jsx("p", { className: imageBannerParts.description, ...arriving(1), children: description })) : null, action ? (_jsx("div", { className: imageBannerParts.action, ...arriving(2), children: action })) : null] }), _jsx("div", { className: imageBannerParts.media, "data-dds-parallax": parallax ? '' : undefined, ...(variant === 'cover' ? {} : arriving(3)), children: media })] }) }) }));
+    return (_jsx("section", { className: imageBannerParts.root, "data-ground": ground, "data-variant": variant, "data-media-position": mediaPosition, "data-parallax": parallax, "data-stack-on-phone": variant === 'cover' && stackOnPhone ? '' : undefined, "aria-labelledby": titleId, children: _jsx("div", { className: imageBannerParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: imageBannerParts.card, children: [_jsxs("div", { className: imageBannerParts.content, children: [_jsx(Title, { className: imageBannerParts.title, id: titleId, ...arriving(0), children: title }), given(description) ? (_jsx("p", { className: imageBannerParts.description, ...arriving(1), children: description })) : null, action ? (_jsx("div", { className: imageBannerParts.action, ...arriving(2), children: action })) : null] }), _jsx("div", { className: imageBannerParts.media, "data-dds-parallax": parallax ? '' : undefined, ...(variant === 'cover' ? {} : arriving(3)), children: media })] }) }) }));
 }

package/dist/components/blocks/image-banner/ImageBanner.types.d.ts

@@ -3,14 +3,9 @@ export interface ImageBannerOwnProps {
     /**
      * `page` — The default, and the page's own white, with the dark card set into it. Most of the time: the card is already the break
      * `subtle` — The grey band, for a card that follows a white section the page wants told apart from this one. 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 a step lighter at color.bg.surface-card-strong so it still reads as a card. For a page whose dark band is already here and wants the card inside it
+     * `strong` — `color.bg.brand-strong`, the dark band, with the card a step lighter at color.bg.surface-card-strong-on-brand-strong so it still reads as a card. For a page whose dark band is already here and wants the card inside it
      */
     ground?: 'page' | 'subtle' | 'strong';
-    /**
-     * `split` — The default. The words in one half and the photograph filling the other, edge to edge, with one action under the words. On a phone the card runs the width of the screen and the photograph stacks with the words
-     * `cover` — The photograph fills the whole card, with the words over it behind a scrim that darkens the side they are on and leaves the photograph clear on the other. For a photograph wide enough to be the band rather than half of it
-     */
-    variant?: 'split' | 'cover';
     /**
      * `end` — The default. The words lead and the photograph follows, which is the order the card argues in
      * `start` — The photograph leads — the second of two cards on a page, or a photograph whose subject faces the words. A split card puts it above the words on a phone as well, as the reference design does
@@ -32,7 +27,13 @@ export interface ImageBannerOwnProps {
     /** The photograph drifts against the scroll as the card passes through the view, the drift every block's picture shares — drawn at motion.scale.parallax and moved from motion.translate.parallax-from to motion.translate.parallax-to over the whole pass — so it reads as further away than the card — the reference design's ParallaxBanner, which this replaces. On by default, as every block's picture drifts: pass false for a card whose photograph must hold still under its button. */
     parallax?: boolean;
 }
-export type ImageBannerProps = ImageBannerOwnProps;
+export type ImageBannerProps = ImageBannerOwnProps & ({
+    variant?: 'split' | 'cover';
+    stackOnPhone?: false;
+} | {
+    variant: Exclude<'split' | 'cover', 'split'>;
+    stackOnPhone?: boolean;
+});
 /** The class each part carries. Apply these — do not retype them. */
 export declare const imageBannerParts: {
     readonly root: "dds-imagebanner";
@@ -51,4 +52,5 @@ export declare const imageBannerDefaults: {
     readonly mediaPosition: "end";
     readonly headingLevel: "h2";
     readonly parallax: true;
+    readonly stackOnPhone: false;
 };

package/dist/components/blocks/image-banner/ImageBanner.types.js

@@ -11,4 +11,4 @@ export const imageBannerParts = {
     media: 'dds-imagebanner__media',
 };
 /** Generated so defaults cannot drift from the contract. */
-export const imageBannerDefaults = { ground: 'page', variant: 'split', mediaPosition: 'end', headingLevel: 'h2', parallax: true };
+export const imageBannerDefaults = { ground: 'page', variant: 'split', mediaPosition: 'end', headingLevel: 'h2', parallax: true, stackOnPhone: false };

package/dist/components/blocks/image-banner/image-banner-impl.css

@@ -99,11 +99,13 @@
   }
 
   /*
-   * The cover card's words hold three fifths of it, on the side away from where the photograph
-   * shows clear — the reference design's measure.
+   * The cover card's words hold half of it, on the side away from where the photograph shows
+   * clear, and the photograph's subject has the other half. Three fifths left the subject two, and
+   * the shade's fade past the words took much of those. Written as a share rather than `1 1 0`: the
+   * photograph is out of flow behind, so the words would have the whole row to grow into.
    */
   :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"] .dds-imagebanner__content {
-    flex: 0 1 60%;
+    flex: 0 1 50%;
   }
 
   :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant] .dds-imagebanner__action {
@@ -173,54 +175,130 @@
 }
 
 /*
- * The scrim over the cover photograph, darkest where the words are.
+ * The shade under a cover card's words: their column, and just past it.
  *
- * color.bg.overlay held across the whole of the words' column — three fifths of the card, the
- * content's share — so white body copy keeps AA over even a pale photograph; then
- * color.bg.overlay-subtle, the role for an image overlay, and clear at the far side, so the
- * photograph shows where nothing is written on it. Darkest only at the words' edge was not enough:
- * over a light photograph the end of a line of copy sat at about 2:1.
- * On a phone the words are at the top across the whole width, so the scrim runs down rather than
- * across.
+ * White body copy has to keep AA over even a pale photograph, so the words' column is
+ * color.bg.overlay at full strength — darkest only at the words' edge was tried and left the end of a
+ * line at about 2:1. But the shade is the words', not the photograph's: it is drawn by the column the
+ * words take and fades to clear across the column's own margin and past its edge — a long fade, so
+ * it never reads as an edge on the photograph — and the rest of the
+ * photograph is shown as it was taken. It once held across three fifths of the card and then thinned
+ * out to the far edge, which turned a bright photograph slate grey nearly all the way across; on a
+ * phone it ran down three fifths of the card's height however short the words were.
  *
- * A gradient takes a physical direction — there is no `to inline-end` — so the direction is a
- * custom property set once per case: toward the photograph's side, and mirrored under `:dir(rtl)`,
- * which is the package's rule for a pattern that must follow the reading direction. Set on the
- * photograph rather than the section, because a container query styles what is inside the
- * container and never the container itself.
+ * Under the words inside their own stacking context — the column is lifted over the photograph — so
+ * it is always behind them and always over the photograph. Toward the photograph: across from the
+ * fold, mirrored for a photograph at the start and under `:dir(rtl)`, and downward on a phone, where
+ * the words are at the top across the whole width. A gradient takes a physical direction — there is
+ * no `to inline-end` — so the direction is a custom property set once per case, the package's rule for
+ * a pattern that must follow the reading direction.
  *
  * The words need no rule to change sides: the photograph is out of flow behind them, so the row
  * `mediaPosition` sets holds the words alone, at the start or, reversed, at the end.
  */
-:where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"] .dds-imagebanner__media::after {
+:where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"] .dds-imagebanner__content {
+  --dds-imagebanner-shade-fade: var(--space-section-default);
+  /* The column's own inset, which the words end inside: space.inset.card, and space.inset.2xl from
+     64rem, where the column is given more room. The shade holds full strength to there. */
+  --dds-imagebanner-words-inset: var(--space-inset-card);
+  position: relative;
+}
+
+/* Across from the fold, three times space.section.default. Eased over the shorter fade, the step
+   from full strength to clear still read as a band on the photograph, beside the words where the
+   eye lands; spread over three it reads as light falling off. Down on a phone it stays one, where a
+   longer tail would grey most of a short card. */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"] .dds-imagebanner__content {
+    --dds-imagebanner-shade-fade: calc(var(--space-section-default) * 3);
+  }
+}
+
+@container (min-width: 64rem) {
+  :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"] .dds-imagebanner__content {
+    --dds-imagebanner-words-inset: var(--space-inset-2xl);
+  }
+}
+
+/*
+ * The fade is eased: its strength follows a smoothstep curve rather than a straight line, which is
+ * what made the first one read as a seam on the photograph — a linear fade has its sharpest change at
+ * both of its ends, where it leaves full strength and where it lands on clear. The stops are the
+ * curve sampled across the fade, which runs the words' inset and the fade's length past it; a
+ * gradient between two stops is still linear, so the curve is in how many there are.
+ */
+:where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"] .dds-imagebanner__content::before {
+  --dds-imagebanner-shade-ramp: calc(var(--dds-imagebanner-shade-fade) + var(--dds-imagebanner-words-inset));
   background-image: linear-gradient(
-    var(--dds-imagebanner-scrim-toward, to bottom),
+    var(--dds-imagebanner-shade-toward, to bottom),
     var(--color-bg-overlay),
-    var(--color-bg-overlay) 60%,
-    var(--color-bg-overlay-subtle) 80%,
+    var(--color-bg-overlay) calc(100% - var(--dds-imagebanner-shade-ramp) * 1.0),
+    color-mix(in srgb, var(--color-bg-overlay) 95.7%, transparent) calc(100% - var(--dds-imagebanner-shade-ramp) * 0.875),
+    color-mix(in srgb, var(--color-bg-overlay) 84.4%, transparent) calc(100% - var(--dds-imagebanner-shade-ramp) * 0.75),
+    color-mix(in srgb, var(--color-bg-overlay) 68.4%, transparent) calc(100% - var(--dds-imagebanner-shade-ramp) * 0.625),
+    color-mix(in srgb, var(--color-bg-overlay) 50.0%, transparent) calc(100% - var(--dds-imagebanner-shade-ramp) * 0.5),
+    color-mix(in srgb, var(--color-bg-overlay) 31.6%, transparent) calc(100% - var(--dds-imagebanner-shade-ramp) * 0.375),
+    color-mix(in srgb, var(--color-bg-overlay) 15.6%, transparent) calc(100% - var(--dds-imagebanner-shade-ramp) * 0.25),
+    color-mix(in srgb, var(--color-bg-overlay) 4.3%, transparent) calc(100% - var(--dds-imagebanner-shade-ramp) * 0.125),
     transparent
   );
   content: '';
-  inset: 0;
+  inset: 0 0 calc(-1 * var(--dds-imagebanner-shade-fade));
   pointer-events: none;
   position: absolute;
+  z-index: -1;
 }
 
 @container (min-width: 48rem) {
-  :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"][data-media-position="end"] .dds-imagebanner__media {
-    --dds-imagebanner-scrim-toward: to right;
+  :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"] .dds-imagebanner__content::before {
+    inset-block-end: 0;
+    inset-inline-end: calc(-1 * var(--dds-imagebanner-shade-fade));
   }
 
-  :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"][data-media-position="start"] .dds-imagebanner__media {
-    --dds-imagebanner-scrim-toward: to left;
+  :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"][data-media-position="start"] .dds-imagebanner__content::before {
+    inset-inline-end: 0;
+    inset-inline-start: calc(-1 * var(--dds-imagebanner-shade-fade));
+  }
+
+  :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"][data-media-position="end"] .dds-imagebanner__content {
+    --dds-imagebanner-shade-toward: to right;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"][data-media-position="start"] .dds-imagebanner__content {
+    --dds-imagebanner-shade-toward: to left;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"][data-media-position="end"]:dir(rtl) .dds-imagebanner__content {
+    --dds-imagebanner-shade-toward: to left;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"][data-media-position="start"]:dir(rtl) .dds-imagebanner__content {
+    --dds-imagebanner-shade-toward: to right;
+  }
+}
+
+/*
+ * `stackOnPhone`: below the fold the cover card stacks, as a split card does.
+ *
+ * A cover photograph is cropped to a 2.53:1 strip on a desktop and a near-square on a phone, both
+ * held to the photograph's side, and the two crops share only a third of it — so a person framed for
+ * the strip loses their head on the phone, or stands under the words. Stacked, the words stand on the
+ * card's own dark ground and need no shade, and the photograph follows them whole at the landscape
+ * shape, in flow rather than behind. From the fold it is the cover card again.
+ */
+@container (max-width: 47.9375rem) {
+  :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"][data-stack-on-phone] .dds-imagebanner__card {
+    min-block-size: 0;
   }
 
-  :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"][data-media-position="end"]:dir(rtl) .dds-imagebanner__media {
-    --dds-imagebanner-scrim-toward: to left;
+  :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"][data-stack-on-phone] .dds-imagebanner__media {
+    aspect-ratio: var(--aspect-landscape);
+    inset: auto;
+    position: relative;
   }
 
-  :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"][data-media-position="start"]:dir(rtl) .dds-imagebanner__media {
-    --dds-imagebanner-scrim-toward: to right;
+  :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"][data-stack-on-phone] .dds-imagebanner__content::before {
+    content: none;
   }
 }
 

package/dist/components/blocks/laurel.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The reference design's laurel, the vector its Stats section draws, in one colour — shared by the
+ * blocks that frame an award with it, so an award looks the same wherever a page shows one.
+ *
+ * The left-hand branch: its leaves curl up and in toward whatever stands to its right. The second
+ * branch is this one mirrored, by each block's 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.
+ */
+export declare const LAUREL_PATHS: string[];
+/** One laurel branch, carrying the class of the block that draws it. Decoration: hidden from assistive technology and never focusable. */
+export declare function Laurel({ className, side }: {
+    className: string;
+    side: 'leading' | 'trailing';
+}): import("react").JSX.Element;

package/dist/components/blocks/laurel.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The reference design's laurel, the vector its Stats section draws, in one colour — shared by the
+ * blocks that frame an award with it, so an award looks the same wherever a page shows one.
+ *
+ * The left-hand branch: its leaves curl up and in toward whatever stands to its right. The second
+ * branch is this one mirrored, by each block's 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.
+ */
+export 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, carrying the class of the block that draws it. Decoration: hidden from assistive technology and never focusable. */
+export function Laurel({ className, side }) {
+    return (_jsx("svg", { className: className, "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))) }));
+}

package/dist/components/blocks/logo-columns/LogoColumns.css

@@ -143,7 +143,7 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-logocolumns[data-ground="strong"] .dds-logocolumns__logo {
-  background-color: var(--color-bg-surface-card-strong);
+  background-color: var(--color-bg-surface-card-strong-on-brand-strong);
 }
 
 :where([data-dds-context="marketing"]) .dds-logocolumns[data-ground="subtle"] {

package/dist/components/blocks/logo-columns/LogoColumns.types.d.ts

@@ -4,7 +4,7 @@ export interface LogoColumnsOwnProps {
     /**
      * `page` — The page's own white, with tiles at the recessed gray. For full-colour logos drawn for a light ground
      * `subtle` — The grey band, with white tiles on it. For full-colour logos, where the section needs setting apart from the ones around it. Painted as the band's tint over the page's own ground, so it is the same grey whatever is behind the section
-     * `strong` — The default. `color.bg.brand-strong`, the dark band, with white words and tiles at color.bg.surface-card-strong — gray.900 in both themes, so the wall is a set of tiles a step lighter than the band. The ground white wordmarks are drawn for
+     * `strong` — The default. `color.bg.brand-strong`, the dark band, with white words and tiles at color.bg.surface-card-strong-on-brand-strong — slate.850 in light and slate.900 in dark, a step above the band in both, so the wall is a set of tiles a step lighter than the band. The ground white wordmarks are drawn for
      */
     ground?: 'page' | 'subtle' | 'strong';
     /**

package/dist/components/blocks/logo-rows/LogoRows.css

@@ -108,7 +108,7 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-logorows[data-ground="strong"] .dds-logorows__logo {
-  background-color: var(--color-bg-surface-card-strong);
+  background-color: var(--color-bg-surface-card-strong-on-brand-strong);
 }
 
 :where([data-dds-context="marketing"]) .dds-logorows[data-ground="subtle"] {

package/dist/components/blocks/logo-rows/LogoRows.d.ts

@@ -1,6 +1,7 @@
 import './LogoRows.css';
 import './logo-rows-impl.css';
 import '../block-reveal.css';
+import '../block-pattern.css';
 import { type LogoRowsProps } from './LogoRows.types.js';
 export type { LogoRowsProps };
 /**
@@ -17,4 +18,4 @@ export type { LogoRowsProps };
  * the first set is announced, so a screen reader hears each name once. The title carries the
  * section's accessible name through `aria-labelledby`.
  */
-export declare function LogoRows({ ground, title, description, link, logos, }: LogoRowsProps): import("react").JSX.Element | null;
+export declare function LogoRows({ ground, background, title, description, link, logos, }: LogoRowsProps): import("react").JSX.Element | null;