@deriv-com/dds-marketing 0.1.0 → 0.2.0

package/.llm/digest/tab.md

@@ -0,0 +1,60 @@
+<!-- GENERATED from tab.contract.json. Do not edit. -->
+
+# Tab
+
+One item in a strip, naming a version of what the page is already about. It cannot stand on its own: selected means selected against something, and a tab with no siblings is a heading that highlights. …
+
+`import { Tab } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- One of a small set of comparable versions of the same offer — a billing period, a platform, a market class
+- The strip is the page's own comparison control and the alternatives are already written on the page
+
+## Something else, when
+
+- Pressing it should take the reader to another page → **Button**
+- The item is one of a list of separate topics rather than a version of one → **AccordionItem**
+
+## Never
+
+- Navigation. Nothing here carries an href and nothing should — a tab that goes somewhere has told the reader it would come back
+- A step in a sequence. A strip says its members are alternatives, and a reader may press the third without the first
+- The only tab. One tab is a heading, and a selected state that nothing is selected against says nothing
+- Hiding something the page needs read. A reader skimming a landing page does not press anything, so whatever sits behind an unselected tab is, for most visitors, not on the page at all
+
+## Props
+
+- **selected** `boolean` · optional — Injected by TabList, which is the only thing that can know. A tab cannot see its siblings, so a set of tabs each deciding for itself would show every one of them selected — the same reason Accordion holds which row is open. …
+  - never: Marking the tab a page prefers. Selected means the reader is looking at this one; the badge slot is what argues for a tab that is not current
+- **onSelect** `callback` · optional — Learning which tab was pressed, when the page wants to know as well as the strip. TabList calls it after its own handler, so a page's handler is not replaced by being inside a set
+  - never: Driving the selection. The strip owns which tab is current; a page that sets it from here is racing the component for the same piece of state
+- **value** `string` · required — Always — it is how the page says which slice to show. …
+  - never: The label. A value is an identifier a page matches on and a label is words a reader reads; tying them means an editor cannot fix a typo without breaking the page
+- **label** `string` · required — Always — it is what the reader presses. One or two words, and a noun rather than an instruction: 'Yearly', not 'Switch to yearly'. …
+  - never: A sentence. The strip is scanned across, and a tab as wide as a clause is a strip that wraps
+- **icon** `node` · optional — The tabs are things a mark tells apart faster than a word does — a platform, a market class. Pass the glyph; the tab draws it at its own step. …
+  - never: Carrying the label. A tab whose meaning is a shape is a tab a screen reader reads as nothing, and the words are what the strip is scanned by
+- **badge** `node` · optional — A count or a claim for the version this tab names, shown when content is badge. One of the set is the one the page wants chosen and the reason fits in a word — 'Save 20%' on the yearly tab. …
+  - never: Describing what the tab contains. A badge here argues for pressing this tab; one that merely labels its contents is metadata in a pill, and it competes with the selected mark for the same glance. The current tab, usually. …
+- **content** `enum` · default "none" — What the trailing side of the tab is carrying, when it is carrying anything. …
+  - `none` — Nothing after the label. Most tabs, and the one to reach for unless something earns the space
+  - `icon` — A glyph after the label, qualifying the view rather than naming it — that this one leads off-site, or that it is the one to look at. What names the view goes in the leading slot instead
+  - `badge` — One of the set is the one the page wants chosen and the reason fits in a word — 'Save 20%' on the yearly tab. On that tab and no other: a badge on every tab marks none of them
+  - never: Two marks after one label. That is what naming the kind prevents — a trailingIcon left behind on a tab switched to badge renders nothing, instead of quietly appearing beside it
+- **trailingIcon** `node` · optional — The glyph shown after the label when content is icon. Wrapped by the tab on the same ramp as the leading slot, so a strip carrying both draws them alike. …
+  - never: Naming the view. What the tab is goes before the words, where a reader looking for it will be — the trailing side qualifies what the label already said
+
+## The type refuses
+
+- content="icon" with trailingIcon=null — content is icon and there is no glyph to show, which renders a gap where one was promised
+- content="badge" with badge=null — content is badge and there is no badge to show, which renders a gap where one was promised
+
+## Inside it
+
+- 6 components are refused inside it; the list and the reasons are in the long document.
+- Renders 7 parts: root, surface, content, icon, label, sizer, trailing-icon.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/tab.md`.

package/.llm/digest/table.md

@@ -0,0 +1,71 @@
+<!-- GENERATED from table.contract.json. Do not edit. -->
+
+# Table
+
+Structured data in rows and columns, where every row has the same shape. …
+
+`import { Table } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- Data with a uniform structure, where the same fields exist on every row and a reader compares one row against another down a column
+- Values that line up — amounts, dates, counts. A column is what makes them comparable, and comparison is the only reason to pay for a table's weight
+- Rows that carry more than words: a badge against a name, a link at the end. The cell is a slot, so what a row holds is the page's decision
+
+## Something else, when
+
+- The records do not share a shape, or each is a thing in itself rather than a row to compare → **Card**
+- There is one field per record → **nothing in this system does this**
+
+## Never
+
+- Layout. A table means the rows and columns carry meaning, and using one to place things puts a grid in the accessibility tree that a screen reader reads out as rows and columns of nothing
+- A single record's fields. Two columns of label-and-value is a description list wearing a table's markup, and it announces every label as a column header it is not
+- Data a reader cannot compare. If nobody will read down a column, the alignment, the rules and the header are all cost with no return
+- Holding the answer to its own sorting or selection. Both outlive the render, so a table that kept them would be a second copy of what the page already has, and the two disagree the first time anything else changes either
+- A row placed straight into the table. `forbiddenChildren` refuses it and the reason is worth more than the refusal: `<table>` cannot contain `<tr>`, so an HTML parser inserts an implied `<tbody>` around it — and React does not do the same on the client. …
+
+## Props
+
+- **layout** `enum` · default "auto"
+  - `auto` — The default. Columns take their widths from what is in them, which is right when the content is known and varied — a name column wants more room than a status one and can say so itself
+  - `fixed` — Columns take an equal share of the width whatever they hold, and the table stops re-flowing as data changes. …
+  - never: A table whose columns need unequal room. Fixed gives them a third each, and a column that needs more does not clip — the text wraps instead — so the one carrying a name becomes a column of three-line cells while the one carrying a status keeps two thirds of its width empty. …
+- **pinFirstColumn** `boolean` · default false — The first column is what identifies the row — a market, a product, a plan — and the columns after it are the values being compared. …
+  - never: A table that fits. Nothing sticks until there is something to scroll, so the pinning itself costs nothing — but the rule marking the pinned column is drawn either way, and a line down a table that never moves is a boundary the reader cannot act on. …
+- **caption** `string` · optional — Where nothing else names the table. A table is announced as a grid of so many rows and columns, so a reader landing inside an unnamed one has to read a cell to find out what they are in — "Open positions", "October statements". …
+  - never: Explaining the table. It is a name rather than a sentence: what the columns mean belongs in the header row, and anything longer than a few words is a paragraph the reader has to get past before reaching the data
+- **dividers** `enum` · default "rows"
+  - `rows` — The default. …
+  - `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. …
+  - `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
+  - never: Marking a group. A missing line is not a heading — a table that wants sections wants a header row inside the body, or two tables. Nor `grid` as decoration on a long table: every vertical line is another thing between a reader and the value they came for
+- **headerCase** `enum` · default "upper"
+  - `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
+- **hoverable** `boolean` · default true — On by default. A wash follows the pointer and says which row a press would land on, which a wide table needs and a narrow one is not harmed by: the further a row runs, the easier it is to be reading one and about to click another. …
+  - never: Nothing, usually — turning it off is the decision that takes a reason. A table that is only ever read is the case: a row that lights up under the pointer says it can be acted on, and one that lights up and does nothing makes that promise on every row at once
+- **overflow** `enum` · default "wrap"
+  - `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. …
+  - never: Making a column narrow enough to be worth truncating. Clipping is what a column does when it has run out of room, not a way to give it less — a table of ellipses has hidden its data behind a hover on every cell
+- **size** `enum` · default "md"
+  - `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
+  - never: Making the text bigger or smaller. It changes how tall a row is and nothing else — the type stays one size down the whole table, because a reader comparing values across three tables at three densities is comparing the values rather than the tables. …
+
+## Inside it
+
+- Takes only TableHead, TableBody.
+- At least 1, at most 2 — fewer is not this component and more is a different one.
+- 5 components are refused inside it; the list and the reasons are in the long document.
+- Renders 3 parts: root, grid, caption.
+
+## Needs mounting
+
+Does not work from the import alone: useTableSort. See `.llm/components/table.md` for what to mount and where.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/table.md`.

package/.llm/digest/tablebody.md

@@ -0,0 +1,49 @@
+<!-- GENERATED from tablebody.contract.json. Do not edit. -->
+
+# TableBody
+
+The rows of data, under the header. …
+
+`import { TableBody } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- The data itself — every row that a reader compares against the others
+
+## Something else, when
+
+- The row names the columns rather than filling them → **TableHead**
+
+## Never
+
+- An empty state. A table with nothing in it is not a table with an empty row — a row spanning every column to say "no results" is a sentence pretending to be data. Render the message instead of the table
+- Rows of differing shapes. Every row here answers the same questions in the same order, which is the promise the whole component exists to make
+
+## Props
+
+- **size** `enum` · default "md"
+  - `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
+  - never: Making the text bigger or smaller. It changes how tall a row is and nothing else — the type stays one size down the whole table, because a reader comparing values across three tables at three densities is comparing the values rather than the tables. …
+- **dividers** `enum` · default "rows"
+  - `rows` — The default. …
+  - `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. …
+  - `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
+  - never: Marking a group. A missing line is not a heading — a table that wants sections wants a header row inside the body, or two tables. Nor `grid` as decoration on a long table: every vertical line is another thing between a reader and the value they came for
+- **hoverable** `boolean` · default true — 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
+  - never: Saying a row is chosen. Hover is where the pointer is and nothing more; `selected` is the answer a reader gave, and a row that looked picked on approach would say they had picked everything they passed over
+- **overflow** `enum` · default "wrap"
+  - `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. …
+  - never: Making a column narrow enough to be worth truncating. Clipping is what a column does when it has run out of room, not a way to give it less — a table of ellipses has hidden its data behind a hover on every cell
+
+## Inside it
+
+- Takes only TableRow.
+- At least 1, no ceiling — fewer is not this component and more is a different one.
+- 4 components are refused inside it; the list and the reasons are in the long document.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/tablebody.md`.

package/.llm/digest/tablecell.md

@@ -0,0 +1,55 @@
+<!-- GENERATED from tablecell.contract.json. Do not edit. -->
+
+# TableCell
+
+One value in a row, under the column that names it. It is a slot: what goes in is the page's to compose, which is what lets a cell hold a badge, a link or a control rather than only text. …
+
+`import { TableCell } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A value in a data row — a name, an amount, a date, a state
+- A cell holding a component rather than words: a Badge against a name, a Link at the end of the row
+- Numbers a reader compares down the column, where `numeric` ranges them to the end and sets the digits in tabular figures
+
+## Something else, when
+
+- The cell names the column rather than filling it → **TableHeaderCell**
+
+## Never
+
+- A cell that spans the row to hold a message. It is announced against a header that does not describe it, and it breaks the shape every other row keeps
+- Nesting a table. A grid inside a cell is a second set of rows and columns announced inside the first, and no reader can hold both
+- Text long enough to be a paragraph. A cell is compared against the ones above it, and a column of paragraphs is a column nobody reads down
+
+## Props
+
+- **size** `enum` · default "md"
+  - `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
+  - never: Making the text bigger or smaller. It changes how tall a row is and nothing else — the type stays one size down the whole table, because a reader comparing values across three tables at three densities is comparing the values rather than the tables. …
+- **align** `enum` · default "start"
+  - `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
+  - never: Making a table look balanced. Alignment says what kind of thing a column holds; using it to even out a layout tells the reader the numbers are words
+- **numeric** `boolean` · default false — 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. …
+  - never: Any number at all. The system's own rule is not "is this a number" but "does it line up under another one" — a reference code or a year written once beside a name is read rather than compared, and tabular figures cost it the better fit of proportional ones for nothing
+- **dividers** `enum` · default "rows"
+  - `rows` — The default. …
+  - `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. …
+  - `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
+  - never: Marking a group. A missing line is not a heading — a table that wants sections wants a header row inside the body, or two tables. Nor `grid` as decoration on a long table: every vertical line is another thing between a reader and the value they came for
+- **overflow** `enum` · default "wrap"
+  - `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. …
+  - never: Making a column narrow enough to be worth truncating. Clipping is what a column does when it has run out of room, not a way to give it less — a table of ellipses has hidden its data behind a hover on every cell
+
+## Inside it
+
+- 6 components are refused inside it; the list and the reasons are in the long document.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/tablecell.md`.

