@adia-ai/a2ui-corpus 0.0.7 → 0.2.0

package/chunks/chart-in-card-stat-with-sparkline.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"stat-with-sparkline\" data-chunk=\"chart-in-card-stat-with-sparkline\">\n  <h2 variant=\"section\">Stat with inline sparkline</h2>\n  <p data-note>Stat-ui's <code>chart</code> slot positions a sparkline to the right of the hero number — KPI and its trajectory as one visual unit.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"stat with sparkline slot\">\n      <card-ui style=\"max-width:320px;\">\n        <section>\n          <stat-ui label=\"Revenue\" value=\"$48.2k\" change=\"+12.5%\" trend=\"up\">\n            <chart-ui id=\"pat-stat-spark\" slot=\"chart\" type=\"sparkline\" x=\"month\" y=\"value\"></chart-ui>\n          </stat-ui>\n        </section>\n      </card-ui>\n    </div>\n  </div>\n</section>",
   "source": "site/pages/patterns/chart-in-card/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/chart-in-card-trend-footer.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"trend-footer\" data-chunk=\"chart-in-card-trend-footer\">\n  <h2 variant=\"section\">Trend footer</h2>\n  <p data-note>Footer carries trend narrative + period caption using the new footer <code>heading</code> / <code>description</code> slot routing (symmetric with header). Shadcn-style revenue card translated to AdiaUI primitives.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"area chart + trend footer\">\n      <card-ui style=\"max-width:520px;\">\n        <header>\n          <span slot=\"heading\"><h3>Revenue</h3></span>\n          <text-ui slot=\"description\" color=\"subtle\">January – March 2024</text-ui>\n        </header>\n        <section>\n          <chart-ui id=\"pat-trend-revenue\" type=\"area\" x=\"month\" y=\"revenue\" hide-values></chart-ui>\n        </section>\n        <footer>\n          <span slot=\"heading\">Trending up by 5.2% this month</span>\n          <text-ui slot=\"description\" color=\"subtle\">Showing total visitors for the last 3 months</text-ui>\n        </footer>\n      </card-ui>\n    </div>\n  </div>\n</section>",
   "source": "site/pages/patterns/chart-in-card/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/chart-legend-for.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"for\" data-chunk=\"chart-legend-for\">\n  <h2 variant=\"section\">for — mirror a chart's legendData</h2>\n  <p data-note>Point <code>[for]</code> at a <code>chart-ui</code>'s id and the legend reads series data from that chart's <code>.legendData</code> getter on each <code>legend-update</code> event. The chart suppresses its internal legend automatically when a sibling <code>chart-legend-ui[for=self]</code> is present.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='chart-legend-ui[for=\"demo-chart\"]' style=\"max-width:520px;\">\n      <div style=\"display:flex; flex-direction:column; gap:var(--a-space-2);\">\n        <chart-ui id=\"demo-chart\" type=\"multi-line\" x=\"month\" y=\"revenue,users,churn\"></chart-ui>\n        <chart-legend-ui id=\"legend-for\" for=\"demo-chart\" shape=\"line\"></chart-legend-ui>\n      </div>\n    </div>\n  </div>\n</section>",
   "source": "site/pages/components/chart-legend/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/chart-legend-on-toggle.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"on-toggle\" data-chunk=\"chart-legend-on-toggle\">\n  <h2 variant=\"section\">on-toggle</h2>\n  <p data-note>Reports the requested toggle semantic via <code>toggle</code> event detail. <code>hide</code> (default) asks the chart to remove the series from render; <code>opacity</code> asks to fade instead of hide (cases where reflow is jarring).</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='on-toggle=\"hide\" (default)'>\n      <chart-legend-ui id=\"legend-hide\" shape=\"dot\" items='[{\"key\":\"a\",\"label\":\"Primary\",\"slot\":0},{\"key\":\"b\",\"label\":\"Secondary\",\"slot\":1}]'></chart-legend-ui>\n      </div>\n    <div data-artifact-item data-artifact-label='on-toggle=\"opacity\"'>\n      <chart-legend-ui id=\"legend-opacity\" shape=\"dot\" on-toggle=\"opacity\" items='[{\"key\":\"a\",\"label\":\"Primary\",\"slot\":0},{\"key\":\"b\",\"label\":\"Secondary\",\"slot\":1}]'></chart-legend-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/chart-legend/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/chart-legend-position.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"position\" data-chunk=\"chart-legend-position\">\n  <h2 variant=\"section\">position</h2>\n  <p data-note>Layout hint — drives internal <code>flex-direction</code>. Actual placement still follows DOM order; the prop just tunes how the rows stack within the legend element.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='position=\"bottom\" (default)'>\n      <chart-legend-ui id=\"legend-bottom\" shape=\"dot\" position=\"bottom\" items='[{\"key\":\"a\",\"label\":\"Series A\",\"slot\":0},{\"key\":\"b\",\"label\":\"Series B\",\"slot\":1},{\"key\":\"c\",\"label\":\"Series C\",\"slot\":2}]'></chart-legend-ui>\n      </div>\n    <div data-artifact-item data-artifact-label='position=\"left\"'>\n      <chart-legend-ui id=\"legend-left\" shape=\"dot\" position=\"left\" items='[{\"key\":\"a\",\"label\":\"Series A\",\"slot\":0},{\"key\":\"b\",\"label\":\"Series B\",\"slot\":1},{\"key\":\"c\",\"label\":\"Series C\",\"slot\":2}]'></chart-legend-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/chart-legend/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/chart-legend-shape.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"shape\" data-chunk=\"chart-legend-shape\">\n  <h2 variant=\"section\">shape</h2>\n  <p data-note>Swatch style for each legend row. <code>dot</code> and <code>square</code> map to badge-ui icon variants; <code>line</code> and <code>dashed</code> render via CSS <code>::before</code> swatches.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"dot\">\n      <chart-legend-ui id=\"legend-dot\" shape=\"dot\" items='[{\"key\":\"revenue\",\"label\":\"Revenue\",\"slot\":0},{\"key\":\"users\",\"label\":\"Users\",\"slot\":1},{\"key\":\"churn\",\"label\":\"Churn\",\"slot\":2}]'></chart-legend-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"square\">\n      <chart-legend-ui id=\"legend-square\" shape=\"square\" items='[{\"key\":\"a\",\"label\":\"Design\",\"slot\":0},{\"key\":\"b\",\"label\":\"Dev\",\"slot\":1},{\"key\":\"c\",\"label\":\"QA\",\"slot\":2}]'></chart-legend-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"line\">\n      <chart-legend-ui id=\"legend-line\" shape=\"line\" items='[{\"key\":\"revenue\",\"label\":\"Revenue\",\"slot\":0},{\"key\":\"forecast\",\"label\":\"Forecast\",\"slot\":1}]'></chart-legend-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"dashed\">\n      <chart-legend-ui id=\"legend-dashed\" shape=\"dashed\" items='[{\"key\":\"target\",\"label\":\"Target\",\"slot\":3},{\"key\":\"actual\",\"label\":\"Actual\",\"slot\":4}]'></chart-legend-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/chart-legend/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/chart-legend-static.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"static\" data-chunk=\"chart-legend-static\">\n  <h2 variant=\"section\">static</h2>\n  <p data-note>When set, rows render as non-interactive <code>&lt;span&gt;</code>s. No click handler, no focus ring, no <code>toggle</code> event.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"interactive (default)\">\n      <chart-legend-ui id=\"legend-interactive\" shape=\"dot\" items='[{\"key\":\"a\",\"label\":\"Active\",\"slot\":0},{\"key\":\"b\",\"label\":\"Inactive\",\"slot\":1}]'></chart-legend-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"static\">\n      <chart-legend-ui id=\"legend-static\" static shape=\"dot\" items='[{\"key\":\"a\",\"label\":\"Active\",\"slot\":0},{\"key\":\"b\",\"label\":\"Inactive\",\"slot\":1}]'></chart-legend-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/chart-legend/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/chart-radius.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"radius\" data-chunk=\"chart-radius\">\n  <h2 variant=\"section\">radius</h2>\n  <p data-note>Bar corner radius in pixels.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='radius=\"0\"'><chart-ui type=\"bar\" radius=\"0\" data='[{\"c\":\"A\",\"v\":24},{\"c\":\"B\",\"v\":48},{\"c\":\"C\",\"v\":36}]' x=\"c\" y=\"v\" size=\"sm\"></chart-ui></div>\n    <div data-artifact-item data-artifact-label='radius=\"4\" (default)'><chart-ui type=\"bar\" radius=\"4\" data='[{\"c\":\"A\",\"v\":24},{\"c\":\"B\",\"v\":48},{\"c\":\"C\",\"v\":36}]' x=\"c\" y=\"v\" size=\"sm\"></chart-ui></div>\n    <div data-artifact-item data-artifact-label='radius=\"12\"'><chart-ui type=\"bar\" radius=\"12\" data='[{\"c\":\"A\",\"v\":24},{\"c\":\"B\",\"v\":48},{\"c\":\"C\",\"v\":36}]' x=\"c\" y=\"v\" size=\"sm\"></chart-ui></div>\n  </div>\n</section>",
   "source": "site/pages/components/chart/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/chart-size.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"size\" data-chunk=\"chart-size\">\n  <h2 variant=\"section\">size</h2>\n  <p data-note>Named size preset. Defaults to unset (uses container width).</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"sm\"><chart-ui type=\"bar\" size=\"sm\" data='[{\"c\":\"A\",\"v\":24},{\"c\":\"B\",\"v\":48},{\"c\":\"C\",\"v\":36}]' x=\"c\" y=\"v\"></chart-ui></div>\n    <div data-artifact-item data-artifact-label=\"md\"><chart-ui type=\"bar\" size=\"md\" data='[{\"c\":\"A\",\"v\":24},{\"c\":\"B\",\"v\":48},{\"c\":\"C\",\"v\":36}]' x=\"c\" y=\"v\"></chart-ui></div>\n    <div data-artifact-item data-artifact-label=\"lg\"><chart-ui type=\"bar\" size=\"lg\" data='[{\"c\":\"A\",\"v\":24},{\"c\":\"B\",\"v\":48},{\"c\":\"C\",\"v\":36}]' x=\"c\" y=\"v\"></chart-ui></div>\n  </div>\n</section>",
   "source": "site/pages/components/chart/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/chart-sizing.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"sizing\" data-chunk=\"chart-sizing\">\n  <h2 variant=\"section\">sizing</h2>\n  <p data-note>Chart-ui takes its height and width from the parent container — set <code>height</code> / <code>aspect-ratio</code> on the wrapping element (card section, grid cell, sidebar panel) to shape the plot. The chart's ResizeObserver re-renders when the container changes.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='16:9 via aspect-ratio'>\n      <div style=\"aspect-ratio:16/9; inline-size:240px;\">\n        <chart-ui type=\"bar\" data='[{\"c\":\"A\",\"v\":24},{\"c\":\"B\",\"v\":48},{\"c\":\"C\",\"v\":36},{\"c\":\"D\",\"v\":60}]' x=\"c\" y=\"v\"></chart-ui>\n      </div>\n    </div>\n    <div data-artifact-item data-artifact-label='1:1 square'>\n      <div style=\"aspect-ratio:1/1; inline-size:200px;\">\n        <chart-ui type=\"bar\" data='[{\"c\":\"A\",\"v\":24},{\"c\":\"B\",\"v\":48},{\"c\":\"C\",\"v\":36},{\"c\":\"D\",\"v\":60}]' x=\"c\" y=\"v\"></chart-ui>\n      </div>\n    </div>\n    <div data-artifact-item data-artifact-label='fixed height'>\n      <div style=\"block-size:180px; inline-size:240px;\">\n        <chart-ui type=\"bar\" data='[{\"c\":\"A\",\"v\":24},{\"c\":\"B\",\"v\":48},{\"c\":\"C\",\"v\":36},{\"c\":\"D\",\"v\":60}]' x=\"c\" y=\"v\"></chart-ui>\n      </div>\n    </div>\n  </div>\n</section>",
   "source": "site/pages/components/chart/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/chart-smooth.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"smooth\" data-chunk=\"chart-smooth\">\n  <h2 variant=\"section\">smooth</h2>\n  <p data-note>Controls line curve tension for line charts. 0 = straight, 1 = maximum smoothing. Defaults to 0.4.</p>\n  <grid-ui columns=\"3\" gap=\"4\">\n    <div data-artifact-item data-artifact-label=\"smooth=0 (straight)\">\n      <chart-ui id=\"chart-smooth0\" type=\"line\" x=\"month\" y=\"value\" smooth=\"0\"></chart-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"smooth=0.4 (default)\">\n      <chart-ui id=\"chart-smooth04\" type=\"line\" x=\"month\" y=\"value\" smooth=\"0.4\"></chart-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"smooth=1 (max)\">\n      <chart-ui id=\"chart-smooth1\" type=\"line\" x=\"month\" y=\"value\" smooth=\"1\"></chart-ui>\n      </div>\n  </grid-ui>\n</section>",
   "source": "site/pages/components/chart/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/chart-states.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"states\" data-chunk=\"chart-states\">\n  <h2 variant=\"section\">Loading / empty / error states</h2>\n  <p data-note>Chart-ui doesn't own state chrome — compose loading, empty, and error wrappers around it so the card retains its shape while data is fetching or unavailable.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"loading\">\n      <card-ui style=\"max-width:360px;\">\n        <header>\n          <span slot=\"heading\"><h3>Revenue</h3></span>\n          <text-ui slot=\"description\" color=\"subtle\">Last 12 months</text-ui>\n        </header>\n        <section>\n          <skeleton-ui style=\"height:180px; width:100%;\"></skeleton-ui>\n        </section>\n      </card-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"empty\">\n      <card-ui style=\"max-width:360px;\">\n        <header>\n          <span slot=\"heading\"><h3>Revenue</h3></span>\n          <text-ui slot=\"description\" color=\"subtle\">Last 12 months</text-ui>\n        </header>\n        <section>\n          <empty-state-ui icon=\"chart-bar\" heading=\"No data yet\" description=\"Process your first order to see a trend.\">\n            <button-ui slot=\"action\" text=\"Add order\" variant=\"primary\" size=\"sm\"></button-ui>\n          </empty-state-ui>\n        </section>\n      </card-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"error\">\n      <card-ui style=\"max-width:360px;\">\n        <header>\n          <span slot=\"heading\"><h3>Revenue</h3></span>\n          <text-ui slot=\"description\" color=\"subtle\">Last 12 months</text-ui>\n        </header>\n        <section>\n          <alert-ui variant=\"danger\" icon=\"warning\" text=\"Couldn't load chart data. Check your connection and retry.\"></alert-ui>\n          <div style=\"margin-top:var(--a-space-3); display:flex; justify-content:center;\">\n            <button-ui text=\"Retry\" variant=\"outline\" size=\"sm\" icon=\"arrow-clockwise\"></button-ui>\n          </div>\n        </section>\n      </card-ui>\n    </div>\n  </div>\n</section>",
   "source": "site/pages/components/chart/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/chart-title.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"title\" data-chunk=\"chart-title\">\n  <h2 variant=\"section\">title</h2>\n  <p data-note>Chart-ui doesn't render its own title chrome. Wrap the chart in a <code>card-ui</code> and put the heading in the card's <code>&lt;header&gt;</code> — gives you heading + optional description + action slots with the same shape as the rest of the system. See the <a href=\"#chart-card\">Chart card with trend footer</a> example above.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='card-ui > header > [slot=\"heading\"] + chart-ui'>\n      <card-ui style=\"max-width:360px;\">\n        <header>\n          <span slot=\"heading\"><h3>Quarterly revenue</h3></span>\n        </header>\n        <section>\n          <chart-ui type=\"bar\" data='[{\"q\":\"Q1\",\"revenue\":120},{\"q\":\"Q2\",\"revenue\":180},{\"q\":\"Q3\",\"revenue\":240},{\"q\":\"Q4\",\"revenue\":300}]' x=\"q\" y=\"revenue\" size=\"sm\"></chart-ui>\n        </section>\n      </card-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/chart/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/chart-type.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"type\" data-chunk=\"chart-type\">\n  <h2 variant=\"section\">type</h2>\n  <p data-note>Chart type. Defaults to \"bar\". Grouped by family below — 18 total. Data is set programmatically via the <code>.data</code> property.</p>\n</section>",
   "source": "site/pages/components/chart/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/check-checked.json

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

