@deriv-com/dds-marketing 0.1.0 → 0.2.0

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

@@ -0,0 +1,56 @@
+import type { ReactNode, ThHTMLAttributes } from 'react';
+export interface TableHeaderCellOwnProps {
+    /**
+     * `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';
+    /**
+     * `none` — The column can be sorted and the table is not currently ordered by it. The mark is drawn quietly, which is what tells a reader the column is available rather than active
+     * `ascending` — The table is ordered by this column, smallest first — A to Z, earliest date, lowest amount
+     * `descending` — The table is ordered by this column, largest first. The commoner opening state for money and dates, where the newest or the biggest is what a reader came for
+     */
+    sortDirection?: 'none' | 'ascending' | 'descending';
+    /**
+     * `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';
+    /**
+     * `upper` — The house setting. Column names in capitals at font.overline — eleven pixels with wide tracking — which reads as a different texture from the values rather than a louder version of 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 font.label.sm — twelve pixels, medium, ordinary tracking. Right where the names are long, are proper nouns whose own capitals capitals would flatten, or are in a script that has no case at all, and right wherever a product has decided its tables read as sentences rather than as labels
+     */
+    headerCase?: 'upper' | 'title';
+    /** Allowed: any content */
+    children: ReactNode;
+}
+export type TableHeaderCellProps = TableHeaderCellOwnProps & Omit<ThHTMLAttributes<HTMLTableCellElement>, 'className' | 'size' | 'align' | 'sortDirection' | 'dividers' | 'headerCase' | 'sortable' | 'onSort'> & ({
+    sortable?: boolean;
+    onSort: () => void;
+} | {
+    sortable?: false;
+    onSort?: () => void;
+});
+/** The class each part carries. Apply these — do not retype them. */
+export declare const tableHeaderCellParts: {
+    readonly root: "dds-tableheadercell";
+    readonly trigger: "dds-tableheadercell__trigger";
+    readonly indicator: "dds-tableheadercell__indicator";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const tableHeaderCellDefaults: {
+    readonly size: "md";
+    readonly align: "start";
+    readonly sortDirection: "none";
+    readonly dividers: "rows";
+    readonly headerCase: "upper";
+    readonly sortable: false;
+};

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

@@ -0,0 +1,9 @@
+// GENERATED from table-header-cell.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const tableHeaderCellParts = {
+    root: 'dds-tableheadercell',
+    trigger: 'dds-tableheadercell__trigger',
+    indicator: 'dds-tableheadercell__indicator',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const tableHeaderCellDefaults = { size: 'md', align: 'start', sortDirection: 'none', dividers: 'rows', headerCase: 'upper', sortable: false };

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

@@ -0,0 +1,74 @@
+/*
+ * 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 sort mark answering the pointer, where the whole header is the target.
+ *
+ * The header used to take a wash across the whole button, which is the gesture a row already uses
+ * to say a press would land there. At the top of a table it reads as a selected column instead: a
+ * block of grey behind a name, in the one row that holds no values.
+ *
+ * So the feedback moved to the mark and the target did not. The button still fills the cell and
+ * still takes the press anywhere in it — only what the reader sees change is smaller.
+ *
+ * The ink is the contract's: the indicator binds color.fg.default in the hover state, so the value
+ * is decided in the one place every other value here is. What a binding cannot say is *whose* hover
+ * — it names a part and a state, and generates `__indicator:hover`, which is the sixteen pixels of
+ * the glyph rather than the header around it. So the selector is here and the colour is not, the
+ * same division the row's pointer gate makes.
+ *
+ * No pointer-device gate here, unlike the row. A stale hover on a touch screen leaves a mark in the
+ * ink it would take anyway once that column were sorted, on a control the reader can still see —
+ * where a stale row wash points at the wrong record. The cost is not the same, so the departure is
+ * not worth repeating.
+ */
+:where([data-dds-context="marketing"]) .dds-tableheadercell .dds-tableheadercell__trigger:hover:where(:not(:disabled)) .dds-tableheadercell__indicator {
+  color: var(--color-fg-default);
+}
+
+/*
+ * The capitals reaching the column's name and nothing else placed beside it.
+ *
+ * `text-transform` inherits, and a header cell is a slot: a page may put a control or a mark in
+ * it, and "Select all" arrived as SELECT ALL — a control shouting at a reader in a row of quiet
+ * column names. Anything else a page composes in there would have gone the same way: a link, a
+ * tooltip's trigger, a count beside a name.
+ *
+ * The case belongs to the header's own words. Those are either the cell's text or, where the column
+ * can be sorted, the text inside its trigger — both of which carry this component's own class, and
+ * both of which the exclusion keeps. Everything else in there is a component with typography of its
+ * own, and its case is that component's business rather than the column's.
+ */
+:where([data-dds-context="marketing"]) .dds-tableheadercell [class*='dds-']:not([class*='dds-tableheadercell']) {
+  text-transform: none;
+}
+
+/*
+ * The sort mark, centred on the name's capitals rather than on its line box.
+ *
+ * `align-items: center` centres each flex item's box, and the two boxes here are not the same kind
+ * of thing. The glyph's ink fills its box symmetrically. The name's box is a line box, which
+ * reserves room under the baseline for descenders — and the header is uppercase, so it never has
+ * any. Its visible mass therefore sits above the centre of its own box while the glyph's sits on
+ * the centre of the glyph's, and the two are aligned by the browser and misaligned to the eye: the
+ * mark reads low by about half a descender.
+ *
+ * Product never has to correct this. It draws the mark a step smaller than anything in this
+ * package's icon ramp, and at that size the error is under a pixel. Here it is a sixteen-pixel mark
+ * against a twelve-pixel name, and it shows.
+ *
+ * The correction is bottom margin rather than a translate, because `align-items` centres the margin
+ * box: extending the box downward lifts the ink inside it by half of what was added, and it stays
+ * in the flow so nothing overlaps the row above. Stated in `em` so it tracks the type — this is the
+ * one measure in these sheets that is not a token, and it cannot be: it is a fraction of a font's
+ * descender, which is a fact about the typeface rather than a decision anybody made.
+ */
+:where([data-dds-context="marketing"]) .dds-tableheadercell .dds-tableheadercell__indicator {
+  margin-block-end: 0.2em;
+}

package/dist/components/core/table-row/TableRow.css

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

package/dist/components/core/table-row/TableRow.d.ts

@@ -0,0 +1,17 @@
+import './TableRow.css';
+import './table-row-impl.css';
+import { type TableRowProps } from './TableRow.types.js';
+export type { TableRowProps };
+/**
+ * One row of a table: the cells that answer the same questions in the same order as every other.
+ *
+ * It owns the rule above it and whether it reads as picked, and nothing about what any cell holds.
+ * Being picked is drawn here rather than on the checkbox that sets it, because selection is a fact
+ * about the row — a reader scanning needs to see which rows are in the set without checking every
+ * box in the first column.
+ *
+ * `aria-selected` is set only where the row is picked. A row that is not part of a selectable set
+ * should not announce itself as unselected: that tells a reader there is a selection to join when
+ * there may be none, and the attribute is absent rather than false on that account.
+ */
+export declare function TableRow({ selected, hoverable, dividers, overflow, size, headerCase, children, ...rest }: TableRowProps): import("react").JSX.Element;

package/dist/components/core/table-row/TableRow.js

@@ -0,0 +1,32 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement } from 'react';
+import './TableRow.css';
+import './table-row-impl.css';
+import { tableRowDefaults, tableRowParts } from './TableRow.types.js';
+/**
+ * One row of a table: the cells that answer the same questions in the same order as every other.
+ *
+ * It owns the rule above it and whether it reads as picked, and nothing about what any cell holds.
+ * Being picked is drawn here rather than on the checkbox that sets it, because selection is a fact
+ * about the row — a reader scanning needs to see which rows are in the set without checking every
+ * box in the first column.
+ *
+ * `aria-selected` is set only where the row is picked. A row that is not part of a selectable set
+ * should not announce itself as unselected: that tells a reader there is a selection to join when
+ * there may be none, and the attribute is absent rather than false on that account.
+ */
+export function TableRow({ selected = tableRowDefaults.selected, hoverable = tableRowDefaults.hoverable, dividers = tableRowDefaults.dividers, overflow = tableRowDefaults.overflow, size = tableRowDefaults.size, headerCase = tableRowDefaults.headerCase, children, ...rest }) {
+    return (_jsx("tr", { ...rest, className: tableRowParts.root, "data-selected": String(selected), "data-hoverable": String(hoverable), "aria-selected": selected ? true : undefined, children: Children.toArray(children)
+            .filter(isValidElement)
+            .map((cell, at) => cloneElement(cell, {
+            key: cell.key ?? at,
+            size,
+            // The rule travels with the size: a cell draws the line above it, so a run of cells
+            // across one row draws one rule. The row itself cannot — a `<tr>` border is painted
+            // only while a table collapses its borders, and this one separates them for its corner.
+            dividers,
+            overflow,
+            headerCase,
+        })) }));
+}

