@adia-ai/web-components 0.6.33 → 0.6.35

package/components/input/input.css

@@ -2,49 +2,49 @@
    inside `@scope` don't match the scope root. Plain selectors outside work.
    See docs/BROWSER-COMPAT.md §3a. */
 input-ui[variant="ghost"]:hover {
-  --input-bg: var(--a-bg-muted);
+  --input-bg-default: var(--a-bg-muted);
 }
 input-ui:not([disabled]) [slot="field"]:hover {
-  background: var(--input-bg-hover);
-  border-color: var(--input-border-hover);
-  color: var(--input-fg-hover);
+  background: var(--input-bg-hover, var(--input-bg-hover-default));
+  border-color: var(--input-border-hover, var(--input-border-hover-default));
+  color: var(--input-fg-hover, var(--input-fg-hover-default));
 }
 input-ui:not([disabled]) [slot="field"]:hover [slot="prefix"],
 input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
-  color: var(--input-affix-fg-hover);
+  color: var(--input-affix-fg-hover, var(--input-affix-fg-hover-default));
 }
 
 @scope (input-ui) {
   :where(:scope) {
     /* ── Tokens (wired to --a-ui-*) ── */
-    --input-bg:              var(--a-ui-bg);
-    --input-fg:              var(--a-ui-text);
-    --input-border:          var(--a-ui-border);
-    --input-border-hover:    var(--a-ui-border-hover);
-    --input-focus-ring:      var(--a-focus-ring);
-    --input-focus-ring-invalid: var(--a-focus-ring-invalid);
-    --input-radius:          var(--a-radius);
-    --input-height:          var(--a-size);
-    --input-px:              var(--a-ui-px);
-    --input-font-size:       var(--a-ui-size);
-    --input-placeholder-fg:  var(--a-ui-text-placeholder);
-    --input-affix-fg:        var(--a-ui-text-placeholder);
-    --input-field-gap:       var(--a-space-1);
-    --input-label-min-width: 8ch;
+    --input-bg-default:              var(--a-ui-bg);
+    --input-fg-default:              var(--a-ui-text);
+    --input-border-default:          var(--a-ui-border);
+    --input-border-hover-default:    var(--a-ui-border-hover);
+    --input-focus-ring-default:      var(--a-focus-ring);
+    --input-focus-ring-invalid-default: var(--a-focus-ring-invalid);
+    --input-radius-default:          var(--a-radius);
+    --input-height-default:          var(--a-size);
+    --input-px-default:              var(--a-ui-px);
+    --input-font-size-default:       var(--a-ui-size);
+    --input-placeholder-fg-default:  var(--a-ui-text-placeholder);
+    --input-affix-fg-default:        var(--a-ui-text-placeholder);
+    --input-field-gap-default:       var(--a-space-1);
+    --input-label-min-width-default: 8ch;
 
     /* ── Transitions ── */
-    --input-duration:        var(--a-duration-fast);
-    --input-easing:          var(--a-easing);
+    --input-duration-default:        var(--a-duration-fast);
+    --input-easing-default:          var(--a-easing);
 
     /* ── State: hover/focus ── */
-    --input-bg-hover:        var(--a-ui-bg-hover);
-    --input-fg-hover:        var(--a-ui-text-hover);
-    --input-affix-fg-hover:  var(--a-ui-text-subtle);
-    --input-fg-focus:        var(--a-ui-text-active);
+    --input-bg-hover-default:        var(--a-ui-bg-hover);
+    --input-fg-hover-default:        var(--a-ui-text-hover);
+    --input-affix-fg-hover-default:  var(--a-ui-text-subtle);
+    --input-fg-focus-default:        var(--a-ui-text-active);
 
     /* ── State: disabled ── */
-    --input-bg-disabled:     var(--a-ui-bg-disabled);
-    --input-fg-disabled:     var(--a-ui-text-disabled);
+    --input-bg-disabled-default:     var(--a-ui-bg-disabled);
+    --input-fg-disabled-default:     var(--a-ui-text-disabled);
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
 }
 
@@ -65,9 +65,9 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
      label wider than the floor grows past it. */
   [slot="label"] {
     flex-shrink: 0;
-    min-width: var(--input-label-min-width);
-    color: var(--input-affix-fg);
-    font-size: var(--input-font-size);
+    min-width: var(--input-label-min-width, var(--input-label-min-width-default));
+    color: var(--input-affix-fg, var(--input-affix-fg-default));
+    font-size: var(--input-font-size, var(--input-font-size-default));
     user-select: none;
     pointer-events: none;
   }
@@ -76,15 +76,15 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
   [slot="field"] {
     display: flex;
     align-items: center;
-    gap: var(--input-field-gap);
-    min-height: var(--input-height);
-    padding: 0 var(--input-px);
-    border: 1px solid var(--input-border);
-    border-radius: var(--input-radius);
-    background: var(--input-bg);
-    color: var(--input-fg);
+    gap: var(--input-field-gap, var(--input-field-gap-default));
+    min-height: var(--input-height, var(--input-height-default));
+    padding: 0 var(--input-px, var(--input-px-default));
+    border: 1px solid var(--input-border, var(--input-border-default));
+    border-radius: var(--input-radius, var(--input-radius-default));
+    background: var(--input-bg, var(--input-bg-default));
+    color: var(--input-fg, var(--input-fg-default));
     font: inherit;
-    font-size: var(--input-font-size);
+    font-size: var(--input-font-size, var(--input-font-size-default));
     /* line-height: 1.4 (not 1) so descender-bearing glyphs (g, j, p, q, y)
        have room inside [slot="text"]'s line box. With line-height: 1 the
        line box equals the em-square and descenders extend below it; the
@@ -96,22 +96,22 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
     /* Cover every property the hover / focus / invalid states change so
        the field doesn't half-snap (border slides, but bg/colour/ring snap). */
     transition:
-      background  var(--input-duration) var(--input-easing),
-      border-color var(--input-duration) var(--input-easing),
-      color       var(--input-duration) var(--input-easing),
-      box-shadow  var(--input-duration) var(--input-easing);
+      background  var(--input-duration, var(--input-duration-default)) var(--input-easing, var(--input-easing-default)),
+      border-color var(--input-duration, var(--input-duration-default)) var(--input-easing, var(--input-easing-default)),
+      color       var(--input-duration, var(--input-duration-default)) var(--input-easing, var(--input-easing-default)),
+      box-shadow  var(--input-duration, var(--input-duration-default)) var(--input-easing, var(--input-easing-default));
   }
   /* hover rules moved outside @scope — see Safari 17.x bug note at top. */
   :scope:not([disabled]):focus-within [slot="field"] {
     /* Canonical ring — consumes the L3 --input-focus-ring token
        which aliases --a-focus-ring. Border stays stable; the ring
        is the focus affordance (WCAG 2.2 SC 2.4.11/2.4.13). */
-    box-shadow: var(--input-focus-ring);
-    color: var(--input-fg-focus);
+    box-shadow: var(--input-focus-ring, var(--input-focus-ring-default));
+    color: var(--input-fg-focus, var(--input-fg-focus-default));
   }
   :scope[aria-invalid="true"]:not([disabled]):focus-within [slot="field"],
   :scope[error]:not([disabled]):focus-within [slot="field"] {
-    box-shadow: var(--input-focus-ring-invalid);
+    box-shadow: var(--input-focus-ring-invalid, var(--input-focus-ring-invalid-default));
   }
 
   /* Text (contenteditable span) */
@@ -135,13 +135,13 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
   }
 
   input[slot="text"]::placeholder {
-    color: var(--input-placeholder-fg);
+    color: var(--input-placeholder-fg, var(--input-placeholder-fg-default));
   }
 
   /* Placeholder (contenteditable only) */
   span[slot="text"][data-empty]::before {
     content: attr(data-placeholder);
-    color: var(--input-placeholder-fg);
+    color: var(--input-placeholder-fg, var(--input-placeholder-fg-default));
     pointer-events: none;
   }
 
