@deriv-com/dds-marketing 1.1.2 → 1.1.3

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' };

package/dist/components/blocks/estimator/estimator-impl.css

@@ -0,0 +1,159 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * `:where([data-dds-context="marketing"])` confines these rules without contributing specificity,
+ * so each is decided against the generated rule on its own terms.
+ */
+
+/*
+ * The Card fills the tool. The tool part is the box in the section's layout; the Card inside it is
+ * the surface, and it takes the whole of the tool's width rather than its content's.
+ */
+:where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__tool > .dds-card {
+  flex: auto;
+  /*
+   * Card clips so a picture meets its corner; this card holds no picture, and the clip cut the
+   * results panel's shadow off where the panel sits close to the card's edge, which left it flat.
+   */
+  overflow: visible;
+}
+
+/*
+ * The page's fields wrap their words only when a word does not fit. The section breaks anywhere so a
+ * long title cannot push the page wide, and that is inherited — but in a field it let the suffix
+ * and the panel heading give up their width a letter at a time whenever the panel was tight, "lots"
+ * stood on its end beside the box. `break-word` still wraps a word too long for the line, and keeps
+ * every word whole while there is room for it.
+ */
+:where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__inputs {
+  overflow-wrap: break-word;
+}
+
+/* A centred heading centres its measure too, so the line under it sits under the title. */
+:where([data-dds-context="marketing"]) .dds-estimator[data-layout="stacked"] .dds-estimator__description {
+  margin-inline: auto;
+}
+
+/*
+ * The figures read along a row of digits that change as a reader types, so the digits keep one
+ * width: a value going from 1,111 to 8,888 does not shuffle the currency beside it.
+ */
+:where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__result-value {
+  font-variant-numeric: tabular-nums;
+}
+
+/*
+ * The figures in two columns from the fold, each ruled off beneath — four read as a block of answers
+ * beside the fields that made them, and the figures at h4 keep a column each rather than a line
+ * each. One column on a phone, where half the panel is too narrow for a figure at that size.
+ */
+:where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__list {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+}
+
+@container (min-width: 48rem) {
+  /*
+   * Calculate and Reset share the row under the fields, a half each: neither is the smaller one, and
+   * two buttons of different widths under a column of full-width fields read as unfinished. Only
+   * from the fold, where they sit side by side — in the phone's column a zero basis is a zero
+   * height, and the buttons collapsed to a sliver.
+   */
+  :where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__input-actions > * {
+    flex: 1 1 0;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  /* A figure left on its own — the one figure of a converter, the last of an odd set — takes the
+     whole row rather than half of it beside an empty cell. */
+  :where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__result:last-child:nth-child(odd) {
+    grid-column: 1 / -1;
+  }
+}
+
+/*
+ * The white panel sits close to the card's edge — space.inset.xs from it, where the fields keep the
+ * card's full inset. The panel is a surface of its own, and a wide grey margin round it read as a
+ * card inside a card; close to the edge it reads as the card's other half.
+ *
+ * Pulled out by the difference between the two insets. In a column — a phone, and `split` — that is
+ * both sides and the foot; beside the fields it is the top, the foot and the far side.
+ */
+:where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__results {
+  margin-block-end: calc(var(--space-inset-xs) - var(--space-inset-card));
+  margin-inline: calc(var(--space-inset-xs) - var(--space-inset-card));
+}
+
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-estimator[data-layout="stacked"] .dds-estimator__results {
+    margin-block: calc(var(--space-inset-xs) - var(--space-inset-card));
+    margin-inline-start: 0;
+  }
+}
+
+/*
+ * From the fold, under `stacked`: the inputs beside the results, two equal panels. A calculator's
+ * fields and its figures are read side by side — change one, watch the other.
+ *
+ * `48rem` longhand because `var()` is not permitted in a container query condition, and it is the
+ * width the rest of this package folds at.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-estimator[data-layout="stacked"] .dds-estimator__panels {
+    flex-direction: row;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-estimator[data-layout="stacked"] :is(.dds-estimator__inputs, .dds-estimator__results) {
+    flex: 1 1 0;
+  }
+}
+
+/*
+ * At full width, under `split`: the heading beside the card, two equal halves — the reference
+ * converter's columns, so the tool reads as wide as the words that introduce it. The panels stay one
+ * column inside the card, the inputs above the figures.
+ *
+ * `64rem`, the width a split of words and a tool can both breathe in; below it the heading goes back
+ * above the card, at the start.
+ */
+@container (min-width: 64rem) {
+  :where([data-dds-context="marketing"]) .dds-estimator[data-layout="split"] .dds-estimator__inner {
+    align-items: center;
+    flex-direction: row;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-estimator[data-layout="split"] :is(.dds-estimator__header, .dds-estimator__tool) {
+    flex: 1 1 0;
+  }
+}
+
+/*
+ * On a phone the way onward fills the panel, as every section's actions do — the package's rule:
+ * a thumb reaches a full-width button, and a short one stranded at the start reads as an aside.
+ */
+@container (max-width: 47.9375rem) {
+  :where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__action > * {
+    inline-size: 100%;
+  }
+
+  /* And the inputs' own buttons stack, each the full width. */
+  :where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__input-actions {
+    flex-direction: column;
+  }
+}
+
+/*
+ * The card on the grey band — ComparisonCards' rule for the same card. Card's recessed fill is the
+ * band's grey and vanishes, so it takes the raised fill. The block knows its ground and the card does
+ * not, so the answer is here rather than in Card.
+ *
+ * Nothing for the dark band: there the tool is drawn in the dark theme (see Estimator.tsx), which
+ * turns the card, the rules between figures, the muted ink and the page's own fields round together.
+ */
+:where([data-dds-context="marketing"]) .dds-estimator[data-ground="subtle"] .dds-estimator__tool > .dds-card {
+  background-color: var(--color-bg-surface-card-raised);
+}
+

package/dist/components/blocks/image-banner/ImageBanner.d.ts

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

package/dist/components/blocks/image-banner/ImageBanner.js

@@ -4,6 +4,7 @@ import { useId } from 'react';
 import './ImageBanner.css';
 import './image-banner-impl.css';
 import '../block-reveal.css';
+import '../block-parallax.css';
 import { arriving, useReveal } from '../use-reveal.js';
 import { given } from '../../given.js';
 import { imageBannerDefaults, imageBannerParts } from './ImageBanner.types.js';
@@ -37,5 +38,5 @@ export function ImageBanner({ ground = imageBannerDefaults.ground, variant = ima
     const titleId = useId();
     const Title = headingLevel;
     const [band, revealed] = useReveal();
-    return (_jsx("section", { className: imageBannerParts.root, "data-ground": ground, "data-variant": variant, "data-media-position": mediaPosition, "data-parallax": parallax, "aria-labelledby": titleId, children: _jsx("div", { className: imageBannerParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: imageBannerParts.card, children: [_jsxs("div", { className: imageBannerParts.content, children: [_jsx(Title, { className: imageBannerParts.title, id: titleId, ...arriving(0), children: title }), given(description) ? (_jsx("p", { className: imageBannerParts.description, ...arriving(1), children: description })) : null, action ? (_jsx("div", { className: imageBannerParts.action, ...arriving(2), children: action })) : null] }), _jsx("div", { className: imageBannerParts.media, ...(variant === 'cover' ? {} : arriving(3)), children: media })] }) }) }));
+    return (_jsx("section", { className: imageBannerParts.root, "data-ground": ground, "data-variant": variant, "data-media-position": mediaPosition, "data-parallax": parallax, "aria-labelledby": titleId, children: _jsx("div", { className: imageBannerParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: imageBannerParts.card, children: [_jsxs("div", { className: imageBannerParts.content, children: [_jsx(Title, { className: imageBannerParts.title, id: titleId, ...arriving(0), children: title }), given(description) ? (_jsx("p", { className: imageBannerParts.description, ...arriving(1), children: description })) : null, action ? (_jsx("div", { className: imageBannerParts.action, ...arriving(2), children: action })) : null] }), _jsx("div", { className: imageBannerParts.media, "data-dds-parallax": parallax ? '' : undefined, ...(variant === 'cover' ? {} : arriving(3)), children: media })] }) }) }));
 }