package/chunks/check-combinations.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"combinations\" data-chunk=\"check-combinations\">\n  <h2 variant=\"section\">Combinations</h2>\n  <p data-note>Common checkbox group patterns.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"settings group\">\n      <div style=\"display:flex; flex-direction:column; gap:var(--a-space-2);\">\n        <field-ui label=\"Email notifications\" inline>\n          <check-ui checked></check-ui>\n        </field-ui>\n        <field-ui label=\"Push notifications\" inline>\n          <check-ui checked></check-ui>\n        </field-ui>\n        <field-ui label=\"SMS alerts\" inline>\n          <check-ui></check-ui>\n        </field-ui>\n        <field-ui label=\"Slack integration\" inline>\n          <check-ui disabled></check-ui>\n        </field-ui>\n      </div>\n      </div>\n    <div data-artifact-item data-artifact-label=\"parent-child\">\n      <div style=\"display:flex; flex-direction:column; gap:var(--a-space-2);\">\n        <field-ui label=\"Select All\" inline>\n          <check-ui indeterminate></check-ui>\n        </field-ui>\n        <field-ui label=\"Design\" inline>\n          <check-ui checked style=\"margin-left:var(--a-space-4);\"></check-ui>\n        </field-ui>\n        <field-ui label=\"Engineering\" inline>\n          <check-ui checked style=\"margin-left:var(--a-space-4);\"></check-ui>\n        </field-ui>\n        <field-ui label=\"Marketing\" inline>\n          <check-ui style=\"margin-left:var(--a-space-4);\"></check-ui>\n        </field-ui>\n      </div>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/check/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/check-disabled.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"disabled\" data-chunk=\"check-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 unchecked\">\n      <field-ui label=\"Disabled Unchecked\" inline>\n        <check-ui disabled></check-ui>\n      </field-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"disabled checked\">\n      <field-ui label=\"Disabled Checked\" inline>\n        <check-ui checked disabled></check-ui>\n      </field-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"disabled indeterminate\">\n      <field-ui label=\"Disabled Indeterminate\" inline>\n        <check-ui indeterminate disabled></check-ui>\n      </field-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/check/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/check-edge-cases.json

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

