@deriv-com/dds-marketing 1.0.2 → 1.1.1

package/dist/components/blocks/steps/steps-impl.css

@@ -0,0 +1,216 @@
+/*
+ * 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 first step is not ruled off from what is above it, because nothing is.
+ *
+ * Every step carries a rule on its start edge, which is what puts a line between each pair and
+ * none under the last. The cost is one at the top of the list, where it reads as a lid rather than
+ * a separator — and the list is already bounded by the title's own step above it.
+ *
+ * `:first-child` is the condition itself. Nothing about a step knows it is first, and a prop
+ * standing in for the question would be the page answering something the DOM already has.
+ */
+:where([data-dds-context="marketing"]) .dds-steps .dds-steps__step:first-child {
+  border-block-start-width: 0;
+  padding-block-start: 0;
+}
+
+/*
+ * One column below the fold, and the picture leads it.
+ *
+ * The row direction is the contract's to say — it varies by a styling axis, which is what
+ * `structure[]` is for, and the generated sheet carries both values. What is left here is the
+ * fold, which a binding cannot express: `structure` has no width to attach a rule to.
+ *
+ * `column` rather than `column-reverse` for both positions, because the picture is first in the
+ * markup: the reference design stacks it above the steps on a phone whichever side it takes on a
+ * desktop, and a sequence reads that way — the scene, then the steps through it.
+ *
+ * Written a class deeper than it looks so it wins against the generated
+ * `.dds-steps[data-media-position="end"] .dds-steps__split`, which a plainer selector here would
+ * lose to however late it is loaded — the fault FeatureBullets shipped with for an afternoon.
+ *
+ * `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 (max-width: 47.9375rem) {
+  :where([data-dds-context="marketing"]) .dds-steps[data-media-position] .dds-steps__split {
+    flex-direction: column;
+  }
+}
+
+/*
+ * At full width the steps take a measure and the picture takes the rest.
+ *
+ * The reference design splits the row evenly at its own breakpoint. A share holds everywhere, and
+ * it is the one FeatureSplit and FeatureBullets take, so three splits down a page put their
+ * pictures on the same line; the picture growing into whatever is left is what keeps the square
+ * square without either half naming a height.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-steps .dds-steps__split {
+    align-items: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-steps .dds-steps__content {
+    flex: 0 0 45%;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-steps .dds-steps__media {
+    flex: 1 1 0;
+  }
+}
+
+/*
+ * Whatever the page put in the picture fills the square.
+ *
+ * The slot takes a node rather than a source, so what arrives is the page's element and this
+ * cannot know whether it carries dimensions. `cover` rather than `contain`, because the slot is a
+ * square the section decided on and a picture letterboxed inside it would show the ground through
+ * a corner the section rounded.
+ */
+:where([data-dds-context="marketing"]) .dds-steps .dds-steps__media > *,
+:where([data-dds-context="marketing"]) .dds-steps .dds-steps__media img {
+  block-size: 100%;
+  inline-size: 100%;
+  object-fit: cover;
+}
+
+/*
+ * Bare media is a block; a component keeps its own display.
+ *
+ * `display: block` is for what arrives as a raw element — an image, a video, an inline SVG — which
+ * sits on a text baseline otherwise and leaves a gap under it. Written at no weight at all, so a
+ * component the page placed here — an IllustrationScene, whose grid lays its pane over its photo —
+ * keeps the display its own sheet gives it. In the rule above, a class deeper than the component's
+ * root, it turned the scene's grid into a block, and the pane fell below the photo and was clipped.
+ */
+:where([data-dds-context="marketing"] .dds-steps .dds-steps__media > *, [data-dds-context="marketing"] .dds-steps .dds-steps__media img) {
+  display: block;
+}
+
+
+/*
+ * The number's line is the title's line, so the figure is centred on it.
+ *
+ * Top-aligned in the row, the number and the title each start their own line box; a line of the
+ * same height for both puts the larger figure's middle on the title's first line, overhanging it
+ * evenly above and below. The height is the title's own type, font.h5's size by its leading, so it
+ * follows the title down to a phone's sizes without a number here.
+ *
+ * Written a class deeper than it looks, so it wins against the generated `line-height` from the
+ * number's font.h4 binding on weight rather than on load order.
+ */
+:where([data-dds-context="marketing"]) .dds-steps .dds-steps__step > .dds-steps__number {
+  line-height: calc(var(--font-h5-size) * var(--font-h5-line-height));
+}
+
+/*
+ * Under `autoplay`: the steps take their turn.
+ *
+ * Every step keeps its rule, the first included — the current step's fill runs along it, and the
+ * first step's turn needs a rule to run on as much as the others'.
+ */
+:where([data-dds-context="marketing"]) .dds-steps[data-autoplay] .dds-steps__step:first-child {
+  border-block-start-width: var(--border-width-default);
+  padding-block-start: var(--space-inset-md);
+}
+
+/*
+ * The current step's number at full strength, the others receded: opacity.dot-current against
+ * opacity.dot-rest, the pagination dots' pair, because the numbers are doing the dots' job here —
+ * saying where in the set the reader is. Only the number recedes. The titles and lines stay at full
+ * ink, so every step is as readable while it waits as when it is current.
+ */
+:where([data-dds-context="marketing"]) .dds-steps[data-autoplay] .dds-steps__number {
+  opacity: var(--opacity-dot-rest);
+  transition: opacity var(--motion-duration-shift) var(--motion-easing-standard);
+}
+
+:where([data-dds-context="marketing"]) .dds-steps[data-autoplay] .dds-steps__step[data-current="true"] .dds-steps__number {
+  opacity: var(--opacity-dot-current);
+}
+
+/*
+ * The whole row is the step's button, not only its title: the title's box stretched over the row,
+ * which the row's `position: relative` holds. The text stays where it is and a press anywhere on the
+ * step chooses it.
+ */
+:where([data-dds-context="marketing"]) .dds-steps .dds-steps__trigger::after {
+  content: '';
+  inset: 0;
+  position: absolute;
+}
+
+:where([data-dds-context="marketing"]) .dds-steps[data-ground="strong"] .dds-steps__trigger:focus-visible {
+  outline-color: var(--color-border-focus-on-brand-strong);
+}
+
+/*
+ * The fill: the current step's rule, drawn from the start edge over motion.duration.dwell. When it
+ * ends the next step takes over — the component listens for the end, so the bar and the turn are
+ * one clock. Paused wherever the turn is held; full and still where the turn has stopped or never
+ * runs, so the current step is still marked.
+ */
+@keyframes dds-steps-fill {
+  from {
+    scale: 0 1;
+  }
+}
+
+:where([data-dds-context="marketing"]) .dds-steps[data-autoplay] .dds-steps__step[data-current="true"] > .dds-steps__progress {
+  display: block;
+  inset-block-start: calc(-1 * var(--border-width-default));
+  inset-inline: 0;
+  transform-origin: left center;
+}
+
+:where([data-dds-context="marketing"]) .dds-steps[data-autoplay]:dir(rtl) .dds-steps__step > .dds-steps__progress {
+  transform-origin: right center;
+}
+
+:where([data-dds-context="marketing"]) .dds-steps .dds-steps__list[data-turning="true"] > .dds-steps__step[data-current="true"] > .dds-steps__progress {
+  animation: dds-steps-fill var(--motion-duration-dwell) linear;
+}
+
+:where([data-dds-context="marketing"]) .dds-steps .dds-steps__list[data-playing="false"] > .dds-steps__step[data-current="true"] > .dds-steps__progress {
+  animation-play-state: paused;
+}
+
+/*
+ * The steps' own pictures share the media cell, and the current step's is the one shown — the
+ * first while the list is still. They cross over rather than cut, in motion.duration.shift.
+ */
+:where([data-dds-context="marketing"]) .dds-steps .dds-steps__media:has(> .dds-steps__image) {
+  display: grid;
+}
+
+:where([data-dds-context="marketing"]) .dds-steps .dds-steps__media > .dds-steps__image {
+  grid-area: 1 / 1;
+  opacity: 0;
+  transition-property: opacity;
+}
+
+:where([data-dds-context="marketing"]) .dds-steps .dds-steps__media > .dds-steps__image[data-current="true"] {
+  opacity: 1;
+}
+
+/*
+ * A reader who asked for less motion: no fill, no crossing over. The list never turns for them — the
+ * component asks too, but only once it runs, and the server's first paint is drawn before it does.
+ */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-steps .dds-steps__list[data-turning] > .dds-steps__step[data-current] > .dds-steps__progress {
+    animation: none;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-steps .dds-steps__media > .dds-steps__image,
+  :where([data-dds-context="marketing"]) .dds-steps[data-autoplay] .dds-steps__number {
+    transition: none;
+  }
+}

