@brandsync/wc 0.0.8 → 0.0.10

package/dist/collection/components/bs-chatbot-sources-drawer/bs-chatbot-sources-drawer.js

@@ -0,0 +1,142 @@
+import { h } from "@stencil/core";
+/**
+ * The "Sources" panel shown alongside a Genie AI chat response -- a header with a title, a count
+ * badge, and a collapse chevron, above a stack of `bs-source-link` citation rows.
+ *
+ * ## When to use
+ * - Displaying the documents/sources a Genie response cited, typically opened from a "view
+ *   sources" action on a `bs-chatbot-response-action` bar.
+ *
+ * ## When not to use
+ * - A generic list container -- this component's header (title + count + collapse) is
+ *   purpose-built for the sources use case.
+ *
+ * @slot - One or more `bs-source-link` rows.
+ * @slot collapse-icon - Overrides the default collapse chevron icon.
+ * @part heading - The "Sources" title text.
+ * @part count - The count badge next to the title.
+ * @part collapse - The collapse chevron button.
+ * @part list - The scrollable container of slotted `bs-source-link` rows.
+ * @prop --bs-chatbot-sources-drawer-bg - Background of the whole panel. Aliased to `--bs-surface-raised`.
+ * @prop --bs-chatbot-sources-drawer-header-shadow - Drop shadow under the header, separating it
+ *   from the scrolled list. Aliased to `--bs-shadow-xs`.
+ * @prop --bs-chatbot-sources-drawer-header-padding-x - Aliased to `--bs-spacing-200`.
+ * @prop --bs-chatbot-sources-drawer-header-padding-top - Aliased to `--bs-spacing-150`.
+ * @prop --bs-chatbot-sources-drawer-header-padding-bottom - Aliased to `--bs-spacing-100`.
+ * @prop --bs-chatbot-sources-drawer-heading-color - Aliased to `--bs-text-default`.
+ * @prop --bs-chatbot-sources-drawer-count-bg - Count badge background. Aliased to
+ *   `--bs-badge-bg-neutral-container`.
+ * @prop --bs-chatbot-sources-drawer-count-color - Count badge text color. Aliased to
+ *   `--bs-badge-text-neutral`.
+ * @prop --bs-chatbot-sources-drawer-collapse-hover - Collapse button background on hover. Aliased
+ *   to `--bs-surface-hover`.
+ * @prop --bs-chatbot-sources-drawer-section-gap - Gap between the header and the list. Aliased to
+ *   `--bs-spacing-200`.
+ * @prop --bs-chatbot-sources-drawer-list-padding - Horizontal/bottom padding of the list. Aliased
+ *   to `--bs-spacing-200`.
+ * @prop --bs-chatbot-sources-drawer-list-gap - Gap between rows. Aliased to `--bs-spacing-50`.
+ */
+export class BsChatbotSourcesDrawer {
+    el;
+    /** The panel title. */
+    heading = 'Sources';
+    /**
+     * Overrides the auto-detected count badge. By default the badge reflects the number of slotted
+     * `bs-source-link` children, so most consumers don't need to set this.
+     */
+    count;
+    /** Fires when the collapse chevron is clicked. The consuming app owns actually hiding the panel. */
+    bsCollapse;
+    slottedCount = 0;
+    onSlotchange = (event) => {
+        const slot = event.target;
+        this.slottedCount = slot.assignedElements().filter(el => el.tagName.toLowerCase() === 'bs-source-link').length;
+    };
+    onCollapseClick = () => {
+        this.bsCollapse.emit();
+    };
+    render() {
+        const displayCount = this.count ?? this.slottedCount;
+        return (h("div", { key: '54cb56455b630d5ed30dd2a925728f2803143b17', class: "bs-chatbot-sources-drawer", role: "region", "aria-label": this.heading }, h("div", { key: 'd24eabd0ac2c36ec4033a9b5c361aa32225fa78a', class: "bs-chatbot-sources-drawer__header" }, h("div", { key: '0bec3fb848552496e1884b4731c5e1964570c70d', class: "bs-chatbot-sources-drawer__title-group" }, h("h2", { key: '955389bd4f3ba1950c9af404e5880a6837298384', part: "heading", class: "bs-chatbot-sources-drawer__heading" }, this.heading), displayCount > 0 && (h("span", { key: '40d83288bbd257504ef814247c7bd4664df9e169', part: "count", class: "bs-chatbot-sources-drawer__count" }, displayCount))), h("button", { key: '56a15c64faea80790387d4918843c806b684268b', type: "button", part: "collapse", class: "bs-chatbot-sources-drawer__collapse", "aria-label": "Collapse sources", onClick: this.onCollapseClick }, h("slot", { key: 'c321f53482f0265357a6a29fc40e0ff3766f0b74', name: "collapse-icon" }, h(CaretRightIcon, { key: 'c3d4c17bebd2611b27c3e7f87d359e4b46c41d4f' })))), h("div", { key: 'd6c4b8e3660f765112f0c33dd72021af118332d9', part: "list", class: "bs-chatbot-sources-drawer__list" }, h("slot", { key: '19759a01d921ed2517cbca2b01ea53741a207b8b', onSlotchange: this.onSlotchange }))));
+    }
+    static get is() { return "bs-chatbot-sources-drawer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-chatbot-sources-drawer.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-chatbot-sources-drawer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The panel title."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading",
+                "defaultValue": "'Sources'"
+            },
+            "count": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Overrides the auto-detected count badge. By default the badge reflects the number of slotted\n`bs-source-link` children, so most consumers don't need to set this."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "count"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "slottedCount": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsCollapse",
+                "name": "bsCollapse",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the collapse chevron is clicked. The consuming app owns actually hiding the panel."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+const CaretRightIcon = () => (h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M7.5 4.375L13.125 10L7.5 15.625", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));

