Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
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.
Basic usage
<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
| Attribute | Type | Default | Description |
|---|---|---|---|
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.
Enable version filtering
<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.
Group by month
<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.
Recently updated pages feed
<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:
Static page version list
<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 / Element | Purpose |
|---|---|
.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-pressedto 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
<change-set>— Inline change tracking for document revisions<page-info>— Page metadata display<site-index>— Keyword index with search