@adia-ai/a2ui-corpus 0.7.20 → 0.7.22

package/chunks/row-icon-label.json

@@ -0,0 +1,52 @@
+{
+  "name": "row-icon-label",
+  "kind": "block",
+  "primary": "div",
+  "page": "/packages/web-components/components/row/row.examples.html",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-artifact-item": "",
+    "data-artifact-label": "icon + label inline"
+  },
+  "html": "<row-ui gap=\"2\" align=\"center\">\n        <icon-ui name=\"check-circle\" style=\"color:var(--a-success)\"></icon-ui>\n        <text-ui>Payment confirmed</text-ui>\n      </row-ui>",
+  "source": "packages/web-components/components/row/row.examples.html",
+  "metadata": {
+    "domain": "layout",
+    "description": "Icon beside text label — status indicator row with leading icon and text.",
+    "keywords": [
+      "row",
+      "icon",
+      "label",
+      "status",
+      "indicator",
+      "inline",
+      "leading",
+      "icon-text",
+      "horizontal"
+    ]
+  },
+  "captured_at": "2026-06-10T20:25:14.783Z",
+  "template": [
+    {
+      "id": "check-circle",
+      "component": "Icon",
+      "name": "check-circle"
+    },
+    {
+      "id": "text",
+      "component": "Text",
+      "textContent": "Payment confirmed"
+    },
+    {
+      "id": "root",
+      "component": "Row",
+      "align": "center",
+      "gap": "2",
+      "children": [
+        "check-circle",
+        "text"
+      ]
+    }
+  ]
+}

package/chunks/row-spread-label-value.json

@@ -0,0 +1,54 @@
+{
+  "name": "row-spread-label-value",
+  "kind": "block",
+  "primary": "div",
+  "page": "/packages/web-components/components/row/row.examples.html",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-artifact-item": "",
+    "data-artifact-label": "spread — label + value"
+  },
+  "html": "<row-ui justify=\"space-between\" align=\"center\">\n        <text-ui>Monthly total</text-ui>\n        <text-ui strong>$12,400</text-ui>\n      </row-ui>",
+  "source": "packages/web-components/components/row/row.examples.html",
+  "metadata": {
+    "domain": "layout",
+    "description": "Spread row — label pushed left, value pushed right via justify=space-between. Common in summary rows and list items.",
+    "keywords": [
+      "row",
+      "spread",
+      "justify",
+      "space-between",
+      "label",
+      "value",
+      "summary",
+      "stat",
+      "horizontal",
+      "flex"
+    ]
+  },
+  "captured_at": "2026-06-10T20:25:14.783Z",
+  "template": [
+    {
+      "id": "text",
+      "component": "Text",
+      "textContent": "Monthly total"
+    },
+    {
+      "id": "text-2",
+      "component": "Text",
+      "strong": true,
+      "textContent": "$12,400"
+    },
+    {
+      "id": "root",
+      "component": "Row",
+      "align": "center",
+      "justify": "space-between",
+      "children": [
+        "text",
+        "text-2"
+      ]
+    }
+  ]
+}

package/chunks/row-wrap-tags.json

@@ -0,0 +1,112 @@
+{
+  "name": "row-wrap-tags",
+  "kind": "block",
+  "primary": "div",
+  "page": "/packages/web-components/components/row/row.examples.html",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-artifact-item": "",
+    "data-artifact-label": "wrapping tag cluster"
+  },
+  "html": "<row-ui gap=\"2\" wrap>\n        <tag-ui>Design</tag-ui>\n        <tag-ui>Engineering</tag-ui>\n        <tag-ui>Product</tag-ui>\n        <tag-ui>Marketing</tag-ui>\n        <tag-ui>Sales</tag-ui>\n      </row-ui>",
+  "source": "packages/web-components/components/row/row.examples.html",
+  "metadata": {
+    "domain": "layout",
+    "description": "Wrapping badge/tag row — chip group that wraps to new lines when overflow occurs.",
+    "keywords": [
+      "row",
+      "wrap",
+      "tags",
+      "badges",
+      "chips",
+      "cluster",
+      "horizontal",
+      "flex-wrap",
+      "overflow",
+      "categories",
+      "filters"
+    ]
+  },
+  "captured_at": "2026-06-10T20:25:14.783Z",
+  "template": [
+    {
+      "id": "text",
+      "component": "Text",
+      "textContent": "Design",
+      "variant": "body"
+    },
+    {
+      "id": "tag",
+      "component": "Tag",
+      "children": [
+        "text"
+      ]
+    },
+    {
+      "id": "text-2",
+      "component": "Text",
+      "textContent": "Engineering",
+      "variant": "body"
+    },
+    {
+      "id": "tag-2",
+      "component": "Tag",
+      "children": [
+        "text-2"
+      ]
+    },
+    {
+      "id": "text-3",
+      "component": "Text",
+      "textContent": "Product",
+      "variant": "body"
+    },
+    {
+      "id": "tag-3",
+      "component": "Tag",
+      "children": [
+        "text-3"
+      ]
+    },
+    {
+      "id": "text-4",
+      "component": "Text",
+      "textContent": "Marketing",
+      "variant": "body"
+    },
+    {
+      "id": "tag-4",
+      "component": "Tag",
+      "children": [
+        "text-4"
+      ]
+    },
+    {
+      "id": "text-5",
+      "component": "Text",
+      "textContent": "Sales",
+      "variant": "body"
+    },
+    {
+      "id": "tag-5",
+      "component": "Tag",
+      "children": [
+        "text-5"
+      ]
+    },
+    {
+      "id": "root",
+      "component": "Row",
+      "gap": "2",
+      "wrap": true,
+      "children": [
+        "tag",
+        "tag-2",
+        "tag-3",
+        "tag-4",
+        "tag-5"
+      ]
+    }
+  ]
+}