package/chunks/check-indeterminate.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"indeterminate\" data-chunk=\"check-indeterminate\">\n  <h2 variant=\"section\">indeterminate</h2>\n  <p data-note>A third visual state for \"partially selected\" groups. Displays a dash instead of a checkmark.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"indeterminate\">\n      <field-ui label=\"Select All\" inline>\n        <check-ui indeterminate></check-ui>\n      </field-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"checked (all)\">\n      <field-ui label=\"All Selected\" inline>\n        <check-ui checked></check-ui>\n      </field-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"unchecked (none)\">\n      <field-ui label=\"None Selected\" inline>\n        <check-ui></check-ui>\n      </field-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/check/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/check-label.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"label\" data-chunk=\"check-label\">\n  <h2 variant=\"section\">label</h2>\n  <p data-note>Accessible label rendered as aria-label. The label text is part of the component display.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"with label\">\n      <field-ui label=\"Accept terms and conditions\" inline>\n        <check-ui></check-ui>\n      </field-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"no label\">\n      <check-ui></check-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"long label\">\n      <field-ui label=\"I agree to the privacy policy, terms of service, and community guidelines\" inline>\n        <check-ui checked></check-ui>\n      </field-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/check/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/check-size.json

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

package/chunks/code-bare.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"bare\" data-chunk=\"code-bare\">\n  <h2 variant=\"section\">bare (no chrome)</h2>\n  <p data-note>The <code>bare</code> attribute omits the header chrome (language label + copy button). Useful for embedded editor surfaces inside panes or cards where the host already provides chrome.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"bare editable\">\n      <code-ui bare editable language=\"yaml\">name: AdiaBadge\ntag: badge-ui\ncategory: utility\nprops:\n  variant:\n    type: string\n    default: solid</code-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/code/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/code-combo.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-combo data-chunk=\"code-combo\">\n  <h2 variant=\"section\">Combinations</h2>\n  <p data-note>Inline and block code used together in context.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"inline + block together\">\n      <p>Import the <code-ui inline>AdiaElement</code-ui> base class and extend it:</p>\n      <code-ui language=\"js\">import { AdiaElement } from '@core/element.js';\n\nclass MyWidget extends AdiaElement {\n  static properties = {\n    label: { type: String, default: '', reflect: true },\n  };\n}</code-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/code/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/code-disabled-readonly.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"disabled-readonly\" data-chunk=\"code-disabled-readonly\">\n  <h2 variant=\"section\">disabled / readonly</h2>\n  <p data-note>Both block input. <code>disabled</code> also excludes the editor from form submission and grays it out. <code>readonly</code> still submits with the form.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"disabled\">\n      <code-ui editable language=\"json\" disabled>{ \"locked\": true }</code-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"readonly\">\n      <code-ui editable language=\"json\" readonly>{ \"readonly\": true }</code-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/code/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/code-edge.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-edge data-chunk=\"code-edge\">\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=\"single character\">\n      <code-ui language=\"js\">x</code-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"empty inline\">\n      <code-ui inline></code-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"many lines\">\n      <code-ui language=\"txt\">Line 1\nLine 2\nLine 3\nLine 4\nLine 5\nLine 6\nLine 7\nLine 8\nLine 9\nLine 10\nLine 11\nLine 12\nLine 13\nLine 14\nLine 15</code-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/code/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/code-editable.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"editable\" data-chunk=\"code-editable\">\n  <h2 variant=\"section\">editable</h2>\n  <p data-note>Add <code>editable</code> to turn the block into a live CodeMirror editor. The element emits <code>input</code> on every doc change, <code>change</code> on blur-with-modifications, and <code>save</code> on Mod+S.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"editable json\">\n      <code-ui editable language=\"json\" placeholder=\"Paste JSON here…\">{\n  \"name\": \"AdiaUI\",\n  \"components\": 80,\n  \"version\": \"0.0.13\"\n}</code-ui>\n      </div>\n  </div>\n  <div data-artifact-container data-mt-sm>\n    <div data-artifact-item data-artifact-label=\"editable javascript\">\n      <code-ui editable language=\"javascript\" line-numbers>function fibonacci(n) {\n  if (n < 2) return n;\n  return fibonacci(n - 1) + fibonacci(n - 2);\n}</code-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/code/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/code-form-association.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"form-association\" data-chunk=\"code-form-association\">\n  <h2 variant=\"section\">Form-association</h2>\n  <p data-note>Editable <code>&lt;code-ui&gt;</code> is a Form-Associated Custom Element (FACE). Set <code>name</code> to participate in form submission; <code>required</code> blocks submit when empty; <code>disabled</code> and <code>readonly</code> behave per the native form-control idiom.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"inside a form — name + required\">\n      <form onsubmit=\"event.preventDefault(); alert('Submitted:\\n' + new FormData(event.target).get('schema'));\">\n        <field-ui label=\"Schema JSON\">\n          <code-ui editable language=\"json\" name=\"schema\" required placeholder=\"Enter JSON…\">{ \"hello\": \"world\" }</code-ui>\n        </field-ui>\n        <div data-mt-sm>\n          <button-ui type=\"submit\" text=\"Submit\" variant=\"primary\"></button-ui>\n          <button-ui type=\"reset\" text=\"Reset\"></button-ui>\n        </div>\n      </form>\n      </div>\n  </div>\n  <p data-note data-mt-sm>Clear the editor and submit — the form blocks with a <code>valueMissing</code> error (custom message via <code>data-msg-required</code>). Reset restores the initial document.</p>\n</section>",
   "source": "site/pages/components/code/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/code-inline.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"inline\" data-chunk=\"code-inline\">\n  <h2 variant=\"section\">inline</h2>\n  <p data-note>Inline code runs within a paragraph. Set the <code>inline</code> attribute.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"inline in paragraph\">\n      <p>Use <code-ui inline>const x = 42</code-ui> to declare a variable, or call <code-ui inline>Array.from()</code-ui> to convert iterables.</p>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/code/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/code-language.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"language\" data-chunk=\"code-language\">\n  <h2 variant=\"section\">block with language</h2>\n  <p data-note>Block code renders in a pre/code wrapper with a language label and copy button.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='language=\"js\"'>\n      <code-ui language=\"js\">function greet(name) {\n  return `Hello, ${name}!`;\n}\n\nconst result = greet('AdiaUI');\nconsole.log(result);</code-ui>\n      </div>\n  </div>\n  <div data-artifact-container data-mt-sm>\n    <div data-artifact-item data-artifact-label='language=\"css\"'>\n      <code-ui language=\"css\">:root {\n  --a-accent-hue: 267;\n  --a-accent-c-max: 0.18;\n}\n\nbutton-ui {\n  color: var(--a-fg);\n  background: var(--a-canvas-bg);\n}</code-ui>\n      </div>\n  </div>\n  <div data-artifact-container data-mt-sm>\n    <div data-artifact-item data-artifact-label='language=\"html\"'>\n      <code-ui language=\"html\">&lt;div class=\"container\"&gt;\n  &lt;field-ui label=\"Email\"&gt;\n    &lt;input-ui placeholder=\"you@example.com\"&gt;&lt;/input-ui&gt;\n  &lt;/field-ui&gt;\n  &lt;button-ui text=\"Submit\" variant=\"primary\"&gt;&lt;/button-ui&gt;\n&lt;/div&gt;</code-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/code/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/code-line-numbers.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"line-numbers\" data-chunk=\"code-line-numbers\">\n  <h2 variant=\"section\">line-numbers</h2>\n  <p data-note>Add <code>line-numbers</code> to show a gutter. Works in both read-only and editable modes.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"read-only with line numbers\">\n      <code-ui language=\"javascript\" line-numbers>const scheduler = {\n  queue: [],\n  enqueue(task) { this.queue.push(task); },\n  flush() {\n    while (this.queue.length) {\n      const task = this.queue.shift();\n      task();\n    }\n  },\n};</code-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/code/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/code-lint-gutter.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"lint-gutter\" data-chunk=\"code-lint-gutter\">\n  <h2 variant=\"section\">JSON lint gutter</h2>\n  <p data-note>Editable JSON editors get a parse-error gutter + inline wavy underline + tooltip automatically. Try introducing a missing comma or unterminated string below.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"malformed json — see the gutter marker\">\n      <code-ui editable language=\"json\">{\n  \"name\": \"schema-draft\"\n  \"components\": 80,\n  \"note\": \"missing comma on the line above\"\n}</code-ui>\n      </div>\n  </div>\n  <p data-note data-mt-sm>Lint is visual-only — <code>.value</code> returns the raw document regardless of validity. Consumers that want stricter gating can wire validity manually on <code>input</code> events.</p>\n</section>",
   "source": "site/pages/components/code/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/code-long-code.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"long-code\" data-chunk=\"code-long-code\">\n  <h2 variant=\"section\">long code (horizontal scroll)</h2>\n  <p data-note>Long lines overflow horizontally and scroll rather than wrapping.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"horizontal scroll\">\n      <code-ui language=\"js\">const longConfiguration = { apiEndpoint: 'https://api.example.com/v2/resources', timeout: 30000, retries: 3, headers: { 'Authorization': 'Bearer token_abc123', 'Content-Type': 'application/json', 'X-Request-Id': crypto.randomUUID() }, cache: { enabled: true, ttl: 3600, strategy: 'stale-while-revalidate' } };</code-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/code/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/code-no-language.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"no-language\" data-chunk=\"code-no-language\">\n  <h2 variant=\"section\">block without language</h2>\n  <p data-note>Omitting the language attribute renders a generic block with \"code\" as the label.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"no language\">\n      <code-ui>npm install adia-ui\ncd my-project\nnpm run dev</code-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/code/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/color-picker-default.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"default\" data-chunk=\"color-picker-default\">\n  <h2 variant=\"section\">Default</h2>\n  <p data-note>Default color picker with initial value of #3b82f6.</p>\n  <div data-artifact-container>\n  <div data-artifact-item data-artifact-label=\"color-picker\">\n    <color-picker-ui></color-picker-ui>\n  </div>\n</div>\n</section>",
   "source": "site/pages/components/color-picker/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/color-picker-disabled.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"disabled\" data-chunk=\"color-picker-disabled\">\n  <h2 variant=\"section\">disabled</h2>\n  <p data-note>Prevents interaction.</p>\n  <div data-artifact-container>\n  <div data-artifact-item data-artifact-label=\"#3b82f6\">\n    <color-picker-ui value=\"#3b82f6\" disabled></color-picker-ui>\n  </div>\n</div>\n</section>",
   "source": "site/pages/components/color-picker/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/color-picker-format.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"format\" data-chunk=\"color-picker-format\">\n  <h2 variant=\"section\">format</h2>\n  <p data-note>Color output format: <code>hex</code>, <code>rgb</code>, or <code>hsl</code>.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"hex\"><color-picker-ui format=\"hex\" value=\"#4f46e5\"></color-picker-ui></div>\n    <div data-artifact-item data-artifact-label=\"rgb\"><color-picker-ui format=\"rgb\" value=\"rgb(79,70,229)\"></color-picker-ui></div>\n    <div data-artifact-item data-artifact-label=\"hsl\"><color-picker-ui format=\"hsl\" value=\"hsl(243,75%,59%)\"></color-picker-ui></div>\n  </div>\n</section>",
   "source": "site/pages/components/color-picker/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/color-picker-name.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"name\" data-chunk=\"color-picker-name\">\n  <h2 variant=\"section\">name</h2>\n  <p data-note>Form field name submitted with the chosen color value.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"name=color\"><color-picker-ui name=\"color\"></color-picker-ui></div>\n    <div data-artifact-item data-artifact-label=\"name=brand_color\"><color-picker-ui name=\"brand_color\"></color-picker-ui></div>\n  </div>\n</section>",
   "source": "site/pages/components/color-picker/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/color-picker-value.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"value\" data-chunk=\"color-picker-value\">\n  <h2 variant=\"section\">Pre-set Colors</h2>\n  <p data-note>Initialize with specific hex values.</p>\n  <div data-artifact-container>\n  <div data-artifact-item data-artifact-label=\"#3b82f6\">\n    <color-picker-ui value=\"#3b82f6\"></color-picker-ui>\n  </div>\n  <div data-artifact-item data-artifact-label=\"#ef4444\">\n    <color-picker-ui value=\"#ef4444\"></color-picker-ui>\n  </div>\n  <div data-artifact-item data-artifact-label=\"#22c55e\">\n    <color-picker-ui value=\"#22c55e\"></color-picker-ui>\n  </div>\n</div>\n</section>",
   "source": "site/pages/components/color-picker/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/command-combo.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-combo data-chunk=\"command-combo\">\n  <h2 variant=\"section\">Combinations</h2>\n  <p data-note>Full-featured command palette with all options combined.</p>\n  <div data-artifact-container>\n  <div data-artifact-item data-artifact-label=\"What do you need?\">\n    <command-ui placeholder=\"What do you need?\" style=\"width:32rem; max-height:24rem; border:1px solid var(--a-border); border-radius:var(--a-radius-lg);\">\n          <optgroup label=\"Quick Actions\">\n            <option value=\"new-chat\" data-icon=\"chat-circle\" data-shortcut=\"&#8984;N\">New Chat</option>\n            <option value=\"search\" data-icon=\"magnifying-glass\" data-shortcut=\"&#8984;K\">Search Everything</option>\n          </optgroup>\n          <optgroup label=\"Navigation\">\n            <option value=\"dashboard\" data-icon=\"chart-bar\">Dashboard</option>\n            <option value=\"settings\" data-icon=\"gear\">Settings</option>\n            <option value=\"members\" data-icon=\"users\">Team Members</option>\n          </optgroup>\n          <optgroup label=\"Theme\">\n            <option value=\"light\" data-icon=\"sun\">Light Mode</option>\n            <option value=\"dark\" data-icon=\"moon\">Dark Mode</option>\n            <option value=\"system\" data-icon=\"desktop\">System Theme</option>\n          </optgroup>\n          <optgroup label=\"Danger Zone\">\n            <option value=\"logout\" data-icon=\"sign-out\">Log Out</option>\n            <option value=\"delete-account\" data-icon=\"trash\">Delete Account</option>\n          </optgroup>\n        </command-ui>\n  </div>\n</div>\n</section>",
   "source": "site/pages/components/command/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/command-edge.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-edge data-chunk=\"command-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=\"Search...\">\n    <command-ui placeholder=\"Search...\" style=\"width:32rem; max-height:24rem; border:1px solid var(--a-border); border-radius:var(--a-radius-lg);\">\n          <optgroup label=\"Items\">\n            <option value=\"only\">Only Option</option>\n          </optgroup>\n        </command-ui>\n  </div>\n  <div data-artifact-item data-artifact-label=\"Search...\">\n    <command-ui placeholder=\"Search...\" style=\"width:32rem; max-height:24rem; border:1px solid var(--a-border); border-radius:var(--a-radius-lg);\">\n          <optgroup label=\"This is a very long group label\">\n            <option value=\"long\" data-icon=\"text-aa\" data-shortcut=\"&#8984;Shift+L\">This is a very long option label that tests overflow handling</option>\n            <option value=\"short\">Short</option>\n          </optgroup>\n        </command-ui>\n  </div>\n</div>\n</section>",
   "source": "site/pages/components/command/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/command-grouped.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"grouped\" data-chunk=\"command-grouped\">\n  <h2 variant=\"section\">grouped options with icons</h2>\n  <p data-note>Options are organized in optgroups. Each option can have a data-icon attribute for a leading icon.</p>\n  <div data-artifact-container>\n  <div data-artifact-item data-artifact-label=\"Type a command...\">\n    <command-ui placeholder=\"Type a command...\" style=\"width:32rem; max-height:24rem; border:1px solid var(--a-border); border-radius:var(--a-radius-lg);\">\n          <optgroup label=\"Navigation\">\n            <option value=\"home\" data-icon=\"house\">Go to Home</option>\n            <option value=\"projects\" data-icon=\"folder\">Go to Projects</option>\n            <option value=\"settings\" data-icon=\"gear\">Go to Settings</option>\n            <option value=\"profile\" data-icon=\"user\">Go to Profile</option>\n          </optgroup>\n          <optgroup label=\"Team\">\n            <option value=\"members\" data-icon=\"users\">View Members</option>\n            <option value=\"roles\" data-icon=\"shield\">Manage Roles</option>\n            <option value=\"invites\" data-icon=\"envelope\">Send Invites</option>\n          </optgroup>\n          <optgroup label=\"Account\">\n            <option value=\"billing\" data-icon=\"credit-card\">Billing</option>\n            <option value=\"logout\" data-icon=\"sign-out\">Log Out</option>\n          </optgroup>\n        </command-ui>\n  </div>\n</div>\n</section>",
   "source": "site/pages/components/command/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/command-inline.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"inline\" data-chunk=\"command-inline\">\n  <h2 variant=\"section\">inline (not in dialog)</h2>\n  <p data-note>The command component can render inline without a dialog wrapper. Useful for embedded search panels.</p>\n  <div data-artifact-container>\n  <div data-artifact-item data-artifact-label=\"Search commands...\">\n    <command-ui placeholder=\"Search commands...\" style=\"width:32rem; max-height:24rem; border:1px solid var(--a-border); border-radius:var(--a-radius-lg);\">\n          <optgroup label=\"Pages\">\n            <option value=\"home\" data-icon=\"house\">Home</option>\n            <option value=\"dashboard\" data-icon=\"chart-bar\">Dashboard</option>\n            <option value=\"settings\" data-icon=\"gear\">Settings</option>\n          </optgroup>\n          <optgroup label=\"Actions\">\n            <option value=\"new\" data-icon=\"plus\">Create New</option>\n            <option value=\"search\" data-icon=\"magnifying-glass\">Search</option>\n          </optgroup>\n        </command-ui>\n  </div>\n</div>\n</section>",
   "source": "site/pages/components/command/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/command-open.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"open\" data-chunk=\"command-open\">\n  <h2 variant=\"section\">open</h2>\n  <p data-note>When set, the command palette is rendered in its open state.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"open=true\"><command-ui open placeholder=\"Type a command...\" style=\"max-height:24rem;\"></command-ui></div>\n  </div>\n</section>",
   "source": "site/pages/components/command/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/command-placeholder.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"placeholder\" data-chunk=\"command-placeholder\">\n  <h2 variant=\"section\">placeholder</h2>\n  <p data-note>Placeholder text shown in the command palette search field.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"default\"><command-ui placeholder=\"Type a command...\" style=\"width:32rem;max-height:24rem;\"></command-ui></div>\n    <div data-artifact-item data-artifact-label=\"search files\"><command-ui placeholder=\"Search files...\" style=\"width:32rem;max-height:24rem;\"></command-ui></div>\n    <div data-artifact-item data-artifact-label=\"jump\"><command-ui placeholder=\"Jump to...\" style=\"width:32rem;max-height:24rem;\"></command-ui></div>\n  </div>\n</section>",
   "source": "site/pages/components/command/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/command-shortcuts.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"shortcuts\" data-chunk=\"command-shortcuts\">\n  <h2 variant=\"section\">with shortcuts</h2>\n  <p data-note>The data-shortcut attribute displays a keyboard hint on the right side of each option.</p>\n  <div data-artifact-container>\n  <div data-artifact-item data-artifact-label=\"Search...\">\n    <command-ui placeholder=\"Search...\" style=\"width:32rem; max-height:24rem; border:1px solid var(--a-border); border-radius:var(--a-radius-lg);\">\n          <optgroup label=\"Actions\">\n            <option value=\"new-file\" data-icon=\"file-plus\" data-shortcut=\"&#8984;N\">New File</option>\n            <option value=\"open\" data-icon=\"folder-open\" data-shortcut=\"&#8984;O\">Open File</option>\n            <option value=\"save\" data-icon=\"floppy-disk\" data-shortcut=\"&#8984;S\">Save</option>\n            <option value=\"find\" data-icon=\"magnifying-glass\" data-shortcut=\"&#8984;F\">Find</option>\n            <option value=\"replace\" data-icon=\"swap\" data-shortcut=\"&#8984;H\">Find &amp; Replace</option>\n          </optgroup>\n          <optgroup label=\"View\">\n            <option value=\"toggle-sidebar\" data-icon=\"sidebar\" data-shortcut=\"&#8984;B\">Toggle Sidebar</option>\n            <option value=\"toggle-theme\" data-icon=\"moon\" data-shortcut=\"&#8984;D\">Toggle Theme</option>\n            <option value=\"zen-mode\" data-icon=\"arrows-out\" data-shortcut=\"&#8984;K Z\">Zen Mode</option>\n          </optgroup>\n        </command-ui>\n  </div>\n</div>\n</section>",
   "source": "site/pages/components/command/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/comments-composer.json

