@brandsync/wc 1.20.1 → 1.22.0

package/dist/collection/components/bs-citation-preview/bs-citation-preview.js

@@ -38,7 +38,7 @@ export class BsCitationPreview {
     bsOpen;
     render() {
         const hasPage = this.page !== undefined && this.page !== null && this.page !== '';
-        return (h("bs-card", { key: 'c4198a9c562b4ce627f15e12796f5d72d44cd9a2', part: "container", class: "bs-citation-preview", surface: "base" }, h("div", { key: '33d193ce63ea5e0234a2a3dcd6e39cd3c119aa76', class: "bs-citation-preview__body" }, h("bs-source-link", { key: '38929a73cc1b795f33980bc09408ba41ab745701', part: "header", fileName: this.fileName, sourceName: this.sourceName, href: this.href, onBsOpen: () => this.bsOpen.emit() }), h("div", { key: '0d90d721c18c3adc62c594f7df5248308f23795d', part: "snippet", class: "bs-citation-preview__snippet" }, h("slot", { key: 'cf3b1b80d2c97f7f637babda7461d2b2559c2bad' })), h("div", { key: 'fe56a067454031faefa8bc2ef78f46c5f5abd8b7', class: "bs-citation-preview__footer" }, h("slot", { key: '142c1774ca2f6e4282fdf9edf8d6b1cd77158120', name: "footer" }, hasPage && (h("span", { key: '89b4fe38e813d7d88c00b4c19a8ca892eaa73ddb', part: "page", class: "bs-citation-preview__page" }, "Page ", this.page)))))));
+        return (h("bs-card", { key: '4cd2544f4f2432c805caa775406c96dae7561452', part: "container", class: "bs-citation-preview", surface: "base" }, h("div", { key: '6d71dc9004e751fca3cd0d2af1d480f812e1bb9c', class: "bs-citation-preview__body" }, h("bs-source-link", { key: 'c089f659de271f201cbedb3b1661f11cad7daabb', part: "header", fileName: this.fileName, sourceName: this.sourceName, href: this.href, onBsOpen: () => this.bsOpen.emit() }), h("div", { key: '3010095752fb0cb0e695c12c378893b4973ec556', part: "snippet", class: "bs-citation-preview__snippet" }, h("slot", { key: '04c9331812a9b9e23c0cd9eb08e52c516a0f4156' })), h("div", { key: '10d6028902c212b166810b0ef8f79e04a863d59b', class: "bs-citation-preview__footer" }, h("slot", { key: '90108dc123a1b105e81094999660b768083edcbd', name: "footer" }, hasPage && (h("span", { key: '2f3f69d2ea1b59cde085cadc737d38c655b9b1db', part: "page", class: "bs-citation-preview__page" }, "Page ", this.page)))))));
     }
     static get is() { return "bs-citation-preview"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-command-palette/bs-command-palette.js

@@ -393,7 +393,7 @@ export class BsCommandPalette {
         const sections = this.shownSections().filter(s => this.filled[s]);
         const hasList = sections.length > 0;
         const showResults = loading || empty || hasList;
-        return (h("dialog", { key: 'd06cdefa922bb8a64cd772f193d1fa74fbb22f37', ref: el => (this.dialogEl = el), part: "dialog", class: "bs-command-palette", "aria-label": this.label, "aria-modal": "true", role: "dialog", onCancel: this.onCancel, onClose: () => this.open && this.setOpen(false), onClick: this.onDialogClick, onKeyDown: this.onDialogKeyDown }, h("div", { key: '0b6984201d7d83193e2b5e01d9cb877c8739f277', part: "panel", class: "bs-command-palette__panel" }, h("div", { key: 'ca8de39945a16582770e5e779d8fcd4bbdd42cf7', part: "search", class: "bs-command-palette__search" }, this.scopeLabel && (h("bs-chip-informative", { key: '90521a09ef55ac7c861646650293c0eac56e554b', class: "bs-command-palette__scope", color: "info" }, this.scopeLabel)), h("div", { key: 'f7cbe1a490c1ca4ad5516f164768443c28ff3efb', class: "bs-command-palette__field", ref: el => (this.comboEl = el), role: "combobox", "aria-label": this.placeholder, "aria-expanded": String(hasList), "aria-haspopup": "listbox", "aria-controls": hasList ? listId : undefined, onKeyDown: this.onKeyDown }, h("bs-input", { key: '698efbfc139c6e2660969420be7c166d0d6e7953', part: "input", ref: el => (this.inputEl = el), type: "search", value: this.value, placeholder: this.placeholder, onBsInput: this.onInput })), h("span", { key: '8bcae63dbfd913b0135c114782b4928c33d05ed6', class: "bs-command-palette__esc", "aria-hidden": "true" }, h("bs-key", { key: 'a2c958b98e4ee3ee1ba7e09cc5f0d1434c418e59', label: "Esc" }))), showResults && h("div", { key: '86be7cd95d0784de6620ac58688ba50898d34683', class: "bs-command-palette__divider", role: "presentation" }), showResults && (h("div", { key: '22511eee60186fdbe1c77018f910883e0e475d57', part: "results", class: "bs-command-palette__results", "aria-busy": String(loading), onMouseOver: this.onResultsMouseOver }, loading && (h("div", { key: 'ba3ad0ee5b52d4149df64b6025cb9a1a5ef05146', class: "bs-command-palette__loading", role: "status" }, h("bs-spinner", { key: '622094750110baec93176714b79fbe5fb984de9a', size: "sm" }), h("span", { key: 'db0d4c37dd97cf62d8e525ef72e237a464fc3614' }, this.loadingLabel))), empty && this.renderEmpty(), hasList && (h("div", { key: '532af3ce4bcc8c70994abcd69d807ff9a180ee44', id: listId, class: "bs-command-palette__list", role: "listbox", "aria-label": this.listLabel }, sections.map(s => this.renderSection(s)))))), this.showFooter && this.renderFooter()), h("span", { key: 'b27ff78735f3c4ed712ef187cf161c9f7a36bdd9', class: "bs-command-palette__live", "aria-live": "polite" }, this.announcement())));
+        return (h("dialog", { key: '14f738dbfc997dd3a0e5c763659198ff4bb95529', ref: el => (this.dialogEl = el), part: "dialog", class: "bs-command-palette", "aria-label": this.label, "aria-modal": "true", role: "dialog", onCancel: this.onCancel, onClose: () => this.open && this.setOpen(false), onClick: this.onDialogClick, onKeyDown: this.onDialogKeyDown }, h("div", { key: '2763bfb126b06706973e82411a50d81186398660', part: "panel", class: "bs-command-palette__panel" }, h("div", { key: '662b84e505270a77b519b2ba44869b39ded8b118', part: "search", class: "bs-command-palette__search" }, this.scopeLabel && (h("bs-chip-informative", { key: '129c0e4b8d442c47fcdb63c706e6a8afd204d15b', class: "bs-command-palette__scope", color: "info" }, this.scopeLabel)), h("div", { key: '2df2f5b194a3089af079e13b42146cc6042fed7d', class: "bs-command-palette__field", ref: el => (this.comboEl = el), role: "combobox", "aria-label": this.placeholder, "aria-expanded": String(hasList), "aria-haspopup": "listbox", "aria-controls": hasList ? listId : undefined, onKeyDown: this.onKeyDown }, h("bs-input", { key: '9bbb0fb5338b4a897c01becd9c06c19537abd4ea', part: "input", ref: el => (this.inputEl = el), type: "search", value: this.value, placeholder: this.placeholder, onBsInput: this.onInput })), h("span", { key: '1fb9c6bf593b2bd2a3d86f5fef51119fc76ad545', class: "bs-command-palette__esc", "aria-hidden": "true" }, h("bs-key", { key: '37fbede6ae45c725e6b3097a3cdd8a3985f0b7ee', label: "Esc" }))), showResults && h("div", { key: '99b59b7f2ac6762f5a638dd084420332bbe95391', class: "bs-command-palette__divider", role: "presentation" }), showResults && (h("div", { key: '18a22c3d45ec4c84990ca9a87fb3cf76ccdb7552', part: "results", class: "bs-command-palette__results", "aria-busy": String(loading), onMouseOver: this.onResultsMouseOver }, loading && (h("div", { key: 'c4246fa469a4bd9556db418cea6f763630d0907a', class: "bs-command-palette__loading", role: "status" }, h("bs-spinner", { key: 'f7658c22dceb48bc4c4f1265b7f4618ace5e12a7', size: "sm" }), h("span", { key: '03bf1c7a43b99d45cd8630f1dc628f258583a4a6' }, this.loadingLabel))), empty && this.renderEmpty(), hasList && (h("div", { key: '10af576c2d8ae003e372bc1d60d1c399c8bd40b5', id: listId, class: "bs-command-palette__list", role: "listbox", "aria-label": this.listLabel }, sections.map(s => this.renderSection(s)))))), this.showFooter && this.renderFooter()), h("span", { key: '5f078c4477ccabd8620bc67de7a0c071987416f3', class: "bs-command-palette__live", "aria-live": "polite" }, this.announcement())));
     }
     static get is() { return "bs-command-palette"; }
     static get encapsulation() { return "shadow"; }

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

@@ -27,7 +27,7 @@ export class BsCompactMenuBlock {
     name;
     render() {
         const common = { part: 'container', class: 'bs-compact-menu-block' };
-        return (h("button", { key: 'dfa6cc91f9a1d77f77d9b8ca116f048f73f7347f', ...common, type: "button" }, this.name));
+        return (h("button", { key: 'ef2215a64dfd1aa73db75b5352a9caa564978802', ...common, type: "button" }, this.name));
     }
     static get is() { return "bs-compact-menu-block"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-company-switcher/bs-company-switcher.js

@@ -234,10 +234,10 @@ export class BsCompanySwitcher {
         const empty = !!this.q && groups.length === 0;
         const listId = `${this.id}-listbox`;
         const total = groups.reduce((n, g) => n + g.items.length, 0);
-        return (h("bs-popover", { key: '5980bccab6835ad9384ba9314e35f0013053d2c9', class: "bs-company-switcher", open: this.open, placement: "bottom-start", onBsOpenChange: this.onPopoverOpenChange }, this.renderTrigger(), h("bs-card", { key: '6afff3828ecd224660d171514c23e7b3ca30f7ee', part: "panel", class: "bs-company-switcher__panel", surface: "base" }, h("div", { key: 'a046f869f51c0024e26efabf572dff82a8e2f787', class: "bs-company-switcher__search", onMouseDown: (ev) => ev.preventDefault() }, h("div", { key: '9cbdbdc07a5c673c21bb2af85d0e22d941278cc7', part: "search", role: "combobox", "aria-label": this.searchPlaceholder, "aria-expanded": groups.length ? 'true' : 'false', "aria-haspopup": "listbox", "aria-controls": groups.length ? listId : undefined, "aria-activedescendant": this.activeId ?? undefined, onKeyDown: this.onKeyDown }, h("bs-input", { key: 'd48151ab5c7b3c52bd5272b276ed65b050ba8a86', ref: el => (this.inputEl = el), type: "search", value: this.query, placeholder: this.searchPlaceholder, onBsInput: this.onInput }))), groups.length > 0 && (h("div", { key: 'd7cbca7fbfea209e5063e997e0277e72833bae6e', id: listId, part: "list", class: "bs-company-switcher__list", role: "listbox", "aria-label": this.listLabel, onMouseDown: (ev) => ev.preventDefault(), onMouseLeave: () => (this.activeId = null) }, groups.map(g => {
+        return (h("bs-popover", { key: 'b0eec2cc5ce7574933ef80e1fd8a6faf8ca340cb', class: "bs-company-switcher", open: this.open, placement: "bottom-start", onBsOpenChange: this.onPopoverOpenChange }, this.renderTrigger(), h("bs-card", { key: '0f68df42724c5b4561c991ffe0fab1571292472a', part: "panel", class: "bs-company-switcher__panel", surface: "base" }, h("div", { key: '03bcc888d4dbef3d18e58ac12953e0cfdcafc219', class: "bs-company-switcher__search", onMouseDown: (ev) => ev.preventDefault() }, h("div", { key: 'b1e9a44d67ed0237a0860285cb766b9f0ceaa8b0', part: "search", role: "combobox", "aria-label": this.searchPlaceholder, "aria-expanded": groups.length ? 'true' : 'false', "aria-haspopup": "listbox", "aria-controls": groups.length ? listId : undefined, "aria-activedescendant": this.activeId ?? undefined, onKeyDown: this.onKeyDown }, h("bs-input", { key: '33f3b85bcbe1b4e5e999d8b71a4699165e94c6db', ref: el => (this.inputEl = el), type: "search", value: this.query, placeholder: this.searchPlaceholder, onBsInput: this.onInput }))), groups.length > 0 && (h("div", { key: 'ca4ea82856f25a754d9da32b3bea39172e98d07c', id: listId, part: "list", class: "bs-company-switcher__list", role: "listbox", "aria-label": this.listLabel, onMouseDown: (ev) => ev.preventDefault(), onMouseLeave: () => (this.activeId = null) }, groups.map(g => {
             const hid = `${this.id}-h-${g.key}`;
             return (h("div", { part: "group", class: "bs-company-switcher__group", role: "group", "aria-labelledby": hid }, h("div", { part: "group-header", id: hid, class: "bs-company-switcher__group-header" }, g.header), g.items.map(c => this.renderRow(c))));
-        }))), empty && (h("bs-empty-state", { key: '5dbff2f753d480fb8e3633ceed77ee4b746e96af', part: "empty", class: "bs-company-switcher__empty", heading: this.emptyHeading.replace('{query}', this.query.trim()), description: this.emptyDescription }, h("svg", { key: 'b179aa273060b4f8b2c4e07844d6616f33f3985d', slot: "icon", ...svgProps }, h("circle", { key: 'd48847aaaea92eb7e6af0c39285cfa445f508114', cx: "11", cy: "11", r: "7" }), h("path", { key: '9b5f6c641c50a6d280c149da5f70871ee2d85032', d: "m20 20-3.5-3.5" })))), h("bs-divider", { key: '25bee440e7b15f68b3f451ef669c2efaae26c400', class: "bs-company-switcher__divider", decorative: true }), h("div", { key: '2c29e55970179036fc837352f5112bbc5b3b5429', part: "footer", class: "bs-company-switcher__footer" }, h("bs-button", { key: '34a9b9188c87c2c335a7eaf96fd3e0b445d1f374', variant: "subtle", size: "sm", onClick: () => this.bsManageCompanies.emit() }, h("svg", { key: '14277686d69b74c005f62ce0d483b1f6ef70ee7e', slot: "icon", ...svgProps }, h("circle", { key: '98423b978ae2ba9d0b8e17892d6269d2baf005e1', cx: "12", cy: "12", r: "3" }), h("path", { key: 'b61815c0f8c56ca6dd9de05d5d5b58738648a08d', d: "M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z" })), this.manageLabel), h("bs-button", { key: '4c83a67e7f54352e839b84b23a4aeb3b74ea26af', variant: "subtle", size: "sm", onClick: () => this.bsAddCompanies.emit() }, h("svg", { key: 'e504aeb192774bd8093e04c0795bd3ab700596a8', slot: "icon", ...svgProps }, h("path", { key: '0806d38b7b739308432dff3f71696cd92923f4ca', d: "M12 5v14M5 12h14" })), this.addLabel)), h("span", { key: 'e7ef671da5d9ac2431cd8f27dcc30985046946ac', class: "bs-company-switcher__live", "aria-live": "polite" }, this.open && this.q ? (empty ? this.emptyHeading.replace('{query}', this.query.trim()) : `${total} ${total === 1 ? this.matchLabel : this.matchesLabel}`) : ''))));
+        }))), empty && (h("bs-empty-state", { key: '9d0612d45e3f7e34615a4df33af90898c8f42ad4', part: "empty", class: "bs-company-switcher__empty", heading: this.emptyHeading.replace('{query}', this.query.trim()), description: this.emptyDescription }, h("svg", { key: '269c8cb9cab9e5f1c0f0f46661e2ebb780c35767', slot: "icon", ...svgProps }, h("circle", { key: 'edff5845828ee02a4ca233173d64d305e3a0fff3', cx: "11", cy: "11", r: "7" }), h("path", { key: 'fe598787496866fd7d922609ce5633708f20c8ff', d: "m20 20-3.5-3.5" })))), h("bs-divider", { key: '97a3536b4d4a76ab83e072b69c14a093f8456d14', class: "bs-company-switcher__divider", decorative: true }), h("div", { key: '1b2946a19574798829e4aa2a41741e73158963dd', part: "footer", class: "bs-company-switcher__footer" }, h("bs-button", { key: '4802d08ecbe212ea674205485b5676c2f97c195e', variant: "subtle", size: "sm", onClick: () => this.bsManageCompanies.emit() }, h("svg", { key: '6b4458e279e9f15094dd28e0c394111ab98cf4fe', slot: "icon", ...svgProps }, h("circle", { key: 'd23a66a7b4142c5f5d370b194824b573e667bb4f', cx: "12", cy: "12", r: "3" }), h("path", { key: '76f4741d079f3c3cfd8f18c03c61e88aa2b47196', d: "M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z" })), this.manageLabel), h("bs-button", { key: '347c34917288e15a461f3d16eaac077c454d968d', variant: "subtle", size: "sm", onClick: () => this.bsAddCompanies.emit() }, h("svg", { key: '6d701ae30b07de092d93b700d264bbaee166a721', slot: "icon", ...svgProps }, h("path", { key: '2ec0699033facd45aae07a3926db0ccf4113d40f', d: "M12 5v14M5 12h14" })), this.addLabel)), h("span", { key: 'bc4cc1dd886ab4a06afce21fdb670a1fdf46181e', class: "bs-company-switcher__live", "aria-live": "polite" }, this.open && this.q ? (empty ? this.emptyHeading.replace('{query}', this.query.trim()) : `${total} ${total === 1 ? this.matchLabel : this.matchesLabel}`) : ''))));
     }
     static get is() { return "bs-company-switcher"; }
     static get encapsulation() { return "shadow"; }

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

@@ -234,7 +234,7 @@ export class BsComposer {
         const placeholder = this.placeholder ?? DEFAULT_PLACEHOLDERS[this.variant];
         const disabled = this.state === 'disabled';
         const recording = this.state === 'recording';
-        return (h("div", { key: '416af7040863eddb84e74ebb4148cb4faada3675', class: `bs-composer bs-composer--${this.state} bs-composer--${this.variant}` }, h("div", { key: '2d8c75e0c5ad5302095ff5b51b5c665f6c3c1714', part: "attachments", class: `bs-composer__attachments-row ${this.hasAttachments ? 'bs-composer__attachments-row--visible' : ''}` }, h("slot", { key: 'd967bd26e1e417b099619697050a96a53025b1db', name: "attachments", onSlotchange: this.onAttachmentsSlotchange })), h("div", { key: '34c6123ba8cb5bce5e62b3832be0ce8a817a38af', class: "bs-composer__text-row" }, h("textarea", { key: '844bd0b04b04ea5e770b03a95b65e6f49af57a33', ref: el => (this.inputEl = el), part: "input", class: "bs-composer__input", rows: 1, value: this.value, placeholder: placeholder, disabled: disabled, maxLength: this.maxLength, "aria-label": this.ariaLabel, onInput: this.onInput, onKeyDown: this.onInputKeydown })), h("div", { key: '4683c6ed4feb2d41f0fb945db3f387c8a102a740', class: "bs-composer__controls-row" }, !this.hideAttach && (h("button", { key: 'df65b9e140f61740ac341ae4d609863661720122', type: "button", part: "attach", class: "bs-composer__attach", "aria-label": this.attachLabel, onClick: this.onAttachClick }, h(PlusIcon, { key: '1d0d5b0b7a1bfa32720c814c80a0320c2198e8b1' }))), recording ? (h("span", { class: "bs-composer__waveform", "aria-hidden": "true" }, WAVEFORM_BAR_HEIGHTS.map(height => (h("span", { class: "bs-composer__waveform-bar", style: { '--bs-composer-bar-height': `${height}px` } }))))) : (h("span", { class: "bs-composer__spacer" })), !this.hideMic && (h("button", { key: '0512fbc4c613b090bac142bf8fc2ee13e65b2a98', type: "button", part: "mic", class: `bs-composer__mic ${recording ? 'bs-composer__mic--recording' : ''}`, "aria-label": recording ? this.stopRecordingLabel : this.micLabel, disabled: disabled, onClick: this.onMicClick }, recording ? h(StopIcon, null) : h(MicIcon, null))), h("button", { key: 'd0652637c61e950df6b2f385de679d8c59e6d1fb', type: "button", part: "action", class: `bs-composer__action bs-composer__action--${this.state}`, "aria-label": this.actionLabel(), disabled: disabled, "aria-busy": this.loading && this.state === 'idle' ? 'true' : undefined, onClick: this.onActionClick }, this.renderActionIcon()), h("slot", { key: '765a453bf75e9d6030f0552cd7b2d12ff8951a6d', name: "actions-end" }))));
+        return (h("div", { key: '1b2b2a80e3cc3838921c2353f94142c43136ea96', class: `bs-composer bs-composer--${this.state} bs-composer--${this.variant}` }, h("div", { key: 'ab827001a719251a3844d228cae2f3e2ad44646f', part: "attachments", class: `bs-composer__attachments-row ${this.hasAttachments ? 'bs-composer__attachments-row--visible' : ''}` }, h("slot", { key: 'e9daab24f2e008325532e6ea284aff78fe850574', name: "attachments", onSlotchange: this.onAttachmentsSlotchange })), h("div", { key: '175b60b706ea6aae20734169ca5f9a84cf34de39', class: "bs-composer__text-row" }, h("textarea", { key: 'b765186c7fb867799e241e85293caed2e491fc25', ref: el => (this.inputEl = el), part: "input", class: "bs-composer__input", rows: 1, value: this.value, placeholder: placeholder, disabled: disabled, maxLength: this.maxLength, "aria-label": this.ariaLabel, onInput: this.onInput, onKeyDown: this.onInputKeydown })), h("div", { key: 'f539b712f3bc7cc0b289f0ffee0ae00f58bba243', class: "bs-composer__controls-row" }, !this.hideAttach && (h("button", { key: 'e8ca8c173d62e4457516177c738af39039c14757', type: "button", part: "attach", class: "bs-composer__attach", "aria-label": this.attachLabel, onClick: this.onAttachClick }, h(PlusIcon, { key: 'b505c8cfff359c592a6e83d27a390378b602c1e7' }))), recording ? (h("span", { class: "bs-composer__waveform", "aria-hidden": "true" }, WAVEFORM_BAR_HEIGHTS.map(height => (h("span", { class: "bs-composer__waveform-bar", style: { '--bs-composer-bar-height': `${height}px` } }))))) : (h("span", { class: "bs-composer__spacer" })), !this.hideMic && (h("button", { key: 'a3602320e85c453e479275b0e1871f257f13c940', type: "button", part: "mic", class: `bs-composer__mic ${recording ? 'bs-composer__mic--recording' : ''}`, "aria-label": recording ? this.stopRecordingLabel : this.micLabel, disabled: disabled, onClick: this.onMicClick }, recording ? h(StopIcon, null) : h(MicIcon, null))), h("button", { key: 'afa647554fba93f413c5b715f936909a3a916164', type: "button", part: "action", class: `bs-composer__action bs-composer__action--${this.state}`, "aria-label": this.actionLabel(), disabled: disabled, "aria-busy": this.loading && this.state === 'idle' ? 'true' : undefined, onClick: this.onActionClick }, this.renderActionIcon()), h("slot", { key: '4a888c18430a3cf8facc21ac23e2e1867261bada', name: "actions-end" }))));
     }
     static get is() { return "bs-composer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -113,7 +113,7 @@ export class BsComposerStatusBanner {
         return this.type === 'error' || this.type === 'warning' ? h(WarningIcon, null) : h(ClockIcon, null);
     }
     render() {
-        return (h("div", { key: '4173ee7cafd8b0a9de1c42726f34603c0ea6a077', role: this.roleForType(), "aria-busy": this.loading ? 'true' : undefined, class: `bs-composer-status-banner bs-composer-status-banner--${this.type}` }, h("div", { key: '7e942c33c06a1a806533571f613ddb8a78f8fbea', class: "bs-composer-status-banner__message-group" }, this.showIcon && (h("span", { key: '3de54acd3358d58a92ab78e8d1414a12a26a7425', part: "icon", class: "bs-composer-status-banner__icon" }, h("slot", { key: '15ad484ca165d4b22b36ee060c74ba8dd7ea6c1c', name: "icon" }, this.renderDefaultIcon()))), h("p", { key: '85334062e6ca408cfbcb2d7bedbfdc13b386966a', part: "message", class: "bs-composer-status-banner__message" }, this.message)), this.showButton && (h("button", { key: 'a045fcb54035c3b99c9fc4fc1e0d6de0f23ebf65', type: "button", part: "action", class: "bs-composer-status-banner__action", onClick: this.onActionClick }, this.actionLabel)), this.allowClose && (h("button", { key: 'b40d66a3f2f1859d71c72e1de33e8b40391f6d72', type: "button", part: "close", class: "bs-composer-status-banner__close", "aria-label": this.closeLabel, onClick: this.onCloseClick }, h(CloseIcon, { key: '2836eb8a2f2ff9e3f20fe07dd67d7ec7bc184104' })))));
+        return (h("div", { key: '23bdf6951b97e63e25673a612d81469aa1fbd4f6', role: this.roleForType(), "aria-busy": this.loading ? 'true' : undefined, class: `bs-composer-status-banner bs-composer-status-banner--${this.type}` }, h("div", { key: 'b434fe1114e435bbcbf7c80b44bb83b9c770bf28', class: "bs-composer-status-banner__message-group" }, this.showIcon && (h("span", { key: '5f1898ac0068f2f7f509c219660b96972e7a8603', part: "icon", class: "bs-composer-status-banner__icon" }, h("slot", { key: '81eff04aa85683efb4ae5670fb3ea966326d1c9a', name: "icon" }, this.renderDefaultIcon()))), h("p", { key: '6ddb4f8f61df621f18594178eb744adf0cdcc8b1', part: "message", class: "bs-composer-status-banner__message" }, this.message)), this.showButton && (h("button", { key: '1c20e4a587173da03fc78e314f9dac26e01fac07', type: "button", part: "action", class: "bs-composer-status-banner__action", onClick: this.onActionClick }, this.actionLabel)), this.allowClose && (h("button", { key: '91ed4898ddea0e238e15c3b9b66b7a2b9117136b', type: "button", part: "close", class: "bs-composer-status-banner__close", "aria-label": this.closeLabel, onClick: this.onCloseClick }, h(CloseIcon, { key: '91abf65867cfecb458f32e884eb22beb63e71a56' })))));
     }
     static get is() { return "bs-composer-status-banner"; }
     static get encapsulation() { return "shadow"; }

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

@@ -21,7 +21,7 @@ export class BsContainer {
     padding = '300';
     render() {
         const pad = SPACING_TOKENS.includes(String(this.padding)) ? String(this.padding) : '300';
-        return (h(Host, { key: '354c927b3ce1a6958b59ae15f8c6e560cbb828d2', style: { '--bs-container-padding-token': `var(--bs-spacing-${pad})` } }, h("slot", { key: '06c33b3028219e8cd771aceae1253c2239d34432' })));
+        return (h(Host, { key: '3996ed195614e9619afed595fcc751cc243fb9ee', style: { '--bs-container-padding-token': `var(--bs-spacing-${pad})` } }, h("slot", { key: '5bdf2a82ed2a2602a035184e3ba8e09fd46b0eba' })));
     }
     static get is() { return "bs-container"; }
     static get encapsulation() { return "shadow"; }

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

@@ -18,6 +18,15 @@ describe('bs-data-table', () => {
             expect(selectAll.checked).toBe(false);
             expect(selectAll.indeterminate).toBe(false);
         });
+        it('gives each row checkbox an accessible name, configurable via selectRowLabel', async () => {
+            const { root } = await render(h("bs-data-table", { selectable: true, columns: columns, rows: rows }));
+            const rowBoxes = Array.from(root.shadowRoot.querySelectorAll('tbody input[type="checkbox"]'));
+            expect(rowBoxes.length).toBe(rows.length);
+            expect(rowBoxes.every(b => b.getAttribute('aria-label') === 'Select row')).toBe(true);
+            root.selectRowLabel = 'Vælg række';
+            await new Promise(r => setTimeout(r, 50));
+            expect(root.shadowRoot.querySelector('tbody input[type="checkbox"]').getAttribute('aria-label')).toBe('Vælg række');
+        });
         it('does not render a select-all checkbox when not selectable', async () => {
             const { root } = await render(h("bs-data-table", { columns: columns, rows: rows }));
             expect(root.shadowRoot.querySelector('thead input[type="checkbox"]')).toBeNull();

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

@@ -38,6 +38,8 @@ export class BsDataTable {
     sortDirection = 'asc';
     /** Accessible name of the select-all checkbox in the header (when `selectable`). */
     selectAllLabel = 'Select all rows';
+    /** Accessible name of each row's checkbox (when `selectable`). */
+    selectRowLabel = 'Select row';
     selectable = false;
     /** Alternates the row background (even rows use `--bs-data-table-stripe-bg`) so wide tables are
      * easier to scan. Follows dark mode through the token. Row hover still wins. */
@@ -98,11 +100,11 @@ export class BsDataTable {
         }
     }
     render() {
-        return (h("table", { key: '926affd6c90d3f9516167f3f07542913b07d714d', part: "table", class: "bs-data-table" }, h("thead", { key: '9021847d503e03b37536302563b24888e18f64e9', part: "head" }, h("tr", { key: 'af5c3076c3897e4be2e2f3e7e240055dde68d754' }, this.selectable && (h("th", { key: 'db71370df983428f7b699aeeb60372da8d1139bb', class: "bs-data-table__select-col" }, this.rows.length > 0 && (h("input", { key: 'fe9dc0bc55a1ed1433fd3003d277665a875f7d6e', type: "checkbox", "aria-label": this.selectAllLabel, checked: this.selectedIds.size > 0 && this.selectedIds.size === this.rows.length, indeterminate: this.selectedIds.size > 0 && this.selectedIds.size < this.rows.length, onChange: this.onSelectAllChange })))), this.columns.map(column => {
+        return (h("table", { key: 'd24675d99b4bb7070646b7dd8a432d1395737be2', part: "table", class: "bs-data-table" }, h("thead", { key: '6cd20167515acc4b9509a17584b8d6963f73b4d9', part: "head" }, h("tr", { key: 'df8433665b80da7f39c4ee11abe7250827ea0ceb' }, this.selectable && (h("th", { key: 'cfd133dd0044cef743f528ad2b48b7352be4c3d8', class: "bs-data-table__select-col" }, this.rows.length > 0 && (h("input", { key: '930f6e772809bf3250912b78c17364ceda67a9a8', type: "checkbox", "aria-label": this.selectAllLabel, checked: this.selectedIds.size > 0 && this.selectedIds.size === this.rows.length, indeterminate: this.selectedIds.size > 0 && this.selectedIds.size < this.rows.length, onChange: this.onSelectAllChange })))), this.columns.map(column => {
             const isSorted = this.sortColumn === column.key;
             const ariaSort = column.sortable ? (isSorted ? (this.sortDirection === 'asc' ? 'ascending' : 'descending') : 'none') : undefined;
             return (h("th", { part: "header-cell", class: "bs-data-table__header-cell", "aria-sort": ariaSort }, column.sortable ? (h("button", { type: "button", class: "bs-data-table__sort-button", onClick: () => this.onHeaderClick(column) }, column.label, isSorted && h("span", { class: "bs-data-table__sort-indicator" }, this.sortDirection === 'asc' ? ' ▲' : ' ▼'))) : (column.label)));
-        }))), h("tbody", { key: '6985b636936af350a333f768bc43772f18fc34d9', part: "body" }, this.rows.map(row => (h("tr", { part: "row", class: "bs-data-table__row" }, this.selectable && (h("td", { class: "bs-data-table__select-col" }, h("input", { type: "checkbox", checked: this.selectedIds.has(row.id), onChange: ev => this.onRowCheckboxChange(row, ev) }))), this.columns.map(column => this.cellRenderer ? (
+        }))), h("tbody", { key: 'efafea945207fc1c29016ae066e0a2fce3ec5f6e', part: "body" }, this.rows.map(row => (h("tr", { part: "row", class: "bs-data-table__row" }, this.selectable && (h("td", { class: "bs-data-table__select-col" }, h("input", { type: "checkbox", "aria-label": this.selectRowLabel, checked: this.selectedIds.has(row.id), onChange: ev => this.onRowCheckboxChange(row, ev) }))), this.columns.map(column => this.cellRenderer ? (
         // cellRenderer is a developer-supplied, trusted function (JS-property-only, never
         // derived from untrusted input) -- its HTML output is intentionally not escaped,
         // same trust model as React's dangerouslySetInnerHTML.
@@ -232,6 +234,26 @@ export class BsDataTable {
                 "attribute": "select-all-label",
                 "defaultValue": "'Select all rows'"
             },
+            "selectRowLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of each row's checkbox (when `selectable`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "select-row-label",
+                "defaultValue": "'Select row'"
+            },
             "selectable": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -340,7 +340,7 @@ export class BsDatepicker {
             : this.defaultTabbable(days);
         const isInRange = (iso) => !!selectedStart && !!previewEnd && iso > selectedStart && iso < previewEnd;
         const weekdays = this.weekdays();
-        return (h("bs-card", { key: '92780338a3445e50b007a7cb5e3a1c828b4940fc', part: "container", class: "bs-datepicker", surface: "raised" }, h("div", { key: 'b10133e7e8118883ceb26f966374c496c69532a2', class: "bs-datepicker__body" }, this.renderHeader(), h("div", { key: '63b1c50d661dfef4dc08d74ac8755e987a0df351', part: "nav", class: "bs-datepicker__nav" }, h("button", { key: '892a09a63a605846793249823b2665786a861fe8', part: "prev", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.previousLabel, onClick: () => this.moveView(-1) }, h("svg", { key: 'ceca34bacadf2f85807fcdbb232b1cfc8454596e', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: '3e5216c57b9766af6b59d24b5839cfa8ee33ede8', d: "M15 18L9 12L15 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("div", { key: '6d3903664523fad5a42d166192ffbbca6859fc8b', part: "title", class: "bs-datepicker__title", "aria-live": "polite" }, this.titleText()), h("button", { key: '9c0ea361806f4b3bfd41039d3aa67d454f87756f', part: "next", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.nextLabel, onClick: () => this.moveView(1) }, h("svg", { key: 'f2b4a787273c279c7ddc29be6400d862d4bf7f7f', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: '6d9ef54bc661fe49524d0aadb14f5c390f682066', d: "M9 18L15 12L9 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: '92f08374522cdcfcf3becc286e1d6db5b057c0e2', part: "grid", class: "bs-datepicker__grid", role: "grid", "aria-label": this.titleText() }, h("div", { key: 'afe8522de3a56479bd2ca64a4f492564391ede74', class: "bs-datepicker__row", role: "row" }, weekdays.map(w => (h("div", { part: "weekday", class: "bs-datepicker__weekday", role: "columnheader" }, w)))), Array.from({ length: 6 }, (_, r) => {
+        return (h("bs-card", { key: '5dfa1f91fce2714fbaa120c0c159858dd1f22f77', part: "container", class: "bs-datepicker", surface: "raised" }, h("div", { key: 'd5683ce23acd1f07a9c382254d0e39cb7caf0d9a', class: "bs-datepicker__body" }, this.renderHeader(), h("div", { key: 'da658aaa5410916b223708890e3f0d012c297d08', part: "nav", class: "bs-datepicker__nav" }, h("button", { key: '99df9c289bb4a6e5901aabc9ad294122297ecd05', part: "prev", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.previousLabel, onClick: () => this.moveView(-1) }, h("svg", { key: 'db686789ae2ca6a9600bd6477e9b56a50adf722e', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: '99d27b25366ee163c9dda8caeed0630f1c6c6157', d: "M15 18L9 12L15 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("div", { key: '297710ca625a8163abca541ca11b858e61431ee0', part: "title", class: "bs-datepicker__title", "aria-live": "polite" }, this.titleText()), h("button", { key: '26e5b15959adcea0a842f59e85b5bca6bb7ec6a7', part: "next", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.nextLabel, onClick: () => this.moveView(1) }, h("svg", { key: 'bef119a10f7e01e8c58e8fd3690417442528d071', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: 'd6566754ab7cf16f2e82127c594675c906ce6397', d: "M9 18L15 12L9 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: 'c9f559c3ba6c929160801ece12d7ed61cb3cbe4b', part: "grid", class: "bs-datepicker__grid", role: "grid", "aria-label": this.titleText() }, h("div", { key: '214302e6ea6693ba9e4a2e908fa982f0df0d926a', class: "bs-datepicker__row", role: "row" }, weekdays.map(w => (h("div", { part: "weekday", class: "bs-datepicker__weekday", role: "columnheader" }, w)))), Array.from({ length: 6 }, (_, r) => {
             const row = days.slice(r * 7, r * 7 + 7);
             return (h("div", { class: "bs-datepicker__row", role: "row" }, row.map((d, c) => {
                 const iso = toIso(d);

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

@@ -32,7 +32,7 @@ export class BsDescriptionItem {
     /** Set by the parent `bs-description-list`: `stacked` (term above detail) or `horizontal` (side by side). */
     layout = 'stacked';
     render() {
-        return (h("dl", { key: '024107fb73e46aab14097d62e5d9622bf830b5ff', part: "container", class: "bs-description-item" }, h("div", { key: '792dec31c23ba91f2ecb4813b6d8bff44c1fbfb2', class: "bs-description-item__group" }, h("dt", { key: 'c50c7e36dd1c614783cabd10c5b3c41119aff870', part: "term", class: "bs-description-item__term" }, h("slot", { key: '45f3a3f19e0eb5e0a7c6e7b3216a6e97bdd9a021', name: "term" }, this.term)), h("dd", { key: '40fcd3edb99b6239e745bf7ca52a445a01e3630b', part: "description", class: "bs-description-item__description" }, h("slot", { key: '5163c715defebb9a0a124fb915e509d47d870ddc' }, this.description)))));
+        return (h("dl", { key: '40c0899a000b225ecb5332902e9a9f74f54a8caf', part: "container", class: "bs-description-item" }, h("div", { key: '524e64c9808a3aa172854c96466f23719637723e', class: "bs-description-item__group" }, h("dt", { key: '1f7b417f6422fe49b537ce57881a094092e177da', part: "term", class: "bs-description-item__term" }, h("slot", { key: '6f7893e2ca851a7d55aa82cc4f19593db16e9110', name: "term" }, this.term)), h("dd", { key: '861794158a281145f885c5f3990db4506257a4fe', part: "description", class: "bs-description-item__description" }, h("slot", { key: 'ab3ead012e9cd01c5377af5ab05fbf932ffdb0c9' }, this.description)))));
     }
     static get is() { return "bs-description-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -39,7 +39,7 @@ export class BsDescriptionList {
             .forEach(i => (i.layout = this.layout));
     }
     render() {
-        return (h("div", { key: '626f9b04c01bffb558e69260c934484464fbe261', part: "list", class: "bs-description-list", role: "group", "aria-label": this.ariaLabel ?? undefined }, h("slot", { key: 'c895fdcbbbe761f6323b706dcadafe07556a3583', onSlotchange: () => this.sync() })));
+        return (h("div", { key: '05c9e878bf5d7c044f0952194ab139504e18bc37', part: "list", class: "bs-description-list", role: "group", "aria-label": this.ariaLabel ?? undefined }, h("slot", { key: 'e4d5086670583c29bbd5b6d93d49507bd2292aa5', onSlotchange: () => this.sync() })));
     }
     static get is() { return "bs-description-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -28,7 +28,7 @@ export class BsDivider {
         const a11y = this.decorative
             ? { role: 'none', 'aria-hidden': 'true' }
             : { role: 'separator', 'aria-orientation': orientation };
-        return (h(Host, { key: 'bf2c91df3dccb2fc5d546c0d119aebc8c7f9a7b1', ...a11y }, h("div", { key: '9bc6e29a09dcf9240a457a324d24e4dcb659870f', class: "line", part: "line" })));
+        return (h(Host, { key: 'a4b1c9d1ae6166b883923cc4f403e16b6bb77d1e', ...a11y }, h("div", { key: '7a3d216c6cd74f0dc511c27e9c8decdabbffb8a8', class: "line", part: "line" })));
     }
     static get is() { return "bs-divider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -96,7 +96,7 @@ export class BsDropdown {
         this.open = ev.detail;
     };
     render() {
-        return (h("bs-popover", { key: '7b5cb4aea4925c40686923285cff718c7f7de32a', part: "popover", open: this.open, placement: this.placement, onBsOpenChange: this.onPopoverOpenChange }, h("slot", { key: '3956aee129e6e424508b5b9385d282c2782d44a8', name: "trigger", slot: "trigger", onSlotchange: this.syncTrigger, ref: el => (this.triggerSlot = el) }), h("slot", { key: '05d1a35099d008d7ba33334a487f56b3cad3f293' })));
+        return (h("bs-popover", { key: '02bce3b47bd8a7d96b22c9b60b3517802e9b05aa', part: "popover", open: this.open, placement: this.placement, onBsOpenChange: this.onPopoverOpenChange }, h("slot", { key: 'd15d4801ef7d8c15cd22772a83d2658d562ce9e4', name: "trigger", slot: "trigger", onSlotchange: this.syncTrigger, ref: el => (this.triggerSlot = el) }), h("slot", { key: 'b098ecec20a9a3a129f7420634dba01816dc61de' })));
     }
     static get is() { return "bs-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-empty-state/bs-empty-state.js

@@ -68,7 +68,7 @@ export class BsEmptyState {
     render() {
         const level = Math.min(6, Math.max(2, Math.round(Number(this.headingLevel)) || 3));
         const Heading = `h${level}`;
-        return (h("div", { key: '3639ba86bf80fa1bceb453455c0e619739302895', part: "container", class: "bs-empty-state" }, this.hasIllustration ? (h("div", { part: "illustration", class: "bs-empty-state__illustration" }, h("slot", { name: "illustration" }))) : (h("bs-icon-tile", { part: "icon", size: "lg", intent: this.intent }, this.hasIcon && h("slot", { name: "icon" }))), this.heading && (h(Heading, { key: '18d951ff64f7ced418f4943c7827539bf07c994a', part: "heading", class: "bs-empty-state__heading" }, this.heading)), (this.description || this.hasDescriptionSlot) && (h("p", { key: '010e3f521741a0f2ba2ed314f87165c1b3d3b384', part: "description", class: "bs-empty-state__description" }, this.hasDescriptionSlot ? h("slot", null) : this.description)), this.hasAction && (h("div", { key: '53d8df33337004dd2a0ae9153c8603c37c2750e9', part: "action", class: "bs-empty-state__action" }, h("slot", { key: '167f4b5ac23b721a489cdf0051b8a2bf151b9bc0', name: "action" })))));
+        return (h("div", { key: 'ffdf706be4116dc017712d0e8224ae0ac19fdd86', part: "container", class: "bs-empty-state" }, this.hasIllustration ? (h("div", { part: "illustration", class: "bs-empty-state__illustration" }, h("slot", { name: "illustration" }))) : (h("bs-icon-tile", { part: "icon", size: "lg", intent: this.intent }, this.hasIcon && h("slot", { name: "icon" }))), this.heading && (h(Heading, { key: '5b0787b3afdc2792aaf198eda2c22c2d918f7743', part: "heading", class: "bs-empty-state__heading" }, this.heading)), (this.description || this.hasDescriptionSlot) && (h("p", { key: 'b8f23d2049e1c451c6ebf058479776d7620b30c6', part: "description", class: "bs-empty-state__description" }, this.hasDescriptionSlot ? h("slot", null) : this.description)), this.hasAction && (h("div", { key: '0d90b309f70235864cddb9051457a023fb035cff', part: "action", class: "bs-empty-state__action" }, h("slot", { key: 'bf4df45020fe85c49b5eeb22f83c37759fd6cbbe', name: "action" })))));
     }
     static get is() { return "bs-empty-state"; }
     static get encapsulation() { return "shadow"; }

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

@@ -65,7 +65,7 @@ export class BsErrorPage {
         const primary = this.primaryLabel ?? d.primary;
         const secondary = this.secondaryLabel ?? d.secondary;
         const level = Math.min(6, Math.max(1, Math.trunc(Number(this.headingLevel)) || 1));
-        return (h("bs-card", { key: '587457fde4a8a9e0485a88905d9ca9aed7822b13', part: "container", class: "bs-error-page", surface: "base" }, h("div", { key: '902640ac8d0645646fcd75d9bae72f0adb96d2ee', class: "bs-error-page__body" }, h("div", { key: '161a5ec1c4af4fad776f8fb70b4ba36e57e652f8', class: "bs-error-page__art-group" }, h("bs-icon-tile", { key: '129fc2c5d79f48d74aa619052df56e4af880e956', part: "art", class: `bs-error-page__art ${d.info ? 'bs-error-page__art--info' : ''}`, intent: d.intent, size: "lg" }, h("slot", { key: 'af0d768b53efd2cc8ab4c4bc3390c9edf896c573', name: "icon" }, d.glyph())), code && (h("span", { key: '819358ee0eacb2d378b049970eca9e845c891317', part: "code", class: "bs-error-page__code" }, code))), h(`h${level}`, { part: 'heading', class: { 'bs-error-page__heading': true } }, heading), description && (h("p", { key: '701eb1787e0beedb193ea73de528bde3a53104bb', part: "description", class: "bs-error-page__description" }, description)), (primary || secondary) && (h("div", { key: 'fe1e33d40cfc18493851ec9f244c81472e4a3a27', part: "actions", class: "bs-error-page__actions" }, primary && (h("bs-button", { key: '567627956a37daa24bc9ac571505370dcc2c05a6', part: "primary", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)), secondary && (h("bs-button", { key: '4190ca2af4469e31d15c3487d29da438b16f64cd', part: "secondary", variant: "outlined", onClick: () => this.bsSecondary.emit() }, secondary)))), this.reference && (h("p", { key: '1dde6d7782f1d74ded03accbc04f6799790653c4', part: "reference", class: "bs-error-page__reference" }, this.reference)))));
+        return (h("bs-card", { key: '8aff9c8d96ef4b11da092a77ebf5825d15927352', part: "container", class: "bs-error-page", surface: "base" }, h("div", { key: '19257d7f087c9e129a100a233f2b347f91bf94e3', class: "bs-error-page__body" }, h("div", { key: '626069ac9658d54560ff3b7fe1ee33d4e61d2120', class: "bs-error-page__art-group" }, h("bs-icon-tile", { key: '906074042657ea36412905e28db696beb48fca20', part: "art", class: `bs-error-page__art ${d.info ? 'bs-error-page__art--info' : ''}`, intent: d.intent, size: "lg" }, h("slot", { key: '08e00c6308418f3de6cee8574bf59b59c7749853', name: "icon" }, d.glyph())), code && (h("span", { key: '927bc4a8cb649c62dae21c512d444b6bc5c5bae8', part: "code", class: "bs-error-page__code" }, code))), h(`h${level}`, { part: 'heading', class: { 'bs-error-page__heading': true } }, heading), description && (h("p", { key: '213c0da80e469597d3964b8b91d643dbcc11caf3', part: "description", class: "bs-error-page__description" }, description)), (primary || secondary) && (h("div", { key: '85c062187fab0d14c29a826649fe84b515caf791', part: "actions", class: "bs-error-page__actions" }, primary && (h("bs-button", { key: 'c884d4cb3a054b1be6b53cdefba6219ad47a577b', part: "primary", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)), secondary && (h("bs-button", { key: '3e36ee75d488483d9d9a5385cf6ff6d632e8fee3', part: "secondary", variant: "outlined", onClick: () => this.bsSecondary.emit() }, secondary)))), this.reference && (h("p", { key: '7bf4f351eda32d20c2529e166b02b1da66851c64', part: "reference", class: "bs-error-page__reference" }, this.reference)))));
     }
     static get is() { return "bs-error-page"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-file-upload/bs-file-upload.js

@@ -112,7 +112,7 @@ export class BsFileUpload {
             this.handleFiles(files);
     };
     render() {
-        return (h("div", { key: 'b444692d61263c742166a4a436e8fe0999ba2410', part: "dropzone", class: `bs-file-upload bs-file-upload--${this.direction} ${this.dragging ? 'bs-file-upload--dragging' : ''} ${this.disabled ? 'bs-file-upload--disabled' : ''}`, onDragEnter: this.onDragOver, onDragOver: this.onDragOver, onDragLeave: this.onDragLeave, onDrop: this.onDrop }, h("div", { key: 'b0d5e476e0489b7fe598f9933076cfa43d4e6757', part: "icon", class: "bs-file-upload__icon" }, h("slot", { key: 'c0a42996503983e8bd899fd0f582d69df5ef6fbe', name: "icon" }, h(UploadIcon, { key: '0c00aec36659e9ddaebcb2fc544be85011cad571' }))), h("div", { key: 'f9b691faa0c924cf8d0f055c4f3bc5aaa1db70f1', class: "bs-file-upload__content" }, h("div", { key: 'dd15e2cdd12785a070cc4d0d4e53eb0e0e2cde1e', class: "bs-file-upload__text" }, this.heading && (h("span", { key: 'd02aafd376d43de1853f4aef16a53b6cabf96f59', part: "heading", class: "bs-file-upload__heading" }, this.heading)), this.description && (h("span", { key: '2d1b2195352c65a01a18e914f89e8bb84d7d8e68', part: "description", id: "description", class: "bs-file-upload__description" }, this.description))), h("bs-button", { key: '34608882d553c6a8d8f7f3cf16157e0164b6c087', part: "browse", variant: "neutral", size: "sm", disabled: this.disabled, onClick: this.onBrowse }, this.buttonLabel)), h("input", { key: '48f5bf76a00bd12fe2f2f3f25e639d0fa7eeeb78', ref: el => (this.inputEl = el), class: "bs-file-upload__input", type: "file", hidden: true, tabindex: -1, accept: this.accept, multiple: this.multiple, disabled: this.disabled, "aria-describedby": this.description ? 'description' : undefined, onChange: this.onInputChange })));
+        return (h("div", { key: 'a36d673f20523d6384240fa4cabac8389b57b29f', part: "dropzone", class: `bs-file-upload bs-file-upload--${this.direction} ${this.dragging ? 'bs-file-upload--dragging' : ''} ${this.disabled ? 'bs-file-upload--disabled' : ''}`, onDragEnter: this.onDragOver, onDragOver: this.onDragOver, onDragLeave: this.onDragLeave, onDrop: this.onDrop }, h("div", { key: 'c769eb48169ccdea3d9b2ec461fc131be8deec6e', part: "icon", class: "bs-file-upload__icon" }, h("slot", { key: 'e09c8fe53baaf4a42171799ce3c26595fc214321', name: "icon" }, h(UploadIcon, { key: 'e7687bf38d08a9d650c424efecf4ab1cee2fdbbd' }))), h("div", { key: 'c437654a93b2d8bca60b1bf5e9d883cba66b9514', class: "bs-file-upload__content" }, h("div", { key: '36c4fa07235bdaf27401d23d064b53910505bb3b', class: "bs-file-upload__text" }, this.heading && (h("span", { key: '232df19561f275bd62c9829ebe70c1e6155a8ce0', part: "heading", class: "bs-file-upload__heading" }, this.heading)), this.description && (h("span", { key: '493bb2708692a92b669d75d1f0ab075e9fb41355', part: "description", id: "description", class: "bs-file-upload__description" }, this.description))), h("bs-button", { key: '7f2955d2054a30efeec35252f776028b06a390df', part: "browse", variant: "neutral", size: "sm", disabled: this.disabled, onClick: this.onBrowse }, this.buttonLabel)), h("input", { key: '367b7d2fbbbf7ddfe0ebc063d0cef22c8510e713', ref: el => (this.inputEl = el), class: "bs-file-upload__input", type: "file", hidden: true, tabindex: -1, accept: this.accept, multiple: this.multiple, disabled: this.disabled, "aria-describedby": this.description ? 'description' : undefined, onChange: this.onInputChange })));
     }
     static get is() { return "bs-file-upload"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-file-upload-item/bs-file-upload-item.js

@@ -86,7 +86,7 @@ export class BsFileUploadItem {
     }
     render() {
         const removing = this.state === 'success';
-        return (h("div", { key: '7c45a43dd6901078911b6709d75b5394cae77626', part: "item", class: `bs-file-upload-item bs-file-upload-item--${this.state}` }, h("div", { key: '9911abe4b2876c1afd6aa2c788a92b9737a17b74', part: "thumbnail", class: "bs-file-upload-item__thumbnail" }, h("slot", { key: '704e42a69efba6dba851247be97778a43aac238a', name: "thumbnail" }, this.thumbnailSrc ? (h("img", { class: "bs-file-upload-item__image", src: this.thumbnailSrc, alt: this.thumbnailAlt })) : (h(ImageIcon, null)))), h("div", { key: 'd834ed0a69876994d4693e261eda30e636f57d5f', class: "bs-file-upload-item__content" }, h("div", { key: 'b22f1d39328698c9b9a847288f1585962ffbd646', class: "bs-file-upload-item__meta" }, h("span", { key: 'e82780922ed2e79adff9eb73a8b8ed55100ae58b', part: "name", class: "bs-file-upload-item__name" }, this.fileName), this.fileSize && (h("span", { key: 'cb8a4ba77ce49b4147b22293937ef6533aa62776', part: "size", class: "bs-file-upload-item__size" }, this.fileSize))), this.renderStatus()), h("bs-icon-button", { key: 'b07f558ddbaa346ad64abc08f372eb464062425a', part: "action", variant: "subtle", size: "lg", ariaLabel: removing ? this.removeLabel : this.cancelLabel, onClick: this.onAction }, removing ? h(TrashIcon, null) : h(CloseIcon, null))));
+        return (h("div", { key: 'b3dfe347e900ba5f452e6d653f17b66956eba4b7', part: "item", class: `bs-file-upload-item bs-file-upload-item--${this.state}` }, h("div", { key: '619821ac9b479d7dc78d98fb0344942c1b205d53', part: "thumbnail", class: "bs-file-upload-item__thumbnail" }, h("slot", { key: '879934c913d92097e079faa64b05322720e28467', name: "thumbnail" }, this.thumbnailSrc ? (h("img", { class: "bs-file-upload-item__image", src: this.thumbnailSrc, alt: this.thumbnailAlt })) : (h(ImageIcon, null)))), h("div", { key: '54e8b1582cb66122a5a7d7a0125e2bd99df28f8f', class: "bs-file-upload-item__content" }, h("div", { key: '3d79114f91830c4f22586da37bfb4f3e71f8ee04', class: "bs-file-upload-item__meta" }, h("span", { key: '450b9ac9b96506884fdf8ebc50adb57055f5d4bd', part: "name", class: "bs-file-upload-item__name" }, this.fileName), this.fileSize && (h("span", { key: '0ee574ac068a6f4dbc2c59a9c9bac31ab9087001', part: "size", class: "bs-file-upload-item__size" }, this.fileSize))), this.renderStatus()), h("bs-icon-button", { key: 'bbb36dc36d633a7a3d9150df5d1992b1b3e356ce', part: "action", variant: "subtle", size: "lg", ariaLabel: removing ? this.removeLabel : this.cancelLabel, onClick: this.onAction }, removing ? h(TrashIcon, null) : h(CloseIcon, null))));
     }
     static get is() { return "bs-file-upload-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -342,10 +342,10 @@ export class BsGlobalSearch {
         const listId = `${this.id}-listbox`;
         const isList = this.status === 'default' || this.status === 'results';
         const showFooter = this.showFooter && isList;
-        return (h("div", { key: '2d45d72757ec457f9bb684fd93de4a49a084dfd4', class: "bs-global-search" }, h("div", { key: '7b1e136ca729ce6a8aca989b0e45e32de617a095', part: "field", class: "bs-global-search__field", role: "combobox", "aria-label": this.label || this.placeholder, "aria-expanded": String(this.open && showList), "aria-haspopup": "listbox", "aria-controls": this.open && showList ? listId : undefined, "aria-activedescendant": this.open && this.activeId ? this.activeId : undefined, onKeyDown: this.onKeyDown, onFocusin: () => this.setOpen(true), onClick: () => this.setOpen(true) }, h("bs-input", { key: 'fe16150d64aad5aa5235a325c5d6d2df47f773d4', ref: el => (this.inputEl = el), type: "search", value: this.value, placeholder: this.placeholder, disabled: this.disabled, onBsInput: this.onInput })), this.open && (h("div", { key: 'fe33656e32a9b7753685bc0854c817e310b7fdb9', part: "panel", class: "bs-global-search__panel", onMouseDown: (ev) => ev.preventDefault(), onMouseOver: this.onPanelMouseOver }, isList && showList && (h("div", { key: '9273862a5cb63825652c187cea8b9aabf78179cc', id: listId, class: "bs-global-search__list", role: "listbox", "aria-label": this.listLabel }, sections.map(s => {
+        return (h("div", { key: 'badb002b67175179a79d0bc9c1366632d4a0645e', class: "bs-global-search" }, h("div", { key: '1902883e1e2a341bb78d57b0c2efc0695e2d50cc', part: "field", class: "bs-global-search__field", role: "combobox", "aria-label": this.label || this.placeholder, "aria-expanded": String(this.open && showList), "aria-haspopup": "listbox", "aria-controls": this.open && showList ? listId : undefined, "aria-activedescendant": this.open && this.activeId ? this.activeId : undefined, onKeyDown: this.onKeyDown, onFocusin: () => this.setOpen(true), onClick: () => this.setOpen(true) }, h("bs-input", { key: 'b8f8c00f00eef0051252ea8bc5b9e7bc299dc04e', ref: el => (this.inputEl = el), type: "search", value: this.value, placeholder: this.placeholder, disabled: this.disabled, onBsInput: this.onInput })), this.open && (h("div", { key: '08102c3daa1c44ed47c141c7aa010fbe68d322f8', part: "panel", class: "bs-global-search__panel", onMouseDown: (ev) => ev.preventDefault(), onMouseOver: this.onPanelMouseOver }, isList && showList && (h("div", { key: 'b14315ba3ced12ea89f961b889fcd514720b331d', id: listId, class: "bs-global-search__list", role: "listbox", "aria-label": this.listLabel }, sections.map(s => {
             const hid = `${this.id}-h-${s}`;
             return (h("div", { part: "section", class: "bs-global-search__section", role: "group", "aria-labelledby": hid }, h("div", { part: "section-header", id: hid, class: "bs-global-search__section-header" }, this.sectionLabel(s)), h("slot", { name: s })));
-        }))), this.status === 'empty' && this.renderStateBlock('empty'), this.status === 'error' && this.renderStateBlock('error'), showFooter && this.renderFooter())), h("span", { key: 'f9f687273bf843a8ee4fcdfcfa196d79c67a5791', class: "bs-global-search__live", "aria-live": "polite" }, this.announcement())));
+        }))), this.status === 'empty' && this.renderStateBlock('empty'), this.status === 'error' && this.renderStateBlock('error'), showFooter && this.renderFooter())), h("span", { key: 'c5acca23be3dab4b04a2590f079973fef8ac28c1', class: "bs-global-search__live", "aria-live": "polite" }, this.announcement())));
     }
     static get is() { return "bs-global-search"; }
     static get encapsulation() { return "shadow"; }

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

@@ -59,12 +59,12 @@ export class BsGrid {
         const row = this.rowGap ? this.token(this.rowGap) : gapValue;
         const col = this.columnGap ? this.token(this.columnGap) : gapValue;
         const align = ALIGNS.includes(this.align) ? this.align : 'stretch';
-        return (h("div", { key: '6e5451ed57a46f7fc7ce3142786887de2ec44219', class: "bs-grid", part: "container", style: {
+        return (h("div", { key: '9507109de1fe2a61cb12fdf10249eea822aca4fd', class: "bs-grid", part: "container", style: {
                 gridTemplateColumns: this.template(),
                 rowGap: `var(--bs-grid-row-gap, ${row})`,
                 columnGap: `var(--bs-grid-column-gap, ${col})`,
                 alignItems: align,
-            } }, h("slot", { key: 'c7609326cceeef12d0d501712bad80dceafd6388' })));
+            } }, h("slot", { key: '71f053d7d6be8bc917c44bec3a0c2f220836322c' })));
     }
     static get is() { return "bs-grid"; }
     static get encapsulation() { return "shadow"; }

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

@@ -31,7 +31,7 @@ export class BsHeading {
         const level = Math.min(6, Math.max(1, Number(this.level) || 2));
         const Tag = (this.as ?? `h${level}`);
         const size = this.size ?? String(level);
-        return (h(Tag, { key: '1bd998474f5a8c28b082fc1f60afd12c1f13747f', part: "heading", class: `bs-heading bs-heading--${size}` }, h("slot", { key: 'c10131a495b2a4761ff70fa3f071b6b9781a6a83' })));
+        return (h(Tag, { key: 'd30a0c74c61d89c6acaba89ef5133bdb4c9598aa', part: "heading", class: `bs-heading bs-heading--${size}` }, h("slot", { key: 'c9ec8694882323cc5dd98e771c70c296902d29e8' })));
     }
     static get is() { return "bs-heading"; }
     static get encapsulation() { return "shadow"; }

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

@@ -40,7 +40,7 @@ export class BsIcon {
         const filled = typeof markup === 'object';
         const inner = typeof markup === 'string' ? markup : markup?.body;
         const labelled = !!this.label;
-        return (h("span", { key: 'a286d23cd079a5fd7dfb472fc96a6b1e2f68e3f4', part: "icon", class: "bs-icon", role: labelled ? 'img' : undefined, "aria-label": labelled ? this.label : undefined, "aria-hidden": labelled ? undefined : 'true' }, markup ? (h("svg", { viewBox: filled ? markup.viewBox : '0 0 24 24', fill: filled ? 'currentColor' : 'none', stroke: filled ? undefined : 'currentColor', "stroke-width": filled ? undefined : '2', "stroke-linecap": filled ? undefined : 'round', "stroke-linejoin": filled ? undefined : 'round', "aria-hidden": "true", focusable: "false", ref: (svg) => {
+        return (h("span", { key: '92c14176ca0b3ae936d5a34103c7e8fb5fb797fa', part: "icon", class: "bs-icon", role: labelled ? 'img' : undefined, "aria-label": labelled ? this.label : undefined, "aria-hidden": labelled ? undefined : 'true' }, markup ? (h("svg", { viewBox: filled ? markup.viewBox : '0 0 24 24', fill: filled ? 'currentColor' : 'none', stroke: filled ? undefined : 'currentColor', "stroke-width": filled ? undefined : '2', "stroke-linecap": filled ? undefined : 'round', "stroke-linejoin": filled ? undefined : 'round', "aria-hidden": "true", focusable: "false", ref: (svg) => {
                 if (svg && svg.innerHTML !== inner)
                     svg.innerHTML = inner;
             } })) : (h("slot", null))));

package/dist/collection/components/bs-icon-tile/bs-icon-tile.js

@@ -46,8 +46,8 @@ export class BsIconTile {
     render() {
         const labelled = !!this.label;
         return [
-            h("div", { key: '312539518cebf4f02edfd480fc56899b5561203d', part: "container", class: "bs-icon-tile", role: labelled ? 'img' : undefined, "aria-label": labelled ? this.label : undefined, "aria-hidden": labelled ? undefined : 'true' }, h("span", { key: '451991c16cba6afd20f4029fe39c607c09564119', part: "icon", class: "bs-icon-tile__icon" }, h("slot", { key: 'db458731df94f9abb079d1c432105baa482b5ae4', onSlotchange: (ev) => (this.hasCustomIcon = hasContent(ev.target)) }), !this.hasCustomIcon && (GLYPHS[this.intent] ?? GLYPHS.default))),
-            h("span", { key: 'cb8186734c1378b0f4d0ae16e1113bd9a82e5930', part: "text", class: { 'bs-icon-tile__text': true, 'bs-icon-tile__text--visible': this.hasText } }, h("slot", { key: 'ad2416e6a042634eca44acb5d8768754343900b5', name: "text", onSlotchange: (ev) => (this.hasText = ev.target.assignedNodes().length > 0) })),
+            h("div", { key: 'bf6404159383eea8bc502471fe9050b3b756b44b', part: "container", class: "bs-icon-tile", role: labelled ? 'img' : undefined, "aria-label": labelled ? this.label : undefined, "aria-hidden": labelled ? undefined : 'true' }, h("span", { key: '68388ac2d1736c4f988aa4891ba98ed782e8e73e', part: "icon", class: "bs-icon-tile__icon" }, h("slot", { key: '63912e42c3858d1c893cd648772f014c1a9e0a0c', onSlotchange: (ev) => (this.hasCustomIcon = hasContent(ev.target)) }), !this.hasCustomIcon && (GLYPHS[this.intent] ?? GLYPHS.default))),
+            h("span", { key: '5e33734bd960efbd3432ad827261bed80fa60e76', part: "text", class: { 'bs-icon-tile__text': true, 'bs-icon-tile__text--visible': this.hasText } }, h("slot", { key: '09f2d6c09e4592f6796187fd320ddbc6058f255e', name: "text", onSlotchange: (ev) => (this.hasText = ev.target.assignedNodes().length > 0) })),
         ];
     }
     static get is() { return "bs-icon-tile"; }

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

@@ -579,6 +579,18 @@ describe('bs-input', () => {
         });
     });
     describe('type="pin"', () => {
+        it('names every cell, keeping the visible label for the first when there is one', async () => {
+            const { root } = await render(h("bs-input", { type: "pin", length: 3, label: "Verification code" }));
+            const cells = Array.from(root.shadowRoot.querySelectorAll('.bs-input__pin-cell'));
+            expect(cells[0].hasAttribute('aria-label')).toBe(false);
+            expect(cells[1].getAttribute('aria-label')).toBe('Digit 2 of 3');
+            expect(cells[2].getAttribute('aria-label')).toBe('Digit 3 of 3');
+        });
+        it('names the first cell too when there is no label, and honours pinCellLabel', async () => {
+            const { root } = await render(h("bs-input", { type: "pin", length: 2, pinCellLabel: "Ziffer {n} von {total}" }));
+            const cells = Array.from(root.shadowRoot.querySelectorAll('.bs-input__pin-cell'));
+            expect(cells.map(c => c.getAttribute('aria-label'))).toEqual(['Ziffer 1 von 2', 'Ziffer 2 von 2']);
+        });
         it('renders one input cell per length', async () => {
             const { root } = await render(h("bs-input", { type: "pin", length: 4 }));
             const cells = root.shadowRoot.querySelectorAll('.bs-input__pin-cell');

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

@@ -118,6 +118,9 @@ export class BsInput {
     countryLabel = 'Country';
     /** Number of cells for `type="pin"`. */
     length = 4;
+    /** `type="pin"`: accessible name of each cell, with `{n}` replaced by its 1-based position and `{total}` by `length`. The
+     * first cell keeps the field's visible `label` as its name when there is one. */
+    pinCellLabel = 'Digit {n} of {total}';
     /** `type="combobox"`: shows a loading indicator and, while no options match, a loading message
      * in the popup instead of "no results". Use while fetching `options` asynchronously. */
     loading = false;
@@ -710,13 +713,13 @@ export class BsInput {
         this.pinInputs = [];
         const errorClass = this.error ? 'bs-input__field--error' : '';
         const disabledClass = this.disabled ? 'bs-input__field--disabled' : '';
-        return (h("div", { part: "field", class: `bs-input__field bs-input__field--pin ${errorClass} ${disabledClass}` }, Array.from({ length: this.length }).map((_, i) => (h("input", { id: i === 0 ? 'control' : undefined, ref: el => (this.pinInputs[i] = el), part: "control", class: "bs-input__pin-cell", type: "text", inputMode: "numeric", maxLength: 1, value: this.value[i] ?? '', disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, onInput: this.onPinInput(i), onKeyDown: this.onPinKeydown(i) })))));
+        return (h("div", { part: "field", class: `bs-input__field bs-input__field--pin ${errorClass} ${disabledClass}` }, Array.from({ length: this.length }).map((_, i) => (h("input", { id: i === 0 ? 'control' : undefined, ref: el => (this.pinInputs[i] = el), part: "control", class: "bs-input__pin-cell", type: "text", inputMode: "numeric", maxLength: 1, "aria-label": i === 0 && this.label ? undefined : this.pinCellLabel.replace('{n}', String(i + 1)).replace('{total}', String(this.length)), value: this.value[i] ?? '', disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, onInput: this.onPinInput(i), onKeyDown: this.onPinKeydown(i) })))));
     }
     render() {
-        return (h("div", { key: '9eea22c2c7cbcbdcb2c37403b89c10efc145228d', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
+        return (h("div", { key: '2607d492f534549e07c0f03474452e57ee8d1e62', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
         // "control" is a fixed id, not a generated one -- safe because Shadow DOM scopes ids
         // to this instance's own shadow root, so it can never collide with another bs-input.
-        h("label", { key: 'cbd4e5f0cd8fb0f004f7bc9f7e0dc3433d25e8dc', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (h("span", { key: 'bcd1fb8d607e87c204cb7d93506aa1c648478f34', part: "required", class: "bs-input__required", "aria-hidden": "true" }, "*")))), this.type === 'pin' ? this.renderPinField() : this.type === 'initials' ? this.renderInitialsField() : this.type === 'country' ? this.renderCountryField() : this.renderField(), this.error ? (h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, h("svg", { part: "error-icon", class: "bs-input__error-icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M8 5V8.5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }), h("circle", { cx: "8", cy: "11", r: "0.75", fill: "currentColor" })), this.error)) : this.description ? (h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
+        h("label", { key: '6c8d72b986a0ca92360778318c66dc66753737b5', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (h("span", { key: '2a37224b19126d5de000592dec29f366a0298630', part: "required", class: "bs-input__required", "aria-hidden": "true" }, "*")))), this.type === 'pin' ? this.renderPinField() : this.type === 'initials' ? this.renderInitialsField() : this.type === 'country' ? this.renderCountryField() : this.renderField(), this.error ? (h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, h("svg", { part: "error-icon", class: "bs-input__error-icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M8 5V8.5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }), h("circle", { cx: "8", cy: "11", r: "0.75", fill: "currentColor" })), this.error)) : this.description ? (h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
     }
     static get is() { return "bs-input"; }
     static get encapsulation() { return "shadow"; }
@@ -1259,6 +1262,26 @@ export class BsInput {
                 "attribute": "length",
                 "defaultValue": "4"
             },
+            "pinCellLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`type=\"pin\"`: accessible name of each cell, with `{n}` replaced by its 1-based position and `{total}` by `length`. The\nfirst cell keeps the field's visible `label` as its name when there is one."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pin-cell-label",
+                "defaultValue": "'Digit {n} of {total}'"
+            },
             "loading": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/bs-input/bs-input.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 inputTypes = ['text', 'email', 'password', 'number', 'search', 'date', 'dropdown', 'select', 'textarea', 'chip', 'initials', 'country', 'pin', 'combobox'];
 const mailIcon = html `
   <svg slot="icon" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
@@ -59,6 +61,18 @@ export const Default = {
     args: {
         type: 'email',
     },
+    play: async ({ canvasElement }) => {
+        const host = await ready(canvasElement, 'bs-input');
+        const inputs = recordEvents(host, 'bsInput');
+        const control = inShadow(host, '[part="control"]');
+        await expect(control).toHaveValue('');
+        await userEvent.type(control, 'ada@example.com');
+        await expect(control).toHaveValue('ada@example.com');
+        await waitFor(() => expect(host.value).toBe('ada@example.com'));
+        // One bsInput per keystroke, each carrying the value so far.
+        await expect(inputs.at(-1)?.detail).toBe('ada@example.com');
+        await expect(inputs).toHaveLength('ada@example.com'.length);
+    },
 };
 export const WithDescription = {
     args: { description: "We'll never share your email." },

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

@@ -38,7 +38,7 @@ export class BsKey {
         this.hasIcon = ev.target.assignedNodes().length > 0;
     };
     render() {
-        return (h("kbd", { key: 'b27361677679af4361b8c52c619e9b71c3a3070d', part: "container", class: "bs-key" }, !this.hasIcon && (h("span", { key: '0cc6b002dccd205e506c6beeeb036f8eadd96dca', part: "label", class: "bs-key__label" }, h("slot", { key: '99d7c62980ef97f7cd8d98ad949a0137bdc0f8e7' }, this.label))), h("span", { key: '57ba03cb14b03dfc33879b615d7766734611d514', part: "icon", class: { 'bs-key__icon': true, 'bs-key__icon--hidden': !this.hasIcon } }, h("slot", { key: 'd3d87b23ec5236cb9c42cff04345eb7601f6c3d6', name: "icon", onSlotchange: this.onIconSlotChange }))));
+        return (h("kbd", { key: '696939056f306280e640f5bfb9a23d3282fd3bdd', part: "container", class: "bs-key" }, !this.hasIcon && (h("span", { key: 'b51ef1e566756374c22ecbd5d744bef23e25efd8', part: "label", class: "bs-key__label" }, h("slot", { key: 'c12e9f373c0da8c981bf13107f464407bb28f5a4' }, this.label))), h("span", { key: 'a0f88845c5a4ebfd6695f23eb204492862620a4d', part: "icon", class: { 'bs-key__icon': true, 'bs-key__icon--hidden': !this.hasIcon } }, h("slot", { key: '5a4209c004c9c30523c7128a61cd7f082a77a06d', name: "icon", onSlotchange: this.onIconSlotChange }))));
     }
     static get is() { return "bs-key"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-key-caps/bs-key-caps.js

@@ -41,7 +41,7 @@ export class BsKeyCaps {
     render() {
         const keys = this.keyList();
         const name = this.label ?? (keys.length ? keys.join(' plus ') : undefined);
-        return (h("span", { key: '901f06dbfbe651cf48cde37a2d230f66c801e710', part: "container", class: "bs-key-caps", role: "group", "aria-label": name, "aria-disabled": this.disabled ? 'true' : undefined }, keys.map(k => (h("bs-key", { label: k }))), h("slot", { key: 'c5444e1a1eea07b7ec6548c2d4a20cbae2494c4f' })));
+        return (h("span", { key: '46f3da326c7901ced8a486f32d552a28ac394c77', part: "container", class: "bs-key-caps", role: "group", "aria-label": name, "aria-disabled": this.disabled ? 'true' : undefined }, keys.map(k => (h("bs-key", { label: k }))), h("slot", { key: '072587ad1177338f6477d589431a7bb9d961963a' })));
     }
     static get is() { return "bs-key-caps"; }
     static get encapsulation() { return "shadow"; }