Organism
Z6, the notices
Node 8.4, the notice stack. 2 instances across 2 screens, and the whole zone was specified in prose and drawn nowhere until stage 07 step 9 read the stage contract as a checklist. Three notices were marked MVP and not one of them existed.
It never covers the pane. Bottom left, --width-toast at 400px, and design principle 5 forbids an overlay that hides the evidence the analyst is deciding on. A notice stack is the component most likely to break that rule, which is why the position is written into the component rather than left to whoever places one.
The cap is one at 360 and three at the desk, and drawing it is what settled that. Measured: three notices took 408 of 760 pixels at 360, so the notice layer covered more of the phone than the case did. Node 8.4 makes the cap a layout decision and the persistence a compliance one, so the cap may differ per width and the persistence may not. The one that stays is the failure, because it is the one that cannot be dismissed; with no failure present the newest stays.
Anatomy
What the bench is standing in. A 300px box with position:relative, which is z45: the split declares that one property so the stack sits inside the console rather than on the viewport. The bench also carries a transform, because at 900px and below Z6 becomes position:fixed, and without a transformed ancestor four copies of this page’s stack would pin themselves to the bottom of your screen instead of to their own bench.
dark, shipped
STATUSReconnected. 3 cases replayed. They arrived while the connection was down and are in the list now, in their place.
×ALERTThe verdict on C-4417 did not write. This console is the only place that decision exists.
stays until the write landslight, the pair
STATUSReconnected. 3 cases replayed. They arrived while the connection was down and are in the list now, in their place.
×ALERTThe verdict on C-4417 did not write. This console is the only place that decision exists.
stays until the write lands.z6the stack. Absolutely positioned bottom left ofz45,z-index:5, a flex column with one step of gap between notices--width-toast400px, written asmin(400px, 100% − --space-6), so a narrow console shrinks the stack rather than letting it reach the pane.toastthe notice itself, its own molecule. One to three of them, and the count is a count rather than a variant.z6-morethe count of what is not shown. Declared inkit.cssand not inz6.css, so it is on the two screens and not yet in the system. It is left out of this bench rather than drawn unpainted
Behaviour at width
Below 1280, the system's one point (Width), the stack leaves the console and takes the bottom edge of the viewport: position:fixed, full width, a ground and a top rule of its own, and bottom padding that adds env(safe-area-inset-bottom). There is no z45 box to hang off at that width because the layout is a block, and this is the one place in the product a stack is fixed to the viewport. The cap changes with it, from three to one: three notices took 408 of 760 pixels at 360, so the notice layer covered more of the phone than the case did. The one that stays is the failure, because it is the one that cannot be dismissed, and with no failure present the newest stays. Above the point the stack is absolute inside the split, --width-toast wide, and it never covers the pane.
Variants
| Axis | Value | Uses | The rule |
|---|---|---|---|
| none | no values | 2 | Both instances are the same stack. What differs between them is how many notices are in it, and a count is not a variant |
| position | no values | – | Prohibited, and this is the one that matters. There is no top right stack and no centred one. Bottom left is the corner furthest from the pane, and a stack that could be moved would eventually be moved onto the evidence |
| emphasis | no values | – | It belongs to the notice rather than the stack. toast--alert is where the difference between something that finished and something that failed is drawn |
When to use it
Once per screen, and only on a screen that has something to say as a result of what the analyst just did. It is not a place to put the state of the screen, and it is not a place to put the state of the connection: those are banner and z2.
Where she meets it. Rarely, and at the worst moments. The alert form exists for one situation, a verdict that did not write, and on a phone at 03:00 it is the only notice she will see: everything else is suppressed underneath it. That is the cap doing its job rather than a notice being lost.
Rule and anti-rule
Do
ALERTThe verdict on C-4417 did not write.
stays until the write landsBottom left, inside the console, above nothing. The case she is ruling on stays in view while the notice tells her the ruling has not landed.
Do not
The verdict did not write
Never as a modal. That is dialog, and a dialog is for a decision that needs an answer before anything else happens. A failed write needs to be seen and does not need an answer, and a dialog would take the evidence off the screen to say so.
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
The stack has none. The toasts inside it carry theirs. What the stack does have is a second rendering, and it is a layout rule rather than a state: narrow the window past 900px and the stack goes from absolute to fixed, and from three notices to one.
dark, shipped
Three notices go in and one comes out, and the CSS does the choosing. .z6:has(.toast--alert) .toast:not(.toast--alert) hides everything that is not the failure; with no failure present, :not(:last-of-type) hides everything but the newest. No script decides which notice survives, which is why the rule cannot drift from the one written in node 8.4.
At 360 it is the one place in the product a stack is fixed to the viewport. There is no z45 box to hang off at that width, because the layout is block. It still never covers the pane, because at 360 there is no pane. The bottom padding carries env(safe-area-inset-bottom), so the last line clears the home indicator rather than sitting under it.
What it reads, and where it stands
| Role | Surface | Where on the component | Dark | Light |
|---|---|---|---|---|
--bg-page | fill | the bar behind the stack, and only at 360 where it is fixed | ||
--line-edge | line, exempt | the line above that bar, through --rule-edge | ||
--width-toast | structure | the width of the stack at the desk | ||
--zone-notice-clear | structure | what z45 ends above so the last row is not underneath the stack |
The stack itself paints no ink. Every colour a reader sees in it belongs to toast, which is the component the readout for those values lives on.