@deriv-com/dds-marketing 1.1.3 → 1.2.0

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

@@ -15,18 +15,22 @@ export interface IllustrationSceneOwnProps {
     src: string;
     /** Empty by default, because the card's `label` describes the whole picture and the photograph is decoration. Write one only where the photograph says something the label does not */
     alt?: string;
+    /** The photograph is bright where the card sits — a sunny sky, a white wall — so the glass would come out mid-grey and the card's small lines would fall below AA. A shade under the card only, following the card's placement, so the rest of the photograph keeps its light. */
+    shade?: boolean;
     /** Allowed: IllustrationCard */
     children: ReactNode;
 }
-export type IllustrationSceneProps = IllustrationSceneOwnProps & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'ratio' | 'placement' | 'src' | 'alt'>;
+export type IllustrationSceneProps = IllustrationSceneOwnProps & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'ratio' | 'placement' | 'src' | 'alt' | 'shade'>;
 /** The class each part carries. Apply these — do not retype them. */
 export declare const illustrationSceneParts: {
     readonly root: "dds-illustrationscene";
     readonly image: "dds-illustrationscene__image";
+    readonly shade: "dds-illustrationscene__shade";
 };
 /** Generated so defaults cannot drift from the contract. */
 export declare const illustrationSceneDefaults: {
     readonly ratio: "square";
     readonly placement: "center";
     readonly alt: "";
+    readonly shade: false;
 };

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

@@ -3,6 +3,7 @@
 export const illustrationSceneParts = {
     root: 'dds-illustrationscene',
     image: 'dds-illustrationscene__image',
+    shade: 'dds-illustrationscene__shade',
 };
 /** Generated so defaults cannot drift from the contract. */
-export const illustrationSceneDefaults = { ratio: 'square', placement: 'center', alt: '' };
+export const illustrationSceneDefaults = { ratio: 'square', placement: 'center', alt: '', shade: false };

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

@@ -59,3 +59,68 @@
   justify-self: stretch;
   margin-block-end: var(--space-inset-card);
 }
+
+/*
+ * At the foot, the strip is held to two fifths of the frame and its UI scaled into it.
+ *
+ * A strip is as tall as what it holds, and what it holds keeps its full type sizes however small the
+ * scene is drawn — so on a narrow column the strip outgrew its share and, at a tablet's width, its
+ * photograph. Capped, the pane has a height smaller than its UI, and IllustrationCard's fit scales
+ * the UI down into it as it does for a centred card. Two fifths is about the share the strip takes
+ * on a desktop, where nothing needs scaling, so the composition holds at every width rather than
+ * changing with it. A proportion of the frame, like every share here.
+ */
+:where([data-dds-context="marketing"]) .dds-illustrationscene[data-placement='bottom'] > .dds-illustrationcard {
+  max-block-size: 40%;
+}
+
+/*
+ * The shade, between the photograph and the card.
+ *
+ * It fills the frame's one cell like the photograph and draws only where the card is: up from the
+ * foot at full strength to just above a strip at the foot, then clear by two thirds of the way up,
+ * so the subject above keeps its light; or an oval behind a centred card, full strength under the
+ * card's words and fading from there, so it never stands round the card as a dark ring, and clear at
+ * the frame's edges. color.bg.overlay, which takes a white photograph to a grey that the card's glass and its
+ * small type clear at AA.
+ */
+:where([data-dds-context="marketing"]) .dds-illustrationscene[data-placement='bottom'] .dds-illustrationscene__shade {
+  background-image: linear-gradient(to top, var(--color-bg-overlay), var(--color-bg-overlay) 45%, transparent 70%);
+}
+
+:where([data-dds-context="marketing"]) .dds-illustrationscene[data-placement='center'] .dds-illustrationscene__shade {
+  background-image: radial-gradient(closest-side, var(--color-bg-overlay), var(--color-bg-overlay) 45%, transparent);
+}
+
+/*
+ * The card arrives after its photograph.
+ *
+ * Inside a block's arrival — block-reveal.css — whatever holds the scene comes up at its step, and
+ * the scene with it. The card then waits three steps of motion.duration.stagger more and rises onto
+ * the photograph, so the place lands and then the product does. The holder's step is read from
+ * `--dds-reveal-at`, which the block sets on the part and which the card inherits, so this follows
+ * whatever number the block gives its media rather than guessing past it; with none it counts from
+ * the block's first step. The same distance, duration and curve as every other part's arrival.
+ *
+ * Only inside a reveal — a scene with no `data-revealed` above it is simply drawn — and never for a
+ * reader who asked for less movement, as every arrival. Written a class deeper than block-reveal's
+ * own rule, so a page that marked the card with a step of its own is overruled by this one.
+ */
+:where([data-dds-context="marketing"]) [data-revealed='false'] .dds-illustrationscene > .dds-illustrationcard {
+  opacity: var(--opacity-hidden);
+  transition: none;
+  translate: var(--motion-translate-reveal);
+}
+
+:where([data-dds-context="marketing"]) [data-revealed='true'] .dds-illustrationscene > .dds-illustrationcard {
+  transition-delay: calc((var(--dds-reveal-at, 0) + 3) * var(--motion-duration-stagger));
+  transition-duration: var(--motion-duration-reveal);
+  transition-property: opacity, translate;
+  transition-timing-function: var(--motion-easing-reveal);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) [data-revealed] .dds-illustrationscene > .dds-illustrationcard {
+    transition: none;
+  }
+}

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

