Notificaciones

La cola de notificaciones: avisos cortos que salen en una esquina, se van solos y no cortan el paso. Se pone una vez, arriba del árbol (AmsetProvider ya lo trae), y se lanzan desde cualquier componente de dentro:

const { show } = useNotifications()
show({ title: 'Factura anulada', tone: 'warning', duration: 0,
  action: { label: 'Deshacer', onPress: restaurar } })

Cuándo usarlo

• Contar lo que ya ha pasado: «Clienta guardada», «Pedido enviado».
• Con action para deshacer lo recién hecho, y duration: 0 para que no se vaya sola hasta que se cierre a mano. text añade una línea debajo del título.
• tone: 'error' para un fallo que hay que oír ya; sin tone, 'info'. Duran 5 segundos por defecto.
• show devuelve el id, por si hay que quitarla antes (close(id)); closeAll() las quita todas.
• En el proveedor, position elige la esquina ('bottom-end' por defecto) y max cuántas caben a la vez (4): al pasarse, se van las más viejas.

Cuándo no

• Lo que hay que corregir en un formulario: el error del campo, o un Alert al lado.
• Algo de la aplicación entera que se queda a la vista: GlobalAlert.
• Una decisión: ConfirmAction, useConfirmation o Dialog.

Teclado: no se llevan el foco. Cada una tiene su botón de cerrar (y el de su acción), a los que se llega con Tab. Con el ratón encima o el foco dentro, el reloj se para; al salir, vuelve a contar su tiempo entero. La acción se ejecuta y cierra la notificación.

Accesibilidad: salen en una región con nombre (regionLabel, «Notificaciones»). Dentro hay dos regiones vivas que están desde que se monta el proveedor, vacías, porque una región que nace ya con el texto dentro puede no anunciarse: status para las normales, que esperan a que el lector de pantalla termine lo que estaba leyendo, y alert para los errores, que interrumpen (por eso los errores se apilan aparte, al final). Llevan aria-atomic="false": al llegar una se lee esa sola. Llevan icono además del color, y el botón de cerrar se llama «Cerrar: <título>».

Aspecto fino: variables CSS --amset-notifications-width y -margin para la cola, y --amset-notification-* (-tone, -slot, -padding-block, -padding-line, -background) para cada una. La cola va en --amset-layer-notification, lo último de la escalera. El botón de la acción es el Button de la librería y la equis, la de las capas: mismo hover, mismo foco y 44 px con el dedo.