@deriv-com/dds-marketing 1.1.2 → 1.2.0

package/.llm/tokens.md

@@ -11,6 +11,8 @@ one value at every width.
 
 ## color
 
+- `--color-bg-accent-slate` — Decorative surface, no status meaning, e.g. a category badge. The dark, cool accent; it sits close to color.bg.brand-strong, so keep it off dark bands. Never the sole carrier of a distinction. Pair with color.fg.on-solid for text.
+- `--color-bg-accent-slate-subtle` — Lightweight decorative fill, e.g. a category badge, a tinted panel. No status reading. Pair with color.fg.accent-slate for text.
 - `--color-bg-active` — Pressed state for interactive elements. Alpha-based like the hover and one step heavier, so it tints whatever surface it lands on — ink on light and paper on dark.
 - `--color-bg-active-inverse` — Pressed state for an interactive element on a surface that runs against the mode, one step heavier than color.bg.hover-inverse. The mirror of color.bg.active, and paired with it on the same reasoning.
 - `--color-bg-active-on-brand-strong` — Pressed state for an interactive element standing on color.bg.brand-strong, one step heavier than color.bg.hover-on-brand-strong. White at eight in both modes. For a surface that flips with the mode use color.bg.active-inverse.
@@ -19,7 +21,7 @@ one value at every width.
 - `--color-bg-brand-active` — Pressed state for color.bg.brand. One step further along the ramp than the hover, in the same direction, so a press reads as more of what the hover began.
 - `--color-bg-brand-deep` — The brand's darkest red, the same in both themes — a shade in a pattern drawn in the brand's reds, e.g. the deepest pool of Background's mesh. Not a ground for words: color.bg.brand-subtle is the tint that turns with the theme.
 - `--color-bg-brand-hover` — Hover state for color.bg.brand.
-- `--color-bg-brand-strong` — A dark surface, for a band breaking a long page or a card carrying more weight than its neighbours, e.g. a feature band, the footer. gray.950 in light and dark alike, so the band is the same wherever it is drawn. Pair with color.fg.on-brand-strong for text.
+- `--color-bg-brand-strong` — A dark band breaking a long page, or a weightier card, e.g. a feature band, the footer. slate.900 in light, slate.950 in dark so it sits into a dark page. Pair with color.fg.on-brand-strong.
 - `--color-bg-brand-subtle` — A brand ground quiet enough to read dark ink on. The solid coral takes white at 3.39:1 and is waived for a word; this pairs with color.fg.brand well past the bar, so a mark can be brand-coloured without spending the waiver.
 - `--color-bg-danger` — Destructive action surface, e.g. cancel subscription, delete account. Pair with color.fg.on-solid for text.
 - `--color-bg-danger-subtle` — Lightweight danger fill, e.g. error banners, danger badges. Pair with color.fg.danger for text.
@@ -45,8 +47,9 @@ one value at every width.
 - `--color-bg-surface-card-light` — A light card that stays light whatever the theme, e.g. a surface-light Card or CardButton set among dark ones. gray.50 in both modes. Pair with color.fg.on-surface-card-light; for a card that follows the theme use color.bg.surface.
 - `--color-bg-surface-card-light-raised` — The light card on a subtle band. White in light mode, where the band is the light card's own gray.50 and it would vanish; gray.50 in dark, where the band is a tint over near-black. Pair with color.fg.on-surface-card-light.
 - `--color-bg-surface-card-raised` — A card lifting off the ground behind it, e.g. a Card or CardButton on a color.bg.subtle band. White in light, white at six in dark, so a dark card tints the band instead of sitting on it as grey. Menus and popovers take color.bg.surface-raised.
-- `--color-bg-surface-card-strong` — The dark fill of a card weightier than its neighbours, e.g. an accent-strong Card or CardButton. gray.900 in both modes, a step lighter than color.bg.brand-strong so it reads as a card, not a band.
-- `--color-bg-surface-card-strong-raised` — The strong card on a subtle band. gray.900 in light mode, the strong card's own fill, which already stands off the gray.50 band; gray.800 in dark, where the band is a near-black tint the strong card would blend into. Pair with color.fg.on-brand-strong.
+- `--color-bg-surface-card-strong` — The dark fill of a card weightier than its neighbours, e.g. an accent-strong Card or CardButton. slate.900 in both modes, the same as color.bg.brand-strong, so on a dark band it reads by its media and edge rather than by a step of fill.
+- `--color-bg-surface-card-strong-on-brand-strong` — The strong card on a color.bg.brand-strong band, e.g. a logo tile. A step above the band: slate.850 in light, slate.900 in dark. On the page use color.bg.surface-card-strong.
+- `--color-bg-surface-card-strong-raised` — The strong card on a subtle band. slate.900 in light mode, the strong card's own fill, which already stands off the gray.50 band; slate.800 in dark, where the band is a near-black tint the strong card would blend into. Pair with color.fg.on-brand-strong.
 - `--color-bg-surface-glass` — A pane of glass over whatever is behind it, e.g. an IllustrationCard on a band. Light glass in light mode, a faint frosted white in dark, with a blur behind it in both; ink is color.fg.default.
 - `--color-bg-surface-inverse` — The quieter of the two surfaces on a dark ground, for a panel rather than a pill. color.bg.surface-raised-inverse is the stronger lift and is right on a control the size of a navbar's; at that weight a card-sized box reads as a pale patch rather than a surface.
 - `--color-bg-surface-modal` — A surface that covers the page behind a scrim — dialogs, drawers, bottom sheets. The topmost plane there is, so it stays white in light where color.bg.surface is recessed. For one that floats without dimming what is under it use color.bg.surface-raised.
