@adia-ai/a2ui-corpus 0.0.7 → 0.2.0

package/chunks/forms-conditional-reveal.json

@@ -0,0 +1,15 @@
+{
+  "name": "forms-conditional-reveal",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/patterns/forms-conditional-and-autocomplete",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "conditional-reveal"
+  },
+  "html": "<section data-section data-property=\"conditional-reveal\" data-chunk=\"forms-conditional-reveal\">\n  <h2 variant=\"section\">Conditional reveal</h2>\n  <p data-note>A select or radio determines which sub-fields render. Hidden fields are not just `display: none` — they're removed from the form so they don't submit. When revealed, they animate in and the form's height grows; focus moves to the first revealed field.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"conditional fields\">\n      <card-ui style=\"max-width: 560px;\">\n        <header>\n          <span slot=\"heading\" variant=\"section\">Account type</span>\n          <text-ui slot=\"description\" color=\"subtle\">We'll show the fields you need based on this</text-ui>\n        </header>\n        <section>\n          <col-ui gap=\"3\">\n            <field-ui label=\"Account type\" required>\n              <select-ui name=\"account_type\">\n                <option value=\"personal\">Personal</option>\n                <option value=\"business\" selected>Business</option>\n                <option value=\"nonprofit\">Non-profit</option>\n              </select-ui>\n            </field-ui>\n            <field-ui label=\"Legal entity name\" hint=\"Matches your business registration\" required>\n              <input-ui name=\"entity_name\" placeholder=\"Adia Labs, Inc.\"></input-ui>\n            </field-ui>\n            <field-ui label=\"Tax ID / EIN\" required>\n              <input-ui name=\"tax_id\" placeholder=\"00-0000000\"></input-ui>\n            </field-ui>\n            <field-ui label=\"Industry\">\n              <select-ui name=\"industry\">\n                <option value=\"\">Choose one…</option>\n                <option value=\"software\">Software</option>\n                <option value=\"retail\">Retail</option>\n                <option value=\"services\">Services</option>\n                <option value=\"other\">Other</option>\n              </select-ui>\n            </field-ui>\n            <field-ui label=\"Industry — please specify\" hint=\"Required when 'Other' is selected\" required>\n              <input-ui name=\"industry_other\" placeholder=\"e.g., Renewable energy\"></input-ui>\n            </field-ui>\n          </col-ui>\n        </section>\n      </card-ui>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/patterns/forms-conditional-and-autocomplete/index.html",
+  "captured_at": "2026-05-01T19:13:23.303Z"
+}

package/chunks/heatmap-data-stream.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"data-stream\" data-chunk=\"heatmap-data-stream\">\n  <h2 variant=\"section\">Data stream (<code>data-stream-*</code>)</h2>\n  <p data-note>\n    Heatmap-ui inherits the universal <code>data-stream-*</code> trait\n    — no per-component opt-in. Set <code>data-stream-src</code> and\n    cells populate from the response. The mock at\n    <code>/site/mock/activity.json</code> is a flat array of\n    <code>{r, c, v, label}</code> rows; for SSE/WS streaming, set\n    <code>data-stream-mode=\"sse\"</code> and\n    <code>data-stream-merge=\"append\"</code> to add cells as events\n    arrive. See the chart-ui demo's full attribute table for the\n    options surface.\n  </p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='heatmap-ui[data-stream-src=\"/site/mock/activity.json\"]' style=\"flex:1 1 100%;\">\n      <heatmap-ui type=\"matrix\" rows=\"5\" cols=\"4\"\n                  color-scheme=\"accent\"\n                  aria-label=\"Commit activity from activity.json\"\n                  data-stream-src=\"/site/mock/activity.json\"></heatmap-ui>\n    </div>\n  </div>\n</section>",
   "source": "site/pages/components/heatmap/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/heatmap-day-grid.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"day-grid\" data-chunk=\"heatmap-day-grid\">\n  <h2 variant=\"section\">day-grid (GitHub contributions)</h2>\n  <p data-note>7 × 52 grid with month labels — populated via the <code>.data</code> property in setup.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"day-grid · 7 × 52\">\n      <heatmap-ui id=\"hm-days\" type=\"day-grid\" rows=\"7\" cols=\"52\" start-date=\"2025-01-01\" color-scheme=\"data-ramp\"></heatmap-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/heatmap/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/heatmap-matrix.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"matrix\" data-chunk=\"heatmap-matrix\">\n  <h2 variant=\"section\">matrix</h2>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"matrix · 7 × 12 · accent scheme\">\n      <heatmap-ui id=\"hm-matrix\" type=\"matrix\" rows=\"7\" cols=\"12\" color-scheme=\"accent\"></heatmap-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"density · 10 × 10 · square\">\n      <heatmap-ui id=\"hm-density\" type=\"density\" rows=\"10\" cols=\"10\" color-scheme=\"success\" aspect=\"square\"></heatmap-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/heatmap/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/hero-cta-simple.json

@@ -0,0 +1,15 @@
+{
+  "name": "hero-cta-simple",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/patterns/marketing-engagement",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "hero-simple"
+  },
+  "html": "<section data-section data-property=\"hero-simple\" data-chunk=\"hero-cta-simple\">\n  <h2 variant=\"section\">Hero — title + subtitle + CTA</h2>\n  <p data-note>The minimal hero. Centered display headline, subtitle, primary CTA + secondary \"Learn more\" ghost. No supporting image — works when the headline carries the weight.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"simple hero\">\n      <card-ui raw>\n        <col-ui gap=\"3\" align=\"center\" padding=\"10\">\n          <tag-ui size=\"sm\" variant=\"muted\">v0.0.27 — out today</tag-ui>\n          <text-ui variant=\"display\" strong>Generative UI, deterministically.</text-ui>\n          <text-ui variant=\"deck\" color=\"subtle\">AdiaUI emits A2UI JSON the runtime renders into Light-DOM web components. No model, no surprise.</text-ui>\n          <row-ui gap=\"2\">\n            <button-ui text=\"Get started\" variant=\"primary\" size=\"lg\"></button-ui>\n            <button-ui text=\"See demos\" variant=\"ghost\" size=\"lg\" icon-trailing=\"arrow-right\"></button-ui>\n          </row-ui>\n        </col-ui>\n      </card-ui>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/patterns/marketing-engagement/index.html",
+  "captured_at": "2026-05-01T19:13:23.303Z"
+}

