hp-toast

Transient notification. Slides in, auto-dismisses after duration ms (0 = sticky), exposes a close button. tone="alert" | "error" upgrades the aria-live region to assertive so urgent toasts announce immediately.

Examples

API

Intent

Changelog

build complete

deployed to production

3 deprecation warnings

migration drift detected

build failed: 2 type errors

<body> <hp-toast id="t" tone="positive">deployed</hp-toast> document.getElementById("t").show(); // auto-dismisses after 4 seconds (default)  <hp-toast tone="error" duration="0"> build failed — click to retry </hp-toast> </body>

Install

bun add @hexpunk/core lit

import "@hexpunk/core";

Properties

Property	Attribute	Type	Default	Description
`open`	`open`	`boolean`	`false`	Open state — drives the slide-in animation.
`tone`	`tone`	`HpToastTone`	`"neutral"`	Semantic tone. `alert` / `error` upgrade role to "alert" for assertive screen-reader announcement.
`duration`	`duration`	`number`	`4000`	Auto-dismiss after this many ms. 0 = sticky (manual close only). Default 4000.

Events

Event	Type	Description
`hp-toast-open`	`CustomEvent`	When the toast becomes visible
`hp-toast-close`	`CustomEvent`	When the toast closes (auto or via .close())

Slots

Slot	Description
`(default)`	Toast message body

CSS Parts

Part	Description
`toast`	The wrapping toast element
`content`	The content container

Accessibility

Default role="status" + aria-live="polite" for non-urgent notifications. tone="alert" / "error" upgrade to role="alert" + aria-live="assertive" so failures announce immediately. Close button has aria-label="Close".