@deriv-com/dds-marketing 0.2.0 → 1.0.1

package/.llm/digest/landinghero.md

@@ -0,0 +1,53 @@
+<!-- GENERATED from landinghero.contract.json. Do not edit. -->
+
+# LandingHero
+
+The band that opens a main landing page: the one thing the page is about, said once, at the top, over a ground dark enough that nothing above it competes. One of three opening bands, and the widest. …
+
+`import { LandingHero } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A main landing page needs its opening band — the front page, or a campaign page under it
+- The claim has room to range to the reading edge with a subject beside it, which is what the landing tier is for
+- The steps between an eyebrow, a title, a description and the actions under them have to be the same on every landing page
+
+## Something else, when
+
+- The page is a product or a market page → **ProductHero**
+- The page is a company or a legal one — contact, about, terms → **PageHeader**
+- The band closes the page rather than opening it → **Footer**
+
+## Never
+
+- A product, market, company or legal page. Each tier has its own band, and the reason they are separate components is so that this cannot be overridden
+- A second band further down the page. This is the page's opening and its `h1`; a page with two is a page that has told a reader twice what it is about
+- The navigation above it or the trail beneath that. The bar is a fixed layer the page mounts once and every band scrolls under; the breadcrumb is the page saying where it sits. Both are the page's and neither is the band's
+
+## Props
+
+- **eyebrow** `string` · optional — A word or two placing the page before its title names it — a product family, a market, a campaign
+  - never: A second sentence. This is the line a reader takes in without reading; at the length of a clause it is a description in the wrong place and at the wrong weight
+- **title** `string` · required — Always. The one thing the page is about, in the fewest words that still say it. It is the page's leading heading and the band's accessible name
+  - never: A sentence with a full stop. A title that reads as prose is a description that has been set at eighty pixels
+- **headingLevel** `enum` · default "h1" — Which heading element the title renders as. The default is right for the band a page opens with, which is the only place this belongs. …
+  - `h1` — The default, and correct whenever the hero opens the page — which is what a hero is for
+  - `h2` — The rare page that already carries its `h1` elsewhere, and would otherwise have two
+  - never: Making the title look smaller. The level is what a screen reader builds its outline from, and nothing about it reaches the type
+- **description** `string` · optional — The sentence under the title that says what the claim above it means, for the reader who is not yet convinced by the claim alone
+  - 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
+- **media** `node` · optional — The band's visual — the subject standing beside the claim, cropped by the band's own inline edge rather than floating clear of it
+  - never: The background. A photograph filling the band is `backgroundImage`; this sits in front of it and is placed against the band's edge
+- **backgroundImage** `string` · optional — A photograph filling the whole band. It is shown as it is — nothing is painted over it, so choose one already dark enough that the title reads on it
+  - never: A flat colour, or a bright photograph. The band already paints its ground, and nothing here darkens an image on the page's behalf — a pale one leaves the claim unreadable
+
+## Inside it
+
+- 7 components are refused inside it; the list and the reasons are in the long document.
+- Renders 9 parts: root, inner, content, text, eyebrow, title, description, actions, media.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/landinghero.md`.

package/.llm/digest/logocolumns.md

