Chat Input

Import ChatInput, ChatInputLayout, hasSendableText from @prepared911/ui/chat-input. The typed area is a textbox with aria-multiline. ChatInput renders no label; the screen names it with aria-label or aria-labelledby. The placeholder is exposed as aria-placeholder, a hint and not a name. The add, Send and Stop controls are icon-only Buttons named by addLabel, sendLabel and stopLabel, each also shown as a tooltip. The context chips and the suggestions are lists named by chipsLabel and suggestionsLabel. An inline chip is one atomic character to the caret. The arrow keys step over it in one press in the direction they point (reversed under right-to-left), Shift+Arrow selects it, and Backspace or Delete removes it whole; the keys do not leave this to the browser, because engines differ on an uneditable inline host. The remove control of each chip is a named button that is in the tab order after the typed area. Pressing it, or Enter, Space, Backspace or Delete on it, removes the chip and moves focus back to the typed area with the caret where the chip was, so focus is never dropped to the page. Every removal by a key or the control announces the chip's removedAnnouncement politely; a removal by cut or select-all announces nothing, since the person made that edit on purpose. Context chips are in a named list above the text. A disabled Send cannot be focused, so sendDisabledAnnouncement is announced politely when the person empties the text and when they press Enter in an empty composer. While a response generates and there is no Stop, Send shows a spinner, sets aria-busy, stays focusable, and announces its pending name. It is not disabled. The typed area grows with its text instead of scrolling a single line, so what is typed is visible. It stops at six lines and scrolls; the scroll region is the typed area itself and takes keyboard scrolling natively. Text reflows at 320 CSS px with no sideways scrolling: long strings wrap anywhere. Text, placeholder and edge colors are tokens and clear WCAG 2.2 AA in light and dark (checked with axe: typed, placeholder, invalid and read-only). Under forced-colors: active the surface border stays, the focused surface takes Highlight, and the invalid state adds a strong Mark border. ChatInput adds none. The controls keep their own: Send swaps its arrow and spinner at once under reduced motion, and the menu and tooltips follow the preference. The height follows the text with no transition.