Mercurial

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