@@ -0,0 +1,55 @@
+<!-- GENERATED from logocolumns.contract.json. Do not edit. -->
+
+# LogoColumns
+
+A section that backs one claim with the names behind it: a heading, a line, an optional disclaimer and a way onward, beside a wall of logo tiles in two columns that run in opposite directions as the reader scrolls past — one rising, one falling — fading out at the wall's top and bottom edge so the set reads as longer than the space it is shown in. …
+
+`import { LogoColumns } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- Showing the partners, integrations or payment methods behind a claim — the names a reader recognises, as evidence for what the words say
+- Eight or more logos, enough that each column reads as running on past both edges of the wall
+
+## Something else, when
+
+- A handful of logos a reader should be able to count and compare → **Grid**
+- One picture beside the claim → **FeatureSplit**
+- Each logo needs to be pressed — a partner directory → **FeatureCards**
+
+## Never
+
+- Logos the brand has not been given the right to show. A partner's mark is a claim made in the partner's name
+- A few logos. Three repeated to fill a wall read as three repeated; a short set belongs in a still grid
+- Anything a reader has to press or read in full. Every tile moves with the scroll and is clipped at the wall's edge
+
+## Props
+
+- **ground** `enum` · default "strong" — Which of the page's grounds the section paints, and with it the tiles' fill: the recessed surface on the page, the raised white on the grey band, and the strong card on the dark band. …
+  - `page` — The page's own white, with tiles at the recessed gray. For full-colour logos drawn for a light ground
+  - `subtle` — The grey band, with white tiles on it. For full-colour logos, where the section needs setting apart from the ones around it. …
+  - `strong` — The default. `color.bg.brand-strong`, the dark band, with white words and tiles at color.bg.surface-card-strong — gray.900 in both themes, so the wall is a set of tiles a step lighter than the band. …
+  - 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. …
+- **mediaPosition** `enum` · default "start" — Which side the wall takes at full width. Never a promise about a phone: below the fold the words are always first, because a reader on a phone came for them
+  - `start` — The default, the reference design's: the wall at the start, the claim beside it at the end
+  - `end` — The second of two on a page, or after a FeatureSplit whose picture is at the start, so the two do not read as one column
+  - never: Moving the wall on a phone. There is one column there and the words lead it
+- **title** `string` · required — Always. The one claim the logos back, in the fewest words that say it — "Trusted by leading platforms worldwide"
+  - never: A list of the names. The logos are the names; the heading says what they prove
+- **description** `string` · optional — The line under the heading: what the logos mean for the reader — which payment methods they can use, which platforms they can trade on
+  - never: A paragraph. Past about two hundred characters the text column runs longer than the wall beside it and the two halves stop lining up, which is the one thing a split has to get right. The reference design caps it at exactly that
+- **disclaimer** `string` · optional — Small print the claim needs — "*Availability varies by region." Under the description, quieter than it
+  - never: A second description. Anything a reader should take in belongs in the description; this is the line a regulator asks for
+- **link** `node` · optional — The way onward — a standalone Link, "View all partners", usually. Under the words, never on the wall: the tiles move
+  - never: The page's main call to action. This is a way onward from a supporting point, and a primary button here competes with the one the page actually wants pressed
+- **logos** `data` · required — Always. The logos, in the order the wall deals them into its two columns — the first to the first column, the second to the second, and so on. Eight or more, so each column runs on past both edges. …
+  - never: A set split by hand into two. The wall deals them; a page that wants a logo in a particular column orders the list
+
+## Inside it
+
+- 8 components are refused inside it; the list and the reasons are in the long document.
+- Renders 12 parts: root, inner, split, content, title, description, disclaimer, link, media, column, logo, logo-image.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/logocolumns.md`.

package/.llm/digest/logorows.md

