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