@deriv-com/dds-marketing 1.1.1 → 1.1.3

package/.llm/components/landinghero.md

@@ -2,6 +2,10 @@
 
 # LandingHero
 
+Opens a main landing page with its headline over a dark background.
+
+## Why it is built this way
+
 The band that opens a main landing page: the one thing the page is about, said once, at the top, over a ground dark enough that nothing above it competes.
 
 One of three opening bands, and the widest. Which one a page takes follows from where the page sits rather than from a prop — this is the landing tier, the front page and the campaign pages under it.

package/.llm/components/link.md

@@ -2,6 +2,10 @@
 
 # Link
 
+Takes the visitor to another page, inline or on its own.
+
+## Why it is built this way
+
 A destination named inside a sentence, or standing on its own under one. Inside a sentence it takes everything from the copy around it — the size, the face, the ink — and is told apart by an underline alone. On its own line it takes the brand ink and a mark instead, because there is no sentence to belong to.
 
 Button is the other half of this, and the two are the same act — go somewhere — at different volumes. A Button is a pill a reader aims at; a Link is words a reader is already reading. The test is whether taking it out would leave a hole in the sentence: if it would, it is a link, and if the sentence would read fine without it, the page wanted a Button.
@@ -349,7 +353,7 @@ Standalone only, and solid like the arrow — every glyph on a standalone link t
 
 ```tsx
 import { Link } from '@deriv-com/dds-marketing'
-import { FileShieldSolidIcon, WalletSolidIcon } from '@deriv-com/quill-icons-web'
+import { FileShieldSolidIcon, WalletSolidIcon } from '@deriv-com/dds-marketing/icons'
 
 // A destination with a mark of its own
 <Link href="/licence" iconLeading={<FileShieldSolidIcon />}>Read the licence</Link>

package/.llm/components/logocolumns.md

@@ -2,6 +2,10 @@
 
 # LogoColumns
 
+Backs a claim with two columns of logos that scroll in opposite directions.
+
+## Why it is built this way
+
 A section that backs one claim with the names behind it: a heading, a line, an optional disclaimer and a way onward, beside a wall of logo tiles in two columns that run in opposite directions as the reader scrolls past — one rising, one falling — fading out at the wall's top and bottom edge so the set reads as longer than the space it is shown in.
 
 The reference design's LogoMarquee, renamed for what it is: FeatureSplit's arrangement with a logo wall where the picture goes, rather than a marquee, which is a strip that runs sideways on its own. The movement is the scroll's — it never moves while the page is still, and never for a reader who asked for less motion.

package/.llm/components/logorows.md

@@ -2,6 +2,10 @@
 
 # LogoRows
 
+Backs a claim with two rows of logos that slide in opposite directions.
+
+## Why it is built this way
+
 A section that backs one claim with the names behind it, stacked: a heading, a line and a way onward, centred, over two rows of logo tiles across the band's full width that slide sideways in opposite directions as the reader scrolls past — fading out at both of their ends, so the set reads as longer than the band.
 
 LogoColumns' horizontal form, for a page where the claim leads and the logos sign it off: the words over the rows rather than beside a wall. The movement is the scroll's — it never moves while the page is still, and never for a reader who asked for less motion.

package/.llm/components/menuitem.md

@@ -2,6 +2,10 @@
 
 # MenuItem
 
+One item in a DropdownMenu.
+
+## Why it is built this way
+
 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.
 
 It ships ahead of its host, and that is worth saying plainly: its role is menuitem, which means nothing to a screen reader outside an element whose role is menu. On its own it is a row that looks right and announces wrong. DropdownMenu is what makes it a component rather than a fragment, and until that lands this is a contract and a stylesheet waiting for one.
@@ -175,7 +179,7 @@ Two things genuinely have no logical form and are not covered by this. A CSS gra
 
 ```tsx
 import { MenuItem } from '@deriv-com/dds-marketing'
-import { GlobeRegularIcon } from '@deriv-com/quill-icons-web'
+import { GlobeRegularIcon } from '@deriv-com/dds-marketing/icons'
 
 <MenuItem onSelect={() => { /* your handler */ }} icon={<GlobeRegularIcon />}>English</MenuItem>
 ```
@@ -188,7 +192,7 @@ The rows a marketing menu holds: short labels a reader chooses between, not oper
 
 ```tsx
 import { MenuItem } from '@deriv-com/dds-marketing'
-import { GlobeRegularIcon } from '@deriv-com/quill-icons-web'
+import { GlobeRegularIcon } from '@deriv-com/dds-marketing/icons'
 
 // With a mark, for a set read by shape
 <MenuItem onSelect={() => { /* your handler */ }} icon={<GlobeRegularIcon />}>English</MenuItem>

package/.llm/components/navbar.md