@@ -0,0 +1,48 @@
+<!-- GENERATED from logorows.contract.json. Do not edit. -->
+
+# LogoRows
+
+A section that backs one claim with the names behind it, stacked: a heading, a line and a way onward, centred, over two rows of logo tiles across the band's full width that slide sideways in opposite directions as the reader scrolls past — fading out at both of their ends, so the set reads as longer than the band. …
+
+`import { LogoRows } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- Showing the partners, integrations or payment methods behind a claim under it, where the words lead and the logos follow
+- Eight or more logos, enough that each of the two rows reads as running on past both edges of the band
+
+## Something else, when
+
+- The logos should stand beside the claim, as a wall that is half the section → **LogoColumns**
+- A handful of logos a reader should be able to count and compare → **Grid**
+
+## Never
+
+- Logos the brand has not been given the right to show. A partner's mark is a claim made in the partner's name
+- A few logos. Three repeated to fill a row read as three repeated; a short set belongs in a still grid
+- Anything a reader has to press or read in full. Every tile moves with the scroll and is clipped at the band's edge
+
+## Props
+
+- **ground** `enum` · default "strong" — Which of the page's grounds the section paints, and with it the tiles' fill: the recessed surface on the page, the raised white on the grey band, and the strong card on the dark band. …
+  - `page` — The page's own white, with tiles at the recessed gray. For full-colour logos drawn for a light ground
+  - `subtle` — The grey band, with white tiles on it. For full-colour logos, where the section needs setting apart from the ones around it. …
+  - `strong` — The default. `color.bg.brand-strong`, the dark band, with white words and tiles at color.bg.surface-card-strong — gray.900 in both themes, so the row is a set of tiles a step lighter than the band. …
+  - 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. The one claim the logos back, in the fewest words that say it — "Trusted by leading platforms worldwide"
+  - never: A list of the names. The logos are the names; the heading says what they prove
+- **description** `string` · optional — The line under the heading: what the logos mean for the reader — which payment methods they can use, which platforms they can trade on
+  - never: A paragraph. The heading and this line are read on the way to the logos; copy a reader has to work through is copy they scroll past
+- **link** `node` · optional — The way onward — a standalone Link, "View all partners", usually. Under the line, never on the row: the tiles move
+  - never: A button. The section's claim is made by the logos; a call to action over them is a second, louder one
+- **logos** `data` · required — Always. The logos, in the order the section deals them into its two rows — the first to the first row, the second to the second, and so on. Eight or more, so each row runs on past both edges of the band. …
+  - never: A set split or repeated by hand. The section deals the rows and repeats them; a page passes each logo once, ordering the list to place one in a particular row
+
+## Inside it
+
+- 7 components are refused inside it; the list and the reasons are in the long document.
+- Renders 10 parts: root, inner, header, title, description, link, rail, track, logo, logo-image.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/logorows.md`.

package/.llm/digest/navbar.md

@@ -38,17 +38,32 @@ The bar across the top of a marketing page, and three regions: the mark that say
   - 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, a conversion action, 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
-- **compactAction** `node` · optional — The one thing a reader should still be able to do once the bar has collapsed and everything else has gone into the panel — a sign-up, usually. Drawn beside the control that opens the panel, and only at the widths where that control is drawn
+- **utilities** `node` · optional — The bar's trailing end has the site's actions in it: one Button, which is primary, or two — one primary and one secondary, the conversion beside the way back in. …
+  - never: More than two Buttons, a lone Button that is not primary, or a pair that is not one primary and one secondary — the bar's actions are a conversion and its alternative, and a third pill or a second of either rank makes the reader choose between things the bar should have ranked. A switcher is not a Button and does not count against the two. …
+- **compactAction** `node` · optional — The one thing a reader should still be able to do once the bar has collapsed and everything else has gone into the panel — a sign-up, usually. Drawn beside the control that opens the panel, and only at the widths where that control is drawn. …
   - never: The whole of utilities. A phone has room for one action beside a mark and a menu button, and a bar handed two of them either wraps or pushes the mark off its own edge — the rest belong in utilities, which the panel lays out down its foot where there is room for all of them
 - **preferences** `node` · optional — A switcher that belongs with the destinations rather than with the conversion — a language picker, a theme toggle. It is drawn inside the pill, beside the sections, at every scroll position. …
   - never: A conversion action. Those belong in utilities, at the trailing end of the bar where a reader looks for them, and drawing one inside the pill would put the thing the page most wants pressed in among the places it goes
+- **showThemeToggle** `boolean` · default false — The site offers light and dark and a reader can choose between them. …
+  - never: A site that ships one theme. A toggle that changes nothing is a control that lies about the page
+- **theme** `enum` · optional — Whenever showThemeToggle is — the theme in force. The page owns it, because what it switches is the page's data-theme rather than anything inside the bar; the bar only draws the toggle and reports presses
+  - `light` — The page is drawn in its light theme, so the toggle offers dark
+  - `dark` — The page is drawn in its dark theme, so the toggle offers light
+- **onThemeChange** `callback` · optional — Whenever showThemeToggle is. Called with the theme a press moves to; the page sets its data-theme from it and hands the new value back as theme
+  - never: Persisting a preference the page has not decided to keep. Remembering the choice across visits is the site's call, made where it sets data-theme
+- **themeToggleLabel** `string` · optional — Whenever showThemeToggle is — the toggle draws a glyph and no words, and this is the only name it has. …
+  - never: Visible text. Nothing is drawn beside the glyph; a toggle with words is a NavbarSwitcher
 - **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
 
