@adia-ai/a2ui-corpus 0.7.19 → 0.7.21

package/chunks/checkout-order-summary-card.json

@@ -0,0 +1,140 @@
+{
+  "name": "checkout-order-summary-card",
+  "kind": "block",
+  "primary": "card-ui",
+  "page": "/playgrounds/composed-flow/app/composed-flow.contents.html",
+  "slots": [],
+  "nested": [],
+  "attrs": {},
+  "html": "<card-ui\n          id=\"summary-card\">\n          <header slot=\"heading\">Order summary</header>\n          <section>\n            <col-ui gap=\"3\">\n              <list-ui spacing=\"sm\" divider>\n                <list-item-ui icon=\"package\" text=\"Aurora cardholder\" description=\"Slim wallet, vegetable-tanned\"></list-item-ui>\n                <list-item-ui icon=\"package\" text=\"Engraving — KG\" description=\"Hand-stamped\"></list-item-ui>\n                <list-item-ui icon=\"truck\" text=\"Standard shipping\" description=\"3–5 business days\"></list-item-ui>\n              </list-ui>\n              <row-ui gap=\"3\" align=\"center\" justify=\"between\">\n                <text-ui variant=\"caption\">Total (USD)</text-ui>\n                <text-ui id=\"summary-total\" variant=\"display\" size=\"md\">$96.12</text-ui>\n              </row-ui>\n            </col-ui>\n          </section>\n        </card-ui>",
+  "source": "playgrounds/composed-flow/app/composed-flow.contents.html",
+  "metadata": {
+    "domain": "billing",
+    "description": "Checkout order-summary card — a card listing the line items being purchased (each an icon, product name, and detail) above a divider and a right-aligned grand total. The 'what you're paying for' panel beside a payment form at checkout.",
+    "keywords": [
+      "checkout",
+      "order",
+      "summary",
+      "cart",
+      "line",
+      "items",
+      "products",
+      "purchase",
+      "total",
+      "cost",
+      "price",
+      "subtotal",
+      "review",
+      "basket",
+      "bag",
+      "receipt",
+      "order",
+      "details",
+      "billing",
+      "list",
+      "items",
+      "shipping",
+      "grand",
+      "total",
+      "ecommerce",
+      "buy"
+    ]
+  },
+  "captured_at": "2026-06-10T16:56:21.616Z",
+  "template": [
+    {
+      "id": "text",
+      "component": "Text",
+      "textContent": "Order summary",
+      "variant": "body"
+    },
+    {
+      "id": "header",
+      "component": "Header",
+      "slot": "heading",
+      "children": [
+        "text"
+      ]
+    },
+    {
+      "id": "list-item",
+      "component": "ListItem",
+      "description": "Slim wallet, vegetable-tanned",
+      "icon": "package",
+      "text": "Aurora cardholder"
+    },
+    {
+      "id": "list-item-2",
+      "component": "ListItem",
+      "description": "Hand-stamped",
+      "icon": "package",
+      "text": "Engraving — KG"
+    },
+    {
+      "id": "list-item-3",
+      "component": "ListItem",
+      "description": "3–5 business days",
+      "icon": "truck",
+      "text": "Standard shipping"
+    },
+    {
+      "id": "list",
+      "component": "List",
+      "divider": true,
+      "spacing": "sm",
+      "children": [
+        "list-item",
+        "list-item-2",
+        "list-item-3"
+      ]
+    },
+    {
+      "id": "text-2",
+      "component": "Text",
+      "variant": "caption",
+      "textContent": "Total (USD)"
+    },
+    {
+      "id": "summary-total",
+      "component": "Text",
+      "size": "md",
+      "variant": "display",
+      "textContent": "$96.12"
+    },
+    {
+      "id": "row",
+      "component": "Row",
+      "align": "center",
+      "gap": "3",
+      "justify": "between",
+      "children": [
+        "text-2",
+        "summary-total"
+      ]
+    },
+    {
+      "id": "column",
+      "component": "Column",
+      "gap": "3",
+      "children": [
+        "list",
+        "row"
+      ]
+    },
+    {
+      "id": "section",
+      "component": "Section",
+      "children": [
+        "column"
+      ]
+    },
+    {
+      "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/contact-form-card.json

@@ -0,0 +1,197 @@
+{
+  "name": "contact-form-card",
+  "kind": "block",
+  "primary": "card-ui",
+  "page": "/catalog/ui-patterns/v050-form-blocks/v050-form-blocks.contents.html",
+  "slots": [],
+  "nested": [],
+  "attrs": {},
+  "html": "<card-ui>\n    <header>\n      <h3>Get in touch</h3>\n      <p slot=\"description\">Tell us what you need and we'll reply within one business day.</p>\n    </header>\n    <section>\n      <col-ui gap=\"4\">\n        <grid-ui columns=\"1 2@sm\" gap=\"3\">\n          <field-ui label=\"Name\">\n            <input-ui name=\"name\" autocomplete=\"name\" placeholder=\"Jane Doe\" required></input-ui>\n          </field-ui>\n          <field-ui label=\"Email\">\n            <input-ui type=\"email\" name=\"email\" autocomplete=\"email\" placeholder=\"jane@acme.com\" required></input-ui>\n          </field-ui>\n        </grid-ui>\n        <field-ui label=\"Subject\">\n          <input-ui name=\"subject\" placeholder=\"How can we help?\" required></input-ui>\n        </field-ui>\n        <field-ui label=\"Message\" hint=\"The more detail you give, the faster we can help.\">\n          <textarea-ui name=\"message\" rows=\"4\" placeholder=\"Tell us more…\" required></textarea-ui>\n        </field-ui>\n      </col-ui>\n    </section>\n    <footer>\n      <row-ui gap=\"3\" justify=\"flex-end\">\n        <button-ui text=\"Clear\" variant=\"outline\" type=\"reset\"></button-ui>\n        <button-ui text=\"Send message\" variant=\"primary\" type=\"submit\" icon=\"paper-plane-tilt\"></button-ui>\n      </row-ui>\n    </footer>\n  </card-ui>",
+  "source": "catalog/ui-patterns/v050-form-blocks/v050-form-blocks.contents.html",
+  "metadata": {
+    "domain": "forms",
+    "description": "Canonical full contact form card with both submit and reset actions — heading and subheading, name and email fields in a responsive two-column grid, a subject field, a message textarea, and a footer with a Send message primary button and a Clear (reset) secondary button. The complete form composition (header + fields + dual-action footer). Use for 'contact form', 'contact us form', 'form with submit and reset', 'message form'.",
+    "keywords": [
+      "contact",
+      "form",
+      "contact-us",
+      "message",
+      "name",
+      "email",
+      "subject",
+      "textarea",
+      "send",
+      "submit",
+      "reset",
+      "clear",
+      "two-column",
+      "grid",
+      "field",
+      "input",
+      "label",
+      "complete",
+      "card",
+      "heading",
+      "footer",
+      "dual-action",
+      "full-form"
+    ]
+  },
+  "captured_at": "2026-06-10T14:28:57.979Z",
+  "template": [
+    {
+      "id": "text",
+      "component": "Text",
+      "variant": "heading",
+      "textContent": "Get in touch"
+    },
+    {
+      "id": "text-2",
+      "component": "Text",
+      "variant": "body",
+      "slot": "description",
+      "textContent": "Tell us what you need and we'll reply within one business day."
+    },
+    {
+      "id": "header",
+      "component": "Header",
+      "children": [
+        "text",
+        "text-2"
+      ]
+    },
+    {
+      "id": "name",
+      "component": "Input",
+      "required": true,
+      "autocomplete": "name",
+      "name": "name",
+      "placeholder": "Jane Doe"
+    },
+    {
+      "id": "field",
+      "component": "Field",
+      "label": "Name",
+      "children": [
+        "name"
+      ]
+    },
+    {
+      "id": "email",
+      "component": "Input",
+      "type": "email",
+      "required": true,
+      "autocomplete": "email",
+      "name": "email",
+      "placeholder": "jane@acme.com"
+    },
+    {
+      "id": "field-2",
+      "component": "Field",
+      "label": "Email",
+      "children": [
+        "email"
+      ]
+    },
+    {
+      "id": "grid",
+      "component": "Grid",
+      "columns": "1 2@sm",
+      "gap": "3",
+      "children": [
+        "field",
+        "field-2"
+      ]
+    },
+    {
+      "id": "subject",
+      "component": "Input",
+      "required": true,
+      "name": "subject",
+      "placeholder": "How can we help?"
+    },
+    {
+      "id": "field-3",
+      "component": "Field",
+      "label": "Subject",
+      "children": [
+        "subject"
+      ]
+    },
+    {
+      "id": "message",
+      "component": "TextArea",
+      "required": true,
+      "name": "message",
+      "placeholder": "Tell us more…",
+      "rows": "4"
+    },
+    {
+      "id": "field-4",
+      "component": "Field",
+      "hint": "The more detail you give, the faster we can help.",
+      "label": "Message",
+      "children": [
+        "message"
+      ]
+    },
+    {
+      "id": "column",
+      "component": "Column",
+      "gap": "4",
+      "children": [
+        "grid",
+        "field-3",
+        "field-4"
+      ]
+    },
+    {
+      "id": "section",
+      "component": "Section",
+      "children": [
+        "column"
+      ]
+    },
+    {
+      "id": "button",
+      "component": "Button",
+      "type": "reset",
+      "text": "Clear",
+      "variant": "outline"
+    },
+    {
+      "id": "button-2",
+      "component": "Button",
+      "type": "submit",
+      "icon": "paper-plane-tilt",
+      "text": "Send message",
+      "variant": "primary"
+    },
+    {
+      "id": "row",
+      "component": "Row",
+      "gap": "3",
+      "justify": "flex-end",
+      "children": [
+        "button",
+        "button-2"
+      ]
+    },
+    {
+      "id": "footer",
+      "component": "Footer",
+      "children": [
+        "row"
+      ]
+    },
+    {
+      "id": "root",
+      "component": "Card",
+      "children": [
+        "header",
+        "section",
+        "footer"
+      ]
+    }
+  ]
+}