MotionControl

Usage

All Variants

variant picks the control; the caller supplies every option and command.

Best Practices

• Keep business results in the application: a menu command is not a backend success, a PiP state is not a platform switch, and download is only a request.
• Use stable value keys and localize labels separately; supply categories, dates, frequencies, tabs, and commands yourself.
• Bind both v-model and v-model:items for closeable tabs. Set minItems="1" to keep the last tab, and allocate real IDs from add.
• Keep the item slot non-interactive; put independent actions outside the native buttons and rich content in the panel slot.
• Drive status and progress from the real transfer, and handle cancellation and errors there.

API Reference

Props

Events

Slots

Types

MotionControlItem

MotionControlLabels

Keys and defaults of labels, exported as MOTION_CONTROL_DEFAULT_LABELS:

{
  control: 'Motion control', choose: 'Choose an option', frequency: 'Frequency',
  confirm: 'Confirm selection', add: 'Add tab', close: 'Close',
  increase: 'Increase', decrease: 'Decrease', back: 'Back', forward: 'Forward',
  actions: 'Actions', details: 'View details', action: 'Action', launch: 'Launch',
  link: 'Open link', preview: 'Preview', help: 'Help', download: 'Download',
  downloading: 'Downloading', downloaded: 'Downloaded', downloadError: 'Download failed',
  pip: 'Enter picture in picture', pipOff: 'Exit picture in picture',
  save: 'Save item', saved: 'Saved', follow: 'Follow', following: 'Following',
  grid: 'Grid view', list: 'List view', stack: 'Stack view', light: 'Light mode',
  dark: 'Dark mode', progress: 'Progress', page: 'Page',
}

Source Mapping

Paths are relative to upstream src/components/css-animations/. MOTION_CONTROL_SOURCES exports each entry's full path, line range, upstream export, and model domain; MOTION_CONTROL_VARIANTS exports every variant ID.

Catalog Variants

Additional Exports

Overview

• Composes TxSelect, TxTabs, TxDropdownMenu, TxContextMenu, TxTooltip, TxPagination, and TxTextMorph; focus, arrow keys, Escape, outside clicks, and anchoring follow those primitives.
• On a focused counter, Up/Down step the value and Home/End jump to the bounds. The frequency selector returns focus to its trigger when it collapses.
• In yui-multi-tab-close, closing the active tab selects the nearest enabled tab; closing another tab keeps the selection. Model events don't wait for the exit animation.
• Close buttons sit in a separate strip beside the tab navigation, never inside a tab button.
• Menu commands keep the primitives' select timing: a confirmation beat before closing, or immediate under reduced motion.
• Motion stops offscreen, in hidden documents, in inactive KeepAlive instances, on unmount, and under reduced motion.

Technologies

• Upstream: Amicro commit 43c29ce, MIT, Copyright (c) 2026 SYED SUBHAN UDDIN.
• Source: packages/tuffex/packages/components/src/motion-control/.