@deriv-com/dds-marketing 0.1.0 → 0.2.0

package/.llm/digest/divider.md

@@ -0,0 +1,52 @@
+<!-- GENERATED from divider.contract.json. Do not edit. -->
+
+# Divider
+
+A rule between things, and the quietest way to say that what is on one side of it belongs to a different group from what is on the other. …
+
+`import { Divider } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- Two groups inside one container that nothing else is separating — a footer's link columns, the tiers inside a pricing card, a card's summary above its detail. …
+- A row of items holding one that belongs to a different set from its neighbours — the vertical case. …
+- A word between two rules, where that word is the entire content of the divide: OR between two ways of signing up, and little else. …
+
+## Something else, when
+
+- The groups have names → **Typography**
+- The space between the groups already separates them → **nothing in this system does this**
+- The line wanted is the edge of a surface → **Card**
+- The line wanted is the rail under a tab strip → **TabList**
+
+## Never
+
+- Room. It draws a line and owns no space around it, so the air either side is the layout's — only the thing holding the groups knows how much air they deserve. A rule that carried margins of its own would be a rule nobody could put anywhere, because every place it went would need them different
+- A line under every heading. A page ruled off at each of its headings reads as a form to be filled rather than as prose to be read, and the rules stop meaning anything once they are everywhere — which is the state a divider cannot recover from, since it has only one thing to say. …
+- Two rules with nothing between them, or a rule at the start or end of a set. A separator separates, so one with a group on only one side of it is a line drawn around nothing — and at the edge of a container it is the container's own border, moved inward by a pixel and drawn in the wrong ink
+- Structure a reader navigates by. A screen reader announces a separator where it helps and skips it where it does not; what makes a group findable is a heading or a list, and a rule is neither. If a group has to be reachable, give it something with a name
+- Carrying a status, a warning, or any other meaning through colour. There is one ink here and it is the quietest one this package has, deliberately: a red rule is a message nobody can read, and the message belongs in words on the surface the rule divides
+
+## Props
+
+- **orientation** `enum` · default "horizontal" — The axis the groups are arranged on. A rule across a stack is horizontal; a rule down a row is vertical
+  - `horizontal` — The default, and nearly every divider: a rule across a stack, separating what is above it from what is below. …
+  - `vertical` — A rule down a row, separating items beside one another. …
+  - never: Turning a rule to fit a layout that has not decided what it is. The orientation follows the axis the groups are arranged on — a vertical rule between two stacked groups says they sit side by side, which is a claim about the layout that the layout will contradict. …
+- **label** `string` · optional — The divide has a word, and the word is short: OR between two ways of signing up, and very little else. …
+  - never: A sentence, or a heading. The word sits between two rules in the width of a container, so anything longer takes the rules with it: at a phrase there is little line left on either side, and at a sentence the divider has become a caption drawn in the wrong ink. …
+- **decorative** `boolean` · default false — The grouping this rule draws is already announced some other way — the rows either side are list items, the sections either side have headings of their own. …
+  - never: A rule that is the only thing saying the groups are different. That is the ordinary case, which is why it is the default: where the line carries the grouping for the reader who can see it, the separator role is what carries the same grouping for the reader who cannot, and hiding it takes the structure away from exactly one audience
+
+## The type refuses
+
+- decorative=true with label="*" — A labelled divider is not a separator — the word is content, and content is why the role is given up. …
+
+## Inside it
+
+- 7 components are refused inside it; the list and the reasons are in the long document.
+- Renders 3 parts: root, line, label.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/divider.md`.

package/.llm/digest/dropdownmenu.md

