@deriv-com/dds-marketing 1.1.1 → 1.1.3

package/dist/components/blocks/steps/Steps.js

@@ -4,6 +4,7 @@ import { useId } from 'react';
 import './Steps.css';
 import './steps-impl.css';
 import '../block-reveal.css';
+import '../block-parallax.css';
 import { arriving, useReveal } from '../use-reveal.js';
 import { given } from '../../given.js';
 import { useTurn } from './use-turn.js';
@@ -41,11 +42,11 @@ export function Steps({ ground = stepsDefaults.ground, mediaPosition = stepsDefa
     // records as they are typed, and a number against nothing is a step the page did not write — so
     // it is dropped before the count is taken, and the numbers close up rather than skipping one.
     const shown = steps.filter((step) => given(step.title));
-    const { current, turning, playing, next, choose, section, hold } = useTurn(shown.length, autoplay);
+    const { current, going, turning, playing, next, choose, section, hold } = useTurn(shown.length, autoplay);
     // The steps' own pictures replace the one picture only where every step has one: a turn that
     // reached a step without a picture would show nothing beside it.
     const pictured = shown.length > 0 && shown.every((step) => given(step.image?.src));
-    return (_jsx("section", { className: stepsParts.root, ref: section, "data-ground": ground, "data-media-position": mediaPosition, "data-autoplay": autoplay || undefined, "aria-labelledby": titleId, ...(autoplay ? hold : {}), children: _jsx("div", { className: stepsParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: stepsParts.split, children: [_jsx("div", { className: stepsParts.media, ...arriving(0), "aria-hidden": "true", children: pictured
+    return (_jsx("section", { className: stepsParts.root, ref: section, "data-ground": ground, "data-media-position": mediaPosition, "data-autoplay": autoplay || undefined, "data-going": going, "aria-labelledby": titleId, ...(autoplay ? hold : {}), children: _jsx("div", { className: stepsParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: stepsParts.split, children: [_jsx("div", { "data-dds-parallax": "", className: stepsParts.media, ...arriving(0), "aria-hidden": "true", children: pictured
                             ? shown.map((step, at) => (_jsx("img", { className: stepsParts.image, src: step.image?.src, alt: "", width: step.image?.width, height: step.image?.height, "data-current": at === current, loading: at === 0 ? undefined : 'lazy' }, `${at}:${step.title}`)))
                             : media }), _jsxs("div", { className: stepsParts.content, children: [_jsx("h2", { className: stepsParts.title, ...arriving(0), id: titleId, children: title }), _jsx("ol", { className: stepsParts.list, role: "list", "data-turning": autoplay ? turning : undefined, "data-playing": autoplay ? playing : undefined, children: shown.map((step, at) => (
                                 /* Keyed by the step's own name. An index would key the list by position, so

package/dist/components/blocks/steps/Steps.types.d.ts

@@ -12,7 +12,7 @@ export interface StepsOwnProps {
      * `end` — The steps first, for a section sitting under a split whose picture is already at the start
      */
     mediaPosition?: 'start' | 'end';
-    /** Whether the steps take their turn on their own: one step is current, its rule fills over motion.duration.dwell, then the next takes over, and back to the first after the last. The current step's number is drawn at full strength and the rest recede; with an `image` on each step the picture changes to the current one's. Each step's title becomes a button that makes it current. Off by default, so a list nobody configured stays still. On, it holds while the pointer is over the section or focus is inside it, waits until the section is on screen, never moves for a reader who asked for less motion, and stops for good once the reader presses a step — the WAI carousel rule CtaBannerSlider follows: a reader who has chosen a step is reading it. That gives a reader a way to stop it, which WCAG 2.2.2 asks for, but not a visible one, so a page that needs 2.2.2 met plainly should leave it off. */
+    /** Whether the steps take their turn on their own: one step is current, its rule fills over motion.duration.step, then the next takes over, and back to the first after the last. The current step's number is drawn at full strength and the rest recede; with an `image` on each step the picture changes to the current one's. Each step's title becomes a button that makes it current. Off by default, so a list nobody configured stays still. On, it holds while focus is inside the section — not under the pointer, so it keeps turning while a reader watches it — waits until the section is on screen, never moves for a reader who asked for less motion, and stops for good once the reader presses a step — the WAI carousel rule CtaBannerSlider follows: a reader who has chosen a step is reading it. That gives a reader a way to stop it, which WCAG 2.2.2 asks for, but not a visible one, so a page that needs 2.2.2 met plainly should leave it off. */
     autoplay?: boolean;
     /** Always. What the steps get a reader to, in the fewest words that say it — 'Get started in 3 steps' */
     title: string;

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

@@ -152,7 +152,7 @@
 }
 
 /*
- * The fill: the current step's rule, drawn from the start edge over motion.duration.dwell. When it
+ * The fill: the current step's rule, drawn from the start edge over motion.duration.step. When it
  * ends the next step takes over — the component listens for the end, so the bar and the turn are
  * one clock. Paused wherever the turn is held; full and still where the turn has stopped or never
  * runs, so the current step is still marked.
@@ -175,7 +175,7 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-steps .dds-steps__list[data-turning="true"] > .dds-steps__step[data-current="true"] > .dds-steps__progress {
-  animation: dds-steps-fill var(--motion-duration-dwell) linear;
+  animation: dds-steps-fill var(--motion-duration-step) linear;
 }
 
 :where([data-dds-context="marketing"]) .dds-steps .dds-steps__list[data-playing="false"] > .dds-steps__step[data-current="true"] > .dds-steps__progress {
@@ -184,7 +184,20 @@
 
 /*
  * The steps' own pictures share the media cell, and the current step's is the one shown — the
- * first while the list is still. They cross over rather than cut, in motion.duration.shift.
+ * first while the list is still.
+ *
+ * The next is uncovered over the last rather than faded into it, FeatureScroll's change. A fade put
+ * both pictures on screen at half strength at once — a double exposure that read as the two
+ * overlapping. Uncovered from an edge, every point of the square is one picture or the other at full
+ * strength: up from the foot as the turn moves on, the wrap to the first step included, and down
+ * from the head when a reader presses an earlier step.
+ *
+ * An animation rather than a transition, because an animation starts from its first frame and a
+ * transition from wherever the picture last rested. The current picture is brought to the front and
+ * uncovered over motion.duration.turn — the figure-to-figure step a turning set already takes — and
+ * the one it replaces stays beneath, whole, for that long, then goes: a zero-length transition
+ * delayed by the same role, so the two cannot drift into a gap. Every other picture is already gone.
+ * No `data-going` before the first change, so the picture a reader opens on is simply there.
  */
 :where([data-dds-context="marketing"]) .dds-steps .dds-steps__media:has(> .dds-steps__image) {
   display: grid;
@@ -193,11 +206,66 @@
 :where([data-dds-context="marketing"]) .dds-steps .dds-steps__media > .dds-steps__image {
   grid-area: 1 / 1;
   opacity: 0;
-  transition-property: opacity;
+  transition: opacity 0s linear var(--motion-duration-turn);
 }
 
 :where([data-dds-context="marketing"]) .dds-steps .dds-steps__media > .dds-steps__image[data-current="true"] {
   opacity: 1;
+  transition-delay: 0s;
+  z-index: 1;
+}
+
+:where([data-dds-context="marketing"]) .dds-steps[data-going="on"] .dds-steps__media > .dds-steps__image[data-current="true"] {
+  animation: dds-steps-from-foot var(--motion-duration-turn) var(--motion-easing-reveal);
+}
+
+:where([data-dds-context="marketing"]) .dds-steps[data-going="back"] .dds-steps__media > .dds-steps__image[data-current="true"] {
+  animation: dds-steps-from-head var(--motion-duration-turn) var(--motion-easing-reveal);
+}
+
+/*
+ * The wipe and the parallax together. The current picture's wipe is an `animation`, and so is the
+ * drift block-parallax.css gives every picture in the frame — one shorthand would replace the other,
+ * and the current picture, the only one a reader sees, would stop drifting the moment it arrived. So
+ * both are listed here: the wipe on the document's clock, the drift on the frame's view timeline,
+ * where the browser can drive one and the reader has not asked for less motion.
+ */
+@supports (animation-timeline: view()) {
+  @media (prefers-reduced-motion: no-preference) {
+    :where([data-dds-context="marketing"]) .dds-steps[data-going="on"] .dds-steps__media > .dds-steps__image[data-current="true"] {
+      animation:
+        dds-steps-from-foot var(--motion-duration-turn) var(--motion-easing-reveal),
+        dds-parallax linear both;
+      animation-range: normal, cover;
+      animation-timeline: auto, --dds-parallax;
+    }
+
+    :where([data-dds-context="marketing"]) .dds-steps[data-going="back"] .dds-steps__media > .dds-steps__image[data-current="true"] {
+      animation:
+        dds-steps-from-head var(--motion-duration-turn) var(--motion-easing-reveal),
+        dds-parallax linear both;
+      animation-range: normal, cover;
+      animation-timeline: auto, --dds-parallax;
+    }
+  }
+}
+
+@keyframes dds-steps-from-foot {
+  from {
+    clip-path: inset(100% 0 0 0);
+  }
+  to {
+    clip-path: inset(0);
+  }
+}
+
+@keyframes dds-steps-from-head {
+  from {
+    clip-path: inset(0 0 100% 0);
+  }
+  to {
+    clip-path: inset(0);
+  }
 }
 
 /*
@@ -213,4 +281,8 @@
   :where([data-dds-context="marketing"]) .dds-steps[data-autoplay] .dds-steps__number {
     transition: none;
   }
+
+  :where([data-dds-context="marketing"]) .dds-steps .dds-steps__media > .dds-steps__image[data-current="true"] {
+    animation: none;
+  }
 }

package/dist/components/blocks/steps/use-turn.d.ts

@@ -1,9 +1,9 @@
-import { type FocusEvent, type PointerEvent } from 'react';
+import { type FocusEvent } from 'react';
 /**
  * The steps taking their turn under `autoplay`: which step is current, and whether the turn is
  * running.
  *
- * The timing is not here. The current step's rule fills over motion.duration.dwell as a CSS
+ * The timing is not here. The current step's rule fills over motion.duration.step as a CSS
  * animation, and the turn moves on when that animation ends (`next`), so the bar a reader watches
  * and the step changing are one clock rather than two that drift. Holding the turn is pausing that
  * animation, which is what `playing` is for: the stylesheet pauses the fill wherever it is false.
@@ -12,21 +12,21 @@ import { type FocusEvent, type PointerEvent } from 'react';
  * - `autoplay` is on and there are two steps or more;
  * - the reader has not asked for less motion — asked live, so turning it on mid-visit stops it;
  * - the section is on screen. A turn nobody can see does not run, and starts again where it was;
- * - nothing holds it: a pointer over the section or focus inside it holds it for as long as it
- *   lasts, and pressing a step stops it for good — CtaBannerSlider's rule, by way of the WAI
- *   carousel pattern: a reader who has chosen a step is reading it. The pointer's way, the
- *   keyboard's and a touch screen's, which WCAG 2.2.2 asks for of anything that moves on its own.
+ * - nothing holds it: focus inside the section holds it for as long as it lasts, and pressing a
+ *   step stops it for good — a reader who has chosen a step is reading it. The keyboard's way and
+ *   the pointer's and a touch screen's, which WCAG 2.2.2 asks for of anything that moves on its own.
+ *   A pointer merely resting over the section does not hold it: the list is meant to be watched as
+ *   it turns, and pausing whenever the pointer crossed it read as the list having stopped.
  */
 export declare function useTurn(count: number, autoplay: boolean): {
     current: number;
+    going: "on" | "back" | undefined;
     turning: boolean;
     playing: boolean;
     next: () => void;
     choose: (at: number) => void;
     section: import("react").RefObject<HTMLElement | null>;
     hold: {
-        onPointerEnter: (event: PointerEvent<HTMLElement>) => void;
-        onPointerLeave: (event: PointerEvent<HTMLElement>) => void;
         onFocus: () => void;
         onBlur: (event: FocusEvent<HTMLElement>) => void;
     };

package/dist/components/blocks/steps/use-turn.js

@@ -4,7 +4,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
  * The steps taking their turn under `autoplay`: which step is current, and whether the turn is
  * running.
  *
- * The timing is not here. The current step's rule fills over motion.duration.dwell as a CSS
+ * The timing is not here. The current step's rule fills over motion.duration.step as a CSS
  * animation, and the turn moves on when that animation ends (`next`), so the bar a reader watches
  * and the step changing are one clock rather than two that drift. Holding the turn is pausing that
  * animation, which is what `playing` is for: the stylesheet pauses the fill wherever it is false.
@@ -13,13 +13,21 @@ import { useCallback, useEffect, useRef, useState } from 'react';
  * - `autoplay` is on and there are two steps or more;
  * - the reader has not asked for less motion — asked live, so turning it on mid-visit stops it;
  * - the section is on screen. A turn nobody can see does not run, and starts again where it was;
- * - nothing holds it: a pointer over the section or focus inside it holds it for as long as it
- *   lasts, and pressing a step stops it for good — CtaBannerSlider's rule, by way of the WAI
- *   carousel pattern: a reader who has chosen a step is reading it. The pointer's way, the
- *   keyboard's and a touch screen's, which WCAG 2.2.2 asks for of anything that moves on its own.
+ * - nothing holds it: focus inside the section holds it for as long as it lasts, and pressing a
+ *   step stops it for good — a reader who has chosen a step is reading it. The keyboard's way and
+ *   the pointer's and a touch screen's, which WCAG 2.2.2 asks for of anything that moves on its own.
+ *   A pointer merely resting over the section does not hold it: the list is meant to be watched as
+ *   it turns, and pausing whenever the pointer crossed it read as the list having stopped.
  */
 export function useTurn(count, autoplay) {
     const [current, setCurrent] = useState(0);
+    /*
+      Which way the last change went, for the picture to be uncovered from the matching edge: on, from
+      the foot, for every turn — the wrap from the last step to the first included, because the turn
+      still moves on — and back, from the head, when a reader presses an earlier step. Absent until the
+      first change, so the picture a reader opens on is simply there.
+    */
+    const [going, setGoing] = useState(undefined);
     const [seen, setSeen] = useState(false);
     const [still, setStill] = useState(false);
     const [held, setHeld] = useState(false);
@@ -46,24 +54,19 @@ export function useTurn(count, autoplay) {
     }, [autoplay]);
     /** The current step's fill has run: the next step takes over, and the first after the last. */
     const next = useCallback(() => {
-        if (count > 0)
+        if (count > 0) {
+            setGoing('on');
             setCurrent((at) => (at + 1) % count);
+        }
     }, [count]);
     /** A step pressed: it is current, and the turn stops for good. */
     const choose = useCallback((at) => {
+        setGoing(at >= current ? 'on' : 'back');
         setCurrent(at);
         setStopped(true);
-    }, []);
+    }, [current]);
     /** Spread on the section: what holds the turn. */
     const hold = {
-        onPointerEnter: (event) => {
-            if (event.pointerType === 'mouse')
-                setHeld(true);
-        },
-        onPointerLeave: (event) => {
-            if (event.pointerType === 'mouse')
-                setHeld(false);
-        },
         onFocus: () => setHeld(true),
         onBlur: (event) => {
             if (!event.currentTarget.contains(event.relatedTarget))
@@ -71,5 +74,5 @@ export function useTurn(count, autoplay) {
         },
     };
     // A list that shrank under the current step falls back to its first.
-    return { current: current < count ? current : 0, turning, playing, next, choose, section, hold };
+    return { current: current < count ? current : 0, going, turning, playing, next, choose, section, hold };
 }

package/dist/components/blocks/team-grid/TeamGrid.d.ts

@@ -1,6 +1,7 @@
 import './TeamGrid.css';
 import './team-grid-impl.css';
 import '../block-reveal.css';
+import '../block-parallax.css';
 import { type TeamGridProps } from './TeamGrid.types.js';
 export type { TeamGridProps };
 /**

package/dist/components/blocks/team-grid/TeamGrid.js

@@ -4,6 +4,7 @@ import { useId, useState } from 'react';
 import './TeamGrid.css';
 import './team-grid-impl.css';
 import '../block-reveal.css';
+import '../block-parallax.css';
 import { given } from '../../given.js';
 import { Button } from '../../core/button/Button.js';
 import { Link } from '../../core/link/Link.js';
@@ -69,6 +70,6 @@ export function TeamGrid({ ground = teamGridDefaults.ground, title, description,
                                         style: { '--dds-teamgrid-extra-at': at - shown },
                                     }
                                     : arriving(Math.min(FIRST_PERSON + at, LAST_STEP));
-                                return (_jsxs("li", { className: teamGridParts.item, hidden: extra && !expanded, ...motion, children: [_jsx("div", { className: teamGridParts.media, children: _jsx(AspectRatio, { ratio: "square", children: _jsx("img", { src: person.image.src, alt: person.image.alt, loading: "lazy", decoding: "async" }) }) }), _jsxs("div", { className: teamGridParts.text, children: [_jsx("h3", { className: teamGridParts.name, children: person.name }), _jsx("p", { className: teamGridParts.role, children: person.role }), person.profile !== undefined ? (_jsx("div", { className: teamGridParts.profile, children: _jsx(Link, { href: person.profile.href, external: true, tone: inverse ? 'inherit' : 'brand', "aria-label": `${profileName(person)} ${externalLabel}`, children: person.profile.label }) })) : null] })] }, `${person.name}-${at}`));
+                                return (_jsxs("li", { className: teamGridParts.item, hidden: extra && !expanded, ...motion, children: [_jsx("div", { "data-dds-parallax": "", className: teamGridParts.media, children: _jsx(AspectRatio, { ratio: "square", children: _jsx("img", { src: person.image.src, alt: person.image.alt, loading: "lazy", decoding: "async" }) }) }), _jsxs("div", { className: teamGridParts.text, children: [_jsx("h3", { className: teamGridParts.name, children: person.name }), _jsx("p", { className: teamGridParts.role, children: person.role }), person.profile !== undefined ? (_jsx("div", { className: teamGridParts.profile, children: _jsx(Link, { href: person.profile.href, external: true, tone: inverse ? 'inherit' : 'brand', "aria-label": `${profileName(person)} ${externalLabel}`, children: person.profile.label }) })) : null] })] }, `${person.name}-${at}`));
                             }) }), longer ? (_jsx("div", { className: teamGridParts.actions, ...arriving(Math.min(FIRST_PERSON + shown, LAST_STEP + 1)), children: _jsx(Button, { variant: "secondary", size: "md", tone: inverse ? 'inverse' : 'default', "aria-expanded": expanded, "aria-controls": listId, onClick: () => setExpanded((open) => !open), children: expanded ? collapseLabel : expandLabel }) })) : null] })] }) }));
 }

package/dist/components/core/card/Card.css

@@ -4,7 +4,7 @@
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  overflow: hidden;
+  overflow: clip;
   border-radius: var(--radius-surface);
 }
 

package/dist/components/core/segmented-control-item/SegmentedControlItem.types.d.ts

@@ -10,7 +10,7 @@ export interface SegmentedControlItemOwnProps {
     value: string;
     /** Always — it is the segment's accessible name as well as its words, and a radio with no name is announced as a control with nothing in it. One or two words: a row is scanned across, and the segment that needs a phrase is a choice that wanted a list */
     label: string;
-    /** The glyph tells the modes apart faster than the words do — a card and a bank beside two payment methods. Import it from @deriv-com/quill-icons-web and pass the element */
+    /** The glyph tells the modes apart faster than the words do — a card and a bank beside two payment methods. Import it from @deriv-com/dds-marketing/icons and pass the element */
     icon?: ReactNode;
     /** This segment reports its own presses — logging which plan a visitor looked at, say. It is called with this segment's value, and SegmentedControl chains its own handler after it rather than replacing it */
     onSelect?: (value: string) => void;

package/dist/components/core/select/Select.css

@@ -151,6 +151,8 @@
   gap: var(--space-gap-xs);
   letter-spacing: var(--font-body-sm-letter-spacing);
   line-height: var(--font-body-sm-line-height);
+  transition-duration: var(--motion-duration-fast);
+  transition-timing-function: var(--motion-easing-standard);
 }
 
 :where([data-dds-context="marketing"]) .dds-select .dds-select__message-icon {

package/dist/components/core/select/select-impl.css

@@ -112,3 +112,61 @@
     animation: none;
   }
 }
+
+/*
+ * The status message fades in when it arrives.
+ *
+ * A contract binds transitions, and a transition needs a value to move from: the message is not
+ * in the DOM until a status is reported, so only a keyframe can bring it in. Opacity alone — the
+ * message takes the helper's place rather than pushing the row down, so there is no distance to
+ * travel, and moving it would shift the words being read. A status changing while the message is
+ * showing keeps the same element, and its colour moves with the transition the contract binds.
+ */
+@keyframes dds-select-message-in {
+  from {
+    opacity: 0;
+  }
+}
+
+:where([data-dds-context="marketing"]) .dds-select .dds-select__message {
+  animation: dds-select-message-in var(--motion-duration-normal) var(--motion-easing-enter);
+}
+
+/*
+ * The box shakes once when the field turns to an error, as TextInput's does.
+ *
+ * Once, on arrival: the animation is attached by the error status, so it plays when the status
+ * becomes error and not again while it stays one. Only the box moves; the label and the
+ * message hold still, so the words saying what went wrong can be read while it settles.
+ *
+ * Not while the list is open. The popup is drawn inside the box, so shaking the box would shake
+ * the answers being read along with it. A status that arrives while it is open shakes the box
+ * as the list closes, which is the moment the answer is handed in.
+ */
+@keyframes dds-select-shake {
+  20% {
+    translate: calc(var(--motion-distance-shake) * -1) 0;
+  }
+  40% {
+    translate: var(--motion-distance-shake) 0;
+  }
+  60% {
+    translate: calc(var(--motion-distance-shake) * -0.5) 0;
+  }
+  80% {
+    translate: calc(var(--motion-distance-shake) * 0.5) 0;
+  }
+}
+
+:where([data-dds-context="marketing"]) .dds-select[data-status="error"]:not(:has([aria-expanded="true"])) .dds-select__control {
+  animation: dds-select-shake var(--motion-duration-slow) var(--motion-easing-standard);
+}
+
+/* The generated reduce block is written from the token bindings and these are not. A reader who
+   has asked for less movement has asked for this too. */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-select .dds-select__message,
+  :where([data-dds-context="marketing"]) .dds-select[data-status="error"]:not(:has([aria-expanded="true"])) .dds-select__control {
+    animation: none;
+  }
+}

package/dist/components/core/text-area/TextArea.css

@@ -92,6 +92,8 @@
   gap: var(--space-gap-xs);
   letter-spacing: var(--font-body-sm-letter-spacing);
   line-height: var(--font-body-sm-line-height);
+  transition-duration: var(--motion-duration-fast);
+  transition-timing-function: var(--motion-easing-standard);
 }
 
 :where([data-dds-context="marketing"]) .dds-textarea .dds-textarea__message-icon {

package/dist/components/core/text-area/text-area-impl.css

@@ -34,3 +34,57 @@
 :where([data-dds-context="marketing"]) .dds-textarea__message-icon {
   block-size: calc(var(--font-body-sm-size) * var(--font-body-sm-line-height));
 }
+
+/*
+ * The status message fades in when it arrives.
+ *
+ * A contract binds transitions, and a transition needs a value to move from: the message is not
+ * in the DOM until a status is reported, so only a keyframe can bring it in. Opacity alone — the
+ * message takes the helper's place rather than pushing the row down, so there is no distance to
+ * travel, and moving it would shift the words being read. A status changing while the message is
+ * showing keeps the same element, and its colour moves with the transition the contract binds.
+ */
+@keyframes dds-textarea-message-in {
+  from {
+    opacity: 0;
+  }
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea .dds-textarea__message {
+  animation: dds-textarea-message-in var(--motion-duration-normal) var(--motion-easing-enter);
+}
+
+/*
+ * The box shakes once when the field turns to an error, as TextInput's does.
+ *
+ * Once, on arrival: the animation is attached by the error status, so it plays when the status
+ * becomes error and not again while it stays one. Only the box moves; the label and the
+ * message hold still, so the words saying what went wrong can be read while it settles.
+ */
+@keyframes dds-textarea-shake {
+  20% {
+    translate: calc(var(--motion-distance-shake) * -1) 0;
+  }
+  40% {
+    translate: var(--motion-distance-shake) 0;
+  }
+  60% {
+    translate: calc(var(--motion-distance-shake) * -0.5) 0;
+  }
+  80% {
+    translate: calc(var(--motion-distance-shake) * 0.5) 0;
+  }
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea[data-status="error"] .dds-textarea__control {
+  animation: dds-textarea-shake var(--motion-duration-slow) var(--motion-easing-standard);
+}
+
+/* The generated reduce block is written from the token bindings and these are not. A reader who
+   has asked for less movement has asked for this too. */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-textarea .dds-textarea__message,
+  :where([data-dds-context="marketing"]) .dds-textarea[data-status="error"] .dds-textarea__control {
+    animation: none;
+  }
+}

package/dist/components/core/text-input/TextInput.css

@@ -118,6 +118,8 @@
   gap: var(--space-gap-xs);
   letter-spacing: var(--font-body-sm-letter-spacing);
   line-height: var(--font-body-sm-line-height);
+  transition-duration: var(--motion-duration-fast);
+  transition-timing-function: var(--motion-easing-standard);
 }
 
 :where([data-dds-context="marketing"]) .dds-textinput .dds-textinput__message-icon {

package/dist/components/core/text-input/text-input-impl.css

@@ -34,3 +34,66 @@
 :where([data-dds-context="marketing"]) .dds-textinput__message-icon {
   block-size: calc(var(--font-body-sm-size) * var(--font-body-sm-line-height));
 }
+
+/*
+ * The status message fades in when it arrives.
+ *
+ * A contract binds transitions, and a transition needs a value to move from: the message is not
+ * in the DOM until a status is reported, so there is nothing to transition and only a keyframe
+ * can bring it in. Opacity alone — the message takes the helper's place rather than pushing the
+ * row down, so there is no distance to travel, and moving it would shift the words being read.
+ *
+ * It plays once, on arrival. A status changing while the message is already showing keeps the
+ * same element, and its colour moves with the transition the contract binds rather than the
+ * whole message blinking out and back.
+ */
+@keyframes dds-textinput-message-in {
+  from {
+    opacity: 0;
+  }
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput .dds-textinput__message {
+  animation: dds-textinput-message-in var(--motion-duration-normal) var(--motion-easing-enter);
+}
+
+/*
+ * The box shakes once when the field turns to an error.
+ *
+ * Once, on arrival: the animation is attached by the error status, so it plays when the status
+ * becomes error and not again while it stays one — typing on in a field that is still wrong does
+ * not shake it at every keystroke. Leaving the error and coming back is a new refusal and shakes
+ * again. Only the box moves; the label above it and the message below hold still, so the words
+ * saying what went wrong can be read while it settles.
+ *
+ * Each swing is smaller than the last, so it reads as a shake that stops rather than a vibration
+ * that is cut off. The swing is symmetric, so it reads the same in either writing direction.
+ */
+@keyframes dds-textinput-shake {
+  20% {
+    translate: calc(var(--motion-distance-shake) * -1) 0;
+  }
+  40% {
+    translate: var(--motion-distance-shake) 0;
+  }
+  60% {
+    translate: calc(var(--motion-distance-shake) * -0.5) 0;
+  }
+  80% {
+    translate: calc(var(--motion-distance-shake) * 0.5) 0;
+  }
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput[data-status="error"] .dds-textinput__control {
+  animation: dds-textinput-shake var(--motion-duration-slow) var(--motion-easing-standard);
+}
+
+/* The generated reduce block is written from the token bindings and these are not. A reader who
+   has asked for less movement has asked for this too — and a shake is the movement most likely
+   to be the reason they asked. */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-textinput .dds-textinput__message,
+  :where([data-dds-context="marketing"]) .dds-textinput[data-status="error"] .dds-textinput__control {
+    animation: none;
+  }
+}

package/dist/components/estimator-data.d.ts

@@ -0,0 +1,29 @@
+/**
+ * The figures an Estimator lays out once a reader has filled its inputs in.
+ *
+ * Exported from the package for the reason `stats-data.ts` and `comparison-cards-data.ts` are: a
+ * block whose content is a list is one whose consumer builds a value before passing it.
+ *
+ * A record rather than a component per figure, because a result is a number and the words that say
+ * what it is — nothing in it is an element a page composes. The page works the figures out, from a
+ * live feed, a formula or both; the block only sets them, so the same block serves a margin
+ * calculator, a crypto converter and an affiliate's income estimate without knowing which.
+ */
+/** One figure an Estimator shows: what it is, its value, and anything a reader needs to read it. */
+export interface EstimatorResult {
+    /** What the figure is, in a few words: 'Margin required', 'You receive', 'Monthly income'. */
+    label: string;
+    /**
+     * The figure, written exactly as it is to be read: '1,240.50 USD', '0.0214 BTC', '$2,400'.
+     *
+     * A string rather than a number, because the way it is written is the page's: its currency, its
+     * digits, its grouping, its locale. The block draws it as given and isolates it, so a sign or a
+     * currency keeps its place in a right-to-left line.
+     */
+    value: string;
+    /**
+     * A line under the figure, where it needs one to be read correctly: 'Per lot, at 1:500
+     * leverage', 'Estimate at the current price'. Optional; most figures need none.
+     */
+    note?: string;
+}

package/dist/components/estimator-data.js

@@ -0,0 +1,12 @@
+/**
+ * The figures an Estimator lays out once a reader has filled its inputs in.
+ *
+ * Exported from the package for the reason `stats-data.ts` and `comparison-cards-data.ts` are: a
+ * block whose content is a list is one whose consumer builds a value before passing it.
+ *
+ * A record rather than a component per figure, because a result is a number and the words that say
+ * what it is — nothing in it is an element a page composes. The page works the figures out, from a
+ * live feed, a formula or both; the block only sets them, so the same block serves a margin
+ * calculator, a crypto converter and an affiliate's income estimate without knowing which.
+ */
+export {};

package/dist/components/index.d.ts

@@ -44,6 +44,8 @@ export { DownloadBanner, type DownloadBannerProps } from './blocks/download-bann
 export { downloadBannerParts, downloadBannerDefaults } from './blocks/download-banner/DownloadBanner.types.js';
 export { DropdownMenu, type DropdownMenuProps } from './core/dropdown-menu/DropdownMenu.js';
 export { dropdownMenuParts, dropdownMenuDefaults } from './core/dropdown-menu/DropdownMenu.types.js';
+export { Estimator, type EstimatorProps } from './blocks/estimator/Estimator.js';
+export { estimatorParts, estimatorDefaults } from './blocks/estimator/Estimator.types.js';
 export { FaqAccordion, type FaqAccordionProps } from './blocks/faq-accordion/FaqAccordion.js';
 export { faqAccordionParts, faqAccordionDefaults } from './blocks/faq-accordion/FaqAccordion.types.js';
 export { FeatureBullets, type FeatureBulletsProps } from './blocks/feature-bullets/FeatureBullets.js';
@@ -187,6 +189,7 @@ export type { ComparisonCardsCard } from './comparison-cards-data.js';
 export type { ComparisonTableColumn, ComparisonTableRow } from './comparison-table-data.js';
 export type { DataTableColumn, DataTableRow } from './data-table-data.js';
 export type { DownloadBannerBadge, DownloadBannerQr } from './download-banner-data.js';
+export type { EstimatorResult } from './estimator-data.js';
 export type { LogoTile } from './logo-data.js';
 export type { ResourceBannerLink } from './resource-banner-data.js';
 export type { SceneScrollScene } from './scene-scroll-data.js';

package/dist/components/index.js

@@ -45,6 +45,8 @@ export { DownloadBanner } from './blocks/download-banner/DownloadBanner.js';
 export { downloadBannerParts, downloadBannerDefaults } from './blocks/download-banner/DownloadBanner.types.js';
 export { DropdownMenu } from './core/dropdown-menu/DropdownMenu.js';
 export { dropdownMenuParts, dropdownMenuDefaults } from './core/dropdown-menu/DropdownMenu.types.js';
+export { Estimator } from './blocks/estimator/Estimator.js';
+export { estimatorParts, estimatorDefaults } from './blocks/estimator/Estimator.types.js';
 export { FaqAccordion } from './blocks/faq-accordion/FaqAccordion.js';
 export { faqAccordionParts, faqAccordionDefaults } from './blocks/faq-accordion/FaqAccordion.types.js';
 export { FeatureBullets } from './blocks/feature-bullets/FeatureBullets.js';

package/dist/icons/accounts.d.ts

@@ -0,0 +1 @@
+export * from '@deriv-com/quill-icons-web/accounts';

package/dist/icons/accounts.js

@@ -0,0 +1 @@
+export * from '@deriv-com/quill-icons-web/accounts';

package/dist/icons/app-stores.d.ts

@@ -0,0 +1 @@
+export * from '@deriv-com/quill-icons-web/app-stores';

package/dist/icons/app-stores.js

@@ -0,0 +1 @@
+export * from '@deriv-com/quill-icons-web/app-stores';

package/dist/icons/currency.d.ts

@@ -0,0 +1 @@
+export * from '@deriv-com/quill-icons-web/currency';

package/dist/icons/currency.js

@@ -0,0 +1 @@
+export * from '@deriv-com/quill-icons-web/currency';

package/dist/icons/flag.d.ts

@@ -0,0 +1 @@
+export * from '@deriv-com/quill-icons-web/flag';

package/dist/icons/flag.js

@@ -0,0 +1 @@
+export * from '@deriv-com/quill-icons-web/flag';

package/dist/icons/illustrative.d.ts

@@ -0,0 +1 @@
+export * from '@deriv-com/quill-icons-web/illustrative';