@@ -157,7 +157,7 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
     font-weight: var(--a-weight-medium, 500);
     /* Reserve space for the absolutely-positioned controls column so the
        value never collides with the stepper buttons. */
-    padding-inline-end: var(--input-controls-width, calc(var(--input-height) * 0.7));
+    padding-inline-end: var(--input-controls-width, calc(var(--input-height, var(--input-height-default)) * 0.7));
   }
 
   /* Suffix sits flush after the value in number mode (no auto margin so
@@ -168,7 +168,7 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
        suffix never collides with the stepper buttons. The padding moves
        from `[slot="text"]` to `[slot="suffix"]` when a suffix is present
        — only one element needs the reservation since they're adjacent. */
-    margin-inline-end: var(--input-controls-width, calc(var(--input-height) * 0.7));
+    margin-inline-end: var(--input-controls-width, calc(var(--input-height, var(--input-height-default)) * 0.7));
   }
   [data-number]:has([slot="suffix"]) [slot="text"] {
     padding-inline-end: 0;
@@ -184,8 +184,8 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
     inset-inline-end: 0;
     display: grid;
     grid-template-rows: 1fr 1fr;
-    border-inline-start: 1px solid var(--input-border);
-    width: var(--input-controls-width, calc(var(--input-height) * 0.7));
+    border-inline-start: 1px solid var(--input-border, var(--input-border-default));
+    width: var(--input-controls-width, calc(var(--input-height, var(--input-height-default)) * 0.7));
     user-select: none;
     overflow: hidden;
   }
