Kern 0.12.0 GitHub
Data

<kern-timeline-item>

One event of kern-timeline: a marker on the line, heading, point in time, description and optional details and actions. The marker has a shape per tone like kern-status (ok = circle, warn = diamond, danger = square, busy = pulsing circle, neutral = hollow circle), with icon inside. Colour and shape are decoration: the heading or the status word says what happened.

collapsible hides the details slot behind a «Show details» button (aria-expanded, Enter/Space).

Used inside: kern-timeline

Examples

See the examples on kern-timeline.

Properties

collapsiblereflectsdefault false
boolean

Hides the details slot behind a button.

datetime
Date | number | string | undefined

When: ISO 8601 point in time, epoch milliseconds or a Date. Shown with kern-date or, in day groups, kern-time.

heading
string | undefined

What happened, e.g. «Firmware updated».

icon
"bulb" | "calendar" | "check" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "clock" | "close" | "copy" | "download" | "edit" | "external" | "eye" | "eye-off" | "filter" | "home" | "inbox" | "info" | "link" | "lock" | "menu" | "minus" | "moon" | "more" | "plus" | "power" | "refresh" | "search" | "settings" | "star" | "sun" | "thermometer" | "trash" | "upload" | "warn" | "wifi" | undefined

Glyph in the marker (see kern-icon).

labelHideattribute label-hide · default Hide details · de Details ausblenden
string | undefined

Text of the button that hides the details; defaults to the Kern text.

labelShowattribute label-show · default Show details · de Details anzeigen
string | undefined

Text of the button that shows the details; defaults to the Kern text.

openmutablereflectsdefault false
boolean

Whether collapsible details are shown.

relativedefault false
boolean

Shows the point in time relative to now («3 hours ago»); the absolute value is the tooltip.

status
string | undefined

State as a word beside the heading (a kern-status with tone), e.g. «Offline».

tonereflectsdefault 'neutral'
"busy" | "danger" | "neutral" | "ok" | "warn"

Shape and colour of the marker, as in kern-status.

Events

kernToggle
CustomEvent<{ open: boolean; }>

After the user opened or closed the details.

Slots

(default)

Description: one or two sentences

actions

Buttons or links, e.g. «Open update log»

details

Longer details, e.g. a kern-kv or a changelog

CSS parts

day

The day heading above the first event of a day (with group-by="day" on kern-timeline)

details

The details area

heading

The heading

marker

The marker on the line