@deriv-com/dds-marketing 1.1.3 → 1.2.0

package/dist/components/blocks/feature-cards/FeatureCards.js

@@ -4,11 +4,14 @@ import { useId } from 'react';
 import './FeatureCards.css';
 import './feature-cards-impl.css';
 import '../block-reveal.css';
+import '../block-pattern.css';
 import '../block-parallax.css';
 import { given } from '../../given.js';
 import { cardsOf } from '../cards-of.js';
 import { arriving, useReveal } from '../use-reveal.js';
 import { featureCardsDefaults, featureCardsParts } from './FeatureCards.types.js';
+import { Background } from '../../core/background/Background.js';
+import { PATTERN_TONE } from '../pattern-tone.js';
 /**
  * Where a card comes in the arrival, capped so a long set does not keep a reader waiting.
  *
@@ -38,13 +41,13 @@ const LAST_STEP = FIRST_CARD + 3;
  * a step behind the one before, in reading order. `'use client'` for that and for `useId`, which
  * names the region by its heading.
  */
-export function FeatureCards({ ground = featureCardsDefaults.ground, title, description, link, children, }) {
+export function FeatureCards({ ground = featureCardsDefaults.ground, background, title, description, link, children, }) {
     const titleId = useId();
     const [band, revealed] = useReveal();
-    return (_jsx("section", { className: featureCardsParts.root, "data-ground": ground, "aria-labelledby": titleId, children: _jsxs("div", { className: featureCardsParts.inner, ref: band, "data-revealed": revealed, children: [_jsxs("div", { className: featureCardsParts.header, children: [_jsx("h2", { className: featureCardsParts.title, id: titleId, ...arriving(0), children: title }), given(description) ? (_jsx("p", { className: featureCardsParts.description, ...arriving(1), children: description })) : null, link ? (_jsx("div", { className: featureCardsParts.link, ...arriving(2), children: link })) : null] }), _jsx("div", { className: featureCardsParts.grid, children: cardsOf(children).map(({ key, card }, at) => (
-                    /* Each card in a cell of its own, and the cell is what arrives: the card is the page's
-                       element and keeps its own transitions, which an arrival set on it would overwrite.
-                       Keyed by the card's own key, made unique across fragments by cardsOf, so a set the
-                       page reorders moves its cards rather than remounting them. */
-                    _jsx("div", { className: featureCardsParts.item, ...arriving(Math.min(FIRST_CARD + at, LAST_STEP)), children: card }, key))) })] }) }));
+    return (_jsxs("section", { className: featureCardsParts.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: featureCardsParts.inner, ref: band, "data-revealed": revealed, children: [_jsxs("div", { className: featureCardsParts.header, children: [_jsx("h2", { className: featureCardsParts.title, id: titleId, ...arriving(0), children: title }), given(description) ? (_jsx("p", { className: featureCardsParts.description, ...arriving(1), children: description })) : null, link ? (_jsx("div", { className: featureCardsParts.link, ...arriving(2), children: link })) : null] }), _jsx("div", { className: featureCardsParts.grid, children: cardsOf(children).map(({ key, card }, at) => (
+                        /* Each card in a cell of its own, and the cell is what arrives: the card is the page's
+                           element and keeps its own transitions, which an arrival set on it would overwrite.
+                           Keyed by the card's own key, made unique across fragments by cardsOf, so a set the
+                           page reorders moves its cards rather than remounting them. */
+                        _jsx("div", { className: featureCardsParts.item, ...arriving(Math.min(FIRST_CARD + at, LAST_STEP)), children: card }, key))) })] })] }));
 }

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

@@ -2,10 +2,18 @@ import type { ReactNode } from 'react';
 export interface FeatureCardsOwnProps {
     /**
      * `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 one to reach for first when two sections need telling apart. A light card — surface-light — turns white on it, color.bg.surface-card-light-raised, because its own gray.50 is the band's and would vanish into it. A dark card — accent-strong — is lifted to color.bg.surface-card-strong-raised, a step lighter in dark mode, where the band is within a shade of its gray.900. A plain surface card is raised off it the same way, to color.bg.surface-card-raised, because the recessed fill is the band's gray too. Painted as the band's tint laid over the page's own ground, so it is the same grey whatever is behind the section — in dark mode the tint alone took on whatever it was set against, and on a light surface it was light ink on white.
+     * `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 one to reach for first when two sections need telling apart. A light card — surface-light — turns white on it, color.bg.surface-card-light-raised, because its own gray.50 is the band's and would vanish into it. A dark card — accent-strong — is lifted to color.bg.surface-card-strong-raised, a step lighter in dark mode, where the band is within a shade of its slate.900. A plain surface card is raised off it the same way, to color.bg.surface-card-raised, because the recessed fill is the band's gray too. Painted as the band's tint laid over the page's own ground, so it is the same grey whatever is behind the section — in dark mode the tint alone took on whatever it was set against, and on a light surface it was light ink on white.
      * `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 coloured cards keep their own grounds on it; a neutral card — surface or surface-raised — turns to Card's inverse fill and white ink, and a plain card takes the white ink alone, because their own would be dark ink on near-black; an eyebrow inside any of them takes the band's quieter ink
      */
     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. What the cards are, in the fewest words that name them — "Why trade with Deriv", "Markets you can trade". */
     title: string;
     /** A line saying what the set has in common, when the title alone does not. */

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

@@ -217,10 +217,10 @@
 /*
  * And a dark card is lifted a step in dark mode.
  *
- * accent-strong is gray.900, and in dark mode the subtle band is a white tint over near-black that
+ * accent-strong is slate.900, and in dark mode the subtle band is a white tint over near-black that
  * lands within a shade of it — the card blended into the band the way the light card did in light
- * mode. color.bg.surface-card-strong-raised is the same gray.900 in light, where the dark card
- * already stands off the band, and gray.800 in dark, a step up so it lifts off it. The ink is
+ * mode. color.bg.surface-card-strong-raised is the same slate.900 in light, where the dark card
+ * already stands off the band, and slate.800 in dark, a step up so it lifts off it. The ink is
  * unchanged: white on either.
  */
 :where([data-dds-context="marketing"])
@@ -230,6 +230,18 @@
   background-color: var(--color-bg-surface-card-strong-raised);
 }
 
+/*
+ * On the strong band the dark card is lifted a step too. accent-strong paints the band's own
+ * slate.900, so on color.bg.brand-strong it was the band with a corner; it takes
+ * color.bg.surface-card-strong-on-brand-strong, a step lighter, in both modes.
+ */
+:where([data-dds-context="marketing"])
+  .dds-featurecards[data-ground="strong"]
+  .dds-featurecards__item
+  > :is(.dds-card, .dds-cardbutton)[data-variant="accent-strong"] {
+  background-color: var(--color-bg-surface-card-strong-on-brand-strong);
+}
+
 /*
  * And a plain card is raised off it.
  *

package/dist/components/blocks/feature-cards-carousel/FeatureCardsCarousel.types.d.ts

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react';
 export interface FeatureCardsCarouselOwnProps {
     /**
      * `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 one to reach for first when two sections need telling apart. A light card — surface-light — turns white on it, color.bg.surface-card-light-raised, because its own gray.50 is the band's and would vanish into it. A dark card — accent-strong — is lifted to color.bg.surface-card-strong-raised, a step lighter in dark mode, where the band is within a shade of its gray.900. A plain surface card is raised off it the same way, to color.bg.surface-card-raised, because the recessed fill is the band's gray too. Painted as the band's tint laid over the page's own ground, so it is the same grey whatever is behind the section — in dark mode the tint alone took on whatever it was set against, and on a light surface it was light ink on white.
+     * `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 one to reach for first when two sections need telling apart. A light card — surface-light — turns white on it, color.bg.surface-card-light-raised, because its own gray.50 is the band's and would vanish into it. A dark card — accent-strong — is lifted to color.bg.surface-card-strong-raised, a step lighter in dark mode, where the band is within a shade of its slate.900. A plain surface card is raised off it the same way, to color.bg.surface-card-raised, because the recessed fill is the band's gray too. Painted as the band's tint laid over the page's own ground, so it is the same grey whatever is behind the section — in dark mode the tint alone took on whatever it was set against, and on a light surface it was light ink on white.
      * `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 coloured cards keep their own grounds on it; a neutral card — surface or surface-raised — turns to Card's inverse fill and white ink, and a plain card takes the white ink alone, because their own would be dark ink on near-black; an eyebrow inside any of them takes the band's quieter ink
      */
     ground?: 'page' | 'subtle' | 'strong';

package/dist/components/blocks/feature-cards-carousel/feature-cards-carousel-impl.css

@@ -160,6 +160,18 @@
   background-color: var(--color-bg-surface-card-strong-raised);
 }
 
+/*
+ * On the strong band the dark card is lifted a step too. accent-strong paints the band's own
+ * slate.900, so on color.bg.brand-strong it was the band with a corner; it takes
+ * color.bg.surface-card-strong-on-brand-strong, a step lighter, in both modes.
+ */
+:where([data-dds-context="marketing"])
+  .dds-featurecardscarousel[data-ground="strong"]
+  .dds-featurecardscarousel__item
+  > :is(.dds-card, .dds-cardbutton)[data-variant="accent-strong"] {
+  background-color: var(--color-bg-surface-card-strong-on-brand-strong);
+}
+
 :where([data-dds-context="marketing"])
   .dds-featurecardscarousel[data-ground="subtle"]
   .dds-featurecardscarousel__item

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

@@ -173,54 +173,105 @@
 }
 
 /*
- * 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 space.section.default 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;
+}
+
+@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);
+  }
+}
+
+:where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"] .dds-imagebanner__content::before {
   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-fade) - var(--dds-imagebanner-words-inset)),
     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__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;
   }
+}
 
-  :where([data-dds-context="marketing"]) .dds-imagebanner[data-variant="cover"][data-media-position="start"] .dds-imagebanner__media {
-    --dds-imagebanner-scrim-toward: to left;
+/*
+ * `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;
   }
 }