@@ -63,6 +66,7 @@ one value at every width.
 - `--color-bg-transparent` — A fill that is declared and not seen, for an element whose own surface must show through rather than whatever a page happens to sit it on. Needed because omitting the background would leave that surface showing instead.
 - `--color-bg-warning` — Caution surface, e.g. limited offer, expiring promotion. Pair with color.fg.on-solid for text.
 - `--color-bg-warning-subtle` — Lightweight warning fill, e.g. warning banners, warning badges. Pair with color.fg.warning for text.
+- `--color-border-accent-slate` — Decorative edge, no status meaning, e.g. an accent container's outline.
 - `--color-border-danger` — Error validation border, e.g. input with failed validation, error banner edge.
 - `--color-border-default` — Standard border for containers and controls, e.g. input outlines, grouped sections.
 - `--color-border-focus` — The keyboard focus indicator — a border on some controls, a ring on others. Never remove: required for accessibility. Neutral rather than blue, so it is never mistaken for the danger a control is also able to show. Inverts by mode.
@@ -72,10 +76,12 @@ one value at every width.
 - `--color-border-pattern` — The resting lines of a decorative rule grid on the page's ground. A step above color.border.subtle, which a hairline across a whole band thins to nothing; well below the default border, so the grid reads as texture.
 - `--color-border-pattern-inverse` — The resting lines of a decorative rule grid on a dark or coral ground. White at a quarter in both modes, as those grounds are; a step above color.border.subtle-inverse, which a hairline grid thins to nothing.
 - `--color-border-strong` — Emphasised border for active or prominent elements, e.g. active input, selected card edge.
+- `--color-border-strong-inverse` — An emphasised edge on a dark or coral ground, e.g. a secondary button's outline on color.bg.brand-strong or the brand band. The counterpart to color.border.strong; white at 64% in both modes, as the band is the same in both.
 - `--color-border-subtle` — A quiet separator, e.g. dividers, table rules. Alpha-based — works on any surface.
 - `--color-border-subtle-inverse` — A quiet rule on a dark ground. The counterpart to color.border.subtle, which is black at 5% and invisible on one.
 - `--color-border-success` — Success validation border, e.g. confirmed input, success banner edge.
 - `--color-border-warning` — Warning validation border, e.g. approaching-limit input, warning banner edge.
+- `--color-fg-accent-slate` — Decorative text and icons, no status meaning, e.g. a category label. Reads on the page and on color.bg.accent-slate-subtle.
 - `--color-fg-brand` — Brand-coloured text, for a mark or a line on color.bg.brand-subtle. Not for text on the page: the brand is a colour a page uses to point at something, and copy set in it is a page pointing at all of itself.
 - `--color-fg-brand-accent` — The brand label at full saturation — the brand fill's own red, the same in both modes, so a label and a fill agree. For the one row a reader is already on. Only on the bare page, never a tint. 3.11:1 as text, under AA: never the only thing saying it.
 - `--color-fg-danger` — Error and destructive text on neutral surfaces, e.g. validation messages, negative values.
@@ -86,6 +92,7 @@ one value at every width.
 - `--color-fg-muted-inverse` — Supporting copy on a dark ground, e.g. a footer's group labels. White at sixty-four, so it takes the hue of whatever the band is painted rather than sitting cool against a warm one — and so it stays muted on any dark ground instead of on one.
 - `--color-fg-on-brand` — Text and marks on color.bg.brand, e.g. a primary button's label, a checked accent checkbox's tick. White in light and dark alike, because the brand fill does not change with the theme. For other solid fills — danger, success, info — use color.fg.on-solid.
 - `--color-fg-on-brand-strong` — Text and glyphs on color.bg.brand-strong. White in both modes, that surface being dark in both — unlike color.fg.on-solid, which follows the theme.
+- `--color-fg-on-media-light` — Text set straight on a light photograph with no scrim, e.g. a SceneScroll scene over a daylight sky. gray.950 in both modes, because the photograph does not change. Over a dark photograph use color.fg.on-brand-strong.
 - `--color-fg-on-solid` — Text on solid status fills, e.g. danger, success, info buttons and badges. For text on color.bg.brand use color.fg.on-brand; on neutral surfaces use color.fg.default.
 - `--color-fg-on-strong` — Text on color.bg.strong. The opposite extreme from the fill, so the pair is always near-black on white or white on near-black.
 - `--color-fg-on-strong-on-brand` — Text and glyphs on color.bg.strong-on-brand, the near-black fill on the coral band. White in both modes, because the fill does not change — unlike color.fg.on-strong, which follows the theme.
@@ -172,6 +179,8 @@ one value at every width.
 - `--size-menu-panel-min` — The shortest a section's menu panel gets, whatever it holds. A bar's sections rarely have the same number of destinations, and panels that each took their own height would change size as the reader moved along the row.
 - `--size-menu-max` — The tallest a menu's surface gets before its commands scroll. Product's measure, and counted in rows: five whole and part of a sixth at either size. Neither lands on a row boundary — a ceiling cutting clean at the last full row looks like the whole set.
 - `--size-mesh-blur` — How far a mesh background blurs its pools into one another. Enough that no pool keeps an edge, so the reds read as one liquid rather than shapes.
