@brandsync/wc 1.17.0 → 1.19.0

package/dist/collection/components/bs-citation-preview/bs-citation-preview.js

@@ -38,7 +38,7 @@ export class BsCitationPreview {
     bsOpen;
     render() {
         const hasPage = this.page !== undefined && this.page !== null && this.page !== '';
-        return (h("bs-card", { key: 'ea8213ae775ca510bf853f2cb2f8ece97f95001f', part: "container", class: "bs-citation-preview", surface: "base" }, h("div", { key: 'd10d32d872cbaabb10a090c1ce8b3ef514c61937', class: "bs-citation-preview__body" }, h("bs-source-link", { key: 'ae1213e1bd69cdf3e56ce9231d76ff4f9f2a5ac0', part: "header", fileName: this.fileName, sourceName: this.sourceName, href: this.href, onBsOpen: () => this.bsOpen.emit() }), h("div", { key: 'ed6b1225fb0ce6f545c4a2e3d1d644cb607c7e78', part: "snippet", class: "bs-citation-preview__snippet" }, h("slot", { key: 'bf00115e8845869813b8ee2a75b25da773d8e0d3' })), h("div", { key: '1770276d58af8961bed809c1e958458c0e20c302', class: "bs-citation-preview__footer" }, h("slot", { key: '78fe989b67646fe2c2aa2e6d5f98fd13c91eb436', name: "footer" }, hasPage && (h("span", { key: '15d025d294c68ec6452a501ac50547278c54d105', part: "page", class: "bs-citation-preview__page" }, "Page ", this.page)))))));
+        return (h("bs-card", { key: '2c4592f7fb9dcec6e5a062b7927348a4c8a0d113', part: "container", class: "bs-citation-preview", surface: "base" }, h("div", { key: 'f3af7627abe3a23a3ff4667068b26941f9ad5228', class: "bs-citation-preview__body" }, h("bs-source-link", { key: 'be462a72db4fc539e85670adcecd4de14779dba9', part: "header", fileName: this.fileName, sourceName: this.sourceName, href: this.href, onBsOpen: () => this.bsOpen.emit() }), h("div", { key: 'd53ccbe59a37f2fb0f036e3de979d660e881ecda', part: "snippet", class: "bs-citation-preview__snippet" }, h("slot", { key: '3a2bfac722bb59c0543e0851f80206e3aedd6310' })), h("div", { key: 'df2813e95a5266f7f91590e5b74bbc2c28bc8c35', class: "bs-citation-preview__footer" }, h("slot", { key: 'a0be65bc990119011c50e92e79c7025a4ceb9488', name: "footer" }, hasPage && (h("span", { key: 'd72c4b615b55212eac42f508e02d1af9ba96b534', part: "page", class: "bs-citation-preview__page" }, "Page ", this.page)))))));
     }
     static get is() { return "bs-citation-preview"; }
     static get encapsulation() { return "shadow"; }

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

@@ -393,7 +393,7 @@ export class BsCommandPalette {
         const sections = this.shownSections().filter(s => this.filled[s]);
         const hasList = sections.length > 0;
         const showResults = loading || empty || hasList;
-        return (h("dialog", { key: '55a38e90a59faa6f0314c7e26ae90326fc82d7dc', ref: el => (this.dialogEl = el), part: "dialog", class: "bs-command-palette", "aria-label": this.label, "aria-modal": "true", role: "dialog", onCancel: this.onCancel, onClose: () => this.open && this.setOpen(false), onClick: this.onDialogClick, onKeyDown: this.onDialogKeyDown }, h("div", { key: '793f0509daba42c4a208d3f5ff3cdfa7d963989a', part: "panel", class: "bs-command-palette__panel" }, h("div", { key: '9af1794a677b7696e242df6a4e9e7775a8efdbea', part: "search", class: "bs-command-palette__search" }, this.scopeLabel && (h("bs-chip-informative", { key: '506dd50cecd610c48d61b24723e5a700a05ec693', class: "bs-command-palette__scope", color: "info" }, this.scopeLabel)), h("div", { key: 'ae0d016a687820e4960b9ff3d59c74cd937796bf', class: "bs-command-palette__field", ref: el => (this.comboEl = el), role: "combobox", "aria-label": this.placeholder, "aria-expanded": String(hasList), "aria-haspopup": "listbox", "aria-controls": hasList ? listId : undefined, onKeyDown: this.onKeyDown }, h("bs-input", { key: 'd444f70cfd6878434d19364ee1668987ae7da1c2', part: "input", ref: el => (this.inputEl = el), type: "search", value: this.value, placeholder: this.placeholder, onBsInput: this.onInput })), h("span", { key: '8baa325a3af0bd2c4b09e7201c315fbbb37f55e9', class: "bs-command-palette__esc", "aria-hidden": "true" }, h("bs-key", { key: 'a9bc3f695d63b32ab227b93a8a46db33da56da27', label: "Esc" }))), showResults && h("div", { key: 'e97114037b44d14a51872929314773aa637d64f1', class: "bs-command-palette__divider", role: "presentation" }), showResults && (h("div", { key: 'c8bc5e63b0ff902c8a2730775ae7294f025a7dc6', part: "results", class: "bs-command-palette__results", "aria-busy": String(loading), onMouseOver: this.onResultsMouseOver }, loading && (h("div", { key: 'c4bfacce3dc902aab472d825494d1e67ca593c32', class: "bs-command-palette__loading", role: "status" }, h("bs-spinner", { key: 'fcf43a2a30cc94b67075bbded0eaae329c4e18a4', size: "sm" }), h("span", { key: 'b9f195cacbd6ad6acfcd151f47c52b0c937ff1f5' }, this.loadingLabel))), empty && this.renderEmpty(), hasList && (h("div", { key: 'e4da543ad73a9b7dc209876d6e8dd1d057f4048e', id: listId, class: "bs-command-palette__list", role: "listbox", "aria-label": this.listLabel }, sections.map(s => this.renderSection(s)))))), this.showFooter && this.renderFooter()), h("span", { key: 'c4aab5214af689a0332a9730753ca187b91b5ec3', class: "bs-command-palette__live", "aria-live": "polite" }, this.announcement())));
+        return (h("dialog", { key: '82eae53a7e6bc7327a8e18f3ec46713f28e40de1', ref: el => (this.dialogEl = el), part: "dialog", class: "bs-command-palette", "aria-label": this.label, "aria-modal": "true", role: "dialog", onCancel: this.onCancel, onClose: () => this.open && this.setOpen(false), onClick: this.onDialogClick, onKeyDown: this.onDialogKeyDown }, h("div", { key: '38ff5eb71ba6ec55754e4652f8fd0726788888cc', part: "panel", class: "bs-command-palette__panel" }, h("div", { key: '44bbcb7583bd2c83f7bff67b7e11e923c2b254ea', part: "search", class: "bs-command-palette__search" }, this.scopeLabel && (h("bs-chip-informative", { key: 'b0b7ce0e5f6d89837e4ca51461cbf4418d133bfd', class: "bs-command-palette__scope", color: "info" }, this.scopeLabel)), h("div", { key: '2f1cfc7a8e22b552fd29ab42cd456420f5465511', class: "bs-command-palette__field", ref: el => (this.comboEl = el), role: "combobox", "aria-label": this.placeholder, "aria-expanded": String(hasList), "aria-haspopup": "listbox", "aria-controls": hasList ? listId : undefined, onKeyDown: this.onKeyDown }, h("bs-input", { key: 'd26a20ff3c9f65e4382ce00358bd503dd17097ce', part: "input", ref: el => (this.inputEl = el), type: "search", value: this.value, placeholder: this.placeholder, onBsInput: this.onInput })), h("span", { key: '9afab31e67ca2b7c2175fd0998ee39c434a8ff55', class: "bs-command-palette__esc", "aria-hidden": "true" }, h("bs-key", { key: '6ea5bd74d556f3bd3e99add2d3760979c18ec0f2', label: "Esc" }))), showResults && h("div", { key: '96ce3040a1f6123e331614be448742e0a01386cf', class: "bs-command-palette__divider", role: "presentation" }), showResults && (h("div", { key: 'b762317a9abf5cf1e5773abf9835ba10856c7d86', part: "results", class: "bs-command-palette__results", "aria-busy": String(loading), onMouseOver: this.onResultsMouseOver }, loading && (h("div", { key: '9c86ac88bdfc3d7cb0a7679902f4c3b063d45a24', class: "bs-command-palette__loading", role: "status" }, h("bs-spinner", { key: '8578c7013591ded5847c76cde5995f2e30930202', size: "sm" }), h("span", { key: 'd13b91f6601ad2a50981cf7eef3a69f47bf50ead' }, this.loadingLabel))), empty && this.renderEmpty(), hasList && (h("div", { key: '27f56bdf333b8f479c691132d441fb0b161328c2', id: listId, class: "bs-command-palette__list", role: "listbox", "aria-label": this.listLabel }, sections.map(s => this.renderSection(s)))))), this.showFooter && this.renderFooter()), h("span", { key: '8d1cee6732f49faf5794438742863ec67036aef5', class: "bs-command-palette__live", "aria-live": "polite" }, this.announcement())));
     }
     static get is() { return "bs-command-palette"; }
     static get encapsulation() { return "shadow"; }

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: 'b2a2efb662ffb9ddcf300ed8f6daaeb329964ffe', ...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([]);
+    });
+});

package/dist/collection/components/bs-company-switcher/bs-company-switcher.css

@@ -0,0 +1,196 @@
+:host {
+  display: inline-block;
+  box-sizing: border-box;
+  width: var(--bs-company-switcher-width);
+  max-width: 100%;
+  --bs-company-switcher-width: 260px;
+  --bs-company-switcher-panel-width: 360px;
+  --bs-company-switcher-radius: var(--bs-border-radius-100);
+  --bs-company-switcher-trigger-bg: transparent;
+  --bs-company-switcher-trigger-bg-hover: var(--bs-surface-hover);
+  --bs-company-switcher-trigger-bg-pressed: var(--bs-surface-pressed);
+  --bs-company-switcher-trigger-bg-open: var(--bs-surface-selected);
+  --bs-company-switcher-focus-ring: var(--bs-border-neutral-focus);
+  --bs-company-switcher-panel-bg: var(--bs-surface-base);
+  --bs-company-switcher-panel-border-color: var(--bs-border-default);
+  --bs-company-switcher-shadow: var(--bs-shadow-md);
+  --bs-company-switcher-max-height: 320px;
+  --bs-company-switcher-text-color: var(--bs-text-default);
+  --bs-company-switcher-muted-color: var(--bs-text-secondary);
+  --bs-company-switcher-header-color: var(--bs-text-muted);
+  --bs-company-switcher-z-index: var(--bs-z-index-popover);
+}
+
+.bs-company-switcher {
+  display: block;
+  width: 100%;
+  --bs-popover-radius: var(--bs-company-switcher-radius);
+  --bs-popover-shadow: var(--bs-company-switcher-shadow);
+  --bs-popover-z-index: var(--bs-company-switcher-z-index);
+  --bs-popover-min-width: 0px;
+  --bs-popover-bg: transparent;
+}
+
+.bs-company-switcher__trigger {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--bs-spacing-150);
+  width: 100%;
+  min-height: 54px;
+  padding: var(--bs-spacing-100) var(--bs-spacing-150);
+  border: 0;
+  border-radius: var(--bs-company-switcher-radius);
+  background: var(--bs-company-switcher-trigger-bg);
+  color: var(--bs-company-switcher-text-color);
+  font-family: var(--bs-typography-font-family-body, Roboto), sans-serif;
+  text-align: left;
+  cursor: pointer;
+}
+
+.bs-company-switcher__trigger:hover {
+  background: var(--bs-company-switcher-trigger-bg-hover);
+}
+
+.bs-company-switcher__trigger:active {
+  background: var(--bs-company-switcher-trigger-bg-pressed);
+}
+
+:host([open]) .bs-company-switcher__trigger,
+.bs-company-switcher__trigger[aria-busy='true'] {
+  background: var(--bs-company-switcher-trigger-bg-open);
+}
+
+.bs-company-switcher__trigger:focus-visible {
+  outline: 2px solid var(--bs-company-switcher-focus-ring);
+  outline-offset: 2px;
+}
+
+.bs-company-switcher__avatar {
+  display: inline-flex;
+  flex: 0 0 auto;
+}
+
+.bs-company-switcher__text {
+  flex: 1 1 0;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.bs-company-switcher__name {
+  font-size: var(--bs-font-size-sm);
+  font-weight: var(--bs-font-weight-medium);
+  line-height: 20px;
+}
+
+.bs-company-switcher__subtitle {
+  color: var(--bs-company-switcher-muted-color);
+  font-size: var(--bs-font-size-xs);
+  line-height: 16px;
+}
+
+.bs-company-switcher__name,
+.bs-company-switcher__subtitle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bs-company-switcher__trail {
+  flex: 0 0 auto;
+  width: 20px;
+  height: 20px;
+  color: var(--bs-icon-default);
+}
+
+.bs-company-switcher__panel {
+  display: block;
+  width: var(--bs-company-switcher-panel-width);
+  max-width: calc(100vw - var(--bs-spacing-200));
+  --bs-card-bg: var(--bs-company-switcher-panel-bg);
+  --bs-card-radius: var(--bs-company-switcher-radius);
+  --bs-card-padding: 0px;
+  --bs-card-border-width: 1px;
+  --bs-card-border-color: var(--bs-company-switcher-panel-border-color);
+  --bs-card-shadow: none;
+}
+
+.bs-company-switcher__search {
+  padding: var(--bs-spacing-150) var(--bs-spacing-150) var(--bs-spacing-100);
+}
+
+.bs-company-switcher__search bs-input {
+  width: 100%;
+}
+
+.bs-company-switcher__list {
+  box-sizing: border-box;
+  max-height: var(--bs-company-switcher-max-height);
+  overflow-y: auto;
+  padding: 0 var(--bs-spacing-100) var(--bs-spacing-100);
+}
+
+.bs-company-switcher__group-header {
+  padding: var(--bs-spacing-100) var(--bs-spacing-100) var(--bs-spacing-50);
+  color: var(--bs-company-switcher-header-color);
+  font-family: var(--bs-typography-font-family-body, Roboto), sans-serif;
+  font-size: var(--bs-font-size-xs);
+  font-weight: var(--bs-font-weight-medium);
+  line-height: 16px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.bs-company-switcher__row {
+  --bs-list-item-min-height: 52px;
+  --bs-list-item-padding-y: var(--bs-spacing-100);
+  --bs-list-item-padding-x: var(--bs-spacing-100);
+  --bs-list-item-gap: var(--bs-spacing-150);
+}
+
+.bs-company-switcher__row--active {
+  --bs-list-item-bg: var(--bs-surface-hover);
+}
+
+.bs-company-switcher__row-name {
+  display: block;
+  color: var(--bs-company-switcher-text-color);
+  font-size: var(--bs-font-size-sm);
+  font-weight: var(--bs-font-weight-medium);
+  line-height: 20px;
+}
+
+.bs-company-switcher__row-sub {
+  display: block;
+  color: var(--bs-company-switcher-muted-color);
+  font-size: var(--bs-font-size-xs);
+  line-height: 16px;
+}
+
+.bs-company-switcher__check {
+  width: 20px;
+  height: 20px;
+  color: var(--bs-icon-action, var(--bs-icon-default));
+}
+
+.bs-company-switcher__empty {
+  --bs-empty-state-padding-y: var(--bs-spacing-400);
+}
+
+.bs-company-switcher__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--bs-spacing-100);
+  padding: var(--bs-spacing-100) var(--bs-spacing-150);
+}
+
+.bs-company-switcher__live {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}