@@ -56,27 +56,13 @@
 }
 
 /*
- * A link whose ink belongs to the ground gets its underline back under the pointer.
+ * A link that inherits its ink, with no mark, gets an underline under the pointer.
  *
- * A standalone link at `tone: inherit` — one on a brand card, a dark band, a scrim. It takes
- * the colour around it, so the colour cannot change under the pointer, and
- * `text-decoration-thickness` thickens a line that is not there. Without this it had no hover
- * affordance at all.
- *
- * The list variant had the same hole and answers it differently, below: it has a mark to
- * bring in, and a column of rows that underline one at a time reads as a table of contents
- * being corrected.
- *
- * Product reaches the same conclusion from the other end: its standalone drops the underline
- * except at `tone: inherit`, "because the link is the same colour as the text around it and
- * the rule is the only thing left saying it is a link". It keeps the line at all times. These
- * designs have no line at rest — a footer of fifty underlined rows is a wall — so it arrives
- * with the pointer instead, which is the same argument applied to a denser page.
- *
- * Here rather than in the contract because `structure` carries no state: it says what a
- * variant looks like, not what it looks like while a pointer is over it.
+ * At `tone: inherit` the colour is the ground's and cannot change, so what answers the pointer is
+ * the mark moving, below — the brand link's behaviour, with no line. A link given `showIcon={false}`
+ * has no mark to move, and without this nothing about it would answer the pointer at all.
  */
-:where([data-dds-context="marketing"]) .dds-link[data-variant='standalone'][data-tone='inherit']:hover {
+:where([data-dds-context="marketing"]) .dds-link[data-variant='standalone'][data-tone='inherit']:not(:has(.dds-link__icon-trailing)):hover {
   text-decoration-line: underline;
 }
 

package/dist/components/core/progress-bar/ProgressBar.css

@@ -0,0 +1,101 @@
+/* GENERATED from progressbar.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-progressbar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-gap-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-progressbar .dds-progressbar__track {
+  overflow: hidden;
+  position: relative;
+  background-color: var(--color-bg-track);
+  border-radius: var(--radius-pill);
+}
+
+:where([data-dds-context="marketing"]) .dds-progressbar .dds-progressbar__value-label {
+  font-variant-numeric: tabular-nums;
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"]) .dds-progressbar .dds-progressbar__description-text {
+  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);
+  line-height: var(--font-body-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-progressbar .dds-progressbar__fill {
+  border-radius: var(--radius-pill);
+  transition-duration: var(--motion-duration-normal);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+:where([data-dds-context="marketing"]) .dds-progressbar .dds-progressbar__label {
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-progressbar[data-size="md"] .dds-progressbar__label {
+  font-family: var(--font-label-md-family);
+  font-size: var(--font-label-md-size);
+  font-weight: var(--font-label-md-weight);
+  line-height: var(--font-label-md-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-progressbar[data-size="md"] .dds-progressbar__track {
+  height: var(--size-progressbar-track-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-progressbar[data-size="md"] .dds-progressbar__value-label {
+  font-family: var(--font-label-md-family);
+  font-size: var(--font-label-md-size);
+  line-height: var(--font-label-md-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-progressbar[data-size="sm"] .dds-progressbar__label {
+  font-family: var(--font-label-sm-family);
+  font-size: var(--font-label-sm-size);
+  font-weight: var(--font-label-sm-weight);
+  line-height: var(--font-label-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-progressbar[data-size="sm"] .dds-progressbar__track {
+  height: var(--size-progressbar-track-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-progressbar[data-size="sm"] .dds-progressbar__value-label {
+  font-family: var(--font-label-sm-family);
+  font-size: var(--font-label-sm-size);
+  line-height: var(--font-label-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-progressbar[data-variant="accent"] .dds-progressbar__fill {
+  background-color: var(--color-bg-brand);
+}
+
+:where([data-dds-context="marketing"]) .dds-progressbar[data-variant="default"] .dds-progressbar__fill {
+  background-color: var(--color-bg-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-progressbar[data-variant="error"] .dds-progressbar__fill {
+  background-color: var(--color-bg-danger);
+}
+
+:where([data-dds-context="marketing"]) .dds-progressbar[data-variant="info"] .dds-progressbar__fill {
+  background-color: var(--color-bg-info);
+}
+
+:where([data-dds-context="marketing"]) .dds-progressbar[data-variant="success"] .dds-progressbar__fill {
+  background-color: var(--color-bg-success);
+}
+
+:where([data-dds-context="marketing"]) .dds-progressbar[data-variant="warning"] .dds-progressbar__fill {
+  background-color: var(--color-bg-warning);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-progressbar,
+  :where([data-dds-context="marketing"]) .dds-progressbar * { transition: none !important; }
+}
+

package/dist/components/core/progress-bar/ProgressBar.d.ts

@@ -0,0 +1,5 @@
+import './ProgressBar.css';
+import './progress-bar-impl.css';
+import { type ProgressBarProps } from './ProgressBar.types.js';
+export type { ProgressBarProps };
+export declare function ProgressBar({ size, variant, value, max, label, showLabel, showValueLabel, description, motion, ...rest }: ProgressBarProps): import("react").JSX.Element;

package/dist/components/core/progress-bar/ProgressBar.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './ProgressBar.css';
+import { visuallyHidden } from '../../visually-hidden.js';
+import './progress-bar-impl.css';
+import { given } from '../../given.js';
+import { Arrives } from '../../arrives.js';
+import { progressBarDefaults, progressBarParts } from './ProgressBar.types.js';
+export function ProgressBar({ size = progressBarDefaults.size, variant = progressBarDefaults.variant, value = progressBarDefaults.value, max = progressBarDefaults.max, label, showLabel = progressBarDefaults.showLabel, showValueLabel = progressBarDefaults.showValueLabel, description, motion, ...rest }) {
+    /**
+     * How far along, as a percentage of max.
+     *
+     * Three lines shorter than it was, and none of what went was doing any work of its own.
+     * `value` and `max` were declared as strings because the contract had no number to
+     * declare, so this converted them, guarded the NaN a conversion can produce, and kept a
+     * second copy of max's default for when the conversion failed. All three existed to undo
+     * a declaration rather than to describe a progress bar.
+     *
+     * What stays is the one clamp that is a real decision: a value above max reads as full
+     * rather than overflowing its own track. It is applied to the number rather than to the
+     * percentage now, because it was only ever applied to the width — so a bar given 150 of 100
+     * was drawn full and announced as "150 of 100", the eye and the ear disagreeing about a
+     * control whose whole job is to report one number. A value below nought was worse: `width:
+     * -10%` is not a width, so the fill kept whatever the track gave it and the reading went out
+     * as -10.
+     *
+     * A max of nought or less has no percentage to state — nothing can be a fraction of nothing —
+     * and it read as complete, which is the one answer that is certainly wrong.
+     */
+    const bounded = Math.min(Math.max(value, 0), Math.max(max, 0));
+    const percent = max > 0 ? (bounded / max) * 100 : 0;
+    const bar = (_jsxs("div", { className: progressBarParts.root, role: "progressbar", "aria-label": given(label) ? label : undefined, "aria-valuenow": bounded, "aria-valuemin": 0, "aria-valuemax": max, "data-size": size, "data-variant": variant, "data-motion": motion, ...rest, children: [given(label) || showValueLabel ? (_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }, children: [given(label) ? (_jsx("span", { className: progressBarParts.label, style: showLabel ? undefined : visuallyHidden, children: label })) : null, showValueLabel ? (_jsx("span", { className: progressBarParts['value-label'], children: `${Math.round(percent)}%` })) : null] })) : null, _jsx("div", { className: progressBarParts.track, children: _jsx("div", { className: progressBarParts.fill, style: { height: '100%', width: `${percent}%` } }) }), given(description) ? (_jsx("p", { className: progressBarParts['description-text'], children: description })) : null] }));
+    // A bar that fills on arrival moves once, so only then does it take a script.
+    return motion === undefined ? bar : _jsx(Arrives, { children: bar });
+}

