@deriv-com/dds-marketing 0.1.0 → 1.0.0

package/.llm/digest/navbarmenu.md

@@ -0,0 +1,54 @@
+<!-- GENERATED from navbarmenu.contract.json. Do not edit. -->
+
+# NavbarMenu
+
+A destination in the bar that opens rather than goes: a named trigger, and a wide panel beneath it holding the section's own destinations in columns, usually with something promotional beside them. …
+
+`import { NavbarMenu } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A section of the site has enough inside it that naming the section is not enough — Trading holding markets, platforms and tools, rather than one page called Trading …
+- The destinations under a section are worth grouping, and the groups are worth heading
+- The section has something the site wants shown alongside its links: a promotion, a feature, a piece of art
+
+## Something else, when
+
+- The destination is a single place → **NavbarItem**
+- What opens is a single column of choices rather than a section of the site → **DropdownMenu**
+
+## Never
+
+- A control. Nothing here submits, filters or changes what the page is showing other than by revealing its own panel
+- A destination of its own. The trigger is a button and goes nowhere — a section that is also a page needs its own NavbarItem inside the panel, where a reader can actually reach it
+- The narrow width. There is no room for columns on a phone, and the bar collapses into NavbarPanel rather than opening this
+- Content a reader has to work through. A panel is scanned in a moment with a pointer hovering over it; a paragraph in one is a paragraph nobody finishes
+
+## Props
+
+- **presentation** `enum` · default "floating"
+  - `floating` — The menu is in the bar, which is everywhere a page puts one. The panel hangs from the trigger and floats over what is beneath it
+  - `inline` — NavbarPanel is rendering the menu, and it sets this itself — a page should not. …
+- **tone** `enum` · default "default"
+  - `default` — The bar has a light ground under it, which is every bar on a marketing page today. The trigger's tints are ink-based and read against paper
+  - `inverse` — The bar sits on a dark ground and the ink runs light. Only the trigger mirrors — the panel is its own surface with its own ground, and is the same either way
+- **label** `string` · required — Always — it is the name of the section, the words on the trigger, and the accessible name of the control. Name the section rather than the act: 'Trading', not 'Open trading menu'
+  - never: A description of what is inside. The panel says that by holding it, and a trigger long enough to explain itself is a trigger that breaks the row it sits in
+- **open** `boolean` · optional — The bar is holding which section is open, because only one should be at a time. Passing it makes the menu controlled: it shows what it is told and reports presses through onOpenChange. …
+  - never: Half of a controlled menu. An open passed without an onOpenChange to move it is a panel that cannot be closed by pressing the trigger that opened it
+- **onOpenChange** `callback` · optional — Whenever open is — together they are how a bar holds which section is showing. It is called with the state being moved to, by the trigger and by Escape
+  - never: Navigation. This says whether the panel is showing; a reader pressing a destination inside it is leaving by a different door
+- **replacing** `boolean` · default false — Another section's panel was already on screen when this one opened. A container that holds one section open at a time knows this and a menu cannot, so the container sets it — Navbar does, and a page should not
+  - never: Turning the entrance off generally. A panel that arrives over a page with nothing else open has something to say about where it came from, and saying it is the difference between a panel appearing and a panel being noticed
+- **feature** `node` · optional — The section has something the site wants shown alongside its destinations — a promotion, a platform, a piece of art. A Card, which already knows how to hold a picture with words over it. …
+  - never: More destinations. Anything that goes to a section of the site belongs in a group, where the reader is looking for it
+
+## Inside it
+
+- Takes only NavbarMenuGroup, NavbarItem.
+- 5 components are refused inside it; the list and the reasons are in the long document.
+- Renders 6 parts: root, trigger, chevron, surface, groups, feature.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/navbarmenu.md`.

package/.llm/digest/navbarmenugroup.md

