@deriv-com/dds-marketing 0.2.0 → 1.0.0

package/dist/components/blocks/logo-columns/LogoColumns.css

@@ -0,0 +1,161 @@
+/* GENERATED from logocolumns.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-logocolumns {
+  box-sizing: border-box;
+  container-type: inline-size;
+  display: flex;
+  inline-size: 100%;
+  justify-content: center;
+  overflow: clip;
+}
+
+:where([data-dds-context="marketing"]) .dds-logocolumns .dds-logocolumns__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-logocolumns .dds-logocolumns__split {
+  align-items: stretch;
+  display: flex;
+  min-inline-size: 0;
+  column-gap: var(--space-gap-3xl);
+  row-gap: var(--space-gap-2xl);
+}
+
+:where([data-dds-context="marketing"]) .dds-logocolumns .dds-logocolumns__content {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  row-gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-logocolumns .dds-logocolumns__title {
+  margin-block: 0;
+  text-wrap: balance;
+  font-family: var(--font-h2-family);
+  font-size: var(--font-h2-size);
+  font-weight: var(--font-h2-weight);
+  letter-spacing: var(--font-h2-letter-spacing);
+  line-height: var(--font-h2-line-height);
+  margin-block-end: var(--space-heading-title-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-logocolumns .dds-logocolumns__description {
+  margin-block: 0;
+  font-family: var(--font-body-md-family);
+  font-size: var(--font-body-md-size);
+  font-weight: var(--font-body-md-weight);
+  letter-spacing: var(--font-body-md-letter-spacing);
+  line-height: var(--font-body-md-line-height);
+  margin-block-end: var(--space-heading-description-actions);
+  max-inline-size: var(--size-measure-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-logocolumns .dds-logocolumns__disclaimer {
+  margin-block: 0;
+  font-family: var(--font-body-sm-family);
+  font-size: var(--font-body-sm-size);
+  font-weight: var(--font-body-sm-weight);
+  letter-spacing: var(--font-body-sm-letter-spacing);
+  line-height: var(--font-body-sm-line-height);
+  margin-block-end: var(--space-heading-description-actions);
+  max-inline-size: var(--size-measure-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-logocolumns .dds-logocolumns__link {
+  display: flex;
+  margin-block-start: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-logocolumns .dds-logocolumns__media {
+  display: flex;
+  min-inline-size: 0;
+  overflow: clip;
+  position: relative;
+  block-size: var(--size-logo-columns-height);
+  column-gap: var(--space-grid-gutter);
+}
+
+:where([data-dds-context="marketing"]) .dds-logocolumns .dds-logocolumns__column {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin: 0;
+  min-inline-size: 0;
+  padding: 0;
+  row-gap: var(--space-grid-gutter);
+}
+
+:where([data-dds-context="marketing"]) .dds-logocolumns .dds-logocolumns__logo {
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  aspect-ratio: var(--aspect-landscape);
+  border-radius: var(--radius-container-item);
+  padding-block: var(--space-inset-md);
+  padding-inline: var(--space-inset-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-logocolumns .dds-logocolumns__logo-image {
+  block-size: 100%;
+  display: block;
+  inline-size: 100%;
+  object-fit: contain;
+  border-radius: var(--radius-control-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-logocolumns[data-media-position="end"] .dds-logocolumns__split {
+  flex-direction: row;
+}
+
+:where([data-dds-context="marketing"]) .dds-logocolumns[data-media-position="start"] .dds-logocolumns__split {
+  flex-direction: row-reverse;
+}
+
+:where([data-dds-context="marketing"]) .dds-logocolumns[data-ground="page"] {
+  background-color: var(--color-bg-page);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-logocolumns[data-ground="page"] .dds-logocolumns__disclaimer {
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"]) .dds-logocolumns[data-ground="page"] .dds-logocolumns__logo {
+  background-color: var(--color-bg-surface);
+}
+
+:where([data-dds-context="marketing"]) .dds-logocolumns[data-ground="strong"] {
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-logocolumns[data-ground="strong"] .dds-logocolumns__disclaimer {
+  color: var(--color-fg-muted-inverse);
+}
+
+:where([data-dds-context="marketing"]) .dds-logocolumns[data-ground="strong"] .dds-logocolumns__logo {
+  background-color: var(--color-bg-surface-card-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-logocolumns[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-logocolumns[data-ground="subtle"] .dds-logocolumns__disclaimer {
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"]) .dds-logocolumns[data-ground="subtle"] .dds-logocolumns__logo {
+  background-color: var(--color-bg-surface-card-raised);
+}
+

package/dist/components/blocks/logo-columns/LogoColumns.d.ts

@@ -0,0 +1,23 @@
+import './LogoColumns.css';
+import './logo-columns-impl.css';
+import '../block-reveal.css';
+import { type LogoColumnsProps } from './LogoColumns.types.js';
+export type { LogoColumnsProps };
+/**
+ * A claim beside a wall of logos — the reference site's LogoMarquee, as FeatureSplit with the
+ * picture replaced by the names that back the words.
+ *
+ * Nothing here moves on its own. The two columns are moved by the stylesheet, on a view timeline
+ * the wall carries, so they run with the reader's scroll — the first rising, the second falling —
+ * and stand still the moment the page does, and for a reader who asked for less motion. The
+ * reference drives the same effect from scroll velocity in a frame loop; a scroll timeline is the
+ * platform doing that, with no script running per frame.
+ *
+ * The logos are dealt into the two columns in order, alternately, so a page orders one list rather
+ * than splitting it. Each column is a list of the logos it was dealt, drawn `SETS` times over; only
+ * the first set is announced, so a screen reader hears each name once.
+ *
+ * The steps inside the column of words follow FeatureSplit's: each part's own `margin-block-end`.
+ * The title carries the section's accessible name through `aria-labelledby`.
+ */
+export declare function LogoColumns({ ground, mediaPosition, title, description, disclaimer, link, logos, }: LogoColumnsProps): import("react").JSX.Element | null;

