@deriv-com/dds-marketing 1.1.1 → 1.1.3

package/.llm/digest/typography.md

@@ -2,7 +2,7 @@
 
 # Typography
 
-Copy, set in one of the page's type roles. …
+Sets text in one of the type roles
 
 `import { Typography } from '@deriv-com/dds-marketing'`
 

package/.llm/index.md

@@ -9,7 +9,7 @@ need — loading all of them dilutes the relevant one.
 Paths here are from the package root, so they resolve whether this file is read in place
 or its content handed over on its own.
 
-Sections: Core (54) · Layout (5) · Blocks (30)
+Sections: Core (54) · Layout (5) · Blocks (31)
 
 
 ## Core
@@ -105,6 +105,7 @@ The sections a page is built from, and the rhythm between them.
 | CtaBannerSlider | Rotating between two or three genuinely different promotions without a hero's weight — open an account, try a tool, download the app | One promotion → `CtaBanner` · The band that opens the page → `LandingHero` · A message with more than a headline, a line and a button or two → `FeatureSplit` |
 | DataTable | Trading instruments and their specifications — contract size, minimum size, volume limits — on a market page · Trading conditions a reader looks up rather than reads through: spreads, leverage, margin, swaps · An MT5 or Deriv X specification page, where the set runs to dozens of rows and a reader is hunting for the one they trade | Three or four plans or accounts compared feature by feature, where every row is read rather than searched → `ComparisonTable` · A handful of rows with no need to search or page — a fee schedule of four lines → `Table` |
 | DownloadBanner | Promoting an app across the stores and platforms it ships on — App Store, Google Play, AppGallery, a desktop download, the web · A trading platform's page, near its end, once the product has been explained and the next thing a reader wants is to get it | One download, or the web alone → `Button` · A promotion that has to argue for the download in a headline and a sentence → `CtaBanner` |
+| Estimator | A page lets a reader work something out before they act — a margin, a pip value, a swap charge, a conversion, an income estimate · The figures change as the reader types or picks, and should be announced as they do · The same tool appears on several pages in several forms — the margin, pip and swap calculators are one layout with different fields and figures | The figures are fixed facts rather than the result of anything the reader enters → `Stats` · Options are compared side by side rather than worked out from an input → `ComparisonCards` · The tool is a form that sends something — a sign-up, a contact request → `FeatureSplit` |
 | FaqAccordion | The questions a reader asks before acting — fees, limits, how long a withdrawal takes — near the end of a landing page or on a help page · Objections a page has to answer without making every reader read every answer | The answers are short enough to read all at once → `FeatureBullets` · Each item is a feature, not a question → `FeatureCards` |
 | FeatureBullets | A page has to list what a product or a plan includes, and the list is the argument · Several benefits are each one line long and are read by scanning rather than reading · A claim needs something beside it, and a picture is the only thing there is to put there | The items are two or three words and belong on one line → `Badge` · Each item needs a heading and a paragraph of its own → `Card` · The section opens the page → `ProductHero` |
 | 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 — the first choice for a set of three. The picture is CardBody's `src`, drawn below the words by default · A set of destinations — markets, platforms, tools — each a card a reader presses to go there · One feature that deserves the whole row in a card of its own — the words beside a large picture, carded on the section's ground | Each item is one line, and the list is the argument → `FeatureBullets` · One claim beside a picture, with no card around it → `FeatureSplit` · The items are read in order, one leading to the next → `FeatureScroll` |

package/.llm/tokens.md

@@ -378,6 +378,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.
@@ -392,6 +393,7 @@ one value at every width.
 - `--motion-duration-slow` — Large UI transitions, e.g. accordions expanding, page transitions, interactive demos.
 - `--motion-duration-spinner` — One full rotation of a spinner. Fast enough to read as working, slow enough that the stroke does not blur into a solid ring.
 - `--motion-duration-stagger` — The step between one part of a section arriving and the next. A gap rather than a length: five parts at this step trail the first by less than half a second, so a block still arrives as one thing rather than assembling itself while a reader waits.
