Toast

Fixed .toast with a hairline shadow. Show by clearing hidden; hide after 3 seconds with setTimeout. One element, not a queue. There is no wrapper.

Preview

Code

<button class="button" type="button" onclick={() => { toast.hidden = false; clearTimeout(toast._hide); toast._hide = setTimeout(() => toast.hidden = true, 3000); }}>Show toast</button>
<div class="toast" bind:this={toast} hidden role="status">Saved</div>