@brandsync/wc 1.19.0 → 1.20.0

package/dist/collection/components/bs-code-block/bs-code-block.js

@@ -0,0 +1,317 @@
+import { h } from "@stencil/core";
+/**
+ * A block of code with an optional filename header and a Copy button, or (with `inline`) styled
+ * inline code. Dependency-free: it does no syntax highlighting itself. Pass plain text with `code`,
+ * or slot pre-highlighted markup (e.g. the output of Shiki or Prism: spans coloured with your own
+ * CSS) as the default slot.
+ *
+ * Follows light and dark mode through the surface/text tokens. Long lines scroll horizontally (the
+ * scroll area is keyboard focusable) or, with `wrap`, break onto the next line.
+ *
+ * Copying announces the `copiedLabel` text through a polite live region, and the button label
+ * changes to match for a few seconds.
+ *
+ * Slotted content: keep it flush against the tags (`<bs-code-block><span>..</span></bs-code-block>`),
+ * since whitespace in a `<pre>`-style block is kept. The line count for `lineNumbers` and the text
+ * that is copied are read from the slotted text.
+ *
+ * Composed from: `bs-card` (the surface), `bs-button` and `bs-icon` (the Copy button).
+ *
+ * ## When to use
+ * - Showing a snippet, command or config the reader may want to copy.
+ * - `inline` for a short code term inside a sentence.
+ *
+ * ## When not to use
+ * - Long files that need folding, search or editing: link to the source instead.
+ * - Pre-formatted prose or tables: use ordinary text and table markup.
+ *
+ * @slot - Pre-highlighted code (any markup). Ignored when `code` is set.
+ * @part container - The `bs-card` surface (block mode).
+ * @part header - The header row holding the filename and the Copy button.
+ * @part filename - The filename text.
+ * @part copy-button - The Copy `bs-button`.
+ * @part body - The scrollable code area.
+ * @part line-numbers - The line number gutter (when `lineNumbers` is set).
+ * @part code - The `code` element (block and inline).
+ */
+export class BsCodeBlock {
+    el;
+    /** Plain-text code. When set it is shown (escaped) instead of the default slot, and is what Copy copies. */
+    code;
+    /** Name shown at the left of the header, e.g. `app.config.ts` or `Terminal`. Also names the code region for assistive tech. */
+    filename;
+    /** Show a line number gutter. Line numbers need unwrapped lines, so `wrap` is ignored while this is set. */
+    lineNumbers = false;
+    /** Wrap long lines instead of scrolling horizontally. */
+    wrap = false;
+    /** Render as inline code (a styled `<code>` inside a sentence): no header, no Copy button, no scrolling. */
+    inline = false;
+    /** Remove the Copy button. */
+    hideCopy = false;
+    /** Label of the Copy button. */
+    copyLabel = 'Copy';
+    /** Label of the Copy button after copying, and the text announced to assistive tech. */
+    copiedLabel = 'Copied';
+    /** Accessible name of the code region when there is no `filename`. */
+    regionLabel = 'Code';
+    /** Emitted with the copied text after it was written to the clipboard. */
+    bsCopy;
+    copied = false;
+    slottedText = '';
+    timer;
+    componentWillLoad() {
+        this.slottedText = this.el.textContent ?? '';
+    }
+    disconnectedCallback() {
+        clearTimeout(this.timer);
+    }
+    text() {
+        const raw = this.code ?? this.slottedText;
+        return raw.replace(/^\n/, '').replace(/\s+$/, '');
+    }
+    onCopy = async () => {
+        const text = this.text();
+        try {
+            await navigator.clipboard.writeText(text);
+        }
+        catch {
+            return;
+        }
+        this.copied = true;
+        this.bsCopy.emit(text);
+        clearTimeout(this.timer);
+        this.timer = setTimeout(() => (this.copied = false), 2500);
+    };
+    onSlotchange = () => {
+        this.slottedText = this.el.textContent ?? '';
+    };
+    render() {
+        const codeEl = (h("code", { part: "code", class: "bs-code-block__code" }, this.code !== undefined ? this.code : h("slot", { onSlotchange: this.onSlotchange })));
+        if (this.inline)
+            return codeEl;
+        const showHeader = !!this.filename || !this.hideCopy;
+        const lines = this.lineNumbers ? this.text().split('\n').length : 0;
+        const numbers = lines ? Array.from({ length: lines }, (_, i) => i + 1).join('\n') : '';
+        const wrap = this.wrap && !this.lineNumbers;
+        return (h("bs-card", { part: "container", class: "bs-code-block", surface: "container" }, showHeader && (h("div", { part: "header", slot: "header", class: "bs-code-block__header" }, h("span", { part: "filename", class: "bs-code-block__filename" }, this.filename), !this.hideCopy && (h("bs-button", { part: "copy-button", variant: "subtle", size: "sm", onClick: this.onCopy }, h("bs-icon", { slot: "icon", name: this.copied ? 'check' : 'copy', size: "sm", tone: "inherit" }), this.copied ? this.copiedLabel : this.copyLabel)))), h("div", { part: "body", class: { 'bs-code-block__body': true, 'bs-code-block__body--wrap': wrap }, role: "region", "aria-label": this.filename || this.regionLabel, tabindex: wrap ? undefined : 0 }, lines > 0 && (h("pre", { part: "line-numbers", class: "bs-code-block__numbers", "aria-hidden": "true" }, numbers)), h("pre", { class: "bs-code-block__pre" }, codeEl)), h("span", { class: "bs-code-block__live", role: "status", "aria-live": "polite" }, this.copied ? this.copiedLabel : '')));
+    }
+    static get is() { return "bs-code-block"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-code-block.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-code-block.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "code": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Plain-text code. When set it is shown (escaped) instead of the default slot, and is what Copy copies."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "code"
+            },
+            "filename": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Name shown at the left of the header, e.g. `app.config.ts` or `Terminal`. Also names the code region for assistive tech."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "filename"
+            },
+            "lineNumbers": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show a line number gutter. Line numbers need unwrapped lines, so `wrap` is ignored while this is set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "line-numbers",
+                "defaultValue": "false"
+            },
+            "wrap": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wrap long lines instead of scrolling horizontally."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "wrap",
+                "defaultValue": "false"
+            },
+            "inline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Render as inline code (a styled `<code>` inside a sentence): no header, no Copy button, no scrolling."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "inline",
+                "defaultValue": "false"
+            },
+            "hideCopy": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Remove the Copy button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-copy",
+                "defaultValue": "false"
+            },
+            "copyLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label of the Copy button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "copy-label",
+                "defaultValue": "'Copy'"
+            },
+            "copiedLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label of the Copy button after copying, and the text announced to assistive tech."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "copied-label",
+                "defaultValue": "'Copied'"
+            },
+            "regionLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the code region when there is no `filename`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "region-label",
+                "defaultValue": "'Code'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "copied": {},
+            "slottedText": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsCopy",
+                "name": "bsCopy",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted with the copied text after it was written to the clipboard."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/bs-code-block/bs-code-block.stories.js