package/chunks/hero-cta-split.json

@@ -0,0 +1,15 @@
+{
+  "name": "hero-cta-split",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/patterns/marketing-engagement",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "hero-split"
+  },
+  "html": "<section data-section data-property=\"hero-split\" data-chunk=\"hero-cta-split\">\n  <h2 variant=\"section\">Hero — split with visual</h2>\n  <p data-note>Two-column hero. Headline + subtitle + CTA on the left, supporting visual on the right. The visual is a placeholder card here; in production it's a screenshot, animation, or video poster.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"split hero\">\n      <card-ui raw>\n        <grid-ui columns=\"2\" gap=\"6\" align=\"center\" padding=\"8\">\n          <col-ui gap=\"3\">\n            <tag-ui size=\"sm\" variant=\"muted\">For teams</tag-ui>\n            <text-ui variant=\"display\" strong>Ship UI as fast as your model thinks.</text-ui>\n            <text-ui variant=\"deck\" color=\"subtle\">A2UI is a typed JSON protocol your agent emits and the runtime renders. No React rebuild for every prompt.</text-ui>\n            <row-ui gap=\"2\">\n              <button-ui text=\"Start free\" variant=\"primary\"></button-ui>\n              <button-ui text=\"Talk to sales\" variant=\"ghost\" icon-trailing=\"arrow-right\"></button-ui>\n            </row-ui>\n            <row-ui gap=\"6\">\n              <stat-ui label=\"Components\" value=\"94\"></stat-ui>\n              <stat-ui label=\"Chunks\" value=\"755\"></stat-ui>\n              <stat-ui label=\"Cost ratio\" value=\"0.18×\"></stat-ui>\n            </row-ui>\n          </col-ui>\n          <card-ui variant=\"soft\">\n            <col-ui align=\"center\" justify=\"center\" padding=\"10\">\n              <text-ui color=\"subtle\">[ Product visual ]</text-ui>\n            </col-ui>\n          </card-ui>\n        </grid-ui>\n      </card-ui>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/patterns/marketing-engagement/index.html",
+  "captured_at": "2026-05-01T19:13:23.303Z"
+}