+- `--size-progressbar-track-md` — Track height at size md. Default for standalone progress indicators.
+- `--size-progressbar-track-sm` — Track height at size sm. Thin enough for dense layouts and inline indicators.
 - `--size-review-card-min` — The shortest a TestimonialRow card gets. A floor, not a height: a one-line review keeps a card's shape, and a longer one still grows it.
 - `--size-rings-pitch` — How far apart the rings on a band sit, counted out from the middle of its foot. A pitch, as size.rule-grid.pitch is; tighter than the grid's, because rings spaced that wide read as a target rather than a ripple.
 - `--size-rings-spotlight` — How far the pointer's light reaches on the rings: the radius within which they brighten around the pointer and fade to the resting rings. The rule grid's reach, so the two answer the pointer alike.
@@ -378,6 +387,7 @@ one value at every width.
 ## motion
 
 - `--motion-distance-drift` — How far decoration travels against the scroll while its section passes through the view, one way or the other. Far enough to be seen moving as the reader scrolls past, so it reads as depth.
+- `--motion-distance-shake` — How far a field swings each way when it shakes to say a value was refused. Small on purpose: the field has to stay readable mid-swing, and a reader who has just been told no does not need to be shoved as well.
 - `--motion-duration-dramatic` — Editorial hero entrances for visual impact, e.g. hero headline revealing, landing page title appearing. Not for scroll reveals — use motion.duration.reveal.
 - `--motion-duration-drift` — One way of a slow drift that runs while something is on screen — an aurora wandering along a band's foot and back. Ten seconds, so the movement is felt rather than watched.
 - `--motion-duration-dwell` — How long a rotating message holds before the next one moves in, e.g. a CTA banner's slides. Long enough to read a headline and a line under it; the reference site's 2000 moved before a reader reached the button.

package/AGENTS.md

@@ -55,6 +55,7 @@ a component you give `onChange` or `onClick` to goes in a file of your own that
 
 - **A component is written along the reading axis, not along the page's left and right**
 - **A navigation bar holds at most two buttons: one primary, and one secondary beside it**
+- **A page has at most one patterned band, between its hero and its closing call to action**
 - **A section that paints a ground sets the ink to go with it**
 - **A section's title is centred over stacked content, starts beside content in columns, and starts on a phone**
 - **Anything a pointer has to hit is at least 24px in both directions**
@@ -80,7 +81,7 @@ screen is built in is not something to reach for while building a control.
 
 - **Accordion** — Questions a reader asks near a decision
 - **AccordionItem** — One row inside an Accordion
-- **Background** — A band that has to stand apart from the page around it with more than a change of fill
+- **Background** — The page's one patterned band, between its hero and its closing call to action, on a section built by hand rather than from a block
 - **Badge** — One of a set is the one the page wants read first
 - **BottomSheet** — A task needs the screen's full width and the reader's undivided attention
 - **Breadcrumb** — The page sits inside a section hierarchy, and the levels above it are places the visitor can navigate to
@@ -92,12 +93,17 @@ screen is built in is not something to reach for while building a control.
 - **CardButton** — The whole card is the target rather than a link buried in it
 - **Checkbox** — A choice the user makes now and confirms later
 - **Divider** — Two groups inside one container that nothing else is separating
+- **DocumentLink** — A document on a legal, regulatory or help page
 - **DropdownMenu** — A set of destinations too long for the navigation bar and too short to be a page of its own
 - **FilterChip** — An index is long enough to be worth cutting down and its categories are few enough to show in full
 - **Footer** — A marketing page needs its closing band
 - **FooterGroup** — A set of a footer's destinations belong under one word
 - **Icon** — A glyph stands beside words to speed recognition
 - **IllustrationCard** — Product information laid over a photograph or a piece of art
+- **IllustrationCheck** — A pane, or any picture of the product, showing that something has gone through
+- **IllustrationChoice** — A pane, or any picture of the product, showing a choice
+- **IllustrationCode** — A pane, or any picture of the product, showing a verification step
+- **IllustrationList** — A pane, or any picture of the product, listing a few things
 - **IllustrationScene** — Product information shown over a photograph
 - **Link** — A term inside running copy has a page of its own
 - **MenuItem** — A row in a menu of destinations
@@ -111,6 +117,7 @@ screen is built in is not something to reach for while building a control.
 - **Option** — An answer inside a control that opens a list
 - **Pagination** — An index or archive has been split across pages and the reader needs to move through it
 - **PaginationDots** — Showing where the reader is in a short sequence they move through
+- **ProgressBar** — A task has measurable completion and the user needs to see how much is done
 - **RemovableChip** — An index shows the narrowings currently applied above its results, and each has to come off on its own without clearing the rest
 - **SearchInput** — A help centre, a knowledge base, or documentation
 - **SegmentedControl** — Two to four alternatives that exclude one another, where the whole set is worth showing at once and the reader decides by weighing them side by side rather than recalling which exist
@@ -149,7 +156,9 @@ screen is built in is not something to reach for while building a control.
 - **CtaBanner** — A short, high-contrast promotion with one clear action
 - **CtaBannerSlider** — Rotating between two or three genuinely different promotions without a hero's weight
 - **DataTable** — Trading instruments and their specifications