@@ -0,0 +1,56 @@
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { componentDescription } from "../../stories-utils";
+const SAMPLE = `import { registerIcons } from '@brandsync/wc';
+
+registerIcons({
+  star: '<path d="M12 3l2.7 5.6 6.1.9"/>',
+});`;
+const meta = {
+    title: 'Components/bs-code-block',
+    parameters: { docs: { description: { component: componentDescription('bs-code-block') } } },
+    render: args => html `
+    <bs-code-block
+      .code=${args.code}
+      filename=${ifDefined(args.filename || undefined)}
+      ?lineNumbers=${args.lineNumbers}
+      ?wrap=${args.wrap}
+      ?hideCopy=${args.hideCopy}
+      style="max-width: 480px"
+    ></bs-code-block>
+  `,
+    argTypes: {
+        code: { control: 'text' },
+        filename: { control: 'text' },
+        lineNumbers: { control: 'boolean' },
+        wrap: { control: 'boolean' },
+        hideCopy: { control: 'boolean' },
+    },
+    args: { code: SAMPLE, filename: 'icons.ts', lineNumbers: false, wrap: false, hideCopy: false },
+};
+export default meta;
+export const Default = {};
+export const LineNumbers = { args: { lineNumbers: true } };
+export const NoHeaderName = { name: 'Copy button only', args: { filename: '' } };
+export const NoCopy = { args: { hideCopy: true } };
+export const LongLines = {
+    name: 'Long lines: scroll or wrap',
+    render: () => {
+        const long = 'curl --request POST https://api.example.com/v1/invoices --header "Authorization: Bearer $TOKEN" --data @invoice.json';
+        return html `
+      <div style="display: grid; gap: var(--bs-spacing-200); max-width: 420px">
+        <bs-code-block .code=${long} filename="Scrolls"></bs-code-block>
+        <bs-code-block .code=${long} filename="Wraps" wrap></bs-code-block>
+      </div>
+    `;
+    },
+};
+export const PreHighlighted = {
+    name: 'Pre-highlighted (slotted)',
+    render: () => html `
+    <bs-code-block filename="app.ts" style="max-width: 480px"><span style="color: var(--bs-text-info)">const</span> total = <span style="color: var(--bs-text-success)">items</span>.length;</bs-code-block>
+  `,
+};
+export const Inline = {
+    render: () => html `<p>Run <bs-code-block inline code="npm install @brandsync/wc"></bs-code-block> to get started.</p>`,
+};

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