package/.llm/digest/tablehead.md

@@ -0,0 +1,50 @@
+<!-- GENERATED from tablehead.contract.json. Do not edit. -->
+
+# TableHead
+
+The column names, above the data, and the filter row where there is one. …
+
+`import { TableHead } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- Naming the columns, which almost every table should. A column of numbers with nothing at the top is a column a reader has to infer
+
+## Something else, when
+
+- The row is data rather than a name for data → **TableBody**
+
+## Never
+
+- A second row of data dressed as a subheading. Everything here names columns, and a reader is told so on every cell beneath
+- Skipping. A table with no header is a grid of values a reader has to work out from the data itself, which is guesswork on the first row and wrong on the rest
+
+## Props
+
+- **headerCase** `enum` · default "upper"
+  - `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
+- **dividers** `enum` · default "rows"
+  - `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. …
+  - `none` — No lines at all, which for the head is what it already draws
+  - never: Giving the head a rule of its own under the names. That line already exists as the first data row’s top edge, and a second drawn here would double it at exactly the weight a hairline is chosen to avoid
+- **overflow** `enum` · default "wrap"
+  - `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. …
+  - never: Making a column narrow enough to be worth truncating. Clipping is what a column does when it has run out of room, not a way to give it less — a table of ellipses has hidden its data behind a hover on every cell
+- **size** `enum` · default "md"
+  - `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
+  - never: Making the text bigger or smaller. It changes how tall a row is and nothing else — the type stays one size down the whole table, because a reader comparing values across three tables at three densities is comparing the values rather than the tables. …
+
+## Inside it
+
+- Takes only TableRow.
+- At least 1, at most 2 — fewer is not this component and more is a different one.
+- 4 components are refused inside it; the list and the reasons are in the long document.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/tablehead.md`.

