@deriv-com/dds-marketing 1.1.3 → 1.2.0

package/dist/components/core/illustration-check/illustration-check-impl.css

@@ -0,0 +1,76 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * `motion="resolve"`: the ring spins open, closes, and the tick draws in, once. `data-arrival` is
+ * the mark's own answer from useArrival (arrival.ts): `waiting` holds the first frame — an open arc,
+ * no tick — `playing` runs it, and no attribute — a server, a reader who asked for less movement —
+ * is the finished mark. Both strokes measure one (`pathLength`), so these fractions hold at any size.
+ *
+ *   two turns of motion.duration.spinner on its linear easing — the Spinner's own turn — as a short
+ *   arc, the way a Spinner reads;
+ *   the arc closes round over motion.duration.shift;
+ *   the tick draws in over motion.duration.slow.
+ *
+ * The svg turns rather than the ring, so the arc and its closing are one stroke that stops turning
+ * at the top. A vector stroke scales with the drawing; this one keeps border.width.strong.
+ */
+:where([data-dds-context="marketing"]) .dds-illustrationcheck svg {
+  display: block;
+  overflow: visible;
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationcheck :is(.dds-illustrationcheck__ring, .dds-illustrationcheck__tick) {
+  vector-effect: non-scaling-stroke;
+}
+
+@keyframes dds-illustrationcheck-spin {
+  to {
+    rotate: 1turn;
+  }
+}
+
+@keyframes dds-illustrationcheck-close {
+  from {
+    stroke-dasharray: 0.28 1;
+  }
+
+  to {
+    stroke-dasharray: 1 0;
+  }
+}
+
+@keyframes dds-illustrationcheck-draw {
+  from {
+    stroke-dasharray: 1;
+    stroke-dashoffset: 1;
+  }
+
+  to {
+    stroke-dasharray: 1;
+    stroke-dashoffset: 0;
+  }
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationcheck[data-motion='resolve'][data-arrival] svg {
+  animation: dds-illustrationcheck-spin var(--motion-duration-spinner) var(--motion-easing-spinner) 2;
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationcheck[data-motion='resolve'][data-arrival] .dds-illustrationcheck__ring {
+  animation: dds-illustrationcheck-close var(--motion-duration-shift) var(--motion-easing-reveal)
+    calc(2 * var(--motion-duration-spinner)) both;
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationcheck[data-motion='resolve'][data-arrival] .dds-illustrationcheck__tick {
+  animation: dds-illustrationcheck-draw var(--motion-duration-slow) var(--motion-easing-reveal)
+    calc(2 * var(--motion-duration-spinner) + var(--motion-duration-shift)) both;
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationcheck[data-motion='resolve'][data-arrival='waiting'] :is(svg, .dds-illustrationcheck__ring, .dds-illustrationcheck__tick) {
+  animation-play-state: paused !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-illustrationcheck[data-motion='resolve'][data-arrival] :is(svg, .dds-illustrationcheck__ring, .dds-illustrationcheck__tick) {
+    animation: none;
+  }
+}

package/dist/components/core/illustration-choice/IllustrationChoice.css

@@ -0,0 +1,62 @@
+/* GENERATED from illustrationchoice.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-illustrationchoice {
+  box-sizing: border-box;
+  display: grid;
+  inline-size: 100%;
+  position: relative;
+  row-gap: var(--space-gap-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationchoice .dds-illustrationchoice__option {
+  align-items: center;
+  display: grid;
+  background-color: var(--color-bg-subtle);
+  border-radius: var(--radius-control-md);
+  color: var(--color-fg-default);
+  column-gap: var(--space-gap-sm);
+  padding-block: var(--space-inset-sm);
+  padding-inline: var(--space-inset-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationchoice .dds-illustrationchoice__radio {
+  border-style: solid;
+  display: grid;
+  flex-shrink: 0;
+  place-items: center;
+  border-radius: var(--radius-pill);
+  border-width: var(--border-width-emphasis);
+  height: var(--icon-size-sm);
+  width: var(--icon-size-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationchoice .dds-illustrationchoice__dot {
+  display: block;
+  border-radius: var(--radius-pill);
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationchoice .dds-illustrationchoice__outline {
+  border-style: solid;
+  pointer-events: none;
+  border-color: var(--color-border-info);
+  border-radius: var(--radius-control-md);
+  border-width: var(--border-width-emphasis);
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationchoice .dds-illustrationchoice__description {
+  color: var(--color-fg-muted);
+  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);
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationchoice .dds-illustrationchoice__label {
+  font-family: var(--font-label-md-family);
+  font-size: var(--font-label-md-size);
+  font-weight: var(--font-label-md-weight);
+  letter-spacing: var(--font-label-md-letter-spacing);
+  line-height: var(--font-label-md-line-height);
+}
+

package/dist/components/core/illustration-choice/IllustrationChoice.d.ts

@@ -0,0 +1,16 @@
+import './IllustrationChoice.css';
+import './illustration-choice-impl.css';
+import { type IllustrationChoiceProps } from './IllustrationChoice.types.js';
+export type { IllustrationChoiceProps };
+/**
+ * A drawn set of options with one picked — a picture of the product making a choice, never a
+ * control.
+ *
+ * The outline is a grid item laid in the picked option's row, so the stylesheet places it without
+ * measuring anything. Picking on arrival, it starts a row away — the option after the picked one,
+ * or the one before where the picked one is last — and slides; which way is handed to the
+ * stylesheet as a sign, with the row it starts on marked so its circle can empty as it leaves.
+ *
+ * No script of its own: a choice that picks on arrival is wrapped to take one (arrives.tsx).
+ */
+export declare function IllustrationChoice({ options, value, motion, label, ...rest }: IllustrationChoiceProps): import("react").JSX.Element | null;

package/dist/components/core/illustration-choice/IllustrationChoice.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './IllustrationChoice.css';
+import './illustration-choice-impl.css';
+import { Arrives } from '../../arrives.js';
+import { given } from '../../given.js';
+import { illustrationChoiceParts, } from './IllustrationChoice.types.js';
+/**
+ * A drawn set of options with one picked — a picture of the product making a choice, never a
+ * control.
+ *
+ * The outline is a grid item laid in the picked option's row, so the stylesheet places it without
+ * measuring anything. Picking on arrival, it starts a row away — the option after the picked one,
+ * or the one before where the picked one is last — and slides; which way is handed to the
+ * stylesheet as a sign, with the row it starts on marked so its circle can empty as it leaves.
+ *
+ * No script of its own: a choice that picks on arrival is wrapped to take one (arrives.tsx).
+ */
+export function IllustrationChoice({ options, value, motion, label, ...rest }) {
+    // A record from a feed or an editor is not typed: a missing list draws nothing rather than
+    // taking the page down.
+    if (!Array.isArray(options) || options.length === 0)
+        return null;
+    const picked = Math.max(0, options.findIndex((option) => option.value === value));
+    // Where the outline starts when it picks: the next option, or the one before if the pick is last.
+    const start = picked < options.length - 1 ? picked + 1 : picked - 1;
+    // A lone option has no other to start from, so it is drawn picked and still.
+    const moves = motion !== undefined && options.length > 1;
+    const named = given(label);
+    const choice = (_jsxs("div", { ...rest, className: illustrationChoiceParts.root, "data-motion": moves ? motion : undefined, role: named ? 'img' : undefined, "aria-label": named ? label : undefined, style: { '--dds-illustrationchoice-from': start - picked }, children: [options.map((option, at) => (_jsxs("div", { className: illustrationChoiceParts.option, "data-picked": at === picked ? '' : undefined, "data-start": moves && at === start ? '' : undefined, style: { gridRow: at + 1 }, children: [_jsx("span", { className: illustrationChoiceParts.radio, style: { gridRow: given(option.description) ? 'span 2' : undefined }, children: _jsx("span", { className: illustrationChoiceParts.dot }) }), _jsx("span", { className: illustrationChoiceParts.label, children: option.label }), given(option.description) ? (_jsx("span", { className: illustrationChoiceParts.description, children: option.description })) : null] }, option.value))), _jsx("span", { className: illustrationChoiceParts.outline, "aria-hidden": "true", style: { gridRow: picked + 1 } })] }));
+    return moves ? _jsx(Arrives, { children: choice }) : choice;
+}

package/dist/components/core/illustration-choice/IllustrationChoice.types.d.ts

@@ -0,0 +1,25 @@
+import type { HTMLAttributes } from 'react';
+import type { IllustrationChoiceOption } from '../../illustration-data.js';
+export interface IllustrationChoiceOwnProps {
+    /** Always. Two to four options, each a name in a few words and a line under it where it needs one */
+    options: IllustrationChoiceOption[];
+    /** Always. The `value` of the option shown picked */
+    value: string;
+    /**
+     * `pick` — The outline starts on a neighbouring option and slides to the picked one, whose circle then fills — the product making the choice
+     */
+    motion?: 'pick';
+    /** Where the picture stands on its own and its options say less than a sentence would — "Choosing an account: the demo account". It names the whole as one image */
+    label?: string;
+}
+export type IllustrationChoiceProps = IllustrationChoiceOwnProps & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'options' | 'value' | 'motion' | 'label'>;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const illustrationChoiceParts: {
+    readonly root: "dds-illustrationchoice";
+    readonly option: "dds-illustrationchoice__option";
+    readonly radio: "dds-illustrationchoice__radio";
+    readonly dot: "dds-illustrationchoice__dot";
+    readonly label: "dds-illustrationchoice__label";
+    readonly description: "dds-illustrationchoice__description";
+    readonly outline: "dds-illustrationchoice__outline";
+};

package/dist/components/core/illustration-choice/IllustrationChoice.types.js

@@ -0,0 +1,11 @@
+// GENERATED from illustration-choice.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const illustrationChoiceParts = {
+    root: 'dds-illustrationchoice',
+    option: 'dds-illustrationchoice__option',
+    radio: 'dds-illustrationchoice__radio',
+    dot: 'dds-illustrationchoice__dot',
+    label: 'dds-illustrationchoice__label',
+    description: 'dds-illustrationchoice__description',
+    outline: 'dds-illustrationchoice__outline',
+};

package/dist/components/core/illustration-choice/illustration-choice-impl.css

@@ -0,0 +1,103 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ */
+
+/* Grid structure the contract's static CSS cannot hold: one column of options, and each option's circle beside its words. */
+:where([data-dds-context="marketing"]) .dds-illustrationchoice {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationchoice .dds-illustrationchoice__option {
+  grid-template-columns: auto minmax(0, 1fr);
+  grid-column: 1;
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationchoice .dds-illustrationchoice__label {
+  grid-column: 2;
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationchoice .dds-illustrationchoice__description {
+  grid-column: 2;
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationchoice .dds-illustrationchoice__outline {
+  grid-column: 1;
+}
+
+/*
+ * The dot fills its circle with a margin of a quarter of it, and only on the picked option.
+ */
+:where([data-dds-context="marketing"]) .dds-illustrationchoice .dds-illustrationchoice__dot {
+  background-color: currentColor;
+  block-size: 50%;
+  inline-size: 50%;
+  scale: 0;
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationchoice .dds-illustrationchoice__option[data-picked] .dds-illustrationchoice__dot {
+  scale: 1;
+}
+
+/* The outline covers its row exactly, over the option it marks. */
+:where([data-dds-context="marketing"]) .dds-illustrationchoice .dds-illustrationchoice__outline {
+  align-self: stretch;
+  justify-self: stretch;
+}
+
+/*
+ * `motion="pick"`: the outline starts a row away — `--dds-illustrationchoice-from` rows, a sign —
+ * holds for motion.duration.hold with that row's circle still filled, then slides to the picked
+ * option over motion.duration.shift as the circle it left empties; the picked circle pops full over
+ * motion.duration.slow once it has arrived. `data-arrival` is the choice's own answer from
+ * useArrival (arrival.ts): `waiting` holds the first frame, `playing` runs it, and no attribute —
+ * a server, a reader who asked for less movement — is the choice as made. A row's height plus the
+ * gap is how far one row away is.
+ */
+@keyframes dds-illustrationchoice-slide {
+  from {
+    translate: 0 calc(var(--dds-illustrationchoice-from) * (100% + var(--space-gap-sm)));
+  }
+}
+
+@keyframes dds-illustrationchoice-leave {
+  from {
+    scale: 1;
+  }
+
+  to {
+    scale: 0;
+  }
+}
+
+@keyframes dds-illustrationchoice-fill {
+  0% {
+    scale: 0;
+  }
+
+  70% {
+    scale: 1.2;
+  }
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationchoice[data-motion='pick'][data-arrival] .dds-illustrationchoice__outline {
+  animation: dds-illustrationchoice-slide var(--motion-duration-shift) var(--motion-easing-shift) var(--motion-duration-hold) both;
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationchoice[data-motion='pick'][data-arrival] .dds-illustrationchoice__option[data-start] .dds-illustrationchoice__dot {
+  animation: dds-illustrationchoice-leave var(--motion-duration-hold) steps(1, end) both;
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationchoice[data-motion='pick'][data-arrival] .dds-illustrationchoice__option[data-picked] .dds-illustrationchoice__dot {
+  animation: dds-illustrationchoice-fill var(--motion-duration-slow) var(--motion-easing-reveal)
+    calc(var(--motion-duration-hold) + var(--motion-duration-shift)) both;
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationchoice[data-motion='pick'][data-arrival='waiting'] :is(.dds-illustrationchoice__outline, .dds-illustrationchoice__dot) {
+  animation-play-state: paused !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-illustrationchoice[data-motion='pick'][data-arrival] :is(.dds-illustrationchoice__outline, .dds-illustrationchoice__dot) {
+    animation: none;
+  }
+}

package/dist/components/core/illustration-code/IllustrationCode.css

@@ -0,0 +1,25 @@
+/* GENERATED from illustrationcode.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-illustrationcode {
+  box-sizing: border-box;
+  display: grid;
+  inline-size: 100%;
+  column-gap: var(--space-gap-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationcode .dds-illustrationcode__box {
+  border-style: solid;
+  box-sizing: border-box;
+  display: grid;
+  place-items: center;
+  border-color: var(--color-border-strong);
+  border-radius: var(--radius-control-sm);
+  border-width: var(--border-width-emphasis);
+  font-family: var(--font-label-md-family);
+  font-size: var(--font-label-md-size);
+  font-weight: var(--font-label-md-weight);
+  letter-spacing: var(--font-label-md-letter-spacing);
+  line-height: var(--font-label-md-line-height);
+  padding-block: var(--space-inset-xs);
+}
+

package/dist/components/core/illustration-code/IllustrationCode.d.ts

@@ -0,0 +1,12 @@
+import './IllustrationCode.css';
+import './illustration-code-impl.css';
+import { type IllustrationCodeProps } from './IllustrationCode.types.js';
+export type { IllustrationCodeProps };
+/**
+ * A drawn row of code boxes — a picture of the product asking for a code, never a field.
+ *
+ * A filled box holds a dot rather than a digit: a picture should never show a code. Each box carries
+ * its place in the row for the stylesheet, so the boxes can fill one after another on arrival. No
+ * script of its own: a row that fills on arrival is wrapped to take one (arrives.tsx).
+ */
+export declare function IllustrationCode({ length, filled, motion, label, ...rest }: IllustrationCodeProps): import("react").JSX.Element;

package/dist/components/core/illustration-code/IllustrationCode.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './IllustrationCode.css';
+import './illustration-code-impl.css';
+import { Arrives } from '../../arrives.js';
+import { given } from '../../given.js';
+import { illustrationCodeDefaults, illustrationCodeParts, } from './IllustrationCode.types.js';
+/**
+ * A drawn row of code boxes — a picture of the product asking for a code, never a field.
+ *
+ * A filled box holds a dot rather than a digit: a picture should never show a code. Each box carries
+ * its place in the row for the stylesheet, so the boxes can fill one after another on arrival. No
+ * script of its own: a row that fills on arrival is wrapped to take one (arrives.tsx).
+ */
+export function IllustrationCode({ length = illustrationCodeDefaults.length, filled, motion, label, ...rest }) {
+    const count = Math.max(1, Math.min(8, Math.round(length)));
+    const full = Math.max(0, Math.min(count, filled === undefined ? count : Math.round(filled)));
+    const named = given(label);
+    const row = (_jsx("div", { ...rest, className: illustrationCodeParts.root, "data-motion": motion, role: named ? 'img' : undefined, "aria-label": named ? label : undefined, "aria-hidden": named ? undefined : true, style: { gridTemplateColumns: `repeat(${count}, minmax(0, 1fr))` }, children: Array.from({ length: count }, (_, at) => (_jsx("span", { className: illustrationCodeParts.box, "data-filled": at < full ? '' : undefined, style: { '--dds-illustrationcode-step': at + 1 }, children: at < full ? '•' : null }, at))) }));
+    return motion === undefined ? row : _jsx(Arrives, { children: row });
+}

package/dist/components/core/illustration-code/IllustrationCode.types.d.ts

@@ -0,0 +1,23 @@
+import type { HTMLAttributes } from 'react';
+export interface IllustrationCodeOwnProps {
+    /** How many boxes: six, the default, for the usual verification code; four for a short one */
+    length?: number;
+    /** How many boxes are filled, from the start. Left out, all of them — a code entered */
+    filled?: number;
+    /**
+     * `fill` — The boxes fill one after another, a step of motion.duration.stagger apart
+     */
+    motion?: 'fill';
+    /** Where the picture stands on its own — "A verification code, entered". It names the row as one image */
+    label?: string;
+}
+export type IllustrationCodeProps = IllustrationCodeOwnProps & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'length' | 'filled' | 'motion' | 'label'>;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const illustrationCodeParts: {
+    readonly root: "dds-illustrationcode";
+    readonly box: "dds-illustrationcode__box";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const illustrationCodeDefaults: {
+    readonly length: 6;
+};

package/dist/components/core/illustration-code/IllustrationCode.types.js

@@ -0,0 +1,8 @@
+// GENERATED from illustration-code.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const illustrationCodeParts = {
+    root: 'dds-illustrationcode',
+    box: 'dds-illustrationcode__box',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const illustrationCodeDefaults = { length: 6 };

package/dist/components/core/illustration-code/illustration-code-impl.css

@@ -0,0 +1,42 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * A box is a little taller than it is wide, as the product's are; a filled one is outlined in the
+ * text's own ink rather than the empty box's quieter edge.
+ */
+:where([data-dds-context="marketing"]) .dds-illustrationcode .dds-illustrationcode__box {
+  aspect-ratio: var(--aspect-upright);
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationcode .dds-illustrationcode__box[data-filled] {
+  border-color: currentColor;
+}
+
+/*
+ * `motion="fill"`: each filled box takes its ink and its dot a step of motion.duration.stagger after
+ * the one before, settling from a little small over motion.duration.normal. `data-arrival` is the
+ * row's own answer from useArrival (arrival.ts): `waiting` holds every box empty, `playing` fills
+ * them, and no attribute — a server, a reader who asked for less movement — is the row as filled.
+ */
+@keyframes dds-illustrationcode-fill {
+  from {
+    border-color: var(--color-border-strong);
+    color: transparent;
+    scale: 0.85;
+  }
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationcode[data-motion='fill'][data-arrival] .dds-illustrationcode__box[data-filled] {
+  animation: dds-illustrationcode-fill var(--motion-duration-normal) var(--motion-easing-reveal) both;
+  animation-delay: calc(var(--dds-illustrationcode-step, 1) * var(--motion-duration-stagger));
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationcode[data-motion='fill'][data-arrival='waiting'] .dds-illustrationcode__box {
+  animation-play-state: paused !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-illustrationcode[data-motion='fill'][data-arrival] .dds-illustrationcode__box {
+    animation: none;
+  }
+}

package/dist/components/core/illustration-list/IllustrationList.css

@@ -0,0 +1,19 @@
+/* GENERATED from illustrationlist.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-illustrationlist {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationlist .dds-illustrationlist__row {
+  align-items: center;
+  border-style: none;
+  display: flex;
+  border-block-start-width: var(--border-width-hairline);
+  border-color: var(--color-border-subtle);
+  column-gap: var(--space-gap-sm);
+  padding-block: var(--space-inset-xs);
+}
+

package/dist/components/core/illustration-list/IllustrationList.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from 'react';
+import './IllustrationList.css';
+import './illustration-list-impl.css';
+import { type IllustrationListProps } from './IllustrationList.types.js';
+export type { IllustrationListProps };
+/**
+ * A drawn list — each child one row, ruled from the row above — for a picture of the product
+ * listing things.
+ *
+ * Each row carries its place in the list for the stylesheet, so the rows can arrive one after
+ * another and a glyph in each can pop as its row lands. No script of its own: a list that arrives
+ * is wrapped to take one (arrives.tsx).
+ */
+export declare function IllustrationList({ motion, children, ...rest }: IllustrationListProps & {
+    children?: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/core/illustration-list/IllustrationList.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children } from 'react';
+import './IllustrationList.css';
+import './illustration-list-impl.css';
+import { Arrives } from '../../arrives.js';
+import { illustrationListParts } from './IllustrationList.types.js';
+/**
+ * A drawn list — each child one row, ruled from the row above — for a picture of the product
+ * listing things.
+ *
+ * Each row carries its place in the list for the stylesheet, so the rows can arrive one after
+ * another and a glyph in each can pop as its row lands. No script of its own: a list that arrives
+ * is wrapped to take one (arrives.tsx).
+ */
+export function IllustrationList({ motion, children, ...rest }) {
+    const list = (_jsx("div", { ...rest, className: illustrationListParts.root, "data-motion": motion, children: Children.toArray(children).map((child, at) => (_jsx("div", { className: illustrationListParts.row, style: { '--dds-illustrationlist-step': at }, children: child }, at))) }));
+    return motion === undefined ? list : _jsx(Arrives, { children: list });
+}

package/dist/components/core/illustration-list/IllustrationList.types.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface IllustrationListOwnProps {
+    /**
+     * `arrive` — The rows come in one after another, and each glyph pops in as its row lands
+     */
+    motion?: 'arrive';
+    /** Allowed: any content */
+    children: ReactNode;
+}
+export type IllustrationListProps = IllustrationListOwnProps & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'motion'>;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const illustrationListParts: {
+    readonly root: "dds-illustrationlist";
+    readonly row: "dds-illustrationlist__row";
+};

package/dist/components/core/illustration-list/IllustrationList.types.js

@@ -0,0 +1,6 @@
+// GENERATED from illustration-list.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const illustrationListParts = {
+    root: 'dds-illustrationlist',
+    row: 'dds-illustrationlist__row',
+};

package/dist/components/core/illustration-list/illustration-list-impl.css

@@ -0,0 +1,52 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * Rows ruled from the row above; the first has nothing above it.
+ */
+:where([data-dds-context="marketing"]) .dds-illustrationlist .dds-illustrationlist__row + .dds-illustrationlist__row {
+  border-block-start-style: solid;
+}
+
+/*
+ * `motion="arrive"`: each row comes up into place over motion.duration.reveal, a step of
+ * motion.duration.stagger behind the row before it, and any glyph in it — an Icon — pops in over
+ * motion.duration.shift a step of motion.duration.fast after its row starts. `data-arrival` is the
+ * list's own answer from useArrival (arrival.ts): `waiting` holds the first frame, `playing` runs
+ * it, and no attribute — a server, a reader who asked for less movement — is the list at rest.
+ */
+@keyframes dds-illustrationlist-arrive {
+  from {
+    opacity: var(--opacity-hidden);
+    translate: 0 var(--space-gap-sm);
+  }
+}
+
+@keyframes dds-illustrationlist-pop {
+  0% {
+    scale: 0.4;
+  }
+
+  70% {
+    scale: 1.12;
+  }
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationlist[data-motion='arrive'][data-arrival] .dds-illustrationlist__row {
+  animation: dds-illustrationlist-arrive var(--motion-duration-reveal) var(--motion-easing-reveal) both;
+  animation-delay: calc(var(--dds-illustrationlist-step, 0) * var(--motion-duration-stagger));
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationlist[data-motion='arrive'][data-arrival] .dds-illustrationlist__row .dds-icon {
+  animation: dds-illustrationlist-pop var(--motion-duration-shift) var(--motion-easing-reveal) both;
+  animation-delay: calc(var(--dds-illustrationlist-step, 0) * var(--motion-duration-stagger) + var(--motion-duration-fast));
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationlist[data-motion='arrive'][data-arrival='waiting'] :is(.dds-illustrationlist__row, .dds-icon) {
+  animation-play-state: paused !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-illustrationlist[data-motion='arrive'][data-arrival] :is(.dds-illustrationlist__row, .dds-icon) {
+    animation: none;
+  }
+}

package/dist/components/core/illustration-scene/IllustrationScene.css

@@ -18,6 +18,12 @@
   background-color: var(--color-bg-surface);
 }
 
+:where([data-dds-context="marketing"]) .dds-illustrationscene .dds-illustrationscene__shade {
+  align-self: stretch;
+  justify-self: stretch;
+  pointer-events: none;
+}
+
 :where([data-dds-context="marketing"]) .dds-illustrationscene[data-placement="bottom"] {
   align-items: end;
   justify-items: center;

package/dist/components/core/illustration-scene/IllustrationScene.d.ts

@@ -9,6 +9,7 @@ export type { IllustrationSceneProps };
  * every picture of the product in use is composed the same way across a site. The photograph is
  * decoration unless `alt` says otherwise; the card's own label describes the whole picture.
  *
- * No state and no script, so it renders on a server as it is.
+ * No state and no script, so it renders on a server as it is. The card's two-beat arrival inside a
+ * block's reveal is the stylesheet's, read from the step the block gave whatever holds the scene.
  */
-export declare function IllustrationScene({ ratio, placement, src, alt, children, ...rest }: IllustrationSceneProps): import("react").JSX.Element;
+export declare function IllustrationScene({ ratio, placement, src, alt, shade, children, ...rest }: IllustrationSceneProps): import("react").JSX.Element;

package/dist/components/core/illustration-scene/IllustrationScene.js

@@ -9,8 +9,9 @@ import { illustrationSceneDefaults, illustrationSceneParts, } from './Illustrati
  * every picture of the product in use is composed the same way across a site. The photograph is
  * decoration unless `alt` says otherwise; the card's own label describes the whole picture.
  *
- * No state and no script, so it renders on a server as it is.
+ * No state and no script, so it renders on a server as it is. The card's two-beat arrival inside a
+ * block's reveal is the stylesheet's, read from the step the block gave whatever holds the scene.
  */
-export function IllustrationScene({ ratio = illustrationSceneDefaults.ratio, placement = illustrationSceneDefaults.placement, src, alt = illustrationSceneDefaults.alt, children, ...rest }) {
-    return (_jsxs("div", { ...rest, className: illustrationSceneParts.root, "data-ratio": ratio, "data-placement": placement, children: [_jsx("img", { className: illustrationSceneParts.image, src: src, alt: alt }), children] }));
+export function IllustrationScene({ ratio = illustrationSceneDefaults.ratio, placement = illustrationSceneDefaults.placement, src, alt = illustrationSceneDefaults.alt, shade = illustrationSceneDefaults.shade, children, ...rest }) {
+    return (_jsxs("div", { ...rest, className: illustrationSceneParts.root, "data-ratio": ratio, "data-placement": placement, children: [_jsx("img", { className: illustrationSceneParts.image, src: src, alt: alt }), shade ? _jsx("div", { className: illustrationSceneParts.shade }) : null, children] }));
 }