@brandsync/wc 0.0.4 → 0.0.6

package/dist/collection/components/bs-chatbot-response-action/bs-chatbot-response-action.cmp.test.js

@@ -89,8 +89,8 @@ describe('bs-chatbot-response-action', () => {
         expect(menuSpy.length).toBe(0);
         expect(sourcesSpy.length).toBe(0);
     });
-    it('emits bsMenuOpen when the more-options button is clicked, and not the other events', async () => {
-        const { root, spyOnEvent } = await render(h("bs-chatbot-response-action", { sourcesCount: 3 }));
+    it('emits bsMenuOpen with true when the more-options button is clicked, and not the other events', async () => {
+        const { root, waitForChanges, spyOnEvent } = await render(h("bs-chatbot-response-action", { sourcesCount: 3 }));
         const likeSpy = spyOnEvent('bsLike');
         const dislikeSpy = spyOnEvent('bsDislike');
         const copySpy = spyOnEvent('bsCopy');
@@ -98,13 +98,54 @@ describe('bs-chatbot-response-action', () => {
         const menuSpy = spyOnEvent('bsMenuOpen');
         const sourcesSpy = spyOnEvent('bsSourcesClick');
         root.shadowRoot.querySelector('[part="menu"]').click();
+        await waitForChanges();
         expect(menuSpy).toHaveReceivedEventTimes(1);
+        expect(menuSpy).toHaveReceivedEventDetail(true);
+        expect(root.menuOpen).toBe(true);
         expect(likeSpy.length).toBe(0);
         expect(dislikeSpy.length).toBe(0);
         expect(copySpy.length).toBe(0);
         expect(regenerateSpy.length).toBe(0);
         expect(sourcesSpy.length).toBe(0);
     });
+    it('emits bsMenuOpen with false when the more-options button is clicked again to close it', async () => {
+        const { root, waitForChanges, spyOnEvent } = await render(h("bs-chatbot-response-action", { sourcesCount: 3 }));
+        const menuSpy = spyOnEvent('bsMenuOpen');
+        const menuButton = root.shadowRoot.querySelector('[part="menu"]');
+        menuButton.click();
+        await waitForChanges();
+        menuButton.click();
+        await waitForChanges();
+        expect(menuSpy).toHaveReceivedEventTimes(2);
+        expect(menuSpy).toHaveReceivedEventDetail(false);
+        expect(root.menuOpen).toBe(false);
+    });
+    it('does not render the menu slot wrapper when menuOpen is false', async () => {
+        const { root } = await render(h("bs-chatbot-response-action", null));
+        expect(root.shadowRoot.querySelector('slot[name="menu"]')).toBeNull();
+    });
+    it('renders the menu slot wrapper when menuOpen is true', async () => {
+        const { root } = await render(h("bs-chatbot-response-action", { menuOpen: true }));
+        expect(root.shadowRoot.querySelector('slot[name="menu"]')).not.toBeNull();
+    });
+    it('closes the menu and emits bsMenuOpen(false) on a click outside the host', async () => {
+        const { root, waitForChanges, spyOnEvent } = await render(h("bs-chatbot-response-action", { menuOpen: true }));
+        const menuSpy = spyOnEvent('bsMenuOpen');
+        document.body.click();
+        await waitForChanges();
+        expect(root.menuOpen).toBe(false);
+        expect(menuSpy).toHaveReceivedEventTimes(1);
+        expect(menuSpy).toHaveReceivedEventDetail(false);
+    });
+    it('closes the menu on Escape', async () => {
+        const { root, waitForChanges, spyOnEvent } = await render(h("bs-chatbot-response-action", { menuOpen: true }));
+        const menuSpy = spyOnEvent('bsMenuOpen');
+        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+        await waitForChanges();
+        expect(root.menuOpen).toBe(false);
+        expect(menuSpy).toHaveReceivedEventTimes(1);
+        expect(menuSpy).toHaveReceivedEventDetail(false);
+    });
     it('emits bsSourcesClick when the sources button is clicked, and not the other events', async () => {
         const { root, spyOnEvent } = await render(h("bs-chatbot-response-action", { sourcesCount: 3 }));
         const likeSpy = spyOnEvent('bsLike');

package/dist/collection/components/bs-chatbot-response-action/bs-chatbot-response-action.css

@@ -63,6 +63,19 @@
   background: var(--bs-chatbot-response-action-button-pressed);
 }
 
+.bs-chatbot-response-action__menu-wrapper {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.bs-chatbot-response-action__menu-popup {
+  position: absolute;
+  top: calc(100% + var(--bs-spacing-50));
+  left: 0;
+  z-index: 1;
+}
+
 .bs-chatbot-response-action__sources {
   display: inline-flex;
   align-items: center;

package/dist/collection/components/bs-chatbot-response-action/bs-chatbot-response-action.js

@@ -16,6 +16,8 @@ import { h } from "@stencil/core";
  * @slot copy-icon - Overrides the default "Copy" button icon.
  * @slot regenerate-icon - Overrides the default "Regenerate" button icon.
  * @slot menu-icon - Overrides the default "More options" button icon.
+ * @slot menu - A `bs-menu` (or other content) rendered in a popup positioned below the "More
+ * options" button, shown only while `menuOpen` is `true`.
  * @slot sources-icon - Overrides the default icon in the "N sources" button.
  * @part like - The "Like" icon button.
  * @part dislike - The "Dislike" icon button.
@@ -39,12 +41,20 @@ import { h } from "@stencil/core";
  * @prop --bs-chatbot-response-action-sources-line-height - Aliased to `--bs-line-height-body-sm`.
  */
 export class BsChatbotResponseAction {
+    host;
     /**
      * Number of sources backing the response. When set to a positive number, renders the "N
      * sources" button (singular "1 source" / plural "N sources"). When unset or `0`, the button is
      * not rendered at all.
      */
     sourcesCount;
+    /**
+     * Whether the "more options" popup menu (the `menu` slot) is currently open. Mutable + reflected
+     * so the component can track/close itself (kebab click, click outside, Escape) the same way
+     * `bs-chatbot-header`'s `expanded` prop tracks its own toggle state, while still emitting
+     * `bsMenuOpen` for the consumer to react to.
+     */
+    menuOpen = false;
     /** Fires when the "Like" button is clicked. */
     bsLike;
     /** Fires when the "Dislike" button is clicked. */
@@ -53,7 +63,8 @@ export class BsChatbotResponseAction {
     bsCopy;
     /** Fires when the "Regenerate" button is clicked. */
     bsRegenerate;
-    /** Fires when the "More options" button is clicked. */
+    /** Fires when the "More options" button is clicked or the menu is closed (click outside,
+     * Escape), with the new `menuOpen` value. */
     bsMenuOpen;
     /** Fires when the "N sources" button is clicked. */
     bsSourcesClick;
@@ -70,14 +81,31 @@ export class BsChatbotResponseAction {
         this.bsRegenerate.emit();
     };
     onMenuClick = () => {
-        this.bsMenuOpen.emit();
+        this.menuOpen = !this.menuOpen;
+        this.bsMenuOpen.emit(this.menuOpen);
+    };
+    closeMenu = () => {
+        if (!this.menuOpen)
+            return;
+        this.menuOpen = false;
+        this.bsMenuOpen.emit(this.menuOpen);
     };
+    onDocumentClick(ev) {
+        if (this.menuOpen && !ev.composedPath().includes(this.host)) {
+            this.closeMenu();
+        }
+    }
+    onKeydown(ev) {
+        if (this.menuOpen && ev.key === 'Escape') {
+            this.closeMenu();
+        }
+    }
     onSourcesClick = () => {
         this.bsSourcesClick.emit();
     };
     render() {
         const hasSources = !!this.sourcesCount && this.sourcesCount > 0;
-        return (h("div", { key: '61a46c51ffba5e1256a94cbab87ce6e06e45941f', class: "bs-chatbot-response-action" }, h("button", { key: '33e8e29235191bc2a4128074d5df08cc304dbefb', type: "button", part: "like", class: "bs-chatbot-response-action__button", "aria-label": "Like", onClick: this.onLikeClick }, h("slot", { key: '2337aa07fec93d12e6706ded394248f0353b91e6', name: "like-icon" }, h(ThumbsUpIcon, { key: '9be56ca48cbb7027ba608ea9f8e89c2c14f98eee' }))), h("button", { key: 'fcdd8f3d4028a0e91cd5e10525ac97febf2261b6', type: "button", part: "dislike", class: "bs-chatbot-response-action__button", "aria-label": "Dislike", onClick: this.onDislikeClick }, h("slot", { key: 'bc219702b5e935659aa7824596511e8b01d2014f', name: "dislike-icon" }, h(ThumbsDownIcon, { key: '5ec9da81d5a89d1d2a35dbfe88682214178204cb' }))), h("button", { key: '59d6b3032d141092537d9e56ced8e3045b40384f', type: "button", part: "copy", class: "bs-chatbot-response-action__button", "aria-label": "Copy", onClick: this.onCopyClick }, h("slot", { key: 'e5bd9fbc4774ae9d67707803819697b56c516984', name: "copy-icon" }, h(CopyIcon, { key: 'e7f8f643920bad3f88c597bb183cfc71f8319c46' }))), h("button", { key: 'a6bd1be8be7f0f70157a5a5e37bc18d2c94462fc', type: "button", part: "regenerate", class: "bs-chatbot-response-action__button", "aria-label": "Regenerate", onClick: this.onRegenerateClick }, h("slot", { key: '7d35981706ea38ae1e613047945dde9d67a94c62', name: "regenerate-icon" }, h(RegenerateIcon, { key: '1d2dacd4bba68fcd120317bb207e7aa25bc0f62f' }))), h("button", { key: '32f3f790f4024cd7b58ba6f291d32b3f5f0dbbc8', type: "button", part: "menu", class: "bs-chatbot-response-action__button", "aria-label": "More options", onClick: this.onMenuClick }, h("slot", { key: '0aaf67bbc34bdf5d12247f9ab264a75dad63f996', name: "menu-icon" }, h(MenuIcon, { key: 'c32d76d1e6f73cd9a82bbf4371a4d047b807b80c' }))), hasSources && (h("button", { key: '240f26ed6ec5faded1efe1f171da10e4a292011e', type: "button", part: "sources", class: "bs-chatbot-response-action__sources", onClick: this.onSourcesClick }, h("slot", { key: 'e97e26840df27d2ff281882823bae7556d53bdc6', name: "sources-icon" }, h(SourcesIcon, { key: '5dd3538a28ee3cf22b2801258024386827b9c774' })), h("span", { key: 'acf07f2bba262a08c3f2d9650b9fd09fab51d172', class: "bs-chatbot-response-action__sources-label" }, this.sourcesCount, " ", this.sourcesCount === 1 ? 'source' : 'sources')))));
+        return (h("div", { key: '6595c290930eacb48dc9d52db12a29e2942c2d8f', class: "bs-chatbot-response-action" }, h("button", { key: 'e3acdbb150047bce0718a168c048ee9db6c829f2', type: "button", part: "like", class: "bs-chatbot-response-action__button", "aria-label": "Like", onClick: this.onLikeClick }, h("slot", { key: 'bc9339dafb25f7529a097eaa578ef9ff5d61cafe', name: "like-icon" }, h(ThumbsUpIcon, { key: '49bf4ef39238d9763838ee72ca1b1799e2a284ff' }))), h("button", { key: '1a9900dbb7b1892233477cc4140b690de9d87cf3', type: "button", part: "dislike", class: "bs-chatbot-response-action__button", "aria-label": "Dislike", onClick: this.onDislikeClick }, h("slot", { key: 'db4555adfb4a8cc83cb73ff13d537806e5918f25', name: "dislike-icon" }, h(ThumbsDownIcon, { key: 'a741f40e3f0ea3a11e839277ad5659e0689fb13a' }))), h("button", { key: '19fbad2e8ae607368b78dc076188ec2b30d21325', type: "button", part: "copy", class: "bs-chatbot-response-action__button", "aria-label": "Copy", onClick: this.onCopyClick }, h("slot", { key: '8789336bec82b3335be38628d00664246d0f4015', name: "copy-icon" }, h(CopyIcon, { key: 'e65198dff09540ce0d9af3fa2ed1e5ece12396cf' }))), h("button", { key: '09c16cca24ab255299d9f892e3d2c5334fcaf7f8', type: "button", part: "regenerate", class: "bs-chatbot-response-action__button", "aria-label": "Regenerate", onClick: this.onRegenerateClick }, h("slot", { key: '9758f958967908ce1a25805d9d3bea968f3590f4', name: "regenerate-icon" }, h(RegenerateIcon, { key: '608515ede5570b2482cc46c3f2910d56e086f0b3' }))), h("div", { key: '81c609157f7bb8024a2d0b1a3da30ae3d93f46e8', class: "bs-chatbot-response-action__menu-wrapper" }, h("button", { key: '588d3eef27b342c784fd925e7ff4478370ef8b48', type: "button", part: "menu", class: "bs-chatbot-response-action__button", "aria-label": "More options", "aria-haspopup": "menu", "aria-expanded": this.menuOpen ? 'true' : 'false', onClick: this.onMenuClick }, h("slot", { key: 'f14e53e800cc2976306824a6b5131a98cf22ee49', name: "menu-icon" }, h(MenuIcon, { key: '7ce9bc2ee29ab3f7d56b4a5cbead2a014f586841' }))), this.menuOpen && (h("div", { key: '80e0e9688f639c51601f891e46c82059ee1fd921', class: "bs-chatbot-response-action__menu-popup" }, h("slot", { key: '9b1a2652e3460a1d97b4de856269516eaf1273e1', name: "menu" })))), hasSources && (h("button", { key: '15febee771c334afddbbdedc21add700ed44ceb1', type: "button", part: "sources", class: "bs-chatbot-response-action__sources", onClick: this.onSourcesClick }, h("slot", { key: '39d2cf88bda64d2f2b0a6d767e6ba5fcb1acc8bd', name: "sources-icon" }, h(SourcesIcon, { key: '358a3b2c1e8479c7ee92e89401edc5e68ff93e1c' })), h("span", { key: '96b364bdfc9f8ae1ba605f0fd751e19e77959720', class: "bs-chatbot-response-action__sources-label" }, this.sourcesCount, " ", this.sourcesCount === 1 ? 'source' : 'sources')))));
     }
     static get is() { return "bs-chatbot-response-action"; }
     static get encapsulation() { return "shadow"; }
@@ -111,6 +139,26 @@ export class BsChatbotResponseAction {
                 "setter": false,
                 "reflect": false,
                 "attribute": "sources-count"
+            },
+            "menuOpen": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the \"more options\" popup menu (the `menu` slot) is currently open. Mutable + reflected\nso the component can track/close itself (kebab click, click outside, Escape) the same way\n`bs-chatbot-header`'s `expanded` prop tracks its own toggle state, while still emitting\n`bsMenuOpen` for the consumer to react to."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "menu-open",
+                "defaultValue": "false"
             }
         };
     }
@@ -183,11 +231,11 @@ export class BsChatbotResponseAction {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Fires when the \"More options\" button is clicked."
+                    "text": "Fires when the \"More options\" button is clicked or the menu is closed (click outside,\nEscape), with the new `menuOpen` value."
                 },
                 "complexType": {
-                    "original": "void",
-                    "resolved": "void",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 }
             }, {
@@ -207,6 +255,22 @@ export class BsChatbotResponseAction {
                 }
             }];
     }
+    static get elementRef() { return "host"; }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "onDocumentClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "onKeydown",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 const ThumbsUpIcon = () => (h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M2.5 8.125H6.25V16.25H2.5C2.33424 16.25 2.17527 16.1842 2.05806 16.0669C1.94085 15.9497 1.875 15.7908 1.875 15.625V8.75C1.875 8.58424 1.94085 8.42527 2.05806 8.30806C2.17527 8.19085 2.33424 8.125 2.5 8.125Z", stroke: "currentColor", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M6.25 8.125L9.375 1.875C10.038 1.875 10.6739 2.13839 11.1428 2.60723C11.6116 3.07607 11.875 3.71196 11.875 4.375V6.25H16.875C17.0523 6.25005 17.2276 6.28782 17.3892 6.36081C17.5508 6.4338 17.695 6.54033 17.8123 6.67333C17.9295 6.80634 18.0172 6.96277 18.0693 7.13223C18.1215 7.3017 18.137 7.48033 18.1148 7.65625L17.1773 15.1562C17.1393 15.4583 16.9923 15.736 16.7641 15.9374C16.5358 16.1388 16.2419 16.2499 15.9375 16.25H6.25", stroke: "currentColor", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" })));
 const ThumbsDownIcon = () => (h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M2.5 3.75H6.25V11.875H2.5C2.33424 11.875 2.17527 11.8092 2.05806 11.6919C1.94085 11.5747 1.875 11.4158 1.875 11.25V4.375C1.875 4.20924 1.94085 4.05027 2.05806 3.93306C2.17527 3.81585 2.33424 3.75 2.5 3.75Z", stroke: "currentColor", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M6.25 11.875L9.375 18.125C10.038 18.125 10.6739 17.8616 11.1428 17.3928C11.6116 16.9239 11.875 16.288 11.875 15.625V13.75H16.875C17.0523 13.75 17.2276 13.7122 17.3892 13.6392C17.5508 13.5662 17.695 13.4597 17.8123 13.3267C17.9295 13.1937 18.0172 13.0372 18.0693 12.8678C18.1215 12.6983 18.137 12.5197 18.1148 12.3438L17.1773 4.84375C17.1393 4.54174 16.9923 4.26399 16.7641 4.06262C16.5358 3.86124 16.2419 3.75009 15.9375 3.75H6.25", stroke: "currentColor", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" })));

package/dist/collection/components/bs-chatbot-response-action/bs-chatbot-response-action.stories.js

@@ -31,3 +31,99 @@ export const InResponseMessage = {
     </div>
   `,
 };
+const ReadAloudIcon = () => html `
+  <svg slot="icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+    <path
+      d="M7.5 15.75H3C2.80109 15.75 2.61032 15.671 2.46967 15.5303C2.32902 15.3897 2.25 15.1989 2.25 15V9C2.25 8.80109 2.32902 8.61032 2.46967 8.46967C2.61032 8.32902 2.80109 8.25 3 8.25H7.5L14.25 3V21L7.5 15.75Z"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path d="M7.5 8.25V15.75" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+    <path
+      d="M18 10.0172C18.4825 10.565 18.7487 11.27 18.7487 12C18.7487 12.73 18.4825 13.435 18 13.9828"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M20.7816 7.5C21.8885 8.73755 22.5004 10.3397 22.5004 12C22.5004 13.6603 21.8885 15.2624 20.7816 16.5"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+`;
+const ChatWithHumanIcon = () => html `
+  <svg slot="icon" viewBox="0 0 24.5 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+    <path
+      d="M12.25 15C14.3211 15 16 13.3211 16 11.25C16 9.17893 14.3211 7.5 12.25 7.5C10.1789 7.5 8.5 9.17893 8.5 11.25C8.5 13.3211 10.1789 15 12.25 15Z"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M6.23125 18.6909C6.79554 17.5795 7.65659 16.6459 8.71895 15.9939C9.7813 15.3418 11.0035 14.9966 12.25 14.9966C13.4965 14.9966 14.7187 15.3418 15.7811 15.9939C16.8434 16.6459 17.7045 17.5795 18.2687 18.6909"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path d="M19 12L21.25 14.25L23.5 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+    <path d="M1 12L3.25 9.75L5.5 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+    <path
+      d="M3.25 9.75V12C3.24929 13.9055 3.85337 15.762 4.97524 17.3022C6.09712 18.8424 7.67888 19.9868 9.49273 20.5706C11.3066 21.1543 13.2589 21.1474 15.0685 20.5506C16.8782 19.9539 18.4517 18.7982 19.5625 17.25"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M21.25 14.25V12C21.2507 10.0945 20.6466 8.238 19.5248 6.69779C18.4029 5.15758 16.8211 4.01319 15.0073 3.42942C13.1934 2.84565 11.2411 2.85264 9.43147 3.44938C7.62185 4.04611 6.04832 5.2018 4.9375 6.75"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+`;
+const RaiseTicketIcon = () => html `
+  <svg slot="icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+    <path d="M9 5.25V18.75" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+    <path
+      d="M2.25 15C3.04565 15 3.80871 14.6839 4.37132 14.1213C4.93393 13.5587 5.25 12.7956 5.25 12C5.25 11.2044 4.93393 10.4413 4.37132 9.87868C3.80871 9.31607 3.04565 9 2.25 9V6C2.25 5.80109 2.32902 5.61032 2.46967 5.46967C2.61032 5.32902 2.80109 5.25 3 5.25H21C21.1989 5.25 21.3897 5.32902 21.5303 5.46967C21.671 5.61032 21.75 5.80109 21.75 6V9C20.9544 9 20.1913 9.31607 19.6287 9.87868C19.0661 10.4413 18.75 11.2044 18.75 12C18.75 12.7956 19.0661 13.5587 19.6287 14.1213C20.1913 14.6839 20.9544 15 21.75 15V18C21.75 18.1989 21.671 18.3897 21.5303 18.5303C21.3897 18.671 21.1989 18.75 21 18.75H3C2.80109 18.75 2.61032 18.671 2.46967 18.5303C2.32902 18.3897 2.25 18.1989 2.25 18V15Z"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+`;
+export const WithMenu = {
+    name: 'More options menu',
+    render: () => {
+        // Demonstrates the intended integration pattern: bs-chatbot-response-action only tracks/emits
+        // the menuOpen toggle and provides a `menu` slot positioned below the kebab button -- it has no
+        // opinion on what goes in the menu. The consuming app (here, this story) supplies a bs-menu with
+        // real bs-menu-items and is responsible for wiring bsMenuOpen to the response-action's menuOpen
+        // prop, mirroring how bs-chatbot-header's WithComposer story wires bsExpand.
+        const onMenuOpen = (ev) => {
+            ev.target.menuOpen = ev.detail;
+        };
+        return html `
+      <div style="max-width: 480px; font-family: sans-serif;">
+        <bs-chatbot-response-action sources-count="3" @bsMenuOpen=${onMenuOpen}>
+          <bs-menu slot="menu" style="width: 210px;">
+            <bs-menu-item>${ReadAloudIcon()}Read aloud</bs-menu-item>
+            <bs-menu-item>${ChatWithHumanIcon()}Chat with a human</bs-menu-item>
+            <bs-menu-item>${RaiseTicketIcon()}Raise a ticket</bs-menu-item>
+          </bs-menu>
+        </bs-chatbot-response-action>
+      </div>
+    `;
+    },
+};

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

@@ -0,0 +1,24 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-chatbot-suggestion-button', () => {
+    it('renders the default slot label content and the button part', async () => {
+        const { root } = await render(h("bs-chatbot-suggestion-button", null, "How can I help you?"));
+        expect(root).toHaveTextContent('How can I help you?');
+        const button = root.shadowRoot.querySelector('[part="button"]');
+        expect(button).not.toBeNull();
+        expect(button.tagName).toBe('BUTTON');
+    });
+    it('emits bsSelect exactly once on a normal click', async () => {
+        const { root, spyOnEvent } = await render(h("bs-chatbot-suggestion-button", null, "Suggestion"));
+        const selectSpy = spyOnEvent('bsSelect');
+        root.shadowRoot.querySelector('[part="button"]').click();
+        expect(selectSpy).toHaveReceivedEventTimes(1);
+    });
+    it('applies the native disabled attribute and does not fire bsSelect on click when disabled', async () => {
+        const { root, spyOnEvent } = await render(h("bs-chatbot-suggestion-button", { disabled: true }, "Suggestion"));
+        const selectSpy = spyOnEvent('bsSelect');
+        const button = root.shadowRoot.querySelector('[part="button"]');
+        expect(button.disabled).toBe(true);
+        button.click();
+        expect(selectSpy.length).toBe(0);
+    });
+});

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