package/dist/components/core/progress-bar/ProgressBar.types.d.ts

@@ -0,0 +1,52 @@
+import type { HTMLAttributes } from 'react';
+export interface ProgressBarOwnProps {
+    /**
+     * `sm` — Dense layouts or inline indicators where vertical space is limited
+     * `md` — Default for standalone progress indicators in forms or dialogs
+     */
+    size?: 'sm' | 'md';
+    /**
+     * `default` — The default, and neutral: no status and no brand. Most progress is merely progress — a step count filling as a form is completed, a bar moving while a file uploads — and the fact that work is moving is all the colour has to say. StepperItem is named and defaults the same way, and the two draw the same neutral, so a stepper and a bar reporting one task agree.
+     * `accent` — Brand-coloured, and asked for rather than arrived at. Reach for it where the page is drawing attention to this progress — the one thing on screen a reader is waiting on. It carries no status: what it adds over the neutral is prominence, not meaning, so a page reaching for it everywhere has spent the emphasis it buys.
+     * `success` — Indicating completion or a successful process
+     * `warning` — Progress that needs attention, such as approaching a limit
+     * `error` — Progress of a process that has encountered a problem
+     * `info` — Informational progress such as downloads, syncing, or data loading
+     */
+    variant?: 'default' | 'accent' | 'success' | 'warning' | 'error' | 'info';
+    /** The amount of work completed — a number between 0 and max. Defaults to 0, which is the honest rendering of nothing started */
+    value?: number;
+    /** The total amount of work differs from the default of 100 */
+    max?: number;
+    /** Naming what is in progress, when the bar is not already named by what surrounds it. Omit it for a bar that is part of a labelled flow — an onboarding stepper under its own heading — and name the bar with aria-labelledby instead */
+    label?: string;
+    /** The label is visible. When false, the label is visually hidden but remains accessible to screen readers */
+    showLabel?: boolean;
+    /** The numeric progress value is visible alongside the bar */
+    showValueLabel?: boolean;
+    /** Freeform context below the bar, such as a step count, status message, or time remaining */
+    description?: string;
+    /**
+     * `fill` — The bar fills from empty to its value once, on arrival, over motion.duration.dramatic — an account set-up three steps in, shown in a pane
+     */
+    motion?: 'fill';
+}
+export type ProgressBarProps = ProgressBarOwnProps & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'size' | 'variant' | 'value' | 'max' | 'label' | 'showLabel' | 'showValueLabel' | 'description' | 'motion'>;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const progressBarParts: {
+    readonly root: "dds-progressbar";
+    readonly track: "dds-progressbar__track";
+    readonly fill: "dds-progressbar__fill";
+    readonly label: "dds-progressbar__label";
+    readonly 'value-label': "dds-progressbar__value-label";
+    readonly 'description-text': "dds-progressbar__description-text";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const progressBarDefaults: {
+    readonly size: "md";
+    readonly variant: "default";
+    readonly value: 0;
+    readonly max: 100;
+    readonly showLabel: true;
+    readonly showValueLabel: true;
+};

package/dist/components/core/progress-bar/ProgressBar.types.js

@@ -0,0 +1,12 @@
+// GENERATED from progress-bar.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const progressBarParts = {
+    root: 'dds-progressbar',
+    track: 'dds-progressbar__track',
+    fill: 'dds-progressbar__fill',
+    label: 'dds-progressbar__label',
+    'value-label': 'dds-progressbar__value-label',
+    'description-text': 'dds-progressbar__description-text',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const progressBarDefaults = { size: 'md', variant: 'default', value: 0, max: 100, showLabel: true, showValueLabel: true };

package/dist/components/core/progress-bar/progress-bar-impl.css

@@ -0,0 +1,45 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * `:where([data-dds-context="marketing"])` confines these rules without contributing
+ * specificity, so every override below still ties or beats exactly what it did
+ * before — several here are written a class deeper than they look in order to
+ * match generated CSS, and a scope that carried weight would break all of them.
+ */
+
+/* Implementation CSS that the contract's staticCss cannot express. */
+
+:where([data-dds-context="marketing"]) .dds-progressbar {
+  width: 100%;
+}
+
+:where([data-dds-context="marketing"]) .dds-progressbar__description-text {
+  margin: 0;
+}
+
+/*
+ * `motion="fill"`: the bar fills from empty to where the task has got to, once, on arrival — over
+ * motion.duration.dramatic, a step of motion.duration.fast after the bar has landed. `data-arrival`
+ * is the bar's own answer from useArrival (arrival.ts): `waiting` holds it empty, `playing` fills
+ * it, and no attribute — a server, a reader who asked for less movement — is the bar at its value.
+ * The value itself, and what is read out, never moves.
+ */
+@keyframes dds-progressbar-fill {
+  from {
+    width: 0;
+  }
+}
+
+:where([data-dds-context="marketing"]) .dds-progressbar[data-motion='fill'][data-arrival] .dds-progressbar__fill {
+  animation: dds-progressbar-fill var(--motion-duration-dramatic) var(--motion-easing-reveal) var(--motion-duration-fast) both;
+}
+
+:where([data-dds-context="marketing"]) .dds-progressbar[data-motion='fill'][data-arrival='waiting'] .dds-progressbar__fill {
+  animation-play-state: paused !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-progressbar[data-motion='fill'][data-arrival] .dds-progressbar__fill {
+    animation: none;
+  }
+}

package/dist/components/core/segmented-control/SegmentedControl.d.ts

@@ -34,4 +34,4 @@ export type { SegmentedControlProps };
  * the reader a value is in force that the page never set, and hide whatever caused the
  * mismatch — a stale piece of state, a segment that has not loaded yet.
  */
-export declare function SegmentedControl({ layout, size, disabled, label, value, onChange, children, ...rest }: SegmentedControlProps): import("react").JSX.Element;
+export declare function SegmentedControl({ layout, size, disabled, label, value, onChange, motion, children, ...rest }: SegmentedControlProps): import("react").JSX.Element;

package/dist/components/core/segmented-control/SegmentedControl.js

@@ -1,8 +1,9 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, cloneElement, isValidElement, useCallback, useEffect, useLayoutEffect, useRef, useState, } from "react";
+import { Children, cloneElement, isValidElement, useCallback, useEffect, useLayoutEffect, useState, } from "react";
 import "./SegmentedControl.css";
 import "./segmented-control-impl.css";
