@brandsync/wc 1.19.0 → 1.20.0

package/dist/collection/collection-manifest.json

@@ -12,6 +12,7 @@
     "components/bs-card/bs-card.js",
     "components/bs-carousel/bs-carousel.js",
     "components/bs-checkbox/bs-checkbox.js",
+    "components/bs-checkbox-group/bs-checkbox-group.js",
     "components/bs-chip/bs-chip-filter/bs-chip-filter.js",
     "components/bs-chip/bs-chip-informative/bs-chip-informative.js",
     "components/bs-chip/bs-chip-input/bs-chip-input.js",
@@ -25,25 +26,31 @@
     "components/bs-datepicker/bs-datepicker.js",
     "components/bs-dialog/bs-dialog.js",
     "components/bs-divider/bs-divider.js",
+    "components/bs-popover/bs-popover.js",
+    "components/bs-dropdown/bs-dropdown.js",
     "components/bs-icon-tile/bs-icon-tile.js",
     "components/bs-error-page/bs-error-page.js",
     "components/bs-file-upload/bs-file-upload.js",
     "components/bs-file-upload-item/bs-file-upload-item.js",
     "components/bs-global-search/bs-global-search.js",
     "components/bs-grid/bs-grid.js",
+    "components/bs-heading/bs-heading.js",
+    "components/bs-icon/bs-icon.js",
     "components/bs-button/bs-icon-button/bs-icon-button.js",
     "components/bs-keyboard-shortcuts/bs-keyboard-shortcuts.js",
+    "components/bs-link/bs-link.js",
     "components/bs-logo/bs-logo.js",
     "components/bs-mega-menu/bs-mega-menu.js",
     "components/bs-message/bs-message.js",
     "components/ui-shell/bs-navigation-header/bs-navigation-header/bs-navigation-header.js",
     "components/bs-onboarding-checklist/bs-onboarding-checklist.js",
-    "components/bs-popover/bs-popover.js",
     "components/bs-presence/bs-presence.js",
     "components/bs-product-tour/bs-product-tour.js",
     "components/bs-progress/bs-progress.js",
     "components/bs-progress-linear/bs-progress-linear.js",
     "components/bs-qr-code/bs-qr-code.js",
+    "components/bs-radio-group/bs-radio-group.js",
+    "components/bs-select/bs-select.js",
     "components/bs-session-timeout/bs-session-timeout.js",
     "components/bs-side-panel/bs-side-panel.js",
     "components/bs-skeleton/bs-skeleton.js",
@@ -52,12 +59,18 @@
     "components/bs-spinner/bs-spinner.js",
     "components/bs-split-pane/bs-split-pane.js",
     "components/bs-stack/bs-stack.js",
+    "components/bs-stat/bs-stat.js",
     "components/bs-stepper/bs-stepper-step/bs-stepper-step.js",
     "components/bs-switch/bs-switch.js",
     "components/bs-tab/bs-tab/bs-tab.js",
+    "components/bs-table-of-contents/bs-table-of-contents.js",
     "components/bs-tab/bs-tabs/bs-tabs.js",
+    "components/bs-tag/bs-tag.js",
+    "components/bs-text/bs-text.js",
     "components/bs-timepicker/bs-timepicker.js",
     "components/bs-toast/bs-toast.js",
+    "components/bs-toggle-button/bs-toggle-button.js",
+    "components/bs-toolbar/bs-toolbar.js",
     "components/bs-tooltip-trigger/bs-tooltip-trigger.js",
     "components/bs-whats-new-entry/bs-whats-new-entry.js",
     "components/bs-whats-new/bs-whats-new.js",
@@ -77,7 +90,10 @@
     "components/bs-chatbot-suggestion-button/bs-chatbot-suggestion-button.js",
     "components/bs-checkbox/bs-checkbox-skeleton/bs-checkbox-skeleton.js",
     "components/bs-citation-preview/bs-citation-preview.js",
+    "components/bs-code-block/bs-code-block.js",
     "components/bs-compact-menu-block/bs-compact-menu-block.js",
+    "components/bs-description-item/bs-description-item.js",
+    "components/bs-description-list/bs-description-list.js",
     "components/bs-empty-state/bs-empty-state.js",
     "components/bs-input/bs-input.js",
     "components/bs-key/bs-key.js",
@@ -94,9 +110,11 @@
     "components/bs-ripple/bs-ripple.js",
     "components/bs-search-item/bs-search-item.js",
     "components/bs-shortcut-row/bs-shortcut-row.js",
+    "components/bs-skip-link/bs-skip-link.js",
     "components/bs-source-link/bs-source-link.js",
     "components/bs-stepper/bs-stepper/bs-stepper.js",
     "components/bs-tab/bs-inline-tab/bs-inline-tab.js",
+    "components/bs-toggle-button-group/bs-toggle-button-group.js",
     "components/bs-tooltip/bs-tooltip.js",
     "components/bs-tree/bs-tree.js",
     "components/bs-tree-item/bs-tree-item.js",

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

