@deriv-com/dds-marketing 0.2.0 → 1.0.0

package/dist/components/blocks/testimonial-row/TestimonialRow.css

@@ -0,0 +1,245 @@
+/* GENERATED from testimonialrow.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow {
+  box-sizing: border-box;
+  container-type: inline-size;
+  display: flex;
+  inline-size: 100%;
+  justify-content: center;
+  overflow: clip;
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__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-testimonialrow .dds-testimonialrow__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-testimonialrow .dds-testimonialrow__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);
+  max-inline-size: var(--size-measure-heading);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__summary {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  margin: 0;
+  column-gap: var(--space-gap-sm);
+  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);
+  row-gap: var(--space-gap-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__carousel {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  row-gap: var(--space-gap-xl);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__track {
+  transition-property: outline-color, outline-width;
+  display: flex;
+  outline-style: solid;
+  column-gap: var(--space-grid-gutter);
+  outline-width: var(--border-width-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__review-link {
+  transition-property: outline-color, outline-width, translate;
+  box-sizing: border-box;
+  color: inherit;
+  display: flex;
+  outline-style: solid;
+  text-decoration: none;
+  transition-property: translate;
+  border-radius: var(--radius-container);
+  outline-width: var(--border-width-none);
+  transition-duration: var(--motion-duration-normal);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__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);
+  min-block-size: var(--size-review-card-min);
+  padding-block: var(--space-inset-lg);
+  padding-inline: var(--space-inset-lg);
+  row-gap: var(--space-gap-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__rating {
+  display: inline-flex;
+  flex: none;
+  color: var(--color-fg-brand-accent);
+  column-gap: var(--space-gap-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__star {
+  display: grid;
+  flex: none;
+  block-size: var(--icon-size-sm);
+  inline-size: var(--icon-size-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__star-track {
+  display: block;
+  opacity: var(--opacity-track);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__star-fill {
+  display: block;
+  color: var(--color-fg-brand-accent);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__quote {
+  margin: 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);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__author {
+  align-items: center;
+  display: flex;
+  column-gap: var(--space-gap-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__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-testimonialrow .dds-testimonialrow__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-testimonialrow .dds-testimonialrow__footer {
+  align-items: center;
+  display: flex;
+  row-gap: var(--space-gap-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__nav {
+  display: flex;
+  flex: none;
+  column-gap: var(--space-gap-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__nav-slot {
+  display: flex;
+  border-radius: var(--radius-pill);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__review-link:hover {
+  translate: var(--motion-translate-hover);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__review-link:focus-visible {
+  outline-color: var(--color-border-focus);
+  outline-width: var(--border-width-focus);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__track:focus-visible {
+  outline-color: var(--color-border-focus);
+  outline-width: var(--border-width-focus);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow[data-ground="page"] {
+  background-color: var(--color-bg-page);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow[data-ground="page"] .dds-testimonialrow__detail {
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow[data-ground="page"] .dds-testimonialrow__item {
+  background-color: var(--color-bg-surface);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow[data-ground="strong"] {
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow[data-ground="strong"] .dds-testimonialrow__detail {
+  color: var(--color-fg-muted-inverse);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow[data-ground="strong"] .dds-testimonialrow__item {
+  background-color: var(--color-bg-surface-card-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow[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-testimonialrow[data-ground="subtle"] .dds-testimonialrow__detail {
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow[data-ground="subtle"] .dds-testimonialrow__item {
+  background-color: var(--color-bg-surface-card-raised);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow[data-ground="strong"] .dds-testimonialrow__review-link:focus-visible {
+  outline-color: var(--color-border-focus-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow[data-ground="strong"] .dds-testimonialrow__track:focus-visible {
+  outline-color: var(--color-border-focus-on-brand-strong);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-testimonialrow,
+  :where([data-dds-context="marketing"]) .dds-testimonialrow * { transition: none !important; }
+}
+

package/dist/components/blocks/testimonial-row/TestimonialRow.d.ts

@@ -0,0 +1,20 @@
+import "./TestimonialRow.css";
+import "./testimonial-row-impl.css";
+import "../block-reveal.css";
+import { type TestimonialRowProps } from "./TestimonialRow.types.js";
+export type { TestimonialRowProps };
+/**
+ * A heading over a row of rated reviews, stepped through by the reader — the reference site's
+ * Testimonial in its review-row form, named for no review service.
+ *
+ * The browser does the scrolling and the snapping; this only reads where the row is, so each arrow
+ * is offered while it has somewhere to go. Read on scroll and on resize — a row that grows wide
+ * enough to hold every card has nowhere to go in either direction, and the arrows go with it.
+ *
+ * Nothing here moves on its own, which is the difference from TestimonialSlider: several cards are in
+ * view at once, so there is no "next" for a timer to bring.
+ *
+ * `'use client'` for the row's scroll position, the arrival, and `useId`, which names the region
+ * by its heading.
+ */
+export declare function TestimonialRow({ ground, title, reviews, summary, ratingLabel, label, previousLabel, nextLabel, }: TestimonialRowProps): import("react").JSX.Element | null;

