@adia-ai/web-components 0.8.19 → 0.8.21

package/components/display-field/display-field.test.js

@@ -1,115 +0,0 @@
-/**
- * display-field-ui — display-only labeled value (upstream finding F5).
- *
- * Covers the contract that makes it NOT a control: group-label a11y, the
- * dual value path (attr vs foreign slot), and the optional icon/hint that
- * are removed (not just hidden) when their attribute clears.
- */
-import { describe, it, expect, beforeEach } from 'vitest';
-import '../../core/element.js';
-import './display-field.js';
-import '../icon/icon.js';
-
-const raf = () => new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)));
-
-function mount(html) {
-  const wrap = document.createElement('div');
-  wrap.innerHTML = html;
-  document.body.appendChild(wrap);
-  return wrap.firstElementChild;
-}
-
-describe('display-field-ui', () => {
-  beforeEach(() => { document.body.innerHTML = ''; });
-
-  it('renders as a labeled group: role=group + aria-labelledby → the label element', async () => {
-    const el = mount('<display-field-ui label="Account ID" value="acct_1Q9xK2"></display-field-ui>');
-    await raf();
-    expect(el.getAttribute('role')).toBe('group');
-    const labelEl = el.querySelector(':scope > [slot="label"]');
-    expect(labelEl).not.toBeNull();
-    expect(labelEl.textContent).toBe('Account ID');
-    expect(labelEl.id).toBeTruthy();
-    expect(el.getAttribute('aria-labelledby')).toBe(labelEl.id);
-  });
-
-  it('carries no input/focus/form semantics (no contenteditable, not focusable, no tabindex)', async () => {
-    const el = mount('<display-field-ui label="Card" value="•••• 4242"></display-field-ui>');
-    await raf();
-    expect(el.getAttribute('contenteditable')).toBeNull();
-    expect(el.getAttribute('tabindex')).toBeNull();
-    const valueEl = el.querySelector(':scope > [slot="value"]');
-    expect(valueEl.getAttribute('contenteditable')).toBeNull();
-    expect(valueEl.textContent).toBe('•••• 4242');
-  });
-
-  it('variant="masked" reflects and the value text is preserved', async () => {
-    const el = mount('<display-field-ui label="Card" value="•••• 4242" variant="masked"></display-field-ui>');
-    await raf();
-    expect(el.getAttribute('variant')).toBe('masked');
-    expect(el.querySelector(':scope > [slot="value"]').textContent).toBe('•••• 4242');
-  });
-
-  it('a foreign default-slot child owns the value region — the attr value element is suppressed', async () => {
-    const el = mount('<display-field-ui label="Card number"><div id="mount">[stripe]</div></display-field-ui>');
-    await raf();
-    // No auto [slot="value"] element — the foreign child is the value.
-    expect(el.querySelector(':scope > [slot="value"]')).toBeNull();
-    const foreign = el.querySelector(':scope > #mount');
-    expect(foreign).not.toBeNull();
-    expect(foreign.getAttribute('slot')).toBeNull();   // genuinely unnamed
-  });
-
-  it('icon attribute creates a leading icon-ui; clearing it removes the element (no phantom column)', async () => {
-    const el = mount('<display-field-ui label="Card" value="•••• 4242" icon="lock"></display-field-ui>');
-    await raf();
-    const iconEl = el.querySelector(':scope > icon-ui[slot="icon"]');
-    expect(iconEl).not.toBeNull();
-    expect(iconEl.getAttribute('name')).toBe('lock');
-
-    el.icon = '';
-    await raf();
-    expect(el.querySelector(':scope > [slot="icon"]')).toBeNull();
-  });
-
-  it('hint attribute creates a hint element + aria-describedby; clearing it removes both', async () => {
-    const el = mount('<display-field-ui label="Card" value="•••• 4242" hint="Expires 12/26"></display-field-ui>');
-    await raf();
-    const hintEl = el.querySelector(':scope > [slot="hint"]');
-    expect(hintEl).not.toBeNull();
-    expect(hintEl.textContent).toBe('Expires 12/26');
-    expect(el.getAttribute('aria-describedby')).toBe(hintEl.id);
-
-    el.hint = '';
-    await raf();
-    expect(el.querySelector(':scope > [slot="hint"]')).toBeNull();
-    expect(el.getAttribute('aria-describedby')).toBeNull();
-  });
-
-  it('surviving a DOM move (disconnect→reconnect) does NOT duplicate slot children', async () => {
-    const host1 = mount('<div></div>');
-    const el = document.createElement('display-field-ui');
-    el.setAttribute('label', 'Card');
-    el.setAttribute('value', '•••• 4242');
-    el.setAttribute('hint', 'Expires 12/26');
-    el.setAttribute('icon', 'lock');
-    host1.appendChild(el);
-    await raf();
-    expect(el.querySelectorAll(':scope > [slot="value"]').length).toBe(1);
-    expect(el.querySelectorAll(':scope > [slot="hint"]').length).toBe(1);
-    expect(el.querySelectorAll(':scope > icon-ui[slot="icon"]').length).toBe(1);
-
-    // Move to a new parent — fires disconnectedCallback then connectedCallback,
-    // exactly what UIElement.reconcile's insertBefore does on a keyed reorder.
-    const host2 = mount('<div></div>');
-    host2.appendChild(el);
-    await raf();
-
-    // No duplicates after the move — connected() re-binds the existing nodes.
-    expect(el.querySelectorAll(':scope > [slot="label"]').length).toBe(1);
-    expect(el.querySelectorAll(':scope > [slot="value"]').length).toBe(1);
-    expect(el.querySelectorAll(':scope > [slot="hint"]').length).toBe(1);
-    expect(el.querySelectorAll(':scope > icon-ui[slot="icon"]').length).toBe(1);
-    expect(el.querySelector(':scope > [slot="value"]').textContent).toBe('•••• 4242');
-  });
-});

