Spec Sheet Infrastructure About Block for React

Edit LAYERS at the top of the file: each layer has a label and a summary for the list, a title and a sentence for the sheet, and four specs (provider, regions, redundancy and uptime, a number in percent). The sheet's downtime line is computed from uptime by downtimeOf, in minutes under two hours and in hours above. Add a layer and it appears in the list and in the unseen stack that holds the height.

The layers are a Toggle Group with one layer always chosen: pressing the chosen one keeps it, pressing another moves the choice, and the sheet is announced politely when it changes. Tab moves into the list and the arrow keys move between layers (Up and Down, as the list is vertical on a wide screen), and Enter or Space chooses one. Each toggle reads as a name and its summary; the specs are a real description list, so a screen reader hears "Uptime, last 12 months" followed by the figure.

Every layer's sheet is rendered in the same grid cell, and all but the open one are invisible, inert and hidden from assistive technology. The cell is as tall as the tallest sheet, so choosing a layer only swaps what is visible. The open sheet fades in again each time it changes, and not at all with reduced motion.

Saying "Two independent carriers at every site" tells a buyer what they need to judge redundancy, and stays true when a contract changes. Put a company's real names there if your page should name them.

The header comes first, then the four layers as a wrapping row of chips (the one-line summaries are left out), then the sheet with a rule above it. The specs drop their two-column layout and show each label above its value. Nothing scrolls sideways at 320 pixels, and in a right-to-left layout the list and the divider move to the other side.

The header and the sheet fade up once on load, and the sheet fades in again when the layer changes. With reduced motion every transition is off and the sheet changes at once.