@adia-ai/web-components 0.8.19 → 0.8.20

package/components/tag/tag.test.js

@@ -1,137 +0,0 @@
-/**
- * tag-ui regression tests.
- *
- * Source-grep contract for the `content: attr(text)` gating pattern.
- * Pre-fix (ungated `:scope::after { content: attr(text) }`), an empty
- * `attr(text)` still generated a zero-width pseudo-element flex item,
- * and the host's `inline-flex` + `gap` added a phantom `--tag-gap`
- * trailing space after slotted content like `<tag-ui>Beta</tag-ui>`.
- * The fix gates the pseudo-element on `[text]` attribute presence, so
- * slot-content consumers don't pay the gap cost.
- *
- * jsdom doesn't evaluate `@scope` rules via `getComputedStyle()`, so
- * we validate the CSS source shape directly (same recipe as
- * description-list.test.js and text.test.js).
- */
-
-import { describe, it, expect } from 'vitest';
-import { readFileSync } from 'node:fs';
-import { fileURLToPath } from 'node:url';
-import { dirname, resolve } from 'node:path';
-
-const HERE = dirname(fileURLToPath(import.meta.url));
-const TAG_CSS = readFileSync(resolve(HERE, 'tag.css'), 'utf8');
-
-describe('tag-ui — content: attr(text) gating', () => {
-  it('gates the ::after pseudo-element on [text] attribute presence', () => {
-    // The fixed rule: `:scope[text]::after { content: attr(text); }`
-    expect(TAG_CSS).toMatch(/:scope\[text\]::after\s*\{[^}]*content:\s*attr\(text\)/);
-  });
-
-  it('does NOT carry an ungated :scope::after with content: attr(text)', () => {
-    // The pre-fix shape would add phantom flex-gap space after slotted
-    // content. Match the bare `:scope::after` form (no attribute
-    // selector chained) followed by the attr(text) declaration.
-    expect(TAG_CSS).not.toMatch(/:scope::after\s*\{[^}]*content:\s*attr\(text\)/);
-  });
-
-  it('host :scope still declares the flex + gap layout (gap is real, just no longer applied to an empty pseudo)', () => {
-    // Sanity check that the fix didn't accidentally remove the host
-    // flex/gap declarations — those are still load-bearing for the
-    // [icon] + [dismiss] slot rendering and for proper :scope[text]
-    // gap rendering when text IS set.
-    expect(TAG_CSS).toMatch(/:scope\s*\{[^}]*display:\s*inline-flex/);
-    // Tokens are read directly via `var(--prop)`; consumers override the
-    // un-suffixed token on the element (or via @layer overrides).
-    expect(TAG_CSS).toMatch(/:scope\s*\{[^}]*gap:\s*var\(--tag-gap\)/);
-  });
-});
-
-// ── Tone defaults (solid by default for families; muted as opt-out) ──
-//
-// Default tone is `solid` for family variants — the base `:scope[variant=…]`
-// rules pair the saturated `--a-{family}-bg` fill with the palette's own
-// Material on-color `--md-sys-color-{family}-on-{family}` (the chip IS the
-// state). `[tone="muted"]` opts back into the Material container pair
-// `--md-sys-color-{family}-container` + `-on-surface` (same look as
-// <badge-ui>'s default). The `default` (no-family) variant stays quiet
-// chrome unless `[tone="solid"]` is set explicitly (then it inverts to a
-// high-contrast neutral stamp). Token names updated for the Material
-// static-token migration (material-color-bridge-contract.md, 2026-07-15).
-
-describe('tag-ui — variant defaults to solid fill', () => {
-  it.each([
-    ['info'],
-    ['success'],
-    ['warning'],
-    ['danger'],
-  ])('[variant="%s"] base rule uses --a-{family}-bg + --md-sys-color-{family}-on-{family}', (family) => {
-    const block = new RegExp(
-      `:scope\\[variant="${family}"\\]\\s*\\{[^}]*` +
-      `--tag-bg:\\s*var\\(--a-${family}-bg\\)[^}]*` +
-      `--tag-fg:\\s*var\\(--md-sys-color-${family}-on-${family}\\)`,
-      's'
-    );
-    expect(TAG_CSS).toMatch(block);
-  });
-});
-
-describe('tag-ui — [tone="muted"] opts out to the Material container pair', () => {
-  it.each([
-    ['info'],
-    ['success'],
-    ['warning'],
-    ['danger'],
-  ])('[tone="muted"][variant="%s"] uses -container + -on-surface', (family) => {
-    const block = new RegExp(
-      `:scope\\[tone="muted"\\]\\[variant="${family}"\\]\\s*\\{[^}]*` +
-      `--tag-bg:\\s*var\\(--md-sys-color-${family}-container\\)[^}]*` +
-      `--tag-fg:\\s*var\\(--md-sys-color-${family}-on-surface\\)`,
-      's'
-    );
-    expect(TAG_CSS).toMatch(block);
-  });
-});
-
-describe('tag-ui — neutral default + explicit solid stamp', () => {
-  it('[variant="default"] stays quiet chrome (--a-bg-muted + neutral on-surface)', () => {
-    expect(TAG_CSS).toMatch(
-      /:scope\[variant="default"\]\s*\{[^}]*--tag-bg:\s*var\(--a-bg-muted\)[^}]*--tag-fg:\s*var\(--md-sys-color-neutral-on-surface\)/s
-    );
-  });
-
-  it('[tone="solid"] without a family inverts to a high-contrast neutral stamp', () => {
-    expect(TAG_CSS).toMatch(
-      /:scope\[tone="solid"\]:not\(\[variant="info"\]\)[\s\S]*?--tag-bg:\s*var\(--md-sys-color-neutral-on-surface\)[\s\S]*?--tag-fg:\s*var\(--md-sys-color-neutral-background\)/
-    );
-  });
-});
-
-describe('tag-ui — [tone="outline"] strips fill + colors border', () => {
-  it('[tone="outline"] base rule sets bg to transparent', () => {
-    expect(TAG_CSS).toMatch(
-      /:scope\[tone="outline"\]\s*\{[^}]*--tag-bg:\s*transparent/s
-    );
-  });
-
-  it.each([
-    ['info'],
-    ['success'],
-    ['warning'],
-    ['danger'],
-  ])('[tone="outline"][variant="%s"] colors fg + border per family', (family) => {
-    const block = new RegExp(
-      `:scope\\[tone="outline"\\]\\[variant="${family}"\\]\\s*\\{[^}]*` +
-      `--tag-fg:\\s*var\\(--md-sys-color-${family}-on-surface\\)[^}]*` +
-      `--tag-border:\\s*var\\(--md-sys-color-${family}-outline\\)`,
-      's'
-    );
-    expect(TAG_CSS).toMatch(block);
-  });
-
-  it('[tone="outline"] on neutral uses --a-fg-muted text + neutral outline ring', () => {
-    expect(TAG_CSS).toMatch(
-      /:scope\[tone="outline"\]:not\(\[variant="info"\]\)[\s\S]*?--tag-fg:\s*var\(--a-fg-muted\)[\s\S]*?--tag-border:\s*var\(--md-sys-color-neutral-outline\)/
-    );
-  });
-});

package/components/tags-input/tags-input.test.js

@@ -1,477 +0,0 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import '../../core/element.js';
-import '../tag/tag.js';
-import './tags-input.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;
-}
-
-function typeText(el, text) {
-  // Drive the contenteditable surface like a real keyboard. Append the
-  // character into textContent + fire `input` so the host runs through its
-  // own input handler.
-  const surface = el.querySelector(':scope > [data-inline-input]');
-  surface.textContent = (surface.textContent || '') + text;
-  surface.dispatchEvent(new InputEvent('input', { bubbles: true }));
-}
-
-function setText(el, text) {
-  // Like typeText but REPLACES the buffer. Use to simulate a user clearing
-  // a failed attempt and starting over.
-  const surface = el.querySelector(':scope > [data-inline-input]');
-  surface.textContent = text;
-  surface.dispatchEvent(new InputEvent('input', { bubbles: true }));
-}
-
-function pressKey(el, key) {
-  const surface = el.querySelector(':scope > [data-inline-input]');
-  surface.focus();
-  surface.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }));
-}
-
-describe('tags-input-ui — structure + defaults', () => {
-  beforeEach(() => { document.body.innerHTML = ''; });
-
-  it('registers the custom element', () => {
-    expect(customElements.get('tags-input-ui')).toBeTruthy();
-  });
-
-  it('stamps a chip list, inline input, spinner, and suggestion popover', async () => {
-    const el = mount('<tags-input-ui></tags-input-ui>');
-    await tick();
-    expect(el.querySelector(':scope > [data-chip-list]')).toBeTruthy();
-    expect(el.querySelector(':scope > [data-inline-input]')).toBeTruthy();
-    expect(el.querySelector(':scope > [data-spinner]')).toBeTruthy();
-    expect(el.querySelector(':scope > [data-suggestions]')).toBeTruthy();
-  });
-
-  it('host carries role=group by default (no suggestions wired)', async () => {
-    const el = mount('<tags-input-ui></tags-input-ui>');
-    await tick();
-    expect(el.getAttribute('role')).toBe('group');
-  });
-
-  it('inline input carries role=searchbox + plaintext contenteditable', async () => {
-    const el = mount('<tags-input-ui></tags-input-ui>');
-    await tick();
-    const input = el.querySelector(':scope > [data-inline-input]');
-    expect(input.getAttribute('role')).toBe('searchbox');
-    expect(input.getAttribute('contenteditable')).toBe('plaintext-only');
-  });
-});
-
-describe('tags-input-ui — commit behavior', () => {
-  beforeEach(() => { document.body.innerHTML = ''; });
-
-  it('Enter commits the typed value as a chip', async () => {
-    const el = mount('<tags-input-ui></tags-input-ui>');
-    await tick();
-    typeText(el, 'hello');
-    pressKey(el, 'Enter');
-    await tick();
-    expect(el.value).toEqual(['hello']);
-    expect(el.querySelectorAll(':scope > [data-chip-list] > tag-ui').length).toBe(1);
-  });
-
-  it('default comma delimiter commits inline', async () => {
-    const el = mount('<tags-input-ui></tags-input-ui>');
-    await tick();
-    typeText(el, 'foo,');
-    await tick();
-    expect(el.value).toEqual(['foo']);
-  });
-
-  it('delimiter="enter" disables in-line comma commit', async () => {
-    const el = mount('<tags-input-ui delimiter="enter"></tags-input-ui>');
-    await tick();
-    typeText(el, 'foo,bar');
-    await tick();
-    // Nothing committed yet — the comma is treated as literal text.
-    expect(el.value).toEqual([]);
-    pressKey(el, 'Enter');
-    await tick();
-    expect(el.value).toEqual(['foo,bar']);
-  });
-
-  it('Backspace from empty input removes the last chip', async () => {
-    const el = mount('<tags-input-ui></tags-input-ui>');
-    await tick();
-    el.value = ['alpha', 'beta'];
-    await tick();
-    expect(el.value).toEqual(['alpha', 'beta']);
-    pressKey(el, 'Backspace');
-    await tick();
-    expect(el.value).toEqual(['alpha']);
-  });
-
-  it('Backspace with non-empty input only deletes a character (no chip removal)', async () => {
-    const el = mount('<tags-input-ui></tags-input-ui>');
-    await tick();
-    el.value = ['alpha'];
-    typeText(el, 'wip');
-    await tick();
-    pressKey(el, 'Backspace');
-    await tick();
-    // Chip unchanged.
-    expect(el.value).toEqual(['alpha']);
-  });
-
-  it('unique:true (default) silently dedups duplicate commits', async () => {
-    const el = mount('<tags-input-ui></tags-input-ui>');
-    await tick();
-    let invalidCount = 0;
-    el.addEventListener('invalid', () => { invalidCount += 1; });
-    typeText(el, 'foo');
-    pressKey(el, 'Enter');
-    await tick();
-    typeText(el, 'foo');
-    pressKey(el, 'Enter');
-    await tick();
-    expect(el.value).toEqual(['foo']);
-    expect(invalidCount).toBe(0);
-  });
-
-  it('min-length rejects too-short tokens with reason=too-short', async () => {
-    const el = mount('<tags-input-ui min-length="3"></tags-input-ui>');
-    await tick();
-    let detail = null;
-    el.addEventListener('invalid', (e) => { detail = e.detail; });
-    typeText(el, 'ab');
-    pressKey(el, 'Enter');
-    await tick();
-    expect(el.value).toEqual([]);
-    expect(detail?.reason).toBe('too-short');
-  });
-
-  it('max-length rejects too-long tokens with reason=too-long', async () => {
-    const el = mount('<tags-input-ui max-length="5"></tags-input-ui>');
-    await tick();
-    let detail = null;
-    el.addEventListener('invalid', (e) => { detail = e.detail; });
-    typeText(el, 'too-long-value');
-    pressKey(el, 'Enter');
-    await tick();
-    expect(el.value).toEqual([]);
-    expect(detail?.reason).toBe('too-long');
-  });
-
-  it('max count cap rejects further commits with reason=max', async () => {
-    const el = mount('<tags-input-ui max="2"></tags-input-ui>');
-    await tick();
-    let invalidDetail = null;
-    el.addEventListener('invalid', (e) => { invalidDetail = e.detail; });
-    el.addToken('one');
-    el.addToken('two');
-    expect(el.value).toEqual(['one', 'two']);
-    typeText(el, 'three');
-    pressKey(el, 'Enter');
-    await tick();
-    expect(el.value).toEqual(['one', 'two']);
-    expect(invalidDetail?.reason).toBe('max');
-  });
-
-  it('transform="lowercase" normalizes tokens on commit', async () => {
-    const el = mount('<tags-input-ui transform="lowercase"></tags-input-ui>');
-    await tick();
-    el.addToken('FOO');
-    el.addToken('Bar');
-    expect(el.value).toEqual(['foo', 'bar']);
-  });
-
-  it('transform="strip-spaces" removes all whitespace before commit', async () => {
-    const el = mount('<tags-input-ui transform="strip-spaces"></tags-input-ui>');
-    await tick();
-    el.addToken('hello world');
-    expect(el.value).toEqual(['helloworld']);
-  });
-});
-
-describe('tags-input-ui — validators', () => {
-  beforeEach(() => { document.body.innerHTML = ''; });
-
-  it('sync validateFn rejects invalid tokens with reason=validator', async () => {
-    const el = mount('<tags-input-ui></tags-input-ui>');
-    await tick();
-    el.validateFn = (v) => /^[a-z]+$/.test(v);
-    let detail = null;
-    el.addEventListener('invalid', (e) => { detail = e.detail; });
-    typeText(el, '123');
-    pressKey(el, 'Enter');
-    await tick();
-    expect(el.value).toEqual([]);
-    expect(detail?.reason).toBe('validator');
-    // Accepts valid input.
-    setText(el, 'ok');
-    pressKey(el, 'Enter');
-    await tick();
-    expect(el.value).toEqual(['ok']);
-  });
-
-  it('async validateFn flips host into [validating] then commits on resolve(true)', async () => {
-    const el = mount('<tags-input-ui></tags-input-ui>');
-    await tick();
-    let resolveCheck;
-    el.validateFn = () => new Promise((r) => { resolveCheck = r; });
-    typeText(el, 'pending');
-    pressKey(el, 'Enter');
-    await tick();
-    expect(el.hasAttribute('validating')).toBe(true);
-    expect(el.value).toEqual([]);
-    resolveCheck(true);
-    await tick();
-    await tick();
-    expect(el.hasAttribute('validating')).toBe(false);
-    expect(el.value).toEqual(['pending']);
-  });
-
-  it('commit event with preventDefault() rejects the token (reason=validator)', async () => {
-    const el = mount('<tags-input-ui></tags-input-ui>');
-    await tick();
-    el.addEventListener('commit', (e) => e.preventDefault());
-    let detail = null;
-    el.addEventListener('invalid', (e) => { detail = e.detail; });
-    typeText(el, 'blocked');
-    pressKey(el, 'Enter');
-    await tick();
-    expect(el.value).toEqual([]);
-    expect(detail?.reason).toBe('validator');
-  });
-});
-
-describe('tags-input-ui — paste-split', () => {
-  beforeEach(() => { document.body.innerHTML = ''; });
-
-  it('pasting "a, b, c" with default paste-split commits three tokens', async () => {
-    const el = mount('<tags-input-ui></tags-input-ui>');
-    await tick();
-    const surface = el.querySelector(':scope > [data-inline-input]');
-    const dt = new DataTransfer();
-    dt.setData('text/plain', 'a, b, c');
-    surface.dispatchEvent(new ClipboardEvent('paste', {
-      bubbles: true,
-      cancelable: true,
-      clipboardData: dt,
-    }));
-    await tick();
-    expect(el.value).toEqual(['a', 'b', 'c']);
-  });
-});
-
-describe('tags-input-ui — disabled / readonly / form', () => {
-  beforeEach(() => { document.body.innerHTML = ''; });
-
-  it('disabled blocks all interaction', async () => {
-    const el = mount('<tags-input-ui disabled></tags-input-ui>');
-    await tick();
-    typeText(el, 'nope');
-    pressKey(el, 'Enter');
-    await tick();
-    expect(el.value).toEqual([]);
-  });
-
-  it('readonly blocks edits but allows inspection (chips lack [removable])', async () => {
-    const el = mount('<tags-input-ui readonly value=\'["frozen"]\'></tags-input-ui>');
-    await tick();
-    expect(el.value).toEqual(['frozen']);
-    const chip = el.querySelector(':scope > [data-chip-list] > tag-ui');
-    expect(chip).toBeTruthy();
-    expect(chip.hasAttribute('removable')).toBe(false);
-  });
-
-  it('exposes UITagsInput extending UIFormElement (form participation)', async () => {
-    const el = mount('<tags-input-ui name="x"></tags-input-ui>');
-    await tick();
-    expect(typeof el.checkValidity).toBe('function');
-    expect(typeof el.syncValue).toBe('function');
-  });
-
-  it('form value serializes as JSON array under [name]', async () => {
-    const el = mount('<tags-input-ui name="labels"></tags-input-ui>');
-    await tick();
-    el.addToken('bug');
-    el.addToken('high-priority');
-    // happy-dom's ElementInternals tracks form value via setFormValue — read
-    // it back via the public `value` accessor + assert via internals' state.
-    expect(el.value).toEqual(['bug', 'high-priority']);
-    expect(el.checkValidity()).toBe(true);
-  });
-
-  it('required attribute reflects on the host (happy-dom internals stub limits deeper assertions)', async () => {
-    const el = mount('<tags-input-ui required name="x"></tags-input-ui>');
-    await tick();
-    expect(el.required).toBe(true);
-    expect(el.hasAttribute('required')).toBe(true);
-    // ElementInternals.setValidity is a no-op in happy-dom, so we can't
-    // assert validity.valueMissing here — gate that in browser smokes.
-    el.addToken('one');
-    expect(el.value).toEqual(['one']);
-  });
-
-  it('parses declarative value="[…]" as a JSON array', async () => {
-    const el = mount('<tags-input-ui value=\'["a","b","c"]\'></tags-input-ui>');
-    await tick();
-    expect(el.value).toEqual(['a', 'b', 'c']);
-  });
-});
-
-describe('tags-input-ui — chip slot template (TKT-0023)', () => {
-  beforeEach(() => { document.body.innerHTML = ''; });
-
-  it('with no template, renders the default <tag-ui removable text>', async () => {
-    const el = mount('<tags-input-ui value=\'["a"]\'></tags-input-ui>');
-    await tick();
-    const chip = el.querySelector(':scope > [data-chip-list] > *');
-    expect(chip.tagName.toLowerCase()).toBe('tag-ui');
-    expect(chip.getAttribute('text')).toBe('a');
-    expect(chip.hasAttribute('removable')).toBe(true);
-  });
-
-  it('an author <template slot="chip"> overrides the default render, substituting {{value}}/{{index}}', async () => {
-    const el = mount(`
-      <tags-input-ui value='["alpha","beta"]'>
-        <template slot="chip"><tag-ui removable text="{{value}}" title="Item #{{index}}"></tag-ui></template>
-      </tags-input-ui>
-    `);
-    await tick();
-    const chips = el.querySelectorAll(':scope > [data-chip-list] > *');
-    expect(chips).toHaveLength(2);
-    expect(chips[0].getAttribute('text')).toBe('alpha');
-    expect(chips[0].getAttribute('title')).toBe('Item #0');
-    expect(chips[1].getAttribute('text')).toBe('beta');
-    expect(chips[1].getAttribute('title')).toBe('Item #1');
-  });
-
-  it('the chip template survives the first-connect shell stamp (not wiped by innerHTML replacement)', async () => {
-    const el = mount(`
-      <tags-input-ui value='["x"]'>
-        <template slot="chip"><span class="custom">{{value}}</span></template>
-      </tags-input-ui>
-    `);
-    await tick();
-    expect(el.querySelector(':scope > template[slot="chip"]')).toBeTruthy();
-    const chip = el.querySelector(':scope > [data-chip-list] > .custom');
-    expect(chip?.textContent).toBe('x');
-  });
-
-  it('substitutes {{value}}/{{index}} in attribute values, not just text content', async () => {
-    const el = mount(`
-      <tags-input-ui value='["a","b"]'>
-        <template slot="chip"><span data-slot-value="{{value}}" data-slot-index="{{index}}">{{value}}</span></template>
-      </tags-input-ui>
-    `);
-    await tick();
-    const chips = el.querySelectorAll(':scope > [data-chip-list] > span');
-    expect(chips[0].dataset.slotValue).toBe('a');
-    expect(chips[0].dataset.slotIndex).toBe('0');
-    expect(chips[1].dataset.slotValue).toBe('b');
-    expect(chips[1].dataset.slotIndex).toBe('1');
-  });
-
-  it('reconciles by position: adding a token appends without recreating existing custom chips', async () => {
-    const el = mount(`
-      <tags-input-ui value='["a"]'>
-        <template slot="chip"><span>{{value}}</span></template>
-      </tags-input-ui>
-    `);
-    await tick();
-    const first = el.querySelector(':scope > [data-chip-list] > span');
-    el.addToken('b');
-    await tick();
-    const chips = el.querySelectorAll(':scope > [data-chip-list] > span');
-    expect(chips).toHaveLength(2);
-    expect(chips[0]).toBe(first); // unchanged position — same node, no flicker
-    expect(chips[1].textContent).toBe('b');
-  });
-
-  it('a custom chip participates in removal via a bubbling `remove` event from a nested tag-ui', async () => {
-    const el = mount(`
-      <tags-input-ui value='["a","b"]'>
-        <template slot="chip"><span class="wrap"><tag-ui removable text="{{value}}"></tag-ui></span></template>
-      </tags-input-ui>
-    `);
-    await tick();
-    const nestedTag = el.querySelector(':scope > [data-chip-list] .wrap tag-ui[text="a"]');
-    nestedTag.dispatchEvent(new CustomEvent('remove', { bubbles: true }));
-    await tick();
-    expect(el.value).toEqual(['b']);
-  });
-
-  it('a malformed template (no element content) degrades to the default chip rather than rendering nothing', async () => {
-    const el = mount(`
-      <tags-input-ui value='["a"]'>
-        <template slot="chip">   </template>
-      </tags-input-ui>
-    `);
-    await tick();
-    const chip = el.querySelector(':scope > [data-chip-list] > *');
-    expect(chip.tagName.toLowerCase()).toBe('tag-ui');
-    expect(chip.getAttribute('text')).toBe('a');
-  });
-
-  it('a token literally equal to "{{index}}" is not clobbered by the index substitution pass', async () => {
-    const el = mount(`
-      <tags-input-ui value='["{{index}}","real"]'>
-        <template slot="chip"><span data-slot-index="{{index}}">{{value}}</span></template>
-      </tags-input-ui>
-    `);
-    await tick();
-    const chips = el.querySelectorAll(':scope > [data-chip-list] > span');
-    expect(chips[0].textContent).toBe('{{index}}');
-    expect(chips[0].dataset.slotIndex).toBe('0');
-    expect(chips[1].textContent).toBe('real');
-    expect(chips[1].dataset.slotIndex).toBe('1');
-  });
-});
-
-describe('tags-input-ui — change event', () => {
-  beforeEach(() => { document.body.innerHTML = ''; });
-
-  it('change event detail carries value + added + removed', async () => {
-    const el = mount('<tags-input-ui></tags-input-ui>');
-    await tick();
-    const events = [];
-    el.addEventListener('change', (e) => events.push(e.detail));
-    el.addToken('first');
-    el.addToken('second');
-    await tick();
-    expect(events.length).toBe(2);
-    expect(events[0]).toMatchObject({ added: ['first'], removed: [] });
-    expect(events[1]).toMatchObject({ added: ['second'], removed: [] });
-    expect(events[1].value).toEqual(['first', 'second']);
-    el.removeToken(0);
-    await tick();
-    expect(events[2]).toMatchObject({ added: [], removed: ['first'] });
-  });
-});
-
-describe('tags-input-ui — suggestions', () => {
-  beforeEach(() => { document.body.innerHTML = ''; });
-
-  it('host carries role=combobox when .suggestions is non-empty', async () => {
-    const el = mount('<tags-input-ui></tags-input-ui>');
-    await tick();
-    el.suggestions = ['alpha', 'beta', 'gamma'];
-    await tick();
-    expect(el.getAttribute('role')).toBe('combobox');
-    expect(el.getAttribute('aria-haspopup')).toBe('listbox');
-  });
-
-  it('clicking a suggestion option commits it', async () => {
-    const el = mount('<tags-input-ui></tags-input-ui>');
-    await tick();
-    el.suggestions = ['alpha', 'beta'];
-    typeText(el, 'a');
-    await tick();
-    const opt = el.querySelector(':scope > [data-suggestions] > [role="option"][data-value="alpha"]');
-    expect(opt).toBeTruthy();
-    opt.click();
-    await tick();
-    expect(el.value).toEqual(['alpha']);
-  });
-});