+## The type refuses
+
+- showThemeToggle=true with theme=null — A toggle that does not know which theme is in force cannot say which one a press moves to, and would draw the wrong glyph half the time
+- showThemeToggle=true with onThemeChange=null — A toggle with nothing to call answers the pointer and changes nothing — the one failure the affordance cannot disclose
+- showThemeToggle=true with themeToggleLabel=null — The toggle draws a glyph and no words, so without this it ships unnamed and a screen reader announces a button and nothing else
+
 ## Inside it
 
 - Takes only NavbarItem, NavbarMenu.

package/.llm/digest/pageheader.md

@@ -0,0 +1,49 @@
+<!-- GENERATED from pageheader.contract.json. Do not edit. -->
+
+# PageHeader
+
+The band that opens a company or a legal page: the page's name, a line saying what it is, and nothing else. The third of three opening bands and the only one that is not a hero. …
+
+`import { PageHeader } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A company, legal or support page needs its opening band — contact, about, terms, a regulatory notice
+- The page is read rather than acted on, so its opening should name it and then get out of the way
+- The steps between an eyebrow, a title and a description have to be the same on every such page
+
+## Something else, when
+
+- The page is the front page, or a campaign page under it → **LandingHero**
+- The page is a product or a market page → **ProductHero**
+- The band closes the page rather than opening it → **Footer**
+
+## Never
+
+- A landing or product page. Each tier has its own band, and the reason they are separate components is so that this cannot be overridden
+- Carrying a photograph or a product shot. This tier has no visual slot, which is a decision rather than an omission — a page of terms has nothing to show
+- The navigation above it or the trail beneath that. Both are the page's and neither is the band's
+
+## Props
+
+- **eyebrow** `string` · optional — A word or two placing the page before its title names it — a product family, a market, a campaign
+  - never: A second sentence. This is the line a reader takes in without reading; at the length of a clause it is a description in the wrong place and at the wrong weight
+- **title** `string` · required — Always. The one thing the page is about, in the fewest words that still say it. It is the page's leading heading and the band's accessible name
+  - never: A sentence with a full stop. A title that reads as prose is a description that has been set at eighty pixels
+- **headingLevel** `enum` · default "h1" — Which heading element the title renders as. The default is right for the band a page opens with, which is the only place this belongs. …
+  - `h1` — The default, and correct whenever the hero opens the page — which is what a hero is for
+  - `h2` — The rare page that already carries its `h1` elsewhere, and would otherwise have two
+  - never: Making the title look smaller. The level is what a screen reader builds its outline from, and nothing about it reaches the type
+- **description** `string` · optional — The sentence under the title that says what the claim above it means, for the reader who is not yet convinced by the claim alone
+  - 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
+
+## Inside it
+
+- 9 components are refused inside it; the list and the reasons are in the long document.
+- Renders 8 parts: root, inner, content, text, eyebrow, title, description, actions.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/pageheader.md`.

package/.llm/digest/pagination.md

@@ -11,11 +11,10 @@ The control that moves a reader through a set too large to show at once. …
 - An index or archive has been split across pages and the reader needs to move through it — a blog listing, a news archive, a resource library. …
 - The reader needs to reach a particular page rather than step towards it — page fourteen of forty, in one press. …
 - The pages have addresses a search engine should follow. …
-- How much is left matters as much as where the reader stands. …
-- The reader is walking a short visual sequence and what they want to know is where they are in it rather than what that position is called — a carousel of cards, a testimonial slider, a walkthrough. …
 
 ## Something else, when
 
+- A short sequence the reader moves through — a slider's slides, a carousel of cards, a walkthrough → **PaginationDots**
 - The reader is moving between views of one page rather than through one long set → **TabList**
 - More results are appended to the view as the reader reaches the end, rather than one page replacing another → **Button**
 - The reader is hunting for one row among thousands rather than walking the set → **SearchInput**