@@ -0,0 +1,67 @@
+<!-- GENERATED from dropdownmenu.contract.json. Do not edit. -->
+
+# DropdownMenu
+
+A button that opens a short set of destinations. Pressing one goes somewhere and the menu shuts — it holds no value and reports no answer, so there is nothing about it to find on reopening. …
+
+`import { DropdownMenu } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A set of destinations too long for the navigation bar and too short to be a page of its own — languages, regions, the parts of a long index
+- The set is short enough to read at a glance, where a visitor is choosing rather than searching
+
+## Something else, when
+
+- The set reports a choice the visitor should find marked when they return → **nothing in this system does this**
+- The destinations belong in the page's navigation → **nothing in this system does this**
+- It is one destination rather than one of a set → **nothing in this system does this**
+- The set is long enough that a visitor would rather type than read → **nothing in this system does this**
+
+## Never
+
+- Anything that destroys. Marketing has no destructive tone by decision — a page navigates a visitor toward a conversion and never deletes on their behalf
+- The page's main action. A menu is a set of supporting destinations, and the one step a page was built to produce is a Button in the open where it can be seen without a press
+- Carrying the words a visitor needs before choosing. A row is a short label; what a choice means belongs on the page, where it can be read without opening anything
+
+## Props
+
+- **variant** `enum` · default "outlined"
+  - `outlined` — The control stands on its own — a switcher in a toolbar, a filter above a table, anywhere a reader has to find it before they can use it. The edge is what says there is something here to press
+  - `plain` — The control sits among others that have already said what they are — a locale beside a row of sections in a navigation bar, where every neighbour is words and a mark and an edge around one of them would make it the loudest thing in the set. …
+- **size** `enum` · default "md" — Match it to the controls it stands beside. Two steps and no third: this package's control ramp runs sm then md, and the step above them is being retired rather than offered here
+  - `sm` — Beside body copy rather than above it — a language picker in a navigation bar or a footer, where the trigger is one item in a row of links and should not outweigh them
+  - `md` — The default, and nearly every other page. The same height as a default Button, so the two line up when they sit in the same band
+  - never: Making the menu itself bigger. This sizes the trigger and the rows in it; how wide the panel runs is its longest destination's business, and how tall it gets before scrolling is size.menu.max at either step
+- **alignment** `enum` · default "start"
+  - `start` — The menu's leading edge lines up with the trigger's. The default, because a visitor reads from that edge and the destinations begin where the button's own words began
+  - `end` — Its trailing edge lines up instead, which is what a trigger near the end of a row needs — a footer's language picker aligned to the start would run off the screen
+- **tone** `enum` · default "default"
+  - `default` — The control is on a light ground, which is every surface this package paints by default
+  - `inverse` — The control is on a ground that runs against the mode — a navigation bar standing on a dark hero. …
+- **label** `string` · required — Always — the words on the trigger, and the whole of what a visitor has to go on before they press it. "Language", "Region", "More pages". …
+  - never: A sentence. This sits in a row of other things and does not wrap — words long enough to need the room are words that belong on the page
+- **icon** `node` · optional — A mark before the trigger's words, where the set is read by shape as much as by reading — a globe beside "Language", a flag beside the region a visitor is already in
+  - never: The chevron, which this component draws itself and is not a slot. And saying what the menu holds when the words already do: a mark beside "Language" is recognised faster, a mark beside "Choose where you are reading from" is decoration in front of a sentence
+- **chevron** `boolean` · default true — A chevron in the trigger, pointing down while the menu is shut and up while it is open. …
+  - never: A trigger standing on its own. Without an edge or a chevron there is nothing left saying the control opens anything, and a reader finds out by pressing it. Turn it off only where the neighbours say it — a locale in a row of sections that each carry one, where a third chevron is the repetition rather than the signal
+- **openOnHover** `boolean` · default false — The menu is one of several things on a bar that open, and the others open on hover — a switcher beside a row of navigation sections, where a reader who has learned that the sections open under the pointer meets one control that does not and reads it as broken. …
+  - never: A menu whose rows do something on the spot rather than go somewhere. Hover is an accident as often as it is an intention, and a set opened by accident is one a reader can act on by accident
+- **trigger** `node` · optional — A control this component should open rather than draw — one whose mark is the whole of it, with no words to read. …
+  - never: Anything that is not a button. A menu opened by a div is a menu a keyboard cannot reach, and one opened by this package's Button is a link that does not navigate — Button is an anchor here, which is the reason this component drew its own trigger to begin with. …
+- **open** `boolean` · optional — The page holds whether the menu is open, and this component stops holding it. For the case where something outside has to shut it — a navigation bar that closes its menu when another one opens. …
+  - never: Opening it on arrival. A menu that opens itself is a panel the visitor did not ask for, over content they came to read — and the browser scrolls whatever takes focus into view, so it moves the page as well
+- **defaultOpen** `boolean` · optional — A specimen — a documentation page, the preview's own stage — where the menu has to be on screen to be looked at. This component still holds the state afterwards
+  - never: A real page. It is the same objection as open's, without even a prop the page could use to close it again
+- **onOpenChange** `callback` · optional — Something outside has to know — a navigation bar shutting its other menus, a page that dims behind an open one. Required in practice alongside open, which is the only way a driven menu ever closes
+  - never: Running what the row does. That is the row's own onSelect, and a menu cannot tell you which one was pressed — it only knows that it shut
+
+## Inside it
+
+- Takes only MenuItem.
+- 6 components are refused inside it; the list and the reasons are in the long document.
+- Renders 6 parts: root, trigger, icon, label, chevron, surface.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/dropdownmenu.md`.

package/.llm/digest/filterchip.md