package/dist/components/blocks/logo-columns/LogoColumns.js

@@ -0,0 +1,46 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import './LogoColumns.css';
+import './logo-columns-impl.css';
+import '../block-reveal.css';
+import { arriving, useReveal } from '../use-reveal.js';
+import { given } from '../../given.js';
+import { logoColumnsDefaults, logoColumnsParts, } from './LogoColumns.types.js';
+/**
+ * How many times each column is drawn. The columns move by one set across the wall's pass, so the
+ * end of the movement shows what the start did; three sets keep a column running on past both
+ * edges at every point of it, even for a short column.
+ */
+const SETS = 3;
+/**
+ * A claim beside a wall of logos — the reference site's LogoMarquee, as FeatureSplit with the
+ * picture replaced by the names that back the words.
+ *
+ * Nothing here moves on its own. The two columns are moved by the stylesheet, on a view timeline
+ * the wall carries, so they run with the reader's scroll — the first rising, the second falling —
+ * and stand still the moment the page does, and for a reader who asked for less motion. The
+ * reference drives the same effect from scroll velocity in a frame loop; a scroll timeline is the
+ * platform doing that, with no script running per frame.
+ *
+ * The logos are dealt into the two columns in order, alternately, so a page orders one list rather
+ * than splitting it. Each column is a list of the logos it was dealt, drawn `SETS` times over; only
+ * the first set is announced, so a screen reader hears each name once.
+ *
+ * The steps inside the column of words follow FeatureSplit's: each part's own `margin-block-end`.
+ * The title carries the section's accessible name through `aria-labelledby`.
+ */
+export function LogoColumns({ ground = logoColumnsDefaults.ground, mediaPosition = logoColumnsDefaults.mediaPosition, title, description, disclaimer, link, logos, }) {
+    const titleId = useId();
+    const [band, revealed] = useReveal();
+    // Nothing to show is nothing drawn: a wall with no logo on it is a claim with no evidence.
+    if (logos.length === 0)
+        return null;
+    const columns = [
+        logos.filter((_, at) => at % 2 === 0),
+        logos.filter((_, at) => at % 2 === 1),
+    ];
+    return (_jsx("section", { className: logoColumnsParts.root, "data-ground": ground, "data-media-position": mediaPosition, "aria-labelledby": titleId, children: _jsx("div", { className: logoColumnsParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: logoColumnsParts.split, children: [_jsxs("div", { className: logoColumnsParts.content, children: [_jsx("h2", { className: logoColumnsParts.title, ...arriving(0), id: titleId, children: title }), given(description) ? (_jsx("p", { className: logoColumnsParts.description, ...arriving(1), children: description })) : null, disclaimer !== undefined && given(disclaimer) ? (_jsx("p", { className: logoColumnsParts.disclaimer, ...arriving(1), children: disclaimer })) : null, link ? (_jsx("div", { className: logoColumnsParts.link, ...arriving(2), children: link })) : null] }), _jsx("div", { className: logoColumnsParts.media, ...arriving(3), children: columns.map((column, at) => column.length === 0 ? null : (_jsx("ul", { className: logoColumnsParts.column, "data-column": at === 0 ? 'rising' : 'falling', children: Array.from({ length: SETS }, (_, set) => column.map((logo, index) => (
+                            // A logo's place is its identity: the list is the page's, and nothing reorders it.
+                            _jsx("li", { className: logoColumnsParts.logo, "aria-hidden": set === 0 ? undefined : 'true', children: _jsx("img", { className: logoColumnsParts['logo-image'], src: logo.src, alt: logo.name, draggable: false }) }, `${set}-${index}`)))) }, at))) })] }) }) }));
+}

