@brandsync/wc 0.0.4 → 0.0.5

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-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: 'df12d3d7af1bdc0e0e536e6c635ee406e4043b4f', 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: '2e4f867d17ab691a1df1b0b5b2964c0e1e986a91', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label)), h("input", { key: 'a078574a5ffad9eafea791cf5866ac123c4d5f56', 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;
+}

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

@@ -0,0 +1,39 @@
+import { h } from "@stencil/core";
+/**
+ * A generic dropdown/popup menu container: a rounded, elevated list of items (typically
+ * `bs-menu-item` elements).
+ *
+ * ## When to use
+ * - A popup list of actions/options triggered by another control (e.g. a "more options" kebab
+ *   button), such as `bs-chatbot-response-action`'s `menu` slot.
+ *
+ * ## When not to use
+ * - A persistent, always-visible list of options -- this component is purpose-built as a popup
+ *   surface (rounded corners, elevation shadow), not a plain list.
+ *
+ * @slot - Default slot: the menu's items (typically `bs-menu-item` elements, though anything can
+ * be slotted in -- this component doesn't restrict slot content via JS).
+ * @part list - The rounded, elevated box wrapping the slotted items.
+ * @prop --bs-menu-bg - Background of the menu box. Aliased to `--bs-surface-raised`.
+ * @prop --bs-menu-radius - Corner radius of the menu box. Aliased to `--bs-border-radius-100`.
+ * @prop --bs-menu-padding-y - Top/bottom padding of the menu box. Aliased to `--bs-spacing-50`.
+ * @prop --bs-menu-gap - Gap between slotted items. Aliased to `--bs-spacing-50`.
+ * @prop --bs-menu-shadow - Elevation shadow of the menu box. Aliased to `--bs-shadow-sm`.
+ */
+export class BsMenu {
+    render() {
+        return (h("div", { key: 'd4eee73bfffd1fcfd8f057e394a53fea4688748b', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: '866189bfabc2798ce37b8f0f6141143d4c49081e' })));
+    }
+    static get is() { return "bs-menu"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-menu.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-menu.css"]
+        };
+    }
+}

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

@@ -0,0 +1,15 @@
+import { html } from "lit";
+import { componentDescription } from "../../stories-utils";
+const meta = {
+    title: 'Components/bs-menu',
+    parameters: { docs: { description: { component: componentDescription('bs-menu') } } },
+    render: () => html `
+    <bs-menu style="width: 210px;">
+      <bs-menu-item>Read aloud</bs-menu-item>
+      <bs-menu-item>Chat with a human</bs-menu-item>
+      <bs-menu-item>Raise a ticket</bs-menu-item>
+    </bs-menu>
+  `,
+};
+export default meta;
+export const Default = {};

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

@@ -0,0 +1,33 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-menu-item', () => {
+    it('renders a button with role="menuitem" and part="item"', async () => {
+        const { root } = await render(h("bs-menu-item", null, "Read aloud"));
+        const button = root.shadowRoot.querySelector('[part="item"]');
+        expect(button).not.toBeNull();
+        expect(button.tagName).toBe('BUTTON');
+        expect(button.getAttribute('role')).toBe('menuitem');
+        expect(button.getAttribute('type')).toBe('button');
+    });
+    it('renders the label slot content', async () => {
+        const { root } = await render(h("bs-menu-item", null, "Read aloud"));
+        expect(root).toHaveTextContent('Read aloud');
+    });
+    it('does not reserve icon space when no icon is slotted', async () => {
+        const { root } = await render(h("bs-menu-item", null, "Read aloud"));
+        const icon = root.shadowRoot.querySelector('[part="icon"]');
+        expect(icon).not.toBeNull();
+        expect(icon).not.toHaveClass('bs-menu-item__icon--has-content');
+        expect(getComputedStyle(icon).display).toBe('none');
+    });
+    it('shows the icon wrapper when an icon is slotted', async () => {
+        const { root } = await render(h("bs-menu-item", null, h("span", { slot: "icon" }, "ICON"), "Read aloud"));
+        const icon = root.shadowRoot.querySelector('[part="icon"]');
+        expect(icon).toHaveClass('bs-menu-item__icon--has-content');
+    });
+    it('emits bsSelect when clicked', async () => {
+        const { root, spyOnEvent } = await render(h("bs-menu-item", null, "Read aloud"));
+        const selectSpy = spyOnEvent('bsSelect');
+        root.shadowRoot.querySelector('[part="item"]').click();
+        expect(selectSpy).toHaveReceivedEventTimes(1);
+    });
+});

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

