@adia-ai/a2ui-corpus 0.0.3 → 0.0.5

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-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

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-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

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-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

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-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

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-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

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-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

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-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/chat-basic.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"basic\" data-chunk=\"chat-basic\">\n  <h2 variant=\"section\">basic</h2>\n  <p data-note>A chat transcript with two messages. Use <code>role</code> on children to style user vs assistant turns.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"basic\">\n      <chat-ui>\n        <div role=\"user\">What's the capital of France?</div>\n        <div role=\"assistant\">The capital of France is Paris.</div>\n      </chat-ui>\n    </div>\n  </div>\n</section>",
   "source": "site/pages/components/chat/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/chat-streaming.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"streaming\" data-chunk=\"chat-streaming\">\n  <h2 variant=\"section\">streaming</h2>\n  <p data-note>Enable the streaming cursor by setting the <code>streaming</code> attribute on an in-progress assistant message.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"streaming\">\n      <chat-ui>\n        <div role=\"user\">Explain black holes briefly.</div>\n        <div role=\"assistant\" streaming>A black hole is a region of spacetime where gravity is so strong that</div>\n      </chat-ui>\n    </div>\n  </div>\n</section>",
   "source": "site/pages/components/chat/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/chat-with-input.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"with-input\" data-chunk=\"chat-with-input\">\n  <h2 variant=\"section\">with input</h2>\n  <p data-note>Compose with <code>chat-input-ui</code> for a full conversation surface.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"with-input\">\n      <chat-ui>\n        <div role=\"user\">Give me a short haiku about the ocean.</div>\n        <div role=\"assistant\">\n          Waves whisper secrets —<br>\n          the tide retreats then returns,<br>\n          carrying the moon.\n        </div>\n      </chat-ui>\n      <chat-input-ui placeholder=\"Type a message...\"></chat-input-ui>\n    </div>\n  </div>\n</section>",
   "source": "site/pages/components/chat/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

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-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

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-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

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-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

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-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

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-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

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-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

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-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

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-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

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-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

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-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

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-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

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-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

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-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

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-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

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-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

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-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

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-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

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-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

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-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

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-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

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-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

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-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

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-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

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-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

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-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

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-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

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-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

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-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

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-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

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-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

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-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

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-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/conversion-funnel-4-step-funnel.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"4-step-funnel\" data-chunk=\"conversion-funnel-4-step-funnel\">\n  <h2 variant=\"section\">Four-step funnel</h2>\n  <p data-note>Top step is an explicit 100% baseline (no progress bar — it's the anchor). Subsequent steps use <code>progress-row-ui</code> with the count + percentage in the meta slot.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"conversion funnel\">\n      <card-ui style=\"max-width: 560px;\">\n        <header>\n          <h3>Conversion funnel</h3>\n          <text-ui slot=\"description\" color=\"subtle\">Visit → Sign up → Activate → Convert</text-ui>\n        </header>\n        <section>\n          <col-ui gap=\"3\">\n            <row-ui align=\"center\" gap=\"3\">\n              <col-ui gap=\"0\" grow>\n                <text-ui strong>Visited landing page</text-ui>\n                <text-ui color=\"subtle\">28,432 visitors</text-ui>\n              </col-ui>\n              <text-ui strong>100%</text-ui>\n            </row-ui>\n            <progress-row-ui label=\"Signed up\" value=\"42\" meta=\"11,942 · 42%\"></progress-row-ui>\n            <progress-row-ui label=\"Activated\" value=\"28\" meta=\"7,961 · 28%\"></progress-row-ui>\n            <progress-row-ui label=\"Converted to paid\" value=\"8\" meta=\"2,274 · 8.0%\"></progress-row-ui>\n          </col-ui>\n        </section>\n      </card-ui>\n    </div>\n  </div>\n</section>",
   "source": "site/pages/patterns/conversion-funnel/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/conversion-funnel-wide-summary.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"wide-summary\" data-chunk=\"conversion-funnel-wide-summary\">\n  <h2 variant=\"section\">Wide summary with step-over-step delta</h2>\n  <p data-note>For board reporting, combine the funnel with a step-over-step delta column so stakeholders can see exactly where the biggest drop-off happens. Delta is a <code>badge-ui</code> colored by severity.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"funnel with step-over-step\">\n      <card-ui style=\"max-width: 640px;\">\n        <header>\n          <h3>Signup funnel</h3>\n          <text-ui slot=\"description\" color=\"subtle\">Step-over-step conversion, last 7 days</text-ui>\n        </header>\n        <section>\n          <col-ui gap=\"3\">\n            <row-ui align=\"center\" gap=\"3\">\n              <col-ui gap=\"0\" grow>\n                <text-ui strong>Signup form viewed</text-ui>\n                <text-ui color=\"subtle\">8,420 visitors</text-ui>\n              </col-ui>\n              <text-ui strong>100%</text-ui>\n            </row-ui>\n            <row-ui align=\"center\" gap=\"3\">\n              <progress-row-ui label=\"Email verified\" value=\"68\" meta=\"5,726 · 68%\" grow></progress-row-ui>\n              <badge-ui text=\"−32%\" variant=\"warning\"></badge-ui>\n            </row-ui>\n            <row-ui align=\"center\" gap=\"3\">\n              <progress-row-ui label=\"Workspace created\" value=\"54\" meta=\"4,547 · 54%\" grow></progress-row-ui>\n              <badge-ui text=\"−21%\" variant=\"muted\"></badge-ui>\n            </row-ui>\n            <row-ui align=\"center\" gap=\"3\">\n              <progress-row-ui label=\"Invited a teammate\" value=\"22\" meta=\"1,852 · 22%\" grow></progress-row-ui>\n              <badge-ui text=\"−59%\" variant=\"danger\"></badge-ui>\n            </row-ui>\n          </col-ui>\n        </section>\n      </card-ui>\n    </div>\n  </div>\n</section>",
   "source": "site/pages/patterns/conversion-funnel/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/conversion-funnel-with-segment-compare.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"with-segment-compare\" data-chunk=\"conversion-funnel-with-segment-compare\">\n  <h2 variant=\"section\">With segment comparison</h2>\n  <p data-note>Pair the funnel card with a segmented control in <code>slot=\"action\"</code> so users can switch between cohorts (e.g. new-vs-returning, mobile-vs-desktop). Swap the <code>value</code> + <code>meta</code> attributes in setup.js on segment change.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"funnel with cohort toggle\">\n      <card-ui style=\"max-width: 560px;\">\n        <header>\n          <h3>Checkout funnel</h3>\n          <text-ui slot=\"description\" color=\"subtle\">Last 30 days · by first-time vs returning</text-ui>\n          <span slot=\"action\">\n            <segmented-ui value=\"new\" size=\"sm\">\n              <segment-ui value=\"new\" text=\"New\"></segment-ui>\n              <segment-ui value=\"returning\" text=\"Returning\"></segment-ui>\n            </segmented-ui>\n          </span>\n        </header>\n        <section>\n          <col-ui gap=\"3\">\n            <row-ui align=\"center\" gap=\"3\">\n              <col-ui gap=\"0\" grow>\n                <text-ui strong>Cart viewed</text-ui>\n                <text-ui color=\"subtle\">42,180 sessions</text-ui>\n              </col-ui>\n              <text-ui strong>100%</text-ui>\n            </row-ui>\n            <progress-row-ui label=\"Added to cart\" value=\"58\" meta=\"24,464 · 58%\"></progress-row-ui>\n            <progress-row-ui label=\"Reached payment\" value=\"34\" meta=\"14,341 · 34%\"></progress-row-ui>\n            <progress-row-ui label=\"Completed purchase\" value=\"19\" meta=\"8,014 · 19%\"></progress-row-ui>\n          </col-ui>\n        </section>\n        <footer divider>\n          <small slot=\"description\">Funnel window: 30 days · ends at first purchase or abandonment.</small>\n          <span slot=\"action\">\n            <button-ui text=\"View in analytics\" variant=\"ghost\" size=\"sm\" icon=\"arrow-square-out\"></button-ui>\n          </span>\n        </footer>\n      </card-ui>\n    </div>\n  </div>\n</section>",
   "source": "site/pages/patterns/conversion-funnel/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/dashboard-acquisition-panel.json

