Step Tags KPI Bar Stats Block for React

Edit COUNTS and STAGES at the top of the file. COUNTS holds the month's counts; each stage in STAGES has a tag, a label, the value it shows and the count its share is taken from (0 for the first step, which has no share). The share is computed as the value over that count, to one decimal. Add a fifth stage and the grid is ready for it from lg if you change lg:grid-cols-4 to lg:grid-cols-5; the headline reads COUNTS.paid.

Each cell is a relative list item with a Guides component for its frame (lines that run past the corners, which is why the cells keep a gap-6 between them). The tag is an outlined Badge placed on the top rule with -top-3 and a bg-background fill, so it covers the line behind it. It's sentence case rather than the uppercase, letter-spaced label that stat blocks often carry.

Each value is the catalog's Sliding Number with trigger="view": it waits at zero and rolls its digits up once the cell scrolls into view. With reduced motion the digits change in place, and screen readers always read the final value, never the digits in between. The numbers use tabular figures so the cell doesn't shift.

Yes. The steps are an ordered list; each cell's tag names its step, and its figures are a description list: the label is a term, and the value and the share are its descriptions. The value is drawn first but read after its label. Values and shares sit in bdi elements, so a right-to-left page keeps the percent signs where they belong.

Two by two, the tags stay on each cell's rule, and the cells keep their gap and overshoot, inset from the rails. At 320 pixels each cell is about 115 pixels wide, so the values drop to text-2xl. Nothing scrolls sideways.