@deriv-com/dds-marketing 1.1.1 → 1.1.3

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/feature-bullets/FeatureBullets.d.ts

@@ -1,6 +1,7 @@
 import './FeatureBullets.css';
 import './feature-bullets-impl.css';
 import '../block-reveal.css';
+import '../block-parallax.css';
 import { type FeatureBulletsProps } from './FeatureBullets.types.js';
 export type { FeatureBulletsProps };
 /**

package/dist/components/blocks/feature-bullets/FeatureBullets.js

@@ -5,6 +5,7 @@ import { CircleCheckSolidIcon } from '@deriv-com/quill-icons-web';
 import './FeatureBullets.css';
 import './feature-bullets-impl.css';
 import '../block-reveal.css';
+import '../block-parallax.css';
 import { arriving, useReveal } from '../use-reveal.js';
 import { featureBulletsDefaults, featureBulletsParts, } from './FeatureBullets.types.js';
 /**
@@ -51,5 +52,5 @@ export function FeatureBullets({ ground = featureBulletsDefaults.ground, mediaPo
               
                                  Two behind the claim, which the picture beside them takes — the two halves of
                                  the split arrive first and the list follows them. */
-                                _jsxs("li", { className: featureBulletsParts.item, ...arriving(2 + at), children: [_jsx("span", { className: featureBulletsParts.mark, "aria-hidden": "true", children: _jsx(CircleCheckSolidIcon, {}) }), _jsx("span", { className: featureBulletsParts.text, children: bullet })] }, bullet))) })] }), _jsx("div", { className: featureBulletsParts.media, ...arriving(1), "aria-hidden": "true", children: media })] }) }) }));
+                                _jsxs("li", { className: featureBulletsParts.item, ...arriving(2 + at), children: [_jsx("span", { className: featureBulletsParts.mark, "aria-hidden": "true", children: _jsx(CircleCheckSolidIcon, {}) }), _jsx("span", { className: featureBulletsParts.text, children: bullet })] }, bullet))) })] }), _jsx("div", { "data-dds-parallax": "", className: featureBulletsParts.media, ...arriving(1), "aria-hidden": "true", children: media })] }) }) }));
 }

package/dist/components/blocks/feature-cards/FeatureCards.d.ts

@@ -1,6 +1,7 @@
 import './FeatureCards.css';
 import './feature-cards-impl.css';
 import '../block-reveal.css';
