@brandsync/wc 1.21.0 → 1.22.0

package/dist/collection/components/bs-chip/bs-chip-informative/bs-chip-informative.cmp.test.js

@@ -40,4 +40,48 @@ describe('bs-chip-informative', () => {
         const { root } = await render(h("bs-chip-informative", null, "Active"));
         expect(root).toHaveTextContent('Active');
     });
+    describe('removable and href (replaces bs-tag)', () => {
+        const removeBtn = (root) => root.shadowRoot.querySelector('[part="remove"]');
+        it('is non-interactive by default: no remove button and no link', async () => {
+            const { root } = await render(h("bs-chip-informative", null, "Label"));
+            expect(removeBtn(root)).toBeNull();
+            expect(root.shadowRoot.querySelector('a')).toBeNull();
+            expect(root.shadowRoot.querySelector('[part="label"]').tagName).toBe('SPAN');
+        });
+        it('removable renders a named remove button, reflects the attribute and emits bsRemove on click', async () => {
+            const { root, spyOnEvent, waitForChanges } = await render(h("bs-chip-informative", { removable: true }, "Design"));
+            await waitForChanges();
+            expect(root).toHaveAttribute('removable');
+            expect(removeBtn(root).ariaLabel).toBe('Remove Design');
+            const spy = spyOnEvent('bsRemove');
+            removeBtn(root).click();
+            expect(spy).toHaveReceivedEventTimes(1);
+        });
+        it('removeLabel changes the prefix of the remove button name', async () => {
+            const { root, waitForChanges } = await render(h("bs-chip-informative", { removable: true, removeLabel: "Fjern" }, "Design"));
+            await waitForChanges();
+            expect(removeBtn(root).ariaLabel).toBe('Fjern Design');
+        });
+        it('href renders a real link, and target="_blank" adds rel="noopener noreferrer"', async () => {
+            const { root } = await render(h("bs-chip-informative", { href: "/topics/design", target: "_blank" }, "Design"));
+            const a = root.shadowRoot.querySelector('a[part="label"]');
+            expect(a).not.toBeNull();
+            expect(a.getAttribute('href')).toBe('/topics/design');
+            expect(a.getAttribute('rel')).toBe('noopener noreferrer');
+        });
+        it('can be a link and removable at the same time', async () => {
+            const { root } = await render(h("bs-chip-informative", { href: "#x", removable: true }, "Design"));
+            expect(root.shadowRoot.querySelector('a[part="label"]')).not.toBeNull();
+            expect(removeBtn(root)).not.toBeNull();
+        });
+        it('disabled is never a link, and its remove button is disabled and emits nothing', async () => {
+            const { root, spyOnEvent, waitForChanges } = await render(h("bs-chip-informative", { disabled: true, href: "#x", removable: true }, "Design"));
+            await waitForChanges();
+            expect(root.shadowRoot.querySelector('a')).toBeNull();
+            expect(removeBtn(root).disabled).toBe(true);
+            const spy = spyOnEvent('bsRemove');
+            removeBtn(root).shadowRoot.querySelector('button').click();
+            expect(spy).not.toHaveReceivedEvent();
+        });
+    });
 });

package/dist/collection/components/bs-chip/bs-chip-informative/bs-chip-informative.css

@@ -20,6 +20,10 @@
  * @prop --bs-chip-informative-font-size: Aliased to --bs-font-size-sm (size="md"/"lg").
  * @prop --bs-chip-informative-line-height: Aliased to --bs-line-height-body-sm (size="md"/"lg").
  * @prop --bs-chip-informative-font-weight: Aliased to --bs-font-weight-regular.
+ * @prop --bs-chip-informative-padding-right-removable: Right-edge padding when `removable` (the remove
+ * button supplies its own visual padding). Aliased to --bs-spacing-50.
+ * @prop --bs-chip-informative-focus-ring: Focus ring colour of the link label. Aliased to
+ * --bs-border-neutral-focus.
  *
  * Color (background/text per color/disabled) comes directly from brandsync-tokens' own pre-built
  * chip token set below -- shared across the whole bs-chip family, not local to this component,
