@adia-ai/web-components 0.6.32 → 0.6.34

package/components/integration-card/integration-card.css

@@ -0,0 +1,169 @@
+@scope (integration-card-ui) {
+  :where(:scope) {
+    /* ── Layout ── */
+    --integration-card-bg-default:              var(--a-bg);
+    --integration-card-border-default:          1px solid var(--a-border-subtle);
+    --integration-card-radius-default:          var(--a-radius-md);
+    --integration-card-px-default:              var(--a-space-4);
+    --integration-card-py-default:              var(--a-space-4);
+    --integration-card-gap-default:             var(--a-space-3);
+
+    /* ── Inner rhythm ── */
+    --integration-card-row-gap-default:         var(--a-space-3);
+    --integration-card-text-gap-default:        var(--a-space-1);
+
+    /* ── Logo ── */
+    --integration-card-logo-size-default:       var(--a-space-7);
+    --integration-card-logo-radius-default:     var(--a-radius-sm);
+
+    /* ── Typography ── */
+    --integration-card-heading-fg-default:      var(--a-fg-strong);
+    --integration-card-heading-size-default:    var(--a-ui-size);
+    --integration-card-heading-weight-default:  var(--a-weight-medium);
+    --integration-card-description-fg-default:  var(--a-fg-muted);
+    --integration-card-description-size-default: var(--a-ui-sm);
+    --integration-card-error-fg-default:        var(--a-danger-text);
+    --integration-card-error-size-default:      var(--a-ui-sm);
+
+    /* ── States ── */
+    --integration-card-disabled-opacity-default: 0.6;
+  }
+
+  /* ── Base — vertical stack: body row + (description) + (error) + footer ── */
+  :scope {
+    box-sizing: border-box;
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    gap: var(--integration-card-gap, var(--integration-card-gap-default));
+    padding: var(--integration-card-py, var(--integration-card-py-default)) var(--integration-card-px, var(--integration-card-px-default));
+    background: var(--integration-card-bg, var(--integration-card-bg-default));
+    border: var(--integration-card-border, var(--integration-card-border-default));
+    border-radius: var(--integration-card-radius, var(--integration-card-radius-default));
+    width: stretch;
+    min-width: 0;
+  }
+
+  /* ── Status-driven border tints ── */
+  :scope[status="connected"] {
+    --integration-card-border-default: 1px solid var(--a-success-border, var(--a-success-strong));
+  }
+  :scope[status="error"] {
+    --integration-card-border-default: 1px solid var(--a-danger-border, var(--a-danger-strong));
+  }
+
+  /* ── Coming-soon + disabled → opacity reduction ── */
+  :scope[status="coming-soon"],
+  :scope[disabled] {
+    opacity: var(--integration-card-disabled-opacity, var(--integration-card-disabled-opacity-default));
+  }
+
+  /* ── Body row — logo | heading | status badge ── */
+  :scope > [data-integration-card-body] {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    align-items: center;
+    column-gap: var(--integration-card-row-gap, var(--integration-card-row-gap-default));
+  }
+
+  /* ── Logo square ── */
+  :scope > [data-integration-card-body] > [data-integration-card-logo] {
+    grid-column: 1;
+    inline-size: var(--integration-card-logo-size, var(--integration-card-logo-size-default));
+    block-size: var(--integration-card-logo-size, var(--integration-card-logo-size-default));
+    border-radius: var(--integration-card-logo-radius, var(--integration-card-logo-radius-default));
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+  :scope > [data-integration-card-body] > [data-integration-card-logo][hidden] {
+    display: none;
+  }
+  :scope [data-integration-card-logo] > img {
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: contain;
+    display: block;
+  }
+  :scope [data-integration-card-logo] > icon-ui {
+    --a-icon-size: calc(var(--integration-card-logo-size, var(--integration-card-logo-size-default)) - var(--a-space-1));
+    color: var(--a-fg-muted);
+  }
+
+  /* ── Heading (provider name) ── */
+  :scope > [data-integration-card-body] > [data-integration-card-heading] {
+    grid-column: 2;
+    color: var(--integration-card-heading-fg, var(--integration-card-heading-fg-default));
+    font-size: var(--integration-card-heading-size, var(--integration-card-heading-size-default));
+    font-weight: var(--integration-card-heading-weight, var(--integration-card-heading-weight-default));
+    line-height: 1.3;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* ── Status badge (sits in body row, right-aligned) ── */
+  :scope > [data-integration-card-body] > [data-integration-card-status] {
+    grid-column: 3;
+    justify-self: end;
+  }
+  :scope > [data-integration-card-body] > [data-integration-card-status][hidden] {
+    display: none;
+  }
+
+  /* ── Description ── */
+  :scope > [data-integration-card-description] {
+    margin: 0;
+    color: var(--integration-card-description-fg, var(--integration-card-description-fg-default));
+    font-size: var(--integration-card-description-size, var(--integration-card-description-size-default));
+    line-height: 1.4;
+  }
+  :scope > [data-integration-card-description][hidden] {
+    display: none;
+  }
+
+  /* ── Author-provided description (default slot) — same typography
+     by selector rather than slot to support bare <p>, <text-ui>, <small>. */
+  :scope > p:not([data-integration-card-description]):not([data-integration-card-error]),
+  :scope > small:not([data-integration-card-error]) {
+    margin: 0;
+    color: var(--integration-card-description-fg, var(--integration-card-description-fg-default));
+    font-size: var(--integration-card-description-size, var(--integration-card-description-size-default));
+    line-height: 1.4;
+  }
+
+  /* ── Error message ── */
+  :scope > [data-integration-card-error] {
+    margin: 0;
+    color: var(--integration-card-error-fg, var(--integration-card-error-fg-default));
+    font-size: var(--integration-card-error-size, var(--integration-card-error-size-default));
+    line-height: 1.4;
+  }
+  :scope > [data-integration-card-error][hidden] {
+    display: none;
+  }
+
+  /* ── Footer — action button + optional [slot="actions"] overflow ── */
+  :scope > [data-integration-card-footer] {
+    display: flex;
+    align-items: center;
+    gap: var(--integration-card-row-gap, var(--integration-card-row-gap-default));
+    margin: 0;
+    padding: 0;
+  }
+
+  /* Action button is first child of footer; menu / overflow goes to the right. */
+  :scope > [data-integration-card-footer] > [data-integration-card-action] {
+    flex: 0 0 auto;
+  }
+  :scope > [data-integration-card-footer] > [slot="actions"] {
+    margin-inline-start: auto;
+  }
+
+  /* ── Disabled state — button-ui already dims; ensure card chrome too. */
+  :scope[disabled] {
+    pointer-events: none;
+  }
+}

package/components/integration-card/integration-card.d.ts

@@ -0,0 +1,63 @@
+/**
+ * `<integration-card-ui>` — 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).
+ *
+ * @see https://ui-kit.exe.xyz/site/components/integration-card
+ *
+ * Type declarations generated by scripts/build/dts-codegen.mjs from
+ * the component's `.a2ui.json` sidecar(s). Edit the source `.yaml`,
+ * run `npm run build:components`, then `npm run codegen:dts` to
+ * regenerate; or hand-author this file fully if rich event types are
+ * needed beyond what the yaml `events:` block can express.
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export interface IntegrationCardConfigureEventDetail {
+  /** The provider key for this card. */
+  provider: string;
+}
+
+export type IntegrationCardConfigureEvent = CustomEvent<IntegrationCardConfigureEventDetail>;
+export interface IntegrationCardConnectEventDetail {
+  /** The provider key for this card. */
+  provider: string;
+}
+
+export type IntegrationCardConnectEvent = CustomEvent<IntegrationCardConnectEventDetail>;
+export interface IntegrationCardDisconnectEventDetail {
+  /** The provider key for this card. */
+  provider: string;
+}
+
+export type IntegrationCardDisconnectEvent = CustomEvent<IntegrationCardDisconnectEventDetail>;
+export interface IntegrationCardRetryEventDetail {
+  /** The provider key for this card. */
+  provider: string;
+}
+
+export type IntegrationCardRetryEvent = CustomEvent<IntegrationCardRetryEventDetail>;
+
+export class UIIntegrationCard extends UIElement {
+  /** One-line description of what the integration does. */
+  description: string;
+  /** Disables the action button. */
+  disabled: boolean;
+  /** Logo URL (preferred — renders as <img>) or icon name (renders as <icon-ui>). URLs are sniffed by presence of `/`. */
+  logo: string;
+  /** Display name shown as the card title. Required. */
+  name: string;
+  /** Provider key — `slack`, `github`, etc. — used for analytics + a11y label. Required. */
+  provider: string;
+  /** 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. */
+  status: string;
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIIntegrationCard, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'configure', listener: (ev: IntegrationCardConfigureEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'connect', listener: (ev: IntegrationCardConnectEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'disconnect', listener: (ev: IntegrationCardDisconnectEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'retry', listener: (ev: IntegrationCardRetryEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+}

package/components/integration-card/integration-card.examples.md

@@ -0,0 +1,41 @@
+# integration-card — Examples
+
+## Available (default)
+
+```html
+<integration-card-ui
+  provider="slack"
+  name="Slack"
+  logo="/integrations/slack.svg"
+  description="Send AI replies and notifications to channels."
+  status="available">
+</integration-card-ui>
+```
+
+## Connected — overflow menu
+
+```html
+<integration-card-ui provider="github" name="GitHub" status="connected"
+                      logo="/integrations/github.svg"
+                      description="Sync issues and pull requests.">
+  <menu-ui slot="actions" label="More" trigger-icon="dots-three" trigger-variant="ghost">
+    <menu-item-ui action="reauth">Re-authenticate</menu-item-ui>
+    <menu-item-ui action="disconnect" variant="danger">Disconnect</menu-item-ui>
+  </menu-ui>
+</integration-card-ui>
+```
+
+## Error — Retry
+
+```html
+<integration-card-ui provider="stripe" name="Stripe" status="error"
+                      error-message="Token expired — re-authenticate.">
+</integration-card-ui>
+```
+
+## Coming soon (non-interactive)
+
+```html
+<integration-card-ui provider="zapier" name="Zapier" status="coming-soon">
+</integration-card-ui>
+```

package/components/integration-card/integration-card.js

@@ -0,0 +1,17 @@
+/**
+ * `<integration-card-ui>` — auto-registers the tag on import.
+ *
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
+ *
+ *   import { UIIntegrationCard } from '@adia-ai/web-components/components/integration-card/class';
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+import { defineIfFree } from '../../core/register.js';
+import { UIIntegrationCard } from './class.js';
+
+defineIfFree('integration-card-ui', UIIntegrationCard);
+
+export { UIIntegrationCard };

package/components/integration-card/integration-card.test.js

@@ -0,0 +1,306 @@
+/**
+ * integration-card-ui regression tests.
+ *
+ * Covers:
+ *   - Default props / structural skeleton
+ *   - Button label + variant computed from `status`
+ *   - Coming-soon hides the button entirely
+ *   - Each action click dispatches the typed event with `detail.provider`
+ *   - `[disabled]` suppresses button activation
+ *   - Error message visible only when status="error" AND error-message is set
+ *   - Logo prop accepts URL (renders <img>) and icon name (renders <icon-ui>)
+ *   - ARIA: role="group" + aria-labelledby pointing at the provider name
+ *   - aria-pressed reflects connected vs available toggle semantics
+ */
+
+import { describe, it, expect, beforeEach } from 'vitest';
+import '../../core/element.js';
+import '../button/button.js';
+import '../badge/badge.js';
+import '../icon/icon.js';
+import './integration-card.js';
+
+const tick = () => new Promise((r) => queueMicrotask(r));
+const tick2 = async () => { await tick(); await tick(); };
+
+function mount(html) {
+  const wrap = document.createElement('div');
+  wrap.innerHTML = html;
+  document.body.appendChild(wrap);
+  return wrap.firstElementChild;
+}
+
+describe('integration-card-ui — defaults', () => {
+  beforeEach(() => { document.body.innerHTML = ''; });
+
+  it('defaults status to "available"', async () => {
+    const c = mount('<integration-card-ui provider="slack" name="Slack"></integration-card-ui>');
+    await tick2();
+    // The reactive property accessor always returns the default; the
+    // attribute is reflected only on subsequent `set` calls (UIElement
+    // semantics). Both consumers + computed-button-label work off the
+    // property, not the attribute.
+    expect(c.status).toBe('available');
+  });
+
+  it('exposes role="group" + aria-labelledby pointing at the heading', async () => {
+    const c = mount('<integration-card-ui provider="slack" name="Slack"></integration-card-ui>');
+    await tick2();
+    expect(c.getAttribute('role')).toBe('group');
+    const labelledBy = c.getAttribute('aria-labelledby');
+    expect(labelledBy).toBeTruthy();
+    const heading = c.querySelector(`#${labelledBy}`);
+    expect(heading).not.toBeNull();
+    expect(heading.textContent).toBe('Slack');
+  });
+
+  it('renders provider name into the heading', async () => {
+    const c = mount('<integration-card-ui provider="github" name="GitHub"></integration-card-ui>');
+    await tick2();
+    const heading = c.querySelector('[data-integration-card-heading]');
+    expect(heading).not.toBeNull();
+    expect(heading.textContent).toBe('GitHub');
+  });
+
+  it('renders the description prop into the description element', async () => {
+    const c = mount('<integration-card-ui provider="slack" name="Slack" description="Send messages."></integration-card-ui>');
+    await tick2();
+    const desc = c.querySelector('[data-integration-card-description]');
+    expect(desc).not.toBeNull();
+    expect(desc.textContent).toBe('Send messages.');
+    expect(desc.hidden).toBe(false);
+  });
+});
+
+describe('integration-card-ui — status drives button label + variant', () => {
+  beforeEach(() => { document.body.innerHTML = ''; });
+
+  it('status="available" → primary "Connect" button', async () => {
+    const c = mount('<integration-card-ui provider="slack" name="Slack" status="available"></integration-card-ui>');
+    await tick2();
+    const btn = c.querySelector('[data-integration-card-action]');
+    expect(btn).not.toBeNull();
+    expect(btn.getAttribute('text')).toBe('Connect');
+    expect(btn.getAttribute('variant')).toBe('primary');
+    expect(btn.getAttribute('aria-pressed')).toBe('false');
+  });
+
+  it('status="connected" → outline "Configure" button with aria-pressed="true"', async () => {
+    const c = mount('<integration-card-ui provider="github" name="GitHub" status="connected"></integration-card-ui>');
+    await tick2();
+    const btn = c.querySelector('[data-integration-card-action]');
+    expect(btn).not.toBeNull();
+    expect(btn.getAttribute('text')).toBe('Configure');
+    expect(btn.getAttribute('variant')).toBe('outline');
+    expect(btn.getAttribute('aria-pressed')).toBe('true');
+  });
+
+  it('status="error" → outline "Retry" button', async () => {
+    const c = mount('<integration-card-ui provider="stripe" name="Stripe" status="error"></integration-card-ui>');
+    await tick2();
+    const btn = c.querySelector('[data-integration-card-action]');
+    expect(btn).not.toBeNull();
+    expect(btn.getAttribute('text')).toBe('Retry');
+    expect(btn.getAttribute('variant')).toBe('outline');
+  });
+
+  it('status="pending" → button shows pending label and is disabled', async () => {
+    const c = mount('<integration-card-ui provider="slack" name="Slack" status="pending"></integration-card-ui>');
+    await tick2();
+    const btn = c.querySelector('[data-integration-card-action]');
+    expect(btn).not.toBeNull();
+    expect(btn.hasAttribute('disabled')).toBe(true);
+  });
+
+  it('status="coming-soon" → button is removed', async () => {
+    const c = mount('<integration-card-ui provider="zapier" name="Zapier" status="coming-soon"></integration-card-ui>');
+    await tick2();
+    const btn = c.querySelector('[data-integration-card-action]');
+    expect(btn).toBeNull();
+  });
+});
+
+describe('integration-card-ui — status badge', () => {
+  beforeEach(() => { document.body.innerHTML = ''; });
+
+  it('status="connected" → success badge', async () => {
+    const c = mount('<integration-card-ui provider="github" name="GitHub" status="connected"></integration-card-ui>');
+    await tick2();
+    const badge = c.querySelector('[data-integration-card-status]');
+    expect(badge).not.toBeNull();
+    expect(badge.hidden).toBe(false);
+    expect(badge.getAttribute('variant')).toBe('success');
+    expect(badge.getAttribute('text')).toBe('Connected');
+  });
+
+  it('status="error" → danger badge', async () => {
+    const c = mount('<integration-card-ui provider="stripe" name="Stripe" status="error"></integration-card-ui>');
+    await tick2();
+    const badge = c.querySelector('[data-integration-card-status]');
+    expect(badge.hidden).toBe(false);
+    expect(badge.getAttribute('variant')).toBe('danger');
+    expect(badge.getAttribute('text')).toBe('Error');
+  });
+
+  it('status="available" → no visible status badge', async () => {
+    const c = mount('<integration-card-ui provider="slack" name="Slack" status="available"></integration-card-ui>');
+    await tick2();
+    const badge = c.querySelector('[data-integration-card-status]');
+    expect(badge.hidden).toBe(true);
+  });
+});
+
+describe('integration-card-ui — events', () => {
+  beforeEach(() => { document.body.innerHTML = ''; });
+
+  it('dispatches "connect" event with provider when available button is pressed', async () => {
+    const c = mount('<integration-card-ui provider="slack" name="Slack" status="available"></integration-card-ui>');
+    await tick2();
+    let received = null;
+    c.addEventListener('connect', (e) => { received = e.detail; });
+    const btn = c.querySelector('[data-integration-card-action]');
+    btn.dispatchEvent(new Event('press', { bubbles: true }));
+    expect(received).toEqual({ provider: 'slack' });
+  });
+
+  it('dispatches "configure" event when connected button is pressed', async () => {
+    const c = mount('<integration-card-ui provider="github" name="GitHub" status="connected"></integration-card-ui>');
+    await tick2();
+    let received = null;
+    c.addEventListener('configure', (e) => { received = e.detail; });
+    const btn = c.querySelector('[data-integration-card-action]');
+    btn.dispatchEvent(new Event('press', { bubbles: true }));
+    expect(received).toEqual({ provider: 'github' });
+  });
+
+  it('dispatches "retry" event when error button is pressed', async () => {
+    const c = mount('<integration-card-ui provider="stripe" name="Stripe" status="error"></integration-card-ui>');
+    await tick2();
+    let received = null;
+    c.addEventListener('retry', (e) => { received = e.detail; });
+    const btn = c.querySelector('[data-integration-card-action]');
+    btn.dispatchEvent(new Event('press', { bubbles: true }));
+    expect(received).toEqual({ provider: 'stripe' });
+  });
+
+  it('[disabled] suppresses button activation', async () => {
+    const c = mount('<integration-card-ui provider="slack" name="Slack" status="available" disabled></integration-card-ui>');
+    await tick2();
+    let received = null;
+    c.addEventListener('connect', (e) => { received = e.detail; });
+    const btn = c.querySelector('[data-integration-card-action]');
+    expect(btn.hasAttribute('disabled')).toBe(true);
+    btn.dispatchEvent(new Event('press', { bubbles: true }));
+    expect(received).toBeNull();
+  });
+
+  it('pending status does not dispatch any event on press', async () => {
+    const c = mount('<integration-card-ui provider="slack" name="Slack" status="pending"></integration-card-ui>');
+    await tick2();
+    let received = null;
+    c.addEventListener('connect', (e) => { received = e.detail; });
+    c.addEventListener('configure', (e) => { received = e.detail; });
+    c.addEventListener('retry', (e) => { received = e.detail; });
+    const btn = c.querySelector('[data-integration-card-action]');
+    btn.dispatchEvent(new Event('press', { bubbles: true }));
+    expect(received).toBeNull();
+  });
+});
+
+describe('integration-card-ui — error message', () => {
+  beforeEach(() => { document.body.innerHTML = ''; });
+
+  it('renders error-message when status="error"', async () => {
+    const c = mount('<integration-card-ui provider="stripe" name="Stripe" status="error" error-message="Token expired"></integration-card-ui>');
+    await tick2();
+    const err = c.querySelector('[data-integration-card-error]');
+    expect(err).not.toBeNull();
+    expect(err.hidden).toBe(false);
+    expect(err.textContent).toBe('Token expired');
+  });
+
+  it('hides error message when status is not error', async () => {
+    const c = mount('<integration-card-ui provider="stripe" name="Stripe" status="available" error-message="Stale"></integration-card-ui>');
+    await tick2();
+    const err = c.querySelector('[data-integration-card-error]');
+    if (err) expect(err.hidden).toBe(true);
+  });
+
+  it('does not render error block when status="error" but error-message empty', async () => {
+    const c = mount('<integration-card-ui provider="stripe" name="Stripe" status="error"></integration-card-ui>');
+    await tick2();
+    const err = c.querySelector('[data-integration-card-error]');
+    // Either the element is absent or hidden.
+    if (err) expect(err.hidden).toBe(true);
+  });
+});
+
+describe('integration-card-ui — logo rendering', () => {
+  beforeEach(() => { document.body.innerHTML = ''; });
+
+  it('renders <img> when logo prop contains a "/"', async () => {
+    const c = mount('<integration-card-ui provider="slack" name="Slack" logo="/integrations/slack.svg"></integration-card-ui>');
+    await tick2();
+    const img = c.querySelector('[data-integration-card-logo] img');
+    expect(img).not.toBeNull();
+    expect(img.getAttribute('src')).toBe('/integrations/slack.svg');
+    expect(img.getAttribute('alt')).toContain('Slack');
+    expect(img.hasAttribute('data-integration-logo')).toBe(true);
+  });
+
+  it('renders <icon-ui> when logo prop is a bare icon name', async () => {
+    const c = mount('<integration-card-ui provider="zap" name="Zap" logo="lightning"></integration-card-ui>');
+    await tick2();
+    const icon = c.querySelector('[data-integration-card-logo] icon-ui');
+    expect(icon).not.toBeNull();
+    expect(icon.getAttribute('name')).toBe('lightning');
+  });
+
+  it('hides logo wrapper when logo prop is empty', async () => {
+    const c = mount('<integration-card-ui provider="slack" name="Slack"></integration-card-ui>');
+    await tick2();
+    const wrap = c.querySelector('[data-integration-card-logo]');
+    expect(wrap).not.toBeNull();
+    expect(wrap.hidden).toBe(true);
+  });
+});
+
+describe('integration-card-ui — CSS contract (source-grep)', () => {
+  it('uses two-block @scope pattern (token block + base block)', async () => {
+    const { readFileSync } = await import('node:fs');
+    const { fileURLToPath } = await import('node:url');
+    const { dirname, resolve } = await import('node:path');
+    const HERE = dirname(fileURLToPath(import.meta.url));
+    const CSS = readFileSync(resolve(HERE, 'integration-card.css'), 'utf8');
+
+    expect(CSS).toMatch(/@scope\s*\(\s*integration-card-ui\s*\)/);
+    expect(CSS).toMatch(/:where\(:scope\)\s*\{/);
+    expect(CSS).toMatch(/--integration-card-bg:/);
+    expect(CSS).toMatch(/--integration-card-border:/);
+    expect(CSS).toMatch(/--integration-card-radius:/);
+  });
+
+  it('keeps status-driven border tint (status="connected") inside @scope', async () => {
+    const { readFileSync } = await import('node:fs');
+    const { fileURLToPath } = await import('node:url');
+    const { dirname, resolve } = await import('node:path');
+    const HERE = dirname(fileURLToPath(import.meta.url));
+    const CSS = readFileSync(resolve(HERE, 'integration-card.css'), 'utf8');
+    expect(CSS).toMatch(/:scope\[status="connected"\]\s*\{[^}]*--integration-card-border/);
+    expect(CSS).toMatch(/:scope\[status="error"\]\s*\{[^}]*--integration-card-border/);
+  });
+
+  it('does NOT carry raw hex / rgb / oklch values', async () => {
+    const { readFileSync } = await import('node:fs');
+    const { fileURLToPath } = await import('node:url');
+    const { dirname, resolve } = await import('node:path');
+    const HERE = dirname(fileURLToPath(import.meta.url));
+    const CSS = readFileSync(resolve(HERE, 'integration-card.css'), 'utf8');
+    // No #abc / #abcdef
+    expect(CSS).not.toMatch(/#[0-9a-fA-F]{3,8}\b/);
+    // No rgb()/rgba()
+    expect(CSS).not.toMatch(/\brgba?\s*\(/);
+    // No raw oklch()
+    expect(CSS).not.toMatch(/\boklch\s*\(/);
+  });
+});