@brandsync/wc 1.17.0 → 1.19.0

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

@@ -100,4 +100,17 @@ describe('bs-icon-button', () => {
             expect(getComputedStyle(root.querySelector('i.glyph')).fontSize).toBe('30px');
         });
     });
+    describe('pressed (toggle)', () => {
+        it('sets aria-pressed on the inner button only when `pressed` is set', async () => {
+            const { root, waitForChanges } = await render(h("bs-icon-button", { ariaLabel: "Favourite" }));
+            const inner = () => root.shadowRoot.querySelector('button');
+            expect(inner().hasAttribute('aria-pressed')).toBe(false);
+            root.pressed = true;
+            await waitForChanges();
+            expect(inner().getAttribute('aria-pressed')).toBe('true');
+            root.pressed = false;
+            await waitForChanges();
+            expect(inner().getAttribute('aria-pressed')).toBe('false');
+        });
+    });
 });

package/dist/collection/components/bs-button/bs-icon-button/bs-icon-button.css

@@ -132,6 +132,8 @@
 }
 
 .bs-icon-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-button/bs-icon-button/bs-icon-button.js

@@ -23,6 +23,7 @@ import { h } from "@stencil/core";
  * @slot - Default slot: the icon content. Exactly one icon, no label -- an inline SVG, or an icon-font
  * glyph (sized by `font-size`, which this component sets from the `size` prop).
  * @part icon - The icon wrapper element.
+ * @part ripple - The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 // Note: this component's CSS Custom Properties (--bs-icon-button-*) are documented via @prop
 // comments in bs-icon-button.css, not here -- Stencil's docs generator only parses @prop out of
@@ -52,6 +53,13 @@ export class BsIconButton {
      * prop to the `aria-label` HTML attribute automatically.
      */
     ariaLabel = null;
+    /**
+     * Makes this a toggle button: sets `aria-pressed` on the inner `<button>` to `true`/`false`. Leave it
+     * unset (the default) for a plain action button, which then has no `aria-pressed` at all. The component
+     * does not toggle itself; the owner flips this on click. Put the toggle's state in the icon (e.g. a filled
+     * star), not in the label, which should stay the same.
+     */
+    pressed;
     onClick = () => {
         const form = this.internals?.form;
         if (!form || this.disabled)
@@ -62,7 +70,7 @@ export class BsIconButton {
             form.reset();
     };
     render() {
-        return (h("button", { key: '75325bed02f38716052a4341a971ed429355d615', class: `bs-icon-button bs-icon-button--${this.variant} bs-icon-button--${this.size}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel, onClick: this.onClick }, h("span", { key: 'a427c213e0bbf3ee96698917ffc127d1d4d15de8', part: "icon", class: "bs-icon-button__icon" }, h("slot", { key: 'b46bf34d3fb24e9b899ba52fbd2ca39a49c634d3' }))));
+        return (h("button", { key: '6ffeb6535c6c1fb493f6c805a1f70a431a593d08', class: `bs-icon-button bs-icon-button--${this.variant} bs-icon-button--${this.size}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel, "aria-pressed": this.pressed === undefined ? undefined : String(this.pressed), onClick: this.onClick }, h("bs-ripple", { key: '0f3f40ca57f447a5d92b3f0ef132c146ef25675d', part: "ripple", centered: true, disabled: this.disabled }), h("span", { key: '00c1039364372917781441fca63553a430b9398a', part: "icon", class: "bs-icon-button__icon" }, h("slot", { key: '18ba74587ec975b3f95115c211bcef1d4bac6ae5' }))));
     }
     static get is() { return "bs-icon-button"; }
     static get encapsulation() { return "shadow"; }
@@ -191,6 +199,25 @@ export class BsIconButton {
                 "reflect": false,
                 "attribute": "aria-label",
                 "defaultValue": "null"
+            },
+            "pressed": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes this a toggle button: sets `aria-pressed` on the inner `<button>` to `true`/`false`. Leave it\nunset (the default) for a plain action button, which then has no `aria-pressed` at all. The component\ndoes not toggle itself; the owner flips this on click. Put the toggle's state in the icon (e.g. a filled\nstar), not in the label, which should stay the same."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pressed"
             }
         };
     }

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