+- `--motion-duration-step` — How long one step holds before the next takes its turn, in a Steps list under autoplay. Longer than dwell: a step is a title, a sentence and a picture to take in, not a headline to glance at, and at dwell's pace the list moved on before a reader had finished the line.
 - `--motion-duration-ticker` — How long a running row takes to carry one item past — Awards' row on a phone, multiplied by the number of awards for one whole loop. The reference site's pace: thirty-two seconds for eight awards, slow enough to read an award as it goes by.
 - `--motion-duration-trail` — How long something takes to catch up with a pointer it trails — a background's glow following the pointer across a band. Half a second, so the light drifts after the hand rather than sticking to it: a trail is felt, a cursor is tracked.
 - `--motion-duration-turn` — One turn of a wheel of figures: the one in place rising away as the next rises into it. The reference site's 700 — long enough that the eye follows the number in rather than seeing it swap.
@@ -406,9 +408,12 @@ one value at every width.
 - `--motion-scale-enter` — What a component scales from when something reveals it — a tooltip appearing. Needs a transform origin on the edge nearest its anchor, or it grows out of its own middle. The counterpart to scale.hover, which is a response rather than an entrance.
 - `--motion-scale-hover` — How much a control grows under the cursor on hover. Deliberately small — a control that grows past the pointer fires its own mouse-out.
 - `--motion-scale-media-hover` — How much art grows inside a frame that holds still — an editorial card's picture under the cursor. Twice motion.scale.hover, which stays smaller because a control can outrun its own pointer and a framed picture cannot.
+- `--motion-scale-parallax` — How much larger a block's picture is drawn inside its frame, so it can drift with the scroll without its edge showing. A tenth: room for the parallax travel either way with a margin to spare, and too little to feel like a crop.
 - `--motion-scale-pile-covered` — How far a card in a StickyCards pile draws back once the next card has slid over it, from its top edge, so the pile reads as depth. Not motion.scale.enter, which is for something arriving.
 - `--motion-translate-enter` — Where a surface waits before something reveals it: level on the inline axis, its own full height down the block one. A share of the element rather than of the page, so a sheet travels exactly its own height whatever that turns out to be.
 - `--motion-translate-hover` — How far a pressable surface rises under the cursor. A fixed distance rather than a share of the element, so a tall card and a short one lift by the same amount and a row of them stays level. Small enough that nothing it sits beside looks disturbed.
+- `--motion-translate-parallax-from` — Where a block's picture stands in its frame as the frame enters the view from below: a little above centre, as a share of its own height. It runs to parallax-to as the frame crosses the view, so the picture moves slower than the page and reads as further away.
+- `--motion-translate-parallax-to` — Where a block's picture stands as its frame leaves the view at the top: a little below centre. The pair stays inside the room motion.scale.parallax gives, so no edge ever shows.
 - `--motion-translate-reveal` — How far a section waits below where it lands, before the scroll brings it up. A fixed distance rather than a share of the block, so a hero a screen tall and a split half that arrive by the same movement. Pairs with motion.easing.reveal.
 
 ## opacity

package/AGENTS.md

@@ -150,6 +150,7 @@ screen is built in is not something to reach for while building a control.
 - **CtaBannerSlider** — Rotating between two or three genuinely different promotions without a hero's weight
 - **DataTable** — Trading instruments and their specifications
 - **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

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/blocks/block-parallax.css