@@ -0,0 +1,57 @@
+:host {
+  display: inline-block;
+  --bs-chatbot-suggestion-button-radius: var(--bs-border-radius-full);
+  --bs-chatbot-suggestion-button-border-color: var(--bs-border-primary);
+  --bs-chatbot-suggestion-button-bg-default: var(--bs-color-primary-container);
+  --bs-chatbot-suggestion-button-bg-hover: var(--bs-color-primary-container-hover);
+  /* No pre-built semantic "container-pressed" token matches this tonal button's lighter pressed
+   * shade progression (50 -> 100 -> 200) -- alias the primitive directly, same precedent
+   * documented in bs-button.css for its subtle/outlined/success/warning/info variants. */
+  --bs-chatbot-suggestion-button-bg-pressed: var(--bs-brand-200);
+  --bs-chatbot-suggestion-button-bg-focus: var(--bs-color-primary-container-hover);
+  --bs-chatbot-suggestion-button-text-default: var(--bs-text-action);
+  --bs-chatbot-suggestion-button-text-hover: var(--bs-text-action-hover);
+  --bs-chatbot-suggestion-button-focus-ring-color: var(--bs-border-primary-focus);
+}
+
+.bs-chatbot-suggestion-button {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  min-width: 80px;
+  padding: var(--bs-spacing-100) var(--bs-spacing-200);
+  border: var(--bs-border-width-thin) solid var(--bs-chatbot-suggestion-button-border-color);
+  border-radius: var(--bs-chatbot-suggestion-button-radius);
+  background: var(--bs-chatbot-suggestion-button-bg-default);
+  color: var(--bs-chatbot-suggestion-button-text-default);
+  font-family: inherit;
+  font-size: var(--bs-font-size-md);
+  line-height: calc(var(--bs-line-height-body-md) * 1px);
+  text-align: center;
+  cursor: pointer;
+  transition: background-color var(--bs-duration-fast) var(--bs-easing-standard);
+}
+
+.bs-chatbot-suggestion-button:hover:not(:disabled) {
+  background: var(--bs-chatbot-suggestion-button-bg-hover);
+  color: var(--bs-chatbot-suggestion-button-text-hover);
+}
+
+.bs-chatbot-suggestion-button:active:not(:disabled) {
+  background: var(--bs-chatbot-suggestion-button-bg-pressed);
+  color: var(--bs-chatbot-suggestion-button-text-hover);
+}
+
+.bs-chatbot-suggestion-button:focus-visible {
+  background: var(--bs-chatbot-suggestion-button-bg-focus);
+  color: var(--bs-chatbot-suggestion-button-text-hover);
+  outline: var(--bs-border-width-medium) solid var(--bs-chatbot-suggestion-button-focus-ring-color);
+  outline-offset: 3px;
+}
+
+.bs-chatbot-suggestion-button:disabled {
+  opacity: var(--bs-opacity-disabled);
+  cursor: not-allowed;
+}

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

