@adia-ai/web-components 0.8.18 → 0.8.20

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

@@ -1,32 +0,0 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import '../../core/element.js';
-import './option-card.js';
-
-const tick = () => new Promise((r) => queueMicrotask(r));
-function mount(html) {
-  const w = document.createElement('div');
-  w.innerHTML = html;
-  document.body.appendChild(w);
-  return w.firstElementChild;
-}
-
-describe('option-card-ui — heading/description stamp-if-absent (wrapper trap)', () => {
-  beforeEach(() => { document.body.innerHTML = ''; });
-
-  it('stamps heading + description from attrs when no slots are provided', async () => {
-    const el = mount('<option-card-ui heading="Pro" description="Best value"></option-card-ui>');
-    await tick();
-    expect(el.querySelectorAll('[slot="heading"]').length).toBe(1);
-    expect(el.querySelectorAll('[slot="description"]').length).toBe(1);
-  });
-
-  // Regression (audit-wrapper-trap arm 2): a WRAPPED consumer [slot="heading"]
-  // override must suppress the attr-stamp, not collide with it.
-  it('does NOT stamp a duplicate heading when a WRAPPED consumer heading is present', async () => {
-    const el = mount(`<option-card-ui heading="Pro"><span style="display:contents" role="presentation"><h3 slot="heading" data-test="h">Custom</h3></span></option-card-ui>`);
-    await tick();
-    const headings = el.querySelectorAll('[slot="heading"]');
-    expect(headings.length).toBe(1);
-    expect(headings[0].dataset.test).toBe('h');
-  });
-});

package/components/pagination/pagination.test.js

@@ -1,195 +0,0 @@
-/**
- * pagination-ui — regression guards for the v0.6.36 native-primitive
- * leak fix and the universal [size] system threading.
- *
- * Before the fix, every page / prev / next item was a raw <button>,
- * and pagination hardcoded `--a-size-sm` for its button cells (no
- * [size] prop, no threading to the substrate's 24/30/36 px size
- * system). After the fix, every item is a <button-ui> whose `size`
- * attribute mirrors the host's, and active items render as
- * `variant="primary"` so the filled-accent state comes from
- * button-ui's primary surface matrix.
- */
-
-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 './pagination.js';
-import '../button/button.js';
-
-const HERE = dirname(fileURLToPath(import.meta.url));
-const CLASS_JS = readFileSync(resolve(HERE, 'pagination.class.js'), '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;
-}
-
-beforeEach(() => { document.body.innerHTML = ''; });
-
-// ── Source-grep contract guards ─────────────────────────────────────
-
-describe('pagination-ui — no native <button> leak', () => {
-  it('class.js creates <button-ui> elements (not raw <button>)', () => {
-    expect(CLASS_JS).toMatch(/createElement\(['"]button-ui['"]\)/);
-    // Negative — guard against accidental revert to raw <button>.
-    expect(CLASS_JS).not.toMatch(/createElement\(['"]button['"]\)/);
-  });
-
-  it('declares caret-left + caret-right in static requiredIcons', () => {
-    expect(CLASS_JS).toMatch(/static\s+requiredIcons\s*=\s*\[[^\]]*['"]caret-left['"]/);
-    expect(CLASS_JS).toMatch(/static\s+requiredIcons\s*=\s*\[[^\]]*['"]caret-right['"]/);
-  });
-
-  it('declares size prop in static properties (universal [size] thread-through)', () => {
-    expect(CLASS_JS).toMatch(/static\s+properties\s*=[\s\S]*?size:\s*\{\s*type:\s*String/);
-  });
-});
-
-// ── DOM contract guards ─────────────────────────────────────────────
-
-describe('pagination-ui — DOM composition', () => {
-  it('stamps <button-ui> for every page / prev / next cell', async () => {
-    const el = mount('<pagination-ui page="3" total="10"></pagination-ui>');
-    await tick();
-    const buttons = el.querySelectorAll('button-ui');
-    expect(buttons.length).toBeGreaterThan(0);
-    // No raw <button> children — confirms the native-leak is closed at runtime.
-    expect(el.querySelectorAll(':scope button:not(button-ui)').length).toBe(0);
-  });
-
-  it('threads size attribute through to every nested button-ui', async () => {
-    const el = mount('<pagination-ui page="2" total="5" size="lg"></pagination-ui>');
-    await tick();
-    const buttons = el.querySelectorAll('button-ui');
-    expect(buttons.length).toBeGreaterThan(0);
-    for (const btn of buttons) {
-      expect(btn.getAttribute('size')).toBe('lg');
-    }
-  });
-
-  it('defaults to size="md" (aligned with button-ui default)', async () => {
-    const el = mount('<pagination-ui page="2" total="5"></pagination-ui>');
-    await tick();
-    const buttons = el.querySelectorAll('button-ui');
-    expect(buttons.length).toBeGreaterThan(0);
-    for (const btn of buttons) {
-      expect(btn.getAttribute('size')).toBe('md');
-    }
-  });
-
-  it('renders the active page as variant="primary" (button-ui token chain)', async () => {
-    const el = mount('<pagination-ui page="3" total="10"></pagination-ui>');
-    await tick();
-    const active = el.querySelector('button-ui[data-active]');
-    expect(active).toBeTruthy();
-    expect(active.getAttribute('variant')).toBe('primary');
-    expect(active.getAttribute('aria-current')).toBe('page');
-  });
-
-  it('renders prev / next as ghost (default variant) or outline (button variant)', async () => {
-    const elDefault = mount('<pagination-ui page="3" total="10"></pagination-ui>');
-    await tick();
-    expect(elDefault.querySelector('button-ui[data-prev]').getAttribute('variant')).toBe('ghost');
-    expect(elDefault.querySelector('button-ui[data-next]').getAttribute('variant')).toBe('ghost');
-
-    const elButton = mount('<pagination-ui page="3" total="10" variant="button"></pagination-ui>');
-    await tick();
-    expect(elButton.querySelector('button-ui[data-prev]').getAttribute('variant')).toBe('outline');
-    expect(elButton.querySelector('button-ui[data-next]').getAttribute('variant')).toBe('outline');
-  });
-
-  it('uses icon="caret-left" / "caret-right" on prev / next (not glyph text)', async () => {
-    const el = mount('<pagination-ui page="3" total="10"></pagination-ui>');
-    await tick();
-    expect(el.querySelector('button-ui[data-prev]').getAttribute('icon')).toBe('caret-left');
-    expect(el.querySelector('button-ui[data-next]').getAttribute('icon')).toBe('caret-right');
-  });
-});
-
-// ── Width invariance: compact-mode cell count is constant across pages ──
-//
-// Compact width W = 2*siblings + 5 (= 7 at siblings=1). When the current
-// page advances by one, the row's visible cell count must NOT change —
-// otherwise the layout wobbles. For total ≤ W, we show every page and
-// skip compact mode entirely (no point compressing if it doesn't save
-// slots — also wobble-free since every page just highlights a different
-// constant-width row).
-
-describe('pagination-ui — compact-mode width invariance', () => {
-  function pageValues(el) {
-    return [...el.querySelectorAll('button-ui[data-page]')].map((b) => Number(b.dataset.value));
-  }
-  function cellCount(el) {
-    return el.querySelectorAll('button-ui[data-page], [data-ellipsis]').length;
-  }
-  function hasEllipsis(el) {
-    return el.querySelectorAll('[data-ellipsis]').length > 0;
-  }
-
-  it('total=5 siblings=1 → never compacts (shows 1-5 every page)', async () => {
-    for (const page of [1, 2, 3, 4, 5]) {
-      const el = mount(`<pagination-ui page="${page}" total="5" siblings="1"></pagination-ui>`);
-      await tick();
-      expect(pageValues(el)).toEqual([1, 2, 3, 4, 5]);
-      expect(hasEllipsis(el)).toBe(false);
-    }
-  });
-
-  it('total=10 siblings=1 → exactly 7 cells on every page (no wobble)', async () => {
-    for (const page of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]) {
-      const el = mount(`<pagination-ui page="${page}" total="10" siblings="1"></pagination-ui>`);
-      await tick();
-      expect(cellCount(el)).toBe(7);
-    }
-  });
-
-  it('total=10 page=3 siblings=1 → near-start: [1,2,3,4,5,…,10]', async () => {
-    const el = mount('<pagination-ui page="3" total="10" siblings="1"></pagination-ui>');
-    await tick();
-    expect(pageValues(el)).toEqual([1, 2, 3, 4, 5, 10]);
-    expect(el.querySelectorAll('[data-ellipsis]').length).toBe(1);
-  });
-
-  it('total=10 page=4 siblings=1 → still near-start: [1,2,3,4,5,…,10] (same as page=3)', async () => {
-    const el = mount('<pagination-ui page="4" total="10" siblings="1"></pagination-ui>');
-    await tick();
-    expect(pageValues(el)).toEqual([1, 2, 3, 4, 5, 10]);
-    expect(el.querySelectorAll('[data-ellipsis]').length).toBe(1);
-  });
-
-  it('total=10 page=5 siblings=1 → middle: [1,…,4,5,6,…,10]', async () => {
-    const el = mount('<pagination-ui page="5" total="10" siblings="1"></pagination-ui>');
-    await tick();
-    expect(pageValues(el)).toEqual([1, 4, 5, 6, 10]);
-    expect(el.querySelectorAll('[data-ellipsis]').length).toBe(2);
-  });
-
-  it('total=10 page=7 siblings=1 → near-end: [1,…,6,7,8,9,10]', async () => {
-    const el = mount('<pagination-ui page="7" total="10" siblings="1"></pagination-ui>');
-    await tick();
-    expect(pageValues(el)).toEqual([1, 6, 7, 8, 9, 10]);
-    expect(el.querySelectorAll('[data-ellipsis]').length).toBe(1);
-  });
-
-  it('total=20 page=10 siblings=1 → middle: [1,…,9,10,11,…,20]', async () => {
-    const el = mount('<pagination-ui page="10" total="20" siblings="1"></pagination-ui>');
-    await tick();
-    expect(pageValues(el)).toEqual([1, 9, 10, 11, 20]);
-    expect(el.querySelectorAll('[data-ellipsis]').length).toBe(2);
-  });
-
-  it('total=20 siblings=2 → exactly 9 cells on every page', async () => {
-    for (const page of [1, 5, 10, 15, 20]) {
-      const el = mount(`<pagination-ui page="${page}" total="20" siblings="2"></pagination-ui>`);
-      await tick();
-      expect(cellCount(el)).toBe(9);
-    }
-  });
-});

package/components/select/select.test.js

@@ -1,453 +0,0 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import '../../core/element.js';
-import './select.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('select-ui', () => {
-  beforeEach(() => { document.body.innerHTML = ''; });
-
-  // §FEEDBACK-36 — declarative <option selected> initial value (single-select)
-  it('honours the first <option selected> as initial value for single-select', async () => {
-    const s = mount(`
-      <select-ui>
-        <option value="a">Alpha</option>
-        <option value="b" selected>Beta</option>
-        <option value="c">Gamma</option>
-      </select-ui>
-    `);
-    await tick();
-    expect(s.value).toBe('b');
-  });
-
-  // §FB-98 — <option> children nested in the template engine's display:contents
-  // wrapper spans (.map()/repeat()) must be parsed, not just static literals.
-  it('FB-98: parses options nested in display:contents/role=presentation wrappers (present at connect)', async () => {
-    const s = mount(`
-      <select-ui value="a">
-        <span style="display:contents" role="presentation">
-          <span style="display:contents" role="presentation"><option value="a">Alpha</option></span>
-          <span style="display:contents" role="presentation"><option value="b">Beta</option></span>
-          <span style="display:contents" role="presentation"><option value="c">Gamma</option></span>
-        </span>
-      </select-ui>
-    `);
-    await tick();
-    expect(s.querySelectorAll('[role="option"]').length).toBe(3);
-    expect(s.options.map((o) => o.value)).toEqual(['a', 'b', 'c']);
-    expect(s.value).toBe('a');
-  });
-
-  // §FB-98 — interpolated options that ARRIVE after connect (the template's
-  // update() pass) are picked up by the re-parse MutationObserver.
-  it('FB-98: re-parses wrapped options that arrive after connect (observer)', async () => {
-    const s = mount(`<select-ui></select-ui>`);
-    await tick();
-    expect(s.querySelectorAll('[role="option"]').length).toBe(0);
-    const wrap = document.createElement('span');
-    wrap.style.display = 'contents';
-    wrap.setAttribute('role', 'presentation');
-    wrap.innerHTML = `<option value="x">X</option><option value="y">Y</option>`;
-    s.appendChild(wrap);
-    await tick(); await tick();   // mutation → observer microtask → re-parse + render
-    expect(s.querySelectorAll('[role="option"]').length).toBe(2);
-  });
-
-  // §FB-46 — <option selected> must capture ALL values in [multiple] mode
-  it('captures all <option selected> values as comma-separated for [multiple]', async () => {
-    const s = mount(`
-      <select-ui multiple>
-        <option value="a" selected>Alpha</option>
-        <option value="b">Beta</option>
-        <option value="c" selected>Gamma</option>
-      </select-ui>
-    `);
-    await tick();
-    // All selected values should be present (order-agnostic)
-    const parts = new Set(s.value.split(',').map(v => v.trim()));
-    expect(parts.has('a')).toBe(true);
-    expect(parts.has('c')).toBe(true);
-    expect(parts.has('b')).toBe(false);
-  });
-
-  // §FB-46 — .value setter with comma-separated string must sync aria-selected
-  it('syncs aria-selected on all comma-separated values when .value is set', async () => {
-    const s = mount(`
-      <select-ui multiple open>
-        <option value="a">Alpha</option>
-        <option value="b">Beta</option>
-        <option value="c">Gamma</option>
-      </select-ui>
-    `);
-    await tick();
-    s.value = 'a,c';
-    await tick();
-
-    const opts = s.querySelectorAll('[role="option"]');
-    const selected = Array.from(opts)
-      .filter(o => o.getAttribute('aria-selected') === 'true')
-      .map(o => o.getAttribute('data-value'));
-
-    expect(selected).toContain('a');
-    expect(selected).toContain('c');
-    expect(selected).not.toContain('b');
-  });
-
-  // Regression: single-select aria-selected must still work with the Set path
-  it('still sets aria-selected correctly for single-select after §FB-46 changes', async () => {
-    const s = mount(`
-      <select-ui open>
-        <option value="a">Alpha</option>
-        <option value="b">Beta</option>
-      </select-ui>
-    `);
-    await tick();
-    s.value = 'b';
-    await tick();
-
-    const opts = s.querySelectorAll('[role="option"]');
-    const selected = Array.from(opts)
-      .filter(o => o.getAttribute('aria-selected') === 'true')
-      .map(o => o.getAttribute('data-value'));
-
-    expect(selected).toEqual(['b']);
-  });
-
-  // ── SPEC-040 (multi-select) ──
-
-  it('multi-select: [multiple] sets data-multi-chips and renders tag-ui chips per selected value', async () => {
-    const s = mount(`
-      <select-ui multiple value="a,c">
-        <option value="a">Alpha</option>
-        <option value="b">Beta</option>
-        <option value="c">Gamma</option>
-      </select-ui>
-    `);
-    await tick();
-    expect(s.hasAttribute('data-multi-chips')).toBe(true);
-    const chips = s.querySelectorAll('[slot="trigger"] [data-chips] tag-ui');
-    expect(chips.length).toBe(2);
-    const chipValues = Array.from(chips).map((c) => c.dataset.chipValue);
-    expect(chipValues).toContain('a');
-    expect(chipValues).toContain('c');
-  });
-
-  it('multi-select: aria-multiselectable=true is set on the listbox', async () => {
-    const s = mount(`
-      <select-ui multiple open>
-        <option value="a">Alpha</option>
-        <option value="b">Beta</option>
-      </select-ui>
-    `);
-    await tick();
-    const lb = s.querySelector('[slot="listbox"]');
-    expect(lb).toBeTruthy();
-    expect(lb.getAttribute('aria-multiselectable')).toBe('true');
-  });
-
-  it('multi-select: clicking an option toggles selection without closing the popover', async () => {
-    const s = mount(`
-      <select-ui multiple open>
-        <option value="a">Alpha</option>
-        <option value="b">Beta</option>
-        <option value="c">Gamma</option>
-      </select-ui>
-    `);
-    await tick();
-    const opts = s.querySelectorAll('[role="option"]');
-    const optA = Array.from(opts).find((o) => o.getAttribute('data-value') === 'a');
-    optA.click();
-    await tick();
-    expect(s.open).toBe(true); // still open
-    expect(s.value).toBe('a');
-
-    const optC = Array.from(s.querySelectorAll('[role="option"]')).find((o) => o.getAttribute('data-value') === 'c');
-    optC.click();
-    await tick();
-    expect(s.open).toBe(true);
-    const parts = new Set(s.value.split(','));
-    expect(parts.has('a')).toBe(true);
-    expect(parts.has('c')).toBe(true);
-  });
-
-  it('multi-select: Backspace from the trigger removes the last chip', async () => {
-    const s = mount(`
-      <select-ui multiple value="a,b">
-        <option value="a">Alpha</option>
-        <option value="b">Beta</option>
-      </select-ui>
-    `);
-    await tick();
-    const ev = new KeyboardEvent('keydown', { key: 'Backspace', bubbles: true });
-    s.dispatchEvent(ev);
-    await tick();
-    expect(s.value).toBe('a');
-  });
-
-  it('multi-select: toggle(id) is a public API', async () => {
-    const s = mount(`
-      <select-ui multiple>
-        <option value="a">Alpha</option>
-        <option value="b">Beta</option>
-      </select-ui>
-    `);
-    await tick();
-    s.toggle('a');
-    await tick();
-    expect(s.value).toBe('a');
-    s.toggle('a');
-    await tick();
-    expect(s.value).toBe('');
-  });
-
-  it('multi-select: [max] suppresses further selection and fires invalid', async () => {
-    const s = mount(`
-      <select-ui multiple max="2" value="a,b">
-        <option value="a">Alpha</option>
-        <option value="b">Beta</option>
-        <option value="c">Gamma</option>
-      </select-ui>
-    `);
-    await tick();
-    let invalidFired = null;
-    s.addEventListener('invalid', (e) => { invalidFired = e.detail; });
-    s.toggle('c');
-    await tick();
-    expect(invalidFired).toBeTruthy();
-    expect(invalidFired.reason).toBe('max');
-    expect(s.value).toBe('a,b'); // unchanged
-  });
-
-  it('multi-select: clear() empties value and fires change with removed array', async () => {
-    const s = mount(`
-      <select-ui multiple value="a,b">
-        <option value="a">Alpha</option>
-        <option value="b">Beta</option>
-      </select-ui>
-    `);
-    await tick();
-    let changed = null;
-    s.addEventListener('change', (e) => { changed = e.detail; });
-    s.clear();
-    await tick();
-    expect(s.value).toBe('');
-    expect(changed.removed).toEqual(['a', 'b']);
-  });
-
-  it('multi-select: selectAllOptions() selects every non-disabled option', async () => {
-    const s = mount(`
-      <select-ui multiple>
-        <option value="a">Alpha</option>
-        <option value="b">Beta</option>
-        <option value="c" disabled>Gamma</option>
-      </select-ui>
-    `);
-    await tick();
-    s.selectAllOptions();
-    await tick();
-    const parts = new Set(s.value.split(','));
-    expect(parts.has('a')).toBe(true);
-    expect(parts.has('b')).toBe(true);
-    expect(parts.has('c')).toBe(false); // disabled
-  });
-
-  it('multi-select: [max-chips] shows "+N more" pill when exceeded', async () => {
-    const s = mount(`
-      <select-ui multiple max-chips="2" value="a,b,c,d">
-        <option value="a">Alpha</option>
-        <option value="b">Beta</option>
-        <option value="c">Gamma</option>
-        <option value="d">Delta</option>
-      </select-ui>
-    `);
-    await tick();
-    const chips = s.querySelectorAll('[slot="trigger"] [data-chips] tag-ui');
-    expect(chips.length).toBe(2);
-    const more = s.querySelector('[slot="trigger"] [data-more]');
-    expect(more).toBeTruthy();
-    // Stamped as <button-ui> (gh issue 276) — label rides the text attr.
-    expect(more.tagName).toBe('BUTTON-UI');
-    expect(more.getAttribute('text')).toBe('+2 more');
-  });
-
-  it('multi-select: [clearable] reveals the clear-all button when chips present', async () => {
-    const s = mount(`
-      <select-ui multiple clearable value="a">
-        <option value="a">Alpha</option>
-        <option value="b">Beta</option>
-      </select-ui>
-    `);
-    await tick();
-    const clearBtn = s.querySelector('[data-clear-all]');
-    expect(clearBtn).toBeTruthy();
-    expect(clearBtn.hasAttribute('hidden')).toBe(false);
-  });
-
-  it('multi-select: [select-all] renders the bulk-action header', async () => {
-    const s = mount(`
-      <select-ui multiple select-all open>
-        <option value="a">Alpha</option>
-        <option value="b">Beta</option>
-      </select-ui>
-    `);
-    await tick();
-    const header = s.querySelector('[slot="listbox"] [data-select-all]');
-    expect(header).toBeTruthy();
-    const btn = header.querySelector('[data-select-all-btn]');
-    expect(btn).toBeTruthy();
-    // Stamped as <button-ui> (gh issue 276) — label rides the text attr.
-    expect(btn.tagName).toBe('BUTTON-UI');
-    expect(btn.getAttribute('text')).toBe('Select all');
-  });
-
-  it('multi-select: chip remove event empties that selection from value', async () => {
-    const s = mount(`
-      <select-ui multiple value="a,b">
-        <option value="a">Alpha</option>
-        <option value="b">Beta</option>
-      </select-ui>
-    `);
-    await tick();
-    const chipA = s.querySelector('tag-ui[data-chip-value="a"]');
-    expect(chipA).toBeTruthy();
-    // Simulate tag-ui's remove event (bubbles, with detail.text)
-    chipA.dispatchEvent(new CustomEvent('remove', {
-      bubbles: true,
-      detail: { text: 'Alpha', value: 'Alpha' },
-    }));
-    await tick();
-    expect(s.value).toBe('b');
-  });
-
-  // §FB-88 — placeholder-only select derives an accessible name (WCAG 4.1.2),
-  // mirroring input-ui, without clobbering a real label.
-  describe('accessible name from placeholder (FB-88)', () => {
-    it('names a placeholder-only select from its placeholder', async () => {
-      const s = mount(`<select-ui placeholder="Status"></select-ui>`);
-      await tick();
-      expect(s.getAttribute('aria-label')).toBe('Status');
-    });
-
-    it('does NOT derive a name from the default "Select..." placeholder', async () => {
-      const s = mount(`<select-ui></select-ui>`);
-      await tick();
-      expect(s.hasAttribute('aria-label')).toBe(false);
-    });
-
-    it('preserves an author-supplied aria-label (override wins over placeholder)', async () => {
-      const s = mount(`<select-ui aria-label="Filter by status" placeholder="Status"></select-ui>`);
-      await tick();
-      expect(s.getAttribute('aria-label')).toBe('Filter by status');
-    });
-
-    it('does not set aria-label when a visible label is present', async () => {
-      const s = mount(`<select-ui label="Status" placeholder="Pick one"></select-ui>`);
-      await tick();
-      expect(s.hasAttribute('aria-label')).toBe(false);
-    });
-
-    it('does not set aria-label when aria-labelledby is present (e.g. field-ui)', async () => {
-      const s = mount(`<select-ui aria-labelledby="ext-label" placeholder="Pick one"></select-ui>`);
-      await tick();
-      expect(s.hasAttribute('aria-label')).toBe(false);
-    });
-  });
-
-  // gh#339 — mark (adia-mark-ui) as a leading visual, alongside icon/avatar.
-  describe('mark (gh#339)', () => {
-    it('renders <adia-mark-ui> in the listbox row for a declarative <option mark>', async () => {
-      const s = mount(`
-        <select-ui placeholder="Choose…">
-          <option value="adia" mark>Adia</option>
-          <option value="acme" avatar="https://example.test/acme.png">Acme</option>
-        </select-ui>
-      `);
-      await tick();
-      const row = s.querySelector('[role="option"][data-value="adia"]');
-      expect(row.querySelector('adia-mark-ui')).not.toBeNull();
-      expect(s.options.find((o) => o.value === 'adia').mark).toBe(true);
-    });
-
-    it('reflects the SELECTED option\'s mark in the trigger leading slot', async () => {
-      const s = mount(`
-        <select-ui value="adia">
-          <option value="adia" mark>Adia</option>
-          <option value="acme" avatar="https://example.test/acme.png">Acme</option>
-        </select-ui>
-      `);
-      await tick();
-      const leading = s.querySelector('[slot="trigger"] > [data-select-leading]');
-      expect(leading.tagName).toBe('ADIA-MARK-UI');
-    });
-
-    it('mark wins over avatar and icon when more than one is set on the same option', async () => {
-      const s = mount(`<select-ui value="a"></select-ui>`);
-      await tick();
-      s.options = [{ value: 'a', label: 'A', mark: true, avatar: 'https://example.test/a.png', icon: 'star' }];
-      await tick();
-      const leading = s.querySelector('[slot="trigger"] > [data-select-leading]');
-      expect(leading.tagName).toBe('ADIA-MARK-UI');
-    });
-
-    it('switching the SELECTED option from mark to avatar swaps the trigger leading element (not just its attributes)', async () => {
-      const s = mount(`
-        <select-ui value="adia">
-          <option value="adia" mark>Adia</option>
-          <option value="acme" avatar="https://example.test/acme.png">Acme</option>
-        </select-ui>
-      `);
-      await tick();
-      expect(s.querySelector('[slot="trigger"] > [data-select-leading]').tagName).toBe('ADIA-MARK-UI');
-      s.value = 'acme';
-      await tick();
-      const leading = s.querySelector('[slot="trigger"] > [data-select-leading]');
-      expect(leading.tagName).toBe('IMG');
-      expect(leading.getAttribute('src')).toBe('https://example.test/acme.png');
-    });
-
-    it('a host-level [mark] renders the brand mark as a static leading visual when no option overrides it', async () => {
-      const s = mount(`
-        <select-ui mark value="adia">
-          <option value="adia">Adia</option>
-        </select-ui>
-      `);
-      await tick();
-      const leading = s.querySelector('[slot="trigger"] > [data-select-leading]');
-      expect(leading.tagName).toBe('ADIA-MARK-UI');
-    });
-
-    it('renders <adia-mark-ui> in a listbox ROW under [multiple] mode too (shares #optionLeadHTML with single-select)', async () => {
-      const s = mount(`
-        <select-ui multiple value="adia">
-          <option value="adia" mark>Adia</option>
-          <option value="acme" avatar="https://example.test/acme.png">Acme</option>
-        </select-ui>
-      `);
-      await tick();
-      const row = s.querySelector('[role="option"][data-value="adia"]');
-      expect(row.querySelector('adia-mark-ui')).not.toBeNull();
-      // Multi-select shows chips, not a leading visual, in the TRIGGER — mark
-      // is a correct no-op there (#syncLeading's `if (this.multiple) return`).
-      expect(s.querySelector('[slot="trigger"] > [data-select-leading]')).toBeNull();
-    });
-
-    it('mark set via the .options property (not just the declarative attribute) is honoured', async () => {
-      const s = mount(`<select-ui value="adia"></select-ui>`);
-      await tick();
-      s.options = [
-        { value: 'adia', label: 'Adia', mark: true },
-        { value: 'acme', label: 'Acme', avatar: 'https://example.test/acme.png' },
-      ];
-      await tick();
-      const leading = s.querySelector('[slot="trigger"] > [data-select-leading]');
-      expect(leading.tagName).toBe('ADIA-MARK-UI');
-    });
-  });
-});