package/.llm/digest/tableheadercell.md

@@ -0,0 +1,65 @@
+<!-- GENERATED from tableheadercell.contract.json. Do not edit. -->
+
+# TableHeaderCell
+
+The name of a column, announced before every value under it. …
+
+`import { TableHeaderCell } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- Naming a column, which every column should have
+- A column a reader can order, where `sortable` draws the control and `sortDirection` says which way it is ordered now
+
+## Something else, when
+
+- The cell holds a value rather than the name of a column → **TableCell**
+
+## Never
+
+- A column that cannot actually be sorted. `sortable` draws a control, and a control that reports to nobody is the clearest promise a table can break — the reader presses it twice before deciding the page is broken
+- Holding which column is sorted. `sortDirection` draws the answer for this one column; which column the table is ordered by outlives the render and belongs to the page, through useTableSort or its own state
+- A row of names inside the data. Everything marked up this way is announced as naming what follows it, so a header in the middle of a table re-names every row beneath
+
+## Props
+
+- **size** `enum` · default "md"
+  - `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
+  - never: Making the text bigger or smaller. It changes how tall a row is and nothing else — the type stays one size down the whole table, because a reader comparing values across three tables at three densities is comparing the values rather than the tables. …
+- **align** `enum` · default "start"
+  - `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
+  - never: Making a table look balanced. Alignment says what kind of thing a column holds; using it to even out a layout tells the reader the numbers are words
+- **sortDirection** `enum` · default "none"
+  - `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
+  - never: Two columns at once. A table is ordered by one column, so a second header claiming a direction tells the reader the data is sorted two ways and leaves them unable to trust either
+- **dividers** `enum` · default "rows"
+  - `rows` — The default. …
+  - `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. …
+  - `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
+  - never: Marking a group. A missing line is not a heading — a table that wants sections wants a header row inside the body, or two tables. Nor `grid` as decoration on a long table: every vertical line is another thing between a reader and the value they came for
+- **headerCase** `enum` · default "upper"
+  - `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. …
+  - `title` — Names drawn as they were written, at font.label.sm — twelve pixels, medium, ordinary tracking. …
+- **sortable** `boolean` · default false — The reader can order the table by this column. It draws the control and the mark; what pressing it does is the page's, reported through `onSort`
+  - never: A column that only looks orderable. There is no state where the control is drawn and inert — a header that could be pressed to no effect is worse than one that was never offered
+- **onSort** `callback` · optional — Told the header was pressed. …
+  - never: Sorting the data. This reports the press; the order of the rows is decided by whatever holds them, and a table that re-ordered its own children would be holding state it cannot own
+
+## The type refuses
+
+- sortable=true with onSort=null — A control the reader can press that reports to nobody. …
+
+## Inside it
+
+- 8 components are refused inside it; the list and the reasons are in the long document.
+- Renders 3 parts: root, trigger, indicator.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/tableheadercell.md`.

