Mercurial
diff design_system/README.md @ 252:7a7581f040e8
[ui] Add scoped notification component
Co-authored-by: Copilot <[email protected]>
| author | MrJuneJune <me@mrjunejune.com> |
|---|---|
| date | Tue, 04 Aug 2026 11:57:16 -0700 |
| parents | 117c4d53c9a4 |
| children | 2b6e732087ff |
line wrap: on
line diff
--- a/design_system/README.md Tue Aug 04 09:14:57 2026 -0700 +++ b/design_system/README.md Tue Aug 04 11:57:16 2026 -0700 @@ -60,12 +60,49 @@ | `zen-card` | direct `article` or `section` | `interactive` | native descendant events | | `zen-alert` | message HTML | `tone`, `dismissible` | `zen-dismiss` | | `zen-field` | direct `label`, form control, help text | native control attributes | native input/change/invalid | +| `zen-notifications` | descendant event producers | `aria-label`, `dismiss-label` | `zen-notification-action`, `zen-notification-removed` | | `zen-stack` | any HTML | `direction`, `gap` | native descendant events | Do not put business state into the design-system components. They provide presentation, small accessibility wiring, and interaction affordances while applications retain data and workflow ownership. +### Notifications + +See [`NOTIFICATIONS.md`](NOTIFICATIONS.md) for the complete event contract, +queue semantics, actions, timing, and accessibility behavior. + +Place one scope around the part of the application that owns notifications: + +```html +<zen-notifications aria-label="Notifications"> + <main id="application"></main> +</zen-notifications> +``` + +Any descendant can dispatch a non-composed bubbling event: + +```js +source.dispatchEvent(new CustomEvent("zen-notify", { + bubbles: true, + composed: false, + detail: { + version: 1, + id: "deployment-complete", + tone: "success", + message: "Deployment complete", + announcement: "polite", + durationMs: 5000, + }, +})); +``` + +Use `zen-dismiss-notification` with `{ version: 1, id }` to dismiss by ID. +Actions contain only an opaque token and label; clicking dispatches +`zen-notification-action`. Tokens are held in private component state and never +written to DOM attributes. The component renders three records and retains up +to 20 additional queued records. + ## Tests ```bash