@adia-ai/web-components 0.8.19 → 0.8.21

package/components/select/select.test.js

@@ -1,481 +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: [summary-label] renders a text summary instead of chips (gh#442)', async () => {
-    const s = mount(`
-      <select-ui multiple summary-label="Organizations" value="a,c">
-        <option value="a">Riverside Health System</option>
-        <option value="b">Bay Area Health Group</option>
-        <option value="c">Greenfield Medical Group</option>
-      </select-ui>
-    `);
-    await tick();
-    expect(s.hasAttribute('data-multi-chips')).toBe(false);
-    expect(s.querySelectorAll('[slot="trigger"] [data-chips] tag-ui').length).toBe(0);
-    expect(s.querySelector('[slot="display"]').textContent).toBe('Organizations (2)');
-  });
-
-  it('multi-select summary: one selection shows its own label; none shows the placeholder (gh#442)', async () => {
-    const s = mount(`
-      <select-ui multiple summary-label="Organizations" placeholder="All organizations" value="a">
-        <option value="a">Riverside Health System</option>
-        <option value="b">Bay Area Health Group</option>
-      </select-ui>
-    `);
-    await tick();
-    expect(s.querySelector('[slot="display"]').textContent).toBe('Riverside Health System');
-    s.value = '';
-    await tick();
-    expect(s.querySelector('[slot="display"]').textContent).toBe('All organizations');
-  });
-
-  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');
-    });
-  });
-});

package/components/slider/slider.test.js

@@ -1,202 +0,0 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import '../../core/element.js';
-import './slider.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('slider-ui', () => {
-  beforeEach(() => { document.body.innerHTML = ''; });
-
-  // §330 (v0.5.16) — slider iOS-style pill redesign. Thumb position no
-  // longer set via thumb.style.left; instead the host gets a CSS custom
-  // property `--slider-pct` (fraction 0.0–1.0) and CSS calc() composes
-  // the full geometry: `fill_width(p) = t + p·(W−t)`, where t = thumb
-  // width and W = track width. Test asserts the CSS variable carries
-  // the expected fraction (50% → 0.5).
-  const pct = (s) => s.style.getPropertyValue('--slider-pct').trim();
-
-  it('renders host --slider-pct for initial value', async () => {
-    const s = mount('<slider-ui value="50" min="0" max="100"></slider-ui>');
-    await tick();
-    expect(pct(s)).toBe('0.5');
-  });
-
-  // Property reactivity contract — locks in the behavior that consumer
-  // feedback (FEEDBACK-adia-packages.md §5, 2026-05-12) incorrectly
-  // claimed was broken. UIElement's signal-backed property setters
-  // trigger the host's render effect on every property change; slider-ui's
-  // render() reads this.value and writes --slider-pct on the host.
-  it('updates --slider-pct when .value is set programmatically', async () => {
-    const s = mount('<slider-ui value="50" min="0" max="100"></slider-ui>');
-    await tick();
-    expect(pct(s)).toBe('0.5');
-
-    s.value = 75;
-    await tick();
-    expect(pct(s)).toBe('0.75');
-
-    s.value = 10;
-    await tick();
-    expect(pct(s)).toBe('0.1');
-  });
-
-  it('updates --slider-pct when attribute is set imperatively', async () => {
-    const s = mount('<slider-ui value="50" min="0" max="100"></slider-ui>');
-    await tick();
-
-    s.setAttribute('value', '25');
-    await tick();
-    expect(pct(s)).toBe('0.25');
-  });
-
-  it('updates [slot="value"] readout text when .value changes', async () => {
-    const s = mount('<slider-ui value="50" min="0" max="100"></slider-ui>');
-    await tick();
-    const readout = s.querySelector('[slot="value"]');
-    expect(readout.textContent).toBe('50');
-
-    s.value = 88;
-    await tick();
-    expect(readout.textContent).toBe('88');
-  });
-
-  it('emits CustomEvent("change") with detail.value on keyboard step', async () => {
-    const s = mount('<slider-ui value="50" min="0" max="100" step="1"></slider-ui>');
-    await tick();
-
-    let captured = null;
-    s.addEventListener('change', (e) => { captured = e; });
-
-    s.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
-    await tick();
-
-    expect(captured).not.toBeNull();
-    expect(captured).toBeInstanceOf(CustomEvent);
-    expect(captured.detail).toEqual({ value: 51 });
-  });
-
-  it('emits CustomEvent("input") with detail.value on internal value change', async () => {
-    const s = mount('<slider-ui value="50" min="0" max="100" step="1"></slider-ui>');
-    await tick();
-
-    let captured = null;
-    s.addEventListener('input', (e) => { captured = e; });
-
-    s.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }));
-    await tick();
-
-    expect(captured).not.toBeNull();
-    expect(captured.detail).toEqual({ value: 51 });
-  });
-
-  it('reflects value to [aria-valuenow] for screen readers', async () => {
-    const s = mount('<slider-ui value="50" min="0" max="100"></slider-ui>');
-    await tick();
-    expect(s.getAttribute('aria-valuenow')).toBe('50');
-
-    s.value = 80;
-    await tick();
-    expect(s.getAttribute('aria-valuenow')).toBe('80');
-  });
-
-  // §FB-45 (color-app, 2026-05-22) — template engine snapshot trap.
-  // connected() stamped label/suffix once; render() didn't re-sync them.
-  // Template engine writes {{p:N}} first, then resolves to the real value —
-  // simulated here by setAttribute('label', placeholder) then setting the
-  // real value. Both spans must reflect the final value, not the placeholder.
-  it('re-syncs [slot="label"] when label attribute changes after connection', async () => {
-    const s = mount('<slider-ui value="50" min="0" max="100"></slider-ui>');
-    await tick();
-    // No label initially — span absent
-    expect(s.querySelector('[slot="label"]')).toBeNull();
-
-    // Simulate template engine writing placeholder then real value
-    s.setAttribute('label', '{{p:7}}');
-    await tick();
-    s.setAttribute('label', 'Volume');
-    await tick();
-
-    const labelEl = s.querySelector('[slot="label"]');
-    expect(labelEl).not.toBeNull();
-    expect(labelEl.textContent).toBe('Volume');
-    expect(s.getAttribute('aria-label')).toBe('Volume');
-  });
-
-  it('re-syncs [slot="suffix"] when suffix attribute changes after connection', async () => {
-    const s = mount('<slider-ui value="50" min="0" max="100" label="Volume" suffix="%"></slider-ui>');
-    await tick();
-    const suffixEl = s.querySelector('[slot="suffix"]');
-    expect(suffixEl).not.toBeNull();
-    expect(suffixEl.textContent).toBe('%');
-
-    // Simulate placeholder → resolved suffix
-    s.setAttribute('suffix', '{{p:8}}');
-    await tick();
-    s.setAttribute('suffix', 'rem');
-    await tick();
-
-    expect(s.querySelector('[slot="suffix"]').textContent).toBe('rem');
-  });
-
-  // ─── Dual-thumb mode ────────────────────────────────────────────────
-  // v1.9.x: dual-thumb range slider lives on slider-ui[dual] + [lower-value]/[upper-value].
-  // Fill spans BETWEEN the two thumb centers; thumbs are positioned via
-  // --slider-pct-lower / --slider-pct-upper CSS variables.
-  const pctLower = (s) => s.style.getPropertyValue('--slider-pct-lower').trim();
-  const pctUpper = (s) => s.style.getPropertyValue('--slider-pct-upper').trim();
-
-  it('dual mode: writes --slider-pct-lower and --slider-pct-upper from lower-value / upper-value', async () => {
-    const s = mount('<slider-ui dual lower-value="20" upper-value="80" min="0" max="100"></slider-ui>');
-    await tick();
-    expect(pctLower(s)).toBe('0.2');
-    expect(pctUpper(s)).toBe('0.8');
-  });
-
-  it('dual mode: stamps two thumb elements with data-thumb="lower" and data-thumb="upper"', async () => {
-    const s = mount('<slider-ui dual lower-value="20" upper-value="80" min="0" max="100"></slider-ui>');
-    await tick();
-    const lowerThumb = s.querySelector('[slot="thumb"][data-thumb="lower"]');
-    const upperThumb = s.querySelector('[slot="thumb"][data-thumb="upper"]');
-    expect(lowerThumb).not.toBeNull();
-    expect(upperThumb).not.toBeNull();
-  });
-
-  it('dual mode: change event detail carries {lower, upper}', async () => {
-    const s = mount('<slider-ui dual lower-value="20" upper-value="80" min="0" max="100" step="1"></slider-ui>');
-    await tick();
-    let captured = null;
-    s.addEventListener('change', (e) => { captured = e; });
-    // Focus the lower thumb explicitly so the keyboard handler targets it
-    const lowerThumb = s.querySelector('[slot="thumb"][data-thumb="lower"]');
-    lowerThumb.focus();
-    lowerThumb.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
-    await tick();
-    expect(captured).not.toBeNull();
-    expect(captured.detail).toEqual({ lower: 21, upper: 80 });
-  });
-
-  it('dual mode: lower setter clamps DOWN to upper when set too high', async () => {
-    const s = mount('<slider-ui dual lower-value="20" upper-value="80" min="0" max="100" step="1"></slider-ui>');
-    await tick();
-    s.lowerValue = 90; // > upperValue (80) → constraint clamps lower DOWN to upper
-    await tick();
-    expect(s.lowerValue).toBe(80);
-    expect(s.upperValue).toBe(80); // upper unchanged
-  });
-
-  it('dual mode: upper setter clamps UP to lower when set too low', async () => {
-    const s = mount('<slider-ui dual lower-value="20" upper-value="80" min="0" max="100" step="1"></slider-ui>');
-    await tick();
-    s.upperValue = 10; // < lowerValue (20) → constraint clamps upper UP to lower
-    await tick();
-    expect(s.upperValue).toBe(20);
-    expect(s.lowerValue).toBe(20); // lower unchanged
-  });
-});