@brandsync/wc 1.18.0 → 1.19.0

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

@@ -18,6 +18,8 @@
  * @prop --bs-accordion-bg-disabled: Header/content background, disabled. Aliased to --bs-surface-action-disabled.
  * @prop --bs-accordion-text-disabled: Label/content color, disabled. Aliased to --bs-text-on-disabled.
  * @prop --bs-accordion-focus-ring: Focus-visible outer ring color. Aliased to --bs-border-neutral-focus.
+ * @prop --bs-accordion-duration: Expand/collapse and caret rotation length. Aliased to --bs-duration-default.
+ * @prop --bs-accordion-easing: Expand/collapse and caret rotation curve. Aliased to --bs-easing-standard.
  */
 :host {
   display: block;
@@ -41,6 +43,8 @@
   --bs-accordion-bg-disabled: var(--bs-surface-action-disabled);
   --bs-accordion-text-disabled: var(--bs-text-on-disabled);
   --bs-accordion-focus-ring: var(--bs-border-neutral-focus);
+  --bs-accordion-duration: var(--bs-duration-default);
+  --bs-accordion-easing: var(--bs-easing-standard);
 }
 
 .bs-accordion {
@@ -48,6 +52,7 @@
   border-radius: var(--bs-accordion-radius);
   overflow: hidden;
   font-family: inherit;
+  transition: background-color var(--bs-accordion-duration) var(--bs-accordion-easing);
 }
 
 /* Hover/pressed/focus-visible highlight the WHOLE item (header + content together), not just the
@@ -163,6 +168,14 @@
   color: inherit;
 }
 
+.bs-accordion__caret {
+  transition: transform var(--bs-accordion-duration) var(--bs-accordion-easing);
+}
+
+.bs-accordion__caret--open {
+  transform: rotate(180deg);
+}
+
 .bs-accordion__caret svg {
   width: 24px;
   height: 24px;
@@ -179,6 +192,8 @@
 }
 
 .bs-accordion__content {
+  /* border-box so the animated height includes the padding, matching what getBoundingClientRect reads. */
+  box-sizing: border-box;
   padding-top: 0;
   padding-bottom: var(--bs-accordion-content-padding-bottom);
   padding-inline-end: var(--bs-accordion-content-padding-right);

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

@@ -19,8 +19,14 @@ import { h } from "@stencil/core";
  * @part label - The label wrapper.
  * @part caret - The trailing caret wrapper.
  * @part content - The body content wrapper.