+import { useArrival } from "../../arrival.js";
 import { segmentedControlItemParts } from "../segmented-control-item/SegmentedControlItem.types.js";
 import { segmentedControlDefaults, segmentedControlParts, } from "./SegmentedControl.types.js";
 /**
@@ -70,8 +71,9 @@ function chain(theirs, ours) {
 export function SegmentedControl({ layout = segmentedControlDefaults.layout, size = segmentedControlDefaults.size, disabled = segmentedControlDefaults.disabled, 
 // No fallback, because there is no default to fall back to. The contract requires it:
 // the question the segments are answers to is the one thing nothing else can supply.
-label, value, onChange, children, ...rest }) {
-    const rootRef = useRef(null);
+label, value, onChange, motion, children, ...rest }) {
+    // The row's own element, and — under `motion="slide"` — where its arrival has got to.
+    const [rootRef, arrival] = useArrival(motion === "slide");
     const segments = Children.toArray(children).filter((isValidElement));
     /**
      * Whether the consumer owns which value is in force.
@@ -154,11 +156,15 @@ label, value, onChange, children, ...rest }) {
           on, and every segment's pill landed one row-width minus a segment to the right of it.
         */
         const rtl = getComputedStyle(root).direction === "rtl";
+        const at = (each) => rtl ? each.offsetLeft + each.offsetWidth - root.clientWidth : each.offsetLeft;
+        const first = root.querySelector(`:scope > .${segmentedControlItemParts.root}`) ?? box;
         setPill({
-            x: rtl ? box.offsetLeft + box.offsetWidth - root.clientWidth : box.offsetLeft,
+            x: at(box),
             y: box.offsetTop,
             w: box.offsetWidth,
             h: box.offsetHeight,
+            fromX: at(first),
+            fromW: first.offsetWidth,
         });
     }, [active]);
     // Layout rather than a plain effect: between the two the pill would be painted at its
