Mercurial
diff design_system/README.md @ 254:2b6e732087ff
[ui] Add complete native component catalog
Co-authored-by: Copilot <[email protected]>
| author | MrJuneJune <me@mrjunejune.com> |
|---|---|
| date | Tue, 04 Aug 2026 15:12:09 -0700 |
| parents | 7a7581f040e8 |
| children | 30c2196d03d4 |
line wrap: on
line diff
--- a/design_system/README.md Tue Aug 04 12:21:19 2026 -0700 +++ b/design_system/README.md Tue Aug 04 15:12:09 2026 -0700 @@ -4,6 +4,11 @@ It stays close to ordinary HTML: components wrap native controls and sectioning elements instead of replacing their semantics. +The catalog includes native Zenbu implementations of all 65 concepts currently +listed by shadcn/ui. These are original Web Components using Zenbu tokens, not +ports of shadcn's React, Radix, or third-party runtime. See +[`COMPONENTS.md`](COMPONENTS.md) for the complete mapping and HTML contracts. + ## Catalog Run the Seobeo-backed component catalog: @@ -50,11 +55,22 @@ ``` Every visual token is a `--zen-*` custom property and can be overridden by the -application. +application. See [`COLORS.md`](COLORS.md) for the complete warm color ramps, +material aliases, semantic roles, dark-theme behavior, and data palette. + +Use [`zen-icon`](ICONS.md) for all interface iconography. Design-system source +does not use emoji, ad hoc SVG, icon fonts, or third-party icon packages. + +All exported JavaScript APIs use Google-style JSDoc. The policy target checks +the documentation contract along with token-only colors and first-party icons. + +The catalog navigation is searchable with `/`, and every route is exercised at +desktop and mobile widths. Form controls reset browser chrome; date selection +uses Zenbu's first-party keyboard calendar. ## Native HTML contract -| Component | Native content | Attributes | Events | +| Component family | Native content | Attributes | Events | | --- | --- | --- | --- | | `zen-button` | direct `button` or `a` | `variant`, `loading`, `disabled` | native click/form events | | `zen-card` | direct `article` or `section` | `interactive` | native descendant events | @@ -62,6 +78,10 @@ | `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 | +| Disclosure and tabs | `details`, `summary`, buttons, sections | `multiple`, `activation` | `zen-change` | +| Dialogs and menus | native `dialog`, buttons, links | `placement`, native attributes | native click/close | +| Form controls | native input, select, textarea, fieldset | native control attributes | native form events | +| Collections | table, article, section, scroll containers | component-specific data hooks | `zen-change`, `zen-sort`, `zen-resize` | Do not put business state into the design-system components. They provide presentation, small accessibility wiring, and interaction affordances while