@@ -393,7 +393,7 @@ export class BsCommandPalette {
         const sections = this.shownSections().filter(s => this.filled[s]);
         const hasList = sections.length > 0;
         const showResults = loading || empty || hasList;
-        return (h("dialog", { key: '82eae53a7e6bc7327a8e18f3ec46713f28e40de1', ref: el => (this.dialogEl = el), part: "dialog", class: "bs-command-palette", "aria-label": this.label, "aria-modal": "true", role: "dialog", onCancel: this.onCancel, onClose: () => this.open && this.setOpen(false), onClick: this.onDialogClick, onKeyDown: this.onDialogKeyDown }, h("div", { key: '38ff5eb71ba6ec55754e4652f8fd0726788888cc', part: "panel", class: "bs-command-palette__panel" }, h("div", { key: '44bbcb7583bd2c83f7bff67b7e11e923c2b254ea', part: "search", class: "bs-command-palette__search" }, this.scopeLabel && (h("bs-chip-informative", { key: 'b0b7ce0e5f6d89837e4ca51461cbf4418d133bfd', class: "bs-command-palette__scope", color: "info" }, this.scopeLabel)), h("div", { key: '2f1cfc7a8e22b552fd29ab42cd456420f5465511', class: "bs-command-palette__field", ref: el => (this.comboEl = el), role: "combobox", "aria-label": this.placeholder, "aria-expanded": String(hasList), "aria-haspopup": "listbox", "aria-controls": hasList ? listId : undefined, onKeyDown: this.onKeyDown }, h("bs-input", { key: 'd26a20ff3c9f65e4382ce00358bd503dd17097ce', part: "input", ref: el => (this.inputEl = el), type: "search", value: this.value, placeholder: this.placeholder, onBsInput: this.onInput })), h("span", { key: '9afab31e67ca2b7c2175fd0998ee39c434a8ff55', class: "bs-command-palette__esc", "aria-hidden": "true" }, h("bs-key", { key: '6ea5bd74d556f3bd3e99add2d3760979c18ec0f2', label: "Esc" }))), showResults && h("div", { key: '96ce3040a1f6123e331614be448742e0a01386cf', class: "bs-command-palette__divider", role: "presentation" }), showResults && (h("div", { key: 'b762317a9abf5cf1e5773abf9835ba10856c7d86', part: "results", class: "bs-command-palette__results", "aria-busy": String(loading), onMouseOver: this.onResultsMouseOver }, loading && (h("div", { key: '9c86ac88bdfc3d7cb0a7679902f4c3b063d45a24', class: "bs-command-palette__loading", role: "status" }, h("bs-spinner", { key: '8578c7013591ded5847c76cde5995f2e30930202', size: "sm" }), h("span", { key: 'd13b91f6601ad2a50981cf7eef3a69f47bf50ead' }, this.loadingLabel))), empty && this.renderEmpty(), hasList && (h("div", { key: '27f56bdf333b8f479c691132d441fb0b161328c2', id: listId, class: "bs-command-palette__list", role: "listbox", "aria-label": this.listLabel }, sections.map(s => this.renderSection(s)))))), this.showFooter && this.renderFooter()), h("span", { key: '8d1cee6732f49faf5794438742863ec67036aef5', class: "bs-command-palette__live", "aria-live": "polite" }, this.announcement())));
+        return (h("dialog", { key: 'd06cdefa922bb8a64cd772f193d1fa74fbb22f37', ref: el => (this.dialogEl = el), part: "dialog", class: "bs-command-palette", "aria-label": this.label, "aria-modal": "true", role: "dialog", onCancel: this.onCancel, onClose: () => this.open && this.setOpen(false), onClick: this.onDialogClick, onKeyDown: this.onDialogKeyDown }, h("div", { key: '0b6984201d7d83193e2b5e01d9cb877c8739f277', part: "panel", class: "bs-command-palette__panel" }, h("div", { key: 'ca8de39945a16582770e5e779d8fcd4bbdd42cf7', part: "search", class: "bs-command-palette__search" }, this.scopeLabel && (h("bs-chip-informative", { key: '90521a09ef55ac7c861646650293c0eac56e554b', class: "bs-command-palette__scope", color: "info" }, this.scopeLabel)), h("div", { key: 'f7cbe1a490c1ca4ad5516f164768443c28ff3efb', class: "bs-command-palette__field", ref: el => (this.comboEl = el), role: "combobox", "aria-label": this.placeholder, "aria-expanded": String(hasList), "aria-haspopup": "listbox", "aria-controls": hasList ? listId : undefined, onKeyDown: this.onKeyDown }, h("bs-input", { key: '698efbfc139c6e2660969420be7c166d0d6e7953', part: "input", ref: el => (this.inputEl = el), type: "search", value: this.value, placeholder: this.placeholder, onBsInput: this.onInput })), h("span", { key: '8bcae63dbfd913b0135c114782b4928c33d05ed6', class: "bs-command-palette__esc", "aria-hidden": "true" }, h("bs-key", { key: 'a2c958b98e4ee3ee1ba7e09cc5f0d1434c418e59', label: "Esc" }))), showResults && h("div", { key: '86be7cd95d0784de6620ac58688ba50898d34683', class: "bs-command-palette__divider", role: "presentation" }), showResults && (h("div", { key: '22511eee60186fdbe1c77018f910883e0e475d57', part: "results", class: "bs-command-palette__results", "aria-busy": String(loading), onMouseOver: this.onResultsMouseOver }, loading && (h("div", { key: 'ba3ad0ee5b52d4149df64b6025cb9a1a5ef05146', class: "bs-command-palette__loading", role: "status" }, h("bs-spinner", { key: '622094750110baec93176714b79fbe5fb984de9a', size: "sm" }), h("span", { key: 'db0d4c37dd97cf62d8e525ef72e237a464fc3614' }, this.loadingLabel))), empty && this.renderEmpty(), hasList && (h("div", { key: '532af3ce4bcc8c70994abcd69d807ff9a180ee44', id: listId, class: "bs-command-palette__list", role: "listbox", "aria-label": this.listLabel }, sections.map(s => this.renderSection(s)))))), this.showFooter && this.renderFooter()), h("span", { key: 'b27ff78735f3c4ed712ef187cf161c9f7a36bdd9', class: "bs-command-palette__live", "aria-live": "polite" }, this.announcement())));
     }
     static get is() { return "bs-command-palette"; }
     static get encapsulation() { return "shadow"; }

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