@@ -24,32 +23,22 @@ The control that moves a reader through a set too large to show at once. …
 
 - A set that fits on one page. There is nothing to move between, and a control offering to move is read as a promise that there is more — so the reader presses it, nothing happens, and they are left unsure whether the control or the results are at fault
 - Placing above the content it governs. The reader decides whether to move on only after seeing what is here, so a control above the results asks the question before they hold the answer — and on a long page it puts the control off screen at exactly the moment they want it
-- Ten or more positions under the dots variant. A dot carries no number, so a reader working out where they are is counting marks; past a handful the marks are too small and too many to count, and the row degrades into saying only "somewhere in the middle"
 - Standing in for a filter. Handing a reader four hundred pages is not giving them access to the set, it is giving them the shape of it — the answer is a narrower query, and pagination is what works once the set is small enough to walk
 
 ## Props
 
 - **variant** `enum` · default "pages"
   - `pages` — An index or archive whose pages have addresses of their own — a blog listing, a news archive, a resource library. …
-  - `count` — A long set where the reader's real question is how much is left rather than which page they are on — "page 3" says nothing until you know whether there are four pages or four hundred. …
   - `compact` — A place with no room for a row of numbers — a card footer, a sidebar, a column at a phone's width. Position and the two steps, and nothing else. …
-  - `none` — The two steps and nothing between them, for a place where position is either obvious or beside the point — a lightbox moving through images, a set of two. …
-  - `dots` — A carousel of cards, a testimonial slider, a walkthrough — a short visual sequence where the reader cares where they are rather than what that position is called. …
-  - never: Choosing by the width available rather than by the reader's question. The five answer different questions, and which one is being asked comes from the content above the control, not the room beneath it. …
-- **showSteps** `boolean` · default true — Whether the two step controls are drawn, under the dots variant. True wherever this component is the way through the set, which is nearly all of them. …
-  - never: Any variant but dots, where it is inert rather than obeyed — the same as siblingCount under count, or totalItems under pages. Dots is the only middle holding targets of its own, so it is the only row that still works once the arrows go. …
+  - never: Choosing by the width available rather than by the reader's question. The two answer different questions, and which one is being asked comes from the content above the control, not the room beneath it. …
 - **page** `number` · default 1 — Always — it is which page is on screen, counting from one, and the component renders around it rather than holding it. …
   - never: Half a controlled component. Passing this without updating it when onPageChange fires gives a row that cannot move — the reader presses, the number stays, and the control reads as broken. …
 - **totalPages** `number` · default 1 — How many pages the set has been divided into. It decides where the row ends, when the ellipsis appears, and when next goes disabled. …
-  - never: A count of items. That is totalItems, and passing one for the other gives a reader four hundred page numbers for forty pages of results. Nor for an unknown total: a number invented so the component would render is a promise about how much is left, and the reader has no way to tell it from a real one
-- **onPageChange** `callback` · optional — What the page does when the reader asks for another one, counting from one. Required wherever the route to a page is a press rather than a destination: the dots variant always, and the steps under any variant given no pageHref. …
+  - never: A count of items. Pages, not results: passing the number of results gives a reader four hundred page numbers for forty pages of them. Nor for an unknown total: a number invented so the component would render is a promise about how much is left, and the reader has no way to tell it from a real one
+- **onPageChange** `callback` · optional — What the page does when the reader asks for another one, counting from one. Required wherever the route to a page is a press rather than a destination: the numbered targets and the steps under any variant given no pageHref. …
   - never: Navigating by hand when pageHref would do it. A press handler that sets window.location is an anchor with its advantages removed — no cmd-click, no destination in the status bar, nothing for a crawler to follow
 - **pageHref** `callback` · optional — The address of a page, given the page number. Passing it makes every route to a page an anchor: the numbered targets, and both steps. …
