@deriv-com/dds-marketing 1.1.2 → 1.2.0

package/.llm/digest/illustrationlist.md

@@ -0,0 +1,38 @@
+<!-- GENERATED from illustrationlist.contract.json. Do not edit. -->
+
+# IllustrationList
+
+A drawn list of rows — a glyph and a name each — for a picture of the product listing things
+
+`import { IllustrationList } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A pane, or any picture of the product, listing a few things — the forex pairs on a platform, the documents a check needs
+- The list arriving is the point of the picture, played once with `motion="arrive"`
+
+## Something else, when
+
+- A list of benefits or features the page itself is making → **FeatureBullets**
+- A data table the reader compares across → **Table**
+
+## Never
+
+- More than five or six rows. A picture of a long list reads as a list to scroll, and its arrival as a page loading
+- Rows a reader acts on. Nothing in it can be pressed
+- More than one moving thing in a pane. One lead motion per pane
+
+## Props
+
+- **motion** `enum` · optional — The list moves once, on arrival — in an IllustrationCard when the pane has landed, otherwise when it is well into view. At rest, and for a reader who asked for less movement, the list is simply there
+  - `arrive` — The rows come in one after another, and each glyph pops in as its row lands
+  - never: A list beside another moving part in the same pane. One lead motion per pane
+
+## Inside it
+
+- 2 components are refused inside it; the list and the reasons are in the long document.
+- Renders 2 parts: root, row.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/illustrationlist.md`.

package/.llm/digest/illustrationscene.md

@@ -2,7 +2,7 @@
 
 # IllustrationScene
 
-A photograph with an IllustrationCard laid over it — the product shown in the hands of the people who use it: a trade ticket over a trader on the move, a balance over someone at a desk. …
+A photograph with an IllustrationCard laid over it
 
 `import { IllustrationScene } from '@deriv-com/dds-marketing'`
 
@@ -32,18 +32,20 @@ A photograph with an IllustrationCard laid over it — the product shown in the
 - **placement** `enum` · default "center" — Where the card sits over the photograph, so the subject of the photograph stays clear of it
   - `center` — The default: the card in the middle of the frame. For a photograph whose subject frames the middle — a person looking down at what the card shows
   - `bottom` — The card centred along the foot of the frame, held off it by the card's own inset — for a photograph whose subject fills the top: a face, a person reaching up, a skyline
-  - never: Anything but keeping the photograph's subject clear. The card's size is fixed by the shape; placement moves it and nothing else
+  - never: Anything but keeping the photograph's subject clear. The card's width is fixed by the shape; placement moves it, and at the foot holds it to at most two fifths of the frame's height
 - **src** `string` · required — Always. The photograph the scene is set in
   - never: A data URI holding a photograph. A scene's photograph is the heaviest thing on its page and belongs in a file the browser can cache
 - **alt** `string` · default "" — Empty by default, because the card's `label` describes the whole picture and the photograph is decoration. Write one only where the photograph says something the label does not
   - never: Repeating the card's label. A screen reader would hear the picture described twice
+- **shade** `boolean` · default false — The photograph is bright where the card sits — a sunny sky, a white wall — so the glass would come out mid-grey and the card's small lines would fall below AA. …
+  - never: A photograph already dark where the card sits, or darkening the whole photograph. The shade is for the card's type, and on a dark photograph it only takes light out of the scene
 
 ## Inside it
 
 - Takes only IllustrationCard.
 - At least 1, at most 1 — fewer is not this component and more is a different one.
 - 2 components are refused inside it; the list and the reasons are in the long document.
-- Renders 2 parts: root, image.
+- Renders 3 parts: root, image, shade.
 
 ---
 

package/.llm/digest/imagebanner.md

@@ -2,7 +2,7 @@
 
 # ImageBanner
 
-A dark card in the middle of a page, pairing a headline and a line under it with a photograph — beside it or behind it, with one action. …
+A dark card pairing a headline and one action with a photograph
 
 `import { ImageBanner } from '@deriv-com/dds-marketing'`
 