package/.llm/digest/tablerow.md

@@ -0,0 +1,56 @@
+<!-- GENERATED from tablerow.contract.json. Do not edit. -->
+
+# TableRow
+
+One row of a table: the cells that answer the same questions in the same order as every other row. It owns the rule under it and whether it reads as picked, and nothing about what any cell holds. …
+
+`import { TableRow } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A record, with one cell per column
+- A row a reader can pick, where `selected` draws the state the page is holding
+
+## Something else, when
+
+- The whole row is a target that navigates → **CardButton**
+
+## Never
+
+- A message spanning every column. A row that says "no results" is a sentence wearing a record's markup, and it is announced cell by cell against headers that do not apply to it
+- A visual separator. The rule between rows is `dividers` on the table; an empty row is a record with nothing in it as far as anything reading the table is concerned
+- Holding which rows are selected. `selected` draws the answer; keeping it is the page's, in its own state
+
+## Props
+
+- **selected** `boolean` · default false — 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
+  - never: The row under the pointer, or the row a reader last looked at. Hover is the browser's and this is a persistent answer — a row that highlighted on approach would say the reader had picked everything they passed over
+- **hoverable** `boolean` · default true — 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
+  - never: Saying a row is chosen. Hover is where the pointer is and nothing more; `selected` is the answer a reader gave, and a row that looked picked on approach would say they had picked everything they passed over
+- **dividers** `enum` · default "rows"
+  - `rows` — The default. …
+  - `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. …
+  - `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
+  - never: Marking a group. A missing line is not a heading — a table that wants sections wants a header row inside the body, or two tables. Nor `grid` as decoration on a long table: every vertical line is another thing between a reader and the value they came for
+- **headerCase** `enum` · default "upper"
+  - `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
+- **overflow** `enum` · default "wrap"
+  - `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. …
+  - never: Making a column narrow enough to be worth truncating. Clipping is what a column does when it has run out of room, not a way to give it less — a table of ellipses has hidden its data behind a hover on every cell
+- **size** `enum` · default "md"
+  - `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
+  - never: Making the text bigger or smaller. It changes how tall a row is and nothing else — the type stays one size down the whole table, because a reader comparing values across three tables at three densities is comparing the values rather than the tables. …
+
+## Inside it
+
+- Takes only TableCell, TableHeaderCell.
+- At least 1, no ceiling — fewer is not this component and more is a different one.
+- 4 components are refused inside it; the list and the reasons are in the long document.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/tablerow.md`.

package/.llm/digest/tablist.md

@@ -0,0 +1,46 @@
+<!-- GENERATED from tablist.contract.json. Do not edit. -->
+
+# TabList
+
+A strip of comparable versions of one thing, one of them showing at a time. …
+
+`import { TabList } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- Two or three versions of one offer differ in a way a reader wants to compare — monthly against yearly, one platform against another
+- The page has already written every version, and showing them at once would be repetition rather than information
+- The reader's choice changes what they see and nothing else — no route, no account, nothing the page has to remember
+
+## Something else, when
+
+- The sections are separate topics rather than versions of one thing → **Accordion**
+- Every version is worth reading → **Card**
+- The tabs would go to other pages → **nothing in this system does this**
+
+## Never
+
+- Navigation. This is a group of buttons, not a landmark: nothing here carries an href, and a strip whose items led away would be a menu drawn as a comparison
+- A sequence. Tabs are alternatives and are pressed in any order — steps happen in one, and a strip says otherwise to everyone who reads it
+- One tab. A set of one is a heading with a border, and the selected state marks it against nothing
+- More than about four. A strip is scanned across in a glance, and the point at which a reader has to read it to choose is the point it should have been a list
+
+## Props
+
+- **label** `string` · required — Always — a group with no name is a group a screen reader announces as nothing, and the reader is told there is a set without being told what it is a set of. …
+  - never: A heading. This is the group's accessible name and it is not drawn — a strip that needs a visible heading gets one on the page above it, which is a heading a sighted reader can see too
+- **value** `string` · optional — The page is holding which tab is current, because the choice also drives what is rendered beneath the strip — the ordinary case here. Passing it makes the strip controlled: it shows what it is told and reports presses through onChange. …
+  - never: Half of a controlled strip. A value passed without an onChange to move it is a strip that cannot respond to being pressed — which reads as a broken control rather than a fixed one, and is the shape a page falls into by adding the value first
+- **onChange** `callback` · optional — Whenever value is — together they are how a page holds the choice. It is called with the pressed tab's value after that tab's own onSelect, so a tab that reports its own presses keeps doing so inside a set
+  - never: Side effects a press should not have. This says which version the reader is looking at; a strip that also navigated, submitted or fetched on it would be doing the thing its intent says it does not
+
+## Inside it
+
+- Takes only Tab.
+- At least 2, no ceiling — fewer is not this component and more is a different one.
+- 6 components are refused inside it; the list and the reasons are in the long document.
+- Renders 3 parts: root, list, indicator.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/tablist.md`.

package/.llm/digest/textarea.md

@@ -0,0 +1,78 @@
+<!-- GENERATED from textarea.contract.json. Do not edit. -->
+
+# TextArea
+
+A field for what a visitor wants to say in their own words — the message on a contact form, the 'tell us about your project' on an enquiry, the reason someone is applying to partner. …
+
+`import { TextArea } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A contact form asks what the reader actually wants — the message, the enquiry, the question
+- An application or partner form asks someone to describe what they do in their own words
+- Feedback, where the value of the answer is precisely the part no set of options would have caught
+
+## Something else, when
+
+- The value is one line — a name, an address, a company → **nothing in this system does this**
+- The reader is choosing from a set rather than composing → **nothing in this system does this**
+- The page is presenting text rather than collecting it → **nothing in this system does this**
+
+## Never
+
+- Opening a form with it. The reader has not decided to spend that much on the page yet, and a large empty box is what tells them how much is being asked
+- Sensitive data. A landing page has no account and no session, and a field big enough for a paragraph is big enough for something that belongs behind a sign-in
+- Anything the page will parse. If the answer has a shape, ask for its shape
+
+## Props
+
+- **size** `enum` · default "md" — Choosing the type and the inset, which is all size means here. It does not set a height — that comes from rows and from the text, so a size and a height are two separate things to decide
+  - `sm` — A note field in a dense form, where the box sits among other controls rather than being what the section is for. The height is unchanged — only the corner tightens
+  - `md` — The default, and nearly every form on a page — a contact form in a section, an enquiry beside the copy that prompted it
+  - `lg` — A form that is the reason the section exists, matched to the fields around it
+- **status** `enum` · default "none" — The outcome of a check, and whether one is running. …
+  - `none` — Nothing has been checked yet, or the value passed and saying so would be noise
+  - `error` — The value cannot be accepted and the user has to change it
+  - `warning` — The value is accepted but likely wrong — an address that failed a lookup, a name that does not match the account. The user may continue
+  - `success` — The value was checked against something and passed, and confirming that is worth the space — an available username, a verified code
+  - `pending` — A check is in flight and its outcome is not known yet — a description going through moderation, an address being looked up, a note being scanned before it is filed. …
+  - never: Decoration, or a permanent state. A status is the result of checking a value, so a field that always looks like a warning is telling the user nothing
+- **label** `string` · required — Always — an input without a label is unusable by screen readers. A noun phrase naming the value, in sentence case: "Email address", not "Enter your email address"
+  - never: The format or the rule, which belong in helperText — a label that explains has stopped naming. And it is a string rather than a node because what joins a label here is the component's own: the required and optional marks render inside it already, so markup passed in would be competing with parts that are declared
+- **labelTooltip** `string` · optional — A short explanation the label has no room for and the field does not always need on screen — why a description is asked for, what a reviewer will do with it, what counts as enough detail. …
+  - never: Anything the user needs before they start writing, which is helperText and belongs on screen. A tooltip is for the reader who stops to ask, and a prose field is exactly where somebody will not stop — they are already typing. …
+- **placeholder** `string` · optional — Showing an example of the value's shape, alongside helperText that states the rule
+  - never: The label, or the only place the format is stated. Placeholder text disappears the moment the user types and is not an accessible name
+- **helperText** `string` · optional — The user needs to know something before they type — a format, a limit, or why this is being asked
+  - never: Validation results, which belong in statusMessage and appear only once validation has run. Note what happens when both are set: any status other than none hides this and shows statusMessage in its place, so guidance and a verdict are never on screen together and the layout does not shift between them
+- **rows** `number` · default 3 — The height the field starts at, in lines, which is also the shortest it ever gets. Three says a sentence or two is expected; ten asks for an essay before anybody has read the label, so the number is a statement about the answer wanted
+- **maxRows** `number` · default 10 — Where the growing stops and the scrolling starts. Needed rather than optional: a field that grows without limit pushes whatever follows it off the screen, and a submit button nobody can reach is worse than a paragraph nobody can see all of. …
+  - never: A number below rows. The two are a floor and a ceiling, and the contract cannot say so — illegalCombinations compares a prop to a value, never a prop to a prop — so the field takes the larger of the two as its ceiling and opens at the height rows asked for
+- **maxLength** `number` · optional — The most the field will accept, which also brings the count that shows it. Give it where the limit is real — a message a system will truncate, a field a database will refuse — and leave it out where prose is simply prose
+  - never: A limit the page enforces later. A field that accepts 400 characters and a form that rejects them is a field that lied, and the count would have been counting toward the wrong number
+- **statusMessage** `string` · required — Saying what the status means: what is wrong and how to fix it, what to look at, or what was confirmed. …
+  - never: Restating the status. "Error" beside a red field says nothing the colour has not already said, and the colour is the part a colour-blind user may not get
+- **required** `boolean` · default false — The form cannot be submitted without this field, and the user should know before they reach the end
+  - never: Validation. It marks and announces the field as required and nothing more — whether the value is acceptable is still decided by the consumer and said through status and statusMessage, so the browser never raises a message of its own that this system cannot style
+- **requiredMark** `enum` · default "text" — Choosing how a required field says so. Decide which state is the exception first — mark the required fields or the optional ones, whichever are fewer — and only then how to mark it
+  - `text` — Short forms, public ones, and anywhere the label row has room. …
+  - `asterisk` — Long or dense forms, where the word repeats down the page and one legend can say it once instead — and forms whose labels are too tight for a translated word, since "Required" becomes "Erforderlich" and an asterisk is the same width in every language. …
+  - never: Varying within one form. Whichever is chosen is a decision for the whole form: a page marking some labels with a word and others with a glyph reads as two conventions and teaches neither
+- **optional** `boolean` · default false — Most fields on the form are required, so the few that are not are worth marking instead
+  - never: Marking every optional field on a form where most are optional — a marker on almost every label is noise, and the useful signal is whichever state is the exception
+
+## The type refuses
+
+- required=true with optional=true — A field is one or the other, and marking it both says nothing
+- status="error" with statusMessage=null — An error with no explanation leaves the user stuck
+- status="warning" with statusMessage=null — A warning with no explanation is a field the user cannot act on
+- status="pending" with statusMessage=null — A wait with nothing said is a field that has stopped responding. TextInput allows this and puts a spinner at the trailing edge of its box instead — a one-line field has room beside the value. …
+
+## Inside it
+
+- 2 components are refused inside it; the list and the reasons are in the long document.
+- Renders 13 parts: root, label-row, label, required-mark, optional-mark, label-tooltip, control, field, footer, helper, message, message-icon, counter.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/textarea.md`.