@adia-ai/a2ui-corpus 0.7.20 → 0.7.21

package/chunks/card-with-stat-kpi.json

@@ -0,0 +1,95 @@
+{
+  "name": "card-with-stat-kpi",
+  "kind": "block",
+  "primary": "div",
+  "page": "/packages/web-components/components/card/card.examples.html",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-artifact-item": "",
+    "data-artifact-label": "card with KPI stat"
+  },
+  "html": "<card-ui style=\"max-width:260px\">\n        <header>\n          <h3>Revenue</h3>\n          <tag-ui slot=\"action\" size=\"sm\" variant=\"success\">↑ 8.4%</tag-ui>\n        </header>\n        <section>\n          <stat-ui label=\"This month\" value=\"$12,400\" change=\"+$960\" trend=\"up\" icon=\"currency-dollar\"></stat-ui>\n        </section>\n      </card-ui>",
+  "source": "packages/web-components/components/card/card.examples.html",
+  "metadata": {
+    "domain": "data",
+    "description": "KPI card — card containing a stat-ui metric with label, value, trend indicator, and optional icon.",
+    "keywords": [
+      "card",
+      "stat",
+      "kpi",
+      "metric",
+      "value",
+      "trend",
+      "dashboard",
+      "analytics",
+      "revenue",
+      "users",
+      "conversion"
+    ]
+  },
+  "captured_at": "2026-06-10T20:25:14.783Z",
+  "template": [
+    {
+      "id": "text",
+      "component": "Text",
+      "variant": "heading",
+      "textContent": "Revenue"
+    },
+    {
+      "id": "text-2",
+      "component": "Text",
+      "textContent": "↑ 8.4%",
+      "variant": "body"
+    },
+    {
+      "id": "tag",
+      "component": "Tag",
+      "slot": "action",
+      "size": "sm",
+      "variant": "success",
+      "children": [
+        "text-2"
+      ]
+    },
+    {
+      "id": "header",
+      "component": "Header",
+      "children": [
+        "text",
+        "tag"
+      ]
+    },
+    {
+      "id": "stat",
+      "component": "Stat",
+      "change": "+$960",
+      "icon": "currency-dollar",
+      "label": "This month",
+      "trend": "up",
+      "value": "$12,400"
+    },
+    {
+      "id": "section",
+      "component": "Section",
+      "children": [
+        "column"
+      ]
+    },
+    {
+      "id": "column",
+      "component": "Column",
+      "children": [
+        "stat"
+      ]
+    },
+    {
+      "id": "root",
+      "component": "Card",
+      "children": [
+        "header",
+        "section"
+      ]
+    }
+  ]
+}

package/chunks/col-form-stack.json

@@ -0,0 +1,93 @@
+{
+  "name": "col-form-stack",
+  "kind": "block",
+  "primary": "div",
+  "page": "/packages/web-components/components/col/col.examples.html",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-artifact-item": "",
+    "data-artifact-label": "form field stack"
+  },
+  "html": "<col-ui gap=\"3\">\n        <field-ui label=\"Full name\">\n          <input-ui placeholder=\"Maya Chen\"></input-ui>\n        </field-ui>\n        <field-ui label=\"Email\">\n          <input-ui type=\"email\" placeholder=\"maya@example.com\"></input-ui>\n        </field-ui>\n        <field-ui label=\"Role\">\n          <select-ui value=\"member\">\n            <option value=\"admin\">Admin</option>\n            <option value=\"member\">Member</option>\n          </select-ui>\n        </field-ui>\n      </col-ui>",
+  "source": "packages/web-components/components/col/col.examples.html",
+  "metadata": {
+    "domain": "forms",
+    "description": "Vertical form field stack — col-ui wrapping labeled inputs with consistent gap. The canonical form layout.",
+    "keywords": [
+      "col",
+      "column",
+      "form",
+      "fields",
+      "stack",
+      "vertical",
+      "gap",
+      "input",
+      "layout",
+      "stacked"
+    ]
+  },
+  "captured_at": "2026-06-10T20:25:14.783Z",
+  "template": [
+    {
+      "id": "input",
+      "component": "Input",
+      "placeholder": "Maya Chen"
+    },
+    {
+      "id": "field",
+      "component": "Field",
+      "label": "Full name",
+      "children": [
+        "input"
+      ]
+    },
+    {
+      "id": "input-2",
+      "component": "Input",
+      "type": "email",
+      "placeholder": "maya@example.com"
+    },
+    {
+      "id": "field-2",
+      "component": "Field",
+      "label": "Email",
+      "children": [
+        "input-2"
+      ]
+    },
+    {
+      "id": "choice-picker",
+      "component": "ChoicePicker",
+      "value": "member",
+      "options": [
+        {
+          "value": "admin",
+          "label": "Admin"
+        },
+        {
+          "value": "member",
+          "label": "Member"
+        }
+      ]
+    },
+    {
+      "id": "field-3",
+      "component": "Field",
+      "label": "Role",
+      "children": [
+        "choice-picker"
+      ]
+    },
+    {
+      "id": "root",
+      "component": "Column",
+      "gap": "3",
+      "children": [
+        "field",
+        "field-2",
+        "field-3"
+      ]
+    }
+  ]
+}

