/home/mrjunejune/zenbu: design_system/src/index.html annotate

annotate design_system/src/index.html @ 279:b3b547563ec7

Add Google connector service and agent wiki Implement the C/Seobeo Google Drive and Gmail connector with encrypted OAuth storage, Zenbu authentication, browser testing, AI tool discovery, chunked HTTP decoding, and Bazel coverage. Consolidate repository guidance into progressive wiki documentation and enforce arena-first allocation for new first-party C code. Co-authored-by: Copilot <[email protected]> Copilot-Session: 84c338fd-0939-4bb3-b7f3-1062eb213e5d

author	MrJuneJune <me@mrjunejune.com>
date	Mon, 17 Aug 2026 22:22:36 -0700
parents	60a876c4587a
children

rev	line source
251 117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	1 <!doctype html>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	2 <html lang="en">
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	3 <head>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	4 <meta charset="utf-8" />
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	5 <meta name="viewport" content="width=device-width, initial-scale=1" />
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	6 <meta name="color-scheme" content="light dark" />
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	7 <title>Zenbu UI</title>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	8 <link rel="stylesheet" href="/styles/tokens.css" />
256 30c2196d03d4 [site] Integrate Zenbu themes and components MrJuneJune <me@mrjunejune.com> parents: 254 diff changeset	9 <link rel="stylesheet" href="/styles/themes.css" />
251 117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	10 <link rel="stylesheet" href="/styles/components.css" />
258 60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	11 <link rel="stylesheet" href="/catalog.css" />
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	12 <script type="module" src="/catalog.js"></script>
251 117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	13 </head>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	14 <body>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	15 <div class="catalog-shell">
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	16 <aside class="catalog-sidebar">
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	17 <a class="catalog-brand" href="/" data-catalog-link>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	18 <span class="catalog-mark" aria-hidden="true">全</span>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	19 Zenbu UI
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	20 </a>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	21
254 2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	22 <zen-input-group class="catalog-search">
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	23 <zen-icon name="search"></zen-icon>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	24 <input
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	25 id="componentSearch"
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	26 type="search"
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	27 placeholder="Search components"
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	28 aria-label="Search components"
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	29 aria-describedby="componentSearchStatus"
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	30 autocomplete="off"
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	31 />
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	32 <kbd aria-hidden="true">/</kbd>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	33 </zen-input-group>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	34 <p id="componentSearchStatus" class="search-status" role="status"></p>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	35
251 117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	36 <h2>Foundations</h2>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	37 <nav class="catalog-nav" aria-label="Foundations">
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	38 <a href="/" data-catalog-link>Overview</a>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	39 <a href="/tokens" data-catalog-link>Tokens</a>
254 2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	40 <a href="/icons" data-catalog-link>Icons</a>
251 117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	41 </nav>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	42
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	43 <h2>Components</h2>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	44 <nav class="catalog-nav" aria-label="Components">
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	45 <a href="/components/button" data-catalog-link>Button</a>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	46 <a href="/components/card" data-catalog-link>Card</a>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	47 <a href="/components/alert" data-catalog-link>Alert</a>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	48 <a href="/components/field" data-catalog-link>Field</a>
252 7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	49 <a href="/components/notifications" data-catalog-link>Notifications</a>
251 117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	50 <a href="/components/stack" data-catalog-link>Stack</a>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	51 </nav>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	52
258 60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	53 <zen-button class="theme-toggle-wrap" appearance="plain" size="sm">
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	54 <button id="themeToggle" class="theme-toggle" type="button">
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	55 Toggle theme
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	56 </button>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	57 </zen-button>
251 117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	58 </aside>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	59
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	60 <main id="catalogMain" class="catalog-main" tabindex="-1">
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	61 <section class="catalog-page" data-catalog-page="overview">
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	62 <header class="page-heading">
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	63 <p class="eyebrow">HTML first</p>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	64 <h1>A small design system that stays close to the platform.</h1>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	65 <p>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	66 Zenbu UI uses light-DOM Web Components to organize styling and
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	67 behavior without hiding the native button, link, label, input,
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	68 article, and section elements that already work.
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	69 </p>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	70 </header>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	71
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	72 <div class="principles">
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	73 <article class="principle">
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	74 <h2>Native underneath</h2>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	75 <p>Interactive wrappers contain real HTML controls, preserving forms, links, keyboard behavior, and browser APIs.</p>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	76 </article>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	77 <article class="principle">
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	78 <h2>Light DOM</h2>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	79 <p>Application code can inspect, style, test, and progressively enhance every element without crossing a shadow boundary.</p>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	80 </article>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	81 <article class="principle">
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	82 <h2>Portable tokens</h2>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	83 <p>CSS custom properties provide the visual contract. Components remain dependency-free ES modules.</p>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	84 </article>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	85 </div>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	86
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	87 <h2>Components</h2>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	88 <div class="component-grid">
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	89 <a href="/components/button" data-catalog-link>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	90 <zen-card interactive><article><h3>Button</h3><p>Native buttons and links with shared variants and loading state.</p></article></zen-card>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	91 </a>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	92 <a href="/components/card" data-catalog-link>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	93 <zen-card interactive><article><h3>Card</h3><p>A visual container that leaves article semantics in your HTML.</p></article></zen-card>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	94 </a>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	95 <a href="/components/alert" data-catalog-link>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	96 <zen-card interactive><article><h3>Alert</h3><p>Status and alert messages with optional dismissal.</p></article></zen-card>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	97 </a>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	98 <a href="/components/field" data-catalog-link>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	99 <zen-card interactive><article><h3>Field</h3><p>Labels, controls, help text, and validity wiring.</p></article></zen-card>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	100 </a>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	101 <a href="/components/stack" data-catalog-link>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	102 <zen-card interactive><article><h3>Stack</h3><p>A tiny layout primitive driven by HTML attributes.</p></article></zen-card>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	103 </a>
252 7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	104 <a href="/components/notifications" data-catalog-link>
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	105 <zen-card interactive><article><h3>Notifications</h3><p>A bounded, scoped, bottom-right notification stack.</p></article></zen-card>
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	106 </a>
251 117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	107 </div>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	108 </section>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	109
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	110 <section class="catalog-page" data-catalog-page="tokens" hidden>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	111 <header class="page-heading">
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	112 <p class="eyebrow">Foundations</p>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	113 <h1>Design tokens</h1>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	114 <p>Import one CSS file and override any <code>--zen-*</code> property at the application boundary.</p>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	115 </header>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	116 <div class="token-grid">
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	117 <section class="token-group">
254 2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	118 <h2>Semantic color</h2>
251 117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	119 <dl class="swatch-list">
254 2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	120 <div><span class="swatch" style="--zen-color-swatch: var(--zen-color-accent)"></span><div><dt>--zen-color-accent</dt><dd>Primary action</dd></div></div>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	121 <div><span class="swatch" style="--zen-color-swatch: var(--zen-color-info)"></span><div><dt>--zen-color-info</dt><dd>Informational state</dd></div></div>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	122 <div><span class="swatch" style="--zen-color-swatch: var(--zen-color-success)"></span><div><dt>--zen-color-success</dt><dd>Successful state</dd></div></div>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	123 <div><span class="swatch" style="--zen-color-swatch: var(--zen-color-danger)"></span><div><dt>--zen-color-danger</dt><dd>Dangerous state</dd></div></div>
251 117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	124 </dl>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	125 </section>
254 2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	126 <section class="token-group token-group-wide">
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	127 <h2>Material palette</h2>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	128 <p>Warm, quiet colors inspired by paper, natural dye, clay, and wood.</p>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	129 <div class="palette-grid">
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	130 <div><span style="--zen-color-swatch: var(--zen-color-paper)"></span><code>paper</code></div>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	131 <div><span style="--zen-color-swatch: var(--zen-color-washi)"></span><code>washi</code></div>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	132 <div><span style="--zen-color-swatch: var(--zen-color-linen)"></span><code>linen</code></div>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	133 <div><span style="--zen-color-swatch: var(--zen-color-sumi)"></span><code>sumi</code></div>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	134 <div><span style="--zen-color-swatch: var(--zen-color-brick)"></span><code>brick</code></div>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	135 <div><span style="--zen-color-swatch: var(--zen-color-persimmon)"></span><code>persimmon</code></div>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	136 <div><span style="--zen-color-swatch: var(--zen-color-ochre)"></span><code>ochre</code></div>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	137 <div><span style="--zen-color-swatch: var(--zen-color-moss)"></span><code>moss</code></div>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	138 <div><span style="--zen-color-swatch: var(--zen-color-patina)"></span><code>patina</code></div>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	139 <div><span style="--zen-color-swatch: var(--zen-color-indigo)"></span><code>indigo</code></div>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	140 <div><span style="--zen-color-swatch: var(--zen-color-plum)"></span><code>plum</code></div>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	141 <div><span style="--zen-color-swatch: var(--zen-color-clay)"></span><code>clay</code></div>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	142 <div><span style="--zen-color-swatch: var(--zen-color-wood)"></span><code>wood</code></div>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	143 </div>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	144 </section>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	145 <section class="token-group token-group-wide">
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	146 <h2>Data palette</h2>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	147 <p>Ten distinct aliases for charts and categorical comparisons.</p>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	148 <div class="data-palette" aria-label="Data color tokens">
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	149 <span style="--zen-color-swatch: var(--zen-color-data-1)" title="--zen-color-data-1"></span>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	150 <span style="--zen-color-swatch: var(--zen-color-data-2)" title="--zen-color-data-2"></span>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	151 <span style="--zen-color-swatch: var(--zen-color-data-3)" title="--zen-color-data-3"></span>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	152 <span style="--zen-color-swatch: var(--zen-color-data-4)" title="--zen-color-data-4"></span>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	153 <span style="--zen-color-swatch: var(--zen-color-data-5)" title="--zen-color-data-5"></span>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	154 <span style="--zen-color-swatch: var(--zen-color-data-6)" title="--zen-color-data-6"></span>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	155 <span style="--zen-color-swatch: var(--zen-color-data-7)" title="--zen-color-data-7"></span>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	156 <span style="--zen-color-swatch: var(--zen-color-data-8)" title="--zen-color-data-8"></span>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	157 <span style="--zen-color-swatch: var(--zen-color-data-9)" title="--zen-color-data-9"></span>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	158 <span style="--zen-color-swatch: var(--zen-color-data-10)" title="--zen-color-data-10"></span>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	159 </div>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	160 </section>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	161 <section class="token-group">
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	162 <h2>Color ramps</h2>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	163 <zen-stack gap="tight">
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	164 <code>neutral · red · orange · amber</code>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	165 <code>green · teal · blue · violet</code>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	166 <code>rose · brown</code>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	167 <small>Each ramp includes 50–900 plus 950.</small>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	168 </zen-stack>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	169 </section>
251 117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	170 <section class="token-group">
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	171 <h2>Spacing</h2>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	172 <zen-stack gap="tight">
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	173 <code>--zen-space-1: 0.25rem</code>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	174 <code>--zen-space-2: 0.5rem</code>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	175 <code>--zen-space-4: 1rem</code>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	176 <code>--zen-space-6: 2rem</code>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	177 </zen-stack>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	178 </section>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	179 <section class="token-group">
258 60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	180 <h2>Size scale</h2>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	181 <zen-stack gap="tight">
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	182 <code>xs · sm · md · lg · xl</code>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	183 <code>--zenbu-sys-control-height-*</code>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	184 <code>--zenbu-sys-control-padding-*</code>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	185 <code>--zenbu-sys-font-size-* / --zenbu-sys-line-height-*</code>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	186 <code>--zenbu-sys-padding-* / --zenbu-sys-icon-size-*</code>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	187 </zen-stack>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	188 </section>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	189 <section class="token-group token-group-wide">
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	190 <h2>Token layers</h2>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	191 <zen-stack direction="row">
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	192 <code>--zenbu-ref-* · available values</code>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	193 <code>--zenbu-sys-* · semantic intent</code>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	194 <code>--zenbu-<component>-* · local aliases</code>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	195 </zen-stack>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	196 <p>Components consume semantic intent. Themes and density remap the system layer.</p>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	197 </section>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	198 <section class="token-group">
251 117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	199 <h2>Shape</h2>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	200 <zen-stack gap="tight">
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	201 <code>--zen-radius-sm</code>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	202 <code>--zen-radius-md</code>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	203 <code>--zen-radius-lg</code>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	204 <code>--zen-shadow-sm / md</code>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	205 </zen-stack>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	206 </section>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	207 </div>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	208 </section>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	209
254 2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	210 <section class="catalog-page" data-catalog-page="icons" hidden>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	211 <header class="page-heading">
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	212 <p class="eyebrow">Foundations</p>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	213 <h1>Icons</h1>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	214 <p>First-party SVG icons rendered by <code>zen-icon</code>. Icons inherit color and never depend on emoji, fonts, or an external package.</p>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	215 </header>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	216 <div id="iconGrid" class="icon-grid" aria-label="Zenbu icon names"></div>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	217 </section>
2b6e732087ff [ui] Add complete native component catalog MrJuneJune <me@mrjunejune.com> parents: 252 diff changeset	218
251 117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	219 <section class="catalog-page" data-catalog-page="button" hidden>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	220 <header class="page-heading">
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	221 <p class="eyebrow">Component</p>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	222 <h1>Button</h1>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	223 <p>Wrap a native <code>button</code> or <code>a</code>. The browser keeps responsibility for forms and navigation.</p>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	224 </header>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	225 <zen-story name="Variants">
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	226 <template>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	227 <zen-stack direction="row">
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	228 <zen-button><button type="button">Primary action</button></zen-button>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	229 <zen-button variant="quiet"><button type="button">Quiet action</button></zen-button>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	230 <zen-button variant="danger"><button type="button">Delete item</button></zen-button>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	231 </zen-stack>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	232 </template>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	233 </zen-story>
258 60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	234 <zen-story name="Sizes">
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	235 <template>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	236 <zen-stack direction="row">
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	237 <zen-button size="xs"><button type="button">Extra small</button></zen-button>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	238 <zen-button size="sm"><button type="button">Small</button></zen-button>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	239 <zen-button size="md"><button type="button">Medium</button></zen-button>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	240 <zen-button size="lg"><button type="button">Large</button></zen-button>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	241 <zen-button size="xl"><button type="button">Extra large</button></zen-button>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	242 </zen-stack>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	243 </template>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: 256 diff changeset	244 </zen-story>
251 117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	245 <zen-story name="States">
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	246 <template>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	247 <zen-stack direction="row">
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	248 <zen-button loading><button type="button">Saving</button></zen-button>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	249 <zen-button disabled><button type="button">Unavailable</button></zen-button>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	250 <zen-button variant="quiet"><a href="/tokens">Token link</a></zen-button>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	251 </zen-stack>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	252 </template>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	253 </zen-story>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	254 </section>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	255
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	256 <section class="catalog-page" data-catalog-page="card" hidden>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	257 <header class="page-heading">
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	258 <p class="eyebrow">Component</p>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	259 <h1>Card</h1>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	260 <p>The wrapper owns presentation. You choose the native sectioning element and heading level.</p>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	261 </header>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	262 <zen-story name="Article cards">
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	263 <template>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	264 <div class="demo-card-grid">
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	265 <zen-card>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	266 <article>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	267 <h3>Repository health</h3>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	268 <p>All worker queues are healthy and the last deployment passed.</p>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	269 <zen-button variant="quiet"><a href="/components/alert">View status</a></zen-button>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	270 </article>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	271 </zen-card>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	272 <zen-card interactive>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	273 <article>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	274 <h3>Interactive treatment</h3>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	275 <p>Add the attribute when the whole card leads somewhere.</p>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	276 </article>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	277 </zen-card>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	278 </div>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	279 </template>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	280 </zen-story>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	281 </section>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	282
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	283 <section class="catalog-page" data-catalog-page="alert" hidden>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	284 <header class="page-heading">
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	285 <p class="eyebrow">Component</p>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	286 <h1>Alert</h1>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	287 <p>Tone selects status semantics and color. Add <code>dismissible</code> for a generated native close button.</p>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	288 </header>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	289 <zen-story name="Tones">
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	290 <template>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	291 <zen-stack>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	292 <zen-alert><p><strong>Info:</strong> The new bundle is ready to inspect.</p></zen-alert>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	293 <zen-alert tone="success"><p><strong>Success:</strong> All tests passed.</p></zen-alert>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	294 <zen-alert tone="warning"><p><strong>Warning:</strong> One worker slot remains.</p></zen-alert>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	295 <zen-alert tone="danger" dismissible><p><strong>Error:</strong> Deployment failed and was rolled back.</p></zen-alert>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	296 </zen-stack>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	297 </template>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	298 </zen-story>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	299 </section>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	300
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	301 <section class="catalog-page" data-catalog-page="field" hidden>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	302 <header class="page-heading">
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	303 <p class="eyebrow">Component</p>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	304 <h1>Field</h1>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	305 <p>Write a label and native control. The component supplies IDs, label association, help text, and invalid state.</p>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	306 </header>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	307 <zen-story name="Input and textarea">
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	308 <template>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	309 <zen-stack>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	310 <zen-field>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	311 <label>Email address</label>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	312 <input type="email" required placeholder="[email protected]" />
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	313 <small>Used only for build notifications.</small>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	314 </zen-field>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	315 <zen-field>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	316 <label>Deployment note</label>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	317 <textarea placeholder="What changed?"></textarea>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	318 <small>Keep it short and useful.</small>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	319 </zen-field>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	320 </zen-stack>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	321 </template>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	322 </zen-story>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	323 </section>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	324
252 7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	325 <section class="catalog-page" data-catalog-page="notifications" hidden>
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	326 <header class="page-heading">
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	327 <p class="eyebrow">Component</p>
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	328 <h1>Notifications</h1>
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	329 <p>A scoped bottom-right stack with bounded records, deduplication, announcements, actions, and paused finite timers.</p>
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	330 </header>
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	331 <zen-story name="Notification stack">
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	332 <template>
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	333 <zen-notifications aria-label="Catalog notifications">
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	334 <zen-stack direction="row">
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	335 <zen-button variant="quiet">
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	336 <button
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	337 type="button"
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	338 data-notification-demo
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	339 data-notification-id="catalog-info"
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	340 data-tone="info"
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	341 data-message="Build started"
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	342 data-description="The worker accepted your request."
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	343 >Info</button>
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	344 </zen-button>
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	345 <zen-button>
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	346 <button
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	347 type="button"
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	348 data-notification-demo
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	349 data-notification-id="catalog-success"
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	350 data-tone="success"
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	351 data-message="Deployment complete"
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	352 >Success</button>
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	353 </zen-button>
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	354 <zen-button variant="danger">
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	355 <button
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	356 type="button"
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	357 data-notification-demo
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	358 data-notification-id="catalog-error"
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	359 data-tone="error"
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	360 data-message="Deployment failed"
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	361 data-description="The previous release is still active."
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	362 data-action="true"
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	363 >Error with action</button>
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	364 </zen-button>
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	365 <zen-button variant="quiet">
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	366 <button
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	367 type="button"
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	368 data-notification-demo
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	369 data-notification-id="catalog-persistent"
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	370 data-tone="warning"
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	371 data-message="Manual action required"
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	372 data-persistent="true"
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	373 >Persistent</button>
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	374 </zen-button>
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	375 <zen-button variant="quiet">
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	376 <button
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	377 type="button"
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	378 data-notification-demo
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	379 data-notification-id="catalog-burst"
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	380 data-tone="info"
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	381 data-message="Queued notification"
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	382 data-burst="true"
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	383 >Add five</button>
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	384 </zen-button>
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	385 <zen-button variant="quiet">
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	386 <button
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	387 type="button"
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	388 data-notification-dismiss-demo="catalog-persistent"
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	389 >Dismiss persistent</button>
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	390 </zen-button>
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	391 </zen-stack>
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	392 </zen-notifications>
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	393 </template>
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	394 </zen-story>
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	395 </section>
7a7581f040e8 [ui] Add scoped notification component MrJuneJune <me@mrjunejune.com> parents: 251 diff changeset	396
251 117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	397 <section class="catalog-page" data-catalog-page="stack" hidden>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	398 <header class="page-heading">
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	399 <p class="eyebrow">Component</p>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	400 <h1>Stack</h1>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	401 <p>A flex layout primitive with readable direction and gap attributes.</p>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	402 </header>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	403 <zen-story name="Vertical and horizontal">
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	404 <template>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	405 <zen-stack gap="loose">
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	406 <zen-stack gap="tight">
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	407 <strong>Vertical stack</strong>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	408 <span>One item</span>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	409 <span>Another item</span>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	410 </zen-stack>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	411 <zen-stack direction="row">
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	412 <zen-button><button type="button">Accept</button></zen-button>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	413 <zen-button variant="quiet"><button type="button">Cancel</button></zen-button>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	414 </zen-stack>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	415 </zen-stack>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	416 </template>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	417 </zen-story>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	418 </section>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	419 </main>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	420 </div>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	421 </body>
117c4d53c9a4 [ui] Add HTML-first Web Component system MrJuneJune <me@mrjunejune.com> parents: diff changeset	422 </html>

Mercurial

annotate design_system/src/index.html @ 279:b3b547563ec7