@@ -2,6 +2,10 @@
 
 # Navbar
 
+The bar across the top of a marketing page: logo, links and actions.
+
+## Why it is built this way
+
 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.
 
 It holds no destinations of its own. What goes in it is the NavbarItems and NavbarMenus a page composes, because a marketing site's navigation is written by the site rather than enumerated by this system, and a component that took an array of routes would be a second router nobody asked for. What this owns is the bar: where it sits, what it is made of, and what happens when it runs out of room.
@@ -509,7 +513,7 @@ The language is a NavbarSwitcher in preferences. The theme is a toggle the bar d
 ```tsx
 import { Button, Navbar, NavbarSwitcher, NavbarSwitcherOption } from '@deriv-com/dds-marketing'
 import { DerivCoralWordmark } from '@deriv-com/quill-logos-web'
-import { GlobeRegularIcon } from '@deriv-com/quill-icons-web'
+import { GlobeRegularIcon } from '@deriv-com/dds-marketing/icons'
 
 // Language only
 <Navbar label="Main" menuLabel="Menu" closeLabel="Close" brand={<DerivCoralWordmark />} utilities={<Button size="md" href="/signup">Open account</Button>} preferences={<NavbarSwitcher label="EN" menuLabel="Language" backLabel="Back to the menu" icon={<GlobeRegularIcon />} />}>{navbaritems}</Navbar>

package/.llm/components/navbaritem.md

@@ -2,6 +2,10 @@
 
 # NavbarItem
 
+One link in the Navbar.
+
+## Why it is built this way
+
 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.
 
 It exists rather than a Link being reused because a destination in a navigation bar carries something a Link cannot: which one the reader is on. That is `aria-current`, a target big enough to hit, and a resting shape the current one fills in — none of which belongs on the component a page also uses in the middle of a sentence. A Link is prose that leads somewhere; this is furniture.

package/.llm/components/navbarmenu.md

@@ -2,6 +2,10 @@
 
 # NavbarMenu
 
+A Navbar item that opens a wide panel of links.
+
+## Why it is built this way
+
 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.
 
 It is a button and not a link, which is the whole of why it is a component rather than a NavbarItem with extra parts. Pressing it reveals something on the page the reader is already on — no navigation, no history entry, and the back button has nothing to undo. An item that opened a panel while claiming to be a link would be wrong to the browser, to the back button and to every assistive technology at once.

package/.llm/components/navbarmenugroup.md

@@ -2,6 +2,10 @@
 
 # NavbarMenuGroup
 
+A titled list of links inside a NavbarMenu panel.
+
+## Why it is built this way
+
 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.
 
 The word is the whole point and it is not a heading. A panel opens inside a navigation landmark on a page that already has its own outline, and a heading element here would insert a level into that outline for something the reader never sees in the document — so what this draws is a label, and what it gives assistive technology is a named group. The two say the same thing by different means, which is the arrangement a panel like this has to reach for.

package/.llm/components/navbarpanel.md

@@ -2,6 +2,10 @@
 
 # NavbarPanel
 
+The full site navigation for screens too narrow for the Navbar.
+
+## Why it is built this way
+
 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.
 
 It is a surface that covers the page, and three things follow from that which nothing about its appearance suggests — focus is held inside it, Escape closes it, and the document beneath holds still. Those are why it is a component rather than a stretch of markup a page writes, and they live in a hook beside it that a site building its own covering surface can reach for.

package/.llm/components/navbarswitcher.md

@@ -2,6 +2,10 @@
 
 # NavbarSwitcher
 
+Sets a site preference from the Navbar, such as language or theme.
+
+## Why it is built this way
+
 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. It sits in a navigation bar beside the destinations and takes two quite different forms depending on where it is drawn.
 
 In the bar it is a trigger and a menu hanging off it. In the collapsed panel it is a row that opens a page of its own, with a way back — because a menu inside a surface that already covers the screen is a surface inside a surface, and because a phone has room to show sixteen languages properly only if it stops showing everything else.
@@ -223,7 +227,7 @@ Two things genuinely have no logical form and are not covered by this. A CSS gra
 
 ```tsx
 import { NavbarSwitcher, NavbarSwitcherOption, Icon } from '@deriv-com/dds-marketing'
-import { GlobeRegularIcon } from '@deriv-com/quill-icons-web'
+import { GlobeRegularIcon } from '@deriv-com/dds-marketing/icons'
 
 <NavbarSwitcher label="EN" menuLabel="Language" backLabel="Back to the menu" icon={<Icon size="xs"><GlobeRegularIcon /></Icon>}>
   <NavbarSwitcherOption current onSelect={() => { /* your handler */ }}>English</NavbarSwitcherOption>