package/dist/components/blocks/steps/use-turn.d.ts

@@ -0,0 +1,33 @@
+import { type FocusEvent, type PointerEvent } from 'react';
+/**
+ * The steps taking their turn under `autoplay`: which step is current, and whether the turn is
+ * running.
+ *
+ * The timing is not here. The current step's rule fills over motion.duration.dwell as a CSS
+ * animation, and the turn moves on when that animation ends (`next`), so the bar a reader watches
+ * and the step changing are one clock rather than two that drift. Holding the turn is pausing that
+ * animation, which is what `playing` is for: the stylesheet pauses the fill wherever it is false.
+ *
+ * It turns only where every condition for it holds:
+ * - `autoplay` is on and there are two steps or more;
+ * - the reader has not asked for less motion — asked live, so turning it on mid-visit stops it;
+ * - the section is on screen. A turn nobody can see does not run, and starts again where it was;
+ * - nothing holds it: a pointer over the section or focus inside it holds it for as long as it
+ *   lasts, and pressing a step stops it for good — CtaBannerSlider's rule, by way of the WAI
+ *   carousel pattern: a reader who has chosen a step is reading it. The pointer's way, the
+ *   keyboard's and a touch screen's, which WCAG 2.2.2 asks for of anything that moves on its own.
+ */
+export declare function useTurn(count: number, autoplay: boolean): {
+    current: number;
+    turning: boolean;
+    playing: boolean;
+    next: () => void;
+    choose: (at: number) => void;
+    section: import("react").RefObject<HTMLElement | null>;
+    hold: {
+        onPointerEnter: (event: PointerEvent<HTMLElement>) => void;
+        onPointerLeave: (event: PointerEvent<HTMLElement>) => void;
+        onFocus: () => void;
+        onBlur: (event: FocusEvent<HTMLElement>) => void;
+    };
+};

