@brandsync/wc 1.18.0 → 1.20.0

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

@@ -7,6 +7,9 @@
  * @prop --bs-carousel-dot-color: Fill of an inactive dot. Aliased to --bs-surface-container.
  * @prop --bs-carousel-dot-active-color: Fill of the active dot. Aliased to --bs-color-primary-default.
  * @prop --bs-carousel-dots-gap: Gap between dots. Aliased to --bs-spacing-50.
+ * @prop --bs-carousel-duration: Length of a page change (slides out, then in; the dots use the same length). Aliased to --bs-duration-slow.
+ * @prop --bs-carousel-easing: Curve of a page change. Aliased to --bs-easing-standard.
+ * @prop --bs-carousel-slide-distance: How far the slides travel while they fade. Aliased to --bs-spacing-400.
  */
 :host {
   display: block;
@@ -20,6 +23,9 @@
   --bs-carousel-dot-color: var(--bs-surface-container);
   --bs-carousel-dot-active-color: var(--bs-color-primary-default);
   --bs-carousel-dots-gap: var(--bs-spacing-50);
+  --bs-carousel-duration: var(--bs-duration-slow);
+  --bs-carousel-easing: var(--bs-easing-standard);
+  --bs-carousel-slide-distance: var(--bs-spacing-400);
 }
 
 .bs-carousel {
@@ -77,6 +83,9 @@
   height: var(--bs-carousel-dot-size);
   border-radius: var(--bs-carousel-dot-radius);
   background: var(--bs-carousel-dot-color);
+  transition:
+    width var(--bs-carousel-duration) var(--bs-carousel-easing),
+    background-color var(--bs-carousel-duration) var(--bs-carousel-easing);
 }
 
 .bs-carousel__dot--active {

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

@@ -9,6 +9,12 @@ import { h } from "@stencil/core";
  * so they leave the tab order and the accessibility tree) and, only when not already set,
  * `role="group"`, `aria-roledescription="slide"` and an `aria-label` of "n of N".
  *
+ * Changing page plays a short motion: the visible slides fade and slide out in the direction of travel,
+ * then the next page's slides fade and slide in (reversed for previous, and mirrored in RTL). The dots
+ * also grow and fade between pages. Motion length and distance follow `--bs-carousel-duration`,
+ * `--bs-carousel-easing` and `--bs-carousel-slide-distance`. Under `prefers-reduced-motion: reduce`
+ * the duration token is `0ms`, so pages switch instantly.
+ *
  * Composes `bs-pagination` (`tracker="numbers"`), `bs-icon-button` (previous/next for
  * `tracker="dots"`) and `bs-button` (Pause/Play) rather than re-implementing them.
  *
@@ -77,6 +83,12 @@ export class BsCarousel {
     /** True while the pointer is over the carousel or focus is inside it (auto-advance holds). */
     interacting = false;
     timer;
+    /** The page whose slides are actually on screen. Lags `currentPage` while a page change animates out. */
+    shown = 0;
+    loaded = false;
+    transitioning = false;
+    runId = 0;
+    running = [];
     get slides() {
         return Array.from(this.el.children).filter(c => !c.hasAttribute('slot'));
     }
@@ -101,6 +113,7 @@ export class BsCarousel {
         }
     }
     componentDidLoad() {
+        this.loaded = true;
         this.applySlides();
         this.updateTimer();
     }
@@ -110,11 +123,66 @@ export class BsCarousel {
     }
     disconnectedCallback() {
         this.stopTimer();
+        this.cancelMotion();
     }
