Accessibility
The floor, not the ceiling:
- Every interactive target is at least 24×24px (WCAG 2.2 SC 2.5.8), and the templates hold to it with none left over. Check the width too — icon-only buttons are square. Where the visual is deliberately smaller — the 20px switch track, the 12px slider thumb, an 11px text link — the templates keep the visual size and grow the hit area with padding plus an equal negative margin, so the target reaches 24 without the row getting taller.
--min-targetis the value they all reference; change it in one place and every one of them follows. - Verify contrast per pairing, never assume it. Recompute the key pairings after a reskin, including the worst case of small text on the control fill.
text-tertiarysits below AA by design, so it never carries a value, a message, or a label a decision rests on. - Keyboard reaches everything a mouse reaches, in visible order. Dialogs trap focus while open and return it to the trigger on close. A hand-built listbox owes the contract a native
<select>gives away; see Components. [hidden]needs restoring. Any component that setsdisplay: flexorgridoverrides the browser default[hidden] { display: none }. Ship[hidden] { display: none !important }in the base stylesheet — a collapsed panel leaking into view is usually this.- Meaning never rides on colour, shape or motion alone. A red border needs a message; a spinner needs text; a selected thumbnail needs its ring, not just a tint.