package/dist/components/blocks/steps/use-turn.js

@@ -0,0 +1,75 @@
+'use client';
+import { useCallback, useEffect, useRef, useState } from 'react';
+/**
+ * The steps taking their turn under `autoplay`: which step is current, and whether the turn is
+ * running.
+ *
+ * The timing is not here. The current step's rule fills over motion.duration.dwell as a CSS
+ * animation, and the turn moves on when that animation ends (`next`), so the bar a reader watches
+ * and the step changing are one clock rather than two that drift. Holding the turn is pausing that
+ * animation, which is what `playing` is for: the stylesheet pauses the fill wherever it is false.
+ *
+ * It turns only where every condition for it holds:
+ * - `autoplay` is on and there are two steps or more;
+ * - the reader has not asked for less motion — asked live, so turning it on mid-visit stops it;
+ * - the section is on screen. A turn nobody can see does not run, and starts again where it was;
+ * - nothing holds it: a pointer over the section or focus inside it holds it for as long as it
+ *   lasts, and pressing a step stops it for good — CtaBannerSlider's rule, by way of the WAI
+ *   carousel pattern: a reader who has chosen a step is reading it. The pointer's way, the
+ *   keyboard's and a touch screen's, which WCAG 2.2.2 asks for of anything that moves on its own.
+ */
+export function useTurn(count, autoplay) {
+    const [current, setCurrent] = useState(0);
+    const [seen, setSeen] = useState(false);
+    const [still, setStill] = useState(false);
+    const [held, setHeld] = useState(false);
+    const [stopped, setStopped] = useState(false);
+    const section = useRef(null);
+    const turning = autoplay && count > 1 && !still && !stopped;
+    const playing = turning && seen && !held;
+    useEffect(() => {
+        if (typeof window.matchMedia !== 'function')
+            return undefined;
+        const query = window.matchMedia('(prefers-reduced-motion: reduce)');
+        const follow = () => setStill(query.matches);
+        follow();
+        query.addEventListener?.('change', follow);
+        return () => query.removeEventListener?.('change', follow);
+    }, []);
+    useEffect(() => {
+        const element = section.current;
+        if (!autoplay || element === null || typeof IntersectionObserver === 'undefined')
+            return undefined;
+        const observer = new IntersectionObserver(([entry]) => setSeen(entry?.isIntersecting ?? false));
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [autoplay]);
+    /** The current step's fill has run: the next step takes over, and the first after the last. */
+    const next = useCallback(() => {
+        if (count > 0)
+            setCurrent((at) => (at + 1) % count);
+    }, [count]);
+    /** A step pressed: it is current, and the turn stops for good. */
+    const choose = useCallback((at) => {
+        setCurrent(at);
+        setStopped(true);
+    }, []);
+    /** Spread on the section: what holds the turn. */
+    const hold = {
+        onPointerEnter: (event) => {
+            if (event.pointerType === 'mouse')
+                setHeld(true);
+        },
+        onPointerLeave: (event) => {
+            if (event.pointerType === 'mouse')
+                setHeld(false);
+        },
+        onFocus: () => setHeld(true),
+        onBlur: (event) => {
+            if (!event.currentTarget.contains(event.relatedTarget))
+                setHeld(false);
+        },
+    };
+    // A list that shrank under the current step falls back to its first.
+    return { current: current < count ? current : 0, turning, playing, next, choose, section, hold };
+}

package/dist/components/blocks/sticky-cards/StickyCards.css

@@ -0,0 +1,154 @@
+/* GENERATED from stickycards.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-stickycards {
+  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-stickycards .dds-stickycards__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-stickycards .dds-stickycards__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-stickycards .dds-stickycards__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-stickycards .dds-stickycards__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-stickycards .dds-stickycards__list {
+  box-sizing: border-box;
+  display: grid;
+  inline-size: 100%;
+  list-style: none;
+  margin-block: 0;
+  margin-inline: auto;
+  min-inline-size: 0;
+  padding: 0;
+  row-gap: var(--space-grid-gutter);
+}
+
+:where([data-dds-context="marketing"]) .dds-stickycards .dds-stickycards__item {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  position: relative;
+}
+
+:where([data-dds-context="marketing"]) .dds-stickycards .dds-stickycards__backdrop {
+  inset: 0;
+  overflow: clip;
+  pointer-events: none;
+  position: absolute;
+}
+
+:where([data-dds-context="marketing"]) .dds-stickycards .dds-stickycards__body {
+  box-sizing: border-box;
+  display: flex;
+  flex: auto;
+  flex-direction: column;
+  min-block-size: 0;
+  min-inline-size: 0;
+  gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-stickycards .dds-stickycards__media {
+  min-inline-size: 0;
+  overflow: clip;
+}
+
+:where([data-dds-context="marketing"]) .dds-stickycards .dds-stickycards__image {
+  display: block;
+}
+
+:where([data-dds-context="marketing"]) .dds-stickycards .dds-stickycards__scrim {
+  display: none;
+  inset: 0;
+  pointer-events: none;
+  position: absolute;
+  background-color: var(--color-bg-overlay);
+  border-radius: var(--radius-surface);
+}
+
+:where([data-dds-context="marketing"]) .dds-stickycards[data-ground="page"] {
+  background-color: var(--color-bg-page);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-stickycards[data-ground="strong"] {
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-stickycards[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-stickycards[data-layout="compact"] .dds-stickycards__image {
+  border-radius: var(--radius-surface-compact);
+}
+
+:where([data-dds-context="marketing"]) .dds-stickycards[data-layout="compact"] .dds-stickycards__item {
+  min-block-size: var(--size-sticky-cards-compact-min);
+}
+
+:where([data-dds-context="marketing"]) .dds-stickycards[data-layout="compact"] .dds-stickycards__list {
+  max-inline-size: var(--size-sticky-cards-compact-max);
+}
+
+:where([data-dds-context="marketing"]) .dds-stickycards[data-layout="compact"] .dds-stickycards__media {
+  border-radius: var(--radius-surface-compact);
+}
+
+:where([data-dds-context="marketing"]) .dds-stickycards[data-layout="feature"] .dds-stickycards__image {
+  border-radius: var(--radius-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-stickycards[data-layout="feature"] .dds-stickycards__item {
+  min-block-size: var(--size-sticky-cards-feature-min);
+}
+
+:where([data-dds-context="marketing"]) .dds-stickycards[data-layout="feature"] .dds-stickycards__list {
+  max-inline-size: var(--size-content-max);
+}
+
+:where([data-dds-context="marketing"]) .dds-stickycards[data-layout="feature"] .dds-stickycards__media {
+  border-radius: var(--radius-none);
+}
+

package/dist/components/blocks/sticky-cards/StickyCards.d.ts

@@ -0,0 +1,35 @@
+import './StickyCards.css';
+import './sticky-cards-impl.css';
+import '../block-reveal.css';
+import { type StickyCardsProps } from './StickyCards.types.js';
+export type { StickyCardsProps };
+/**
+ * A heading over a pile of cards that builds as the page scrolls — the reference design's
+ * StickyMarketCards (`layout="compact"`), StickyMarketCardsLottie (the `media` callback) and
+ * StickyStackedCards (`layout="feature"`), as one block.
+ *
+ * The pile is CSS. Each card's place in the list is sticky, a step lower than the one before, and
+ * every row of the list is as tall as the tallest card, so the card arriving hides the one under it
+ * entirely and leaves only its edge. The reference measured the cards with a script and wrote the
+ * tallest height onto each; a grid's equal rows say the same thing before any script runs.
+ *
+ * The covered card draws back and darkens on a scroll timeline: each card's place names a view
+ * timeline, and the card before it runs its drawing back down that timeline — so a card recedes as
+ * the *next* one crosses it, which is the reference's own measure (the overlap of the next card
+ * over this one) said as a range. The names are per card and set here, inline, because a timeline
+ * a sibling reads has to be named uniquely and declared in scope on the list; the stylesheet does
+ * the rest. See sticky-cards-impl.css for the ranges and the fallbacks.
+ *
+ * The cards are records, drawn into Card and CardBody: Card for the fill and the corner, CardBody
+ * for the words at the card's inset, and the picture beside them. A record rather than a Card the
+ * page composes, because the pile needs to know each card's place — its step, its timeline — and
+ * a list of markets or steps is what a content system hands over. The one thing a record cannot
+ * carry is a player; `media` is how the page puts one in a card's picture slot.
+ *
+ * Nothing is hidden from assistive technology. The pile is how the list looks, not what it holds:
+ * every card is in the list, in order, at every scroll position.
+ *
+ * `'use client'` for the arrival, and for `useId`, which names the region by its heading and keeps
+ * the timeline names of two piles on one page apart.
+ */
+export declare function StickyCards({ ground, layout, title, description, cards, media, }: StickyCardsProps): import("react").JSX.Element;

package/dist/components/blocks/sticky-cards/StickyCards.js

@@ -0,0 +1,153 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from 'react';
+import './StickyCards.css';
+import './sticky-cards-impl.css';
+import '../block-reveal.css';
+import { given } from '../../given.js';
+import { Card } from '../../core/card/Card.js';
+import { CardBody } from '../../core/card-body/CardBody.js';
+import { arriving, useReveal } from '../use-reveal.js';
+import { stickyCardsDefaults, stickyCardsParts } from './StickyCards.types.js';
+/**
+ * How many edges the pile shows at most — the reference design's four.
+ *
+ * Only the last four cards step down by space.pile.peek; every card before them takes the first
+ * card's place, so in a long set the earliest are covered whole rather than adding a fifth, sixth
+ * and seventh strip until the pile is taller than the card on top of it.
+ */
+const MOST_EDGES = 4;
+/** A card's step down the pile: 0 for the first of the last four and everything before it. */
+const depthOf = (at, count) => Math.max(0, at - Math.max(0, count - MOST_EDGES));
+/** Nothing a `media` callback can return that would draw something. */
+const drawn = (node) => node !== undefined && node !== null && node !== false && node !== '';
+/**
+ * A heading over a pile of cards that builds as the page scrolls — the reference design's
+ * StickyMarketCards (`layout="compact"`), StickyMarketCardsLottie (the `media` callback) and
+ * StickyStackedCards (`layout="feature"`), as one block.
+ *
+ * The pile is CSS. Each card's place in the list is sticky, a step lower than the one before, and
+ * every row of the list is as tall as the tallest card, so the card arriving hides the one under it
+ * entirely and leaves only its edge. The reference measured the cards with a script and wrote the
+ * tallest height onto each; a grid's equal rows say the same thing before any script runs.
+ *
+ * The covered card draws back and darkens on a scroll timeline: each card's place names a view
+ * timeline, and the card before it runs its drawing back down that timeline — so a card recedes as
+ * the *next* one crosses it, which is the reference's own measure (the overlap of the next card
+ * over this one) said as a range. The names are per card and set here, inline, because a timeline
+ * a sibling reads has to be named uniquely and declared in scope on the list; the stylesheet does
+ * the rest. See sticky-cards-impl.css for the ranges and the fallbacks.
+ *
+ * The cards are records, drawn into Card and CardBody: Card for the fill and the corner, CardBody
+ * for the words at the card's inset, and the picture beside them. A record rather than a Card the
+ * page composes, because the pile needs to know each card's place — its step, its timeline — and
+ * a list of markets or steps is what a content system hands over. The one thing a record cannot
+ * carry is a player; `media` is how the page puts one in a card's picture slot.
+ *
+ * Nothing is hidden from assistive technology. The pile is how the list looks, not what it holds:
+ * every card is in the list, in order, at every scroll position.
+ *
+ * `'use client'` for the arrival, and for `useId`, which names the region by its heading and keeps
+ * the timeline names of two piles on one page apart.
+ */
+export function StickyCards({ ground = stickyCardsDefaults.ground, layout = stickyCardsDefaults.layout, title, description, cards, media, }) {
+    const titleId = useId();
+    const [band, revealed] = useReveal();
+    // The preview's bare view and a content system that has not loaded both hand over nothing; the
+    // heading alone is the honest drawing of an empty set.
+    const set = Array.isArray(cards) ? cards : [];
+    /*
+      Whether the tallest card fits the window below the bar, where the pile pins it. One that does
+      not would be covered before its foot was ever on screen — words a reader cannot reach — and a
+      translation is what makes a card that tall: German runs a third longer than the English the
+      pile was drawn for. The stylesheet pins nothing while this says so, and every card shows in full.
+  
+      Measured rather than guessed, because only the browser knows how tall the words came out. Every
+      row is the tallest card's height, so the list's first item is the measure. Starts false, so the
+      server's HTML and the first render agree and a reader with no script still gets the pile.
+    */
+    const list = useRef(null);
+    const [tall, setTall] = useState(false);
+    /*
+      The heading's height and the gap under it, once measured: the heading pins above the pile and
+      each card stops this much lower, so the cards gather under it rather than over it. Undefined
+      until then, and the heading does not pin without it — on a server render, or with no script, the
+      cards would otherwise come to rest on top of the words.
+    */
+    const [head, setHead] = useState(undefined);
+    /*
+      How far below the heading the card on top reaches — the gap and one card's height. The heading
+      carries it as a margin, so it is held only while that much of the list is still to come, and
+      lets go at the moment the top card does: the two then scroll up as one, rather than the heading
+      staying behind for the cards to scroll up over it. The edges peeking under the top card do not
+      count: they close up into it before it moves.
+    */
+    const [tail, setTail] = useState(undefined);
+    useEffect(() => {
+        const element = list.current;
+        if (element === null || typeof ResizeObserver === 'undefined')
+            return undefined;
+        const measure = () => {
+            const item = element.firstElementChild;
+            if (item === null)
+                return;
+            const style = getComputedStyle(element);
+            const px = (name) => Number.parseFloat(style.getPropertyValue(name)) || 0;
+            const header = element.parentElement?.querySelector(`:scope > .${stickyCardsParts.header}`);
+            const under = header === null || header === undefined
+                ? 0
+                : header.offsetHeight + (Number.parseFloat(getComputedStyle(element.parentElement).rowGap) || 0);
+            setHead(under);
+            const gap = Number.parseFloat(getComputedStyle(element.parentElement).rowGap) || 0;
+            setTail(gap + item.offsetHeight);
+            // The pinned top, the heading pinned above it, and the four edges a pile can show.
+            const top = px('--size-bar-height') + px('--space-inset-page') + under + 4 * px('--space-pile-peek');
+            setTall(item.getBoundingClientRect().height + top > window.innerHeight);
+        };
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        window.addEventListener('resize', measure);
+        return () => {
+            observer.disconnect();
+            window.removeEventListener('resize', measure);
+        };
+    }, []);
+    // A dashed ident for each card's timeline. `useId` returns `:r1:`-style ids, which are not valid
+    // in an ident, so only the letters and digits are kept.
+    const scope = `--dds-stickycards-${titleId.replace(/[^a-zA-Z0-9]/g, '')}`;
+    const nameAt = (at) => `${scope}-${at}`;
+    /*
+      What each card's picture slot holds, worked out once for the whole pile. A pile is one set, so
+      it takes one arrangement: the words-only arrangement — title beside sentence, in the middle of
+      the card — only when no card in it has a picture. A pile where some do keeps every card's words
+      stacked at the top, so a card without a picture reads as one of the set rather than a different
+      kind of card.
+    */
+    const slots = set.map((card, at) => {
+        const player = media?.(card, at);
+        const hasPlayer = drawn(player);
+        const image = hasPlayer ? undefined : card.image;
+        const hasImage = image !== undefined && given(image.src);
+        return { player, hasPlayer, image, hasImage };
+    });
+    const pictured = slots.some((slot) => slot.hasPlayer || slot.hasImage);
+    return (_jsx("section", { className: stickyCardsParts.root, "data-ground": ground, "data-layout": layout, "data-pile": pictured ? 'pictured' : 'words', "data-head-pinned": head === undefined ? undefined : 'true', 
+        // On the section, where the heading and the list under it both read it.
+        style: tail === undefined ? undefined : { '--dds-stickycards-tail': `${tail}px` }, "aria-labelledby": titleId, children: _jsxs("div", { className: stickyCardsParts.inner, ref: band, "data-revealed": revealed, children: [_jsxs("div", { className: stickyCardsParts.header, children: [_jsx("h2", { className: stickyCardsParts.title, id: titleId, ...arriving(0), children: title }), given(description) ? (_jsx("p", { className: stickyCardsParts.description, ...arriving(1), children: description })) : null] }), _jsx("ul", { ref: list, className: stickyCardsParts.list, "data-tall": tall || undefined, role: "list", style: set.length > 0
+                        ? {
+                            '--dds-stickycards-scope': set.map((_, at) => nameAt(at)).join(', '),
+                            ...(head === undefined ? {} : { '--dds-stickycards-head': `${head}px` }),
+                        }
+                        : undefined, children: set.map((card, at) => {
+                        const { player, hasPlayer, image, hasImage } = slots[at];
+                        const depth = depthOf(at, set.length);
+                        const next = at + 1 < set.length ? depthOf(at + 1, set.length) : depth;
+                        return (_jsxs("li", { className: stickyCardsParts.item, "data-media": hasPlayer ? 'node' : hasImage ? 'image' : 'none', style: {
+                                '--dds-stickycards-depth': depth,
+                                '--dds-stickycards-next-depth': next,
+                                '--dds-stickycards-own': nameAt(at),
+                                ...(at + 1 < set.length ? { '--dds-stickycards-next': nameAt(at + 1) } : {}),
+                            }, children: [_jsxs(Card, { variant: card.variant ?? 'accent-strong', children: [layout === 'compact' && card.background && given(card.background.src) ? (_jsx("span", { className: stickyCardsParts.backdrop, children: _jsx("img", { src: card.background.src, alt: card.background.alt, width: card.background.width, height: card.background.height, loading: "lazy", decoding: "async" }) })) : null, _jsxs("div", { className: stickyCardsParts.body, children: [_jsx(CardBody, { title: card.title, description: card.description }), hasPlayer || hasImage ? (_jsx("div", { className: stickyCardsParts.media, children: hasPlayer ? (player) : (_jsx("img", { className: stickyCardsParts.image, src: image.src, alt: image.alt, width: image.width, height: image.height, loading: "lazy", decoding: "async" })) })) : null] })] }), _jsx("span", { className: stickyCardsParts.scrim })] }, `${card.title}-${at}`));
+                    }) })] }) }));
+}