@brandsync/wc 1.14.0 → 1.16.0

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

@@ -0,0 +1,343 @@
+import { Host, h } from "@stencil/core";
+/**
+ * A single row of a list: optional leading media (avatar, icon, image), a label, a description and
+ * optional support text, and an optional trailing caret or custom trailing content.
+ *
+ * ## When to use
+ * - As a child of `bs-list`, one per record, person, file or option.
+ * - Standalone as a plain information row (non-interactive), or with `interactive` as a button-like row.
+ *
+ * ## When not to use
+ * - A popup list of actions -- use `bs-menu` / `bs-menu-item`.
+ * - App navigation with an active route -- use `bs-navigation-drawer-item`.
+ * - Tabular data with columns, sorting or paging -- use `bs-data-table`.
+ *
+ * Composed from: leading media (`bs-avatar`) and trailing controls (`bs-icon-button`) are supplied by the
+ * consumer through the `leading` and `trailing` slots; the row itself only reserves layout. The default
+ * trailing caret is inline SVG.
+ *
+ * Roles are driven by the parent `bs-list` (via `selectionRole`). Standalone, the row has no role
+ * (`listitem` is only valid inside a list) unless `interactive` is set, which makes it a focusable
+ * `role="button"`.
+ *
+ * @slot leading - Leading media: a `bs-avatar size="lg"` (64px), a 32px icon, or a 72x56 `<img>`.
+ * @slot trailing - Replaces the default caret. Rendered when `showArrow` is set or the slot has content.
+ * @slot - Rich content that replaces `label`, `description` and `supportText` entirely.
+ * @part container - The row.
+ * @part leading - Wrapper around the leading slot.
+ * @part content - The text column.
+ * @part label - The label line.
+ * @part description - The description line.
+ * @part support-text - The support text line.
+ * @part trailing - Wrapper around the trailing slot / caret.
+ * @prop --bs-list-item-min-height - Minimum row height. Aliased to `--bs-spacing-1000`.
+ * @prop --bs-list-item-padding-y - Aliased to `--bs-spacing-150`.
+ * @prop --bs-list-item-padding-x - Aliased to `--bs-spacing-200`.
+ * @prop --bs-list-item-gap - Gap between leading, content and trailing. Aliased to `--bs-spacing-200`.
+ * @prop --bs-list-item-content-gap - Gap between text lines. Aliased to `--bs-spacing-25`.
+ * @prop --bs-list-item-radius - Aliased to `--bs-border-radius-100`.
+ * @prop --bs-list-item-bg - Enabled background. `transparent`.
+ * @prop --bs-list-item-bg-hover - Aliased to `--bs-surface-hover`.
+ * @prop --bs-list-item-bg-pressed - Aliased to `--bs-surface-pressed`.
+ * @prop --bs-list-item-bg-focus - Aliased to `--bs-surface-focus`.
+ * @prop --bs-list-item-bg-selected - Aliased to `--bs-surface-selected`.
+ * @prop --bs-list-item-bg-selected-hover - Aliased to `--bs-surface-selected-hover`.
+ * @prop --bs-list-item-bg-selected-pressed - Aliased to `--bs-surface-selected-pressed`.
+ * @prop --bs-list-item-bg-selected-focus - Aliased to `--bs-surface-selected-focus`.
+ * @prop --bs-list-item-bg-disabled - Aliased to `--bs-surface-action-disabled`.
+ * @prop --bs-list-item-color - Text colour. Aliased to `--bs-text-default`.
+ * @prop --bs-list-item-color-disabled - Aliased to `--bs-text-on-disabled`.
+ * @prop --bs-list-item-focus-ring - Focus ring colour. Aliased to `--bs-border-neutral-focus`.
+ * @prop --bs-list-item-image-width - Leading image width. 72px.
+ * @prop --bs-list-item-image-height - Leading image height. 56px.
+ */
+export class BsListItem {
+    el;
+    /** First text line (semibold). */
+    label = null;
+    /** Second text line (the "paragraph"). */
+    description = null;
+    /** Optional third text line. */
+    supportText = null;
+    /** Marks the row as selected. Managed by the parent `bs-list` when it is `selectable`. */
+    selected = false;
+    /** Disables the row: dimmed, not focusable, no click event. */
+    disabled = false;
+    /** Shows a trailing caret (unless the `trailing` slot has content). */
+    showArrow = false;
+    /** Identifies the item; emitted by `bsItemClick` and matched against `bs-list`'s `value`. */
+    value = null;
+    /** Makes a standalone row a focusable `role="button"` that emits `bsItemClick`. */
+    interactive = false;
+    /** Set by the parent `bs-list`: `listitem` (plain list) or `option` (selectable list). Do not set by hand. */
+    selectionRole = null;
+    hasLeading = false;
+    hasTrailing = false;
+    hasDefault = false;
+    /** Fires on click / Enter / Space when the row is interactive and not disabled. Payload is `value`. */
+    bsItemClick;
+    get isInteractive() {
+        return this.selectionRole === 'option' || this.interactive;
+    }
+    activate() {
+        if (this.disabled || !this.isInteractive)
+            return;
+        this.bsItemClick.emit(this.value);
+    }
+    onClick() {
+        this.activate();
+    }
+    onKeyDown(ev) {
+        if (ev.target !== this.el)
+            return;
+        if (ev.key === 'Enter' || ev.key === ' ') {
+            ev.preventDefault();
+            this.activate();
+        }
+    }
+    slotHas = (ev) => ev.target.assignedNodes({ flatten: true }).some(n => n.nodeType === 1 || (n.textContent || '').trim() !== '');
+    render() {
+        const interactive = this.isInteractive;
+        const role = this.selectionRole === 'option' ? 'option' : this.selectionRole === 'listitem' ? 'listitem' : this.interactive ? 'button' : undefined;
+        const standaloneFocusable = this.interactive && !this.selectionRole && !this.disabled;
+        const showTrailing = this.showArrow || this.hasTrailing;
+        return (h(Host, { key: 'b7e1ad2635a02bace4a6f53a397ac9a70f887b43', role: role, tabindex: standaloneFocusable ? '0' : undefined, "aria-selected": this.selectionRole === 'option' ? String(this.selected) : undefined, "aria-disabled": this.disabled ? 'true' : undefined, class: { 'bs-list-item--interactive': interactive && !this.disabled } }, h("div", { key: 'b197e2ef9b36a003fef75d2c47588483b33a63d5', part: "container", class: "bs-list-item" }, h("div", { key: '3cdd3bb2bdf76bf4388299e1097b59a8c0902363', part: "leading", class: { 'bs-list-item__leading': true, 'bs-list-item__leading--has-content': this.hasLeading } }, h("slot", { key: 'e4d3e156c25fb8f3063ae6c9de843e1ed60458a1', name: "leading", onSlotchange: (e) => (this.hasLeading = this.slotHas(e)) })), h("div", { key: '3a8c79aa044f103d2618333929bfed0cdce870e7', part: "content", class: "bs-list-item__content" }, !this.hasDefault && this.label && (h("div", { key: 'a0123e4b7663553140f3dd17c95a450edc379bd8', part: "label", class: "bs-list-item__label" }, this.label)), !this.hasDefault && this.description && (h("div", { key: '8275c24aed7bda59f7472d8d0ded4e830527009b', part: "description", class: "bs-list-item__description" }, this.description)), !this.hasDefault && this.supportText && (h("div", { key: '06e6ba4b185af790ed46ae362b6aa2cc0376123b', part: "support-text", class: "bs-list-item__support" }, this.supportText)), h("slot", { key: '00302f710e6433920cf7bd91730214ebcfccad4d', onSlotchange: (e) => (this.hasDefault = this.slotHas(e)) })), h("div", { key: '8c9506c0b3513a2fca1ad62702c7aa9bc118141b', part: "trailing", class: { 'bs-list-item__trailing': true, 'bs-list-item__trailing--shown': showTrailing } }, h("slot", { key: '3a3ec60f0483ba864addd4669ea6d1e6f261bb78', name: "trailing", onSlotchange: (e) => (this.hasTrailing = this.slotHas(e)) }, this.showArrow && (h("svg", { key: 'cab7a817530222313bec049106a68e622a6b14e2', viewBox: "0 0 32 32", width: "32", height: "32", fill: "none", "aria-hidden": "true" }, h("path", { key: 'ad794e820e1e36c1f4a22d9aac789a42c25e9056', d: "M12 7L21 16L12 25", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
+    }
+    static get is() { return "bs-list-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-list-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-list-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "First text line (semibold)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "null"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Second text line (the \"paragraph\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description",
+                "defaultValue": "null"
+            },
+            "supportText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional third text line."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "support-text",
+                "defaultValue": "null"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks the row as selected. Managed by the parent `bs-list` when it is `selectable`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selected",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the row: dimmed, not focusable, no click event."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "showArrow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows a trailing caret (unless the `trailing` slot has content)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-arrow",
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Identifies the item; emitted by `bsItemClick` and matched against `bs-list`'s `value`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "null"
+            },
+            "interactive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes a standalone row a focusable `role=\"button\"` that emits `bsItemClick`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "interactive",
+                "defaultValue": "false"
+            },
+            "selectionRole": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'listitem' | 'option' | null",
+                    "resolved": "\"listitem\" | \"option\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set by the parent `bs-list`: `listitem` (plain list) or `option` (selectable list). Do not set by hand."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selection-role",
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasLeading": {},
+            "hasTrailing": {},
+            "hasDefault": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsItemClick",
+                "name": "bsItemClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires on click / Enter / Space when the row is interactive and not disabled. Payload is `value`."
+                },
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "onClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "onKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

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

@@ -0,0 +1,86 @@
+import { html } from "lit";
+import { componentDescription } from "../../stories-utils";
+const imageSrc = 'data:image/svg+xml;utf8,' +
+    encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="144" height="112" viewBox="0 0 144 112"><rect width="144" height="112" fill="#9aa3b5"/><circle cx="48" cy="42" r="14" fill="#e5e7eb"/><path d="M0 112L52 62L88 96L108 78L144 112Z" fill="#5b6478"/></svg>');
+const plusIcon = html `<svg slot="leading" viewBox="0 0 32 32" fill="none" aria-hidden="true">
+  <path d="M16 7V25M7 16H25" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+</svg>`;
+const meta = {
+    title: 'Components/bs-list-item',
+    parameters: { docs: { description: { component: componentDescription('bs-list-item') } } },
+    argTypes: {
+        label: { control: 'text' },
+        description: { control: 'text' },
+        supportText: { control: 'text' },
+        selected: { control: 'boolean' },
+        disabled: { control: 'boolean' },
+        showArrow: { control: 'boolean' },
+        interactive: { control: 'boolean' },
+    },
+    args: {
+        label: 'Label',
+        description: 'Paragraph',
+        supportText: '',
+        selected: false,
+        disabled: false,
+        showArrow: false,
+        interactive: true,
+    },
+    render: args => html `
+    <div style="width: 360px;">
+      <bs-list-item
+        label=${args.label}
+        description=${args.description}
+        support-text=${args.supportText}
+        ?selected=${args.selected}
+        ?disabled=${args.disabled}
+        ?show-arrow=${args.showArrow}
+        ?interactive=${args.interactive}
+      ></bs-list-item>
+    </div>
+  `,
+};
+export default meta;
+export const Default = {};
+export const Text = { name: 'Leading: text only' };
+export const Avatar = {
+    name: 'Leading: avatar',
+    render: args => html `
+    <div style="width: 360px;">
+      <bs-list-item label=${args.label} description=${args.description} ?interactive=${args.interactive}>
+        <bs-avatar slot="leading" type="initials" initials="SL" size="lg" aria-label="Sam Lee"></bs-avatar>
+      </bs-list-item>
+    </div>
+  `,
+};
+export const Icon = {
+    name: 'Leading: icon',
+    render: args => html `
+    <div style="width: 360px;">
+      <bs-list-item label=${args.label} description=${args.description} ?interactive=${args.interactive}>${plusIcon}</bs-list-item>
+    </div>
+  `,
+};
+export const Image = {
+    name: 'Leading: image',
+    render: args => html `
+    <div style="width: 360px;">
+      <bs-list-item label=${args.label} description=${args.description} ?interactive=${args.interactive}>
+        <img slot="leading" src=${imageSrc} alt="" />
+      </bs-list-item>
+    </div>
+  `,
+};
+export const Selected = { args: { selected: true } };
+export const Disabled = {
+    render: () => html `
+    <div style="width: 360px; display: grid; gap: 8px;">
+      <bs-list-item label="Label" description="Paragraph" disabled>
+        <img slot="leading" src=${imageSrc} alt="" />
+      </bs-list-item>
+      <bs-list-item label="Label" description="Paragraph" disabled selected></bs-list-item>
+    </div>
+  `,
+};
+export const WithArrow = { name: 'With arrow', args: { showArrow: true } };
+export const WithSupportText = { name: 'With support text', args: { supportText: 'Support text' } };

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

@@ -44,7 +44,7 @@ export class BsMenu {
         items[next].shadowRoot?.querySelector('button')?.focus();
     }
     render() {
-        return (h("div", { key: '931d856111c209026ceecfc7292336e3ffc95348', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: '773aeb60e85fd3c802da4dc9e78126f4a4543965' })));
+        return (h("div", { key: '0477b2c9c46e8f5e325cac9a4dbaab8bc750643b', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: 'e1c588bc649544c797b657dd0d5262415e5a60a4' })));
     }
     static get is() { return "bs-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { render, h, describe, it, expect } from "@stencil/vitest";
+import { userEvent } from "vitest/browser";
 describe('bs-menu-item', () => {
     it('renders a button with role="menuitem" and part="item"', async () => {
         const { root } = await render(h("bs-menu-item", null, "Read aloud"));
@@ -33,6 +34,11 @@ describe('bs-menu-item', () => {
     it('has no background by default (enabled state has no fill of its own)', async () => {
         const { root } = await render(h("bs-menu-item", null, "Read aloud"));
         const button = root.shadowRoot.querySelector('[part="item"]');
+        // The shared browser keeps its pointer where an earlier test left it, which can leave this
+        // item hovered (and mid-way through its background fade). Move the pointer away and let any
+        // transition finish before reading the resting background.
+        await userEvent.unhover(button);
+        await new Promise(r => setTimeout(r, 250));
         expect(getComputedStyle(button).backgroundColor).toBe('rgba(0, 0, 0, 0)');
     });
     it('applies disabled styling, sets the native disabled attribute and aria-disabled, when disabled is set', async () => {

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

@@ -47,7 +47,7 @@ export class BsMenuItem {
         this.bsSelect.emit();
     };
     render() {
-        return (h("button", { key: '1e0f7b552625b10087b75d9354e9e158cda10732', type: "button", part: "item", role: "menuitem", class: `bs-menu-item ${this.disabled ? 'bs-menu-item--disabled' : ''}`, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.onClick }, h("span", { key: '8ec17400e5157f4d34a9f67cb298912f430e4524', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, h("slot", { key: '3641aa2735310ada27c68c90a42f18489e77f0e9', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '9c60cb506418e1432b594b0f2ce8f9c4cbf925f6', part: "label", class: "bs-menu-item__label" }, h("slot", { key: '6369f08ae8797a21d498e89b701df3858e4ce575' }))));
+        return (h("button", { key: 'dc11eb96712a008d318aa3c4220202ecd7b7ce32', type: "button", part: "item", role: "menuitem", class: `bs-menu-item ${this.disabled ? 'bs-menu-item--disabled' : ''}`, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.onClick }, h("span", { key: 'f38f1192079cd6ddc68035f649f09c6afa2fe3d5', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, h("slot", { key: '2d49ecdd471e752267543323b637466af12dbd58', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '947b88175af07b7523d38786224c6e77b76de4ae', part: "label", class: "bs-menu-item__label" }, h("slot", { key: 'c564ce8f13882cc33f58fc45d7f8a6ddfc86f31d' }))));
     }
     static get is() { return "bs-menu-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -45,7 +45,7 @@ export class BsMessage {
     /** Delivery/render state. `error` uses error colours; `pending` dims the bubble and sets `aria-busy`. */
     status = 'default';
     render() {
-        return (h("div", { key: '76e0e1d307de73bca97c5a79b3ff607278311d3e', class: "bs-message", "aria-busy": this.status === 'pending' ? 'true' : undefined }, h("div", { key: '00c91e1ab7a3cf9e81401e36b50b331c0d7d2735', part: "avatar", class: "bs-message__avatar" }, h("slot", { key: 'a3b0577cbafcd699ecf37c3299757f76e88cd572', name: "avatar" })), h("div", { key: '10b3dc86e24ae0860fffccedb5aaa9fed78f44c5', class: "bs-message__column" }, h("bs-card", { key: '3a88a28a5e9cb9898562860daf576b4280a8e601', part: "container", class: "bs-message__bubble", surface: "base" }, h("div", { key: '95a9c8394c55789cbf7a976b16466d7a9593fae6', part: "content", class: "bs-message__content" }, h("slot", { key: '81c214388b65904f4e15bfae23ddbc34ed35e267' }))), h("div", { key: '27768ab59923180c6f31f7bce893fefa11c967d1', part: "footer", class: "bs-message__footer" }, h("slot", { key: '606f025032c40e01c2490b1d18441c1d2557beac', name: "footer" })), h("div", { key: '79acf174363c391a37ca1907ececf87c9c1cdb45', part: "timestamp", class: "bs-message__timestamp" }, h("slot", { key: '08060d46ea218a3c9315bd2fc89165c605e54ddd', name: "timestamp" }, this.timestamp && h("time", { key: 'a9829bf9725b3c41eb5032427822a2d6fbb2cb6f', dateTime: this.datetime }, this.timestamp))))));
+        return (h("div", { key: 'ca6cc1e08eca207f6aa9ff8f6dcf469f43935e82', class: "bs-message", "aria-busy": this.status === 'pending' ? 'true' : undefined }, h("div", { key: '4ca4239579648f898b88d39c73ec79d06afd1111', part: "avatar", class: "bs-message__avatar" }, h("slot", { key: 'e0fee937ebe6fb105a45b4f24ceee6c14fa3c5a1', name: "avatar" })), h("div", { key: '396fbeec6646fcae8c0b442cf15930450760b44c', class: "bs-message__column" }, h("bs-card", { key: 'c39915eda480acbdc8d463e3ef709cd76843d6fa', part: "container", class: "bs-message__bubble", surface: "base" }, h("div", { key: '54f53b103dbef163bd7afe903ceac965bc5fb881', part: "content", class: "bs-message__content" }, h("slot", { key: '6b4bb7918c443e38e3ac2e409e4207e11a071cb2' }))), h("div", { key: 'a1145d6701c160117fc0309647f9026abe454573', part: "footer", class: "bs-message__footer" }, h("slot", { key: '9c93b91f4748756b8ce07df059c1d9bed4928e21', name: "footer" })), h("div", { key: '26da0cad53e92d380bcfeef12ad61200f015d3a1', part: "timestamp", class: "bs-message__timestamp" }, h("slot", { key: 'c61bfb5fd138227897260a95bdcc9355e0668f86', name: "timestamp" }, this.timestamp && h("time", { key: '0e1a0c48657683613e9f02bd126a79471e6e9d2d', dateTime: this.datetime }, this.timestamp))))));
     }
     static get is() { return "bs-message"; }
     static get encapsulation() { return "shadow"; }

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

@@ -75,7 +75,7 @@ export class BsMessageList {
         }
     };
     render() {
-        return (h("div", { key: '188f548bf2663418ebd3dcda57fbd286b10c7eeb', class: "bs-message-list" }, h("div", { key: 'f6bd80892f1b9d08215027239d6de8736b468340', part: "viewport", class: "bs-message-list__viewport", role: "log", "aria-live": "polite", tabindex: "0", ref: el => (this.viewport = el), onScroll: this.onScroll }, h("slot", { key: '8b7670ce5566d4eb946693e67cc57ae9ad6243b4' })), this.showScrollButton && (h("bs-icon-button", { key: '597edb7c5f81db986839e403961d9b4a274b34c3', part: "scroll-to-latest", class: "bs-message-list__scroll", variant: "neutral", ariaLabel: this.scrollToLatestLabel, onClick: () => this.scrollToLatest() }, h("svg", { key: '5b95b7a87560b5e652834a132da9eee9b4295b59', width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: 'd93260a40a73539d9a712bc4928d947d819b8054', d: "M8 3v10M3.5 8.5L8 13l4.5-4.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))));
+        return (h("div", { key: 'a45bbcfbce995eedba2fafe705a98d4c972cf1a3', class: "bs-message-list" }, h("div", { key: 'b4cec2bee1ada6b76545b2445ba3e63be67203de', part: "viewport", class: "bs-message-list__viewport", role: "log", "aria-live": "polite", tabindex: "0", ref: el => (this.viewport = el), onScroll: this.onScroll }, h("slot", { key: '43fe188e8b0d1f7f3d45b9739a09036e2aa5731e' })), this.showScrollButton && (h("bs-icon-button", { key: 'b1e695d0ce230ec1c1af4509b3db07bb1a7d0a8f', part: "scroll-to-latest", class: "bs-message-list__scroll", variant: "neutral", ariaLabel: this.scrollToLatestLabel, onClick: () => this.scrollToLatest() }, h("svg", { key: '5e7ce1017e94b41f5f7f558ecba16ae1d29e5827', width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: '8ab498f7fec4e09442a2b4e2bec74aafc16435fb', d: "M8 3v10M3.5 8.5L8 13l4.5-4.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))));
     }
     static get is() { return "bs-message-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -91,7 +91,7 @@ export class BsPagination {
     }
     render() {
         const pageList = this.getPageList();
-        return (h("nav", { key: '96915c9c13aad90a4db232b78062618d99b3e48f', "aria-label": this.navLabel }, h("ul", { key: '57e51e0ab7da9ac5bfae840579195bee1d7b0642', part: "list", class: "bs-pagination__list" }, h("li", { key: '831d06deaa95f1992ee7fa80e54b672a05ca5c5c', part: "item", class: "bs-pagination__item" }, h("button", { key: '3b513f181a3f95aa39869f64eb023b27597e151d', part: "prev", type: "button", class: "bs-pagination__control", "aria-label": this.previousLabel, disabled: this.currentPage <= 1, onClick: () => this.goToPage(this.currentPage - 1) }, h(ChevronLeftIcon, { key: 'e9dc1c534f7bccb9c4e30c91a2dc7b2344e4a2dd' }))), pageList.map((item, index) => item === 'ellipsis' ? (h("li", { part: "item", class: "bs-pagination__item", key: `ellipsis-${index}` }, h("span", { part: "ellipsis", class: "bs-pagination__ellipsis", "aria-hidden": "true" }, h(EllipsisIcon, null)))) : (h("li", { part: "item", class: "bs-pagination__item", key: item }, h("button", { part: item === this.currentPage ? 'page current' : 'page', type: "button", class: `bs-pagination__control bs-pagination__page ${item === this.currentPage ? 'bs-pagination__page--current' : ''}`, "aria-label": `${this.pageLabel} ${item}`, "aria-current": item === this.currentPage ? 'page' : undefined, onClick: () => this.goToPage(item) }, item)))), h("li", { key: '2f24b7b2dfc20820eccf8805ae4f1036adfe4911', part: "item", class: "bs-pagination__item" }, h("button", { key: '2888093afa769f6bb9bf6b2d9c8ff111332bf7ab', part: "next", type: "button", class: "bs-pagination__control", "aria-label": this.nextLabel, disabled: this.currentPage >= this.safeTotalPages, onClick: () => this.goToPage(this.currentPage + 1) }, h(ChevronRightIcon, { key: 'eaed42626409dc0a5784ed6f99cdb84c8fc2e1cb' }))))));
+        return (h("nav", { key: '75dc1aebd26bfde72fc782d2a6cc90470d17300b', "aria-label": this.navLabel }, h("ul", { key: 'b278033a46239b2f980982acba26d07cd607588a', part: "list", class: "bs-pagination__list" }, h("li", { key: '23b6606829b277afcd3cf513c653c9d74aefda91', part: "item", class: "bs-pagination__item" }, h("button", { key: '6c476e3baa00f2f2ed35f544b092b4d338a95070', part: "prev", type: "button", class: "bs-pagination__control", "aria-label": this.previousLabel, disabled: this.currentPage <= 1, onClick: () => this.goToPage(this.currentPage - 1) }, h(ChevronLeftIcon, { key: '410770d471173960224a52b70ec05561ad0ccec0' }))), pageList.map((item, index) => item === 'ellipsis' ? (h("li", { part: "item", class: "bs-pagination__item", key: `ellipsis-${index}` }, h("span", { part: "ellipsis", class: "bs-pagination__ellipsis", "aria-hidden": "true" }, h(EllipsisIcon, null)))) : (h("li", { part: "item", class: "bs-pagination__item", key: item }, h("button", { part: item === this.currentPage ? 'page current' : 'page', type: "button", class: `bs-pagination__control bs-pagination__page ${item === this.currentPage ? 'bs-pagination__page--current' : ''}`, "aria-label": `${this.pageLabel} ${item}`, "aria-current": item === this.currentPage ? 'page' : undefined, onClick: () => this.goToPage(item) }, item)))), h("li", { key: 'aaf337dd6800ab752d99bf74d4326f49036d93cb', part: "item", class: "bs-pagination__item" }, h("button", { key: 'faa08c19e7b57de953c61d94acda1002046d7462', part: "next", type: "button", class: "bs-pagination__control", "aria-label": this.nextLabel, disabled: this.currentPage >= this.safeTotalPages, onClick: () => this.goToPage(this.currentPage + 1) }, h(ChevronRightIcon, { key: '1b6c790301b9e68b64854a8c989777d98134048a' }))))));
     }
     static get is() { return "bs-pagination"; }
     static get encapsulation() { return "shadow"; }

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

@@ -152,7 +152,7 @@ export class BsPopover {
         }
     };
     render() {
-        return (h("div", { key: 'e4e96eb40953abdd3f5f9a9169cfe2b9ad87d3b5', class: "bs-popover" }, h("div", { key: '6456d7cb3cba9e243015086095534cad82716711', part: "trigger", class: "bs-popover__trigger", "aria-haspopup": "true", "aria-expanded": String(this.open), "aria-controls": this.popupId, onClick: this.onTriggerClick, onKeyDown: this.onTriggerKeyDown }, h("slot", { key: '1a1d545bf0afc0a59e4f9f7f29bf359cc2264c65', name: "trigger", ref: el => (this.triggerSlot = el) })), h("div", { key: '8a1e1e3ade63f2cba665368f3bd2659ce659ee18', part: "popup", id: this.popupId, class: "bs-popover__popup", tabindex: "-1", hidden: !this.open, ref: el => (this.popupEl = el) }, h("slot", { key: 'abdeeb2105d00487a43f23dd6021c61b533e8139' }))));
+        return (h("div", { key: '230678d7440e218c133a315f4a15f7136043fd44', class: "bs-popover" }, h("div", { key: 'dd514d3e6771a4adc2a90bbe097736db3df7e2e0', part: "trigger", class: "bs-popover__trigger", "aria-haspopup": "true", "aria-expanded": String(this.open), "aria-controls": this.popupId, onClick: this.onTriggerClick, onKeyDown: this.onTriggerKeyDown }, h("slot", { key: 'ff258cd0e061ae599371f72599599d84d2a4e8a1', name: "trigger", ref: el => (this.triggerSlot = el) })), h("div", { key: '13396ff2f4e4bd65d725dd32dd0e39c072f32a79', part: "popup", id: this.popupId, class: "bs-popover__popup", tabindex: "-1", hidden: !this.open, ref: el => (this.popupEl = el) }, h("slot", { key: 'af116fe77709a8121e0c4bb4a3d49bd93bdc7c30' }))));
     }
     static get is() { return "bs-popover"; }
     static get encapsulation() { return "shadow"; }

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

@@ -69,7 +69,7 @@ export class BsProgress {
         const isDeterminate = this.type === 'determinate';
         const value = this.clampedValue;
         const dashOffset = circumference * (1 - value / 100);
-        return (h("div", { key: '2909533f8b4472a7c12c564c3b42b6456d5d1c80', part: "container", class: "bs-progress" }, h("div", { key: '3f41fc7f22d7c9eba13e859330aae4f6230af8ab', class: "bs-progress__box", style: { width: `${diameter}px`, height: `${diameter}px` }, role: "progressbar", "aria-label": this.ariaLabel, "aria-valuemin": isDeterminate ? '0' : undefined, "aria-valuemax": isDeterminate ? '100' : undefined, "aria-valuenow": isDeterminate ? String(value) : undefined, "aria-busy": isDeterminate ? undefined : 'true' }, isDeterminate ? (h("svg", { class: "bs-progress__ring", width: diameter, height: diameter, viewBox: `0 0 ${diameter} ${diameter}` }, h("circle", { part: "track", class: "bs-progress__track", cx: diameter / 2, cy: diameter / 2, r: radius, "stroke-width": this.strokeWidth, fill: "none" }), h("circle", { part: "arc", class: "bs-progress__arc", cx: diameter / 2, cy: diameter / 2, r: radius, "stroke-width": this.strokeWidth, fill: "none", "stroke-linecap": "round", "stroke-dasharray": circumference, "stroke-dashoffset": dashOffset }))) : (
+        return (h("div", { key: 'afa27ec8f954d6ff71f774e7de4f150e49df143c', part: "container", class: "bs-progress" }, h("div", { key: '31429f8a7e2e641b4de0ef7eb8e2d718107f4157', class: "bs-progress__box", style: { width: `${diameter}px`, height: `${diameter}px` }, role: "progressbar", "aria-label": this.ariaLabel, "aria-valuemin": isDeterminate ? '0' : undefined, "aria-valuemax": isDeterminate ? '100' : undefined, "aria-valuenow": isDeterminate ? String(value) : undefined, "aria-busy": isDeterminate ? undefined : 'true' }, isDeterminate ? (h("svg", { class: "bs-progress__ring", width: diameter, height: diameter, viewBox: `0 0 ${diameter} ${diameter}` }, h("circle", { part: "track", class: "bs-progress__track", cx: diameter / 2, cy: diameter / 2, r: radius, "stroke-width": this.strokeWidth, fill: "none" }), h("circle", { part: "arc", class: "bs-progress__arc", cx: diameter / 2, cy: diameter / 2, r: radius, "stroke-width": this.strokeWidth, fill: "none", "stroke-linecap": "round", "stroke-dasharray": circumference, "stroke-dashoffset": dashOffset }))) : (
         // Figma's indeterminate ring is a fading "comet tail" (transparent -> solid color),
         // not a flat-colored partial arc -- SVG has no angular/conic gradient primitive, so a
         // CSS conic-gradient (color varying by angle) + a radial-gradient mask (carving the
@@ -78,7 +78,7 @@ export class BsProgress {
         h("div", { part: "arc", class: "bs-progress__spinner", style: {
                 '--bs-progress-spinner-stroke-width': `${this.strokeWidth}px`,
                 '--bs-progress-spinner-sweep': `${INDETERMINATE_SWEEP_DEGREES}deg`,
-            } }))), isDeterminate && this.showLabel && (h("span", { key: '417f47612fc45127c4a1832a6cb4122ad16d9579', part: "label", class: `bs-progress__label bs-progress__label--${this.size}` }, value, "%"))));
+            } }))), isDeterminate && this.showLabel && (h("span", { key: '85634f6af94208a13bd46483b4d3465a64e89a42', part: "label", class: `bs-progress__label bs-progress__label--${this.size}` }, value, "%"))));
     }
     static get is() { return "bs-progress"; }
     static get encapsulation() { return "shadow"; }

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

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

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

@@ -168,7 +168,7 @@ export class BsQrCode {
         const buttonSize = this.size === 'sm' ? 'sm' : 'md';
         // Figma shows the unavailable actions as filled-disabled (grey) rather than a faded outline,
         // which is what bs-button's disabled primary looks like.
-        return (h("bs-card", { key: '01dc0befd273aecce2437e98987fa6a76555a65c', part: "container", class: "bs-qr-code", surface: "base" }, this.closable && (h("bs-icon-button", { key: 'b611e446cbaa4267f7cfcb6e1baa1352e316994c', part: "close", class: "bs-qr-code__close", variant: "subtle", size: "sm", ariaLabel: this.closeLabel, onClick: () => this.bsClose.emit() }, h("svg", { key: 'c3af9b06190a8d98e80a1ba5aa32a614cf706ef8', viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", "stroke-width": "1.6", "stroke-linecap": "round", "aria-hidden": "true" }, h("path", { key: 'bc86434823fabb3375bd2aa7c8382b33ed94e293', d: "M5 5L15 15M15 5L5 15" })))), h("div", { key: '95520bbba236876975ca8097f923162c9af84505', class: "bs-qr-code__body" }, h("div", { key: '1c5ab32fd408dfb874914848daf611d5ede8fc15', part: "head", class: "bs-qr-code__head" }, h("p", { key: '765b6700e9d73ad9858e7dfed25adba98d9f37a4', part: "title", class: "bs-qr-code__title" }, this.heading), this.description && (h("p", { key: '9994b60173dfdce115ab249122f29d17f8e530da', part: "description", class: "bs-qr-code__description" }, this.description))), h("div", { key: '9a32be6fa563ff3ed7f7825ce793cd1521989dbe', part: "qr", class: "bs-qr-code__qr" }, h("div", { key: '9aa3199f1d5dac68eb4b3d8c6e490199964715ab', part: "code", class: "bs-qr-code__code" }, h("slot", { key: 'e859ada22ca6dad597fb2d3c239662a51b43b39c', name: "code" }, this.renderMatrix()), h("div", { key: '49023d47353f7eac10d46d7be68be8691be50455', part: "logo", class: { 'bs-qr-code__logo': true, 'bs-qr-code__logo--visible': this.hasLogo } }, h("slot", { key: '53125aeb2c4891ca790268f9ef5ee3ba37cae5f0', name: "logo", onSlotchange: (ev) => (this.hasLogo = ev.target.assignedNodes().length > 0) }))), this.renderOverlay()), this.type === 'payment' && this.amount && (h("div", { key: '2714b2a6513da5442809292f78b31141ee77ce81', part: "amount", class: "bs-qr-code__amount" }, this.amountLabel && h("p", { key: '51573f23cf8d2c3a0b7e3df2a9ff212f18c92539', class: "bs-qr-code__amount-label" }, this.amountLabel), h("p", { key: 'dc7c005152c216ababde9282c385856e8d6b3b57', class: "bs-qr-code__amount-value" }, this.amount))), this.type === 'default' && this.url && (h("div", { key: 'a3f3c4d1ceea0ba079ca204a1acd5447551f86f4', part: "url", class: "bs-qr-code__url" }, this.url)), this.expiry && (h("bs-chip-informative", { key: '39d95354200ccf4cfbfc9dc3c15da200955fa2f5', part: "expiry", size: "md" }, h(TimerIcon, { key: '7244fd36a173052caf4db2e4f0f2ad05f3569341', slot: "icon" }), this.expiry)), showActions && (h("div", { key: 'f6c808132c0ca1d8af27b8aedf5cc5f86a3ba7e8', part: "actions", class: "bs-qr-code__actions" }, !this.hideDownload && (h("bs-button", { key: 'ff50126a297987518e4e174c08db438560671d95', part: "download", variant: interactive ? 'outlined' : 'primary', size: buttonSize, disabled: !interactive, onClick: () => interactive && this.bsDownload.emit() }, h(DownloadIcon, { key: 'e7c982907553a6607b3c941c77a4f88876c71c85', slot: "icon" }), this.downloadLabel)), !this.hideCopy && (h("bs-button", { key: 'bc603f4ba0a2bfa12112806b2eb2a04ccec60568', part: "copy", variant: interactive ? 'outlined' : 'primary', size: buttonSize, disabled: !interactive, onClick: () => interactive && this.onCopy() }, h(CopyIcon, { key: '35e27d196c9475f5b0be1dd0e389b699d08ec7db', slot: "icon" }), this.copyLabel)))))));
+        return (h("bs-card", { key: '8a78a58e189863a37ac0824e84c8da50d0f82c4c', part: "container", class: "bs-qr-code", surface: "base" }, this.closable && (h("bs-icon-button", { key: 'e771194dc383c40cbc9b4b6e2316d787dfda9e0f', part: "close", class: "bs-qr-code__close", variant: "subtle", size: "sm", ariaLabel: this.closeLabel, onClick: () => this.bsClose.emit() }, h("svg", { key: '2ee3bc0a83ec9c44f15ad906abc40d6f88598fec', viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", "stroke-width": "1.6", "stroke-linecap": "round", "aria-hidden": "true" }, h("path", { key: 'acb73db86f4af7c81c6aa8c71c458c3a1381c9ed', d: "M5 5L15 15M15 5L5 15" })))), h("div", { key: '48d25ac25dd6c3cd0b77d800cddc11b1f1a57206', class: "bs-qr-code__body" }, h("div", { key: '340cd0dc7d945b6b3dedd103909067d7c8e5ae91', part: "head", class: "bs-qr-code__head" }, h("p", { key: '022fda836023d01aee585926bfe1f227b1789bae', part: "title", class: "bs-qr-code__title" }, this.heading), this.description && (h("p", { key: 'f72976f2aafa5f66adf77db3ed21380ef26f3e0c', part: "description", class: "bs-qr-code__description" }, this.description))), h("div", { key: '865fcb97b32fea2fd3cfaa71e6fd91358906ec8f', part: "qr", class: "bs-qr-code__qr" }, h("div", { key: '295e823796a723e4a9ead87ab178133596920cd2', part: "code", class: "bs-qr-code__code" }, h("slot", { key: '26a87b0ec43d5b08dbabeb0addab57e698813918', name: "code" }, this.renderMatrix()), h("div", { key: 'd7355f6fc021333d12f70a2c75fc1cea1052120c', part: "logo", class: { 'bs-qr-code__logo': true, 'bs-qr-code__logo--visible': this.hasLogo } }, h("slot", { key: 'edecfcdc96b623d01dee5c18de4191051ea4f40b', name: "logo", onSlotchange: (ev) => (this.hasLogo = ev.target.assignedNodes().length > 0) }))), this.renderOverlay()), this.type === 'payment' && this.amount && (h("div", { key: '2efac5db58bbe7bfd1dc3d42ef3ce12d85bb42a5', part: "amount", class: "bs-qr-code__amount" }, this.amountLabel && h("p", { key: '0765abe8467bc7a1f312b71b043f05e365f1f9b3', class: "bs-qr-code__amount-label" }, this.amountLabel), h("p", { key: '65f41dcaf4f167cda93ce750e072ab94a38921eb', class: "bs-qr-code__amount-value" }, this.amount))), this.type === 'default' && this.url && (h("div", { key: 'da32b3ac2acfaf7523c24ce11cbca43236b196dd', part: "url", class: "bs-qr-code__url" }, this.url)), this.expiry && (h("bs-chip-informative", { key: '409328cdc5859c9c8e3d2be87b90b73cfc873cc2', part: "expiry", size: "md" }, h(TimerIcon, { key: '3752627cec20d06f351476da803d013aae832ea6', slot: "icon" }), this.expiry)), showActions && (h("div", { key: 'ad00fe126c5f5dfd9e6a713aa0bdd4cd70a869ca', part: "actions", class: "bs-qr-code__actions" }, !this.hideDownload && (h("bs-button", { key: '0964029df2c3a97a561b368dd167ccf1770a251f', part: "download", variant: interactive ? 'outlined' : 'primary', size: buttonSize, disabled: !interactive, onClick: () => interactive && this.bsDownload.emit() }, h(DownloadIcon, { key: 'e30c02777793dc41ea3437c58d0b229b7bb75510', slot: "icon" }), this.downloadLabel)), !this.hideCopy && (h("bs-button", { key: 'c845423f9652d79a099cd4466d06aa29152636ad', part: "copy", variant: interactive ? 'outlined' : 'primary', size: buttonSize, disabled: !interactive, onClick: () => interactive && this.onCopy() }, h(CopyIcon, { key: '443d3070916468e1bc1b015496ecaff3311b6565', slot: "icon" }), this.copyLabel)))))));
     }
     static get is() { return "bs-qr-code"; }
     static get encapsulation() { return "shadow"; }

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

@@ -104,7 +104,7 @@ export class BsRadio {
         }
     };
     render() {
-        return (h("label", { key: '5c69e7244183b1116d44e50079371d0bf29ac058', class: `bs-radio ${this.disabled ? 'bs-radio--disabled' : ''}` }, h("input", { key: 'f40a114f0e9fcb21ff0e7bb02876ded6979b7727', class: "bs-radio__input", type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, tabIndex: this.checked || !this.groupHasChecked ? 0 : -1, onKeyDown: this.onKeyDown, onChange: this.onChange }), h("span", { key: '4cca356fd757d34f24ec5d8a8a3a2517da004409', class: "bs-radio__hit-area" }, h("span", { key: '6beda905b88e822335ebf67a64eba5df86beb4a9', class: "bs-radio__state-layer" }, h("span", { key: '28e63967c2ad046f694c2097d2aec35f4ebcf843', part: "circle", class: `bs-radio__circle ${this.checked ? 'bs-radio__circle--selected' : ''}` }, this.checked && h("span", { key: 'cda8ba5bf3f5bf99564e6f0f1af115803e33f6c0', part: "dot", class: "bs-radio__dot" })))), h("span", { key: 'df59f8b97fb54cc037732a22412ec64464df8bdc', part: "label", class: "bs-radio__label" }, h("slot", { key: '154be3de3d6fe5aa0cb8fd7d806c28956a21e87d' }))));
+        return (h("label", { key: '679e926d0b4d4b35ee56345d71c228d72095ad85', class: `bs-radio ${this.disabled ? 'bs-radio--disabled' : ''}` }, h("input", { key: '0b4f6c15143d2779b2e51f6afdd0a9a77609534f', class: "bs-radio__input", type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, tabIndex: this.checked || !this.groupHasChecked ? 0 : -1, onKeyDown: this.onKeyDown, onChange: this.onChange }), h("span", { key: 'afffc290ff5e0128f80a8dae6fa3e489ae4bb0c7', class: "bs-radio__hit-area" }, h("span", { key: 'f4cc5c08e21fc197391ad7fb104e9c230ed6bf45', class: "bs-radio__state-layer" }, h("span", { key: '7d782c0e6727450068104ab09c8dfc83416c3849', part: "circle", class: `bs-radio__circle ${this.checked ? 'bs-radio__circle--selected' : ''}` }, this.checked && h("span", { key: 'aa6c34344fc1af8c7acd99f2cf4cc1f4ed04d021', part: "dot", class: "bs-radio__dot" })))), h("span", { key: '2abc4a24ea0220198842097e59b8223a7bb12d11', part: "label", class: "bs-radio__label" }, h("slot", { key: '9fada19e76e1a11964c119bc9f0b5b9f00c09893' }))));
     }
     static get is() { return "bs-radio"; }
     static get encapsulation() { return "shadow"; }