@deriv-com/dds-marketing 1.0.2 → 1.1.0

package/.llm/digest/background.md

@@ -2,7 +2,7 @@
 
 # Background
 
-A ground a section or a block sits on, painted with a pattern rather than a flat fill — a halftone, an aurora, a rule grid or rings. …
+A ground a section or a block sits on, painted with a pattern rather than a flat fill — a halftone, an aurora, a mesh, a rule grid or rings. …
 
 `import { Background } from '@deriv-com/dds-marketing'`
 
@@ -26,16 +26,17 @@ A ground a section or a block sits on, painted with a pattern rather than a flat
 
 ## Props
 
-- **tone** `enum` · default "dark" — Which ground the dots are drawn on. It sets the flat colour under the pattern, the dots' ink — coral on the dark and light grounds, white on the coral one — and the ink of what sits on it
-  - `dark` — The default, and the band the pattern was drawn for: coral dots glowing on color.bg.brand-strong, which is dark in both modes. …
+- **tone** `enum` · default "brand" — Which ground the dots are drawn on. It sets the flat colour under the pattern, the dots' ink — coral on the dark and light grounds, white on the coral one — and the ink of what sits on it
+  - `dark` — The band the halftone was drawn for: coral dots glowing on color.bg.brand-strong, which is dark in both modes. …
   - `light` — Coral dots on the page's own ground, for a light page that wants one moment of brand colour without a solid coral band. …
-  - `brand` — White dots on the coral brand fill, for a call to action standing on it. …
+  - `brand` — The default: the brand's own coral, the ground the mesh was made for and the one a call to action stands on. White dots on it for the halftone. …
   - never: Matching the page's colour mode. Dark is dark in both modes — a band that should invert with the theme is a plain section on color.bg.page, not this
-- **pattern** `enum` · default "halftone" — Which pattern is drawn. The halftone is the default and the one that moves most; the aurora drifts slowly; the grid and the rings are the quietest, their lines rising and spreading at a band's pace. …
-  - `halftone` — A grid of dots across the whole band that grow towards a soft glow and settle to a fine screen away from it. The default, and the one that moves most
-  - `aurora` — Broad soft pools of the brand's colour rising from the band's foot and drifting slowly into one another — light as colour rather than as points. Drawn by the stylesheet: no canvas. …
-  - `grid` — A fine rule grid of hairlines, fading in towards the band's foot — the grid PageHeader paints, offered for any band. Drawn by the stylesheet: no canvas. …
-  - `rings` — Hairline circles spreading out from the middle of the band's foot, fading in towards it, at size.rings.pitch. Drawn by the stylesheet: no canvas. …
+- **pattern** `enum` · default "halftone" — Which pattern is drawn. The halftone is the default and the one that moves most; the aurora drifts slowly; the mesh flows across the whole band; the grid and the rings are the quietest, their lines rising and spreading at a band's pace. …
+  - `halftone` — A grid of dots across the whole band that grow towards a soft glow and settle to a fine screen away from it, over a faint wash of their own ink. …
+  - `aurora` — Curtains of light rising from the band's foot: sheets of the brand's colour swaying and folding, with a ragged crest and fine rays running up through them — light falling through folds rather than pools of colour. …
+  - `mesh` — The whole band in the brand's reds, folded into one another like a liquid — the design system's own front page. …
+  - `grid` — Hairlines a pitch apart, size.rule-grid.pitch, rising from a soft bloom at the band's foot — the grid PageHeader paints, offered for any band, now lit: a brighter point where two lines cross, and every few lines a short dash of light running along it. …
+  - `rings` — Hairline circles spreading out from the middle of the band's foot at size.rings.pitch, out of a soft bloom there, with arcs of light travelling round each ring at its own pace and direction. …
   - never: Choosing per breakpoint. A pattern is the band's identity; one that changed between a phone and a desk would be two bands
 - **animated** `boolean` · default true — On by default: every pattern moves slowly at rest, whether or not anybody is pointing at it — the halftone's glow and the aurora's pools drift along the band's foot, the grid's rules rise and the rings spread outward, each over motion.duration.drift. …
   - never: Holding still for readers who asked for less motion. Every pattern already holds still for them, whatever this says; this is the page's choice, not the reader's
@@ -45,7 +46,7 @@ A ground a section or a block sits on, painted with a pattern rather than a flat
 ## Inside it
 
 - 1 component is refused inside it; the list and the reasons are in the long document.
-- Renders 3 parts: root, canvas, content.
+- Renders 5 parts: root, canvas, mesh, pool, content.
 
 ---
 

package/.llm/digest/bottomsheet.md

@@ -53,6 +53,8 @@ A panel that rises from the bottom edge to hold a single focused task on small s
   - never: Turning the gesture off. It draws the handle and nothing more — a pull is answered on a sheet with a close button and on one with neither, the same way a press outside it is. The name says that now; it used to be `dragToDismiss`, which claimed a power over the gesture it never had. …
 - **onOpenChange** `callback` · required — Always. The sheet does not close itself, so this is the only way out — write the first argument straight back to `open`. …
   - never: Doing the task. This fires when the sheet is being left, including when it is being left unanswered — commit from the actions in the footer, where the reader pressed something that says what it does
