@deriv-com/dds-marketing 0.2.0 → 1.0.1

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

@@ -0,0 +1,167 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useLayoutEffect, useRef, useState } from 'react';
+import './FeatureScroll.css';
+import './feature-scroll-impl.css';
+import '../block-reveal.css';
+import { arriving, useReveal } from '../use-reveal.js';
+import { Link } from '../../core/link/Link.js';
+import { featureScrollDefaults, featureScrollParts, } from './FeatureScroll.types.js';
+/**
+ * Where the fold is, in pixels — the stylesheet's `48rem`, read against the page's own root font
+ * size, so the two agree when a page or a reader has changed it. See `showing` below.
+ */
+const FOLD_REM = 48;
+const foldsAt = () => FOLD_REM * (Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16);
+/**
+ * A section that gives a set of things one screen each, with the picture pinned beside the words.
+ *
+ * Two mechanisms, and which does what is the thing to understand here. Holding a picture in place
+ * while words move past it is `position: sticky`, and nothing in this file measures it. Knowing
+ * *which* picture belongs to the words a reader has reached is a question about where each title
+ * has got to, and no stylesheet can ask it — so that much is below, and only that much.
+ *
+ * The rule the reference design settles on: a stop's picture is the one showing once the *next*
+ * stop's title has risen to the line the pictures are pinned at. Read as "the last title at or
+ * above the line" plus one, clamped to the end. It means the square changes at the moment a reader
+ * reaches a new heading rather than at some fraction of the way through, which is the only moment
+ * they would notice either way.
+ *
+ * Throttled to one read per frame through `requestAnimationFrame`, on a passive listener, and the
+ * read itself is `getBoundingClientRect` on the titles — no layout is written back, so the loop
+ * cannot thrash. `useLayoutEffect` rather than `useEffect` so the first measurement lands before
+ * the browser paints; the effect otherwise ran after the first frame and the section opened on
+ * step one for that frame however far down the page a reader had already scrolled.
+ *
+ * It measures the section's own width rather than the window's, because the fold is a container
+ * query on the section and the two disagree wherever a frame stands in for a window. The fold is
+ * the stylesheet's own `48rem`, turned into pixels against the root font size each time it is
+ * asked: a fixed 768 agreed with it only while the root stayed at sixteen, and a page that set it
+ * smaller pinned the picture on the first stop for the width in between.
+ *
+ * The parts of a stop are in the order a phone reads them, which is the order they are written:
+ * name, picture, line, way onward. At full width each stop gives up its box — `display: contents`
+ * — and the grid places the words in one column and every picture in the other, stacked, so the
+ * change is a change in one square rather than one picture leaving and another arriving. The
+ * reference design ships two DOM trees to get that; one tree means a reader's assistive technology
+ * and anybody reading the markup meet each stop once.
+ */
+export function FeatureScroll({ ground = featureScrollDefaults.ground, title, steps, mediaPosition = featureScrollDefaults.mediaPosition, }) {
+    const titleId = useId();
+    const [heading, revealed] = useReveal();
+    const root = useRef(null);
+    const titles = useRef([]);
+    const band = useRef(null);
+    const [showing, setShowing] = useState(0);
+    const count = steps.length;
+    useLayoutEffect(() => {
+        if (count === 0)
+            return;
+        /**
+         * The line the pictures are pinned at, read off the pinned band itself.
+         *
+         * Asked of the element rather than held here, because the offset is the stylesheet's — it is
+         * `size.bar-height`, so that a picture comes to rest under a navigation bar rather than behind
+         * one. A copy of the number in this file would be a second answer to drift from it, and the
+         * band already knows.
+         */
+        const line = () => {
+            const pinned = band.current;
+            if (pinned === null)
+                return 0;
+            const top = Number.parseFloat(getComputedStyle(pinned).insetBlockStart);
+            return Number.isFinite(top) ? top : 0;
+        };
+        let frame = 0;
+        const read = () => {
+            frame = 0;
+            const section = root.current;
+            if (section === null)
+                return;
+            // The fold is the section's own width, which is what the stylesheet asks. Below it every
+            // stop carries its own picture and there is nothing to choose between.
+            if (section.clientWidth < foldsAt())
+                return;
+            const at = line();
+            let reached = -1;
+            for (let i = 0; i < count; i += 1) {
+                const heading = titles.current[i];
+                if (heading === null || heading === undefined)
+                    continue;
+                if (heading.getBoundingClientRect().top <= at)
+                    reached = i;
+            }
+            const next = Math.min(count - 1, reached + 1);
+            setShowing((held) => (held === next ? held : next));
+        };
+        const schedule = () => {
+            if (frame !== 0)
+                return;
+            frame = window.requestAnimationFrame(read);
+        };
+        /**
+         * Heard on the way down, because a scroll does not come back up.
+         *
+         * A `scroll` event fired at an element does not bubble, so a listener on the window hears only
+         * the window's own scrolling. Wherever the section sits inside something that scrolls — a
+         * pane, a dialog, the workbench's own stage — the pictures simply never changed, while the
+         * same section on a page of its own worked perfectly. That is a difference no reader should be
+         * able to find, and the reference design has it too: it listens on the window alone.
+         *
+         * The capture phase is what catches them. Every scroll passes through the window on its way to
+         * its target whether or not it comes back, so one listener here answers for every scroller on
+         * the page, and the read itself is unchanged — `getBoundingClientRect` is measured against the
+         * viewport, which is the right frame however the section came to move within it.
+         *
+         * The flag has to be given to the removal as well: a capturing listener and a bubbling one are
+         * two different registrations, and taking off the wrong one leaves the other listening.
+         */
+        const heard = { passive: true, capture: true };
+        read();
+        window.addEventListener('scroll', schedule, heard);
+        window.addEventListener('resize', schedule, { passive: true });
+        return () => {
+            window.removeEventListener('scroll', schedule, { capture: true });
+            window.removeEventListener('resize', schedule);
+            if (frame !== 0)
+                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) => (
+                    /* 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
+                       collision worth tolerating. */
+                    _jsx(Stop, { step: step, showing: index === showing, onTitle: (held) => {
+                            titles.current[index] = held;
+                        }, onBand: index === 0 ? band : undefined }, step.title))) })] }) }));
+}
+/**
+ * One stop, which arrives on its own below the fold and not at all above it.
+ *
+ * A component of its own for one reason: it holds a `useReveal` each, and a hook cannot be called
+ * inside a loop. Private to this file, because a stop is not a thing a page composes — the section
+ * takes its set as data, and this is how one record is drawn.
+ *
+ * Two arrivals rather than one, and the gap between them is the layout's rather than a number. The
+ * words and the picture each watch for themselves, and on a phone the picture sits under the line
+ * it belongs to — so it comes up a beat later because it reaches the viewport a beat later. A delay
+ * would have been a guess about how far apart they are; this is the distance itself.
+ *
+ * Above the fold neither moves, and the stylesheet says so. What moves there is the picture, which
+ * is pinned beside the words and exchanged as a reader passes each title — the section's own
+ * motion, and enough of it. It is also the one place a transform cannot go: the band is
+ * `position: sticky`, and the crossfade owns its opacity.
+ *
+ * Below the fold there is no pinning and nothing is exchanged: the stops are ordinary blocks in a
+ * column, so without this the only thing on a phone that moved was the section's heading — one
+ * flourish at the top and six screens of nothing after it.
+ */
+function Stop({ step, showing, onTitle, onBand, }) {
+    const [words, wordsHere] = useReveal();
+    const [picture, pictureHere] = useReveal();
+    return (_jsxs("div", { className: featureScrollParts.step, children: [_jsxs("div", { className: featureScrollParts.content, "data-revealed": wordsHere, children: [_jsx("h3", { className: featureScrollParts.title, ...arriving(0), ref: (held) => {
+                            words(held);
+                            onTitle(held);
+                        }, children: step.title }), _jsx("p", { className: featureScrollParts.description, ...arriving(1), children: step.description }), step.href !== undefined && step.linkLabel !== undefined ? (_jsx("div", { className: featureScrollParts.link, ...arriving(2), children: _jsx(Link, { href: step.href, children: step.linkLabel }) })) : null] }), _jsx("div", { className: featureScrollParts.media, "data-showing": showing, "data-revealed": pictureHere, "aria-hidden": "true", ref: onBand, children: _jsx("img", { className: featureScrollParts.picture, src: step.image, alt: "", ...arriving(0), ref: picture }) })] }));
+}