@@ -201,7 +201,7 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
     --button-height: 0;
     --button-radius: 0;
     --button-bg: transparent;
-    --button-fg: var(--input-affix-fg);
+    --button-fg: var(--input-affix-fg, var(--input-affix-fg-default));
     --button-px: 0;
     min-width: 0;
     min-height: 0;
@@ -217,7 +217,7 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
      any value inherited from its parent button-ui. Tying it to
      --input-height keeps the chevron proportional across sm/md/lg. */
   [data-number] [slot="controls"] icon-ui {
-    --icon-size: calc(var(--input-height) * 0.4);
+    --icon-size: calc(var(--input-height, var(--input-height-default)) * 0.4);
   }
   [data-number] [slot="controls"] button-ui:hover {
     --button-bg: var(--a-ui-bg-hover);
@@ -234,11 +234,11 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
      inline-start border on the column + the bottom-border on the upper
      button. */
   [data-number] [slot="controls"] button-ui:first-child {
-    border-bottom: 1px solid var(--input-border);
-    border-start-end-radius: calc(var(--input-radius) - 1px);
+    border-bottom: 1px solid var(--input-border, var(--input-border-default));
+    border-start-end-radius: calc(var(--input-radius, var(--input-radius-default)) - 1px);
   }
   [data-number] [slot="controls"] button-ui:last-child {
-    border-end-end-radius: calc(var(--input-radius) - 1px);
+    border-end-end-radius: calc(var(--input-radius, var(--input-radius-default)) - 1px);
   }
 
   /* Raw mode strips the chrome — also strip the controls column's
@@ -265,8 +265,8 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
     display: inline-flex;
     align-items: center;
     flex-shrink: 0;
-    color: var(--input-affix-fg);
-    font-size: var(--input-font-size);
+    color: var(--input-affix-fg, var(--input-affix-fg-default));
+    font-size: var(--input-font-size, var(--input-font-size-default));
     line-height: 1;
     user-select: none;
     pointer-events: none;
@@ -278,7 +278,7 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
 
   /* §199 (v0.5.7) — Leading + trailing affordance slots inside the field.
      Consumer authors `<button-ui slot="leading|trailing">` as a direct
-     child of <input-ui>; class.js#installAffordances moves it into
+     child of <input-ui>; input.class.js#installAffordances moves it into
      [slot="field"] at the right insertion point on connected(). CSS
      normalizes the chrome here.
 
@@ -312,10 +312,10 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
      instead so the button visually matches the input's intrinsic size. */
   [slot="field"] > [slot="leading"] button-ui,
   [slot="field"] > [slot="trailing"] button-ui {
-    --button-height: calc(var(--input-height) - 4px);
+    --button-height: calc(var(--input-height, var(--input-height-default)) - 4px);
     --button-bg: transparent;
     --button-border: transparent;
-    --button-fg: var(--input-affix-fg);
+    --button-fg: var(--input-affix-fg, var(--input-affix-fg-default));
     --button-px: var(--a-space-1);
   }
 
@@ -330,13 +330,13 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
      absolutely positioned at inset-inline-end: 0; trailing sits in the
      flex flow.) Same pattern as [slot="suffix"] in number mode. */
   [data-number]:has(> [slot="trailing"]) > [slot="trailing"] {
-    margin-inline-end: var(--input-controls-width, calc(var(--input-height) * 0.7));
+    margin-inline-end: var(--input-controls-width, calc(var(--input-height, var(--input-height-default)) * 0.7));
   }
 
   /* Disabled */
   :scope[disabled] [slot="field"] {
-    background: var(--input-bg-disabled);
-    color: var(--input-fg-disabled);
+    background: var(--input-bg-disabled, var(--input-bg-disabled-default));
+    color: var(--input-fg-disabled, var(--input-fg-disabled-default));
     cursor: not-allowed;
   }
 