package/dist/components/blocks/logo-columns/LogoColumns.types.d.ts

@@ -0,0 +1,46 @@
+import type { ReactNode } from 'react';
+import type { LogoTile } from '../../logo-data.js';
+export interface LogoColumnsOwnProps {
+    /**
+     * `page` — The page's own white, with tiles at the recessed gray. For full-colour logos drawn for a light ground
+     * `subtle` — The grey band, with white tiles on it. For full-colour logos, where the section needs setting apart from the ones around it. Painted as the band's tint over the page's own ground, so it is the same grey whatever is behind the section
+     * `strong` — The default. `color.bg.brand-strong`, the dark band, with white words and tiles at color.bg.surface-card-strong — gray.900 in both themes, so the wall is a set of tiles a step lighter than the band. The ground white wordmarks are drawn for
+     */
+    ground?: 'page' | 'subtle' | 'strong';
+    /**
+     * `start` — The default, the reference design's: the wall at the start, the claim beside it at the end
+     * `end` — The second of two on a page, or after a FeatureSplit whose picture is at the start, so the two do not read as one column
+     */
+    mediaPosition?: 'start' | 'end';
+    /** Always. The one claim the logos back, in the fewest words that say it — "Trusted by leading platforms worldwide". */
+    title: string;
+    /** The line under the heading: what the logos mean for the reader — which payment methods they can use, which platforms they can trade on. */
+    description?: string;
+    /** Small print the claim needs — "*Availability varies by region." Under the description, quieter than it. */
+    disclaimer?: string;
+    /** The way onward — a standalone Link, "View all partners", usually. Under the words, never on the wall: the tiles move. */
+    link?: ReactNode;
+    /** Always. The logos, in the order the wall deals them into its two columns — the first to the first column, the second to the second, and so on. Eight or more, so each column runs on past both edges. Each name is what a screen reader hears for its logo. */
+    logos: LogoTile[];
+}
+export type LogoColumnsProps = LogoColumnsOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const logoColumnsParts: {
+    readonly root: "dds-logocolumns";
+    readonly inner: "dds-logocolumns__inner";
+    readonly split: "dds-logocolumns__split";
+    readonly content: "dds-logocolumns__content";
+    readonly title: "dds-logocolumns__title";
+    readonly description: "dds-logocolumns__description";
+    readonly disclaimer: "dds-logocolumns__disclaimer";
+    readonly link: "dds-logocolumns__link";
+    readonly media: "dds-logocolumns__media";
+    readonly column: "dds-logocolumns__column";
+    readonly logo: "dds-logocolumns__logo";
+    readonly 'logo-image': "dds-logocolumns__logo-image";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const logoColumnsDefaults: {
+    readonly ground: "strong";
+    readonly mediaPosition: "start";
+};

package/dist/components/blocks/logo-columns/LogoColumns.types.js

@@ -0,0 +1,18 @@
+// GENERATED from logo-columns.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const logoColumnsParts = {
+    root: 'dds-logocolumns',
+    inner: 'dds-logocolumns__inner',
+    split: 'dds-logocolumns__split',
+    content: 'dds-logocolumns__content',
+    title: 'dds-logocolumns__title',
+    description: 'dds-logocolumns__description',
+    disclaimer: 'dds-logocolumns__disclaimer',
+    link: 'dds-logocolumns__link',
+    media: 'dds-logocolumns__media',
+    column: 'dds-logocolumns__column',
+    logo: 'dds-logocolumns__logo',
+    'logo-image': 'dds-logocolumns__logo-image',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const logoColumnsDefaults = { ground: 'strong', mediaPosition: 'start' };

package/dist/components/blocks/logo-columns/logo-columns-impl.css

@@ -0,0 +1,188 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * `:where([data-dds-context="marketing"])` confines these rules without contributing specificity,
+ * so each is decided against the generated rule on its own terms.
+ */
+
+/*
+ * The last of the words carries no step under it — FeatureSplit's rule and its reason: the steps
+ * sit on each part's own `margin-block-end`, so whichever part ends the column would otherwise be
+ * measured against nothing.
+ */
+:where([data-dds-context="marketing"]) .dds-logocolumns .dds-logocolumns__title:last-child,
+:where([data-dds-context="marketing"]) .dds-logocolumns .dds-logocolumns__description:last-child,
+:where([data-dds-context="marketing"]) .dds-logocolumns .dds-logocolumns__disclaimer:last-child {
+  margin-block-end: 0;
+}
+
+/* The disclaimer sits close under the description it qualifies, not a full step away. */
+:where([data-dds-context="marketing"]) .dds-logocolumns .dds-logocolumns__description:has(+ .dds-logocolumns__disclaimer) {
+  margin-block-end: var(--space-heading-title-description);
+}
+
+/*
+ * One column below the fold, and the words lead it — FeatureSplit's fold, written with the
+ * `data-media-position` attribute so it carries the weight of the generated rules keyed on it.
+ */
+@container (max-width: 47.9375rem) {
+  :where([data-dds-context="marketing"])
+    .dds-logocolumns[data-media-position]
+    .dds-logocolumns__split {
+    flex-direction: column;
+  }
+
+}
+
+/* At full width the claim takes a measure and the wall takes the rest, FeatureSplit's shares. */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-logocolumns .dds-logocolumns__split {
+    align-items: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-logocolumns .dds-logocolumns__content {
+    flex: 0 0 45%;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-logocolumns .dds-logocolumns__media {
+    flex: 1 1 0;
+  }
+}
+
+/*
+ * The wall's edges fade out rather than cut.
+ *
+ * A mask rather than a gradient painted over the tiles: a painted fade has to be the ground's own
+ * colour to disappear into it, and would need restating for every ground and theme. A mask takes
+ * the tiles to transparent, so whatever is behind the wall shows through on any ground.
+ *
+ * A tenth of the wall at each edge, and eased: the mask's opacity follows a smoothstep curve across
+ * the fade rather than a straight line, which is what made the first one read as a hard band — a
+ * linear fade has its sharpest change at both of its ends. The stops are the curve sampled; a
+ * gradient between two stops is still linear, so the curve is in how many there are.
+ *
+ * Most of the fade only dims: the tiles fall to two fifths over the inner four fifths of it, eased,
+ * and only the last fifth at the very edge takes them on to nothing. The wall reads as running on
+ * behind the fade rather than dissolving into it, and still ends in no line — a fade that stopped
+ * at two fifths left the tiles cut off at the wall's edge in a straight one. Each is black
+ * mixed toward transparent rather than a colour value: a mask reads only the alpha, and the two
+ * keywords say so without a raw colour in a component's stylesheet.
+ */
+:where([data-dds-context="marketing"]) .dds-logocolumns .dds-logocolumns__media {
+  --dds-logocolumns-fade: calc(var(--size-logo-columns-height) * 0.1);
+  mask-image: linear-gradient(
+    to bottom,
+    transparent calc(var(--dds-logocolumns-fade) * 0),
+    color-mix(in srgb, black 40.0%, transparent) calc(var(--dds-logocolumns-fade) * 0.2),
+    color-mix(in srgb, black 46.2%, transparent) calc(var(--dds-logocolumns-fade) * 0.36),
+    color-mix(in srgb, black 61.1%, transparent) calc(var(--dds-logocolumns-fade) * 0.52),
+    color-mix(in srgb, black 78.9%, transparent) calc(var(--dds-logocolumns-fade) * 0.68),
+    color-mix(in srgb, black 93.8%, transparent) calc(var(--dds-logocolumns-fade) * 0.84),
+    black calc(var(--dds-logocolumns-fade) * 1.0),
+    black calc(100% - var(--dds-logocolumns-fade) * 1.0),
+    color-mix(in srgb, black 93.8%, transparent) calc(100% - var(--dds-logocolumns-fade) * 0.84),
+    color-mix(in srgb, black 78.9%, transparent) calc(100% - var(--dds-logocolumns-fade) * 0.68),
+    color-mix(in srgb, black 61.1%, transparent) calc(100% - var(--dds-logocolumns-fade) * 0.52),
+    color-mix(in srgb, black 46.2%, transparent) calc(100% - var(--dds-logocolumns-fade) * 0.36),
+    color-mix(in srgb, black 40.0%, transparent) calc(100% - var(--dds-logocolumns-fade) * 0.2),
+    transparent calc(100% - var(--dds-logocolumns-fade) * 0)
+  );
+}
+
+@container (max-width: 47.9375rem) {
+  :where([data-dds-context="marketing"]) .dds-logocolumns .dds-logocolumns__media {
+    --dds-logocolumns-fade: calc(var(--size-logo-columns-height) * 0.05);
+  }
+}
+
+/*
+ * The wall runs to the section's own edges, top and bottom.
+ *
+ * It is drawn taller than its token by the section step at each end, and pulled back by the same
+ * distance into the band's padding: the section keeps its height and the words beside the wall
+ * keep their air, while the tiles run on to the band's edge and fade out there rather than stopping
+ * a step short of it — which left a band of empty ground under a fade that had already ended.
+ */
+:where([data-dds-context="marketing"]) .dds-logocolumns .dds-logocolumns__media {
+  block-size: calc(var(--size-logo-columns-height) + 2 * var(--space-section-default));
+  margin-block: calc(-1 * var(--space-section-default));
+}
+
+/* Half the wall on a phone: a screen of tiles under the words would be a screen the reader
+   scrolls past to find out the section is over. */
+@container (max-width: 47.9375rem) {
+  /* Only the foot runs to the band's edge on a phone. The top edge sits under the words rather
+     than at the band's edge, and pulled up it would fade into the link. */
+  :where([data-dds-context="marketing"]) .dds-logocolumns .dds-logocolumns__media {
+    block-size: calc(var(--size-logo-columns-height) * 0.5 + var(--space-section-default));
+    margin-block-start: 0;
+  }
+}
+
+/*
+ * Two columns sharing the wall, each as tall as its tiles. `align-self: flex-start` is what lets a
+ * column be taller than the wall: stretched, it would be held to the wall's height and have nothing
+ * to travel through.
+ */
+:where([data-dds-context="marketing"]) .dds-logocolumns .dds-logocolumns__column {
+  align-self: flex-start;
+  flex: 1 1 0;
+}
+
+/*
+ * The columns run with the scroll, in opposite directions.
+ *
+ * A view timeline on the wall measures its pass through the viewport, and each column travels one
+ * set — a third of its own height with the gap after its last tile counted in, the column being
+ * three sets — across that pass: the first rising, the second falling. One set is the distance at
+ * which the column shows exactly what it did at the start, so nothing jumps at either end. Scroll-
+ * driven, so it moves as the reader scrolls and back again as they scroll back, and stands still
+ * while the page does.
+ *
+ * The timeline measures against the nearest scroll container, which is why the section and the
+ * wall clip with `overflow: clip` rather than `hidden`: `hidden` makes a box a scroll container
+ * even when it never scrolls, and the columns would then sit still however far the page moved.
+ * A browser with no scroll timeline draws the columns still, which is the whole of the fallback.
+ */
+@keyframes dds-logocolumns-rise {
+  from {
+    translate: none;
+  }
+  to {
+    translate: 0 calc(-1 * (100% + var(--space-grid-gutter)) / 3);
+  }
+}
+
+@keyframes dds-logocolumns-fall {
+  from {
+    translate: 0 calc(-1 * (100% + var(--space-grid-gutter)) / 3);
+  }
+  to {
+    translate: none;
+  }
+}
+
+@supports (animation-timeline: view()) {
+  :where([data-dds-context="marketing"]) .dds-logocolumns .dds-logocolumns__media {
+    view-timeline: --dds-logocolumns-wall block;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-logocolumns .dds-logocolumns__column[data-column='rising'] {
+    animation: dds-logocolumns-rise linear both;
+    animation-range: cover;
+    animation-timeline: --dds-logocolumns-wall;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-logocolumns .dds-logocolumns__column[data-column='falling'] {
+    animation: dds-logocolumns-fall linear both;
+    animation-range: cover;
+    animation-timeline: --dds-logocolumns-wall;
+  }
+}
+
+/* A reader who asked for less movement gets none of it: the columns stand still. */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-logocolumns .dds-logocolumns__column {
+    animation: none;
+  }
+}

package/dist/components/blocks/logo-rows/LogoRows.css

@@ -0,0 +1,122 @@
+/* GENERATED from logorows.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-logorows {
+  box-sizing: border-box;
+  container-type: inline-size;
+  display: flex;
+  inline-size: 100%;
+  justify-content: center;
+  overflow: clip;
+}
+
+:where([data-dds-context="marketing"]) .dds-logorows .dds-logorows__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-logorows .dds-logorows__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-logorows .dds-logorows__title {
+  margin-block: 0;
+  text-wrap: balance;
+  font-family: var(--font-h2-family);
+  font-size: var(--font-h2-size);
+  font-weight: var(--font-h2-weight);
+  letter-spacing: var(--font-h2-letter-spacing);
+  line-height: var(--font-h2-line-height);
+  margin-block-end: var(--space-heading-title-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-logorows .dds-logorows__description {
+  margin-block: 0;
+  font-family: var(--font-body-md-family);
+  font-size: var(--font-body-md-size);
+  font-weight: var(--font-body-md-weight);
+  letter-spacing: var(--font-body-md-letter-spacing);
+  line-height: var(--font-body-md-line-height);
+  max-inline-size: var(--size-measure-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-logorows .dds-logorows__link {
+  display: flex;
+  margin-block-start: var(--space-heading-description-actions);
+}
+
+:where([data-dds-context="marketing"]) .dds-logorows .dds-logorows__rail {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  overflow: clip;
+  row-gap: var(--space-grid-gutter);
+}
+
+:where([data-dds-context="marketing"]) .dds-logorows .dds-logorows__track {
+  display: flex;
+  flex: none;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  column-gap: var(--space-grid-gutter);
+}
+
+:where([data-dds-context="marketing"]) .dds-logorows .dds-logorows__logo {
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  aspect-ratio: var(--aspect-landscape);
+  border-radius: var(--radius-container-item);
+  inline-size: var(--size-logo-rows-tile);
+  padding-block: var(--space-inset-md);
+  padding-inline: var(--space-inset-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-logorows .dds-logorows__logo-image {
+  block-size: 100%;
+  display: block;
+  inline-size: 100%;
+  object-fit: contain;
+  border-radius: var(--radius-control-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-logorows[data-ground="page"] {
+  background-color: var(--color-bg-page);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-logorows[data-ground="page"] .dds-logorows__logo {
+  background-color: var(--color-bg-surface);
+}
+
+:where([data-dds-context="marketing"]) .dds-logorows[data-ground="strong"] {
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-logorows[data-ground="strong"] .dds-logorows__logo {
+  background-color: var(--color-bg-surface-card-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-logorows[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-logorows[data-ground="subtle"] .dds-logorows__logo {
+  background-color: var(--color-bg-surface-card-raised);
+}
+

package/dist/components/blocks/logo-rows/LogoRows.d.ts

@@ -0,0 +1,20 @@
+import './LogoRows.css';
+import './logo-rows-impl.css';
+import '../block-reveal.css';
+import { type LogoRowsProps } from './LogoRows.types.js';
+export type { LogoRowsProps };
+/**
+ * A claim over two rows of logos — LogoColumns stacked: the words centred on top, the logos in
+ * two rows across the band's full width under them.
+ *
+ * Nothing here moves on its own. The stylesheet slides the rows sideways on a view timeline the
+ * rail carries — the first toward the start, the second toward the end — so they run with the
+ * reader's scroll and stand still the moment the page does, and for a reader who asked for less
+ * motion.
+ *
+ * The logos are dealt into the two rows in order, alternately, so a page orders one list rather
+ * than splitting it. Each row is a list of the logos it was dealt, drawn `SETS` times over; only
+ * the first set is announced, so a screen reader hears each name once. The title carries the
+ * section's accessible name through `aria-labelledby`.
+ */
+export declare function LogoRows({ ground, title, description, link, logos, }: LogoRowsProps): import("react").JSX.Element | null;

package/dist/components/blocks/logo-rows/LogoRows.js

@@ -0,0 +1,43 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import './LogoRows.css';
+import './logo-rows-impl.css';
+import '../block-reveal.css';
+import { arriving, useReveal } from '../use-reveal.js';
+import { given } from '../../given.js';
+import { logoRowsDefaults, logoRowsParts, } from './LogoRows.types.js';
+/**
+ * How many times each row is drawn. A row moves by one set across the rail's pass, so the end of
+ * the movement shows what the start did; four sets keep it running on past both ends of a wide
+ * screen at every point of it. The stylesheet's travel — a quarter of the row — is written for four.
+ */
+const SETS = 4;
+/**
+ * A claim over two rows of logos — LogoColumns stacked: the words centred on top, the logos in
+ * two rows across the band's full width under them.
+ *
+ * Nothing here moves on its own. The stylesheet slides the rows sideways on a view timeline the
+ * rail carries — the first toward the start, the second toward the end — so they run with the
+ * reader's scroll and stand still the moment the page does, and for a reader who asked for less
+ * motion.
+ *
+ * The logos are dealt into the two rows in order, alternately, so a page orders one list rather
+ * than splitting it. Each row is a list of the logos it was dealt, drawn `SETS` times over; only
+ * the first set is announced, so a screen reader hears each name once. The title carries the
+ * section's accessible name through `aria-labelledby`.
+ */
+export function LogoRows({ ground = logoRowsDefaults.ground, title, description, link, logos, }) {
+    const titleId = useId();
+    const [band, revealed] = useReveal();
+    // Nothing to show is nothing drawn: a row with no logo on it is a claim with no evidence.
+    if (logos.length === 0)
+        return null;
+    const rows = [
+        logos.filter((_, at) => at % 2 === 0),
+        logos.filter((_, at) => at % 2 === 1),
+    ];
+    return (_jsx("section", { className: logoRowsParts.root, "data-ground": ground, "aria-labelledby": titleId, children: _jsxs("div", { className: logoRowsParts.inner, ref: band, "data-revealed": revealed, children: [_jsxs("div", { className: logoRowsParts.header, children: [_jsx("h2", { className: logoRowsParts.title, id: titleId, ...arriving(0), children: title }), given(description) ? (_jsx("p", { className: logoRowsParts.description, ...arriving(1), children: description })) : null, link ? (_jsx("div", { className: logoRowsParts.link, ...arriving(2), children: link })) : null] }), _jsx("div", { className: logoRowsParts.rail, ...arriving(3), children: rows.map((row, at) => row.length === 0 ? null : (_jsx("ul", { className: logoRowsParts.track, "data-row": at === 0 ? 'leading' : 'trailing', children: Array.from({ length: SETS }, (_, set) => row.map((logo, index) => (
+                        // A logo's place is its identity: the list is the page's, and nothing reorders it.
+                        _jsx("li", { className: logoRowsParts.logo, "aria-hidden": set === 0 ? undefined : 'true', children: _jsx("img", { className: logoRowsParts['logo-image'], src: logo.src, alt: logo.name, draggable: false }) }, `${set}-${index}`)))) }, at))) })] }) }));
+}