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

annotate design_system/src/index.html @ 266:efaf4c63cc94

fix clean production bundle staging Recreate deployment staging before copying the Bazel bundle and verify required inference runtime paths before promoting it. Co-authored-by: Copilot <[email protected]>

author	MrJuneJune <me@mrjunejune.com>
date	Fri, 07 Aug 2026 12:52:30 -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 @ 266:efaf4c63cc94