@brandsync/wc 1.3.0 → 1.5.0

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

@@ -25,8 +25,10 @@
  * @prop --bs-icon-button-subtle-hover: Background, variant="subtle", hover. Aliased to --bs-color-neutral-container.
  * @prop --bs-icon-button-subtle-pressed: Background, variant="subtle", pressed. Aliased to --bs-color-neutral-container-pressed.
  * @prop --bs-icon-button-subtle-focus: Focus ring color, variant="subtle". Aliased to --bs-border-primary-focus.
- * @prop --bs-icon-button-outlined-border: Border color, variant="outlined", default. Aliased to --bs-border-primary.
- * @prop --bs-icon-button-outlined-border-hover: Border color, variant="outlined", hover/pressed. Aliased to --bs-border-primary-hover.
+ * @prop --bs-icon-button-outlined-border: Border color, variant="outlined", default. Aliased to --bs-color-primary-default.
+ * @prop --bs-icon-button-outlined-border-hover: Border color, variant="outlined", hover. Aliased to --bs-color-primary-hover.
+ * @prop --bs-icon-button-outlined-border-pressed: Border color, variant="outlined", pressed. Aliased to --bs-color-primary-pressed.
+ * @prop --bs-icon-button-outlined-text-hover: Icon color, variant="outlined", hover/pressed. Aliased to --bs-text-action-hover.
  * @prop --bs-icon-button-outlined-container: Background, variant="outlined", hover/pressed. Aliased to --bs-color-primary-container.
  * @prop --bs-icon-button-outlined-focus: Focus ring color, variant="outlined". Aliased to --bs-border-primary-focus.
  * @prop --bs-icon-button-success-default: Background, variant="success", default. Aliased to --bs-color-success-default.
@@ -94,8 +96,13 @@
   --bs-icon-button-subtle-pressed: var(--bs-color-neutral-container-pressed);
   --bs-icon-button-subtle-focus: var(--bs-border-primary-focus);
 
-  --bs-icon-button-outlined-border: var(--bs-border-primary);
-  --bs-icon-button-outlined-border-hover: var(--bs-border-primary-hover);
+  /* Verified against Figma node 2842:50233/50230/50227/50224 (bs-button's Style=Outline states) --
+     border/text colors step through brand-600 -> 700 -> 800 across enabled -> hover -> pressed,
+     matching the fix applied to bs-button's own outlined variant. */
+  --bs-icon-button-outlined-border: var(--bs-color-primary-default);
+  --bs-icon-button-outlined-border-hover: var(--bs-color-primary-hover);
+  --bs-icon-button-outlined-border-pressed: var(--bs-color-primary-pressed);
+  --bs-icon-button-outlined-text-hover: var(--bs-text-action-hover);
   --bs-icon-button-outlined-container: var(--bs-color-primary-container);
   --bs-icon-button-outlined-focus: var(--bs-border-primary-focus);
 
@@ -326,16 +333,17 @@
 .bs-icon-button--outlined {
   background: transparent;
   color: var(--bs-color-primary-default);
-  border: 1.5px solid var(--bs-icon-button-outlined-border);
+  border: 1px solid var(--bs-icon-button-outlined-border);
 }
 .bs-icon-button--outlined:hover:not(:disabled) {
   background: var(--bs-icon-button-outlined-container);
   border-color: var(--bs-icon-button-outlined-border-hover);
+  color: var(--bs-icon-button-outlined-text-hover);
 }
 .bs-icon-button--outlined:active:not(:disabled) {
   background: var(--bs-icon-button-outlined-container);
-  color: var(--bs-color-primary-pressed);
-  border-color: var(--bs-icon-button-outlined-border-hover);
+  color: var(--bs-icon-button-outlined-text-hover);
+  border-color: var(--bs-icon-button-outlined-border-pressed);
 }
 .bs-icon-button--outlined:disabled {
   opacity: var(--bs-opacity-disabled);

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

@@ -50,7 +50,7 @@ export class BsIconButton {
      */
     ariaLabel = null;
     render() {
-        return (h("button", { key: '59709048e7339610a80a8c19ee55276d420a21db', class: `bs-icon-button bs-icon-button--${this.variant} bs-icon-button--${this.size}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel }, h("span", { key: '008f553d50091ba49f568d82de27a35871b9a66d', part: "icon", class: "bs-icon-button__icon" }, h("slot", { key: '5365a00665a7de5a64af0793862552a1057ac110' }))));
+        return (h("button", { key: '86ddd0f1ff23372e205035ac1273a6b90a779855', class: `bs-icon-button bs-icon-button--${this.variant} bs-icon-button--${this.size}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel }, h("span", { key: 'f45944557ce068283c394e6a48fbc0f56087fbd9', part: "icon", class: "bs-icon-button__icon" }, h("slot", { key: 'ed067830c7f465099edbf40401b0e3ec6fb1e1c9' }))));
     }
     static get is() { return "bs-icon-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -25,7 +25,7 @@ export class BsButtonSkeleton {
     /** Sizing scale, matching the `bs-button` size it stands in for. */
     size = 'md';
     render() {
-        return h("span", { key: '4a08242dee8f135807ce7f73433db4ca83d16711', part: "container", class: `bs-button-skeleton bs-button-skeleton--${this.size}`, role: "status", "aria-label": "Loading" });
+        return h("span", { key: 'bc4e9d282c745bfacede27fbeae7dfc8ea5d7aed', part: "container", class: `bs-button-skeleton bs-button-skeleton--${this.size}`, role: "status", "aria-label": "Loading" });
     }
     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: '0662903c6a1d7132865b2d6cbacd2d4f106101fc', part: "container", class: `bs-card bs-card--${this.surface}` }, h("div", { key: 'ba7637d19b11d05241f64a6314a8cdeb846be488', part: "image", class: `bs-card__image ${this.hasImage ? 'bs-card__image--visible' : ''}` }, h("slot", { key: '5b4d49a64af886cb19c0142aedb615d4c96e1d77', name: "image", onSlotchange: this.onImageSlotchange })), h("div", { key: 'd98c200c1bc2772f33ee8c0c5029761d464d656d', class: "bs-card__content" }, h("div", { key: '7e80e6809aad33f9919c1b14f86bad18c4602250', part: "header", class: "bs-card__header" }, h("slot", { key: '5daf62af5d08c31a51ad5ca0cc186ca60a92a0ef', name: "header" })), h("div", { key: 'feb18f2cf8c9fcb99051b8b66073ec2b1b46e123', part: "body", class: "bs-card__body" }, h("slot", { key: '561ef6160b5acd92500d097f0d402c176dd81c04' })), h("div", { key: 'd5989024a37534dea720eebf483273c518a72cd3', part: "footer", class: "bs-card__footer" }, h("slot", { key: '829399f8f90c83b2ea75e063daa7afbaf5f0f8dd', name: "footer" })))));