+ * @prop --bs-accordion-duration - Length of the expand/collapse motion. Aliased to `--bs-duration-default`.
+ * @prop --bs-accordion-easing - Curve of the expand/collapse motion. Aliased to `--bs-easing-standard`.
+ *
+ * Expanding and collapsing animate the body's height and rotate the caret. Under
+ * `prefers-reduced-motion: reduce` the duration token is `0ms`, so the body snaps.
  */
 export class BsAccordion {
+    el;
     /** Whether the section is expanded. This is the single source of truth for the component's
      * visual state -- a controlled component, like a controlled `<input>`. Clicking (or
      * keyboard-activating) the header never mutates this prop itself; it only emits `bsToggle` with
@@ -45,6 +51,58 @@ export class BsAccordion {
     /** Emitted when the header is activated (click, or Enter/Space while focused), with the
      * REQUESTED new expanded value (`!expanded`). Never fires while `disabled`. */
     bsToggle;
+    /** Keeps the body mounted while it animates closed when `showPreview` is `false`. */
+    closing = false;
+    contentEl;
+    animation;
+    fromHeight = 0;
+    fromPadding = '0px';
+    pendingAnimation = false;
+    /**
+     * Runs before the re-render that follows an `expanded` change, so the body's current height can
+     * be read while it is still in its old state. `componentDidRender` then animates from that height
+     * to the new one. Reading the live height (not a stored one) also makes interrupting a running
+     * animation start from wherever it currently is.
+     */
+    onExpandedChange(expanded) {
+        const content = this.contentEl;
+        this.fromHeight = content ? content.getBoundingClientRect().height : 0;
+        this.fromPadding = content ? getComputedStyle(content).paddingBottom : '0px';
+        this.animation?.cancel();
+        this.pendingAnimation = true;
+        if (!expanded && !this.showPreview)
+            this.closing = true;
+    }
+    componentDidRender() {
+        if (!this.pendingAnimation)
+            return;
+        this.pendingAnimation = false;
+        const content = this.contentEl;
+        const style = getComputedStyle(this.el);
+        const ms = this.toMs(style.getPropertyValue('--bs-accordion-duration'));
+        if (!content || ms === 0) {
+            this.closing = false;
+            return;
+        }
+        const toZero = !this.expanded && !this.showPreview;
+        const toHeight = toZero ? 0 : content.getBoundingClientRect().height;
+        const toPadding = toZero ? '0px' : getComputedStyle(content).paddingBottom;
+        this.animation = content.animate([
+            { height: `${this.fromHeight}px`, paddingBottom: this.fromPadding, overflow: 'hidden' },
+            { height: `${toHeight}px`, paddingBottom: toPadding, overflow: 'hidden' },
+        ], { duration: ms, easing: style.getPropertyValue('--bs-accordion-easing').trim() || 'ease' });
+        this.animation.onfinish = () => {
+            this.closing = false;
+        };
+    }
+    toMs(value) {
+        const v = value.trim();
+        if (v.endsWith('ms'))
+            return parseFloat(v);
+        if (v.endsWith('s'))
+            return parseFloat(v) * 1000;
+        return 0;
+    }
     onActivate = () => {
         if (this.disabled)
             return;
@@ -55,7 +113,7 @@ export class BsAccordion {
         // `<div role="button">`: it gets click, keyboard activation (Enter/Space), focus-visible
         // styling, and `disabled` semantics (not focusable, no events) for free, and flexbox handles
         // laying out its children as easily as a <div>'s -- no layout reason to hand-roll any of that.
-        return (h("div", { key: '2774538f3bc8d52e5a295edafbdad5e2a12dddda', part: "container", class: `bs-accordion bs-accordion--${this.size} ${this.disabled ? 'bs-accordion--disabled' : ''}` }, h("button", { key: '7e1942dca9082ac653dd7e3d55d9b919790bcd5b', type: "button", part: "header", class: `bs-accordion__header bs-accordion__header--${this.size} ${this.showIcon ? '' : 'bs-accordion__header--no-icon'}`, disabled: this.disabled, "aria-expanded": String(this.expanded), onClick: this.onActivate }, this.showIcon && (h("span", { key: 'abd274cb295ae34e9220846a1e8466623f65663a', part: "icon", class: `bs-accordion__icon bs-accordion__icon--${this.size}`, "aria-hidden": "true" }, h("slot", { key: 'd9c4c429852c77f4a10c05eb247a9d3d35559ef6', name: "icon" }, h(PlusIcon, { key: '2fb492c43754a517e4e98b684f811be21777e849' })))), h("span", { key: 'a02484f1a47148493fbc193bc4b9daa8e4c634e7', part: "label", class: `bs-accordion__label ${this.showIcon ? '' : 'bs-accordion__label--no-icon'}` }, h("slot", { key: '8241ccee7233e85c2d69c225c07e67b982674ef7', name: "label" })), h("span", { key: '6e36ee8dbd22ca924f9d8ea8b5c3017c5478f058', part: "caret", class: `bs-accordion__caret bs-accordion__caret--${this.size}`, "aria-hidden": "true" }, this.expanded ? h(CaretUpIcon, null) : h(CaretDownIcon, null))), (this.expanded || this.showPreview) && (h("div", { key: '1e3ad6fe654c633a4094ea9014ef79d82feae2db', part: "content", class: `bs-accordion__content ${this.showIcon ? '' : 'bs-accordion__content--no-icon'} ${this.expanded ? 'bs-accordion__content--expanded' : 'bs-accordion__content--collapsed'}` }, h("slot", { key: '6a60fd12ed4ec7e3b4ab0e56414e0a90c4f5d889' })))));
+        return (h("div", { key: 'b7645b3be5116d906a2aa6e4e680859a9c19323f', part: "container", class: `bs-accordion bs-accordion--${this.size} ${this.disabled ? 'bs-accordion--disabled' : ''}` }, h("button", { key: 'a1c824c54a529b2214dbb47cb93adea5cdadee84', type: "button", part: "header", class: `bs-accordion__header bs-accordion__header--${this.size} ${this.showIcon ? '' : 'bs-accordion__header--no-icon'}`, disabled: this.disabled, "aria-expanded": String(this.expanded), onClick: this.onActivate }, this.showIcon && (h("span", { key: '5d35f4e2c05704a6bef532919301e765f8195aa7', part: "icon", class: `bs-accordion__icon bs-accordion__icon--${this.size}`, "aria-hidden": "true" }, h("slot", { key: '137280692f375379ef43be918094192d6030e2ad', name: "icon" }, h(PlusIcon, { key: '8826de2813774382dcf21e856288ff936eb12425' })))), h("span", { key: '57f370d082a86b7488bf309a114b82077d1f6711', part: "label", class: `bs-accordion__label ${this.showIcon ? '' : 'bs-accordion__label--no-icon'}` }, h("slot", { key: '5563063582ee2e1fb79d02acdc3d0feb5ac07eec', name: "label" })), h("span", { key: '8d8afd4433823aa8122b2ed167fd5ed3c32dc21a', part: "caret", class: `bs-accordion__caret bs-accordion__caret--${this.size} ${this.expanded ? 'bs-accordion__caret--open' : ''}`, "aria-hidden": "true" }, h(CaretDownIcon, { key: '51dfcbdfa5ccff5c3e6a6c2f983fc4d7fb460c18' }))), (this.expanded || this.showPreview || this.closing) && (h("div", { key: '8d62decaf3dc7a98f91eaea1723fc26a8fc520a4', ref: el => (this.contentEl = el), part: "content", class: `bs-accordion__content ${this.showIcon ? '' : 'bs-accordion__content--no-icon'} ${this.expanded ? 'bs-accordion__content--expanded' : 'bs-accordion__content--collapsed'}` }, h("slot", { key: '56493eb5b425134b38ac60f481219a823379626e' })))));
     }
     static get is() { return "bs-accordion"; }
     static get encapsulation() { return "shadow"; }
@@ -179,6 +237,11 @@ export class BsAccordion {
             }
         };
     }