@@ -16,6 +16,12 @@ describe('axe: form controls', () => {
     axeOf('bs-checkbox', () => h("bs-checkbox", null, "Agree"));
     axeOf('bs-checkbox (icon-only)', () => h("bs-checkbox", { ariaLabel: "Select row" }));
     axeOf('bs-switch', () => h("bs-switch", null, "Alerts"));
+    axeOf('bs-select', () => h("bs-select", { label: "Fruit", description: "Pick one", options: [{ label: 'Apple', value: 'a' }, { label: 'Banana', value: 'b' }], value: "a" }));
+    axeOf('bs-select (open, error)', () => h("bs-select", { label: "Fruit", error: "Required", open: true, options: [{ label: 'Apple', value: 'a' }, { label: 'Banana', value: 'b' }] }));
+    axeOf('bs-toggle-button-group (single)', () => (h("bs-toggle-button-group", { ariaLabel: "View", value: "a" }, h("bs-toggle-button", { value: "a" }, "List"), h("bs-toggle-button", { value: "b" }, "Grid"))));
+    axeOf('bs-toggle-button-group (multiple, icon-only)', () => (h("bs-toggle-button-group", { ariaLabel: "Format", multiple: true }, h("bs-toggle-button", { value: "b", ariaLabel: "Bold" }, h("svg", { slot: "icon", viewBox: "0 0 8 8", "aria-hidden": "true" })), h("bs-toggle-button", { value: "i", ariaLabel: "Italic" }, h("svg", { slot: "icon", viewBox: "0 0 8 8", "aria-hidden": "true" })))));
+    axeOf('bs-link', () => h("bs-link", { href: "/docs" }, "Docs"));
+    axeOf('bs-link (external, button)', () => h("bs-link", { href: "https://example.com", target: "_blank", variant: "button" }, "Open"));
     axeOf('bs-radio group', () => (h("div", { role: "radiogroup", "aria-label": "Fruit" }, h("bs-radio", { name: "f", value: "a", checked: true }, "A"), h("bs-radio", { name: "f", value: "b" }, "B"))));
 });
 describe('axe: actions & navigation', () => {
@@ -60,6 +66,9 @@ describe('axe: display & feedback', () => {
     axeOf('bs-badge', () => h("bs-badge", null, "3"));
     axeOf('bs-card', () => h("bs-card", null, "Content"));
     axeOf('bs-chip-informative', () => h("bs-chip-informative", null, "Tag"));
+    axeOf('bs-tag', () => (h("bs-tag", { removable: true, color: "info" }, "Design")));
+    axeOf('bs-stat', () => h("bs-stat", { label: "Active users", value: "1,284", trend: "up", trendValue: "12%" }));
+    axeOf('bs-description-list', () => (h("bs-description-list", { ariaLabel: "Details", layout: "horizontal", dividers: true }, h("bs-description-item", { term: "Owner", description: "Sam Lee" }))));
     axeOf('bs-logo', () => h("bs-logo", null));
     axeOf('bs-progress', () => h("bs-progress", { value: 40, ariaLabel: "Uploading" }));
     axeOf('bs-progress-linear', () => h("bs-progress-linear", { value: 40, ariaLabel: "Uploading" }));

package/dist/collection/components/bs-accordion-group/bs-accordion-group.js

@@ -35,7 +35,7 @@ export class BsAccordionGroup {
         }
     }
     render() {
-        return (h("div", { key: 'f3c43bbdb41aacc19356b37b736dbbe92dbee8c9', part: "group", class: "bs-accordion-group" }, h("slot", { key: '5ad2f89cd263163bd153473e0bae103655426588' })));
+        return (h("div", { key: '56384f2124a0950a70906c7cc581fe084d5ccfd5', part: "group", class: "bs-accordion-group" }, h("slot", { key: '8b6cc577ccd33cb10d7b393cf2acd0b6d0cf11df' })));
     }
     static get is() { return "bs-accordion-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-ai-disclaimer/bs-ai-disclaimer.js

@@ -25,7 +25,7 @@ import { h } from "@stencil/core";
 export class BsAiDisclaimer {
     render() {
         https: //images.unsplash.com/photo-1512917774080-9991f1c4c750?w=200&h=200&fit=crop
-         return (h("div", { key: 'c60fa36f1340f01982c9084dcc24d875df50d33f', class: "bs-ai-disclaimer" }, h("p", { key: '19d76fe258f68e2e0e2a0f7f22a6775c7522cef0', part: "text", class: "bs-ai-disclaimer__text" }, h("slot", { key: '66861e47f7da39e0b1e162d327dedf0d57fcaf2f' }))));
+         return (h("div", { key: '42b8ec6acacf3cc88ca6ab26e6799e4cfbde3306', class: "bs-ai-disclaimer" }, h("p", { key: '91208bcb6b163418762194ffea845b8f7ad603ba', part: "text", class: "bs-ai-disclaimer__text" }, h("slot", { key: 'b8062d0ad625601e6766729d94d0111385b29380' }))));
     }
     static get is() { return "bs-ai-disclaimer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-ai-greeting/bs-ai-greeting.js

@@ -43,7 +43,7 @@ export class BsAiGreeting {
         const subtext = this.productName
             ? `How can I help you with ${this.productName} today?`
             : 'How can I help you today?';
-        return (h("div", { key: '1044390f82275f2ece3242201178e5fbe3dd0f83', class: "bs-ai-greeting" }, h("div", { key: '338a57a7ed4aae16d0210ad322b3dd14e4ae3c45', part: "heading", class: "bs-ai-greeting__heading" }, h("p", { key: '9aec512708b3ec838992af2e84911331e600def7', class: "bs-ai-greeting__heading-line" }, "Hi. I'm ", this.assistantName, ","), h("p", { key: 'ab23bbb5b65532320cad671818202fc8acebba46', class: "bs-ai-greeting__heading-line" }, "your AI assistant.")), h("p", { key: '1d4b83012beb32bedcf48de15461179e8bd7eca8', part: "subtext", class: "bs-ai-greeting__subtext" }, subtext)));
+        return (h("div", { key: '1f79a81a945a8035c3e0e8b6ebf7b007bd9c6715', class: "bs-ai-greeting" }, h("div", { key: '069645a7530d7cdbc1fc84f5d5642f42be3a3bf0', part: "heading", class: "bs-ai-greeting__heading" }, h("p", { key: '4e4f8f2a8f8e3dc9e8d8ebfabe50044bacbe80b0', class: "bs-ai-greeting__heading-line" }, "Hi. I'm ", this.assistantName, ","), h("p", { key: 'fab76105a61cc5f005e3d2b055296aff48cb73cd', class: "bs-ai-greeting__heading-line" }, "your AI assistant.")), h("p", { key: 'b59877f8be280fd6f3384b1320bc4a7f41874a08', part: "subtext", class: "bs-ai-greeting__subtext" }, subtext)));
     }
     static get is() { return "bs-ai-greeting"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-ai-thinking/bs-ai-thinking.js

@@ -29,7 +29,7 @@ export class BsAiThinking {
     /** The status text shown next to the icon, e.g. "Retrieving", "Thinking", "Searching". */
     label = 'Thinking';
     render() {
-        return (h("div", { key: '86329576f183a586c2cedfcfe6d5ddb76d37ed25', class: "bs-ai-thinking", role: "status", "aria-live": "polite" }, h("img", { key: '5d56adc7f23efb232569765b3cf3529859bd4035', part: "icon", class: "bs-ai-thinking__icon", src: GENIE_MARK_ICON, alt: "", "aria-hidden": "true" }), h("span", { key: 'abd1bb6e0adf31a1ddc74bbbf08d3f0128aa0ae4', part: "label", class: "bs-ai-thinking__label" }, this.label)));
+        return (h("div", { key: '6cde3a4e39f20988a64e8e5e12bded17881e3759', class: "bs-ai-thinking", role: "status", "aria-live": "polite" }, h("img", { key: '8607373a20a5b2b3710fef1e72ac65255a7a6e67', part: "icon", class: "bs-ai-thinking__icon", src: GENIE_MARK_ICON, alt: "", "aria-hidden": "true" }), h("span", { key: '93ddd0850764dc02032f79bef90042f524d37806', part: "label", class: "bs-ai-thinking__label" }, this.label)));
     }
     static get is() { return "bs-ai-thinking"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-app-recent-item/bs-app-recent-item.js

@@ -63,10 +63,10 @@ export class BsAppRecentItem {
             onClick: this.onClick,
         };
         const body = [
-            h("bs-icon-tile", { key: '25195db69c69ce67d0679a08ae8747829ceded31', part: "icon", class: "bs-app-recent-item__icon", size: "md" }, this.icon ? h("span", { class: "bs-app-recent-item__glyph", style: { '--bs-app-recent-item-glyph': `url(${JSON.stringify(this.icon)})` } }) : h("slot", null)),
-            h("span", { key: 'ef11e62cab8201965e9d8c0d6f2afbc520b11af8', class: "bs-app-recent-item__text" }, h("span", { key: 'fad916fcc805b11e1659aa6885aa38651c99f1d3', part: "name", class: "bs-app-recent-item__name" }, this.name), this.description && (h("span", { key: 'e4b5d5c3f944b47de6637db714e661ad6df9735f', part: "description", class: "bs-app-recent-item__description" }, this.description))),
+            h("bs-icon-tile", { key: 'dba9c2186088e32388156d6cba1fb2d4bb63909a', part: "icon", class: "bs-app-recent-item__icon", size: "md" }, this.icon ? h("span", { class: "bs-app-recent-item__glyph", style: { '--bs-app-recent-item-glyph': `url(${JSON.stringify(this.icon)})` } }) : h("slot", null)),
+            h("span", { key: '1c5c4e8cee96487647c89f688b8ec34ca8f46ff6', class: "bs-app-recent-item__text" }, h("span", { key: '49477af6347c0852d60990053c45e81a8a9ad5a5', part: "name", class: "bs-app-recent-item__name" }, this.name), this.description && (h("span", { key: 'be09443548bdb0740e9374572e85a272b6c2ee46', part: "description", class: "bs-app-recent-item__description" }, this.description))),
         ];
-        return (h("button", { key: '8fe690965c53eea77a004123ecdddec7f1172e42', ...common, type: "button" }, body));
+        return (h("button", { key: 'a705988cedb88540ad48acc4f15387e468499968', ...common, type: "button" }, body));
     }
     static get is() { return "bs-app-recent-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-app-shell/bs-app-shell.js

@@ -38,7 +38,7 @@ export class BsAppShell {
     /** When true the host is `height: 100%`; when false it is content-sized with `min-height: 100vh`. */
     fullHeight = true;
     render() {
-        return (h("div", { key: 'ff8c3b56c5ef688cc6c0ea56506ff11276e8d3e3', class: "bs-app-shell", part: "container" }, h("div", { key: 'd5774240964b2983194a2159a0a1144a21a6d283', class: "bs-app-shell__header", part: "header" }, h("slot", { key: '277a167b2f8bedde05303de0c40d3eba2ca2d991', name: "header" })), h("div", { key: '239b9188f0d433fead73cbef56adf4c2814481e8', class: "bs-app-shell__navigation", part: "navigation" }, h("slot", { key: '40ae1bad1999bc8d7ab42fd3d42871a5ca6f7e6f', name: "navigation" })), h("main", { key: '4ac23628e313bce91c8ba91b988cef538561d5db', class: "bs-app-shell__main", part: "main" }, h("slot", { key: '33b33785532d89474eaba090fdb4dc46975f0e2b' })), h("div", { key: '5b746ae7fb368233c68cc67f983b34229d5103d1', class: "bs-app-shell__aside", part: "aside" }, h("slot", { key: 'c68ae0b5809ad6ea9e4f02e0bdb9364e0ccc914b', name: "aside" }))));
+        return (h("div", { key: '413d1ca357dc8f965c2c126ea8cc923d533678b4', class: "bs-app-shell", part: "container" }, h("div", { key: 'e03fcf75e89168ab64f2abf068ce5f764bedd793', class: "bs-app-shell__header", part: "header" }, h("slot", { key: 'cec39829282c89b37bd1c08ac50f9740ae4e2800', name: "header" })), h("div", { key: 'e10cbea46eb0bc25f55201990ee412123111878e', class: "bs-app-shell__navigation", part: "navigation" }, h("slot", { key: '8d4b764e76e7e96ac0605886fc40b1b2edd5703c', name: "navigation" })), h("main", { key: 'c89a3db0a2c160bc397d5fa6ffab9ef8ab88f99e', class: "bs-app-shell__main", part: "main" }, h("slot", { key: '0a6250177f2a20b7fe4c1edd667afe1e5803658f' })), h("div", { key: '1a8d637f15be869915b815903c2a590e8504c057', class: "bs-app-shell__aside", part: "aside" }, h("slot", { key: 'c6e13833e120dca04961105d8c083072f035d5ff', name: "aside" }))));
     }
     static get is() { return "bs-app-shell"; }
     static get encapsulation() { return "shadow"; }

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

@@ -38,4 +38,14 @@ describe('bs-attachment', () => {
         const { root } = await render(h("bs-attachment", { removable: false }));
         expect(root.shadowRoot.querySelector('[part="remove"]')).toBeNull();
     });
+    it('places the VISIBLE dismiss button 12px from the thumbnail top and right edge', async () => {
+        const { root } = await render(h("bs-attachment", { "image-src": "data:image/gif;base64,R0lGODlhAQABAAAAACw=", "image-alt": "x", "file-name": "a.png", removable: true, style: { display: 'block', width: '200px' } }));
+        const host = root.shadowRoot.querySelector('.bs-attachment');
+        const ib = root.shadowRoot.querySelector('[part="remove"]');
+        const a = host.getBoundingClientRect();
+        const b = ib.shadowRoot.querySelector('button').getBoundingClientRect();
+        expect(b.width).toBe(16);
+        expect(b.top - a.top).toBe(12);
+        expect(a.right - b.right).toBe(12);
+    });
 });

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

@@ -102,12 +102,12 @@
 
 .bs-attachment__remove {
   position: absolute;
-  /* Verified against Figma node 2513:32843 (EG Genie UI Kit v1.0): the remove button's own 32x32
-     hit-target box sits flush at the thumbnail's top-right corner (top:0, right:0), with the
-     *visible* 16px button centered inside it (8px inset on every side) -- so the visible button's
-     real offset from the thumbnail's corner is 8px, not 4px. */
-  top: var(--bs-spacing-100);
-  inset-inline-end: var(--bs-spacing-100);
+  /* Design review (#50): the VISIBLE 16px button sits 12px (spacing-150) from the thumbnail's top and
+     right edges (this supersedes the earlier 8px Figma reading). display:flex removes the inline
+     line-box strut that otherwise pushed the button ~3px lower than the right inset. */
+  display: flex;
+  top: var(--bs-spacing-150);
+  inset-inline-end: var(--bs-spacing-150);
   opacity: 0;
   pointer-events: none;
   transition: opacity var(--bs-duration-fast) var(--bs-easing-standard);

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

@@ -58,7 +58,7 @@ export class BsAttachmentList {
         this.canScrollRight = row.scrollWidth - row.clientWidth - row.scrollLeft > 1;
     };
     render() {
-        return (h("div", { key: 'c01982051a8914fcaede14e787f362a4f82a317d', class: "bs-attachment-list" }, h("div", { key: '9475c8aa5dec12ed9356f72326bdc4ab215576d5', part: "row", class: "bs-attachment-list__row", ref: el => (this.row = el), onScroll: this.onScroll, role: "group", "aria-label": this.ariaLabel, tabIndex: 0 }, h("slot", { key: '85db80cf4422334d291377e5cc7390f69e014676', onSlotchange: this.onSlotchange })), this.canScrollRight && h("div", { key: 'a8659966ec3fd0a128a9e4b5d40ff7121b919172', part: "fade", class: "bs-attachment-list__fade", "aria-hidden": "true" })));
+        return (h("div", { key: 'ff420857d6be7d6db3643759dfd328edc473f8b0', class: "bs-attachment-list" }, h("div", { key: '3c62c72f7d4a7477baa07eb4b3d358f23729395e', part: "row", class: "bs-attachment-list__row", ref: el => (this.row = el), onScroll: this.onScroll, role: "group", "aria-label": this.ariaLabel, tabIndex: 0 }, h("slot", { key: '4b510eca2db2a3fdf4992fdcf1c5fe95d4089aad', onSlotchange: this.onSlotchange })), this.canScrollRight && h("div", { key: 'fcb930e61971ed1225b9da2706e8ad66c9db2628', part: "fade", class: "bs-attachment-list__fade", "aria-hidden": "true" })));
     }
     static get is() { return "bs-attachment-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,7 +9,10 @@ describe('bs-avatar', () => {
     });
     it('renders the fallback user icon for type="icon"', async () => {
         const { root } = await render(h("bs-avatar", { type: "icon" }));
-        expect(root.shadowRoot.querySelector('[part="icon"]')).not.toBeNull();
+        const icon = root.shadowRoot.querySelector('[part="icon"]');
+        expect(icon).not.toBeNull();
+        expect(icon.tagName.toLowerCase()).toBe('bs-icon');
+        expect(icon).toEqualAttribute('name', 'user');
         expect(root.shadowRoot.querySelector('[part="initials"]')).toBeNull();
         expect(root.shadowRoot.querySelector('[part="image"]')).toBeNull();
     });
@@ -51,4 +54,11 @@ describe('bs-avatar', () => {
         const { root } = await render(h("bs-avatar", { disabled: true }));
         expect(root.hasAttribute('disabled')).toBe(true);
     });
+    it('scales the fallback icon to 60% of each avatar size', async () => {
+        for (const [size, px] of [['xs', 24], ['md', 44], ['xxl', 128]]) {
+            const { root } = await render(h("bs-avatar", { size: size }));
+            const icon = root.shadowRoot.querySelector('[part="icon"]');
+            expect(Math.round(icon.getBoundingClientRect().width)).toBe(Math.round(px * 0.6));
+        }
+    });
 });

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

@@ -81,31 +81,37 @@
 .bs-avatar--xs {
   width: var(--bs-avatar-size-xs);
   height: var(--bs-avatar-size-xs);
+  --bs-avatar-icon-size: calc(var(--bs-avatar-size-xs) * 0.6);
 }
 
 .bs-avatar--sm {
   width: var(--bs-avatar-size-sm);
   height: var(--bs-avatar-size-sm);
+  --bs-avatar-icon-size: calc(var(--bs-avatar-size-sm) * 0.6);
 }
 
 .bs-avatar--md {
   width: var(--bs-avatar-size-md);
   height: var(--bs-avatar-size-md);
+  --bs-avatar-icon-size: calc(var(--bs-avatar-size-md) * 0.6);
 }
 
 .bs-avatar--lg {
   width: var(--bs-avatar-size-lg);
   height: var(--bs-avatar-size-lg);
+  --bs-avatar-icon-size: calc(var(--bs-avatar-size-lg) * 0.6);
 }
 
 .bs-avatar--xl {
   width: var(--bs-avatar-size-xl);
   height: var(--bs-avatar-size-xl);
+  --bs-avatar-icon-size: calc(var(--bs-avatar-size-xl) * 0.6);
 }
 
 .bs-avatar--xxl {
   width: var(--bs-avatar-size-xxl);
   height: var(--bs-avatar-size-xxl);
+  --bs-avatar-icon-size: calc(var(--bs-avatar-size-xxl) * 0.6);
   border-width: var(--bs-avatar-border-width-xxl);
 }
 
@@ -117,11 +123,10 @@
   object-fit: cover;
 }
 
-/* type="icon" -- proportional to the container regardless of size, so one shared viewBox scales
-   cleanly across all six sizes without needing a per-size icon custom property. */
+/* type="icon" -- Phosphor `user` via bs-icon (tone="inherit" = currentColor). Its size is 60% of the
+   avatar, set per size above through --bs-avatar-icon-size. */
 .bs-avatar__icon {
-  width: 60%;
-  height: 60%;
+  --bs-icon-size: var(--bs-avatar-icon-size);
   color: var(--bs-avatar-icon-primary);
 }
 

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

@@ -71,7 +71,7 @@ export class BsAvatar {
         if (this.type === 'image') {
             return (h("span", { part: "container", class: classes }, h("img", { part: "image", class: "bs-avatar__image", src: this.src ?? undefined, alt: this.alt ?? '' })));
         }
-        return (h("span", { part: "container", class: classes, role: "img", "aria-label": this.ariaLabel ?? undefined }, this.type === 'initials' ? (h("span", { part: "initials", class: "bs-avatar__initials" }, this.initials)) : (h(UserIcon, null))));
+        return (h("span", { part: "container", class: classes, role: "img", "aria-label": this.ariaLabel ?? undefined }, this.type === 'initials' ? (h("span", { part: "initials", class: "bs-avatar__initials" }, this.initials)) : (h("bs-icon", { part: "icon", class: "bs-avatar__icon", name: "user", tone: "inherit" }))));
     }
     static get is() { return "bs-avatar"; }
     static get encapsulation() { return "shadow"; }
@@ -242,10 +242,3 @@ export class BsAvatar {
         };
     }
 }
-// A generic, standard "user" silhouette (head + shoulders bust) -- not a pixel port of Figma's own
-// exported icon asset (a plain raster/vector glyph this common isn't a proprietary brand asset
-// worth treating as a fixed image import, unlike e.g. bs-logo's actual wordmark), same
-// inline-icon-helper-function pattern as bs-chatbot-header.tsx's NewChatIcon/ExpandIcon/etc. Single
-// shared viewBox scales cleanly to every avatar size via plain CSS width/height, so one glyph
-// covers all six sizes.
-const UserIcon = () => (h("svg", { part: "icon", class: "bs-avatar__icon", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("circle", { cx: "12", cy: "8", r: "4", fill: "currentColor" }), h("path", { d: "M4 20.5C4 16.634 7.582 13.5 12 13.5C16.418 13.5 20 16.634 20 20.5", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })));

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

@@ -50,6 +50,9 @@
 }
 
 .bs-badge--inverse {
-  background: var(--bs-badge-bg-inverse);
+  /* --bs-surface-inverse flips with the theme (dark surface in light mode, light in dark) and so
+     pairs with --bs-text-inverse; the vendored --bs-badge-bg-inverse alias points at
+     --bs-surface-inset, which is the page background in dark mode (dark text on dark surface). */
+  background: var(--bs-surface-inverse);
   color: var(--bs-badge-text-inverse);
 }

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

@@ -122,4 +122,17 @@ describe('bs-breadcrumb', () => {
             expect(root.shadowRoot.querySelector('a')).toBeNull();
         });
     });
+    it('a crumb without href is a plain, non-interactive span with its own class', async () => {
+        const { root } = await render(h("bs-breadcrumb", null, "Section"));
+        const link = root.shadowRoot.querySelector('[part="link"]');
+        expect(link.tagName).toBe('SPAN');
+        expect(link).toHaveClass('bs-breadcrumb__link--plain');
+        expect(getComputedStyle(link).cursor).toBe('default');
+    });
+    it('a crumb with href stays an <a> without the plain class', async () => {
+        const { root } = await render(h("bs-breadcrumb", { href: "/a" }, "Section"));
+        const link = root.shadowRoot.querySelector('[part="link"]');
+        expect(link.tagName).toBe('A');
+        expect(link).not.toHaveClass('bs-breadcrumb__link--plain');
+    });
 });

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