-    onCurrentPageChange() {
+    onCurrentPageChange(next) {
         // Keep the mutable prop honest if it was set out of range from outside.
-        if (this.currentPage !== this.page)
+        if (this.currentPage !== this.page) {
             this.currentPage = this.page;
+            return;
+        }
+        const wasMoving = this.transitioning;
+        this.cancelMotion();
+        // A change that lands mid-motion snaps straight to the new page instead of restarting the motion.
+        if (wasMoving || !this.loaded || next === this.shown || this.shown === 0)
+            return;
+        this.playPageChange(next > this.shown ? 1 : -1);
+    }
+    /**
+     * Exit then enter, each half the duration. While the old page animates out it stays mounted
+     * (`transitioning` makes `applySlides` keep showing `shown`); then the new page is shown and
+     * animated in. A new change arriving mid-motion cancels it and snaps to the latest page.
+     */
+    playPageChange(direction) {
+        const style = getComputedStyle(this.el);
+        const total = this.toMs(style.getPropertyValue('--bs-carousel-duration'));
+        const outgoing = this.slides.filter(slide => !slide.hidden);
+        if (total === 0 || outgoing.length === 0)
+            return;
+        const easing = style.getPropertyValue('--bs-carousel-easing').trim() || 'ease';
+        const distance = parseFloat(style.getPropertyValue('--bs-carousel-slide-distance')) || 0;
+        // In RTL "next" travels leftwards.
+        const dx = direction * (this.el.matches(':dir(rtl)') ? -1 : 1) * distance;
+        const half = total / 2;
+        const run = ++this.runId;
+        this.transitioning = true;
+        this.running = outgoing.map(slide => slide.animate([{ opacity: 1, transform: 'none' }, { opacity: 0, transform: `translateX(${-dx}px)` }], { duration: half, easing, fill: 'forwards' }));
+        Promise.all(this.running.map(a => a.finished)).then(() => {
+            if (run !== this.runId)
+                return;
+            this.running.forEach(a => a.cancel());
+            this.transitioning = false;
+            this.applySlides();
+            this.running = this.slides
+                .filter(slide => !slide.hidden)
+                .map(slide => slide.animate([{ opacity: 0, transform: `translateX(${dx}px)` }, { opacity: 1, transform: 'none' }], { duration: half, easing }));
+        }, () => {
+            /* cancelled by a newer page change */
+        });
+    }
+    cancelMotion() {
+        this.runId++;
+        this.running.forEach(a => a.cancel());
+        this.running = [];
+        this.transitioning = false;
+    }
+    toMs(value) {
+        const v = value.trim();
+        if (v.endsWith('ms'))
+            return parseFloat(v);
+        if (v.endsWith('s'))
+            return parseFloat(v) * 1000;
+        return 0;
     }
     updateTimer() {
         this.stopTimer();
@@ -150,7 +218,10 @@ export class BsCarousel {
     /** Shows only the current page's slides and labels each slide. */
     applySlides() {
         const slides = this.slides;
-        const start = (this.page - 1) * this.perView;
+        // Keep showing the old page until its exit motion has finished.
+        if (!this.transitioning || this.shown === 0)
+            this.shown = this.page;
+        const start = (this.shown - 1) * this.perView;
         slides.forEach((slide, i) => {
             slide.hidden = i < start || i >= start + this.perView;
             if (!slide.hasAttribute('role'))
@@ -186,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: 'e388f41561ae9194608c34bc9a7efceabebe721b', 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: '76a5c27dc3b801cf42c903218aaa76ced0c6f700', part: "slides", class: "bs-carousel__slides", "aria-live": rotating ? 'off' : 'polite' }, h("slot", { key: '90c92304c35d872398a4db3c2ed862468009b785', onSlotchange: this.onSlotChange })), showTracker && (h("div", { key: '0f2e97e93e7a2392eeb60b50e87b557c95a1b929', 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: '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) => {
                 ev.stopPropagation();
                 this.goTo(ev.detail);
             } })) : (h("div", { class: "bs-carousel__nav" }, this.renderDotsTracker())), this.renderPause()))));

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: '687bdf3ad27c52994940ad585592a1c98e193043', class: "bs-chatbot-feedback", role: "region", "aria-label": this.computedHeading() }, h("button", { key: '4a1f9ae9e066e3e1bb5577e71b5823ff987bfce9', type: "button", part: "close", class: "bs-chatbot-feedback__close", "aria-label": this.closeLabel, onClick: this.onCloseClick }, h(CloseIcon, { key: 'cf8bf10c555376a6d733d5ce32cedc2e7bb3a673' })), h("div", { key: '360b2152b1761c33885aaaf1add02724c7dc0954', class: "bs-chatbot-feedback__top" }, h("div", { key: 'ee7e9ec8de6b674f019cc86d1445d8ebc8698ce8', class: "bs-chatbot-feedback__text" }, h("p", { key: '71df5fc535f48e0171bb8ed59b964b5c09f26ff7', part: "heading", class: "bs-chatbot-feedback__heading" }, this.computedHeading()), h("p", { key: 'a75c4fe0dc0a6c2e9fbeb7731a4d54fdc47ac627', part: "subtitle", class: "bs-chatbot-feedback__subtitle" }, this.computedSubtitle())), h("div", { key: 'db2bf8547c08786fe41f39be3b5721af732a70c4', 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: '6da5f9638f4fe9f7e3536656dc383a3576f3bd22', class: "bs-chatbot-feedback__field" }, h("label", { key: '1c6f056ef6b7f3f9b72dad368a3ec4ee74372cdf', part: "label", class: "bs-chatbot-feedback__label", htmlFor: "bs-chatbot-feedback-comment" }, this.commentLabel), h("textarea", { key: '4738b9f313f2202e5c802eef26427f2ead962a51', 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: 'e2a8e1e14c23210c42ca3c8215acc2b84f3e7cbe', part: "comment", class: "bs-chatbot-feedback__comment" }, this.comment))), h("div", { key: '150e6d6d376c1154bb92a86587e5bd3efc8171cd', class: "bs-chatbot-feedback__actions" }, !this.submitted && (h("button", { key: '285c665aafecd02cbfea4fc3bc394d5e3cccf991', type: "button", part: "submit", class: "bs-chatbot-feedback__submit", disabled: this.rating === 0, onClick: this.onSubmitClick }, h(SendIcon, { key: 'b13ad8dafdf1594ff1e6293ae3b0ddaa8afdacb3' }), this.submitLabel)), h("button", { key: '9281f0ab341ad8a270d8e2bf78a0eaf29e826d13', 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: 'c3b3d01c786aca633ce57c5531436e2a02b58054' }), 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: '6905b251db2d793c866be5ccd9af9c8975b382e2', class: "bs-chatbot-header", role: "banner", "aria-label": this.heading }, h("div", { key: '62ae1b598ab0fb57e08ce750ac2fe004300b280d', part: "logo", class: "bs-chatbot-header__logo", role: "img", "aria-label": this.heading, innerHTML: GENIE_LOGO_SVG }), h("div", { key: '9d26c1559ab08868f3ad781d35c68e7d6deae7ba', class: "bs-chatbot-header__actions" }, h("slot", { key: '4b4cdd87bfa3a98dce549b00d12afef875f0bea6', name: "actions" }), !this.hideNewChat && (h("span", { key: '22a02d1b7830e7ebb61837fbd5bbefc802f3fcde', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'edda62eebead66a4afeff20bb279d7fa813cf6d7', type: "button", part: "new-chat", class: "bs-chatbot-header__button", "aria-label": this.newChatLabel, onClick: this.onNewChatClick }, h("slot", { key: 'a290ad14e1b0248d2fe9be15ab90bcc5af4194c7', name: "new-chat-icon" }, h(NewChatIcon, { key: '24cedf0fe54ca1713ba2d3e80e79b695fdad2bda' }))), h("bs-tooltip", { key: '62eba53fac24e0e6372566cc0ce9abfba807fb64', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, this.newChatLabel))), !this.hideHistory && (h("span", { key: 'e1dcf980c63750d6a6f5cedc6ec365dfa63ae214', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '70222dcdee26cc430819865ae0f237b99cef1687', type: "button", part: "history", class: "bs-chatbot-header__button", "aria-label": this.historyLabel, onClick: this.onHistoryClick }, h("slot", { key: '338cc4979146086ed08292d9fd0ec6e74d53e797', name: "history-icon" }, h(HistoryIcon, { key: '941cbf5db830981aa71d056196354c15c7ebde58' }))), h("bs-tooltip", { key: '196550c79e7c699bee01bbef081d6e9e1656b38f', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, this.historyLabel))), !this.hideExpand && (h("span", { key: '49f3705dcf2ca4b2a5221e11563d953b34e68405', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '3c38e331d8c3617279074f1ccba5960dc6b884ea', 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: '8f0f54bb25073ecf2579a4d7301f5ff1f63e80cb', name: "expand-icon" }, h(ExpandIcon, { key: 'fb2a835a1300c9bcd38aa13f7fff674ba5af89c2' }))), h("bs-tooltip", { key: 'aab69e0847453daf35810eeee5536fa9a16fc3ef', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, this.expanded ? this.collapseLabel : this.expandLabel))), !this.hideClose && (h("span", { key: '0a32c45030c014a2106882e4404e2ce09704f6ee', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'b43080c2d32d2569ea4d427dc2b6f39541db5924', type: "button", part: "close", class: "bs-chatbot-header__button", "aria-label": this.closeLabel, onClick: this.onCloseClick }, h("slot", { key: '58d2fecd20b910262e8a9b2c446a420028444c8c', name: "close-icon" }, h(CloseIcon, { key: '0593909895f5e0d79d1a0e18a9c201623dd538f9' }))), h("bs-tooltip", { key: 'bb0c07c43482284811c378c97a3f314e2a37019d', 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.css

@@ -28,6 +28,8 @@
 }
 
 .bs-chatbot-response-action__button {
+  /* Containing block for the absolutely-positioned bs-ripple layer. */
+  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;

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

@@ -39,6 +39,7 @@ import { h } from "@stencil/core";
  * @prop --bs-chatbot-response-action-sources-color - Text color of the sources label. Aliased to `--bs-text-neutral-default`.
  * @prop --bs-chatbot-response-action-sources-font-size - Aliased to `--bs-font-size-sm`.
  * @prop --bs-chatbot-response-action-sources-line-height - Aliased to `--bs-line-height-body-sm`.
+ * @part ripple - The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 export class BsChatbotResponseAction {
     host;
@@ -127,7 +128,7 @@ export class BsChatbotResponseAction {
     };
     render() {
         const hasSources = !!this.sourcesCount && this.sourcesCount > 0;
-        return (h("div", { key: 'eeea81b1964f9f9dc89aac2b58459321bc3c3bf7', class: "bs-chatbot-response-action" }, h("button", { key: '890d8d74c1b62846b314441319963327023dafd2', type: "button", part: "like", class: "bs-chatbot-response-action__button", "aria-label": this.likeLabel, "aria-pressed": this.liked ? 'true' : 'false', onClick: this.onLikeClick }, h("slot", { key: '12bb1913203d02b062f689882be119925a0ba8d2', name: "like-icon" }, h(ThumbsUpIcon, { key: '5dd57ec7c5000dafb958f72a1b6846c1c85f5da8' }))), h("button", { key: '06d7ae497480097121e06d7f07582944941d49c9', type: "button", part: "dislike", class: "bs-chatbot-response-action__button", "aria-label": this.dislikeLabel, "aria-pressed": this.disliked ? 'true' : 'false', onClick: this.onDislikeClick }, h("slot", { key: '709deebe7f0f1bfae5fcecfc0a1cfa01921221ae', name: "dislike-icon" }, h(ThumbsDownIcon, { key: '97fea08af1048a9f7ef3dc133809a0fab241c1c8' }))), h("button", { key: 'bb0ca6a6c02d2688d5321d3bcead17ac4e84ff32', type: "button", part: "copy", class: "bs-chatbot-response-action__button", "aria-label": this.copyLabel, onClick: this.onCopyClick }, h("slot", { key: '0ad95f409aaa2412bc37da4ea3daf1cd922f74a0', name: "copy-icon" }, h(CopyIcon, { key: 'bd472f1ef302ce0c11ad2a3c461f322878176a17' }))), !this.hideRegenerate && (h("button", { key: '0c2d85e0d2c25edd9c1e60abaff6258324f432f2', type: "button", part: "regenerate", class: "bs-chatbot-response-action__button", "aria-label": this.regenerateLabel, onClick: this.onRegenerateClick }, h("slot", { key: 'f8363082e347c552d25583a8ee5f30df3127596a', name: "regenerate-icon" }, h(RegenerateIcon, { key: '131a1aca2c71d1f3a5707cab2120aeeb5ae9069f' })))), h("div", { key: '73364305feb5631f872901fcad16632cf5e5254c', class: "bs-chatbot-response-action__menu-wrapper" }, h("button", { key: 'd5e550ac34dcf6f325458b494313d7bb2260041d', 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("slot", { key: '2b79ed5dfae0a9eca283a5c7ad703c5208dcfdab', name: "menu-icon" }, h(MenuIcon, { key: '545e3c1c234aa7f9eed5f5987e3e14cdf013094f' }))), this.menuOpen && (h("div", { key: 'e7da0d55acbf4fa4f84f29273368d2a374628925', class: "bs-chatbot-response-action__menu-popup" }, h("slot", { key: 'fa737fc36afebbbee3d077ba381390317cb61905', name: "menu" })))), hasSources && (h("button", { key: '0789164cf269b4110c439b2bcde397a3b058c439', type: "button", part: "sources", class: "bs-chatbot-response-action__sources", onClick: this.onSourcesClick }, h("slot", { key: '331eb28b2e2dc2b284dfca7b54108020cbb65783', name: "sources-icon" }, h(SourcesIcon, { key: '0d7648fbd9adbf864952e82eda597e9ea2674a33' })), h("span", { key: '983aa3f0ecb65f1fac792000de1f7490e11e4b4e', 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: 'bfda9a3a1b7babe3796e467ffa336c84cf6d8a4a', class: "bs-chatbot-sources-drawer", role: "region", "aria-label": this.heading }, h("div", { key: 'bfd62d975c23e0d4b95929c9a9ae88be1fcd5413', class: "bs-chatbot-sources-drawer__header" }, h("div", { key: 'c65d83289c40381f6e563970bbbc5bce6e7b071a', class: "bs-chatbot-sources-drawer__title-group" }, h("h2", { key: '5e89e3d436784ad56c853e48405599ee294dc2dc', part: "heading", class: "bs-chatbot-sources-drawer__heading" }, this.heading), displayCount > 0 && (h("span", { key: '5a8b0f3d487f720aa171e3aaf1d91604ba14c26d', part: "count", class: "bs-chatbot-sources-drawer__count" }, displayCount))), h("button", { key: 'd9e7552b2d20bdd10cf792c907d7944a88c9fad0', type: "button", part: "collapse", class: "bs-chatbot-sources-drawer__collapse", "aria-label": this.collapseLabel, onClick: this.onCollapseClick }, h("slot", { key: '4f1fcf8effe9664a5040039f3ea09c75e2df309b', name: "collapse-icon" }, h(CaretRightIcon, { key: 'b45707e326013749ce09346e2d05b72095590a8c' })))), h("div", { key: '14b3d1263fb57ff577d233ff8d8a2c679bfd5f1f', part: "list", class: "bs-chatbot-sources-drawer__list" }, h("slot", { key: '4ae945ece2ed3c8f35ed724617fbc24199c01817', 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,10 +8,15 @@
   --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);
 }
 
 .bs-chatbot-suggestion-button {
+  /* Containing block for the absolutely-positioned bs-ripple layer. */
+  position: relative;
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
@@ -41,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);
@@ -49,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,12 +26,16 @@ 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.
  *   Aliased to `--bs-text-action-hover`.
  * @prop --bs-chatbot-suggestion-button-focus-ring-color - Focus ring color. Aliased to
  *   `--bs-border-primary-focus`.
+ * @part ripple - The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 export class BsChatbotSuggestionButton {
     /** Disables the button and applies a reduced-opacity treatment. */
@@ -42,7 +46,7 @@ export class BsChatbotSuggestionButton {
         this.bsSelect.emit();
     };
     render() {
-        return (h("button", { key: '96fa6f46dfdf1dbf39428c9c35a0b8e02627a016', type: "button", part: "button", class: "bs-chatbot-suggestion-button", disabled: this.disabled, onClick: this.onClick }, h("slot", { key: '0f00a98b9ca49c6db6508afb0f10061a1594d860' })));
+        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: '893b7cc62c061fca220ece795a914d1c04afe3f1', part: "container", class: "bs-checkbox-skeleton", role: "status", "aria-label": this.loadingLabel }, h("span", { key: '4af59de817a1022250f93d254b8711f5d0c230bb', part: "box", class: `bs-checkbox-skeleton__box bs-checkbox-skeleton__box--${this.size}` }), h("span", { key: '377294db3bc2f5ceb3f39cc88a4b4a86ed948b09', 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"; }

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

@@ -204,3 +204,10 @@
   .bs-checkbox__box--selected { background: Highlight; border-color: Highlight; color: HighlightText; }
   .bs-checkbox__box--disabled { border-color: GrayText; color: GrayText; }
 }
+
+/* Round halo that extends past the box, tinted with the brand colour. The press target is the whole label. */
+.bs-checkbox__ripple {
+  inset: -10px;
+  border-radius: 50%;
+  --bs-ripple-color: var(--bs-color-primary-default);
+}

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

@@ -16,6 +16,7 @@ import { h } from "@stencil/core";
  * @part box - The visual checkbox square.
  * @part icon - The check/minus icon shown inside the box when `checked` or `indeterminate`.
  * @part label - The label text wrapper.
+ * @part ripple - The press-ripple halo (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 // Note: this component's CSS Custom Properties (--bs-checkbox-*) are documented via @prop comments
 // in bs-checkbox.css, not here -- Stencil's docs generator only parses @prop out of CSS file
@@ -120,7 +121,7 @@ export class BsCheckbox {
         ]
             .filter(Boolean)
             .join(' ');
-        return (h("label", { key: '935cb1230ee19ed086cf1889b95e5cb0694b2942', class: `bs-checkbox ${this.disabled ? 'bs-checkbox--disabled' : ''}` }, h("input", { key: '5a505a5e06dcf517c5463838e286ad3ca051aa96', ref: el => (this.inputEl = el), class: "bs-checkbox__input", type: "checkbox", checked: this.checked, disabled: this.disabled, required: this.required, "aria-checked": this.indeterminate ? 'mixed' : String(this.checked), "aria-label": this.ariaLabel, onChange: this.onChange }), h("span", { key: '4938df0023d4237cfc8b17c8656c752e4295de47', part: "box", class: boxClasses }, showIcon && (h("svg", { key: 'c71f39e8127b1b345942481e6eac071b8dbc194b', part: "icon", class: "bs-checkbox__icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, this.indeterminate ? (h("path", { d: "M3 8H13", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })) : (h("path", { d: "M3 8.5L6.2 11.5L13 4.5", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), h("span", { key: '90cc8fba0da12a4527238fd1b536266edac132c0', part: "label", class: "bs-checkbox__label" }, h("slot", { key: '7622ef9ea5c7b118d543728de089cb6c9ae71b5d' }))));
+        return (h("label", { key: 'd35cd1c413ad4a5da2b964828f225ccd434f8724', class: `bs-checkbox ${this.disabled ? 'bs-checkbox--disabled' : ''}` }, h("input", { key: '6a50bcabb9856f732472c08acf28a72b47efcd0e', ref: el => (this.inputEl = el), class: "bs-checkbox__input", type: "checkbox", checked: this.checked, disabled: this.disabled, required: this.required, "aria-checked": this.indeterminate ? 'mixed' : String(this.checked), "aria-label": this.ariaLabel, onChange: this.onChange }), h("span", { key: '73125ca0d0b7f6820655d3f3001b91c4d7712979', part: "box", class: boxClasses }, h("bs-ripple", { key: 'e0e763aa5342b8241758cdb9f56397a36fd08b27', part: "ripple", class: "bs-checkbox__ripple", centered: true, triggerSelector: ".bs-checkbox", disabled: this.disabled }), showIcon && (h("svg", { key: '1d31573c1bf95fa1efa9c38e2516df59cf84e247', part: "icon", class: "bs-checkbox__icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, this.indeterminate ? (h("path", { d: "M3 8H13", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })) : (h("path", { d: "M3 8.5L6.2 11.5L13 4.5", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), h("span", { key: '71101d692d0ebe55a1e36055394395adacfef564', part: "label", class: "bs-checkbox__label" }, h("slot", { key: '5964f3edad9f4217334c5703032a28c99974970b' }))));
     }
     static get is() { return "bs-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-checkbox-group/bs-checkbox-group.cmp.test.js

@@ -0,0 +1,58 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import { runAxeCheck } from "../../test/helpers/conventions";
+const boxes = (root) => Array.from(root.querySelectorAll('bs-checkbox'));
+const input = (b) => b.shadowRoot.querySelector('input');
+const basic = (extra = {}) => (h("bs-checkbox-group", { label: "Notify by", ...extra }, h("bs-checkbox", { value: "email" }, "Email"), h("bs-checkbox", { value: "sms" }, "SMS"), h("bs-checkbox", { value: "push" }, "Push")));
+describe('bs-checkbox-group', () => {
+    it('is a fieldset with a legend', async () => {
+        const { root } = await render(basic());
+        expect(root.shadowRoot.querySelector('fieldset')).not.toBeNull();
+        expect(root.shadowRoot.querySelector('legend').textContent).toBe('Notify by');
+    });
+    it('value checks the matching boxes', async () => {
+        const { root, waitForChanges } = await render(basic());
+        root.value = ['email', 'push'];
+        await waitForChanges();
+        expect(boxes(root).map(b => b.checked)).toEqual([true, false, true]);
+        root.value = [];
+        await waitForChanges();
+        expect(boxes(root).map(b => b.checked)).toEqual([false, false, false]);
+    });
+    it('takes its initial value from checked boxes', async () => {
+        const { root, waitForChanges } = await render(h("bs-checkbox-group", { label: "x" }, h("bs-checkbox", { value: "a", checked: true }, "A"), h("bs-checkbox", { value: "b" }, "B")));
+        await waitForChanges();
+        expect(root.value).toEqual(['a']);
+    });
+    it('emits one bsChange with the array of values', async () => {
+        const { root, waitForChanges, spyOnEvent } = await render(basic());
+        await waitForChanges();
+        const spy = spyOnEvent('bsChange');
+        input(boxes(root)[0]).click();
+        await waitForChanges();
+        input(boxes(root)[2]).click();
+        await waitForChanges();
+        expect(spy).toHaveReceivedEventTimes(2);
+        expect(spy).toHaveReceivedEventDetail(['email', 'push']);
+        expect(root.value).toEqual(['email', 'push']);
+    });
+    it('shows helper text, replaced by the error, and flags the boxes', async () => {
+        const { root, waitForChanges } = await render(basic({ description: 'Choose any' }));
+        const fs = root.shadowRoot.querySelector('fieldset');
+        const desc = root.shadowRoot.querySelector('[part="description"]');
+        expect(fs).toEqualAttribute('aria-describedby', desc.id);
+        root.error = 'Pick at least one';
+        await waitForChanges();
+        const err = root.shadowRoot.querySelector('[part="error"]');
+        expect(err.textContent).toBe('Pick at least one');
+        expect(fs).toEqualAttribute('aria-invalid', 'true');
+        expect(boxes(root).every(b => b.error)).toBe(true);
+    });
+    it('horizontal orientation lays boxes in a row', async () => {
+        const { root } = await render(basic({ orientation: 'horizontal' }));
+        expect(getComputedStyle(root.shadowRoot.querySelector('[part="options"]')).flexDirection).toBe('row');
+    });
+    it('passes axe', async () => {
+        const { root } = await render(basic({ description: 'Choose any' }));
+        await runAxeCheck(root);
+    });
+});

package/dist/collection/components/bs-checkbox-group/bs-checkbox-group.css

@@ -0,0 +1,65 @@
+/**
+ * @prop --bs-checkbox-group-gap: Gap between the legend, the options and the helper/error text. Aliased to --bs-spacing-50.
+ * @prop --bs-checkbox-group-options-gap: Gap between checkboxes. Aliased to --bs-spacing-0 (vertical) / --bs-spacing-300 (horizontal).
+ * @prop --bs-checkbox-group-label-color: Legend colour. Aliased to --bs-text-default.
+ * @prop --bs-checkbox-group-description-color: Helper text colour. Aliased to --bs-text-secondary.
+ * @prop --bs-checkbox-group-error-color: Error text colour. Aliased to --bs-text-error.
+ */
+:host {
+  display: block;
+
+  --bs-checkbox-group-gap: var(--bs-spacing-50);
+  --bs-checkbox-group-options-gap: var(--bs-spacing-0);
+  --bs-checkbox-group-label-color: var(--bs-text-default);
+  --bs-checkbox-group-description-color: var(--bs-text-secondary);
+  --bs-checkbox-group-error-color: var(--bs-text-error);
+}
+
+:host([orientation='horizontal']) {
+  --bs-checkbox-group-options-gap: var(--bs-spacing-300);
+}
+
+.bs-checkbox-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-checkbox-group-gap);
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-family: inherit;
+}
+
+.bs-checkbox-group__label {
+  padding: 0;
+  margin-bottom: var(--bs-checkbox-group-gap);
+  font-size: var(--bs-font-size-md);
+  font-weight: var(--bs-font-weight-medium);
+  color: var(--bs-checkbox-group-label-color);
+}
+
+.bs-checkbox-group__options {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--bs-checkbox-group-options-gap);
+}
+
+:host([orientation='horizontal']) .bs-checkbox-group__options {
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.bs-checkbox-group__description,
+.bs-checkbox-group__error {
+  font-size: var(--bs-font-size-xs);
+}
+
+.bs-checkbox-group__description {
+  color: var(--bs-checkbox-group-description-color);
+}
+
+.bs-checkbox-group__error {
+  color: var(--bs-checkbox-group-error-color);
+}