Mercurial

comparison design_system/COMPONENTS.md @ 258:60a876c4587a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[ui] Add semantic primitive ownership Build a layered Zenbu token and sizing system, make authored controls use native-underneath primitives, migrate mrjunejune without imposing visual surfaces, and document/enforce HTML ownership in the catalog and wiki. Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Wed, 05 Aug 2026 05:25:40 -0700
parents 2b6e732087ff
children
comparison
equal deleted inserted replaced
257:609d3c6aff4e 258:60a876c4587a
1 # Zenbu UI component contracts 1 # Zenbu UI component contracts
2 2
3 Zenbu UI covers the 65 concepts in the shadcn/ui component catalog without 3 Zenbu UI provides first-party component concepts and composition patterns.
4 copying its React, Radix, or third-party runtime. Every Zenbu component uses 4 Every component uses light DOM and keeps the corresponding native HTML control
5 light DOM and keeps the corresponding native HTML control visible. 5 visible.
6 6
7 ## Inventory 7 ## Inventory
8 8
9 | shadcn/ui concept | Zenbu UI element | 9 | Component concept | Zenbu UI element |
10 | --- | --- | 10 | --- | --- |
11 | Accordion | `zen-accordion` | 11 | Accordion | `zen-accordion` |
12 | Alert | `zen-alert` | 12 | Alert | `zen-alert` |
13 | Alert Dialog | `zen-alert-dialog` | 13 | Alert Dialog | `zen-alert-dialog` |
14 | Aspect Ratio | `zen-aspect-ratio` | 14 | Aspect Ratio | `zen-aspect-ratio` |
15 | Attachment | `zen-attachment` | 15 | Attachment | `zen-attachment` |
16 | Avatar | `zen-avatar` | 16 | Avatar | `zen-avatar` |
17 | Badge | `zen-badge` | 17 | Badge | `zen-badge` |
18 | Breadcrumb | `zen-breadcrumb` | 18 | Breadcrumb | `zen-breadcrumb` |
19 | Bubble | `zen-bubble` | 19 | Bubble | `zen-bubble` |
20 | Box | `zen-box` |
20 | Button | `zen-button` | 21 | Button | `zen-button` |
21 | Button Group | `zen-button-group` | 22 | Button Group | `zen-button-group` |
22 | Calendar | `zen-calendar` | 23 | Calendar | `zen-calendar` |
23 | Card | `zen-card` | 24 | Card | `zen-card` |
24 | Carousel | `zen-carousel` | 25 | Carousel | `zen-carousel` |
36 | Dropdown Menu | `zen-dropdown-menu` | 37 | Dropdown Menu | `zen-dropdown-menu` |
37 | Empty | `zen-empty` | 38 | Empty | `zen-empty` |
38 | Field | `zen-field` | 39 | Field | `zen-field` |
39 | Form | `zen-form` | 40 | Form | `zen-form` |
40 | Hover Card | `zen-hover-card` | 41 | Hover Card | `zen-hover-card` |
42 | Heading | `zen-heading` |
41 | Input | `zen-input` | 43 | Input | `zen-input` |
42 | Input Group | `zen-input-group` | 44 | Input Group | `zen-input-group` |
43 | Input OTP | `zen-input-otp` | 45 | Input OTP | `zen-input-otp` |
44 | Item | `zen-item` | 46 | Item | `zen-item` |
45 | Kbd | `zen-kbd` | 47 | Kbd | `zen-kbd` |
46 | Label | `zen-label` | 48 | Label | `zen-label` |
49 | Link | `zen-link` |
47 | Marker | `zen-marker` | 50 | Marker | `zen-marker` |
48 | Menubar | `zen-menubar` | 51 | Menubar | `zen-menubar` |
49 | Message | `zen-message` | 52 | Message | `zen-message` |
50 | Message Scroller | `zen-message-scroller` | 53 | Message Scroller | `zen-message-scroller` |
51 | Native Select | `zen-native-select` | 54 | Native Select | `zen-native-select` |
60 | Separator | `zen-separator` | 63 | Separator | `zen-separator` |
61 | Sheet | `zen-sheet` | 64 | Sheet | `zen-sheet` |
62 | Sidebar | `zen-sidebar` | 65 | Sidebar | `zen-sidebar` |
63 | Skeleton | `zen-skeleton` | 66 | Skeleton | `zen-skeleton` |
64 | Slider | `zen-slider` | 67 | Slider | `zen-slider` |
65 | Sonner | `zen-notifications` | 68 | Notifications | `zen-notifications` |
66 | Spinner | `zen-spinner` | 69 | Spinner | `zen-spinner` |
67 | Switch | `zen-switch` | 70 | Switch | `zen-switch` |
68 | Table | `zen-table` | 71 | Table | `zen-table` |
69 | Tabs | `zen-tabs` | 72 | Tabs | `zen-tabs` |
70 | Textarea | `zen-textarea` | 73 | Textarea | `zen-textarea` |
74 | Text | `zen-text` |
71 | Toast (deprecated) | `zen-notifications` | 75 | Toast (deprecated) | `zen-notifications` |
72 | Toggle | `zen-toggle` | 76 | Toggle | `zen-toggle` |
73 | Toggle Group | `zen-toggle-group` | 77 | Toggle Group | `zen-toggle-group` |
74 | Tooltip | `zen-tooltip` | 78 | Tooltip | `zen-tooltip` |
75 | Typography | `zen-typography` | 79 | Typography | `zen-typography` |
94 98
95 ## Interactive hooks 99 ## Interactive hooks
96 100
97 | Elements | Required light-DOM hooks | Emitted event | 101 | Elements | Required light-DOM hooks | Emitted event |
98 | --- | --- | --- | 102 | --- | --- | --- |
99 | `zen-dialog`, `zen-alert-dialog`, `zen-sheet`, `zen-drawer` | `[data-zen-trigger]`, `dialog`, optional `[data-zen-close]` | native `close` | 103 | `zen-dialog`, `zen-alert-dialog`, `zen-sheet`, `zen-drawer` | `zen-button > button[data-zen-trigger]`, `dialog`, optional `zen-button > button[data-zen-close]` | native `close` |
100 | `zen-popover`, `zen-hover-card`, `zen-tooltip` | `[data-zen-trigger]`, `[data-zen-content]` | native toggle/focus events | 104 | `zen-popover`, `zen-tooltip` | `zen-button > button[data-zen-trigger]`, `[data-zen-content]` | native toggle/focus events |
105 | `zen-hover-card` | interactive `[data-zen-trigger]`, `[data-zen-content]` | native toggle/focus events |
101 | Menu elements | `[data-zen-trigger]`, `[role="menu"]`, `[role="menuitem"]` | native click | 106 | Menu elements | `[data-zen-trigger]`, `[role="menu"]`, `[role="menuitem"]` | native click |
102 | `zen-tabs` | `[role="tablist"]`, `[role="tab"]`, `[role="tabpanel"]` | `zen-change` with `{ value }` | 107 | `zen-tabs` | `[role="tablist"]`, `[role="tab"]`, `[role="tabpanel"]` | `zen-change` with `{ value }` |
103 | `zen-toggle` | direct `button` | `zen-change` with `{ pressed }` | 108 | `zen-toggle` | direct `button` | `zen-change` with `{ pressed }` |
104 | `zen-toggle-group` | direct buttons with `value` | `zen-change` with `{ values }` | 109 | `zen-toggle-group` | direct buttons with `value` | `zen-change` with `{ values }` |
110 | `zen-link` | direct native anchor; optional `effect="paw"` | native link events |
105 | `zen-sidebar` | `[data-zen-sidebar-trigger]`, `[data-zen-sidebar-panel]` | `zen-change` with `{ open }` | 111 | `zen-sidebar` | `[data-zen-sidebar-trigger]`, `[data-zen-sidebar-panel]` | `zen-change` with `{ open }` |
106 | `zen-combobox` | `input`, `[role="listbox"]`, `[role="option"]` | native `input`/`change` and `zen-change` | 112 | `zen-combobox` | `input`, `[role="listbox"]`, `[role="option"]` | native `input`/`change` and `zen-change` |
107 | `zen-command` | `input`, `[role="menu"]`, `[role="menuitem"]` | `zen-command` with `{ value }` | 113 | `zen-command` | `input`, `[role="menu"]`, `[role="menuitem"]` | `zen-command` with `{ value }` |
108 | `zen-input-otp` | one native input, optional `[data-zen-otp-slots]` | `zen-complete` with `{ value }` | 114 | `zen-input-otp` | one native input, optional `[data-zen-otp-slots]` | `zen-complete` with `{ value }` |
109 | `zen-calendar`, `zen-date-picker` | native date input plus generated month grid | native `input`/`change` and `zen-change` | 115 | `zen-calendar`, `zen-date-picker` | native date input plus generated month grid | native `input`/`change` and `zen-change` |