@deriv-com/dds-marketing 1.0.1 → 1.1.0

package/dist/components/blocks/comparison-table/ComparisonTable.js

@@ -0,0 +1,100 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { given } from '../../given.js';
+import { Card } from '../../core/card/Card.js';
+import { Table } from '../../core/table/Table.js';
+import { TableHead } from '../../core/table-head/TableHead.js';
+import { TableBody } from '../../core/table-body/TableBody.js';
+import { TableRow } from '../../core/table-row/TableRow.js';
+import { TableCell } from '../../core/table-cell/TableCell.js';
+import { TableHeaderCell } from '../../core/table-header-cell/TableHeaderCell.js';
+import { tableCellParts } from '../../core/table-cell/TableCell.types.js';
+import { arriving, useReveal } from '../use-reveal.js';
+import './ComparisonTable.css';
+import './comparison-table-impl.css';
+import '../block-reveal.css';
+import { comparisonTableDefaults, comparisonTableParts, } from './ComparisonTable.types.js';
+/** The most columns drawn: the labels and three options. A fourth option is a column too narrow to read. */
+const MOST = 4;
+/**
+ * The Card for each ground. Card's own `surface` on the page; raised on the grey band, whose grey
+ * the plain surface would be; and turned round on the dark band, where a surface made for a light
+ * page would be dark words on near-black. The block knows its ground and the card does not, so the
+ * answer is here — FeatureCards' and ComparisonCards' rule for the same card.
+ */
+const SURFACE = {
+    page: { variant: 'surface', tone: 'default' },
+    subtle: { variant: 'surface-raised', tone: 'default' },
+    strong: { variant: 'surface', tone: 'inverse' },
+};
+/**
+ * A row's label, as the header of its row.
+ *
+ * The page's table has a header cell for a column and none for a row: TableHeaderCell is scoped to
+ * its column and holds its name on one line, and TableCell is a value, a `td`. So the label is
+ * TableCell's own cell rendered as a `th` scoped to its row — its class and the size, rule and
+ * wrapping the row hands every cell it holds — and the Table's sheet draws it exactly as it draws
+ * the values beside it. Nothing about its measure is restated here; what is this block's is the
+ * weight, which the contract binds on the part.
+ *
+ * It takes what TableRow clones onto each cell and spells it as the data the sheet reads, rather
+ * than letting it reach the element as attributes a `th` does not have.
+ */
+function RowHeader({ size = 'md', dividers = 'rows', overflow = 'wrap', children, }) {
+    return (_jsx("th", { scope: "row", className: `${tableCellParts.root} ${comparisonTableParts['row-header']}`, "data-size": size, "data-align": "start", "data-numeric": "false", "data-dividers": dividers, "data-overflow": overflow, children: children }));
+}
+/**
+ * One cell's words. A single line is text; several are a list, so a screen reader says how many
+ * there are and reads each as its own line rather than running a schedule's sessions together as
+ * one sentence. A list of one is the line it holds, and an empty list is an empty cell.
+ *
+ * `role="list"` spelled out: Safari drops a list's role once its markers are styled away, and the
+ * count is half of what the list tells a reader.
+ */
+function Lines({ value }) {
+    const lines = (Array.isArray(value) ? value : [value]).filter((line) => given(line));
+    if (lines.length === 0)
+        return null;
+    // Each line isolated, so a value keeps its own order in a right-to-left table: a sign or a
+    // range is neutral there, and "-3.00" came out "3.00-". Text in a right-to-left script still
+    // reads right to left — an isolate takes its direction from what it holds.
+    if (lines.length === 1)
+        return _jsx("bdi", { children: lines[0] });
+    return (_jsx("ul", { className: comparisonTableParts['cell-list'], role: "list", children: lines.map((line, at) => (
+        // A line's place is its identity: the cell is the page's copy, and nothing reorders it.
+        _jsx("li", { children: _jsx("bdi", { children: line }) }, at))) }));
+}
+/**
+ * A heading over a short comparison table — the reference site's DynamicTable, named for its job.
+ *
+ * Nothing is drawn here that the page already has. The card is the page's own Card and the grid is
+ * the page's own Table — its head, body, rows and cells — so the corner, the rules, a cell's inset
+ * and the scroll on a phone are theirs. What is this block's is the section around them and the
+ * three things the reference asks of the table that its props do not reach: the light band under
+ * the column names, the bold first column, and the columns' share of a card that scrolls rather
+ * than squeezes. The first is the impl sheet's, the second the row header above, the third a column
+ * count handed to the sheet as a custom property, FeatureScroll's way of passing a count.
+ *
+ * Its columns and rows are records rather than children, the way ComparisonCards takes its cards:
+ * every row has to be drawn against the same columns, which the block cannot check inside rows it
+ * was handed whole. Only the first four columns are drawn, the reference's own ceiling.
+ *
+ * It arrives the way every block does: the heading and the line, then the table, then its note.
+ * `'use client'` for that, for `useId`, which names the region by its heading — and because Table,
+ * which it composes, is a client component already.
+ */
+export function ComparisonTable({ ground = comparisonTableDefaults.ground, title, description, columns, rows, footnote, }) {
+    const titleId = useId();
+    const [band, revealed] = useReveal();
+    const shown = columns.slice(0, MOST);
+    const [labels, ...options] = shown;
+    // Nothing to compare is nothing drawn: a named region holding no row or no option leads nowhere.
+    if (labels === undefined || options.length === 0 || rows.length === 0)
+        return null;
+    // How many columns share the card, which the sheet multiplies into the table's narrowest width.
+    const count = { '--dds-comparisontable-columns': shown.length };
+    return (_jsx("section", { className: comparisonTableParts.root, "data-ground": ground, "aria-labelledby": titleId, children: _jsxs("div", { className: comparisonTableParts.inner, ref: band, "data-revealed": revealed, children: [_jsxs("div", { className: comparisonTableParts.header, children: [_jsx("h2", { className: comparisonTableParts.title, id: titleId, ...arriving(0), children: title }), given(description) ? (_jsx("p", { className: comparisonTableParts.description, ...arriving(1), children: description })) : null] }), _jsxs("div", { className: comparisonTableParts.body, children: [_jsx(Card, { ...SURFACE[ground], ...arriving(2), children: _jsxs(Table, { "aria-label": title, layout: "fixed", hoverable: false, headerCase: "title", style: count, children: [_jsx(TableHead, { children: _jsx(TableRow, { children: shown.map((column, at) => (
+                                            // A column's place is its identity; keys are the page's and may repeat a label.
+                                            _jsx(TableHeaderCell, { children: column.label }, at))) }) }), _jsx(TableBody, { children: rows.map((row, at) => (_jsxs(TableRow, { children: [_jsx(RowHeader, { children: row.label }), options.map((column, place) => (_jsx(TableCell, { children: _jsx(Lines, { value: row.values[column.key] }) }, place)))] }, at))) })] }) }), given(footnote) ? (_jsx("p", { className: comparisonTableParts.footnote, ...arriving(3), children: footnote })) : null] })] }) }));
+}