-  - never: A carousel or any sequence whose positions have no address. A slide is not a place, so a link to one is a link to nowhere and the dots variant ignores this entirely. …
-- **totalItems** `number` · optional — How many results there are altogether, where that is known. …
-  - never: A count of what is on this page. It is the whole set, which is what makes the range in front of it mean anything. Nor an estimate presented as exact: a reader shown a total treats it as one, and a number that moves as they page through the set reads as the results changing underneath them
-- **pageSize** `number` · optional — How many items each page holds, which is what lets the count variant work out the range on screen from the page number alone. Pass it alongside totalItems; on its own it has nothing to be a fraction of. …
-  - never: Changing how many items are fetched. This component displays and nothing else — the fetch is the consumer's, and a page size passed here while the query still asks for a different number produces a readout that describes a page nobody is looking at
+  - never: A carousel or any sequence whose positions have no address. Nor for smuggling state into a query string the page does not actually route on — a URL that renders the same page whatever it says is worse than a button, which at least does not promise otherwise
 - **siblingCount** `number` · default 1 — How many numbered pages sit around the current one before the row breaks, under the pages variant. …
   - never: Widening the row until nothing is hidden. Past a few siblings the row is longer than the eye scans, and a reader who needs page 200 of 400 is not served by seeing 199 either. What widening removes is also a control now rather than a mark: the break it takes away was the menu that reached those pages in one press
 - **label** `string` · default "Pagination" — Always, and the default is almost always right. It names the landmark rather than the content — a screen reader user listing what is on a page hears this, and a nav with no name is one they cannot tell from the page's other navigation. …
@@ -64,7 +53,7 @@ The control that moves a reader through a set too large to show at once. …
 ## Inside it
 
 - 4 components are refused inside it; the list and the reasons are in the long document.
-- Renders 8 parts: root, list, summary, dot, dot-mark, step, page, break.
+- Renders 6 parts: root, list, summary, step, page, break.
 
 ---
 

package/.llm/digest/paginationdots.md

@@ -0,0 +1,43 @@
+<!-- GENERATED from paginationdots.contract.json. Do not edit. -->
+
+# PaginationDots
+
+A row of marks, one per position in a short sequence — the slides of a slider, the steps of a walkthrough — with the one the reader is on drawn as a longer, solid pill and the rest as small translucent dots. …
+
+`import { PaginationDots } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- Showing where the reader is in a short sequence they move through — a slider's slides, a carousel of cards, the steps of a walkthrough — and letting them jump to any of it …
+
+## Something else, when
+
+- A set divided into pages of results → **Pagination**
+
+## Never
+
+- More than about ten positions — a dot carries no number, so past a handful the reader is counting marks too small and too many to count
+- The only way through a sequence without thinking about it: the marks are 8px-wide targets, so a row that stands alone — as CtaBannerSlider's does, beside a swipe — is the hardest control a pointer has to hit on the page. Give the holder previous and next steps where the sequence is one a reader works through
+
+## Props
+
+- **variant** `enum` · default "default" — Whether the marks belong to their ground or to the brand
+  - `default` — The marks take the ink of whatever the row stands on — white on a coral or dark band, near-black on the page — so the row belongs to its ground. The usual choice, and the only one on a band
+  - `accent` — On the bare page, where the row should carry the brand: the marks are color.fg.brand-accent, the current pill solid coral and the rest the same coral held back. …
+  - never: accent on a coral or brand band, where coral marks on the coral ground disappear, or on a tinted surface, which takes the coral below the 3:1 a mark is owed
+- **page** `number` · default 1 — Which position the reader is on, counted from 1. The consumer holds it, because the slide or step in view is theirs too and the two are one fact
+- **totalPages** `number` · default 1 — How many positions there are, which is how many marks the row draws
+- **onPageChange** `callback` · optional — Whenever the marks should move anything — called with the position pressed. The row does not move itself; the consumer sets page from it
+- **autoplay** `boolean` · default false — The sequence should move on its own — a slider of promotions, a hero that rotates. The row advances page through onPageChange every motion.duration.dwell, wrapping from the last position to the first. …
+  - 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
+
+## Inside it
+
+- Renders 3 parts: root, dot, mark.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/paginationdots.md`.

package/.llm/digest/producthero.md

