Availability Index Features Block for React

Edit FEATURES at the top of the file. Each entry has a name, a sentence, a channel and segments, from 0 to 5, where each segment stands for a fifth of workspaces. The percentage beside the meter is worked out from segments, so the drawing and the text can't disagree.

The five segments are decoration, hidden from assistive technology. Beside them is the percentage in text, followed by a visually hidden "of workspaces", so a row reads as "60% of workspaces". The channel is a badge with its name in words, so nothing depends on weight or colour alone.

Below md the table keeps one column. The Rollout and Channel columns and their headers are hidden, and the channel badge and the meter appear in a row under each sentence, so a row never scrolls sideways at 320 pixels. From md the three columns return.

Each name is a link (href="#"): point it at the feature's page or its changelog. The row tints on hover and when its link has keyboard focus, and the link shows its own focus ring.

Yes. The table, the meter and the badges use card, muted and foreground tokens, with no fixed colours and no dark scope, so the index is light on a light page and dark on a dark one. Nothing here is primary: the block has no button.

The header fades up once on load, with a CSS transition. With reduced motion the transition is off and the block simply appears. Nothing else moves.