@@ -29,12 +29,12 @@ A dark card in the middle of a page, pairing a headline and a line under it with
 - **ground** `enum` · default "page" — Which of the page's three grounds the band around the card paints. The card is dark whatever this says — that is what the block is — so this is about the rhythm of the page, white, grey or dark, and never about the card. …
   - `page` — The default, and the page's own white, with the dark card set into it. Most of the time: the card is already the break
   - `subtle` — The grey band, for a card that follows a white section the page wants told apart from this one. …
-  - `strong` — `color.bg.brand-strong`, the dark band, with the card a step lighter at color.bg.surface-card-strong so it still reads as a card. …
+  - `strong` — `color.bg.brand-strong`, the dark band, with the card a step lighter at color.bg.surface-card-strong-on-brand-strong so it still reads as a card. …
   - never: Making the card darker. The card is dark on every ground; painting the band dark too spends the page's one dark band on a section that was already one
 - **variant** `enum` · default "split" — What the photograph does: beside the words, or behind them. Both carry one action — two of the reference design's layouts
   - `split` — The default. The words in one half and the photograph filling the other, edge to edge, with one action under the words. …
-  - `cover` — The photograph fills the whole card, with the words over it behind a scrim that darkens the side they are on and leaves the photograph clear on the other. …
-  - never: Choosing by how busy the page looks. Cover hides part of the photograph under the scrim; it is a decision about the photograph, not decoration
+  - `cover` — The photograph fills the whole card, with the words over it on a shade that darkens the words' own column and fades out just past it, leaving the rest of the photograph clear. …
+  - never: Choosing by how busy the page looks. Cover lays the words on part of the photograph behind a shade; it is a decision about the photograph, not decoration
 - **mediaPosition** `enum` · default "end" — Which side the photograph takes, and in cover, which side it shows clear on with the words on the other. Alternating it with the section above is the page's decision, not this one's
   - `end` — The default. The words lead and the photograph follows, which is the order the card argues in
   - `start` — The photograph leads — the second of two cards on a page, or a photograph whose subject faces the words. A split card puts it above the words on a phone as well, as the reference design does
@@ -51,8 +51,14 @@ A dark card in the middle of a page, pairing a headline and a line under it with
   - never: A second action. The card asks for one thing
 - **media** `node` · required — Always. The page's photograph, through AspectRatio or as an image — people or product. Split and cover crop it to fill the space they give it. Alt text is the page's to give, empty where the photograph is decoration
   - never: Artwork with words in it. The cover photograph sits under a scrim and the text, and the split crops to fill
-- **parallax** `boolean` · default true — The photograph drifts against the scroll as the card passes through the view, by motion.distance.drift over the whole pass, so it reads as further away than the card — the reference design's ParallaxBanner, which this replaces. …
+- **parallax** `boolean` · default true — The photograph drifts against the scroll as the card passes through the view, the drift every block's picture shares — drawn at motion.scale.parallax and moved from motion.translate.parallax-from to motion.translate.parallax-to over the whole pass — so it reads as further away than the card — the reference design's ParallaxBanner, which this replaces. …
   - never: Holding still for a reader who asked for less motion — it already holds still for them, and in a browser that cannot drive it from the scroll
+- **stackOnPhone** `boolean` · default false — A cover photograph whose subject a phone's crop would put under the words or cut off — a person, a face, hands. …
+  - never: A split card, which stacks on a phone already, or a photograph that is setting rather than subject. Stacked, the phone loses the cover look, so keep it for the photograph that would otherwise lose its subject
+
+## The type refuses
+
+- variant="split" with stackOnPhone=true — A split card already stacks its words and its photograph on a phone; there is nothing for this to change
 
 ## Inside it
 

package/.llm/digest/landinghero.md

@@ -2,7 +2,7 @@
 
 # LandingHero
 
-The band that opens a main landing page: the one thing the page is about, said once, at the top, over a ground dark enough that nothing above it competes. One of three opening bands, and the widest. …
+Opens a main landing page with its headline over a dark background
 
 `import { LandingHero } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/link.md

@@ -2,7 +2,7 @@
 
 # Link
 
-A destination named inside a sentence, or standing on its own under one. …
+Takes the visitor to another page, inline or on its own
 
 `import { Link } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/logocolumns.md