@@ -27,7 +27,7 @@ export class BsCompactMenuBlock {
     name;
     render() {
         const common = { part: 'container', class: 'bs-compact-menu-block' };
-        return (h("button", { key: 'b2a2efb662ffb9ddcf300ed8f6daaeb329964ffe', ...common, type: "button" }, this.name));
+        return (h("button", { key: 'dfa6cc91f9a1d77f77d9b8ca116f048f73f7347f', ...common, type: "button" }, this.name));
     }
     static get is() { return "bs-compact-menu-block"; }
     static get encapsulation() { return "shadow"; }

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

@@ -234,10 +234,10 @@ export class BsCompanySwitcher {
         const empty = !!this.q && groups.length === 0;
         const listId = `${this.id}-listbox`;
         const total = groups.reduce((n, g) => n + g.items.length, 0);
-        return (h("bs-popover", { key: '9ce15612a22c2401bdeb75f5dbae869d76d9310c', class: "bs-company-switcher", open: this.open, placement: "bottom-start", onBsOpenChange: this.onPopoverOpenChange }, this.renderTrigger(), h("bs-card", { key: '848ef0a3498aa67b55b4c1885c88b6e7b9e4534d', part: "panel", class: "bs-company-switcher__panel", surface: "base" }, h("div", { key: '9ec54e9e78fb33c4e8049691ca8fb391ad05fa42', class: "bs-company-switcher__search", onMouseDown: (ev) => ev.preventDefault() }, h("div", { key: '222550548c6bdd41584a1a7c55c6e0bf23d07b8b', part: "search", role: "combobox", "aria-label": this.searchPlaceholder, "aria-expanded": "true", "aria-haspopup": "listbox", "aria-controls": groups.length ? listId : undefined, "aria-activedescendant": this.activeId ?? undefined, onKeyDown: this.onKeyDown }, h("bs-input", { key: 'd0dd2042031a45ab83b1cb857268df097f2dff5f', ref: el => (this.inputEl = el), type: "search", value: this.query, placeholder: this.searchPlaceholder, onBsInput: this.onInput }))), groups.length > 0 && (h("div", { key: '28343988f512c3515cd69a6b766d9990cd63d23a', id: listId, part: "list", class: "bs-company-switcher__list", role: "listbox", "aria-label": this.listLabel, onMouseDown: (ev) => ev.preventDefault(), onMouseLeave: () => (this.activeId = null) }, groups.map(g => {
+        return (h("bs-popover", { key: '5980bccab6835ad9384ba9314e35f0013053d2c9', class: "bs-company-switcher", open: this.open, placement: "bottom-start", onBsOpenChange: this.onPopoverOpenChange }, this.renderTrigger(), h("bs-card", { key: '6afff3828ecd224660d171514c23e7b3ca30f7ee', part: "panel", class: "bs-company-switcher__panel", surface: "base" }, h("div", { key: 'a046f869f51c0024e26efabf572dff82a8e2f787', class: "bs-company-switcher__search", onMouseDown: (ev) => ev.preventDefault() }, h("div", { key: '90e931c5129383fdb6443dae3ff9bed40fe61935', part: "search", role: "combobox", "aria-label": this.searchPlaceholder, "aria-expanded": "true", "aria-haspopup": "listbox", "aria-controls": groups.length ? listId : undefined, "aria-activedescendant": this.activeId ?? undefined, onKeyDown: this.onKeyDown }, h("bs-input", { key: 'c52a69879cdf3e7053f8b2fe97b5954b443121b6', ref: el => (this.inputEl = el), type: "search", value: this.query, placeholder: this.searchPlaceholder, onBsInput: this.onInput }))), groups.length > 0 && (h("div", { key: 'fd72b97de3388bb607abab5ec55fe5602314f281', id: listId, part: "list", class: "bs-company-switcher__list", role: "listbox", "aria-label": this.listLabel, onMouseDown: (ev) => ev.preventDefault(), onMouseLeave: () => (this.activeId = null) }, groups.map(g => {
             const hid = `${this.id}-h-${g.key}`;
             return (h("div", { part: "group", class: "bs-company-switcher__group", role: "group", "aria-labelledby": hid }, h("div", { part: "group-header", id: hid, class: "bs-company-switcher__group-header" }, g.header), g.items.map(c => this.renderRow(c))));
-        }))), empty && (h("bs-empty-state", { key: 'd4918f499f405f08d1874646442b9a529ae9fd3f', part: "empty", class: "bs-company-switcher__empty", heading: this.emptyHeading.replace('{query}', this.query.trim()), description: this.emptyDescription }, h("svg", { key: 'da86a364c21c7b3dbb3121750b022d348f2ecdab', slot: "icon", ...svgProps }, h("circle", { key: 'f81525086c48f928325c2532089b69ede5528e33', cx: "11", cy: "11", r: "7" }), h("path", { key: '490f2df2b35e29cdff08a60c1d63fb2fdd9ef1a7', d: "m20 20-3.5-3.5" })))), h("bs-divider", { key: '9a1997a336530026eab0743cbe7cca26f5c4da23', class: "bs-company-switcher__divider", decorative: true }), h("div", { key: '361ca8743c2c50fcaadc0541b9a3ceac1289f471', part: "footer", class: "bs-company-switcher__footer" }, h("bs-button", { key: '0dc207fc2719f926fba2859be9130bb28bee652a', variant: "subtle", size: "sm", onClick: () => this.bsManageCompanies.emit() }, h("svg", { key: '5ba9707f09ab325c7f7edff7fbec22196656ad8c', slot: "icon", ...svgProps }, h("circle", { key: '5f99a660c029225dbceb38347c5a6a4141ecbaaf', cx: "12", cy: "12", r: "3" }), h("path", { key: '7f3aec8c463210e81e079051d3a13f0550e6d27c', d: "M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z" })), this.manageLabel), h("bs-button", { key: 'f6204900c1e1f21b59d02a770339c0471efdc379', variant: "subtle", size: "sm", onClick: () => this.bsAddCompanies.emit() }, h("svg", { key: '2381e1068dbd3785995f6946c6215b743feeb323', slot: "icon", ...svgProps }, h("path", { key: '7decd85389ffd646e48d501126b99bc4498604be', d: "M12 5v14M5 12h14" })), this.addLabel)), h("span", { key: '36cb6c11fa0a3f51985a5272dce01441f8127fb0', class: "bs-company-switcher__live", "aria-live": "polite" }, this.open && this.q ? (empty ? this.emptyHeading.replace('{query}', this.query.trim()) : `${total} ${total === 1 ? this.matchLabel : this.matchesLabel}`) : ''))));
+        }))), empty && (h("bs-empty-state", { key: 'ec7b430654c356c6746c66e416e67ee436b1fdd0', part: "empty", class: "bs-company-switcher__empty", heading: this.emptyHeading.replace('{query}', this.query.trim()), description: this.emptyDescription }, h("svg", { key: '5a40d259338fabb61f69ebdcb0e3a9940f351ffe', slot: "icon", ...svgProps }, h("circle", { key: '757a039bb1b483c08f08af14e1b14dba2ae68c88', cx: "11", cy: "11", r: "7" }), h("path", { key: '5271a517de56a069843454c4f58c559ad458e20e', d: "m20 20-3.5-3.5" })))), h("bs-divider", { key: 'd5c25f9dc46b3272a7734ccc8b8d6fd5ed06986c', class: "bs-company-switcher__divider", decorative: true }), h("div", { key: 'd862e4c545a508f5306c07b76e92b1b381b68bc7', part: "footer", class: "bs-company-switcher__footer" }, h("bs-button", { key: '319614a523516d33c33cd6245c74787374e5304f', variant: "subtle", size: "sm", onClick: () => this.bsManageCompanies.emit() }, h("svg", { key: 'fd832a30f82be7bd8c61e236ecb605e12e2a1c0c', slot: "icon", ...svgProps }, h("circle", { key: '4efb646b40beb60f8b9eda1ea0204e2940c5272d', cx: "12", cy: "12", r: "3" }), h("path", { key: '199d7121c6ae29d435daa2c9e7c13af9f4415b19', d: "M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z" })), this.manageLabel), h("bs-button", { key: 'b5c5f44bdbde03b5192c1aba73fffd22424594a9', variant: "subtle", size: "sm", onClick: () => this.bsAddCompanies.emit() }, h("svg", { key: 'c5ba249024a7fdd303cea0c94ad44befd17be2b1', slot: "icon", ...svgProps }, h("path", { key: 'a1b62a0f772ec9f89126d70ac0bc18c76208d6e3', d: "M12 5v14M5 12h14" })), this.addLabel)), h("span", { key: '1a23f13dcd3eba63ba9d69e54b6311bbc622a5d1', class: "bs-company-switcher__live", "aria-live": "polite" }, this.open && this.q ? (empty ? this.emptyHeading.replace('{query}', this.query.trim()) : `${total} ${total === 1 ? this.matchLabel : this.matchesLabel}`) : ''))));
     }
     static get is() { return "bs-company-switcher"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { render, h, describe, it, expect } from "@stencil/vitest";
+import { contrastRatio, withTheme } from "../../test/helpers/contrast";
 describe('bs-composer', () => {
     it('renders with idle state defaults: ai variant placeholder, enabled mic/action buttons', async () => {
         const { root } = await render(h("bs-composer", null));
@@ -266,4 +267,32 @@ describe('bs-composer', () => {
         action.click();
         expect(spy.length).toBe(0);
     });
+    describe('#47 icons and human border', () => {
+        it('stop icon (generating) is in line with the send icon: 24px svg, 14px square', async () => {
+            const { root } = await render(h("bs-composer", { state: "generating" }));
+            const svg = root.shadowRoot.querySelector('.bs-composer__action svg');
+            expect(svg.getBoundingClientRect().width).toBe(24);
+            expect(svg.getBoundingClientRect().height).toBe(24);
+            expect(svg.querySelector('rect').getBoundingClientRect().width).toBe(14);
+        });
+        it('stop-recording square uses the same sizing as the other action icons', async () => {
+            const { root } = await render(h("bs-composer", { state: "recording" }));
+            const svg = root.shadowRoot.querySelector('.bs-composer__mic svg');
+            expect(svg.getBoundingClientRect().width).toBe(24);
+            expect(svg.querySelector('rect').getBoundingClientRect().width).toBe(14);
+        });
+        for (const theme of ['light', 'dark']) {
+            it(`human dashed border is >= 3:1 against the surface (${theme})`, async () => {
+                await withTheme(theme, async () => {
+                    const { root } = await render(h("bs-composer", { variant: "human" }));
+                    const box = root.shadowRoot.querySelector('.bs-composer');
+                    const cs = getComputedStyle(box);
+                    expect(cs.borderTopStyle).toBe('dashed');
+                    const backdrop = theme === 'dark' ? 'rgb(0, 0, 0)' : 'rgb(255, 255, 255)';
+                    const surface = cs.backgroundColor;
+                    expect(contrastRatio(cs.borderTopColor, surface, backdrop)).toBeGreaterThanOrEqual(3);
+                });
+            });
+        }
+    });
 });

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

@@ -6,7 +6,8 @@
   --bs-composer-bg: var(--bs-input-bg-default);
   --bs-composer-border: var(--bs-input-border-default);
   --bs-composer-border-focus: var(--bs-input-border-focus);
-  --bs-composer-border-human: var(--bs-border-neutral-hover);
+  /* neutral-500 in both themes: >= 3:1 non-text contrast against the composer surface (was neutral-400 / hover, too faint for a dashed line). */
+  --bs-composer-border-human: var(--bs-border-neutral-active);
 
   --bs-composer-action-bg: var(--bs-color-primary-default);
   --bs-composer-action-bg-hover: var(--bs-color-primary-hover);

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: 'd63357675cbf508fc50014a9e2d3c8224bdc0108', class: `bs-composer bs-composer--${this.state} bs-composer--${this.variant}` }, h("div", { key: 'be65e62348956075f765621cb30e76063d85b9e3', part: "attachments", class: `bs-composer__attachments-row ${this.hasAttachments ? 'bs-composer__attachments-row--visible' : ''}` }, h("slot", { key: '8a1bcb47e809ea09db6918a90df7e3ffd5b6e57d', name: "attachments", onSlotchange: this.onAttachmentsSlotchange })), h("div", { key: 'a07dff798906b0532b439c0cb02c0dcee4d87f5d', class: "bs-composer__text-row" }, h("textarea", { key: 'b86a424e4012daa5a7fa8074e742fdc52bff87b8', 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: 'e7c4feda7f407f92372415561fa137c3fc124a6e', class: "bs-composer__controls-row" }, !this.hideAttach && (h("button", { key: '5d5dad6b3e4e63a0affa27f7522586919b8ba66c', type: "button", part: "attach", class: "bs-composer__attach", "aria-label": this.attachLabel, onClick: this.onAttachClick }, h(PlusIcon, { key: 'd1df5c9d4071e2dede7acd9c3923d264b14cea43' }))), 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: 'cb1ca37ee7ce02fb4bfd0fabf762d16030cf5b43', 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: 'c0ca786da9492d16c3a86b4a4f81683aeb2fac0f', 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: '040cc29528d369ef8e8a513058b1b7379cbb6c4a', name: "actions-end" }))));
+        return (h("div", { key: '416af7040863eddb84e74ebb4148cb4faada3675', class: `bs-composer bs-composer--${this.state} bs-composer--${this.variant}` }, h("div", { key: '2d8c75e0c5ad5302095ff5b51b5c665f6c3c1714', part: "attachments", class: `bs-composer__attachments-row ${this.hasAttachments ? 'bs-composer__attachments-row--visible' : ''}` }, h("slot", { key: 'd967bd26e1e417b099619697050a96a53025b1db', name: "attachments", onSlotchange: this.onAttachmentsSlotchange })), h("div", { key: '34c6123ba8cb5bce5e62b3832be0ce8a817a38af', class: "bs-composer__text-row" }, h("textarea", { key: '844bd0b04b04ea5e770b03a95b65e6f49af57a33', 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: '4683c6ed4feb2d41f0fb945db3f387c8a102a740', class: "bs-composer__controls-row" }, !this.hideAttach && (h("button", { key: 'df65b9e140f61740ac341ae4d609863661720122', type: "button", part: "attach", class: "bs-composer__attach", "aria-label": this.attachLabel, onClick: this.onAttachClick }, h(PlusIcon, { key: '1d0d5b0b7a1bfa32720c814c80a0320c2198e8b1' }))), 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: '0512fbc4c613b090bac142bf8fc2ee13e65b2a98', 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: 'd0652637c61e950df6b2f385de679d8c59e6d1fb', 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: '765a453bf75e9d6030f0552cd7b2d12ff8951a6d', name: "actions-end" }))));
     }
     static get is() { return "bs-composer"; }
     static get encapsulation() { return "shadow"; }
