@deriv-com/dds-marketing 1.1.2 → 1.2.0

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/segmented-control-item/SegmentedControlItem.types.d.ts

@@ -10,7 +10,7 @@ export interface SegmentedControlItemOwnProps {
     value: string;
     /** Always — it is the segment's accessible name as well as its words, and a radio with no name is announced as a control with nothing in it. One or two words: a row is scanned across, and the segment that needs a phrase is a choice that wanted a list */
     label: string;
-    /** The glyph tells the modes apart faster than the words do — a card and a bank beside two payment methods. Import it from @deriv-com/quill-icons-web and pass the element */
+    /** The glyph tells the modes apart faster than the words do — a card and a bank beside two payment methods. Import it from @deriv-com/dds-marketing/icons and pass the element */
     icon?: ReactNode;
     /** This segment reports its own presses — logging which plan a visitor looked at, say. It is called with this segment's value, and SegmentedControl chains its own handler after it rather than replacing it */
     onSelect?: (value: string) => void;

package/dist/components/core/select/Select.css

@@ -151,6 +151,8 @@
   gap: var(--space-gap-xs);
   letter-spacing: var(--font-body-sm-letter-spacing);
   line-height: var(--font-body-sm-line-height);
+  transition-duration: var(--motion-duration-fast);
+  transition-timing-function: var(--motion-easing-standard);
 }
 
 :where([data-dds-context="marketing"]) .dds-select .dds-select__message-icon {

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

@@ -112,3 +112,61 @@
     animation: none;
   }
 }
