Estado de conexión

La cinta de «sin conexión»: aparece cuando el navegador pierde la red y se quita cuando vuelve. Al volver dice «Conexión recuperada» durante 4 segundos (fijos), porque enterarse de que ya se puede seguir importa tanto como lo otro. Con red no se ve nada: solo está la región de estado, vacía.

Cuándo usarlo

• Una vez, arriba de la aplicación, sobre todo donde se escribe o se guarda: formularios, caja, pedidos.
• offlineText para decir qué pasa con lo que se haga sin red en tu aplicación; returnText cambia lo que se dice al volver, y warnReturn={false} quita la cinta sin decir nada.

Cuándo no

• Un servicio de fuera caído o una parada programada: GlobalAlert.
• Un guardado concreto que ha fallado: Alert, con «Reintentar».
• Reintentar las peticiones: no lo hace; eso es cosa del cliente HTTP.

Teclado: no tiene nada enfocable.

Accesibilidad: es role="status", no alert: perder la red es un aviso, no una emergencia que tenga que cortar lo que esté leyendo el lector de pantalla. La vuelta también se dice. La región está puesta desde el principio, vacía, y la cinta entra dentro al caerse la red: una región que aparece ya con el texto dentro no la anuncian los lectores de pantalla. El icono es decorativo. El estado se lee en un efecto y no durante el render: en el servidor no hay navigator, y pintar una cosa allí y otra en el navegador rompe la hidratación.

Aspecto fino: sin variables propias: lo que se ve es amset-connection__banner, dentro de la región amset-connection, que lleva amset-connection--return al volver (fondo --amset-warning-soft sin red, --amset-success-soft al volver).

En esta página: los botones de cada historia lanzan los eventos offline y online de la ventana, como haría el navegador. Todas las historias escuchan a la misma ventana, así que reaccionan a la vez.