Values Cloud About Block for React

Each value is an entry in VALUES at the top of the file with a word, a weight of large, medium or small, what it means and what it costs. The pill's padding and type size come from its weight in PILL_SIZES. The first entry is the one that shows when the page loads. Keep the definitions to a sentence or two: the band is as tall as the longest one, in every state.

Every definition is rendered in the same grid cell, one over another, and the ones that aren't picked are invisible and inert, so they are out of the reading order and the Tab order but still give the cell its height. The band is therefore the height of the longest definition at the current width, and picking never reflows the block.

The pills are a toggle group named "Values": each is a toggle button whose pressed state is announced. The picked definition is an h3 with a description list under it, and after the first pick a polite status line reads the definition out; nothing is announced on load. The unpicked definitions are removed from the accessibility tree.

At rest a pill has muted text on a plain outline, and the picked one is filled with your foreground colour, so the picked value stands out by weight and contrast without opacity, and the text of the others stays readable. The pills use no primary colour: this block has no action.

A Guides layer draws the frame around the tray and the band, with its lines overshooting the corners and a + on each, and a second one draws the rule between the tray and the definition. The frame is inset from the page's rails and at most 768 pixels wide, so it reads as a figure on the page and the block ends on content, not on a rule.

The pills wrap and stay centred, so the tray gets taller instead of wider, and the two columns of the definition stack. Pills never truncate, and nothing scrolls sideways at 320 pixels. The header and the tray fade up once on load with a CSS transition; with reduced motion they simply appear.