@@ -244,7 +248,7 @@ import { GlobeRegularIcon } from '@deriv-com/quill-icons-web'
 ```tsx
 import { useState } from 'react'
 import { NavbarSwitcher, NavbarSwitcherOption, Icon } from '@deriv-com/dds-marketing'
-import { GlobeRegularIcon } from '@deriv-com/quill-icons-web'
+import { GlobeRegularIcon } from '@deriv-com/dds-marketing/icons'
 
 // NavbarSwitcher holds nothing: open is the consumer's, and it does not move until
 // the value handed back by onOpenChange is written to it.
@@ -296,7 +300,7 @@ The container decides, not the page. In a bar the choices hang off the trigger;
 
 ```tsx
 import { Icon, NavbarSwitcher } from '@deriv-com/dds-marketing'
-import { GlobeRegularIcon } from '@deriv-com/quill-icons-web'
+import { GlobeRegularIcon } from '@deriv-com/dds-marketing/icons'
 
 // floating — in the bar
 <NavbarSwitcher label="EN" menuLabel="Language" backLabel="Back to the menu" icon={<Icon size="xs"><GlobeRegularIcon /></Icon>} open>{navbarswitcheroptions}</NavbarSwitcher>
@@ -311,7 +315,7 @@ The trigger shows the choice in force rather than the name of the question — a
 
 ```tsx
 import { Icon, NavbarSwitcher } from '@deriv-com/dds-marketing'
-import { GlobeRegularIcon } from '@deriv-com/quill-icons-web'
+import { GlobeRegularIcon } from '@deriv-com/dds-marketing/icons'
 
 // At rest — a mark and the current choice
 <NavbarSwitcher label="EN" menuLabel="Language" backLabel="Back to the menu" icon={<Icon size="xs"><GlobeRegularIcon /></Icon>}>{navbarswitcheroptions}</NavbarSwitcher>
@@ -326,7 +330,7 @@ Only the tints move. The words take the ink around them either way, which is how
 
 ```tsx
 import { Icon, NavbarSwitcher } from '@deriv-com/dds-marketing'
-import { GlobeRegularIcon } from '@deriv-com/quill-icons-web'
+import { GlobeRegularIcon } from '@deriv-com/dds-marketing/icons'
 
 // default — a light bar
 <NavbarSwitcher label="EN" menuLabel="Language" backLabel="Back to the menu" icon={<Icon size="xs"><GlobeRegularIcon /></Icon>}>{navbarswitcheroptions}</NavbarSwitcher>
@@ -341,7 +345,7 @@ Off by default, because a switcher usually stands among destinations that each c
 
 ```tsx
 import { Icon, NavbarSwitcher } from '@deriv-com/dds-marketing'
-import { GlobeRegularIcon } from '@deriv-com/quill-icons-web'
+import { GlobeRegularIcon } from '@deriv-com/dds-marketing/icons'
 
 // Without — among sections that have their own
 <NavbarSwitcher label="EN" menuLabel="Language" backLabel="Back to the menu" icon={<Icon size="xs"><GlobeRegularIcon /></Icon>}>{navbarswitcheroptions}</NavbarSwitcher>

package/.llm/components/navbarswitcheroption.md

@@ -2,6 +2,10 @@
 
 # NavbarSwitcherOption
 
+One choice in a NavbarSwitcher, such as a language or theme.
+
+## Why it is built this way
+
 One choice inside a NavbarSwitcher: a language, a region, a theme. A button rather than a link — choosing one changes how the page is drawn or worded, which is not navigation and must not carry an href, a history entry or anything for the back button to undo.
 
 It says which one is current. That is the whole reason this is a component rather than a MenuItem: a set of choices where the one in force is not marked is a set a reader has to remember the answer to, and the mark has to be readable as well as coloured — `aria-current` carries it for a reader who cannot see the ink.

package/.llm/components/option.md

@@ -2,6 +2,10 @@
 
 # Option
 
+One choice in a list that opens from a control.
+
+## Why it is built this way
+
 One answer on offer inside a control that opens a list. It knows what it is worth and what to call itself, and nothing about where it sits — whether it is the answer, whether the arrow keys are on it, and how tall to be are all passed down, because only the control can see the set. One row for every such control rather than one per control: what differs between one chip and the next is the trigger, never the row.
 
 ## Use when
@@ -230,7 +234,7 @@ For a set the reader knows by sight, where recognising beats reading. It takes t
 
 ```tsx
 import { Option } from '@deriv-com/dds-marketing'
-import { ChartCandlestickRegularIcon, CoinsRegularIcon } from '@deriv-com/quill-icons-web'
+import { ChartCandlestickRegularIcon, CoinsRegularIcon } from '@deriv-com/dds-marketing/icons'
 
 // A glyph the answer is known by
 <Option value="forex" leadingIcon={<ChartCandlestickRegularIcon />}>Forex</Option>