package/components/empty-state/empty-state.test.js

@@ -1,77 +0,0 @@
-/**
- * empty-state-ui — focused unit tests for the §223 (v0.5.9) `minimal`
- * boolean prop.
- *
- * Pre-§223 only the centered-column canvas layout existed. §223 adds
- * an inline single-row muted layout for placeholder cells / table rows
- * where the full-canvas placeholder is too prominent (R13 §4).
- */
-
-import { describe, it, expect, beforeEach } from 'vitest';
-import '../../core/element.js';
-import './empty-state.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('empty-state-ui — §223 (v0.5.9) minimal mode', () => {
-  beforeEach(() => { document.body.innerHTML = ''; });
-
-  it('defaults to non-minimal (canvas-style placeholder)', () => {
-    const el = mount('<empty-state-ui heading="No results"></empty-state-ui>');
-    expect(el.minimal).toBe(false);
-    expect(el.hasAttribute('minimal')).toBe(false);
-  });
-
-  it('reflects [minimal] attribute to the property', () => {
-    const el = mount('<empty-state-ui minimal heading="No matches"></empty-state-ui>');
-    expect(el.minimal).toBe(true);
-    expect(el.hasAttribute('minimal')).toBe(true);
-  });
-
-  it('stamps icon WITHOUT size="lg" when minimal', async () => {
-    const el = mount('<empty-state-ui minimal icon="search" heading="No matches"></empty-state-ui>');
-    await tick();
-    const icon = el.querySelector(':scope > [slot="icon"]');
-    expect(icon).not.toBeNull();
-    // Minimal layout uses 1em inherited font-size; non-minimal stamps lg.
-    expect(icon.hasAttribute('size')).toBe(false);
-  });
-
-  it('stamps icon WITH size="lg" when not minimal (no regression)', async () => {
-    const el = mount('<empty-state-ui icon="search" heading="No matches"></empty-state-ui>');
-    await tick();
-    const icon = el.querySelector(':scope > [slot="icon"]');
-    expect(icon).not.toBeNull();
-    expect(icon.getAttribute('size')).toBe('lg');
-  });
-
-  it('stamps heading + description slots in both modes', async () => {
-    const minimal = mount('<empty-state-ui minimal heading="Empty" description="No rows"></empty-state-ui>');
-    const canvas = mount('<empty-state-ui heading="Empty" description="No rows"></empty-state-ui>');
-    await tick();
-
-    for (const el of [minimal, canvas]) {
-      const h = el.querySelector(':scope > [slot="heading"]');
-      const d = el.querySelector(':scope > [slot="description"]');
-      expect(h?.textContent).toBe('Empty');
-      expect(d?.textContent).toBe('No rows');
-    }
-  });
-
-  it('honors a consumer-provided [slot="action"] child in either mode', () => {
-    const el = mount(`
-      <empty-state-ui minimal heading="Empty">
-        <button slot="action" data-test="reset">Reset</button>
-      </empty-state-ui>
-    `);
-    const action = el.querySelector(':scope > [slot="action"][data-test="reset"]');
-    expect(action).not.toBeNull();
-  });
-});

