@deriv-com/dds-marketing 1.0.2 → 1.1.0

package/dist/components/blocks/team-grid/TeamGrid.js

@@ -0,0 +1,74 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from 'react';
+import './TeamGrid.css';
+import './team-grid-impl.css';
+import '../block-reveal.css';
+import { given } from '../../given.js';
+import { Button } from '../../core/button/Button.js';
+import { Link } from '../../core/link/Link.js';
+import { AspectRatio } from '../../layout/aspect-ratio/AspectRatio.js';
+import { arriving, useReveal } from '../use-reveal.js';
+import { teamGridDefaults, teamGridParts } from './TeamGrid.types.js';
+/**
+ * A profile link's accessible name when the page gives none: the visible word, then whose it is.
+ *
+ * The word first, because it is what a reader using speech sees and says — "click LinkedIn" has to
+ * match — and the name after it, because "LinkedIn" alone is the same on every card and a list of
+ * links heard out of context would be one word repeated.
+ */
+const profileNameOf = (person) => `${person.profile?.label ?? ''}, ${person.name}`;
+/**
+ * Where a person comes in the arrival, capped so a long set does not keep a reader waiting.
+ *
+ * The heading and the line under it take the first two steps; the people showing follow a step
+ * apart up to the fourth, and the button arrives a step after the last of them. FeatureCards' cap,
+ * for its reason: block-reveal.css keeps a block's trail inside its own movement.
+ */
+const FIRST_PERSON = 2;
+const LAST_STEP = FIRST_PERSON + 3;
+/**
+ * A heading over a grid of people — the reference design's Leaders template, AvatarGrid in its
+ * source.
+ *
+ * Each person is a square photograph over their name, their role and, where they have one, a link
+ * to a profile of theirs elsewhere. The people are records rather than cards the page composes: a
+ * person here is words and a picture, and the grid is what decides how each one is drawn.
+ *
+ * The first `collapsedCount` show at once and the rest wait behind a button under the grid. One
+ * list rather than the reference's two grids, so a screen reader counts the whole set and the
+ * order is the same whether it is open or not; the people past the count are in the markup from
+ * the first render and `hidden` until asked for, which takes them out of the accessibility tree
+ * and the tab order as well as off the page. The reference marked its hidden half `aria-hidden`
+ * only, and left their links in the tab order behind a collapsed row.
+ *
+ * Pressing the button leaves focus on it. The people it shows sit straight before it in reading
+ * order, so they are the next thing a reader moving back meets, and the people it hides take any
+ * focus they could have held away with them — which they cannot be holding, the button having it.
+ *
+ * `'use client'` for the button's state, for the arrival, and for `useId`, which names the region
+ * by its heading and gives the button the list's id to control.
+ */
+export function TeamGrid({ ground = teamGridDefaults.ground, title, description, people, collapsedCount = teamGridDefaults.collapsedCount, expandLabel = teamGridDefaults.expandLabel, collapseLabel = teamGridDefaults.collapseLabel, profileName = profileNameOf, externalLabel = teamGridDefaults.externalLabel, }) {
+    const titleId = useId();
+    const listId = useId();
+    const [band, revealed] = useReveal();
+    const [expanded, setExpanded] = useState(false);
+    // A count below one would hide everyone behind the button; a fraction is not a number of people.
+    const shown = Math.max(1, Math.floor(collapsedCount));
+    const longer = people.length > shown;
+    const inverse = ground === 'strong';
+    return (_jsx("section", { className: teamGridParts.root, "data-ground": ground, "aria-labelledby": titleId, children: _jsxs("div", { className: teamGridParts.inner, ref: band, "data-revealed": revealed, children: [_jsxs("div", { className: teamGridParts.header, children: [_jsx("h2", { className: teamGridParts.title, id: titleId, ...arriving(0), children: title }), given(description) ? (_jsx("p", { className: teamGridParts.description, ...arriving(1), children: description })) : null] }), _jsxs("div", { className: teamGridParts.people, children: [_jsx("ul", { className: teamGridParts.list, id: listId, children: people.map((person, at) => {
+                                const extra = at >= shown;
+                                /* A person showing from the start arrives with the block. One past the count arrives
+                                   when the button shows them, by the stylesheet's own animation, a step behind the
+                                   one before — so it carries its place among the extras rather than the block's. */
+                                const motion = extra
+                                    ? {
+                                        'data-extra': '',
+                                        style: { '--dds-teamgrid-extra-at': at - shown },
+                                    }
+                                    : arriving(Math.min(FIRST_PERSON + at, LAST_STEP));
+                                return (_jsxs("li", { className: teamGridParts.item, hidden: extra && !expanded, ...motion, children: [_jsx("div", { className: teamGridParts.media, children: _jsx(AspectRatio, { ratio: "square", children: _jsx("img", { src: person.image.src, alt: person.image.alt, loading: "lazy", decoding: "async" }) }) }), _jsxs("div", { className: teamGridParts.text, children: [_jsx("h3", { className: teamGridParts.name, children: person.name }), _jsx("p", { className: teamGridParts.role, children: person.role }), person.profile !== undefined ? (_jsx("div", { className: teamGridParts.profile, children: _jsx(Link, { href: person.profile.href, external: true, tone: inverse ? 'inherit' : 'brand', "aria-label": `${profileName(person)} ${externalLabel}`, children: person.profile.label }) })) : null] })] }, `${person.name}-${at}`));
+                            }) }), longer ? (_jsx("div", { className: teamGridParts.actions, ...arriving(Math.min(FIRST_PERSON + shown, LAST_STEP + 1)), children: _jsx(Button, { variant: "secondary", size: "md", tone: inverse ? 'inverse' : 'default', "aria-expanded": expanded, "aria-controls": listId, onClick: () => setExpanded((open) => !open), children: expanded ? collapseLabel : expandLabel }) })) : null] })] }) }));
+}

