@adia-ai/a2ui-corpus 0.0.1 → 0.0.3

package/chunks/stat-chart-slot.json

@@ -0,0 +1,15 @@
+{
+  "name": "stat-chart-slot",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/stat",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "chart-slot"
+  },
+  "html": "<section data-section data-property=\"chart-slot\" data-chunk=\"stat-chart-slot\">\n  <h2 variant=\"section\">Inline sparkline (<code>slot=\"chart\"</code>)</h2>\n  <p data-note>The <code>chart</code> slot accepts a nested <code>chart-ui</code> — stat-ui's grid reflows so the chart spans the right column across the value + change rows. Pair with <code>type=\"sparkline\"</code> for the canonical KPI-with-trajectory tile.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"stat with sparkline slot\" style=\"align-items:stretch; flex:1;\">\n      <div style=\"display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:var(--a-space-4); width:100%; align-self:stretch;\">\n        <card-ui>\n          <section>\n            <stat-ui label=\"Revenue\" value=\"$48.2k\" change=\"+12.5%\" trend=\"up\">\n              <chart-ui id=\"stat-chart-1\" slot=\"chart\" type=\"sparkline\" x=\"month\" y=\"value\"></chart-ui>\n            </stat-ui>\n          </section>\n        </card-ui>\n        <card-ui>\n          <section>\n            <stat-ui label=\"Users\" value=\"2,340\" change=\"+8%\" trend=\"up\">\n              <chart-ui id=\"stat-chart-2\" slot=\"chart\" type=\"bar\" x=\"month\" y=\"value\" hide-grid></chart-ui>\n            </stat-ui>\n          </section>\n        </card-ui>\n        <card-ui>\n          <section>\n            <stat-ui label=\"Bounce\" value=\"24.3%\" change=\"-3.1%\" trend=\"down\">\n              <chart-ui id=\"stat-chart-3\" slot=\"chart\" type=\"sparkline\" x=\"month\" y=\"value\"></chart-ui>\n            </stat-ui>\n          </section>\n        </card-ui>\n      </div>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/components/stat/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/stat-data-stream.json

@@ -0,0 +1,15 @@
+{
+  "name": "stat-data-stream",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/stat",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "data-stream"
+  },
+  "html": "<section data-section data-property=\"data-stream\" data-chunk=\"stat-data-stream\">\n  <h2 variant=\"section\">Data stream (<code>data-stream-*</code>)</h2>\n  <p data-note>\n    Two patterns work well for stat-ui — the universal\n    <code>data-stream-*</code> trait drives any combination via\n    attributes alone.\n  </p>\n\n  <h3>Spread the response onto the element (<code>target=\"*\"</code>)</h3>\n  <p data-note>\n    <code>/site/mock/kpi.json</code> shape:\n    <code>{label, value, change, trend, icon}</code> — perfect for\n    <code>target=\"*\"</code>. <code>Object.assign(stat, response)</code>\n    sets every property at once.\n  </p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='stat-ui[data-stream-target=\"*\"]'>\n      <card-ui style=\"max-width:300px;\">\n        <section>\n          <stat-ui aria-label=\"KPI from kpi.json\"\n                   data-stream-src=\"/site/mock/kpi.json\"\n                   data-stream-target=\"*\"></stat-ui>\n        </section>\n      </card-ui>\n    </div>\n  </div>\n\n  <h3>Drive a single property via path</h3>\n  <p data-note>\n    Set <code>data-stream-target</code> to the specific property name\n    + <code>data-stream-path</code> to the JSON path. Below: the stat's\n    <code>value</code> reads <code>kpi.json</code>'s <code>value</code>\n    field; everything else is authored on the element.\n  </p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='stat-ui[data-stream-target=\"value\"][data-stream-path=\"value\"]'>\n      <card-ui style=\"max-width:300px;\">\n        <section>\n          <stat-ui label=\"Current Revenue\"\n                   trend=\"up\"\n                   change=\"vs last month\"\n                   icon=\"currency-dollar\"\n                   aria-label=\"Revenue from kpi.json (single field)\"\n                   data-stream-src=\"/site/mock/kpi.json\"\n                   data-stream-path=\"value\"\n                   data-stream-target=\"value\"></stat-ui>\n        </section>\n      </card-ui>\n    </div>\n  </div>\n\n  <p data-note>\n    See <a href=\"/site/components/chart#data-stream\">chart-ui's\n    data-stream section</a> for the full attribute surface, format\n    auto-detection (json / csv / tsv / jsonl / text), and shared-stream\n    fan-out via <code>data-stream-id</code>.\n  </p>\n</section>",
+  "source": "site/pages/components/stat/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/stat-grid.json

