Token

Import Token, TokenIntent, TokenSize, announceTokenRemoval, shouldRemoveLastTokenOnBackspace from @prepared911/ui/token. The visible label is the token's name; Token excludes aria-label and aria-labelledby because the shell is a generic span. A selectable token's toggle is named by the same text. The remove Button is named by removeLabel, which should name the subject ("Remove Dana Levi"). Removing calls onRemove, then writes removedAnnouncement to the shared polite live region of the token's owner document. A canceled removal announces nothing. A composer that removes its last token on Backspace from the entry announces it with announceTokenRemoval. The consumer moves focus after a removal; a focused token unmounts. Nothing depends on hover. The toggle and the remove Button are native buttons and tab stops in that order. Enter and Space activate the focused one. Backspace and Delete on either remove the token (a held, modified or composing key does not). A static token has no tab stop. Backspace from an empty composer entry is shouldRemoveLastTokenOnBackspace. It does not fire while the person is editing text. intent color supplements the label. Write label so it states the meaning on its own ("Critical", not a bare icon on a red chip). Selected adds an accent edge beside the wash. Under prefers-contrast: more every token gains a visible edge and the selected edge thickens. Under forced-colors: active the edge is CanvasText, the selected edge is Highlight, and the focus ring is CanvasText. The remove button is a 24 by 24 disc at every size and 44 by 44 under a coarse pointer. A selectable toggle is at least 44px tall under a coarse pointer. Disabled content is exempt from the contrast minimum (WCAG 1.4.3). The toggle and the remove Button are natively disabled and leave the tab order. Inside a disabled fieldset they are disabled with no prop. Fill and color changes and the selected edge fade over --motion-state. Nothing moves, so reduced motion changes nothing.