@@ -2,7 +2,7 @@
 
 # LogoColumns
 
-A section that backs one claim with the names behind it: a heading, a line, an optional disclaimer and a way onward, beside a wall of logo tiles in two columns that run in opposite directions as the reader scrolls past — one rising, one falling — fading out at the wall's top and bottom edge so the set reads as longer than the space it is shown in. …
+Backs a claim with two columns of logos that scroll in opposite directions
 
 `import { LogoColumns } from '@deriv-com/dds-marketing'`
 
@@ -28,7 +28,7 @@ A section that backs one claim with the names behind it: a heading, a line, an o
 - **ground** `enum` · default "strong" — Which of the page's grounds the section paints, and with it the tiles' fill: the recessed surface on the page, the raised white on the grey band, and the strong card on the dark band. …
   - `page` — The page's own white, with tiles at the recessed gray. For full-colour logos drawn for a light ground
   - `subtle` — The grey band, with white tiles on it. For full-colour logos, where the section needs setting apart from the ones around it. …
-  - `strong` — The default. `color.bg.brand-strong`, the dark band, with white words and tiles at color.bg.surface-card-strong — gray.900 in both themes, so the wall is a set of tiles a step lighter than the band. …
+  - `strong` — The default. …
   - never: Marking importance. Every section on a page painted dark is a page with no emphasis left, and a reader stops reading the grounds as meaning anything. Alternating for its own sake is the same mistake more slowly. And never the brand's own coral, `color.bg.brand`, which is not offered here. …
 - **mediaPosition** `enum` · default "start" — Which side the wall takes at full width. Never a promise about a phone: below the fold the words are always first, because a reader on a phone came for them
   - `start` — The default, the reference design's: the wall at the start, the claim beside it at the end

package/.llm/digest/logorows.md

@@ -2,7 +2,7 @@
 
 # LogoRows
 
-A section that backs one claim with the names behind it, stacked: a heading, a line and a way onward, centred, over two rows of logo tiles across the band's full width that slide sideways in opposite directions as the reader scrolls past — fading out at both of their ends, so the set reads as longer than the band. …
+Backs a claim with two rows of logos that slide in opposite directions
 
 `import { LogoRows } from '@deriv-com/dds-marketing'`
 
@@ -27,8 +27,15 @@ A section that backs one claim with the names behind it, stacked: a heading, a l
 - **ground** `enum` · default "strong" — Which of the page's grounds the section paints, and with it the tiles' fill: the recessed surface on the page, the raised white on the grey band, and the strong card on the dark band. …
   - `page` — The page's own white, with tiles at the recessed gray. For full-colour logos drawn for a light ground
   - `subtle` — The grey band, with white tiles on it. For full-colour logos, where the section needs setting apart from the ones around it. …
-  - `strong` — The default. `color.bg.brand-strong`, the dark band, with white words and tiles at color.bg.surface-card-strong — gray.900 in both themes, so the row is a set of tiles a step lighter than the band. …
+  - `strong` — The default. …
   - never: Marking importance. Every section on a page painted dark is a page with no emphasis left, and a reader stops reading the grounds as meaning anything. Alternating for its own sake is the same mistake more slowly. And never the brand's own coral, `color.bg.brand`, which is not offered here. …
+- **background** `enum` · optional — The page's one patterned band, between its hero and its closing call to action — a band a reader should stop at. …
+  - `halftone` — A field of coral dots that grow towards a soft glow at the band's foot and settle to a fine screen away from it
+  - `aurora` — Curtains of the brand's light rising from the band's foot and swaying slowly
+  - `mesh` — The band in the brand's reds folded into one another like a liquid — the loudest of the five, for a dark band
+  - `grid` — Hairlines a pitch apart rising from a soft bloom at the band's foot — the quietest, and the one to reach for first
+  - `rings` — Hairline circles spreading out from the middle of the band's foot
+  - never: More than one band on a page, or a band that is already the hero or the call to action — those carry their own patterns. One pattern is what makes a band the one a reader remembers; two make neither, and a page of them is noise. …
 - **title** `string` · required — Always. The one claim the logos back, in the fewest words that say it — "Trusted by leading platforms worldwide"
   - never: A list of the names. The logos are the names; the heading says what they prove
 - **description** `string` · optional — The line under the heading: what the logos mean for the reader — which payment methods they can use, which platforms they can trade on

package/.llm/digest/menuitem.md

@@ -2,7 +2,7 @@
 
 # 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. …
+One item in a DropdownMenu
 
 `import { MenuItem } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/navbar.md

@@ -2,7 +2,7 @@
 
 # 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. …
+The bar across the top of a marketing page: logo, links and actions
 
 `import { Navbar } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/navbaritem.md

@@ -2,7 +2,7 @@
 
 # NavbarItem
 
-One place the site has, in the bar across the top of it. An anchor with a target around it, a mark for the section the reader is currently in, and nothing else. …
+One link in the Navbar
 
 `import { NavbarItem } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/navbarmenu.md

@@ -2,7 +2,7 @@
 
 # NavbarMenu
 
-A destination in the bar that opens rather than goes: a named trigger, and a wide panel beneath it holding the section's own destinations in columns, usually with something promotional beside them. …
+A Navbar item that opens a wide panel of links
 
 `import { NavbarMenu } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/navbarmenugroup.md

@@ -2,7 +2,7 @@
 
 # NavbarMenuGroup
 
-A named handful of destinations inside a section's panel: a word over a short list, so a reader scanning a panel of twenty links is reading four sets of five rather than twenty of anything. …
+A titled list of links inside a NavbarMenu panel
 
 `import { NavbarMenuGroup } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/navbarpanel.md

@@ -2,7 +2,7 @@
 
 # NavbarPanel
 
-The whole of a site's navigation at a width the bar cannot hold it: the mark and a way out across the top, the destinations down the middle, whatever the site wants across the foot. …
+The full site navigation for screens too narrow for the Navbar
 
 `import { NavbarPanel } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/navbarswitcher.md

@@ -2,7 +2,7 @@
 
 # NavbarSwitcher
 
-Something a reader sets rather than somewhere they go: the language the page is read in, the region its prices are in, the theme it is drawn in. …
+Sets a site preference from the Navbar, such as language or theme
 
 `import { NavbarSwitcher } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/navbarswitcheroption.md

@@ -2,7 +2,7 @@
 
 # NavbarSwitcherOption
 
-One choice inside a NavbarSwitcher: a language, a region, a theme. …
+One choice in a NavbarSwitcher, such as a language or theme
 
 `import { NavbarSwitcherOption } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/option.md

@@ -2,7 +2,7 @@
 
 # Option
 
-One answer on offer inside a control that opens a list. …
+One choice in a list that opens from a control
 
 `import { Option } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/pageheader.md

@@ -2,7 +2,7 @@
 
 # PageHeader
 
-The band that opens a company or a legal page: the page's name, a line saying what it is, and nothing else. The third of three opening bands and the only one that is not a hero. …
+Opens a company or legal page with its title and one line of context
 
 `import { PageHeader } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/pagination.md

@@ -2,7 +2,7 @@
 
 # Pagination
 
-The control that moves a reader through a set too large to show at once. …
+Moves the reader through a set too large to show at once
 
 `import { Pagination } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/paginationdots.md

@@ -2,7 +2,7 @@
 
 # PaginationDots
 
-A row of marks, one per position in a short sequence — the slides of a slider, the steps of a walkthrough — with the one the reader is on drawn as a longer, solid pill and the rest as small translucent dots. …
+Shows which item of a short sequence is in view
 
 `import { PaginationDots } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/producthero.md

@@ -2,7 +2,7 @@
 
 # ProductHero
 
-The band that opens a product or a market page: the one thing the page is about, centred, over a ground dark enough that nothing above it competes. The second of three opening bands. …
+Opens a product or market page with a centred headline over a dark background
 
 `import { ProductHero } from '@deriv-com/dds-marketing'`
 
@@ -42,8 +42,14 @@ The band that opens a product or a market page: the one thing the page is about,
   - never: The background — that is `backgroundImage`. And beside `media`: one product, one picture. Given both, `image` is drawn and `media` ignored
 - **media** `node` · optional — A product picture in a shape the page fixes on purpose — an AspectRatio box, which keeps its ratio across the column. Prefer `image`, which keeps the picture's own shape and adapts to it
   - never: The background. A photograph filling the band is `backgroundImage`; this sits in front of it, in the column, and is never cropped
-- **backgroundImage** `string` · optional — A photograph filling the whole band. It is shown as it is — nothing is painted over it, so choose one already dark enough that the title reads on it
-  - never: A flat colour, or a bright photograph. The band already paints its ground, and nothing here darkens an image on the page's behalf — a pale one leaves the claim unreadable
+- **backgroundImage** `string` · optional — A photograph filling the whole band. It is shown as it is — nothing is painted over it unless `shade` asks for a shade behind the words, so choose one dark enough where the words sit, or turn `shade` on for a bright one
+  - never: A flat colour, or a bright photograph left without `shade`. The band already paints its ground, and a pale photograph with nothing behind the words leaves the claim unreadable
+- **shade** `boolean` · default false — Under `backgroundImage`, when the photograph is bright where the words sit — a daylight sky — and the description or the actions would fall below AA on it. …
+  - never: A band with no photograph, or darkening the whole photograph. The band's own ground already carries the words, and a shade over all of it is the gloom a bright photograph was chosen to avoid
+
+## The type refuses
+
+- shade=true with backgroundImage=null — A shade is drawn between a photograph and the words; with no photograph it darkens the band's own ground, which the words were already set to read on
 
 ## Inside it
 

package/.llm/digest/progressbar.md

@@ -0,0 +1,56 @@
+<!-- GENERATED from progressbar.contract.json. Do not edit. -->
+
+# ProgressBar
+
+Shows how much of a task is done
+
+`import { ProgressBar } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A task has measurable completion and the user needs to see how much is done
+- A longer operation — uploads, setup, or processing — needs progress feedback to reassure the user
+
+## Something else, when
+
+- The work has no measurable end — connecting, waiting on a system that reports nothing → **Spinner**
+- The task finishes as fast as a reader can notice → **nothing in this system does this**
+
+## Never
+
+- Placing icons or labels inside the bar. The fill is a measurement: it is the width that carries the meaning, so anything sitting in it is clipped at one value and swimming at another, and the reader is left judging a number against a moving edge. Put them beside the bar, where they hold still
+- Stacking several bars for one operation. A reader sums what they see, and three bars at a third each read as three tasks rather than one — the one number that matters, how much of the whole is done, is the one nobody can work out. One bar, one task, and the value label says the rest
+- Standing in for a result. A bar at full says the work finished, not that it succeeded, and a failed upload that ends at 100% tells the reader the opposite of what happened. What came of it is a message, not a measurement
+
+## Props
+
+- **size** `enum` · default "md"
+  - `sm` — Dense layouts or inline indicators where vertical space is limited
+  - `md` — Default for standalone progress indicators in forms or dialogs
+- **variant** `enum` · default "default"
+  - `default` — The default, and neutral: no status and no brand. …
+  - `accent` — Brand-coloured, and asked for rather than arrived at. Reach for it where the page is drawing attention to this progress — the one thing on screen a reader is waiting on. …
+  - `success` — Indicating completion or a successful process
+  - `warning` — Progress that needs attention, such as approaching a limit
+  - `error` — Progress of a process that has encountered a problem
+  - `info` — Informational progress such as downloads, syncing, or data loading
+- **value** `number` · default 0 — The amount of work completed — a number between 0 and max. Defaults to 0, which is the honest rendering of nothing started
+  - never: A number outside the range this bar declares. It is held between nought and max before anything is drawn or announced, so a value past the end reads as full to the eye and to the ear alike — the clamp used to be on the width only, and a bar given 150 of 100 was drawn full while announcing 150 of 100
+- **max** `number` · default 100 — The total amount of work differs from the default of 100
+  - never: Nought or less. Nothing can be a fraction of nothing, so there is no percentage to state and the bar reads as empty rather than complete — which is the one answer that is certainly wrong. A task whose size is unknown is ProgressBarIndeterminate
+- **label** `string` · optional — Naming what is in progress, when the bar is not already named by what surrounds it. Omit it for a bar that is part of a labelled flow — an onboarding stepper under its own heading — and name the bar with aria-labelledby instead
+  - never: Displaying the numeric value, which belongs in the value label. And never leave the bar with no name at all: a progressbar announced without one is announced as nothing
+- **showLabel** `boolean` · default true — The label is visible. When false, the label is visually hidden but remains accessible to screen readers
+- **showValueLabel** `boolean` · default true — The numeric progress value is visible alongside the bar
+- **description** `string` · optional — Freeform context below the bar, such as a step count, status message, or time remaining
+- **motion** `enum` · optional — The bar moves once, on arrival — in an IllustrationCard when the pane has landed, otherwise when it is well into view. For a bar shown as a picture of progress. …
+  - `fill` — The bar fills from empty to its value once, on arrival, over motion.duration.dramatic — an account set-up three steps in, shown in a pane
+  - never: A bar reporting real, changing progress — an upload, a form being filled. That bar moves because the task does; filling it on arrival as well would show progress that did not happen
+
+## Inside it
+
+- Renders 6 parts: root, track, fill, label, value-label, description-text.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/progressbar.md`.

package/.llm/digest/removablechip.md

@@ -2,7 +2,7 @@
 
 # RemovableChip
 
-A token standing for one thing that is already in play — a topic the reader has filtered by, a tag on an article, a market they have picked out — which they can take back out. …
+Shows one applied item, such as a filter or tag, that can be removed
 
 `import { RemovableChip } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/resourcebanner.md

@@ -2,7 +2,7 @@
 
 # ResourceBanner
 
-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 dark panel that points readers to related guides and reference pages
 
 `import { ResourceBanner } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/row.md

@@ -2,7 +2,7 @@
 
 # Row
 
-A line, and one measure between the things on it. It draws nothing — no ground, no edge, no padding — and owns one decision: how far apart the things beside one another sit. …
+Lays items out in a line with consistent spacing
 
 `import { Row } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/scenescroll.md

@@ -2,7 +2,7 @@
 
 # SceneScroll
 
-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 full-screen photo scenes that cross-fade as the reader scrolls
 
 `import { SceneScroll } from '@deriv-com/dds-marketing'`
 
@@ -14,6 +14,7 @@ A full-screen section of two scenes — each a photograph filling the band with
 
 ## Something else, when
 
+- The two scenes are one claim with one word changed — "Trade all day", "Trade all night" → **SceneScrollWord**
 - There is one photograph, not two states of something → **ImageBanner**
 - Three or more things to show, each with a picture → **FeatureScroll**
 - The page's opening band, with an action to take → **LandingHero**
@@ -23,8 +24,8 @@ A full-screen section of two scenes — each a photograph filling the band with
 
 - Words a reader must not miss — a price, a disclaimer, a legal line. Each scene's words are on screen for only part of the pass
 - Two of these on one page, or one beside another pinned section. Each holds the screen for a screen and a half of scrolling, and two make the page feel stuck
-- Photographs with words in them. The words are the headings and the lines, where a screen reader and a translation reach them; a photograph saying them is under a scrim and cropped to fill
-- An action. There is no slot for one: a button that dissolves away as the reader scrolls is one they cannot rely on, so the page's next section carries it
+- Photographs with words in them. The words are the headings and the lines, where a screen reader and a translation reach them; a photograph saying them is cropped to fill and has the scene's words set over it
+- Words over a busy or mid-toned stretch of photograph. Nothing lies between the words and the photograph, so the photograph has to leave the words a calm, light or dark stretch to sit on, and the scene's ink has to name which
 
 ## Props
 
@@ -36,13 +37,13 @@ A full-screen section of two scenes — each a photograph filling the band with
   - never: A scene that says the same as the second with a different picture. The change-over is the argument; two scenes that agree have nothing to change between
 - **second** `data` · required — Always. The scene the section changes over to, in the same shape as the first. …
   - never: A continuation of the first scene's sentence. A reader who arrives by heading, or who scrolls past fast, reads each title on its own
-- **link** `node` · optional — A way on for the reader who wants more — "See trading hours", "Learn more". …
-  - never: A button, or a different link per scene. One way on for the section; something to press that changed under the pointer would be the one thing a reader could not rely on
+- **action** `node` · optional — One thing for the reader to do or a way on — "Trade now", "See trading hours" — under the words. …
+  - never: Two actions, or a different one per scene. One thing to do for the section; something to press that changed under the pointer would be the one thing a reader could not rely on
 
 ## Inside it
 
 - 7 components are refused inside it; the list and the reasons are in the long document.
-- Renders 9 parts: root, stage, scene, media, image, content, title, description, link.
+- Renders 9 parts: root, stage, scene, media, image, content, title, description, action.
 
 ---
 

package/.llm/digest/scenescrollword.md

@@ -0,0 +1,56 @@
+<!-- GENERATED from scenescrollword.contract.json. Do not edit. -->
+
+# SceneScrollWord
+
+Two full-screen photo scenes that cross-fade as the reader scrolls, under one title whose last word changes
+
+`import { SceneScrollWord } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- Two states of one thing that one claim covers with one word changed — trade all day and all night, markets open and markets closed, before and after
+- One immersive moment on a product or campaign page, where the claim is the argument and the two photographs show its two halves
+- The opening band of a campaign page built around that claim, at headingLevel h1
+
+## Something else, when
+
+- The two scenes say different things, each with a title of its own → **SceneScroll**
+- The two scenes are one claim with one word changed — "Trade all day", "Trade all night" → **SceneScrollWord**
+- There is one photograph, not two states of something → **ImageBanner**
+- Three or more things to show, each with a picture → **FeatureScroll**
+- The page's opening band, with an action to take → **LandingHero**
+- One statement on its own, revealed as the reader scrolls → **TextScroll**
+
+## Never
+
+- Two titles that only happen to share words. The shared words have to be a claim both words complete; one that reads as a sentence with the second word bolted on is two scenes' worth of title, which SceneScroll draws
+- Words a reader must not miss — a price, a disclaimer, a legal line. Each scene's words are on screen for only part of the pass
+- Two of these on one page, or one beside another pinned section. Each holds the screen for a screen and a half of scrolling, and two make the page feel stuck
+- Photographs with words in them. The words are the headings and the lines, where a screen reader and a translation reach them; a photograph saying them is cropped to fill and has the scene's words set over it
+- Words over a busy or mid-toned stretch of photograph. Nothing lies between the words and the photograph, so the photograph has to leave the words a calm, light or dark stretch to sit on, and the scene's ink has to name which
+
+## Props
+
+- **headingLevel** `enum` · default "h2" — Where the first scene's title sits in the page's outline. The second scene's title takes the level under it — h2 under an h1, h3 under an h2 — because it is the second half of the section the first one names, not a section of its own. …
+  - `h2` — The default: the section sits under the page's own h1, and the scenes' titles are drawn at font.h2
+  - `h1` — The section opens a campaign page and the first scene's title is the page's heading — the reference design's hero use. Drawn at font.h1, the opening band's size
+  - never: Making a mid-page section look like a hero. h1 is the page's heading, and a page has one
+- **titleBefore** `string` · optional — The words of the title that come before the changing word, the same in both scenes — "Trade all ", for "Trade all day" and "Trade all night". …
+  - never: Words that change between the scenes. Where the grammar makes a shared word agree with the changing one — Spanish "todo el día" and "toda la noche" — the agreeing words are part of each scene's `word`, not of what is shared
+- **titleAfter** `string` · optional — The words of the title that come after the changing word, the same in both scenes — " handeln", for German "Den ganzen Tag handeln" and "Die ganze Nacht handeln"; "取引" for Japanese "一日中取引" and "夜通し取引", with no space. …
+  - never: Punctuation alone. A heading takes no full stop, and a mark after the word holds still while the word changes before it, which reads as the mark belonging to neither
+- **first** `data` · required — Always. The scene the section opens on: the word that completes the title, a line under it where the title needs one, and the photograph filling the band behind them. With the shared words around it, it names the section. …
+  - never: A word that does not complete the shared words. Read together they are the heading; a word that only makes sense beside the other scene's is not one
+- **second** `data` · required — Always. The scene the section changes over to, in the same shape as the first. …
+  - never: The first scene's word again with a different picture. The changed word is the argument; two scenes that agree have nothing to change between
+- **action** `node` · optional — One thing for the reader to do or a way on — "Trade now", "See trading hours" — under the words. …
+  - never: Two actions, or a different one per scene. One thing to do for the section; something to press that changed under the pointer would be the one thing a reader could not rely on
+
+## Inside it
+
+- 8 components are refused inside it; the list and the reasons are in the long document.
+- Renders 12 parts: root, stage, scene, media, image, content, title, before, word, after, description, action.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/scenescrollword.md`.

package/.llm/digest/scroller.md

@@ -2,7 +2,7 @@
 
 # Scroller
 
-A rail, and one measure between the things on it. …
+Lays items out in a horizontally scrolling rail
 
 `import { Scroller } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/searchinput.md

@@ -2,7 +2,7 @@
 
 # SearchInput
 
-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. …
+A field for searching a help centre, blog or directory
 
 `import { SearchInput } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/segmentedcontrol.md

@@ -2,7 +2,7 @@
 
 # SegmentedControl
 
-A row of joined segments from which exactly one is chosen, drawn from a short set of alternatives that exclude each other. …
+Picks exactly one option from a short set of joined segments
 
 `import { SegmentedControl } from '@deriv-com/dds-marketing'`
 
@@ -46,6 +46,9 @@ A row of joined segments from which exactly one is chosen, drawn from a short se
   - never: Half of a controlled row. A value passed with no onChange to move it is a control that cannot respond to being pressed, which reads as broken rather than as fixed — and it is the shape a page falls into by adding the value first
 - **onChange** `callback` · optional — Whenever value is — together they are how a page holds the choice. It is called with the chosen segment's value after that segment's own onSelect, so a segment that reports its own presses keeps doing so inside a row
   - never: Side effects a choice should not have. This says which value is in force; a row that also navigated, submitted or fetched on it would be doing the thing its intent says it does not
+- **motion** `enum` · optional — The row moves once, on arrival — in an IllustrationCard when the pane has landed, otherwise when it is well into view. For a row shown as a picture of the product making a choice. …
+  - `slide` — The pill starts on the first segment and slides to the chosen one once, on arrival — a trade ticket set to Sell showing it was Buy first. …
+  - never: A row the reader is about to use. A live control that moves on its own before anyone touches it looks like it has been chosen for them
 
 ## Inside it
 

package/.llm/digest/segmentedcontrolitem.md

@@ -2,7 +2,7 @@
 
 # SegmentedControlItem
 
-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. …
+One option in a SegmentedControl
 
 `import { SegmentedControlItem } from '@deriv-com/dds-marketing'`
 
@@ -38,7 +38,7 @@ One option in a segmented control, and nothing on its own — a segment says it
   - never: The words the reader sees. That is label — a value is an identifier the page matches on, and one doubling as copy breaks the moment the copy is reworded
 - **label** `string` · required — Always — it is the segment's accessible name as well as its words, and a radio with no name is announced as a control with nothing in it. …
   - never: A sentence, or a value with its unit spelled out. 'Yearly' rather than 'Billed once a year' — the explanation belongs beside the control, where a reader who is not choosing still sees it
-- **icon** `node` · optional — 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
+- **icon** `node` · optional — 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: 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` · optional — This segment reports its own presses — logging which plan a visitor looked at, say. It is called with this segment's value, and SegmentedControl chains its own handler after it rather than replacing it
   - never: Holding which segment is current. That is the group's onChange, which fires once for the row; a page wiring up one handler per segment has written the group's job out by hand

package/.llm/digest/select.md

@@ -2,7 +2,7 @@
 
 # Select
 
-A control for choosing one answer from a set the reader scans. …
+Chooses one option from a list
 
 `import { Select } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/selectchip.md

@@ -2,7 +2,7 @@
 
 # SelectChip
 
-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. …
+A chip that opens a list and shows the option chosen
 
 `import { SelectChip } from '@deriv-com/dds-marketing'`