@adia-ai/a2ui-corpus 0.0.2 → 0.0.3

package/chunks/drawer-2fa-totp.json

@@ -0,0 +1,15 @@
+{
+  "name": "drawer-2fa-totp",
+  "kind": "block",
+  "primary": "drawer-ui",
+  "page": "/site/examples/profile-security",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "side": "right",
+    "size": "md"
+  },
+  "html": "<drawer-ui id=\"drawer-2fa-totp\" data-chunk=\"drawer-2fa-totp\" side=\"right\" size=\"md\">\n  <header>\n    <span slot=\"icon\">\n      <avatar-ui icon=\"device-mobile\"></avatar-ui>\n    </span>\n    <span slot=\"heading\">\n      <text-ui strong>Authenticator app</text-ui>\n      <badge-ui text=\"Enabled\" variant=\"success\"></badge-ui>\n    </span>\n    <span slot=\"action\"></span>\n  </header>\n  <section>\n    <text-ui color=\"subtle\" size=\"sm\">Enrolled with 1Password · Aug 14, 2025</text-ui>\n  </section>\n  <section>\n    <col-ui gap=\"4\">\n      <alert-ui\n        variant=\"info\"\n        icon=\"info\"\n        text=\"If you lose access to your authenticator app, use a recovery code to sign in. Generate new codes whenever you suspect old ones were exposed.\"\n      ></alert-ui>\n      <divider-ui></divider-ui>\n      <col-ui gap=\"3\">\n        <text-ui strong>Recovery codes</text-ui>\n        <text-ui color=\"subtle\" size=\"sm\">Store these somewhere only you can access. Each code works once.</text-ui>\n        <card-ui>\n          <section>\n            <grid-ui columns=\"2\" gap=\"2\">\n              <code-ui text=\"4F9K-2P1L\"></code-ui>\n              <code-ui text=\"XHMN-88RD\"></code-ui>\n              <code-ui text=\"PT7Q-VG4C\"></code-ui>\n              <code-ui text=\"9B2A-WKE0\"></code-ui>\n              <code-ui text=\"Z3YT-HNFR\"></code-ui>\n              <code-ui text=\"Q18V-MPCD\"></code-ui>\n            </grid-ui>\n          </section>\n        </card-ui>\n        <row-ui gap=\"2\">\n          <button-ui text=\"Copy all\" variant=\"outline\" size=\"sm\" icon=\"copy\"></button-ui>\n          <button-ui text=\"Download .txt\" variant=\"outline\" size=\"sm\" icon=\"download-simple\"></button-ui>\n          <button-ui text=\"Regenerate\" variant=\"ghost\" size=\"sm\" icon=\"arrows-clockwise\"></button-ui>\n        </row-ui>\n      </col-ui>\n      <divider-ui></divider-ui>\n      <col-ui gap=\"3\">\n        <text-ui strong>Change authenticator</text-ui>\n        <text-ui color=\"subtle\" size=\"sm\">Scan this QR in a new app, then enter a fresh code to swap devices.</text-ui>\n        <row-ui gap=\"3\" align=\"center\">\n          <avatar-ui icon=\"qr-code\" size=\"xl\"></avatar-ui>\n          <col-ui gap=\"1\" grow>\n            <text-ui strong>Setup key</text-ui>\n            <code-ui text=\"JBSWY3DPEHPK3PXP\"></code-ui>\n            <text-ui color=\"subtle\" size=\"sm\">Use if your app can't scan QR codes.</text-ui>\n          </col-ui>\n        </row-ui>\n        <field-ui label=\"Confirmation code\" hint=\"Enter the current 6-digit code from your new app.\">\n          <input-ui placeholder=\"123 456\"></input-ui>\n        </field-ui>\n      </col-ui>\n    </col-ui>\n  </section>\n  <footer slot=\"footer\">\n    <grid-ui>\n      <button-ui text=\"Remove 2FA\" icon=\"trash\" color=\"danger\"></button-ui>\n      <button-ui text=\"Cancel\" variant=\"ghost\" onclick=\"this.closest('drawer-ui').open = false\"></button-ui>\n      <button-ui text=\"Save\" variant=\"primary\" onclick=\"this.closest('drawer-ui').open = false\"></button-ui>\n    </grid-ui>\n  </footer>\n</drawer-ui>",
+  "source": "site/pages/examples/profile-security/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/drawer-cancel-sub.json

@@ -0,0 +1,15 @@
+{
+  "name": "drawer-cancel-sub",
+  "kind": "block",
+  "primary": "drawer-ui",
+  "page": "/site/examples/billing",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "side": "right",
+    "size": "md"
+  },
+  "html": "<drawer-ui id=\"drawer-cancel-sub\" data-chunk=\"drawer-cancel-sub\" side=\"right\" size=\"md\">\n  <header>\n    <span slot=\"icon\">\n      <avatar-ui icon=\"warning-octagon\"></avatar-ui>\n    </span>\n    <span slot=\"heading\">\n      <text-ui strong>Cancel subscription</text-ui>\n      <badge-ui text=\"Pro\" variant=\"accent\"></badge-ui>\n    </span>\n    <span slot=\"action\"></span>\n  </header>\n  <section>\n    <text-ui color=\"subtle\" size=\"sm\">Your workspace stays available until May 14, 2026 — the end of your current billing period.</text-ui>\n  </section>\n  <section>\n    <col-ui gap=\"4\">\n      <alert-ui\n        variant=\"danger\"\n        icon=\"warning\"\n        text=\"You'll lose access to Pro features (advanced charts, API exports, priority support) on May 14. Your data is preserved for 90 days after cancellation.\"\n      ></alert-ui>\n      <divider-ui></divider-ui>\n      <col-ui gap=\"2\">\n        <text-ui strong>What happens on May 14</text-ui>\n        <row-ui gap=\"2\" align=\"center\"><icon-ui name=\"x-circle\" color=\"danger\"></icon-ui><text-ui>Advanced charts become view-only</text-ui></row-ui>\n        <row-ui gap=\"2\" align=\"center\"><icon-ui name=\"x-circle\" color=\"danger\"></icon-ui><text-ui>API key quota drops from 1M to 10K/month</text-ui></row-ui>\n        <row-ui gap=\"2\" align=\"center\"><icon-ui name=\"x-circle\" color=\"danger\"></icon-ui><text-ui>Priority support downgrades to community</text-ui></row-ui>\n        <row-ui gap=\"2\" align=\"center\"><icon-ui name=\"check-circle\" color=\"success\"></icon-ui><text-ui>Workspace, members, and history remain</text-ui></row-ui>\n      </col-ui>\n      <divider-ui></divider-ui>\n      <field-ui label=\"Primary reason for cancelling\">\n        <select-ui value=\"\">\n        <option value=\"\">Select a reason</option>\n        <option value=\"too-expensive\">Too expensive</option>\n        <option value=\"missing-features\">Missing features I need</option>\n        <option value=\"switching\">Switching to another tool</option>\n        <option value=\"not-using\">Not using it enough</option>\n        <option value=\"temporary\">Taking a break, may return</option>\n        <option value=\"other\">Other</option>\n      </select-ui>\n      </field-ui>\n      <field-ui label=\"Anything we could do better?\">\n        <textarea-ui rows=\"3\" placeholder=\"Optional — but we read every response.\"></textarea-ui>\n      </field-ui>\n      <divider-ui></divider-ui>\n      <field-ui label=\"Type CANCEL to confirm\">\n        <input-ui placeholder=\"CANCEL\"></input-ui>\n      </field-ui>\n    </col-ui>\n  </section>\n  <footer slot=\"footer\">\n    <grid-ui>\n      <button-ui text=\"Keep my plan\" variant=\"ghost\" onclick=\"this.closest('drawer-ui').open = false\"></button-ui>\n      <button-ui text=\"Confirm cancellation\" color=\"danger\" onclick=\"this.closest('drawer-ui').open = false\"></button-ui>\n    </grid-ui>\n  </footer>\n</drawer-ui>",
+  "source": "site/pages/examples/billing/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/drawer-change-plan.json

@@ -0,0 +1,15 @@
+{
+  "name": "drawer-change-plan",
+  "kind": "block",
+  "primary": "drawer-ui",
+  "page": "/site/examples/billing",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "side": "right",
+    "size": "md"
+  },
+  "html": "<drawer-ui id=\"drawer-change-plan\" data-chunk=\"drawer-change-plan\" side=\"right\" size=\"md\">\n  <header>\n    <span slot=\"icon\">\n      <avatar-ui icon=\"star\"></avatar-ui>\n    </span>\n    <span slot=\"heading\">\n      <text-ui strong>Change plan</text-ui>\n    </span>\n    <span slot=\"action\"></span>\n  </header>\n  <section>\n    <text-ui color=\"subtle\" size=\"sm\">Switch plans anytime. Credits and downgrades prorate to your next invoice.</text-ui>\n  </section>\n  <section>\n    <col-ui gap=\"4\">\n      <grid-ui columns=\"2\" gap=\"3\">\n        <card-ui size=\"sm\"\n          ><section><stat-ui label=\"Current spend\" value=\"$49\" change=\"this month\"></stat-ui></section\n        ></card-ui>\n        <card-ui size=\"sm\"\n          ><section><stat-ui label=\"Seats used\" value=\"6 / 8\" change=\"+2 this month\" trend=\"up\"></stat-ui></section\n        ></card-ui>\n      </grid-ui>\n      <divider-ui></divider-ui>\n      <field-ui label=\"Billing interval\" hint=\"Annual plans ship with two months free.\">\n        <select-ui value=\"monthly\">\n        <option value=\"monthly\">Monthly</option>\n        <option value=\"annual\">Annual · save 17%</option>\n      </select-ui>\n      </field-ui>\n      <divider-ui></divider-ui>\n      <col-ui gap=\"3\">\n        <text-ui strong>Choose a plan</text-ui>\n        <div\n          role=\"radiogroup\"\n          aria-label=\"Plan\"\n          data-plan-picker\n          onclick=\"\n            const r = event.target.closest('card-ui')?.querySelector('radio-ui');\n            r && r.click();\n          \"\n        >\n          <list-ui divider>\n            <list-item-ui>\n              <card-ui>\n                <header>\n                  <radio-ui slot=\"icon\" name=\"plan\" value=\"pro\" checked></radio-ui>\n                  <span slot=\"heading\">\n                    <text-ui strong>Pro · $49/mo</text-ui>\n                    <badge-ui text=\"Current\" variant=\"accent\"></badge-ui>\n                  </span>\n                  <span slot=\"description\">\n                    <text-ui color=\"subtle\" size=\"sm\">Unlimited conversations, advanced charts, 100 GB storage</text-ui>\n                  </span>\n                </header>\n              </card-ui>\n            </list-item-ui>\n            <list-item-ui>\n              <card-ui>\n                <header>\n                  <radio-ui slot=\"icon\" name=\"plan\" value=\"team\"></radio-ui>\n                  <span slot=\"heading\">\n                    <text-ui strong>Team · $129/mo</text-ui>\n                  </span>\n                  <span slot=\"description\">\n                    <text-ui color=\"subtle\" size=\"sm\">Everything in Pro · SSO, audit log, role-based permissions, 1 TB storage</text-ui>\n                  </span>\n                </header>\n              </card-ui>\n            </list-item-ui>\n            <list-item-ui>\n              <card-ui>\n                <header>\n                  <radio-ui slot=\"icon\" name=\"plan\" value=\"enterprise\"></radio-ui>\n                  <span slot=\"heading\">\n                    <text-ui strong>Enterprise · custom</text-ui>\n                  </span>\n                  <span slot=\"description\">\n                    <text-ui color=\"subtle\" size=\"sm\">Dedicated support, DPA, SCIM, on-prem deployment. Talk to sales.</text-ui>\n                  </span>\n                </header>\n              </card-ui>\n            </list-item-ui>\n          </list-ui>\n        </div>\n      </col-ui>\n      <divider-ui></divider-ui>\n      <col-ui gap=\"2\">\n        <text-ui strong>What's included in every plan</text-ui>\n        <row-ui gap=\"2\" align=\"center\"><icon-ui name=\"check-circle\" color=\"success\"></icon-ui><text-ui>Unlimited workspaces</text-ui></row-ui>\n        <row-ui gap=\"2\" align=\"center\"><icon-ui name=\"check-circle\" color=\"success\"></icon-ui><text-ui>Priority email support</text-ui></row-ui>\n        <row-ui gap=\"2\" align=\"center\"><icon-ui name=\"check-circle\" color=\"success\"></icon-ui><text-ui>99.9% uptime SLA</text-ui></row-ui>\n      </col-ui>\n    </col-ui>\n  </section>\n  <footer slot=\"footer\">\n    <grid-ui>\n      <button-ui text=\"Talk to sales\" icon=\"chat-circle\" variant=\"ghost\"></button-ui>\n      <button-ui text=\"Cancel\" variant=\"ghost\" onclick=\"this.closest('drawer-ui').open = false\"></button-ui>\n      <button-ui text=\"Preview invoice\" variant=\"primary\" onclick=\"this.closest('drawer-ui').open = false\"></button-ui>\n    </grid-ui>\n  </footer>\n</drawer-ui>",
+  "source": "site/pages/examples/billing/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/drawer-custom-roles.json

@@ -0,0 +1,15 @@
+{
+  "name": "drawer-custom-roles",
+  "kind": "block",
+  "primary": "drawer-ui",
+  "page": "/site/examples/members",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "side": "right",
+    "size": "md"
+  },
+  "html": "<drawer-ui id=\"drawer-custom-roles\" data-chunk=\"drawer-custom-roles\" side=\"right\" size=\"md\">\n  <header>\n    <span slot=\"icon\">\n      <avatar-ui icon=\"shield-check\"></avatar-ui>\n    </span>\n    <span slot=\"heading\">\n      <text-ui strong>Custom roles</text-ui>\n      <badge-ui text=\"Pro\" variant=\"accent\"></badge-ui>\n    </span>\n    <span slot=\"action\"></span>\n  </header>\n  <section>\n    <text-ui color=\"subtle\" size=\"sm\">Define fine-grained permission sets and assign them to members.</text-ui>\n  </section>\n  <section>\n    <col-ui gap=\"4\">\n      <grid-ui columns=\"2\" gap=\"3\">\n        <card-ui size=\"sm\"\n          ><section><stat-ui label=\"Built-in roles\" value=\"3\"></stat-ui></section\n        ></card-ui>\n        <card-ui size=\"sm\"\n          ><section><stat-ui label=\"Custom roles\" value=\"2\" change=\"+1 this month\" trend=\"up\"></stat-ui></section\n        ></card-ui>\n      </grid-ui>\n      <divider-ui></divider-ui>\n      <col-ui gap=\"2\">\n        <text-ui strong>Existing custom roles</text-ui>\n        <list-ui divider>\n          <list-item-ui>\n            <row-ui gap=\"2\" align=\"center\" grow>\n              <avatar-ui icon=\"code\" size=\"sm\"></avatar-ui>\n              <col-ui gap=\"0\" grow>\n                <text-ui strong>Developer</text-ui>\n                <text-ui color=\"subtle\" size=\"sm\">API + webhook access · 4 members</text-ui>\n              </col-ui>\n              <button-ui variant=\"ghost\" size=\"sm\" icon=\"pencil-simple\"></button-ui>\n            </row-ui>\n          </list-item-ui>\n          <list-item-ui>\n            <row-ui gap=\"2\" align=\"center\" grow>\n              <avatar-ui icon=\"chart-line\" size=\"sm\"></avatar-ui>\n              <col-ui gap=\"0\" grow>\n                <text-ui strong>Analyst</text-ui>\n                <text-ui color=\"subtle\" size=\"sm\">Read + export only · 2 members</text-ui>\n              </col-ui>\n              <button-ui variant=\"ghost\" size=\"sm\" icon=\"pencil-simple\"></button-ui>\n            </row-ui>\n          </list-item-ui>\n        </list-ui>\n      </col-ui>\n      <divider-ui></divider-ui>\n      <col-ui gap=\"3\">\n        <text-ui strong>Create a new role</text-ui>\n        <field-ui label=\"Role name\">\n          <input-ui placeholder=\"e.g. Contractor\"></input-ui>\n        </field-ui>\n        <field-ui label=\"Description\">\n          <textarea-ui rows=\"2\" placeholder=\"One-line summary shown on member rows\"></textarea-ui>\n        </field-ui>\n        <field-ui label=\"Start from\" hint=\"Use an existing role as a baseline, then adjust below.\">\n          <select-ui value=\"viewer\">\n          <option value=\"viewer\">Viewer · read-only</option>\n          <option value=\"member\">Member · edit + invite</option>\n          <option value=\"admin\">Admin · full access</option>\n          <option value=\"blank\">Blank · no permissions</option>\n        </select-ui>\n        </field-ui>\n      </col-ui>\n      <divider-ui></divider-ui>\n      <col-ui gap=\"3\">\n        <text-ui strong>Content</text-ui>\n        <field-ui label=\"View projects and conversations\" inline>\n          <check-ui checked></check-ui>\n        </field-ui>\n        <field-ui label=\"Edit own content\" inline>\n          <check-ui checked></check-ui>\n        </field-ui>\n        <field-ui label=\"Edit others' content\" inline>\n          <check-ui></check-ui>\n        </field-ui>\n        <field-ui label=\"Delete content\" inline>\n          <check-ui></check-ui>\n        </field-ui>\n        <field-ui label=\"Export to CSV / PDF\" inline>\n          <check-ui></check-ui>\n        </field-ui>\n      </col-ui>\n      <divider-ui></divider-ui>\n      <col-ui gap=\"3\">\n        <text-ui strong>Members</text-ui>\n        <field-ui label=\"Invite new members\" inline>\n          <check-ui></check-ui>\n        </field-ui>\n        <field-ui label=\"Change member roles\" inline>\n          <check-ui></check-ui>\n        </field-ui>\n        <field-ui label=\"Remove members\" inline>\n          <check-ui></check-ui>\n        </field-ui>\n      </col-ui>\n      <divider-ui></divider-ui>\n      <col-ui gap=\"3\">\n        <text-ui strong>Workspace</text-ui>\n        <field-ui label=\"View billing and invoices\" inline>\n          <check-ui></check-ui>\n        </field-ui>\n        <field-ui label=\"Change billing plan\" inline>\n          <check-ui></check-ui>\n        </field-ui>\n        <field-ui label=\"Manage API keys\" inline>\n          <check-ui></check-ui>\n        </field-ui>\n        <field-ui label=\"Manage webhooks\" inline>\n          <check-ui></check-ui>\n        </field-ui>\n        <field-ui label=\"Delete workspace\" inline>\n          <check-ui></check-ui>\n        </field-ui>\n      </col-ui>\n    </col-ui>\n  </section>\n  <footer slot=\"footer\">\n    <grid-ui>\n      <button-ui text=\"Cancel\" variant=\"ghost\" onclick=\"this.closest('drawer-ui').open = false\"></button-ui>\n      <button-ui text=\"Create role\" icon=\"plus\" variant=\"primary\" onclick=\"this.closest('drawer-ui').open = false\"></button-ui>\n    </grid-ui>\n  </footer>\n</drawer-ui>",
+  "source": "site/pages/examples/members/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/drawer-data-start.json