package/chunks/icon-combinations.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"combinations\" data-chunk=\"icon-combinations\">\n  <h2 variant=\"section\">Combinations</h2>\n  <p data-note>Icons at different sizes in a toolbar-like arrangement.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"toolbar sm\">\n      <div style=\"display:flex; gap:var(--a-space-3); align-items:center;\">\n        <icon-ui name=\"house\" size=\"sm\"></icon-ui>\n        <icon-ui name=\"magnifying-glass\" size=\"sm\"></icon-ui>\n        <icon-ui name=\"bell\" size=\"sm\"></icon-ui>\n        <icon-ui name=\"gear\" size=\"sm\"></icon-ui>\n        <icon-ui name=\"user\" size=\"sm\"></icon-ui>\n      </div>\n      </div>\n    <div data-artifact-item data-artifact-label=\"toolbar lg\">\n      <div style=\"display:flex; gap:var(--a-space-4); align-items:center;\">\n        <icon-ui name=\"house\" size=\"lg\"></icon-ui>\n        <icon-ui name=\"magnifying-glass\" size=\"lg\"></icon-ui>\n        <icon-ui name=\"bell\" size=\"lg\"></icon-ui>\n        <icon-ui name=\"gear\" size=\"lg\"></icon-ui>\n        <icon-ui name=\"user\" size=\"lg\"></icon-ui>\n      </div>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/icon/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/icon-edge-cases.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"edge-cases\" data-chunk=\"icon-edge-cases\">\n  <h2 variant=\"section\">Edge Cases</h2>\n  <p data-note>Boundary conditions.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"bare (no name)\">\n      <icon-ui></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"invalid name\">\n      <icon-ui name=\"nonexistent-icon\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"label + size\">\n      <icon-ui name=\"check\" label=\"Confirmed\" size=\"lg\"></icon-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/icon/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/icon-label.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"label\" data-chunk=\"icon-label\">\n  <h2 variant=\"section\">label</h2>\n  <p data-note>When a label is provided, the icon gets role=\"img\" and aria-label. Without a label, it is presentational (aria-hidden).</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"labeled (accessible)\">\n      <icon-ui name=\"bell\" label=\"Notifications\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"decorative (hidden)\">\n      <icon-ui name=\"bell\"></icon-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/icon/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/icon-name.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"name\" data-chunk=\"icon-name\">\n  <h2 variant=\"section\">name</h2>\n  <p data-note>The Phosphor icon name. Renders the corresponding SVG inline. Here are 20 common icons.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"gear\">\n      <icon-ui name=\"gear\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"user\">\n      <icon-ui name=\"user\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"house\">\n      <icon-ui name=\"house\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"magnifying-glass\">\n      <icon-ui name=\"magnifying-glass\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"bell\">\n      <icon-ui name=\"bell\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"chat-circle\">\n      <icon-ui name=\"chat-circle\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"envelope\">\n      <icon-ui name=\"envelope\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"heart\">\n      <icon-ui name=\"heart\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"star\">\n      <icon-ui name=\"star\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"check\">\n      <icon-ui name=\"check\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"x\">\n      <icon-ui name=\"x\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"plus\">\n      <icon-ui name=\"plus\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"minus\">\n      <icon-ui name=\"minus\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"pencil\">\n      <icon-ui name=\"pencil\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"trash\">\n      <icon-ui name=\"trash\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"eye\">\n      <icon-ui name=\"eye\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"lock\">\n      <icon-ui name=\"lock\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"moon\">\n      <icon-ui name=\"moon\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"sun\">\n      <icon-ui name=\"sun\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"arrow-right\">\n      <icon-ui name=\"arrow-right\"></icon-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/icon/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/icon-size.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"size\" data-chunk=\"icon-size\">\n  <h2 variant=\"section\">size</h2>\n  <p data-note>Named scale (<code>xs</code> 12px / <code>sm</code> 14px / <code>md</code> 16px / <code>lg</code> 20px / <code>xl</code> 32px / <code>2xl</code> 48px / <code>3xl</code> 64px / <code>4xl</code> 96px), <code>fill</code> for matching the parent box, or any free-form pixel / rem / em value (<code>\"48\"</code>, <code>\"3rem\"</code>). Overrides the inherited <code>--a-icon-size</code> from the universal <code>[size]</code> system on ancestors.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"xs\">\n      <icon-ui name=\"star\" size=\"xs\"></icon-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"sm\">\n      <icon-ui name=\"star\" size=\"sm\"></icon-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"md\">\n      <icon-ui name=\"star\" size=\"md\"></icon-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"lg\">\n      <icon-ui name=\"star\" size=\"lg\"></icon-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"xl\">\n      <icon-ui name=\"star\" size=\"xl\"></icon-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"2xl\">\n      <icon-ui name=\"star\" size=\"2xl\"></icon-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"3xl\">\n      <icon-ui name=\"star\" size=\"3xl\"></icon-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"4xl\">\n      <icon-ui name=\"star\" size=\"4xl\"></icon-ui>\n    </div>\n  </div>\n  <p data-note>Free-form values bypass the named scale — useful when you need a specific pixel target.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='size=\"40\"'>\n      <icon-ui name=\"heart\" size=\"40\"></icon-ui>\n    </div>\n    <div data-artifact-item data-artifact-label='size=\"3.5rem\"'>\n      <icon-ui name=\"heart\" size=\"3.5rem\"></icon-ui>\n    </div>\n    <div data-artifact-item data-artifact-label='size=\"80\"'>\n      <icon-ui name=\"heart\" size=\"80\"></icon-ui>\n    </div>\n  </div>\n  <p data-note><code>size=\"fill\"</code> matches the parent box — for hero placeholder slots, app-icon tiles, QR-code stand-ins, etc. The icon scales with its container.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"fill (in 96×96 box)\">\n      <div style=\"width: 96px; height: 96px; padding: var(--a-space-4); border: 1px dashed var(--a-border-subtle); border-radius: var(--a-radius-md); display: grid; place-items: center;\">\n        <icon-ui name=\"qr-code\" size=\"fill\"></icon-ui>\n      </div>\n    </div>\n    <div data-artifact-item data-artifact-label=\"fill (in 160×160 box)\">\n      <div style=\"width: 160px; height: 160px; padding: var(--a-space-4); border: 1px dashed var(--a-border-subtle); border-radius: var(--a-radius-md); display: grid; place-items: center;\">\n        <icon-ui name=\"device-mobile\" size=\"fill\"></icon-ui>\n      </div>\n    </div>\n  </div>\n</section>",
   "source": "site/pages/components/icon/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/image-alt.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"alt\" data-chunk=\"image-alt\">\n  <h2 variant=\"section\">alt</h2>\n  <p data-note>Alt text for accessibility. Announced by screen readers; displayed if the image fails to render.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='alt=\"Mountain range at sunset\"'>\n      <image-ui src=\"https://picsum.photos/seed/alt-mountain/200/150\" alt=\"Mountain range at sunset\" width=\"200\" height=\"150\" radius=\"md\"></image-ui>\n      </div>\n    <div data-artifact-item data-artifact-label='alt=\"Calm ocean waves\"'>\n      <image-ui src=\"https://picsum.photos/seed/alt-ocean/200/150\" alt=\"Calm ocean waves\" width=\"200\" height=\"150\" radius=\"md\"></image-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/image/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/image-default.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"default\" data-chunk=\"image-default\">\n  <h2 variant=\"section\">Default</h2>\n  <p data-note>Basic image with src and alt.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"default\">\n      <image-ui src=\"https://picsum.photos/seed/img-demo/300/200\" alt=\"Sample landscape\" width=\"300\" height=\"200\"></image-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/image/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/image-fallback.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"fallback\" data-chunk=\"image-fallback\">\n  <h2 variant=\"section\">Fallback</h2>\n  <p data-note>Broken src falls back to the fallback URL, or shows skeleton if no fallback.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"broken src (skeleton)\">\n      <image-ui src=\"https://broken.invalid/nope.jpg\" alt=\"Broken image\" width=\"200\" height=\"150\" radius=\"md\"></image-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"no src (skeleton)\">\n      <image-ui width=\"200\" height=\"150\" radius=\"md\"></image-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/image/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/image-fit.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"fit\" data-chunk=\"image-fit\">\n  <h2 variant=\"section\">fit</h2>\n  <p data-note>Controls object-fit mode. Defaults to \"cover\".</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"cover\">\n      <image-ui src=\"https://picsum.photos/seed/fit-cover/400/200\" alt=\"Cover\" width=\"200\" height=\"200\" fit=\"cover\" radius=\"md\"></image-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"contain\">\n      <image-ui src=\"https://picsum.photos/seed/fit-contain/400/200\" alt=\"Contain\" width=\"200\" height=\"200\" fit=\"contain\" radius=\"md\"></image-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"fill\">\n      <image-ui src=\"https://picsum.photos/seed/fit-fill/400/200\" alt=\"Fill\" width=\"200\" height=\"200\" fit=\"fill\" radius=\"md\"></image-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"none\">\n      <image-ui src=\"https://picsum.photos/seed/fit-none/400/200\" alt=\"None\" width=\"200\" height=\"200\" fit=\"none\" radius=\"md\"></image-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/image/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/image-height.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"height\" data-chunk=\"image-height\">\n  <h2 variant=\"section\">height</h2>\n  <p data-note>CSS height applied to the host element.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='height=\"80\"'>\n      <image-ui src=\"https://picsum.photos/seed/h-80/200/200\" alt=\"80px tall\" width=\"200\" height=\"80\" radius=\"md\"></image-ui>\n      </div>\n    <div data-artifact-item data-artifact-label='height=\"150\"'>\n      <image-ui src=\"https://picsum.photos/seed/h-150/200/200\" alt=\"150px tall\" width=\"200\" height=\"150\" radius=\"md\"></image-ui>\n      </div>\n    <div data-artifact-item data-artifact-label='height=\"240\"'>\n      <image-ui src=\"https://picsum.photos/seed/h-240/200/400\" alt=\"240px tall\" width=\"200\" height=\"240\" radius=\"md\"></image-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/image/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/image-radius.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"radius\" data-chunk=\"image-radius\">\n  <h2 variant=\"section\">radius</h2>\n  <p data-note>Controls border radius.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"sm\">\n      <image-ui src=\"https://picsum.photos/seed/r-sm/150/150\" alt=\"Small radius\" width=\"150\" height=\"150\" radius=\"sm\"></image-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"md\">\n      <image-ui src=\"https://picsum.photos/seed/r-md/150/150\" alt=\"Medium radius\" width=\"150\" height=\"150\" radius=\"md\"></image-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"lg\">\n      <image-ui src=\"https://picsum.photos/seed/r-lg/150/150\" alt=\"Large radius\" width=\"150\" height=\"150\" radius=\"lg\"></image-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"full\">\n      <image-ui src=\"https://picsum.photos/seed/r-full/150/150\" alt=\"Full radius\" width=\"150\" height=\"150\" radius=\"full\"></image-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/image/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/image-src.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"src\" data-chunk=\"image-src\">\n  <h2 variant=\"section\">src</h2>\n  <p data-note>Image URL. Skeleton is shown while loading.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"src A\">\n      <image-ui src=\"https://picsum.photos/seed/src-a/200/150\" alt=\"Source A\" width=\"200\" height=\"150\" radius=\"md\"></image-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"src B\">\n      <image-ui src=\"https://picsum.photos/seed/src-b/200/150\" alt=\"Source B\" width=\"200\" height=\"150\" radius=\"md\"></image-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/image/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/image-width.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"width\" data-chunk=\"image-width\">\n  <h2 variant=\"section\">width</h2>\n  <p data-note>CSS width applied to the host element.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='width=\"100\"'>\n      <image-ui src=\"https://picsum.photos/seed/w-100/200/100\" alt=\"100px wide\" width=\"100\" height=\"100\" radius=\"md\"></image-ui>\n      </div>\n    <div data-artifact-item data-artifact-label='width=\"200\"'>\n      <image-ui src=\"https://picsum.photos/seed/w-200/200/100\" alt=\"200px wide\" width=\"200\" height=\"100\" radius=\"md\"></image-ui>\n      </div>\n    <div data-artifact-item data-artifact-label='width=\"300\"'>\n      <image-ui src=\"https://picsum.photos/seed/w-300/400/100\" alt=\"300px wide\" width=\"300\" height=\"100\" radius=\"md\"></image-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/image/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/input-combinations.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"combinations\" data-chunk=\"input-combinations\">\n  <h2 variant=\"section\">Combinations</h2>\n  <p data-note>Common pairings in real-world forms.</p>\n  <div data-artifact-container>\n  <div data-artifact-item data-artifact-label=\"Website URL\">\n    <field-ui label=\"Website URL\">\n      <input-ui prefix=\"https://\" placeholder=\"example.com\" required></input-ui>\n    </field-ui>\n  </div>\n  <div data-artifact-item data-artifact-label=\"Currency\">\n    <field-ui label=\"Currency\">\n      <input-ui prefix=\"$\" suffix=\"USD\" placeholder=\"0.00\"></input-ui>\n    </field-ui>\n  </div>\n  <div data-artifact-item data-artifact-label=\"Locked Account\">\n    <field-ui label=\"Locked Account\">\n      <input-ui prefix=\"@\" value=\"admin\" disabled></input-ui>\n    </field-ui>\n  </div>\n  <div data-artifact-item data-artifact-label=\"API Endpoint\">\n    <field-ui label=\"API Endpoint\">\n      <input-ui prefix=\"/\" suffix=\".json\" value=\"users\" readonly></input-ui>\n    </field-ui>\n  </div>\n</div>\n</section>",
   "source": "site/pages/components/input/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/input-disabled.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"disabled\" data-chunk=\"input-disabled\">\n  <h2 variant=\"section\">disabled</h2>\n  <p data-note>Prevents interaction. The field appears muted.</p>\n  <div data-artifact-container>\n  <div data-artifact-item data-artifact-label=\"Disabled\">\n    <field-ui label=\"Disabled\">\n      <input-ui value=\"Cannot edit this\" disabled></input-ui>\n    </field-ui>\n  </div>\n  <div data-artifact-item data-artifact-label=\"Disabled Empty\">\n    <field-ui label=\"Disabled Empty\">\n      <input-ui placeholder=\"No input allowed\" disabled></input-ui>\n    </field-ui>\n  </div>\n</div>\n</section>",
   "source": "site/pages/components/input/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/input-edge-cases.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"edge-cases\" data-chunk=\"input-edge-cases\">\n  <h2 variant=\"section\">Edge Cases</h2>\n  <p data-note>Boundary conditions and unusual content.</p>\n  <div data-artifact-container>\n  <div data-artifact-item data-artifact-label=\"input\">\n    <input-ui></input-ui>\n  </div>\n  <div data-artifact-item data-artifact-label=\"Long Label That Should Wrap Properly\">\n    <field-ui label=\"Long Label That Should Wrap Properly\">\n      <input-ui placeholder=\"Placeholder text that is also quite long and may overflow the field area\"></input-ui>\n    </field-ui>\n  </div>\n  <div data-artifact-item data-artifact-label=\"Preloaded\">\n    <field-ui label=\"Preloaded\">\n      <input-ui value=\"Hello World\" prefix=\"$\" suffix=\"USD\"></input-ui>\n    </field-ui>\n  </div>\n</div>\n</section>",
   "source": "site/pages/components/input/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/input-error.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"error\" data-chunk=\"input-error\">\n  <h2 variant=\"section\">error</h2>\n  <p data-note>Shows a validation error message below the field with error styling.</p>\n  <div data-artifact-container>\n  <div data-artifact-item data-artifact-label=\"Email\">\n    <field-ui label=\"Email\">\n      <input-ui placeholder=\"you@example.com\" error=\"Please enter a valid email address\"></input-ui>\n    </field-ui>\n  </div>\n  <div data-artifact-item data-artifact-label=\"Username\">\n    <field-ui label=\"Username\">\n      <input-ui value=\"ab\" error=\"Must be at least 3 characters\"></input-ui>\n    </field-ui>\n  </div>\n  <div data-artifact-item data-artifact-label=\"Password\">\n    <field-ui label=\"Password\">\n      <input-ui placeholder=\"Enter password\" error=\"Password is required\" required></input-ui>\n    </field-ui>\n  </div>\n</div>\n</section>",
   "source": "site/pages/components/input/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/input-label.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"label\" data-chunk=\"input-label\">\n  <h2 variant=\"section\">label</h2>\n  <p data-note>Renders a dim leading caption inside the input chrome, between any <code>prefix</code> and the value. Wires <code>aria-labelledby</code> on the editable surface. For stacked label / hint / error compositions, wrap with <code>field-ui</code>.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"empty\">\n      <input-ui label=\"Label\" placeholder=\"Input value\"></input-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"filled\">\n      <input-ui label=\"Label\" value=\"Input value\"></input-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"empty + leading icon\">\n      <input-ui label=\"Label\" prefix=\"user\" placeholder=\"Input value\"></input-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"filled + leading icon\">\n      <input-ui label=\"Label\" prefix=\"user\" value=\"Input value\"></input-ui>\n    </div>\n  </div>\n</section>",
   "source": "site/pages/components/input/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/input-name.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"name\" data-chunk=\"input-name\">\n  <h2 variant=\"section\">name</h2>\n  <p data-note>Form field name. Used when the input participates in a <code>&lt;form&gt;</code> or <code>FormController</code>.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='name=\"email\"'>\n      <field-ui label=\"Email\">\n        <input-ui name=\"email\" type=\"email\" placeholder=\"you@example.com\"></input-ui>\n      </field-ui>\n      </div>\n    <div data-artifact-item data-artifact-label='name=\"username\"'>\n      <field-ui label=\"Username\">\n        <input-ui name=\"username\" placeholder=\"Pick a handle\"></input-ui>\n      </field-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/input/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/input-pattern.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"pattern\" data-chunk=\"input-pattern\">\n  <h2 variant=\"section\">pattern</h2>\n  <p data-note>Regex the value must match. Triggers validation UI when the field is invalid.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='pattern=\"[A-Za-z0-9]+\"'><field-ui label=\"Alphanumeric\">\n  <input-ui pattern=\"[A-Za-z0-9]+\" placeholder=\"letters or digits\"></input-ui>\n</field-ui></div>\n    <div data-artifact-item data-artifact-label='pattern=\"\\\\d{3}-\\\\d{4}\"'><field-ui label=\"Phone\">\n  <input-ui type=\"tel\" pattern=\"\\\\d{3}-\\\\d{4}\" placeholder=\"555-0100\"></input-ui>\n</field-ui></div>\n  </div>\n</section>",
   "source": "site/pages/components/input/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/input-placeholder.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"placeholder\" data-chunk=\"input-placeholder\">\n  <h2 variant=\"section\">placeholder</h2>\n  <p data-note>Ghost text shown when the field is empty.</p>\n  <div data-artifact-container>\n  <div data-artifact-item data-artifact-label=\"Search...\">\n    <input-ui placeholder=\"Search...\"></input-ui>\n  </div>\n  <div data-artifact-item data-artifact-label=\"Enter a value\">\n    <input-ui placeholder=\"Enter a value\"></input-ui>\n  </div>\n</div>\n</section>",
   "source": "site/pages/components/input/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/input-prefix-suffix.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"prefix-suffix\" data-chunk=\"input-prefix-suffix\">\n  <h2 variant=\"section\">prefix / suffix</h2>\n  <p data-note>Text or symbols rendered before or after the input value.</p>\n  <div data-artifact-container>\n  <div data-artifact-item data-artifact-label=\"Website\">\n    <field-ui label=\"Website\">\n      <input-ui prefix=\"https://\" placeholder=\"example.com\"></input-ui>\n    </field-ui>\n  </div>\n  <div data-artifact-item data-artifact-label=\"Weight\">\n    <field-ui label=\"Weight\">\n      <input-ui suffix=\"kg\" placeholder=\"0\"></input-ui>\n    </field-ui>\n  </div>\n  <div data-artifact-item data-artifact-label=\"Price\">\n    <field-ui label=\"Price\">\n      <input-ui prefix=\"$\" suffix=\"USD\" placeholder=\"0.00\"></input-ui>\n    </field-ui>\n  </div>\n</div>\n</section>",
   "source": "site/pages/components/input/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/input-prefix.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"prefix\" data-chunk=\"input-prefix\">\n  <h2 variant=\"section\">prefix</h2>\n  <p data-note>Leading icon name (Phosphor). Rendered inside the field, before the text.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='prefix=\"envelope\"'><field-ui label=\"Email\">\n  <input-ui prefix=\"envelope\" placeholder=\"you@example.com\"></input-ui>\n</field-ui></div>\n    <div data-artifact-item data-artifact-label='prefix=\"magnifying-glass\"'><field-ui label=\"Search\">\n  <input-ui prefix=\"magnifying-glass\" placeholder=\"Search...\"></input-ui>\n</field-ui></div>\n    <div data-artifact-item data-artifact-label='prefix=\"lock\"'><field-ui label=\"Password\">\n  <input-ui type=\"password\" prefix=\"lock\" value=\"hunter2\"></input-ui>\n</field-ui></div>\n  </div>\n</section>",
   "source": "site/pages/components/input/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/input-raw.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"raw\" data-chunk=\"input-raw\">\n  <h2 variant=\"section\">raw</h2>\n  <p data-note>Strips the chrome (border, padding, background). Useful as an inline edit-in-place control inside custom containers.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"raw\"><input-ui raw value=\"Inline editable\"></input-ui></div>\n    <div data-artifact-item data-artifact-label=\"(default)\"><input-ui value=\"With chrome (default)\"></input-ui></div>\n  </div>\n</section>",
   "source": "site/pages/components/input/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/input-readonly.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"readonly\" data-chunk=\"input-readonly\">\n  <h2 variant=\"section\">readonly</h2>\n  <p data-note>The field is focusable and selectable but not editable.</p>\n  <div data-artifact-container>\n  <div data-artifact-item data-artifact-label=\"API Key\">\n    <field-ui label=\"API Key\">\n      <input-ui value=\"sk-abc123def456\" readonly></input-ui>\n    </field-ui>\n  </div>\n</div>\n</section>",
   "source": "site/pages/components/input/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/input-required.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"required\" data-chunk=\"input-required\">\n  <h2 variant=\"section\">required</h2>\n  <p data-note>Marks the field as required for form validation.</p>\n  <div data-artifact-container>\n  <div data-artifact-item data-artifact-label=\"Required Field\">\n    <field-ui label=\"Required Field\">\n      <input-ui placeholder=\"Cannot be empty\" required></input-ui>\n    </field-ui>\n  </div>\n</div>\n</section>",
   "source": "site/pages/components/input/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/input-size.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"size\" data-chunk=\"input-size\">\n  <h2 variant=\"section\">size</h2>\n  <p data-note>Controls the field height and font size.</p>\n  <div data-artifact-container>\n  <div data-artifact-item data-artifact-label=\"Small\">\n    <field-ui label=\"Small\">\n      <input-ui size=\"sm\" placeholder=\"Enter a value\"></input-ui>\n    </field-ui>\n  </div>\n  <div data-artifact-item data-artifact-label=\"Medium (default)\">\n    <field-ui label=\"Medium (default)\">\n      <input-ui placeholder=\"Enter a value\"></input-ui>\n    </field-ui>\n  </div>\n  <div data-artifact-item data-artifact-label=\"Large\">\n    <field-ui label=\"Large\">\n      <input-ui size=\"lg\" placeholder=\"Enter a value\"></input-ui>\n    </field-ui>\n  </div>\n</div>\n</section>",
   "source": "site/pages/components/input/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/input-suffix.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"suffix\" data-chunk=\"input-suffix\">\n  <h2 variant=\"section\">suffix</h2>\n  <p data-note>Trailing icon name. Common for clear buttons, toggles, or units.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='suffix=\"dollar\"'><field-ui label=\"Amount\">\n  <input-ui suffix=\"dollar\" placeholder=\"0.00\"></input-ui>\n</field-ui></div>\n    <div data-artifact-item data-artifact-label=\"prefix + suffix\"><field-ui label=\"Username\">\n  <input-ui prefix=\"at\" suffix=\"check\" value=\"kimba\"></input-ui>\n</field-ui></div>\n  </div>\n</section>",
   "source": "site/pages/components/input/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/input-type.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"type\" data-chunk=\"input-type\">\n  <h2 variant=\"section\">type</h2>\n  <p data-note>HTML input type. Controls keyboard on mobile and native validation. Defaults to <code>text</code>.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"text\"><field-ui label=\"text\">\n  <input-ui type=\"text\" placeholder=\"any text\"></input-ui>\n</field-ui></div>\n    <div data-artifact-item data-artifact-label=\"email\"><field-ui label=\"email\">\n  <input-ui type=\"email\" placeholder=\"you@example.com\"></input-ui>\n</field-ui></div>\n    <div data-artifact-item data-artifact-label=\"password\"><field-ui label=\"password\">\n  <input-ui type=\"password\" value=\"hunter2\"></input-ui>\n</field-ui></div>\n    <div data-artifact-item data-artifact-label=\"number\"><field-ui label=\"number\">\n  <input-ui type=\"number\" value=\"42\"></input-ui>\n</field-ui></div>\n    <div data-artifact-item data-artifact-label=\"tel\"><field-ui label=\"tel\">\n  <input-ui type=\"tel\" placeholder=\"+1 555-0100\"></input-ui>\n</field-ui></div>\n    <div data-artifact-item data-artifact-label=\"url\"><field-ui label=\"url\">\n  <input-ui type=\"url\" placeholder=\"https://\"></input-ui>\n</field-ui></div>\n    <div data-artifact-item data-artifact-label=\"search\"><field-ui label=\"search\">\n  <input-ui type=\"search\" placeholder=\"Search...\"></input-ui>\n</field-ui></div>\n  </div>\n</section>",
   "source": "site/pages/components/input/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/input-value.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"value\" data-chunk=\"input-value\">\n  <h2 variant=\"section\">value</h2>\n  <p data-note>The current input value. Reactive — setting via property or attribute reflects immediately.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='value=\"...\"'>\n      <field-ui label=\"Prefilled\">\n        <input-ui value=\"Claude Sonnet 4.7\"></input-ui>\n      </field-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"(no value)\">\n      <field-ui label=\"Empty\">\n        <input-ui></input-ui>\n      </field-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/input/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/inspector-default.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"default\" data-chunk=\"inspector-default\">\n  <h2 variant=\"section\">default</h2>\n  <p data-note>Renders four tabs. The <code>Surface</code> pane accepts declarative JSON as children for instant setup without JS.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"simple object\">\n      <inspector-ui>{\n  \"name\": \"Alex\",\n  \"role\": \"admin\",\n  \"active\": true\n}</inspector-ui>\n    </div>\n  </div>\n</section>",
   "source": "site/pages/components/inspector/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/inspector-imperative.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"imperative\" data-chunk=\"inspector-imperative\">\n  <h2 variant=\"section\">imperative update</h2>\n  <p data-note>Call <code>inspector.update(schema, messages)</code> and <code>inspector.setHTML(html)</code> from your canvas or A2UI processor to keep the views in sync.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"wired up\">\n      <inspector-ui id=\"demo-wired\"></inspector-ui>\n    </div>\n  </div>\n</section>",
   "source": "site/pages/components/inspector/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/inspector-nested.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"nested\" data-chunk=\"inspector-nested\">\n  <h2 variant=\"section\">nested</h2>\n  <p data-note>The inline JSON text is used as the initial surface pane content — no JS wiring required.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"nested\">\n      <inspector-ui>{\n  \"user\":     { \"id\": 1, \"name\": \"Jane\" },\n  \"settings\": { \"theme\": \"dark\", \"notifications\": true },\n  \"tags\":     [\"admin\", \"beta\"]\n}</inspector-ui>\n    </div>\n  </div>\n</section>",
   "source": "site/pages/components/inspector/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/inspector-value.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"value\" data-chunk=\"inspector-value\">\n  <h2 variant=\"section\">value</h2>\n  <p data-note>Controls which tab opens first. Defaults to <code>surface</code>.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"catalog\">\n      <inspector-ui value=\"catalog\"></inspector-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"code\">\n      <inspector-ui value=\"code\" id=\"demo-code-tab\"></inspector-ui>\n    </div>\n  </div>\n</section>",
   "source": "site/pages/components/inspector/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/kanban-board.json