+- **closeLabel** `string` · optional — The accessible name of the close button. Without it the button is named "Close" and the title; pass it to translate that with the page
+  - never: Visible text. The button draws a glyph, and this is what a screen reader hears for it
 
 ## The type refuses
 

package/.llm/digest/comparisoncards.md

@@ -0,0 +1,51 @@
+<!-- GENERATED from comparisoncards.contract.json. Do not edit. -->
+
+# ComparisonCards
+
+A section that sets two to four options side by side under a heading, each a card of its own that repeats the same short rows — a label and this option's value — so a reader compares the options line by line: Spot against Futures, one account type against another. …
+
+`import { ComparisonCards } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- Two or three products, accounts or plans that answer the same few questions differently — what you hold, what it costs, how far you can lose — and the difference is the point of the section …
+- A "What you can trade" band: Spot against Futures, Options against Multipliers, each with its own rows and its own risk note
+
+## Something else, when
+
+- Five or more options, or rows that are the same for every option and read down a column → **ComparisonTable**
+- The options are features rather than alternatives — each a heading and a sentence, with nothing to compare row by row → **FeatureCards**
+- One option and the list of what it includes → **FeatureBullets**
+
+## Never
+
+- Live prices, spreads or any figure fetched from a feed. The values are the page's copy and stand still; a value that moves belongs in a component made to show one
+- More than four cards. A fifth is not drawn — five columns of label and value are too narrow to read, and a fifth under four is compared with nothing
+- A disclaimer for the whole set. A footnote belongs to the card it is written on; one true of every option goes in the page's own copy under the section
+
+## Props
+
+- **ground** `enum` · default "page" — Which of the page's three grounds this section paints, FeatureCards' axis and its reason: the page builds its rhythm from these, and the ink follows the ground in the same value
+  - `page` — The default, and the page's own white. The standard card is the recessed surface on it, the highlighted set's light card gray.50, so both have an edge
+  - `subtle` — The grey band, the reference design's ground for this section. …
+  - `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 the coral `color.bg.brand`, which belongs to the band that asks a reader to act
+- **variant** `enum` · default "standard" — Whether the set is compared as equals or with one option recommended
+  - `standard` — The default: options set side by side as equals — every card Card's own `surface`, which follows the theme, the recessed grey on a light page and a dark grey in dark mode, nothing pointing at one of them. …
+  - `highlighted` — One option is the one the page recommends: the card marked `recommended` is drawn coral and lifted off the page, every other card on the light card, gray.50 in both themes, quiet beside it. …
+  - never: Recommending more than one option. The first card marked `recommended` is the one; a recommendation made twice is no recommendation
+- **title** `string` · required — Always. What is being compared, in the fewest words that name it — "What you can trade", "Choose your account"
+  - never: A sentence, or the verdict. The line under it is for the sentence, and the cards make the case
+- **description** `string` · optional — A line saying what the options have in common, or what the reader is choosing between, when the title alone does not
+  - never: A disclaimer. A note that belongs to one option is that card's footnote; one that is true of all of them is the page's copy, not the heading's
+- **cards** `data` · required — Always. The options, in reading order — two to four, each with its `title`, a `description`, its `rows` and, where it has them, a `footnote` and an `action`. Every card is drawn the same card. …
+  - never: One option on its own — there is nothing for it to be compared with — or values the page cannot stand behind on the day it is read
+
+## 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, description, grid, item, body, intro, card-head, card-title, highlight, card-description, rows, row, row-label, row-value, footer, footnote, action.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/comparisoncards.md`.

package/.llm/digest/comparisontable.md

