@adia-ai/a2ui-corpus 0.0.6 → 0.0.9

package/chunks/swiper-interval.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"interval\" data-chunk=\"swiper-interval\">\n  <h2 variant=\"section\">interval</h2>\n  <p data-note>Auto-advance delay in milliseconds. When set, the swiper cycles through slides automatically.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"interval=2000\">\n      <swiper-ui interval=\"2000\" style=\"width:240px;\">\n        <div>Slide A</div><div>Slide B</div><div>Slide C</div>\n      </swiper-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"interval=5000\">\n      <swiper-ui interval=\"5000\" style=\"width:240px;\">\n        <div>Slow 1</div><div>Slow 2</div><div>Slow 3</div>\n      </swiper-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/swiper/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/swiper-loop.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"loop\" data-chunk=\"swiper-loop\">\n  <h2 variant=\"section\">loop</h2>\n  <p data-note>When enabled, navigating past the last slide wraps to the first (and vice versa).</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"loop enabled\">\n      <swiper-ui loop gap=\"4\" aria-label=\"Portfolio\">\n        <card-ui variant=\"outlined\">\n          <img src=\"https://picsum.photos/seed/port1/600/280\" alt=\"Project\" style=\"width:100%; height:200px; object-fit:cover;\">\n          <section>\n            <col-ui gap=\"1\">\n              <text-ui strong>Brand Redesign</text-ui>\n              <text-ui color=\"subtle\">Visual identity overhaul for a SaaS startup. New logo, color system, and component library.</text-ui>\n            </col-ui>\n          </section>\n          <footer>\n            <row-ui gap=\"2\">\n              <badge-ui>Branding</badge-ui>\n              <badge-ui>Design System</badge-ui>\n            </row-ui>\n          </footer>\n        </card-ui>\n        <card-ui variant=\"outlined\">\n          <img src=\"https://picsum.photos/seed/port2/600/280\" alt=\"Project\" style=\"width:100%; height:200px; object-fit:cover;\">\n          <section>\n            <col-ui gap=\"1\">\n              <text-ui strong>E-Commerce Platform</text-ui>\n              <text-ui color=\"subtle\">Full-stack marketplace with real-time inventory, payment processing, and admin dashboard.</text-ui>\n            </col-ui>\n          </section>\n          <footer>\n            <row-ui gap=\"2\">\n              <badge-ui>Full Stack</badge-ui>\n              <badge-ui>React</badge-ui>\n            </row-ui>\n          </footer>\n        </card-ui>\n        <card-ui variant=\"outlined\">\n          <img src=\"https://picsum.photos/seed/port3/600/280\" alt=\"Project\" style=\"width:100%; height:200px; object-fit:cover;\">\n          <section>\n            <col-ui gap=\"1\">\n              <text-ui strong>Mobile Banking App</text-ui>\n              <text-ui color=\"subtle\">Cross-platform fintech app with biometric auth, budgeting tools, and instant transfers.</text-ui>\n            </col-ui>\n          </section>\n          <footer>\n            <row-ui gap=\"2\">\n              <badge-ui>Mobile</badge-ui>\n              <badge-ui>Fintech</badge-ui>\n            </row-ui>\n          </footer>\n        </card-ui>\n      </swiper-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/swiper/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/swiper-peek.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"peek\" data-chunk=\"swiper-peek\">\n  <h2 variant=\"section\">peek</h2>\n  <p data-note>Shows a sliver of adjacent slides to hint there's more content.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"peek + 2-up\">\n      <swiper-ui slides-per-view=\"2\" peek gap=\"4\" aria-label=\"Peek demo\">\n        <card-ui>\n          <section>\n            <col-ui gap=\"2\" align=\"center\">\n              <avatar-ui text=\"Jordan Lee\" size=\"lg\"></avatar-ui>\n              <text-ui strong>Jordan Lee</text-ui>\n              <text-ui color=\"subtle\">Engineer</text-ui>\n            </col-ui>\n          </section>\n        </card-ui>\n        <card-ui>\n          <section>\n            <col-ui gap=\"2\" align=\"center\">\n              <avatar-ui text=\"Emma Davis\" size=\"lg\"></avatar-ui>\n              <text-ui strong>Emma Davis</text-ui>\n              <text-ui color=\"subtle\">Designer</text-ui>\n            </col-ui>\n          </section>\n        </card-ui>\n        <card-ui>\n          <section>\n            <col-ui gap=\"2\" align=\"center\">\n              <avatar-ui text=\"Tom Wright\" size=\"lg\"></avatar-ui>\n              <text-ui strong>Tom Wright</text-ui>\n              <text-ui color=\"subtle\">DevOps</text-ui>\n            </col-ui>\n          </section>\n        </card-ui>\n        <card-ui>\n          <section>\n            <col-ui gap=\"2\" align=\"center\">\n              <avatar-ui text=\"Lisa Chang\" size=\"lg\"></avatar-ui>\n              <text-ui strong>Lisa Chang</text-ui>\n              <text-ui color=\"subtle\">Staff Eng</text-ui>\n            </col-ui>\n          </section>\n        </card-ui>\n      </swiper-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/swiper/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/swiper-slides-per-view.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"slides-per-view\" data-chunk=\"swiper-slides-per-view\">\n  <h2 variant=\"section\">slides-per-view</h2>\n  <p data-note>Show multiple slides at once. Set <code>slides-per-view=\"2\"</code>, <code>\"3\"</code>, or <code>\"4\"</code>.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='slides-per-view=\"3\"'>\n      <swiper-ui slides-per-view=\"3\" gap=\"4\" aria-label=\"Feature cards\">\n        <card-ui variant=\"outlined\">\n          <section>\n            <col-ui gap=\"2\">\n              <icon-ui name=\"lightning\" color=\"primary\"></icon-ui>\n              <text-ui strong>Fast</text-ui>\n              <text-ui color=\"subtle\">Sub-ms renders</text-ui>\n            </col-ui>\n          </section>\n        </card-ui>\n        <card-ui variant=\"outlined\">\n          <section>\n            <col-ui gap=\"2\">\n              <icon-ui name=\"paint-brush\" color=\"accent\"></icon-ui>\n              <text-ui strong>Themeable</text-ui>\n              <text-ui color=\"subtle\">Design tokens</text-ui>\n            </col-ui>\n          </section>\n        </card-ui>\n        <card-ui variant=\"outlined\">\n          <section>\n            <col-ui gap=\"2\">\n              <icon-ui name=\"wheelchair\" color=\"success\"></icon-ui>\n              <text-ui strong>Accessible</text-ui>\n              <text-ui color=\"subtle\">ARIA built-in</text-ui>\n            </col-ui>\n          </section>\n        </card-ui>\n        <card-ui variant=\"outlined\">\n          <section>\n            <col-ui gap=\"2\">\n              <icon-ui name=\"code\" color=\"warning\"></icon-ui>\n              <text-ui strong>Simple</text-ui>\n              <text-ui color=\"subtle\">Light DOM</text-ui>\n            </col-ui>\n          </section>\n        </card-ui>\n        <card-ui variant=\"outlined\">\n          <section>\n            <col-ui gap=\"2\">\n              <icon-ui name=\"devices\" color=\"danger\"></icon-ui>\n              <text-ui strong>Responsive</text-ui>\n              <text-ui color=\"subtle\">Container queries</text-ui>\n            </col-ui>\n          </section>\n        </card-ui>\n      </swiper-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/swiper/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/swiper-snap.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"snap\" data-chunk=\"swiper-snap\">\n  <h2 variant=\"section\">snap</h2>\n  <p data-note>Controls scroll-snap alignment. Options: <code>start</code> (default), <code>center</code>, <code>end</code>.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='snap=\"center\"'>\n      <swiper-ui slides-per-view=\"2\" snap=\"center\" gap=\"4\" aria-label=\"Product cards\">\n        <card-ui variant=\"outlined\">\n          <img src=\"https://picsum.photos/seed/prod1/400/200\" alt=\"Product\" style=\"width:100%; height:140px; object-fit:cover;\">\n          <section>\n            <col-ui gap=\"1\">\n              <text-ui strong>Wireless Headphones</text-ui>\n              <text-ui color=\"subtle\">Noise-cancelling, 30h battery</text-ui>\n              <text-ui weight=\"bold\" color=\"primary\">$149</text-ui>\n            </col-ui>\n          </section>\n        </card-ui>\n        <card-ui variant=\"outlined\">\n          <img src=\"https://picsum.photos/seed/prod2/400/200\" alt=\"Product\" style=\"width:100%; height:140px; object-fit:cover;\">\n          <section>\n            <col-ui gap=\"1\">\n              <text-ui strong>Mechanical Keyboard</text-ui>\n              <text-ui color=\"subtle\">Cherry MX, RGB backlit</text-ui>\n              <text-ui weight=\"bold\" color=\"primary\">$89</text-ui>\n            </col-ui>\n          </section>\n        </card-ui>\n        <card-ui variant=\"outlined\">\n          <img src=\"https://picsum.photos/seed/prod3/400/200\" alt=\"Product\" style=\"width:100%; height:140px; object-fit:cover;\">\n          <section>\n            <col-ui gap=\"1\">\n              <text-ui strong>Ultrawide Monitor</text-ui>\n              <text-ui color=\"subtle\">34\" curved, 144Hz</text-ui>\n              <text-ui weight=\"bold\" color=\"primary\">$499</text-ui>\n            </col-ui>\n          </section>\n        </card-ui>\n        <card-ui variant=\"outlined\">\n          <img src=\"https://picsum.photos/seed/prod4/400/200\" alt=\"Product\" style=\"width:100%; height:140px; object-fit:cover;\">\n          <section>\n            <col-ui gap=\"1\">\n              <text-ui strong>Standing Desk</text-ui>\n              <text-ui color=\"subtle\">Electric, memory presets</text-ui>\n              <text-ui weight=\"bold\" color=\"primary\">$349</text-ui>\n            </col-ui>\n          </section>\n        </card-ui>\n      </swiper-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/swiper/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/switch-checked.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"checked\" data-chunk=\"switch-checked\">\n  <h2 variant=\"section\">checked</h2>\n  <p data-note>Controls the on/off state. Click or press Space/Enter to toggle.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"off\">\n      <field-ui label=\"Off\" inline>\n        <switch-ui></switch-ui>\n      </field-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"on\">\n      <field-ui label=\"On\" inline>\n        <switch-ui checked></switch-ui>\n      </field-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/switch/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/switch-combinations.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"combinations\" data-chunk=\"switch-combinations\">\n  <h2 variant=\"section\">Combinations</h2>\n  <p data-note>Common switch group patterns in settings panels.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"settings panel\">\n      <div style=\"display:flex; flex-direction:column; gap:var(--a-space-3);\">\n        <field-ui label=\"Dark mode\" inline>\n          <switch-ui checked></switch-ui>\n        </field-ui>\n        <field-ui label=\"Notifications\" inline>\n          <switch-ui checked></switch-ui>\n        </field-ui>\n        <field-ui label=\"Sound effects\" inline>\n          <switch-ui></switch-ui>\n        </field-ui>\n        <field-ui label=\"Analytics\" inline>\n          <switch-ui disabled></switch-ui>\n        </field-ui>\n        <field-ui label=\"Beta features\" inline>\n          <switch-ui checked disabled></switch-ui>\n        </field-ui>\n      </div>\n      </div>\n    <div data-artifact-item data-artifact-label=\"connectivity\">\n      <div style=\"display:flex; flex-direction:column; gap:var(--a-space-3);\">\n        <field-ui label=\"Wi-Fi\" inline>\n          <switch-ui checked></switch-ui>\n        </field-ui>\n        <field-ui label=\"Bluetooth\" inline>\n          <switch-ui></switch-ui>\n        </field-ui>\n        <field-ui label=\"Airplane Mode\" inline>\n          <switch-ui></switch-ui>\n        </field-ui>\n        <field-ui label=\"VPN\" inline>\n          <switch-ui checked></switch-ui>\n        </field-ui>\n      </div>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/switch/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/switch-disabled.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"disabled\" data-chunk=\"switch-disabled\">\n  <h2 variant=\"section\">disabled</h2>\n  <p data-note>Prevents interaction and applies muted styling.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"disabled off\">\n      <field-ui label=\"Disabled Off\" inline>\n        <switch-ui disabled></switch-ui>\n      </field-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"disabled on\">\n      <field-ui label=\"Disabled On\" inline>\n        <switch-ui checked disabled></switch-ui>\n      </field-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/switch/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/switch-edge-cases.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"edge-cases\" data-chunk=\"switch-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 props)\">\n      <switch-ui></switch-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"checked, no label\">\n      <switch-ui checked></switch-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/switch/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/switch-label.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"label\" data-chunk=\"switch-label\">\n  <h2 variant=\"section\">label</h2>\n  <p data-note>Text label displayed alongside the switch.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"with label\">\n      <field-ui label=\"Email notifications\" inline>\n        <switch-ui checked></switch-ui>\n      </field-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"no label\">\n      <switch-ui></switch-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"long label\">\n      <field-ui label=\"Enable automatic synchronization of all connected devices\" inline>\n        <switch-ui></switch-ui>\n      </field-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/switch/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/switch-size.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"size\" data-chunk=\"switch-size\">\n  <h2 variant=\"section\">size</h2>\n  <p data-note>Three sizes available via the size attribute: sm, md (default), lg.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"sm\">\n      <field-ui label=\"Small\" inline>\n        <switch-ui size=\"sm\" checked></switch-ui>\n      </field-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"md (default)\">\n      <field-ui label=\"Medium\" inline>\n        <switch-ui checked></switch-ui>\n      </field-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"lg\">\n      <field-ui label=\"Large\" inline>\n        <switch-ui size=\"lg\" checked></switch-ui>\n      </field-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/switch/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/table-cell-types.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"cell-types\" data-chunk=\"table-cell-types\">\n  <h2 variant=\"section\">Cell Types</h2>\n  <p data-note>Set via <code>type</code> in column definitions. Some types accept additional config in <code>meta</code>.</p>\n  <table>\n    <thead><tr><th>Type</th><th>Description</th></tr></thead>\n    <tbody>\n      <tr><td>text</td><td>Plain text (default).</td></tr>\n      <tr><td>number</td><td>Formatted number, right-aligned.</td></tr>\n      <tr><td>currency</td><td>Currency-formatted number.</td></tr>\n      <tr><td>date</td><td>Formatted date string.</td></tr>\n      <tr><td>badge</td><td>Colored badge. Use <code>meta.variants</code> to map values to colors.</td></tr>\n      <tr><td>avatar</td><td>Avatar circle with initials or image.</td></tr>\n      <tr><td>link</td><td>Clickable link.</td></tr>\n      <tr><td>progress</td><td>Progress bar (0–100).</td></tr>\n      <tr><td>boolean</td><td>Check/cross icon.</td></tr>\n      <tr><td>actions</td><td>Action buttons. Configure via <code>meta.actions</code>.</td></tr>\n      <tr><td>image</td><td>Thumbnail image.</td></tr>\n      <tr><td>custom</td><td>Custom render function.</td></tr>\n    </tbody>\n  </table>\n</section>",
   "source": "site/pages/components/table/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/table-data-stream.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"data-stream\" data-chunk=\"table-data-stream\">\n  <h2 variant=\"section\">Data stream (<code>data-stream-*</code>)</h2>\n  <p data-note>\n    Like every component with a settable <code>.data</code>, table-ui\n    picks up the universal <code>data-stream-*</code> trait without\n    any per-component opt-in. Set <code>data-stream-src</code> and the\n    table populates from the response on connect (HTTP one-shot,\n    polling, SSE, or WebSocket — see the chart-ui demo's full\n    attribute table). Below: a table fed from\n    <code>/site/mock/users.json</code> with no setup.js wiring.\n  </p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='table-ui[data-stream-src=\"/site/mock/users.json\"]' style=\"flex:1 1 100%;\">\n      <table-ui sortable striped data-stream-src=\"/site/mock/users.json\"></table-ui>\n    </div>\n  </div>\n</section>",
   "source": "site/pages/components/table/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/table-density.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"density\" data-chunk=\"table-density\">\n  <h2 variant=\"section\">density</h2>\n  <p data-note>Row height. Defaults to <code>standard</code>.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"compact\">\n      <table-ui id=\"api-density-compact\" density=\"compact\"></table-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"standard\">\n      <table-ui id=\"api-density-standard\" density=\"standard\"></table-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"comfortable\">\n      <table-ui id=\"api-density-comfortable\" density=\"comfortable\"></table-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/table/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/table-expandable.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"expandable\" data-chunk=\"table-expandable\">\n  <h2 variant=\"section\">expandable</h2>\n  <p data-note>Add a caret column; rows can expand to reveal nested content.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"expandable\">\n      <table-ui id=\"api-expandable\" expandable></table-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/table/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/table-inline-edit-row.json

