@deriv-com/dds-marketing 0.2.0 → 1.0.1

package/dist/components/blocks/landing-hero/landing-hero-impl.css

@@ -0,0 +1,355 @@
+/*
+ * 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. Rules that have to win are
+ * written a class deeper than they look, which is what footer-impl.css does and for the same
+ * reason: weight rather than which sheet the bundler happened to write last.
+ */
+
+/*
+ * The photograph, drawn the one way a band wants it.
+ *
+ * The page passes which image; how it is fitted is this component's decision and belongs here
+ * rather than in the inline style, where a page could not see it and a reader of the markup would
+ * think the four properties were the page's choice. `cover` because a hero is a band of fixed
+ * height and a photograph that letterboxed would show the ground through it.
+ */
+:where([data-dds-context="marketing"]) .dds-landinghero {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+/*
+ * A title with nothing under it carries no step under it.
+ *
+ * The steps inside the text block sit on each part's own `margin-block-end`, because eyebrow-to-
+ * title and title-to-description are two roles that agree at full width and part company on a
+ * phone. The cost of that arrangement is a trailing margin: with `description` absent the title is
+ * the last child and its step is measured against nothing, which adds sixteen pixels to the step
+ * `content` already sets between the text and the actions.
+ *
+ * `:last-child` is the condition itself rather than a prop standing in for it — the description is
+ * one of two parts that can follow the title, and asking the DOM which is last is the question with
+ * one answer.
+ */
+:where([data-dds-context="marketing"]) .dds-landinghero .dds-landinghero__title:last-child {
+  margin-block-end: 0;
+}
+
+/*
+ * The band is at least a screen tall.
+ *
+ * `100cqh` rather than `100svh`, and the two are the same number on a real page: with no ancestor
+ * declaring size containment, a container query length falls back to the small viewport, which is
+ * the unit this wants and the reason it is not `vh` — on a phone the large viewport is measured
+ * with the browser chrome retracted, so a hero sized to it puts its own actions under the address
+ * bar until the reader scrolls, which is the one thing the band exists to prevent.
+ *
+ * What the container unit adds is an answer for a frame standing in for a window. The preview
+ * shows a band inside a panel a fraction of the screen's height; sized against the viewport it
+ * escaped that panel and covered the controls under it. A frame that declares `container-type:
+ * size` is now what this measures against, which is the same arrangement the preview already uses
+ * for a component pinned to the window — the component is right about what it wants, and the frame
+ * is what has to behave like a window.
+ *
+ * `min-block-size` rather than `block-size`, so a band whose copy runs long grows instead of
+ * clipping it. A fixed height was the source design's and it loses the description at a large text
+ * size.
+ */
+:where([data-dds-context="marketing"]) .dds-landinghero {
+  /*
+   * Where the content sits is `inner`'s to say, not this element's.
+   *
+   * The band declares `container-type`, and a container query cannot reach the element that
+   * declares it — a rule on the band inside one is measured against the band's own ancestor, which
+   * on a page is nothing at all. Written here, the phone's arrangement held at every width and the
+   * claim ran off the foot of a desktop band. `inner` is a descendant, so a query reaches it, and
+   * the band simply lets it fill the height.
+   *
+   * On a phone the claim sits at the foot of the band, not in the middle of it.
+   *
+   * There the subject fills the band behind the words, and text centred against it reads as
+   * floating in front of a picture. At the base the words read as standing on the same ground —
+   * subject above, claim at the foot, where a reader's eye finishes and the scroll carries on.
+   *
+   * At full width the arrangement is the other one and the wide rule says so: the subject is
+   * beside the claim rather than behind it, so there is nothing to stand on and centring is what
+   * pairs the two columns.
+   *
+   * The step below the words is the band's own `padding-block`, which holds here, where the
+   * content rests on the band's foot. The wide rule zeroes it, because centred content needs no
+   * step, and content resting on an edge is the one case that does.
+   */
+  min-block-size: 100cqh;
+}
+
+/*
+ * The subject is placed against the band at every width, never laid out beside the text.
+ *
+ * Absolute is the base rule rather than the wide one, which is the correction: `media` is a child
+ * of the band and the band is a flex row, so without this it became a second column at anything
+ * under the fold width — a picture beside the claim, each squeezing the other, with the title run
+ * off the inline edge. The source design has it absolute at every width for exactly this reason
+ * and moves it at the breakpoint rather than placing it there.
+ *
+ * Centred and filling the band by default, which is what a narrow screen wants: the subject behind
+ * the claim rather than next to it. `inner` is painted over it by DOM order — it comes last in the
+ * markup and both are positioned — so no stacking order has to be named.
+ *
+ * `pointer-events: none` because it is decoration and the contract says so. Without it a subject
+ * covering the band would swallow a press meant for the button underneath.
+ */
+:where([data-dds-context="marketing"]) .dds-landinghero .dds-landinghero__media {
+  /*
+   * Stood on the band's foot rather than floated in it.
+   *
+   * A cutout of a person hanging with air under it reads as a sticker; cropped by the edge it is
+   * standing in the band. It is also what puts the subject above the claim now that the claim is
+   * at the base — the two share the foot of the band rather than overlapping in the middle of it.
+   *
+   * One inset and a size, never both insets: naming a start, an end and a height over-constrains
+   * the box, and CSS resolves that by dropping the end — which is how the wide rule came to hug
+   * the top while saying bottom.
+   */
+  align-items: flex-end;
+  display: flex;
+  inset-block-end: 0;
+  inset-block-start: auto;
+  inset-inline: 0;
+  block-size: 80%;
+  justify-content: center;
+  pointer-events: none;
+  position: absolute;
+}
+
+/*
+ * And the words are read off a scrim rather than off the subject.
+ *
+ * At a phone's width the claim sits over the picture, and a photograph is not a ground anybody
+ * chose — whatever is behind a given line is whatever the art happened to put there. The scrim
+ * darkens the foot of the band and fades out above it, so the words have a ground that is the
+ * band's own and the subject is still visible through it.
+ *
+ * `color.bg.overlay` rather than `overlay-subtle`, and the difference is what the scrim is for. A
+ * light scrim is enough to settle a picture that is already dark; this one has to hold white type
+ * over art nobody has seen. A page passing a bright photograph is the case that decides the value,
+ * and at a quarter of black white text on it is unreadable — which is a legibility failure a
+ * component cannot leave to whoever picks the art.
+ *
+ * It costs nothing where it is not needed: the band's own ground is near-black, so over that the
+ * scrim is invisible, and it only does work once something light is behind it.
+ *
+ * It is a black alpha, so fading it to `transparent` fades within one hue: a scrim of any other
+ * colour would pass through grey on its way out and leave a band across the picture.
+ *
+ * On `inner` rather than on the band, because the band paints before the subject and the scrim has
+ * to come after it. `inner` is the last thing in the markup and is positioned, so it paints over
+ * the picture without a stacking order being named — the same arrangement the subject itself
+ * relies on. At this width `inner` is the full width of the phone, so the scrim runs edge to edge
+ * and only its contents are held off by the gutter.
+ */
+:where([data-dds-context="marketing"]) .dds-landinghero .dds-landinghero__inner {
+  /* At the foot on a phone, and filling the band so the scrim has somewhere to sit. */
+  align-items: flex-end;
+  background-image: linear-gradient(to top, var(--color-bg-overlay), transparent);
+  /* Anchored to the foot and given a height of its own, so the scrim is a band under the words
+     rather than a wash over the whole picture. This box is the height of the viewport; the paint
+     is three fifths of it, which covers the claim and its actions and leaves the subject above
+     them untouched. */
+  background-position: bottom;
+  background-repeat: no-repeat;
+  background-size: 100% 60%;
+}
+
+/*
+ * Text against the measure's leading edge, visual against the band's own.
+ *
+ * The column takes half the measure and no more. A claim set at eighty pixels across the full
+ * twelve hundred is two words a line with a ragged edge, and the visual it is supposed to sit
+ * beside has nowhere to be.
+ *
+ * `@container` rather than `@media`, asking the band's own width: the root declares
+ * `container-type`, so a hero placed in a narrow region of a wide page folds on its own measure.
+ * `48rem` longhand because `var()` is not permitted in a container query condition — the same
+ * constraint footer-impl.css works under, and the same width, so the two bands fold together.
+ */
+@container (min-width: 48rem) {
+  /*
+   * Half the measure, which is the reference design's 600 against its 1280 to within a few pixels
+   * — and holds at any width, where a number would only be right at one.
+   */
+  :where([data-dds-context="marketing"]) .dds-landinghero .dds-landinghero__content {
+    max-inline-size: 50%;
+  }
+
+  /*
+   * No step above or below the words at this width.
+   *
+   * The band is already a screen tall and the content is centred in it, so the section step has
+   * nothing to do: centring sets where the words sit, and a step on either side would only move
+   * them off the middle. The step the contract binds is for the narrower arrangement, where the
+   * words rest on the band's foot and need the distance from it.
+   */
+  :where([data-dds-context="marketing"]) .dds-landinghero .dds-landinghero__inner {
+    /* Centred, because the two columns are a pair rather than a thing standing on a ground. */
+    align-items: center;
+    /* No scrim: the subject is beside the claim here, not behind it, so there is nothing for the
+       words to be read off and a gradient would be a shadow under a column of text. */
+    background-image: none;
+    padding-block: 0;
+  }
+
+  /*
+   * The visual is placed against the band's inline end, not the column.
+   *
+   * Absolute against the root — which is why `media` is the band's child and not the content's.
+   * Off the band's block end but held off its inline one, so a cutout of a person is cropped at the
+   * waist by the band's own foot while still standing inside the page's gutter. The source design
+   * bleeds it off the side as well; run to the edge it read as a panel butted against the window
+   * rather than as a subject in the band, and the two edges are not the same decision — the foot
+   * is a crop and the side is a margin.
+   *
+   * `space.inset.page` is that margin, which is the role that holds a page's content off the edge
+   * of the window. The subject lands on the same line the content does, so the band has one gutter
+   * rather than a gutter and a picture that ignores it.
+   *
+   * The two `auto`s are what make that true, and their absence is why it was not. The base rule
+   * above sets `inset: 0` — all four sides — because at narrow widths the visual fills the band.
+   * Naming only the end insets here left both sides set on each axis with a size as well, which is
+   * over-constrained: CSS resolves that by ignoring the end value, so the visual hugged the start
+   * and the top while the rule said end and bottom. Releasing the start insets is what lets the
+   * ones named below take effect.
+   */
+  :where([data-dds-context="marketing"]) .dds-landinghero .dds-landinghero__media {
+    block-size: 100%;
+    /*
+     * Wide enough for the shape rather than for a share of the band.
+     *
+     * The height is the band's and `aspect.portrait` is bound on the part, so the width follows
+     * from the two — about half the band at a laptop's proportions, which is what the fixed half
+     * was approximating. Stated as a share it was right at one window shape and wrong at every
+     * other: a tall window gave a portrait subject a landscape box and cropped the figure's head.
+     */
+    inline-size: auto;
+    inset-block-end: -14%;
+    inset-block-start: auto;
+    inset-inline-end: var(--space-inset-page);
+    inset-inline-start: auto;
+    position: absolute;
+  }
+
+}
+
+/*
+ * Whatever the page put in a visual slot fills the slot.
+ *
+ * The slots take a node rather than a source, so what arrives is the page's element and this
+ * cannot know whether it carries dimensions. Left alone an `<img>` renders at its intrinsic size,
+ * which for a product screenshot is wider than the band. `max-inline-size` rather than
+ * `inline-size` so a mark narrower than the slot is not stretched to fill it.
+ */
+:where([data-dds-context="marketing"]) .dds-landinghero .dds-landinghero__media > * {
+  block-size: 100%;
+  max-inline-size: 100%;
+  object-fit: contain;
+}
+
+/*
+ * The band rounds off as it leaves.
+ *
+ * Scroll-driven rather than timed: `view()` measures the band against the viewport, so the corner
+ * arrives as the reader scrolls and reverses when they scroll back. There is no element entering
+ * and no transition to hang it on, which is what puts a keyframed animation in this file rather
+ * than in a binding.
+ *
+ * `radius.expressive` is the corner, and it is the role's own description — the most rounding
+ * before full, for high-impact visual sections and banners. The source design carries fifty-six
+ * pixels here, which is not a step on this ramp; forty-eight is, and the difference is invisible
+ * against a band the width of the page.
+ *
+ * Only the two lower corners. The band starts at the top of the document with nothing above it to
+ * round away from, and a hero that curved at the top would read as a card the page had been
+ * dropped into.
+ */
+@keyframes dds-landinghero-exit {
+  to {
+    border-end-end-radius: var(--radius-expressive);
+    border-end-start-radius: var(--radius-expressive);
+    scale: var(--motion-scale-band-exit);
+  }
+}
+
+@supports (animation-timeline: view()) {
+  :where([data-dds-context="marketing"]) .dds-landinghero {
+    animation: dds-landinghero-exit linear both;
+    animation-range: exit 0% exit 40%;
+    animation-timeline: view();
+  }
+}
+
+/*
+ * A reader who asked for less movement gets none of it.
+ *
+ * The generated sheet writes a reduced-motion block from its bindings, and this animation is not
+ * one of them — it is written here, so its own exception has to be too. The band simply keeps its
+ * square corner, which is what it has at rest anyway.
+ */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-landinghero {
+    animation: none;
+  }
+}
+
+/*
+ * A band in a short container compacts, rather than clipping what it holds.
+ *
+ * `space.section.default` is 112 top and bottom — 224 of the band before a word is set, which is
+ * right at a screen's height and is most of an overview row. The band is as tall as the screen, so
+ * it is the screen's height that is asked: a `@media` query, on a real page. The band's own
+ * `container-type` is `inline-size`, which cannot answer a height, so a container query alone
+ * matched only inside a frame that measures its height — the preview's — and never in production.
+ * Both are written: the media query for a page, the container query for a frame. The role already
+ * exists for a band that has to be shorter; nothing new is named here.
+ *
+ * `40rem` longhand because `var()` is not permitted in a container query condition.
+ */
+@container (max-height: 40rem) {
+  :where([data-dds-context="marketing"]) .dds-landinghero .dds-landinghero__inner {
+    padding-block: var(--space-section-compact);
+  }
+}
+
+@media (max-height: 40rem) {
+  :where([data-dds-context="marketing"]) .dds-landinghero .dds-landinghero__inner {
+    padding-block: var(--space-section-compact);
+  }
+}
+
+/*
+ * Two calls to action stack on a phone and stand side by side once there is room.
+ *
+ * The reference design makes each one full width at the narrow end — a button that hugs its label
+ * on a phone is a tap target sized by how long the word happens to be — and lets them hug once the
+ * band is wide enough to hold both on a line.
+ */
+:where([data-dds-context="marketing"]) .dds-landinghero .dds-landinghero__actions {
+  align-items: stretch;
+  flex-direction: column;
+}
+
+:where([data-dds-context="marketing"]) .dds-landinghero .dds-landinghero__actions > * {
+  inline-size: 100%;
+}
+
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-landinghero .dds-landinghero__actions {
+    align-items: center;
+    flex-direction: row;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-landinghero .dds-landinghero__actions > * {
+    inline-size: auto;
+  }
+}

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' };