HyRelativeTime

Renders a date as a relative phrase ("3 minutes ago", "in 2 days"), auto-updating as time passes.

Wraps a native <time datetime> so the precise timestamp is always in the DOM for screen readers and tooling. Phrasing comes from Intl.RelativeTimeFormat; the elapsed-duration math runs on Temporal (via the shared ensureTemporal() gate — native on evergreen engines, polyfilled only on Safari / non-Temporal runtimes) so unit boundaries are calendar-accurate rather than fixed-second approximations.

SSR safety: relative time is non-deterministic, so the server and the first client render emit the absolute date (deterministic), then upgrade to relative on mount — avoiding a hydration mismatch.

Key Features:

• format: long / short / narrow
• sync: self-managing refresh that tightens near, relaxes far, and pauses on document.hidden
• threshold: past a cutoff, fall back to the absolute formatted date
• Past and future tense; locale-aware

Examples

<hy-relative-time date="2026-06-12T10:00:00Z" sync></hy-relative-time>

Slots

• default - No slots; the element renders its own <time>.