@adia-ai/web-components 0.8.18 → 0.8.20

package/components/color-picker/color-picker.test.js

@@ -1,96 +0,0 @@
-/**
- * color-picker-ui #parseValue tests — §201 (v0.5.7, FEEDBACK-13 §1 +
- * FEEDBACK-14 §2 co-credited).
- *
- * Verifies the relaxed `oklch(L C H)` parser accepts:
- *   - Numeric channels (regression — the v0.5.6 baseline)
- *   - `NaN` on any channel (culori chromaless convention; coerces to 0)
- *   - `none` on any channel (CSS Color L4 powerless syntax; coerces to 0)
- *   - Percent on L (e.g. `oklch(53% 0.05 240)`; divides by 100)
- *
- * Plus:
- *   - Truly malformed input emits ONE console.warn per element (WeakSet dedup),
- *     not one per #parseValue call.
- *   - Hex pass-through remains intact.
- */
-
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import '../../core/element.js';
-import './color-picker.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('color-picker-ui #parseValue (§201)', () => {
-  beforeEach(() => { document.body.innerHTML = ''; });
-
-  it('accepts numeric oklch (baseline regression)', async () => {
-    const p = mount('<color-picker-ui format="oklch" value="oklch(0.6 0.15 240)"></color-picker-ui>');
-    await tick();
-    // Read back via the public value getter — round-tripped through the parser.
-    expect(p.value).toMatch(/oklch/);
-  });
-
-  it('accepts NaN hue (culori chromaless convention)', async () => {
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
-    const p = mount('<color-picker-ui format="oklch" value="oklch(0.53 0.01 NaN)"></color-picker-ui>');
-    await tick();
-    // No warn — NaN is accepted, coerced to 0.
-    expect(warn).not.toHaveBeenCalled();
-    warn.mockRestore();
-  });
-
-  it('accepts `none` (CSS Color L4 powerless)', async () => {
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
-    const p = mount('<color-picker-ui format="oklch" value="oklch(0.5 0 none)"></color-picker-ui>');
-    await tick();
-    expect(warn).not.toHaveBeenCalled();
-    warn.mockRestore();
-  });
-
-  it('accepts percent on L', async () => {
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
-    const p = mount('<color-picker-ui format="oklch" value="oklch(53% 0.05 240)"></color-picker-ui>');
-    await tick();
-    expect(warn).not.toHaveBeenCalled();
-    warn.mockRestore();
-  });
-
-  it('accepts hex (regression)', async () => {
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
-    const p = mount('<color-picker-ui format="hex" value="#3b82f6"></color-picker-ui>');
-    await tick();
-    expect(warn).not.toHaveBeenCalled();
-    warn.mockRestore();
-  });
-
-  it('warns once per element on malformed input', async () => {
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
-    const p = mount('<color-picker-ui format="oklch" value="oklch(banana)"></color-picker-ui>');
-    await tick();
-    // Drive multiple re-parses via setAttribute — should NOT compound the warn count.
-    p.setAttribute('value', 'oklch(orange juice)');
-    await tick();
-    p.setAttribute('value', 'oklch(still broken)');
-    await tick();
-    expect(warn).toHaveBeenCalledTimes(1);
-    expect(warn.mock.calls[0][0]).toMatch(/could not parse value/);
-    warn.mockRestore();
-  });
-
-  it('two independent pickers each get their own warn budget', async () => {
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
-    const p1 = mount('<color-picker-ui format="oklch" value="oklch(broken-1)"></color-picker-ui>');
-    const p2 = mount('<color-picker-ui format="oklch" value="oklch(broken-2)"></color-picker-ui>');
-    await tick();
-    // Two separate instances — each gets their own first-warn.
-    expect(warn).toHaveBeenCalledTimes(2);
-    warn.mockRestore();
-  });
-});

package/components/combobox/combobox.test.js

@@ -1,256 +0,0 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import '../../core/element.js';
-import './combobox.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('combobox-ui', () => {
-  beforeEach(() => { document.body.innerHTML = ''; });
-
-  it('parses declarative <option> children into the options model', async () => {
-    const el = mount(`
-      <combobox-ui>
-        <option value="a">Alpha</option>
-        <option value="b">Beta</option>
-        <option value="c">Gamma</option>
-      </combobox-ui>
-    `);
-    await tick();
-    expect(el.options.length).toBe(3);
-    expect(el.options[0].value).toBe('a');
-    expect(el.options[0].label).toBe('Alpha');
-  });
-
-  // Wrapper-trap regression (audit-wrapper-trap arm 2): a `.map()`-interpolated
-  // affordance (here [slot="footer"]) arrives nested in a display:contents
-  // wrapper span. The old `:scope > [slot]` grab missed it → innerHTML='' wiped
-  // it. logicalSlotted pierces the wrapper so the footer survives the rebuild.
-  it('preserves a WRAPPED (interpolated) [slot="footer"] across the rebuild (wrapper trap)', async () => {
-    const el = mount(`
-      <combobox-ui>
-        <option value="a">Alpha</option>
-        <span style="display:contents" role="presentation"><div slot="footer" data-test="ft">Footer</div></span>
-      </combobox-ui>
-    `);
-    await tick(); await tick();
-    const footer = el.querySelector('[slot="footer"]');
-    expect(footer).not.toBeNull();
-    expect(footer.dataset.test).toBe('ft');
-  });
-
-  it('honours <option selected> as initial value', async () => {
-    const el = mount(`
-      <combobox-ui>
-        <option value="a">Alpha</option>
-        <option value="b" selected>Beta</option>
-        <option value="c">Gamma</option>
-      </combobox-ui>
-    `);
-    await tick();
-    expect(el.value).toBe('b');
-  });
-
-  it('renders ARIA combobox + listbox wiring per WAI-APG', async () => {
-    const el = mount(`
-      <combobox-ui>
-        <option value="a">Alpha</option>
-      </combobox-ui>
-    `);
-    await tick();
-    // Per spec §5: role + aria-expanded live on the editable surface.
-    const input = el.querySelector('[data-input]');
-    expect(input).toBeTruthy();
-    expect(input.getAttribute('role')).toBe('combobox');
-    expect(input.getAttribute('aria-autocomplete')).toBe('list');
-    expect(input.getAttribute('aria-expanded')).toBe('false');
-    expect(input.hasAttribute('aria-controls')).toBe(true);
-    const listbox = el.querySelector('[data-listbox]');
-    expect(listbox).toBeTruthy();
-    expect(listbox.getAttribute('role')).toBe('listbox');
-  });
-
-  it('programmatic .options = [...] re-renders the listbox', async () => {
-    const el = mount(`<combobox-ui></combobox-ui>`);
-    await tick();
-    el.options = [
-      { value: 'a', label: 'Alpha' },
-      { value: 'b', label: 'Beta' },
-    ];
-    await tick();
-    const opts = el.querySelectorAll('[role="option"]');
-    expect(opts.length).toBe(2);
-    expect(opts[0].dataset.value).toBe('a');
-  });
-
-  it('reflects [open] + aria-expanded on the input when opening', async () => {
-    const el = mount(`
-      <combobox-ui>
-        <option value="a">Alpha</option>
-        <option value="b">Beta</option>
-      </combobox-ui>
-    `);
-    await tick();
-    el.open = true;
-    await tick();
-    expect(el.hasAttribute('open')).toBe(true);
-    const input = el.querySelector('[data-input]');
-    expect(input.getAttribute('aria-expanded')).toBe('true');
-  });
-
-  it('selectOption() commits + fires change with the option object', async () => {
-    const el = mount(`
-      <combobox-ui>
-        <option value="a">Alpha</option>
-        <option value="b">Beta</option>
-      </combobox-ui>
-    `);
-    await tick();
-    let changeDetail = null;
-    el.addEventListener('change', (e) => { changeDetail = e.detail; });
-    const hit = el.selectOption('b');
-    expect(hit).toBe(true);
-    await tick();
-    expect(el.value).toBe('b');
-    expect(changeDetail).not.toBeNull();
-    expect(changeDetail.value).toBe('b');
-    expect(changeDetail.option?.value).toBe('b');
-    expect(changeDetail.source).toBe('programmatic');
-  });
-
-  it('selectOption() returns false for an unknown value (no commit)', async () => {
-    const el = mount(`
-      <combobox-ui>
-        <option value="a">Alpha</option>
-      </combobox-ui>
-    `);
-    await tick();
-    let changeCount = 0;
-    el.addEventListener('change', () => { changeCount += 1; });
-    const hit = el.selectOption('zzz');
-    expect(hit).toBe(false);
-    expect(el.value).toBe('');
-    expect(changeCount).toBe(0);
-  });
-
-  it('clear() resets value + fires change with null option', async () => {
-    const el = mount(`
-      <combobox-ui value="a">
-        <option value="a">Alpha</option>
-        <option value="b">Beta</option>
-      </combobox-ui>
-    `);
-    await tick();
-    let changeDetail = null;
-    el.addEventListener('change', (e) => { changeDetail = e.detail; });
-    el.clear();
-    await tick();
-    expect(el.value).toBe('');
-    expect(changeDetail.option).toBeNull();
-  });
-
-  it('renders aria-selected on the currently committed option', async () => {
-    const el = mount(`
-      <combobox-ui value="b">
-        <option value="a">Alpha</option>
-        <option value="b">Beta</option>
-      </combobox-ui>
-    `);
-    await tick();
-    const opts = el.querySelectorAll('[role="option"]');
-    const selected = Array.from(opts).filter((o) => o.getAttribute('aria-selected') === 'true');
-    expect(selected.length).toBe(1);
-    expect(selected[0].dataset.value).toBe('b');
-  });
-
-  it('exposes UICombobox extending UIFormElement (form participation)', async () => {
-    const el = mount(`
-      <combobox-ui name="x">
-        <option value="a">Alpha</option>
-      </combobox-ui>
-    `);
-    await tick();
-    expect(typeof el.checkValidity).toBe('function');
-    expect(typeof el.syncValue).toBe('function');
-  });
-
-  it('disabled options carry aria-disabled and are skipped by [role="option"][not aria-disabled]', async () => {
-    const el = mount(`
-      <combobox-ui>
-        <option value="a">Alpha</option>
-        <option value="b" disabled>Beta</option>
-        <option value="c">Gamma</option>
-      </combobox-ui>
-    `);
-    await tick();
-    const opts = el.querySelectorAll('[role="option"]');
-    expect(opts.length).toBe(3);
-    expect(opts[1].getAttribute('aria-disabled')).toBe('true');
-    const navigable = el.querySelectorAll('[role="option"]:not([aria-disabled="true"])');
-    expect(navigable.length).toBe(2);
-  });
-
-  it('max-visible-items defaults to 10 and wires the kebab attribute', async () => {
-    const el = mount(`
-      <combobox-ui>
-        <option value="a">Alpha</option>
-      </combobox-ui>
-    `);
-    await tick();
-    expect(el.maxVisibleItems).toBe(10);
-    const el2 = mount(`<combobox-ui max-visible-items="5"></combobox-ui>`);
-    await tick();
-    expect(el2.maxVisibleItems).toBe(5);
-    // Geometry is unmeasurable in this env (rect heights are 0), so the cap
-    // var must NOT be stamped — the browser-level cap is covered by the
-    // Playwright visual harness; here we assert the bail path stays clean.
-    expect(el2.querySelector('[data-listbox]').style.getPropertyValue('--combobox-list-max-block')).toBe('');
-  });
-
-  it('typing wraps the matched substring of each filtered option in <mark>', async () => {
-    const el = mount(`
-      <combobox-ui>
-        <option value="a">Alpha</option>
-        <option value="b">Altitude</option>
-        <option value="c">Gamma</option>
-      </combobox-ui>
-    `);
-    await tick();
-    const input = el.querySelector('[data-input]');
-    input.textContent = 'al';
-    input.dispatchEvent(new Event('input', { bubbles: true }));
-    await tick();
-    const opts = el.querySelectorAll('[data-listbox] [role="option"]');
-    expect(opts.length).toBe(2); // Alpha + Altitude match; Gamma filtered out
-    const marks = el.querySelectorAll('[data-listbox] [role="option"] mark');
-    expect(marks.length).toBe(2);
-    expect(marks[0].textContent.toLowerCase()).toBe('al');
-  });
-
-  it('highlightMatch = false (programmatic) renders filtered options without <mark>', async () => {
-    // NOTE: declarative `highlight-match="false"` does NOT disable (Boolean
-    // attr present → true; the prop's default:true violates the
-    // Boolean-defaults-false contract rule — a pre-existing wart). The
-    // supported disable path is the programmatic setter.
-    const el = mount(`
-      <combobox-ui>
-        <option value="a">Alpha</option>
-        <option value="c">Gamma</option>
-      </combobox-ui>
-    `);
-    await tick();
-    el.highlightMatch = false;
-    const input = el.querySelector('[data-input]');
-    input.textContent = 'al';
-    input.dispatchEvent(new Event('input', { bubbles: true }));
-    await tick();
-    expect(el.querySelectorAll('[data-listbox] [role="option"]').length).toBe(1);
-    expect(el.querySelectorAll('[data-listbox] mark').length).toBe(0);
-  });
-});

