Mercurial

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="color-scheme" content="light dark" />
    <title>Zenbu UI</title>
    <link rel="stylesheet" href="/styles/tokens.css" />
    <link rel="stylesheet" href="/styles/themes.css" />
    <link rel="stylesheet" href="/styles/components.css" />
    <link rel="stylesheet" href="/catalog.css" />
    <script type="module" src="/catalog.js"></script>
  </head>
  <body>
    <div class="catalog-shell">
      <aside class="catalog-sidebar">
        <a class="catalog-brand" href="/" data-catalog-link>
          <span class="catalog-mark" aria-hidden="true">全</span>
          Zenbu UI
        </a>

        <zen-input-group class="catalog-search">
          <zen-icon name="search"></zen-icon>
          <input
            id="componentSearch"
            type="search"
            placeholder="Search components"
            aria-label="Search components"
            aria-describedby="componentSearchStatus"
            autocomplete="off"
          />
          <kbd aria-hidden="true">/</kbd>
        </zen-input-group>
        <p id="componentSearchStatus" class="search-status" role="status"></p>

        <h2>Foundations</h2>
        <nav class="catalog-nav" aria-label="Foundations">
          <a href="/" data-catalog-link>Overview</a>
          <a href="/tokens" data-catalog-link>Tokens</a>
          <a href="/icons" data-catalog-link>Icons</a>
        </nav>

        <h2>Components</h2>
        <nav class="catalog-nav" aria-label="Components">
          <a href="/components/button" data-catalog-link>Button</a>
          <a href="/components/card" data-catalog-link>Card</a>
          <a href="/components/alert" data-catalog-link>Alert</a>
          <a href="/components/field" data-catalog-link>Field</a>
          <a href="/components/notifications" data-catalog-link>Notifications</a>
          <a href="/components/stack" data-catalog-link>Stack</a>
        </nav>

        <zen-button class="theme-toggle-wrap" appearance="plain" size="sm">
          <button id="themeToggle" class="theme-toggle" type="button">
            Toggle theme
          </button>
        </zen-button>
      </aside>

      <main id="catalogMain" class="catalog-main" tabindex="-1">
        <section class="catalog-page" data-catalog-page="overview">
          <header class="page-heading">
            <p class="eyebrow">HTML first</p>
            <h1>A small design system that stays close to the platform.</h1>
            <p>
              Zenbu UI uses light-DOM Web Components to organize styling and
              behavior without hiding the native button, link, label, input,
              article, and section elements that already work.
            </p>
          </header>

          <div class="principles">
            <article class="principle">
              <h2>Native underneath</h2>
              <p>Interactive wrappers contain real HTML controls, preserving forms, links, keyboard behavior, and browser APIs.</p>
            </article>
            <article class="principle">
              <h2>Light DOM</h2>
              <p>Application code can inspect, style, test, and progressively enhance every element without crossing a shadow boundary.</p>
            </article>
            <article class="principle">
              <h2>Portable tokens</h2>
              <p>CSS custom properties provide the visual contract. Components remain dependency-free ES modules.</p>
            </article>
          </div>

          <h2>Components</h2>
          <div class="component-grid">
            <a href="/components/button" data-catalog-link>
              <zen-card interactive><article><h3>Button</h3><p>Native buttons and links with shared variants and loading state.</p></article></zen-card>
            </a>
            <a href="/components/card" data-catalog-link>
              <zen-card interactive><article><h3>Card</h3><p>A visual container that leaves article semantics in your HTML.</p></article></zen-card>
            </a>
            <a href="/components/alert" data-catalog-link>
              <zen-card interactive><article><h3>Alert</h3><p>Status and alert messages with optional dismissal.</p></article></zen-card>
            </a>
            <a href="/components/field" data-catalog-link>
              <zen-card interactive><article><h3>Field</h3><p>Labels, controls, help text, and validity wiring.</p></article></zen-card>
            </a>
            <a href="/components/stack" data-catalog-link>
              <zen-card interactive><article><h3>Stack</h3><p>A tiny layout primitive driven by HTML attributes.</p></article></zen-card>
            </a>
            <a href="/components/notifications" data-catalog-link>
              <zen-card interactive><article><h3>Notifications</h3><p>A bounded, scoped, bottom-right notification stack.</p></article></zen-card>
            </a>
          </div>
        </section>

        <section class="catalog-page" data-catalog-page="tokens" hidden>
          <header class="page-heading">
            <p class="eyebrow">Foundations</p>
            <h1>Design tokens</h1>
            <p>Import one CSS file and override any <code>--zen-*</code> property at the application boundary.</p>
          </header>
          <div class="token-grid">
            <section class="token-group">
              <h2>Semantic color</h2>
              <dl class="swatch-list">
                <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>
                <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>
                <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>
                <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>
              </dl>
            </section>
            <section class="token-group token-group-wide">
              <h2>Material palette</h2>
              <p>Warm, quiet colors inspired by paper, natural dye, clay, and wood.</p>
              <div class="palette-grid">
                <div><span style="--zen-color-swatch: var(--zen-color-paper)"></span><code>paper</code></div>
                <div><span style="--zen-color-swatch: var(--zen-color-washi)"></span><code>washi</code></div>
                <div><span style="--zen-color-swatch: var(--zen-color-linen)"></span><code>linen</code></div>
                <div><span style="--zen-color-swatch: var(--zen-color-sumi)"></span><code>sumi</code></div>
                <div><span style="--zen-color-swatch: var(--zen-color-brick)"></span><code>brick</code></div>
                <div><span style="--zen-color-swatch: var(--zen-color-persimmon)"></span><code>persimmon</code></div>
                <div><span style="--zen-color-swatch: var(--zen-color-ochre)"></span><code>ochre</code></div>
                <div><span style="--zen-color-swatch: var(--zen-color-moss)"></span><code>moss</code></div>
                <div><span style="--zen-color-swatch: var(--zen-color-patina)"></span><code>patina</code></div>
                <div><span style="--zen-color-swatch: var(--zen-color-indigo)"></span><code>indigo</code></div>
                <div><span style="--zen-color-swatch: var(--zen-color-plum)"></span><code>plum</code></div>
                <div><span style="--zen-color-swatch: var(--zen-color-clay)"></span><code>clay</code></div>
                <div><span style="--zen-color-swatch: var(--zen-color-wood)"></span><code>wood</code></div>
              </div>
            </section>
            <section class="token-group token-group-wide">
              <h2>Data palette</h2>
              <p>Ten distinct aliases for charts and categorical comparisons.</p>
              <div class="data-palette" aria-label="Data color tokens">
                <span style="--zen-color-swatch: var(--zen-color-data-1)" title="--zen-color-data-1"></span>
                <span style="--zen-color-swatch: var(--zen-color-data-2)" title="--zen-color-data-2"></span>
                <span style="--zen-color-swatch: var(--zen-color-data-3)" title="--zen-color-data-3"></span>
                <span style="--zen-color-swatch: var(--zen-color-data-4)" title="--zen-color-data-4"></span>
                <span style="--zen-color-swatch: var(--zen-color-data-5)" title="--zen-color-data-5"></span>
                <span style="--zen-color-swatch: var(--zen-color-data-6)" title="--zen-color-data-6"></span>
                <span style="--zen-color-swatch: var(--zen-color-data-7)" title="--zen-color-data-7"></span>
                <span style="--zen-color-swatch: var(--zen-color-data-8)" title="--zen-color-data-8"></span>
                <span style="--zen-color-swatch: var(--zen-color-data-9)" title="--zen-color-data-9"></span>
                <span style="--zen-color-swatch: var(--zen-color-data-10)" title="--zen-color-data-10"></span>
              </div>
            </section>
            <section class="token-group">
              <h2>Color ramps</h2>
              <zen-stack gap="tight">
                <code>neutral · red · orange · amber</code>
                <code>green · teal · blue · violet</code>
                <code>rose · brown</code>
                <small>Each ramp includes 50–900 plus 950.</small>
              </zen-stack>
            </section>
            <section class="token-group">
              <h2>Spacing</h2>
              <zen-stack gap="tight">
                <code>--zen-space-1: 0.25rem</code>
                <code>--zen-space-2: 0.5rem</code>
                <code>--zen-space-4: 1rem</code>
                <code>--zen-space-6: 2rem</code>
              </zen-stack>
            </section>
            <section class="token-group">
              <h2>Size scale</h2>
              <zen-stack gap="tight">
                <code>xs · sm · md · lg · xl</code>
                <code>--zenbu-sys-control-height-*</code>
                <code>--zenbu-sys-control-padding-*</code>
                <code>--zenbu-sys-font-size-* / --zenbu-sys-line-height-*</code>
                <code>--zenbu-sys-padding-* / --zenbu-sys-icon-size-*</code>
              </zen-stack>
            </section>
            <section class="token-group token-group-wide">
              <h2>Token layers</h2>
              <zen-stack direction="row">
                <code>--zenbu-ref-* · available values</code>
                <code>--zenbu-sys-* · semantic intent</code>
                <code>--zenbu-&lt;component&gt;-* · local aliases</code>
              </zen-stack>
              <p>Components consume semantic intent. Themes and density remap the system layer.</p>
            </section>
            <section class="token-group">
              <h2>Shape</h2>
              <zen-stack gap="tight">
                <code>--zen-radius-sm</code>
                <code>--zen-radius-md</code>
                <code>--zen-radius-lg</code>
                <code>--zen-shadow-sm / md</code>
              </zen-stack>
            </section>
          </div>
        </section>

        <section class="catalog-page" data-catalog-page="icons" hidden>
          <header class="page-heading">
            <p class="eyebrow">Foundations</p>
            <h1>Icons</h1>
            <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>
          </header>
          <div id="iconGrid" class="icon-grid" aria-label="Zenbu icon names"></div>
        </section>

        <section class="catalog-page" data-catalog-page="button" hidden>
          <header class="page-heading">
            <p class="eyebrow">Component</p>
            <h1>Button</h1>
            <p>Wrap a native <code>button</code> or <code>a</code>. The browser keeps responsibility for forms and navigation.</p>
          </header>
          <zen-story name="Variants">
            <template>
              <zen-stack direction="row">
                <zen-button><button type="button">Primary action</button></zen-button>
                <zen-button variant="quiet"><button type="button">Quiet action</button></zen-button>
                <zen-button variant="danger"><button type="button">Delete item</button></zen-button>
              </zen-stack>
            </template>
          </zen-story>
          <zen-story name="Sizes">
            <template>
              <zen-stack direction="row">
                <zen-button size="xs"><button type="button">Extra small</button></zen-button>
                <zen-button size="sm"><button type="button">Small</button></zen-button>
                <zen-button size="md"><button type="button">Medium</button></zen-button>
                <zen-button size="lg"><button type="button">Large</button></zen-button>
                <zen-button size="xl"><button type="button">Extra large</button></zen-button>
              </zen-stack>
            </template>
          </zen-story>
          <zen-story name="States">
            <template>
              <zen-stack direction="row">
                <zen-button loading><button type="button">Saving</button></zen-button>
                <zen-button disabled><button type="button">Unavailable</button></zen-button>
                <zen-button variant="quiet"><a href="/tokens">Token link</a></zen-button>
              </zen-stack>
            </template>
          </zen-story>
        </section>

        <section class="catalog-page" data-catalog-page="card" hidden>
          <header class="page-heading">
            <p class="eyebrow">Component</p>
            <h1>Card</h1>
            <p>The wrapper owns presentation. You choose the native sectioning element and heading level.</p>
          </header>
          <zen-story name="Article cards">
            <template>
              <div class="demo-card-grid">
                <zen-card>
                  <article>
                    <h3>Repository health</h3>
                    <p>All worker queues are healthy and the last deployment passed.</p>
                    <zen-button variant="quiet"><a href="/components/alert">View status</a></zen-button>
                  </article>
                </zen-card>
                <zen-card interactive>
                  <article>
                    <h3>Interactive treatment</h3>
                    <p>Add the attribute when the whole card leads somewhere.</p>
                  </article>
                </zen-card>
              </div>
            </template>
          </zen-story>
        </section>

        <section class="catalog-page" data-catalog-page="alert" hidden>
          <header class="page-heading">
            <p class="eyebrow">Component</p>
            <h1>Alert</h1>
            <p>Tone selects status semantics and color. Add <code>dismissible</code> for a generated native close button.</p>
          </header>
          <zen-story name="Tones">
            <template>
              <zen-stack>
                <zen-alert><p><strong>Info:</strong> The new bundle is ready to inspect.</p></zen-alert>
                <zen-alert tone="success"><p><strong>Success:</strong> All tests passed.</p></zen-alert>
                <zen-alert tone="warning"><p><strong>Warning:</strong> One worker slot remains.</p></zen-alert>
                <zen-alert tone="danger" dismissible><p><strong>Error:</strong> Deployment failed and was rolled back.</p></zen-alert>
              </zen-stack>
            </template>
          </zen-story>
        </section>

        <section class="catalog-page" data-catalog-page="field" hidden>
          <header class="page-heading">
            <p class="eyebrow">Component</p>
            <h1>Field</h1>
            <p>Write a label and native control. The component supplies IDs, label association, help text, and invalid state.</p>
          </header>
          <zen-story name="Input and textarea">
            <template>
              <zen-stack>
                <zen-field>
                  <label>Email address</label>
                  <input type="email" required placeholder="[email protected]" />
                  <small>Used only for build notifications.</small>
                </zen-field>
                <zen-field>
                  <label>Deployment note</label>
                  <textarea placeholder="What changed?"></textarea>
                  <small>Keep it short and useful.</small>
                </zen-field>
              </zen-stack>
            </template>
          </zen-story>
        </section>

        <section class="catalog-page" data-catalog-page="notifications" hidden>
          <header class="page-heading">
            <p class="eyebrow">Component</p>
            <h1>Notifications</h1>
            <p>A scoped bottom-right stack with bounded records, deduplication, announcements, actions, and paused finite timers.</p>
          </header>
          <zen-story name="Notification stack">
            <template>
              <zen-notifications aria-label="Catalog notifications">
                <zen-stack direction="row">
                  <zen-button variant="quiet">
                    <button
                      type="button"
                      data-notification-demo
                      data-notification-id="catalog-info"
                      data-tone="info"
                      data-message="Build started"
                      data-description="The worker accepted your request."
                    >Info</button>
                  </zen-button>
                  <zen-button>
                    <button
                      type="button"
                      data-notification-demo
                      data-notification-id="catalog-success"
                      data-tone="success"
                      data-message="Deployment complete"
                    >Success</button>
                  </zen-button>
                  <zen-button variant="danger">
                    <button
                      type="button"
                      data-notification-demo
                      data-notification-id="catalog-error"
                      data-tone="error"
                      data-message="Deployment failed"
                      data-description="The previous release is still active."
                      data-action="true"
                    >Error with action</button>
                  </zen-button>
                  <zen-button variant="quiet">
                    <button
                      type="button"
                      data-notification-demo
                      data-notification-id="catalog-persistent"
                      data-tone="warning"
                      data-message="Manual action required"
                      data-persistent="true"
                    >Persistent</button>
                  </zen-button>
                  <zen-button variant="quiet">
                    <button
                      type="button"
                      data-notification-demo
                      data-notification-id="catalog-burst"
                      data-tone="info"
                      data-message="Queued notification"
                      data-burst="true"
                    >Add five</button>
                  </zen-button>
                  <zen-button variant="quiet">
                    <button
                      type="button"
                      data-notification-dismiss-demo="catalog-persistent"
                    >Dismiss persistent</button>
                  </zen-button>
                </zen-stack>
              </zen-notifications>
            </template>
          </zen-story>
        </section>

        <section class="catalog-page" data-catalog-page="stack" hidden>
          <header class="page-heading">
            <p class="eyebrow">Component</p>
            <h1>Stack</h1>
            <p>A flex layout primitive with readable direction and gap attributes.</p>
          </header>
          <zen-story name="Vertical and horizontal">
            <template>
              <zen-stack gap="loose">
                <zen-stack gap="tight">
                  <strong>Vertical stack</strong>
                  <span>One item</span>
                  <span>Another item</span>
                </zen-stack>
                <zen-stack direction="row">
                  <zen-button><button type="button">Accept</button></zen-button>
                  <zen-button variant="quiet"><button type="button">Cancel</button></zen-button>
                </zen-stack>
              </zen-stack>
            </template>
          </zen-story>
        </section>
      </main>
    </div>
  </body>
</html>
author	MrJuneJune <me@mrjunejune.com>
date	Fri, 07 Aug 2026 13:24:05 -0700
parents	60a876c4587a
children