@brandsync/wc 1.19.0 → 1.20.1

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

@@ -14,9 +14,20 @@ import { h } from "@stencil/core";
  * to its top corners. Presence of assigned content is what shows it -- doesn't affect layout when
  * empty.
  * @slot header - Optional heading content above the body.
+ * ## Clickable and selectable cards
+ * Set `href` to make the whole card a link, or `selectable` to make it a toggle (`selected`,
+ * `aria-pressed`). The card stays a plain container with ONE real `<a>`/`<button>` (the "stretched
+ * link" pattern): the `header` slot is rendered inside it, so the header text is the accessible name
+ * (or set `label`), and it is stretched over the whole card, so the card is one tab stop and no
+ * interactive element is nested inside another. Controls in the `body`/`footer` slots stay
+ * individually clickable and focusable as long as they are *direct* children of the slot
+ * (`bs-button`, `a`, `button`, form controls); everything else in those slots passes clicks through
+ * to the card.
+ *
  * @slot - Default slot: the card's main body content.
  * @slot footer - Optional actions/content below the body (e.g. a button).
  * @part container - The outer surface element.
+ * @part action - The `<a>`/`<button>` that makes the card clickable (only when `href` or `selectable` is set).
  * @part image - The hero image wrapper (only visible when the `image` slot has content).
  * @part header - The header wrapper.
  * @part body - The body wrapper.
@@ -26,6 +37,36 @@ export class BsCard {
     /** Maps to the brandsync-tokens `--bs-paper-bg-*` set — Brandsync's tokens don't have a
      * dedicated "card" component yet, so this reuses the existing Paper surface tokens. */
     surface = 'raised';
+    /** Makes the whole card a link to this URL (a real `<a>`). Takes precedence over `selectable`. */
+    href;
+    /** Link `target`, only used with `href`. With `_blank`, `rel` defaults to `noopener noreferrer`. */
+    target;
+    /** Link `rel`, only used with `href`. */
+    rel;
+    /** Makes the whole card a toggle (a real `<button aria-pressed>`). Ignored when `href` is set. */
+    selectable = false;
+    /** Whether a `selectable` card is selected. Mutable and reflected; toggled by the user. */
+    selected = false;
+    /** Accessible name for the clickable card, used instead of the `header` slot text. Set it when
+     * there is no `header` content, or when the header text is not a good name on its own. */
+    label;
+    /** Fires when a `selectable` card is toggled by the user, with the new `selected` value. */
+    bsChange;
+    /** Fires when a link card (`href`) is clicked, before the browser navigates. **Cancelable**:
+     * `preventDefault()` stops the navigation so you can route it yourself. Detail is `{ href }`.
+     * Modified clicks (ctrl/cmd/shift/alt, middle button) are left to the browser. */
+    bsNavigate;
+    onLinkClick = (ev) => {
+        if (ev.defaultPrevented || ev.button !== 0 || ev.metaKey || ev.ctrlKey || ev.shiftKey || ev.altKey)
+            return;
+        const navigate = this.bsNavigate.emit({ href: this.href });
+        if (navigate.defaultPrevented)
+            ev.preventDefault();
+    };
+    onToggleClick = () => {
+        this.selected = !this.selected;
+        this.bsChange.emit(this.selected);
+    };
     /** Tracks whether the `image` slot has assigned content, so the image wrapper only reserves
      * layout space (and clips its top corners) when there's actually an image -- same pattern as
      * `bs-dialog`'s `hasImage`. */
@@ -34,7 +75,16 @@ export class BsCard {
         this.hasImage = ev.target.assignedNodes().length > 0;
     };
     render() {
-        return (h("div", { key: '5badbcc0d29f07bf53520091e1e8fe8d8187dd18', part: "container", class: `bs-card bs-card--${this.surface}` }, h("div", { key: '2c69c0795db112c2dc52289a47b76d60662ef693', part: "image", class: `bs-card__image ${this.hasImage ? 'bs-card__image--visible' : ''}` }, h("slot", { key: '3aa0debc45e28c88b05103a494ee52f047305d9d', name: "image", onSlotchange: this.onImageSlotchange })), h("div", { key: '6fbe78e872b7aa7e166907a4173edd813f8fd73b', class: "bs-card__content" }, h("div", { key: '19df2524b50471bbb56e95b445643a4bfddd0c12', part: "header", class: "bs-card__header" }, h("slot", { key: 'bd4c9b53ccc07b7a95f6aee28b2a95a0ab8b137e', name: "header" })), h("div", { key: 'c5351e535d77c007806554ae3580b1b0b0bafd9d', part: "body", class: "bs-card__body" }, h("slot", { key: '323ac4df7355ce44383137ad754c650ff515ef28' })), h("div", { key: 'ac3e228d13303ffcaab2a4879a202db28e2c3a6a', part: "footer", class: "bs-card__footer" }, h("slot", { key: 'a2afbae842ef598422853a0628bb9f14dee34c6a', name: "footer" })))));
+        const isLink = !!this.href;
+        const isToggle = !isLink && this.selectable;
+        const rel = this.rel ?? (this.target === '_blank' ? 'noopener noreferrer' : undefined);
+        const header = h("slot", { key: 'a30b4f1a71f4469458a8c701b38b51deb1b92df5', name: "header" });
+        const classes = ['bs-card', `bs-card--${this.surface}`];
+        if (isLink || isToggle)
+            classes.push('bs-card--interactive');
+        if (isToggle && this.selected)
+            classes.push('bs-card--selected');
+        return (h("div", { key: '0e88c7d2f07f0ef7bbfada87cd83415aa6949075', part: "container", class: classes.join(' ') }, h("div", { key: '553162d5aa9d0f3b4b03eed02bb0d1717adf5695', part: "image", class: `bs-card__image ${this.hasImage ? 'bs-card__image--visible' : ''}` }, h("slot", { key: 'de82a0591157228f5586c816795d634ea1b41d3d', name: "image", onSlotchange: this.onImageSlotchange })), h("div", { key: 'a09828b31c202312751cbba9161aa81e2f79e51d', class: "bs-card__content" }, h("div", { key: '03592a2cb3a598f04a5b9253b80301fbf910fdf9', part: "header", class: "bs-card__header" }, isLink ? (h("a", { part: "action", class: "bs-card__action", href: this.href, target: this.target, rel: rel, "aria-label": this.label, onClick: this.onLinkClick }, header)) : isToggle ? (h("button", { part: "action", type: "button", class: "bs-card__action", "aria-pressed": String(this.selected), "aria-label": this.label, onClick: this.onToggleClick }, header)) : (header)), h("div", { key: '0d174a856927702a274f2b60df02c4691d5927f3', part: "body", class: "bs-card__body" }, h("slot", { key: '7bc6b590ee94e45028e35bf8d9f83aaefcf63ff0' })), h("div", { key: '6f3b9db20a6dd2c8799570ae8a5c6252ebde642f', part: "footer", class: "bs-card__footer" }, h("slot", { key: '08a0cc866f737490346c7969e45d089d89be9143', name: "footer" })))));
     }
     static get is() { return "bs-card"; }
     static get encapsulation() { return "shadow"; }
@@ -75,6 +125,122 @@ export class BsCard {
                 "reflect": true,
                 "attribute": "surface",
                 "defaultValue": "'raised'"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the whole card a link to this URL (a real `<a>`). Takes precedence over `selectable`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Link `target`, only used with `href`. With `_blank`, `rel` defaults to `noopener noreferrer`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target"
+            },
+            "rel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Link `rel`, only used with `href`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rel"
+            },
+            "selectable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the whole card a toggle (a real `<button aria-pressed>`). Ignored when `href` is set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selectable",
+                "defaultValue": "false"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether a `selectable` card is selected. Mutable and reflected; toggled by the user."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selected",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the clickable card, used instead of the `header` slot text. Set it when\nthere is no `header` content, or when the header text is not a good name on its own."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
             }
         };
     }
