@adia-ai/a2ui-corpus 0.7.19 → 0.7.21

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"
+      ]
+    }
+  ]
+}

package/chunks/subscription-status-renewal-card.json

@@ -0,0 +1,229 @@
+{
+  "name": "subscription-status-renewal-card",
+  "kind": "block",
+  "primary": "section",
+  "page": "/catalog/ui-patterns/v050-data-blocks/v050-data-blocks.contents.html",
+  "slots": [],
+  "nested": [],
+  "attrs": {},
+  "html": "<section>\n    <card-ui>\n      <header>\n        <text-ui strong>Current plan</text-ui>\n        <badge-ui text=\"Active\" variant=\"success\" size=\"sm\"></badge-ui>\n      </header>\n      <section>\n        <col-ui gap=\"4\">\n          <row-ui gap=\"3\" align=\"center\" justify=\"between\">\n            <col-ui gap=\"0\">\n              <text-ui size=\"lg\" strong>Team — Annual</text-ui>\n              <text-ui size=\"sm\" color=\"subtle\">$240 / seat / year</text-ui>\n            </col-ui>\n            <button-ui text=\"Manage plan\" variant=\"outline\" size=\"sm\"></button-ui>\n          </row-ui>\n          <description-list-ui align=\"between\">\n            <dt>Seats</dt><dd>8 of 10 used</dd>\n            <dt>Billing cycle</dt><dd>Annual</dd>\n            <dt>Next renewal</dt><dd>April 14, 2027</dd>\n            <dt>Payment method</dt><dd>Visa ending 4242</dd>\n          </description-list-ui>\n          <row-ui gap=\"2\">\n            <button-ui text=\"Change plan\" variant=\"ghost\" size=\"sm\"></button-ui>\n            <button-ui text=\"Cancel subscription\" variant=\"ghost\" size=\"sm\" color=\"danger\"></button-ui>\n          </row-ui>\n        </col-ui>\n      </section>\n    </card-ui>\n  </section>",
+  "source": "catalog/ui-patterns/v050-data-blocks/v050-data-blocks.contents.html",
+  "metadata": {
+    "domain": "billing",
+    "description": "Subscription status card — shows the current plan name and a status badge, a key-value detail list of seats, billing cycle, and next renewal date, then Manage-plan / Cancel actions. The 'your current subscription' summary panel on a billing or account-settings page.",
+    "keywords": [
+      "subscription",
+      "status",
+      "plan",
+      "current",
+      "billing",
+      "cycle",
+      "renewal",
+      "next",
+      "payment",
+      "seats",
+      "members",
+      "manage",
+      "cancel",
+      "upgrade",
+      "downgrade",
+      "account",
+      "membership",
+      "tier",
+      "active",
+      "card",
+      "billing",
+      "summary",
+      "subscription",
+      "details",
+      "renew",
+      "date",
+      "plan",
+      "name"
+    ]
+  },
+  "captured_at": "2026-06-10T19:45:40.486Z",
+  "template": [
+    {
+      "id": "text",
+      "component": "Text",
+      "strong": true,
+      "textContent": "Current plan"
+    },
+    {
+      "id": "badge",
+      "component": "Badge",
+      "size": "sm",
+      "text": "Active",
+      "variant": "success"
+    },
+    {
+      "id": "header",
+      "component": "Header",
+      "children": [
+        "text",
+        "badge"
+      ]
+    },
+    {
+      "id": "text-2",
+      "component": "Text",
+      "size": "lg",
+      "strong": true,
+      "textContent": "Team — Annual"
+    },
+    {
+      "id": "text-3",
+      "component": "Text",
+      "color": "subtle",
+      "size": "sm",
+      "textContent": "$240 / seat / year"
+    },
+    {
+      "id": "column-2",
+      "component": "Column",
+      "gap": "0",
+      "children": [
+        "text-2",
+        "text-3"
+      ]
+    },
+    {
+      "id": "button",
+      "component": "Button",
+      "size": "sm",
+      "text": "Manage plan",
+      "variant": "outline"
+    },
+    {
+      "id": "row",
+      "component": "Row",
+      "align": "center",
+      "gap": "3",
+      "justify": "between",
+      "children": [
+        "column-2",
+        "button"
+      ]
+    },
+    {
+      "id": "text-4",
+      "component": "Text",
+      "textContent": "Seats",
+      "variant": "body"
+    },
+    {
+      "id": "text-5",
+      "component": "Text",
+      "textContent": "8 of 10 used",
+      "variant": "body"
+    },
+    {
+      "id": "text-6",
+      "component": "Text",
+      "textContent": "Billing cycle",
+      "variant": "body"
+    },
+    {
+      "id": "text-7",
+      "component": "Text",
+      "textContent": "Annual",
+      "variant": "body"
+    },
+    {
+      "id": "text-8",
+      "component": "Text",
+      "textContent": "Next renewal",
+      "variant": "body"
+    },
+    {
+      "id": "text-9",
+      "component": "Text",
+      "textContent": "April 14, 2027",
+      "variant": "body"
+    },
+    {
+      "id": "text-10",
+      "component": "Text",
+      "textContent": "Payment method",
+      "variant": "body"
+    },
+    {
+      "id": "text-11",
+      "component": "Text",
+      "textContent": "Visa ending 4242",
+      "variant": "body"
+    },
+    {
+      "id": "description-list",
+      "component": "DescriptionList",
+      "align": "between",
+      "children": [
+        "text-4",
+        "text-5",
+        "text-6",
+        "text-7",
+        "text-8",
+        "text-9",
+        "text-10",
+        "text-11"
+      ]
+    },
+    {
+      "id": "button-2",
+      "component": "Button",
+      "size": "sm",
+      "text": "Change plan",
+      "variant": "ghost"
+    },
+    {
+      "id": "button-3",
+      "component": "Button",
+      "color": "danger",
+      "size": "sm",
+      "text": "Cancel subscription",
+      "variant": "ghost"
+    },
+    {
+      "id": "row-2",
+      "component": "Row",
+      "gap": "2",
+      "children": [
+        "button-2",
+        "button-3"
+      ]
+    },
+    {
+      "id": "column",
+      "component": "Column",
+      "gap": "4",
+      "children": [
+        "row",
+        "description-list",
+        "row-2"
+      ]
+    },
+    {
+      "id": "section",
+      "component": "Section",
+      "children": [
+        "column"
+      ]
+    },
+    {
+      "id": "card",
+      "component": "Card",
+      "children": [
+        "header",
+        "section"
+      ]
+    },
+    {
+      "id": "root",
+      "component": "Section",
+      "children": [
+        "card"
+      ]
+    }
+  ]
+}

