@adia-ai/a2ui-corpus 0.0.7 → 0.0.9

package/chunks/auth-signin-card-mfa.json

@@ -14,5 +14,5 @@
   },
   "html": "<card-ui raw data-chunk=\"auth-signin-card-mfa\" 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>Two-factor verification</h1>\n            <text-ui>Enter the 6-digit code from your authenticator app.</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            <text-ui text-align=\"center\">\n              <a href=\"/site/examples/auth/sign-in/mfa/recovery\">Use a backup code instead</a>\n            </text-ui>\n\n            <divider-ui label=\"or\"></divider-ui>\n\n            <col-ui gap=\"2\" data-chunk=\"auth-mfa-fallback-actions\">\n              <button-ui text=\"Send code via SMS\" icon=\"device-mobile\" variant=\"outline\"></button-ui>\n              <button-ui text=\"Use security key\" icon=\"key\" variant=\"outline\"></button-ui>\n            </col-ui>\n\n            <text-ui text-align=\"center\">\n              <a href=\"/site/examples/auth/sign-in\">← Sign out</a>\n            </text-ui>\n          </col-ui>\n        </section>\n      </card-ui>",
   "source": "site/pages/examples/auth/sign-in/mfa/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/auth-signin-card-otp.json

@@ -10,5 +10,5 @@
   },
   "html": "<card-ui raw data-chunk=\"auth-signin-card-otp\" style=\"max-width: 32rem\">\n\n    <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>Enter your code</h1>\n        <text-ui>We sent a 6-digit code to <strong color=\"accent\">kim@acme.com</strong>. Enter it below.</text-ui>\n      </col-ui>\n    </header>\n\n    <section>\n      <col-ui gap=\"6\">\n\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        <text-ui text-align=\"center\" color=\"subtle\">\n          Didn't receive it? <a href=\"#\">Resend in 30s</a>\n        </text-ui>\n\n        <text-ui text-align=\"center\">\n          <a href=\"/site/examples/auth/sign-in\">← Use a different method</a>\n        </text-ui>\n\n        <text-ui text-align=\"center\" color=\"subtle\">\n          Don't have an account? <a href=\"/site/examples/auth/sign-up\">Sign up</a>\n        </text-ui>\n\n      </col-ui>\n    </section>\n\n  </card-ui>",
   "source": "site/pages/examples/auth/sign-in/otp/verify/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/auth-signin-card-password.json

@@ -14,5 +14,5 @@
   },
   "html": "<card-ui raw data-chunk=\"auth-signin-card-password\" 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>Enter your password</h1>\n            <text-ui>Signing in as <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            <form data-chunk=\"auth-password-challenge\" size=\"lg\">\n              <col-ui gap=\"4\">\n                <input-ui label=\"Password\" type=\"password\" name=\"password\" autocomplete=\"current-password\" placeholder=\"••••••••\" required></input-ui>\n\n                <row-ui justify=\"space-between\" align=\"center\" size=\"sm\">\n                  <check-ui name=\"remember\" label=\"Remember me\"></check-ui>\n                  <a href=\"/site/examples/auth/forgot-password\">Forgot password?</a>\n                </row-ui>\n                <button-ui text=\"Sign in\" variant=\"primary\" type=\"submit\"></button-ui>\n              </col-ui>\n            </form>\n\n            <divider-ui label=\"or use a one-time code\"></divider-ui>\n\n            <col-ui gap=\"2\">\n              <button-ui text=\"Email me a magic link\" icon=\"envelope-simple\" variant=\"outline\"></button-ui>\n              <button-ui text=\"Send me a 6-digit code\" icon=\"number-square-six\" variant=\"outline\"></button-ui>\n            </col-ui>\n\n            <text-ui text-align=\"center\">\n              <a href=\"/site/examples/auth/sign-in\">← Use a different email</a>\n            </text-ui>\n          </col-ui>\n        </section>\n      </card-ui>",
   "source": "site/pages/examples/auth/sign-in/password/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/auth-signin-card-recovery.json