package/components/field/field.test.js

@@ -1,260 +0,0 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import { readFileSync } from 'node:fs';
-import { fileURLToPath } from 'node:url';
-import { dirname, resolve } from 'node:path';
-import '../../core/element.js';
-import './field.js';
-// Preload <input-ui> at module top so the error-mirror test can rely on
-// UIFormElement being registered without a dynamic import. The dynamic
-// `await import('../input/input.js')` inside the test body was a known
-// flake source under the full-suite parallel transform pipeline; moving
-// it to top-level removes that race entirely.
-import '../input/input.js';
-
-const HERE = dirname(fileURLToPath(import.meta.url));
-const FIELD_CSS = readFileSync(resolve(HERE, 'field.css'), 'utf8');
-
-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('field-ui', () => {
-  beforeEach(() => { document.body.innerHTML = ''; });
-
-  it('renders a <label> element carrying the `label` attr text', () => {
-    const f = mount('<field-ui label="Email"><input id="e" /></field-ui>');
-    const label = f.querySelector('label[data-field-label]');
-    expect(label).not.toBeNull();
-    // The label's first child is the text node; a hidden required-marker
-    // span is its last child (mounted but hidden). Inspecting textContent
-    // of the text node isolates the label copy from the marker.
-    expect(label.firstChild.nodeValue).toBe('Email');
-  });
-
-  it('auto-mints an id on the slotted control when missing and binds label[for]', () => {
-    const f = mount('<field-ui label="Email"><input /></field-ui>');
-    const input = f.querySelector('input');
-    const label = f.querySelector('label[data-field-label]');
-    expect(input.id).toMatch(/^field-ctl-/);
-    expect(label.getAttribute('for')).toBe(input.id);
-  });
-
-  it('respects an existing id on the slotted control', () => {
-    const f = mount('<field-ui label="Email"><input id="existing" /></field-ui>');
-    const input = f.querySelector('input');
-    const label = f.querySelector('label[data-field-label]');
-    expect(input.id).toBe('existing');
-    expect(label.getAttribute('for')).toBe('existing');
-  });
-
-  it('ignores [slot="trailing"] and [slot="action"] when picking the control', () => {
-    const f = mount(`
-      <field-ui label="Search">
-        <span slot="trailing">⌘K</span>
-        <input />
-        <button slot="action">x</button>
-      </field-ui>
-    `);
-    const input = f.querySelector('input');
-    const label = f.querySelector('label[data-field-label]');
-    expect(label.getAttribute('for')).toBe(input.id);
-  });
-
-  it('updates label text when the `label` attr changes', async () => {
-    const f = mount('<field-ui label="Email"><input /></field-ui>');
-    const label = f.querySelector('label[data-field-label]');
-    expect(label.firstChild.nodeValue).toBe('Email');
-    f.setAttribute('label', 'Username');
-    await tick();
-    expect(label.firstChild.nodeValue).toBe('Username');
-  });
-
-  it('rebinds label[for] when children change', async () => {
-    const f = mount('<field-ui label="X"><input id="first" /></field-ui>');
-    const label = f.querySelector('label[data-field-label]');
-    expect(label.getAttribute('for')).toBe('first');
-    // Replace the control.
-    f.querySelector('input').remove();
-    const next = document.createElement('input');
-    next.id = 'second';
-    f.appendChild(next);
-    // MutationObserver fires async on microtask.
-    await new Promise((r) => setTimeout(r, 10));
-    expect(label.getAttribute('for')).toBe('second');
-  });
-
-  it('reflects `inline` as a boolean attr (default false)', () => {
-    const f = mount('<field-ui label="X"><input /></field-ui>');
-    expect(f.hasAttribute('inline')).toBe(false);
-    f.inline = true;
-    expect(f.hasAttribute('inline')).toBe(true);
-    f.inline = false;
-    expect(f.hasAttribute('inline')).toBe(false);
-  });
-
-  it('renders without a label (label attr absent) — hides the <label> element', () => {
-    const f = mount('<field-ui><input /></field-ui>');
-    const label = f.querySelector('label[data-field-label]');
-    expect(label).not.toBeNull();
-    const input = f.querySelector('input');
-    expect(label.getAttribute('for')).toBe(input.id);
-  });
-
-  it('renders a hint element + wires aria-describedby when `hint` is set', async () => {
-    const f = mount('<field-ui label="E" hint="We keep it private"><input /></field-ui>');
-    await tick();
-    const hint = f.querySelector('[data-field-hint]');
-    const input = f.querySelector('input');
-    expect(hint?.textContent).toBe('We keep it private');
-    expect(hint?.hidden).toBe(false);
-    expect(input.getAttribute('aria-describedby')).toBe(hint.id);
-  });
-
-  it('hides hint when `hint` is empty', async () => {
-    const f = mount('<field-ui label="E"><input /></field-ui>');
-    await tick();
-    const hint = f.querySelector('[data-field-hint]');
-    expect(hint?.hidden).toBe(true);
-    const input = f.querySelector('input');
-    expect(input.hasAttribute('aria-describedby')).toBe(false);
-  });
-
-  it('renders an error element + suppresses hint when both set', async () => {
-    // Per field.js error-mirror architecture: field-ui reads .error from
-    // the CHILD UIFormElement control (not from its own attribute). So
-    // the test sets [error] on <input-ui> (UIFormElement-extending) — not
-    // <input> (raw HTML, no .error getter). input-ui is preloaded at the
-    // top of this file to avoid a flake-prone dynamic import here.
-    const f = mount('<field-ui label="E" hint="hi"><input-ui error="Required"></input-ui></field-ui>');
-    await tick();
-    const hint = f.querySelector('[data-field-hint]');
-    const err  = f.querySelector('[data-field-error]');
-    expect(err?.textContent).toBe('Required');
-    expect(err?.hidden).toBe(false);
-    expect(err?.getAttribute('role')).toBe('alert');
-    expect(hint?.hidden).toBe(true);  // error wins
-    // aria-describedby is set on the field-ui's CONTROL (the <input-ui>),
-    // not on its inner <input>. field-ui targets the control via
-    // #findControl() (first non-slot child).
-    const control = f.querySelector('input-ui');
-    expect(control.getAttribute('aria-describedby')).toBe(err.id);
-  });
-
-  it('renders the `*` required marker on the label when `required` is set', async () => {
-    const f = mount('<field-ui label="Email" required><input /></field-ui>');
-    await tick();
-    const label = f.querySelector('label[data-field-label]');
-    const mark = label.querySelector('[data-field-required]');
-    expect(mark?.textContent).toBe('*');
-    expect(mark?.getAttribute('aria-hidden')).toBe('true');
-  });
-
-  it('updates hint/error text reactively when attrs change', async () => {
-    const f = mount('<field-ui label="E" hint="a"><input /></field-ui>');
-    await tick();
-    const hint = f.querySelector('[data-field-hint]');
-    expect(hint.textContent).toBe('a');
-    f.hint = 'b';
-    await tick();
-    expect(hint.textContent).toBe('b');
-  });
-
-  // ── §304 align prop ─────────────────────────────────────────────
-
-  it('align defaults to "start" as a JS property when not set', () => {
-    const f = mount('<field-ui label="Email"><input /></field-ui>');
-    // The attribute is absent until explicitly set (UIElement does not auto-write
-    // the default value to the DOM attribute on construction — it only provides
-    // the JS property default). The property value IS the default.
-    expect(f.align).toBe('start');
-    // Attribute is absent (null) until set
-    expect(f.getAttribute('align')).toBeNull();
-  });
-
-  it('reflect align="end" as attribute', async () => {
-    const f = mount('<field-ui label="Email" align="end"><input /></field-ui>');
-    await tick();
-    expect(f.getAttribute('align')).toBe('end');
-    expect(f.align).toBe('end');
-  });
-
-  it('setting align property reflects to attribute', async () => {
-    const f = mount('<field-ui label="Email"><input /></field-ui>');
-    f.align = 'end';
-    await tick();
-    expect(f.getAttribute('align')).toBe('end');
-  });
-
-  it('CSS source contract: [align="end"] rule sets justify-self:end on the label cell', () => {
-    // Verify the CSS file contains the structural rule, not just that it exists.
-    // This pin prevents silent removal of the CSS and surfaces it in test output.
-    const sheet = [...document.styleSheets].find(
-      (s) => s.href?.includes('field.css') || s.ownerNode?.textContent?.includes('align')
-    );
-    // In jsdom/happy-dom, @scope stylesheets may not be fully parsed.
-    // Fall back to a source-level contract pin via a regex on the class source.
-    // The CSS rule must be present in the source; this test documents intent
-    // rather than measuring computed style (which requires a real browser for @scope).
-    const fieldCssSource = document.head.innerHTML + document.body.innerHTML;
-    // Accept if either the stylesheet is found OR the field.class.js property is declared.
-    const hasAlignProp = f => f.align !== undefined;
-    const f = mount('<field-ui label="X"><input /></field-ui>');
-    expect(hasAlignProp(f)).toBe(true);
-  });
-
-  // ── FB-54 row-gap presence guard ──────────────────────────────────
-  //
-  // field-ui grid's :scope previously declared `row-gap: var(--field-gap)`
-  // unconditionally. Without a hint/error slot the message row collapses
-  // to 0px content, but the gap is still reserved — so field-ui[inline]
-  // is ~7-8 px taller than non-field-ui siblings in a row-ui[align=center].
-  //
-  // The fix moves `row-gap` into a `:has(> [slot="hint"], > [slot="error"])`
-  // guard. jsdom doesn't evaluate @scope rules in getComputedStyle, so the
-  // contract is locked by source-grep — same recipe as
-  // description-list / text-ui / tag-ui contract pins.
-
-  it('CSS source contract: base :scope does NOT declare unconditional row-gap', () => {
-    // Match the `:scope { ... }` block (no chained attribute/pseudo selectors).
-    // Within that block, `row-gap` must NOT appear.
-    const scopeBlock = FIELD_CSS.match(/:scope\s*\{[^}]+\}/);
-    expect(scopeBlock).not.toBeNull();
-    expect(scopeBlock[0]).not.toMatch(/row-gap\s*:/);
-  });
-
-  it('CSS source contract: `:scope:has([slot="hint"], [slot="error"])` declares row-gap', () => {
-    // The `>` direct-child combinator is OPTIONAL — field.css uses the
-    // descendant form `:has([slot="hint"], [slot="error"])` (v0.6.x); either
-    // satisfies the FB-54 row-gap-presence-guard contract.
-    expect(FIELD_CSS).toMatch(
-      // `var(--field-gap[,)]` matches the bare `var(--field-gap)` read (the `)`
-      // branch); the `,` branch tolerates any legacy fallback form.
-      /:scope:has\((?:>\s*)?\[slot="hint"\]\s*,\s*(?:>\s*)?\[slot="error"\]\)\s*\{[^}]*row-gap:\s*var\(--field-gap[,)]/
-    );
-  });
-
-  it('binds the CONTROL (not junk label/error siblings) — the gen-UI contact-form incident', async () => {
-    // Generated markup sometimes lands a text-ui "label" + a <small> error
-    // INSIDE field-ui (the 2026-06-10 canvas incident). The old first-slot-less
-    // rule bound the text-ui as the control, stealing the id/for wiring.
-    const el = mount(`
-      <field-ui label="Full Name">
-        <text-ui variant="label" weight="semibold">Full Name</text-ui>
-        <input-ui type="text" name="name" placeholder="Enter your full name"></input-ui>
-        <small color="danger">Name is required</small>
-      </field-ui>
-    `);
-    await tick(); await tick();
-    const input = el.querySelector('input-ui');
-    const textUi = el.querySelector('text-ui');
-    const label = el.querySelector('[data-field-label]');
-    expect(input.id).toMatch(/^field-ctl-/);          // the real control got the binding
-    expect(textUi.id || '').not.toMatch(/^field-ctl-/); // the junk label did NOT
-    expect(label.getAttribute('for')).toBe(input.id);
-  });
-});

package/components/fields/fields.test.js

@@ -1,88 +0,0 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import '../../core/element.js';
-import './fields.js';
-import '../field/field.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('fields-ui', () => {
-  beforeEach(() => { document.body.innerHTML = ''; });
-
-  it('registers the custom element', () => {
-    expect(customElements.get('fields-ui')).toBeDefined();
-  });
-
-  it('hosts <field-ui> children without altering them by default', () => {
-    const f = mount(`
-      <fields-ui>
-        <field-ui label="A"><input id="a" /></field-ui>
-        <field-ui label="B"><input id="b" /></field-ui>
-      </fields-ui>
-    `);
-    const fields = f.querySelectorAll('field-ui');
-    expect(fields).toHaveLength(2);
-    // Default — neither child has [inline] propagated.
-    expect(fields[0].hasAttribute('inline')).toBe(false);
-    expect(fields[1].hasAttribute('inline')).toBe(false);
-  });
-
-  it('propagates [inline] to every direct <field-ui> child on connect', async () => {
-    const f = mount(`
-      <fields-ui inline>
-        <field-ui label="A"><input id="a" /></field-ui>
-        <field-ui label="B"><input id="b" /></field-ui>
-      </fields-ui>
-    `);
-    await tick();
-    const fields = f.querySelectorAll('field-ui');
-    for (const child of fields) {
-      expect(child.hasAttribute('inline')).toBe(true);
-    }
-  });
-
-  it('removes inline from children when [inline] is removed from host', async () => {
-    const f = mount(`
-      <fields-ui inline>
-        <field-ui label="A"><input id="a" /></field-ui>
-        <field-ui label="B"><input id="b" /></field-ui>
-      </fields-ui>
-    `);
-    await tick();
-    f.removeAttribute('inline');
-    await tick();
-    const fields = f.querySelectorAll('field-ui');
-    for (const child of fields) {
-      expect(child.hasAttribute('inline')).toBe(false);
-    }
-  });
-
-  it('re-syncs inline when a new <field-ui> is appended later', async () => {
-    const f = mount(`<fields-ui inline></fields-ui>`);
-    await tick();
-    const child = document.createElement('field-ui');
-    child.setAttribute('label', 'Late');
-    f.appendChild(child);
-    // MutationObserver fires async — give it a microtask.
-    await new Promise((r) => setTimeout(r, 0));
-    expect(child.hasAttribute('inline')).toBe(true);
-  });
-
-  it('does not propagate [inline] to non-field children', async () => {
-    const f = mount(`
-      <fields-ui inline>
-        <field-ui label="A"><input id="a" /></field-ui>
-        <span class="separator">—</span>
-      </fields-ui>
-    `);
-    await tick();
-    const span = f.querySelector('.separator');
-    expect(span.hasAttribute('inline')).toBe(false);
-  });
-});