+        return (h("div", { key: '8cad76fa0c75da73579d9c3f0c35bd53e403e206', part: "container", class: `bs-card bs-card--${this.surface}` }, h("div", { key: '0b6c4b4f1917b91c2666fe5a458f4824b2be8a45', part: "image", class: `bs-card__image ${this.hasImage ? 'bs-card__image--visible' : ''}` }, h("slot", { key: 'aa072aab27b633e7f043855d5c9dfdcdd711adcf', name: "image", onSlotchange: this.onImageSlotchange })), h("div", { key: '9c30a8c08fb8c8a312b649358fdc4d666fffeb8d', class: "bs-card__content" }, h("div", { key: '0489dbbbbb3c743d8cabe2722884a3d127cd0dc4', part: "header", class: "bs-card__header" }, h("slot", { key: '43175c6aff3313e8efbedde2e8cb344c023594ea', name: "header" })), h("div", { key: '23d4f29e1786d30ea9b63159287ed7cf139a374a', part: "body", class: "bs-card__body" }, h("slot", { key: '2e3c69ae07711b57e2e825b0ed0bd691d8e9c3b1' })), h("div", { key: 'fb0747f6bf93c25057e84551c2a0b579c7c594d3', part: "footer", class: "bs-card__footer" }, h("slot", { key: '8ef61b947e94412f113f237b55144cc216a6bad5', name: "footer" })))));
     }
     static get is() { return "bs-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -123,7 +123,7 @@ export class BsChatbotFeedback {
     }
     render() {
         const stars = [1, 2, 3, 4, 5];
-        return (h("div", { key: '70fa15615edf82f3072ce2b70f40acc26581d357', class: "bs-chatbot-feedback", role: "region", "aria-label": this.computedHeading() }, h("button", { key: 'a12a1bc4a979a341f196d1bb5c7b339b71921adb', type: "button", part: "close", class: "bs-chatbot-feedback__close", "aria-label": "Close", onClick: this.onCloseClick }, h(CloseIcon, { key: 'c43b62f1171655ceb70cc9381f48ca70ac713b42' })), h("div", { key: '478edae3eaed5bc24509dee4a5de1330609418b8', class: "bs-chatbot-feedback__top" }, h("div", { key: '5e2e27ec77d323275928d02eda1233ada161767e', class: "bs-chatbot-feedback__text" }, h("p", { key: 'b8a797d6b7ea99698d4a50d77df2c2f39b197fb5', part: "heading", class: "bs-chatbot-feedback__heading" }, this.computedHeading()), h("p", { key: '47245dbc477cad19404a44ea105a628bcfd26986', part: "subtitle", class: "bs-chatbot-feedback__subtitle" }, this.computedSubtitle())), h("div", { key: 'ff977860ca700ec52902c2fdccce2d61d026bb17', class: "bs-chatbot-feedback__stars", role: "radiogroup", "aria-label": "Rating" }, 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} star${value > 1 ? 's' : ''}`, disabled: this.submitted, onClick: () => this.onStarClick(value) }, h(StarIcon, { filled: this.rating >= value }))))), !this.submitted && (h("div", { key: 'ee1259121b2adb9d697fb44413ae98ba45ffd2fe', class: "bs-chatbot-feedback__field" }, h("label", { key: '6092b767faf76ea377a2b98752b1e544664d6d15', part: "label", class: "bs-chatbot-feedback__label", htmlFor: "bs-chatbot-feedback-comment" }, "Tell us what you think"), h("textarea", { key: '384a13781db62cf3f62b6ad06b4d6b329b320c1f', part: "textarea", id: "bs-chatbot-feedback-comment", class: "bs-chatbot-feedback__textarea", placeholder: "e.g.The response was helpful ....", value: this.comment, onInput: this.onCommentInput }))), this.submitted && this.comment && (h("p", { key: '15fddc08668bc3a74bad663f38e7217e6bc81abc', part: "comment", class: "bs-chatbot-feedback__comment" }, this.comment))), h("div", { key: 'bbedf1924f505e3ddfef44064087a22b7cf6a7fd', class: "bs-chatbot-feedback__actions" }, !this.submitted && (h("button", { key: '47a55de319cded45e550ca405c5e37f4394d51f5', type: "button", part: "submit", class: "bs-chatbot-feedback__submit", disabled: this.rating === 0, onClick: this.onSubmitClick }, h(SendIcon, { key: 'd4bc9834d37ab6988b8f28e2f4fce6e1a138c970' }), "Submit feedback")), h("button", { key: '5d33d5686b28229ebc5154287bee88410fdd7ede', 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: '8aae8a6cf36c352384879bbd791c71cea7b6adf6' }), "Start new chat"))));
+        return (h("div", { key: '6c5056134f1d6447aeda1ae857061c365fdacb4e', class: "bs-chatbot-feedback", role: "region", "aria-label": this.computedHeading() }, h("button", { key: '8d1e595b3a7967845110a98b3760562b074084e1', type: "button", part: "close", class: "bs-chatbot-feedback__close", "aria-label": "Close", onClick: this.onCloseClick }, h(CloseIcon, { key: '751dd5a8131bedb5746be7ff51c44511ebdda6ca' })), h("div", { key: 'e27641222fb536f8d942d7f0b24a1d0d1b35488d', class: "bs-chatbot-feedback__top" }, h("div", { key: 'f5dc2910630a2062bd470ad18fe15cb8fe50337f', class: "bs-chatbot-feedback__text" }, h("p", { key: '9b2302645703362eb21f864504eb223baeee9baa', part: "heading", class: "bs-chatbot-feedback__heading" }, this.computedHeading()), h("p", { key: 'e1d4790ef748ae54b35c3d8044b52c1bca06388f', part: "subtitle", class: "bs-chatbot-feedback__subtitle" }, this.computedSubtitle())), h("div", { key: '8218bd93c344643644a29669a5ec3c0f01d9f07f', class: "bs-chatbot-feedback__stars", role: "radiogroup", "aria-label": "Rating" }, 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} star${value > 1 ? 's' : ''}`, disabled: this.submitted, onClick: () => this.onStarClick(value) }, h(StarIcon, { filled: this.rating >= value }))))), !this.submitted && (h("div", { key: '66dc2fee80c61f23942b05cf0e6f7d37aba0e51c', class: "bs-chatbot-feedback__field" }, h("label", { key: '907d81ab2873fcb8545a1f6e0211ae4470cd47ea', part: "label", class: "bs-chatbot-feedback__label", htmlFor: "bs-chatbot-feedback-comment" }, "Tell us what you think"), h("textarea", { key: 'fbb611bfe9e9cf8ce26c1f6fd2b5cf6f6fe6ae94', part: "textarea", id: "bs-chatbot-feedback-comment", class: "bs-chatbot-feedback__textarea", placeholder: "e.g.The response was helpful ....", value: this.comment, onInput: this.onCommentInput }))), this.submitted && this.comment && (h("p", { key: 'edd24d5f9ffa0d615af9cf4d61fbc97e8a99e2f5', part: "comment", class: "bs-chatbot-feedback__comment" }, this.comment))), h("div", { key: 'a33f6632072258d658e66826f1a65e6fe15df00d', class: "bs-chatbot-feedback__actions" }, !this.submitted && (h("button", { key: '8fc50735381620c4b93e05d72f2045f3890f6307', type: "button", part: "submit", class: "bs-chatbot-feedback__submit", disabled: this.rating === 0, onClick: this.onSubmitClick }, h(SendIcon, { key: '3fce1f0219ee83a209f0eafa7a427349b6d00d7b' }), "Submit feedback")), h("button", { key: 'f0e4a2cb9115e513506248812ae025772e7b3b2b', 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: '18ed5c41bc2fcfff8ea8505d3c893ae7f9fb3a81' }), "Start new chat"))));
     }
     static get is() { return "bs-chatbot-feedback"; }
     static get encapsulation() { return "shadow"; }

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