@@ -0,0 +1,62 @@
+/*
+ * The drift every block's picture shares, defined once.
+ *
+ * As a block passes through the view its picture moves a little slower than the page, so it reads
+ * as further away than the words beside it — the reference design's parallax, on every block that
+ * holds a picture rather than as an option one banner had. A copy per block is how ten sections
+ * come to disagree about how far a picture moves, so the movement is stated here and each block
+ * only marks its frame: `data-dds-parallax` on the box that holds the picture and clips it.
+ *
+ * Imported by each block's component, which is what puts it in the bundle once however many blocks
+ * a page uses.
+ *
+ * Driven by the scroll and nothing else. The frame names a view timeline and the picture runs down
+ * it over the frame's whole pass across the view (`cover`), from motion.translate.parallax-from to
+ * motion.translate.parallax-to. No script measures anything and no listener runs on scroll: the
+ * browser advances the timeline itself, and the only properties it animates are `translate` and
+ * `scale`, which it composites without laying the page out or painting it again — so a page full
+ * of pictures scrolls as smoothly as a page with none. Linear, because the scroll is the easing.
+ *
+ * The picture is drawn at motion.scale.parallax inside a frame that clips it, which leaves room
+ * above and below for the travel, so no edge of the picture is ever seen. The frame keeps its size,
+ * so nothing around it moves.
+ *
+ * The frame clips with `overflow: clip`, not `hidden`. `hidden` makes a box a scroll container, and
+ * a view timeline is measured against its nearest one: under a box that never scrolls it stands
+ * still at its first frame. The same holds for every box above the frame, which is why the blocks
+ * that carry one clip their roots rather than hiding their overflow.
+ *
+ * Every picture inside the frame drifts, except one inside an IllustrationCard: the card is a
+ * picture of the product laid over the photograph, and the photograph moving behind it is the
+ * effect; the product's own icons sliding inside the card would be the card coming apart.
+ *
+ * Only where the browser can drive it from the scroll, and only for a reader who has not asked for
+ * less motion. Everywhere else the picture stands still, centred and at its own size.
+ */
+/* FeatureCards' pictures are drawn by CardBody, a core component that marks nothing, so its frame is
+   named here for the one block that wants it moving. */
+:where([data-dds-context="marketing"]) :is([data-dds-parallax], .dds-featurecards .dds-cardbody__media-frame) {
+  overflow: clip;
+  view-timeline-axis: block;
+  view-timeline-name: --dds-parallax;
+}
+
+@supports (animation-timeline: view()) {
+  @media (prefers-reduced-motion: no-preference) {
+    :where([data-dds-context="marketing"]) :is([data-dds-parallax], .dds-featurecards .dds-cardbody__media-frame) img:not(.dds-illustrationcard img) {
+      animation: dds-parallax linear both;
+      animation-range: cover;
+      animation-timeline: --dds-parallax;
+      scale: var(--motion-scale-parallax);
+    }
+  }
+}
+
+@keyframes dds-parallax {
+  from {
+    translate: var(--motion-translate-parallax-from);
+  }
+  to {
+    translate: var(--motion-translate-parallax-to);
+  }
+}

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

@@ -248,15 +248,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));
-  }
-}

package/dist/components/blocks/download-banner/DownloadBanner.d.ts

@@ -1,6 +1,7 @@
 import './DownloadBanner.css';
 import './download-banner-impl.css';
 import '../block-reveal.css';
+import '../block-parallax.css';
 import { type DownloadBannerProps } from './DownloadBanner.types.js';
 export type { DownloadBannerProps };
 /**

package/dist/components/blocks/download-banner/DownloadBanner.js

@@ -5,6 +5,7 @@ import { AndroidApkFillColoredIcon, AppleAppStoreFillColoredIcon, AppleDmgFillCo
 import './DownloadBanner.css';
 import './download-banner-impl.css';
 import '../block-reveal.css';
+import '../block-parallax.css';
 import { Background } from '../../core/background/Background.js';
 import { given } from '../../given.js';
 import { arriving, useReveal } from '../use-reveal.js';
@@ -71,5 +72,5 @@ export function DownloadBanner({ ground = downloadBannerDefaults.ground, variant
                                builds of the same desktop app — and a key repeated is a badge React confuses
                                with the other. */
                             _jsx("li", { className: downloadBannerParts.badge, children: _jsx("a", { className: downloadBannerParts['badge-link'], href: href, "aria-label": given(label) ? label : name, children: _jsx(Mark, { className: downloadBannerParts.mark, width: undefined, height: undefined, "aria-hidden": "true", focusable: "false" }) }) }, `${platform}-${at}`));
-                        }) })) : null, variant === 'featured' && media !== undefined && media !== null ? (_jsx("div", { className: downloadBannerParts.media, ...arriving(3), children: media })) : null] }) }) }));
+                        }) })) : null, variant === 'featured' && media !== undefined && media !== null ? (_jsx("div", { "data-dds-parallax": "", className: downloadBannerParts.media, ...arriving(3), children: media })) : null] }) }) }));
 }

package/dist/components/blocks/estimator/Estimator.css

