@deriv-com/dds-marketing 1.0.2 → 1.1.0

package/dist/components/blocks/feature-cards-carousel/FeatureCardsCarousel.js

@@ -0,0 +1,160 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useRef, useState } from 'react';
+import { ChevronLeftRegularIcon, ChevronRightRegularIcon } from '@deriv-com/quill-icons-web';
+import './FeatureCardsCarousel.css';
+import './feature-cards-carousel-impl.css';
+import '../block-reveal.css';
+import { given } from '../../given.js';
+import { ButtonIcon } from '../../core/button-icon/ButtonIcon.js';
+import { PaginationDots } from '../../core/pagination-dots/PaginationDots.js';
+import { cardsOf } from '../cards-of.js';
+import { arriving, useReveal } from '../use-reveal.js';
+import { featureCardsCarouselDefaults, featureCardsCarouselParts, } from './FeatureCardsCarousel.types.js';
+/** Close enough to an end to call it the end: a snapped row can rest a pixel short of it. */
+const AT_END = 2;
+const OPENING = { stops: 1, current: 0, back: false, on: true };
+/**
+ * The row's own measures, read rather than assumed: one card and the gap after it, and how far the
+ * row can scroll at all.
+ */
+function measure(row) {
+    const card = row.firstElementChild;
+    const gap = Number.parseFloat(getComputedStyle(row).columnGap) || 0;
+    return {
+        step: (card?.offsetWidth ?? row.clientWidth) + gap,
+        furthest: Math.max(0, row.scrollWidth - row.clientWidth),
+    };
+}
+/**
+ * A heading over a row of the page's own cards, moved along a stop at a time — the reference site's
+ * FeatureCardsCarousel.
+ *
+ * The cards are Card or CardButton with a CardBody inside, as in FeatureCards: a card's fill, its
+ * picture and where it leads are the card's, so the reference's coral, dark and light slides are
+ * Card's accent, accent-strong and surface-light, and its cover picture is CardBody's overMedia.
+ * What this decides is the heading, the row and the way along it.
+ *
+ * The browser does the scrolling and the snapping, TestimonialRow's way; this reads where the row
+ * is. A stop is a card's start, until the last few cards are all in view — those share the last
+ * stop, the row's end, so the row never scrolls into empty space and there are fewer dots than
+ * cards at full width. The dots say which stop the row is at and move to any one pressed; the
+ * arrows step one either way.
+ *
+ * Autoplay is off unless asked for. On, PaginationDots holds the clock, as it does for every block
+ * that rotates: each motion.duration.dwell it reports the next stop, wrapping from the last to the
+ * first, and this scrolls there. It holds while the pointer is over the band or focus is inside it,
+ * never runs for a reader who asked for less motion, and stops for good once the reader presses
+ * anything in the band or swipes the row.
+ *
+ * `'use client'` for the row's position, the clock, the arrival, and `useId`, which names the
+ * region by its heading.
+ */
+export function FeatureCardsCarousel({ ground = featureCardsCarouselDefaults.ground, title, description, autoplay = featureCardsCarouselDefaults.autoplay, label = featureCardsCarouselDefaults.label, previousLabel = featureCardsCarouselDefaults.previousLabel, nextLabel = featureCardsCarouselDefaults.nextLabel, controlsLabel = featureCardsCarouselDefaults.controlsLabel, stopLabel = featureCardsCarouselDefaults.stopLabel, children, }) {
+    const titleId = useId();
+    const [band, revealed] = useReveal();
+    const row = useRef(null);
+    const back = useRef(null);
+    const on = useRef(null);
+    const [place, setPlace] = useState(OPENING);
+    // The same answer, read outside a render: the focus hand-off below compares against it, and a
+    // state updater is no place for a side effect — React may call one twice.
+    const was = useRef(place);
+    /*
+      A pointer over the band or focus inside it holds the clock for as long as it lasts; a press or a
+      swipe stops it for good — CtaBannerSlider's rules, the WAI carousel pattern's. PaginationDots
+      keeps its own stop for a dot pressed; these cover the rest of the band.
+    */
+    const [held, setHeld] = useState(false);
+    const [stopped, setStopped] = useState(false);
+    const cards = cardsOf(children);
+    const read = useCallback(() => {
+        const element = row.current;
+        if (element === null)
+            return;
+        const { step, furthest } = measure(element);
+        // `abs`, because a right-to-left row counts its scroll position down from zero.
+        const at = Math.abs(element.scrollLeft);
+        const stops = furthest <= AT_END || step <= 0 ? 1 : Math.ceil((furthest - AT_END) / step) + 1;
+        const current = at >= furthest - AT_END ? stops - 1 : Math.min(stops - 1, Math.round(at / step));
+        const next = { stops, current, back: at > AT_END, on: at < furthest - AT_END };
+        const before = was.current;
+        if (before.stops === next.stops &&
+            before.current === next.current &&
+            before.back === next.back &&
+            before.on === next.on) {
+            return;
+        }
+        // An arrow pressed to the end of the row is about to go inert with focus on it, which drops
+        // focus to the page. Hand it to the other arrow first, which has somewhere to go.
+        const focused = document.activeElement;
+        if (before.on && !next.on && on.current?.contains(focused))
+            back.current?.querySelector('button')?.focus();
+        if (before.back && !next.back && back.current?.contains(focused))
+            on.current?.querySelector('button')?.focus();
+        was.current = next;
+        setPlace(next);
+    }, []);
+    useEffect(() => {
+        const element = row.current;
+        if (element === null)
+            return;
+        read();
+        // Asked defensively: a renderer with no ResizeObserver measures once, on mount.
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const watching = new ResizeObserver(read);
+        watching.observe(element);
+        return () => watching.disconnect();
+        // The count too: a page that swaps the set at the same width leaves the row's own box the size
+        // it was, so nothing above would fire, and the dots would describe the old set.
+    }, [read, cards.length]);
+    // Nothing to show is nothing drawn: a named region with no card in it leads nowhere.
+    if (cards.length === 0)
+        return null;
+    /** Scroll the row to a stop: a card's start, or the row's end for the last. */
+    const go = (to) => {
+        const element = row.current;
+        if (element === null)
+            return;
+        const { step, furthest } = measure(element);
+        const stop = Math.min(Math.max(0, to), place.stops - 1);
+        const left = stop >= place.stops - 1 ? furthest : stop * step;
+        const style = getComputedStyle(element);
+        const still = typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        element.scrollTo({
+            left: left * (style.direction === 'rtl' ? -1 : 1),
+            behavior: still ? 'auto' : 'smooth',
+        });
+    };
+    const scrolls = place.back || place.on;
+    // Button's secondary, as a circle; on the dark band its inverse tone turns the tint white.
+    const arrow = { variant: 'secondary', tone: ground === 'strong' ? 'inverse' : 'default' };
+    // Any primary press in the band stops the clock; the press itself still does what it does.
+    const press = (event) => {
+        if (event.isPrimary && (event.pointerType !== 'mouse' || event.button === 0))
+            setStopped(true);
+    };
+    return (_jsx("section", { className: featureCardsCarouselParts.root, "data-ground": ground, "aria-labelledby": titleId, onPointerEnter: (event) => {
+            if (event.pointerType === 'mouse')
+                setHeld(true);
+        }, onPointerLeave: (event) => {
+            if (event.pointerType === 'mouse')
+                setHeld(false);
+        }, onPointerDownCapture: press, 
+        // A keyboard press on an arrow is a press too; a pointer's has already stopped it.
+        onClickCapture: () => setStopped(true), onFocus: () => setHeld(true), onBlur: (event) => {
+            // Held while focus is anywhere inside, released only when it leaves the band altogether.
+            if (!event.currentTarget.contains(event.relatedTarget))
+                setHeld(false);
+        }, children: _jsxs("div", { className: featureCardsCarouselParts.inner, ref: band, "data-revealed": revealed, children: [_jsxs("div", { className: featureCardsCarouselParts.header, children: [_jsx("h2", { className: featureCardsCarouselParts.title, id: titleId, ...arriving(0), children: title }), given(description) ? (_jsx("p", { className: featureCardsCarouselParts.description, ...arriving(1), children: description })) : null] }), _jsxs("div", { className: featureCardsCarouselParts.carousel, children: [_jsx("div", { ref: row, className: featureCardsCarouselParts.track, role: "group", "aria-label": label, tabIndex: 0, onScroll: read, ...arriving(2), children: cards.map(({ key, card }) => (
+                            /* Each card in a place of its own, so the card is the page's element and keeps its
+                               own transitions; the place is what takes the row's measure. */
+                            _jsx("div", { className: featureCardsCarouselParts.item, children: card }, key))) }), cards.length > 1 ? (_jsxs("div", { className: featureCardsCarouselParts.footer, hidden: !scrolls, ...arriving(3), children: [_jsx(PaginationDots
+                                // The coral marks on the page's own white, and the band's ink on a painted one —
+                                // PaginationDots' own ruling on where its accent belongs.
+                                , { 
+                                    // The coral marks on the page's own white, and the band's ink on a painted one —
+                                    // PaginationDots' own ruling on where its accent belongs.
+                                    variant: ground === 'page' ? 'accent' : 'default', page: place.current + 1, totalPages: place.stops, onPageChange: (page) => go(page - 1), autoplay: autoplay, paused: held || stopped, label: controlsLabel, itemLabel: stopLabel }), _jsxs("div", { className: featureCardsCarouselParts.nav, children: [_jsx("span", { ref: back, className: featureCardsCarouselParts['nav-slot'], "data-available": place.back, inert: !place.back, children: _jsx(ButtonIcon, { icon: _jsx(ChevronLeftRegularIcon, {}), label: previousLabel, ...arrow, onClick: () => go(place.current - 1) }) }), _jsx("span", { ref: on, className: featureCardsCarouselParts['nav-slot'], "data-available": place.on, inert: !place.on, children: _jsx(ButtonIcon, { icon: _jsx(ChevronRightRegularIcon, {}), label: nextLabel, ...arrow, onClick: () => go(place.current + 1) }) })] })] })) : null] })] }) }));
+}

