Atom
Severity bars
Severity, drawn as a count of lit slots. 225 instances across 34 screens, always inside sev and sev is always inside a queue row. The whole component is three slots and how many of them are on.
The severity is selected on the drawing, not on a class. The markup carries three slots and lights n of them, and :has() counts. That is why the whole ramp landed on 32 screens at stage 06 without one attribute being added to one wireframe, and it is why the coloured copies held a structural diff of exactly zero against their grey originals when that was measured, at stages 06 and 07. That zero is a reading taken at a time and not a standing property: wireframes/ is frozen, the colour kept moving, and design/kit/checks/diverge.mjs is what re-takes it. The ramp's own markup is not among the things that moved: three slots and n of them lit, byte for byte, on every pair. The one page where a bar count differs is log.html, which carries an extra row in colour.
Anatomy
dark, shipped
light, the pair
.barsthe whole component, and it is what carries the colour. Aspanevery timei, three of themthe slots. 5px, 8.5px and 12px tall, so the height is a second signal after the count and the shape is legible at a glance from a metre awayi.onlit. It readscurrentColorfor both its fill and its border, which is why the severity ramp is three roles and not six- the word beside itnot part of this component. That is
sev, the molecule that holds the bars and the word together and gives them one colour. It is written in the molecules round
Variants
One axis, three values, and the axis is not a class. Nothing in the markup names the severity: the count of lit slots is the value, and the file reads it.
| severity | Uses | Rendered | Selected by | The rule |
|---|---|---|---|---|
| high | 56 | :has(i:nth-child(3).on) |
The ramp descends in chroma, not in loudness. On a dark ground every value has to clear 4.5:1, so brightness cannot carry it. Warm to cool, and never to green, because a low severity case is not a resolved one | |
| medium | 71 | :has(2) :not(:has(3)) | ||
| low | 46 | :has(1) :not(:has(2)) | ||
| none lit | 0 | no rule | It renders and it means nothing, and the empty cell is shown rather than skipped. A case with no severity does not reach the queue, so the product never draws this. If it ever does, the component says colourless rather than guessing | |
| a fourth level | – | prohibited | – | Three slots is the drawing. A fourth would need a fourth colour that clears 4.5:1 on three grounds and still reads as between two of the existing ones, and the ramp has no room left in chroma |
The :has() moved from .row to the component, and nothing rendered differently.
kit.css wrote .row:has(.bars i:nth-child(3).on) .bars i.on. That is the same result inside a row and no result anywhere else: a severity drawn on the shift brief or inside a log entry would have come out colourless. A component may not depend on the container it happens to stand in today, and the selectors on this page are the proof that it no longer does, because none of these bars is inside a row.
When to use it
In a queue row, in the severity cell, and nowhere else today. Design principle 1 says every row is a decision rather than a record: the bars are the first thing that sorts one row from the next, before the client, before the verdict and before the age.
Where she meets it. Scanning. Rasha carries 40 or more tenants and arrives at a queue of eighteen; the shape of this column is what tells her which three to open first. That is why it is a shape and a colour rather than a word alone, and why the word is there anyway.
Rule and anti-rule
Do
Always with the word. The bars are the glance and the word is the answer, and the word is also what makes the unlit slot legal below 3:1.
Do not
Never alone. A count of bars with no word is a graphic carrying information available nowhere else, which is a WCAG 1.4.11 failure and, worse, a thing the analyst has to learn before she can read the queue.
States
It has none, and it is not interactive. The row around it has a hover and a selected ground; the bars sit on whatever the row is doing and change nothing of their own.
dark, shipped
light, the pair
The unlit slot is exempt from 1.4.11, and the exemption is written rather than assumed.
--line-edge measures 2.997 against the page, which is below the 3:1 that a graphical object required to understand the content must clear. It is allowed here because the severity is also in text, immediately beside it: sev renders the bars and then the word on every one of the 225 instances, measured. 1.4.11 exempts a graphic whose information is available in text, and this is that case rather than an oversight. If the word is ever dropped from sev, this stops being true and the slot needs --line-control. The line is in bars.css so that whoever drops it reads it first.
What it reads, and where it stands
| Role | Surface | Dark | Light |
|---|---|---|---|
--text-sev-high | ink 4.5:1 | ||
--text-sev-medium | ink 4.5:1 | ||
--text-sev-low | ink 4.5:1 | ||
--line-edge | line, exempt |
The three severity roles are declared as ink and not as fill, even though the lit slot is a filled rectangle: the slot borrows the component's ink with currentColor, and the word beside it is real text at 4.5:1. Declaring them as fill would have let the 3:1 floor apply to a word.
Copy this
Three i always, and on on the first n. The markup never names the severity, so a row cannot say High and draw Low.