Compact KPI Tile Grid Stats Block for React

Edit PERIODS and the readings at the top of the file (SALES, ORDERS, OAT, WAIT, REFUNDS). Each reading list holds one { before, now } pair per period, in the order of PERIODS; a change is computed from the pair, as a share of before (+6.2%) or as a difference in the unit you set (−0.5 min). Add a period by adding one entry to PERIODS and one pair to every reading list; the switch gets a segment, and you widen its grid-cols-3. Periods are named by what they are ("This week"), never by a date.

It is the catalog's Segment Group, a single-choice control with arrow-key movement between segments, wired to one piece of state. The six tiles keep their keys, so each digit of each Sliding Number rolls from the number it shows to the next one. The line under the header is a polite live region, so a screen reader hears the new period once; the six values aren't read out one by one.

Whether a change is good depends on the figure: a longer wait is bad, a higher average ticket is good. The block shows direction with an arrow and a sign, in the text colour, and leaves the judgement to the reader, which also keeps it correct in every theme preset.

Yes. The tiles are a description list: each label is a term, and the value and the change are its descriptions. Values are drawn first but read after their label. Digits that roll are read as the final number: each one has a visually hidden copy. Values sit in bdi elements and signed changes are kept left to right for right-to-left pages. With reduced motion the digits change in place.

The switch takes the full width under the header, and the tiles sit two by three. A value and its change share a line while they fit and wrap, with the label under them, when the tile is narrow. Nothing scrolls sideways at 320 pixels.