@@ -0,0 +1,53 @@
+<!-- GENERATED from producthero.contract.json. Do not edit. -->
+
+# ProductHero
+
+The band that opens a product or a market page: the one thing the page is about, centred, over a ground dark enough that nothing above it competes. The second of three opening bands. …
+
+`import { ProductHero } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A product or a market page needs its opening band — a platform, an instrument, an asset class
+- The thing the page is about is worth showing whole, under the claim rather than beside it
+- The steps between an eyebrow, a title, a description and the actions under them have to be the same on every product page
+
+## Something else, when
+
+- The page is the front page, or a campaign page under it → **LandingHero**
+- The page is a company or a legal one — contact, about, terms → **PageHeader**
+- The band closes the page rather than opening it → **Footer**
+
+## Never
+
+- A landing, company or legal page. Each tier has its own band, and the reason they are separate components is so that this cannot be overridden
+- A second band further down the page. This is the page's opening and its `h1`
+- The navigation above it or the trail beneath that. Both are the page's and neither is the band's
+
+## Props
+
+- **eyebrow** `string` · optional — A word or two placing the page before its title names it — a product family, a market, a campaign
+  - never: A second sentence. This is the line a reader takes in without reading; at the length of a clause it is a description in the wrong place and at the wrong weight
+- **title** `string` · required — Always. The one thing the page is about, in the fewest words that still say it. It is the page's leading heading and the band's accessible name
+  - never: A sentence with a full stop. A title that reads as prose is a description that has been set at eighty pixels
+- **headingLevel** `enum` · default "h1" — Which heading element the title renders as. The default is right for the band a page opens with, which is the only place this belongs. …
+  - `h1` — The default, and correct whenever the hero opens the page — which is what a hero is for
+  - `h2` — The rare page that already carries its `h1` elsewhere, and would otherwise have two
+  - never: Making the title look smaller. The level is what a screen reader builds its outline from, and nothing about it reaches the type
+- **description** `string` · optional — The sentence under the title that says what the claim above it means, for the reader who is not yet convinced by the claim alone
+  - 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
+- **media** `node` · optional — The product itself, under the claim and the actions — in the column, capped to the measure, and whole
+  - never: The background. A photograph filling the band is `backgroundImage`; this sits in front of it, in the column, and is never cropped
+- **backgroundImage** `string` · optional — A photograph filling the whole band. It is shown as it is — nothing is painted over it, so choose one already dark enough that the title reads on it
+  - never: A flat colour, or a bright photograph. The band already paints its ground, and nothing here darkens an image on the page's behalf — a pale one leaves the claim unreadable
+
+## Inside it
+
+- 8 components are refused inside it; the list and the reasons are in the long document.
+- Renders 9 parts: root, inner, content, text, eyebrow, title, description, actions, media.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/producthero.md`.

package/.llm/digest/selectchip.md

@@ -11,6 +11,7 @@ A chip that opens a list of answers and keeps the one chosen, so a filter row sh
 - A row narrows an index by one value out of a set, and has to keep showing which value that is
 - The set is short enough to scan rather than search — a region, a language, a sort order
 - The row has no space for a form field: nothing above the control, nothing beneath it, only the answer
+- A view setting that always has an answer — a sort order, a language — where every answer is a way of looking rather than a way of leaving out
 
 ## Something else, when
 
@@ -36,7 +37,11 @@ A chip that opens a list of answers and keeps the one chosen, so a filter row sh
   - `start` — The list's leading edge lines up with the chip's. The default, because a reader reads from that edge and the answers begin where the chip's own words began
   - `end` — Its trailing edge lines up instead, for a chip near the end of a row where a list opening the other way would run off the screen
   - never: Nudging the list into place a few pixels. It names an edge to line up, not an offset
