Mercurial
diff design_system/wiki/PRIMITIVE_MAP.md @ 258:60a876c4587a
[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 | |
| children |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/design_system/wiki/PRIMITIVE_MAP.md Wed Aug 05 05:25:40 2026 -0700 @@ -0,0 +1,43 @@ +# Primitive map + +| Native authored element | Owning Zenbu primitive | +| --- | --- | +| `button`, button-like `a` | `zen-button` | +| text/email/file/etc. `input` | `zen-input` or `zen-field` | +| `textarea` | `zen-textarea` or `zen-field` | +| native `select` | `zen-native-select`, `zen-select`, or `zen-field` | +| checkbox input | `zen-checkbox` | +| radio inputs/fieldset | `zen-radio-group` | +| switch checkbox | `zen-switch` | +| range input | `zen-slider` | +| date value | `zen-calendar` or `zen-date-picker` | +| one-time-code input | `zen-input-otp` | +| filter input and options | `zen-combobox` | +| command input and items | `zen-command` | +| anchor with reusable effect | `zen-link` | +| heading with canonical type role | `zen-heading` | +| text with canonical type role | `zen-text` | +| padded container | `zen-box` | + +## Control-owning composites + +These behavior primitives already own their native buttons. Do not add a second +`zen-button`: + +- menus, context menus, menubars, and navigation menus; +- tabs, toggles, toggle groups, and sidebars; +- calendars, carousels, commands, and data tables; +- notifications and dismissible alerts. + +## Coordinating containers + +Dialogs, alert dialogs, sheets, drawers, popovers, tooltips, forms, empty +states, and items coordinate or arrange content. They do not own application +actions. Wrap authored action buttons in `zen-button`, then put the native +`button` inside it. + +## Generated controls + +Component implementation code may create native buttons for accessibility. +Generated controls are owned by that component. Application-authored controls +are checked separately.