@brandsync/wc 1.20.1 → 1.22.0

package/dist/collection/components/bs-session-timeout/bs-session-timeout.js

@@ -196,7 +196,7 @@ export class BsSessionTimeout {
         const description = this.description ?? d.description;
         const primary = this.primaryLabel ?? d.primary;
         const secondary = this.secondaryLabel ?? d.secondary;
-        return (h("bs-card", { key: '62d189825b91f610d76413f186aa5cd46f535553', part: "container", class: "bs-session-timeout", surface: "base", role: "region", "aria-labelledby": "heading" }, h("div", { key: '658dcf88fb5e6b46184d2bd1d7211f2f3b70cedc', class: "bs-session-timeout__body" }, !this.hideIcon && (h("bs-icon-tile", { key: '5355eb08e32eeb42edcccd0e078bdae383aba564', part: "art", intent: d.intent, size: "lg" }, h("slot", { key: 'cf1169b6f28504292026bd99189fae658001c76b', name: "icon" }, d.glyph()))), this.renderHeading(heading, description), this.type === 'warning' && this.renderWarning(), this.type === 'warning' && this.savedMessage && (h("p", { key: 'c5327542b3737b79fc986aed5103db57d699d92b', part: "saved", class: "bs-session-timeout__saved" }, h(InfoIcon, { key: 'faa674e2a70d71591efbe4fd7eb94b39851f315d' }), h("span", { key: '399c78c01aafe8d79ec69b28e5451e2a06fba836' }, this.savedMessage))), this.type === 'signed-out' && this.renderAccount(), this.type === 'confirm-identity' && this.renderConfirm(), this.type === 'warning' && (primary || secondary) && (h("div", { key: '42987f730c2767ef88b57ae3e28c08db804085de', part: "actions", class: "bs-session-timeout__actions" }, secondary && (h("bs-button", { key: 'f758266373ef8f94edd5d53de97397b6498af3ac', part: "secondary", variant: "outlined", onClick: () => this.bsSecondary.emit() }, secondary)), primary && (h("bs-button", { key: 'eaced5b60ea1a15398c3beea9d8d1522fc60792e', part: "primary", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)))), this.type === 'signed-out' && (primary || secondary) && (h("div", { key: '9e731177eb48665ef99c64a564be0ba8340b79f3', part: "actions", class: "bs-session-timeout__actions bs-session-timeout__actions--stacked" }, primary && (h("bs-button", { key: 'f7bfa81c52bc83c0d9e4009c4aecb2584632b95d', part: "primary", class: "bs-session-timeout__block-button", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)), secondary && (h("bs-button", { key: '6fe76eeaefdd48288e2c4821991f12ee12bbe358', part: "secondary", class: "bs-session-timeout__text-button", variant: "subtle", size: "lg", onClick: () => this.bsSecondary.emit() }, secondary)))), h("div", { key: '77bd8a11863bccceaae1ab0103ef81771ca9f1f1', class: "bs-session-timeout__sr-only", role: "status", "aria-live": "polite" }, this.announcement))));
+        return (h("bs-card", { key: '13eb3bbaf4ca631be2261c38381e6328e2bbbe92', part: "container", class: "bs-session-timeout", surface: "base", role: "region", "aria-labelledby": "heading" }, h("div", { key: '813dd3d614e935ed3a09f532a0720839562fd98c', class: "bs-session-timeout__body" }, !this.hideIcon && (h("bs-icon-tile", { key: '1bdf9c09e8f16a7501f80b6e43ad7279210d71f8', part: "art", intent: d.intent, size: "lg" }, h("slot", { key: '43703d8669030ccfe4d7102570c9bb3ba9391535', name: "icon" }, d.glyph()))), this.renderHeading(heading, description), this.type === 'warning' && this.renderWarning(), this.type === 'warning' && this.savedMessage && (h("p", { key: '528151234d53961de3d79cdec606a94a1ef17d6d', part: "saved", class: "bs-session-timeout__saved" }, h(InfoIcon, { key: 'ac6603076709172755c01b87d848c102d893f600' }), h("span", { key: '7be82576874f920a42570f7b27d8bc251b37f606' }, this.savedMessage))), this.type === 'signed-out' && this.renderAccount(), this.type === 'confirm-identity' && this.renderConfirm(), this.type === 'warning' && (primary || secondary) && (h("div", { key: 'c85cabd7efab756eec46441722dbb431bf7c14d8', part: "actions", class: "bs-session-timeout__actions" }, secondary && (h("bs-button", { key: 'e40cf0525badc649ea177fd5a102ef6a55dea3be', part: "secondary", variant: "outlined", onClick: () => this.bsSecondary.emit() }, secondary)), primary && (h("bs-button", { key: '46b08f9b82a9874f854511e9040a42c348036ac3', part: "primary", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)))), this.type === 'signed-out' && (primary || secondary) && (h("div", { key: 'f1ef91ee05b4b1f2ef2ca37a155491f61885fa6d', part: "actions", class: "bs-session-timeout__actions bs-session-timeout__actions--stacked" }, primary && (h("bs-button", { key: '855f234d9ad9d70986b62bb97252f05b50eab82b', part: "primary", class: "bs-session-timeout__block-button", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)), secondary && (h("bs-button", { key: '4dc3d48201f3f53f020d2615ec5dfd84f3d21417', part: "secondary", class: "bs-session-timeout__text-button", variant: "subtle", size: "lg", onClick: () => this.bsSecondary.emit() }, secondary)))), h("div", { key: 'b9a61ad613e36e5338e3e1bd5644c3184b8d76bb', class: "bs-session-timeout__sr-only", role: "status", "aria-live": "polite" }, this.announcement))));
     }
     static get is() { return "bs-session-timeout"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-shortcut-row/bs-shortcut-row.js

@@ -36,7 +36,7 @@ export class BsShortcutRow {
     /** Set by the parent list (`"listitem"`). Standalone rows have no role. */
     selectionRole = null;
     render() {
-        return (h("div", { key: '01234047de01effc5d7ae411a6180d02e663d9af', part: "container", class: "bs-shortcut-row", role: this.selectionRole ?? undefined, "aria-disabled": this.disabled ? 'true' : undefined }, h("span", { key: 'd8c80f480f4f463f5c0ee46719e4b051e1f54816', part: "action", class: "bs-shortcut-row__action" }, h("slot", { key: '8c5da35b9c05f1544892808b75b4b24701554dc7' }, this.action)), h("span", { key: '3588f962523eabfdbebc2de3d8cdd3cface4ca07', part: "keys", class: "bs-shortcut-row__keys" }, h("slot", { key: '3315142746d44c8c27ce6952a5cffad1f51473d8', name: "keys" }, h("bs-key-caps", { key: '70a4155ce7ed5b0e585ab45e9f2a8b1c69880e4e', keys: this.keys, label: this.label, disabled: this.disabled })))));
+        return (h("div", { key: 'b32ad47b3799cf0bc6e9251febbd694f611addc2', part: "container", class: "bs-shortcut-row", role: this.selectionRole ?? undefined, "aria-disabled": this.disabled ? 'true' : undefined }, h("span", { key: 'c4c333aab2f4e4de4e71ee2ed9ac6bee2fb14a39', part: "action", class: "bs-shortcut-row__action" }, h("slot", { key: '65d9211d05069beb18cd79e37a6bc1df560b5c3c' }, this.action)), h("span", { key: '08eea1a42c6d510ac1cad3905e979ea90ee63dcb', part: "keys", class: "bs-shortcut-row__keys" }, h("slot", { key: '306d7ee0733693686c3d48113b2c17f48f874114', name: "keys" }, h("bs-key-caps", { key: '66b296276b82657ed0e5799769ba509ac0c6318d', keys: this.keys, label: this.label, disabled: this.disabled })))));
     }
     static get is() { return "bs-shortcut-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -60,7 +60,7 @@ export class BsSkeleton {
             lines.push(h("span", { part: "line", class: { 'bs-skeleton__line': true, [`bs-skeleton__line--${this.variant}`]: true, 'bs-skeleton__line--short': isShortLast }, style: style }));
         }
         const hasLabel = !!this.label;
-        return (h("span", { key: 'cdaaa8a2de9a1552a900a1ef33e3a7259e57ed3e', part: "container", class: { 'bs-skeleton': true, 'bs-skeleton--animated': this.animated, [`bs-skeleton--${this.variant}`]: true }, role: hasLabel ? 'status' : undefined, "aria-label": hasLabel ? this.label : undefined, "aria-hidden": hasLabel ? undefined : 'true' }, lines));
+        return (h("span", { key: '71e9f66677e291c7b813a419a4357b110666cac5', part: "container", class: { 'bs-skeleton': true, 'bs-skeleton--animated': this.animated, [`bs-skeleton--${this.variant}`]: true }, role: hasLabel ? 'status' : undefined, "aria-label": hasLabel ? this.label : undefined, "aria-hidden": hasLabel ? undefined : 'true' }, lines));
     }
     static get is() { return "bs-skeleton"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-skip-link/bs-skip-link.js

@@ -57,7 +57,7 @@ export class BsSkipLink {
         target.focus();
     };
     render() {
-        return (h("a", { key: '7f3d5a4e355caaa5529b5602c048c864a5e7e5a9', part: "link", class: "bs-skip-link", href: this.href, onClick: this.onClick }, h("slot", { key: '938c117509a209ac79d99af9cbe8e1eccf7a4c22' }, "Skip to main content")));
+        return (h("a", { key: '71579aa69b09083c78af4db47c32202da8472f34', part: "link", class: "bs-skip-link", href: this.href, onClick: this.onClick }, h("slot", { key: '1f2077ae9cb624f9700745a6e0e0d168fbb746b1' }, "Skip to main content")));
     }
     static get is() { return "bs-skip-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -233,7 +233,7 @@ export class BsSlider {
     render() {
         const isRange = this.type === 'range';
         const rootClasses = ['bs-slider', this.disabled ? 'bs-slider--disabled' : ''].filter(Boolean).join(' ');
-        return (h("div", { key: 'edb31a417eff920fb2fbff7cd26620629038449b', class: rootClasses, "aria-disabled": this.disabled ? 'true' : undefined }, this.showLabel && (h("div", { key: '8732ee01cd1441c0a715b45257ac560b062fc384', class: "bs-slider__header" }, h("span", { key: '25440a9c9bee46d3c82c1eda056e24b7e92e8302', id: "bs-slider-label", part: "label", class: "bs-slider__label" }, this.label), isRange ? (h("span", { class: "bs-slider__value-fields" }, this.renderPercentField(this.percent(this.effectiveValueStart), this.onStartPercentFieldChange, this.ariaLabel ?? this.startValueLabel), h("span", { class: "bs-slider__separator" }, "\u2013"), this.renderPercentField(this.percent(this.effectiveValueEnd), this.onEndPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} end` : this.endValueLabel))) : (this.renderPercentField(this.percent(this.value), this.onPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} value` : 'Value')))), h("div", { key: '9fcd6e0729266f1c38719347f6b48590788fb8c5', class: "bs-slider__row" }, this.showLabel && (h("span", { key: 'c55a68e9244d1ab2102d6c90d31b35df49f6119c', part: "bound", class: "bs-slider__bound" }, this.min)), isRange ? this.renderRangeThumbs() : this.renderSingleThumb(), this.showLabel && (h("span", { key: '1140fda48f69433161dc2fd1e65f18d1f09f2ed9', part: "bound", class: "bs-slider__bound" }, this.max)))));
+        return (h("div", { key: '453a65b49b780806ed2d9a1ead9a8d6a2934f7d5', class: rootClasses, "aria-disabled": this.disabled ? 'true' : undefined }, this.showLabel && (h("div", { key: 'add1883ea1990fec07b3b50c3a910dc7c38f9ffd', class: "bs-slider__header" }, h("span", { key: 'b85fcbb0798aac73a8ae003abe68fa42e2fe905d', id: "bs-slider-label", part: "label", class: "bs-slider__label" }, this.label), isRange ? (h("span", { class: "bs-slider__value-fields" }, this.renderPercentField(this.percent(this.effectiveValueStart), this.onStartPercentFieldChange, this.ariaLabel ?? this.startValueLabel), h("span", { class: "bs-slider__separator" }, "\u2013"), this.renderPercentField(this.percent(this.effectiveValueEnd), this.onEndPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} end` : this.endValueLabel))) : (this.renderPercentField(this.percent(this.value), this.onPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} value` : 'Value')))), h("div", { key: '528e5766856c1cddb4379089cf206c500171e381', class: "bs-slider__row" }, this.showLabel && (h("span", { key: '17db3029eed38bb3759f6307f08f16bb477ff14c', part: "bound", class: "bs-slider__bound" }, this.min)), isRange ? this.renderRangeThumbs() : this.renderSingleThumb(), this.showLabel && (h("span", { key: 'bc80bd2268e3faf4bc2abbd62337f5fb88fe0700', part: "bound", class: "bs-slider__bound" }, this.max)))));
     }
     static get is() { return "bs-slider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -67,7 +67,7 @@ export class BsSnackbar {
         this.bsDismiss.emit();
     };
     render() {
-        return (h("div", { key: 'e0e55c6a5c3de86ef00ac24c9050df32d837fde1', part: "container", class: `bs-snackbar bs-snackbar--${this.variant}`, role: "status", "aria-live": this.variant === 'error' ? 'assertive' : 'polite' }, h("div", { key: '229c3d183ac1fe74f81bbbdd96def0eeb64a4e45', class: "bs-snackbar__content" }, h("span", { key: 'af87602a2346ed594c559a4ddc73dfa463f8d849', part: "icon", class: "bs-snackbar__icon", "aria-hidden": "true" }, this.loading ? h("span", { class: "bs-snackbar__spinner" }) : h(CheckCircleIcon, null)), h("span", { key: '1b19b6ac5560905902999a9cdfaca75afab57731', part: "message", class: "bs-snackbar__message" }, h("slot", { key: '9192722d75632f0eabe2200f72a9a828dc0137df' }))), h("div", { key: 'df8a454adb4bf591908a50f2ab67513fe12c00a2', class: "bs-snackbar__actions" }, this.actionLabel && (h("bs-button", { key: '50a8f6a4cd75a2fc22150bf14b15e0dce665104f', part: "action", variant: this.actionVariant ?? ACTION_VARIANT[this.variant], size: "sm", onClick: this.onAction }, this.actionLabel)), !this.hideClose && (h("bs-icon-button", { key: '9c5358e0094800a6e0085ddf7ca8e98fc2cf4d14', part: "close", variant: "subtle", size: "md", ariaLabel: "Dismiss", onClick: this.onDismiss }, h(CloseIcon, { key: 'b00d5ce56c2d40a3a612e4506f5c1c5ccc0859a9' }))))));
+        return (h("div", { key: 'd5766c577a0f6ca53c1d26406888d79140400133', part: "container", class: `bs-snackbar bs-snackbar--${this.variant}`, role: "status", "aria-live": this.variant === 'error' ? 'assertive' : 'polite' }, h("div", { key: 'd42f65e798ccdf73da5a01e297b67794daa1101c', class: "bs-snackbar__content" }, h("span", { key: '50eb509bdfbc800e18c705ac9bbfb5868180dd87', part: "icon", class: "bs-snackbar__icon", "aria-hidden": "true" }, this.loading ? h("span", { class: "bs-snackbar__spinner" }) : h(CheckCircleIcon, null)), h("span", { key: '546badfb1dfffcc51736b20991cc0629e450e244', part: "message", class: "bs-snackbar__message" }, h("slot", { key: 'd7d91d944100ea1beb5a8693506db34a293e0594' }))), h("div", { key: 'fbcf2cda2619546ae1b8a5b771f05e32326690b6', class: "bs-snackbar__actions" }, this.actionLabel && (h("bs-button", { key: '41b81763fc38ff533cb3729d90bbd6855a378baa', part: "action", variant: this.actionVariant ?? ACTION_VARIANT[this.variant], size: "sm", onClick: this.onAction }, this.actionLabel)), !this.hideClose && (h("bs-icon-button", { key: '1d7adc41ceeaabb43340089db37fa273ed411535', part: "close", variant: "subtle", size: "md", ariaLabel: "Dismiss", onClick: this.onDismiss }, h(CloseIcon, { key: 'f93ef4c3b53a1eb00a80d3c52c66cc213067ec55' }))))));
     }
     static get is() { return "bs-snackbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-source-link/bs-source-link.js

@@ -52,9 +52,9 @@ export class BsSourceLink {
     };
     render() {
         const inner = [
-            h("bs-ripple", { key: '075746e101103adfdf0a18aef1e0149b137fd542', part: "ripple" }),
-            h("span", { key: '466a693b6abe05191356d81e86cc60e0391171e3', class: "bs-source-link__left" }, h("span", { key: 'e8b570d2f99693271492d333d0c7f49e68ee39a9', class: "bs-source-link__filename-row" }, h("span", { key: '9e88d1377a38deb11bec9de4e0715d3ad2ce97c2', part: "icon", class: "bs-source-link__icon" }, h("slot", { key: 'bf8bd319bea1f81e623e1abd6d17700fe65979a5', name: "icon" }, h(FileTextIcon, { key: 'ed754e533962bfe6354d4a3350495b0838886ec0' }))), h("p", { key: 'b623db1019d63064708896a629c0a7f5db406453', part: "filename", class: "bs-source-link__filename" }, this.fileName)), h("span", { key: '97f3d0841d0650227cfa50e5301ae5bfffb528ff', class: "bs-source-link__meta" }, this.sourceName && (h("span", { key: '857afee71f6b359f7354362427930cc7ae3ebf52', part: "source", class: "bs-source-link__source" }, this.sourceName)), this.sourceName && this.version && h("span", { key: '0ce6a6368f9b550f6122598e4b259af813728410', class: "bs-source-link__dot", "aria-hidden": "true" }), this.version && (h("span", { key: 'f0d6d7be2db179ad3f0eed720df04b082c856da2', part: "version", class: "bs-source-link__version" }, this.version)))),
-            h("span", { key: '704fbe31e50ba22c8fe8703262d4050377336f07', part: "arrow", class: "bs-source-link__arrow", "aria-hidden": "true" }, h(ArrowUpRightIcon, { key: 'b7e4f15c4f5818db70ab7ae9bb4b94544b971f68' })),
+            h("bs-ripple", { key: '64724c67ba2ef27787a2e85bb1084ef1f3c6a916', part: "ripple" }),
+            h("span", { key: 'd8fefb50b0740a65cac0fb918672b1593d07a716', class: "bs-source-link__left" }, h("span", { key: 'f5cf73cbf855bca76a5dd476013cfbd4fd13b77b', class: "bs-source-link__filename-row" }, h("span", { key: 'e204449475ce6d95a3ce0346cb3e92578f8bf155', part: "icon", class: "bs-source-link__icon" }, h("slot", { key: 'f19c4375744c58f9ac87cdd74016b6b0a21d1acb', name: "icon" }, h(FileTextIcon, { key: '75a6c2bc7b228c6dca2dcb4d27739d8cbb3dca1a' }))), h("p", { key: 'e8cf5752fad06b84310093f6de56a101226ddb52', part: "filename", class: "bs-source-link__filename" }, this.fileName)), h("span", { key: 'b9c631fe47d4bd480d231cc33de98064c14b525e', class: "bs-source-link__meta" }, this.sourceName && (h("span", { key: '705510aa4dd8567a3d1a2136842c04c4f4776393', part: "source", class: "bs-source-link__source" }, this.sourceName)), this.sourceName && this.version && h("span", { key: '362b50a97cc2de79c89058c607862703c29c347a', class: "bs-source-link__dot", "aria-hidden": "true" }), this.version && (h("span", { key: '7c628efdff57c8a95c5ff0f74409e485f2efc286', part: "version", class: "bs-source-link__version" }, this.version)))),
+            h("span", { key: '9fe18a62a7a49d4a68c120e7972299dbde6b22dd', part: "arrow", class: "bs-source-link__arrow", "aria-hidden": "true" }, h(ArrowUpRightIcon, { key: 'd637cfe57cf0501f521c94d42df8fb587fdfd85f' })),
         ];
         return this.href ? (h("a", { class: "bs-source-link", href: this.href, target: this.target, rel: "noopener noreferrer", onClick: this.onClick }, inner)) : (h("button", { type: "button", class: "bs-source-link", onClick: this.onClick }, inner));
     }

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

@@ -30,7 +30,7 @@ export class BsSpinner {
     label;
     render() {
         const hasLabel = !!this.label;
-        return (h("span", { key: '536b5a9eeee4583c4a6e513deb458baa0c2351c7', part: "container", class: `bs-spinner bs-spinner--${this.size}`, role: hasLabel ? 'status' : undefined, "aria-label": hasLabel ? this.label : undefined, "aria-hidden": hasLabel ? undefined : 'true' }, h("svg", { key: '2daa95caf00c24adfbb181b54c510262494b51ae', part: "svg", class: "bs-spinner__svg", viewBox: "0 0 24 24", fill: "none", focusable: "false" }, h("circle", { key: '27f9997a334a11d735a42ff72a5d6b2293f45087', class: "bs-spinner__track", cx: "12", cy: "12", r: "9", "stroke-width": "3" }), h("path", { key: '3d82ac0c874c564dc6383161c0b6b1b293370b88', class: "bs-spinner__arc", d: "M12 3a9 9 0 0 1 9 9", "stroke-width": "3", "stroke-linecap": "round" }))));
+        return (h("span", { key: 'f7225e3f094164ee522d45c87ead3194f4ec3a00', part: "container", class: `bs-spinner bs-spinner--${this.size}`, role: hasLabel ? 'status' : undefined, "aria-label": hasLabel ? this.label : undefined, "aria-hidden": hasLabel ? undefined : 'true' }, h("svg", { key: 'a0e36d1125301b81ecfad237d76f87ac7ccb4194', part: "svg", class: "bs-spinner__svg", viewBox: "0 0 24 24", fill: "none", focusable: "false" }, h("circle", { key: 'b1d345f1ab09ad745b9549b149a2abbb17d48358', class: "bs-spinner__track", cx: "12", cy: "12", r: "9", "stroke-width": "3" }), h("path", { key: '15d0989159c4e747d9c0d71a4530af7f7a63767c', class: "bs-spinner__arc", d: "M12 3a9 9 0 0 1 9 9", "stroke-width": "3", "stroke-linecap": "round" }))));
     }
     static get is() { return "bs-spinner"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-split-pane/bs-split-pane.cmp.test.js

@@ -13,6 +13,14 @@ describe('bs-split-pane', () => {
         expect(dividers[0]).toEqualAttribute('tabindex', '0');
         expect(split.shadowRoot.querySelectorAll('[part~="pane"]').length).toBe(3);
     });
+    it('makes only overflowing panes keyboard-focusable', async () => {
+        const { root } = await render(h("div", { style: { width: '600px', height: '200px' } }, h("bs-split-pane", null, h("div", { slot: "pane-1" }, "Short"), h("div", { slot: "pane-2", style: { height: '900px' } }, "Tall"))));
+        const split = root.querySelector('bs-split-pane');
+        await new Promise(r => setTimeout(r, 150));
+        const [first, second] = Array.from(split.shadowRoot.querySelectorAll('.bs-split-pane__pane'));
+        expect(first.hasAttribute('tabindex')).toBe(false);
+        expect(second).toEqualAttribute('tabindex', '0');
+    });
     it('follows the filled slots: two panes means one divider', async () => {
         const { root } = await mount({}, 2);
         const split = root.querySelector('bs-split-pane');

package/dist/collection/components/bs-split-pane/bs-split-pane.js

@@ -61,6 +61,7 @@ export class BsSplitPane {
     sizes = [];
     draggingIndex = -1;
     observer;
+    sizeObserver;
     dragStart;
     /** Toggles `collapsed` and emits `bsCollapsedChange`. */
     async toggleCollapsed() {
@@ -76,7 +77,31 @@ export class BsSplitPane {
     }
     disconnectedCallback() {
         this.observer?.disconnect();
+        this.sizeObserver?.disconnect();
     }
+    componentDidRender() {
+        // Re-observe after every render: panes come and go with `paneCount`, and a pane's slotted content
+        // is what grows past it, so watch both.
+        this.sizeObserver?.disconnect();
+        this.sizeObserver = new ResizeObserver(this.updateScrollable);
+        this.el.shadowRoot?.querySelectorAll('.bs-split-pane__pane').forEach(pane => {
+            this.sizeObserver.observe(pane);
+            pane.querySelector('slot')?.assignedElements().forEach(child => this.sizeObserver.observe(child));
+        });
+        this.updateScrollable();
+    }
+    // A scrollable region must be keyboard-reachable, so a pane whose content overflows gets tabindex=0.
+    // Written straight to the DOM (not via render state) so it is in place as soon as the first render
+    // finishes, rather than a re-render later. Stencil leaves attributes it doesn't manage alone.
+    updateScrollable = () => {
+        this.el.shadowRoot?.querySelectorAll('.bs-split-pane__pane').forEach(pane => {
+            const overflows = pane.scrollHeight > pane.clientHeight + 1 || pane.scrollWidth > pane.clientWidth + 1;
+            if (overflows)
+                pane.setAttribute('tabindex', '0');
+            else
+                pane.removeAttribute('tabindex');
+        });
+    };
     countPanes() {
         let count = 1;
         for (let i = 1; i <= MAX_PANES; i++) {
@@ -215,7 +240,7 @@ export class BsSplitPane {
                 nodes.push(h("div", { part: "divider", class: { 'bs-split-pane__divider': true, 'bs-split-pane__divider--active': this.draggingIndex === i, 'bs-split-pane__divider--static': !this.resizable }, role: "separator", "aria-orientation": dividerOrientation, "aria-label": this.dividerLabel, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": this.percentFor(i), tabindex: this.resizable ? 0 : undefined, onPointerDown: this.onPointerDown(i), onPointerMove: this.onPointerMove, onPointerUp: this.onPointerUp, onPointerCancel: this.onPointerUp, onKeyDown: this.onKeyDown(i) }, h("span", { part: "divider-thumb", class: "bs-split-pane__thumb" })));
             }
         }
-        return (h("div", { key: 'a8907feecf4f151d88192eea0fbdffeedac25d09', part: "container", class: `bs-split-pane bs-split-pane--${this.orientation}` }, nodes));
+        return (h("div", { key: '59361ae67d4d5c41c55be27500f43b6cea70ce8c', part: "container", class: `bs-split-pane bs-split-pane--${this.orientation}` }, nodes));
     }
     static get is() { return "bs-split-pane"; }
     static get encapsulation() { return "shadow"; }

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

@@ -81,7 +81,7 @@ export class BsStack {
                 parts.push(h("slot", { name: `bs-stack-item-${i}`, onSlotchange: this.sync }));
             }
         }
-        return (h(Host, { key: '778684be1eb1af11919fd4d374031f03bdea3f30', style: { '--bs-stack-gap-token': `var(--bs-spacing-${gap})` } }, h("slot", { key: '43efd637eb76a62d3c3591158f4e17edbe6f5907', onSlotchange: this.sync }), parts));
+        return (h(Host, { key: '8fa4ffade10cbe8f2bc0288f9f075df45067ab21', style: { '--bs-stack-gap-token': `var(--bs-spacing-${gap})` } }, h("slot", { key: 'f6f49b162fbbd0d6ca052781aa94ebff370e9df7', onSlotchange: this.sync }), parts));
     }
     static get is() { return "bs-stack"; }
     static get encapsulation() { return "shadow"; }

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

@@ -62,7 +62,7 @@ export class BsStat {
         return (h("svg", { part: "trend-icon", class: "bs-stat__trend-icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { d: d, stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
     }
     render() {
-        return (h("bs-card", { key: 'b80fd8bcab40a0c0253ba662787400be2d5ce9fa', part: "container", class: "bs-stat", surface: this.surface }, h("dl", { key: 'b0c82e41728231629349dde73fdb6e23ce119b52', class: "bs-stat__body" }, h("dt", { key: '6a774975bc9242d6a875f4e4362dbadfab74c8db', class: "bs-stat__head" }, h("span", { key: 'd38853b09be10da36f162b81544ff8d90f682963', class: { 'bs-stat__icon': true, 'bs-stat__icon--visible': this.hasIcon } }, h("slot", { key: '2c9500cb005e6ccb87525eb5285d0b9fab29a5d6', name: "icon", onSlotchange: (e) => (this.hasIcon = e.target.assignedNodes().length > 0) })), h("span", { key: '2b1d18f442f02334947bd0164741abdb36ffdd1b', part: "label", class: "bs-stat__label" }, this.label)), h("dd", { key: '77b730dc10e13f9dca8b6217efe61cce9dd77f26', class: "bs-stat__figure" }, h("span", { key: '1b3f628b89aa8ba007cc1bbb501cab20ffeaae0e', part: "value", class: "bs-stat__value" }, this.value), this.trend && (h("span", { key: '5abea4bf54d77c759d80ae6fb53630ba5220ade3', part: "trend", class: `bs-stat__trend bs-stat__trend--${this.intent}` }, this.arrow(), h("span", { key: 'd911d6c7b3b560378fa0bed66d193de0d5d43646', class: "bs-stat__sr" }, this.trendPrefix), this.trendValue && h("span", { key: '9f217624152213e1c4b960963d86127e5c33f2c9', class: "bs-stat__trend-value" }, this.trendValue)))), h("dd", { key: 'fb85171704f96b0770d08ff557134bde2a78ccfb', class: { 'bs-stat__extra': true, 'bs-stat__extra--visible': this.hasExtra } }, h("slot", { key: '81ef5d72329b8a4cfa2ef02317fc77abecff74d3', onSlotchange: (e) => (this.hasExtra = e.target.assignedNodes().some(n => n.nodeType === 1 || !!n.textContent?.trim())) })))));
+        return (h("bs-card", { key: '5f6b9075f385608f80e241fa098ec2b7c41e0e68', part: "container", class: "bs-stat", surface: this.surface }, h("dl", { key: '0cf96c923a21917d2d3896e63da754d385fabbce', class: "bs-stat__body" }, h("dt", { key: '5c91ee3aa9976c7c2389723b87566e7f1890ec6b', class: "bs-stat__head" }, h("span", { key: 'c7c6552c10e951f6ebf13ee5bd77500a2f3d2fae', class: { 'bs-stat__icon': true, 'bs-stat__icon--visible': this.hasIcon } }, h("slot", { key: '0273ec7aec05787bb319e914fbcabee6a80e7468', name: "icon", onSlotchange: (e) => (this.hasIcon = e.target.assignedNodes().length > 0) })), h("span", { key: 'a21e688823f26c01ee444dd57fd502a9505557be', part: "label", class: "bs-stat__label" }, this.label)), h("dd", { key: '246ec9052be7f754776eb60f49dd012ebe350200', class: "bs-stat__figure" }, h("span", { key: '8bb7924706fcf3bf22dc0ce4bb8c5d213693b17c', part: "value", class: "bs-stat__value" }, this.value), this.trend && (h("span", { key: 'b335cc04264ac21d217c6bcb16032cecbcde70cb', part: "trend", class: `bs-stat__trend bs-stat__trend--${this.intent}` }, this.arrow(), h("span", { key: 'a850986d7f5b920b603f70cef688cf2e00647527', class: "bs-stat__sr" }, this.trendPrefix), this.trendValue && h("span", { key: '85228d88fe1d96ff94d712a94f448b135a571edd', class: "bs-stat__trend-value" }, this.trendValue)))), h("dd", { key: '0c2eebe7c40245de0090345e2884c8b2dcbcd1b9', class: { 'bs-stat__extra': true, 'bs-stat__extra--visible': this.hasExtra } }, h("slot", { key: '75723e31ac5595c062ef8661afd8b42dc7dc6a5c', onSlotchange: (e) => (this.hasExtra = e.target.assignedNodes().some(n => n.nodeType === 1 || !!n.textContent?.trim())) })))));
     }
     static get is() { return "bs-stat"; }
     static get encapsulation() { return "shadow"; }

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

@@ -62,7 +62,7 @@ export class BsStepper {
     }
     render() {
         // role="list" so each bs-stepper-step's role="listitem" has the required parent.
-        return (h(Host, { key: '7161c01432c1d0d35f63a963fba140d4b0f9cd77', role: "list" }, h("slot", { key: '67021fc831679453fa1340bad8df75e338d9fb28', onSlotchange: this.onSlotChange })));
+        return (h(Host, { key: '4848554ab39b7722394d94da0125940d78e3d68a', role: "list" }, h("slot", { key: '665709822f40bf4c3105cbcbbf7d795527c6472f', onSlotchange: this.onSlotChange })));
     }
     static get is() { return "bs-stepper"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-stepper/bs-stepper-step/bs-stepper-step.js

@@ -57,7 +57,7 @@ export class BsStepperStep {
     }
     render() {
         const state = this.state;
-        return (h(Host, { key: 'a413a500376629d039afab3168b83cae5c636dc1', role: "listitem", class: `bs-stepper-step--${this.direction}`, "aria-disabled": state === 'disabled' ? 'true' : undefined }, h("div", { key: '7978cd670eeafe2dee95a2e3d97625ff22cd006d', class: "bs-stepper-step__top" }, h("span", { key: '0d0e5ef0199013cd0ed59b26fe169c2bac727920', part: "icon", class: `bs-stepper-step__icon bs-stepper-step__icon--${state}` }, state === 'current' && h("span", { key: '6c9ab59838f63958a54b852c4a8f3babf1ddc48e', class: "bs-stepper-step__icon-dot" }), state === 'done' && h(CheckIcon, { key: '284d95f3e0ae3033ab2baa079c00cb2dc1fbcd3f' }), state === 'error' && h(ExclamationIcon, { key: '45b894a13cf54b0d5cb027d89646c712584bf6bb' })), h("span", { key: '79621665f9aecb82c4135ac2e1139ce1ee9af6be', part: "connector", class: "bs-stepper-step__connector", "aria-hidden": "true" }, h("span", { key: '91454b553634d90734dbd2b8bb9ab53d9bead49c', class: "bs-stepper-step__connector-line" }))), h("span", { key: 'd5f1606511df9745571d96cad36d38774fd943b4', part: "label", class: `bs-stepper-step__label bs-stepper-step__label--${state}` }, h("span", { key: '81df6e0b9607c22cfdad7e37095d245ec428e0f1', part: "name", class: "bs-stepper-step__name" }, this.name), this.showDescription && this.description && (h("span", { key: '77c4951d570219071e8acedc361a73eed6a89612', part: "description", class: "bs-stepper-step__description" }, this.description)))));
+        return (h(Host, { key: 'b585c4ce677e7600da944ef54bc2392b1de0ff0e', role: "listitem", class: `bs-stepper-step--${this.direction}`, "aria-disabled": state === 'disabled' ? 'true' : undefined }, h("div", { key: '29e40d651026a757eb042a6421704ed0b32d9e31', class: "bs-stepper-step__top" }, h("span", { key: 'cb033a3ebb0bab094faa03088bb9ed3e99b7b3d2', part: "icon", class: `bs-stepper-step__icon bs-stepper-step__icon--${state}` }, state === 'current' && h("span", { key: '3be9f56a6541d903d0c0d7e36a837c31ee3e99ab', class: "bs-stepper-step__icon-dot" }), state === 'done' && h(CheckIcon, { key: 'd9d704f3c03d4e98be52aca9378e4662dc916990' }), state === 'error' && h(ExclamationIcon, { key: 'b20da59b195ec4e7914c92218520070f1fbda2cb' })), h("span", { key: 'a2a3c05a900a84e4038995d19ecedfdba8e2ff81', part: "connector", class: "bs-stepper-step__connector", "aria-hidden": "true" }, h("span", { key: '57ae3b403b2ae8e626afbd23dd2127a700fa75f0', class: "bs-stepper-step__connector-line" }))), h("span", { key: '742d48ec8606bb7012377d3331c604d1b77a2618', part: "label", class: `bs-stepper-step__label bs-stepper-step__label--${state}` }, h("span", { key: '6b1e4fa784433c33a2674dab2998b5ff20b40e82', part: "name", class: "bs-stepper-step__name" }, this.name), this.showDescription && this.description && (h("span", { key: 'ab56d0905142ee0f29ae37280f74aea0a133b438', part: "description", class: "bs-stepper-step__description" }, this.description)))));
     }
     static get is() { return "bs-stepper-step"; }
     static get encapsulation() { return "shadow"; }

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

@@ -69,7 +69,7 @@ export class BsSwitch {
             .filter(Boolean)
             .join(' ');
         const knobClasses = ['bs-switch__knob', `bs-switch__knob--${this.size}`, this.disabled ? 'bs-switch__knob--disabled' : ''].filter(Boolean).join(' ');
-        return (h("label", { key: '8302d6c142ae0c0d761baa10686473abfeed7fe3', class: `bs-switch ${this.disabled ? 'bs-switch--disabled' : ''}` }, h("input", { key: 'e71a6809194104feeec376fb2af96a5b7930a9c2', class: "bs-switch__input", type: "checkbox", role: "switch", checked: this.checked, disabled: this.disabled, "aria-checked": String(this.checked), "aria-label": this.ariaLabel, onChange: this.onChange }), h("span", { key: 'fa52fc07183460c8c96f1d96f23fc16288d08f2f', part: "track", class: trackClasses }, h("span", { key: '69df38b0f655d07ea203ab8835e3d9d293540a3b', part: "knob", class: knobClasses }, h("bs-ripple", { key: '5806afd146b220e647897d4a0ed6c4ba0577bef9', part: "ripple", class: "bs-switch__ripple", centered: true, triggerSelector: ".bs-switch", disabled: this.disabled }))), h("span", { key: 'bf587f014da6bd9e29326f7246d1bfe73fda6b1c', part: "label", class: "bs-switch__label" }, h("slot", { key: '9d2a90c68a00c1e5d4a53475a25d19365277e71a' }))));
+        return (h("label", { key: '980c1ae91a474119f5f80e334333aeeec7f9ca9a', class: `bs-switch ${this.disabled ? 'bs-switch--disabled' : ''}` }, h("input", { key: '39dadbfc6e242947268cca62b5a220662fd1f509', class: "bs-switch__input", type: "checkbox", role: "switch", checked: this.checked, disabled: this.disabled, "aria-checked": String(this.checked), "aria-label": this.ariaLabel, onChange: this.onChange }), h("span", { key: '604d30b69702c27dff09af51c3700fdfb2aed5b5', part: "track", class: trackClasses }, h("span", { key: '6c7fcc721db39058e95e39dad5ee5f85cbda3ecc', part: "knob", class: knobClasses }, h("bs-ripple", { key: '2016d5a40eb077b6e37ab9a65b46fa1bce61e861', part: "ripple", class: "bs-switch__ripple", centered: true, triggerSelector: ".bs-switch", disabled: this.disabled }))), h("span", { key: 'c2fde21c14553f82dadba7013aad090ad3af67a9', part: "label", class: "bs-switch__label" }, h("slot", { key: 'a26df0fb49ded9f531292dbc21918f34a33e1ab6' }))));
     }
     static get is() { return "bs-switch"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-switch/bs-switch.stories.js

@@ -1,5 +1,7 @@
 import { html } from "lit";
 import { componentDescription, propDescription } from "../../stories-utils";
+import { expect, userEvent, waitFor } from "storybook/test";
+import { ready, inShadow, recordEvents } from "../../play-utils";
 const sizes = ['md', 'lg'];
 const meta = {
     title: 'Components/bs-switch',
@@ -23,12 +25,34 @@ const meta = {
     },
 };
 export default meta;
-export const Default = {};
+export const Default = {
+    play: async ({ canvasElement }) => {
+        const host = await ready(canvasElement, 'bs-switch');
+        const changes = recordEvents(host, 'bsChange');
+        const control = inShadow(host, 'input[role="switch"]');
+        await expect(control).toHaveAttribute('aria-checked', 'false');
+        await userEvent.click(control);
+        await waitFor(() => expect(control).toHaveAttribute('aria-checked', 'true'));
+        await expect(changes.map(e => e.detail)).toEqual([true]);
+        await userEvent.click(control);
+        await waitFor(() => expect(control).toHaveAttribute('aria-checked', 'false'));
+        await expect(changes.map(e => e.detail)).toEqual([true, false]);
+    },
+};
 export const Checked = {
     args: { checked: true },
 };
 export const Disabled = {
     args: { disabled: true },
+    play: async ({ canvasElement }) => {
+        const host = await ready(canvasElement, 'bs-switch');
+        const changes = recordEvents(host, 'bsChange');
+        const control = inShadow(host, 'input[role="switch"]');
+        await expect(control).toBeDisabled();
+        await userEvent.click(control);
+        await expect(control).toHaveAttribute('aria-checked', 'false');
+        await expect(changes).toHaveLength(0);
+    },
 };
 export const Medium = {
     args: { size: 'md', checked: true },
@@ -46,15 +70,15 @@ export const AllCombinations = {
       <strong>Disabled</strong>
       <strong>Disabled + checked</strong>
       <strong>Md</strong>
-      <bs-switch size="md"></bs-switch>
-      <bs-switch size="md" checked></bs-switch>
-      <bs-switch size="md" disabled></bs-switch>
-      <bs-switch size="md" disabled checked></bs-switch>
+      <bs-switch size="md" aria-label="Md unchecked"></bs-switch>
+      <bs-switch size="md" aria-label="Md checked" checked></bs-switch>
+      <bs-switch size="md" aria-label="Md disabled" disabled></bs-switch>
+      <bs-switch size="md" aria-label="Md disabled and checked" disabled checked></bs-switch>
       <strong>Lg</strong>
-      <bs-switch size="lg"></bs-switch>
-      <bs-switch size="lg" checked></bs-switch>
-      <bs-switch size="lg" disabled></bs-switch>
-      <bs-switch size="lg" disabled checked></bs-switch>
+      <bs-switch size="lg" aria-label="Lg unchecked"></bs-switch>
+      <bs-switch size="lg" aria-label="Lg checked" checked></bs-switch>
+      <bs-switch size="lg" aria-label="Lg disabled" disabled></bs-switch>
+      <bs-switch size="lg" aria-label="Lg disabled and checked" disabled checked></bs-switch>
     </div>
   `,
 };

package/dist/collection/components/bs-tab/bs-inline-tab/bs-inline-tab.js

@@ -95,7 +95,7 @@ export class BsInlineTab {
     };
     render() {
         const iconOnly = this.hasIcon && !this.hasLabel;
-        return (h("button", { key: 'c44b448caa89c6317c0aec6c316ba31213bc2a79', type: "button", part: "tab", role: "tab", class: `bs-inline-tab ${this.selected ? 'bs-inline-tab--selected' : ''} ${this.disabled ? 'bs-inline-tab--disabled' : ''} ${iconOnly ? 'bs-inline-tab--icon-only' : ''} ${this.hasIcon ? 'bs-inline-tab--has-icon' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, tabIndex: this.tabbable === undefined ? undefined : this.tabbable ? 0 : -1, onClick: this.onClick }, h("bs-ripple", { key: 'f4d5b5cf846ecbb08dbdbcc3496463ed0dba0f77', part: "ripple", centered: false, disabled: this.disabled }), h("span", { key: '7da10306a8d27d5846491a3a7f3d8826d96cc62c', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, h("slot", { key: '023aa132bb9d272577bec309a5b7aeb9c2841651', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'e8eead01034c76f6d5edb591dc861915e5c9707e', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, h("slot", { key: 'cc085193d58c2b3c8a379dac93983a79f8e5f22f', onSlotchange: this.onLabelSlotchange }))));
+        return (h("button", { key: '72a7b79df2f920240bb9e800b1a662b91481d090', type: "button", part: "tab", role: "tab", class: `bs-inline-tab ${this.selected ? 'bs-inline-tab--selected' : ''} ${this.disabled ? 'bs-inline-tab--disabled' : ''} ${iconOnly ? 'bs-inline-tab--icon-only' : ''} ${this.hasIcon ? 'bs-inline-tab--has-icon' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, tabIndex: this.tabbable === undefined ? undefined : this.tabbable ? 0 : -1, onClick: this.onClick }, h("bs-ripple", { key: '62d5478adf647dcf8e61f9cbcb8485edb355d9e2', part: "ripple", centered: false, disabled: this.disabled }), h("span", { key: 'c14a5ede027fc8b5ac941fce332451b4bf5232b6', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, h("slot", { key: '2997b46d314089103fe5738c0cde2600c9fa4121', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'b42c580e6468ad84c30e01b6dddd257f5d0b078d', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, h("slot", { key: '99a55082aa21cca4003033e284bf9c049acc6d52', onSlotchange: this.onLabelSlotchange }))));
     }
     static get is() { return "bs-inline-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -108,7 +108,7 @@ export class BsTab {
         const iconOnly = this.hasIcon && !this.hasLabel;
         const vertical = this.hasIcon && this.hasLabel && this.iconPosition === 'top';
         const showBadge = this.hasBadge && !iconOnly && !vertical;
-        return (h("button", { key: 'b2d2de98c36ee3f1a234b26d02301444511c7fa6', type: "button", part: "tab", role: "tab", class: `bs-tab ${this.selected ? 'bs-tab--selected' : ''} ${this.disabled ? 'bs-tab--disabled' : ''} ${iconOnly ? 'bs-tab--icon-only' : ''} ${vertical ? 'bs-tab--vertical' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, tabIndex: this.tabbable === undefined ? undefined : this.tabbable ? 0 : -1, onClick: this.onClick }, h("bs-ripple", { key: 'ce6536ce97610f7de52ee6015af383a696c1bc27', part: "ripple", centered: false, disabled: this.disabled }), h("span", { key: 'c3ac3b7cf5d2991375d5dc1ccde201b3295f80c5', part: "icon", class: `bs-tab__icon ${this.hasIcon ? 'bs-tab__icon--has-content' : ''}` }, h("slot", { key: '1a07b29dd8a41480a1ddeb74ee5f3064d4b3b270', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'c8e7f3d6a30231994203e5ed44dc84896b23f6ca', part: "label", class: `bs-tab__label ${this.hasLabel ? 'bs-tab__label--has-content' : ''}` }, h("slot", { key: '5fb9c0fd9b6b71e07d037d9e6a3404c54dab822a', onSlotchange: this.onLabelSlotchange })), h("span", { key: '566c636af2dcb775170b1807c6d022dab2e4a811', part: "badge", class: `bs-tab__badge ${showBadge ? 'bs-tab__badge--has-content' : ''}` }, h("slot", { key: 'e762c6a042a248ef61d6cd4449e94395788784d2', name: "badge", onSlotchange: this.onBadgeSlotchange })), h("span", { key: '0ca377dce1ddb8dcafe2bc808355ffdbd3759959', part: "indicator", class: "bs-tab__indicator" })));
+        return (h("button", { key: 'a74abcd56b3dbe37c84543b6f9c7ffca1e5519d6', type: "button", part: "tab", role: "tab", class: `bs-tab ${this.selected ? 'bs-tab--selected' : ''} ${this.disabled ? 'bs-tab--disabled' : ''} ${iconOnly ? 'bs-tab--icon-only' : ''} ${vertical ? 'bs-tab--vertical' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, tabIndex: this.tabbable === undefined ? undefined : this.tabbable ? 0 : -1, onClick: this.onClick }, h("bs-ripple", { key: 'c0d7e7a0612ca60facde0d07345406148d43dd89', part: "ripple", centered: false, disabled: this.disabled }), h("span", { key: '0decf034c01ec42325d55e071405c2ab9d84180e', part: "icon", class: `bs-tab__icon ${this.hasIcon ? 'bs-tab__icon--has-content' : ''}` }, h("slot", { key: '9bfad6e083a8df7afde382e6db551b0d59201f82', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'd9376434f2c2780dcc4f7f0fba92bec00bc8b31c', part: "label", class: `bs-tab__label ${this.hasLabel ? 'bs-tab__label--has-content' : ''}` }, h("slot", { key: '6be3d55acf8e2da19d32f2c821d2f2d956cb0e0c', onSlotchange: this.onLabelSlotchange })), h("span", { key: '9fc2c317d7dcd5fc66225b56619105897c974bf6', part: "badge", class: `bs-tab__badge ${showBadge ? 'bs-tab__badge--has-content' : ''}` }, h("slot", { key: '6174f294d93d4102f21dbff094d505b7e929cae9', name: "badge", onSlotchange: this.onBadgeSlotchange })), h("span", { key: '0723083e4b00d00111b0f0cade36de63b805185d', part: "indicator", class: "bs-tab__indicator" })));
     }
     static get is() { return "bs-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-tab/bs-tabs/bs-tabs.js

@@ -142,7 +142,7 @@ export class BsTabs {
     }
     render() {
         const vertical = this.orientation === 'vertical';
-        return (h("div", { key: 'a5e190b0439a02353c187f94db3c42f274936ce8', part: "tablist", role: "tablist", "aria-orientation": this.orientation, class: `bs-tabs bs-tabs--${this.type} ${vertical ? 'bs-tabs--vertical' : ''}` }, h("slot", { key: 'c20d0df9c448227a429dd42f9ec484225c172882', onSlotchange: () => this.syncRovingTabindex() })));
+        return (h("div", { key: 'a48d2ee16e78ca21fce532f10c009d092d889dbb', part: "tablist", role: "tablist", "aria-orientation": this.orientation, class: `bs-tabs bs-tabs--${this.type} ${vertical ? 'bs-tabs--vertical' : ''}` }, h("slot", { key: 'd4a32f7486fdc2c86bbf6cdd9f5bb79197878d9b', onSlotchange: () => this.syncRovingTabindex() })));
     }
     static get is() { return "bs-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-tab/bs-tabs/bs-tabs.stories.js

@@ -1,5 +1,7 @@
 import { html } from "lit";
 import { componentDescription, propDescription } from "../../../stories-utils";
+import { expect, userEvent, waitFor } from "storybook/test";
+import { ready, inShadow, recordEvents } from "../../../play-utils";
 const types = ['bs-tab', 'bs-inline-tab'];
 const orientations = ['horizontal', 'vertical'];
 const tabLabels = ['Overview', 'Details', 'Settings', 'Archived'];
@@ -29,7 +31,23 @@ const meta = {
     },
 };
 export default meta;
-export const Default = {};
+export const Default = {
+    play: async ({ canvasElement }) => {
+        const tabs = await ready(canvasElement, 'bs-tabs');
+        const changes = recordEvents(tabs, 'bsChange');
+        const tabButton = (index) => inShadow(canvasElement.querySelectorAll('bs-tab')[index], '[part="tab"]');
+        await expect(tabButton(0)).toHaveAttribute('aria-selected', 'true');
+        await userEvent.click(tabButton(1));
+        await waitFor(() => expect(tabButton(1)).toHaveAttribute('aria-selected', 'true'));
+        await expect(tabButton(0)).toHaveAttribute('aria-selected', 'false');
+        await expect(changes).toHaveLength(1);
+        await expect(tabs.value).toBe(changes[0].detail.value);
+        // The last tab is disabled: clicking it must not select it or emit another change.
+        await userEvent.click(tabButton(3));
+        await expect(tabButton(3)).toHaveAttribute('aria-selected', 'false');
+        await expect(changes).toHaveLength(1);
+    },
+};
 export const InlineTabGroup = {
     name: 'Inline tab group',
     args: { type: 'bs-inline-tab' },

package/dist/collection/components/bs-table-of-contents/bs-table-of-contents.js

@@ -177,7 +177,7 @@ export class BsTableOfContents {
     }
     render() {
         const nodes = this.tree();
-        return (h("nav", { key: '76e2a4abce943d0dd8e567c7ab2beef7b0d5b1c4', part: "container", class: "bs-toc", "aria-label": this.label }, !this.hideTitle && (h("p", { key: 'ba45bce72e66d2b8ccb1bcd3960c0af0f3fc3717', part: "title", id: this.titleId, class: "bs-toc__title" }, this.label)), nodes.length > 0 && this.renderList(nodes, 1), h("slot", { key: '8c1b4c8cb93c35b43cd8bf91d1473d9fe5311aa9', onSlotchange: this.readSlotted })));
+        return (h("nav", { key: 'd804da8cde3c5e97f62ce8c9d7bfba30d6a493b0', part: "container", class: "bs-toc", "aria-label": this.label }, !this.hideTitle && (h("p", { key: 'f797d4a7cb59639cede25a91b5ad3074dda98774', part: "title", id: this.titleId, class: "bs-toc__title" }, this.label)), nodes.length > 0 && this.renderList(nodes, 1), h("slot", { key: '06732b5cf28a816e4a504b3f64a699ec29c2697c', onSlotchange: this.readSlotted })));
     }
     static get is() { return "bs-table-of-contents"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,5 +1,9 @@
 import { Host, h } from "@stencil/core";
 /**
+ * @deprecated Use `bs-chip-informative` with `removable` and/or `href` instead -- it has the same colours and
+ * sizes plus the remove button and link option, so a separate tag component is redundant. `bs-tag` keeps
+ * working unchanged and will be removed in a later major version.
+ *
  * A small label that categorises or annotates an item (a topic, a keyword, a status of a record). It can be
  * neutral or coloured, optionally removable, and optionally a link.
  *
@@ -56,8 +60,8 @@ export class BsTag {
     };
     render() {
         const rel = this.href && this.target === '_blank' ? 'noopener noreferrer' : undefined;
-        const label = h("slot", { key: '08ceba56454f3419009e4714cdb264cf377a2ca1', onSlotchange: () => (this.labelText = this.readLabel()) });
-        return (h(Host, { key: '02747ac2c8afd9204257bbcd212bdf6db5c061fe' }, h("span", { key: '2f65cb5c37463a196f79e5a0149e0be810ae15ff', part: "container", class: { 'bs-tag': true, 'bs-tag--removable': this.removable } }, h("span", { key: '7520ed22f21e2fb3dbaa24113cf7740de1a52dcc', part: "icon", class: { 'bs-tag__icon': true, 'bs-tag__icon--visible': this.hasIcon } }, h("slot", { key: 'e6ccfd5de8815950e466a107d731a817fa5d2f06', name: "icon", onSlotchange: (e) => (this.hasIcon = e.target.assignedNodes().length > 0) })), this.href ? (h("a", { part: "label", class: "bs-tag__label bs-tag__label--link", href: this.href, target: this.target, rel: rel }, label)) : (h("span", { part: "label", class: "bs-tag__label" }, label)), this.removable && (h("bs-icon-button", { key: 'fddf2c1f5c3e8a12cd317a19652e800837c741ea', part: "remove", class: "bs-tag__remove", size: "xs", variant: "subtle", ariaLabel: `${this.removeLabel} ${this.labelText}`.trim(), onClick: this.onRemove }, h("svg", { key: '7c708bd1a08d9c8897bdb9e76b133fa2ed52a3e7', viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: 'b7641a61417f15eddf96fa9e580dd999b2077d08', d: "M12.5 3.5L3.5 12.5M12.5 12.5L3.5 3.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))));
+        const label = h("slot", { key: '9f9ee0444b576ad3e258c942222580112acf9278', onSlotchange: () => (this.labelText = this.readLabel()) });
+        return (h(Host, { key: '0e7e0b30816237f8b1ff4e188989bf5494ebe5b2' }, h("span", { key: '71a97a157c57a9e4bae9f2606f8670913d92f1e2', part: "container", class: { 'bs-tag': true, 'bs-tag--removable': this.removable } }, h("span", { key: '870efd02cc59cc348465aee33f1232660353cc25', part: "icon", class: { 'bs-tag__icon': true, 'bs-tag__icon--visible': this.hasIcon } }, h("slot", { key: '6b44752833f018db3b2c4efe72fab6db9742e017', name: "icon", onSlotchange: (e) => (this.hasIcon = e.target.assignedNodes().length > 0) })), this.href ? (h("a", { part: "label", class: "bs-tag__label bs-tag__label--link", href: this.href, target: this.target, rel: rel }, label)) : (h("span", { part: "label", class: "bs-tag__label" }, label)), this.removable && (h("bs-icon-button", { key: '4cf3c5b4f886806d56fbfe453221130186ac9130', part: "remove", class: "bs-tag__remove", size: "xs", variant: "subtle", ariaLabel: `${this.removeLabel} ${this.labelText}`.trim(), onClick: this.onRemove }, h("svg", { key: '0c3313fdfd20098b98f9d864ac3143dcd647d10a', viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: 'eecaf5e9b0880265a5eb64973c1b9b7b5c02ab56', d: "M12.5 3.5L3.5 12.5M12.5 12.5L3.5 3.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))));
     }
     static get is() { return "bs-tag"; }
     static get encapsulation() { return "shadow"; }

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

@@ -27,7 +27,7 @@ export class BsText {
     tone = 'default';
     render() {
         const Tag = this.as;
-        return (h(Tag, { key: '249b8ddd92904587ac8eff6a585f03e8d228aae9', part: "text", class: `bs-text bs-text--${this.variant}` }, h("slot", { key: '2e29e03955058bb6feb8aff484ddf0f7d5836cd0' })));
+        return (h(Tag, { key: '39b932702ac56ba72165816fefadecc19899b302', part: "text", class: `bs-text bs-text--${this.variant}` }, h("slot", { key: '10c274f769fdc64b6994c967eb517997f6a00742' })));
     }
     static get is() { return "bs-text"; }
     static get encapsulation() { return "shadow"; }

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

@@ -200,14 +200,14 @@ export class BsTimepicker {
         return (h("div", { part: "spinner", class: "bs-timepicker__spinner" }, h("button", { part: "step", type: "button", class: "bs-timepicker__step", "aria-label": stepLabel(this.increaseLabel), tabindex: -1, onClick: () => this.stepBy(col, 1) }, h("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { d: "M18 15L12 9L6 15", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("div", { part: "value", class: "bs-timepicker__value", role: "spinbutton", tabindex: 0, "aria-label": label, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": n, "aria-valuetext": pad(n), onKeyDown: this.onKeyDown(col), onBlur: () => (this.typed = '') }, pad(n)), h("button", { part: "step", type: "button", class: "bs-timepicker__step", "aria-label": stepLabel(this.decreaseLabel), tabindex: -1, onClick: () => this.stepBy(col, -1) }, h("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { d: "M6 9L12 15L18 9", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
     }
     render() {
-        return (h("bs-card", { key: 'fdbf8e19525a53d43094d1b2115c232fb0ea9500', part: "container", class: "bs-timepicker", surface: "raised" }, h("div", { key: 'a2b9aa1ce9529d3f52fd45f4ca5af02582930a15', class: "bs-timepicker__body" }, h("div", { key: 'c59f6c9fdec3a1f9ffb81aa7e5bac9421dadcd35', part: "header", class: "bs-timepicker__header" }, h("div", { key: '2825b6a11f97a7186eb6340faa816b0b6d8be28a', part: "title", class: "bs-timepicker__title" }, this.heading), h("label", { key: '4f6dc3e9768f0396b3e59943496a9d9443a8501c', class: "bs-timepicker__format" }, h("span", { key: 'b94eccc6949019c78b98051a8eba3d41a4546cf1' }, this.formatLabel), h("bs-switch", { key: '6a2d43b1b37472720d5ca1f84951dc908b37689e', part: "format-toggle", size: "md", ariaLabel: this.formatLabel, checked: !this.is12h, onBsChange: (ev) => (this.format = ev.detail ? '24h' : '12h') }))), h("div", { key: '01efb69cc03be59785b36df9fccf4452a1894225', class: "bs-timepicker__divider" }), h("div", { key: 'ead194685c2ae0976d4f134ad0231208e3fab1ea', part: "selector", class: "bs-timepicker__selector" }, this.renderColumn('hour', this.hourLabel), h("div", { key: '0250edfefe27363208489c147026462edbf7648a', part: "separator", class: "bs-timepicker__separator", "aria-hidden": "true" }, h("svg", { key: 'e79c68f3dd11a3ee9edd5d18ebd9065e4019f029', viewBox: "0 0 4 32", fill: "currentColor" }, h("circle", { key: 'b0fcd6e48bddfbf722c0aa6356be05665258cda6', cx: "2", cy: "10", r: "2" }), h("circle", { key: '892630f5f5a51aa48f97d8a7c86791aef6bd2ba2', cx: "2", cy: "22", r: "2" }))), this.renderColumn('minute', this.minuteLabel), this.is12h && (h("bs-input", { key: '502e6bebb0f241b3800b699efbb8cdbcf671597d', part: "period", class: "bs-timepicker__period", type: "dropdown", label: this.periodLabel, value: this.isPm ? 'PM' : 'AM', options: [
+        return (h("bs-card", { key: '57964e003d5d7d6abccb13a17e759721e2aa272e', part: "container", class: "bs-timepicker", surface: "raised" }, h("div", { key: '664469ea766475d939684231e4c1c5f01afe824a', class: "bs-timepicker__body" }, h("div", { key: '75aa6484e5fd2735ef972f3a29ebba5ce89838d4', part: "header", class: "bs-timepicker__header" }, h("div", { key: '06978e8b2b3f245d723bbf8099bc542a1ffcce78', part: "title", class: "bs-timepicker__title" }, this.heading), h("label", { key: '69154fd6015f1d945adcdf954841da6bf2d4d539', class: "bs-timepicker__format" }, h("span", { key: 'f8dadb20d719f379e5f47a888706af6b2ab0202b' }, this.formatLabel), h("bs-switch", { key: '5411272d1141e5c0c9d3742c81df88f78eb113ed', part: "format-toggle", size: "md", ariaLabel: this.formatLabel, checked: !this.is12h, onBsChange: (ev) => (this.format = ev.detail ? '24h' : '12h') }))), h("div", { key: '3cb6c8ccad07ec88afab6f9f40a1115f82ed477e', class: "bs-timepicker__divider" }), h("div", { key: '54f473f57a0c498a3267cabf84db3c1a8ba285ab', part: "selector", class: "bs-timepicker__selector" }, this.renderColumn('hour', this.hourLabel), h("div", { key: '92e9520755d52e58fe4412a073748e9928b3cff7', part: "separator", class: "bs-timepicker__separator", "aria-hidden": "true" }, h("svg", { key: 'cd55a6677dd695e5e93d296302cc429d84e01887', viewBox: "0 0 4 32", fill: "currentColor" }, h("circle", { key: 'ef746f64ebb5a49ee0f56c0c50b167316aec5053', cx: "2", cy: "10", r: "2" }), h("circle", { key: '65852107527c34a4aaec9c00fca8d5be4ef2d5aa', cx: "2", cy: "22", r: "2" }))), this.renderColumn('minute', this.minuteLabel), this.is12h && (h("bs-input", { key: '9d17f6c9401969e52ff99a4b84560617c2525300', part: "period", class: "bs-timepicker__period", type: "dropdown", label: this.periodLabel, value: this.isPm ? 'PM' : 'AM', options: [
                 { label: 'AM', value: 'AM' },
                 { label: 'PM', value: 'PM' },
             ], onBsChange: (ev) => {
                 const pm = ev.detail === 'PM';
                 if (pm !== this.isPm)
                     this.hour = (this.hour + 12) % 24;
-            } }))), h("div", { key: 'ed95958ca424696e252fe90eab8855d0bdffd89c', class: "bs-timepicker__divider" }), h("div", { key: '77c404d4617a5ee6f669a2ffba63fa5729f98cf5', part: "footer", class: "bs-timepicker__footer" }, h("bs-button", { key: 'fbeb76d30f1eea912b3e37def67f8058b74626a7', part: "cancel", variant: "subtle", onClick: this.cancel }, this.cancelLabel), h("bs-button", { key: '1baf37a0708379ef23951f76765d048087d3083b', part: "confirm", variant: "primary", onClick: this.confirm }, this.confirmLabel)))));
+            } }))), h("div", { key: '914705bd05bf0a3d1a8d85c671241325cc564369', class: "bs-timepicker__divider" }), h("div", { key: '1c1849dde9807f507dc0c7b1446f725f8e5971a0', part: "footer", class: "bs-timepicker__footer" }, h("bs-button", { key: '2e3bd483d598b9539b28742fba2a2dbff56a38ea', part: "cancel", variant: "subtle", onClick: this.cancel }, this.cancelLabel), h("bs-button", { key: '667c14ac6847e9d27439ea0637038deb019f0ccc', part: "confirm", variant: "primary", onClick: this.confirm }, this.confirmLabel)))));
     }
     static get is() { return "bs-timepicker"; }
     static get encapsulation() { return "shadow"; }

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

@@ -27,7 +27,7 @@ export class BsToast {
         this.bsDismiss.emit();
     };
     render() {
-        return (h("div", { key: '8cca96362a50acd1f552c08163e8a2991b191d17', part: "container", class: `bs-toast bs-toast--${this.state}`, role: "status", "aria-live": this.state === 'error' ? 'assertive' : 'polite' }, h("div", { key: '01cc2a6b9b8ba851dec751efff862fe3225058be', class: "bs-toast__content" }, h("span", { key: '29ed8cc01ac3f5b46d0cb8299bc60af5fdaf281c', part: "icon", class: "bs-toast__icon", "aria-hidden": "true" }, h(StateIcon, { key: '568f57389206d284b9717fa7f1cb894f20d50cf7', state: this.state })), h("span", { key: '7271784969a334c9e5f297a1ca845c2c08d12c5d', part: "message", class: "bs-toast__message" }, h("slot", { key: 'b46cf88eb3ac95c47ea8aff52f9accd1a9755546' }))), h("div", { key: '23d69f46262dbd5a4279d608f4a72c2a9c2e1463', class: "bs-toast__actions" }, h("button", { key: '722b445b6fcf22f97ed44fca3ecd9a2d286f8bad', part: "close", type: "button", class: "bs-toast__close", "aria-label": this.dismissLabel, onClick: this.onDismiss }, h(CloseIcon, { key: '2401bd61c3f8873b8a37d2f9474850c253b1b9ab' })))));
+        return (h("div", { key: '5bc681de86bd983ebe893b9ea8ed94b473896982', part: "container", class: `bs-toast bs-toast--${this.state}`, role: "status", "aria-live": this.state === 'error' ? 'assertive' : 'polite' }, h("div", { key: '4842f349978fedfcceb535da81e90029d98b3432', class: "bs-toast__content" }, h("span", { key: 'c396041be59b6088c2a50ef156b218c7c2cc70d0', part: "icon", class: "bs-toast__icon", "aria-hidden": "true" }, h(StateIcon, { key: '33342d2bab947b9144e2bee18abb8292c75fe339', state: this.state })), h("span", { key: 'c6b2840d95a518e5d91dc281a81a83e6442bab1b', part: "message", class: "bs-toast__message" }, h("slot", { key: '1505051e3ce412f7b6bcefd82183717f870418b5' }))), h("div", { key: '50e3f96e3f7b325b97d3cf90771374f60aa87f24', class: "bs-toast__actions" }, h("button", { key: '69962e5d154c55372b562b45e06c07b8e16ce306', part: "close", type: "button", class: "bs-toast__close", "aria-label": this.dismissLabel, onClick: this.onDismiss }, h(CloseIcon, { key: '96d3547e268179d3f4799d43bf2d71abfbe8dc07' })))));
     }
     static get is() { return "bs-toast"; }
     static get encapsulation() { return "shadow"; }

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

@@ -40,6 +40,17 @@ describe('bs-toggle-button', () => {
         expect(btn.getAttribute('aria-label')).toBe('Grid view');
         expect(btn).toHaveClass('bs-toggle-button--icon-only');
     });
+    it('is not icon-only on the very first render when it has label text', async () => {
+        // The class must be right before any `slotchange` fires, or the label is hidden for a frame
+        // and the button briefly has no accessible name.
+        const el = document.createElement('bs-toggle-button');
+        el.textContent = 'Bold';
+        document.body.appendChild(el);
+        await el.componentOnReady();
+        const btn = el.shadowRoot.querySelector('button');
+        expect(btn).not.toHaveClass('bs-toggle-button--icon-only');
+        el.remove();
+    });
     it('tabbable=false sets tabindex -1', async () => {
         const { root } = await render(h("bs-toggle-button", { tabbable: false }, "A"));
         expect(root.shadowRoot.querySelector('button').getAttribute('tabindex')).toBe('-1');

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

@@ -41,6 +41,14 @@ export class BsToggleButton {
     bsChange;
     hasLabel = false;
     hasIcon = false;
+    // Seed from the light DOM so the first render is already correct. Waiting for `slotchange` leaves
+    // a frame where a labelled button is styled icon-only (label hidden, so no accessible name).
+    componentWillLoad() {
+        const children = Array.from(this.el.childNodes);
+        const slotOf = (n) => (n.nodeType === 1 ? n.getAttribute('slot') : null);
+        this.hasIcon = children.some(n => slotOf(n) === 'icon');
+        this.hasLabel = children.some(n => slotOf(n) === null && (n.nodeType === 1 || !!n.textContent?.trim()));
+    }
     onIconSlotchange = (ev) => {
         this.hasIcon = ev.target.assignedNodes().length > 0;
     };
@@ -62,7 +70,7 @@ export class BsToggleButton {
     };
     render() {
         const radio = this.mode === 'radio';
-        return (h("button", { key: 'ec490445b357966720ae68f8f1e748d650b4028f', type: "button", part: "button", class: `bs-toggle-button ${this.pressed ? 'bs-toggle-button--pressed' : ''} ${this.hasLabel ? '' : 'bs-toggle-button--icon-only'}`, role: radio ? 'radio' : undefined, "aria-pressed": radio ? undefined : String(this.pressed), "aria-checked": radio ? String(this.pressed) : undefined, "aria-label": this.ariaLabel, disabled: this.disabled, tabindex: this.tabbable ? undefined : -1, onClick: this.onClick }, h("bs-ripple", { key: 'd774dd4ba709a7056a66148ce10a530198a6880b', part: "ripple", centered: false, disabled: this.disabled }), h("span", { key: '2379755618752fedb3c877a10513f2c62f8cbb9c', part: "icon", class: `bs-toggle-button__icon ${this.hasIcon ? 'bs-toggle-button__icon--has-content' : ''}` }, h("slot", { key: '15ad567b32ede0f8aa8bc00f3aebf232044cb2fb', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'd103bd76433e1aa4876380b6fb24061fb37b1643', part: "label", class: "bs-toggle-button__label" }, h("slot", { key: '83257a1e5543cc7e3ce490a52617c7d599605cec', onSlotchange: this.onLabelSlotchange }))));
+        return (h("button", { key: 'f0d0b857c75ded029be27ec9adb00d5f181a3d50', type: "button", part: "button", class: `bs-toggle-button ${this.pressed ? 'bs-toggle-button--pressed' : ''} ${this.hasLabel ? '' : 'bs-toggle-button--icon-only'}`, role: radio ? 'radio' : undefined, "aria-pressed": radio ? undefined : String(this.pressed), "aria-checked": radio ? String(this.pressed) : undefined, "aria-label": this.ariaLabel, disabled: this.disabled, tabindex: this.tabbable ? undefined : -1, onClick: this.onClick }, h("bs-ripple", { key: '4aec0e3eee4ae6a5a407833de52533fc03f6b8f3', part: "ripple", centered: false, disabled: this.disabled }), h("span", { key: '3917ef305cf87dbbda33c4770cf86e6892423b39', part: "icon", class: `bs-toggle-button__icon ${this.hasIcon ? 'bs-toggle-button__icon--has-content' : ''}` }, h("slot", { key: '4bd9d1e4da1a7a37efa980e36a07266911c04afe', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'e33eeb741ebda53df820aaec814892082fb1076d', part: "label", class: "bs-toggle-button__label" }, h("slot", { key: 'ab303182f9bcc5bb6330f59e4a1d7e2fef698db8', onSlotchange: this.onLabelSlotchange }))));
     }
     static get is() { return "bs-toggle-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -18,5 +18,5 @@ export const Pressed = { args: { pressed: true } };
 export const Disabled = { args: { disabled: true } };
 export const IconOnly = {
     name: 'Icon only',
-    render: () => html `<bs-toggle-button ariaLabel="Grid view">${gridIcon}</bs-toggle-button>`,
+    render: () => html `<bs-toggle-button aria-label="Grid view">${gridIcon}</bs-toggle-button>`,
 };

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

@@ -97,7 +97,7 @@ export class BsToggleButtonGroup {
             btn?.click();
     }
     render() {
-        return (h("div", { key: '905bc6d78ea98ca06ad49d2835daa8cbde5dfe9c', part: "group", class: "bs-toggle-button-group", role: this.multiple ? 'group' : 'radiogroup', "aria-label": this.ariaLabel, "aria-disabled": this.disabled ? 'true' : undefined }, h("slot", { key: 'f06398e10058a9f3ece77bf95a3922fb80f31a0a', onSlotchange: () => this.sync() })));
+        return (h("div", { key: '61d043efa2ecdf437d48bc2ca0b3d75f17a00b43', part: "group", class: "bs-toggle-button-group", role: this.multiple ? 'group' : 'radiogroup', "aria-label": this.ariaLabel, "aria-disabled": this.disabled ? 'true' : undefined }, h("slot", { key: '4b1c8e64b23cd54607c19b214b938e44dee99fef', onSlotchange: () => this.sync() })));
     }
     static get is() { return "bs-toggle-button-group"; }
     static get encapsulation() { return "shadow"; }