@@ -0,0 +1,40 @@
+<!-- GENERATED from navbarmenugroup.contract.json. Do not edit. -->
+
+# NavbarMenuGroup
+
+A named handful of destinations inside a section's panel: a word over a short list, so a reader scanning a panel of twenty links is reading four sets of five rather than twenty of anything. …
+
+`import { NavbarMenuGroup } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A section's panel holds more destinations than a reader takes in at once, and they fall into sets — markets, tools, payments
+- Two lists in a panel would be told apart by nothing if the words above them were taken away
+
+## Something else, when
+
+- The panel holds few enough destinations that naming sets would be naming one thing each → **NavbarItem**
+- The set is a section of the site rather than a set within one → **NavbarMenu**
+
+## Never
+
+- A single destination dressed as a set. The label would be doing the item's job and the item would be saying nothing the label had not
+- Controls. Everything in a group goes somewhere — a switch or a button among a column of links is an action a reader scanning for a place will not expect to find
+- A heading in the page's outline. Nothing here is an h-element: the panel is navigation furniture, and a level inserted for it would be a step in the document's structure that the document never shows
+- Anywhere outside a menu's panel. There is no bar arrangement this fits — the row holds names, and a name with a list under it is what the panel is for
+
+## Props
+
+- **label** `string` · required — Always — it is the word over the list and the group's accessible name. Name what the set is rather than what to do with it: 'Markets', not 'Browse markets'
+  - never: A sentence. This is a signpost over five links, and a label that needs a verb is a label describing something that should have been a destination of its own
+
+## Inside it
+
+- Takes only Link.
+- At least 2, no ceiling — 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 3 parts: root, label, list.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/navbarmenugroup.md`.

package/.llm/digest/navbarpanel.md

@@ -0,0 +1,53 @@
+<!-- GENERATED from navbarpanel.contract.json. Do not edit. -->
+
+# NavbarPanel
+
+The whole of a site's navigation at a width the bar cannot hold it: the mark and a way out across the top, the destinations down the middle, whatever the site wants across the foot. …
+
+`import { NavbarPanel } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- Navbar is collapsing and its destinations have to go somewhere. This is where, and the bar puts them here without being asked
+- The same navigation has to be read down a phone rather than across a page
+
+## Something else, when
+
+- The surface is a sheet rising from the foot of the page rather than the site's navigation → **BottomSheet**
+- What is wanted is a list that opens beside the control that opened it → **DropdownMenu**
+
+## Never
+
+- A dialog. This is navigation drawn differently, not a question the reader has to answer — it takes no decision, returns no value, and closing it cancels nothing
+- A page of its own. The destinations here go somewhere; a surface a reader stays on and reads is a page, and this one is covering it
+- A wide screen. Everything in it is already drawn across the bar at that width, and a reader who opens it there is being shown the navigation twice
+- Anything a page opens itself. Navbar renders this, holds whether it is open, and is the thing that knows when the bar stopped fitting
+
+## Props
+
+- **label** `string` · required — Always — it names the navigation landmark inside the panel, and this is the only one on the page while the panel is open. Name the set rather than the act: 'Main', not 'Main navigation', because the role already supplies the word
+  - never: A heading for the panel. Nothing draws this. The mark at the top says whose site it is and the destinations say what it holds
+- **closeLabel** `string` · required — Always — it names the close button, which draws a glyph and no text and is the only visible way out of a surface covering the whole page. 'Close' is enough; what it closes is the only thing open
+  - never: The bar's trigger name. They are two controls in two places, and a reader cannot reach the trigger while this is covering it
+- **onClose** `callback` · required — Always. It is called by the close button and by Escape, so whatever holds the panel open hears both ways it can be dismissed
+  - never: Navigation. A reader pressing a destination inside the panel is leaving by a different door, and a handler that also routed would fire twice for one press
+- **brand** `node` · optional — Whatever the bar carries as its mark, passed straight through. Absent only where the bar has none either
+  - never: A different mark from the bar's. The panel opened out of the bar and covers it; two marks is two sites
+- **preferences** `node` · optional — The bar has switchers, which it hands over when it collapses. They are drawn under the destinations and above the foot
+  - never: The action the site wants pressed. That is the foot's, and a preference drawn beside it would compete with the last thing the panel says
+- **footer** `node` · optional — The bar's utility end has something worth keeping at this width — the conversion, and the language or theme controls. They are drawn across the foot here rather than in a row, because there is width for one control and no room for three
+  - never: Destinations. Anything that goes to a section of the site belongs in the children, inside the landmark that announces it as one
+
+## Inside it
+
+- Takes only NavbarItem, NavbarMenu.
+- 5 components are refused inside it; the list and the reasons are in the long document.
+- Renders 8 parts: root, header, mark, close, body, destinations, preferences, footer.
+
+## Needs mounting
+
+Does not work from the import alone: useNavbarPanel. See `.llm/components/navbarpanel.md` for what to mount and where.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/navbarpanel.md`.

