@deriv-com/dds-marketing 1.1.3 → 1.2.0

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/typography/Typography.d.ts

@@ -1,5 +1,6 @@
 import { type ReactNode } from 'react';
 import './Typography.css';
+import './typography-impl.css';
 import { type TypographyProps } from './Typography.types.js';
 export type { TypographyProps };
 /**
@@ -11,287 +12,6 @@ export type { TypographyProps };
  * than advisory: `as="h2" variant="h1"` is a section heading drawn at hero scale, and a page
  * cannot reach for a size and receive a document structure it did not ask for.
  */
-export declare function Typography({ variant, as, children, ...rest }: TypographyProps & {
+export declare function Typography({ variant, as, motion, from, children, ...rest }: TypographyProps & {
     children?: ReactNode;
-}): import("react").DetailedReactHTMLElement<{
-    className: "dds-typography";
-    'data-variant': "figure" | "h1" | "h2" | "h3" | "h4" | "h5" | "eyebrow" | "subtitle" | "body-lg" | "body-md" | "body-sm";
-    defaultChecked?: boolean | undefined | undefined;
-    defaultValue?: string | number | readonly string[] | undefined;
-    suppressContentEditableWarning?: boolean | undefined | undefined;
-    suppressHydrationWarning?: boolean | undefined | undefined;
-    accessKey?: string | undefined | undefined;
-    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
-    autoFocus?: boolean | undefined | undefined;
-    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
-    contextMenu?: string | undefined | undefined;
-    dir?: string | undefined | undefined;
-    draggable?: (boolean | "true" | "false") | undefined;
-    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    hidden?: boolean | undefined | undefined;
-    id?: string | undefined | undefined;
-    lang?: string | undefined | undefined;
-    nonce?: string | undefined | undefined;
-    slot?: string | undefined | undefined;
-    spellCheck?: (boolean | "true" | "false") | undefined;
-    style?: import("react").CSSProperties | undefined;
-    tabIndex?: number | undefined | undefined;
-    title?: string | undefined | undefined;
-    translate?: "yes" | "no" | undefined | undefined;
-    radioGroup?: string | undefined | undefined;
-    role?: import("react").AriaRole | undefined;
-    about?: string | undefined | undefined;
-    content?: string | undefined | undefined;
-    datatype?: string | undefined | undefined;
-    inlist?: any;
-    prefix?: string | undefined | undefined;
-    property?: string | undefined | undefined;
-    rel?: string | undefined | undefined;
-    resource?: string | undefined | undefined;
-    rev?: string | undefined | undefined;
-    typeof?: string | undefined | undefined;
-    vocab?: string | undefined | undefined;
-    autoCorrect?: string | undefined | undefined;
-    autoSave?: string | undefined | undefined;
-    color?: string | undefined | undefined;
-    itemProp?: string | undefined | undefined;
-    itemScope?: boolean | undefined | undefined;
-    itemType?: string | undefined | undefined;
-    itemID?: string | undefined | undefined;
-    itemRef?: string | undefined | undefined;
-    results?: number | undefined | undefined;
-    security?: string | undefined | undefined;
-    unselectable?: "on" | "off" | undefined | undefined;
-    popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
-    popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
-    popoverTarget?: string | undefined | undefined;
-    inert?: boolean | undefined | undefined;
-    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
-    is?: string | undefined | undefined;
-    exportparts?: string | undefined | undefined;
-    part?: string | undefined | undefined;
-    "aria-activedescendant"?: string | undefined | undefined;
-    "aria-atomic"?: (boolean | "true" | "false") | undefined;
-    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
-    "aria-braillelabel"?: string | undefined | undefined;
-    "aria-brailleroledescription"?: string | undefined | undefined;
-    "aria-busy"?: (boolean | "true" | "false") | undefined;
-    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
-    "aria-colcount"?: number | undefined | undefined;
-    "aria-colindex"?: number | undefined | undefined;
-    "aria-colindextext"?: string | undefined | undefined;
-    "aria-colspan"?: number | undefined | undefined;
-    "aria-controls"?: string | undefined | undefined;
-    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
-    "aria-describedby"?: string | undefined | undefined;
-    "aria-description"?: string | undefined | undefined;
-    "aria-details"?: string | undefined | undefined;
-    "aria-disabled"?: (boolean | "true" | "false") | undefined;
-    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
-    "aria-errormessage"?: string | undefined | undefined;
-    "aria-expanded"?: (boolean | "true" | "false") | undefined;
-    "aria-flowto"?: string | undefined | undefined;
-    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
-    "aria-hidden"?: (boolean | "true" | "false") | undefined;
-    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
-    "aria-keyshortcuts"?: string | undefined | undefined;
-    "aria-label"?: string | undefined | undefined;
-    "aria-labelledby"?: string | undefined | undefined;
-    "aria-level"?: number | undefined | undefined;
-    "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
-    "aria-modal"?: (boolean | "true" | "false") | undefined;
-    "aria-multiline"?: (boolean | "true" | "false") | undefined;
-    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
-    "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
-    "aria-owns"?: string | undefined | undefined;
-    "aria-placeholder"?: string | undefined | undefined;
-    "aria-posinset"?: number | undefined | undefined;
-    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
-    "aria-readonly"?: (boolean | "true" | "false") | undefined;
-    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
-    "aria-required"?: (boolean | "true" | "false") | undefined;
-    "aria-roledescription"?: string | undefined | undefined;
-    "aria-rowcount"?: number | undefined | undefined;
-    "aria-rowindex"?: number | undefined | undefined;
-    "aria-rowindextext"?: string | undefined | undefined;
-    "aria-rowspan"?: number | undefined | undefined;
-    "aria-selected"?: (boolean | "true" | "false") | undefined;
-    "aria-setsize"?: number | undefined | undefined;
-    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
-    "aria-valuemax"?: number | undefined | undefined;
-    "aria-valuemin"?: number | undefined | undefined;
-    "aria-valuenow"?: number | undefined | undefined;
-    "aria-valuetext"?: string | undefined | undefined;
-    dangerouslySetInnerHTML?: {
-        __html: string | TrustedHTML;
-    } | undefined | undefined;
-    onCopy?: import("react").ClipboardEventHandler<HTMLElement> | undefined;
-    onCopyCapture?: import("react").ClipboardEventHandler<HTMLElement> | undefined;
-    onCut?: import("react").ClipboardEventHandler<HTMLElement> | undefined;
-    onCutCapture?: import("react").ClipboardEventHandler<HTMLElement> | undefined;
-    onPaste?: import("react").ClipboardEventHandler<HTMLElement> | undefined;
-    onPasteCapture?: import("react").ClipboardEventHandler<HTMLElement> | undefined;
-    onCompositionEnd?: import("react").CompositionEventHandler<HTMLElement> | undefined;
-    onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLElement> | undefined;
-    onCompositionStart?: import("react").CompositionEventHandler<HTMLElement> | undefined;
-    onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLElement> | undefined;
-    onCompositionUpdate?: import("react").CompositionEventHandler<HTMLElement> | undefined;
-    onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLElement> | undefined;
-    onFocus?: import("react").FocusEventHandler<HTMLElement> | undefined;
-    onFocusCapture?: import("react").FocusEventHandler<HTMLElement> | undefined;
-    onBlur?: import("react").FocusEventHandler<HTMLElement> | undefined;
-    onBlurCapture?: import("react").FocusEventHandler<HTMLElement> | undefined;
-    onChange?: import("react").ChangeEventHandler<HTMLElement, Element> | undefined;
-    onChangeCapture?: import("react").ChangeEventHandler<HTMLElement, Element> | undefined;
-    onBeforeInput?: import("react").InputEventHandler<HTMLElement> | undefined;
-    onBeforeInputCapture?: import("react").InputEventHandler<HTMLElement> | undefined;
-    onInput?: import("react").InputEventHandler<HTMLElement> | undefined;
-    onInputCapture?: import("react").InputEventHandler<HTMLElement> | undefined;
-    onReset?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onResetCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onSubmit?: import("react").SubmitEventHandler<HTMLElement> | undefined;
-    onSubmitCapture?: import("react").SubmitEventHandler<HTMLElement> | undefined;
-    onInvalid?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onInvalidCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onLoad?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onLoadCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onError?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onErrorCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onKeyDown?: import("react").KeyboardEventHandler<HTMLElement> | undefined;
-    onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLElement> | undefined;
-    onKeyPress?: import("react").KeyboardEventHandler<HTMLElement> | undefined;
-    onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLElement> | undefined;
-    onKeyUp?: import("react").KeyboardEventHandler<HTMLElement> | undefined;
-    onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLElement> | undefined;
-    onAbort?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onAbortCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onCanPlay?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onCanPlayCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onCanPlayThrough?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onDurationChange?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onDurationChangeCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onEmptied?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onEmptiedCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onEncrypted?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onEncryptedCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onEnded?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onEndedCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onLoadedData?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onLoadedDataCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onLoadedMetadata?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onLoadStart?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onLoadStartCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onPause?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onPauseCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onPlay?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onPlayCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onPlaying?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onPlayingCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onProgress?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onProgressCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onRateChange?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onRateChangeCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onSeeked?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onSeekedCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onSeeking?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onSeekingCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onStalled?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onStalledCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onSuspend?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onSuspendCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onTimeUpdate?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onVolumeChange?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onWaiting?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onWaitingCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onAuxClick?: import("react").MouseEventHandler<HTMLElement> | undefined;
-    onAuxClickCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
-    onClick?: import("react").MouseEventHandler<HTMLElement> | undefined;
-    onClickCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
-    onContextMenu?: import("react").MouseEventHandler<HTMLElement> | undefined;
-    onContextMenuCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
-    onDoubleClick?: import("react").MouseEventHandler<HTMLElement> | undefined;
-    onDoubleClickCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
-    onDrag?: import("react").DragEventHandler<HTMLElement> | undefined;
-    onDragCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
-    onDragEnd?: import("react").DragEventHandler<HTMLElement> | undefined;
-    onDragEndCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
-    onDragEnter?: import("react").DragEventHandler<HTMLElement> | undefined;
-    onDragEnterCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
-    onDragExit?: import("react").DragEventHandler<HTMLElement> | undefined;
-    onDragExitCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
-    onDragLeave?: import("react").DragEventHandler<HTMLElement> | undefined;
-    onDragLeaveCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
-    onDragOver?: import("react").DragEventHandler<HTMLElement> | undefined;
-    onDragOverCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
-    onDragStart?: import("react").DragEventHandler<HTMLElement> | undefined;
-    onDragStartCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
-    onDrop?: import("react").DragEventHandler<HTMLElement> | undefined;
-    onDropCapture?: import("react").DragEventHandler<HTMLElement> | undefined;
-    onMouseDown?: import("react").MouseEventHandler<HTMLElement> | undefined;
-    onMouseDownCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
-    onMouseEnter?: import("react").MouseEventHandler<HTMLElement> | undefined;
-    onMouseLeave?: import("react").MouseEventHandler<HTMLElement> | undefined;
-    onMouseMove?: import("react").MouseEventHandler<HTMLElement> | undefined;
-    onMouseMoveCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
-    onMouseOut?: import("react").MouseEventHandler<HTMLElement> | undefined;
-    onMouseOutCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
-    onMouseOver?: import("react").MouseEventHandler<HTMLElement> | undefined;
-    onMouseOverCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
-    onMouseUp?: import("react").MouseEventHandler<HTMLElement> | undefined;
-    onMouseUpCapture?: import("react").MouseEventHandler<HTMLElement> | undefined;
-    onSelect?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onSelectCapture?: import("react").ReactEventHandler<HTMLElement> | undefined;
-    onTouchCancel?: import("react").TouchEventHandler<HTMLElement> | undefined;
-    onTouchCancelCapture?: import("react").TouchEventHandler<HTMLElement> | undefined;
-    onTouchEnd?: import("react").TouchEventHandler<HTMLElement> | undefined;
-    onTouchEndCapture?: import("react").TouchEventHandler<HTMLElement> | undefined;
-    onTouchMove?: import("react").TouchEventHandler<HTMLElement> | undefined;
-    onTouchMoveCapture?: import("react").TouchEventHandler<HTMLElement> | undefined;
-    onTouchStart?: import("react").TouchEventHandler<HTMLElement> | undefined;
-    onTouchStartCapture?: import("react").TouchEventHandler<HTMLElement> | undefined;
-    onPointerDown?: import("react").PointerEventHandler<HTMLElement> | undefined;
-    onPointerDownCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
-    onPointerMove?: import("react").PointerEventHandler<HTMLElement> | undefined;
-    onPointerMoveCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
-    onPointerUp?: import("react").PointerEventHandler<HTMLElement> | undefined;
-    onPointerUpCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
-    onPointerCancel?: import("react").PointerEventHandler<HTMLElement> | undefined;
-    onPointerCancelCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
-    onPointerEnter?: import("react").PointerEventHandler<HTMLElement> | undefined;
-    onPointerLeave?: import("react").PointerEventHandler<HTMLElement> | undefined;
-    onPointerOver?: import("react").PointerEventHandler<HTMLElement> | undefined;
-    onPointerOverCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
-    onPointerOut?: import("react").PointerEventHandler<HTMLElement> | undefined;
-    onPointerOutCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
-    onGotPointerCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
-    onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
-    onLostPointerCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
-    onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLElement> | undefined;
-    onScroll?: import("react").UIEventHandler<HTMLElement> | undefined;
-    onScrollCapture?: import("react").UIEventHandler<HTMLElement> | undefined;
-    onScrollEnd?: import("react").UIEventHandler<HTMLElement> | undefined;
-    onScrollEndCapture?: import("react").UIEventHandler<HTMLElement> | undefined;
-    onWheel?: import("react").WheelEventHandler<HTMLElement> | undefined;
-    onWheelCapture?: import("react").WheelEventHandler<HTMLElement> | undefined;
-    onAnimationStart?: import("react").AnimationEventHandler<HTMLElement> | undefined;
-    onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLElement> | undefined;
-    onAnimationEnd?: import("react").AnimationEventHandler<HTMLElement> | undefined;
-    onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLElement> | undefined;
-    onAnimationIteration?: import("react").AnimationEventHandler<HTMLElement> | undefined;
-    onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLElement> | undefined;
-    onToggle?: import("react").ToggleEventHandler<HTMLElement> | undefined;
-    onBeforeToggle?: import("react").ToggleEventHandler<HTMLElement> | undefined;
-    onTransitionCancel?: import("react").TransitionEventHandler<HTMLElement> | undefined;
-    onTransitionCancelCapture?: import("react").TransitionEventHandler<HTMLElement> | undefined;
-    onTransitionEnd?: import("react").TransitionEventHandler<HTMLElement> | undefined;
-    onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLElement> | undefined;
-    onTransitionRun?: import("react").TransitionEventHandler<HTMLElement> | undefined;
-    onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLElement> | undefined;
-    onTransitionStart?: import("react").TransitionEventHandler<HTMLElement> | undefined;
-    onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLElement> | undefined;
-}, HTMLElement>;
+}): import("react").JSX.Element;