@@ -0,0 +1,68 @@
+<!-- GENERATED from filterchip.contract.json. Do not edit. -->
+
+# FilterChip
+
+A token the reader turns on and off in place, standing for one narrowing of the set shown beside it. …
+
+`import { FilterChip } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- An index is long enough to be worth cutting down and its categories are few enough to show in full — a blog filtered by topic, a help centre filtered by product, a market list filtered by asset class …
+- The choice is small enough that a form control would be more machinery than it deserves — turning one topic on is not a question worth a checkbox and a label
+- What is chosen has to stay visible while the reader reads what it did, so the narrowing and the list it produced can be read together
+
+## Something else, when
+
+- The token stands for a narrowing already applied, which the reader drops rather than turns off → **RemovableChip**
+- The thing named cannot be acted on and is there to be read — a tag on an article, a status on a card → **Badge**
+- The chips are really the navigation of the page, and pressing one changes what the page is → **Tab**
+- Pressing it goes somewhere — a category page with its own address → **Link**
+
+## Never
+
+- An action. It is pressed to say a thing applies, and nothing else — one that submits or navigates is a button wearing a token's shape, and a reader cannot tell which they have until they press it
+- A set so long it wraps into several rows. Chips are read as a group at a glance, and past a handful the reading costs more than a list would
+- Carrying the chosen state in hue alone. Two colours of the same lightness are no difference to a reader who cannot separate them, which is why the chosen ground travels the whole way from the page's ground to the darkest one this package has rather than to a tint of the same weight
+
+## Props
+
+- **selected** `boolean` · default false — The narrowing currently applies. It is the consumer's to hold, because the list and the chip are one fact — a chip keeping its own copy is how the two come to disagree
+  - never: Marking something as important, or as the default. Chosen means the reader chose it, and one that arrives already on implies an act nobody took
+- **size** `enum` · default "sm" — How dense the row is, matched to whatever it sits beside. …
+  - `sm` — The default. A step under the button or field it stands beside rather than level with it, which is what keeps a row of narrowings from reading as a row of calls to action
+  - `md` — A touch-first layout, or a filter row in a hero band where the chips carry more weight. …
+  - never: Marking one chip in a row as more important. They are a set of equals and a row of mismatched heights reads as a mistake before it reads as emphasis
+- **content** `enum` · default "none" — What the chip carries after its words, where it carries anything. It names the kind rather than being inferred from which node arrived, so exactly one thing can be in the slot and a leftover prop is inert rather than fighting for the space
+  - `none` — Nothing after the words. Most chips, and the one to reach for unless something earns the space in a row read at a glance
+  - `icon` — A glyph qualifying the narrowing rather than naming it — a mark that a topic is new, or that it came from somewhere else. …
+  - `badge` — How many entries the narrowing would leave, which is the fact a reader wants before they press. …
+  - `custom` — The row needs a mark neither of the named kinds is. …
+  - never: Repeating the label, or naming the narrowing twice. The slot qualifies what the words already said; a chip whose trailing mark restates them has spent the space for nothing
+- **label** `string` · required — Always, and required on that account — it is the whole of what the chip says. Short enough to read at a glance: a token carrying a sentence has stopped being one
+  - never: Describing what pressing it does. The chip names the narrowing, and what happens is that the narrowing applies
+- **leadingIcon** `node` · optional — A glyph makes the kind of narrowing faster to recognise than its name alone. It sits before the words and never replaces them. …
+  - never: Decoration, or a second copy of what the word says. A row where every chip carries a mark that adds nothing reads more slowly than plain words would
+- **trailingIcon** `node` · optional — The glyph shown when content is icon. Sized and coloured with the chip rather than on its own terms, so a row of them reads as one set
+  - never: Filling the slot on its own. `content` decides what is shown, so this is inert until it names icon — which is what stops two marks arriving at once when a chip changes its mind about what it carries
+- **badge** `node` · optional — The count shown when content is badge. A Badge rather than bare type, so the number reads as a fact of its own rather than as part of the label — and so it carries its own colour, which the chip does not decide
+  - never: Filling the slot on its own. `content` decides what is shown, so this is inert until it names badge
+- **custom** `node` · optional — Whatever is shown when content is custom. Nothing here is described by the documentation or the library, which is the cost of the escape hatch
+  - never: Filling the slot on its own. `content` decides what is shown, so this is inert until it names custom
+- **onSelect** `callback` · optional — What hears the press. It reports what the chip is about to become rather than that it was pressed, so a consumer writes the value back without working out which way it went
+  - never: Reading the event. The signature is the new state because that is the decision the reader made; a handler reaching for the event recomputes what it was handed
+
+## The type refuses
+
+- content="icon" with trailingIcon=null — content is icon and there is nothing to show, which renders a gap where something was promised
+- content="badge" with badge=null — content is badge and there is nothing to show, which renders a gap where something was promised
+- content="custom" with custom=null — content is custom and there is nothing to show, which renders a gap where something was promised
+
+## Inside it
+
+- 5 components are refused inside it; the list and the reasons are in the long document.
+- Renders 4 parts: root, icon, label, trailing.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/filterchip.md`.

package/.llm/digest/footer.md

