Discipline Tabs Craft About Block for React

Edit DISCIPLINES at the top of the file: each has a label and its principles, and each principle a title, a sentence, a before and an after sample, a result (the figure, with its sign) and the measure it counts. Set mono to true when the samples are code. Add a discipline and it gets its own tab; the unseen stack that holds the height includes it automatically.

Tab moves to the tab list; the arrow keys move between the disciplines (Home and End go to the first and last), and the panel follows. Each principle is an h3 and each sample pair is a description list reading "Before" then its text, "After" then its text, so a screen reader hears them in the right order.

All four panels are rendered in the same grid cell, and the unseen copies make the cell as tall as the tallest panel. Switching tabs then swaps what is visible and shifts nothing below.

A figure such as "−62%" is wrapped in a bdi with dir="ltr" and uses a true minus sign, so the sign stays beside the number in a right-to-left layout. The "Before" and "After" marks are a cross and a tick next to the word, not a colour.

The tab list scrolls sideways when four labels do not fit, and the active tab keeps its underline. In each row the figure and its text come first and the two samples stack below them, "Before" over "After". Nothing else scrolls sideways at 320 pixels.

The header and the tabs fade up once on load, and a panel's rows appear at once when you choose a tab. With reduced motion the entrance is off.