+    static get states() {
+        return {
+            "closing": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "bsToggle",
@@ -197,7 +260,13 @@ export class BsAccordion {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "expanded",
+                "methodName": "onExpandedChange"
+            }];
+    }
 }
 const PlusIcon = () => (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M12 5V19", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M5 12H19", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
 const CaretDownIcon = () => (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M6 9.75L12 15.75L18 9.75", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
-const CaretUpIcon = () => (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M6 14.25L12 8.25L18 14.25", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));

package/dist/collection/components/bs-accordion-group/bs-accordion-group.js

@@ -35,7 +35,7 @@ export class BsAccordionGroup {
         }
     }
     render() {
-        return (h("div", { key: '6424b834f6d3b9a06b4cb227bf97850d7b07df97', part: "group", class: "bs-accordion-group" }, h("slot", { key: '9f1e0a012b0b240542f202f0242b09ca50c977c2' })));
+        return (h("div", { key: 'f3c43bbdb41aacc19356b37b736dbbe92dbee8c9', part: "group", class: "bs-accordion-group" }, h("slot", { key: '5ad2f89cd263163bd153473e0bae103655426588' })));
     }
     static get is() { return "bs-accordion-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-ai-disclaimer/bs-ai-disclaimer.js

@@ -25,7 +25,7 @@ import { h } from "@stencil/core";
 export class BsAiDisclaimer {
     render() {
         https: //images.unsplash.com/photo-1512917774080-9991f1c4c750?w=200&h=200&fit=crop
-         return (h("div", { key: '40d8b2e77afc19a9e7ef192e2cff44e6589dd693', class: "bs-ai-disclaimer" }, h("p", { key: 'a9702343421808cdbb6e6d9e3a5c6d66e7b43f8a', part: "text", class: "bs-ai-disclaimer__text" }, h("slot", { key: '62950b55efe5c08769790c095c2ed3a082a36201' }))));
+         return (h("div", { key: 'c60fa36f1340f01982c9084dcc24d875df50d33f', class: "bs-ai-disclaimer" }, h("p", { key: '19d76fe258f68e2e0e2a0f7f22a6775c7522cef0', part: "text", class: "bs-ai-disclaimer__text" }, h("slot", { key: '66861e47f7da39e0b1e162d327dedf0d57fcaf2f' }))));
     }
     static get is() { return "bs-ai-disclaimer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-ai-greeting/bs-ai-greeting.js

@@ -43,7 +43,7 @@ export class BsAiGreeting {
         const subtext = this.productName
             ? `How can I help you with ${this.productName} today?`
             : 'How can I help you today?';
-        return (h("div", { key: 'b9a60d4da5d2a8bf7564e405c5c8856ef18db3a0', class: "bs-ai-greeting" }, h("div", { key: 'ef9a401361f1c360f78e7de73027b4572054c88f', part: "heading", class: "bs-ai-greeting__heading" }, h("p", { key: '358ee1dceb08dd256283fa2a413c7d9bfae502ec', class: "bs-ai-greeting__heading-line" }, "Hi. I'm ", this.assistantName, ","), h("p", { key: '752c4c2c7824c75a239f82dc5e6f3075b629d654', class: "bs-ai-greeting__heading-line" }, "your AI assistant.")), h("p", { key: 'b4a78b43e7b0b073b67069e223124e022efe611e', part: "subtext", class: "bs-ai-greeting__subtext" }, subtext)));
+        return (h("div", { key: '1044390f82275f2ece3242201178e5fbe3dd0f83', class: "bs-ai-greeting" }, h("div", { key: '338a57a7ed4aae16d0210ad322b3dd14e4ae3c45', part: "heading", class: "bs-ai-greeting__heading" }, h("p", { key: '9aec512708b3ec838992af2e84911331e600def7', class: "bs-ai-greeting__heading-line" }, "Hi. I'm ", this.assistantName, ","), h("p", { key: 'ab23bbb5b65532320cad671818202fc8acebba46', class: "bs-ai-greeting__heading-line" }, "your AI assistant.")), h("p", { key: '1d4b83012beb32bedcf48de15461179e8bd7eca8', part: "subtext", class: "bs-ai-greeting__subtext" }, subtext)));
     }
     static get is() { return "bs-ai-greeting"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-ai-thinking/bs-ai-thinking.js

@@ -29,7 +29,7 @@ export class BsAiThinking {
     /** The status text shown next to the icon, e.g. "Retrieving", "Thinking", "Searching". */
     label = 'Thinking';
     render() {
-        return (h("div", { key: '4d30265a3514c027259e7552abc31bbe44b2408c', class: "bs-ai-thinking", role: "status", "aria-live": "polite" }, h("img", { key: 'a46bdd8751c55e9f06dc7ae5ec88a15e65ba0502', part: "icon", class: "bs-ai-thinking__icon", src: GENIE_MARK_ICON, alt: "", "aria-hidden": "true" }), h("span", { key: '970d16be73ab87b7a62efdde4a37a795dfb57b73', part: "label", class: "bs-ai-thinking__label" }, this.label)));
+        return (h("div", { key: '86329576f183a586c2cedfcfe6d5ddb76d37ed25', class: "bs-ai-thinking", role: "status", "aria-live": "polite" }, h("img", { key: '5d56adc7f23efb232569765b3cf3529859bd4035', part: "icon", class: "bs-ai-thinking__icon", src: GENIE_MARK_ICON, alt: "", "aria-hidden": "true" }), h("span", { key: 'abd1bb6e0adf31a1ddc74bbbf08d3f0128aa0ae4', part: "label", class: "bs-ai-thinking__label" }, this.label)));
     }
     static get is() { return "bs-ai-thinking"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-app-recent-item/bs-app-recent-item.js

@@ -63,10 +63,10 @@ export class BsAppRecentItem {
             onClick: this.onClick,
         };
         const body = [
-            h("bs-icon-tile", { key: '40dc2e9a479cc0e8bf897776efbb6c9562e59397', part: "icon", class: "bs-app-recent-item__icon", size: "md" }, this.icon ? h("span", { class: "bs-app-recent-item__glyph", style: { '--bs-app-recent-item-glyph': `url(${JSON.stringify(this.icon)})` } }) : h("slot", null)),
-            h("span", { key: 'e41fab5b55dd1c678853adbdc759d256d2d7e295', class: "bs-app-recent-item__text" }, h("span", { key: '0592bd9f18ab68d112a49421e34a04a61dbfc75c', part: "name", class: "bs-app-recent-item__name" }, this.name), this.description && (h("span", { key: 'fd6f0cc5b13b4c1fabb537588a22e23312f8d013', part: "description", class: "bs-app-recent-item__description" }, this.description))),
+            h("bs-icon-tile", { key: '25195db69c69ce67d0679a08ae8747829ceded31', part: "icon", class: "bs-app-recent-item__icon", size: "md" }, this.icon ? h("span", { class: "bs-app-recent-item__glyph", style: { '--bs-app-recent-item-glyph': `url(${JSON.stringify(this.icon)})` } }) : h("slot", null)),
+            h("span", { key: 'ef11e62cab8201965e9d8c0d6f2afbc520b11af8', class: "bs-app-recent-item__text" }, h("span", { key: 'fad916fcc805b11e1659aa6885aa38651c99f1d3', part: "name", class: "bs-app-recent-item__name" }, this.name), this.description && (h("span", { key: 'e4b5d5c3f944b47de6637db714e661ad6df9735f', part: "description", class: "bs-app-recent-item__description" }, this.description))),
         ];
-        return (h("button", { key: '251c32943d99ff2580c16df173609b821dd1992d', ...common, type: "button" }, body));
+        return (h("button", { key: '8fe690965c53eea77a004123ecdddec7f1172e42', ...common, type: "button" }, body));
     }
     static get is() { return "bs-app-recent-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-app-shell/bs-app-shell.js

@@ -38,7 +38,7 @@ export class BsAppShell {
     /** When true the host is `height: 100%`; when false it is content-sized with `min-height: 100vh`. */
     fullHeight = true;
     render() {
-        return (h("div", { key: 'e81aecf9ac19aff77ce4f6024bb48d051a9240a7', class: "bs-app-shell", part: "container" }, h("div", { key: '3bd113852f0db029d2515d9fe88292746e85764f', class: "bs-app-shell__header", part: "header" }, h("slot", { key: 'a538e654c63deb0bc3ad6075fc85ecde683e7587', name: "header" })), h("div", { key: '3b36be978c2db51d44fa807799e96aadc082fb77', class: "bs-app-shell__navigation", part: "navigation" }, h("slot", { key: 'eb74b091c1810fd6f981b3d1b553a17f01d9d3fc', name: "navigation" })), h("main", { key: 'f822e4277e77ec40d66e9ae49cf4bbf812c49ff3', class: "bs-app-shell__main", part: "main" }, h("slot", { key: '5fc343fcbfb1ed1e058ce27ca7be2d518b911927' })), h("div", { key: 'cee504b33b4cb5b4c38d3c4e61da8f31277fb865', class: "bs-app-shell__aside", part: "aside" }, h("slot", { key: '1c7cb896f2b9ef2b7aeccc5ed0b14c9c1317218c', name: "aside" }))));
+        return (h("div", { key: 'ff8c3b56c5ef688cc6c0ea56506ff11276e8d3e3', class: "bs-app-shell", part: "container" }, h("div", { key: 'd5774240964b2983194a2159a0a1144a21a6d283', class: "bs-app-shell__header", part: "header" }, h("slot", { key: '277a167b2f8bedde05303de0c40d3eba2ca2d991', name: "header" })), h("div", { key: '239b9188f0d433fead73cbef56adf4c2814481e8', class: "bs-app-shell__navigation", part: "navigation" }, h("slot", { key: '40ae1bad1999bc8d7ab42fd3d42871a5ca6f7e6f', name: "navigation" })), h("main", { key: '4ac23628e313bce91c8ba91b988cef538561d5db', class: "bs-app-shell__main", part: "main" }, h("slot", { key: '33b33785532d89474eaba090fdb4dc46975f0e2b' })), h("div", { key: '5b746ae7fb368233c68cc67f983b34229d5103d1', class: "bs-app-shell__aside", part: "aside" }, h("slot", { key: 'c68ae0b5809ad6ea9e4f02e0bdb9364e0ccc914b', name: "aside" }))));
     }
     static get is() { return "bs-app-shell"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-app-switcher/bs-app-switcher.js

@@ -235,7 +235,7 @@ export class BsAppSwitcher {
     }
     render() {
         const headingId = `${this.id}-heading`;
-        return (h("bs-card", { key: 'eca37058ac18a9a7faa40caa37aa2291503753c2', part: "panel", class: "bs-app-switcher", surface: "base", role: "region", "aria-labelledby": headingId }, h("div", { key: 'bd0ec6ec6d065d09a6854cd7f93314963d94fcb5', part: "header", class: "bs-app-switcher__header" }, h("h2", { key: '8aa69807c51467c75627e20cad79caad6b42505d', part: "heading", id: headingId, class: "bs-app-switcher__heading" }, this.heading), this.renderLink('manage', 'bs-app-switcher__manage', this.manageHref, this.manageLabel, () => this.bsManage.emit())), h("bs-divider", { key: '1cb1791cf9ab0eb09b772bcb53bb42cf8457c882', decorative: true }), this.renderBody(), h("bs-divider", { key: 'cf069a35387e0c5263f391278b962a464835414b', decorative: true }), h("div", { key: '16764053a5b74e6afb90bf29e27cc76e107c8e4a', part: "footer", class: "bs-app-switcher__footer" }, this.renderLink('browse', 'bs-app-switcher__browse', this.browseHref, this.browseLabel, () => this.bsBrowseAll.emit(), h("svg", { class: "bs-app-switcher__external", ...svgProps }, h("path", { d: "M7 17 17 7M8 7h9v9" })))), h("span", { key: '943b9d2acca5e67fa8ff481bcf381c3bf9842641', class: "bs-app-switcher__live", role: "status" }, this.liveText())));
+        return (h("bs-card", { key: '8257b65b618a40aa48c5e4e6ea464cd0e730b822', part: "panel", class: "bs-app-switcher", surface: "base", role: "region", "aria-labelledby": headingId }, h("div", { key: '99756a738b6954a8f6d6b4dae25115d9ba132be2', part: "header", class: "bs-app-switcher__header" }, h("h2", { key: '61ac20db2636acdf82c495e4aa1afaad047e5241', part: "heading", id: headingId, class: "bs-app-switcher__heading" }, this.heading), this.renderLink('manage', 'bs-app-switcher__manage', this.manageHref, this.manageLabel, () => this.bsManage.emit())), h("bs-divider", { key: 'f68ea80899a97f097dd26a4d4ff311a0c958c7a9', decorative: true }), this.renderBody(), h("bs-divider", { key: '05db5ca0047deb646a0b0bf68afec0663e7b132f', decorative: true }), h("div", { key: 'b32e86a8ba520756bce064384502f4ce71ada4ba', part: "footer", class: "bs-app-switcher__footer" }, this.renderLink('browse', 'bs-app-switcher__browse', this.browseHref, this.browseLabel, () => this.bsBrowseAll.emit(), h("svg", { class: "bs-app-switcher__external", ...svgProps }, h("path", { d: "M7 17 17 7M8 7h9v9" })))), h("span", { key: '1de45b23ef4e79e1b7af1f438304260f264e0489', class: "bs-app-switcher__live", role: "status" }, this.liveText())));
     }
     static get is() { return "bs-app-switcher"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-app-tile/bs-app-tile.js

@@ -62,10 +62,10 @@ export class BsAppTile {
             onClick: this.onClick,
         };
         const body = [
-            h("bs-icon-tile", { key: '712e5209c8201201fd6e61ced1f6f53aeebe0a6c', part: "icon", class: "bs-app-tile__icon", size: this.size === 'grid' ? 'lg' : 'md' }, this.icon ? h("span", { class: "bs-app-tile__glyph", style: { '--bs-app-tile-glyph': `url(${JSON.stringify(this.icon)})` } }) : h("slot", null)),
-            h("span", { key: '65eca3956b52fd13a3d3994f189dbc4a56fdc0ba', part: "label", class: "bs-app-tile__label" }, this.name),
+            h("bs-icon-tile", { key: '6404044d9a208e22f557cb71fbfdfc91c78b3b0c', part: "icon", class: "bs-app-tile__icon", size: this.size === 'grid' ? 'lg' : 'md' }, this.icon ? h("span", { class: "bs-app-tile__glyph", style: { '--bs-app-tile-glyph': `url(${JSON.stringify(this.icon)})` } }) : h("slot", null)),
+            h("span", { key: '0bb976f0b075ad63f52cd9f07fe541bc826a69cd', part: "label", class: "bs-app-tile__label" }, this.name),
         ];
-        return (h("button", { key: 'ff6a0f97191dadd903f8b49bc4090e4665a0b591', ...common, type: "button" }, body));
+        return (h("button", { key: 'c6dc2a317c93fd4fa2c39a42d6c194e1345c4720', ...common, type: "button" }, body));
     }
     static get is() { return "bs-app-tile"; }
     static get encapsulation() { return "shadow"; }

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

@@ -54,7 +54,7 @@ export class BsAttachment {
     };
     render() {
         const isImage = this.type === 'image';
-        return (h("div", { key: '1b70040e8fc2199fed52e81d97701199ed060900', class: { 'bs-attachment': true, 'bs-attachment--loading': this.loading }, "aria-busy": this.loading ? 'true' : 'false' }, isImage ? this.renderImage() : this.renderCard(), this.removable && (h("bs-icon-button", { key: '7fcb8dcc715c2439ce62219e693fc416025b1359', part: "remove", class: "bs-attachment__remove", size: "xs", variant: "neutral", ariaLabel: `${this.removeLabel}: ${this.fileName}`, onClick: this.onRemoveClick }, h(CloseIcon, { key: 'c9fc3e64c2b1ef2e9ec4c3d5dcb20aebea4950e4' })))));
+        return (h("div", { key: '397e7570d4765a1e4dfb410666c0fb0b78c06686', class: { 'bs-attachment': true, 'bs-attachment--loading': this.loading }, "aria-busy": this.loading ? 'true' : 'false' }, isImage ? this.renderImage() : this.renderCard(), this.removable && (h("bs-icon-button", { key: '738b5e3dbf1e2b0856bb20dc5eb3027d1cd87ef5', part: "remove", class: "bs-attachment__remove", size: "xs", variant: "neutral", ariaLabel: `${this.removeLabel}: ${this.fileName}`, onClick: this.onRemoveClick }, h(CloseIcon, { key: 'd21c9d3832f170c5af2d01e2d76b83be3acd3da7' })))));
     }
     renderImage() {
         return (h("div", { part: "thumbnail", class: "bs-attachment__thumbnail" }, h("img", { class: "bs-attachment__image", src: this.imageSrc, alt: this.imageAlt }), this.loading && h(Spinner, { class: "bs-attachment__spinner bs-attachment__spinner--overlay", size: 16, label: this.uploadingLabel })));

package/dist/collection/components/bs-attachment-list/bs-attachment-list.js

@@ -58,7 +58,7 @@ export class BsAttachmentList {
         this.canScrollRight = row.scrollWidth - row.clientWidth - row.scrollLeft > 1;
     };
     render() {
-        return (h("div", { key: '437edaeda096e7ba3617040279b8eb5c79c6aa33', class: "bs-attachment-list" }, h("div", { key: 'a09ccfec9b8f9fe3d08e0d6a13d190307fe6bf69', part: "row", class: "bs-attachment-list__row", ref: el => (this.row = el), onScroll: this.onScroll, role: "group", "aria-label": this.ariaLabel, tabIndex: 0 }, h("slot", { key: 'c64a44ba2710dac5d8cb3ff80ee519354dfd44af', onSlotchange: this.onSlotchange })), this.canScrollRight && h("div", { key: 'da532064127af89debc42d5c3af870e35aa3fed0', part: "fade", class: "bs-attachment-list__fade", "aria-hidden": "true" })));
+        return (h("div", { key: 'c01982051a8914fcaede14e787f362a4f82a317d', class: "bs-attachment-list" }, h("div", { key: '9475c8aa5dec12ed9356f72326bdc4ab215576d5', part: "row", class: "bs-attachment-list__row", ref: el => (this.row = el), onScroll: this.onScroll, role: "group", "aria-label": this.ariaLabel, tabIndex: 0 }, h("slot", { key: '85db80cf4422334d291377e5cc7390f69e014676', onSlotchange: this.onSlotchange })), this.canScrollRight && h("div", { key: 'a8659966ec3fd0a128a9e4b5d40ff7121b919172', part: "fade", class: "bs-attachment-list__fade", "aria-hidden": "true" })));
     }
     static get is() { return "bs-attachment-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -17,7 +17,7 @@ export class BsBadge {
     /** Maps directly to the brandsync-tokens `--bs-badge-bg-*` / `--bs-badge-text-*` sets. */
     variant = 'default';
     render() {
-        return (h("span", { key: '12d18ea63d62468cede43efaddbf1d4a707c31be', part: "container", class: `bs-badge bs-badge--${this.variant}` }, h("slot", { key: '7418716533cf907da4b9cd05a01aaea69e257425' })));
+        return (h("span", { key: 'e81df8a115da1e47eec003565f06f7d8f2bce24a', part: "container", class: `bs-badge bs-badge--${this.variant}` }, h("slot", { key: '112b68af29d688640aace037db5f9d786956d264' })));
     }
     static get is() { return "bs-badge"; }
     static get encapsulation() { return "shadow"; }

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

@@ -59,7 +59,7 @@ export class BsBreadcrumb {
             ev.preventDefault();
     };
     render() {
-        return (h(Host, { key: '4bab1e3218264a8c97ccb1b9df4d0bf66fe8a4c7', role: "listitem" }, h("span", { key: '1012f764261168bb246e4fef76b1988b70cd290c', part: "separator", class: "bs-breadcrumb__separator", "aria-hidden": "true" }, h(CaretRightIcon, { key: 'b37d81c4bfd0313fb313b862e194ca30950ee839' })), this.current ? (h("span", { part: "current", class: "bs-breadcrumb__current", "aria-current": "page" }, h("slot", null))) : this.href ? (h("a", { part: "link", class: "bs-breadcrumb__link", href: this.href, onClick: this.onLinkClick }, h("slot", null))) : (h("span", { part: "link", class: "bs-breadcrumb__link" }, h("slot", null)))));
+        return (h(Host, { key: 'b6d483d8dd99cda45b49bfc488aeec3514e3b234', role: "listitem" }, h("span", { key: '2dd5b9265590a43403f22830d34c1c7c4815927e', part: "separator", class: "bs-breadcrumb__separator", "aria-hidden": "true" }, h(CaretRightIcon, { key: '7178d1170e8fbdde1281514ac6916bf1e7561e7b' })), this.current ? (h("span", { part: "current", class: "bs-breadcrumb__current", "aria-current": "page" }, h("slot", null))) : this.href ? (h("a", { part: "link", class: "bs-breadcrumb__link", href: this.href, onClick: this.onLinkClick }, h("slot", null))) : (h("span", { part: "link", class: "bs-breadcrumb__link" }, h("slot", null)))));
     }
     static get is() { return "bs-breadcrumb"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-breadcrumb/bs-breadcrumb-overflow/bs-breadcrumb-overflow.js

@@ -88,7 +88,7 @@ export class BsBreadcrumbOverflow {
         }
     }
     render() {
-        return (h(Host, { key: 'e4c2c1cf0601cff0d084fef4f295ad09ef6c3643', role: "listitem" }, h("span", { key: 'a085ee9e9d41e5836cb60ccada98a357ba2ba264', part: "separator", class: "bs-breadcrumb-overflow__separator", "aria-hidden": "true" }, h(CaretRightIcon, { key: '59685abc8d64a821f812f365c4ebd64ba1450ef6' })), h("span", { key: '357986825b4f2fcb6af583c031ce8190606df118', class: "bs-breadcrumb-overflow__wrapper" }, h("button", { key: '2f10d676681ee442dc66703b8a838b40c8b71a91', type: "button", part: "ellipsis", class: "bs-breadcrumb-overflow__ellipsis", "aria-haspopup": "menu", "aria-expanded": String(this.open), "aria-label": this.overflowLabel, onClick: this.onEllipsisToggle }, h(DotsThreeIcon, { key: '1a74b819b245fb62fb2599acc3ff458eac024e52' })), this.open && this.items.length > 0 && (h("bs-menu", { key: 'c8e57092e8396da8a7d8157eae69022154050075', part: "menu", class: "bs-breadcrumb-overflow__menu" }, this.items.map(item => item.href ? (h("a", { part: "link", class: "bs-breadcrumb-overflow__link", href: item.href, onClick: this.onItemClick(item.href) }, item.label)) : (h("span", { part: "link", class: "bs-breadcrumb-overflow__link" }, item.label))))))));
+        return (h(Host, { key: '8b47ed9e6346d813bf2db5a510151027d6f2a523', role: "listitem" }, h("span", { key: '7eb3b681a555c1bf07b16c34c8e7364384ecb3d2', part: "separator", class: "bs-breadcrumb-overflow__separator", "aria-hidden": "true" }, h(CaretRightIcon, { key: '4bd4ced37d1a24b37f507b53b7b6c0fe8f577de7' })), h("span", { key: '03f6ff9300d53bcbddf6d8fb57ed08a85fe9e67b', class: "bs-breadcrumb-overflow__wrapper" }, h("button", { key: '9b0fb0cfc28ccffbfe54dffc8a5612d1c83b27f5', type: "button", part: "ellipsis", class: "bs-breadcrumb-overflow__ellipsis", "aria-haspopup": "menu", "aria-expanded": String(this.open), "aria-label": this.overflowLabel, onClick: this.onEllipsisToggle }, h(DotsThreeIcon, { key: '932b86a682c495b1acc47cd703294c5b2dbf3c03' })), this.open && this.items.length > 0 && (h("bs-menu", { key: '809bbfe99843c3e531ee2e620a5adca4c66360d9', part: "menu", class: "bs-breadcrumb-overflow__menu" }, this.items.map(item => item.href ? (h("a", { part: "link", class: "bs-breadcrumb-overflow__link", href: item.href, onClick: this.onItemClick(item.href) }, item.label)) : (h("span", { part: "link", class: "bs-breadcrumb-overflow__link" }, item.label))))))));
     }
     static get is() { return "bs-breadcrumb-overflow"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-breadcrumb/bs-breadcrumbs/bs-breadcrumbs.js

@@ -54,7 +54,7 @@ export class BsBreadcrumbs {
         });
     }
     render() {
-        return (h("nav", { key: '8e8c96763ed36fcbf87fcd8fa348c294cad89096', "aria-label": this.label }, h("ol", { key: 'aae3d390d6ddc68fba3e2ef96bfb57160715fc95', part: "list", class: "bs-breadcrumbs__list" }, h("slot", { key: '2edfd750dcb70d9fd9bec01ac42ad52c79dc3a34', onSlotchange: this.onSlotChange }))));
+        return (h("nav", { key: '6df966694de1f681033e8705c536c983faa1155c', "aria-label": this.label }, h("ol", { key: '61d5e7cf39bbee670f49bbc8340df75057919431', part: "list", class: "bs-breadcrumbs__list" }, h("slot", { key: '12ac9fccdb05ecf029e8eeaaa98065272945341b', onSlotchange: this.onSlotChange }))));
     }
     static get is() { return "bs-breadcrumbs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -133,3 +133,15 @@ describe('bs-button', () => {
         });
     });
 });
+describe('bs-button ripple', () => {
+    it('contains a bs-ripple, centered only when icon-only', async () => {
+        const { root } = await render(h("bs-button", null, "Save"));
+        const ripple = root.shadowRoot.querySelector('bs-ripple');
+        expect(ripple).not.toBeNull();
+        expect(ripple.centered).toBe(false);
+    });
+    it('passes disabled through to the ripple', async () => {
+        const { root } = await render(h("bs-button", { disabled: true }, "Save"));
+        expect(root.shadowRoot.querySelector('bs-ripple').disabled).toBe(true);
+    });
+});

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

@@ -79,6 +79,8 @@
      Every variant's label actually uses the regular weight. */
   font-weight: var(--bs-font-weight-regular);
   cursor: pointer;
+  /* Containing block for the absolutely-positioned bs-ripple layer. */
+  position: relative;
   transition: background-color var(--bs-duration-fast, 120ms) var(--bs-easing-standard, ease);
 }
 

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

@@ -18,8 +18,11 @@ import { h } from "@stencil/core";
  *   it for actions that actually delete/revoke/undo something.
  *
  * @slot - Default slot: the button's label content.
+ * Built from: `bs-ripple` (press feedback).
+ *
  * @slot icon - Optional leading icon, rendered before the label.
  * @slot end-icon - Optional trailing icon, rendered after the label.
+ * @part ripple - The press-ripple layer (a `bs-ripple`). Tune it with `bs-button::part(ripple) { --bs-ripple-color: ...; }` (also `--bs-ripple-opacity`, `--bs-ripple-duration`).
  * @part icon - The icon wrapper element.
  * @part label - The text label element.
  * @part end-icon - The trailing icon wrapper element.
@@ -119,7 +122,7 @@ export class BsButton {
     };
     render() {
         const iconOnly = (this.hasIcon || this.hasEndIcon) && !this.hasLabel;
-        return (h("button", { key: 'd9339f3df9872d414b8252dd6dbccb897ffd3bdb', class: `bs-button bs-button--${this.variant} bs-button--${this.size} ${iconOnly ? 'bs-button--icon-only' : ''} ${this.hasIcon && !iconOnly ? 'bs-button--has-icon' : ''} ${this.hasEndIcon && !iconOnly ? 'bs-button--has-end-icon' : ''}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel, onClick: this.onClick }, h("span", { key: '4744ade682f1bc2e18a63a598aa4cfc3f6b5d028', part: "icon", class: `bs-button__icon ${this.hasIcon ? 'bs-button__icon--visible' : ''}` }, h("slot", { key: '9cddc004d35fdf9c621691138388f1ecb3b401e0', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '71ae5f7a5f8ff9b311bf69f0da7d449430d026a3', part: "label", class: "bs-button__label" }, h("slot", { key: 'bf0ab3a00d3584ba29c30a1b9e5efc64e53f9df5', onSlotchange: this.onLabelSlotchange })), h("span", { key: '1b6fc4b65cc067d75aaaf2022b9053a48d19aa83', part: "end-icon", class: `bs-button__end-icon ${this.hasEndIcon ? 'bs-button__end-icon--visible' : ''}` }, h("slot", { key: '5a3fc614a61fb7f2dbc595b6ab8e15a26028ea75', name: "end-icon", onSlotchange: this.onEndIconSlotchange }))));
+        return (h("button", { key: '498371cb1db28a17e668275a5e3dab6a093ce932', class: `bs-button bs-button--${this.variant} bs-button--${this.size} ${iconOnly ? 'bs-button--icon-only' : ''} ${this.hasIcon && !iconOnly ? 'bs-button--has-icon' : ''} ${this.hasEndIcon && !iconOnly ? 'bs-button--has-end-icon' : ''}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel, onClick: this.onClick }, h("bs-ripple", { key: '1d985ad61540f85cc47332f876eda6efcef5b87a', part: "ripple", centered: iconOnly, disabled: this.disabled }), h("span", { key: 'fbf28591ab62369e0a1a7b32da670cd350aee122', part: "icon", class: `bs-button__icon ${this.hasIcon ? 'bs-button__icon--visible' : ''}` }, h("slot", { key: '294540047c366c6f8576c8123f64f55c712d6335', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '8536c25dab900331235dba703350ff57fd7c8ff6', part: "label", class: "bs-button__label" }, h("slot", { key: '59cdb689925c55ec90c34a016e586f5be95f38e4', onSlotchange: this.onLabelSlotchange })), h("span", { key: '0976f3628408ccccec017b8e09b5a41016f0b516', part: "end-icon", class: `bs-button__end-icon ${this.hasEndIcon ? 'bs-button__end-icon--visible' : ''}` }, h("slot", { key: '40a1f6d3faf5f4ae39e9da0aa0027207afe3e7a1', name: "end-icon", onSlotchange: this.onEndIconSlotchange }))));
     }
     static get is() { return "bs-button"; }
     static get encapsulation() { return "shadow"; }

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
@@ -69,7 +70,7 @@ export class BsIconButton {
             form.reset();
     };
     render() {
-        return (h("button", { key: 'e04c7785712f0f9a2bfaa0efd51712d7c6ca805e', 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("span", { key: '2b9cfb3af8b3914ee88a3244c3d1f102cbae7082', part: "icon", class: "bs-icon-button__icon" }, h("slot", { key: 'b561552aece8e0f8ae83dd6619295e5c9477aa89' }))));
+        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"; }

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: 'ba65829a03b8c34ec0f42b157626e5869978d3bf', 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: 'be681abe6454f6f0ef03ec8ef05f2ef7e036b2fb', part: "container", class: `bs-card bs-card--${this.surface}` }, h("div", { key: '94fcc1a41307d29cd6e3d1c0db68e4ad56f76e66', part: "image", class: `bs-card__image ${this.hasImage ? 'bs-card__image--visible' : ''}` }, h("slot", { key: 'fa2441f597664fcfb1920f7f6b6d81cebb33c3cf', name: "image", onSlotchange: this.onImageSlotchange })), h("div", { key: 'f45578aeab67c531e3f1066788b646464e4ee5a3', class: "bs-card__content" }, h("div", { key: '44bc9e76ebb151099736e73fac2eea1e5baba014', part: "header", class: "bs-card__header" }, h("slot", { key: '58f766725dd1bd81aa4a5f5fa1da2626fd705582', name: "header" })), h("div", { key: '8ee2df46d6a643e0f7d13ec875a363b4ef714b00', part: "body", class: "bs-card__body" }, h("slot", { key: '8c47ca1e2acffbc952cf15a0518c3ca2d640fe58' })), h("div", { key: 'de5856f9b0a72cd42345320fbdd2a290640039d7', part: "footer", class: "bs-card__footer" }, h("slot", { key: '982cee8e6fb70228faf2cd7a55312ef690bd23a2', 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 {