@brandsync/wc 1.15.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: 'e886c7df63af6d741175aa81bc6390be600e371b', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: '365eae17c25fd6a3cc69c9ff01a28ce81eca11f8' })));
+        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: '2d4a54df61b047dab4531362aee81f5d9728818b', 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: '5ddaa17999d79962d279b927d659f592a2dccc81', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, h("slot", { key: '41033aa1950751d8565eec3d04af3570120cda58', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'eb077b5082815adee640c53fa4396cccf1d81cad', part: "label", class: "bs-menu-item__label" }, h("slot", { key: 'cfb15ca71fd157aebfb0380e2eaac791bd50b051' }))));
+        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-list/bs-message-list.js

@@ -75,7 +75,7 @@ export class BsMessageList {
         }
     };
     render() {
-        return (h("div", { key: '975306593610d06410c0c0c8486a4a2802c866f1', class: "bs-message-list" }, h("div", { key: 'ce773c0fafcbf5491539b05b03970c8d52263f61', 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: 'fdf3265e567c3756c665d007c9117a6de0bf6a8c' })), this.showScrollButton && (h("bs-icon-button", { key: 'd7ce5fc99e25bb870eeefb2e89af2fdbb3d6e366', part: "scroll-to-latest", class: "bs-message-list__scroll", variant: "neutral", ariaLabel: this.scrollToLatestLabel, onClick: () => this.scrollToLatest() }, h("svg", { key: 'a38a17ec2733477935c3a3496451e6c55243b905', width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: '99af4b6c21da2c66f4a12f395dfaeef7df4b8557', 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: '06cb2459f56b6e12d2c2cefcf2a1ce1124777043', "aria-label": this.navLabel }, h("ul", { key: '43d5ed118491fab134ce246b180246376f3ac682', part: "list", class: "bs-pagination__list" }, h("li", { key: 'd7f3aec6470fe62a0deabcf836d0841fd29a31eb', part: "item", class: "bs-pagination__item" }, h("button", { key: 'f14cfdc9080113c26971535eb25d56918c7a980c', 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: '8db797703e6a8af9e396362cb544dc106624f2b9' }))), 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: '9a7f5d781c7ba8e6403bd53e0b333943ef6df45e', part: "item", class: "bs-pagination__item" }, h("button", { key: '8f745ebaf087a8c81119fb96c74ec60fbb57c711', 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: '1a1ca7605f8eaeda1f6728cb9936388254797c3f' }))))));
+        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-radio/bs-radio.js

