Delta Pill KPI Tiles Stats Block for React

Edit the readings at the top of the file (ORDERS, REVENUE, CONVERSION, REFUNDS): each is a { before, now } pair for the last 28 days and the 28 days before. KPIS says how each is shown: its label, its prefix, suffix and decimals, and whether its change is a percent of the period before (+9.1%) or a difference in points (+0.23 pts). The average order is computed from revenue and orders. The pill's direction comes from the sign of the change, and a change that rounds to zero is shown as no change.

By fill and by glyph. A rise is a pill filled with the text colour, with white (background-coloured) text and an up arrow; a fall is an outlined pill with a down arrow; no change is a muted pill with a dash. All three carry the sign, and the arrow is hidden from assistive technology because the sign says the same. The pill colours come from your theme's foreground and background, so it works in every preset and in print.

Yes. Each tile is a description list: the label is a term, and the value and the change are its descriptions, so a screen reader hears "Orders, 6,420, +9.1% vs the 28 days before". The minus is a true minus sign. Values sit in bdi elements and signed changes are kept left to right for right-to-left pages. On a phone the row of tiles can be reached and scrolled with the keyboard: it takes focus, has a label and shows a focus ring.

Each tile is a list item with its own Guides component: lines that run a little past the corners, which is why the tiles keep a gap-6 between them and the grid is inset from the rails. The card inside it is bg-card with a faint ring and a small shadow, so it reads as raised in light and dark themes alike.

Below sm the list is a flex row with scroll snapping: each tile takes 85% of the width and snaps to the centre, so the next one peeks in. The list has vertical padding, so the frames' overshoot isn't cut off by the scroller. From sm it is a grid and the tiles show all at once.