@@ -0,0 +1,15 @@
+{
+  "name": "comments-composer",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/patterns/comments-and-collaboration",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "composer"
+  },
+  "html": "<section data-section data-property=\"composer\" data-chunk=\"comments-composer\">\n  <h2 variant=\"section\">Comment composer</h2>\n  <p data-note>The input field below a thread. Multiline, with attach + mention + emoji affordances inline, and Send / Cancel actions. Submits on Cmd/Ctrl+Enter; Enter inserts a newline.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"comment composer\">\n      <card-ui style=\"max-width: 640px;\">\n        <section>\n          <row-ui gap=\"3\" align=\"start\">\n            <avatar-ui size=\"sm\" text=\"You\"></avatar-ui>\n            <col-ui gap=\"2\" grow>\n              <field-ui>\n                <textarea-ui placeholder=\"Write a comment… use @ to mention\" rows=\"3\"></textarea-ui>\n              </field-ui>\n              <row-ui gap=\"2\" align=\"center\">\n                <button-ui icon=\"paperclip\" variant=\"ghost\" size=\"sm\" aria-label=\"Attach\"></button-ui>\n                <button-ui icon=\"at\" variant=\"ghost\" size=\"sm\" aria-label=\"Mention someone\"></button-ui>\n                <button-ui icon=\"smiley\" variant=\"ghost\" size=\"sm\" aria-label=\"Insert emoji\"></button-ui>\n                <text-ui color=\"subtle\" size=\"sm\" style=\"margin-inline-start: auto;\"><kbd-ui>Cmd</kbd-ui> + <kbd-ui>Enter</kbd-ui> to send</text-ui>\n                <button-ui text=\"Comment\" variant=\"primary\" size=\"sm\"></button-ui>\n              </row-ui>\n            </col-ui>\n          </row-ui>\n        </section>\n      </card-ui>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/patterns/comments-and-collaboration/index.html",
+  "captured_at": "2026-05-01T19:13:23.303Z"
+}