package/dist/components/blocks/image-banner/ImageBanner.types.d.ts

@@ -29,7 +29,7 @@ export interface ImageBannerOwnProps {
     action?: ReactNode;
     /** 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. */
     media: ReactNode;
-    /** 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. On by default, as every block's picture drifts: pass false for a card whose photograph must hold still under its button. */
+    /** 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. On by default, as every block's picture drifts: pass false for a card whose photograph must hold still under its button. */
     parallax?: boolean;
 }
 export type ImageBannerProps = ImageBannerOwnProps;

package/dist/components/blocks/image-banner/image-banner-impl.css

@@ -226,56 +226,12 @@
 
 /*
  * `parallax`: the photograph drifts against the scroll as the card passes through the view — the
- * reference design's ParallaxBanner, folded in here as an option on the split and cover cards.
+ * reference design's ParallaxBanner, folded in as an option. The drift is the one every block's
+ * picture shares, in block-parallax.css: the component marks the frame and the picture is scaled
+ * and moved rather than resized.
  *
- * The photograph is drawn taller than its frame by the drift, half above and half below, so the
- * movement never shows an edge at either end; the frame clips it. The image itself is the thing
- * that moves, so the frame keeps its size and the card its layout.
- *
- * Scroll-driven, the way LogoColumns moves its wall: the frame names a view timeline and the image
- * runs down it from half the drift above centre to half below, over the whole pass (`cover`), so as
- * the page carries the card up the photograph falls behind a little and reads as further away.
- * Linear, because the scroll is the easing. The card and the frame clip with `overflow: clip`, not
- * `hidden`: `hidden` makes a box a scroll container, and a view timeline measured against one that
- * never scrolls stands still.
- *
- * A browser with no scroll timeline, and a reader who asked for less motion, get the photograph
- * still and centred, as with `parallax` off.
+ * This card once drew its own, by making the photograph taller than the frame with `block-size`.
+ * A picture that sets its height inline — Next.js's Image with `fill` writes `height: 100%` on the
+ * element — beat that, so the photograph stayed the frame's height and the drift pulled its lower
+ * edge up off the card. `scale` is a property nothing sets inline, so the shared drift holds.
  */
