StatusHint

Installation

pnpm add @talex-touch/tuffex

import { TxStatusHint } from '@talex-touch/tuffex/status-hint'
import '@talex-touch/tuffex/status-hint/style.css'
// It renders TxTextTransformer (which renders TxTextMorph) and TxIcon, whose sheets are separate
import '@talex-touch/tuffex/text-transformer/style.css'
import '@talex-touch/tuffex/text-morph/style.css'
import '@talex-touch/tuffex/icon/style.css'
import '@talex-touch/tuffex/base.css' // tokens + resets, once per app

Usage

Basic

A new message morphs out of the old words; when the same message arrives again, a new pulseKey replays the emphasis.

Tones and Sizes

tone colors only the wash and the icon; md is a status line of its own, and sm sits in a toolbar or header.

Placement

To lay the hint flush along a bar, position it with a class heavier than one class (a scoped class is enough) and set two CSS variables.

Best Practices

• Keep it mounted while messages change: no :key per message, and v-if only for "no message", inside <Transition name="tx-status-hint">.
• Pass each message's id as pulseKey, or the same text arriving twice makes the second action look like it did nothing.
• Keep it to one line of two to four words; it never wraps, so put long detail, such as a provider's error text, where it can wrap.
• When the hint mounts with its message, or the host already has an announcer, pass live=false and announce from an always-mounted role="status" region; never put role or aria-live on the component, since attributes fall through to the root div.
• Use one hint per surface; when messages must queue, stack, or time out, use Toast.

API Reference

Props

Slots

CSS Variables

• The component never sets --tx-status-hint-radius, so a rule on the hint or any ancestor applies; override --tx-status-hint-pad-x with a rule heavier than one class.
• Override --tx-status-hint-accent and --tx-status-hint-wash-strength with an inline style or a selector heavier than two classes.
• --tx-status-hint-pad-y, --tx-status-hint-icon-size, --tx-status-hint-spring, and --tx-status-hint-spring-duration are set by the component; hosts leave them alone.

Overview

• The words are --tx-text-color-primary at weight 600 in every tone; muted is a neutral grey with no default icon.
• It never wraps or adds an ellipsis: at most as wide as its container, a longer value fades into the end padding and is clipped.
• On mount the wash rises from the left edge and the icon and words land on a spring, readable from the first frame; a text or pulseKey change replays the emphasis, once per update.
• A text change morphs the words character by character (380ms), resizing an inline hint; on leave the words fade first and the wash follows, opacity only.
• animated=false and prefers-reduced-motion: reduce both show the end state; under reduced motion alone the morph engine stays mounted and writes new values directly.
• The wash, grain, and end fade are drawn left to right physically; right-to-left pages are not mirrored.

Technologies

• The wash is the tone's color behind a mask: a gradient intersected with a 140px feTurbulence noise tile through mask-composite: intersect, and absent where unsupported; replays alternate two identical keyframe sets, is-pulse-a and is-pulse-b.
• The spring is resolveTransition('bouncy') from liquid/src/spring.ts, written after mount; server markup falls back to 620ms cubic-bezier(0.34, 1.56, 0.64, 1), and hydration matches.
• Source: packages/tuffex/packages/components/src/status-hint/; StatusTone comes from status-badge.

Use cases

• The outcome of an action, shown where it happened: "Copied", "Pinned", "Could not pin".
• CoreBox's action feedback, in its footer, or in its header when the footer is not showing.

Related components

• Toast: global notifications drawn by one host that stack and time out.
• Alert: an inline banner with a title, body, and close button, announced with role="alert".
• StatusBadge: a status pill that stays on screen; StatusHint reuses its StatusTone.
• TextTransformer: the text engine behind the hint's words.