HabTimeline

A column of dot-and-connector entries — version history, audit trails.

1. 1.14.2

   Renamed HabField to HabInput.

   Birte · 12m
2. 1.14.1

   Added the palette and the layering scale.

   Birte · 2h
3. 1.14.0

   Birte · yesterday

   Breaking

An ordered list — the rail is decoration, the order comes from the markup

<HabTimeline>
	<HabTimelineItem
		title="1.14.2"
		note="Renamed HabField to HabInput."
		meta="Birte · 12m"
	/>
	<HabTimelineItem
		title="1.14.0"
		meta="Birte · yesterday"
		last
	/>
</HabTimeline>

Each entry takes a title, a note beneath it, and a meta attribution line — each optional, and each rendering nothing when absent. The default slot takes anything else, so an entry can carry a badge or a link.

Set last on the final entry

It drops the connector below the dot. Without it the line runs on into whatever follows the timeline, which reads as a missing entry.

The dot

dot-color takes any CSS color and defaults to the accent. Use it when the entries have kinds — a release, a rollback, a note — and pair it with something readable, since a dot alone is invisible to a screen reader.

The dot is 9px on a 9px rail with a 1px connector, which is deliberately off the 4px grid: an odd width has a true centre, so the connector sits exactly under the dot rather than half a pixel to one side.

Accessibility

• HabTimeline is an <ol> and each entry is an <li>. The entries are ordered, and the markup is what makes a screen reader say how many there are and which one this is.
• The rail — dot and connector — is aria-hidden. The order comes from the list, not the line, so announcing it twice would be noise.
• A dot color is not information. Anything the color means has to be in the entry's text as well.

API

Slots

Slot	Bindings	Description
default	any	HabTimelineItem entries.

HabTimelineItem

Props

Prop	Type	Default	Description
dotColor	string	undefined	The dot's color. Any CSS color; defaults to the accent.
last	boolean	false	Drops the connector below the dot. Set it on the final entry, or the line runs into whatever follows the timeline.
meta	string	undefined	Attribution line: who and when.
note	string	undefined	Body line under the title.
title	string	undefined	Headline row.

Slots

Slot	Bindings	Description
default	any	Extra content under the attribution line.