@@ -0,0 +1,104 @@
+import { h } from "@stencil/core";
+/**
+ * A pill-shaped clickable suggestion chip for a Genie AI chat panel (e.g. "How can I help you?").
+ *
+ * One instance renders one chip -- to show several suggestion prompts side by side, render
+ * multiple `bs-chatbot-suggestion-button` elements inside a plain flex-wrap container; this
+ * library doesn't ship a separate list/group component for that since a `<div>` with
+ * `flex-wrap: wrap` is sufficient.
+ *
+ * ## When to use
+ * - Quick-reply/starter prompts shown above or alongside `bs-composer` in a Genie AI chat panel.
+ *
+ * ## When not to use
+ * - As a general-purpose button -- use `bs-button` instead, this component's pill shape and
+ *   tonal color treatment are specific to Genie chat suggestion prompts.
+ *
+ * @slot - Default slot: the suggestion's label text.
+ * @part button - The button element.
+ * @prop --bs-chatbot-suggestion-button-radius - Corner radius. Aliased to `--bs-border-radius-full`.
+ * @prop --bs-chatbot-suggestion-button-border-color - Border color. Aliased to `--bs-border-primary`.
+ * @prop --bs-chatbot-suggestion-button-bg-default - Background in the default (enabled) state.
+ *   Aliased to `--bs-color-primary-container`.
+ * @prop --bs-chatbot-suggestion-button-bg-hover - Background on hover. Aliased to
+ *   `--bs-color-primary-container-hover`.
+ * @prop --bs-chatbot-suggestion-button-bg-pressed - Background when pressed. Aliased directly to
+ *   the primitive `--bs-brand-200` -- there's no pre-built semantic "container-pressed" token
+ *   matching this tonal button's lighter pressed shade progression (50 -> 100 -> 200), so this
+ *   component aliases one locally (same situation `bs-button.css` documents for its
+ *   subtle/outlined/success/warning/info variants).
+ * @prop --bs-chatbot-suggestion-button-bg-focus - Background when focused. Aliased to
+ *   `--bs-color-primary-container-hover` (same as hover).
+ * @prop --bs-chatbot-suggestion-button-text-default - Text color in the default state. Aliased to
+ *   `--bs-text-action`.
+ * @prop --bs-chatbot-suggestion-button-text-hover - Text color on hover, pressed, and focus.
+ *   Aliased to `--bs-text-action-hover`.
+ * @prop --bs-chatbot-suggestion-button-focus-ring-color - Focus ring color. Aliased to
+ *   `--bs-border-primary-focus`.
+ */
+export class BsChatbotSuggestionButton {
+    /** Disables the button and applies a reduced-opacity treatment. */
+    disabled = false;
+    /** Fires when the button is clicked. */
+    bsSelect;
+    onClick = () => {
+        this.bsSelect.emit();
+    };
+    render() {
+        return (h("button", { key: 'e19ad1fd5e95f84f6bff54cbc326e78f70ef3677', type: "button", part: "button", class: "bs-chatbot-suggestion-button", disabled: this.disabled, onClick: this.onClick }, h("slot", { key: '4048fb336d69f0ca78e50ea9d5cba52921906966' })));
+    }
+    static get is() { return "bs-chatbot-suggestion-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-chatbot-suggestion-button.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-chatbot-suggestion-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the button and applies a reduced-opacity treatment."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsSelect",
+                "name": "bsSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the button is clicked."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -0,0 +1,30 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const meta = {
+    title: 'Genie AI Components/bs-chatbot-suggestion-button',
+    parameters: { docs: { description: { component: componentDescription('bs-chatbot-suggestion-button') } } },
+    render: args => html `
+    <bs-chatbot-suggestion-button ?disabled=${args.disabled}>${args.label}</bs-chatbot-suggestion-button>
+  `,
+    argTypes: {
+        label: { control: 'text', description: 'Default slot: the suggestion label text.' },
+        disabled: { control: 'boolean', description: propDescription('bs-chatbot-suggestion-button', 'disabled') },
+    },
+    args: {
+        label: 'How can I help you?',
+        disabled: false,
+    },
+};
+export default meta;
+export const Default = {};
+export const SuggestionRow = {
+    name: 'Multiple suggestions (flex-wrap row)',
+    render: () => html `
+    <div style="display: flex; flex-wrap: wrap; gap: 8px; max-width: 420px;">
+      <bs-chatbot-suggestion-button>How can I help you?</bs-chatbot-suggestion-button>
+      <bs-chatbot-suggestion-button>Summarize this document</bs-chatbot-suggestion-button>
+      <bs-chatbot-suggestion-button>Draft a follow-up email</bs-chatbot-suggestion-button>
+      <bs-chatbot-suggestion-button>Explain this in simple terms</bs-chatbot-suggestion-button>
+    </div>
+  `,
+};

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

@@ -36,10 +36,10 @@ export class BsInput {
         this.bsChange.emit(value);
     };
     render() {
-        return (h("div", { key: '53b4d56fb2c955f061ac113b7dc2dbe8548a85d1', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
+        return (h("div", { key: '571583a0d1181a2e307ba86679003c6cc37e4e63', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
         // "control" is a fixed id, not a generated one -- safe because Shadow DOM scopes ids
         // to this instance's own shadow root, so it can never collide with another bs-input.
-        h("label", { key: '60ac25b59a78410843dbe9416398d4e0ec15c976', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label)), h("input", { key: 'a9f801b2a7e16550c5d22c1301435e7a7082b362', id: "control", part: "control", class: "bs-input__control", type: this.type, value: this.value, placeholder: this.placeholder, disabled: this.disabled, "aria-describedby": this.error || this.description ? 'description-or-error' : undefined, "aria-invalid": this.error ? 'true' : undefined, onInput: this.onInput, onChange: this.onChange }), this.error ? (h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, this.error)) : this.description ? (h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
+        h("label", { key: '0a6c34ad8de3227e1264af649c1ac227e64c67bd', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label)), h("input", { key: 'de46e2c3272735160ca1773abf6fd270d042cfdd', id: "control", part: "control", class: "bs-input__control", type: this.type, value: this.value, placeholder: this.placeholder, disabled: this.disabled, "aria-describedby": this.error || this.description ? 'description-or-error' : undefined, "aria-invalid": this.error ? 'true' : undefined, onInput: this.onInput, onChange: this.onChange }), this.error ? (h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, this.error)) : this.description ? (h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
     }
     static get is() { return "bs-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,18 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-menu', () => {
+    it('renders with role="menu" on the host', async () => {
+        const { root } = await render(h("bs-menu", null));
+        expect(root.shadowRoot.querySelector('[part="list"]').getAttribute('role')).toBe('menu');
+    });
+    it('exposes the list part', async () => {
+        const { root } = await render(h("bs-menu", null));
+        expect(root.shadowRoot.querySelector('[part="list"]')).not.toBeNull();
+    });
+    it('renders slotted content in the default slot', async () => {
+        const { root } = await render(h("bs-menu", null, h("bs-menu-item", null, "Item one")));
+        expect(root).toHaveTextContent('Item one');
+        const slot = root.shadowRoot.querySelector('[part="list"] slot:not([name])');
+        expect(slot).not.toBeNull();
+        expect(slot.assignedElements()).toHaveLength(1);
+    });
+});

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

@@ -0,0 +1,20 @@
+:host {
+  display: block;
+  --bs-menu-bg: var(--bs-surface-raised);
+  --bs-menu-radius: var(--bs-border-radius-100);
+  --bs-menu-padding-y: var(--bs-spacing-50);
+  --bs-menu-gap: var(--bs-spacing-50);
+  --bs-menu-shadow: var(--bs-shadow-sm);
+}
+
+.bs-menu {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-menu-gap);
+  background: var(--bs-menu-bg);
+  border-radius: var(--bs-menu-radius);
+  padding: var(--bs-menu-padding-y) 0;
+  box-shadow: var(--bs-menu-shadow);
+  font-family: inherit;
+}