Split Subvalues Hero Metric Stats Block for React

Edit LEVELS at the top of the file: each level has a label, the parcels now and the parcels before (last week). Add or remove levels freely; the total, each share, the bars, the change on last week and the sum line are computed from the list. The bars show each level's share of the total, not its progress toward a goal.

sharesOf rounds every share down, then gives the percent points that are left over to the parts with the biggest remainders. Rounding each one to the nearest whole number can total 99 or 101, which looks like a mistake beside a headline that is exactly the sum of its parts. The bar and the text use the same whole numbers.

Yes. The headline is the h2, so a screen reader hears "48,210 parcels shipped this week". The rows are a description list (a term for the level, its count and share as the description) and each bar is a progress bar named with the level, the count and the share. The arrow in the pill is hidden from assistive technology; its sign says the same. Numbers sit in bdi elements and the sum line is kept left to right.

The page column is the split itself, so the cells carry the padding and the divider is a start border on the second cell, running from the top rule to the foot of the block. On a phone the divider becomes a rule with + marks between the figure and the rows. The rows end the block, so there is no bottom rule: the next section's top rule closes it.

The copy and the rows fade up once on load, and every count rolls up the first time it scrolls into view. The bars are static. With reduced motion everything simply appears.

The bars compare shares of one total, so one tone is enough: they use your theme's foreground colour rather than the primary colour, which stays free for your page's one main action. They read the same in every theme preset, light and dark.