Toast
Spec
This spec is version 1.0.1. Built is 1.0.0; Changes lists what differs.
One toast for confirmations and undo, inverted against the page so it stands apart from the rows behind it. The New version bar sits in the same place and has the same look.
Rules
- Inverted in both themes: surface-selected with text-inverse (the same pair as the selected pill), no border, radius lg, shadow-float. Built 1.0.0 is surface-raised with a border.
- Always has a close button ("Dismiss").
- Fades out after 8 seconds; the timer pauses while it is hovered or focused.
- Announced politely (role="status"); focus never moves to it.
- Bottom of the screen, above the Add button on phones; one at a time, a new one replaces the old.
- Actions (Undo, and Reload on the New version bar) are small filled buttons on the bar: surface as the fill with text-primary, the page colors, so they stand out on the inverted bar. Radius md. In built 1.0.0 Undo is a text button in text-accent.
- Close stays an icon, in text-inverse.
Built 1.0.0
The app's own component, version 1.0.0, live. Fake data; nothing is saved.
Changes
- 1.0.1, Oct 11 2026: Inverted to match the new version bar and stand apart from the page. (#76)
- 1.0.0, Sep 29 2026: One toast for confirmations and undo, 8 seconds, pauses on hover and focus.