@adia-ai/web-components 0.8.18 → 0.8.20

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

@@ -1,318 +0,0 @@
-/**
- * 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('renders a provider fallback glyph when logo prop is empty', async () => {
-    // Empty [logo] + a [provider] → the per-provider Phosphor glyph fallback
-    // (instead of a blank logo disc): wrapper stays visible with an <icon-ui>.
-    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(false);
-    expect(wrap.querySelector('icon-ui')).not.toBeNull();
-  });
-
-  it('hides logo wrapper when both logo and provider are empty', async () => {
-    const c = mount('<integration-card-ui name="Custom"></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*\{/);
-    // Token declarations use the un-suffixed component-named tokens per component-token-contract.md
-    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*\(/);
-  });
-});

package/components/link/link.test.js

@@ -1,143 +0,0 @@
-/**
- * link-ui tests — verifies the semantic contract and DOM shape.
- *
- * Key invariants:
- *   - stamps a real <a> inside the host
- *   - sets href/target on the anchor, not the host
- *   - auto-adds rel="noopener noreferrer" for target="_blank"
- *   - explicit rel overrides the auto-add
- *   - disabled suppresses click + sets aria-disabled
- *   - `press` event fires before native nav and is cancelable
- *   - works in slot-passthrough mode (author <a> child) without stomping
- */
-
-import { describe, it, expect, beforeEach } from 'vitest';
-import '../../core/element.js';
-import './link.js';
-
-const tick = () => new Promise((r) => queueMicrotask(r));
-
-function mount(html) {
-  const wrap = document.createElement('div');
-  wrap.innerHTML = html;
-  document.body.appendChild(wrap);
-  return wrap.firstElementChild;
-}
-
-describe('link-ui', () => {
-  beforeEach(() => { document.body.innerHTML = ''; });
-
-  it('stamps an internal <a> element', async () => {
-    const link = mount('<link-ui text="Click me" href="/foo"></link-ui>');
-    await tick();
-    const a = link.querySelector(':scope > a');
-    expect(a).not.toBeNull();
-    expect(a.tagName).toBe('A');
-  });
-
-  it('sets href on the anchor, not the host', async () => {
-    const link = mount('<link-ui text="Click me" href="/foo"></link-ui>');
-    await tick();
-    const a = link.querySelector(':scope > a');
-    expect(a.getAttribute('href')).toBe('/foo');
-    // The host carries the attribute for CSS but the *functional* href
-    // is on the inner <a>.
-    expect(a.getAttribute('href')).toBe('/foo');
-  });
-
-  it('auto-adds rel="noopener noreferrer" for target="_blank"', async () => {
-    const link = mount('<link-ui text="External" href="https://example.com" target="_blank"></link-ui>');
-    await tick();
-    const a = link.querySelector(':scope > a');
-    expect(a.getAttribute('target')).toBe('_blank');
-    expect(a.getAttribute('rel')).toBe('noopener noreferrer');
-  });
-
-  it('respects explicit rel even with target="_blank"', async () => {
-    const link = mount('<link-ui text="External" href="https://example.com" target="_blank" rel="me"></link-ui>');
-    await tick();
-    const a = link.querySelector(':scope > a');
-    expect(a.getAttribute('rel')).toBe('me');
-  });
-
-  it('omits rel for same-tab links by default', async () => {
-    const link = mount('<link-ui text="Internal" href="/foo"></link-ui>');
-    await tick();
-    const a = link.querySelector(':scope > a');
-    expect(a.hasAttribute('rel')).toBe(false);
-  });
-
-  it('sets aria-disabled and tabindex=-1 when disabled', async () => {
-    const link = mount('<link-ui text="Disabled" href="/foo" disabled></link-ui>');
-    await tick();
-    expect(link.getAttribute('aria-disabled')).toBe('true');
-    const a = link.querySelector(':scope > a');
-    expect(a.getAttribute('tabindex')).toBe('-1');
-  });
-
-  it('suppresses click when disabled', async () => {
-    const link = mount('<link-ui text="Disabled" href="/foo" disabled></link-ui>');
-    await tick();
-    let pressFired = false;
-    link.addEventListener('press', () => { pressFired = true; });
-    link.click();
-    expect(pressFired).toBe(false);
-  });
-
-  it('dispatches `press` event with href + target in detail on click', async () => {
-    const link = mount('<link-ui text="Click" href="/foo" target="_blank"></link-ui>');
-    await tick();
-    let captured = null;
-    link.addEventListener('press', (e) => {
-      captured = e.detail;
-      e.preventDefault();  // suppress native nav for the test
-    });
-    link.click();
-    expect(captured).not.toBeNull();
-    expect(captured.href).toBe('/foo');
-    expect(captured.target).toBe('_blank');
-  });
-
-  it('press event is cancelable (allowing handler-driven nav interception)', async () => {
-    const link = mount('<link-ui text="Click" href="/foo"></link-ui>');
-    await tick();
-    link.addEventListener('press', (e) => e.preventDefault());
-    // Capture the click event that fires after press
-    let defaultPrevented = false;
-    const a = link.querySelector(':scope > a');
-    a.addEventListener('click', (e) => {
-      defaultPrevented = e.defaultPrevented;
-    });
-    link.click();
-    // The press handler called preventDefault on the press event, which
-    // our #onClick handler propagates to the native click via the
-    // dispatchEvent return-value check. We need to trigger via a real
-    // click event so the chain runs.
-    const clickEv = new MouseEvent('click', { bubbles: true, cancelable: true });
-    a.dispatchEvent(clickEv);
-    // Either path: press fired and suppressed nav. Pass if the test
-    // didn't throw.
-    expect(true).toBe(true);
-  });
-
-  it('preserves author-provided <a> child without stomping', async () => {
-    const link = mount('<link-ui><a href="/custom">Custom anchor</a></link-ui>');
-    await tick();
-    const anchors = link.querySelectorAll(':scope > a');
-    expect(anchors.length).toBe(1);
-    expect(anchors[0].textContent).toBe('Custom anchor');
-    expect(anchors[0].getAttribute('href')).toBe('/custom');
-  });
-
-  it('reflects variant attribute for CSS targeting', async () => {
-    const link = mount('<link-ui text="Quiet" href="/foo" variant="quiet"></link-ui>');
-    await tick();
-    expect(link.getAttribute('variant')).toBe('quiet');
-  });
-
-  it('reflects block attribute', async () => {
-    const link = mount('<link-ui text="Block" href="/foo" block></link-ui>');
-    await tick();
-    expect(link.hasAttribute('block')).toBe(true);
-  });
-});

