Pinned Totals

The component is self-contained: one file, no dependencies, the palette in --vibeui-datagrid-004-*. Server rendered: there is no state. The height of the scroll viewport arrives as a number in rem and goes into the --vibeui-datagrid-004-height variable, so the viewport grows together with the reader's font. The header and the tfoot are pinned with position:sticky and carry a background of their own; the table is built with border-collapse:separate, otherwise the sticky cells lose their borders. The scroll container is marked role=region, aria-label and tabindex=0 — a vertical list is paged from the keyboard too. The amounts are set in tabular-nums, and an outgoing is marked with a minus sign and a colour at the same time. The theme comes from the surrounding color-scheme through light-dark(): by default the grid lays no panel under itself, it sits on the page background, while the background prop switches on a panel of its own.