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.