@brandsync/wc 1.3.0 → 1.5.0

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

@@ -0,0 +1,108 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+const columns = [
+    { key: 'name', label: 'Name' },
+    { key: 'status', label: 'Status' },
+];
+const rows = [
+    { id: 1, name: 'Amelia', status: 'Active' },
+    { id: 2, name: 'Noah', status: 'Active' },
+    { id: 3, name: 'Priya', status: 'On leave' },
+];
+describe('bs-data-table', () => {
+    describe('select-all checkbox', () => {
+        it('renders a select-all checkbox in the header when selectable', async () => {
+            const { root } = await render(h("bs-data-table", { selectable: true, columns: columns, rows: rows }));
+            const selectAll = root.shadowRoot.querySelector('thead input[type="checkbox"]');
+            expect(selectAll).not.toBeNull();
+            expect(selectAll.checked).toBe(false);
+            expect(selectAll.indeterminate).toBe(false);
+        });
+        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();
+        });
+        it('becomes indeterminate when some but not all rows are selected', async () => {
+            const { root, waitForChanges } = await render(h("bs-data-table", { selectable: true, columns: columns, rows: rows }));
+            const rowCheckbox = root.shadowRoot.querySelector('tbody input[type="checkbox"]');
+            rowCheckbox.checked = true;
+            rowCheckbox.dispatchEvent(new Event('change'));
+            await waitForChanges();
+            const selectAll = root.shadowRoot.querySelector('thead input[type="checkbox"]');
+            expect(selectAll.indeterminate).toBe(true);
+            expect(selectAll.checked).toBe(false);
+        });
+        it('is checked when every row is selected', async () => {
+            const { root, waitForChanges } = await render(h("bs-data-table", { selectable: true, columns: columns, rows: rows }));
+            const rowCheckboxes = Array.from(root.shadowRoot.querySelectorAll('tbody input[type="checkbox"]'));
+            for (const checkbox of rowCheckboxes) {
+                checkbox.checked = true;
+                checkbox.dispatchEvent(new Event('change'));
+            }
+            await waitForChanges();
+            const selectAll = root.shadowRoot.querySelector('thead input[type="checkbox"]');
+            expect(selectAll.checked).toBe(true);
+            expect(selectAll.indeterminate).toBe(false);
+        });
+        it('selects all rows and emits bsRowSelect for each row when clicked', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-data-table", { selectable: true, columns: columns, rows: rows }));
+            const selectSpy = spyOnEvent('bsRowSelect');
+            const selectAll = root.shadowRoot.querySelector('thead input[type="checkbox"]');
+            selectAll.checked = true;
+            selectAll.dispatchEvent(new Event('change'));
+            await waitForChanges();
+            expect(selectSpy).toHaveReceivedEventTimes(3);
+            const rowCheckboxes = Array.from(root.shadowRoot.querySelectorAll('tbody input[type="checkbox"]'));
+            expect(rowCheckboxes.every(checkbox => checkbox.checked)).toBe(true);
+        });
+        it('deselects all rows when unchecked', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-data-table", { selectable: true, columns: columns, rows: rows }));
+            const selectAll = root.shadowRoot.querySelector('thead input[type="checkbox"]');
+            selectAll.checked = true;
+            selectAll.dispatchEvent(new Event('change'));
+            await waitForChanges();
+            const selectSpy = spyOnEvent('bsRowSelect');
+            selectAll.checked = false;
+            selectAll.dispatchEvent(new Event('change'));
+            await waitForChanges();
+            expect(selectSpy).toHaveReceivedEventTimes(3);
+            const rowCheckboxes = Array.from(root.shadowRoot.querySelectorAll('tbody input[type="checkbox"]'));
+            expect(rowCheckboxes.every(checkbox => !checkbox.checked)).toBe(true);
+        });
+    });
+    describe('clearSelection()', () => {
+        it('resets selection state and emits bsRowSelect for previously selected rows', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-data-table", { selectable: true, columns: columns, rows: rows }));
+            const rowCheckbox = root.shadowRoot.querySelector('tbody input[type="checkbox"]');
+            rowCheckbox.checked = true;
+            rowCheckbox.dispatchEvent(new Event('change'));
+            await waitForChanges();
+            const selectSpy = spyOnEvent('bsRowSelect');
+            await root.clearSelection();
+            await waitForChanges();
+            expect(selectSpy).toHaveReceivedEventTimes(1);
+            expect(selectSpy).toHaveReceivedEventDetail({ id: 1, selected: false });
+            const checkboxesAfterClear = Array.from(root.shadowRoot.querySelectorAll('tbody input[type="checkbox"]'));
+            expect(checkboxesAfterClear.every(checkbox => !checkbox.checked)).toBe(true);
+        });
+        it('emits no event when nothing was selected', async () => {
+            const { root, spyOnEvent } = await render(h("bs-data-table", { selectable: true, columns: columns, rows: rows }));
+            const selectSpy = spyOnEvent('bsRowSelect');
+            await root.clearSelection();
+            expect(selectSpy).toHaveReceivedEventTimes(0);
+        });
+    });
+    describe('cellRenderer', () => {
+        it('renders default cell values as escaped text, never interpreted as HTML', async () => {
+            const maliciousRows = [{ id: 1, name: '<img src=x onerror="window.__xss = true">', status: 'Active' }];
+            const { root } = await render(h("bs-data-table", { columns: columns, rows: maliciousRows }));
+            const cell = root.shadowRoot.querySelector('tbody td');
+            expect(cell.querySelector('img')).toBeNull();
+            expect(cell.textContent).toBe('<img src=x onerror="window.__xss = true">');
+        });
+        it('still allows cellRenderer to render trusted custom HTML when explicitly supplied', async () => {
+            const { root } = await render(h("bs-data-table", { columns: columns, rows: rows, cellRenderer: () => '<button type="button">Edit</button>' }));
+            const cell = root.shadowRoot.querySelector('tbody td');
+            expect(cell.querySelector('button')).not.toBeNull();
+        });
+    });
+});

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

@@ -1,5 +1,7 @@
 :host {
   display: block;
+  --bs-data-table-cell-padding-y: var(--bs-spacing-200);
+  --bs-data-table-cell-padding-x: var(--bs-spacing-300);
 }
 
 .bs-data-table {
@@ -12,7 +14,7 @@
 
 .bs-data-table__header-cell {
   text-align: left;
-  padding: var(--bs-spacing-200) var(--bs-spacing-300);
+  padding: var(--bs-data-table-cell-padding-y) var(--bs-data-table-cell-padding-x);
   border-bottom: 1px solid var(--bs-border-default);
   font-weight: var(--bs-font-weight-semibold);
   color: var(--bs-text-secondary);
@@ -45,12 +47,12 @@
 }
 
 .bs-data-table__cell {
-  padding: var(--bs-spacing-200) var(--bs-spacing-300);
+  padding: var(--bs-data-table-cell-padding-y) var(--bs-data-table-cell-padding-x);
   border-bottom: 1px solid var(--bs-border-default);
 }
 
 .bs-data-table__select-col {
   width: var(--bs-spacing-500);
-  padding: var(--bs-spacing-200) var(--bs-spacing-300);
+  padding: var(--bs-data-table-cell-padding-y) var(--bs-data-table-cell-padding-x);
   border-bottom: 1px solid var(--bs-border-default);
 }

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

@@ -53,12 +53,29 @@ export class BsDataTable {
         this.selectedIds = next;
         this.bsRowSelect.emit({ id: row.id, selected });
     };
+    onSelectAllChange = (ev) => {
+        const selected = ev.target.checked;
+        this.selectedIds = selected ? new Set(this.rows.map(row => row.id)) : new Set();
+        for (const row of this.rows) {
+            this.bsRowSelect.emit({ id: row.id, selected });
+        }
+    };
+    /** Clears the current row selection and emits `bsRowSelect` for each row that was selected, so
+     * parent-held selection state stays in sync. Lets consumers reset selection without remounting
+     * the whole table. */
+    async clearSelection() {
+        const previouslySelected = Array.from(this.selectedIds);
+        this.selectedIds = new Set();
+        for (const id of previouslySelected) {
+            this.bsRowSelect.emit({ id, selected: false });
+        }
+    }
     render() {
-        return (h("table", { key: 'c997c047867ae5d446eda4f2ad5260bd956b4255', part: "table", class: "bs-data-table" }, h("thead", { key: 'bdbe3f8c07ef23115d3a8a32a15e84a02e162894', part: "head" }, h("tr", { key: '84f7e89fefe44c680b397bd92bf2b8070e9b943d' }, this.selectable && h("th", { key: '925dbfa36580ef0818e2739ba602161668eedfd5', class: "bs-data-table__select-col" }), this.columns.map(column => {
+        return (h("table", { key: '0b894a3cac62202447a21d4dd982236ef60b4ed0', part: "table", class: "bs-data-table" }, h("thead", { key: '9af94643a3cd4702a7b6fcbe2f713a3fea6773a9', part: "head" }, h("tr", { key: '3f5680cea9daeecf078a11d19f7a77f3e4de3145' }, this.selectable && (h("th", { key: '053da4081fdd79727c5cee13f11f725e4b92e1cb', class: "bs-data-table__select-col" }, this.rows.length > 0 && (h("input", { key: 'd45b4e81976dca3fc114c9685deb53e0f27ec8f5', type: "checkbox", "aria-label": "Select all rows", 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: '96985dc5ace9126094984bd1b876c5eb5209bb39', 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: '8d3183f03ef2a4f39e8f4f8cdad66c8c57df5dca', 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 ? (
         // 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.
@@ -256,4 +273,25 @@ export class BsDataTable {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "clearSelection": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Clears the current row selection and emits `bsRowSelect` for each row that was selected, so\nparent-held selection state stays in sync. Lets consumers reset selection without remounting\nthe whole table.",
+                    "tags": []
+                }
+            }
+        };
+    }
 }

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

@@ -341,10 +341,10 @@ export class BsInput {
         return (h("div", { part: "field", class: `bs-input__field bs-input__field--pin ${errorClass} ${disabledClass}` }, Array.from({ length: this.length }).map((_, i) => (h("input", { id: i === 0 ? 'control' : undefined, ref: el => (this.pinInputs[i] = el), part: "control", class: "bs-input__pin-cell", type: "text", inputMode: "numeric", maxLength: 1, value: this.value[i] ?? '', disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, onInput: this.onPinInput(i), onKeyDown: this.onPinKeydown(i) })))));
     }
     render() {
-        return (h("div", { key: '29c5fb5ff9425d70dd8455a191c84812fdc44956', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
+        return (h("div", { key: '68d08fa3dce086122838a91898c60de837b7228e', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
         // "control" is a fixed id, not a generated one -- safe because Shadow DOM scopes ids
         // to this instance's own shadow root, so it can never collide with another bs-input.
-        h("label", { key: '8da819da9b93e2aec33461677e62dc82021d7a02', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (h("span", { key: '0abd96f57861eb8a8c41cf7181e11f3b44e195e5', part: "required", class: "bs-input__required", "aria-hidden": "true" }, "*")))), this.type === 'pin' ? this.renderPinField() : this.type === 'initials' ? this.renderInitialsField() : this.renderField(), this.error ? (h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, h("svg", { part: "error-icon", class: "bs-input__error-icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M8 5V8.5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }), h("circle", { cx: "8", cy: "11", r: "0.75", fill: "currentColor" })), this.error)) : this.description ? (h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
+        h("label", { key: '8b21f1f9873841feb455343960c0152576269314', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (h("span", { key: '622be18a55520512f9b5b4001e7435e7f544512e', part: "required", class: "bs-input__required", "aria-hidden": "true" }, "*")))), this.type === 'pin' ? this.renderPinField() : this.type === 'initials' ? this.renderInitialsField() : this.renderField(), this.error ? (h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, h("svg", { part: "error-icon", class: "bs-input__error-icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M8 5V8.5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }), h("circle", { cx: "8", cy: "11", r: "0.75", fill: "currentColor" })), this.error)) : this.description ? (h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
     }
     static get is() { return "bs-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -22,7 +22,7 @@ import { h } from "@stencil/core";
  */
 export class BsMenu {
     render() {
-        return (h("div", { key: 'dd742f65c43d51805fff4b77412e12d8d8704e3f', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: '395c901d030847b07a0936a16bef43ce4c3931cd' })));
+        return (h("div", { key: '6dab08819f32793e41598ffe621761d319d45c1a', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: '6f391e9b01ea7e2d60fa8f9703a16af3d57a9b74' })));
     }
     static get is() { return "bs-menu"; }
     static get encapsulation() { return "shadow"; }

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: '537a4ef632ef8acf72b0cf7747ade28ba307e1ef', 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: '67bb25d41e2066f9e9d2fd106ebb24b3eecdce63', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, h("slot", { key: 'df844ec5fefff0e64624681f5fddc245fc18d426', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'b657fb13e0a437ecc7300816cbffb91f7668c665', part: "label", class: "bs-menu-item__label" }, h("slot", { key: '273220d5e7c90aae4d677c634f534897c8b980c6' }))));
+        return (h("button", { key: '237e49e6c177aa2dc7427d55a00867ba48922c63', 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: '0e66b5e5fdcdc16348d0c6ba0b3ca4ee972ea6fa', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, h("slot", { key: '15f7cc57d8783b3c2b23720b640b40b1748a7e4b', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '8d2c92e06c0fd88f02cbbc1d77604af1c30ae26c', part: "label", class: "bs-menu-item__label" }, h("slot", { key: '8b6c088f606f99538411f6366b349462924fc4d9' }))));
     }
     static get is() { return "bs-menu-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -87,7 +87,7 @@ export class BsPagination {
     }
     render() {
         const pageList = this.getPageList();
-        return (h("nav", { key: '1cd9579d68bedee2d0e6e04a96a9ac3230ce21b9', "aria-label": "Pagination" }, h("ul", { key: 'c279f92f1f08f17724a59ddd9a9ff6086307deb1', part: "list", class: "bs-pagination__list" }, h("li", { key: 'cec04dcf7f6e1f6be5774b3a68aacf7f2ec27224', part: "item", class: "bs-pagination__item" }, h("button", { key: 'ed917eaac4275e19de2f9bc2e2cfde4ce03fb93e', 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: 'd0448255baeaceb830aa1b4eefc0d065c5730b2e' }))), 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": `Go to page ${item}`, "aria-current": item === this.currentPage ? 'page' : undefined, onClick: () => this.goToPage(item) }, item)))), h("li", { key: 'b0acab6503ad12774d3e1fdc9db75a5403439b49', part: "item", class: "bs-pagination__item" }, h("button", { key: 'e8f1fafeb042983b5d2eedbfd9a145337cb91989', 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: '4ee1e79e9f3fd68344e871bb376b6027eb50808e' }))))));
+        return (h("nav", { key: '679f591fdfc485a7cd963238177c2586030f2354', "aria-label": "Pagination" }, h("ul", { key: '7d6f19579c56a49e749a523587b08d3c408c22f0', part: "list", class: "bs-pagination__list" }, h("li", { key: '1499d8990fc69d22b4367d1105a81dbac88fa3bb', part: "item", class: "bs-pagination__item" }, h("button", { key: '5b3b180e4334558780cf871f92e772c477bff843', 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: 'c50e237ec8b8208387334cd9bfb0deea5e348088' }))), 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": `Go to page ${item}`, "aria-current": item === this.currentPage ? 'page' : undefined, onClick: () => this.goToPage(item) }, item)))), h("li", { key: '845a96e60020024653b93d0e0a5640d9f538fefa', part: "item", class: "bs-pagination__item" }, h("button", { key: '8173081e2dfd190d8b4665a21cdf46e698bd4f4b', 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: '4ca0e3c1ac5b3529fad3296ce478111e881aeceb' }))))));
     }
     static get is() { return "bs-pagination"; }
     static get encapsulation() { return "shadow"; }

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

@@ -64,7 +64,7 @@ export class BsProgress {
         const isDeterminate = this.type === 'determinate';
         const value = this.clampedValue;
         const dashOffset = circumference * (1 - value / 100);
-        return (h("div", { key: '359251959b842695100d52b8fb4707708ed8fb5d', part: "container", class: "bs-progress" }, h("div", { key: '397c8cecc86bc564c9c7e4fadbbbcf05bae71c58', class: "bs-progress__box", style: { width: `${diameter}px`, height: `${diameter}px` }, role: "progressbar", "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: 'be12c5ee854fc0d82e66719458355543627f28b5', part: "container", class: "bs-progress" }, h("div", { key: '59eb972d0aeb33feea5ef4e8f4fa4eef99f7fcde', class: "bs-progress__box", style: { width: `${diameter}px`, height: `${diameter}px` }, role: "progressbar", "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
@@ -73,7 +73,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: '90b9d66a1e5cb7c8bc392e99636386c765e6479c', part: "label", class: `bs-progress__label bs-progress__label--${this.size}` }, value, "%"))));
+            } }))), isDeterminate && this.showLabel && (h("span", { key: 'dab01ef700c872174a1f0ff9eff0ef9b534f6f89', 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

@@ -46,13 +46,13 @@ export class BsProgressLinear {
     render() {
         const isDeterminate = this.type === 'determinate';
         const value = this.clampedValue;
-        return (h("div", { key: '5c8e982bad03ed994700f3021a2304f4b51b3f4a', part: "container", class: "bs-progress-linear" }, h("div", { key: 'e2327781cdfbec66cee4a09a0d518cd71f9a8fb7', part: "track", class: `bs-progress-linear__track bs-progress-linear__track--${this.size}`, role: "progressbar", "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: 'a740b860487e2f163fe7103191bd34b7fb1633ad', part: "container", class: "bs-progress-linear" }, h("div", { key: 'a1400ddeb695c45edaff4a6501589e191237c0aa', part: "track", class: `bs-progress-linear__track bs-progress-linear__track--${this.size}`, role: "progressbar", "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: 'adbb34071dedfe8e164f1cf208e95c7f1f241399', part: "label", class: "bs-progress-linear__label" }, h("slot", { key: '74020827d39b5d7d38feee377058c434f7e78f11' })))));
+        h("div", { part: "fill", class: "bs-progress-linear__fill bs-progress-linear__fill--indeterminate" }))), this.showLabel && this.hasLabelContent && (h("span", { key: '30ea4feeb5fa09cea28a89b515366b8d08fe6425', part: "label", class: "bs-progress-linear__label" }, h("slot", { key: 'b361ed81b85f3cd76ccb885ab1a0de5ec10b97b9' })))));
     }
     // 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-radio/bs-radio.js

@@ -51,7 +51,7 @@ export class BsRadio {
         }
     };
     render() {
-        return (h("label", { key: '161bfbd0b2275f33cb8fbc5b3e4851ec30edbbce', class: `bs-radio ${this.disabled ? 'bs-radio--disabled' : ''}` }, h("input", { key: '264d57cbd6c4f0052d8db28fb0fb11e274448b9b', class: "bs-radio__input", type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onChange: this.onChange }), h("span", { key: 'c7caedd6dfad0b5808a6e1bea575c4f958d2ea0b', class: "bs-radio__hit-area" }, h("span", { key: '1192afc8c59dce5fdf5c226dd560e4885175a73c', class: "bs-radio__state-layer" }, h("span", { key: '7869c22cde3a99465500cc7cb52b281189db6f94', part: "circle", class: `bs-radio__circle ${this.checked ? 'bs-radio__circle--selected' : ''}` }, this.checked && h("span", { key: '8f9cce005680970137aa380f64792a877a28fee6', part: "dot", class: "bs-radio__dot" })))), h("span", { key: 'a1539f067d44caf5988a1a86755bf47d9738fe08', part: "label", class: "bs-radio__label" }, h("slot", { key: 'be0394e88cc984e2d558881be9305753fec90ddc' }))));
+        return (h("label", { key: '0301eaf2b9f71e6e1eb7189ee424afa3eb66e3ea', class: `bs-radio ${this.disabled ? 'bs-radio--disabled' : ''}` }, h("input", { key: 'dd12fc11f43171fbfa1955747477d2e538f0d1db', class: "bs-radio__input", type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onChange: this.onChange }), h("span", { key: '3d6af7472becac1be3f080093587c54e5acbbb04', class: "bs-radio__hit-area" }, h("span", { key: 'e6b7384a4e87d6c216030bd4c5831b91f1bd409f', class: "bs-radio__state-layer" }, h("span", { key: '4b7c97752705660b97a6fb8b2157b5fcd37cd2e9', part: "circle", class: `bs-radio__circle ${this.checked ? 'bs-radio__circle--selected' : ''}` }, this.checked && h("span", { key: '5944fa6ac89d4806e8f243d8f216939f35d3f56f', part: "dot", class: "bs-radio__dot" })))), h("span", { key: 'df20ccc3d840b649f2b7a3ca627282e9a9ba480c', part: "label", class: "bs-radio__label" }, h("slot", { key: 'fc042c04e85bf2991b463d2fe0147ed9724c2aa5' }))));
     }
     static get is() { return "bs-radio"; }
     static get encapsulation() { return "shadow"; }

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

@@ -199,7 +199,7 @@ export class BsSlider {
     render() {
         const isRange = this.type === 'range';
         const rootClasses = ['bs-slider', this.disabled ? 'bs-slider--disabled' : ''].filter(Boolean).join(' ');
-        return (h("div", { key: '1cbd5e53dd0d8fb327d8584428dd21332661b5e2', class: rootClasses }, this.showLabel && (h("div", { key: '3634d341e67ebc1bfba90b86b104fa5553d67d1d', class: "bs-slider__header" }, h("span", { key: '3ebf6d66bd5c8e51fe9d9b42844cbfc1c45ae696', id: "bs-slider-label", part: "label", class: "bs-slider__label" }, this.label), isRange ? (h("span", { class: "bs-slider__value-fields" }, this.renderPercentField(this.percent(this.effectiveValueStart), this.onStartPercentFieldChange, this.ariaLabel ?? 'Start value'), h("span", { class: "bs-slider__separator" }, "\u2013"), this.renderPercentField(this.percent(this.effectiveValueEnd), this.onEndPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} end` : 'End value'))) : (this.renderPercentField(this.percent(this.value), this.onPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} value` : 'Value')))), h("div", { key: '874e62bf31a4fdba314c9999d15abfbf211fb5bc', class: "bs-slider__row" }, this.showLabel && (h("span", { key: 'eb26f532ddac948279faa4bc6c60d263b0538ee6', part: "bound", class: "bs-slider__bound" }, this.min)), isRange ? this.renderRangeThumbs() : this.renderSingleThumb(), this.showLabel && (h("span", { key: '01bab87bfab37495ce857bbfd16d8417aea61a61', part: "bound", class: "bs-slider__bound" }, this.max)))));
+        return (h("div", { key: 'eea08bf9b13476683a75c02c3b2880acc2a5830d', class: rootClasses }, this.showLabel && (h("div", { key: 'ce7a0f60767b6eccf537e121ab588a273d82170b', class: "bs-slider__header" }, h("span", { key: '9de6ffe94a76e896e007d9928e11f1599443aa76', id: "bs-slider-label", part: "label", class: "bs-slider__label" }, this.label), isRange ? (h("span", { class: "bs-slider__value-fields" }, this.renderPercentField(this.percent(this.effectiveValueStart), this.onStartPercentFieldChange, this.ariaLabel ?? 'Start value'), h("span", { class: "bs-slider__separator" }, "\u2013"), this.renderPercentField(this.percent(this.effectiveValueEnd), this.onEndPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} end` : 'End value'))) : (this.renderPercentField(this.percent(this.value), this.onPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} value` : 'Value')))), h("div", { key: '7c1d900c13c1890b587c5ac4e326434b44e33895', class: "bs-slider__row" }, this.showLabel && (h("span", { key: '5ed265337a997272765c4a94a985081dc25cebea', part: "bound", class: "bs-slider__bound" }, this.min)), isRange ? this.renderRangeThumbs() : this.renderSingleThumb(), this.showLabel && (h("span", { key: '63da44c53587366349113f9f7f7ec0bc290dad35', part: "bound", class: "bs-slider__bound" }, this.max)))));
     }
     static get is() { return "bs-slider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -53,7 +53,10 @@ describe('bs-snackbar', () => {
             const { root } = await render(h("bs-snackbar", null, "Message"));
             const close = root.shadowRoot.querySelector('[part="close"]');
             expect(close).not.toBeNull();
-            expect(close).toEqualAttribute('aria-label', 'Dismiss');
+            // bs-icon-button sets aria-label on its OWN inner <button> (inside its own shadow DOM), not
+            // on its host element -- so the accessible name lives one shadow root deeper than `close` itself.
+            const innerButton = close.shadowRoot.querySelector('button');
+            expect(innerButton).toEqualAttribute('aria-label', 'Dismiss');
         });
         it('emits bsDismiss when the close button is clicked', async () => {
             const { root, spyOnEvent } = await render(h("bs-snackbar", null, "Message"));

package/dist/collection/components/bs-snackbar/bs-snackbar.css

@@ -10,37 +10,21 @@
  * @prop --bs-snackbar-actions-padding-y: Top/bottom padding of the actions area. Aliased to --bs-spacing-50.
  * @prop --bs-snackbar-actions-padding-x: Right padding of the actions area (the bar's own right edge). Aliased to --bs-spacing-100.
  * @prop --bs-snackbar-actions-gap: Gap between the action button and the close button. Aliased to --bs-spacing-50.
- * @prop --bs-snackbar-action-radius: Corner radius of the action button. Aliased to --bs-border-radius-100.
- * @prop --bs-snackbar-action-font-size: Action button font size. Aliased to --bs-font-size-sm.
- * @prop --bs-snackbar-action-font-weight: Action button font weight. Aliased to --bs-font-weight-medium.
- * @prop --bs-snackbar-action-line-height: Action button line height. Aliased to --bs-line-height-body-sm.
- * @prop --bs-snackbar-close-radius: Corner radius of the close button. Aliased to --bs-border-radius-100.
  * @prop --bs-snackbar-surface-default: Bar background, variant="default". Aliased to --bs-snackbar-bg-default (brandsync-tokens).
  * @prop --bs-snackbar-color-default: Icon/message/close color, variant="default". Aliased to --bs-snackbar-text-default (brandsync-tokens) -- named "-color-", not "-text-", solely to avoid colliding with that vendored token's own name.
- * @prop --bs-snackbar-action-border-default: Action button border, variant="default" (outlined, not filled). Aliased to --bs-blue-300.
- * @prop --bs-snackbar-action-text-default: Action button text, variant="default". Aliased to --bs-snackbar-action-text (brandsync-tokens).
  * @prop --bs-snackbar-surface-info: Bar background, variant="info". Aliased to --bs-color-info-container.
  * @prop --bs-snackbar-text-info: Icon/message/close color, variant="info". Aliased to --bs-text-info.
- * @prop --bs-snackbar-action-bg-info: Action button background, variant="info". Aliased to --bs-snackbar-bg-info (brandsync-tokens).
- * @prop --bs-snackbar-action-bg-info-hover: Action button background, variant="info", hover. Aliased to --bs-color-info-hover.
- * @prop --bs-snackbar-action-bg-info-pressed: Action button background, variant="info", pressed. Aliased to --bs-color-info-pressed.
  * @prop --bs-snackbar-surface-warning: Bar background, variant="warning". Aliased to --bs-color-warning-container.
  * @prop --bs-snackbar-text-warning: Icon/message/close color, variant="warning". Aliased to --bs-text-warning.
- * @prop --bs-snackbar-action-bg-warning: Action button background, variant="warning". Aliased to --bs-snackbar-bg-warning (brandsync-tokens).
- * @prop --bs-snackbar-action-bg-warning-hover: Action button background, variant="warning", hover. Aliased to --bs-color-warning-hover.
- * @prop --bs-snackbar-action-bg-warning-pressed: Action button background, variant="warning", pressed. Aliased to --bs-color-warning-pressed.
  * @prop --bs-snackbar-surface-success: Bar background, variant="success". Aliased to --bs-color-success-container.
  * @prop --bs-snackbar-text-success: Icon/message/close color, variant="success". Aliased to --bs-text-success.
- * @prop --bs-snackbar-action-bg-success: Action button background, variant="success". Aliased to --bs-snackbar-bg-success (brandsync-tokens).
- * @prop --bs-snackbar-action-bg-success-hover: Action button background, variant="success", hover. Aliased to --bs-color-success-hover.
- * @prop --bs-snackbar-action-bg-success-pressed: Action button background, variant="success", pressed. Aliased to --bs-color-success-pressed.
  * @prop --bs-snackbar-surface-error: Bar background, variant="error". Aliased to --bs-color-error-container.
  * @prop --bs-snackbar-text-error: Icon/message/close color, variant="error". Aliased to --bs-text-error.
- * @prop --bs-snackbar-action-bg-error: Action button background, variant="error". Aliased to --bs-snackbar-bg-error (brandsync-tokens).
- * @prop --bs-snackbar-action-bg-error-hover: Action button background, variant="error", hover. Aliased to --bs-color-error-hover.
- * @prop --bs-snackbar-action-bg-error-pressed: Action button background, variant="error", pressed. Aliased to --bs-color-error-pressed.
- * @prop --bs-snackbar-action-text-on-action: Action button text, every colored (filled) variant. Aliased to --bs-text-on-action.
  * @prop --bs-snackbar-spinner-track: Loading spinner's background ring. Aliased to --bs-neutral-200.
+ *
+ * The action/close buttons are composed from bs-button/bs-icon-button (see bs-snackbar.tsx) --
+ * their own fill colors, hover/pressed states, and focus rings are governed by THOSE components'
+ * own custom properties (--bs-button-*, --bs-icon-button-*), not duplicated here.
  */
 :host {
   display: inline-flex;
@@ -59,13 +43,6 @@
   --bs-snackbar-actions-padding-x: var(--bs-spacing-100);
   --bs-snackbar-actions-gap: var(--bs-spacing-50);
 
-  --bs-snackbar-action-radius: var(--bs-border-radius-100);
-  --bs-snackbar-action-font-size: var(--bs-font-size-sm);
-  --bs-snackbar-action-font-weight: var(--bs-font-weight-medium);
-  --bs-snackbar-action-line-height: var(--bs-line-height-body-sm);
-
-  --bs-snackbar-close-radius: var(--bs-border-radius-100);
-
   --bs-snackbar-surface-default: var(--bs-snackbar-bg-default);
   /* Named "-color-", not "-text-", solely to avoid a self-referential cycle: the brandsync-tokens
      vendored token is ALSO literally named --bs-snackbar-text-default, so declaring a property of
@@ -73,34 +50,19 @@
      per the CSS spec -- the property would compute to its initial value (nothing), not fall back
      to the vendored one. */
   --bs-snackbar-color-default: var(--bs-snackbar-text-default);
-  --bs-snackbar-action-border-default: var(--bs-blue-300);
-  --bs-snackbar-action-text-default: var(--bs-snackbar-action-text);
 
   --bs-snackbar-surface-info: var(--bs-color-info-container);
   --bs-snackbar-text-info: var(--bs-text-info);
-  --bs-snackbar-action-bg-info: var(--bs-snackbar-bg-info);
-  --bs-snackbar-action-bg-info-hover: var(--bs-color-info-hover);
-  --bs-snackbar-action-bg-info-pressed: var(--bs-color-info-pressed);
 
   --bs-snackbar-surface-warning: var(--bs-color-warning-container);
   --bs-snackbar-text-warning: var(--bs-text-warning);
-  --bs-snackbar-action-bg-warning: var(--bs-snackbar-bg-warning);
-  --bs-snackbar-action-bg-warning-hover: var(--bs-color-warning-hover);
-  --bs-snackbar-action-bg-warning-pressed: var(--bs-color-warning-pressed);
 
   --bs-snackbar-surface-success: var(--bs-color-success-container);
   --bs-snackbar-text-success: var(--bs-text-success);
-  --bs-snackbar-action-bg-success: var(--bs-snackbar-bg-success);
-  --bs-snackbar-action-bg-success-hover: var(--bs-color-success-hover);
-  --bs-snackbar-action-bg-success-pressed: var(--bs-color-success-pressed);
 
   --bs-snackbar-surface-error: var(--bs-color-error-container);
   --bs-snackbar-text-error: var(--bs-text-error);
-  --bs-snackbar-action-bg-error: var(--bs-snackbar-bg-error);
-  --bs-snackbar-action-bg-error-hover: var(--bs-color-error-hover);
-  --bs-snackbar-action-bg-error-pressed: var(--bs-color-error-pressed);
 
-  --bs-snackbar-action-text-on-action: var(--bs-text-on-action);
   --bs-snackbar-spinner-track: var(--bs-neutral-200);
 }
 
@@ -206,116 +168,7 @@
   padding: var(--bs-snackbar-actions-padding-y) var(--bs-snackbar-actions-padding-x) var(--bs-snackbar-actions-padding-y) 0;
 }
 
-.bs-snackbar__action {
-  height: 32px;
-  padding: 0 var(--bs-spacing-150);
-  border-radius: var(--bs-snackbar-action-radius);
-  font-family: inherit;
-  font-size: var(--bs-snackbar-action-font-size);
-  font-weight: var(--bs-snackbar-action-font-weight);
-  line-height: calc(var(--bs-snackbar-action-line-height) * 1px);
-  white-space: nowrap;
-  cursor: pointer;
-  border: none;
-  background: transparent;
-}
-
-/* default is the only variant whose action button is outlined (transparent, bordered) rather than
-   filled -- matches the Figma spec's dark neutral bar using a lighter bordered button instead of a
-   solid fill, since a solid fill would need its own distinct color unrelated to the bar's own dark
-   surface. */
-.bs-snackbar--default .bs-snackbar__action {
-  border: 1px solid var(--bs-snackbar-action-border-default);
-  color: var(--bs-snackbar-action-text-default);
-}
-
-.bs-snackbar--info .bs-snackbar__action {
-  background: var(--bs-snackbar-action-bg-info);
-  color: var(--bs-snackbar-action-text-on-action);
-}
-.bs-snackbar--info .bs-snackbar__action:hover {
-  background: var(--bs-snackbar-action-bg-info-hover);
-}
-.bs-snackbar--info .bs-snackbar__action:active {
-  background: var(--bs-snackbar-action-bg-info-pressed);
-}
-
-.bs-snackbar--warning .bs-snackbar__action {
-  background: var(--bs-snackbar-action-bg-warning);
-  color: var(--bs-snackbar-action-text-on-action);
-}
-.bs-snackbar--warning .bs-snackbar__action:hover {
-  background: var(--bs-snackbar-action-bg-warning-hover);
-}
-.bs-snackbar--warning .bs-snackbar__action:active {
-  background: var(--bs-snackbar-action-bg-warning-pressed);
-}
-
-.bs-snackbar--success .bs-snackbar__action {
-  background: var(--bs-snackbar-action-bg-success);
-  color: var(--bs-snackbar-action-text-on-action);
-}
-.bs-snackbar--success .bs-snackbar__action:hover {
-  background: var(--bs-snackbar-action-bg-success-hover);
-}
-.bs-snackbar--success .bs-snackbar__action:active {
-  background: var(--bs-snackbar-action-bg-success-pressed);
-}
-
-.bs-snackbar--error .bs-snackbar__action {
-  background: var(--bs-snackbar-action-bg-error);
-  color: var(--bs-snackbar-action-text-on-action);
-}
-.bs-snackbar--error .bs-snackbar__action:hover {
-  background: var(--bs-snackbar-action-bg-error-hover);
-}
-.bs-snackbar--error .bs-snackbar__action:active {
-  background: var(--bs-snackbar-action-bg-error-pressed);
-}
-
-.bs-snackbar__close {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 44px;
-  height: 44px;
-  flex-shrink: 0;
-  padding: 0;
-  border: none;
-  background: transparent;
-  border-radius: var(--bs-snackbar-close-radius);
-  color: inherit;
-  cursor: pointer;
-}
-
-.bs-snackbar__close svg {
-  width: 24px;
-  height: 24px;
-}
-
-/* Hover/active feedback for the close button (every variant) and the default variant's outlined
-   action button -- both have a transparent background with only text/border color, so there's no
-   solid fill to darken the way the filled colored-variant action buttons above do. `opacity` was
-   tried here first and was wrong: dimming a transparent element's opacity blends it TOWARD
-   whatever's behind it, which on the light pastel info/warning/success/error surfaces made a
-   "pressed" dark-colored button look LIGHTER/washed-out -- backwards from a pressed state. A
-   `color-mix()` tint using `currentColor` fixes that (a real added tint, not a blend-toward-behind)
-   while still doing the right thing on the dark `default` surface, where content is white and a
-   light-tint hover is the correct/expected direction (same idea as a ripple highlight on a dark
-   surface). Also automatically matches whichever variant's color is active, no separate per-variant
-   hover token needed here. */
-.bs-snackbar--default .bs-snackbar__action:hover,
-.bs-snackbar__close:hover {
-  background: color-mix(in srgb, currentColor 12%, transparent);
-}
-
-.bs-snackbar--default .bs-snackbar__action:active,
-.bs-snackbar__close:active {
-  background: color-mix(in srgb, currentColor 24%, transparent);
-}
-
-.bs-snackbar__action:focus-visible,
-.bs-snackbar__close:focus-visible {
-  outline: 2px solid currentColor;
-  outline-offset: 2px;
-}
+/* The action/close buttons are now composed from the shared bs-button/bs-icon-button components
+   (see bs-snackbar.tsx) instead of hand-rolled <button> markup -- all the button-level styling
+   (fill colors, hover/pressed states, focus rings, and slotted-icon sizing) lives in those
+   components' own CSS, so there's nothing left to style here. */

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

@@ -1,4 +1,14 @@
 import { h } from "@stencil/core";
+// Maps each snackbar variant to the bs-button variant its action button composes -- 'default'
+// (the dark neutral bar) uses 'outlined' since there's no bs-button variant tuned for a dark
+// surface; every colored variant maps 1:1 to the same-named bs-button variant.
+const ACTION_VARIANT = {
+    default: 'outlined',
+    info: 'info',
+    warning: 'warning',
+    success: 'success',
+    error: 'error',
+};
 /**
  * A transient status bar for confirming the result of an action (e.g. "Files uploaded
  * successfully.") -- an icon (or loading spinner), a message, an optional action, and a close
@@ -51,7 +61,7 @@ export class BsSnackbar {
         this.bsDismiss.emit();
     };
     render() {
-        return (h("div", { key: '3251935ac23aa9157004eefdb6e324234eb6bfcb', part: "container", class: `bs-snackbar bs-snackbar--${this.variant}`, role: "status", "aria-live": this.variant === 'error' ? 'assertive' : 'polite' }, h("div", { key: 'c45e3cbe89cf2b956e46c71db87eb9644d3ef4df', class: "bs-snackbar__content" }, h("span", { key: '840a2ab80a6ff4691eb341157f8285f70310ec33', part: "icon", class: "bs-snackbar__icon", "aria-hidden": "true" }, this.loading ? h("span", { class: "bs-snackbar__spinner" }) : h(CheckCircleIcon, null)), h("span", { key: '6f947d2327529ae23c4de691ea509b39ce5e2490', part: "message", class: "bs-snackbar__message" }, h("slot", { key: '4cde5846deeb26cfb4fa134e789b641c9674618d' }))), h("div", { key: 'f5c1cc73c36ddfd5feef19fbcc24668c407cbd3d', class: "bs-snackbar__actions" }, this.actionLabel && (h("button", { key: 'ae7b54aee03e21f0d770b6440a5ef0138f835be8', part: "action", type: "button", class: "bs-snackbar__action", onClick: this.onAction }, this.actionLabel)), h("button", { key: 'f689a78a40fbd268760e9624ed0f02ba3ac71b07', part: "close", type: "button", class: "bs-snackbar__close", "aria-label": "Dismiss", onClick: this.onDismiss }, h(CloseIcon, { key: 'e731694f295179bb1cf85111116e2bf8f5e83cb7' })))));
+        return (h("div", { key: '21d9ad89971ec2f6c8a546bb601caf9fe0fdeaad', part: "container", class: `bs-snackbar bs-snackbar--${this.variant}`, role: "status", "aria-live": this.variant === 'error' ? 'assertive' : 'polite' }, h("div", { key: '4c0a6eeae82f0183269952d12203030c8e38707f', class: "bs-snackbar__content" }, h("span", { key: 'd7702b65066518434b571fdc2a9bba4b715daf80', part: "icon", class: "bs-snackbar__icon", "aria-hidden": "true" }, this.loading ? h("span", { class: "bs-snackbar__spinner" }) : h(CheckCircleIcon, null)), h("span", { key: '943f72a2a1829a2859daef2cf1852d35d8da8a1e', part: "message", class: "bs-snackbar__message" }, h("slot", { key: 'c5cc1160992c936603abb57201beabe1e6eb4664' }))), h("div", { key: '31764bce2583aa5c794084ea1f532b5bca7e1f8c', class: "bs-snackbar__actions" }, this.actionLabel && (h("bs-button", { key: 'b7ae59d32bd58358f9090251f0fcd033925b4cba', part: "action", variant: ACTION_VARIANT[this.variant], size: "sm", onClick: this.onAction }, this.actionLabel)), h("bs-icon-button", { key: 'ce995bb3ba94cd67628bb0d281395b700c6075df', part: "close", variant: "subtle", size: "md", ariaLabel: "Dismiss", onClick: this.onDismiss }, h(CloseIcon, { key: '51562d0658077d511ce46466386735456c4b6a77' })))));
     }
     static get is() { return "bs-snackbar"; }
     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: '6e0bde7df2c893933c6490a995e418a43de6454f', class: "bs-source-link__left" }, h("span", { key: '9724f21e43696b3a07daabd05a348eaee96cd082', class: "bs-source-link__filename-row" }, h("span", { key: '901c8a90c0707197d0ae5f5c053f2e197683c973', part: "icon", class: "bs-source-link__icon" }, h("slot", { key: 'ca4ecd68ec7149bfe61830b3bd75a45e7086c165', name: "icon" }, h(FileTextIcon, { key: '656b72e726370c03b271e83397666be76544eb65' }))), h("p", { key: 'c20b0bc181548a81c57364b707afba77d535d62a', part: "filename", class: "bs-source-link__filename" }, this.fileName)), h("span", { key: '3178845a3c16d2ffd5fc1942806851370d966290', class: "bs-source-link__meta" }, this.sourceName && (h("span", { key: '6967d7fa214067d5e0d14123d287c4ce6cf40496', part: "source", class: "bs-source-link__source" }, this.sourceName)), this.sourceName && this.version && h("span", { key: 'a58b3e8d2d8ef4a23c8d6155454ab5825fd737b5', class: "bs-source-link__dot", "aria-hidden": "true" }), this.version && (h("span", { key: '1701393a524375eee95905308a9b8be1b9647bc8', part: "version", class: "bs-source-link__version" }, this.version)))),
-            h("span", { key: 'a291c8de9d56e8b269660441930b4bf95977883f', part: "arrow", class: "bs-source-link__arrow", "aria-hidden": "true" }, h(ArrowUpRightIcon, { key: '90a1a20ee9f84e5e339fa2a11c59691f6f45759f' })),
+            h("span", { key: 'c492c873401ffec62e4079b9254f9e8d82ef2160', class: "bs-source-link__left" }, h("span", { key: 'aa6e13547e540d9bd649a31fd185edb75db27af0', class: "bs-source-link__filename-row" }, h("span", { key: 'f540d25f1504c5a70dfcff3d46b69545b30cc3ce', part: "icon", class: "bs-source-link__icon" }, h("slot", { key: 'bb9c39f0f55161fef91d693da05d966ed0e8b52f', name: "icon" }, h(FileTextIcon, { key: 'cd092cc8acc6c4dc94b1fd0df3813eea321a6322' }))), h("p", { key: '8b80cdf2e65bba6f79ce4df85df9e7891b4688eb', part: "filename", class: "bs-source-link__filename" }, this.fileName)), h("span", { key: '6b1403dc64d26773e61a385ce79c15a9e526bca8', class: "bs-source-link__meta" }, this.sourceName && (h("span", { key: 'a10ac29439339287e551cd5d67a68b57ba32a732', part: "source", class: "bs-source-link__source" }, this.sourceName)), this.sourceName && this.version && h("span", { key: '219e40bd91dd4c9f830f2124474408c10d660241', class: "bs-source-link__dot", "aria-hidden": "true" }), this.version && (h("span", { key: '47da27d3758239a74b6f3baf246c5cdc90dbeaec', part: "version", class: "bs-source-link__version" }, this.version)))),
+            h("span", { key: '383bdb322e97930920f11312d6b3e475fc490c0e', part: "arrow", class: "bs-source-link__arrow", "aria-hidden": "true" }, h(ArrowUpRightIcon, { key: '543df594e433598dfe2275fab1e0af2ba3431788' })),
         ];
         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));
     }