Mercurial

diff 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
line wrap: on
line diff
--- a/design_system/COMPONENTS.md	Tue Aug 04 16:49:11 2026 -0700
+++ b/design_system/COMPONENTS.md	Wed Aug 05 05:25:40 2026 -0700
@@ -1,12 +1,12 @@
 # Zenbu UI component contracts
 
-Zenbu UI covers the 65 concepts in the shadcn/ui component catalog without
-copying its React, Radix, or third-party runtime. Every Zenbu component uses
-light DOM and keeps the corresponding native HTML control visible.
+Zenbu UI provides first-party component concepts and composition patterns.
+Every component uses light DOM and keeps the corresponding native HTML control
+visible.
 
 ## Inventory
 
-| shadcn/ui concept | Zenbu UI element |
+| Component concept | Zenbu UI element |
 | --- | --- |
 | Accordion | `zen-accordion` |
 | Alert | `zen-alert` |
@@ -17,6 +17,7 @@
 | Badge | `zen-badge` |
 | Breadcrumb | `zen-breadcrumb` |
 | Bubble | `zen-bubble` |
+| Box | `zen-box` |
 | Button | `zen-button` |
 | Button Group | `zen-button-group` |
 | Calendar | `zen-calendar` |
@@ -38,12 +39,14 @@
 | Field | `zen-field` |
 | Form | `zen-form` |
 | Hover Card | `zen-hover-card` |
+| Heading | `zen-heading` |
 | Input | `zen-input` |
 | Input Group | `zen-input-group` |
 | Input OTP | `zen-input-otp` |
 | Item | `zen-item` |
 | Kbd | `zen-kbd` |
 | Label | `zen-label` |
+| Link | `zen-link` |
 | Marker | `zen-marker` |
 | Menubar | `zen-menubar` |
 | Message | `zen-message` |
@@ -62,12 +65,13 @@
 | Sidebar | `zen-sidebar` |
 | Skeleton | `zen-skeleton` |
 | Slider | `zen-slider` |
-| Sonner | `zen-notifications` |
+| Notifications | `zen-notifications` |
 | Spinner | `zen-spinner` |
 | Switch | `zen-switch` |
 | Table | `zen-table` |
 | Tabs | `zen-tabs` |
 | Textarea | `zen-textarea` |
+| Text | `zen-text` |
 | Toast (deprecated) | `zen-notifications` |
 | Toggle | `zen-toggle` |
 | Toggle Group | `zen-toggle-group` |
@@ -96,12 +100,14 @@
 
 | Elements | Required light-DOM hooks | Emitted event |
 | --- | --- | --- |
-| `zen-dialog`, `zen-alert-dialog`, `zen-sheet`, `zen-drawer` | `[data-zen-trigger]`, `dialog`, optional `[data-zen-close]` | native `close` |
-| `zen-popover`, `zen-hover-card`, `zen-tooltip` | `[data-zen-trigger]`, `[data-zen-content]` | native toggle/focus events |
+| `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` |
+| `zen-popover`, `zen-tooltip` | `zen-button > button[data-zen-trigger]`, `[data-zen-content]` | native toggle/focus events |
+| `zen-hover-card` | interactive `[data-zen-trigger]`, `[data-zen-content]` | native toggle/focus events |
 | Menu elements | `[data-zen-trigger]`, `[role="menu"]`, `[role="menuitem"]` | native click |
 | `zen-tabs` | `[role="tablist"]`, `[role="tab"]`, `[role="tabpanel"]` | `zen-change` with `{ value }` |
 | `zen-toggle` | direct `button` | `zen-change` with `{ pressed }` |
 | `zen-toggle-group` | direct buttons with `value` | `zen-change` with `{ values }` |
+| `zen-link` | direct native anchor; optional `effect="paw"` | native link events |
 | `zen-sidebar` | `[data-zen-sidebar-trigger]`, `[data-zen-sidebar-panel]` | `zen-change` with `{ open }` |
 | `zen-combobox` | `input`, `[role="listbox"]`, `[role="option"]` | native `input`/`change` and `zen-change` |
 | `zen-command` | `input`, `[role="menu"]`, `[role="menuitem"]` | `zen-command` with `{ value }` |