@deriv-com/dds-marketing 1.0.1 → 1.1.0

package/dist/components/blocks/data-table/DataTable.css

@@ -0,0 +1,170 @@
+/* GENERATED from datatable.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-datatable {
+  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-datatable .dds-datatable__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-datatable .dds-datatable__header {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  max-inline-size: var(--size-measure-heading);
+  row-gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-datatable .dds-datatable__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);
+  margin-block-end: var(--space-heading-title-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-datatable .dds-datatable__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-datatable .dds-datatable__content {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  row-gap: var(--space-gap-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-datatable .dds-datatable__frame {
+  border-style: solid;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  overflow: clip;
+  position: relative;
+  background-color: var(--color-bg-page);
+  border-color: var(--color-border-subtle);
+  border-radius: var(--radius-surface);
+  border-width: var(--border-width-default);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-datatable .dds-datatable__toolbar {
+  align-items: center;
+  border-block-start-width: 0;
+  border-inline-width: 0;
+  border-style: solid;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  border-block-end-width: var(--border-width-hairline);
+  border-color: var(--color-border-subtle);
+  column-gap: var(--space-gap-md);
+  padding-block: var(--space-inset-md);
+  padding-inline: var(--space-inset-lg);
+  row-gap: var(--space-gap-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-datatable .dds-datatable__search {
+  inline-size: 100%;
+  min-inline-size: 0;
+  max-inline-size: var(--size-data-table-search);
+}
+
+:where([data-dds-context="marketing"]) .dds-datatable .dds-datatable__status {
+  margin: 0;
+  color: var(--color-fg-muted);
+  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-datatable .dds-datatable__empty {
+  margin: 0;
+  text-align: center;
+  border-color: var(--color-border-subtle);
+  color: var(--color-fg-muted);
+  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);
+  padding-block: var(--space-inset-2xl);
+  padding-inline: var(--space-inset-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-datatable .dds-datatable__pager {
+  border-block-end-width: 0;
+  border-inline-width: 0;
+  border-style: solid;
+  display: flex;
+  justify-content: center;
+  border-block-start-width: var(--border-width-hairline);
+  border-color: var(--color-border-subtle);
+  padding-block: var(--space-inset-md);
+  padding-inline: var(--space-inset-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-datatable .dds-datatable__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);
+  max-inline-size: var(--size-measure-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-datatable[data-ground="page"] {
+  background-color: var(--color-bg-page);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-datatable[data-ground="page"] .dds-datatable__footnote {
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"]) .dds-datatable[data-ground="strong"] {
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-datatable[data-ground="strong"] .dds-datatable__footnote {
+  color: var(--color-fg-muted-inverse);
+}
+
+:where([data-dds-context="marketing"]) .dds-datatable[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-datatable[data-ground="subtle"] .dds-datatable__footnote {
+  color: var(--color-fg-muted);
+}
+

package/dist/components/blocks/data-table/DataTable.d.ts

@@ -0,0 +1,29 @@
+import './DataTable.css';
+import './data-table-impl.css';
+import '../block-reveal.css';
+import { type DataTableProps } from './DataTable.types.js';
+export type { DataTableProps };
+/**
+ * A heading over a framed table a reader searches and pages through — the reference site's Table
+ * template, renamed because Table is already the grid it is drawn around.
+ *
+ * Everything that is a control is a component this package already has: the search is SearchInput,
+ * the pages are Pagination, and the grid is Table with its first column pinned. What this adds is
+ * the section — the heading, the frame, the count, the small print — and the two pieces of state
+ * the reference holds: the query and the page. Both are the block's own rather than the page's,
+ * because nothing outside the section reads them, and both are client-side: the rows are the ones
+ * the page handed in, searched and sliced here.
+ *
+ * Each row's name is a row header, so a screen reader announces the instrument before each of its
+ * values, as it announces each column's name. TableHeaderCell draws it with `scope="row"`, in the
+ * body, where a TableCell would otherwise go.
+ *
+ * The count is a polite live region from the first render, so a reader who cannot see the rows
+ * thin out as they type is told how many are left, and told in words when none are. When none are,
+ * the table is not drawn at all and the empty line is — TableBody's rule, a sentence in place of
+ * the data rather than a row pretending to be some.
+ *
+ * `'use client'` for the query, the page, the arrival and `useId`, which names the region by its
+ * heading.
+ */
+export declare function DataTable({ ground, title, description, columns, rows, pageSize, footnote, searchLabel, searchPlaceholder, clearLabel, emptyText, resultCount, paginationLabel, previousLabel, nextLabel, morePagesLabel, }: DataTableProps): import("react").JSX.Element;