@@ -0,0 +1,68 @@
+:host {
+  display: block;
+  --bs-menu-item-radius: var(--bs-border-radius-100);
+  --bs-menu-item-padding-y: var(--bs-spacing-100);
+  --bs-menu-item-padding-x: var(--bs-spacing-150);
+  --bs-menu-item-gap: var(--bs-spacing-100);
+  --bs-menu-item-hover: var(--bs-color-neutral-container);
+  --bs-menu-item-pressed: var(--bs-color-neutral-container-pressed);
+  --bs-menu-item-icon-color: var(--bs-icon-default);
+  --bs-menu-item-color: var(--bs-text-muted);
+  --bs-menu-item-font-size: var(--bs-font-size-md);
+  --bs-menu-item-line-height: var(--bs-line-height-body-md);
+}
+
+.bs-menu-item {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 48px;
+  border: none;
+  cursor: pointer;
+  background: transparent;
+  color: var(--bs-menu-item-color);
+  font-family: inherit;
+  border-radius: var(--bs-menu-item-radius);
+  padding: var(--bs-menu-item-padding-y) var(--bs-menu-item-padding-x);
+  gap: var(--bs-menu-item-gap);
+  transition: background-color var(--bs-duration-fast) var(--bs-easing-standard);
+}
+
+.bs-menu-item:focus-visible {
+  outline: 2px solid var(--bs-border-neutral-focus);
+  outline-offset: 2px;
+}
+
+.bs-menu-item:hover {
+  background: var(--bs-menu-item-hover);
+}
+
+.bs-menu-item:active {
+  background: var(--bs-menu-item-pressed);
+}
+
+.bs-menu-item__icon {
+  display: none;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  color: var(--bs-menu-item-icon-color);
+}
+
+.bs-menu-item__icon--has-content {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.bs-menu-item__icon ::slotted(svg) {
+  width: 24px;
+  height: 24px;
+}
+
+.bs-menu-item__label {
+  font-size: var(--bs-menu-item-font-size);
+  line-height: calc(var(--bs-menu-item-line-height) * 1px);
+  white-space: nowrap;
+}

package/dist/collection/components/bs-menu-item/bs-menu-item.js

@@ -0,0 +1,79 @@
+import { h } from "@stencil/core";
+/**
+ * A single selectable row inside a `bs-menu`: an optional icon plus a text label, rendered as a
+ * real `<button>` for correct keyboard/click semantics.
+ *
+ * ## When to use
+ * - As a child of `bs-menu`, one per selectable action/option.
+ *
+ * ## When not to use
+ * - Outside of `bs-menu` -- this component's sizing/hover treatment is designed to sit inside the
+ *   menu's rounded, padded list box.
+ *
+ * @slot icon - Optional leading icon (24x24). When left empty, no icon space is reserved.
+ * @slot - Default slot: the item's text label.
+ * @part item - The button element.
+ * @part icon - The icon wrapper.
+ * @part label - The label wrapper.
+ * @prop --bs-menu-item-radius - Corner radius of the row. Aliased to `--bs-border-radius-100`.
+ * @prop --bs-menu-item-padding-y - Top/bottom padding. Aliased to `--bs-spacing-100`.
+ * @prop --bs-menu-item-padding-x - Left/right padding. Aliased to `--bs-spacing-150`.
+ * @prop --bs-menu-item-gap - Gap between icon and label. Aliased to `--bs-spacing-100`.
+ * @prop --bs-menu-item-hover - Background on hover. Aliased to `--bs-color-neutral-container`.
+ * @prop --bs-menu-item-pressed - Background when pressed. Aliased to `--bs-color-neutral-container-pressed`.
+ * @prop --bs-menu-item-icon-color - Icon color. Aliased to `--bs-icon-default`.
+ * @prop --bs-menu-item-color - Label text color. Aliased to `--bs-text-muted`.
+ * @prop --bs-menu-item-font-size - Aliased to `--bs-font-size-md`.
+ * @prop --bs-menu-item-line-height - Aliased to `--bs-line-height-body-md`.
+ */
+export class BsMenuItem {
+    /** Tracks whether the `icon` slot has assigned content, so the icon wrapper (and its gap) only
+     * renders when there's actually an icon to show. */
+    hasIcon = false;
+    /** Fires when the item is clicked. */
+    bsSelect;
+    onIconSlotchange = (ev) => {
+        this.hasIcon = ev.target.assignedNodes().length > 0;
+    };
+    onClick = () => {
+        this.bsSelect.emit();
+    };
+    render() {
+        return (h("button", { key: '4d0e94afadd487e2ec44c0c6b416c27eb8f1a5f4', type: "button", part: "item", role: "menuitem", class: "bs-menu-item", onClick: this.onClick }, h("span", { key: 'a436154aaddddadc3944049597a87a2b52eb61cb', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, h("slot", { key: '50ad9c1b78bc8ea55219ad7692d7ef7fa7e48189', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'b3d1ee83556f10de5ad08d6f212ebfd9531dd54e', part: "label", class: "bs-menu-item__label" }, h("slot", { key: '5fe02e9b2407c4fd9eaf699caec9ecc9c0e25575' }))));
+    }
+    static get is() { return "bs-menu-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-menu-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-menu-item.css"]
+        };
+    }
+    static get states() {
+        return {
+            "hasIcon": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsSelect",
+                "name": "bsSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the item is clicked."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/bs-menu-item/bs-menu-item.stories.js

@@ -0,0 +1,37 @@
+import { html } from "lit";
+import { componentDescription } from "../../stories-utils";
+const meta = {
+    title: 'Components/bs-menu-item',
+    parameters: { docs: { description: { component: componentDescription('bs-menu-item') } } },
+    render: () => html ` <bs-menu-item style="width: 210px;">Read aloud</bs-menu-item> `,
+};
+export default meta;
+export const Default = {};
+export const WithIcon = {
+    name: 'With an icon',
+    render: () => html `
+    <bs-menu-item style="width: 210px;">
+      <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" />
+      </svg>
+      Read aloud
+    </bs-menu-item>
+  `,
+};
+export const InAMenu = {
+    name: 'In a bs-menu',
+    render: () => html `
+    <bs-menu style="width: 210px;">
+      <bs-menu-item>Read aloud</bs-menu-item>
+      <bs-menu-item>Chat with a human</bs-menu-item>
+      <bs-menu-item>Raise a ticket</bs-menu-item>
+    </bs-menu>
+  `,
+};