@@ -353,9 +353,9 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
 
   /* Ghost variant */
   :scope[variant="ghost"] {
-    --input-bg: transparent;
-    --input-border: transparent;
-    --input-border-hover: transparent;
+    --input-bg-default: transparent;
+    --input-border-default: transparent;
+    --input-border-hover-default: transparent;
   }
   /* :scope[variant="ghost"]:hover moved outside @scope — see Safari
      17.x bug note at top of file. */

package/components/input/input.js

@@ -10,7 +10,7 @@
  */
 
 import { defineIfFree } from '../../core/register.js';
-import { UIInput } from './class.js';
+import { UIInput } from './input.class.js';
 
 defineIfFree('input-ui', UIInput);
 

package/components/input/input.yaml

@@ -262,10 +262,11 @@ a2ui:
       Number. Never substitute a native <input type="number">.
     - >-
       Inside <chat-composer>, the canonical inner input is
-      <chat-input-ui submit-on-enter> (chat variant subclass — owns
-      the submit-on-enter contract explicitly). The plain <input-ui>
-      primitive already fires `submit` on Enter, but only chat-input-ui
-      reflects the [submit-on-enter] attribute.
+      <chat-input-ui> (chat variant subclass — adds the send button +
+      model picker + paste-to-attach plumbing). The plain <input-ui>
+      primitive ALSO fires a bubbling `submit` event on Enter
+      (unconditional, no opt-in attribute); <chat-input-ui> simply
+      builds on that semantic.
 anti_patterns: []
 examples:
 - name: quantity-stepper

package/components/inspector/inspector.css

@@ -1,16 +1,16 @@
 @scope (inspector-ui) {
   :where(:scope) {
-    --inspector-pane-font-size: var(--a-ui-tiny);
-    --inspector-border:         1px solid var(--a-border-subtle);
-    --inspector-radius:         var(--a-radius);
+    --inspector-pane-font-size-default: var(--a-ui-tiny);
+    --inspector-border-default:         1px solid var(--a-border-subtle);
+    --inspector-radius-default:         var(--a-radius);
   }
 
   :scope {
     display:        flex;
     flex-direction: column;
     overflow:       hidden;
-    border:         var(--inspector-border);
-    border-radius:  var(--inspector-radius);
+    border:         var(--inspector-border, var(--inspector-border-default));
+    border-radius:  var(--inspector-radius, var(--inspector-radius-default));
     min-width:      0;
   }
 
@@ -26,6 +26,6 @@
   :scope tab-ui > code-ui {
     display: block;
     overflow: auto;
-    font-size: var(--inspector-pane-font-size);
+    font-size: var(--inspector-pane-font-size, var(--inspector-pane-font-size-default));
   }
 }

package/components/inspector/inspector.js

@@ -10,7 +10,7 @@
  */
 
 import { defineIfFree } from '../../core/register.js';
-import { UIInspector } from './class.js';
+import { UIInspector } from './inspector.class.js';
 
 defineIfFree('inspector-ui', UIInspector);
 

package/components/integration-card/integration-card.a2ui.json

