Board
.board-controls
Board — the strip of controls above a live board, and the one control on it that is not a filter: «show me another day».
Examples
updated at 10:26
<div class="board-controls">
<button class="link board-when-toggle" type="button" aria-expanded="false" aria-controls="when-demo">See another day</button>
<input class="input input-lg board-when-date" id="when-demo" type="date" aria-label="The day to show" hidden>
<p class="board-stamp">updated at 10:26</p>
</div>Closed: the way to another day at the reading edge, the stamp at the other.
The date field is hidden because the site’s own script reveals it — a control that appeared without a script would promise something nothing answers.
Timetable for Wednesday 19 August: 283 trains.
<div class="board-controls">
<button class="link board-when-toggle" type="button" aria-expanded="true" aria-controls="when-open">Back to now</button>
<input class="input input-lg board-when-date" id="when-open" type="date" value="2026-08-19" aria-label="The day to show">
<p class="board-stamp" data-block>Timetable for Wednesday 19 August: 283 trains.</p>
</div>The field takes the slot the stamp was in, and data-block drops the stamp onto a line of its own — it has stopped being a stamp and become a sentence.
--board-when-date-lead: auto puts the field at the reading end instead, which is what one of the two consumers wants.
updated at 10:26
<div class="board-controls" style="max-inline-size: 22rem">
<button class="link board-when-toggle" type="button" aria-expanded="false" aria-controls="when-narrow">See another day</button>
<input class="input input-lg board-when-date" id="when-narrow" type="date" aria-label="The day to show" hidden>
<p class="board-stamp">updated at 10:26</p>
</div>Under 33rem the stamp takes its own line and aligns to the start, and the strip asks its own width rather than the window’s.
Not taste: anchored to the end it grows leftwards as its text arrives and drags whatever shares its line — measured by one consumer at 0.1297 of CLS against 0.0710.
Tokens 5
Level 2, declared on .board-controls itself. Set any of them on that selector to restyle this block without touching the skin.
| Token | Default |
|---|---|
| --board-controls-align | center |
| --board-controls-gap | var(--space-2) var(--space-3) |
| --board-when-toggle-min-size | var(--target-size-min) |
| --board-when-date-lead | 0 |
| --board-when-toggle-font-size | inherit |
Variants and states
Variants
None. It is one shape, and the page does the rest.
Inside it
.board-stamp.board-when-date.board-when-toggle
State it reads
Read from the platform, never mirrored into a class that could disagree with it.
data-block
Before you ship it
What you have to do 7 requirements
- Delete
margin: 0from the stamp's own rule. Both consumers write one, and a site stylesheet is unlayered, so it beats this block's auto margin whatever the layer — the stamp then sits against the toggle and nothing says why. Placement is this file's; the stamp's own rule keeps its voice. - Put
.linkon the toggle and.inputon the date field. These are placement classes on top of two components, not replacements for them: on their own they are an unstyled button and an unstyled field.input-lgas well if the field is reached for standing on a platform — 40px is under the 44 a thumb finds without looking. - Name the date field. It sits in the stamp's slot at the end of a line with no visible label to point at, so
aria-labelon the input is the legitimate case. Say the window it accepts, because the picker says it by greying the rest out and that is the same sentence said twice. - Wire
aria-expandedandaria-controlson the toggle, and change the button's words with its state — a control says what it does, not what it is called. Nothing here reads either attribute. - Set
data-blockon the stamp when it stops being a stamp and becomes a sentence about what is shown. It then takes a line of its own at any width, which is what makes the date field able to have the slot it was in. - Give it a container that is not sized by its contents. The strip claims
inline-size: 100%for the reason above, so a block-level parent or a flex container is right and afit-contentbox is not: inside one the strip has no width to query and nothing says so. - Keep the stamp short. Reserve its width if it arrives from empty —
min-inline-sizeinemon the text — or it will push whatever shares its line.@rootis stated because there is no structural answer: this block deliberately does not style.board, so no class is a prefix of all the others and the guesser falls through to whichever sorts first — it picked.board-stamp, and the contract then announced the block's tokens on a slot instead of on the strip that owns them. A tag runs to the end of the docblock, which is why this is the last line in it. @root .board-controls
src/css/blocks/board.css · npx mostlycss add board