@brandsync/wc 1.21.0 → 1.22.0

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

@@ -13,6 +13,7 @@ const meta = {
       stroke-width=${args.strokeWidth}
       value=${args.value}
       show-label=${args.showLabel}
+      aria-label=${args.ariaLabel}
     ></bs-progress>
   `,
     argTypes: {
@@ -25,6 +26,7 @@ const meta = {
         },
         value: { control: { type: 'range', min: 0, max: 100 }, description: propDescription('bs-progress', 'value') },
         showLabel: { control: 'boolean', description: propDescription('bs-progress', 'show-label') },
+        ariaLabel: { control: 'text', description: propDescription('bs-progress', 'aria-label') },
     },
     args: {
         type: 'determinate',
@@ -32,6 +34,7 @@ const meta = {
         strokeWidth: 4,
         value: 50,
         showLabel: true,
+        ariaLabel: 'Upload progress',
     },
 };
 export default meta;
@@ -41,7 +44,7 @@ export const Sizes = {
     name: 'Sizes',
     render: () => html `
     <div style="display: flex; align-items: flex-end; gap: 24px;">
-      ${sizes.map(size => html `<bs-progress size=${size} value="50"></bs-progress>`)}
+      ${sizes.map(size => html `<bs-progress size=${size} value="50" aria-label="Upload progress"></bs-progress>`)}
     </div>
   `,
 };
@@ -50,7 +53,7 @@ export const StrokeWidths = {
     name: 'Stroke widths',
     render: () => html `
     <div style="display: flex; align-items: flex-end; gap: 24px;">
-      ${strokeWidths.map(strokeWidth => html `<bs-progress size="large" stroke-width=${strokeWidth} value="50"></bs-progress>`)}
+      ${strokeWidths.map(strokeWidth => html `<bs-progress size="large" stroke-width=${strokeWidth} value="50" aria-label="Upload progress"></bs-progress>`)}
     </div>
   `,
 };
@@ -59,7 +62,7 @@ export const Values = {
     name: 'Values',
     render: () => html `
     <div style="display: flex; align-items: flex-end; gap: 24px;">
-      ${[0, 25, 50, 75, 100].map(value => html `<bs-progress value=${value}></bs-progress>`)}
+      ${[0, 25, 50, 75, 100].map(value => html `<bs-progress value=${value} aria-label="Upload progress"></bs-progress>`)}
     </div>
   `,
 };

package/dist/collection/components/bs-progress-linear/bs-progress-linear.js

@@ -51,13 +51,13 @@ export class BsProgressLinear {
     render() {
         const isDeterminate = this.type === 'determinate';
         const value = this.clampedValue;
-        return (h("div", { key: '004c6c83088157d322be56114f8885cb0b81a99f', part: "container", class: "bs-progress-linear" }, h("div", { key: '5154c0601c8a7601582363cd1f13abdf102376d1', part: "track", class: `bs-progress-linear__track bs-progress-linear__track--${this.size}`, role: "progressbar", "aria-label": this.ariaLabel, "aria-valuemin": isDeterminate ? '0' : undefined, "aria-valuemax": isDeterminate ? '100' : undefined, "aria-valuenow": isDeterminate ? String(value) : undefined, "aria-busy": isDeterminate ? undefined : 'true' }, isDeterminate ? (h("div", { part: "fill", class: "bs-progress-linear__fill", style: { width: `${value}%` } })) : (
+        return (h("div", { key: 'ebb65abea0eeae086f7de10ec3f509145497a14a', part: "container", class: "bs-progress-linear" }, h("div", { key: '9673fd25c2191a8cac67d40a264b5b36a68e65fc', part: "track", class: `bs-progress-linear__track bs-progress-linear__track--${this.size}`, role: "progressbar", "aria-label": this.ariaLabel, "aria-valuemin": isDeterminate ? '0' : undefined, "aria-valuemax": isDeterminate ? '100' : undefined, "aria-valuenow": isDeterminate ? String(value) : undefined, "aria-busy": isDeterminate ? undefined : 'true' }, isDeterminate ? (h("div", { part: "fill", class: "bs-progress-linear__fill", style: { width: `${value}%` } })) : (
         // Figma's indeterminate bar is a soft "comet" gradient segment (transparent -> blue ->
         // transparent) sliding left-to-right across the track's full width in a loop -- the
         // same fade concept as bs-progress's indeterminate ring's conic-gradient comet tail,
         // but along a straight line via a linear-gradient + `transform: translateX(...)`
         // keyframe animation instead of a rotating conic-gradient.
-        h("div", { part: "fill", class: "bs-progress-linear__fill bs-progress-linear__fill--indeterminate" }))), this.showLabel && this.hasLabelContent && (h("span", { key: 'b06b6c6f5bfa096ac8f186569d17c05cb55f24d4', part: "label", class: "bs-progress-linear__label" }, h("slot", { key: '58350a58d914a45a221b44c3df47424c6e45a51b' })))));
+        h("div", { part: "fill", class: "bs-progress-linear__fill bs-progress-linear__fill--indeterminate" }))), this.showLabel && this.hasLabelContent && (h("span", { key: 'ccaa0586c64ace7d61d0983027ffac9553d09fc1', part: "label", class: "bs-progress-linear__label" }, h("slot", { key: 'cf3582f32b00eb4f00dfe4804c61f6d10eae8421' })))));
     }
     // The default slot's assigned content lives in the host's light DOM regardless of whether a
     // <slot> is currently rendered in the shadow tree, so this can be computed directly from the

package/dist/collection/components/bs-progress-linear/bs-progress-linear.stories.js

@@ -6,7 +6,7 @@ const meta = {
     title: 'Components/bs-progress/Linear',
     parameters: { docs: { description: { component: componentDescription('bs-progress-linear') } } },
     render: args => html `
-    <bs-progress-linear type=${args.type} size=${args.size} value=${args.value} show-label=${args.showLabel}>
+    <bs-progress-linear type=${args.type} size=${args.size} value=${args.value} show-label=${args.showLabel} aria-label=${args.ariaLabel}>
       ${args.label}
     </bs-progress-linear>
   `,
@@ -16,6 +16,7 @@ const meta = {
         value: { control: { type: 'range', min: 0, max: 100 }, description: propDescription('bs-progress-linear', 'value') },
         showLabel: { control: 'boolean', description: propDescription('bs-progress-linear', 'show-label') },
         label: { control: 'text', description: 'Slotted label content (default slot).' },
+        ariaLabel: { control: 'text', description: propDescription('bs-progress-linear', 'aria-label') },
     },
     args: {
         type: 'determinate',
@@ -23,6 +24,7 @@ const meta = {
         value: 40,
         showLabel: true,
         label: 'Label',
+        ariaLabel: 'Upload progress',
     },
 };
 export default meta;
@@ -32,7 +34,7 @@ export const Sizes = {
     name: 'Sizes',
     render: () => html `
     <div style="display: flex; flex-direction: column; gap: 24px; width: 320px;">
-      ${sizes.map(size => html `<bs-progress-linear size=${size} value="40">Label</bs-progress-linear>`)}
+      ${sizes.map(size => html `<bs-progress-linear size=${size} value="40" aria-label="Upload progress">Label</bs-progress-linear>`)}
     </div>
   `,
 };
@@ -41,7 +43,7 @@ export const Values = {
     name: 'Values',
     render: () => html `
     <div style="display: flex; flex-direction: column; gap: 24px; width: 320px;">
-      ${[0, 25, 50, 75, 100].map(value => html `<bs-progress-linear value=${value}>${value}%</bs-progress-linear>`)}
+      ${[0, 25, 50, 75, 100].map(value => html `<bs-progress-linear value=${value} aria-label="Upload progress">${value}%</bs-progress-linear>`)}
     </div>
   `,
 };
@@ -50,7 +52,7 @@ export const WithoutLabel = {
     args: { showLabel: false },
     render: args => html `
     <div style="width: 320px;">
-      <bs-progress-linear type=${args.type} size=${args.size} value=${args.value} show-label=${args.showLabel}>
+      <bs-progress-linear type=${args.type} size=${args.size} value=${args.value} show-label=${args.showLabel} aria-label=${args.ariaLabel}>
         ${args.label}
       </bs-progress-linear>
     </div>
@@ -60,7 +62,7 @@ export const Indeterminate = {
     args: { type: 'indeterminate' },
     render: args => html `
     <div style="width: 320px;">
-      <bs-progress-linear type=${args.type} size=${args.size} show-label=${args.showLabel}> ${args.label} </bs-progress-linear>
+      <bs-progress-linear type=${args.type} size=${args.size} show-label=${args.showLabel} aria-label=${args.ariaLabel}> ${args.label} </bs-progress-linear>
     </div>
   `,
 };

package/dist/collection/components/bs-qr-code/bs-qr-code.js

@@ -168,7 +168,7 @@ export class BsQrCode {
         const buttonSize = this.size === 'sm' ? 'sm' : 'md';
         // Figma shows the unavailable actions as filled-disabled (grey) rather than a faded outline,
         // which is what bs-button's disabled primary looks like.
-        return (h("bs-card", { key: 'ca422530afebebe0ce18ce8c1445a06d202d97d4', part: "container", class: "bs-qr-code", surface: "base" }, this.closable && (h("bs-icon-button", { key: 'f14dd77c2ce0652bf94f7b324ea0e807d3550d94', part: "close", class: "bs-qr-code__close", variant: "subtle", size: "sm", ariaLabel: this.closeLabel, onClick: () => this.bsClose.emit() }, h("svg", { key: '4a3e29041401cded70e8fa60822b48ca5d442517', viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", "stroke-width": "1.6", "stroke-linecap": "round", "aria-hidden": "true" }, h("path", { key: '1e987f16f4ead0d451172f54ca73f36201aaba15', d: "M5 5L15 15M15 5L5 15" })))), h("div", { key: 'bc14d35f6b9a3e4519916faa4a58da7ba02968c2', class: "bs-qr-code__body" }, h("div", { key: 'b60b3cab47cb43b700d916c199d0e64f5c05274a', part: "head", class: "bs-qr-code__head" }, h("p", { key: '6f22983a46370ad7712ba6f0da8277aa5f2673b9', part: "title", class: "bs-qr-code__title" }, this.heading), this.description && (h("p", { key: '5cd4b55d96798d17db852c8cd763e3567de4f79a', part: "description", class: "bs-qr-code__description" }, this.description))), h("div", { key: '488b2ff294b754bd66589d7e066771ee18925949', part: "qr", class: "bs-qr-code__qr" }, h("div", { key: '082d3d22f546210f6da00e0f6742ced8fac0e49b', part: "code", class: "bs-qr-code__code" }, h("slot", { key: 'f003aa0c063f67befeb598527f214db48ab32223', name: "code" }, this.renderMatrix()), h("div", { key: '14ef033186cecb67c8ec03af3016f992645bbb83', part: "logo", class: { 'bs-qr-code__logo': true, 'bs-qr-code__logo--visible': this.hasLogo } }, h("slot", { key: '0d0716edce8fddff9b32bd50132ef5da668c56db', name: "logo", onSlotchange: (ev) => (this.hasLogo = ev.target.assignedNodes().length > 0) }))), this.renderOverlay()), this.type === 'payment' && this.amount && (h("div", { key: '83762e2cb36c66f0e6e1452408d0908abdec930c', part: "amount", class: "bs-qr-code__amount" }, this.amountLabel && h("p", { key: '7e6102877e193d34bf2ba077cccc4c6e6c32bbea', class: "bs-qr-code__amount-label" }, this.amountLabel), h("p", { key: '7ed0e74a2e91dd70da9ab71ceb883ee4ea323dfd', class: "bs-qr-code__amount-value" }, this.amount))), this.type === 'default' && this.url && (h("div", { key: 'd45463defa962c51192ff2f067a5abe3aaf37a05', part: "url", class: "bs-qr-code__url" }, this.url)), this.expiry && (h("bs-chip-informative", { key: 'eac00eec4fdb9ac8d0537fa9b6fa8e2cdc6204e7', part: "expiry", size: "md" }, h(TimerIcon, { key: '5f758aa92580f589a1315d2e921ac185271fd94a', slot: "icon" }), this.expiry)), showActions && (h("div", { key: 'ca4ab2498dcb3bf0b9ddbc83e6a8a2416dcd9e10', part: "actions", class: "bs-qr-code__actions" }, !this.hideDownload && (h("bs-button", { key: '8dd9eb4372b1af1afbba0bc987885f578c3c6b6d', part: "download", variant: interactive ? 'outlined' : 'primary', size: buttonSize, disabled: !interactive, onClick: () => interactive && this.bsDownload.emit() }, h(DownloadIcon, { key: '53ae611b745f51f4e5ec5e011a94fe00a5be1bed', slot: "icon" }), this.downloadLabel)), !this.hideCopy && (h("bs-button", { key: 'deed453a9bc0a5ed2df2e003b02f14723ef0796a', part: "copy", variant: interactive ? 'outlined' : 'primary', size: buttonSize, disabled: !interactive, onClick: () => interactive && this.onCopy() }, h(CopyIcon, { key: 'b0fdf348b30aec104094578afa392a3cc1c6ddac', slot: "icon" }), this.copyLabel)))))));
+        return (h("bs-card", { key: 'acac137c9373a4e33e03de20577625674aeeec64', part: "container", class: "bs-qr-code", surface: "base" }, this.closable && (h("bs-icon-button", { key: 'da324148b093c87218dcba26ca7ffb16ee0f2790', part: "close", class: "bs-qr-code__close", variant: "subtle", size: "sm", ariaLabel: this.closeLabel, onClick: () => this.bsClose.emit() }, h("svg", { key: '6acba64213477d592b7f234270422a14fbe05b79', viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", "stroke-width": "1.6", "stroke-linecap": "round", "aria-hidden": "true" }, h("path", { key: '8b546585eec6f52bbb2ce845e17f49e1cdbe579c', d: "M5 5L15 15M15 5L5 15" })))), h("div", { key: 'd63f0bffd499637c20177905b931dd7fc62f55c7', class: "bs-qr-code__body" }, h("div", { key: 'bc0ac041e8bd83d5f30491b8d03aa593913665cc', part: "head", class: "bs-qr-code__head" }, h("p", { key: '8c2c150daddf98ef7e32aee7ee7972203185cc1f', part: "title", class: "bs-qr-code__title" }, this.heading), this.description && (h("p", { key: 'c2535fbccf5c9a33fbc416399fa589091da94278', part: "description", class: "bs-qr-code__description" }, this.description))), h("div", { key: '9fa8b02d1dcd4edcf5d937db44a2d0e1d4bbd307', part: "qr", class: "bs-qr-code__qr" }, h("div", { key: '502affeb1af80fc3af626af9b5c179444982b249', part: "code", class: "bs-qr-code__code" }, h("slot", { key: 'a802218022f125612fd61f63854005a2bed3223c', name: "code" }, this.renderMatrix()), h("div", { key: '045351ad97351e49131fbf79996350fd9af6160d', part: "logo", class: { 'bs-qr-code__logo': true, 'bs-qr-code__logo--visible': this.hasLogo } }, h("slot", { key: 'e4b05ef5c4e5df468a0fb3c0ec245a0e4a53a609', name: "logo", onSlotchange: (ev) => (this.hasLogo = ev.target.assignedNodes().length > 0) }))), this.renderOverlay()), this.type === 'payment' && this.amount && (h("div", { key: '6a338d449756d1c6e0c5d59604d614acf3938811', part: "amount", class: "bs-qr-code__amount" }, this.amountLabel && h("p", { key: '60657d505fe402761d84f562f929726f528e792a', class: "bs-qr-code__amount-label" }, this.amountLabel), h("p", { key: 'c757d8d15955b352fc9eced1e4fb116f8e39afc4', class: "bs-qr-code__amount-value" }, this.amount))), this.type === 'default' && this.url && (h("div", { key: '59d77665d6e850cb9bc3c60d2b39e3abd61fa546', part: "url", class: "bs-qr-code__url" }, this.url)), this.expiry && (h("bs-chip-informative", { key: '412542db129e3b1335eb9e754c0b981f496f72f1', part: "expiry", size: "md" }, h(TimerIcon, { key: '0721618163064e70e5b181c8bac7296214b72d86', slot: "icon" }), this.expiry)), showActions && (h("div", { key: 'dfc0aa9a44c623dbee6ffca247b21af2ff791545', part: "actions", class: "bs-qr-code__actions" }, !this.hideDownload && (h("bs-button", { key: 'e7ce8219ff5f35a05c64dcf62995b2b531cd37f2', part: "download", variant: interactive ? 'outlined' : 'primary', size: buttonSize, disabled: !interactive, onClick: () => interactive && this.bsDownload.emit() }, h(DownloadIcon, { key: 'b936f66da8e66bc4ad5cee666d63c16892dcccf6', slot: "icon" }), this.downloadLabel)), !this.hideCopy && (h("bs-button", { key: 'ef1fe130c78f47d774c174978e0f242101b2f6eb', part: "copy", variant: interactive ? 'outlined' : 'primary', size: buttonSize, disabled: !interactive, onClick: () => interactive && this.onCopy() }, h(CopyIcon, { key: 'd4a3e188b650994ff4bd3848ac3baf70ece52646', slot: "icon" }), this.copyLabel)))))));
     }
     static get is() { return "bs-qr-code"; }
     static get encapsulation() { return "shadow"; }

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

@@ -109,7 +109,7 @@ export class BsRadio {
         }
     };
     render() {
-        return (h("label", { key: 'f306e00e27f679e419cfa5f4fa645ce890b5f595', class: `bs-radio ${this.disabled ? 'bs-radio--disabled' : ''}` }, h("input", { key: '8d531aa5fc6616bd2179e63a9ac1f801d8c5a0a0', class: "bs-radio__input", type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, "aria-label": this.ariaLabel, tabIndex: this.checked || !this.groupHasChecked ? 0 : -1, onKeyDown: this.onKeyDown, onChange: this.onChange }), h("span", { key: '4b34023e14a244d775b78a0d3448abf11675df9d', class: "bs-radio__hit-area" }, h("bs-ripple", { key: 'a5e40330de337e361eb20f833a4a8043abe7f57e', part: "ripple", class: "bs-radio__ripple", centered: true, triggerSelector: ".bs-radio", disabled: this.disabled }), h("span", { key: 'b2474d2435bd670c0d314af20c33c86eca87ec70', class: "bs-radio__state-layer" }, h("span", { key: 'fecc8416c4d534cc061f86b10e3bc471719990e6', part: "circle", class: `bs-radio__circle ${this.checked ? 'bs-radio__circle--selected' : ''}` }, this.checked && h("span", { key: '24941aede8c24ed27dff8f033732d779579d08c2', part: "dot", class: "bs-radio__dot" })))), h("span", { key: 'b51c9ac9b90d9cc4498aeeadabf1539409649db3', part: "label", class: "bs-radio__label" }, h("slot", { key: 'aea76fb7e8d2330e1b02858af95e721af60dc4f1' }))));
+        return (h("label", { key: '8fe69faddaab6937235d4b949f51e8f71a5e8f86', class: `bs-radio ${this.disabled ? 'bs-radio--disabled' : ''}` }, h("input", { key: 'da0f6c12e2e9900d0679afb22dd9c2b48d9561e3', class: "bs-radio__input", type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, "aria-label": this.ariaLabel, tabIndex: this.checked || !this.groupHasChecked ? 0 : -1, onKeyDown: this.onKeyDown, onChange: this.onChange }), h("span", { key: '365fdee2ea5a087dbf44cbfe5b7e3f1ec74e3cbe', class: "bs-radio__hit-area" }, h("bs-ripple", { key: '3937ed7859d9579555a3bf05494628e1ba240096', part: "ripple", class: "bs-radio__ripple", centered: true, triggerSelector: ".bs-radio", disabled: this.disabled }), h("span", { key: '1180c9932b5489228318f1d46d643ec8c6234c2f', class: "bs-radio__state-layer" }, h("span", { key: 'c0d2d0defc96fb2e875840d14cf2da97d50a5b89', part: "circle", class: `bs-radio__circle ${this.checked ? 'bs-radio__circle--selected' : ''}` }, this.checked && h("span", { key: 'd5f335acf4df51c1e5acb87aed111cea2aeb9987', part: "dot", class: "bs-radio__dot" })))), h("span", { key: '306438ba56a512bda5bf9bebf0ce4188b2461353', part: "label", class: "bs-radio__label" }, h("slot", { key: '00cb4aafde55424c58f72ba4d04b16e757171814' }))));
     }
     static get is() { return "bs-radio"; }
     static get encapsulation() { return "shadow"; }

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

@@ -90,7 +90,7 @@ export class BsRadioGroup {
         const labelId = `${this.id}-label`;
         const descId = `${this.id}-desc`;
         const note = this.error || this.description;
-        return (h("div", { key: 'cfc1e80a169ffcb0bed6172a23ebf764a1f0f424', part: "group", class: { 'bs-radio-group': true, 'bs-radio-group--error': !!this.error }, role: "radiogroup", "aria-labelledby": this.label ? labelId : undefined, "aria-describedby": note ? descId : undefined, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined }, this.label && (h("span", { key: '4cac10e71108811c7138c1e0309d6faacf671e58', id: labelId, part: "label", class: "bs-radio-group__label" }, this.label, this.required && h("span", { key: 'f7f64cf3452d0a52a9823d1cf9db2d89941b27b3', "aria-hidden": "true" }, " *"))), h("div", { key: 'b6123200ba34f2507289996c995022a7cc42f26e', part: "options", class: "bs-radio-group__options" }, h("slot", { key: '482111d3caaec3ff0ec4dfaf7b5e951bd9052552', onSlotchange: this.onSlotchange })), note && (h("span", { key: 'b4c663c6fc2626a92210562ea530c8293638e266', id: descId, part: this.error ? 'error' : 'description', class: this.error ? 'bs-radio-group__error' : 'bs-radio-group__description' }, this.error || this.description))));
+        return (h("div", { key: '47cc53ab00dd36c03e421cbf5eda4c32b91442ec', part: "group", class: { 'bs-radio-group': true, 'bs-radio-group--error': !!this.error }, role: "radiogroup", "aria-labelledby": this.label ? labelId : undefined, "aria-describedby": note ? descId : undefined, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined }, this.label && (h("span", { key: '7d52c46d6fc5929b71df5597e31d1292b1dcac49', id: labelId, part: "label", class: "bs-radio-group__label" }, this.label, this.required && h("span", { key: '7693050336567a5916f9fb6c23879649d8d2df3e', "aria-hidden": "true" }, " *"))), h("div", { key: '11622d25f87f4bd4b9cf13a0f3f099d986f77494', part: "options", class: "bs-radio-group__options" }, h("slot", { key: 'e337931a641588403008e622c558b1512de69f78', onSlotchange: this.onSlotchange })), note && (h("span", { key: 'f446de2184455d4c497a7daf18ef07605c6c64cd', id: descId, part: this.error ? 'error' : 'description', class: this.error ? 'bs-radio-group__error' : 'bs-radio-group__description' }, this.error || this.description))));
     }
     static get is() { return "bs-radio-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-radio-group/bs-radio-group.stories.js

@@ -1,6 +1,8 @@
 import { html } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { componentDescription } from "../../stories-utils";
+import { expect, userEvent, waitFor } from "storybook/test";
+import { ready, inShadow, recordEvents } from "../../play-utils";
 const meta = {
     title: 'Components/bs-radio-group',
     parameters: { docs: { description: { component: componentDescription('bs-radio-group') } } },
@@ -29,7 +31,19 @@ const meta = {
     args: { label: 'Billing period', description: '', error: '', orientation: 'vertical', required: false, value: 'monthly' },
 };
 export default meta;
-export const Default = {};
+export const Default = {
+    play: async ({ canvasElement }) => {
+        const group = await ready(canvasElement, 'bs-radio-group');
+        const changes = recordEvents(group, 'bsChange');
+        const radio = async (value) => inShadow(await ready(canvasElement, `bs-radio[value="${value}"]`), 'input');
+        await expect(await radio('monthly')).toBeChecked();
+        await userEvent.click(await radio('yearly'));
+        await waitFor(() => expect(group.value).toBe('yearly'));
+        await expect(await radio('yearly')).toBeChecked();
+        await waitFor(async () => expect(await radio('monthly')).not.toBeChecked());
+        await expect(changes.map(e => e.detail)).toEqual(['yearly']);
+    },
+};
 export const Horizontal = { args: { orientation: 'horizontal' } };
 export const WithHelperText = { name: 'With helper text', args: { description: 'You can change this later.', required: true } };
 export const WithError = { name: 'With error', args: { value: '', required: true, error: 'Choose a billing period.' } };

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

@@ -101,7 +101,7 @@ export class BsRipple {
         return 0;
     }
     render() {
-        return (h(Host, { key: 'f1046b962acdf37311a3c1af1e0dcbdc112008fa', "aria-hidden": "true" }, h("div", { key: '444cd2910477b66aa0f5183050621a83101f0f66', part: "surface", class: "bs-ripple", ref: el => (this.surface = el) })));
+        return (h(Host, { key: 'b8368df07d335750d51c9e885100c9f51f1cc568', "aria-hidden": "true" }, h("div", { key: '47af802e56c92f1d2496a4f925f074aa287d785f', part: "surface", class: "bs-ripple", ref: el => (this.surface = el) })));
     }
     static get is() { return "bs-ripple"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-search-item/bs-search-item.js

@@ -69,7 +69,7 @@ export class BsSearchItem {
     slotFilled = (set) => (ev) => set(ev.target.assignedNodes().length > 0);
     render() {
         const role = this.selectionRole ?? undefined;
-        return (h("div", { key: '4e893a0005ebd09facffe756cf47d393cbb19a2a', part: "container", class: "bs-search-item", role: role, "aria-selected": role ? String(this.active) : undefined, "aria-disabled": this.disabled ? 'true' : undefined }, !this.disabled && h("bs-ripple", { key: 'ed44f2b37d8c7fa740c69a5a734b2a1bb4b34ebc', part: "ripple" }), h("span", { key: 'c013610e802e299f8f3ac8307061e01155e9d35f', part: "icon", class: { 'bs-search-item__icon': true, 'bs-search-item__icon--hidden': !this.hasIcon } }, h("slot", { key: '79bbb9cf256885b7540485d68cf1f4492a336393', name: "icon", onSlotchange: this.slotFilled(v => (this.hasIcon = v)) })), h("span", { key: '5dc3f4f00182d13f3a79828170a9573d65f3f6ff', part: "content", class: "bs-search-item__content" }, h("span", { key: '3aefdebe10cedee45b2ba83feb3ef6dddaaead8e', part: "label", class: "bs-search-item__label" }, h("slot", { key: '150ad4ff3e29288b63ebdae2d456ed0f182b09be' })), h("span", { key: 'dc2ff7caa2f9d8313d810efb1d7ff4d7751036cc', part: "description", class: { 'bs-search-item__description': true, 'bs-search-item__description--hidden': !this.hasDescription } }, h("slot", { key: 'bb7a747ce8b5a8c4c48313361fa43c009755aba9', name: "description", onSlotchange: this.slotFilled(v => (this.hasDescription = v)) }))), h("span", { key: '38c442550fcdeebf667a70af3105775a9b02d57e', part: "trailing", class: { 'bs-search-item__trailing': true, 'bs-search-item__trailing--hidden': !this.hasTrailingSlot && !this.trailing } }, h("slot", { key: 'a66b8babf306a4fb1e0aacf45caf642e843a270b', name: "trailing", onSlotchange: this.slotFilled(v => (this.hasTrailingSlot = v)) }, this.trailing))));
+        return (h("div", { key: '6c0faf1a5d945dbdfcaf6ff5e23a6029efb0ab62', part: "container", class: "bs-search-item", role: role, "aria-selected": role ? String(this.active) : undefined, "aria-disabled": this.disabled ? 'true' : undefined }, !this.disabled && h("bs-ripple", { key: 'ae363a22e2d4d40045b2afc739f41c5e5eabf508', part: "ripple" }), h("span", { key: 'f8d861cffe529ab1b119bbc59f71042b0cee3820', part: "icon", class: { 'bs-search-item__icon': true, 'bs-search-item__icon--hidden': !this.hasIcon } }, h("slot", { key: 'fe1e31814f84747c1ebf148211d3c703cac74c35', name: "icon", onSlotchange: this.slotFilled(v => (this.hasIcon = v)) })), h("span", { key: '872182c11ea6fb19b80b2630a5898acb00bfe53c', part: "content", class: "bs-search-item__content" }, h("span", { key: '3fe5621200fbff4021b677b740b189f181aa9b68', part: "label", class: "bs-search-item__label" }, h("slot", { key: '3c996c15654a841c63897c551c7f8d7d00946390' })), h("span", { key: '17a925fc22786a02cfce8573060df2690680374a', part: "description", class: { 'bs-search-item__description': true, 'bs-search-item__description--hidden': !this.hasDescription } }, h("slot", { key: '134aa77acfa05875bb0cc551bcad3e746c0e27d2', name: "description", onSlotchange: this.slotFilled(v => (this.hasDescription = v)) }))), h("span", { key: 'cd18deec1f4cdd5420d96a2a4dcb82ec5d846bc1', part: "trailing", class: { 'bs-search-item__trailing': true, 'bs-search-item__trailing--hidden': !this.hasTrailingSlot && !this.trailing } }, h("slot", { key: '869bf9df401f4958a368f1c9a3e8a93bc1c20e61', name: "trailing", onSlotchange: this.slotFilled(v => (this.hasTrailingSlot = v)) }, this.trailing))));
     }
     static get is() { return "bs-search-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -221,7 +221,7 @@ export class BsSelect {
         const fieldClasses = ['bs-select__field', this.error ? 'bs-select__field--error' : '', this.disabled ? 'bs-select__field--disabled' : '', this.open ? 'bs-select__field--open' : '']
             .filter(Boolean)
             .join(' ');
-        return (h("div", { key: 'ebde3002856a4effa89249b70a5a51bcaa107367', class: `bs-select ${this.error ? 'bs-select--error' : ''}` }, this.label && (h("span", { key: 'b0b80484156f29d560901f64786988e0d0071bf7', part: "label", id: labelId, class: "bs-select__label", onClick: () => !this.disabled && this.fieldEl?.focus() }, this.label, this.required && (h("span", { key: 'a43acdc97df00ad5ac1b2d74903ed7e8616ce32f', class: "bs-select__required", "aria-hidden": "true" }, "*")))), h("div", { key: '84eb4775e064d56644395555e5488a22d718e9bb', class: "bs-select__wrapper" }, h("div", { key: '5d81b1ce333fa45eda0e46f30a11f8bff21fee64', part: "field", class: fieldClasses, ref: el => (this.fieldEl = el), role: "combobox", tabindex: this.disabled ? -1 : 0, "aria-haspopup": "listbox", "aria-expanded": String(this.open), "aria-controls": listId, "aria-labelledby": this.label ? labelId : undefined, "aria-label": this.label ? undefined : this.ariaLabel, "aria-activedescendant": this.open && this.activeIndex >= 0 ? optId(this.activeIndex) : undefined, "aria-describedby": this.error || this.description ? msgId : undefined, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.onFieldClick, onKeyDown: this.onKeyDown, onBlur: this.onBlur }, h("span", { key: '08340b9d62f1633753a6858b24a38ef49ba3d382', part: "value", class: `bs-select__value ${selected ? '' : 'bs-select__value--placeholder'}` }, selected ? selected.label : this.placeholder), h("svg", { key: 'df5e92b3555c508617c899ea8b597d980af3295f', part: "icon", class: "bs-select__chevron", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: '991d65667ae91e25cb39a12a8066bb81288b84e5', d: "M4 6L8 10L12 6", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("ul", { key: '42256fc2bff2d31bde0347192ded1fdf56be043f', part: "listbox", id: listId, class: "bs-select__listbox", role: "listbox", "aria-labelledby": this.label ? labelId : undefined, "aria-label": this.label ? undefined : this.ariaLabel, hidden: !this.open, ref: el => (this.listEl = el), onMouseDown: (ev) => ev.preventDefault() }, this.options.map((o, i) => (h("li", { part: "option", id: optId(i), key: o.value, role: "option", "aria-selected": String(o.value === this.value), "aria-disabled": o.disabled ? 'true' : undefined, class: ['bs-select__option', i === this.activeIndex ? 'bs-select__option--active' : '', o.disabled ? 'bs-select__option--disabled' : '', o.value === this.value ? 'bs-select__option--selected' : '']
+        return (h("div", { key: '4aed1f57bb8649ab29946658e9b2248377e32306', class: `bs-select ${this.error ? 'bs-select--error' : ''}` }, this.label && (h("span", { key: '91955ebde96948c58c1fbd1c9293b006bbcad591', part: "label", id: labelId, class: "bs-select__label", onClick: () => !this.disabled && this.fieldEl?.focus() }, this.label, this.required && (h("span", { key: 'd5beb71e22df9e41f07c54dc305240dce7f9c44e', class: "bs-select__required", "aria-hidden": "true" }, "*")))), h("div", { key: '12154c69cb340dbb5920a89ef844fb61e1e71c5f', class: "bs-select__wrapper" }, h("div", { key: '6725f28ae24c0c1297ce51651d097d516cc50f30', part: "field", class: fieldClasses, ref: el => (this.fieldEl = el), role: "combobox", tabindex: this.disabled ? -1 : 0, "aria-haspopup": "listbox", "aria-expanded": String(this.open), "aria-controls": listId, "aria-labelledby": this.label ? labelId : undefined, "aria-label": this.label ? undefined : this.ariaLabel, "aria-activedescendant": this.open && this.activeIndex >= 0 ? optId(this.activeIndex) : undefined, "aria-describedby": this.error || this.description ? msgId : undefined, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.onFieldClick, onKeyDown: this.onKeyDown, onBlur: this.onBlur }, h("span", { key: '7640eea18ff247d361e5181dda85bb7631d6beb3', part: "value", class: `bs-select__value ${selected ? '' : 'bs-select__value--placeholder'}` }, selected ? selected.label : this.placeholder), h("svg", { key: '4ecf0f4eef95f9050d8c0bda3a7f3a2845fad1d8', part: "icon", class: "bs-select__chevron", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: '874cf7736a8f0aff3e26935bdafdba41ac4c1e19', d: "M4 6L8 10L12 6", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("ul", { key: 'c3166fb6b4716ab49f98a88be697bdb6a09cd2ed', part: "listbox", id: listId, class: "bs-select__listbox", role: "listbox", "aria-labelledby": this.label ? labelId : undefined, "aria-label": this.label ? undefined : this.ariaLabel, hidden: !this.open, ref: el => (this.listEl = el), onMouseDown: (ev) => ev.preventDefault() }, this.options.map((o, i) => (h("li", { part: "option", id: optId(i), key: o.value, role: "option", "aria-selected": String(o.value === this.value), "aria-disabled": o.disabled ? 'true' : undefined, class: ['bs-select__option', i === this.activeIndex ? 'bs-select__option--active' : '', o.disabled ? 'bs-select__option--disabled' : '', o.value === this.value ? 'bs-select__option--selected' : '']
                 .filter(Boolean)
                 .join(' '), onClick: () => this.commit(i), onMouseMove: () => !o.disabled && this.activeIndex !== i && (this.activeIndex = i) }, h("span", { class: "bs-select__option-label" }, o.label), o.value === this.value && (h("svg", { class: "bs-select__check", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { d: "M3.5 8.5L6.5 11.5L12.5 4.5", stroke: "currentColor", "stroke-width": "1.75", "stroke-linecap": "round", "stroke-linejoin": "round" })))))))), this.error ? (h("span", { id: msgId, part: "error", class: "bs-select__error" }, this.error)) : this.description ? (h("span", { id: msgId, part: "description", class: "bs-select__description" }, this.description)) : null));
     }

package/dist/collection/components/bs-select/bs-select.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 fruit = [
     { label: 'Apple', value: 'apple' },
     { label: 'Banana', value: 'banana' },
@@ -36,7 +38,25 @@ const meta = {
     args: { label: 'Fruit', placeholder: 'Select a fruit', description: '', error: '', disabled: false, required: false, value: '' },
 };
 export default meta;
-export const Default = {};
+export const Default = {
+    play: async ({ canvasElement }) => {
+        const host = await ready(canvasElement, 'bs-select');
+        const changes = recordEvents(host, 'bsChange');
+        const field = inShadow(host, '[part="field"]');
+        const option = (i) => host.shadowRoot.querySelectorAll('[part="option"]')[i];
+        await expect(field).toHaveAttribute('aria-expanded', 'false');
+        await userEvent.click(field);
+        await waitFor(() => expect(field).toHaveAttribute('aria-expanded', 'true'));
+        // "Blueberry (sold out)" is disabled: clicking it must not select it.
+        await userEvent.click(option(2));
+        await expect(host.value).toBe('');
+        await expect(changes).toHaveLength(0);
+        await userEvent.click(option(1));
+        await waitFor(() => expect(host.value).toBe('banana'));
+        await expect(changes.map(e => e.detail)).toEqual(['banana']);
+        await waitFor(() => expect(field).toHaveAttribute('aria-expanded', 'false'));
+    },
+};
 export const WithHelperText = {
     name: 'With helper text',
     args: { description: 'Pick the fruit you want in the box.' },

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: '69492b1be5aba242ffdeacd2181a9b4007c97300', part: "container", class: "bs-session-timeout", surface: "base", role: "region", "aria-labelledby": "heading" }, h("div", { key: 'a7ad5d3d7e58f159efb282ffe0dbfd0a7c2ad120', class: "bs-session-timeout__body" }, !this.hideIcon && (h("bs-icon-tile", { key: '2a813414653c152354dea524d3a605c5945dee84', part: "art", intent: d.intent, size: "lg" }, h("slot", { key: '45b0ff33e36f2d13f9544981eefe9d54f5fff640', name: "icon" }, d.glyph()))), this.renderHeading(heading, description), this.type === 'warning' && this.renderWarning(), this.type === 'warning' && this.savedMessage && (h("p", { key: '1a08b4612f6e4d152445b15f1ace42d039ce2716', part: "saved", class: "bs-session-timeout__saved" }, h(InfoIcon, { key: 'e84a18ce87b52f5bd1a6b8faf233883f005d512b' }), h("span", { key: 'cac0e19552062075cac38780f30f7ccea88dd9b8' }, this.savedMessage))), this.type === 'signed-out' && this.renderAccount(), this.type === 'confirm-identity' && this.renderConfirm(), this.type === 'warning' && (primary || secondary) && (h("div", { key: '927ce76f8956112938619fff025cdb80add48cb7', part: "actions", class: "bs-session-timeout__actions" }, secondary && (h("bs-button", { key: 'a607a2defd1ca2bfaf82dad2c493867bac123be4', part: "secondary", variant: "outlined", onClick: () => this.bsSecondary.emit() }, secondary)), primary && (h("bs-button", { key: '88357d0a2238ea9cbdf5cd03db3cc2f28cdcb322', part: "primary", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)))), this.type === 'signed-out' && (primary || secondary) && (h("div", { key: '4e7dc325d82fd193386ee1fe13afaef9308ceb2f', part: "actions", class: "bs-session-timeout__actions bs-session-timeout__actions--stacked" }, primary && (h("bs-button", { key: '8739ade10f09e0503a4d1d6dfc284cf23ae43e5d', part: "primary", class: "bs-session-timeout__block-button", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)), secondary && (h("bs-button", { key: '0b1304b18ee010519fbb5e911c52ac64379ecbcc', part: "secondary", class: "bs-session-timeout__text-button", variant: "subtle", size: "lg", onClick: () => this.bsSecondary.emit() }, secondary)))), h("div", { key: '973d818d379dbcf34216fd8b5e6bcb1a5cfec5e5', 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: 'd3956a19e61cf2de661506b116c160b5a968c139', part: "container", class: "bs-shortcut-row", role: this.selectionRole ?? undefined, "aria-disabled": this.disabled ? 'true' : undefined }, h("span", { key: '4f1358b1536d313397b8dc9697d13bdaca77971f', part: "action", class: "bs-shortcut-row__action" }, h("slot", { key: 'd45777d253c65e03a9705dfe8b2f709e0b864918' }, this.action)), h("span", { key: '19f1f4f506b06ef59a8b0d0e65d56d4262cccdef', part: "keys", class: "bs-shortcut-row__keys" }, h("slot", { key: 'c5e1e282de5dad7dfebb242493de0fc5dc4213fe', name: "keys" }, h("bs-key-caps", { key: 'fc8618b576cba9973305e56704ad5ee31131d353', 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: '36599506573efe1672d5d9be3c6df23f8e8dd10c', 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: '62bea478a5a3568d18116406133c737eda387796', part: "link", class: "bs-skip-link", href: this.href, onClick: this.onClick }, h("slot", { key: 'ff567267fb5b12c630ece1064af6d0fc1175c44a' }, "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: '84aea3221c41e19ffa310a2d17c0385ea11041df', class: rootClasses, "aria-disabled": this.disabled ? 'true' : undefined }, this.showLabel && (h("div", { key: 'f26d63ea2bbd9e47b7c30c9ee03cdeff6f7280b8', class: "bs-slider__header" }, h("span", { key: 'df0996ae3e6a3548f7b6da584179f118b4eb4da9', 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: '6f96cd1cde58d5c6988b7271fc5d6fdfa133b29a', class: "bs-slider__row" }, this.showLabel && (h("span", { key: '34204ca12f519b9be931cf54a96f3da8756d5430', part: "bound", class: "bs-slider__bound" }, this.min)), isRange ? this.renderRangeThumbs() : this.renderSingleThumb(), this.showLabel && (h("span", { key: 'ff16e9ed98447d8211a5a5d22749ec801cabebd4', 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: '853522bb5eb39a46e30e5ac18fe16ee55755afff', part: "container", class: `bs-snackbar bs-snackbar--${this.variant}`, role: "status", "aria-live": this.variant === 'error' ? 'assertive' : 'polite' }, h("div", { key: '73b6b2cc350a90f32aa143aab3be2b85ba73eeae', class: "bs-snackbar__content" }, h("span", { key: 'f3880db1b2b6eca4661ee5bb3e0c96d1e6da8e6f', part: "icon", class: "bs-snackbar__icon", "aria-hidden": "true" }, this.loading ? h("span", { class: "bs-snackbar__spinner" }) : h(CheckCircleIcon, null)), h("span", { key: 'a56e5d22939edede5949bcf1340d59065fc694b0', part: "message", class: "bs-snackbar__message" }, h("slot", { key: '46357548d5af22e4f72d20a99ba566067c3c1fa0' }))), h("div", { key: '1e2a66b55bd06dc152956004430159a0c2370939', class: "bs-snackbar__actions" }, this.actionLabel && (h("bs-button", { key: '563ead50e48142407812caf3727b4bf290e02b86', part: "action", variant: this.actionVariant ?? ACTION_VARIANT[this.variant], size: "sm", onClick: this.onAction }, this.actionLabel)), !this.hideClose && (h("bs-icon-button", { key: '84506a32eef3551b4fc560d899913e792cdfeba0', part: "close", variant: "subtle", size: "md", ariaLabel: "Dismiss", onClick: this.onDismiss }, h(CloseIcon, { key: '55d3e926776e980e18bf77c08e2912f2424afd41' }))))));
+        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: '2a875265b65f749466162d903f923e1433c7d397', part: "ripple" }),
-            h("span", { key: '62e74329531e0917670e0d480603692f422c7acc', class: "bs-source-link__left" }, h("span", { key: 'e639ffac289dbc1aed0aa6a2caecb16d326aa11a', class: "bs-source-link__filename-row" }, h("span", { key: 'fe01cfd760152e6bf81fb40d7ec4d77dbbef6ee4', part: "icon", class: "bs-source-link__icon" }, h("slot", { key: '358a3c7acc24b9c4d40bd60d6c076e8047f80023', name: "icon" }, h(FileTextIcon, { key: 'e15554ec81c33fa58dd4d06dbac35f322f890c2b' }))), h("p", { key: '0f90eff6d1999a7512a510d1c07817bc1682f85c', part: "filename", class: "bs-source-link__filename" }, this.fileName)), h("span", { key: 'f510d7ae0610604f09c01fe9e05c7973d5152283', class: "bs-source-link__meta" }, this.sourceName && (h("span", { key: 'de22c00cf119569ed2ed6f7eb483813431214237', part: "source", class: "bs-source-link__source" }, this.sourceName)), this.sourceName && this.version && h("span", { key: '3f8262d1d3b9e8403b58d244fb25e12db353599c', class: "bs-source-link__dot", "aria-hidden": "true" }), this.version && (h("span", { key: '02ab1216020d9cd0de5f02b2b50d1d1c2cf18cb8', part: "version", class: "bs-source-link__version" }, this.version)))),
-            h("span", { key: 'eea76db4a9167aa545ef296f82819c04b6f1a21b', part: "arrow", class: "bs-source-link__arrow", "aria-hidden": "true" }, h(ArrowUpRightIcon, { key: 'f9b21efca8e16963e110bf5f35034582fe616034' })),
+            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: 'c715fcc72eda399bdefbbcb5684426e52c695b44', 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: '02a8585935575b9be103e12e6232dac63a41f5fa', part: "svg", class: "bs-spinner__svg", viewBox: "0 0 24 24", fill: "none", focusable: "false" }, h("circle", { key: 'ddae2f0d9d74dd48c971ad9ee3973819bbafa5fe', class: "bs-spinner__track", cx: "12", cy: "12", r: "9", "stroke-width": "3" }), h("path", { key: 'f261cb4b4726c7e0ef937cb34cdf03b8ec3bc609', 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: '57afdf0fbed93930a76aae2dab8faddacbc8e6e7', 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: '4761db31dd50f134e1d8b35775a69ff9a177bcfa', style: { '--bs-stack-gap-token': `var(--bs-spacing-${gap})` } }, h("slot", { key: '5714b01e0b05429fae91067b05143b677db998e8', 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: '6230f6e7164d99fb94e79a37d6301d514bf1c75c', part: "container", class: "bs-stat", surface: this.surface }, h("dl", { key: 'dc1688f2e20f4133c516e7f57ffc5d7b8a4de477', class: "bs-stat__body" }, h("dt", { key: '4772333b022fd6b95655209f7a7775eab653c6e0', class: "bs-stat__head" }, h("span", { key: '7aef50daa2c87b811b1e242753e081416df25b0d', class: { 'bs-stat__icon': true, 'bs-stat__icon--visible': this.hasIcon } }, h("slot", { key: '2ad02c5fffb58d31a4cf4ffb57fd58257fab0280', name: "icon", onSlotchange: (e) => (this.hasIcon = e.target.assignedNodes().length > 0) })), h("span", { key: 'b6b2d089a0b03da7aaad4447dd4291bf916964d3', part: "label", class: "bs-stat__label" }, this.label)), h("dd", { key: '2ccfdbcc3000d8448b2bac965efc23c14fdab5a4', class: "bs-stat__figure" }, h("span", { key: '6f6afb174d960a414fc3f95f862f70d3cd17105a', part: "value", class: "bs-stat__value" }, this.value), this.trend && (h("span", { key: '6887872c440d88f5269f39d65492c54589133d7d', part: "trend", class: `bs-stat__trend bs-stat__trend--${this.intent}` }, this.arrow(), h("span", { key: '0efad11fe74ac272c4f6d8f84cbf77fb45bf44f3', class: "bs-stat__sr" }, this.trendPrefix), this.trendValue && h("span", { key: 'de6eb28c4f20210ad7f9f9f4b2bbc02c5db1af78', class: "bs-stat__trend-value" }, this.trendValue)))), h("dd", { key: 'afc35315402059068afd3caf5bff330e73ab099d', class: { 'bs-stat__extra': true, 'bs-stat__extra--visible': this.hasExtra } }, h("slot", { key: '18280f7d6d2866b76307a1a651c2a21e55fd4c75', 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: '247099bad82070cc039de6602c9556df019d66e0', role: "list" }, h("slot", { key: '9243fd55edfbce9ee460f38580951e951eb2e48e', 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: 'e4cedd89e79fe57ae5dee2bce70502dcf245eded', role: "listitem", class: `bs-stepper-step--${this.direction}`, "aria-disabled": state === 'disabled' ? 'true' : undefined }, h("div", { key: '9505c6283fd3058f1acaf733e8c393a8e38f5a87', class: "bs-stepper-step__top" }, h("span", { key: '01d9efbed7ea81d3d24da21c3676d619925a4c5f', part: "icon", class: `bs-stepper-step__icon bs-stepper-step__icon--${state}` }, state === 'current' && h("span", { key: '643ecb7b48f6dc08107e1d1a63a6abb4f9b9256b', class: "bs-stepper-step__icon-dot" }), state === 'done' && h(CheckIcon, { key: 'a51c760d0ad168574ab87969b1f5838106f4a474' }), state === 'error' && h(ExclamationIcon, { key: 'd3d7c06a38e04440a4cbe6ffc6f8b039e331f835' })), h("span", { key: '905c43488affd27c328457f9158f61e6aa89d219', part: "connector", class: "bs-stepper-step__connector", "aria-hidden": "true" }, h("span", { key: '734591eb91413fd6fcf7f9a0c9454544ed953ab4', class: "bs-stepper-step__connector-line" }))), h("span", { key: '89d06195df7aba3b00883a4a104f59a0585a99af', part: "label", class: `bs-stepper-step__label bs-stepper-step__label--${state}` }, h("span", { key: '5ec9219bddf35ff96578262a07e163993a0a7a50', part: "name", class: "bs-stepper-step__name" }, this.name), this.showDescription && this.description && (h("span", { key: '72d1542b56bd129d89b29c2e81b03ec4778eaf02', 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: '30e18dccef0481bd8859ecf0771246719508c622', class: `bs-switch ${this.disabled ? 'bs-switch--disabled' : ''}` }, h("input", { key: 'bc94d02e313578cef43fe39b3a490f3f8cecbeec', 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: 'b7a6bf92d5fe4ca044c0ad790a57a4c3ef52d0be', part: "track", class: trackClasses }, h("span", { key: '8fd97319f4eccd6ae4ab24253dcc72ddb4eb7378', part: "knob", class: knobClasses }, h("bs-ripple", { key: '6e574549b8d85273d36d6526216dba51a04b86bf', part: "ripple", class: "bs-switch__ripple", centered: true, triggerSelector: ".bs-switch", disabled: this.disabled }))), h("span", { key: '092ca9f47fb1be8af3aff85d3d8a8e0d17f8d49d', part: "label", class: "bs-switch__label" }, h("slot", { key: '5356de3f833020a83a1aef15cb049a14ebee939c' }))));
+        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"; }