package/dist/collection/components/bs-chatbot-sources-drawer/bs-chatbot-sources-drawer.stories.js

@@ -0,0 +1,44 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const SAMPLE_SOURCES = html `
+  <bs-source-link file-name="Employee Handbook 2026" source-name="HoltePortalen" version="v3.2"></bs-source-link>
+  <bs-source-link file-name="Payroll Processing Guide" source-name="WorkdayHQ" version="v2.4"></bs-source-link>
+  <bs-source-link file-name="Benefits & Leave Policy" source-name="PeopleOps Wiki" version="v1.8"></bs-source-link>
+`;
+const meta = {
+    title: 'Genie AI Components/bs-chatbot-sources-drawer',
+    parameters: { docs: { description: { component: componentDescription('bs-chatbot-sources-drawer') } } },
+    render: args => html `
+    <div style="max-width: 380px; height: 400px; border: 1px solid var(--bs-border-default); border-radius: var(--bs-border-radius-150); overflow: hidden;">
+      <bs-chatbot-sources-drawer heading=${args.heading}>${SAMPLE_SOURCES}</bs-chatbot-sources-drawer>
+    </div>
+  `,
+    argTypes: {
+        heading: { control: 'text', description: propDescription('bs-chatbot-sources-drawer', 'heading') },
+    },
+    args: {
+        heading: 'Sources',
+    },
+};
+export default meta;
+export const Default = {};
+export const Empty = {
+    render: args => html `
+    <div style="max-width: 380px; height: 200px; border: 1px solid var(--bs-border-default); border-radius: var(--bs-border-radius-150); overflow: hidden;">
+      <bs-chatbot-sources-drawer heading=${args.heading}></bs-chatbot-sources-drawer>
+    </div>
+  `,
+};
+export const ManySources = {
+    name: 'Many sources (scrollable)',
+    render: args => html `
+    <div style="max-width: 380px; height: 300px; border: 1px solid var(--bs-border-default); border-radius: var(--bs-border-radius-150); overflow: hidden;">
+      <bs-chatbot-sources-drawer heading=${args.heading}>
+        ${SAMPLE_SOURCES}
+        <bs-source-link file-name="Onboarding Checklist" source-name="HoltePortalen" version="v1.0"></bs-source-link>
+        <bs-source-link file-name="IT Security Policy" source-name="WorkdayHQ" version="v4.1"></bs-source-link>
+        <bs-source-link file-name="Remote Work Guidelines" source-name="PeopleOps Wiki" version="v2.0"></bs-source-link>
+      </bs-chatbot-sources-drawer>
+    </div>
+  `,
+};

package/dist/collection/components/bs-chatbot-suggestion-button/bs-chatbot-suggestion-button.js