@@ -0,0 +1,57 @@
+<!-- GENERATED from footer.contract.json. Do not edit. -->
+
+# Footer
+
+The band that closes a marketing page, and the sections every one of them is made of: whose site this is, where else it goes, what the law obliges it to say, and the line that closes it. …
+
+`import { Footer } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A marketing page needs its closing band — the mark, the site's other destinations, the regulatory text and the copyright line
+- The same footer has to hold its content to the page's measure and gutter without the page restating either
+- The regulatory or legal wording has to sit in a consistent place across every page of the site
+
+## Something else, when
+
+- The content closes a card or a panel rather than the page → **Card**
+- The navigation is the page's primary one, at the top → **Navbar**
+- What is needed is a horizontal rule between two blocks of content → **Divider**
+
+## Never
+
+- A sticky bar of actions at the bottom of the viewport. This closes the document and scrolls away with it; an action rail that follows the reader is a different component and a different landmark
+- A second navigation landmark competing with the top bar. The destinations here are the ones a reader looks down for rather than up for — the company, the legal pages, the secondary sections
+- Page content. A band that closes the document is not a section to put a feature list in, and a reader who meets real content below the copyright line has been told the page ended and then found it had not
+
+## Props
+
+- **label** `string` · required — Always — it names the navigation landmark, and a page with two unnamed ones tells a screen-reader user there is navigation in both places without saying how they differ. …
+  - never: A visible heading. Nothing draws this. The band needs no title, and a page that wants one composes a heading into the section itself
+- **columns** `enum` · default "4" — How many columns the destinations fall into at full width. Four is the ceiling, and with the rail beside them that is five regions across — which is as many as a band can hold before a reader stops scanning columns and starts reading a wall. …
+  - `2` — A short footer, or one whose sets run long
+  - `3` — The middle case, and the one a site with a rail beside its columns often wants
+  - `4` — The default, and the widest the band goes. With the rail beside them that is five regions across
+  - never: Forcing a layout on a phone. Nothing here holds at a phone's width — the grid drops to a single column and this value is not read
+- **copyright** `string` · optional — The line the band closes on, where the site carries one. Pass the sentence the site uses, the year included: this formats nothing and computes nothing. Optional, which it did not used to be. …
+  - never: The regulatory text. A disclaimer is paragraphs and belongs in `disclaimer`, where it is set at a readable measure; squeezed into the closing line it becomes a wall of small print across the foot of the strip
+- **brand** `node` · optional — The footer opens with the site's mark, which is the common case — usually the logo, often with a line about the company under it
+  - never: The page's heading. This is the site's mark, not the page's title
+- **social** `node` · optional — The accounts the company keeps elsewhere, at the head of the band beside the mark. They are about the company rather than about the site, which is why they sit with the mark and not among the destinations
+  - never: Destinations. Anything that goes to a section of the site belongs in the children, where the navigation landmark announces it as one
+- **endorsement** `node` · optional — A mark somebody else awarded — an accreditation, a standard the company holds. At the far end of the masthead, away from the company's own mark, because a badge beside a logo reads as part of the logo
+  - never: The company's own mark, or anything that links into the site. This end of the row is for what a third party said, and a destination put here is one a reader will not look for
+- **aside** `node` · optional — The rail beside the destinations: the app cards, a download, a partner mark. The one part of the band that is an offer rather than a way onward, which is why it is kept out of the columns instead of being a set among them
+  - never: Another set of links. A column of destinations belongs in the navigation landmark, where a screen reader announces it as one — put here it is outside the landmark and outside the order a reader is reading the columns in
+- **disclaimer** `node` · optional — The site is obliged to carry regulatory or legal wording — the risk warning, the licensing statement, the entity that holds the licence. Passed as nodes rather than a string because it runs to paragraphs and usually carries links
+  - never: Marketing copy. This section is set muted and small, which is right for text nobody chose to read and wrong for anything the page is trying to say
+
+## Inside it
+
+- Takes only FooterGroup, Stack, Link.
+- 7 components are refused inside it; the list and the reasons are in the long document.
+- Renders 12 parts: root, inner, masthead, brand, social, endorsement, body, nav, aside, bottom, disclaimer, copyright.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/footer.md`.

package/.llm/digest/footergroup.md

@@ -0,0 +1,42 @@
+<!-- GENERATED from footergroup.contract.json. Do not edit. -->
+
+# FooterGroup
+
+A named handful of destinations in the footer: a word over a short list. It is the footer's repeating unit and the only thing inside it that repeats — everything else in a footer appears once. …
+
+`import { FooterGroup } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A set of a footer's destinations belong under one word — Markets, Support, Legal
+- The footer has enough links that a reader scanning it needs sets rather than a list
+
+## Something else, when
+
+- The destinations are the ones a visitor most likely wants → **Navbar**
+- The group is a named set inside a navigation panel → **NavbarMenuGroup**
+- There is one link rather than a set → **Link**
+
+## Never
+
+- A heading over prose. The list holds destinations; a paragraph in it is a paragraph a screen reader announces as a list item
+- Nesting. A group inside a group is a second disclosure, and a reader who has opened one thing to find another has been given a menu rather than a footer
+- A set long enough to need scrolling. Eleven destinations under one word is a group that should be two
+
+## Props
+
+- **expanded** `boolean` · default false — Whether the set is open, on a page narrow enough for it to close. Left alone the group holds this itself, which is what a footer of eleven groups wants — the page has no reason to know which ones a reader has opened
+  - never: Forcing a group open on a wide page. There is nothing to force: above the footer's own breakpoint every list is open and this value is not read
+- **label** `string` · required — Always — it is the word the set is under, and the control that opens it on a narrow page. One or two words naming a kind: 'Markets', 'Partner with us'
+  - never: A sentence, or a destination. The label names the set and goes nowhere; a reader who presses it on a phone expects the set, and on a wide page it is not pressable at all
+- **onExpandedChange** `callback` · optional — Told when a set opens or shuts, for a page that drives them from outside — one open at a time, or a set opened by a link somebody followed
+
+## Inside it
+
+- Takes only Link.
+- 5 components are refused inside it; the list and the reasons are in the long document.
+- Renders 6 parts: root, heading, trigger, label, marker, list.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/footergroup.md`.

