@adia-ai/a2ui-corpus 0.0.3 → 0.0.5

package/chunks/embed-default.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"default\" data-chunk=\"embed-default\">\n  <h2 variant=\"section\">Default</h2>\n  <p data-note>Basic embed with default height of 400px and 100% width.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"default\">\n      <embed-ui src=\"https://example.com\"></embed-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/embed/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/embed-height.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"height\" data-chunk=\"embed-height\">\n  <h2 variant=\"section\">height</h2>\n  <p data-note>Custom fixed height.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"height=250\">\n      <embed-ui src=\"https://example.com\" height=\"250\"></embed-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"height=500\">\n      <embed-ui src=\"https://example.com\" height=\"500\"></embed-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/embed/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/embed-src.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"src\" data-chunk=\"embed-src\">\n  <h2 variant=\"section\">src</h2>\n  <p data-note>URL of the embedded resource (iframe/video/image).</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"example.com\"><embed-ui src=\"https://example.com\" style=\"width:240px;height:160px;\"></embed-ui></div>\n    <div data-artifact-item data-artifact-label=\"about:blank\"><embed-ui src=\"about:blank\" style=\"width:240px;height:160px;\"></embed-ui></div>\n  </div>\n</section>",
   "source": "site/pages/components/embed/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/embed-width.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"width\" data-chunk=\"embed-width\">\n  <h2 variant=\"section\">width</h2>\n  <p data-note>Explicit width of the embedded frame.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"200\"><embed-ui src=\"about:blank\" width=\"200\" style=\"height:120px;\"></embed-ui></div>\n    <div data-artifact-item data-artifact-label=\"320\"><embed-ui src=\"about:blank\" width=\"320\" style=\"height:120px;\"></embed-ui></div>\n    <div data-artifact-item data-artifact-label=\"480\"><embed-ui src=\"about:blank\" width=\"480\" style=\"height:120px;\"></embed-ui></div>\n  </div>\n</section>",
   "source": "site/pages/components/embed/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/empty-state-action.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"action\" data-chunk=\"empty-state-action\">\n  <h2 variant=\"section\">With Action</h2>\n  <p data-note>Action slot for a call-to-action button.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"with action\">\n      <empty-state-ui icon=\"plus-circle\" heading=\"No projects\" description=\"Create your first project to get started.\">\n        <button-ui slot=\"action\" text=\"Create Project\" variant=\"primary\"></button-ui>\n      </empty-state-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/empty-state/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/empty-state-basic.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"basic\" data-chunk=\"empty-state-basic\">\n  <h2 variant=\"section\">Basic</h2>\n  <p data-note>Heading and description only.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"basic\">\n      <empty-state-ui heading=\"No items\" description=\"There are no items to display yet.\"></empty-state-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/empty-state/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/empty-state-description.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"description\" data-chunk=\"empty-state-description\">\n  <h2 variant=\"section\">description</h2>\n  <p data-note>Supporting text rendered below the heading.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"short\"><empty-state-ui heading=\"No items\" description=\"Get started by creating your first item.\" icon=\"plus\"></empty-state-ui></div>\n    <div data-artifact-item data-artifact-label=\"longer\"><empty-state-ui heading=\"All clear\" description=\"You have no pending notifications. We'll let you know as soon as something new arrives.\" icon=\"check\"></empty-state-ui></div>\n  </div>\n</section>",
   "source": "site/pages/components/empty-state/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/empty-state-error.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"error\" data-chunk=\"empty-state-error\">\n  <h2 variant=\"section\">Error State</h2>\n  <p data-note>Error with a retry action.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"error + retry\">\n      <empty-state-ui icon=\"warning-circle\" heading=\"Something went wrong\" description=\"We couldn't load your data. Please try again.\">\n        <button-ui slot=\"action\" text=\"Retry\" variant=\"outline\" icon=\"arrow-clockwise\"></button-ui>\n      </empty-state-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/empty-state/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/empty-state-heading.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"heading\" data-chunk=\"empty-state-heading\">\n  <h2 variant=\"section\">heading</h2>\n  <p data-note>Primary heading text for the empty state.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"No results\"><empty-state-ui heading=\"No results\" icon=\"magnifying-glass\"></empty-state-ui></div>\n    <div data-artifact-item data-artifact-label=\"Inbox zero\"><empty-state-ui heading=\"Inbox zero\" icon=\"inbox\"></empty-state-ui></div>\n    <div data-artifact-item data-artifact-label=\"Nothing here yet\"><empty-state-ui heading=\"Nothing here yet\" icon=\"folder\"></empty-state-ui></div>\n  </div>\n</section>",
   "source": "site/pages/components/empty-state/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/empty-state-icon.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"icon\" data-chunk=\"empty-state-icon\">\n  <h2 variant=\"section\">With Icon</h2>\n  <p data-note>Leading icon for visual context.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"search empty\">\n      <empty-state-ui icon=\"magnifying-glass\" heading=\"No results\" description=\"Try adjusting your search or filter criteria.\"></empty-state-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"files empty\">\n      <empty-state-ui icon=\"folder-open\" heading=\"No files\" description=\"Upload a file to get started.\"></empty-state-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/empty-state/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/error-404-actions.json

@@ -11,5 +11,5 @@
   },
   "html": "<col-ui gap=\"2\" data-chunk=\"error-404-actions\" size=\"lg\">\n              <button-ui text=\"Go to home\" variant=\"primary\" icon=\"house\" onclick=\"location.href='/'\"></button-ui>\n              <button-ui text=\"Search docs\" variant=\"outline\" icon=\"magnifying-glass\" onclick=\"location.href='/site/'\"></button-ui>\n            </col-ui>",
   "source": "site/pages/examples/errors/404/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/error-404.json

@@ -14,5 +14,5 @@
   },
   "html": "<card-ui raw data-chunk=\"error-404\" 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>404 — Page not found</h1>\n            <text-ui>We couldn't find that page. It may have moved, been renamed, or never existed.</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=\"map-trifold\">\n              <span slot=\"content\">Path: <code>/that/route/that/wasnt/found</code></span>\n            </alert-ui>\n\n            <col-ui gap=\"2\" data-chunk=\"error-404-actions\" size=\"lg\">\n              <button-ui text=\"Go to home\" variant=\"primary\" icon=\"house\" onclick=\"location.href='/'\"></button-ui>\n              <button-ui text=\"Search docs\" variant=\"outline\" icon=\"magnifying-glass\" onclick=\"location.href='/site/'\"></button-ui>\n            </col-ui>\n\n            <text-ui text-align=\"center\" color=\"subtle\" size=\"sm\">\n              Trace ID: <code>req_18d2f7c4</code>\n            </text-ui>\n          </col-ui>\n        </section>\n      </card-ui>",
   "source": "site/pages/examples/errors/404/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/error-500-actions.json

@@ -11,5 +11,5 @@
   },
   "html": "<col-ui gap=\"2\" data-chunk=\"error-500-actions\" size=\"lg\">\n              <button-ui text=\"Try again\" variant=\"primary\" icon=\"arrows-clockwise\" onclick=\"location.reload()\"></button-ui>\n              <button-ui text=\"View status page\" variant=\"outline\" icon=\"pulse\" onclick=\"window.open('https://status.adia-ui.app', '_blank')\"></button-ui>\n              <button-ui text=\"Contact support\" variant=\"outline\" icon=\"lifebuoy\" onclick=\"location.href='/site/examples/help'\"></button-ui>\n            </col-ui>",
   "source": "site/pages/examples/errors/500/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/error-500.json

@@ -14,5 +14,5 @@
   },
   "html": "<card-ui raw data-chunk=\"error-500\" 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>500 — Something went wrong</h1>\n            <text-ui>Our servers couldn't process your request. The error has been logged automatically; we're already looking into it.</text-ui>\n          </col-ui>\n        </header>\n\n        <section data-chunk=\"auth-card-content\">\n          <col-ui gap=\"6\">\n            <alert-ui variant=\"warning\" icon=\"warning\">\n              <span slot=\"content\">Error reference: <code>err_a8f2d910</code> · Reported 12:42 UTC. Include this ID when contacting support.</span>\n            </alert-ui>\n\n            <col-ui gap=\"2\" data-chunk=\"error-500-actions\" size=\"lg\">\n              <button-ui text=\"Try again\" variant=\"primary\" icon=\"arrows-clockwise\" onclick=\"location.reload()\"></button-ui>\n              <button-ui text=\"View status page\" variant=\"outline\" icon=\"pulse\" onclick=\"window.open('https://status.adia-ui.app', '_blank')\"></button-ui>\n              <button-ui text=\"Contact support\" variant=\"outline\" icon=\"lifebuoy\" onclick=\"location.href='/site/examples/help'\"></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/errors/500/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/error-maintenance-actions.json

@@ -11,5 +11,5 @@
   },
   "html": "<col-ui gap=\"2\" data-chunk=\"error-maintenance-actions\" size=\"lg\">\n              <button-ui text=\"View live status\" variant=\"primary\" icon=\"pulse\" onclick=\"window.open('https://status.adia-ui.app', '_blank')\"></button-ui>\n              <button-ui text=\"Subscribe to updates\" variant=\"outline\" icon=\"bell\"></button-ui>\n            </col-ui>",
   "source": "site/pages/examples/errors/maintenance/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/error-maintenance.json

