@brandsync/wc 0.0.11 → 0.0.12

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: 'b67eb065f0bacc73cea6cfba97f95db26d939fef', class: "bs-chatbot-header", role: "banner", "aria-label": this.heading }, h("div", { key: '14495ee7659e6d9198799b19fe2482996acd9cb1', part: "logo", class: "bs-chatbot-header__logo", role: "img", "aria-label": this.heading, innerHTML: GENIE_LOGO_SVG }), h("div", { key: '4f90a6351c004327440e92ca32a7d5f16dc10f35', class: "bs-chatbot-header__actions" }, h("span", { key: '77a7a55d92a4844778cd2f9e968e497b6f6dc3ec', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '5e7e9ad3beb2a74d05178fb3b847994284b84078', type: "button", part: "new-chat", class: "bs-chatbot-header__button", "aria-label": "New chat", onClick: this.onNewChatClick }, h("slot", { key: '71fdc53fdb397fdb45a1e05d4ecf4505f2ee6546', name: "new-chat-icon" }, h(NewChatIcon, { key: '1ca210d70f3a16869092cf681d737c698b136e52' }))), h("bs-tooltip", { key: 'ec6e597102a7bccfbe82f3d4cdd24f6e9939671c', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "New chat")), h("span", { key: '5ab09f2170faa1e820ae43034e8d2c28263c8f9b', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '457c6b31a93bc8afb9f6140283332f1e9cece997', type: "button", part: "history", class: "bs-chatbot-header__button", "aria-label": "History", onClick: this.onHistoryClick }, h("slot", { key: 'cec925b6dc90978e447ac2abe519fd39299f719d', name: "history-icon" }, h(HistoryIcon, { key: 'aec4f574f79fc80266cadb78d4db3a5e5a791af7' }))), h("bs-tooltip", { key: '76a28dd05c9648a27cb47d843a48c71b2a4736a1', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "History")), h("span", { key: 'f77e9dfc1640fd0820f1afdc47692767307793ed', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'd6c09ae435f7c43141990ac411bbfdd48be2746d', 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: 'd98d678009f56c298289527c505eb9863a783155', name: "expand-icon" }, h(ExpandIcon, { key: 'b5717154a53b3d6745a20de74f2e2a51497f1718' }))), h("bs-tooltip", { key: 'ee742bdb2e8f948756ea1f9b13ee2a1c35d0597d', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, this.expanded ? 'Collapse' : 'Expand')), h("span", { key: '7a19e71b35be8052f206beff78531f17ff080dab', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '758ddf35814919c575699bd27fdc303a80ef7307', type: "button", part: "close", class: "bs-chatbot-header__button", "aria-label": "Close", onClick: this.onCloseClick }, h("slot", { key: 'c545d1a724431ccff6593ba3047462bd9bfaefeb', name: "close-icon" }, h(CloseIcon, { key: '4ed2a585be65e2c77200ceeb2b99329afda177a3' }))), h("bs-tooltip", { key: '9ce32d5f9772d91fea7a937341a5866938d87ac5', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "Close")))));
+        return (h("div", { key: 'f867f6c63e8931079fbbee1ce4dc7b74f6bf7ddd', class: "bs-chatbot-header", role: "banner", "aria-label": this.heading }, h("div", { key: 'a91afd437bbe43e9be65d64df36688d8d885916d', part: "logo", class: "bs-chatbot-header__logo", role: "img", "aria-label": this.heading, innerHTML: GENIE_LOGO_SVG }), h("div", { key: '3dddaab00c3b983b1e86be356eec9c07c415de1b', class: "bs-chatbot-header__actions" }, h("span", { key: '0f0b3388022c75ef0e04c1bb41a826fb0318764d', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '7b1eb2edc2414fece90681b1d56de3a9b0c7171c', type: "button", part: "new-chat", class: "bs-chatbot-header__button", "aria-label": "New chat", onClick: this.onNewChatClick }, h("slot", { key: 'a4ff761ddc7b3dbcfe449a89f731561cb3b85d0a', name: "new-chat-icon" }, h(NewChatIcon, { key: 'b2244e10010085b85a258413f7391180f6b3a20f' }))), h("bs-tooltip", { key: 'b24f3b73d6cfca88f14e12e7bc0ad0634d3338c1', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "New chat")), h("span", { key: '94a5bf67800ea1a608a04a0bb33d1a7aed053045', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '49bb1dc0956c021becaaf562146352b9abcc415b', type: "button", part: "history", class: "bs-chatbot-header__button", "aria-label": "History", onClick: this.onHistoryClick }, h("slot", { key: 'f2c6dc057674cfc803d822d936b3fcf9d6f2f576', name: "history-icon" }, h(HistoryIcon, { key: '0ededb5c7c553f1a6723f3d20b734cb5200b2a4d' }))), h("bs-tooltip", { key: 'd533c9ac7661d89d8c8fe4865639c6d4fdab5ca3', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "History")), h("span", { key: 'e183c44cd967d683fa8de2c53c53913b0a1a19e4', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'f3af2b7730e1410f97fc46612148c1728be67517', 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: '808dcea2f16a09615efa1e17c7cdaadb35cac494', name: "expand-icon" }, h(ExpandIcon, { key: '58487c506c21b5e4214be89ef37126ee9404550b' }))), h("bs-tooltip", { key: 'e89cd45c9c34e840bb316ac2acc281d8bbc09eb4', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, this.expanded ? 'Collapse' : 'Expand')), h("span", { key: '1ccdb12018a5e0bffb6e50fb4974799f177cf943', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'e416fe4e56f37b9c623e86764cf5e3a510e89657', type: "button", part: "close", class: "bs-chatbot-header__button", "aria-label": "Close", onClick: this.onCloseClick }, h("slot", { key: 'db32a3957b3d635e34665ea4b3022d888bd4c5c8', name: "close-icon" }, h(CloseIcon, { key: '1062922ee3b32445503c2bc81913806f1684683b' }))), h("bs-tooltip", { key: '90d5458d0eb14e99767ea5b1d0e8c9b23b51aaeb', 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: '7d97251380f7e6b002eaafb3699ea981d5068555', class: "bs-chatbot-response-action" }, h("button", { key: 'd05f73b0f1d1f9f03a452397ef3206a866abcefc', type: "button", part: "like", class: "bs-chatbot-response-action__button", "aria-label": "Like", onClick: this.onLikeClick }, h("slot", { key: '30b7a9da1dd2c317ac7c4ecbdda76c0f146a3495', name: "like-icon" }, h(ThumbsUpIcon, { key: 'b5bf2e9915a5c1263e18304f4b487807cc256879' }))), h("button", { key: 'f601202a175a47978595d080d938ce48be1715d8', type: "button", part: "dislike", class: "bs-chatbot-response-action__button", "aria-label": "Dislike", onClick: this.onDislikeClick }, h("slot", { key: 'c141f978f453abc6062e8274a4fdb6e1f80ac5b2', name: "dislike-icon" }, h(ThumbsDownIcon, { key: '158799c27d18b62152937e7485cec5a23598d177' }))), h("button", { key: 'cdb6b1ab5f2bb12e43ae3ab0fa73a81e24ba1f16', type: "button", part: "copy", class: "bs-chatbot-response-action__button", "aria-label": "Copy", onClick: this.onCopyClick }, h("slot", { key: '8e9387d18ed444da1b7d20f4a6b60e7c2fae32bc', name: "copy-icon" }, h(CopyIcon, { key: '7c1cfede4ef084babd7aeeb3a2a3817ca4346663' }))), h("button", { key: 'f4e190de92eb4936594f4701c406c3b2bc1f84c8', type: "button", part: "regenerate", class: "bs-chatbot-response-action__button", "aria-label": "Regenerate", onClick: this.onRegenerateClick }, h("slot", { key: 'c52e03dc83f047125a5bd1c73cafba8b71a21fed', name: "regenerate-icon" }, h(RegenerateIcon, { key: '1564599695557eea663d770779301c34e815cbf5' }))), h("div", { key: '90a6b3c75e169be71c217ac8b711bb2ca001ee49', class: "bs-chatbot-response-action__menu-wrapper" }, h("button", { key: '2d8d25c6e183638233ef9287360bc0969f2fa2ac', 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: 'f992794d9e964c830e1780078ea83abec1be471b', name: "menu-icon" }, h(MenuIcon, { key: '4b75676316bc826b3a7cd19cba8f46b8ceacf19c' }))), this.menuOpen && (h("div", { key: 'f24430ebab56eda589f19f7cb9f3f1c31d7185cb', class: "bs-chatbot-response-action__menu-popup" }, h("slot", { key: '2978dee3a0d5521e805a4496d6e33c6b31b52fc6', name: "menu" })))), hasSources && (h("button", { key: '1ab402dd2ef3c97b5b30d86e4f1e3db4f879baf9', type: "button", part: "sources", class: "bs-chatbot-response-action__sources", onClick: this.onSourcesClick }, h("slot", { key: 'f2cf31ff9311d8c888f2b8a0130a9f82161c4b8f', name: "sources-icon" }, h(SourcesIcon, { key: '333dae604a7eb80319b8e822c332067076e4a04d' })), h("span", { key: '04929996660675c23f1a02fc1d756d6735b58b8d', class: "bs-chatbot-response-action__sources-label" }, this.sourcesCount, " ", this.sourcesCount === 1 ? 'source' : 'sources')))));
+        return (h("div", { key: '7bec7f4a10f842d706ae24aca5d4e265420d9ddf', class: "bs-chatbot-response-action" }, h("button", { key: '750e004f98f72f3737468bda9985484d344ebaa3', type: "button", part: "like", class: "bs-chatbot-response-action__button", "aria-label": "Like", onClick: this.onLikeClick }, h("slot", { key: '2706c270afcf0c71b94e28bef5ab803a29168508', name: "like-icon" }, h(ThumbsUpIcon, { key: '8fe6d8d403e8d2a80b37edd10e7b4f56197ad544' }))), h("button", { key: 'e807b85ddd08e2a37239fe3927f1a385371b6e60', type: "button", part: "dislike", class: "bs-chatbot-response-action__button", "aria-label": "Dislike", onClick: this.onDislikeClick }, h("slot", { key: 'd6dbcbd2ee1b7e74e05dd2cbae1c69d98e414904', name: "dislike-icon" }, h(ThumbsDownIcon, { key: 'f10796ec4a207e9f8eb55441b762e8873a2c615f' }))), h("button", { key: 'd6452d6a3cbb9aec60e65085086c312dc8723ce9', type: "button", part: "copy", class: "bs-chatbot-response-action__button", "aria-label": "Copy", onClick: this.onCopyClick }, h("slot", { key: '9f650bebcaef7cdf4797bc94c28f934887954722', name: "copy-icon" }, h(CopyIcon, { key: 'bc8fcfd2c9b2d3b0b634f3c92750ffea8b301270' }))), h("button", { key: 'f7b7fc1048a3e641c460e0708e3f751178c337da', type: "button", part: "regenerate", class: "bs-chatbot-response-action__button", "aria-label": "Regenerate", onClick: this.onRegenerateClick }, h("slot", { key: '79cc6721191aff640823fdea839668edddfb5746', name: "regenerate-icon" }, h(RegenerateIcon, { key: '4f8dcfcae578dc5d66e7707f961717a5dd513e20' }))), h("div", { key: '15282bbecdec01239855b7e6637fab4f12801122', class: "bs-chatbot-response-action__menu-wrapper" }, h("button", { key: 'f5d2b3db52c76e129e1d56a4bef819cf1e8bc5ed', 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: '8796afebcc39b15c858bbea22ae377631da8ce2e', name: "menu-icon" }, h(MenuIcon, { key: '21a189fb8e61033e7644bf6e6c3eecb2ffa8e880' }))), this.menuOpen && (h("div", { key: 'd6617d1ff68199cdbdeabda382018fb48c0a1bd9', class: "bs-chatbot-response-action__menu-popup" }, h("slot", { key: 'b4645cb0ccf01b265efa56726ffb1fd5a8ec13db', name: "menu" })))), hasSources && (h("button", { key: '736c23e7560404a0e7177b372993317a84a19bf5', type: "button", part: "sources", class: "bs-chatbot-response-action__sources", onClick: this.onSourcesClick }, h("slot", { key: 'bb5187741f2cb4e470038753df41dcee2ceaf02e', name: "sources-icon" }, h(SourcesIcon, { key: '4d488a150dc6b86d1d6045b55f16bce22c5cdd22' })), h("span", { key: '02da04e9df74b4926cf8f0d6a4c7548c1bb1e699', 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: 'e71c8b6f4856092a6fd43fd6dcd8cda04d3a103e', class: "bs-chatbot-sources-drawer", role: "region", "aria-label": this.heading }, h("div", { key: 'f46a1383d8e95aeb83541b2620647839fbe4d3f9', class: "bs-chatbot-sources-drawer__header" }, h("div", { key: '62663736cb4f9e56a5b837da27b4d7d8915c1838', class: "bs-chatbot-sources-drawer__title-group" }, h("h2", { key: '765954b929796005966efaf5aa23ca68053a894e', part: "heading", class: "bs-chatbot-sources-drawer__heading" }, this.heading), displayCount > 0 && (h("span", { key: '562cfc14be64d938879fad31ab185a2f3a441e63', part: "count", class: "bs-chatbot-sources-drawer__count" }, displayCount))), h("button", { key: '8e538aa2aa31b54c8845c9c5d8ffd581cbf1028b', type: "button", part: "collapse", class: "bs-chatbot-sources-drawer__collapse", "aria-label": "Collapse sources", onClick: this.onCollapseClick }, h("slot", { key: '53b12abc52c217d3264ece6cf26daf8c5e01f84e', name: "collapse-icon" }, h(CaretRightIcon, { key: '90b61c4694fd1d908d74e47a19124327a001ce53' })))), h("div", { key: 'a7fc0ceb5b280867237ac3ce6c3bd314c7809075', part: "list", class: "bs-chatbot-sources-drawer__list" }, h("slot", { key: 'db40db9dad7f4e24c8eb0665e2286870f0800843', onSlotchange: this.onSlotchange }))));
+        return (h("div", { key: '8f71e38ceb897b13d7726495c8b27619e246af2b', class: "bs-chatbot-sources-drawer", role: "region", "aria-label": this.heading }, h("div", { key: 'ee57cd05934a900b71b5445f7d31caf8e038e774', class: "bs-chatbot-sources-drawer__header" }, h("div", { key: 'd9aa9f82aad30480bf52b7a701f094b9175e3a98', class: "bs-chatbot-sources-drawer__title-group" }, h("h2", { key: '913ac293e7af80ee142635ae7bd4b3339ac746b0', part: "heading", class: "bs-chatbot-sources-drawer__heading" }, this.heading), displayCount > 0 && (h("span", { key: 'ad659ddf56b745f915df9909c07a6a617e8e7d5a', part: "count", class: "bs-chatbot-sources-drawer__count" }, displayCount))), h("button", { key: '30ac395d5087496a955b956437dc9459eabcbe10', type: "button", part: "collapse", class: "bs-chatbot-sources-drawer__collapse", "aria-label": "Collapse sources", onClick: this.onCollapseClick }, h("slot", { key: 'aaa9629de257bb416c24e9b5b15ac634e71caf38', name: "collapse-icon" }, h(CaretRightIcon, { key: '9bbb6d7875cd5ce27ec63c03113a7982a6309814' })))), h("div", { key: 'aa0d81e61701b50231a802120443f0819b2b0a98', part: "list", class: "bs-chatbot-sources-drawer__list" }, h("slot", { key: 'cbfd567766318fc4d360804c4de5e591654a29c0', 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: 'ec0d9d02fe71438dc564a36d4e57bcf465b4395d', type: "button", part: "button", class: "bs-chatbot-suggestion-button", disabled: this.disabled, onClick: this.onClick }, h("slot", { key: '443a388996b21359df334af0319244f4c736e259' })));
+        return (h("button", { key: '4a8fe89091ddc9d343c58d22b35b9f8dc2691490', type: "button", part: "button", class: "bs-chatbot-suggestion-button", disabled: this.disabled, onClick: this.onClick }, h("slot", { key: 'f0295569d8aac7ad51116d3fde445dda7bcb24a6' })));
     }
     static get is() { return "bs-chatbot-suggestion-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,6 +7,16 @@ describe('bs-checkbox', () => {
         expect(input.checked).toBe(false);
         expect(root.shadowRoot.querySelector('[part="box"] [part="icon"]')).toBeNull();
     });
+    it('reflects ariaLabel to the native input, for label-less accessible names', async () => {
+        const { root } = await render(h("bs-checkbox", { ariaLabel: "Select all rows" }));
+        const input = root.shadowRoot.querySelector('input');
+        expect(input).toEqualAttribute('aria-label', 'Select all rows');
+    });
+    it('does not set aria-label on the native input when ariaLabel is not provided', async () => {
+        const { root } = await render(h("bs-checkbox", null));
+        const input = root.shadowRoot.querySelector('input');
+        expect(input).not.toHaveAttribute('aria-label');
+    });
     it('reflects the checked prop to the native input and shows the check icon', async () => {
         const { root } = await render(h("bs-checkbox", { checked: true }));
         const input = root.shadowRoot.querySelector('input');

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

@@ -180,10 +180,16 @@
 }
 
 .bs-checkbox__label {
-  font-size: var(--bs-font-size-sm);
+  font-size: var(--bs-font-size-md);
   color: var(--bs-checkbox-label-color);
 }
 
+/* Figma specs the label at fontsize/body/sm (14px) only for size="sm" -- size="md"/"lg" both use
+   fontsize/body/md (16px), which is the default set above. */
+.bs-checkbox__box--sm ~ .bs-checkbox__label {
+  font-size: var(--bs-font-size-sm);
+}
+
 .bs-checkbox--disabled .bs-checkbox__label {
   color: var(--bs-checkbox-label-color-disabled);
 }

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

@@ -43,6 +43,17 @@ export class BsCheckbox {
     /** Applies the error border/label-color treatment. This component's spec has no error message
      * text of its own (unlike `bs-input`'s `error: string`), so it's a plain boolean. */
     error = false;
+    /**
+     * Accessible name for the checkbox. Required whenever the default (label) slot is empty (e.g. a
+     * bare "select row" checkbox in a table) -- without it, the internal native `<input>` has no
+     * accessible name at all. Setting `aria-label` directly on the `<bs-checkbox>` host does NOT
+     * work for this: that attribute stays on the light-DOM host and is never forwarded into the
+     * shadow DOM by the browser, so the actual focusable element (the native `<input>` inside) stays
+     * nameless. This prop exists specifically to bridge that gap -- same pattern as `bs-button`'s and
+     * `bs-tab`'s identical `ariaLabel` prop, both of which explicitly bind it onto their own internal
+     * focusable element for the same reason.
+     */
+    ariaLabel = null;
     /** Emitted when the checked state changes via user interaction, with the new `checked` value. */
     bsChange;
     /** Keeps the native input's `.indeterminate` JS property in sync -- this can't be expressed as a
@@ -81,7 +92,7 @@ export class BsCheckbox {
         ]
             .filter(Boolean)
             .join(' ');
-        return (h("label", { key: 'a5cae53f4a82545ce4f9146891ad3a24c90ad2cf', class: `bs-checkbox ${this.disabled ? 'bs-checkbox--disabled' : ''}` }, h("input", { key: 'b9e40a9c3347bcb8517474209febd048bd853e25', 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), onChange: this.onChange }), h("span", { key: '60af78d14456f4cb65d6e9e7aa54f4b4bce84cfe', part: "box", class: boxClasses }, showIcon && (h("svg", { key: '5c64f14f979b866a71290584931f994fc485fb70', 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: 'd0993da246362d50fc924e8e6e9e9465cbec631f', part: "label", class: "bs-checkbox__label" }, h("slot", { key: '719bb1f6c842f9a482f2672490f5df1025090d87' }))));
+        return (h("label", { key: '04fb1da55eb6a0e91fd705db9217f5e2c0992f89', class: `bs-checkbox ${this.disabled ? 'bs-checkbox--disabled' : ''}` }, h("input", { key: '06b83f45f7dfe52cd81eab603742d04d74135c7a', 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: 'a8a8b45074eef7cfcb5f579eff0fb7b27b71d25a', part: "box", class: boxClasses }, showIcon && (h("svg", { key: '78cf717b4cd7fbf8c56a76788a22c8aecf7fcc28', 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: '2d78205d8091c89ac3a6d07cbb74b6d6a9c09971', part: "label", class: "bs-checkbox__label" }, h("slot", { key: '7da0c6d1f84b788b242b95b11d78e566f482b48c' }))));
     }
     static get is() { return "bs-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -203,6 +214,26 @@ export class BsCheckbox {
                 "reflect": false,
                 "attribute": "error",
                 "defaultValue": "false"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the checkbox. Required whenever the default (label) slot is empty (e.g. a\nbare \"select row\" checkbox in a table) -- without it, the internal native `<input>` has no\naccessible name at all. Setting `aria-label` directly on the `<bs-checkbox>` host does NOT\nwork for this: that attribute stays on the light-DOM host and is never forwarded into the\nshadow DOM by the browser, so the actual focusable element (the native `<input>` inside) stays\nnameless. This prop exists specifically to bridge that gap -- same pattern as `bs-button`'s and\n`bs-tab`'s identical `ariaLabel` prop, both of which explicitly bind it onto their own internal\nfocusable element for the same reason."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "null"
             }
         };
     }

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

@@ -2,7 +2,7 @@ import { render, h, describe, it, expect } from "@stencil/vitest";
 describe('bs-composer', () => {
     it('renders with idle state defaults: ai variant placeholder, enabled mic/action buttons', async () => {
         const { root } = await render(h("bs-composer", null));
-        const input = root.shadowRoot.querySelector('input');
+        const input = root.shadowRoot.querySelector('textarea');
         expect(input).toEqualAttribute('placeholder', 'Ask Genie something...');
         expect(input).not.toHaveAttribute('disabled');
         const mic = root.shadowRoot.querySelector('[part="mic"]');
@@ -13,22 +13,22 @@ describe('bs-composer', () => {
     });
     it('uses the human variant default placeholder', async () => {
         const { root } = await render(h("bs-composer", { variant: "human" }));
-        const input = root.shadowRoot.querySelector('input');
+        const input = root.shadowRoot.querySelector('textarea');
         expect(input).toEqualAttribute('placeholder', 'Message your support agent...');
     });
     it('overrides the variant default placeholder when placeholder is set', async () => {
         const { root } = await render(h("bs-composer", { variant: "ai", placeholder: "Custom prompt" }));
-        const input = root.shadowRoot.querySelector('input');
+        const input = root.shadowRoot.querySelector('textarea');
         expect(input).toEqualAttribute('placeholder', 'Custom prompt');
     });
     it('reflects the value prop to the native input', async () => {
         const { root } = await render(h("bs-composer", { value: "hello there" }));
-        const input = root.shadowRoot.querySelector('input');
+        const input = root.shadowRoot.querySelector('textarea');
         expect(input.value).toBe('hello there');
     });
     it('sets aria-label on the input from the ariaLabel prop', async () => {
         const { root } = await render(h("bs-composer", { ariaLabel: "Message" }));
-        const input = root.shadowRoot.querySelector('input');
+        const input = root.shadowRoot.querySelector('textarea');
         expect(input).toEqualAttribute('aria-label', 'Message');
     });
     it('renders consumer-supplied content in the actions-end slot, after the primary action button', async () => {
@@ -59,12 +59,53 @@ describe('bs-composer', () => {
     it('emits bsInput with the current value as the user types', async () => {
         const { root, spyOnEvent } = await render(h("bs-composer", null));
         const spy = spyOnEvent('bsInput');
-        const input = root.shadowRoot.querySelector('input');
+        const input = root.shadowRoot.querySelector('textarea');
         input.value = 'a';
         input.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
         expect(spy).toHaveReceivedEventTimes(1);
         expect(spy).toHaveReceivedEventDetail('a');
     });
+    describe('auto-grow', () => {
+        it('grows taller as multi-line content is typed', async () => {
+            const { root } = await render(h("bs-composer", null));
+            const textarea = root.shadowRoot.querySelector('textarea');
+            const oneLineHeight = textarea.getBoundingClientRect().height;
+            textarea.value = 'line one\nline two\nline three';
+            textarea.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+            const threeLineHeight = textarea.getBoundingClientRect().height;
+            expect(threeLineHeight).toBeGreaterThan(oneLineHeight);
+        });
+        it('caps growth at --bs-composer-input-max-lines and scrolls internally beyond that', async () => {
+            const { root } = await render(h("bs-composer", null));
+            const textarea = root.shadowRoot.querySelector('textarea');
+            const lineHeight = textarea.getBoundingClientRect().height;
+            const fifteenLines = Array.from({ length: 15 }, (_, i) => `line ${i}`).join('\n');
+            textarea.value = fifteenLines;
+            textarea.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+            const cappedHeight = textarea.getBoundingClientRect().height;
+            // 10 lines' worth of height, not 15 -- the default max-lines is 10 (see bs-composer.css).
+            expect(cappedHeight).toBeCloseTo(lineHeight * 10, 0);
+            expect(textarea.scrollHeight).toBeGreaterThan(textarea.clientHeight);
+        });
+        it('resizes to fit an initial multi-line value prop, not just user typing', async () => {
+            // Measure each render's height before the other render() call runs -- a second render() in
+            // the same test can detach the first instance from the layout tree, which would make its
+            // getBoundingClientRect() report 0 rather than its real (but by-then-detached) height.
+            const single = await render(h("bs-composer", { value: "one line" }));
+            const singleLineHeight = single.root.shadowRoot.querySelector('textarea').getBoundingClientRect().height;
+            const multi = await render(h("bs-composer", { value: 'line one\nline two\nline three' }));
+            const multiLineHeight = multi.root.shadowRoot.querySelector('textarea').getBoundingClientRect().height;
+            expect(multiLineHeight).toBeGreaterThan(singleLineHeight);
+        });
+        it('re-runs the resize when the value prop is updated programmatically (not via typing)', async () => {
+            const { root, setProps, waitForChanges } = await render(h("bs-composer", { value: "one line" }));
+            const textarea = root.shadowRoot.querySelector('textarea');
+            const oneLineHeight = textarea.getBoundingClientRect().height;
+            await setProps({ value: 'line one\nline two\nline three\nline four' });
+            await waitForChanges();
+            expect(textarea.getBoundingClientRect().height).toBeGreaterThan(oneLineHeight);
+        });
+    });
     it('emits bsAttach when the attach button is clicked', async () => {
         const { root, spyOnEvent } = await render(h("bs-composer", null));
         const spy = spyOnEvent('bsAttach');
@@ -107,7 +148,7 @@ describe('bs-composer', () => {
     describe('state="disabled"', () => {
         it('natively disables both the mic and action buttons and the text input', async () => {
             const { root } = await render(h("bs-composer", { state: "disabled" }));
-            expect(root.shadowRoot.querySelector('input')).toHaveAttribute('disabled');
+            expect(root.shadowRoot.querySelector('textarea')).toHaveAttribute('disabled');
             expect(root.shadowRoot.querySelector('[part="mic"]')).toHaveAttribute('disabled');
             expect(root.shadowRoot.querySelector('[part="action"]')).toHaveAttribute('disabled');
         });

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

@@ -22,6 +22,8 @@
   --bs-composer-subtle-pressed: var(--bs-color-neutral-container-pressed);
 
   --bs-composer-waveform-color: var(--bs-border-default);
+
+  --bs-composer-input-max-lines: 10;
 }
 
 .bs-composer {
@@ -62,12 +64,25 @@
 .bs-composer__input {
   flex: 1;
   min-width: 0;
+  box-sizing: border-box;
+  /* Browsers apply their own default padding to <textarea> (Chromium: 2px) -- zero it out so the
+     auto-grow height math (line-height * number of lines) isn't thrown off by unaccounted-for
+     padding. */
+  padding: 0;
   border: none;
   outline: none;
+  resize: none;
   background: transparent;
   color: var(--bs-input-text);
   font-family: inherit;
   font-size: var(--bs-font-size-md);
+  /* Explicit, not the textarea's default line-height -- the auto-grow max-height below is computed
+     in terms of this exact value times --bs-composer-input-max-lines, so it has to be pinned down. */
+  line-height: calc(var(--bs-line-height-body-md) * 1px);
+  /* Grows with content (see bs-composer.tsx's resizeInput) up to this many lines' worth of height,
+     then scrolls internally instead of growing the whole composer further. */
+  max-height: calc(var(--bs-composer-input-max-lines) * var(--bs-line-height-body-md) * 1px);
+  overflow-y: auto;
 }
 
 .bs-composer__input::placeholder {

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

@@ -37,7 +37,7 @@ const WAVEFORM_BAR_HEIGHTS = [
  *   roughly match `--bs-composer-button-size` to align visually.
  * @part attachments - The wrapper around the `attachments` slot.
  * @part attach - The "+" attach button.
- * @part input - The native text `<input>`.
+ * @part input - The native text `<textarea>`.
  * @part mic - The secondary icon button (microphone, or the stop-recording square while `state="recording"`).
  * @part action - The primary circular action button (send, stop, or confirm depending on `state`).
  * @prop --bs-composer-radius - Corner radius of the container. Aliased to `--bs-border-radius-150`.
@@ -57,9 +57,11 @@ const WAVEFORM_BAR_HEIGHTS = [
  * @prop --bs-composer-mic-icon-disabled - Aliased to `--bs-icon-disabled`.
  * @prop --bs-composer-subtle-hover - Background of the attach/mic buttons on hover (subtle-button treatment, same as `bs-button`'s `subtle` variant). Aliased to `--bs-color-neutral-container`.
  * @prop --bs-composer-subtle-pressed - Background of the attach/mic buttons when pressed. Aliased to `--bs-color-neutral-container-pressed`.
+ * @prop --bs-composer-input-max-lines - How many lines the text field grows to before scrolling internally instead of growing further. Aliased to `10`.
  */
 export class BsComposer {
     el;
+    inputEl;
     /**
      * Which flavor of composer this is: changes the *default* placeholder text (set `placeholder`
      * directly to override it) and, per the Figma design, renders the container border dashed
@@ -70,7 +72,12 @@ export class BsComposer {
     /** Overrides the variant's default placeholder. */
     placeholder;
     /** Current text value. Native `input` events don't cross the Shadow DOM boundary, so this
-     * component re-dispatches them as a `bsInput` custom event instead. */
+     * component re-dispatches them as a `bsInput` custom event instead.
+     *
+     * 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. */
     value = '';
     /**
      * Which of the four mutually-exclusive composer states to render: `idle` (send, enabled),
@@ -107,11 +114,38 @@ export class BsComposer {
     componentWillLoad() {
         this.hasAttachments = Array.from(this.el.childNodes).some(node => node.nodeType === Node.ELEMENT_NODE && node.getAttribute('slot') === 'attachments');
     }
+    componentDidLoad() {
+        this.resizeInput();
+    }
+    /** Re-runs the auto-grow calculation after every re-render -- notably including a `value` prop
+     * change from the outside (e.g. a consumer clearing the field after submit, or pre-filling it),
+     * not just while the user is typing. This has to be `componentDidUpdate`, not a `@Watch('value')`
+     * callback: `@Watch` fires as soon as the prop is reassigned, which is BEFORE Stencil's next
+     * render actually pushes the new value into the textarea's DOM `.value` -- reading `scrollHeight`
+     * at that point still reflects the OLD content, so the resize would silently no-op. */
+    componentDidUpdate() {
+        this.resizeInput();
+    }
+    /**
+     * Grows the textarea to fit its content, up to `--bs-composer-input-max-lines` worth of height
+     * (CSS `max-height` clamps the visual result and `overflow-y: auto` takes over beyond that --
+     * see bs-composer.css). Resetting `height` to `auto` first is required before reading
+     * `scrollHeight`, otherwise a shrinking edit (e.g. deleting a line) would never shrink the
+     * textarea back down -- `scrollHeight` only ever reports the larger of "current height" and
+     * "content height" if the height isn't cleared first.
+     */
+    resizeInput() {
+        if (!this.inputEl)
+            return;
+        this.inputEl.style.height = 'auto';
+        this.inputEl.style.height = `${this.inputEl.scrollHeight}px`;
+    }
     onAttachmentsSlotchange = (ev) => {
         this.hasAttachments = ev.target.assignedNodes().length > 0;
     };
     onInput = (ev) => {
         const value = ev.target.value;
+        this.resizeInput();
         this.bsInput.emit(value);
     };
     onAttachClick = () => {
@@ -149,7 +183,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: '6215ac865d4df3984f1f0aee90ecd430d138aab3', class: `bs-composer bs-composer--${this.state} bs-composer--${this.variant}` }, h("div", { key: '93232e0bc2112d2e774b6f276aca7e392a4c9a10', part: "attachments", class: `bs-composer__attachments-row ${this.hasAttachments ? 'bs-composer__attachments-row--visible' : ''}` }, h("slot", { key: 'd169cece5b8924396dc1b0ed01b1eec34d18fa7a', name: "attachments", onSlotchange: this.onAttachmentsSlotchange })), h("div", { key: 'bbe77f36bf48b50a2555502df2d19d38e132279a', class: "bs-composer__text-row" }, h("input", { key: '1f15cd9bf4fc0861390709d1bdfc780866432601', part: "input", class: "bs-composer__input", type: "text", value: this.value, placeholder: placeholder, disabled: disabled, "aria-label": this.ariaLabel, onInput: this.onInput })), h("div", { key: '7dccc69d8182c63d0c817d0cb688df17925eb40d', class: "bs-composer__controls-row" }, h("button", { key: '30a209358b6b1a2af6412cbcf83ab6088a610ac8', type: "button", part: "attach", class: "bs-composer__attach", "aria-label": "Attach", onClick: this.onAttachClick }, h(PlusIcon, { key: '37ad5b75cc1358649fe99f68a99b391a7cf9ec04' })), 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: '86e9ba5f61901274c12f71cdc1c2518becf37ac5', 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: '13d9f765e69b896cb6697fcb74c1f99efa4fe4a0', 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: '4aa85ea3ba7f515095c0a8c2091a219e13de38e3', name: "actions-end" }))));
+        return (h("div", { key: '4d6ea6241693e45065388f34f9fe2c141eb6379f', class: `bs-composer bs-composer--${this.state} bs-composer--${this.variant}` }, h("div", { key: '952853cd4a36c5dc6057186825432616c5c99b38', part: "attachments", class: `bs-composer__attachments-row ${this.hasAttachments ? 'bs-composer__attachments-row--visible' : ''}` }, h("slot", { key: '65311f5b1f1b8fd1e6c9f33741a53c94bbe292b0', name: "attachments", onSlotchange: this.onAttachmentsSlotchange })), h("div", { key: '8699568430ff2140b0869a004a253e6c01e1984f', class: "bs-composer__text-row" }, h("textarea", { key: '5505815f7bb6ff19191ffea375fcd7fb856371fd', 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: 'fd65f7928117afd583e3f1e2372cbb66305a530e', class: "bs-composer__controls-row" }, h("button", { key: '4e691d7ca567a4ece45601f47836d1ac7c5e2a1d', type: "button", part: "attach", class: "bs-composer__attach", "aria-label": "Attach", onClick: this.onAttachClick }, h(PlusIcon, { key: 'e363bbfcd346090dbceafd20d893af0903952223' })), 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: 'e0f113e189ec7ded494c7ef7cf91fe3e13df01bc', 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: '3603219c2c3781a9e2894142313f84dfa52c21ed', 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: '3d143aa3f254310dba537c19a6ac4c40205a405d', name: "actions-end" }))));
     }
     static get is() { return "bs-composer"; }
     static get encapsulation() { return "shadow"; }
@@ -223,7 +257,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."
+                    "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."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -1,10 +1,56 @@
 import { render, h, describe, it, expect } from "@stencil/vitest";
 describe('bs-composer-status-banner', () => {
-    it('renders the message and a default clock icon', async () => {
+    it('renders the message and a default icon', async () => {
         const { root } = await render(h("bs-composer-status-banner", { message: "Something went wrong" }));
         expect(root).toHaveTextContent('Something went wrong');
         expect(root.shadowRoot.querySelector('[part="icon"] svg')).not.toBeNull();
     });
+    describe('accessibility', () => {
+        it('sets role="alert" for type="error" (the default)', async () => {
+            const { root } = await render(h("bs-composer-status-banner", null));
+            expect(root.shadowRoot.querySelector('.bs-composer-status-banner')).toEqualAttribute('role', 'alert');
+        });
+        it('sets role="alert" for type="warning"', async () => {
+            const { root } = await render(h("bs-composer-status-banner", { type: "warning" }));
+            expect(root.shadowRoot.querySelector('.bs-composer-status-banner')).toEqualAttribute('role', 'alert');
+        });
+        it('sets role="status" for type="info"', async () => {
+            const { root } = await render(h("bs-composer-status-banner", { type: "info" }));
+            expect(root.shadowRoot.querySelector('.bs-composer-status-banner')).toEqualAttribute('role', 'status');
+        });
+        it('sets role="status" for type="neutral"', async () => {
+            const { root } = await render(h("bs-composer-status-banner", { type: "neutral" }));
+            expect(root.shadowRoot.querySelector('.bs-composer-status-banner')).toEqualAttribute('role', 'status');
+        });
+    });
+    describe('default icon per type', () => {
+        it('shows the warning-triangle icon for type="error"', async () => {
+            const { root } = await render(h("bs-composer-status-banner", { type: "error" }));
+            const svg = root.shadowRoot.querySelector('[part="icon"] svg');
+            expect(svg.querySelector('circle[r="0.75"]')).not.toBeNull();
+        });
+        it('shows the warning-triangle icon for type="warning"', async () => {
+            const { root } = await render(h("bs-composer-status-banner", { type: "warning" }));
+            const svg = root.shadowRoot.querySelector('[part="icon"] svg');
+            expect(svg.querySelector('circle[r="0.75"]')).not.toBeNull();
+        });
+        it('shows the clock icon for type="info"', async () => {
+            const { root } = await render(h("bs-composer-status-banner", { type: "info" }));
+            const svg = root.shadowRoot.querySelector('[part="icon"] svg');
+            expect(svg.querySelector('circle[r="7.25"]')).not.toBeNull();
+        });
+        it('shows the clock icon for type="neutral"', async () => {
+            const { root } = await render(h("bs-composer-status-banner", { type: "neutral" }));
+            const svg = root.shadowRoot.querySelector('[part="icon"] svg');
+            expect(svg.querySelector('circle[r="7.25"]')).not.toBeNull();
+        });
+        it('a slotted icon still overrides the type-based default', async () => {
+            const { root } = await render(h("bs-composer-status-banner", { type: "error" }, h("svg", { slot: "icon", class: "custom-icon" })));
+            const slot = root.shadowRoot.querySelector('slot[name="icon"]');
+            expect(slot.assignedElements()).toHaveLength(1);
+            expect(slot.assignedElements()[0]).toHaveClass('custom-icon');
+        });
+    });
     it('does not render the icon when showIcon is false', async () => {
         const { root } = await render(h("bs-composer-status-banner", { showIcon: false }));
         expect(root.shadowRoot.querySelector('[part="icon"]')).toBeNull();

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

@@ -13,6 +13,13 @@ import { h } from "@stencil/core";
  * - A toast/snackbar notification unrelated to the composer -- this component is not
  *   self-dismissing and has no positioning of its own (it's a static block, not an overlay).
  *
+ * ## Accessibility
+ * Sets `role="status"` for `type="info"`/`type="neutral"` and `role="alert"` for
+ * `type="error"`/`type="warning"` on its own root element automatically -- no opt-in prop needed.
+ * Both roles carry implicit ARIA live-region semantics (`status` is polite, `alert` is assertive),
+ * so a screen reader announces the message as soon as this banner is inserted into the DOM,
+ * without a consumer having to remember to add `role`/`aria-live` themselves.
+ *
  * @slot icon - Overrides the default leading icon. Only rendered when `showIcon` is true.
  * @part icon - The leading icon wrapper.
  * @part message - The message text.
@@ -87,8 +94,19 @@ export class BsComposerStatusBanner {
     onCloseClick = () => {
         this.bsClose.emit();
     };
+    /** `error`/`warning` need immediate, interrupting announcement (`alert`); `info`/`neutral` only
+     * need a polite one (`status`) -- matches the Figma Accessibility guidelines for this component. */
+    roleForType() {
+        return this.type === 'error' || this.type === 'warning' ? 'alert' : 'status';
+    }
+    /** Clock reads as "waiting/pending", a reasonable default for info/neutral notices -- but is a
+     * weak match for error/warning, which get a warning-triangle icon instead. Either default is
+     * still overridable via the `icon` slot. */
+    renderDefaultIcon() {
+        return this.type === 'error' || this.type === 'warning' ? h(WarningIcon, null) : h(ClockIcon, null);
+    }
     render() {
-        return (h("div", { key: '9444cd90c8a529a7a3155a27303ca4af3abcb733', class: `bs-composer-status-banner bs-composer-status-banner--${this.type}` }, h("div", { key: '7a25dd42f4941c928e7d21a83e66c46bd4a28f7c', class: "bs-composer-status-banner__message-group" }, this.showIcon && (h("span", { key: 'e21ef754303df6c0bcb6cb4d6a0f9cdd2453a347', part: "icon", class: "bs-composer-status-banner__icon" }, h("slot", { key: '8df995de6f4553178552fb2905aa95290741328d', name: "icon" }, h(ClockIcon, { key: 'c2f25db5e1bb964ad4ec2ded6018c8692074bc19' })))), h("p", { key: 'a57b869260c3fc87e3ab50f9af14558047f70955', part: "message", class: "bs-composer-status-banner__message" }, this.message)), this.showButton && (h("button", { key: '6fa67847f17e3c83705f1ddf888c89e3cf9d0752', type: "button", part: "action", class: "bs-composer-status-banner__action", onClick: this.onActionClick }, this.actionLabel)), this.allowClose && (h("button", { key: '3cc3420291a3687d579d18f365154c0db1c4a79f', type: "button", part: "close", class: "bs-composer-status-banner__close", "aria-label": "Dismiss", onClick: this.onCloseClick }, h(CloseIcon, { key: '14617eacef6a6ab4e6056d115dcf8929481eeeee' })))));
+        return (h("div", { key: '1c8597f28e99e0900448fade97c53fd21a945b68', role: this.roleForType(), class: `bs-composer-status-banner bs-composer-status-banner--${this.type}` }, h("div", { key: 'f4d0b098780368863d92c43bac129d58cea2ccfd', class: "bs-composer-status-banner__message-group" }, this.showIcon && (h("span", { key: 'a713386fa868bdc244f9b84780fe1672c0a8f60e', part: "icon", class: "bs-composer-status-banner__icon" }, h("slot", { key: '8aa2007e7f744712c142f26d21bba54f6fa9dec7', name: "icon" }, this.renderDefaultIcon()))), h("p", { key: '000009a01e08ea49bd73f2d3490f1f13bfa9d597', part: "message", class: "bs-composer-status-banner__message" }, this.message)), this.showButton && (h("button", { key: 'd323a702a0f3f4f3cb16c23bb75d0f26a2b13b4b', type: "button", part: "action", class: "bs-composer-status-banner__action", onClick: this.onActionClick }, this.actionLabel)), this.allowClose && (h("button", { key: 'b62fa5da8b4fb8c40004f955b9368b71ae0b054c', type: "button", part: "close", class: "bs-composer-status-banner__close", "aria-label": "Dismiss", onClick: this.onCloseClick }, h(CloseIcon, { key: '4c8396f98eff345569ca9ca8940115aa4bc7c3f8' })))));
     }
     static get is() { return "bs-composer-status-banner"; }
     static get encapsulation() { return "shadow"; }
@@ -267,4 +285,5 @@ export class BsComposerStatusBanner {
     }
 }
 const ClockIcon = () => (h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("circle", { cx: "10", cy: "10", r: "7.25", stroke: "currentColor", "stroke-width": "1.3" }), h("path", { d: "M10 5.83V10L12.5 11.67", stroke: "currentColor", "stroke-width": "1.3", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+const WarningIcon = () => (h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M10 3L18 17H2L10 3Z", stroke: "currentColor", "stroke-width": "1.3", "stroke-linejoin": "round" }), h("path", { d: "M10 8V11.5", stroke: "currentColor", "stroke-width": "1.3", "stroke-linecap": "round" }), h("circle", { cx: "10", cy: "14", r: "0.75", fill: "currentColor" })));
 const CloseIcon = () => (h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M15 5L5 15", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M15 15L5 5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));

package/dist/collection/components/bs-data-table/bs-data-table.js

@@ -54,11 +54,11 @@ export class BsDataTable {
         this.bsRowSelect.emit({ id: row.id, selected });
     };
     render() {
-        return (h("table", { key: 'fac4ff9ccea077cebdb9a7e80759234b08f39420', part: "table", class: "bs-data-table" }, h("thead", { key: 'ffdf80f1945ac824cabaf2c405d7f46a60bada13', part: "head" }, h("tr", { key: 'a7105ca41522ffa29234058b8a77e7ecd6c51451' }, this.selectable && h("th", { key: '7388b969f17245485f096acc8eebca17a2c1295f', class: "bs-data-table__select-col" }), this.columns.map(column => {
+        return (h("table", { key: 'b22d3029ddc85bd7125d69b53be2ed427cc7e3c4', part: "table", class: "bs-data-table" }, h("thead", { key: '469ff536b8e09ed6f866b1a883ad06f9df75f003', part: "head" }, h("tr", { key: '8394e3bfe1259bb2342a324ded83dfac41eb8271' }, this.selectable && h("th", { key: '9d2b97169b92b9e45209f91f855431901e8897c1', class: "bs-data-table__select-col" }), this.columns.map(column => {
             const isSorted = this.sortColumn === column.key;
             const ariaSort = column.sortable ? (isSorted ? (this.sortDirection === 'asc' ? 'ascending' : 'descending') : 'none') : undefined;
             return (h("th", { part: "header-cell", class: "bs-data-table__header-cell", "aria-sort": ariaSort }, column.sortable ? (h("button", { type: "button", class: "bs-data-table__sort-button", onClick: () => this.onHeaderClick(column) }, column.label, isSorted && h("span", { class: "bs-data-table__sort-indicator" }, this.sortDirection === 'asc' ? ' ▲' : ' ▼'))) : (column.label)));
-        }))), h("tbody", { key: '47041704bc1fcde4047a2cf73f0cab402eafbc61', part: "body" }, this.rows.map(row => (h("tr", { part: "row", class: "bs-data-table__row" }, this.selectable && (h("td", { class: "bs-data-table__select-col" }, h("input", { type: "checkbox", checked: this.selectedIds.has(row.id), onChange: ev => this.onRowCheckboxChange(row, ev) }))), this.columns.map(column => this.cellRenderer ? (
+        }))), h("tbody", { key: '8a9fa723abcb83820c489b8f07eab58ee306e491', part: "body" }, this.rows.map(row => (h("tr", { part: "row", class: "bs-data-table__row" }, this.selectable && (h("td", { class: "bs-data-table__select-col" }, h("input", { type: "checkbox", checked: this.selectedIds.has(row.id), onChange: ev => this.onRowCheckboxChange(row, ev) }))), this.columns.map(column => this.cellRenderer ? (
         // cellRenderer is a developer-supplied, trusted function (JS-property-only, never
         // derived from untrusted input) -- its HTML output is intentionally not escaped,
         // same trust model as React's dangerouslySetInnerHTML.

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

@@ -323,10 +323,10 @@ export class BsInput {
         return (h("div", { part: "field", class: `bs-input__field bs-input__field--pin ${this.disabled ? 'bs-input__field--disabled' : ''}` }, Array.from({ length: this.length }).map((_, i) => (h("input", { id: i === 0 ? 'control' : undefined, ref: el => (this.pinInputs[i] = el), part: "control", class: "bs-input__pin-cell", type: "text", inputMode: "numeric", maxLength: 1, value: this.value[i] ?? '', disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, onInput: this.onPinInput(i), onKeyDown: this.onPinKeydown(i) })))));
     }
     render() {
-        return (h("div", { key: '8e7620323b2067d96d7222b96c3b2bcc6679246d', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
+        return (h("div", { key: '766dae0bf2565f45a9fffffc9684a83c89cea122', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
         // "control" is a fixed id, not a generated one -- safe because Shadow DOM scopes ids
         // to this instance's own shadow root, so it can never collide with another bs-input.
-        h("label", { key: 'd17a27a0bd6411884cd26a401f99f18a7c32115f', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (h("span", { key: '71508882188d22a5fab23ce65316aa8920f0612e', part: "required", class: "bs-input__required", "aria-hidden": "true" }, "*")))), this.type === 'pin' ? this.renderPinField() : this.renderField(), this.error ? (h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, h("svg", { part: "error-icon", class: "bs-input__error-icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M8 5V8.5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }), h("circle", { cx: "8", cy: "11", r: "0.75", fill: "currentColor" })), this.error)) : this.description ? (h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
+        h("label", { key: '7935c91837b4882a9b2a416e43f43b1e0d311c8f', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (h("span", { key: '4db3ccc8647ebb5e0fb6635fb9c0e6050872b10c', part: "required", class: "bs-input__required", "aria-hidden": "true" }, "*")))), this.type === 'pin' ? this.renderPinField() : this.renderField(), this.error ? (h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, h("svg", { part: "error-icon", class: "bs-input__error-icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M8 5V8.5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }), h("circle", { cx: "8", cy: "11", r: "0.75", fill: "currentColor" })), this.error)) : this.description ? (h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
     }
     static get is() { return "bs-input"; }
     static get encapsulation() { return "shadow"; }