package/.llm/components/pageheader.md

@@ -2,6 +2,10 @@
 
 # PageHeader
 
+Opens a company or legal page with its title and one line of context.
+
+## Why it is built this way
+
 The band that opens a company or a legal page: the page's name, a line saying what it is, and nothing else.
 
 The third of three opening bands and the only one that is not a hero. It is capped rather than a screen tall, which is the whole difference — a reader arrives at Contact or Terms for the content, and a full-height band would be a wall in front of the first sentence.

package/.llm/components/pagination.md

@@ -2,6 +2,10 @@
 
 # Pagination
 
+Moves the reader through a set too large to show at once.
+
+## Why it is built this way
+
 The control that moves a reader through a set too large to show at once. It sits beneath the index, archive or card set it governs, reports where in the sequence the reader stands, and offers the ways out of it — a step either side, a numbered target under one variant, a row of marks under another.
 
 What separates this from product's is what a press is. A page of an index has an address of its own: page two of a blog is a place, and one a search engine has to be able to reach, so the numbered variant draws links and is given the URL of each page. A slide in a carousel is not a place and has no address, so its marks are buttons and the page handles the press. That is not a setting to choose — it is which variant you reached for, and the two cases arrive at different ends of this component.

package/.llm/components/paginationdots.md

@@ -2,6 +2,10 @@
 
 # PaginationDots
 
+Shows which item of a short sequence is in view.
+
+## Why it is built this way
+
 A row of marks, one per position in a short sequence — the slides of a slider, the steps of a walkthrough — with the one the reader is on drawn as a longer, solid pill and the rest as small translucent dots. Every mark is a button that moves there. It draws in the ink of whatever it stands on, so the same row reads white on a coral band and near-black on the page. Under autoplay it also moves on its own.
 
 ## Use when

package/.llm/components/producthero.md

@@ -2,6 +2,10 @@
 
 # ProductHero
 
+Opens a product or market page with a centred headline over a dark background.
+
+## Why it is built this way
+
 The band that opens a product or a market page: the one thing the page is about, centred, over a ground dark enough that nothing above it competes.
 
 The second of three opening bands. Which one a page takes follows from where the page sits rather than from a prop — this is the product tier, one thing a reader can trade or one market to trade it in.

package/.llm/components/removablechip.md

@@ -2,6 +2,10 @@
 
 # RemovableChip
 
+Shows one applied item, such as a filter or tag, that can be removed.
+
+## Why it is built this way
+
 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. It shows a set as it stands, and the only thing it does is go. Reach for one where a marketing page keeps a visible record of what the reader has narrowed to, and each piece of it has to be droppable on its own.
 
 ## Use when