@@ -45,7 +45,7 @@ export class BsChatbotSuggestionButton {
         this.bsSelect.emit();
     };
     render() {
-        return (h("button", { key: 'fc87dab75d560ce5f6612c2bf61875d574eddd1f', type: "button", part: "button", class: "bs-chatbot-suggestion-button", disabled: this.disabled, onClick: this.onClick }, h("slot", { key: '27ae5b010dcac9ebbb3924c72299cbb5a067ce6b' })));
+        return (h("button", { key: '2a5213dc81a29dd68f99717b93e6f5396db5c5da', type: "button", part: "button", class: "bs-chatbot-suggestion-button", disabled: this.disabled, onClick: this.onClick }, h("slot", { key: '28b5ac8ddcdab80fb377a897dc1af62257473385' })));
     }
     static get is() { return "bs-chatbot-suggestion-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -44,6 +44,18 @@ describe('bs-composer', () => {
         const actionIndex = children.findIndex(el => el.getAttribute('part') === 'action');
         expect(slotIndex).toBeGreaterThan(actionIndex);
     });
+    it('does not show the attachments row when nothing is slotted into it', async () => {
+        const { root } = await render(h("bs-composer", null));
+        const row = root.shadowRoot.querySelector('[part="attachments"]');
+        expect(row.className).not.toContain('bs-composer__attachments-row--visible');
+    });
+    it('shows the attachments row and renders slotted content when something is assigned to it', async () => {
+        const { root } = await render(h("bs-composer", null, h("div", { slot: "attachments" }, "attachments here")));
+        const row = root.shadowRoot.querySelector('[part="attachments"]');
+        expect(row.className).toContain('bs-composer__attachments-row--visible');
+        const slot = root.shadowRoot.querySelector('slot[name="attachments"]');
+        expect(slot.assignedElements()).toHaveLength(1);
+    });
     it('emits bsInput with the current value as the user types', async () => {
         const { root, spyOnEvent } = await render(h("bs-composer", null));
         const spy = spyOnEvent('bsInput');

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

@@ -42,6 +42,16 @@
   border-color: var(--bs-composer-border-focus);
 }
 
+.bs-composer__attachments-row {
+  display: none;
+}
+
+/* No padding of its own -- slotted content (e.g. bs-attachment-list) already supplies its own
+ * inset, matching how the `actions-end` slot also imposes no spacing on what's slotted into it. */
+.bs-composer__attachments-row--visible {
+  display: block;
+}
+
 .bs-composer__text-row {
   display: flex;
   align-items: center;

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

@@ -28,10 +28,14 @@ const WAVEFORM_BAR_HEIGHTS = [
  * useful for e.g. focusing the composer after a parent view mounts, without reaching into its
  * shadow root.
  *
+ * @slot attachments - A `bs-attachment-list` (or other content) rendered inside the composer's own
+ *   bordered container, above the text field -- only takes up space/padding when it has assigned
+ *   content, so leaving it empty renders identically to not having the slot at all.
  * @slot actions-end - Extra consumer-supplied controls appended after the primary action button
  *   in the controls row (e.g. a product-specific "Tools" button). Slotted content is placed
  *   inline in the same flex row as attach/mic/action, so a slotted element should size itself to
  *   roughly match `--bs-composer-button-size` to align visually.
+ * @part attachments - The wrapper around the `attachments` slot.
  * @part attach - The "+" attach button.
  * @part input - The native text `<input>`.
  * @part mic - The secondary icon button (microphone, or the stop-recording square while `state="recording"`).
@@ -55,6 +59,7 @@ const WAVEFORM_BAR_HEIGHTS = [
  * @prop --bs-composer-subtle-pressed - Background of the attach/mic buttons when pressed. Aliased to `--bs-color-neutral-container-pressed`.
  */
 export class BsComposer {
+    el;
     /**
      * Which flavor of composer this is: changes the *default* placeholder text (set `placeholder`
      * directly to override it) and, per the Figma design, renders the container border dashed
@@ -79,6 +84,10 @@ export class BsComposer {
      * accessible name -- set it in every real usage.
      */
     ariaLabel = null;
+    /** 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"`. */
@@ -92,6 +101,15 @@ export class BsComposer {
     /** Fires when the mic/stop-recording button is clicked. The consumer decides what that means
      * (e.g. start recording when idle/generating, or stop recording when `state="recording"`). */
     bsMicToggle;
+    /** Computes the initial `hasAttachments` state directly from the host's light DOM children,
+     * before first render -- same reasoning as `bs-attachment`'s `componentWillLoad`: `slotchange`
+     * alone never fires for a slot that starts out empty and stays that way. */
+    componentWillLoad() {
+        this.hasAttachments = Array.from(this.el.childNodes).some(node => node.nodeType === Node.ELEMENT_NODE && node.getAttribute('slot') === 'attachments');
+    }
+    onAttachmentsSlotchange = (ev) => {
+        this.hasAttachments = ev.target.assignedNodes().length > 0;
+    };
     onInput = (ev) => {
         const value = ev.target.value;
         this.bsInput.emit(value);
@@ -131,7 +149,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: '04c250520759948faa89bd625646a62c79cc6cee', class: `bs-composer bs-composer--${this.state} bs-composer--${this.variant}` }, h("div", { key: '8d5d99b90141d3dbeff1b31851cbbb5eaae3d920', class: "bs-composer__text-row" }, h("input", { key: '4eb1ef1b51a41de86da466c8a2c9ea93a7746b43', part: "input", class: "bs-composer__input", type: "text", value: this.value, placeholder: placeholder, disabled: disabled, "aria-label": this.ariaLabel, onInput: this.onInput })), h("div", { key: '8a733762c56ae3f4de7f2af1d89fb05d521b1d17', class: "bs-composer__controls-row" }, h("button", { key: 'b4cd13546ec447f2650a02f43dc2fc0b6d65c8ef', type: "button", part: "attach", class: "bs-composer__attach", "aria-label": "Attach", onClick: this.onAttachClick }, h(PlusIcon, { key: 'af8da06a2550d5c37d3737b145ad70c006e1ce66' })), 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: '18b81bf7dd6057c3954566cd12994bb8589ff4ee', 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: 'a1cf9435fa7dc8e52db7ae148e07fde06971f27c', 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: '6779413b48314161a75ec75be273e72fe4d622c3', name: "actions-end" }))));
+        return (h("div", { key: '5b367f64f2cfe04d7815b52d6abc3baebf46453e', class: `bs-composer bs-composer--${this.state} bs-composer--${this.variant}` }, h("div", { key: 'f1e7dbeb16e8f2cd0b4e2345f6c5fc03bcc5177c', part: "attachments", class: `bs-composer__attachments-row ${this.hasAttachments ? 'bs-composer__attachments-row--visible' : ''}` }, h("slot", { key: '6e59f2f3857c81a132c5873d9a32dbed27eb2c02', name: "attachments", onSlotchange: this.onAttachmentsSlotchange })), h("div", { key: '79a0a03a7f66b654f5ab8379447cf00459c7a6c3', class: "bs-composer__text-row" }, h("input", { key: 'b9560af8433d186fdadd5b05368290d077c5e8ce', part: "input", class: "bs-composer__input", type: "text", value: this.value, placeholder: placeholder, disabled: disabled, "aria-label": this.ariaLabel, onInput: this.onInput })), h("div", { key: '5b9a8edd0412e1a86efd33afae37fb73559a89f6', class: "bs-composer__controls-row" }, h("button", { key: '5c405e009e9f61902ca6623e09efa238e71737a3', type: "button", part: "attach", class: "bs-composer__attach", "aria-label": "Attach", onClick: this.onAttachClick }, h(PlusIcon, { key: '5832b29579d3c8c855237f286366944aeb6553f6' })), 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: 'b4006fe5d452d02d0093d1dba0b65e6f33e5a65b', 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: 'b647f1dd0c40dc795b96da5cad695300b0c9dfd3', 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: '2c78b5641091024925e84ca1a779ac1fc37fc0ae', name: "actions-end" }))));
     }
     static get is() { return "bs-composer"; }
     static get encapsulation() { return "shadow"; }
@@ -261,6 +279,11 @@ export class BsComposer {
             }
         };
     }
+    static get states() {
+        return {
+            "hasAttachments": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "bsInput",
@@ -354,6 +377,7 @@ export class BsComposer {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
 }
 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" })));

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

@@ -41,6 +41,19 @@ export const Disabled = {
 export const Recording = {
     args: { state: 'recording', value: 'Here is what I have so far' },
 };
+export const WithAttachments = {
+    name: 'With attachments',
+    render: () => html `
+    <div style="max-width: 420px;">
+      <bs-composer aria-label="Message">
+        <bs-attachment-list slot="attachments">
+          <bs-attachment type="image" image-src="https://images.unsplash.com/photo-1512917774080-9991f1c4c750?w=200&h=200&fit=crop"></bs-attachment>
+          <bs-attachment type="pdf" file-name="Dummy-pdf-in-here"></bs-attachment>
+        </bs-attachment-list>
+      </bs-composer>
+    </div>
+  `,
+};
 export const AllStates = {
     name: 'All variants × states',
     render: () => html `

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

@@ -0,0 +1,42 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-composer-status-banner', () => {
+    it('renders the message and a default clock icon', async () => {
+        const { root } = await render(h("bs-composer-status-banner", { message: "Something went wrong" }));
+        expect(root).toHaveTextContent('Something went wrong');
+        expect(root.shadowRoot.querySelector('[part="icon"] svg')).not.toBeNull();
+    });
+    it('does not render the icon when showIcon is false', async () => {
+        const { root } = await render(h("bs-composer-status-banner", { showIcon: false }));
+        expect(root.shadowRoot.querySelector('[part="icon"]')).toBeNull();
+    });
+    it('applies the type-specific class', async () => {
+        const { root } = await render(h("bs-composer-status-banner", { type: "warning" }));
+        expect(root.shadowRoot.querySelector('.bs-composer-status-banner').className).toContain('bs-composer-status-banner--warning');
+    });
+    it('does not render the action button by default', async () => {
+        const { root } = await render(h("bs-composer-status-banner", null));
+        expect(root.shadowRoot.querySelector('[part="action"]')).toBeNull();
+    });
+    it('renders the action button with actionLabel when showButton is true', async () => {
+        const { root } = await render(h("bs-composer-status-banner", { showButton: true, actionLabel: "Retry" }));
+        const action = root.shadowRoot.querySelector('[part="action"]');
+        expect(action).not.toBeNull();
+        expect(action).toHaveTextContent('Retry');
+    });
+    it('emits bsAction when the action button is clicked', async () => {
+        const { root, spyOnEvent } = await render(h("bs-composer-status-banner", { showButton: true }));
+        const actionSpy = spyOnEvent('bsAction');
+        root.shadowRoot.querySelector('[part="action"]').click();
+        expect(actionSpy).toHaveReceivedEventTimes(1);
+    });
+    it('does not render the close button when allowClose is false', async () => {
+        const { root } = await render(h("bs-composer-status-banner", { allowClose: false }));
+        expect(root.shadowRoot.querySelector('[part="close"]')).toBeNull();
+    });
+    it('emits bsClose when the close button is clicked', async () => {
+        const { root, spyOnEvent } = await render(h("bs-composer-status-banner", null));
+        const closeSpy = spyOnEvent('bsClose');
+        root.shadowRoot.querySelector('[part="close"]').click();
+        expect(closeSpy).toHaveReceivedEventTimes(1);
+    });
+});

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

@@ -0,0 +1,173 @@
+:host {
+  display: block;
+  --bs-composer-status-banner-radius: var(--bs-border-radius-150);
+  --bs-composer-status-banner-padding-x: var(--bs-spacing-150);
+  --bs-composer-status-banner-padding-top: var(--bs-spacing-100);
+  --bs-composer-status-banner-padding-bottom: var(--bs-spacing-200);
+  --bs-composer-status-banner-gap: var(--bs-spacing-100);
+  --bs-composer-status-banner-icon-gap: var(--bs-spacing-75);
+
+  --bs-composer-status-banner-error-bg: var(--bs-color-error-container);
+  --bs-composer-status-banner-error-text: var(--bs-text-error);
+  --bs-composer-status-banner-error-action-bg: var(--bs-color-error-default);
+  --bs-composer-status-banner-error-action-bg-hover: var(--bs-color-error-hover);
+
+  --bs-composer-status-banner-info-bg: var(--bs-color-info-container);
+  --bs-composer-status-banner-info-text: var(--bs-text-info);
+  --bs-composer-status-banner-info-action-bg: var(--bs-color-info-default);
+  --bs-composer-status-banner-info-action-bg-hover: var(--bs-color-info-hover);
+
+  --bs-composer-status-banner-neutral-bg: var(--bs-color-neutral-container);
+  --bs-composer-status-banner-neutral-text: var(--bs-text-default);
+  --bs-composer-status-banner-neutral-action-bg: var(--bs-color-neutral-container);
+  --bs-composer-status-banner-neutral-action-bg-hover: var(--bs-color-neutral-container-hover);
+  --bs-composer-status-banner-neutral-action-border: var(--bs-border-neutral-container);
+
+  --bs-composer-status-banner-warning-bg: var(--bs-color-warning-container);
+  --bs-composer-status-banner-warning-text: var(--bs-text-warning);
+  --bs-composer-status-banner-warning-action-bg: var(--bs-color-warning-default);
+  --bs-composer-status-banner-warning-action-bg-hover: var(--bs-color-warning-hover);
+
+  --bs-composer-status-banner-close-hover-bg: var(--bs-color-neutral-container-hover);
+}
+
+.bs-composer-status-banner {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--bs-composer-status-banner-gap);
+  padding: var(--bs-composer-status-banner-padding-top) var(--bs-composer-status-banner-padding-x) var(--bs-composer-status-banner-padding-bottom);
+  border-radius: var(--bs-composer-status-banner-radius) var(--bs-composer-status-banner-radius) 0 0;
+  font-family: inherit;
+}
+
+.bs-composer-status-banner--error {
+  background: var(--bs-composer-status-banner-error-bg);
+  color: var(--bs-composer-status-banner-error-text);
+}
+
+.bs-composer-status-banner--info {
+  background: var(--bs-composer-status-banner-info-bg);
+  color: var(--bs-composer-status-banner-info-text);
+}
+
+.bs-composer-status-banner--neutral {
+  background: var(--bs-composer-status-banner-neutral-bg);
+  color: var(--bs-composer-status-banner-neutral-text);
+}
+
+.bs-composer-status-banner--warning {
+  background: var(--bs-composer-status-banner-warning-bg);
+  color: var(--bs-composer-status-banner-warning-text);
+}
+
+.bs-composer-status-banner__message-group {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  flex: 1 0 0;
+  min-width: 0;
+  gap: var(--bs-composer-status-banner-icon-gap);
+}
+
+.bs-composer-status-banner__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+}
+
+.bs-composer-status-banner__icon ::slotted(*) {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.bs-composer-status-banner__message {
+  margin: 0;
+  flex: 1 0 0;
+  min-width: 0;
+  font-size: var(--bs-font-size-md);
+  line-height: calc(var(--bs-line-height-body-md) * 1px);
+  word-break: break-word;
+}
+
+.bs-composer-status-banner__action {
+  box-sizing: border-box;
+  flex-shrink: 0;
+  height: 32px;
+  padding: 0 var(--bs-spacing-150);
+  border: none;
+  border-radius: var(--bs-border-radius-100);
+  color: var(--bs-text-on-action);
+  font-family: inherit;
+  font-size: var(--bs-font-size-sm);
+  font-weight: var(--bs-font-weight-medium);
+  line-height: calc(var(--bs-line-height-body-sm) * 1px);
+  cursor: pointer;
+  transition: background-color var(--bs-duration-fast) var(--bs-easing-standard);
+}
+
+.bs-composer-status-banner--error .bs-composer-status-banner__action {
+  background: var(--bs-composer-status-banner-error-action-bg);
+}
+.bs-composer-status-banner--error .bs-composer-status-banner__action:hover {
+  background: var(--bs-composer-status-banner-error-action-bg-hover);
+}
+
+.bs-composer-status-banner--info .bs-composer-status-banner__action {
+  background: var(--bs-composer-status-banner-info-action-bg);
+}
+.bs-composer-status-banner--info .bs-composer-status-banner__action:hover {
+  background: var(--bs-composer-status-banner-info-action-bg-hover);
+}
+
+.bs-composer-status-banner--warning .bs-composer-status-banner__action {
+  background: var(--bs-composer-status-banner-warning-action-bg);
+}
+.bs-composer-status-banner--warning .bs-composer-status-banner__action:hover {
+  background: var(--bs-composer-status-banner-warning-action-bg-hover);
+}
+
+/* The only variant whose action button is outlined (container bg + visible border) instead of a
+ * solid semantic color -- there's no strong "neutral action" brand color to fill it with. */
+.bs-composer-status-banner--neutral .bs-composer-status-banner__action {
+  background: var(--bs-composer-status-banner-neutral-action-bg);
+  border: var(--bs-border-width-thin) solid var(--bs-composer-status-banner-neutral-action-border);
+  color: var(--bs-text-default);
+}
+.bs-composer-status-banner--neutral .bs-composer-status-banner__action:hover {
+  background: var(--bs-composer-status-banner-neutral-action-bg-hover);
+}
+
+.bs-composer-status-banner__close {
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--bs-border-radius-100);
+  color: inherit;
+  cursor: pointer;
+  transition: background-color var(--bs-duration-fast) var(--bs-easing-standard);
+}
+
+.bs-composer-status-banner__close:hover {
+  background: var(--bs-composer-status-banner-close-hover-bg);
+}
+
+.bs-composer-status-banner__close svg {
+  width: 20px;
+  height: 20px;
+}
+
+.bs-composer-status-banner__close:focus-visible,
+.bs-composer-status-banner__action:focus-visible {
+  outline: 2px solid var(--bs-border-neutral-focus);
+  outline-offset: 1px;
+}