@@ -668,5 +668,7 @@ const PlusIcon = () => (h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "h
 const MicIcon = () => (h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M8 9.5C9.10457 9.5 10 8.60457 10 7.5V3.5C10 2.39543 9.10457 1.5 8 1.5C6.89543 1.5 6 2.39543 6 3.5V7.5C6 8.60457 6.89543 9.5 8 9.5Z", stroke: "currentColor", "stroke-width": "1.4" }), h("path", { d: "M3.5 7V7.5C3.5 9.98528 5.51472 12 8 12C10.4853 12 12.5 9.98528 12.5 7.5V7", stroke: "currentColor", "stroke-width": "1.4", "stroke-linecap": "round" }), h("path", { d: "M8 12V14.5", stroke: "currentColor", "stroke-width": "1.4", "stroke-linecap": "round" })));
 // Exact "PaperPlaneRight" path from the Figma design (node 45:95), not a hand-drawn approximation.
 const SendIcon = () => (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M13.5 12H7.5", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M4.54594 20.745C4.4932 20.889 4.48589 21.0457 4.52499 21.1941C4.56409 21.3424 4.64771 21.4751 4.76459 21.5744C4.88147 21.6737 5.02599 21.7348 5.17866 21.7494C5.33133 21.7641 5.48482 21.7315 5.61844 21.6562L21.3684 12.6478C21.4857 12.583 21.5834 12.4879 21.6514 12.3725C21.7195 12.2571 21.7553 12.1255 21.7553 11.9916C21.7553 11.8576 21.7195 11.7261 21.6514 11.6107C21.5834 11.4952 21.4857 11.4002 21.3684 11.3353L5.61844 2.34937C5.48523 2.27487 5.33245 2.24278 5.18052 2.2574C5.02859 2.27201 4.88474 2.33264 4.76817 2.43117C4.65161 2.5297 4.56788 2.66145 4.52817 2.80882C4.48846 2.9562 4.49466 3.11218 4.54594 3.25594L7.5 12L4.54594 20.745Z", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })));
-const StopIcon = () => (h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("rect", { x: "6", y: "6", width: "8", height: "8", rx: "1.5", fill: "currentColor" })));
+// 24x24 viewBox like the send icon, with a 14px square (Phosphor "Stop" proportions) so the glyph
+// is visually in line with the other 24px action icons (#47) instead of a tiny 8px-of-20 square.
+const StopIcon = () => (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("rect", { x: "5", y: "5", width: "14", height: "14", rx: "2", fill: "currentColor" })));
 const CheckIcon = () => (h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M4.5 10.5L8 14L15.5 6", stroke: "currentColor", "stroke-width": "1.75", "stroke-linecap": "round", "stroke-linejoin": "round" })));

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

@@ -24,7 +24,6 @@ const meta = {
         variant: 'ai',
         state: 'idle',
         value: '',
-        placeholder: '',
     },
 };
 export default meta;

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: '275d6a4c6eae013bf2f9804857baba9d0a2917a8', role: this.roleForType(), "aria-busy": this.loading ? 'true' : undefined, class: `bs-composer-status-banner bs-composer-status-banner--${this.type}` }, h("div", { key: '756473764a79392e539a0f0ec724374866385c0b', class: "bs-composer-status-banner__message-group" }, this.showIcon && (h("span", { key: 'e49eebafc231aa5987967672df2b9ffe2b3f951e', part: "icon", class: "bs-composer-status-banner__icon" }, h("slot", { key: '1047ceaf71e08f90bb7224aee6207a65e9fefd4d', name: "icon" }, this.renderDefaultIcon()))), h("p", { key: 'a0433bc0d21420bc561e0fdccfdfc75cb76f8bf3', part: "message", class: "bs-composer-status-banner__message" }, this.message)), this.showButton && (h("button", { key: '4291b58cc42d22395fe831eda2850725fcc3bda9', type: "button", part: "action", class: "bs-composer-status-banner__action", onClick: this.onActionClick }, this.actionLabel)), this.allowClose && (h("button", { key: '91d659760339c80414a59ef65bf053f9ad0aaceb', type: "button", part: "close", class: "bs-composer-status-banner__close", "aria-label": this.closeLabel, onClick: this.onCloseClick }, h(CloseIcon, { key: '47c78a3753c2a62c0a859771b89102bc974b32a6' })))));
+        return (h("div", { key: '4173ee7cafd8b0a9de1c42726f34603c0ea6a077', role: this.roleForType(), "aria-busy": this.loading ? 'true' : undefined, class: `bs-composer-status-banner bs-composer-status-banner--${this.type}` }, h("div", { key: '7e942c33c06a1a806533571f613ddb8a78f8fbea', class: "bs-composer-status-banner__message-group" }, this.showIcon && (h("span", { key: '3de54acd3358d58a92ab78e8d1414a12a26a7425', part: "icon", class: "bs-composer-status-banner__icon" }, h("slot", { key: '15ad484ca165d4b22b36ee060c74ba8dd7ea6c1c', name: "icon" }, this.renderDefaultIcon()))), h("p", { key: '85334062e6ca408cfbcb2d7bedbfdc13b386966a', part: "message", class: "bs-composer-status-banner__message" }, this.message)), this.showButton && (h("button", { key: 'a045fcb54035c3b99c9fc4fc1e0d6de0f23ebf65', type: "button", part: "action", class: "bs-composer-status-banner__action", onClick: this.onActionClick }, this.actionLabel)), this.allowClose && (h("button", { key: 'b40d66a3f2f1859d71c72e1de33e8b40391f6d72', type: "button", part: "close", class: "bs-composer-status-banner__close", "aria-label": this.closeLabel, onClick: this.onCloseClick }, h(CloseIcon, { key: '2836eb8a2f2ff9e3f20fe07dd67d7ec7bc184104' })))));
     }
     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: '340c37cb6fc2d4b45a8581a49e70914c56f6d41e', style: { '--bs-container-padding-token': `var(--bs-spacing-${pad})` } }, h("slot", { key: '1c20b5de141a8329e9eb6c086073b7afab41b506' })));