@@ -0,0 +1,15 @@
+{
+  "name": "kanban-board",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/patterns/kanban-board",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "kanban"
+  },
+  "html": "<section data-section data-property=\"kanban\" data-chunk=\"kanban-board\">\n  <h2 variant=\"section\">Kanban board — columns by status</h2>\n  <p data-note>Multi-column grid where each column is a status (To do · In progress · In review · Done). Cards drag horizontally between columns + vertically within. Column header shows count + collapse; per-card chrome shows the assignee avatar + tags.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"kanban board\">\n      <grid-ui columns=\"4\" gap=\"3\" style=\"max-width: 1080px;\">\n        <card-ui>\n          <header>\n            <span slot=\"heading\">To do</span>\n            <text-ui slot=\"description\" color=\"subtle\">3</text-ui>\n          </header>\n          <section bleed>\n            <col-ui gap=\"2\" padding=\"2\">\n              <card-ui raw style=\"padding: 0.75rem;\">\n                <text-ui strong>Audit kanban accessibility</text-ui>\n                <row-ui gap=\"2\" align=\"center\" style=\"margin-top: 0.5rem;\">\n                  <avatar-ui size=\"xs\" text=\"Sam Park\"></avatar-ui>\n                  <tag-ui size=\"sm\">P1</tag-ui>\n                </row-ui>\n              </card-ui>\n              <card-ui raw style=\"padding: 0.75rem;\">\n                <text-ui strong>Drag handle hit-target</text-ui>\n                <row-ui gap=\"2\" align=\"center\" style=\"margin-top: 0.5rem;\">\n                  <avatar-ui size=\"xs\" text=\"Avery Chen\"></avatar-ui>\n                  <tag-ui size=\"sm\">P2</tag-ui>\n                </row-ui>\n              </card-ui>\n              <card-ui raw style=\"padding: 0.75rem;\">\n                <text-ui strong>Empty-column copy</text-ui>\n                <row-ui gap=\"2\" align=\"center\" style=\"margin-top: 0.5rem;\">\n                  <avatar-ui size=\"xs\" text=\"Jordan Lee\"></avatar-ui>\n                  <tag-ui size=\"sm\">P2</tag-ui>\n                </row-ui>\n              </card-ui>\n            </col-ui>\n          </section>\n        </card-ui>\n        <card-ui>\n          <header>\n            <span slot=\"heading\">In progress</span>\n            <text-ui slot=\"description\" color=\"subtle\">2</text-ui>\n          </header>\n          <section bleed>\n            <col-ui gap=\"2\" padding=\"2\">\n              <card-ui raw style=\"padding: 0.75rem;\">\n                <text-ui strong>Auth flow rebuild</text-ui>\n                <row-ui gap=\"2\" align=\"center\" style=\"margin-top: 0.5rem;\">\n                  <avatar-ui size=\"xs\" text=\"Jordan Lee\"></avatar-ui>\n                  <tag-ui size=\"sm\" variant=\"warning\">P0</tag-ui>\n                </row-ui>\n              </card-ui>\n              <card-ui raw style=\"padding: 0.75rem;\">\n                <text-ui strong>OKLCH ramp lint rule</text-ui>\n                <row-ui gap=\"2\" align=\"center\" style=\"margin-top: 0.5rem;\">\n                  <avatar-ui size=\"xs\" text=\"Kim Granlund\"></avatar-ui>\n                  <tag-ui size=\"sm\">P1</tag-ui>\n                </row-ui>\n              </card-ui>\n            </col-ui>\n          </section>\n        </card-ui>\n        <card-ui>\n          <header>\n            <span slot=\"heading\">In review</span>\n            <text-ui slot=\"description\" color=\"subtle\">1</text-ui>\n          </header>\n          <section bleed>\n            <col-ui gap=\"2\" padding=\"2\">\n              <card-ui raw style=\"padding: 0.75rem;\">\n                <text-ui strong>v0.0.27 release notes</text-ui>\n                <row-ui gap=\"2\" align=\"center\" style=\"margin-top: 0.5rem;\">\n                  <avatar-ui size=\"xs\" text=\"Riley Tan\"></avatar-ui>\n                  <tag-ui size=\"sm\">P1</tag-ui>\n                </row-ui>\n              </card-ui>\n            </col-ui>\n          </section>\n        </card-ui>\n        <card-ui>\n          <header>\n            <span slot=\"heading\">Done</span>\n            <text-ui slot=\"description\" color=\"subtle\">8</text-ui>\n          </header>\n          <section bleed>\n            <col-ui gap=\"2\" padding=\"2\">\n              <card-ui raw style=\"padding: 0.75rem;\">\n                <text-ui strong color=\"subtle\"><s>Safari @scope sweep</s></text-ui>\n                <row-ui gap=\"2\" align=\"center\" style=\"margin-top: 0.5rem;\">\n                  <avatar-ui size=\"xs\" text=\"Kim Granlund\"></avatar-ui>\n                  <tag-ui size=\"sm\" variant=\"success\">Done</tag-ui>\n                </row-ui>\n              </card-ui>\n              <card-ui raw style=\"padding: 0.75rem;\">\n                <text-ui strong color=\"subtle\"><s>Toast top-layer channel</s></text-ui>\n                <row-ui gap=\"2\" align=\"center\" style=\"margin-top: 0.5rem;\">\n                  <avatar-ui size=\"xs\" text=\"Sam Park\"></avatar-ui>\n                  <tag-ui size=\"sm\" variant=\"success\">Done</tag-ui>\n                </row-ui>\n              </card-ui>\n            </col-ui>\n          </section>\n        </card-ui>\n      </grid-ui>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/patterns/kanban-board/index.html",
+  "captured_at": "2026-05-01T19:13:23.303Z"
+}

