Relative time

"3 minutes ago", "in 2 hours", "yesterday": a date counted from now, with the exact date within reach (in the title, which appears on hover, and in the datetime, which is what machines read). It counts by truncating, not rounding: an hour and a half is "1 hour ago" and "in 1 hour", the same in both directions.

When to use it

• Recent things, where how long ago matters more than the exact day: a notice, a comment, the last synchronization.
• withFullDate when the exact date always has to be visible, without hovering.
• fixed in very long lists: it stops refreshing on its own.

When not to

• A date that has to be read as it is (that of an invoice, a due date): write it in full. fullDate(date, locale), which the library also exports, gives the same one that goes in the title.
• Something that counts down second by second to zero: Countdown.

Keyboard: it is not interactive and does not enter the Tab order. The exact date in the title only appears with the mouse: if it is needed with the keyboard or on mobile, use withFullDate (which puts it in view and no longer repeats it in the title: the reader would read it twice).

Accessibility: it is a time and the text that is seen is the text that is read: it does not carry a different aria-label on top, which breaks voice control. A date that cannot be understood says "Unknown date" instead of drawing "Invalid Date".

Refresh: it is redrawn exactly when the text changes, and only then: every ten seconds during the first minute, when the minute changes during the first hour, when the hour changes during the first day, and never after that. If date changes, it counts from that moment. When rendered on the server, it does not error on hydration even if the browser's clock is already different: the next change brings it up to date.

Size and tone: it has none. It is running text and inherits the font and color of where it goes, like a link inside a sentence.

States: the dotted underline signals that there is an exact date underneath and it darkens on hover (only where there is a mouse). With the date in view it carries no underline.

Fine-tuning: --amset-relative-time-underline (the dotting), --amset-relative-time-underline-active (on hover) and --amset-relative-time-description (the full date and "Unknown date").

Context: it goes inside LocaleProvider (or AmsetProvider), which decides the language of "ago" and "in".