package/components/command/command.test.js

@@ -1,99 +0,0 @@
-/**
- * <command-ui> behavioral tests.
- *
- * FB-50 #3 (v0.5.19): the `select` event detail now carries `category`
- * derived from the parent <optgroup label> (or '' when the item has
- * no group).
- */
-
-import { describe, it, expect, beforeAll, beforeEach, afterEach } from 'vitest';
-
-beforeAll(async () => {
-  await import('./command.js');
-});
-
-describe('<command-ui> select event detail includes category (FB-50 #3)', () => {
-  let host;
-  let palette;
-
-  beforeEach(async () => {
-    host = document.createElement('div');
-    document.body.appendChild(host);
-
-    palette = document.createElement('command-ui');
-    palette.setAttribute('open', '');
-
-    // Mixed: one ungrouped option, one optgroup with two options.
-    const ungrouped = document.createElement('option');
-    ungrouped.setAttribute('value', 'logout');
-    ungrouped.textContent = 'Log out';
-
-    const optgroup = document.createElement('optgroup');
-    optgroup.setAttribute('label', 'Navigation');
-    const opt1 = document.createElement('option');
-    opt1.setAttribute('value', 'home');
-    opt1.textContent = 'Go Home';
-    const opt2 = document.createElement('option');
-    opt2.setAttribute('value', 'settings');
-    opt2.textContent = 'Settings';
-    optgroup.appendChild(opt1);
-    optgroup.appendChild(opt2);
-
-    palette.appendChild(ungrouped);
-    palette.appendChild(optgroup);
-    host.appendChild(palette);
-
-    await new Promise((r) => setTimeout(r, 50));
-  });
-
-  afterEach(() => {
-    host.remove();
-  });
-
-  it('emits category="" for an ungrouped option', () => {
-    let received = null;
-    palette.addEventListener('select', (e) => { received = e.detail; });
-
-    // Use the imperative setItems() path to bypass DOM-walk ordering;
-    // the optgroup path is exercised in the next test.
-    palette.setItems([{ value: 'logout', label: 'Log out' }]);
-
-    // Simulate user clicking the logout row.
-    const row = palette.querySelector('[role="option"][data-value="logout"]');
-    expect(row).not.toBeNull();
-    row.click();
-
-    expect(received).not.toBeNull();
-    expect(received.value).toBe('logout');
-    expect(received.label).toBe('Log out');
-    expect(received.category).toBe('');
-  });
-
-  it('emits category="<optgroup label>" for an item inside an optgroup', () => {
-    let received = null;
-    palette.addEventListener('select', (e) => { received = e.detail; });
-
-    const homeRow = palette.querySelector('[role="option"][data-value="home"]');
-    expect(homeRow).not.toBeNull();
-    homeRow.click();
-
-    expect(received).not.toBeNull();
-    expect(received.value).toBe('home');
-    expect(received.label).toBe('Go Home');
-    expect(received.category).toBe('Navigation');
-  });
-
-  it('detail shape stays backward-compatible (existing destructuring works)', () => {
-    let received = null;
-    palette.addEventListener('select', (e) => {
-      const { value, label } = e.detail;  // pre-FB-50 destructuring shape
-      received = { value, label };
-    });
-
-    const settingsRow = palette.querySelector('[role="option"][data-value="settings"]');
-    settingsRow.click();
-
-    expect(received.value).toBe('settings');
-    expect(received.label).toBe('Settings');
-  });
-});