@brandsync/wc 1.19.0 → 1.20.0

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

@@ -27,17 +27,20 @@ import { h } from "@stencil/core";
  * @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;
@@ -61,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;
@@ -122,7 +138,7 @@ export class BsButton {
     };
     render() {
         const iconOnly = (this.hasIcon || this.hasEndIcon) && !this.hasLabel;
-        return (h("button", { key: '498371cb1db28a17e668275a5e3dab6a093ce932', 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("bs-ripple", { key: '1d985ad61540f85cc47332f876eda6efcef5b87a', part: "ripple", centered: iconOnly, disabled: this.disabled }), h("span", { key: 'fbf28591ab62369e0a1a7b32da670cd350aee122', part: "icon", class: `bs-button__icon ${this.hasIcon ? 'bs-button__icon--visible' : ''}` }, h("slot", { key: '294540047c366c6f8576c8123f64f55c712d6335', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '8536c25dab900331235dba703350ff57fd7c8ff6', part: "label", class: "bs-button__label" }, h("slot", { key: '59cdb689925c55ec90c34a016e586f5be95f38e4', onSlotchange: this.onLabelSlotchange })), h("span", { key: '0976f3628408ccccec017b8e09b5a41016f0b516', part: "end-icon", class: `bs-button__end-icon ${this.hasEndIcon ? 'bs-button__end-icon--visible' : ''}` }, h("slot", { key: '40a1f6d3faf5f4ae39e9da0aa0027207afe3e7a1', 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"; }
@@ -251,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;
@@ -168,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);

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

@@ -53,6 +53,13 @@ export class BsIconButton {
      * prop to the `aria-label` HTML attribute automatically.
      */
     ariaLabel = null;
+    /** 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;
     /**
      * 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
@@ -70,7 +77,7 @@ export class BsIconButton {
             form.reset();
     };
     render() {
-        return (h("button", { key: '6ffeb6535c6c1fb493f6c805a1f70a431a593d08', class: `bs-icon-button bs-icon-button--${this.variant} bs-icon-button--${this.size}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel, "aria-pressed": this.pressed === undefined ? undefined : String(this.pressed), onClick: this.onClick }, h("bs-ripple", { key: '0f3f40ca57f447a5d92b3f0ef132c146ef25675d', part: "ripple", centered: true, disabled: this.disabled }), h("span", { key: '00c1039364372917781441fca63553a430b9398a', part: "icon", class: "bs-icon-button__icon" }, h("slot", { key: '18ba74587ec975b3f95115c211bcef1d4bac6ae5' }))));
+        return (h("button", { key: 'e95b86e2b5151e92ed392fcb0bbaaf54349b482f', class: `bs-icon-button bs-icon-button--${this.variant} bs-icon-button--${this.size}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel, "aria-expanded": this.ariaExpanded, "aria-controls": this.ariaControls, "aria-haspopup": this.ariaHasPopup, "aria-pressed": this.pressed === undefined ? undefined : String(this.pressed), onClick: this.onClick }, h("bs-ripple", { key: '16e9a328454974ae4947b9deb0b1af981e296be7', part: "ripple", centered: true, disabled: this.disabled }), h("span", { key: '645b15068abb821d134a01caa28b300d37236e0e', part: "icon", class: "bs-icon-button__icon" }, h("slot", { key: 'ae1243aedfbe25131ce538748c2e84d214ecc2be' }))));
     }
     static get is() { return "bs-icon-button"; }
     static get encapsulation() { return "shadow"; }
@@ -200,6 +207,66 @@ export class BsIconButton {
                 "attribute": "aria-label",
                 "defaultValue": "null"
             },
+            "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"
+            },
             "pressed": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -27,7 +27,7 @@ export class BsButtonSkeleton {
     /** Accessible name announced for the loading placeholder. */
     loadingLabel = 'Loading';
     render() {
-        return h("span", { key: 'c29256165abc3f5de50cf1f087f0ad161e33bb76', part: "container", class: `bs-button-skeleton bs-button-skeleton--${this.size}`, role: "status", "aria-label": this.loadingLabel });
+        return h("span", { key: 'eceeb97c96ab7be19cce6cb2fc5952b197bcbaab', part: "container", class: `bs-button-skeleton bs-button-skeleton--${this.size}`, role: "status", "aria-label": this.loadingLabel });
     }
     static get is() { return "bs-button-skeleton"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,7 @@
 import { render, h, describe, it, expect } from "@stencil/vitest";
+import { runAxeCheck } from "../../test/helpers/conventions";
+import { blockLinkNavigation } from "../../test/helpers/block-link-navigation";
+blockLinkNavigation();
 describe('bs-card', () => {
     it('defaults to the "raised" surface', async () => {
         const { root } = await render(h("bs-card", null, "Body content"));
@@ -106,4 +109,79 @@ describe('bs-card', () => {
             expect(surface.getBoundingClientRect().height).toBe(200);
         });
     });
+    describe('clickable card (href)', () => {
+        it('renders a plain container with no action when neither href nor selectable is set', async () => {
+            const { root } = await render(h("bs-card", null, "Body"));
+            expect(root.shadowRoot.querySelector('[part="action"]')).toBeNull();
+            expect(root.shadowRoot.querySelector('.bs-card')).not.toHaveClass('bs-card--interactive');
+        });
+        it('renders one real anchor wrapping the header slot', async () => {
+            const { root } = await render(h("bs-card", { href: "/booking/4b", target: "_blank", label: "Room 4B" }, h("strong", { slot: "header" }, "Room 4B"), "Body"));
+            const a = root.shadowRoot.querySelector('a[part="action"]');
+            expect(a.getAttribute('href')).toBe('/booking/4b');
+            expect(a.getAttribute('rel')).toBe('noopener noreferrer');
+            expect(a.getAttribute('aria-label')).toBe('Room 4B');
+            expect(a.querySelector('slot[name="header"]')).toBeTruthy();
+            expect(root.shadowRoot.querySelectorAll('a, button')).toHaveLength(1);
+        });
+        it('emits a cancelable bsNavigate with the href', async () => {
+            const { root } = await render(h("bs-card", { href: "#x" }, h("strong", { slot: "header" }, "T")));
+            const details = [];
+            root.addEventListener('bsNavigate', (e) => {
+                details.push(e.detail);
+                e.preventDefault();
+            });
+            root.shadowRoot.querySelector('a').click();
+            expect(details).toEqual([{ href: '#x' }]);
+        });
+        it('has a visible focus ring on keyboard focus and a hover background', async () => {
+            const { root } = await render(h("bs-card", { href: "#x" }, h("strong", { slot: "header" }, "T")));
+            const card = root.shadowRoot.querySelector('.bs-card');
+            root.shadowRoot.querySelector('a').focus();
+            expect(getComputedStyle(card).outlineStyle).not.toBe('none');
+        });
+        it('keeps footer buttons separately focusable (one extra tab stop each, none nested)', async () => {
+            const { root } = await render(h("bs-card", { href: "#x" }, h("strong", { slot: "header" }, "T"), h("bs-button", { slot: "footer" }, "Cancel")));
+            const footerBtn = root.querySelector('bs-button');
+            expect(getComputedStyle(footerBtn).pointerEvents).toBe('auto');
+            expect(root.shadowRoot.querySelector('a [part="footer"]')).toBeNull();
+        });
+    });
+    describe('selectable card', () => {
+        it('renders a button with aria-pressed and toggles on click', async () => {
+            const { root } = await render(h("bs-card", { selectable: true }, h("strong", { slot: "header" }, "Plan")));
+            const btn = root.shadowRoot.querySelector('button[part="action"]');
+            expect(btn.getAttribute('aria-pressed')).toBe('false');
+            const events = [];
+            root.addEventListener('bsChange', (e) => events.push(e.detail));
+            btn.click();
+            await new Promise(r => setTimeout(r, 50));
+            expect(root.selected).toBe(true);
+            expect(root).toHaveAttribute('selected');
+            expect(root.shadowRoot.querySelector('button').getAttribute('aria-pressed')).toBe('true');
+            expect(root.shadowRoot.querySelector('.bs-card')).toHaveClass('bs-card--selected');
+            btn.click();
+            expect(events).toEqual([true, false]);
+        });
+        it('shows a selected ring and background', async () => {
+            const { root } = await render(h("bs-card", { selectable: true, selected: true }, h("strong", { slot: "header" }, "Plan")));
+            const card = root.shadowRoot.querySelector('.bs-card');
+            expect(getComputedStyle(card).boxShadow).not.toBe('none');
+        });
+        it('prefers href over selectable', async () => {
+            const { root } = await render(h("bs-card", { selectable: true, href: "#x" }, h("strong", { slot: "header" }, "T")));
+            expect(root.shadowRoot.querySelector('button')).toBeNull();
+            expect(root.shadowRoot.querySelector('a')).toBeTruthy();
+        });
+    });
+    describe('accessibility (interactive)', () => {
+        it('link card has no axe violations', async () => {
+            const { root } = await render(h("bs-card", { href: "#x" }, h("strong", { slot: "header" }, "Room 4B"), "Body"));
+            await runAxeCheck(root);
+        });
+        it('selectable card has no axe violations', async () => {
+            const { root } = await render(h("bs-card", { selectable: true, selected: true }, h("strong", { slot: "header" }, "Plan"), "Body"));
+            await runAxeCheck(root);
+        });
+    });
 });

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

@@ -6,6 +6,11 @@
  * @prop --bs-card-border-color: Border colour. Aliased to --bs-border-default.
  * @prop --bs-card-shadow: Box shadow. Set per `surface`: --bs-shadow-sm for `raised`, none for `base` and `container`.
  * @prop --bs-card-overflow: Overflow of the surface. `hidden` so the image slot's top corners are clipped to the radius; set `visible` when the content has to overflow (a popup menu, an arrow).
+ * @prop --bs-card-bg-hover: Background of a clickable/selectable card on hover. Aliased to --bs-surface-hover.
+ * @prop --bs-card-bg-selected: Background of a selected card. Aliased to --bs-surface-selected.
+ * @prop --bs-card-ring-color-selected: Colour of the ring around a selected card. Aliased to --bs-border-primary.
+ * @prop --bs-card-ring-width-selected: Width of the selected ring (drawn outside the card, no layout shift). 2px.
+ * @prop --bs-card-focus-ring-color: Focus ring colour of a clickable/selectable card. Aliased to --bs-border-neutral-focus.
  */
 :host {
   display: block;
@@ -17,6 +22,11 @@
   --bs-card-border-color: var(--bs-border-default);
   --bs-card-shadow: var(--bs-shadow-sm);
   --bs-card-overflow: hidden;
+  --bs-card-bg-hover: var(--bs-surface-hover);
+  --bs-card-bg-selected: var(--bs-surface-selected);
+  --bs-card-ring-color-selected: var(--bs-border-primary);
+  --bs-card-ring-width-selected: 2px;
+  --bs-card-focus-ring-color: var(--bs-border-neutral-focus);
 }
 
 :host([surface='base']) {
@@ -51,6 +61,70 @@
      via a real computed-style check: rgb(0, 0, 0) regardless of theme). Same bug, same fix, as
      bs-dialog's own identical color rule on .bs-dialog__dialog. */
   color: var(--bs-text-default);
+  /* Anchors the stretched action's ::after overlay (clickable/selectable cards). */
+  position: relative;
+}
+
+/* Clickable / selectable card: one real <a>/<button> (in the header) is stretched over the whole
+   card with ::after, so the card is a single tab stop and nothing is nested inside the control. */
+.bs-card__action {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: inherit;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.bs-card__action::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+}
+
+.bs-card__action:focus-visible {
+  outline: none;
+}
+
+.bs-card--interactive {
+  cursor: pointer;
+  transition: background-color var(--bs-duration-fast) var(--bs-easing-standard);
+}
+
+.bs-card--interactive:hover {
+  background: var(--bs-card-bg-hover);
+}
+
+.bs-card--selected,
+.bs-card--selected:hover {
+  background: var(--bs-card-bg-selected);
+  box-shadow: 0 0 0 var(--bs-card-ring-width-selected) var(--bs-card-ring-color-selected), var(--bs-card-shadow);
+}
+
+/* The ring sits outside the card (a card's own overflow doesn't clip its own outline); the offset
+   clears the selected ring. */
+.bs-card--interactive:has(.bs-card__action:focus-visible) {
+  outline: 2px solid var(--bs-card-focus-ring-color);
+  outline-offset: calc(var(--bs-card-ring-width-selected) + 2px);
+}
+
+/* Body/footer sit above the overlay but let clicks pass through, except for controls that are
+   direct children of the slot, which stay individually clickable. */
+.bs-card--interactive .bs-card__body,
+.bs-card--interactive .bs-card__footer {
+  position: relative;
+  pointer-events: none;
+}
+
+.bs-card--interactive .bs-card__body ::slotted(:is(a, button, input, select, textarea, bs-button, bs-icon-button, bs-checkbox, bs-switch, bs-radio, bs-input, [tabindex])),
+.bs-card--interactive .bs-card__footer ::slotted(:is(a, button, input, select, textarea, bs-button, bs-icon-button, bs-checkbox, bs-switch, bs-radio, bs-input, [tabindex])) {
+  pointer-events: auto;
 }
 
 /* Empty by default (no padding/margin) -- only visible when the image slot has content, same
@@ -91,4 +165,5 @@
 
 @media (forced-colors: active) {
   .bs-card { border: 1px solid CanvasText; }
+  .bs-card--selected { outline: 2px solid Highlight; }
 }