@@ -0,0 +1,206 @@
+/* GENERATED from estimator.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-estimator {
+  box-sizing: border-box;
+  container-type: inline-size;
+  display: flex;
+  inline-size: 100%;
+  justify-content: center;
+  overflow-wrap: anywhere;
+}
+
+:where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__inner {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  min-inline-size: 0;
+  column-gap: var(--space-gap-3xl);
+  max-inline-size: var(--size-content-max);
+  padding-block: var(--space-section-default);
+  padding-inline: var(--space-inset-page);
+  row-gap: var(--space-heading-content);
+}
+
+:where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__header {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  row-gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__title {
+  margin-block: 0;
+  text-wrap: balance;
+  font-family: var(--font-h2-family);
+  font-size: var(--font-h2-size);
+  font-weight: var(--font-h2-weight);
+  letter-spacing: var(--font-h2-letter-spacing);
+  line-height: var(--font-h2-line-height);
+  margin-block-end: var(--space-heading-title-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__description {
+  margin-block: 0;
+  font-family: var(--font-body-md-family);
+  font-size: var(--font-body-md-size);
+  font-weight: var(--font-body-md-weight);
+  letter-spacing: var(--font-body-md-letter-spacing);
+  line-height: var(--font-body-md-line-height);
+  max-inline-size: var(--size-measure-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__tool {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  row-gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__panels {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  column-gap: var(--space-gap-xl);
+  padding-block: var(--space-inset-card);
+  padding-inline: var(--space-inset-card);
+  row-gap: var(--space-gap-2xl);
+}
+
+:where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__inputs {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  row-gap: var(--space-gap-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__inputs-label {
+  margin-block: 0;
+  font-family: var(--font-h5-family);
+  font-size: var(--font-h5-size);
+  font-weight: var(--font-h5-weight);
+  letter-spacing: var(--font-h5-letter-spacing);
+  line-height: var(--font-h5-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__results {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  background-color: var(--color-bg-surface-card-raised);
+  border-radius: var(--radius-surface-compact);
+  box-shadow: var(--elevation-surface-floating);
+  padding-block: var(--space-inset-card);
+  padding-inline: var(--space-inset-card);
+  row-gap: var(--space-gap-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__results-label {
+  margin-block: 0;
+  font-family: var(--font-h5-family);
+  font-size: var(--font-h5-size);
+  font-weight: var(--font-h5-weight);
+  letter-spacing: var(--font-h5-letter-spacing);
+  line-height: var(--font-h5-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__list {
+  display: flex;
+  flex-direction: column;
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: 0;
+  column-gap: var(--space-gap-2xl);
+  row-gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__result {
+  border-block-end-style: solid;
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  border-block-end-width: var(--border-width-default);
+  border-color: var(--color-border-subtle);
+  padding-block: var(--space-inset-md);
+  row-gap: var(--space-gap-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__result-value {
+  margin-inline: 0;
+  font-family: var(--font-h4-family);
+  font-size: var(--font-h4-size);
+  font-weight: var(--font-h4-weight);
+  letter-spacing: var(--font-h4-letter-spacing);
+  line-height: var(--font-h4-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__result-note {
+  margin-inline: 0;
+  color: var(--color-fg-muted);
+  font-family: var(--font-body-sm-family);
+  font-size: var(--font-body-sm-size);
+  font-weight: var(--font-body-sm-weight);
+  letter-spacing: var(--font-body-sm-letter-spacing);
+  line-height: var(--font-body-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__empty {
+  margin-block: 0;
+  color: var(--color-fg-muted);
+  font-family: var(--font-body-md-family);
+  font-size: var(--font-body-md-size);
+  font-weight: var(--font-body-md-weight);
+  letter-spacing: var(--font-body-md-letter-spacing);
+  line-height: var(--font-body-md-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__action {
+  display: flex;
+  margin-block-start: var(--space-gap-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__input-actions {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: var(--space-actions-gap);
+  margin-block-start: var(--space-gap-sm);
+  row-gap: var(--space-actions-gap);
+}
+
+:where([data-dds-context="marketing"]) .dds-estimator[data-layout="split"] .dds-estimator__header {
+  align-items: flex-start;
+  text-align: start;
+}
+
+:where([data-dds-context="marketing"]) .dds-estimator[data-layout="stacked"] .dds-estimator__header {
+  align-items: center;
+  text-align: center;
+}
+
+:where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__result-label {
+  color: var(--color-fg-muted);
+  font-family: var(--font-body-sm-family);
+  font-size: var(--font-body-sm-size);
+  font-weight: var(--font-body-sm-weight);
+  letter-spacing: var(--font-body-sm-letter-spacing);
+  line-height: var(--font-body-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-estimator[data-ground="page"] {
+  background-color: var(--color-bg-page);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-estimator[data-ground="strong"] {
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-estimator[data-ground="subtle"] {
+  background-color: var(--color-bg-page);
+  background-image: linear-gradient(var(--color-bg-band-subtle), var(--color-bg-band-subtle));
+  color: var(--color-fg-default);
+}
+

package/dist/components/blocks/estimator/Estimator.d.ts

@@ -0,0 +1,27 @@
+import './Estimator.css';
+import './estimator-impl.css';
+import '../block-reveal.css';
+import { type EstimatorProps } from './Estimator.types.js';
+export type { EstimatorProps };
+/**
+ * A section that turns a reader's inputs into figures — the trading calculators, the crypto
+ * converter and the affiliate income estimate of the reference design, as one block.
+ *
+ * It lays the tool out and works nothing out. The page passes its own fields as `inputs` and the
+ * figures it has computed from them as `results`; a live feed, a formula, a currency conversion are
+ * all the page's, so the block is the same on every page that uses it and in every test, and none
+ * of it reaches the network. What the block owns is the part every such tool gets wrong once:
+ *
+ * - The figures are a description list, so a value is announced with the label it answers.
+ * - The results panel is a polite live region from the first paint, so a reader using a screen
+ *   reader hears each new set of figures once, after they stop typing, without being interrupted —
+ *   and it is there before the first change, which is the only way a live region is listened to.
+ * - Each value is isolated (`<bdi>`), so '-12.40 USD' or '0.0214 BTC' keeps its order in a
+ *   right-to-left line, where a sign or a currency is neutral and moves to the far end.
+ * - Before there are figures the panel says what it is waiting for, rather than showing a row of
+ *   dashes or a zero that reads as an answer.
+ *
+ * The tool is a Card at its `surface` variant, the same object as every other card on the page; the
+ * ground it stands on decides its fill, in the stylesheet, as ComparisonCards' cards do.
+ */
+export declare function Estimator({ ground, layout, title, description, inputsLabel, inputs, inputActions, onCalculate, resultsLabel, results, emptyMessage, action, }: EstimatorProps): import("react").JSX.Element;

