@adia-ai/gen-ui 0.8.43 → 0.8.44

package/corpus/chunks/audit-log-basic.json

@@ -6,7 +6,7 @@
   "slots": [],
   "nested": [],
   "attrs": {},
-  "html": "<card-ui>\n        <header>\n          <span slot=\"heading\" variant=\"section\">Audit log</span>\n          <text-ui slot=\"description\" color=\"subtle\">Last 90 days · admin actions only</text-ui>\n          <row-ui slot=\"action\" gap=\"2\" align=\"center\">\n            <select-ui name=\"actor\" style=\"min-width: 8rem;\">\n              <option value=\"\">All actors</option>\n              <option value=\"kim\">kim@example.com</option>\n              <option value=\"alex\">alex@example.com</option>\n              <option value=\"bot\">automation-bot</option>\n            </select-ui>\n            <select-ui name=\"verb\" style=\"min-width: 8rem;\">\n              <option value=\"\">All actions</option>\n              <option value=\"create\">create</option>\n              <option value=\"update\">update</option>\n              <option value=\"delete\">delete</option>\n            </select-ui>\n          </row-ui>\n        </header>\n        <section bleed>\n          <table-ui frameless id=\"audit-log-table\"></table-ui>\n        </section>\n        <footer divider>\n          <text-ui color=\"subtle\" size=\"sm\">Showing 8 of 247 events</text-ui>\n          <row-ui slot=\"action\" gap=\"2\">\n            <button-ui text=\"Export\" variant=\"ghost\" size=\"sm\" icon-leading=\"download-simple\"></button-ui>\n            <button-ui text=\"Load older\" variant=\"ghost\" size=\"sm\"></button-ui>\n          </row-ui>\n        </footer>\n      </card-ui>",
+  "html": "<card-ui>\n        <header>\n          <span slot=\"heading\" variant=\"section\">Audit log</span>\n          <text-ui slot=\"description\" color=\"subtle\">Last 90 days · admin actions only</text-ui>\n          <row-ui slot=\"action\" gap=\"2\" align=\"center\">\n            <select-ui name=\"actor\" style=\"min-width: 8rem;\">\n              <option value=\"\">All actors</option>\n              <option value=\"kim\">kim@example.com</option>\n              <option value=\"alex\">alex@example.com</option>\n              <option value=\"bot\">automation-bot</option>\n            </select-ui>\n            <select-ui name=\"verb\" style=\"min-width: 8rem;\">\n              <option value=\"\">All actions</option>\n              <option value=\"create\">create</option>\n              <option value=\"update\">update</option>\n              <option value=\"delete\">delete</option>\n            </select-ui>\n          </row-ui>\n        </header>\n        <section bleed>\n          <table-ui frameless id=\"audit-log-table\"></table-ui>\n        </section>\n        <footer divider>\n          <text-ui color=\"subtle\" size=\"sm\">Showing 8 of 247 events</text-ui>\n          <row-ui slot=\"action\" gap=\"2\">\n            <button-ui text=\"Export\" variant=\"ghost\" size=\"sm\" icon=\"download-simple\"></button-ui>\n            <button-ui text=\"Load older\" variant=\"ghost\" size=\"sm\"></button-ui>\n          </row-ui>\n        </footer>\n      </card-ui>",
   "source": "packages/web-components/patterns/audit-log/audit-log.examples.html",
   "metadata": {
     "domain": "data",
@@ -30,7 +30,7 @@
       "trail"
     ]
   },
-  "captured_at": "2026-07-30T08:15:39.398Z",
+  "captured_at": "2026-08-19T03:56:11.704Z",
   "template": [
     {
       "id": "text",
@@ -135,6 +135,7 @@
     {
       "id": "button",
       "component": "Button",
+      "icon": "download-simple",
       "size": "sm",
       "text": "Export",
       "variant": "ghost"

package/corpus/chunks/auth-card-content.json

@@ -42,7 +42,7 @@
         "auth-invite-actions"
       ],
       "attrs": {},
-      "html": "<section>\n          <col-ui gap=\"6\">\n            <card-ui><!-- nested: auth-invite-team-card --></card-ui>\n\n            <text-ui align=\"center\"\n              >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\n            <col-ui gap=\"2\" size=\"lg\"><!-- nested: auth-invite-actions --></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>"
+      "html": "<section>\n          <col-ui gap=\"6\">\n            <card-ui><!-- nested: auth-invite-team-card --></card-ui>\n\n            <text-ui text-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\n            <col-ui gap=\"2\" size=\"lg\"><!-- nested: auth-invite-actions --></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>"
     },
     {
       "page": "/apps/user-flow/app/auth/account-deleted/account-deleted.contents.html",
@@ -150,7 +150,7 @@
         "auth-mfa-fallback-actions"
       ],
       "attrs": {},
-      "html": "<section>\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\"><!-- nested: auth-mfa-fallback-actions --></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>"
+      "html": "<section>\n          <col-ui gap=\"6\">\n            <col-ui align=\"center\">\n              <otp-input-ui size=\"lg\" length=\"6\"></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\"><!-- nested: auth-mfa-fallback-actions --></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>"
     },
     {
       "page": "/apps/user-flow/app/auth/sign-in/mfa/recovery/recovery.contents.html",
@@ -201,7 +201,7 @@
         "auth-mfa-enrollment-submit"
       ],
       "attrs": {},