@@ -0,0 +1,15 @@
+{
+  "name": "stat-grid",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/stat",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "grid"
+  },
+  "html": "<section data-section data-property=\"grid\" data-chunk=\"stat-grid\">\n  <h2 variant=\"section\">Stats Grid</h2>\n  <p data-note>Four stats in a responsive grid layout.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"4-stat grid\" style=\"align-items:stretch; flex:1;\">\n      <div style=\"display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:var(--a-space-4); width:100%; align-self:stretch;\">\n        <stat-ui value=\"12,847\" label=\"Total Users\" icon=\"users\" change=\"+12%\" trend=\"up\"></stat-ui>\n        <stat-ui value=\"$142.5k\" label=\"Revenue\" icon=\"currency-dollar\" change=\"+8.2%\" trend=\"up\"></stat-ui>\n        <stat-ui value=\"3,421\" label=\"Orders\" icon=\"shopping-cart\" change=\"-2.1%\" trend=\"down\"></stat-ui>\n        <stat-ui value=\"98.5%\" label=\"Satisfaction\" icon=\"heart\" change=\"0%\" trend=\"neutral\"></stat-ui>\n      </div>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/stat/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/stat-icon.json

@@ -0,0 +1,15 @@
+{
+  "name": "stat-icon",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/stat",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "icon"
+  },
+  "html": "<section data-section data-property=\"icon\" data-chunk=\"stat-icon\">\n  <h2 variant=\"section\">icon</h2>\n  <p data-note>Optional leading icon by Phosphor name.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"users icon\">\n      <stat-ui value=\"1,234\" label=\"Users\" icon=\"users\" change=\"+12%\" trend=\"up\"></stat-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"dollar icon\">\n      <stat-ui value=\"$42.5k\" label=\"Revenue\" icon=\"currency-dollar\" change=\"-3%\" trend=\"down\"></stat-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"check icon\">\n      <stat-ui value=\"99.9%\" label=\"Uptime\" icon=\"check-circle\"></stat-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/stat/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/stat-label.json

@@ -0,0 +1,15 @@
+{
+  "name": "stat-label",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/stat",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "label"
+  },
+  "html": "<section data-section data-property=\"label\" data-chunk=\"stat-label\">\n  <h2 variant=\"section\">label</h2>\n  <p data-note>The metric label rendered beneath the value.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='label=\"Active Users\"'>\n      <stat-ui value=\"847\" label=\"Active Users\"></stat-ui>\n      </div>\n    <div data-artifact-item data-artifact-label='label=\"Open Issues\"'>\n      <stat-ui value=\"23\" label=\"Open Issues\"></stat-ui>\n      </div>\n    <div data-artifact-item data-artifact-label='label=\"Avg. Order Value\"'>\n      <stat-ui value=\"$128\" label=\"Avg. Order Value\"></stat-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/stat/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/stat-trend.json

@@ -0,0 +1,15 @@
+{
+  "name": "stat-trend",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/stat",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "trend"
+  },
+  "html": "<section data-section data-property=\"trend\" data-chunk=\"stat-trend\">\n  <h2 variant=\"section\">trend</h2>\n  <p data-note>Trend direction colors the change badge: up (green), down (red), neutral.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"trend up (+12%)\">\n      <stat-ui value=\"2,847\" label=\"Users\" change=\"+12%\" trend=\"up\"></stat-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"trend down (-8%)\">\n      <stat-ui value=\"$38.2k\" label=\"Revenue\" change=\"-8%\" trend=\"down\"></stat-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"neutral\">\n      <stat-ui value=\"342\" label=\"Orders\" change=\"0%\" trend=\"neutral\"></stat-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/stat/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/stat-value.json

