@deriv-com/dds-marketing 1.1.2 → 1.2.0

package/dist/components/blocks/estimator/Estimator.types.d.ts

@@ -0,0 +1,63 @@
+import type { ReactNode } from 'react';
+import type { EstimatorResult } from '../../estimator-data.js';
+export interface EstimatorOwnProps {
+    /**
+     * `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. 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
+     */
+    ground?: 'page' | 'subtle' | 'strong';
+    /**
+     * `stacked` — The default. The heading centred above a wide card, the inputs beside the results — a calculator with several fields and several figures, where the two panels each need room
+     * `split` — The heading and a few lines beside the card, the inputs above the results inside it — a compact tool a page introduces in its own words, a converter or a single estimate
+     */
+    layout?: 'stacked' | 'split';
+    /** Always. What the tool works out, in a few words — 'Trading calculator', 'Buy crypto in seconds', 'Estimate your earnings'. */
+    title: string;
+    /** A line or two under the title saying what the figures are for or where they come from — 'Live prices, updated every few seconds'. */
+    description?: string;
+    /** A heading over the inputs panel, where the two panels need naming — 'Calculator' over the fields and 'Results' over the figures. Leave both out for a tool whose fields name themselves. */
+    inputsLabel?: string;
+    /** Always. The fields the reader fills in — Select, TextInput, SearchInput, SegmentedControl, a slider — in the order they are filled. The page owns their values and works the results out from them. */
+    inputs: ReactNode;
+    /** A tool that works its figures out when asked rather than as the reader types — a calculation too slow or too costly to run on every keystroke, or one where half-filled fields would show figures that mislead. 'Calculate', whose press calls the page's own handler, and 'Reset' beside it to clear the fields. They share the row; on a phone they stack and each fills the width. */
+    inputActions?: ReactNode;
+    /** Whenever inputActions holds a Calculate button: Enter in any of the fields calls it, as the button's own press does — wire the button's onClick to the same function. The page works the figures out and passes them as `results`; the results panel announces them. */
+    onCalculate?: () => void;
+    /** A heading over the results panel, with inputsLabel — 'Results', 'You receive'. */
+    resultsLabel?: string;
+    /** The figures the inputs produce, in reading order — a `label`, a `value` written exactly as it is to be read, and an optional `note`. Pass an empty list until the inputs are complete, and the panel shows `emptyMessage` instead. Each change is announced politely, so a reader using a screen reader hears the new figures without being interrupted. */
+    results: EstimatorResult[];
+    /** What the results panel says before there are figures to show — 'Choose an instrument to see the results'. Translate it with the page. */
+    emptyMessage?: string;
+    /** The one thing a reader does once they have their figures — 'Open an account', 'Trade now', 'Become a partner'. Under the results, where the reader's eye already is. */
+    action?: ReactNode;
+}
+export type EstimatorProps = EstimatorOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const estimatorParts: {
+    readonly root: "dds-estimator";
+    readonly inner: "dds-estimator__inner";
+    readonly header: "dds-estimator__header";
+    readonly title: "dds-estimator__title";
+    readonly description: "dds-estimator__description";
+    readonly tool: "dds-estimator__tool";
+    readonly panels: "dds-estimator__panels";
+    readonly inputs: "dds-estimator__inputs";
+    readonly 'inputs-label': "dds-estimator__inputs-label";
+    readonly results: "dds-estimator__results";
+    readonly 'results-label': "dds-estimator__results-label";
+    readonly list: "dds-estimator__list";
+    readonly result: "dds-estimator__result";
+    readonly 'result-label': "dds-estimator__result-label";
+    readonly 'result-value': "dds-estimator__result-value";
+    readonly 'result-note': "dds-estimator__result-note";
+    readonly empty: "dds-estimator__empty";
+    readonly action: "dds-estimator__action";
+    readonly 'input-actions': "dds-estimator__input-actions";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const estimatorDefaults: {
+    readonly ground: "page";
+    readonly layout: "stacked";
+};

package/dist/components/blocks/estimator/Estimator.types.js

@@ -0,0 +1,25 @@
+// GENERATED from estimator.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const estimatorParts = {
+    root: 'dds-estimator',
+    inner: 'dds-estimator__inner',
+    header: 'dds-estimator__header',
+    title: 'dds-estimator__title',
+    description: 'dds-estimator__description',
+    tool: 'dds-estimator__tool',
+    panels: 'dds-estimator__panels',
+    inputs: 'dds-estimator__inputs',
+    'inputs-label': 'dds-estimator__inputs-label',
+    results: 'dds-estimator__results',
+    'results-label': 'dds-estimator__results-label',
+    list: 'dds-estimator__list',
+    result: 'dds-estimator__result',
+    'result-label': 'dds-estimator__result-label',
+    'result-value': 'dds-estimator__result-value',
+    'result-note': 'dds-estimator__result-note',
+    empty: 'dds-estimator__empty',
+    action: 'dds-estimator__action',
+    'input-actions': 'dds-estimator__input-actions',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const estimatorDefaults = { ground: 'page', layout: 'stacked' };

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

@@ -0,0 +1,159 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * `:where([data-dds-context="marketing"])` confines these rules without contributing specificity,
+ * so each is decided against the generated rule on its own terms.
+ */
+
+/*
+ * The Card fills the tool. The tool part is the box in the section's layout; the Card inside it is
+ * the surface, and it takes the whole of the tool's width rather than its content's.
+ */
+:where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__tool > .dds-card {
+  flex: auto;
+  /*
+   * Card clips so a picture meets its corner; this card holds no picture, and the clip cut the
+   * results panel's shadow off where the panel sits close to the card's edge, which left it flat.
+   */
+  overflow: visible;
+}
+
+/*
+ * The page's fields wrap their words only when a word does not fit. The section breaks anywhere so a
+ * long title cannot push the page wide, and that is inherited — but in a field it let the suffix
+ * and the panel heading give up their width a letter at a time whenever the panel was tight, "lots"
+ * stood on its end beside the box. `break-word` still wraps a word too long for the line, and keeps
+ * every word whole while there is room for it.
+ */
+:where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__inputs {
+  overflow-wrap: break-word;
+}
+
+/* A centred heading centres its measure too, so the line under it sits under the title. */
+:where([data-dds-context="marketing"]) .dds-estimator[data-layout="stacked"] .dds-estimator__description {
+  margin-inline: auto;
+}
+
+/*
+ * The figures read along a row of digits that change as a reader types, so the digits keep one
+ * width: a value going from 1,111 to 8,888 does not shuffle the currency beside it.
+ */
+:where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__result-value {
+  font-variant-numeric: tabular-nums;
+}
+
+/*
+ * The figures in two columns from the fold, each ruled off beneath — four read as a block of answers
+ * beside the fields that made them, and the figures at h4 keep a column each rather than a line
+ * each. One column on a phone, where half the panel is too narrow for a figure at that size.
+ */
+:where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__list {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+}
+
+@container (min-width: 48rem) {
+  /*
+   * Calculate and Reset share the row under the fields, a half each: neither is the smaller one, and
+   * two buttons of different widths under a column of full-width fields read as unfinished. Only
+   * from the fold, where they sit side by side — in the phone's column a zero basis is a zero
+   * height, and the buttons collapsed to a sliver.
+   */
+  :where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__input-actions > * {
+    flex: 1 1 0;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  /* A figure left on its own — the one figure of a converter, the last of an odd set — takes the
+     whole row rather than half of it beside an empty cell. */
+  :where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__result:last-child:nth-child(odd) {
+    grid-column: 1 / -1;
+  }
+}
+
+/*
+ * The white panel sits close to the card's edge — space.inset.xs from it, where the fields keep the
+ * card's full inset. The panel is a surface of its own, and a wide grey margin round it read as a
+ * card inside a card; close to the edge it reads as the card's other half.
+ *
+ * Pulled out by the difference between the two insets. In a column — a phone, and `split` — that is
+ * both sides and the foot; beside the fields it is the top, the foot and the far side.
+ */
+:where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__results {
+  margin-block-end: calc(var(--space-inset-xs) - var(--space-inset-card));
+  margin-inline: calc(var(--space-inset-xs) - var(--space-inset-card));
+}
+
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-estimator[data-layout="stacked"] .dds-estimator__results {
+    margin-block: calc(var(--space-inset-xs) - var(--space-inset-card));
+    margin-inline-start: 0;
+  }
+}
+
+/*
+ * From the fold, under `stacked`: the inputs beside the results, two equal panels. A calculator's
+ * fields and its figures are read side by side — change one, watch the other.
+ *
+ * `48rem` longhand because `var()` is not permitted in a container query condition, and it is the
+ * width the rest of this package folds at.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-estimator[data-layout="stacked"] .dds-estimator__panels {
+    flex-direction: row;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-estimator[data-layout="stacked"] :is(.dds-estimator__inputs, .dds-estimator__results) {
+    flex: 1 1 0;
+  }
+}
+
+/*
+ * At full width, under `split`: the heading beside the card, two equal halves — the reference
+ * converter's columns, so the tool reads as wide as the words that introduce it. The panels stay one
+ * column inside the card, the inputs above the figures.
+ *
+ * `64rem`, the width a split of words and a tool can both breathe in; below it the heading goes back
+ * above the card, at the start.
+ */
+@container (min-width: 64rem) {
+  :where([data-dds-context="marketing"]) .dds-estimator[data-layout="split"] .dds-estimator__inner {
+    align-items: center;
+    flex-direction: row;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-estimator[data-layout="split"] :is(.dds-estimator__header, .dds-estimator__tool) {
+    flex: 1 1 0;
+  }
+}
+
+/*
+ * On a phone the way onward fills the panel, as every section's actions do — the package's rule:
+ * a thumb reaches a full-width button, and a short one stranded at the start reads as an aside.
+ */
+@container (max-width: 47.9375rem) {
+  :where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__action > * {
+    inline-size: 100%;
+  }
+
+  /* And the inputs' own buttons stack, each the full width. */
+  :where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__input-actions {
+    flex-direction: column;
+  }
+}
+
+/*
+ * The card on the grey band — ComparisonCards' rule for the same card. Card's recessed fill is the
+ * band's grey and vanishes, so it takes the raised fill. The block knows its ground and the card does
+ * not, so the answer is here rather than in Card.
+ *
+ * Nothing for the dark band: there the tool is drawn in the dark theme (see Estimator.tsx), which
+ * turns the card, the rules between figures, the muted ink and the page's own fields round together.
+ */
+:where([data-dds-context="marketing"]) .dds-estimator[data-ground="subtle"] .dds-estimator__tool > .dds-card {
+  background-color: var(--color-bg-surface-card-raised);
+}
+

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

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

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' };