package/chunks/comments-mention-menu.json

@@ -0,0 +1,15 @@
+{
+  "name": "comments-mention-menu",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/patterns/comments-and-collaboration",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "mention-menu"
+  },
+  "html": "<section data-section data-property=\"mention-menu\" data-chunk=\"comments-mention-menu\">\n  <h2 variant=\"section\">@-mention picker</h2>\n  <p data-note>Popover that opens after the user types <code>@</code>. Shows team members + recently-mentioned at top, fuzzy-filtered by query. Each row carries avatar + name + handle + role tag. Arrow keys navigate; Enter inserts; Esc closes without inserting.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"mention picker menu\">\n      <card-ui raw style=\"max-width: 320px;\" data-shape=\"popover\">\n        <section>\n          <col-ui gap=\"2\">\n            <text-ui strong size=\"sm\" color=\"subtle\">Mention</text-ui>\n            <col-ui gap=\"1\">\n              <row-ui gap=\"2\" align=\"center\">\n                <avatar-ui size=\"sm\" text=\"Kim Granlund\"></avatar-ui>\n                <col-ui gap=\"0\" style=\"flex: 1;\">\n                  <text-ui strong>Kim Granlund</text-ui>\n                  <text-ui color=\"subtle\" size=\"sm\">@kim · Owner</text-ui>\n                </col-ui>\n              </row-ui>\n              <row-ui gap=\"2\" align=\"center\">\n                <avatar-ui size=\"sm\" text=\"Avery Chen\"></avatar-ui>\n                <col-ui gap=\"0\" style=\"flex: 1;\">\n                  <text-ui strong>Avery Chen</text-ui>\n                  <text-ui color=\"subtle\" size=\"sm\">@avery · Designer</text-ui>\n                </col-ui>\n              </row-ui>\n              <row-ui gap=\"2\" align=\"center\">\n                <avatar-ui size=\"sm\" text=\"Jordan Lee\"></avatar-ui>\n                <col-ui gap=\"0\" style=\"flex: 1;\">\n                  <text-ui strong>Jordan Lee</text-ui>\n                  <text-ui color=\"subtle\" size=\"sm\">@jordan · Engineer</text-ui>\n                </col-ui>\n              </row-ui>\n              <divider-ui></divider-ui>\n              <row-ui gap=\"2\" align=\"center\">\n                <icon-ui name=\"users-three\" size=\"sm\"></icon-ui>\n                <col-ui gap=\"0\" style=\"flex: 1;\">\n                  <text-ui strong>@team</text-ui>\n                  <text-ui color=\"subtle\" size=\"sm\">Notify everyone in this workspace</text-ui>\n                </col-ui>\n              </row-ui>\n            </col-ui>\n          </col-ui>\n        </section>\n      </card-ui>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/patterns/comments-and-collaboration/index.html",
+  "captured_at": "2026-05-01T19:13:23.303Z"
+}