@@ -0,0 +1,15 @@
+{
+  "name": "stat-value",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/stat",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "value"
+  },
+  "html": "<section data-section data-property=\"value\" data-chunk=\"stat-value\">\n  <h2 variant=\"section\">value</h2>\n  <p data-note>The primary metric value — numeric strings, currency, or percentages.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='value=\"1,234\"'>\n      <stat-ui value=\"1,234\" label=\"Users\"></stat-ui>\n      </div>\n    <div data-artifact-item data-artifact-label='value=\"$42.5k\"'>\n      <stat-ui value=\"$42.5k\" label=\"Revenue\"></stat-ui>\n      </div>\n    <div data-artifact-item data-artifact-label='value=\"99.9%\"'>\n      <stat-ui value=\"99.9%\" label=\"Uptime\"></stat-ui>\n      </div>\n    <div data-artifact-item data-artifact-label='value=\"4.8/5\"'>\n      <stat-ui value=\"4.8/5\" label=\"Rating\"></stat-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/stat/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/stepper-horizontal.json

@@ -0,0 +1,15 @@
+{
+  "name": "stepper-horizontal",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/stepper",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "horizontal"
+  },
+  "html": "<section data-section data-property=\"horizontal\" data-chunk=\"stepper-horizontal\">\n  <h2 variant=\"section\">Horizontal (default)</h2>\n  <p data-note>Default layout. <code>step=\"2\"</code> marks the first two as completed and the third as active.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"step=2\">\n      <stepper-ui step=\"2\">\n        <stepper-item-ui text=\"Account\"></stepper-item-ui>\n        <stepper-item-ui text=\"Details\"></stepper-item-ui>\n        <stepper-item-ui text=\"Review\"></stepper-item-ui>\n        <stepper-item-ui text=\"Confirm\"></stepper-item-ui>\n      </stepper-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/stepper/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/stepper-interactive.json

@@ -0,0 +1,15 @@
+{
+  "name": "stepper-interactive",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/stepper",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "interactive"
+  },
+  "html": "<section data-section data-property=\"interactive\" data-chunk=\"stepper-interactive\">\n  <h2 variant=\"section\">Interactive</h2>\n  <p data-note>Imperative methods: <code>.next()</code>, <code>.prev()</code>, <code>.goTo(i)</code>.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"step=0\">\n      <stepper-ui id=\"stepper-interactive\" step=\"1\">\n        <stepper-item-ui text=\"Step 1\"></stepper-item-ui>\n        <stepper-item-ui text=\"Step 2\"></stepper-item-ui>\n        <stepper-item-ui text=\"Step 3\"></stepper-item-ui>\n        <stepper-item-ui text=\"Step 4\"></stepper-item-ui>\n      </stepper-ui>\n      <div style=\"display:flex; gap:var(--a-space-2); margin-top:var(--a-space-3);\">\n        <button-ui id=\"stepper-prev\" text=\"Previous\" variant=\"outline\"></button-ui>\n        <button-ui id=\"stepper-next\" text=\"Next\" variant=\"primary\"></button-ui>\n      </div>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/components/stepper/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/stepper-step.json

@@ -0,0 +1,15 @@
+{
+  "name": "stepper-step",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/stepper",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "step"
+  },
+  "html": "<section data-section data-property=\"step\" data-chunk=\"stepper-step\">\n  <h2 variant=\"section\">step index</h2>\n  <p data-note>Steps before the index are auto-completed; the current index is active; the rest are pending.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"step\">\n      <stepper-ui step=\"0\">\n        <stepper-item-ui text=\"One\"></stepper-item-ui>\n        <stepper-item-ui text=\"Two\"></stepper-item-ui>\n        <stepper-item-ui text=\"Three\"></stepper-item-ui>\n      </stepper-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"step=1\">\n      <stepper-ui step=\"1\">\n        <stepper-item-ui text=\"One\"></stepper-item-ui>\n        <stepper-item-ui text=\"Two\"></stepper-item-ui>\n        <stepper-item-ui text=\"Three\"></stepper-item-ui>\n      </stepper-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"step=2\">\n      <stepper-ui step=\"2\">\n        <stepper-item-ui text=\"One\"></stepper-item-ui>\n        <stepper-item-ui text=\"Two\"></stepper-item-ui>\n        <stepper-item-ui text=\"Three\"></stepper-item-ui>\n      </stepper-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/stepper/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/stepper-vertical.json

