time-index

Interactive changelog/timeline with relative dates, version filtering, sort toggle, and recently updated pages feed.

Overview

The <time-index> component enhances a static changelog or timeline with relative dates, version filtering, sort toggle, and a recently updated pages feed. Without JavaScript, the changelog renders as a readable ordered list.

<time-index> <ol class="changelog-entries"> <li> <h3 class="version-header"> <span class="version-tag">v2.1.0</span> <time datetime="2026-03-15">March 15, 2026</time> </h3> <ul> <li><mark class="new">New</mark> Added glossary-index component</li> <li><mark class="change">Change</mark> Updated theme picker layout</li> <li><mark class="fix">Fix</mark> Corrected nav scroll offset</li> </ul> </li> <li> <h3 class="version-header"> <span class="version-tag">v2.0.0</span> <time datetime="2026-02-01">February 1, 2026</time> </h3> <ul> <li><mark class="new">New</mark> Launched site-map component</li> <li><mark class="remove">Remove</mark> Dropped legacy grid system</li> </ul> </li> </ol> </time-index>

Attributes

AttributeTypeDefaultDescription
group string "version" Grouping mode: "month" or "version"
view string "date" View mode: "date" or "version"
versions boolean — Enable version filter dropdown
updates-src string — URL for recently updated pages JSON data. When set, a recently updated pages feed is shown.

Version Filtering

Add versions to inject a dropdown that lets users filter the changelog to a specific version.

<time-index versions> <!-- changelog entries --> </time-index>

Grouping by Month

Set group="month" to group entries by calendar month instead of version number. Useful for project timelines or blogs.

<time-index group="month"> <!-- entries grouped by month --> </time-index>

Recently Updated Pages

Set updates-src to display a feed of recently updated pages alongside the changelog, loaded from a JSON endpoint.

<time-index updates-src="/api/recently-updated.json"> <!-- changelog entries --> </time-index>

Page List Markup

The page list can also be provided as static markup:

<ul class="page-version-list"> <li> <a href="/docs/elements/web-components/glossary-index/">glossary-index</a> <span class="version-tag">v2.1.0</span> <time datetime="2026-03-15">March 15, 2026</time> </li> <li> <a href="/docs/elements/web-components/site-map/">site-map</a> <span class="version-tag">v2.0.0</span> <time datetime="2026-02-01">February 1, 2026</time> </li> </ul>

CSS Classes

Class / ElementPurpose
.changelog-entries Ordered list wrapping all changelog items
.version-header Heading for each version or date group
.version-tag Version number badge
mark.new New feature badge
mark.change Change or update badge
mark.fix Bug fix badge
mark.remove Removal or deprecation badge
.page-version-list List of recently updated pages

Behavior

  • Relative dates: <time> elements are enhanced with relative labels (e.g., "2 weeks ago") via tooltip or inline text.
  • Sort toggle: A button is injected to toggle between newest-first and oldest-first ordering.
  • Version filter: When enabled, a dropdown lists all versions for quick filtering.
  • Progressive enhancement: Without JavaScript, the static ordered list renders in document order.

Accessibility

  • Uses semantic <ol>, <time>, and <mark> elements
  • Sort toggle button uses aria-pressed to indicate sort direction
  • Version filter dropdown is labelled for screen readers
  • Change type badges use <mark> for semantic highlighting
  • Keyboard accessible — tab through controls and links
  • Without JavaScript, content remains fully readable

Related