@deriv-com/dds-marketing 0.2.0 → 1.0.0

package/dist/components/blocks/testimonial-slider/TestimonialSlider.css

@@ -0,0 +1,181 @@
+/* GENERATED from testimonialslider.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-testimonialslider {
+  box-sizing: border-box;
+  container-type: inline-size;
+  display: flex;
+  inline-size: 100%;
+  justify-content: center;
+  overflow: clip;
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__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-testimonialslider .dds-testimonialslider__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);
+  max-inline-size: var(--size-measure-heading);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__carousel {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  row-gap: var(--space-gap-xl);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__track {
+  display: grid;
+  overflow: clip;
+  position: relative;
+  transition-property: none;
+  border-radius: var(--radius-container);
+  transition-duration: var(--motion-duration-slow);
+  transition-timing-function: var(--motion-easing-shift);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__item {
+  align-items: flex-start;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  min-inline-size: 0;
+  position: relative;
+  border-radius: var(--radius-container);
+  padding-block: var(--space-inset-3xl);
+  padding-inline: var(--space-inset-card);
+  row-gap: var(--space-gap-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__image-start {
+  box-sizing: border-box;
+  display: block;
+  pointer-events: none;
+  position: absolute;
+  inline-size: var(--size-testimonial-art);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__image-end {
+  box-sizing: border-box;
+  display: none;
+  pointer-events: none;
+  position: absolute;
+  inline-size: var(--size-testimonial-art);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__image {
+  display: block;
+  inline-size: 100%;
+  object-fit: cover;
+  aspect-ratio: var(--aspect-square);
+  border-radius: var(--radius-container-item);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__quote {
+  margin: 0;
+  font-family: var(--font-body-lg-family);
+  font-size: var(--font-body-lg-size);
+  font-weight: var(--font-body-lg-weight);
+  letter-spacing: var(--font-body-lg-letter-spacing);
+  line-height: var(--font-body-lg-line-height);
+  max-inline-size: var(--size-measure-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__author {
+  align-items: center;
+  display: flex;
+  column-gap: var(--space-gap-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__avatar {
+  flex: none;
+  object-fit: cover;
+  block-size: var(--size-avatar);
+  border-radius: var(--radius-pill);
+  inline-size: var(--size-avatar);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__name {
+  display: block;
+  font-family: var(--font-label-lg-family);
+  font-size: var(--font-label-lg-size);
+  font-weight: var(--font-label-lg-weight);
+  letter-spacing: var(--font-label-lg-letter-spacing);
+  line-height: var(--font-label-lg-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__detail {
+  display: block;
+  font-family: var(--font-body-md-family);
+  font-size: var(--font-body-md-size);
+  font-weight: var(--font-body-md-weight);
+  letter-spacing: var(--font-body-md-letter-spacing);
+  line-height: var(--font-body-md-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__controls {
+  display: flex;
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialslider[data-ground="page"] {
+  background-color: var(--color-bg-page);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialslider[data-ground="page"] .dds-testimonialslider__detail {
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialslider[data-ground="page"] .dds-testimonialslider__item {
+  background-color: var(--color-bg-surface);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialslider[data-ground="strong"] {
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialslider[data-ground="strong"] .dds-testimonialslider__detail {
+  color: var(--color-fg-muted-inverse);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialslider[data-ground="strong"] .dds-testimonialslider__item {
+  background-color: var(--color-bg-surface-card-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialslider[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);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialslider[data-ground="subtle"] .dds-testimonialslider__detail {
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialslider[data-ground="subtle"] .dds-testimonialslider__item {
+  background-color: var(--color-bg-surface-card-raised);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-testimonialslider,
+  :where([data-dds-context="marketing"]) .dds-testimonialslider * { transition: none !important; }
+}
+

package/dist/components/blocks/testimonial-slider/TestimonialSlider.d.ts

@@ -0,0 +1,22 @@
+import "./TestimonialSlider.css";
+import "./testimonial-slider-impl.css";
+import "../block-reveal.css";
+import { type TestimonialSliderProps } from "./TestimonialSlider.types.js";
+export type { TestimonialSliderProps };
+/**
+ * A heading over one quote at a time — the reference site's Testimonial in its quote form.
+ *
+ * The quotes arrive as data, because a quote is words and a name and nothing in it is an element
+ * a page composes. Each is a `figure`: the words in a `blockquote`, the person in a `figcaption`,
+ * so a screen reader announces them together.
+ *
+ * Two or more rotate in place, by CtaBannerSlider's rules — the same hook, use-rotation.ts — so
+ * the two blocks that move on a page move alike: one in view, a fade in place, dots that show
+ * where the reader is, a hold under the pointer or focus, a stop for good once pressed, nothing
+ * at all for a reader who asked for less motion, and autoplay off unless a page asks for it.
+ *
+ * The heading arrives the way every block's does, and each quote's words arrive with it as it
+ * comes into view. `'use client'` for that, for the rotation, and for `useId`, which names the
+ * region by its heading.
+ */
+export declare function TestimonialSlider({ ground, title, quotes, imageStart, imageEnd, autoplay, controlsLabel, slideLabel, }: TestimonialSliderProps): import("react").JSX.Element | null;