@@ -0,0 +1,268 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/IntegrationCard.json",
+  "title": "IntegrationCard",
+  "description": "Single-tile primitive representing one third-party integration (Slack, GitHub, Stripe, …). Shows the provider logo + name + description + status pill + a single primary action button whose label and variant are derived from `status`. Composes into a grid via the SPEC-063 integrations-page composite. One tile = one provider; the button variant is computed from `status`, not a separate prop. Distinct from <option-card-ui> (a single-select radio with no status / async action) and <card-ui> (the generic bordered surface this specializes).",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "description": {
+      "description": "One-line description of what the integration does.",
+      "type": "string",
+      "default": ""
+    },
+    "component": {
+      "const": "IntegrationCard"
+    },
+    "disabled": {
+      "description": "Disables the action button.",
+      "type": "boolean",
+      "default": false
+    },
+    "error-message": {
+      "description": "When `status=\"error\"`, the message to show below the description. Ignored for other statuses.",
+      "$ref": "common_types.json#/$defs/DynamicString"
+    },
+    "logo": {
+      "description": "Logo URL (preferred — renders as <img>) or icon name (renders as <icon-ui>). URLs are sniffed by presence of `/`.",
+      "type": "string",
+      "default": ""
+    },
+    "name": {
+      "description": "Display name shown as the card title. Required.",
+      "type": "string",
+      "default": ""
+    },
+    "provider": {
+      "description": "Provider key — `slack`, `github`, etc. — used for analytics + a11y label. Required.",
+      "type": "string",
+      "default": ""
+    },
+    "status": {
+      "description": "Current connection state — drives the button label, variant, and visibility. `available` shows a primary `Connect`; `connected` shows an outline `Configure`; `error` shows an outline `Retry`; `pending` shows a non-interactive spinner; `coming-soon` hides the button.",
+      "$ref": "common_types.json#/$defs/DynamicString"
+    }
+  },
+  "required": [
+    "component",
+    "provider",
+    "name"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [
+      {
+        "fix": "{\"component\": \"IntegrationCard\", \"provider\": \"slack\",\n \"name\": \"Slack\", \"status\": \"available\"}\n",
+        "why": "Manually slotting a Button bypasses the card's status-driven\nbutton semantics. The card renders its own button AND the\nslotted one, producing two actions side-by-side.\n",
+        "wrong": "{\"component\": \"IntegrationCard\", \"provider\": \"slack\",\n \"children\": [{\"component\": \"Button\", \"label\": \"Connect\"}]}\n"
+      },
+      {
+        "fix": "{\"component\": \"IntegrationCard\", \"provider\": \"slack\",\n \"name\": \"Slack\", \"logo\": \"/slack.svg\", \"status\": \"available\"}\n",
+        "why": "Re-implements IntegrationCard with primitives. Loses status\nbadge semantics, accessible-name wiring, and the typed\nconnect/configure events.\n",
+        "wrong": "{\"component\": \"Card\", \"children\": [\n  {\"component\": \"Image\", \"src\": \"/slack.svg\"},\n  {\"component\": \"Text\", \"value\": \"Slack\"},\n  {\"component\": \"Button\", \"label\": \"Connect\"}]}\n"
+      }
+    ],
+    "category": "display",
+    "composes": [
+      "icon-ui",
+      "badge-ui",
+      "button-ui"
+    ],
+    "events": {
+      "configure": {
+        "description": "Fired when the user clicks the action button while `status=\"connected\"`.",
+        "detail": {
+          "provider": {
+            "description": "The provider key for this card.",
+            "type": "string"
+          }
+        }
+      },
+      "connect": {
+        "description": "Fired when the user clicks the action button while `status=\"available\"`.",
+        "detail": {
+          "provider": {
+            "description": "The provider key for this card.",
+            "type": "string"
+          }
+        }
+      },
+      "disconnect": {
+        "description": "Fired when the consumer wires a `<menu-ui slot=\"actions\">` overflow with a `disconnect` item. The card does not stamp this menu — it bubbles whatever consumer markup dispatches.",
+        "detail": {
+          "provider": {
+            "description": "The provider key for this card.",
+            "type": "string"
+          }
+        }
+      },
+      "retry": {
+        "description": "Fired when the user clicks the action button while `status=\"error\"`.",
+        "detail": {
+          "provider": {
+            "description": "The provider key for this card.",
+            "type": "string"
+          }
+        }
+      }
+    },
+    "examples": [
+      {
+        "description": "Available integration with logo, description, and primary Connect button.",
+        "a2ui": "{\n  \"id\": \"card-slack\",\n  \"component\": \"IntegrationCard\",\n  \"provider\": \"slack\",\n  \"name\": \"Slack\",\n  \"logo\": \"/integrations/slack.svg\",\n  \"description\": \"Send AI replies and notifications to channels.\",\n  \"status\": \"available\"\n}",
+        "name": "available"
+      },
+      {
+        "description": "Connected integration with success badge and outline Configure button.",
+        "a2ui": "{\n  \"id\": \"card-github\",\n  \"component\": \"IntegrationCard\",\n  \"provider\": \"github\",\n  \"name\": \"GitHub\",\n  \"logo\": \"/integrations/github.svg\",\n  \"description\": \"Sync issues and pull requests.\",\n  \"status\": \"connected\"\n}",
+        "name": "connected"
+      },
+      {
+        "description": "Error integration with danger badge, error message, and Retry button.",
+        "a2ui": "{\n  \"id\": \"card-stripe\",\n  \"component\": \"IntegrationCard\",\n  \"provider\": \"stripe\",\n  \"name\": \"Stripe\",\n  \"description\": \"Charge customers and reconcile invoices.\",\n  \"status\": \"error\",\n  \"error-message\": \"Token expired — re-authenticate.\"\n}",
+        "name": "error"
+      },
+      {
+        "description": "Coming-soon integration with no action button.",
+        "a2ui": "{\n  \"id\": \"card-zapier\",\n  \"component\": \"IntegrationCard\",\n  \"provider\": \"zapier\",\n  \"name\": \"Zapier\",\n  \"description\": \"Trigger Zaps from AdiaUI events.\",\n  \"status\": \"coming-soon\"\n}",
+        "name": "coming-soon"
+      }
+    ],
+    "keywords": [
+      "integration",
+      "connect",
+      "provider",
+      "slack",
+      "github",
+      "stripe",
+      "oauth",
+      "third-party",
+      "settings",
+      "integrations",
+      "card",
+      "tile"
+    ],
+    "name": "UIIntegrationCard",
+    "related": [
+      "card",
+      "badge",
+      "button",
+      "menu"
+    ],
+    "slots": {
+      "default": {
+        "description": "Optional override for the description. When a non-empty default slot is provided it supersedes the `description` prop."
+      },
+      "actions": {
+        "description": "Optional secondary actions — typically a <menu-ui> overflow carrying `Reauthenticate` / `Disconnect` entries. Collapses when empty."
+      }
+    },
+    "states": [
+      {
+        "description": "Default — `[status=\"available\"]`.",
+        "name": "idle"
+      },
+      {
+        "description": "Ready to connect.",
+        "attribute": "status=\"available\"",
+        "name": "available"
+      },
+      {
+        "description": "Linked — success-tinted border, check badge, outline `Configure` button.",
+        "attribute": "status=\"connected\"",
+        "name": "connected"
+      },
+      {
+        "description": "Connection failed — danger-tinted border, error message visible, outline `Retry` button.",
+        "attribute": "status=\"error\"",
+        "name": "error"
+      },
+      {
+        "description": "Awaiting response — button shows spinner, non-interactive.",
+        "attribute": "status=\"pending\"",
+        "name": "pending"
+      },
+      {
+        "description": "Listed but not yet enabled — opacity reduced, button hidden, \"Coming soon\" badge shown.",
+        "attribute": "status=\"coming-soon\"",
+        "name": "coming-soon"
+      },
+      {
+        "description": "Non-interactive; dimmed.",
+        "attribute": "disabled",
+        "name": "disabled"
+      }
+    ],
+    "status": "stable",
+    "synonyms": {
+      "connect": [
+        "integration",
+        "oauth",
+        "connection"
+      ],
+      "integration": [
+        "integration",
+        "connect",
+        "provider",
+        "third-party"
+      ],
+      "oauth": [
+        "integration",
+        "connect",
+        "auth"
+      ],
+      "provider": [
+        "integration",
+        "third-party",
+        "service"
+      ],
+      "settings": [
+        "settings",
+        "integration",
+        "account"
+      ]
+    },
+    "tag": "integration-card-ui",
+    "tokens": {
+      "--integration-card-bg": {
+        "description": "Card background. Defaults to `--a-bg`."
+      },
+      "--integration-card-border": {
+        "description": "Card border color. Defaults to `--a-border`."
+      },
+      "--integration-card-description-fg": {
+        "description": "Description text color."
+      },
+      "--integration-card-error-fg": {
+        "description": "Error-message text color (used when `status=\"error\"`)."
+      },
+      "--integration-card-gap": {
+        "description": "Vertical rhythm between header / body / footer."
+      },
+      "--integration-card-heading-fg": {
+        "description": "Provider name color."
+      },
+      "--integration-card-logo-size": {
+        "description": "Logo square dimension. Defaults to `--a-space-7`."
+      },
+      "--integration-card-px": {
+        "description": "Horizontal padding. Defaults to `--a-space-4`."
+      },
+      "--integration-card-py": {
+        "description": "Vertical padding. Defaults to `--a-space-4`."
+      },
+      "--integration-card-radius": {
+        "description": "Card corner radius. Defaults to `--a-radius-md`."
+      }
+    },
+    "traits": [],
+    "version": 1
+  }
+}