@@ -3,6 +3,7 @@
  * @prop --bs-breadcrumb-separator-color: Separator icon color. Aliased to --bs-icon-default.
  * @prop --bs-breadcrumb-color-default: Text color, non-current crumb. Aliased to --bs-text-muted.
  * @prop --bs-breadcrumb-color-hover: Text color, non-current link crumb on hover/focus. Aliased to --bs-text-default.
+ * @prop --bs-breadcrumb-color-plain: Text color, a non-current crumb with no `href` (not a link). Aliased to --bs-text-secondary.
  * @prop --bs-breadcrumb-color-current: Text color, the current-page crumb. Aliased to --bs-text-default.
  * @prop --bs-breadcrumb-font-size: Aliased to --bs-font-size-md.
  * @prop --bs-breadcrumb-line-height: Aliased to --bs-line-height-body-md.
@@ -23,6 +24,7 @@
 
   --bs-breadcrumb-color-default: var(--bs-text-muted);
   --bs-breadcrumb-color-hover: var(--bs-text-default);
+  --bs-breadcrumb-color-plain: var(--bs-text-secondary);
   --bs-breadcrumb-color-current: var(--bs-text-default);
 
   --bs-breadcrumb-font-size: var(--bs-font-size-md);
@@ -78,6 +80,12 @@
   transition: color var(--bs-duration-fast) var(--bs-easing-standard);
 }
 
+/* A crumb without an href is not interactive: no link affordance (default cursor, its own colour). */
+.bs-breadcrumb__link--plain {
+  color: var(--bs-breadcrumb-color-plain);
+  cursor: default;
+}
+
 a.bs-breadcrumb__link:hover {
   color: var(--bs-breadcrumb-color-hover);
 }

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

@@ -59,7 +59,7 @@ export class BsBreadcrumb {
             ev.preventDefault();
     };
     render() {
-        return (h(Host, { key: 'b6d483d8dd99cda45b49bfc488aeec3514e3b234', role: "listitem" }, h("span", { key: '2dd5b9265590a43403f22830d34c1c7c4815927e', part: "separator", class: "bs-breadcrumb__separator", "aria-hidden": "true" }, h(CaretRightIcon, { key: '7178d1170e8fbdde1281514ac6916bf1e7561e7b' })), this.current ? (h("span", { part: "current", class: "bs-breadcrumb__current", "aria-current": "page" }, h("slot", null))) : this.href ? (h("a", { part: "link", class: "bs-breadcrumb__link", href: this.href, onClick: this.onLinkClick }, h("slot", null))) : (h("span", { part: "link", class: "bs-breadcrumb__link" }, h("slot", null)))));
+        return (h(Host, { key: 'b6d483d8dd99cda45b49bfc488aeec3514e3b234', role: "listitem" }, h("span", { key: '2dd5b9265590a43403f22830d34c1c7c4815927e', part: "separator", class: "bs-breadcrumb__separator", "aria-hidden": "true" }, h(CaretRightIcon, { key: '7178d1170e8fbdde1281514ac6916bf1e7561e7b' })), this.current ? (h("span", { part: "current", class: "bs-breadcrumb__current", "aria-current": "page" }, h("slot", null))) : this.href ? (h("a", { part: "link", class: "bs-breadcrumb__link", href: this.href, onClick: this.onLinkClick }, h("slot", null))) : (h("span", { part: "link", class: "bs-breadcrumb__link bs-breadcrumb__link--plain" }, h("slot", null)))));
     }
     static get is() { return "bs-breadcrumb"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-breadcrumb/bs-breadcrumbs/bs-breadcrumbs.js

@@ -39,6 +39,13 @@ export class BsBreadcrumbs {
      * `bs-tab`/`bs-inline-tab` children. Re-propagated on `size` changes and whenever the slotted
      * children change (e.g. a crumb added later). */
     size = 'md';
+    /** Fires when a crumb's link (or one in a `bs-breadcrumb-overflow` popup) is clicked, before the
+     * browser navigates. **Cancelable**: call `event.preventDefault()` to route it yourself. Detail
+     * is `{ href }`. This is the child's own event bubbling up; it is declared here (and never
+     * emitted from here) so the framework wrappers expose `onBsNavigate` / `(bsNavigate)` /
+     * `@bs-navigate` on `<bs-breadcrumbs>`. `event.target` is the crumb that was clicked. */
+    // eslint-disable-next-line @stencil-community/own-props-must-be-private
+    bsNavigate;
     onSizeChange(size) {
         this.propagateSize(size);
     }
@@ -54,7 +61,7 @@ export class BsBreadcrumbs {
         });
     }
     render() {
-        return (h("nav", { key: '6df966694de1f681033e8705c536c983faa1155c', "aria-label": this.label }, h("ol", { key: '61d5e7cf39bbee670f49bbc8340df75057919431', part: "list", class: "bs-breadcrumbs__list" }, h("slot", { key: '12ac9fccdb05ecf029e8eeaaa98065272945341b', onSlotchange: this.onSlotChange }))));
+        return (h("nav", { key: '439813704a14d5697c3b74805f8e11473183fc67', "aria-label": this.label }, h("ol", { key: '1ef451cfb2e92781c5ef12255ce960ccd1190c78', part: "list", class: "bs-breadcrumbs__list" }, h("slot", { key: '624b30239abeaacd56584fc0342fe31c3f823eb8', onSlotchange: this.onSlotChange }))));
     }
     static get is() { return "bs-breadcrumbs"; }
     static get encapsulation() { return "shadow"; }