@@ -0,0 +1,15 @@
+{
+  "name": "table-inline-edit-row",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/patterns/data-tables-inline-edit-and-tree",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "inline-edit-row"
+  },
+  "html": "<section data-section data-property=\"inline-edit-row\" data-chunk=\"table-inline-edit-row\">\n  <h2 variant=\"section\">Inline-edit — single editing row</h2>\n  <p data-note>The most common shape: a normal table where one row at a time enters edit mode (double-click or pencil button). Cells become `&lt;input-ui&gt;` / `&lt;select-ui&gt;` / etc.; Save / Cancel actions appear in the row's trailing column.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"single editing row\">\n      <card-ui style=\"max-width: 880px;\">\n        <header>\n          <span slot=\"heading\" variant=\"section\">Pricing matrix</span>\n          <text-ui slot=\"description\" color=\"subtle\">12 rows · 1 unsaved</text-ui>\n          <button-ui slot=\"action\" text=\"Add row\" variant=\"ghost\" size=\"sm\" icon-leading=\"plus\"></button-ui>\n        </header>\n        <section bleed>\n          <list-ui divider contained>\n            <list-item-ui>\n              <row-ui gap=\"3\" align=\"center\">\n                <text-ui strong style=\"min-width: 8rem;\">Starter</text-ui>\n                <text-ui color=\"subtle\">$0 / month</text-ui>\n                <text-ui color=\"subtle\" grow>5 seats · 1k requests</text-ui>\n                <button-ui icon=\"pencil-simple\" variant=\"ghost\" size=\"sm\" aria-label=\"Edit\"></button-ui>\n              </row-ui>\n            </list-item-ui>\n            <list-item-ui>\n              <row-ui gap=\"3\" align=\"center\" style=\"background: var(--a-bg-subtle);\">\n                <text-ui strong style=\"min-width: 8rem;\">Pro</text-ui>\n                <field-ui style=\"min-width: 10rem;\">\n                  <input-ui name=\"pro_price\" value=\"$29\" size=\"sm\"></input-ui>\n                </field-ui>\n                <field-ui grow>\n                  <input-ui name=\"pro_features\" value=\"50 seats · 100k requests\" size=\"sm\"></input-ui>\n                </field-ui>\n                <button-ui text=\"Save\" variant=\"primary\" size=\"sm\"></button-ui>\n                <button-ui text=\"Cancel\" variant=\"ghost\" size=\"sm\"></button-ui>\n              </row-ui>\n            </list-item-ui>\n            <list-item-ui>\n              <row-ui gap=\"3\" align=\"center\">\n                <text-ui strong style=\"min-width: 8rem;\">Enterprise</text-ui>\n                <text-ui color=\"subtle\">Custom</text-ui>\n                <text-ui color=\"subtle\" grow>Unlimited · SSO · SLA</text-ui>\n                <button-ui icon=\"pencil-simple\" variant=\"ghost\" size=\"sm\" aria-label=\"Edit\"></button-ui>\n              </row-ui>\n            </list-item-ui>\n          </list-ui>\n        </section>\n      </card-ui>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/patterns/data-tables-inline-edit-and-tree/index.html",
+  "captured_at": "2026-05-01T19:13:23.303Z"
+}

