Cell Validation

The component is self-contained: one file, no dependencies, the palette in --vibeui-datagrid-022-*. A client component: the values live in state, the validation is computed on every render, and useId gives stable identifiers for aria-describedby. A field with an error gets aria-invalid and a link to the error text — a red border alone tells a screen reader nothing. Under every cell a line the height of the message is reserved, so the appearance of an error does not move the neighbouring rows. The save button is switched off while errors remain, and their number is declared role=status. The cells are aligned to the top edge: otherwise a row with an error skews its neighbours. The theme comes from the surrounding color-scheme through light-dark(): by default the grid lays no panel under itself, it sits directly on the page background and darkens along with it. The rows prop keeps acting after mounting: the reader's edits are stored alongside it rather than instead of it.