package/chunks/table-empty-state.json

@@ -0,0 +1,116 @@
+{
+  "name": "table-empty-state",
+  "kind": "block",
+  "primary": "div",
+  "page": "/packages/web-components/components/table/table.examples.html",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-artifact-item": "",
+    "data-artifact-label": "table with empty state"
+  },
+  "html": "<card-ui>\n        <section bleed>\n          <table-ui>\n            <table>\n              <thead><tr><th>Name</th><th>Status</th><th>Date</th></tr></thead>\n              <tbody>\n                <tr>\n                  <td colspan=\"3\">\n                    <empty-state-ui icon=\"list\" heading=\"No records yet\" description=\"Records will appear here once added.\">\n                      <button-ui slot=\"action\" text=\"+ Add first record\" variant=\"primary\"></button-ui>\n                    </empty-state-ui>\n                  </td>\n                </tr>\n              </tbody>\n            </table>\n          </table-ui>\n        </section>\n      </card-ui>",
+  "source": "packages/web-components/components/table/table.examples.html",
+  "metadata": {
+    "domain": "data",
+    "description": "Empty data table — table with no rows showing an empty-state-ui placeholder with icon and CTA.",
+    "keywords": [
+      "table",
+      "empty",
+      "state",
+      "no",
+      "data",
+      "placeholder",
+      "icon",
+      "cta",
+      "zero",
+      "rows",
+      "grid",
+      "list"
+    ]
+  },
+  "captured_at": "2026-06-10T20:25:14.783Z",
+  "template": [
+    {
+      "id": "text",
+      "component": "Text",
+      "textContent": "Name",
+      "variant": "body"
+    },
+    {
+      "id": "text-2",
+      "component": "Text",
+      "textContent": "Status",
+      "variant": "body"
+    },
+    {
+      "id": "text-3",
+      "component": "Text",
+      "textContent": "Date",
+      "variant": "body"
+    },
+    {
+      "id": "column-2",
+      "component": "Column",
+      "children": [
+        "text",
+        "text-2",
+        "text-3"
+      ]
+    },
+    {
+      "id": "button",
+      "component": "Button",
+      "slot": "action",
+      "text": "+ Add first record",
+      "variant": "primary"
+    },
+    {
+      "id": "empty-state",
+      "component": "EmptyState",
+      "description": "Records will appear here once added.",
+      "heading": "No records yet",
+      "icon": "list",
+      "children": [
+        "button"
+      ]
+    },
+    {
+      "id": "table-2",
+      "component": "Table",
+      "children": [
+        "column-2",
+        "empty-state"
+      ]
+    },
+    {
+      "id": "table",
+      "component": "Table",
+      "children": [
+        "table-2"
+      ]
+    },
+    {
+      "id": "section",
+      "component": "Section",
+      "bleed": true,
+      "children": [
+        "column-9"
+      ]
+    },
+    {
+      "id": "column-9",
+      "component": "Column",
+      "children": [
+        "table"
+      ]
+    },
+    {
+      "id": "root",
+      "component": "Card",
+      "children": [
+        "section"
+      ]
+    }
+  ]
+}

package/chunks/table-toolbar-no-search.json

@@ -0,0 +1,38 @@
+{
+  "name": "table-toolbar-no-search",
+  "kind": "block",
+  "primary": "div",
+  "page": "/packages/web-components/components/table-toolbar/table-toolbar.examples.html",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-artifact-item": "",
+    "data-artifact-label": "standalone toolbar — variant=card, no search"
+  },
+  "html": "<table-toolbar-ui text=\"Recent orders\" count=\"18\" variant=\"card\" no-search></table-toolbar-ui>",
+  "source": "packages/web-components/components/table-toolbar/table-toolbar.examples.html",
+  "metadata": {
+    "domain": "data",
+    "description": "Standalone table toolbar — title + count + filter/sort controls, no search. variant=card gives it surface chrome when it stands outside a card-ui.",
+    "keywords": [
+      "table",
+      "toolbar",
+      "filter",
+      "sort",
+      "columns",
+      "controls",
+      "no-search",
+      "standalone",
+      "card",
+      "data",
+      "grid"
+    ]
+  },
+  "captured_at": "2026-06-10T20:25:14.783Z",
+  "template": [
+    {
+      "id": "root",
+      "component": "Column"
+    }
+  ]
+}