package/chunks/comments-thread.json

@@ -0,0 +1,15 @@
+{
+  "name": "comments-thread",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/patterns/comments-and-collaboration",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "thread"
+  },
+  "html": "<section data-section data-property=\"thread\" data-chunk=\"comments-thread\">\n  <h2 variant=\"section\">Comment thread</h2>\n  <p data-note>A vertical stack of comments anchored to a parent object. Each row carries author avatar + name + timestamp + body + reactions strip + reply action. Threaded replies indent one level — deeper nesting collapses to \"X replies\" by default.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"comment thread\">\n      <card-ui style=\"max-width: 640px;\">\n        <header>\n          <span slot=\"heading\" variant=\"section\">Discussion</span>\n          <text-ui slot=\"description\" color=\"subtle\">3 comments · 2 participants</text-ui>\n          <button-ui slot=\"action\" text=\"Resolve\" variant=\"ghost\" size=\"sm\" icon-leading=\"check\"></button-ui>\n        </header>\n        <section>\n          <col-ui gap=\"3\">\n            <row-ui gap=\"3\" align=\"start\">\n              <avatar-ui size=\"sm\" text=\"Avery Chen\"></avatar-ui>\n              <col-ui gap=\"1\" grow>\n                <row-ui gap=\"2\" align=\"baseline\">\n                  <text-ui strong>Avery Chen</text-ui>\n                  <text-ui color=\"subtle\" size=\"sm\">2 hours ago</text-ui>\n                </row-ui>\n                <text-ui>Should the OKLCH ramp here use the chrome or the data scale? <text-ui color=\"primary\">@Kim</text-ui> what's the convention?</text-ui>\n                <row-ui gap=\"1\">\n                  <tag-ui size=\"sm\" icon-leading=\"thumbs-up\">2</tag-ui>\n                  <tag-ui size=\"sm\" icon-leading=\"eyes\">1</tag-ui>\n                  <button-ui text=\"Reply\" variant=\"ghost\" size=\"xs\"></button-ui>\n                </row-ui>\n              </col-ui>\n            </row-ui>\n            <row-ui gap=\"3\" align=\"start\" style=\"padding-inline-start: 2.5rem;\">\n              <avatar-ui size=\"sm\" text=\"Kim Granlund\"></avatar-ui>\n              <col-ui gap=\"1\" grow>\n                <row-ui gap=\"2\" align=\"baseline\">\n                  <text-ui strong>Kim Granlund</text-ui>\n                  <text-ui color=\"subtle\" size=\"sm\">1 hour ago</text-ui>\n                </row-ui>\n                <text-ui>Chrome — the data scale is reserved for visualization series. Spec at <text-ui color=\"primary\">docs/specs/component-token-contract.md</text-ui>.</text-ui>\n                <row-ui gap=\"1\">\n                  <tag-ui size=\"sm\" icon-leading=\"thumbs-up\">3</tag-ui>\n                  <button-ui text=\"Reply\" variant=\"ghost\" size=\"xs\"></button-ui>\n                </row-ui>\n              </col-ui>\n            </row-ui>\n            <row-ui gap=\"3\" align=\"start\">\n              <avatar-ui size=\"sm\" text=\"Jordan Lee\"></avatar-ui>\n              <col-ui gap=\"1\" grow>\n                <row-ui gap=\"2\" align=\"baseline\">\n                  <text-ui strong>Jordan Lee</text-ui>\n                  <text-ui color=\"subtle\" size=\"sm\">12 minutes ago</text-ui>\n                </row-ui>\n                <text-ui>Filed a follow-up — adding a lint rule so this doesn't happen again. <text-ui color=\"primary\">#linter</text-ui></text-ui>\n                <row-ui gap=\"1\">\n                  <button-ui text=\"Reply\" variant=\"ghost\" size=\"xs\"></button-ui>\n                </row-ui>\n              </col-ui>\n            </row-ui>\n          </col-ui>\n        </section>\n      </card-ui>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/patterns/comments-and-collaboration/index.html",
+  "captured_at": "2026-05-01T19:13:23.303Z"
+}