@@ -0,0 +1,15 @@
+{
+  "name": "stepper-vertical",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/stepper",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "vertical"
+  },
+  "html": "<section data-section data-property=\"vertical\" data-chunk=\"stepper-vertical\">\n  <h2 variant=\"section\">Vertical</h2>\n  <p data-note>Vertical orientation for sidebar wizards, with descriptions under each step.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"vertical step=1\">\n      <stepper-ui orientation=\"vertical\" step=\"1\">\n        <stepper-item-ui text=\"Select plan\"  description=\"Choose your subscription\"></stepper-item-ui>\n        <stepper-item-ui text=\"Payment\"      description=\"Enter payment details\"></stepper-item-ui>\n        <stepper-item-ui text=\"Confirmation\" description=\"Review and submit\"></stepper-item-ui>\n      </stepper-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/stepper/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/stream-basic.json

@@ -0,0 +1,15 @@
+{
+  "name": "stream-basic",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/stream",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "basic"
+  },
+  "html": "<section data-section data-property=\"basic\" data-chunk=\"stream-basic\">\n  <h2 variant=\"section\">basic</h2>\n  <p data-note>Static text content. Without an async iterable assigned, the element renders its text content as-is.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"static content\">\n      <stream-ui>This is static content inside a stream element. Assign an AsyncIterable to the .tokens property to begin streaming.</stream-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/stream/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/stream-hide-cursor.json

@@ -0,0 +1,15 @@
+{
+  "name": "stream-hide-cursor",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/stream",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "hide-cursor"
+  },
+  "html": "<section data-section data-property=\"hide-cursor\" data-chunk=\"stream-hide-cursor\">\n  <h2 variant=\"section\">hide-cursor</h2>\n  <p data-note>The blinking cursor is shown during active streaming by default. Add the <code>hide-cursor</code> attribute to suppress it.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"cursor (default)\">\n      <stream-ui streaming>Streaming with cursor...</stream-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"hide-cursor\">\n      <stream-ui hide-cursor streaming>Streaming without cursor...</stream-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/stream/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/stream-pace.json

@@ -0,0 +1,15 @@
+{
+  "name": "stream-pace",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/stream",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "pace"
+  },
+  "html": "<section data-section data-property=\"pace\" data-chunk=\"stream-pace\">\n  <h2 variant=\"section\">pace</h2>\n  <p data-note>Milliseconds between each character render. Set to <code>0</code> (default) for real-time output, or a positive number for a typewriter effect.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"pace is a JS property (default: 0)\">\n      <stream-ui>Pace is set programmatically when assigning .tokens. A value of 0 renders tokens immediately; higher values create a typewriter effect.</stream-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/stream/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/stream-streaming.json

@@ -0,0 +1,15 @@
+{
+  "name": "stream-streaming",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/stream",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "streaming"
+  },
+  "html": "<section data-section data-property=\"streaming\" data-chunk=\"stream-streaming\">\n  <h2 variant=\"section\">streaming</h2>\n  <p data-note>Indicates the stream is actively receiving tokens. Shows a typing indicator.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"streaming\"><stream-ui streaming>Generating response</stream-ui></div>\n    <div data-artifact-item data-artifact-label=\"idle\"><stream-ui>Response complete.</stream-ui></div>\n  </div>\n</section>",
+  "source": "site/pages/components/stream/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/swiper-autoplay.json

