@deriv-com/dds-marketing 0.1.0 → 1.0.0

package/.llm/digest/subdomainnavbar.md

@@ -0,0 +1,54 @@
+<!-- GENERATED from subdomainnavbar.contract.json. Do not edit. -->
+
+# SubdomainNavbar
+
+The bar across the top of a subdomain — a documentation site, a playground, a product surface that lives beside the marketing site rather than inside it. …
+
+`import { SubdomainNavbar } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A subdomain needs its top-level navigation — the mark, the places that subdomain has, and whatever sits at the far end
+- The bar should sit still. …
+- The destinations belong at the far end with what a reader reaches for, rather than centred over the page: the mark holds one edge, everything a reader does holds the other, and the middle is left empty on purpose …
+
+## Something else, when
+
+- The page is the marketing site itself → **Navbar**
+- The items are versions of one thing rather than places the subdomain has → **TabList**
+
+## Never
+
+- A second bar further down the page. There is one landmark of this kind per page, and a reader who meets two has been told twice where they are and once too often which is authoritative
+- A toolbar. Controls that act on what is below them belong in the page, not in a landmark that announces itself as the way around the site
+- The marketing site's own bar. The two are different components because they behave differently, and using this one there loses the thing that bar is for
+
+## Props
+
+- **tone** `enum` · default "default"
+  - `default` — The subdomain's chrome is light, which is the page's decision rather than this bar's
+  - `inverse` — The subdomain's chrome is dark, which is the usual case for a tool and is why nearly every page using this bar will pass it. …
+- **label** `string` · required — Always — it names the navigation landmark, and a page with an unnamed one tells a screen-reader user there is navigation here without saying which navigation. …
+  - never: A visible heading. Nothing draws this. A bar needs no title, and a page that wants one has a heading of its own below the bar
+- **menuLabel** `string` · required — Always — the trigger is an icon-only button and this is the only name it has, at the width where it is the only way through the site. …
+  - never: A tooltip or visible text. The trigger draws a glyph and nothing else; this is the name a screen reader reads
+- **closeLabel** `string` · required — Always — it names the panel's close button, which is the only visible way out of a surface covering the whole page. 'Close' is enough; the panel it closes is the only thing open
+  - never: The trigger's name. They are two controls in two places — the trigger is in the bar underneath the panel, and a reader cannot reach it while the panel is open
+- **brand** `node` · optional — Effectively always on a real site — the mark, and usually an anchor to the home page wrapped around it. It is drawn twice: in the bar, and again in the panel's header, where it is the only thing left saying whose site this is
+  - never: A heading for the page. This is the site's mark, not the page's title, and a reader who meets the page's `<h1>` in the bar has been told the name of somewhere they already are
+- **utilities** `node` · optional — The bar's trailing end has something in it — a language switcher, a theme switcher, what the subdomain wants pressed, or some combination. …
+  - never: Destinations. Anything that goes to a section of the site belongs in the children, where the navigation landmark announces it as one. The trailing end is for what a reader reaches for, not for the places the bar ran out of room for
+- **menuOpen** `boolean` · optional — The page is holding whether the panel is open, because something else depends on it — a route change that should close it, a surface of its own that must not open at the same time. …
+  - never: Half of a controlled bar. A menuOpen passed without an onMenuOpenChange to move it is a panel that cannot be closed from its own close button — a trap around the whole page rather than a bar with a bug
+- **onMenuOpenChange** `callback` · optional — Whenever menuOpen is — together they are how a page holds the panel. It is called with the state being moved to, by the trigger, by the close button and by Escape, so a page listening to it hears every way the panel can change
+  - never: Navigation. This says whether the panel is showing; a page that also routed on it would close the panel by leaving, and a reader pressing a destination inside it would fire both
+
+## Inside it
+
+- Takes only NavbarItem, NavbarMenu.
+- 11 components are refused inside it; the list and the reasons are in the long document.
+- Renders 7 parts: root, inner, brand, nav, utilities, trigger, panel-host.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/subdomainnavbar.md`.

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/testimonialrow.md

