@brandsync/wc 1.19.0 → 1.20.1

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

@@ -0,0 +1,132 @@
+/**
+ * @prop --bs-code-block-bg: Background of the block and of inline code. Aliased to --bs-surface-container.
+ * @prop --bs-code-block-color: Code text colour. Aliased to --bs-text-default.
+ * @prop --bs-code-block-border-color: Border colour of the block. Aliased to --bs-border-neutral-container.
+ * @prop --bs-code-block-radius: Corner radius of the block. Aliased to --bs-border-radius-100.
+ * @prop --bs-code-block-padding: Padding around the code. Aliased to --bs-spacing-200.
+ * @prop --bs-code-block-font-family: Monospace font stack (the tokens define no monospace family).
+ * @prop --bs-code-block-font-size: Code font size. Aliased to --bs-font-size-sm.
+ * @prop --bs-code-block-line-height: Code line height. Aliased to --bs-line-height-relaxed.
+ * @prop --bs-code-block-header-color: Filename colour. Aliased to --bs-text-secondary.
+ * @prop --bs-code-block-line-number-color: Line number colour. Aliased to --bs-text-secondary (muted fails contrast on the code surface).
+ * @prop --bs-code-block-inline-padding: Padding of inline code. Aliased to 0 --bs-spacing-50.
+ * @prop --bs-code-block-inline-radius: Corner radius of inline code. Aliased to --bs-border-radius-50.
+ */
+:host {
+  display: block;
+
+  --bs-code-block-bg: var(--bs-surface-container);
+  --bs-code-block-color: var(--bs-text-default);
+  --bs-code-block-border-color: var(--bs-border-neutral-container);
+  --bs-code-block-radius: var(--bs-border-radius-100);
+  --bs-code-block-padding: var(--bs-spacing-200);
+  --bs-code-block-font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
+  --bs-code-block-font-size: var(--bs-font-size-sm);
+  --bs-code-block-line-height: var(--bs-line-height-relaxed);
+  --bs-code-block-header-color: var(--bs-text-secondary);
+  --bs-code-block-line-number-color: var(--bs-text-secondary);
+  --bs-code-block-inline-padding: 0 var(--bs-spacing-50);
+  --bs-code-block-inline-radius: var(--bs-border-radius-50);
+}
+
+:host([inline]) {
+  display: inline;
+}
+
+.bs-code-block {
+  --bs-card-bg: var(--bs-code-block-bg);
+  --bs-card-radius: var(--bs-code-block-radius);
+  --bs-card-padding: 0px;
+  --bs-card-border-width: 1px;
+  --bs-card-border-color: var(--bs-code-block-border-color);
+  --bs-card-shadow: none;
+  color: var(--bs-code-block-color);
+}
+
+.bs-code-block__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--bs-spacing-100);
+  box-sizing: border-box;
+  padding: var(--bs-spacing-50) var(--bs-spacing-100) var(--bs-spacing-50) var(--bs-code-block-padding);
+  border-bottom: 1px solid var(--bs-code-block-border-color);
+  font-size: var(--bs-font-size-sm);
+  color: var(--bs-code-block-header-color);
+}
+
+.bs-code-block__filename {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bs-code-block__body {
+  display: flex;
+  overflow-x: auto;
+  padding: var(--bs-code-block-padding);
+}
+
+.bs-code-block__body:focus-visible {
+  outline: 2px solid var(--bs-focus-ring, var(--bs-color-primary-default));
+  outline-offset: -2px;
+}
+
+.bs-code-block__pre,
+.bs-code-block__numbers {
+  margin: 0;
+  font-family: var(--bs-code-block-font-family);
+  font-size: var(--bs-code-block-font-size);
+  line-height: var(--bs-code-block-line-height);
+}
+
+.bs-code-block__pre {
+  flex: 1 0 auto;
+  min-width: 0;
+  tab-size: 2;
+}
+
+.bs-code-block__body--wrap .bs-code-block__pre {
+  flex: 1 1 auto;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.bs-code-block__numbers {
+  flex: none;
+  padding-inline-end: var(--bs-spacing-200);
+  text-align: end;
+  color: var(--bs-code-block-line-number-color);
+  user-select: none;
+}
+
+.bs-code-block__code {
+  font-family: inherit;
+}
+
+/* Inline code. */
+:host([inline]) .bs-code-block__code {
+  padding: var(--bs-code-block-inline-padding);
+  border-radius: var(--bs-code-block-inline-radius);
+  background: var(--bs-code-block-bg);
+  color: var(--bs-code-block-color);
+  font-family: var(--bs-code-block-font-family);
+  font-size: 0.9em;
+}
+
+.bs-code-block__live {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (forced-colors: active) {
+  :host([inline]) .bs-code-block__code { border: 1px solid CanvasText; }
+}

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.cmp.test.js

@@ -85,6 +85,17 @@ describe('bs-company-switcher', () => {
         expect(q(el, '[part="list"]')).toBeNull();
         expect(q(el, '[part="footer"]')).not.toBeNull();
     });
+    it('reports the search combobox as expanded only while there is a listbox to control', async () => {
+        const { el, type } = await make({ open: true });
+        const search = q(el, '[part="search"]');
+        expect(search.getAttribute('aria-expanded')).toBe('true');
+        expect(search.getAttribute('aria-controls')).toBe(q(el, '[part="list"]').id);
+        await type('zzz');
+        expect(search.getAttribute('aria-expanded')).toBe('false');
+        expect(search.hasAttribute('aria-controls')).toBe(false);
+        await type('');
+        expect(search.getAttribute('aria-expanded')).toBe('true');
+    });
     it('navigates with arrow keys and switches with Enter', async () => {
         const { el, press, waitForChanges } = await make({ open: true });
         await settle();
@@ -157,15 +168,10 @@ describe('bs-company-switcher', () => {
         expect(q(el, 'bs-input').placeholder).toBe('Finn selskap');
         expect(q(el, '[part="footer"]').textContent).toContain('Administrer');
     });
-    it('has no axe violations open (apart from bs-popover\'s own trigger wrapper)', async () => {
+    it('has no axe violations open', async () => {
         const { el } = await make({ open: true });
-        // Known gap in bs-popover: its trigger wrapper <div> carries aria-expanded/haspopup without a role
-        // (bs-popover's own tests assert those attributes), so axe flags aria-allowed-attr on it.
         const results = await axe.run(el);
-        const violations = results.violations
-            .map(v => ({ ...v, nodes: v.nodes.filter(n => !n.html.includes('bs-popover__trigger')) }))
-            .filter(v => v.nodes.length)
-            .map(v => `${v.id}: ${v.help}`);
+        const violations = results.violations.map(v => `${v.id}: ${v.help}`);
         expect(violations).toEqual([]);
     });
 });

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: '9cbdbdc07a5c673c21bb2af85d0e22d941278cc7', part: "search", role: "combobox", "aria-label": this.searchPlaceholder, "aria-expanded": groups.length ? 'true' : 'false', "aria-haspopup": "listbox", "aria-controls": groups.length ? listId : undefined, "aria-activedescendant": this.activeId ?? undefined, onKeyDown: this.onKeyDown }, h("bs-input", { key: 'd48151ab5c7b3c52bd5272b276ed65b050ba8a86', ref: el => (this.inputEl = el), type: "search", value: this.query, placeholder: this.searchPlaceholder, onBsInput: this.onInput }))), groups.length > 0 && (h("div", { key: 'd7cbca7fbfea209e5063e997e0277e72833bae6e', 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: '5dbff2f753d480fb8e3633ceed77ee4b746e96af', part: "empty", class: "bs-company-switcher__empty", heading: this.emptyHeading.replace('{query}', this.query.trim()), description: this.emptyDescription }, h("svg", { key: 'b179aa273060b4f8b2c4e07844d6616f33f3985d', slot: "icon", ...svgProps }, h("circle", { key: 'd48847aaaea92eb7e6af0c39285cfa445f508114', cx: "11", cy: "11", r: "7" }), h("path", { key: '9b5f6c641c50a6d280c149da5f70871ee2d85032', d: "m20 20-3.5-3.5" })))), h("bs-divider", { key: '25bee440e7b15f68b3f451ef669c2efaae26c400', class: "bs-company-switcher__divider", decorative: true }), h("div", { key: '2c29e55970179036fc837352f5112bbc5b3b5429', part: "footer", class: "bs-company-switcher__footer" }, h("bs-button", { key: '34a9b9188c87c2c335a7eaf96fd3e0b445d1f374', variant: "subtle", size: "sm", onClick: () => this.bsManageCompanies.emit() }, h("svg", { key: '14277686d69b74c005f62ce0d483b1f6ef70ee7e', slot: "icon", ...svgProps }, h("circle", { key: '98423b978ae2ba9d0b8e17892d6269d2baf005e1', cx: "12", cy: "12", r: "3" }), h("path", { key: 'b61815c0f8c56ca6dd9de05d5d5b58738648a08d', 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: '4c83a67e7f54352e839b84b23a4aeb3b74ea26af', variant: "subtle", size: "sm", onClick: () => this.bsAddCompanies.emit() }, h("svg", { key: 'e504aeb192774bd8093e04c0795bd3ab700596a8', slot: "icon", ...svgProps }, h("path", { key: '0806d38b7b739308432dff3f71696cd92923f4ca', d: "M12 5v14M5 12h14" })), this.addLabel)), h("span", { key: 'e7ef671da5d9ac2431cd8f27dcc30985046946ac', 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);