@brandsync/wc 1.17.0 → 1.18.0

package/dist/collection/components/bs-company-switcher/bs-company-switcher.stories.js

@@ -0,0 +1,78 @@
+import { html } from "lit";
+import { componentDescription } from "../../stories-utils";
+/** Sample data (invented for the stories and tests, not real organisations). */
+export const COMPANIES = [
+    { id: 'nordic', name: 'Nordic Sports AS', orgNumber: '923 456 789', country: 'NO' },
+    { id: 'fjord', name: 'Fjord Logistics AS', orgNumber: '918 220 114', country: 'NO' },
+    { id: 'aurora', name: 'Aurora Retail Group', orgNumber: '927 003 551', country: 'NO' },
+    { id: 'baltic', name: 'Baltic Freight AB', orgNumber: '556 781 2340', country: 'SE' },
+    { id: 'kobenhavn', name: 'København Design ApS', orgNumber: '34 12 56 78', country: 'DK' },
+    { id: 'helsinki', name: 'Helsinki Tech Oy', orgNumber: '2847561-3', country: 'FI' },
+];
+export const RECENT_IDS = ['fjord', 'aurora'];
+const meta = {
+    excludeStories: /^[A-Z0-9_]+$/,
+    title: 'Components/bs-company-switcher',
+    parameters: { layout: 'padded', docs: { description: { component: componentDescription('bs-company-switcher') } } },
+    argTypes: {
+        currentId: { control: 'select', options: COMPANIES.map(c => c.id) },
+        switchingId: { control: 'select', options: [undefined, ...COMPANIES.map(c => c.id)] },
+        open: { control: 'boolean' },
+    },
+    args: { currentId: 'nordic', recentIds: RECENT_IDS, switchingId: undefined, open: false },
+    render: args => html `
+    <div style="min-height: 560px">
+      <bs-company-switcher
+        .companies=${COMPANIES}
+        .currentId=${args.currentId}
+        .recentIds=${args.recentIds}
+        .switchingId=${args.switchingId}
+        .open=${args.open}
+      ></bs-company-switcher>
+    </div>
+  `,
+};
+export default meta;
+export const Closed = {};
+export const Open = { args: { open: true } };
+export const Switching = { args: { open: true, switchingId: 'fjord' } };
+export const SwitchingClosed = { args: { open: false, switchingId: 'fjord' } };
+/** Types a query into the search field the way a user would (the component reads `bsInput` from `bs-input`). */
+const typeQuery = (query) => async ({ canvasElement }) => {
+    const cs = canvasElement.querySelector('bs-company-switcher');
+    await new Promise(r => setTimeout(r, 100));
+    const input = cs?.shadowRoot?.querySelector('bs-input');
+    input?.dispatchEvent(new CustomEvent('bsInput', { detail: query, bubbles: true, composed: true }));
+};
+export const Search = { args: { open: true }, play: typeQuery('nord') };
+export const NoResults = { args: { open: true }, play: typeQuery('zzz') };
+export const Interactive = {
+    args: { open: false },
+    render: args => {
+        const wrap = document.createElement('div');
+        wrap.style.minHeight = '560px';
+        const out = document.createElement('output');
+        out.style.cssText = 'display:block;margin-top:8px;font:14px/20px monospace;color:var(--bs-text-secondary)';
+        out.textContent = 'Open the switcher, search, use the arrow keys, press Enter or Esc.';
+        const cs = document.createElement('bs-company-switcher');
+        cs.companies = COMPANIES;
+        cs.currentId = args.currentId;
+        cs.recentIds = args.recentIds;
+        cs.addEventListener('bsCompanySwitch', e => {
+            const c = e.detail;
+            out.textContent = `bsCompanySwitch ${c.name}`;
+            // Simulate a 1.2 s switch: show the spinner, then make it current and close.
+            cs.switchingId = c.id;
+            setTimeout(() => {
+                cs.currentId = c.id;
+                cs.switchingId = undefined;
+                cs.open = false;
+            }, 1200);
+        });
+        for (const n of ['bsManageCompanies', 'bsAddCompanies', 'bsOpenChange']) {
+            cs.addEventListener(n, e => (out.textContent = `${n} ${JSON.stringify(e.detail ?? '')}`));
+        }
+        wrap.append(cs, out);
+        return wrap;
+    },
+};

package/dist/collection/components/bs-composer/bs-composer.js

@@ -234,7 +234,7 @@ export class BsComposer {
         const placeholder = this.placeholder ?? DEFAULT_PLACEHOLDERS[this.variant];
         const disabled = this.state === 'disabled';
         const recording = this.state === 'recording';
-        return (h("div", { key: 'f1ccd8ab2299efcf83dc8f858845e87ba87f9c41', class: `bs-composer bs-composer--${this.state} bs-composer--${this.variant}` }, h("div", { key: '2edd5ab5b6a67d108d2f8067a639e74b6ab4f39f', part: "attachments", class: `bs-composer__attachments-row ${this.hasAttachments ? 'bs-composer__attachments-row--visible' : ''}` }, h("slot", { key: 'a7b2acfea4b2498792749e24aaf9329e521a93df', name: "attachments", onSlotchange: this.onAttachmentsSlotchange })), h("div", { key: '0de284b100f38a60b472eadfd89f06690023a1a1', class: "bs-composer__text-row" }, h("textarea", { key: '0c46b8e4f54234b2df62af566f0b6bf9b1f978d1', ref: el => (this.inputEl = el), part: "input", class: "bs-composer__input", rows: 1, value: this.value, placeholder: placeholder, disabled: disabled, maxLength: this.maxLength, "aria-label": this.ariaLabel, onInput: this.onInput, onKeyDown: this.onInputKeydown })), h("div", { key: 'a3ca22299095e398b6dd7a62c9b6ce93a4d49dab', class: "bs-composer__controls-row" }, !this.hideAttach && (h("button", { key: 'c06cad301027ce2fdef180189945bebd2f876081', type: "button", part: "attach", class: "bs-composer__attach", "aria-label": this.attachLabel, onClick: this.onAttachClick }, h(PlusIcon, { key: 'd863cc1734ca9b67447b2cbbe19a2ba75266d169' }))), recording ? (h("span", { class: "bs-composer__waveform", "aria-hidden": "true" }, WAVEFORM_BAR_HEIGHTS.map(height => (h("span", { class: "bs-composer__waveform-bar", style: { '--bs-composer-bar-height': `${height}px` } }))))) : (h("span", { class: "bs-composer__spacer" })), !this.hideMic && (h("button", { key: 'aadf13bf18c9215045cf7ea326bbc1495ab21288', type: "button", part: "mic", class: `bs-composer__mic ${recording ? 'bs-composer__mic--recording' : ''}`, "aria-label": recording ? this.stopRecordingLabel : this.micLabel, disabled: disabled, onClick: this.onMicClick }, recording ? h(StopIcon, null) : h(MicIcon, null))), h("button", { key: '36ca7d3824349cd65473553e0a20b14c41b74b8b', type: "button", part: "action", class: `bs-composer__action bs-composer__action--${this.state}`, "aria-label": this.actionLabel(), disabled: disabled, "aria-busy": this.loading && this.state === 'idle' ? 'true' : undefined, onClick: this.onActionClick }, this.renderActionIcon()), h("slot", { key: '0965e567d4cb590d7cd072ecf72c10c2c97e1f69', name: "actions-end" }))));
+        return (h("div", { key: 'ec6fd11d15f862e5d5633ee153572831562f8635', class: `bs-composer bs-composer--${this.state} bs-composer--${this.variant}` }, h("div", { key: '4de8e636ad98cf8cd280f35bab8723df0c59bcee', part: "attachments", class: `bs-composer__attachments-row ${this.hasAttachments ? 'bs-composer__attachments-row--visible' : ''}` }, h("slot", { key: '8abb10aca311a2d53d1e2980f7a9985b8467e9af', name: "attachments", onSlotchange: this.onAttachmentsSlotchange })), h("div", { key: '2e8de5850afda9498f9f08bbe5e2e5fbf86005dc', class: "bs-composer__text-row" }, h("textarea", { key: '8f75958b9a04785e32f347d87e5362e0e83a7aec', ref: el => (this.inputEl = el), part: "input", class: "bs-composer__input", rows: 1, value: this.value, placeholder: placeholder, disabled: disabled, maxLength: this.maxLength, "aria-label": this.ariaLabel, onInput: this.onInput, onKeyDown: this.onInputKeydown })), h("div", { key: 'd18ad65d7aefaa3b23ee0be475cdfa97dbcea546', class: "bs-composer__controls-row" }, !this.hideAttach && (h("button", { key: 'e953064c20184d159f0ef7b352bee7b7c1a28d1d', type: "button", part: "attach", class: "bs-composer__attach", "aria-label": this.attachLabel, onClick: this.onAttachClick }, h(PlusIcon, { key: '459ac92ed2c057f2882715f3cadbbf70faf1d180' }))), recording ? (h("span", { class: "bs-composer__waveform", "aria-hidden": "true" }, WAVEFORM_BAR_HEIGHTS.map(height => (h("span", { class: "bs-composer__waveform-bar", style: { '--bs-composer-bar-height': `${height}px` } }))))) : (h("span", { class: "bs-composer__spacer" })), !this.hideMic && (h("button", { key: '4f1039338eb4ae672f32da55fdd67ccb820983be', type: "button", part: "mic", class: `bs-composer__mic ${recording ? 'bs-composer__mic--recording' : ''}`, "aria-label": recording ? this.stopRecordingLabel : this.micLabel, disabled: disabled, onClick: this.onMicClick }, recording ? h(StopIcon, null) : h(MicIcon, null))), h("button", { key: '07b8f71f8d5a9ce1288e5cd42179935389b8aef8', type: "button", part: "action", class: `bs-composer__action bs-composer__action--${this.state}`, "aria-label": this.actionLabel(), disabled: disabled, "aria-busy": this.loading && this.state === 'idle' ? 'true' : undefined, onClick: this.onActionClick }, this.renderActionIcon()), h("slot", { key: '5e14d6db5a96be5123d7374bd66d5d044ffb767d', name: "actions-end" }))));
     }
     static get is() { return "bs-composer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-composer-status-banner/bs-composer-status-banner.js

@@ -113,7 +113,7 @@ export class BsComposerStatusBanner {
         return this.type === 'error' || this.type === 'warning' ? h(WarningIcon, null) : h(ClockIcon, null);
     }
     render() {
-        return (h("div", { key: '9a18ded6392d5374cdf4357650498f1eff8bc896', role: this.roleForType(), "aria-busy": this.loading ? 'true' : undefined, class: `bs-composer-status-banner bs-composer-status-banner--${this.type}` }, h("div", { key: '8acfc215792a889e80d01a08e86a0aa96bfe8967', class: "bs-composer-status-banner__message-group" }, this.showIcon && (h("span", { key: '2a4e0a5fe6b4f2fef30d534eae0c15009f813d33', part: "icon", class: "bs-composer-status-banner__icon" }, h("slot", { key: '5378cfaf8b1fed689eedac4f6a2bf892dda043f8', name: "icon" }, this.renderDefaultIcon()))), h("p", { key: '9fe869051bbf300c12f0ec8006d409abf4bebf56', part: "message", class: "bs-composer-status-banner__message" }, this.message)), this.showButton && (h("button", { key: '6fe2f55c57523ee917ae6d96e2a070f1006f0a44', type: "button", part: "action", class: "bs-composer-status-banner__action", onClick: this.onActionClick }, this.actionLabel)), this.allowClose && (h("button", { key: '18d5ec846134a57c11c46810bb0b35acac0a20b6', type: "button", part: "close", class: "bs-composer-status-banner__close", "aria-label": this.closeLabel, onClick: this.onCloseClick }, h(CloseIcon, { key: 'cbf7993e299eacc8a05efc55cf0dc4539ba9d424' })))));
+        return (h("div", { key: 'e7ee5d0dca888ba5126a292fd7ff9cefbdc47eda', role: this.roleForType(), "aria-busy": this.loading ? 'true' : undefined, class: `bs-composer-status-banner bs-composer-status-banner--${this.type}` }, h("div", { key: 'c44a8f911942a310b8cc706a10a97180f75013ff', class: "bs-composer-status-banner__message-group" }, this.showIcon && (h("span", { key: '7787871c8f6885068739d9fffd8d589b6babbd43', part: "icon", class: "bs-composer-status-banner__icon" }, h("slot", { key: 'a8dd0077f51e4a8b872ab6778d0387999022285b', name: "icon" }, this.renderDefaultIcon()))), h("p", { key: '398fb7946e36d45bd8ade95154d9d686fc5de6e1', part: "message", class: "bs-composer-status-banner__message" }, this.message)), this.showButton && (h("button", { key: '18874261ba3638533d3fdb876d19303d79c75259', type: "button", part: "action", class: "bs-composer-status-banner__action", onClick: this.onActionClick }, this.actionLabel)), this.allowClose && (h("button", { key: '187e50bbe911683937a7895cfe862028cc9f775a', type: "button", part: "close", class: "bs-composer-status-banner__close", "aria-label": this.closeLabel, onClick: this.onCloseClick }, h(CloseIcon, { key: 'c9dac11a2af23ba04d7c6836cbda7adbace51d8d' })))));
     }
     static get is() { return "bs-composer-status-banner"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-container/bs-container.js

@@ -21,7 +21,7 @@ export class BsContainer {
     padding = '300';
     render() {
         const pad = SPACING_TOKENS.includes(String(this.padding)) ? String(this.padding) : '300';
-        return (h(Host, { key: 'af5052dbda078e66b8afcf84e842f124748353b9', style: { '--bs-container-padding-token': `var(--bs-spacing-${pad})` } }, h("slot", { key: '2493e7614d7fcaf07b24e350e68a65b06fd77640' })));
+        return (h(Host, { key: 'c72bb071abd58c825dcd4b87351362de82a402fa', style: { '--bs-container-padding-token': `var(--bs-spacing-${pad})` } }, h("slot", { key: '341e67abd2a13b47d9d852696f212847c2624b38' })));
     }
     static get is() { return "bs-container"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-data-table/bs-data-table.js

@@ -87,11 +87,11 @@ export class BsDataTable {
         }
     }
     render() {
-        return (h("table", { key: '72d4058323ac137aa589476e5b89ed47bd8b996e', part: "table", class: "bs-data-table" }, h("thead", { key: '65e27a1aba0b9eb6892df5b0581672c9fb18ce13', part: "head" }, h("tr", { key: '690d1fab0effa5b0e9e44160ac91d77ab1290079' }, this.selectable && (h("th", { key: 'cf96e314093743b5e6341cf2fce3e0ac6b5e99ef', class: "bs-data-table__select-col" }, this.rows.length > 0 && (h("input", { key: 'fe6fe4d41420f9a37f11337044173ce5b13340d4', type: "checkbox", "aria-label": this.selectAllLabel, checked: this.selectedIds.size > 0 && this.selectedIds.size === this.rows.length, indeterminate: this.selectedIds.size > 0 && this.selectedIds.size < this.rows.length, onChange: this.onSelectAllChange })))), this.columns.map(column => {
+        return (h("table", { key: 'd6b278e5252570f3b97ef3fdd53b132974041e6c', part: "table", class: "bs-data-table" }, h("thead", { key: '16280faa094841550a637466fa37ec2df6950e4b', part: "head" }, h("tr", { key: 'e78510a9b1b7966257cb626218aaf9f51bde402e' }, this.selectable && (h("th", { key: '1a79de8886d8d394fc0b06f283258db94e0f3b1f', class: "bs-data-table__select-col" }, this.rows.length > 0 && (h("input", { key: 'c34bd5b47dcea30418fce8674a2aefff7f8bf601', type: "checkbox", "aria-label": this.selectAllLabel, checked: this.selectedIds.size > 0 && this.selectedIds.size === this.rows.length, indeterminate: this.selectedIds.size > 0 && this.selectedIds.size < this.rows.length, onChange: this.onSelectAllChange })))), this.columns.map(column => {
             const isSorted = this.sortColumn === column.key;
             const ariaSort = column.sortable ? (isSorted ? (this.sortDirection === 'asc' ? 'ascending' : 'descending') : 'none') : undefined;
             return (h("th", { part: "header-cell", class: "bs-data-table__header-cell", "aria-sort": ariaSort }, column.sortable ? (h("button", { type: "button", class: "bs-data-table__sort-button", onClick: () => this.onHeaderClick(column) }, column.label, isSorted && h("span", { class: "bs-data-table__sort-indicator" }, this.sortDirection === 'asc' ? ' ▲' : ' ▼'))) : (column.label)));
-        }))), h("tbody", { key: '34e3bb93c663862d1d8b29956c22392b3c2400ac', part: "body" }, this.rows.map(row => (h("tr", { part: "row", class: "bs-data-table__row" }, this.selectable && (h("td", { class: "bs-data-table__select-col" }, h("input", { type: "checkbox", checked: this.selectedIds.has(row.id), onChange: ev => this.onRowCheckboxChange(row, ev) }))), this.columns.map(column => this.cellRenderer ? (
+        }))), h("tbody", { key: '80266f8d66ffdf7132bf2f331568db34ed53ed28', part: "body" }, this.rows.map(row => (h("tr", { part: "row", class: "bs-data-table__row" }, this.selectable && (h("td", { class: "bs-data-table__select-col" }, h("input", { type: "checkbox", checked: this.selectedIds.has(row.id), onChange: ev => this.onRowCheckboxChange(row, ev) }))), this.columns.map(column => this.cellRenderer ? (
         // cellRenderer is a developer-supplied, trusted function (JS-property-only, never
         // derived from untrusted input) -- its HTML output is intentionally not escaped,
         // same trust model as React's dangerouslySetInnerHTML.

package/dist/collection/components/bs-datepicker/bs-datepicker.js

@@ -340,7 +340,7 @@ export class BsDatepicker {
             : this.defaultTabbable(days);
         const isInRange = (iso) => !!selectedStart && !!previewEnd && iso > selectedStart && iso < previewEnd;
         const weekdays = this.weekdays();
-        return (h("bs-card", { key: '280abccf2d86d04f392f4daeb9811bf34d71dc6b', part: "container", class: "bs-datepicker", surface: "raised" }, h("div", { key: '624706b13929083f05bab4210a5c8444240f8a53', class: "bs-datepicker__body" }, this.renderHeader(), h("div", { key: '69d8f66f154e0e194b77b091bede097407c43902', part: "nav", class: "bs-datepicker__nav" }, h("button", { key: '089809f514e4513624749748d639ef6da997618b', part: "prev", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.previousLabel, onClick: () => this.moveView(-1) }, h("svg", { key: 'd78f4940665d866752772f69de2e8058390bf6e5', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: 'f34d431a9f77b036fe4417c033f197c72780c1bf', d: "M15 18L9 12L15 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("div", { key: '36a37548a0bc04db3416f5e206c0990f0d1189eb', part: "title", class: "bs-datepicker__title", "aria-live": "polite" }, this.titleText()), h("button", { key: '3bf5616d93ea0d5f8968691692b2b64ce6334d0b', part: "next", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.nextLabel, onClick: () => this.moveView(1) }, h("svg", { key: '5f9aac5a4e1658051908f5bad88b6c196f6dfea7', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: '0515eaeb3cd01b48633675668292cb01634c134a', d: "M9 18L15 12L9 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: '2decbaa1fc82ee83c58ae19cd19bd53c51aabe0d', part: "grid", class: "bs-datepicker__grid", role: "grid", "aria-label": this.titleText() }, h("div", { key: '4720f7dbda3ca990885a56d00860eaf4ab7689e8', class: "bs-datepicker__row", role: "row" }, weekdays.map(w => (h("div", { part: "weekday", class: "bs-datepicker__weekday", role: "columnheader" }, w)))), Array.from({ length: 6 }, (_, r) => {
+        return (h("bs-card", { key: 'cdb34fb56c5dd485e68fdbaf846c13ecc0547117', part: "container", class: "bs-datepicker", surface: "raised" }, h("div", { key: '348836d221ea9d88f81d74c756f6e33749185e77', class: "bs-datepicker__body" }, this.renderHeader(), h("div", { key: '19192cd83a674a876ddebb3048cf61392f5ce1b4', part: "nav", class: "bs-datepicker__nav" }, h("button", { key: '936dd7846972754b3e3e12e0b5d1ebf459f6626b', part: "prev", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.previousLabel, onClick: () => this.moveView(-1) }, h("svg", { key: '8adff95c2ac4160773ba27b2bba2690376bf7b6e', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: 'e07e13f74b49ef8676ef9b2b61648f2fbcd7ff26', d: "M15 18L9 12L15 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("div", { key: '60e2dccce60ce780002b5a37b7bce2cb77a7ded2', part: "title", class: "bs-datepicker__title", "aria-live": "polite" }, this.titleText()), h("button", { key: '4ea132ee9b1d1b7df1dd3595dc52e9cd977dc9d4', part: "next", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.nextLabel, onClick: () => this.moveView(1) }, h("svg", { key: 'e648752590a0483c152a06ff2ebe1a4c7f459fd1', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: '61f9ebdc93a4636284fe3215f0ff6699ef7bb8de', d: "M9 18L15 12L9 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: 'd94bd61c202b575b3ae4b8312224f302cf13330e', part: "grid", class: "bs-datepicker__grid", role: "grid", "aria-label": this.titleText() }, h("div", { key: 'ac7713f2ebdc1d429641d14856ed597866fb5a07', class: "bs-datepicker__row", role: "row" }, weekdays.map(w => (h("div", { part: "weekday", class: "bs-datepicker__weekday", role: "columnheader" }, w)))), Array.from({ length: 6 }, (_, r) => {
             const row = days.slice(r * 7, r * 7 + 7);
             return (h("div", { class: "bs-datepicker__row", role: "row" }, row.map((d, c) => {
                 const iso = toIso(d);

package/dist/collection/components/bs-divider/bs-divider.js

@@ -28,7 +28,7 @@ export class BsDivider {
         const a11y = this.decorative
             ? { role: 'none', 'aria-hidden': 'true' }
             : { role: 'separator', 'aria-orientation': orientation };
-        return (h(Host, { key: '0146af9f63ddd328e30262cf9767222445da478b', ...a11y }, h("div", { key: 'a621923c43fd326fe5ee6e7223bd5e7103b01e9e', class: "line", part: "line" })));
+        return (h(Host, { key: '858582c09f3f2712a3ee9d51a80a1f53b2a29dfb', ...a11y }, h("div", { key: '184d290fbfdabab256850af57792e7d6c5ebf563', class: "line", part: "line" })));
     }
     static get is() { return "bs-divider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -61,7 +61,7 @@ export class BsEmptyState {
     render() {
         const level = Math.min(6, Math.max(2, Math.round(Number(this.headingLevel)) || 3));
         const Heading = `h${level}`;
-        return (h("div", { key: '0f841411b4b0f38d29487f3f52f79cb7a281f32a', part: "container", class: "bs-empty-state" }, h("bs-icon-tile", { key: '69c1e66424d966aed5e29582c2947bbfe0725cde', part: "icon", size: "lg", intent: this.intent }, this.hasIcon && h("slot", { key: '3243c54d7760d27cee1463ffe1acd1d886929a77', name: "icon" })), this.heading && (h(Heading, { key: '06075e06b4917ba28276c8b4c77e7dcc000c6f23', part: "heading", class: "bs-empty-state__heading" }, this.heading)), (this.description || this.hasDescriptionSlot) && (h("p", { key: '00dab545646803b8ed2f9723e6aa80f620f085a1', part: "description", class: "bs-empty-state__description" }, this.hasDescriptionSlot ? h("slot", null) : this.description)), this.hasAction && (h("div", { key: '1a984f1efd3bfbe6e5fd981e2f367ddd25e6f3c7', part: "action", class: "bs-empty-state__action" }, h("slot", { key: 'ea9b962f5652238d74625a11627992f0f4fb34bf', name: "action" })))));
+        return (h("div", { key: 'dabc994fcb254cb35958f8bde54d7935bb6ff70a', part: "container", class: "bs-empty-state" }, h("bs-icon-tile", { key: 'efec1cc06eb3447fbd81b12634c12ee96f9fd0d2', part: "icon", size: "lg", intent: this.intent }, this.hasIcon && h("slot", { key: 'd8a7482e2b32f6361b82232652edcc1aadb74a5b', name: "icon" })), this.heading && (h(Heading, { key: '6625baa3d00097951042608aeb888f7c1665e987', part: "heading", class: "bs-empty-state__heading" }, this.heading)), (this.description || this.hasDescriptionSlot) && (h("p", { key: 'c367d9d3aa154e8413c04ca47de7cd9f5eed6883', part: "description", class: "bs-empty-state__description" }, this.hasDescriptionSlot ? h("slot", null) : this.description)), this.hasAction && (h("div", { key: '7b9b78de4e71e6d07d94d4595290492542d7bf62', part: "action", class: "bs-empty-state__action" }, h("slot", { key: '7b57218ca03edfd6f972a2bb6ce458db8dc33d9a', name: "action" })))));
     }
     static get is() { return "bs-empty-state"; }
     static get encapsulation() { return "shadow"; }

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: '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)))));
+        return (h("bs-card", { key: '4214c79438721c66089be3a4ae64fcd6bdcbdea6', part: "container", class: "bs-error-page", surface: "base" }, h("div", { key: '39b2a7292d488442fc2465635a5be9dd704dc42e', class: "bs-error-page__body" }, h("div", { key: 'beb353eefb6b77b03fe7d1ea3894b6a625eebe06', class: "bs-error-page__art-group" }, h("bs-icon-tile", { key: '516a9c87ddb3ac5140d2880d4638eb5eca01db73', part: "art", class: `bs-error-page__art ${d.info ? 'bs-error-page__art--info' : ''}`, intent: d.intent, size: "lg" }, h("slot", { key: '3c3029ce78413f49c4bb839260c432848329b428', name: "icon" }, d.glyph())), code && (h("span", { key: 'fc4058b507c0b60ca417f09f7838664716b17fc3', part: "code", class: "bs-error-page__code" }, code))), h(`h${level}`, { part: 'heading', class: { 'bs-error-page__heading': true } }, heading), description && (h("p", { key: 'b914f77506217b401e26694205104d623596d270', part: "description", class: "bs-error-page__description" }, description)), (primary || secondary) && (h("div", { key: 'b6dc2e92b34960f754a54b31a659337135e63607', part: "actions", class: "bs-error-page__actions" }, primary && (h("bs-button", { key: 'e4f85bf6e86a80fbf1bd09fc77e16768c435a97b', part: "primary", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)), secondary && (h("bs-button", { key: 'a1469448cfbf1edb0bb8fe1d613101782dc87145', part: "secondary", variant: "outlined", onClick: () => this.bsSecondary.emit() }, secondary)))), this.reference && (h("p", { key: 'e8f32f0cc84051d02418bb48bc6116675ec55097', 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: '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 })));
+        return (h("div", { key: '5312a866a1db63fd378f265fc200a509bfd50ce1', 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: '7276ccfa10a086d933b5563a208393a75e0dd821', part: "icon", class: "bs-file-upload__icon" }, h("slot", { key: 'e828eaa70303c82cb2bea5e647807079946b62e7', name: "icon" }, h(UploadIcon, { key: 'bd6ee5b8b20996ee68f972cb79db7c47f645c4d3' }))), h("div", { key: '784440974685713b31ba97642b931b99e64433a3', class: "bs-file-upload__content" }, h("div", { key: 'c7568214218e02ecb794f3429b843462f88bf216', class: "bs-file-upload__text" }, this.heading && (h("span", { key: '4872f617be4f30b9ab98aeca2dca7012d9391905', part: "heading", class: "bs-file-upload__heading" }, this.heading)), this.description && (h("span", { key: 'd8f446f1f8690ec773b094aeeb66af49ec1de291', part: "description", id: "description", class: "bs-file-upload__description" }, this.description))), h("bs-button", { key: 'bb0634e3e0dcb4a4ef59fa7c5daeaacbff5bceda', part: "browse", variant: "neutral", size: "sm", disabled: this.disabled, onClick: this.onBrowse }, this.buttonLabel)), h("input", { key: 'f55602446ec222ca46b7dab95aaff26d6d5b1632', 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: '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))));
+        return (h("div", { key: '26933845798c1cee2739c2a5a3d402175244717b', part: "item", class: `bs-file-upload-item bs-file-upload-item--${this.state}` }, h("div", { key: 'b7312bfd0a7bcbeac8e098be4cb6d565283f2e0f', part: "thumbnail", class: "bs-file-upload-item__thumbnail" }, h("slot", { key: '69350d5224f540e0f4d5033e3ac92ccff397b565', name: "thumbnail" }, this.thumbnailSrc ? (h("img", { class: "bs-file-upload-item__image", src: this.thumbnailSrc, alt: this.thumbnailAlt })) : (h(ImageIcon, null)))), h("div", { key: 'fbe429e0dd56af6fe5d955ce384a335c9ce3843a', class: "bs-file-upload-item__content" }, h("div", { key: 'b45f5b5500d760dcfb0d8fe3e87638db9325ae99', class: "bs-file-upload-item__meta" }, h("span", { key: '7e5a8cd3ccca37c88182d0e430841f36f29f56e7', part: "name", class: "bs-file-upload-item__name" }, this.fileName), this.fileSize && (h("span", { key: '114e9167c4542c9e071ebb21ee77d25d5c9221b4', part: "size", class: "bs-file-upload-item__size" }, this.fileSize))), this.renderStatus()), h("bs-icon-button", { key: 'f6a9a212a6436ac50eaab6b0224b58245171a7de', 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.js

@@ -342,10 +342,10 @@ export class BsGlobalSearch {
         const listId = `${this.id}-listbox`;
         const isList = this.status === 'default' || this.status === 'results';
         const showFooter = this.showFooter && isList;
-        return (h("div", { key: 'dd4477e08b51d52d5309150c4e95f0e560411a05', class: "bs-global-search" }, h("div", { key: 'a37363a1076c4fab1676d4801a0f9751528b42d0', part: "field", class: "bs-global-search__field", role: "combobox", "aria-label": this.label || this.placeholder, "aria-expanded": String(this.open && showList), "aria-haspopup": "listbox", "aria-controls": this.open && showList ? listId : undefined, "aria-activedescendant": this.open && this.activeId ? this.activeId : undefined, onKeyDown: this.onKeyDown, onFocusin: () => this.setOpen(true), onClick: () => this.setOpen(true) }, h("bs-input", { key: 'c0a4d130a36937c90c95659b439eef20655a6c99', ref: el => (this.inputEl = el), type: "search", value: this.value, placeholder: this.placeholder, disabled: this.disabled, onBsInput: this.onInput })), this.open && (h("div", { key: 'f85e3f63bf82a5de2648e8fa60f4fd4df288ec3b', part: "panel", class: "bs-global-search__panel", onMouseDown: (ev) => ev.preventDefault(), onMouseOver: this.onPanelMouseOver }, isList && showList && (h("div", { key: 'cc926315b2b1d2ad62026531a4174cb84df713a8', id: listId, class: "bs-global-search__list", role: "listbox", "aria-label": this.listLabel }, sections.map(s => {
+        return (h("div", { key: '48912c3c2e6fdfefa05d234fa037e4b47e36cbd9', class: "bs-global-search" }, h("div", { key: 'aeb8a5d41463b5df24502aecb85290f2535184d6', part: "field", class: "bs-global-search__field", role: "combobox", "aria-label": this.label || this.placeholder, "aria-expanded": String(this.open && showList), "aria-haspopup": "listbox", "aria-controls": this.open && showList ? listId : undefined, "aria-activedescendant": this.open && this.activeId ? this.activeId : undefined, onKeyDown: this.onKeyDown, onFocusin: () => this.setOpen(true), onClick: () => this.setOpen(true) }, h("bs-input", { key: '0aec5505a09ca9fa08e152983b17e3a35619e5ce', ref: el => (this.inputEl = el), type: "search", value: this.value, placeholder: this.placeholder, disabled: this.disabled, onBsInput: this.onInput })), this.open && (h("div", { key: 'c9b1589c7602b0522a5a33d895e50e2f57ae7e66', part: "panel", class: "bs-global-search__panel", onMouseDown: (ev) => ev.preventDefault(), onMouseOver: this.onPanelMouseOver }, isList && showList && (h("div", { key: 'aa49f77c49ea3aa5337a01aa8cf2e760ac8f6125', id: listId, class: "bs-global-search__list", role: "listbox", "aria-label": this.listLabel }, sections.map(s => {
             const hid = `${this.id}-h-${s}`;
             return (h("div", { part: "section", class: "bs-global-search__section", role: "group", "aria-labelledby": hid }, h("div", { part: "section-header", id: hid, class: "bs-global-search__section-header" }, this.sectionLabel(s)), h("slot", { name: s })));
-        }))), this.status === 'empty' && this.renderStateBlock('empty'), this.status === 'error' && this.renderStateBlock('error'), showFooter && this.renderFooter())), h("span", { key: '4bf9f7fc2a00853aee7b48328819ef0a9181d668', class: "bs-global-search__live", "aria-live": "polite" }, this.announcement())));
+        }))), this.status === 'empty' && this.renderStateBlock('empty'), this.status === 'error' && this.renderStateBlock('error'), showFooter && this.renderFooter())), h("span", { key: '591953d910a7986705dde045c325c3043df1387b', class: "bs-global-search__live", "aria-live": "polite" }, this.announcement())));
     }
     static get is() { return "bs-global-search"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-grid/bs-grid.js

@@ -59,12 +59,12 @@ export class BsGrid {
         const row = this.rowGap ? this.token(this.rowGap) : gapValue;
         const col = this.columnGap ? this.token(this.columnGap) : gapValue;
         const align = ALIGNS.includes(this.align) ? this.align : 'stretch';
-        return (h("div", { key: '0799adbc2484f270db8ca5c2cadc1a0ec55ecbc0', class: "bs-grid", part: "container", style: {
+        return (h("div", { key: 'd504eaf0d6db8c106094f3efb60600b65774ea4d', class: "bs-grid", part: "container", style: {
                 gridTemplateColumns: this.template(),
                 rowGap: `var(--bs-grid-row-gap, ${row})`,
                 columnGap: `var(--bs-grid-column-gap, ${col})`,
                 alignItems: align,
-            } }, h("slot", { key: '90d4940c5b1870df9eaae616f8fbe3738f025a3b' })));
+            } }, h("slot", { key: 'd127b6a767777b1d2cc3fe981e1846e5a8726a60' })));
     }
     static get is() { return "bs-grid"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-icon-tile/bs-icon-tile.js

@@ -24,6 +24,7 @@ import { h } from "@stencil/core";
  * @part text - The wrapper around the `text` slot (only shown when something is slotted).
  */
 export class BsIconTile {
+    el;
     /** Tile size: `sm` 24px, `md` 32px, `lg` 48px. */
     size = 'sm';
     /** Colour and default glyph. `brand` uses the brand colours; `information` the info palette. */
@@ -35,11 +36,18 @@ export class BsIconTile {
     hasCustomIcon = false;
     /** True while something is assigned to the `text` slot, so the text wrapper (and its gap) only exists then. */
     hasText = false;
+    /** `slotchange` alone is not enough: when the icon is already a child at first render (or is added in the same
+     * pass that upgrades this element) the event can fire before the handler is attached, leaving the default
+     * glyph drawn next to the slotted icon. Read the light DOM once up front. */
+    componentWillLoad() {
+        this.hasCustomIcon = Array.from(this.el.childNodes).some(n => (n.nodeType === Node.ELEMENT_NODE && !n.hasAttribute('slot')) || (n.nodeType === Node.TEXT_NODE && !!n.textContent?.trim()));
+        this.hasText = Array.from(this.el.children).some(c => c.getAttribute('slot') === 'text');
+    }
     render() {
         const labelled = !!this.label;
         return [
-            h("div", { key: '3fc3a9874dbadcf9ac6fa3df92f7c5cb48c4cc7b', part: "container", class: "bs-icon-tile", role: labelled ? 'img' : undefined, "aria-label": labelled ? this.label : undefined, "aria-hidden": labelled ? undefined : 'true' }, h("span", { key: 'e27206a1f0ef5a05183863c952c631614e44b591', part: "icon", class: "bs-icon-tile__icon" }, h("slot", { key: '31c4cd875c08f01b04d1fbc8b27dbb471c383129', onSlotchange: (ev) => (this.hasCustomIcon = hasContent(ev.target)) }), !this.hasCustomIcon && (GLYPHS[this.intent] ?? GLYPHS.default))),
-            h("span", { key: 'fcc4dbeff34fa2de817619963ec0ec2597d04db3', part: "text", class: { 'bs-icon-tile__text': true, 'bs-icon-tile__text--visible': this.hasText } }, h("slot", { key: '24509194d7cb291ee7930039f42dcea780f0bcf3', name: "text", onSlotchange: (ev) => (this.hasText = ev.target.assignedNodes().length > 0) })),
+            h("div", { key: 'ea92c7e93e3283dccf7feb0afcc87947eb9f3087', part: "container", class: "bs-icon-tile", role: labelled ? 'img' : undefined, "aria-label": labelled ? this.label : undefined, "aria-hidden": labelled ? undefined : 'true' }, h("span", { key: '50ba78a85b831869ea60882b89739cc0ef36a6b4', part: "icon", class: "bs-icon-tile__icon" }, h("slot", { key: 'ab395f4bfc9a40be9ac74f05ebf227a241cdfca8', onSlotchange: (ev) => (this.hasCustomIcon = hasContent(ev.target)) }), !this.hasCustomIcon && (GLYPHS[this.intent] ?? GLYPHS.default))),
+            h("span", { key: '07ad1aa22ba646f82b8eb2782ddda0c816dc47a5', part: "text", class: { 'bs-icon-tile__text': true, 'bs-icon-tile__text--visible': this.hasText } }, h("slot", { key: 'f4209dee495bf82b95c95fcd754bdf8305d5b02f', name: "text", onSlotchange: (ev) => (this.hasText = ev.target.assignedNodes().length > 0) })),
         ];
     }
     static get is() { return "bs-icon-tile"; }
@@ -135,6 +143,7 @@ export class BsIconTile {
             "hasText": {}
         };
     }
+    static get elementRef() { return "el"; }
 }
 function hasContent(slot) {
     return slot.assignedNodes().some(n => n.nodeType === Node.ELEMENT_NODE || (n.nodeType === Node.TEXT_NODE && !!n.textContent?.trim()));

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

@@ -397,10 +397,10 @@ export class BsInput {
         return (h("div", { part: "field", class: `bs-input__field bs-input__field--pin ${errorClass} ${disabledClass}` }, Array.from({ length: this.length }).map((_, i) => (h("input", { id: i === 0 ? 'control' : undefined, ref: el => (this.pinInputs[i] = el), part: "control", class: "bs-input__pin-cell", type: "text", inputMode: "numeric", maxLength: 1, value: this.value[i] ?? '', disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, onInput: this.onPinInput(i), onKeyDown: this.onPinKeydown(i) })))));
     }
     render() {
-        return (h("div", { key: '99df53d78ddc715d336738a27efeb3d64140a9c7', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
+        return (h("div", { key: '3c0ea65d5b8852b14e1295d6a6a33aef95d02d01', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
         // "control" is a fixed id, not a generated one -- safe because Shadow DOM scopes ids
         // to this instance's own shadow root, so it can never collide with another bs-input.
-        h("label", { key: '27f894fedaf23ded0432d9f26e80a9dd4d2bbb8e', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (h("span", { key: '4260924b6128864a17ae809e5e54bc3f5aff5b64', part: "required", class: "bs-input__required", "aria-hidden": "true" }, "*")))), this.type === 'pin' ? this.renderPinField() : this.type === 'initials' ? this.renderInitialsField() : this.renderField(), this.error ? (h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, h("svg", { part: "error-icon", class: "bs-input__error-icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M8 5V8.5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }), h("circle", { cx: "8", cy: "11", r: "0.75", fill: "currentColor" })), this.error)) : this.description ? (h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
+        h("label", { key: '13e99193d9906c7c7534df1c9bd6395f1a758524', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (h("span", { key: 'ac14aa6322a8ce40624cdc392dde96b7bad298a8', part: "required", class: "bs-input__required", "aria-hidden": "true" }, "*")))), this.type === 'pin' ? this.renderPinField() : this.type === 'initials' ? this.renderInitialsField() : this.renderField(), this.error ? (h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, h("svg", { part: "error-icon", class: "bs-input__error-icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M8 5V8.5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }), h("circle", { cx: "8", cy: "11", r: "0.75", fill: "currentColor" })), this.error)) : this.description ? (h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
     }
     static get is() { return "bs-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-key/bs-key.js

@@ -38,7 +38,7 @@ export class BsKey {
         this.hasIcon = ev.target.assignedNodes().length > 0;
     };
     render() {
-        return (h("kbd", { key: 'ebd13e9ce82e11cb2868adaf1d9dfc38a261bf26', part: "container", class: "bs-key" }, !this.hasIcon && (h("span", { key: 'abb27af837ff8a82bc976841a04a2ef3d0386cdd', part: "label", class: "bs-key__label" }, h("slot", { key: 'e28affc720c80cf40edba55229e7df67e79a579b' }, this.label))), h("span", { key: 'c88fb0200102cfcd6e3b3b84218de6fcfddf06b8', part: "icon", class: { 'bs-key__icon': true, 'bs-key__icon--hidden': !this.hasIcon } }, h("slot", { key: '4043e70a46538183913b6275ba569fb75c078c27', name: "icon", onSlotchange: this.onIconSlotChange }))));
+        return (h("kbd", { key: '45bd298f9fcf91ac4a6fd1c10c879a9373c53fae', part: "container", class: "bs-key" }, !this.hasIcon && (h("span", { key: '019bb8652eef6eafbe3d11ac0a179aa06a853e99', part: "label", class: "bs-key__label" }, h("slot", { key: '9b4e0c377ad3a6ab51125894aca36164e3f4546c' }, this.label))), h("span", { key: '2d8618a0a71f799d6b4c3c8ecd3364d2a744879d', part: "icon", class: { 'bs-key__icon': true, 'bs-key__icon--hidden': !this.hasIcon } }, h("slot", { key: '9c7bf13a4ddf4ad57fcee6c81653783eb0bde3c4', name: "icon", onSlotchange: this.onIconSlotChange }))));
     }
     static get is() { return "bs-key"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-key-caps/bs-key-caps.js

@@ -41,7 +41,7 @@ export class BsKeyCaps {
     render() {
         const keys = this.keyList();
         const name = this.label ?? (keys.length ? keys.join(' plus ') : undefined);
-        return (h("span", { key: 'd2396eec919fbad20d6152faf4786d1bcfac9042', part: "container", class: "bs-key-caps", role: "group", "aria-label": name, "aria-disabled": this.disabled ? 'true' : undefined }, keys.map(k => (h("bs-key", { label: k }))), h("slot", { key: '9f4facb9f8d6ce6079facc16d260a41f48e54470' })));
+        return (h("span", { key: 'a5a71f50df215bafb5225553a3822048470b0df6', part: "container", class: "bs-key-caps", role: "group", "aria-label": name, "aria-disabled": this.disabled ? 'true' : undefined }, keys.map(k => (h("bs-key", { label: k }))), h("slot", { key: '3efb98fca94e15103658c10444000b60665ddd31' })));
     }
     static get is() { return "bs-key-caps"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-keyboard-shortcuts/bs-keyboard-shortcuts.js

@@ -129,10 +129,10 @@ export class BsKeyboardShortcuts {
         const headId = `${this.id}-heading`;
         const noResults = count === 0 && (this.query ?? '').trim() !== '';
         let gi = 0;
-        return (h("bs-card", { key: '602e1b2fbeb09dc848435562c3188f784a96a26f', part: "container", class: "bs-keyboard-shortcuts", surface: "base", role: "region", "aria-labelledby": headId, onKeyDown: this.onKeyDown }, h("div", { key: '1ad1ad5d14769b755362b1c965390d929d190a81', class: "bs-keyboard-shortcuts__body" }, h("div", { key: '86e635b3e14a47fa5df69983f9fab132ab8b334c', part: "head", class: "bs-keyboard-shortcuts__head" }, h("svg", { key: '1b7c59483a38971e214126b309e2f62c7f69457c', class: "bs-keyboard-shortcuts__icon", viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", "stroke-width": "1.8", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("rect", { key: 'e70a9a55b1fa027dbaa50870dd79d2c2b4805efd', x: "2", y: "5", width: "20", height: "14", rx: "2" }), h("path", { key: '17c1bf9e1f044b802f1538a70da58334e1b328c4', d: "M6 9h.01M10 9h.01M14 9h.01M18 9h.01M6 13h.01M18 13h.01M9 15.5h6" })), h("h4", { key: '06466a27347a74bb61ab23f0a57ec19b8fd3feb7', part: "heading", id: headId, class: "bs-keyboard-shortcuts__heading" }, h("slot", { key: '307d0611ceffa704345f1a138796e76df9101162', name: "heading" }, this.heading)), h("bs-icon-button", { key: 'a9126801a045b8e95301a2fd6cfcbae20e9ef29b', part: "close", variant: "subtle", size: "md", "aria-label": this.closeLabel, onClick: () => this.bsClose.emit() }, h("svg", { key: '472f6467736f6baadd13ed4f723107be92dc9147', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "aria-hidden": "true" }, h("path", { key: 'b20530074ac46a1764f613f02c9aca7be9771c40', d: "M6 6l12 12M18 6 6 18" })))), h("bs-input", { key: '94eb5e7ac066359e150681a0b9016da7e98d45b0', part: "search", type: "search", placeholder: this.searchPlaceholder, value: this.query, onBsInput: this.onInput }), this.showSingleKeySwitch && (h("div", { key: 'b51f32af80233153e3f2e957e364e82e8458b0d5', part: "switch", class: "bs-keyboard-shortcuts__switch" }, h("div", { key: '5c043a1b80b20fc9b636b293a3e0782807d3fa0c', class: "bs-keyboard-shortcuts__switch-text" }, h("span", { key: 'bcc7015e1084d3479ff257fdc50e12b813d90bbd', class: "bs-keyboard-shortcuts__switch-title" }, this.singleKeyLabel), h("span", { key: '43b88ef5e2368da7f1304c6c6c05c125a87132f8', class: "bs-keyboard-shortcuts__switch-caption" }, this.singleKeyDescription)), h("bs-switch", { key: 'b7d95ac144d87947f64199ea9cf83eb108a2f00c', ariaLabel: this.singleKeyLabel, checked: this.singleKeyEnabled, onBsChange: this.onSwitch }))), h("span", { key: 'd6d155b36ca413bca0978addbe1a82370d71c645', class: "bs-keyboard-shortcuts__live", "aria-live": "polite" }, `${count} shortcut${count === 1 ? '' : 's'}`), noResults ? (h("p", { part: "empty", class: "bs-keyboard-shortcuts__empty", role: "status" }, this.noResultsText)) : (h("div", { part: "groups", class: "bs-keyboard-shortcuts__groups" }, cols.map(col => (h("div", { class: "bs-keyboard-shortcuts__column" }, col.map(g => {
+        return (h("bs-card", { key: '7e825a3d2c214a2228c8b302bc6530ca23427b2f', part: "container", class: "bs-keyboard-shortcuts", surface: "base", role: "region", "aria-labelledby": headId, onKeyDown: this.onKeyDown }, h("div", { key: '8595c3352463214acefb820a23a9adbdd66e6b76', class: "bs-keyboard-shortcuts__body" }, h("div", { key: 'bbdb0c462e6958d6fbeca96bd5ffb5dc99bdaf19', part: "head", class: "bs-keyboard-shortcuts__head" }, h("svg", { key: '95641e98b3795b85caa6e70ebd9bd2deeecdc2aa', class: "bs-keyboard-shortcuts__icon", viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", "stroke-width": "1.8", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("rect", { key: 'b1160b8146645716ea1b675c480f42675a4d6f29', x: "2", y: "5", width: "20", height: "14", rx: "2" }), h("path", { key: '18f2516e9113b2c335587bd3d17c49099496f1ec', d: "M6 9h.01M10 9h.01M14 9h.01M18 9h.01M6 13h.01M18 13h.01M9 15.5h6" })), h("h4", { key: '299d3fa12acc958389b7cd6b7ec9c2cefe12ed43', part: "heading", id: headId, class: "bs-keyboard-shortcuts__heading" }, h("slot", { key: '80365f19a624d950cfa678b1d2cb7a2eb7dbeb33', name: "heading" }, this.heading)), h("bs-icon-button", { key: '2e43986aac1914ab56527ac09e08889fbe6ca0ef', part: "close", variant: "subtle", size: "md", "aria-label": this.closeLabel, onClick: () => this.bsClose.emit() }, h("svg", { key: 'cd655a49a3142304b168c8a8f25c89b63c0fbc79', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "aria-hidden": "true" }, h("path", { key: '7a39bf4eb97bde3d6d81d3db53fea3589af6e8c9', d: "M6 6l12 12M18 6 6 18" })))), h("bs-input", { key: 'b86dc235443e567aede36a767ddc015481ef08fa', part: "search", type: "search", placeholder: this.searchPlaceholder, value: this.query, onBsInput: this.onInput }), this.showSingleKeySwitch && (h("div", { key: '4fe525465a7dbae779af2aa9596669d06a8c7f71', part: "switch", class: "bs-keyboard-shortcuts__switch" }, h("div", { key: '2821019a258b02c2d37679360001cd6ba390d304', class: "bs-keyboard-shortcuts__switch-text" }, h("span", { key: '58f8f4dca914d41ad2b9b8883a117d4b865b4faa', class: "bs-keyboard-shortcuts__switch-title" }, this.singleKeyLabel), h("span", { key: '41cfb03e58e546ed639a38452524b775065f1027', class: "bs-keyboard-shortcuts__switch-caption" }, this.singleKeyDescription)), h("bs-switch", { key: 'a974154d5c9388fc5fa6b4b077f148fbe37340c4', ariaLabel: this.singleKeyLabel, checked: this.singleKeyEnabled, onBsChange: this.onSwitch }))), h("span", { key: '636f5d35847c6bd0dcfc2d0f00b4d126bb764fbc', class: "bs-keyboard-shortcuts__live", "aria-live": "polite" }, `${count} shortcut${count === 1 ? '' : 's'}`), noResults ? (h("p", { part: "empty", class: "bs-keyboard-shortcuts__empty", role: "status" }, this.noResultsText)) : (h("div", { part: "groups", class: "bs-keyboard-shortcuts__groups" }, cols.map(col => (h("div", { class: "bs-keyboard-shortcuts__column" }, col.map(g => {
             const tid = `${this.id}-g${gi++}`;
             return (h("div", { part: "group", class: "bs-keyboard-shortcuts__group", role: "group", "aria-labelledby": tid }, h("div", { part: "group-title", id: tid, class: "bs-keyboard-shortcuts__group-title" }, g.title), h("div", { class: "bs-keyboard-shortcuts__rows", role: "list" }, g.shortcuts.map(s => (h("bs-shortcut-row", { part: "row", action: s.action, keys: s.keys, selectionRole: "listitem", disabled: !!s.disabled || (!this.singleKeyEnabled && isSingleKey(s)) }))))));
-        })))))), this.showFooterHint && (h("div", { key: 'b61974f27c2909fe207e3e604b06ed408516a810', part: "footer", class: "bs-keyboard-shortcuts__footer" }, h("slot", { key: '44c2ddc9cd9e99418ee4edaf030e51f663bee47b', name: "footer" }, h("span", { key: '9679714a84380363982b4d7111bdc424547e4aa8' }, this.footerPrefix), h("bs-key", { key: '2945e09a15994b15753bad68530700020e666968', label: this.footerKey }), h("span", { key: '90fe405d4aeebb0dbd31d291e85dee48c12f6258' }, this.footerText)))))));
+        })))))), this.showFooterHint && (h("div", { key: '05833326cdbea5dbb994fd584bc54866c14cf615', part: "footer", class: "bs-keyboard-shortcuts__footer" }, h("slot", { key: 'eeb752068052c3f27cbfa0893f03a22f04328489', name: "footer" }, h("span", { key: '55c95afd62dae51c2b82362210e558fad904f7b7' }, this.footerPrefix), h("bs-key", { key: 'b9f8ef5cd3b3e5e2fce7a99bd2b29d751a764901', label: this.footerKey }), h("span", { key: '13b4719f50cd4d3fadc2802cb22d31f04e775798' }, this.footerText)))))));
     }
     static get is() { return "bs-keyboard-shortcuts"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-list/bs-list.js

@@ -97,7 +97,7 @@ export class BsList {
         enabled[next].focus();
     }
     render() {
-        return (h("div", { key: '82a1f810e0044095794fa797075abb025275a973', part: "list", class: "bs-list", role: this.selectable ? 'listbox' : 'list', "aria-label": this.ariaLabel ?? undefined }, h("slot", { key: '993e3311f2dd6ff26850676df5af426e574f9297', onSlotchange: () => this.sync() })));
+        return (h("div", { key: '3483a207be9fb42c6d6c4e2385b3d03e3351b05c', part: "list", class: "bs-list", role: this.selectable ? 'listbox' : 'list', "aria-label": this.ariaLabel ?? undefined }, h("slot", { key: 'cc497c226b4fc18f04121a3aff3fe5e10891bf82', onSlotchange: () => this.sync() })));
     }
     static get is() { return "bs-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-list-item/bs-list-item.js

@@ -101,7 +101,7 @@ export class BsListItem {
         const role = this.selectionRole === 'option' ? 'option' : this.selectionRole === 'listitem' ? 'listitem' : this.interactive ? 'button' : undefined;
         const standaloneFocusable = this.interactive && !this.selectionRole && !this.disabled;
         const showTrailing = this.showArrow || this.hasTrailing;
-        return (h(Host, { key: '59d3a6773689bc3c4fb99ca0b77ce1092b4ceb5b', role: role, tabindex: standaloneFocusable ? '0' : undefined, "aria-selected": this.selectionRole === 'option' ? String(this.selected) : undefined, "aria-disabled": this.disabled ? 'true' : undefined, class: { 'bs-list-item--interactive': interactive && !this.disabled } }, h("div", { key: 'bbee5cf94e2c79eaf366d086e6fff408c67a76f6', part: "container", class: "bs-list-item" }, h("div", { key: 'df128d2c35849b418e06ee7b7ce7b80264f3b89f', part: "leading", class: { 'bs-list-item__leading': true, 'bs-list-item__leading--has-content': this.hasLeading } }, h("slot", { key: 'c400cac549e869eac94234e7124869f08c20b048', name: "leading", onSlotchange: (e) => (this.hasLeading = this.slotHas(e)) })), h("div", { key: '52238416ca1baa76d4bc86b37047d1c8159f47f3', part: "content", class: "bs-list-item__content" }, !this.hasDefault && this.label && (h("div", { key: 'a71711e9f393238c02a2649aad95ce97cc07e8ce', part: "label", class: "bs-list-item__label" }, this.label)), !this.hasDefault && this.description && (h("div", { key: 'f9a73d15763f95e1b72b1a8bae00851695dbd212', part: "description", class: "bs-list-item__description" }, this.description)), !this.hasDefault && this.supportText && (h("div", { key: 'f122f30aead7789821a8a9c1920ce6714755652f', part: "support-text", class: "bs-list-item__support" }, this.supportText)), h("slot", { key: '675ab1d812dd111ea5797a1f8b84494d5f0188cf', onSlotchange: (e) => (this.hasDefault = this.slotHas(e)) })), h("div", { key: 'd62bd229a2a137a025052f1dbf6b354e52faf491', part: "trailing", class: { 'bs-list-item__trailing': true, 'bs-list-item__trailing--shown': showTrailing } }, h("slot", { key: '2e325bbc97ed61b720e64251f6f2efb10708b60f', name: "trailing", onSlotchange: (e) => (this.hasTrailing = this.slotHas(e)) }, this.showArrow && (h("svg", { key: '5dd8afe5a8dd99cec88ecaf5f537f6c8ca6acf6c', viewBox: "0 0 32 32", width: "32", height: "32", fill: "none", "aria-hidden": "true" }, h("path", { key: '3a9985b0f82f62adf59c52b37459719208e28de4', d: "M12 7L21 16L12 25", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
+        return (h(Host, { key: 'eac7aeec4fedc05af55c5ca7a78efb693199de3a', role: role, tabindex: standaloneFocusable ? '0' : undefined, "aria-selected": this.selectionRole === 'option' ? String(this.selected) : undefined, "aria-disabled": this.disabled ? 'true' : undefined, class: { 'bs-list-item--interactive': interactive && !this.disabled } }, h("div", { key: '3ba832febb95adfc10481b0b1d70cc4448f0a9dd', part: "container", class: "bs-list-item" }, h("div", { key: 'd528d17243f6185d164c5f6964abe4b1d8143d5b', part: "leading", class: { 'bs-list-item__leading': true, 'bs-list-item__leading--has-content': this.hasLeading } }, h("slot", { key: '60efa1761cc46a7790986689acbada2f99d94add', name: "leading", onSlotchange: (e) => (this.hasLeading = this.slotHas(e)) })), h("div", { key: '4af6ee3b0969aeecdc2ead6b63be52b90927b713', part: "content", class: "bs-list-item__content" }, !this.hasDefault && this.label && (h("div", { key: '57481516f3d3ed73854a58fa870d40d760252b99', part: "label", class: "bs-list-item__label" }, this.label)), !this.hasDefault && this.description && (h("div", { key: 'acb37f4ec42b1c4c49d82cd21a89353a48ff3fcc', part: "description", class: "bs-list-item__description" }, this.description)), !this.hasDefault && this.supportText && (h("div", { key: 'b9e310fd74f06b1114b2ecf64b6c7de8b63a4c61', part: "support-text", class: "bs-list-item__support" }, this.supportText)), h("slot", { key: '7bb751ff77d29cd6f1852c90f5e71f855b222345', onSlotchange: (e) => (this.hasDefault = this.slotHas(e)) })), h("div", { key: '2bf6cb3dedfe1dcf868aba049f3718083ec63830', part: "trailing", class: { 'bs-list-item__trailing': true, 'bs-list-item__trailing--shown': showTrailing } }, h("slot", { key: '5cf7ede0e83b1040210346bdf7e7e6a5c7d06cfd', name: "trailing", onSlotchange: (e) => (this.hasTrailing = this.slotHas(e)) }, this.showArrow && (h("svg", { key: 'fb103f9892eebfd9a481c8d4b60e7504cb19311e', viewBox: "0 0 32 32", width: "32", height: "32", fill: "none", "aria-hidden": "true" }, h("path", { key: 'c33fa8a2aaa5a446adde56c7c8d4bfece8ef1dc9', d: "M12 7L21 16L12 25", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
     }
     static get is() { return "bs-list-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,131 @@
+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 { COLUMNS, COMPACT_COLUMNS, FEATURED, RECENT } from "./bs-mega-menu.stories";
+const q = (el, s) => el.shadowRoot.querySelector(s);
+const qa = (el, s) => Array.from(el.shadowRoot.querySelectorAll(s));
+const make = async (props = {}) => {
+    const r = await render(h("div", { style: { width: '1100px' } }, h("bs-mega-menu", { label: "Sales menu" })));
+    const el = r.root.querySelector('bs-mega-menu');
+    Object.assign(el, { columns: COLUMNS, recent: RECENT, ...props });
+    await r.waitForChanges();
+    await new Promise(res => setTimeout(res, 80));
+    return { ...r, el };
+};
+describe('bs-mega-menu', () => {
+    it('is a labelled navigation with a group per column, real lists, and the parts and custom properties', async () => {
+        const { el } = await make();
+        const panel = q(el, '[part="panel"]');
+        expect(panel.getAttribute('role')).toBe('navigation');
+        expect(panel.getAttribute('aria-label')).toBe('Sales menu');
+        const groups = qa(el, '[part="column"]');
+        expect(groups.length).toBe(3);
+        for (const g of groups) {
+            expect(g.getAttribute('role')).toBe('group');
+            expect(el.shadowRoot.getElementById(g.getAttribute('aria-labelledby')).textContent).toBeTruthy();
+            expect(g.querySelector('ul > li > bs-menu-block')).not.toBeNull();
+        }
+        assertShadowParts(el.shadowRoot, ['panel', 'columns', 'column', 'heading', 'list', 'block', 'footer', 'shortcut']);
+        assertCssCustomProperties(el, ['--bs-mega-menu-width', '--bs-mega-menu-shadow', '--bs-mega-menu-heading-color']);
+    });
+    it('renders the item data: description, badge and icon on menu blocks', async () => {
+        const { el } = await make();
+        const blocks = qa(el, 'bs-menu-block');
+        expect(blocks.length).toBe(6);
+        const subs = blocks.find(b => b.name === 'Subscriptions');
+        expect(subs.badge).toBe('New');
+        expect(subs.description).toBe('Recurring billing for services');
+        expect(subs.icon).toContain('data:image/svg+xml');
+    });
+    it('compact type renders compact blocks only', async () => {
+        const { el } = await make({ type: 'compact', columns: COMPACT_COLUMNS });
+        expect(qa(el, 'bs-menu-block').length).toBe(0);
+        expect(qa(el, 'bs-compact-menu-block').length).toBe(14);
+        expect(qa(el, '[part="column"]').length).toBe(4);
+    });
+    it('gives the featured area its own grid track', async () => {
+        const { el, waitForChanges } = await make({ columns: COLUMNS.slice(0, 2) });
+        expect(q(el, '[part="featured"]')).toBeNull();
+        el.featured = FEATURED;
+        await waitForChanges();
+        const f = q(el, '[part="featured"]');
+        expect(f.textContent).toContain('Smarter payment reminders');
+        expect(f.getAttribute('aria-labelledby')).toBe(q(el, '[part="featured-title"]').id);
+        const tracks = getComputedStyle(q(el, '[part="columns"]')).gridTemplateColumns.split(' ');
+        expect(tracks.length).toBe(3);
+    });
+    it('shows the recently used line and the shortcut hint, both overridable by slots', async () => {
+        const { el } = await make();
+        expect(q(el, '[part="footer"]').textContent).toContain('Recently used: Invoices, Sales orders');
+        expect(q(el, '[part="footer"]').textContent).toContain('Can’t find it? Press');
+        expect(q(el, 'bs-key-caps').keys).toBe('Ctrl+K');
+        expect(q(el, 'slot[name="footer-start"]')).not.toBeNull();
+        expect(q(el, 'slot[name="footer-end"]')).not.toBeNull();
+        expect(q(el, 'slot[name="featured"]')).toBeNull();
+    });
+    it('fires a cancelable bsMenuSelect with the item, and Escape fires bsClose', async () => {
+        const { el } = await make();
+        const picked = [];
+        el.addEventListener('bsMenuSelect', (e) => {
+            picked.push(e.detail.id);
+            e.preventDefault();
+        });
+        let closed = 0;
+        el.addEventListener('bsClose', () => closed++);
+        qa(el, 'bs-menu-block')[2].shadowRoot.querySelector('button').click();
+        expect(picked).toEqual(['invoices']);
+        qa(el, 'bs-menu-block')[0].shadowRoot.querySelector('button').focus();
+        await userEvent.keyboard('{Escape}');
+        expect(closed).toBe(1);
+    });
+    describe('narrow container', () => {
+        const makeAt = async (width, props = {}) => {
+            const r = await render(h("div", { style: { width: `${width}px` } }, h("bs-mega-menu", { label: "Sales menu" })));
+            const el = r.root.querySelector('bs-mega-menu');
+            Object.assign(el, { columns: COLUMNS, recent: RECENT, ...props });
+            await r.waitForChanges();
+            await new Promise(res => setTimeout(res, 80));
+            return el;
+        };
+        it('is one column, with wrapping text, 44px links, and no shortcut hint below 600px', async () => {
+            const el = await makeAt(375, { featured: FEATURED });
+            expect(getComputedStyle(q(el, '[part="columns"]')).gridTemplateColumns.split(' ').length).toBe(1);
+            const cols = qa(el, '[part="column"]').map(c => c.getBoundingClientRect());
+            expect(cols[1].top).toBeGreaterThanOrEqual(cols[0].bottom);
+            expect(q(el, '[part="featured"]').getBoundingClientRect().top).toBeGreaterThanOrEqual(cols[cols.length - 1].bottom);
+            qa(el, 'bs-menu-block').forEach(b => expect(b.getBoundingClientRect().height).toBeGreaterThanOrEqual(44));
+            expect(getComputedStyle(qa(el, 'bs-menu-block')[0].shadowRoot.querySelector('.bs-menu-block__name')).whiteSpace).toBe('normal');
+            expect(getComputedStyle(q(el, '.bs-mega-menu__shortcut')).display).toBe('none');
+            expect(q(el, '[part="footer"]').textContent).toContain('Recently used');
+            expect(el.getBoundingClientRect().width).toBe(375);
+        });
+        it('makes compact links at least 44px tall', async () => {
+            const el = await makeAt(375, { type: 'compact', columns: COMPACT_COLUMNS });
+            qa(el, 'bs-compact-menu-block').forEach(b => expect(b.getBoundingClientRect().height).toBeGreaterThanOrEqual(44));
+        });
+        it('keeps the multi-column layout and the shortcut hint at 600px and wider', async () => {
+            const wide = await makeAt(600);
+            expect(getComputedStyle(q(wide, '[part="columns"]')).gridTemplateColumns.split(' ').length).toBe(3);
+            expect(getComputedStyle(q(wide, '.bs-mega-menu__shortcut')).display).not.toBe('none');
+        });
+        it('has no axe violations when narrow', async () => {
+            const el = await makeAt(375, { featured: FEATURED });
+            const results = await axe.run(el);
+            expect(results.violations.map(v => `${v.id}: ${v.help}`)).toEqual([]);
+        });
+    });
+    it('is hidden with the hidden attribute', async () => {
+        const { el, waitForChanges } = await make();
+        el.hidden = true;
+        await waitForChanges();
+        expect(getComputedStyle(el).display).toBe('none');
+    });
+    it('has no axe violations in any type', async () => {
+        for (const props of [{}, { featured: FEATURED, columns: COLUMNS.slice(0, 2) }, { type: 'compact', columns: COMPACT_COLUMNS }, { type: 'compact', columns: COMPACT_COLUMNS.slice(0, 3), featured: FEATURED }]) {
+            const { el } = await make(props);
+            const results = await axe.run(el);
+            expect(results.violations.map(v => `${v.id}: ${v.help}`)).toEqual([]);
+        }
+    });
+});