MotionControl

TxMotionControl preserves the 21 Amicro UIkit catalog entries and all 13 additional exports. It composes TxSelect, TxTabs, TxDropdownMenu, TxContextMenu, TxTooltip, TxPagination, and TxTextMorph; it does not replace those controls with decorative buttons.

Usage

Full source gallery

Every source ability below has its own interactive specimen. Filter by its upstream export name, operate it, and inspect its model and emitted event. Options and commands are demo data supplied by the caller, not defaults embedded in the component.

Controlled operations

• Selectors, filters, dates, tabs, steps, and commands emit update:modelValue, change, and select. value is the stable option key; labels can change without losing selection.
• yui-multi-tab-close takes v-model:items. Closing the selected tab chooses the nearest remaining enabled tab; closing any other tab keeps the current selection. The leaving tab retains its measured position for its 200ms shrink/fade, without delaying the emitted model change. Close controls sit beside the tab navigation in a separate action strip, avoiding an interactive button nested inside a tab button. minItems, maxItems, and closable control the boundaries. Add uses newItem, or emits add so the host creates its own item; it never fabricates a business label or ID.
• Save, follow, theme, and PiP controls use a boolean model. PiP emits the desired UI state; it does not claim to invoke a video platform API. The application can connect action to its own implementation.
• back-forward-nav emits navigate and respects canBack / canForward; it does not read or mutate global browser history.
• Counters change by step and stop at min / max. Up/Down work on the counter controls, and Home/End select the configured boundaries. Pagination and dots use one-based page numbers, with count pages.
• Download emits download only. The host supplies status and progress; the component never starts a timer and reports a successful download. The demo generates a real file and requests a browser download, but deliberately does not claim saved-file completion. Its status selector is an explicit visual input, not a transfer result.
• Tooltips appear on hover and focus using the existing anchor-delay, Escape, and outside-click contracts. The frequency selector expands into real tabs and restores focus to its trigger when collapsed.

API Reference

Props

MotionControlItem contains value: string | number, label: string, optional disabled, icon (text glyph), description, closable, danger, and children. Menu children render real recursive dropdown/context submenus. description is passed through to TxSelect; tab and menu bodies can be supplied through slots. Keep keys unique, including after string conversion for the tab primitive.

Events

Menu commands use the primitives' select event, including their pre-close confirmation rhythm and immediate reduced-motion path; business handlers do not run ahead of that contract.

Slots

Labels

MOTION_CONTROL_DEFAULT_LABELS is exported. Its keys/defaults are:

{
  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',
}

The final demo specimen adapts the save pill's caller-owned boolean and labels to a Like action with a real count. It does not invent an upstream LikeButton export.

Source mapping

Source is pinned to Amicro commit 43c29ce. Paths below are relative to src/components/css-animations/. The public MOTION_CONTROL_SOURCES catalog carries the full path, source range, upstream export, and model domain; MOTION_CONTROL_VARIANTS carries the variant IDs.

Catalog variants

Additional exports

Best Practices

• Own business data and results in the application. A menu command is not a successful backend edit, a boolean PiP state is not proof of a platform transition, and a browser download request is not a saved-file confirmation.
• Use stable value keys and localize labels independently. Supply actual category, date, frequency, tab, and command choices; no business list is hard-coded.
• Bind both v-model and v-model:items for closeable tabs. Supply minItems="1" when the final tab must remain. Use add to allocate real IDs; use newItem only when the host already prepared one.
• Keep slotted tab/step labels non-interactive. Put independent actions outside their native buttons, and use the panel slot for rich tab bodies.
• Keep download state external and handle download with a real transport. Respect cancellation/error in that transport; this display does not fake it.
• The existing primitives own roving focus, arrow keys, menu activation, Escape, outside click, anchoring, and tooltip focus. CSS motion stops offscreen, on hidden documents, in inactive KeepAlive instances, on unmount, or when reduced motion is requested; number/label transitions reuse TxTextMorph and the shared spring.