+
+/*
+ * The status message fades in when it arrives.
+ *
+ * A contract binds transitions, and a transition needs a value to move from: the message is not
+ * in the DOM until a status is reported, so only a keyframe can bring it in. Opacity alone — the
+ * message takes the helper's place rather than pushing the row down, so there is no distance to
+ * travel, and moving it would shift the words being read. A status changing while the message is
+ * showing keeps the same element, and its colour moves with the transition the contract binds.
+ */
+@keyframes dds-select-message-in {
+  from {
+    opacity: 0;
+  }
+}
+
+:where([data-dds-context="marketing"]) .dds-select .dds-select__message {
+  animation: dds-select-message-in var(--motion-duration-normal) var(--motion-easing-enter);
+}
+
+/*
+ * The box shakes once when the field turns to an error, as TextInput's does.
+ *
+ * Once, on arrival: the animation is attached by the error status, so it plays when the status
+ * becomes error and not again while it stays one. Only the box moves; the label and the
+ * message hold still, so the words saying what went wrong can be read while it settles.
+ *
+ * Not while the list is open. The popup is drawn inside the box, so shaking the box would shake
+ * the answers being read along with it. A status that arrives while it is open shakes the box
+ * as the list closes, which is the moment the answer is handed in.
+ */
+@keyframes dds-select-shake {
+  20% {
+    translate: calc(var(--motion-distance-shake) * -1) 0;
+  }
+  40% {
+    translate: var(--motion-distance-shake) 0;
+  }
+  60% {
+    translate: calc(var(--motion-distance-shake) * -0.5) 0;
+  }
+  80% {
+    translate: calc(var(--motion-distance-shake) * 0.5) 0;
+  }
+}
+
+:where([data-dds-context="marketing"]) .dds-select[data-status="error"]:not(:has([aria-expanded="true"])) .dds-select__control {
+  animation: dds-select-shake var(--motion-duration-slow) var(--motion-easing-standard);
+}
+
+/* The generated reduce block is written from the token bindings and these are not. A reader who
+   has asked for less movement has asked for this too. */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-select .dds-select__message,
+  :where([data-dds-context="marketing"]) .dds-select[data-status="error"]:not(:has([aria-expanded="true"])) .dds-select__control {
+    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;
 } | {

package/dist/components/core/status-dot/status-dot-impl.css

@@ -40,3 +40,104 @@
 :where([data-dds-context="marketing"]) .dds-tooltip-anchor:has(> .dds-statusdot) {
   flex-shrink: 0;
 }
+
+/*
+ * `from`: the dot starts as another state and becomes its own once, on arrival — "Opening…" in
+ * info's blue becoming "Position open" in success's green. `data-arrival` is the dot's own answer
+ * from useArrival (arrival.ts): `waiting` holds it in its first state, `playing` runs it, and no
+ * attribute — a server, a reader who asked for less movement — is the dot in its own state.
+ *
+ * It holds the first state for motion.duration.hold — the same hold Typography's `from` gives its
+ * words, so a dot and the words beside it change together — then turns in one step, and a dot that
+ * pulses starts pulsing only then: a live state loops; the state before it was not live.
+ */
+/* One keyframe per state the dot can start in, each naming its own colour token. */
+@keyframes dds-statusdot-from-accent {
+  from {
+    background-color: var(--color-bg-brand);
+  }
+}
+
+@keyframes dds-statusdot-from-error {
+  from {
+    background-color: var(--color-bg-danger);
+  }
+}
+
+@keyframes dds-statusdot-from-info {
+  from {
+    background-color: var(--color-bg-info);
+  }
+}
+
+@keyframes dds-statusdot-from-success {
+  from {
+    background-color: var(--color-bg-success);
+  }
+}
+
+@keyframes dds-statusdot-from-warning {
+  from {
+    background-color: var(--color-bg-warning);
+  }
+}
+
+:where([data-dds-context="marketing"]) .dds-statusdot[data-from='accent'][data-arrival] {
+  animation: dds-statusdot-from-accent var(--motion-duration-hold) steps(1, end) both;
+}
+
+:where([data-dds-context="marketing"]) .dds-statusdot[data-from='accent'][data-pulse][data-arrival] {
+  animation:
+    dds-statusdot-from-accent var(--motion-duration-hold) steps(1, end) both,
+    dds-statusdot-pulse var(--motion-duration-pulse) var(--motion-easing-enter) var(--motion-duration-hold) infinite;
+}
+
+:where([data-dds-context="marketing"]) .dds-statusdot[data-from='error'][data-arrival] {
+  animation: dds-statusdot-from-error var(--motion-duration-hold) steps(1, end) both;
+}
+
+:where([data-dds-context="marketing"]) .dds-statusdot[data-from='error'][data-pulse][data-arrival] {
+  animation:
+    dds-statusdot-from-error var(--motion-duration-hold) steps(1, end) both,
+    dds-statusdot-pulse var(--motion-duration-pulse) var(--motion-easing-enter) var(--motion-duration-hold) infinite;
+}
+
+:where([data-dds-context="marketing"]) .dds-statusdot[data-from='info'][data-arrival] {
+  animation: dds-statusdot-from-info var(--motion-duration-hold) steps(1, end) both;
+}
+
+:where([data-dds-context="marketing"]) .dds-statusdot[data-from='info'][data-pulse][data-arrival] {
+  animation:
+    dds-statusdot-from-info var(--motion-duration-hold) steps(1, end) both,
+    dds-statusdot-pulse var(--motion-duration-pulse) var(--motion-easing-enter) var(--motion-duration-hold) infinite;
+}
+
+:where([data-dds-context="marketing"]) .dds-statusdot[data-from='success'][data-arrival] {
+  animation: dds-statusdot-from-success var(--motion-duration-hold) steps(1, end) both;
+}
+
+:where([data-dds-context="marketing"]) .dds-statusdot[data-from='success'][data-pulse][data-arrival] {
+  animation:
+    dds-statusdot-from-success var(--motion-duration-hold) steps(1, end) both,
+    dds-statusdot-pulse var(--motion-duration-pulse) var(--motion-easing-enter) var(--motion-duration-hold) infinite;
+}
+
+:where([data-dds-context="marketing"]) .dds-statusdot[data-from='warning'][data-arrival] {
+  animation: dds-statusdot-from-warning var(--motion-duration-hold) steps(1, end) both;
+}
+
+:where([data-dds-context="marketing"]) .dds-statusdot[data-from='warning'][data-pulse][data-arrival] {
+  animation:
+    dds-statusdot-from-warning var(--motion-duration-hold) steps(1, end) both,
+    dds-statusdot-pulse var(--motion-duration-pulse) var(--motion-easing-enter) var(--motion-duration-hold) infinite;
+}
+
+:where([data-dds-context="marketing"]) .dds-statusdot[data-from][data-arrival='waiting'] {
+  animation-play-state: paused !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-statusdot[data-from][data-arrival] {
+    animation: none;
+  }
+}

package/dist/components/core/text-area/TextArea.css

@@ -92,6 +92,8 @@
   gap: var(--space-gap-xs);
   letter-spacing: var(--font-body-sm-letter-spacing);
   line-height: var(--font-body-sm-line-height);
+  transition-duration: var(--motion-duration-fast);
+  transition-timing-function: var(--motion-easing-standard);
 }
 
 :where([data-dds-context="marketing"]) .dds-textarea .dds-textarea__message-icon {