Settings Panel Work Style Block for React

No, and they aren't switches to a screen reader either. Each one is a drawing, hidden from assistive technology, and the row says the same thing in words: the name, then "On" or "Off", then why. The panel only looks like settings; it's a list of facts about how the team works. If you want a visitor to compare their own habits, that's a different block.

Edit AGREEMENTS at the top of the file: each has a name, an on flag and a why. The count in the header is computed from the list, so it follows when you add a row or turn one off. A short list reads as a set, so keep it to six to eight.

A definition list: each agreement's name is a term, and its state and its reason are its two descriptions, so a screen reader announces "Async by default, On, Updates are written down…". Rows are separated by hairlines drawn by the list itself.

It's the catalog's Frame: a tinted shell with a small header row (the panel's name and a badge) around a raised panel. The raised panel is lighter than the page in a light theme and darker in a dark one, because it follows your tokens, with no dark scope.

The panel stacks under the title, a hairline with a plus mark rules the two, and each row keeps its name and state on one line with the reason under them. Nothing scrolls sideways at 320 pixels.

The title and the panel fade up once when the page loads. Nothing else moves; with reduced motion the entrance is off.