Packages
mishka_chelekom
0.0.9
0.0.10-alpha.5
0.0.10-alpha.4
0.0.10-alpha.3
0.0.10-alpha.2
0.0.10-alpha.1
0.0.9
0.0.9-rc.2
0.0.9-rc.1
0.0.9-beta.5
0.0.9-beta.4
0.0.9-beta.3
0.0.9-beta.2
0.0.9-beta.1
0.0.9-alpha.20
0.0.9-alpha.18
0.0.9-alpha.17
0.0.9-alpha.16
0.0.9-alpha.15
0.0.9-alpha.14
0.0.9-alpha.13
0.0.9-alpha.12
0.0.9-alpha.11
0.0.9-alpha.10
0.0.9-alpha.9
0.0.9-alpha.8
0.0.9-alpha.7
0.0.9-alpha.6
0.0.9-alpha.5
0.0.9-alpha.4
0.0.9-alpha.3
0.0.9-alpha.2
0.0.9-alpha.1
0.0.8
0.0.8-rc.2
0.0.8-rc.1
0.0.8-beta.5
0.0.8-beta.4
0.0.8-beta.3
0.0.8-beta.2
0.0.8-beta.1
0.0.8-alpha.4
0.0.8-alpha.3
0.0.8-alpha.2
0.0.8-alpha.1
0.0.7
0.0.6
0.0.6-alpha.2
0.0.6-alpha.1
0.0.5
0.0.5-beta.2
0.0.5-beta.1
0.0.5-alpha.12
0.0.5-alpha.11
0.0.5-alpha.10
0.0.5-alpha.9
0.0.5-alpha.8
0.0.5-alpha.7
0.0.5-alpha.6
0.0.5-alpha.5
0.0.5-alpha.4
0.0.5-alpha.3
0.0.5-alpha.2
0.0.5-alpha.1
0.0.4
0.0.4-beta.3
0.0.4-beta.2
0.0.4-beta.1
0.0.4-alpha.9
0.0.4-alpha.8
0.0.4-alpha.7
0.0.4-alpha.6
0.0.4-alpha.5
0.0.4-alpha.4
0.0.4-alpha.3
0.0.4-alpha.2
0.0.4-alpha.1
0.0.3
0.0.3-alpha.3
0.0.3-alpha.2
0.0.3-alpha.1
0.0.2
0.0.2-rc.2
0.0.2-rc.1
0.0.2-beta.4
0.0.2-beta.3
0.0.2-beta.2
0.0.2-beta.1
0.0.2-alpha.3
0.0.2-alpha.2
0.0.2-alpha.1
0.0.1
Mishka Chelekom is a fully featured components and UI kit library for Phoenix & Phoenix LiveView
Current section
Files
Jump to
Current section
Files
usage-rules/headless/toast.md
# toast (headless)
An unstyled, accessible `aria-live` region that announces transient messages: markup + WAI-ARIA wiring + auto-dismiss, with behavior delegated to the shared `ToastRegion` JS engine. Implements the [WAI-ARIA APG Alert pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alert/).
## Generate
```bash
mix mishka.ui.gen.headless toast
```
Generates `lib/<app>_web/components/headless/toast.ex`. Wire up the JS engine in `app.js`:
```js
import ToastRegion from "./toast_region.js";
const Hooks = { ToastRegion };
```
## Anatomy
Root `<div>` carries `phx-hook="ToastRegion"` and `class="chelekom-toast"`. Each toast comes from a `<:toast>` slot entry; parts are marked with `data-part` hooks the engine queries:
| Part | Element | `data-part` | Class | Source |
|------|---------|-------------|-------|--------|
| root | `div` | — | `chelekom-toast` | always rendered (live region) |
| toast | `div` | `toast` | `chelekom-toast__toast` | one per `<:toast>` slot entry |
| dismiss | `button` | `dismiss` | `chelekom-toast__dismiss` | always rendered inside each toast |
`ToastRegion` queries `[data-part="toast"]` within the root and binds each `[data-part="dismiss"]` inside it.
## ARIA & keyboard
- **root** — `aria-live="polite"`, `aria-atomic="false"` (new toasts announced without re-reading the whole region).
- **toast** — `role="status"` (engine also sets it as a fallback if missing).
- **dismiss** — `aria-label="Dismiss"`.
- **Keyboard** — none required; the live region announces automatically. Dismiss is a native `<button>` (focusable, Enter/Space activates).
## State
Paired-presence (Base-UI style) attrs on each `[data-part="toast"]`, toggled by `ToastRegion`:
- `data-open` — present while showing (rendered initially by the template).
- `data-closed` — present after dismissal.
On dismissal (manual click, or auto after `data-duration` ms — default `5000`; `0` disables), the engine removes `data-open`, sets `data-closed`, then removes the node ~200ms later so CSS can animate the exit. Toasts streamed in by LiveView are re-scanned in `updated()`.
## Example
```heex
<.toast id="notifications">
<:toast>
Profile saved.
</:toast>
<:toast duration={0}>
Upload failed — this toast won't auto-dismiss.
</:toast>
</.toast>
```
Attrs: `id` (required, anchors the live region), `class`, `rest` (global). Slot `toast` (repeatable), each accepting an optional `duration` integer (auto-dismiss delay in ms; default `5000`, `0` disables). Each toast renders its slot content followed by a `×` dismiss button. To drive toasts from the server, render `<:toast>` entries conditionally (e.g. from a stream or assign) and let `ToastRegion` pick them up.
## Styling
Ships **no** colors or spacing — structural markup only. Style via the `chelekom-toast*` classes (`chelekom-toast`, `__toast`, `__dismiss`) and the `data-open` / `data-closed` state attrs:
```css
.chelekom-toast__toast[data-open] { /* enter / visible styles */ }
.chelekom-toast__toast[data-closed] { opacity: 0; /* exit animation */ }
```
Add your own classes to the root via the `class` attr.