@brandsync/wc 1.18.0 → 1.20.0

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-badge/bs-badge.js

@@ -17,7 +17,7 @@ export class BsBadge {
     /** Maps directly to the brandsync-tokens `--bs-badge-bg-*` / `--bs-badge-text-*` sets. */
     variant = 'default';
     render() {
-        return (h("span", { key: '12d18ea63d62468cede43efaddbf1d4a707c31be', part: "container", class: `bs-badge bs-badge--${this.variant}` }, h("slot", { key: '7418716533cf907da4b9cd05a01aaea69e257425' })));
+        return (h("span", { key: 'e81df8a115da1e47eec003565f06f7d8f2bce24a', part: "container", class: `bs-badge bs-badge--${this.variant}` }, h("slot", { key: '112b68af29d688640aace037db5f9d786956d264' })));
     }
     static get is() { return "bs-badge"; }
     static get encapsulation() { return "shadow"; }

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: '4bab1e3218264a8c97ccb1b9df4d0bf66fe8a4c7', role: "listitem" }, h("span", { key: '1012f764261168bb246e4fef76b1988b70cd290c', part: "separator", class: "bs-breadcrumb__separator", "aria-hidden": "true" }, h(CaretRightIcon, { key: 'b37d81c4bfd0313fb313b862e194ca30950ee839' })), 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-breadcrumb-overflow/bs-breadcrumb-overflow.js

@@ -88,7 +88,7 @@ export class BsBreadcrumbOverflow {
         }
     }
     render() {
-        return (h(Host, { key: 'e4c2c1cf0601cff0d084fef4f295ad09ef6c3643', role: "listitem" }, h("span", { key: 'a085ee9e9d41e5836cb60ccada98a357ba2ba264', part: "separator", class: "bs-breadcrumb-overflow__separator", "aria-hidden": "true" }, h(CaretRightIcon, { key: '59685abc8d64a821f812f365c4ebd64ba1450ef6' })), h("span", { key: '357986825b4f2fcb6af583c031ce8190606df118', class: "bs-breadcrumb-overflow__wrapper" }, h("button", { key: '2f10d676681ee442dc66703b8a838b40c8b71a91', type: "button", part: "ellipsis", class: "bs-breadcrumb-overflow__ellipsis", "aria-haspopup": "menu", "aria-expanded": String(this.open), "aria-label": this.overflowLabel, onClick: this.onEllipsisToggle }, h(DotsThreeIcon, { key: '1a74b819b245fb62fb2599acc3ff458eac024e52' })), this.open && this.items.length > 0 && (h("bs-menu", { key: 'c8e57092e8396da8a7d8157eae69022154050075', part: "menu", class: "bs-breadcrumb-overflow__menu" }, this.items.map(item => item.href ? (h("a", { part: "link", class: "bs-breadcrumb-overflow__link", href: item.href, onClick: this.onItemClick(item.href) }, item.label)) : (h("span", { part: "link", class: "bs-breadcrumb-overflow__link" }, item.label))))))));
+        return (h(Host, { key: '8b47ed9e6346d813bf2db5a510151027d6f2a523', role: "listitem" }, h("span", { key: '7eb3b681a555c1bf07b16c34c8e7364384ecb3d2', part: "separator", class: "bs-breadcrumb-overflow__separator", "aria-hidden": "true" }, h(CaretRightIcon, { key: '4bd4ced37d1a24b37f507b53b7b6c0fe8f577de7' })), h("span", { key: '03f6ff9300d53bcbddf6d8fb57ed08a85fe9e67b', class: "bs-breadcrumb-overflow__wrapper" }, h("button", { key: '9b0fb0cfc28ccffbfe54dffc8a5612d1c83b27f5', type: "button", part: "ellipsis", class: "bs-breadcrumb-overflow__ellipsis", "aria-haspopup": "menu", "aria-expanded": String(this.open), "aria-label": this.overflowLabel, onClick: this.onEllipsisToggle }, h(DotsThreeIcon, { key: '932b86a682c495b1acc47cd703294c5b2dbf3c03' })), this.open && this.items.length > 0 && (h("bs-menu", { key: '809bbfe99843c3e531ee2e620a5adca4c66360d9', part: "menu", class: "bs-breadcrumb-overflow__menu" }, this.items.map(item => item.href ? (h("a", { part: "link", class: "bs-breadcrumb-overflow__link", href: item.href, onClick: this.onItemClick(item.href) }, item.label)) : (h("span", { part: "link", class: "bs-breadcrumb-overflow__link" }, item.label))))))));
     }
     static get is() { return "bs-breadcrumb-overflow"; }
     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: '8e8c96763ed36fcbf87fcd8fa348c294cad89096', "aria-label": this.label }, h("ol", { key: 'aae3d390d6ddc68fba3e2ef96bfb57160715fc95', part: "list", class: "bs-breadcrumbs__list" }, h("slot", { key: '2edfd750dcb70d9fd9bec01ac42ad52c79dc3a34', 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;
@@ -133,3 +148,29 @@ describe('bs-button', () => {
         });
     });
 });
