Toast

<cinq-toast> shows a brief on-screen notice without moving focus. It does not set ARIA roles. Choose role="alert" (urgent) or role="status" (polite) in markup. Auto-dismiss is opt-in via data-duration. Pausing that timer is consumer-owned (pause() / resume()).

Behavior follows the spirit of the WAI-ARIA Alert pattern.

Install

pnpm add @agencecinq/toast

Usage

import "@agencecinq/toast";

<cinq-toast role="alert" aria-atomic="true" data-duration="5000">
  <div data-content></div>
  <button type="button" data-dismiss aria-label="Close">×</button>
</cinq-toast>

const toast = document.querySelector("cinq-toast");

toast?.addEventListener("pointerenter", () => toast.pause());
toast?.addEventListener("pointerleave", () => toast.resume());
toast?.show("Something went wrong");

HTML is the source of truth. The component will not auto-set role, auto-migrate attributes, or warn about missing labels. Use an a11y linter (axe-core, Lighthouse) to catch invalid markup.

Playground

Includes a shared fixed viewport stack for every example, plus a character-sheet form that keeps focus on the invalid field.

Failed saving throw

Urgent feedback with role="alert" anddata-duration="4000". Wirespause() / resume() on pointer and focus. Appears in the shared bottom-right stack.

Last event:-

Spell memorized

Quiet confirmation with role="status". No auto-dismiss. Close it yourself or leave it until the next show(). Same shared stack.

Last event:-

Initiative tick

Auto-dismiss (data-duration="3000") withno consumer pause() wiring. Hover or Tab into the toast: the timer keeps running.

Last event:-

Save character sheet

Validation errors use role="alert" without moving focus. Empty fields stack one alert each. Success uses role="status". Same fixed stack; alerts wire consumer pause on pointer / focus.

Focus stays on:-

Last event:-

Required markup

Attribute / element	Required	Role
`<cinq-toast>`	Yes	Host. Set `role` yourself.
`[data-content]`	Yes	Message node.
`[data-dismiss]`	Optional	Close control.
`data-duration`	Optional	Auto-dismiss in ms.

API

Method	Description
`pause()`	Freeze auto-dismiss + `--toast-progress`.
`resume()`	Continue after `pause()`.

Events

Constant	Name
`EVENTS.TOAST_OPEN`	`toast:open`
`EVENTS.TOAST_CLOSE`	`toast:close`