package/chunks/stack-avatar-badge-overlay.json

@@ -0,0 +1,53 @@
+{
+  "name": "stack-avatar-badge-overlay",
+  "kind": "block",
+  "primary": "div",
+  "page": "/packages/web-components/components/stack/stack.examples.html",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-artifact-item": "",
+    "data-artifact-label": "avatar with badge overlay"
+  },
+  "html": "<stack-ui style=\"width:fit-content\">\n        <avatar-ui text=\"KG\" size=\"md\"></avatar-ui>\n        <badge-ui text=\"3\" variant=\"danger\" style=\"position:absolute;top:-4px;right:-4px;\"></badge-ui>\n      </stack-ui>",
+  "source": "packages/web-components/components/stack/stack.examples.html",
+  "metadata": {
+    "domain": "layout",
+    "description": "Overlay stack — avatar with a status badge overlaid at a corner. Classic notification indicator pattern.",
+    "keywords": [
+      "stack",
+      "overlay",
+      "z-axis",
+      "avatar",
+      "badge",
+      "status",
+      "indicator",
+      "notification",
+      "overlay",
+      "position"
+    ]
+  },
+  "captured_at": "2026-06-10T20:25:14.783Z",
+  "template": [
+    {
+      "id": "avatar",
+      "component": "Avatar",
+      "size": "md",
+      "text": "KG"
+    },
+    {
+      "id": "badge",
+      "component": "Badge",
+      "text": "3",
+      "variant": "danger"
+    },
+    {
+      "id": "root",
+      "component": "Stack",
+      "children": [
+        "avatar",
+        "badge"
+      ]
+    }
+  ]
+}

package/chunks/stack-image-shimmer.json

@@ -0,0 +1,51 @@
+{
+  "name": "stack-image-shimmer",
+  "kind": "block",
+  "primary": "div",
+  "page": "/packages/web-components/components/stack/stack.examples.html",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-artifact-item": "",
+    "data-artifact-label": "image with shimmer overlay"
+  },
+  "html": "<stack-ui style=\"width:240px;height:120px;border-radius:var(--a-radius-md);overflow:hidden;background:var(--a-canvas-2)\">\n        <div style=\"width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--a-fg-muted)\">Content</div>\n        <skeleton-ui style=\"position:absolute;inset:0;border-radius:0\"></skeleton-ui>\n      </stack-ui>",
+  "source": "packages/web-components/components/stack/stack.examples.html",
+  "metadata": {
+    "domain": "layout",
+    "description": "Loading overlay — content placeholder with shimmer overlaid on top of image or card content.",
+    "keywords": [
+      "stack",
+      "overlay",
+      "shimmer",
+      "loading",
+      "skeleton",
+      "placeholder",
+      "image",
+      "card",
+      "overlay",
+      "z-axis"
+    ]
+  },
+  "captured_at": "2026-06-10T20:25:14.783Z",
+  "template": [
+    {
+      "id": "text",
+      "component": "Text",
+      "textContent": "Content",
+      "variant": "body"
+    },
+    {
+      "id": "skeleton",
+      "component": "Skeleton"
+    },
+    {
+      "id": "root",
+      "component": "Stack",
+      "children": [
+        "text",
+        "skeleton"
+      ]
+    }
+  ]
+}

package/chunks/stats-band-big-numbers.json