+describe('bs-button ripple', () => {
+    it('contains a bs-ripple, centered only when icon-only', async () => {
+        const { root } = await render(h("bs-button", null, "Save"));
+        const ripple = root.shadowRoot.querySelector('bs-ripple');
+        expect(ripple).not.toBeNull();
+        expect(ripple.centered).toBe(false);
+    });
+    it('passes disabled through to the ripple', async () => {
+        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);
@@ -79,6 +82,8 @@
      Every variant's label actually uses the regular weight. */
   font-weight: var(--bs-font-weight-regular);
   cursor: pointer;
+  /* Containing block for the absolutely-positioned bs-ripple layer. */
+  position: relative;
   transition: background-color var(--bs-duration-fast, 120ms) var(--bs-easing-standard, ease);
 }
 
@@ -99,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);
 }
 
@@ -245,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) {
@@ -294,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);

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

@@ -18,23 +18,29 @@ import { h } from "@stencil/core";
  *   it for actions that actually delete/revoke/undo something.
  *
  * @slot - Default slot: the button's label content.
+ * Built from: `bs-ripple` (press feedback).
+ *
  * @slot icon - Optional leading icon, rendered before the label.
  * @slot end-icon - Optional trailing icon, rendered after the label.
+ * @part ripple - The press-ripple layer (a `bs-ripple`). Tune it with `bs-button::part(ripple) { --bs-ripple-color: ...; }` (also `--bs-ripple-opacity`, `--bs-ripple-duration`).
  * @part icon - The icon wrapper element.
  * @part label - The text label element.
  * @part end-icon - The trailing icon wrapper element.
  * @prop --bs-button-radius - Corner radius. Aliased to `--bs-border-radius-100` by default.
- * @prop --bs-button-padding-x-sm - Left/right padding of a label-only button at `size="sm"`. Aliased to `--bs-spacing-300`.
+ * @prop --bs-button-padding-x-sm - Left/right padding of a label-only button at `size="sm"`. Aliased to `--bs-spacing-150` (12px).
+ * @prop --bs-button-padding-x-md - Left/right padding at `size="md"`. Aliased to `--bs-spacing-150` (12px).
+ * @prop --bs-button-padding-x-lg - Left/right padding at `size="lg"`. Aliased to `--bs-spacing-150` (12px).
  * @prop --bs-button-width - Width of the button. `auto` by default (fits its content); set `100%` for a full-width button, e.g. `bs-button { --bs-button-width: 100%; }`.
  * @prop --bs-button-subtle-color - Label/icon colour, `variant="subtle"`. Aliased to `--bs-color-neutral-default`; set it to `var(--bs-text-action)` for a blue text button.
