Threshold Target Cards Stats Block for React

Edit METRICS at the top of the file: a metric has a label, its value and target, the warn and critical figures, a period, the digits to show (decimals, suffix) and a write function. A value under critical is At risk, a value under warn is Watch, and anything else is On target. The bar fills to the share of the target reached and the marks stand at each threshold's share of it.

It highlights the tiles in the chosen state and gives the others a solid tint, a lighter bar and softer text. It never hides or moves a tile, so the layout does not shift. All highlights every tile. The control is one choice that cannot be switched off, with arrow-key movement and a visible focus ring, and the line under it is announced politely.

No. On target, Watch and At risk each have a different glyph and a written word, and the two thresholds are written under each bar. The destructive status dot appears only beside At risk, so the one real alert stands out without carrying the meaning alone.

Yes. Each tile is a list item with a heading, the figures and thresholds are text (a dl for the thresholds) and the bar is named with its figures, its share of the target and its state. Values sit in bdi elements so a right-to-left page doesn't reorder "95.2% / 96%". Contrast passes in light and dark, including on dimmed tiles.

The tiles stay two by two, with the state under the name and the thresholds stacked, and the filter fills the width above them. Nothing scrolls sideways at 320 pixels.