package/dist/components/blocks/comparison-table/ComparisonTable.types.d.ts

@@ -0,0 +1,36 @@
+import type { ComparisonTableColumn, ComparisonTableRow } from '../../comparison-table-data.js';
+export interface ComparisonTableOwnProps {
+    /**
+     * `page` — The default, and the page's own white. The card is the recessed surface on it, Card's own `surface`, so it has an edge
+     * `subtle` — The grey band, the reference design's ground for this section. The card is raised to color.bg.surface-card-raised on it — white in light — because its own fill is the band's grey. Painted as the band's tint over the page's own ground, so it is the same grey whatever is behind the section
+     * `strong` — `color.bg.brand-strong`, the dark band, for a section a reader should arrive at. The heading and the line under it turn white; the card turns to Card's inverse surface with white ink, its header band and rules to the band's own white veils
+     */
+    ground?: 'page' | 'subtle' | 'strong';
+    /** Always. What is being compared, in the fewest words that name it — "MT5 on every device", "Web terminal or desktop app?". It names the section and the table's scroll region both. */
+    title: string;
+    /** A line saying what the options have in common, or what the reader is choosing between, when the title alone does not. */
+    description?: string;
+    /** Always. The columns, in reading order: first the labels' own — its `label` names what the rows are, "Features" — then the two or three options being compared, each with the `key` its values are filed under in every row and the `label` written over it. Only the first four are drawn; the columns share the card's width equally. */
+    columns: ComparisonTableColumn[];
+    /** Always. The rows, in reading order — each with its `label`, drawn as the row's header in the first column, and its `values` filed under the columns' keys. A value is one line, or a list of short lines that is drawn as a list. Keep them few enough to read without paging: a handful to a dozen. An empty list draws nothing. */
+    rows: ComparisonTableRow[];
+    /** A note true of the whole table — where the figures come from, what an asterisk means — under the card in small type. */
+    footnote?: string;
+}
+export type ComparisonTableProps = ComparisonTableOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const comparisonTableParts: {
+    readonly root: "dds-comparisontable";
+    readonly inner: "dds-comparisontable__inner";
+    readonly header: "dds-comparisontable__header";
+    readonly title: "dds-comparisontable__title";
+    readonly description: "dds-comparisontable__description";
+    readonly body: "dds-comparisontable__body";
+    readonly 'row-header': "dds-comparisontable__row-header";
+    readonly 'cell-list': "dds-comparisontable__cell-list";
+    readonly footnote: "dds-comparisontable__footnote";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const comparisonTableDefaults: {
+    readonly ground: "page";
+};

package/dist/components/blocks/comparison-table/ComparisonTable.types.js

@@ -0,0 +1,15 @@
+// GENERATED from comparison-table.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const comparisonTableParts = {
+    root: 'dds-comparisontable',
+    inner: 'dds-comparisontable__inner',
+    header: 'dds-comparisontable__header',
+    title: 'dds-comparisontable__title',
+    description: 'dds-comparisontable__description',
+    body: 'dds-comparisontable__body',
+    'row-header': 'dds-comparisontable__row-header',
+    'cell-list': 'dds-comparisontable__cell-list',
+    footnote: 'dds-comparisontable__footnote',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const comparisonTableDefaults = { ground: 'page' };

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

@@ -0,0 +1,143 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * Most of what is here is the page's Table, drawn the way the reference's comparison asks and its
+ * props do not reach. The block knows its ground and the table does not, so the answers are here
+ * rather than in Table — FaqAccordion's arrangement with the Accordion it holds.
+ */
+
+/*
+ * The header starts on a phone and is centred once the band is wide enough to hold a line.
+ *
+ * FeatureCards' rule and its reason: the table is stacked content under the heading, so a centred
+ * heading is symmetric with it — but centred text starts every line at a different edge, which
+ * costs a great deal across a phone's measure. The header and its line are capped narrower than the
+ * column, so `margin-inline: auto` is what centres those boxes rather than their words. The footnote
+ * stays at the start edge, with the cells it is a note on.
+ *
+ * `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-comparisontable .dds-comparisontable__header {
+    align-items: center;
+    margin-inline: auto;
+    text-align: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-comparisontable .dds-comparisontable__description {
+    margin-inline: auto;
+  }
+}
+
+/*
+ * The columns keep a readable width, and the card scrolls rather than squeezes them.
+ *
+ * The reference's phone: a table of three or four equal columns on a screen a third as wide sets
+ * every value a word to a line, so it holds a narrowest width and scrolls across inside its card.
+ * Table's root is already the scroll region, with the tab stop a keyboard needs to reach what is off
+ * the edge, so all this sets is the width it scrolls over — size.grid.track-sm, the narrowest a grid
+ * track goes before it drops a column, once per column. The count is the component's, handed over
+ * as `--dds-comparisontable-columns`, the one thing the sheet cannot read from the markup. From the
+ * fold the card is wider than that and nothing scrolls.
+ *
+ * The ink is the card's rather than the table's. Table draws its grid in color.fg.default, which is
+ * the right ink on every card but the dark band's; inheriting is what lets one rule serve all three.
+ */
+:where([data-dds-context="marketing"]) .dds-comparisontable .dds-table__grid {
+  color: inherit;
+  min-inline-size: calc(var(--size-grid-track-sm) * var(--dds-comparisontable-columns, 3));
+}
+
+/*
+ * The light band under the column names.
+ *
+ * TableHead paints nothing — a table's surface is whoever put it there — so the band is the block's.
+ * color.bg.subtle is an alpha, so it is one step from whichever card it lies on: grey on the
+ * recessed card, a lighter grey on the raised white one. On the dark band it is the band's own veil,
+ * which is white where the page's is black. The card's corner clips it, so its top edge follows the
+ * card's round.
+ */
+:where([data-dds-context="marketing"]) .dds-comparisontable .dds-tablehead {
+  background-color: var(--color-bg-subtle);
+}
+
+:where([data-dds-context="marketing"]) .dds-comparisontable[data-ground="strong"] .dds-tablehead {
+  background-color: var(--color-bg-subtle-on-brand-strong);
+}
+
+/*
+ * The column names, in the card's ink and the row labels' weight, and on as many lines as they need.
+ *
+ * TableHeaderCell recedes a column's name to color.fg.muted, which is the right voice for a data
+ * table's headers and the wrong one here: the names are the options being compared, read as often
+ * as the labels down the side, and muted ink on the dark band is grey on near-black. So they take
+ * the card's ink, at label.md — the row labels' step, the reference setting both alike.
+ *
+ * And they wrap. A header cell holds its name on one line and clips the rest, which suits a long
+ * column of figures and not a comparison, where a clipped name is an option the reader cannot
+ * identify. Three classes deep, which beats the header cell's own class-and-attribute.
+ */
+:where([data-dds-context="marketing"]) .dds-comparisontable .dds-tablehead .dds-tableheadercell {
+  color: inherit;
+  font-family: var(--font-label-md-family);
+  font-size: var(--font-label-md-size);
+  font-weight: var(--font-label-md-weight);
+  letter-spacing: var(--font-label-md-letter-spacing);
+  line-height: var(--font-label-md-line-height);
+  white-space: normal;
+  /* The clip and the ellipsis go with the single line: wrapping alone left them standing, so a
+     name longer than its column — a German one, at a phone's 128px — was still cut off. */
+  overflow: visible;
+  text-overflow: clip;
+}
+
+/*
+ * The rules on the dark band.
+ *
+ * The cells draw their rules in color.border.subtle, black at a few percent, which is gone on
+ * near-black. The band's own quiet rule is the counterpart, white where the page's is black.
+ */
+:where([data-dds-context="marketing"]) .dds-comparisontable[data-ground="strong"] .dds-tablerow > :is(.dds-tablecell, .dds-tableheadercell) {
+  border-color: var(--color-border-subtle-inverse);
+}
+
+/*
+ * The cells' inset opens from the fold.
+ *
+ * The reference's two steps: sixteen on a phone, where every column is spending width it does not
+ * have, and twenty-four once the card has room — space.inset.md, which Table's middle size already
+ * sets, then space.inset.lg. Not Table's large size, which would set the values a step larger too;
+ * this is only the air. The row labels carry TableCell's class, so they open with the values.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-comparisontable .dds-tablerow > :is(.dds-tablecell, .dds-tableheadercell) {
+    padding-block: var(--space-inset-lg);
+    padding-inline: var(--space-inset-lg);
+  }
+}
+
+/*
+ * The scroll region's ring, drawn inside the card.
+ *
+ * Table rings its scroll region outside its own edge, and here that edge is the card's, which clips
+ * whatever it holds to its corner — so the ring was cut away on every side and a keyboard reader
+ * tabbed into a table with nothing drawn to say so. Pulled in by its own width, it sits just inside
+ * the card. On the dark band it takes the band's own ring.
+ */
+:where([data-dds-context="marketing"]) .dds-comparisontable .dds-table:focus-visible {
+  outline-offset: calc(var(--border-width-focus) * -1);
+}
+
+:where([data-dds-context="marketing"]) .dds-comparisontable[data-ground="strong"] .dds-table:focus-visible {
+  outline-color: var(--color-border-focus-on-brand-strong);
+}
+
+/*
+ * A heading with no line under it closes up: its bound step is the distance to the line, and with
+ * nothing there it would only add to the step from the header to what follows. `:last-child` is the
+ * condition itself, DataTable's way, rather than a prop standing in for it.
+ */
+:where([data-dds-context="marketing"]) .dds-comparisontable .dds-comparisontable__title:last-child {
+  margin-block-end: 0;
+}

package/dist/components/blocks/cta-banner/CtaBanner.css

@@ -6,6 +6,7 @@
   display: flex;
   inline-size: 100%;
   justify-content: center;
+  overflow-wrap: anywhere;
   position: relative;
   background-color: var(--color-bg-brand);
   color: var(--color-fg-on-brand);

package/dist/components/blocks/cta-banner/CtaBanner.d.ts

@@ -19,4 +19,4 @@ export type { CtaBannerProps };
  * It arrives the way every block does, and the way CtaBannerSlider's slides do: block-reveal.css
  * brings the headline, the line and the actions up a step apart once the band is in view.
  */
-export declare function CtaBanner({ title, headingLevel, description, actions, }: CtaBannerProps): import("react").JSX.Element;
+export declare function CtaBanner({ title, headingLevel, description, actions, background, }: CtaBannerProps): import("react").JSX.Element;

package/dist/components/blocks/cta-banner/CtaBanner.js

@@ -6,6 +6,7 @@ import './cta-banner-impl.css';
 import '../block-reveal.css';
 import { arriving, useReveal } from '../use-reveal.js';
 import { given } from '../../given.js';
+import { Background } from '../../core/background/Background.js';
 import { ctaBannerDefaults, ctaBannerParts } from './CtaBanner.types.js';
 /**
  * A full-bleed coral band carrying one promotion and the action it asks for.
@@ -23,9 +24,9 @@ import { ctaBannerDefaults, ctaBannerParts } from './CtaBanner.types.js';
  * It arrives the way every block does, and the way CtaBannerSlider's slides do: block-reveal.css
  * brings the headline, the line and the actions up a step apart once the band is in view.
  */
-export function CtaBanner({ title, headingLevel = ctaBannerDefaults.headingLevel, description, actions, }) {
+export function CtaBanner({ title, headingLevel = ctaBannerDefaults.headingLevel, description, actions, background = ctaBannerDefaults.background, }) {
     const titleId = useId();
     const [band, revealed] = useReveal();
     const Title = headingLevel === 'h3' ? 'h3' : 'h2';
-    return (_jsx("section", { className: ctaBannerParts.root, "aria-labelledby": titleId, children: _jsx("div", { className: ctaBannerParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: ctaBannerParts.content, children: [_jsxs("div", { className: ctaBannerParts.text, children: [_jsx(Title, { className: ctaBannerParts.title, id: titleId, ...arriving(0), children: title }), given(description) ? (_jsx("p", { className: ctaBannerParts.description, ...arriving(1), children: description })) : null] }), actions ? (_jsx("div", { className: ctaBannerParts.actions, ...arriving(2), children: actions })) : null] }) }) }));
+    return (_jsxs("section", { className: ctaBannerParts.root, "data-background": background, "aria-labelledby": titleId, children: [background === 'plain' ? null : (_jsx(Background, { tone: "brand", pattern: background, children: null })), _jsx("div", { className: ctaBannerParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: ctaBannerParts.content, children: [_jsxs("div", { className: ctaBannerParts.text, children: [_jsx(Title, { className: ctaBannerParts.title, id: titleId, ...arriving(0), children: title }), given(description) ? (_jsx("p", { className: ctaBannerParts.description, ...arriving(1), children: description })) : null] }), actions ? (_jsx("div", { className: ctaBannerParts.actions, ...arriving(2), children: actions })) : null] }) })] }));
 }

package/dist/components/blocks/cta-banner/CtaBanner.types.d.ts

@@ -11,6 +11,11 @@ export interface CtaBannerOwnProps {
     description?: string;
     /** The one action the message asks for, or two at most. The coral is the banner's ground, so the primary is Button variant="inverse" tone="brand" — a primary Button is coral on coral, and the tone keeps it near-black in both themes — and a second is Button variant="secondary" tone="brand" — a white tint with a white label, fixed in both themes like the band. */
     actions?: ReactNode;
+    /**
+     * `grid` — The default: a fine rule grid behind the band's content — light coral hairlines rising out of a deeper red at the band's foot, moving slowly at rest and brightening around the pointer. Drawn by Background as a layer under the band's own content, so the band's layout is untouched.
+     * `plain` — The flat coral and nothing on it, asked for by name: a page that already spends its one pattern on another band, or a banner set among busy content where the grid would be texture fighting texture.
+     */
+    background?: 'grid' | 'plain';
 }
 export type CtaBannerProps = CtaBannerOwnProps;
 /** The class each part carries. Apply these — do not retype them. */
@@ -26,4 +31,5 @@ export declare const ctaBannerParts: {
 /** Generated so defaults cannot drift from the contract. */
 export declare const ctaBannerDefaults: {
     readonly headingLevel: "h2";
+    readonly background: "grid";
 };

package/dist/components/blocks/cta-banner/CtaBanner.types.js

@@ -10,4 +10,4 @@ export const ctaBannerParts = {
     actions: 'dds-ctabanner__actions',
 };
 /** Generated so defaults cannot drift from the contract. */
-export const ctaBannerDefaults = { headingLevel: 'h2' };
+export const ctaBannerDefaults = { headingLevel: 'h2', background: 'grid' };

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

@@ -27,3 +27,11 @@
     justify-content: center;
   }
 }
+
+/*
+ * The banner's column, lifted over the pattern layer. It is not positioned otherwise — the banner
+ * has no other layer to clear — so it is lifted only where the pattern is drawn.
+ */
+:where([data-dds-context="marketing"]) .dds-ctabanner[data-background] .dds-ctabanner__inner {
+  position: relative;
+}

package/dist/components/blocks/cta-banner-slider/CtaBannerSlider.css

@@ -7,6 +7,7 @@
   inline-size: 100%;
   justify-content: center;
   overflow: hidden;
+  overflow-wrap: anywhere;
   position: relative;
   background-color: var(--color-bg-brand);
   color: var(--color-fg-on-brand);

package/dist/components/blocks/cta-banner-slider/CtaBannerSlider.d.ts

@@ -36,4 +36,4 @@ export type { CtaBannerSliderProps };
  * the same rise, a step apart. The slide leaving drops to waiting at once, as that sheet has every
  * part do, so the outgoing words never travel.
  */
-export declare function CtaBannerSlider({ slides, headingLevel, autoplay, label, controlsLabel, slideLabel, }: CtaBannerSliderProps): import("react").JSX.Element | null;
+export declare function CtaBannerSlider({ slides, headingLevel, autoplay, label, controlsLabel, slideLabel, roleDescription, slideRoleDescription, positionLabel, background, }: CtaBannerSliderProps): import("react").JSX.Element | null;