- * @prop --bs-button-height-sm - Height at `size="sm"`. Aliased to `--bs-spacing-500`.
- * @prop --bs-button-height-md - Height at `size="md"`. Aliased to `--bs-spacing-600`.
- * @prop --bs-button-height-lg - Height at `size="lg"`. Aliased to `--bs-spacing-700`.
+ * @prop --bs-button-height-sm - Height at `size="sm"`. Aliased to `--bs-spacing-400` (32px).
+ * @prop --bs-button-height-md - Height at `size="md"`. Aliased to `--bs-spacing-550` (44px).
+ * @prop --bs-button-height-lg - Height at `size="lg"`. Aliased to `--bs-spacing-600` (48px).
+ * @prop --bs-button-outlined-color - Label/icon colour, `variant="outlined"`, default. Aliased to `--bs-color-primary-default`.
  * @prop --bs-button-neutral-border - Border color, `variant="neutral"`, default/disabled. Aliased to `--bs-border-neutral-container`.
  * @prop --bs-button-neutral-border-hover - Border color, `variant="neutral"`, hover. Aliased to `--bs-border-neutral-container-hover`.
  * @prop --bs-button-neutral-border-pressed - Border color, `variant="neutral"`, pressed. Aliased to `--bs-border-neutral-container-pressed`.
- * @prop --bs-button-padding-x-icon-side - Horizontal padding on an edge that's adjacent to a leading/trailing icon (tighter than the plain text-only edge). Aliased to `--bs-spacing-150`.
- * @prop --bs-button-padding-x-label-side - Horizontal padding on the opposite edge, when an icon on the other side needs compensating extra space to keep the button optically balanced. Aliased to `--bs-spacing-250`.
+ * @prop --bs-button-padding-x-icon-side - Horizontal padding on an edge that's adjacent to a leading/trailing icon (now equal to the text-only edge). Aliased to `--bs-spacing-150`.
+ * @prop --bs-button-padding-x-label-side - Horizontal padding on the opposite edge, when an icon on the other side needs compensating extra space to keep the button optically balanced. Aliased to `--bs-spacing-150` (no compensation by default).
  */
 export class BsButton {
     el;
@@ -58,6 +64,19 @@ export class BsButton {
      * camelCase prop to the `aria-label` HTML attribute automatically.
      */
     ariaLabel = null;
+    /**
+     * Makes this a toggle button: sets `aria-pressed` on the inner `<button>` to `true`/`false`. Leave it
+     * unset (the default) for a plain action button, which then has no `aria-pressed` at all. The component
+     * does not toggle itself; the owner flips this on click.
+     */
+    pressed;
+    /** Forwarded to the inner `<button>` as `aria-expanded`, for disclosure/menu buttons. */
+    ariaExpanded = null;
+    /** Forwarded to the inner `<button>` as `aria-controls`. Note an id only resolves inside this
+     * component's shadow tree, so it can't point at an element in the page's light DOM. */
+    ariaControls = null;
+    /** Forwarded to the inner `<button>` as `aria-haspopup`. */
+    ariaHasPopup = null;
     /** Tracks whether the `icon` slot has assigned content, so the icon/label gap only
      * applies when there's actually an icon. */
     hasIcon = false;
@@ -119,7 +138,7 @@ export class BsButton {
     };
     render() {
         const iconOnly = (this.hasIcon || this.hasEndIcon) && !this.hasLabel;
-        return (h("button", { key: 'd9339f3df9872d414b8252dd6dbccb897ffd3bdb', class: `bs-button bs-button--${this.variant} bs-button--${this.size} ${iconOnly ? 'bs-button--icon-only' : ''} ${this.hasIcon && !iconOnly ? 'bs-button--has-icon' : ''} ${this.hasEndIcon && !iconOnly ? 'bs-button--has-end-icon' : ''}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel, onClick: this.onClick }, h("span", { key: '4744ade682f1bc2e18a63a598aa4cfc3f6b5d028', part: "icon", class: `bs-button__icon ${this.hasIcon ? 'bs-button__icon--visible' : ''}` }, h("slot", { key: '9cddc004d35fdf9c621691138388f1ecb3b401e0', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '71ae5f7a5f8ff9b311bf69f0da7d449430d026a3', part: "label", class: "bs-button__label" }, h("slot", { key: 'bf0ab3a00d3584ba29c30a1b9e5efc64e53f9df5', onSlotchange: this.onLabelSlotchange })), h("span", { key: '1b6fc4b65cc067d75aaaf2022b9053a48d19aa83', part: "end-icon", class: `bs-button__end-icon ${this.hasEndIcon ? 'bs-button__end-icon--visible' : ''}` }, h("slot", { key: '5a3fc614a61fb7f2dbc595b6ab8e15a26028ea75', name: "end-icon", onSlotchange: this.onEndIconSlotchange }))));
+        return (h("button", { key: 'fd998f3e3d58633626c99ffb47228c3308150d05', class: `bs-button bs-button--${this.variant} bs-button--${this.size} ${iconOnly ? 'bs-button--icon-only' : ''} ${this.hasIcon && !iconOnly ? 'bs-button--has-icon' : ''} ${this.hasEndIcon && !iconOnly ? 'bs-button--has-end-icon' : ''}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel, "aria-pressed": this.pressed === undefined ? undefined : String(this.pressed), "aria-expanded": this.ariaExpanded, "aria-controls": this.ariaControls, "aria-haspopup": this.ariaHasPopup, onClick: this.onClick }, h("bs-ripple", { key: 'b6909337c1e6f35bc42b6dc06db31cd2e822a299', part: "ripple", centered: iconOnly, disabled: this.disabled }), h("span", { key: 'a753ffbf8a61011bc6c4ae05937a035605a1d79a', part: "icon", class: `bs-button__icon ${this.hasIcon ? 'bs-button__icon--visible' : ''}` }, h("slot", { key: '66e9b0f67e04b3891f66ee311ffaebd266c3824b', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'e9007a0a0fe2b51ac3401195feff203c94cfbe3b', part: "label", class: "bs-button__label" }, h("slot", { key: 'df18ce6e274b6f99e496944aa40fd9977f99dd86', onSlotchange: this.onLabelSlotchange })), h("span", { key: 'ddf8300967a813c02ae1996eee42793211b71537', part: "end-icon", class: `bs-button__end-icon ${this.hasEndIcon ? 'bs-button__end-icon--visible' : ''}` }, h("slot", { key: '4d200a0c215ff52161941315bbdab21a08daf90a', name: "end-icon", onSlotchange: this.onEndIconSlotchange }))));
     }
     static get is() { return "bs-button"; }
     static get encapsulation() { return "shadow"; }
@@ -248,6 +267,85 @@ export class BsButton {
                 "reflect": false,
                 "attribute": "aria-label",
                 "defaultValue": "null"
+            },
+            "pressed": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes this a toggle button: sets `aria-pressed` on the inner `<button>` to `true`/`false`. Leave it\nunset (the default) for a plain action button, which then has no `aria-pressed` at all. The component\ndoes not toggle itself; the owner flips this on click."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pressed"
+            },
+            "ariaExpanded": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'true' | 'false' | null",
+                    "resolved": "\"false\" | \"true\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Forwarded to the inner `<button>` as `aria-expanded`, for disclosure/menu buttons."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-expanded",
+                "defaultValue": "null"
+            },
+            "ariaControls": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Forwarded to the inner `<button>` as `aria-controls`. Note an id only resolves inside this\ncomponent's shadow tree, so it can't point at an element in the page's light DOM."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-controls",
+                "defaultValue": "null"
+            },
+            "ariaHasPopup": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'true' | 'false' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | null",
+                    "resolved": "\"dialog\" | \"false\" | \"grid\" | \"listbox\" | \"menu\" | \"tree\" | \"true\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Forwarded to the inner `<button>` as `aria-haspopup`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-haspopup",
+                "defaultValue": "null"
             }
         };
     }

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

@@ -1,4 +1,5 @@
 import { render, h, describe, it, expect } from "@stencil/vitest";
+import { contrastRatio, resolveColor, withTheme } from "../../../test/helpers/contrast";
 describe('bs-icon-button', () => {
     it('renders the default icon slot and variant/size classes', async () => {
         const { root } = await render(h("bs-icon-button", { ariaLabel: "Confirm" }, h("svg", { viewBox: "0 0 16 16" })));
@@ -113,4 +114,46 @@ describe('bs-icon-button', () => {
             expect(inner().getAttribute('aria-pressed')).toBe('false');
         });
     });
+    it('forwards aria-expanded, aria-controls and aria-haspopup to the inner button', async () => {
+        const { root } = await render(h("bs-icon-button", { ariaLabel: "Menu", ariaExpanded: "false", ariaControls: "drawer", ariaHasPopup: "menu" }, "x"));
+        const button = root.shadowRoot.querySelector('button');
+        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-icon-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);
+    });
+    it('size="sm" is 32x32 with the 16px icon intact', async () => {
+        const { root } = await render(h("bs-icon-button", { ariaLabel: "Confirm", size: "sm" }, h("svg", { width: "16", height: "16" })));
+        const button = root.shadowRoot.querySelector('button');
+        expect(getComputedStyle(button).width).toBe('32px');
+        expect(getComputedStyle(button).height).toBe('32px');
+        expect(getComputedStyle(root.shadowRoot.querySelector('[part="icon"]')).width).toBe('16px');
+    });
+    describe('size="xs" hover/pressed contrast (#50)', () => {
+        const variants = ['primary', 'neutral', 'subtle', 'outlined', 'success', 'warning', 'info', 'error'];
+        // Deterministic on purpose (no real pointer hover, which stalls browser runs on slow CI): the xs
+        // :hover/:active rules set the icon colour to one of these tokens, so assert that colour against
+        // each hover/pressed fill the variant can show, resolved from the same tokens the component uses.
+        const iconToken = (v) => (v === 'neutral' || v === 'subtle' ? '--bs-text-default' : v === 'outlined' ? '--bs-icon-button-outlined-text-hover' : '--bs-text-on-action');
+        const fillTokens = (v) => (v === 'outlined' ? ['--bs-color-primary-container'] : [`--bs-icon-button-${v}-hover`, `--bs-icon-button-${v}-pressed`]);
+        for (const theme of ['light', 'dark']) {
+            for (const variant of variants) {
+                it(`${variant} / ${theme}: hover and pressed icon colour is >= 3:1 against the fill`, async () => {
+                    await withTheme(theme, async () => {
+                        const { root } = await render(h("bs-icon-button", { size: "xs", variant: variant, ariaLabel: "Remove" }, h("svg", { viewBox: "0 0 8 8" })));
+                        const icon = resolveColor(root, `var(${iconToken(variant)})`, 'color');
+                        for (const token of fillTokens(variant)) {
+                            const fill = resolveColor(root, `var(${token})`);
+                            expect(contrastRatio(icon, fill), `${variant}/${theme} ${token}`).toBeGreaterThanOrEqual(3);
+                        }
+                    });
+                });
+            }
+        }
+    });
 });

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

@@ -4,7 +4,8 @@
  * @prop --bs-icon-button-size-xs: Container width/height at size="xs". 16px.
  * @prop --bs-icon-button-icon-size-xs: Slotted icon width/height (and font-size, for icon-font glyphs) at size="xs". 8px.
  * @prop --bs-icon-button-padding-xs: Padding on all sides, size="xs" only -- distinct from --bs-icon-button-padding, since 16px/8px icon math (4px) differs from the sm/md/lg constant (12px). Aliased to --bs-spacing-50.