@@ -203,7 +207,7 @@ A painted brand ground where a FilterChip at rest carries an outline — which s
 
 ```tsx
 import { RemovableChip } from '@deriv-com/dds-marketing'
-import { ChartCandlestickRegularIcon } from '@deriv-com/quill-icons-web'
+import { ChartCandlestickRegularIcon } from '@deriv-com/dds-marketing/icons'
 
 // One narrowing, droppable on its own
 <RemovableChip onRemove={() => { /* your handler */ }} label="Market news" />

package/.llm/components/resourcebanner.md

@@ -2,6 +2,10 @@
 
 # ResourceBanner
 
+A dark panel that points readers to related guides and reference pages.
+
+## Why it is built this way
+
 A dark panel at the end of an informational section that points readers at related guides, policies or reference pages — the "here's where to read more" block. A heading and a line on one side, a stacked list of links on the other.
 
 The reference site's ResourceBanner, named the same. The links are a list at every width, so one link and four read the same way: a reader counts them and picks one, and none of them is a call to action.

package/.llm/components/row.md

@@ -2,6 +2,10 @@
 
 # Row
 
+Lays items out in a line with consistent spacing.
+
+## Why it is built this way
+
 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. Everything else about them stays theirs.
 
 It is Stack's twin and not Stack with a direction, because a line and a column are asked different questions. Two of the props here mean nothing down a column: a line can run out of room and break, which a column cannot, and a line can sit its items on one another's first line of text, which a column has no use for. Put both on one component with a direction and half its surface is inert at any moment — a prop that does nothing is a prop a reader has to test to learn about.

package/.llm/components/scenescroll.md

@@ -2,6 +2,10 @@
 
 # SceneScroll
 
+Two full-screen photo scenes that cross-fade as the reader scrolls.
+
+## Why it is built this way
+
 A full-screen section of two scenes — each a photograph filling the band with a heading and a line over it — that change over as the reader scrolls: the screen holds still while the second photograph dissolves in over the first and the first scene's words give way to the second's. Two states of one thing told by the scroll — day and night, before and after, the market open and the market that never closes.
 
 The reference design's DayNightTransition, made generic: nothing in it is about the time of day. The change-over is scrubbed by the scroll itself and run by the stylesheet alone — the section is a tall track whose view timeline drives the dissolve while a screen-tall stage stays pinned inside it — so it runs forward as the reader scrolls down, back as they scroll up, and stands still while the page does. Without a scroll timeline, for a reader who asked for less motion, and before any script, the two scenes are simply drawn one after the other, each a screen tall, with both sets of words readable.

package/.llm/components/scroller.md

@@ -2,6 +2,10 @@
 
 # Scroller
 
+Lays items out in a horizontally scrolling rail.
+
+## Why it is built this way
+
 A rail, and one measure between the things on it. It draws nothing — no ground, no edge, no padding — and owns one decision: that a set too long for the space stays on one line and the reader moves along it.
 
 It is the third answer to a line that has run out of room, and the only one that keeps the order intact. A Row squashes its items or lets them fall onto a second line where nothing aligns; a Grid puts them in tracks and gives up the sequence; this keeps them where they were put and hands the reader the overflow. Where the order is the content — a timeline, a set of steps, a run of testimonials, a rail of logos — that is the difference between a component that shows the set and one that rearranges it.

package/.llm/components/searchinput.md

@@ -2,6 +2,10 @@
 
 # SearchInput
 
+A field for searching a help centre, blog or directory.
+
+## Why it is built this way
+
 A query a visitor types to find something the page did not put in front of them — a help centre, a blog or docs index, a directory of markets. It reports the query and nothing else: what gets searched, how, and what an empty result says all belong to the page, because a field that decided any of that would be wrong for the next list.
 
 It is its own component rather than a TextInput with a magnifier in it, and the two things that make it one are the gesture and the escape. A search commits — on Enter, or as each keystroke filters — where a field in a form waits for a submit button that belongs to the form. And Escape clears it, which no other field here does, because a query is a thing a reader abandons rather than corrects.

package/.llm/components/segmentedcontrol.md

@@ -2,6 +2,10 @@
 
 # SegmentedControl
 
+Picks exactly one option from a short set of joined segments.
+
+## Why it is built this way
+
 A row of joined segments from which exactly one is chosen, drawn from a short set of alternatives that exclude each other. What the reader picks sets a value the page beside it consumes — a billing period, a currency, a platform — rather than moving them anywhere.
 
 It holds which segment is chosen, how tall they all are, and whether the choice can be made at all. Those three belong to the row because no segment can answer them: only one may be current and a segment cannot see its siblings, a row at mixed heights is not a row, and closing one option is a different statement from closing the question.
@@ -356,7 +360,7 @@ Two payment methods a reader tells apart faster by the mark than by the noun. A
 
 ```tsx
 import { SegmentedControl, SegmentedControlItem } from '@deriv-com/dds-marketing'
-import { ChartCandlestickRegularIcon, GlobeRegularIcon } from '@deriv-com/quill-icons-web'
+import { ChartCandlestickRegularIcon, GlobeRegularIcon } from '@deriv-com/dds-marketing/icons'
 
 // Marks beside the words
 <SegmentedControl label="Payment method">

package/.llm/components/segmentedcontrolitem.md

@@ -2,6 +2,10 @@
 
 # SegmentedControlItem
 
+One option in a SegmentedControl.
+
+## Why it is built this way
+
 One option in a segmented control, and nothing on its own — a segment says it is the chosen one of a set, and a set of one has nothing to be chosen from. It draws as a pill with a word in it and is announced as a radio, which is what tells a reader these exclude each other before they press anything.
 
 Which segment is current belongs to the group rather than to the segment: exactly one may be, and a segment cannot see its siblings. So `selected` arrives from SegmentedControl, as `size` does — a row at mixed heights is not a row. `disabled` is the consumer's, and it bars this one option while the rest still answer.
@@ -91,7 +95,7 @@ Never for: A sentence, or a value with its unit spelled out. 'Yearly' rather tha
 
 ### icon — `node`
 
-Use when: The glyph tells the modes apart faster than the words do — a card and a bank beside two payment methods. Import it from @deriv-com/quill-icons-web and pass the element
+Use when: The glyph tells the modes apart faster than the words do — a card and a bank beside two payment methods. Import it from @deriv-com/dds-marketing/icons and pass the element
 Never for: Decoration. A row of segments is scanned, and a mark that says nothing the label does not is one more thing to look past on every one of them
 
 ### onSelect — `callback`
