Changelog Summary About Block for React

The releases are RELEASES at the top of the file: a version, a title, how long ago it shipped (a phrase, never a date) and its changes, each a kind of added, improved or fixed and a sentence. The bar and legend come from PARTS, the counts of all changes since launch; the total, the shares and the segment widths are computed from them, so they always agree. RELEASE_COUNT is the figure in the header's sentence.

It is a toggle group that always has one button pressed: pressing the pressed one keeps it, pressing another moves it, and All shows everything. A type keeps only its changes and drops the releases with none; the bar lights the matching segment and dims the other two, and a polite status line says how many changes in how many of the four releases are showing.

An unseen copy of the full list sits in the same grid cell as the filtered one, hidden from assistive technology and the keyboard, so the block is always as tall as the full list. A filtered list simply leaves empty space under its last row. Nothing is mounted or unmounted below it.

Every change carries a text badge (Added, Improved or Fixed), and the legend names each segment. The bar's three tones are foreground at full, half and a fifth strength, so it reads in any theme and in greyscale. The bar itself is hidden from assistive technology: the legend beside it gives the same numbers as words.

The filter row scrolls sideways if it doesn't fit; the four buttons are ordinary controls, so keyboard focus scrolls them into view. The legend wraps, and each release stacks its version and age above its title and changes. Nothing scrolls the page sideways at 320 pixels, and the version numbers are isolated so they keep their order in a right-to-left layout.

The header and the two bands fade up once on load, and a segment's tone eases when you change the filter, all with CSS transitions. With reduced motion they are off and everything simply appears.