package/dist/components/blocks/data-table/DataTable.js

@@ -0,0 +1,84 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useMemo, useState } from 'react';
+import './DataTable.css';
+import './data-table-impl.css';
+import '../block-reveal.css';
+import { given } from '../../given.js';
+import { Pagination } from '../../core/pagination/Pagination.js';
+import { SearchInput } from '../../core/search-input/SearchInput.js';
+import { Table } from '../../core/table/Table.js';
+import { TableBody } from '../../core/table-body/TableBody.js';
+import { TableCell } from '../../core/table-cell/TableCell.js';
+import { TableHead } from '../../core/table-head/TableHead.js';
+import { TableHeaderCell } from '../../core/table-header-cell/TableHeaderCell.js';
+import { TableRow } from '../../core/table-row/TableRow.js';
+import { arriving, useReveal } from '../use-reveal.js';
+import { dataTableDefaults, dataTableParts } from './DataTable.types.js';
+/** The count in English, for a page that passes none: where the reader is, or that nothing matched. */
+const countInEnglish = (first, last, total) => total === 0 ? 'No results' : `Showing ${first}–${last} of ${total}`;
+/**
+ * Whether a row holds the query in any of the columns drawn — case-insensitive, anywhere in the
+ * value. Only the drawn columns: a field the table does not show is one a reader could never see
+ * the match in, and a row matching on it would look like a row matching on nothing.
+ */
+const matches = (row, keys, query) => keys.some((key) => (row[key] ?? '').toLowerCase().includes(query));
+/**
+ * A heading over a framed table a reader searches and pages through — the reference site's Table
+ * template, renamed because Table is already the grid it is drawn around.
+ *
+ * Everything that is a control is a component this package already has: the search is SearchInput,
+ * the pages are Pagination, and the grid is Table with its first column pinned. What this adds is
+ * the section — the heading, the frame, the count, the small print — and the two pieces of state
+ * the reference holds: the query and the page. Both are the block's own rather than the page's,
+ * because nothing outside the section reads them, and both are client-side: the rows are the ones
+ * the page handed in, searched and sliced here.
+ *
+ * Each row's name is a row header, so a screen reader announces the instrument before each of its
+ * values, as it announces each column's name. TableHeaderCell draws it with `scope="row"`, in the
+ * body, where a TableCell would otherwise go.
+ *
+ * The count is a polite live region from the first render, so a reader who cannot see the rows
+ * thin out as they type is told how many are left, and told in words when none are. When none are,
+ * the table is not drawn at all and the empty line is — TableBody's rule, a sentence in place of
+ * the data rather than a row pretending to be some.
+ *
+ * `'use client'` for the query, the page, the arrival and `useId`, which names the region by its
+ * heading.
+ */
+export function DataTable({ ground = dataTableDefaults.ground, title, description, columns, rows, pageSize = dataTableDefaults.pageSize, footnote, searchLabel = dataTableDefaults.searchLabel, searchPlaceholder = dataTableDefaults.searchPlaceholder, clearLabel = dataTableDefaults.clearLabel, emptyText = dataTableDefaults.emptyText, resultCount = countInEnglish, paginationLabel = dataTableDefaults.paginationLabel, previousLabel = dataTableDefaults.previousLabel, nextLabel = dataTableDefaults.nextLabel, morePagesLabel = dataTableDefaults.morePagesLabel, }) {
+    const titleId = useId();
+    const [band, revealed] = useReveal();
+    const [query, setQuery] = useState('');
+    const [page, setPage] = useState(1);
+    const keys = useMemo(() => columns.map((column) => column.key), [columns]);
+    const found = useMemo(() => {
+        const needle = query.trim().toLowerCase();
+        return needle === '' ? rows : rows.filter((row) => matches(row, keys, needle));
+    }, [rows, keys, query]);
+    // A page size that is not a whole number of at least one would divide the set by nothing.
+    const perPage = Number.isFinite(pageSize) ? Math.max(1, Math.trunc(pageSize)) : dataTableDefaults.pageSize;
+    const pages = Math.max(1, Math.ceil(found.length / perPage));
+    // Held to the last page rather than trusted: rows handed in again, shorter, can leave the page
+    // past the end, and a page past the end is an empty table under a count that says otherwise.
+    const current = Math.min(page, pages);
+    const start = (current - 1) * perPage;
+    const shown = found.slice(start, start + perPage);
+    const none = found.length === 0;
+    const [first, ...rest] = columns;
+    const search = (next) => {
+        setQuery(next);
+        // Every new query starts at its first page: page three of what the last query matched is a
+        // page of nothing, or of rows the reader never saw the first two pages of.
+        setPage(1);
+    };
+    return (_jsx("section", { className: dataTableParts.root, "data-ground": ground, "aria-labelledby": titleId, children: _jsxs("div", { className: dataTableParts.inner, ref: band, "data-revealed": revealed, children: [_jsxs("div", { className: dataTableParts.header, children: [_jsx("h2", { className: dataTableParts.title, id: titleId, ...arriving(0), children: title }), given(description) ? (_jsx("p", { className: dataTableParts.description, ...arriving(1), children: description })) : null] }), _jsxs("div", { className: dataTableParts.content, children: [_jsxs("div", { className: dataTableParts.frame, ...arriving(2), children: [_jsxs("div", { className: dataTableParts.toolbar, children: [_jsx("div", { className: dataTableParts.search, children: _jsx(SearchInput, { label: searchLabel, placeholder: searchPlaceholder, clearLabel: clearLabel, value: query, onChange: search }) }), _jsx("p", { className: dataTableParts.status, role: "status", "aria-live": "polite", children: none ? resultCount(0, 0, 0) : resultCount(start + 1, start + shown.length, found.length) })] }), none || first === undefined ? null : (
+                                /* Named by the heading's words, as its caption — clipped rather than drawn twice, in
+                                   the block's stylesheet. Table names its scroller from the caption alone, so the
+                                   caption is what reaches both the grid and the region a keyboard tabs into. */
+                                _jsxs(Table, { caption: title, pinFirstColumn: true, size: "sm", headerCase: "title", hoverable: false, children: [_jsx(TableHead, { children: _jsx(TableRow, { children: columns.map((column, at) => (_jsx(TableHeaderCell, { align: at === 0 ? 'start' : (column.align ?? 'start'), children: column.label }, column.key))) }) }), _jsx(TableBody, { children: shown.map((row, at) => (
+                                            /* The case by hand: Table hands its headerCase to the head's rows through
+                                               TableHead, and TableBody passes none on — so a body row would draw its row
+                                               header in the header row's default capitals. */
+                                            _jsxs(TableRow, { headerCase: "title", children: [_jsx(TableHeaderCell, { scope: "row", children: _jsx("bdi", { children: row[first.key] ?? '' }) }), rest.map((column) => (_jsx(TableCell, { align: column.align ?? 'start', numeric: column.align === 'end', children: _jsx("bdi", { children: row[column.key] ?? '' }) }, column.key)))] }, `${start + at}-${row[first.key] ?? ''}`))) })] })), _jsx("p", { className: dataTableParts.empty, hidden: !none, children: emptyText }), _jsx("div", { className: dataTableParts.pager, hidden: pages < 2, children: pages < 2 ? null : (_jsx(Pagination, { page: current, totalPages: pages, onPageChange: setPage, label: paginationLabel, previousLabel: previousLabel, nextLabel: nextLabel, morePagesLabel: morePagesLabel })) })] }), given(footnote) ? (_jsx("p", { className: dataTableParts.footnote, ...arriving(3), children: footnote })) : null] })] }) }));
+}