package/chunks/table-loading.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"loading\" data-chunk=\"table-loading\">\n  <h2 variant=\"section\">loading</h2>\n  <p data-note>Overlay a loading state on top of the current rows.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"loading\">\n      <table-ui id=\"api-loading\" loading></table-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/table/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/table-paginate.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"paginate\" data-chunk=\"table-paginate\">\n  <h2 variant=\"section\">paginate</h2>\n  <p data-note>Rows per page. <code>0</code> disables pagination (default).</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='paginate=\"3\"'>\n      <table-ui id=\"api-paginate\" paginate=\"3\"></table-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/table/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/table-raw.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"raw\" data-chunk=\"table-raw\">\n  <h2 variant=\"section\">raw</h2>\n  <p data-note>Strip the chrome (border, header background). Useful when embedding inside cards that already provide surface styling.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"raw\">\n      <table-ui id=\"api-raw\" raw></table-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/table/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/table-search.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"search\" data-chunk=\"table-search\">\n  <h2 variant=\"section\">search</h2>\n  <p data-note>Global text filter applied across all cells.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='search=\"engineer\"'>\n      <table-ui id=\"api-search\" search=\"engineer\"></table-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/table/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/table-selectable.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"selectable\" data-chunk=\"table-selectable\">\n  <h2 variant=\"section\">selectable</h2>\n  <p data-note>Render a leading checkbox column for row selection.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"selectable\">\n      <table-ui id=\"api-selectable\" selectable></table-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/table/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/table-sortable.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"sortable\" data-chunk=\"table-sortable\">\n  <h2 variant=\"section\">sortable</h2>\n  <p data-note>Enable column sorting. Click a header to cycle asc / desc / unsorted.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"sortable\">\n      <table-ui id=\"api-sortable\" sortable></table-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/table/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/table-spreadsheet-cells.json

