@deriv-com/dds-marketing 1.1.3 → 1.2.0

package/dist/components/core/card-body/CardBody.css

@@ -70,6 +70,7 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-cardbody .dds-cardbody__media-frame {
+  transition-property: border-radius;
   display: block;
   flex: auto;
   min-block-size: 0;
@@ -120,6 +121,10 @@
   line-height: var(--font-label-md-line-height);
 }
 
+:where([data-dds-context="marketing"]) .dds-cardbody[data-flush="true"] .dds-cardbody__media-frame {
+  border-radius: var(--radius-container);
+}
+
 :where([data-dds-context="marketing"]) .dds-cardbody[data-over-media="false"] .dds-cardbody__eyebrow {
   color: var(--color-fg-muted);
 }

package/dist/components/core/card-body/CardBody.types.d.ts

@@ -2,7 +2,7 @@ import type { HTMLAttributes, ReactNode } from 'react';
 export interface CardBodyOwnProps {
     /** The picture is the card's ground and the copy is read on top of it. Set explicitly rather than inferred from src, which BannerBody can afford to do and this cannot: there, art is always behind the words, so having art and being over it are the same fact. Here a picture is a region in the column by default, and the same src means two different cards */
     overMedia?: boolean;
-    /** The card has no fill for the copy to be held off — Card's `plain` variant, where the picture is the card's edge rather than the ground being it. The inline inset goes and the copy lines up with the picture above it; the block padding stays, because the space between a picture and the line under it is still doing its job */
+    /** The card has no fill for the copy to be held off — Card's `plain` variant, where the picture is the card's edge rather than the ground being it. The inline inset goes and the copy lines up with the picture above it; the block padding stays, because the space between a picture and the line under it is still doing its job. The picture takes the corners every contained picture in the blocks has, since with no fill around it the picture is the card's shape */
     flush?: boolean;
     /** The card is pressable and its picture is what answers the pointer — an editorial card inside a CardButton, on any ground. The picture grows by motion.scale.media-hover and media-frame clips it, so what the reader sees is the frame holding still while the art moves inside it. Setting this is also what stops the card lifting: CardButton suppresses its own lift when the body it holds zooms, so the two motions never compete */
     zoomOnHover?: boolean;

package/dist/components/core/document-link/DocumentLink.css

@@ -0,0 +1,59 @@
+/* GENERATED from documentlink.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-documentlink {
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+  row-gap: 0;
+  column-gap: var(--space-gap-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-documentlink .dds-documentlink__link {
+  align-items: center;
+  color: inherit;
+  display: inline-flex;
+  min-inline-size: 0;
+  text-decoration-line: none;
+  column-gap: var(--space-gap-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-documentlink .dds-documentlink__mark {
+  display: inline-flex;
+  flex: none;
+}
+
+:where([data-dds-context="marketing"]) .dds-documentlink .dds-documentlink__action {
+  display: flex;
+  flex: none;
+}
+
+:where([data-dds-context="marketing"]) .dds-documentlink[data-variant="chip"] {
+  background-color: var(--color-bg-surface-card-raised);
+  border-color: var(--color-border-subtle);
+  border-radius: var(--radius-surface);
+  border-width: var(--border-width-hairline);
+  color: var(--color-fg-default);
+  padding-block: var(--space-inset-sm);
+  padding-inline: var(--space-inset-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-documentlink[data-variant="chip"] .dds-documentlink__title {
+  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);
+}
+
+:where([data-dds-context="marketing"]) .dds-documentlink[data-variant="plain"] .dds-documentlink__title {
+  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);
+}
+

package/dist/components/core/document-link/DocumentLink.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+import './DocumentLink.css';
+import './document-link-impl.css';
+import { type DocumentLinkProps } from './DocumentLink.types.js';
+export type { DocumentLinkProps };
+/**
+ * One document a reader can open or save — a policy, a key information document, a country's
+ * licence — drawn the same way wherever a page lists documents.
+ *
+ * The mark and the title are one link. A second link beside it (`action`) is its sibling, never its
+ * child, so the row is a surface holding two targets rather than a target holding another. An
+ * external document opens in a new tab and a download saves the file, and each says so in words a
+ * screen reader hears and nobody sees, after the title.
+ *
+ * No state and no script, so it renders on a server as it is.
+ */
+export declare function DocumentLink({ variant, href, external, download, mark, action, externalLabel, downloadLabel, children, ...rest }: DocumentLinkProps & {
+    children?: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/core/document-link/DocumentLink.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FileSolidIcon } from '@deriv-com/quill-icons-web';
+import './DocumentLink.css';
+import './document-link-impl.css';
+import { Icon } from '../icon/Icon.js';
+import { visuallyHidden } from '../../visually-hidden.js';
+import { documentLinkDefaults, documentLinkParts } from './DocumentLink.types.js';
+/**
+ * One document a reader can open or save — a policy, a key information document, a country's
+ * licence — drawn the same way wherever a page lists documents.
+ *
+ * The mark and the title are one link. A second link beside it (`action`) is its sibling, never its
+ * child, so the row is a surface holding two targets rather than a target holding another. An
+ * external document opens in a new tab and a download saves the file, and each says so in words a
+ * screen reader hears and nobody sees, after the title.
+ *
+ * No state and no script, so it renders on a server as it is.
+ */
+export function DocumentLink({ variant = documentLinkDefaults.variant, href, external = documentLinkDefaults.external, download = documentLinkDefaults.download, mark, action, externalLabel = documentLinkDefaults.externalLabel, downloadLabel = documentLinkDefaults.downloadLabel, children, ...rest }) {
+    return (_jsxs("div", { ...rest, className: documentLinkParts.root, "data-variant": variant, children: [_jsxs("a", { className: documentLinkParts.link, href: href, target: external ? '_blank' : undefined, rel: external ? 'noopener noreferrer' : undefined, download: download ? '' : undefined, children: [_jsx("span", { className: documentLinkParts.mark, "aria-hidden": "true", children: _jsx(Icon, { size: variant === 'chip' ? 'lg' : 'md', children: mark ?? _jsx(FileSolidIcon, {}) }) }), _jsx("span", { className: documentLinkParts.title, children: children }), external ? _jsxs("span", { style: visuallyHidden, children: [" ", externalLabel] }) : null, download ? _jsxs("span", { style: visuallyHidden, children: [" ", downloadLabel] }) : null] }), action ? _jsx("div", { className: documentLinkParts.action, children: action }) : null] }));
+}

package/dist/components/core/document-link/DocumentLink.types.d.ts

@@ -0,0 +1,41 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface DocumentLinkOwnProps {
+    /**
+     * `chip` — The default: the document on a surface of its own, for a list of documents grouped under headings
+     * `plain` — The mark and the title on the page itself, for a grid of many short entries — a licence per country, each behind its flag
+     */
+    variant?: 'chip' | 'plain';
+    /** Always. Where the document is: a URL, usually a PDF */
+    href: string;
+    /** The document is hosted off the site — opens in a new tab, and its accessible name ends with `externalLabel` */
+    external?: boolean;
+    /** The link saves the file rather than opening it — its accessible name ends with `downloadLabel` */
+    download?: boolean;
+    /** What kind of document it is, as a glyph — FilePdfSolidIcon for a PDF, FileShieldSolidIcon for a policy, or a country's flag from `@deriv-com/dds-marketing/icons/flag` (`MaltaIcon`, `GermanyIcon`) for one country's licence. Left out, a plain file */
+    mark?: ReactNode;
+    /** A second link beside the document — "Choose language" — drawn at the far end of the row as its own target */
+    action?: ReactNode;
+    /** What an external document's accessible name ends with. Never drawn. Translate it with the page */
+    externalLabel?: string;
+    /** What a download's accessible name ends with. Never drawn. Translate it with the page */
+    downloadLabel?: string;
+    /** Allowed: text */
+    children: ReactNode;
+}
+export type DocumentLinkProps = DocumentLinkOwnProps & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'variant' | 'href' | 'external' | 'download' | 'mark' | 'action' | 'externalLabel' | 'downloadLabel'>;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const documentLinkParts: {
+    readonly root: "dds-documentlink";
+    readonly link: "dds-documentlink__link";
+    readonly mark: "dds-documentlink__mark";
+    readonly title: "dds-documentlink__title";
+    readonly action: "dds-documentlink__action";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const documentLinkDefaults: {
+    readonly variant: "chip";
+    readonly external: false;
+    readonly download: false;
+    readonly externalLabel: "(opens in a new tab)";
+    readonly downloadLabel: "(downloads a file)";
+};

package/dist/components/core/document-link/DocumentLink.types.js

@@ -0,0 +1,11 @@
+// GENERATED from document-link.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const documentLinkParts = {
+    root: 'dds-documentlink',
+    link: 'dds-documentlink__link',
+    mark: 'dds-documentlink__mark',
+    title: 'dds-documentlink__title',
+    action: 'dds-documentlink__action',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const documentLinkDefaults = { variant: 'chip', external: false, download: false, externalLabel: '(opens in a new tab)', downloadLabel: '(downloads a file)' };

package/dist/components/core/document-link/document-link-impl.css

@@ -0,0 +1,23 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * The document's link answers the pointer and the keyboard itself, since the row around it is not
+ * interactive: its title underlines on hover, and focus draws the package's ring round the link —
+ * border.width.focus in color.border.focus — offset off the mark and the words.
+ */
+:where([data-dds-context="marketing"]) .dds-documentlink .dds-documentlink__link:hover .dds-documentlink__title {
+  text-decoration-line: underline;
+  text-decoration-thickness: var(--border-width-default);
+  text-underline-offset: 0.2em;
+}
+
+:where([data-dds-context="marketing"]) .dds-documentlink .dds-documentlink__link:focus-visible {
+  border-radius: var(--radius-subtle);
+  outline: var(--border-width-focus) solid var(--color-border-focus);
+  outline-offset: var(--border-width-focus);
+}
+
+/* A chip's border is drawn only where the chip is; a plain entry has none to draw. */
+:where([data-dds-context="marketing"]) .dds-documentlink[data-variant='chip'] {
+  border-style: solid;
+}

package/dist/components/core/illustration-card/IllustrationCard.css

@@ -26,6 +26,13 @@
   gap: var(--space-gap-sm);
 }
 
+:where([data-dds-context="marketing"]) .dds-illustrationcard .dds-illustrationcard__stage {
+  display: flex;
+  flex-direction: column;
+  min-block-size: 0;
+  row-gap: var(--space-gap-sm);
+}
+
 :where([data-dds-context="marketing"]) .dds-illustrationcard[data-ratio="landscape"] {
   aspect-ratio: var(--aspect-landscape);
 }

package/dist/components/core/illustration-card/IllustrationCard.d.ts

@@ -14,9 +14,13 @@ export type { IllustrationCardProps };
  * `label`, and its contents are `inert`: real components draw it, so it looks exactly like the
  * product, and none of them can be focused, pressed or typed into.
  *
+ * It can move once, as it arrives — frosting over its photograph, or playing two states of the
+ * product, the second after the first — and whatever moves inside it waits for it to land: it is
+ * the host its parts' arrivals follow (see arrival.ts).
+ *
  * And it scales like a picture. The UI is laid out at its own size and, where the pane is too small
  * to hold it, scaled down as a whole to fit — never up — so a pane on a phone shows the same picture
  * smaller rather than text overlapping or cut off. The scale is worked out when the pane changes
  * size and at no other time.
  */
-export declare function IllustrationCard({ ratio, label, children, ...rest }: IllustrationCardProps): import("react").JSX.Element;
+export declare function IllustrationCard({ ratio, label, motion, then, children, ...rest }: IllustrationCardProps): import("react").JSX.Element;

package/dist/components/core/illustration-card/IllustrationCard.js

@@ -1,8 +1,9 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useLayoutEffect, useRef } from 'react';
 import './IllustrationCard.css';
 import './illustration-card-impl.css';
+import { useArrival } from '../../arrival.js';
 import { illustrationCardDefaults, illustrationCardParts, } from './IllustrationCard.types.js';
 /**
  * A pane of glass holding a picture of the product, in one of three shapes.
@@ -16,13 +17,19 @@ import { illustrationCardDefaults, illustrationCardParts, } from './Illustration
  * `label`, and its contents are `inert`: real components draw it, so it looks exactly like the
  * product, and none of them can be focused, pressed or typed into.
  *
+ * It can move once, as it arrives — frosting over its photograph, or playing two states of the
+ * product, the second after the first — and whatever moves inside it waits for it to land: it is
+ * the host its parts' arrivals follow (see arrival.ts).
+ *
  * And it scales like a picture. The UI is laid out at its own size and, where the pane is too small
  * to hold it, scaled down as a whole to fit — never up — so a pane on a phone shows the same picture
  * smaller rather than text overlapping or cut off. The scale is worked out when the pane changes
  * size and at no other time.
  */
-export function IllustrationCard({ ratio = illustrationCardDefaults.ratio, label, children, ...rest }) {
-    const pane = useRef(null);
+export function IllustrationCard({ ratio = illustrationCardDefaults.ratio, label, motion, then, children, ...rest }) {
+    // The pane arrives as one thing and is the host the motions inside it follow, so it runs its
+    // arrival whether or not it moves itself: a figure that rolls inside it waits for it to land.
+    const [pane, arrival] = useArrival();
     const content = useRef(null);
     useLayoutEffect(() => {
         const root = pane.current;
@@ -30,6 +37,11 @@ export function IllustrationCard({ ratio = illustrationCardDefaults.ratio, label
         if (root === null || inner === null || typeof ResizeObserver === 'undefined')
             return undefined;
         const fit = () => {
+            // Back to the UI's own size before the pane is measured. A pane whose height follows what it
+            // holds — a strip at the foot of a scene, capped at a share of it — is only as tall as its
+            // last fit left the UI; measured first, each fit would find less room than the last.
+            inner.style.transform = '';
+            inner.style.inlineSize = '';
             const style = getComputedStyle(root);
             const across = root.clientWidth - Number.parseFloat(style.paddingInlineStart) - Number.parseFloat(style.paddingInlineEnd);
             const down = root.clientHeight - Number.parseFloat(style.paddingBlockStart) - Number.parseFloat(style.paddingBlockEnd);
@@ -37,18 +49,32 @@ export function IllustrationCard({ ratio = illustrationCardDefaults.ratio, label
                 return;
             // Laid out unscaled at the pane's own width, to see how much room the UI wants there — down,
             // and across, since a line that cannot wrap (a large figure) overflows sideways.
-            inner.style.transform = '';
             inner.style.inlineSize = `${across}px`;
             const tall = inner.scrollHeight;
             const wide = inner.scrollWidth;
-            const scale = Math.min(1, down / tall, across / wide);
+            let scale = Math.min(1, down / tall, across / wide);
             if (scale >= 1) {
                 inner.style.inlineSize = '';
                 return;
             }
             // Scaled, the UI is narrower than the pane too; laying it out wider by the same factor gives
-            // the width back, so the picture fills the pane across as well as down. Wider, it can only
-            // wrap less and so be shorter, which keeps it inside the pane.
+            // the width back, so the picture fills the pane across as well as down. Wider, it wraps less
+            // and is shorter — so the scale found at the pane's own width is a floor, not the answer, and
+            // in a wide, short pane (a strip at the foot of a scene) a far smaller one than the UI needs.
+            // The largest scale whose widened layout still fits is found by halving the gap a few times;
+            // each try is one layout, and this runs only when the pane changes size.
+            const fits = (candidate) => {
+                inner.style.inlineSize = `${across / candidate}px`;
+                return inner.scrollHeight * candidate <= down && inner.scrollWidth * candidate <= across + 0.5;
+            };
+            let ceiling = 1;
+            for (let step = 0; step < 6; step += 1) {
+                const middle = (scale + ceiling) / 2;
+                if (fits(middle))
+                    scale = middle;
+                else
+                    ceiling = middle;
+            }
             inner.style.inlineSize = `${across / scale}px`;
             inner.style.transformOrigin = style.direction === 'rtl' ? 'top right' : 'top left';
             inner.style.transform = `scale(${scale})`;
@@ -78,5 +104,5 @@ export function IllustrationCard({ ratio = illustrationCardDefaults.ratio, label
                 cancelAnimationFrame(queued);
         };
     }, []);
-    return (_jsx("div", { ...rest, ref: pane, className: illustrationCardParts.root, "data-ratio": ratio, "data-theme": "dark", role: "img", "aria-label": label, children: _jsx("div", { ref: content, className: illustrationCardParts.content, inert: true, children: children }) }));
+    return (_jsx("div", { ...rest, ref: pane, className: illustrationCardParts.root, "data-ratio": ratio, "data-theme": "dark", "data-arrival-host": "", "data-arrival": arrival === 'still' ? undefined : arrival, "data-motion": then ? undefined : motion, role: "img", "aria-label": label, children: _jsx("div", { ref: content, className: illustrationCardParts.content, "data-story": then ? '' : undefined, inert: true, children: then ? (_jsxs(_Fragment, { children: [_jsx("div", { className: illustrationCardParts.stage, "data-stage": "first", children: children }), _jsx("div", { className: illustrationCardParts.stage, "data-stage": "then", children: then })] })) : (children) }) }));
 }

package/dist/components/core/illustration-card/IllustrationCard.types.d.ts

@@ -8,14 +8,21 @@ export interface IllustrationCardOwnProps {
     ratio?: 'landscape' | 'square' | 'upright';
     /** Always. What the picture shows, in a sentence — "Trade ticket: buy Gold to rise over 5 minutes, staking 10 USD". The pane is one image to assistive technology and this is its whole description; nothing inside it is read out on its own */
     label: string;
+    /**
+     * `frost` — The pane frosts over its photograph as it arrives: the glass blurs in over motion.duration.dramatic, and what it holds fades in a step of motion.duration.stagger apart once the glass is mostly there. For a pane in an IllustrationScene, where there is a photograph to soften
+     */
+    motion?: 'frost';
+    /** A second state of the same product, played once after the first: the order goes in, then the position is open. The pane shows what it holds for motion.duration.hold, then that gives way to this — out over motion.duration.slow, in over motion.duration.reveal. Still, and for a reader who asked for less movement, the pane is this second state, so `label` describes it */
+    then?: ReactNode;
     /** Allowed: any content */
     children: ReactNode;
 }
-export type IllustrationCardProps = IllustrationCardOwnProps & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'ratio' | 'label'>;
+export type IllustrationCardProps = IllustrationCardOwnProps & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'ratio' | 'label' | 'motion' | 'then'>;
 /** The class each part carries. Apply these — do not retype them. */
 export declare const illustrationCardParts: {
     readonly root: "dds-illustrationcard";
     readonly content: "dds-illustrationcard__content";
+    readonly stage: "dds-illustrationcard__stage";
 };
 /** Generated so defaults cannot drift from the contract. */
 export declare const illustrationCardDefaults: {

package/dist/components/core/illustration-card/IllustrationCard.types.js

@@ -3,6 +3,7 @@
 export const illustrationCardParts = {
     root: 'dds-illustrationcard',
     content: 'dds-illustrationcard__content',
+    stage: 'dds-illustrationcard__stage',
 };
 /** Generated so defaults cannot drift from the contract. */
 export const illustrationCardDefaults = { ratio: 'landscape' };

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

@@ -45,3 +45,116 @@
 :where([data-dds-context="marketing"]) .dds-illustrationcard .dds-illustrationcard__content > * {
   flex-shrink: 0;
 }
+
+/*
+ * The motions the pane plays once, as it arrives.
+ *
+ * `data-arrival` is the pane's own answer from useArrival (arrival.ts): `waiting` holds each motion
+ * at its first frame, `playing` runs it, and no attribute at all — a server's render, a reader who
+ * asked for less movement — is the pane at rest in its final state. Every motion is declared on
+ * both answers, with `both` fill and the waiting one paused, so the first frame is on screen before
+ * anything moves and the last one stays when it is done. The package's motion tokens throughout.
+ */
+
+/* Two states of one pane in one cell, so the second takes the first one's place. */
+:where([data-dds-context="marketing"]) .dds-illustrationcard .dds-illustrationcard__content[data-story] {
+  display: grid;
+}
+
+/* Both states in the one cell. */
+:where([data-dds-context="marketing"]) .dds-illustrationcard .dds-illustrationcard__stage {
+  grid-area: 1 / 1;
+}
+
+/* At rest the pane is its second state, the one `label` describes. */
+:where([data-dds-context="marketing"]) .dds-illustrationcard .dds-illustrationcard__stage[data-stage='first'] {
+  visibility: hidden;
+}
+
+@keyframes dds-illustrationcard-frost {
+  from {
+    -webkit-backdrop-filter: blur(0);
+    backdrop-filter: blur(0);
+    background-color: transparent;
+    background-image: none;
+  }
+}
+
+@keyframes dds-illustrationcard-fade-in {
+  from {
+    opacity: var(--opacity-hidden);
+  }
+}
+
+@keyframes dds-illustrationcard-story-leave {
+  from {
+    visibility: visible;
+  }
+
+  to {
+    opacity: var(--opacity-hidden);
+    translate: 0 calc(-1 * var(--space-gap-sm));
+    visibility: hidden;
+  }
+}
+
+@keyframes dds-illustrationcard-story-arrive {
+  from {
+    opacity: var(--opacity-hidden);
+    translate: var(--motion-translate-hover);
+  }
+}
+
+/*
+ * `motion="frost"`: the glass blurs in over the photograph, then what it holds fades in, a step of
+ * motion.duration.stagger apart, once the glass is most of the way there — motion.duration.slow in.
+ * The steps are counted down the pane's own column; a ninth thing and after share the eighth's step.
+ */
+:where([data-dds-context="marketing"]) .dds-illustrationcard[data-motion='frost'][data-arrival] {
+  animation: dds-illustrationcard-frost var(--motion-duration-dramatic) var(--motion-easing-reveal) both;
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationcard[data-motion='frost'][data-arrival] .dds-illustrationcard__content > * {
+  animation: dds-illustrationcard-fade-in var(--motion-duration-reveal) var(--motion-easing-reveal) both;
+  animation-delay: calc(var(--motion-duration-slow) + var(--dds-illustrationcard-step, 0) * var(--motion-duration-stagger));
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationcard .dds-illustrationcard__content > :nth-child(2) { --dds-illustrationcard-step: 1; }
+:where([data-dds-context="marketing"]) .dds-illustrationcard .dds-illustrationcard__content > :nth-child(3) { --dds-illustrationcard-step: 2; }
+:where([data-dds-context="marketing"]) .dds-illustrationcard .dds-illustrationcard__content > :nth-child(4) { --dds-illustrationcard-step: 3; }
+:where([data-dds-context="marketing"]) .dds-illustrationcard .dds-illustrationcard__content > :nth-child(5) { --dds-illustrationcard-step: 4; }
+:where([data-dds-context="marketing"]) .dds-illustrationcard .dds-illustrationcard__content > :nth-child(6) { --dds-illustrationcard-step: 5; }
+:where([data-dds-context="marketing"]) .dds-illustrationcard .dds-illustrationcard__content > :nth-child(7) { --dds-illustrationcard-step: 6; }
+:where([data-dds-context="marketing"]) .dds-illustrationcard .dds-illustrationcard__content > :nth-child(n + 8) { --dds-illustrationcard-step: 7; }
+
+/*
+ * `then`: the first state holds for motion.duration.hold, then gives way — out over
+ * motion.duration.slow, rising a little — and the second comes up into its place a step of
+ * motion.duration.fast behind, over motion.duration.reveal.
+ */
+:where([data-dds-context="marketing"]) .dds-illustrationcard[data-arrival] .dds-illustrationcard__stage[data-stage='first'] {
+  animation: dds-illustrationcard-story-leave var(--motion-duration-slow) var(--motion-easing-reveal) var(--motion-duration-hold) both;
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationcard[data-arrival] .dds-illustrationcard__stage[data-stage='then'] {
+  animation: dds-illustrationcard-story-arrive var(--motion-duration-reveal) var(--motion-easing-reveal)
+    calc(var(--motion-duration-hold) + var(--motion-duration-fast)) both;
+}
+
+/*
+ * Waiting: every motion above held at its first frame. `!important` because each motion is an
+ * `animation` shorthand, which resets the play state, and several are more specific than this.
+ */
+:where([data-dds-context="marketing"]) .dds-illustrationcard[data-arrival='waiting'],
+:where([data-dds-context="marketing"]) .dds-illustrationcard[data-arrival='waiting'] .dds-illustrationcard__content > *,
+:where([data-dds-context="marketing"]) .dds-illustrationcard[data-arrival='waiting'] .dds-illustrationcard__stage {
+  animation-play-state: paused !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-illustrationcard[data-arrival],
+  :where([data-dds-context="marketing"]) .dds-illustrationcard[data-arrival] .dds-illustrationcard__content > *,
+  :where([data-dds-context="marketing"]) .dds-illustrationcard[data-arrival] .dds-illustrationcard__stage {
+    animation: none;
+  }
+}

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

@@ -0,0 +1,25 @@
+/* GENERATED from illustrationcheck.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-illustrationcheck {
+  display: inline-block;
+  flex-shrink: 0;
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationcheck .dds-illustrationcheck__ring {
+  stroke-width: var(--border-width-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationcheck .dds-illustrationcheck__tick {
+  stroke-width: var(--border-width-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationcheck[data-size="lg"] {
+  height: var(--icon-size-lg);
+  width: var(--icon-size-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationcheck[data-size="xl"] {
+  height: var(--icon-size-xl);
+  width: var(--icon-size-xl);
+}
+

package/dist/components/core/illustration-check/IllustrationCheck.d.ts

@@ -0,0 +1,16 @@
+import './IllustrationCheck.css';
+import './illustration-check-impl.css';
+import { type IllustrationCheckProps } from './IllustrationCheck.types.js';
+export type { IllustrationCheckProps };
+/**
+ * A ring with a tick in it: the mark a picture of the product shows when something has gone
+ * through.
+ *
+ * Drawn rather than taken from the glyph set, because it moves in parts — the ring spins and closes,
+ * then the tick draws in — and a glyph is one shape. Both strokes measure their own length as one
+ * (`pathLength`), so the stylesheet draws them in by that fraction whatever the drawing's size.
+ * In the colour of the text around it, like an Icon.
+ *
+ * No script of its own: a mark that resolves on arrival is wrapped to take one (arrives.tsx).
+ */
+export declare function IllustrationCheck({ size, motion, label, ...rest }: IllustrationCheckProps): import("react").JSX.Element;

package/dist/components/core/illustration-check/IllustrationCheck.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './IllustrationCheck.css';
+import './illustration-check-impl.css';
+import { Arrives } from '../../arrives.js';
+import { given } from '../../given.js';
+import { illustrationCheckDefaults, illustrationCheckParts, } from './IllustrationCheck.types.js';
+/**
+ * A ring with a tick in it: the mark a picture of the product shows when something has gone
+ * through.
+ *
+ * Drawn rather than taken from the glyph set, because it moves in parts — the ring spins and closes,
+ * then the tick draws in — and a glyph is one shape. Both strokes measure their own length as one
+ * (`pathLength`), so the stylesheet draws them in by that fraction whatever the drawing's size.
+ * In the colour of the text around it, like an Icon.
+ *
+ * No script of its own: a mark that resolves on arrival is wrapped to take one (arrives.tsx).
+ */
+export function IllustrationCheck({ size = illustrationCheckDefaults.size, motion, label, ...rest }) {
+    const named = given(label);
+    const mark = (_jsx("span", { ...rest, className: illustrationCheckParts.root, "data-size": size, "data-motion": motion, role: named ? 'img' : undefined, "aria-label": named ? label : undefined, "aria-hidden": named ? undefined : true, children: _jsxs("svg", { viewBox: "0 0 56 56", width: "100%", height: "100%", fill: "none", stroke: "currentColor", "aria-hidden": "true", children: [_jsx("circle", { className: illustrationCheckParts.ring, cx: "28", cy: "28", r: "25", pathLength: 1 }), _jsx("path", { className: illustrationCheckParts.tick, d: "M17 29.5l7.5 7.5L40 21", pathLength: 1, strokeLinecap: "round", strokeLinejoin: "round" })] }) }));
+    return motion === undefined ? mark : _jsx(Arrives, { children: mark });
+}

package/dist/components/core/illustration-check/IllustrationCheck.types.d.ts

@@ -0,0 +1,25 @@
+import type { HTMLAttributes } from 'react';
+export interface IllustrationCheckOwnProps {
+    /**
+     * `lg` — Thirty-two pixels, icon.size.lg. Beside a line of words in a pane
+     * `xl` — Forty-eight pixels, icon.size.xl, and the default. The mark as the subject of a pane
+     */
+    size?: 'lg' | 'xl';
+    /**
+     * `resolve` — The ring spins open like a Spinner for two turns, closes, and the tick draws in — the moment something goes through
+     */
+    motion?: 'resolve';
+    /** Only where the mark says something nothing beside it does — rarely. It names the mark as an image */
+    label?: string;
+}
+export type IllustrationCheckProps = IllustrationCheckOwnProps & Omit<HTMLAttributes<HTMLSpanElement>, 'className' | 'size' | 'motion' | 'label'>;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const illustrationCheckParts: {
+    readonly root: "dds-illustrationcheck";
+    readonly ring: "dds-illustrationcheck__ring";
+    readonly tick: "dds-illustrationcheck__tick";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const illustrationCheckDefaults: {
+    readonly size: "xl";
+};

package/dist/components/core/illustration-check/IllustrationCheck.types.js

@@ -0,0 +1,9 @@
+// GENERATED from illustration-check.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const illustrationCheckParts = {
+    root: 'dds-illustrationcheck',
+    ring: 'dds-illustrationcheck__ring',
+    tick: 'dds-illustrationcheck__tick',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const illustrationCheckDefaults = { size: 'xl' };