Element: #364 Stacked toasts (motion/transitions)
What it shows: Toasts that slide in from above, stack with a depth cascade (each older one lower, smaller and dimmer) and leave when dismissed.
When to use: In-app notifications that can arrive in bursts: payments, comments, exports, limit warnings.
Spec:
- `MotionStage` with `label="Stacked toasts: they enter, stack up and dismiss"` and `loop={1400}`
- At most `const MAX = 3` toasts; a new one goes first and the oldest is cut
- Depth comes from `--i`: `transform: translateY(calc(var(--i) * 0.9rem)) scale(calc(1 - var(--i) * 0.05))` and `opacity: calc(1 - var(--i) * 0.28)`
- Enter: `animation: ts-in 320ms cubic-bezier(0.2, 0, 0, 1)` from `translateY(-1.5rem) scale(0.96)`; restack: `transition: transform 320ms cubic-bezier(0.2, 0, 0, 1), opacity 320ms cubic-bezier(0.2, 0, 0, 1)`
- Only the front toast is announced and readable: older ones get `class:ts__toast--behind={i > 0}` (content `opacity: 0`), `aria-hidden` and `inert`, so the stack never overlaps text
- Dismiss: `out:leave` runs `duration: reduced ? 0 : 240` with `easing: cubicOut`, fading to `opacity:${t}` while `translate:${u * 2.5}rem 0` slides it aside
- Under reduced motion the stack is shown full with `animation: none`
Motion:
- opacity, transform: translateY and scale (enter): 320ms cubic-bezier(0.2, 0, 0, 1)
- opacity and translate (dismiss): 240 cubicOut
- transform and opacity (restack as the list changes): 320ms cubic-bezier(0.2, 0, 0, 1)
Names: Stacked toasts | Toast stack | Notification stack | Pilha de toasts | Pila de notificaciones
Tags: motion, toast, stack, notification, enter
Needs: @codeatlasdev/ui@4.6.0
Components: Button, MotionStage
Live demo: https://ui.codeatlas.com.br/docs/motion/transitions#stacked-toasts
{#snippet children(m)}
{ stage = m; }}>
{#each toasts as t, i (t.id)}
{@const Icon = icons[t.kind]}