Tiempo relativo

«hace 3 minutos», «dentro de 2 horas», «ayer»: una fecha contada desde ahora, con la fecha exacta a un palmo (en el title, que sale al pasar el ratón, y en el datetime, que es lo que leen las máquinas). Cuenta truncando, no redondeando: hora y media es «hace 1 hora» y «dentro de 1 hora», igual en los dos sentidos.

Cuándo usarlo

• Lo reciente, donde importa más cuánto hace que el día exacto: un aviso, un comentario, la última sincronización.
• withFullDate cuando la fecha exacta tiene que verse siempre, sin pasar el ratón.
• fixed en listas muy largas: deja de refrescarse solo.

Cuándo no

• Una fecha que se tiene que leer tal cual (la de una factura, un vencimiento): escríbela entera. fullDate(date, locale), que también exporta la biblioteca, da la misma que va en el title.
• Algo que baja segundo a segundo hasta cero: Countdown.

Teclado: no es interactivo y no entra en el orden del Tab. La fecha exacta del title solo sale con el ratón: si hace falta con el teclado o en el móvil, withFullDate (que la pone a la vista y ya no la repite en el title: el lector la leería dos veces).

Accesibilidad: es un time y el texto que se ve es el que se lee: no lleva un aria-label distinto encima, que rompe el control por voz. Una fecha que no se entiende dice «Fecha desconocida» en vez de pintar «Invalid Date».

Refresco: se vuelve a pintar justo cuando cambia el texto, y solo entonces: de diez en diez segundos el primer minuto, al cambiar el minuto la primera hora, al cambiar la hora el primer día y nunca a partir de ahí. Si cambia date, se cuenta desde ese momento. Hecha en el servidor, al hidratar no da error aunque el reloj del navegador ya sea otro: el siguiente cambio la pone al día.

Tamaño y tono: no tiene. Es texto corrido y hereda la letra y el color de donde va, como un enlace dentro de una frase.

Estados: el subrayado de puntos avisa de que hay una fecha exacta debajo y se oscurece al pasar el ratón (solo donde hay ratón). Con la fecha a la vista no lleva subrayado.

Aspecto fino: --amset-relative-time-underline (el punteado), --amset-relative-time-underline-active (al pasar el ratón) y --amset-relative-time-description (la fecha entera y «Fecha desconocida»).

Contexto: va dentro de LocaleProvider (o de AmsetProvider), que decide el idioma de «hace» y «dentro de».