package/chunks/col-heading-body-action.json

@@ -0,0 +1,79 @@
+{
+  "name": "col-heading-body-action",
+  "kind": "block",
+  "primary": "div",
+  "page": "/packages/web-components/components/col/col.examples.html",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-artifact-item": "",
+    "data-artifact-label": "heading + body + action stack"
+  },
+  "html": "<col-ui gap=\"3\">\n        <text-ui variant=\"heading\">Confirm deletion</text-ui>\n        <text-ui>This will permanently delete the record and all associated data. This action cannot be undone.</text-ui>\n        <row-ui gap=\"2\" justify=\"end\">\n          <button-ui text=\"Cancel\" variant=\"ghost\"></button-ui>\n          <button-ui text=\"Delete\" variant=\"primary\" color=\"danger\"></button-ui>\n        </row-ui>\n      </col-ui>",
+  "source": "packages/web-components/components/col/col.examples.html",
+  "metadata": {
+    "domain": "layout",
+    "description": "Content stack — heading, body text, and CTA button stacked vertically. Common inside cards, modals, and empty states.",
+    "keywords": [
+      "col",
+      "column",
+      "heading",
+      "body",
+      "text",
+      "action",
+      "cta",
+      "button",
+      "content",
+      "stack",
+      "vertical",
+      "card"
+    ]
+  },
+  "captured_at": "2026-06-10T20:25:14.783Z",
+  "template": [
+    {
+      "id": "text",
+      "component": "Text",
+      "variant": "heading",
+      "textContent": "Confirm deletion"
+    },
+    {
+      "id": "text-2",
+      "component": "Text",
+      "textContent": "This will permanently delete the record and all associated data. This action cannot be undone."
+    },
+    {
+      "id": "button",
+      "component": "Button",
+      "text": "Cancel",
+      "variant": "ghost"
+    },
+    {
+      "id": "button-2",
+      "component": "Button",
+      "color": "danger",
+      "text": "Delete",
+      "variant": "primary"
+    },
+    {
+      "id": "row",
+      "component": "Row",
+      "gap": "2",
+      "justify": "end",
+      "children": [
+        "button",
+        "button-2"
+      ]
+    },
+    {
+      "id": "root",
+      "component": "Column",
+      "gap": "3",
+      "children": [
+        "text",
+        "text-2",
+        "row"
+      ]
+    }
+  ]
+}

package/chunks/col-stat-label.json