@@ -0,0 +1,51 @@
+<!-- GENERATED from testimonialrow.contract.json. Do not edit. -->
+
+# TestimonialRow
+
+A section that lets a review service's numbers back the page: a heading with the overall rating under it — and a way to where the reviews were collected — over a row of rated reviews the reader moves along, each a short review under its star rating with the reviewer's name, and two arrows under the row that step it a card at a time. …
+
+`import { TestimonialRow } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- Five to ten short, rated reviews collected by a review service, where seeing several at once is the point and the overall score is worth stating
+- A page that has made its claims and wants customers' own ratings to back them — a homepage's "What our customers say"
+
+## Something else, when
+
+- Two to five quotes the page chose, from partners or customers, each a few sentences and read one at a time → **TestimonialSlider**
+- A single review → **FeatureSplit**
+
+## Never
+
+- Reviews nobody wrote, or a rating nobody gave. The stars and the summary are a score in a review service's name — keep each rating and the overall score in step with the source, and link to it, or leave them out
+- A review service's own marks. Its logo, wordmark and brand colour belong to its own widget, under its own rules; this draws each card's stars in the page's accent and names the service in words
+- Long reviews. A card is read on the way along the row; one that needs more than a sentence or two is a review the reader skips
+
+## Props
+
+- **ground** `enum` · default "page" — Which of the page's grounds the section paints, and with it the cards' fill: the recessed surface on the page, the raised white on the grey band — the reference design's slate band — and the strong card on the dark band, gray.900 in both themes. …
+  - `page` — The default, and the page's own white. The cards are the recessed gray that sets them off
+  - `subtle` — The grey band, the reference design's ground for this section. The cards turn white on it. …
+  - `strong` — `color.bg.brand-strong`, the dark band, for a section a reader should arrive at. …
+  - never: Marking importance. Every section on a page painted a ground is a page with no emphasis left. And never a dark card on the dark band: a few sentences of white on dark gray is a paragraph a reader works through rather than a quote they take in
+- **title** `string` · required — Always. Whose reviews these are, in a few words — "What our customers say"
+  - never: A review, or the score. The reviews are the content and the summary states the score; the heading says whose they are
+- **reviews** `data` · required — Always. The reviews, in the order they run along the row — five to ten of a sentence or two, each with the reviewer's name, its `rating` and, where there is one, the `href` of the review itself. An empty list draws nothing
+  - never: A review that was not written by the person named, or a rating changed from the one they gave
+- **summary** `data` · optional — The overall rating, in the page's own words under the heading — "Rated 4.5 out of 5 on our review site" — as a standalone Link to where the reviews were collected when it has an `href`. …
+  - never: A number the source does not show today
+- **ratingLabel** `callback` · optional — The accessible name of a card's stars, given its rating as drawn — rounded to the nearest half, so what is heard is what is seen. The stars are drawn rather than written, so this is what a screen reader hears for them. …
+  - never: Visible text. It names the stars to assistive technology and is never drawn
+- **label** `string` · default "Reviews" — The name the row is announced by. The row is a scrolling region a keyboard has to be able to reach, so it carries a tab stop and a name of its own — Scroller's rule. …
+- **previousLabel** `string` · default "Previous reviews" — The accessible name of the arrow stepping the row back. A glyph announces nothing, so this is the whole of the control's name. Translate it with the page, and keep it parallel to nextLabel
+- **nextLabel** `string` · default "Next reviews" — The accessible name of the arrow stepping the row on, for the reason previousLabel exists
+
+## Inside it
+
+- 7 components are refused inside it; the list and the reasons are in the long document.
+- Renders 20 parts: root, inner, header, title, summary, carousel, track, review-link, item, rating, star, star-track, star-fill, quote, author, name, detail, footer, nav, nav-slot.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/testimonialrow.md`.