@brandsync/wc 1.21.0 → 1.22.1

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

@@ -4,7 +4,7 @@ const types = ['determinate', 'indeterminate'];
 const sizes = ['small', 'medium', 'large'];
 const strokeWidths = [4, 8];
 const meta = {
-    title: 'Components/bs-progress/Circular',
+    title: 'Components/Feedback/bs-progress/Circular',
     parameters: { docs: { description: { component: componentDescription('bs-progress') } } },
     render: args => html `
     <bs-progress
@@ -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: 'c634db43c248992f4809435d3a5e19c281807295', part: "container", class: "bs-progress-linear" }, h("div", { key: 'c05e032e3b4b2a3dbdeaae0888adbb4bce0bc4e7', 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: '91813ef512bc6df2f084d50c0dfed03b3e13a771', part: "label", class: "bs-progress-linear__label" }, h("slot", { key: '5694cce314712f9f533a7f66696bfe22fb9204bc' })))));
     }
     // 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

@@ -3,10 +3,10 @@ import { componentDescription, propDescription } from "../../stories-utils";
 const types = ['determinate', 'indeterminate'];
 const sizes = ['small', 'large'];
 const meta = {
-    title: 'Components/bs-progress/Linear',
+    title: 'Components/Feedback/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: '25ff80443efeb211e1f15111f4c90620193d8525', part: "container", class: "bs-qr-code", surface: "base" }, this.closable && (h("bs-icon-button", { key: '5d301b4133befcee86633b227e2b55c647acff17', part: "close", class: "bs-qr-code__close", variant: "subtle", size: "sm", ariaLabel: this.closeLabel, onClick: () => this.bsClose.emit() }, h("svg", { key: '866e3f1ed51f5a63cfe5e6185f2cca3b2b18520f', viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", "stroke-width": "1.6", "stroke-linecap": "round", "aria-hidden": "true" }, h("path", { key: 'ba99d91cddcec6b0c1386356f8fe87af347ec9c0', d: "M5 5L15 15M15 5L5 15" })))), h("div", { key: '1e9fe4df8e53de6a7ccefeb29cb441df2789875d', class: "bs-qr-code__body" }, h("div", { key: 'd7315c33e8f7289ca11090808f48f76bbe660992', part: "head", class: "bs-qr-code__head" }, h("p", { key: '7865518117c16bdc748e3de73d207753d8dcdfd0', part: "title", class: "bs-qr-code__title" }, this.heading), this.description && (h("p", { key: '7e78b1c4bc630e33aa8afa5764440235fa945421', part: "description", class: "bs-qr-code__description" }, this.description))), h("div", { key: 'b4b188f471084f899d67b1df3eab48488255e390', part: "qr", class: "bs-qr-code__qr" }, h("div", { key: '1967ba294b369102b1746b1e607aa539b90e88d5', part: "code", class: "bs-qr-code__code" }, h("slot", { key: '80ce9b584d05d28ed79064fbc86bf63186583373', name: "code" }, this.renderMatrix()), h("div", { key: 'd80f9ace4a450a2f8e9f40570a296bad069c4779', part: "logo", class: { 'bs-qr-code__logo': true, 'bs-qr-code__logo--visible': this.hasLogo } }, h("slot", { key: '68f7e3562c8407525e3943d47523f21a4866e451', name: "logo", onSlotchange: (ev) => (this.hasLogo = ev.target.assignedNodes().length > 0) }))), this.renderOverlay()), this.type === 'payment' && this.amount && (h("div", { key: 'a2f6397fadff014cb0d675b89b7dcc0e0f218630', part: "amount", class: "bs-qr-code__amount" }, this.amountLabel && h("p", { key: '69f1054729a2e1315b8a2c8c480bb301c6806fa0', class: "bs-qr-code__amount-label" }, this.amountLabel), h("p", { key: 'a2cc025a819c542c8a8eb5c1cf8573d7fb12741a', class: "bs-qr-code__amount-value" }, this.amount))), this.type === 'default' && this.url && (h("div", { key: '1d3a758cfe7589b556ede6c25d524bce76afaee2', part: "url", class: "bs-qr-code__url" }, this.url)), this.expiry && (h("bs-chip-informative", { key: 'a89157d8e431c053475abdfe5f0bba608f5a2d11', part: "expiry", size: "md" }, h(TimerIcon, { key: '20436f09c87a649827d5139308b3c5fd8f6abe7a', slot: "icon" }), this.expiry)), showActions && (h("div", { key: 'cdf415171b0fb7e470dd54325954a91b937d4f8f', part: "actions", class: "bs-qr-code__actions" }, !this.hideDownload && (h("bs-button", { key: '7de589ac46bc6cc7108e1f176265adad7fd16873', part: "download", variant: interactive ? 'outlined' : 'primary', size: buttonSize, disabled: !interactive, onClick: () => interactive && this.bsDownload.emit() }, h(DownloadIcon, { key: '8584c8f0f176f0c20eaffea7c9a8d3e968725028', slot: "icon" }), this.downloadLabel)), !this.hideCopy && (h("bs-button", { key: '99aad46fc21d1ed92c9e191a438d66364af1a045', part: "copy", variant: interactive ? 'outlined' : 'primary', size: buttonSize, disabled: !interactive, onClick: () => interactive && this.onCopy() }, h(CopyIcon, { key: '1dd10b9a2782841b63a6fa341ce03abe5404f7c2', slot: "icon" }), this.copyLabel)))))));
     }
     static get is() { return "bs-qr-code"; }
     static get encapsulation() { return "shadow"; }

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

@@ -22,7 +22,7 @@ const demoMatrix = (() => {
     return m;
 })();
 const meta = {
-    title: 'Components/bs-qr-code',
+    title: 'Components/Data display/bs-qr-code',
     parameters: { docs: { description: { component: componentDescription('bs-qr-code') } } },
     render: args => html `
     <bs-qr-code

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: '26f8fa0470b6aa5249b1c2a21b7d55dcca76b768', class: `bs-radio ${this.disabled ? 'bs-radio--disabled' : ''}` }, h("input", { key: '4dbaa0ef0d060353aa2bf134a99f5d6212bfbd69', 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: 'e74c82652f45ab560dba4767aea0070fa073e486', class: "bs-radio__hit-area" }, h("bs-ripple", { key: 'fa2c19c2caa5ffdf892c51c893570570e2ef18af', part: "ripple", class: "bs-radio__ripple", centered: true, triggerSelector: ".bs-radio", disabled: this.disabled }), h("span", { key: '7f50a239ccaebebaaaa0cb83117a2b4798d028e6', class: "bs-radio__state-layer" }, h("span", { key: 'baaf9f515aaa3777dcd85bb3b8c180ed9f141e2b', part: "circle", class: `bs-radio__circle ${this.checked ? 'bs-radio__circle--selected' : ''}` }, this.checked && h("span", { key: '225f8a13423e9e5b8cc6cd13cb56d85aa5051ad9', part: "dot", class: "bs-radio__dot" })))), h("span", { key: '7959a89f2fa7171ce9c7e2f2eddad726d571676c', part: "label", class: "bs-radio__label" }, h("slot", { key: '5bf56794007d36f05a34d2ee80aa5c316bb351fd' }))));
     }
     static get is() { return "bs-radio"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { html } from "lit";
 import { componentDescription, propDescription } from "../../stories-utils";
 const meta = {
-    title: 'Components/bs-radio',
+    title: 'Components/Forms/bs-radio',
     parameters: { docs: { description: { component: componentDescription('bs-radio') } } },
     render: args => html `
     <bs-radio name=${args.name} value=${args.value} ?checked=${args.checked} ?disabled=${args.disabled}>

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: 'e39810129ecc8a71fd4d2ccd96041f0a516f9203', 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: '57509af8324282bc4612b79f25992fa62984e570', id: labelId, part: "label", class: "bs-radio-group__label" }, this.label, this.required && h("span", { key: '716bbae9380c3ba1466425988de7340b5e0734d0', "aria-hidden": "true" }, " *"))), h("div", { key: 'e9acf3108014adaced72941e1e0de1a15929f21f', part: "options", class: "bs-radio-group__options" }, h("slot", { key: '7c47355f54c43a863061821cb02deefe1126e714', onSlotchange: this.onSlotchange })), note && (h("span", { key: 'd5b655a580a950045010069f4bfcdbf28c106251', 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,8 +1,10 @@
 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',
+    title: 'Components/Forms/bs-radio-group',
     parameters: { docs: { description: { component: componentDescription('bs-radio-group') } } },
     render: args => html `
     <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: '02e395f630185de0fec1b5c8cd1f151a81e22391', "aria-hidden": "true" }, h("div", { key: '042b7c603c11dbc25f8002f496ecfda5ed958744', 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: '8bd4f3ebead19d51a61dd1e9a4cd812b3dbf3f16', 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: 'f60c181c97f9167cce6650002dc10e5d2fb3a4be', part: "ripple" }), h("span", { key: 'a1178eed50f0d398d71446ed60d2bf8790c6eb45', part: "icon", class: { 'bs-search-item__icon': true, 'bs-search-item__icon--hidden': !this.hasIcon } }, h("slot", { key: '59a5f005d9681ac28ef9730ab6d58ba63df56393', name: "icon", onSlotchange: this.slotFilled(v => (this.hasIcon = v)) })), h("span", { key: '76ca2825dc981896ecdfce8feed5ab7b014f7ae0', part: "content", class: "bs-search-item__content" }, h("span", { key: '0096d93b998b9e76930423f6599d8495e847244a', part: "label", class: "bs-search-item__label" }, h("slot", { key: 'c9dd0aa924790611302b1275793c3f2c3f5827f2' })), h("span", { key: '2a746683a251781d7b4d53c4778640c4f6814088', part: "description", class: { 'bs-search-item__description': true, 'bs-search-item__description--hidden': !this.hasDescription } }, h("slot", { key: 'c144563477a5217d3e458aa59987b27236f4be40', name: "description", onSlotchange: this.slotFilled(v => (this.hasDescription = v)) }))), h("span", { key: '4925a26b5976ae6b0a885b6cb8ebfe41ca58be55', part: "trailing", class: { 'bs-search-item__trailing': true, 'bs-search-item__trailing--hidden': !this.hasTrailingSlot && !this.trailing } }, h("slot", { key: 'd215f00d94710993a6293c9db5797ad4616b326d', 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-search-item/bs-search-item.stories.js

@@ -2,7 +2,7 @@ import { html } from "lit";
 import { componentDescription } from "../../stories-utils";
 const USER_ICON = html `<svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="8" r="4" /><path d="M4 21a8 8 0 0 1 16 0" /></svg>`;
 const meta = {
-    title: 'Components/bs-search-item',
+    title: 'Components/Navigation/bs-search-item',
     parameters: { docs: { description: { component: componentDescription('bs-search-item') } } },
     argTypes: { active: { control: 'boolean' }, disabled: { control: 'boolean' }, trailing: { control: 'text' } },
     args: { active: false, disabled: false, trailing: '' },

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: 'e8ac6945a6f9f786fc41b574e51384c30abcd776', class: `bs-select ${this.error ? 'bs-select--error' : ''}` }, this.label && (h("span", { key: '54c4e9b9dc67f6943e4ff4d17bd9ac85cf885e03', part: "label", id: labelId, class: "bs-select__label", onClick: () => !this.disabled && this.fieldEl?.focus() }, this.label, this.required && (h("span", { key: 'dbd94b0805bff1f3f826afa3d4f203c4a703353f', class: "bs-select__required", "aria-hidden": "true" }, "*")))), h("div", { key: '1a72f710156cd4af244015bcfe846c7a90e05b82', class: "bs-select__wrapper" }, h("div", { key: '4514dae9a34746dcc3c820b6119424beff02575f', 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: '98c1f4cb0e7c9a32516f87f79eaa3a26ff908ac1', part: "value", class: `bs-select__value ${selected ? '' : 'bs-select__value--placeholder'}` }, selected ? selected.label : this.placeholder), h("svg", { key: '4d98486b54716093d6ba6d9d607d2d8b8a59a7a9', part: "icon", class: "bs-select__chevron", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: 'f49edfe803c3641df79de822c5a706a988098fac', d: "M4 6L8 10L12 6", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("ul", { key: '986f8472599daaabdc00e147e5d18b36821d786e', 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' },
@@ -8,7 +10,7 @@ const fruit = [
     { label: 'Grape', value: 'grape' },
 ];
 const meta = {
-    title: 'Components/bs-select',
+    title: 'Components/Forms/bs-select',
     parameters: { docs: { description: { component: componentDescription('bs-select') } } },
     render: args => html `
     <div style="width: 280px; min-height: 260px;">
@@ -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: 'cf0974db96c51da87d134d35e5cef4da90d3925f', part: "container", class: "bs-session-timeout", surface: "base", role: "region", "aria-labelledby": "heading" }, h("div", { key: 'e3095b7c690aafc215a8f39a6b6f473fe583e5f0', class: "bs-session-timeout__body" }, !this.hideIcon && (h("bs-icon-tile", { key: '7a895784fc719f6af76490112d16bea5314484a1', part: "art", intent: d.intent, size: "lg" }, h("slot", { key: 'be5b485de50c995f4979875d914dfee9a267e16a', name: "icon" }, d.glyph()))), this.renderHeading(heading, description), this.type === 'warning' && this.renderWarning(), this.type === 'warning' && this.savedMessage && (h("p", { key: '27ad469a56758be69230543d0fca5f5938295670', part: "saved", class: "bs-session-timeout__saved" }, h(InfoIcon, { key: 'c8448fc7cdf68368fd5bccc37368d2db5ef0bab0' }), h("span", { key: '7b48f01c04ebb7b2b9e36d15ec6a786683b2a259' }, this.savedMessage))), this.type === 'signed-out' && this.renderAccount(), this.type === 'confirm-identity' && this.renderConfirm(), this.type === 'warning' && (primary || secondary) && (h("div", { key: 'fe1eeb794c192abf736ddd287229106b86a42519', part: "actions", class: "bs-session-timeout__actions" }, secondary && (h("bs-button", { key: '8420f2abc940c289ede3c1f191ce5de9c2fd1adf', part: "secondary", variant: "outlined", onClick: () => this.bsSecondary.emit() }, secondary)), primary && (h("bs-button", { key: 'f925d3d6bd3cc8ad12e9d5130f52d5552c0ba691', part: "primary", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)))), this.type === 'signed-out' && (primary || secondary) && (h("div", { key: '235011f210dc97e6c317e72e9ebef888e01d652f', part: "actions", class: "bs-session-timeout__actions bs-session-timeout__actions--stacked" }, primary && (h("bs-button", { key: '69140cb99a864a6acf61540f3980ffc68963e07a', part: "primary", class: "bs-session-timeout__block-button", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)), secondary && (h("bs-button", { key: 'b3ce4bca3f9ddce2382d30f6a7905df47cd78af5', part: "secondary", class: "bs-session-timeout__text-button", variant: "subtle", size: "lg", onClick: () => this.bsSecondary.emit() }, secondary)))), h("div", { key: '3c4874232eb8105bfbe6ccf78c51132cfbe95010', 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-session-timeout/bs-session-timeout.stories.js

@@ -2,7 +2,7 @@ import { html } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { componentDescription, propDescription } from "../../stories-utils";
 const meta = {
-    title: 'Components/bs-session-timeout',
+    title: 'Components/Feedback/bs-session-timeout',
     parameters: { docs: { description: { component: componentDescription('bs-session-timeout') } } },
     decorators: [story => html `<div style="padding: 24px; background: var(--bs-color-neutral-container);">${story()}</div>`],
     render: args => html `

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: 'defe5047b4b0689cb853b22fd3ae6c14af54ad4c', part: "container", class: "bs-shortcut-row", role: this.selectionRole ?? undefined, "aria-disabled": this.disabled ? 'true' : undefined }, h("span", { key: 'bf935f4932f94bc9c605766da7d579b4060c2000', part: "action", class: "bs-shortcut-row__action" }, h("slot", { key: '1ecef4d0a1fc5e6f07e4ee7cce586d3d9040f438' }, this.action)), h("span", { key: '9102cf9b93eb644feee936717fc59cbecd31be15', part: "keys", class: "bs-shortcut-row__keys" }, h("slot", { key: '0cdfcf25a8c9635f3d9bdca8a2ee819db7d50987', name: "keys" }, h("bs-key-caps", { key: 'ff0a64f45ecb29f5ac7f3d792689a2bd20590d92', 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-shortcut-row/bs-shortcut-row.stories.js

@@ -1,7 +1,7 @@
 import { html } from "lit";
 import { componentDescription } from "../../stories-utils";
 const meta = {
-    title: 'Components/bs-shortcut-row',
+    title: 'Components/Data display/bs-shortcut-row',
     parameters: { docs: { description: { component: componentDescription('bs-shortcut-row') } } },
     render: args => html `<bs-shortcut-row style="width: 318px;" action=${args.action} keys=${args.keys} ?disabled=${args.disabled}></bs-shortcut-row>`,
     argTypes: { action: { control: 'text' }, keys: { control: 'text' }, disabled: { control: 'boolean' } },

package/dist/collection/components/bs-side-panel/bs-side-panel.stories.js

@@ -1,7 +1,7 @@
 import { html } from "lit";
 import { componentDescription } from "../../stories-utils";
 const meta = {
-    title: 'Components/bs-side-panel',
+    title: 'Components/Menus and overlays/bs-side-panel',
     parameters: { docs: { description: { component: componentDescription('bs-side-panel') } } },
     render: args => html `
     <bs-side-panel ?open=${args.open} heading=${args.heading} side=${args.side} close-label=${args.closeLabel} ?overlay=${args.overlay}>

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: 'c0633b355a8706cfc006beeda8c949dbaeddc51d', 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-skeleton/bs-skeleton.stories.js

@@ -2,7 +2,7 @@ import { html } from "lit";
 import { componentDescription, propDescription } from "../../stories-utils";
 const variants = ['text', 'rect', 'circle'];
 const meta = {
-    title: 'Components/bs-skeleton',
+    title: 'Components/Feedback/bs-skeleton',
     parameters: { docs: { description: { component: componentDescription('bs-skeleton') } } },
     render: args => html `
     <bs-skeleton

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: '91e5791d2feeb0387e13ed4fe7068fa18756e6f0', part: "link", class: "bs-skip-link", href: this.href, onClick: this.onClick }, h("slot", { key: 'da0948ad605e5872c6220e01b7efa9e1bb2ae781' }, "Skip to main content")));
     }
     static get is() { return "bs-skip-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { html } from "lit";
 import { componentDescription, propDescription } from "../../stories-utils";
 const meta = {
-    title: 'Components/bs-skip-link',
+    title: 'Components/Actions/bs-skip-link',
     parameters: { docs: { description: { component: componentDescription('bs-skip-link') } } },
     render: args => html `
     <div style="min-height: 160px;">

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: 'a71c5cacc9a63c09cdaac6faa6bbc5cfdb99e320', class: rootClasses, "aria-disabled": this.disabled ? 'true' : undefined }, this.showLabel && (h("div", { key: 'cb511949f7bbf953b525a55b76532da27b22f7cc', class: "bs-slider__header" }, h("span", { key: '14420fa4fc943caa65ef71721c25677a3ae06c69', 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: '7ece9aa9f9b4272b245f24e469cf1567db8dca23', class: "bs-slider__row" }, this.showLabel && (h("span", { key: 'bd2f3b9be1e38e63844e5a80b1d76dac38c59cb8', part: "bound", class: "bs-slider__bound" }, this.min)), isRange ? this.renderRangeThumbs() : this.renderSingleThumb(), this.showLabel && (h("span", { key: '2979b882e37bb2d5e72f1dfb5deeecb467856e39', part: "bound", class: "bs-slider__bound" }, this.max)))));
     }
     static get is() { return "bs-slider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -3,7 +3,7 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import { componentDescription, propDescription } from "../../stories-utils";
 const types = ['default', 'segmented', 'range'];
 const meta = {
-    title: 'Components/bs-slider',
+    title: 'Components/Forms/bs-slider',
     parameters: { docs: { description: { component: componentDescription('bs-slider') } } },
     render: args => html `
     <bs-slider

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: 'abc0dc016e3c3cb11473b87ec1c2ca3e0d263019', part: "container", class: `bs-snackbar bs-snackbar--${this.variant}`, role: "status", "aria-live": this.variant === 'error' ? 'assertive' : 'polite' }, h("div", { key: '17e3c78951bfbe311cbc59298277f369eec4aa6a', class: "bs-snackbar__content" }, h("span", { key: 'c2b05e722a48a24f63171480674c8a5503b547cf', part: "icon", class: "bs-snackbar__icon", "aria-hidden": "true" }, this.loading ? h("span", { class: "bs-snackbar__spinner" }) : h(CheckCircleIcon, null)), h("span", { key: '54970644cd45c79ceab0218eaaa699e7fd789f92', part: "message", class: "bs-snackbar__message" }, h("slot", { key: 'c794d5a366b65cd04cd02169574f372098b64df9' }))), h("div", { key: 'f642653e195e181c05fa9750f9471f043e2ec900', class: "bs-snackbar__actions" }, this.actionLabel && (h("bs-button", { key: '70db297865ef7bbb88e32e11b295358a1a8c42cf', part: "action", variant: this.actionVariant ?? ACTION_VARIANT[this.variant], size: "sm", onClick: this.onAction }, this.actionLabel)), !this.hideClose && (h("bs-icon-button", { key: 'ab20201c97c9b7a652330f4afe68dd049b7dcb96', part: "close", variant: "subtle", size: "md", ariaLabel: "Dismiss", onClick: this.onDismiss }, h(CloseIcon, { key: '0df459ff13ca7774c4f9fde30d3dacf254c16ed7' }))))));
     }
     static get is() { return "bs-snackbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,7 +9,7 @@ const hideOnDismiss = (ev) => {
     ev.currentTarget.style.display = 'none';
 };
 const meta = {
-    title: 'Components/bs-snackbar',
+    title: 'Components/Feedback/bs-snackbar',
     parameters: { docs: { description: { component: componentDescription('bs-snackbar') } } },
     render: args => html `
     <bs-snackbar

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: 'a9cf4ca59a46d6850ac12623c7929a049204d7a8', part: "ripple" }),
+            h("span", { key: '963e723d983df529fa7275ed8911a23f14bf58d3', class: "bs-source-link__left" }, h("span", { key: 'c54ed1d909d06686755ee0a722a8872964eec212', class: "bs-source-link__filename-row" }, h("span", { key: '6b442369fff9851597e99c0511ea9f2551cdd921', part: "icon", class: "bs-source-link__icon" }, h("slot", { key: 'f949eb3a9b4a5ad3f240122344ec5a4b72fd4112', name: "icon" }, h(FileTextIcon, { key: '8b268ad18772d4de2631800a78641f17172cb4c9' }))), h("p", { key: 'd56fe2b559722dee2316d9a647af605b3dd5d815', part: "filename", class: "bs-source-link__filename" }, this.fileName)), h("span", { key: 'abeed4bfd0b76bcae3e3305bed71fce92e6be8c5', class: "bs-source-link__meta" }, this.sourceName && (h("span", { key: 'e72f06d12bc614ca2c326079aaa85828122db01a', part: "source", class: "bs-source-link__source" }, this.sourceName)), this.sourceName && this.version && h("span", { key: 'b5951aa8d0d308531fb6cd5a161e88587accf5b1', class: "bs-source-link__dot", "aria-hidden": "true" }), this.version && (h("span", { key: 'eb8e816100bf6471ca4891541e8e9b4d661d0aaf', part: "version", class: "bs-source-link__version" }, this.version)))),
+            h("span", { key: 'de5dc9b0fcb0d574ebf18b0bbb568371f5aa115d', part: "arrow", class: "bs-source-link__arrow", "aria-hidden": "true" }, h(ArrowUpRightIcon, { key: 'df061269ca5967dcfcc48b48d63f2c17b7b4d523' })),
         ];
         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: '2ce30722d6e6d8c0ad8f60387da0db774459cdac', 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: '9468b6c2c1ca940496762d2388514c3030eb94df', part: "svg", class: "bs-spinner__svg", viewBox: "0 0 24 24", fill: "none", focusable: "false" }, h("circle", { key: '0ed28b4c160b34615d6b986e88d36a903651cc1c', class: "bs-spinner__track", cx: "12", cy: "12", r: "9", "stroke-width": "3" }), h("path", { key: '5ce03d2094906990589e6a5972a7f44ac21f172b', 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-spinner/bs-spinner.stories.js

@@ -2,7 +2,7 @@ import { html } from "lit";
 import { componentDescription, propDescription } from "../../stories-utils";
 const sizes = ['xs', 'sm', 'md', 'inherit'];
 const meta = {
-    title: 'Components/bs-spinner',
+    title: 'Components/Feedback/bs-spinner',
     parameters: { docs: { description: { component: componentDescription('bs-spinner') } } },
     render: args => html `<bs-spinner size=${args.size} label=${args.label || undefined}></bs-spinner>`,
     argTypes: {

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');