@deriv-com/dds-marketing 1.1.2 → 1.2.0

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

@@ -34,3 +34,57 @@
 :where([data-dds-context="marketing"]) .dds-textarea__message-icon {
   block-size: calc(var(--font-body-sm-size) * var(--font-body-sm-line-height));
 }
+
+/*
+ * 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-textarea-message-in {
+  from {
+    opacity: 0;
+  }
+}
+
+:where([data-dds-context="marketing"]) .dds-textarea .dds-textarea__message {
+  animation: dds-textarea-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.
+ */
+@keyframes dds-textarea-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-textarea[data-status="error"] .dds-textarea__control {
+  animation: dds-textarea-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-textarea .dds-textarea__message,
+  :where([data-dds-context="marketing"]) .dds-textarea[data-status="error"] .dds-textarea__control {
+    animation: none;
+  }
+}

package/dist/components/core/text-input/TextInput.css

@@ -118,6 +118,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-textinput .dds-textinput__message-icon {

package/dist/components/core/text-input/text-input-impl.css

@@ -34,3 +34,66 @@
 :where([data-dds-context="marketing"]) .dds-textinput__message-icon {
   block-size: calc(var(--font-body-sm-size) * var(--font-body-sm-line-height));
 }
+
+/*
+ * 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 there is nothing to transition and 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.
+ *
+ * It plays once, on arrival. A status changing while the message is already showing keeps the
+ * same element, and its colour moves with the transition the contract binds rather than the
+ * whole message blinking out and back.
+ */
+@keyframes dds-textinput-message-in {
+  from {
+    opacity: 0;
+  }
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput .dds-textinput__message {
+  animation: dds-textinput-message-in var(--motion-duration-normal) var(--motion-easing-enter);
+}
+
+/*
+ * The box shakes once when the field turns to an error.
+ *
+ * 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 — typing on in a field that is still wrong does
+ * not shake it at every keystroke. Leaving the error and coming back is a new refusal and shakes
+ * again. Only the box moves; the label above it and the message below hold still, so the words
+ * saying what went wrong can be read while it settles.
+ *
+ * Each swing is smaller than the last, so it reads as a shake that stops rather than a vibration
+ * that is cut off. The swing is symmetric, so it reads the same in either writing direction.
+ */
+@keyframes dds-textinput-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-textinput[data-status="error"] .dds-textinput__control {
+  animation: dds-textinput-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 — and a shake is the movement most likely
+   to be the reason they asked. */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-textinput .dds-textinput__message,
+  :where([data-dds-context="marketing"]) .dds-textinput[data-status="error"] .dds-textinput__control {
+    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);
+}