-      "html": "<section>\n          <col-ui gap=\"6\">\n            <col-ui align=\"center\" gap=\"3\">\n              <div data-auth-qr aria-label=\"Authenticator QR code (placeholder)\">\n                <icon-ui name=\"qr-code\" size=\"96\"></icon-ui>\n              </div>\n              <col-ui gap=\"2\" align=\"center\">\n                <text-ui color=\"subtle\" size=\"sm\">Or enter manually:</text-ui>\n                <code>JBSW Y3DP EHPK 3PXP</code>\n              </col-ui>\n            </col-ui>\n\n            <col-ui align=\"center\" gap=\"2\">\n              <otp-input-ui size=\"lg\" length=\"6\" autocomplete=\"one-time-code\" name=\"totp\"></otp-input-ui>\n              <text-ui color=\"subtle\" size=\"sm\">From Google Authenticator, 1Password, Authy, or similar.</text-ui>\n            </col-ui>\n\n            <form size=\"lg\" action=\"/site/examples/dashboard\" method=\"get\"><!-- nested: auth-mfa-enrollment-submit --></form>\n\n            <alert-ui variant=\"info\" icon=\"key\">\n              <span slot=\"content\"\n                ><strong>Save your backup codes.</strong> You'll see 10 single-use codes after verifying — store them somewhere safe in case you lose your\n                device.</span\n              >\n            </alert-ui>\n\n            <text-ui text-align=\"center\" color=\"subtle\">\n              <a href=\"/site/examples/dashboard\">Skip for now — set up later in settings</a>\n            </text-ui>\n          </col-ui>\n        </section>"
+      "html": "<section>\n          <col-ui gap=\"6\">\n            <col-ui align=\"center\" gap=\"3\">\n              <div data-auth-qr aria-label=\"Authenticator QR code (placeholder)\">\n                <icon-ui name=\"qr-code\" size=\"96\"></icon-ui>\n              </div>\n              <col-ui gap=\"2\" align=\"center\">\n                <text-ui color=\"subtle\" size=\"sm\">Or enter manually:</text-ui>\n                <code>JBSW Y3DP EHPK 3PXP</code>\n              </col-ui>\n            </col-ui>\n\n            <col-ui align=\"center\" gap=\"2\">\n              <otp-input-ui size=\"lg\" length=\"6\" name=\"totp\"></otp-input-ui>\n              <text-ui color=\"subtle\" size=\"sm\">From Google Authenticator, 1Password, Authy, or similar.</text-ui>\n            </col-ui>\n\n            <form size=\"lg\" action=\"/site/examples/dashboard\" method=\"get\"><!-- nested: auth-mfa-enrollment-submit --></form>\n\n            <alert-ui variant=\"info\" icon=\"key\">\n              <span slot=\"content\"\n                ><strong>Save your backup codes.</strong> You'll see 10 single-use codes after verifying — store them somewhere safe in case you lose your\n                device.</span\n              >\n            </alert-ui>\n\n            <text-ui text-align=\"center\" color=\"subtle\">\n              <a href=\"/site/examples/dashboard\">Skip for now — set up later in settings</a>\n            </text-ui>\n          </col-ui>\n        </section>"
     },
     {
       "page": "/apps/user-flow/app/auth/sign-up/profile/profile.contents.html",
@@ -240,10 +240,10 @@
       "slots": [],
       "nested": [],
       "attrs": {},
-      "html": "<section>\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\"> Already have an account? <a href=\"/site/examples/auth/sign-in\">Sign in</a> </text-ui>\n          </col-ui>\n        </section>"
+      "html": "<section>\n          <col-ui gap=\"6\">\n            <col-ui align=\"center\">\n              <otp-input-ui size=\"lg\" length=\"6\"></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\"> Already have an account? <a href=\"/site/examples/auth/sign-in\">Sign in</a> </text-ui>\n          </col-ui>\n        </section>"
     }
   ],
-  "captured_at": "2026-07-23T20:00:56.043Z",
+  "captured_at": "2026-08-19T03:56:11.704Z",
   "metadata": {
     "domain": "auth",
     "description": "Auth card body section — inner scrollable content area of the centered auth card shell.",

package/corpus/chunks/auth-mfa-recovery.json

@@ -8,7 +8,7 @@
   "attrs": {
     "size": "lg"
   },
-  "html": "<form size=\"lg\">\n              <col-ui gap=\"4\">\n                <input-ui\n                  label=\"Backup code\"\n                  name=\"recovery_code\"\n                  autocomplete=\"one-time-code\"\n                  placeholder=\"abcd-efgh\"\n                  hint=\"Codes look like abcd-efgh. Each code works once.\"\n                  required\n                ></input-ui>\n                <button-ui text=\"Verify and continue\" variant=\"primary\" type=\"submit\"></button-ui>\n              </col-ui>\n            </form>",
+  "html": "<form size=\"lg\">\n              <col-ui gap=\"4\">\n                <input-ui label=\"Backup code\" name=\"recovery_code\" autocomplete=\"one-time-code\" placeholder=\"abcd-efgh\" error=\"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>",
   "source": "apps/user-flow/app/auth/sign-in/mfa/recovery/recovery.contents.html",
   "metadata": {
     "domain": "auth",
@@ -23,13 +23,14 @@
       "alternative"
     ]
   },
-  "captured_at": "2026-07-17T20:08:04.842Z",
+  "captured_at": "2026-08-19T03:56:11.704Z",
   "template": [
     {
       "id": "recovery-code",
       "component": "Input",
       "required": true,
       "autocomplete": "one-time-code",
+      "error": "Codes look like abcd-efgh. Each code works once.",
       "label": "Backup code",
       "name": "recovery_code",
       "placeholder": "abcd-efgh"

package/corpus/chunks/auth-new-password-form.json

@@ -8,7 +8,7 @@
   "attrs": {
     "size": "lg"
   },
-  "html": "<form size=\"lg\">\n              <col-ui gap=\"4\">\n                <input-ui\n                  label=\"New password\"\n                  type=\"password\"\n                  name=\"password\"\n                  autocomplete=\"new-password\"\n                  placeholder=\"••••••••••••\"\n                  minlength=\"12\"\n                  hint=\"At least 12 characters, with a number and a symbol.\"\n                  required\n                ></input-ui>\n                <input-ui\n                  label=\"Confirm password\"\n                  type=\"password\"\n                  name=\"password_confirm\"\n                  autocomplete=\"new-password\"\n                  placeholder=\"••••••••••••\"\n                  minlength=\"12\"\n                  required\n                ></input-ui>\n                <button-ui text=\"Save and sign in\" variant=\"primary\" type=\"submit\"></button-ui>\n              </col-ui>\n            </form>",
+  "html": "<form size=\"lg\">\n              <col-ui gap=\"4\">\n                <input-ui label=\"New password\" type=\"password\" name=\"password\" autocomplete=\"new-password\" placeholder=\"••••••••••••\" minlength=\"12\" error=\"At least 12 characters, with a number and a symbol.\" required></input-ui>\n                <input-ui\n                  label=\"Confirm password\"\n                  type=\"password\"\n                  name=\"password_confirm\"\n                  autocomplete=\"new-password\"\n                  placeholder=\"••••••••••••\"\n                  minlength=\"12\"\n                  required\n                ></input-ui>\n                <button-ui text=\"Save and sign in\" variant=\"primary\" type=\"submit\"></button-ui>\n              </col-ui>\n            </form>",
   "source": "apps/user-flow/app/auth/reset-password/reset-password.contents.html",
   "metadata": {
     "domain": "auth",
@@ -23,7 +23,7 @@
       "strength"
     ]
   },
-  "captured_at": "2026-08-17T04:06:20.963Z",
+  "captured_at": "2026-08-19T03:56:11.704Z",
   "template": [
     {
       "id": "password",
@@ -31,6 +31,7 @@
       "type": "password",
       "required": true,
       "autocomplete": "new-password",
+      "error": "At least 12 characters, with a number and a symbol.",
       "label": "New password",
       "minlength": 12,
       "name": "password",

package/corpus/chunks/auth-new-password.json

@@ -37,7 +37,7 @@
       "layout": "card"
     }
   },
-  "captured_at": "2026-08-17T04:06:20.963Z",
+  "captured_at": "2026-08-19T03:56:11.704Z",
   "template": [
     {
       "id": "adia-mark",
@@ -103,6 +103,7 @@
       "type": "password",
       "required": true,
       "autocomplete": "new-password",
+      "error": "At least 12 characters, with a number and a symbol.",
       "label": "New password",
       "minlength": 12,
       "name": "password",

package/corpus/chunks/auth-profile-form.json

@@ -8,7 +8,7 @@
   "attrs": {
     "size": "lg"
   },
-  "html": "<form size=\"lg\">\n              <col-ui gap=\"4\">\n                <input-ui\n                  label=\"Full name\"\n                  name=\"name\"\n                  autocomplete=\"name\"\n                  placeholder=\"Jane Doe\"\n                  hint=\"Shown to teammates and on shared work.\"\n                  required\n                ></input-ui>\n                <input-ui\n                  label=\"Display name\"\n                  name=\"username\"\n                  autocomplete=\"username\"\n                  prefix=\"@\"\n                  placeholder=\"janedoe\"\n                  hint=\"Used for @mentions and signed comments.\"\n                  required\n                ></input-ui>\n                <button-ui text=\"Continue\" variant=\"primary\" type=\"submit\"></button-ui>\n              </col-ui>\n            </form>",
+  "html": "<form size=\"lg\">\n              <col-ui gap=\"4\">\n                <input-ui label=\"Full name\" name=\"name\" autocomplete=\"name\" placeholder=\"Jane Doe\" error=\"Shown to teammates and on shared work.\" required></input-ui>\n                <input-ui label=\"Display name\" name=\"username\" autocomplete=\"username\" prefix=\"@\" placeholder=\"janedoe\" error=\"Used for @mentions and signed comments.\" required></input-ui>\n                <button-ui text=\"Continue\" variant=\"primary\" type=\"submit\"></button-ui>\n              </col-ui>\n            </form>",
   "source": "apps/user-flow/app/auth/sign-up/profile/profile.contents.html",
   "metadata": {
     "domain": "auth",
@@ -23,13 +23,14 @@
       "onboarding"
     ]
   },
-  "captured_at": "2026-07-17T20:08:04.842Z",
+  "captured_at": "2026-08-19T03:56:11.704Z",
   "template": [
     {
       "id": "name",
       "component": "Input",
       "required": true,
       "autocomplete": "name",
+      "error": "Shown to teammates and on shared work.",
       "label": "Full name",
       "name": "name",
       "placeholder": "Jane Doe"
@@ -39,6 +40,7 @@
       "component": "Input",
       "required": true,
       "autocomplete": "username",
+      "error": "Used for @mentions and signed comments.",
       "label": "Display name",
       "name": "username",
       "placeholder": "janedoe",

package/corpus/chunks/auth-profile-setup.json

@@ -27,7 +27,7 @@
       "avatar"
     ]
   },
-  "captured_at": "2026-08-06T10:45:35.201Z",
+  "captured_at": "2026-08-19T03:56:11.704Z",
   "template": [
     {
       "id": "adia-mark",
@@ -82,6 +82,7 @@
       "component": "Input",
       "required": true,
       "autocomplete": "name",
+      "error": "Shown to teammates and on shared work.",
       "label": "Full name",
       "name": "name",
       "placeholder": "Jane Doe"
@@ -91,6 +92,7 @@
       "component": "Input",
       "required": true,
       "autocomplete": "username",
+      "error": "Used for @mentions and signed comments.",
       "label": "Display name",
       "name": "username",
       "placeholder": "janedoe",

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

@@ -8,7 +8,7 @@
   "attrs": {
     "raw": ""
   },
-  "html": "<card-ui raw\n        style=\"max-width: 32rem\">\n        <header>\n          <col-ui align=\"center\" gap=\"1\">\n            <a href=\"/\" aria-label=\"AdiaUI home\">\n              <adia-mark-ui style=\"--adia-mark-size: 5rem\" aria-hidden=\"true\"></adia-mark-ui>\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            <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\"> Didn't receive it? <a href=\"#\">Resend in 30s</a> </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\"> Don't have an account? <a href=\"/site/examples/auth/sign-up\">Sign up</a> </text-ui>\n          </col-ui>\n        </section>\n      </card-ui>",
+  "html": "<card-ui raw\n        style=\"max-width: 32rem\">\n        <header>\n          <col-ui align=\"center\" gap=\"1\">\n            <a href=\"/\" aria-label=\"AdiaUI home\">\n              <adia-mark-ui style=\"--adia-mark-size: 5rem\" aria-hidden=\"true\"></adia-mark-ui>\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            <col-ui align=\"center\">\n              <otp-input-ui size=\"lg\" length=\"6\"></otp-input-ui>\n            </col-ui>\n\n            <text-ui text-align=\"center\" color=\"subtle\"> Didn't receive it? <a href=\"#\">Resend in 30s</a> </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\"> Don't have an account? <a href=\"/site/examples/auth/sign-up\">Sign up</a> </text-ui>\n          </col-ui>\n        </section>\n      </card-ui>",
   "source": "apps/user-flow/app/auth/sign-in/otp/verify/verify.contents.html",
   "metadata": {
     "domain": "auth",
@@ -35,7 +35,7 @@
       "layout": "card"
     }
   },
-  "captured_at": "2026-08-15T04:10:49.553Z",
+  "captured_at": "2026-08-19T03:56:11.704Z",
   "template": [
     {
       "id": "adia-mark",

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

@@ -28,7 +28,7 @@
       "phone"
     ]
   },
-  "captured_at": "2026-08-06T10:45:35.201Z",
+  "captured_at": "2026-08-19T03:56:11.704Z",
   "template": [
     {
       "id": "adia-mark",
@@ -83,6 +83,7 @@
       "component": "Input",
       "required": true,
       "autocomplete": "one-time-code",
+      "error": "Codes look like abcd-efgh. Each code works once.",
       "label": "Backup code",
       "name": "recovery_code",
       "placeholder": "abcd-efgh"

package/corpus/chunks/auth-team-invite.json

@@ -28,7 +28,7 @@
       "accept"
     ]
   },
-  "captured_at": "2026-08-06T10:45:35.201Z",
+  "captured_at": "2026-08-19T03:56:11.704Z",
   "template": [
     {
       "id": "adia-mark",
@@ -184,6 +184,7 @@
     {
       "id": "text-7",
       "component": "Text",
+      "text-align": "center",
       "textContent": "You'll sign in as . As a Member you can read and write all team workspaces.",
       "children": [
         "text-8"

package/corpus/chunks/bulk-action-toolbar-floating.json

@@ -9,7 +9,7 @@
     "data-section": "",
     "data-property": "floating-variant"
   },
-  "html": "<card-ui raw>\n    <section bleed>\n      <table-toolbar-ui id=\"pat-bulk-float-default\" for=\"pat-bulk-float-table\" text=\"Resources\" count=\"12\" no-filter no-sort no-columns></table-toolbar-ui>\n\n      <div data-table-scroll>\n        <table-ui frameless id=\"pat-bulk-float-table\" selectable sortable striped></table-ui>\n\n        <anchor-bar-ui id=\"pat-bulk-float-bar\" anchor=\"bottom\">\n          <!-- align=\"space-between\" pushes the trailing group right —\n               NOT a flex-grow spacer span or an auto margin on a content\n               item. toolbar-ui's overflow reflow sums each top-level\n               child's RENDERED width to decide what fits; any child that\n               absorbs free space (flex-grow, or an auto margin resolved\n               to real pixels post-layout) has already expanded to fill\n               that space by the time it's measured, so the sum always\n               reads \"full\" and spuriously spills content. `justify-content`\n               only repositions flex items — it doesn't touch their\n               individual widths (toolbar-ui's own CSS pins every direct\n               child at `flex: 0 0 auto`) — so grouping into two\n               `<toolbar-group-ui>` atoms and letting `align=\"space-between\"`\n               do the pushing keeps the reflow's width sum accurate. -->\n          <toolbar-ui role=\"toolbar\" aria-label=\"Bulk actions\" align=\"space-between\">\n            <toolbar-group-ui>\n              <text-ui strong aria-live=\"polite\" data-bulk-float-count>0 selected</text-ui>\n              <span data-bulk-controls></span>\n            </toolbar-group-ui>\n            <toolbar-group-ui>\n              <button-ui icon=\"archive\" icon-only aria-label=\"Archive\" variant=\"ghost\" size=\"sm\" data-bulk-action=\"archive\"></button-ui>\n              <button-ui icon=\"download-simple\" icon-only aria-label=\"Export\" variant=\"ghost\" size=\"sm\" data-bulk-action=\"export\"></button-ui>\n              <button-ui icon=\"folder-simple\" icon-only aria-label=\"Move\" variant=\"ghost\" size=\"sm\" data-bulk-action=\"move\"></button-ui>\n              <divider-ui vertical></divider-ui>\n              <button-ui icon=\"trash\" icon-only aria-label=\"Delete\" variant=\"ghost\" size=\"sm\" data-bulk-action=\"delete\"></button-ui>\n              <divider-ui vertical></divider-ui>\n              <button-ui text=\"Clear\" variant=\"ghost\" size=\"sm\" data-bulk-clear></button-ui>\n            </toolbar-group-ui>\n          </toolbar-ui>\n        </anchor-bar-ui>\n      </div>\n    </section>\n  </card-ui>",
+  "html": "<card-ui raw>\n    <section bleed>\n      <table-toolbar-ui id=\"pat-bulk-float-default\" for=\"pat-bulk-float-table\" text=\"Resources\" count=\"12\" no-filter no-sort no-columns></table-toolbar-ui>\n\n      <div data-table-scroll>\n        <table-ui frameless id=\"pat-bulk-float-table\" selectable sortable striped></table-ui>\n\n        <anchor-bar-ui id=\"pat-bulk-float-bar\" anchor=\"bottom\">\n          <!-- align=\"space-between\" pushes the trailing group right —\n               NOT a flex-grow spacer span or an auto margin on a content\n               item. toolbar-ui's overflow reflow sums each top-level\n               child's RENDERED width to decide what fits; any child that\n               absorbs free space (flex-grow, or an auto margin resolved\n               to real pixels post-layout) has already expanded to fill\n               that space by the time it's measured, so the sum always\n               reads \"full\" and spuriously spills content. `justify-content`\n               only repositions flex items — it doesn't touch their\n               individual widths (toolbar-ui's own CSS pins every direct\n               child at `flex: 0 0 auto`) — so grouping into two\n               `<toolbar-group-ui>` atoms and letting `align=\"space-between\"`\n               do the pushing keeps the reflow's width sum accurate. -->\n          <toolbar-ui role=\"toolbar\" aria-label=\"Bulk actions\" align=\"space-between\">\n            <toolbar-group-ui>\n              <text-ui strong aria-live=\"polite\" data-bulk-float-count>0 selected</text-ui>\n              <span data-bulk-controls></span>\n            </toolbar-group-ui>\n            <toolbar-group-ui>\n              <button-ui icon=\"archive\" aria-label=\"Archive\" variant=\"ghost\" size=\"sm\" data-bulk-action=\"archive\"></button-ui>\n              <button-ui icon=\"download-simple\" aria-label=\"Export\" variant=\"ghost\" size=\"sm\" data-bulk-action=\"export\"></button-ui>\n              <button-ui icon=\"folder-simple\" aria-label=\"Move\" variant=\"ghost\" size=\"sm\" data-bulk-action=\"move\"></button-ui>\n              <divider-ui vertical></divider-ui>\n              <button-ui icon=\"trash\" aria-label=\"Delete\" variant=\"ghost\" size=\"sm\" data-bulk-action=\"delete\"></button-ui>\n              <divider-ui vertical></divider-ui>\n              <button-ui text=\"Clear\" variant=\"ghost\" size=\"sm\" data-bulk-clear></button-ui>\n            </toolbar-group-ui>\n          </toolbar-ui>\n        </anchor-bar-ui>\n      </div>\n    </section>\n  </card-ui>",
   "source": "packages/web-components/patterns/bulk-action-toolbar/bulk-action-toolbar.examples.html",
   "metadata": {
     "domain": "data",
@@ -37,7 +37,7 @@
       "notion"
     ]
   },
-  "captured_at": "2026-08-12T16:30:40.372Z",
+  "captured_at": "2026-08-19T03:56:11.704Z",
   "template": [
     {
       "id": "pat-bulk-float-default",

package/corpus/chunks/card-with-sparkline.json

@@ -9,7 +9,7 @@
     "data-artifact-item": "",
     "data-artifact-label": "card with sparkline chart"
   },
-  "html": "<card-ui style=\"max-width:320px\">\n        <header>\n          <h3>Weekly signups</h3>\n          <text-ui slot=\"description\">Last 7 days</text-ui>\n        </header>\n        <section>\n          <col-ui gap=\"2\">\n            <text-ui variant=\"display\">284</text-ui>\n            <chart-ui type=\"line\" height=\"60\"\n              data-stream-src=\"\"\n              style=\"--chart-line-color:var(--md-sys-color-primary)\">\n            </chart-ui>\n          </col-ui>\n        </section>\n      </card-ui>",
+  "html": "<card-ui style=\"max-width:320px\">\n        <header>\n          <h3>Weekly signups</h3>\n          <text-ui slot=\"description\">Last 7 days</text-ui>\n        </header>\n        <section>\n          <col-ui gap=\"2\">\n            <text-ui variant=\"display\">284</text-ui>\n            <chart-ui type=\"line\" data-stream-src=\"\" style=\"--chart-line-color:var(--md-sys-color-primary); height: 60px\">\n            </chart-ui>\n          </col-ui>\n        </section>\n      </card-ui>",
   "source": "packages/web-components/components/card/card.examples.html",
   "metadata": {
     "domain": "data",
@@ -28,7 +28,7 @@
       "mini-chart"
     ]
   },
-  "captured_at": "2026-07-17T20:08:04.842Z",
+  "captured_at": "2026-08-19T03:56:11.704Z",
   "template": [
     {
       "id": "text",

package/corpus/chunks/chart-in-card-full-bleed-bar-tall.json

@@ -0,0 +1,66 @@
+{
+  "name": "chart-in-card-full-bleed-bar-tall",
+  "kind": "block",
+  "primary": "card-ui",
+  "page": "/packages/web-components/patterns/chart-in-card/chart-in-card.examples.html",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "padding": "none"
+  },
+  "html": "<card-ui padding=\"none\" style=\"max-width:220px;\">\n        <section>\n          <chart-ui id=\"pat-bleed-bar-tall\" type=\"bar\" ratio=\"2:3\" x=\"day\" y=\"sessions\"></chart-ui>\n        </section>\n      </card-ui>",
+  "source": "packages/web-components/patterns/chart-in-card/chart-in-card.examples.html",
+  "metadata": {
+    "domain": "dashboard",
+    "description": "Full-bleed bar chart card pinned to the 2:3 tall ratio — Sessions by day, rendered in horizontal-bar orientation (category on Y) for the narrow column, edge-to-edge against the card's own quiet container-low background.",
+    "keywords": [
+      "chart",
+      "card",
+      "bar",
+      "full-bleed",
+      "edge-to-edge",
+      "sessions",
+      "tall",
+      "ratio",
+      "horizontal",
+      "padding",
+      "none",
+      "dashboard",
+      "analytics",
+      "premium"
+    ]
+  },
+  "captured_at": "2026-08-18T16:00:40.141Z",
+  "template": [
+    {
+      "id": "pat-bleed-bar-tall",
+      "component": "Chart",
+      "type": "bar",
+      "ratio": "2:3",
+      "x": "day",
+      "y": "sessions"
+    },
+    {
+      "id": "section",
+      "component": "Section",
+      "children": [
+        "column"
+      ]
+    },
+    {
+      "id": "column",
+      "component": "Column",
+      "children": [
+        "pat-bleed-bar-tall"
+      ]
+    },
+    {
+      "id": "root",
+      "component": "Card",
+      "padding": "none",
+      "children": [
+        "section"
+      ]
+    }
+  ]
+}

package/corpus/chunks/chart-in-card-full-bleed-bar-wide.json

@@ -0,0 +1,65 @@
+{
+  "name": "chart-in-card-full-bleed-bar-wide",
+  "kind": "block",
+  "primary": "card-ui",
+  "page": "/packages/web-components/patterns/chart-in-card/chart-in-card.examples.html",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "padding": "none"
+  },
+  "html": "<card-ui padding=\"none\" style=\"max-width:420px;\">\n        <section>\n          <chart-ui id=\"pat-bleed-bar-wide\" type=\"bar\" ratio=\"3:2\" x=\"month\" y=\"revenue\"></chart-ui>\n        </section>\n      </card-ui>",
+  "source": "packages/web-components/patterns/chart-in-card/chart-in-card.examples.html",
+  "metadata": {
+    "domain": "dashboard",
+    "description": "Full-bleed bar chart card pinned to the 3:2 wide ratio — Revenue by month, edge-to-edge against the card's own quiet container-low background, no outer card padding.",
+    "keywords": [
+      "chart",
+      "card",
+      "bar",
+      "full-bleed",
+      "edge-to-edge",
+      "revenue",
+      "wide",
+      "ratio",
+      "padding",
+      "none",
+      "dashboard",
+      "analytics",
+      "premium"
+    ]
+  },
+  "captured_at": "2026-08-18T16:00:40.141Z",
+  "template": [
+    {
+      "id": "pat-bleed-bar-wide",
+      "component": "Chart",
+      "type": "bar",
+      "ratio": "3:2",
+      "x": "month",
+      "y": "revenue"
+    },
+    {
+      "id": "section",
+      "component": "Section",
+      "children": [
+        "column"
+      ]
+    },
+    {
+      "id": "column",
+      "component": "Column",
+      "children": [
+        "pat-bleed-bar-wide"
+      ]
+    },
+    {
+      "id": "root",
+      "component": "Card",
+      "padding": "none",
+      "children": [
+        "section"
+      ]
+    }
+  ]
+}

package/corpus/chunks/chart-in-card-full-bleed-legend-composed-square.json

@@ -0,0 +1,110 @@
+{
+  "name": "chart-in-card-full-bleed-legend-composed-square",
+  "kind": "block",
+  "primary": "card-ui",
+  "page": "/packages/web-components/patterns/chart-in-card/chart-in-card.examples.html",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "padding": "none"
+  },
+  "html": "<card-ui padding=\"none\" style=\"max-width:320px;\">\n        <header>\n          <span slot=\"heading\"><h3>Revenue vs. growth</h3></span>\n        </header>\n        <section>\n          <chart-ui id=\"pat-fb-legend-11-chart\" type=\"composed\" ratio=\"1:1\" x=\"quarter\" y=\"revenue,growth\"></chart-ui>\n        </section>\n        <section>\n          <chart-legend-ui for=\"pat-fb-legend-11-chart\"></chart-legend-ui>\n        </section>\n      </card-ui>",
+  "source": "packages/web-components/patterns/chart-in-card/chart-in-card.examples.html",
+  "metadata": {
+    "domain": "dashboard",
+    "description": "Full-bleed composed bar+line chart card pinned to the 1:1 square ratio with a mirrored 2-column grid legend below — Revenue bars with a de-emphasized Growth line overlay, edge-to-edge against the card's own quiet container-low background.",
+    "keywords": [
+      "chart",
+      "card",
+      "composed",
+      "full-bleed",
+      "edge-to-edge",
+      "legend",
+      "grid",
+      "square",
+      "ratio",
+      "revenue",
+      "growth",
+      "deemphasized",
+      "dashboard",
+      "analytics",
+      "premium"
+    ]
+  },
+  "captured_at": "2026-08-18T21:33:00.757Z",
+  "template": [
+    {
+      "id": "text-2",
+      "component": "Text",
+      "variant": "heading",
+      "textContent": "Revenue vs. growth"
+    },
+    {
+      "id": "text",
+      "component": "Text",
+      "variant": "body",
+      "slot": "heading",
+      "children": [
+        "text-2"
+      ]
+    },
+    {
+      "id": "header",
+      "component": "Header",
+      "children": [
+        "text"
+      ]
+    },
+    {
+      "id": "pat-fb-legend-11-chart",
+      "component": "Chart",
+      "type": "composed",
+      "ratio": "1:1",
+      "x": "quarter",
+      "y": "revenue,growth"
+    },
+    {
+      "id": "section",
+      "component": "Section",
+      "children": [
+        "pat-fb-legend-11-chart"
+      ]
+    },
+    {
+      "id": "chart-legend",
+      "component": "ChartLegend",
+      "for": "pat-fb-legend-11-chart"
+    },
+    {
+      "id": "section-2",
+      "component": "Section",
+      "children": [
+        "chart-legend"
+      ]
+    },
+    {
+      "id": "column",
+      "component": "Column",
+      "children": [
+        "section",
+        "section-2"
+      ]
+    },
+    {
+      "id": "section-3",
+      "component": "Section",
+      "children": [
+        "column"
+      ]
+    },
+    {
+      "id": "root",
+      "component": "Card",
+      "padding": "none",
+      "children": [
+        "header",
+        "section-3"
+      ]
+    }
+  ]
+}