- * @prop --bs-icon-button-size-sm: Container width/height at size="sm". 40px.
+ * @prop --bs-icon-button-size-sm: Container width/height at size="sm". 32px.
+ * @prop --bs-icon-button-padding-sm: Padding on all sides, size="sm" only (8px around the 16px icon in the 32px container). Aliased to --bs-spacing-100.
  * @prop --bs-icon-button-size-md: Container width/height at size="md". 44px.
  * @prop --bs-icon-button-size-lg: Container width/height at size="lg". 48px.
  * @prop --bs-icon-button-icon-size-sm: Slotted icon width/height (and font-size, for icon-font glyphs) at size="sm". 16px.
@@ -60,7 +61,8 @@
      with a 20x20 icon, Small is 40x40 with a 16x16 icon -- (container - icon) / 2 is 12px in all
      three cases, matching the one concrete Figma data point (spacing/150, 12px padding on the
      Large size) exactly, so padding is a single constant across all sizes. */
-  --bs-icon-button-size-sm: 40px;
+  --bs-icon-button-size-sm: 32px;
+  --bs-icon-button-padding-sm: var(--bs-spacing-100);
   --bs-icon-button-size-md: 44px;
   --bs-icon-button-size-lg: 48px;
   --bs-icon-button-icon-size-sm: 16px;
@@ -132,6 +134,8 @@
 }
 
 .bs-icon-button {
+  /* Containing block for the absolutely-positioned bs-ripple layer. */
+  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -166,9 +170,37 @@
   font-size: var(--bs-icon-button-icon-size-xs);
 }
 
+/* size="xs" hover/pressed: explicit icon colours so the glyph never inherits a colour that is low
+   contrast against the hover/pressed fill (>= 3:1 asserted in the component tests, light + dark).
+   Filled variants use --bs-text-on-action, neutral/subtle use --bs-text-default, outlined keeps its
+   action-hover text colour. */
+.bs-icon-button--xs.bs-icon-button--primary:hover:not(:disabled),
+.bs-icon-button--xs.bs-icon-button--primary:active:not(:disabled),
+.bs-icon-button--xs.bs-icon-button--error:hover:not(:disabled),
+.bs-icon-button--xs.bs-icon-button--error:active:not(:disabled),
+.bs-icon-button--xs.bs-icon-button--success:hover:not(:disabled),
+.bs-icon-button--xs.bs-icon-button--success:active:not(:disabled),
+.bs-icon-button--xs.bs-icon-button--warning:hover:not(:disabled),
+.bs-icon-button--xs.bs-icon-button--warning:active:not(:disabled),
+.bs-icon-button--xs.bs-icon-button--info:hover:not(:disabled),
+.bs-icon-button--xs.bs-icon-button--info:active:not(:disabled) {
+  color: var(--bs-text-on-action);
+}
+.bs-icon-button--xs.bs-icon-button--neutral:hover:not(:disabled),
+.bs-icon-button--xs.bs-icon-button--neutral:active:not(:disabled),
+.bs-icon-button--xs.bs-icon-button--subtle:hover:not(:disabled),
+.bs-icon-button--xs.bs-icon-button--subtle:active:not(:disabled) {
+  color: var(--bs-text-default);
+}
+.bs-icon-button--xs.bs-icon-button--outlined:hover:not(:disabled),
+.bs-icon-button--xs.bs-icon-button--outlined:active:not(:disabled) {
+  color: var(--bs-icon-button-outlined-text-hover);
+}
+
 .bs-icon-button--sm {
   width: var(--bs-icon-button-size-sm);
   height: var(--bs-icon-button-size-sm);
+  padding: var(--bs-icon-button-padding-sm);
 }
 .bs-icon-button--sm .bs-icon-button__icon {
   width: var(--bs-icon-button-icon-size-sm);