@@ -27,7 +27,7 @@ export class BsButtonSkeleton {
     /** Accessible name announced for the loading placeholder. */
     loadingLabel = 'Loading';
     render() {
-        return h("span", { key: '248ee140711040c1a4a35cd8539431d79d5f5c7c', part: "container", class: `bs-button-skeleton bs-button-skeleton--${this.size}`, role: "status", "aria-label": this.loadingLabel });
+        return h("span", { key: 'c29256165abc3f5de50cf1f087f0ad161e33bb76', part: "container", class: `bs-button-skeleton bs-button-skeleton--${this.size}`, role: "status", "aria-label": this.loadingLabel });
     }
     static get is() { return "bs-button-skeleton"; }
     static get encapsulation() { return "shadow"; }

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

@@ -34,7 +34,7 @@ export class BsCard {
         this.hasImage = ev.target.assignedNodes().length > 0;
     };
     render() {
-        return (h("div", { key: '288db1e39f66129bf5d6598f53fb49d5481d0f02', part: "container", class: `bs-card bs-card--${this.surface}` }, h("div", { key: '9f25abc5cdfdf40d7bdefab7f1154545cc634f9d', part: "image", class: `bs-card__image ${this.hasImage ? 'bs-card__image--visible' : ''}` }, h("slot", { key: '8eff4a23e8ecf977056206bc8c223b4ad97b7656', name: "image", onSlotchange: this.onImageSlotchange })), h("div", { key: 'b0a1580657943f30c9a5dba3361dcf00dd36e90f', class: "bs-card__content" }, h("div", { key: 'f151de3b9d5975d2953131aea92a2353ac665bbc', part: "header", class: "bs-card__header" }, h("slot", { key: '6d015146a6ff72788ad3843caa37f2c304728b8b', name: "header" })), h("div", { key: 'd678f0d33dba58725b397502d9aced9983466bf6', part: "body", class: "bs-card__body" }, h("slot", { key: '51b7cdca4af0e43ba7de04c14bca32f59baa2f58' })), h("div", { key: '6b6fe027565678561d7f7beb79f6ceb05397ff50', part: "footer", class: "bs-card__footer" }, h("slot", { key: '6d704d0e7b6644e3f0e6b4ce7ae12e515c84339d', name: "footer" })))));
+        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" })))));
     }
     static get is() { return "bs-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,8 +1,10 @@
 import { render, h, describe, it, expect } from "@stencil/vitest";
 import { afterEach, beforeEach, vi } from "vitest";
 import { userEvent } from "vitest/browser";
-import { assertShadowParts, runAxeCheck } from "../../test/helpers/conventions";
+import { assertCssCustomProperties, assertShadowParts, runAxeCheck } from "../../test/helpers/conventions";
 const slides = (n) => Array.from({ length: n }, (_, i) => h("div", null, "Slide ", i + 1));
+// Page changes play a short exit-then-enter motion (default 300ms); the new page is on screen after it.
+const settled = () => new Promise(resolve => setTimeout(resolve, 450));
 const visible = (root) => Array.from(root.children).filter(c => !c.hidden).map(c => c.textContent);
 // Autoplay deliberately holds while the pointer is over the carousel (WCAG pause-on-hover). The test
 // browser keeps ONE pointer for the whole run, so an earlier test that hovered something near the top
@@ -88,6 +90,7 @@ describe('bs-carousel', () => {
             expect(prev.disabled).toBe(true);
             btn(next).click();
             await waitForChanges();
+            await settled();
             expect(visible(root)).toEqual(['Slide 4', 'Slide 5', 'Slide 6']);
             expect(root.currentPage).toBe(2);
             expect(spy).toHaveReceivedEventDetail(2);
@@ -108,6 +111,7 @@ describe('bs-carousel', () => {
             pagination.shadowRoot.querySelectorAll('.bs-pagination__page')[2].click();
             await waitForChanges();
             expect(root.currentPage).toBe(3);
+            await settled();
             expect(visible(root)).toEqual(['Slide 7', 'Slide 8', 'Slide 9']);
             expect(spy).toHaveReceivedEventTimes(1);
             expect(spy).toHaveReceivedEventDetail(3);
@@ -195,4 +199,38 @@ describe('bs-carousel', () => {
             expect(root.currentPage).toBe(1);
         });
     });
+    describe('page change motion', () => {
+        const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+        it('keeps the old page up while it animates out, then shows the new page', async () => {
+            const { root, waitForChanges } = await render(h("bs-carousel", { style: { '--bs-carousel-duration': '200ms' } }, slides(6)));
+            const before = visible(root);
+            root.currentPage = 2;
+            await waitForChanges();
+            expect(visible(root)).toEqual(before);
+            await wait(400);
+            await waitForChanges();
+            expect(visible(root)).not.toEqual(before);
+            expect(root.currentPage).toBe(2);
+        });
+        it('switches immediately when the duration is 0ms', async () => {
+            const { root, waitForChanges } = await render(h("bs-carousel", { style: { '--bs-carousel-duration': '0ms' } }, slides(6)));
+            const before = visible(root);
+            root.currentPage = 2;
+            await waitForChanges();
+            expect(visible(root)).not.toEqual(before);
+        });
+        it('snaps to the latest page when changed again mid-motion', async () => {
+            const { root, waitForChanges } = await render(h("bs-carousel", { style: { '--bs-carousel-duration': '400ms' } }, slides(9)));
+            root.currentPage = 2;
+            await waitForChanges();
+            root.currentPage = 3;
+            await waitForChanges();
+            await wait(100);
+            expect(visible(root)).toEqual(['Slide 7', 'Slide 8', 'Slide 9']);
+        });
+        it('exposes its motion custom properties', async () => {
+            const { root } = await render(h("bs-carousel", null, slides(6)));
+            assertCssCustomProperties(root, ['--bs-carousel-duration', '--bs-carousel-easing', '--bs-carousel-slide-distance']);
+        });
+    });
 });

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: '4d3a0024b4f407a595769bc3dce7270104a0aeb7', 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: '7160dbff92ce24112a5ebe54f10cfb4034d29750', part: "slides", class: "bs-carousel__slides", "aria-live": rotating ? 'off' : 'polite' }, h("slot", { key: 'fee4505b4a303719c62f9a7b76bea784ef920a20', onSlotchange: this.onSlotChange })), showTracker && (h("div", { key: 'd70a3780f4d9c00c087d931fb4b50401890a2c38', 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.js

@@ -139,7 +139,7 @@ export class BsChatbotFeedback {
     }
     render() {
         const stars = [1, 2, 3, 4, 5];
-        return (h("div", { key: '64c7f8d329b25d54264ccc3fd2046c7b91b0a928', class: "bs-chatbot-feedback", role: "region", "aria-label": this.computedHeading() }, h("button", { key: '3b4f619db2a8f1f44fdc7229d3fda8726728483e', type: "button", part: "close", class: "bs-chatbot-feedback__close", "aria-label": this.closeLabel, onClick: this.onCloseClick }, h(CloseIcon, { key: 'c7c698aeb2b70255e3515b7f2aa505b326d26e53' })), h("div", { key: '6d076b4c3ce3ceb29e77faa28b8c9ff378166977', class: "bs-chatbot-feedback__top" }, h("div", { key: '4417e15cea995e2ae22cf606d0b13ca7f7c28a6d', class: "bs-chatbot-feedback__text" }, h("p", { key: 'c36b0301127b7f522cc7a491d4ef2fbb691ed082', part: "heading", class: "bs-chatbot-feedback__heading" }, this.computedHeading()), h("p", { key: 'bde47a0de3f408bf8f3deab1fd4bc6b44782528d', part: "subtitle", class: "bs-chatbot-feedback__subtitle" }, this.computedSubtitle())), h("div", { key: 'd6a28296298b30340ae249582a02f2242ddde6fd', 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: 'a3d957978212ba546914eb8f19a6c0b6776b4cda', class: "bs-chatbot-feedback__field" }, h("label", { key: 'ccbda1eeff0a7963704e1c095349ce503c76d6cc', part: "label", class: "bs-chatbot-feedback__label", htmlFor: "bs-chatbot-feedback-comment" }, this.commentLabel), h("textarea", { key: 'c1676c31a10315e8bccabe1841b8abc990f32158', 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: 'ca1fc129a1fa0645a9aa85fdbf0d0de73c24f8e6', part: "comment", class: "bs-chatbot-feedback__comment" }, this.comment))), h("div", { key: 'd6f9ae5f1c52de30bb07a22e6dcbe97fce7e5a97', class: "bs-chatbot-feedback__actions" }, !this.submitted && (h("button", { key: 'dd46f42be756a4f1af593c83c130ea25f1fcd312', type: "button", part: "submit", class: "bs-chatbot-feedback__submit", disabled: this.rating === 0, onClick: this.onSubmitClick }, h(SendIcon, { key: 'b462d0786b439f5543659d12875d1e42f5e649e6' }), this.submitLabel)), h("button", { key: '818daeb3198f4adfbb5d55b8bdfd07f6904c84d5', 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: '504ed8bd1ac4b325afb3ed082105510bfebe4bd4' }), this.newChatLabel))));
+        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))));
     }
     static get is() { return "bs-chatbot-feedback"; }
     static get encapsulation() { return "shadow"; }

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: 'a3bf82b419fe181054ef681938edee90b3a7370c', class: "bs-chatbot-header", role: "banner", "aria-label": this.heading }, h("div", { key: '194e0c8da2af153b8a6c525db7c09d2960d00766', part: "logo", class: "bs-chatbot-header__logo", role: "img", "aria-label": this.heading, innerHTML: GENIE_LOGO_SVG }), h("div", { key: 'c5b7c45960c14dd1052fd6e0e16d9100e87f6065', class: "bs-chatbot-header__actions" }, h("slot", { key: 'ffb35bd3e7694623c672b086db42ee69e14606ae', name: "actions" }), !this.hideNewChat && (h("span", { key: '00870907a0971458c484c88082176f809f8eaa8e', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '2b12b13ac7595a39b2f90bbfccf784d643ccb8a6', type: "button", part: "new-chat", class: "bs-chatbot-header__button", "aria-label": this.newChatLabel, onClick: this.onNewChatClick }, h("slot", { key: '12ffde1876b46f492d8690796e27c9e716020a6f', name: "new-chat-icon" }, h(NewChatIcon, { key: 'a720b894daaa12a6bb4e89391ac400a00217e2a1' }))), h("bs-tooltip", { key: 'f4a8aebd32eea278cc45d7ec67de564e539671c4', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, this.newChatLabel))), !this.hideHistory && (h("span", { key: '38668bf4d54439e8b6aff21aed277753a9bfd05c', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'fd7dbd9db931baaa42a74523952bb58fd81f8c59', type: "button", part: "history", class: "bs-chatbot-header__button", "aria-label": this.historyLabel, onClick: this.onHistoryClick }, h("slot", { key: '8677cb10b69e30f1ed63f760a6d1384e43ee889a', name: "history-icon" }, h(HistoryIcon, { key: 'f3dbc6e2ad0e498d975ff12127ea5a04aa5feabb' }))), h("bs-tooltip", { key: 'f95bef141e03ea75a803786961d56cb57c4c4419', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, this.historyLabel))), !this.hideExpand && (h("span", { key: 'cfc6b76abab457ddbb0f800c9421755fa4a7356f', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '2413fa727f2eb5d6963ec0a60a0f52bce91a50bb', 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: '2291b453f5d21ed2c605b9637530e719fd50b979', name: "expand-icon" }, h(ExpandIcon, { key: 'b8ed1f8839eea3714532283e15a6cd0fe5fe6fb4' }))), h("bs-tooltip", { key: '392da3045534004015b4b894f0948876e1f12141', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, this.expanded ? this.collapseLabel : this.expandLabel))), !this.hideClose && (h("span", { key: '136d790708106fb64c1c83371af5d76e37cb57fd', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'b500c7104dace70ad434b556fa913fa650f95ce2', type: "button", part: "close", class: "bs-chatbot-header__button", "aria-label": this.closeLabel, onClick: this.onCloseClick }, h("slot", { key: '3ede2fe906f8819e496d1c8537b3520cf29698d7', name: "close-icon" }, h(CloseIcon, { key: '9d26f8d6b36cb51d564b7d44d375828af4671d6c' }))), h("bs-tooltip", { key: '14c17d47ac9e6bb7ed78a49fb8005879c6674718', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, this.closeLabel))))));
+        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))))));
     }
     static get is() { return "bs-chatbot-header"; }
     static get encapsulation() { return "shadow"; }

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: 'ebc6d993ea58554ab0a5d36c9148da333424ed8c', class: "bs-chatbot-response-action" }, h("button", { key: 'f171f6c7be3a81f75b036a6e19d8d25c60da45de', 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: '36697458bd76eeb31d6a3cd0c793ba9b12850bb5', name: "like-icon" }, h(ThumbsUpIcon, { key: '3f07e995a80dff4a9ad993ec943e20dfba199828' }))), h("button", { key: '70a982907bfd4ea1843a157db2830dc251b6cce3', 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: 'f74a10e3488db4167c7aeadb12dfe18e07bd8375', name: "dislike-icon" }, h(ThumbsDownIcon, { key: 'a84fd41bdb0b04f0899186f9dc7c3b3f9a01c4e4' }))), h("button", { key: 'f9607a0b7fb610308437fd348291a39a1a75c48f', type: "button", part: "copy", class: "bs-chatbot-response-action__button", "aria-label": this.copyLabel, onClick: this.onCopyClick }, h("slot", { key: '50d0ee6d299b0b9eaa2f2a76c8e163c62b0b1c46', name: "copy-icon" }, h(CopyIcon, { key: '4393f5f8613f96b3040bef7fb3ab56002bec882a' }))), !this.hideRegenerate && (h("button", { key: 'a7df160d71f63455807b0641fdb4ecc7c963262f', type: "button", part: "regenerate", class: "bs-chatbot-response-action__button", "aria-label": this.regenerateLabel, onClick: this.onRegenerateClick }, h("slot", { key: '746a947dcdc2513dcc14a2c45ad43e8c5689b155', name: "regenerate-icon" }, h(RegenerateIcon, { key: '6d64c1b4a2795d4700bbf398098bb660e1b7a61d' })))), h("div", { key: '6b3969c13b586c593f0e5a1a98407fd5514b5038', class: "bs-chatbot-response-action__menu-wrapper" }, h("button", { key: 'ce57cbfbb40b2a4888cc1aae725d94f330203dce', 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: 'c301f66e32e50b915374bb660f8e8ebfda5fece2', name: "menu-icon" }, h(MenuIcon, { key: '3cb0895245598879d982ff9f206a278d6c8332fc' }))), this.menuOpen && (h("div", { key: 'bc20c2db7f705d5b10d6d6f770ad0fc15de0cf55', class: "bs-chatbot-response-action__menu-popup" }, h("slot", { key: '0a429d4727cdc0138da8044e0b813722f1f17eec', name: "menu" })))), hasSources && (h("button", { key: '35dc4762ead97f292db9652a18f4fbb41a1ce4d2', type: "button", part: "sources", class: "bs-chatbot-response-action__sources", onClick: this.onSourcesClick }, h("slot", { key: 'fb308abbcfbef564e9e424ccdbfaaac95911bf6b', name: "sources-icon" }, h(SourcesIcon, { key: '281a8fbb031ff7af27b176894bfd287c78a4de97' })), h("span", { key: '6afee37c37811f052b9d83089f220b354dd161b7', class: "bs-chatbot-response-action__sources-label" }, this.sourcesCount, " ", this.sourcesCount === 1 ? this.sourceLabel : this.sourcesLabel)))));
+        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)))));
     }
     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: '00bae658c31f1b0cb31cde007056aad03bf0ad77', class: "bs-chatbot-sources-drawer", role: "region", "aria-label": this.heading }, h("div", { key: 'ee2f47d76139560f152dc730d8d4252c550c4874', class: "bs-chatbot-sources-drawer__header" }, h("div", { key: 'dacf3742bd6db7b2b4ab7dfa25a569d48fef4ae8', class: "bs-chatbot-sources-drawer__title-group" }, h("h2", { key: '4a574daa2822b1acd984268e1e758f457bf40c4f', part: "heading", class: "bs-chatbot-sources-drawer__heading" }, this.heading), displayCount > 0 && (h("span", { key: 'cef7cd7a050ecb145d62a8f0992e795405c8f8d6', part: "count", class: "bs-chatbot-sources-drawer__count" }, displayCount))), h("button", { key: '8a1c6a8c16de70836555fed325602e3e2152c618', type: "button", part: "collapse", class: "bs-chatbot-sources-drawer__collapse", "aria-label": this.collapseLabel, onClick: this.onCollapseClick }, h("slot", { key: '9dd216a247757d22fb6dea3b75e07dc9ed3e6cb0', name: "collapse-icon" }, h(CaretRightIcon, { key: '8c6a8d2dd8b1fa71812e257e43939990be25ce04' })))), h("div", { key: '4d057db59b72db7c13eacaa2113cb9964caef1c9', part: "list", class: "bs-chatbot-sources-drawer__list" }, h("slot", { key: '5e5e753897ed08f1b2e1e37919e7ac4ed721a893', onSlotchange: this.onSlotchange }))));
