[btopro]

A proposal to replace the HAXcms toast with a card in the HAX UI admin style. It's the same API, so every existing call keeps working, with a new look and a few long-standing fixes. Part of the HAX UI admin work in haxtheweb/issues#3180.

What changes

• Look.

  • The toast is one card on HAX UI tokens: surface, line, radius and popover shadow, in light, dark and forced colours.
  • The person's RPG character sits in a tile tinted by tone, with a small tone badge (a check, an exclamation mark, or a spinner while working).
  • The message is 14px and wraps. A close button sits on the right.
  • Anything a caller slots in is styled as a HAX UI button.
  • A thin bar shows the time left, or moves continuously while work is in progress.
  • At 600px and narrower the toast becomes a sheet along the bottom.

• Tone (new, optional: info, success, warning, danger, working, assistant). When a caller doesn't set it, it's worked out from what callers already send:

  Tone	Comes from
  danger	hat: "error"
  working	hat: "construction" or walking
  assistant	merlin: true
  success	hat: "save" or "good"
  info	everything else

• Fixes:

  • The timer pauses while the toast is hovered or focused (WCAG 2.2.1).
  • duration: 0 now stays until closed. Today it silently becomes 4s, so the view-only notice closes before its Exit button can be used.
  • Problems are announced as alerts (role="alert", assertive), with the tone spoken in words.
  • Esc closes it while focus is inside, and it never takes focus itself.
  • eventCallback fires once on close; today it fires twice.

API kept

• store.toast() and HAXStore.toast() keep their signatures (about 220 calls).
• The haxcms-toast-show and haxcms-toast-hide events are unchanged.
• Every detail field still works: text, duration, hat, fire, walking, speed, slot, closeText, eventCallback, alwaysvisible, merlin, future and awaitingMerlinInput. The character still wears the hat, catches fire and walks.
• classStyle, accentColor and dark are accepted and ignored.
• The hax:loading spinner that "Processing" slots in is hidden, because the working tone already shows progress.

What it touches

• elements/haxcms-elements/lib/core/haxcms-toast.js
• elements/haxcms-elements/test/haxcms-toast.test.js

rpg-character-toast, simple-toast and app-hax's toast are untouched.

Tested

• 20 toast tests, covering the tone mapping, a sticky duration: 0, pause and resume, Esc, eventCallback firing once, slotted actions, the working spinner, Merlin, alert vs status, and axe.
• The haxcms-elements suite passes (663 tests), and so does precheck.
• I checked it in the real editor, built on haxcms-nodejs main, with before and after screenshots of each variant in light and dark, on desktop and phone.

Follow-ups

• Switch the badge icons to hax:admin-check, hax:admin-warning and hax:admin-refresh once the admin icon family (webcomponents#1031) lands.
• Give high-traffic calls an explicit tone: saves as success, recoverable problems as warning.

https://claude.ai/code/session_01PfFvVUkTpLX8DucJwVoaVk

---

Generated by Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
webcomponents	Ready	Preview	Oct 30, 2026 5:16am UTC