@@ -14,5 +14,5 @@
   },
   "html": "<card-ui raw data-chunk=\"auth-signin-card-recovery\" style=\"max-width: 32rem\">\n\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>Use a backup code</h1>\n        <text-ui>Enter one of the recovery codes you saved when you set up two-factor.</text-ui>\n      </col-ui>\n    </header>\n\n    <section data-chunk=\"auth-card-content\">\n      <col-ui gap=\"6\">\n\n        <form data-chunk=\"auth-mfa-recovery\" size=\"lg\">\n          <col-ui gap=\"4\">\n            <input-ui label=\"Backup code\" name=\"recovery_code\" autocomplete=\"one-time-code\" placeholder=\"abcd-efgh\" hint=\"Codes look like abcd-efgh. Each code works once.\" required></input-ui>\n            <button-ui text=\"Verify and continue\" variant=\"primary\" type=\"submit\"></button-ui>\n          </col-ui>\n        </form>\n\n        <alert-ui variant=\"info\" icon=\"info\">\n          <span slot=\"content\">Lost your backup codes? <a href=\"#\">Contact support</a> to regain access.</span>\n        </alert-ui>\n\n        <text-ui text-align=\"center\">\n          <a href=\"/site/examples/auth/sign-in/mfa\">← Back to two-factor</a>\n        </text-ui>\n\n      </col-ui>\n    </section>\n\n  </card-ui>",
   "source": "site/pages/examples/auth/sign-in/mfa/recovery/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/auth-signout-actions.json

@@ -11,5 +11,5 @@
   },
   "html": "<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>",
   "source": "site/pages/examples/auth/sign-out/index.html",
-  "captured_at": "2026-04-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/auth-signout.json

@@ -14,5 +14,5 @@
   },
   "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-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

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

@@ -12,5 +12,5 @@
   },
   "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-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/auth-signup-entry.json

@@ -15,5 +15,5 @@
   },
   "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-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

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

@@ -10,5 +10,5 @@
   },
   "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-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/auth-signup-verify.json

@@ -13,5 +13,5 @@
   },
   "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-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/auth-social-auths.json

@@ -10,5 +10,5 @@
   },
   "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-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/auth-sso-providers.json

@@ -11,5 +11,5 @@
   },
   "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-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/auth-sso-required.json

@@ -14,5 +14,5 @@
   },
   "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-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/auth-team-invite.json

@@ -15,5 +15,5 @@
   },
   "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-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/avatar-avatar-group.json

@@ -11,5 +11,5 @@
   },
   "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-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/avatar-shape.json

@@ -11,5 +11,5 @@
   },
   "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-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/avatar-size.json

@@ -11,5 +11,5 @@
   },
   "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-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/avatar-src.json

@@ -11,5 +11,5 @@
   },
   "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-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/avatar-text.json

@@ -11,5 +11,5 @@
   },
   "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-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/badge-combinations.json

@@ -11,5 +11,5 @@
   },
   "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-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/badge-edge-cases.json

@@ -11,5 +11,5 @@
   },
   "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-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/badge-size.json

@@ -11,5 +11,5 @@
   },
   "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-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/badge-text.json

@@ -11,5 +11,5 @@
   },
   "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-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/badge-variant.json

@@ -11,5 +11,5 @@
   },
   "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-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/banner-announcement-beta.json

@@ -0,0 +1,15 @@
+{
+  "name": "banner-announcement-beta",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/patterns/system-banners",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "announcement-beta"
+  },
+  "html": "<section data-section data-property=\"announcement-beta\" data-chunk=\"banner-announcement-beta\">\n  <h2 variant=\"section\">Announcement — beta callout</h2>\n  <p data-note><code>variant=\"info\"</code> or <code>variant=\"muted\"</code> with a sparkle / flask icon. Promotes a new feature to opted-in users; carries a \"Try it\" CTA + dismiss. Once dismissed, persists per-user — don't show twice.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"beta announcement banner\">\n      <alert-ui variant=\"muted\" icon=\"sparkle\" closable>\n        <col-ui slot=\"content\" gap=\"1\">\n          <text-ui strong>New: Saved views.</text-ui>\n          <text-ui>Curate filter sets and reuse them across the workspace. Now in beta.</text-ui>\n          <row-ui gap=\"2\" justify=\"end\">\n            <button-ui text=\"Try it\" variant=\"primary\" size=\"sm\"></button-ui>\n          </row-ui>\n        </col-ui>\n      </alert-ui>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/patterns/system-banners/index.html",
+  "captured_at": "2026-05-01T19:13:23.303Z"
+}