@@ -0,0 +1,72 @@
+{
+  "name": "col-stat-label",
+  "kind": "block",
+  "primary": "div",
+  "page": "/packages/web-components/components/col/col.examples.html",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-artifact-item": "",
+    "data-artifact-label": "stat + label stack"
+  },
+  "html": "<col-ui gap=\"1\" align=\"center\">\n        <text-ui variant=\"display\">$12,400</text-ui>\n        <text-ui variant=\"caption\">Monthly revenue</text-ui>\n        <tag-ui size=\"sm\" variant=\"success\">↑ 8.4%</tag-ui>\n      </col-ui>",
+  "source": "packages/web-components/components/col/col.examples.html",
+  "metadata": {
+    "domain": "data",
+    "description": "KPI stack — metric value above label. Used in stat cards, dashboard widgets, and analytics tiles.",
+    "keywords": [
+      "col",
+      "column",
+      "stat",
+      "kpi",
+      "metric",
+      "value",
+      "label",
+      "number",
+      "analytics",
+      "dashboard",
+      "widget"
+    ]
+  },
+  "captured_at": "2026-06-10T20:25:14.783Z",
+  "template": [
+    {
+      "id": "text",
+      "component": "Text",
+      "variant": "display",
+      "textContent": "$12,400"
+    },
+    {
+      "id": "text-2",
+      "component": "Text",
+      "variant": "caption",
+      "textContent": "Monthly revenue"
+    },
+    {
+      "id": "text-3",
+      "component": "Text",
+      "textContent": "↑ 8.4%",
+      "variant": "body"
+    },
+    {
+      "id": "tag",
+      "component": "Tag",
+      "size": "sm",
+      "variant": "success",
+      "children": [
+        "text-3"
+      ]
+    },
+    {
+      "id": "root",
+      "component": "Column",
+      "align": "center",
+      "gap": "1",
+      "children": [
+        "text",
+        "text-2",
+        "tag"
+      ]
+    }
+  ]
+}

package/chunks/cta-banner-centered.json

@@ -0,0 +1,102 @@
+{
+  "name": "cta-banner-centered",
+  "kind": "block",
+  "primary": "card-ui",
+  "page": "/catalog/page-shells/app/marketing-page/marketing-page.contents.html",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "raw": "",
+    "align": "center"
+  },
+  "html": "<card-ui raw align=\"center\">\n      <section>\n        <col-ui align=\"center\" gap=\"3\">\n          <h2>Ready to ship?</h2>\n          <text-ui color=\"subtle\">Start building in minutes</text-ui>\n          <button-ui text=\"Start free trial\" variant=\"primary\" size=\"lg\"></button-ui>\n        </col-ui>\n      </section>\n    </card-ui>",
+  "source": "catalog/page-shells/app/marketing-page/marketing-page.contents.html",
+  "metadata": {
+    "domain": "marketing",
+    "description": "Centered call-to-action banner — a borderless full-width card with a centered closing headline, a one-line supporting subtitle, and a single primary action button. The 'Ready to ship? / Get started today' conversion banner that closes a marketing or landing page.",
+    "keywords": [
+      "cta",
+      "call",
+      "to",
+      "action",
+      "banner",
+      "centered",
+      "closing",
+      "conversion",
+      "sign",
+      "up",
+      "get",
+      "started",
+      "ready",
+      "to",
+      "ship",
+      "trial",
+      "headline",
+      "subtitle",
+      "primary",
+      "button",
+      "bottom",
+      "of",
+      "page",
+      "footer",
+      "cta",
+      "marketing",
+      "landing",
+      "conversion",
+      "strip",
+      "prompt",
+      "encourage",
+      "signup",
+      "final",
+      "push"
+    ]
+  },
+  "captured_at": "2026-06-10T19:45:40.486Z",
+  "template": [
+    {
+      "id": "text",
+      "component": "Text",
+      "variant": "title",
+      "textContent": "Ready to ship?"
+    },
+    {
+      "id": "text-2",
+      "component": "Text",
+      "color": "subtle",
+      "textContent": "Start building in minutes"
+    },
+    {
+      "id": "button",
+      "component": "Button",
+      "size": "lg",
+      "text": "Start free trial",
+      "variant": "primary"
+    },
+    {
+      "id": "column",
+      "component": "Column",
+      "align": "center",
+      "gap": "3",
+      "children": [
+        "text",
+        "text-2",
+        "button"
+      ]
+    },
+    {
+      "id": "section",
+      "component": "Section",
+      "children": [
+        "column"
+      ]
+    },
+    {
+      "id": "root",
+      "component": "Card",
+      "raw": true,
+      "children": [
+        "section"
+      ]
+    }
+  ]
+}

package/chunks/drawer-record-detail.json