@@ -48,6 +52,8 @@
   --bs-chip-informative-font-size: var(--bs-font-size-sm);
   --bs-chip-informative-line-height: var(--bs-line-height-body-sm);
   --bs-chip-informative-font-weight: var(--bs-font-weight-regular);
+  --bs-chip-informative-padding-right-removable: var(--bs-spacing-50);
+  --bs-chip-informative-focus-ring: var(--bs-border-neutral-focus);
 }
 
 :host(.bs-chip-informative--lg) {
@@ -78,6 +84,10 @@
   padding-inline-end: var(--bs-chip-informative-padding-x-plain-side);
 }
 
+:host(.bs-chip-informative--removable) {
+  padding-inline-end: var(--bs-chip-informative-padding-right-removable);
+}
+
 .bs-chip-informative__icon {
   display: none;
   flex-shrink: 0;
@@ -102,6 +112,26 @@
   align-items: center;
 }
 
+.bs-chip-informative__label--link {
+  color: inherit;
+  text-decoration: underline;
+  border-radius: var(--bs-border-radius-50);
+}
+
+.bs-chip-informative__label--link:hover {
+  text-decoration-thickness: 2px;
+}
+
+.bs-chip-informative__label--link:focus-visible {
+  outline: 2px solid var(--bs-chip-informative-focus-ring);
+  outline-offset: 2px;
+}
+
+.bs-chip-informative__remove {
+  flex-shrink: 0;
+  color: inherit;
+}
+
 :host(.bs-chip-informative--neutral) {
   background: var(--bs-chip-bg-neutral-container);
   color: var(--bs-chip-text-neutral);

package/dist/collection/components/bs-chip/bs-chip-informative/bs-chip-informative.js

@@ -1,21 +1,28 @@
 import { Host, h } from "@stencil/core";
 /**
- * A pill-shaped, non-interactive label for conveying a category or status at a glance, optionally
- * paired with a leading icon. Unlike `bs-chip-filter`/`bs-chip-input`, this is purely informational
- * -- no click/select/remove behavior, no hover/focus/pressed states.
+ * A pill-shaped label for conveying a category or status at a glance, optionally paired with a
+ * leading icon. By default it is purely informational -- no click/select behavior, no
+ * hover/focus/pressed states. Two opt-ins cover what used to need a separate `bs-tag`: `removable`
+ * adds a remove button (`bsRemove`), and `href` turns the label into a link.
  *
  * ## When to use
  * - Conveying a category or status inline with other content, with more color options and an
  *   optional icon than `bs-badge` offers.
+ * - Metadata on a record (topics, keywords, owners) that can be removed one by one (`removable`) or
+ *   that leads to a filtered view or detail page (`href`).
  *
  * ## When not to use
- * - Anything clickable/selectable -- use `bs-chip-filter`.
+ * - Toggling a filter on and off -- use `bs-chip-filter`; entering free-text values -- use
+ *   `bs-chip-input`.
  * - A short, fixed status label with no color/icon needs -- `bs-badge` is the simpler choice.
  *
+ * **Built from:** `bs-icon-button` (the remove control, `size="xs"`).
+ *
  * @slot - Default slot: the chip's label content.
  * @slot icon - Optional leading icon.
  * @part icon - The icon wrapper element.
- * @part label - The text label element.
+ * @part label - The text label element (a link when `href` is set).
+ * @part remove - The remove button (`bs-icon-button`), only when `removable`.
  */
 export class BsChipInformative {
     el;
@@ -30,12 +37,37 @@ export class BsChipInformative {
     /** Overrides `color` with the disabled token set, regardless of its value. Reflected so
      * `:host([disabled])` can apply it in CSS. */
     disabled = false;
+    /** Shows a remove button that emits `bsRemove`. The consumer removes the element. Off by default,
+     * so a plain chip stays non-interactive. */
+    removable = false;
+    /** Turns the label into a link to this URL. Ignored while `disabled`. */
+    href;
+    /** Link target, only used with `href`. `_blank` also sets `rel="noopener noreferrer"`. */
+    target;
+    /** Prefix of the remove button's accessible name ("Remove {label}"). */
+    removeLabel = 'Remove';
+    /** Fires when the remove button is activated, only when `removable`. No payload; the consumer
+     * removes the chip. Move focus somewhere sensible in your handler -- it is lost with the element. */
+    bsRemove;
     /** Tracks whether the `icon` slot has assigned content, so the icon/label gap and left-edge
      * padding only apply when there's actually a leading icon. */
     hasIcon = false;
+    /** The label's text, used for the remove button's accessible name. */
+    labelText = '';
     componentWillLoad() {
         this.hasIcon = this.hasSlottedContent('icon');
+        this.labelText = this.readLabel();
+    }
+    readLabel() {
+        return Array.from(this.el.childNodes)
+            .filter(n => !(n.nodeType === Node.ELEMENT_NODE && n.hasAttribute('slot')))
+            .map(n => n.textContent || '')
+            .join('')
+            .trim();
     }
+    onRemove = () => {
+        this.bsRemove.emit();
+    };
     hasSlottedContent(slotName) {
         return Array.from(this.el.childNodes).some(node => node.nodeType === Node.ELEMENT_NODE && node.getAttribute('slot') === slotName);
     }
@@ -44,7 +76,10 @@ export class BsChipInformative {
     };
     render() {
         const paddingVariant = this.hasIcon ? 'icon' : 'text';
-        return (h(Host, { key: 'd44cc865c85a33561d688c16ba73f325d42b5dd9', class: `bs-chip-informative bs-chip-informative--${this.color} bs-chip-informative--${this.size} bs-chip-informative--${paddingVariant}`, "aria-disabled": this.disabled ? 'true' : undefined }, h("span", { key: '287ae0812ffdb137d42c23ec1423a2939c57d316', part: "icon", class: `bs-chip-informative__icon ${this.hasIcon ? 'bs-chip-informative__icon--visible' : ''}` }, h("slot", { key: 'fbb9a6bd70dccc1873e77872a0b636acb2cbcd47', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'f4e3bc9305c5698b131da8724518d3fffd02d822', part: "label", class: "bs-chip-informative__label" }, h("slot", { key: 'ee13386ec9bf45e425b724bfbd0f9030f926fe79' }))));
+        const isLink = !!this.href && !this.disabled;
+        const rel = isLink && this.target === '_blank' ? 'noopener noreferrer' : undefined;
+        const label = h("slot", { key: 'ef28047f16d39f511b22c44dc8d5fed7031d2f42', onSlotchange: () => (this.labelText = this.readLabel()) });
+        return (h(Host, { key: '1efcc6d4f937ca210e938e6c6d146ed190f9a9c7', class: `bs-chip-informative bs-chip-informative--${this.color} bs-chip-informative--${this.size} bs-chip-informative--${paddingVariant} ${this.removable ? 'bs-chip-informative--removable' : ''}`, "aria-disabled": this.disabled ? 'true' : undefined }, h("span", { key: 'fd333a339d4cea6ff26362d9b583de0ae58b2d97', part: "icon", class: `bs-chip-informative__icon ${this.hasIcon ? 'bs-chip-informative__icon--visible' : ''}` }, h("slot", { key: '1b24fa6d1144ae046e7e63a61bec7197ad146626', name: "icon", onSlotchange: this.onIconSlotchange })), isLink ? (h("a", { part: "label", class: "bs-chip-informative__label bs-chip-informative__label--link", href: this.href, target: this.target, rel: rel }, label)) : (h("span", { part: "label", class: "bs-chip-informative__label" }, label)), this.removable && (h("bs-icon-button", { key: '907d4095f2fb64ee3d3d928c7ff41cacb1656911', part: "remove", class: "bs-chip-informative__remove", size: "xs", variant: "subtle", disabled: this.disabled, ariaLabel: `${this.removeLabel} ${this.labelText}`.trim(), onClick: this.onRemove }, h("svg", { key: '7ff06d4309db7e3462600bb8e620b6092d55ba66', viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: '8bff2d547b88bdb5a240a13a82f71a0f3345ba59', d: "M12.5 3.5L3.5 12.5M12.5 12.5L3.5 3.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))));
     }
     static get is() { return "bs-chip-informative"; }
     static get encapsulation() { return "shadow"; }
@@ -131,13 +166,110 @@ export class BsChipInformative {
                 "reflect": true,
                 "attribute": "disabled",
                 "defaultValue": "false"
+            },
+            "removable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows a remove button that emits `bsRemove`. The consumer removes the element. Off by default,\nso a plain chip stays non-interactive."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "removable",
+                "defaultValue": "false"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Turns the label into a link to this URL. Ignored while `disabled`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Link target, only used with `href`. `_blank` also sets `rel=\"noopener noreferrer\"`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target"
+            },
+            "removeLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Prefix of the remove button's accessible name (\"Remove {label}\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "remove-label",
+                "defaultValue": "'Remove'"
             }
         };
     }
     static get states() {
         return {
-            "hasIcon": {}
+            "hasIcon": {},
+            "labelText": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "bsRemove",
+                "name": "bsRemove",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the remove button is activated, only when `removable`. No payload; the consumer\nremoves the chip. Move focus somewhere sensible in your handler -- it is lost with the element."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
     static get elementRef() { return "el"; }
 }

package/dist/collection/components/bs-chip/bs-chip-informative/bs-chip-informative.stories.js

@@ -47,6 +47,13 @@ export const WithIcon = {
 export const Disabled = {
     args: { disabled: true },
 };
+export const Removable = {
+    render: args => html ` <bs-chip-informative color=${args.color} size=${args.size} ?disabled=${args.disabled} removable>${args.label}</bs-chip-informative> `,
+};
+export const AsLink = {
+    name: 'As link',
+    render: args => html ` <bs-chip-informative color=${args.color} size=${args.size} ?disabled=${args.disabled} href="#topic">${args.label}</bs-chip-informative> `,
+};
 export const Small = {
     args: { size: 'sm' },
 };

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

@@ -80,7 +80,7 @@ export class BsChipInput {
     };
     render() {
         const paddingVariant = this.hasIcon ? 'icon' : 'text';
-        return (h(Host, { key: '15fae1671d90d277794f39e32920c890b34d44d7', class: `bs-chip-input bs-chip-input--${this.size} bs-chip-input--${paddingVariant}` }, h("button", { key: '5961600e9394099821e8e33edc7de71cf6a1ad9b', type: "button", part: "body", class: "bs-chip-input__body", disabled: this.disabled, "aria-pressed": String(this.selected), onClick: this.onBodyClick }, h("bs-ripple", { key: 'c1c90c8d5ab81d0c23edb4b4596e68b384aa8b0c', part: "ripple", centered: false, disabled: this.disabled }), h("span", { key: 'e6fd75f8cb1d8b8802a2d64e0852ebcaeefaa187', part: "icon", class: `bs-chip-input__icon ${this.hasIcon ? 'bs-chip-input__icon--visible' : ''}` }, h("slot", { key: '42997a9d073a6fab53fd23136115592cf71a62a4', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'd319b4e1e40d2486482866dbf8aa3717c4b0ee7f', part: "label", class: "bs-chip-input__label" }, h("slot", { key: '6cc26505fad8432f85df93ba4f764fcdc0489eaf', onSlotchange: this.onLabelSlotchange }))), h("button", { key: 'd78649e00740738908ccbdc268720dee41340cf9', type: "button", part: "remove", class: "bs-chip-input__remove", disabled: this.disabled, "aria-label": `${this.removeLabel} ${this.labelText}`, onClick: this.onRemoveClick }, h("bs-ripple", { key: 'dff2a2d6b215262f03bc36e34e0e083a7cf22e90', part: "ripple", centered: true, disabled: this.disabled }), h(CloseIcon, { key: 'b3b0ad0dbf5335c9225dcbbc5ed04f9960900c0e' }))));
+        return (h(Host, { key: '138a3e7ee6dc966c580f664ec184466f71272f11', class: `bs-chip-input bs-chip-input--${this.size} bs-chip-input--${paddingVariant}` }, h("button", { key: '6d81c76a47b8a4f5d410f62da65bc21fd73ab326', type: "button", part: "body", class: "bs-chip-input__body", disabled: this.disabled, "aria-pressed": String(this.selected), onClick: this.onBodyClick }, h("bs-ripple", { key: 'd625ac5a1c658215730aa694b69e426a3f17e138', part: "ripple", centered: false, disabled: this.disabled }), h("span", { key: 'd073ce98fe4a7ad884c055da57ccab870337f468', part: "icon", class: `bs-chip-input__icon ${this.hasIcon ? 'bs-chip-input__icon--visible' : ''}` }, h("slot", { key: 'fc9323f052532e20e443ec52d36f7343a5438148', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '0e174e2a29afbaff6e6468e9b0e1fc17d1e59fbf', part: "label", class: "bs-chip-input__label" }, h("slot", { key: 'a1c9457b41944c59dc49666361eeae0f2dceedb0', onSlotchange: this.onLabelSlotchange }))), h("button", { key: '981a4d06c8fce2ee6ca3a01adb438eaa95652aac', type: "button", part: "remove", class: "bs-chip-input__remove", disabled: this.disabled, "aria-label": `${this.removeLabel} ${this.labelText}`, onClick: this.onRemoveClick }, h("bs-ripple", { key: '8946515916aaedcd3d73961be2e9534e57ab0e17', part: "ripple", centered: true, disabled: this.disabled }), h(CloseIcon, { key: '2f67baae389fc4fbfaa29f4e6c720a2e02a8c8c4' }))));
     }
     static get is() { return "bs-chip-input"; }
     static get encapsulation() { return "shadow"; }

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: '87d8ef821fbdfe846de40a2d74287e757d4d98c6', part: "container", class: "bs-citation-preview", surface: "base" }, h("div", { key: 'edecc65323eb56ec502e4f6242376d9ca535b08b', class: "bs-citation-preview__body" }, h("bs-source-link", { key: 'a00f41ef78e294f5009e2182bc0db921137d2322', part: "header", fileName: this.fileName, sourceName: this.sourceName, href: this.href, onBsOpen: () => this.bsOpen.emit() }), h("div", { key: 'c37e3ae17dc1835461ebc53002b9e596930cfaae', part: "snippet", class: "bs-citation-preview__snippet" }, h("slot", { key: '12ec7437fe56aa736d8ae751bed7a77109044071' })), h("div", { key: '3c2b6b1c2bf1802b835812a65865f25917b43868', class: "bs-citation-preview__footer" }, h("slot", { key: '49614ce08f91e86cacd6881b4e02f6c6cdf8046b', name: "footer" }, hasPage && (h("span", { key: '98fac4f066e02be5d7909756b1fdb6e37105b06e', 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: '664b76ce5f0466f35a0d75aba0f49600dfcba6ba', 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: 'fe4e085c97b20ff85a8a2a7d1573b76cdfa102e6', part: "panel", class: "bs-command-palette__panel" }, h("div", { key: '398c5d4d9941ad6701733c170f87d4eef77a8bc9', part: "search", class: "bs-command-palette__search" }, this.scopeLabel && (h("bs-chip-informative", { key: 'bef7179a406e7870b67c7056d76d71c29e685c18', class: "bs-command-palette__scope", color: "info" }, this.scopeLabel)), h("div", { key: '64f7a2f90e696d2dfbefa73c7fcac4baeb1e3d66', 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: 'dbc847385e89117d3756af9940afe3ee6af683ef', part: "input", ref: el => (this.inputEl = el), type: "search", value: this.value, placeholder: this.placeholder, onBsInput: this.onInput })), h("span", { key: '525119e7dda244394c2f54116ea27246390fe2a2', class: "bs-command-palette__esc", "aria-hidden": "true" }, h("bs-key", { key: 'c6172bc9bacb7e8001fa8b8a29c57cbea8cdc18b', label: "Esc" }))), showResults && h("div", { key: '0962bd70a0b883facafcf68180ab9f9c7bae3684', class: "bs-command-palette__divider", role: "presentation" }), showResults && (h("div", { key: '454715382ba589366df9c6b1b3964d8a79d47b2b', part: "results", class: "bs-command-palette__results", "aria-busy": String(loading), onMouseOver: this.onResultsMouseOver }, loading && (h("div", { key: '236e33c68396fa11b7701528f4de539d72f09000', class: "bs-command-palette__loading", role: "status" }, h("bs-spinner", { key: 'f028777638b9c0e3abae0011c2e572f027412efa', size: "sm" }), h("span", { key: '5656e7a12e0593de16e1c5bf7ff3d2e924f655ad' }, this.loadingLabel))), empty && this.renderEmpty(), hasList && (h("div", { key: '58033f868ecb4285748616d6cb7e3d95b5d8db68', 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: 'c9b46f7ce8a76f4b48776bf88f1e58242fb71ebf', 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: 'e97588e286f39cdd4d61e8bee3ec91ae192242c2', ...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: '48e99f7fe5b6f6fbb7d70f30eb11d929e3e93ae6', class: "bs-company-switcher", open: this.open, placement: "bottom-start", onBsOpenChange: this.onPopoverOpenChange }, this.renderTrigger(), h("bs-card", { key: 'b14bd8f8c3e0666c4526b3ab7bb45be674def1ee', part: "panel", class: "bs-company-switcher__panel", surface: "base" }, h("div", { key: '0a1874d70f6702be9a159415597a58ed59cefac4', class: "bs-company-switcher__search", onMouseDown: (ev) => ev.preventDefault() }, h("div", { key: 'd1d3cd795aec21ccf0e2acb2ac05fbf51dc49a73', 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: '84868f1a5641c314d5777dea0a0edc6e2d723328', ref: el => (this.inputEl = el), type: "search", value: this.query, placeholder: this.searchPlaceholder, onBsInput: this.onInput }))), groups.length > 0 && (h("div", { key: 'fe8bc69ac3f65664b33dbe2c3ee2700c96b1703b', 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: 'ff3af7847fa2b6355ef464b03d7e2dae9af74e15', part: "empty", class: "bs-company-switcher__empty", heading: this.emptyHeading.replace('{query}', this.query.trim()), description: this.emptyDescription }, h("svg", { key: '43ee6aed173cf88d57bbfd0e92f724d782b15963', slot: "icon", ...svgProps }, h("circle", { key: '4834a47d151c62739bfd2019a4b761b49995d422', cx: "11", cy: "11", r: "7" }), h("path", { key: 'aefafbcdd557cfaf2493558a59a380090b6edc08', d: "m20 20-3.5-3.5" })))), h("bs-divider", { key: '08a39c4e8e5dbaf731579afd4d1e611fe30c361b', class: "bs-company-switcher__divider", decorative: true }), h("div", { key: 'e76be7acc1cde67c5dd3fb59a2033ec3a4d42674', part: "footer", class: "bs-company-switcher__footer" }, h("bs-button", { key: 'a05c921783996a3762635a25f3861ed55692e7b4', variant: "subtle", size: "sm", onClick: () => this.bsManageCompanies.emit() }, h("svg", { key: 'c402e76faa03fb68d303ce0e9dd1eb21c439d66f', slot: "icon", ...svgProps }, h("circle", { key: '27a640d8953fd9541d304c53ead6089a1f433886', cx: "12", cy: "12", r: "3" }), h("path", { key: 'd791ff4ac79664dfd91da361b07e03975e697d09', 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: '125ced539bfc749c8bceaa5f3ed1c7dece3a5bde', variant: "subtle", size: "sm", onClick: () => this.bsAddCompanies.emit() }, h("svg", { key: '57af672d2154bcec2698f5885fc1db529d36e83c', slot: "icon", ...svgProps }, h("path", { key: '26ac9276c6a4af2abcb927b29e938ea4c3b93a02', d: "M12 5v14M5 12h14" })), this.addLabel)), h("span", { key: '474d0275c005bdf8c9436eaf8962ee1681c70f6c', 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: '7815de5b26e3b9c1afeb413378f1ead5b6f37353', class: `bs-composer bs-composer--${this.state} bs-composer--${this.variant}` }, h("div", { key: '8c7ecc7606e590cfc2b2c7750d7437610b1c454d', part: "attachments", class: `bs-composer__attachments-row ${this.hasAttachments ? 'bs-composer__attachments-row--visible' : ''}` }, h("slot", { key: '56fe3b213e36289e7f9a0738824e19396dd552c5', name: "attachments", onSlotchange: this.onAttachmentsSlotchange })), h("div", { key: '3a1bd77a1bba71464807832e9746ea40f09d3766', class: "bs-composer__text-row" }, h("textarea", { key: '133470cf3a81530602439f5d6d50969c47da8be2', 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: '0dd2e0ef0a89f300910a422c6e4cdcb2e77034b5', class: "bs-composer__controls-row" }, !this.hideAttach && (h("button", { key: '679d8b7b4d7746478f3e72cdab7ebf4e01971379', type: "button", part: "attach", class: "bs-composer__attach", "aria-label": this.attachLabel, onClick: this.onAttachClick }, h(PlusIcon, { key: '10823628845def9ee1012f3e03835ffd480d1010' }))), 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: 'dcea5fdc083162c99d0deb6b28e4d79ddf27729e', 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: '82d6694869eef61d66e92d0eb1b183c5ed086ec0', 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: '9691f66fd87500bce4f9abc9da7d3b27994cf47f', 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: 'ebbd0bf0fd48f4f7dd498f63c0c47530752adfd0', role: this.roleForType(), "aria-busy": this.loading ? 'true' : undefined, class: `bs-composer-status-banner bs-composer-status-banner--${this.type}` }, h("div", { key: '9af3ef0c5afcba7c4ab3fdad3442ea5696c509c2', class: "bs-composer-status-banner__message-group" }, this.showIcon && (h("span", { key: '35ad9aa2b1909c24f9b0741287f97b233266bcff', part: "icon", class: "bs-composer-status-banner__icon" }, h("slot", { key: '6969bf12d42bb6e8d9fcd01c217eee35bee6d9b9', name: "icon" }, this.renderDefaultIcon()))), h("p", { key: '73d5fc2bc36eccd275669765c160b1d80f8d7a8b', part: "message", class: "bs-composer-status-banner__message" }, this.message)), this.showButton && (h("button", { key: '153406f12ee8b431d15d554ba41ab17925063e87', type: "button", part: "action", class: "bs-composer-status-banner__action", onClick: this.onActionClick }, this.actionLabel)), this.allowClose && (h("button", { key: '13f9ffa9c73e02edc4290f6ef6085c2f035834fb', type: "button", part: "close", class: "bs-composer-status-banner__close", "aria-label": this.closeLabel, onClick: this.onCloseClick }, h(CloseIcon, { key: '29836806cc1abff20fc163792ad45f5ecd891f2b' })))));
+        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: '459962926408474dee1da84fad17a66a5e849490', style: { '--bs-container-padding-token': `var(--bs-spacing-${pad})` } }, h("slot", { key: '395c3e7c75e153c25acb045211df7cd9da67e302' })));
+        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: '3d8e5b69b6d41002e5af375573f47aec0e117a38', part: "table", class: "bs-data-table" }, h("thead", { key: 'ea97468d460ec2b7ef4b238a335fe05f049a1f0f', part: "head" }, h("tr", { key: 'cb73245678610583887157e314aa89c080390022' }, this.selectable && (h("th", { key: '45df220057b0b2e6698ebc29424dc6c6055799c4', class: "bs-data-table__select-col" }, this.rows.length > 0 && (h("input", { key: '542ee807044a65c5ccf8e9285ece9584f921dff2', 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: 'cd2b2ef74629630e166b0c9b4dc0a4ea339d4de6', 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: 'b3223172226fd0235de02a345dd50ac01668f201', part: "container", class: "bs-datepicker", surface: "raised" }, h("div", { key: '071b0d1398a2af8c991fa734652ca5e642570113', class: "bs-datepicker__body" }, this.renderHeader(), h("div", { key: '46dc879cb539d250fba48796dbfafd99983c7014', part: "nav", class: "bs-datepicker__nav" }, h("button", { key: '7973540e1b7263f3a0df95b650c7b7481503d4d6', part: "prev", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.previousLabel, onClick: () => this.moveView(-1) }, h("svg", { key: 'e853ca7c87f32493da791883c36c9039a1752994', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: 'e9f6f3e3bc2d0c82ce00cbd30873a53777007d6c', d: "M15 18L9 12L15 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("div", { key: 'a7af2ef7a4a05bd69d5ba8d19a6c79826a865490', part: "title", class: "bs-datepicker__title", "aria-live": "polite" }, this.titleText()), h("button", { key: 'e7f3122a2ca398cd3d4274918f9244368ac8166c', part: "next", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.nextLabel, onClick: () => this.moveView(1) }, h("svg", { key: '32e3810f46adddff1b1081bab573a01918b05c69', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: '12086f1d7d8c52a25fe257d0bf2565760019a9c3', d: "M9 18L15 12L9 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: '47b30d7d4f56a94947418b92fe6346640dd60d69', part: "grid", class: "bs-datepicker__grid", role: "grid", "aria-label": this.titleText() }, h("div", { key: '6a36e8becdfb932c3a25614f46df71a6bc6419f8', 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: '732403f417d234e6d8b43aa6fbb2d1096fe817bd', part: "container", class: "bs-description-item" }, h("div", { key: '35fb60b1130d54ed72ff2aa6c7af109861490705', class: "bs-description-item__group" }, h("dt", { key: '1371a6cde4d09830bd734db6c30f240fa7f4cdc0', part: "term", class: "bs-description-item__term" }, h("slot", { key: '386095bd4b98b51f254db2cbb4524bcb2cdfb667', name: "term" }, this.term)), h("dd", { key: '074a3115bcd11b34b3eb35ff3b69460172352280', part: "description", class: "bs-description-item__description" }, h("slot", { key: 'fd34a6f7152805500b80e9983ec57e0805edff4c' }, 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: 'defde2a3579750c2fcfd049009f2b274c236c760', part: "list", class: "bs-description-list", role: "group", "aria-label": this.ariaLabel ?? undefined }, h("slot", { key: 'e9d3604c0df86f94a0c1e7b0f2ed7c92852ced91', 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: 'b21a5efb3d519b388b2219e4be93b731e4efadce', ...a11y }, h("div", { key: '92e98b2b345cec22215effc6dc6fcd35bf9e196b', 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: '1d6d773e2fb666d3471b5097d1ba3816cea2f838', part: "popover", open: this.open, placement: this.placement, onBsOpenChange: this.onPopoverOpenChange }, h("slot", { key: '8b3306ec9fb0ff3f8738734dfdbf86aa2ee11316', name: "trigger", slot: "trigger", onSlotchange: this.syncTrigger, ref: el => (this.triggerSlot = el) }), h("slot", { key: '357ae81d2b344310c51e4b05f7be0dc1eb6ab0f1' })));
+        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"; }