package/dist/components/blocks/data-table/DataTable.types.d.ts

@@ -0,0 +1,69 @@
+import type { DataTableColumn, DataTableRow } from '../../data-table-data.js';
+export interface DataTableOwnProps {
+    /**
+     * `page` — The default, and the page's own white. The frame's rule is what sets the table off
+     * `subtle` — The grey band — the reference design's slate section. The frame lifts off it as a raised card. Painted as the band's tint laid over the page's own ground, so it is the same grey whatever is behind the section
+     * `strong` — `color.bg.brand-strong`, the dark band, for a listing a reader should arrive at. The heading and the small print turn white and muted-white; the frame stays the light surface it is everywhere else
+     */
+    ground?: 'page' | 'subtle' | 'strong';
+    /** Always. What the rows are, in the fewest words — "Forex trading conditions", "Synthetic indices". It names the section and the table both. */
+    title: string;
+    /** A line under the heading where the heading alone does not say which account or platform the conditions are for — "Conditions on Deriv MT5 Financial accounts." */
+    description?: string;
+    /** Always. The columns in reading order, each a `key` the rows hold its value under and the `label` drawn over it. The first is the rows' names — the instrument — and is pinned to the start edge while the rest scroll sideways; give a column of numbers `align: 'end'` so its figures line up. */
+    columns: DataTableColumn[];
+    /** Always. The records, in the order they are listed — each a value per column key, as the page would print it. Every value is searched as written. An empty list draws the empty line in place of the table. */
+    rows: DataTableRow[];
+    /** How many rows a page holds. Ten, the reference's, unless the rows are few enough that a second page would hold two or three of them — then raise it so the set is one page and the pages are not drawn at all. */
+    pageSize?: number;
+    /** A line of small print under the table — how current the figures are, what they are subject to. "Information is based on the most recent available trading data and may not represent today's conditions." */
+    footnote?: string;
+    /** The search's name — SearchInput's `label`, never drawn and always announced. Say what is searched where the default is vague for the page: "Search instruments". Translate it with the page. */
+    searchLabel?: string;
+    /** What the empty field shows, the reference's "Search" — or an example of a query, "EUR/USD". It disappears as the reader types and is never the field's name. Translate it with the page. */
+    searchPlaceholder?: string;
+    /** The name of the button that empties the search, which is a cross and says nothing on its own. Translate it with the page. */
+    clearLabel?: string;
+    /** The line drawn in place of the table when nothing matches the query. Translate it with the page; say what to try where the page can — "No markets match. Try a symbol, like EURUSD." */
+    emptyText?: string;
+    /** The count across from the search, given the first and last row on this page and how many matched — counting from one, and all three 0 when nothing matched. It is also what a screen reader is told, politely, as the query or the page changes. Without it the count reads "Showing 1–10 of 24", and "No results" when nothing matched; pass it to translate that with the page. */
+    resultCount?: (first: number, last: number, total: number) => string;
+    /** The name of the pages' navigation landmark, Pagination's `label`. Its own name rather than Pagination's default, so a reader listing landmarks can tell this table's pages from anything else on the page that is paginated. Translate it with the page. */
+    paginationLabel?: string;
+    /** The name of the step back through the pages, which is a glyph. Translate it with the page, and keep it parallel to nextLabel. */
+    previousLabel?: string;
+    /** The name of the step on through the pages, for the reason previousLabel exists. */
+    nextLabel?: string;
+    /** The name of the break between two runs of page numbers, which opens a menu of the pages it stands for. Only drawn when the pages run long. Translate it with the page. */
+    morePagesLabel?: string;
+}
+export type DataTableProps = DataTableOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const dataTableParts: {
+    readonly root: "dds-datatable";
+    readonly inner: "dds-datatable__inner";
+    readonly header: "dds-datatable__header";
+    readonly title: "dds-datatable__title";
+    readonly description: "dds-datatable__description";
+    readonly content: "dds-datatable__content";
+    readonly frame: "dds-datatable__frame";
+    readonly toolbar: "dds-datatable__toolbar";
+    readonly search: "dds-datatable__search";
+    readonly status: "dds-datatable__status";
+    readonly empty: "dds-datatable__empty";
+    readonly pager: "dds-datatable__pager";
+    readonly footnote: "dds-datatable__footnote";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const dataTableDefaults: {
+    readonly ground: "page";
+    readonly pageSize: 10;
+    readonly searchLabel: "Search the table";
+    readonly searchPlaceholder: "Search";
+    readonly clearLabel: "Clear search";
+    readonly emptyText: "No results match your search.";
+    readonly paginationLabel: "Table pages";
+    readonly previousLabel: "Previous page";
+    readonly nextLabel: "Next page";
+    readonly morePagesLabel: "More pages";
+};

package/dist/components/blocks/data-table/DataTable.types.js

@@ -0,0 +1,19 @@
+// GENERATED from data-table.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const dataTableParts = {
+    root: 'dds-datatable',
+    inner: 'dds-datatable__inner',
+    header: 'dds-datatable__header',
+    title: 'dds-datatable__title',
+    description: 'dds-datatable__description',
+    content: 'dds-datatable__content',
+    frame: 'dds-datatable__frame',
+    toolbar: 'dds-datatable__toolbar',
+    search: 'dds-datatable__search',
+    status: 'dds-datatable__status',
+    empty: 'dds-datatable__empty',
+    pager: 'dds-datatable__pager',
+    footnote: 'dds-datatable__footnote',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const dataTableDefaults = { ground: 'page', pageSize: 10, searchLabel: 'Search the table', searchPlaceholder: 'Search', clearLabel: 'Clear search', emptyText: 'No results match your search.', paginationLabel: 'Table pages', previousLabel: 'Previous page', nextLabel: 'Next page', morePagesLabel: 'More pages' };

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

@@ -0,0 +1,155 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ */
+
+/*
+ * The frame's fill: the stack the table's pinned column paints.
+ *
+ * Table's pinned first column cannot be see-through — the values slide under it — so it paints a
+ * ground of its own, and that ground is a fixed stack: the page as an opaque floor, the grey band
+ * over it and a raised card over that. In light all three are opaque and the stack is white; in
+ * dark the band and the card are each white at six, so the stack is a lifted grey. The frame
+ * paints the same stack, which is what makes the pinned cells the frame's own colour on every
+ * ground and in both themes rather than a strip of a slightly different grey down the table.
+ *
+ * The floor is the contract's binding; the two layers over it are here because a binding holds
+ * one layer and this is two. Listed topmost first, as Table lists them.
+ */
+:where([data-dds-context="marketing"]) .dds-datatable .dds-datatable__frame {
+  background-image:
+    linear-gradient(var(--color-bg-surface-card-raised), var(--color-bg-surface-card-raised)),
+    linear-gradient(var(--color-bg-band-subtle), var(--color-bg-band-subtle));
+}
+
+/*
+ * A part waiting for its state is out of the layout, not merely empty.
+ *
+ * The empty line and the pager are always in the markup and `hidden` until they are wanted. The
+ * browser's own `[hidden]` is `display: none` at the lowest weight there is, and the generated
+ * sheet's `display: flex` on the pager beats it — so it is said again here, a class deeper.
+ */
+:where([data-dds-context="marketing"]) .dds-datatable .dds-datatable__empty[hidden],
+:where([data-dds-context="marketing"]) .dds-datatable .dds-datatable__pager[hidden] {
+  display: none;
+}
+
+/*
+ * The table's name is the heading's, already on screen.
+ *
+ * Table names its grid and its scroller from its caption and from nothing else, so the heading's
+ * words are handed to it as one — and clipped here rather than drawn a second time an inch under
+ * the first. Clipped, not hidden: `display: none` would take the name out of the accessibility
+ * tree with the pixels, which is the half that was wanted.
+ *
+ * SegmentedControlItem's recipe: `clip-path: inset(50%)` clips the caption to nothing without the
+ * one-pixel box of the older one, which needs a raw dimension no token covers, and `position:
+ * absolute` takes it out of the flow so the grid starts at the frame's rule. The frame is the
+ * positioned box it is held in — see its `position` in the contract — so it cannot stray to the
+ * foot of the document and widen it.
+ */
+:where([data-dds-context="marketing"]) .dds-datatable .dds-table .dds-table__caption {
+  clip-path: inset(50%);
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+}
+
+/*
+ * The scroller's focus ring, drawn inside its edge.
+ *
+ * The table runs the frame's full width and the frame clips to keep its corner, so a ring drawn
+ * outside the scroller — Table's own — would be cut off down both sides, which is a ring a keyboard
+ * reader sees only half of. Pulled in by its own width, it is whole.
+ */
+:where([data-dds-context="marketing"]) .dds-datatable .dds-table {
+  outline-offset: calc(-1 * var(--border-width-focus));
+}
+
+/*
+ * Values on one line, so the table is as wide as its values and scrolls.
+ *
+ * A specification table's values are short — "1:1000", "-3.00", "Mon–Fri 00:00–21:00" — and one
+ * broken over two lines is one a reader misreads down the column. Held to a line, the columns take
+ * the room their values need, and the scroller takes the rest: the reference's `max-content` table.
+ *
+ * Written against the cell's `data-overflow` so it outweighs TableCell's own `wrap` rule, which
+ * would otherwise tie with it and win on order — TableCell's sheet arrives after this one.
+ */
+:where([data-dds-context="marketing"]) .dds-datatable .dds-tablecell[data-overflow] {
+  white-space: nowrap;
+}
+
+/*
+ * The row's name: a row header that reads as the row's name rather than as a column's.
+ *
+ * TableHeaderCell is drawn for the header row — muted, ranged to the foot of the cell, at a
+ * label's tight leading — and two of those are wrong down the side of the table. The name is the
+ * strongest thing in its row, so it takes the default ink; and it sits at the top of the row at the
+ * values' leading, as the values beside it do, so the first lines share a baseline.
+ *
+ * It keeps the header's single line. Allowed to wrap, the one column that could was the one the
+ * table squeezed whenever it nearly fitted — "Boom 1000 Index" over three lines beside values with
+ * room to spare — so the name holds its width and the values scroll under it instead.
+ */
+:where([data-dds-context="marketing"]) .dds-datatable .dds-tableheadercell[scope='row'] {
+  color: var(--color-fg-default);
+  line-height: var(--font-body-sm-line-height);
+  vertical-align: top;
+}
+
+/*
+ * From the fold, the heading group is centred over the table, the small print centred under it,
+ * and the pages move to the end edge.
+ *
+ * Stats' rule and its reason for the header: content stacked under a heading takes a centred
+ * heading, and the header and its line are capped narrower than the column, so `margin-inline:
+ * auto` is what centres those boxes rather than their words inside a box left at the start edge.
+ * The note under the table follows the reference, centred under the frame. The pages are centred
+ * on a phone, where they are the width of the frame, and go to the end edge beside nothing once
+ * there is room — the reference's footer.
+ *
+ * `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-datatable .dds-datatable__header {
+    align-items: center;
+    margin-inline: auto;
+    text-align: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-datatable .dds-datatable__description {
+    margin-inline: auto;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-datatable .dds-datatable__pager {
+    justify-content: flex-end;
+  }
+
+  /* The small print centres under the table with the heading over it; on a phone both start at the edge. */
+  :where([data-dds-context="marketing"]) .dds-datatable .dds-datatable__footnote {
+    margin-inline: auto;
+    text-align: center;
+  }
+}
+
+/*
+ * A heading with no line under it closes up, Stats' way: its bound step is the distance to the
+ * line, and with nothing there it would only add to the step from the header to the table.
+ */
+:where([data-dds-context="marketing"]) .dds-datatable .dds-datatable__title:last-child {
+  margin-block-end: 0;
+}
+
+/*
+ * On a phone the search takes the row, as size.data-table.search says: the cap is for the fold,
+ * where the search shares its row with the count. Below it the count wraps underneath, and a search
+ * stopped short of the edge is room thrown away on the narrowest screen.
+ *
+ * `47.9375rem` is the last width below the fold, LogoRows' bound.
+ */
+@container (max-width: 47.9375rem) {
+  :where([data-dds-context="marketing"]) .dds-datatable .dds-datatable__search {
+    max-inline-size: none;
+  }
+}