package/dist/components/blocks/testimonial-row/TestimonialRow.js

@@ -0,0 +1,128 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+import { ChevronLeftRegularIcon, ChevronRightRegularIcon, StarSolidIcon } from "@deriv-com/quill-icons-web";
+import "./TestimonialRow.css";
+import "./testimonial-row-impl.css";
+import "../block-reveal.css";
+import { given } from "../../given.js";
+import { ButtonIcon } from "../../core/button-icon/ButtonIcon.js";
+import { Link } from "../../core/link/Link.js";
+import { arriving, useReveal } from "../use-reveal.js";
+import { testimonialRowDefaults, testimonialRowParts, } from "./TestimonialRow.types.js";
+/**
+ * Five stars, filled to a score out of five.
+ *
+ * Halves and nothing finer: a quarter star is a sliver nobody reads as a quarter, so a score is
+ * rounded to the nearest half before it is drawn. Each star is an empty star with the filled one
+ * laid over it in the same cell; a half star's fill is clipped in the stylesheet, which knows the
+ * writing direction.
+ *
+ * One image — a score — rather than five pictures, named by its rating.
+ */
+/** A score as it is drawn: held to nought to five and rounded to the nearest half. */
+const toHalves = (score) => Math.round(Math.min(5, Math.max(0, score)) * 2) / 2;
+function Rating({ score, label }) {
+    const halves = toHalves(score);
+    return (_jsx("span", { className: testimonialRowParts.rating, role: "img", "aria-label": label, children: [0, 1, 2, 3, 4].map((at) => {
+            const fill = halves - at >= 1 ? "full" : halves - at > 0 ? "half" : "empty";
+            return (_jsxs("span", { className: testimonialRowParts.star, "data-fill": fill, children: [_jsx(StarSolidIcon, { className: testimonialRowParts["star-track"], "aria-hidden": "true" }), fill === "empty" ? null : (_jsx(StarSolidIcon, { className: testimonialRowParts["star-fill"], "aria-hidden": "true" }))] }, at));
+        }) }));
+}
+/** Close enough to an end to call it the end: a snapped row can rest a pixel short of it. */
+const AT_END = 2;
+/**
+ * A heading over a row of rated reviews, stepped through by the reader — the reference site's
+ * Testimonial in its review-row form, named for no review service.
+ *
+ * The browser does the scrolling and the snapping; this only reads where the row is, so each arrow
+ * is offered while it has somewhere to go. Read on scroll and on resize — a row that grows wide
+ * enough to hold every card has nowhere to go in either direction, and the arrows go with it.
+ *
+ * Nothing here moves on its own, which is the difference from TestimonialSlider: several cards are in
+ * view at once, so there is no "next" for a timer to bring.
+ *
+ * `'use client'` for the row's scroll position, the arrival, and `useId`, which names the region
+ * by its heading.
+ */
+export function TestimonialRow({ ground = testimonialRowDefaults.ground, title, reviews, summary, ratingLabel, label = testimonialRowDefaults.label, previousLabel = testimonialRowDefaults.previousLabel, nextLabel = testimonialRowDefaults.nextLabel, }) {
+    const titleId = useId();
+    const [band, revealed] = useReveal();
+    const row = useRef(null);
+    const back = useRef(null);
+    const on = useRef(null);
+    // Before the row is measured, the way a row opens: at its start, with somewhere to go.
+    const [ends, setEnds] = useState({ back: false, on: true });
+    // The same answer, read outside a render: the focus hand-off below has to compare against it,
+    // and a state updater is no place for a side effect — React may call one twice.
+    const was = useRef(ends);
+    const read = useCallback(() => {
+        const element = row.current;
+        if (element === null)
+            return;
+        // `abs`, because a right-to-left row counts its scroll position down from zero.
+        const at = Math.abs(element.scrollLeft);
+        const furthest = element.scrollWidth - element.clientWidth;
+        const next = { back: at > AT_END, on: at < furthest - AT_END };
+        const before = was.current;
+        if (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;
+        setEnds(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 list at the same width leaves the row's own box the
+        // size it was, so nothing above would fire, and the arrows would describe the old set.
+    }, [read, reviews.length]);
+    // Nothing to show is nothing drawn: a named region with no review in it leads nowhere.
+    if (reviews.length === 0)
+        return null;
+    // One card and the gap after it, measured rather than assumed, so a step lands the next card
+    // where the first one stood at every width.
+    const step = (direction) => {
+        const element = row.current;
+        if (element === null)
+            return;
+        const style = getComputedStyle(element);
+        const card = element.firstElementChild;
+        const by = (card?.offsetWidth ?? element.clientWidth) + (Number.parseFloat(style.columnGap) || 0);
+        const still = typeof window.matchMedia === "function" &&
+            window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+        element.scrollBy({
+            left: direction * by * (style.direction === "rtl" ? -1 : 1),
+            behavior: still ? "auto" : "smooth",
+        });
+    };
+    const scrolls = ends.back || ends.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" };
+    return (_jsx("section", { className: testimonialRowParts.root, "data-ground": ground, "aria-labelledby": titleId, children: _jsxs("div", { className: testimonialRowParts.inner, ref: band, "data-revealed": revealed, children: [_jsxs("div", { className: testimonialRowParts.header, children: [_jsx("h2", { className: testimonialRowParts.title, id: titleId, ...arriving(0), children: title }), summary === undefined ? null : (_jsx("p", { className: testimonialRowParts.summary, ...arriving(1), children: summary.href !== undefined && given(summary.href) ? (
+                            // A link on its own line, so the standalone one: brand ink and a mark. On the dark
+                            // band it takes the band's ink, where coral is the wrong colour for words.
+                            _jsx(Link, { variant: "standalone", tone: ground === "strong" ? "inherit" : "brand", external: true, href: summary.href, children: summary.label })) : (_jsx("span", { children: summary.label })) }))] }), _jsxs("div", { className: testimonialRowParts.carousel, children: [_jsx("div", { ref: row, className: testimonialRowParts.track, role: "group", "aria-label": label, tabIndex: 0, onScroll: read, ...arriving(2), children: reviews.map((each, at) => {
+                                // A review's position is its identity: the set is a list, and nothing reorders it.
+                                const card = (_jsxs("figure", { className: testimonialRowParts.item, children: [each.rating === undefined ? null : (
+                                        // Named by the score it is drawn at, so a 4.3 is heard as the 4.5 a reader
+                                        // sees rather than as a number the stars do not show.
+                                        _jsx(Rating, { score: each.rating, label: ratingLabel?.(toHalves(each.rating)) ?? `Rated ${toHalves(each.rating)} out of 5` })), _jsx("blockquote", { className: testimonialRowParts.quote, children: each.quote }), _jsx("figcaption", { className: testimonialRowParts.author, children: _jsxs("span", { children: [_jsx("span", { className: testimonialRowParts.name, children: each.name }), given(each.detail) ? (_jsx("span", { className: testimonialRowParts.detail, children: each.detail })) : null] }) })] }, at));
+                                // The review is on a service the page does not own, so it opens beside the page.
+                                return given(each.href) ? (_jsx("a", { className: testimonialRowParts["review-link"], href: each.href, target: "_blank", rel: "noopener noreferrer", children: card }, at)) : (card);
+                            }) }), reviews.length > 1 ? (_jsx("div", { className: testimonialRowParts.footer, ...arriving(3), children: _jsxs("div", { className: testimonialRowParts.nav, hidden: !scrolls, children: [_jsx("span", { ref: back, className: testimonialRowParts["nav-slot"], "data-available": ends.back, inert: !ends.back, children: _jsx(ButtonIcon, { icon: _jsx(ChevronLeftRegularIcon, {}), label: previousLabel, ...arrow, onClick: () => step(-1) }) }), _jsx("span", { ref: on, className: testimonialRowParts["nav-slot"], "data-available": ends.on, inert: !ends.on, children: _jsx(ButtonIcon, { icon: _jsx(ChevronRightRegularIcon, {}), label: nextLabel, ...arrow, onClick: () => step(1) }) })] }) })) : null] })] }) }));
+}

package/dist/components/blocks/testimonial-row/TestimonialRow.types.d.ts

@@ -0,0 +1,54 @@
+import type { TestimonialRowReview, TestimonialRowSummary } from '../../testimonial-row-data.js';
+export interface TestimonialRowOwnProps {
+    /**
+     * `page` — The default, and the page's own white. The cards are the recessed gray that sets them off
+     * `subtle` — The grey band, the reference design's ground for this section. The cards turn 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, the summary and the cards' words turn white, and the cards take color.bg.surface-card-strong — gray.900 in both themes, the colour a page card takes in dark mode — so the band reads as a dark-mode section in either theme. The arrows take ButtonIcon's inverse tone
+     */
+    ground?: 'page' | 'subtle' | 'strong';
+    /** Always. Whose reviews these are, in a few words — "What our customers say". */
+    title: string;
+    /** Always. The reviews, in the order they run along the row — five to ten of a sentence or two, each with the reviewer's name, its `rating` and, where there is one, the `href` of the review itself. An empty list draws nothing. */
+    reviews: TestimonialRowReview[];
+    /** The overall rating, in the page's own words under the heading — "Rated 4.5 out of 5 on our review site" — as a standalone Link to where the reviews were collected when it has an `href`. Words rather than stars: they name the service, they are translated with the page, and the score is stated once rather than drawn beside a sentence that already says it. */
+    summary?: TestimonialRowSummary;
+    /** The accessible name of a card's stars, given its rating as drawn — rounded to the nearest half, so what is heard is what is seen. The stars are drawn rather than written, so this is what a screen reader hears for them. Without it they are named "Rated 5 out of 5"; pass it to translate that with the page. */
+    ratingLabel?: (rating: number) => string;
+    /** 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. 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;
+}
+export type TestimonialRowProps = TestimonialRowOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const testimonialRowParts: {
+    readonly root: "dds-testimonialrow";
+    readonly inner: "dds-testimonialrow__inner";
+    readonly header: "dds-testimonialrow__header";
+    readonly title: "dds-testimonialrow__title";
+    readonly summary: "dds-testimonialrow__summary";
+    readonly carousel: "dds-testimonialrow__carousel";
+    readonly track: "dds-testimonialrow__track";
+    readonly 'review-link': "dds-testimonialrow__review-link";
+    readonly item: "dds-testimonialrow__item";
+    readonly rating: "dds-testimonialrow__rating";
+    readonly star: "dds-testimonialrow__star";
+    readonly 'star-track': "dds-testimonialrow__star-track";
+    readonly 'star-fill': "dds-testimonialrow__star-fill";
+    readonly quote: "dds-testimonialrow__quote";
+    readonly author: "dds-testimonialrow__author";
+    readonly name: "dds-testimonialrow__name";
+    readonly detail: "dds-testimonialrow__detail";
+    readonly footer: "dds-testimonialrow__footer";
+    readonly nav: "dds-testimonialrow__nav";
+    readonly 'nav-slot': "dds-testimonialrow__nav-slot";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const testimonialRowDefaults: {
+    readonly ground: "page";
+    readonly label: "Reviews";
+    readonly previousLabel: "Previous reviews";
+    readonly nextLabel: "Next reviews";
+};

package/dist/components/blocks/testimonial-row/TestimonialRow.types.js

@@ -0,0 +1,26 @@
+// GENERATED from testimonial-row.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const testimonialRowParts = {
+    root: 'dds-testimonialrow',
+    inner: 'dds-testimonialrow__inner',
+    header: 'dds-testimonialrow__header',
+    title: 'dds-testimonialrow__title',
+    summary: 'dds-testimonialrow__summary',
+    carousel: 'dds-testimonialrow__carousel',
+    track: 'dds-testimonialrow__track',
+    'review-link': 'dds-testimonialrow__review-link',
+    item: 'dds-testimonialrow__item',
+    rating: 'dds-testimonialrow__rating',
+    star: 'dds-testimonialrow__star',
+    'star-track': 'dds-testimonialrow__star-track',
+    'star-fill': 'dds-testimonialrow__star-fill',
+    quote: 'dds-testimonialrow__quote',
+    author: 'dds-testimonialrow__author',
+    name: 'dds-testimonialrow__name',
+    detail: 'dds-testimonialrow__detail',
+    footer: 'dds-testimonialrow__footer',
+    nav: 'dds-testimonialrow__nav',
+    'nav-slot': 'dds-testimonialrow__nav-slot',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const testimonialRowDefaults = { ground: 'page', label: 'Reviews', previousLabel: 'Previous reviews', nextLabel: 'Next reviews' };

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

@@ -0,0 +1,195 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ */
+
+/*
+ * A heading with no rating under it closes up. Its bound step is the distance to the rating, and
+ * with nothing there it would only add to the step from the header to the row. `:last-child` is
+ * the condition itself, LandingHero's way, rather than a prop standing in for it.
+ */
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__title:last-child {
+  margin-block-end: 0;
+}
+
+/*
+ * The header — the heading and the rating under it — ranges to the start on a phone and is centred from the
+ * fold, FeatureCards' arrangement and its reason. Both are capped narrower than the column, so
+ * `margin-inline: auto` is what centres those boxes rather than their words inside a box left at the
+ * start edge.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__header {
+    align-items: center;
+    margin-inline: auto;
+    text-align: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__summary {
+    justify-content: center;
+    margin-inline: auto;
+  }
+}
+
+
+/*
+ * Two measures the row is built from, both read off the band rather than the row.
+ *
+ * The root declares `container-type`, so `cqi` here is the band's width. `--column` is the width of
+ * the column the heading sits in — the inner's box, held to size.content.max, less its gutter on
+ * each side. `--bleed` is how far that column stands in from the band's edge: half of whatever the
+ * band has beyond the content measure, plus the gutter.
+ */
+:where([data-dds-context="marketing"]) .dds-testimonialrow {
+  --dds-testimonialrow-column: calc(min(100cqi, var(--size-content-max)) - 2 * var(--space-inset-page));
+  --dds-testimonialrow-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.
+ *
+ * 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 is on the row
+ * that scrolls, so it scrolls away with the cards and a card is then cut off by the band rather
+ * than by the column — the reference design's breakout.
+ *
+ * `scroll-padding-inline` matches the padding, 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 what happens outside a card's box — the lift on hover and the
+ * focus ring — which a scroll container would otherwise clip; the negative margin gives it back.
+ *
+ * No scrollbar. Scroller keeps its own, as the only standing sign a region moves; here the arrows
+ * under the row are that sign, and a bar between the cards and the arrows would be a second one.
+ */
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__track {
+  display: flex;
+  margin-block: calc(-1 * var(--space-gap-sm));
+  margin-inline: calc(-1 * var(--dds-testimonialrow-bleed));
+  overflow-x: auto;
+  overflow-y: hidden;
+  overscroll-behavior-x: contain;
+  padding-block: var(--space-gap-sm);
+  padding-inline-start: var(--dds-testimonialrow-bleed);
+  scroll-padding-inline: var(--dds-testimonialrow-bleed);
+  scroll-snap-type: x proximity;
+  scrollbar-width: none;
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__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-testimonialrow .dds-testimonialrow__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-testimonialrow .dds-testimonialrow__track::after {
+  content: '';
+  flex: none;
+  inline-size: var(--dds-testimonialrow-bleed);
+  margin-inline-start: calc(-1 * var(--space-grid-gutter));
+}
+
+/*
+ * A card's share of the column: most of it on a phone, two and a half from the fold and three and
+ * a half from 64rem — so a card is always cut off at the edge, which is what says there is more.
+ *
+ * On the row's direct child, which is the card or the link around it. Either way it is what the row
+ * lays out, and 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.
+ */
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__track > * {
+  flex: none;
+  inline-size: calc(var(--dds-testimonialrow-column) * 0.85);
+  scroll-snap-align: start;
+}
+
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__track > * {
+    inline-size: calc((var(--dds-testimonialrow-column) - 2 * var(--space-grid-gutter)) / 2.5);
+  }
+}
+
+@container (min-width: 64rem) {
+  :where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__track > * {
+    inline-size: calc((var(--dds-testimonialrow-column) - 3 * var(--space-grid-gutter)) / 3.5);
+  }
+}
+
+/* The card fills its link, and the words fill the card, so every name sits at the foot of a row
+   whose cards finish level. */
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__review-link > .dds-testimonialrow__item {
+  flex: 1 1 auto;
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__quote {
+  flex: 1 1 auto;
+}
+
+/* A lift is movement; a reader who asked for less gets the ring and the pointer and no travel. */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__review-link:hover {
+    translate: none;
+  }
+}
+
+/*
+ * One star: the empty one and the fill in the same cell, each the size of the cell. The glyph ships
+ * width and height attributes, which only a CSS length on the element overrides.
+ */
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__star-track,
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__star-fill {
+  block-size: 100%;
+  grid-area: 1 / 1;
+  inline-size: 100%;
+}
+
+/* A half star fills from the start edge, which is the right one in a right-to-left page. */
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__star[data-fill='half'] .dds-testimonialrow__star-fill {
+  clip-path: inset(0 50% 0 0);
+}
+
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__star[data-fill='half']:dir(rtl) .dds-testimonialrow__star-fill {
+  clip-path: inset(0 0 0 50%);
+}
+
+/*
+ * The arrows: ranged to the start on a phone, with the heading and the cards above them, and centred from
+ * the fold, with the heading, so the way through the row sits under the middle of it.
+ */
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__footer {
+  align-items: flex-start;
+  flex-direction: column;
+}
+
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__footer {
+    align-items: center;
+  }
+}
+
+/* `hidden` has to win over the part's own `display`, which outranks the browser's rule for it. */
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__nav[hidden] {
+  display: none;
+}
+
+/*
+ * An arrow with nowhere to go stays in its place, receded to opacity.disabled — the measure every
+ * unavailable control in this package takes — so both directions show from the first render and the
+ * row reads as a carousel before it has moved. The slot is inert as well, so it cannot be pressed or
+ * focused. ButtonIcon has no disabled state of its own, which is why the slot carries it.
+ */
+:where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__nav-slot[data-available='false'] {
+  opacity: var(--opacity-disabled);
+}