package/dist/components/blocks/testimonial-slider/TestimonialSlider.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import "./TestimonialSlider.css";
+import "./testimonial-slider-impl.css";
+import "../block-reveal.css";
+import { given } from "../../given.js";
+import { PaginationDots } from "../../core/pagination-dots/PaginationDots.js";
+import { arriving, useReveal } from "../use-reveal.js";
+import { useRotation } from "../use-rotation.js";
+import { testimonialSliderDefaults, testimonialSliderParts, } from "./TestimonialSlider.types.js";
+/**
+ * A heading over one quote at a time — the reference site's Testimonial in its quote form.
+ *
+ * The quotes arrive as data, because a quote is words and a name and nothing in it is an element
+ * a page composes. Each is a `figure`: the words in a `blockquote`, the person in a `figcaption`,
+ * so a screen reader announces them together.
+ *
+ * Two or more rotate in place, by CtaBannerSlider's rules — the same hook, use-rotation.ts — so
+ * the two blocks that move on a page move alike: one in view, a fade in place, dots that show
+ * where the reader is, a hold under the pointer or focus, a stop for good once pressed, nothing
+ * at all for a reader who asked for less motion, and autoplay off unless a page asks for it.
+ *
+ * The heading arrives the way every block's does, and each quote's words arrive with it as it
+ * comes into view. `'use client'` for that, for the rotation, and for `useId`, which names the
+ * region by its heading.
+ */
+export function TestimonialSlider({ ground = testimonialSliderDefaults.ground, title, quotes, imageStart, imageEnd, autoplay = testimonialSliderDefaults.autoplay, controlsLabel = testimonialSliderDefaults.controlsLabel, slideLabel = testimonialSliderDefaults.slideLabel, }) {
+    const titleId = useId();
+    const [band, revealed] = useReveal();
+    const { rotating, root, region, track, item, away, dots } = useRotation(quotes.length, autoplay);
+    // Nothing to show is nothing drawn: a named region with no quote in it leads nowhere.
+    if (quotes.length === 0)
+        return null;
+    return (_jsx("section", { ref: root, className: testimonialSliderParts.root, "data-ground": ground, "aria-labelledby": titleId, ...region, children: _jsxs("div", { className: testimonialSliderParts.inner, ref: band, children: [_jsx("h2", { className: testimonialSliderParts.title, id: titleId, "data-revealed": revealed, ...arriving(0), children: title }), _jsxs("div", { className: testimonialSliderParts.carousel, children: [_jsxs("div", { className: testimonialSliderParts.track, ...track, children: [quotes.map((each, at) => (_jsxs("figure", { className: testimonialSliderParts.item, ...item(at), "data-revealed": revealed && !away(at), children: [_jsx("blockquote", { className: testimonialSliderParts.quote, ...arriving(1), children: each.quote }), _jsxs("figcaption", { className: testimonialSliderParts.author, ...arriving(2), children: [given(each.avatar) ? (_jsx("img", { className: testimonialSliderParts.avatar, src: each.avatar, alt: "" })) : null, _jsxs("span", { children: [_jsx("span", { className: testimonialSliderParts.name, children: each.name }), given(each.detail) ? (_jsx("span", { className: testimonialSliderParts.detail, children: each.detail })) : null] })] })] }, at))), imageStart !== undefined && given(imageStart) ? (_jsx("span", { className: testimonialSliderParts["image-start"], "aria-hidden": "true", children: _jsx("img", { className: testimonialSliderParts.image, src: imageStart, alt: "" }) })) : null, imageEnd !== undefined && given(imageEnd) ? (_jsx("span", { className: testimonialSliderParts["image-end"], "aria-hidden": "true", children: _jsx("img", { className: testimonialSliderParts.image, src: imageEnd, alt: "" }) })) : null] }), rotating ? (_jsx("div", { className: testimonialSliderParts.controls, children: _jsx(PaginationDots, { ...dots, variant: "accent", label: controlsLabel, itemLabel: slideLabel }) })) : null] })] }) }));
+}

