mica
Patterns / toast

toast

Tier 1

A corner-pinned manual popover. Display, dismissal, and announcement are declarative; queueing and auto-dismiss are honest Tier-2 work, not shipped yet.
Heads upManual popovers survive light dismiss; the X dismisses.
SavedYour changes are safe.
<div id="saved" popover="manual" class="toast success" role="status">
  <button class="close" popovertarget="saved"
          popovertargetaction="hide" aria-label="Dismiss">&#x2715;</button>
  <b>Saved</b>
  <span>Your changes are safe.</span>
</div>

document.getElementById(&#39;saved&#39;).showPopover()  // from your app code

Notes

popover="manual" keeps it up through light dismiss and other popovers; role="status" announces politely. Variants: .success / .danger / .warn status edges. Apps show toasts from code (showPopover()).

Module: toast.js (Tier 2)

Loaded on this page. Open toasts stack upward (JS ships one offset number per toast; CSS owns the geometry and reflow motion), auto-dismiss after duration ms (default 5000, duration="0" = sticky, paused while hovered), and toast() spawns the recipe markup from code and removes it after dismissal. Try both buttons above — the toasts stack.

import {{ toast }} from 'mica/toast.js'

toast('Saved', {{ description: 'Your changes are safe.',
                variant: 'success', duration: 4000 }})
← popover & tooltiptabs →