@deriv-com/dds-marketing 0.1.0 → 0.2.0

package/.llm/digest/navbaritem.md

@@ -0,0 +1,54 @@
+<!-- GENERATED from navbaritem.contract.json. Do not edit. -->
+
+# NavbarItem
+
+One place the site has, in the bar across the top of it. An anchor with a target around it, a mark for the section the reader is currently in, and nothing else. …
+
+`import { NavbarItem } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A section of the site, in a Navbar — the ordinary case and what this is for
+- A destination that leaves the site, which it marks as a change of context rather than leaving the reader to find out
+- The same destination inside the panel a narrow bar collapses into: a page writes its navigation once, and what changes with the width is how it is drawn
+
+## Something else, when
+
+- The destination opens a panel of further destinations rather than going somewhere → **NavbarMenu**
+- The destination is a phrase inside a sentence, or a call to action beneath a paragraph → **Link**
+- The item is one of a set of alternatives rather than a place → **Tab**
+
+## Never
+
+- A control. This navigates and nothing else — a press that filtered, submitted or opened something would be a button the browser has been told is a link
+- The site's mark. That goes in Navbar's brand slot, where nothing gives it a target or a current state
+- A conversion action. Open an account is not a place the site has, and a reader tabbing the navigation landmark should not meet it there — that is Navbar's utilities slot
+- A list of every page on the site. A bar holds the sections a reader chooses between at a glance; a sitemap is a footer
+
+## Props
+
+- **current** `boolean` · default false — The reader is in this section of the site. It fills the item's shape in and sets `aria-current="page"`, so the mark is not the only thing saying it. …
+  - never: Emphasis. This is not the important destination or the one the site would rather you took; it is the one the reader is already on, and using it for anything else makes the mark mean nothing on every bar that uses it correctly
+- **tone** `enum` · default "default"
+  - `default` — The bar has a light ground under it, which is every bar on a marketing page today. The tints here are ink-based and read against paper
+  - `inverse` — The bar sits on a dark ground — a band, or art the page put behind it — and the ink runs light. …
+- **href** `string` · required — Always. This is a place, and a place has an address — an item with no href is a control drawn as a link, which is the one thing its intent says it is not
+  - never: A fragment standing in for behaviour. `href="#"` is how a link that does nothing gets written, and it navigates: the reader loses their scroll position and gains a history entry for a press meant to do something else
+- **icon** `node` · optional — The bar's sections are quicker to tell apart by a mark than by reading them, which is rare on a marketing site and usual in an application
+  - never: Decoration on every item. A glyph beside each of five destinations costs the width the destinations need and tells a reader nothing they were not already reading
+- **external** `boolean` · default false — The destination leaves the site. It draws the mark, opens in a new context, and the implementation extends the accessible name to say so in words — a glyph alone is a warning only sighted readers get
+  - never: A different area of the same site. A subdomain the reader experiences as one place is not a change of context, and marking it as one teaches them to ignore the mark where it matters
+
+## The type refuses
+
+- current=true with external=true — The section the reader is in, and a destination that leaves the site. …
+
+## Inside it
+
+- Takes only text.
+- 7 components are refused inside it; the list and the reasons are in the long document.
+- Renders 4 parts: root, icon, label, external.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/navbaritem.md`.

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

@@ -0,0 +1,71 @@
+<!-- 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. …
+- 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
+
+- 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
+- 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. …
+- **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: 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
+- **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 8 parts: root, list, summary, dot, dot-mark, 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/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`.

package/.llm/digest/scroller.md

@@ -0,0 +1,59 @@
+<!-- GENERATED from scroller.contract.json. Do not edit. -->
+
+# Scroller
+
+A rail, and one measure between the things on it. …
+
+`import { Scroller } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A set is longer than the space and its order is worth keeping — steps in a sequence, results already ranked, a timeline, a run of chips a reader is scanning rather than comparing …
+- The things are of a kind and of a size, so a line of them reads as a line rather than as a row of unrelated objects that happen to be beside one another
+- Seeing part of the next item is what tells the reader there is more. …
+
+## Something else, when
+
+- Everything fits, or should be made to fit → **Row**
+- The set may break onto a second line and nothing is lost by it → **Row**
+- The items should line up in columns as well → **Grid**
+- The region scrolls down rather than across → **nothing in this system does this**
+
+## Never
+
+- Hiding a set that should be seen. Anything past the first screenful is found only by a reader who knows to look, so a rail holding the one thing a page exists to say has hidden it behind a gesture. What is off the edge is optional by construction
+- Navigation a reader must be able to survey. A set of destinations that does not fit is a set that needs a menu, a panel or fewer destinations — a rail makes the reader move to find out what their options are, and they cannot count what they cannot see
+- Padding. It sets space between its items and none at all around them, and a rail reached for to inset a region leaves the surface that should have carried the padding with none
+- One child. A rail of one never scrolls: what is left is a focusable, named, grouped region announcing itself around a single item the reader could already see
+- A table that is too wide. Cells that must line up with the cells above them are a table's columns, and a table scrolls itself — wrapping one in a rail takes the header out of the region that scrolls, so the columns and their names come apart
+
+## Props
+
+- **gap** `enum` · default "lg" — The measure between items along the rail, and the one place it differs from the same measure elsewhere: a gap ends at the last item, where margins on the items would run on past it and turn the end of the rail into scrollable emptiness the reader is dragged into …
+  - `none` — No gap at all, for a rail whose marks are meant to read as one object rather than as a set. The only step here that is a decision rather than a measure
+  - `xs` — The tightest gap between related elements, for a rail read as one strip rather than as separate items
+  - `sm` — The step the token names for sibling controls — a rail of chips, filters or small marks
+  - `md` — The step the token names for stacked items, taken across: items that are peers but not controls, where the control step would run them together
+  - `lg` — The default, and what the token names for feature cards, footer columns and pricing plans — the rail of cards this is most often reached for
+  - `xl` — Between the parts of a card, taken along a rail — items that each hold a picture as well as words. 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, laid along a rail. 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 along a rail. 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, and one picked to make a particular item land at the edge is a position written in the wrong units — it lands elsewhere at every other width
+- **align** `enum` · default "stretch" — How items of different heights meet across the rail. The default is what keeps a run of cards reading as a run
+  - `start` — Items keep their own height and sit against the top of the rail, so a short item ends early rather than being drawn out to match its neighbours
+  - `center` — Items keep their own height and sit in the middle of the rail
+  - `end` — Items keep their own height and sit against the bottom of the rail
+  - `stretch` — The default. Every item takes the full height of the rail, so a run of cards finishes level however much is in each
+  - never: Giving the rail a height. Every value here arranges items within the height the tallest of them establishes; none of them adds any
+- **snap** `boolean` · default false — Each stop lands an item against the leading edge rather than wherever the gesture ended. For a rail of items of one size that the reader steps through — cards, slides, a set of positions
+  - never: A rail being scanned rather than stepped through. Snapping takes the scroll away from the reader at every item, which is help when each item is a destination and a fight when they are looking for one of them. It is also wrong for items of different widths, where the stops are unevenly spaced and the rail feels broken rather than assisted
+- **label** `string` · required — Always. The rail is a focusable region, so it is announced when a reader arrives at it — and without a name it announces "group" and nothing else, telling them something is there but not what. …
+  - never: Repeating a heading the reader has just met. Where a visible heading already names the set, this says the same thing twice in a row — the announcement is the heading, then the group with the same words. Name what distinguishes this rail from the others on the view
+
+## Inside it
+
+- 2 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/scroller.md`.