@brandsync/wc 1.16.0 → 1.18.0

package/dist/collection/components/bs-command-palette/bs-command-palette.stories.js

@@ -0,0 +1,194 @@
+import { html, nothing } from "lit";
+import { componentDescription } from "../../stories-utils";
+/** Inline icon paths (no external URLs). */
+export const ICON_PATHS = {
+    users: '<circle cx="9" cy="8" r="3.5" /><path d="M2.5 20a6.5 6.5 0 0 1 13 0" /><path d="M16 4.6a3.5 3.5 0 0 1 0 6.8M18 14a6.5 6.5 0 0 1 3.5 6" />',
+    invoice: '<path d="M7 3h8l4 4v14H7V3Z" /><path d="M15 3v4h4M10 12h6M10 16h6" />',
+    plus: '<path d="M12 5v14M5 12h14" />',
+    package: '<path d="M21 8 12 3 3 8v8l9 5 9-5V8Z" /><path d="m3 8 9 5 9-5M12 13v8" />',
+    store: '<path d="M4 9 5.5 4h13L20 9M4 9h16v11H4V9Z" /><path d="M9 20v-6h6v6" />',
+    arrow: '<path d="M5 12h14M13 6l6 6-6 6" />',
+    moon: '<path d="M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5Z" />',
+    sun: '<circle cx="12" cy="12" r="4" /><path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6 7 7M17 17l1.4 1.4M5.6 18.4 7 17M17 7l1.4-1.4" />',
+    monitor: '<path d="M3 4h18v12H3V4ZM8 20h8M12 16v4" />',
+    download: '<path d="M12 4v11M7 11l5 5 5-5M5 20h14" />',
+    search: '<circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" />',
+    list: '<path d="M8 6h12M8 12h12M8 18h12M4 6h.01M4 12h.01M4 18h.01" />',
+};
+/** Figma "Command Palette" data, shared by the stories and the tests. */
+export const DEFAULT_ROWS = [
+    { value: 'c-nordic', section: 'recent', label: 'Nordic Sports AS', trailing: 'Customer', icon: 'users' },
+    { value: 'i-20931', section: 'recent', label: 'INV-20931', trailing: 'Invoice', icon: 'invoice' },
+    { value: 'cmd-invoice', section: 'suggested', label: 'Create Invoice', keys: 'Ctrl+N', icon: 'plus' },
+    { value: 'cmd-product', section: 'suggested', label: 'Add product', keys: 'Ctrl+Shift+P', icon: 'package' },
+    { value: 'cmd-store', section: 'suggested', label: 'Switch store', keys: 'Ctrl+Ctrl+Ctrl', icon: 'store' },
+    { value: 'nav-dashboard', section: 'navigation', label: 'Go to Dashboard', keys: 'G+D', icon: 'arrow' },
+    { value: 'nav-settings', section: 'navigation', label: 'Go to Settings', keys: 'G+S', icon: 'arrow' },
+];
+export const SEARCHING_ROWS = [
+    { value: 'cmd-invoice', section: 'commands', label: '', match: 'Create Invo', rest: 'ice', keys: 'Ctrl+N', icon: 'plus' },
+    { value: 'cmd-export', section: 'commands', label: '', match: 'Export invo', rest: 'ices to CSV', icon: 'download' },
+    { value: 'nav-invoices', section: 'navigation', label: '', match: 'Go to Invo', rest: 'ices', keys: 'G+I', icon: 'arrow' },
+    { value: 'i-20931', section: 'records', label: '', match: 'INV', rest: '-20931 · Nordic Sports AS', description: 'Due 30 Oct · NOK 12 480', trailing: 'Invoice', icon: 'invoice' },
+    { value: 'i-20877', section: 'records', label: '', match: 'INV', rest: '-20877 · Bergen Sko AS', description: 'Paid · NOK 4 150', trailing: 'Invoice', icon: 'invoice' },
+];
+export const COMMANDS_ONLY_ROWS = [
+    { value: 'theme-dark', section: 'commands', label: 'Switch to dark ', match: 'theme', icon: 'moon' },
+    { value: 'theme-light', section: 'commands', label: 'Switch to light theme', trailing: 'Current', icon: 'sun' },
+    { value: 'theme-system', section: 'commands', label: 'Use system theme', icon: 'monitor' },
+];
+export const TRY_INSTEAD_ROWS = [
+    { value: 'try-records', section: 'try-instead', label: 'Search records for “thme”', icon: 'search' },
+    { value: 'try-commands', section: 'try-instead', label: 'Browse all commands', icon: 'list' },
+];
+const svg = (name) => {
+    const t = document.createElement('template');
+    t.innerHTML = `<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">${ICON_PATHS[name]}</svg>`;
+    return t.content.firstElementChild;
+};
+const rowTemplate = (r) => html `<bs-search-item slot=${r.section} value=${r.value} trailing=${r.trailing ?? nothing}>
+  ${svg(r.icon)}${r.match && !r.rest ? nothing : r.label}${r.match ? html `<strong>${r.match}</strong>` : nothing}${r.rest ?? ''}
+  ${r.description ? html `<span slot="description">${r.description}</span>` : nothing}
+  ${r.keys ? html `<bs-key-caps slot="trailing" keys=${r.keys}></bs-key-caps>` : nothing}
+</bs-search-item>`;
+const meta = {
+    // The shared story data constants are exported for the tests; keep them out of the sidebar.
+    excludeStories: /^[A-Z0-9_]+$/,
+    title: 'Components/bs-command-palette',
+    parameters: { layout: 'fullscreen', docs: { description: { component: componentDescription('bs-command-palette') }, story: { inline: false, iframeHeight: 640 } } },
+    argTypes: {
+        open: { control: 'boolean' },
+        value: { control: 'text' },
+        status: { control: 'select', options: ['default', 'results', 'empty', 'loading'] },
+        placeholder: { control: 'text' },
+        showFooter: { control: 'boolean' },
+        keepOpenOnSelect: { control: 'boolean' },
+        hotkey: { control: 'text' },
+        scopeLabel: { control: 'text' },
+        emptyHeading: { control: 'text' },
+        emptyDescription: { control: 'text' },
+        didYouMean: { control: 'text' },
+    },
+    args: {
+        open: true,
+        value: '',
+        status: 'default',
+        placeholder: 'Type a command or search…',
+        showFooter: true,
+        keepOpenOnSelect: false,
+        hotkey: '',
+        emptyHeading: 'No commands or records',
+        emptyDescription: 'Check the spelling, or search records instead.',
+    },
+    render: args => html `
+    <div style="min-height: 640px">
+      <bs-command-palette
+        .open=${args.open}
+        .value=${args.value}
+        .status=${args.status}
+        .placeholder=${args.placeholder}
+        .showFooter=${args.showFooter}
+        .keepOpenOnSelect=${args.keepOpenOnSelect}
+        .hotkey=${args.hotkey}
+        .scopeLabel=${args.scopeLabel}
+        .emptyHeading=${args.emptyHeading}
+        .emptyDescription=${args.emptyDescription}
+        .didYouMean=${args.didYouMean}
+      >
+        ${DEFAULT_ROWS.map(rowTemplate)}
+      </bs-command-palette>
+    </div>
+  `,
+};
+export default meta;
+export const Closed = {
+    args: { open: false },
+    render: () => html `
+    <div style="min-height: 640px; padding: 16px">
+      <bs-button @click=${(e) => e.currentTarget.nextElementSibling.show()}>Open palette</bs-button>
+      <bs-command-palette hotkey="mod+k">${DEFAULT_ROWS.map(rowTemplate)}</bs-command-palette>
+    </div>
+  `,
+};
+export const Default = {};
+export const Searching = {
+    args: { value: 'invo', status: 'results' },
+    render: args => html `
+    <div style="min-height: 640px">
+      <bs-command-palette .open=${args.open} .value=${args.value} .status=${args.status}>${SEARCHING_ROWS.map(rowTemplate)}</bs-command-palette>
+    </div>
+  `,
+};
+export const CommandsOnly = {
+    args: { value: '> theme', status: 'results' },
+    render: args => html `
+    <div style="min-height: 640px">
+      <bs-command-palette .open=${args.open} .value=${args.value} .status=${args.status}>${COMMANDS_ONLY_ROWS.map(rowTemplate)}</bs-command-palette>
+    </div>
+  `,
+};
+export const NoResults = {
+    args: { value: 'thme', status: 'empty' },
+    render: args => html `
+    <div style="min-height: 640px">
+      <bs-command-palette
+        .open=${args.open}
+        .value=${args.value}
+        status="empty"
+        empty-heading="No commands or records for “thme”"
+        did-you-mean="theme"
+      >
+        ${TRY_INSTEAD_ROWS.map(rowTemplate)}
+      </bs-command-palette>
+    </div>
+  `,
+};
+export const Loading = {
+    args: { value: 'invo', status: 'loading' },
+    render: args => html `
+    <div style="min-height: 640px">
+      <bs-command-palette .open=${args.open} .value=${args.value} status="loading"></bs-command-palette>
+    </div>
+  `,
+};
+export const Interactive = {
+    args: { open: false },
+    render: () => {
+        const wrap = document.createElement('div');
+        wrap.style.cssText = 'min-height: 640px; padding: 16px';
+        const out = document.createElement('output');
+        out.style.cssText = 'display:block;margin-top:8px;font:14px/20px monospace;color:var(--bs-text-secondary)';
+        out.textContent = 'Press Ctrl/Cmd+K, type, use the arrow keys, Enter or Esc.';
+        const btn = document.createElement('bs-button');
+        btn.textContent = 'Open palette (Ctrl/Cmd+K)';
+        const cp = document.createElement('bs-command-palette');
+        cp.setAttribute('hotkey', 'mod+k');
+        const render = (rows) => {
+            cp.innerHTML = rows
+                .map(r => `<bs-search-item slot="${r.section}" value="${r.value}"${r.trailing ? ` trailing="${r.trailing}"` : ''}>${r.match && !r.rest ? '' : r.label}${r.match ? `<strong>${r.match}</strong>` : ''}${r.rest ?? ''}${r.description ? `<span slot="description">${r.description}</span>` : ''}${r.keys ? `<bs-key-caps slot="trailing" keys="${r.keys}"></bs-key-caps>` : ''}</bs-search-item>`)
+                .join('');
+        };
+        render(DEFAULT_ROWS);
+        // The app owns the filtering.
+        cp.addEventListener('bsInput', e => {
+            const d = e.detail;
+            const all = [...DEFAULT_ROWS, ...SEARCHING_ROWS, ...COMMANDS_ONLY_ROWS].filter((r, i, a) => a.findIndex(x => x.value === r.value) === i);
+            if (!d.query && !d.commandsOnly) {
+                cp.status = 'default';
+                render(DEFAULT_ROWS);
+            }
+            else {
+                const rows = all.filter(r => (!d.commandsOnly || ['commands', 'suggested', 'navigation'].includes(r.section)) && `${r.label}${r.match ?? ''}${r.rest ?? ''}`.toLowerCase().includes(d.query.toLowerCase()));
+                render(rows);
+                cp.status = rows.length ? 'results' : 'empty';
+            }
+            out.textContent = `bsInput ${JSON.stringify(d)}`;
+        });
+        for (const n of ['bsSelect', 'bsSuggestion', 'bsOpenChange', 'bsScopeExit']) {
+            cp.addEventListener(n, e => (out.textContent = `${n} ${JSON.stringify(e.detail ?? null)}`));
+        }
+        btn.addEventListener('click', () => cp.show());
+        wrap.append(btn, out, cp);
+        return wrap;
+    },
+};

package/dist/collection/components/bs-compact-menu-block/bs-compact-menu-block.cmp.test.js

@@ -0,0 +1,32 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import axe from "axe-core";
+import { assertShadowParts, assertCssCustomProperties } from "../../test/helpers/conventions";
+const q = (el, s) => el.shadowRoot.querySelector(s);
+const make = async (props = {}) => {
+    const r = await render(h("div", { style: { width: '245px' } }, h("bs-compact-menu-block", { name: "Payments" })));
+    const el = r.root.querySelector('bs-compact-menu-block');
+    Object.assign(el, props);
+    await r.waitForChanges();
+    return { ...r, el };
+};
+describe('bs-compact-menu-block', () => {
+    it('is a button named by its text, with the parts and custom properties', async () => {
+        const { el } = await make();
+        const c = q(el, '[part="container"]');
+        expect(c.tagName).toBe('BUTTON');
+        expect(c.textContent).toBe('Payments');
+        assertShadowParts(el.shadowRoot, ['container']);
+        assertCssCustomProperties(el, ['--bs-compact-menu-block-padding', '--bs-compact-menu-block-bg-hover', '--bs-compact-menu-block-focus-ring']);
+    });
+    it('is a single 36px line', async () => {
+        const { el } = await make();
+        expect(Math.round(el.getBoundingClientRect().height)).toBe(36);
+    });
+    it('has no axe violations', async () => {
+        for (const props of [{}]) {
+            const { el } = await make(props);
+            const results = await axe.run(el);
+            expect(results.violations.map(v => `${JSON.stringify(props)} ${v.id}: ${v.help}`)).toEqual([]);
+        }
+    });
+});