package/.llm/digest/grid.md

@@ -0,0 +1,62 @@
+<!-- GENERATED from grid.contract.json. Do not edit. -->
+
+# Grid
+
+A field of equal tracks, and one measure between them. …
+
+`import { Grid } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- Several things of the same kind are read across and down, and a cell has to line up with the cell above it — a field of stat cards, a set of tiles, a gallery
+- The count is more than a line holds and the page cannot say what width it will be read at. …
+- The cells must finish level regardless of how much is in each. …
+
+## Something else, when
+
+- The things sit on one line and there is no second row to agree with → **Row**
+- The things are read one above the next → **Stack**
+- The set must stay on one line and the reader moves along it → **Scroller**
+- The cells are the fields of one record, repeated down the page → **Table**
+
+## Never
+
+- Page layout with named regions — a hero beside a picture, a header above both. Those regions are different things at different widths and a grid here has no way to say so: every track is the same size as every other, which is what this is and is exactly wrong for a page frame
+- Padding. It sets space between its cells and none at all around them, so a grid reached for to inset a region leaves the surface that should have carried the padding with none
+- One child. A field of one is the child, drawn a second time — the tracks are inert, and what is left is an element that renders, costs a node, and explains nothing
+- Reaching a width. It is as wide as whatever holds it and declares no size of its own. The track floor is a floor and not a width: it says when a column drops, never how wide a cell ends up
+- Cells of different kinds. Every track is the same width, so a grid holding a wide thing and a narrow thing gives both the wide one's measure and the narrow one all that space to sit in. Things that differ belong on a Row, which lets each be what it is
+
+## Props
+
+- **gap** `enum` · default "lg" — The measure between cells, in both directions. One value rather than two, because a field whose rows and columns are differently spaced reads as rows first and stops being a grid
+  - `none` — No gap at all, for a field whose cells 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 field read as one texture rather than as separate cells
+  - `sm` — The step the token names for sibling controls — a field of small tiles, where the tightness makes the set read as one block
+  - `md` — The step the token names for stacked items, taken as a field: cells close enough to be scanned in one pass rather than weighed one at a time
+  - `lg` — The default, and what the token names for feature cards in a grid, footer columns and pricing plans. Reach for this unless the cells are smaller or larger than a card
+  - `xl` — Between the parts of a card, taken as a field — cells 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 out as a field. 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 as a field. Drops one step below 768px, a phone having a third of the width to spend
+  - never: Reaching a cell width. The gap and the column count together decide how wide a cell lands, but the gap is a relationship between cells and not a way of sizing one. A cell that needs a particular width is a track floor, and past that it is a component with a size
+- **min** `enum` · default "md" — How narrow a track may get before the field drops a column. This is the whole of the component's responsiveness, and choosing it is choosing where the layout changes
+  - `sm` — The narrow floor, for a cell holding a logo, an icon and a word, or one short claim. Six of these clear the page's measure with its gutter still on both sides
+  - `md` — The default floor, for a feature card: a heading and a line or two beneath it. Four fit the page's measure, so a field of three has room to spare
+  - `lg` — The wide floor, for a cell holding a picture as well as words, or a pricing plan with a list under it. Three fit the page's measure and four do not
+  - never: Setting a cell's width. It is a floor and never a measure: a cell lands as wide as the region and the column count leave it, which is almost always wider than this. A grid whose floor was picked to make a cell a particular size is a width written where a threshold belongs, and it is the wrong width at every other viewport
+- **align** `enum` · default "stretch" — How cells of different heights meet within a row. The default is what makes a field of cards look like a field
+  - `start` — Cells keep their own height and sit against the top of their row, so a short cell beside a tall one ends early rather than being drawn out
+  - `center` — Cells keep their own height and sit in the middle of their row
+  - `end` — Cells keep their own height and sit against the bottom of their row
+  - `stretch` — The default. Every cell takes the full height of its row, so a field of cards finishes level however much is in each — which is the reason most fields are a grid rather than a wrapped line
+  - never: Giving a row a height. Every value here arranges cells within the height the tallest cell in that row establishes; none adds any
+- **columns** `enum` · default "3" — How many cells sit across at full width. A ceiling rather than a promise: fewer are drawn as the region narrows, which is what makes this responsive without a breakpoint
+  - `2` — Two across — cells that hold enough to be read rather than scanned, or a field beside a picture
+  - `3` — The default, and what most fields of feature cards want. Three is the most a reader takes in as a set rather than as a list
+  - `4` — Four across, for cells holding a claim and a line — a field of benefits, a set of tiles
+  - `6` — Six across, for marks rather than cards — partner logos, payment methods, regulator badges. A field this wide is read as a texture
+  - never: Guaranteeing a count. A track squeezed below its floor is not drawn, so a field asked for six may hand back three — which is the behaviour, not a failure. Where exactly n must be on screen at every width, no grid can promise it and a Scroller is the honest answer. …
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/grid.md`.

