Molecule

Handover line

A line in the shift brief: something that moved while you were away. 35 instances across 7 screens, and it stands nowhere else.

It is a different component and not a variant, and the reason is the anatomy rule rather than the drawing. It has four zones where the queue row has seven. No severity and no cost: a pointer in a handover is not a thing to triage, it is a thing that already happened.

Anatomy

• .row-movedthe whole line. A div and not an a, and that is the component
• four zoneswhen, what, the state it ended in, and how long ago. The queue row’s severity, verdict and cost have nothing to say about a decision somebody else already took
• .statesholds state. In 132px a state can be two words wide, so it wraps and centres rather than clipping

Behaviour at width

Below 1280, the system's one point (Width), the gap drops to --space-1 and the padding to --space-3. The four tracks do not collapse: --row-tracks-moved has no narrow value, because the shift brief is not rendered at that width at all. Above the point the side padding is the same clamp(--space-3, 0.31rem + 0.31vw, --space-4) the queue row carries, written again because this is a different component. It was a query at 1560 until stage 10, and it gives four pixels of padding back to the content continuously now rather than once at a number nobody had named.

Variants

The 132px, 1fr, 116px, 44px track set is --row-tracks-moved in tokens.css. It was one of the two values the second instrument at step 1 found declared and recorded nowhere.

When to use it

At the top of a shift, once. The brief answers one question: what happened while I was not here. Rasha reads it, decides whether anything needs picking up, and goes to the queue.

Where she meets it. Twice a day at most, and never in the middle of ruling. That is the whole argument for it having no states: a brief that could be clicked would invite her to work it, and the work is in the queue.

Rule and anti-rule

States

Two, and the first reading of this component had them wrong. Every one of the thirty instances is an a with an href: a line in a handover names a case, and the case opens. Hover and active are the same two tokens the queue row reads.

What survived the correction is the smaller half of the original claim. There is no SELECTED state: a brief is read in one pass and nothing in it is being ruled on. That is still the difference from row that matters most, and it is a real one; "point at these and nothing happens" was not.

A queue row is decided; a line in a handover is read, and then opened if she wants the case behind it. So it hovers like a row and it never carries a selected state, because the brief is a record of what somebody else already did and there is nothing in it to rule on. The sentence that stood here said no hover and no href, and the markup on three coloured screens says otherwise on eighteen instances.

Motion

Response, 120ms, the browser's own ease. What moves is a ground, a line in a handover. 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

Copy this

Where it stands