+        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 }))));
     }
     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.css

@@ -12,6 +12,8 @@
 }
 
 .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;

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

@@ -32,6 +32,7 @@ import { h } from "@stencil/core";
  *   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 +43,7 @@ export class BsChatbotSuggestionButton {
         this.bsSelect.emit();
     };
     render() {
-        return (h("button", { key: '9773b5f3b62675a48eacc9a63fd52cd92172fe68', type: "button", part: "button", class: "bs-chatbot-suggestion-button", disabled: this.disabled, onClick: this.onClick }, h("slot", { key: '1fbe7d378fb81cebc348b232c5fbe00fe31daf78' })));
+        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' })));
     }
     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: '553af2d9b475730b4f399da364a42a8fe61de077', part: "container", class: "bs-checkbox-skeleton", role: "status", "aria-label": this.loadingLabel }, h("span", { key: '06b4a8dcb9b436f1f79a9d59144430d22081d89d', part: "box", class: `bs-checkbox-skeleton__box bs-checkbox-skeleton__box--${this.size}` }), h("span", { key: 'd56789d4ad329edf3336cabef6a7b5200f977210', part: "label", class: "bs-checkbox-skeleton__label" })));
+        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" })));
     }
     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: '98b2c7da5530c74c5632f28a770096201df43f1f', class: `bs-checkbox ${this.disabled ? 'bs-checkbox--disabled' : ''}` }, h("input", { key: '1765be1adab7001f6b8c6ca79c9da8ca3a67bb77', 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: 'ffae4c14191d40da029aaa058d0a11f1170e8c00', part: "box", class: boxClasses }, showIcon && (h("svg", { key: 'ef0ddf8663a8d1a517b3604c8fa3a98ff1ba7187', 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: '9fda5d8e25fecbc6d4ebe9339f63fae58e8bac26', part: "label", class: "bs-checkbox__label" }, h("slot", { key: '95d6e3a55c81444feb8d1221bb080b9c49a8cf46' }))));
+        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-chip/bs-chip-filter/bs-chip-filter.css

@@ -39,6 +39,8 @@
 }
 
 .bs-chip-filter {
+  /* Containing block for the absolutely-positioned bs-ripple layer. */
+  position: relative;
   display: inline-flex;
   align-items: center;
   gap: var(--bs-chip-filter-gap);

package/dist/collection/components/bs-chip/bs-chip-filter/bs-chip-filter.js

@@ -18,6 +18,7 @@ import { h } from "@stencil/core";
  * @part icon - The icon wrapper element.
  * @part label - The text label element.
  * @part caret - The dropdown caret wrapper element, when `dropdown` is set.
+ * @part ripple - The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 export class BsChipFilter {
     el;
@@ -70,7 +71,7 @@ export class BsChipFilter {
         // label-only edge gets more -- except when NEITHER edge has a glyph, where both edges use a
         // third, larger value rather than the label-only one (see bs-chip-filter.css's own comment).
         const paddingVariant = this.hasIcon && this.dropdown ? 'icon-dropdown' : this.hasIcon ? 'icon-only' : this.dropdown ? 'dropdown-only' : 'text-only';
-        return (h("button", { key: 'c1b7395764984baadd0d32d5bd6a3d8d61cb637a', type: "button", class: `bs-chip-filter bs-chip-filter--${this.size} bs-chip-filter--${paddingVariant} ${this.selected ? 'bs-chip-filter--selected' : ''}`, disabled: this.disabled, "aria-pressed": String(this.selected), "aria-label": this.ariaLabel, onClick: this.onClick }, h("span", { key: 'db74ff2a992268bb95564dc1631e54d00208255f', part: "icon", class: `bs-chip-filter__icon ${this.hasIcon ? 'bs-chip-filter__icon--visible' : ''}` }, h("slot", { key: '9319387acc35131d0555f9ad84c1f733034920d7', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '06291c8712d77d43c3c823e4b90d99218618db35', part: "label", class: "bs-chip-filter__label" }, h("slot", { key: '3c72fcc1085239ba9c45ee6e89f5b8e8b4cc0ce8' })), this.dropdown && (h("span", { key: 'd2efca03ed06d2341aec986cca2c0d27bdce5a75', part: "caret", class: "bs-chip-filter__caret", "aria-hidden": "true" }, h(ChevronDownIcon, { key: '8bb9383201632e567f662909559702fcf391790e' })))));
+        return (h("button", { key: '330d7292dd7bb519c8cdf0dd237ad85913ab35fe', type: "button", class: `bs-chip-filter bs-chip-filter--${this.size} bs-chip-filter--${paddingVariant} ${this.selected ? 'bs-chip-filter--selected' : ''}`, disabled: this.disabled, "aria-pressed": String(this.selected), "aria-label": this.ariaLabel, onClick: this.onClick }, h("bs-ripple", { key: '34767b4129e742f2eaefb2192ae0bfb07449f480', part: "ripple", centered: false, disabled: this.disabled }), h("span", { key: '9ec983b47dec13c4ac573d2c2125fe314843693c', part: "icon", class: `bs-chip-filter__icon ${this.hasIcon ? 'bs-chip-filter__icon--visible' : ''}` }, h("slot", { key: '0b7093bf29bc156a0c969616af48c5c709b0ee6e', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '3a309c3171bee1ccdf066da85aea80b5476f454d', part: "label", class: "bs-chip-filter__label" }, h("slot", { key: 'afda9556224d3faf5fed56796f0d2eebd335d612' })), this.dropdown && (h("span", { key: '692b0d968999335c18cf21eaea20af997f1a6599', part: "caret", class: "bs-chip-filter__caret", "aria-hidden": "true" }, h(ChevronDownIcon, { key: 'cc87f0f3f8e95a8733f083f36d5caee9b649bed7' })))));
     }
     static get is() { return "bs-chip-filter"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-chip/bs-chip-informative/bs-chip-informative.js

@@ -44,7 +44,7 @@ export class BsChipInformative {
     };
     render() {
         const paddingVariant = this.hasIcon ? 'icon' : 'text';
-        return (h(Host, { key: 'ee5706f8c040b01f97e44b9dba4d74a3b023005c', class: `bs-chip-informative bs-chip-informative--${this.color} bs-chip-informative--${this.size} bs-chip-informative--${paddingVariant}` }, h("span", { key: '611cc7bec3b22cc2e7de25fc8aa49e8d4eca3cba', part: "icon", class: `bs-chip-informative__icon ${this.hasIcon ? 'bs-chip-informative__icon--visible' : ''}` }, h("slot", { key: '5945478d567c7b6a6e4ff602c2edd6465d3b7778', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '7e78fb0f2e5cfc2d232aa04f0c9edf94044f8eca', part: "label", class: "bs-chip-informative__label" }, h("slot", { key: 'fcec1018222e0da3f0adc6da13e0699c0bad764b' }))));
+        return (h(Host, { key: '1c590939607a3a3c511e60fbf13da81268a3f178', class: `bs-chip-informative bs-chip-informative--${this.color} bs-chip-informative--${this.size} bs-chip-informative--${paddingVariant}` }, h("span", { key: '9da198d1f3680e20364c13bee40c0123473ec37c', part: "icon", class: `bs-chip-informative__icon ${this.hasIcon ? 'bs-chip-informative__icon--visible' : ''}` }, h("slot", { key: '7951b8044a25a007641b2cff5d4e52543f5a2a82', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '54c6f6abe99b04cc0b3dfd75202dde81bdc8a163', part: "label", class: "bs-chip-informative__label" }, h("slot", { key: '3e4f7a245054e0d8898028c5c1ed4e6e35496988' }))));
     }
     static get is() { return "bs-chip-informative"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-chip/bs-chip-input/bs-chip-input.css

@@ -170,3 +170,10 @@
 .bs-chip-input__remove:disabled {
   cursor: not-allowed;
 }
+
+.bs-chip-input__body,
+.bs-chip-input__remove {
+  /* Containing block for the absolutely-positioned bs-ripple layer. */
+  position: relative;
+  border-radius: inherit;
+}

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

@@ -21,6 +21,7 @@ import { Host, h } from "@stencil/core";
  * @part icon - The icon wrapper element.
  * @part label - The text label element.
  * @part remove - The trailing remove button.
+ * @part ripple - The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 export class BsChipInput {
     el;
@@ -79,7 +80,7 @@ export class BsChipInput {
     };
     render() {
         const paddingVariant = this.hasIcon ? 'icon' : 'text';
-        return (h(Host, { key: '1e44e8c6c324502677a711e9efdeea812181e93d', class: `bs-chip-input bs-chip-input--${this.size} bs-chip-input--${paddingVariant}` }, h("button", { key: '7c698a6cfbe6ca8ff1215edeb59d7a58071ec29e', type: "button", part: "body", class: "bs-chip-input__body", disabled: this.disabled, "aria-pressed": String(this.selected), onClick: this.onBodyClick }, h("span", { key: '159334959b3da3665fb6f4a2930c15fc1da028ad', part: "icon", class: `bs-chip-input__icon ${this.hasIcon ? 'bs-chip-input__icon--visible' : ''}` }, h("slot", { key: '0f12a8dbf2b17578ec1446032fa6b795f6aac9f4', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'd8236eaa237e3d204f721274551c0d50ce6b1f9a', part: "label", class: "bs-chip-input__label" }, h("slot", { key: '4872dcc68aa9a204801f10415fd1b3bc31db0c2a', onSlotchange: this.onLabelSlotchange }))), h("button", { key: 'ac930ef1166ff21f889641cf0644c20e77f92196', type: "button", part: "remove", class: "bs-chip-input__remove", disabled: this.disabled, "aria-label": `${this.removeLabel} ${this.labelText}`, onClick: this.onRemoveClick }, h(CloseIcon, { key: 'ba26dff61400df054f3b2d73526e08d02734ba07' }))));
+        return (h(Host, { key: '23b8519dece5666894eb211065d8ebc6208afb73', class: `bs-chip-input bs-chip-input--${this.size} bs-chip-input--${paddingVariant}` }, h("button", { key: 'bf65dbc1e0989c7ddeca7d863357934833d40889', type: "button", part: "body", class: "bs-chip-input__body", disabled: this.disabled, "aria-pressed": String(this.selected), onClick: this.onBodyClick }, h("bs-ripple", { key: '4b74e46a995d1e6429a69853550983066c53fd8b', part: "ripple", centered: false, disabled: this.disabled }), h("span", { key: '45c9089f5050b6417667b71af047b55d9df20aae', part: "icon", class: `bs-chip-input__icon ${this.hasIcon ? 'bs-chip-input__icon--visible' : ''}` }, h("slot", { key: 'e3e68eb90f3f4908ff1f3af61a2fbc524c148ae6', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '2e4709dd6398fe589294bd884a2a60c7bc083804', part: "label", class: "bs-chip-input__label" }, h("slot", { key: '71b54619b617b3bf82cee8d7144e2b23af2353c7', onSlotchange: this.onLabelSlotchange }))), h("button", { key: 'bc3892fe66883bc9f43b9fb95274539be42d40b9', type: "button", part: "remove", class: "bs-chip-input__remove", disabled: this.disabled, "aria-label": `${this.removeLabel} ${this.labelText}`, onClick: this.onRemoveClick }, h("bs-ripple", { key: '283b64fdc5fcf4c490d07ffac9e66284d666fc15', part: "ripple", centered: true, disabled: this.disabled }), h(CloseIcon, { key: 'ed997aab7198b3de133c05c49a4a220422db3cf4' }))));
     }
     static get is() { return "bs-chip-input"; }
     static get encapsulation() { return "shadow"; }