package/dist/components/core/typography/Typography.js

@@ -1,5 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement } from 'react';
 import './Typography.css';
+import './typography-impl.css';
+import { TypographyMotion } from './TypographyMotion.js';
 import { typographyDefaults, typographyParts } from './Typography.types.js';
 /**
  * Copy, set in one of the page's type roles.
@@ -10,7 +13,12 @@ import { typographyDefaults, typographyParts } from './Typography.types.js';
  * than advisory: `as="h2" variant="h1"` is a section heading drawn at hero scale, and a page
  * cannot reach for a size and receive a document structure it did not ask for.
  */
-export function Typography({ variant = typographyDefaults.variant, as = typographyDefaults.as, children, ...rest }) {
+export function Typography({ variant = typographyDefaults.variant, as = typographyDefaults.as, motion, from, children, ...rest }) {
+    // Text that moves once on arrival is drawn by a client component of its own, so the text that
+    // does not move — nearly all of it — keeps no script.
+    if (motion !== undefined || (from !== undefined && from !== '')) {
+        return (_jsx(TypographyMotion, { as: as, className: typographyParts.root, variant: variant, motion: motion, from: from, rest: rest, children: children }));
+    }
     /**
      * `createElement` rather than a component variable.
      *

package/dist/components/core/typography/Typography.types.d.ts

@@ -1,19 +1,5 @@
 import type { HTMLAttributes, ReactNode } from 'react';
 export interface TypographyOwnProps {
-    /**
-     * `h1` — The line a landing page is built around, and there is one of them
-     * `h2` — A headline opening a major section of a long page
-     * `h3` — A section heading under an h1 and h2
-     * `h4` — A subsection heading, the first step below the extrabold the larger headings carry
-     * `h5` — A label over a group of cards, a list, or a short block of copy
-     * `subtitle` — A secondary title under a heading — a pricing plan's name, a sub-feature group
-     * `body-lg` — An introductory paragraph under a headline, a hero description, a section intro
-     * `body-md` — The default, and most of the copy on a page — feature descriptions, article text
-     * `body-sm` — De-emphasised copy: legal lines, disclaimers, help text
-     * `eyebrow` — A category label above a headline — a section tag, a plan badge. Drawn in capitals by this component, so write it in the case it should be read in
-     * `figure` — A number that is the point of its block — a count, a total, a span of time — with a label under it
-     */
-    variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'subtitle' | 'body-lg' | 'body-md' | 'body-sm' | 'eyebrow' | 'figure';
     /**
      * `p` — The default, and any block of prose
      * `span` — Text inside a sentence, or inside something that is already a block
@@ -25,10 +11,18 @@ export interface TypographyOwnProps {
      * `h6` — The deepest heading level
      */
     as?: 'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /** The words this text starts as, which give way once to the words it is — "Opening…" to "Position open", "EUR/USD · Buy" to "EUR/USD · Sell". The first words hold for motion.duration.hold after arrival, rise away, and the text's own words come up into their place. Plain text only. Beside a StatusDot given `from` as well, the dot changes with the words */
+    from?: string;
     /** Allowed: text */
     children: ReactNode;
 }
-export type TypographyProps = TypographyOwnProps & Omit<HTMLAttributes<HTMLElement>, 'className' | 'variant' | 'as'>;
+export type TypographyProps = TypographyOwnProps & Omit<HTMLAttributes<HTMLElement>, 'className' | 'variant' | 'as' | 'motion' | 'from'> & ({
+    variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'subtitle' | 'body-lg' | 'body-md' | 'body-sm' | 'eyebrow' | 'figure';
+    motion?: undefined;
+} | {
+    variant: Exclude<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'subtitle' | 'body-lg' | 'body-md' | 'body-sm' | 'eyebrow' | 'figure', 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'subtitle' | 'body-lg' | 'body-md' | 'body-sm' | 'eyebrow'>;
+    motion?: 'roll';
+});
 /** The class each part carries. Apply these — do not retype them. */
 export declare const typographyParts: {
     readonly root: "dds-typography";

package/dist/components/core/typography/TypographyMotion.d.ts

@@ -0,0 +1,28 @@
+import { type ReactNode } from 'react';
+interface TypographyMotionProps {
+    as: string;
+    className: string;
+    variant: string;
+    motion?: 'roll' | undefined;
+    from?: string | undefined;
+    children?: ReactNode;
+    rest: Record<string, unknown>;
+}
+/**
+ * Typography that moves once on arrival — a figure that rolls into place, or words that give way
+ * to the ones they become. Kept apart from Typography itself so the text that does not move, which
+ * is nearly all of it, stays a component with no script.
+ *
+ * Both are drawn from the text as given, so they need a string: a figure with markup inside it has
+ * no digits to roll, and words to swap are words. The moving copies are paint, hidden from
+ * assistive technology; the real text is in the DOM throughout, so what is read is the final text.
+ */
+export declare function TypographyMotion({ as, className, variant, motion, from, children, rest }: TypographyMotionProps): import("react").ReactElement<{
+    ref: import("react").RefObject<HTMLElement | null>;
+    className: string;
+    'data-variant': string;
+    'data-motion': "roll" | undefined;
+    'data-from': string | undefined;
+    'data-arrival': "waiting" | "playing" | undefined;
+}, string | import("react").JSXElementConstructor<any>>;
+export {};

package/dist/components/core/typography/TypographyMotion.js

@@ -0,0 +1,43 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement } from 'react';
+import { useArrival } from '../../arrival.js';
+import { visuallyHidden } from '../../visually-hidden.js';
+/**
+ * Typography that moves once on arrival — a figure that rolls into place, or words that give way
+ * to the ones they become. Kept apart from Typography itself so the text that does not move, which
+ * is nearly all of it, stays a component with no script.
+ *
+ * Both are drawn from the text as given, so they need a string: a figure with markup inside it has
+ * no digits to roll, and words to swap are words. The moving copies are paint, hidden from
+ * assistive technology; the real text is in the DOM throughout, so what is read is the final text.
+ */
+export function TypographyMotion({ as, className, variant, motion, from, children, rest }) {
+    const [held, arrival] = useArrival();
+    const text = typeof children === 'string' || typeof children === 'number' ? String(children) : null;
+    let body = children;
+    if (text !== null && motion === 'roll') {
+        let step = 0;
+        body = (_jsxs(_Fragment, { children: [_jsx("span", { style: visuallyHidden, children: text }), _jsx("span", { "aria-hidden": "true", "data-roll": "", children: [...text].map((character, at) => {
+                        if (!/\d/.test(character))
+                            return _jsx("span", { children: character }, at);
+                        const digit = Number(character);
+                        const style = { '--dds-typography-digit': digit, '--dds-typography-step': step };
+                        step += 1;
+                        return (_jsx("span", { "data-digit": "", style: style, children: _jsx("span", { "data-reel": "", children: '0123456789'.split('').map((each) => (_jsx("span", { children: each }, each))) }) }, at));
+                    }) })] }));
+    }
+    else if (text !== null && from !== undefined && from !== '') {
+        body = (_jsxs("span", { "data-swap": "", children: [_jsx("span", { "data-word": "from", "aria-hidden": "true", children: from }), _jsx("span", { "data-word": "to", children: text })] }));
+    }
+    return createElement(as, {
+        ...rest,
+        ref: held,
+        className,
+        'data-variant': variant,
+        'data-motion': motion,
+        // `motion` wins where both are given: the figure rolls and the earlier words are not drawn.
+        'data-from': motion === undefined && from !== undefined && from !== '' ? '' : undefined,
+        'data-arrival': arrival === 'still' ? undefined : arrival,
+    }, body);
+}

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

@@ -0,0 +1,106 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * Text that moves once on arrival (TypographyMotion.tsx). `data-arrival` is the text's own answer
+ * from useArrival (arrival.ts): `waiting` holds the motion at its first frame, `playing` runs it,
+ * and no attribute — a server, a reader who asked for less movement — is the text at rest. The
+ * package's motion tokens throughout.
+ */
+
+/*
+ * `motion="roll"`: each digit is a reel of nought to nine, one line tall and clipped to it, set on
+ * its digit. Arriving, each reel rolls up from nought to its digit over motion.duration.dramatic, a
+ * step of motion.duration.stagger behind the digit before it, so the figure settles left to right.
+ * `lh` so a reel's lines are the figure's own lines whatever its type role.
+ */
+:where([data-dds-context="marketing"]) .dds-typography [data-digit] {
+  block-size: 1lh;
+  display: inline-block;
+  overflow: clip;
+  vertical-align: top;
+}
+
+:where([data-dds-context="marketing"]) .dds-typography [data-reel] {
+  display: flex;
+  flex-direction: column;
+  translate: 0 calc(var(--dds-typography-digit, 0) * -1lh);
+}
+
+:where([data-dds-context="marketing"]) .dds-typography [data-reel] > * {
+  block-size: 1lh;
+}
+
+@keyframes dds-typography-roll {
+  from {
+    translate: 0 0;
+  }
+}
+
+:where([data-dds-context="marketing"]) .dds-typography[data-arrival] [data-reel] {
+  animation: dds-typography-roll var(--motion-duration-dramatic) var(--motion-easing-reveal) both;
+  animation-delay: calc(var(--dds-typography-step, 0) * var(--motion-duration-stagger));
+}
+
+/*
+ * `from`: the words the text starts as, in the same cell as the words it becomes. At rest only the
+ * final words are drawn. Arriving, the first words hold for motion.duration.hold, rise away over
+ * motion.duration.normal, and the final ones come up into their place over motion.duration.slow.
+ */
+:where([data-dds-context="marketing"]) .dds-typography [data-swap] {
+  display: inline-grid;
+}
+
+:where([data-dds-context="marketing"]) .dds-typography [data-swap] > * {
+  grid-area: 1 / 1;
+}
+
+:where([data-dds-context="marketing"]) .dds-typography [data-word='from'] {
+  display: none;
+}
+
+:where([data-dds-context="marketing"]) .dds-typography[data-arrival] [data-word='from'] {
+  display: inline;
+}
+
+@keyframes dds-typography-swap-leave {
+  from {
+    visibility: visible;
+  }
+
+  to {
+    opacity: var(--opacity-hidden);
+    translate: 0 calc(-1 * var(--space-gap-xs));
+    visibility: hidden;
+  }
+}
+
+@keyframes dds-typography-swap-arrive {
+  from {
+    opacity: var(--opacity-hidden);
+    translate: 0 var(--space-gap-xs);
+  }
+}
+
+:where([data-dds-context="marketing"]) .dds-typography[data-arrival] [data-word='from'] {
+  animation: dds-typography-swap-leave var(--motion-duration-normal) var(--motion-easing-reveal) var(--motion-duration-hold) both;
+}
+
+:where([data-dds-context="marketing"]) .dds-typography[data-arrival] [data-word='to'] {
+  animation: dds-typography-swap-arrive var(--motion-duration-slow) var(--motion-easing-reveal)
+    calc(var(--motion-duration-hold) + var(--motion-duration-normal)) both;
+}
+
+/* Waiting: held at the first frame. */
+:where([data-dds-context="marketing"]) .dds-typography[data-arrival='waiting'] :is([data-reel], [data-word]) {
+  animation-play-state: paused !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-typography[data-arrival] :is([data-reel], [data-word]) {
+    animation: none;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-typography[data-arrival] [data-word='from'] {
+    display: none;
+  }
+}