package/dist/components/blocks/team-grid/TeamGrid.types.d.ts

@@ -0,0 +1,51 @@
+import type { TeamGridMember } from '../../team-grid-data.js';
+export interface TeamGridOwnProps {
+    /**
+     * `page` — The default, and the page's own white. Most people sections have nothing to separate themselves from
+     * `subtle` — A quiet step off the page — the reference design's slate band — for a section that wants to read as its own. Painted as the band's tint laid over the page's own ground, so it is the same grey whatever is behind the section; the photographs' placeholder is raised to color.bg.surface-card-raised so it does not vanish into the band
+     * `strong` — `color.bg.brand-strong`, the dark band, for a section a reader should arrive at. The heading, the names and the roles turn white, the profile links take the band's ink rather than the brand's, and the button takes Button's inverse tone
+     */
+    ground?: 'page' | 'subtle' | 'strong';
+    /** Always. Who these people are, in the fewest words — "Meet our leadership team". It names the section as a region, so a screen reader can jump to it and past it. */
+    title: string;
+    /** A line saying who the set is, when the title alone does not — "The people steering Deriv's products, markets and teams". */
+    description?: string;
+    /** Always. The people, in the order the page wants them read — by seniority or by relevance, the first `collapsedCount` of them showing at once. Each has a name, a role, a picture with its `alt`, and where there is one a `profile` link. The same framing in every photograph: the grid crops each to a square, and a set of faces at different distances reads as a set of different sources. An empty list draws the heading alone. */
+    people: TeamGridMember[];
+    /** How many people show before the rest are asked for. Four, the default, is one row at full width, so the button sits under a complete row. A list no longer than this has no button at all — there is nothing more to show. */
+    collapsedCount?: number;
+    /** The button's words while the rest of the list is hidden. Translate it with the page, and keep it parallel to collapseLabel. */
+    expandLabel?: string;
+    /** The button's words once the whole list is showing, for the reason expandLabel exists. */
+    collapseLabel?: string;
+    /** The accessible name of a person's profile link, given the person. The visible word is the profile's own — "LinkedIn" — and it is the same on every card, so the link is named for its person too. Without this the name is the profile's label and then the person's, "LinkedIn, Alex Morgan": the visible word first, so a reader using speech can say what they see. Pass it to translate that with the page. */
+    profileName?: (person: TeamGridMember) => string;
+    /** Said after every profile link's name, because a profile opens in a new tab and a reader should know before they press it — ResourceBanner's words for the same thing. Translate it with the page. */
+    externalLabel?: string;
+}
+export type TeamGridProps = TeamGridOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const teamGridParts: {
+    readonly root: "dds-teamgrid";
+    readonly inner: "dds-teamgrid__inner";
+    readonly header: "dds-teamgrid__header";
+    readonly title: "dds-teamgrid__title";
+    readonly description: "dds-teamgrid__description";
+    readonly people: "dds-teamgrid__people";
+    readonly list: "dds-teamgrid__list";
+    readonly item: "dds-teamgrid__item";
+    readonly media: "dds-teamgrid__media";
+    readonly text: "dds-teamgrid__text";
+    readonly name: "dds-teamgrid__name";
+    readonly role: "dds-teamgrid__role";
+    readonly profile: "dds-teamgrid__profile";
+    readonly actions: "dds-teamgrid__actions";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const teamGridDefaults: {
+    readonly ground: "page";
+    readonly collapsedCount: 4;
+    readonly expandLabel: "View all";
+    readonly collapseLabel: "View less";
+    readonly externalLabel: "(opens in a new tab)";
+};

package/dist/components/blocks/team-grid/TeamGrid.types.js

@@ -0,0 +1,20 @@
+// GENERATED from team-grid.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const teamGridParts = {
+    root: 'dds-teamgrid',
+    inner: 'dds-teamgrid__inner',
+    header: 'dds-teamgrid__header',
+    title: 'dds-teamgrid__title',
+    description: 'dds-teamgrid__description',
+    people: 'dds-teamgrid__people',
+    list: 'dds-teamgrid__list',
+    item: 'dds-teamgrid__item',
+    media: 'dds-teamgrid__media',
+    text: 'dds-teamgrid__text',
+    name: 'dds-teamgrid__name',
+    role: 'dds-teamgrid__role',
+    profile: 'dds-teamgrid__profile',
+    actions: 'dds-teamgrid__actions',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const teamGridDefaults = { ground: 'page', collapsedCount: 4, expandLabel: 'View all', collapseLabel: 'View less', externalLabel: '(opens in a new tab)' };

package/dist/components/blocks/team-grid/team-grid-impl.css

@@ -0,0 +1,129 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ */
+
+/*
+ * The header starts on a phone and is centred once the band is wide enough to hold a line.
+ *
+ * FeatureCards' rule and its reason: centred text starts every line at a different edge, which
+ * costs little across a wide measure and a great deal across a narrow one. The header and the line
+ * under it 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.
+ *
+ * `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-teamgrid .dds-teamgrid__header {
+    align-items: center;
+    margin-inline: auto;
+    text-align: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-teamgrid .dds-teamgrid__description {
+    margin-inline: auto;
+  }
+}
+
+/*
+ * One column on a phone, two from the fold, four at full width — the reference design's grid, so
+ * the four people showing at first are one row on a desktop. `minmax(0, 1fr)` rather than `1fr`, so
+ * a long unbroken name shrinks to its column instead of pushing the grid past the page.
+ *
+ * Four from 64rem rather than FeatureCards' 62rem: four photographs and four names a row want the
+ * extra width, and below it two a row keeps each face large enough to be one.
+ */
+:where([data-dds-context="marketing"]) .dds-teamgrid .dds-teamgrid__list {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-teamgrid .dds-teamgrid__list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@container (min-width: 64rem) {
+  :where([data-dds-context="marketing"]) .dds-teamgrid .dds-teamgrid__list {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+/*
+ * A person waiting behind the button is not there at all.
+ *
+ * The item is a flex column by its contract, and an author's `display` beats the browser's own
+ * `[hidden] { display: none }` — so without this the attribute would take a person out of the
+ * accessibility tree while leaving them drawn on the page.
+ */
+:where([data-dds-context="marketing"]) .dds-teamgrid .dds-teamgrid__item[hidden] {
+  display: none;
+}
+
+/*
+ * And arrives when the button shows them: faded up from opacity.hidden and risen
+ * motion.translate.reveal, the arrival every block makes, a stagger step behind the person before.
+ *
+ * A keyframe rather than a transition because the person was `display: none` a moment earlier and
+ * a transition has no painted starting state to move from — the same reason a block's entrance is
+ * keyframed. `both`, so a person waiting out their delay waits at the start rather than showing
+ * and then jumping back to it. The reference also grew the grid's height open; that needs the
+ * extras in a second list, and one list a screen reader counts is worth more than the slide.
+ */
+@keyframes dds-teamgrid-arrive {
+  from {
+    opacity: var(--opacity-hidden);
+    translate: var(--motion-translate-reveal);
+  }
+}
+
+:where([data-dds-context="marketing"]) .dds-teamgrid .dds-teamgrid__item[data-extra]:not([hidden]) {
+  animation: dds-teamgrid-arrive var(--motion-duration-reveal) var(--motion-easing-reveal) both;
+  animation-delay: calc(var(--dds-teamgrid-extra-at, 0) * var(--motion-duration-stagger));
+}
+
+/*
+ * A reader who asked for less movement gets the people without the arrival: they are simply there
+ * the moment the button is pressed.
+ */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-teamgrid .dds-teamgrid__item[data-extra]:not([hidden]) {
+    animation: none;
+  }
+}
+
+/*
+ * The photograph's frame takes the whole of the card's width; AspectRatio inside it holds the
+ * square and the frame's clip rounds the corners of whatever the picture is.
+ */
+:where([data-dds-context="marketing"]) .dds-teamgrid .dds-teamgrid__media {
+  inline-size: 100%;
+}
+
+/*
+ * A profile link is a pointer target, so it is at least size.target.min tall. A standalone Link is
+ * as tall as its line, which is under that at the label step — the profile part holds the height
+ * and the link fills it, so the whole of the row is the target rather than the words alone.
+ */
+:where([data-dds-context="marketing"]) .dds-teamgrid .dds-teamgrid__profile > .dds-link {
+  min-block-size: var(--size-target-min);
+}
+
+/*
+ * The button fills the column on a phone, the rule for a section's actions — the part is a column,
+ * which stretches it. From the fold it is its own width, centred under the grid it lengthens.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-teamgrid .dds-teamgrid__actions {
+    align-items: center;
+  }
+}
+
+/*
+ * 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 people. `:last-child` is the
+ * condition itself, DataTable's way, rather than a prop standing in for it.
+ */
+:where([data-dds-context="marketing"]) .dds-teamgrid .dds-teamgrid__title:last-child {
+  margin-block-end: 0;
+}

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

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

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

@@ -17,4 +17,4 @@ export type { TestimonialRowProps };
  * `'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;
+export declare function TestimonialRow({ ground, title, reviews, summary, ratingLabel, label, externalLabel, previousLabel, nextLabel, }: TestimonialRowProps): import("react").JSX.Element | null;

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

@@ -8,6 +8,7 @@ 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 { visuallyHidden } from "../../visually-hidden.js";
 import { arriving, useReveal } from "../use-reveal.js";
 import { testimonialRowDefaults, testimonialRowParts, } from "./TestimonialRow.types.js";
 /**
@@ -45,7 +46,7 @@ const AT_END = 2;
  * `'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, }) {
+export function TestimonialRow({ ground = testimonialRowDefaults.ground, title, reviews, summary, ratingLabel, label = testimonialRowDefaults.label, externalLabel = testimonialRowDefaults.externalLabel, previousLabel = testimonialRowDefaults.previousLabel, nextLabel = testimonialRowDefaults.nextLabel, }) {
     const titleId = useId();
     const [band, revealed] = useReveal();
     const row = useRef(null);
@@ -116,13 +117,13 @@ export function TestimonialRow({ ground = testimonialRowDefaults.ground, title,
     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) => {
+                            _jsxs(Link, { variant: "standalone", tone: ground === "strong" ? "inherit" : "brand", external: true, href: summary.href, children: [summary.label, _jsx("span", { style: visuallyHidden, children: ` ${externalLabel}` })] })) : (_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);
+                                return given(each.href) ? (_jsxs("a", { className: testimonialRowParts["review-link"], href: each.href, target: "_blank", rel: "noopener noreferrer", children: [card, _jsx("span", { style: visuallyHidden, children: ` ${externalLabel}` })] }, 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

@@ -20,6 +20,8 @@ export interface TestimonialRowOwnProps {
     previousLabel?: string;
     /** The accessible name of the arrow stepping the row on, for the reason previousLabel exists. */
     nextLabel?: string;
+    /** Said after the summary link and every linked review, because both open on a service the page does not own, in a new tab, and a reader should know before they press — TeamGrid's and ResourceBanner's words for the same thing. Translate it with the page. */
+    externalLabel?: string;
 }
 export type TestimonialRowProps = TestimonialRowOwnProps;
 /** The class each part carries. Apply these — do not retype them. */
@@ -51,4 +53,5 @@ export declare const testimonialRowDefaults: {
     readonly label: "Reviews";
     readonly previousLabel: "Previous reviews";
     readonly nextLabel: "Next reviews";
+    readonly externalLabel: "(opens in a new tab)";
 };

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

@@ -23,4 +23,4 @@ export const testimonialRowParts = {
     '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' };
+export const testimonialRowDefaults = { ground: 'page', label: 'Reviews', previousLabel: 'Previous reviews', nextLabel: 'Next reviews', externalLabel: '(opens in a new tab)' };

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

@@ -193,3 +193,11 @@
 :where([data-dds-context="marketing"]) .dds-testimonialrow .dds-testimonialrow__nav-slot[data-available='false'] {
   opacity: var(--opacity-disabled);
 }
+
+/*
+ * 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-testimonialrow .dds-testimonialrow__nav-slot svg:dir(rtl) {
+  scale: -1 1;
+}

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

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

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

@@ -19,4 +19,4 @@ export type { TestimonialSliderProps };
  * 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;
+export declare function TestimonialSlider({ ground, title, quotes, imageStart, imageEnd, autoplay, controlsLabel, slideLabel, roleDescription, slideRoleDescription, positionLabel, }: TestimonialSliderProps): import("react").JSX.Element | null;

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

@@ -25,10 +25,10 @@ import { testimonialSliderDefaults, testimonialSliderParts, } from "./Testimonia
  * 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, }) {
+export function TestimonialSlider({ ground = testimonialSliderDefaults.ground, title, quotes, imageStart, imageEnd, autoplay = testimonialSliderDefaults.autoplay, controlsLabel = testimonialSliderDefaults.controlsLabel, slideLabel = testimonialSliderDefaults.slideLabel, roleDescription = testimonialSliderDefaults.roleDescription, slideRoleDescription = testimonialSliderDefaults.slideRoleDescription, positionLabel, }) {
     const titleId = useId();
     const [band, revealed] = useReveal();
-    const { rotating, root, region, track, item, away, dots } = useRotation(quotes.length, autoplay);
+    const { rotating, root, region, track, item, away, dots } = useRotation(quotes.length, autoplay, { roleDescription, slideRoleDescription, positionLabel });
     // Nothing to show is nothing drawn: a named region with no quote in it leads nowhere.
     if (quotes.length === 0)
         return null;

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

@@ -20,6 +20,12 @@ export interface TestimonialSliderOwnProps {
     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;
+    /** What a screen reader calls the set while it rotates — announced in place of a region, as the word for this kind of thing. Translate it with the page: it is read out as given, so an untranslated one announces an English word on every page in every language. */
+    roleDescription?: string;
+    /** What a screen reader calls each item while the set rotates, for the reason roleDescription exists. Translate it with the page. */
+    slideRoleDescription?: string;
+    /** The accessible name of each item while the set rotates, given its place in the set counting from one — so a reader hears where they are. Without it each is named "2 of 5"; pass it to translate that with the page, in that language's own order and digits. */
+    positionLabel?: (position: number, count: number) => string;
 }
 export type TestimonialSliderProps = TestimonialSliderOwnProps;
 /** The class each part carries. Apply these — do not retype them. */
@@ -46,4 +52,6 @@ export declare const testimonialSliderDefaults: {
     readonly autoplay: false;
     readonly controlsLabel: "Testimonials";
     readonly slideLabel: "Slide";
+    readonly roleDescription: "carousel";
+    readonly slideRoleDescription: "slide";
 };

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

@@ -18,4 +18,4 @@ export const testimonialSliderParts = {
     controls: 'dds-testimonialslider__controls',
 };
 /** Generated so defaults cannot drift from the contract. */
-export const testimonialSliderDefaults = { ground: 'page', autoplay: false, controlsLabel: 'Testimonials', slideLabel: 'Slide' };
+export const testimonialSliderDefaults = { ground: 'page', autoplay: false, controlsLabel: 'Testimonials', slideLabel: 'Slide', roleDescription: 'carousel', slideRoleDescription: 'slide' };

package/dist/components/blocks/text-scroll/TextScroll.css

@@ -0,0 +1,53 @@
+/* GENERATED from textscroll.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-textscroll {
+  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-textscroll .dds-textscroll__inner {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  min-inline-size: 0;
+  max-inline-size: var(--size-content-max);
+  padding-block: var(--space-section-default);
+  padding-inline: var(--space-inset-page);
+}
+
+:where([data-dds-context="marketing"]) .dds-textscroll .dds-textscroll__text {
+  margin-block: 0;
+  text-wrap: pretty;
+  font-family: var(--font-h4-family);
+  font-size: var(--font-h4-size);
+  font-weight: var(--font-h4-weight);
+  letter-spacing: var(--font-h4-letter-spacing);
+  line-height: var(--font-h4-line-height);
+  max-inline-size: var(--size-measure-hero-heading);
+}
+
+:where([data-dds-context="marketing"]) .dds-textscroll .dds-textscroll__word {
+  display: inline;
+}
+
+:where([data-dds-context="marketing"]) .dds-textscroll[data-ground="page"] {
+  background-color: var(--color-bg-page);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-textscroll[data-ground="strong"] {
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-textscroll[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/text-scroll/TextScroll.d.ts

@@ -0,0 +1,5 @@
+import './TextScroll.css';
+import './text-scroll-impl.css';
+import { type TextScrollProps } from './TextScroll.types.js';
+export type { TextScrollProps };
+export declare function TextScroll({ ground, text }: TextScrollProps): import("react").JSX.Element | null;

package/dist/components/blocks/text-scroll/TextScroll.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import './TextScroll.css';
+import './text-scroll-impl.css';
+import { textScrollDefaults, textScrollParts } from './TextScroll.types.js';
+const SPACE = /^\s+$/u;
+/**
+ * The sentence in words and the spaces between them, every character kept.
+ *
+ * By the language's own word boundaries rather than by spaces. Chinese, Japanese and Thai write
+ * none between words, so a split on whitespace handed the whole paragraph back as one word and it
+ * brightened all at once. `Intl.Segmenter` knows where their words end, in the browser and on the
+ * server alike.
+ *
+ * The spaces are kept as written rather than rebuilt as one ordinary space: French sets a narrow
+ * no-break space before `?` and `%`, and turning it into a breaking one let the line wrap before
+ * the punctuation it exists to hold on to. Punctuation rides with the word beside it, so a full
+ * stop brightens with its word instead of standing lit on its own.
+ */
+function piecesOf(text) {
+    const runs = typeof Intl !== 'undefined' && 'Segmenter' in Intl
+        ? Array.from(new Intl.Segmenter(undefined, { granularity: 'word' }).segment(text), (each) => ({
+            text: each.segment,
+            wordLike: each.isWordLike === true,
+        }))
+        : text.split(/(\s+)/u).map((run) => ({ text: run, wordLike: !SPACE.test(run) }));
+    const pieces = [];
+    // The word being built, and whether it holds a word yet or only punctuation leading into one.
+    let open = null;
+    const close = () => {
+        if (open !== null)
+            pieces.push({ word: true, text: open.text });
+        open = null;
+    };
+    for (const run of runs) {
+        if (run.text === '')
+            continue;
+        if (SPACE.test(run.text)) {
+            close();
+            pieces.push({ word: false, text: run.text });
+        }
+        else if (run.wordLike && open?.holdsWord) {
+            // Two words with nothing between them — the ordinary case in a script that writes no spaces.
+            close();
+            open = { text: run.text, holdsWord: true };
+        }
+        else if (open === null) {
+            open = { text: run.text, holdsWord: run.wordLike };
+        }
+        else {
+            open = { text: open.text + run.text, holdsWord: open.holdsWord || run.wordLike };
+        }
+    }
+    close();
+    return pieces;
+}
+export function TextScroll({ ground = textScrollDefaults.ground, text }) {
+    const pieces = piecesOf(text.trim());
+    const count = pieces.filter((piece) => piece.word).length;
+    // Nothing to say is nothing drawn: an empty band between two sections is a gap, not a pause.
+    if (count === 0)
+        return null;
+    let at = -1;
+    return (_jsx("section", { className: textScrollParts.root, "data-ground": ground, children: _jsx("div", { className: textScrollParts.inner, children: _jsx("p", { className: textScrollParts.text, style: { '--dds-textscroll-words': count }, children: pieces.map((piece, index) => {
+                    // A piece's place is its identity: the sentence is the page's, and nothing reorders it.
+                    if (!piece.word)
+                        return _jsx(Fragment, { children: piece.text }, index);
+                    at += 1;
+                    return (_jsx("span", { className: textScrollParts.word, style: { '--dds-textscroll-at': at }, children: piece.text }, index));
+                }) }) }) }));
+}

package/dist/components/blocks/text-scroll/TextScroll.types.d.ts

@@ -0,0 +1,22 @@
+export interface TextScrollOwnProps {
+    /**
+     * `page` — The default, and the page's own white. A statement between two sections that need nothing to separate them
+     * `subtle` — The grey band, for a statement that should read as a section of its own without changing the page's voice. 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 the statement a page is built around — the mission on an About page. The words turn white and dim toward the band
+     */
+    ground?: 'page' | 'subtle' | 'strong';
+    /** Always. The statement, as plain text — one sentence or two short ones, under about three hundred characters. Split into words on its whitespace, so a run of spaces or a line break is one space in what is drawn. Written so it reads well a word at a time, because that is how the reveal delivers it: "We believe trading should be accessible to everyone, everywhere, with the tools and the trust to do it well." */
+    text: string;
+}
+export type TextScrollProps = TextScrollOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const textScrollParts: {
+    readonly root: "dds-textscroll";
+    readonly inner: "dds-textscroll__inner";
+    readonly text: "dds-textscroll__text";
+    readonly word: "dds-textscroll__word";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const textScrollDefaults: {
+    readonly ground: "page";
+};

package/dist/components/blocks/text-scroll/TextScroll.types.js

@@ -0,0 +1,10 @@
+// GENERATED from text-scroll.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const textScrollParts = {
+    root: 'dds-textscroll',
+    inner: 'dds-textscroll__inner',
+    text: 'dds-textscroll__text',
+    word: 'dds-textscroll__word',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const textScrollDefaults = { ground: 'page' };