package/dist/components/blocks/feature-scroll/FeatureScroll.types.d.ts

@@ -0,0 +1,40 @@
+import type { FeatureScrollStep } from '../../scroll-data.js';
+export interface FeatureScrollOwnProps {
+    /**
+     * `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';
+    /**
+     * `end` — The default. The words are read first, which is the order a reader’s eye takes a two-up row in
+     * `start` — The pictures lead, for a section following one that put its own the other way — two scrolls facing the same way read as one very long column
+     */
+    mediaPosition?: 'end' | 'start';
+    /** Always. What the set is a set of, in the fewest words that say it — 'All your markets in one place'. It is the only thing a reader sees before committing to several screens of scrolling, so it has to say what is coming */
+    title: string;
+    /** Always. The stops, in the order a reader meets them. Three at least — the section is built on each one having a screen, and a pair is worth one screen with both on it.
+  
+  Every stop is the same shape, which is what makes the set a set: a name, a line, a picture, and a way onward where there is one. */
+    steps: FeatureScrollStep[];
+}
+export type FeatureScrollProps = FeatureScrollOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const featureScrollParts: {
+    readonly root: "dds-featurescroll";
+    readonly inner: "dds-featurescroll__inner";
+    readonly heading: "dds-featurescroll__heading";
+    readonly steps: "dds-featurescroll__steps";
+    readonly step: "dds-featurescroll__step";
+    readonly content: "dds-featurescroll__content";
+    readonly title: "dds-featurescroll__title";
+    readonly description: "dds-featurescroll__description";
+    readonly link: "dds-featurescroll__link";
+    readonly media: "dds-featurescroll__media";
+    readonly picture: "dds-featurescroll__picture";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const featureScrollDefaults: {
+    readonly ground: "page";
+    readonly mediaPosition: "end";
+};

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

@@ -0,0 +1,17 @@
+// GENERATED from feature-scroll.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const featureScrollParts = {
+    root: 'dds-featurescroll',
+    inner: 'dds-featurescroll__inner',
+    heading: 'dds-featurescroll__heading',
+    steps: 'dds-featurescroll__steps',
+    step: 'dds-featurescroll__step',
+    content: 'dds-featurescroll__content',
+    title: 'dds-featurescroll__title',
+    description: 'dds-featurescroll__description',
+    link: 'dds-featurescroll__link',
+    media: 'dds-featurescroll__media',
+    picture: 'dds-featurescroll__picture',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const featureScrollDefaults = { ground: 'page', mediaPosition: 'end' };

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

@@ -0,0 +1,292 @@
+/*
+ * 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.
+ *
+ * Every query here is `@container` rather than `@media`. The section declares `container-type`,
+ * so the set folds on the band's own width — which is what the rest of this package does, and
+ * what makes the workbench's viewport control mean something: it resizes the stage rather than
+ * the browser, and a section asking the window would hold its desktop layout at every setting.
+ *
+ * `48rem` longhand throughout because `var()` is not permitted in a container query condition,
+ * and it is the width the rest of this package folds at.
+ */
+
+/*
+ * One column below the fold, and the picture between the name and the line about it.
+ *
+ * The row direction is the contract's to say — it varies by a styling axis, which is what
+ * `structure[]` is for, and the generated sheet carries both values. What is left here is the
+ * fold, which a binding cannot express: `structure` has no width to attach a rule to.
+ *
+ * Written with the `data-media-position` attribute so it carries the weight of the generated rules
+ * keyed on it — `.dds-featurescroll[data-media-position="end"] .dds-featurescroll__content` and its
+ * kin, a class, an attribute and a class — and wins over anything at that weight by loading later.
+ */
+@container (max-width: 47.9375rem) {
+  :where([data-dds-context="marketing"])
+    .dds-featurescroll[data-media-position]
+    .dds-featurescroll__step {
+    flex-direction: column;
+  }
+
+  /*
+   * The text column stops being a box so the picture can sit inside its order.
+   *
+   * A phone has one column, and the picture is what tells a reader which of six stops they have
+   * reached — put after the words it arrives once they have already decided whether to read them.
+   * The name, the picture, then the line and the way onward is the reference design's own order,
+   * and the only other way to get it is a second copy of the markup for the second layout.
+   *
+   * `display: contents` takes the box out and leaves its children to the row above, so the four
+   * parts become four flex items and `order` can interleave them. The children keep their own
+   * styling; what is lost is anything the box itself drew, which here is one `row-gap` that is
+   * `space.gap.none` at every width anyway.
+   */
+  :where([data-dds-context="marketing"]) .dds-featurescroll .dds-featurescroll__content {
+    display: contents;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-featurescroll .dds-featurescroll__title {
+    order: 1;
+  }
+
+  /*
+   * The band hugs its picture and the picture runs the column.
+   *
+   * There is one column below the fold, nothing to pin against, and no band to be the height of —
+   * so the air the band holds the picture off its edges by would be a hole in the stack, where the
+   * gap between the parts already does that job.
+   */
+  :where([data-dds-context="marketing"]) .dds-featurescroll .dds-featurescroll__media {
+    order: 2;
+    padding-block: 0;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-featurescroll .dds-featurescroll__picture {
+    inline-size: 100%;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-featurescroll .dds-featurescroll__description {
+    order: 3;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-featurescroll .dds-featurescroll__link {
+    order: 4;
+  }
+
+  /*
+   * The steps between the parts come off the parts and onto the stack.
+   *
+   * At full width the column carries them on each part's own `margin-block-end`, because
+   * title-to-description and description-to-what-follows are two different roles. Below the fold
+   * there is a fifth thing in the order — the picture — and a margin belonging to the title would
+   * land under the picture instead of over it. So the row's own gap governs here, and the margins
+   * that would add to it are cleared.
+   */
+  :where([data-dds-context="marketing"]) .dds-featurescroll .dds-featurescroll__title,
+  :where([data-dds-context="marketing"]) .dds-featurescroll .dds-featurescroll__description {
+    margin-block-end: 0;
+  }
+}
+
+/*
+ * A screen each at full width, the picture pinned for the length of it, and the set closed up.
+ *
+ * The height is the whole idea rather than a decoration on it: a reader arrives at one stop at a
+ * time and scrolls on to the next, which is what a set too long to compare needs and what a grid
+ * of six cards cannot give. `100cqh` rather than `100svh` for the reason LandingHero gives — with
+ * no ancestor declaring size containment the two are the same number, and the container unit is
+ * what lets a frame standing in for a window say otherwise. The section's own `container-type` is
+ * `inline-size`, which answers no question about height, so the unit passes straight through it.
+ *
+ * `position: sticky` and nothing else. The reference design measures scroll position in React,
+ * keeps an active index and crossfades between a stack of absolutely-placed pictures; the dissolve
+ * is what that buys and three listeners on a marketing page is what it costs. The browser already
+ * knows where the box is.
+ *
+ * It pins at `size.bar-height`, which is what a collapsed navigation bar takes — so the picture
+ * comes to rest just under the bar rather than behind it. On a page with no bar the offset is a
+ * margin, which is what a picture at the very top of the window wants anyway.
+ *
+ * The square is capped at the band it has to fit inside: the bar's height above it and the same
+ * again below, so a short window compacts the picture instead of running it past the fold. Both
+ * axes take the same cap because the shape is the point — capping the height alone would clamp a
+ * square into a letterbox, and the picture inside is cropped to fill whatever it is given.
+ *
+ * The gap between stops goes to nothing here. Below the fold they are ordinary blocks and want air
+ * between them, which is the gap the contract binds; at full width a picture is released at the
+ * moment the next arrives, and a gap there opens a stretch of scrolling with no picture pinned at
+ * all — which reads as the section having ended and started again.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-featurescroll .dds-featurescroll__heading {
+    /* `margin-inline: auto` as well as the alignment, because the heading is held to
+       `size.measure.heading` — centred text inside a box still pinned to the start edge is a
+       heading that looks centred only while it is short enough not to reach the cap. */
+    margin-inline: auto;
+    text-align: center;
+  }
+
+  /*
+   * Two columns, and every picture in one of them.
+   *
+   * The rows are named rather than numbered so the contract can place the two halves: `structure`
+   * may hold a keyword and may not hold a 2, on the argument that a ratio between siblings is a
+   * layout decision — and the names say which half is which where a number would only say where.
+   *
+   * The row count arrives as a custom property because `grid-row: 1 / -1` cannot reach the end of
+   * an implicit grid: with no explicit rows, `-1` is the end of the explicit one, which is the
+   * first row. Stated, the pictures span every row and land on top of one another.
+   */
+  :where([data-dds-context="marketing"]) .dds-featurescroll .dds-featurescroll__steps {
+    display: grid;
+    grid-template-columns: [words] 1fr [picture] 1fr;
+    grid-template-rows: repeat(var(--dds-featurescroll-stops, 1), auto);
+    row-gap: 0;
+  }
+
+  /*
+   * A stop gives up its box, so the grid can place what is inside it.
+   *
+   * This is what lets one tree serve both layouts. A picture inside its own stop can only be
+   * pinned within it — released a screen later, arriving from below, travelling rather than
+   * changing. Placed by the grid instead, every picture is in one column across every row, so
+   * they overlap and one can be exchanged for another in the same square.
+   *
+   * The stop stays in the markup and keeps its four parts together; what it gives up is a box
+   * nothing needed at this width.
+   */
+  :where([data-dds-context="marketing"]) .dds-featurescroll .dds-featurescroll__step {
+    display: contents;
+  }
+
+  /*
+   * Nothing arrives on its own up here, whatever it was marked.
+   *
+   * Below the fold the words and then the picture come up as a reader reaches them, because there
+   * is nothing else moving in a column of stacked blocks. Above it the picture is pinned beside
+   * the words and exchanged as each title is passed — that is the section's motion, and a stop
+   * sliding in under it would be two arrivals for one thing.
+   *
+   * There is a harder reason for the picture. It sits inside a `position: sticky` band, and a
+   * transform on it is a transform the pinning has to survive. `none` rather than a zero value, so
+   * no transform exists at all.
+   *
+   * The attribute stays on both elements and is simply not read here, which is what keeps the
+   * component free of a width it cannot measure: the fold is a container query, and no observer
+   * can see one.
+   */
+  :where([data-dds-context="marketing"]) .dds-featurescroll [data-revealed] [data-reveal-at] {
+    opacity: 1;
+    translate: none;
+  }
+
+  /*
+   * The words take a screen each, which is the rhythm the whole section is built on: a reader
+   * arrives at one stop at a time and scrolls on to the next. Centred in it so they sit level with
+   * the picture rather than at the head of a screen-tall row.
+   */
+  :where([data-dds-context="marketing"]) .dds-featurescroll .dds-featurescroll__content {
+    justify-content: center;
+    min-block-size: 100cqh;
+  }
+
+  /*
+   * Every band pinned at one line, and all of them stacked.
+   *
+   * `grid-row` spans the whole set, so the containing block a sticky box measures its room against
+   * is the entire list rather than one stop — which is what keeps a picture pinned from the first
+   * stop to the last instead of being released at each boundary.
+   *
+   * `align-self: start` because the band is a screen tall and its area is the whole list; stretched
+   * it would be as tall as the section and there would be nothing to pin.
+   *
+   * `100cqh` rather than `100svh` for the reason LandingHero gives: with no ancestor declaring size
+   * containment the two are the same number, and the container unit is what lets a frame standing
+   * in for a window say otherwise.
+   */
+  :where([data-dds-context="marketing"]) .dds-featurescroll .dds-featurescroll__media {
+    align-self: start;
+    block-size: calc(100cqh - var(--size-bar-height));
+    grid-row: 1 / -1;
+    inset-block-start: var(--size-bar-height);
+    opacity: 0;
+    position: sticky;
+  }
+
+  /*
+   * And one of them is shown.
+   *
+   * The only thing the component's own listener writes. Which stop's picture belongs to the words
+   * a reader has reached is a question about where each title has got to, and no query asks it —
+   * everything else here, the pinning and the dissolve, is this stylesheet's.
+   *
+   * 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.
+   */
+  :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;
+  }
+
+  /*
+   * 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;
+  }
+
+  /*
+   * The largest square the band can hold.
+   *
+   * Both bounds in one measure, because a square capped on one axis alone is not a square: giving
+   * it a `max-block-size` clamps the height and leaves the width, and the browser hands back a
+   * flattened picture. `min()` picks whichever runs out first — the half it sits in, or the band's
+   * own inner height, which is the band less the air it holds the picture off its edges by.
+   */
+  :where([data-dds-context="marketing"]) .dds-featurescroll .dds-featurescroll__picture {
+    inline-size: min(
+      100%,
+      calc(100cqh - var(--size-bar-height) - var(--space-gap-lg) * 2)
+    );
+  }
+}

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

@@ -0,0 +1,95 @@
+/* GENERATED from featuresplit.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-featuresplit {
+  box-sizing: border-box;
+  container-type: inline-size;
+  display: flex;
+  inline-size: 100%;
+  justify-content: center;
+}
+
+:where([data-dds-context="marketing"]) .dds-featuresplit .dds-featuresplit__inner {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  min-inline-size: 0;
+  max-inline-size: var(--size-content-max);
+  padding-block: var(--space-section-default);
+  padding-inline: var(--space-inset-page);
+}
+
+:where([data-dds-context="marketing"]) .dds-featuresplit .dds-featuresplit__split {
+  align-items: stretch;
+  display: flex;
+  min-inline-size: 0;
+  column-gap: var(--space-gap-3xl);
+  row-gap: var(--space-gap-2xl);
+}
+
+:where([data-dds-context="marketing"]) .dds-featuresplit .dds-featuresplit__content {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  row-gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-featuresplit .dds-featuresplit__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-featuresplit .dds-featuresplit__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);
+  margin-block-end: var(--space-heading-description-actions);
+  max-inline-size: var(--size-measure-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-featuresplit .dds-featuresplit__link {
+  display: flex;
+  margin-block-start: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-featuresplit .dds-featuresplit__media {
+  min-inline-size: 0;
+  overflow: hidden;
+  position: relative;
+  aspect-ratio: var(--aspect-square);
+  border-radius: var(--radius-container);
+}
+
+:where([data-dds-context="marketing"]) .dds-featuresplit[data-media-position="end"] .dds-featuresplit__split {
+  flex-direction: row;
+}
+
+:where([data-dds-context="marketing"]) .dds-featuresplit[data-media-position="start"] .dds-featuresplit__split {
+  flex-direction: row-reverse;
+}
+
+:where([data-dds-context="marketing"]) .dds-featuresplit[data-ground="page"] {
+  background-color: var(--color-bg-page);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-featuresplit[data-ground="strong"] {
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-featuresplit[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/feature-split/FeatureSplit.d.ts

@@ -0,0 +1,30 @@
+import './FeatureSplit.css';
+import './feature-split-impl.css';
+import '../block-reveal.css';
+import { type FeatureSplitProps } from './FeatureSplit.types.js';
+export type { FeatureSplitProps };
+/**
+ * A section putting one claim, a line explaining it and a way onward beside a single picture.
+ *
+ * The plainest block this package has, and that is what it is for: a page that has said what
+ * something is needs somewhere to say one more thing about it without opening a list, a grid or a
+ * set of cards.
+ *
+ * A split rather than a stack, because the picture is the other half of the argument — the same
+ * words over a full-width photograph read as a caption, and beside it they read as a claim with
+ * evidence.
+ *
+ * The steps inside the column are carried by each part's own `margin-block-end` rather than by a
+ * gap on the column, because title-to-description and description-to-what-follows are two
+ * different roles that a single gap could only ever be one of. `content` binds `space.gap.none`
+ * to say the absence is deliberate rather than forgotten.
+ *
+ * The source template carried `showDescription` and `showLink` beside the values themselves. Both
+ * are gone: absence is the switch, which is the rule Footer set and `given` exists for. A flag
+ * saying whether to draw a value the caller already decided not to pass is two ways to say one
+ * thing, and they disagree the first time somebody sets only one of them.
+ *
+ * The title carries the section's accessible name through `aria-labelledby`. A `<section>` is only
+ * a region landmark once it has a name.
+ */
+export declare function FeatureSplit({ ground, mediaPosition, title, description, link, media, }: FeatureSplitProps): import("react").JSX.Element;