package/chunks/commerce-pricing-tiers.json

@@ -12,5 +12,5 @@
   },
   "html": "<section data-reg-form data-chunk=\"commerce-pricing-tiers\" role=\"radiogroup\" aria-label=\"Plan\">\n      <col-ui gap=\"2\">\n        <option-card-ui name=\"plan\" value=\"free\">\n          <row-ui slot=\"heading\" gap=\"2\" align=\"baseline\">\n            <span>Free</span>\n            <text-ui color=\"subtle\" size=\"sm\" grow>Solo or community work</text-ui>\n            <span>$0/mo</span>\n          </row-ui>\n          <span slot=\"description\">Up to 5 members · 10 projects · community support</span>\n        </option-card-ui>\n\n        <option-card-ui name=\"plan\" value=\"pro\" checked>\n          <row-ui slot=\"heading\" gap=\"2\" align=\"baseline\">\n            <span>Pro</span>\n            <text-ui color=\"subtle\" size=\"sm\" grow>Designed for small operations</text-ui>\n            <span>$49/mo</span>\n          </row-ui>\n          <col-ui slot=\"description\" gap=\"2\">\n            <span>Unlimited members · advanced charts · 100 GB storage · email support</span>\n            <row-ui gap=\"2\" align=\"center\">\n              <badge-ui text=\"Saves 40%\" variant=\"success\"></badge-ui>\n              <text-ui size=\"sm\" color=\"subtle\">14-day trial period</text-ui>\n            </row-ui>\n          </col-ui>\n        </option-card-ui>\n\n        <option-card-ui name=\"plan\" value=\"team\">\n          <row-ui slot=\"heading\" gap=\"2\" align=\"baseline\">\n            <span>Team</span>\n            <text-ui color=\"subtle\" size=\"sm\" grow>For growing organizations</text-ui>\n            <span>$129/mo</span>\n          </row-ui>\n          <col-ui slot=\"description\" gap=\"2\">\n            <span>Everything in Pro · SSO · audit log · role-based permissions · 1 TB storage</span>\n            <row-ui gap=\"2\" align=\"center\">\n              <badge-ui text=\"Saves 30%\" variant=\"success\"></badge-ui>\n              <text-ui size=\"sm\" color=\"subtle\">Pay annually</text-ui>\n            </row-ui>\n          </col-ui>\n        </option-card-ui>\n\n        <option-card-ui name=\"plan\" value=\"enterprise\">\n          <row-ui slot=\"heading\" gap=\"2\" align=\"baseline\">\n            <span>Enterprise</span>\n            <text-ui color=\"subtle\" size=\"sm\" grow>For regulated industries</text-ui>\n            <span>custom</span>\n          </row-ui>\n          <col-ui slot=\"description\" gap=\"2\">\n            <span>Dedicated support · DPA · SCIM · on-prem deployment · talk to sales</span>\n            <row-ui gap=\"2\" align=\"center\">\n              <badge-ui text=\"Volume pricing\" variant=\"accent\"></badge-ui>\n              <text-ui size=\"sm\" color=\"subtle\">Custom contract</text-ui>\n            </row-ui>\n          </col-ui>\n        </option-card-ui>\n\n        <option-card-ui name=\"plan\" value=\"custom\">\n          <row-ui slot=\"heading\" gap=\"2\" align=\"baseline\">\n            <span>Something else</span>\n            <text-ui color=\"subtle\" size=\"sm\" grow>Tell us what you need</text-ui>\n            <span>talk to us</span>\n          </row-ui>\n          <span slot=\"description\">None of these fit? Tell us what you need and we'll quote a custom plan within one business day.</span>\n          <textarea-ui name=\"custom-requirements\" rows=\"4\"\n                       label=\"Your requirements\"\n                       placeholder=\"Volume, compliance needs, integrations, deployment constraints — whatever you'd want a sales engineer to know up front.\"></textarea-ui>\n        </option-card-ui>\n      </col-ui>\n    </section>",
   "source": "site/pages/examples/registration/plan/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }