@aquera/nile-elements 2.0.12 → 2.0.14

package/dist/src/nile-select/nile-select.test.js

@@ -1,6 +1,7 @@
-import { aTimeout, expect, fixture, html, nextFrame } from '@open-wc/testing';
+import { aTimeout, expect, fixture, html, nextFrame, waitUntil } from '@open-wc/testing';
 import './nile-select';
 import '../nile-option/nile-option';
+import '../nile-input/nile-input';
 describe('NileSelect', () => {
     it('1. renders', async () => { const el = await fixture(html `<nile-select></nile-select>`); expect(el).to.exist; });
     it('2. shadow root', async () => { const el = await fixture(html `<nile-select></nile-select>`); expect(el.shadowRoot).to.not.be.null; });
@@ -132,7 +133,7 @@ describe('NileSelect chip fitting behaviour matrix', () => {
     }
     it('M1. multiple + no max-options-visible + autoResize=false renders fitted chips', async () => {
         const host = await fixture(html `<div style="width: 320px">
-        <nile-select multiple .value=${LABELS}>${options()}</nile-select>
+        <nile-select showtooltip multiple .value=${LABELS}>${options()}</nile-select>
       </div>`);
         const el = host.querySelector('nile-select');
         await settle(el);
@@ -143,7 +144,7 @@ describe('NileSelect chip fitting behaviour matrix', () => {
     });
     it('M2. multiple + no max-options-visible + autoResize=true refits when the container resizes', async () => {
         const host = await fixture(html `<div style="width: 480px">
-        <nile-select multiple autoresize .value=${LABELS}>${options()}</nile-select>
+        <nile-select showtooltip multiple autoresize .value=${LABELS}>${options()}</nile-select>
       </div>`);
         const el = host.querySelector('nile-select');
         await settle(el);
@@ -157,7 +158,7 @@ describe('NileSelect chip fitting behaviour matrix', () => {
     });
     it('M3. explicit max-options-visible switches to fixed-count layout', async () => {
         const host = await fixture(html `<div style="width: 320px">
-        <nile-select multiple max-options-visible="2" .value=${LABELS}>
+        <nile-select showtooltip multiple max-options-visible="2" .value=${LABELS}>
           ${options()}
         </nile-select>
       </div>`);
@@ -170,7 +171,7 @@ describe('NileSelect chip fitting behaviour matrix', () => {
     });
     it('M3b. max-options-visible set as a property also switches to fixed-count layout', async () => {
         const host = await fixture(html `<div style="width: 320px">
-        <nile-select multiple .value=${LABELS}>${options()}</nile-select>
+        <nile-select showtooltip multiple .value=${LABELS}>${options()}</nile-select>
       </div>`);
         const el = host.querySelector('nile-select');
         await settle(el);
@@ -182,7 +183,7 @@ describe('NileSelect chip fitting behaviour matrix', () => {
     });
     it('M3c. the default max-options-visible is still 3 and reading it does not opt out', async () => {
         const host = await fixture(html `<div style="width: 320px">
-        <nile-select multiple .value=${LABELS}>${options()}</nile-select>
+        <nile-select showtooltip multiple .value=${LABELS}>${options()}</nile-select>
       </div>`);
         const el = host.querySelector('nile-select');
         await settle(el);
@@ -201,7 +202,7 @@ describe('NileSelect chip fitting behaviour matrix', () => {
     });
     it('M8. virtual-scroll mode keeps fitted chips when max-options-visible was never set', async () => {
         const host = await fixture(html `<div style="width: 320px">
-        <nile-select
+        <nile-select showtooltip
           multiple
           enable-virtual-scroll
           .enableVirtualScroll=${true}
@@ -216,11 +217,12 @@ describe('NileSelect chip fitting behaviour matrix', () => {
         await inner.updateComplete;
         await nextFrame();
         const innerTags = inner.shadowRoot.querySelector('.select__tags');
+        expect(innerTags, 'inner .select__tags should render').to.exist;
         expect(innerTags.classList.contains('select__tags--fitted')).to.be.true;
     });
     it('M9. virtual-scroll mode forwards an explicit max-options-visible', async () => {
         const host = await fixture(html `<div style="width: 320px">
-        <nile-select
+        <nile-select showtooltip
           multiple
           max-options-visible="2"
           .enableVirtualScroll=${true}
@@ -251,7 +253,7 @@ describe('NileSelect chip fitting behaviour matrix', () => {
     });
     it('M11. toggling max-options-visible does not leak resize observers or lose the observed container', async () => {
         const host = await fixture(html `<div style="width: 480px">
-        <nile-select multiple autoresize .value=${LABELS}>
+        <nile-select showtooltip multiple autoresize .value=${LABELS}>
           ${options()}
         </nile-select>
       </div>`);
@@ -288,7 +290,7 @@ describe('NileSelect chip fitting behaviour matrix', () => {
     function liveTips(el) {
         return tips(el).filter(tip => !tip.hasAttribute('disabled'));
     }
-    it('M12. no showtooltip attribute hides the chip tooltip', async () => {
+    it('M12. no showtooltip attribute renders no chip tooltips', async () => {
         const host = await fixture(html `<div style="width: 200px">
         <nile-select multiple .value=${LABELS}>${options()}</nile-select>
       </div>`);
@@ -296,8 +298,7 @@ describe('NileSelect chip fitting behaviour matrix', () => {
         await settle(el);
         expect(el.showTooltip).to.be.false;
         expect(el.hasAttribute('showtooltip')).to.be.false;
-        expect(tips(el).length).to.be.greaterThan(0);
-        expect(liveTips(el).length).to.equal(0);
+        expect(tips(el).length).to.equal(0);
     });
     it('M13. showtooltip shows the chip tooltip', async () => {
         const host = await fixture(html `<div style="width: 200px">
@@ -324,16 +325,21 @@ describe('NileSelect chip fitting behaviour matrix', () => {
             return content.scrollWidth > content.clientWidth + 1;
         }).length;
     }
-    it('M16. without showtooltip a fitted chip is never truncated', async () => {
+    it('M16. without showtooltip the pre-2.0.9 chip row is used', async () => {
         const host = await fixture(html `<div style="width: 480px">
         <nile-select multiple .value=${LABELS}>${options()}</nile-select>
       </div>`);
         const el = host.querySelector('nile-select');
         await settle(el);
+        await aTimeout(20);
+        await settle(el);
         expect(el.showTooltip).to.be.false;
-        expect(clippedChipCount(el)).to.equal(0);
-        // The chips that could not fit went into the +N button, not into an ellipsis.
-        expect(hiddenChips(el).length).to.be.greaterThan(0);
+        expect(tagsRoot(el).classList.contains('select__tags--fitted')).to.be.false;
+        expect(el.shadowRoot.querySelector('button.select__tags-count')).to.not.exist;
+        expect(chips(el).every(chip => !chip.style.maxWidth)).to.be.true;
+        const overflowCount = el.shadowRoot.querySelector('span.select__tags-count');
+        expect(overflowCount).to.exist;
+        expect(overflowCount.textContent).to.contain('More');
     });
     it('M17. showtooltip is what allows a fitted chip to be truncated', async () => {
         const host = await fixture(html `<div style="width: 480px">
@@ -366,7 +372,7 @@ describe('NileSelect chip fitting behaviour matrix', () => {
     });
     it('M15. the overflow button label and text never disagree, including first paint', async () => {
         const host = await fixture(html `<div style="width: 220px">
-        <nile-select multiple .value=${LABELS}>${options()}</nile-select>
+        <nile-select showtooltip multiple .value=${LABELS}>${options()}</nile-select>
       </div>`);
         const el = host.querySelector('nile-select');
         // Before the layout frame runs, no button may claim a count it cannot back up.
@@ -445,5 +451,878 @@ describe('NileSelect chip fitting behaviour matrix', () => {
         expect(inner.showTooltip).to.be.true;
         expect(inner.chipMaxWidth).to.equal(240);
     });
+    it('G1. default chips are not capped or squeezed by the 2.0.9 chip styles', async () => {
+        const host = await fixture(html `<div style="width: 480px">
+        <nile-select multiple .value=${LABELS.slice(0, 2)}>${options()}</nile-select>
+      </div>`);
+        const el = host.querySelector('nile-select');
+        await settle(el);
+        const [chip] = chips(el);
+        expect(chip, 'select rendered no chips').to.exist;
+        expect(getComputedStyle(chip).maxWidth).to.equal('none');
+        expect(getComputedStyle(chip).minWidth).to.not.equal('0px');
+    });
+    it('G2. showtooltip caps chips at the chip max width', async () => {
+        const host = await fixture(html `<div style="width: 480px">
+        <nile-select multiple showtooltip .value=${LABELS.slice(0, 2)}>${options()}</nile-select>
+      </div>`);
+        const el = host.querySelector('nile-select');
+        await settle(el);
+        const [firstChip] = chips(el);
+        expect(firstChip, 'select rendered no chips').to.exist;
+        expect(getComputedStyle(firstChip).maxWidth).to.not.equal('none');
+    });
+    it('G3. autoresize without showtooltip refits with the 2.0.8 width fit', async () => {
+        const host = await fixture(html `<div style="width: 1200px">
+        <nile-select multiple autoresize .value=${LABELS}>${options()}</nile-select>
+      </div>`);
+        const el = host.querySelector('nile-select');
+        await settle(el);
+        await aTimeout(20);
+        const wide = el.maxOptionsVisible;
+        host.style.width = '300px';
+        await aTimeout(200);
+        await settle(el);
+        expect(tagsRoot(el).classList.contains('select__tags--fitted')).to.be.false;
+        expect(wide).to.equal(0);
+        expect(el.maxOptionsVisible).to.be.greaterThan(0);
+        expect(el.shadowRoot.querySelector('span.select__tags-count')).to.exist;
+    });
+    it('G4. toggling showTooltip switches between the fitted and the 2.0.8 chip row', async () => {
+        const host = await fixture(html `<div style="width: 320px">
+        <nile-select multiple .value=${LABELS}>${options()}</nile-select>
+      </div>`);
+        const el = host.querySelector('nile-select');
+        await settle(el);
+        expect(tagsRoot(el).classList.contains('select__tags--fitted')).to.be.false;
+        el.showTooltip = true;
+        await settle(el);
+        expect(tagsRoot(el).classList.contains('select__tags--fitted')).to.be.true;
+        expect(el.shadowRoot.querySelector('button.select__tags-count')).to.exist;
+        el.showTooltip = false;
+        await settle(el);
+        await aTimeout(20);
+        await settle(el);
+        expect(tagsRoot(el).classList.contains('select__tags--fitted')).to.be.false;
+        expect(el.shadowRoot.querySelector('button.select__tags-count')).to.not.exist;
+    });
+});
+describe('NileSelect enableVirtualScroll value sync', () => {
+    const ROLES = ['Administrators', 'Users', 'Guests', 'Print Operators'];
+    const DATA = ROLES.map(role => ({ label: role, value: role }));
+    async function virtualSelect(tpl = html `<nile-select
+      multiple
+      .enableVirtualScroll=${true}
+      .data=${DATA}
+      .value=${[]}
+    ></nile-select>`) {
+        const el = await fixture(tpl);
+        await el.updateComplete;
+        const inner = el.shadowRoot.querySelector('nile-virtual-select');
+        await inner.updateComplete;
+        return { el, inner };
+    }
+    async function settle(el, inner) {
+        await inner.updateComplete;
+        await el.updateComplete;
+        await inner.updateComplete;
+    }
+    it('V1. picking an option updates the wrapper value', async () => {
+        const { el, inner } = await virtualSelect();
+        inner.handleOptionSelection({ value: 'Administrators' });
+        await settle(el, inner);
+        expect(el.value).to.deep.equal(['Administrators']);
+    });
+    it('V2. the first pick survives a wrapper re-render', async () => {
+        const { el, inner } = await virtualSelect();
+        inner.handleOptionSelection({ value: 'Administrators' });
+        await settle(el, inner);
+        el.requestUpdate();
+        await settle(el, inner);
+        expect(inner.value).to.deep.equal(['Administrators']);
+        expect(el.value).to.deep.equal(['Administrators']);
+    });
+    it('V3. a removed chip stays removed after a wrapper re-render', async () => {
+        const { el, inner } = await virtualSelect(html `<nile-select
+      multiple
+      .enableVirtualScroll=${true}
+      .data=${DATA}
+      .value=${['Administrators', 'Users', 'Guests']}
+    ></nile-select>`);
+        inner.handleTagRemove(new CustomEvent('nile-remove'), { value: 'Administrators' });
+        await settle(el, inner);
+        inner.handleTagRemove(new CustomEvent('nile-remove'), { value: 'Users' });
+        await settle(el, inner);
+        el.requestUpdate();
+        await settle(el, inner);
+        expect(el.value).to.deep.equal(['Guests']);
+        expect(inner.value).to.deep.equal(['Guests']);
+    });
+    it('V4. nile-change listeners on the wrapper already see the new value', async () => {
+        const { el, inner } = await virtualSelect();
+        const seen = [];
+        el.addEventListener('nile-change', () => seen.push(el.value));
+        inner.handleOptionSelection({ value: 'Guests' });
+        await settle(el, inner);
+        expect(seen).to.deep.equal([['Guests']]);
+    });
+    it('V5. single-select virtual mode keeps the wrapper value in sync', async () => {
+        const { el, inner } = await virtualSelect(html `<nile-select
+      .enableVirtualScroll=${true}
+      .data=${DATA}
+    ></nile-select>`);
+        inner.handleOptionSelection({ value: 'Users' });
+        await settle(el, inner);
+        el.requestUpdate();
+        await settle(el, inner);
+        expect(el.value).to.equal('Users');
+        expect(inner.value).to.equal('Users');
+    });
+    it('V6. resizing the host does not re-render the wrapper without autoResize', async () => {
+        const host = await fixture(html `<div style="width: 400px">
+      <nile-select multiple .enableVirtualScroll=${true} .data=${DATA}></nile-select>
+    </div>`);
+        const el = host.querySelector('nile-select');
+        await el.updateComplete;
+        await nextFrame();
+        await nextFrame();
+        let updates = 0;
+        const update = el.update;
+        el.update = function (changed) {
+            updates++;
+            return update.call(this, changed);
+        };
+        host.style.width = '250px';
+        await nextFrame();
+        await nextFrame();
+        await aTimeout(50);
+        expect(updates).to.equal(0);
+    });
+});
+describe('NileSelect enableVirtualScroll + searchEnabled value sync', () => {
+    const ROLES = ['Administrators', 'Users', 'Guests', 'Print Operators'];
+    const DATA = ROLES.map(role => ({ label: role, value: role }));
+    async function settle(el, inner) {
+        await inner.updateComplete;
+        await el.updateComplete;
+        await inner.updateComplete;
+        await nextFrame();
+        await el.updateComplete;
+        await inner.updateComplete;
+    }
+    async function searchableVirtual({ multiple = true, portal = false, value = ['Users'] } = {}) {
+        const el = await fixture(html `<nile-select
+      ?multiple=${multiple}
+      .searchEnabled=${true}
+      .enableVirtualScroll=${true}
+      .portal=${portal}
+      .data=${DATA}
+      .value=${value}
+    ></nile-select>`);
+        await el.updateComplete;
+        const inner = el.shadowRoot.querySelector('nile-virtual-select');
+        await inner.updateComplete;
+        inner.open = true;
+        await settle(el, inner);
+        if (portal) {
+            await waitUntil(() => document.body.querySelector('.nile-virtual-select-portal-append #listbox'), 'listbox never portalled');
+        }
+        await waitUntil(() => searchInput(inner)?.shadowRoot?.querySelector('input'), 'search box never rendered');
+        return { el, inner };
+    }
+    function searchInput(inner) {
+        const inShadow = inner.shadowRoot.querySelector('.select__search nile-input');
+        const inPortal = document.body.querySelector('.nile-virtual-select-portal-append .select__search nile-input');
+        return (inShadow ?? inPortal);
+    }
+    async function typeSearch(el, inner, text) {
+        const input = searchInput(inner).shadowRoot.querySelector('input');
+        input.value = text;
+        input.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+        await settle(el, inner);
+    }
+    afterEach(() => {
+        document.body.querySelectorAll('.nile-virtual-select-portal-append').forEach(n => n.remove());
+    });
+    it('R1a. typing in the search box keeps the selected values (multiple)', async () => {
+        const { el, inner } = await searchableVirtual();
+        expect(searchInput(inner), 'search box rendered').to.exist;
+        await typeSearch(el, inner, 'Adm');
+        expect(el.value).to.deep.equal(['Users']);
+        expect(inner.value).to.deep.equal(['Users']);
+    });
+    it('R1b. typing in the search box keeps the selected value (single)', async () => {
+        const { el, inner } = await searchableVirtual({ multiple: false, value: 'Users' });
+        await typeSearch(el, inner, 'zz');
+        expect(el.value).to.equal('Users');
+        expect(inner.value).to.equal('Users');
+    });
+    it('R1c. clearing the search text does not clear the selection', async () => {
+        const { el, inner } = await searchableVirtual({ value: ['Users', 'Guests'] });
+        await typeSearch(el, inner, 'Gu');
+        await typeSearch(el, inner, '');
+        expect(el.value).to.deep.equal(['Users', 'Guests']);
+        await typeSearch(el, inner, 'Gu');
+        const clear = searchInput(inner).shadowRoot.querySelector('.input__clear');
+        expect(clear, 'search clear button rendered').to.exist;
+        clear.click();
+        await settle(el, inner);
+        expect(el.value).to.deep.equal(['Users', 'Guests']);
+        expect(inner.value).to.deep.equal(['Users', 'Guests']);
+    });
+    it('R1d. a real selection while searching still updates the wrapper value', async () => {
+        const { el, inner } = await searchableVirtual();
+        await typeSearch(el, inner, 'Gu');
+        inner.handleOptionSelection({ value: 'Guests' });
+        await settle(el, inner);
+        expect(el.value).to.deep.equal(['Users', 'Guests']);
+        el.requestUpdate();
+        await settle(el, inner);
+        expect(inner.value).to.deep.equal(['Users', 'Guests']);
+    });
+    it('R1e. removing a chip still updates the wrapper value', async () => {
+        const { el, inner } = await searchableVirtual({ value: ['Users', 'Guests'] });
+        await typeSearch(el, inner, 'U');
+        inner.handleTagRemove(new CustomEvent('nile-remove'), { value: 'Users' });
+        await settle(el, inner);
+        expect(el.value).to.deep.equal(['Guests']);
+    });
+    it('R1f. nile-input and nile-change from the inner select sync; nested ones do not', async () => {
+        const { el, inner } = await searchableVirtual();
+        const nested = inner.shadowRoot.querySelector('.select__search');
+        const fire = (target, name, value) => target.dispatchEvent(new CustomEvent(name, { detail: { value }, bubbles: true, composed: true }));
+        fire(nested, 'nile-input', 'nested-input');
+        fire(nested, 'nile-change', 'nested-change');
+        expect(el.value).to.deep.equal(['Users']);
+        fire(inner, 'nile-input', ['Guests']);
+        expect(el.value).to.deep.equal(['Guests']);
+        fire(inner, 'nile-change', ['Administrators']);
+        expect(el.value).to.deep.equal(['Administrators']);
+    });
+    it('R1g. portal mode: list is portalled, search keeps the value, selection syncs', async () => {
+        const { el, inner } = await searchableVirtual({ portal: true });
+        const listbox = document.body.querySelector('.nile-virtual-select-portal-append #listbox');
+        expect(listbox, 'listbox moved under document.body').to.exist;
+        expect(inner.shadowRoot.querySelector('#listbox')).to.equal(null);
+        await typeSearch(el, inner, 'Adm');
+        expect(el.value).to.deep.equal(['Users']);
+        inner.handleOptionSelection({ value: 'Administrators' });
+        await settle(el, inner);
+        expect(el.value).to.deep.equal(['Users', 'Administrators']);
+        inner.open = false;
+        await settle(el, inner);
+        await waitUntil(() => !document.body.querySelector('.nile-virtual-select-portal-append'), 'portal not cleaned up');
+    });
+});
+describe('NileSelect chipMinWidth / chipMaxWidth attributes', () => {
+    const LABELS = ['Engineering Operations Team', 'Human Resources Department'];
+    const options = () => LABELS.map(label => html `<nile-option value=${label}>${label}</nile-option>`);
+    async function settle(el) {
+        await el.updateComplete;
+        await nextFrame();
+        await nextFrame();
+        await el.updateComplete;
+    }
+    const firstChip = (el) => el.shadowRoot.querySelector('.select__tags nile-tag');
+    it('R4a. defaults are 110 / 180 and are not written to the host', async () => {
+        const el = await fixture(html `<nile-select multiple>${options()}</nile-select>`);
+        await settle(el);
+        expect(el.chipMinWidth).to.equal(110);
+        expect(el.chipMaxWidth).to.equal(180);
+        expect(el.hasAttribute('chipminwidth')).to.be.false;
+        expect(el.hasAttribute('chipmaxwidth')).to.be.false;
+    });
+    it('R4b. the chipminwidth / chipmaxwidth attributes still set the properties', async () => {
+        const el = await fixture(html `<nile-select multiple chipminwidth="90" chipmaxwidth="150">${options()}</nile-select>`);
+        await settle(el);
+        expect(el.chipMinWidth).to.equal(90);
+        expect(el.chipMaxWidth).to.equal(150);
+        el.setAttribute('chipmaxwidth', '160');
+        await settle(el);
+        expect(el.chipMaxWidth).to.equal(160);
+    });
+    it('R4c. setting the properties programmatically works and does not add attributes', async () => {
+        const el = await fixture(html `<nile-select multiple>${options()}</nile-select>`);
+        await settle(el);
+        el.chipMinWidth = 95;
+        el.chipMaxWidth = 140;
+        await settle(el);
+        expect(el.chipMinWidth).to.equal(95);
+        expect(el.chipMaxWidth).to.equal(140);
+        expect(el.hasAttribute('chipmaxwidth')).to.be.false;
+    });
+    it('R4d. showtooltip still caps squeezed chips at chipMaxWidth (attribute and property)', async () => {
+        const host = await fixture(html `<div style="width: 300px">
+      <nile-select multiple showtooltip chipmaxwidth="150" .value=${LABELS}>${options()}</nile-select>
+    </div>`);
+        const el = host.querySelector('nile-select');
+        await settle(el);
+        const chip = firstChip(el);
+        expect(chip, 'select rendered no chips').to.exist;
+        expect(chip.getBoundingClientRect().width).to.be.within(1, 150.5);
+        el.chipMaxWidth = 120;
+        await settle(el);
+        await nextFrame();
+        expect(firstChip(el).getBoundingClientRect().width).to.be.within(1, 120.5);
+    });
+    it('R4e. virtual mode forwards explicit values without reflecting defaults on either host', async () => {
+        const data = LABELS.map(label => ({ label, value: label }));
+        const el = await fixture(html `<nile-select multiple .enableVirtualScroll=${true} .data=${data} chipmaxwidth="150"></nile-select>`);
+        await settle(el);
+        const inner = el.shadowRoot.querySelector('nile-virtual-select');
+        await inner.updateComplete;
+        expect(inner.chipMaxWidth).to.equal(150);
+        expect(inner.chipMinWidth).to.equal(110);
+        expect(el.hasAttribute('chipminwidth')).to.be.false;
+        expect(inner.hasAttribute('chipminwidth')).to.be.false;
+        expect(inner.hasAttribute('chipmaxwidth')).to.be.false;
+    });
+});
+describe('NileSelect footer width with and without noWidthSync', () => {
+    async function openSelect(width, noWidthSync) {
+        const host = await fixture(html `<div style="width: ${width}px">
+      <nile-select multiple .noWidthSync=${noWidthSync} .value=${['a']}>
+        <nile-option value="a">a</nile-option>
+        <nile-option value="b">b</nile-option>
+      </nile-select>
+    </div>`);
+        const el = host.querySelector('nile-select');
+        await el.updateComplete;
+        await el.show();
+        await nextFrame();
+        const listbox = el.shadowRoot.querySelector('#listbox');
+        const footer = el.shadowRoot.querySelector('.select__footer');
+        const combobox = el.shadowRoot.querySelector('[part~="combobox"]');
+        return { el, listbox, footer, combobox };
+    }
+    const labelShown = (footer, selector) => getComputedStyle(footer.querySelector(selector)).display !== 'none';
+    before(() => document.documentElement.style.setProperty('--nile-display-flex', 'flex'));
+    after(() => document.documentElement.style.removeProperty('--nile-display-flex'));
+    for (const width of [120, 400]) {
+        it(`R3a. noWidthSync + multiple at ${width}px does not collapse and shows the whole footer`, async () => {
+            const { listbox, footer } = await openSelect(width, true);
+            expect(listbox.offsetWidth).to.be.greaterThan(60);
+            expect(listbox.offsetWidth).to.be.at.least(footer.offsetWidth);
+            expect(footer.scrollWidth).to.be.at.most(footer.clientWidth + 1);
+            expect(labelShown(footer, '.select__clear .select__footer-label')).to.be.true;
+            expect(labelShown(footer, '.select__footer-action .select__footer-label')).to.be.true;
+        });
+    }
+    it('R3b. width sync at normal width keeps the dropdown as wide as the trigger', async () => {
+        const { listbox, combobox, footer } = await openSelect(400, false);
+        expect(Math.abs(listbox.offsetWidth - combobox.offsetWidth)).to.be.below(2);
+        expect(labelShown(footer, '.select__clear .select__footer-label')).to.be.true;
+    });
+    it('R3c. width sync at a narrow width still collapses the footer labels (container queries kept)', async () => {
+        const { listbox, combobox, footer } = await openSelect(130, false);
+        expect(Math.abs(listbox.offsetWidth - combobox.offsetWidth)).to.be.below(2);
+        expect(labelShown(footer, '.select__clear .select__footer-label')).to.be.false;
+    });
+});
+describe('NileSelect showtooltip chip fit recovery (hidden, reconnect, re-parent)', () => {
+    const LABELS = [
+        'Engineering Operations Team',
+        'Human Resources Department',
+        'Finance And Accounting Group',
+        'Customer Success Organisation',
+        'Product Design Studio Unit'
+    ];
+    const options = () => LABELS.map(label => html `<nile-option value=${label}>${label}</nile-option>`);
+    const NativeRO = window.ResizeObserver;
+    const active = new Map();
+    const liveCount = () => Array.from(active.values()).filter(targets => targets.size > 0).length;
+    before(() => {
+        window.ResizeObserver = class extends NativeRO {
+            observe(target, options) {
+                if (!active.has(this))
+                    active.set(this, new Set());
+                active.get(this).add(target);
+                super.observe(target, options);
+            }
+            unobserve(target) {
+                active.get(this)?.delete(target);
+                super.unobserve(target);
+            }
+            disconnect() {
+                active.get(this)?.clear();
+                super.disconnect();
+            }
+        };
+    });
+    after(() => {
+        window.ResizeObserver = NativeRO;
+    });
+    async function frames(n = 4) {
+        for (let i = 0; i < n; i++)
+            await nextFrame();
+    }
+    async function settle(el) {
+        await el.updateComplete;
+        await frames();
+        await el.updateComplete;
+        await frames(2);
+    }
+    const chipsOf = (el) => Array.from(el.shadowRoot.querySelectorAll('.select__tags nile-tag'));
+    const watchActive = (el) => !!el.measurableWatch;
+    function fitOf(el) {
+        const chips = chipsOf(el);
+        const visible = chips.filter(chip => chip.style.display !== 'none');
+        const button = el.shadowRoot.querySelector('button.select__tags-count');
+        return {
+            chips: chips.length,
+            visible: visible.length,
+            more: button ? button.textContent.trim() : '',
+            widths: visible.map(chip => chip.offsetWidth)
+        };
+    }
+    function box(width, display = 'block') {
+        const div = document.createElement('div');
+        div.style.width = `${width}px`;
+        div.style.display = display;
+        document.body.appendChild(div);
+        boxes.push(div);
+        return div;
+    }
+    let boxes = [];
+    afterEach(() => {
+        boxes.forEach(b => b.remove());
+        boxes = [];
+    });
+    async function makeSelect(parent, { showTooltip = true, autoResize = false, value = LABELS } = {}) {
+        const el = document.createElement('nile-select');
+        el.multiple = true;
+        el.showTooltip = showTooltip;
+        el.autoResize = autoResize;
+        for (const label of LABELS) {
+            const option = document.createElement('nile-option');
+            option.value = label;
+            option.textContent = label;
+            el.appendChild(option);
+        }
+        el.value = value;
+        parent.appendChild(el);
+        await settle(el);
+        return el;
+    }
+    async function reference(width, opts = {}) {
+        const el = await makeSelect(box(width), opts);
+        const fit = fitOf(el);
+        el.parentElement.remove();
+        return fit;
+    }
+    function expectFitted(actual, expected, el) {
+        expect(actual.chips).to.equal(expected.chips);
+        expect(actual.visible, 'visible chips').to.equal(expected.visible);
+        expect(actual.more, '+N button').to.equal(expected.more);
+        actual.widths.forEach((w, i) => {
+            expect(w, `chip ${i} width`).to.be.within(el.chipMinWidth - 1, el.chipMaxWidth + 1);
+            expect(Math.abs(w - expected.widths[i]), `chip ${i} matches reference`).to.be.at.most(2);
+        });
+    }
+    it('R5-ref. the 300px reference really is a fitted row (so a stale row cannot match it)', async () => {
+        const ref = await reference(300);
+        expect(ref.chips).to.equal(5);
+        expect(ref.visible).to.be.within(1, 4);
+        expect(ref.more).to.equal(`+${5 - ref.visible}`);
+    });
+    it('R5a. hidden -> visible without reconnect recovers the fitted row, then the watch ends', async () => {
+        const ref = await reference(300);
+        const parent = box(300, 'none');
+        const el = await makeSelect(parent);
+        expect(watchActive(el), 'watch armed while hidden').to.be.true;
+        parent.style.display = 'block';
+        await settle(el);
+        expectFitted(fitOf(el), ref, el);
+        expect(watchActive(el)).to.be.false;
+    });
+    it('R5b. hidden -> reconnected into a visible 300px parent re-fits, twice, without extra observers', async () => {
+        const ref = await reference(300);
+        const el = await makeSelect(box(300, 'none'));
+        expect(watchActive(el)).to.be.true;
+        el.remove();
+        expect(watchActive(el), 'disconnect stops the watch').to.be.false;
+        box(300).appendChild(el);
+        await settle(el);
+        expectFitted(fitOf(el), ref, el);
+        expect(watchActive(el)).to.be.false;
+        const liveAfterFirst = liveCount();
+        el.remove();
+        box(300).appendChild(el);
+        await settle(el);
+        expectFitted(fitOf(el), ref, el);
+        expect(watchActive(el)).to.be.false;
+        expect(liveCount(), 'no observer growth across reconnects').to.equal(liveAfterFirst);
+    });
+    it('R5c. visible -> disconnect -> reconnect into a narrower parent re-fits to the new width', async () => {
+        const ref = await reference(300);
+        const el = await makeSelect(box(700));
+        expect(fitOf(el).visible).to.be.greaterThan(ref.visible);
+        el.remove();
+        box(300).appendChild(el);
+        await settle(el);
+        expectFitted(fitOf(el), ref, el);
+        expect(watchActive(el)).to.be.false;
+    });
+    it('R5d. value changed while hidden and detached, then reconnected, fits the new value', async () => {
+        const four = LABELS.slice(0, 4);
+        const ref = await reference(300, { value: four });
+        const el = await makeSelect(box(300, 'none'));
+        el.remove();
+        el.value = four;
+        await settle(el);
+        expect(watchActive(el), 'no watch left on a detached select').to.be.false;
+        box(300).appendChild(el);
+        await settle(el);
+        expectFitted(fitOf(el), ref, el);
+        expect(watchActive(el)).to.be.false;
+    });
+    it('R5e. reconnect into another hidden parent keeps one watch, and recovers when shown', async () => {
+        const ref = await reference(300);
+        const el = await makeSelect(box(300, 'none'));
+        const liveHidden = liveCount();
+        el.remove();
+        const second = box(300, 'none');
+        second.appendChild(el);
+        await settle(el);
+        expect(watchActive(el), 're-armed in the new hidden parent').to.be.true;
+        expect(liveCount(), 'the old watch was replaced, not duplicated').to.equal(liveHidden);
+        second.style.display = 'block';
+        await settle(el);
+        expectFitted(fitOf(el), ref, el);
+        expect(watchActive(el)).to.be.false;
+    });
+    it('R5f. showTooltip true -> false before reconnect gives the untouched 2.0.8 row', async () => {
+        const legacy = await makeSelect(box(300), { showTooltip: false });
+        const legacyText = legacy.shadowRoot.querySelector('.select__tags').textContent.replace(/\s+/g, ' ').trim();
+        const el = await makeSelect(box(300, 'none'));
+        el.remove();
+        el.showTooltip = false;
+        box(300).appendChild(el);
+        await settle(el);
+        expect(watchActive(el)).to.be.false;
+        expect(el.shadowRoot.querySelector('.select__tags--fitted')).to.equal(null);
+        chipsOf(el).forEach(chip => expect(chip.style.width, 'no fitted width on the 2.0.8 row').to.equal(''));
+        expect(el.shadowRoot.querySelector('.select__tags').textContent.replace(/\s+/g, ' ').trim()).to.equal(legacyText);
+    });
+    it('R5g. showtooltip=false: hidden -> shown and reconnect never arm a watch or write chip widths', async () => {
+        const parent = box(300, 'none');
+        const el = await makeSelect(parent, { showTooltip: false });
+        expect(watchActive(el)).to.be.false;
+        parent.style.display = 'block';
+        await settle(el);
+        el.remove();
+        box(300).appendChild(el);
+        await settle(el);
+        expect(watchActive(el)).to.be.false;
+        chipsOf(el).forEach(chip => expect(chip.style.width).to.equal(''));
+    });
+    it('R5h. a visible showtooltip select never arms the watch', async () => {
+        const el = await makeSelect(box(300));
+        expect(watchActive(el)).to.be.false;
+    });
+    it('R5i. repeated disconnect/reconnect cycles stay stable', async () => {
+        const ref = await reference(300);
+        const el = await makeSelect(box(300));
+        const baseline = liveCount();
+        for (let i = 0; i < 5; i++) {
+            el.remove();
+            box(300).appendChild(el);
+            await settle(el);
+        }
+        expectFitted(fitOf(el), ref, el);
+        expect(watchActive(el)).to.be.false;
+        expect(liveCount(), 'no observer growth across cycles').to.equal(baseline);
+    });
+    async function updatesOver(el, ms) {
+        let updates = 0;
+        const update = el.update;
+        el.update = function (changed) {
+            updates++;
+            return update.call(this, changed);
+        };
+        await aTimeout(ms);
+        el.update = update;
+        return updates;
+    }
+    it('R5j. autoResize + showtooltip: hidden -> reconnect fits, resizes refit, and it settles', async () => {
+        const ref300 = await reference(300);
+        const ref500 = await reference(500);
+        const el = await makeSelect(box(300, 'none'), { autoResize: true });
+        el.remove();
+        const parent = box(300);
+        parent.appendChild(el);
+        await settle(el);
+        expectFitted(fitOf(el), ref300, el);
+        parent.style.width = '500px';
+        await settle(el);
+        expectFitted(fitOf(el), ref500, el);
+        expect(await updatesOver(el, 300), 'no render loop with showtooltip').to.equal(0);
+    });
+    it('R5k. autoResize: turning showtooltip on over the 2.0.8 row gives the fitted row and settles', async () => {
+        const ref = await reference(300);
+        const el = await makeSelect(box(300), { showTooltip: false, autoResize: true });
+        el.showTooltip = true;
+        await settle(el);
+        await aTimeout(20);
+        await settle(el);
+        expectFitted(fitOf(el), ref, el);
+        expect(await updatesOver(el, 300), 'no render loop once showtooltip is on').to.equal(0);
+    });
+});
+class R7PrefixProbe extends HTMLElement {
+    constructor() {
+        super();
+        R7PrefixProbe.created++;
+    }
+}
+R7PrefixProbe.created = 0;
+if (!customElements.get('r7-prefix-probe'))
+    customElements.define('r7-prefix-probe', R7PrefixProbe);
+describe('NileSelect option prefix copies across re-renders', () => {
+    async function settle(el) {
+        await el.updateComplete;
+        await nextFrame();
+        await nextFrame();
+        await el.updateComplete;
+    }
+    const prefixIn = (el, selector) => el.shadowRoot.querySelector(`${selector} r7-prefix-probe`);
+    const withPrefix = (value) => html `<nile-option value=${value}><r7-prefix-probe slot="prefix" data-v=${value}></r7-prefix-probe>${value}</nile-option>`;
+    it('R7a. single select: the trigger prefix node is reused across re-renders', async () => {
+        const el = await fixture(html `<nile-select .value=${'a'}>${withPrefix('a')}${withPrefix('b')}</nile-select>`);
+        await settle(el);
+        const first = prefixIn(el, '.select__prefix--from-options');
+        expect(first, 'prefix copied into the trigger').to.exist;
+        const created = R7PrefixProbe.created;
+        for (let i = 0; i < 3; i++) {
+            el.requestUpdate();
+            await settle(el);
+        }
+        expect(prefixIn(el, '.select__prefix--from-options')).to.equal(first);
+        expect(R7PrefixProbe.created).to.equal(created);
+    });
+    for (const showTooltip of [false, true]) {
+        it(`R7b. multiple (showtooltip=${showTooltip}): chip prefix nodes are reused across re-renders`, async () => {
+            const el = await fixture(html `<nile-select multiple ?showtooltip=${showTooltip} .value=${['a', 'b']}>
+        ${withPrefix('a')}${withPrefix('b')}
+      </nile-select>`);
+            await settle(el);
+            const before = Array.from(el.shadowRoot.querySelectorAll('.select__tags r7-prefix-probe'));
+            expect(before.length).to.equal(2);
+            const created = R7PrefixProbe.created;
+            el.requestUpdate();
+            await settle(el);
+            const after = Array.from(el.shadowRoot.querySelectorAll('.select__tags r7-prefix-probe'));
+            expect(after.length).to.equal(2);
+            after.forEach((node, i) => expect(node === before[i], `chip ${i} prefix replaced`).to.be.true);
+            expect(R7PrefixProbe.created).to.equal(created);
+        });
+    }
+    it('R7c. changing the selection or the option prefix still updates the copy', async () => {
+        const el = await fixture(html `<nile-select .value=${'a'}>${withPrefix('a')}${withPrefix('b')}</nile-select>`);
+        await settle(el);
+        el.value = 'b';
+        await settle(el);
+        expect(prefixIn(el, '.select__prefix--from-options').dataset.v).to.equal('b');
+        const source = el.querySelector('nile-option[value="b"] r7-prefix-probe');
+        source.setAttribute('data-v', 'b2');
+        el.requestUpdate();
+        await settle(el);
+        expect(prefixIn(el, '.select__prefix--from-options').dataset.v).to.equal('b2');
+    });
+});
+describe('NileSelect 2.0.8 compatibility matrix', () => {
+    const OPTS = ['a', 'b', 'c'];
+    const options = () => OPTS.map(v => html `<nile-option value=${v}>L${v}</nile-option>`);
+    const DATA = OPTS.map(v => ({ label: `L${v}`, value: v }));
+    async function settle(el) {
+        await el.updateComplete;
+        await nextFrame();
+        await nextFrame();
+        await el.updateComplete;
+    }
+    const selectedValues = (el) => Array.from(el.querySelectorAll('nile-option'))
+        .filter(o => o.selected)
+        .map(o => o.value);
+    const chipCount = (el) => el.shadowRoot.querySelectorAll('.select__tags nile-tag').length;
+    function record(el, names) {
+        const seen = [];
+        names.forEach(name => el.addEventListener(name, e => seen.push([name, JSON.parse(JSON.stringify(e.detail ?? null))])));
+        return seen;
+    }
+    it('C1. a value in the template is applied when the options arrive later (multiple and single)', async () => {
+        const multi = await fixture(html `<nile-select multiple .value=${['a', 'b']}></nile-select>`);
+        await settle(multi);
+        OPTS.forEach(v => { const o = document.createElement('nile-option'); o.value = v; o.textContent = v; multi.appendChild(o); });
+        await settle(multi);
+        expect(multi.value).to.deep.equal(['a', 'b']);
+        expect(selectedValues(multi)).to.deep.equal(['a', 'b']);
+        expect(chipCount(multi)).to.equal(2);
+        const single = await fixture(html `<nile-select .value=${'b'}></nile-select>`);
+        await settle(single);
+        OPTS.forEach(v => { const o = document.createElement('nile-option'); o.value = v; o.textContent = v; single.appendChild(o); });
+        await settle(single);
+        expect(single.value).to.equal('b');
+        expect(selectedValues(single)).to.deep.equal(['b']);
+    });
+    it('C2. programmatic value updates reach options, chips and the form value', async () => {
+        const el = await fixture(html `<nile-select multiple name="s">${options()}</nile-select>`);
+        await settle(el);
+        el.value = ['b', 'c'];
+        await settle(el);
+        expect(selectedValues(el)).to.deep.equal(['b', 'c']);
+        expect(chipCount(el)).to.equal(2);
+        el.value = [];
+        await settle(el);
+        expect(selectedValues(el)).to.deep.equal([]);
+        expect(chipCount(el)).to.equal(0);
+    });
+    it('C3. removing a chip updates the value and emits input, change, tag-remove in order', async () => {
+        const el = await fixture(html `<nile-select multiple .value=${['a', 'b']}>${options()}</nile-select>`);
+        await settle(el);
+        const seen = record(el, ['nile-input', 'nile-change', 'nile-tag-remove']);
+        const chip = el.shadowRoot.querySelector('.select__tags nile-tag');
+        expect(chip, 'select rendered no chips').to.exist;
+        chip.dispatchEvent(new CustomEvent('nile-remove', { bubbles: true, composed: true }));
+        await settle(el);
+        expect(el.value).to.deep.equal(['b']);
+        expect(seen.map(([name]) => name)).to.deep.equal(['nile-input', 'nile-change', 'nile-tag-remove']);
+        expect(seen[2][1].removedtagvalue).to.equal('a');
+    });
+    it('C4. the clear button empties the value and emits clear, input, change', async () => {
+        const el = await fixture(html `<nile-select multiple clearable .value=${['a', 'b']}>${options()}</nile-select>`);
+        await settle(el);
+        const seen = record(el, ['nile-clear', 'nile-input', 'nile-change']);
+        const clear = el.shadowRoot.querySelector('[part~="clear-button"]');
+        expect(clear, 'clear button rendered').to.exist;
+        clear.click();
+        await settle(el);
+        expect(el.value).to.deep.equal([]);
+        expect(chipCount(el)).to.equal(0);
+        expect(seen.map(([name]) => name)).to.deep.equal(['nile-clear', 'nile-input', 'nile-change']);
+    });
+    it('C5. form reset restores the value attribute', async () => {
+        const form = await fixture(html `<form>
+      <nile-select name="s" multiple value="a b">${options()}</nile-select>
+    </form>`);
+        const el = form.querySelector('nile-select');
+        await settle(el);
+        el.value = ['c'];
+        await settle(el);
+        form.reset();
+        await settle(el);
+        expect(el.value).to.deep.equal(['a', 'b']);
+        expect(selectedValues(el)).to.deep.equal(['a', 'b']);
+    });
+    it('C6. portal + search: typing filters without touching the value', async () => {
+        const el = await fixture(html `<nile-select multiple portal searchEnabled .value=${['a']}>${options()}</nile-select>`);
+        await settle(el);
+        await el.show();
+        await aTimeout(50);
+        const search = Array.from(document.body.querySelectorAll('nile-input')).find(n => !el.shadowRoot.contains(n));
+        expect(search, 'portal search box rendered').to.exist;
+        await search.updateComplete;
+        const input = search.shadowRoot.querySelector('input');
+        input.value = 'Lb';
+        input.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+        await settle(el);
+        expect(el.value).to.deep.equal(['a']);
+        await el.hide();
+    });
+    it('C7. reconnecting a multiple select without showtooltip keeps value and chips', async () => {
+        const host = await fixture(html `<div style="width: 500px">
+      <nile-select multiple .value=${['a', 'b']}>${options()}</nile-select>
+    </div>`);
+        const el = host.querySelector('nile-select');
+        await settle(el);
+        el.remove();
+        host.appendChild(el);
+        await settle(el);
+        expect(el.value).to.deep.equal(['a', 'b']);
+        expect(chipCount(el)).to.equal(2);
+    });
+    it('C8. enableVirtualScroll: a value set before data arrives is kept and shown', async () => {
+        const el = await fixture(html `<nile-select multiple .enableVirtualScroll=${true} .value=${['b']}></nile-select>`);
+        await settle(el);
+        el.data = DATA;
+        await settle(el);
+        const inner = el.shadowRoot.querySelector('nile-virtual-select');
+        await inner.updateComplete;
+        expect(el.value).to.deep.equal(['b']);
+        expect(inner.value).to.deep.equal(['b']);
+        expect(inner.shadowRoot.querySelectorAll('.select__tags nile-tag').length).to.equal(1);
+    });
+    it('C9. enableVirtualScroll: programmatic value and clear-all reach both selects', async () => {
+        const el = await fixture(html `<nile-select multiple .enableVirtualScroll=${true} .data=${DATA}></nile-select>`);
+        await settle(el);
+        const inner = el.shadowRoot.querySelector('nile-virtual-select');
+        el.value = ['a', 'c'];
+        await settle(el);
+        await inner.updateComplete;
+        expect(inner.value).to.deep.equal(['a', 'c']);
+        inner.unSelectAll();
+        await inner.updateComplete;
+        await settle(el);
+        expect(inner.value).to.deep.equal([]);
+        expect(el.value).to.deep.equal([]);
+    });
+});
+describe('NileSelect showtooltip tooltip on sub-pixel truncation', () => {
+    const A = 'Engineering Operations';
+    const B = 'Human Resources Department And Payroll';
+    async function frames(n = 5) {
+        for (let i = 0; i < n; i++)
+            await nextFrame();
+    }
+    async function mount(width, chipMaxWidth) {
+        const host = await fixture(html `<div style="width: ${width}px">
+      <nile-select multiple showtooltip chipminwidth="40" chipmaxwidth=${chipMaxWidth} .value=${[A, B]}>
+        <nile-option value=${A}>${A}</nile-option>
+        <nile-option value=${B}>${B}</nile-option>
+      </nile-select>
+    </div>`);
+        const el = host.querySelector('nile-select');
+        await el.updateComplete;
+        await frames();
+        await el.updateComplete;
+        await frames(2);
+        return el;
+    }
+    function visiblyCut(chip) {
+        const content = chip.shadowRoot.querySelector('[part="content"]');
+        const text = content.assignedNodes({ flatten: true }).find(n => n.textContent?.trim());
+        const range = document.createRange();
+        range.selectNodeContents(text);
+        const over = range.getBoundingClientRect().right - content.getBoundingClientRect().right;
+        return { cut: over > 1 / 64, over, pxGap: content.scrollWidth - content.clientWidth };
+    }
+    function chipsAndTips(el) {
+        const chips = Array.from(el.shadowRoot.querySelectorAll('.select__tags nile-tag'));
+        const tips = Array.from(el.shadowRoot.querySelectorAll('.select__tags nile-lite-tooltip'));
+        return chips
+            .map((chip, i) => ({ chip, tipOn: !!tips[i] && !tips[i].hasAttribute('disabled') }))
+            .filter(({ chip }) => chip.style.display !== 'none');
+    }
+    it('TT1. every visibly cut chip has its tooltip, every uncut chip has none (sweep across the edge)', async () => {
+        const wide = await mount(900, 400);
+        const natural = chipsAndTips(wide)[0].chip.offsetWidth;
+        let subPixelCuts = 0;
+        for (let max = natural - 4; max <= natural + 1; max += 0.25) {
+            const el = await mount(330, max);
+            for (const { chip, tipOn } of chipsAndTips(el)) {
+                const { cut, pxGap } = visiblyCut(chip);
+                expect(tipOn, `chipMaxWidth ${max}: tooltip ${tipOn} but cut ${cut}`).to.equal(cut);
+                if (cut && pxGap <= 1)
+                    subPixelCuts++;
+            }
+        }
+        expect(subPixelCuts, 'sweep reached the sub-pixel truncation window').to.be.greaterThan(0);
+    });
+    it('TT2. chips at their natural width get no tooltip', async () => {
+        const el = await mount(900, 400);
+        for (const { chip, tipOn } of chipsAndTips(el)) {
+            expect(visiblyCut(chip).cut).to.be.false;
+            expect(tipOn).to.be.false;
+        }
+    });
 });
 //# sourceMappingURL=nile-select.test.js.map