Notifications

The notification queue: short messages that appear in a corner, go away on their own and do not get in the way. It is placed once, at the top of the tree (AmsetProvider already includes it), and they are fired from any component inside:

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

When to use it

• Telling what has already happened: "Customer saved", "Order sent".
• With action to undo what was just done, and duration: 0 so it does not go away on its own until closed by hand. text adds a line below the title.
• tone: 'error' for a failure that needs to be heard right away; without tone, 'info'. They last 5 seconds by default.
• show returns the id, in case one has to be removed earlier (close(id)); closeAll() removes them all.
• On the provider, position chooses the corner ('bottom-end' by default) and max how many fit at once (4): when exceeded, the oldest ones go away.

When not to

• What has to be corrected in a form: the field's error, or an Alert next to it.
• Something about the whole application that stays in view: GlobalAlert.
• A decision: ConfirmAction, useConfirmation or Dialog.

Keyboard: they do not take the focus. Each one has its close button (and its action button), reached with Tab. With the mouse over it or the focus inside, the timer stops; when leaving, it starts counting its whole time again. The action runs and closes the notification.

Accessibility: they appear in a named region (regionLabel, "Notifications"). Inside there are two live regions that exist from the moment the provider is mounted, empty, because a region that is born with the text already inside may not be announced: status for normal ones, which wait for the screen reader to finish what it was reading, and alert for errors, which interrupt (that is why errors are stacked separately, at the end). They have aria-atomic="false": when one arrives, only that one is read. They carry an icon in addition to the color, and the close button is called "Close: <title>".

Fine-tuning: CSS variables --amset-notifications-width and -margin for the queue, and --amset-notification-* (-tone, -slot, -padding-block, -padding-line, -background) for each one. The queue sits on --amset-layer-notification, the last step of the ladder. The action button is the library's Button and the X is the one used by layers: same hover, same focus and 44 px with a finger.