package/chunks/banner-announcement-promo.json

@@ -0,0 +1,15 @@
+{
+  "name": "banner-announcement-promo",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/patterns/system-banners",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "announcement-promo"
+  },
+  "html": "<section data-section data-property=\"announcement-promo\" data-chunk=\"banner-announcement-promo\">\n  <h2 variant=\"section\">Announcement — promo / event</h2>\n  <p data-note><code>variant=\"info\"</code> with a megaphone or calendar icon. Time-boxed (event date, promo end). Dismiss persists for the campaign window. CTA goes to the landing page or signup flow.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"promo announcement banner\">\n      <alert-ui variant=\"info\" icon=\"megaphone-simple\" closable>\n        <col-ui slot=\"content\" gap=\"1\">\n          <text-ui strong>AdiaConf 2026 — May 22, virtual.</text-ui>\n          <text-ui>Two days of sessions on generative UI, A2UI internals, and the road ahead.</text-ui>\n          <row-ui gap=\"2\" justify=\"end\">\n            <button-ui text=\"Save your seat\" variant=\"primary\" size=\"sm\" icon-trailing=\"arrow-up-right\"></button-ui>\n          </row-ui>\n        </col-ui>\n      </alert-ui>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/patterns/system-banners/index.html",
+  "captured_at": "2026-05-01T19:13:23.303Z"
+}

package/chunks/banner-live-update.json

@@ -0,0 +1,15 @@
+{
+  "name": "banner-live-update",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/patterns/system-banners",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "live-update"
+  },
+  "html": "<section data-section data-property=\"live-update\" data-chunk=\"banner-live-update\">\n  <h2 variant=\"section\">Live updates — \"new since you opened this\"</h2>\n  <p data-note><code>variant=\"info\"</code> with a count + a \"Show new\" CTA. Sits above a list / feed / table to signal that the underlying data has new rows the user hasn't seen yet. Clicking the CTA scrolls the new items in and dismisses the banner. Companion to the <code>data-stream</code> trait.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"live update banner\">\n      <alert-ui variant=\"info\" icon=\"arrow-up\">\n        <col-ui slot=\"content\" gap=\"1\">\n          <row-ui gap=\"2\" align=\"baseline\" wrap>\n            <text-ui strong>12 new items</text-ui>\n            <text-ui color=\"subtle\">since you opened this view 4 minutes ago.</text-ui>\n          </row-ui>\n          <row-ui gap=\"2\" justify=\"end\">\n            <button-ui text=\"Show new\" variant=\"primary\" size=\"sm\" icon-trailing=\"arrow-up\"></button-ui>\n          </row-ui>\n        </col-ui>\n      </alert-ui>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/patterns/system-banners/index.html",
+  "captured_at": "2026-05-01T19:13:23.303Z"
+}

package/chunks/banner-system-maintenance.json

@@ -0,0 +1,15 @@
+{
+  "name": "banner-system-maintenance",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/patterns/system-banners",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "system-maintenance"
+  },
+  "html": "<section data-section data-property=\"system-maintenance\" data-chunk=\"banner-system-maintenance\">\n  <h2 variant=\"section\">System status — maintenance window</h2>\n  <p data-note><code>variant=\"info\"</code> with a wrench icon. Posted ahead of a planned outage. Carries the start time and an optional \"Learn more\" link to a status page. Not dismissible — users need to know.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"maintenance banner\">\n      <alert-ui variant=\"info\" icon=\"wrench\">\n        <col-ui slot=\"content\" gap=\"1\">\n          <text-ui strong>Scheduled maintenance — Sunday, 2:00–4:00 AM UTC.</text-ui>\n          <text-ui>The service will be read-only during this window.</text-ui>\n          <row-ui gap=\"2\" justify=\"end\">\n            <button-ui text=\"Status page\" variant=\"ghost\" size=\"sm\" icon-trailing=\"arrow-up-right\"></button-ui>\n          </row-ui>\n        </col-ui>\n      </alert-ui>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/patterns/system-banners/index.html",
+  "captured_at": "2026-05-01T19:13:23.303Z"
+}

package/chunks/banner-system-offline.json

@@ -0,0 +1,15 @@
+{
+  "name": "banner-system-offline",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/patterns/system-banners",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "system-offline"
+  },
+  "html": "<section data-section data-property=\"system-offline\" data-chunk=\"banner-system-offline\">\n  <h2 variant=\"section\">System status — offline</h2>\n  <p data-note><code>variant=\"warning\"</code> with a network-slash icon. Non-dismissible while the connection is down. The banner disappears on its own when the network returns; users don't dismiss it manually.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"offline banner\">\n      <alert-ui variant=\"warning\" icon=\"wifi-slash\">\n        <col-ui slot=\"content\" gap=\"1\">\n          <text-ui strong>You're offline.</text-ui>\n          <text-ui>Changes will sync when the connection returns. Some features are unavailable.</text-ui>\n        </col-ui>\n      </alert-ui>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/patterns/system-banners/index.html",
+  "captured_at": "2026-05-01T19:13:23.303Z"
+}

package/chunks/banner-system-update.json

@@ -0,0 +1,15 @@
+{
+  "name": "banner-system-update",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/patterns/system-banners",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "system-update"
+  },
+  "html": "<section data-section data-property=\"system-update\" data-chunk=\"banner-system-update\">\n  <h2 variant=\"section\">System status — update available</h2>\n  <p data-note><code>variant=\"info\"</code> with an arrow-clockwise icon and a primary \"Refresh\" CTA. Appears when the client detects a newer build. Dismissible (user is in the middle of something) but reappears on next session start.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"update available banner\">\n      <alert-ui variant=\"info\" icon=\"arrow-clockwise\" closable>\n        <col-ui slot=\"content\" gap=\"1\">\n          <text-ui strong>A new version is available.</text-ui>\n          <text-ui>Refresh to get the latest features and fixes.</text-ui>\n          <row-ui gap=\"2\" justify=\"end\">\n            <button-ui text=\"Refresh\" variant=\"primary\" size=\"sm\"></button-ui>\n          </row-ui>\n        </col-ui>\n      </alert-ui>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/patterns/system-banners/index.html",
+  "captured_at": "2026-05-01T19:13:23.303Z"
+}

package/chunks/bell-menu-empty.json

@@ -0,0 +1,15 @@
+{
+  "name": "bell-menu-empty",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/patterns/notifications-bell-and-digest",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "bell-empty"
+  },
+  "html": "<section data-section data-property=\"bell-empty\" data-chunk=\"bell-menu-empty\">\n  <h2 variant=\"section\">Bell menu — empty</h2>\n  <p data-note>Default state when there are no unread notifications. Uses an empty-state-ui in the menu body so the popover doesn't feel broken; \"View all\" footer links to the full feed.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"bell menu empty\">\n      <card-ui style=\"max-width: 360px;\" data-shape=\"popover\">\n        <header>\n          <text-ui slot=\"heading\" strong>Notifications</text-ui>\n        </header>\n        <section>\n          <empty-state-ui\n            icon=\"bell-slash\"\n            size=\"sm\"\n            heading=\"All caught up\"\n            description=\"No new notifications since you last checked.\"\n          ></empty-state-ui>\n        </section>\n        <footer divider>\n          <row-ui gap=\"2\" align=\"center\" justify=\"space-between\" style=\"width: 100%;\">\n            <text-ui size=\"sm\">View all activity</text-ui>\n            <icon-ui name=\"arrow-right\" size=\"sm\"></icon-ui>\n          </row-ui>\n        </footer>\n      </card-ui>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/patterns/notifications-bell-and-digest/index.html",
+  "captured_at": "2026-05-01T19:13:23.303Z"
+}

package/chunks/bell-menu-unread.json

@@ -0,0 +1,15 @@
+{
+  "name": "bell-menu-unread",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/patterns/notifications-bell-and-digest",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "bell-unread"
+  },
+  "html": "<section data-section data-property=\"bell-unread\" data-chunk=\"bell-menu-unread\">\n  <h2 variant=\"section\">Bell menu — unread items</h2>\n  <p data-note>Each row carries an avatar (or icon for system events), a one-line summary, a timestamp, and a small unread-dot. Clicking a row marks it read and navigates to the source. \"Mark all read\" + \"View all activity\" in the footer.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"bell menu with unread\">\n      <card-ui style=\"max-width: 380px;\" data-shape=\"popover\">\n        <header>\n          <row-ui slot=\"heading\" align=\"center\" gap=\"2\">\n            <text-ui strong>Notifications</text-ui>\n            <tag-ui size=\"sm\" variant=\"primary\">3 new</tag-ui>\n          </row-ui>\n        </header>\n        <section>\n          <col-ui gap=\"2\">\n            <row-ui gap=\"2\" align=\"start\">\n              <avatar-ui size=\"sm\" text=\"Avery Chen\"></avatar-ui>\n              <col-ui gap=\"0\" style=\"flex: 1;\">\n                <text-ui><strong>Avery Chen</strong> commented on your PR</text-ui>\n                <text-ui color=\"subtle\" size=\"sm\">\"OKLCH ramp comment\" · 4 minutes ago</text-ui>\n              </col-ui>\n              <span aria-label=\"Unread\" style=\"flex-shrink: 0; display: inline-block; width: 8px; height: 8px; margin-block-start: 0.4rem; border-radius: 50%; background: var(--a-accent-strong);\"></span>\n            </row-ui>\n            <row-ui gap=\"2\" align=\"start\">\n              <avatar-ui size=\"sm\" text=\"Jordan Lee\"></avatar-ui>\n              <col-ui gap=\"0\" style=\"flex: 1;\">\n                <text-ui><strong>Jordan Lee</strong> assigned you a task</text-ui>\n                <text-ui color=\"subtle\" size=\"sm\">\"Audit kanban accessibility\" · 1 hour ago</text-ui>\n              </col-ui>\n              <span aria-label=\"Unread\" style=\"flex-shrink: 0; display: inline-block; width: 8px; height: 8px; margin-block-start: 0.4rem; border-radius: 50%; background: var(--a-accent-strong);\"></span>\n            </row-ui>\n            <row-ui gap=\"2\" align=\"start\">\n              <icon-ui name=\"check-circle\" size=\"sm\"></icon-ui>\n              <col-ui gap=\"0\" style=\"flex: 1;\">\n                <text-ui>Build #4823 succeeded on <strong>main</strong></text-ui>\n                <text-ui color=\"subtle\" size=\"sm\">2 hours ago</text-ui>\n              </col-ui>\n              <span aria-label=\"Unread\" style=\"flex-shrink: 0; display: inline-block; width: 8px; height: 8px; margin-block-start: 0.4rem; border-radius: 50%; background: var(--a-accent-strong);\"></span>\n            </row-ui>\n            <row-ui gap=\"2\" align=\"start\">\n              <avatar-ui size=\"sm\" text=\"Sam Park\"></avatar-ui>\n              <col-ui gap=\"0\" style=\"flex: 1;\">\n                <text-ui><strong>Sam Park</strong> mentioned you</text-ui>\n                <text-ui color=\"subtle\" size=\"sm\">\"#design — auth review\" · yesterday</text-ui>\n              </col-ui>\n            </row-ui>\n            <row-ui gap=\"2\" align=\"start\">\n              <icon-ui name=\"warning\" size=\"sm\"></icon-ui>\n              <col-ui gap=\"0\" style=\"flex: 1;\">\n                <text-ui>Storage 80% full</text-ui>\n                <text-ui color=\"subtle\" size=\"sm\">2 days ago · Workspace</text-ui>\n              </col-ui>\n            </row-ui>\n          </col-ui>\n        </section>\n        <footer divider>\n          <row-ui gap=\"2\" align=\"center\" justify=\"space-between\" style=\"width: 100%;\">\n            <row-ui gap=\"1\" align=\"center\">\n              <icon-ui name=\"check\" size=\"sm\"></icon-ui>\n              <text-ui size=\"sm\">Mark all as read</text-ui>\n            </row-ui>\n            <row-ui gap=\"1\" align=\"center\">\n              <text-ui size=\"sm\">View all activity</text-ui>\n              <icon-ui name=\"arrow-right\" size=\"sm\"></icon-ui>\n            </row-ui>\n          </row-ui>\n        </footer>\n      </card-ui>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/patterns/notifications-bell-and-digest/index.html",
+  "captured_at": "2026-05-01T19:13:23.303Z"
+}

package/chunks/block-combo.json

@@ -11,5 +11,5 @@
   },
   "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-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/block-edge.json

@@ -11,5 +11,5 @@
   },
   "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-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/block-margin.json

@@ -11,5 +11,5 @@
   },
   "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-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/block-padding.json

@@ -11,5 +11,5 @@
   },
   "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-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/breadcrumb-basic.json

@@ -11,5 +11,5 @@
   },
   "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-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/breadcrumb-combo.json

@@ -11,5 +11,5 @@
   },
   "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-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/breadcrumb-edge.json

@@ -11,5 +11,5 @@
   },
   "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-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/breadcrumb-icon-leading.json

@@ -0,0 +1,15 @@
+{
+  "name": "breadcrumb-icon-leading",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/breadcrumb",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "icon-leading"
+  },
+  "html": "<section data-section data-property=\"icon-leading\" data-chunk=\"breadcrumb-icon-leading\">\n  <h2 variant=\"section\">icon-leading</h2>\n  <p data-note>First child can be an <code>icon-ui</code> (or a link wrapping one) for app-shell-style breadcrumbs that lead with a home or workspace glyph.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"house icon + text crumbs\">\n      <breadcrumb-ui>\n        <a href=\"/\" aria-label=\"Home\"><icon-ui name=\"house\"></icon-ui></a>\n        <a href=\"#\">Workspace</a>\n        <a href=\"#\">Project</a>\n        <span>Settings</span>\n      </breadcrumb-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"app-icon + text crumbs\">\n      <breadcrumb-ui separator=\"&gt;\">\n        <a href=\"/\" aria-label=\"Adia\"><icon-ui name=\"cube\"></icon-ui></a>\n        <a href=\"#\">Patterns</a>\n        <span>System Banners</span>\n      </breadcrumb-ui>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/components/breadcrumb/index.html",
+  "captured_at": "2026-05-01T19:13:23.303Z"
+}

package/chunks/breadcrumb-links.json

@@ -11,5 +11,5 @@
   },
   "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-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/breadcrumb-long.json

@@ -11,5 +11,5 @@
   },
   "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-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }

package/chunks/breadcrumb-overflow.json

@@ -0,0 +1,15 @@
+{
+  "name": "breadcrumb-overflow",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/breadcrumb",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "overflow"
+  },
+  "html": "<section data-section data-property=\"overflow\" data-chunk=\"breadcrumb-overflow\">\n  <h2 variant=\"section\">overflow popover</h2>\n  <p data-note>Add the <code>collapse</code> attribute when the trail has 4+ items and you want the middle crumbs tucked into a <code>…</code> popover. Defaults keep 1 leading + 2 trailing visible; tune with <code>collapse-keep-leading</code> / <code>collapse-keep-trailing</code>.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"icon + … + 2 tail crumbs\">\n      <breadcrumb-ui collapse>\n        <a href=\"/\" aria-label=\"Home\"><icon-ui name=\"house\"></icon-ui></a>\n        <a href=\"#\">Workspace</a>\n        <a href=\"#\">Project Alpha</a>\n        <a href=\"#\">Settings</a>\n        <a href=\"#\">Users</a>\n        <span>Permissions</span>\n      </breadcrumb-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"text-only + collapse\">\n      <breadcrumb-ui collapse separator=\"&gt;\">\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        <span>Edit</span>\n      </breadcrumb-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"custom keep-trailing=3\">\n      <breadcrumb-ui collapse collapse-keep-trailing=\"3\">\n        <a href=\"/\" aria-label=\"Home\"><icon-ui name=\"house\"></icon-ui></a>\n        <a href=\"#\">Org</a>\n        <a href=\"#\">Workspace</a>\n        <a href=\"#\">Project</a>\n        <a href=\"#\">Branch</a>\n        <a href=\"#\">File</a>\n        <span>Line 42</span>\n      </breadcrumb-ui>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/components/breadcrumb/index.html",
+  "captured_at": "2026-05-01T19:13:23.303Z"
+}

package/chunks/breadcrumb-separator.json

@@ -11,5 +11,5 @@
   },
   "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-28T16:48:01.089Z"
+  "captured_at": "2026-05-01T19:13:23.303Z"
 }