Molecule
Option
A reason, its key and where it sends the case. 62 instances across 8 screens: the reject dialog’s reason list 60, and the second axis 2.
Design principle 3 is paid for here. The override is one key and it teaches, and rejecting Clerk costs four taps against accept’s two. This component is taps two and three. What stage 04 bought is that five of six reasons derive the second axis, so four never became five, and the fourth tap is Enter rather than a confirmation step. The fifth tap is what stage 07 was not allowed to add, and this file is where a fifth would appear.
Anatomy
dark, shipped
.optthe whole option. Ana, and that was a decision: choosing a reason is something the analyst DOES, so stage 07 gave it a real destination rather than a dead label.keythe number. Its own atom, and it inverts when the option is chosen by readingcurrentColor.lblthe reason, in the analyst’s words. It takes the remaining width and wraps.routeswhere this reason sends the case, right aligned so the column reads down. It is the difference between a form and a decision
Variants
| Axis | Value | Uses | The rule |
|---|---|---|---|
| state | base | 57 | not chosen yet |
.is-chosen | 5 | a state and not a variant: the same option wears it on one screen and not on the next, and which one wears it is the analyst’s answer | |
| emphasis | no values | – | Prohibited, and this is the strongest prohibition in the level. A recommended reason would be Clerk marking its own homework: the analyst is rejecting its verdict, and a highlighted option would tell her which way to disagree |
When to use it
In the reject dialog, and in the escalate dialog’s second axis. It is the only list in this product the analyst answers rather than reads.
Where she meets it. Only when she disagrees with Clerk, which is the expensive path by design and the one design principle 3 says must teach. The reason she picks goes straight into tuning, so this component is where the product learns.
Rule and anti-rule
Do
Key, reason, consequence. She can answer it with one number and still know what the number does.
Do not
Never without the key and never without the route. Without the key it is a list to click through; without the route the analyst finds out where the case went by looking for it afterwards.
Limits
Rules of composition and context, which no anti-rule can carry: nothing else is the right component to take, and what is wrong is the count or the neighbour. Every one of them is a function in design/kit/checks/rules.mjs. Full table with sources on Architecture.
- R12. A list holds one filling or the other, never both inside the same border. The container this stands in gained a second filling at stage 12,
keyrow. Do not put anoptinto a list of key rows: the ring and the four states promise that pressing it does something, and nothing on that map is answerable.
States
Live, in both themes. The second option is chosen. Point at the others, hold, and tab through them.
dark, shipped
The key inverts with the choice and knows nothing about it. The option repaints its own ink and key follows through currentColor, which is the same mechanism the whole marks subgroup runs on.
Hover skips the chosen one, because a ground that is already the answer must not move under the pointer. Out of reach does not exist: a reason that does not apply is not offered.
Motion
Response, 120ms, the browser's own ease. What moves is a ground, a reason in the reject list. Named one by one rather than as all, because all animates what nobody ordered and drags the layout properties in behind it. Never a size and never a position: those make the browser recalculate the layout of the page on every frame. Under prefers-reduced-motion it is 1ms, and this component does nothing to make that happen: it reads var(--dur-fast) and the token is redefined once. Full reasoning on Motion.
What it reads, and where it stands
| Role | Surface | Where on the component | Dark | Light |
|---|---|---|---|---|
--bg-surface | fill | chosen | ||
--bg-hover | fill | under the pointer | ||
--bg-active | fill | pressed | ||
--bg-invert | fill | the key, when the option is chosen | ||
--text-on-invert | ink 4.5:1 | the key’s number on that plate | ||
--text-secondary | ink 4.5:1 | where it routes | ||
--line-separator | line, exempt | the rule between options |