package/chunks/kbd-combinations.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"combinations\" data-chunk=\"kbd-combinations\">\n  <h2 variant=\"section\">Combinations</h2>\n  <p data-note>Key combinations shown as adjacent key caps.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"&#8984;K\">\n      <span style=\"display:inline-flex; gap:var(--a-space-1); align-items:center;\">\n        <kbd-ui>&#8984;</kbd-ui><kbd-ui>K</kbd-ui>\n      </span>\n      </div>\n    <div data-artifact-item data-artifact-label=\"Ctrl+C\">\n      <span style=\"display:inline-flex; gap:var(--a-space-1); align-items:center;\">\n        <kbd-ui>Ctrl</kbd-ui><kbd-ui>C</kbd-ui>\n      </span>\n      </div>\n    <div data-artifact-item data-artifact-label=\"Alt+F4\">\n      <span style=\"display:inline-flex; gap:var(--a-space-1); align-items:center;\">\n        <kbd-ui>Alt</kbd-ui><kbd-ui>F4</kbd-ui>\n      </span>\n      </div>\n    <div data-artifact-item data-artifact-label=\"&#8984;&#8679;P\">\n      <span style=\"display:inline-flex; gap:var(--a-space-1); align-items:center;\">\n        <kbd-ui>&#8984;</kbd-ui><kbd-ui>&#8679;</kbd-ui><kbd-ui>P</kbd-ui>\n      </span>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/kbd/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/kbd-in-context.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"in-context\" data-chunk=\"kbd-in-context\">\n  <h2 variant=\"section\">In-Context</h2>\n  <p data-note>Keyboard hints embedded in running text.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"paragraph context\">\n      <p style=\"margin:0;\">Press <kbd-ui>&#8984;</kbd-ui><kbd-ui>K</kbd-ui> to open the command palette, or <kbd-ui>&#9099;</kbd-ui> to close it.</p>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/kbd/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/kbd-single-keys.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"single-keys\" data-chunk=\"kbd-single-keys\">\n  <h2 variant=\"section\">Single Keys</h2>\n  <p data-note>Individual modifier and special keys.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"&#8984; Command\">\n      <kbd-ui>&#8984;</kbd-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"&#8679; Shift\">\n      <kbd-ui>&#8679;</kbd-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"&#8997; Option\">\n      <kbd-ui>&#8997;</kbd-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"&#8963; Control\">\n      <kbd-ui>&#8963;</kbd-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"&#9166; Return\">\n      <kbd-ui>&#9166;</kbd-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"&#9099; Escape\">\n      <kbd-ui>&#9099;</kbd-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/kbd/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/kbd-size.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"size\" data-chunk=\"kbd-size\">\n  <h2 variant=\"section\">size</h2>\n  <p data-note>Three sizes: sm, md (default), lg — matched to other widget controls.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"sm\">\n      <span style=\"display:inline-flex; gap:var(--a-space-1); align-items:center;\">\n        <kbd-ui size=\"sm\">&#8984;</kbd-ui><kbd-ui size=\"sm\">S</kbd-ui>\n      </span>\n      </div>\n    <div data-artifact-item data-artifact-label=\"md (default)\">\n      <span style=\"display:inline-flex; gap:var(--a-space-1); align-items:center;\">\n        <kbd-ui>&#8984;</kbd-ui><kbd-ui>S</kbd-ui>\n      </span>\n      </div>\n    <div data-artifact-item data-artifact-label=\"lg\">\n      <span style=\"display:inline-flex; gap:var(--a-space-1); align-items:center;\">\n        <kbd-ui size=\"lg\">&#8984;</kbd-ui><kbd-ui size=\"lg\">S</kbd-ui>\n      </span>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/kbd/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/layout-align.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"align\" data-chunk=\"layout-align\">\n  <h2 variant=\"section\">align</h2>\n  <p data-note>Cross-axis alignment. One of start, center, end, stretch, baseline (row only).</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"start\">\n      <row-ui align=\"start\" style=\"height:80px;\">\n        <block-ui>A</block-ui>\n        <block-ui>B</block-ui>\n      </row-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"center\">\n      <row-ui align=\"center\" style=\"height:80px;\">\n        <block-ui>A</block-ui>\n        <block-ui>B</block-ui>\n      </row-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"end\">\n      <row-ui align=\"end\" style=\"height:80px;\">\n        <block-ui>A</block-ui>\n        <block-ui>B</block-ui>\n      </row-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"stretch\">\n      <row-ui align=\"stretch\" style=\"height:80px;\">\n        <block-ui>A</block-ui>\n        <block-ui>B</block-ui>\n      </row-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/layout/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/layout-col.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"col\" data-chunk=\"layout-col\">\n  <h2 variant=\"section\">col-ui</h2>\n  <p data-note>Flex column. Children stack vertically with a consistent gap.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='gap=\"sm\"'>\n      <col-ui gap=\"sm\">\n        <block-ui>Item one</block-ui>\n        <block-ui>Item two</block-ui>\n        <block-ui>Item three</block-ui>\n      </col-ui>\n      </div>\n    <div data-artifact-item data-artifact-label='gap=\"md\"'>\n      <col-ui gap=\"md\">\n        <block-ui>Item one</block-ui>\n        <block-ui>Item two</block-ui>\n        <block-ui>Item three</block-ui>\n      </col-ui>\n      </div>\n    <div data-artifact-item data-artifact-label='gap=\"lg\"'>\n      <col-ui gap=\"lg\">\n        <block-ui>Item one</block-ui>\n        <block-ui>Item two</block-ui>\n        <block-ui>Item three</block-ui>\n      </col-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/layout/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/layout-combo.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-combo data-chunk=\"layout-combo\">\n  <h2 variant=\"section\">Combinations</h2>\n  <p data-note>Nested layouts composing a typical card-style region.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"col + row + grid\">\n      <col-ui gap=\"md\" style=\"max-width:320px;\">\n        <row-ui justify=\"space-between\">\n          <block-ui>Title</block-ui>\n          <block-ui>Action</block-ui>\n        </row-ui>\n        <grid-ui columns=\"2\" gap=\"sm\">\n          <block-ui>Stat A</block-ui>\n          <block-ui>Stat B</block-ui>\n          <block-ui>Stat C</block-ui>\n          <block-ui>Stat D</block-ui>\n        </grid-ui>\n      </col-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/layout/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/layout-edge.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-edge data-chunk=\"layout-edge\">\n  <h2 variant=\"section\">Edge Cases</h2>\n  <p data-note>Boundary conditions.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"empty\">\n      <col-ui></col-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"single child\">\n      <row-ui>\n        <block-ui>Only child</block-ui>\n      </row-ui>\n      </div>\n    <div data-artifact-item data-artifact-label='gap=\"none\"'>\n      <grid-ui columns=\"1\" gap=\"none\">\n        <block-ui>No gap</block-ui>\n        <block-ui>No gap</block-ui>\n      </grid-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/layout/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }