Organism
Rows
The scroll container of the queue, and that is all it is. Three declarations, standing on 43 instances across 43 screens: in Z4 38 and inside a block 5.
It exists so that the rows scroll and the zone around them does not. The scope bar, the readout and the keyboard strip stay put while two hundred rows go past, and the head row sticks to the top of this box rather than to the viewport. Take the box away and the sticky head has nothing to stick inside.
Inside a brief it stops scrolling, and that rule is not written here. A handover is read from the top in one pass, so a scroll box inside a scrolling document is a second scrollbar nobody asked for. brief owns the override, because otherwise this component would have to know where it is standing.
Anatomy
What the bench is standing in. A 280px flex column, which is z4 made short enough to fit on a page. flex:1 1 auto and min-height:0 do nothing at all without a parent of a settled height, so a bench that left that out would show a list that never scrolls and document the opposite of the component. Scroll inside it: the head stays, the readout above and the strip below stay, the rows move.
dark, shipped
18 waiting across 12 of 40 tenants in your scope
5 of 18 shownorder: unrecorded, waiting on you, severity, age
light, the pair
18 waiting across 12 of 40 tenants in your scope
5 of 18 shownorder: unrecorded, waiting on you, severity, age
.rowsthe box.flex:1 1 auto, so it takes whatever height the zone has left after the readout and the stripoverflow-y:autothe whole point. Two hundred rows go past inside this box and the zone around it does not movemin-height:0the declaration that makes the other two work. Without it the flex item refuses to shrink below its content and never scrolls at all, which reads as a component with no effect.row--headnot part of this file, and it depends on it entirely:position:sticky; top:0resolves against the nearest scroll container, which is this one.emptywhat stands here instead of rows when there are none. 5 of the 6 empties in the product sit inside this box
Variants
One axis, and both of its values change the row rather than this. The container carries the axis in its own header comment and declares nothing for it: the log’s widths live on row--log, and the handover line is a component of its own.
| Axis | Value | Uses | The rule |
|---|---|---|---|
| list | base | 31 | the queue. Seven zones at --row-tracks |
.rows--log | 7 | the log. It has no declaration in the system. In kit.css the container set the track list; here the same seven zones at the log’s widths are row--log reading --row-tracks-log, so the class survives on the screens as a name and does no work | |
| scroll | no values | – | Prohibited, and the reason is where the rule lives. There is no rows--static. The one place the list must not scroll is inside a brief, and that override belongs to brief, the container that changes it |
| density | no values | – | Prohibited. It has no padding, no gap and no type of its own. Everything a reader would want to loosen belongs to row, and design principle 5 answers it there |
The remaining 5 of the 43 have left: .rows--moved in the shift brief was ruled a component of its own at step 2 and the five screens wear rows-moved now. Counted after the rename this container stands on 38.
When to use it
Around every list of row that fills a zone: the queue and the log. Not around four lines in a block, and not around anything read as a document.
Where she meets it. Six hours a day, without ever seeing it. What she sees is that the column names are still there at row 90 and the count of what is shown has not scrolled away. This is the component that costs the least to write and is noticed only when it is missing.
Rule and anti-rule
Do
One scroll box, filling the zone, with the readout above it and the strip below it standing still. The head is sticky because this box is what it sticks to.
Do not
Never inside a document. That is rows-moved, which does not scroll: a handover is read from the top in one pass, and a scroll box inside a page that already scrolls hides the last thing that moved behind a scrollbar.
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.
- R9. One selected row at a time, and none at 360: at that width selecting opens the standalone case instead.
States
None. It is layout, it reads no colour, and there is nothing on it to point at. Everything alive in the bench below belongs to row.
dark, shipped
light, the pair
The scrollbar is the browser’s and it is not restyled. Nothing in this system paints one. On a console read for six hours the platform’s own scrollbar is the one the analyst already knows how to grab.
At 360 the box keeps scrolling and the row underneath it becomes one column, because --row-tracks collapses to 1fr on :root at that width. This file changes nothing there and needs no media query of its own.
What it reads, and where it stands
Nothing. It is the only organism in the system with no colour role at all, which is what makes it the clearest case that layout and paint are separable here: every ink and every line in the bench above is declared by row, readout or qfoot.
| Role | Surface | Where on the component | Dark | Light |
|---|---|---|---|---|
| no fill | – | it is transparent, and the zone behind it shows through | – | – |
| no ink | – | it has no text of its own | – | – |
| no line | – | the rules between rows belong to row, through --rule-hair | ||
--bg-surface | fill | the sticky head that depends on this box, declared by row--head |