-:where([data-dds-context="marketing"]) .dds-imagebanner[data-parallax="true"]:is([data-variant="split"], [data-variant="cover"]) .dds-imagebanner__media img {
-  block-size: calc(100% + var(--motion-distance-drift));
-  margin-block-start: calc(var(--motion-distance-drift) / -2);
-  object-position: center top;
-}
-
-@keyframes dds-imagebanner-drift {
-  from {
-    translate: 0 calc(var(--motion-distance-drift) / -2);
-  }
-  to {
-    translate: 0 calc(var(--motion-distance-drift) / 2);
-  }
-}
-
-@supports (animation-timeline: view()) {
-  :where([data-dds-context="marketing"]) .dds-imagebanner .dds-imagebanner__media {
-    view-timeline: --dds-imagebanner-frame block;
-  }
-
-  /* Only for a reader who has not asked for less motion — asked here, around the rule, rather than
-     undone after it: the drift's selector outweighs any plain reset, and a reset that loses to it
-     leaves the photograph moving for exactly the reader who asked it not to. */
-  @media (prefers-reduced-motion: no-preference) {
-    :where([data-dds-context="marketing"]) .dds-imagebanner[data-parallax="true"]:is([data-variant="split"], [data-variant="cover"]) .dds-imagebanner__media img {
-      animation: dds-imagebanner-drift linear both;
-      animation-range: cover;
-      animation-timeline: --dds-imagebanner-frame;
-    }
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  :where([data-dds-context="marketing"]) .dds-imagebanner[data-parallax="true"]:is([data-variant="split"], [data-variant="cover"]) .dds-imagebanner__media img {
-    animation: none;
-  }
-}