Mercurial

comparison design_system/src/catalog.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
1 /** @const {!ReadonlyArray<!Object>} shadcn concepts shown by the catalog. */ 1 import "./components/index.js";
2 export const componentCatalog = [ 2 import { componentCatalog } from "./component_catalog.js";
3 { 3 import { ICON_NAMES } from "./components/icon.js";
4 name: "Accordion", 4
5 slug: "accordion", 5 const stackComponent = {
6 element: "zen-accordion", 6 name: "Stack",
7 group: "Disclosure", 7 slug: "stack",
8 description: "A group of native details elements with optional single-open behavior.", 8 element: "zen-stack",
9 markup: `<zen-accordion> 9 group: "Layout",
10 <details open><summary>Is it accessible?</summary><p>It keeps native details and summary semantics.</p></details> 10 description: "A Zenbu-specific flex layout primitive with tokenized gaps.",
11 <details><summary>Can several open?</summary><p>Add the multiple attribute to allow it.</p></details> 11 existing: true,
12 </zen-accordion>`, 12 };
13 }, 13 const displayedComponents = [...componentCatalog, stackComponent];
14 { 14
15 name: "Alert", 15 const pages = new Map([
16 slug: "alert", 16 ["/", "overview"],
17 element: "zen-alert", 17 ["/components", "overview"],
18 group: "Feedback", 18 ["/tokens", "tokens"],
19 description: "Status messaging with semantic tones and optional dismissal.", 19 ["/icons", "icons"],
20 existing: true, 20 ["/components/button", "button"],
21 }, 21 ["/components/card", "card"],
22 { 22 ["/components/alert", "alert"],
23 name: "Alert Dialog", 23 ["/components/field", "field"],
24 slug: "alert-dialog", 24 ["/components/notifications", "notifications"],
25 element: "zen-alert-dialog", 25 ["/components/stack", "stack"],
26 group: "Overlays", 26 ]);
27 description: "A native modal dialog for decisions that require confirmation.", 27
28 markup: `<zen-alert-dialog> 28 for (const component of componentCatalog) {
29 <button type="button" data-zen-trigger>Delete deployment</button> 29 pages.set(`/components/${component.slug}`, component.slug);
30 <dialog> 30 }
31 <h3>Delete deployment?</h3> 31
32 <p>This action cannot be undone.</p> 32 function createCatalogLink(component) {
33 <button type="button" data-zen-close>Cancel</button> 33 const link = document.createElement("a");
34 <button type="button" value="confirm" data-zen-close>Delete</button> 34 link.href = `/components/${component.slug}`;
35 </dialog> 35 link.dataset.catalogLink = "";
36 </zen-alert-dialog>`, 36 link.dataset.zenElement = component.element;
37 }, 37 link.textContent = component.name;
38 { 38 return link;
39 name: "Aspect Ratio", 39 }
40 slug: "aspect-ratio", 40
41 element: "zen-aspect-ratio", 41 function createComponentCard(component) {
42 group: "Layout", 42 const link = createCatalogLink(component);
43 description: "A media frame driven by a readable ratio attribute.", 43 const card = document.createElement("zen-card");
44 markup: `<zen-aspect-ratio ratio="16/9"> 44 card.setAttribute("interactive", "");
45 <div class="demo-media">16 / 9</div> 45 const article = document.createElement("article");
46 </zen-aspect-ratio>`, 46 const heading = document.createElement("h3");
47 }, 47 heading.textContent = component.name;
48 { 48 const description = document.createElement("p");
49 name: "Attachment", 49 description.textContent = component.description;
50 slug: "attachment", 50 const element = document.createElement("code");
51 element: "zen-attachment", 51 element.textContent = component.element;
52 group: "Chat", 52 article.append(heading, description, element);
53 description: "File and upload state presentation using ordinary links and buttons.", 53 card.append(article);
54 markup: `<zen-attachment state="complete"> 54 link.replaceChildren(card);
55 <span aria-hidden="true">PDF</span> 55 return link;
56 <div><strong>release-notes.pdf</strong><small>248 KB · Ready</small></div> 56 }
57 <button type="button" aria-label="Remove attachment"><zen-icon name="close"></zen-icon></button> 57
58 </zen-attachment>`, 58 function createCatalogPage(component) {
59 }, 59 const section = document.createElement("section");
60 { 60 section.className = "catalog-page";
61 name: "Avatar", 61 section.dataset.catalogPage = component.slug;
62 slug: "avatar", 62 section.hidden = true;
63 element: "zen-avatar", 63
64 group: "Display", 64 const header = document.createElement("header");
65 description: "A compact identity image with a visible text fallback.", 65 header.className = "page-heading";
66 markup: `<zen-avatar aria-label="June Park"><span>JP</span></zen-avatar>`, 66 const eyebrow = document.createElement("p");
67 }, 67 eyebrow.className = "eyebrow";
68 { 68 eyebrow.textContent = component.group;
69 name: "Badge", 69 const heading = document.createElement("h1");
70 slug: "badge", 70 heading.textContent = component.name;
71 element: "zen-badge", 71 const description = document.createElement("p");
72 group: "Display", 72 description.textContent = component.description;
73 description: "A small label for metadata, state, or counts.", 73 header.append(eyebrow, heading, description);
74 markup: `<zen-stack direction="row"> 74
75 <zen-badge>Default</zen-badge> 75 const story = document.createElement("zen-story");
76 <zen-badge tone="success">Healthy</zen-badge> 76 story.setAttribute("name", `${component.name} example`);
77 <zen-badge tone="danger">Failed</zen-badge> 77 const template = document.createElement("template");
78 </zen-stack>`, 78 template.innerHTML = component.markup;
79 }, 79 story.append(template);
80 { 80 section.append(header, story);
81 name: "Breadcrumb", 81 return section;
82 slug: "breadcrumb", 82 }
83 element: "zen-breadcrumb", 83
84 group: "Navigation", 84 function installComponentCatalog() {
85 description: "A native navigation landmark for hierarchical location.", 85 const navigation = document.querySelector(
86 markup: `<zen-breadcrumb> 86 '.catalog-nav[aria-label="Components"]',
87 <nav><ol> 87 );
88 <li><a href="/">Home</a></li> 88 const componentGrid = document.querySelector(".component-grid");
89 <li><a href="/components">Components</a></li> 89 const main = document.querySelector("#catalogMain");
90 <li aria-current="page">Breadcrumb</li> 90 if (!navigation || !componentGrid || !main) return;
91 </ol></nav> 91
92 </zen-breadcrumb>`, 92 navigation.replaceChildren(
93 }, 93 ...displayedComponents.map(createCatalogLink),
94 { 94 );
95 name: "Bubble", 95 componentGrid.replaceChildren(
96 slug: "bubble", 96 ...displayedComponents.map(createComponentCard),
97 element: "zen-bubble", 97 );
98 group: "Chat", 98
99 description: "A message bubble with incoming and outgoing alignment.", 99 for (const component of componentCatalog) {
100 markup: `<zen-stack> 100 if (component.existing) continue;
101 <zen-bubble><p>The deployment is ready.</p></zen-bubble> 101 main.append(createCatalogPage(component));
102 <zen-bubble align="end"><p>Ship it.</p></zen-bubble> 102 }
103 </zen-stack>`, 103 }
104 }, 104
105 { 105 function installIconCatalog() {
106 name: "Button", 106 const grid = document.querySelector("#iconGrid");
107 slug: "button", 107 if (!grid) return;
108 element: "zen-button", 108 const items = ICON_NAMES.map(name => {
109 group: "Actions", 109 const figure = document.createElement("figure");
110 description: "Native buttons and links with shared variants and states.", 110 const icon = document.createElement("zen-icon");
111 existing: true, 111 icon.setAttribute("name", name);
112 }, 112 icon.setAttribute("size", "2rem");
113 { 113 const caption = document.createElement("figcaption");
114 name: "Button Group", 114 const code = document.createElement("code");
115 slug: "button-group", 115 code.textContent = name;
116 element: "zen-button-group", 116 caption.append(code);
117 group: "Actions", 117 figure.append(icon, caption);
118 description: "Related native buttons joined into one visual control.", 118 return figure;
119 markup: `<zen-button-group aria-label="Text alignment"> 119 });
120 <button type="button">Left</button> 120 grid.replaceChildren(...items);
121 <button type="button">Center</button> 121 }
122 <button type="button">Right</button> 122
123 </zen-button-group>`, 123 function installComponentSearch() {
124 }, 124 const input = document.querySelector("#componentSearch");
125 { 125 const status = document.querySelector("#componentSearchStatus");
126 name: "Calendar", 126 if (!input || !status) return;
127 slug: "calendar", 127 const links = [
128 element: "zen-calendar", 128 ...document.querySelectorAll(
129 group: "Forms", 129 '.catalog-nav[aria-label="Components"] a',
130 description: "A first-party date month grid backed by a native form value.", 130 ),
131 markup: `<zen-calendar> 131 ];
132 <label for="calendar-demo">Release date</label> 132 const cards = [...document.querySelectorAll(".component-grid > a")];
133 <input id="calendar-demo" type="date" value="2026-08-04" /> 133 const descriptions = new Map(
134 </zen-calendar>`, 134 displayedComponents.map(component => [
135 }, 135 component.slug,
136 { 136 [
137 name: "Card", 137 component.name,
138 slug: "card", 138 component.element,
139 element: "zen-card", 139 component.group,
140 group: "Display", 140 component.description,
141 description: "A visual container around native article or section content.", 141 ].join(" ").toLocaleLowerCase(),
142 existing: true, 142 ]),
143 }, 143 );
144 { 144 const filter = () => {
145 name: "Carousel", 145 const query = input.value.trim().toLocaleLowerCase();
146 slug: "carousel", 146 let matches = 0;
147 element: "zen-carousel", 147 for (const link of links) {
148 group: "Collections", 148 const slug = new URL(link.href).pathname.split("/").pop();
149 description: "A scroll-snap collection with native buttons and keyboard controls.", 149 const visible = !query || descriptions.get(slug)?.includes(query);
150 markup: `<zen-carousel aria-label="Recent projects"> 150 link.hidden = !visible;
151 <div data-zen-viewport> 151 if (visible) matches++;
152 <article>Mercurial forge</article> 152 }
153 <article>HLS player</article> 153 for (const card of cards) {
154 <article>LaTeX editor</article> 154 const slug = new URL(card.href).pathname.split("/").pop();
155 </div> 155 card.hidden = Boolean(query) &&
156 <button type="button" data-zen-prev aria-label="Previous slide"><zen-icon name="arrow-left"></zen-icon></button> 156 !descriptions.get(slug)?.includes(query);
157 <button type="button" data-zen-next aria-label="Next slide"><zen-icon name="arrow-right"></zen-icon></button> 157 }
158 </zen-carousel>`, 158 status.textContent = query
159 }, 159 ? `${matches} component${matches === 1 ? "" : "s"} found`
160 { 160 : `${links.length} components`;
161 name: "Chart", 161 };
162 slug: "chart", 162
163 element: "zen-chart", 163 input.addEventListener("input", filter);
164 group: "Data", 164 input.addEventListener("keydown", event => {
165 description: "A dependency-free chart frame for semantic labels and custom marks.", 165 if (event.key !== "Escape" || !input.value) return;
166 markup: `<zen-chart aria-label="Build minutes by day"> 166 input.value = "";
167 <div data-zen-chart-plot> 167 filter();
168 <span style="--zen-chart-value: 42%" data-label="Mon"></span> 168 });
169 <span style="--zen-chart-value: 76%" data-label="Tue"></span> 169 document.addEventListener("keydown", event => {
170 <span style="--zen-chart-value: 58%" data-label="Wed"></span> 170 const target = event.target;
171 <span style="--zen-chart-value: 88%" data-label="Thu"></span> 171 const typing = target instanceof HTMLElement &&
172 </div> 172 target.matches("input, textarea, select, [contenteditable]");
173 </zen-chart>`, 173 if (event.key !== "/" || typing || event.metaKey || event.ctrlKey ||
174 }, 174 event.altKey) return;
175 { 175 event.preventDefault();
176 name: "Checkbox", 176 input.focus();
177 slug: "checkbox", 177 input.select();
178 element: "zen-checkbox", 178 });
179 group: "Forms", 179 filter();
180 description: "A styled native checkbox that remains form-associated.", 180 }
181 markup: `<zen-checkbox> 181
182 <label><input type="checkbox" checked /> Include deployment artifacts</label> 182 function showPage(pathname) {
183 </zen-checkbox>`, 183 const pageName = pages.get(pathname) || "overview";
184 }, 184 for (const page of document.querySelectorAll("[data-catalog-page]")) {
185 { 185 page.hidden = page.dataset.catalogPage !== pageName;
186 name: "Collapsible", 186 }
187 slug: "collapsible", 187 for (const link of document.querySelectorAll(
188 element: "zen-collapsible", 188 ".catalog-sidebar [data-catalog-link]",
189 group: "Disclosure", 189 )) {
190 description: "A single native details disclosure.", 190 const active = new URL(link.href).pathname === pathname;
191 markup: `<zen-collapsible> 191 if (active) link.setAttribute("aria-current", "page");
192 <details><summary>Three changed files</summary><p>server.c, styles.css, README.md</p></details> 192 else link.removeAttribute("aria-current");
193 </zen-collapsible>`, 193 }
194 }, 194 const heading = document.querySelector(
195 { 195 `[data-catalog-page="${pageName}"] h1`,
196 name: "Combobox", 196 );
197 slug: "combobox", 197 if (heading) document.title = `${heading.textContent} · Zenbu UI`;
198 element: "zen-combobox", 198 }
199 group: "Forms", 199
200 description: "A filterable text input backed by an accessible option list.", 200 window.addEventListener("DOMContentLoaded", () => {
201 markup: `<zen-combobox> 201 installComponentCatalog();
202 <label for="repo-combobox">Repository</label> 202 installIconCatalog();
203 <input id="repo-combobox" autocomplete="off" placeholder="Find repository" /> 203 installComponentSearch();
204 <div role="listbox"> 204 const root = document.documentElement;
205 <button type="button" role="option" data-value="zenbu">zenbu</button> 205 const systemTheme = matchMedia("(prefers-color-scheme: dark)");
206 <button type="button" role="option" data-value="hg-web">hg-web</button> 206 const storedTheme = localStorage.getItem("zen-theme");
207 <button type="button" role="option" data-value="seobeo">seobeo</button> 207 if (storedTheme) root.dataset.zenTheme = storedTheme;
208 </div> 208
209 </zen-combobox>`, 209 const themeToggle = document.querySelector("#themeToggle");
210 }, 210 const isDark = () => {
211 { 211 if (root.dataset.zenTheme) {
212 name: "Command", 212 return root.dataset.zenTheme === "dark";
213 slug: "command", 213 }
214 element: "zen-command", 214 return systemTheme.matches;
215 group: "Navigation", 215 };
216 description: "A keyboard-first filterable command list.", 216 const updateThemeButton = () => {
217 markup: `<zen-command> 217 const dark = isDark();
218 <input type="search" aria-label="Commands" placeholder="Type a command" /> 218 themeToggle?.setAttribute("aria-pressed", String(dark));
219 <div role="menu"> 219 if (themeToggle) {
220 <button type="button" role="menuitem" data-value="new">New repository</button> 220 themeToggle.textContent = dark
221 <button type="button" role="menuitem" data-value="deploy">Deploy release</button> 221 ? "Use light theme"
222 <button type="button" role="menuitem" data-value="theme">Toggle theme</button> 222 : "Use dark theme";
223 </div> 223 }
224 </zen-command>`, 224 };
225 }, 225 updateThemeButton();
226 { 226 themeToggle?.addEventListener("click", () => {
227 name: "Context Menu", 227 const next = isDark() ? "light" : "dark";
228 slug: "context-menu", 228 root.dataset.zenTheme = next;
229 element: "zen-context-menu", 229 localStorage.setItem("zen-theme", next);
230 group: "Menus", 230 updateThemeButton();
231 description: "A right-click menu with keyboard navigation and native buttons.", 231 });
232 markup: `<zen-context-menu> 232 systemTheme.addEventListener("change", () => {
233 <div data-zen-trigger tabindex="0">Right-click this repository</div> 233 if (!root.dataset.zenTheme) updateThemeButton();
234 <div role="menu" hidden> 234 });
235 <button type="button" role="menuitem">Open</button> 235
236 <button type="button" role="menuitem">Clone</button> 236 document.addEventListener("click", event => {
237 <button type="button" role="menuitem">Archive</button> 237 const notificationDemo = event.target.closest(
238 </div> 238 "[data-notification-demo]",
239 </zen-context-menu>`, 239 );
240 }, 240 if (notificationDemo) {
241 { 241 const scope = notificationDemo.closest("zen-notifications");
242 name: "Data Table", 242 if (!scope) return;
243 slug: "data-table", 243 const tone = notificationDemo.dataset.tone || "info";
244 element: "zen-data-table", 244 const baseId = notificationDemo.dataset.notificationId || tone;
245 group: "Data", 245 const count = notificationDemo.dataset.burst === "true" ? 5 : 1;
246 description: "A native table enhanced with optional client-side sorting.", 246 for (let index = 0; index < count; index++) {
247 markup: `<zen-data-table> 247 notificationDemo.dispatchEvent(new CustomEvent("zen-notify", {
248 <table> 248 bubbles: true,
249 <thead><tr> 249 composed: false,
250 <th><button type="button" data-zen-sort="name">Repository</button></th> 250 detail: {
251 <th><button type="button" data-zen-sort="commits">Commits</button></th> 251 version: 1,
252 </tr></thead> 252 id: count > 1 ? `${baseId}-${Date.now()}-${index}` : baseId,
253 <tbody> 253 tone,
254 <tr><td data-key="name">seobeo</td><td data-key="commits">87</td></tr> 254 message: notificationDemo.dataset.message || "Notification",
255 <tr><td data-key="name">hg-web</td><td data-key="commits">142</td></tr> 255 description: notificationDemo.dataset.description,
256 <tr><td data-key="name">design-system</td><td data-key="commits">12</td></tr> 256 announcement: tone === "error" ? "assertive" : "polite",
257 </tbody> 257 durationMs: 5000,
258 </table> 258 persistent: notificationDemo.dataset.persistent === "true",
259 </zen-data-table>`, 259 action: notificationDemo.dataset.action === "true"
260 }, 260 ? { token: `catalog-action-${Date.now()}`, label: "Retry" }
261 { 261 : undefined,
262 name: "Date Picker", 262 },
263 slug: "date-picker", 263 }));
264 element: "zen-date-picker", 264 }
265 group: "Forms", 265 return;
266 description: "A tokenized date trigger and first-party keyboard calendar.", 266 }
267 markup: `<zen-date-picker> 267
268 <label for="date-picker-demo">Deploy on</label> 268 const dismissDemo = event.target.closest(
269 <input id="date-picker-demo" type="date" /> 269 "[data-notification-dismiss-demo]",
270 </zen-date-picker>`, 270 );
271 }, 271 if (dismissDemo) {
272 { 272 dismissDemo.dispatchEvent(new CustomEvent(
273 name: "Dialog", 273 "zen-dismiss-notification",
274 slug: "dialog", 274 {
275 element: "zen-dialog", 275 bubbles: true,
276 group: "Overlays", 276 composed: false,
277 description: "A native modal dialog with trigger and close wiring.", 277 detail: {
278 markup: `<zen-dialog> 278 version: 1,
279 <button type="button" data-zen-trigger>Edit profile</button> 279 id: dismissDemo.dataset.notificationDismissDemo,
280 <dialog> 280 },
281 <h3>Edit profile</h3> 281 },
282 <label>Display name <input value="June" /></label> 282 ));
283 <button type="button" data-zen-close>Done</button> 283 return;
284 </dialog> 284 }
285 </zen-dialog>`, 285
286 }, 286 const link = event.target.closest("a[data-catalog-link]");
287 { 287 if (!link ||
288 name: "Direction", 288 link.origin !== location.origin ||
289 slug: "direction", 289 event.defaultPrevented ||
290 element: "zen-direction", 290 event.button !== 0 ||
291 group: "Utilities", 291 event.metaKey ||
292 description: "A light-DOM boundary for left-to-right or right-to-left content.", 292 event.ctrlKey ||
293 markup: `<zen-direction dir="rtl"><p>مرحبا بالعالم</p></zen-direction>`, 293 event.shiftKey ||
294 }, 294 event.altKey ||
295 { 295 link.hasAttribute("download") ||
296 name: "Drawer", 296 link.target) return;
297 slug: "drawer", 297 event.preventDefault();
298 element: "zen-drawer", 298 history.pushState({}, "", link.href);
299 group: "Overlays", 299 showPage(location.pathname);
300 description: "A native dialog presented as an edge drawer.", 300 document.querySelector("#catalogMain")?.focus();
301 markup: `<zen-drawer placement="bottom"> 301 });
302 <button type="button" data-zen-trigger>Open drawer</button> 302 window.addEventListener("popstate", () => showPage(location.pathname));
303 <dialog><h3>Build queue</h3><p>Two jobs are running.</p><button type="button" data-zen-close>Close</button></dialog> 303 showPage(location.pathname);
304 </zen-drawer>`, 304 });
305 },
306 {
307 name: "Dropdown Menu",
308 slug: "dropdown-menu",
309 element: "zen-dropdown-menu",
310 group: "Menus",
311 description: "A button-owned action menu with arrow-key navigation.",
312 markup: `<zen-dropdown-menu>
313 <button type="button" data-zen-trigger>Repository actions</button>
314 <div role="menu" hidden>
315 <button type="button" role="menuitem">Clone</button>
316 <button type="button" role="menuitem">Bookmark</button>
317 <button type="button" role="menuitem">Archive</button>
318 </div>
319 </zen-dropdown-menu>`,
320 },
321 {
322 name: "Empty",
323 slug: "empty",
324 element: "zen-empty",
325 group: "Feedback",
326 description: "A structured empty state with an optional native action.",
327 markup: `<zen-empty>
328 <strong>No deployments yet</strong>
329 <p>Create the first release from the current default branch.</p>
330 <button type="button">Create deployment</button>
331 </zen-empty>`,
332 },
333 {
334 name: "Field",
335 slug: "field",
336 element: "zen-field",
337 group: "Forms",
338 description: "Label, help text, validity, and a native form control.",
339 existing: true,
340 },
341 {
342 name: "Form",
343 slug: "form",
344 element: "zen-form",
345 group: "Forms",
346 description: "A native form boundary with visible browser validity state.",
347 markup: `<zen-form>
348 <form>
349 <zen-field><label>Repository name</label><input required /><small>Required</small></zen-field>
350 <button type="submit">Create</button>
351 </form>
352 </zen-form>`,
353 },
354 {
355 name: "Hover Card",
356 slug: "hover-card",
357 element: "zen-hover-card",
358 group: "Overlays",
359 description: "Supplemental content shown on hover or keyboard focus.",
360 markup: `<zen-hover-card>
361 <a href="#" data-zen-trigger>@mrjunejune</a>
362 <div data-zen-content hidden><strong>June Park</strong><p>Building Zenbu in C and native HTML.</p></div>
363 </zen-hover-card>`,
364 },
365 {
366 name: "Input",
367 slug: "input",
368 element: "zen-input",
369 group: "Forms",
370 description: "A styled native input with no replacement semantics.",
371 markup: `<zen-input><input type="email" placeholder="[email protected]" aria-label="Email" /></zen-input>`,
372 },
373 {
374 name: "Input Group",
375 slug: "input-group",
376 element: "zen-input-group",
377 group: "Forms",
378 description: "A native input with prefix, suffix, or inline actions.",
379 markup: `<zen-input-group>
380 <span aria-hidden="true">https://</span>
381 <input aria-label="Host" value="zenbu.babocoder.com" />
382 <button type="button">Copy</button>
383 </zen-input-group>`,
384 },
385 {
386 name: "Input OTP",
387 slug: "input-otp",
388 element: "zen-input-otp",
389 group: "Forms",
390 description: "A single native one-time-code input with visual slots.",
391 markup: `<zen-input-otp>
392 <label for="otp-demo">Verification code</label>
393 <input id="otp-demo" inputmode="numeric" autocomplete="one-time-code" maxlength="6" />
394 <div data-zen-otp-slots aria-hidden="true"></div>
395 </zen-input-otp>`,
396 },
397 {
398 name: "Item",
399 slug: "item",
400 element: "zen-item",
401 group: "Display",
402 description: "A flexible list row for an icon, content, and actions.",
403 markup: `<zen-item>
404 <zen-icon name="repository"></zen-icon>
405 <div><strong>hg-web</strong><small>Updated two minutes ago</small></div>
406 <button type="button">Open</button>
407 </zen-item>`,
408 },
409 {
410 name: "Kbd",
411 slug: "kbd",
412 element: "zen-kbd",
413 group: "Display",
414 description: "Keyboard shortcut presentation using native kbd elements.",
415 markup: `<p>Open commands with <zen-kbd><kbd>Ctrl</kbd><span>+</span><kbd>K</kbd></zen-kbd>.</p>`,
416 },
417 {
418 name: "Label",
419 slug: "label",
420 element: "zen-label",
421 group: "Forms",
422 description: "A styled native label that keeps browser association.",
423 markup: `<zen-label><label for="label-demo">Branch name</label></zen-label>
424 <zen-input><input id="label-demo" value="default" /></zen-input>`,
425 },
426 {
427 name: "Marker",
428 slug: "marker",
429 element: "zen-marker",
430 group: "Chat",
431 description: "An inline system marker for chat and activity streams.",
432 markup: `<zen-marker><span>Today</span></zen-marker>`,
433 },
434 {
435 name: "Menubar",
436 slug: "menubar",
437 element: "zen-menubar",
438 group: "Menus",
439 description: "A horizontal application menu using native buttons and menu roles.",
440 markup: `<zen-menubar>
441 <button type="button" data-zen-trigger>File</button>
442 <div role="menu" hidden><button role="menuitem">New</button><button role="menuitem">Open</button></div>
443 <button type="button" data-zen-trigger>View</button>
444 <div role="menu" hidden><button role="menuitem">Graph</button><button role="menuitem">History</button></div>
445 </zen-menubar>`,
446 },
447 {
448 name: "Message",
449 slug: "message",
450 element: "zen-message",
451 group: "Chat",
452 description: "An avatar, author, and content row for conversations.",
453 markup: `<zen-message>
454 <zen-avatar aria-label="June"><span>JP</span></zen-avatar>
455 <div><strong>June</strong><zen-bubble><p>Can we deploy this release?</p></zen-bubble></div>
456 </zen-message>`,
457 },
458 {
459 name: "Message Scroller",
460 slug: "message-scroller",
461 element: "zen-message-scroller",
462 group: "Chat",
463 description: "A chat viewport that follows new content until the reader scrolls away.",
464 markup: `<zen-message-scroller>
465 <div data-zen-viewport>
466 <p>Worker connected.</p><p>Build started.</p><p>Bundle created.</p><p>Deployment complete.</p>
467 </div>
468 <button type="button" data-zen-scroll-end hidden>Jump to latest</button>
469 </zen-message-scroller>`,
470 },
471 {
472 name: "Native Select",
473 slug: "native-select",
474 element: "zen-native-select",
475 group: "Forms",
476 description: "A styled native select with full platform behavior.",
477 markup: `<zen-native-select><select aria-label="Environment"><option>Development</option><option>Production</option></select></zen-native-select>`,
478 },
479 {
480 name: "Navigation Menu",
481 slug: "navigation-menu",
482 element: "zen-navigation-menu",
483 group: "Navigation",
484 description: "Top-level navigation with optional keyboard-accessible flyouts.",
485 markup: `<zen-navigation-menu>
486 <nav aria-label="Products">
487 <button type="button" data-zen-trigger>Projects</button>
488 <div role="menu" hidden><a role="menuitem" href="/components">Zenbu UI</a><a role="menuitem" href="/">hg-web</a></div>
489 <a href="/tokens">Tokens</a>
490 </nav>
491 </zen-navigation-menu>`,
492 },
493 {
494 name: "Pagination",
495 slug: "pagination",
496 element: "zen-pagination",
497 group: "Navigation",
498 description: "Page navigation built from native links.",
499 markup: `<zen-pagination>
500 <nav><a href="#">Previous</a><a href="#">1</a><a href="#" aria-current="page">2</a><a href="#">3</a><a href="#">Next</a></nav>
501 </zen-pagination>`,
502 },
503 {
504 name: "Popover",
505 slug: "popover",
506 element: "zen-popover",
507 group: "Overlays",
508 description: "A lightweight panel using the native Popover API when available.",
509 markup: `<zen-popover>
510 <button type="button" data-zen-trigger>Open settings</button>
511 <div data-zen-content><strong>Dimensions</strong><label>Width <input value="100%" /></label></div>
512 </zen-popover>`,
513 },
514 {
515 name: "Progress",
516 slug: "progress",
517 element: "zen-progress",
518 group: "Feedback",
519 description: "A styled native progress element.",
520 markup: `<zen-progress><label for="progress-demo">Uploading</label><progress id="progress-demo" value="68" max="100">68%</progress></zen-progress>`,
521 },
522 {
523 name: "Radio Group",
524 slug: "radio-group",
525 element: "zen-radio-group",
526 group: "Forms",
527 description: "A fieldset of native radio inputs.",
528 markup: `<zen-radio-group>
529 <fieldset><legend>Visibility</legend>
530 <label><input type="radio" name="visibility" checked /> Public</label>
531 <label><input type="radio" name="visibility" /> Private</label>
532 </fieldset>
533 </zen-radio-group>`,
534 },
535 {
536 name: "Resizable",
537 slug: "resizable",
538 element: "zen-resizable",
539 group: "Layout",
540 description: "Two native panels separated by a pointer and keyboard handle.",
541 markup: `<zen-resizable>
542 <section data-zen-panel>Repository tree</section>
543 <div data-zen-handle tabindex="0"></div>
544 <section data-zen-panel>File preview</section>
545 </zen-resizable>`,
546 },
547 {
548 name: "Scroll Area",
549 slug: "scroll-area",
550 element: "zen-scroll-area",
551 group: "Layout",
552 description: "A bounded native scroll container with theme-aware scrollbars.",
553 markup: `<zen-scroll-area tabindex="0">
554 <p>default</p><p>feature/design-system</p><p>release/2026-08</p><p>experiment/trading</p>
555 </zen-scroll-area>`,
556 },
557 {
558 name: "Select",
559 slug: "select",
560 element: "zen-select",
561 group: "Forms",
562 description: "A native select styled as the default accessible implementation.",
563 markup: `<zen-select><label>Branch <select><option>default</option><option>stable</option></select></label></zen-select>`,
564 },
565 {
566 name: "Separator",
567 slug: "separator",
568 element: "zen-separator",
569 group: "Layout",
570 description: "A native horizontal rule or ARIA separator.",
571 markup: `<div>Repository</div><zen-separator><hr /></zen-separator><div>Changesets</div>`,
572 },
573 {
574 name: "Sheet",
575 slug: "sheet",
576 element: "zen-sheet",
577 group: "Overlays",
578 description: "A native dialog presented from a selected screen edge.",
579 markup: `<zen-sheet placement="right">
580 <button type="button" data-zen-trigger>Open filters</button>
581 <dialog><h3>Filters</h3><label>Author <input /></label><button type="button" data-zen-close>Apply</button></dialog>
582 </zen-sheet>`,
583 },
584 {
585 name: "Sidebar",
586 slug: "sidebar",
587 element: "zen-sidebar",
588 group: "Navigation",
589 description: "A collapsible navigation region with an explicit native trigger.",
590 markup: `<zen-sidebar open>
591 <button type="button" data-zen-sidebar-trigger>Toggle sidebar</button>
592 <aside data-zen-sidebar-panel><nav><a href="/">Overview</a><a href="/components">Components</a><a href="/tokens">Tokens</a></nav></aside>
593 </zen-sidebar>`,
594 },
595 {
596 name: "Skeleton",
597 slug: "skeleton",
598 element: "zen-skeleton",
599 group: "Feedback",
600 description: "A reduced-motion-safe placeholder for pending content.",
601 markup: `<zen-stack>
602 <zen-skeleton shape="circle"></zen-skeleton>
603 <zen-skeleton></zen-skeleton>
604 <zen-skeleton width="60%"></zen-skeleton>
605 </zen-stack>`,
606 },
607 {
608 name: "Slider",
609 slug: "slider",
610 element: "zen-slider",
611 group: "Forms",
612 description: "A native range input with browser keyboard and pointer behavior.",
613 markup: `<zen-slider><label for="slider-demo">Volume</label><input id="slider-demo" type="range" value="65" /></zen-slider>`,
614 },
615 {
616 name: "Sonner",
617 slug: "sonner",
618 element: "zen-notifications",
619 group: "Feedback",
620 description: "Zenbu's bounded, scoped, Sonner-like notification stack.",
621 markup: `<zen-notifications aria-label="Sonner demo">
622 <button type="button" data-notification-demo data-notification-id="sonner-demo" data-tone="success" data-message="Deployment complete">Show notification</button>
623 </zen-notifications>`,
624 },
625 {
626 name: "Spinner",
627 slug: "spinner",
628 element: "zen-spinner",
629 group: "Feedback",
630 description: "A small CSS loading indicator with status semantics.",
631 markup: `<zen-spinner aria-label="Loading repositories"></zen-spinner>`,
632 },
633 {
634 name: "Switch",
635 slug: "switch",
636 element: "zen-switch",
637 group: "Forms",
638 description: "A native checkbox presented with switch semantics.",
639 markup: `<zen-switch><label><input type="checkbox" checked /> Automatic deployment</label></zen-switch>`,
640 },
641 {
642 name: "Table",
643 slug: "table",
644 element: "zen-table",
645 group: "Data",
646 description: "Responsive styling around a native HTML table.",
647 markup: `<zen-table><table>
648 <caption>Recent changesets</caption>
649 <thead><tr><th>Revision</th><th>Author</th></tr></thead>
650 <tbody><tr><td>253:fdf3816959cb</td><td>June</td></tr><tr><td>252:7a7581f040e8</td><td>June</td></tr></tbody>
651 </table></zen-table>`,
652 },
653 {
654 name: "Tabs",
655 slug: "tabs",
656 element: "zen-tabs",
657 group: "Disclosure",
658 description: "ARIA tabs with automatic or manual keyboard activation.",
659 markup: `<zen-tabs>
660 <div role="tablist" aria-label="Repository views">
661 <button type="button" role="tab" data-value="files">Files</button>
662 <button type="button" role="tab" data-value="history">History</button>
663 <button type="button" role="tab" data-value="graph">Graph</button>
664 </div>
665 <section role="tabpanel">Browse repository files.</section>
666 <section role="tabpanel">Inspect changesets.</section>
667 <section role="tabpanel">View branch topology.</section>
668 </zen-tabs>`,
669 },
670 {
671 name: "Textarea",
672 slug: "textarea",
673 element: "zen-textarea",
674 group: "Forms",
675 description: "A styled native multiline text control.",
676 markup: `<zen-textarea><textarea aria-label="Commit message" placeholder="Describe this change"></textarea></zen-textarea>`,
677 },
678 {
679 name: "Toast",
680 slug: "toast",
681 element: "zen-notifications",
682 group: "Feedback",
683 description: "The deprecated toast concept maps to zen-notifications.",
684 markup: `<zen-alert tone="warning"><p><strong>Toast is deprecated.</strong> Use <code>zen-notifications</code> for scoped transient messages.</p></zen-alert>`,
685 },
686 {
687 name: "Toggle",
688 slug: "toggle",
689 element: "zen-toggle",
690 group: "Actions",
691 description: "A native button with managed pressed state.",
692 markup: `<zen-toggle><button type="button">Bold</button></zen-toggle>`,
693 },
694 {
695 name: "Toggle Group",
696 slug: "toggle-group",
697 element: "zen-toggle-group",
698 group: "Actions",
699 description: "Single or multiple pressed-state buttons with roving keyboard focus.",
700 markup: `<zen-toggle-group type="single" value="center" aria-label="Alignment">
701 <button type="button" value="left">Left</button>
702 <button type="button" value="center">Center</button>
703 <button type="button" value="right">Right</button>
704 </zen-toggle-group>`,
705 },
706 {
707 name: "Tooltip",
708 slug: "tooltip",
709 element: "zen-tooltip",
710 group: "Overlays",
711 description: "A delayed, non-interactive description for hover and focus.",
712 markup: `<zen-tooltip>
713 <button type="button" data-zen-trigger aria-label="Add repository"><zen-icon name="add"></zen-icon></button>
714 <span data-zen-content hidden>Add repository</span>
715 </zen-tooltip>`,
716 },
717 {
718 name: "Typography",
719 slug: "typography",
720 element: "zen-typography",
721 group: "Foundations",
722 description: "Readable defaults for native headings, paragraphs, lists, and code.",
723 markup: `<zen-typography>
724 <h2>The Mercurial forge</h2>
725 <p>Typography stays semantic and inherits Zenbu tokens.</p>
726 <blockquote>Own the stack, understand the stack.</blockquote>
727 </zen-typography>`,
728 },
729 ];
730
731 /** @const {number} Number of mapped shadcn component concepts. */
732 export const shadcnComponentCount = componentCatalog.length;