+import '../block-parallax.css';
 import { type FeatureCardsProps } from './FeatureCards.types.js';
 export type { FeatureCardsProps };
 /**

package/dist/components/blocks/feature-cards/FeatureCards.js

@@ -4,6 +4,7 @@ import { useId } from 'react';
 import './FeatureCards.css';
 import './feature-cards-impl.css';
 import '../block-reveal.css';
+import '../block-parallax.css';
 import { given } from '../../given.js';
 import { cardsOf } from '../cards-of.js';
 import { arriving, useReveal } from '../use-reveal.js';

package/dist/components/blocks/feature-scroll/FeatureScroll.js

@@ -52,7 +52,13 @@ export function FeatureScroll({ ground = featureScrollDefaults.ground, title, st
     const root = useRef(null);
     const titles = useRef([]);
     const band = useRef(null);
-    const [showing, setShowing] = useState(0);
+    /*
+      Which stop's picture is showing, and which way the reader went to reach it. The way is held with
+      the stop rather than worked out after it, so the picture arriving and the edge it is uncovered
+      from change in the same render — a step behind, it would open from the wrong side for a frame.
+    */
+    // `going` is absent until the first change, so the picture a reader opens on is simply there.
+    const [{ at: showing, going }, setShowing] = useState({ at: 0 });
     const count = steps.length;
     useLayoutEffect(() => {
         if (count === 0)
@@ -92,7 +98,7 @@ export function FeatureScroll({ ground = featureScrollDefaults.ground, title, st
                     reached = i;
             }
             const next = Math.min(count - 1, reached + 1);
-            setShowing((held) => (held === next ? held : next));
+            setShowing((held) => (held.at === next ? held : { at: next, going: next > held.at ? 'down' : 'up' }));
         };
         const schedule = () => {
             if (frame !== 0)
@@ -127,7 +133,7 @@ export function FeatureScroll({ ground = featureScrollDefaults.ground, title, st
                 window.cancelAnimationFrame(frame);
         };
     }, [count]);
-    return (_jsx("section", { className: featureScrollParts.root, "data-ground": ground, "data-media-position": mediaPosition, "aria-labelledby": titleId, ref: root, children: _jsxs("div", { className: featureScrollParts.inner, children: [_jsx("h2", { className: featureScrollParts.heading, ref: heading, "data-revealed": revealed, ...arriving(0), id: titleId, children: title }), _jsx("div", { className: featureScrollParts.steps, style: { '--dds-featurescroll-stops': count }, children: steps.map((step, index) => (
+    return (_jsx("section", { className: featureScrollParts.root, "data-ground": ground, "data-media-position": mediaPosition, "data-going": going, "aria-labelledby": titleId, ref: root, children: _jsxs("div", { className: featureScrollParts.inner, children: [_jsx("h2", { className: featureScrollParts.heading, ref: heading, "data-revealed": revealed, ...arriving(0), id: titleId, children: title }), _jsx("div", { className: featureScrollParts.steps, style: { '--dds-featurescroll-stops': count }, children: steps.map((step, index) => (
                     /* Keyed by the title. An index would key the set by position, so filtering a stop out
                        would renumber every stop under it and React would reconcile the wrong ones — and
                        these are the content, so two the same would be a duplicate stop rather than a key

package/dist/components/blocks/feature-scroll/feature-scroll-impl.css

@@ -226,53 +226,50 @@
    * The duration and the curve are bound on the part, so the generated sheet writes the
    * reduced-motion block that turns this into a cut.
    */
+  /*
+   * One of them is shown, and the next is uncovered over it rather than faded in.
+   *
+   * The only thing the component's own listener writes is which stop's picture belongs to the words
+   * a reader has reached, and which way they went to reach it — a question about where each title
+   * has got to, which no query asks. The pinning and the change are this stylesheet's.
+   *
+   * A wipe rather than a dissolve. Fading the arriving picture in over the last one put both on
+   * screen at once for the whole of the change — at its middle the square was two photographs at
+   * half strength each, a double exposure that read as the pictures overlapping. Uncovered from an
+   * edge instead, every point of the square is one picture or the other at full strength, and the
+   * line between them moves the way the page does: up from the foot as a reader scrolls on, down
+   * from the head as they scroll back. Nothing is mixed, so nothing overlaps.
+   *
+   * An animation rather than a transition, because an animation starts from its first frame. A
+   * transition starts from wherever the picture last rested, so a reader who turned back mid-section
+   * had the next picture open from the edge they were no longer moving towards.
+   *
+   * The shown picture is brought to the front and uncovered; the one it replaces stays beneath,
+   * whole, for the same duration and then goes — a step at the end of a zero-length transition,
+   * delayed by the uncovering's own duration, read from the same role so the two cannot drift
+   * apart into a gap. Every other picture is already gone.
+   *
+   * `z-index` is a bare integer, the one kind of value this system keeps out of its tokens: a
+   * stacking order inside a component is not a decision any brand or mode has an opinion about.
+   */
+  :where([data-dds-context="marketing"]) .dds-featurescroll .dds-featurescroll__media {
+    transition: opacity 0s linear var(--motion-duration-media-hover);
+  }
+
   :where([data-dds-context="marketing"])
     .dds-featurescroll
     .dds-featurescroll__media[data-showing="true"] {
     opacity: 1;
-    /*
-     * On top, and that is what makes this a dissolve rather than a dip.
-     *
-     * The arriving picture fades in over whatever is beneath it, so at every moment of the change
-     * the square is covered by something opaque. Fading both at once instead leaves them near half
-     * way together, the section's own ground shows through the pair, and the square brightens and
-     * darkens — a pulse, from nothing but two opacities crossing.
-     *
-     * It has to be the shown one rather than the later one in the document, because a reader
-     * scrolls back as well as forward. Going up, the arriving picture is earlier in the markup and
-     * would fade in underneath the one it is replacing: invisible until that one left, which is a
-     * cut with a pause in front of it.
-     *
-     * A bare integer, which is the one kind of value this system keeps out of its tokens: a
-     * stacking order inside a component is not a decision any brand or mode has an opinion about.
-     */
-    z-index: 1;
-    /* No wait on the way in. The pair of delays is the whole mechanism — see the rule below. */
     transition-delay: 0s;
+    z-index: 1;
   }
 
-  /*
-   * The one leaving holds until it has been covered, then goes.
-   *
-   * This is the other half of the dissolve. The arriving picture takes the whole duration to reach
-   * full opacity, and for all of it the one underneath stays exactly as it was — so there is never
-   * a frame where the square is anything less than a complete picture. Only once it is hidden
-   * behind the new one does it drop, which costs nothing to look at because nobody can see it.
-   *
-   * The delay is the arriving picture's own duration, read from the same role, so the two cannot
-   * drift apart into a gap or an overlap.
-   *
-   * There is no scale here any more. It read as a pulse, which is what it was: a square this large
-   * carries a change of picture on its own, and a sixth of a second of zoom on top of it is the
-   * section drawing attention to its own machinery.
-   */
-  :where([data-dds-context="marketing"]) .dds-featurescroll .dds-featurescroll__media {
-    transition-delay: var(--motion-duration-media-hover);
-    /* Named here rather than in the contract because `staticCss` takes keywords, and this is the
-       one property the pair of rules is about. The duration and the curve stay bound there, which
-       is what the generated reduced-motion block is written from — so a reader who asked for less
-       still gets a cut. */
-    transition-property: opacity;
+  :where([data-dds-context="marketing"]) .dds-featurescroll[data-going="down"] .dds-featurescroll__media[data-showing="true"] {
+    animation: dds-featurescroll-from-foot var(--motion-duration-media-hover) var(--motion-easing-media-hover);
+  }
+
+  :where([data-dds-context="marketing"]) .dds-featurescroll[data-going="up"] .dds-featurescroll__media[data-showing="true"] {
+    animation: dds-featurescroll-from-head var(--motion-duration-media-hover) var(--motion-easing-media-hover);
   }
 
   /*
@@ -290,3 +287,29 @@
     );
   }
 }
+
+@keyframes dds-featurescroll-from-foot {
+  from {
+    clip-path: inset(100% 0 0 0);
+  }
+  to {
+    clip-path: inset(0);
+  }
+}
+
+@keyframes dds-featurescroll-from-head {
+  from {
+    clip-path: inset(0 0 100% 0);
+  }
+  to {
+    clip-path: inset(0);
+  }
+}
+
+/* Less movement is a cut: no uncovering, and the last picture gone at once. The generated sheet
+   already drops every transition here; the animation is this sheet's to drop. */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-featurescroll .dds-featurescroll__media[data-showing="true"] {
+    animation: none;
+  }
+}

package/dist/components/blocks/feature-split/FeatureSplit.d.ts

@@ -1,6 +1,7 @@
 import './FeatureSplit.css';
 import './feature-split-impl.css';
 import '../block-reveal.css';
+import '../block-parallax.css';
 import { type FeatureSplitProps } from './FeatureSplit.types.js';
 export type { FeatureSplitProps };
 /**

package/dist/components/blocks/feature-split/FeatureSplit.js

@@ -4,6 +4,7 @@ import { useId } from 'react';
 import './FeatureSplit.css';
 import './feature-split-impl.css';
 import '../block-reveal.css';
+import '../block-parallax.css';
 import { arriving, useReveal } from '../use-reveal.js';
 import { given } from '../../given.js';
 import { featureSplitDefaults, featureSplitParts, } from './FeatureSplit.types.js';
@@ -34,5 +35,5 @@ import { featureSplitDefaults, featureSplitParts, } from './FeatureSplit.types.j
 export function FeatureSplit({ ground = featureSplitDefaults.ground, mediaPosition = featureSplitDefaults.mediaPosition, title, description, link, media, }) {
     const titleId = useId();
     const [band, revealed] = useReveal();
-    return (_jsx("section", { className: featureSplitParts.root, "data-ground": ground, "data-media-position": mediaPosition, "aria-labelledby": titleId, children: _jsx("div", { className: featureSplitParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: featureSplitParts.split, children: [_jsxs("div", { className: featureSplitParts.content, children: [_jsx("h2", { className: featureSplitParts.title, ...arriving(0), id: titleId, children: title }), given(description) ? (_jsx("p", { className: featureSplitParts.description, ...arriving(1), children: description })) : null, link ? (_jsx("div", { className: featureSplitParts.link, ...arriving(2), children: link })) : null] }), _jsx("div", { className: featureSplitParts.media, ...arriving(3), "aria-hidden": "true", children: media })] }) }) }));
+    return (_jsx("section", { className: featureSplitParts.root, "data-ground": ground, "data-media-position": mediaPosition, "aria-labelledby": titleId, children: _jsx("div", { className: featureSplitParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: featureSplitParts.split, children: [_jsxs("div", { className: featureSplitParts.content, children: [_jsx("h2", { className: featureSplitParts.title, ...arriving(0), id: titleId, children: title }), given(description) ? (_jsx("p", { className: featureSplitParts.description, ...arriving(1), children: description })) : null, link ? (_jsx("div", { className: featureSplitParts.link, ...arriving(2), children: link })) : null] }), _jsx("div", { "data-dds-parallax": "", className: featureSplitParts.media, ...arriving(3), "aria-hidden": "true", children: media })] }) }) }));
 }

package/dist/components/blocks/feature-stack/FeatureStack.d.ts

@@ -1,6 +1,7 @@
 import './FeatureStack.css';
 import './feature-stack-impl.css';
 import '../block-reveal.css';
+import '../block-parallax.css';
 import { type FeatureStackProps } from './FeatureStack.types.js';
 export type { FeatureStackProps };
 /**

package/dist/components/blocks/feature-stack/FeatureStack.js

@@ -4,6 +4,7 @@ import { useId } from 'react';
 import './FeatureStack.css';
 import './feature-stack-impl.css';
 import '../block-reveal.css';
+import '../block-parallax.css';
 import { given } from '../../given.js';
 import { arriving, useReveal } from '../use-reveal.js';
 import { featureStackDefaults, featureStackParts, } from './FeatureStack.types.js';
@@ -23,5 +24,5 @@ import { featureStackDefaults, featureStackParts, } from './FeatureStack.types.j
 export function FeatureStack({ ground = featureStackDefaults.ground, title, description, link, image, }) {
     const titleId = useId();
     const [band, revealed] = useReveal();
-    return (_jsx("section", { className: featureStackParts.root, "data-ground": ground, "aria-labelledby": titleId, children: _jsxs("div", { className: featureStackParts.inner, ref: band, "data-revealed": revealed, children: [_jsxs("div", { className: featureStackParts.header, children: [_jsx("h2", { className: featureStackParts.title, id: titleId, ...arriving(0), children: title }), given(description) ? (_jsx("p", { className: featureStackParts.description, ...arriving(1), children: description })) : null, link ? (_jsx("div", { className: featureStackParts.link, ...arriving(2), children: link })) : null] }), _jsx("div", { className: featureStackParts.media, ...arriving(3), children: image ? (_jsx("img", { className: featureStackParts.image, src: image.src, alt: image.alt, width: image.width, height: image.height, loading: "lazy", decoding: "async" })) : null })] }) }));
+    return (_jsx("section", { className: featureStackParts.root, "data-ground": ground, "aria-labelledby": titleId, children: _jsxs("div", { className: featureStackParts.inner, ref: band, "data-revealed": revealed, children: [_jsxs("div", { className: featureStackParts.header, children: [_jsx("h2", { className: featureStackParts.title, id: titleId, ...arriving(0), children: title }), given(description) ? (_jsx("p", { className: featureStackParts.description, ...arriving(1), children: description })) : null, link ? (_jsx("div", { className: featureStackParts.link, ...arriving(2), children: link })) : null] }), _jsx("div", { "data-dds-parallax": "", className: featureStackParts.media, ...arriving(3), children: image ? (_jsx("img", { className: featureStackParts.image, src: image.src, alt: image.alt, width: image.width, height: image.height, loading: "lazy", decoding: "async" })) : null })] }) }));
 }

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. For a careers or about page, where the photograph of the people is the point. Off by default: a card selling one action does not need its picture moving under the 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;
@@ -50,5 +50,5 @@ export declare const imageBannerDefaults: {
     readonly variant: "split";
     readonly mediaPosition: "end";
     readonly headingLevel: "h2";
-    readonly parallax: false;
+    readonly parallax: true;
 };

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

@@ -11,4 +11,4 @@ export const imageBannerParts = {
     media: 'dds-imagebanner__media',
 };
 /** Generated so defaults cannot drift from the contract. */
-export const imageBannerDefaults = { ground: 'page', variant: 'split', mediaPosition: 'end', headingLevel: 'h2', parallax: false };
+export const imageBannerDefaults = { ground: 'page', variant: 'split', mediaPosition: 'end', headingLevel: 'h2', parallax: true };

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

package/dist/components/blocks/landing-hero/LandingHero.css

@@ -6,7 +6,7 @@
   display: flex;
   inline-size: 100%;
   justify-content: center;
-  overflow: hidden;
+  overflow: clip;
   overflow-wrap: anywhere;
   position: relative;
   background-color: var(--color-bg-brand-strong);

package/dist/components/blocks/landing-hero/LandingHero.d.ts

@@ -1,6 +1,7 @@
 import './LandingHero.css';
 import './landing-hero-impl.css';
 import '../block-reveal.css';
+import '../block-parallax.css';
 import { type LandingHeroProps } from './LandingHero.types.js';
 export type { LandingHeroProps };
 /**

package/dist/components/blocks/landing-hero/LandingHero.js

@@ -4,6 +4,7 @@ import { useId } from 'react';
 import './LandingHero.css';
 import './landing-hero-impl.css';
 import '../block-reveal.css';
+import '../block-parallax.css';
 import { arriving, useReveal } from '../use-reveal.js';
 import { given } from '../../given.js';
 import { Background } from '../../core/background/Background.js';
@@ -51,5 +52,5 @@ export function LandingHero({ eyebrow, title, headingLevel = landingHeroDefaults
         /* The one inline style here, and it is a value rather than a decision: which photograph,
            supplied by the page. Everything about how it is drawn — the cover fit and the position — is in the stylesheet, where it can be reasoned about. A background shorthand
            would have reset those four properties every time the page passed an image. */
-        style: given(backgroundImage) ? { backgroundImage: `url(${backgroundImage})` } : undefined, children: [background === 'halftone' ? _jsx(Background, { tone: "dark", children: null }) : null, media ? (_jsx("div", { className: landingHeroParts.media, "aria-hidden": "true", children: media })) : null, _jsx("div", { className: landingHeroParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: landingHeroParts.content, children: [_jsxs("div", { className: landingHeroParts.text, children: [given(eyebrow) ? (_jsx("p", { className: landingHeroParts.eyebrow, ...arriving(0), children: eyebrow })) : null, _jsx(Title, { className: landingHeroParts.title, ...arriving(1), id: titleId, children: title }), given(description) ? (_jsx("p", { className: landingHeroParts.description, ...arriving(2), children: description })) : null] }), actions ? (_jsx("div", { className: landingHeroParts.actions, ...arriving(3), children: actions })) : null] }) })] }));
+        style: given(backgroundImage) ? { backgroundImage: `url(${backgroundImage})` } : undefined, children: [background === 'halftone' ? _jsx(Background, { tone: "dark", children: null }) : null, media ? (_jsx("div", { "data-dds-parallax": "", className: landingHeroParts.media, "aria-hidden": "true", children: media })) : null, _jsx("div", { className: landingHeroParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: landingHeroParts.content, children: [_jsxs("div", { className: landingHeroParts.text, children: [given(eyebrow) ? (_jsx("p", { className: landingHeroParts.eyebrow, ...arriving(0), children: eyebrow })) : null, _jsx(Title, { className: landingHeroParts.title, ...arriving(1), id: titleId, children: title }), given(description) ? (_jsx("p", { className: landingHeroParts.description, ...arriving(2), children: description })) : null] }), actions ? (_jsx("div", { className: landingHeroParts.actions, ...arriving(3), children: actions })) : null] }) })] }));
 }

package/dist/components/blocks/product-hero/ProductHero.css

@@ -6,7 +6,7 @@
   display: flex;
   inline-size: 100%;
   justify-content: center;
-  overflow: hidden;
+  overflow: clip;
   overflow-wrap: anywhere;
   position: relative;
   background-color: var(--color-bg-brand-strong);

package/dist/components/blocks/product-hero/ProductHero.d.ts

@@ -1,6 +1,7 @@
 import './ProductHero.css';
 import './product-hero-impl.css';
 import '../block-reveal.css';
+import '../block-parallax.css';
 import { type ProductHeroProps } from './ProductHero.types.js';
 export type { ProductHeroProps };
 /**

package/dist/components/blocks/product-hero/ProductHero.js

@@ -4,6 +4,7 @@ import { useId } from 'react';
 import './ProductHero.css';
 import './product-hero-impl.css';
 import '../block-reveal.css';
+import '../block-parallax.css';
 import { arriving, useReveal } from '../use-reveal.js';
 import { given } from '../../given.js';
 import { productHeroDefaults, productHeroParts, } from './ProductHero.types.js';
@@ -47,5 +48,5 @@ export function ProductHero({ eyebrow, title, headingLevel = productHeroDefaults
         style: given(backgroundImage) ? { backgroundImage: `url(${backgroundImage})` } : undefined, children: _jsx("div", { className: productHeroParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: productHeroParts.content, children: [_jsxs("div", { className: productHeroParts.text, children: [given(eyebrow) ? (_jsx("p", { className: productHeroParts.eyebrow, ...arriving(0), children: eyebrow })) : null, _jsx(Title, { className: productHeroParts.title, ...arriving(1), id: titleId, children: title }), given(description) ? (_jsx("p", { className: productHeroParts.description, ...arriving(2), children: description })) : null] }), actions ? (_jsx("div", { className: productHeroParts.actions, ...arriving(3), children: actions })) : null, image ? (
                     // The picture at its own shape: drawn here so the band can size it, and read for its
                     // `alt`, which the page leaves empty where the claim already names it.
-                    _jsx("div", { className: productHeroParts.media, ...arriving(4), children: _jsx("img", { className: productHeroParts.image, src: image.src, alt: image.alt, width: image.width, height: image.height, decoding: "async" }) })) : media ? (_jsx("div", { className: productHeroParts.media, ...arriving(4), "aria-hidden": "true", children: media })) : null] }) }) }));
+                    _jsx("div", { "data-dds-parallax": "", className: productHeroParts.media, ...arriving(4), children: _jsx("img", { className: productHeroParts.image, src: image.src, alt: image.alt, width: image.width, height: image.height, decoding: "async" }) })) : media ? (_jsx("div", { "data-dds-parallax": "", className: productHeroParts.media, ...arriving(4), "aria-hidden": "true", children: media })) : null] }) }) }));
 }

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

@@ -38,8 +38,8 @@
 
 :where([data-dds-context="marketing"]) .dds-steps .dds-steps__image {
   display: block;
-  transition-duration: var(--motion-duration-shift);
-  transition-timing-function: var(--motion-easing-standard);
+  transition-duration: var(--motion-duration-turn);
+  transition-timing-function: var(--motion-easing-reveal);
 }
 
 :where([data-dds-context="marketing"]) .dds-steps .dds-steps__content {

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

@@ -1,6 +1,7 @@
 import './Steps.css';
 import './steps-impl.css';
 import '../block-reveal.css';
+import '../block-parallax.css';
 import { type StepsProps } from './Steps.types.js';
 export type { StepsProps };
 /**