@@ -104,7 +104,7 @@ export class BsRadio {
         }
     };
     render() {
-        return (h("label", { key: '1465269cf2bc9815b0c6e4600d55f7e5956485bf', class: `bs-radio ${this.disabled ? 'bs-radio--disabled' : ''}` }, h("input", { key: '40b159566b7d65e0262e49abe28e1edb9e48ca52', 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: 'a749940d33c9278b896d6dce5afed44303001bd5', class: "bs-radio__hit-area" }, h("span", { key: 'bd6ab2f86f6e33da8c36bdae8053e739ead1da01', class: "bs-radio__state-layer" }, h("span", { key: '5397567009a5515f1173c4588ffd726e8f659406', part: "circle", class: `bs-radio__circle ${this.checked ? 'bs-radio__circle--selected' : ''}` }, this.checked && h("span", { key: 'b3921cef5b6d3c324cc4ab13f8f9e293e6873cfb', part: "dot", class: "bs-radio__dot" })))), h("span", { key: '5dc29a0aaeb10c5ab8bb162b8f00929576f763d3', part: "label", class: "bs-radio__label" }, h("slot", { key: 'd224abc131b4669034a8bc3018dbfaa4d976d640' }))));
+        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"; }

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

@@ -51,8 +51,8 @@ export class BsSourceLink {
     };
     render() {
         const inner = [
-            h("span", { key: 'e693ffb8cd5d0fc8c8f602868d17a7b41735a470', class: "bs-source-link__left" }, h("span", { key: '685b3dfbee1ece7cb3ba8cb2c593836a6b557ab6', class: "bs-source-link__filename-row" }, h("span", { key: '4888e161fef6c69a889f29dcd90577904aea81a0', part: "icon", class: "bs-source-link__icon" }, h("slot", { key: '806c2219ca588ec505a1e6ea62ebb5e171fbb1ef', name: "icon" }, h(FileTextIcon, { key: '208c43fdfe05fb6f7c987fc760bc37ab9dc7faef' }))), h("p", { key: 'bf34fc21cf242f290c0220f3fd216616f2042fed', part: "filename", class: "bs-source-link__filename" }, this.fileName)), h("span", { key: '2924ba8f19ab78096a532e08946ad5047ab04387', class: "bs-source-link__meta" }, this.sourceName && (h("span", { key: 'b638eea6c0c05f3b5b7eb6f4c02f94910a5aa1fa', part: "source", class: "bs-source-link__source" }, this.sourceName)), this.sourceName && this.version && h("span", { key: '5d407c3a10813d7f85a1b6a99e3e869e6ce28b8b', class: "bs-source-link__dot", "aria-hidden": "true" }), this.version && (h("span", { key: 'b25df35eae4fe62bdf1e745dd8f478792adb0129', part: "version", class: "bs-source-link__version" }, this.version)))),
-            h("span", { key: '263a19dd6402cba9057a543921ff669b323b58ac', part: "arrow", class: "bs-source-link__arrow", "aria-hidden": "true" }, h(ArrowUpRightIcon, { key: '7d2baa2d8f13fe3b6cbd2abed2c6096d5076c667' })),
+            h("span", { key: '3d00fafba4a8fde90e505901414b2f69cc357f09', class: "bs-source-link__left" }, h("span", { key: '3f72b63198834ab9d99e772d4299c762c5f258b1', class: "bs-source-link__filename-row" }, h("span", { key: 'cdf084aa7cec2d47d8a641550b791bd5321e3f75', part: "icon", class: "bs-source-link__icon" }, h("slot", { key: 'e43bab36dd3ea255d4a8d2a06e87d6580e2e74ce', name: "icon" }, h(FileTextIcon, { key: 'f9aa3540274d3c9394f56db184b28a1255f70314' }))), h("p", { key: '9207d20bcf4f4abcd5dd4ce0c95feb2a923e5229', part: "filename", class: "bs-source-link__filename" }, this.fileName)), h("span", { key: 'c11cecb430fb25b8fe59b56d8bdcd1e1c4d1afd1', class: "bs-source-link__meta" }, this.sourceName && (h("span", { key: '9a532dc663f902d4392d09213cd9529026d36eb9', part: "source", class: "bs-source-link__source" }, this.sourceName)), this.sourceName && this.version && h("span", { key: '969374f25e3109ad92f3ba1a1b9b24477ddeaf93', class: "bs-source-link__dot", "aria-hidden": "true" }), this.version && (h("span", { key: '6bdbf5854e631344e0545acb496a4f10cce914ac', part: "version", class: "bs-source-link__version" }, this.version)))),
+            h("span", { key: '1b1096caa42934fbd71408a7ce0b0d89ea77a554', part: "arrow", class: "bs-source-link__arrow", "aria-hidden": "true" }, h(ArrowUpRightIcon, { key: '0170f5d95af6e27964cb7b51c63520cd691224ed' })),
         ];
         return this.href ? (h("a", { class: "bs-source-link", href: this.href, target: this.target, rel: "noopener noreferrer", onClick: this.onClick }, inner)) : (h("button", { type: "button", class: "bs-source-link", onClick: this.onClick }, inner));
     }

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

@@ -62,7 +62,7 @@ export class BsStepper {
     }
     render() {
         // role="list" so each bs-stepper-step's role="listitem" has the required parent.
-        return (h(Host, { key: '974bd59785233de47d55750ede0a3d823ff11c75', role: "list" }, h("slot", { key: 'ce637c2c5631329c747897c66ec2cca9e6f738fb', onSlotchange: this.onSlotChange })));
+        return (h(Host, { key: 'a7e2549511e9899efdde9adbcaacae876d12a36d', role: "list" }, h("slot", { key: 'e2587a0139435b5d09ef591746f03020cc01c4b7', onSlotchange: this.onSlotChange })));
     }
     static get is() { return "bs-stepper"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-tab/bs-inline-tab/bs-inline-tab.js

@@ -94,7 +94,7 @@ export class BsInlineTab {
     };
     render() {
         const iconOnly = this.hasIcon && !this.hasLabel;
-        return (h("button", { key: '4b8df7a5f37f0aad60679cbdd3bd03cb20482ba7', type: "button", part: "tab", role: "tab", class: `bs-inline-tab ${this.selected ? 'bs-inline-tab--selected' : ''} ${this.disabled ? 'bs-inline-tab--disabled' : ''} ${iconOnly ? 'bs-inline-tab--icon-only' : ''} ${this.hasIcon ? 'bs-inline-tab--has-icon' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, tabIndex: this.tabbable === undefined ? undefined : this.tabbable ? 0 : -1, onClick: this.onClick }, h("span", { key: '037cdaae4331e050b5c02083d1776bb5509ff92b', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, h("slot", { key: '3b67b01e65434c35545fc9f06dab7bb871362001', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'd41611429e951d13df23521f938217716f2afacd', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, h("slot", { key: '8ea82e8ecc120c9961b8288a1162ec03ac0223bf', onSlotchange: this.onLabelSlotchange }))));
+        return (h("button", { key: 'f1e23c86e704fca62991ceaf662a93aae674728f', type: "button", part: "tab", role: "tab", class: `bs-inline-tab ${this.selected ? 'bs-inline-tab--selected' : ''} ${this.disabled ? 'bs-inline-tab--disabled' : ''} ${iconOnly ? 'bs-inline-tab--icon-only' : ''} ${this.hasIcon ? 'bs-inline-tab--has-icon' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, tabIndex: this.tabbable === undefined ? undefined : this.tabbable ? 0 : -1, onClick: this.onClick }, h("span", { key: '67bcaa27f2e31e9fe6e96b7c76282c007ae26645', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, h("slot", { key: '207eb1515e056ed6d84ecf6a88e33e1c0d36b5d6', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'bb75375e4cadbcfb27b56ff27df160ad5537b97f', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, h("slot", { key: 'f0b7ff382a8b2d5427def19194a19a18ca057821', onSlotchange: this.onLabelSlotchange }))));
     }
     static get is() { return "bs-inline-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -42,7 +42,7 @@ export class BsTooltip {
      */
     placement = 'top';
     render() {
-        return (h("div", { key: 'f41f09865c1604e9c6f42d77a007ebef233d3b20', class: "bs-tooltip" }, h("span", { key: 'c963a9ffaedeb05e4b6787509e683f20fbd5d893', part: "arrow", class: "bs-tooltip__arrow" }), h("div", { key: 'ac5c26e3fded66c18cc563b33626645d6049f9e2', part: "bubble", class: "bs-tooltip__bubble" }, h("slot", { key: '662c27547a391756b7d1a98d1154c0e01690e110' }))));
+        return (h("div", { key: 'e55b4605c7b2293c533ba267d7af4f4832079749', class: "bs-tooltip" }, h("span", { key: '67f361a8f7600897914b2257346f42f837103e82', part: "arrow", class: "bs-tooltip__arrow" }), h("div", { key: '3dba38a0960caa3ac0efded8d152c1e6c6ab0d5b', part: "bubble", class: "bs-tooltip__bubble" }, h("slot", { key: '6b6d297440f1386d134911c1f219f441a4251d9f' }))));
     }
     static get is() { return "bs-tooltip"; }
     static get encapsulation() { return "shadow"; }