@@ -0,0 +1,175 @@
+{
+  "name": "stats-band-big-numbers",
+  "kind": "block",
+  "primary": "section",
+  "page": "/catalog/ui-patterns/v050-content-blocks/v050-content-blocks.contents.html",
+  "slots": [],
+  "nested": [],
+  "attrs": {},
+  "html": "<section>\n    <grid-ui columns=\"2 4@md\" gap=\"4\">\n      <col-ui gap=\"0\" align=\"center\">\n        <text-ui variant=\"display\" size=\"lg\" color=\"accent\">99.99%</text-ui>\n        <text-ui size=\"sm\" color=\"subtle\">Uptime SLA</text-ui>\n      </col-ui>\n      <col-ui gap=\"0\" align=\"center\">\n        <text-ui variant=\"display\" size=\"lg\" color=\"accent\">12,000+</text-ui>\n        <text-ui size=\"sm\" color=\"subtle\">Teams shipping</text-ui>\n      </col-ui>\n      <col-ui gap=\"0\" align=\"center\">\n        <text-ui variant=\"display\" size=\"lg\" color=\"accent\">4.2B</text-ui>\n        <text-ui size=\"sm\" color=\"subtle\">Requests / month</text-ui>\n      </col-ui>\n      <col-ui gap=\"0\" align=\"center\">\n        <text-ui variant=\"display\" size=\"lg\" color=\"accent\">86</text-ui>\n        <text-ui size=\"sm\" color=\"subtle\">Countries</text-ui>\n      </col-ui>\n    </grid-ui>\n  </section>",
+  "source": "catalog/ui-patterns/v050-content-blocks/v050-content-blocks.contents.html",
+  "metadata": {
+    "domain": "marketing",
+    "description": "Marketing stats band — a horizontal row of three or four big headline numbers, each a large display figure over a short caption (uptime, customers, requests, countries). The 'by the numbers / trusted at scale' proof band that sits between a hero and the features on a landing page.",
+    "keywords": [
+      "stats",
+      "band",
+      "big",
+      "numbers",
+      "metrics",
+      "marketing",
+      "proof",
+      "social",
+      "proof",
+      "by",
+      "the",
+      "numbers",
+      "at",
+      "scale",
+      "headline",
+      "figures",
+      "uptime",
+      "customers",
+      "users",
+      "requests",
+      "countries",
+      "growth",
+      "display",
+      "stats",
+      "row",
+      "landing",
+      "page",
+      "trust",
+      "signals",
+      "key",
+      "metrics",
+      "impressive",
+      "numbers",
+      "statistics",
+      "band",
+      "achievements"
+    ]
+  },
+  "captured_at": "2026-06-10T19:45:40.486Z",
+  "template": [
+    {
+      "id": "text",
+      "component": "Text",
+      "color": "accent",
+      "size": "lg",
+      "variant": "display",
+      "textContent": "99.99%"
+    },
+    {
+      "id": "text-2",
+      "component": "Text",
+      "color": "subtle",
+      "size": "sm",
+      "textContent": "Uptime SLA"
+    },
+    {
+      "id": "column",
+      "component": "Column",
+      "align": "center",
+      "gap": "0",
+      "children": [
+        "text",
+        "text-2"
+      ]
+    },
+    {
+      "id": "text-3",
+      "component": "Text",
+      "color": "accent",
+      "size": "lg",
+      "variant": "display",
+      "textContent": "12,000+"
+    },
+    {
+      "id": "text-4",
+      "component": "Text",
+      "color": "subtle",
+      "size": "sm",
+      "textContent": "Teams shipping"
+    },
+    {
+      "id": "column-2",
+      "component": "Column",
+      "align": "center",
+      "gap": "0",
+      "children": [
+        "text-3",
+        "text-4"
+      ]
+    },
+    {
+      "id": "text-5",
+      "component": "Text",
+      "color": "accent",
+      "size": "lg",
+      "variant": "display",
+      "textContent": "4.2B"
+    },
+    {
+      "id": "text-6",
+      "component": "Text",
+      "color": "subtle",
+      "size": "sm",
+      "textContent": "Requests / month"
+    },
+    {
+      "id": "column-3",
+      "component": "Column",
+      "align": "center",
+      "gap": "0",
+      "children": [
+        "text-5",
+        "text-6"
+      ]
+    },
+    {
+      "id": "text-7",
+      "component": "Text",
+      "color": "accent",
+      "size": "lg",
+      "variant": "display",
+      "textContent": "86"
+    },
+    {
+      "id": "text-8",
+      "component": "Text",
+      "color": "subtle",
+      "size": "sm",
+      "textContent": "Countries"
+    },
+    {
+      "id": "column-4",
+      "component": "Column",
+      "align": "center",
+      "gap": "0",
+      "children": [
+        "text-7",
+        "text-8"
+      ]
+    },
+    {
+      "id": "grid",
+      "component": "Grid",
+      "columns": "2 4@md",
+      "gap": "4",
+      "children": [
+        "column",
+        "column-2",
+        "column-3",
+        "column-4"
+      ]
+    },
+    {
+      "id": "root",
+      "component": "Section",
+      "children": [
+        "grid"
+      ]
+    }
+  ]
+}