package/dist/collection/components/bs-compact-menu-block/bs-compact-menu-block.css

@@ -0,0 +1,43 @@
+:host {
+  display: block;
+  box-sizing: border-box;
+  --bs-compact-menu-block-padding: var(--bs-spacing-100);
+  --bs-compact-menu-block-radius: var(--bs-border-radius-100);
+  --bs-compact-menu-block-bg: transparent;
+  --bs-compact-menu-block-bg-hover: var(--bs-surface-hover);
+  --bs-compact-menu-block-bg-pressed: var(--bs-surface-pressed);
+  --bs-compact-menu-block-color: var(--bs-text-default);
+  --bs-compact-menu-block-focus-ring: var(--bs-border-info);
+}
+
+.bs-compact-menu-block {
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  margin: 0;
+  padding: var(--bs-compact-menu-block-padding);
+  border: 0;
+  border-radius: var(--bs-compact-menu-block-radius);
+  background: var(--bs-compact-menu-block-bg);
+  color: var(--bs-compact-menu-block-color);
+  font-family: var(--bs-typography-font-family-body, Roboto), sans-serif;
+  font-size: var(--bs-fontsize-body-sm);
+  font-weight: var(--bs-font-weight-regular);
+  line-height: calc(var(--bs-line-height-body-sm) * 1px);
+  text-align: left;
+  cursor: pointer;
+}
+
+.bs-compact-menu-block:hover,
+.bs-compact-menu-block:focus-visible {
+  background: var(--bs-compact-menu-block-bg-hover);
+}
+
+.bs-compact-menu-block:active {
+  background: var(--bs-compact-menu-block-bg-pressed);
+}
+
+.bs-compact-menu-block:focus-visible {
+  outline: var(--bs-spacing-25) solid var(--bs-compact-menu-block-focus-ring);
+  outline-offset: 0;
+}

package/dist/collection/components/bs-compact-menu-block/bs-compact-menu-block.js

@@ -0,0 +1,67 @@
+import { h } from "@stencil/core";
+/**
+ * A plain text entry in a mega menu: one line, no icon. Matches the Figma "Compact menu block" component
+ * (Default, Hover, Pressed and Focused).
+ *
+ * The block is always a native button and only emits events; it never navigates. Hover, pressed and focus come from the
+ * native element.
+ *
+ * ## When to use
+ * - A dense list of destinations in a mega menu, usually inside `bs-mega-menu` with `type="compact"`.
+ *
+ * ## When not to use
+ * - A destination that needs an icon or a description -- use `bs-menu-block`.
+ * - A command in a dropdown list -- use `bs-menu-item`.
+ *
+ * @part container - The button.
+ * @prop --bs-compact-menu-block-padding - Padding inside the block. Aliased to `--bs-spacing-100`.
+ * @prop --bs-compact-menu-block-radius - Corner radius. Aliased to `--bs-border-radius-100`.
+ * @prop --bs-compact-menu-block-bg - Resting background. `transparent`.
+ * @prop --bs-compact-menu-block-bg-hover - Aliased to `--bs-surface-hover`.
+ * @prop --bs-compact-menu-block-bg-pressed - Aliased to `--bs-surface-pressed`.
+ * @prop --bs-compact-menu-block-color - Text colour. Aliased to `--bs-text-default`.
+ * @prop --bs-compact-menu-block-focus-ring - Focus ring colour. Aliased to `--bs-border-info`.
+ */
+export class BsCompactMenuBlock {
+    /** The text, and the accessible name. */
+    name;
+    render() {
+        const common = { part: 'container', class: 'bs-compact-menu-block' };
+        return (h("button", { key: '2bd3b6eebed0124d8f013bb1d1a74d14bd3d76c5', ...common, type: "button" }, this.name));
+    }
+    static get is() { return "bs-compact-menu-block"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-compact-menu-block.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-compact-menu-block.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The text, and the accessible name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            }
+        };
+    }
+}

package/dist/collection/components/bs-compact-menu-block/bs-compact-menu-block.stories.js

@@ -0,0 +1,25 @@
+import { html } from "lit";
+import { componentDescription } from "../../stories-utils";
+const meta = {
+    title: 'Components/bs-compact-menu-block',
+    parameters: { layout: 'padded', docs: { description: { component: componentDescription('bs-compact-menu-block') } } },
+    argTypes: { name: { control: 'text' } },
+    args: { name: 'Payments' },
+    render: args => html `
+    <div style="width: 245px">
+      <bs-compact-menu-block name=${args.name}></bs-compact-menu-block>
+    </div>
+  `,
+};
+export default meta;
+export const Default = {};
+/** A list of blocks. Hover, pressed and focus come from the native element: point at a block, press it, or Tab to it. */
+export const States = {
+    render: () => html `
+    <div style="display:flex;flex-direction:column;width:245px">
+      <bs-compact-menu-block name="General ledger"></bs-compact-menu-block>
+      <bs-compact-menu-block name="Journal entries"></bs-compact-menu-block>
+      <bs-compact-menu-block name="Chart of accounts"></bs-compact-menu-block>
+    </div>
+  `,
+};

package/dist/collection/components/bs-company-switcher/bs-company-switcher.cmp.test.js

@@ -0,0 +1,171 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import axe from "axe-core";
+import { userEvent } from "vitest/browser";
+import { assertShadowParts, assertCssCustomProperties } from "../../test/helpers/conventions";
+import { COMPANIES, RECENT_IDS } from "./bs-company-switcher.stories";
+const q = (el, s) => el.shadowRoot.querySelector(s);
+const qa = (el, s) => Array.from(el.shadowRoot.querySelectorAll(s));
+const settle = (ms = 80) => new Promise(r => setTimeout(r, ms));
+const make = async (props = {}) => {
+    const r = await render(h("div", { style: { width: '500px', minHeight: '600px' } }, h("bs-company-switcher", null)));
+    const el = r.root.querySelector('bs-company-switcher');
+    Object.assign(el, { companies: COMPANIES, currentId: 'nordic', recentIds: RECENT_IDS, ...props });
+    await r.waitForChanges();
+    await settle();
+    const type = async (query) => {
+        q(el, 'bs-input').dispatchEvent(new CustomEvent('bsInput', { detail: query }));
+        await r.waitForChanges();
+    };
+    const press = async (k) => {
+        await userEvent.keyboard(k);
+        await r.waitForChanges();
+    };
+    return { ...r, el, type, press };
+};
+const headers = (el) => qa(el, '[part="group-header"]').map(h => h.textContent);
+const rows = (el) => qa(el, '[part="row"]');
+describe('bs-company-switcher', () => {
+    it('renders a 260px trigger with initials avatar, name, org number and chevron', async () => {
+        const { el } = await make();
+        const trigger = q(el, '[part="trigger"]');
+        expect(Math.round(el.getBoundingClientRect().width)).toBe(260);
+        expect(Math.round(trigger.getBoundingClientRect().height)).toBe(54);
+        expect(q(el, 'bs-avatar').initials).toBe('NS');
+        expect(q(el, '[part="name"]').textContent).toBe('Nordic Sports AS');
+        expect(q(el, '[part="subtitle"]').textContent).toBe('Org. no. 923 456 789');
+        expect(q(el, '.bs-company-switcher__chevron')).not.toBeNull();
+        expect(trigger.getAttribute('aria-expanded')).toBe('false');
+        assertShadowParts(el.shadowRoot, ['trigger', 'name', 'subtitle', 'panel']);
+        assertCssCustomProperties(el, ['--bs-company-switcher-width', '--bs-company-switcher-panel-width', '--bs-company-switcher-shadow']);
+    });
+    it('opens on trigger click, reflects open, emits bsOpenChange and moves focus to the search field', async () => {
+        const { el, waitForChanges } = await make();
+        const got = [];
+        el.addEventListener('bsOpenChange', (e) => got.push(e.detail));
+        q(el, '[part="trigger"]').click();
+        await waitForChanges();
+        await settle();
+        expect(el.open).toBe(true);
+        expect(el.hasAttribute('open')).toBe(true);
+        expect(got).toEqual([true]);
+        expect(q(el, '[part="trigger"]').getAttribute('aria-expanded')).toBe('true');
+        expect(el.shadowRoot.activeElement?.tagName).toBe('BS-INPUT');
+        const panel = q(el, '[part="panel"]').getBoundingClientRect();
+        expect(Math.round(panel.width)).toBe(360);
+    });
+    it('shows Current, Recent and All companies groups with the check on the current row', async () => {
+        const { el } = await make({ open: true });
+        expect(headers(el)).toEqual(['Current', 'Recent', 'All companies · 3']);
+        expect(rows(el)).toHaveLength(6);
+        const current = rows(el)[0];
+        expect(current.selected).toBe(true);
+        expect(current.querySelector('[slot="trailing"]')).not.toBeNull();
+        expect(current.textContent).toContain('NO · Org. no. 923 456 789');
+        expect(q(el, '[role="listbox"]')).not.toBeNull();
+        assertShadowParts(el.shadowRoot, ['search', 'list', 'group', 'group-header', 'row', 'footer']);
+    });
+    it('filters by name or org. number, case-insensitively, with a matches header', async () => {
+        const { el, type } = await make({ open: true });
+        await type('FJORD');
+        expect(headers(el)).toEqual(['1 match']);
+        expect(rows(el)).toHaveLength(1);
+        await type('556 781');
+        expect(rows(el).map(r => r.textContent)).toEqual([expect.stringContaining('Baltic Freight AB')]);
+        await type('92');
+        expect(headers(el)).toEqual(['2 matches']);
+        await type('');
+        expect(headers(el)).toEqual(['Current', 'Recent', 'All companies · 3']);
+    });
+    it('shows the no-results state with the footer still present', async () => {
+        const { el, type } = await make({ open: true });
+        await type('zzz');
+        const empty = q(el, '[part="empty"]');
+        expect(empty.heading).toBe('No companies match “zzz”');
+        expect(empty.description).toBe('Check the spelling, or search by org. number.');
+        expect(q(el, '[part="list"]')).toBeNull();
+        expect(q(el, '[part="footer"]')).not.toBeNull();
+    });
+    it('navigates with arrow keys and switches with Enter', async () => {
+        const { el, press, waitForChanges } = await make({ open: true });
+        await settle();
+        const got = [];
+        el.addEventListener('bsCompanySwitch', (e) => got.push(e.detail));
+        await press('{ArrowDown}');
+        await press('{ArrowDown}');
+        const combo = q(el, '[role="combobox"]');
+        expect(combo.getAttribute('aria-activedescendant')).toBe(rows(el)[1].id);
+        await press('{ArrowUp}');
+        expect(combo.getAttribute('aria-activedescendant')).toBe(rows(el)[0].id);
+        await press('{ArrowDown}');
+        await press('{Enter}');
+        await waitForChanges();
+        expect(got.map(c => c.id)).toEqual(['fjord']);
+        expect(el.open).toBe(false);
+    });
+    it('switching a row by click emits bsCompanySwitch; the current row only closes', async () => {
+        const { el, waitForChanges } = await make({ open: true });
+        const got = [];
+        el.addEventListener('bsCompanySwitch', (e) => got.push(e.detail));
+        rows(el)[0].click();
+        await waitForChanges();
+        expect(got).toEqual([]);
+        expect(el.open).toBe(false);
+        el.open = true;
+        await waitForChanges();
+        rows(el)[2].click();
+        await waitForChanges();
+        expect(got.map(c => c.id)).toEqual(['aurora']);
+    });
+    it('stays open in the switching state when the handler sets switchingId', async () => {
+        const { el, waitForChanges } = await make({ open: true });
+        el.addEventListener('bsCompanySwitch', (e) => (el.switchingId = e.detail.id));
+        rows(el)[1].click();
+        await waitForChanges();
+        expect(el.open).toBe(true);
+        const row = rows(el)[1];
+        expect(row.querySelector('bs-spinner')).not.toBeNull();
+        expect(row.getAttribute('aria-busy')).toBe('true');
+        const trigger = q(el, '[part="trigger"]');
+        expect(trigger.getAttribute('aria-busy')).toBe('true');
+        expect(q(el, '[part="subtitle"]').textContent).toBe('Switching…');
+        expect(q(el, '.bs-company-switcher__trigger bs-spinner')).not.toBeNull();
+    });
+    it('closes on Escape and returns focus to the trigger', async () => {
+        const { el, press } = await make({ open: true });
+        await settle();
+        await press('{Escape}');
+        await settle();
+        expect(el.open).toBe(false);
+        expect(el.shadowRoot.activeElement).toBe(q(el, '[part="trigger"]'));
+    });
+    it('emits bsManageCompanies and bsAddCompanies from the footer', async () => {
+        const { el, waitForChanges } = await make({ open: true });
+        const got = [];
+        el.addEventListener('bsManageCompanies', () => got.push('manage'));
+        el.addEventListener('bsAddCompanies', () => got.push('add'));
+        const [manage, add] = qa(el, '[part="footer"] bs-button');
+        expect(manage.textContent).toContain('Manage Companies');
+        expect(add.textContent).toContain('Add companies');
+        manage.click();
+        add.click();
+        await waitForChanges();
+        expect(got).toEqual(['manage', 'add']);
+    });
+    it('uses label props for i18n', async () => {
+        const { el, waitForChanges } = await make({ open: true, manageLabel: 'Administrer', searchPlaceholder: 'Finn selskap' });
+        await waitForChanges();
+        expect(q(el, 'bs-input').placeholder).toBe('Finn selskap');
+        expect(q(el, '[part="footer"]').textContent).toContain('Administrer');
+    });
+    it('has no axe violations open (apart from bs-popover\'s own trigger wrapper)', async () => {
+        const { el } = await make({ open: true });
+        // Known gap in bs-popover: its trigger wrapper <div> carries aria-expanded/haspopup without a role
+        // (bs-popover's own tests assert those attributes), so axe flags aria-allowed-attr on it.
+        const results = await axe.run(el);
+        const violations = results.violations
+            .map(v => ({ ...v, nodes: v.nodes.filter(n => !n.html.includes('bs-popover__trigger')) }))
+            .filter(v => v.nodes.length)
+            .map(v => `${v.id}: ${v.help}`);
+        expect(violations).toEqual([]);
+    });
+});