@brandsync/wc 1.19.0 → 1.20.1

package/dist/collection/components/bs-input/bs-input.cmp.test.js

@@ -1,4 +1,5 @@
 import { render, h, describe, it, expect } from "@stencil/vitest";
+import { vi } from "vitest";
 describe('bs-input', () => {
     it('renders a native text input with an empty value by default', async () => {
         const { root } = await render(h("bs-input", null));
@@ -276,27 +277,141 @@ describe('bs-input', () => {
             expect(root).not.toHaveAttribute('open');
         });
     });
+    // Shared helpers for the select / initials-title / country pickers (trigger button + in-shadow listbox).
+    const pickerKey = (root, k, sel = '[role="combobox"]') => root.shadowRoot.querySelector(sel).dispatchEvent(new KeyboardEvent('keydown', { key: k, bubbles: true, composed: true, cancelable: true }));
+    const selectOpts = [
+        { label: 'One', value: '1' },
+        { label: 'Two', value: '2' },
+        { label: 'Three', value: '3' },
+    ];
+    const countries = [
+        { code: 'DK', label: 'Denmark', flagIcon: '\u{1F1E9}\u{1F1F0}' },
+        { code: 'US', label: 'United States', flagIcon: '\u{1F1FA}\u{1F1F8}' },
+        { code: 'GB', label: 'United Kingdom', flagIcon: '\u{1F1EC}\u{1F1E7}' },
+    ];
     describe('type="select"', () => {
-        it('renders a native select with an option per entry', async () => {
-            const { root } = await render(h("bs-input", { type: "select", options: [
-                    { label: 'One', value: '1' },
-                    { label: 'Two', value: '2' },
-                ] }));
-            const select = root.shadowRoot.querySelector('select');
-            const options = select.querySelectorAll('option');
-            expect(options.length).toBe(2);
-            expect(options[1]).toHaveTextContent('Two');
-        });
-        it('emits bsChange with the selected value on change', async () => {
-            const { root, spyOnEvent } = await render(h("bs-input", { type: "select", options: [
-                    { label: 'One', value: '1' },
-                    { label: 'Two', value: '2' },
-                ] }));
-            const bsChangeSpy = spyOnEvent('bsChange');
-            const select = root.shadowRoot.querySelector('select');
-            select.value = '2';
-            select.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-            expect(bsChangeSpy).toHaveReceivedEventDetail('2');
+        it('renders a themed combobox trigger, not a native select, and no listbox while closed', async () => {
+            const { root } = await render(h("bs-input", { type: "select", label: "Role", options: selectOpts }));
+            expect(root.shadowRoot.querySelector('select')).toBeNull();
+            const trigger = root.shadowRoot.querySelector('button[role="combobox"]');
+            expect(trigger).toEqualAttribute('aria-haspopup', 'listbox');
+            expect(trigger).toEqualAttribute('aria-expanded', 'false');
+            expect(trigger).toEqualAttribute('id', 'control');
+            expect(root.shadowRoot.querySelector('[role="listbox"]')).toBeNull();
+        });
+        it('opens a role=listbox with one role=option per entry on click, with aria-controls resolving in the shadow root', async () => {
+            const { root, waitForChanges } = await render(h("bs-input", { type: "select", value: "2", options: selectOpts }));
+            root.shadowRoot.querySelector('[part="field"]').click();
+            await waitForChanges();
+            const trigger = root.shadowRoot.querySelector('[role="combobox"]');
+            const options = root.shadowRoot.querySelectorAll('[role="option"]');
+            expect(trigger).toEqualAttribute('aria-expanded', 'true');
+            expect(root.shadowRoot.getElementById(trigger.getAttribute('aria-controls'))).toEqualAttribute('role', 'listbox');
+            expect(options.length).toBe(3);
+            expect(options[1]).toEqualAttribute('aria-selected', 'true');
+            expect(options[0]).toEqualAttribute('aria-selected', 'false');
+            // active option starts on the selected one and is exposed via aria-activedescendant
+            expect(trigger).toEqualAttribute('aria-activedescendant', 'option-1');
+            expect(options[1].querySelector('.bs-input__option-check')).not.toBeNull();
+        });
+        it('clicking an option sets value, closes, and emits bsInput + bsChange', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-input", { type: "select", options: selectOpts }));
+            const changeSpy = spyOnEvent('bsChange');
+            const inputSpy = spyOnEvent('bsInput');
+            root.shadowRoot.querySelector('[part="field"]').click();
+            await waitForChanges();
+            root.shadowRoot.querySelectorAll('[role="option"]')[1].click();
+            await waitForChanges();
+            expect(changeSpy).toHaveReceivedEventDetail('2');
+            expect(inputSpy).toHaveReceivedEventDetail('2');
+            expect(root.value).toBe('2');
+            expect(root.shadowRoot.querySelector('[role="listbox"]')).toBeNull();
+            expect(root.shadowRoot.querySelector('.bs-input__picker-text')).toHaveTextContent('Two');
+        });
+        it('supports keyboard: ArrowDown opens, arrows move, Enter selects, Escape closes', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-input", { type: "select", options: selectOpts }));
+            const changeSpy = spyOnEvent('bsChange');
+            pickerKey(root, 'ArrowDown');
+            await waitForChanges();
+            expect(root.shadowRoot.querySelector('[role="listbox"]')).not.toBeNull();
+            pickerKey(root, 'ArrowDown');
+            pickerKey(root, 'ArrowDown');
+            await waitForChanges();
+            expect(root.shadowRoot.querySelector('[role="combobox"]')).toEqualAttribute('aria-activedescendant', 'option-2');
+            pickerKey(root, 'Home');
+            await waitForChanges();
+            expect(root.shadowRoot.querySelector('[role="combobox"]')).toEqualAttribute('aria-activedescendant', 'option-0');
+            pickerKey(root, 'End');
+            pickerKey(root, 'Enter');
+            await waitForChanges();
+            expect(changeSpy).toHaveReceivedEventDetail('3');
+            expect(root.shadowRoot.querySelector('[role="listbox"]')).toBeNull();
+            pickerKey(root, 'Enter');
+            await waitForChanges();
+            expect(root.shadowRoot.querySelector('[role="listbox"]')).not.toBeNull();
+            root.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, composed: true }));
+            await waitForChanges();
+            expect(root.shadowRoot.querySelector('[role="listbox"]')).toBeNull();
+            expect(root.value).toBe('3');
+        });
+        it('type-ahead moves the active option while open and commits directly while closed', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-input", { type: "select", options: selectOpts }));
+            const changeSpy = spyOnEvent('bsChange');
+            pickerKey(root, 't');
+            await waitForChanges();
+            expect(changeSpy).toHaveReceivedEventDetail('2');
+            pickerKey(root, 'ArrowDown');
+            await waitForChanges();
+            await new Promise(r => setTimeout(r, 600));
+            pickerKey(root, 'o');
+            await waitForChanges();
+            expect(root.shadowRoot.querySelector('[role="combobox"]')).toEqualAttribute('aria-activedescendant', 'option-0');
+        });
+        it('does not open when disabled', async () => {
+            const { root, waitForChanges } = await render(h("bs-input", { type: "select", disabled: true, options: selectOpts }));
+            root.shadowRoot.querySelector('[part="field"]').click();
+            await waitForChanges();
+            expect(root.shadowRoot.querySelector('[role="listbox"]')).toBeNull();
+            expect(root.shadowRoot.querySelector('button[role="combobox"]')).toHaveAttribute('disabled');
+        });
+        it('participates in a form with the selected value', async () => {
+            const form = document.createElement('form');
+            document.body.appendChild(form);
+            const el = document.createElement('bs-input');
+            el.type = 'select';
+            el.name = 'role';
+            el.options = selectOpts;
+            el.value = '2';
+            form.appendChild(el);
+            await new Promise(r => setTimeout(r, 50));
+            expect(new FormData(form).get('role')).toBe('2');
+            form.remove();
+        });
+        it('styles the popup with BrandSync tokens (raised surface, shadow), in light and dark', async () => {
+            const popup = async (dark) => {
+                if (dark)
+                    document.documentElement.setAttribute('data-theme', 'dark');
+                try {
+                    const { root, waitForChanges } = await render(h("bs-input", { type: "select", options: selectOpts }));
+                    root.shadowRoot.querySelector('[part="field"]').click();
+                    await waitForChanges();
+                    const el = root.shadowRoot.querySelector('[part="menu"]');
+                    const cs = getComputedStyle(el);
+                    const probe = document.createElement('div');
+                    probe.style.background = 'var(--bs-surface-raised)';
+                    document.body.appendChild(probe);
+                    const expected = getComputedStyle(probe).backgroundColor;
+                    probe.remove();
+                    expect(cs.backgroundColor).toBe(expected);
+                    expect(cs.boxShadow).not.toBe('none');
+                    expect(cs.borderRadius).not.toBe('0px');
+                }
+                finally {
+                    document.documentElement.removeAttribute('data-theme');
+                }
+            };
+            await popup(false);
+            await popup(true);
         });
     });
     describe('type="textarea"', () => {
@@ -332,31 +447,56 @@ describe('bs-input', () => {
         });
     });
     describe('type="initials"', () => {
-        it('renders a title select followed by a text input, sharing one label', async () => {
-            const { root } = await render(h("bs-input", { type: "initials", label: "Name", titleOptions: ['Mrs.', 'Mr.', 'Dr.'] }));
-            const select = root.shadowRoot.querySelector('.bs-input__title-select');
+        const titles = ['Mrs.', 'Mr.', 'Dr.'];
+        it('renders a title combobox followed by a text input, sharing one label', async () => {
+            const { root } = await render(h("bs-input", { type: "initials", label: "Name", titleOptions: titles, initialsTitle: "Mr." }));
+            const trigger = root.shadowRoot.querySelector('button[role="combobox"]');
             const input = root.shadowRoot.querySelector('input');
             const label = root.shadowRoot.querySelector('label');
-            expect(select.querySelectorAll('option').length).toBe(3);
+            expect(root.shadowRoot.querySelector('select')).toBeNull();
+            expect(trigger).toHaveTextContent('Mr.');
+            expect(trigger).toEqualAttribute('aria-label', 'Title');
             expect(label).toEqualAttribute('for', 'control');
             expect(input).toEqualAttribute('id', 'control');
         });
-        it('emits bsTitleChange when the title select changes', async () => {
-            const { root, spyOnEvent } = await render(h("bs-input", { type: "initials", titleOptions: ['Mrs.', 'Mr.'] }));
-            const bsTitleChangeSpy = spyOnEvent('bsTitleChange');
-            const select = root.shadowRoot.querySelector('.bs-input__title-select');
-            select.value = 'Mr.';
-            select.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-            expect(bsTitleChangeSpy).toHaveReceivedEventDetail('Mr.');
+        it('opens a listbox, selecting a title emits bsTitleChange and updates initialsTitle', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-input", { type: "initials", titleOptions: titles }));
+            const spy = spyOnEvent('bsTitleChange');
+            root.shadowRoot.querySelector('[part="field"]').click();
+            await waitForChanges();
+            const options = root.shadowRoot.querySelectorAll('[role="option"]');
+            expect(options.length).toBe(3);
+            options[1].click();
+            await waitForChanges();
+            expect(spy).toHaveReceivedEventDetail('Mr.');
+            expect(root.initialsTitle).toBe('Mr.');
+            expect(root.shadowRoot.querySelector('[role="listbox"]')).toBeNull();
+        });
+        it('selects a title with the keyboard', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-input", { type: "initials", titleOptions: titles }));
+            const spy = spyOnEvent('bsTitleChange');
+            pickerKey(root, 'ArrowDown');
+            pickerKey(root, 'ArrowDown');
+            pickerKey(root, 'Enter');
+            await waitForChanges();
+            expect(spy).toHaveReceivedEventDetail('Mr.');
         });
-        it('renders the title select and the text input in two separate [part="field"] boxes, not one shared field', async () => {
+        it('renders the title picker and the text input in two separate bordered [part="field"] boxes with a gap', async () => {
             const { root } = await render(h("bs-input", { type: "initials", titleOptions: ['Mrs.', 'Mr.'] }));
             const fields = root.shadowRoot.querySelectorAll('[part="field"]');
             expect(fields).toHaveLength(2);
             expect(fields[0]).toHaveClass('bs-input__field--initials-title');
-            expect(fields[0].querySelector('select')).not.toBeNull();
+            expect(fields[0].querySelector('button[role="combobox"]')).not.toBeNull();
             expect(fields[1]).toHaveClass('bs-input__field--initials-value');
             expect(fields[1].querySelector('input')).not.toBeNull();
+            const [a, b] = Array.from(fields);
+            for (const f of [a, b]) {
+                const cs = getComputedStyle(f);
+                expect(cs.borderTopWidth).toBe('1px');
+                expect(cs.borderTopStyle).toBe('solid');
+                expect(parseFloat(cs.borderTopLeftRadius)).toBeGreaterThan(0);
+            }
+            expect(b.getBoundingClientRect().left - a.getBoundingClientRect().right).toBeGreaterThan(0);
         });
         it('applies the error class to both the title box and the value box', async () => {
             const { root } = await render(h("bs-input", { type: "initials", titleOptions: ['Mrs.'], error: "Required" }));
@@ -366,18 +506,76 @@ describe('bs-input', () => {
         });
     });
     describe('type="country"', () => {
-        it('renders a country select followed by a text input', async () => {
-            const { root } = await render(h("bs-input", { type: "country", countryOptions: [{ code: 'DK', label: 'Denmark' }, { code: 'US', label: 'United States' }] }));
-            const select = root.shadowRoot.querySelector('.bs-input__country-select');
-            expect(select.querySelectorAll('option').length).toBe(2);
-        });
-        it('emits bsCountryChange when the country select changes', async () => {
-            const { root, spyOnEvent } = await render(h("bs-input", { type: "country", countryOptions: [{ code: 'DK', label: 'Denmark' }, { code: 'US', label: 'United States' }] }));
-            const bsCountryChangeSpy = spyOnEvent('bsCountryChange');
-            const select = root.shadowRoot.querySelector('.bs-input__country-select');
-            select.value = 'US';
-            select.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-            expect(bsCountryChangeSpy).toHaveReceivedEventDetail('US');
+        it('renders two separate bordered fields: a flag picker and the phone input', async () => {
+            const { root } = await render(h("bs-input", { type: "country", country: "US", countryOptions: countries }));
+            const fields = Array.from(root.shadowRoot.querySelectorAll('[part="field"]'));
+            expect(fields).toHaveLength(2);
+            expect(root.shadowRoot.querySelector('select')).toBeNull();
+            expect(fields[0].querySelector('button[role="combobox"]')).not.toBeNull();
+            expect(fields[1].querySelector('input')).not.toBeNull();
+            for (const f of fields)
+                expect(getComputedStyle(f).borderTopWidth).toBe('1px');
+            expect(fields[1].getBoundingClientRect().left - fields[0].getBoundingClientRect().right).toBeGreaterThan(0);
+        });
+        it('shows the selected country flag in the trigger, with an accessible name', async () => {
+            const { root } = await render(h("bs-input", { type: "country", country: "US", countryOptions: countries }));
+            const trigger = root.shadowRoot.querySelector('button[role="combobox"]');
+            expect(trigger.querySelector('[part="flag"]')).toHaveTextContent('\u{1F1FA}\u{1F1F8}');
+            expect(trigger).toEqualAttribute('aria-label', 'Country: United States');
+        });
+        it('falls back to the country code when there is no flag', async () => {
+            const { root } = await render(h("bs-input", { type: "country", country: "DK", countryOptions: [{ code: 'DK', label: 'Denmark' }] }));
+            const trigger = root.shadowRoot.querySelector('button[role="combobox"]');
+            expect(trigger.querySelector('[part="flag"]')).toBeNull();
+            expect(trigger).toHaveTextContent('DK');
+        });
+        it('shows flag, code and name in each option and marks the selected one', async () => {
+            const { root, waitForChanges } = await render(h("bs-input", { type: "country", country: "US", countryOptions: countries }));
+            root.shadowRoot.querySelector('[part="field"]').click();
+            await waitForChanges();
+            const options = root.shadowRoot.querySelectorAll('[role="option"]');
+            expect(options.length).toBe(3);
+            expect(options[0].querySelector('[part="flag"]')).not.toBeNull();
+            expect(options[0]).toHaveTextContent('DK Denmark');
+            expect(options[1]).toEqualAttribute('aria-selected', 'true');
+        });
+        it('emits bsCountryChange and updates country when an option is chosen', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-input", { type: "country", countryOptions: countries }));
+            const spy = spyOnEvent('bsCountryChange');
+            root.shadowRoot.querySelector('[part="field"]').click();
+            await waitForChanges();
+            root.shadowRoot.querySelectorAll('[role="option"]')[2].click();
+            await waitForChanges();
+            expect(spy).toHaveReceivedEventDetail('GB');
+            expect(root.country).toBe('GB');
+        });
+        it('keeps the phone number as the form value', async () => {
+            const form = document.createElement('form');
+            document.body.appendChild(form);
+            const el = document.createElement('bs-input');
+            el.type = 'country';
+            el.name = 'phone';
+            el.countryOptions = countries;
+            el.value = '12345678';
+            form.appendChild(el);
+            await new Promise(r => setTimeout(r, 50));
+            expect(new FormData(form).get('phone')).toBe('12345678');
+            form.remove();
+        });
+        it('supports keyboard selection and Escape', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-input", { type: "country", countryOptions: countries }));
+            const spy = spyOnEvent('bsCountryChange');
+            pickerKey(root, 'ArrowDown');
+            await waitForChanges();
+            root.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, composed: true }));
+            await waitForChanges();
+            expect(root.shadowRoot.querySelector('[role="listbox"]')).toBeNull();
+            expect(spy).not.toHaveReceivedEvent();
+            pickerKey(root, 'ArrowDown');
+            pickerKey(root, 'ArrowDown');
+            pickerKey(root, 'Enter');
+            await waitForChanges();
+            expect(spy).toHaveReceivedEventDetail('US');
         });
     });
     describe('type="pin"', () => {
@@ -428,4 +626,192 @@ describe('bs-input', () => {
             expect(label.fontWeight).toBe('600');
         });
     });
+    describe('type="combobox"', () => {
+        const opts = [
+            { label: 'Denmark', value: 'dk' },
+            { label: 'Sweden', value: 'se' },
+            { label: 'Norway', value: 'no' },
+        ];
+        const key = (root, k) => root.shadowRoot.querySelector('input').dispatchEvent(new KeyboardEvent('keydown', { key: k, bubbles: true, composed: true, cancelable: true }));
+        const typeText = async (root, text, waitForChanges) => {
+            const input = root.shadowRoot.querySelector('input');
+            input.value = text;
+            input.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+            await waitForChanges();
+        };
+        it('exposes combobox ARIA on the input, with aria-controls resolving inside the shadow root', async () => {
+            const { root, waitForChanges } = await render(h("bs-input", { type: "combobox", label: "Country", options: opts }));
+            const input = root.shadowRoot.querySelector('input');
+            expect(input).toEqualAttribute('role', 'combobox');
+            expect(input).toEqualAttribute('aria-expanded', 'false');
+            expect(input).toEqualAttribute('aria-autocomplete', 'list');
+            expect(input).toEqualAttribute('aria-controls', 'listbox');
+            expect(input).not.toHaveAttribute('aria-activedescendant');
+            key(root, 'ArrowDown');
+            await waitForChanges();
+            expect(input).toEqualAttribute('aria-expanded', 'true');
+            const listbox = root.shadowRoot.getElementById('listbox');
+            expect(listbox).not.toBeNull();
+            expect(listbox).toEqualAttribute('role', 'listbox');
+            expect(root.shadowRoot.querySelectorAll('[role="option"]').length).toBe(3);
+            expect(input).toEqualAttribute('aria-activedescendant', 'option-0');
+            expect(root.shadowRoot.getElementById('option-0')).toEqualAttribute('aria-selected', 'true');
+        });
+        it('ArrowDown/ArrowUp move the active option (wrapping), Home/End jump', async () => {
+            const { root, waitForChanges } = await render(h("bs-input", { type: "combobox", label: "Country", options: opts }));
+            const input = root.shadowRoot.querySelector('input');
+            key(root, 'ArrowDown');
+            key(root, 'ArrowDown');
+            await waitForChanges();
+            expect(input).toEqualAttribute('aria-activedescendant', 'option-1');
+            key(root, 'End');
+            await waitForChanges();
+            expect(input).toEqualAttribute('aria-activedescendant', 'option-2');
+            key(root, 'ArrowDown');
+            await waitForChanges();
+            expect(input).toEqualAttribute('aria-activedescendant', 'option-0');
+            key(root, 'ArrowUp');
+            await waitForChanges();
+            expect(input).toEqualAttribute('aria-activedescendant', 'option-2');
+            key(root, 'Home');
+            await waitForChanges();
+            expect(input).toEqualAttribute('aria-activedescendant', 'option-0');
+        });
+        it('opens and filters while typing and emits bsInput with the text', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-input", { type: "combobox", label: "Country", options: opts }));
+            const spy = spyOnEvent('bsInput');
+            await typeText(root, 'sw', waitForChanges);
+            expect(spy).toHaveReceivedEventDetail('sw');
+            expect(root).toHaveAttribute('open');
+            const options = root.shadowRoot.querySelectorAll('[role="option"]');
+            expect(options.length).toBe(1);
+            expect(options[0]).toHaveTextContent('Sweden');
+        });
+        it('does not filter when filterOptions is false', async () => {
+            const { root, waitForChanges } = await render(h("bs-input", { type: "combobox", label: "Country", options: opts, filterOptions: false }));
+            await typeText(root, 'zzz', waitForChanges);
+            expect(root.shadowRoot.querySelectorAll('[role="option"]').length).toBe(3);
+        });
+        it('Enter selects the active option: sets value, closes, emits bsOptionSelect and bsChange', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-input", { type: "combobox", label: "Country", options: opts }));
+            const selectSpy = spyOnEvent('bsOptionSelect');
+            const changeSpy = spyOnEvent('bsChange');
+            key(root, 'ArrowDown');
+            key(root, 'ArrowDown');
+            await waitForChanges();
+            key(root, 'Enter');
+            await waitForChanges();
+            expect(selectSpy).toHaveReceivedEventDetail({ label: 'Sweden', value: 'se' });
+            expect(changeSpy).toHaveReceivedEventDetail('Sweden');
+            expect(root).not.toHaveAttribute('open');
+            expect(root.shadowRoot.querySelector('input').value).toBe('Sweden');
+            expect(root.shadowRoot.getElementById('listbox')).toBeNull();
+        });
+        it('Enter without an active option does not select', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-input", { type: "combobox", label: "Country", options: opts }));
+            const selectSpy = spyOnEvent('bsOptionSelect');
+            await typeText(root, 'den', waitForChanges);
+            key(root, 'Enter');
+            await waitForChanges();
+            expect(selectSpy).not.toHaveReceivedEvent();
+        });
+        it('clicking an option selects it', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-input", { type: "combobox", label: "Country", options: opts, open: true }));
+            const selectSpy = spyOnEvent('bsOptionSelect');
+            root.shadowRoot.getElementById('option-2').click();
+            await waitForChanges();
+            expect(selectSpy).toHaveReceivedEventDetail({ label: 'Norway', value: 'no' });
+        });
+        it('Escape closes the popup', async () => {
+            const { root, waitForChanges } = await render(h("bs-input", { type: "combobox", label: "Country", options: opts, open: true }));
+            key(root, 'Escape');
+            await waitForChanges();
+            expect(root).not.toHaveAttribute('open');
+        });
+        it('shows a "No results" status when nothing matches', async () => {
+            const { root, waitForChanges } = await render(h("bs-input", { type: "combobox", label: "Country", options: opts }));
+            await typeText(root, 'xyz', waitForChanges);
+            expect(root.shadowRoot.querySelectorAll('[role="option"]').length).toBe(0);
+            expect(root.shadowRoot.querySelector('[role="status"]')).toHaveTextContent('No results');
+        });
+        it('shows a loading indicator and message while loading with no results', async () => {
+            const { root, waitForChanges } = await render(h("bs-input", { type: "combobox", label: "Country", options: [], loading: true, open: true }));
+            await waitForChanges();
+            expect(root.shadowRoot.querySelector('bs-spinner')).not.toBeNull();
+            expect(root.shadowRoot.querySelector('[role="status"]')).toHaveTextContent('Loading...');
+        });
+        it('renders a clear button only with a value; clicking it empties the value and emits events', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-input", { type: "combobox", label: "Country", options: opts }));
+            expect(root.shadowRoot.querySelector('[part="clear"]')).toBeNull();
+            await typeText(root, 'den', waitForChanges);
+            const clear = root.shadowRoot.querySelector('[part="clear"]');
+            expect(clear).not.toBeNull();
+            const inputSpy = spyOnEvent('bsInput');
+            clear.click();
+            await waitForChanges();
+            expect(inputSpy).toHaveReceivedEventDetail('');
+            expect(root.shadowRoot.querySelector('input').value).toBe('');
+            expect(root.shadowRoot.querySelector('[part="clear"]')).toBeNull();
+        });
+        it('does not render a clear button when disabled', async () => {
+            const { root } = await render(h("bs-input", { type: "combobox", label: "Country", value: "Denmark", disabled: true }));
+            expect(root.shadowRoot.querySelector('[part="clear"]')).toBeNull();
+        });
+    });
+    describe('aria-label pass-through', () => {
+        it('sets aria-label on the control when there is no visible label', async () => {
+            const { root } = await render(h("bs-input", { ariaLabel: "Search products" }));
+            expect(root.shadowRoot.querySelector('input')).toEqualAttribute('aria-label', 'Search products');
+        });
+        it('does not set aria-label when a visible label exists', async () => {
+            const { root } = await render(h("bs-input", { label: "Name", ariaLabel: "Ignored" }));
+            expect(root.shadowRoot.querySelector('input')).not.toHaveAttribute('aria-label');
+        });
+    });
+    describe('type="date" picker icon', () => {
+        it('renders a single custom calendar button and opens the picker via showPicker()', async () => {
+            const { root } = await render(h("bs-input", { type: "date", label: "Date" }));
+            const input = root.shadowRoot.querySelector('input');
+            const showPicker = vi.fn();
+            input.showPicker = showPicker;
+            const btn = root.shadowRoot.querySelector('.bs-input__calendar-btn');
+            expect(btn).not.toBeNull();
+            btn.click();
+            expect(showPicker).toHaveBeenCalledTimes(1);
+        });
+        it('falls back to focusing the input when showPicker is unavailable', async () => {
+            const { root } = await render(h("bs-input", { type: "date", label: "Date" }));
+            const input = root.shadowRoot.querySelector('input');
+            input.showPicker = undefined;
+            root.shadowRoot.querySelector('.bs-input__calendar-btn').click();
+            expect(root.shadowRoot.activeElement).toBe(input);
+        });
+    });
+    describe('sizing', () => {
+        it('number stepper buttons are at least 24px', async () => {
+            const { root } = await render(h("bs-input", { type: "number", label: "Qty" }));
+            const btn = getComputedStyle(root.shadowRoot.querySelector('.bs-input__stepper-btn'));
+            expect(parseFloat(btn.width)).toBeGreaterThanOrEqual(24);
+            expect(parseFloat(btn.height)).toBeGreaterThanOrEqual(24);
+        });
+        it('description text is 14px and the stack gap is 8px', async () => {
+            const { root } = await render(h("bs-input", { label: "Name", description: "Helper" }));
+            expect(getComputedStyle(root.shadowRoot.querySelector('.bs-input__description')).fontSize).toBe('14px');
+            expect(getComputedStyle(root.shadowRoot.querySelector('.bs-input')).rowGap).toBe('8px');
+        });
+        it('pin uses a 6px cell gap and 44px cells', async () => {
+            const { root } = await render(h("bs-input", { type: "pin", length: 4 }));
+            const field = getComputedStyle(root.shadowRoot.querySelector('.bs-input__field--pin'));
+            expect(field.columnGap).toBe('6px');
+            const cell = getComputedStyle(root.shadowRoot.querySelector('.bs-input__pin-cell'));
+            expect(cell.width).toBe('44px');
+            expect(cell.height).toBe('44px');
+        });
+        it('chip pills use size="md" (24px)', async () => {
+            const { root } = await render(h("bs-input", { type: "chip", chips: ['a'] }));
+            const chip = root.shadowRoot.querySelector('bs-chip-informative');
+            expect(chip.size).toBe('md');
+            expect(chip.getBoundingClientRect().height).toBe(24);
+        });
+    });
 });