Mercurial

comparison design_system/src/components/primitives.js @ 258:60a876c4587a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[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
comparison
equal deleted inserted replaced
257:609d3c6aff4e 258:60a876c4587a
4 "zen-attachment", 4 "zen-attachment",
5 "zen-avatar", 5 "zen-avatar",
6 "zen-badge", 6 "zen-badge",
7 "zen-breadcrumb", 7 "zen-breadcrumb",
8 "zen-bubble", 8 "zen-bubble",
9 "zen-box",
9 "zen-button-group", 10 "zen-button-group",
10 "zen-chart", 11 "zen-chart",
11 "zen-direction", 12 "zen-direction",
12 "zen-empty", 13 "zen-empty",
13 "zen-input", 14 "zen-input",
14 "zen-input-group", 15 "zen-input-group",
15 "zen-item", 16 "zen-item",
16 "zen-kbd", 17 "zen-kbd",
17 "zen-label", 18 "zen-label",
19 "zen-heading",
18 "zen-marker", 20 "zen-marker",
19 "zen-message", 21 "zen-message",
20 "zen-native-select", 22 "zen-native-select",
21 "zen-pagination", 23 "zen-pagination",
22 "zen-progress", 24 "zen-progress",
23 "zen-scroll-area", 25 "zen-scroll-area",
24 "zen-separator", 26 "zen-separator",
25 "zen-skeleton", 27 "zen-skeleton",
26 "zen-spinner", 28 "zen-spinner",
27 "zen-table", 29 "zen-table",
30 "zen-text",
28 "zen-textarea", 31 "zen-textarea",
29 "zen-typography", 32 "zen-typography",
30 ]; 33 ];
31 34
32 function parseRatio(value) { 35 function parseRatio(value) {
58 61
59 sync() { 62 sync() {
60 switch (this.localName) { 63 switch (this.localName) {
61 case "zen-aspect-ratio": 64 case "zen-aspect-ratio":
62 this.style.setProperty( 65 this.style.setProperty(
63 "--zen-aspect-ratio", 66 "--zenbu-aspect-ratio",
64 parseRatio(this.getAttribute("ratio")), 67 parseRatio(this.getAttribute("ratio")),
65 ); 68 );
66 break; 69 break;
67 case "zen-breadcrumb": { 70 case "zen-breadcrumb": {
68 const navigation = this.querySelector(":scope > nav"); 71 const navigation = this.querySelector(":scope > nav");
116 } 119 }
117 break; 120 break;
118 case "zen-skeleton": 121 case "zen-skeleton":
119 if (this.hasAttribute("width")) { 122 if (this.hasAttribute("width")) {
120 this.style.setProperty( 123 this.style.setProperty(
121 "--zen-skeleton-width", 124 "--zenbu-skeleton-width",
122 this.getAttribute("width"), 125 this.getAttribute("width"),
123 ); 126 );
124 } else { 127 } else {
125 this.style.removeProperty("--zen-skeleton-width"); 128 this.style.removeProperty("--zenbu-skeleton-width");
126 } 129 }
127 if (!this.hasAttribute("role")) this.setAttribute("aria-hidden", "true"); 130 if (!this.hasAttribute("role")) this.setAttribute("aria-hidden", "true");
128 break; 131 break;
129 case "zen-spinner": 132 case "zen-spinner":
130 if (!this.hasAttribute("role")) this.setAttribute("role", "status"); 133 if (!this.hasAttribute("role")) this.setAttribute("role", "status");