@brandsync/wc 1.12.1 → 1.14.0

package/dist/collection/components/bs-citation-preview/bs-citation-preview.js

@@ -0,0 +1,154 @@
+import { h } from "@stencil/core";
+/**
+ * Presentational card previewing a cited source: file name, originating system, page number and a
+ * snippet of the cited text. It does no fetching -- the consumer supplies content through slots.
+ * When `href` is set, the header becomes a link action.
+ *
+ * Composed from: `bs-card` (the surface) and `bs-source-link` (the file name / source header and
+ * open action).
+ *
+ * ## When to use
+ * - Showing the passage a chat answer was grounded in, e.g. on citation hover/click.
+ *
+ * ## When not to use
+ * - As a list row of sources -- use `bs-source-link` directly in `bs-chatbot-sources-drawer`.
+ *
+ * @slot - The snippet / preview content (text, highlighted excerpt, image).
+ * @slot footer - Overrides the default footer (page label).
+ * @part container - The card surface (`bs-card`).
+ * @part header - The `bs-source-link` header.
+ * @part snippet - The snippet wrapper.
+ * @part page - The page label.
+ * @prop --bs-citation-preview-gap - Gap between header, snippet and footer. Aliased to `--bs-spacing-100`.
+ * @prop --bs-citation-preview-snippet-color - Snippet text color. Aliased to `--bs-text-default`.
+ * @prop --bs-citation-preview-snippet-bg - Snippet background. Aliased to `--bs-surface-base`.
+ * @prop --bs-citation-preview-snippet-radius - Snippet corner radius. Aliased to `--bs-border-radius-100`.
+ * @prop --bs-citation-preview-page-color - Page label color. Aliased to `--bs-text-secondary`.
+ */
+export class BsCitationPreview {
+    /** The cited document's file name. */
+    fileName = 'Source';
+    /** The system/app the document came from. */
+    sourceName;
+    /** Page (or page range) of the citation, shown as "Page N". */
+    page;
+    /** If set, the header becomes a link that opens this URL. */
+    href;
+    /** Fires when the header action is activated (whether or not `href` is set). */
+    bsOpen;
+    render() {
+        const hasPage = this.page !== undefined && this.page !== null && this.page !== '';
+        return (h("bs-card", { key: 'e36c3d18f75f3d7a90aa18896889e135903dd646', part: "container", class: "bs-citation-preview", surface: "base" }, h("div", { key: 'f4e41670ebf4db3e335ce67b34d4f074af171be9', class: "bs-citation-preview__body" }, h("bs-source-link", { key: '4ec6c8a5c43eccb5d2f5a5bc725d4a43140e2fa2', part: "header", fileName: this.fileName, sourceName: this.sourceName, href: this.href, onBsOpen: () => this.bsOpen.emit() }), h("div", { key: '187e76af345603c54639211e287fd5d6c9f7c5b0', part: "snippet", class: "bs-citation-preview__snippet" }, h("slot", { key: 'af7cc7f6020888416c4efef5068584337f93e3af' })), h("div", { key: '75e18be6c910a8d1dd9953b8640c2a446c41b6a0', class: "bs-citation-preview__footer" }, h("slot", { key: '109bc862aa76158bddfc0474464a5fbcebbbae62', name: "footer" }, hasPage && (h("span", { key: 'de8bdfd079b158f9a7c9dbfb0c96f72e6e5ed35b', part: "page", class: "bs-citation-preview__page" }, "Page ", this.page)))))));
+    }
+    static get is() { return "bs-citation-preview"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-citation-preview.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-citation-preview.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "fileName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The cited document's file name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "file-name",
+                "defaultValue": "'Source'"
+            },
+            "sourceName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The system/app the document came from."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "source-name"
+            },
+            "page": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Page (or page range) of the citation, shown as \"Page N\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "page"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If set, the header becomes a link that opens this URL."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsOpen",
+                "name": "bsOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the header action is activated (whether or not `href` is set)."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/bs-citation-preview/bs-citation-preview.stories.js

@@ -0,0 +1,22 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const meta = {
+    title: 'Genie AI Components/bs-citation-preview',
+    parameters: { docs: { description: { component: componentDescription('bs-citation-preview') } } },
+    render: args => html `
+    <bs-citation-preview file-name=${args.fileName} source-name=${args.sourceName} page=${args.page} href=${args.href}>
+      Employees accrue 25 days of paid leave per calendar year, pro rata for part-time contracts.
+    </bs-citation-preview>
+  `,
+    argTypes: {
+        fileName: { control: 'text', description: propDescription('bs-citation-preview', 'fileName') },
+        sourceName: { control: 'text', description: propDescription('bs-citation-preview', 'sourceName') },
+        page: { control: 'text', description: propDescription('bs-citation-preview', 'page') },
+        href: { control: 'text', description: propDescription('bs-citation-preview', 'href') },
+    },
+    args: { fileName: 'Employee Handbook 2026', sourceName: 'HoltePortalen', page: '12', href: '' },
+};
+export default meta;
+export const Default = {};
+export const WithoutPage = { name: 'Without page', args: { page: '' } };
+export const WithLink = { name: 'With link', args: { href: 'https://example.com/handbook.pdf' } };

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

@@ -135,7 +135,7 @@ describe('bs-composer', () => {
     });
     describe('state="idle"', () => {
         it('shows the send icon and enabled action/mic buttons, and emits bsSubmit on action click', async () => {
-            const { root, spyOnEvent } = await render(h("bs-composer", { state: "idle" }));
+            const { root, spyOnEvent } = await render(h("bs-composer", { state: "idle", value: "hello" }));
             const submitSpy = spyOnEvent('bsSubmit');
             const stopSpy = spyOnEvent('bsStop');
             const confirmSpy = spyOnEvent('bsVoiceConfirm');
@@ -153,12 +153,18 @@ describe('bs-composer', () => {
             expect(spy).toHaveReceivedEventTimes(1);
         });
         it('emits bsSubmit when Enter alone is pressed in the text field', async () => {
-            const { root, spyOnEvent } = await render(h("bs-composer", { state: "idle" }));
+            const { root, spyOnEvent } = await render(h("bs-composer", { state: "idle", value: "hello" }));
             const spy = spyOnEvent('bsSubmit');
             const textarea = root.shadowRoot.querySelector('textarea');
             textarea.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, composed: true, cancelable: true }));
             expect(spy).toHaveReceivedEventTimes(1);
         });
+        it('does not emit bsSubmit when the value is empty or whitespace-only', async () => {
+            const { root, spyOnEvent } = await render(h("bs-composer", { state: "idle", value: "   " }));
+            const spy = spyOnEvent('bsSubmit');
+            root.shadowRoot.querySelector('[part="action"]').click();
+            expect(spy.length).toBe(0);
+        });
         it('does not emit bsSubmit and inserts a newline when Shift+Enter is pressed', async () => {
             const { root, spyOnEvent } = await render(h("bs-composer", { state: "idle" }));
             const spy = spyOnEvent('bsSubmit');
@@ -239,4 +245,25 @@ describe('bs-composer', () => {
         await waitForChanges();
         expect(root).toEqualAttribute('state', 'recording');
     });
+    it('removes the attach and mic buttons from the DOM with hideAttach / hideMic', async () => {
+        const { root } = await render(h("bs-composer", { hideAttach: true, hideMic: true }));
+        expect(root.shadowRoot.querySelector('[part="attach"]')).toBeNull();
+        expect(root.shadowRoot.querySelector('[part="mic"]')).toBeNull();
+        expect(root.shadowRoot.querySelector('[part="action"]')).not.toBeNull();
+    });
+    it('applies maxLength to the textarea and overrides labels', async () => {
+        const { root } = await render(h("bs-composer", { maxLength: 5, sendLabel: "Send it", attachLabel: "Vedh\u00E6ft" }));
+        expect(root.shadowRoot.querySelector('textarea').maxLength).toBe(5);
+        expect(root.shadowRoot.querySelector('[part="action"]')).toEqualAttribute('aria-label', 'Send it');
+        expect(root.shadowRoot.querySelector('[part="attach"]')).toEqualAttribute('aria-label', 'Vedhæft');
+    });
+    it('shows a spinner, sets aria-busy and ignores submit while loading', async () => {
+        const { root, spyOnEvent } = await render(h("bs-composer", { state: "idle", value: "hello", loading: true }));
+        const spy = spyOnEvent('bsSubmit');
+        const action = root.shadowRoot.querySelector('[part="action"]');
+        expect(action.querySelector('.bs-composer__spinner')).not.toBeNull();
+        expect(action).toEqualAttribute('aria-busy', 'true');
+        action.click();
+        expect(spy.length).toBe(0);
+    });
 });

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

@@ -210,3 +210,19 @@
   color: var(--bs-composer-action-icon-disabled);
   cursor: not-allowed;
 }
+
+.bs-composer__spinner {
+  animation: bs-composer-spin 1s linear infinite;
+}
+
+@keyframes bs-composer-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bs-composer__spinner {
+    animation-duration: 4s;
+  }
+}

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

@@ -100,13 +100,37 @@ export class BsComposer {
      * accessible name -- set it in every real usage.
      */
     ariaLabel = null;
+    /** Waiting state (e.g. the request was sent but no token has streamed in yet): replaces the send
+     * icon with a spinner, sets `aria-busy`, and makes the primary action inert so a second submit
+     * can't fire. Only has an effect while `state="idle"`; use `state="generating"` once streaming
+     * starts so the Stop button appears. */
+    loading = false;
+    /** Maximum number of characters the text field accepts (native `maxlength`). Unset = unlimited. */
+    maxLength;
+    /** Removes the attach ("+") button from the DOM. */
+    hideAttach = false;
+    /** Removes the mic button from the DOM. */
+    hideMic = false;
+    /** Accessible name of the attach button. */
+    attachLabel = 'Attach';
+    /** Accessible name of the mic button while not recording. */
+    micLabel = 'Start voice input';
+    /** Accessible name of the mic button while `state="recording"`. */
+    stopRecordingLabel = 'Stop recording';
+    /** Accessible name of the primary action button in `idle` / `disabled` state. */
+    sendLabel = 'Send';
+    /** Accessible name of the primary action button while `state="generating"`. */
+    stopLabel = 'Stop';
+    /** Accessible name of the primary action button while `state="recording"`. */
+    confirmLabel = 'Confirm';
     /** Tracks whether the `attachments` slot has assigned content, so the row above the text field
      * (padding, border) only takes up space when a consumer has actually put something there --
      * same reasoning/pattern as `hasIcon`/`hasLabel` in `bs-attachment`. */
     hasAttachments = false;
     /** Fires on every keystroke in the text field, with the current value. */
     bsInput;
-    /** Fires when the primary action button is clicked while `state="idle"`. */
+    /** Fires when the primary action button is clicked while `state="idle"` and `value` is non-empty
+     * (whitespace-only counts as empty). */
     bsSubmit;
     /** Fires when the primary action button is clicked while `state="generating"`. */
     bsStop;
@@ -179,6 +203,8 @@ export class BsComposer {
     };
     onActionClick = () => {
         if (this.state === 'idle') {
+            if (this.loading || !this.value.trim())
+                return;
             this.bsSubmit.emit();
         }
         else if (this.state === 'generating') {
@@ -190,12 +216,14 @@ export class BsComposer {
     };
     actionLabel() {
         if (this.state === 'generating')
-            return 'Stop';
+            return this.stopLabel;
         if (this.state === 'recording')
-            return 'Confirm';
-        return 'Send';
+            return this.confirmLabel;
+        return this.sendLabel;
     }
     renderActionIcon() {
+        if (this.loading && this.state === 'idle')
+            return h(SpinnerIcon, null);
         if (this.state === 'generating')
             return h(StopIcon, null);
         if (this.state === 'recording')
@@ -206,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: '8313dc19fa583114e96203cb07be9ac114afe6f2', class: `bs-composer bs-composer--${this.state} bs-composer--${this.variant}` }, h("div", { key: '2aaef774ce964d33342bce9126c4537dd8c3f844', part: "attachments", class: `bs-composer__attachments-row ${this.hasAttachments ? 'bs-composer__attachments-row--visible' : ''}` }, h("slot", { key: 'fd673d9316b78516f3b828585a264005306c42f2', name: "attachments", onSlotchange: this.onAttachmentsSlotchange })), h("div", { key: 'b3dbfc51f3451ae573443865487b6cd5cf20edb3', class: "bs-composer__text-row" }, h("textarea", { key: '10318ae3174f0491ead324fec41a12cc5135407a', ref: el => (this.inputEl = el), part: "input", class: "bs-composer__input", rows: 1, value: this.value, placeholder: placeholder, disabled: disabled, "aria-label": this.ariaLabel, onInput: this.onInput, onKeyDown: this.onInputKeydown })), h("div", { key: 'e298d4239e7868c97599c430397e8dedde4926c2', class: "bs-composer__controls-row" }, h("button", { key: 'a39c4810329fe7e198645e5e0ab29003916dd6d8', type: "button", part: "attach", class: "bs-composer__attach", "aria-label": "Attach", onClick: this.onAttachClick }, h(PlusIcon, { key: '9d58e6a54c91eb6d2c658ee203eb6ae37eeabea5' })), 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" })), h("button", { key: '21f7f81e1273b240dc0bb35f96dac43976d76672', type: "button", part: "mic", class: `bs-composer__mic ${recording ? 'bs-composer__mic--recording' : ''}`, "aria-label": recording ? 'Stop recording' : 'Start voice input', disabled: disabled, onClick: this.onMicClick }, recording ? h(StopIcon, null) : h(MicIcon, null)), h("button", { key: '76f9d399d49c5f7248770a5a2845a2ab8b2e26e1', type: "button", part: "action", class: `bs-composer__action bs-composer__action--${this.state}`, "aria-label": this.actionLabel(), disabled: disabled, onClick: this.onActionClick }, this.renderActionIcon()), h("slot", { key: '4de2116117e03382f89c1a409fcb2ecb38aa89ff', name: "actions-end" }))));
+        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" }))));
     }
     static get is() { return "bs-composer"; }
     static get encapsulation() { return "shadow"; }
@@ -333,6 +361,205 @@ export class BsComposer {
                 "reflect": false,
                 "attribute": "aria-label",
                 "defaultValue": "null"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Waiting state (e.g. the request was sent but no token has streamed in yet): replaces the send\nicon with a spinner, sets `aria-busy`, and makes the primary action inert so a second submit\ncan't fire. Only has an effect while `state=\"idle\"`; use `state=\"generating\"` once streaming\nstarts so the Stop button appears."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "maxLength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum number of characters the text field accepts (native `maxlength`). Unset = unlimited."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-length"
+            },
+            "hideAttach": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Removes the attach (\"+\") button from the DOM."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-attach",
+                "defaultValue": "false"
+            },
+            "hideMic": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Removes the mic button from the DOM."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-mic",
+                "defaultValue": "false"
+            },
+            "attachLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the attach button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "attach-label",
+                "defaultValue": "'Attach'"
+            },
+            "micLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the mic button while not recording."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mic-label",
+                "defaultValue": "'Start voice input'"
+            },
+            "stopRecordingLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the mic button while `state=\"recording\"`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "stop-recording-label",
+                "defaultValue": "'Stop recording'"
+            },
+            "sendLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the primary action button in `idle` / `disabled` state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "send-label",
+                "defaultValue": "'Send'"
+            },
+            "stopLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the primary action button while `state=\"generating\"`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "stop-label",
+                "defaultValue": "'Stop'"
+            },
+            "confirmLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the primary action button while `state=\"recording\"`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "confirm-label",
+                "defaultValue": "'Confirm'"
             }
         };
     }
@@ -365,7 +592,7 @@ export class BsComposer {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Fires when the primary action button is clicked while `state=\"idle\"`."
+                    "text": "Fires when the primary action button is clicked while `state=\"idle\"` and `value` is non-empty\n(whitespace-only counts as empty)."
                 },
                 "complexType": {
                     "original": "void",
@@ -436,6 +663,7 @@ export class BsComposer {
     }
     static get elementRef() { return "el"; }
 }
+const SpinnerIcon = () => (h("svg", { class: "bs-composer__spinner", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("circle", { cx: "10", cy: "10", r: "7.25", stroke: "currentColor", "stroke-opacity": "0.25", "stroke-width": "1.5" }), h("path", { d: "M17.25 10A7.25 7.25 0 0 0 10 2.75", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" })));
 const PlusIcon = () => (h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M8 2.5V13.5M2.5 8H13.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" })));
 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.

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

@@ -85,4 +85,9 @@ describe('bs-composer-status-banner', () => {
         root.shadowRoot.querySelector('[part="close"]').click();
         expect(closeSpy).toHaveReceivedEventTimes(1);
     });
+    it('shows a spinner and aria-busy while loading', async () => {
+        const { root } = await render(h("bs-composer-status-banner", { type: "info", loading: true }));
+        expect(root.shadowRoot.querySelector('.bs-composer-status-banner__spinner')).not.toBeNull();
+        expect(root.shadowRoot.querySelector('[role]')).toEqualAttribute('aria-busy', 'true');
+    });
 });

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

@@ -171,3 +171,19 @@
   outline: 2px solid var(--bs-border-neutral-focus);
   outline-offset: 1px;
 }
+
+.bs-composer-status-banner__spinner {
+  animation: bs-composer-status-banner-spin 1s linear infinite;
+}
+
+@keyframes bs-composer-status-banner-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bs-composer-status-banner__spinner {
+    animation-duration: 4s;
+  }
+}