package/dist/components/blocks/feature-cards-carousel/FeatureCardsCarousel.types.d.ts

@@ -0,0 +1,52 @@
+import type { ReactNode } from 'react';
+export interface FeatureCardsCarouselOwnProps {
+    /**
+     * `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. A light card — surface-light — turns white on it, color.bg.surface-card-light-raised, because its own gray.50 is the band's and would vanish into it. A dark card — accent-strong — is lifted to color.bg.surface-card-strong-raised, a step lighter in dark mode, where the band is within a shade of its gray.900. A plain surface card is raised off it the same way, to color.bg.surface-card-raised, because the recessed fill is the band's gray too. 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. The coloured cards keep their own grounds on it; a neutral card — surface or surface-raised — turns to Card's inverse fill and white ink, and a plain card takes the white ink alone, because their own would be dark ink on near-black; an eyebrow inside any of them takes the band's quieter ink
+     */
+    ground?: 'page' | 'subtle' | 'strong';
+    /** Always. What the cards are, in the fewest words that name them — "What you get", "Built for every trader". */
+    title: string;
+    /** A line saying what the set has in common, when the title alone does not. */
+    description?: string;
+    /** Whether the row moves on to the next stop on its own, holding each for motion.duration.dwell and returning to the start after the last. Off by default, so a row nobody configured stays still. On, it holds while the pointer is over the band or focus is inside it, never moves for a reader who asked for less motion, and stops for good once the reader presses anything in it — a card, an arrow, a dot — or swipes the row: the WAI carousel pattern's rule that a reader who has touched it is reading, not watching. That gives a reader a way to stop it, which WCAG 2.2.2 asks for, but not a visible one, as in CtaBannerSlider: a page that needs 2.2.2 met plainly should leave it off. */
+    autoplay?: boolean;
+    /** The name the row is announced by. The row is a scrolling region a keyboard has to be able to reach, so it carries a tab stop and a name of its own — Scroller's rule, as in TestimonialRow. Its own name rather than the section's, so a screen reader moving into it hears what it is. Translate it with the page. */
+    label?: string;
+    /** The accessible name of the arrow stepping the row back. A glyph announces nothing, so this is the whole of the control's name. Translate it with the page, and keep it parallel to nextLabel. */
+    previousLabel?: string;
+    /** The accessible name of the arrow stepping the row on, for the reason previousLabel exists. */
+    nextLabel?: string;
+    /** The name the dots are announced by, as a group inside the band. Its own name rather than the row's, so a screen reader moving into the dots hears what they are. Translate it with the page, like label. */
+    controlsLabel?: string;
+    /** The word each dot is announced by, before its number — "Position 2". A dot is a place the row stops, not a card: at full width the last few cards share the last stop, so there are fewer dots than cards. Translate it with the page, as controlsLabel is. */
+    stopLabel?: string;
+    /** Allowed: Card, CardButton */
+    children: ReactNode;
+}
+export type FeatureCardsCarouselProps = FeatureCardsCarouselOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const featureCardsCarouselParts: {
+    readonly root: "dds-featurecardscarousel";
+    readonly inner: "dds-featurecardscarousel__inner";
+    readonly header: "dds-featurecardscarousel__header";
+    readonly title: "dds-featurecardscarousel__title";
+    readonly description: "dds-featurecardscarousel__description";
+    readonly carousel: "dds-featurecardscarousel__carousel";
+    readonly track: "dds-featurecardscarousel__track";
+    readonly item: "dds-featurecardscarousel__item";
+    readonly footer: "dds-featurecardscarousel__footer";
+    readonly nav: "dds-featurecardscarousel__nav";
+    readonly 'nav-slot': "dds-featurecardscarousel__nav-slot";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const featureCardsCarouselDefaults: {
+    readonly ground: "page";
+    readonly autoplay: false;
+    readonly label: "Features";
+    readonly previousLabel: "Previous cards";
+    readonly nextLabel: "Next cards";
+    readonly controlsLabel: "Positions";
+    readonly stopLabel: "Position";
+};

package/dist/components/blocks/feature-cards-carousel/FeatureCardsCarousel.types.js

@@ -0,0 +1,17 @@
+// GENERATED from feature-cards-carousel.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const featureCardsCarouselParts = {
+    root: 'dds-featurecardscarousel',
+    inner: 'dds-featurecardscarousel__inner',
+    header: 'dds-featurecardscarousel__header',
+    title: 'dds-featurecardscarousel__title',
+    description: 'dds-featurecardscarousel__description',
+    carousel: 'dds-featurecardscarousel__carousel',
+    track: 'dds-featurecardscarousel__track',
+    item: 'dds-featurecardscarousel__item',
+    footer: 'dds-featurecardscarousel__footer',
+    nav: 'dds-featurecardscarousel__nav',
+    'nav-slot': 'dds-featurecardscarousel__nav-slot',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const featureCardsCarouselDefaults = { ground: 'page', autoplay: false, label: 'Features', previousLabel: 'Previous cards', nextLabel: 'Next cards', controlsLabel: 'Positions', stopLabel: 'Position' };

package/dist/components/blocks/feature-cards-carousel/feature-cards-carousel-impl.css

@@ -0,0 +1,207 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ */
+
+/*
+ * A heading with no line under it closes up. Its bound step is the distance to the line, and with
+ * nothing there it would only add to the step from the header to the row.
+ */
+:where([data-dds-context="marketing"]) .dds-featurecardscarousel .dds-featurecardscarousel__title:last-child {
+  margin-block-end: 0;
+}
+
+/*
+ * The header starts on a phone and is centred from the fold — FeatureCards' arrangement and its
+ * reason. Both boxes are capped narrower than the column, so `margin-inline: auto` is what centres
+ * them rather than their words inside a box left at the start edge.
+ *
+ * `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-featurecardscarousel .dds-featurecardscarousel__header {
+    align-items: center;
+    margin-inline: auto;
+    text-align: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-featurecardscarousel .dds-featurecardscarousel__description {
+    margin-inline: auto;
+  }
+}
+
+/*
+ * Two measures the row is built from, both read off the band rather than the row — TestimonialRow's.
+ *
+ * The root declares `container-type`, so `cqi` here is the band's width. `--column` is the width of
+ * the column the heading sits in; `--bleed` is how far that column stands in from the band's edge.
+ */
+:where([data-dds-context="marketing"]) .dds-featurecardscarousel {
+  --dds-featurecardscarousel-column: calc(min(100cqi, var(--size-content-max)) - 2 * var(--space-inset-page));
+  --dds-featurecardscarousel-bleed: calc((100cqi - min(100cqi, var(--size-content-max))) / 2 + var(--space-inset-page));
+}
+
+/*
+ * The row runs out to the band's edges and its first card stands where the heading does — the
+ * reference design's breakout, built as TestimonialRow builds it.
+ *
+ * A negative margin takes the row out of the column to the band's edges; a leading padding of the
+ * same measure brings the first card back into line with the heading. The padding scrolls away with
+ * the cards, so a card is then cut off by the band rather than by the column.
+ * `scroll-padding-inline` matches it, or a browser reads the resting position as short of the first
+ * card's snap point and scrolls the gutter away on load.
+ *
+ * The block padding is room for a CardButton's lift and its focus ring, which a scroll container
+ * would otherwise clip; the negative margin gives it back.
+ *
+ * No scrollbar: the dots and the arrows under the row are the standing sign that it moves.
+ */
+:where([data-dds-context="marketing"]) .dds-featurecardscarousel .dds-featurecardscarousel__track {
+  margin-block: calc(-1 * var(--space-gap-sm));
+  margin-inline: calc(-1 * var(--dds-featurecardscarousel-bleed));
+  overflow-x: auto;
+  overflow-y: hidden;
+  overscroll-behavior-x: contain;
+  padding-block: var(--space-gap-sm);
+  padding-inline-start: var(--dds-featurecardscarousel-bleed);
+  scroll-padding-inline: var(--dds-featurecardscarousel-bleed);
+  scroll-snap-type: x proximity;
+  scrollbar-width: none;
+}
+
+:where([data-dds-context="marketing"]) .dds-featurecardscarousel .dds-featurecardscarousel__track::-webkit-scrollbar {
+  display: none;
+}
+
+/*
+ * The row's focus ring is drawn inside it. The row runs out to the band's edges and the band hides
+ * its overflow, so a ring drawn outside would lose its two sides to the band.
+ */
+:where([data-dds-context="marketing"]) .dds-featurecardscarousel .dds-featurecardscarousel__track:focus-visible {
+  outline-offset: calc(-1 * var(--border-width-focus));
+}
+
+/*
+ * The trailing gutter, as a spacer rather than a padding.
+ *
+ * A scroll container leaves its end padding out of what it scrolls to once its content overflows,
+ * so the last card would come to rest against the band's edge. A generated box is a flex item like
+ * a card, and its width counts. The negative margin takes back the gap the row puts before it.
+ */
+:where([data-dds-context="marketing"]) .dds-featurecardscarousel .dds-featurecardscarousel__track::after {
+  content: '';
+  flex: none;
+  inline-size: var(--dds-featurecardscarousel-bleed);
+  margin-inline-start: calc(-1 * var(--space-grid-gutter));
+}
+
+/*
+ * A card's width: most of the column on a phone — 85%, TestimonialRow's share — so the next card's
+ * edge shows past it, which is what says the row moves; size.feature-cards-carousel.card from the
+ * fold, held to the column, so at full width the row shows the next card's edge the same way. The
+ * reference set a phone's card to the whole column, and a row whose next card starts exactly at
+ * the screen's edge reads as a single card.
+ *
+ * It does not shrink: a flex item shrinks to fit before it overflows, and a row of squeezed cards
+ * is the one thing this is not. Every card is as tall as the row, which is the tallest of them.
+ */
+:where([data-dds-context="marketing"]) .dds-featurecardscarousel .dds-featurecardscarousel__item {
+  flex: none;
+  inline-size: calc(var(--dds-featurecardscarousel-column) * 0.85);
+  scroll-snap-align: start;
+}
+
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-featurecardscarousel .dds-featurecardscarousel__item {
+    inline-size: min(var(--size-feature-cards-carousel-card), var(--dds-featurecardscarousel-column));
+  }
+}
+
+/* `hidden` has to win over the part's own `display`, which outranks the browser's rule for it. */
+:where([data-dds-context="marketing"]) .dds-featurecardscarousel .dds-featurecardscarousel__footer[hidden] {
+  display: none;
+}
+
+/*
+ * The arrows stand at the end of the footer, after the dots — and at its end on their own too,
+ * when the row has fewer stops than PaginationDots draws a row for.
+ */
+:where([data-dds-context="marketing"]) .dds-featurecardscarousel .dds-featurecardscarousel__nav {
+  margin-inline-start: auto;
+}
+
+/*
+ * An arrow with nowhere to go stays in its place, receded to opacity.disabled, and its slot is
+ * inert — TestimonialRow's rule and its reason: ButtonIcon has no disabled state of its own.
+ */
+:where([data-dds-context="marketing"]) .dds-featurecardscarousel .dds-featurecardscarousel__nav-slot[data-available='false'] {
+  opacity: var(--opacity-disabled);
+}
+
+/*
+ * The cards on a painted ground — FeatureCards' rules, for the same cards on the same grounds.
+ *
+ * A light card turns white on the subtle band, where its own gray.50 is the band's; a dark card is
+ * lifted a step in dark mode; a surface card is raised off it. On the dark band a neutral card
+ * turns round to the inverse fill and white ink, a plain card takes the white ink alone, and an
+ * eyebrow inside any of them takes the band's quieter ink. The coloured cards keep their own.
+ */
+:where([data-dds-context="marketing"])
+  .dds-featurecardscarousel[data-ground="subtle"]
+  .dds-featurecardscarousel__item
+  > :is(.dds-card, .dds-cardbutton)[data-variant="surface-light"] {
+  background-color: var(--color-bg-surface-card-light-raised);
+}
+
+:where([data-dds-context="marketing"])
+  .dds-featurecardscarousel[data-ground="subtle"]
+  .dds-featurecardscarousel__item
+  > :is(.dds-card, .dds-cardbutton)[data-variant="accent-strong"] {
+  background-color: var(--color-bg-surface-card-strong-raised);
+}
+
+:where([data-dds-context="marketing"])
+  .dds-featurecardscarousel[data-ground="subtle"]
+  .dds-featurecardscarousel__item
+  > :is(.dds-card, .dds-cardbutton)[data-variant="surface"] {
+  background-color: var(--color-bg-surface-card-raised);
+}
+
+:where([data-dds-context="marketing"])
+  .dds-featurecardscarousel[data-ground="strong"]
+  .dds-featurecardscarousel__item
+  > :is(.dds-card, .dds-cardbutton)[data-variant="surface"] {
+  background-color: var(--color-bg-surface-inverse);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"])
+  .dds-featurecardscarousel[data-ground="strong"]
+  .dds-featurecardscarousel__item
+  > :is(.dds-card, .dds-cardbutton)[data-variant="surface-raised"] {
+  background-color: var(--color-bg-surface-raised-on-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"])
+  .dds-featurecardscarousel[data-ground="strong"]
+  .dds-featurecardscarousel__item
+  > :is(.dds-card, .dds-cardbutton)[data-variant="plain"] {
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"])
+  .dds-featurecardscarousel[data-ground="strong"]
+  .dds-featurecardscarousel__item
+  > :is(.dds-card, .dds-cardbutton):is([data-variant="surface"], [data-variant="surface-raised"], [data-variant="plain"])
+  .dds-cardbody__eyebrow {
+  color: var(--color-fg-muted-inverse);
+}
+
+/*
+ * Previous and next point along the row. A right-to-left row puts previous on the right, so the
+ * chevrons are mirrored to point the way each one moves; as they ship, both pointed backwards.
+ */
+:where([data-dds-context="marketing"]) .dds-featurecardscarousel .dds-featurecardscarousel__nav-slot svg:dir(rtl) {
+  scale: -1 1;
+}

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

@@ -6,6 +6,7 @@
   display: flex;
   inline-size: 100%;
   justify-content: center;
+  overflow-wrap: anywhere;
 }
 
 :where([data-dds-context="marketing"]) .dds-featurescroll .dds-featurescroll__inner {

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

@@ -6,6 +6,7 @@
   display: flex;
   inline-size: 100%;
   justify-content: center;
+  overflow-wrap: anywhere;
 }
 
 :where([data-dds-context="marketing"]) .dds-featuresplit .dds-featuresplit__inner {

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

@@ -77,7 +77,20 @@
 :where([data-dds-context="marketing"]) .dds-featuresplit .dds-featuresplit__media > *,
 :where([data-dds-context="marketing"]) .dds-featuresplit .dds-featuresplit__media img {
   block-size: 100%;
-  display: block;
   inline-size: 100%;
   object-fit: cover;
 }
+
+/*
+ * Bare media is a block; a component keeps its own display.
+ *
+ * `display: block` is for what arrives as a raw element — an image, a video, an inline SVG — which
+ * sits on a text baseline otherwise and leaves a gap under it. Written at no weight at all, so a
+ * component the page placed here — an IllustrationScene, whose grid lays its pane over its photo —
+ * keeps the display its own sheet gives it. In the rule above, a class deeper than the component's
+ * root, it turned the scene's grid into a block, and the pane fell below the photo and was clipped.
+ */
+:where([data-dds-context="marketing"] .dds-featuresplit .dds-featuresplit__media > *, [data-dds-context="marketing"] .dds-featuresplit .dds-featuresplit__media img) {
+  display: block;
+}
+

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

@@ -0,0 +1,86 @@
+/* GENERATED from featurestack.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-featurestack {
+  box-sizing: border-box;
+  container-type: inline-size;
+  display: flex;
+  inline-size: 100%;
+  justify-content: center;
+  overflow-wrap: anywhere;
+}
+
+:where([data-dds-context="marketing"]) .dds-featurestack .dds-featurestack__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);
+  row-gap: var(--space-heading-content);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurestack .dds-featurestack__header {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  max-inline-size: var(--size-measure-heading);
+  row-gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurestack .dds-featurestack__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-featurestack .dds-featurestack__description {
+  margin-block: 0;
+  font-family: var(--font-body-md-family);
+  font-size: var(--font-body-md-size);
+  font-weight: var(--font-body-md-weight);
+  letter-spacing: var(--font-body-md-letter-spacing);
+  line-height: var(--font-body-md-line-height);
+  max-inline-size: var(--size-measure-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurestack .dds-featurestack__link {
+  display: flex;
+  margin-block-start: var(--space-heading-description-actions);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurestack .dds-featurestack__media {
+  align-self: center;
+  min-inline-size: 0;
+  overflow: clip;
+  border-start-end-radius: var(--radius-container);
+  border-start-start-radius: var(--radius-container);
+  max-inline-size: var(--size-feature-stack-media);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurestack .dds-featurestack__image {
+  display: block;
+}
+
+:where([data-dds-context="marketing"]) .dds-featurestack[data-ground="page"] {
+  background-color: var(--color-bg-page);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurestack[data-ground="strong"] {
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-featurestack[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-stack/FeatureStack.d.ts

@@ -0,0 +1,19 @@
+import './FeatureStack.css';
+import './feature-stack-impl.css';
+import '../block-reveal.css';
+import { type FeatureStackProps } from './FeatureStack.types.js';
+export type { FeatureStackProps };
+/**
+ * A heading, a line, a way on, and an illustration the band ends on — FeatureSplit stacked, the
+ * words over the picture rather than beside it. The reference design's PartnersPayout layout, taken
+ * down to its frame.
+ *
+ * The reference drew figures between the heading and the picture. Those were the page's content,
+ * not the layout's: a page that wants figures puts them in a section of its own or in its copy, and
+ * this keeps only what every use of the layout shares — the words centred over a picture that
+ * stands on the band's foot.
+ *
+ * It arrives the way every block does: the heading, the line, the link, then the picture.
+ * `'use client'` for that and for `useId`, which names the region by its heading.
+ */
+export declare function FeatureStack({ ground, title, description, link, image, }: FeatureStackProps): import("react").JSX.Element;

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

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import './FeatureStack.css';
+import './feature-stack-impl.css';
+import '../block-reveal.css';
+import { given } from '../../given.js';
+import { arriving, useReveal } from '../use-reveal.js';
+import { featureStackDefaults, featureStackParts, } from './FeatureStack.types.js';
+/**
+ * A heading, a line, a way on, and an illustration the band ends on — FeatureSplit stacked, the
+ * words over the picture rather than beside it. The reference design's PartnersPayout layout, taken
+ * down to its frame.
+ *
+ * The reference drew figures between the heading and the picture. Those were the page's content,
+ * not the layout's: a page that wants figures puts them in a section of its own or in its copy, and
+ * this keeps only what every use of the layout shares — the words centred over a picture that
+ * stands on the band's foot.
+ *
+ * It arrives the way every block does: the heading, the line, the link, then the picture.
+ * `'use client'` for that and for `useId`, which names the region by its heading.
+ */
+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 })] }) }));
+}

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

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react';
+import type { BlockImage } from '../../block-image-data.js';
+export interface FeatureStackOwnProps {
+    /**
+     * `page` — The default, and the page's own white
+     * `subtle` — The grey band, for a section that needs setting apart from the one above it. Painted as the band's tint laid over the page's own ground, so it is the same grey whatever is behind the section
+     * `strong` — `color.bg.brand-strong`, the dark band, and the reference design's ground for this layout. The heading and the line under it turn white; an illustration made for a dark ground sits best here
+     */
+    ground?: 'page' | 'subtle' | 'strong';
+    /** Always. The statement the section makes, in a few words — "Trusted in 190+ countries", "One account, every device". */
+    title: string;
+    /** A short line under the heading that says what the statement means for the reader, or what the picture shows. */
+    description?: string;
+    /** A way on for the reader who wants more — "Learn more", "See where we operate". A standalone Link, under the line, the way FeatureCards takes one. */
+    link?: ReactNode;
+    /** Always. The picture the section ends on — a globe, a map, a product shot — which the block draws at its own proportions: a square picture stays square, a tall one stays tall, held to the screen's limit. Use one at least as wide as the column, twice that for sharp screens, and give its width and height so the block reserves its shape before it loads. `alt` empty when the heading already says what it shows; otherwise describe it. */
+    image: BlockImage;
+}
+export type FeatureStackProps = FeatureStackOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const featureStackParts: {
+    readonly root: "dds-featurestack";
+    readonly inner: "dds-featurestack__inner";
+    readonly header: "dds-featurestack__header";
+    readonly title: "dds-featurestack__title";
+    readonly description: "dds-featurestack__description";
+    readonly link: "dds-featurestack__link";
+    readonly media: "dds-featurestack__media";
+    readonly image: "dds-featurestack__image";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const featureStackDefaults: {
+    readonly ground: "page";
+};