@@ -0,0 +1,15 @@
+{
+  "name": "table-spreadsheet-cells",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/patterns/data-tables-inline-edit-and-tree",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "spreadsheet-cells"
+  },
+  "html": "<section data-section data-property=\"spreadsheet-cells\" data-chunk=\"table-spreadsheet-cells\">\n  <h2 variant=\"section\">Spreadsheet — every cell editable</h2>\n  <p data-note>The full Excel-style shape: every cell renders an `&lt;input-ui&gt;` (or typed equivalent — number, select, date). Tab moves to the next cell, Enter commits + moves down. Saves are auto-debounced; the dirty state surfaces as a per-row tag.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"spreadsheet cells\">\n      <card-ui style=\"max-width: 880px;\">\n        <header>\n          <span slot=\"heading\" variant=\"section\">Inventory — Q4 forecast</span>\n          <text-ui slot=\"description\" color=\"subtle\">Auto-saving · 3 cells dirty</text-ui>\n          <row-ui slot=\"action\" gap=\"2\">\n            <button-ui text=\"Undo\" variant=\"ghost\" size=\"sm\" icon-leading=\"arrow-counter-clockwise\"></button-ui>\n            <button-ui text=\"Save now\" variant=\"primary\" size=\"sm\"></button-ui>\n          </row-ui>\n        </header>\n        <section bleed>\n          <list-ui divider contained>\n            <list-item-ui>\n              <row-ui gap=\"2\" align=\"center\">\n                <text-ui strong style=\"min-width: 10rem;\">Widget A</text-ui>\n                <field-ui style=\"min-width: 6rem;\"><input-ui type=\"number\" value=\"124\" size=\"sm\"></input-ui></field-ui>\n                <field-ui style=\"min-width: 6rem;\"><input-ui type=\"number\" value=\"98\" size=\"sm\"></input-ui></field-ui>\n                <field-ui grow><input-ui type=\"number\" value=\"156\" size=\"sm\"></input-ui></field-ui>\n                <tag-ui size=\"sm\" variant=\"muted\">clean</tag-ui>\n              </row-ui>\n            </list-item-ui>\n            <list-item-ui>\n              <row-ui gap=\"2\" align=\"center\">\n                <text-ui strong style=\"min-width: 10rem;\">Widget B</text-ui>\n                <field-ui style=\"min-width: 6rem;\"><input-ui type=\"number\" value=\"42\" size=\"sm\"></input-ui></field-ui>\n                <field-ui style=\"min-width: 6rem;\"><input-ui type=\"number\" value=\"51\" size=\"sm\"></input-ui></field-ui>\n                <field-ui grow><input-ui type=\"number\" value=\"78\" size=\"sm\"></input-ui></field-ui>\n                <tag-ui size=\"sm\" variant=\"warning\">dirty</tag-ui>\n              </row-ui>\n            </list-item-ui>\n            <list-item-ui>\n              <row-ui gap=\"2\" align=\"center\">\n                <text-ui strong style=\"min-width: 10rem;\">Widget C</text-ui>\n                <field-ui style=\"min-width: 6rem;\"><input-ui type=\"number\" value=\"0\" size=\"sm\"></input-ui></field-ui>\n                <field-ui style=\"min-width: 6rem;\"><input-ui type=\"number\" value=\"0\" size=\"sm\"></input-ui></field-ui>\n                <field-ui grow><input-ui type=\"number\" value=\"320\" size=\"sm\"></input-ui></field-ui>\n                <tag-ui size=\"sm\" variant=\"warning\">dirty</tag-ui>\n              </row-ui>\n            </list-item-ui>\n            <list-item-ui>\n              <row-ui gap=\"2\" align=\"center\">\n                <text-ui strong style=\"min-width: 10rem;\">Widget D</text-ui>\n                <field-ui style=\"min-width: 6rem;\"><input-ui type=\"number\" value=\"200\" size=\"sm\"></input-ui></field-ui>\n                <field-ui style=\"min-width: 6rem;\"><input-ui type=\"number\" value=\"245\" size=\"sm\"></input-ui></field-ui>\n                <field-ui grow><input-ui type=\"number\" value=\"280\" size=\"sm\"></input-ui></field-ui>\n                <tag-ui size=\"sm\" variant=\"muted\">clean</tag-ui>\n              </row-ui>\n            </list-item-ui>\n          </list-ui>\n        </section>\n      </card-ui>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/patterns/data-tables-inline-edit-and-tree/index.html",
+  "captured_at": "2026-05-01T19:13:23.303Z"
+}

