@brandsync/wc 1.2.0 → 1.4.0

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

@@ -46,8 +46,17 @@
      step family, matching --bs-button-neutral-container (--bs-color-neutral-container) itself. */
   --bs-button-neutral-hover: var(--bs-color-neutral-container-hover);
   --bs-button-neutral-pressed: var(--bs-color-neutral-container-pressed);
-  --bs-button-outlined-border: var(--bs-border-primary);
-  --bs-button-outlined-border-hover: var(--bs-border-primary-hover);
+  /* Verified against Figma node 2842:50233/50230/50227/50224 (Style=Outline, States=Enabled/
+     Hovered/Focused/Pressed): border/text colors step through brand-600 -> 700 -> 800 across
+     enabled -> hover -> pressed, NOT a single "hover" color reused for both hover and pressed
+     (that was this variant's previous bug -- hover and pressed were indistinguishable, and
+     neither matched the enabled color Figma actually specifies). Text color matches
+     --bs-text-action-hover (brand-700) on BOTH hover and pressed per the spec -- pressed does NOT
+     get its own darker text color, only the border does. */
+  --bs-button-outlined-border: var(--bs-color-primary-default);
+  --bs-button-outlined-border-hover: var(--bs-color-primary-hover);
+  --bs-button-outlined-border-pressed: var(--bs-color-primary-pressed);
+  --bs-button-outlined-text-hover: var(--bs-text-action-hover);
   --bs-button-outlined-focus: var(--bs-border-primary-focus);
   --bs-button-outlined-container: var(--bs-color-primary-container);
 }
@@ -231,16 +240,17 @@
 .bs-button--outlined {
   background: transparent;
   color: var(--bs-color-primary-default);
-  border: 1.5px solid var(--bs-button-outlined-border);
+  border: 1px solid var(--bs-button-outlined-border);
 }
 .bs-button--outlined:hover:not(:disabled) {
   background: var(--bs-button-outlined-container);
   border-color: var(--bs-button-outlined-border-hover);
+  color: var(--bs-button-outlined-text-hover);
 }
 .bs-button--outlined:active:not(:disabled) {
   background: var(--bs-button-outlined-container);
-  color: var(--bs-color-primary-pressed);
-  border-color: var(--bs-button-outlined-border-hover);
+  color: var(--bs-button-outlined-text-hover);
+  border-color: var(--bs-button-outlined-border-pressed);
 }
 .bs-button--outlined:disabled {
   opacity: var(--bs-opacity-disabled);

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: '7332506653b523ec486608f744ae3d380c5189cb', 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: 'd72b8d4db55a417473d894736adbae530ca65379', part: "icon", class: "bs-icon-button__icon" }, h("slot", { key: 'c218c13307f99d58274e4f377ad42fd925e25fc5' }))));
     }
     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: '5f8f84b3b82e4c88a2308a9d9cfd0d8dfb50e876', part: "container", class: `bs-button-skeleton bs-button-skeleton--${this.size}`, role: "status", "aria-label": "Loading" });
+        return h("span", { key: '43450691678faace72f13fcec1358a8c0624e244', 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-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: 'e2c53e479c52e5a7e21dd6b010863cfed34f523b', class: "bs-chatbot-feedback", role: "region", "aria-label": this.computedHeading() }, h("button", { key: '7ea071eb0f77718b1f41c2c40181c61e5114f339', type: "button", part: "close", class: "bs-chatbot-feedback__close", "aria-label": "Close", onClick: this.onCloseClick }, h(CloseIcon, { key: '39d490c84008bc1a949a497c6606ce3789c39701' })), h("div", { key: '0030328128dad8a52a5f9c8393d82c6522bc5543', class: "bs-chatbot-feedback__top" }, h("div", { key: '8e53604efefeb014a947ac6559574df74ce21293', class: "bs-chatbot-feedback__text" }, h("p", { key: '6a69d8d8d66802db883d6ca7c6a7c218cca9baa8', part: "heading", class: "bs-chatbot-feedback__heading" }, this.computedHeading()), h("p", { key: '6facf10badd690adeaf33058af4e2e5104ba92c8', part: "subtitle", class: "bs-chatbot-feedback__subtitle" }, this.computedSubtitle())), h("div", { key: 'c933517d5e5bafcdeae73d3a6b85e1bcee6955b2', 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: '09872bfeb1d6df31149ead5c14befa27ed8a94cf', class: "bs-chatbot-feedback__field" }, h("label", { key: '5e45545e6c36ffeda32438689d43fd4f4cd57754', part: "label", class: "bs-chatbot-feedback__label", htmlFor: "bs-chatbot-feedback-comment" }, "Tell us what you think"), h("textarea", { key: 'db1eb08051b7d12c2397d91308a1ddc96a335686', 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: '888f86568ba57fb93771150ff59952923af0ae4c', part: "comment", class: "bs-chatbot-feedback__comment" }, this.comment))), h("div", { key: '7027d27f3c5dcbac0fe97ad130c9e4bf424a9103', class: "bs-chatbot-feedback__actions" }, !this.submitted && (h("button", { key: 'c410bbe6a1dd85d9c03f689ac8921d90f5bd63e2', type: "button", part: "submit", class: "bs-chatbot-feedback__submit", disabled: this.rating === 0, onClick: this.onSubmitClick }, h(SendIcon, { key: '9a098a14cf2e04c73e02c4ef0f75da4e23529da4' }), "Submit feedback")), h("button", { key: '810c89a2b8b4b5b9c14aa5368ed2365c98b839a7', 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: '7c86efd66631a8a0fdd7acc5c754dddd0f42aab8' }), "Start new chat"))));
+        return (h("div", { key: '7ce663d126eb30ed222c4744a04c8208504941b0', class: "bs-chatbot-feedback", role: "region", "aria-label": this.computedHeading() }, h("button", { key: 'f833bae45d9975adc2ada76bb2e9cea91dd02f67', type: "button", part: "close", class: "bs-chatbot-feedback__close", "aria-label": "Close", onClick: this.onCloseClick }, h(CloseIcon, { key: '570de12483be26f879049afddfa3f6f1797d097e' })), h("div", { key: '37d9790f2115b75a76aeb2bab12550dd1603c46f', class: "bs-chatbot-feedback__top" }, h("div", { key: '82f10bb7865e0bf0f265a944163df0d628abedbd', class: "bs-chatbot-feedback__text" }, h("p", { key: '76c633c71ddcc70d53a61b374b727afe050f6343', part: "heading", class: "bs-chatbot-feedback__heading" }, this.computedHeading()), h("p", { key: 'e6ea88567a8a25c47ffe2d64f23bd269101d4bea', part: "subtitle", class: "bs-chatbot-feedback__subtitle" }, this.computedSubtitle())), h("div", { key: 'd0d0cb36a349789af68449a2d70edce71a4496f6', 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: '253f16ef5004d442cffa57e6804b32c388b3eecd', class: "bs-chatbot-feedback__field" }, h("label", { key: 'c857ccda541ac1cced46c072e89b855b228e85c1', part: "label", class: "bs-chatbot-feedback__label", htmlFor: "bs-chatbot-feedback-comment" }, "Tell us what you think"), h("textarea", { key: '1ec486839761292cda2e33b05ebd7e0d9b9d95aa', 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: '4dc40cba99967af8f53f6ecaee6777523f9b48e0', part: "comment", class: "bs-chatbot-feedback__comment" }, this.comment))), h("div", { key: '0cfebfb6fa405cf19b9aceb3d0b37555cd95337d', class: "bs-chatbot-feedback__actions" }, !this.submitted && (h("button", { key: '6e81b8cb974427c5aef7b8a6cf53505dd85f830e', type: "button", part: "submit", class: "bs-chatbot-feedback__submit", disabled: this.rating === 0, onClick: this.onSubmitClick }, h(SendIcon, { key: '72b795b62594d42effa31e2b6b7ab1ea0539ca5d' }), "Submit feedback")), h("button", { key: '573bc780413b93864c8e67d76b6b08428aeb0fe3', 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: '87fcee4e778b90b5c8b6c2a2c192bfc7dc6368b2' }), "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: '5dfec82f3287604e96f4cedf88572c4e125c6a25', class: "bs-chatbot-header", role: "banner", "aria-label": this.heading }, h("div", { key: '0b6150aed7641ad4784f6da5c88310ebb4b697fb', part: "logo", class: "bs-chatbot-header__logo", role: "img", "aria-label": this.heading, innerHTML: GENIE_LOGO_SVG }), h("div", { key: '32f82e9f0a7caac8005270b8e7fddb51958db6ef', class: "bs-chatbot-header__actions" }, h("span", { key: '850e437877cc7a38d94fe915cdb36508823d6bb5', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'cc223071ce84b4279d383e9ed489af4cd29c5400', type: "button", part: "new-chat", class: "bs-chatbot-header__button", "aria-label": "New chat", onClick: this.onNewChatClick }, h("slot", { key: 'c1cf2e98f1fe70050c1cdc86626d818954987fd3', name: "new-chat-icon" }, h(NewChatIcon, { key: '3195d3c48fadb448eeed765bfc4634afa7259e58' }))), h("bs-tooltip", { key: 'e60f561f7837a4c2c6e3c660a0b42fbf760a9b45', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "New chat")), h("span", { key: 'b1892cec33d77a20f18b2f4d24a43bfa8960bccc', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '8391cd76856dd02a27097f37ffc4988f7f22e0e9', type: "button", part: "history", class: "bs-chatbot-header__button", "aria-label": "History", onClick: this.onHistoryClick }, h("slot", { key: 'bdfa76904127ed12872b32b306de25f07e24b143', name: "history-icon" }, h(HistoryIcon, { key: '03a0274814c4ab48cfc1079ab7a68d23cc14cc2b' }))), h("bs-tooltip", { key: 'c24f6a546611a2d5eff5f1b8d6db36696f3247c6', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "History")), h("span", { key: '735bf2953d83ab2f64fc6d5f7a2b0e0fc615c1a3', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '93ebb0b2211c9dab1caccc34d3d22630b77bbb35', 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: 'f33c3762fe0cb122a12fbdc6e82f2e6aa2b8dfd5', name: "expand-icon" }, h(ExpandIcon, { key: '29b06bcab56fc11322fa142a826f75740a737213' }))), h("bs-tooltip", { key: '771b316816cdab7f119f4e1c5bc86f3a7e3a5714', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, this.expanded ? 'Collapse' : 'Expand')), h("span", { key: '7d2c13b669e54e81a5be120ed9f083742e507645', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '37a176ca2b413927ceb89bb35c386d05ad3368e9', type: "button", part: "close", class: "bs-chatbot-header__button", "aria-label": "Close", onClick: this.onCloseClick }, h("slot", { key: 'ce00fb1c1e30e125fcbe50c7e936d929847aa176', name: "close-icon" }, h(CloseIcon, { key: '78cbf21b668cc7db478cb6a84383a734c00d790b' }))), h("bs-tooltip", { key: '298dceb184e4581c3b46da8197b59e84074e1dc8', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "Close")))));
+        return (h("div", { key: 'eb1869272c6e4e3f769a7db50aeab3bc6430c568', class: "bs-chatbot-header", role: "banner", "aria-label": this.heading }, h("div", { key: '885c7dd1281d942ecbedc19bd206d71bf4f318dc', part: "logo", class: "bs-chatbot-header__logo", role: "img", "aria-label": this.heading, innerHTML: GENIE_LOGO_SVG }), h("div", { key: '230753627632b68cd80cce5787d1dd727e6f983c', class: "bs-chatbot-header__actions" }, h("span", { key: '278c6c23496c57f485b4c2f20e311f47dd59d5b9', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '161519508618cee3cc7de4193eed51f79a1e3d04', type: "button", part: "new-chat", class: "bs-chatbot-header__button", "aria-label": "New chat", onClick: this.onNewChatClick }, h("slot", { key: 'a914bb9346fcc941041d1ffddb2e5d6ae2ef8c87', name: "new-chat-icon" }, h(NewChatIcon, { key: 'c510836b89605d8ffce85e9908393688e42c274c' }))), h("bs-tooltip", { key: 'a852098d08983550e88a45c105f520a3a13df931', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "New chat")), h("span", { key: 'b3f6f0a9d9b136feeef1c248b768d67583773a34', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '657c4449342ee03f8b3945dc156e2cd9e87c3e2c', type: "button", part: "history", class: "bs-chatbot-header__button", "aria-label": "History", onClick: this.onHistoryClick }, h("slot", { key: '2166286312406c8027b2929ce182e138ff5c9a69', name: "history-icon" }, h(HistoryIcon, { key: '986f5ad358889fca9a1eb3707d64552fabd43d73' }))), h("bs-tooltip", { key: 'cf47b5e52c844342283ec353e68ae44c849c4700', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "History")), h("span", { key: 'c53649c46dfbdb7131ffad4851347b74e36930b1', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'f9ea9ce41ed06d72bce86f9304d21e5617a6b74f', 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: 'b322d0d7ceab41872f4d8e8cc25c5b0bb0f80ef6', name: "expand-icon" }, h(ExpandIcon, { key: '82b5f89e9fe0860abe36b7fff55c1d033f7347fa' }))), h("bs-tooltip", { key: 'f4ba617724037b2bc038c66c474f436e49566987', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, this.expanded ? 'Collapse' : 'Expand')), h("span", { key: '358776a595674bcb628d81969be1f04775514367', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'a22a03e497f6d254f37f666c09c46a32b52f9fea', type: "button", part: "close", class: "bs-chatbot-header__button", "aria-label": "Close", onClick: this.onCloseClick }, h("slot", { key: '02a6d784ff8b2f63c8b71912d62ad250a2fa3738', name: "close-icon" }, h(CloseIcon, { key: '716bddeb32669154197a59401e72c34c6e94f14e' }))), h("bs-tooltip", { key: '6649d7ab7192ac1e11995e90402b5936c1c6e638', 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: 'c15cc3a766e35be488da4b12bf723f03319eae99', class: "bs-chatbot-response-action" }, h("button", { key: 'bbe4c344d999149241bf01b59312e0067f4c506b', type: "button", part: "like", class: "bs-chatbot-response-action__button", "aria-label": "Like", onClick: this.onLikeClick }, h("slot", { key: '71305d3ca5a846f04e14d347a2a20df223476e72', name: "like-icon" }, h(ThumbsUpIcon, { key: '27bab65b5dcc421c073e5c6059ee93dcb9f240e5' }))), h("button", { key: '49fb53820c2897ea08ca02323d15c51eb01e8ee7', type: "button", part: "dislike", class: "bs-chatbot-response-action__button", "aria-label": "Dislike", onClick: this.onDislikeClick }, h("slot", { key: 'daefb77861d29f33489bde4d421586dc11cca122', name: "dislike-icon" }, h(ThumbsDownIcon, { key: '438a1002406f1a6275eb3b25dacb70aa102666b2' }))), h("button", { key: 'decf278674a50c0ff2916f7d6ee453789bd0446e', type: "button", part: "copy", class: "bs-chatbot-response-action__button", "aria-label": "Copy", onClick: this.onCopyClick }, h("slot", { key: '062eaa99d2f41f0f989939bc89266de8e54ed42d', name: "copy-icon" }, h(CopyIcon, { key: '98594b5cfba143d72d872c7a7a0e19c0d56085a4' }))), h("button", { key: '7b84279224fc9aa5ccb33b8254a777b934ebae06', type: "button", part: "regenerate", class: "bs-chatbot-response-action__button", "aria-label": "Regenerate", onClick: this.onRegenerateClick }, h("slot", { key: 'dd903ba58db6e7d15e5805c4a1d2e71d1ace2b9d', name: "regenerate-icon" }, h(RegenerateIcon, { key: 'e992a8c626bf5e47af8c8e5f6c815aa7f1400b11' }))), h("div", { key: 'd0f17f4dd1f0180a48fda6b58bd3f0c1f882ffd7', class: "bs-chatbot-response-action__menu-wrapper" }, h("button", { key: 'e0053f4919e3225d8718384d993272287f2b4127', 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: '2dd181588120f6fb53444687a802ab348e98ca10', name: "menu-icon" }, h(MenuIcon, { key: 'b283baf6f54bce2d521c7b557ebf72f69c91e3fe' }))), this.menuOpen && (h("div", { key: '751a5ccbc9ea79b4b350cb2406132751334260a9', class: "bs-chatbot-response-action__menu-popup" }, h("slot", { key: '2af8bdb559468514e300e3aa840f2021384de021', name: "menu" })))), hasSources && (h("button", { key: 'ca88da48fc486e77f9727aaa2f94df629dd97bb6', type: "button", part: "sources", class: "bs-chatbot-response-action__sources", onClick: this.onSourcesClick }, h("slot", { key: 'db1b6edddaa0e8ee12a71a08bea5b16701820947', name: "sources-icon" }, h(SourcesIcon, { key: 'ae3a163e2f280985baba92b9d4efc28129acf0e5' })), h("span", { key: '1b389177029e2f090e6aa78b5d8128b8dc7f2d3e', class: "bs-chatbot-response-action__sources-label" }, this.sourcesCount, " ", this.sourcesCount === 1 ? 'source' : 'sources')))));
+        return (h("div", { key: '532e40c28571d004133c3209dc4495b5861e0a1c', class: "bs-chatbot-response-action" }, h("button", { key: '94751f1e91f6dd502763aa8fa347a2a96680e691', type: "button", part: "like", class: "bs-chatbot-response-action__button", "aria-label": "Like", onClick: this.onLikeClick }, h("slot", { key: 'ebeae804bd521958538fe539304489721c326ac0', name: "like-icon" }, h(ThumbsUpIcon, { key: 'ebf5446f16a8bd8836ff81a56a71b7f8b01f86b8' }))), h("button", { key: 'f55439692b799199a3b93b98d10b6ab8338eae2b', type: "button", part: "dislike", class: "bs-chatbot-response-action__button", "aria-label": "Dislike", onClick: this.onDislikeClick }, h("slot", { key: '5c836e450855155c7a0ef48086ad5328972686a3', name: "dislike-icon" }, h(ThumbsDownIcon, { key: '452664dbcbb54a5ef07355a5c31b56c10d7b7a92' }))), h("button", { key: 'f97c483dbd6cc1a9892e4df8fd350c0b245643ac', type: "button", part: "copy", class: "bs-chatbot-response-action__button", "aria-label": "Copy", onClick: this.onCopyClick }, h("slot", { key: 'f7d8b19c0c4f962dc344e069bc1d2d1ff8dd8d3f', name: "copy-icon" }, h(CopyIcon, { key: 'ad7a2d9f1e6821e0b3c73b6be8566804d50a6f14' }))), h("button", { key: '7e56271188b55e1943d2150dc36a6ad1951ec784', type: "button", part: "regenerate", class: "bs-chatbot-response-action__button", "aria-label": "Regenerate", onClick: this.onRegenerateClick }, h("slot", { key: '1a800da6dc0d1ba570b82c4c1b973bbb5033f8ea', name: "regenerate-icon" }, h(RegenerateIcon, { key: '752607bbf68aa8427d141035a1aa3f463f60a3ae' }))), h("div", { key: 'a4a51c3a1b22cfada07978a9a6f5a536af54d220', class: "bs-chatbot-response-action__menu-wrapper" }, h("button", { key: 'c96c865aea4773efbf441992a1a3d1218c1efe28', 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: '5aa856322bdb5295e8d52c03931fcf734bb4606c', name: "menu-icon" }, h(MenuIcon, { key: '3fded797bdc3c19e3353b1703e8e20b59d2833d3' }))), this.menuOpen && (h("div", { key: 'a9848b1d6c93b11b28fd782ba53c270b47b515da', class: "bs-chatbot-response-action__menu-popup" }, h("slot", { key: 'a3ff06257fcb00941a0b7abffba29c63403519bb', name: "menu" })))), hasSources && (h("button", { key: '3862519b2af2ada55c51f683c8ef6fa7161b9879', type: "button", part: "sources", class: "bs-chatbot-response-action__sources", onClick: this.onSourcesClick }, h("slot", { key: '33521c0bf865f639973809f46afaf5e50f257f6b', name: "sources-icon" }, h(SourcesIcon, { key: '8995e91b856bb62c66226025afc660bde1698148' })), h("span", { key: '04220d48facffd829612c83ebd4c75717e25056f', 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: '7e7d4e927e584807577e02ab2d6811b8eb26d850', class: "bs-chatbot-sources-drawer", role: "region", "aria-label": this.heading }, h("div", { key: '3feb972675a7472bfd49f0164c8af1767ce82af0', class: "bs-chatbot-sources-drawer__header" }, h("div", { key: '5b0f70d84ba6656fcb516cb53fbc63150d013059', class: "bs-chatbot-sources-drawer__title-group" }, h("h2", { key: '6913fb84bc901a8538f74096f74df98103a87b35', part: "heading", class: "bs-chatbot-sources-drawer__heading" }, this.heading), displayCount > 0 && (h("span", { key: '6eda1f962cd7bfc8bd120454988372590784458b', part: "count", class: "bs-chatbot-sources-drawer__count" }, displayCount))), h("button", { key: '7db71240b8e5150de1e4e8f68e0d9b0bce7788c5', type: "button", part: "collapse", class: "bs-chatbot-sources-drawer__collapse", "aria-label": "Collapse sources", onClick: this.onCollapseClick }, h("slot", { key: '79c14cfe115966d1e53e0f9c673393128211bb85', name: "collapse-icon" }, h(CaretRightIcon, { key: 'e5f316c75642b5ec23c46d3ae6361c97cabee2a7' })))), h("div", { key: 'fec3cbebcc8522f84fdb4ba20c8b463d322116c9', part: "list", class: "bs-chatbot-sources-drawer__list" }, h("slot", { key: '8c23cd4194267439fa5f903ff33bc090771007c4', onSlotchange: this.onSlotchange }))));
+        return (h("div", { key: 'cdfd3716db3d500d357314994aff14bb404a6572', class: "bs-chatbot-sources-drawer", role: "region", "aria-label": this.heading }, h("div", { key: '6db7d6c785ebdeecc337841a9247b787a6fca119', class: "bs-chatbot-sources-drawer__header" }, h("div", { key: 'a2c992059ab69fcc1c7e02d59349818101d067c9', class: "bs-chatbot-sources-drawer__title-group" }, h("h2", { key: 'b72108d341794d69a40cc00d61e05fbb5bc5a1ff', part: "heading", class: "bs-chatbot-sources-drawer__heading" }, this.heading), displayCount > 0 && (h("span", { key: '9a6fc6effd4f044c4237b12a032cd4dc0b67518c', part: "count", class: "bs-chatbot-sources-drawer__count" }, displayCount))), h("button", { key: '24748019d108acfdc4b9743e7a82142d072cd548', type: "button", part: "collapse", class: "bs-chatbot-sources-drawer__collapse", "aria-label": "Collapse sources", onClick: this.onCollapseClick }, h("slot", { key: 'cedf7ecd8006cd0c34fabaeb5230082b0d9df9d3', name: "collapse-icon" }, h(CaretRightIcon, { key: '73c9b27651ae8adf387ae0480a0174ac03467d10' })))), h("div", { key: 'f9197d1326305d89297cdddd10e14d78dc46248e', part: "list", class: "bs-chatbot-sources-drawer__list" }, h("slot", { key: 'aece928a19516645ec18c8ec1836861dca975366', 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: '0a980666835a143d72291370b4575d069964a477', type: "button", part: "button", class: "bs-chatbot-suggestion-button", disabled: this.disabled, onClick: this.onClick }, h("slot", { key: '76a4e8f5773259d52c34d46a6eb8a63b32bfc647' })));
+        return (h("button", { key: '92fa701db3f36e192af92ebe87d615825c2160dd', type: "button", part: "button", class: "bs-chatbot-suggestion-button", disabled: this.disabled, onClick: this.onClick }, h("slot", { key: 'eff01e89ea8293e6bf7cccb2c64ba2ba9dc49b7f' })));
     }
     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: '48c41b6a2367d0d25c2613bcb0a7351e4a6008c5', part: "container", class: "bs-checkbox-skeleton", role: "status", "aria-label": "Loading" }, h("span", { key: '9b70627ab11ab9488f3293c3773887e8517e67e5', part: "box", class: `bs-checkbox-skeleton__box bs-checkbox-skeleton__box--${this.size}` }), h("span", { key: 'e520369b9d4ced5c85089ae13ce97d42b4e7b344', part: "label", class: "bs-checkbox-skeleton__label" })));
+        return (h("span", { key: 'bbe085c38caf6b80e558868ff208d21c107cd3d3', part: "container", class: "bs-checkbox-skeleton", role: "status", "aria-label": "Loading" }, h("span", { key: '5d5a368f1e2c61991c7bde7398634084294cb503', part: "box", class: `bs-checkbox-skeleton__box bs-checkbox-skeleton__box--${this.size}` }), h("span", { key: 'c39d0ceace38a2f611f4b476d1a295372d220b81', part: "label", class: "bs-checkbox-skeleton__label" })));
     }
     static get is() { return "bs-checkbox-skeleton"; }
     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: '5ed45b30aa94816ea44c6bc4824d5e9854971607', 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: '8bbbcb477640c5d34136b7507b8faa63fd2bcbed', part: "icon", class: `bs-chip-filter__icon ${this.hasIcon ? 'bs-chip-filter__icon--visible' : ''}` }, h("slot", { key: 'b15f49e78ed83f9dd25c45de35cec754d2e01606', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '5d62b8b0500ce995cf3c1f4710b0b7f535bf228d', part: "label", class: "bs-chip-filter__label" }, h("slot", { key: '0e8a6434bbd31308034fcb19f7d1b9df210c7a1b' })), this.dropdown && (h("span", { key: 'cb11b64425dc06173389bc6c50f259d5c880006a', part: "caret", class: "bs-chip-filter__caret", "aria-hidden": "true" }, h(ChevronDownIcon, { key: '27d7ac0eecbdbfc22d37f295cdda776c2cfbf346' })))));
     }
     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-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: '3174350ad304e38046eafeaee35d02967353f15e', class: `bs-composer bs-composer--${this.state} bs-composer--${this.variant}` }, h("div", { key: 'fc87d604bcdce8ac0f32ce61d74373349bebb1a1', part: "attachments", class: `bs-composer__attachments-row ${this.hasAttachments ? 'bs-composer__attachments-row--visible' : ''}` }, h("slot", { key: '180a6243b0073926464db98fcaf8c055c759cec1', name: "attachments", onSlotchange: this.onAttachmentsSlotchange })), h("div", { key: '8dde3d4aafba78bc975635339c432526d6150228', class: "bs-composer__text-row" }, h("textarea", { key: '83cff2a497c6f9625a3111882bb232b2ed007ec8', 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: 'dbcca68b952b2d6945dc8ba912d13888d2460661', class: "bs-composer__controls-row" }, h("button", { key: '2e28ba84020fa9982ca531e5590abc757c4974de', type: "button", part: "attach", class: "bs-composer__attach", "aria-label": "Attach", onClick: this.onAttachClick }, h(PlusIcon, { key: '205351174ac718872ef0e088359c4005834f33e9' })), 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: 'ad9f28bf859112f5f3570ecd21dbb154feaf87a7', 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: '72c0abd1da7c5e0495e5a40bfc067680bd6b6ca5', 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: '09ee67b7a7aaa4a1a608b6d1b603b941ca94a02f', 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-data-table/bs-data-table.cmp.test.js

@@ -0,0 +1,108 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+const columns = [
+    { key: 'name', label: 'Name' },
+    { key: 'status', label: 'Status' },
+];
+const rows = [
+    { id: 1, name: 'Amelia', status: 'Active' },
+    { id: 2, name: 'Noah', status: 'Active' },
+    { id: 3, name: 'Priya', status: 'On leave' },
+];
+describe('bs-data-table', () => {
+    describe('select-all checkbox', () => {
+        it('renders a select-all checkbox in the header when selectable', async () => {
+            const { root } = await render(h("bs-data-table", { selectable: true, columns: columns, rows: rows }));
+            const selectAll = root.shadowRoot.querySelector('thead input[type="checkbox"]');
+            expect(selectAll).not.toBeNull();
+            expect(selectAll.checked).toBe(false);
+            expect(selectAll.indeterminate).toBe(false);
+        });
+        it('does not render a select-all checkbox when not selectable', async () => {
+            const { root } = await render(h("bs-data-table", { columns: columns, rows: rows }));
+            expect(root.shadowRoot.querySelector('thead input[type="checkbox"]')).toBeNull();
+        });
+        it('becomes indeterminate when some but not all rows are selected', async () => {
+            const { root, waitForChanges } = await render(h("bs-data-table", { selectable: true, columns: columns, rows: rows }));
+            const rowCheckbox = root.shadowRoot.querySelector('tbody input[type="checkbox"]');
+            rowCheckbox.checked = true;
+            rowCheckbox.dispatchEvent(new Event('change'));
+            await waitForChanges();
+            const selectAll = root.shadowRoot.querySelector('thead input[type="checkbox"]');
+            expect(selectAll.indeterminate).toBe(true);
+            expect(selectAll.checked).toBe(false);
+        });
+        it('is checked when every row is selected', async () => {
+            const { root, waitForChanges } = await render(h("bs-data-table", { selectable: true, columns: columns, rows: rows }));
+            const rowCheckboxes = Array.from(root.shadowRoot.querySelectorAll('tbody input[type="checkbox"]'));
+            for (const checkbox of rowCheckboxes) {
+                checkbox.checked = true;
+                checkbox.dispatchEvent(new Event('change'));
+            }
+            await waitForChanges();
+            const selectAll = root.shadowRoot.querySelector('thead input[type="checkbox"]');
+            expect(selectAll.checked).toBe(true);
+            expect(selectAll.indeterminate).toBe(false);
+        });
+        it('selects all rows and emits bsRowSelect for each row when clicked', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-data-table", { selectable: true, columns: columns, rows: rows }));
+            const selectSpy = spyOnEvent('bsRowSelect');
+            const selectAll = root.shadowRoot.querySelector('thead input[type="checkbox"]');
+            selectAll.checked = true;
+            selectAll.dispatchEvent(new Event('change'));
+            await waitForChanges();
+            expect(selectSpy).toHaveReceivedEventTimes(3);
+            const rowCheckboxes = Array.from(root.shadowRoot.querySelectorAll('tbody input[type="checkbox"]'));
+            expect(rowCheckboxes.every(checkbox => checkbox.checked)).toBe(true);
+        });
+        it('deselects all rows when unchecked', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-data-table", { selectable: true, columns: columns, rows: rows }));
+            const selectAll = root.shadowRoot.querySelector('thead input[type="checkbox"]');
+            selectAll.checked = true;
+            selectAll.dispatchEvent(new Event('change'));
+            await waitForChanges();
+            const selectSpy = spyOnEvent('bsRowSelect');
+            selectAll.checked = false;
+            selectAll.dispatchEvent(new Event('change'));
+            await waitForChanges();
+            expect(selectSpy).toHaveReceivedEventTimes(3);
+            const rowCheckboxes = Array.from(root.shadowRoot.querySelectorAll('tbody input[type="checkbox"]'));
+            expect(rowCheckboxes.every(checkbox => !checkbox.checked)).toBe(true);
+        });
+    });
+    describe('clearSelection()', () => {
+        it('resets selection state and emits bsRowSelect for previously selected rows', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-data-table", { selectable: true, columns: columns, rows: rows }));
+            const rowCheckbox = root.shadowRoot.querySelector('tbody input[type="checkbox"]');
+            rowCheckbox.checked = true;
+            rowCheckbox.dispatchEvent(new Event('change'));
+            await waitForChanges();
+            const selectSpy = spyOnEvent('bsRowSelect');
+            await root.clearSelection();
+            await waitForChanges();
+            expect(selectSpy).toHaveReceivedEventTimes(1);
+            expect(selectSpy).toHaveReceivedEventDetail({ id: 1, selected: false });
+            const checkboxesAfterClear = Array.from(root.shadowRoot.querySelectorAll('tbody input[type="checkbox"]'));
+            expect(checkboxesAfterClear.every(checkbox => !checkbox.checked)).toBe(true);
+        });
+        it('emits no event when nothing was selected', async () => {
+            const { root, spyOnEvent } = await render(h("bs-data-table", { selectable: true, columns: columns, rows: rows }));
+            const selectSpy = spyOnEvent('bsRowSelect');
+            await root.clearSelection();
+            expect(selectSpy).toHaveReceivedEventTimes(0);
+        });
+    });
+    describe('cellRenderer', () => {
+        it('renders default cell values as escaped text, never interpreted as HTML', async () => {
+            const maliciousRows = [{ id: 1, name: '<img src=x onerror="window.__xss = true">', status: 'Active' }];
+            const { root } = await render(h("bs-data-table", { columns: columns, rows: maliciousRows }));
+            const cell = root.shadowRoot.querySelector('tbody td');
+            expect(cell.querySelector('img')).toBeNull();
+            expect(cell.textContent).toBe('<img src=x onerror="window.__xss = true">');
+        });
+        it('still allows cellRenderer to render trusted custom HTML when explicitly supplied', async () => {
+            const { root } = await render(h("bs-data-table", { columns: columns, rows: rows, cellRenderer: () => '<button type="button">Edit</button>' }));
+            const cell = root.shadowRoot.querySelector('tbody td');
+            expect(cell.querySelector('button')).not.toBeNull();
+        });
+    });
+});