+        return (h(Host, { key: '354c927b3ce1a6958b59ae15f8c6e560cbb828d2', style: { '--bs-container-padding-token': `var(--bs-spacing-${pad})` } }, h("slot", { key: '06c33b3028219e8cd771aceae1253c2239d34432' })));
     }
     static get is() { return "bs-container"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-cookie-consent/bs-cookie-consent.cmp.test.js

@@ -206,7 +206,7 @@ describe('bs-cookie-consent', () => {
             expect(bar.shadowRoot.querySelector('[part="action"]').getBoundingClientRect().height).toBe(44);
         });
         it('is 660x64 with the message on one line, as in the Figma', async () => {
-            const { root: wrap } = await render(h("div", { style: { width: '700px' } }, h("bs-cookie-consent", { type: "saved", description: "Cookie choices saved. Change them any time under Settings \u203A Privacy." })));
+            const { root: wrap } = await render(h("div", { style: { width: '700px' } }, h("bs-cookie-consent", { type: "saved", description: "Cookie choices saved." })));
             await wait(200);
             const bar = wrap.querySelector('bs-cookie-consent').shadowRoot.querySelector('[part="container"]');
             const box = bar.getBoundingClientRect();

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

@@ -1,4 +1,5 @@
 import { render, h, describe, it, expect } from "@stencil/vitest";
+import { resolveColor, withTheme } from "../../test/helpers/contrast";
 const columns = [
     { key: 'name', label: 'Name' },
     { key: 'status', label: 'Status' },
@@ -124,4 +125,42 @@ describe('bs-data-table', () => {
             expect(cell.querySelector('button')).not.toBeNull();
         });
     });
+    describe('striped', () => {
+        const rowBg = (root, i) => getComputedStyle(root.shadowRoot.querySelectorAll('tbody tr')[i]).backgroundColor;
+        it('reflects the attribute and tints only even rows', async () => {
+            const { root } = await render(h("bs-data-table", { striped: true, columns: columns, rows: rows }));
+            expect(root).toHaveAttribute('striped');
+            expect(rowBg(root, 1)).not.toBe(rowBg(root, 0));
+            expect(rowBg(root, 2)).toBe(rowBg(root, 0));
+        });
+        it('has no stripes by default', async () => {
+            const { root } = await render(h("bs-data-table", { columns: columns, rows: rows }));
+            expect(rowBg(root, 1)).toBe(rowBg(root, 0));
+        });
+    });
+    describe('slotted cells', () => {
+        it('shows the text value as the slot fallback', async () => {
+            const { root } = await render(h("bs-data-table", { columns: columns, rows: rows }));
+            expect(root.shadowRoot.querySelector('slot[name="cell-2-name"]').textContent).toBe('Noah');
+        });
+        it('lets app-owned content (a link) fill one cell through its named slot', async () => {
+            const { root } = await render(h("bs-data-table", { columns: columns, rows: rows }, h("a", { slot: "cell-2-name", href: "/people/2" }, "Noah (profile)")));
+            const slot = root.shadowRoot.querySelector('slot[name="cell-2-name"]');
+            const assigned = slot.assignedElements();
+            expect(assigned.length).toBe(1);
+            expect(assigned[0].tagName).toBe('A');
+            expect(assigned[0].getAttribute('href')).toBe('/people/2');
+        });
+    });
+    describe('cell text colour (#30)', () => {
+        for (const theme of ['light', 'dark']) {
+            it(`cell text uses --bs-text-default (${theme}), not hard-coded black`, async () => {
+                await withTheme(theme, async () => {
+                    const { root } = await render(h("bs-data-table", { columns: columns, rows: rows }));
+                    const cell = root.shadowRoot.querySelector('td[part="cell"]');
+                    expect(getComputedStyle(cell).color).toBe(resolveColor(document.body, 'var(--bs-text-default)', 'color'));
+                });
+            });
+        }
+    });
 });