package/dist/components/blocks/cta-banner-slider/CtaBannerSlider.js

@@ -4,6 +4,7 @@ import './CtaBannerSlider.css';
 import './cta-banner-slider-impl.css';
 import '../block-reveal.css';
 import { arriving, useReveal } from '../use-reveal.js';
+import { Background } from '../../core/background/Background.js';
 import { useRotation } from '../use-rotation.js';
 import { given } from '../../given.js';
 import { Button } from '../../core/button/Button.js';
@@ -42,19 +43,23 @@ import { ctaBannerSliderDefaults, ctaBannerSliderParts, } from './CtaBannerSlide
  * the same rise, a step apart. The slide leaving drops to waiting at once, as that sheet has every
  * part do, so the outgoing words never travel.
  */
-export function CtaBannerSlider({ slides, headingLevel = ctaBannerSliderDefaults.headingLevel, autoplay = ctaBannerSliderDefaults.autoplay, label = ctaBannerSliderDefaults.label, controlsLabel = ctaBannerSliderDefaults.controlsLabel, slideLabel = ctaBannerSliderDefaults.slideLabel, }) {
+export function CtaBannerSlider({ slides, headingLevel = ctaBannerSliderDefaults.headingLevel, autoplay = ctaBannerSliderDefaults.autoplay, label = ctaBannerSliderDefaults.label, controlsLabel = ctaBannerSliderDefaults.controlsLabel, slideLabel = ctaBannerSliderDefaults.slideLabel, roleDescription = ctaBannerSliderDefaults.roleDescription, slideRoleDescription = ctaBannerSliderDefaults.slideRoleDescription, positionLabel, background, }) {
     const Title = headingLevel === 'h3' ? 'h3' : 'h2';
     const count = slides.length;
     // The band arriving on screen, as every block does; until then no slide has arrived.
     const [band, revealed] = useReveal();
     // Which slide is in view, and every way a reader moves, holds or stops the set — shared with
     // TestimonialSlider, so the two rotate by one set of rules. See use-rotation.ts.
-    const { current, rotating, root, region, track, item, away, dots } = useRotation(count, autoplay);
+    const { current, rotating, root, region, track, item, away, dots } = useRotation(count, autoplay, {
+        roleDescription,
+        slideRoleDescription,
+        positionLabel,
+    });
     // Nothing to show is nothing drawn: a named region with no message in it is a landmark that
     // leads a screen reader to an empty band.
     if (count === 0)
         return null;
-    return (_jsx("section", { ref: root, className: ctaBannerSliderParts.root, "aria-label": label, ...region, children: _jsxs("div", { className: ctaBannerSliderParts.inner, ref: band, children: [_jsx("div", { className: ctaBannerSliderParts.track, ...track, children: slides.map((slide, at) => (_jsxs("div", { className: ctaBannerSliderParts.slide, ...item(at), "data-revealed": revealed && !away(at), children: [_jsxs("div", { className: ctaBannerSliderParts.text, children: [_jsx(Title, { className: ctaBannerSliderParts.title, ...arriving(0), children: slide.title }), given(slide.description) ? (_jsx("p", { className: ctaBannerSliderParts.description, ...arriving(1), children: slide.description })) : null] }), slide.primaryAction ? (_jsxs("div", { className: ctaBannerSliderParts.actions, ...arriving(2), children: [_jsx(Button, { variant: "inverse", tone: "brand", href: slide.primaryAction.href, children: slide.primaryAction.label }), slide.secondaryAction ? (_jsx(Button, { variant: "secondary", tone: "brand", href: slide.secondaryAction.href, children: slide.secondaryAction.label })) : null] })) : null] }, at))) }), rotating ? (_jsx("div", { className: ctaBannerSliderParts.controls, children: _jsx(PaginationDots, { ...dots, 
-                        /* A dot pressed stops the dots' own rotation; the band's press handler stops this. */
-                        label: controlsLabel, itemLabel: slideLabel }) })) : null] }) }));
+    return (_jsxs("section", { ref: root, className: ctaBannerSliderParts.root, "aria-label": label, "data-background": background, ...region, children: [background === undefined ? null : (_jsx(Background, { tone: "brand", pattern: background, children: null })), _jsxs("div", { className: ctaBannerSliderParts.inner, ref: band, children: [_jsx("div", { className: ctaBannerSliderParts.track, ...track, children: slides.map((slide, at) => (_jsxs("div", { className: ctaBannerSliderParts.slide, ...item(at), "data-revealed": revealed && !away(at), children: [_jsxs("div", { className: ctaBannerSliderParts.text, children: [_jsx(Title, { className: ctaBannerSliderParts.title, ...arriving(0), children: slide.title }), given(slide.description) ? (_jsx("p", { className: ctaBannerSliderParts.description, ...arriving(1), children: slide.description })) : null] }), slide.primaryAction ? (_jsxs("div", { className: ctaBannerSliderParts.actions, ...arriving(2), children: [_jsx(Button, { variant: "inverse", tone: "brand", href: slide.primaryAction.href, children: slide.primaryAction.label }), slide.secondaryAction ? (_jsx(Button, { variant: "secondary", tone: "brand", href: slide.secondaryAction.href, children: slide.secondaryAction.label })) : null] })) : null] }, at))) }), rotating ? (_jsx("div", { className: ctaBannerSliderParts.controls, children: _jsx(PaginationDots, { ...dots, 
+                            /* A dot pressed stops the dots' own rotation; the band's press handler stops this. */
+                            label: controlsLabel, itemLabel: slideLabel }) })) : null] })] }));
 }

package/dist/components/blocks/cta-banner-slider/CtaBannerSlider.types.d.ts

@@ -17,6 +17,16 @@ export interface CtaBannerSliderOwnProps {
     controlsLabel?: string;
     /** The word each dot is announced by, before its number — 'Slide 2'. Translate it with the page, as controlsLabel is; a page that translates only the group's name still has every dot announced in English. */
     slideLabel?: string;
+    /**
+     * `grid` — A fine rule grid behind the slides: white hairlines on the coral, fading in towards the foot, brightening in a soft circle around the pointer. Drawn by Background as a layer under the band's content, by the stylesheet alone, so it holds still while the slides move and costs nothing at rest
+     */
+    background?: 'grid';
+    /** What a screen reader calls the set while it rotates — announced in place of a region, as the word for this kind of thing. Translate it with the page: it is read out as given, so an untranslated one announces an English word on every page in every language. */
+    roleDescription?: string;
+    /** What a screen reader calls each item while the set rotates, for the reason roleDescription exists. Translate it with the page. */
+    slideRoleDescription?: string;
+    /** The accessible name of each item while the set rotates, given its place in the set counting from one — so a reader hears where they are. Without it each is named "2 of 5"; pass it to translate that with the page, in that language's own order and digits. */
+    positionLabel?: (position: number, count: number) => string;
 }
 export type CtaBannerSliderProps = CtaBannerSliderOwnProps;
 /** The class each part carries. Apply these — do not retype them. */
@@ -38,4 +48,6 @@ export declare const ctaBannerSliderDefaults: {
     readonly label: "Promotions";
     readonly controlsLabel: "Slides";
     readonly slideLabel: "Slide";
+    readonly roleDescription: "carousel";
+    readonly slideRoleDescription: "slide";
 };

package/dist/components/blocks/cta-banner-slider/CtaBannerSlider.types.js

@@ -12,4 +12,4 @@ export const ctaBannerSliderParts = {
     controls: 'dds-ctabannerslider__controls',
 };
 /** Generated so defaults cannot drift from the contract. */
-export const ctaBannerSliderDefaults = { headingLevel: 'h2', autoplay: false, label: 'Promotions', controlsLabel: 'Slides', slideLabel: 'Slide' };
+export const ctaBannerSliderDefaults = { headingLevel: 'h2', autoplay: false, label: 'Promotions', controlsLabel: 'Slides', slideLabel: 'Slide', roleDescription: 'carousel', slideRoleDescription: 'slide' };

package/dist/components/blocks/cta-banner-slider/cta-banner-slider-impl.css

@@ -71,3 +71,11 @@
     justify-content: center;
   }
 }
+
+/*
+ * The band's column, lifted over the pattern layer when `background` asks for one. Not positioned
+ * otherwise — the band has no other layer for it to clear.
+ */
+:where([data-dds-context="marketing"]) .dds-ctabannerslider[data-background] .dds-ctabannerslider__inner {
+  position: relative;
+}