@@ -83,4 +249,37 @@ export class BsCard {
             "hasImage": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "bsChange",
+                "name": "bsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when a `selectable` card is toggled by the user, with the new `selected` value."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "bsNavigate",
+                "name": "bsNavigate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when a link card (`href`) is clicked, before the browser navigates. **Cancelable**:\n`preventDefault()` stops the navigation so you can route it yourself. Detail is `{ href }`.\nModified clicks (ctrl/cmd/shift/alt, middle button) are left to the browser."
+                },
+                "complexType": {
+                    "original": "{ href: string }",
+                    "resolved": "{ href: string; }",
+                    "references": {}
+                }
+            }];
+    }
 }

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

@@ -41,3 +41,35 @@ export const WithImage = {
     </bs-card>
   `,
 };
+export const Clickable = {
+    name: 'Clickable (link)',
+    render: args => html `
+    <bs-card surface=${args.surface} href="#room-4b" style="max-width: 320px;" @bsNavigate=${(e) => e.preventDefault()}>
+      <strong slot="header">Meeting Room 4B</strong>
+      <p>Reserved for 2:00pm - 3:00pm. The whole card is one link.</p>
+    </bs-card>
+  `,
+};
+export const Selectable = {
+    name: 'Selectable (toggle)',
+    render: args => html `
+    <div style="display: flex; gap: 16px;">
+      ${['Basic', 'Plus', 'Pro'].map((plan, i) => html `
+          <bs-card surface=${args.surface} selectable ?selected=${i === 1} style="width: 200px;">
+            <strong slot="header">${plan}</strong>
+            <p>Choose the ${plan} plan.</p>
+          </bs-card>
+        `)}
+    </div>
+  `,
+};
+export const ClickableWithFooterAction = {
+    name: 'Clickable with footer action',
+    render: args => html `
+    <bs-card surface=${args.surface} href="#room-4b" style="max-width: 320px;" @bsNavigate=${(e) => e.preventDefault()}>
+      <strong slot="header">Meeting Room 4B</strong>
+      <p>The footer button is its own tab stop and does not trigger the card link.</p>
+      <bs-button slot="footer" variant="outlined" size="sm">Cancel booking</bs-button>
+    </bs-card>
+  `,
+};

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

@@ -28,7 +28,7 @@ import { h } from "@stencil/core";
  * - A strict sequence of steps -- use `bs-stepper`.
  * - Paging through a large, addressable result set -- use `bs-pagination`.
  *
- * @slot - Default slot: the slides. Each direct child is one slide.
+ * @slot - Default slot: the slides. Each direct child is one slide and gets `role="group"`, so wrap an image in an element (don't slot a bare `<img>`).
  * @part carousel - The outer region (`role="region"`, `aria-roledescription="carousel"`).
  * @part slides - The row holding the visible slides.
  * @part tracker - The row holding the tracker and the Pause/Play button.
@@ -257,7 +257,7 @@ export class BsCarousel {
         // While auto-advance is actually running, slide changes must not be announced (it would
         // interrupt the user constantly); otherwise announce them politely.
         const rotating = this.autoplay && !this.paused && !this.interacting;
-        return (h("section", { key: 'fe38898b10611d2bb20c3428cbc4009449186453', part: "carousel", class: "bs-carousel", role: "region", "aria-roledescription": "carousel", "aria-label": this.label, style: { '--bs-carousel-slides-per-view': String(this.perView) } }, h("div", { key: 'd1d01494417dc282a52931307406970b8a1b7011', part: "slides", class: "bs-carousel__slides", "aria-live": rotating ? 'off' : 'polite' }, h("slot", { key: '955bb5229671a23babeea85b7f23b5ec3b330ebe', onSlotchange: this.onSlotChange })), showTracker && (h("div", { key: '7c4c3e73bc8dbf05e351cb0628e26e138d0a4028', part: "tracker", class: "bs-carousel__tracker" }, this.tracker === 'numbers' ? (h("bs-pagination", { part: "pagination", totalPages: this.pageCount, currentPage: this.page, onBsPageChange: (ev) => {
+        return (h("section", { key: 'cc9bb48b594809276ba1d7a37bdab86e6406ce4b', part: "carousel", class: "bs-carousel", role: "region", "aria-roledescription": "carousel", "aria-label": this.label, style: { '--bs-carousel-slides-per-view': String(this.perView) } }, h("div", { key: 'd6505ef1cf25ba7ad7f43e733c72324e54138882', part: "slides", class: "bs-carousel__slides", "aria-live": rotating ? 'off' : 'polite' }, h("slot", { key: 'd619f41a54d346f05e56dae300fc8e6f8e0d9161', onSlotchange: this.onSlotChange })), showTracker && (h("div", { key: '4cc21ab05421bdba11a2588a6628041f8ef57e64', part: "tracker", class: "bs-carousel__tracker" }, this.tracker === 'numbers' ? (h("bs-pagination", { part: "pagination", totalPages: this.pageCount, currentPage: this.page, onBsPageChange: (ev) => {
                 ev.stopPropagation();
                 this.goTo(ev.detail);
             } })) : (h("div", { class: "bs-carousel__nav" }, this.renderDotsTracker())), this.renderPause()))));

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

@@ -19,12 +19,16 @@ const PHOTO_IDS = [
     'photo-1512917774080-9991f1c4c750',
     'photo-1660496247667-3fb697c396af',
 ];
+// Each slide is a wrapper <div>, not a bare <img>: the carousel gives every slide role="group" and an
+// "n of N" label, which is invalid on an <img> (and would replace its alt text).
 const slot = (n) => html `
-  <img
-    src="https://images.unsplash.com/${PHOTO_IDS[(n - 1) % PHOTO_IDS.length]}?fm=jpg&q=80&w=640&h=360&fit=crop&auto=format"
-    alt="Landscape photograph ${n}"
-    style="display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--bs-border-radius-100);"
-  />
+  <div>
+    <img
+      src="https://images.unsplash.com/${PHOTO_IDS[(n - 1) % PHOTO_IDS.length]}?fm=jpg&q=80&w=640&h=360&fit=crop&auto=format"
+      alt="Landscape photograph ${n}"
+      style="display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--bs-border-radius-100);"
+    />
+  </div>
 `;
 const meta = {
     title: 'Components/bs-carousel',

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

@@ -80,4 +80,12 @@ describe('bs-chatbot-feedback', () => {
         expect(root.shadowRoot.querySelector('[part="submit"]').textContent).toContain('Send');
         expect(root.shadowRoot.querySelector('[part="new-chat"]').textContent).toContain('Ny chat');
     });
+    it('draws stars with the Phosphor star (outline) and star-fill (selected) glyphs', async () => {
+        const { root, waitForChanges } = await render(h("bs-chatbot-feedback", null));
+        const stars = () => Array.from(root.shadowRoot.querySelectorAll('[part="star"] bs-icon'));
+        expect(stars().map(i => i.getAttribute('name'))).toEqual(['star', 'star', 'star', 'star', 'star']);
+        root.shadowRoot.querySelectorAll('[part="star"]')[1].click();
+        await waitForChanges();
+        expect(stars().map(i => i.getAttribute('name'))).toEqual(['star-fill', 'star-fill', 'star', 'star', 'star']);
+    });
 });

package/dist/collection/components/bs-chatbot-feedback/bs-chatbot-feedback.css

@@ -56,9 +56,8 @@
   transition: background-color var(--bs-duration-fast) var(--bs-easing-standard);
 }
 
-.bs-chatbot-feedback__close svg {
-  width: 20px;
-  height: 20px;
+.bs-chatbot-feedback__close bs-icon {
+  --bs-icon-size: 20px;
 }
 
 .bs-chatbot-feedback__close:hover {
@@ -110,10 +109,16 @@
   padding: 0;
   background: transparent;
   border: none;
+  align-items: center;
+  justify-content: center;
   color: var(--bs-chatbot-feedback-star-empty);
   cursor: pointer;
 }
 
+.bs-chatbot-feedback__star bs-icon {
+  --bs-icon-size: 32px;
+}
+
 .bs-chatbot-feedback__star[aria-checked='true'] {
   color: var(--bs-chatbot-feedback-star-filled);
 }
@@ -211,11 +216,9 @@
   transition: background-color var(--bs-duration-fast) var(--bs-easing-standard);
 }
 
-.bs-chatbot-feedback__submit svg,
-.bs-chatbot-feedback__new-chat svg {
-  width: 24px;
-  height: 24px;
-  flex-shrink: 0;
+.bs-chatbot-feedback__submit bs-icon,
+.bs-chatbot-feedback__new-chat bs-icon {
+  --bs-icon-size: 24px;
 }
 
 .bs-chatbot-feedback__submit,

package/dist/collection/components/bs-chatbot-feedback/bs-chatbot-feedback.js

@@ -139,7 +139,7 @@ export class BsChatbotFeedback {
     }
     render() {
         const stars = [1, 2, 3, 4, 5];
-        return (h("div", { key: 'ee99c0b20a4dc2fee3543f66eaa8c8f354c8a3ff', class: "bs-chatbot-feedback", role: "region", "aria-label": this.computedHeading() }, h("button", { key: '31751520032972b7ae9a93848d1ee44045f00dc6', type: "button", part: "close", class: "bs-chatbot-feedback__close", "aria-label": this.closeLabel, onClick: this.onCloseClick }, h(CloseIcon, { key: '1b7367e072d066e183eccaf76b3b954026101db2' })), h("div", { key: '9ed28d17e8ba6c561fc72d1036d34a431a482251', class: "bs-chatbot-feedback__top" }, h("div", { key: '745c881283b828eb32586cf6f81b2142936f93f6', class: "bs-chatbot-feedback__text" }, h("p", { key: '8d8bea1913dc865ec79e88a31e0b93ca84c1a867', part: "heading", class: "bs-chatbot-feedback__heading" }, this.computedHeading()), h("p", { key: 'fffe199cc928e0b6c481270d7ad59dbdfdb2b2c4', part: "subtitle", class: "bs-chatbot-feedback__subtitle" }, this.computedSubtitle())), h("div", { key: '8cc7563ec8ae7ee981f12323b55397d5e0bcb2c2', class: "bs-chatbot-feedback__stars", role: "radiogroup", "aria-label": this.ratingLabel }, stars.map(value => (h("button", { type: "button", part: "star", class: "bs-chatbot-feedback__star", role: "radio", "aria-checked": (this.rating >= value).toString(), "aria-label": `${value} ${value > 1 ? this.starsLabel : this.starLabel}`, disabled: this.submitted, onClick: () => this.onStarClick(value) }, h(StarIcon, { filled: this.rating >= value }))))), !this.submitted && (h("div", { key: 'de939881796cf7f7e32294904aec1be2f7f71035', class: "bs-chatbot-feedback__field" }, h("label", { key: 'd58da98d04619b3bfcbe3b97fcf9529229526831', part: "label", class: "bs-chatbot-feedback__label", htmlFor: "bs-chatbot-feedback-comment" }, this.commentLabel), h("textarea", { key: 'c45059beddde013832133f21e20d86be7be2bd9c', part: "textarea", id: "bs-chatbot-feedback-comment", class: "bs-chatbot-feedback__textarea", placeholder: this.commentPlaceholder, value: this.comment, onInput: this.onCommentInput }))), this.submitted && this.comment && (h("p", { key: 'd630c3cb1561f90d123989015f0388da16a22595', part: "comment", class: "bs-chatbot-feedback__comment" }, this.comment))), h("div", { key: '37c06651e4f65c54e4e58da5f3c1a224c5125184', class: "bs-chatbot-feedback__actions" }, !this.submitted && (h("button", { key: 'a88d5a116114d4685d92562a49f3dc99bff86e9d', type: "button", part: "submit", class: "bs-chatbot-feedback__submit", disabled: this.rating === 0, onClick: this.onSubmitClick }, h(SendIcon, { key: '557e3de8ae2fcf5a76fda6cbcea1762e674f0734' }), this.submitLabel)), h("button", { key: '37c972da6bb7595d1a05a72a1c49c3184b054020', type: "button", part: "new-chat", class: `bs-chatbot-feedback__new-chat ${this.submitted ? 'bs-chatbot-feedback__new-chat--primary' : 'bs-chatbot-feedback__new-chat--outlined'}`, onClick: this.onNewChatClick }, h(EditIcon, { key: '76e954f39f7b45e227df1ee4f6bbc24fd6985b9f' }), this.newChatLabel))));
+        return (h("div", { key: '9642427bb2feedde50e355c71f6853df257f69d2', class: "bs-chatbot-feedback", role: "region", "aria-label": this.computedHeading() }, h("button", { key: '7d01f9ee81864b7f93886288dc9aa430aab9bc35', type: "button", part: "close", class: "bs-chatbot-feedback__close", "aria-label": this.closeLabel, onClick: this.onCloseClick }, h("bs-icon", { key: '6a3ee3614ef48446b0a9137f877145549484852c', name: "x", tone: "inherit", size: "md" })), h("div", { key: 'b7193bc13441c56edc89974ca0e0ba43c8d47a66', class: "bs-chatbot-feedback__top" }, h("div", { key: '9b93d4ee252f9eab36808b84171f6d85e6da7be2', class: "bs-chatbot-feedback__text" }, h("p", { key: '204ad4eac6e3ae69ca539b8efe9319dd834dbcdf', part: "heading", class: "bs-chatbot-feedback__heading" }, this.computedHeading()), h("p", { key: 'e3ddf360ba370314985a66ad28782a89b57ba51a', part: "subtitle", class: "bs-chatbot-feedback__subtitle" }, this.computedSubtitle())), h("div", { key: '50eaa4821ca056cb16bdabb96306ccc52bb987e4', class: "bs-chatbot-feedback__stars", role: "radiogroup", "aria-label": this.ratingLabel }, stars.map(value => (h("button", { type: "button", part: "star", class: "bs-chatbot-feedback__star", role: "radio", "aria-checked": (this.rating >= value).toString(), "aria-label": `${value} ${value > 1 ? this.starsLabel : this.starLabel}`, disabled: this.submitted, onClick: () => this.onStarClick(value) }, h("bs-icon", { name: this.rating >= value ? 'star-fill' : 'star', tone: "inherit" }))))), !this.submitted && (h("div", { key: '754de919956347beb69d38ab2fd95cbc741a5cc0', class: "bs-chatbot-feedback__field" }, h("label", { key: '1ba7da633b0b2b6ac036d62849c6b8d594c5dc2e', part: "label", class: "bs-chatbot-feedback__label", htmlFor: "bs-chatbot-feedback-comment" }, this.commentLabel), h("textarea", { key: '0abc18be7c42e7ddec42e94a4b88e845af29c9f3', part: "textarea", id: "bs-chatbot-feedback-comment", class: "bs-chatbot-feedback__textarea", placeholder: this.commentPlaceholder, value: this.comment, onInput: this.onCommentInput }))), this.submitted && this.comment && (h("p", { key: '5e772be2c5b47bda8e35fac82b785fc488b87d37', part: "comment", class: "bs-chatbot-feedback__comment" }, this.comment))), h("div", { key: '0473e7afaa3d96f1a1044f9410a95e468cc33db4', class: "bs-chatbot-feedback__actions" }, !this.submitted && (h("button", { key: 'a319bbd909a72c177649e899e4c6500778d57dce', type: "button", part: "submit", class: "bs-chatbot-feedback__submit", disabled: this.rating === 0, onClick: this.onSubmitClick }, h("bs-icon", { key: '29baadc25644ea985faf7f874741db4c2dcdd089', name: "paper-plane-right", tone: "inherit" }), this.submitLabel)), h("button", { key: 'aadd03c3f2b18d7e821e50891b9e94e884b6c36f', type: "button", part: "new-chat", class: `bs-chatbot-feedback__new-chat ${this.submitted ? 'bs-chatbot-feedback__new-chat--primary' : 'bs-chatbot-feedback__new-chat--outlined'}`, onClick: this.onNewChatClick }, h("bs-icon", { key: 'f9f088c5e2f0b9cd8f86d433cb1c516e65d1418f', name: "note-pencil", tone: "inherit" }), this.newChatLabel))));
     }
     static get is() { return "bs-chatbot-feedback"; }
     static get encapsulation() { return "shadow"; }
@@ -494,7 +494,3 @@ export class BsChatbotFeedback {
             }];
     }
 }
-const StarIcon = ({ filled }) => (h("svg", { viewBox: "0 0 24 24", fill: filled ? 'currentColor' : 'none', xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M12 2.5L15.09 8.75L22 9.77L17 14.62L18.18 21.5L12 18.22L5.82 21.5L7 14.62L2 9.77L8.91 8.75L12 2.5Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
-const SendIcon = () => (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M13.5 12H7.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M4.55 20.75C4.44 20.99 4.47 21.27 4.63 21.48C4.79 21.69 5.05 21.79 5.31 21.75L21.37 12.65C21.6 12.52 21.75 12.27 21.75 12C21.75 11.73 21.6 11.48 21.37 11.35L5.31 2.25C5.05 2.21 4.79 2.31 4.63 2.52C4.47 2.73 4.44 3.01 4.55 3.25L7.5 12L4.55 20.75Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
-const EditIcon = () => (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M16.5 3.5L20.5 7.5L8 20H4V16L16.5 3.5Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M14.5 5.5L18.5 9.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
-const CloseIcon = () => (h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M15 5L5 15", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M15 15L5 5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));

package/dist/collection/components/bs-chatbot-header/bs-chatbot-header.css

@@ -69,9 +69,8 @@
   outline-offset: 2px;
 }
 
-.bs-chatbot-header__button svg {
-  width: 24px;
-  height: 24px;
+.bs-chatbot-header__button bs-icon {
+  --bs-icon-size: 24px;
 }
 
 .bs-chatbot-header__button:hover {

package/dist/collection/components/bs-chatbot-header/bs-chatbot-header.js

@@ -93,7 +93,7 @@ export class BsChatbotHeader {
         this.bsClose.emit();
     };
     render() {
-        return (h("div", { key: '4d749a85b3317c88b39c0042be1dd5c415bce812', class: "bs-chatbot-header", role: "banner", "aria-label": this.heading }, h("div", { key: 'adb4686e3c95bd0c63c4ae5e02726a23c90653e4', part: "logo", class: "bs-chatbot-header__logo", role: "img", "aria-label": this.heading, innerHTML: GENIE_LOGO_SVG }), h("div", { key: '9baf468f0792ec06ef3a4bf776df0ec938dae56c', class: "bs-chatbot-header__actions" }, h("slot", { key: '78a6ac0cce725bb63301351bdbf3fbb4af1dccfc', name: "actions" }), !this.hideNewChat && (h("span", { key: '5614b1689b6a1518cb2f466586453114a8eb2269', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'f593334c14d6890f6b204aede3af2ac21282c834', type: "button", part: "new-chat", class: "bs-chatbot-header__button", "aria-label": this.newChatLabel, onClick: this.onNewChatClick }, h("slot", { key: 'ce1f32ee3c7baf5b141004e3bcd4b92390c5f65a', name: "new-chat-icon" }, h(NewChatIcon, { key: 'db2ae97dfbeb82b0fec1def38a2d3a6efff915ca' }))), h("bs-tooltip", { key: '11fecac2381fadc649f6f0fa71bf22adaf7c7170', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, this.newChatLabel))), !this.hideHistory && (h("span", { key: '8c6dd57c915550f2d9bf89aa3a915d036f5fb1db', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'c9c9a4df2bc94fee532c8997bbc91b94b0dc90f4', type: "button", part: "history", class: "bs-chatbot-header__button", "aria-label": this.historyLabel, onClick: this.onHistoryClick }, h("slot", { key: '7efd44b983dc8d7bcf0e517d1c283c30dc920388', name: "history-icon" }, h(HistoryIcon, { key: '5e053692985e9efb724ef315397e480a927a23af' }))), h("bs-tooltip", { key: '0736b67042161cfa09e1e4d6fe50aecdabc97da7', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, this.historyLabel))), !this.hideExpand && (h("span", { key: '2f57c3fdf10c31c5d892a094df94e36a0273a8a3', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '75b4864469e56ec3fa373740483118878e6e2637', type: "button", part: "expand", class: "bs-chatbot-header__button", "aria-label": this.expanded ? this.collapseLabel : this.expandLabel, "aria-pressed": this.expanded ? 'true' : 'false', onClick: this.onExpandClick }, h("slot", { key: '549a118c2784795cc4ac12c1c257221e57f40243', name: "expand-icon" }, h(ExpandIcon, { key: '88bb836b69e0293e45a0be50f33f6256242a5761' }))), h("bs-tooltip", { key: '9c957cdb8876be24b1fc2b9167852f80145ed43d', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, this.expanded ? this.collapseLabel : this.expandLabel))), !this.hideClose && (h("span", { key: 'cacd2af286b69dc72340d045adceb97d5219a6d8', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '03e08785d4db92fec96632fe60542f997c954e51', type: "button", part: "close", class: "bs-chatbot-header__button", "aria-label": this.closeLabel, onClick: this.onCloseClick }, h("slot", { key: '67b21828c6e8663333157f4d3f0f671cd8fcbf79', name: "close-icon" }, h(CloseIcon, { key: '11f16c5d485969216a25ef2b581d4dd72ef3cdc7' }))), h("bs-tooltip", { key: '7a9a19cf276a1e9c097f901ea57be2f32d11902e', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, this.closeLabel))))));
+        return (h("div", { key: 'f0c324bef5be83ad32e9ceba663c8549ff656e4f', class: "bs-chatbot-header", role: "banner", "aria-label": this.heading }, h("div", { key: '5eddf01ee18aa11f4447b46813c95b7fdc119865', part: "logo", class: "bs-chatbot-header__logo", role: "img", "aria-label": this.heading, innerHTML: GENIE_LOGO_SVG }), h("div", { key: 'c9289ee0c7e7ef6b68ea632f71797b0117d50e74', class: "bs-chatbot-header__actions" }, h("slot", { key: 'b32fdb607945a114c88ca9e699a79937e0acd1cf', name: "actions" }), !this.hideNewChat && (h("span", { key: '46dca4bc6488c5b722154e76fe400c318c42e9c9', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '023dacbfea16996c8e82793e4b5fc1269bf1a358', type: "button", part: "new-chat", class: "bs-chatbot-header__button", "aria-label": this.newChatLabel, onClick: this.onNewChatClick }, h("slot", { key: 'f1163cb48f30a0f30b63b4e456839aef082a3055', name: "new-chat-icon" }, h("bs-icon", { key: '6cce81b2e77ddb4279d82364a861642622a54f95', name: "note-pencil", tone: "inherit" }))), h("bs-tooltip", { key: '128a86c14973dcc83df59f129fba56c3aaa0a43e', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, this.newChatLabel))), !this.hideHistory && (h("span", { key: '8f11045491e416e8ac9dc9e3c5d6a2628e7edefb', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '07bebd752033ce96bb6037a0c26ab0fd76877769', type: "button", part: "history", class: "bs-chatbot-header__button", "aria-label": this.historyLabel, onClick: this.onHistoryClick }, h("slot", { key: 'b136a662ef52891d356f123e79e7dfd269127290', name: "history-icon" }, h("bs-icon", { key: '9a16baba88b301ad536242a3b160ab7c5309ed5b', name: "clock-counter-clockwise", tone: "inherit" }))), h("bs-tooltip", { key: '006423bbdd39cd97b126799ca0abde9dd49a2fdb', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, this.historyLabel))), !this.hideExpand && (h("span", { key: 'c7b5f5a6881445597066ab72a58a63bc7a27257e', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'b12e87c73b3aeb48c49dee42caf404bebf211616', type: "button", part: "expand", class: "bs-chatbot-header__button", "aria-label": this.expanded ? this.collapseLabel : this.expandLabel, "aria-pressed": this.expanded ? 'true' : 'false', onClick: this.onExpandClick }, h("slot", { key: 'b2c0af3e216151753a1865c3d7003aeaf6f5ac4e', name: "expand-icon" }, h("bs-icon", { key: 'cc11a845475bb70d254d21304bc7548b3bb4d908', name: "arrows-out-simple", tone: "inherit" }))), h("bs-tooltip", { key: '69900f0f7c83bebfdec08e7b2890b2b364102e1e', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, this.expanded ? this.collapseLabel : this.expandLabel))), !this.hideClose && (h("span", { key: 'f8527d411010504c6fbf18d82bbf48e920bad539', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'ebe64fb9ed16a35f4ff29bd3ad62286dc6cc0211', type: "button", part: "close", class: "bs-chatbot-header__button", "aria-label": this.closeLabel, onClick: this.onCloseClick }, h("slot", { key: 'd93a5b6958872e8b967abeb71ce1ef9631b44b8c', name: "close-icon" }, h("bs-icon", { key: '3d18f704f5094d28c1b3a4c3bfe713cbe42cbf81', name: "x", tone: "inherit" }))), h("bs-tooltip", { key: '263181de49c246cbb88d8c2757978001debd2e69', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, this.closeLabel))))));
     }
     static get is() { return "bs-chatbot-header"; }
     static get encapsulation() { return "shadow"; }
@@ -395,7 +395,3 @@ export class BsChatbotHeader {
             }];
     }
 }
-const NewChatIcon = () => (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M12 15H9V12L18 3L21 6L12 15Z", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M15.75 5.25L18.75 8.25", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M20.25 12V19.5C20.25 19.6989 20.171 19.8897 20.0303 20.0303C19.8897 20.171 19.6989 20.25 19.5 20.25H4.5C4.30109 20.25 4.11032 20.171 3.96967 20.0303C3.82902 19.8897 3.75 19.6989 3.75 19.5V4.5C3.75 4.30109 3.82902 4.11032 3.96967 3.96967C4.11032 3.82902 4.30109 3.75 4.5 3.75H12", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })));
-const HistoryIcon = () => (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M12 7.5V12L15.75 14.25", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M6.75 9.75H3V6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M6.3375 18C7.51685 19.1128 8.99798 19.8535 10.5958 20.1294C12.1937 20.4052 13.8374 20.2041 15.3217 19.5512C16.8059 18.8982 18.0648 17.8224 18.9411 16.458C19.8173 15.0937 20.2721 13.5014 20.2486 11.8801C20.2251 10.2587 19.7244 8.68026 18.8089 7.3419C17.8934 6.00354 16.6039 4.96463 15.1014 4.35497C13.5988 3.74531 11.95 3.59195 10.3608 3.91403C8.77157 4.23612 7.31253 5.01938 6.16594 6.16594C5.0625 7.28344 4.15125 8.33719 3 9.75", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })));
-const ExpandIcon = () => (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M15.75 4.5H19.5V8.25", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M8.25 19.5H4.5V15.75", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M19.5 15.75V19.5H15.75", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M4.5 8.25V4.5H8.25", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })));
-const CloseIcon = () => (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M18.75 5.25L5.25 18.75", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M18.75 18.75L5.25 5.25", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })));

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

@@ -128,7 +128,7 @@ export class BsChatbotResponseAction {
     };
     render() {
         const hasSources = !!this.sourcesCount && this.sourcesCount > 0;
-        return (h("div", { key: 'ea10465bf7825b4fd96464ee91b10566b51add61', class: "bs-chatbot-response-action" }, h("button", { key: '27a4ccd7a97f4821569b382377dfcd11520cf4b3', type: "button", part: "like", class: "bs-chatbot-response-action__button", "aria-label": this.likeLabel, "aria-pressed": this.liked ? 'true' : 'false', onClick: this.onLikeClick }, h("bs-ripple", { key: 'e51f72aaa2018b77f0e67454a42754a69c53b827', part: "ripple", centered: true }), h("slot", { key: '685362071a59475ce8831f3648f244721f183252', name: "like-icon" }, h(ThumbsUpIcon, { key: '4a9dd14db641ec7d6e60ce018218a7af6a34e34c' }))), h("button", { key: 'f48e058db0e94aaf2d13a93dffb1d995616074b9', type: "button", part: "dislike", class: "bs-chatbot-response-action__button", "aria-label": this.dislikeLabel, "aria-pressed": this.disliked ? 'true' : 'false', onClick: this.onDislikeClick }, h("bs-ripple", { key: '8e10c2a3793010a3be06412f09f5495185659b8f', part: "ripple", centered: true }), h("slot", { key: '017e084ab2b1188d1bdd19d4f4b5ca30a2e9dfb0', name: "dislike-icon" }, h(ThumbsDownIcon, { key: '6578301a7d4ba5351e59f91dbed3016d10834386' }))), h("button", { key: 'ea1425fc220fd8a8ad775e6f5e24fe3cb236dc78', type: "button", part: "copy", class: "bs-chatbot-response-action__button", "aria-label": this.copyLabel, onClick: this.onCopyClick }, h("bs-ripple", { key: 'f857a092b5db633da3d0dca78fb53dea0c764f3a', part: "ripple", centered: true }), h("slot", { key: 'a96a945f08995317c0bc08bc8e320575d4eaa6ac', name: "copy-icon" }, h(CopyIcon, { key: '8b3ca7ad7dd18b35a6be2d46e1a8d785f948559e' }))), !this.hideRegenerate && (h("button", { key: 'd114185e80a157217b8bdf7249db1d7c0434daf3', type: "button", part: "regenerate", class: "bs-chatbot-response-action__button", "aria-label": this.regenerateLabel, onClick: this.onRegenerateClick }, h("bs-ripple", { key: '47b10ab111100c2001ec64a1881839ef3c77486c', part: "ripple", centered: true }), h("slot", { key: 'aae132c65e481002ff95ea1fa65614d24b316cdb', name: "regenerate-icon" }, h(RegenerateIcon, { key: '77fe5385e571abc771f5a4118c9e7d2fe5214f31' })))), h("div", { key: '43ae8110dac16f340d1fbba57cb39d6e0fac2bba', class: "bs-chatbot-response-action__menu-wrapper" }, h("button", { key: '13b43339ccc55a0472e266a0812c867ea5684db0', type: "button", part: "menu", class: "bs-chatbot-response-action__button", "aria-label": this.menuLabel, "aria-haspopup": "menu", "aria-expanded": this.menuOpen ? 'true' : 'false', onClick: this.onMenuClick }, h("bs-ripple", { key: '9184bb5cf7a1ec514286be13561356a84020d8bc', part: "ripple", centered: true }), h("slot", { key: 'ec41980667b59320f6f1e64fa7ad1e61b48985f5', name: "menu-icon" }, h(MenuIcon, { key: '5f6065880fcab476067c9cdd641e3803594d47af' }))), this.menuOpen && (h("div", { key: '64657764d6e5e1b799b118defe89ab098e7cf284', class: "bs-chatbot-response-action__menu-popup" }, h("slot", { key: 'b70facad47bb5971fef174c209c023203f321441', name: "menu" })))), hasSources && (h("button", { key: '6f382c1f12d9c6588d93fbb8f3fff50f3d961ad0', type: "button", part: "sources", class: "bs-chatbot-response-action__sources", onClick: this.onSourcesClick }, h("slot", { key: 'bd9751f689fc23acaa5a3e62bf5490d36834772d', name: "sources-icon" }, h(SourcesIcon, { key: 'fb0bf01af7ad41d23827197bbce23573d7886a5b' })), h("span", { key: '3277653214f36c8a0277059929baeb14691dc1c3', class: "bs-chatbot-response-action__sources-label" }, this.sourcesCount, " ", this.sourcesCount === 1 ? this.sourceLabel : this.sourcesLabel)))));
+        return (h("div", { key: 'd6ec5d7832cb89fa6a9dc97d735e6ea55a7b7241', class: "bs-chatbot-response-action" }, h("button", { key: '17cbcd07677e2ab40b199dd7834c04b4570b7b8c', type: "button", part: "like", class: "bs-chatbot-response-action__button", "aria-label": this.likeLabel, "aria-pressed": this.liked ? 'true' : 'false', onClick: this.onLikeClick }, h("bs-ripple", { key: '4b768312fdf2bad4344958eebecddb65f4763219', part: "ripple", centered: true }), h("slot", { key: '6c821d89ed0046629b3f5f37718235a1616af813', name: "like-icon" }, h(ThumbsUpIcon, { key: '3190624e18324a064cc3da5bcc86a9b13684ef4b' }))), h("button", { key: 'af8bda39744ce0f66cf28b3b1e9336cc662233b3', type: "button", part: "dislike", class: "bs-chatbot-response-action__button", "aria-label": this.dislikeLabel, "aria-pressed": this.disliked ? 'true' : 'false', onClick: this.onDislikeClick }, h("bs-ripple", { key: 'dcf47fb5f3b7106e2247e60d88f6e2ae7b4e0bfe', part: "ripple", centered: true }), h("slot", { key: '92bd3a554dab27bfe5fb17aa216204bdb1e32b26', name: "dislike-icon" }, h(ThumbsDownIcon, { key: '4a4b2b1a781af704be5e3998444e24b92e45e794' }))), h("button", { key: '982758c52f1354a67a5ff57a2cb9b3f33de0d28d', type: "button", part: "copy", class: "bs-chatbot-response-action__button", "aria-label": this.copyLabel, onClick: this.onCopyClick }, h("bs-ripple", { key: '9fb0ea077279a7275bf77255e2fa88e644782c03', part: "ripple", centered: true }), h("slot", { key: '1d24ad346d08c41aa02b9e3c6b9a7bbd5d7afbbf', name: "copy-icon" }, h(CopyIcon, { key: '87ac9fdade8339b56d6bab2c937fac4cdf7e9600' }))), !this.hideRegenerate && (h("button", { key: 'bde35dbce8fe3cfc28a408c508d6774d4676d7da', type: "button", part: "regenerate", class: "bs-chatbot-response-action__button", "aria-label": this.regenerateLabel, onClick: this.onRegenerateClick }, h("bs-ripple", { key: '7e1bdea5844684936c18547ab5f793cb302ea5a6', part: "ripple", centered: true }), h("slot", { key: 'ec96ae7eada9da8b20f41e2e0646426e0e0bacf7', name: "regenerate-icon" }, h(RegenerateIcon, { key: 'c09ef6b4e47964f56bef9f004443b7dd2e24b401' })))), h("div", { key: '7776215dc4ca739c9ea55577f2b0e8869df35000', class: "bs-chatbot-response-action__menu-wrapper" }, h("button", { key: 'a8fe7faa099961d9c6cf14745f72b8c5afa50e84', type: "button", part: "menu", class: "bs-chatbot-response-action__button", "aria-label": this.menuLabel, "aria-haspopup": "menu", "aria-expanded": this.menuOpen ? 'true' : 'false', onClick: this.onMenuClick }, h("bs-ripple", { key: '109b246498589a0d1d80a0f3573f2a66f35f96d8', part: "ripple", centered: true }), h("slot", { key: '4e9e725c8cec5bc1fa6db8608ff7fdc1d78d53b8', name: "menu-icon" }, h(MenuIcon, { key: '4675b0d7b17211de98336a62e04e0d0b7876d83d' }))), this.menuOpen && (h("div", { key: 'cc48f0a1c834cd94f9ecc016f68b6a85138be604', class: "bs-chatbot-response-action__menu-popup" }, h("slot", { key: 'b9ad1bc5d4717e294ed196b50fec8ca0a340c655', name: "menu" })))), hasSources && (h("button", { key: 'c86ce3e4529f1e7c3e74ae59a0b6728ad5701190', type: "button", part: "sources", class: "bs-chatbot-response-action__sources", onClick: this.onSourcesClick }, h("slot", { key: 'cdd832fdc3ad9eb27103be3f4d2b08acd1141b1b', name: "sources-icon" }, h(SourcesIcon, { key: 'b82a6db98ce52e5b5e1f24f078c48734bafcaf59' })), h("span", { key: 'e1b7633db592eb2ee198c56f0b4e145037b671a4', class: "bs-chatbot-response-action__sources-label" }, this.sourcesCount, " ", this.sourcesCount === 1 ? this.sourceLabel : this.sourcesLabel)))));
     }
     static get is() { return "bs-chatbot-response-action"; }
     static get encapsulation() { return "shadow"; }

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

@@ -59,7 +59,7 @@ export class BsChatbotSourcesDrawer {
     };
     render() {
         const displayCount = this.count ?? this.slottedCount;
-        return (h("div", { key: '3a1ada3b813ff876728dc3aaa97f083cca62e06d', class: "bs-chatbot-sources-drawer", role: "region", "aria-label": this.heading }, h("div", { key: '97a5b46ecd7e365f19b97d22e64dd5f8ccc321a9', class: "bs-chatbot-sources-drawer__header" }, h("div", { key: '13da4c69fa4882f663bd0c50b7e076246b369f3b', class: "bs-chatbot-sources-drawer__title-group" }, h("h2", { key: 'cb709deaa389afca9f9f233772d00ceebf80c174', part: "heading", class: "bs-chatbot-sources-drawer__heading" }, this.heading), displayCount > 0 && (h("span", { key: 'a195d6e2de3305d6c4c8866d1333f7554c7dc3b3', part: "count", class: "bs-chatbot-sources-drawer__count" }, displayCount))), h("button", { key: '02cfdf86c2a83a0abfdbe36dd6ef0aee416477ca', type: "button", part: "collapse", class: "bs-chatbot-sources-drawer__collapse", "aria-label": this.collapseLabel, onClick: this.onCollapseClick }, h("slot", { key: 'ef4e483e4adb1a668401244d13eace6acf12023b', name: "collapse-icon" }, h(CaretRightIcon, { key: 'ca9e17d19e935606e196253136151d81d8ab2566' })))), h("div", { key: '1fe136577e90fc5eb650d6e856923ed1dfa60112', part: "list", class: "bs-chatbot-sources-drawer__list" }, h("slot", { key: 'd5a5204ebbca3035e1ba6360168c36e17d89431a', onSlotchange: this.onSlotchange }))));
+        return (h("div", { key: '1d0c3253af7cf38b81b36ac15a78033c03e14c91', class: "bs-chatbot-sources-drawer", role: "region", "aria-label": this.heading }, h("div", { key: 'd5eb2089574325eb8540a98d0603368e46b8c73d', class: "bs-chatbot-sources-drawer__header" }, h("div", { key: '1fb338f2a8c1f868daef29625eb7bfc2ffb3ce0e', class: "bs-chatbot-sources-drawer__title-group" }, h("h2", { key: '6c4ab9c5de55e70cfe9c163d454cfa419bc83ea8', part: "heading", class: "bs-chatbot-sources-drawer__heading" }, this.heading), displayCount > 0 && (h("span", { key: 'fe7a147f6f7148f7c1252a93cd56060dc38b3eb2', part: "count", class: "bs-chatbot-sources-drawer__count" }, displayCount))), h("button", { key: 'fe09c59453243448e8c48ed6e451b5e49c3608d3', type: "button", part: "collapse", class: "bs-chatbot-sources-drawer__collapse", "aria-label": this.collapseLabel, onClick: this.onCollapseClick }, h("slot", { key: 'da8e67e324afb7eb6dc75d160ba3a6c447c33354', name: "collapse-icon" }, h(CaretRightIcon, { key: 'c079b91874239e6bdaea1cdeb65d7ccf70de90cd' })))), h("div", { key: 'f9098edd11a91137bb55deab94ab0b999e530cac', part: "list", class: "bs-chatbot-sources-drawer__list" }, h("slot", { key: 'e0c95d42eef55be86cee88f850556f2a4c712fcd', onSlotchange: this.onSlotchange }))));
     }
     static get is() { return "bs-chatbot-sources-drawer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -21,4 +21,22 @@ describe('bs-chatbot-suggestion-button', () => {
         button.click();
         expect(selectSpy.length).toBe(0);
     });
+    it('uses the dedicated disabled tokens, and no whole-element opacity when disabled (#53)', async () => {
+        const { root } = await render(h("bs-chatbot-suggestion-button", { disabled: true }, "Suggestion"));
+        const button = root.shadowRoot.querySelector('[part="button"]');
+        const resolve = (cssVar, prop) => {
+            const el = document.createElement('span');
+            el.style[prop] = `var(${cssVar})`;
+            root.shadowRoot.appendChild(el);
+            const out = getComputedStyle(el)[prop];
+            el.remove();
+            return out;
+        };
+        const cs = getComputedStyle(button);
+        expect(cs.opacity).toBe('1');
+        expect(cs.backgroundColor).toBe(resolve('--bs-surface-action-disabled', 'backgroundColor'));
+        expect(cs.color).toBe(resolve('--bs-text-on-disabled', 'color'));
+        expect(cs.borderTopColor).toBe(resolve('--bs-border-neutral-disabled', 'borderTopColor'));
+        expect(cs.cursor).toBe('not-allowed');
+    });
 });

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

@@ -8,6 +8,9 @@
   --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-bg-disabled: var(--bs-surface-action-disabled);
+  --bs-chatbot-suggestion-button-text-disabled: var(--bs-text-on-disabled);
+  --bs-chatbot-suggestion-button-border-color-disabled: var(--bs-border-neutral-disabled);
   --bs-chatbot-suggestion-button-focus-ring-color: var(--bs-border-primary-focus);
 }
 
@@ -43,7 +46,7 @@
   color: var(--bs-chatbot-suggestion-button-text-hover);
 }
 
-.bs-chatbot-suggestion-button:focus-visible {
+.bs-chatbot-suggestion-button:focus-visible:not(:disabled) {
   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);
@@ -51,6 +54,9 @@
 }
 
 .bs-chatbot-suggestion-button:disabled {
-  opacity: var(--bs-opacity-disabled);
+  /* Dedicated disabled tokens (same family as bs-inline-tab); no whole-element opacity. */
+  background: var(--bs-chatbot-suggestion-button-bg-disabled);
+  color: var(--bs-chatbot-suggestion-button-text-disabled);
+  border-color: var(--bs-chatbot-suggestion-button-border-color-disabled);
   cursor: not-allowed;
 }

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

@@ -26,6 +26,9 @@ import { h } from "@stencil/core";
  *   `--bs-color-primary-container-pressed`.
  * @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-bg-disabled - Background when disabled. Aliased to `--bs-surface-action-disabled`.
+ * @prop --bs-chatbot-suggestion-button-text-disabled - Text color when disabled. Aliased to `--bs-text-on-disabled`.
+ * @prop --bs-chatbot-suggestion-button-border-color-disabled - Border color when disabled. Aliased to `--bs-border-neutral-disabled`.
  * @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.
@@ -43,7 +46,7 @@ export class BsChatbotSuggestionButton {
         this.bsSelect.emit();
     };
     render() {
-        return (h("button", { key: 'c76c66440c64cf4cfe60fbd98a49229896e593e2', type: "button", part: "button", class: "bs-chatbot-suggestion-button", disabled: this.disabled, onClick: this.onClick }, h("bs-ripple", { key: 'aa4295c7a0ae1c1fcefe567c594a7dfb01e5fc4e', part: "ripple", centered: false, disabled: this.disabled }), h("slot", { key: 'd9e21c45c97236d08f0d9e2c9829b6a0501424e2' })));
+        return (h("button", { key: '5dec9f6d82254f0cac7ec92734ed199ffe22e421', type: "button", part: "button", class: "bs-chatbot-suggestion-button", disabled: this.disabled, onClick: this.onClick }, h("bs-ripple", { key: 'b4c464e7c9cbdb988f503babd2cb99f27e80b62f', part: "ripple", centered: false, disabled: this.disabled }), h("slot", { key: '73b0f23768b8ff67035d4dee7352eeff1bdde7c6' })));
     }
     static get is() { return "bs-chatbot-suggestion-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-checkbox/bs-checkbox-skeleton/bs-checkbox-skeleton.js

@@ -35,7 +35,7 @@ export class BsCheckboxSkeleton {
     /** Accessible name announced for the loading placeholder. */
     loadingLabel = 'Loading';
     render() {
-        return (h("span", { key: '92bd864f7f59de942901944109eabc70e4f6ee28', part: "container", class: "bs-checkbox-skeleton", role: "status", "aria-label": this.loadingLabel }, h("span", { key: 'e69ed9e4bef797036110d4ed504c3526272ef467', part: "box", class: `bs-checkbox-skeleton__box bs-checkbox-skeleton__box--${this.size}` }), h("span", { key: '562219d3322ba5b120143e04a34d6ab693ede45a', part: "label", class: "bs-checkbox-skeleton__label" })));
+        return (h("span", { key: '8458201ffae956d841ea313054cc75b0a51ad6ff', part: "container", class: "bs-checkbox-skeleton", role: "status", "aria-label": this.loadingLabel }, h("span", { key: '6c99ce841d3b9788cba16afbe23b4ec27e3fe1ce', part: "box", class: `bs-checkbox-skeleton__box bs-checkbox-skeleton__box--${this.size}` }), h("span", { key: 'f950ba0f0b3025d19ca5da7cefe3a75bb47932b1', part: "label", class: "bs-checkbox-skeleton__label" })));
     }
     static get is() { return "bs-checkbox-skeleton"; }
     static get encapsulation() { return "shadow"; }