@deriv-com/dds-marketing 0.1.0 → 0.2.0

package/dist/components/core/table-body/TableBody.types.d.ts

@@ -0,0 +1,36 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface TableBodyOwnProps {
+    /**
+     * `sm` — Compact. Dense data a reader scans rather than reads — a ledger, a positions table, anything where fitting more rows on screen is worth more than air around each one
+     * `md` — Balanced, and the default: rows a reader moves through at reading pace, with enough room that the eye does not slip between them
+     * `lg` — Spacious. Few rows, each carrying something substantial — a plan comparison, a summary of three accounts. Reach for it when the table is the page rather than a part of it
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * `rows` — The default. A line between rows and none between columns, which is what stops the eye slipping from one row's start to another's end — the mistake a wide table invites and the one a reader never notices making
+     * `grid` — Lines both ways, for a table read as a matrix rather than as a list of records: a rate card, a comparison where the reader traces a column as often as a row. It is more lines than most tables need, so it should be asked for
+     * `none` — No lines at all. Right for two or three rows, where the rules are more structure than data, and for a table whose columns are already separated by their alignment
+     */
+    dividers?: 'rows' | 'grid' | 'none';
+    /** Handed down by the table. It draws a wash under the pointer so a reader knows which row a press would land on — and only on a device that has a pointer, which the row's own stylesheet gates */
+    hoverable?: boolean;
+    /**
+     * `wrap` — The default. Text too long for its column wraps and the row grows taller, so nothing is hidden — right whenever the value is the point and a reader has to read all of it
+     * `truncate` — Rows must stay one line high — a dense table a reader scans down, where a row that grew would break the rhythm they are scanning by. The value is clipped with an ellipsis and the whole of it is still reachable, so this trades seeing for scanning rather than losing anything
+     */
+    overflow?: 'wrap' | 'truncate';
+    /** Allowed: TableRow */
+    children: ReactNode;
+}
+export type TableBodyProps = TableBodyOwnProps & Omit<HTMLAttributes<HTMLTableSectionElement>, 'className' | 'size' | 'dividers' | 'hoverable' | 'overflow'>;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const tableBodyParts: {
+    readonly root: "dds-tablebody";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const tableBodyDefaults: {
+    readonly size: "md";
+    readonly dividers: "rows";
+    readonly hoverable: true;
+    readonly overflow: "wrap";
+};

package/dist/components/core/table-body/TableBody.types.js

@@ -0,0 +1,7 @@
+// GENERATED from table-body.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const tableBodyParts = {
+    root: 'dds-tablebody',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const tableBodyDefaults = { size: 'md', dividers: 'rows', hoverable: true, overflow: 'wrap' };

package/dist/components/core/table-cell/TableCell.css

@@ -0,0 +1,76 @@
+/* GENERATED from tablecell.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-tablecell {
+  border-block-end-width: 0;
+  border-inline-width: 0;
+  border-style: solid;
+  vertical-align: top;
+  border-color: var(--color-border-subtle);
+}
+
+:where([data-dds-context="marketing"]) .dds-tablecell[data-align="center"] {
+  text-align: center;
+}
+
+:where([data-dds-context="marketing"]) .dds-tablecell[data-align="end"] {
+  text-align: end;
+}
+
+:where([data-dds-context="marketing"]) .dds-tablecell[data-align="start"] {
+  text-align: start;
+}
+
+:where([data-dds-context="marketing"]) .dds-tablecell[data-numeric="false"] {
+  font-variant-numeric: normal;
+}
+
+:where([data-dds-context="marketing"]) .dds-tablecell[data-numeric="true"] {
+  font-variant-numeric: tabular-nums;
+}
+
+:where([data-dds-context="marketing"]) .dds-tablecell[data-overflow="truncate"] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:where([data-dds-context="marketing"]) .dds-tablecell[data-overflow="wrap"] {
+  white-space: normal;
+}
+
+:where([data-dds-context="marketing"]) .dds-tablecell[data-dividers="grid"] {
+  border-block-start-width: var(--border-width-hairline);
+}
+
+:where([data-dds-context="marketing"]) .dds-tablecell[data-dividers="none"] {
+  border-block-start-width: var(--border-width-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-tablecell[data-dividers="rows"] {
+  border-block-start-width: var(--border-width-hairline);
+}
+
+:where([data-dds-context="marketing"]) .dds-tablecell[data-size="lg"] {
+  font-family: var(--font-body-lg-family);
+  font-size: var(--font-body-lg-size);
+  line-height: var(--font-body-lg-line-height);
+  padding-block: var(--space-inset-lg);
+  padding-inline: var(--space-inset-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-tablecell[data-size="md"] {
+  font-family: var(--font-body-md-family);
+  font-size: var(--font-body-md-size);
+  line-height: var(--font-body-md-line-height);
+  padding-block: var(--space-inset-md);
+  padding-inline: var(--space-inset-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-tablecell[data-size="sm"] {
+  font-family: var(--font-body-sm-family);
+  font-size: var(--font-body-sm-size);
+  line-height: var(--font-body-sm-line-height);
+  padding-block: var(--space-inset-sm);
+  padding-inline: var(--space-inset-sm);
+}
+

package/dist/components/core/table-cell/TableCell.d.ts

@@ -0,0 +1,21 @@
+import './TableCell.css';
+import { type TableCellProps } from './TableCell.types.js';
+export type { TableCellProps };
+/**
+ * One value in a row, under the column that names it.
+ *
+ * A slot: what goes in is the page's to compose, which is what lets a cell hold a badge, a status
+ * dot, a link or a control rather than only text. What it decides is where the value sits in the
+ * column and whether its digits line up with the ones above and below.
+ *
+ * It draws the rule above itself. A `<tr>` border is painted only while a table collapses its
+ * borders, and this table separates them so it can hold a corner — so the line between two rows is
+ * a run of cell edges rather than one row edge, handed down from the row.
+ *
+ * `numeric` sets tabular figures and nothing else. Inter's default figures are proportional, so a
+ * column of amounts drawn with them has its decimal points in slightly different places and stops
+ * being a column a reader can compare down. Ranging the column to the end is `align`'s job — the
+ * two travel together on almost every numeric column, and keeping them apart is what lets a centred
+ * count exist.
+ */
+export declare function TableCell({ size, align, numeric, dividers, overflow, children, ...rest }: TableCellProps): import("react").JSX.Element;

package/dist/components/core/table-cell/TableCell.js

@@ -0,0 +1,31 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import './TableCell.css';
+import { tableCellDefaults, tableCellParts } from './TableCell.types.js';
+/**
+ * One value in a row, under the column that names it.
+ *
+ * A slot: what goes in is the page's to compose, which is what lets a cell hold a badge, a status
+ * dot, a link or a control rather than only text. What it decides is where the value sits in the
+ * column and whether its digits line up with the ones above and below.
+ *
+ * It draws the rule above itself. A `<tr>` border is painted only while a table collapses its
+ * borders, and this table separates them so it can hold a corner — so the line between two rows is
+ * a run of cell edges rather than one row edge, handed down from the row.
+ *
+ * `numeric` sets tabular figures and nothing else. Inter's default figures are proportional, so a
+ * column of amounts drawn with them has its decimal points in slightly different places and stops
+ * being a column a reader can compare down. Ranging the column to the end is `align`'s job — the
+ * two travel together on almost every numeric column, and keeping them apart is what lets a centred
+ * count exist.
+ */
+export function TableCell({ size = tableCellDefaults.size, align = tableCellDefaults.align, numeric = tableCellDefaults.numeric, dividers = tableCellDefaults.dividers, overflow = tableCellDefaults.overflow, children, ...rest }) {
+    /*
+     * A value has no case decision, and the row clones every cell it holds with the same props — so
+     * the header's setting arrives here too. Left in `rest` it reaches the element as
+     * `headercase="upper"`, which is not an attribute a `<td>` has. The same swallow TableHeaderCell
+     * makes of the overflow a header never uses.
+     */
+    const { headerCase: _headerCase, ...attrs } = rest;
+    return (_jsx("td", { ...attrs, className: tableCellParts.root, "data-size": size, "data-align": align, "data-numeric": String(numeric), "data-dividers": dividers, "data-overflow": overflow, children: children }));
+}

package/dist/components/core/table-cell/TableCell.types.d.ts

@@ -0,0 +1,43 @@
+import type { ReactNode, TdHTMLAttributes } from 'react';
+export interface TableCellOwnProps {
+    /**
+     * `sm` — Compact. Dense data a reader scans rather than reads — a ledger, a positions table, anything where fitting more rows on screen is worth more than air around each one
+     * `md` — Balanced, and the default: rows a reader moves through at reading pace, with enough room that the eye does not slip between them
+     * `lg` — Spacious. Few rows, each carrying something substantial — a plan comparison, a summary of three accounts. Reach for it when the table is the page rather than a part of it
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * `start` — Words. Names, descriptions, statuses — anything read left to right starts where the reading does, and a column of them shares one edge the eye can run down
+     * `center` — Rare, and worth arguing for: a single glyph or a very short state where neither edge means anything. A centred column of words has two ragged edges instead of one
+     * `end` — Numbers that line up under each other — amounts, counts, percentages. The decimal point is what a reader compares down a column, and ranging to the end is what puts it in one place
+     */
+    align?: 'start' | 'center' | 'end';
+    /** The cell holds digits a reader compares against the cells above and below — an amount, a count, a percentage. It sets tabular figures, so every digit takes the same width and the decimal points line up down the column. Ranging the column to the end is `align`'s job and a separate decision — the two travel together on almost every numeric column, and keeping them apart is what lets a centred count exist */
+    numeric?: boolean;
+    /**
+     * `rows` — The default. A line between rows and none between columns, which is what stops the eye slipping from one row's start to another's end — the mistake a wide table invites and the one a reader never notices making
+     * `grid` — Lines both ways, for a table read as a matrix rather than as a list of records: a rate card, a comparison where the reader traces a column as often as a row. It is more lines than most tables need, so it should be asked for
+     * `none` — No lines at all. Right for two or three rows, where the rules are more structure than data, and for a table whose columns are already separated by their alignment
+     */
+    dividers?: 'rows' | 'grid' | 'none';
+    /**
+     * `wrap` — The default. Text too long for its column wraps and the row grows taller, so nothing is hidden — right whenever the value is the point and a reader has to read all of it
+     * `truncate` — Rows must stay one line high — a dense table a reader scans down, where a row that grew would break the rhythm they are scanning by. The value is clipped with an ellipsis and the whole of it is still reachable, so this trades seeing for scanning rather than losing anything
+     */
+    overflow?: 'wrap' | 'truncate';
+    /** Allowed: any content */
+    children: ReactNode;
+}
+export type TableCellProps = TableCellOwnProps & Omit<TdHTMLAttributes<HTMLTableCellElement>, 'className' | 'size' | 'align' | 'numeric' | 'dividers' | 'overflow'>;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const tableCellParts: {
+    readonly root: "dds-tablecell";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const tableCellDefaults: {
+    readonly size: "md";
+    readonly align: "start";
+    readonly numeric: false;
+    readonly dividers: "rows";
+    readonly overflow: "wrap";
+};

package/dist/components/core/table-cell/TableCell.types.js

@@ -0,0 +1,7 @@
+// GENERATED from table-cell.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const tableCellParts = {
+    root: 'dds-tablecell',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const tableCellDefaults = { size: 'md', align: 'start', numeric: false, dividers: 'rows', overflow: 'wrap' };

package/dist/components/core/table-head/TableHead.css

@@ -0,0 +1,6 @@
+/* GENERATED from tablehead.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-tablehead {
+  background-color: var(--color-bg-transparent);
+}
+

package/dist/components/core/table-head/TableHead.d.ts

@@ -0,0 +1,22 @@
+import './TableHead.css';
+import './table-head-impl.css';
+import { type TableHeadProps } from './TableHead.types.js';
+export type { TableHeadProps };
+/**
+ * The column names, above the data, and the filter row where there is one.
+ *
+ * It exists as a component rather than a wrapper because a screen reader announces a column's
+ * header before every value under it, and that only happens if the header is marked up as one.
+ *
+ * It takes the table's `dividers` and hands it on, like the size and the case beside it — but it
+ * draws only the vertical half of a grid. The rule under a header is the first data row's top edge
+ * — TableRow draws its rule above itself — so a horizontal rule here would be a second line at the
+ * top of the table with nothing above it to separate, sitting inside the corner where it reads as
+ * a crack. That half is suppressed in table-head-impl.css.
+ *
+ * It was once said by handing the rows `dividers="none"`, which was true of the horizontal rule and
+ * wrong about the other: it took the vertical rules with it, so a table set to `grid` drew columns
+ * through its data and none through its header, leaving the names floating over the columns they
+ * name. One decision silently answering two questions, which is what moving it into CSS fixes.
+ */
+export declare function TableHead({ size, overflow, headerCase, dividers, children, ...rest }: TableHeadProps): import("react").JSX.Element;

package/dist/components/core/table-head/TableHead.js

@@ -0,0 +1,52 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement } from 'react';
+import './TableHead.css';
+import './table-head-impl.css';
+import { tableHeadDefaults, tableHeadParts } from './TableHead.types.js';
+/**
+ * The column names, above the data, and the filter row where there is one.
+ *
+ * It exists as a component rather than a wrapper because a screen reader announces a column's
+ * header before every value under it, and that only happens if the header is marked up as one.
+ *
+ * It takes the table's `dividers` and hands it on, like the size and the case beside it — but it
+ * draws only the vertical half of a grid. The rule under a header is the first data row's top edge
+ * — TableRow draws its rule above itself — so a horizontal rule here would be a second line at the
+ * top of the table with nothing above it to separate, sitting inside the corner where it reads as
+ * a crack. That half is suppressed in table-head-impl.css.
+ *
+ * It was once said by handing the rows `dividers="none"`, which was true of the horizontal rule and
+ * wrong about the other: it took the vertical rules with it, so a table set to `grid` drew columns
+ * through its data and none through its header, leaving the names floating over the columns they
+ * name. One decision silently answering two questions, which is what moving it into CSS fixes.
+ */
+export function TableHead({ size = tableHeadDefaults.size, overflow = tableHeadDefaults.overflow, headerCase = tableHeadDefaults.headerCase, dividers = tableHeadDefaults.dividers, children, ...rest }) {
+    /*
+     * `hoverable` is answered here rather than passed on — a header is not a row a reader acts on —
+     * so it is taken out of `rest` before it reaches the element. Left in, React warns: it is a
+     * boolean the DOM has no such attribute for. `dividers` is no longer stripped with it; it is a
+     * declared prop now, destructured above and handed to the rows.
+     */
+    const { hoverable: _hoverable, ...attrs } = rest;
+    return (_jsx("thead", { ...attrs, className: tableHeadParts.root, children: Children.toArray(children)
+            .filter(isValidElement)
+            .map((row, at) => cloneElement(row, {
+            key: row.key ?? at,
+            size,
+            overflow,
+            headerCase,
+            // A header names the columns; it is not a row a reader acts on, so it never lights up.
+            hoverable: false,
+            /*
+              Passed through rather than forced to 'none'. The head needs the vertical half of a
+              grid — a column read top to bottom starts at its name, and rules beginning below the
+              header leave the names floating over the columns they belong to. It must still draw
+              no horizontal rule, because the line under a header is the first data row's top edge
+              and a second here would sit above the table's own top edge, inside the corner. That
+              half is suppressed in table-head-impl.css, which is now the one place the fact is
+              written: saying it by handing the rows 'none' took the vertical rules with it.
+            */
+            dividers,
+        })) }));
+}

package/dist/components/core/table-head/TableHead.types.d.ts

@@ -0,0 +1,39 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface TableHeadOwnProps {
+    /**
+     * `upper` — The house setting: column names in capitals, at the role that suits them. A header is read once where the data under it is read many times, and capitals are what stop it competing
+     * `title` — Names drawn as they were written, at twelve pixels. Right where the names are long, are proper nouns whose own capitals would be flattened, or are in a script with no case at all
+     */
+    headerCase?: 'upper' | 'title';
+    /**
+     * `rows` — The default. A line between rows and none between columns. The head draws neither: the rule under it is the first data row’s top edge, and there are no columns to separate
+     * `grid` — Lines both ways, for a table read as a matrix rather than as a list of records. The head takes the vertical half of it — a column read top to bottom starts at its name, and a grid whose rules begin below the header leaves the names floating over the columns they belong to
+     * `none` — No lines at all, which for the head is what it already draws
+     */
+    dividers?: 'rows' | 'grid' | 'none';
+    /**
+     * `wrap` — The default. Text too long for its column wraps and the row grows taller, so nothing is hidden — right whenever the value is the point and a reader has to read all of it
+     * `truncate` — Rows must stay one line high — a dense table a reader scans down, where a row that grew would break the rhythm they are scanning by. The value is clipped with an ellipsis and the whole of it is still reachable, so this trades seeing for scanning rather than losing anything
+     */
+    overflow?: 'wrap' | 'truncate';
+    /**
+     * `sm` — Compact. Dense data a reader scans rather than reads — a ledger, a positions table, anything where fitting more rows on screen is worth more than air around each one
+     * `md` — Balanced, and the default: rows a reader moves through at reading pace, with enough room that the eye does not slip between them
+     * `lg` — Spacious. Few rows, each carrying something substantial — a plan comparison, a summary of three accounts. Reach for it when the table is the page rather than a part of it
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /** Allowed: TableRow */
+    children: ReactNode;
+}
+export type TableHeadProps = TableHeadOwnProps & Omit<HTMLAttributes<HTMLTableSectionElement>, 'className' | 'headerCase' | 'dividers' | 'overflow' | 'size'>;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const tableHeadParts: {
+    readonly root: "dds-tablehead";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const tableHeadDefaults: {
+    readonly headerCase: "upper";
+    readonly dividers: "rows";
+    readonly overflow: "wrap";
+    readonly size: "md";
+};

package/dist/components/core/table-head/TableHead.types.js

@@ -0,0 +1,7 @@
+// GENERATED from table-head.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const tableHeadParts = {
+    root: 'dds-tablehead',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const tableHeadDefaults = { headerCase: 'upper', dividers: 'rows', overflow: 'wrap', size: 'md' };

package/dist/components/core/table-head/table-head-impl.css

@@ -0,0 +1,51 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * `:where([data-dds-context="marketing"])` confines these rules without contributing
+ * specificity, so every override below still ties or beats exactly what it did
+ * before — several here are written a class deeper than they look in order to
+ * match generated CSS, and a scope that carried weight would break all of them.
+ */
+
+/*
+ * The filter row sitting under the names rather than away from them.
+ *
+ * Every cell in this system carries its own inset, which is right between a row of values and the
+ * next: each row owns the air above and below it, and no row has to know what it sits under. In a
+ * head it doubles. The names carry an inset below them and the controls carry one above, so a
+ * reader saw the column names, a gap of two insets, and then a row of fields that read as a
+ * separate thing floating over the table rather than as the head's second half.
+ *
+ * So the second row gives up the top half of it. The names keep their own inset — the gap is theirs
+ * and it is the one the head already had — and the controls sit directly under it. The bottom inset
+ * stays, because that gap is real: it separates the head from the first row of data.
+ *
+ * It cannot be a binding. A binding names a part and a state, and this is neither — it is a fact
+ * about position, that this row is the one after another, which a contract has no way to say. The
+ * same limit the header's hover runs into and the row's pointer gate before it.
+ */
+:where([data-dds-context="marketing"]) .dds-tablehead > .dds-tablerow + .dds-tablerow > .dds-tablecell {
+  padding-block-start: 0;
+}
+
+/*
+ * The head takes the vertical rules of a grid and never the horizontal one.
+ *
+ * The line under a header is already drawn: it is the first data row's top edge, because every row
+ * draws the rule above itself. A rule on the head's own cells would be a second line at the very
+ * top of the table, above the names, with nothing over it to separate — and inside the corner a
+ * container clips, where it reads as a crack rather than as a rule.
+ *
+ * Written here rather than by handing the head's rows `dividers="none"`, which is how it was said
+ * before. That was true of the horizontal rule and wrong about the other: the vertical rules key
+ * off the same value, so `none` took them too, and a table set to `grid` drew columns through its
+ * data and none through its header — leaving the names floating over the columns they name. One
+ * value cannot answer two questions, so the half that is not the prop's is stated here.
+ *
+ * Three classes deep, which beats the generated rule's class-and-attribute without needing to be
+ * scoped any harder.
+ */
+:where([data-dds-context="marketing"]) .dds-tablehead > .dds-tablerow > .dds-tableheadercell,
+:where([data-dds-context="marketing"]) .dds-tablehead > .dds-tablerow > .dds-tablecell {
+  border-block-start-width: 0;
+}

package/dist/components/core/table-header-cell/TableHeaderCell.css

@@ -0,0 +1,126 @@
+/* GENERATED from tableheadercell.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-tableheadercell {
+  border-block-end-width: 0;
+  border-inline-width: 0;
+  border-style: solid;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: bottom;
+  white-space: nowrap;
+  border-color: var(--color-border-subtle);
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"]) .dds-tableheadercell .dds-tableheadercell__trigger {
+  align-items: center;
+  appearance: none;
+  border-style: none;
+  color: inherit;
+  cursor: pointer;
+  display: flex;
+  font: inherit;
+  inline-size: 100%;
+  outline-style: solid;
+  text-transform: inherit;
+  background-color: var(--color-bg-transparent);
+  gap: var(--space-gap-xs);
+  min-block-size: var(--size-target-min);
+  min-inline-size: var(--size-target-min);
+  outline-width: var(--border-width-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-tableheadercell .dds-tableheadercell__indicator {
+  align-items: center;
+  display: flex;
+}
+
+:where([data-dds-context="marketing"]) .dds-tableheadercell[data-align="center"] {
+  text-align: center;
+}
+
+:where([data-dds-context="marketing"]) .dds-tableheadercell[data-align="end"] {
+  text-align: end;
+}
+
+:where([data-dds-context="marketing"]) .dds-tableheadercell[data-align="start"] {
+  text-align: start;
+}
+
+:where([data-dds-context="marketing"]) .dds-tableheadercell[data-header-case="upper"] {
+  text-transform: uppercase;
+  font-family: var(--font-eyebrow-family);
+  font-size: var(--font-eyebrow-size);
+  font-weight: var(--font-eyebrow-weight);
+  letter-spacing: var(--font-eyebrow-letter-spacing);
+  line-height: var(--font-eyebrow-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-tableheadercell[data-align="center"] .dds-tableheadercell__trigger {
+  justify-content: center;
+}
+
+:where([data-dds-context="marketing"]) .dds-tableheadercell[data-align="end"] .dds-tableheadercell__trigger {
+  justify-content: flex-end;
+}
+
+:where([data-dds-context="marketing"]) .dds-tableheadercell[data-align="start"] .dds-tableheadercell__trigger {
+  justify-content: flex-start;
+}
+
+:where([data-dds-context="marketing"]) .dds-tableheadercell .dds-tableheadercell__indicator:hover {
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-tableheadercell .dds-tableheadercell__trigger:focus-visible {
+  outline-color: var(--color-border-focus);
+  outline-width: var(--border-width-focus);
+}
+
+:where([data-dds-context="marketing"]) .dds-tableheadercell[data-dividers="grid"] {
+  border-block-start-width: var(--border-width-hairline);
+}
+
+:where([data-dds-context="marketing"]) .dds-tableheadercell[data-dividers="none"] {
+  border-block-start-width: var(--border-width-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-tableheadercell[data-dividers="rows"] {
+  border-block-start-width: var(--border-width-hairline);
+}
+
+:where([data-dds-context="marketing"]) .dds-tableheadercell[data-header-case="title"] {
+  font-family: var(--font-label-sm-family);
+  font-size: var(--font-label-sm-size);
+  font-weight: var(--font-label-sm-weight);
+  letter-spacing: var(--font-label-sm-letter-spacing);
+  line-height: var(--font-label-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-tableheadercell[data-size="lg"] {
+  padding-block: var(--space-inset-lg);
+  padding-inline: var(--space-inset-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-tableheadercell[data-size="md"] {
+  padding-block: var(--space-inset-md);
+  padding-inline: var(--space-inset-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-tableheadercell[data-size="sm"] {
+  padding-block: var(--space-inset-sm);
+  padding-inline: var(--space-inset-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-tableheadercell[data-sort-direction="ascending"] .dds-tableheadercell__indicator {
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-tableheadercell[data-sort-direction="descending"] .dds-tableheadercell__indicator {
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-tableheadercell[data-sort-direction="none"] .dds-tableheadercell__indicator {
+  color: var(--color-fg-muted);
+}
+

package/dist/components/core/table-header-cell/TableHeaderCell.d.ts

@@ -0,0 +1,21 @@
+import './TableHeaderCell.css';
+import './table-header-cell-impl.css';
+import { type TableHeaderCellProps } from './TableHeaderCell.types.js';
+export type { TableHeaderCellProps };
+/**
+ * The name of a column, announced before every value under it.
+ *
+ * That is the whole of why it is a component rather than a styled cell: a screen reader reads the
+ * header before each cell in the column, which is how a reader knows what a number means without
+ * looking it up — and it only happens if the header is a header in the markup.
+ *
+ * Where the column can be sorted, the header holds a real `<button>` rather than a click handler on
+ * the cell. Sorting is an action: it has to be reachable by Tab, answer Enter and Space, and take a
+ * focus ring, and a `<th>` does none of those.
+ *
+ * `aria-sort` stays on the cell, not on the button. The direction is a fact about the column, and
+ * the column is the cell — announcing it on the control would say the button is ascending rather
+ * than the data. It is also why the mark alone never carries the direction: the indicator is drawn
+ * and never announced.
+ */
+export declare function TableHeaderCell({ size, align, sortDirection, sortable, dividers, headerCase, onSort, children, ...rest }: TableHeaderCellProps): import("react").JSX.Element;

package/dist/components/core/table-header-cell/TableHeaderCell.js

@@ -0,0 +1,34 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowUpArrowDownRegularIcon, ChevronDownRegularIcon, ChevronUpRegularIcon } from '@deriv-com/quill-icons-web';
+import './TableHeaderCell.css';
+import './table-header-cell-impl.css';
+import { Icon } from '../icon/Icon.js';
+import { tableHeaderCellDefaults, tableHeaderCellParts, } from './TableHeaderCell.types.js';
+/**
+ * The name of a column, announced before every value under it.
+ *
+ * That is the whole of why it is a component rather than a styled cell: a screen reader reads the
+ * header before each cell in the column, which is how a reader knows what a number means without
+ * looking it up — and it only happens if the header is a header in the markup.
+ *
+ * Where the column can be sorted, the header holds a real `<button>` rather than a click handler on
+ * the cell. Sorting is an action: it has to be reachable by Tab, answer Enter and Space, and take a
+ * focus ring, and a `<th>` does none of those.
+ *
+ * `aria-sort` stays on the cell, not on the button. The direction is a fact about the column, and
+ * the column is the cell — announcing it on the control would say the button is ascending rather
+ * than the data. It is also why the mark alone never carries the direction: the indicator is drawn
+ * and never announced.
+ */
+export function TableHeaderCell({ size = tableHeaderCellDefaults.size, align = tableHeaderCellDefaults.align, sortDirection = tableHeaderCellDefaults.sortDirection, sortable = tableHeaderCellDefaults.sortable, dividers = tableHeaderCellDefaults.dividers, headerCase = tableHeaderCellDefaults.headerCase, onSort, children, ...rest }) {
+    /*
+     * A header cell always truncates, so it declares no `overflow` — and the row hands one to every
+     * cell it holds, because a data cell's does change. Left in `rest` it reached the element as
+     * `overflow="wrap"`, which is not an attribute a `<th>` has: React warns, and the markup carries
+     * a word that describes the opposite of what this cell does. The same swallow TableHead makes of
+     * the two decisions it answers itself.
+     */
+    const { overflow: _overflow, ...attrs } = rest;
+    return (_jsx("th", { ...attrs, className: tableHeaderCellParts.root, scope: "col", "data-size": size, "data-align": align, "data-sort-direction": sortDirection, "data-dividers": dividers, "data-header-case": headerCase, "aria-sort": sortable ? sortDirection : undefined, children: !sortable ? (children) : (_jsxs("button", { type: "button", className: tableHeaderCellParts.trigger, onClick: () => onSort?.(), children: [children, _jsx("span", { className: tableHeaderCellParts.indicator, "aria-hidden": "true", children: _jsx(Icon, { size: "xs", children: sortDirection === 'ascending' ? (_jsx(ChevronUpRegularIcon, {})) : sortDirection === 'descending' ? (_jsx(ChevronDownRegularIcon, {})) : (_jsx(ArrowUpArrowDownRegularIcon, {})) }) })] })) }));
+}