package/dist/components/blocks/testimonial-slider/TestimonialSlider.types.d.ts

@@ -0,0 +1,49 @@
+import type { TestimonialSliderQuote } from '../../testimonial-slider-data.js';
+export interface TestimonialSliderOwnProps {
+    /**
+     * `page` — The default, and the page's own white. The card is the recessed gray that sets it off
+     * `subtle` — The grey band, the reference design's ground for this section. The card turns white on 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, for a section a reader should arrive at. The heading and the quote turn white and the card takes color.bg.surface-card-strong — gray.900 in both themes, the colour a page card takes in dark mode, and TestimonialRow's card on the same band — so the band reads as a dark-mode section in either theme. The coral dots sit on it
+     */
+    ground?: 'page' | 'subtle' | 'strong';
+    /** Always. Whose words these are, in a few — "What our partners say", "What our customers say". */
+    title: string;
+    /** Always. The quotes, in the order they rotate — two to five, each a few sentences, each with the name of who said it. An empty list draws nothing; one quote is drawn still, with no dots. */
+    quotes: TestimonialSliderQuote[];
+    /** A decorative picture, laid over the card's top start corner — a photograph, a product screen, any small piece of art, usually a PNG — as a path or a URL. It is drawn as it is, with rounded corners and no frame, so a transparent ground shows the card through it. Drawn square and cropped to fill its square, so a picture whose subject sits in its middle crops best. It runs up behind the card's top edge, so the edge cuts straight across it, set in from the side, stays put while the quotes rotate, and drifts down by motion.distance.drift as the section passes through the view. The one shown on a phone, where it moves to the top end corner above the quote and drifts half as far, so more of it shows. Decorative: it takes an empty alt and is hidden from assistive technology. */
+    imageStart?: string;
+    /** A decorative picture at the card's bottom end corner, the pair to imageStart: drawn the same way behind the card's bottom edge, and drifting up as the other drifts down, so the two read as depth. Drawn from the fold only: a phone has room for one, and it is the opening one. Decorative, as imageStart is. */
+    imageEnd?: string;
+    /** Whether it advances on its own, holding each slide for motion.duration.dwell. Off by default, so a slider nobody configured stays still. On, it holds while the pointer is over it 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 slide, its action, a dot — or swipes it. A press stops it for good — the WAI carousel pattern's rule that a reader who has interacted is reading, not watching. That gives a reader a way to stop the rotation, which WCAG 2.2.2 asks for, but not a visible one: nothing says a press will stop it, so a page that needs 2.2.2 met plainly should still offer its own pause, or leave autoplay off. */
+    autoplay?: boolean;
+    /** The name the dots are announced by. Its own name rather than the section's, so a screen reader moving into the dots hears what they are. Translate it with the page. */
+    controlsLabel?: string;
+    /** The word each dot is announced by, before its number — 'Slide 2'. Translate it with the page, as controlsLabel is; a page that translates only the group's name still has every dot announced in English. */
+    slideLabel?: string;
+}
+export type TestimonialSliderProps = TestimonialSliderOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const testimonialSliderParts: {
+    readonly root: "dds-testimonialslider";
+    readonly inner: "dds-testimonialslider__inner";
+    readonly title: "dds-testimonialslider__title";
+    readonly carousel: "dds-testimonialslider__carousel";
+    readonly track: "dds-testimonialslider__track";
+    readonly item: "dds-testimonialslider__item";
+    readonly 'image-start': "dds-testimonialslider__image-start";
+    readonly 'image-end': "dds-testimonialslider__image-end";
+    readonly image: "dds-testimonialslider__image";
+    readonly quote: "dds-testimonialslider__quote";
+    readonly author: "dds-testimonialslider__author";
+    readonly avatar: "dds-testimonialslider__avatar";
+    readonly name: "dds-testimonialslider__name";
+    readonly detail: "dds-testimonialslider__detail";
+    readonly controls: "dds-testimonialslider__controls";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const testimonialSliderDefaults: {
+    readonly ground: "page";
+    readonly autoplay: false;
+    readonly controlsLabel: "Testimonials";
+    readonly slideLabel: "Slide";
+};

package/dist/components/blocks/testimonial-slider/TestimonialSlider.types.js

@@ -0,0 +1,21 @@
+// GENERATED from testimonial-slider.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const testimonialSliderParts = {
+    root: 'dds-testimonialslider',
+    inner: 'dds-testimonialslider__inner',
+    title: 'dds-testimonialslider__title',
+    carousel: 'dds-testimonialslider__carousel',
+    track: 'dds-testimonialslider__track',
+    item: 'dds-testimonialslider__item',
+    'image-start': 'dds-testimonialslider__image-start',
+    'image-end': 'dds-testimonialslider__image-end',
+    image: 'dds-testimonialslider__image',
+    quote: 'dds-testimonialslider__quote',
+    author: 'dds-testimonialslider__author',
+    avatar: 'dds-testimonialslider__avatar',
+    name: 'dds-testimonialslider__name',
+    detail: 'dds-testimonialslider__detail',
+    controls: 'dds-testimonialslider__controls',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const testimonialSliderDefaults = { ground: 'page', autoplay: false, controlsLabel: 'Testimonials', slideLabel: 'Slide' };

package/dist/components/blocks/testimonial-slider/testimonial-slider-impl.css

@@ -0,0 +1,202 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ */
+
+/*
+ * One cell for every quote, so a change of quote is a change in place.
+ *
+ * CtaBannerSlider's arrangement: the section takes the height of its longest quote whichever is
+ * showing, and nothing under it moves. The quote in view is drawn; the others wait in the same cell
+ * at opacity.hidden, and `visibility` takes them out of hit-testing as well as sight, beside the
+ * `inert` the component gives them. The fade borrows the track's timing through `inherit`, so the
+ * fade and the dots move on one beat.
+ */
+:where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__item {
+  grid-area: 1 / 1;
+  transition-property: opacity, visibility;
+  transition-duration: inherit;
+  transition-timing-function: inherit;
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__item[aria-hidden='true'] {
+  opacity: var(--opacity-hidden);
+  visibility: hidden;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__item {
+    transition-property: none;
+  }
+}
+
+/* The track owns horizontal gestures and leaves vertical ones to the page — see CtaBannerSlider. */
+:where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__track {
+  touch-action: pan-y;
+}
+
+/*
+ * The card is ranged to the start on a phone and centred from the fold, as the reference design sets it.
+ *
+ * The heading, the quote and the person under it centre together. `margin-inline: auto` on the
+ * heading and the quote centres their measured boxes rather than their words inside a box left at
+ * the start edge.
+ */
+@container (min-width: 48rem) {
+  /* The heading centres with the card, the way every other block's heading does from the fold. */
+  :where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__title {
+    margin-inline: auto;
+    text-align: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__item {
+    align-items: center;
+    padding-inline: var(--space-inset-4xl);
+    text-align: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__quote {
+    margin-inline: auto;
+  }
+
+  /* And the dots follow the quote: at the start edge on a phone, under the centre once it centres. */
+  :where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__controls {
+    justify-content: center;
+  }
+}
+
+/*
+ * How far the pictures drift, and so how far each is tucked behind its edge to keep its corners
+ * hidden while it does. Half of motion.distance.drift on a phone, where the one picture is set
+ * above the quote and every pixel tucked away is a pixel of it not shown; the whole of it from the
+ * fold, where the card is wide enough for the movement to read.
+ */
+:where([data-dds-context="marketing"]) .dds-testimonialslider {
+  --dds-testimonialslider-drift: calc(var(--motion-distance-drift) * 0.5);
+}
+
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__track {
+    --dds-testimonialslider-drift: var(--motion-distance-drift);
+  }
+}
+
+/*
+ * The corner pictures, tucked behind the card's own edges.
+ *
+ * The opening one runs up behind the card's top edge and the closing one down behind its bottom
+ * edge, each set in from its side by the card's inset — so the pair runs from edge to edge of the
+ * card diagonally, as though passing behind it. Each is tucked by its own corner radius and the
+ * whole of its drift, so the corners on that side are behind the edge at every point of the
+ * scroll: the card's edge is a straight cut across the picture, and only the corners facing the
+ * quote show rounded. Their
+ * offsets are here rather than in bindings because a contract has no vocabulary for one: a
+ * position is a fact about this card's corners, which no other component shares.
+ *
+ * On a phone only the opening one is drawn, at full size, in the top end corner above the quote — the quote starts at the other edge, so the picture takes the side the words leave
+ * empty; from the fold both are, at full size, in opposite corners.
+ */
+:where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__image-start {
+  inline-size: var(--size-testimonial-art);
+  inset-block-start: calc(-1 * (var(--radius-container-item) + var(--dds-testimonialslider-drift)));
+  inset-inline-end: var(--space-inset-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__image-end {
+  inset-block-end: calc(-1 * (var(--radius-container-item) + var(--dds-testimonialslider-drift)));
+  inset-inline-end: var(--space-inset-xl);
+}
+
+/*
+ * Room is made on the card for whichever is drawn, so a picture never sits over the words, and
+ * `:has()` asks the track whether one is there, so a card with none keeps its own padding.
+ *
+ * Above the quote on a phone: as much of the picture as ever comes out from behind the top edge —
+ * its size less its corner, the drift and the tuck cancelling — and two insets between it and
+ * the words.
+ */
+:where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__track:has(> .dds-testimonialslider__image-start) .dds-testimonialslider__item {
+  padding-block-start: calc(var(--size-testimonial-art) - var(--radius-container-item) + 2 * var(--space-inset-lg));
+}
+
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__image-start {
+    inline-size: var(--size-testimonial-art);
+    inset-block-start: calc(-1 * (var(--radius-container-item) + var(--dds-testimonialslider-drift)));
+    inset-inline-end: auto;
+    inset-inline-start: var(--space-inset-xl);
+  }
+
+  :where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__image-end {
+    display: block;
+  }
+
+  /* At the sides from the fold: each picture, with an inset either side of it. Tall enough to hold
+     a picture and its insets, so neither runs off the top or the bottom of a short card. */
+  :where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__track:is(:has(> .dds-testimonialslider__image-start), :has(> .dds-testimonialslider__image-end)) .dds-testimonialslider__item {
+    justify-content: center;
+    min-block-size: calc(var(--size-testimonial-art) + 2 * var(--space-inset-3xl));
+    padding-block-start: var(--space-inset-3xl);
+    padding-inline: calc(var(--size-testimonial-art) + 2 * var(--space-inset-xl));
+  }
+}
+
+/*
+ * They drift against the scroll while the section passes through the view — half of
+ * motion.distance.drift on a phone, all of it from the fold: the opening one down and the closing one up, each from where it rests, so the two mirror
+ * each other at every point of the scroll and keep the same distance from their own edges.
+ *
+ * Scroll-driven, LandingHero's way: a view timeline measures the card against the viewport, so it
+ * moves as the reader scrolls and back again as they scroll back, and there is no timer and no
+ * script. A browser with no scroll timeline draws both still, which is the whole of the fallback.
+ */
+@keyframes dds-testimonialslider-drift-down {
+  from {
+    translate: none;
+  }
+  to {
+    translate: 0 var(--dds-testimonialslider-drift);
+  }
+}
+
+@keyframes dds-testimonialslider-drift-up {
+  from {
+    translate: none;
+  }
+  to {
+    translate: 0 calc(-1 * var(--dds-testimonialslider-drift));
+  }
+}
+
+@supports (animation-timeline: view()) {
+  /* One timeline for the pair, the card's own pass through the view. Each picture measuring its own
+     would put the higher one further along at every point of the scroll, and the two would drift
+     by different distances.
+
+     It measures against the nearest scroll container, which is why the section and the track clip
+     with `overflow: clip` rather than `hidden`: `hidden` makes a box a scroll container even when
+     it never scrolls, and the timeline would then measure the card against a box that does not
+     move — the pictures would sit still at one point of the drift however far the page scrolled. */
+  :where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__track {
+    view-timeline: --dds-testimonialslider-card block;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__image-start {
+    animation: dds-testimonialslider-drift-down linear both;
+    animation-range: cover;
+    animation-timeline: --dds-testimonialslider-card;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__image-end {
+    animation: dds-testimonialslider-drift-up linear both;
+    animation-range: cover;
+    animation-timeline: --dds-testimonialslider-card;
+  }
+}
+
+/* A reader who asked for less movement gets none of it: the pictures hold still in their corners. */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__image-start,
+  :where([data-dds-context="marketing"]) .dds-testimonialslider .dds-testimonialslider__image-end {
+    animation: none;
+  }
+}

package/dist/components/blocks/use-reveal.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Whether a block has arrived on screen yet, so its stylesheet can bring it in.
+ *
+ * Every trigger CSS alone can offer is invisible somewhere, and both were tried here first. A
+ * timed animation fires when the element is created, so a block below the fold has finished
+ * arriving before a reader scrolls to it. A scroll-driven one — `animation-timeline: view()` —
+ * fires as the element enters the viewport, so a block that is *already* in view at the first
+ * frame is past the range before anything is painted, and an opening band never moves at all.
+ *
+ * What is wanted is "when it comes into view, counting already being there as coming into view",
+ * and that is the one thing a view timeline cannot say. An observer can, which is the whole reason
+ * this file exists.
+ *
+ * It answers `true` before it knows anything, and that is deliberate. A block hidden until
+ * JavaScript says otherwise is content behind a script — a reader with none, or one whose bundle
+ * failed, gets a blank band. So the resting answer is visible, and hiding is something this only
+ * does once it is running and has somewhere to put the block back.
+ *
+ * `useLayoutEffect` so the hiding lands before the browser paints. In an effect it would run after
+ * the first frame, and every block would show itself, hide, and come back — a flash on every
+ * section of the page.
+ *
+ * It fires once. A section that re-arrived every time a reader scrolled back up would be a page
+ * that will not settle, and the observer is disconnected rather than left listening.
+ */
+export declare function useReveal<T extends HTMLElement>(): [
+    ref: (held: T | null) => void,
+    revealed: boolean
+];
+/**
+ * One part's place in the order its block arrives in.
+ *
+ * Spread onto each part that moves: `<p {...arriving(1)} …>`. Two spellings of one number, because
+ * CSS needs both and can do neither job with the other's — an attribute is what a selector can
+ * match, and a custom property is what `calc()` can multiply into a delay.
+ *
+ * The number is the reading order rather than the DOM order, and they are not always the same: a
+ * hero's picture sits before its words in the markup, because a band paints its ground before it
+ * sets type on it, and a reader still meets the claim first.
+ */
+export declare function arriving(at: number): {
+    'data-reveal-at': number;
+    style: {
+        [key: string]: string | number;
+    };
+};