Tool

Accessibility

Import Tool, ToolState from @prepared911/ui/tool.

Trigger. A native button from Accordion. Its name is the tool name followed by the status label, so the state is read without opening the tool. It carries aria-expanded and, while the region is mounted, aria-controls. The glyph and the chevron are aria-hidden.
Status. The badge is text; color supplements it.
Payload. JSON is text in pre > code. It wraps instead of scrolling, so it needs no scroll region and no extra tab stop. The block sets dir="auto", so a payload with Latin keys reads left to right inside a right-to-left page. The tool name is code and reads left to right.
Error. The failure text is destructive-colored text in the region; the destructive badge in the trigger carries the same state in words.
Motion. The open and close fades remain under reduced motion; the height and chevron changes are immediate.
Forced colors. The badge and the payload edge keep a visible boundary in system colors.

Accessibility

Import Tool, ToolState from @prepared911/ui/tool.

Trigger. A native button from Accordion. Its name is the tool name followed by the status label, so the state is read without opening the tool. It carries aria-expanded and, while the region is mounted, aria-controls. The glyph and the chevron are aria-hidden.
Status. The badge is text; color supplements it.
Payload. JSON is text in pre > code. It wraps instead of scrolling, so it needs no scroll region and no extra tab stop. The block sets dir="auto", so a payload with Latin keys reads left to right inside a right-to-left page. The tool name is code and reads left to right.
Error. The failure text is destructive-colored text in the region; the destructive badge in the trigger carries the same state in words.
Motion. The open and close fades remain under reduced motion; the height and chevron changes are immediate.
Forced colors. The badge and the payload edge keep a visible boundary in system colors.