@@ -13,5 +13,5 @@
   },
   "html": "<div data-tab-panel=\"acquisition\" hidden data-chunk=\"dashboard-acquisition-panel\" data-chunk-kind=\"panel\">\n        <grid-ui columns=\"3\" gap=\"4\" data-chunk=\"dashboard-traffic-channels\">\n          <card-ui span=\"2\">\n            <header>\n              <h3>Traffic</h3>\n              <text-ui slot=\"description\" color=\"subtle\">Sessions per day</text-ui>\n              <div slot=\"action\">\n                <segmented-ui value=\"30d\">\n                  <segment-ui value=\"7d\" text=\"7d\"></segment-ui>\n                  <segment-ui value=\"30d\" text=\"30d\"></segment-ui>\n                  <segment-ui value=\"90d\" text=\"90d\"></segment-ui>\n                </segmented-ui>\n              </div>\n            </header>\n            <section>\n              <chart-ui id=\"analytics-traffic\" type=\"line\" x=\"day\" y=\"sessions\" smooth=\"0.4\" hide-values></chart-ui>\n            </section>\n          </card-ui>\n          <card-ui>\n            <header>\n              <h3>Acquisition channels</h3>\n              <text-ui slot=\"description\" color=\"subtle\">Where sessions come from</text-ui>\n            </header>\n            <section>\n              <chart-ui id=\"analytics-channels\" type=\"donut\" x=\"channel\" y=\"sessions\" hide-values></chart-ui>\n            </section>\n          </card-ui>\n        </grid-ui>\n      </div>",
   "source": "site/pages/examples/admin-dashboard/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }