Field status icon

The inline slot beside an auto-saving field. Always rendered at a fixed 16px width so icons never shift the input; the role="status" region announces each transition. On error with a handler it becomes a ghost Retry button.

import { FieldStatusIcon } from "@stocklots/ui-components/components/field-status-icon";

<FieldStatusIcon status={status} labels={t.fieldStatus} onRetry={save} />

Statuses

idle · dirty · saving · saved · error · error with Retry

idledirtysavingsavederrorerror + retry

Blur auto-save

Type, then tab away: dirty → saving → saved. Every fourth save fails so Retry shows.