@brandsync/wc 1.20.1 → 1.22.0

package/dist/collection/components/bs-keyboard-shortcuts/bs-keyboard-shortcuts.js

@@ -129,10 +129,10 @@ export class BsKeyboardShortcuts {
         const headId = `${this.id}-heading`;
         const noResults = count === 0 && (this.query ?? '').trim() !== '';
         let gi = 0;
-        return (h("bs-card", { key: '4adbaa6128cadae5243d72c7664cc96bb8763170', part: "container", class: "bs-keyboard-shortcuts", surface: "base", role: "region", "aria-labelledby": headId, onKeyDown: this.onKeyDown }, h("div", { key: 'ced6be76eb5edf1f2ed715538ace0a90f1899088', class: "bs-keyboard-shortcuts__body" }, h("div", { key: '63396fd9922f5fd22dfd8a6f7703e732423d0406', part: "head", class: "bs-keyboard-shortcuts__head" }, h("svg", { key: '2b48b0537ad8c49966a33c15d3bd7642c61afaa1', class: "bs-keyboard-shortcuts__icon", viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", "stroke-width": "1.8", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("rect", { key: 'd1575e1a4caadd811d7738a97590b33772d09a3e', x: "2", y: "5", width: "20", height: "14", rx: "2" }), h("path", { key: '8396b0c4a04aa05015745191f5fffb8c9171b624', d: "M6 9h.01M10 9h.01M14 9h.01M18 9h.01M6 13h.01M18 13h.01M9 15.5h6" })), h("h4", { key: 'edc9090eeec79b8f9c4a732bcc307a3d64598180', part: "heading", id: headId, class: "bs-keyboard-shortcuts__heading" }, h("slot", { key: '845c9ee4429df39222cb4dc384bfa4d67f9fb32d', name: "heading" }, this.heading)), h("bs-icon-button", { key: 'a9920ff3ebdf761fcbcff5437883a0aa018b0515', part: "close", variant: "subtle", size: "md", "aria-label": this.closeLabel, onClick: () => this.bsClose.emit() }, h("svg", { key: '1ba14bac88cb1e0b71c26920606926e04647b3f3', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "aria-hidden": "true" }, h("path", { key: 'a5bf2da4c4e046fbf47fcabfc9a359cc2f9e8af5', d: "M6 6l12 12M18 6 6 18" })))), h("bs-input", { key: '1494c19d015297481024fb24880129def85a5bf4', part: "search", type: "search", placeholder: this.searchPlaceholder, value: this.query, onBsInput: this.onInput }), this.showSingleKeySwitch && (h("div", { key: '021639f4a4aabd1a1e93bfa74005e748f10af296', part: "switch", class: "bs-keyboard-shortcuts__switch" }, h("div", { key: '7038f274d674816a895538f29ed49893dfe73d71', class: "bs-keyboard-shortcuts__switch-text" }, h("span", { key: 'c478c63c210bf77c9b579d8be475e40807a3f794', class: "bs-keyboard-shortcuts__switch-title" }, this.singleKeyLabel), h("span", { key: '0be8befdcf52d17e267ad00cc21582a470f3355b', class: "bs-keyboard-shortcuts__switch-caption" }, this.singleKeyDescription)), h("bs-switch", { key: '413e6394239c8ae95db6dda07f3239dc371271dc', ariaLabel: this.singleKeyLabel, checked: this.singleKeyEnabled, onBsChange: this.onSwitch }))), h("span", { key: '49ebad833d4086b6e9063cca321183050294974e', class: "bs-keyboard-shortcuts__live", "aria-live": "polite" }, `${count} shortcut${count === 1 ? '' : 's'}`), noResults ? (h("p", { part: "empty", class: "bs-keyboard-shortcuts__empty", role: "status" }, this.noResultsText)) : (h("div", { part: "groups", class: "bs-keyboard-shortcuts__groups" }, cols.map(col => (h("div", { class: "bs-keyboard-shortcuts__column" }, col.map(g => {
+        return (h("bs-card", { key: 'a5053480ccd41dd6d915a47cb7745b3932ba9931', part: "container", class: "bs-keyboard-shortcuts", surface: "base", role: "region", "aria-labelledby": headId, onKeyDown: this.onKeyDown }, h("div", { key: '8b6e9c7bf16a6cb0e2d81243ae60106cb52c49a4', class: "bs-keyboard-shortcuts__body" }, h("div", { key: 'fbdb6317e9c0e8a270bc5f9fb713654f68796b8f', part: "head", class: "bs-keyboard-shortcuts__head" }, h("svg", { key: '16342385b62757c866386cf0b692ec15cf8dc28c', class: "bs-keyboard-shortcuts__icon", viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", "stroke-width": "1.8", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("rect", { key: '6337f691c61999614a84f501c056aae96c6d5d08', x: "2", y: "5", width: "20", height: "14", rx: "2" }), h("path", { key: 'adfff1e7dbff765e0b14b3676119fa6c4be3b159', d: "M6 9h.01M10 9h.01M14 9h.01M18 9h.01M6 13h.01M18 13h.01M9 15.5h6" })), h("h4", { key: 'f5cb2b86082b0e8c50d19da03f398767889a39ba', part: "heading", id: headId, class: "bs-keyboard-shortcuts__heading" }, h("slot", { key: '3839ba626c94bada3ba752e0cbacf96d8a5f0738', name: "heading" }, this.heading)), h("bs-icon-button", { key: '70a67f9f43899e59fff392968335fec6d1cf4b2d', part: "close", variant: "subtle", size: "md", "aria-label": this.closeLabel, onClick: () => this.bsClose.emit() }, h("svg", { key: '186d78eca1df5cac3c80a8dcfbf66d2301f3165b', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "aria-hidden": "true" }, h("path", { key: '8099ce12121ea5340cb578f1f2e338af2f909087', d: "M6 6l12 12M18 6 6 18" })))), h("bs-input", { key: 'dd0a5e9f35849c13499e18d458ddeb1153a9bb2a', part: "search", type: "search", placeholder: this.searchPlaceholder, value: this.query, onBsInput: this.onInput }), this.showSingleKeySwitch && (h("div", { key: '88584be755995426dfa0c33a81f8c68dc4f0b65d', part: "switch", class: "bs-keyboard-shortcuts__switch" }, h("div", { key: '7a530f7760d6593a5ab031636b6ed93bfdf3e9bf', class: "bs-keyboard-shortcuts__switch-text" }, h("span", { key: '992e5d015f9195d7577e38f18ffeaf169b626d7d', class: "bs-keyboard-shortcuts__switch-title" }, this.singleKeyLabel), h("span", { key: 'f6f29ec213290f68aaa5a09f7b1e4f00eb77b3b4', class: "bs-keyboard-shortcuts__switch-caption" }, this.singleKeyDescription)), h("bs-switch", { key: '9e9531d7bebf08f84c8d5d238ab90072683a9172', ariaLabel: this.singleKeyLabel, checked: this.singleKeyEnabled, onBsChange: this.onSwitch }))), h("span", { key: '4c9bbb0b4f6fadec2c63c5b8b4ec1ad7dea9f000', class: "bs-keyboard-shortcuts__live", "aria-live": "polite" }, `${count} shortcut${count === 1 ? '' : 's'}`), noResults ? (h("p", { part: "empty", class: "bs-keyboard-shortcuts__empty", role: "status" }, this.noResultsText)) : (h("div", { part: "groups", class: "bs-keyboard-shortcuts__groups" }, cols.map(col => (h("div", { class: "bs-keyboard-shortcuts__column" }, col.map(g => {
             const tid = `${this.id}-g${gi++}`;
             return (h("div", { part: "group", class: "bs-keyboard-shortcuts__group", role: "group", "aria-labelledby": tid }, h("div", { part: "group-title", id: tid, class: "bs-keyboard-shortcuts__group-title" }, g.title), h("div", { class: "bs-keyboard-shortcuts__rows", role: "list" }, g.shortcuts.map(s => (h("bs-shortcut-row", { part: "row", action: s.action, keys: s.keys, selectionRole: "listitem", disabled: !!s.disabled || (!this.singleKeyEnabled && isSingleKey(s)) }))))));
-        })))))), this.showFooterHint && (h("div", { key: 'c4664361e37fe30fedb7ad4fe70d563158f1b8b4', part: "footer", class: "bs-keyboard-shortcuts__footer" }, h("slot", { key: 'b3e9725588c19ed229c4b0ef41d5af770b9a254f', name: "footer" }, h("span", { key: '4777b862d716e32dbaf52648b1657888a2edf469' }, this.footerPrefix), h("bs-key", { key: '2181a463c533548e1248ac29935f44324f730aae', label: this.footerKey }), h("span", { key: 'a768e533df52cca4e6576e9ec6824a9fc80bb3f3' }, this.footerText)))))));
+        })))))), this.showFooterHint && (h("div", { key: '021ae63bd1633851bc032eb5f22eecfa468a5c68', part: "footer", class: "bs-keyboard-shortcuts__footer" }, h("slot", { key: 'cff2d6f675a885c11b47a3d8fa742397f3c20003', name: "footer" }, h("span", { key: '531c8be2c0afddf6b2aa038b79983f0299baaec9' }, this.footerPrefix), h("bs-key", { key: 'e4a4c98c0cebd3c7436e095a86225e7aa31e492c', label: this.footerKey }), h("span", { key: 'bc4cb7dec5d3c24b2a7058b5da2c8ad2c62e056d' }, this.footerText)))))));
     }
     static get is() { return "bs-keyboard-shortcuts"; }
     static get encapsulation() { return "shadow"; }

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