@@ -244,12 +250,14 @@ label, value, onChange, children, ...rest }) {
         target?.focus();
         target?.click();
     };
-    return (_jsxs("div", { ...rest, ref: rootRef, className: segmentedControlParts.root, role: "radiogroup", "aria-label": label, "aria-disabled": disabled ? true : undefined, "data-layout": layout, "data-size": size, "data-disabled": String(disabled), onKeyDown: onKeyDown, children: [_jsx("span", { className: segmentedControlParts.indicator, hidden: pill === null, style: pill === null
+    return (_jsxs("div", { ...rest, ref: rootRef, className: segmentedControlParts.root, role: "radiogroup", "aria-label": label, "aria-disabled": disabled ? true : undefined, "data-layout": layout, "data-size": size, "data-disabled": String(disabled), "data-motion": motion, "data-arrival": arrival === "still" ? undefined : arrival, onKeyDown: onKeyDown, children: [_jsx("span", { className: segmentedControlParts.indicator, hidden: pill === null, style: pill === null
                     ? undefined
                     : {
                         blockSize: `${pill.h}px`,
                         inlineSize: `${pill.w}px`,
                         translate: `${pill.x}px ${pill.y}px`,
+                        ["--dds-segmentedcontrol-from"]: `${pill.fromX}px ${pill.y}px`,
+                        ["--dds-segmentedcontrol-from-size"]: `${pill.fromW}px`,
                     } }), segments.map((segment, index) => cloneElement(segment, {
                 // Both are the row's to decide, and both overwrite whatever the segment was
                 // given: one chosen value, one height. Availability is the segment's own — the

package/dist/components/core/segmented-control/SegmentedControl.types.d.ts

@@ -21,10 +21,14 @@ export interface SegmentedControlOwnProps {
     value?: string;
     /** Whenever value is — together they are how a page holds the choice. It is called with the chosen segment's value after that segment's own onSelect, so a segment that reports its own presses keeps doing so inside a row */
     onChange?: (value: string) => void;
+    /**
+     * `slide` — The pill starts on the first segment and slides to the chosen one once, on arrival — a trade ticket set to Sell showing it was Buy first. It holds for motion.duration.hold, then slides over motion.duration.shift
+     */
+    motion?: 'slide';
     /** Allowed: SegmentedControlItem */
     children: ReactNode;
 }
-export type SegmentedControlProps = SegmentedControlOwnProps & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'layout' | 'size' | 'disabled' | 'label' | 'value' | 'onChange'>;
+export type SegmentedControlProps = SegmentedControlOwnProps & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'layout' | 'size' | 'disabled' | 'label' | 'value' | 'onChange' | 'motion'>;
 /** The class each part carries. Apply these — do not retype them. */
 export declare const segmentedControlParts: {
     readonly root: "dds-segmentedcontrol";

package/dist/components/core/segmented-control/segmented-control-impl.css

@@ -55,3 +55,38 @@
   .dds-segmentedcontrol__indicator {
   transition-property: translate, inline-size, block-size;
 }
+
+/*
+ * `motion="slide"`: the pill starts on the first segment and slides to the chosen one once, on
+ * arrival — Buy to Sell — over motion.duration.shift on its easing, after holding where it started
+ * for motion.duration.hold. Where it starts is measured with where it lands (the first segment's
+ * place and width, set on the pill as custom properties), so the slide is the stylesheet's.
+ * `data-arrival` is the row's own answer from useArrival (arrival.ts): `waiting` holds the pill on
+ * the first segment, `playing` slides it, and no attribute is the pill where it belongs.
+ */
+@keyframes dds-segmentedcontrol-slide {
+  from {
+    inline-size: var(--dds-segmentedcontrol-from-size);
+    translate: var(--dds-segmentedcontrol-from);
+  }
+}
+
+:where([data-dds-context="marketing"])
+  .dds-segmentedcontrol[data-motion='slide'][data-arrival]
+  .dds-segmentedcontrol__indicator {
+  animation: dds-segmentedcontrol-slide var(--motion-duration-shift) var(--motion-easing-shift) var(--motion-duration-hold) both;
+}
+
+:where([data-dds-context="marketing"])
+  .dds-segmentedcontrol[data-motion='slide'][data-arrival='waiting']
+  .dds-segmentedcontrol__indicator {
+  animation-play-state: paused !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"])
+    .dds-segmentedcontrol[data-motion='slide'][data-arrival]
+    .dds-segmentedcontrol__indicator {
+    animation: none;
+  }
+}

package/dist/components/core/status-dot/StatusDot.d.ts

@@ -32,4 +32,4 @@ export type { StatusDotProps };
  * carrying a tooltip must have — a tooltip makes it a tab stop, and a focusable thing
  * with no name is announced as nothing at all.
  */
-export declare function StatusDot({ variant, pulse, label, tooltip, ...rest }: StatusDotProps): import("react").JSX.Element;
+export declare function StatusDot({ variant, pulse, from, label, tooltip, ...rest }: StatusDotProps): import("react").JSX.Element;

package/dist/components/core/status-dot/StatusDot.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import './StatusDot.css';
 import './status-dot-impl.css';
 import { TooltipAnchor } from '../tooltip/TooltipAnchor.js';
+import { Arrives } from '../../arrives.js';
 import { given } from '../../given.js';
 import { statusDotDefaults, statusDotParts } from './StatusDot.types.js';
 /**
@@ -34,13 +35,15 @@ import { statusDotDefaults, statusDotParts } from './StatusDot.types.js';
  * carrying a tooltip must have — a tooltip makes it a tab stop, and a focusable thing
  * with no name is announced as nothing at all.
  */
-export function StatusDot({ variant = statusDotDefaults.variant, pulse = statusDotDefaults.pulse, label, tooltip, ...rest }) {
+export function StatusDot({ variant = statusDotDefaults.variant, pulse = statusDotDefaults.pulse, from, label, tooltip, ...rest }) {
     const described = given(tooltip);
-    const dot = (_jsx("span", { className: statusDotParts.root, "aria-label": label, "aria-hidden": label === undefined || undefined, "data-variant": variant, "data-pulse": pulse || undefined, tabIndex: described ? 0 : undefined, ...rest }));
+    const dot = (_jsx("span", { className: statusDotParts.root, "aria-label": label, "aria-hidden": label === undefined || undefined, "data-variant": variant, "data-pulse": pulse || undefined, "data-from": from, tabIndex: described ? 0 : undefined, ...rest }));
+    // A dot that starts as another state moves once on arrival, so only then does it take a script.
+    const drawn = from === undefined ? dot : _jsx(Arrives, { children: dot });
     if (!described)
-        return dot;
+        return drawn;
     // The anchor clones the dot to attach its handlers and the aria-describedby, so the
     // description belongs to the element carrying the role — not to the wrapper, which
     // no assistive technology has any reason to visit.
-    return _jsx(TooltipAnchor, { content: tooltip, children: dot });
+    return _jsx(TooltipAnchor, { content: tooltip, children: drawn });
 }

package/dist/components/core/status-dot/StatusDot.types.d.ts

@@ -10,8 +10,16 @@ export interface StatusDotOwnProps {
     variant?: 'accent' | 'success' | 'warning' | 'error' | 'info';
     /** The status is live or actively changing — draws attention to an ongoing state */
     pulse?: boolean;
+    /**
+     * `accent` — Starts as accent before becoming its own state.
+     * `success` — Starts as success before becoming its own state.
+     * `warning` — Starts as warning before becoming its own state.
+     * `error` — Starts as error before becoming its own state.
+     * `info` — Starts as info before becoming its own state.
+     */
+    from?: 'accent' | 'success' | 'warning' | 'error' | 'info';
 }
-export type StatusDotProps = StatusDotOwnProps & Omit<HTMLAttributes<HTMLSpanElement>, 'className' | 'variant' | 'pulse' | 'label' | 'tooltip'> & ({
+export type StatusDotProps = StatusDotOwnProps & Omit<HTMLAttributes<HTMLSpanElement>, 'className' | 'variant' | 'pulse' | 'label' | 'tooltip' | 'from'> & ({
     tooltip?: string;
     label: string;
 } | {