package/dist/components/blocks/estimator/Estimator.js

@@ -0,0 +1,61 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import './Estimator.css';
+import './estimator-impl.css';
+import '../block-reveal.css';
+import { arriving, useReveal } from '../use-reveal.js';
+import { given } from '../../given.js';
+import { Card } from '../../core/card/Card.js';
+import { estimatorDefaults, estimatorParts } from './Estimator.types.js';
+/**
+ * A section that turns a reader's inputs into figures — the trading calculators, the crypto
+ * converter and the affiliate income estimate of the reference design, as one block.
+ *
+ * It lays the tool out and works nothing out. The page passes its own fields as `inputs` and the
+ * figures it has computed from them as `results`; a live feed, a formula, a currency conversion are
+ * all the page's, so the block is the same on every page that uses it and in every test, and none
+ * of it reaches the network. What the block owns is the part every such tool gets wrong once:
+ *
+ * - The figures are a description list, so a value is announced with the label it answers.
+ * - The results panel is a polite live region from the first paint, so a reader using a screen
+ *   reader hears each new set of figures once, after they stop typing, without being interrupted —
+ *   and it is there before the first change, which is the only way a live region is listened to.
+ * - Each value is isolated (`<bdi>`), so '-12.40 USD' or '0.0214 BTC' keeps its order in a
+ *   right-to-left line, where a sign or a currency is neutral and moves to the far end.
+ * - Before there are figures the panel says what it is waiting for, rather than showing a row of
+ *   dashes or a zero that reads as an answer.
+ *
+ * The tool is a Card at its `surface` variant, the same object as every other card on the page; the
+ * ground it stands on decides its fill, in the stylesheet, as ComparisonCards' cards do.
+ */
+export function Estimator({ ground = estimatorDefaults.ground, layout = estimatorDefaults.layout, title, description, inputsLabel, inputs, inputActions, onCalculate, resultsLabel, results, emptyMessage, action, }) {
+    const titleId = useId();
+    const [band, revealed] = useReveal();
+    const figures = Array.isArray(results) ? results : [];
+    /*
+      Enter in a field asks for the figures, which is what a reader expects of a calculator — the
+      page's Calculate button calls the same `onCalculate` from its own press. Only a plain field:
+      Enter in a picker's search chooses an answer, and in a text area it starts a line, and both
+      are theirs to keep.
+    */
+    const calculateOnEnter = (event) => {
+        if (event.key !== 'Enter' || onCalculate === undefined)
+            return;
+        const field = event.target;
+        if (!(field instanceof HTMLInputElement))
+            return;
+        if (/^(checkbox|radio|button|submit|reset|file)$/.test(field.type))
+            return;
+        if (field.closest('[role="listbox"], [role="dialog"], [aria-haspopup], [aria-autocomplete]') !== null)
+            return;
+        event.preventDefault();
+        onCalculate();
+    };
+    // The fields are a form, and its submit never leaves the page. A form with one field submits on
+    // Enter by itself, and without this a reader pressing it would reload the page from under the tool.
+    const stay = (event) => event.preventDefault();
+    return (_jsx("section", { className: estimatorParts.root, "data-ground": ground, "data-layout": layout, "aria-labelledby": titleId, children: _jsxs("div", { className: estimatorParts.inner, ref: band, "data-revealed": revealed, children: [_jsxs("div", { className: estimatorParts.header, children: [_jsx("h2", { className: estimatorParts.title, ...arriving(0), id: titleId, children: title }), given(description) ? (_jsx("p", { className: estimatorParts.description, ...arriving(1), children: description })) : null] }), _jsx("div", { className: estimatorParts.tool, "data-theme": ground === 'strong' ? 'dark' : undefined, ...arriving(2), children: _jsx(Card, { variant: "surface", children: _jsxs("div", { className: estimatorParts.panels, children: [_jsxs("form", { className: estimatorParts.inputs, onSubmit: stay, onKeyDown: calculateOnEnter, children: [given(inputsLabel) ? _jsx("h3", { className: estimatorParts['inputs-label'], children: inputsLabel }) : null, inputs, inputActions ? _jsx("div", { className: estimatorParts['input-actions'], children: inputActions }) : null] }), _jsxs("div", { className: estimatorParts.results, "aria-live": "polite", children: [given(resultsLabel) ? _jsx("h3", { className: estimatorParts['results-label'], children: resultsLabel }) : null, figures.length > 0 ? (_jsx("dl", { className: estimatorParts.list, children: figures.map((figure) => (
+                                            // A figure's label is its identity: a tool never shows the same figure twice.
+                                            _jsxs("div", { className: estimatorParts.result, children: [_jsx("dt", { className: estimatorParts['result-label'], children: figure.label }), _jsx("dd", { className: estimatorParts['result-value'], children: _jsx("bdi", { children: figure.value }) }), given(figure.note) ? (_jsx("dd", { className: estimatorParts['result-note'], children: figure.note })) : null] }, figure.label))) })) : given(emptyMessage) ? (_jsx("p", { className: estimatorParts.empty, children: emptyMessage })) : null, action ? _jsx("div", { className: estimatorParts.action, children: action }) : null] })] }) }) })] }) }));
+}

