Reference · SemText · Sequences & progress

`<sem-chronology>`

SemText element

Each child is one event with a when date, an optional end date, and an optional status. You write the events in order; the element never sorts them. It can show the events as a timeline rail or as a plain list.

A timeline: dated events shown in the order they happened. Each child is one event with a when date, an optional end date, and an optional status. You write the events in order; the element never sorts them. It can show the events as a timeline rail or as a plain list. (recommended): the event's date or period start, as the author wants a machine to see it (ISO-8601 preferred, free text allowed).

(optional): period end.

(optional): `done | current | todo | blocked` — same vocabulary as `sem-step`. Absent means unannotated, **not** `todo`: an event is a record of something that happened, not a task.

`timeline` (default) | `list`. Unknown values render as `timeline`.

per the global attribute catalog (conventions.md §2)

Example

sem-chronology.html

source

              
              <sem-chronology kind="release-history" view-as="timeline" role="list">
            
                <sem-event role="listitem" when="2026-03-02" status="done">
            
                  <time datetime="2026-03-02">2 Mar 2026</time> v0.1 tagged — Lit bundle ships.
            
                </sem-event>
            
                <sem-event role="listitem" when="2026-06" until="2026-08" status="current">
            
                  <time datetime="2026-06">Jun–Aug 2026</time> Reading-experience waves.
            
                </sem-event>
            
                <sem-event role="listitem" when="2026-Q4">Theme pipeline.</sem-event>
            
              </sem-chronology>

render

Live render boots with JavaScript — the authored source is alongside.

variant: view-as="list"

The list mode: no rail, events stack as plain rows and the date label sits inline with the prose. All four `status` values in one changelog — `todo` is the dashed marker; colour never carries the meaning alone.

variant: view-as="list"

sem-chronology-view-list.html

source

              
              <sem-chronology kind="changelog" view-as="list" role="list">
            
                <sem-event role="listitem" when="2026-02-11" status="done"><time datetime="2026-02-11">11 Feb 2026</time> Export pipeline lands.</sem-event>
            
                <sem-event role="listitem" when="2026-05-04" status="done"><time datetime="2026-05-04">4 May 2026</time> Quiz-occlusion reveal ships.</sem-event>
            
                <sem-event role="listitem" when="2026-08" status="blocked"><time datetime="2026-08">Aug 2026</time> Offline pack — blocked on the storage budget.</sem-event>
            
                <sem-event role="listitem" when="2026-09" status="current"><time datetime="2026-09">Sep 2026</time> Reading-experience overhaul.</sem-event>
            
                <sem-event role="listitem" when="2026-11" status="todo"><time datetime="2026-11">Nov 2026</time> Theme marketplace.</sem-event>
            
              </sem-chronology>

render

Live render boots with JavaScript — the authored source is alongside.

variant: bare when/until — no <time>

With no `<time>` authored the CSS renders `when` — plus ` – until` for a period — as the date label via `attr()`; `view-as` omitted means the default `timeline`.

variant: bare when/until — no <time>

sem-chronology-bare-when.html

source

              
              <sem-chronology kind="roadmap" role="list">
            
                <sem-event role="listitem" when="2026-Q1" until="2026-Q2" status="done">Lit vocabulary consolidated.</sem-event>
            
                <sem-event role="listitem" when="2026-Q3" status="current">Docs-overhaul waves.</sem-event>
            
                <sem-event role="listitem" when="2026-Q4">Theme pipeline.</sem-event>
            
              </sem-chronology>

render

Live render boots with JavaScript — the authored source is alongside.

Source: spec/schema/sem-chronology.md