package/.llm/digest/icon.md

@@ -0,0 +1,45 @@
+<!-- GENERATED from icon.contract.json. Do not edit. -->
+
+# Icon
+
+Renders a Quill system glyph at a token size, taking its colour from the text around it. The glyph is imported from @deriv-com/quill-icons-web and passed as the only child. …
+
+`import { Icon } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A glyph stands beside words to speed recognition — a mark on a feature card, a chevron on a row, a separator in a trail
+- A page is composing something a component offers a slot for, and the slot takes a mark rather than a component that draws one
+
+## Something else, when
+
+- The mark identifies a company or a product — a payment method, an app store, a social network → **Logo (not built yet)**
+- The artwork is a scene rather than a symbol → **Illustration (not built yet)**
+
+## Never
+
+- Flag, market, currency or payment glyphs — they carry fixed brand colour, and tinting them corrupts the mark while still rendering. Render one bare, outside an Icon: it keeps its own colour and its own proportions, which is what a mark is
+- Information that appears nowhere else. A glyph a reader has to interpret unaided is a label the page failed to write, and a marketing page has room for the words
+- The picture in a card. A mark is a symbol at a step on this ramp; a photograph or a render is CardBody's `src`, which reaches the card's edges and is measured by the card rather than by a scale of glyph sizes
+
+## Props
+
+- **size** `enum` · default "md" — The step the glyph is drawn at. It is a size and not an instruction: what a mark means comes from where it is, and this decides only how large it is drawn there
+  - `xs` — Inline and supporting content — a separator in a trail, a mark against small text
+  - `sm` — A mark beside text that must not outweigh it: the chevron on a list row, an affordance next to a label
+  - `md` — The default. Body content and lists, where the glyph sits with the words rather than above them
+  - `lg` — Cards and content sections — the mark a feature card leads with, read before its title is
+  - `xl` — The largest step, for a callout or a highlighted block where the glyph does as much work as the copy
+  - never: Setting the step of a glyph you are handing to a component. A slot takes the glyph and its component draws it at the step its own contract names, so an Icon arriving there is a call site written against something else — it is unwrapped and the outer step is what draws. …
+- **label** `string` · optional — The glyph is the only thing naming its control — an icon-only button, a mark with no words beside it
+  - never: A glyph beside a label that already says the same thing, which makes a screen reader announce it twice
+
+## Inside it
+
+- Takes only QuillSystemIcon.
+- At least 1, at most 1 — fewer is not this component and more is a different one.
+- 5 components are refused inside it; the list and the reasons are in the long document.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/icon.md`.

package/.llm/digest/link.md