@@ -0,0 +1,53 @@
+<!-- GENERATED from comparisontable.contract.json. Do not edit. -->
+
+# ComparisonTable
+
+A comparison-table section for short, fixed column sets. It renders a rounded card with a light header row, horizontal dividers only, a bold first-column label, and two or three value columns. …
+
+`import { ComparisonTable } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- Comparing two or three options — platforms, plans, operating systems — on the same handful of features, where the reader reads across a row as often as down a column …
+- A product page's "Web terminal, desktop or mobile": the same few features, each option's answer in a word or a short line
+- Schedule-style rows, where a cell may hold a short list of lines — a market's trading sessions, the days a rate applies
+
+## Something else, when
+
+- Each option has more to say than a cell holds — a sentence of its own, a footnote, a way on → **ComparisonCards**
+- A large dataset — many instruments, many columns — that a reader searches, sorts or pages through → **DataTable**
+- One option and the list of what it includes → **FeatureBullets**
+
+## Never
+
+- More than three options. Only the first four columns are drawn — the labels and three values — because a fourth option in a card this wide is a column too narrow to read
+- Live prices, spreads or any figure fetched from a feed. The values are the page's copy and stand still
+- A paragraph in a cell. A cell is a word, a short line or a short list of them; anything longer belongs in a card of its own
+- Layout. A table means the rows and columns carry meaning, and a screen reader reads it out as rows and columns
+
+## Props
+
+- **ground** `enum` · default "page" — Which of the page's three grounds this section paints, and with it the table's card: the page builds its rhythm from these, and the ink follows the ground in the same value
+  - `page` — The default, and the page's own white. The card is the recessed surface on it, Card's own `surface`, so it has an edge
+  - `subtle` — The grey band, the reference design's ground for this section. The card is raised to color.bg.surface-card-raised on it — white in light — because its own fill is the band's grey. …
+  - `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 the coral `color.bg.brand`, which belongs to the band that asks a reader to act
+- **title** `string` · required — Always. What is being compared, in the fewest words that name it — "MT5 on every device", "Web terminal or desktop app?". It names the section and the table's scroll region both
+  - never: The verdict. The table makes the case; a heading that announces a winner leaves the reader nothing to compare
+- **description** `string` · optional — A line saying what the options have in common, or what the reader is choosing between, when the title alone does not
+  - never: A disclaimer. A note true of the whole table goes under it, in `footnote`
+- **columns** `data` · required — Always. …
+  - never: One option on its own — there is nothing for it to be compared with — or a fourth option, which is not drawn
+- **rows** `data` · required — Always. The rows, in reading order — each with its `label`, drawn as the row's header in the first column, and its `values` filed under the columns' keys. A value is one line, or a list of short lines that is drawn as a list. …
+  - never: Values the page cannot stand behind on the day it is read, or a row whose answers are the same for every option — a row that does not differ is not part of the comparison
+- **footnote** `string` · optional — A note true of the whole table — where the figures come from, what an asterisk means — under the card in small type
+  - never: Anything a reader needs to make the comparison. A footnote is read last if at all; a difference that matters is a row
+
+## Inside it
+
+- 6 components are refused inside it; the list and the reasons are in the long document.
+- Renders 9 parts: root, inner, header, title, description, body, row-header, cell-list, footnote.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/comparisontable.md`.

package/.llm/digest/ctabanner.md

@@ -33,10 +33,10 @@ A full-bleed coral band carrying one short promotion and the action it asks for
   - never: A paragraph. A banner is read at a glance, on the way down a page; copy a reader has to work through is copy they scroll past
 - **actions** `node` · optional — The one action the message asks for, or two at most. …
   - never: A third action, or a primary Button: coral on the coral ground is a button nobody can see
-- **background** `enum` · optional — The band is the page's one standout moment and wants more than a flat fill. Leave it out and the band is its flat ground, as it always was
-  - `halftone` — A halftone drawn behind the band's content: white dots on the band's own coral, following the pointer over the band. …
-  - `grid` — A fine rule grid behind the band's content: white hairlines on the coral, fading in towards the foot, brightening in a soft circle around the pointer. …
-  - never: More than one band on a page. The pattern is what makes a band the one a reader remembers, and two of them make neither
+- **background** `enum` · default "grid" — Whether the band carries its grid. It does unless asked not to: the banner is the page's standout moment, and the grid is what makes it one
+  - `grid` — The default: a fine rule grid behind the band's content — light coral hairlines rising out of a deeper red at the band's foot, moving slowly at rest and brightening around the pointer. …
+  - `plain` — The flat coral and nothing on it, asked for by name: a page that already spends its one pattern on another band, or a banner set among busy content where the grid would be texture fighting texture
+  - never: More than one patterned band on a page — pass plain to the others. The pattern is what makes a band the one a reader remembers, and two of them make neither
 
 ## Inside it
 

package/.llm/digest/ctabannerslider.md

@@ -37,6 +37,10 @@ CtaBanner's layout with a slider in it: the same full-bleed coral band, rotating
 - **background** `enum` · optional — The band is the page's one standout promotion and wants more than a flat fill. Leave it out and the band is its flat coral, as it always was
   - `grid` — A fine rule grid behind the slides: white hairlines on the coral, fading in towards the foot, brightening in a soft circle around the pointer. …
   - never: More than one patterned band on a page. The pattern is what makes a band the one a reader remembers, and two of them make neither
+- **roleDescription** `string` · default "carousel" — What a screen reader calls the set while it rotates — announced in place of a region, as the word for this kind of thing. …
+- **slideRoleDescription** `string` · default "slide" — What a screen reader calls each item while the set rotates, for the reason roleDescription exists. Translate it with the page
+- **positionLabel** `callback` · optional — The accessible name of each item while the set rotates, given its place in the set counting from one — so a reader hears where they are. …
+  - never: Visible text. It names the item to assistive technology and is never drawn
 
 ## Inside it
 

package/.llm/digest/datatable.md

@@ -0,0 +1,65 @@
+<!-- GENERATED from datatable.contract.json. Do not edit. -->
+
+# DataTable
+
+A full-width data-table section for instrument and market-style listings. …
+
+`import { DataTable } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- Trading instruments and their specifications — contract size, minimum size, volume limits — on a market page
+- Trading conditions a reader looks up rather than reads through: spreads, leverage, margin, swaps
+- An MT5 or Deriv X specification page, where the set runs to dozens of rows and a reader is hunting for the one they trade
+
+## Something else, when
+
+- Three or four plans or accounts compared feature by feature, where every row is read rather than searched → **ComparisonTable**
+- A handful of rows with no need to search or page — a fee schedule of four lines → **Table**
+
+## Never
+
+- Prices that move while the page is open. The values are written once and searched as written; a live quote here is a stale one the moment it is drawn
+- Sorting or filtering that needs the server. The search runs over the rows the page handed in and nothing else, so a set too large to send whole is a set this cannot search
+- A single record's fields. A row header and one value beside it is a description list wearing a table's markup
+
+## Props
+
+- **ground** `enum` · default "page" — Which of the page's three grounds this section paints, FaqAccordion's axis and its reason: a band that wants to be seen as a band takes one of the other two, and the page decides the rhythm. …
+  - `page` — The default, and the page's own white. The frame's rule is what sets the table off
+  - `subtle` — The grey band — the reference design's slate section. The frame lifts off it as a raised card. …
+  - `strong` — `color.bg.brand-strong`, the dark band, for a listing a reader should arrive at. The heading and the small print turn white and muted-white; the frame stays the light surface it is everywhere else
+  - never: Marking importance. Every section on a page painted a ground is a page with no emphasis left
+- **title** `string` · required — Always. What the rows are, in the fewest words — "Forex trading conditions", "Synthetic indices". It names the section and the table both
+  - never: A sentence about the data. The line under it is the description's; what a column means is the column's name
+- **description** `string` · optional — A line under the heading where the heading alone does not say which account or platform the conditions are for — "Conditions on Deriv MT5 Financial accounts."
+  - never: The small print. A note on how current the figures are belongs under the table, in `footnote`, where it is read after the numbers it qualifies
+- **columns** `data` · required — Always. The columns in reading order, each a `key` the rows hold its value under and the `label` drawn over it. …
+  - never: A column only some rows have a value for. Every row answers every column, which is the promise a table makes
+- **rows** `data` · required — Always. The records, in the order they are listed — each a value per column key, as the page would print it. Every value is searched as written. An empty list draws the empty line in place of the table
+  - never: Values the source does not show today. Spreads and swaps are claims in the company's name; keep them in step with where they come from, and say how current they are in `footnote`
+- **pageSize** `number` · default 10 — How many rows a page holds. Ten, the reference's, unless the rows are few enough that a second page would hold two or three of them — then raise it so the set is one page and the pages are not drawn at all
+  - never: Showing everything. A page of a hundred rows is a page a reader scrolls past the search to get through; the search is how a long set is meant to be read
+- **footnote** `string` · optional — A line of small print under the table — how current the figures are, what they are subject to. "Information is based on the most recent available trading data and may not represent today's conditions."
+  - never: A risk warning the page is obliged to show. Small print under a table is read by the few who reach it; a required warning belongs where every reader meets it
+- **searchLabel** `string` · default "Search the table" — The search's name — SearchInput's `label`, never drawn and always announced. Say what is searched where the default is vague for the page: "Search instruments". Translate it with the page
+  - never: An example query. That is the placeholder's
+- **searchPlaceholder** `string` · default "Search" — What the empty field shows, the reference's "Search" — or an example of a query, "EUR/USD". It disappears as the reader types and is never the field's name. Translate it with the page
+- **clearLabel** `string` · default "Clear search" — The name of the button that empties the search, which is a cross and says nothing on its own. Translate it with the page
+- **emptyText** `string` · default "No results match your search." — The line drawn in place of the table when nothing matches the query. Translate it with the page; say what to try where the page can — "No markets match. Try a symbol, like EURUSD."
+  - never: Explaining an empty set the page sent. A listing with no rows is a page that should not have drawn the section
+- **resultCount** `callback` · optional — The count across from the search, given the first and last row on this page and how many matched — counting from one, and all three 0 when nothing matched. It is also what a screen reader is told, politely, as the query or the page changes. …
+  - never: Anything but the count. It is announced every time the reader types, so a sentence here is a sentence heard on every keystroke
+- **paginationLabel** `string` · default "Table pages" — The name of the pages' navigation landmark, Pagination's `label`. Its own name rather than Pagination's default, so a reader listing landmarks can tell this table's pages from anything else on the page that is paginated. …
+- **previousLabel** `string` · default "Previous page" — The name of the step back through the pages, which is a glyph. Translate it with the page, and keep it parallel to nextLabel
+- **nextLabel** `string` · default "Next page" — The name of the step on through the pages, for the reason previousLabel exists
+- **morePagesLabel** `string` · default "More pages" — The name of the break between two runs of page numbers, which opens a menu of the pages it stands for. Only drawn when the pages run long. Translate it with the page
+
+## Inside it
+
+- 6 components are refused inside it; the list and the reasons are in the long document.
+- Renders 13 parts: root, inner, header, title, description, content, frame, toolbar, search, status, empty, pager, footnote.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/datatable.md`.

package/.llm/digest/downloadbanner.md

@@ -0,0 +1,65 @@
+<!-- GENERATED from downloadbanner.contract.json. Do not edit. -->
+
+# DownloadBanner
+
+A section promoting the app's downloads: a card holding a heading and the stores' own badges, each a link to the product in that store. …
+
+`import { DownloadBanner } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- Promoting an app across the stores and platforms it ships on — App Store, Google Play, AppGallery, a desktop download, the web
+- A trading platform's page, near its end, once the product has been explained and the next thing a reader wants is to get it
+
+## Something else, when
+
+- One download, or the web alone → **Button**
+- A promotion that has to argue for the download in a headline and a sentence → **CtaBanner**
+
+## Never
+
+- Two download sections on one page — the second repeats the first's destinations and makes neither the place to go
+- A badge for a platform the product does not ship on, or a QR code that reaches somewhere other than the badges do
+
+## Props
+
+- **ground** `enum` · default "page" — Which of the page's grounds the section paints, and with it the card's fill: the recessed surface on the page, the raised white on the grey band, and the strong card on the dark band — TestimonialRow's three and the reference design's light, light-2 and dark. …
+  - `page` — The default, and the page's own white. The card is the recessed gray that sets it off — the reference design's light-2
+  - `subtle` — The grey band, with the card white on it — the reference design's light. Painted as the band's tint laid over the page's own ground, so it is the same grey whatever is behind the section
+  - `strong` — `color.bg.brand-strong`, the dark band, with the card at color.bg.surface-card-strong and white words on it — the reference design's dark. …
+  - never: Marking importance. Every section on a page painted a ground is a page with no emphasis left
+- **variant** `enum` · default "standard" — How much the banner asks for. The standard card sits with the page; the featured card is the page's moment for the app, and one per page
+  - `standard` — The default: the card in the ground's own fill, quiet beside the sections around it — the reference design's banner
+  - `featured` — The page promoting an app: the brand's coral card laid out as a split — the app's name, the heading, a line and the badges with the QR code beside them on one side, the app's own image on the other, rising out of the card's top edge — with a Background pattern inside it, the aurora unless `pattern` says otherwise. …
+  - never: More than one featured banner on a page, or one beside another patterned band. The pattern is what makes the band the one a reader remembers
+- **pattern** `enum` · optional — Which pattern the featured card draws. Absent, the aurora
+  - `aurora` — Curtains of light rising from the card's foot, white and deep red on the coral, swaying slowly. The quieter of the two, and what a featured card draws when no pattern is named
+  - `mesh` — Soft pools of the brand's reds run together across the whole card — the design system's own front page. The richer of the two
+  - never: A standard card. It has no pattern to choose, and the type refuses one
+- **media** `node` · optional — The featured card only: the app itself — a screenshot of it in a phone, the page's own image. …
+  - never: A picture that is not the app. A banner promoting an app shows the app. On a standard card it is not drawn
+- **eyebrow** `string` · optional — The featured card only: the app's name, or what kind of app it is, small above the heading — "Deriv GO", "Mobile app"
+  - never: A second heading. The heading says what the reader gets; this names the app. On a standard card it is not drawn
+- **title** `string` · required — Always. Where the app can be had, in a few words — "Trade on the go", "Available on". The section's heading at every width: under the scan line beside the code from the fold, and alone over the badges on a phone
+  - never: The instruction to scan. That is the QR code's `label`, and it goes with the code where the code goes
+- **description** `string` · optional — A line under the heading saying what the app gives a reader — "Trade on the go with the same account, markets and tools." One sentence
+  - never: Small print. Versions and availability belong in the `disclaimer`
+- **badges** `data` · required — Always. The stores and downloads the app is in, in the order a reader should meet them — mobile stores first, then desktop, then the web. …
+  - never: A platform the product does not ship on, or a badge whose link does not reach the product in that store
+- **qr** `data` · optional — A QR code reaching the same app the badges do, so a reader at a desktop can take it to their phone. The page's image, with the words it is read as and the line telling the reader to scan it. …
+  - never: A destination the badges do not reach. A code is the one link a reader cannot read before following it
+- **disclaimer** `string` · optional — One line of small print under the heading — which versions the desktop app runs on, or where the app is not offered
+  - never: A sentence of promotion. Anything a reader is meant to be persuaded by is not small print
+
+## The type refuses
+
+- variant="standard" with pattern="*" — A standard card draws no pattern, so a pattern named on it is a choice that does nothing. Make the card featured, or leave the pattern out
+
+## Inside it
+
+- 7 components are refused inside it; the list and the reasons are in the long document.
+- Renders 17 parts: root, inner, card, lead, qr-tile, qr, text, qr-label, eyebrow, title, description, disclaimer, badges, badge, badge-link, mark, media.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/downloadbanner.md`.

package/.llm/digest/featurecards.md

@@ -8,7 +8,7 @@ A section that opens with a heading and sets a grid of cards under it — the sh
 
 ## Reach for it when
 
-- Three or four things a product does, each a heading and a sentence, read side by side and compared at a glance
+- Three or four things a product does, each a card with a heading, a line and a picture under them, read side by side and compared at a glance — the first choice for a set of three. …
 - A set of destinations — markets, platforms, tools — each a card a reader presses to go there
 - One feature that deserves the whole row in a card of its own — the words beside a large picture, carded on the section's ground
 

package/.llm/digest/featurecardscarousel.md

@@ -0,0 +1,54 @@
+<!-- GENERATED from featurecardscarousel.contract.json. Do not edit. -->
+
+# FeatureCardsCarousel
+
+A feature band that sets its cards in a row a reader moves along rather than a grid: a heading and a line over a row of the page's own cards, the next one's edge showing past the last in view, with dots saying where the reader is and two arrows stepping it a card at a time. …
+
+`import { FeatureCardsCarousel } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A "what you get" band of five or six authored cards, each a benefit with a line and a picture, too many for one row of a grid, where one card in focus with a peek of the next is the point. …
+- A platform or product page whose feature cards are too many for one row of a grid and too equal to be a sequence
+
+## Something else, when
+
+- Three or four cards — the set a grid shows in one row → **FeatureCards**
+- The cards are read in order, one leading to the next → **FeatureScroll**
+- Two or three promotions on the brand's coral, one at a time → **CtaBannerSlider**
+
+## Never
+
+- Live prices, market data or anything on a feed. A card is authored copy that holds still while a reader reads it
+- A static set flattened into a carousel to save height. Fewer than three cards is a FeatureCards grid; a carousel of two is a grid with a hidden half
+- Reviews or quotes. A rated review is TestimonialRow's and a chosen quote TestimonialSlider's, each with the attribution this does not draw
+
+## Props
+
+- **ground** `enum` · default "page" — Which of the page's three grounds this section paints. A marketing page is white, and a band that wants to be seen as a band takes one of the other two — so this is how a page builds its rhythm: white, white, grey, white, dark. …
+  - `page` — The default, and the page's own white. A section that has nothing to separate itself from what is above it — most of them — and the ground a reader is already on
+  - `subtle` — A quiet step off the page, for a band that wants to read as its own section without changing the page's voice. The one to reach for first when two sections need telling apart. …
+  - `strong` — `color.bg.brand-strong`, the dark band. It stops the page rather than dividing it, so it is for a section a reader should arrive at — and one per page is usually one more than enough. …
+  - never: Marking importance. Every section on a page painted dark is a page with no emphasis left, and a reader stops reading the grounds as meaning anything. Alternating for its own sake is the same mistake more slowly. And never the brand's own coral, `color.bg.brand`, which is not offered here. …
+- **title** `string` · required — Always. What the cards are, in the fewest words that name them — "What you get", "Built for every trader"
+  - never: A sentence. The line under it is for the sentence
+- **description** `string` · optional — A line saying what the set has in common, when the title alone does not
+  - never: A paragraph, or a summary of every card. The cards say what they are; this only says why they are together
+- **autoplay** `boolean` · default false — Whether the row moves on to the next stop on its own, holding each for motion.duration.dwell and returning to the start after the last. Off by default, so a row nobody configured stays still. …
+  - never: A row whose cards carry more than a reader takes in during motion.duration.dwell. Several cards are in view at once, so a moving row is moving cards out from under a reader who may be reading the second one
+- **label** `string` · default "Features" — 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, as in TestimonialRow. …
+- **previousLabel** `string` · default "Previous cards" — 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 cards" — The accessible name of the arrow stepping the row on, for the reason previousLabel exists
+- **controlsLabel** `string` · default "Positions" — The name the dots are announced by, as a group inside the band. Its own name rather than the row's, so a screen reader moving into the dots hears what they are. Translate it with the page, like label
+- **stopLabel** `string` · default "Position" — The word each dot is announced by, before its number — "Position 2". A dot is a place the row stops, not a card: at full width the last few cards share the last stop, so there are fewer dots than cards. …
+
+## Inside it
+
+- Takes only Card, CardButton.
+- At least 1, at most 8 — fewer is not this component and more is a different one.
+- 7 components are refused inside it; the list and the reasons are in the long document.
+- Renders 11 parts: root, inner, header, title, description, carousel, track, item, footer, nav, nav-slot.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/featurecardscarousel.md`.

package/.llm/digest/featuresplit.md

@@ -17,6 +17,7 @@ A section putting one claim, a line explaining it and a way onward beside a sing
 - The point is several things the reader gets, each one line long → **FeatureBullets**
 - There are three or four points and each needs its own picture → **FeatureCards**
 - The section opens the page → **ProductHero**
+- The picture is the section's weight, wide or tall enough to stand under the words rather than beside them → **FeatureStack**
 
 ## Never
 

package/.llm/digest/featurestack.md

@@ -0,0 +1,48 @@
+<!-- GENERATED from featurestack.contract.json. Do not edit. -->
+
+# FeatureStack
+
+A section that leads with a statement and ends on a picture: a heading, a line under it where the heading needs one, a link on to more where the page has one, and a large illustration — a globe, a map, a product shot — standing on the band's foot. …
+
+`import { FeatureStack } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A statement with a picture that carries it — a global reach shown on a globe, a platform shown on a device — where the picture is the section's weight and the words introduce it …
+- Closing a page or a stretch of one on an image, with a way on for the reader who wants more
+
+## Something else, when
+
+- The picture belongs beside the words, the two read side by side → **FeatureSplit**
+- The section is a set of figures read as a set → **Stats**
+- The section asks the reader to do one thing, now → **CtaBanner**
+
+## Never
+
+- A picture with words in it. The words are the heading and the line; a picture saying them again cannot be read by a screen reader, translated or selected
+- A photograph a reader needs to see whole. The picture stands on the band's foot at its own proportions up to size.feature-stack.media, and is a scene rather than a document
+
+## Props
+
+- **ground** `enum` · default "page" — Which of the page's three grounds this section paints, FeatureCards' axis and its reason: the page builds its rhythm from these, and the ink follows the ground in the same value. …
+  - `page` — The default, and the page's own white
+  - `subtle` — The grey band, for a section that needs setting apart from the one above it. Painted as the band's tint laid over the page's own ground, so it is the same grey whatever is behind the section
+  - `strong` — `color.bg.brand-strong`, the dark band, and the reference design's ground for this layout. The heading and the line under it turn white; an illustration made for a dark ground sits best here
+  - never: Marking importance. Every section on a page painted a ground is a page with no emphasis left. And never the coral `color.bg.brand`, which belongs to the band that asks a reader to act
+- **title** `string` · required — Always. The statement the section makes, in a few words — "Trusted in 190+ countries", "One account, every device"
+  - never: A sentence of explanation. That is the line under it
+- **description** `string` · optional — A short line under the heading that says what the statement means for the reader, or what the picture shows
+  - never: A paragraph. One line or two; anything longer is the page's own copy
+- **link** `node` · optional — A way on for the reader who wants more — "Learn more", "See where we operate". A standalone Link, under the line, the way FeatureCards takes one
+  - never: A button. The section is a statement and a picture; a Button would make it a banner, and CtaBanner is that
+- **image** `data` · required — Always. The picture the section ends on — a globe, a map, a product shot — which the block draws at its own proportions: a square picture stays square, a tall one stays tall, held to the screen's limit. …
+  - never: Artwork with words in it, or a chart. What a reader has to read belongs in the heading and the line, where a screen reader and a translation reach it
+
+## Inside it
+
+- 6 components are refused inside it; the list and the reasons are in the long document.
+- Renders 8 parts: root, inner, header, title, description, link, media, image.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/featurestack.md`.

package/.llm/digest/illustrationscene.md

@@ -20,7 +20,7 @@ A photograph with an IllustrationCard laid over it — the product shown in the
 
 - A section's content. Like the card it holds, the scene is a picture of the product, and what a section says belongs in its own blocks
 - More than one card over one photograph. A second card is a second picture competing for the same eye; two scenes side by side say two things clearly
-- A photograph whose subject sits where the card goes. The card covers the middle of the frame, or one side of it with `placement`; choose or crop the photograph so the person or the object stays clear of it
+- A photograph whose subject sits where the card goes. The card covers the middle of the frame, or its foot with `placement`; choose or crop the photograph so the person or the object stays clear of it
 
 ## Props
 
@@ -31,8 +31,7 @@ A photograph with an IllustrationCard laid over it — the product shown in the
   - never: Fitting a particular photograph. The shape is a decision about the layout; the photograph is chosen or cropped for it
 - **placement** `enum` · default "center" — Where the card sits over the photograph, so the subject of the photograph stays clear of it
   - `center` — The default: the card in the middle of the frame. For a photograph whose subject frames the middle — a person looking down at what the card shows
-  - `start` — The card towards the start edge, for a photograph whose subject is at the end
-  - `end` — The card towards the end edge, for a photograph whose subject is at the start
+  - `bottom` — The card centred along the foot of the frame, held off it by the card's own inset — for a photograph whose subject fills the top: a face, a person reaching up, a skyline
   - never: Anything but keeping the photograph's subject clear. The card's size is fixed by the shape; placement moves it and nothing else
 - **src** `string` · required — Always. The photograph the scene is set in
   - never: A data URI holding a photograph. A scene's photograph is the heaviest thing on its page and belongs in a file the browser can cache

package/.llm/digest/imagebanner.md

@@ -0,0 +1,64 @@
+<!-- GENERATED from imagebanner.contract.json. Do not edit. -->
+
+# ImageBanner
+
+A dark card in the middle of a page, pairing a headline and a line under it with a photograph — beside it or behind it, with one action. …
+
+`import { ImageBanner } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- Driving a single mid-page or end-of-page action with a photograph to carry it — a community, a hub, a platform
+- A dark, editorial break between lighter sections
+
+## Something else, when
+
+- The section opens the page → **ProductHero**
+- The point wants the page's own light ground rather than a dark card → **FeatureSplit**
+- There is no photograph, only a headline and an action → **CtaBanner**
+- The section says what a programme or a product comes with, as a list of features → **FeatureBullets**
+
+## Never
+
+- The page's opening band. A dark card at the top of a page competes with the navigation above it and the hero it should be
+- More than one action. The card asks for one thing, and a second button beside it is a second demand on a card already set apart from the page
+- A picture carrying words a reader needs. The cover photograph sits under a scrim and the text, and the split's is cropped to fill its half
+
+## Props
+
+- **ground** `enum` · default "page" — Which of the page's three grounds the band around the card paints. The card is dark whatever this says — that is what the block is — so this is about the rhythm of the page, white, grey or dark, and never about the card. …
+  - `page` — The default, and the page's own white, with the dark card set into it. Most of the time: the card is already the break
+  - `subtle` — The grey band, for a card that follows a white section the page wants told apart from this one. …
+  - `strong` — `color.bg.brand-strong`, the dark band, with the card a step lighter at color.bg.surface-card-strong so it still reads as a card. …
+  - never: Making the card darker. The card is dark on every ground; painting the band dark too spends the page's one dark band on a section that was already one
+- **variant** `enum` · default "split" — What the photograph does: beside the words, or behind them. Both carry one action — two of the reference design's layouts
+  - `split` — The default. The words in one half and the photograph filling the other, edge to edge, with one action under the words. …
+  - `cover` — The photograph fills the whole card, with the words over it behind a scrim that darkens the side they are on and leaves the photograph clear on the other. …
+  - never: Choosing by how busy the page looks. Cover hides part of the photograph under the scrim; it is a decision about the photograph, not decoration
+- **mediaPosition** `enum` · default "end" — Which side the photograph takes, and in cover, which side it shows clear on with the words on the other. Alternating it with the section above is the page's decision, not this one's
+  - `end` — The default. The words lead and the photograph follows, which is the order the card argues in
+  - `start` — The photograph leads — the second of two cards on a page, or a photograph whose subject faces the words. A split card puts it above the words on a phone as well, as the reference design does
+  - never: Aligning the words to the far edge. They start where their column starts on either side, because a heading beside content starts with it
+- **title** `string` · required — Always. The one thing the card says, in under eight words — "Join our global community"
+  - never: A sentence. The description under it carries the argument
+- **headingLevel** `enum` · default "h2" — Matching the outline of the page around the card, so the headline keeps its place in the hierarchy rather than skipping a level — CtaBanner's and ResourceBanner's prop. The level only: the size stays font.h2
+  - `h2` — The default: the card is a section of the page, under the page's own h1
+  - `h3` — The card sits inside a section that already carries the h2 it belongs to
+  - never: Making the headline bigger or smaller. The card decides the size; this decides only where the headline sits in the page's outline
+- **description** `string` · optional — The line under the headline saying what it means for the reader, in one or two sentences
+  - never: A paragraph. Past about two hundred characters the words run longer than the photograph beside them, which is the reference design's limit as well
+- **action** `node` · optional — The one thing the card asks for. The card is dark in both themes, so a Button here takes tone="inverse": the primary is the coral fill and it is the card's one primary. On a phone it fills the width of the card
+  - never: A second action. The card asks for one thing
+- **media** `node` · required — Always. The page's photograph, through AspectRatio or as an image — people or product. Split and cover crop it to fill the space they give it. Alt text is the page's to give, empty where the photograph is decoration
+  - never: Artwork with words in it. The cover photograph sits under a scrim and the text, and the split crops to fill
+- **parallax** `boolean` · default false — The photograph drifts against the scroll as the card passes through the view, by motion.distance.drift over the whole pass, so it reads as further away than the card — the reference design's ParallaxBanner, which this replaces. …
+  - never: Holding still for a reader who asked for less motion — it already holds still for them, and in a browser that cannot drive it from the scroll
+
+## Inside it
+
+- 10 components are refused inside it; the list and the reasons are in the long document.
+- Renders 8 parts: root, inner, card, content, title, description, action, media.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/imagebanner.md`.

package/.llm/digest/navbaritem.md

@@ -38,6 +38,7 @@ One place the site has, in the bar across the top of it. An anchor with a target
   - never: Decoration on every item. A glyph beside each of five destinations costs the width the destinations need and tells a reader nothing they were not already reading
 - **external** `boolean` · default false — The destination leaves the site. It draws the mark, opens in a new context, and the implementation extends the accessible name to say so in words — a glyph alone is a warning only sighted readers get
   - never: A different area of the same site. A subdomain the reader experiences as one place is not a change of context, and marking it as one teaches them to ignore the mark where it matters
+- **externalLabel** `string` · default "(opens in a new tab)" — What a screen reader hears after an external destination's name, since the arrow that shows it to everyone else is hidden. Translate it with the page
 
 ## The type refuses
 

package/.llm/digest/pageheader.md

@@ -38,7 +38,8 @@ The band that opens a company or a legal page: the page's name, a line saying wh
   - never: A paragraph. It is held to a readable measure and set at body size; past a couple of sentences a reader scrolls rather than reads, and the actions go under the fold
 - **actions** `node` · optional — The one or two things the page wants a reader to do. Composed by the page rather than described to this component, so a call to action is the same Button here as anywhere else on the site
   - never: A row of destinations. Three or more controls under a title is a menu, and a reader who has to choose between five things chooses none
-- **background** `enum` · optional — The band is the page's one standout moment and wants more than a flat fill. Leave it out and the band is its flat ground, as it always was
+- **background** `enum` · default "grid" — The band is the page's one standout moment and wants more than a flat fill. Leave it out and the band draws the lit grid
+  - `grid` — The default: the band's rule grid, lit — hairlines a pitch apart rising from a soft bloom at the band's foot, a brighter point where two lines cross and a short dash of light running along every few, brightening around the pointer. …
   - `halftone` — A halftone drawn behind the band's content: coral dots blending to white at the glow's heart, on the band's own dark ground, following the pointer over the band. …
   - never: More than one band on a page. The pattern is what makes a band the one a reader remembers, and two of them make neither
 

package/.llm/digest/paginationdots.md

@@ -32,7 +32,9 @@ A row of marks, one per position in a short sequence — the slides of a slider,
   - never: A sequence the reader has to work through — a walkthrough, a form in steps. Moving it for them takes away the one thing they came to control
 - **paused** `boolean` · default false — Whatever holds the row wants the rotation held for now — while the pointer is over the slide or focus is inside it, so a reader is never moved on mid-sentence. It lets go when this goes false
 - **label** `string` · default "Slides" — The name the row is announced by, as a group. Name what the positions are: 'Slides', 'Steps'. Translate it with the page
-- **itemLabel** `string` · default "Slide" — The word each mark is named by, before its number — 'Slide 2'. Translate it with the page; a language that puts the number first is the reason a sentence template would be better, and the reason this is not yet one
+- **itemLabel** `string` · default "Slide" — The word each mark is named by, before its number — 'Slide 2'. Translate it with the page; a language that puts the number first, or writes it in its own digits, passes positionLabel instead
+- **positionLabel** `callback` · optional — Each mark's accessible name as a sentence, given its position counting from one and how many there are — for a language whose order is not the word then the number, or whose digits are not these. Wins over itemLabel where both are given
+  - never: Visible text. It names the marks to assistive technology and is never drawn
 
 ## Inside it