@@ -270,7 +274,7 @@ Its colour steps with the selection exactly as the label's does — a mark left
 
 ```tsx
 import { SegmentedControlItem } from '@deriv-com/dds-marketing'
-import { ChartCandlestickRegularIcon, GlobeRegularIcon } from '@deriv-com/quill-icons-web'
+import { ChartCandlestickRegularIcon, GlobeRegularIcon } from '@deriv-com/dds-marketing/icons'
 
 // Chosen, with a mark
 <SegmentedControlItem value="card" label="Card" selected icon={<GlobeRegularIcon />} />

package/.llm/components/select.md

@@ -2,6 +2,10 @@
 
 # Select
 
+Chooses one option from a list.
+
+## Why it is built this way
+
 A control for choosing one answer from a set the reader scans. It is shut until they open it, and what it shows when shut is the answer they gave — so a form of these reads as a list of decisions rather than a list of empty fields.
 
 On a marketing page it does two jobs, and the contract says both rather than pretending it is only one. It collects an answer a form submits — a country, a language, the kind of enquiry somebody is making. And it narrows what is already on the page — the sort on an index of articles, the market a pricing table is showing. The two differ in what happens after the answer: one is carried to a server when the visitor presses send, the other reshapes the page the moment it is taken. Nothing in the control changes between them, which is why they are one component and not two.

package/.llm/components/selectchip.md

@@ -2,6 +2,10 @@
 
 # SelectChip
 
+A chip that opens a list and shows the option chosen.
+
+## Why it is built this way
+
 A chip that opens a list of answers and keeps the one chosen, so a filter row shows the current narrowing rather than the name of a filter. On a marketing site that is the control above an index whose set is too long to spell out as a row of toggles — a language, a region, a sort order, a market.
 
 ## Use when

package/.llm/components/spinner.md

@@ -2,6 +2,10 @@
 
 # Spinner
 
+Shows that something is loading.
+
+## Why it is built this way
+
 A turning ring that says a wait is real and the page has not stalled. A marketing page has very little to wait for — it is copy and pictures, and they arrive with the page — so a spinner here is the exception rather than the furniture: a form that has just been submitted, an embed or a demo still loading, a band of live figures being fetched.
 
 That rarity is the brief. In an app a spinner is ordinary and a reader waits because they have an account and a reason to; on a landing page it is shown to someone with no stake in the outcome and nothing keeping them there. So it appears where a wait has already started — after the reader did something, or where a section has visibly held space for something that has not come — and nowhere else.

package/.llm/components/stack.md

@@ -2,6 +2,10 @@
 
 # Stack
 
+Lays items out in a column with consistent spacing.
+
+## Why it is built this way
+
 A column, and one measure between its rows. It draws nothing — no ground, no edge, no padding — and owns one decision: how far apart the things stacked in it sit. Everything else about them stays theirs.
 
 It exists because the measure is what pages get wrong, and get wrong quietly. A gap typed as a number agreed with the system on the day it was written and never again. A gap written as a margin on the row belongs to the row, and travels with it into the next layout, where it is wrong and where nobody thinks to look — the last row of every group carrying a measure into whatever follows it. The column is the one thing that can see both sides of the space, so the column is what should own it.

package/.llm/components/stats.md

@@ -2,6 +2,10 @@
 
 # Stats
 
+A heading over a few key figures, each with a short label.
+
+## Why it is built this way
+
 A trust and credibility section of key numbers: a heading, a line under it where the heading needs one, and the figures — each a number and the few words that say what it counts. From the fold they are a row read all at once; on a phone they turn one at a time in a wheel, the one in place large with its neighbours smaller above and below, a dot for each down the start edge — the reference site's mobile stats. The wheel holds while the reader hovers on it or focuses it, and stops for good once they press it; a reader who asked for less motion gets the figures two to a row instead. Each figure counts up from nought, once, as the section arrives on screen, and lands on the value exactly as the page wrote it — on a phone that is the figure in place when the section arrives; the ones that turn in later are already final.
 
 The reference design's StatsSimple. The figure is written in the page's first HTML and is what assistive technology reads, so the count is decoration over a fact that is already there: a reader with no script, a search engine and a reader who asked for less movement all get the final number and nothing else.

package/.llm/components/statusdot.md

@@ -2,6 +2,10 @@
 
 # StatusDot
 
+A small dot marking an item as notable or in a different state.
+
+## Why it is built this way
+
 A small coloured circle that marks one thing in a list of otherwise equal things — either because it is worth noticing, or because it is in a state the others are not. The accent one draws attention and says nothing about a condition; the four beside it each name one. It never carries the meaning on its own: the words next to it do, because a colour is not readable to everyone who has to read it.
 
 ## Use when

package/.llm/components/steps.md

@@ -2,6 +2,10 @@
 
 # Steps
 
+A numbered list of steps beside a supporting picture.
+
+## Why it is built this way
+
 A two-column how-it-works section pairing a supporting picture with a numbered, ordered list of steps, each a title and a line describing it.
 
 It walks a reader through a sequence they are about to follow — opening an account, funding it, placing a first trade — and the numbers are the argument: they say the order matters and how far there is to go. The list is a real ordered list, so the count and the order reach a screen reader too, and the numbers drawn beside each step are the section's own rather than the page's.
@@ -33,7 +37,7 @@ Steps renders 15 elements. A token binding names the part it applies to.
   It paints one of the page's three grounds and the ink that goes with it, in one decision — see `ground`. The ink is set here and inherited by everything inside.
 - `inner` — `<div>`, class `dds-steps__inner`. The measure and the gutter, holding the section's content in the same column as every other section on the page.
 - `split` — `<div>`, class `dds-steps__split`. The two halves. A row at full width with the picture on whichever side `mediaPosition` names, and one column below the fold with the picture first — the order the reference design takes and the one a sequence reads in.
-- `media` — `<div>`, class `dds-steps__media`. The picture, and one of the section's two halves rather than an addition to it. Held to a square and cropped to fill it, so the section is the same shape whatever the page passes. With pictures on the steps it holds all of them in one cell, and the current step's is the one shown: the first while the list is still, each in turn under `autoplay`, crossing over in motion.duration.shift.
+- `media` — `<div>`, class `dds-steps__media`. The picture, and one of the section's two halves rather than an addition to it. Held to a square and cropped to fill it, so the section is the same shape whatever the page passes. With pictures on the steps it holds all of them in one cell, and the current step's is the one shown: the first while the list is still, each in turn under `autoplay`, uncovered over one another in motion.duration.turn.
 - `image` — `<img>`, class `dds-steps__image`. One step's picture, from its `image`, stacked in the media cell with the others and shown while its step is current. Decoration, as the media cell is: what the step says is its title and its line.
 - `content` — `<div>`, class `dds-steps__content`. The title and the steps under it.
   
@@ -56,7 +60,7 @@ Steps renders 15 elements. A token binding names the part it applies to.
 - `step-title` — `<h3>`, class `dds-steps__step-title`. What the reader does at this step. `h3` under the section's `h2`, so a reader moving by heading walks the steps one at a time.
 - `trigger` — `<button>`, class `dds-steps__trigger`. Under `autoplay`, the step's title as a button: pressing it makes the step current and stops the turn for good. Inside the heading, so a reader moving by heading still walks the steps; `aria-current="step"` on the current one says which step is shown. Rendered only when `autoplay` is set.
 - `step-description` — `<p>`, class `dds-steps__step-description`. What the step involves, in a sentence.
-- `progress` — `<span>`, class `dds-steps__progress`. Under `autoplay`, the current step's rule filling from the start edge over motion.duration.dwell — how long until the next step — in the brand's coral. Held where the turn holds, full and still once it stops or for a reader who asked for less motion. Hidden from assistive technology: the current step is said by `aria-current`.
+- `progress` — `<span>`, class `dds-steps__progress`. Under `autoplay`, the current step's rule filling from the start edge over motion.duration.step — how long until the next step — in the brand's coral. Held where the turn holds, full and still once it stops or for a reader who asked for less motion. Hidden from assistive technology: the current step is said by `aria-current`.
 
 Apply these classes from the generated `stepsParts` constant rather than writing the strings by hand.
 
@@ -90,8 +94,8 @@ Never for: Moving the picture on a phone. There is one column there and the pict
 
 ### autoplay — `boolean` (default `false`)
 
-Use when: Whether the steps take their turn on their own: one step is current, its rule fills over motion.duration.dwell, then the next takes over, and back to the first after the last. The current step's number is drawn at full strength and the rest recede; with an `image` on each step the picture changes to the current one's. Each step's title becomes a button that makes it current. Off by default, so a list nobody configured stays still. On, it holds while the pointer is over the section or focus is inside it, waits until the section is on screen, never moves for a reader who asked for less motion, and stops for good once the reader presses a step — the WAI carousel rule CtaBannerSlider follows: a reader who has chosen a step is reading it. That gives a reader a way to stop it, which WCAG 2.2.2 asks for, but not a visible one, so a page that needs 2.2.2 met plainly should leave it off.
-Never for: Steps whose descriptions take longer to read than motion.duration.dwell — leave it off rather than cut the copy to the timer. And a list with no picture per step, where the only thing that moves is a rule: the turn is worth it when the picture changes with it.
+Use when: Whether the steps take their turn on their own: one step is current, its rule fills over motion.duration.step, then the next takes over, and back to the first after the last. The current step's number is drawn at full strength and the rest recede; with an `image` on each step the picture changes to the current one's. Each step's title becomes a button that makes it current. Off by default, so a list nobody configured stays still. On, it holds while focus is inside the section — not under the pointer, so it keeps turning while a reader watches it — waits until the section is on screen, never moves for a reader who asked for less motion, and stops for good once the reader presses a step — the WAI carousel rule CtaBannerSlider follows: a reader who has chosen a step is reading it. That gives a reader a way to stop it, which WCAG 2.2.2 asks for, but not a visible one, so a page that needs 2.2.2 met plainly should leave it off.
+Never for: Steps whose descriptions take longer to read than motion.duration.step — leave it off rather than cut the copy to the timer. And a list with no picture per step, where the only thing that moves is a rule: the turn is worth it when the picture changes with it.
 
 ### title — `string` **Required.**
 
@@ -122,7 +126,7 @@ Guaranteed by the component. Write none of it by hand: the ids these attributes
 - The number drawn beside each step is decoration and is hidden from assistive technology. The ordered list already announces each step's place, and reading the drawn number as well says it twice
 - Each step's title is a heading one level under the section's, so a reader moving by heading walks the steps one at a time
 - The picture is decoration and is hidden from assistive technology — the one picture and every step's alike. What the section says is the title and the steps; a picture carrying something they do not is a section that reads as half empty to anyone who cannot see it
-- Under autoplay, a hold while the pointer is over the section or focus is inside it, no turn until the section is on screen, no movement for a reader who asked for less motion, and a stop for good once a step is pressed — the way to stop a list that would otherwise turn for as long as it is shown, which WCAG 2.2.2 asks for. The current step's title carries aria-current="step", so the step a reader is shown is the step a screen reader names
+- Under autoplay, a hold while focus is inside the section, no turn until the section is on screen, no movement for a reader who asked for less motion, and a stop for good once a step is pressed — the way to stop a list that would otherwise turn for as long as it is shown, which WCAG 2.2.2 asks for. The current step's title carries aria-current="step", so the step a reader is shown is the step a screen reader names
 
 ## Rules
 
@@ -270,7 +274,7 @@ import { AspectRatio, Steps } from '@deriv-com/dds-marketing'
 
 ### Taking turns
 
-With `autoplay` each step takes its turn: its rule fills, its picture shows, then the next. Hover or focus holds it; pressing a step chooses it and stops the turn.
+With `autoplay` each step takes its turn: its rule fills, its picture shows, then the next. Focus holds it, hovering does not; pressing a step stops it.
 
 ```tsx
 import { Steps } from '@deriv-com/dds-marketing'
@@ -280,6 +284,14 @@ import { Steps } from '@deriv-com/dds-marketing'
 
 // autoplay on the dark band
 <Steps title="Get started in three steps" steps={[{"title":"Open an account","description":"Sign up in minutes with your email and a few details.","image":{"src":"/sample-stop-brand.svg","alt":"","width":800,"height":600}},{"title":"Fund it","description":"Deposit with the local payment method you already use.","image":{"src":"/sample-stop-teal.svg","alt":"","width":800,"height":600}},{"title":"Start trading","description":"Pick a market and place your first trade.","image":{"src":"/sample-stop-amber.svg","alt":"","width":800,"height":600}}]} autoplay ground="strong" mediaPosition="end" />
+```
+
+### A picture on each step
+
+Pictures on the steps without autoplay: the list stays still, the first step's picture is shown, and each title is a button that shows its own.
+
+```tsx
+import { Steps } from '@deriv-com/dds-marketing'
 
 // still, a picture on each step — the first is shown
 <Steps title="Get started in three steps" steps={[{"title":"Open an account","description":"Sign up in minutes with your email and a few details.","image":{"src":"/sample-stop-brand.svg","alt":"","width":800,"height":600}},{"title":"Fund it","description":"Deposit with the local payment method you already use.","image":{"src":"/sample-stop-teal.svg","alt":"","width":800,"height":600}},{"title":"Start trading","description":"Pick a market and place your first trade.","image":{"src":"/sample-stop-amber.svg","alt":"","width":800,"height":600}}]} />

package/.llm/components/stickycards.md

@@ -2,6 +2,10 @@
 
 # StickyCards
 
+A heading over cards that stack on top of each other as the page scrolls.
+
+## Why it is built this way
+
 A section whose cards pile up as the page scrolls: a heading, and under it a set of cards that each stop near the top of the window while the next one slides up over them, so the cards are read one at a time and the edges of the ones already read stay showing above the one being read. A covered card draws back a little and darkens as the next one crosses it, which is what makes the pile read as depth.
 
 Two layouts. `compact` is the reference design's StickyMarketCards: text-first cards in a column held to the heading's measure, any number of them, a picture or an animation beside the words where a card has one, and at most four edges showing however long the set is. `feature` is its StickyStackedCards: a few large cards the width of the page, each its words beside a picture filling its half from the fold.