@@ -119,6 +126,24 @@ export class BsBreadcrumbs {
             }
         };
     }
+    static get events() {
+        return [{
+                "method": "bsNavigate",
+                "name": "bsNavigate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when a crumb's link (or one in a `bs-breadcrumb-overflow` popup) is clicked, before the\nbrowser navigates. **Cancelable**: call `event.preventDefault()` to route it yourself. Detail\nis `{ href }`. This is the child's own event bubbling up; it is declared here (and never\nemitted from here) so the framework wrappers expose `onBsNavigate` / `(bsNavigate)` /\n`@bs-navigate` on `<bs-breadcrumbs>`. `event.target` is the crumb that was clicked."
+                },
+                "complexType": {
+                    "original": "{ href: string }",
+                    "resolved": "{ href: string; }",
+                    "references": {}
+                }
+            }];
+    }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{

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

@@ -117,12 +117,27 @@ describe('bs-button', () => {
             expect(button.getBoundingClientRect().width).toBe(320);
             expect(button.shadowRoot.querySelector('button').getBoundingClientRect().width).toBe(320);
         });
-        it('has 24px side padding at size sm, and takes --bs-button-padding-x-sm', async () => {
+        it('has 12px side padding and the spec height at every size, and takes --bs-button-padding-x-sm', async () => {
+            const exp = { sm: 32, md: 44, lg: 48 };
+            for (const size of ['sm', 'md', 'lg']) {
+                const { root } = await render(h("bs-button", { size: size }, "Change"));
+                const btn = root.shadowRoot.querySelector('button');
+                const cs = getComputedStyle(btn);
+                expect(cs.paddingLeft).toBe('12px');
+                expect(cs.paddingRight).toBe('12px');
+                expect(btn.getBoundingClientRect().height).toBe(exp[size]);
+            }
             const a = await render(h("bs-button", { size: "sm" }, "Change"));
             const wide = a.root.getBoundingClientRect().width;
-            const b = await render(h("bs-button", { size: "sm", style: { '--bs-button-padding-x-sm': '16px' } }, "Change"));
+            const b = await render(h("bs-button", { size: "sm", style: { '--bs-button-padding-x-sm': '4px' } }, "Change"));
             expect(wide - b.root.getBoundingClientRect().width).toBe(16);
         });
+        it('keeps 12px on both sides with a leading or trailing icon', async () => {
+            const { root } = await render(h("bs-button", null, h("svg", { slot: "icon", viewBox: "0 0 16 16" }), "Go"));
+            const cs = getComputedStyle(root.shadowRoot.querySelector('button'));
+            expect(cs.paddingLeft).toBe('12px');
+            expect(cs.paddingRight).toBe('12px');
+        });
         it('colours the subtle variant through --bs-button-subtle-color', async () => {
             const a = await render(h("bs-button", { variant: "subtle" }, "Cancel"));
             const before = getComputedStyle(a.root.shadowRoot.querySelector('button')).color;
@@ -144,4 +159,18 @@ describe('bs-button ripple', () => {
         const { root } = await render(h("bs-button", { disabled: true }, "Save"));
         expect(root.shadowRoot.querySelector('bs-ripple').disabled).toBe(true);
     });
+    it('forwards aria-expanded, aria-controls and aria-haspopup and pressed to the inner button', async () => {
+        const { root } = await render(h("bs-button", { ariaLabel: "Menu", pressed: true, ariaExpanded: "false", ariaControls: "drawer", ariaHasPopup: "menu" }, "x"));
+        const button = root.shadowRoot.querySelector('button');
+        expect(button).toEqualAttribute('aria-pressed', 'true');
+        expect(button).toEqualAttribute('aria-expanded', 'false');
+        expect(button).toEqualAttribute('aria-controls', 'drawer');
+        expect(button).toEqualAttribute('aria-haspopup', 'menu');
+    });
+    it('omits the forwarded aria attributes when unset', async () => {
+        const { root } = await render(h("bs-button", { ariaLabel: "Menu" }, "x"));
+        const button = root.shadowRoot.querySelector('button');
+        for (const attr of ['aria-pressed', 'aria-expanded', 'aria-controls', 'aria-haspopup'])
+            expect(button.hasAttribute(attr)).toBe(false);
+    });
 });

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

@@ -3,13 +3,15 @@
   width: var(--bs-button-width);
   --bs-button-width: auto;
   --bs-button-subtle-color: var(--bs-color-neutral-default);
-  --bs-button-height-sm: var(--bs-spacing-500);
-  --bs-button-height-md: var(--bs-spacing-600);
-  --bs-button-height-lg: var(--bs-spacing-700);
+  --bs-button-height-sm: var(--bs-spacing-400);
+  --bs-button-height-md: var(--bs-spacing-550);
+  --bs-button-height-lg: var(--bs-spacing-600);
   --bs-button-radius: var(--bs-border-radius-100);
-  --bs-button-padding-x-sm: var(--bs-spacing-300);
+  --bs-button-padding-x-sm: var(--bs-spacing-150);
+  --bs-button-padding-x-md: var(--bs-spacing-150);
+  --bs-button-padding-x-lg: var(--bs-spacing-150);
   --bs-button-padding-x-icon-side: var(--bs-spacing-150);
-  --bs-button-padding-x-label-side: var(--bs-spacing-250);
+  --bs-button-padding-x-label-side: var(--bs-spacing-150);
 
   --bs-button-error-default: var(--bs-color-error-default);
   --bs-button-error-hover: var(--bs-color-error-hover);
@@ -57,6 +59,7 @@
      neither matched the enabled color Figma actually specifies). Text color matches
      --bs-text-action-hover (brand-700) on BOTH hover and pressed per the spec -- pressed does NOT
      get its own darker text color, only the border does. */
+  --bs-button-outlined-color: var(--bs-color-primary-default);
   --bs-button-outlined-border: var(--bs-color-primary-default);
   --bs-button-outlined-border-hover: var(--bs-color-primary-hover);
   --bs-button-outlined-border-pressed: var(--bs-color-primary-pressed);
@@ -101,17 +104,15 @@
 
 .bs-button--md {
   height: var(--bs-button-height-md);
-  /* Verified against Figma node 2842:50344 (71px-wide frame, 39px-wide "Label" text): horizontal
-     padding is spacing/200 (16px) each side, not spacing-400 (32px) -- the previous value was
-     roughly double what the redline specifies. sm/lg padding-x weren't independently re-verified
-     against their own redlines in this pass. */
-  padding: 0 var(--bs-spacing-200);
+  /* Design review (#43): 12px (spacing-150) left/right on every size; overrides the earlier
+     Figma-redline value of 16px. */
+  padding: 0 var(--bs-button-padding-x-md);
   font-size: var(--bs-font-size-md);
 }
 
 .bs-button--lg {
   height: var(--bs-button-height-lg);
-  padding: 0 var(--bs-spacing-500);
+  padding: 0 var(--bs-button-padding-x-lg);
   font-size: var(--bs-font-size-lg);
 }
 
@@ -247,7 +248,7 @@
 
 .bs-button--outlined {
   background: transparent;
-  color: var(--bs-color-primary-default);
+  color: var(--bs-button-outlined-color);
   border: 1px solid var(--bs-button-outlined-border);
 }
 .bs-button--outlined:hover:not(:disabled) {
@@ -296,12 +297,9 @@
   margin-inline-start: 0;
 }
 
-/* Verified against a Figma redline for the icon+label layout: the edge next to an icon is
-   tighter (spacing/150, 12px) than the plain text-only edge (16px), and the opposite edge -- next
-   to just the label, with an icon on the other side pulling the button off-balance -- compensates
-   with more padding (spacing/250, 20px), keeping the total horizontal padding budget the same as
-   the icon-less button (12+20 = 16+16 = 32px for size="md"). This is deliberately NOT
-   size-dependent, same as the icon/label gap above -- neither varies by size in the source spec. */
+/* Icon-side / label-side padding. Both default to 12px now (#43: 12px left and right on all sizes),
+   so the former 12/20 optical compensation is gone. The rules and variables are kept (not deleted)
+   because several dependants (whats-new, onboarding-checklist) override them for compact layouts. */
 .bs-button--has-icon:not(.bs-button--has-end-icon) {
   padding-inline-start: var(--bs-button-padding-x-icon-side);
   padding-inline-end: var(--bs-button-padding-x-label-side);