Dense Checklist Progress Stats Block for React

Edit ACCOUNTS and STEPS at the top of the file. Each step is a label and a done count, out of ACCOUNTS. The percent, the bar and its accessible name are computed from those. Keep the labels short: the name column is eight rems, and a longer one truncates.

It is the sum of every step's done, divided by the accounts times the number of steps, rounded. It is not a number typed beside the data. The "All finished" fact counts steps where done has reached ACCOUNTS. One step in the sample is there, Workspace, so the fact reads 1.

The list is the narrow panel: max-w-2xl, ten rows at py-2.5, divided by hairlines. The block's line is the split, not a second frame. From lg the list's column draws a start border, with a + where that border meets the top rule. Below lg a top rule separates the summary from the list.

Yes. The facts and the steps are description lists. Each fact's label is read before its number, even though the number is drawn above it. Each bar is a progressbar named with the step and how many accounts finished it, so "89%" in the row and the bar agree. Values sit in bdi.

The summary is first in the markup, so the heading and the three facts come before the ten rows. The rows stay three columns: a short name, the hairline, the percent. The hairline is the catalog's default height, thinner than the bars in the milestone list.

The summary fades up once. The ten rows do not: on a phone they run past the first screen, and a fade there would be caught half way. With reduced motion the summary simply appears. The bars don't grow in.