@brandsync/wc 1.16.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: '2ce76ec3bd4b265f11bb99dee3a3c90d9172597c', class: `bs-composer bs-composer--${this.state} bs-composer--${this.variant}` }, h("div", { key: '413304d4f29b85642bf75beb879a9551d5be8263', part: "attachments", class: `bs-composer__attachments-row ${this.hasAttachments ? 'bs-composer__attachments-row--visible' : ''}` }, h("slot", { key: 'e548c8e0f26f25748f4873c22ad97431f9de3ce8', name: "attachments", onSlotchange: this.onAttachmentsSlotchange })), h("div", { key: '1df76f515366b9ef952714b8454b6aa36fd905c8', class: "bs-composer__text-row" }, h("textarea", { key: '27f0367c0eb47824e66f41cd6d90838e18116b7a', 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: 'b27a014146d993fc41d80c233365964de65cf34c', class: "bs-composer__controls-row" }, !this.hideAttach && (h("button", { key: 'b1fe110b360b29a371a68626a1507213e11facf1', type: "button", part: "attach", class: "bs-composer__attach", "aria-label": this.attachLabel, onClick: this.onAttachClick }, h(PlusIcon, { key: 'b925e8b4e010f17594edf604401423b00ff72cba' }))), 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: '52248240911d69cbb69d11ef2368a9dbce2d545a', 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: '653e4a36899abaddb91ebf975e53514b400d2497', 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: 'de551ed30be4f5008c58c4ec441daf8842209edd', 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: '7ddbbad5af14adf35a87097ce7e7644fd9e50ec3', role: this.roleForType(), "aria-busy": this.loading ? 'true' : undefined, class: `bs-composer-status-banner bs-composer-status-banner--${this.type}` }, h("div", { key: '1fb9a5fb707db89056115ec0992484b310a47590', class: "bs-composer-status-banner__message-group" }, this.showIcon && (h("span", { key: 'c9cf1d3be7dd33b73f8a2813295ed90e2dbc865a', part: "icon", class: "bs-composer-status-banner__icon" }, h("slot", { key: '86735a463ca03af8359ef17d971a63d5c518f587', name: "icon" }, this.renderDefaultIcon()))), h("p", { key: '046dad63d8a6b12c5c4fe766edef811d945b427f', part: "message", class: "bs-composer-status-banner__message" }, this.message)), this.showButton && (h("button", { key: '3c8d3d824413b32ff596f63b579c8b7ce683af81', type: "button", part: "action", class: "bs-composer-status-banner__action", onClick: this.onActionClick }, this.actionLabel)), this.allowClose && (h("button", { key: '3d5dbe65b4ba7e04202fc260b0ca665a4eb3b516', type: "button", part: "close", class: "bs-composer-status-banner__close", "aria-label": this.closeLabel, onClick: this.onCloseClick }, h(CloseIcon, { key: '86efc37f964fd1440ac10cc47077605dbc0664ce' })))));
+        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: '001d2089d9e69657dad10a4d95c550900bdb5252', style: { '--bs-container-padding-token': `var(--bs-spacing-${pad})` } }, h("slot", { key: '8f983ed8ad608a386d84468682296d9318089d28' })));
+        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: '5b61e4f581c2ab0da069cabf9a612285f98b0865', part: "table", class: "bs-data-table" }, h("thead", { key: 'c3bed54d42e2e2c3d54cfa9754251ab0d34c55fd', part: "head" }, h("tr", { key: '8f0aaa90b06650719423de98e05f39ffce407a67' }, this.selectable && (h("th", { key: 'ed065c125b50493c621c8922cdd3d7ca26222b8e', class: "bs-data-table__select-col" }, this.rows.length > 0 && (h("input", { key: '0e4f29de07f7818e7024714281f5faadcd288c88', 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: 'b993a2e1c22d094936c49ad33486b2ecc02861c8', 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: 'd2794a112b72b3dc871360b1e57273c9ef097fc4', part: "container", class: "bs-datepicker", surface: "raised" }, h("div", { key: 'bee55a1cd06aa44171f40babae77b1f2f742d160', class: "bs-datepicker__body" }, this.renderHeader(), h("div", { key: 'd4ab1cfd76fcea8b64daeb951da7b36300c036f0', part: "nav", class: "bs-datepicker__nav" }, h("button", { key: '5fcbb3f928db51049fd034beb3519400afe4f128', part: "prev", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.previousLabel, onClick: () => this.moveView(-1) }, h("svg", { key: '18889f8f9dd9364bd73595635b72515b91d35ade', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: '3d648cd4be611ef4de37cc08f9017809388d36e3', d: "M15 18L9 12L15 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("div", { key: 'c0647871f1c140472807ae51e04604c6d87ccaa4', part: "title", class: "bs-datepicker__title", "aria-live": "polite" }, this.titleText()), h("button", { key: 'ec3d33aeea146534d6640ac336905a002d0e7dc2', part: "next", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.nextLabel, onClick: () => this.moveView(1) }, h("svg", { key: '5cbac8630a30064d940e5f03ce767b525c09dd7c', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: '2c47ca0911b8b42cd3590ff053905df327363e9f', d: "M9 18L15 12L9 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: '91a6942792287f3044962fd278e36ed04ec03878', part: "grid", class: "bs-datepicker__grid", role: "grid", "aria-label": this.titleText() }, h("div", { key: '445e0548f0913426fe2eb730f291423d9165f839', 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: '72be86556d663c54fde0d585ae5850b236389b23', ...a11y }, h("div", { key: 'a08f191d8f900bc88fc0c44be08da1a7d8eb2e3c', 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.cmp.test.js

@@ -0,0 +1,102 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import { assertShadowParts, runAxeCheck } from "../../test/helpers/conventions";
+const q = (el, s) => el.shadowRoot.querySelector(s);
+describe('bs-empty-state', () => {
+    it('has the Figma geometry', async () => {
+        const { root } = await render(h("bs-empty-state", { heading: "No results", description: "Try again", style: { width: '480px' } }, h("svg", { slot: "icon", viewBox: "0 0 24 24" }), h("bs-button", { slot: "action", variant: "outlined" }, "Clear")));
+        const c = getComputedStyle(q(root, '[part="container"]'));
+        expect(c.paddingTop).toBe('56px');
+        expect(c.paddingLeft).toBe('24px');
+        expect(c.rowGap).toBe('12px');
+        expect(c.alignItems).toBe('center');
+        expect(c.textAlign).toBe('center');
+        const tile = q(root, '[part="icon"]');
+        expect(tile.getAttribute('size')).toBe('lg');
+        expect(Math.round(tile.shadowRoot.querySelector('[part="container"]').getBoundingClientRect().width)).toBe(48);
+        const hd = getComputedStyle(q(root, '[part="heading"]'));
+        expect(hd.fontSize).toBe('20px');
+        expect(hd.lineHeight).toBe('24px');
+        expect(hd.fontWeight).toBe('700');
+        const ds = getComputedStyle(q(root, '[part="description"]'));
+        expect(ds.fontSize).toBe('14px');
+        expect(ds.lineHeight).toBe('20px');
+        // description fills the container width (480 - 2 * 24)
+        expect(Math.round(q(root, '[part="description"]').getBoundingClientRect().width)).toBe(432);
+        assertShadowParts(root.shadowRoot, ['container', 'icon', 'heading', 'description', 'action']);
+    });
+    it('renders an h3 by default and honours headingLevel (clamped to 2-6)', async () => {
+        const { root, waitForChanges } = await render(h("bs-empty-state", { heading: "H" }));
+        expect(q(root, '[part="heading"]').tagName).toBe('H3');
+        root.headingLevel = 5;
+        await waitForChanges();
+        expect(q(root, '[part="heading"]').tagName).toBe('H5');
+        root.headingLevel = 1;
+        await waitForChanges();
+        expect(q(root, '[part="heading"]').tagName).toBe('H2');
+        root.headingLevel = 9;
+        await waitForChanges();
+        expect(q(root, '[part="heading"]').tagName).toBe('H6');
+    });
+    it('passes intent to the icon tile and has no role', async () => {
+        const { root, waitForChanges } = await render(h("bs-empty-state", { heading: "H" }));
+        expect(q(root, '[part="icon"]').getAttribute('intent')).toBe('default');
+        expect(root.hasAttribute('role')).toBe(false);
+        expect(q(root, '[part="container"]').hasAttribute('role')).toBe(false);
+        root.setAttribute('intent', 'error');
+        await waitForChanges();
+        expect(q(root, '[part="icon"]').getAttribute('intent')).toBe('error');
+    });
+    it('only renders the action wrapper when the action slot is filled, and the default slot replaces the description', async () => {
+        const { root, waitForChanges } = await render(h("bs-empty-state", { heading: "H", description: "Prop text" }));
+        expect(q(root, '[part="action"]')).toBeNull();
+        expect(q(root, '[part="description"]').textContent).toBe('Prop text');
+        const btn = document.createElement('bs-button');
+        btn.setAttribute('slot', 'action');
+        root.appendChild(btn);
+        const rich = document.createElement('span');
+        rich.textContent = 'Slotted';
+        root.appendChild(rich);
+        await new Promise(r => setTimeout(r, 50));
+        await waitForChanges();
+        expect(q(root, '[part="action"]')).not.toBeNull();
+        const slot = q(root, '[part="description"] slot');
+        expect(slot.assignedNodes()[0]).toBe(rich);
+    });
+    it('shows the slotted icon inside the tile', async () => {
+        const { root } = await render(h("bs-empty-state", { heading: "H" }, h("svg", { slot: "icon", viewBox: "0 0 24 24" })));
+        const tile = q(root, '[part="icon"]');
+        const slot = q(root, '[part="icon"] slot[name="icon"]');
+        expect(slot.assignedElements()[0].tagName.toLowerCase()).toBe('svg');
+        expect(tile).not.toBeNull();
+    });
+    it('uses the light and dark heading colour from tokens', async () => {
+        const { root } = await render(h("bs-empty-state", { heading: "H" }));
+        const light = getComputedStyle(q(root, '[part="heading"]')).color;
+        document.documentElement.setAttribute('data-theme', 'dark');
+        try {
+            await new Promise(r => setTimeout(r, 100));
+            expect(getComputedStyle(q(root, '[part="heading"]')).color).not.toBe(light);
+        }
+        finally {
+            document.documentElement.removeAttribute('data-theme');
+        }
+    });
+    it('passes axe', async () => {
+        const { root } = await render(h("bs-empty-state", { heading: "No results", description: "Try again", intent: "error" }, h("svg", { slot: "icon", viewBox: "0 0 24 24" }), h("bs-button", { slot: "action", variant: "outlined" }, "Retry")));
+        await runAxeCheck(root);
+    });
+    it('shows the description prop even when formatted markup puts whitespace text nodes in the default slot', async () => {
+        const { root } = await render(h("div", null));
+        root.innerHTML = `
+      <bs-empty-state heading="No results" description="Try a wider date range.">
+        <svg slot="icon" viewBox="0 0 24 24"></svg>
+        <bs-button slot="action" variant="outlined">Clear</bs-button>
+      </bs-empty-state>`;
+        const es = root.querySelector('bs-empty-state');
+        await new Promise(r => setTimeout(r, 200));
+        const d = q(es, '[part="description"]');
+        expect(d).not.toBeNull();
+        expect(d.textContent.trim()).toBe('Try a wider date range.');
+        expect(d.getBoundingClientRect().height).toBeGreaterThan(0);
+    });
+});

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

@@ -0,0 +1,45 @@
+:host {
+  display: block;
+  box-sizing: border-box;
+  --bs-empty-state-padding-y: var(--bs-spacing-700);
+  /* Figma: 24px; --bs-spacing-300 is 24px. */
+  --bs-empty-state-padding-x: var(--bs-spacing-300);
+  --bs-empty-state-gap: var(--bs-spacing-150);
+  --bs-empty-state-heading-color: var(--bs-text-default);
+  --bs-empty-state-description-color: var(--bs-text-secondary);
+}
+
+.bs-empty-state {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--bs-empty-state-gap);
+  padding: var(--bs-empty-state-padding-y) var(--bs-empty-state-padding-x);
+  text-align: center;
+}
+
+.bs-empty-state__heading {
+  margin: 0;
+  align-self: stretch;
+  color: var(--bs-empty-state-heading-color);
+  font-family: inherit;
+  font-size: var(--bs-font-size-xl);
+  font-weight: var(--bs-font-weight-bold);
+  line-height: 24px;
+}
+
+.bs-empty-state__description {
+  margin: 0;
+  align-self: stretch;
+  color: var(--bs-empty-state-description-color);
+  font-family: inherit;
+  font-size: var(--bs-font-size-sm);
+  font-weight: var(--bs-font-weight-regular);
+  line-height: 20px;
+}
+
+.bs-empty-state__action {
+  display: flex;
+  justify-content: center;
+}

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

@@ -0,0 +1,175 @@
+import { h } from "@stencil/core";
+/**
+ * A centered "nothing to show" block: an icon tile, a heading, a description and an optional action.
+ * Used for empty lists, "no results" and error states inside a panel, card or page section.
+ *
+ * Built from `bs-icon-tile` (and, in your `action` slot, usually a `bs-button`).
+ *
+ * The component has no role. Live regions belong on a wrapper you control (e.g. `role="status"` on the
+ * element that stays in the DOM while this block appears and disappears).
+ *
+ * ## When to use
+ * - A list, table or search result that has nothing to show, or failed to load.
+ *
+ * ## When not to use
+ * - A full-page error with a status code -- use `bs-error-page`.
+ * - A transient message -- use `bs-toast` or `bs-snackbar`.
+ *
+ * @slot icon - The glyph inside the icon tile (24px, `currentColor`). Falls back to the tile's intent glyph.
+ * @slot - The description (overrides the `description` prop).
+ * @slot action - An optional action, e.g. `<bs-button variant="outlined">`.
+ * @part container - The centered column.
+ * @part icon - The icon tile (`bs-icon-tile`).
+ * @part heading - The heading element.
+ * @part description - The description paragraph.
+ * @part action - The action wrapper (only rendered while the `action` slot is filled).
+ * @prop --bs-empty-state-padding-y - Vertical padding. Aliased to `--bs-spacing-700` (56px).
+ * @prop --bs-empty-state-padding-x - Horizontal padding. Aliased to `--bs-spacing-300` (24px).
+ * @prop --bs-empty-state-gap - Gap between tile, heading, description and action. Aliased to `--bs-spacing-150`.
+ * @prop --bs-empty-state-heading-color - Aliased to `--bs-text-default`.
+ * @prop --bs-empty-state-description-color - Aliased to `--bs-text-secondary`.
+ */
+export class BsEmptyState {
+    el;
+    /** The heading text. */
+    heading;
+    /** The description text. The default slot overrides it. */
+    description;
+    /** Colour and default glyph of the icon tile. Use `error` for failures. */
+    intent = 'default';
+    /** Heading level, 2 to 6 (renders `h2`..`h6`). Pick the one that fits the page outline. */
+    headingLevel = 3;
+    hasIcon = false;
+    hasDescriptionSlot = false;
+    hasAction = false;
+    observer;
+    componentWillLoad() {
+        this.readSlots();
+        this.observer = new MutationObserver(() => this.readSlots());
+        this.observer.observe(this.el, { childList: true, subtree: false, characterData: false });
+    }
+    disconnectedCallback() {
+        this.observer?.disconnect();
+    }
+    readSlots() {
+        const nodes = Array.from(this.el.childNodes);
+        const slotOf = (n) => (n.nodeType === Node.ELEMENT_NODE ? n.getAttribute('slot') : null);
+        this.hasIcon = nodes.some(n => slotOf(n) === 'icon');
+        this.hasAction = nodes.some(n => slotOf(n) === 'action');
+        this.hasDescriptionSlot = nodes.some(n => !slotOf(n) && (n.nodeType === Node.ELEMENT_NODE || (n.nodeType === Node.TEXT_NODE && !!n.textContent?.trim())));
+    }
+    render() {
+        const level = Math.min(6, Math.max(2, Math.round(Number(this.headingLevel)) || 3));
+        const Heading = `h${level}`;
+        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"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-empty-state.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-empty-state.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The heading text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The description text. The default slot overrides it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "intent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsIconTileIntent",
+                    "resolved": "\"brand\" | \"default\" | \"error\" | \"information\" | \"success\" | \"warning\"",
+                    "references": {
+                        "BsIconTileIntent": {
+                            "location": "import",
+                            "path": "../bs-icon-tile/bs-icon-tile",
+                            "id": "src/components/bs-icon-tile/bs-icon-tile.tsx::BsIconTileIntent",
+                            "referenceLocation": "BsIconTileIntent"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Colour and default glyph of the icon tile. Use `error` for failures."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "intent",
+                "defaultValue": "'default'"
+            },
+            "headingLevel": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "2 | 3 | 4 | 5 | 6",
+                    "resolved": "2 | 3 | 4 | 5 | 6",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Heading level, 2 to 6 (renders `h2`..`h6`). Pick the one that fits the page outline."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading-level",
+                "defaultValue": "3"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasIcon": {},
+            "hasDescriptionSlot": {},
+            "hasAction": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}

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

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

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

@@ -65,7 +65,7 @@ export class BsErrorPage {
         const primary = this.primaryLabel ?? d.primary;
         const secondary = this.secondaryLabel ?? d.secondary;
         const level = Math.min(6, Math.max(1, Math.trunc(Number(this.headingLevel)) || 1));
-        return (h("bs-card", { key: '68774f7ab0252b92905900f06f564d1c2a8ce163', part: "container", class: "bs-error-page", surface: "base" }, h("div", { key: 'f263ce4991e2aa4553e430e60e646df5fc257120', class: "bs-error-page__body" }, h("div", { key: '3aa6b36e1aa05ea63e52e8c79684b166853e5950', class: "bs-error-page__art-group" }, h("bs-icon-tile", { key: 'b0b7f3fa925acef6b95e23136df7f9bac3e43ff4', part: "art", class: `bs-error-page__art ${d.info ? 'bs-error-page__art--info' : ''}`, intent: d.intent, size: "lg" }, h("slot", { key: 'e33db2aa8c275de0e32effc759e177ef1ee46c6d', name: "icon" }, d.glyph())), code && (h("span", { key: '9f576963f7399e4ca6e86cfd0331f0c7c7119886', part: "code", class: "bs-error-page__code" }, code))), h(`h${level}`, { part: 'heading', class: { 'bs-error-page__heading': true } }, heading), description && (h("p", { key: 'ea4861b666f95c7416a4d54152f8ffd1b900eb61', part: "description", class: "bs-error-page__description" }, description)), (primary || secondary) && (h("div", { key: 'e0ec38c28b957390486fce52497f91661abc7ef1', part: "actions", class: "bs-error-page__actions" }, primary && (h("bs-button", { key: 'a2b190366240c9fbe3e7a78a16b9881a3ad4468a', part: "primary", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)), secondary && (h("bs-button", { key: 'bef26b3dcc61c4e968c054d35ed67430884c9f99', part: "secondary", variant: "outlined", onClick: () => this.bsSecondary.emit() }, secondary)))), this.reference && (h("p", { key: 'b8de6e83c2c68ca8880afc781e8ffceb03f23164', part: "reference", class: "bs-error-page__reference" }, this.reference)))));
+        return (h("bs-card", { key: '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: 'd9f116b4dcf8641a590581c24176d4659a2b6892', part: "dropzone", class: `bs-file-upload bs-file-upload--${this.direction} ${this.dragging ? 'bs-file-upload--dragging' : ''} ${this.disabled ? 'bs-file-upload--disabled' : ''}`, onDragEnter: this.onDragOver, onDragOver: this.onDragOver, onDragLeave: this.onDragLeave, onDrop: this.onDrop }, h("div", { key: '5aa0c733860505646bde5cad571a4d850d38f979', part: "icon", class: "bs-file-upload__icon" }, h("slot", { key: '292d3074620f2a228dbe544363f7ef8cce4f194c', name: "icon" }, h(UploadIcon, { key: '65c343be45634d10d561ba0f7a3cdd201a7664e6' }))), h("div", { key: '69d1ddde89b8c26d7a40a963cf16d1519b5b1fd4', class: "bs-file-upload__content" }, h("div", { key: '7730fdb7efb8eeffb374fff22fdd9d60497eebce', class: "bs-file-upload__text" }, this.heading && (h("span", { key: '0ca349bd1fedd84d869b363da150e13c07623f3b', part: "heading", class: "bs-file-upload__heading" }, this.heading)), this.description && (h("span", { key: '522d99de1b5caf70cd7e44bf8e821fe49951c788', part: "description", id: "description", class: "bs-file-upload__description" }, this.description))), h("bs-button", { key: 'f7af51522dfb762102f0c17bcbfd0e737b52d783', part: "browse", variant: "neutral", size: "sm", disabled: this.disabled, onClick: this.onBrowse }, this.buttonLabel)), h("input", { key: '71a2262124fd84b52dbffa18966eb1479e1ad95a', ref: el => (this.inputEl = el), class: "bs-file-upload__input", type: "file", hidden: true, tabindex: -1, accept: this.accept, multiple: this.multiple, disabled: this.disabled, "aria-describedby": this.description ? 'description' : undefined, onChange: this.onInputChange })));
+        return (h("div", { key: '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: 'e109650dda74a0a0db7af7f621da5e70079a7830', part: "item", class: `bs-file-upload-item bs-file-upload-item--${this.state}` }, h("div", { key: '800f1bd6a8cabd97c0aa43fe9a521876d4e6feb8', part: "thumbnail", class: "bs-file-upload-item__thumbnail" }, h("slot", { key: 'e5696a2cf9d69579ff8fd79688f83879c4093c74', name: "thumbnail" }, this.thumbnailSrc ? (h("img", { class: "bs-file-upload-item__image", src: this.thumbnailSrc, alt: this.thumbnailAlt })) : (h(ImageIcon, null)))), h("div", { key: 'bc52ee589c5cf4040dcb1aa86cce0150136d71ae', class: "bs-file-upload-item__content" }, h("div", { key: 'a70dc514e89ebfb1de3e772652e6ab8b2987007a', class: "bs-file-upload-item__meta" }, h("span", { key: '1c0a8e151f284a8344650fb00912582c17d2d5ee', part: "name", class: "bs-file-upload-item__name" }, this.fileName), this.fileSize && (h("span", { key: 'f608a1ee6e44e34e9e67600622a180e676fb960a', part: "size", class: "bs-file-upload-item__size" }, this.fileSize))), this.renderStatus()), h("bs-icon-button", { key: '5781f2aa401d12d3a4f4b0172d64cb0b9ceacf00', part: "action", variant: "subtle", size: "lg", ariaLabel: removing ? this.removeLabel : this.cancelLabel, onClick: this.onAction }, removing ? h(TrashIcon, null) : h(CloseIcon, null))));
+        return (h("div", { key: '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"; }