@brandsync/wc 1.16.0 → 1.17.0

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

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

package/dist/collection/components/bs-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: '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" }))));
     }
     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: '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' })))));
     }
     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: 'af5052dbda078e66b8afcf84e842f124748353b9', style: { '--bs-container-padding-token': `var(--bs-spacing-${pad})` } }, h("slot", { key: '2493e7614d7fcaf07b24e350e68a65b06fd77640' })));
     }
     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: '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 => {
             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: '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 ? (
         // 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: '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) => {
             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: '0146af9f63ddd328e30262cf9767222445da478b', ...a11y }, h("div", { key: 'a621923c43fd326fe5ee6e7223bd5e7103b01e9e', 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: '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" })))));
+    }
+    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"; }
+}