Mercurial
comparison .claude/skills/zenbu-design-system/SKILL.md @ 253:fdf3816959cb
[ui] Add Sonner-like notification stack
Co-authored-by: Copilot <[email protected]>
| author | MrJuneJune <me@mrjunejune.com> |
|---|---|
| date | Tue, 04 Aug 2026 12:21:19 -0700 |
| parents | 7a7581f040e8 |
| children | 2b6e732087ff |
comparison
equal
deleted
inserted
replaced
| 252:7a7581f040e8 | 253:fdf3816959cb |
|---|---|
| 22 - Keep application state outside components. | 22 - Keep application state outside components. |
| 23 - Keep notification action tokens opaque and out of DOM attributes; use scoped, | 23 - Keep notification action tokens opaque and out of DOM attributes; use scoped, |
| 24 non-composed `zen-notify` events and bounded queues. | 24 non-composed `zen-notify` events and bounded queues. |
| 25 - Keep `zen-notifications` behavior aligned with | 25 - Keep `zen-notifications` behavior aligned with |
| 26 `design_system/NOTIFICATIONS.md`. | 26 `design_system/NOTIFICATIONS.md`. |
| 27 - Notification presentation uses a measured collapsed depth stack that expands | |
| 28 on hover/focus; do not import Sonner or Radix. | |
| 27 - Preserve keyboard, form, validity, label, and ARIA behavior. | 29 - Preserve keyboard, form, validity, label, and ARIA behavior. |
| 28 - Prefix custom elements and tokens with `zen-` / `--zen-`. | 30 - Prefix custom elements and tokens with `zen-` / `--zen-`. |
| 29 - Keep selectors low-specificity so applications can override tokens. | 31 - Keep selectors low-specificity so applications can override tokens. |
| 30 - Support light, dark, reduced-motion, desktop, and mobile behavior. | 32 - Support light, dark, reduced-motion, desktop, and mobile behavior. |
| 31 | 33 |