@@ -74,7 +74,7 @@ export class BsChatbotHeader {
         this.bsClose.emit();
     };
     render() {
-        return (h("div", { key: '7e7f71caf75675cce3f178bc4fa9e0a3d53aa812', class: "bs-chatbot-header", role: "banner", "aria-label": this.heading }, h("div", { key: '0ea7c7057d12cfb1ad1824266cbd4d973d3fce38', part: "logo", class: "bs-chatbot-header__logo", role: "img", "aria-label": this.heading, innerHTML: GENIE_LOGO_SVG }), h("div", { key: '6ba043cbd01052d028bcd45ef69d35f3b7e666e4', class: "bs-chatbot-header__actions" }, h("span", { key: '08cb7c189fb35039de90fa230058e8a445661f99', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'e2b1ac039f0ae5e50cadd61c423653442f5ad728', type: "button", part: "new-chat", class: "bs-chatbot-header__button", "aria-label": "New chat", onClick: this.onNewChatClick }, h("slot", { key: 'e7e4830b66fcf8d0c2dd85534e040e92f104b3eb', name: "new-chat-icon" }, h(NewChatIcon, { key: '238d9446d2f77c35a3e990e753bbb7cafc96e037' }))), h("bs-tooltip", { key: 'af242e0e02fb8d03aaa4e3e39827b4213bffdfc1', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "New chat")), h("span", { key: '939bbe2882807f0d3fc45d3e3e0dbf28771d8312', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '858d8efa957530d463688e7fbfa610ab034a9337', type: "button", part: "history", class: "bs-chatbot-header__button", "aria-label": "History", onClick: this.onHistoryClick }, h("slot", { key: '6f62828c4aec75607922f4351dd32c44c0698bbf', name: "history-icon" }, h(HistoryIcon, { key: '03c85067f778f7a6ddd601e18c71def40d6a64e7' }))), h("bs-tooltip", { key: 'd06e0655156bb6b2ddd1ac825541d4380111c204', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "History")), h("span", { key: '42e78539d529cea0a19f6f5b1457d1a48bd62f19', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'fa0796a28a0a7a6f72ec48e44acd9d257e897529', type: "button", part: "expand", class: "bs-chatbot-header__button", "aria-label": this.expanded ? 'Collapse' : 'Expand', "aria-pressed": this.expanded ? 'true' : 'false', onClick: this.onExpandClick }, h("slot", { key: '369cff5533e420992608351dff1943daff352c25', name: "expand-icon" }, h(ExpandIcon, { key: '2aedcdbfd7a372454b39f4b17e7468f3e2b3cf0c' }))), h("bs-tooltip", { key: '53c2311bd5e8af8a20138eaa6a6dd3a562444a8d', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, this.expanded ? 'Collapse' : 'Expand')), h("span", { key: 'd10e2419f9fcb9fc73cc4fe00a17ef5496d904dc', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'c441d3a39bca00357f673ae6814fab78143e1c6b', type: "button", part: "close", class: "bs-chatbot-header__button", "aria-label": "Close", onClick: this.onCloseClick }, h("slot", { key: '3b9f99bb50fc55ddcc57ccaf4a173ae57de4b48c', name: "close-icon" }, h(CloseIcon, { key: 'dbac72f3e57dc18afe79669227cad5f09f69da3f' }))), h("bs-tooltip", { key: 'eab5277e0aabccad8f0d831c679e7b9fad1e5740', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "Close")))));
+        return (h("div", { key: '6c7b3f85022255ed23112784225bfa73d3a895dc', class: "bs-chatbot-header", role: "banner", "aria-label": this.heading }, h("div", { key: 'c1352cfd77ffa0086524169f70f539224efdfece', part: "logo", class: "bs-chatbot-header__logo", role: "img", "aria-label": this.heading, innerHTML: GENIE_LOGO_SVG }), h("div", { key: '0fc7a712371d9376cf27255bc8673e3534958f90', class: "bs-chatbot-header__actions" }, h("span", { key: 'ec7e2263549ceadea2cab8d525e79536498c8638', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'e18b8a1479e39ac7ffb9296d6937a0ae43ed8085', type: "button", part: "new-chat", class: "bs-chatbot-header__button", "aria-label": "New chat", onClick: this.onNewChatClick }, h("slot", { key: 'b4d2cbc7178fedb8fd913a78d553ff8dd7434629', name: "new-chat-icon" }, h(NewChatIcon, { key: 'b08f81e176c9bd375149953c16ac9015abb45e82' }))), h("bs-tooltip", { key: 'f9ce231519487ecef288ba4cfbb9be6f0c365d13', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "New chat")), h("span", { key: '518d7a9e5b706032c2bcd8b07ba233149d0b91c2', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '0fe038dd159d5b789c068e8b5897bb7d4ecce13f', type: "button", part: "history", class: "bs-chatbot-header__button", "aria-label": "History", onClick: this.onHistoryClick }, h("slot", { key: '08eafbec56e26a5b1ee031760fe5cb536f8e2dfb', name: "history-icon" }, h(HistoryIcon, { key: 'c7146fda0171aad403c60e85487422f9435ecb5b' }))), h("bs-tooltip", { key: '75472a421f6e7deae9251f8ba8154ed1e27d7561', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "History")), h("span", { key: '80205eed7c1859d9294169340eb32675093cc3b6', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '50f7bc159d86e96402f1dfcd669d9cb0db47d5db', type: "button", part: "expand", class: "bs-chatbot-header__button", "aria-label": this.expanded ? 'Collapse' : 'Expand', "aria-pressed": this.expanded ? 'true' : 'false', onClick: this.onExpandClick }, h("slot", { key: 'ec985a221f8ad106d9e166fe41b61d12bb76ed1c', name: "expand-icon" }, h(ExpandIcon, { key: '8c2115fda94eb2751fb1d578790217b7791329a4' }))), h("bs-tooltip", { key: 'd81aac0eeab0c95e4255bb996acdfce822e8264d', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, this.expanded ? 'Collapse' : 'Expand')), h("span", { key: 'c7400a3de2bf5f094dd54bf1308355d0e0f762a8', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'b6b06b62243f7e1058b1f09426e4159fe185c1ad', type: "button", part: "close", class: "bs-chatbot-header__button", "aria-label": "Close", onClick: this.onCloseClick }, h("slot", { key: '407db5c670302391b0196716de157b6cdaeb029f', name: "close-icon" }, h(CloseIcon, { key: '2593ea028a266cb7a9cc55ead8d1888cb491cf05' }))), h("bs-tooltip", { key: 'b230b5107c88e56f4e695f2d8b065208affe3fd2', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "Close")))));
     }
     static get is() { return "bs-chatbot-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -105,7 +105,7 @@ export class BsChatbotResponseAction {
     };
     render() {
         const hasSources = !!this.sourcesCount && this.sourcesCount > 0;
-        return (h("div", { key: 'a5a577b57036f3507bd382142d59aa5cfb5d1a10', class: "bs-chatbot-response-action" }, h("button", { key: 'd5d7682b13210606a9d73b04666fb5286241a71b', type: "button", part: "like", class: "bs-chatbot-response-action__button", "aria-label": "Like", onClick: this.onLikeClick }, h("slot", { key: '57d73923eaf8ed0ca1f014378316edf17510c466', name: "like-icon" }, h(ThumbsUpIcon, { key: 'e2ecc2cefe28cf928456958a65dfdbe58498a5ed' }))), h("button", { key: '0be83348e74004b96ed3d70747cf80aff49c55b5', type: "button", part: "dislike", class: "bs-chatbot-response-action__button", "aria-label": "Dislike", onClick: this.onDislikeClick }, h("slot", { key: 'a2534fbac754be7c70e2a701409d0a4e3de6f4f3', name: "dislike-icon" }, h(ThumbsDownIcon, { key: 'fd1d3fb6cba214c58ac3aef3c586c9acda898b42' }))), h("button", { key: 'f22e29329216f08ac7239d70be7e2404e5c6cf74', type: "button", part: "copy", class: "bs-chatbot-response-action__button", "aria-label": "Copy", onClick: this.onCopyClick }, h("slot", { key: '5b09286141378e540dad9f1c46cb8955ba6c45a2', name: "copy-icon" }, h(CopyIcon, { key: '89530dbef867c50eb6a89d44e9c1e9f0d0054710' }))), h("button", { key: '8c3795a99e154af1d9c549b33e308ce023ede273', type: "button", part: "regenerate", class: "bs-chatbot-response-action__button", "aria-label": "Regenerate", onClick: this.onRegenerateClick }, h("slot", { key: '44380d96f15e7e34306c671f73445c599b555c2d', name: "regenerate-icon" }, h(RegenerateIcon, { key: '2889133104c33c9534b65ccac3bef2d5e9e62215' }))), h("div", { key: 'a8ca7cae6645d86de3c8cec97327592dc64f84c5', class: "bs-chatbot-response-action__menu-wrapper" }, h("button", { key: '635e247f931a9b850b517a0278f94dec6af06024', type: "button", part: "menu", class: "bs-chatbot-response-action__button", "aria-label": "More options", "aria-haspopup": "menu", "aria-expanded": this.menuOpen ? 'true' : 'false', onClick: this.onMenuClick }, h("slot", { key: 'f6fd17940a559fad1f3fe345932990c25dbbd175', name: "menu-icon" }, h(MenuIcon, { key: '42a1c62cfa3335cb3ff18f786d623fb24b85e22e' }))), this.menuOpen && (h("div", { key: 'dbae73386c940b6634e0b6965e29cebcb22894d4', class: "bs-chatbot-response-action__menu-popup" }, h("slot", { key: '80510a0aaf42bb82c62733f6a1fb0a170cbaafc1', name: "menu" })))), hasSources && (h("button", { key: 'dd97c3a10903a43af26fbc410b70c2d3537978ac', type: "button", part: "sources", class: "bs-chatbot-response-action__sources", onClick: this.onSourcesClick }, h("slot", { key: '6714d2472df74279948428cc21cf1f52b9be30e7', name: "sources-icon" }, h(SourcesIcon, { key: '0b1f75683249b1adf41e0876285ba60bc4798b00' })), h("span", { key: '6d6bcee3ea127b0d184263bad68df17a56f08d5f', class: "bs-chatbot-response-action__sources-label" }, this.sourcesCount, " ", this.sourcesCount === 1 ? 'source' : 'sources')))));
+        return (h("div", { key: '111e7a42e8fc38d4fd5a816cdfded9eaaa854411', class: "bs-chatbot-response-action" }, h("button", { key: 'def8fd139a1e29cf5410c00227e0f3daa713fe71', type: "button", part: "like", class: "bs-chatbot-response-action__button", "aria-label": "Like", onClick: this.onLikeClick }, h("slot", { key: '78e5c9b817fe4828e2a52cd49474d54400a8e930', name: "like-icon" }, h(ThumbsUpIcon, { key: 'e74d4efb615839af2a1b5b1a0fe739c37f0830ed' }))), h("button", { key: '19a4569619e2f9bcc4058622f5534d5aff1be914', type: "button", part: "dislike", class: "bs-chatbot-response-action__button", "aria-label": "Dislike", onClick: this.onDislikeClick }, h("slot", { key: '0f6fab436dc26c3cd019934cbb99073c0cd2176f', name: "dislike-icon" }, h(ThumbsDownIcon, { key: '000bae3349daf25dd7f2af3b0848461158452e58' }))), h("button", { key: '92e013b636bf8d6a0d316b998e01acb3039f283a', type: "button", part: "copy", class: "bs-chatbot-response-action__button", "aria-label": "Copy", onClick: this.onCopyClick }, h("slot", { key: 'd575f671a480dae59bbefb0a255209a537b24f4d', name: "copy-icon" }, h(CopyIcon, { key: 'becca3443cdd1a6245d84b806f9186da8756bef8' }))), h("button", { key: '3e48fb0dbef6c181fbc1e4800f079786f38f7294', type: "button", part: "regenerate", class: "bs-chatbot-response-action__button", "aria-label": "Regenerate", onClick: this.onRegenerateClick }, h("slot", { key: '2bf713515b8503186d4d17e47ad0a7baf424be00', name: "regenerate-icon" }, h(RegenerateIcon, { key: '86f25451600b70f5d8e7148f5ee46c9c8fda4674' }))), h("div", { key: '3815f620d0ee123aeb23e99d664d40aae2168616', class: "bs-chatbot-response-action__menu-wrapper" }, h("button", { key: 'f53c9236453217611a1b3b3ee195ad9e5d5079e0', type: "button", part: "menu", class: "bs-chatbot-response-action__button", "aria-label": "More options", "aria-haspopup": "menu", "aria-expanded": this.menuOpen ? 'true' : 'false', onClick: this.onMenuClick }, h("slot", { key: 'ac264f44c88115a8dc5d52a5c149ac0981ee0177', name: "menu-icon" }, h(MenuIcon, { key: '66c03b5a3cf26d1f8aebbe93d10ea90ed61277bf' }))), this.menuOpen && (h("div", { key: '004fd6280505e156ff0353714e4d36e3b7273d5e', class: "bs-chatbot-response-action__menu-popup" }, h("slot", { key: '33e54635fe65fe4fb52a0bbd642c822e5a50e9a6', name: "menu" })))), hasSources && (h("button", { key: 'da4095a96f3920f2723f1b84be98f8b31ba55f5a', type: "button", part: "sources", class: "bs-chatbot-response-action__sources", onClick: this.onSourcesClick }, h("slot", { key: 'a7c526dcbfb1037c66830602b0457db0d3f160a1', name: "sources-icon" }, h(SourcesIcon, { key: '4e76ba5f77ddf3ad438f4b537e06caddb0adf613' })), h("span", { key: 'c648b364219f65b63c2abd325a4112c581906b31', class: "bs-chatbot-response-action__sources-label" }, this.sourcesCount, " ", this.sourcesCount === 1 ? 'source' : 'sources')))));
     }
     static get is() { return "bs-chatbot-response-action"; }
     static get encapsulation() { return "shadow"; }

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