package/dist/components/blocks/estimator/Estimator.types.d.ts

@@ -0,0 +1,63 @@
+import type { ReactNode } from 'react';
+import type { EstimatorResult } from '../../estimator-data.js';
+export interface EstimatorOwnProps {
+    /**
+     * `page` — The default, and the page's own white. A section that has nothing to separate itself from what is above it — most of them — and the ground a reader is already on
+     * `subtle` — A quiet step off the page, for a band that wants to read as its own section without changing the page's voice. The one to reach for first when two sections need telling apart. Painted as the band's tint laid over the page's own ground, so it is the same grey whatever is behind the section — in dark mode the tint alone took on whatever it was set against, and on a light surface it was light ink on white.
+     * `strong` — `color.bg.brand-strong`, the dark band. It stops the page rather than dividing it, so it is for a section a reader should arrive at — and one per page is usually one more than enough
+     */
+    ground?: 'page' | 'subtle' | 'strong';
+    /**
+     * `stacked` — The default. The heading centred above a wide card, the inputs beside the results — a calculator with several fields and several figures, where the two panels each need room
+     * `split` — The heading and a few lines beside the card, the inputs above the results inside it — a compact tool a page introduces in its own words, a converter or a single estimate
+     */
+    layout?: 'stacked' | 'split';
+    /** Always. What the tool works out, in a few words — 'Trading calculator', 'Buy crypto in seconds', 'Estimate your earnings'. */
+    title: string;
+    /** A line or two under the title saying what the figures are for or where they come from — 'Live prices, updated every few seconds'. */
+    description?: string;
+    /** A heading over the inputs panel, where the two panels need naming — 'Calculator' over the fields and 'Results' over the figures. Leave both out for a tool whose fields name themselves. */
+    inputsLabel?: string;
+    /** Always. The fields the reader fills in — Select, TextInput, SearchInput, SegmentedControl, a slider — in the order they are filled. The page owns their values and works the results out from them. */
+    inputs: ReactNode;
+    /** A tool that works its figures out when asked rather than as the reader types — a calculation too slow or too costly to run on every keystroke, or one where half-filled fields would show figures that mislead. 'Calculate', whose press calls the page's own handler, and 'Reset' beside it to clear the fields. They share the row; on a phone they stack and each fills the width. */
+    inputActions?: ReactNode;
+    /** Whenever inputActions holds a Calculate button: Enter in any of the fields calls it, as the button's own press does — wire the button's onClick to the same function. The page works the figures out and passes them as `results`; the results panel announces them. */
+    onCalculate?: () => void;
+    /** A heading over the results panel, with inputsLabel — 'Results', 'You receive'. */
+    resultsLabel?: string;
+    /** The figures the inputs produce, in reading order — a `label`, a `value` written exactly as it is to be read, and an optional `note`. Pass an empty list until the inputs are complete, and the panel shows `emptyMessage` instead. Each change is announced politely, so a reader using a screen reader hears the new figures without being interrupted. */
+    results: EstimatorResult[];
+    /** What the results panel says before there are figures to show — 'Choose an instrument to see the results'. Translate it with the page. */
+    emptyMessage?: string;
+    /** The one thing a reader does once they have their figures — 'Open an account', 'Trade now', 'Become a partner'. Under the results, where the reader's eye already is. */
+    action?: ReactNode;
+}
+export type EstimatorProps = EstimatorOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const estimatorParts: {
+    readonly root: "dds-estimator";
+    readonly inner: "dds-estimator__inner";
+    readonly header: "dds-estimator__header";
+    readonly title: "dds-estimator__title";
+    readonly description: "dds-estimator__description";
+    readonly tool: "dds-estimator__tool";
+    readonly panels: "dds-estimator__panels";
+    readonly inputs: "dds-estimator__inputs";
+    readonly 'inputs-label': "dds-estimator__inputs-label";
+    readonly results: "dds-estimator__results";
+    readonly 'results-label': "dds-estimator__results-label";
+    readonly list: "dds-estimator__list";
+    readonly result: "dds-estimator__result";
+    readonly 'result-label': "dds-estimator__result-label";
+    readonly 'result-value': "dds-estimator__result-value";
+    readonly 'result-note': "dds-estimator__result-note";
+    readonly empty: "dds-estimator__empty";
+    readonly action: "dds-estimator__action";
+    readonly 'input-actions': "dds-estimator__input-actions";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const estimatorDefaults: {
+    readonly ground: "page";
+    readonly layout: "stacked";
+};

package/dist/components/blocks/estimator/Estimator.types.js

@@ -0,0 +1,25 @@
+// GENERATED from estimator.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const estimatorParts = {
+    root: 'dds-estimator',
+    inner: 'dds-estimator__inner',
+    header: 'dds-estimator__header',
+    title: 'dds-estimator__title',
+    description: 'dds-estimator__description',
+    tool: 'dds-estimator__tool',
+    panels: 'dds-estimator__panels',
+    inputs: 'dds-estimator__inputs',
+    'inputs-label': 'dds-estimator__inputs-label',
+    results: 'dds-estimator__results',
+    'results-label': 'dds-estimator__results-label',
+    list: 'dds-estimator__list',
+    result: 'dds-estimator__result',
+    'result-label': 'dds-estimator__result-label',
+    'result-value': 'dds-estimator__result-value',
+    'result-note': 'dds-estimator__result-note',
+    empty: 'dds-estimator__empty',
+    action: 'dds-estimator__action',
+    'input-actions': 'dds-estimator__input-actions',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const estimatorDefaults = { ground: 'page', layout: 'stacked' };