Kit part · Timelines
An event log like the roll of a chart recorder. The rail is engraved down the plate and each event is a tick stamped across it, with its time in tabular figures and its words beside it. A lamp on the rail is the only colour, and a marker for the present separates what has happened from what is still to come.
Pull request 481, two reviewers.
release/4.2 from main.
No merges until the canary is done.
412 tests in three minutes.
Watching the error rate for ten minutes.
p95 latency passed 800 ms on the canary.
p95 latency passed 800 ms on the canary.
Latency back under 200 ms. Canary at 100%.
Booked with the platform team.
412 tests in three minutes.
Watching the error rate for ten minutes.
p95 latency passed 800 ms on the canary.
Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.
Aluminium
| Part | Event | Lamps | The pen | To come |
|---|---|---|---|---|
| Timeline |
|
|
|
|
Graphite
| Part | Event | Lamps | The pen | To come |
|---|---|---|---|---|
| Timeline |
|
|
|
|
| Name | Kind | Values | What it does |
|---|---|---|---|
| ol.tui-timeline | element | aria-label · aria-live | The roll. An ordered list, named. Add aria-live="polite" if events arrive while it is on screen. |
| --sm | class | compact | The same roll at a tighter pitch, for a card or a side panel. |
| li.tui-timeline__event | class | time · tick · body | One event: its time, its tick on the rail, and its words. |
| time.tui-timeline__time | element | datetime | The time, printed in tabular figures. Give it a datetime. |
| .tui-timeline__tick | class | lamp optional | The stamped tick on the rail. Put a lamp in it and the lamp takes the tick’s place. |
| .tui-lamp[data-lamp] | element | green · amber · red · blue · white | A state lamp set into the rail. Give it role="img" and an aria-label, since a colour says nothing to a screen reader. |
| .tui-timeline__title · __text | class | words | A heading and one line. The heading level is yours; h3 is a default. |
| li.tui-timeline__now | class | the pen | Marks the present. Everything after it is still to come and sits on dotted rail. Use one, or none. |
| --tl-time · --tl-rail · --tl-tick · --tl-bg | custom property | lengths · a colour | The width of the time column and of the rail, how far down each tick is stamped, and the plate the pen’s halo matches. |
| data-new | attribute | set by timelineAppend | On an event for the first 400ms: the tick lands and settles. |
| timelineAppend(list, event, { future }) | function | kit.mjs | Adds an event before the pen (or at the end with future: true) and returns the <li>. |
| timelineEventHTML(event) · timelineClock(date) | function | kit.mjs | The same event as a string of markup, for a server; and “14:02” from a Date. |
<ol class="tui-timeline" aria-label="Deploys today" aria-live="polite">
<li class="tui-timeline__event">
<time class="tui-timeline__time" datetime="2026-09-29T09:31">09:31</time>
<span class="tui-timeline__tick">
<span class="tui-lamp" data-on role="img" aria-label="Passed"></span>
</span>
<div class="tui-timeline__body">
<h3 class="tui-timeline__title">Build passed</h3>
<p class="tui-timeline__text">412 tests in three minutes.</p>
</div>
</li>
…
<li class="tui-timeline__now" aria-current="time">
<span class="tui-timeline__time">Now</span>
<span class="tui-timeline__tick" aria-hidden="true"></span>
<div class="tui-timeline__body"><time datetime="2026-09-29T11:40">11:40</time></div>
</li>
</ol>import { timelineAppend } from '/kit/kit.mjs'; // optional: the markup needs no script
// Stamps a new event in above the pen. Time and datetime default to now.
timelineAppend(document.querySelector('.tui-timeline'), {
title: 'Alert cleared',
text: 'Error rate under 0.1% for an hour.',
lamp: 'green', // 'green' | 'amber' | 'red' | 'blue' | 'white'
state: 'Passed', // what the lamp says, in words
});
// Something still to come goes after the pen:
timelineAppend(list, { time: '14:00', title: 'Release review' }, { future: true });Needs kit.css only, no script. How to install the kit.
<time datetime>.role="img" and an aria-label such as “Failed”); the ticks and rails are hidden from assistive technology.aria-current="time", so “Now” is said where it stands in the list.aria-live="polite" on the list, an appended event is read out when it arrives without pulling focus.One grid per event: the time, a rail cell and the words. Each event draws its own length of the rail, a 2px groove darker than the plate with its lower edge lit by the lamp above, so the rail is continuous with nothing to position. The tick is a 14px bar stamped across it; with a lamp in it, the lamp is set in the rail instead. The rail below the pen is the same groove dotted in, done with one sibling selector, so there is no “future” class to forget. The pen is the kit’s contrast cap on the time side, a diamond on the rail and a rule across. Appending stamps the tick in with a short overshoot; there is no script needed to draw any of it.
What happened, in order, with the state of each thing said by a lamp and in words.
6 rules in this file, with the foundations they rest on and the anti-patterns that break them. Full rules ship in the brain with the Pass.
Rows in a rack: a mark, a title, a second line and a fact or a key at the end. Chosen rows sink into a recess with their check key latched; in a running order, a row lifts out of the rack on its skirt and slides past the others, from the keyboard or by its grip.
The only colour in the kit: a lamp that is on. Green is on, amber is waiting, red is recording or failing, blue is linked, white is standing by. Always next to words.
A strip-chart recorder: gridded paper advancing under a pen that rides a rail, drawing the live value as the paper moves and printing the time in the margin. For p95 latency, tokens per second, grid frequency, a cold room’s log.