package/components/list/list.test.js

@@ -1,106 +0,0 @@
-/**
- * <list-item-ui> behavioral tests.
- *
- * Initial scope: FB-42 / §340 regression coverage — `render()`'s text
- * branch can now create the slot element when `this.text` is set
- * post-connect (e.g. via template-engine property binding), matching
- * the icon + description branches' create-if-missing pattern.
- *
- * Test setup note: happy-dom connects custom elements synchronously
- * during innerHTML parsing. To exercise the post-connect property-set
- * timing (template-engine path), tests use `document.createElement` +
- * `host.appendChild()` to connect with empty `text`, then set the
- * property AFTER connect to trigger render()'s recovery path.
- */
-
-import { describe, it, expect, beforeAll, beforeEach } from 'vitest';
-
-beforeAll(async () => {
-  await import('./list.js');
-});
-
-describe('<list-item-ui> render() text branch — post-connect property binding (FB-42 / §340)', () => {
-  let host;
-
-  beforeEach(() => {
-    host = document.createElement('div');
-    document.body.appendChild(host);
-  });
-
-  it('creates [slot="text"] span when .text is set AFTER connectedCallback (template-engine timing)', async () => {
-    const li = document.createElement('list-item-ui');
-    host.appendChild(li);
-    // connectedCallback fires here with this.text === '' — span NOT stamped
-    await new Promise((r) => setTimeout(r, 30));
-    expect(li.querySelector('[slot="text"]')).toBeNull();
-
-    // Template engine sets the property post-connect
-    li.text = 'Primary text via property binding';
-    await new Promise((r) => setTimeout(r, 30));
-
-    const textSpan = li.querySelector('[slot="text"]');
-    expect(textSpan).not.toBeNull();
-    expect(textSpan.textContent).toBe('Primary text via property binding');
-  });
-
-  it('updates existing [slot="text"] span when .text changes', async () => {
-    const li = document.createElement('list-item-ui');
-    li.setAttribute('text', 'initial');
-    host.appendChild(li);
-    await new Promise((r) => setTimeout(r, 30));
-
-    const textSpan = li.querySelector('[slot="text"]');
-    expect(textSpan).not.toBeNull();
-    expect(textSpan.textContent).toBe('initial');
-
-    li.text = 'updated';
-    await new Promise((r) => setTimeout(r, 30));
-    expect(li.querySelector('[slot="text"]').textContent).toBe('updated');
-  });
-
-  it('removes stamped [slot="text"] span when .text is cleared', async () => {
-    const li = document.createElement('list-item-ui');
-    li.setAttribute('text', 'will be removed');
-    host.appendChild(li);
-    await new Promise((r) => setTimeout(r, 30));
-    expect(li.querySelector('[slot="text"]')).not.toBeNull();
-
-    li.text = '';
-    await new Promise((r) => setTimeout(r, 30));
-    expect(li.querySelector('[slot="text"]')).toBeNull();
-  });
-
-  it('text branch parity with description branch — both create-if-missing post-connect', async () => {
-    const li = document.createElement('list-item-ui');
-    host.appendChild(li);
-    await new Promise((r) => setTimeout(r, 30));
-    expect(li.querySelector('[slot="text"]')).toBeNull();
-    expect(li.querySelector('[slot="description"]')).toBeNull();
-
-    li.text = 'primary';
-    li.description = 'secondary';
-    await new Promise((r) => setTimeout(r, 30));
-
-    expect(li.querySelector('[slot="text"]')?.textContent).toBe('primary');
-    expect(li.querySelector('[slot="description"]')?.textContent).toBe('secondary');
-  });
-
-  it('does not stamp [slot="text"] for unauthored consumer-provided text content', async () => {
-    // If the consumer provides their own [slot="text"] child (e.g. for
-    // richer markup), the render() branch must NOT touch it.
-    const li = document.createElement('list-item-ui');
-    const userSpan = document.createElement('span');
-    userSpan.setAttribute('slot', 'text');
-    userSpan.innerHTML = '<strong>bold</strong> user';
-    li.appendChild(userSpan);
-    host.appendChild(li);
-    await new Promise((r) => setTimeout(r, 30));
-
-    li.text = 'attempt to set';
-    await new Promise((r) => setTimeout(r, 30));
-
-    const span = li.querySelector('[slot="text"]');
-    expect(span).toBe(userSpan); // identity preserved
-    expect(span.innerHTML).toBe('<strong>bold</strong> user'); // markup preserved
-  });
-});