@adia-ai/web-components 0.6.32 → 0.6.34

package/components/integration-card/class.js

@@ -0,0 +1,410 @@
+/**
+ * Non-side-effect class export for `<integration-card-ui>`.
+ *
+ * Importing this file gives you the class(es) without auto-registering the tag.
+ * Useful for test isolation, subclassing with tag-name override, or selective
+ * composition.
+ *
+ * The auto-register path stays at `@adia-ai/web-components/components/integration-card`
+ * (which imports this file + calls `defineIfFree()`).
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+/**
+ * <integration-card-ui provider="slack" name="Slack"
+ *                       logo="/integrations/slack.svg"
+ *                       description="Send AI replies and notifications to channels."
+ *                       status="available">
+ * </integration-card-ui>
+ *
+ * Single tile representing one third-party integration. Status drives the
+ * button label + variant; tile chrome borrows from <card-ui> but the
+ * primitive is its own surface (one tile = one provider, never compose
+ * <card-ui> around it).
+ *
+ * Events:
+ *   connect    — { detail: { provider } } fired when `status="available"`
+ *   configure  — { detail: { provider } } fired when `status="connected"`
+ *   retry      — { detail: { provider } } fired when `status="error"`
+ *   disconnect — bubbled from consumer-provided overflow menu items
+ *                with `data-action="disconnect"` in the `actions` slot
+ */
+
+import { UIElement } from '../../core/element.js';
+
+const STATUS = Object.freeze({
+  AVAILABLE:    'available',
+  CONNECTED:    'connected',
+  ERROR:        'error',
+  PENDING:      'pending',
+  COMING_SOON:  'coming-soon',
+});
+
+const ACTION_FOR_STATUS = Object.freeze({
+  available:     { event: 'press',     emits: 'connect',    label: 'Connect',    variant: 'primary', icon: '' },
+  connected:     { event: 'press',     emits: 'configure',  label: 'Configure',  variant: 'outline', icon: '' },
+  error:         { event: 'press',     emits: 'retry',      label: 'Retry',      variant: 'outline', icon: 'arrow-clockwise' },
+  pending:       { event: 'press',     emits: '',           label: 'Connecting…', variant: 'outline', icon: '' },
+});
+
+const BADGE_FOR_STATUS = Object.freeze({
+  connected:    { variant: 'success', text: 'Connected',   icon: 'check' },
+  error:        { variant: 'danger',  text: 'Error',       icon: 'warning-circle' },
+  pending:      { variant: 'info',    text: 'Connecting…', icon: '' },
+  'coming-soon':{ variant: 'muted',   text: 'Coming soon', icon: '' },
+});
+
+export class UIIntegrationCard extends UIElement {
+  // Phosphor icons this primitive auto-stamps (without consumer markup).
+  // Aggregated by installIconLoadersForRegistered() across all defined
+  // elements. Audited by check-required-icons.mjs (slot 11).
+  static requiredIcons = ['check', 'warning-circle', 'arrow-clockwise'];
+
+  static properties = {
+    provider:        { type: String,  default: '',          reflect: true },
+    name:            { type: String,  default: '',          reflect: false },
+    logo:            { type: String,  default: '',          reflect: false },
+    description:     { type: String,  default: '',          reflect: false },
+    status:          { type: String,  default: 'available', reflect: true },
+    'error-message': { type: String,  default: '',          attribute: 'error-message' },
+    disabled:        { type: Boolean, default: false,       reflect: true },
+  };
+
+  static parts = {
+    body:      '<div slot="body" data-integration-card-body></div>',
+    logo:      '<div slot="logo" data-integration-card-logo></div>',
+    heading:   '<div slot="heading" data-integration-card-heading></div>',
+    desc:      '<p slot="description" data-integration-card-description></p>',
+    error:     '<p slot="error" data-integration-card-error></p>',
+    status:    '<badge-ui slot="status" data-integration-card-status></badge-ui>',
+    footer:    '<footer slot="footer" data-integration-card-footer></footer>',
+    button:    '<button-ui slot="action" data-integration-card-action></button-ui>',
+  };
+
+  static template = () => null;
+
+  // Stable ID for aria-labelledby pointing at the provider name.
+  #headingId = '';
+
+  // Cached element refs (lazily filled in `connected()`).
+  #bodyEl = null;
+  #logoEl = null;
+  #headingEl = null;
+  #descEl = null;
+  #errorEl = null;
+  #statusEl = null;
+  #footerEl = null;
+  #buttonEl = null;
+
+  connected() {
+    // Group semantic — labeled region announced by SR.
+    this.setAttribute('role', 'group');
+
+    // Build the static frame once. ensure() is idempotent.
+    this.#bodyEl    = this.ensure('body');
+    this.#logoEl    = this.ensure('logo');
+    this.#headingEl = this.ensure('heading');
+    this.#descEl    = this.ensure('desc');
+    this.#statusEl  = this.ensure('status');
+    this.#footerEl  = this.ensure('footer');
+
+    // Slot/structural arrangement: logo + heading + status sit inside body row;
+    // description sits below; error sits below description; button sits in footer.
+    // We arrange via DOM order so CSS direct-child selectors apply consistently.
+    if (this.#logoEl.parentElement !== this.#bodyEl)    this.#bodyEl.appendChild(this.#logoEl);
+    if (this.#headingEl.parentElement !== this.#bodyEl) this.#bodyEl.appendChild(this.#headingEl);
+    if (this.#statusEl.parentElement !== this.#bodyEl)  this.#bodyEl.appendChild(this.#statusEl);
+
+    // Assign a stable id for aria-labelledby (don't clobber author-set id).
+    if (!this.#headingEl.id) {
+      this.#headingId = `integration-card-heading-${Math.random().toString(36).slice(2, 9)}`;
+      this.#headingEl.id = this.#headingId;
+    } else {
+      this.#headingId = this.#headingEl.id;
+    }
+    this.setAttribute('aria-labelledby', this.#headingId);
+
+    // Wire action button activation. The button-ui dispatches `press`; we
+    // re-dispatch a typed event (connect / configure / retry) based on status.
+    this.addEventListener('press', this.#onPress);
+
+    // Catch consumer-wired overflow actions in the `actions` slot. The
+    // menu-ui dispatches `action` with the action name in detail — when
+    // it's `disconnect`, we re-dispatch as a typed event with the
+    // provider key. Same recipe for `reauth` / `re-authenticate`.
+    this.addEventListener('action', this.#onMenuAction);
+  }
+
+  disconnected() {
+    this.removeEventListener('press', this.#onPress);
+    this.removeEventListener('action', this.#onMenuAction);
+    this.#bodyEl = null;
+    this.#logoEl = null;
+    this.#headingEl = null;
+    this.#descEl = null;
+    this.#errorEl = null;
+    this.#statusEl = null;
+    this.#footerEl = null;
+    this.#buttonEl = null;
+  }
+
+  render() {
+    if (!this.#headingEl) return;
+
+    const status = this.#normalizedStatus();
+
+    // ── Heading ──────────────────────────────────────────────────────
+    if (this.name && this.#headingEl.textContent !== this.name) {
+      this.#headingEl.textContent = this.name;
+    }
+
+    // ── Description ─────────────────────────────────────────────────
+    // The default slot supersedes the description prop when non-empty.
+    // We detect "consumer-authored description" via any direct child that
+    // isn't one of our stamped data-integration-card-* elements and isn't
+    // a slotted action / menu.
+    const hasCustomDesc = this.#hasConsumerDescription();
+    if (hasCustomDesc) {
+      if (this.#descEl.parentElement === this) {
+        this.#descEl.remove();
+      }
+    } else {
+      if (!this.#descEl.parentElement) this.appendChild(this.#descEl);
+      if (this.description) {
+        if (this.#descEl.textContent !== this.description) {
+          this.#descEl.textContent = this.description;
+        }
+        this.#descEl.hidden = false;
+      } else {
+        this.#descEl.textContent = '';
+        this.#descEl.hidden = true;
+      }
+    }
+
+    // ── Logo ────────────────────────────────────────────────────────
+    this.#renderLogo();
+
+    // ── Status badge ────────────────────────────────────────────────
+    this.#renderStatusBadge(status);
+
+    // ── Error message (status="error" only) ─────────────────────────
+    this.#renderError(status);
+
+    // ── Action button (label + variant + visibility) ────────────────
+    this.#renderActionButton(status);
+  }
+
+  // ── Private rendering helpers ─────────────────────────────────────
+
+  #normalizedStatus() {
+    const s = (this.status || '').trim() || STATUS.AVAILABLE;
+    // Validate against the enum; fall back to `available` on bad input.
+    if (Object.values(STATUS).includes(s)) return s;
+    return STATUS.AVAILABLE;
+  }
+
+  #hasConsumerDescription() {
+    // Author description = direct child element that is neither one of our
+    // stamped data- markers nor an [slot="actions"] / [slot="action"] node.
+    for (const child of this.children) {
+      if (child === this.#bodyEl) continue;
+      if (child === this.#descEl) continue;
+      if (child === this.#errorEl) continue;
+      if (child === this.#footerEl) continue;
+      if (child.getAttribute && child.getAttribute('slot') === 'actions') continue;
+      if (child.dataset && (
+        child.dataset.integrationCardBody !== undefined ||
+        child.dataset.integrationCardDescription !== undefined ||
+        child.dataset.integrationCardError !== undefined ||
+        child.dataset.integrationCardFooter !== undefined
+      )) continue;
+      // Any other direct child counts as consumer-authored description content.
+      return true;
+    }
+    return false;
+  }
+
+  #renderLogo() {
+    if (!this.#logoEl) return;
+    const logo = (this.logo || '').trim();
+
+    // No logo → strip any prior content and hide.
+    if (!logo) {
+      this.#logoEl.replaceChildren();
+      this.#logoEl.hidden = true;
+      return;
+    }
+    this.#logoEl.hidden = false;
+
+    // URL vs icon-name sniff: presence of '/' → URL.
+    const isUrl = logo.includes('/');
+
+    if (isUrl) {
+      // Reuse existing <img> if same src; otherwise re-stamp.
+      let img = this.#logoEl.querySelector(':scope > img');
+      if (img && img.getAttribute('src') === logo) {
+        img.setAttribute('alt', `${this.name || this.provider || 'Integration'} logo`);
+        return;
+      }
+      this.#logoEl.replaceChildren();
+      img = document.createElement('img');
+      img.setAttribute('src', logo);
+      img.setAttribute('alt', `${this.name || this.provider || 'Integration'} logo`);
+      img.setAttribute('data-integration-logo', '');
+      img.setAttribute('loading', 'lazy');
+      img.setAttribute('decoding', 'async');
+      this.#logoEl.appendChild(img);
+      return;
+    }
+
+    // Icon name → <icon-ui>.
+    let icon = this.#logoEl.querySelector(':scope > icon-ui');
+    if (icon && icon.getAttribute('name') === logo) return;
+    this.#logoEl.replaceChildren();
+    icon = document.createElement('icon-ui');
+    icon.setAttribute('name', logo);
+    icon.setAttribute('aria-hidden', 'true');
+    this.#logoEl.appendChild(icon);
+  }
+
+  #renderStatusBadge(status) {
+    if (!this.#statusEl) return;
+    const cfg = BADGE_FOR_STATUS[status];
+    if (!cfg) {
+      // No badge for `available` — keep DOM but hide.
+      this.#statusEl.hidden = true;
+      this.#statusEl.removeAttribute('aria-label');
+      return;
+    }
+    this.#statusEl.hidden = false;
+    this.#statusEl.setAttribute('variant', cfg.variant);
+    this.#statusEl.setAttribute('text', cfg.text);
+    this.#statusEl.setAttribute('size', 'sm');
+    if (cfg.icon) this.#statusEl.setAttribute('icon', cfg.icon);
+    else this.#statusEl.removeAttribute('icon');
+    // Explicit aria-label so SR announces "Connected" even when text rendering
+    // is delayed by icon-registry boot.
+    this.#statusEl.setAttribute('aria-label', cfg.text);
+  }
+
+  #renderError(status) {
+    const msg = (this['error-message'] || this.getAttribute('error-message') || '').trim();
+    if (status === STATUS.ERROR && msg) {
+      if (!this.#errorEl) this.#errorEl = this.ensure('error');
+      if (!this.#errorEl.parentElement) {
+        // Insert after description, before footer if possible.
+        if (this.#descEl?.parentElement === this) {
+          this.#descEl.after(this.#errorEl);
+        } else if (this.#footerEl?.parentElement === this) {
+          this.insertBefore(this.#errorEl, this.#footerEl);
+        } else {
+          this.appendChild(this.#errorEl);
+        }
+      }
+      if (this.#errorEl.textContent !== msg) this.#errorEl.textContent = msg;
+      this.#errorEl.hidden = false;
+      this.#errorEl.setAttribute('role', 'status');
+    } else if (this.#errorEl) {
+      this.#errorEl.hidden = true;
+      this.#errorEl.textContent = '';
+    }
+  }
+
+  #renderActionButton(status) {
+    // coming-soon → hide the button entirely; the badge carries the label.
+    if (status === STATUS.COMING_SOON) {
+      this.drop('button');
+      this.#buttonEl = null;
+      // Footer with no button can still hold the [slot="actions"] menu,
+      // so we keep the footer node attached.
+      return;
+    }
+
+    const cfg = ACTION_FOR_STATUS[status];
+    if (!cfg) {
+      this.drop('button');
+      this.#buttonEl = null;
+      return;
+    }
+
+    // Ensure the button exists and sits inside the footer (light DOM
+    // positioning: button is a direct child of footer, footer is a direct
+    // child of host).
+    if (!this.#buttonEl) this.#buttonEl = this.ensure('button');
+    if (this.#buttonEl.parentElement !== this.#footerEl) {
+      this.#footerEl.insertBefore(this.#buttonEl, this.#footerEl.firstChild);
+    }
+
+    this.#buttonEl.setAttribute('text', cfg.label);
+    this.#buttonEl.setAttribute('variant', cfg.variant);
+    this.#buttonEl.setAttribute('size', 'sm');
+    if (cfg.icon) this.#buttonEl.setAttribute('icon', cfg.icon);
+    else this.#buttonEl.removeAttribute('icon');
+
+    // Toggle semantics — aria-pressed reflects "is the integration on?"
+    // Provides screen-reader feedback on the action's effect.
+    if (status === STATUS.CONNECTED) {
+      this.#buttonEl.setAttribute('aria-pressed', 'true');
+    } else if (status === STATUS.AVAILABLE) {
+      this.#buttonEl.setAttribute('aria-pressed', 'false');
+    } else {
+      this.#buttonEl.removeAttribute('aria-pressed');
+    }
+
+    // Explicit aria-label so SR announces "Connect to Slack" outside group ctx.
+    const verbForStatus = {
+      available:  'Connect to',
+      connected:  'Configure',
+      error:      'Retry connecting',
+      pending:    'Connecting to',
+    }[status] || cfg.label;
+    const labelTarget = this.name || this.provider || 'integration';
+    this.#buttonEl.setAttribute('aria-label', `${verbForStatus} ${labelTarget}`);
+
+    // pending → non-interactive; disabled prop → non-interactive too.
+    if (status === STATUS.PENDING || this.disabled) {
+      this.#buttonEl.setAttribute('disabled', '');
+    } else {
+      this.#buttonEl.removeAttribute('disabled');
+    }
+  }
+
+  // ── Event handlers ────────────────────────────────────────────────
+
+  #onPress = (e) => {
+    // Only react to presses on OUR action button — overflow menu items
+    // dispatch `action` instead.
+    if (!this.#buttonEl) return;
+    if (e.target !== this.#buttonEl && !e.composedPath?.().includes(this.#buttonEl)) return;
+    if (this.disabled) { e.stopPropagation(); return; }
+
+    const status = this.#normalizedStatus();
+    if (status === STATUS.PENDING || status === STATUS.COMING_SOON) {
+      e.stopPropagation();
+      return;
+    }
+
+    const cfg = ACTION_FOR_STATUS[status];
+    if (!cfg || !cfg.emits) return;
+
+    this.dispatchEvent(new CustomEvent(cfg.emits, {
+      bubbles: true,
+      detail: { provider: this.provider },
+    }));
+  };
+
+  #onMenuAction = (e) => {
+    // Bubbled `action` events from the consumer-provided overflow menu
+    // in [slot="actions"]. Detail shape from menu-item-ui: { action: '<name>' }.
+    const action = e.detail?.action || e.target?.getAttribute?.('action');
+    if (!action) return;
+    if (action === 'disconnect' || action === 'reauth' || action === 're-authenticate') {
+      const emits = action === 'disconnect' ? 'disconnect' : 'reauth';
+      this.dispatchEvent(new CustomEvent(emits, {
+        bubbles: true,
+        detail: { provider: this.provider },
+      }));
+    }
+  };
+}

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