Molecule
Brief line
One counted fact from the shift you are picking up. 19 instances across 7 screens, in the counted blocks of the shift brief, and it is a line and not a card.
The brief’s own block table ruled out the alternative: four counted facts as four cards is a dashboard, and a handover is read once from the top. Three zones in one order: the number, what it counts, and where it goes.
The number is the one place in the product at --size-lg in mono at 700. 17px is the largest a figure gets anywhere, and weight 700 is licensed on a counted value only. The brief is read standing up at the start of a shift, so the count is what carries across the desk and the sentence is what you lean in for.
It was not in the register. Step 2 built the register from a browser census of controls, and this is a text composition with no control in it. Found at step 5 by scanning every class that owns a rule block in kit.css against the register: twenty one came back and thirteen were components. docs/inventory.md section 13 has all of them.
Anatomy
dark, shipped
light, the pair
.blinethe line. A three column grid,52px minmax(0,1fr) auto, aligned on the baseline so a 17px figure and a 12px sentence sit on one line rather than on one box.nthe count, right aligned in its fixed 52px column. That column is why18and6line up on the unit down a block instead of drifting with the width of the figure.gowhere it goes, 11px mono, and it never wraps. 19 of the 19 carry one, including the ones that go nowhere.exthe one line of detail, and it is a block inside the middle column. 11 of the 19 carry it. It sits under the sentence rather than beside it, because the 52px column belongs to the figure
Variants
| Axis | Value | Uses | The rule |
|---|---|---|---|
| element | div.bline | 16 | a count with nowhere to open. It is the resting form, and it is the majority |
a.bline | 3 | the count opens the list it counts. The only form with a hover and an active ground, and the only one that takes the focus ring. A count that cannot be opened is written without the a rather than drawn as a dead link, which is the same answer src gives | |
| count | base .n | 5 | a figure that is asking for something. The reading ink, full strength |
.n.is-quiet | 14 | a count of zero is still a count, and it recedes rather than disappearing. 0 unrecorded is the line you most need to see stay at zero, and a line that vanishes when it reads zero cannot be checked | |
| severity | no values | – | Prohibited. A brief line counts; it does not rank. The severity ramp belongs to the row, and colouring a handover figure would tell you which count to worry about before you have read what it counts |
| size | no values | – | Prohibited. 17px mono at 700 is the whole argument for the component. A second size would mean a second claim about which fact is the large one, and the block heading already makes it |
When to use it
In a counted block of the shift brief, once per fact the incoming analyst has to hold: what waits on a decision, what Clerk closed alone, what is still being gathered. Four of them stack into a block and the block is read down in one pass. Anywhere the fact is not a count, this is the wrong component.
Where she meets it. Twice a day at most, at the two moments the shift changes hands, and each time under time pressure from somebody waiting to leave. That is the whole reason the figure is the largest thing on the surface: the second of the three MVP jobs is pick up and hand off a shift, and the brief has to be readable before she has sat down.
Rule and anti-rule
Do
A figure, what the figure counts with its scope, and where to go and see it. The count names its claim and its scope, and the destination is on the same line as the number that earned it.
Do not
Never a word in the number column. 17px at weight 700 is licensed on a counted value and on nothing else, and a word set there claims a precision it does not have. An uncounted fact under a block is gnote, which is the quiet line built for exactly that.
At 360 the three columns hold: 52px for the figure, the rest for the sentence, and .go pinned right at its own width. The sentence wraps because its column is minmax(0,1fr) rather than 1fr, which is the difference between a grid that wraps and a grid that pushes the destination off the screen.
States
Only the link form has any. Point at the first line below and it takes a ground; press and it takes a second one. Point at the one under it and nothing happens, because there is nowhere for it to go.
dark, shipped
light, the pair
hover, and the whole line takes --bg-hover. The target is the line, not the destination text.
active, one step further in to --bg-active.
focus-visible, the one ring in the product, declared in base.css.
nothing. It is a div, and there is no list behind it.
| State | What it overrides | Dark | Light |
|---|---|---|---|
| hover | --bg-hover, the ground of the whole line |
||
| active | --bg-active, one step further from the page |
||
| focus-visible | --color-focus, through base.css |
Out of reach does not exist here, and that is a decision rather than an omission. Three of the nineteen lead somewhere and sixteen do not, and the sixteen are written without the a. A disabled link would say the destination exists and is closed to you; what is true is that there is nothing to open, and nowhere to review in the third column says so in words.
Motion
Response, 120ms, the browser's own ease. What moves is a ground, a counted line in the shift brief. 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 |
|---|---|---|---|---|
--text-primary | ink 4.5:1 | the count, and the sentence by inheritance | ||
--text-secondary | ink 4.5:1 | a quiet count, the destination, and the line of detail | ||
--line-separator | line, exempt | the rule under every line, and the one above the first, through --rule-hair | ||
--bg-surface | fill | the hover ground of the link form, through --bg-hover |