diff design_system/src/components/primitives.js @ 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 2b6e732087ff
children
line wrap: on
line diff
--- a/design_system/src/components/primitives.js	Tue Aug 04 16:49:11 2026 -0700
+++ b/design_system/src/components/primitives.js	Wed Aug 05 05:25:40 2026 -0700
@@ -6,6 +6,7 @@
   "zen-badge",
   "zen-breadcrumb",
   "zen-bubble",
+  "zen-box",
   "zen-button-group",
   "zen-chart",
   "zen-direction",
@@ -15,6 +16,7 @@
   "zen-item",
   "zen-kbd",
   "zen-label",
+  "zen-heading",
   "zen-marker",
   "zen-message",
   "zen-native-select",
@@ -25,6 +27,7 @@
   "zen-skeleton",
   "zen-spinner",
   "zen-table",
+  "zen-text",
   "zen-textarea",
   "zen-typography",
 ];
@@ -60,7 +63,7 @@
     switch (this.localName) {
       case "zen-aspect-ratio":
         this.style.setProperty(
-          "--zen-aspect-ratio",
+          "--zenbu-aspect-ratio",
           parseRatio(this.getAttribute("ratio")),
         );
         break;
@@ -118,11 +121,11 @@
       case "zen-skeleton":
         if (this.hasAttribute("width")) {
           this.style.setProperty(
-            "--zen-skeleton-width",
+            "--zenbu-skeleton-width",
             this.getAttribute("width"),
           );
         } else {
-          this.style.removeProperty("--zen-skeleton-width");
+          this.style.removeProperty("--zenbu-skeleton-width");
         }
         if (!this.hasAttribute("role")) this.setAttribute("aria-hidden", "true");
         break;