-- **label** `string` · required — Always, and required on that account — it names what is being chosen, and it is what the chip shows until something has been. Short enough to read at a glance in a row of other chips
+- **emphasis** `enum` · default "highlight" — Whether the chip fills once an answer is chosen. Ask one question: does choosing an answer hide anything? If it does, it is a filter and the chip is highlight. If it only changes how the page is shown, it is a setting and the chip is quiet
+  - `highlight` — A filter. Choosing an answer hides part of the list, like a category, a topic or a product line. The chip fills to show a filter is on
+  - `quiet` — A setting that only changes how the page is shown, like a sort order, a language or a layout. Nothing is hidden, so the chip stays plain and reads "Label: Value". …
+  - never: Making one chip in a row look more important than the others. Decide by what the chip does to the page, not by how much it matters. Having a starting value does not make a chip quiet either: a status filter that starts on Open still hides the closed ones, so it stays highlight
+- **label** `string` · required — Always, and required on that account — it names what is being chosen, and it is what the chip shows until something has been, and what a quiet chip goes on showing ahead of the answer. …
   - never: Describing what pressing it does. The chip names the narrowing, and what happens is that a list opens
 - **value** `string` · optional — The page owns the answer — it arrives from a URL, is shared with something else on screen, or has to survive the chip unmounting. Passed, this is the answer, and onChange is the only way it moves
   - never: Seeding a first answer and then leaving it alone. That is defaultValue, and passing this instead gives a chip that cannot be changed

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`.

package/.llm/digest/testimonialslider.md

@@ -0,0 +1,51 @@
+<!-- GENERATED from testimonialslider.contract.json. Do not edit. -->
+
+# TestimonialSlider
+
+A section that lets the people who use the product say what it did for them: a heading over one quote at a time, in a card, with the name of who said it. …
+
+`import { TestimonialSlider } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- Two to five real quotes from partners or customers, each a few sentences, read one at a time
+- A page that has made its claims and wants someone other than the brand to back them
+
+## Something else, when
+
+- A single quote → **FeatureSplit**
+- Ratings and review counts from a review site → **TestimonialRow**
+
+## Never
+
+- Quotes nobody said. A testimonial is a claim made in someone else's name, and an invented one is a false claim — use real, attributable words or none
+- More than a few sentences per quote. A quote is read while it is in view; one that needs scrolling inside the card is never finished
+
+## 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 — the reference design's slate testimonial — and the strong card on the dark band, gray.900 in both themes, so the card has an edge on each. …
+  - `page` — The default, and the page's own white. The card is the recessed gray that sets it off
+  - `subtle` — The grey band, the reference design's ground for this section. The card turns 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
+- **title** `string` · required — Always. Whose words these are, in a few — "What our partners say", "What our customers say"
+  - never: A quote. The quotes are the content; the heading says whose they are
+- **quotes** `data` · required — Always. The quotes, in the order they rotate — two to five, each a few sentences, each with the name of who said it. An empty list draws nothing; one quote is drawn still, with no dots
+  - never: A quote that was not said. Every one is attributed to a person or a role, and the page is answerable for each
+- **imageStart** `string` · optional — A decorative picture, laid over the card's top start corner — a photograph, a product screen, any small piece of art, usually a PNG — as a path or a URL. …
+  - never: Anything a reader needs: a logo that says who the quotes are from, words, the face of the person quoted. It is hidden from assistive technology so it is art or it is missing
+- **imageEnd** `string` · optional — A decorative picture at the card's bottom end corner, the pair to imageStart: drawn the same way behind the card's bottom edge, and drifting up as the other drifts down, so the two read as depth. …
+  - never: The same as imageStart's: art only
+- **autoplay** `boolean` · default false — Whether it advances on its own, holding each slide for motion.duration.dwell. Off by default, so a slider nobody configured stays still. …
+  - never: A banner whose slides carry more than a reader can take in during motion.duration.dwell — turn it off rather than shorten the copy to fit the timer
+- **controlsLabel** `string` · default "Testimonials" — The name the dots are announced by. Its own name rather than the section's, so a screen reader moving into the dots hears what they are. Translate it with the page
+- **slideLabel** `string` · default "Slide" — The word each dot is announced by, before its number — 'Slide 2'. Translate it with the page, as controlsLabel is; a page that translates only the group's name still has every dot announced in English
+
+## Inside it
+
+- 6 components are refused inside it; the list and the reasons are in the long document.
+- Renders 15 parts: root, inner, title, carousel, track, item, image-start, image-end, image, quote, author, avatar, name, detail, controls.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/testimonialslider.md`.