Mercurial
comparison 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 |
comparison
equal
deleted
inserted
replaced
| 257:609d3c6aff4e | 258:60a876c4587a |
|---|---|
| 1 # Primitive map | |
| 2 | |
| 3 | Native authored element | Owning Zenbu primitive | | |
| 4 | --- | --- | | |
| 5 | `button`, button-like `a` | `zen-button` | | |
| 6 | text/email/file/etc. `input` | `zen-input` or `zen-field` | | |
| 7 | `textarea` | `zen-textarea` or `zen-field` | | |
| 8 | native `select` | `zen-native-select`, `zen-select`, or `zen-field` | | |
| 9 | checkbox input | `zen-checkbox` | | |
| 10 | radio inputs/fieldset | `zen-radio-group` | | |
| 11 | switch checkbox | `zen-switch` | | |
| 12 | range input | `zen-slider` | | |
| 13 | date value | `zen-calendar` or `zen-date-picker` | | |
| 14 | one-time-code input | `zen-input-otp` | | |
| 15 | filter input and options | `zen-combobox` | | |
| 16 | command input and items | `zen-command` | | |
| 17 | anchor with reusable effect | `zen-link` | | |
| 18 | heading with canonical type role | `zen-heading` | | |
| 19 | text with canonical type role | `zen-text` | | |
| 20 | padded container | `zen-box` | | |
| 21 | |
| 22 ## Control-owning composites | |
| 23 | |
| 24 These behavior primitives already own their native buttons. Do not add a second | |
| 25 `zen-button`: | |
| 26 | |
| 27 - menus, context menus, menubars, and navigation menus; | |
| 28 - tabs, toggles, toggle groups, and sidebars; | |
| 29 - calendars, carousels, commands, and data tables; | |
| 30 - notifications and dismissible alerts. | |
| 31 | |
| 32 ## Coordinating containers | |
| 33 | |
| 34 Dialogs, alert dialogs, sheets, drawers, popovers, tooltips, forms, empty | |
| 35 states, and items coordinate or arrange content. They do not own application | |
| 36 actions. Wrap authored action buttons in `zen-button`, then put the native | |
| 37 `button` inside it. | |
| 38 | |
| 39 ## Generated controls | |
| 40 | |
| 41 Component implementation code may create native buttons for accessibility. | |
| 42 Generated controls are owned by that component. Application-authored controls | |
| 43 are checked separately. |