@@ -0,0 +1,15 @@
+{
+  "name": "swiper-autoplay",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/swiper",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "autoplay"
+  },
+  "html": "<section data-section data-property=\"autoplay\" data-chunk=\"swiper-autoplay\">\n  <h2 variant=\"section\">autoplay</h2>\n  <p data-note>Auto-advances slides at the given interval. Pauses on hover/focus. Respects <code>prefers-reduced-motion</code>.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"autoplay + loop\">\n      <swiper-ui autoplay interval=\"3000\" loop gap=\"4\" aria-label=\"Testimonials\">\n        <card-ui variant=\"outlined\">\n          <section>\n            <col-ui gap=\"3\">\n              <icon-ui name=\"quotes\" color=\"muted\"></icon-ui>\n              <p nomargin>The API is intuitive and the defaults just work. We shipped in half the time.</p>\n              <divider-ui></divider-ui>\n              <row-ui gap=\"2\" align=\"center\">\n                <avatar-ui text=\"Sarah Chen\" size=\"sm\"></avatar-ui>\n                <col-ui gap=\"0\">\n                  <text-ui strong>Sarah Chen</text-ui>\n                  <text-ui color=\"subtle\">VP Engineering, Globex</text-ui>\n                </col-ui>\n              </row-ui>\n            </col-ui>\n          </section>\n        </card-ui>\n        <card-ui variant=\"outlined\">\n          <section>\n            <col-ui gap=\"3\">\n              <icon-ui name=\"quotes\" color=\"muted\"></icon-ui>\n              <p nomargin>Design tokens make theming predictable. We reskinned 3 brands in one afternoon.</p>\n              <divider-ui></divider-ui>\n              <row-ui gap=\"2\" align=\"center\">\n                <avatar-ui text=\"Marcus Rivera\" size=\"sm\"></avatar-ui>\n                <col-ui gap=\"0\">\n                  <text-ui strong>Marcus Rivera</text-ui>\n                  <text-ui color=\"subtle\">Design Lead, Hooli</text-ui>\n                </col-ui>\n              </row-ui>\n            </col-ui>\n          </section>\n        </card-ui>\n        <card-ui variant=\"outlined\">\n          <section>\n            <col-ui gap=\"3\">\n              <icon-ui name=\"quotes\" color=\"muted\"></icon-ui>\n              <p nomargin>Lighthouse scores jumped 30 points after migrating. Zero render-blocking.</p>\n              <divider-ui></divider-ui>\n              <row-ui gap=\"2\" align=\"center\">\n                <avatar-ui text=\"Priya Patel\" size=\"sm\"></avatar-ui>\n                <col-ui gap=\"0\">\n                  <text-ui strong>Priya Patel</text-ui>\n                  <text-ui color=\"subtle\">CTO, TechStart</text-ui>\n                </col-ui>\n              </row-ui>\n            </col-ui>\n          </section>\n        </card-ui>\n      </swiper-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/swiper/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/swiper-basic.json

@@ -0,0 +1,15 @@
+{
+  "name": "swiper-basic",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/swiper",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "basic"
+  },
+  "html": "<section data-section data-property=\"basic\" data-chunk=\"swiper-basic\">\n  <h2 variant=\"section\">basic</h2>\n  <p data-note>Single slide view. Swipe or use arrow keys to navigate between slides.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"default (1 slide)\">\n      <swiper-ui aria-label=\"Product gallery\">\n        <card-ui variant=\"outlined\">\n          <img src=\"https://picsum.photos/seed/swiper1/800/360\" alt=\"Mountain landscape\" style=\"width:100%; height:200px; object-fit:cover;\">\n          <section>\n            <col-ui gap=\"1\">\n              <text-ui strong>Mountain Retreat</text-ui>\n              <text-ui color=\"subtle\">Escape to the peaks with panoramic alpine views and fresh mountain air.</text-ui>\n            </col-ui>\n          </section>\n        </card-ui>\n        <card-ui variant=\"outlined\">\n          <img src=\"https://picsum.photos/seed/swiper2/800/360\" alt=\"Ocean sunset\" style=\"width:100%; height:200px; object-fit:cover;\">\n          <section>\n            <col-ui gap=\"1\">\n              <text-ui strong>Coastal Paradise</text-ui>\n              <text-ui color=\"subtle\">White sand beaches, turquoise waters, and stunning sunsets every evening.</text-ui>\n            </col-ui>\n          </section>\n        </card-ui>\n        <card-ui variant=\"outlined\">\n          <img src=\"https://picsum.photos/seed/swiper3/800/360\" alt=\"Forest path\" style=\"width:100%; height:200px; object-fit:cover;\">\n          <section>\n            <col-ui gap=\"1\">\n              <text-ui strong>Forest Lodge</text-ui>\n              <text-ui color=\"subtle\">Secluded cabins surrounded by ancient redwoods and winding trails.</text-ui>\n            </col-ui>\n          </section>\n        </card-ui>\n        <card-ui variant=\"outlined\">\n          <img src=\"https://picsum.photos/seed/swiper4/800/360\" alt=\"City skyline\" style=\"width:100%; height:200px; object-fit:cover;\">\n          <section>\n            <col-ui gap=\"1\">\n              <text-ui strong>Urban Explorer</text-ui>\n              <text-ui color=\"subtle\">Boutique hotels in the heart of the city with rooftop skyline views.</text-ui>\n            </col-ui>\n          </section>\n        </card-ui>\n      </swiper-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/swiper/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/swiper-combo.json

@@ -0,0 +1,15 @@
+{
+  "name": "swiper-combo",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/swiper",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-combo": ""
+  },
+  "html": "<section data-section data-combo data-chunk=\"swiper-combo\">\n  <h2 variant=\"section\">Combinations</h2>\n  <p data-note>Responsive auto layout with no explicit slides-per-view. Container queries adapt column count.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"responsive auto (no slides-per-view)\">\n      <swiper-ui gap=\"4\" aria-label=\"Responsive cards\">\n        <card-ui variant=\"outlined\">\n          <section>\n            <col-ui gap=\"2\">\n              <icon-ui name=\"chart-bar\" color=\"primary\"></icon-ui>\n              <text-ui strong>Analytics</text-ui>\n              <text-ui color=\"subtle\">Track everything in real time.</text-ui>\n            </col-ui>\n          </section>\n        </card-ui>\n        <card-ui variant=\"outlined\">\n          <section>\n            <col-ui gap=\"2\">\n              <icon-ui name=\"shield-check\" color=\"success\"></icon-ui>\n              <text-ui strong>Security</text-ui>\n              <text-ui color=\"subtle\">Enterprise-grade protection.</text-ui>\n            </col-ui>\n          </section>\n        </card-ui>\n        <card-ui variant=\"outlined\">\n          <section>\n            <col-ui gap=\"2\">\n              <icon-ui name=\"cloud\" color=\"accent\"></icon-ui>\n              <text-ui strong>Cloud</text-ui>\n              <text-ui color=\"subtle\">Scale without limits.</text-ui>\n            </col-ui>\n          </section>\n        </card-ui>\n        <card-ui variant=\"outlined\">\n          <section>\n            <col-ui gap=\"2\">\n              <icon-ui name=\"robot\" color=\"warning\"></icon-ui>\n              <text-ui strong>AI</text-ui>\n              <text-ui color=\"subtle\">Built-in intelligence.</text-ui>\n            </col-ui>\n          </section>\n        </card-ui>\n      </swiper-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/swiper/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/swiper-gap.json

@@ -0,0 +1,15 @@
+{
+  "name": "swiper-gap",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/swiper",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "gap"
+  },
+  "html": "<section data-section data-property=\"gap\" data-chunk=\"swiper-gap\">\n  <h2 variant=\"section\">gap</h2>\n  <p data-note>Space between slides. Accepts any CSS length or spacing token.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"gap=0\">\n      <swiper-ui gap=\"0\" style=\"width:240px;\"><div>1</div><div>2</div><div>3</div></swiper-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"gap=1rem\">\n      <swiper-ui gap=\"1rem\" style=\"width:240px;\"><div>1</div><div>2</div><div>3</div></swiper-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"gap=2rem\">\n      <swiper-ui gap=\"2rem\" style=\"width:240px;\"><div>1</div><div>2</div><div>3</div></swiper-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/swiper/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/swiper-interval.json

@@ -0,0 +1,15 @@
+{
+  "name": "swiper-interval",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/swiper",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "interval"
+  },
+  "html": "<section data-section data-property=\"interval\" data-chunk=\"swiper-interval\">\n  <h2 variant=\"section\">interval</h2>\n  <p data-note>Auto-advance delay in milliseconds. When set, the swiper cycles through slides automatically.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"interval=2000\">\n      <swiper-ui interval=\"2000\" style=\"width:240px;\">\n        <div>Slide A</div><div>Slide B</div><div>Slide C</div>\n      </swiper-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"interval=5000\">\n      <swiper-ui interval=\"5000\" style=\"width:240px;\">\n        <div>Slow 1</div><div>Slow 2</div><div>Slow 3</div>\n      </swiper-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/swiper/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/swiper-loop.json

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

package/chunks/swiper-peek.json

@@ -0,0 +1,15 @@
+{
+  "name": "swiper-peek",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/swiper",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "peek"
+  },
+  "html": "<section data-section data-property=\"peek\" data-chunk=\"swiper-peek\">\n  <h2 variant=\"section\">peek</h2>\n  <p data-note>Shows a sliver of adjacent slides to hint there's more content.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"peek + 2-up\">\n      <swiper-ui slides-per-view=\"2\" peek gap=\"4\" aria-label=\"Peek demo\">\n        <card-ui>\n          <section>\n            <col-ui gap=\"2\" align=\"center\">\n              <avatar-ui text=\"Jordan Lee\" size=\"lg\"></avatar-ui>\n              <text-ui strong>Jordan Lee</text-ui>\n              <text-ui color=\"subtle\">Engineer</text-ui>\n            </col-ui>\n          </section>\n        </card-ui>\n        <card-ui>\n          <section>\n            <col-ui gap=\"2\" align=\"center\">\n              <avatar-ui text=\"Emma Davis\" size=\"lg\"></avatar-ui>\n              <text-ui strong>Emma Davis</text-ui>\n              <text-ui color=\"subtle\">Designer</text-ui>\n            </col-ui>\n          </section>\n        </card-ui>\n        <card-ui>\n          <section>\n            <col-ui gap=\"2\" align=\"center\">\n              <avatar-ui text=\"Tom Wright\" size=\"lg\"></avatar-ui>\n              <text-ui strong>Tom Wright</text-ui>\n              <text-ui color=\"subtle\">DevOps</text-ui>\n            </col-ui>\n          </section>\n        </card-ui>\n        <card-ui>\n          <section>\n            <col-ui gap=\"2\" align=\"center\">\n              <avatar-ui text=\"Lisa Chang\" size=\"lg\"></avatar-ui>\n              <text-ui strong>Lisa Chang</text-ui>\n              <text-ui color=\"subtle\">Staff Eng</text-ui>\n            </col-ui>\n          </section>\n        </card-ui>\n      </swiper-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/swiper/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

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

@@ -0,0 +1,15 @@
+{
+  "name": "swiper-slides-per-view",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/swiper",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "slides-per-view"
+  },
+  "html": "<section data-section data-property=\"slides-per-view\" data-chunk=\"swiper-slides-per-view\">\n  <h2 variant=\"section\">slides-per-view</h2>\n  <p data-note>Show multiple slides at once. Set <code>slides-per-view=\"2\"</code>, <code>\"3\"</code>, or <code>\"4\"</code>.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='slides-per-view=\"3\"'>\n      <swiper-ui slides-per-view=\"3\" gap=\"4\" aria-label=\"Feature cards\">\n        <card-ui variant=\"outlined\">\n          <section>\n            <col-ui gap=\"2\">\n              <icon-ui name=\"lightning\" color=\"primary\"></icon-ui>\n              <text-ui strong>Fast</text-ui>\n              <text-ui color=\"subtle\">Sub-ms renders</text-ui>\n            </col-ui>\n          </section>\n        </card-ui>\n        <card-ui variant=\"outlined\">\n          <section>\n            <col-ui gap=\"2\">\n              <icon-ui name=\"paint-brush\" color=\"accent\"></icon-ui>\n              <text-ui strong>Themeable</text-ui>\n              <text-ui color=\"subtle\">Design tokens</text-ui>\n            </col-ui>\n          </section>\n        </card-ui>\n        <card-ui variant=\"outlined\">\n          <section>\n            <col-ui gap=\"2\">\n              <icon-ui name=\"wheelchair\" color=\"success\"></icon-ui>\n              <text-ui strong>Accessible</text-ui>\n              <text-ui color=\"subtle\">ARIA built-in</text-ui>\n            </col-ui>\n          </section>\n        </card-ui>\n        <card-ui variant=\"outlined\">\n          <section>\n            <col-ui gap=\"2\">\n              <icon-ui name=\"code\" color=\"warning\"></icon-ui>\n              <text-ui strong>Simple</text-ui>\n              <text-ui color=\"subtle\">Light DOM</text-ui>\n            </col-ui>\n          </section>\n        </card-ui>\n        <card-ui variant=\"outlined\">\n          <section>\n            <col-ui gap=\"2\">\n              <icon-ui name=\"devices\" color=\"danger\"></icon-ui>\n              <text-ui strong>Responsive</text-ui>\n              <text-ui color=\"subtle\">Container queries</text-ui>\n            </col-ui>\n          </section>\n        </card-ui>\n      </swiper-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/swiper/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/swiper-snap.json

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

package/chunks/switch-checked.json

@@ -0,0 +1,15 @@
+{
+  "name": "switch-checked",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/switch",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "checked"
+  },
+  "html": "<section data-section data-property=\"checked\" data-chunk=\"switch-checked\">\n  <h2 variant=\"section\">checked</h2>\n  <p data-note>Controls the on/off state. Click or press Space/Enter to toggle.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"off\">\n      <field-ui label=\"Off\" inline>\n        <switch-ui></switch-ui>\n      </field-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"on\">\n      <field-ui label=\"On\" inline>\n        <switch-ui checked></switch-ui>\n      </field-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/switch/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/switch-combinations.json

@@ -0,0 +1,15 @@
+{
+  "name": "switch-combinations",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/switch",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "combinations"
+  },
+  "html": "<section data-section data-property=\"combinations\" data-chunk=\"switch-combinations\">\n  <h2 variant=\"section\">Combinations</h2>\n  <p data-note>Common switch group patterns in settings panels.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"settings panel\">\n      <div style=\"display:flex; flex-direction:column; gap:var(--a-space-3);\">\n        <field-ui label=\"Dark mode\" inline>\n          <switch-ui checked></switch-ui>\n        </field-ui>\n        <field-ui label=\"Notifications\" inline>\n          <switch-ui checked></switch-ui>\n        </field-ui>\n        <field-ui label=\"Sound effects\" inline>\n          <switch-ui></switch-ui>\n        </field-ui>\n        <field-ui label=\"Analytics\" inline>\n          <switch-ui disabled></switch-ui>\n        </field-ui>\n        <field-ui label=\"Beta features\" inline>\n          <switch-ui checked disabled></switch-ui>\n        </field-ui>\n      </div>\n      </div>\n    <div data-artifact-item data-artifact-label=\"connectivity\">\n      <div style=\"display:flex; flex-direction:column; gap:var(--a-space-3);\">\n        <field-ui label=\"Wi-Fi\" inline>\n          <switch-ui checked></switch-ui>\n        </field-ui>\n        <field-ui label=\"Bluetooth\" inline>\n          <switch-ui></switch-ui>\n        </field-ui>\n        <field-ui label=\"Airplane Mode\" inline>\n          <switch-ui></switch-ui>\n        </field-ui>\n        <field-ui label=\"VPN\" inline>\n          <switch-ui checked></switch-ui>\n        </field-ui>\n      </div>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/switch/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/switch-disabled.json

@@ -0,0 +1,15 @@
+{
+  "name": "switch-disabled",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/switch",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "disabled"
+  },
+  "html": "<section data-section data-property=\"disabled\" data-chunk=\"switch-disabled\">\n  <h2 variant=\"section\">disabled</h2>\n  <p data-note>Prevents interaction and applies muted styling.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"disabled off\">\n      <field-ui label=\"Disabled Off\" inline>\n        <switch-ui disabled></switch-ui>\n      </field-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"disabled on\">\n      <field-ui label=\"Disabled On\" inline>\n        <switch-ui checked disabled></switch-ui>\n      </field-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/switch/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/switch-edge-cases.json

@@ -0,0 +1,15 @@
+{
+  "name": "switch-edge-cases",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/switch",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "edge-cases"
+  },
+  "html": "<section data-section data-property=\"edge-cases\" data-chunk=\"switch-edge-cases\">\n  <h2 variant=\"section\">Edge Cases</h2>\n  <p data-note>Boundary conditions.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"bare (no props)\">\n      <switch-ui></switch-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"checked, no label\">\n      <switch-ui checked></switch-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/switch/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/switch-label.json

@@ -0,0 +1,15 @@
+{
+  "name": "switch-label",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/switch",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "label"
+  },
+  "html": "<section data-section data-property=\"label\" data-chunk=\"switch-label\">\n  <h2 variant=\"section\">label</h2>\n  <p data-note>Text label displayed alongside the switch.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"with label\">\n      <field-ui label=\"Email notifications\" inline>\n        <switch-ui checked></switch-ui>\n      </field-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"no label\">\n      <switch-ui></switch-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"long label\">\n      <field-ui label=\"Enable automatic synchronization of all connected devices\" inline>\n        <switch-ui></switch-ui>\n      </field-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/switch/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/switch-size.json

@@ -0,0 +1,15 @@
+{
+  "name": "switch-size",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/switch",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "size"
+  },
+  "html": "<section data-section data-property=\"size\" data-chunk=\"switch-size\">\n  <h2 variant=\"section\">size</h2>\n  <p data-note>Three sizes available via the size attribute: sm, md (default), lg.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"sm\">\n      <field-ui label=\"Small\" inline>\n        <switch-ui size=\"sm\" checked></switch-ui>\n      </field-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"md (default)\">\n      <field-ui label=\"Medium\" inline>\n        <switch-ui checked></switch-ui>\n      </field-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"lg\">\n      <field-ui label=\"Large\" inline>\n        <switch-ui size=\"lg\" checked></switch-ui>\n      </field-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/switch/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/table-cell-types.json

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