+- **Documents** — A legal or regulatory page's documents
 - **DownloadBanner** — Promoting an app across the stores and platforms it ships on
+- **Estimator** — A page lets a reader work something out before they act
 - **FaqAccordion** — The questions a reader asks before acting
 - **FeatureBullets** — A page has to list what a product or a plan includes, and the list is the argument
 - **FeatureCards** — Three or four things a product does, each a card with a heading, a line and a picture under them, read side by side and compared at a glance
@@ -157,6 +166,7 @@ screen is built in is not something to reach for while building a control.
 - **FeatureScroll** — A page has three or more things of the same kind to explain, each with a picture worth a screen
 - **FeatureSplit** — A page needs one more point about something it has already introduced, with a picture to carry it
 - **FeatureStack** — A statement with a picture that carries it
+- **FeatureTabs** — Several versions of one thing a reader takes one at a time
 - **ImageBanner** — Driving a single mid-page or end-of-page action with a photograph to carry it
 - **LandingHero** — A main landing page needs its opening band
 - **LogoColumns** — Showing the partners, integrations or payment methods behind a claim
@@ -165,7 +175,9 @@ screen is built in is not something to reach for while building a control.
 - **ProductHero** — A product or a market page needs its opening band
 - **ResourceBanner** — Pointing readers at related guides, policies, or reference pages at the end of an informational section
 - **SceneScroll** — Two states of one thing a page wants felt rather than listed
+- **SceneScrollWord** — Two states of one thing that one claim covers with one word changed
 - **Stats** — Three to five headline numbers that prove scale or credibility
+- **StatsCarousel** — A trust band where each figure is a moment rather than a column to compare
 - **Steps** — A page explains a get-started or onboarding flow
 - **StickyCards** — A set of markets, products or benefits a page wants read one at a time as the reader scrolls
 - **TeamGrid** — A leadership team, an advisory board or a regional management list on an about page
@@ -186,7 +198,7 @@ saying what to mount and where.
 ## Reading order
 
 1. This file.
-2. `.llm/rules.md` before writing anything — 5,200 tokens, and it is where the constraints
+2. `.llm/rules.md` before writing anything — 5,500 tokens, and it is where the constraints
    that no single component can state live.
 3. `.llm/digest/<name>.md` for every component you are using — **all of it, not the part
    you were looking for**. Around 1,400 tokens each: what it is for, what to reach for

package/README.md

@@ -19,13 +19,15 @@ on when to reach for it. Product apps want
 npm install @deriv-com/dds-marketing
 ```
 
-React 19 and the Quill icon set are peer dependencies, so install them alongside it if
-your app does not already have them:
+React 19 is a peer dependency, so install it alongside if your app does not already have
+it:
 
 ```bash
-npm install react react-dom @deriv-com/quill-icons-web
+npm install react react-dom
 ```
 
+The Quill icon set comes with the package — there is nothing else to install.
+
 ## Use
 
 Import the stylesheet once, at the root of your app. It defines every token this package's
@@ -60,6 +62,29 @@ export function Home() {
 
 Each component brings its own stylesheet with it, so nothing else needs importing.
 
+## Icons
+
+Every [Quill](https://github.com/deriv-com/product-design-quill-icons) icon is re-exported
+from `@deriv-com/dds-marketing/icons`, under the name Quill gives it:
+
+```tsx
+import { Icon } from '@deriv-com/dds-marketing'
+import { CircleCheckSolidIcon } from '@deriv-com/dds-marketing/icons'
+import { UsdIcon } from '@deriv-com/dds-marketing/icons/currency'
+
+<Icon label="Verified"><CircleCheckSolidIcon /></Icon>
+```
+
+Each Quill group has a subpath of its own — `accounts`, `app-stores`, `currency`, `flag`,
+`illustrative`, `markets`, `social`, `system` and `trade`. Production builds tree-shake either
+form to the icons you use; a dev server does not, so the group subpaths keep it from loading
+all ~1,850 at once. Raw SVG files are not re-exported; for those, install
+`@deriv-com/quill-icons-web` and use its `svg/` folder.
+
+An app that already imports from `@deriv-com/quill-icons-web` keeps working. It is the same
+module, so the two can be mixed while you migrate — but drop the direct dependency when you
+are done, or pin it to the range this package uses, so the app does not bundle two copies.
+
 ## Fonts
 
 The system is designed for [Inter](https://rsms.me/inter/) (all text) and

package/dist/components/arrival.d.ts

@@ -0,0 +1,32 @@
+import { type RefObject } from 'react';
+/**
+ * Where a part that moves once on arrival has got to.
+ *
+ * `still` is the resting answer and the part's final state: what a server draws, what a reader who
+ * asked for less movement sees, and what a part with no motion turned on is. `waiting` holds the
+ * motion at its first frame; `playing` runs it, once.
+ */
+export type Arrival = 'still' | 'waiting' | 'playing';
+/**
+ * When a part with a motion of its own — a figure that rolls, a word that swaps, a bar that fills —
+ * plays it. The part sets the answer on itself as `data-arrival`, and its stylesheet holds its
+ * animation paused while that reads `waiting` and lets it run at `playing`. Nothing about the
+ * motion itself is here: the steps, the timings and the easing are the stylesheet's, in the
+ * package's motion tokens.
+ *
+ * A part plays where it is, which is what makes the same motion usable anywhere:
+ *
+ * - inside a host that is itself arriving — an IllustrationCard, which marks itself
+ *   `data-arrival-host` — it follows that, so a pane's parts play when the pane has landed rather
+ *   than each on its own;
+ * - inside a block's reveal (`data-revealed`, see use-reveal.ts) it waits for the block to bring
+ *   it in, and for the part of the block that holds it to finish moving, so it plays on something
+ *   that has come to rest;
+ * - anywhere else it plays once it is well into view — six tenths of it showing — so a figure at
+ *   the foot of a section is not over before a reader reaches it.
+ *
+ * It answers `still` until it is running, for use-reveal's reason: a motion that held a part at
+ * its first frame until a script arrived would leave a reader with no script looking at zeros and
+ * empty boxes. And it fires once, then lets go.
+ */
+export declare function useArrival<T extends HTMLElement>(enabled?: boolean): [ref: RefObject<T | null>, arrival: Arrival];

package/dist/components/arrival.js

@@ -0,0 +1,140 @@
+'use client';
+import { useLayoutEffect, useRef, useState } from 'react';
+/**
+ * When a part with a motion of its own — a figure that rolls, a word that swaps, a bar that fills —
+ * plays it. The part sets the answer on itself as `data-arrival`, and its stylesheet holds its
+ * animation paused while that reads `waiting` and lets it run at `playing`. Nothing about the
+ * motion itself is here: the steps, the timings and the easing are the stylesheet's, in the
+ * package's motion tokens.
+ *
+ * A part plays where it is, which is what makes the same motion usable anywhere:
+ *
+ * - inside a host that is itself arriving — an IllustrationCard, which marks itself
+ *   `data-arrival-host` — it follows that, so a pane's parts play when the pane has landed rather
+ *   than each on its own;
+ * - inside a block's reveal (`data-revealed`, see use-reveal.ts) it waits for the block to bring
+ *   it in, and for the part of the block that holds it to finish moving, so it plays on something
+ *   that has come to rest;
+ * - anywhere else it plays once it is well into view — six tenths of it showing — so a figure at
+ *   the foot of a section is not over before a reader reaches it.
+ *
+ * It answers `still` until it is running, for use-reveal's reason: a motion that held a part at
+ * its first frame until a script arrived would leave a reader with no script looking at zeros and
+ * empty boxes. And it fires once, then lets go.
+ */
+export function useArrival(enabled = true) {
+    const held = useRef(null);
+    const [arrival, setArrival] = useState('still');
+    useLayoutEffect(() => {
+        const element = held.current;
+        if (!enabled || element === null)
+            return undefined;
+        if (typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+            return undefined;
+        }
+        if (typeof IntersectionObserver === 'undefined' || typeof MutationObserver === 'undefined')
+            return undefined;
+        if (element.getClientRects().length === 0)
+            return undefined;
+        let cancelled = false;
+        const cleanups = [];
+        const play = () => {
+            // The next frame, for use-reveal's reason: a transition or an animation needs its first
+            // frame painted before it has anything to move from.
+            const frame = requestAnimationFrame(() => {
+                if (!cancelled)
+                    setArrival('playing');
+            });
+            cleanups.push(() => cancelAnimationFrame(frame));
+        };
+        // Following something that is itself arriving — a pane — its answer is this part's answer. The
+        // host is found by a mark it carries from its first render, because its own answer is set in a
+        // layout effect that runs after this one: a child's effects run before its parent's.
+        const leader = element.parentElement?.closest('[data-arrival-host]') ?? null;
+        if (leader !== null) {
+            // No frame put off here, unlike playing on its own below: a part following its host has been
+            // painted waiting beside it all along, so it has its first frame already — and a frame asked
+            // for from inside the host's own switch can be one the browser never draws.
+            const follow = () => {
+                if (leader.dataset['arrival'] !== 'playing')
+                    return false;
+                if (!cancelled)
+                    setArrival('playing');
+                return true;
+            };
+            setArrival('waiting');
+            if (!follow()) {
+                const watch = new MutationObserver(() => {
+                    if (follow())
+                        watch.disconnect();
+                });
+                watch.observe(leader, { attributes: true, attributeFilter: ['data-arrival'] });
+                cleanups.push(() => watch.disconnect());
+            }
+            return () => {
+                cancelled = true;
+                cleanups.forEach((clean) => clean());
+            };
+        }
+        setArrival('waiting');
+        const landed = () => {
+            // Inside a block's reveal, the part of the block that holds this one — or this one itself —
+            // is moving in on a transition. The motion starts when that has come to rest.
+            const mover = element.closest('[data-reveal-at]');
+            const settle = Math.max(restingIn(element), mover === null ? 0 : restingIn(mover));
+            if (settle === 0) {
+                play();
+                return;
+            }
+            const timer = window.setTimeout(play, settle);
+            cleanups.push(() => window.clearTimeout(timer));
+        };
+        const watchReveal = () => {
+            const block = element.closest('[data-revealed]');
+            if (block === null || block.dataset['revealed'] === 'true') {
+                landed();
+                return;
+            }
+            const watch = new MutationObserver(() => {
+                if (block.dataset['revealed'] === 'true') {
+                    watch.disconnect();
+                    landed();
+                }
+            });
+            watch.observe(block, { attributes: true, attributeFilter: ['data-revealed'] });
+            cleanups.push(() => watch.disconnect());
+        };
+        // Seen once most of it is on screen — or, for a part taller than the screen, once it fills most
+        // of the screen. Six-tenths of a part three screens tall is never on screen at once, and a part
+        // that waited for that would wait at its first frame forever. The finer thresholds are what let
+        // the callback hear a tall part fill the screen, which no single crossing of 0.6 would report.
+        const seen = new IntersectionObserver((entries) => {
+            const landedOnScreen = entries.some((entry) => entry.isIntersecting &&
+                (entry.intersectionRatio >= 0.6 ||
+                    (entry.rootBounds !== null && entry.intersectionRect.height >= entry.rootBounds.height * 0.6)));
+            if (!landedOnScreen)
+                return;
+            seen.disconnect();
+            watchReveal();
+        }, { threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6] });
+        seen.observe(element);
+        cleanups.push(() => seen.disconnect());
+        return () => {
+            cancelled = true;
+            cleanups.forEach((clean) => clean());
+        };
+    }, [enabled]);
+    return [held, arrival];
+}
+/** How long an element's own transition takes to finish from now: its first delay and duration. */
+function restingIn(element) {
+    const style = getComputedStyle(element);
+    const seconds = (value) => {
+        const first = value.split(',')[0]?.trim() ?? '0s';
+        const amount = Number.parseFloat(first);
+        if (!Number.isFinite(amount))
+            return 0;
+        return first.endsWith('ms') ? amount : amount * 1000;
+    };
+    return seconds(style.transitionDelay) + seconds(style.transitionDuration);
+}

package/dist/components/arrives.d.ts

@@ -0,0 +1,17 @@
+import { type ReactElement, type Ref } from 'react';
+type Element = ReactElement<Record<string, unknown> & {
+    ref?: Ref<HTMLElement>;
+}>;
+/**
+ * Gives one element its arrival — `data-arrival`, from useArrival — so a component with no script
+ * of its own can move once on arrival without becoming a client component: it wraps the element it
+ * draws only when a motion has been asked for. The element keeps everything it was given, and
+ * anything handed to this wrapper — a tooltip's handlers, cloned onto what it holds — is passed on
+ * to it.
+ */
+export declare function Arrives({ children, ...handed }: {
+    children: Element;
+} & Record<string, unknown>): ReactElement<Record<string, unknown> & {
+    ref?: Ref<HTMLElement>;
+}, string | import("react").JSXElementConstructor<any>>;
+export {};

package/dist/components/arrives.js

@@ -0,0 +1,14 @@
+'use client';
+import { cloneElement } from 'react';
+import { useArrival } from './arrival.js';
+/**
+ * Gives one element its arrival — `data-arrival`, from useArrival — so a component with no script
+ * of its own can move once on arrival without becoming a client component: it wraps the element it
+ * draws only when a motion has been asked for. The element keeps everything it was given, and
+ * anything handed to this wrapper — a tooltip's handlers, cloned onto what it holds — is passed on
+ * to it.
+ */
+export function Arrives({ children, ...handed }) {
+    const [held, arrival] = useArrival();
+    return cloneElement(children, { ...handed, ref: held, 'data-arrival': arrival === 'still' ? undefined : arrival });
+}

package/dist/components/blocks/awards/Awards.js

@@ -5,6 +5,7 @@ import './Awards.css';
 import './awards-impl.css';
 import '../block-reveal.css';
 import { arriving, useReveal } from '../use-reveal.js';
+import { Laurel } from '../laurel.js';
 import { awardsDefaults, awardsParts, } from './Awards.types.js';
 /**
  * Where an award comes in the arrival, capped so a long list does not keep a reader waiting.
@@ -15,32 +16,6 @@ import { awardsDefaults, awardsParts, } from './Awards.types.js';
  */
 const FIRST_AWARD = 1;
 const LAST_STEP = FIRST_AWARD + 4;
-/**
- * The reference design's laurel, the vector its Stats section draws, in one colour.
- *
- * The left-hand branch: its leaves curl up and in toward whatever stands to its right. The second
- * branch is this one mirrored, by the stylesheet, so one drawing serves both sides and a right-to-left
- * page can swap which side is mirrored without a second picture. The reference laid it at a fifth of
- * its strength; here it takes the band's quieter ink instead, a colour role rather than an alpha, so
- * it follows the ground the way every other quiet thing in the package does.
- */
-const LAUREL_PATHS = [
-    'M20.8655 76.0151C21.3631 78.5487 22.4577 80.4673 23.4245 81.7447C23.7945 82.2337 24.145 82.6275 24.4343 82.9245C24.5003 81.0424 24.5392 77.0209 23.854 73.543C23.3836 71.2282 22.6189 69.4263 21.9723 68.1997C21.7486 67.7754 21.539 67.42 21.3608 67.1361C21.2158 67.6487 21.042 68.3446 20.8935 69.1718C20.5634 71.0111 20.3623 73.4782 20.8655 76.0151Z',
-    'M9.19518 69.4464C8.5612 69.2311 8.01354 69.0792 7.6041 68.9776C7.77674 69.5261 8.03563 70.2542 8.40971 71.0711C9.16156 72.713 10.3603 74.6729 12.1472 76.0342C13.9141 77.3864 15.8077 77.7752 17.2669 77.8239C17.9963 77.8483 18.6126 77.7873 19.0419 77.7209C18.3715 76.5307 16.6347 73.8279 14.0892 71.9349C12.4167 70.7081 10.6015 69.924 9.19518 69.4464Z',
-    'M14.1789 62.4853C14.1095 65.0056 14.7018 67.1343 15.3106 68.6265C15.5268 69.1563 15.7445 69.6045 15.9342 69.9597C16.0737 69.4242 16.2473 68.7196 16.4239 67.9038C16.8294 66.0308 17.2467 63.5892 17.309 61.2688C17.3584 58.9612 17.0322 57.019 16.6942 55.65C16.5809 55.1908 16.4663 54.7965 16.3643 54.4749C16.1414 54.8952 15.8702 55.4487 15.5956 56.1107C14.9268 57.7233 14.2444 59.9642 14.1789 62.4853Z',
-    'M6.16644 56.5363L5.92729 56.2113C4.18123 53.9739 2.10237 52.4221 0.99942 51.685C1.0448 52.2219 1.13195 52.9558 1.29599 53.7969C1.6458 55.5904 2.33816 57.834 3.68889 59.699C5.02796 61.5534 6.66938 62.5331 7.97363 63.0496C8.56984 63.2857 9.09434 63.4244 9.48448 63.5049C9.08235 62.1271 8.06278 59.1136 6.16644 56.5363Z',
-    'M12.9202 41.9556C12.9103 41.468 12.8857 41.0438 12.8578 40.6964C12.5852 41.0139 12.2554 41.4254 11.9043 41.9234C10.9787 43.2365 9.91222 45.1415 9.34811 47.5086L9.21888 48.0509C8.78948 50.2094 8.89878 52.2002 9.13088 53.6853C9.21855 54.2463 9.32345 54.7333 9.42253 55.1275C10.2101 53.5777 11.6117 50.5783 12.3444 47.5177C12.8519 45.3454 12.9491 43.3817 12.9202 41.9556Z',
-    'M4.26838 40.1575C3.16507 37.3338 1.55966 35.0449 0.658674 33.8839C0.595099 34.3962 0.53299 35.0674 0.509766 35.8425C0.454879 37.6743 0.618233 40.0556 1.46849 42.2871C2.30759 44.5064 3.60611 45.9871 4.68907 46.9107C5.12959 47.2864 5.53393 47.5694 5.85602 47.7717C5.82536 47.3041 5.77132 46.6715 5.67501 45.9295C5.46619 44.3205 5.06044 42.211 4.27156 40.1569L4.26838 40.1575Z',
-    'M12.6632 27.4606C11.6314 28.3597 10.3804 29.7129 9.40352 31.5834L9.20135 32.004C8.19489 34.0975 7.83678 36.2499 7.73379 37.8807C7.69736 38.4576 7.693 38.9667 7.70264 39.3814C7.98105 39.0479 8.31846 38.6306 8.68777 38.1462C9.68653 36.8365 10.9078 35.0512 11.829 33.1204C12.7356 31.1936 13.238 29.3215 13.5154 27.9233C13.6157 27.4178 13.6864 26.9753 13.7361 26.6158C13.4324 26.8302 13.0648 27.1106 12.6632 27.4606Z',
-    'M7.15889 23.0454L7.23043 22.5253C7.54518 19.6881 7.36017 17.0948 7.19664 15.6517C6.9244 16.0575 6.59747 16.5777 6.25738 17.1905C5.37216 18.7855 4.41002 20.986 4.07631 23.4177C3.74032 25.8399 4.108 27.8499 4.55657 29.25C4.7215 29.7648 4.89717 30.1965 5.05235 30.5349C5.64762 29.1157 6.71893 26.2445 7.15889 23.0454Z',
-    'M20.7056 14.8951C19.4372 15.269 17.7724 15.9875 16.1554 17.3693L16.021 17.4932C14.3576 18.9542 13.2217 20.7665 12.5041 22.2202C12.2403 22.7546 12.0346 23.2374 11.8812 23.6318C12.2297 23.4596 12.6507 23.2423 13.1195 22.9822C14.4495 22.2442 16.1506 21.1686 17.6705 19.808C19.177 18.446 20.3493 16.9414 21.1512 15.7693C21.4549 15.3255 21.7047 14.9307 21.8987 14.6109C21.5673 14.6707 21.1626 14.7604 20.7056 14.8951Z',
-    'M15.246 9.89451L15.3989 9.48769C16.3817 6.71545 16.8681 4.08928 17.0948 2.56556C16.7641 2.88544 16.3703 3.28963 15.9481 3.76978C14.7583 5.12276 13.3571 7.06214 12.4902 9.40367C11.6163 11.7394 11.483 13.8564 11.5665 15.3854C11.595 15.9081 11.6489 16.3613 11.7069 16.7298C11.9415 16.3768 12.2271 15.9318 12.5414 15.4103C13.3841 14.0121 14.4266 12.0747 15.246 9.89451Z',
-    'M24.236 2.86551C22.4046 4.24716 21.0854 6.09763 20.225 7.6144C19.8673 8.24502 19.5916 8.81333 19.3933 9.25894C19.765 9.11933 20.2233 8.93634 20.7396 8.70812C22.1292 8.09394 23.9267 7.15785 25.5896 5.86671C27.2408 4.56435 28.6049 3.04428 29.5633 1.84034C29.9762 1.32163 30.3123 0.863542 30.5622 0.509562C30.206 0.526204 29.7564 0.567871 29.2396 0.659382C27.8788 0.900297 26.0564 1.48555 24.236 2.86551Z',
-];
-/** One laurel branch. Decoration: hidden from assistive technology and never focusable. */
-function Laurel({ side }) {
-    return (_jsx("svg", { className: awardsParts.laurel, "data-side": side, viewBox: "0 0 32 84", fill: "none", "aria-hidden": "true", focusable: "false", children: LAUREL_PATHS.map((d) => (_jsx("path", { d: d, fill: "currentColor", stroke: "currentColor" }, d))) }));
-}
 /**
  * Whether the list is wider than the room it has — the phone's row, and only while it runs on past
  * the band's edge.
@@ -78,7 +53,7 @@ function useOverflowing(list) {
 }
 /** One award's badge: the award's words between its two laurels. */
 function Badge({ award }) {
-    return (_jsxs(_Fragment, { children: [_jsx(Laurel, { side: "leading" }), _jsxs("div", { className: awardsParts.copy, children: [_jsx("p", { className: awardsParts.name, children: award.title }), _jsx("p", { className: awardsParts.issuer, children: award.issuer })] }), _jsx(Laurel, { side: "trailing" })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Laurel, { className: awardsParts.laurel, side: "leading" }), _jsxs("div", { className: awardsParts.copy, children: [_jsx("p", { className: awardsParts.name, children: award.title }), _jsx("p", { className: awardsParts.issuer, children: award.issuer })] }), _jsx(Laurel, { className: awardsParts.laurel, side: "trailing" })] }));
 }
 /**
  * A heading over the awards a company has won, each between two laurels — the reference design's

package/dist/components/blocks/block-pattern.css

@@ -0,0 +1,23 @@
+/*
+ * The page's one patterned band, drawn as a block's first layer.
+ *
+ * A block that offers `background` places a Background with nothing to hold as its section's first
+ * child, and Background, as a layer, fills its positioned parent behind that parent's content. So
+ * the section is positioned and isolated, and its own content is lifted over the layer by being
+ * positioned after it: the pattern is under the content and over nothing — the section's first
+ * layer, not a wrapper round it.
+ *
+ * Defined once, as block-reveal.css is, and imported by each block that offers the pattern, so a fix
+ * to how the layer stacks lands in every one of them. Keyed on the layer being there rather than on
+ * each block's name, so a block that comes to offer the pattern needs nothing added here — and not
+ * on `data-background` alone, which CtaBanner, LandingHero and PageHeader set too, for a ground of
+ * their own: this sheet is global once any block loads it, and theirs must not be repositioned.
+ */
+:where([data-dds-context="marketing"]) [data-background]:has(> .dds-background[data-layer='true']) {
+  isolation: isolate;
+  position: relative;
+}
+
+:where([data-dds-context="marketing"]) [data-background]:has(> .dds-background[data-layer='true']) > :not(.dds-background) {
+  position: relative;
+}

package/dist/components/blocks/comparison-cards/comparison-cards-impl.css

@@ -209,6 +209,35 @@
   color: var(--color-fg-on-brand-strong);
 }
 
+/*
+ * The standard card's supporting words recede, so its title and its values read first.
+ *
+ * The line under the card's title, each row's label and the footnote take the muted ink — the
+ * answers are what a reader compares across the cards, and the labels only say which question each
+ * answers. On the page and the subtle band that is color.fg.muted, which follows the theme as the
+ * standard card's surface does; on the dark band, where that card has turned to the inverse surface
+ * and white ink above, it is color.fg.muted-inverse. CardBody's eyebrow takes the same two.
+ *
+ * Only the standard card, which is Card's own `surface`. The highlighted set's light card is gray.50
+ * in both themes and the page's muted grey turns pale with dark mode, and the coral card's white is
+ * already at the edge of its contrast, so neither has a muted ink to recede to and both keep their own.
+ */
+:where([data-dds-context="marketing"])
+  .dds-comparisoncards:is([data-ground="page"], [data-ground="subtle"])
+  .dds-comparisoncards__item
+  > .dds-card[data-variant="surface"]
+  :is(.dds-comparisoncards__card-description, .dds-comparisoncards__row-label, .dds-comparisoncards__footnote) {
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"])
+  .dds-comparisoncards[data-ground="strong"]
+  .dds-comparisoncards__item
+  > .dds-card[data-variant="surface"]
+  :is(.dds-comparisoncards__card-description, .dds-comparisoncards__row-label, .dds-comparisoncards__footnote) {
+  color: var(--color-fg-muted-inverse);
+}
+
 /*
  * The highlighted variant: the recommended card lifted off the page.
  *
@@ -248,15 +277,3 @@
 :where([data-dds-context="marketing"]) .dds-comparisoncards[data-variant='highlighted'] .dds-comparisoncards__item[data-recommended]:has(.dds-comparisoncards__highlight) .dds-comparisoncards__card-head {
   padding-block-start: var(--space-inset-md);
 }
-
-/*
- * A pair holds to two thirds of the row from full width, centred — FeatureCards' rule and its
- * reason: two cards across the whole width put each label half a page from its value.
- */
-@container (min-width: 64rem) {
-  :where([data-dds-context="marketing"]) .dds-comparisoncards .dds-comparisoncards__grid:has(> :nth-child(2):last-child) {
-    inline-size: 100%;
-    margin-inline: auto;
-    max-inline-size: calc((100% - 2 * var(--space-grid-gutter)) * 2 / 3 + var(--space-grid-gutter));
-  }
-}