Molecule
Toast
A notice in Z6. 4 instances across 2 screens, and the whole zone was specified in prose and drawn nowhere until stage 07 step 9 found it.
Node 8.4 named three notices as MVP and not one of them existed. That is the cheapest kind of gap to find and the most expensive to leave, and it is why the stage contract is read as a checklist by an instrument that cannot see a step that never happened.
Anatomy
dark, shipped
ClerkThe verdict on C-4417 was filed.
×ClerkThe write failed. The verdict is not recorded.
held until it islight, the pair
ClerkThe verdict on C-4417 was filed.
×ClerkThe write failed. The verdict is not recorded.
held until it is.toastthe notice. It stacks in Z6 and never covers the pane.rolewho is speaking, in the argument note’s register at 11px. This is the machine reporting on itself rather than the product addressing the analyst.t-xthe dismiss. A bordered control, and its hover is one of the two rules--line-hoverwas read off.t-holdwhat replaces the dismiss on the alert form
Variants
| Axis | Value | Uses | The rule |
|---|---|---|---|
| kind | base | 3 | it reports something that finished. Dismissible |
.toast--alert | 1 | it carries no close control at all. While a verdict is unrecorded the notice is not dismissible, and a disabled X would be a control arguing with itself. It says what is holding instead, in words, in the place the control would have been | |
| severity | no values | – | A 2px border and not a colour. Same reason as everywhere: the accent has four jobs and the severity ramp belongs to cases |
When to use it
In Z6, for something that happened as a result of what the analyst just did. It is not for the state of the screen: that is banner.
Where she meets it. Right after filing a verdict, which is the moment the product has to be certain. The alert form exists because the one thing worse than a failed write is a failed write she dismissed.
Rule and anti-rule
Do
ClerkThe write failed. The verdict is not recorded.
held until it isIt says what failed, what that means, and why it is still on the screen. No control, because there is nothing safe to do with it yet.
Do not
ClerkThe write failed.
DismissNever a disabled dismiss. A control that is visibly there and cannot be used teaches nothing and reads as broken, and design principle 3 says out of reach is shown with the reason stated rather than hidden.
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. Counted on the grey corpus at stage 09, and every one of them is a function in design/kit/checks/rules.mjs. Full table with sources on Architecture.
- R3. No overlay covers the detail pane. Design principle 5: no overlay hides the evidence the analyst is deciding on.
- R4. The notice layer shows at most three notices at the desk and at most one at 360, and a failure takes the single slot.
States
Live, in both themes. The first one dismisses; point at its close control.
dark, shipped
ClerkThe verdict on C-4417 was filed.
×ClerkThe write failed. The verdict is not recorded.
held until it islight, the pair
ClerkThe verdict on C-4417 was filed.
×ClerkThe write failed. The verdict is not recorded.
held until it is.t-x:hover is one of the two rules --line-hover was read off. It and the keyboard map trigger in Z1 both raise a bordered control’s boundary to the reading ink, which is what made hover on a border a role rather than a habit.
The toast itself has no states. Only the dismiss inside it does.
Motion
Response, 120ms, the browser's own ease. What moves is a boundary and ink, and it is on the CLOSE CONTROL rather than on the notice: the only thing in a notice anybody presses. 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-page | fill | the ground | ||
--text-primary | ink 4.5:1 | the sentence | ||
--text-secondary | ink 4.5:1 | the role label and the hold | ||
--line-edge | line, exempt | the boundary | ||
--line-hover | line 3:1 | the dismiss under the pointer | ||
--text-hover | ink 4.5:1 | the dismiss glyph under the pointer |