package/chunks/table-striped.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"striped\" data-chunk=\"table-striped\">\n  <h2 variant=\"section\">striped</h2>\n  <p data-note>Alternating row backgrounds for easier scanning of wide tables.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"striped\">\n      <table-ui id=\"api-striped\" striped></table-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/table/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/tabs-basic.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"basic\" data-chunk=\"tabs-basic\">\n  <h2 variant=\"section\">basic</h2>\n  <p data-note>A simple 3-tab panel. The value attribute selects which tab is active.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"3 tabs\">\n      <tabs-ui value=\"overview\">\n        <tab-ui value=\"overview\" text=\"Overview\">\n          <p>This is the overview panel. It provides a high-level summary of the feature.</p>\n        </tab-ui>\n        <tab-ui value=\"details\" text=\"Details\">\n          <p>This panel contains detailed specifications and technical information.</p>\n        </tab-ui>\n        <tab-ui value=\"changelog\" text=\"Changelog\">\n          <p>Version history and recent changes are listed here.</p>\n        </tab-ui>\n      </tabs-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/tabs/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/tabs-combinations.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"combinations\" data-chunk=\"tabs-combinations\">\n  <h2 variant=\"section\">Combinations</h2>\n  <p data-note>Tabs with rich content inside each panel.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"settings page\">\n      <tabs-ui value=\"account\">\n        <tab-ui value=\"account\" text=\"Account\" icon=\"user\">\n          <div style=\"display:flex; flex-direction:column; gap:var(--a-space-3); padding:var(--a-space-3) 0;\">\n            <field-ui label=\"Display Name\">\n              <input-ui placeholder=\"Enter name\"></input-ui>\n            </field-ui>\n            <field-ui label=\"Email\">\n              <input-ui placeholder=\"you@example.com\"></input-ui>\n            </field-ui>\n            <button-ui text=\"Save Changes\" variant=\"primary\"></button-ui>\n          </div>\n        </tab-ui>\n        <tab-ui value=\"notifications\" text=\"Notifications\" icon=\"bell\">\n          <div style=\"display:flex; flex-direction:column; gap:var(--a-space-2); padding:var(--a-space-3) 0;\">\n            <field-ui label=\"Email notifications\" inline>\n              <switch-ui checked></switch-ui>\n            </field-ui>\n            <field-ui label=\"Push notifications\" inline>\n              <switch-ui></switch-ui>\n            </field-ui>\n            <field-ui label=\"Weekly digest\" inline>\n              <switch-ui checked></switch-ui>\n            </field-ui>\n          </div>\n        </tab-ui>\n        <tab-ui value=\"danger\" text=\"Danger Zone\" icon=\"warning\">\n          <div style=\"padding:var(--a-space-3) 0;\">\n            <p style=\"margin-bottom:var(--a-space-3);\">Permanently delete your account and all data.</p>\n            <button-ui text=\"Delete Account\" color=\"danger\"></button-ui>\n          </div>\n        </tab-ui>\n      </tabs-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/tabs/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/tabs-disabled.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"disabled\" data-chunk=\"tabs-disabled\">\n  <h2 variant=\"section\">disabled tab</h2>\n  <p data-note>Individual tabs can be disabled. They remain visible but cannot be selected.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"disabled tab\">\n      <tabs-ui value=\"active\">\n        <tab-ui value=\"active\" text=\"Active\">\n          <p>This tab is active and selectable.</p>\n        </tab-ui>\n        <tab-ui value=\"also-active\" text=\"Also Active\">\n          <p>This tab is also selectable.</p>\n        </tab-ui>\n        <tab-ui value=\"locked\" text=\"Locked\" disabled>\n          <p>This content is locked.</p>\n        </tab-ui>\n      </tabs-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/tabs/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/tabs-edge-cases.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"edge-cases\" data-chunk=\"tabs-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=\"single tab\">\n      <tabs-ui>\n        <tab-ui value=\"only\" text=\"Only Tab\">\n          <p>A single tab with no siblings.</p>\n        </tab-ui>\n      </tabs-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"many tabs\">\n      <tabs-ui value=\"t1\">\n        <tab-ui value=\"t1\" text=\"One\">\n          <p>Content 1</p>\n        </tab-ui>\n        <tab-ui value=\"t2\" text=\"Two\">\n          <p>Content 2</p>\n        </tab-ui>\n        <tab-ui value=\"t3\" text=\"Three\">\n          <p>Content 3</p>\n        </tab-ui>\n        <tab-ui value=\"t4\" text=\"Four\">\n          <p>Content 4</p>\n        </tab-ui>\n        <tab-ui value=\"t5\" text=\"Five\">\n          <p>Content 5</p>\n        </tab-ui>\n        <tab-ui value=\"t6\" text=\"Six\">\n          <p>Content 6</p>\n        </tab-ui>\n      </tabs-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/tabs/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/tabs-icon.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"icon\" data-chunk=\"tabs-icon\">\n  <h2 variant=\"section\">with icons</h2>\n  <p data-note>Each tab-ui can have an icon attribute alongside text.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"icon + text tabs\">\n      <tabs-ui value=\"profile\">\n        <tab-ui value=\"profile\" text=\"Profile\" icon=\"user\">\n          <p>Edit your profile information, display name, and avatar.</p>\n        </tab-ui>\n        <tab-ui value=\"settings\" text=\"Settings\" icon=\"gear\">\n          <p>Configure your account preferences, notifications, and privacy.</p>\n        </tab-ui>\n        <tab-ui value=\"billing\" text=\"Billing\" icon=\"credit-card\">\n          <p>Manage your subscription, payment methods, and invoices.</p>\n        </tab-ui>\n      </tabs-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/tabs/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/tabs-keyboard.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"keyboard\" data-chunk=\"tabs-keyboard\">\n  <h2 variant=\"section\">keyboard navigation</h2>\n  <p data-note>Focus a tab button, then use ArrowLeft / ArrowRight to navigate between tabs. Enter or Space activates the focused tab.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"try keyboard nav\">\n      <tabs-ui value=\"a\">\n        <tab-ui value=\"a\" text=\"Tab A\">\n          <p>Use ArrowRight to move to Tab B.</p>\n        </tab-ui>\n        <tab-ui value=\"b\" text=\"Tab B\">\n          <p>Use ArrowLeft to go back to Tab A, or ArrowRight for Tab C.</p>\n        </tab-ui>\n        <tab-ui value=\"c\" text=\"Tab C\">\n          <p>Use ArrowLeft to go back. Navigation wraps around.</p>\n        </tab-ui>\n      </tabs-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/tabs/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/tabs-orientation.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"orientation\" data-chunk=\"tabs-orientation\">\n  <h2 variant=\"section\">orientation</h2>\n  <p data-note>Lays tab triggers horizontally (default) or vertically.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"horizontal\">\n      <tabs-ui orientation=\"horizontal\" value=\"one\">\n        <tab-ui value=\"one\" text=\"One\"></tab-ui>\n        <tab-ui value=\"two\" text=\"Two\"></tab-ui>\n        <tab-ui value=\"three\" text=\"Three\"></tab-ui>\n      </tabs-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"vertical\">\n      <tabs-ui orientation=\"vertical\" value=\"one\">\n        <tab-ui value=\"one\" text=\"One\"></tab-ui>\n        <tab-ui value=\"two\" text=\"Two\"></tab-ui>\n        <tab-ui value=\"three\" text=\"Three\"></tab-ui>\n      </tabs-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/tabs/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/tabs-value.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"value\" data-chunk=\"tabs-value\">\n  <h2 variant=\"section\">value</h2>\n  <p data-note>Controls which tab is initially active. Defaults to the first non-disabled tab.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"pre-selected second tab\">\n      <tabs-ui value=\"second\">\n        <tab-ui value=\"first\" text=\"First\">\n          <p>First tab content.</p>\n        </tab-ui>\n        <tab-ui value=\"second\" text=\"Second (pre-selected)\">\n          <p>This tab was pre-selected via the value attribute on tabs-ui.</p>\n        </tab-ui>\n        <tab-ui value=\"third\" text=\"Third\">\n          <p>Third tab content.</p>\n        </tab-ui>\n      </tabs-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/tabs/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/tabs-vertical.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"vertical\" data-chunk=\"tabs-vertical\">\n  <h2 variant=\"section\">vertical</h2>\n  <p data-note>Set orientation=\"vertical\" to stack tabs on the left with a sliding indicator on the leading edge.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"vertical tabs\">\n      <tabs-ui value=\"general\" orientation=\"vertical\">\n        <tab-ui value=\"general\" text=\"General\" icon=\"gear\">\n          <p>General settings for your account.</p>\n        </tab-ui>\n        <tab-ui value=\"security\" text=\"Security\" icon=\"lock\">\n          <p>Password, 2FA, and session management.</p>\n        </tab-ui>\n        <tab-ui value=\"team\" text=\"Team\" icon=\"users\">\n          <p>Invite members and manage roles.</p>\n        </tab-ui>\n        <tab-ui value=\"integrations\" text=\"Integrations\" icon=\"plug\">\n          <p>Connect third-party services.</p>\n        </tab-ui>\n      </tabs-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/tabs/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/tag-combinations.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"combinations\" data-chunk=\"tag-combinations\">\n  <h2 variant=\"section\">Combinations</h2>\n  <p data-note>Removable + each variant for a complete tag pattern.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"default + removable\">\n      <tag-ui text=\"Default\" removable></tag-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"info + removable\">\n      <tag-ui text=\"Info\" variant=\"info\" removable></tag-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"success + removable\">\n      <tag-ui text=\"Success\" variant=\"success\" removable></tag-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"warning + removable\">\n      <tag-ui text=\"Warning\" variant=\"warning\" removable></tag-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"error + removable\">\n      <tag-ui text=\"Error\" variant=\"danger\" removable></tag-ui>\n      </div>\n  </div>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"tag cloud\">\n      <div style=\"display:flex; gap:var(--a-space-2); flex-wrap:wrap;\">\n        <tag-ui text=\"HTML\" variant=\"info\" size=\"sm\"></tag-ui>\n        <tag-ui text=\"CSS\" variant=\"success\" size=\"sm\"></tag-ui>\n        <tag-ui text=\"JavaScript\" variant=\"warning\" size=\"sm\"></tag-ui>\n        <tag-ui text=\"TypeScript\" variant=\"danger\" size=\"sm\" removable></tag-ui>\n      </div>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/tag/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/tag-disabled.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"disabled\" data-chunk=\"tag-disabled\">\n  <h2 variant=\"section\">disabled</h2>\n  <p data-note>Prevents interaction and applies muted styling.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"disabled\">\n      <tag-ui text=\"Disabled\" disabled></tag-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"disabled + removable\">\n      <tag-ui text=\"Disabled removable\" removable disabled></tag-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/tag/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/tag-removable.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"removable\" data-chunk=\"tag-removable\">\n  <h2 variant=\"section\">removable</h2>\n  <p data-note>Adds a dismiss button that fires a remove event.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"removable\">\n      <tag-ui text=\"Removable\" removable></tag-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"not removable\">\n      <tag-ui text=\"Not removable\"></tag-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/tag/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/tag-size.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"size\" data-chunk=\"tag-size\">\n  <h2 variant=\"section\">size</h2>\n  <p data-note>Controls tag dimensions. Defaults to \"md\".</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"sm\">\n      <tag-ui text=\"Small\" size=\"sm\"></tag-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"md\">\n      <tag-ui text=\"Medium\" size=\"md\"></tag-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/tag/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/tag-text.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"text\" data-chunk=\"tag-text\">\n  <h2 variant=\"section\">text</h2>\n  <p data-note>The tag's label, rendered via the <code>text</code> attribute.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"New\"><tag-ui text=\"New\"></tag-ui></div>\n    <div data-artifact-item data-artifact-label=\"Beta\"><tag-ui text=\"Beta\"></tag-ui></div>\n    <div data-artifact-item data-artifact-label=\"Deprecated\"><tag-ui text=\"Deprecated\"></tag-ui></div>\n    <div data-artifact-item data-artifact-label=\"long\"><tag-ui text=\"A much longer tag label\"></tag-ui></div>\n  </div>\n</section>",
   "source": "site/pages/components/tag/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/tag-variant.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"variant\" data-chunk=\"tag-variant\">\n  <h2 variant=\"section\">variant</h2>\n  <p data-note>Controls the color scheme. Defaults to \"default\".</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"default\">\n      <tag-ui text=\"Default\"></tag-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"info\">\n      <tag-ui text=\"Info\" variant=\"info\"></tag-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"success\">\n      <tag-ui text=\"Success\" variant=\"success\"></tag-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"warning\">\n      <tag-ui text=\"Warning\" variant=\"warning\"></tag-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"error\">\n      <tag-ui text=\"Error\" variant=\"danger\"></tag-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/tag/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/text-lines.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"lines\" data-chunk=\"text-lines\">\n  <h2 variant=\"section\">lines</h2>\n  <p data-note>Multi-line clamp — limits text to N lines with an ellipsis. 0 (default) means no clamping.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='lines=\"1\"'>\n      <text-ui variant=\"body\" lines=\"1\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</text-ui>\n      </div>\n    <div data-artifact-item data-artifact-label='lines=\"2\"'>\n      <text-ui variant=\"body\" lines=\"2\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</text-ui>\n      </div>\n    <div data-artifact-item data-artifact-label='lines=\"3\"'>\n      <text-ui variant=\"body\" lines=\"3\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</text-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/text/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/text-truncate.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"truncate\" data-chunk=\"text-truncate\">\n  <h2 variant=\"section\">truncate</h2>\n  <p data-note>Single-line truncation with ellipsis. The element must have a constrained width.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"truncate\">\n      <div style=\"max-width:280px;\">\n        <text-ui variant=\"body\" truncate>This is a long paragraph of text that will be truncated with an ellipsis when it overflows the container.</text-ui>\n      </div>\n      </div>\n    <div data-artifact-item data-artifact-label=\"not truncated\">\n      <div style=\"max-width:280px;\">\n        <text-ui variant=\"body\">This text wraps normally across multiple lines when it overflows the container width without truncation.</text-ui>\n      </div>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/text/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/text-variant.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"variant\" data-chunk=\"text-variant\">\n  <h2 variant=\"section\">variant</h2>\n  <p data-note>Typography role. Maps to the 4-layer type system tokens. Defaults to <code>body</code>.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"display\">\n      <text-ui variant=\"display\">Display</text-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"title\">\n      <text-ui variant=\"title\">Title</text-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"heading\">\n      <text-ui variant=\"heading\">Heading</text-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"body\">\n      <text-ui variant=\"body\">Body text</text-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"caption\">\n      <text-ui variant=\"caption\">Caption</text-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"label\">\n      <text-ui variant=\"label\">Label</text-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"kicker\">\n      <text-ui variant=\"kicker\">Kicker</text-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"code\">\n      <text-ui variant=\"code\">const x = 42;</text-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"h1\">\n      <text-ui variant=\"h1\">h1 heading</text-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"h2\">\n      <text-ui variant=\"h2\">h2 heading</text-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"h3\">\n      <text-ui variant=\"h3\">h3 heading</text-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"h4\">\n      <text-ui variant=\"h4\">h4 heading</text-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"h5\">\n      <text-ui variant=\"h5\">h5 heading</text-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"h6\">\n      <text-ui variant=\"h6\">h6 heading</text-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/text/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/textarea-combinations.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"combinations\" data-chunk=\"textarea-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=\"Message\">\n    <field-ui label=\"Message\">\n      <textarea-ui placeholder=\"Type your message...\" rows=\"4\" required></textarea-ui>\n    </field-ui>\n  </div>\n  <div data-artifact-item data-artifact-label=\"Notes\">\n    <field-ui label=\"Notes\">\n      <textarea-ui value=\"Existing content that should be preserved when the form loads.\" rows=\"4\" resize=\"none\"></textarea-ui>\n    </field-ui>\n  </div>\n</div>\n</section>",
   "source": "site/pages/components/textarea/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/textarea-disabled.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"disabled\" data-chunk=\"textarea-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      <textarea-ui value=\"This content cannot be edited\" disabled></textarea-ui>\n    </field-ui>\n  </div>\n  <div data-artifact-item data-artifact-label=\"Disabled Empty\">\n    <field-ui label=\"Disabled Empty\">\n      <textarea-ui placeholder=\"No input allowed\" disabled></textarea-ui>\n    </field-ui>\n  </div>\n</div>\n</section>",
   "source": "site/pages/components/textarea/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/textarea-edge-cases.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"edge-cases\" data-chunk=\"textarea-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=\"textarea\">\n    <textarea-ui></textarea-ui>\n  </div>\n  <div data-artifact-item data-artifact-label=\"Single row textarea\">\n    <textarea-ui rows=\"1\" placeholder=\"Single row textarea\"></textarea-ui>\n  </div>\n  <div data-artifact-item data-artifact-label=\"Large\">\n    <field-ui label=\"Large\">\n      <textarea-ui rows=\"10\" placeholder=\"Very tall textarea for long-form content\"></textarea-ui>\n    </field-ui>\n  </div>\n</div>\n</section>",
   "source": "site/pages/components/textarea/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/textarea-error.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"error\" data-chunk=\"textarea-error\">\n  <h2 variant=\"section\">error</h2>\n  <p data-note>Shows a validation error message with error styling.</p>\n  <div data-artifact-container>\n  <div data-artifact-item data-artifact-label=\"Bio\">\n    <field-ui label=\"Bio\">\n      <textarea-ui placeholder=\"Tell us about yourself\" error=\"Bio is required\" required></textarea-ui>\n    </field-ui>\n  </div>\n  <div data-artifact-item data-artifact-label=\"Description\">\n    <field-ui label=\"Description\">\n      <textarea-ui value=\"Too short\" error=\"Must be at least 50 characters\"></textarea-ui>\n    </field-ui>\n  </div>\n</div>\n</section>",
   "source": "site/pages/components/textarea/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/textarea-label.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"label\" data-chunk=\"textarea-label\">\n  <h2 variant=\"section\">label</h2>\n  <p data-note>Renders a label above the textarea.</p>\n  <div data-artifact-container>\n  <div data-artifact-item data-artifact-label=\"Description\">\n    <field-ui label=\"Description\">\n      <textarea-ui placeholder=\"Enter a description...\"></textarea-ui>\n    </field-ui>\n  </div>\n  <div data-artifact-item data-artifact-label=\"No label, just placeholder\">\n    <textarea-ui placeholder=\"No label, just placeholder\"></textarea-ui>\n  </div>\n</div>\n</section>",
   "source": "site/pages/components/textarea/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/textarea-placeholder.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"placeholder\" data-chunk=\"textarea-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=\"Write your message here...\">\n    <textarea-ui placeholder=\"Write your message here...\"></textarea-ui>\n  </div>\n  <div data-artifact-item data-artifact-label=\"Feedback\">\n    <field-ui label=\"Feedback\">\n      <textarea-ui placeholder=\"Tell us what you think...\"></textarea-ui>\n    </field-ui>\n  </div>\n</div>\n</section>",
   "source": "site/pages/components/textarea/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/textarea-readonly.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"readonly\" data-chunk=\"textarea-readonly\">\n  <h2 variant=\"section\">readonly</h2>\n  <p data-note>Focusable and selectable but not editable.</p>\n  <div data-artifact-container>\n  <div data-artifact-item data-artifact-label=\"Terms\">\n    <field-ui label=\"Terms\">\n      <textarea-ui value=\"By using this service you agree to the terms and conditions outlined in this document. Content is read-only.\" readonly rows=\"3\"></textarea-ui>\n    </field-ui>\n  </div>\n</div>\n</section>",
   "source": "site/pages/components/textarea/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/textarea-resize.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"resize\" data-chunk=\"textarea-resize\">\n  <h2 variant=\"section\">resize</h2>\n  <p data-note>Controls resize behavior. Defaults to \"vertical\".</p>\n  <div data-artifact-container>\n  <div data-artifact-item data-artifact-label=\"Vertical resize\">\n    <field-ui label=\"Vertical resize\">\n      <textarea-ui placeholder=\"Drag the corner to resize\" resize=\"vertical\"></textarea-ui>\n    </field-ui>\n  </div>\n  <div data-artifact-item data-artifact-label=\"No resize\">\n    <field-ui label=\"No resize\">\n      <textarea-ui placeholder=\"Fixed height\" resize=\"none\"></textarea-ui>\n    </field-ui>\n  </div>\n</div>\n</section>",
   "source": "site/pages/components/textarea/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/textarea-rows.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"rows\" data-chunk=\"textarea-rows\">\n  <h2 variant=\"section\">rows</h2>\n  <p data-note>Controls the initial visible height. Defaults to 3.</p>\n  <div data-artifact-container>\n  <div data-artifact-item data-artifact-label=\"Compact (2 rows)\">\n    <field-ui label=\"Compact (2 rows)\">\n      <textarea-ui placeholder=\"Short input...\" rows=\"2\"></textarea-ui>\n    </field-ui>\n  </div>\n  <div data-artifact-item data-artifact-label=\"Default (3 rows)\">\n    <field-ui label=\"Default (3 rows)\">\n      <textarea-ui placeholder=\"Standard height...\" rows=\"3\"></textarea-ui>\n    </field-ui>\n  </div>\n  <div data-artifact-item data-artifact-label=\"Tall (6 rows)\">\n    <field-ui label=\"Tall (6 rows)\">\n      <textarea-ui placeholder=\"More space for content...\" rows=\"6\"></textarea-ui>\n    </field-ui>\n  </div>\n</div>\n</section>",
   "source": "site/pages/components/textarea/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }