By The Numbers Bento About Block for React

The month-end readings are MONTHLY, oldest first: the lead figure, the year-ago line and every bar's height are computed from it. The five small cells are FACTS: each has a group (People, Customers or Product), a label, a value, an optional suffix and the note that says how it was counted. All the figures are example data: replace the arrays at the top of the file with your own.

The whole bento is one description list. Each small cell gives its group and its label as two terms, then the figure and the footnote as descriptions, so it reads "People, Teammates, 64, counted at quarter end". The trend is one image with a text name that gives the first and the last month-end; the same two numbers are in the lead's sentence.

Each figure is a SlidingNumber with trigger="view": it holds its final width in zeros until the block scrolls into view, then rolls up once. With reduced motion the digits still arrive at their final values, without the roll, and the screen-reader text is always the final number.

The bars show direction, not size: the lowest month-end keeps a short stub and the highest reaches the top, so a steady climb reads as one. The exact start and end are written beside them in text, so nobody has to read a value off a bar.

Every block draws only its top rule; the next block's top rule is this one's bottom edge. The cells share their hairlines and draw no rule under them, so a stack of blocks never shows two lines close together.

The lead spans both columns and comes first, then the five cells sit two across, with the last one full width. Nothing scrolls sideways at 320 pixels, and in a right-to-left layout the figures stay in reading order.