Tabbed Metric Card Stats Block for React

Edit METRICS at the top of the file: each has an id, a tab label, a prefix for a currency symbol, and two lists of twelve readings, now (this year) and before (the same months a year earlier). The latest month is the last entry of MONTHS. The value, the change, the bars, the best and quietest months and the headline (which reads the first metric) are computed. Add a metric and a fifth tab and panel appear; the underline needs one more has-[...] rule in SLIDER for each extra tab.

Digits only roll when the same number element gets a new value, so the value sits outside the panels and reads the selected metric from state; a polite live region announces it when you switch. The panels hold the strip and the caption. An unseen copy of every panel is stacked in the same grid cell as the live one (hidden from assistive technology and the keyboard), so the cell is as tall as the tallest and nothing moves when a caption wraps differently. The tabs are controlled with value and onValueChange, which receives the new value.

Each column is an element with two absolutely positioned bars whose heights come from one CSS variable, set from the reading as a share of the tallest reading in either year (with a little room kept at the top). They grow from the baseline with a scale-y transition when a panel appears. There is no SVG and no chart library, so the bars follow your theme's foreground colour.

Yes. The tabs are a real tab list with arrow-key navigation and visible focus, and the underline is decorative. The strip is an image whose name gives the metric, the span, this year's latest month against last year's, and the best month, and the same facts are written in the caption under it. The month names are hidden from assistive technology because the strip's name and the caption carry the facts, and values and signs are kept left to right so a right-to-left page doesn't move them.

The header and the window fade up once on load, the underline slides in 300 milliseconds, the bars grow from the baseline and the value's digits roll when you switch. With reduced motion all of it is off. On a phone the tab bar scrolls sideways inside the window (each tab keeps its width), the value stacks over the strip, and the month names shrink to their initials. Nothing else scrolls at 320 pixels.