@brandsync/wc 1.15.0 → 1.17.0

package/dist/collection/components/bs-empty-state/bs-empty-state.stories.js

@@ -0,0 +1,52 @@
+import { html } from "lit";
+import { componentDescription } from "../../stories-utils";
+const SEARCH_ICON = html `<svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" /></svg>`;
+const WARNING_ICON = html `<svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9" /><path d="M12 7.5v5M12 16.2v.1" /></svg>`;
+const meta = {
+    title: 'Components/bs-empty-state',
+    parameters: { docs: { description: { component: componentDescription('bs-empty-state') } } },
+    argTypes: {
+        heading: { control: 'text' },
+        description: { control: 'text' },
+        intent: { control: 'select', options: ['default', 'success', 'warning', 'error', 'brand', 'information'] },
+        headingLevel: { control: 'select', options: [2, 3, 4, 5, 6] },
+    },
+    args: {
+        heading: 'No events match these filters',
+        description: 'Try a wider date range or clear filters.',
+        intent: 'default',
+        headingLevel: 3,
+    },
+    render: args => html `
+    <div style="width: 480px">
+      <bs-empty-state heading=${args.heading} description=${args.description} intent=${args.intent} .headingLevel=${args.headingLevel}>
+        ${SEARCH_ICON}
+        <bs-button slot="action" variant="outlined">Clear filters</bs-button>
+      </bs-empty-state>
+    </div>
+  `,
+};
+export default meta;
+export const NoResults = {};
+export const Error = {
+    args: {
+        heading: 'Search isn’t available right now',
+        description: 'We couldn’t reach the server. Your query is kept — try again in a moment.',
+        intent: 'error',
+    },
+    render: args => html `
+    <div style="width: 480px">
+      <bs-empty-state heading=${args.heading} description=${args.description} intent=${args.intent}>
+        ${WARNING_ICON}
+        <bs-button slot="action" variant="outlined">Try again</bs-button>
+      </bs-empty-state>
+    </div>
+  `,
+};
+export const WithoutAction = {
+    render: args => html `
+    <div style="width: 480px">
+      <bs-empty-state heading=${args.heading} description=${args.description}>${SEARCH_ICON}</bs-empty-state>
+    </div>
+  `,
+};

package/dist/collection/components/bs-error-page/bs-error-page.js

@@ -65,7 +65,7 @@ export class BsErrorPage {
         const primary = this.primaryLabel ?? d.primary;
         const secondary = this.secondaryLabel ?? d.secondary;
         const level = Math.min(6, Math.max(1, Math.trunc(Number(this.headingLevel)) || 1));
-        return (h("bs-card", { key: '68774f7ab0252b92905900f06f564d1c2a8ce163', part: "container", class: "bs-error-page", surface: "base" }, h("div", { key: 'f263ce4991e2aa4553e430e60e646df5fc257120', class: "bs-error-page__body" }, h("div", { key: '3aa6b36e1aa05ea63e52e8c79684b166853e5950', class: "bs-error-page__art-group" }, h("bs-icon-tile", { key: 'b0b7f3fa925acef6b95e23136df7f9bac3e43ff4', part: "art", class: `bs-error-page__art ${d.info ? 'bs-error-page__art--info' : ''}`, intent: d.intent, size: "lg" }, h("slot", { key: 'e33db2aa8c275de0e32effc759e177ef1ee46c6d', name: "icon" }, d.glyph())), code && (h("span", { key: '9f576963f7399e4ca6e86cfd0331f0c7c7119886', part: "code", class: "bs-error-page__code" }, code))), h(`h${level}`, { part: 'heading', class: { 'bs-error-page__heading': true } }, heading), description && (h("p", { key: 'ea4861b666f95c7416a4d54152f8ffd1b900eb61', part: "description", class: "bs-error-page__description" }, description)), (primary || secondary) && (h("div", { key: 'e0ec38c28b957390486fce52497f91661abc7ef1', part: "actions", class: "bs-error-page__actions" }, primary && (h("bs-button", { key: 'a2b190366240c9fbe3e7a78a16b9881a3ad4468a', part: "primary", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)), secondary && (h("bs-button", { key: 'bef26b3dcc61c4e968c054d35ed67430884c9f99', part: "secondary", variant: "outlined", onClick: () => this.bsSecondary.emit() }, secondary)))), this.reference && (h("p", { key: 'b8de6e83c2c68ca8880afc781e8ffceb03f23164', part: "reference", class: "bs-error-page__reference" }, this.reference)))));
+        return (h("bs-card", { key: '376ab30f0eeaf89fb522373b375d0c68eebe8e99', part: "container", class: "bs-error-page", surface: "base" }, h("div", { key: '380013c4a4ac5208823856bb565f841e4b9aace3', class: "bs-error-page__body" }, h("div", { key: 'ce3ed8170977a0e2c4b1247140734fa3ba4c4896', class: "bs-error-page__art-group" }, h("bs-icon-tile", { key: '625d8cef3b2969f15e6ba5e94913359f54f277dd', part: "art", class: `bs-error-page__art ${d.info ? 'bs-error-page__art--info' : ''}`, intent: d.intent, size: "lg" }, h("slot", { key: 'e4415c41729cc3e9b52f1c61dfb8906a1d8dcc6a', name: "icon" }, d.glyph())), code && (h("span", { key: 'a6d8d24456746f9da3387c2acae20410382d7b62', part: "code", class: "bs-error-page__code" }, code))), h(`h${level}`, { part: 'heading', class: { 'bs-error-page__heading': true } }, heading), description && (h("p", { key: '4cace21798cbd9f40f2eb493938b5c12db43be97', part: "description", class: "bs-error-page__description" }, description)), (primary || secondary) && (h("div", { key: 'aca6cc9c414530bbb657e02c0910bbc4cae35ae6', part: "actions", class: "bs-error-page__actions" }, primary && (h("bs-button", { key: 'e5ec7c649b3b49e42e2f8132372e5b1b25f850bf', part: "primary", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)), secondary && (h("bs-button", { key: '7414d2d76186402404cf36ad662340f30e4b65aa', part: "secondary", variant: "outlined", onClick: () => this.bsSecondary.emit() }, secondary)))), this.reference && (h("p", { key: 'cf2fff2d7d2a77dd9f5a1fca1464ae0f687e4b5a', part: "reference", class: "bs-error-page__reference" }, this.reference)))));
     }
     static get is() { return "bs-error-page"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-file-upload/bs-file-upload.js

@@ -112,7 +112,7 @@ export class BsFileUpload {
             this.handleFiles(files);
     };
     render() {
-        return (h("div", { key: 'd9f116b4dcf8641a590581c24176d4659a2b6892', part: "dropzone", class: `bs-file-upload bs-file-upload--${this.direction} ${this.dragging ? 'bs-file-upload--dragging' : ''} ${this.disabled ? 'bs-file-upload--disabled' : ''}`, onDragEnter: this.onDragOver, onDragOver: this.onDragOver, onDragLeave: this.onDragLeave, onDrop: this.onDrop }, h("div", { key: '5aa0c733860505646bde5cad571a4d850d38f979', part: "icon", class: "bs-file-upload__icon" }, h("slot", { key: '292d3074620f2a228dbe544363f7ef8cce4f194c', name: "icon" }, h(UploadIcon, { key: '65c343be45634d10d561ba0f7a3cdd201a7664e6' }))), h("div", { key: '69d1ddde89b8c26d7a40a963cf16d1519b5b1fd4', class: "bs-file-upload__content" }, h("div", { key: '7730fdb7efb8eeffb374fff22fdd9d60497eebce', class: "bs-file-upload__text" }, this.heading && (h("span", { key: '0ca349bd1fedd84d869b363da150e13c07623f3b', part: "heading", class: "bs-file-upload__heading" }, this.heading)), this.description && (h("span", { key: '522d99de1b5caf70cd7e44bf8e821fe49951c788', part: "description", id: "description", class: "bs-file-upload__description" }, this.description))), h("bs-button", { key: 'f7af51522dfb762102f0c17bcbfd0e737b52d783', part: "browse", variant: "neutral", size: "sm", disabled: this.disabled, onClick: this.onBrowse }, this.buttonLabel)), h("input", { key: '71a2262124fd84b52dbffa18966eb1479e1ad95a', ref: el => (this.inputEl = el), class: "bs-file-upload__input", type: "file", hidden: true, tabindex: -1, accept: this.accept, multiple: this.multiple, disabled: this.disabled, "aria-describedby": this.description ? 'description' : undefined, onChange: this.onInputChange })));
+        return (h("div", { key: '58fece79d4fb5204ba4edadbdac4a26b5ef3186b', part: "dropzone", class: `bs-file-upload bs-file-upload--${this.direction} ${this.dragging ? 'bs-file-upload--dragging' : ''} ${this.disabled ? 'bs-file-upload--disabled' : ''}`, onDragEnter: this.onDragOver, onDragOver: this.onDragOver, onDragLeave: this.onDragLeave, onDrop: this.onDrop }, h("div", { key: '9339e7a61fd8d2d337c442518b0feca4eac56f4e', part: "icon", class: "bs-file-upload__icon" }, h("slot", { key: 'b361ea7dda65426da604485f8d00022520e96643', name: "icon" }, h(UploadIcon, { key: 'fb08c4f2ec4250293ca66ab7a84c0b77599b15b9' }))), h("div", { key: '1ee60fe58d4196a8aaf95d38e7ba1d6aaaf269fb', class: "bs-file-upload__content" }, h("div", { key: '57e91a29e74a9e02831b32e3ab674607a256e68c', class: "bs-file-upload__text" }, this.heading && (h("span", { key: '389ea949446b63bb976071fec70d3e5398d3ebef', part: "heading", class: "bs-file-upload__heading" }, this.heading)), this.description && (h("span", { key: 'f6709820df651e915ee7b0073672820478e3c483', part: "description", id: "description", class: "bs-file-upload__description" }, this.description))), h("bs-button", { key: '29abda9026efccb881b26794ca5441888ef4c02c', part: "browse", variant: "neutral", size: "sm", disabled: this.disabled, onClick: this.onBrowse }, this.buttonLabel)), h("input", { key: '3ea4af2d866795676c74138f5ce6f75f5cb13111', ref: el => (this.inputEl = el), class: "bs-file-upload__input", type: "file", hidden: true, tabindex: -1, accept: this.accept, multiple: this.multiple, disabled: this.disabled, "aria-describedby": this.description ? 'description' : undefined, onChange: this.onInputChange })));
     }
     static get is() { return "bs-file-upload"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-file-upload-item/bs-file-upload-item.js

@@ -86,7 +86,7 @@ export class BsFileUploadItem {
     }
     render() {
         const removing = this.state === 'success';
-        return (h("div", { key: 'e109650dda74a0a0db7af7f621da5e70079a7830', part: "item", class: `bs-file-upload-item bs-file-upload-item--${this.state}` }, h("div", { key: '800f1bd6a8cabd97c0aa43fe9a521876d4e6feb8', part: "thumbnail", class: "bs-file-upload-item__thumbnail" }, h("slot", { key: 'e5696a2cf9d69579ff8fd79688f83879c4093c74', name: "thumbnail" }, this.thumbnailSrc ? (h("img", { class: "bs-file-upload-item__image", src: this.thumbnailSrc, alt: this.thumbnailAlt })) : (h(ImageIcon, null)))), h("div", { key: 'bc52ee589c5cf4040dcb1aa86cce0150136d71ae', class: "bs-file-upload-item__content" }, h("div", { key: 'a70dc514e89ebfb1de3e772652e6ab8b2987007a', class: "bs-file-upload-item__meta" }, h("span", { key: '1c0a8e151f284a8344650fb00912582c17d2d5ee', part: "name", class: "bs-file-upload-item__name" }, this.fileName), this.fileSize && (h("span", { key: 'f608a1ee6e44e34e9e67600622a180e676fb960a', part: "size", class: "bs-file-upload-item__size" }, this.fileSize))), this.renderStatus()), h("bs-icon-button", { key: '5781f2aa401d12d3a4f4b0172d64cb0b9ceacf00', part: "action", variant: "subtle", size: "lg", ariaLabel: removing ? this.removeLabel : this.cancelLabel, onClick: this.onAction }, removing ? h(TrashIcon, null) : h(CloseIcon, null))));
+        return (h("div", { key: '02ddff16491c33fa61626bca72275ea0a1037c14', part: "item", class: `bs-file-upload-item bs-file-upload-item--${this.state}` }, h("div", { key: 'c465a9216d363ee858933d24abb468d73d66190e', part: "thumbnail", class: "bs-file-upload-item__thumbnail" }, h("slot", { key: '5aeaec4d3e9120163dab89c9bb3ca71e8976cae3', name: "thumbnail" }, this.thumbnailSrc ? (h("img", { class: "bs-file-upload-item__image", src: this.thumbnailSrc, alt: this.thumbnailAlt })) : (h(ImageIcon, null)))), h("div", { key: '3fdf5cb05270ae986e59404758f487932da10fbe', class: "bs-file-upload-item__content" }, h("div", { key: 'eb783412a8f97eaf6d566c06283c0ca0cc735570', class: "bs-file-upload-item__meta" }, h("span", { key: 'a456cfbcbaa19329715d55d80845a6b824bb2d64', part: "name", class: "bs-file-upload-item__name" }, this.fileName), this.fileSize && (h("span", { key: '7810e2855de50d3fa42d7ee29af81e2c58ea1a42', part: "size", class: "bs-file-upload-item__size" }, this.fileSize))), this.renderStatus()), h("bs-icon-button", { key: '7be3bf3d73ec51a2ce3bc23b4e401306c2d6bcc9', part: "action", variant: "subtle", size: "lg", ariaLabel: removing ? this.removeLabel : this.cancelLabel, onClick: this.onAction }, removing ? h(TrashIcon, null) : h(CloseIcon, null))));
     }
     static get is() { return "bs-file-upload-item"; }
     static get encapsulation() { return "shadow"; }

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');
+    });
+});