@@ -0,0 +1,44 @@
+{
+  "name": "drawer-record-detail",
+  "kind": "block",
+  "primary": "div",
+  "page": "/packages/web-components/components/drawer/drawer.examples.html",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-artifact-item": "",
+    "data-artifact-label": "record detail drawer"
+  },
+  "html": "<button-ui text=\"View record\" icon=\"user\" variant=\"outline\" onclick=\"this.nextElementSibling.open=true\"></button-ui>\n      <drawer-ui side=\"right\" size=\"sm\" text=\"Maya Chen\">\n        <section slot=\"body\">\n          <col-ui gap=\"4\">\n            <description-list-ui>\n              <dt>Email</dt><dd>maya@example.com</dd>\n              <dt>Role</dt><dd>Designer</dd>\n              <dt>Status</dt><dd><tag-ui size=\"sm\" variant=\"success\">Active</tag-ui></dd>\n              <dt>Joined</dt><dd>March 12, 2026</dd>\n              <dt>Last active</dt><dd>Today</dd>\n            </description-list-ui>\n          </col-ui>\n        </section>\n        <footer slot=\"footer\">\n          <row-ui gap=\"2\">\n            <button-ui text=\"Edit\" variant=\"outline\" stretch></button-ui>\n            <button-ui text=\"Remove\" variant=\"ghost\" color=\"danger\" stretch></button-ui>\n          </row-ui>\n        </footer>\n      </drawer-ui>",
+  "source": "packages/web-components/components/drawer/drawer.examples.html",
+  "metadata": {
+    "domain": "data",
+    "description": "Record detail drawer — read-only view of a record's fields in a right-side drawer. Common for list rows that reveal detail on click.",
+    "keywords": [
+      "drawer",
+      "detail",
+      "record",
+      "view",
+      "inspect",
+      "side",
+      "panel",
+      "fields",
+      "label",
+      "value",
+      "read-only",
+      "table",
+      "list",
+      "row",
+      "click"
+    ]
+  },
+  "captured_at": "2026-06-10T20:25:14.783Z",
+  "template": [
+    {
+      "id": "root",
+      "component": "Text",
+      "textContent": "Email maya@example.com Role Designer Status Active Joined March 12, 2026 Last active Today",
+      "variant": "body"
+    }
+  ]
+}

package/chunks/drawer-with-create-form.json

@@ -0,0 +1,43 @@
+{
+  "name": "drawer-with-create-form",
+  "kind": "block",
+  "primary": "div",
+  "page": "/packages/web-components/components/drawer/drawer.examples.html",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-artifact-item": "",
+    "data-artifact-label": "form drawer — create"
+  },
+  "html": "<button-ui text=\"+ New project\" variant=\"outline\" size=\"sm\" onclick=\"this.nextElementSibling.open=true\"></button-ui>\n      <drawer-ui side=\"right\" size=\"md\" text=\"New project\">\n        <section slot=\"body\">\n          <col-ui gap=\"3\">\n            <field-ui label=\"Project name\" required>\n              <input-ui placeholder=\"My awesome project\"></input-ui>\n            </field-ui>\n            <field-ui label=\"Description\">\n              <textarea-ui placeholder=\"Optional description…\" rows=\"3\"></textarea-ui>\n            </field-ui>\n            <field-ui label=\"Status\">\n              <select-ui value=\"active\">\n                <option value=\"active\">Active</option>\n                <option value=\"draft\">Draft</option>\n                <option value=\"archived\">Archived</option>\n              </select-ui>\n            </field-ui>\n            <check-ui label=\"Notify team members\" checked></check-ui>\n          </col-ui>\n        </section>\n        <footer slot=\"footer\">\n          <row-ui gap=\"2\" justify=\"end\">\n            <button-ui text=\"Cancel\" variant=\"ghost\" onclick=\"this.closest('drawer-ui').open=false\"></button-ui>\n            <button-ui text=\"Create project\" variant=\"primary\"></button-ui>\n          </row-ui>\n        </footer>\n      </drawer-ui>",
+  "source": "packages/web-components/components/drawer/drawer.examples.html",
+  "metadata": {
+    "domain": "forms",
+    "description": "Create form drawer — drawer with labeled form fields and sticky footer Cancel/Save actions. Standard shape for '+ New X' triggers.",
+    "keywords": [
+      "drawer",
+      "form",
+      "create",
+      "new",
+      "fields",
+      "input",
+      "footer",
+      "actions",
+      "cancel",
+      "save",
+      "sticky",
+      "scrollable",
+      "side",
+      "panel"
+    ]
+  },
+  "captured_at": "2026-06-10T20:25:14.783Z",
+  "template": [
+    {
+      "id": "root",
+      "component": "Text",
+      "textContent": "Active Draft Archived",
+      "variant": "body"
+    }
+  ]
+}