@@ -0,0 +1,59 @@
+<!-- GENERATED from link.contract.json. Do not edit. -->
+
+# Link
+
+A destination named inside a sentence, or standing on its own under one. …
+
+`import { Link } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A term inside running copy has a page of its own — a market named in a paragraph, a fee mentioned in a sentence, a product referred to in passing
+- The page must offer a destination without pushing it: terms, a full fee schedule, a regulatory notice. …
+- A second destination beside the call to action, where a second pill would be two things asking to be pressed and a reader would have to choose between them before reading either …
+
+## Something else, when
+
+- The destination is the step the page was built to produce → **Button**
+- Pressing it does something on this page rather than going somewhere → **nothing in this system does this**
+- The whole card or panel is the target rather than some words in it → **CardButton**
+
+## Never
+
+- The page's main call to action. That is Button, and a page whose primary step is a link in a paragraph has hidden it in the copy
+- Words that do not name the destination — 'click here', 'read more', 'this page'. The words are the link's accessible name, and a screen reader offering a list of links reads that list on its own: a page of 'read more' is a menu of identical entries
+- A disabled or pending state. There is none, for the reason Button has none: the browser owns a navigation in flight, and an anchor cannot be honestly disabled — stripping the href is the only thing that truly stops it, and that costs the link role and the focus with it
+- Opening a new tab because the page would rather keep the reader. `external` exists for a destination that is genuinely elsewhere; taking over tab management for its own sake is a decision that belongs to the reader
+
+## Props
+
+- **variant** `enum` · default "standalone"
+  - `standalone` — The default, and what a marketing page mostly has: a link on its own line — under a card, at the foot of a section, beside a call to action. …
+  - `list` — One of a column of links — a footer sitemap, a navigation menu, a set of related pages under a heading. It takes the ink around it, because a column of coral is a column nobody reads. …
+  - `inline` — Inside a sentence, and it takes the sentence's type and the sentence's colour. …
+  - never: Making a link louder or quieter. The three are positions rather than volumes: standalone is alone on its line, list is one of a column, and inline is part of a sentence. None of them means important
+- **tone** `enum` · default "brand" — Which ink a standalone link takes. It reaches no other variant: an inline link takes the paragraph's colour and a list link takes the column's, which are decisions those positions have already made — the same shape `showIcon` has here
+  - `brand` — The default. …
+  - `inherit` — A standalone link on a ground that has already set its ink — a brand card, a dark band, a scrim over an image. …
+  - never: Reaching an inline link. One takes the paragraph's colour already and there is nothing here to choose — this prop governs a standalone link and no other
+- **external** `boolean` · default false — The destination is off this site. Sets `target="_blank"` and `rel="noopener noreferrer"` together — the rel is not optional and not the consumer's job, which is how a page ends up handing `window.opener` to a site it does not control. …
+  - never: A new tab on a destination that is not external. Taking over tab management is a decision the reader has already made in their own browser, and a page that overrides it has told them their back button is not to be trusted
+- **href** `string` · required — Always. …
+- **iconLeading** `node` · optional — A mark the destination is known by, before its name — a document, a download. Pass the glyph; the link draws it at sixteen, which is icon.size.xs. The solid weight, always: `FileSolidIcon` rather than `FileRegularIcon` or `FileLightIcon`. …
+  - never: Naming the destination. The words are the accessible name and the glyph is announced as nothing, so a link whose meaning is its mark is a link with no meaning at all to a screen reader. The regular or light weights. …
+- **showIcon** `boolean` · optional — Whether the link carries a mark after its words. It reaches both variants: a standalone link on its own line, and an inline one that wants the arrow inside a sentence. …
+  - never: Suppressing the external mark. Leaving the site is a fact about the destination rather than a flourish, so `external` marks itself whatever this says — a page that could turn it off could hand a reader a new tab with no warning
+
+## The type refuses
+
+- variant="inline" with iconLeading="*" — An inline link is part of a sentence and a glyph mid-line breaks the run of words it belongs to. …
+
+## Inside it
+
+- Takes only text.
+- 8 components are refused inside it; the list and the reasons are in the long document.
+- Renders 3 parts: root, icon-leading, icon-trailing.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/link.md`.

package/.llm/digest/menuitem.md

@@ -0,0 +1,46 @@
+<!-- GENERATED from menuitem.contract.json. Do not edit. -->
+
+# MenuItem
+
+One command in a menu. Pressing it does something and the menu shuts — it holds no value and carries no mark, so there is nothing about it to find on reopening. …
+
+`import { MenuItem } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A row in a menu of destinations — a language, a region, a page number an index skipped
+- A set short enough to read at a glance, where a reader is choosing rather than searching
+
+## Something else, when
+
+- The row reports a choice the reader should find marked when they return → **nothing in this system does this**
+- The destination belongs in the page's navigation → **nothing in this system does this**
+- It is one action rather than one of a set → **nothing in this system does this**
+
+## Never
+
+- Anything that destroys. Marketing has no destructive tone by decision — a page navigates a visitor toward a conversion and never deletes on their behalf
+- Carrying the words a reader needs before choosing. A row is a short label; what a choice means belongs on the page, where it can be read without opening anything
+
+## Props
+
+- **size** `enum` · default "md" — Set by the menu that holds the row, not by the page. DropdownMenu passes its own size down to every row it renders, which is the only way a set stays one set — this prop exists so that it can, and a row written on its own takes the default
+  - `sm` — The row of a small menu — one opened from a navigation bar or a footer, where the trigger sits in a row of links
+  - `md` — The default, and the row of every other menu
+  - never: Making one row bigger than its neighbours. A menu is read by running an eye down its left edge, and a row at a different measure reads as a heading rather than as one of the set
+- **disabled** `boolean` · default false — The command cannot be used from here — a language not published yet, a page beyond the set. It stays and recedes, because a menu whose rows come and go is a menu a reader cannot learn
+  - never: A command that is simply not applicable to this object at all, which belongs in a different menu rather than a dimmed row in this one. …
+- **icon** `node` · optional — A mark before the words, for a set read by shape as much as by reading — a flag beside a language, a glyph beside a region. All of them or none: one row with a mark in a set without them reads as the important one
+  - never: Saying what the command does when the words already do. A mark beside "Delete" is recognised faster; a mark beside "Export to CSV as a background job" is decoration in front of a sentence
+- **onSelect** `callback` · required — Always, and it is required for that reason — running something is the whole of what a command is, and this is the only way it does
+  - never: Shutting the menu. That happens on its own, before this is called — a command that had to close its own menu would be a command every page closed differently. …
+
+## Inside it
+
+- Takes only text.
+- 5 components are refused inside it; the list and the reasons are in the long document.
+- Renders 3 parts: root, icon, label.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/menuitem.md`.

package/.llm/digest/navbar.md

@@ -0,0 +1,60 @@
+<!-- GENERATED from navbar.contract.json. Do not edit. -->
+
+# Navbar
+
+The bar across the top of a marketing page, and three regions: the mark that says whose site this is, the places the site has, and the things a reader reaches for rather than navigates to — the language, the theme, and what the site wants them to do. …
+
+`import { Navbar } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A marketing page needs its top-level navigation — the mark, the sections of the site, and whatever sits at the far end
+- The same bar has to persist while the page scrolls, so a reader deep in a long page can still leave it
+- The navigation has to work at a phone's width without the page writing a second version of it
+
+## Something else, when
+
+- The items are versions of one thing rather than places the site has → **TabList**
+- What is wanted is one section's panel rather than the bar it hangs from → **NavbarMenu**
+- The navigation runs down the side of an application rather than across the top of a page → **nothing in this system does this**
+
+## Never
+
+- A second bar further down the page. There is one landmark of this kind per page, and a reader who meets two has been told twice where they are and once too often which is authoritative
+- A toolbar. Controls that act on what is below them — a filter row, a sort row, a set of view switches — are not places, and putting them in the site's navigation landmark means a screen reader announces them as somewhere to go
+- A footer. The same links at the bottom of a page are a sitemap a reader reaches at the end, not a frame they navigate from, and they need none of the sticking or collapsing this does
+- An app shell. This sticks to the top of a document that scrolls; an application whose regions scroll independently needs a frame this cannot be, and the product package is where that lives
+
+## Props
+
+- **tone** `enum` · default "default"
+  - `default` — The page begins on a light ground, which is most marketing pages. The bar paints in ink and the pill is paper
+  - `inverse` — The first section of the page paints its own dark ground and the bar stands on it — a dark hero, a photograph, a brand-coloured takeover. …
+- **label** `string` · required — Always — it names the navigation landmark, and a page with an unnamed one tells a screen-reader user there is navigation here without saying which navigation. …
+  - never: A visible heading. Nothing draws this. A bar needs no title, and a page that wants one has a heading of its own below the bar
+- **menuLabel** `string` · required — Always — the trigger is an icon-only button and this is the only name it has, at the width where it is the only way through the site. …
+  - never: A tooltip or visible text. The trigger draws a glyph and nothing else; this is the name a screen reader reads
+- **closeLabel** `string` · required — Always — it names the panel's close button, which is the only visible way out of a surface covering the whole page. 'Close' is enough; the panel it closes is the only thing open
+  - never: The trigger's name. They are two controls in two places — the trigger is in the bar underneath the panel, and a reader cannot reach it while the panel is open
+- **brand** `node` · optional — Effectively always on a real site — the mark, and usually an anchor to the home page wrapped around it. It is drawn twice: in the bar, and again in the panel's header, where it is the only thing left saying whose site this is
+  - never: A heading for the page. This is the site's mark, not the page's title, and a reader who meets the page's `<h1>` in the bar has been told the name of somewhere they already are
+- **utilities** `node` · optional — The bar's trailing end has something in it — a language switcher, a theme switcher, a conversion action, or some combination. …
+  - never: Destinations. Anything that goes to a section of the site belongs in the children, where the navigation landmark announces it as one. The trailing end is for what a reader reaches for, not for the places the bar ran out of room for
+- **compactAction** `node` · optional — The one thing a reader should still be able to do once the bar has collapsed and everything else has gone into the panel — a sign-up, usually. Drawn beside the control that opens the panel, and only at the widths where that control is drawn
+  - never: The whole of utilities. A phone has room for one action beside a mark and a menu button, and a bar handed two of them either wraps or pushes the mark off its own edge — the rest belong in utilities, which the panel lays out down its foot where there is room for all of them
+- **preferences** `node` · optional — A switcher that belongs with the destinations rather than with the conversion — a language picker, a theme toggle. It is drawn inside the pill, beside the sections, at every scroll position. …
+  - never: A conversion action. Those belong in utilities, at the trailing end of the bar where a reader looks for them, and drawing one inside the pill would put the thing the page most wants pressed in among the places it goes
+- **menuOpen** `boolean` · optional — The page is holding whether the panel is open, because something else depends on it — a route change that should close it, a surface of its own that must not open at the same time. …
+  - never: Half of a controlled bar. A menuOpen passed without an onMenuOpenChange to move it is a panel that cannot be closed from its own close button — a trap around the whole page rather than a bar with a bug
+- **onMenuOpenChange** `callback` · optional — Whenever menuOpen is — together they are how a page holds the panel. It is called with the state being moved to, by the trigger, by the close button and by Escape, so a page listening to it hears every way the panel can change
+  - never: Navigation. This says whether the panel is showing; a page that also routed on it would close the panel by leaving, and a reader pressing a destination inside it would fire both
+
+## Inside it
+
+- Takes only NavbarItem, NavbarMenu.
+- 10 components are refused inside it; the list and the reasons are in the long document.
+- Renders 11 parts: root, inner, ground, brand, nav, preferences, utilities, compact-action, trigger, panel-host, cluster.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/navbar.md`.