@@ -57,7 +57,7 @@ export class BsChatbotSourcesDrawer {
     };
     render() {
         const displayCount = this.count ?? this.slottedCount;
-        return (h("div", { key: 'ab5e52fcb47131dc7892d8ee7f7ed8a4f08b6d09', class: "bs-chatbot-sources-drawer", role: "region", "aria-label": this.heading }, h("div", { key: '8796c29ea6b2526172db45138a0e0ce2a5c42a9a', class: "bs-chatbot-sources-drawer__header" }, h("div", { key: '68c88eda8a6177381f0876a8793df56ac0184f97', class: "bs-chatbot-sources-drawer__title-group" }, h("h2", { key: 'c45cf3bbc19e1b823dc3fb5a4d8054adaaad9cd8', part: "heading", class: "bs-chatbot-sources-drawer__heading" }, this.heading), displayCount > 0 && (h("span", { key: '233322ff5aeec5cd0c83ba8b19dff4d69d3a815f', part: "count", class: "bs-chatbot-sources-drawer__count" }, displayCount))), h("button", { key: '430d248b87ce7f6ec4dfe215e9f5b59f00cfa6f5', type: "button", part: "collapse", class: "bs-chatbot-sources-drawer__collapse", "aria-label": "Collapse sources", onClick: this.onCollapseClick }, h("slot", { key: '653546edda2ca9c971fa81b49073792392f5401b', name: "collapse-icon" }, h(CaretRightIcon, { key: '8b43f2c17ef1604e38ed28bf418493a06671fa3f' })))), h("div", { key: '200db381a1beff3bc3ac3e3851a398c26049a144', part: "list", class: "bs-chatbot-sources-drawer__list" }, h("slot", { key: 'e8f1c5085c069fc007881ae7be228cc3bec50516', onSlotchange: this.onSlotchange }))));
+        return (h("div", { key: '42d5d4160e8c2cac61d124f9359d2f6996658ce1', class: "bs-chatbot-sources-drawer", role: "region", "aria-label": this.heading }, h("div", { key: '81d4a4bef6bdc625d7bcfe57f4338fc97c0403ca', class: "bs-chatbot-sources-drawer__header" }, h("div", { key: 'db44bbebef2b2c59ae1a6755d6dd68ea55b81196', class: "bs-chatbot-sources-drawer__title-group" }, h("h2", { key: '573c29a65b188805621f8eb35d2489987d05451b', part: "heading", class: "bs-chatbot-sources-drawer__heading" }, this.heading), displayCount > 0 && (h("span", { key: '24a009a10e789ea33ad2603dad89ed590564e92b', part: "count", class: "bs-chatbot-sources-drawer__count" }, displayCount))), h("button", { key: '1ba25a50ca7a7910fcac94ff10eeb1a694e2ddd5', type: "button", part: "collapse", class: "bs-chatbot-sources-drawer__collapse", "aria-label": "Collapse sources", onClick: this.onCollapseClick }, h("slot", { key: '7ccaf79b7d19ecf3f6871787a75110304d1a5237', name: "collapse-icon" }, h(CaretRightIcon, { key: 'fde18a59c4e7a9436fe4b1044ae7272eb7ee4d5a' })))), h("div", { key: 'aa70054cb4da766d19f4c646a71bcb4e0d2b4195', part: "list", class: "bs-chatbot-sources-drawer__list" }, h("slot", { key: 'd2bef9a375eccda347f9e26942bb4f33a689933f', 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.js

@@ -45,7 +45,7 @@ export class BsChatbotSuggestionButton {
         this.bsSelect.emit();
     };
     render() {
-        return (h("button", { key: '480879357259eb51958f342800e1a367beea634d', type: "button", part: "button", class: "bs-chatbot-suggestion-button", disabled: this.disabled, onClick: this.onClick }, h("slot", { key: '79c5164455cf06cbb2d4334f27a883c31757878b' })));
+        return (h("button", { key: 'fe0298f0e80e18da93468635ab1263a243700fe9', type: "button", part: "button", class: "bs-chatbot-suggestion-button", disabled: this.disabled, onClick: this.onClick }, h("slot", { key: '0fcc15a4165b0e2c7b990adbb061d2fb54378c82' })));
     }
     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

@@ -33,7 +33,7 @@ export class BsCheckboxSkeleton {
      * (unusual) default `bs-checkbox` itself uses. */
     size = 'lg';
     render() {
-        return (h("span", { key: '4f03edea0ccdd12a7956d8ea66489aa5ea2049eb', part: "container", class: "bs-checkbox-skeleton", role: "status", "aria-label": "Loading" }, h("span", { key: '35acfd9f5b5f6094d833a339771d02fb7dadecb4', part: "box", class: `bs-checkbox-skeleton__box bs-checkbox-skeleton__box--${this.size}` }), h("span", { key: '6fe0a18b4d34898a8f516c0fb01710c08b30a208', part: "label", class: "bs-checkbox-skeleton__label" })));
+        return (h("span", { key: '50a436a6ede8ae40310191029037b3be08981fba', part: "container", class: "bs-checkbox-skeleton", role: "status", "aria-label": "Loading" }, h("span", { key: 'f76fc56bb1e6fea2bd6a4fc41c336930c2b23044', part: "box", class: `bs-checkbox-skeleton__box bs-checkbox-skeleton__box--${this.size}` }), h("span", { key: 'd80b2ac1c5b9eba7a8b150a0e344909a46b18c39', 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.js

@@ -92,7 +92,7 @@ export class BsCheckbox {
         ]
             .filter(Boolean)
             .join(' ');
-        return (h("label", { key: '78f89b0841c20e030bf8af7384a870d9e660e44f', class: `bs-checkbox ${this.disabled ? 'bs-checkbox--disabled' : ''}` }, h("input", { key: '254d622c1603c444272864f10bc6abccac825f76', ref: el => (this.inputEl = el), class: "bs-checkbox__input", type: "checkbox", checked: this.checked, disabled: this.disabled, "aria-checked": this.indeterminate ? 'mixed' : String(this.checked), "aria-label": this.ariaLabel, onChange: this.onChange }), h("span", { key: '39d94a0d5e590b920082911400554185088a2ebe', part: "box", class: boxClasses }, showIcon && (h("svg", { key: '609448a396a59a9aad9d14eeb8c574d7255dc076', 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: '16ed6f220ee2417837c2166c9369bff78638095d', part: "label", class: "bs-checkbox__label" }, h("slot", { key: 'd22610712a6bb1e41ecc72ae60c1e6a5df8e93da' }))));
+        return (h("label", { key: '0c4ef7d5dc0c10a76382a25f503e50a9698f74b0', class: `bs-checkbox ${this.disabled ? 'bs-checkbox--disabled' : ''}` }, h("input", { key: '1bcbe7899e41e5c4bb1a09602eec0f852ae4a2e7', ref: el => (this.inputEl = el), class: "bs-checkbox__input", type: "checkbox", checked: this.checked, disabled: this.disabled, "aria-checked": this.indeterminate ? 'mixed' : String(this.checked), "aria-label": this.ariaLabel, onChange: this.onChange }), h("span", { key: 'e7f5d9b4374aa6c718a76353a6671878564d366e', part: "box", class: boxClasses }, showIcon && (h("svg", { key: 'c73163dcba81418174924221259b1ab37cb0a2e8', 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: '3511affcb7f222032c726591a6f35c15cbcb3225', part: "label", class: "bs-checkbox__label" }, h("slot", { key: '1103d622b8d1295d9e82a63660cb6ab0939c6edf' }))));
     }
     static get is() { return "bs-checkbox"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,20 +13,35 @@ describe('bs-chip-filter', () => {
         expect(button).toEqualAttribute('aria-pressed', 'true');
         expect(button).toHaveClass('bs-chip-filter--selected');
     });
-    it('clicking toggles selected and emits bsChange with the new value', async () => {
+    it('clicking emits bsChange with the requested new value, without mutating selected itself', async () => {
         const { root, waitForChanges, spyOnEvent } = await render(h("bs-chip-filter", null, "Label"));
         const bsChangeSpy = spyOnEvent('bsChange');
         const button = root.shadowRoot.querySelector('button');
         button.click();
         await waitForChanges();
-        expect(root.selected).toBe(true);
         expect(bsChangeSpy).toHaveReceivedEventTimes(1);
         expect(bsChangeSpy).toHaveReceivedEventDetail(true);
+        // The chip is controlled: it never flips its own `selected` prop on click.
+        expect(root.selected).toBe(false);
+    });
+    it('is a controlled component: if the parent does not update selected in response to bsChange, the chip stays at its current prop value', async () => {
+        const { root, waitForChanges, spyOnEvent } = await render(h("bs-chip-filter", { selected: false }, "Label"));
+        const bsChangeSpy = spyOnEvent('bsChange');
+        const button = root.shadowRoot.querySelector('button');
         button.click();
         await waitForChanges();
+        // Event requests the change...
+        expect(bsChangeSpy).toHaveReceivedEventDetail(true);
+        // ...but since the "parent" never updated the selected prop (simulating a rejected change),
+        // the chip's rendered/visual state must still match the prop, not drift into its own truth.
         expect(root.selected).toBe(false);
-        expect(bsChangeSpy).toHaveReceivedEventTimes(2);
-        expect(bsChangeSpy).toHaveReceivedEventDetail(false);
+        expect(button).toEqualAttribute('aria-pressed', 'false');
+        expect(button).not.toHaveClass('bs-chip-filter--selected');
+        // Only an explicit prop update (what a real controlled parent would do) changes the display.
+        root.selected = true;
+        await waitForChanges();
+        expect(button).toEqualAttribute('aria-pressed', 'true');
+        expect(button).toHaveClass('bs-chip-filter--selected');
     });
     describe('disabled', () => {
         it('sets the disabled attribute on the native button', async () => {
@@ -40,7 +55,6 @@ describe('bs-chip-filter', () => {
             const button = root.shadowRoot.querySelector('button');
             button.click();
             await waitForChanges();
-            expect(root.selected).toBe(false);
             expect(bsChangeSpy).toHaveReceivedEventTimes(0);
         });
     });

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

@@ -24,8 +24,13 @@ export class BsChipFilter {
     /** Sizing scale. Controls the chip's height only -- icon size, gap, and font size stay
      * constant across sizes, matching the Figma spec exactly. */
     size = 'lg';
-    /** Whether the chip reads as toggled on. Mutable so clicking it toggles directly, and
-     * reflected so consumers can target `bs-chip-filter[selected]` via CSS. */
+    /** Whether the chip reads as toggled on. This is the single source of truth for the chip's
+     * visual state -- a controlled component, like a controlled `<input>`. Clicking the chip never
+     * mutates this prop itself; it only emits `bsChange` with the requested new value. If the
+     * consumer doesn't update `selected` in response (e.g. their own validation rejects the
+     * change), the chip's rendering stays exactly as `selected` says, rather than drifting into
+     * some internally-tracked truth. Reflected so consumers can target
+     * `bs-chip-filter[selected]` via CSS. */
     selected = false;
     /** Shows a trailing dropdown caret, signaling this chip opens a menu of further options.
      * Purely a visual affordance -- wire up the actual menu (e.g. `bs-menu`) yourself. */
@@ -57,8 +62,7 @@ export class BsChipFilter {
         this.hasIcon = ev.target.assignedNodes().length > 0;
     };
     onClick = () => {
-        this.selected = !this.selected;
-        this.bsChange.emit(this.selected);
+        this.bsChange.emit(!this.selected);
     };
     render() {
         // Matches the four Icon x Dropdown combinations verified against Figma (node 1905:9151):
@@ -66,7 +70,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: 'c585746cca27a4d60d2a0c242e26e19ba8b41677', 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: 'f62eda39d506b130e5cfe0881bfa80dd0241e1cf', part: "icon", class: `bs-chip-filter__icon ${this.hasIcon ? 'bs-chip-filter__icon--visible' : ''}` }, h("slot", { key: '233f80cba2500aa4fed6e1ccdb6d19f14fb64384', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '74d101de8d1dd20bda1fbc789733282ae1a3784a', part: "label", class: "bs-chip-filter__label" }, h("slot", { key: '15db7eea134a9d3eac56a159c920141daed4e467' })), this.dropdown && (h("span", { key: 'e070c37932fa4bdc4f494472f361870e2f3d6b22', part: "caret", class: "bs-chip-filter__caret", "aria-hidden": "true" }, h(ChevronDownIcon, { key: '642401f2ddc833731875cfdd3b7d5d96f2272167' })))));
+        return (h("button", { key: '4cc3cc573ec2a0f742a5ba5e76a8f5dee7eb0997', 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: '6767cb949257461abde1872ef35d5551fe86017b', part: "icon", class: `bs-chip-filter__icon ${this.hasIcon ? 'bs-chip-filter__icon--visible' : ''}` }, h("slot", { key: 'a106df348c1078bbd73c062d6217d3467327664a', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'bf1007a48f1bdfa2ddcf5df9eddee84b276f3494', part: "label", class: "bs-chip-filter__label" }, h("slot", { key: '1f23a2853946b770f76683dae314263cc4f3c5b2' })), this.dropdown && (h("span", { key: '483fb2cabd9dfc930fa44ee626a4532f5fec4cc3', part: "caret", class: "bs-chip-filter__caret", "aria-hidden": "true" }, h(ChevronDownIcon, { key: '8197912443813d3d3e7c705e303301a993bb2ce1' })))));
     }
     static get is() { return "bs-chip-filter"; }
     static get encapsulation() { return "shadow"; }
@@ -111,7 +115,7 @@ export class BsChipFilter {
             },
             "selected": {
                 "type": "boolean",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -121,7 +125,7 @@ export class BsChipFilter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether the chip reads as toggled on. Mutable so clicking it toggles directly, and\nreflected so consumers can target `bs-chip-filter[selected]` via CSS."
+                    "text": "Whether the chip reads as toggled on. This is the single source of truth for the chip's\nvisual state -- a controlled component, like a controlled `<input>`. Clicking the chip never\nmutates this prop itself; it only emits `bsChange` with the requested new value. If the\nconsumer doesn't update `selected` in response (e.g. their own validation rejects the\nchange), the chip's rendering stays exactly as `selected` says, rather than drifting into\nsome internally-tracked truth. Reflected so consumers can target\n`bs-chip-filter[selected]` via CSS."
                 },
                 "getter": false,
                 "setter": false,

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: '333f8eb96435393dc676b7422de79a43f0e3d9d8', class: `bs-chip-informative bs-chip-informative--${this.color} bs-chip-informative--${this.size} bs-chip-informative--${paddingVariant}` }, h("span", { key: '5af00525b1ce8e1cee16e896c6fd1bee1e8344c0', part: "icon", class: `bs-chip-informative__icon ${this.hasIcon ? 'bs-chip-informative__icon--visible' : ''}` }, h("slot", { key: 'd6e72f0ea1a913b2a313441b83f1430549dcc5cc', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '617013d83715e1d916e4bfc40185d31879acfab3', part: "label", class: "bs-chip-informative__label" }, h("slot", { key: 'dc6db50bff31169c3da18f472002528a78ed210a' }))));
+        return (h(Host, { key: '099676c8f874c17836d65797d10683fa1184043b', class: `bs-chip-informative bs-chip-informative--${this.color} bs-chip-informative--${this.size} bs-chip-informative--${paddingVariant}` }, h("span", { key: 'ff570bf489c3a8ea8350bc550e720bfcdc5d4bdf', part: "icon", class: `bs-chip-informative__icon ${this.hasIcon ? 'bs-chip-informative__icon--visible' : ''}` }, h("slot", { key: '170e80a2665111b2a6212088b58a7c2c1008110a', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'd87cd059d67b8d56d04bc7e9f39d3ab497e49f8a', part: "label", class: "bs-chip-informative__label" }, h("slot", { key: '983e6f32115957222a078f91683bc5f59aefe185' }))));
     }
     static get is() { return "bs-chip-informative"; }
     static get encapsulation() { return "shadow"; }

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

@@ -77,7 +77,7 @@ export class BsChipInput {
     };
     render() {
         const paddingVariant = this.hasIcon ? 'icon' : 'text';
-        return (h(Host, { key: 'd11302f69f8732c0c1c5c52e25a43ed894bba9d3', class: `bs-chip-input bs-chip-input--${this.size} bs-chip-input--${paddingVariant}` }, h("button", { key: 'e6621eb9e757f639d18287a56ffcbd75131ece65', type: "button", part: "body", class: "bs-chip-input__body", disabled: this.disabled, "aria-pressed": String(this.selected), onClick: this.onBodyClick }, h("span", { key: '3bc20f30643dc95905778053ad892bd728005e41', part: "icon", class: `bs-chip-input__icon ${this.hasIcon ? 'bs-chip-input__icon--visible' : ''}` }, h("slot", { key: '1082ebd7f6e5fee0da8864f15eff7a645097fec9', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '6b93d2229962e9362bf827a127dd0af3b5125059', part: "label", class: "bs-chip-input__label" }, h("slot", { key: 'c53a759951afbe131472252ec3ca45b9ba15200a', onSlotchange: this.onLabelSlotchange }))), h("button", { key: 'e9c0a6d76f6e6be0c7f3fcf4004207d045eb5b6c', type: "button", part: "remove", class: "bs-chip-input__remove", disabled: this.disabled, "aria-label": `Remove ${this.labelText}`, onClick: this.onRemoveClick }, h(CloseIcon, { key: 'f14475776429fa95759f9d6050579bce60d27d13' }))));
+        return (h(Host, { key: '3e0b49c24f5f2c696c4b28fbdddf3abb5cbb54f4', class: `bs-chip-input bs-chip-input--${this.size} bs-chip-input--${paddingVariant}` }, h("button", { key: '3bb4e5e2cdea9cb828d2f3efe0a1f7e6e199ea13', type: "button", part: "body", class: "bs-chip-input__body", disabled: this.disabled, "aria-pressed": String(this.selected), onClick: this.onBodyClick }, h("span", { key: 'a8845467b470c0f0bb1f48a588f6b10c34c48aea', part: "icon", class: `bs-chip-input__icon ${this.hasIcon ? 'bs-chip-input__icon--visible' : ''}` }, h("slot", { key: '80f2daa48102e47dff6a1c37f36058f1a7825d0f', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'abc1a83bac760ac9cc993cfa46e08b67b543c7e0', part: "label", class: "bs-chip-input__label" }, h("slot", { key: 'cf2914c6ec7096fb4c6182f22457790b6b581da9', onSlotchange: this.onLabelSlotchange }))), h("button", { key: '2db0595805b4c1faf61f8c15c8bede6d5d59d6ae', type: "button", part: "remove", class: "bs-chip-input__remove", disabled: this.disabled, "aria-label": `Remove ${this.labelText}`, onClick: this.onRemoveClick }, h(CloseIcon, { key: '24df652ec4dd9ac7dcdc203d5fd1584e8dd5556c' }))));
     }
     static get is() { return "bs-chip-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -65,6 +65,27 @@ describe('bs-composer', () => {
         expect(spy).toHaveReceivedEventTimes(1);
         expect(spy).toHaveReceivedEventDetail('a');
     });
+    describe('value prop sync', () => {
+        it('keeps the value prop in sync with what was typed, not stuck at the initial value', async () => {
+            const { root } = await render(h("bs-composer", null));
+            const element = root;
+            const textarea = root.shadowRoot.querySelector('textarea');
+            textarea.value = 'hello';
+            textarea.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+            expect(element.value).toBe('hello');
+        });
+        it('clears the textarea when value is programmatically reset to "" after the user typed something', async () => {
+            const { root, setProps, waitForChanges } = await render(h("bs-composer", null));
+            const textarea = root.shadowRoot.querySelector('textarea');
+            textarea.value = 'hello';
+            textarea.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+            await waitForChanges();
+            expect(textarea.value).toBe('hello');
+            await setProps({ value: '' });
+            await waitForChanges();
+            expect(textarea.value).toBe('');
+        });
+    });
     describe('auto-grow', () => {
         it('grows taller as multi-line content is typed', async () => {
             const { root } = await render(h("bs-composer", null));
@@ -131,6 +152,22 @@ describe('bs-composer', () => {
             root.shadowRoot.querySelector('[part="mic"]').click();
             expect(spy).toHaveReceivedEventTimes(1);
         });
+        it('emits bsSubmit when Enter alone is pressed in the text field', async () => {
+            const { root, spyOnEvent } = await render(h("bs-composer", { state: "idle" }));
+            const spy = spyOnEvent('bsSubmit');
+            const textarea = root.shadowRoot.querySelector('textarea');
+            textarea.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, composed: true, cancelable: true }));
+            expect(spy).toHaveReceivedEventTimes(1);
+        });
+        it('does not emit bsSubmit and inserts a newline when Shift+Enter is pressed', async () => {
+            const { root, spyOnEvent } = await render(h("bs-composer", { state: "idle" }));
+            const spy = spyOnEvent('bsSubmit');
+            const textarea = root.shadowRoot.querySelector('textarea');
+            const ev = new KeyboardEvent('keydown', { key: 'Enter', shiftKey: true, bubbles: true, composed: true, cancelable: true });
+            textarea.dispatchEvent(ev);
+            expect(spy.length).toBe(0);
+            expect(ev.defaultPrevented).toBe(false);
+        });
     });
     describe('state="generating"', () => {
         it('shows an enabled action button and emits bsStop (not bsSubmit) on click', async () => {
@@ -195,4 +232,11 @@ describe('bs-composer', () => {
         const { root } = await render(h("bs-composer", { state: "idle" }));
         expect(root.shadowRoot.querySelector('.bs-composer__waveform')).toBeNull();
     });
+    it('reflects the state prop to a host attribute', async () => {
+        const { root, setProps, waitForChanges } = await render(h("bs-composer", { state: "idle" }));
+        expect(root).toEqualAttribute('state', 'idle');
+        await setProps({ state: 'recording' });
+        await waitForChanges();
+        expect(root).toEqualAttribute('state', 'recording');
+    });
 });

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

@@ -77,12 +77,21 @@ export class BsComposer {
      * The field is a `<textarea>` (not a single-line `<input>`) that grows with its content, up to
      * `--bs-composer-input-max-lines` (10 by default) -- beyond that it scrolls internally instead
      * of growing further. Setting `value` as a prop (not just typing) also re-triggers the resize,
-     * so e.g. programmatically clearing the field after submit correctly shrinks it back down. */
+     * so e.g. programmatically clearing the field after submit correctly shrinks it back down.
+     *
+     * Mutable: kept in sync with the real `<textarea>`'s content on every keystroke (see `onInput`),
+     * not pushed one-way from the outside only. Without this, typing alone never updates this prop,
+     * so a consumer re-setting `value` to e.g. `''` after the user had typed something would be a
+     * no-op (same as the never-updated internal value) and silently fail to clear the field. */
     value = '';
     /**
      * Which of the four mutually-exclusive composer states to render: `idle` (send, enabled),
      * `generating` (stop, while the AI is responding), `disabled` (send, but not interactive), or
      * `recording` (voice input in progress -- shows a waveform and a confirm action).
+     *
+     * Reflects to a `state` attribute on the host, so a consumer can target a specific state from
+     * outside via a CSS attribute selector (e.g. `bs-composer[state="recording"]`) or by querying
+     * for it in JS, the same way `bs-input`'s `open` prop reflects.
      */
     state = 'idle';
     /**
@@ -145,9 +154,23 @@ export class BsComposer {
     };
     onInput = (ev) => {
         const value = ev.target.value;
+        // Keep the `value` prop in sync with what was actually typed -- see `value`'s doc comment for
+        // why this is required for an external `value` prop change (e.g. clearing after submit) to
+        // reliably take effect afterwards.
+        this.value = value;
         this.resizeInput();
         this.bsInput.emit(value);
     };
+    /** Enter alone sends (re-using the exact same per-state action the primary button's own click
+     * handler performs), Shift+Enter inserts a normal newline -- standard chat-composer convention.
+     * No-ops while `disabled` (the native `disabled` attribute already blocks all input, but this
+     * guards the emit here too, for symmetry with the action button's own disabled check). */
+    onInputKeydown = (ev) => {
+        if (ev.key !== 'Enter' || ev.shiftKey || this.state === 'disabled')
+            return;
+        ev.preventDefault();
+        this.onActionClick();
+    };
     onAttachClick = () => {
         this.bsAttach.emit();
     };
@@ -183,7 +206,7 @@ export class BsComposer {
         const placeholder = this.placeholder ?? DEFAULT_PLACEHOLDERS[this.variant];
         const disabled = this.state === 'disabled';
         const recording = this.state === 'recording';
-        return (h("div", { key: 'f4676a3c110cd683f745e3b0e4d37d8abcab06c5', class: `bs-composer bs-composer--${this.state} bs-composer--${this.variant}` }, h("div", { key: '7970d493b0c0f9ef19f00fea2d33b58085f589e6', part: "attachments", class: `bs-composer__attachments-row ${this.hasAttachments ? 'bs-composer__attachments-row--visible' : ''}` }, h("slot", { key: '4b53a6cfd1d7d0e7cf0fa0d5e4f37fb551f4bcd4', name: "attachments", onSlotchange: this.onAttachmentsSlotchange })), h("div", { key: '44fa49b002b657accd21a01e75cd5458dba337a8', class: "bs-composer__text-row" }, h("textarea", { key: '8fde6e735be83c28a38a59437ad9b2453bc6d074', ref: el => (this.inputEl = el), part: "input", class: "bs-composer__input", rows: 1, value: this.value, placeholder: placeholder, disabled: disabled, "aria-label": this.ariaLabel, onInput: this.onInput })), h("div", { key: '6f7a9e1a33d642e3ce847c8df03bc7e119696bbe', class: "bs-composer__controls-row" }, h("button", { key: '3b98d1c4e50373318b64d91e259e22d54cced5a7', type: "button", part: "attach", class: "bs-composer__attach", "aria-label": "Attach", onClick: this.onAttachClick }, h(PlusIcon, { key: 'e80e96ec1ea18d5eec08f77d9601c174382aafbd' })), recording ? (h("span", { class: "bs-composer__waveform", "aria-hidden": "true" }, WAVEFORM_BAR_HEIGHTS.map(height => (h("span", { class: "bs-composer__waveform-bar", style: { '--bs-composer-bar-height': `${height}px` } }))))) : (h("span", { class: "bs-composer__spacer" })), h("button", { key: '6dc198b201f3df52a9646146ea4ddfc3d921ca72', type: "button", part: "mic", class: `bs-composer__mic ${recording ? 'bs-composer__mic--recording' : ''}`, "aria-label": recording ? 'Stop recording' : 'Start voice input', disabled: disabled, onClick: this.onMicClick }, recording ? h(StopIcon, null) : h(MicIcon, null)), h("button", { key: 'a7e626d35aa9cc0b9e2bd67ced5961671cdd7850', type: "button", part: "action", class: `bs-composer__action bs-composer__action--${this.state}`, "aria-label": this.actionLabel(), disabled: disabled, onClick: this.onActionClick }, this.renderActionIcon()), h("slot", { key: '3f81510829b313a0088b7a4ea6f70c41dce16e77', name: "actions-end" }))));
+        return (h("div", { key: '80b15558a6c64dad187e5f83ff969f0ce738c959', class: `bs-composer bs-composer--${this.state} bs-composer--${this.variant}` }, h("div", { key: 'e29e99d27f37a1ed12d5a648615fe904aab3d850', part: "attachments", class: `bs-composer__attachments-row ${this.hasAttachments ? 'bs-composer__attachments-row--visible' : ''}` }, h("slot", { key: '3b83ae56fceeed1221beab79a739ee59cb35db71', name: "attachments", onSlotchange: this.onAttachmentsSlotchange })), h("div", { key: 'aa087015ad3a0ecec2f5fd7142633e12a00fc2cc', class: "bs-composer__text-row" }, h("textarea", { key: '695417d0ea46dd9016a27f967bb1ac4cff28531e', ref: el => (this.inputEl = el), part: "input", class: "bs-composer__input", rows: 1, value: this.value, placeholder: placeholder, disabled: disabled, "aria-label": this.ariaLabel, onInput: this.onInput, onKeyDown: this.onInputKeydown })), h("div", { key: '3087c098baef6f6a5886b23e2c6e54b71dce6923', class: "bs-composer__controls-row" }, h("button", { key: '75c132d161e468a999c72a96c88356473e760650', type: "button", part: "attach", class: "bs-composer__attach", "aria-label": "Attach", onClick: this.onAttachClick }, h(PlusIcon, { key: 'c7ff05366636234093b94a3e6f8980772444c546' })), recording ? (h("span", { class: "bs-composer__waveform", "aria-hidden": "true" }, WAVEFORM_BAR_HEIGHTS.map(height => (h("span", { class: "bs-composer__waveform-bar", style: { '--bs-composer-bar-height': `${height}px` } }))))) : (h("span", { class: "bs-composer__spacer" })), h("button", { key: '5aadfaad74e8fa0c612be85a79a8ecaff851f06b', type: "button", part: "mic", class: `bs-composer__mic ${recording ? 'bs-composer__mic--recording' : ''}`, "aria-label": recording ? 'Stop recording' : 'Start voice input', disabled: disabled, onClick: this.onMicClick }, recording ? h(StopIcon, null) : h(MicIcon, null)), h("button", { key: '1c7922626005c71fdef12adb12d7413c983df7d7', type: "button", part: "action", class: `bs-composer__action bs-composer__action--${this.state}`, "aria-label": this.actionLabel(), disabled: disabled, onClick: this.onActionClick }, this.renderActionIcon()), h("slot", { key: 'd38d63ecf9dd3c7ce7df06cec854ff5ae92b1077', name: "actions-end" }))));
     }
     static get is() { return "bs-composer"; }
     static get encapsulation() { return "shadow"; }
@@ -247,7 +270,7 @@ export class BsComposer {
             },
             "value": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -257,7 +280,7 @@ export class BsComposer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Current text value. Native `input` events don't cross the Shadow DOM boundary, so this\ncomponent re-dispatches them as a `bsInput` custom event instead.\n\nThe field is a `<textarea>` (not a single-line `<input>`) that grows with its content, up to\n`--bs-composer-input-max-lines` (10 by default) -- beyond that it scrolls internally instead\nof growing further. Setting `value` as a prop (not just typing) also re-triggers the resize,\nso e.g. programmatically clearing the field after submit correctly shrinks it back down."
+                    "text": "Current text value. Native `input` events don't cross the Shadow DOM boundary, so this\ncomponent re-dispatches them as a `bsInput` custom event instead.\n\nThe field is a `<textarea>` (not a single-line `<input>`) that grows with its content, up to\n`--bs-composer-input-max-lines` (10 by default) -- beyond that it scrolls internally instead\nof growing further. Setting `value` as a prop (not just typing) also re-triggers the resize,\nso e.g. programmatically clearing the field after submit correctly shrinks it back down.\n\nMutable: kept in sync with the real `<textarea>`'s content on every keystroke (see `onInput`),\nnot pushed one-way from the outside only. Without this, typing alone never updates this prop,\nso a consumer re-setting `value` to e.g. `''` after the user had typed something would be a\nno-op (same as the never-updated internal value) and silently fail to clear the field."
                 },
                 "getter": false,
                 "setter": false,
@@ -283,11 +306,11 @@ export class BsComposer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Which of the four mutually-exclusive composer states to render: `idle` (send, enabled),\n`generating` (stop, while the AI is responding), `disabled` (send, but not interactive), or\n`recording` (voice input in progress -- shows a waveform and a confirm action)."
+                    "text": "Which of the four mutually-exclusive composer states to render: `idle` (send, enabled),\n`generating` (stop, while the AI is responding), `disabled` (send, but not interactive), or\n`recording` (voice input in progress -- shows a waveform and a confirm action).\n\nReflects to a `state` attribute on the host, so a consumer can target a specific state from\noutside via a CSS attribute selector (e.g. `bs-composer[state=\"recording\"]`) or by querying\nfor it in JS, the same way `bs-input`'s `open` prop reflects."
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "state",
                 "defaultValue": "'idle'"
             },

package/dist/collection/components/bs-composer-status-banner/bs-composer-status-banner.js

@@ -106,7 +106,7 @@ export class BsComposerStatusBanner {
         return this.type === 'error' || this.type === 'warning' ? h(WarningIcon, null) : h(ClockIcon, null);
     }
     render() {
-        return (h("div", { key: '74c67ad03135f3437bed5d267bf61d76e526e258', role: this.roleForType(), class: `bs-composer-status-banner bs-composer-status-banner--${this.type}` }, h("div", { key: '451147bf0c994383f67739be91c1e7208188e268', class: "bs-composer-status-banner__message-group" }, this.showIcon && (h("span", { key: '759e731cd0d26516eae83b5f224791043586b9d3', part: "icon", class: "bs-composer-status-banner__icon" }, h("slot", { key: 'cb3e16644aea43208f3112a6c3305490ce0a9bc8', name: "icon" }, this.renderDefaultIcon()))), h("p", { key: '098ffc238f023ba1ea42e26828b845a0a09ff368', part: "message", class: "bs-composer-status-banner__message" }, this.message)), this.showButton && (h("button", { key: '2bbaefea9de874d4f141566809bc77a3bf1aeae9', type: "button", part: "action", class: "bs-composer-status-banner__action", onClick: this.onActionClick }, this.actionLabel)), this.allowClose && (h("button", { key: '4ba7f094f0435a15612a38ef1bd770d2c3b90453', type: "button", part: "close", class: "bs-composer-status-banner__close", "aria-label": "Dismiss", onClick: this.onCloseClick }, h(CloseIcon, { key: 'd8d6e340f64a3fae396763f1d7897fdc8c02936a' })))));
+        return (h("div", { key: '237f3ec194ddb9057b1b0773e4a8062a9e58f457', role: this.roleForType(), class: `bs-composer-status-banner bs-composer-status-banner--${this.type}` }, h("div", { key: '6a1fadb9f08f2ce383216a750743321383528649', class: "bs-composer-status-banner__message-group" }, this.showIcon && (h("span", { key: '54dc45c13ab939249e66754389323d857d191bb5', part: "icon", class: "bs-composer-status-banner__icon" }, h("slot", { key: '023ee815d57914a9f46b39b5253229e3a89c1f2d', name: "icon" }, this.renderDefaultIcon()))), h("p", { key: '3bf23bc657922338767dcc63da4236469ff2c3f0', part: "message", class: "bs-composer-status-banner__message" }, this.message)), this.showButton && (h("button", { key: 'efb2fcc8eb96388b395275c39021fa718f08ae2b', type: "button", part: "action", class: "bs-composer-status-banner__action", onClick: this.onActionClick }, this.actionLabel)), this.allowClose && (h("button", { key: 'f97e8fba154e5bcc7e9778b2f31f136ca81a7d94', type: "button", part: "close", class: "bs-composer-status-banner__close", "aria-label": "Dismiss", onClick: this.onCloseClick }, h(CloseIcon, { key: 'eb56b6b6a2fddac3e13eac6db129f0da3572e8ec' })))));
     }
     static get is() { return "bs-composer-status-banner"; }
     static get encapsulation() { return "shadow"; }