package/dist/components/core/table-row/TableRow.types.d.ts

@@ -0,0 +1,45 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface TableRowOwnProps {
+    /** The page is holding this row in a set the reader has picked — for an export, a bulk action, a comparison. It draws the state and reports nothing: the checkbox in the row is what a reader presses, and what it reports belongs to the page */
+    selected?: boolean;
+    /** 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;
+    /**
+     * `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';
+    /**
+     * `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';
+    /**
+     * `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: TableCell, TableHeaderCell */
+    children: ReactNode;
+}
+export type TableRowProps = TableRowOwnProps & Omit<HTMLAttributes<HTMLTableRowElement>, 'className' | 'selected' | 'hoverable' | 'dividers' | 'headerCase' | 'overflow' | 'size'>;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const tableRowParts: {
+    readonly root: "dds-tablerow";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const tableRowDefaults: {
+    readonly selected: false;
+    readonly hoverable: true;
+    readonly dividers: "rows";
+    readonly headerCase: "upper";
+    readonly overflow: "wrap";
+    readonly size: "md";
+};

package/dist/components/core/table-row/TableRow.types.js

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

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

@@ -0,0 +1,31 @@
+/*
+ * 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 pointer-device gate on the row highlight.
+ *
+ * A touch screen reports a hover that never ends: the last row tapped keeps the wash until
+ * something else is tapped, so a highlight meant to say "a press would land here" ends up saying it
+ * about a row the reader has already left. `@media (hover: hover)` is the question that separates a
+ * device with a pointer from one without, and it cannot be asked from a contract — a binding names
+ * a token and a state, and this is neither.
+ *
+ * Written as an undo rather than as the rule itself, so the generated stylesheet stays the one place
+ * the highlight's colour is decided. What is here is the condition, not the value.
+ *
+ * No other component in this package gates its hover, which makes this a departure worth naming
+ * rather than a convention being followed: a row is the largest hover target the system draws, and
+ * the only one wide enough that a stale highlight points at the wrong record rather than at a
+ * control the reader can still see.
+ */
+@media (hover: none) {
+  :where([data-dds-context="marketing"]) .dds-tablerow[data-hoverable='true']:hover {
+    background-color: transparent;
+  }
+}

package/dist/components/core/text-area/TextArea.css

@@ -0,0 +1,325 @@
+/* GENERATED from textarea.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-textarea {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-gap-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea .dds-textarea__label-row {
+  align-items: center;
+  display: flex;
+  gap: var(--space-gap-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea .dds-textarea__label {
+  transition-property: color;
+  align-items: center;
+  display: flex;
+  color: var(--color-fg-default);
+  gap: var(--space-gap-xs);
+  min-block-size: var(--size-target-min);
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea .dds-textarea__label-tooltip {
+  transition-property: background-color, color, outline-color, outline-width;
+  align-items: center;
+  appearance: none;
+  background-color: transparent;
+  border-style: none;
+  cursor: pointer;
+  display: flex;
+  flex: none;
+  justify-content: center;
+  outline-style: solid;
+  padding: unset;
+  border-radius: var(--radius-pill);
+  color: var(--color-fg-muted);
+  min-block-size: var(--size-target-min);
+  min-inline-size: var(--size-target-min);
+  outline-width: var(--border-width-none);
+  transition-duration: var(--motion-duration-fast);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea .dds-textarea__control {
+  transition-property: background-color, border-color, box-shadow, opacity, outline-color, outline-width;
+  align-items: flex-start;
+  border-style: solid;
+  box-sizing: border-box;
+  display: flex;
+  inline-size: 100%;
+  outline-style: solid;
+  background-color: var(--color-bg-field);
+  border-color: var(--color-border-default);
+  border-width: var(--border-width-default);
+  gap: var(--space-gap-sm);
+  outline-width: var(--border-width-none);
+  transition-duration: var(--motion-duration-fast);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea .dds-textarea__field {
+  appearance: none;
+  background-color: transparent;
+  border-style: none;
+  box-sizing: border-box;
+  display: block;
+  flex: auto;
+  min-inline-size: 0;
+  outline-style: solid;
+  padding: unset;
+  resize: none;
+  color: var(--color-fg-default);
+  outline-width: var(--border-width-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea .dds-textarea__footer {
+  align-items: flex-start;
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-gap-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea .dds-textarea__message {
+  transition-property: color;
+  align-items: flex-start;
+  display: flex;
+  overflow-wrap: anywhere;
+  font-family: var(--font-body-sm-family);
+  font-size: var(--font-body-sm-size);
+  font-weight: var(--font-body-sm-weight);
+  gap: var(--space-gap-xs);
+  letter-spacing: var(--font-body-sm-letter-spacing);
+  line-height: var(--font-body-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea .dds-textarea__message-icon {
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  font-size: var(--font-body-sm-size);
+  line-height: var(--font-body-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea .dds-textarea__counter {
+  flex: none;
+  font-variant-numeric: tabular-nums;
+  color: var(--color-fg-muted);
+  font-family: var(--font-body-sm-family);
+  font-size: var(--font-body-sm-size);
+  letter-spacing: var(--font-body-sm-letter-spacing);
+  line-height: var(--font-body-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea .dds-textarea__field::placeholder {
+  color: var(--color-fg-tertiary);
+  font-weight: var(--font-body-md-weight);
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea .dds-textarea__helper {
+  transition-property: color;
+  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-textarea .dds-textarea__optional-mark {
+  transition-property: color;
+  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);
+  line-height: var(--font-body-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea .dds-textarea__required-mark {
+  transition-property: color;
+  color: var(--color-fg-required);
+  font-family: var(--font-body-sm-family);
+  font-size: var(--font-body-sm-size);
+  font-weight: var(--font-body-sm-weight);
+  line-height: var(--font-body-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea .dds-textarea__control:hover:where(:not(:has(.dds-textarea__field:disabled), :has(.dds-textarea__field[readonly]))) {
+  box-shadow: var(--elevation-ring-hover);
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea .dds-textarea__label-tooltip:hover:where(:not(:disabled)) {
+  background-color: var(--color-bg-hover);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea .dds-textarea__label-tooltip:active {
+  background-color: var(--color-bg-active);
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea .dds-textarea__label-tooltip:focus-visible {
+  outline-color: var(--color-border-focus);
+  outline-width: var(--border-width-focus);
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea:has(.dds-textarea__field:focus-visible) .dds-textarea__control {
+  border-color: var(--color-border-focus);
+  outline-color: var(--color-border-focus);
+  outline-width: var(--border-width-hairline);
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea:has(.dds-textarea__field[readonly]) .dds-textarea__control {
+  background-color: var(--color-bg-readonly);
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea:has(.dds-textarea__field:disabled:not(:where(:disabled *))) .dds-textarea__control {
+  opacity: var(--opacity-disabled);
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea:has(.dds-textarea__field:disabled) .dds-textarea__helper {
+  color: var(--color-fg-disabled);
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea:has(.dds-textarea__field:disabled) .dds-textarea__label {
+  color: var(--color-fg-disabled);
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea:has(.dds-textarea__field:disabled) .dds-textarea__message {
+  color: var(--color-fg-disabled);
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea:has(.dds-textarea__field:disabled) .dds-textarea__optional-mark {
+  color: var(--color-fg-disabled);
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea:has(.dds-textarea__field:disabled) .dds-textarea__required-mark {
+  color: var(--color-fg-disabled);
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea[data-size="lg"] .dds-textarea__control {
+  border-radius: var(--radius-control-lg);
+  padding-block: var(--space-inset-md);
+  padding-inline: var(--space-inset-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea[data-size="lg"] .dds-textarea__field {
+  font-family: var(--font-body-lg-family);
+  font-size: var(--font-body-lg-size);
+  font-weight: var(--font-body-lg-weight);
+  letter-spacing: var(--font-body-lg-letter-spacing);
+  line-height: var(--font-body-lg-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea[data-size="lg"] .dds-textarea__label {
+  font-family: var(--font-field-label-lg-family);
+  font-size: var(--font-field-label-lg-size);
+  font-weight: var(--font-field-label-lg-weight);
+  letter-spacing: var(--font-field-label-lg-letter-spacing);
+  line-height: var(--font-field-label-lg-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea[data-size="md"] .dds-textarea__control {
+  border-radius: var(--radius-control-md);
+  padding-block: var(--space-inset-sm);
+  padding-inline: var(--space-inset-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea[data-size="md"] .dds-textarea__field {
+  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);
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea[data-size="md"] .dds-textarea__label {
+  font-family: var(--font-field-label-md-family);
+  font-size: var(--font-field-label-md-size);
+  font-weight: var(--font-field-label-md-weight);
+  letter-spacing: var(--font-field-label-md-letter-spacing);
+  line-height: var(--font-field-label-md-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea[data-size="sm"] .dds-textarea__control {
+  border-radius: var(--radius-control-sm);
+  padding-block: var(--space-inset-sm);
+  padding-inline: var(--space-inset-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea[data-size="sm"] .dds-textarea__field {
+  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);
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea[data-size="sm"] .dds-textarea__label {
+  font-family: var(--font-field-label-md-family);
+  font-size: var(--font-field-label-md-size);
+  font-weight: var(--font-field-label-md-weight);
+  letter-spacing: var(--font-field-label-md-letter-spacing);
+  line-height: var(--font-field-label-md-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea[data-status="error"] .dds-textarea__control {
+  border-color: var(--color-border-danger);
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea[data-status="error"] .dds-textarea__message {
+  color: var(--color-fg-danger);
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea[data-status="pending"] .dds-textarea__message {
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea[data-status="success"] .dds-textarea__control {
+  border-color: var(--color-border-success);
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea[data-status="success"] .dds-textarea__message {
+  color: var(--color-fg-success);
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea[data-status="warning"] .dds-textarea__control {
+  border-color: var(--color-border-warning);
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea[data-status="warning"] .dds-textarea__message {
+  color: var(--color-fg-warning);
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea[data-status="error"]:has(.dds-textarea__field:focus-visible) .dds-textarea__control {
+  border-color: var(--color-border-danger);
+  outline-color: var(--color-border-danger);
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea[data-status="success"]:has(.dds-textarea__field:focus-visible) .dds-textarea__control {
+  border-color: var(--color-border-success);
+  outline-color: var(--color-border-success);
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea[data-status="warning"]:has(.dds-textarea__field:focus-visible) .dds-textarea__control {
+  border-color: var(--color-border-warning);
+  outline-color: var(--color-border-warning);
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea .dds-textarea__label-tooltip:disabled {
+  cursor: not-allowed;
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea .dds-textarea__field:disabled {
+  cursor: not-allowed;
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea .dds-textarea__field[readonly] {
+  cursor: default;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-textarea,
+  :where([data-dds-context="marketing"]) .dds-textarea * { transition: none; }
+}
+

package/dist/components/core/text-area/TextArea.d.ts

@@ -0,0 +1,13 @@
+import './TextArea.css';
+import './text-area-impl.css';
+import { type TextAreaProps } from './TextArea.types.js';
+export type { TextAreaProps };
+/**
+ * How many lines the box is, given how much text is in it.
+ *
+ * Exported because it is the whole of the growing rule and it is worth testing without a DOM:
+ * never fewer than `rows`, never more than `maxRows`, and `maxRows` below `rows` is read as
+ * `rows` rather than inverting the two.
+ */
+export declare function linesFor(content: number, line: number, rows: number, maxRows: number): number;
+export declare function TextArea({ size, status, label, labelTooltip, placeholder, helperText, rows, maxRows, maxLength, statusMessage, required, requiredMark, optional, ...rest }: TextAreaProps): import("react").JSX.Element;