@@ -0,0 +1,15 @@
+{
+  "name": "drawer-data-start",
+  "kind": "block",
+  "primary": "drawer-ui",
+  "page": "/site/examples/onboarding/review",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "side": "right",
+    "size": "md"
+  },
+  "html": "<drawer-ui id=\"drawer-data-start\" data-chunk=\"drawer-data-start\" side=\"right\" size=\"md\">\n  <header>\n    <span slot=\"icon\">\n      <avatar-ui icon=\"database\"></avatar-ui>\n    </span>\n    <span slot=\"heading\">\n      <text-ui strong>Data start</text-ui>\n    </span>\n    <span slot=\"action\"></span>\n  </header>\n  <section>\n    <text-ui color=\"subtle\" size=\"sm\">Switch to live source any time from settings — sample data is non-destructive.</text-ui>\n  </section>\n  <section>\n    <div role=\"radiogroup\" aria-label=\"Data start\">\n      <col-ui gap=\"2\">\n        <option-card-ui\n          name=\"data-start\" value=\"sample\" checked\n          heading=\"Sample data\"\n          description=\"Pre-seeded dashboards with realistic AdiaUI demo data. Best for kicking the tires.\"></option-card-ui>\n        <option-card-ui\n          name=\"data-start\" value=\"live\"\n          heading=\"Live source\"\n          description=\"Stream from your connected GitHub source. We'll backfill 30 days on first sync.\"></option-card-ui>\n        <option-card-ui\n          name=\"data-start\" value=\"empty\"\n          heading=\"Empty workspace\"\n          description=\"Skip both — start from a blank canvas and build dashboards by hand.\"></option-card-ui>\n      </col-ui>\n    </div>\n  </section>\n  <footer slot=\"footer\">\n    <grid-ui>\n      <button-ui text=\"Cancel\" variant=\"ghost\" onclick=\"this.closest('drawer-ui').open = false\"></button-ui>\n      <button-ui text=\"Save changes\" variant=\"primary\" onclick=\"this.closest('drawer-ui').open = false\"></button-ui>\n    </grid-ui>\n  </footer>\n</drawer-ui>",
+  "source": "site/pages/examples/onboarding/review/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/drawer-delete-account.json

@@ -0,0 +1,15 @@
+{
+  "name": "drawer-delete-account",
+  "kind": "block",
+  "primary": "drawer-ui",
+  "page": "/site/examples/profile-security",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "side": "right",
+    "size": "md"
+  },
+  "html": "<drawer-ui id=\"drawer-delete-account\" data-chunk=\"drawer-delete-account\" side=\"right\" size=\"md\">\n  <header>\n    <span slot=\"icon\">\n      <avatar-ui icon=\"warning-octagon\"></avatar-ui>\n    </span>\n    <span slot=\"heading\">\n      <text-ui strong>Delete account</text-ui>\n    </span>\n    <span slot=\"action\"></span>\n  </header>\n  <section>\n    <text-ui color=\"subtle\" size=\"sm\">Permanently removes your account and all associated data after a 30-day grace period.</text-ui>\n  </section>\n  <section>\n    <col-ui gap=\"4\">\n      <alert-ui\n        variant=\"danger\"\n        icon=\"warning\"\n        text=\"This cannot be undone after 30 days. You'll be signed out immediately, and billing stops at the next cycle.\"\n      ></alert-ui>\n      <divider-ui></divider-ui>\n      <col-ui gap=\"2\">\n        <text-ui strong>What gets deleted</text-ui>\n        <row-ui gap=\"2\" align=\"center\"><icon-ui name=\"x-circle\" color=\"danger\"></icon-ui><text-ui>All conversations and uploaded files</text-ui></row-ui>\n        <row-ui gap=\"2\" align=\"center\"><icon-ui name=\"x-circle\" color=\"danger\"></icon-ui><text-ui>Workspaces you own (members are notified)</text-ui></row-ui>\n        <row-ui gap=\"2\" align=\"center\"><icon-ui name=\"x-circle\" color=\"danger\"></icon-ui><text-ui>API keys, webhooks, and integrations</text-ui></row-ui>\n        <row-ui gap=\"2\" align=\"center\"><icon-ui name=\"x-circle\" color=\"danger\"></icon-ui><text-ui>Billing history and tax documents</text-ui></row-ui>\n      </col-ui>\n      <divider-ui></divider-ui>\n      <col-ui gap=\"2\">\n        <text-ui strong>Before you go</text-ui>\n        <button-ui text=\"Export my data\" variant=\"outline\" icon=\"download-simple\" stretch></button-ui>\n        <button-ui text=\"Transfer workspace ownership\" variant=\"outline\" icon=\"user-switch\" stretch></button-ui>\n      </col-ui>\n      <divider-ui></divider-ui>\n      <col-ui gap=\"3\">\n        <text-ui strong>Confirm</text-ui>\n        <field-ui label=\"Type your email to confirm\">\n          <input-ui placeholder=\"kim@acme.com\"></input-ui>\n        </field-ui>\n        <field-ui label=\"Type DELETE to confirm\">\n          <input-ui placeholder=\"DELETE\"></input-ui>\n        </field-ui>\n      </col-ui>\n    </col-ui>\n  </section>\n  <footer slot=\"footer\">\n    <grid-ui>\n      <button-ui text=\"Cancel\" variant=\"ghost\" onclick=\"this.closest('drawer-ui').open = false\"></button-ui>\n      <button-ui text=\"Delete my account\" icon=\"trash\" color=\"danger\" onclick=\"this.closest('drawer-ui').open = false\"></button-ui>\n    </grid-ui>\n  </footer>\n</drawer-ui>",
+  "source": "site/pages/examples/profile-security/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/drawer-delete-workspace.json

@@ -0,0 +1,15 @@
+{
+  "name": "drawer-delete-workspace",
+  "kind": "block",
+  "primary": "drawer-ui",
+  "page": "/site/examples/settings-page",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "side": "right",
+    "size": "md"
+  },
+  "html": "<drawer-ui id=\"drawer-delete-workspace\" data-chunk=\"drawer-delete-workspace\" side=\"right\" size=\"md\">\n      <header>\n        <span slot=\"icon\">\n          <avatar-ui icon=\"warning-octagon\"></avatar-ui>\n        </span>\n        <span slot=\"heading\">\n          <text-ui strong>Delete workspace</text-ui>\n          <badge-ui text=\"adia-ui\" variant=\"accent\"></badge-ui>\n        </span>\n        <span slot=\"action\"></span>\n      </header>\n      <section>\n        <text-ui color=\"subtle\" size=\"sm\">Permanently removes the workspace and all member access. Data is purged after 30 days.</text-ui>\n      </section>\n      <section>\n        <col-ui gap=\"4\">\n          <alert-ui\n            variant=\"danger\"\n            icon=\"warning\"\n            text=\"This cannot be undone. All 14 members will lose access immediately.\"\n          ></alert-ui>\n          <divider-ui></divider-ui>\n          <grid-ui columns=\"2\" gap=\"3\">\n            <card-ui size=\"sm\"><section><stat-ui label=\"Members\" value=\"14\"></stat-ui></section></card-ui>\n            <card-ui size=\"sm\"><section><stat-ui label=\"Conversations\" value=\"8,420\"></stat-ui></section></card-ui>\n            <card-ui size=\"sm\"><section><stat-ui label=\"API keys\" value=\"6\"></stat-ui></section></card-ui>\n            <card-ui size=\"sm\"><section><stat-ui label=\"Storage\" value=\"42 GB\"></stat-ui></section></card-ui>\n          </grid-ui>\n          <divider-ui></divider-ui>\n          <col-ui gap=\"2\">\n            <text-ui strong>Before you delete</text-ui>\n            <button-ui text=\"Export workspace data\" variant=\"outline\" icon=\"download-simple\" stretch></button-ui>\n            <button-ui text=\"Transfer ownership\" variant=\"outline\" icon=\"user-switch\" stretch></button-ui>\n          </col-ui>\n          <divider-ui></divider-ui>\n          <col-ui gap=\"3\">\n            <text-ui strong>Confirm</text-ui>\n            <field-ui label=\"Type the workspace name to confirm\">\n              <input-ui placeholder=\"adia-ui\"></input-ui>\n            </field-ui>\n            <field-ui label=\"I understand this deletes all members, data, and integrations\" inline>\n              <check-ui></check-ui>\n            </field-ui>\n          </col-ui>\n        </col-ui>\n      </section>\n      <footer slot=\"footer\">\n        <grid-ui>\n          <button-ui text=\"Cancel\" variant=\"ghost\" onclick=\"this.closest('drawer-ui').open = false\"></button-ui>\n          <button-ui text=\"Delete workspace\" icon=\"trash\" color=\"danger\" onclick=\"this.closest('drawer-ui').open = false\"></button-ui>\n        </grid-ui>\n      </footer>\n    </drawer-ui>",
+  "source": "site/pages/examples/settings-page/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/drawer-discord.json

@@ -0,0 +1,15 @@
+{
+  "name": "drawer-discord",
+  "kind": "block",
+  "primary": "drawer-ui",
+  "page": "/site/examples/integrations",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "side": "right",
+    "size": "md"
+  },
+  "html": "<drawer-ui id=\"drawer-discord\" data-chunk=\"drawer-discord\" side=\"right\" size=\"md\">\n  <header>\n    <span slot=\"icon\">\n      <avatar-ui icon=\"discord-logo\"></avatar-ui>\n    </span>\n    <span slot=\"heading\">\n      <text-ui strong>Discord</text-ui>\n    </span>\n    <span slot=\"action\"></span>\n  </header>\n  <section>\n    <text-ui color=\"subtle\" size=\"sm\">Post notifications to a channel via webhook</text-ui>\n  </section>\n  <section>\n    <col-ui gap=\"4\">\n      <alert-ui\n        variant=\"info\"\n        icon=\"info\"\n        text=\"Create a webhook in your Discord server (Server Settings → Integrations → Webhooks) and paste the URL below.\"\n      ></alert-ui>\n      <divider-ui></divider-ui>\n      <field-ui label=\"Webhook URL\" hint=\"Anyone with this URL can post to the channel. Store it securely.\">\n        <input-ui placeholder=\"https://discord.com/api/webhooks/987654321/abc…\"></input-ui>\n      </field-ui>\n      <row-ui gap=\"2\">\n        <field-ui label=\"Server name\">\n          <input-ui value=\"Acme Community\" readonly grow></input-ui>\n        </field-ui>\n        <field-ui label=\"Guild ID\">\n          <input-ui value=\"1041998742135308288\" readonly grow></input-ui>\n        </field-ui>\n      </row-ui>\n      <field-ui label=\"Target channel\" hint=\"Auto-discovered from the webhook URL.\">\n        <select-ui value=\"deploys\">\n        <option value=\"general\">#general (8,420 members)</option>\n        <option value=\"announcements\">#announcements (8,420 members)</option>\n        <option value=\"deploys\">#deploys (42 members)</option>\n        <option value=\"alerts\">#alerts (18 members)</option>\n        <option value=\"support\">#support (1,284 members)</option>\n        <option value=\"releases\">#releases (8,420 members)</option>\n      </select-ui>\n      </field-ui>\n      <divider-ui></divider-ui>\n      <col-ui gap=\"3\">\n        <text-ui strong>Post when…</text-ui>\n        <field-ui label=\"Someone mentions @Acme\" inline>\n          <switch-ui checked></switch-ui>\n        </field-ui>\n        <field-ui label=\"A deploy succeeds\" inline>\n          <switch-ui></switch-ui>\n        </field-ui>\n        <field-ui label=\"A deploy fails\" inline>\n          <switch-ui checked></switch-ui>\n        </field-ui>\n        <field-ui label=\"A release is published\" inline>\n          <switch-ui checked></switch-ui>\n        </field-ui>\n        <field-ui label=\"An incident is opened\" inline>\n          <switch-ui></switch-ui>\n        </field-ui>\n        <field-ui label=\"Daily summary at 9:00 AM\" inline>\n          <switch-ui></switch-ui>\n        </field-ui>\n      </col-ui>\n      <divider-ui></divider-ui>\n      <col-ui gap=\"3\">\n        <text-ui strong>Appearance</text-ui>\n        <field-ui label=\"Bot display name\">\n          <input-ui value=\"Acme\"></input-ui>\n        </field-ui>\n        <field-ui label=\"Bot avatar URL\">\n          <input-ui value=\"https://acme.com/bot-avatar.png\" placeholder=\"https://…\"></input-ui>\n        </field-ui>\n        <field-ui label=\"Embed style\">\n          <select-ui value=\"rich\">\n          <option value=\"plain\">Plain text</option>\n          <option value=\"rich\">Rich embed (recommended)</option>\n          <option value=\"compact\">Compact one-line</option>\n        </select-ui>\n        </field-ui>\n      </col-ui>\n    </col-ui>\n  </section>\n  <footer slot=\"footer\">\n    <grid-ui>\n      <button-ui text=\"Send test message\" icon=\"paper-plane-tilt\" variant=\"ghost\"></button-ui>\n      <button-ui text=\"Connect\" variant=\"primary\" onclick=\"this.closest('drawer-ui').open = false\"></button-ui>\n    </grid-ui>\n  </footer>\n</drawer-ui>",
+  "source": "site/pages/examples/integrations/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/drawer-edge-cases.json

@@ -0,0 +1,15 @@
+{
+  "name": "drawer-edge-cases",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/drawer",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "edge-cases"
+  },
+  "html": "<section data-section data-property=\"edge-cases\" data-chunk=\"drawer-edge-cases\">\n  <h2 variant=\"section\">Edge cases</h2>\n  <p data-note>Empty body, scrollable body, and bare <code>text</code>-only drawers all hold their structure.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"title only\">\n      <button-ui text=\"Title only\" variant=\"outline\" onclick=\"this.nextElementSibling.open=true\"></button-ui>\n      <drawer-ui text=\"Just a title\" side=\"right\"></drawer-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"scrollable\">\n      <button-ui text=\"Long content\" variant=\"outline\" onclick=\"this.nextElementSibling.open=true\"></button-ui>\n      <drawer-ui text=\"Release notes\" side=\"right\">\n        <section>\n          <col-ui gap=\"3\">\n            <text-ui><strong>v0.1.10</strong> — drawer-ui accepts bare header/section/footer.</text-ui>\n            <text-ui><strong>v0.1.9</strong> — card-ui header grid tightened to direct-child :has().</text-ui>\n            <text-ui><strong>v0.1.8</strong> — semantic L2 tokens simplified to single scheme-aware steps.</text-ui>\n            <text-ui><strong>v0.1.7</strong> — grid-ui columns + span replace inline grid-template overrides.</text-ui>\n            <text-ui><strong>v0.1.6</strong> — input-ui value sync via setAttribute + text-slot mirror.</text-ui>\n            <text-ui><strong>v0.1.5</strong> — radio-card pattern documented in adia-ui-kit.</text-ui>\n            <text-ui><strong>v0.1.4</strong> — state-coverage menu pattern (Default/Loading/Empty/Error).</text-ui>\n            <text-ui><strong>v0.1.3</strong> — interactive filter bar wiring pattern.</text-ui>\n            <text-ui><strong>v0.1.2</strong> — conversion funnel + retention cohort recipe pages.</text-ui>\n            <text-ui><strong>v0.1.1</strong> — initial release.</text-ui>\n          </col-ui>\n        </section>\n        <footer>\n          <button-ui text=\"Close\" variant=\"primary\" stretch onclick=\"this.closest('drawer-ui').open=false\"></button-ui>\n        </footer>\n      </drawer-ui>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/components/drawer/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/drawer-figma.json

@@ -0,0 +1,15 @@
+{
+  "name": "drawer-figma",
+  "kind": "block",
+  "primary": "drawer-ui",
+  "page": "/site/examples/integrations",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "side": "right",
+    "size": "md"
+  },
+  "html": "<drawer-ui id=\"drawer-figma\" data-chunk=\"drawer-figma\" side=\"right\" size=\"md\">\n  <header>\n    <span slot=\"icon\">\n      <avatar-ui icon=\"figma-logo\"></avatar-ui>\n    </span>\n    <span slot=\"heading\">\n      <text-ui strong>Figma</text-ui>\n    </span>\n    <span slot=\"action\"></span>\n  </header>\n  <section>\n    <text-ui color=\"subtle\" size=\"sm\">Embed designs and sync frames from your team</text-ui>\n  </section>\n  <section>\n    <col-ui gap=\"4\">\n      <alert-ui\n        variant=\"info\"\n        icon=\"info\"\n        text=\"Sign in with your Figma account. Acme requests read-only access to files you or your team have published.\"\n      ></alert-ui>\n      <divider-ui></divider-ui>\n      <col-ui gap=\"2\">\n        <text-ui strong>Permissions Acme will receive</text-ui>\n        <row-ui gap=\"2\" align=\"center\"><icon-ui name=\"check-circle\" color=\"success\"></icon-ui><text-ui>Read file metadata, pages, and frames</text-ui></row-ui>\n        <row-ui gap=\"2\" align=\"center\"><icon-ui name=\"check-circle\" color=\"success\"></icon-ui><text-ui>Generate embed URLs for published frames</text-ui></row-ui>\n        <row-ui gap=\"2\" align=\"center\"><icon-ui name=\"check-circle\" color=\"success\"></icon-ui><text-ui>Receive webhook events when files update</text-ui></row-ui>\n        <row-ui gap=\"2\" align=\"center\"\n          ><icon-ui name=\"x-circle\" color=\"subtle\"></icon-ui><text-ui color=\"subtle\">No edit access · no billing or admin scope</text-ui></row-ui\n        >\n      </col-ui>\n      <divider-ui></divider-ui>\n      <field-ui label=\"Figma team\" hint=\"Populated after OAuth completes.\">\n        <select-ui value=\"design\">\n        <option value=\"design\">Acme · Design</option>\n        <option value=\"marketing\">Acme · Marketing</option>\n        <option value=\"brand\">Acme · Brand</option>\n        <option value=\"engineering\">Acme · Engineering (personal)</option>\n      </select-ui>\n      </field-ui>\n      <field-ui label=\"Project filter\">\n        <select-ui value=\"all\">\n        <option value=\"all\">All projects in selected team</option>\n        <option value=\"published\">Published-only files</option>\n        <option value=\"starred\">Starred projects</option>\n      </select-ui>\n      </field-ui>\n      <divider-ui></divider-ui>\n      <col-ui gap=\"3\">\n        <text-ui strong>Sync behavior</text-ui>\n        <field-ui label=\"Auto-sync frames when a file is published\" inline>\n          <switch-ui checked></switch-ui>\n        </field-ui>\n        <field-ui label=\"Refresh thumbnails every 6 hours\" inline>\n          <switch-ui checked></switch-ui>\n        </field-ui>\n        <field-ui label=\"Include prototype interactions\" inline>\n          <switch-ui></switch-ui>\n        </field-ui>\n        <field-ui label=\"Notify on library publishes\" inline>\n          <switch-ui></switch-ui>\n        </field-ui>\n      </col-ui>\n    </col-ui>\n  </section>\n  <footer slot=\"footer\">\n    <grid-ui>\n      <button-ui text=\"Cancel\" variant=\"ghost\" onclick=\"this.closest('drawer-ui').open = false\"></button-ui>\n      <button-ui text=\"Continue to Figma\" icon=\"arrow-square-out\" variant=\"primary\" onclick=\"this.closest('drawer-ui').open = false\"></button-ui>\n    </grid-ui>\n  </footer>\n</drawer-ui>",
+  "source": "site/pages/examples/integrations/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/drawer-first-dashboard.json

@@ -0,0 +1,15 @@
+{
+  "name": "drawer-first-dashboard",
+  "kind": "block",
+  "primary": "drawer-ui",
+  "page": "/site/examples/onboarding/review",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "side": "right",
+    "size": "md"
+  },
+  "html": "<drawer-ui id=\"drawer-first-dashboard\" data-chunk=\"drawer-first-dashboard\" side=\"right\" size=\"md\">\n  <header>\n    <span slot=\"icon\">\n      <avatar-ui icon=\"chart-line\"></avatar-ui>\n    </span>\n    <span slot=\"heading\">\n      <text-ui strong>First dashboard</text-ui>\n    </span>\n    <span slot=\"action\"></span>\n  </header>\n  <section>\n    <text-ui color=\"subtle\" size=\"sm\">Generated and pinned to your home. Tweak the prompt or pick a template — regenerating won't unpin the existing one.</text-ui>\n  </section>\n  <section>\n    <col-ui gap=\"4\">\n      <field-ui label=\"Current dashboard\">\n        <input-ui value=\"Weekly revenue · 6-month trend\" readonly></input-ui>\n      </field-ui>\n      <field-ui label=\"Or pick a template\">\n        <select-ui value=\"\">\n          <option value=\"\">— Keep current —</option>\n          <option value=\"release-velocity\">Release velocity · 4-week rolling</option>\n          <option value=\"incident-mttr\">Incident MTTR · monthly</option>\n          <option value=\"pr-throughput\">PR throughput · per author</option>\n          <option value=\"deploy-frequency\">Deploy frequency · daily</option>\n          <option value=\"error-rate\">Error rate · last 30 days</option>\n        </select-ui>\n      </field-ui>\n      <divider-ui></divider-ui>\n      <field-ui label=\"Or describe a new one\" hint=\"Plain English. AdiaUI will pick chart types and time ranges.\">\n        <textarea-ui name=\"dashboard-prompt\" placeholder=\"e.g. Top 10 noisiest repos by failed CI runs, last 14 days.\" rows=\"3\"></textarea-ui>\n      </field-ui>\n    </col-ui>\n  </section>\n  <footer slot=\"footer\">\n    <grid-ui>\n      <button-ui text=\"Cancel\" variant=\"ghost\" onclick=\"this.closest('drawer-ui').open = false\"></button-ui>\n      <button-ui text=\"Regenerate\" icon=\"sparkle\" variant=\"primary\" onclick=\"this.closest('drawer-ui').open = false\"></button-ui>\n    </grid-ui>\n  </footer>\n</drawer-ui>",
+  "source": "site/pages/examples/onboarding/review/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/drawer-footer.json

@@ -0,0 +1,15 @@
+{
+  "name": "drawer-footer",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/drawer",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "footer"
+  },
+  "html": "<section data-section data-property=\"footer\" data-chunk=\"drawer-footer\">\n  <h2 variant=\"section\">Footer patterns</h2>\n  <p data-note>The footer is opt-in — only mounted when an author <code>&lt;footer&gt;</code> (or <code>[slot=\"footer\"]</code>) is present. Inner <code>&lt;grid-ui&gt;</code> distributes buttons evenly; the <code>[slot=\"description\"] + [slot=\"action\"]</code> pair triggers space-between (matches <code>card-ui</code>'s footer semantics).</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"grid-ui button row\">\n      <button-ui text=\"3-button footer\" variant=\"outline\" onclick=\"this.nextElementSibling.open=true\"></button-ui>\n      <drawer-ui text=\"Edit transaction\" side=\"right\">\n        <section><text-ui color=\"subtle\">Three actions split evenly via <code>&lt;grid-ui&gt;</code>.</text-ui></section>\n        <footer>\n          <grid-ui>\n            <button-ui text=\"Refund\" color=\"danger\" icon=\"arrow-u-left-up\"></button-ui>\n            <button-ui text=\"Close\" variant=\"ghost\" onclick=\"this.closest('drawer-ui').open=false\"></button-ui>\n            <button-ui text=\"Save\" variant=\"primary\" onclick=\"this.closest('drawer-ui').open=false\"></button-ui>\n          </grid-ui>\n        </footer>\n      </drawer-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"description + action\">\n      <button-ui text=\"space-between\" variant=\"outline\" onclick=\"this.nextElementSibling.open=true\"></button-ui>\n      <drawer-ui text=\"Save changes\" side=\"right\">\n        <section><text-ui color=\"subtle\">A <code>[slot=\"description\"]</code> on the left, an <code>[slot=\"action\"]</code> on the right.</text-ui></section>\n        <footer>\n          <p slot=\"description\">Auto-saved 2s ago</p>\n          <span slot=\"action\">\n            <button-ui text=\"Done\" variant=\"primary\" onclick=\"this.closest('drawer-ui').open=false\"></button-ui>\n          </span>\n        </footer>\n      </drawer-ui>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/components/drawer/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/drawer-gcal.json

@@ -0,0 +1,15 @@
+{
+  "name": "drawer-gcal",
+  "kind": "block",
+  "primary": "drawer-ui",
+  "page": "/site/examples/integrations",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "side": "right",
+    "size": "md"
+  },
+  "html": "<drawer-ui id=\"drawer-gcal\" data-chunk=\"drawer-gcal\" side=\"right\" size=\"md\">\n  <header>\n    <span slot=\"icon\">\n      <avatar-ui icon=\"calendar\"></avatar-ui>\n    </span>\n    <span slot=\"heading\">\n      <text-ui strong>Google Calendar</text-ui>\n    </span>\n    <span slot=\"action\"></span>\n  </header>\n  <section>\n    <text-ui color=\"subtle\" size=\"sm\">Sync events, attendees, and reminders into Acme</text-ui>\n  </section>\n  <section>\n    <col-ui gap=\"4\">\n      <alert-ui\n        variant=\"info\"\n        icon=\"info\"\n        text=\"Sign in to select which calendars to sync. You can change scopes later in your Google account settings.\"\n      ></alert-ui>\n      <divider-ui></divider-ui>\n      <field-ui label=\"Google account\">\n        <input-ui value=\"kim@acme.com\" readonly prefix=\"@\"></input-ui>\n      </field-ui>\n      <field-ui label=\"Sync direction\">\n        <select-ui value=\"one-way\">\n        <option value=\"one-way\">One-way (Google → Acme)</option>\n        <option value=\"two-way\">Two-way sync</option>\n        <option value=\"acme-to-google\">Acme → Google only</option>\n      </select-ui>\n      </field-ui>\n      <divider-ui></divider-ui>\n      <col-ui gap=\"3\">\n        <text-ui strong>Calendars to sync</text-ui>\n        <field-ui label=\"Kim Granlund · Primary\" inline>\n          <check-ui checked></check-ui>\n        </field-ui>\n        <field-ui label=\"Acme · Engineering team\" inline>\n          <check-ui checked></check-ui>\n        </field-ui>\n        <field-ui label=\"Acme · Design reviews\" inline>\n          <check-ui checked></check-ui>\n        </field-ui>\n        <field-ui label=\"Acme · Company-wide\" inline>\n          <check-ui></check-ui>\n        </field-ui>\n        <field-ui label=\"Kim Granlund · Focus time\" inline>\n          <check-ui></check-ui>\n        </field-ui>\n        <field-ui label=\"Holidays in United States\" inline>\n          <check-ui></check-ui>\n        </field-ui>\n      </col-ui>\n      <divider-ui></divider-ui>\n      <col-ui gap=\"3\">\n        <text-ui strong>Event fields we'll read</text-ui>\n        <field-ui label=\"Titles and times\" inline>\n          <check-ui checked></check-ui>\n        </field-ui>\n        <field-ui label=\"Attendee list\" inline>\n          <check-ui checked></check-ui>\n        </field-ui>\n        <field-ui label=\"Descriptions\" inline>\n          <check-ui></check-ui>\n        </field-ui>\n        <field-ui label=\"Attached files and links\" inline>\n          <check-ui></check-ui>\n        </field-ui>\n        <field-ui label=\"Meeting recording links\" inline>\n          <check-ui></check-ui>\n        </field-ui>\n      </col-ui>\n      <divider-ui></divider-ui>\n      <col-ui gap=\"3\">\n        <text-ui strong>Window</text-ui>\n        <row-ui gap=\"2\">\n          <range-ui label=\"Look-ahead (days)\" value=\"30\" min=\"1\" max=\"90\" grow></range-ui>\n          <range-ui label=\"Look-back (days)\" value=\"7\" min=\"0\" max=\"30\" grow></range-ui>\n        </row-ui>\n        <field-ui label=\"Respect 'Working hours' from Google\" inline>\n          <switch-ui checked></switch-ui>\n        </field-ui>\n        <field-ui label=\"Skip private events\" inline>\n          <switch-ui></switch-ui>\n        </field-ui>\n      </col-ui>\n    </col-ui>\n  </section>\n  <footer slot=\"footer\">\n    <grid-ui>\n      <button-ui text=\"Cancel\" variant=\"ghost\" onclick=\"this.closest('drawer-ui').open = false\"></button-ui>\n      <button-ui text=\"Sign in with Google\" icon=\"arrow-square-out\" variant=\"primary\" onclick=\"this.closest('drawer-ui').open = false\"></button-ui>\n    </grid-ui>\n  </footer>\n</drawer-ui>",
+  "source": "site/pages/examples/integrations/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/drawer-github.json

@@ -0,0 +1,15 @@
+{
+  "name": "drawer-github",
+  "kind": "block",
+  "primary": "drawer-ui",
+  "page": "/site/examples/integrations",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "side": "right",
+    "size": "md"
+  },
+  "html": "<drawer-ui id=\"drawer-github\" data-chunk=\"drawer-github\" side=\"right\" size=\"md\">\n  <header>\n    <span slot=\"icon\">\n      <avatar-ui icon=\"github-logo\"></avatar-ui>\n    </span>\n    <span slot=\"heading\">\n      <text-ui strong>GitHub</text-ui>\n      <badge-ui text=\"Connected\" variant=\"success\"></badge-ui>\n    </span>\n    <span slot=\"action\"></span>\n  </header>\n  <section>\n    <text-ui color=\"subtle\" size=\"sm\">acme-corp · 14 repositories synced</text-ui>\n  </section>\n  <section>\n    <col-ui gap=\"4\">\n      <grid-ui columns=\"2\" gap=\"3\">\n        <card-ui size=\"sm\"\n          ><section><stat-ui label=\"Webhooks delivered\" value=\"8,420\" change=\"+142 today\" trend=\"up\"></stat-ui></section\n        ></card-ui>\n        <card-ui size=\"sm\"\n          ><section><stat-ui label=\"Last delivery\" value=\"12s ago\" change=\"pull_request.opened\"></stat-ui></section\n        ></card-ui>\n      </grid-ui>\n      <divider-ui></divider-ui>\n      <field-ui label=\"Organization\">\n        <input-ui value=\"acme-corp\" readonly></input-ui>\n      </field-ui>\n      <field-ui label=\"Installation ID\">\n        <input-ui value=\"42189873\" readonly></input-ui>\n      </field-ui>\n      <field-ui label=\"Sync scope\">\n        <select-ui value=\"selected\">\n        <option value=\"all\">All 47 repositories in the org</option>\n        <option value=\"selected\">Selected repositories (14)</option>\n        <option value=\"public\">Public repositories only</option>\n      </select-ui>\n      </field-ui>\n      <divider-ui></divider-ui>\n      <col-ui gap=\"3\">\n        <text-ui strong>Sync events</text-ui>\n        <field-ui label=\"Pull requests opened, merged, closed\" inline>\n          <check-ui checked></check-ui>\n        </field-ui>\n        <field-ui label=\"Issues opened, closed, commented\" inline>\n          <check-ui checked></check-ui>\n        </field-ui>\n        <field-ui label=\"Releases published\" inline>\n          <check-ui checked></check-ui>\n        </field-ui>\n        <field-ui label=\"Check runs (CI status)\" inline>\n          <check-ui></check-ui>\n        </field-ui>\n        <field-ui label=\"Deployments\" inline>\n          <check-ui></check-ui>\n        </field-ui>\n        <field-ui label=\"Discussions\" inline>\n          <check-ui></check-ui>\n        </field-ui>\n      </col-ui>\n      <divider-ui></divider-ui>\n      <col-ui gap=\"2\">\n        <text-ui strong>Synced repositories</text-ui>\n        <list-ui divider>\n          <list-item-ui>\n            <row-ui gap=\"2\" align=\"center\" grow>\n              <icon-ui name=\"git-branch\"></icon-ui>\n              <text-ui grow>acme-corp/web</text-ui>\n              <text-ui color=\"subtle\">2m ago</text-ui>\n            </row-ui>\n          </list-item-ui>\n          <list-item-ui>\n            <row-ui gap=\"2\" align=\"center\" grow>\n              <icon-ui name=\"git-branch\"></icon-ui>\n              <text-ui grow>acme-corp/api</text-ui>\n              <text-ui color=\"subtle\">18m ago</text-ui>\n            </row-ui>\n          </list-item-ui>\n          <list-item-ui>\n            <row-ui gap=\"2\" align=\"center\" grow>\n              <icon-ui name=\"git-branch\"></icon-ui>\n              <text-ui grow>acme-corp/mobile</text-ui>\n              <text-ui color=\"subtle\">2h ago</text-ui>\n            </row-ui>\n          </list-item-ui>\n          <list-item-ui>\n            <row-ui gap=\"2\" align=\"center\" grow>\n              <icon-ui name=\"git-branch\"></icon-ui>\n              <text-ui grow>acme-corp/infra</text-ui>\n              <text-ui color=\"subtle\">Yesterday</text-ui>\n            </row-ui>\n          </list-item-ui>\n        </list-ui>\n        <button-ui text=\"Manage repositories\" variant=\"outline\" icon=\"gear\" stretch></button-ui>\n      </col-ui>\n    </col-ui>\n  </section>\n  <footer slot=\"footer\">\n    <grid-ui>\n      <button-ui text=\"Cancel\" variant=\"ghost\" onclick=\"this.closest('drawer-ui').open = false\"></button-ui>\n      <button-ui text=\"Disconnect\" icon=\"plug\" color=\"danger\" onclick=\"this.closest('drawer-ui').open = false\"></button-ui>\n      <button-ui text=\"Save changes\" variant=\"primary\" onclick=\"this.closest('drawer-ui').open = false\"></button-ui>\n    </grid-ui>\n  </footer>\n</drawer-ui>",
+  "source": "site/pages/examples/integrations/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/drawer-header-grid.json

@@ -0,0 +1,15 @@
+{
+  "name": "drawer-header-grid",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/drawer",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "header-grid"
+  },
+  "html": "<section data-section data-property=\"header-grid\" data-chunk=\"drawer-header-grid\">\n  <h2 variant=\"section\">Header grid (card-ui parity)</h2>\n  <p data-note>The <code>&lt;header&gt;</code> activates a 3-column grid when any direct <code>[slot=\"icon|heading|description|action\"]</code> child is present. <code>:has(&gt; …)</code> is direct-child only — a nested <code>[slot=\"icon\"]</code> inside <code>&lt;avatar-ui&gt;</code> won't falsely activate the icon column.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"icon + heading + description\">\n      <button-ui text=\"Slack drawer\" icon=\"slack-logo\" variant=\"outline\" onclick=\"this.nextElementSibling.open=true\"></button-ui>\n      <drawer-ui side=\"right\" size=\"md\">\n        <header>\n          <span slot=\"icon\"><avatar-ui icon=\"slack-logo\"></avatar-ui></span>\n          <span slot=\"heading\">\n            <text-ui strong>Slack</text-ui>\n            <badge-ui text=\"Connected\" variant=\"success\"></badge-ui>\n          </span>\n          <span slot=\"description\">\n            <text-ui color=\"subtle\" size=\"sm\">Connected by Alex Chen · Mar 14, 2026</text-ui>\n          </span>\n        </header>\n        <section>\n          <col-ui gap=\"3\">\n            <field-ui label=\"Workspace\">\n              <input-ui value=\"acme-corp.slack.com\" readonly></input-ui>\n            </field-ui>\n            <field-ui label=\"Default channel\">\n              <select-ui value=\"product\">\n              <option value=\"general\">#general</option>\n              <option value=\"product\">#product</option>\n              <option value=\"alerts\">#alerts</option>\n            </select-ui>\n            </field-ui>\n          </col-ui>\n        </section>\n        <footer>\n          <grid-ui>\n            <button-ui text=\"Disconnect\" color=\"danger\" icon=\"plug\"></button-ui>\n            <button-ui text=\"Cancel\" variant=\"ghost\" onclick=\"this.closest('drawer-ui').open=false\"></button-ui>\n            <button-ui text=\"Save\" variant=\"primary\" onclick=\"this.closest('drawer-ui').open=false\"></button-ui>\n          </grid-ui>\n        </footer>\n      </drawer-ui>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/components/drawer/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/drawer-invite.json

@@ -0,0 +1,15 @@
+{
+  "name": "drawer-invite",
+  "kind": "block",
+  "primary": "drawer-ui",
+  "page": "/site/examples/members",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "side": "right",
+    "size": "md"
+  },
+  "html": "<drawer-ui id=\"drawer-invite\" data-chunk=\"drawer-invite\" side=\"right\" size=\"md\">\n  <header>\n    <span slot=\"icon\">\n      <avatar-ui icon=\"envelope\"></avatar-ui>\n    </span>\n    <span slot=\"heading\">\n      <text-ui strong data-invite-email>Invite</text-ui>\n      <badge-ui data-invite-role text=\"Member\" variant=\"info\"></badge-ui>\n    </span>\n    <span slot=\"action\"></span>\n  </header>\n  <section>\n    <text-ui color=\"subtle\" size=\"sm\">Pending invitation — not yet accepted.</text-ui>\n  </section>\n  <section>\n    <col-ui gap=\"4\">\n      <grid-ui columns=\"2\" gap=\"3\">\n        <card-ui size=\"sm\"><section><stat-ui label=\"Sent\" data-invite-sent value=\"—\"></stat-ui></section></card-ui>\n        <card-ui size=\"sm\"><section><stat-ui label=\"Expires\" data-invite-expires value=\"—\"></stat-ui></section></card-ui>\n      </grid-ui>\n      <divider-ui></divider-ui>\n      <col-ui gap=\"3\">\n        <text-ui strong>Invitation</text-ui>\n        <field-ui label=\"Email\">\n          <input-ui data-invite-email readonly></input-ui>\n        </field-ui>\n        <field-ui label=\"Role\">\n          <select-ui data-invite-role value=\"Member\">\n          <option value=\"Admin\">Admin · invite, remove, billing</option>\n          <option value=\"Member\">Member · edit + invite</option>\n          <option value=\"Viewer\">Viewer · read-only</option>\n        </select-ui>\n        </field-ui>\n        <field-ui label=\"Invited by\">\n          <input-ui data-invite-inviter readonly></input-ui>\n        </field-ui>\n        <field-ui label=\"Personal message (optional)\">\n          <textarea-ui rows=\"2\" placeholder=\"Add a note to include in the invitation email.\"></textarea-ui>\n        </field-ui>\n      </col-ui>\n      <divider-ui></divider-ui>\n      <col-ui gap=\"3\">\n        <text-ui strong>Delivery</text-ui>\n        <field-ui label=\"Also notify on Slack\" inline>\n          <switch-ui checked></switch-ui>\n        </field-ui>\n        <field-ui label=\"Remind 24h before expiry\" inline>\n          <switch-ui checked></switch-ui>\n        </field-ui>\n        <field-ui label=\"Include workspace welcome guide\" inline>\n          <switch-ui></switch-ui>\n        </field-ui>\n      </col-ui>\n    </col-ui>\n  </section>\n  <footer slot=\"footer\">\n    <grid-ui>\n      <button-ui id=\"drawer-invite-revoke\" text=\"Revoke\" icon=\"x\" color=\"danger\"></button-ui>\n      <button-ui text=\"Cancel\" variant=\"ghost\" onclick=\"this.closest('drawer-ui').open = false\"></button-ui>\n      <button-ui text=\"Resend\" icon=\"paper-plane-tilt\" variant=\"primary\" onclick=\"this.closest('drawer-ui').open = false\"></button-ui>\n    </grid-ui>\n  </footer>\n</drawer-ui>",
+  "source": "site/pages/examples/members/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/drawer-multi-section.json

@@ -0,0 +1,15 @@
+{
+  "name": "drawer-multi-section",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/drawer",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "multi-section"
+  },
+  "html": "<section data-section data-property=\"multi-section\" data-chunk=\"drawer-multi-section\">\n  <h2 variant=\"section\">Multiple sections</h2>\n  <p data-note>Multiple <code>&lt;section&gt;</code> siblings stack as the body. Header stays sticky to the top, footer to the bottom; the body region scrolls together. The last section grows to fill any remaining vertical slack so the footer hugs the panel's bottom even when content is short.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"settings drawer\">\n      <button-ui text=\"Settings (3 sections)\" icon=\"gear\" variant=\"outline\" onclick=\"this.nextElementSibling.open=true\"></button-ui>\n      <drawer-ui text=\"Settings\" side=\"right\" size=\"md\">\n        <section>\n          <col-ui gap=\"3\">\n            <text-ui strong>Profile</text-ui>\n            <field-ui label=\"Full name\">\n              <input-ui value=\"Alex Chen\"></input-ui>\n            </field-ui>\n            <field-ui label=\"Email\">\n              <input-ui value=\"alex@acme.com\"></input-ui>\n            </field-ui>\n          </col-ui>\n        </section>\n        <section>\n          <col-ui gap=\"3\">\n            <text-ui strong>Notifications</text-ui>\n            <field-ui label=\"Mentions\" inline>\n              <switch-ui checked></switch-ui>\n            </field-ui>\n            <field-ui label=\"Deployments\" inline>\n              <switch-ui checked></switch-ui>\n            </field-ui>\n            <field-ui label=\"Weekly digest\" inline>\n              <switch-ui></switch-ui>\n            </field-ui>\n          </col-ui>\n        </section>\n        <section>\n          <col-ui gap=\"3\">\n            <text-ui strong>Danger zone</text-ui>\n            <text-ui color=\"subtle\" size=\"sm\">Deleting your account is irreversible.</text-ui>\n            <button-ui text=\"Delete account\" color=\"danger\" stretch></button-ui>\n          </col-ui>\n        </section>\n        <footer>\n          <p slot=\"description\">Auto-saved</p>\n          <span slot=\"action\">\n            <button-ui text=\"Done\" variant=\"primary\" onclick=\"this.closest('drawer-ui').open=false\"></button-ui>\n          </span>\n        </footer>\n      </drawer-ui>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/components/drawer/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/drawer-open.json

@@ -0,0 +1,15 @@
+{
+  "name": "drawer-open",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/drawer",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "open"
+  },
+  "html": "<section data-section data-property=\"open\" data-chunk=\"drawer-open\">\n  <h2 variant=\"section\">open</h2>\n  <p data-note>Boolean attribute controlling visibility. Drawers render via <code>&lt;dialog&gt;.showModal()</code> in the top layer, so they can't be inline-previewed — use the buttons in each section above to trigger one.</p>\n</section>",
+  "source": "site/pages/components/drawer/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/drawer-payment-method.json

@@ -0,0 +1,15 @@
+{
+  "name": "drawer-payment-method",
+  "kind": "block",
+  "primary": "drawer-ui",
+  "page": "/site/examples/billing",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "side": "right",
+    "size": "md"
+  },
+  "html": "<drawer-ui id=\"drawer-payment-method\" data-chunk=\"drawer-payment-method\" side=\"right\" size=\"md\">\n  <header>\n    <span slot=\"icon\">\n      <avatar-ui icon=\"credit-card\"></avatar-ui>\n    </span>\n    <span slot=\"heading\">\n      <text-ui strong>Update payment method</text-ui>\n    </span>\n    <span slot=\"action\"></span>\n  </header>\n  <section>\n    <text-ui color=\"subtle\" size=\"sm\">Card on file: Visa ending in 4242 · Expires 08/2028</text-ui>\n  </section>\n  <section>\n    <col-ui gap=\"4\">\n      <alert-ui variant=\"info\" icon=\"info\" text=\"Card details are tokenized by Stripe. We never see or store the full number.\"></alert-ui>\n      <divider-ui></divider-ui>\n      <field-ui label=\"Payment method\">\n        <select-ui value=\"card\">\n        <option value=\"card\">Credit or debit card</option>\n        <option value=\"ach\">Bank account (ACH)</option>\n        <option value=\"wire\">Wire transfer (annual only)</option>\n      </select-ui>\n      </field-ui>\n      <field-ui label=\"Card number\">\n        <input-ui placeholder=\"1234 1234 1234 1234\" prefix=\"credit-card\"></input-ui>\n      </field-ui>\n      <row-ui gap=\"2\">\n        <field-ui label=\"Expiry\">\n          <input-ui placeholder=\"MM/YY\" grow></input-ui>\n        </field-ui>\n        <field-ui label=\"CVC\">\n          <input-ui placeholder=\"123\" grow></input-ui>\n        </field-ui>\n      </row-ui>\n      <field-ui label=\"Name on card\">\n        <input-ui placeholder=\"Kim Granlund\"></input-ui>\n      </field-ui>\n      <divider-ui></divider-ui>\n      <col-ui gap=\"3\">\n        <text-ui strong>Billing address</text-ui>\n        <field-ui label=\"Country\">\n          <input-ui value=\"United States\"></input-ui>\n        </field-ui>\n        <field-ui label=\"Street address\">\n          <input-ui value=\"101 Montgomery St\"></input-ui>\n        </field-ui>\n        <row-ui gap=\"2\">\n          <field-ui label=\"City\">\n            <input-ui value=\"San Francisco\" grow></input-ui>\n          </field-ui>\n          <field-ui label=\"State\">\n            <input-ui value=\"CA\" grow></input-ui>\n          </field-ui>\n          <field-ui label=\"ZIP\">\n            <input-ui value=\"94104\" grow></input-ui>\n          </field-ui>\n        </row-ui>\n      </col-ui>\n      <divider-ui></divider-ui>\n      <col-ui gap=\"3\">\n        <text-ui strong>Billing contact</text-ui>\n        <field-ui label=\"Billing email\">\n          <input-ui value=\"billing@acme.com\" prefix=\"@\"></input-ui>\n        </field-ui>\n        <field-ui label=\"Tax ID (VAT / EIN)\">\n          <input-ui placeholder=\"Optional\"></input-ui>\n        </field-ui>\n      </col-ui>\n    </col-ui>\n  </section>\n  <footer slot=\"footer\">\n    <grid-ui>\n      <button-ui text=\"Remove card\" icon=\"trash\" color=\"danger\"></button-ui>\n      <button-ui text=\"Cancel\" variant=\"ghost\" onclick=\"this.closest('drawer-ui').open = false\"></button-ui>\n      <button-ui text=\"Save card\" variant=\"primary\" onclick=\"this.closest('drawer-ui').open = false\"></button-ui>\n    </grid-ui>\n  </footer>\n</drawer-ui>",
+  "source": "site/pages/examples/billing/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/drawer-permanent.json

@@ -0,0 +1,15 @@
+{
+  "name": "drawer-permanent",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/drawer",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "permanent"
+  },
+  "html": "<section data-section data-property=\"permanent\" data-chunk=\"drawer-permanent\">\n  <h2 variant=\"section\">permanent</h2>\n  <p data-note>When set, hides the close button and disables Escape / backdrop dismiss. The author must close the drawer programmatically (typically from a confirmation action). Default is <code>false</code> — drawers are dismissable.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"default (dismissable)\">\n      <button-ui text=\"Closable\" variant=\"outline\" onclick=\"this.nextElementSibling.open=true\"></button-ui>\n      <drawer-ui text=\"Confirm changes\" side=\"right\">\n        <section><text-ui color=\"subtle\">Close via × button, Escape, or backdrop click.</text-ui></section>\n      </drawer-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"permanent\">\n      <button-ui text=\"Permanent\" variant=\"outline\" onclick=\"this.nextElementSibling.open=true\"></button-ui>\n      <drawer-ui text=\"Required step\" side=\"right\" permanent>\n        <section><text-ui color=\"subtle\">Must be resolved through its action button.</text-ui></section>\n        <footer>\n          <button-ui text=\"Complete\" variant=\"primary\" stretch onclick=\"this.closest('drawer-ui').open=false\"></button-ui>\n        </footer>\n      </drawer-ui>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/components/drawer/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/drawer-report.json

@@ -0,0 +1,15 @@
+{
+  "name": "drawer-report",
+  "kind": "block",
+  "primary": "drawer-ui",
+  "page": "/site/examples/admin-dashboard",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "side": "right",
+    "size": "md"
+  },
+  "html": "<drawer-ui id=\"drawer-report\" data-chunk=\"drawer-report\" side=\"right\" size=\"md\">\n  <header>\n    <span slot=\"icon\">\n      <avatar-ui icon=\"chart-line\"></avatar-ui>\n    </span>\n    <span slot=\"heading\">\n      <text-ui strong data-report-name>Report</text-ui>\n      <badge-ui data-report-status text=\"Active\" variant=\"success\"></badge-ui>\n    </span>\n    <span slot=\"action\"></span>\n  </header>\n  <section>\n    <text-ui color=\"subtle\" size=\"sm\" data-report-meta>Scheduled delivery configuration.</text-ui>\n  </section>\n  <section>\n    <col-ui gap=\"4\">\n      <grid-ui columns=\"2\" gap=\"3\">\n        <card-ui size=\"sm\"\n          ><section><stat-ui label=\"Last run\" data-report-last value=\"—\"></stat-ui></section\n        ></card-ui>\n        <card-ui size=\"sm\"\n          ><section><stat-ui label=\"Recipients\" data-report-recipients value=\"—\"></stat-ui></section\n        ></card-ui>\n      </grid-ui>\n      <divider-ui></divider-ui>\n      <col-ui gap=\"3\">\n        <text-ui strong>Schedule</text-ui>\n        <field-ui label=\"Frequency\">\n          <select-ui value=\"weekly\">\n          <option value=\"hourly\">Hourly</option>\n          <option value=\"daily\">Daily</option>\n          <option value=\"weekly\">Weekly</option>\n          <option value=\"monthly\">Monthly</option>\n          <option value=\"realtime\">Real-time (triggered)</option>\n        </select-ui>\n        </field-ui>\n        <row-ui gap=\"2\">\n          <field-ui label=\"Day\">\n            <select-ui value=\"mon\" grow>\n            <option value=\"mon\">Monday</option>\n            <option value=\"tue\">Tuesday</option>\n            <option value=\"wed\">Wednesday</option>\n            <option value=\"thu\">Thursday</option>\n            <option value=\"fri\">Friday</option>\n          </select-ui>\n          </field-ui>\n          <field-ui label=\"Time\">\n            <input-ui value=\"09:00\" type=\"time\" grow></input-ui>\n          </field-ui>\n          <field-ui label=\"Timezone\">\n            <select-ui value=\"utc\" grow>\n            <option value=\"utc\">UTC</option>\n            <option value=\"pst\">PST</option>\n            <option value=\"est\">EST</option>\n            <option value=\"cet\">CET</option>\n          </select-ui>\n          </field-ui>\n        </row-ui>\n      </col-ui>\n      <divider-ui></divider-ui>\n      <col-ui gap=\"3\">\n        <text-ui strong>Delivery</text-ui>\n        <field-ui label=\"Recipients\">\n          <textarea-ui rows=\"2\" value=\"alex@acme.com, sarah@acme.com, finance@acme.com\" hint=\"Comma-separated email addresses.\"></textarea-ui>\n        </field-ui>\n        <field-ui label=\"Format\">\n          <select-ui value=\"pdf\">\n          <option value=\"pdf\">PDF</option>\n          <option value=\"csv\">CSV</option>\n          <option value=\"xlsx\">Excel (xlsx)</option>\n          <option value=\"slack\">Post to Slack</option>\n        </select-ui>\n        </field-ui>\n        <field-ui label=\"Attach raw data export\" inline>\n          <switch-ui checked></switch-ui>\n        </field-ui>\n        <field-ui label=\"Include AI summary\" inline>\n          <switch-ui></switch-ui>\n        </field-ui>\n      </col-ui>\n      <divider-ui></divider-ui>\n      <col-ui gap=\"3\">\n        <text-ui strong>Scope</text-ui>\n        <field-ui label=\"Date range\">\n          <select-ui value=\"last-7-days\">\n          <option value=\"last-24h\">Last 24 hours</option>\n          <option value=\"last-7-days\">Last 7 days</option>\n          <option value=\"last-30-days\">Last 30 days</option>\n          <option value=\"mtd\">Month-to-date</option>\n          <option value=\"custom\">Custom range</option>\n        </select-ui>\n        </field-ui>\n      </col-ui>\n    </col-ui>\n  </section>\n  <footer slot=\"footer\">\n    <grid-ui>\n      <button-ui text=\"Pause\" icon=\"pause\" variant=\"ghost\"></button-ui>\n      <button-ui text=\"Run now\" icon=\"play\" variant=\"outline\"></button-ui>\n      <button-ui text=\"Save changes\" variant=\"primary\" onclick=\"this.closest('drawer-ui').open = false\"></button-ui>\n    </grid-ui>\n  </footer>\n</drawer-ui>",
+  "source": "site/pages/examples/admin-dashboard/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/drawer-revoke-session.json

@@ -0,0 +1,15 @@
+{
+  "name": "drawer-revoke-session",
+  "kind": "block",
+  "primary": "drawer-ui",
+  "page": "/site/examples/profile-security",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "side": "right",
+    "size": "md"
+  },
+  "html": "<drawer-ui id=\"drawer-revoke-session\" data-chunk=\"drawer-revoke-session\" side=\"right\" size=\"md\">\n  <header>\n    <span slot=\"icon\">\n      <avatar-ui icon=\"sign-out\"></avatar-ui>\n    </span>\n    <span slot=\"heading\">\n      <text-ui strong>Revoke session</text-ui>\n    </span>\n    <span slot=\"action\"></span>\n  </header>\n  <section>\n    <text-ui color=\"subtle\" size=\"sm\">Signs the device out immediately. It will need to re-authenticate to sign back in.</text-ui>\n  </section>\n  <section>\n    <col-ui gap=\"4\">\n      <card-ui>\n        <header>\n          <span slot=\"icon\"><avatar-ui icon=\"device-mobile\"></avatar-ui></span>\n          <span slot=\"heading\"><text-ui strong>iPhone 16 · Safari</text-ui></span>\n          <span slot=\"description\"><text-ui color=\"subtle\" size=\"sm\">San Francisco, CA · 2 hours ago · 136.24.51.9</text-ui></span>\n        </header>\n      </card-ui>\n      <divider-ui></divider-ui>\n      <col-ui gap=\"2\">\n        <text-ui strong>Recent activity on this session</text-ui>\n        <row-ui gap=\"2\" align=\"center\"><icon-ui name=\"chat-circle\" color=\"subtle\"></icon-ui><text-ui>Opened 4 conversations</text-ui></row-ui>\n        <row-ui gap=\"2\" align=\"center\"><icon-ui name=\"upload\" color=\"subtle\"></icon-ui><text-ui>Uploaded 2 files</text-ui></row-ui>\n        <row-ui gap=\"2\" align=\"center\"><icon-ui name=\"user-gear\" color=\"subtle\"></icon-ui><text-ui>Changed workspace: AdiaUI</text-ui></row-ui>\n      </col-ui>\n      <divider-ui></divider-ui>\n      <field-ui label=\"Also rotate API keys created from this session\" inline>\n        <check-ui></check-ui>\n      </field-ui>\n      <field-ui label=\"Notify me if this device signs back in\" inline>\n        <check-ui checked></check-ui>\n      </field-ui>\n      <alert-ui variant=\"info\" icon=\"info\" text=\"If you don't recognize this session, revoke it and change your password.\"></alert-ui>\n    </col-ui>\n  </section>\n  <footer slot=\"footer\">\n    <grid-ui>\n      <button-ui text=\"Cancel\" variant=\"ghost\" onclick=\"this.closest('drawer-ui').open = false\"></button-ui>\n      <button-ui text=\"Revoke session\" icon=\"sign-out\" color=\"danger\" onclick=\"this.closest('drawer-ui').open = false\"></button-ui>\n    </grid-ui>\n  </footer>\n</drawer-ui>",
+  "source": "site/pages/examples/profile-security/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/drawer-role.json

@@ -0,0 +1,15 @@
+{
+  "name": "drawer-role",
+  "kind": "block",
+  "primary": "drawer-ui",
+  "page": "/site/examples/onboarding/review",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "side": "right",
+    "size": "md"
+  },
+  "html": "<drawer-ui id=\"drawer-role\" data-chunk=\"drawer-role\" side=\"right\" size=\"md\">\n  <header>\n    <span slot=\"icon\">\n      <avatar-ui icon=\"user\"></avatar-ui>\n    </span>\n    <span slot=\"heading\">\n      <text-ui strong>Role</text-ui>\n    </span>\n    <span slot=\"action\"></span>\n  </header>\n  <section>\n    <text-ui color=\"subtle\" size=\"sm\">Tunes which dashboards land on your home and which integrations we surface first.</text-ui>\n  </section>\n  <section>\n    <div role=\"radiogroup\" aria-label=\"Role\">\n      <col-ui gap=\"2\">\n        <option-card-ui\n          name=\"role\" value=\"developer\" checked\n          heading=\"Developer\"\n          description=\"Home pinned to release dashboards. Surfaces deploys, PR throughput, error rates.\"></option-card-ui>\n        <option-card-ui\n          name=\"role\" value=\"pm\"\n          heading=\"Product Manager\"\n          description=\"Home pinned to product KPIs. Surfaces feature usage, retention, NPS.\"></option-card-ui>\n        <option-card-ui\n          name=\"role\" value=\"designer\"\n          heading=\"Designer\"\n          description=\"Home pinned to research + funnel surfaces. Surfaces session replays and qual snippets.\"></option-card-ui>\n        <option-card-ui\n          name=\"role\" value=\"other\"\n          heading=\"Something else\"\n          description=\"Tell us more — we'll start with a generalist home and refine later.\">\n          <textarea-ui name=\"role-detail\" placeholder=\"What do you do day-to-day?\" rows=\"2\"></textarea-ui>\n        </option-card-ui>\n      </col-ui>\n    </div>\n  </section>\n  <footer slot=\"footer\">\n    <grid-ui>\n      <button-ui text=\"Cancel\" variant=\"ghost\" onclick=\"this.closest('drawer-ui').open = false\"></button-ui>\n      <button-ui text=\"Save changes\" variant=\"primary\" onclick=\"this.closest('drawer-ui').open = false\"></button-ui>\n    </grid-ui>\n  </footer>\n</drawer-ui>",
+  "source": "site/pages/examples/onboarding/review/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/drawer-side.json

@@ -0,0 +1,15 @@
+{
+  "name": "drawer-side",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/drawer",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "side"
+  },
+  "html": "<section data-section data-property=\"side\" data-chunk=\"drawer-side\">\n  <h2 variant=\"section\">side</h2>\n  <p data-note>Edge the drawer slides in from. Defaults to <code>right</code>.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"left\">\n      <button-ui text=\"Left\" variant=\"outline\" onclick=\"this.nextElementSibling.open=true\"></button-ui>\n      <drawer-ui text=\"Navigation\" side=\"left\" size=\"sm\">\n        <section>\n          <col-ui gap=\"1\">\n            <button-ui text=\"Dashboard\" icon=\"house\" variant=\"ghost\"></button-ui>\n            <button-ui text=\"Projects\" icon=\"folder\" variant=\"ghost\"></button-ui>\n            <button-ui text=\"Settings\" icon=\"gear\" variant=\"ghost\"></button-ui>\n          </col-ui>\n        </section>\n      </drawer-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"right\">\n      <button-ui text=\"Right\" variant=\"outline\" onclick=\"this.nextElementSibling.open=true\"></button-ui>\n      <drawer-ui text=\"Edit profile\" side=\"right\">\n        <section>\n          <col-ui gap=\"3\">\n            <field-ui label=\"Name\">\n              <input-ui placeholder=\"Enter name\"></input-ui>\n            </field-ui>\n            <field-ui label=\"Email\">\n              <input-ui placeholder=\"you@example.com\"></input-ui>\n            </field-ui>\n          </col-ui>\n        </section>\n      </drawer-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"top\">\n      <button-ui text=\"Top\" variant=\"outline\" onclick=\"this.nextElementSibling.open=true\"></button-ui>\n      <drawer-ui text=\"Search\" side=\"top\">\n        <section>\n          <col-ui gap=\"2\">\n            <input-ui placeholder=\"Search anything…\" prefix=\"magnifying-glass\"></input-ui>\n            <text-ui color=\"subtle\" size=\"sm\">Top-aligned drawers work for global search and notification banners.</text-ui>\n          </col-ui>\n        </section>\n      </drawer-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"bottom\">\n      <button-ui text=\"Bottom\" variant=\"outline\" onclick=\"this.nextElementSibling.open=true\"></button-ui>\n      <drawer-ui text=\"Share\" side=\"bottom\">\n        <section>\n          <col-ui gap=\"2\">\n            <button-ui text=\"Copy link\" icon=\"link\" variant=\"outline\" stretch></button-ui>\n            <button-ui text=\"Email\" icon=\"envelope\" variant=\"outline\" stretch></button-ui>\n            <button-ui text=\"Slack\" icon=\"chat-circle\" variant=\"outline\" stretch></button-ui>\n          </col-ui>\n        </section>\n      </drawer-ui>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/components/drawer/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}