package/.llm/digest/navbarswitcher.md

@@ -0,0 +1,51 @@
+<!-- GENERATED from navbarswitcher.contract.json. Do not edit. -->
+
+# NavbarSwitcher
+
+Something a reader sets rather than somewhere they go: the language the page is read in, the region its prices are in, the theme it is drawn in. …
+
+`import { NavbarSwitcher } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A bar needs a language or region switcher, which is the case this was drawn for
+- A set of choices changes how the page is drawn or worded rather than taking a reader anywhere
+- The set is long enough that a phone should give it the whole panel rather than a dropdown inside one
+
+## Something else, when
+
+- The control opens a set of commands rather than a set of choices → **DropdownMenu**
+- The control flips between two states → **ButtonIcon**
+- The items are places the site has → **NavbarMenu**
+
+## Never
+
+- Navigation. Nothing in here has an href, and a reader who was taken somewhere by a switcher has been told the set was one thing and given another
+- A form field. A select inside a form is a Select: it has a name, it posts a value, and it is read as part of the form rather than as part of the chrome
+
+## Props
+
+- **presentation** `enum` · default "floating"
+  - `floating` — The switcher is in the bar, which is everywhere a page puts one. The choices hang off the trigger and float over what is beneath
+  - `panel` — NavbarPanel is rendering it, and it sets this itself — a page should not. …
+- **tone** `enum` · default "default"
+  - `default` — The bar has a light ground under it
+  - `inverse` — The bar sits on a dark ground and the ink runs light. Only the tints move — the words take the ink around them either way
+- **label** `string` · required — Always — the choice in force, short enough for a bar. "EN", not "English": a bar is read at a glance and a switcher showing the longest name in the set is a switcher that changes width when somebody picks one
+- **menuLabel** `string` · required — Always — what the set is, for a reader who meets the trigger without seeing the mark beside it. "Language", "Region". The trigger shows the answer; this says what the question was
+- **backLabel** `string` · required — Always. It names the way out of the page the panel form opens, and a glyph pointing left is not a name. Unused in the floating form, which has no page to leave
+- **icon** `node` · optional — A mark saying which question this answers. Nearly always on a bar, where the label is two letters and the glyph is what makes them mean a language
+- **chevron** `boolean` · default false — The floating trigger should say it opens. Off by default because a switcher usually sits among destinations that each carry one. The panel form draws one whatever this says — a row in a list has nothing else to go on
+  - never: The panel form, which is not asking
+- **open** `boolean` · optional — A container holds which of several things is open. Standing alone the switcher holds its own
+- **onOpenChange** `callback` · optional — Whenever open is — together they are how a container holds it
+
+## Inside it
+
+- Takes only NavbarSwitcherOption.
+- 7 components are refused inside it; the list and the reasons are in the long document.
+- Renders 7 parts: root, trigger, icon, chevron, surface, back, list.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/navbarswitcher.md`.

package/.llm/digest/navbarswitcheroption.md

@@ -0,0 +1,37 @@
+<!-- GENERATED from navbarswitcheroption.contract.json. Do not edit. -->
+
+# NavbarSwitcherOption
+
+One choice inside a NavbarSwitcher: a language, a region, a theme. …
+
+`import { NavbarSwitcherOption } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A NavbarSwitcher needs its choices
+- One of a set of options is in force and a reader should be able to see which
+
+## Something else, when
+
+- The row goes somewhere → **NavbarItem**
+- The row is a command in a dropdown → **MenuItem**
+
+## Never
+
+- Navigation of any kind
+- A destructive action. A set a reader scans and picks from is the wrong place for anything that cannot be undone by picking again
+
+## Props
+
+- **current** `boolean` · default false — This is the choice in force — the language the page is being read in. Exactly one of a set carries it
+  - never: Marking a recommended or default option. It says what is true now, not what a reader should pick
+- **onSelect** `callback` · required — Always. Choosing is the whole of what this does, and a row that reported nothing would be a row that did nothing
+
+## Inside it
+
+- Takes only text.
+- 6 components are refused inside it; the list and the reasons are in the long document.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/navbarswitcheroption.md`.

package/.llm/digest/option.md

@@ -0,0 +1,54 @@
+<!-- GENERATED from option.contract.json. Do not edit. -->
+
+# Option
+
+One answer on offer inside a control that opens a list. …
+
+`import { Option } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- An answer inside a control that opens a list — a SelectChip today. One of these per option in the set
+
+## Something else, when
+
+- Pressing it should do something rather than record an answer → **MenuItem**
+- The row is one of a few and all of them fit on the page → **FilterChip**
+
+## Never
+
+- Anything outside a list that a control owns. It is an <li> announced as an option, which means nothing without that list — a screen reader meeting one loose reports a bare list item
+- A heading over a group of answers, or a line between two groups. A row announced as an option that cannot be taken is a dead end the reader has to arrow past, and they will try it first
+
+## Props
+
+- **size** `enum` · default "sm" — Set by the control so the list matches the chip it hangs from. A row is as tall as the control it opened from, which is what makes the list read as the chip opened rather than as a separate thing beneath it
+  - `sm` — The default, and the step a SelectChip at its own default opens
+  - `md` — Touch-first, where the row is also the target and a finger has to land inside it
+  - never: Varying within one list. Rows of two heights in one set read as two lists that happen to touch
+- **selected** `boolean` · default false — Set by the control that owns the list, not by a page. …
+  - never: Marking a recommended answer. Chosen means the reader chose it, and a row that arrives already marked implies an act nobody took
+- **active** `boolean` · default false — Whether the arrow keys are resting here. The control's to set: only the control knows where the keys are, and only one row can be right at a time. …
+  - never: Marking the answer. That is selected, and a ground saying both would have to rank one against the other
+- **disabled** `boolean` · default false — This one answer cannot be taken. The row stays in the list and stays readable, because a set that hides what it will not accept leaves the reader hunting for something that was there last week
+  - never: Most of the set. A list where nearly nothing can be taken is the wrong list, and a row that simply refuses does not say why
+- **value** `string` · required — What the control reports when this row is taken. A stable code rather than the words, so the words can be reworded or translated without changing what anything submits
+  - never: The words themselves, where they happen to look like a code. "EN" reads as both and is one of them — a value that doubles as a label is a value nobody can change later
+- **leadingIcon** `node` · optional — A mark the reader knows the answer by — a flag on a language, a glyph on a market. For a set met before, where recognising is faster than reading. …
+  - never: Decoration, or a set where the names are the only thing telling the answers apart — a column of marks that all mean "an option" costs an indent down the whole list and buys nothing. And never for anything pressable: a control inside a row is a tab stop the pattern has no room for
+- **description** `string` · optional — What the name does not say on its own — a code beside a market, where an answer applies. Give it where two answers are hard to tell apart by name, and leave it out where the name is the whole of the answer
+  - never: Guidance about the control, which belongs beside it: written here it is read once per answer instead of once. Nor a sentence — this is one line and cut at its end, so anything long arrives truncated and says less than nothing
+
+## The type refuses
+
+- disabled=true with state="hover" — A row that cannot be taken does not answer the pointer, so there is no ground for it to take. …
+
+## Inside it
+
+- Takes only text.
+- 5 components are refused inside it; the list and the reasons are in the long document.
+- Renders 6 parts: root, leading-icon, text, label, description, tick.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/option.md`.

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

@@ -0,0 +1,60 @@
+<!-- GENERATED from pagination.contract.json. Do not edit. -->
+
+# Pagination
+
+The control that moves a reader through a set too large to show at once. …
+
+`import { Pagination } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- 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. …
+
+## 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**
+
+## Never
+
+- 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
+- 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. …
+  - `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. …
+  - 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. 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. 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. …
+  - never: Describing where the reader is. That is the summary's job and aria-current's, both of which change as the reader moves, while this does not — a landmark renamed on every press is one that cannot be navigated to
+- **previousLabel** `string` · default "Previous page" — The accessible name for the step-back control, which is a glyph and therefore announces nothing on its own. Override it to translate it, or where "page" is the wrong noun for what is being stepped through
+  - never: Visible text. Nothing here renders it — it is the button's name, not its content, and a row that showed the words would be a different control at a different width
+- **nextLabel** `string` · default "Next page" — The accessible name for the step-forward control, for the reason previousLabel exists. Keep the two parallel: a pair reading "Next page" and "Go back" is two people's wording in one control
+  - never: Visible text, for the reason previousLabel is not
+- **morePagesLabel** `string` · default "More pages" — The accessible name for the break between two runs of numbered pages — the control that opens a menu of the pages that break stands for. …
+  - never: Visible text, for the reason previousLabel is not. Nor for naming the range it covers: which pages a break stands for changes with every step the reader takes, and a name that went stale would be read out long after it stopped being true
+
+## Inside it
+
+- 4 components are refused inside it; the list and the reasons are in the long document.
+- Renders 6 parts: root, list, summary, step, page, break.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/pagination.md`.

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

@@ -0,0 +1,51 @@
+<!-- GENERATED from removablechip.contract.json. Do not edit. -->
+
+# RemovableChip
+
+A token standing for one thing that is already in play — a topic the reader has filtered by, a tag on an article, a market they have picked out — which they can take back out. …
+
+`import { RemovableChip } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- An index shows the narrowings currently applied above its results, and each has to come off on its own without clearing the rest
+- The reader has assembled something across a page — markets on a comparison, topics on a subscription form — and needs to see and unpick what is in it
+- What was chosen is worth showing as a token rather than as a sentence, because the reader will act on individual pieces of it
+
+## Something else, when
+
+- The token is turned on and off rather than added and taken away → **FilterChip**
+- The thing named cannot be taken away and is there to be read — a category on a card, a status on a plan → **Badge**
+- The token is really a link to the thing it names → **Link**
+
+## Never
+
+- Something the reader cannot get back. The cross is a small target beside the words and it is pressed by accident, so what a chip removes should be recoverable from whatever added it
+- An action other than removal. There is one control here and its meaning is fixed; a cross that archived or edited would be the same glyph meaning something else
+- A sentence. Chips are read as a set at a glance, and one carrying a phrase makes the row unreadable and pushes the rest out of view
+
+## Props
+
+- **disabled** `boolean` · default false — The token cannot be removed just now — something else is in progress, or the narrowing is the last one and the index will not show nothing. It dims and takes the cross out of the tab order
+  - never: The reader could act on it if they knew what to change. This says the act is closed and nothing about why, so a reason belongs in the prose around the set
+- **size** `enum` · default "sm" — How dense the row is, matched to whatever it sits beside. It takes the same control ramp a FilterChip does, so the two never sit at different heights in one row
+  - `sm` — The default, and the same measure a FilterChip takes at its own default, so a row holding both sits level
+  - `md` — A touch-first layout, level with a FilterChip at its largest. The cross gains room around it rather than growing: it is already at the smallest a target may be
+  - never: Marking one token in a set as more important. They are a set of equals and a row of mismatched heights reads as a mistake before it reads as emphasis
+- **label** `string` · required — Always, and required on that account — it names the thing the token stands for. Short enough to read at a glance in a row of them
+  - never: Describing what the cross does. That is removeLabel, which a screen reader reads and nobody sees
+- **leadingIcon** `node` · optional — A glyph makes the kind of thing recognisable before the words are read. It sits before the name and never replaces it. …
+  - never: Decoration. A row where every token carries the same mark reads more slowly than the names alone would
+- **onRemove** `callback` · required — Always, and required on that account: removal is the whole of what this component does, and a cross reporting to nobody is the clearest promise a chip can break — the reader presses it more than once before deciding the page is at fault
+  - never: Clearing the value while leaving the token. Removing a chip removes the thing; a cross that empties something and leaves its token behind tells the reader it is still there
+- **removeLabel** `string` · default "Remove" — The accessible name of the cross, which announces nothing on its own. Override it to name what is going: a row of buttons all saying Remove leaves a reader who cannot see the tokens unable to tell which one they are about to lose
+  - never: Visible text. Nothing here renders it — the cross is the whole of what is drawn
+
+## Inside it
+
+- 5 components are refused inside it; the list and the reasons are in the long document.
+- Renders 5 parts: root, icon, label, remove, remove-icon.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/removablechip.md`.

package/.llm/digest/row.md

@@ -0,0 +1,60 @@
+<!-- GENERATED from row.contract.json. Do not edit. -->
+
+# Row
+
+A line, and one measure between the things on it. It draws nothing — no ground, no edge, no padding — and owns one decision: how far apart the things beside one another sit. …
+
+`import { Row } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- Two or more things are read across rather than down, and the space between them is the same all the way along — a glyph and its label, a title and the action beside it, a set of controls …
+- The spacing is a fact about the group rather than about any member of it. …
+- The items are of different heights and something has to decide how they meet — centred on the line, level at the top, or sitting on one another's baseline. …
+
+## Something else, when
+
+- The things are read one above the next → **Stack**
+- The things must line up down the page as well as across it → **Grid**
+- The set is longer than the line and has to stay on one line → **Scroller**
+- The things across are the fields of one record, and the record repeats down the page → **Table**
+
+## Never
+
+- Padding. It sets space between its children and none at all around them, so a row reached for to inset a region leaves the surface that should have carried the padding with none — and the inset now lives on an element that has no ground to sit on
+- A single child. A line of one has nothing to space: the gap is inert, and what is left is an element that renders, costs a node, and explains nothing to the next person to read it
+- Reaching a width. It is as wide as whatever holds it and declares no size of its own. A row used to constrain a measure is a width hidden inside a spacing decision, in the one place nobody will search for it
+- Building a grid out of wrapping. Wrap is what a line does when it has run out of room, not a way of arranging things in columns: the last line is as long as whatever is left, and no item on it sits under an item above. It looks like a grid at the width it was designed at and at no other
+- Separating two things that a surface, a rule or a ground already separates. Two answers to one gap is how a view stops having a rhythm worth reading
+
+## Props
+
+- **gap** `enum` · default "sm" — Always. The measure between items is the component's one decision and the reason it exists, so there is no case for leaving it unstated
+  - `none` — No gap at all, for a line whose marks are meant to read as one object rather than as a list of controls. The only step here that is a decision rather than a measure
+  - `xs` — The tightest gap between related elements: a glyph and its label, a pair of words read as one, inline text pairs
+  - `sm` — The default, and what the token names for a line of sibling controls — buttons in a row, a label and the field beside it
+  - `md` — The step the token names for stacked items — form fields, feature list items, pricing features — taken across: peers that are not controls, where the control step would make them read as one object
+  - `lg` — Between content groups — feature cards, footer columns, one pricing plan beside the next
+  - `xl` — Between the parts of a card, or between a heading and the block beside it. Drops one step below 768px, a phone having a third of the width to spend
+  - `2xl` — Between one section of a page and the next, set side by side. Drops one step below 768px, a phone having a third of the width to spend
+  - `3xl` — The largest gap, for separating whole movements of a page laid out across. Drops one step below 768px, a phone having a third of the width to spend
+  - never: Reaching a distance. The gap is a relationship between two items rather than a measure from anything — a step picked because it puts something where it looks right is a position written in the wrong units, and it is wrong at the next width
+- **align** `enum` · default "center" — How items of different heights meet across the line. The default is the common case and the one that keeps a glyph reading as part of the label beside it
+  - `start` — Items keep their own height and sit against the top of the line — a label beside a paragraph that runs to several lines, where centring would set the label against the middle of the block
+  - `center` — The default. Items are centred across the line, which is what things of different heights want — a glyph beside a label, a badge beside a title, an avatar beside a name
+  - `end` — Items keep their own height and sit against the bottom of the line
+  - `stretch` — Every item takes the full height of the line, which is what a line of cards or panels wants when they should finish level however much is in each
+  - `baseline` — The first line of text in each item sits on one line. …
+  - never: Giving the line a height. Every value here arranges items within whatever height the tallest of them establishes; none of them adds any. A line that should be taller than its contents is a control with a size, and size.control is what carries that
+- **justify** `enum` · default "start" — Where the items sit along a line that is wider than they need. Reach for it only where something has given the line a width
+  - `start` — The default. Items sit at the leading edge, and a line with no width of its own is exactly as wide as they are
+  - `center` — Items sit together in the middle of a line wider than they are
+  - `end` — Items sit against the trailing edge — the shape the actions closing a dialog or a form take, that being where a flow ends
+  - `between` — The first item at the leading edge, the last at the trailing, and whatever room is spare shared between them — a title on one side and its action on the other
+  - never: Pushing one item away from the others. `between` shares the room out between every pair, so a line of three ends with one stranded in the middle that nobody put there. Where one item belongs apart from the rest, the line has two items and one of them is a Row of its own
+- **wrap** `boolean` · default false — The line may break onto another when it runs out of room, rather than squashing its items or running off the edge. For a set whose length the page cannot predict — chips a reader has added, tags on a record, a group of filters
+  - never: Building a grid. A wrapped line is ragged by construction: the last line holds whatever is left, and no item on it sits under an item above. Where the items must agree in both directions that is Grid, and where they must stay on one line it is Scroller — wrapping is the answer only when neither the columns nor the line matter
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/row.md`.