@@ -54,7 +54,7 @@ export class BsLink {
         const newTab = this.target === '_blank';
         const showIcon = this.external || newTab;
         const rel = this.rel ?? (newTab ? 'noopener noreferrer' : undefined);
-        return (h("a", { key: 'c82f367db82bb0c44308b0ab2c6599a846b6adfe', part: "link", class: `bs-link bs-link--${this.variant}`, href: this.href, target: this.target, rel: rel, "aria-label": this.ariaLabel, "aria-current": this.current ? 'page' : undefined, onClick: this.onClick }, h("span", { key: 'f12546ed4826b1e76f99e85a8ed297143655d128', part: "label", class: "bs-link__label" }, h("slot", { key: 'c562356d87247776cd80edccc1b8d6e9b8e35851' })), newTab && h("span", { key: '3c2ee6c9d471bda0302d0a607c46caf3693db568', class: "bs-link__sr" }, this.externalLabel), showIcon && (h("svg", { key: '8af4d1d677dd6942a699e23d8e8f6ceb2470988a', part: "icon", class: "bs-link__icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: '42df29013dd77d2bd847fedc6817914cc4d50d91', d: "M9 3h4v4M13 3L7.5 8.5M12 9v3a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h3", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
+        return (h("a", { key: 'abc72ce657667f084a11086e2ddee9f764979cd7', part: "link", class: `bs-link bs-link--${this.variant}`, href: this.href, target: this.target, rel: rel, "aria-label": this.ariaLabel, "aria-current": this.current ? 'page' : undefined, onClick: this.onClick }, h("span", { key: '1afba0c22b50f07300b1b431434ca3f9b38a7b33', part: "label", class: "bs-link__label" }, h("slot", { key: 'dcfa6947cfd6821b4810624a87c5d5cb3d270282' })), newTab && h("span", { key: '1faaa4ea78634a7bb2d44f160564d87408c3e79b', class: "bs-link__sr" }, this.externalLabel), showIcon && (h("svg", { key: '889b39655b35270de1fd4ef966fca9077a140935', part: "icon", class: "bs-link__icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: 'd5393bd505b27536bc19c86d7d21f674d7a75704', d: "M9 3h4v4M13 3L7.5 8.5M12 9v3a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h3", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
     }
     static get is() { return "bs-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -104,7 +104,7 @@ export class BsList {
         enabled[next].focus();
     }
     render() {
-        return (h("div", { key: 'c90bfe88e3be35377190d55c7ed25338e1baf2c2', part: "list", class: "bs-list", role: this.selectable ? 'listbox' : 'list', "aria-label": this.ariaLabel ?? undefined }, h("slot", { key: '7c4ceaa24552ced7b6b09b1d1ff1e189cb144b6b', onSlotchange: () => this.sync() })));
+        return (h("div", { key: 'f117bd6ecbbfc4571684dfa2ebea07ea70723672', part: "list", class: "bs-list", role: this.selectable ? 'listbox' : 'list', "aria-label": this.ariaLabel ?? undefined }, h("slot", { key: 'de9bf097921079f34f97bfbbbb19e2896c340de7', onSlotchange: () => this.sync() })));
     }
     static get is() { return "bs-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -105,7 +105,7 @@ export class BsListItem {
         const role = this.selectionRole === 'option' ? 'option' : this.selectionRole === 'listitem' ? 'listitem' : this.interactive ? 'button' : undefined;
         const standaloneFocusable = this.interactive && !this.selectionRole && !this.disabled;
         const showTrailing = this.showArrow || this.hasTrailing;
-        return (h(Host, { key: 'b2cf244c2795882e80d9d0de8e450089f31096ec', role: role, tabindex: standaloneFocusable ? '0' : undefined, "aria-selected": this.selectionRole === 'option' ? String(this.selected) : undefined, "aria-disabled": this.disabled ? 'true' : undefined, class: { 'bs-list-item--interactive': interactive && !this.disabled } }, h("div", { key: '9c803a23b4b7857e3486d73a082703ae980bcfc1', part: "container", class: "bs-list-item" }, interactive && !this.disabled && h("bs-ripple", { key: 'c7cf9815786dd62cd2b2048b1b698d76bd75c13d', part: "ripple" }), this.marker && (h("span", { key: '891fe2a184b721b68467872b18785e1af4246c99', part: "marker", class: "bs-list-item__marker", "aria-hidden": "true" }, this.marker)), h("div", { key: '0aaf314ca2fe62569e687ae960edfed7dc00f4c4', part: "leading", class: { 'bs-list-item__leading': true, 'bs-list-item__leading--has-content': this.hasLeading } }, h("slot", { key: 'cef319ce4b0ca1b8a8b7d5b375c3507375354a95', name: "leading", onSlotchange: (e) => (this.hasLeading = this.slotHas(e)) })), h("div", { key: '441781f53d2b1e73ffd3a1eccf0769716e7da628', part: "content", class: "bs-list-item__content" }, !this.hasDefault && this.label && (h("div", { key: '2348b17d9f0d5da77e4481b2c26b7b39ef9525ab', part: "label", class: "bs-list-item__label" }, this.label)), !this.hasDefault && this.description && (h("div", { key: '4b8931a5c9e36ac4c3bfa4f376bbd6e23604f0f9', part: "description", class: "bs-list-item__description" }, this.description)), !this.hasDefault && this.supportText && (h("div", { key: '1f63bcbce2b0b30f28f9c90a50443a6d78d15242', part: "support-text", class: "bs-list-item__support" }, this.supportText)), h("slot", { key: 'e1d67c08ad98d76619f4ad3171689cf79ebe565d', onSlotchange: (e) => (this.hasDefault = this.slotHas(e)) })), h("div", { key: '5e1fbe9de74e62b54a2c67debcef1228a434a6a0', part: "trailing", class: { 'bs-list-item__trailing': true, 'bs-list-item__trailing--shown': showTrailing } }, h("slot", { key: 'c2dbc64f61a448dc13adfe7642be0fa398453427', name: "trailing", onSlotchange: (e) => (this.hasTrailing = this.slotHas(e)) }, this.showArrow && (h("svg", { key: '2dce987756aed8aa5eac4949473d3a30022b3792', viewBox: "0 0 32 32", width: "32", height: "32", fill: "none", "aria-hidden": "true" }, h("path", { key: 'f79e5c78fb72b30b29248e4a47048312d3779a2f', d: "M12 7L21 16L12 25", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
+        return (h(Host, { key: 'a83772eaf4984154c79368244bdb0132f2a61292', role: role, tabindex: standaloneFocusable ? '0' : undefined, "aria-selected": this.selectionRole === 'option' ? String(this.selected) : undefined, "aria-disabled": this.disabled ? 'true' : undefined, class: { 'bs-list-item--interactive': interactive && !this.disabled } }, h("div", { key: '9e32856f6c9ba224c2dc560d9e184af3d6826349', part: "container", class: "bs-list-item" }, interactive && !this.disabled && h("bs-ripple", { key: 'f0132b98663f07bd209a85e25ca1aa73e5ba79ef', part: "ripple" }), this.marker && (h("span", { key: '7030b2bc2968a4cb86bdc31ca07b0b175a49d2c4', part: "marker", class: "bs-list-item__marker", "aria-hidden": "true" }, this.marker)), h("div", { key: '78f9b066a5f65fe807c26661930e7f81993380fb', part: "leading", class: { 'bs-list-item__leading': true, 'bs-list-item__leading--has-content': this.hasLeading } }, h("slot", { key: '0f0b7bd65e809e9d4f2210831554228d6c0ab3ac', name: "leading", onSlotchange: (e) => (this.hasLeading = this.slotHas(e)) })), h("div", { key: '1281075bcedd3c19c910cb5ad8a95b29c1b25693', part: "content", class: "bs-list-item__content" }, !this.hasDefault && this.label && (h("div", { key: '58255d974d1652d40d341168a062de1c91d41cca', part: "label", class: "bs-list-item__label" }, this.label)), !this.hasDefault && this.description && (h("div", { key: 'f906a96348e4bf453e89bc1a7f05acc663959619', part: "description", class: "bs-list-item__description" }, this.description)), !this.hasDefault && this.supportText && (h("div", { key: '5bab72a6f2334ad2efb8821501049e5363104176', part: "support-text", class: "bs-list-item__support" }, this.supportText)), h("slot", { key: '1baffcbdbd56cba0f07ab2c3e04383a05660fe00', onSlotchange: (e) => (this.hasDefault = this.slotHas(e)) })), h("div", { key: '371a502c89bf8113e45fb63b4a11dfffa75d98b0', part: "trailing", class: { 'bs-list-item__trailing': true, 'bs-list-item__trailing--shown': showTrailing } }, h("slot", { key: '8e2f738727a5a7eafe35e354aa422bfbd31dc2c4', name: "trailing", onSlotchange: (e) => (this.hasTrailing = this.slotHas(e)) }, this.showArrow && (h("svg", { key: 'c371e14d29fecdb1509a83465460eb0c01326cd1', viewBox: "0 0 32 32", width: "32", height: "32", fill: "none", "aria-hidden": "true" }, h("path", { key: '088e1ab871e1c8386a0c7196c4c66c8a8c180951', d: "M12 7L21 16L12 25", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
     }
     static get is() { return "bs-list-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-mega-menu/bs-mega-menu.js

@@ -162,7 +162,7 @@ export class BsMegaMenu {
         const hasFeatured = !!this.featured || !!this.el.querySelector(':scope > [slot="featured"]');
         const tracks = this.columns.length + (hasFeatured ? 1 : 0);
         const removed = this.open === false && !this.closing;
-        return (h(Host, { key: '4e1ca5f61433cf2bb6c19b4ba62c6b936932401e', "data-closed": removed ? '' : undefined }, h("bs-card", { key: '4858dba5bafae10221a4acbaa03b0ebe6a2bdc1a', part: "panel", class: "bs-mega-menu", surface: "base", role: "navigation", "aria-label": this.label, onKeyDown: this.onKeyDown, inert: this.closing, ref: el => (this.panelEl = el) }, h("div", { key: 'ccecfe4344c62e17e987a3d9d12ac3d2444bcbd6', part: "columns", class: "bs-mega-menu__columns", style: { '--bs-mega-menu-tracks': String(Math.max(tracks, 1)) } }, this.columns.map(col => this.renderColumn(col)), hasFeatured && this.renderFeatured()), h("bs-divider", { key: 'ce7d19d9bf5c5a8afaae6be8a28cc80ff91644a3', decorative: true }), h("div", { key: '1dfb2400b86b11b6fd2bdd0deb856d3610d13e13', part: "footer", class: "bs-mega-menu__footer" }, h("span", { key: 'ab18853838c0e412b3f5e6d7d146e61150355569', class: "bs-mega-menu__footer-start" }, h("slot", { key: '7edae96d3388a26b2c6d52a1a0e2719a816d1a47', name: "footer-start" }, this.recent.length > 0 && `${this.recentLabel} ${this.recent.join(', ')}`)), h("span", { key: 'f67686ddb8f5eac6c58ba7ab5d9386c38b306ae1', class: "bs-mega-menu__footer-end" }, h("slot", { key: 'd3ec0812f016f8fc1639013212e4f804d050a591', name: "footer-end" }, h("span", { key: '58235b6c41e41c541b79c55108fa7f0f24c40cdf', class: "bs-mega-menu__shortcut" }, this.shortcutLabel, h("bs-key-caps", { key: '1d2d4a53a33ac046af88b78b59bc83e7b925ad56', part: "shortcut", keys: this.shortcutKeys, label: this.shortcutKeysLabel }))))))));
+        return (h(Host, { key: '4832adcf0042dc4e9a3fe440b97659b953069507', "data-closed": removed ? '' : undefined }, h("bs-card", { key: '9ff246ab840b03384b682729ee548c1daad8b455', part: "panel", class: "bs-mega-menu", surface: "base", role: "navigation", "aria-label": this.label, onKeyDown: this.onKeyDown, inert: this.closing, ref: el => (this.panelEl = el) }, h("div", { key: '95aacf86956b74daf5d5ac09e5c9f89e017a81c8', part: "columns", class: "bs-mega-menu__columns", style: { '--bs-mega-menu-tracks': String(Math.max(tracks, 1)) } }, this.columns.map(col => this.renderColumn(col)), hasFeatured && this.renderFeatured()), h("bs-divider", { key: '3da7484d4e7738fa84139e5bf742dfdd76c2a062', decorative: true }), h("div", { key: '56c6a6eb9412079ac41c460038dbd31ff45ddc8e', part: "footer", class: "bs-mega-menu__footer" }, h("span", { key: '4e7ce483d8d849e0dbd3d21c7d79aef657bcd881', class: "bs-mega-menu__footer-start" }, h("slot", { key: '359bd9f163c92557cd9466a808b10f98fccbe522', name: "footer-start" }, this.recent.length > 0 && `${this.recentLabel} ${this.recent.join(', ')}`)), h("span", { key: '689361415321b6bd4c5eb9f30e8396a12c38863b', class: "bs-mega-menu__footer-end" }, h("slot", { key: '9a39392d5f2ba62797929ed9a8afd1ec5ab41175', name: "footer-end" }, h("span", { key: '89e2764e2359818c07a7241717ac59c0f1ff289c', class: "bs-mega-menu__shortcut" }, this.shortcutLabel, h("bs-key-caps", { key: '472ab949a7a6182adff32d0d954e83c1f59cb0c6', part: "shortcut", keys: this.shortcutKeys, label: this.shortcutKeysLabel }))))))));
     }
     static get is() { return "bs-mega-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -44,7 +44,7 @@ export class BsMenu {
         items[next].shadowRoot?.querySelector('button')?.focus();
     }
     render() {
-        return (h("div", { key: 'c14d9bedef9bcb0bef69c739c8f477d7390af729', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: '6e26c1a053dee4b7ad91e603b82609ac1fee1abb' })));
+        return (h("div", { key: '1661d57a19b11cb3dc3217ff2e3c9b5990240e0f', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: 'f8534652090ba02a20e2429d4be04ff300e96e6c' })));
     }
     static get is() { return "bs-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-menu-block/bs-menu-block.js

@@ -47,10 +47,10 @@ export class BsMenuBlock {
     render() {
         const common = { part: 'container', class: 'bs-menu-block' };
         const body = [
-            h("bs-icon-tile", { key: '8190c2b054e8cde19db39aa704315673f42902e1', part: "icon", class: "bs-menu-block__icon", size: "md" }, this.icon ? h("span", { class: "bs-menu-block__glyph", style: { '--bs-menu-block-glyph': `url(${JSON.stringify(this.icon)})` } }) : h("slot", null)),
-            h("span", { key: '1ea5bb36e09e02be9c42496fdc4e0ff5f82fb39e', class: "bs-menu-block__text" }, h("span", { key: '4b285a1380f7fd257b03a5cee0a57d7c82670622', class: "bs-menu-block__title" }, h("span", { key: '6ad1444db9ce3fba93d841f5e0a365bdf22b33f7', part: "name", class: "bs-menu-block__name" }, this.name), this.badge && (h("bs-chip-informative", { key: '514c1eac5779e91b1a2e6d52d24f47f329141d9b', part: "badge", class: "bs-menu-block__badge", color: "info", size: "sm" }, this.badge))), this.description && (h("span", { key: 'bcb1508304f1544a8b78bee9036d6be020efd451', part: "description", class: "bs-menu-block__description" }, this.description))),
+            h("bs-icon-tile", { key: '54af23c0a7db510b37703ffb14121001d5574244', part: "icon", class: "bs-menu-block__icon", size: "md" }, this.icon ? h("span", { class: "bs-menu-block__glyph", style: { '--bs-menu-block-glyph': `url(${JSON.stringify(this.icon)})` } }) : h("slot", null)),
+            h("span", { key: '423222927ae442229eee28de485626e14fc0868e', class: "bs-menu-block__text" }, h("span", { key: '9f8e5377a88767a9eed7e02352611a15b557be9c', class: "bs-menu-block__title" }, h("span", { key: 'e81410938ab92cb30948792865a848e19e02e2ae', part: "name", class: "bs-menu-block__name" }, this.name), this.badge && (h("bs-chip-informative", { key: '1bdc625c01bc151c99ceffc4bebe3edea86ff447', part: "badge", class: "bs-menu-block__badge", color: "info", size: "sm" }, this.badge))), this.description && (h("span", { key: '344c58c52f98142eb2c82fb8683f5b339731ba95', part: "description", class: "bs-menu-block__description" }, this.description))),
         ];
-        return (h("button", { key: 'd87cc4926cd17e36ee6ae1295e6c38c19052f3aa', ...common, type: "button" }, body));
+        return (h("button", { key: 'a55e7bc09ed48a33630f497f8896d14b32e2f5a0', ...common, type: "button" }, body));
     }
     static get is() { return "bs-menu-block"; }
     static get encapsulation() { return "shadow"; }

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

@@ -48,7 +48,7 @@ export class BsMenuItem {
         this.bsSelect.emit();
     };
     render() {
-        return (h("button", { key: 'c52e126d6150c7814a0d53cc260b3c5ab8aa3c5e', type: "button", part: "item", role: "menuitem", class: `bs-menu-item ${this.disabled ? 'bs-menu-item--disabled' : ''}`, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.onClick }, h("bs-ripple", { key: 'f9da7fdf2cfb591562764f67a84c4c4b511bb348', part: "ripple", centered: false, disabled: this.disabled }), h("span", { key: 'a91da1d5500117b6d67a5c6a7398ad8b40064385', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, h("slot", { key: '3fa07f929ac18f5aab4ceb26c9712f79379c5f4a', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '2e7e80d88803abc7a6cb54c1eb18df53d49f85a9', part: "label", class: "bs-menu-item__label" }, h("slot", { key: 'ad8413c282494014160497635cec1f5efaf44e12' }))));
+        return (h("button", { key: 'a969a082bd83d038db27827975e43e8b0e7b1657', type: "button", part: "item", role: "menuitem", class: `bs-menu-item ${this.disabled ? 'bs-menu-item--disabled' : ''}`, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.onClick }, h("bs-ripple", { key: 'cd7f6fd09f9a6922e352f319f827aa16bba89ec7', part: "ripple", centered: false, disabled: this.disabled }), h("span", { key: '35f79184bdeab4a3234bd2379f866a774382f16a', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, h("slot", { key: '1df32c3926df82957599d444f4ab4261a25a724d', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '02101db2f542e7b0b5fa9417f01606a3f4c7d504', part: "label", class: "bs-menu-item__label" }, h("slot", { key: 'c66e294bf3ad3bc9433ac7c6718207a4f2837229' }))));
     }
     static get is() { return "bs-menu-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -45,7 +45,7 @@ export class BsMessage {
     /** Delivery/render state. `error` uses error colours; `pending` dims the bubble and sets `aria-busy`. */
     status = 'default';
     render() {
-        return (h("div", { key: 'f80d1149391aef141fdcabfcc1a0c1fd0537cbf9', class: "bs-message", "aria-busy": this.status === 'pending' ? 'true' : undefined }, h("div", { key: 'd640f5a34fc67643da3755aaed1d0cdc8a39d628', part: "avatar", class: "bs-message__avatar" }, h("slot", { key: '961d1226493b04581259b1e445afabc82f90a7a9', name: "avatar" })), h("div", { key: '742e803b174a31f2c5db3c35315e62bc108cec02', class: "bs-message__column" }, h("bs-card", { key: '09f5449eb4d01309597301b516dc31a0fd008786', part: "container", class: "bs-message__bubble", surface: "base" }, h("div", { key: 'eda71ddcc2a3b0546919b78119bc7c70c3c3be07', part: "content", class: "bs-message__content" }, h("slot", { key: '790751ff09be551fe5b6fcbe7d1fb67522d86944' }))), h("div", { key: '30ccab14d2c8348c5ccd23298ad102ef39409847', part: "footer", class: "bs-message__footer" }, h("slot", { key: '869e264a07fdd6926e7740717bf98183f437b0ed', name: "footer" })), h("div", { key: 'c5d5da384993775c18a0edd4f2658331b12835ce', part: "timestamp", class: "bs-message__timestamp" }, h("slot", { key: 'd157e9a0467ab7dc9105c348960a3b890d5055b1', name: "timestamp" }, this.timestamp && h("time", { key: '7bef51f7106b6fe82e991a46a43cf271cafef448', dateTime: this.datetime }, this.timestamp))))));
+        return (h("div", { key: 'd40a50874c4336c07e68e1113b69f7cf1f201dda', class: "bs-message", "aria-busy": this.status === 'pending' ? 'true' : undefined }, h("div", { key: 'a1e25df59ff3080fb4d35ebcf4ad02c620decdb4', part: "avatar", class: "bs-message__avatar" }, h("slot", { key: '89af0b568aa96d390277b0d8132e0c189b02d34c', name: "avatar" })), h("div", { key: 'e2acecd9ae7820e1e3424fe33a89e2dce43b360e', class: "bs-message__column" }, h("bs-card", { key: 'aa435f285ea9301a331168108039a14841f7171c', part: "container", class: "bs-message__bubble", surface: "base" }, h("div", { key: '30553499b79c236c74800190e3aca2f6e43b1ae5', part: "content", class: "bs-message__content" }, h("slot", { key: 'da5f656f9d2436a3c12dbd67fa34f5e28d5626aa' }))), h("div", { key: '98525da85571288f502755eea863ff117a31c42f', part: "footer", class: "bs-message__footer" }, h("slot", { key: '42ac8fcc4dd4e23c657d68b0398974acb37a478f', name: "footer" })), h("div", { key: '2bf6597ed48e6f3c252ff42d75eee48129b1a3d7', part: "timestamp", class: "bs-message__timestamp" }, h("slot", { key: 'd57875d2b2e86b7c5115eae8f26a80852537bdc2', name: "timestamp" }, this.timestamp && h("time", { key: 'ec840e7a0c5c525f501919b743e1dc79a45363d3', dateTime: this.datetime }, this.timestamp))))));
     }
     static get is() { return "bs-message"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-message-list/bs-message-list.js

@@ -75,7 +75,7 @@ export class BsMessageList {
         }
     };
     render() {
-        return (h("div", { key: '4a9aba669da325e805219d3f4d11dfbfdd235147', class: "bs-message-list" }, h("div", { key: '86a867dda211c2648a7e1a82f18b94a3924a774e', part: "viewport", class: "bs-message-list__viewport", role: "log", "aria-live": "polite", tabindex: "0", ref: el => (this.viewport = el), onScroll: this.onScroll }, h("slot", { key: '649dd0db989cea62876092ed384a704468392e0d' })), this.showScrollButton && (h("bs-icon-button", { key: 'e4066ec90ac6ea3000e10db1920eeaf028611548', part: "scroll-to-latest", class: "bs-message-list__scroll", variant: "neutral", ariaLabel: this.scrollToLatestLabel, onClick: () => this.scrollToLatest() }, h("svg", { key: 'c6f25699e0f1de5b543b6297c4158a05e3f04eb3', width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: '044b506ee58e69c3dec36eb107c5565899a036e5', d: "M8 3v10M3.5 8.5L8 13l4.5-4.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))));
+        return (h("div", { key: '90058e1e0ad1efad987f4f1ec05c2f59cdfdba38', class: "bs-message-list" }, h("div", { key: '4173ba965f98a6cbc70f7d7edc683d35dc4601fd', part: "viewport", class: "bs-message-list__viewport", role: "log", "aria-live": "polite", tabindex: "0", ref: el => (this.viewport = el), onScroll: this.onScroll }, h("slot", { key: 'fa1f5d0a571d3948c432ec500ecf7e88e4c5f549' })), this.showScrollButton && (h("bs-icon-button", { key: 'e15d2d71a9f8f620de9b63367f1df3bea2cb8eae', part: "scroll-to-latest", class: "bs-message-list__scroll", variant: "neutral", ariaLabel: this.scrollToLatestLabel, onClick: () => this.scrollToLatest() }, h("svg", { key: '1266a003b4472d0572b867a150b40416a80ec560', width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: 'c6cf46e95668f5b09f67c123f3aa4caaa221cead', d: "M8 3v10M3.5 8.5L8 13l4.5-4.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))));
     }
     static get is() { return "bs-message-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-page-header/bs-page-header.js

@@ -109,7 +109,7 @@ export class BsPageHeader {
         const level = Math.min(6, Math.max(1, Math.trunc(Number(this.headingLevel)) || 1));
         const showMeta = !!this.meta || this.slotted.meta;
         const hasTabs = this.slotted.tabs && !this.compact;
-        return (h("div", { key: '38f51471c2c9c98dc0a84b82813399f12f221aa0', part: "container", class: { 'bs-page-header': true, 'bs-page-header--compact': this.compact, 'bs-page-header--tabs': hasTabs } }, h("div", { key: '3313d74119c09977fa812a17f183da9c2981bc50', part: "breadcrumb", class: { 'bs-page-header__breadcrumb': true, 'bs-page-header__empty': !this.slotted.breadcrumb } }, h("slot", { key: '8c4668a0d782fd22c73d0b85cffc49d3139c62f2', name: "breadcrumb", onSlotchange: this.onSlotChange('breadcrumb') })), h("div", { key: '6cf0fb207aff871d1366e6ced2beb05a1ff86e57', part: "row", class: "bs-page-header__row" }, h("div", { key: 'e21c28244990e259d802192f414e3c7fa909ac7d', part: "main", class: { 'bs-page-header__main': true, 'bs-page-header__main--back': this.back } }, this.back && (h("bs-icon-button", { key: '4cb2a4347504ec675d2f678c7eb478491f7f3cef', part: "back", class: "bs-page-header__back", variant: "subtle", size: "sm", ariaLabel: this.backLabel, onClick: () => this.bsBack.emit() }, h(ArrowLeftIcon, { key: 'ff9323bc90d6697ea54556e7d03fc147738579ee' }))), h("div", { key: '1e9065ec14b16ec8f354ed54d3403098cb69e55c', part: "title", class: { 'bs-page-header__title': true, 'bs-page-header__title--controls': this.back || this.favoritable } }, h(`h${level}`, { part: 'heading', class: { 'bs-page-header__heading': true } }, this.heading), h("span", { key: 'f332178c13713ea9ae7864344795baa390e0be56', part: "status", class: { 'bs-page-header__status': true, 'bs-page-header__empty': !this.slotted.status } }, h("slot", { key: '2881dfb50b69b93c24263e0d9ea5a43787be779c', name: "status", onSlotchange: this.onSlotChange('status') })), this.favoritable && (h("bs-icon-button", { key: '341c9b1b79fb05203a0d59fa752856b2d0de96cc', part: "favorite", class: "bs-page-header__favorite", variant: "subtle", size: "sm", ariaLabel: this.favoriteLabel, pressed: this.favorite, onClick: this.onFavoriteClick }, this.favorite ? h(StarFillIcon, null) : h(StarIcon, null)))), h("div", { key: '2021b23ac34262168aa063079c2cdcf249297d44', part: "meta", class: { 'bs-page-header__meta': true, 'bs-page-header__empty': !showMeta } }, h("slot", { key: '0937a7986fb7a8338cc228b58d45dd679942e067', name: "meta", onSlotchange: this.onSlotChange('meta') }, this.meta))), h("div", { key: '284547154c9cfe20b1455b4dd51e9d336cc4fb91', part: "actions", class: { 'bs-page-header__actions': true, 'bs-page-header__empty': !this.slotted.actions } }, h("slot", { key: 'e6a7bf0ca86f9864bebe7d87ddcefd7030c8bf32', name: "actions", onSlotchange: this.onSlotChange('actions') }))), h("div", { key: '267dd69b1732befe8c06193ff1dab20288f2053a', part: "tabs", class: { 'bs-page-header__tabs': true, 'bs-page-header__empty': !this.slotted.tabs } }, h("slot", { key: '8b778bf7c356205ac65e843112415b344f5bf332', name: "tabs", onSlotchange: this.onSlotChange('tabs') })), hasTabs && h("bs-divider", { key: 'ba4351e50cbeef3088514f84a83966dabe10c4a7', part: "divider", class: "bs-page-header__divider", decorative: true })));
+        return (h("div", { key: '08cdd135e8420658d83746e92e73add8a504fe39', part: "container", class: { 'bs-page-header': true, 'bs-page-header--compact': this.compact, 'bs-page-header--tabs': hasTabs } }, h("div", { key: 'e435828cd6e8fe3d9e2fa96c2b6ee625c71b8868', part: "breadcrumb", class: { 'bs-page-header__breadcrumb': true, 'bs-page-header__empty': !this.slotted.breadcrumb } }, h("slot", { key: '71d3e23d947495131ff3bf0a64cc9f50d62205c5', name: "breadcrumb", onSlotchange: this.onSlotChange('breadcrumb') })), h("div", { key: '00d8ddb37350152ad4b39b9b555057ce943cd24b', part: "row", class: "bs-page-header__row" }, h("div", { key: 'ac41b44a107ac68f44b5f90094d6d6c5fbe1a26f', part: "main", class: { 'bs-page-header__main': true, 'bs-page-header__main--back': this.back } }, this.back && (h("bs-icon-button", { key: '6b609f18bd356f23bf4223acf50b66b317437152', part: "back", class: "bs-page-header__back", variant: "subtle", size: "sm", ariaLabel: this.backLabel, onClick: () => this.bsBack.emit() }, h(ArrowLeftIcon, { key: '001d13bd7b0d186aa4335272e1f3705dd31c09e2' }))), h("div", { key: '97f89eaf3d7c6411c290697df525ff46d4de3597', part: "title", class: { 'bs-page-header__title': true, 'bs-page-header__title--controls': this.back || this.favoritable } }, h(`h${level}`, { part: 'heading', class: { 'bs-page-header__heading': true } }, this.heading), h("span", { key: '55b632d4c2be435c1377c64a483739ef6c4c1990', part: "status", class: { 'bs-page-header__status': true, 'bs-page-header__empty': !this.slotted.status } }, h("slot", { key: '08960a3d58aff6c5b84439711240b765c057b68c', name: "status", onSlotchange: this.onSlotChange('status') })), this.favoritable && (h("bs-icon-button", { key: '55deea361072d0cf1042a9db56c6c6c71fe8fcca', part: "favorite", class: "bs-page-header__favorite", variant: "subtle", size: "sm", ariaLabel: this.favoriteLabel, pressed: this.favorite, onClick: this.onFavoriteClick }, this.favorite ? h(StarFillIcon, null) : h(StarIcon, null)))), h("div", { key: 'bf050e21ca626669cfb8df020bcc958d2e161d16', part: "meta", class: { 'bs-page-header__meta': true, 'bs-page-header__empty': !showMeta } }, h("slot", { key: '2626ea276e9a97d13415a61f3b7c81c85569a4b3', name: "meta", onSlotchange: this.onSlotChange('meta') }, this.meta))), h("div", { key: 'b893aa531395b189528a8244c1d1fd8b7ea3aecf', part: "actions", class: { 'bs-page-header__actions': true, 'bs-page-header__empty': !this.slotted.actions } }, h("slot", { key: '182d1782edd1a8ea39c261b3171ad09e333005a3', name: "actions", onSlotchange: this.onSlotChange('actions') }))), h("div", { key: '4fbb805c8c59841b893a19aa2ef10a186a1eaee7', part: "tabs", class: { 'bs-page-header__tabs': true, 'bs-page-header__empty': !this.slotted.tabs } }, h("slot", { key: 'fe7bd2aee357dcc1756242b0f270ee7bf9aeee59', name: "tabs", onSlotchange: this.onSlotChange('tabs') })), hasTabs && h("bs-divider", { key: '934d82094f2af340028b58bff79fefb705b7e2c5', part: "divider", class: "bs-page-header__divider", decorative: true })));
     }
     static get is() { return "bs-page-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -92,7 +92,7 @@ export class BsPagination {
     }
     render() {
         const pageList = this.getPageList();
-        return (h("nav", { key: 'e0b7a524e5dee62d3938a5123d442bbed1dc7343', "aria-label": this.navLabel }, h("ul", { key: 'f4f7a7b9fade966be1cfec316f2fd7d9ac6bf07d', part: "list", class: "bs-pagination__list" }, h("li", { key: 'bc4c790a0c8044292226a51a80c1386227216f59', part: "item", class: "bs-pagination__item" }, h("button", { key: '555d5aac5bbe09201113e679dc15c605f73d9c01', part: "prev", type: "button", class: "bs-pagination__control", "aria-label": this.previousLabel, disabled: this.currentPage <= 1, onClick: () => this.goToPage(this.currentPage - 1) }, h("bs-ripple", { key: '3e0b6b85c01e65fef17d58842f8c28e3dbfa735c', part: "ripple", centered: true }), h(ChevronLeftIcon, { key: '73ac62d07eb2291ae51a40d666c6e5584d32114d' }))), pageList.map((item, index) => item === 'ellipsis' ? (h("li", { part: "item", class: "bs-pagination__item", key: `ellipsis-${index}` }, h("span", { part: "ellipsis", class: "bs-pagination__ellipsis", "aria-hidden": "true" }, h(EllipsisIcon, null)))) : (h("li", { part: "item", class: "bs-pagination__item", key: item }, h("button", { part: item === this.currentPage ? 'page current' : 'page', type: "button", class: `bs-pagination__control bs-pagination__page ${item === this.currentPage ? 'bs-pagination__page--current' : ''}`, "aria-label": `${this.pageLabel} ${item}`, "aria-current": item === this.currentPage ? 'page' : undefined, onClick: () => this.goToPage(item) }, h("bs-ripple", { part: "ripple", centered: true }), item)))), h("li", { key: 'a17911f50aef86dbeadeff8b78c9a7bf0ec7af38', part: "item", class: "bs-pagination__item" }, h("button", { key: '222299e7a5037a045e228fdbf37942bb00067d18', part: "next", type: "button", class: "bs-pagination__control", "aria-label": this.nextLabel, disabled: this.currentPage >= this.safeTotalPages, onClick: () => this.goToPage(this.currentPage + 1) }, h("bs-ripple", { key: '7c69b46ac6ee810a733b463090301e277e421f9d', part: "ripple", centered: true }), h(ChevronRightIcon, { key: '2f4a37edd28e4430b25e7b20ee37c0704667ce16' }))))));
+        return (h("nav", { key: '4d0e0678cb546e757076f52dd332353f5dceb89c', "aria-label": this.navLabel }, h("ul", { key: '4c37e78c17484799dee3ab9b8d4b5470f1713d69', part: "list", class: "bs-pagination__list" }, h("li", { key: '46cf1afd5ec8ef00775f6b9f8053633eaa87010f', part: "item", class: "bs-pagination__item" }, h("button", { key: '86995ca4df3985acf8aa982ead66033900aab8b0', part: "prev", type: "button", class: "bs-pagination__control", "aria-label": this.previousLabel, disabled: this.currentPage <= 1, onClick: () => this.goToPage(this.currentPage - 1) }, h("bs-ripple", { key: '4186e24d5b783b39361c1fc3afbee75e762acbac', part: "ripple", centered: true }), h(ChevronLeftIcon, { key: '78390e8caa95e368afc32c46d762e02172e6915e' }))), pageList.map((item, index) => item === 'ellipsis' ? (h("li", { part: "item", class: "bs-pagination__item", key: `ellipsis-${index}` }, h("span", { part: "ellipsis", class: "bs-pagination__ellipsis", "aria-hidden": "true" }, h(EllipsisIcon, null)))) : (h("li", { part: "item", class: "bs-pagination__item", key: item }, h("button", { part: item === this.currentPage ? 'page current' : 'page', type: "button", class: `bs-pagination__control bs-pagination__page ${item === this.currentPage ? 'bs-pagination__page--current' : ''}`, "aria-label": `${this.pageLabel} ${item}`, "aria-current": item === this.currentPage ? 'page' : undefined, onClick: () => this.goToPage(item) }, h("bs-ripple", { part: "ripple", centered: true }), item)))), h("li", { key: '9323263102672c32d82dff25b58858128f8dee52', part: "item", class: "bs-pagination__item" }, h("button", { key: '6cdffee730ece68573a887fa6a498afec2c6ad00', part: "next", type: "button", class: "bs-pagination__control", "aria-label": this.nextLabel, disabled: this.currentPage >= this.safeTotalPages, onClick: () => this.goToPage(this.currentPage + 1) }, h("bs-ripple", { key: '7f32878954accdfba2a3a44389b4a686b09ae95d', part: "ripple", centered: true }), h(ChevronRightIcon, { key: '778e7c931627aafbe460f156130902be945bdcbc' }))))));
     }
     static get is() { return "bs-pagination"; }
     static get encapsulation() { return "shadow"; }

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

@@ -228,7 +228,7 @@ export class BsPopover {
         }
     };
     render() {
-        return (h("div", { key: 'd69fccefc43e1fbf8a2e97dce079634b2113f988', class: "bs-popover" }, h("div", { key: 'b42473957daa2f3db84c59f6da2e391b8387df23', part: "trigger", class: "bs-popover__trigger", onClick: this.onTriggerClick, onKeyDown: this.onTriggerKeyDown }, h("slot", { key: '899294fecb6b2912c3c4f8865893e62ba74cc4fb', name: "trigger", ref: el => (this.triggerSlot = el), onSlotchange: this.syncTriggerAria })), h("div", { key: 'e1e6209b661a16954b9b61586624dea57efa2c08', part: "popup", id: this.popupId, class: "bs-popover__popup", tabindex: "-1", hidden: !this.open && !this.closing, ref: el => (this.popupEl = el) }, h("slot", { key: '22e665b595f9dd2938919da88de45e0016f4a0e2' }))));
+        return (h("div", { key: 'ce6f02434397af383d01cf626f5fa90959a848a7', class: "bs-popover" }, h("div", { key: '6ae450e861221506fb3d585c78c5b9374c34b186', part: "trigger", class: "bs-popover__trigger", onClick: this.onTriggerClick, onKeyDown: this.onTriggerKeyDown }, h("slot", { key: 'e7c496e62d278a8a08a369b424e908e20afe0a73', name: "trigger", ref: el => (this.triggerSlot = el), onSlotchange: this.syncTriggerAria })), h("div", { key: 'f0ac77bd675a740524c071d91801a1a7ae6211c0', part: "popup", id: this.popupId, class: "bs-popover__popup", tabindex: "-1", hidden: !this.open && !this.closing, ref: el => (this.popupEl = el) }, h("slot", { key: 'c76842cf3f034d1985ec4dcff1217e60b2107220' }))));
     }
     static get is() { return "bs-popover"; }
     static get encapsulation() { return "shadow"; }

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

@@ -89,7 +89,7 @@ export class BsPresence {
     }
     render() {
         const preset = PRESETS.includes(this.preset) ? this.preset : 'fade';
-        return (h(Host, { key: '9d25523c831b2851a7fb0f2c012361ddb6726e73', inert: this.active ? undefined : true, "aria-hidden": this.active ? null : 'true' }, h("div", { key: '14726f5a42d6821866737b46f23cd4b103ca5649', part: "content", class: `bs-presence bs-presence--${preset}${this.active ? '' : ' bs-presence--closed'}`, ref: el => (this.shell = el) }, h("div", { key: '35619f949a9e75db1c25ebca2c05d9e629d2ba51', class: "bs-presence__clip", ref: el => (this.clip = el) }, h("slot", { key: '65da3ddd001ae35ae919550b10c1118285bbaffa' })))));
+        return (h(Host, { key: '1df0759e9d2134565616f08ad97bd79b2f0cfcd3', inert: this.active ? undefined : true, "aria-hidden": this.active ? null : 'true' }, h("div", { key: 'f3938c98f3db377b696d6d290583684a17b44d52', part: "content", class: `bs-presence bs-presence--${preset}${this.active ? '' : ' bs-presence--closed'}`, ref: el => (this.shell = el) }, h("div", { key: 'aed0115b7dc4e0dcf6d7ff6b4413a8cb09c7c3ff', class: "bs-presence__clip", ref: el => (this.clip = el) }, h("slot", { key: '82b3089138460f818a1d18561a77c67d155c9ca4' })))));
     }
     static get is() { return "bs-presence"; }
     static get encapsulation() { return "shadow"; }

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

@@ -69,7 +69,7 @@ export class BsProgress {
         const isDeterminate = this.type === 'determinate';
         const value = this.clampedValue;
         const dashOffset = circumference * (1 - value / 100);
-        return (h("div", { key: '187ceff8a1b9d4f0adedaea62de6ac2aeb416d84', part: "container", class: "bs-progress" }, h("div", { key: '89b1434e55d1e431a298a8744a3b3bc2f305f68c', class: "bs-progress__box", style: { width: `${diameter}px`, height: `${diameter}px` }, 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("svg", { class: "bs-progress__ring", width: diameter, height: diameter, viewBox: `0 0 ${diameter} ${diameter}` }, h("circle", { part: "track", class: "bs-progress__track", cx: diameter / 2, cy: diameter / 2, r: radius, "stroke-width": this.strokeWidth, fill: "none" }), h("circle", { part: "arc", class: "bs-progress__arc", cx: diameter / 2, cy: diameter / 2, r: radius, "stroke-width": this.strokeWidth, fill: "none", "stroke-linecap": "round", "stroke-dasharray": circumference, "stroke-dashoffset": dashOffset }))) : (
+        return (h("div", { key: '65b3c545f862919e2106e405fc2f77f1b2fd8db1', part: "container", class: "bs-progress" }, h("div", { key: '9cb0c0c8396a3eb9f06a446172449363af1ff68c', class: "bs-progress__box", style: { width: `${diameter}px`, height: `${diameter}px` }, 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("svg", { class: "bs-progress__ring", width: diameter, height: diameter, viewBox: `0 0 ${diameter} ${diameter}` }, h("circle", { part: "track", class: "bs-progress__track", cx: diameter / 2, cy: diameter / 2, r: radius, "stroke-width": this.strokeWidth, fill: "none" }), h("circle", { part: "arc", class: "bs-progress__arc", cx: diameter / 2, cy: diameter / 2, r: radius, "stroke-width": this.strokeWidth, fill: "none", "stroke-linecap": "round", "stroke-dasharray": circumference, "stroke-dashoffset": dashOffset }))) : (
         // Figma's indeterminate ring is a fading "comet tail" (transparent -> solid color),
         // not a flat-colored partial arc -- SVG has no angular/conic gradient primitive, so a
         // CSS conic-gradient (color varying by angle) + a radial-gradient mask (carving the
@@ -78,7 +78,7 @@ export class BsProgress {
         h("div", { part: "arc", class: "bs-progress__spinner", style: {
                 '--bs-progress-spinner-stroke-width': `${this.strokeWidth}px`,
                 '--bs-progress-spinner-sweep': `${INDETERMINATE_SWEEP_DEGREES}deg`,
-            } }))), isDeterminate && this.showLabel && (h("span", { key: 'be64ef0cb99048d327e42799915544cd5eff1205', part: "label", class: `bs-progress__label bs-progress__label--${this.size}` }, value, "%"))));
+            } }))), isDeterminate && this.showLabel && (h("span", { key: '085949315490ac6febaf59defdb6815d5d7c909a', part: "label", class: `bs-progress__label bs-progress__label--${this.size}` }, value, "%"))));
     }
     static get is() { return "bs-progress"; }
     static get encapsulation() { return "shadow"; }

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: '3573f6a22f8fd305b00e6e6a6cbd956225c84d23', part: "container", class: "bs-progress-linear" }, h("div", { key: 'a5ea4ab901d1d944b279846855b12995f6cb7bed', 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: '5108afa0263e9532864557f284a78e101825e32f', part: "label", class: "bs-progress-linear__label" }, h("slot", { key: 'f11208b6b20dd14946b9c8a115677749d0d4c524' })))));
+        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: '9dcc08a36b53be095268fa035cd353e9b7c41c99', part: "container", class: "bs-qr-code", surface: "base" }, this.closable && (h("bs-icon-button", { key: 'a21cc673270c2c62b45d940f64c0bb699015aea6', part: "close", class: "bs-qr-code__close", variant: "subtle", size: "sm", ariaLabel: this.closeLabel, onClick: () => this.bsClose.emit() }, h("svg", { key: '041c7fa3a28984132b902790be6eb39a705d3264', viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", "stroke-width": "1.6", "stroke-linecap": "round", "aria-hidden": "true" }, h("path", { key: '98674de35512104169431e97649bc3c96503e0f8', d: "M5 5L15 15M15 5L5 15" })))), h("div", { key: '7a23d1ca31ca4783e1dbd38b104d9b03b9005a22', class: "bs-qr-code__body" }, h("div", { key: '6dd6d0b87236d6014a0139cde0eb4f1c49f58b6f', part: "head", class: "bs-qr-code__head" }, h("p", { key: 'daceb6bc02f5222d57d2927646eaf070b7bd2eb8', part: "title", class: "bs-qr-code__title" }, this.heading), this.description && (h("p", { key: '093646862310a7c1e1e69d50ce2fbb3e4a314b4c', part: "description", class: "bs-qr-code__description" }, this.description))), h("div", { key: '1f72b15e61abefa109b2df0fbce25ca2361dc7ad', part: "qr", class: "bs-qr-code__qr" }, h("div", { key: '734ed44250b1c83b06cebadb1a79c4fdab8bd08a', part: "code", class: "bs-qr-code__code" }, h("slot", { key: 'c2387e32896dcff0b40cf6120c9a87288d473e2d', name: "code" }, this.renderMatrix()), h("div", { key: '2201211627ac42a11c353d436133cc130d69fafd', part: "logo", class: { 'bs-qr-code__logo': true, 'bs-qr-code__logo--visible': this.hasLogo } }, h("slot", { key: 'f9951a31812036669bf4a478964b3ebfab6d1de6', name: "logo", onSlotchange: (ev) => (this.hasLogo = ev.target.assignedNodes().length > 0) }))), this.renderOverlay()), this.type === 'payment' && this.amount && (h("div", { key: '13f499cb0d56c35f86dfd068e576d61ea2e7780f', part: "amount", class: "bs-qr-code__amount" }, this.amountLabel && h("p", { key: 'ac7fa6ac5d9367812f679c8d43a5abdb65b07bbb', class: "bs-qr-code__amount-label" }, this.amountLabel), h("p", { key: '93d93733c7fa87f8def870f000b713347b0c991c', class: "bs-qr-code__amount-value" }, this.amount))), this.type === 'default' && this.url && (h("div", { key: '6ba70952dc39ec3feb3e1e93bcdbddad1ae0502d', part: "url", class: "bs-qr-code__url" }, this.url)), this.expiry && (h("bs-chip-informative", { key: '9a010954e75bee6c336aa252497309774d99b186', part: "expiry", size: "md" }, h(TimerIcon, { key: 'b8e4be04e71c93ce27c0ce62e33414d83a710d45', slot: "icon" }), this.expiry)), showActions && (h("div", { key: '6f3c1a0894ddf3dad11981fae385fd5f8e8c1c22', part: "actions", class: "bs-qr-code__actions" }, !this.hideDownload && (h("bs-button", { key: '6fcc1e9e93b22ce2a71195e471fc0283eba308ae', part: "download", variant: interactive ? 'outlined' : 'primary', size: buttonSize, disabled: !interactive, onClick: () => interactive && this.bsDownload.emit() }, h(DownloadIcon, { key: 'c8f881995f35bba01785f8c170625857c24c1a62', slot: "icon" }), this.downloadLabel)), !this.hideCopy && (h("bs-button", { key: 'd0277646f40e5703dafa7d526d873c1f68506396', part: "copy", variant: interactive ? 'outlined' : 'primary', size: buttonSize, disabled: !interactive, onClick: () => interactive && this.onCopy() }, h(CopyIcon, { key: 'e4e0c6bd298beba16a1f60c11a0cbecff494a972', 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: '1dfd58a24e299fe2a26e16dbfeb7d7246b7ae061', class: `bs-radio ${this.disabled ? 'bs-radio--disabled' : ''}` }, h("input", { key: '3fd3733f26e706e37721bc7e5444aeba2f9ca635', 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: 'c3a5a1e790748393f384525413a4cf59be9d1885', class: "bs-radio__hit-area" }, h("bs-ripple", { key: '20b0b6b017644e259a3935ab88b9a512ea9471b7', part: "ripple", class: "bs-radio__ripple", centered: true, triggerSelector: ".bs-radio", disabled: this.disabled }), h("span", { key: '0bed296533c97c2e94260969a5486c76b905e205', class: "bs-radio__state-layer" }, h("span", { key: 'a8f71a9aecdaff2329d3179de0d37797c53a79d6', part: "circle", class: `bs-radio__circle ${this.checked ? 'bs-radio__circle--selected' : ''}` }, this.checked && h("span", { key: '0409d98b080ac54541353068548d149fb22e0dba', part: "dot", class: "bs-radio__dot" })))), h("span", { key: 'ce380ae5ab8ccb1b0b033d04095bb53dd2090be4', part: "label", class: "bs-radio__label" }, h("slot", { key: '39b83b5fd4a2337379cfbba0dd931a93e9c379e3' }))));
+        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: 'c7083540ebf734f8b78a3ee20480e32d5448f2d2', 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: '604f60844e305a5057f42e2cebbf5ec80d04952d', id: labelId, part: "label", class: "bs-radio-group__label" }, this.label, this.required && h("span", { key: '196ce4747d209610f45afe5eabc1d629220e9560', "aria-hidden": "true" }, " *"))), h("div", { key: 'b3c30a8aa04a56227033d76f905166a7c556ed4a', part: "options", class: "bs-radio-group__options" }, h("slot", { key: '70f9d26d4c52ce386a3c25fe9ca7297fe49ea77c', onSlotchange: this.onSlotchange })), note && (h("span", { key: '9252a1a05bfe98719612aac2a6ff5c72ddff7621', 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: '7a50bc82ef24d834acb7158e7b63ff688eb7972b', "aria-hidden": "true" }, h("div", { key: 'f20c8ceacc9b68569c1845f82922f5af74146d4c', 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: 'd06ef043c3fa15df8d3adf3ff62b105dcef5dc1d', 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: 'a9dbae40775340f256d9ac2dd54c43f7144dda41', part: "ripple" }), h("span", { key: '2b80eb34ad0901c6e179770807cca6cd306acd25', part: "icon", class: { 'bs-search-item__icon': true, 'bs-search-item__icon--hidden': !this.hasIcon } }, h("slot", { key: '7fc3bef2ba29179b425b2f470c61b6c70dae01a2', name: "icon", onSlotchange: this.slotFilled(v => (this.hasIcon = v)) })), h("span", { key: '67481270ed566846d87cf12325db53d44f2230d1', part: "content", class: "bs-search-item__content" }, h("span", { key: 'e5993e5796e55fcf03def1d33787fe43a8b652f6', part: "label", class: "bs-search-item__label" }, h("slot", { key: '8aab4906967341b2938a5ec5ecab5794139a4acf' })), h("span", { key: '8a9453d5303e6b89c3abef8864e536726cea9906', part: "description", class: { 'bs-search-item__description': true, 'bs-search-item__description--hidden': !this.hasDescription } }, h("slot", { key: '7f2ef31966d836fbef03d5e4610263081cab87b5', name: "description", onSlotchange: this.slotFilled(v => (this.hasDescription = v)) }))), h("span", { key: 'fcac22f41850199ef148124f9ddbdb3b687418a9', part: "trailing", class: { 'bs-search-item__trailing': true, 'bs-search-item__trailing--hidden': !this.hasTrailingSlot && !this.trailing } }, h("slot", { key: '19167fcf2502d2a16f36f3620f3257a3cd5f5cf3', 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: 'b966bfa9b43400d8e96ea994e4899690f41a3b25', class: `bs-select ${this.error ? 'bs-select--error' : ''}` }, this.label && (h("span", { key: 'e5b3827d0e15beacd42b13c1e02bbb5b8eec724f', part: "label", id: labelId, class: "bs-select__label", onClick: () => !this.disabled && this.fieldEl?.focus() }, this.label, this.required && (h("span", { key: '69edf6965f73dd1380bebf7ce6a19d2d3456c495', class: "bs-select__required", "aria-hidden": "true" }, "*")))), h("div", { key: '3f66523ef85b2274c60775bd3700649551fb1777', class: "bs-select__wrapper" }, h("div", { key: 'e234bc7060b6f121ca4425d5359ec74221626418', 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: '800c4eff295238e60c2cb976e2118d968cd30851', part: "value", class: `bs-select__value ${selected ? '' : 'bs-select__value--placeholder'}` }, selected ? selected.label : this.placeholder), h("svg", { key: 'cfa09749f81c702957b7bc45f1f418f0d90c4eb8', part: "icon", class: "bs-select__chevron", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: 'b166df87f7112440d1adea4c07ef7a3ec08ea59d', d: "M4 6L8 10L12 6", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("ul", { key: '883dc5c400045f43c40faad9b1113f3fd479e2e4', 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.' },