@adia-ai/a2ui-corpus 0.0.3 → 0.0.5

package/chunks/modal-trigger.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"trigger\" data-chunk=\"modal-trigger\">\n  <h2 variant=\"section\">trigger pattern</h2>\n  <p data-note>To open a modal interactively, set its open attribute to true via JavaScript: modalEl.open = true. Use onclick attributes for simple triggers.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"click to open\">\n      <button-ui text=\"Interactive\" variant=\"primary\" onclick=\"this.nextElementSibling.open=true\"></button-ui>\n      <modal-ui text=\"Interactive Modal\">\n        <p>This modal was opened by clicking the trigger button.</p>\n        <div slot=\"footer\" style=\"display:flex; gap:var(--a-space-2); justify-content:flex-end;\">\n          <button-ui text=\"Close\" variant=\"ghost\" onclick=\"this.closest('modal-ui').open=false\"></button-ui>\n          <button-ui text=\"Confirm\" variant=\"primary\" onclick=\"this.closest('modal-ui').open=false\"></button-ui>\n        </div>\n      </modal-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"danger confirmation\">\n      <button-ui text=\"Delete Item\" color=\"danger\" onclick=\"this.nextElementSibling.open=true\"></button-ui>\n      <modal-ui text=\"Delete Confirmation\" size=\"sm\">\n        <p>Are you sure you want to delete this item? This action cannot be undone.</p>\n        <div slot=\"footer\" style=\"display:flex; gap:var(--a-space-2); justify-content:flex-end;\">\n          <button-ui text=\"Cancel\" variant=\"ghost\" onclick=\"this.closest('modal-ui').open=false\"></button-ui>\n          <button-ui text=\"Delete\" color=\"danger\" onclick=\"this.closest('modal-ui').open=false\"></button-ui>\n        </div>\n      </modal-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/modal/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/noodles-animated.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"animated\" data-chunk=\"noodles-animated\">\n  <h2 variant=\"section\">animated</h2>\n  <p data-note>Animates the connection paths with a flow effect.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"animated\">\n      <noodles-ui id=\"noodle-animated\" animated style=\"position:relative; width:400px; height:160px; border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-md);\">\n        <div data-noodle-port=\"right\" style=\"position:absolute; left:20px; top:50px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);\">Start</div>\n        <div data-noodle-port=\"left\" style=\"position:absolute; left:280px; top:50px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);\">End</div>\n      </noodles-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/noodles/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/noodles-color.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"color\" data-chunk=\"noodles-color\">\n  <h2 variant=\"section\">color</h2>\n  <p data-note>Override the connection stroke color via CSS color value.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"accent color\">\n      <noodles-ui id=\"noodle-color-accent\" color=\"var(--a-accent)\" style=\"position:relative; width:400px; height:160px; border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-md);\">\n        <div data-noodle-port=\"right\" style=\"position:absolute; left:20px; top:50px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);\">A</div>\n        <div data-noodle-port=\"left\" style=\"position:absolute; left:280px; top:50px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);\">B</div>\n      </noodles-ui>\n      </div>\n  </div>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='color=\"crimson\"'>\n      <noodles-ui id=\"noodle-color-danger\" color=\"crimson\" style=\"position:relative; width:400px; height:160px; border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-md);\">\n        <div data-noodle-port=\"right\" style=\"position:absolute; left:20px; top:50px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);\">A</div>\n        <div data-noodle-port=\"left\" style=\"position:absolute; left:280px; top:50px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);\">B</div>\n      </noodles-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/noodles/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/noodles-curve.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"curve\" data-chunk=\"noodles-curve\">\n  <h2 variant=\"section\">curve</h2>\n  <p data-note>Connection curve style. Nodes and connections must be set via JavaScript.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"bezier (default)\">\n      <noodles-ui id=\"noodle-bezier\" style=\"position:relative; width:400px; height:200px; border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-md);\">\n        <div data-noodle-port=\"right\" style=\"position:absolute; left:20px; top:30px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);\">Node A</div>\n        <div data-noodle-port=\"left right\" style=\"position:absolute; left:160px; top:90px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);\">Node B</div>\n        <div data-noodle-port=\"left\" style=\"position:absolute; left:300px; top:40px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);\">Node C</div>\n      </noodles-ui>\n      </div>\n  </div>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"step\">\n      <noodles-ui id=\"noodle-step\" curve=\"step\" style=\"position:relative; width:400px; height:200px; border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-md);\">\n        <div data-noodle-port=\"right\" style=\"position:absolute; left:20px; top:30px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);\">Node A</div>\n        <div data-noodle-port=\"left right\" style=\"position:absolute; left:160px; top:90px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);\">Node B</div>\n        <div data-noodle-port=\"left\" style=\"position:absolute; left:300px; top:40px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);\">Node C</div>\n      </noodles-ui>\n      </div>\n  </div>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"straight\">\n      <noodles-ui id=\"noodle-straight\" curve=\"straight\" style=\"position:relative; width:400px; height:200px; border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-md);\">\n        <div data-noodle-port=\"right\" style=\"position:absolute; left:20px; top:30px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);\">Node A</div>\n        <div data-noodle-port=\"left right\" style=\"position:absolute; left:160px; top:90px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);\">Node B</div>\n        <div data-noodle-port=\"left\" style=\"position:absolute; left:300px; top:40px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);\">Node C</div>\n      </noodles-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/noodles/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/noodles-editable.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"editable\" data-chunk=\"noodles-editable\">\n  <h2 variant=\"section\">editable + show-ports</h2>\n  <p data-note>Enables interactive drag-to-connect with visible port indicators.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"editable + show-ports\">\n      <noodles-ui id=\"noodle-editable\" editable show-ports style=\"position:relative; width:400px; height:200px; border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-md);\">\n        <div data-noodle-port=\"right bottom\" style=\"position:absolute; left:20px; top:30px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);\">Source</div>\n        <div data-noodle-port=\"left right top\" style=\"position:absolute; left:160px; top:100px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);\">Middle</div>\n        <div data-noodle-port=\"left top\" style=\"position:absolute; left:300px; top:40px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);\">Target</div>\n      </noodles-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/noodles/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/noodles-portSize.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"portSize\" data-chunk=\"noodles-portSize\">\n  <h2 variant=\"section\">port-size</h2>\n  <p data-note>Diameter of port indicator dots in pixels. Defaults to 10.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"port-size=6\">\n      <noodles-ui id=\"noodle-ps-sm\" show-ports port-size=\"6\" style=\"position:relative; width:400px; height:140px; border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-md);\">\n        <div data-noodle-port=\"right\" style=\"position:absolute; left:20px; top:50px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);\">A</div>\n        <div data-noodle-port=\"left\" style=\"position:absolute; left:280px; top:50px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);\">B</div>\n      </noodles-ui>\n      </div>\n  </div>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"port-size=10 (default)\">\n      <noodles-ui id=\"noodle-ps-md\" show-ports port-size=\"10\" style=\"position:relative; width:400px; height:140px; border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-md);\">\n        <div data-noodle-port=\"right\" style=\"position:absolute; left:20px; top:50px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);\">A</div>\n        <div data-noodle-port=\"left\" style=\"position:absolute; left:280px; top:50px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);\">B</div>\n      </noodles-ui>\n      </div>\n  </div>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"port-size=16\">\n      <noodles-ui id=\"noodle-ps-lg\" show-ports port-size=\"16\" style=\"position:relative; width:400px; height:140px; border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-md);\">\n        <div data-noodle-port=\"right\" style=\"position:absolute; left:20px; top:50px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);\">A</div>\n        <div data-noodle-port=\"left\" style=\"position:absolute; left:280px; top:50px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);\">B</div>\n      </noodles-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/noodles/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/noodles-readonly.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"readonly\" data-chunk=\"noodles-readonly\">\n  <h2 variant=\"section\">readonly</h2>\n  <p data-note>View-only; connections render but no drag or edit.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"readonly\">\n      <noodles-ui id=\"noodle-readonly\" readonly style=\"position:relative; width:400px; height:160px; border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-md);\">\n        <div data-noodle-port=\"right\" style=\"position:absolute; left:20px; top:50px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);\">A</div>\n        <div data-noodle-port=\"left\" style=\"position:absolute; left:280px; top:50px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);\">B</div>\n      </noodles-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/noodles/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/noodles-showPorts.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"showPorts\" data-chunk=\"noodles-showPorts\">\n  <h2 variant=\"section\">show-ports</h2>\n  <p data-note>Show port indicator dots on each declared port. Useful for discoverability in editable graphs.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"show-ports=false\">\n      <noodles-ui id=\"noodle-ports-off\" style=\"position:relative; width:400px; height:160px; border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-md);\">\n        <div data-noodle-port=\"right bottom\" style=\"position:absolute; left:20px; top:50px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);\">A</div>\n        <div data-noodle-port=\"left top\" style=\"position:absolute; left:280px; top:50px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);\">B</div>\n      </noodles-ui>\n      </div>\n  </div>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"show-ports\">\n      <noodles-ui id=\"noodle-ports-on\" show-ports style=\"position:relative; width:400px; height:160px; border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-md);\">\n        <div data-noodle-port=\"right bottom\" style=\"position:absolute; left:20px; top:50px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);\">A</div>\n        <div data-noodle-port=\"left top\" style=\"position:absolute; left:280px; top:50px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);\">B</div>\n      </noodles-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/noodles/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/noodles-strokeWidth.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"strokeWidth\" data-chunk=\"noodles-strokeWidth\">\n  <h2 variant=\"section\">stroke-width</h2>\n  <p data-note>SVG stroke width in pixels. Defaults to 2.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"stroke-width=1\">\n      <noodles-ui id=\"noodle-sw-1\" stroke-width=\"1\" style=\"position:relative; width:400px; height:140px; border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-md);\">\n        <div data-noodle-port=\"right\" style=\"position:absolute; left:20px; top:50px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);\">A</div>\n        <div data-noodle-port=\"left\" style=\"position:absolute; left:280px; top:50px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);\">B</div>\n      </noodles-ui>\n      </div>\n  </div>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"stroke-width=4\">\n      <noodles-ui id=\"noodle-sw-4\" stroke-width=\"4\" style=\"position:relative; width:400px; height:140px; border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-md);\">\n        <div data-noodle-port=\"right\" style=\"position:absolute; left:20px; top:50px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);\">A</div>\n        <div data-noodle-port=\"left\" style=\"position:absolute; left:280px; top:50px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);\">B</div>\n      </noodles-ui>\n      </div>\n  </div>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"stroke-width=8\">\n      <noodles-ui id=\"noodle-sw-8\" stroke-width=\"8\" style=\"position:relative; width:400px; height:140px; border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-md);\">\n        <div data-noodle-port=\"right\" style=\"position:absolute; left:20px; top:50px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);\">A</div>\n        <div data-noodle-port=\"left\" style=\"position:absolute; left:280px; top:50px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);\">B</div>\n      </noodles-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/noodles/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/noodles-tension.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"tension\" data-chunk=\"noodles-tension\">\n  <h2 variant=\"section\">tension</h2>\n  <p data-note>Bezier control-point offset multiplier. Higher values create more pronounced curves. Defaults to 0.5.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"tension=0.1 (flat)\">\n      <noodles-ui id=\"noodle-tension-lo\" tension=\"0.1\" style=\"position:relative; width:400px; height:160px; border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-md);\">\n        <div data-noodle-port=\"right\" style=\"position:absolute; left:20px; top:30px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);\">A</div>\n        <div data-noodle-port=\"left\" style=\"position:absolute; left:280px; top:100px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);\">B</div>\n      </noodles-ui>\n      </div>\n  </div>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"tension=0.5 (default)\">\n      <noodles-ui id=\"noodle-tension-md\" tension=\"0.5\" style=\"position:relative; width:400px; height:160px; border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-md);\">\n        <div data-noodle-port=\"right\" style=\"position:absolute; left:20px; top:30px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);\">A</div>\n        <div data-noodle-port=\"left\" style=\"position:absolute; left:280px; top:100px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);\">B</div>\n      </noodles-ui>\n      </div>\n  </div>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"tension=1.2 (loopy)\">\n      <noodles-ui id=\"noodle-tension-hi\" tension=\"1.2\" style=\"position:relative; width:400px; height:160px; border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-md);\">\n        <div data-noodle-port=\"right\" style=\"position:absolute; left:20px; top:30px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);\">A</div>\n        <div data-noodle-port=\"left\" style=\"position:absolute; left:280px; top:100px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);\">B</div>\n      </noodles-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/noodles/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/onb-completion.json

@@ -10,5 +10,5 @@
   },
   "html": "<div data-onb-form data-chunk=\"onb-completion\">\n      <timeline-ui aria-label=\"What you set up during onboarding\">\n        <timeline-item-ui status=\"completed\" variant=\"success\"\n                          text=\"Role + workspace\"\n                          description=\"Developer · Acme\"\n                          time=\"Settings → Profile\"></timeline-item-ui>\n        <timeline-item-ui status=\"completed\" variant=\"success\"\n                          text=\"Source connected\"\n                          description=\"GitHub · 23 repos\"\n                          time=\"Settings → Integrations\"></timeline-item-ui>\n        <timeline-item-ui status=\"completed\" variant=\"success\"\n                          text=\"First dashboard\"\n                          description=\"Weekly revenue · 6-month trend (pinned to home)\"\n                          time=\"Pinned\"></timeline-item-ui>\n        <timeline-item-ui status=\"completed\" variant=\"success\"\n                          text=\"Notifications\"\n                          description=\"Weekly digest · in-app mentions on\"\n                          time=\"Settings → Notifications\"></timeline-item-ui>\n        <timeline-item-ui icon=\"circle-dashed\"\n                          text=\"Mobile app\"\n                          description=\"Skipped — install link emailed for later\"\n                          time=\"Skipped\"></timeline-item-ui>\n        <timeline-item-ui icon=\"circle-dashed\"\n                          text=\"Browser extension\"\n                          description=\"Add any time from settings → Devices\"\n                          time=\"Skipped\"></timeline-item-ui>\n      </timeline-ui>\n\n      <alert-ui variant=\"info\" icon=\"lightbulb\">\n        <span slot=\"content\"><strong>Tip:</strong> press <kbd-ui>⌘</kbd-ui> <kbd-ui>K</kbd-ui> anywhere in AdiaUI to open the search palette — fastest way to find a dashboard, jump to a setting, or trigger a generation.</span>\n      </alert-ui>\n    </div>",
   "source": "site/pages/examples/onboarding/complete/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/onb-extension-install.json

@@ -10,5 +10,5 @@
   },
   "html": "<div data-onb-form data-chunk=\"onb-extension-install\">\n      <div data-onb-extension-card>\n        <div data-ext-icon>\n          <icon-ui name=\"puzzle-piece\" weight=\"fill\" size=\"2xl\"></icon-ui>\n        </div>\n        <div>\n          <text-ui strong>AdiaUI for Chrome</text-ui>\n          <text-ui color=\"subtle\" size=\"sm\" style=\"display:block;\">v1.4 · 2 MB · Updated last week</text-ui>\n        </div>\n      </div>\n\n      <ul data-onb-extension-perms aria-label=\"Permissions requested by the extension\">\n        <li>\n          <icon-ui name=\"magnifying-glass\" weight=\"bold\"></icon-ui>\n          <span>Read your AdiaUI session token (for the quick-search palette to talk to your workspace)</span>\n        </li>\n        <li>\n          <icon-ui name=\"bell\" weight=\"bold\"></icon-ui>\n          <span>Show desktop notifications (mentions, share-with-you events)</span>\n        </li>\n        <li>\n          <icon-ui name=\"image\" weight=\"bold\"></icon-ui>\n          <span>Capture the current tab when you click \"Snip to dashboard\" (only when you click it)</span>\n        </li>\n      </ul>\n\n      <button-ui text=\"Add to Chrome\" variant=\"primary\" icon=\"download-simple\"></button-ui>\n\n      <text-ui color=\"subtle\" size=\"sm\">By installing you accept the extension's permissions above. You can revoke or remove it from your browser's extensions panel any time.</text-ui>\n    </div>",
   "source": "site/pages/examples/onboarding/browser-extension/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/onb-hero-welcome.json

@@ -10,5 +10,5 @@
   },
   "html": "<div data-onb-form data-chunk=\"onb-hero-welcome\">\n      <ul data-onb-outcomes>\n        <li>\n          <icon-ui name=\"check-circle\" weight=\"fill\"></icon-ui>\n          <div>\n            <strong>Pick how you'll use it</strong>\n            <text-ui color=\"subtle\" size=\"sm\">Tailors the home screen + which integrations we suggest first.</text-ui>\n          </div>\n        </li>\n        <li>\n          <icon-ui name=\"check-circle\" weight=\"fill\"></icon-ui>\n          <div>\n            <strong>Connect your first data source</strong>\n            <text-ui color=\"subtle\" size=\"sm\">One integration unlocks dashboards, alerts, and search across your stack.</text-ui>\n          </div>\n        </li>\n        <li>\n          <icon-ui name=\"check-circle\" weight=\"fill\"></icon-ui>\n          <div>\n            <strong>See your first dashboard</strong>\n            <text-ui color=\"subtle\" size=\"sm\">Generated from real data, ready to share or edit.</text-ui>\n          </div>\n        </li>\n      </ul>\n    </div>",
   "source": "site/pages/examples/onboarding/welcome/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/onb-import-picker.json

@@ -10,5 +10,5 @@
   },
   "html": "<div data-onb-form data-chunk=\"onb-import-picker\">\n      <div data-onb-fork role=\"radiogroup\" aria-label=\"Data source choice\">\n        <option-card-ui layout=\"tile\" name=\"data-mode\" value=\"sample\" checked\n                        icon=\"sparkle\"\n                        heading=\"Use sample data\"\n                        description=\"Pre-loaded mock data so you can explore in seconds. Best for evaluating.\"></option-card-ui>\n        <option-card-ui layout=\"tile\" name=\"data-mode\" value=\"upload\"\n                        icon=\"upload\"\n                        heading=\"Upload a CSV / JSON\"\n                        description=\"One-shot import. Good for spreadsheet-shaped data and quick prototypes.\"></option-card-ui>\n        <option-card-ui layout=\"tile\" name=\"data-mode\" value=\"blank\"\n                        icon=\"file-plus\"\n                        heading=\"Start from blank\"\n                        description=\"Empty workspace. Connect or import later when you're ready.\"></option-card-ui>\n      </div>\n\n      <text-ui color=\"subtle\" size=\"sm\">Sample data is generated on-the-fly and is never stored after onboarding. Anything you configure on it carries over when you switch to live sources.</text-ui>\n    </div>",
   "source": "site/pages/examples/onboarding/import-data/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/onb-mobile-handoff.json

@@ -10,5 +10,5 @@
   },
   "html": "<div data-onb-form data-chunk=\"onb-mobile-handoff\">\n      <div data-onb-handoff>\n        <div data-onb-handoff-qr aria-label=\"QR code to install the AdiaUI mobile app\">\n          <icon-ui name=\"qr-code\" size=\"3xl\"></icon-ui>\n        </div>\n        <div data-handoff-divider role=\"separator\" aria-orientation=\"vertical\"></div>\n        <div data-onb-handoff-form>\n          <text-ui strong>Or send yourself a link</text-ui>\n          <text-ui color=\"subtle\" size=\"sm\">We'll text you a link to the App Store or Play Store, depending on your device.</text-ui>\n          <field-ui label=\"Phone number\">\n            <input-ui type=\"tel\" name=\"phone\" autocomplete=\"tel\" placeholder=\"+1 555 0123\"></input-ui>\n          </field-ui>\n          <button-ui text=\"Send install link\" variant=\"outline\"></button-ui>\n        </div>\n      </div>\n\n      <text-ui color=\"subtle\" size=\"sm\">No phone? You'll find direct App Store / Play Store links in your settings → Devices any time.</text-ui>\n    </div>",
   "source": "site/pages/examples/onboarding/mobile-app/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/onb-notification-prefs.json

@@ -12,5 +12,5 @@
   },
   "html": "<div data-onb-form data-chunk=\"onb-notification-prefs\" role=\"radiogroup\" aria-label=\"Email notification frequency\">\n      <col-ui gap=\"4\">\n        <option-card-ui\n          name=\"notify\" value=\"daily\"\n          heading=\"Daily digest\"\n          description=\"One email each morning summarizing yesterday's activity. Best for dashboard-driven roles.\"></option-card-ui>\n        <option-card-ui\n          name=\"notify\" value=\"weekly\" checked\n          heading=\"Weekly digest · Recommended\"\n          description=\"One email each Monday with a 7-day rollup. Quiet and focused.\"></option-card-ui>\n        <option-card-ui\n          name=\"notify\" value=\"mentions\"\n          heading=\"Mentions only\"\n          description=\"Just emails when someone @-mentions you or shares a dashboard directly. No digests.\"></option-card-ui>\n        <option-card-ui\n          name=\"notify\" value=\"off\"\n          heading=\"Off\"\n          description=\"No emails. We'll still send security-critical messages (password reset, new device sign-in).\"></option-card-ui>\n      </col-ui>\n    </div>",
   "source": "site/pages/examples/onboarding/notification-prefs/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/onb-persona-picker.json

@@ -10,5 +10,5 @@
   },
   "html": "<div data-onb-form data-chunk=\"onb-persona-picker\">\n      <div data-onb-mode-grid role=\"radiogroup\" aria-label=\"Primary role\">\n        <option-card-ui name=\"mode\" value=\"developer\" required\n                        heading=\"Developer\"\n                        description=\"Wire APIs, ship features, monitor releases.\"></option-card-ui>\n        <option-card-ui name=\"mode\" value=\"designer\"\n                        heading=\"Designer\"\n                        description=\"Compose patterns, review, hand off.\"></option-card-ui>\n        <option-card-ui name=\"mode\" value=\"analyst\"\n                        heading=\"Analyst\"\n                        description=\"Query, chart, share insight, set up alerts.\"></option-card-ui>\n        <option-card-ui name=\"mode\" value=\"admin\"\n                        heading=\"Admin\"\n                        description=\"Configure, govern, manage access + billing.\"></option-card-ui>\n      </div>\n    </div>",
   "source": "site/pages/examples/onboarding/mode/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/onb-provider-tiles.json

@@ -10,5 +10,5 @@
   },
   "html": "<div data-onb-form data-chunk=\"onb-provider-tiles\">\n      <div data-onb-provider-grid role=\"radiogroup\" aria-label=\"Source picker\">\n        <option-card-ui layout=\"tile\" name=\"source\" value=\"github\" checked\n                        icon=\"github-logo\"\n                        heading=\"GitHub\"\n                        description=\"Repos, issues, PRs, releases\"></option-card-ui>\n        <option-card-ui layout=\"tile\" name=\"source\" value=\"linear\"\n                        icon=\"kanban\"\n                        heading=\"Linear\"\n                        description=\"Issues, cycles, projects\"></option-card-ui>\n        <option-card-ui layout=\"tile\" name=\"source\" value=\"stripe\"\n                        icon=\"credit-card\"\n                        heading=\"Stripe\"\n                        description=\"Customers, MRR, churn\"></option-card-ui>\n        <option-card-ui layout=\"tile\" name=\"source\" value=\"postgres\"\n                        icon=\"database\"\n                        heading=\"Postgres\"\n                        description=\"Read-only SQL connection\"></option-card-ui>\n        <option-card-ui layout=\"tile\" name=\"source\" value=\"notion\"\n                        icon=\"notebook\"\n                        heading=\"Notion\"\n                        description=\"Pages, databases, comments\"></option-card-ui>\n        <option-card-ui layout=\"tile\" name=\"source\" value=\"slack\"\n                        icon=\"slack-logo\"\n                        heading=\"Slack\"\n                        description=\"Channels, threads, search\"></option-card-ui>\n      </div>\n\n      <alert-ui variant=\"info\" icon=\"shield-check\">\n        <span slot=\"content\"><strong>Read-only by default.</strong> AdiaUI never writes or deletes data on your provider. You can audit + revoke from settings → Integrations.</span>\n      </alert-ui>\n    </div>",
   "source": "site/pages/examples/onboarding/connect-source/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/onb-settings-review.json

@@ -10,5 +10,5 @@
   },
   "html": "<div data-onb-form data-chunk=\"onb-settings-review\">\n      <div data-onb-summary>\n\n        <div data-onb-summary-row>\n          <span data-summary-label>Role</span>\n          <div>\n            <span data-summary-value>Developer</span>\n            <text-ui color=\"subtle\" size=\"sm\" style=\"display:block;\">Home pinned to release dashboards.</text-ui>\n          </div>\n          <button-ui text=\"Edit\" variant=\"ghost\" size=\"sm\" onclick=\"document.getElementById('drawer-role').open = true\"></button-ui>\n        </div>\n\n        <div data-onb-summary-row>\n          <span data-summary-label>Source</span>\n          <div>\n            <span data-summary-value>GitHub</span>\n            <text-ui color=\"subtle\" size=\"sm\" style=\"display:block;\">Authorized as kim@acme.com · 23 repos visible.</text-ui>\n          </div>\n          <button-ui text=\"Edit\" variant=\"ghost\" size=\"sm\" onclick=\"document.getElementById('drawer-source').open = true\"></button-ui>\n        </div>\n\n        <div data-onb-summary-row>\n          <span data-summary-label>Data start</span>\n          <div>\n            <span data-summary-value>Sample data</span>\n            <text-ui color=\"subtle\" size=\"sm\" style=\"display:block;\">Switch to live source any time from settings.</text-ui>\n          </div>\n          <button-ui text=\"Edit\" variant=\"ghost\" size=\"sm\" onclick=\"document.getElementById('drawer-data-start').open = true\"></button-ui>\n        </div>\n\n        <div data-onb-summary-row>\n          <span data-summary-label>First dashboard</span>\n          <div>\n            <span data-summary-value>Weekly revenue · 6-month trend</span>\n            <text-ui color=\"subtle\" size=\"sm\" style=\"display:block;\">Generated and pinned to your home.</text-ui>\n          </div>\n          <button-ui text=\"Edit\" variant=\"ghost\" size=\"sm\" onclick=\"document.getElementById('drawer-first-dashboard').open = true\"></button-ui>\n        </div>\n\n      </div>\n\n      <alert-ui variant=\"success\" icon=\"check-circle\">\n        <span slot=\"content\"><strong>Looking good.</strong> Next we'll set notification preferences, then offer two optional companion installs (mobile app + browser extension). Nothing else is required.</span>\n      </alert-ui>\n    </div>",
   "source": "site/pages/examples/onboarding/review/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/onb-step-footer.json

@@ -104,5 +104,5 @@
       "html": "<footer data-chunk=\"onb-step-footer\">\n      <div data-onb-progress data-chunk=\"onb-step-progress\">\n        <text-ui color=\"subtle\" size=\"sm\">Step 1 of 10</text-ui>\n        <div data-onb-progress-track>\n          <span data-active></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>\n        </div>\n      </div>\n      <div data-onb-actions>\n        <button-ui text=\"Get started\" variant=\"primary\" type=\"submit\"></button-ui>\n      </div>\n    </footer>"
     }
   ],
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/onb-step-header.json

@@ -104,5 +104,5 @@
       "html": "<header data-onb-heading data-chunk=\"onb-step-header\">\n      <h1>Let's get you set up</h1>\n      <text-ui color=\"subtle\">A quick guided tour. Everything is changeable in settings later.</text-ui>\n    </header>"
     }
   ],
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/onb-step-progress.json

@@ -104,5 +104,5 @@
       "html": "<div data-onb-progress data-chunk=\"onb-step-progress\">\n        <text-ui color=\"subtle\" size=\"sm\">Step 1 of 10</text-ui>\n        <div data-onb-progress-track>\n          <span data-active></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>\n        </div>\n      </div>"
     }
   ],
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/onb-story-pane.json

@@ -104,5 +104,5 @@
       "html": "<aside data-onb-story data-chunk=\"onb-story-pane\">\n    <a data-onb-brand href=\"/\" aria-label=\"AdiaUI home\">\n      <img src=\"/icons/agent-ui-light.svg\" alt=\"\" />\n      <strong>AdiaUI</strong>\n    </a>\n    <div data-onb-story-content>\n      <h2>Welcome aboard, Kim.</h2>\n      <p>\n        You're three minutes away from your first usable workspace.\n        We'll walk through the essentials — pick how you'll use it,\n        connect a data source, see your first dashboard come to life.\n        Skip anything you'd rather come back to later.\n      </p>\n      <text-ui color=\"subtle\" size=\"sm\">Step 1 of 10 · Onboarding</text-ui>\n    </div>\n  </aside>"
     }
   ],
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/onb-tutorial-steps.json

@@ -10,5 +10,5 @@
   },
   "html": "<div data-onb-form data-chunk=\"onb-tutorial-steps\">\n      <div data-onb-tutorial>\n\n        <div data-onb-tutorial-step>\n          <span data-step-num>1</span>\n          <div data-step-body>\n            <text-ui strong>Describe what you want.</text-ui>\n            <text-ui color=\"subtle\" size=\"sm\">One sentence in plain English. AdiaUI picks the right components and wires them up.</text-ui>\n          </div>\n        </div>\n\n        <field-ui label=\"Prompt\">\n          <input-ui name=\"intent\" placeholder=\"A weekly revenue dashboard with a 6-month trend\"\n                    value=\"A weekly revenue dashboard with a 6-month trend\"></input-ui>\n        </field-ui>\n\n        <div data-onb-tutorial-step>\n          <span data-step-num>2</span>\n          <div data-step-body>\n            <text-ui strong>Generate.</text-ui>\n            <text-ui color=\"subtle\" size=\"sm\">Takes 1–3 seconds. The result lands editable on your canvas.</text-ui>\n          </div>\n        </div>\n\n        <div data-onb-tutorial-step>\n          <span data-step-num>3</span>\n          <div data-step-body>\n            <text-ui strong>Edit and share.</text-ui>\n            <text-ui color=\"subtle\" size=\"sm\">Move blocks, change palettes, swap data sources. Share via link, embed, or export to PNG.</text-ui>\n          </div>\n        </div>\n\n        <button-ui text=\"Generate dashboard\" variant=\"primary\" icon=\"sparkle\"></button-ui>\n      </div>\n\n      <text-ui color=\"subtle\" size=\"sm\">After generation we'll save the result to your workspace and continue to the next step. You can return to it any time from the sidebar.</text-ui>\n    </div>",
   "source": "site/pages/examples/onboarding/first-action/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/option-card-default.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"default\" data-chunk=\"option-card-default\">\n  <h2 variant=\"section\">Default</h2>\n  <p data-note>Heading + description from attributes. Click anywhere on the card to select.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"Pick-one-of-three\">\n      <col-ui gap=\"2\" role=\"radiogroup\" aria-label=\"Demo\">\n        <option-card-ui name=\"demo-1\" value=\"build\" checked\n                        heading=\"I'm building a product\"\n                        description=\"Spinning up a new project — design, ship, iterate.\"></option-card-ui>\n        <option-card-ui name=\"demo-1\" value=\"explore\"\n                        heading=\"I'm exploring the product\"\n                        description=\"Kicking the tires before bringing a team along.\"></option-card-ui>\n        <option-card-ui name=\"demo-1\" value=\"migrate\"\n                        heading=\"I'm migrating from another tool\"\n                        description=\"Moving an existing workspace and want a smooth port.\"></option-card-ui>\n      </col-ui>\n    </div>\n  </div>\n</section>",
   "source": "site/pages/components/option-card/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/option-card-dense.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"dense\" data-chunk=\"option-card-dense\">\n  <h2 variant=\"section\">Dense (no description)</h2>\n  <p data-note>Heading-only when the choice is self-explanatory. The description row collapses out of the grid.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"Heading-only\">\n      <col-ui gap=\"2\" role=\"radiogroup\" aria-label=\"Visibility\">\n        <option-card-ui name=\"demo-vis\" value=\"public\" checked heading=\"Public — anyone with the link\"></option-card-ui>\n        <option-card-ui name=\"demo-vis\" value=\"team\" heading=\"Team — workspace members only\"></option-card-ui>\n        <option-card-ui name=\"demo-vis\" value=\"private\" heading=\"Private — only me\"></option-card-ui>\n      </col-ui>\n    </div>\n  </div>\n</section>",
   "source": "site/pages/components/option-card/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/option-card-disabled.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"disabled\" data-chunk=\"option-card-disabled\">\n  <h2 variant=\"section\">Disabled</h2>\n  <p data-note>Disabled cards remain visible (so users see the unavailable option) but are non-interactive and dimmed.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"One option disabled\">\n      <col-ui gap=\"2\" role=\"radiogroup\" aria-label=\"Region\">\n        <option-card-ui name=\"demo-region\" value=\"us\" checked\n                        heading=\"United States\"\n                        description=\"Servers in us-east-1, us-west-2.\"></option-card-ui>\n        <option-card-ui name=\"demo-region\" value=\"eu\"\n                        heading=\"European Union\"\n                        description=\"Servers in eu-central-1, eu-west-1.\"></option-card-ui>\n        <option-card-ui name=\"demo-region\" value=\"apac\" disabled\n                        heading=\"Asia-Pacific\"\n                        description=\"Coming Q3. Join the waitlist for early access.\"></option-card-ui>\n      </col-ui>\n    </div>\n  </div>\n</section>",
   "source": "site/pages/components/option-card/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/option-card-heading-rich.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"heading-rich\" data-chunk=\"option-card-heading-rich\">\n  <h2 variant=\"section\">Rich heading slot</h2>\n  <p data-note>Slot any inline content — secondary text, badges, kbd hints — into the heading via <code>slot=\"heading\"</code>. Slotted content overrides the <code>heading</code> attribute.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"Plan picker with badge + price\">\n      <col-ui gap=\"2\" role=\"radiogroup\" aria-label=\"Plan\">\n        <option-card-ui name=\"demo-plan\" value=\"free\"\n                        description=\"Up to 5 members · 10 projects · community support\">\n          <span slot=\"heading\">Free <text-ui color=\"subtle\" size=\"sm\">· $0/mo</text-ui></span>\n        </option-card-ui>\n        <option-card-ui name=\"demo-plan\" value=\"pro\" checked\n                        description=\"Unlimited members · advanced charts · 100 GB storage\">\n          <span slot=\"heading\">\n            Pro\n            <text-ui color=\"subtle\" size=\"sm\">· $49/mo</text-ui>\n            <badge-ui text=\"14-day trial\" variant=\"accent\"></badge-ui>\n          </span>\n        </option-card-ui>\n        <option-card-ui name=\"demo-plan\" value=\"team\"\n                        description=\"Everything in Pro · SSO · audit log · 1 TB storage\">\n          <span slot=\"heading\">Team <text-ui color=\"subtle\" size=\"sm\">· $129/mo</text-ui></span>\n        </option-card-ui>\n      </col-ui>\n    </div>\n  </div>\n</section>",
   "source": "site/pages/components/option-card/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/option-card-icon.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"icon\" data-chunk=\"option-card-icon\">\n  <h2 variant=\"section\">With leading icon</h2>\n  <p data-note>Adds a leading <code>icon-ui</code> between the radio circle and the heading. Useful when each option maps to a recognizable concept.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"With icons\">\n      <col-ui gap=\"2\" role=\"radiogroup\" aria-label=\"Storage\">\n        <option-card-ui name=\"demo-icon\" value=\"local\" icon=\"hard-drive\" checked\n                        heading=\"Local storage\"\n                        description=\"Files stay on this device. No sync, no upload.\"></option-card-ui>\n        <option-card-ui name=\"demo-icon\" value=\"cloud\" icon=\"cloud-arrow-up\"\n                        heading=\"Cloud storage\"\n                        description=\"Files sync across devices and backup automatically.\"></option-card-ui>\n        <option-card-ui name=\"demo-icon\" value=\"hybrid\" icon=\"arrows-clockwise\"\n                        heading=\"Hybrid\"\n                        description=\"Cache locally, sync changes to the cloud in the background.\"></option-card-ui>\n      </col-ui>\n    </div>\n  </div>\n</section>",
   "source": "site/pages/components/option-card/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/option-card-spillover.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"spillover\" data-chunk=\"option-card-spillover\">\n  <h2 variant=\"section\">Spillover content (default slot)</h2>\n  <p data-note>Drop any unslotted child into the card and it will reveal only when the card is checked — useful for an \"Other\" option that needs a free-text follow-up, or any conditional follow-on input. The textarea below appears only when \"Something else\" is selected.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"With Other + textarea\">\n      <col-ui gap=\"2\" role=\"radiogroup\" aria-label=\"Reason\">\n        <option-card-ui name=\"demo-spill\" value=\"bug\" checked\n                        heading=\"I found a bug\"\n                        description=\"Something isn't working the way you'd expect.\"></option-card-ui>\n        <option-card-ui name=\"demo-spill\" value=\"feature\"\n                        heading=\"I have a feature idea\"\n                        description=\"Something we should build that we haven't yet.\"></option-card-ui>\n        <option-card-ui name=\"demo-spill\" value=\"other\"\n                        heading=\"Something else\"\n                        description=\"Tell us more — we read every response.\">\n          <textarea-ui name=\"demo-spill-detail\" placeholder=\"What's on your mind?\" rows=\"3\"></textarea-ui>\n        </option-card-ui>\n      </col-ui>\n    </div>\n  </div>\n</section>",
   "source": "site/pages/components/option-card/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/otp-input-disabled.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"disabled\" data-chunk=\"otp-input-disabled\">\n  <h2 variant=\"section\">disabled</h2>\n  <p data-note>Prevents interaction with all digit inputs.</p>\n  <div data-artifact-container>\n  <div data-artifact-item data-artifact-label=\"disabled\">\n    <otp-input-ui disabled></otp-input-ui>\n  </div>\n  <div data-artifact-item data-artifact-label=\"disabled\">\n    <otp-input-ui length=\"4\" disabled></otp-input-ui>\n  </div>\n</div>\n</section>",
   "source": "site/pages/components/otp-input/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/otp-input-length.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"length\" data-chunk=\"otp-input-length\">\n  <h2 variant=\"section\">length</h2>\n  <p data-note>Number of digit boxes. Defaults to 6.</p>\n  <div data-artifact-container>\n  <div data-artifact-item data-artifact-label=\"otp-input\">\n    <otp-input-ui></otp-input-ui>\n  </div>\n  <div data-artifact-item data-artifact-label=\"otp-input\">\n    <otp-input-ui length=\"4\"></otp-input-ui>\n  </div>\n</div>\n</section>",
   "source": "site/pages/components/otp-input/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/otp-input-name.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"name\" data-chunk=\"otp-input-name\">\n  <h2 variant=\"section\">name</h2>\n  <p data-note>Form field name used when submitting the OTP value.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"name=otp\"><otp-input-ui name=\"otp\"></otp-input-ui></div>\n    <div data-artifact-item data-artifact-label=\"name=verification_code\"><otp-input-ui name=\"verification_code\"></otp-input-ui></div>\n  </div>\n</section>",
   "source": "site/pages/components/otp-input/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/otp-input-value.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"value\" data-chunk=\"otp-input-value\">\n  <h2 variant=\"section\">value</h2>\n  <p data-note>Pre-filled OTP value.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"partial 123\"><otp-input-ui value=\"123\"></otp-input-ui></div>\n    <div data-artifact-item data-artifact-label=\"full 123456\"><otp-input-ui value=\"123456\"></otp-input-ui></div>\n    <div data-artifact-item data-artifact-label=\"empty\"><otp-input-ui value=\"\"></otp-input-ui></div>\n  </div>\n</section>",
   "source": "site/pages/components/otp-input/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/pagination-basic.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"basic\" data-chunk=\"pagination-basic\">\n  <h2 variant=\"section\">basic (5 pages)</h2>\n  <p data-note>A small page set shows all page numbers without ellipsis.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"5 pages, page 1\">\n      <pagination-ui page=\"1\" total=\"5\"></pagination-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/pagination/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/pagination-combo.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-combo data-chunk=\"pagination-combo\">\n  <h2 variant=\"section\">Combinations</h2>\n  <p data-note>Various page positions with different total counts.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"middle of small set\">\n      <pagination-ui page=\"3\" total=\"5\"></pagination-ui>\n      </div>\n  </div>\n  <div data-artifact-container data-mt-sm>\n    <div data-artifact-item data-artifact-label=\"50 pages, siblings=2, page 7\">\n      <pagination-ui page=\"7\" total=\"50\" siblings=\"2\"></pagination-ui>\n      </div>\n  </div>\n  <div data-artifact-container data-mt-sm>\n    <div data-artifact-item data-artifact-label=\"last page of 15\">\n      <pagination-ui page=\"15\" total=\"15\"></pagination-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/pagination/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/pagination-edge.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-edge data-chunk=\"pagination-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=\"single page\">\n      <pagination-ui page=\"1\" total=\"1\"></pagination-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"two pages\">\n      <pagination-ui page=\"1\" total=\"2\"></pagination-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"1000 pages\">\n      <pagination-ui page=\"500\" total=\"1000\"></pagination-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/pagination/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/pagination-first-page.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"first-page\" data-chunk=\"pagination-first-page\">\n  <h2 variant=\"section\">first page</h2>\n  <p data-note>Previous button is disabled on the first page.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"page 1 of 20\">\n      <pagination-ui page=\"1\" total=\"20\"></pagination-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/pagination/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/pagination-last-page.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"last-page\" data-chunk=\"pagination-last-page\">\n  <h2 variant=\"section\">last page</h2>\n  <p data-note>Next button is disabled on the last page.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"page 20 of 20\">\n      <pagination-ui page=\"20\" total=\"20\"></pagination-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/pagination/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/pagination-many-pages.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"many-pages\" data-chunk=\"pagination-many-pages\">\n  <h2 variant=\"section\">many pages (20 pages)</h2>\n  <p data-note>With many pages, ellipsis appears between sibling range and edges.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"20 pages, page 5\">\n      <pagination-ui page=\"5\" total=\"20\"></pagination-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/pagination/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/pagination-page.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"page\" data-chunk=\"pagination-page\">\n  <h2 variant=\"section\">page</h2>\n  <p data-note>Currently active page (1-indexed).</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"page=1\"><pagination-ui page=\"1\" total=\"10\"></pagination-ui></div>\n    <div data-artifact-item data-artifact-label=\"page=5\"><pagination-ui page=\"5\" total=\"10\"></pagination-ui></div>\n    <div data-artifact-item data-artifact-label=\"page=10\"><pagination-ui page=\"10\" total=\"10\"></pagination-ui></div>\n  </div>\n</section>",
   "source": "site/pages/components/pagination/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/pagination-siblings.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"siblings\" data-chunk=\"pagination-siblings\">\n  <h2 variant=\"section\">siblings</h2>\n  <p data-note>Controls how many page numbers appear on each side of the current page. Defaults to 1.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"siblings=1\">\n      <pagination-ui page=\"10\" total=\"20\" siblings=\"1\"></pagination-ui>\n      </div>\n  </div>\n  <div data-artifact-container data-mt-sm>\n    <div data-artifact-item data-artifact-label=\"siblings=2\">\n      <pagination-ui page=\"10\" total=\"20\" siblings=\"2\"></pagination-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/pagination/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/pagination-size.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"size\" data-chunk=\"pagination-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      <pagination-ui size=\"sm\" total=\"100\" page=\"1\"></pagination-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"md (default)\">\n      <pagination-ui total=\"100\" page=\"1\"></pagination-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"lg\">\n      <pagination-ui size=\"lg\" total=\"100\" page=\"1\"></pagination-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/pagination/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/pagination-total.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"total\" data-chunk=\"pagination-total\">\n  <h2 variant=\"section\">total</h2>\n  <p data-note>Total number of pages to display in the control.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"total=3\"><pagination-ui page=\"1\" total=\"3\"></pagination-ui></div>\n    <div data-artifact-item data-artifact-label=\"total=10\"><pagination-ui page=\"1\" total=\"10\"></pagination-ui></div>\n    <div data-artifact-item data-artifact-label=\"total=25\"><pagination-ui page=\"1\" total=\"25\"></pagination-ui></div>\n  </div>\n</section>",
   "source": "site/pages/components/pagination/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/pagination-variant.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"variant\" data-chunk=\"pagination-variant\">\n  <h2 variant=\"section\">variant</h2>\n  <p data-note>Default is text-style links. <code>variant=\"button\"</code> renders square 1:1 bordered buttons.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"default (text)\">\n      <pagination-ui page=\"3\" total=\"10\"></pagination-ui>\n      </div>\n  </div>\n  <div data-artifact-container data-mt-sm>\n    <div data-artifact-item data-artifact-label='variant=\"button\"'>\n      <pagination-ui variant=\"button\" page=\"3\" total=\"10\"></pagination-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/pagination/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/pane-basic.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"basic\" data-chunk=\"pane-basic\">\n  <h2 variant=\"section\">basic</h2>\n  <p data-note>A pane with a header and content section. Click the header to toggle collapse.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"default pane\" style=\"width:300px;\">\n      <pane-ui>\n        <header>Details</header>\n        <section>\n          <div data-col>\n            <p>This is basic pane content. Click the header to collapse.</p>\n          </div>\n        </section>\n      </pane-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/pane/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/pane-collapsed.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"collapsed\" data-chunk=\"pane-collapsed\">\n  <h2 variant=\"section\">collapsed</h2>\n  <p data-note>Set the collapsed attribute to start the pane in a collapsed state.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"collapsed on load\" style=\"width:300px;\">\n      <pane-ui collapsed>\n        <header>Collapsed Pane</header>\n        <section>\n          <div data-col>\n            <p>This content is hidden until the pane is expanded.</p>\n          </div>\n        </section>\n      </pane-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/pane/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/pane-combo.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-combo data-chunk=\"pane-combo\">\n  <h2 variant=\"section\">Combinations</h2>\n  <p data-note>Resizable pane with rich content and multiple sections.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"resizable + sections + footer\">\n      <pane-ui resizable min-width=\"240\" max-width=\"450\" style=\"width:320px;\">\n        <header>Settings</header>\n        <section>\n          <header>General</header>\n          <div data-col>\n            <field-ui label=\"Dark mode\" inline>\n              <switch-ui></switch-ui>\n            </field-ui>\n            <field-ui label=\"Notifications\" inline>\n              <switch-ui checked></switch-ui>\n            </field-ui>\n          </div>\n        </section>\n        <section>\n          <header>Advanced</header>\n          <div data-col>\n            <field-ui label=\"API Key\">\n              <input-ui placeholder=\"sk-...\"></input-ui>\n            </field-ui>\n            <range-ui label=\"Cache TTL\" value=\"3600\" min=\"0\" max=\"86400\"></range-ui>\n          </div>\n        </section>\n        <footer>\n          <button-ui text=\"Reset\" variant=\"ghost\" size=\"sm\"></button-ui>\n          <span style=\"flex:1;\"></span>\n          <button-ui text=\"Apply\" variant=\"primary\" size=\"sm\"></button-ui>\n        </footer>\n      </pane-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/pane/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/pane-edge.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-edge data-chunk=\"pane-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=\"no content\" style=\"width:300px;\">\n      <pane-ui>\n        <header>Empty Pane</header>\n      </pane-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"long header\" style=\"width:300px;\">\n      <pane-ui>\n        <header>This is a pane with a very long header title that may overflow</header>\n        <section>\n          <div data-col>\n            <p>Content here.</p>\n          </div>\n        </section>\n      </pane-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/pane/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/pane-maxWidth.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"maxWidth\" data-chunk=\"pane-maxWidth\">\n  <h2 variant=\"section\">maxWidth</h2>\n  <p data-note>Maximum width the pane may be resized to.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"max-width=320px\"><pane-ui max-width=\"320px\" style=\"height:120px;\">Max 320px</pane-ui></div>\n    <div data-artifact-item data-artifact-label=\"max-width=480px\"><pane-ui max-width=\"480px\" style=\"height:120px;\">Max 480px</pane-ui></div>\n  </div>\n</section>",
   "source": "site/pages/components/pane/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/pane-minWidth.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"minWidth\" data-chunk=\"pane-minWidth\">\n  <h2 variant=\"section\">minWidth</h2>\n  <p data-note>Minimum width the pane may be resized to.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"min-width=120px\"><pane-ui min-width=\"120px\" style=\"height:120px;\">Min 120px</pane-ui></div>\n    <div data-artifact-item data-artifact-label=\"min-width=240px\"><pane-ui min-width=\"240px\" style=\"height:120px;\">Min 240px</pane-ui></div>\n  </div>\n</section>",
   "source": "site/pages/components/pane/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/pane-resizable.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"resizable\" data-chunk=\"pane-resizable\">\n  <h2 variant=\"section\">resizable</h2>\n  <p data-note>Adds a drag handle for width resizing. Constrained by min-width and max-width.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"resizable (200-500px)\">\n      <pane-ui resizable min-width=\"200\" max-width=\"500\" style=\"width:300px;\">\n        <header>Resizable</header>\n        <section>\n          <div data-col>\n            <p>Drag the right edge to resize this pane between 200px and 500px.</p>\n          </div>\n        </section>\n      </pane-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/pane/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }