Toast

Toast confirms a finished action with a brief message at a screen corner. A polite live region announces it, a native popover keeps it above the page, and a small init() module handles timing.

Public web API

A data-bitsy-toaster popover holding an <ol aria-live="polite"> region and a <template data-bitsy-toast-template>. Each toast is an <li data-bitsy-toast>.

<div data-bitsy-toaster popover="manual">
  <ol aria-live="polite" aria-label="Notifications"></ol>
  <template data-bitsy-toast-template>
    <li data-bitsy-toast>
      <p data-bitsy-toast-title></p>
      <p data-bitsy-toast-description></p>
      <button data-bitsy-toast-action type="button"></button>
      <button data-bitsy-toast-close type="button" aria-label="Dismiss">
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18" fill="none" stroke="currentColor" stroke-width="2" /></svg>
      </button>
    </li>
  </template>
</div>

<script type="module">
  import { init, toast } from "@bitsyui/bits/toast/init";
  init();
  toast({ title: "Settings saved", variant: "success" });
  toast({ title: "Project archived", action: { label: "Undo", onClick: restore } });
</script>

Keep the toaster in the page from load so the live region is announced reliably.
data-bitsy-variant="success" | "warning" | "error" tones a toast. Write the status in the title too.
data-bitsy-position="top" on the toaster stacks toasts at the top end.
A toast with an action stays until closed. data-bitsy-toast-duration="<ms>" overrides the timeout.

Try it

Each button adds a toast. Hover or Tab into the stack to pause the timers.

Behavior

A toast stays 5 seconds, plus one second per 120 characters over 60. Hover or focus inside the region pauses every timer.
Toasts with an action do not time out. Every toast has a close button.
At most three show at once; the oldest leaves as a new one arrives.
New toasts are announced politely and never take focus. Closing a focused toast returns focus to where it was.
toast() sets text with textContent, never HTML. Calling init() twice adds nothing; it returns a cleanup function.
The slide and fade are removed under prefers-reduced-motion: reduce.

Foundation versus Bit

The foundation does not style [popover] or lists inside it. data-bitsy-toaster adds the corner placement, stack, surface, tones, and motion. Use Alert for messages that stay on the page.