@brandsync/wc 1.16.0 → 1.18.0

package/dist/collection/components/bs-global-search/bs-global-search.cmp.test.js

@@ -0,0 +1,491 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import { userEvent } from "vitest/browser";
+import { assertShadowParts, runAxeCheck } from "../../test/helpers/conventions";
+import { RECENT, JUMP_TO, TOP_MATCHES, SEARCH_IN } from "./bs-global-search.stories";
+const q = (el, s) => el.shadowRoot.querySelector(s);
+const qa = (el, s) => Array.from(el.shadowRoot.querySelectorAll(s));
+const items = (el) => Array.from(el.querySelectorAll('bs-search-item'));
+const activeItems = (el) => items(el).filter(i => i.hasAttribute('active'));
+const settle = (ms = 60) => new Promise(r => setTimeout(r, ms));
+const tokenColor = (token) => {
+    const p = document.createElement('div');
+    p.style.color = `var(${token})`;
+    document.body.appendChild(p);
+    const c = getComputedStyle(p).color;
+    p.remove();
+    return c;
+};
+const make = async (props = {}, opts = {}) => {
+    const r = await render(h("div", { style: { width: '700px' } }, h("bs-global-search", null, RECENT.map(i => (h("bs-search-item", { slot: "recent", value: i.value, trailing: i.trailing }, i.label))), JUMP_TO.map(i => (h("bs-search-item", { slot: "jump-to", value: i.value, trailing: i.trailing, disabled: i.value === opts.disabledJump }, i.label))), TOP_MATCHES.map(i => (h("bs-search-item", { slot: "top-matches", value: i.value }, h("strong", null, i.match), i.rest, h("span", { slot: "description" }, i.description)))), SEARCH_IN.map(i => (h("bs-search-item", { slot: "search-in", value: i.value, trailing: i.trailing }, i.label))))));
+    const el = r.root.querySelector('bs-global-search');
+    Object.assign(el, props);
+    await r.waitForChanges();
+    const focus = async () => {
+        q(el, 'bs-input').focus();
+        await r.waitForChanges();
+        await settle();
+    };
+    const press = async (k) => {
+        await userEvent.keyboard(k);
+        await r.waitForChanges();
+    };
+    return { ...r, wrap: r.root, el, focus, press };
+};
+const sectionHeaders = (el) => qa(el, '[part="section-header"]').map(h => h.textContent);
+const footerText = (el) => q(el, '[part="footer"]').innerText.replace(/\s+/g, ' ').trim();
+describe('bs-global-search', () => {
+    it('is a 480px field with no panel while closed', async () => {
+        const { el } = await make();
+        expect(Math.round(el.getBoundingClientRect().width)).toBe(480);
+        const input = q(el, 'bs-input');
+        expect(input.type).toBe('search');
+        expect(Math.round(input.getBoundingClientRect().height)).toBe(44);
+        expect(q(el, '[part="panel"]')).toBeNull();
+        expect(input.placeholder).toBe('Search customers, orders, products…');
+        expect(el.hasAttribute('open')).toBe(false);
+        assertShadowParts(el.shadowRoot, ['field']);
+    });
+    it('caps its width at 100% of the container', async () => {
+        const r = await render(h("div", { style: { width: '300px' } }, h("bs-global-search", null)));
+        const gs = r.root.querySelector('bs-global-search');
+        expect(Math.round(gs.getBoundingClientRect().width)).toBe(300);
+    });
+    it('opens on focus, reflects open and emits bsOpenChange', async () => {
+        const { el, focus } = await make();
+        const got = [];
+        el.addEventListener('bsOpenChange', (e) => got.push(e.detail));
+        await focus();
+        expect(el.open).toBe(true);
+        expect(el.hasAttribute('open')).toBe(true);
+        expect(q(el, '[part="panel"]')).not.toBeNull();
+        expect(got).toEqual([true]);
+    });
+    it('has the Figma panel geometry', async () => {
+        const { el } = await make({ open: true });
+        const panel = q(el, '[part="panel"]');
+        const field = q(el, '[part="field"]');
+        const cs = getComputedStyle(panel);
+        expect(cs.position).toBe('absolute');
+        expect(cs.borderRadius).toBe('8px');
+        expect(cs.paddingTop).toBe('8px');
+        expect(cs.rowGap).toBe('8px');
+        expect(cs.flexDirection).toBe('column');
+        expect(cs.overflow).toBe('clip');
+        expect(cs.zIndex).toBe('100');
+        expect(cs.boxShadow).not.toBe('none');
+        expect(Math.round(panel.getBoundingClientRect().width)).toBe(480);
+        expect(Math.round(panel.getBoundingClientRect().top - field.getBoundingClientRect().bottom)).toBe(8);
+        expect(cs.backgroundColor).toBe(tokenColor('--bs-surface-base'));
+    });
+    it('closes on Escape without clearing the value, on outside pointerdown, and after selecting', async () => {
+        const { el, focus, press, waitForChanges } = await make({ value: 'abc' });
+        const got = [];
+        el.addEventListener('bsOpenChange', (e) => got.push(e.detail));
+        await focus();
+        expect(el.open).toBe(true);
+        await press('{Escape}');
+        expect(el.open).toBe(false);
+        expect(el.value).toBe('abc');
+        expect(q(el, '[part="panel"]')).toBeNull();
+        // click on the field re-opens
+        await userEvent.click(q(el, 'bs-input'));
+        await waitForChanges();
+        expect(el.open).toBe(true);
+        // outside click
+        document.body.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, composed: true }));
+        await waitForChanges();
+        expect(el.open).toBe(false);
+        // pointerdown inside does not close
+        el.open = true;
+        await waitForChanges();
+        q(el, '[part="panel"]').dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, composed: true }));
+        await waitForChanges();
+        expect(el.open).toBe(true);
+        // selecting closes
+        items(el)[0].click();
+        await waitForChanges();
+        expect(el.open).toBe(false);
+        expect(got).toEqual([true, false, true, false, false]);
+    });
+    it('does not open while disabled', async () => {
+        const { el, waitForChanges } = await make({ disabled: true });
+        q(el, '[part="field"]').click();
+        await waitForChanges();
+        expect(el.open).toBe(false);
+    });
+    it('renders sections with headers only for filled slots (default view)', async () => {
+        const { el } = await make({ open: true });
+        expect(sectionHeaders(el)).toEqual(['Recent searches', 'Jump to']);
+        const h = q(el, '[part="section-header"]');
+        const cs = getComputedStyle(h);
+        expect(cs.paddingTop).toBe('12px');
+        expect(cs.paddingBottom).toBe('8px');
+        expect(cs.paddingLeft).toBe('12px');
+        expect(cs.borderBottomWidth).toBe('1px');
+        expect(cs.borderBottomColor).toBe(tokenColor('--bs-border-neutral-container'));
+        expect(cs.fontSize).toBe('14px');
+        expect(cs.lineHeight).toBe('20px');
+        expect(cs.fontWeight).toBe('500');
+        expect(cs.color).toBe(tokenColor('--bs-text-muted'));
+        const sections = qa(el, '[part="section"]');
+        expect(sections.length).toBe(2);
+        expect(Math.round(sections[1].getBoundingClientRect().top - sections[0].getBoundingClientRect().bottom)).toBe(8);
+    });
+    it('omits sections whose slot is empty and uses custom header labels', async () => {
+        const r = await render(h("bs-global-search", { open: true, jumpToLabel: "Go to" }, h("bs-search-item", { slot: "jump-to", value: "a" }, "A")));
+        const el = r.root;
+        expect(sectionHeaders(el)).toEqual(['Go to']);
+        const added = document.createElement('bs-search-item');
+        added.slot = 'recent';
+        added.textContent = 'x';
+        el.appendChild(added);
+        await settle();
+        await r.waitForChanges();
+        expect(sectionHeaders(el)).toEqual(['Recent searches', 'Go to']);
+        added.remove();
+        await settle();
+        await r.waitForChanges();
+        expect(sectionHeaders(el)).toEqual(['Go to']);
+    });
+    it('shows top matches and search in for the results view', async () => {
+        const { el } = await make({ open: true, status: 'results', totalResults: 196 });
+        expect(el.getAttribute('status')).toBe('results');
+        expect(sectionHeaders(el)).toEqual(['Top matches', 'Search in']);
+    });
+    it('shows the default footer with hints and a Clear recent button', async () => {
+        const { el } = await make({ open: true });
+        const footer = q(el, '[part="footer"]');
+        const cs = getComputedStyle(footer);
+        expect(cs.borderTopWidth).toBe('1px');
+        expect(cs.borderTopColor).toBe(tokenColor('--bs-border-default'));
+        expect(cs.paddingTop).toBe('8px');
+        expect(cs.paddingBottom).toBe('4px');
+        expect(cs.columnGap).toBe('16px');
+        // the keycaps are bs-key shadow content, so innerText holds only the hint labels
+        expect(footerText(el)).toBe('Navigate Search Close Clear recent');
+        expect(qa(el, '[part="hint"] bs-key').map(k => k.label)).toEqual([undefined, undefined, undefined, 'Esc']);
+        expect(qa(el, '[part="hint"]').length).toBe(3);
+        expect(qa(el, '[part="hint"] bs-key').length).toBe(4);
+        expect(getComputedStyle(q(el, '[part="hint"]')).columnGap).toBe('4px');
+        expect(getComputedStyle(q(el, '[part="hint"]')).color).toBe(tokenColor('--bs-text-secondary'));
+        // the Clear recent button is pushed right and has a 44px target
+        const action = q(el, '[part="clear-recent"]');
+        expect(Math.round(action.getBoundingClientRect().height)).toBe(44);
+        expect(Math.round(footer.getBoundingClientRect().right - 8 - action.getBoundingClientRect().right)).toBeLessThanOrEqual(1);
+        expect(Math.round(action.querySelector('bs-button').getBoundingClientRect().height)).toBe(32);
+    });
+    it('hides Clear recent when the recent slot is empty, and the footer via showFooter', async () => {
+        const r = await render(h("bs-global-search", { open: true }, h("bs-search-item", { slot: "jump-to", value: "a" }, "A")));
+        const el = r.root;
+        expect(q(el, '[part="clear-recent"]')).toBeNull();
+        expect(q(el, '[part="footer"]')).not.toBeNull();
+        el.showFooter = false;
+        await r.waitForChanges();
+        expect(q(el, '[part="footer"]')).toBeNull();
+    });
+    it('emits bsClearRecent from the button and from its 44px wrapper', async () => {
+        const { el, waitForChanges } = await make({ open: true });
+        let n = 0;
+        el.addEventListener('bsClearRecent', () => n++);
+        q(el, '[part="clear-recent"] bs-button').click();
+        q(el, '[part="clear-recent"]').click();
+        await waitForChanges();
+        expect(n).toBe(2);
+        expect(el.open).toBe(true);
+    });
+    it('shows the results footer with See all (count) on the left and a Full results hint on the right', async () => {
+        const { el, waitForChanges } = await make({ open: true, status: 'results', totalResults: 196 });
+        expect(footerText(el)).toBe('See all 196 results Full results');
+        expect(qa(el, '[part="hint"]').length).toBe(1);
+        const see = q(el, '[part="see-all"]');
+        const hint = q(el, '[part="hint"]');
+        expect(see.getBoundingClientRect().left).toBeLessThan(hint.getBoundingClientRect().left);
+        let n = 0;
+        el.addEventListener('bsSeeAll', () => n++);
+        see.querySelector('bs-button').click();
+        await waitForChanges();
+        expect(n).toBe(1);
+        expect(el.open).toBe(false);
+        el.open = true;
+        el.totalResults = undefined;
+        await waitForChanges();
+        expect(footerText(el)).toContain('See all results');
+    });
+    it('localises hints and labels through props', async () => {
+        const { el, waitForChanges } = await make({ open: true, navigateLabel: 'Naviger', clearRecentLabel: 'Ryd' });
+        expect(footerText(el)).toContain('Naviger');
+        expect(footerText(el)).toContain('Ryd');
+        Object.assign(el, { status: 'results', seeAllLabel: 'Vis alle', fullResultsLabel: 'Fuld' });
+        await waitForChanges();
+        expect(footerText(el)).toBe('Vis alle Fuld');
+    });
+    it('shows the built-in empty state with a Clear search action that clears the value', async () => {
+        const { el, waitForChanges } = await make({ open: true, status: 'empty', value: 'zzz', emptyHeading: 'No events match these filters', emptyDescription: 'Try a wider date range or clear filters.' });
+        const es = q(el, '[part="empty"]');
+        expect(es.tagName).toBe('BS-EMPTY-STATE');
+        expect(es.getAttribute('intent')).toBe('default');
+        expect(es.shadowRoot.querySelector('[part="heading"]').textContent).toBe('No events match these filters');
+        expect(es.shadowRoot.querySelector('[part="description"]').textContent).toBe('Try a wider date range or clear filters.');
+        expect(q(el, '[part="footer"]')).toBeNull();
+        expect(qa(el, '[part="section"]').length).toBe(0);
+        let n = 0;
+        el.addEventListener('bsClearSearch', () => n++);
+        es.querySelector('bs-button').click();
+        await waitForChanges();
+        expect(n).toBe(1);
+        expect(el.value).toBe('');
+        expect(es.querySelector('bs-button').textContent).toBe('Clear search');
+    });
+    it('uses the default empty copy', async () => {
+        const { el } = await make({ open: true, status: 'empty' });
+        const es = q(el, '[part="empty"]');
+        expect(es.shadowRoot.querySelector('[part="heading"]').textContent).toBe('No results');
+        expect(es.shadowRoot.querySelector('[part="description"]').textContent).toBe('Try a different search.');
+    });
+    it('shows the built-in error state with a Try again action that keeps the query', async () => {
+        const { el, waitForChanges } = await make({ open: true, status: 'error', value: 'nordic' });
+        const es = q(el, '[part="empty"]');
+        expect(es.getAttribute('intent')).toBe('error');
+        expect(es.shadowRoot.querySelector('[part="heading"]').textContent).toBe('Search isn’t available right now');
+        expect(es.shadowRoot.querySelector('[part="description"]').textContent).toContain('Your query is kept');
+        expect(q(el, '[part="footer"]')).toBeNull();
+        let n = 0;
+        el.addEventListener('bsRetry', () => n++);
+        es.querySelector('bs-button').click();
+        await waitForChanges();
+        expect(n).toBe(1);
+        expect(el.value).toBe('nordic');
+        expect(el.open).toBe(true);
+    });
+    it('lets the empty and error slots replace the built-in block', async () => {
+        const r = await render(h("bs-global-search", { open: true, status: "empty" }, h("p", { slot: "empty", id: "custom" }, "Nothing here")));
+        const el = r.root;
+        const slot = q(el, 'slot[name="empty"]');
+        expect(slot.assignedElements()[0].id).toBe('custom');
+    });
+    it('puts the combobox ARIA on the field and the listbox on the items container', async () => {
+        const { el, focus, press } = await make();
+        const field = q(el, '[part="field"]');
+        expect(field).toEqualAttribute('role', 'combobox');
+        expect(field).toEqualAttribute('aria-expanded', 'false');
+        expect(field).toEqualAttribute('aria-haspopup', 'listbox');
+        expect(field.hasAttribute('aria-controls')).toBe(false);
+        expect(field).toEqualAttribute('aria-label', 'Search customers, orders, products…');
+        await focus();
+        expect(field).toEqualAttribute('aria-expanded', 'true');
+        const list = q(el, '[role="listbox"]');
+        expect(list).toEqualAttribute('aria-label', 'Search suggestions');
+        expect(field).toEqualAttribute('aria-controls', list.id);
+        expect(field.hasAttribute('aria-activedescendant')).toBe(false);
+        await press('{ArrowDown}');
+        expect(field).toEqualAttribute('aria-activedescendant', items(el)[0].id);
+        expect(items(el)[0].id).not.toBe('');
+    });
+    it('uses the label prop as the accessible name', async () => {
+        const { el } = await make({ label: 'Global search' });
+        expect(q(el, '[part="field"]')).toEqualAttribute('aria-label', 'Global search');
+    });
+    it('gives items the option role and unique ids', async () => {
+        const { el } = await make({ open: true });
+        const all = items(el);
+        for (const i of all)
+            expect(i.shadowRoot.querySelector('[part="container"]')).toEqualAttribute('role', 'option');
+        expect(new Set(all.map(i => i.id)).size).toBe(all.length);
+    });
+    it('sets up items added after load', async () => {
+        const { el, waitForChanges } = await make({ open: true });
+        const added = document.createElement('bs-search-item');
+        added.slot = 'recent';
+        added.textContent = 'late';
+        el.appendChild(added);
+        await settle();
+        await waitForChanges();
+        expect(added.id).not.toBe('');
+        expect(added.selectionRole).toBe('option');
+    });
+    it('moves the highlight with ArrowDown/ArrowUp across sections, wrapping at both ends', async () => {
+        const { el, focus, press } = await make();
+        await focus();
+        const first = items(el).filter(i => ['recent', 'jump-to'].includes(i.slot));
+        expect(first.length).toBe(7);
+        await press('{ArrowDown}');
+        expect(activeItems(el)).toEqual([first[0]]);
+        await press('{ArrowDown}');
+        await press('{ArrowDown}');
+        await press('{ArrowDown}');
+        // 4th press crosses from the last recent item into the first jump-to item
+        expect(activeItems(el)).toEqual([first[3]]);
+        expect(first[3].slot).toBe('jump-to');
+        for (let i = 0; i < 3; i++)
+            await press('{ArrowDown}');
+        expect(activeItems(el)).toEqual([first[6]]);
+        await press('{ArrowDown}');
+        expect(activeItems(el)).toEqual([first[0]]);
+        await press('{ArrowUp}');
+        expect(activeItems(el)).toEqual([first[6]]);
+        expect(q(el, '[part="field"]')).toEqualAttribute('aria-activedescendant', first[6].id);
+    });
+    it('starts from the last item on ArrowUp and skips disabled items', async () => {
+        const { el, focus, press } = await make({}, { disabledJump: 'orders' });
+        await focus();
+        await press('{ArrowUp}');
+        const all = items(el).filter(i => ['recent', 'jump-to'].includes(i.slot));
+        expect(activeItems(el)).toEqual([all[6]]);
+        await press('{ArrowUp}');
+        // skips the disabled Orders row
+        expect(activeItems(el)).toEqual([all[4]]);
+        expect(all[5].disabled).toBe(true);
+    });
+    it('opens on ArrowDown when closed, without moving the highlight', async () => {
+        const { el, focus, press } = await make();
+        await focus();
+        await press('{Escape}');
+        expect(el.open).toBe(false);
+        await press('{ArrowDown}');
+        expect(el.open).toBe(true);
+        expect(activeItems(el).length).toBe(0);
+    });
+    it('navigates only the visible sections of the current status', async () => {
+        const { el, focus, press } = await make({ status: 'results' });
+        await focus();
+        await press('{ArrowDown}');
+        const top = items(el).filter(i => i.slot === 'top-matches');
+        expect(activeItems(el)).toEqual([top[0]]);
+        await press('{ArrowUp}');
+        await press('{ArrowUp}');
+        expect(activeItems(el)[0].slot).toBe('search-in');
+    });
+    it('keeps Home and End native in the field', async () => {
+        const { el, focus, press } = await make({ value: 'abc' });
+        await focus();
+        await press('{Home}');
+        await press('{End}');
+        expect(activeItems(el).length).toBe(0);
+        expect(el.open).toBe(true);
+    });
+    it('sets the active item on hover', async () => {
+        const { el, waitForChanges } = await make({ open: true });
+        const target = items(el)[2];
+        target.dispatchEvent(new MouseEvent('mouseover', { bubbles: true, composed: true }));
+        await waitForChanges();
+        expect(activeItems(el)).toEqual([target]);
+        expect(q(el, '[part="field"]')).toEqualAttribute('aria-activedescendant', target.id);
+    });
+    it('does not highlight disabled items on hover', async () => {
+        const { el, waitForChanges } = await make({ open: true }, { disabledJump: 'customers' });
+        const dis = items(el).find(i => i.disabled);
+        dis.dispatchEvent(new MouseEvent('mouseover', { bubbles: true, composed: true }));
+        await waitForChanges();
+        expect(activeItems(el).length).toBe(0);
+    });
+    it('Enter selects the active item with value and section, and closes', async () => {
+        const { el, focus, press } = await make();
+        const got = [];
+        el.addEventListener('bsSelect', (e) => got.push(e.detail));
+        let searches = 0;
+        el.addEventListener('bsSearch', () => searches++);
+        await focus();
+        for (let i = 0; i < 5; i++)
+            await press('{ArrowDown}');
+        await press('{Enter}');
+        expect(got).toEqual([{ value: 'products', section: 'jump-to' }]);
+        expect(searches).toBe(0);
+        expect(el.open).toBe(false);
+    });
+    it('Enter without an active item emits bsSearch with the query and closes', async () => {
+        const { el, focus, press } = await make({ value: 'nordic' });
+        const got = [];
+        el.addEventListener('bsSearch', (e) => got.push(e.detail));
+        let selects = 0;
+        el.addEventListener('bsSelect', () => selects++);
+        await focus();
+        await press('{Enter}');
+        expect(got).toEqual(['nordic']);
+        expect(selects).toBe(0);
+        expect(el.open).toBe(false);
+    });
+    it('clicking an item emits bsSelect once (not the inner bsItemSelect)', async () => {
+        const { el, wrap, waitForChanges } = await make({ open: true, status: 'results' });
+        const sel = [];
+        let raw = 0;
+        wrap.addEventListener('bsSelect', (e) => sel.push(e.detail));
+        wrap.addEventListener('bsItemSelect', () => raw++);
+        items(el).find(i => i.slot === 'search-in').click();
+        await waitForChanges();
+        expect(sel).toEqual([{ value: 'in-customers', section: 'search-in' }]);
+        expect(raw).toBe(0);
+    });
+    it('emits one bsInput per keystroke, updates value, opens, and clears the highlight', async () => {
+        const { el, focus, press } = await make();
+        const got = [];
+        el.addEventListener('bsInput', (e) => got.push(e.detail));
+        await focus();
+        await press('{ArrowDown}');
+        expect(activeItems(el).length).toBe(1);
+        await userEvent.keyboard('no');
+        await settle();
+        expect(got).toEqual(['n', 'no']);
+        expect(el.value).toBe('no');
+        expect(activeItems(el).length).toBe(0);
+        await press('{Escape}');
+        await userEvent.keyboard('r');
+        await settle();
+        expect(el.open).toBe(true);
+    });
+    it('passes the value to the field', async () => {
+        const { el } = await make({ value: 'nordic' });
+        expect(q(el, 'bs-input').value).toBe('nordic');
+    });
+    it('announces the result count, empty and error headings politely', async () => {
+        const { el, waitForChanges } = await make({ open: true, status: 'results', totalResults: 196 });
+        const live = q(el, '[aria-live="polite"]');
+        expect(live.textContent).toBe('196 results');
+        el.totalResults = undefined;
+        await waitForChanges();
+        expect(live.textContent).toBe('');
+        el.status = 'empty';
+        await waitForChanges();
+        expect(live.textContent).toBe('No results');
+        el.status = 'error';
+        await waitForChanges();
+        expect(live.textContent).toBe('Search isn’t available right now');
+        expect(Math.round(live.getBoundingClientRect().width)).toBeLessThanOrEqual(1);
+    });
+    it('uses the light and dark panel colour from tokens', async () => {
+        const { el } = await make({ open: true });
+        const light = getComputedStyle(q(el, '[part="section-header"]')).color;
+        const lightBg = getComputedStyle(q(el, '[part="panel"]')).backgroundColor;
+        document.documentElement.setAttribute('data-theme', 'dark');
+        try {
+            await settle(150);
+            expect(getComputedStyle(q(el, '[part="section-header"]')).color).not.toBe(light);
+            expect(getComputedStyle(q(el, '[part="panel"]')).backgroundColor).not.toBe(lightBg);
+        }
+        finally {
+            document.documentElement.removeAttribute('data-theme');
+        }
+    });
+    for (const status of ['default', 'results', 'empty', 'error']) {
+        it(`passes axe with the panel open (${status})`, async () => {
+            const { el } = await make({ open: true, status, totalResults: 196 });
+            await runAxeCheck(el);
+        });
+    }
+    it('uses the Figma level-3 shadow (0 4px 8px) and strengthens it from 10% to 30% black in dark mode', async () => {
+        const shadowOf = async (dark) => {
+            if (dark)
+                document.documentElement.setAttribute('data-theme', 'dark');
+            try {
+                const { root, waitForChanges } = await render(h("bs-global-search", { open: true }));
+                await waitForChanges();
+                const panel = root.shadowRoot.querySelector('[part="panel"]');
+                return getComputedStyle(panel).boxShadow;
+            }
+            finally {
+                document.documentElement.removeAttribute('data-theme');
+            }
+        };
+        expect(await shadowOf(false)).toBe('rgba(0, 0, 0, 0.1) 0px 4px 8px 0px');
+        expect(await shadowOf(true)).toBe('rgba(0, 0, 0, 0.3) 0px 4px 8px 0px');
+    });
+});

package/dist/collection/components/bs-global-search/bs-global-search.css

@@ -0,0 +1,115 @@
+:host {
+  display: block;
+  position: relative;
+  box-sizing: border-box;
+  width: var(--bs-global-search-width);
+  max-width: 100%;
+  --bs-global-search-width: 480px;
+  --bs-global-search-panel-radius: var(--bs-border-radius-100);
+  --bs-global-search-panel-padding: var(--bs-spacing-100);
+  --bs-global-search-gap: var(--bs-spacing-100);
+  --bs-global-search-panel-bg: var(--bs-surface-base);
+  /* Figma "elevation/level 3": 0 4px 8px in --bs-elevation-high, which is 10% black in light mode and
+     30% black in dark mode, so the shadow strengthens on dark surfaces automatically. */
+  --bs-global-search-shadow: 0 var(--bs-shadow-position-50) var(--bs-shadow-blur-100) 0 var(--bs-elevation-high);
+  /* No dedicated search layer; a dropdown sits at the dropdown layer. */
+  --bs-global-search-z-index: var(--bs-z-index-dropdown);
+  --bs-global-search-divider-color: var(--bs-border-default);
+  --bs-global-search-header-border-color: var(--bs-border-neutral-container);
+  --bs-global-search-header-color: var(--bs-text-muted);
+  --bs-global-search-hint-color: var(--bs-text-secondary);
+}
+
+.bs-global-search {
+  position: relative;
+}
+
+.bs-global-search__field bs-input {
+  width: 100%;
+}
+
+.bs-global-search__panel {
+  position: absolute;
+  top: calc(100% + var(--bs-global-search-gap));
+  left: 0;
+  right: 0;
+  z-index: var(--bs-global-search-z-index);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-global-search-gap);
+  padding: var(--bs-global-search-panel-padding);
+  overflow: clip;
+  border-radius: var(--bs-global-search-panel-radius);
+  background: var(--bs-global-search-panel-bg);
+  box-shadow: var(--bs-global-search-shadow);
+}
+
+.bs-global-search__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-global-search-gap);
+}
+
+.bs-global-search__section {
+  display: flex;
+  flex-direction: column;
+}
+
+.bs-global-search__section-header {
+  padding: var(--bs-spacing-150) var(--bs-spacing-150) var(--bs-spacing-100);
+  border-bottom: 1px solid var(--bs-global-search-header-border-color);
+  color: var(--bs-global-search-header-color);
+  font-size: var(--bs-font-size-sm);
+  font-weight: var(--bs-font-weight-medium);
+  line-height: 20px;
+}
+
+.bs-global-search__footer {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-spacing-200);
+  padding: var(--bs-spacing-100) var(--bs-spacing-100) var(--bs-spacing-50);
+  border-top: 1px solid var(--bs-global-search-divider-color);
+}
+
+.bs-global-search__hint {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bs-spacing-50);
+  color: var(--bs-global-search-hint-color);
+  font-size: var(--bs-font-size-sm);
+  line-height: 20px;
+  white-space: nowrap;
+}
+
+.bs-global-search__spacer {
+  flex: 1 1 0;
+}
+
+/* 44px hit target around a 32px button. */
+.bs-global-search__action {
+  display: flex;
+  align-items: center;
+  min-height: 44px;
+  cursor: pointer;
+}
+
+.bs-global-search__text-button {
+  --bs-button-height-sm: 32px;
+  --bs-button-padding-x-sm: var(--bs-spacing-150);
+  --bs-button-radius: var(--bs-border-radius-100);
+  --bs-button-subtle-color: var(--bs-text-default);
+}
+
+.bs-global-search__live {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}