@adia-ai/a2ui-corpus 0.0.1 → 0.0.3

package/chunks/auth-signout.json

@@ -0,0 +1,18 @@
+{
+  "name": "auth-signout",
+  "kind": "block",
+  "primary": "card-ui",
+  "page": "/site/examples/auth/sign-out",
+  "slots": [],
+  "nested": [
+    "auth-card-header",
+    "auth-card-content",
+    "auth-signout-actions"
+  ],
+  "attrs": {
+    "raw": ""
+  },
+  "html": "<card-ui raw data-chunk=\"auth-signout\" style=\"max-width: 32rem\">\n        <header data-chunk=\"auth-card-header\">\n          <col-ui align=\"center\" gap=\"1\">\n            <a href=\"/\" aria-label=\"AdiaUI home\">\n              <img src=\"/icons/agent-ui-light.svg\" alt=\"Adia Logo\" style=\"height: 5rem\" />\n            </a>\n            <h1>You've been signed out</h1>\n            <text-ui>All sessions on this device ended for <strong color=\"accent\">kim@acme.com</strong>.</text-ui>\n          </col-ui>\n        </header>\n\n        <section data-chunk=\"auth-card-content\">\n          <col-ui gap=\"6\">\n            <col-ui gap=\"2\" data-chunk=\"auth-signout-actions\" size=\"lg\">\n              <button-ui text=\"Sign back in\" variant=\"primary\"></button-ui>\n              <button-ui text=\"Use a different account\" icon=\"user-switch\"></button-ui>\n            </col-ui>\n\n            <text-ui text-align=\"center\" color=\"subtle\">\n              <a href=\"/\">← Back to homepage</a>\n            </text-ui>\n          </col-ui>\n        </section>\n      </card-ui>",
+  "source": "site/pages/examples/auth/sign-out/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/auth-signup-email-entry.json

@@ -0,0 +1,16 @@
+{
+  "name": "auth-signup-email-entry",
+  "kind": "block",
+  "primary": "form",
+  "page": "/site/examples/auth/sign-up",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "size": "lg",
+    "action": "/site/examples/auth/sign-up/verify",
+    "method": "get"
+  },
+  "html": "<form data-chunk=\"auth-signup-email-entry\" size=\"lg\" action=\"/site/examples/auth/sign-up/verify\" method=\"get\">\n              <col-ui gap=\"4\">\n                <input-ui label=\"Email\" type=\"email\" name=\"email\" autocomplete=\"email\" placeholder=\"you@example.com\" required></input-ui>\n                <button-ui text=\"Continue with Email\" variant=\"primary\" type=\"submit\"></button-ui>\n              </col-ui>\n            </form>",
+  "source": "site/pages/examples/auth/sign-up/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/auth-signup-entry.json

@@ -0,0 +1,19 @@
+{
+  "name": "auth-signup-entry",
+  "kind": "block",
+  "primary": "card-ui",
+  "page": "/site/examples/auth/sign-up",
+  "slots": [],
+  "nested": [
+    "auth-card-header",
+    "auth-card-content",
+    "auth-signup-email-entry",
+    "auth-signup-social-auths"
+  ],
+  "attrs": {
+    "raw": ""
+  },
+  "html": "<card-ui raw data-chunk=\"auth-signup-entry\" style=\"max-width: 32rem\">\n        <header data-chunk=\"auth-card-header\">\n          <col-ui align=\"center\" gap=\"1\">\n            <a href=\"/\" aria-label=\"AdiaUI home\">\n              <img src=\"/icons/agent-ui-light.svg\" alt=\"Adia Logo\" style=\"height: 5rem\" />\n            </a>\n            <h1>Sign up for AdiaUI</h1>\n            <text-ui>Create an account to start composing UIs.</text-ui>\n          </col-ui>\n        </header>\n\n        <section data-chunk=\"auth-card-content\">\n          <col-ui gap=\"6\">\n            <form data-chunk=\"auth-signup-email-entry\" size=\"lg\" action=\"/site/examples/auth/sign-up/verify\" method=\"get\">\n              <col-ui gap=\"4\">\n                <input-ui label=\"Email\" type=\"email\" name=\"email\" autocomplete=\"email\" placeholder=\"you@example.com\" required></input-ui>\n                <button-ui text=\"Continue with Email\" variant=\"primary\" type=\"submit\"></button-ui>\n              </col-ui>\n            </form>\n\n            <divider-ui label=\"or\"></divider-ui>\n\n            <col-ui gap=\"2\" data-chunk=\"auth-signup-social-auths\">\n              <button-ui text=\"Continue with Google\" icon=\"google-logo\" variant=\"outline\"></button-ui>\n              <button-ui text=\"Continue with GitHub\" icon=\"github-logo\" variant=\"outline\"></button-ui>\n            </col-ui>\n\n            <text-ui text-align=\"center\" color=\"subtle\" size=\"sm\">\n              By continuing you agree to the\n              <a href=\"#\">Terms of Service</a> and <a href=\"#\">Privacy Policy</a>.\n            </text-ui>\n\n            <text-ui text-align=\"center\" color=\"subtle\"> Already have an account? <a href=\"/site/examples/auth/sign-in\">Sign in</a> </text-ui>\n          </col-ui>\n        </section>\n      </card-ui>",
+  "source": "site/pages/examples/auth/sign-up/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/auth-signup-social-auths.json

@@ -0,0 +1,14 @@
+{
+  "name": "auth-signup-social-auths",
+  "kind": "block",
+  "primary": "col-ui",
+  "page": "/site/examples/auth/sign-up",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "gap": "2"
+  },
+  "html": "<col-ui gap=\"2\" data-chunk=\"auth-signup-social-auths\">\n              <button-ui text=\"Continue with Google\" icon=\"google-logo\" variant=\"outline\"></button-ui>\n              <button-ui text=\"Continue with GitHub\" icon=\"github-logo\" variant=\"outline\"></button-ui>\n            </col-ui>",
+  "source": "site/pages/examples/auth/sign-up/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/auth-signup-verify.json

@@ -0,0 +1,17 @@
+{
+  "name": "auth-signup-verify",
+  "kind": "block",
+  "primary": "card-ui",
+  "page": "/site/examples/auth/sign-up/verify",
+  "slots": [],
+  "nested": [
+    "auth-card-header",
+    "auth-card-content"
+  ],
+  "attrs": {
+    "raw": ""
+  },
+  "html": "<card-ui raw data-chunk=\"auth-signup-verify\" style=\"max-width: 32rem\">\n        <header data-chunk=\"auth-card-header\">\n          <col-ui align=\"center\" gap=\"1\">\n            <a href=\"/\" aria-label=\"AdiaUI home\">\n              <img src=\"/icons/agent-ui-light.svg\" alt=\"Adia Logo\" style=\"height: 5rem\" />\n            </a>\n            <h1>Verify your email</h1>\n            <text-ui>\n              We sent a 6-digit code to <strong color=\"accent\">kim+samples@acme.com</strong>. Enter it below.\n            </text-ui>\n          </col-ui>\n        </header>\n\n        <section data-chunk=\"auth-card-content\">\n          <col-ui gap=\"6\">\n            <col-ui align=\"center\">\n              <otp-input-ui size=\"lg\" length=\"6\" autocomplete=\"one-time-code\"></otp-input-ui>\n            </col-ui>\n\n            <alert-ui variant=\"warning\" icon=\"warning\">\n              <span slot=\"content\">\n                Already have an account? If you're still waiting on your code,\n                <a href=\"/site/examples/auth/sign-in\">try signing in instead</a>.\n              </span>\n            </alert-ui>\n\n            <text-ui text-align=\"center\">\n              <a href=\"/site/examples/auth/sign-up\">← Back</a>\n            </text-ui>\n\n            <text-ui text-align=\"center\" color=\"subtle\">\n              Already have an account? <a href=\"/site/examples/auth/sign-in\">Sign in</a>\n            </text-ui>\n          </col-ui>\n        </section>\n      </card-ui>",
+  "source": "site/pages/examples/auth/sign-up/verify/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/auth-social-auths.json

@@ -0,0 +1,14 @@
+{
+  "name": "auth-social-auths",
+  "kind": "block",
+  "primary": "col-ui",
+  "page": "/site/examples/auth/sign-in",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "gap": "2"
+  },
+  "html": "<col-ui gap=\"2\" data-chunk=\"auth-social-auths\">\n              <button-ui text=\"Continue with Google\" icon=\"google-logo\" variant=\"outline\"></button-ui>\n              <button-ui text=\"Continue with GitHub\" icon=\"github-logo\" variant=\"outline\"></button-ui>\n              <button-ui text=\"Continue with SSO\" icon=\"building-office\" variant=\"outline\"></button-ui>\n            </col-ui>",
+  "source": "site/pages/examples/auth/sign-in/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/auth-sso-providers.json

@@ -0,0 +1,15 @@
+{
+  "name": "auth-sso-providers",
+  "kind": "block",
+  "primary": "col-ui",
+  "page": "/site/examples/auth/sign-up/sso-only",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "gap": "2",
+    "size": "lg"
+  },
+  "html": "<col-ui gap=\"2\" data-chunk=\"auth-sso-providers\" size=\"lg\">\n              <button-ui text=\"Continue with Google\" icon=\"google-logo\" variant=\"primary\"></button-ui>\n              <button-ui text=\"Continue with SSO\" icon=\"building-office\" variant=\"outline\"></button-ui>\n            </col-ui>",
+  "source": "site/pages/examples/auth/sign-up/sso-only/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/auth-sso-required.json

@@ -0,0 +1,18 @@
+{
+  "name": "auth-sso-required",
+  "kind": "block",
+  "primary": "card-ui",
+  "page": "/site/examples/auth/sign-up/sso-only",
+  "slots": [],
+  "nested": [
+    "auth-card-header",
+    "auth-card-content",
+    "auth-sso-providers"
+  ],
+  "attrs": {
+    "raw": ""
+  },
+  "html": "<card-ui raw data-chunk=\"auth-sso-required\" style=\"max-width: 32rem\">\n        <header data-chunk=\"auth-card-header\">\n          <col-ui align=\"center\" gap=\"1\">\n            <a href=\"/\" aria-label=\"AdiaUI home\">\n              <img src=\"/icons/agent-ui-light.svg\" alt=\"Adia Logo\" style=\"height: 5rem\" />\n            </a>\n            <h1>Your team uses Single Sign-On</h1>\n            <text-ui>\n              <strong color=\"accent\">kim@acme.com</strong> belongs to an organization that requires SSO. Password sign-up is disabled for your domain.\n            </text-ui>\n          </col-ui>\n        </header>\n\n        <section data-chunk=\"auth-card-content\">\n          <col-ui gap=\"6\">\n            <alert-ui variant=\"info\" icon=\"shield-check\">\n              <span slot=\"content\"><strong>Acme</strong> requires SSO authentication. Your admin can configure additional providers from organization settings.</span>\n            </alert-ui>\n\n            <col-ui gap=\"2\" data-chunk=\"auth-sso-providers\" size=\"lg\">\n              <button-ui text=\"Continue with Google\" icon=\"google-logo\" variant=\"primary\"></button-ui>\n              <button-ui text=\"Continue with SSO\" icon=\"building-office\" variant=\"outline\"></button-ui>\n            </col-ui>\n\n            <text-ui text-align=\"center\" color=\"subtle\" size=\"sm\">\n              Wrong account? <a href=\"/site/examples/auth/sign-up\">Use a personal email instead</a>\n            </text-ui>\n          </col-ui>\n        </section>\n      </card-ui>",
+  "source": "site/pages/examples/auth/sign-up/sso-only/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/auth-team-invite.json

@@ -0,0 +1,19 @@
+{
+  "name": "auth-team-invite",
+  "kind": "block",
+  "primary": "card-ui",
+  "page": "/site/examples/auth/accept-invite",
+  "slots": [],
+  "nested": [
+    "auth-card-header",
+    "auth-card-content",
+    "auth-invite-team-card",
+    "auth-invite-actions"
+  ],
+  "attrs": {
+    "raw": ""
+  },
+  "html": "<card-ui raw data-chunk=\"auth-team-invite\" style=\"max-width: 32rem\">\n        <header data-chunk=\"auth-card-header\">\n          <col-ui align=\"center\" gap=\"1\">\n            <a href=\"/\" aria-label=\"AdiaUI home\">\n              <img src=\"/icons/agent-ui-light.svg\" alt=\"Adia Logo\" style=\"height: 5rem\" />\n            </a>\n            <h1>You've been invited</h1>\n            <text-ui><strong>Maya Patel</strong> invited you to join Acme as a <strong>Member</strong>.</text-ui>\n          </col-ui>\n        </header>\n\n        <section data-chunk=\"auth-card-content\">\n          <col-ui gap=\"6\">\n            <card-ui data-chunk=\"auth-invite-team-card\">\n              <row-ui gap=\"3\" align=\"center\" padding=\"3\">\n                <avatar-ui size=\"lg\" text=\"A\" variant=\"primary\" aria-hidden=\"true\"></avatar-ui>\n                <col-ui gap=\"0\">\n                  <text-ui strong>Acme</text-ui>\n                  <text-ui color=\"subtle\">acme.adia-ui.app · 24 members</text-ui>\n                </col-ui>\n              </row-ui>\n            </card-ui>\n\n            <text-ui align=\"center\">You'll sign in as <strong color=\"accent\">kim@acme.com</strong>. As a Member you can read and write all team workspaces.</text-ui>\n\n            <col-ui gap=\"2\" data-chunk=\"auth-invite-actions\" size=\"lg\">\n              <button-ui text=\"Accept invitation\" variant=\"primary\"></button-ui>\n              <button-ui text=\"Decline\"></button-ui>\n            </col-ui>\n\n            <text-ui text-align=\"center\" color=\"subtle\" size=\"sm\">\n              Not the right account? <a href=\"/site/examples/auth/sign-in\">Sign in with a different one</a>\n            </text-ui>\n          </col-ui>\n        </section>\n      </card-ui>",
+  "source": "site/pages/examples/auth/accept-invite/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/avatar-avatar-group.json

@@ -0,0 +1,15 @@
+{
+  "name": "avatar-avatar-group",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/avatar",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "avatar-group"
+  },
+  "html": "<section data-section data-property=\"avatar-group\" data-chunk=\"avatar-avatar-group\">\n  <h2 variant=\"section\">Avatar Group</h2>\n  <p data-note>Overlapping avatar stack with +N overflow counter. Controlled by the max attribute.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"max=3 (5 total)\">\n      <avatar-group-ui max=\"3\">\n        <avatar-ui text=\"Alice\"></avatar-ui>\n        <avatar-ui text=\"Bob\"></avatar-ui>\n        <avatar-ui text=\"Carol\"></avatar-ui>\n        <avatar-ui text=\"Dave\"></avatar-ui>\n        <avatar-ui text=\"Eve\"></avatar-ui>\n      </avatar-group-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"max=5 (no overflow)\">\n      <avatar-group-ui max=\"5\">\n        <avatar-ui text=\"Alice\"></avatar-ui>\n        <avatar-ui text=\"Bob\"></avatar-ui>\n        <avatar-ui text=\"Carol\"></avatar-ui>\n        <avatar-ui text=\"Dave\"></avatar-ui>\n        <avatar-ui text=\"Eve\"></avatar-ui>\n      </avatar-group-ui>\n      </div>\n  </div>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"sm group\">\n      <avatar-group-ui max=\"3\" size=\"sm\">\n        <avatar-ui text=\"A\"></avatar-ui>\n        <avatar-ui text=\"B\"></avatar-ui>\n        <avatar-ui text=\"C\"></avatar-ui>\n        <avatar-ui text=\"D\"></avatar-ui>\n      </avatar-group-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"lg group\">\n      <avatar-group-ui max=\"3\" size=\"lg\">\n        <avatar-ui text=\"A\"></avatar-ui>\n        <avatar-ui text=\"B\"></avatar-ui>\n        <avatar-ui text=\"C\"></avatar-ui>\n        <avatar-ui text=\"D\"></avatar-ui>\n      </avatar-group-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/avatar/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/avatar-shape.json

@@ -0,0 +1,15 @@
+{
+  "name": "avatar-shape",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/avatar",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "shape"
+  },
+  "html": "<section data-section data-property=\"shape\" data-chunk=\"avatar-shape\">\n  <h2 variant=\"section\">shape</h2>\n  <p data-note>Controls border radius. Defaults to \"circle\".</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"circle\">\n      <avatar-ui text=\"Circle\" shape=\"circle\"></avatar-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"square\">\n      <avatar-ui text=\"Square\" shape=\"square\"></avatar-ui>\n      </div>\n  </div>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"circle + image\">\n      <avatar-ui src=\"https://i.pravatar.cc/80?u=shape1\" text=\"Circle Img\" shape=\"circle\"></avatar-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"square + image\">\n      <avatar-ui src=\"https://i.pravatar.cc/80?u=shape2\" text=\"Square Img\" shape=\"square\"></avatar-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/avatar/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/avatar-size.json

@@ -0,0 +1,15 @@
+{
+  "name": "avatar-size",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/avatar",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "size"
+  },
+  "html": "<section data-section data-property=\"size\" data-chunk=\"avatar-size\">\n  <h2 variant=\"section\">size</h2>\n  <p data-note>Controls avatar dimensions. Defaults to \"md\".</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"xs\">\n      <avatar-ui text=\"XS\" size=\"xs\"></avatar-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"sm\">\n      <avatar-ui text=\"SM\" size=\"sm\"></avatar-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"md\">\n      <avatar-ui text=\"MD\" size=\"md\"></avatar-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"lg\">\n      <avatar-ui text=\"LG\" size=\"lg\"></avatar-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"xl\">\n      <avatar-ui text=\"XL\" size=\"xl\"></avatar-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/avatar/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/avatar-src.json

@@ -0,0 +1,15 @@
+{
+  "name": "avatar-src",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/avatar",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "src"
+  },
+  "html": "<section data-section data-property=\"src\" data-chunk=\"avatar-src\">\n  <h2 variant=\"section\">src</h2>\n  <p data-note>Displays an image. Falls back to initials derived from the text attribute if the image fails to load.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"image\">\n      <avatar-ui src=\"https://i.pravatar.cc/80?u=alice\" text=\"Alice Smith\"></avatar-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"initials fallback\">\n      <avatar-ui text=\"Bob Chen\"></avatar-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"broken image fallback\">\n      <avatar-ui src=\"https://broken.invalid/nope.jpg\" text=\"Carol Day\"></avatar-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"empty\">\n      <avatar-ui></avatar-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/avatar/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/avatar-text.json

@@ -0,0 +1,15 @@
+{
+  "name": "avatar-text",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/avatar",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "text"
+  },
+  "html": "<section data-section data-property=\"text\" data-chunk=\"avatar-text\">\n  <h2 variant=\"section\">text</h2>\n  <p data-note>String used inside the avatar — initials derive automatically from a full name (e.g. \"Alice Smith\" → \"AS\").</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"JD\"><avatar-ui text=\"JD\"></avatar-ui></div>\n    <div data-artifact-item data-artifact-label=\"AB\"><avatar-ui text=\"AB\"></avatar-ui></div>\n    <div data-artifact-item data-artifact-label=\"single char\"><avatar-ui text=\"W\"></avatar-ui></div>\n    <div data-artifact-item data-artifact-label=\"XYZ\"><avatar-ui text=\"XYZ\"></avatar-ui></div>\n    <div data-artifact-item data-artifact-label=\"Jane Doe\"><avatar-ui text=\"Jane Doe\"></avatar-ui></div>\n    <div data-artifact-item data-artifact-label=\"Samir Patel\"><avatar-ui text=\"Samir Patel\"></avatar-ui></div>\n  </div>\n</section>",
+  "source": "site/pages/components/avatar/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/badge-combinations.json

@@ -0,0 +1,15 @@
+{
+  "name": "badge-combinations",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/badge",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "combinations"
+  },
+  "html": "<section data-section data-property=\"combinations\" data-chunk=\"badge-combinations\">\n  <h2 variant=\"section\">Combinations</h2>\n  <p data-note>Badges alongside text and other components.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"inline count\">\n      <div style=\"display:flex; align-items:center; gap:var(--a-space-2);\">\n        <span>Notifications</span>\n        <badge-ui text=\"5\" variant=\"danger\" size=\"sm\"></badge-ui>\n      </div>\n      </div>\n    <div data-artifact-item data-artifact-label=\"status indicator\">\n      <div style=\"display:flex; align-items:center; gap:var(--a-space-2);\">\n        <span>Build Status:</span>\n        <badge-ui text=\"Passing\" variant=\"success\"></badge-ui>\n      </div>\n      </div>\n    <div data-artifact-item data-artifact-label=\"tag cloud\">\n      <div style=\"display:flex; gap:var(--a-space-2); flex-wrap:wrap;\">\n        <badge-ui text=\"HTML\" variant=\"info\" size=\"sm\"></badge-ui>\n        <badge-ui text=\"CSS\" variant=\"accent\" size=\"sm\"></badge-ui>\n        <badge-ui text=\"JavaScript\" variant=\"warning\" size=\"sm\"></badge-ui>\n      </div>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/badge/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/badge-edge-cases.json

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

package/chunks/badge-size.json

@@ -0,0 +1,15 @@
+{
+  "name": "badge-size",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/badge",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "size"
+  },
+  "html": "<section data-section data-property=\"size\" data-chunk=\"badge-size\">\n  <h2 variant=\"section\">size</h2>\n  <p data-note>Controls the badge dimensions. Defaults to \"md\".</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"sm\">\n      <badge-ui text=\"Small\" size=\"sm\"></badge-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"md\">\n      <badge-ui text=\"Medium\" size=\"md\"></badge-ui>\n      </div>\n  </div>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"count sm\">\n      <badge-ui text=\"3\" variant=\"danger\" size=\"sm\"></badge-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"count md\">\n      <badge-ui text=\"12\" variant=\"danger\" size=\"md\"></badge-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/badge/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/badge-text.json

@@ -0,0 +1,15 @@
+{
+  "name": "badge-text",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/badge",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "text"
+  },
+  "html": "<section data-section data-property=\"text\" data-chunk=\"badge-text\">\n  <h2 variant=\"section\">text</h2>\n  <p data-note>The display text. Can be a label, count, or status string.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"label\">\n      <badge-ui text=\"New\"></badge-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"count\">\n      <badge-ui text=\"99+\" variant=\"danger\"></badge-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"status\">\n      <badge-ui text=\"Active\" variant=\"success\"></badge-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"deprecation\">\n      <badge-ui text=\"Deprecated\" variant=\"warning\"></badge-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"phase\">\n      <badge-ui text=\"Beta\" variant=\"info\"></badge-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/badge/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/badge-variant.json

@@ -0,0 +1,15 @@
+{
+  "name": "badge-variant",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/badge",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "variant"
+  },
+  "html": "<section data-section data-property=\"variant\" data-chunk=\"badge-variant\">\n  <h2 variant=\"section\">variant</h2>\n  <p data-note>Controls the color scheme. Defaults to \"default\".</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"default\">\n      <badge-ui text=\"Default\"></badge-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"accent\">\n      <badge-ui text=\"Accent\" variant=\"accent\"></badge-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"info\">\n      <badge-ui text=\"Info\" variant=\"info\"></badge-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"success\">\n      <badge-ui text=\"Success\" variant=\"success\"></badge-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"warning\">\n      <badge-ui text=\"Warning\" variant=\"warning\"></badge-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"danger\">\n      <badge-ui text=\"Danger\" variant=\"danger\"></badge-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/badge/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/block-combo.json

@@ -0,0 +1,15 @@
+{
+  "name": "block-combo",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/block",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-combo": ""
+  },
+  "html": "<section data-section data-combo data-chunk=\"block-combo\">\n  <h2 variant=\"section\">Combinations</h2>\n  <p data-note>Padding and margin combined for common layout patterns.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"lg padding + md margin\">\n      <div style=\"background:var(--a-accent-10-tint); display:inline-block;\">\n        <block-ui padding=\"lg\" margin=\"md\" style=\"border:1px dashed var(--a-border); background:var(--a-canvas-bg);\">\n          <p>padding: lg + margin: md</p>\n        </block-ui>\n      </div>\n      </div>\n    <div data-artifact-item data-artifact-label=\"xl padding + lg margin\">\n      <div style=\"background:var(--a-accent-10-tint); display:inline-block;\">\n        <block-ui padding=\"xl\" margin=\"lg\" style=\"border:1px dashed var(--a-border); background:var(--a-canvas-bg);\">\n          <p>padding: xl + margin: lg</p>\n        </block-ui>\n      </div>\n      </div>\n  </div>\n  <div data-artifact-container data-mt-sm>\n    <div data-artifact-item data-artifact-label=\"block as card wrapper\">\n      <block-ui padding=\"lg\" style=\"border:1px dashed var(--a-border);\">\n        <h3>Card-like block</h3>\n        <p style=\"margin-top:var(--a-space-2);\">Blocks can serve as simple padded containers for card-like layouts without the full card component.</p>\n        <button-ui text=\"Action\" variant=\"primary\" size=\"sm\" style=\"margin-top:var(--a-space-3);\"></button-ui>\n      </block-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/block/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/block-edge.json

@@ -0,0 +1,15 @@
+{
+  "name": "block-edge",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/block",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-edge": ""
+  },
+  "html": "<section data-section data-edge data-chunk=\"block-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=\"none + none\">\n      <block-ui padding=\"none\" margin=\"none\" style=\"border:1px dashed var(--a-border);\">\n        <p>No padding, no margin</p>\n      </block-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"empty block\">\n      <block-ui padding=\"xl\" style=\"border:1px dashed var(--a-border);\"></block-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"minimal content\">\n      <block-ui padding=\"sm\" style=\"border:1px dashed var(--a-border);\">\n        <p>A</p>\n      </block-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/block/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/block-margin.json

@@ -0,0 +1,15 @@
+{
+  "name": "block-margin",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/block",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "margin"
+  },
+  "html": "<section data-section data-property=\"margin\" data-chunk=\"block-margin\">\n  <h2 variant=\"section\">margin</h2>\n  <p data-note>Controls outer spacing. Defaults to \"none\". The colored background shows the margin area.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"none (default)\">\n      <div style=\"background:var(--a-accent-10-tint); display:inline-block;\">\n        <block-ui margin=\"none\" padding=\"sm\" style=\"border:1px dashed var(--a-border); background:var(--a-canvas-bg);\">\n          <p>margin: none</p>\n        </block-ui>\n      </div>\n      </div>\n    <div data-artifact-item data-artifact-label=\"xs\">\n      <div style=\"background:var(--a-accent-10-tint); display:inline-block;\">\n        <block-ui margin=\"xs\" padding=\"sm\" style=\"border:1px dashed var(--a-border); background:var(--a-canvas-bg);\">\n          <p>margin: xs</p>\n        </block-ui>\n      </div>\n      </div>\n    <div data-artifact-item data-artifact-label=\"sm\">\n      <div style=\"background:var(--a-accent-10-tint); display:inline-block;\">\n        <block-ui margin=\"sm\" padding=\"sm\" style=\"border:1px dashed var(--a-border); background:var(--a-canvas-bg);\">\n          <p>margin: sm</p>\n        </block-ui>\n      </div>\n      </div>\n  </div>\n  <div data-artifact-container data-mt-sm>\n    <div data-artifact-item data-artifact-label=\"md\">\n      <div style=\"background:var(--a-accent-10-tint); display:inline-block;\">\n        <block-ui margin=\"md\" padding=\"sm\" style=\"border:1px dashed var(--a-border); background:var(--a-canvas-bg);\">\n          <p>margin: md</p>\n        </block-ui>\n      </div>\n      </div>\n    <div data-artifact-item data-artifact-label=\"lg\">\n      <div style=\"background:var(--a-accent-10-tint); display:inline-block;\">\n        <block-ui margin=\"lg\" padding=\"sm\" style=\"border:1px dashed var(--a-border); background:var(--a-canvas-bg);\">\n          <p>margin: lg</p>\n        </block-ui>\n      </div>\n      </div>\n    <div data-artifact-item data-artifact-label=\"xl\">\n      <div style=\"background:var(--a-accent-10-tint); display:inline-block;\">\n        <block-ui margin=\"xl\" padding=\"sm\" style=\"border:1px dashed var(--a-border); background:var(--a-canvas-bg);\">\n          <p>margin: xl</p>\n        </block-ui>\n      </div>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/block/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/block-padding.json

@@ -0,0 +1,15 @@
+{
+  "name": "block-padding",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/block",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "padding"
+  },
+  "html": "<section data-section data-property=\"padding\" data-chunk=\"block-padding\">\n  <h2 variant=\"section\">padding</h2>\n  <p data-note>Controls inner spacing. Defaults to \"md\". The dashed border is for demo visibility.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"none\">\n      <block-ui padding=\"none\" style=\"border:1px dashed var(--a-border);\">\n        <p>padding: none</p>\n      </block-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"xs\">\n      <block-ui padding=\"xs\" style=\"border:1px dashed var(--a-border);\">\n        <p>padding: xs</p>\n      </block-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"sm\">\n      <block-ui padding=\"sm\" style=\"border:1px dashed var(--a-border);\">\n        <p>padding: sm</p>\n      </block-ui>\n      </div>\n  </div>\n  <div data-artifact-container data-mt-sm>\n    <div data-artifact-item data-artifact-label=\"md (default)\">\n      <block-ui padding=\"md\" style=\"border:1px dashed var(--a-border);\">\n        <p>padding: md</p>\n      </block-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"lg\">\n      <block-ui padding=\"lg\" style=\"border:1px dashed var(--a-border);\">\n        <p>padding: lg</p>\n      </block-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"xl\">\n      <block-ui padding=\"xl\" style=\"border:1px dashed var(--a-border);\">\n        <p>padding: xl</p>\n      </block-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/block/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/breadcrumb-basic.json

@@ -0,0 +1,15 @@
+{
+  "name": "breadcrumb-basic",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/breadcrumb",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "basic"
+  },
+  "html": "<section data-section data-property=\"basic\" data-chunk=\"breadcrumb-basic\">\n  <h2 variant=\"section\">basic</h2>\n  <p data-note>Default separator is a forward slash. The last item is marked as the current page.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"default separator (/)\">\n      <breadcrumb-ui>\n        <span>Home</span>\n        <span>Components</span>\n        <span>Breadcrumb</span>\n      </breadcrumb-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/breadcrumb/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/breadcrumb-combo.json

@@ -0,0 +1,15 @@
+{
+  "name": "breadcrumb-combo",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/breadcrumb",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-combo": ""
+  },
+  "html": "<section data-section data-combo data-chunk=\"breadcrumb-combo\">\n  <h2 variant=\"section\">Combinations</h2>\n  <p data-note>Different separators and content styles.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"links + default sep\">\n      <breadcrumb-ui separator=\"/\">\n        <a href=\"#\">Dashboard</a>\n        <a href=\"#\">Analytics</a>\n        <span>Monthly Report</span>\n      </breadcrumb-ui>\n      </div>\n  </div>\n  <div data-artifact-container data-mt-sm>\n    <div data-artifact-item data-artifact-label=\"links + chevron sep\">\n      <breadcrumb-ui separator=\"&gt;\">\n        <a href=\"#\">Workspace</a>\n        <a href=\"#\">Project Alpha</a>\n        <a href=\"#\">Issues</a>\n        <span>#42 Fix login bug</span>\n      </breadcrumb-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/breadcrumb/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/breadcrumb-edge.json

@@ -0,0 +1,15 @@
+{
+  "name": "breadcrumb-edge",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/breadcrumb",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-edge": ""
+  },
+  "html": "<section data-section data-edge data-chunk=\"breadcrumb-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 item\">\n      <breadcrumb-ui>\n        <span>Home</span>\n      </breadcrumb-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"two items\">\n      <breadcrumb-ui>\n        <a href=\"#\">A</a>\n        <span>B</span>\n      </breadcrumb-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"long segment text\">\n      <breadcrumb-ui>\n        <a href=\"#\">This is a very long breadcrumb segment</a>\n        <a href=\"#\">Another long segment name here</a>\n        <span>Final very long current page title</span>\n      </breadcrumb-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/breadcrumb/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/breadcrumb-links.json

@@ -0,0 +1,15 @@
+{
+  "name": "breadcrumb-links",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/breadcrumb",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "links"
+  },
+  "html": "<section data-section data-property=\"links\" data-chunk=\"breadcrumb-links\">\n  <h2 variant=\"section\">with links</h2>\n  <p data-note>Use anchor tags for clickable breadcrumb segments. The last item is typically a plain span.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"linked segments\">\n      <breadcrumb-ui>\n        <a href=\"#\">Home</a>\n        <a href=\"#\">Products</a>\n        <a href=\"#\">Category</a>\n        <span>Item Detail</span>\n      </breadcrumb-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/breadcrumb/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/breadcrumb-long.json

@@ -0,0 +1,15 @@
+{
+  "name": "breadcrumb-long",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/breadcrumb",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "long"
+  },
+  "html": "<section data-section data-property=\"long\" data-chunk=\"breadcrumb-long\">\n  <h2 variant=\"section\">long paths</h2>\n  <p data-note>Deep navigation hierarchies with many segments.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"deep path (7 levels)\">\n      <breadcrumb-ui>\n        <a href=\"#\">Home</a>\n        <a href=\"#\">Admin</a>\n        <a href=\"#\">Settings</a>\n        <a href=\"#\">Users</a>\n        <a href=\"#\">Roles</a>\n        <a href=\"#\">Permissions</a>\n        <span>Edit</span>\n      </breadcrumb-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/breadcrumb/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/breadcrumb-separator.json

@@ -0,0 +1,15 @@
+{
+  "name": "breadcrumb-separator",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/breadcrumb",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "separator"
+  },
+  "html": "<section data-section data-property=\"separator\" data-chunk=\"breadcrumb-separator\">\n  <h2 variant=\"section\">custom separator</h2>\n  <p data-note>The separator attribute changes the delimiter character between items.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='separator=\"&gt;\"'>\n      <breadcrumb-ui separator=\"&gt;\">\n        <span>Home</span>\n        <span>Settings</span>\n        <span>General</span>\n      </breadcrumb-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/breadcrumb/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/bulk-action-toolbar-swap.json

@@ -0,0 +1,15 @@
+{
+  "name": "bulk-action-toolbar-swap",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/patterns/bulk-action-toolbar",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "toolbar-swap"
+  },
+  "html": "<section data-section data-property=\"toolbar-swap\" data-chunk=\"bulk-action-toolbar-swap\">\n  <h2 variant=\"section\">Toolbar swap on selection</h2>\n  <p data-note>Tick the checkboxes below — the default <code>&lt;table-toolbar-ui&gt;</code> swaps for the bulk-action bar at the same height. Untick to return.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"interactive\">\n      <card-ui>\n        <section bleed>\n          <table-toolbar-ui id=\"pat-bulk-default\" for=\"pat-bulk-table\" text=\"Resources\" count=\"6\" no-filter no-sort no-columns></table-toolbar-ui>\n\n          <toolbar-ui id=\"pat-bulk-actions\" data-bulk-bar role=\"toolbar\" aria-label=\"Bulk actions\" hidden>\n            <text-ui strong><span data-bulk-count>0</span> selected</text-ui>\n            <span data-spacer></span>\n            <button-ui text=\"Archive\" icon=\"archive\" variant=\"ghost\" size=\"sm\" data-bulk-action=\"archive\"></button-ui>\n            <button-ui text=\"Export\" icon=\"download-simple\" variant=\"ghost\" size=\"sm\" data-bulk-action=\"export\"></button-ui>\n            <button-ui text=\"Move\" icon=\"folder-simple\" variant=\"ghost\" size=\"sm\" data-bulk-action=\"move\"></button-ui>\n            <divider-ui vertical></divider-ui>\n            <button-ui text=\"Delete\" icon=\"trash\" variant=\"ghost\" size=\"sm\" data-bulk-action=\"delete\"></button-ui>\n          </toolbar-ui>\n\n          <table-ui id=\"pat-bulk-table\" selectable sortable striped></table-ui>\n        </section>\n      </card-ui>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/patterns/bulk-action-toolbar/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/button-block.json

@@ -0,0 +1,15 @@
+{
+  "name": "button-block",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/button",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "block"
+  },
+  "html": "<section data-section data-property=\"block\" data-chunk=\"button-block\">\n  <h2 variant=\"section\">block</h2>\n  <p data-note>Stretches the button to the full width of its container.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"block primary\"><button-ui text=\"Full width\" variant=\"primary\" stretch></button-ui></div>\n    <div data-artifact-item data-artifact-label=\"block outline\"><button-ui text=\"Full width outline\" variant=\"outline\" stretch></button-ui></div>\n    <div data-artifact-item data-artifact-label=\"block ghost\"><button-ui text=\"Block ghost\" variant=\"ghost\" stretch></button-ui></div>\n  </div>\n</section>",
+  "source": "site/pages/components/button/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}