@@ -14,5 +14,5 @@
   },
   "html": "<card-ui raw data-chunk=\"error-maintenance\" 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>We'll be right back</h1>\n            <text-ui>AdiaUI is undergoing scheduled maintenance to roll out a database upgrade. Estimated time to recover: <strong>12:30 UTC</strong> — about 25 minutes from now.</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=\"wrench\">\n              <span slot=\"content\">Window: <strong>12:00 – 12:30 UTC</strong> · Affected: web app, API, webhooks. Status pages remain online during the window.</span>\n            </alert-ui>\n\n            <col-ui gap=\"2\" data-chunk=\"error-maintenance-actions\" size=\"lg\">\n              <button-ui text=\"View live status\" variant=\"primary\" icon=\"pulse\" onclick=\"window.open('https://status.adia-ui.app', '_blank')\"></button-ui>\n              <button-ui text=\"Subscribe to updates\" variant=\"outline\" icon=\"bell\"></button-ui>\n            </col-ui>\n\n            <text-ui text-align=\"center\" color=\"subtle\" size=\"sm\">\n              Started 12:05 UTC\n            </text-ui>\n          </col-ui>\n        </section>\n      </card-ui>",
   "source": "site/pages/examples/errors/maintenance/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/field-controls.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"controls\" data-chunk=\"field-controls\">\n  <h2 variant=\"section\">Any form control</h2>\n  <p data-note>Field wraps the control of your choice — select, textarea, switch, check, radio, slider. The control's own <code>label</code> attr is no longer required.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"Select\">\n      <field-ui label=\"Priority\">\n        <select-ui>\n          <option value=\"low\">Low</option>\n          <option value=\"med\" selected>Medium</option>\n          <option value=\"high\">High</option>\n        </select-ui>\n      </field-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"Textarea\">\n      <field-ui label=\"Notes\">\n        <textarea-ui rows=\"3\" placeholder=\"Anything we should know?\"></textarea-ui>\n      </field-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"Switch (inline)\">\n      <field-ui inline label=\"Email notifications\">\n        <switch-ui checked></switch-ui>\n      </field-ui>\n    </div>\n  </div>\n</section>",
   "source": "site/pages/components/field/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/field-default.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"default\" data-chunk=\"field-default\">\n  <h2 variant=\"section\">Default layout</h2>\n  <p data-note>Label stacked above the control. Trailing aligns with the label (right); action aligns with the control (right).</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"Just label + control\">\n      <field-ui label=\"Email\">\n        <input-ui type=\"email\" placeholder=\"you@example.com\"></input-ui>\n      </field-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"+ trailing hint\">\n      <field-ui label=\"Email\">\n        <input-ui type=\"email\" placeholder=\"you@example.com\"></input-ui>\n        <span slot=\"trailing\">Required</span>\n      </field-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"+ trailing + action\">\n      <field-ui label=\"API key\">\n        <input-ui type=\"text\" value=\"sk-abcd-1234-efgh\"></input-ui>\n        <span slot=\"trailing\">Keep secret</span>\n        <button-ui slot=\"action\" icon=\"copy\" variant=\"ghost\" aria-label=\"Copy\"></button-ui>\n      </field-ui>\n    </div>\n  </div>\n</section>",
   "source": "site/pages/components/field/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/field-error.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"error\" data-chunk=\"field-error\">\n  <h2 variant=\"section\">Error</h2>\n  <p data-note>Validation message — takes precedence over <code>hint</code>, rendered in danger style with <code>role=\"alert\"</code> so assistive tech announces state changes.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"Error only\">\n      <field-ui label=\"Email\" error=\"Enter a valid email address.\">\n        <input-ui type=\"email\" value=\"not-an-email\"></input-ui>\n      </field-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"Error overrides hint\">\n      <field-ui label=\"Password\" required hint=\"8+ chars recommended\" error=\"Password must be at least 8 characters.\">\n        <input-ui type=\"password\" value=\"abc\"></input-ui>\n      </field-ui>\n    </div>\n  </div>\n</section>",
   "source": "site/pages/components/field/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/field-hint.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"hint\" data-chunk=\"field-hint\">\n  <h2 variant=\"section\">Hint</h2>\n  <p data-note>Help text below the control in caption style. Wired into the slotted control's <code>aria-describedby</code> so screen readers announce it.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"Inline hint\">\n      <field-ui label=\"Email\" hint=\"We'll never share your email with third parties.\">\n        <input-ui type=\"email\" placeholder=\"you@example.com\"></input-ui>\n      </field-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"With required marker + hint\">\n      <field-ui label=\"Password\" required hint=\"8 or more characters. Mix of letters, numbers, and symbols.\">\n        <input-ui type=\"password\"></input-ui>\n      </field-ui>\n    </div>\n  </div>\n</section>",
   "source": "site/pages/components/field/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/field-inline.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"inline\" data-chunk=\"field-inline\">\n  <h2 variant=\"section\">Inline layout</h2>\n  <p data-note>Set <code>inline</code> to collapse to a single row. Useful for short-value fields, preferences lists, and settings rows.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"Label + input\">\n      <field-ui inline label=\"Search\">\n        <input-ui type=\"search\" placeholder=\"Type a command…\"></input-ui>\n      </field-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"+ trailing kbd\">\n      <field-ui inline label=\"Search\">\n        <input-ui type=\"search\" placeholder=\"Type a command…\"></input-ui>\n        <kbd-ui slot=\"trailing\">⌘K</kbd-ui>\n      </field-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"+ trailing + action\">\n      <field-ui inline label=\"Filter\">\n        <input-ui placeholder=\"Name or tag\"></input-ui>\n        <span slot=\"trailing\">Results: 12</span>\n        <button-ui slot=\"action\" icon=\"x\" variant=\"ghost\" aria-label=\"Clear\"></button-ui>\n      </field-ui>\n    </div>\n  </div>\n</section>",
   "source": "site/pages/components/field/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/field-no-label.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"no-label\" data-chunk=\"field-no-label\">\n  <h2 variant=\"section\">No label</h2>\n  <p data-note>Omit <code>label</code> to use <code>field-ui</code> purely as a layout wrapper for a control plus optional trailing/action regions.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"Search + action\">\n      <field-ui>\n        <input-ui type=\"search\" placeholder=\"Search…\"></input-ui>\n        <button-ui slot=\"action\" icon=\"magnifying-glass\" variant=\"primary\" aria-label=\"Search\"></button-ui>\n      </field-ui>\n    </div>\n  </div>\n</section>",
   "source": "site/pages/components/field/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/field-required.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"required\" data-chunk=\"field-required\">\n  <h2 variant=\"section\">Required marker</h2>\n  <p data-note>Set <code>required</code> on the field to render a red <code>*</code> after the label. The attribute is visual-only — the slotted control's own <code>required</code> attribute drives actual form validation.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"Stacked\">\n      <field-ui label=\"Full name\" required>\n        <input-ui type=\"text\"></input-ui>\n      </field-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"Inline\">\n      <field-ui inline label=\"Email\" required>\n        <input-ui type=\"email\"></input-ui>\n      </field-ui>\n    </div>\n  </div>\n</section>",
   "source": "site/pages/components/field/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/filter-bar-active-filters.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"active-filters\" data-chunk=\"filter-bar-active-filters\">\n  <h2 variant=\"section\">Active filters + Add filter</h2>\n  <p data-note>Chips show each active filter. The trailing button opens a popover of available facets.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"active filters\">\n      <card-ui>\n        <section>\n          <row-ui gap=\"2\" align=\"center\" wrap>\n            <text-ui color=\"subtle\" weight=\"semibold\">Filters:</text-ui>\n            <tag-ui text=\"Status: Active\" removable></tag-ui>\n            <tag-ui text=\"Owner: Alex Chen\" removable></tag-ui>\n            <tag-ui text=\"Updated: last 7 days\" removable></tag-ui>\n            <button-ui text=\"+ Add filter\" variant=\"ghost\" size=\"sm\" popovertarget=\"pat-filter-menu\"></button-ui>\n            <span data-spacer></span>\n            <button-ui text=\"Clear all\" variant=\"ghost\" size=\"sm\"></button-ui>\n          </row-ui>\n          <popover-ui id=\"pat-filter-menu\" anchor=\"previous\">\n            <action-list-ui>\n              <action-item-ui icon=\"flag\" text=\"Status\" value=\"status\"></action-item-ui>\n              <action-item-ui icon=\"user\" text=\"Owner\" value=\"owner\"></action-item-ui>\n              <action-item-ui icon=\"tag\" text=\"Label\" value=\"label\"></action-item-ui>\n              <action-item-ui icon=\"calendar\" text=\"Date range\" value=\"date\"></action-item-ui>\n              <action-item-ui icon=\"folder\" text=\"Project\" value=\"project\"></action-item-ui>\n            </action-list-ui>\n          </popover-ui>\n        </section>\n      </card-ui>\n    </div>\n  </div>\n</section>",
   "source": "site/pages/patterns/filter-bar/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/filter-bar-filter-bar-with-table.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"filter-bar-with-table\" data-chunk=\"filter-bar-filter-bar-with-table\">\n  <h2 variant=\"section\">Filter bar + table</h2>\n  <p data-note>The common composition: filters sit above the table inside one card surface so they read as modifying the same data.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"filter bar with table\">\n      <card-ui>\n        <section bleed>\n          <toolbar-ui>\n            <row-ui gap=\"2\" align=\"center\" grow>\n              <tag-ui text=\"Status: Active\" removable></tag-ui>\n              <tag-ui text=\"Owner: Alex\" removable></tag-ui>\n              <button-ui text=\"+ Add filter\" variant=\"ghost\" size=\"sm\"></button-ui>\n            </row-ui>\n            <search-ui placeholder=\"Search…\" size=\"sm\"></search-ui>\n          </toolbar-ui>\n          <table-ui id=\"pat-filter-table\" sortable striped></table-ui>\n        </section>\n      </card-ui>\n    </div>\n  </div>\n</section>",
   "source": "site/pages/patterns/filter-bar/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/filter-bar-saved-views.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"saved-views\" data-chunk=\"filter-bar-saved-views\">\n  <h2 variant=\"section\">Saved views</h2>\n  <p data-note>Named combinations of filters. Segmented control replaces the active-filter chips while a view is applied.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"saved views\">\n      <card-ui>\n        <section>\n          <row-ui align=\"center\" gap=\"3\" wrap>\n            <segmented-ui value=\"my-open\">\n              <segment-ui value=\"all\" text=\"All\"></segment-ui>\n              <segment-ui value=\"my-open\" text=\"My open\"></segment-ui>\n              <segment-ui value=\"team\" text=\"Team\"></segment-ui>\n              <segment-ui value=\"archived\" text=\"Archived\"></segment-ui>\n            </segmented-ui>\n            <span data-spacer></span>\n            <button-ui text=\"Save view\" icon=\"bookmark\" variant=\"ghost\" size=\"sm\"></button-ui>\n          </row-ui>\n        </section>\n      </card-ui>\n    </div>\n  </div>\n</section>",
   "source": "site/pages/patterns/filter-bar/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/form-drawer-edit-form.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"edit-form\" data-chunk=\"form-drawer-edit-form\">\n  <h2 variant=\"section\">Edit form with destructive action</h2>\n  <p data-note>Edit drawers pair a primary action with a destructive one in the footer. Delete sits on the left, Save on the right — separated by the spacer.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"edit form\">\n      <button-ui text=\"Edit project\" icon=\"pencil\" variant=\"outline\" onclick=\"this.nextElementSibling.open=true\"></button-ui>\n      <drawer-ui text=\"Edit project\" side=\"right\" size=\"md\">\n        <section slot=\"body\">\n          <col-ui gap=\"3\">\n            <field-ui label=\"Name\">\n              <input-ui value=\"Q4 roadmap\"></input-ui>\n            </field-ui>\n            <field-ui label=\"Description\">\n              <textarea-ui rows=\"3\">Quarterly planning doc</textarea-ui>\n            </field-ui>\n            <field-ui label=\"Status\">\n              <select-ui>\n              <option value=\"active\" selected>Active</option>\n              <option value=\"archived\">Archived</option>\n            </select-ui>\n            </field-ui>\n            <field-ui label=\"Notify team members\" inline>\n              <switch-ui checked></switch-ui>\n            </field-ui>\n          </col-ui>\n        </section>\n        <footer slot=\"footer\">\n          <span slot=\"action-leading\">\n            <button-ui text=\"Delete\" icon=\"trash\" color=\"danger\"></button-ui>\n          </span>\n          <span slot=\"action\">\n            <button-ui text=\"Cancel\" variant=\"ghost\" onclick=\"this.closest('drawer-ui').open=false\"></button-ui>\n            <button-ui text=\"Save changes\" variant=\"primary\" onclick=\"this.closest('drawer-ui').open=false\"></button-ui>\n          </span>\n        </footer>\n      </drawer-ui>\n    </div>\n  </div>\n</section>",
   "source": "site/pages/patterns/form-drawer/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/form-drawer-simple-form.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"simple-form\" data-chunk=\"form-drawer-simple-form\">\n  <h2 variant=\"section\">Simple create form</h2>\n  <p data-note>3–5 fields with primary + cancel actions. The default shape for \"+ New X\" triggers.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"create form\">\n      <button-ui text=\"+ New project\" variant=\"primary\" onclick=\"this.nextElementSibling.open=true\"></button-ui>\n      <drawer-ui text=\"New project\" side=\"right\" size=\"md\">\n        <section slot=\"body\">\n          <col-ui gap=\"3\">\n            <field-ui label=\"Name\">\n              <input-ui placeholder=\"My awesome project\" required></input-ui>\n            </field-ui>\n            <field-ui label=\"Description\">\n              <textarea-ui placeholder=\"What is this project for?\" rows=\"3\"></textarea-ui>\n            </field-ui>\n            <field-ui label=\"Visibility\">\n              <select-ui placeholder=\"Select visibility\">\n              <option value=\"public\">Public</option>\n              <option value=\"team\">Team only</option>\n              <option value=\"private\">Private</option>\n            </select-ui>\n            </field-ui>\n          </col-ui>\n        </section>\n        <footer slot=\"footer\">\n          <span slot=\"action\">\n            <button-ui text=\"Cancel\" variant=\"ghost\" onclick=\"this.closest('drawer-ui').open=false\"></button-ui>\n            <button-ui text=\"Create\" variant=\"primary\" onclick=\"this.closest('drawer-ui').open=false\"></button-ui>\n          </span>\n        </footer>\n      </drawer-ui>\n    </div>\n  </div>\n</section>",
   "source": "site/pages/patterns/form-drawer/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/form-drawer-tall-form.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"tall-form\" data-chunk=\"form-drawer-tall-form\">\n  <h2 variant=\"section\">Long form — scroll body, sticky footer</h2>\n  <p data-note>The footer stays visible even when the form body overflows. This is why the sticky-footer pattern matters — users shouldn't have to scroll to find \"Save\".</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"long form\">\n      <button-ui text=\"Advanced settings\" icon=\"gear\" variant=\"outline\" onclick=\"this.nextElementSibling.open=true\"></button-ui>\n      <drawer-ui text=\"Advanced settings\" side=\"right\" size=\"lg\">\n        <section slot=\"body\">\n          <col-ui gap=\"4\">\n            <col-ui gap=\"3\">\n              <h4>General</h4>\n              <field-ui label=\"Name\">\n                <input-ui value=\"Production API\"></input-ui>\n              </field-ui>\n              <field-ui label=\"Slug\">\n                <input-ui prefix=\"/\" value=\"production-api\"></input-ui>\n              </field-ui>\n              <field-ui label=\"Description\">\n                <textarea-ui rows=\"2\"></textarea-ui>\n              </field-ui>\n            </col-ui>\n            <col-ui gap=\"3\">\n              <h4>Limits</h4>\n              <range-ui label=\"Max concurrent requests\" value=\"100\" min=\"10\" max=\"1000\"></range-ui>\n              <range-ui label=\"Timeout (seconds)\" value=\"30\" min=\"5\" max=\"300\"></range-ui>\n              <range-ui label=\"Retry attempts\" value=\"3\" min=\"0\" max=\"10\"></range-ui>\n            </col-ui>\n            <col-ui gap=\"3\">\n              <h4>Access</h4>\n              <field-ui label=\"Require authentication\" inline>\n                <switch-ui checked></switch-ui>\n              </field-ui>\n              <field-ui label=\"Allow CORS\" inline>\n                <switch-ui checked></switch-ui>\n              </field-ui>\n              <field-ui label=\"Rate limit by IP\" inline>\n                <switch-ui></switch-ui>\n              </field-ui>\n              <field-ui label=\"Log all requests\" inline>\n                <switch-ui></switch-ui>\n              </field-ui>\n            </col-ui>\n            <col-ui gap=\"3\">\n              <h4>Notifications</h4>\n              <field-ui label=\"Email on errors\" inline>\n                <check-ui checked></check-ui>\n              </field-ui>\n              <field-ui label=\"Slack on deploys\" inline>\n                <check-ui></check-ui>\n              </field-ui>\n              <field-ui label=\"PagerDuty on outages\" inline>\n                <check-ui></check-ui>\n              </field-ui>\n            </col-ui>\n          </col-ui>\n        </section>\n        <footer slot=\"footer\">\n          <span slot=\"action\">\n            <button-ui text=\"Cancel\" variant=\"ghost\" onclick=\"this.closest('drawer-ui').open=false\"></button-ui>\n            <button-ui text=\"Save settings\" variant=\"primary\" onclick=\"this.closest('drawer-ui').open=false\"></button-ui>\n          </span>\n        </footer>\n      </drawer-ui>\n    </div>\n  </div>\n</section>",
   "source": "site/pages/patterns/form-drawer/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/heatmap-data-stream.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"data-stream\" data-chunk=\"heatmap-data-stream\">\n  <h2 variant=\"section\">Data stream (<code>data-stream-*</code>)</h2>\n  <p data-note>\n    Heatmap-ui inherits the universal <code>data-stream-*</code> trait\n    — no per-component opt-in. Set <code>data-stream-src</code> and\n    cells populate from the response. The mock at\n    <code>/site/mock/activity.json</code> is a flat array of\n    <code>{r, c, v, label}</code> rows; for SSE/WS streaming, set\n    <code>data-stream-mode=\"sse\"</code> and\n    <code>data-stream-merge=\"append\"</code> to add cells as events\n    arrive. See the chart-ui demo's full attribute table for the\n    options surface.\n  </p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='heatmap-ui[data-stream-src=\"/site/mock/activity.json\"]' style=\"flex:1 1 100%;\">\n      <heatmap-ui type=\"matrix\" rows=\"5\" cols=\"4\"\n                  color-scheme=\"accent\"\n                  aria-label=\"Commit activity from activity.json\"\n                  data-stream-src=\"/site/mock/activity.json\"></heatmap-ui>\n    </div>\n  </div>\n</section>",
   "source": "site/pages/components/heatmap/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/heatmap-day-grid.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"day-grid\" data-chunk=\"heatmap-day-grid\">\n  <h2 variant=\"section\">day-grid (GitHub contributions)</h2>\n  <p data-note>7 × 52 grid with month labels — populated via the <code>.data</code> property in setup.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"day-grid · 7 × 52\">\n      <heatmap-ui id=\"hm-days\" type=\"day-grid\" rows=\"7\" cols=\"52\" start-date=\"2025-01-01\" color-scheme=\"data-ramp\"></heatmap-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/heatmap/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/heatmap-matrix.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"matrix\" data-chunk=\"heatmap-matrix\">\n  <h2 variant=\"section\">matrix</h2>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"matrix · 7 × 12 · accent scheme\">\n      <heatmap-ui id=\"hm-matrix\" type=\"matrix\" rows=\"7\" cols=\"12\" color-scheme=\"accent\"></heatmap-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"density · 10 × 10 · square\">\n      <heatmap-ui id=\"hm-density\" type=\"density\" rows=\"10\" cols=\"10\" color-scheme=\"success\" aspect=\"square\"></heatmap-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/heatmap/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/icon-combinations.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"combinations\" data-chunk=\"icon-combinations\">\n  <h2 variant=\"section\">Combinations</h2>\n  <p data-note>Icons at different sizes in a toolbar-like arrangement.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"toolbar sm\">\n      <div style=\"display:flex; gap:var(--a-space-3); align-items:center;\">\n        <icon-ui name=\"house\" size=\"sm\"></icon-ui>\n        <icon-ui name=\"magnifying-glass\" size=\"sm\"></icon-ui>\n        <icon-ui name=\"bell\" size=\"sm\"></icon-ui>\n        <icon-ui name=\"gear\" size=\"sm\"></icon-ui>\n        <icon-ui name=\"user\" size=\"sm\"></icon-ui>\n      </div>\n      </div>\n    <div data-artifact-item data-artifact-label=\"toolbar lg\">\n      <div style=\"display:flex; gap:var(--a-space-4); align-items:center;\">\n        <icon-ui name=\"house\" size=\"lg\"></icon-ui>\n        <icon-ui name=\"magnifying-glass\" size=\"lg\"></icon-ui>\n        <icon-ui name=\"bell\" size=\"lg\"></icon-ui>\n        <icon-ui name=\"gear\" size=\"lg\"></icon-ui>\n        <icon-ui name=\"user\" size=\"lg\"></icon-ui>\n      </div>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/icon/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/icon-edge-cases.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"edge-cases\" data-chunk=\"icon-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 name)\">\n      <icon-ui></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"invalid name\">\n      <icon-ui name=\"nonexistent-icon\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"label + size\">\n      <icon-ui name=\"check\" label=\"Confirmed\" size=\"lg\"></icon-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/icon/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/icon-label.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"label\" data-chunk=\"icon-label\">\n  <h2 variant=\"section\">label</h2>\n  <p data-note>When a label is provided, the icon gets role=\"img\" and aria-label. Without a label, it is presentational (aria-hidden).</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"labeled (accessible)\">\n      <icon-ui name=\"bell\" label=\"Notifications\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"decorative (hidden)\">\n      <icon-ui name=\"bell\"></icon-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/icon/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/icon-name.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"name\" data-chunk=\"icon-name\">\n  <h2 variant=\"section\">name</h2>\n  <p data-note>The Phosphor icon name. Renders the corresponding SVG inline. Here are 20 common icons.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"gear\">\n      <icon-ui name=\"gear\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"user\">\n      <icon-ui name=\"user\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"house\">\n      <icon-ui name=\"house\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"magnifying-glass\">\n      <icon-ui name=\"magnifying-glass\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"bell\">\n      <icon-ui name=\"bell\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"chat-circle\">\n      <icon-ui name=\"chat-circle\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"envelope\">\n      <icon-ui name=\"envelope\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"heart\">\n      <icon-ui name=\"heart\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"star\">\n      <icon-ui name=\"star\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"check\">\n      <icon-ui name=\"check\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"x\">\n      <icon-ui name=\"x\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"plus\">\n      <icon-ui name=\"plus\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"minus\">\n      <icon-ui name=\"minus\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"pencil\">\n      <icon-ui name=\"pencil\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"trash\">\n      <icon-ui name=\"trash\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"eye\">\n      <icon-ui name=\"eye\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"lock\">\n      <icon-ui name=\"lock\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"moon\">\n      <icon-ui name=\"moon\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"sun\">\n      <icon-ui name=\"sun\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"arrow-right\">\n      <icon-ui name=\"arrow-right\"></icon-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/icon/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/icon-size.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"size\" data-chunk=\"icon-size\">\n  <h2 variant=\"section\">size</h2>\n  <p data-note>Named scale (<code>xs</code> 12px / <code>sm</code> 14px / <code>md</code> 16px / <code>lg</code> 20px / <code>xl</code> 32px / <code>2xl</code> 48px / <code>3xl</code> 64px / <code>4xl</code> 96px), <code>fill</code> for matching the parent box, or any free-form pixel / rem / em value (<code>\"48\"</code>, <code>\"3rem\"</code>). Overrides the inherited <code>--a-icon-size</code> from the universal <code>[size]</code> system on ancestors.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"xs\">\n      <icon-ui name=\"star\" size=\"xs\"></icon-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"sm\">\n      <icon-ui name=\"star\" size=\"sm\"></icon-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"md\">\n      <icon-ui name=\"star\" size=\"md\"></icon-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"lg\">\n      <icon-ui name=\"star\" size=\"lg\"></icon-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"xl\">\n      <icon-ui name=\"star\" size=\"xl\"></icon-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"2xl\">\n      <icon-ui name=\"star\" size=\"2xl\"></icon-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"3xl\">\n      <icon-ui name=\"star\" size=\"3xl\"></icon-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"4xl\">\n      <icon-ui name=\"star\" size=\"4xl\"></icon-ui>\n    </div>\n  </div>\n  <p data-note>Free-form values bypass the named scale — useful when you need a specific pixel target.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='size=\"40\"'>\n      <icon-ui name=\"heart\" size=\"40\"></icon-ui>\n    </div>\n    <div data-artifact-item data-artifact-label='size=\"3.5rem\"'>\n      <icon-ui name=\"heart\" size=\"3.5rem\"></icon-ui>\n    </div>\n    <div data-artifact-item data-artifact-label='size=\"80\"'>\n      <icon-ui name=\"heart\" size=\"80\"></icon-ui>\n    </div>\n  </div>\n  <p data-note><code>size=\"fill\"</code> matches the parent box — for hero placeholder slots, app-icon tiles, QR-code stand-ins, etc. The icon scales with its container.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"fill (in 96×96 box)\">\n      <div style=\"width: 96px; height: 96px; padding: var(--a-space-4); border: 1px dashed var(--a-border-subtle); border-radius: var(--a-radius-md); display: grid; place-items: center;\">\n        <icon-ui name=\"qr-code\" size=\"fill\"></icon-ui>\n      </div>\n    </div>\n    <div data-artifact-item data-artifact-label=\"fill (in 160×160 box)\">\n      <div style=\"width: 160px; height: 160px; padding: var(--a-space-4); border: 1px dashed var(--a-border-subtle); border-radius: var(--a-radius-md); display: grid; place-items: center;\">\n        <icon-ui name=\"device-mobile\" size=\"fill\"></icon-ui>\n      </div>\n    </div>\n  </div>\n</section>",
   "source": "site/pages/components/icon/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/image-alt.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"alt\" data-chunk=\"image-alt\">\n  <h2 variant=\"section\">alt</h2>\n  <p data-note>Alt text for accessibility. Announced by screen readers; displayed if the image fails to render.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='alt=\"Mountain range at sunset\"'>\n      <image-ui src=\"https://picsum.photos/seed/alt-mountain/200/150\" alt=\"Mountain range at sunset\" width=\"200\" height=\"150\" radius=\"md\"></image-ui>\n      </div>\n    <div data-artifact-item data-artifact-label='alt=\"Calm ocean waves\"'>\n      <image-ui src=\"https://picsum.photos/seed/alt-ocean/200/150\" alt=\"Calm ocean waves\" width=\"200\" height=\"150\" radius=\"md\"></image-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/image/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/image-default.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"default\" data-chunk=\"image-default\">\n  <h2 variant=\"section\">Default</h2>\n  <p data-note>Basic image with src and alt.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"default\">\n      <image-ui src=\"https://picsum.photos/seed/img-demo/300/200\" alt=\"Sample landscape\" width=\"300\" height=\"200\"></image-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/image/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/image-fallback.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"fallback\" data-chunk=\"image-fallback\">\n  <h2 variant=\"section\">Fallback</h2>\n  <p data-note>Broken src falls back to the fallback URL, or shows skeleton if no fallback.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"broken src (skeleton)\">\n      <image-ui src=\"https://broken.invalid/nope.jpg\" alt=\"Broken image\" width=\"200\" height=\"150\" radius=\"md\"></image-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"no src (skeleton)\">\n      <image-ui width=\"200\" height=\"150\" radius=\"md\"></image-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/image/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/image-fit.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"fit\" data-chunk=\"image-fit\">\n  <h2 variant=\"section\">fit</h2>\n  <p data-note>Controls object-fit mode. Defaults to \"cover\".</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"cover\">\n      <image-ui src=\"https://picsum.photos/seed/fit-cover/400/200\" alt=\"Cover\" width=\"200\" height=\"200\" fit=\"cover\" radius=\"md\"></image-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"contain\">\n      <image-ui src=\"https://picsum.photos/seed/fit-contain/400/200\" alt=\"Contain\" width=\"200\" height=\"200\" fit=\"contain\" radius=\"md\"></image-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"fill\">\n      <image-ui src=\"https://picsum.photos/seed/fit-fill/400/200\" alt=\"Fill\" width=\"200\" height=\"200\" fit=\"fill\" radius=\"md\"></image-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"none\">\n      <image-ui src=\"https://picsum.photos/seed/fit-none/400/200\" alt=\"None\" width=\"200\" height=\"200\" fit=\"none\" radius=\"md\"></image-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/image/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/image-height.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"height\" data-chunk=\"image-height\">\n  <h2 variant=\"section\">height</h2>\n  <p data-note>CSS height applied to the host element.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='height=\"80\"'>\n      <image-ui src=\"https://picsum.photos/seed/h-80/200/200\" alt=\"80px tall\" width=\"200\" height=\"80\" radius=\"md\"></image-ui>\n      </div>\n    <div data-artifact-item data-artifact-label='height=\"150\"'>\n      <image-ui src=\"https://picsum.photos/seed/h-150/200/200\" alt=\"150px tall\" width=\"200\" height=\"150\" radius=\"md\"></image-ui>\n      </div>\n    <div data-artifact-item data-artifact-label='height=\"240\"'>\n      <image-ui src=\"https://picsum.photos/seed/h-240/200/400\" alt=\"240px tall\" width=\"200\" height=\"240\" radius=\"md\"></image-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/image/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/image-radius.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"radius\" data-chunk=\"image-radius\">\n  <h2 variant=\"section\">radius</h2>\n  <p data-note>Controls border radius.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"sm\">\n      <image-ui src=\"https://picsum.photos/seed/r-sm/150/150\" alt=\"Small radius\" width=\"150\" height=\"150\" radius=\"sm\"></image-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"md\">\n      <image-ui src=\"https://picsum.photos/seed/r-md/150/150\" alt=\"Medium radius\" width=\"150\" height=\"150\" radius=\"md\"></image-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"lg\">\n      <image-ui src=\"https://picsum.photos/seed/r-lg/150/150\" alt=\"Large radius\" width=\"150\" height=\"150\" radius=\"lg\"></image-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"full\">\n      <image-ui src=\"https://picsum.photos/seed/r-full/150/150\" alt=\"Full radius\" width=\"150\" height=\"150\" radius=\"full\"></image-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/image/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/image-src.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"src\" data-chunk=\"image-src\">\n  <h2 variant=\"section\">src</h2>\n  <p data-note>Image URL. Skeleton is shown while loading.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"src A\">\n      <image-ui src=\"https://picsum.photos/seed/src-a/200/150\" alt=\"Source A\" width=\"200\" height=\"150\" radius=\"md\"></image-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"src B\">\n      <image-ui src=\"https://picsum.photos/seed/src-b/200/150\" alt=\"Source B\" width=\"200\" height=\"150\" radius=\"md\"></image-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/image/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/image-width.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"width\" data-chunk=\"image-width\">\n  <h2 variant=\"section\">width</h2>\n  <p data-note>CSS width applied to the host element.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='width=\"100\"'>\n      <image-ui src=\"https://picsum.photos/seed/w-100/200/100\" alt=\"100px wide\" width=\"100\" height=\"100\" radius=\"md\"></image-ui>\n      </div>\n    <div data-artifact-item data-artifact-label='width=\"200\"'>\n      <image-ui src=\"https://picsum.photos/seed/w-200/200/100\" alt=\"200px wide\" width=\"200\" height=\"100\" radius=\"md\"></image-ui>\n      </div>\n    <div data-artifact-item data-artifact-label='width=\"300\"'>\n      <image-ui src=\"https://picsum.photos/seed/w-300/400/100\" alt=\"300px wide\" width=\"300\" height=\"100\" radius=\"md\"></image-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/image/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/input-combinations.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"combinations\" data-chunk=\"input-combinations\">\n  <h2 variant=\"section\">Combinations</h2>\n  <p data-note>Common pairings in real-world forms.</p>\n  <div data-artifact-container>\n  <div data-artifact-item data-artifact-label=\"Website URL\">\n    <field-ui label=\"Website URL\">\n      <input-ui prefix=\"https://\" placeholder=\"example.com\" required></input-ui>\n    </field-ui>\n  </div>\n  <div data-artifact-item data-artifact-label=\"Currency\">\n    <field-ui label=\"Currency\">\n      <input-ui prefix=\"$\" suffix=\"USD\" placeholder=\"0.00\"></input-ui>\n    </field-ui>\n  </div>\n  <div data-artifact-item data-artifact-label=\"Locked Account\">\n    <field-ui label=\"Locked Account\">\n      <input-ui prefix=\"@\" value=\"admin\" disabled></input-ui>\n    </field-ui>\n  </div>\n  <div data-artifact-item data-artifact-label=\"API Endpoint\">\n    <field-ui label=\"API Endpoint\">\n      <input-ui prefix=\"/\" suffix=\".json\" value=\"users\" readonly></input-ui>\n    </field-ui>\n  </div>\n</div>\n</section>",
   "source": "site/pages/components/input/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/input-disabled.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"disabled\" data-chunk=\"input-disabled\">\n  <h2 variant=\"section\">disabled</h2>\n  <p data-note>Prevents interaction. The field appears muted.</p>\n  <div data-artifact-container>\n  <div data-artifact-item data-artifact-label=\"Disabled\">\n    <field-ui label=\"Disabled\">\n      <input-ui value=\"Cannot edit this\" disabled></input-ui>\n    </field-ui>\n  </div>\n  <div data-artifact-item data-artifact-label=\"Disabled Empty\">\n    <field-ui label=\"Disabled Empty\">\n      <input-ui placeholder=\"No input allowed\" disabled></input-ui>\n    </field-ui>\n  </div>\n</div>\n</section>",
   "source": "site/pages/components/input/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/input-edge-cases.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"edge-cases\" data-chunk=\"input-edge-cases\">\n  <h2 variant=\"section\">Edge Cases</h2>\n  <p data-note>Boundary conditions and unusual content.</p>\n  <div data-artifact-container>\n  <div data-artifact-item data-artifact-label=\"input\">\n    <input-ui></input-ui>\n  </div>\n  <div data-artifact-item data-artifact-label=\"Long Label That Should Wrap Properly\">\n    <field-ui label=\"Long Label That Should Wrap Properly\">\n      <input-ui placeholder=\"Placeholder text that is also quite long and may overflow the field area\"></input-ui>\n    </field-ui>\n  </div>\n  <div data-artifact-item data-artifact-label=\"Preloaded\">\n    <field-ui label=\"Preloaded\">\n      <input-ui value=\"Hello World\" prefix=\"$\" suffix=\"USD\"></input-ui>\n    </field-ui>\n  </div>\n</div>\n</section>",
   "source": "site/pages/components/input/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/input-error.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"error\" data-chunk=\"input-error\">\n  <h2 variant=\"section\">error</h2>\n  <p data-note>Shows a validation error message below the field with error styling.</p>\n  <div data-artifact-container>\n  <div data-artifact-item data-artifact-label=\"Email\">\n    <field-ui label=\"Email\">\n      <input-ui placeholder=\"you@example.com\" error=\"Please enter a valid email address\"></input-ui>\n    </field-ui>\n  </div>\n  <div data-artifact-item data-artifact-label=\"Username\">\n    <field-ui label=\"Username\">\n      <input-ui value=\"ab\" error=\"Must be at least 3 characters\"></input-ui>\n    </field-ui>\n  </div>\n  <div data-artifact-item data-artifact-label=\"Password\">\n    <field-ui label=\"Password\">\n      <input-ui placeholder=\"Enter password\" error=\"Password is required\" required></input-ui>\n    </field-ui>\n  </div>\n</div>\n</section>",
   "source": "site/pages/components/input/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/input-label.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"label\" data-chunk=\"input-label\">\n  <h2 variant=\"section\">label</h2>\n  <p data-note>Renders a dim leading caption inside the input chrome, between any <code>prefix</code> and the value. Wires <code>aria-labelledby</code> on the editable surface. For stacked label / hint / error compositions, wrap with <code>field-ui</code>.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"empty\">\n      <input-ui label=\"Label\" placeholder=\"Input value\"></input-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"filled\">\n      <input-ui label=\"Label\" value=\"Input value\"></input-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"empty + leading icon\">\n      <input-ui label=\"Label\" prefix=\"user\" placeholder=\"Input value\"></input-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"filled + leading icon\">\n      <input-ui label=\"Label\" prefix=\"user\" value=\"Input value\"></input-ui>\n    </div>\n  </div>\n</section>",
   "source": "site/pages/components/input/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/input-name.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"name\" data-chunk=\"input-name\">\n  <h2 variant=\"section\">name</h2>\n  <p data-note>Form field name. Used when the input participates in a <code>&lt;form&gt;</code> or <code>FormController</code>.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='name=\"email\"'>\n      <field-ui label=\"Email\">\n        <input-ui name=\"email\" type=\"email\" placeholder=\"you@example.com\"></input-ui>\n      </field-ui>\n      </div>\n    <div data-artifact-item data-artifact-label='name=\"username\"'>\n      <field-ui label=\"Username\">\n        <input-ui name=\"username\" placeholder=\"Pick a handle\"></input-ui>\n      </field-ui>\n      </div>\n  </div>\n</section>",
   "source": "site/pages/components/input/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }

package/chunks/input-pattern.json

@@ -11,5 +11,5 @@
   },
   "html": "<section data-section data-property=\"pattern\" data-chunk=\"input-pattern\">\n  <h2 variant=\"section\">pattern</h2>\n  <p data-note>Regex the value must match. Triggers validation UI when the field is invalid.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='pattern=\"[A-Za-z0-9]+\"'><field-ui label=\"Alphanumeric\">\n  <input-ui pattern=\"[A-Za-z0-9]+\" placeholder=\"letters or digits\"></input-ui>\n</field-ui></div>\n    <div data-artifact-item data-artifact-label='pattern=\"\\\\d{3}-\\\\d{4}\"'><field-ui label=\"Phone\">\n  <input-ui type=\"tel\" pattern=\"\\\\d{3}-\\\\d{4}\" placeholder=\"555-0100\"></input-ui>\n</field-ui></div>\n  </div>\n</section>",
   "source": "site/pages/components/input/index.html",
-  "captured_at": "2026-04-28T04:46:20.743Z"
+  "captured_at": "2026-04-28T15:45:10.182Z"
 }