Cuenta atrás

Una cuenta atrás en segundos: «Reenviar el código en 29 s», «1:30» a partir del minuto y «1:02:05» a partir de la hora, con las cifras del idioma. Para lo que se agota: reenviar un código, el fin de una reserva, un carrito guardado.

Cuándo usarlo

• Una espera corta que la persona tiene que ver bajar.
• label dice de qué es la cuenta («Reenviar el código») y text cambia la frase que se ve mientras corre.
• endContent para lo que aparece al llegar a cero (normalmente el botón que ya se puede pulsar), finalAnnouncement para lo que se dice entonces y onFinish para enterarse desde el código.
• active={false} para pararla donde esté (al volver a true sigue desde ahí); al cambiar seconds vuelve a empezar.
• tone para cuando apremia: warning en una reserva que está a punto de caducar.

Cuándo no

• Avisar de que la sesión va a caducar, con las salidas a mano: IdleWarning.
• Una fecha que ya pasó o que está por venir («hace 3 minutos»): RelativeTime.

Teclado: no es interactiva y no entra en el orden del Tab; lo que se ponga en endContent, sí.

Accesibilidad: el número se ve cambiar cada segundo, pero no se anuncia cada segundo, que taparía cualquier otra cosa que estuviera leyendo el lector de pantalla. Una región status oculta lo dice cuando los segundos que quedan son múltiplo de announceEvery (10 por defecto), y con palabras: «Reenviar el código en 1 minuto y 30 segundos», porque «1:30» leído en voz alta suena a una hora. Al llegar a cero la misma región dice finalAnnouncement («Reenviar el código: la cuenta atrás ha terminado», por defecto) y se pinta endContent en lugar de la cuenta. La región está desde el principio: una que naciera ya con el texto dentro podría no leerse.

Reloj: cuenta contra la hora de verdad, no restando uno por latido. Una pestaña en segundo plano recibe sus temporizadores tarde (hasta uno por minuto); al volver, la cuenta dice lo que queda de verdad.

Tamaños: letra de 12, 13 o 14 px, y reserva el alto de un control de su tamaño (30, 36 o 44 px), para que al llegar a cero el botón de endContent ocupe el mismo sitio y no salte nada. Ponle un botón del mismo tamaño.

Variantes (variant):

• roll (por defecto): cada cifra va en su ventana y solo ruedan las que cambian; la que se va baja y la nueva entra por arriba, como un tambor. De 1:30 a 1:29 se mueven dos cifras, no el número entero.
• ring: un anillo que se vacía de forma continua, sin saltos de segundo, con el número dentro y label al lado. Es una sola animación de CSS que dura la cuenta entera y la lleva el reloj del navegador; con active={false} se para donde esté. Ahí no se usa text.
• text: el número entero cambia de golpe con un fundido corto, el aspecto de antes.

Movimiento: las cifras ruedan en la duración lenta del tema y lo de endContent entra con un fundido. Con movimiento reducido las cifras cambian sin rodar, pero el anillo sigue vaciándose a su ritmo: es lo que queda, no un adorno.

Aspecto fino: --amset-count-font, -height (el que reserva; auto si va dentro de una frase), -slot, -color (el texto), -number-color y -number-weight. En ring, --amset-count-ring (el lado: 44, 56 o 72 px según el tamaño) y --amset-count-ring-track (el color de lo ya gastado); el arco va del color del número.

Contexto: va dentro de LocaleProvider (o de AmsetProvider), que decide cómo se escriben las cifras.