@brandsync/wc 1.18.0 → 1.20.0

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

@@ -23,6 +23,7 @@ import { h } from "@stencil/core";
  * @slot - Default slot: the icon content. Exactly one icon, no label -- an inline SVG, or an icon-font
  * glyph (sized by `font-size`, which this component sets from the `size` prop).
  * @part icon - The icon wrapper element.
+ * @part ripple - The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 // Note: this component's CSS Custom Properties (--bs-icon-button-*) are documented via @prop
 // comments in bs-icon-button.css, not here -- Stencil's docs generator only parses @prop out of
@@ -52,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
@@ -69,7 +77,7 @@ export class BsIconButton {
             form.reset();
     };
     render() {
-        return (h("button", { key: 'e04c7785712f0f9a2bfaa0efd51712d7c6ca805e', 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("span", { key: '2b9cfb3af8b3914ee88a3244c3d1f102cbae7082', part: "icon", class: "bs-icon-button__icon" }, h("slot", { key: 'b561552aece8e0f8ae83dd6619295e5c9477aa89' }))));
+        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"; }
@@ -199,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: 'ba65829a03b8c34ec0f42b157626e5869978d3bf', 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; }
 }

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

@@ -14,9 +14,20 @@ import { h } from "@stencil/core";
  * to its top corners. Presence of assigned content is what shows it -- doesn't affect layout when
  * empty.
  * @slot header - Optional heading content above the body.
+ * ## Clickable and selectable cards
+ * Set `href` to make the whole card a link, or `selectable` to make it a toggle (`selected`,
+ * `aria-pressed`). The card stays a plain container with ONE real `<a>`/`<button>` (the "stretched
+ * link" pattern): the `header` slot is rendered inside it, so the header text is the accessible name
+ * (or set `label`), and it is stretched over the whole card, so the card is one tab stop and no
+ * interactive element is nested inside another. Controls in the `body`/`footer` slots stay
+ * individually clickable and focusable as long as they are *direct* children of the slot
+ * (`bs-button`, `a`, `button`, form controls); everything else in those slots passes clicks through
+ * to the card.
+ *
  * @slot - Default slot: the card's main body content.
  * @slot footer - Optional actions/content below the body (e.g. a button).
  * @part container - The outer surface element.
+ * @part action - The `<a>`/`<button>` that makes the card clickable (only when `href` or `selectable` is set).
  * @part image - The hero image wrapper (only visible when the `image` slot has content).
  * @part header - The header wrapper.
  * @part body - The body wrapper.
@@ -26,6 +37,36 @@ export class BsCard {
     /** Maps to the brandsync-tokens `--bs-paper-bg-*` set — Brandsync's tokens don't have a
      * dedicated "card" component yet, so this reuses the existing Paper surface tokens. */
     surface = 'raised';
+    /** Makes the whole card a link to this URL (a real `<a>`). Takes precedence over `selectable`. */
+    href;
+    /** Link `target`, only used with `href`. With `_blank`, `rel` defaults to `noopener noreferrer`. */
+    target;
+    /** Link `rel`, only used with `href`. */
+    rel;
+    /** Makes the whole card a toggle (a real `<button aria-pressed>`). Ignored when `href` is set. */
+    selectable = false;
+    /** Whether a `selectable` card is selected. Mutable and reflected; toggled by the user. */
+    selected = false;
+    /** Accessible name for the clickable card, used instead of the `header` slot text. Set it when
+     * there is no `header` content, or when the header text is not a good name on its own. */
+    label;
+    /** Fires when a `selectable` card is toggled by the user, with the new `selected` value. */
+    bsChange;
+    /** Fires when a link card (`href`) is clicked, before the browser navigates. **Cancelable**:
+     * `preventDefault()` stops the navigation so you can route it yourself. Detail is `{ href }`.
+     * Modified clicks (ctrl/cmd/shift/alt, middle button) are left to the browser. */
+    bsNavigate;
+    onLinkClick = (ev) => {
+        if (ev.defaultPrevented || ev.button !== 0 || ev.metaKey || ev.ctrlKey || ev.shiftKey || ev.altKey)
+            return;
+        const navigate = this.bsNavigate.emit({ href: this.href });
+        if (navigate.defaultPrevented)
+            ev.preventDefault();
+    };
+    onToggleClick = () => {
+        this.selected = !this.selected;
+        this.bsChange.emit(this.selected);
+    };
     /** Tracks whether the `image` slot has assigned content, so the image wrapper only reserves
      * layout space (and clips its top corners) when there's actually an image -- same pattern as
      * `bs-dialog`'s `hasImage`. */
@@ -34,7 +75,16 @@ export class BsCard {
         this.hasImage = ev.target.assignedNodes().length > 0;
     };
     render() {
-        return (h("div", { key: 'be681abe6454f6f0ef03ec8ef05f2ef7e036b2fb', part: "container", class: `bs-card bs-card--${this.surface}` }, h("div", { key: '94fcc1a41307d29cd6e3d1c0db68e4ad56f76e66', part: "image", class: `bs-card__image ${this.hasImage ? 'bs-card__image--visible' : ''}` }, h("slot", { key: 'fa2441f597664fcfb1920f7f6b6d81cebb33c3cf', name: "image", onSlotchange: this.onImageSlotchange })), h("div", { key: 'f45578aeab67c531e3f1066788b646464e4ee5a3', class: "bs-card__content" }, h("div", { key: '44bc9e76ebb151099736e73fac2eea1e5baba014', part: "header", class: "bs-card__header" }, h("slot", { key: '58f766725dd1bd81aa4a5f5fa1da2626fd705582', name: "header" })), h("div", { key: '8ee2df46d6a643e0f7d13ec875a363b4ef714b00', part: "body", class: "bs-card__body" }, h("slot", { key: '8c47ca1e2acffbc952cf15a0518c3ca2d640fe58' })), h("div", { key: 'de5856f9b0a72cd42345320fbdd2a290640039d7', part: "footer", class: "bs-card__footer" }, h("slot", { key: '982cee8e6fb70228faf2cd7a55312ef690bd23a2', name: "footer" })))));
+        const isLink = !!this.href;
+        const isToggle = !isLink && this.selectable;
+        const rel = this.rel ?? (this.target === '_blank' ? 'noopener noreferrer' : undefined);
+        const header = h("slot", { key: 'a30b4f1a71f4469458a8c701b38b51deb1b92df5', name: "header" });
+        const classes = ['bs-card', `bs-card--${this.surface}`];
+        if (isLink || isToggle)
+            classes.push('bs-card--interactive');
+        if (isToggle && this.selected)
+            classes.push('bs-card--selected');
+        return (h("div", { key: '0e88c7d2f07f0ef7bbfada87cd83415aa6949075', part: "container", class: classes.join(' ') }, h("div", { key: '553162d5aa9d0f3b4b03eed02bb0d1717adf5695', part: "image", class: `bs-card__image ${this.hasImage ? 'bs-card__image--visible' : ''}` }, h("slot", { key: 'de82a0591157228f5586c816795d634ea1b41d3d', name: "image", onSlotchange: this.onImageSlotchange })), h("div", { key: 'a09828b31c202312751cbba9161aa81e2f79e51d', class: "bs-card__content" }, h("div", { key: '03592a2cb3a598f04a5b9253b80301fbf910fdf9', part: "header", class: "bs-card__header" }, isLink ? (h("a", { part: "action", class: "bs-card__action", href: this.href, target: this.target, rel: rel, "aria-label": this.label, onClick: this.onLinkClick }, header)) : isToggle ? (h("button", { part: "action", type: "button", class: "bs-card__action", "aria-pressed": String(this.selected), "aria-label": this.label, onClick: this.onToggleClick }, header)) : (header)), h("div", { key: '0d174a856927702a274f2b60df02c4691d5927f3', part: "body", class: "bs-card__body" }, h("slot", { key: '7bc6b590ee94e45028e35bf8d9f83aaefcf63ff0' })), h("div", { key: '6f3b9db20a6dd2c8799570ae8a5c6252ebde642f', part: "footer", class: "bs-card__footer" }, h("slot", { key: '08a0cc866f737490346c7969e45d089d89be9143', name: "footer" })))));
     }
     static get is() { return "bs-card"; }
     static get encapsulation() { return "shadow"; }
@@ -75,6 +125,122 @@ export class BsCard {
                 "reflect": true,
                 "attribute": "surface",
                 "defaultValue": "'raised'"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the whole card a link to this URL (a real `<a>`). Takes precedence over `selectable`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Link `target`, only used with `href`. With `_blank`, `rel` defaults to `noopener noreferrer`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target"
+            },
+            "rel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Link `rel`, only used with `href`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rel"
+            },
+            "selectable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the whole card a toggle (a real `<button aria-pressed>`). Ignored when `href` is set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selectable",
+                "defaultValue": "false"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether a `selectable` card is selected. Mutable and reflected; toggled by the user."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selected",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the clickable card, used instead of the `header` slot text. Set it when\nthere is no `header` content, or when the header text is not a good name on its own."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
             }
         };
     }
@@ -83,4 +249,37 @@ export class BsCard {
             "hasImage": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "bsChange",
+                "name": "bsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when a `selectable` card is toggled by the user, with the new `selected` value."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "bsNavigate",
+                "name": "bsNavigate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when a link card (`href`) is clicked, before the browser navigates. **Cancelable**:\n`preventDefault()` stops the navigation so you can route it yourself. Detail is `{ href }`.\nModified clicks (ctrl/cmd/shift/alt, middle button) are left to the browser."
+                },
+                "complexType": {
+                    "original": "{ href: string }",
+                    "resolved": "{ href: string; }",
+                    "references": {}
+                }
+            }];
+    }
 }

package/dist/collection/components/bs-card/bs-card.stories.js

@@ -41,3 +41,35 @@ export const WithImage = {
     </bs-card>
   `,
 };
+export const Clickable = {
+    name: 'Clickable (link)',
+    render: args => html `
+    <bs-card surface=${args.surface} href="#room-4b" style="max-width: 320px;" @bsNavigate=${(e) => e.preventDefault()}>
+      <strong slot="header">Meeting Room 4B</strong>
+      <p>Reserved for 2:00pm - 3:00pm. The whole card is one link.</p>
+    </bs-card>
+  `,
+};
+export const Selectable = {
+    name: 'Selectable (toggle)',
+    render: args => html `
+    <div style="display: flex; gap: 16px;">
+      ${['Basic', 'Plus', 'Pro'].map((plan, i) => html `
+          <bs-card surface=${args.surface} selectable ?selected=${i === 1} style="width: 200px;">
+            <strong slot="header">${plan}</strong>
+            <p>Choose the ${plan} plan.</p>
+          </bs-card>
+        `)}
+    </div>
+  `,
+};
+export const ClickableWithFooterAction = {
+    name: 'Clickable with footer action',
+    render: args => html `
+    <bs-card surface=${args.surface} href="#room-4b" style="max-width: 320px;" @bsNavigate=${(e) => e.preventDefault()}>
+      <strong slot="header">Meeting Room 4B</strong>
+      <p>The footer button is its own tab stop and does not trigger the card link.</p>
+      <bs-button slot="footer" variant="outlined" size="sm">Cancel booking</bs-button>
+    </bs-card>
+  `,
+};

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

@@ -1,8 +1,10 @@
 import { render, h, describe, it, expect } from "@stencil/vitest";
 import { afterEach, beforeEach, vi } from "vitest";
 import { userEvent } from "vitest/browser";
-import { assertShadowParts, runAxeCheck } from "../../test/helpers/conventions";
+import { assertCssCustomProperties, assertShadowParts, runAxeCheck } from "../../test/helpers/conventions";
 const slides = (n) => Array.from({ length: n }, (_, i) => h("div", null, "Slide ", i + 1));
+// Page changes play a short exit-then-enter motion (default 300ms); the new page is on screen after it.
+const settled = () => new Promise(resolve => setTimeout(resolve, 450));
 const visible = (root) => Array.from(root.children).filter(c => !c.hidden).map(c => c.textContent);
 // Autoplay deliberately holds while the pointer is over the carousel (WCAG pause-on-hover). The test
 // browser keeps ONE pointer for the whole run, so an earlier test that hovered something near the top
@@ -88,6 +90,7 @@ describe('bs-carousel', () => {
             expect(prev.disabled).toBe(true);
             btn(next).click();
             await waitForChanges();
+            await settled();
             expect(visible(root)).toEqual(['Slide 4', 'Slide 5', 'Slide 6']);
             expect(root.currentPage).toBe(2);
             expect(spy).toHaveReceivedEventDetail(2);
@@ -108,6 +111,7 @@ describe('bs-carousel', () => {
             pagination.shadowRoot.querySelectorAll('.bs-pagination__page')[2].click();
             await waitForChanges();
             expect(root.currentPage).toBe(3);
+            await settled();
             expect(visible(root)).toEqual(['Slide 7', 'Slide 8', 'Slide 9']);
             expect(spy).toHaveReceivedEventTimes(1);
             expect(spy).toHaveReceivedEventDetail(3);
@@ -195,4 +199,38 @@ describe('bs-carousel', () => {
             expect(root.currentPage).toBe(1);
         });
     });
+    describe('page change motion', () => {
+        const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+        it('keeps the old page up while it animates out, then shows the new page', async () => {
+            const { root, waitForChanges } = await render(h("bs-carousel", { style: { '--bs-carousel-duration': '200ms' } }, slides(6)));
+            const before = visible(root);
+            root.currentPage = 2;
+            await waitForChanges();
+            expect(visible(root)).toEqual(before);
+            await wait(400);
+            await waitForChanges();
+            expect(visible(root)).not.toEqual(before);
+            expect(root.currentPage).toBe(2);
+        });
+        it('switches immediately when the duration is 0ms', async () => {
+            const { root, waitForChanges } = await render(h("bs-carousel", { style: { '--bs-carousel-duration': '0ms' } }, slides(6)));
+            const before = visible(root);
+            root.currentPage = 2;
+            await waitForChanges();
+            expect(visible(root)).not.toEqual(before);
+        });
+        it('snaps to the latest page when changed again mid-motion', async () => {
+            const { root, waitForChanges } = await render(h("bs-carousel", { style: { '--bs-carousel-duration': '400ms' } }, slides(9)));
+            root.currentPage = 2;
+            await waitForChanges();
+            root.currentPage = 3;
+            await waitForChanges();
+            await wait(100);
+            expect(visible(root)).toEqual(['Slide 7', 'Slide 8', 'Slide 9']);
+        });
+        it('exposes its motion custom properties', async () => {
+            const { root } = await render(h("bs-carousel", null, slides(6)));
+            assertCssCustomProperties(root, ['--bs-carousel-duration', '--bs-carousel-easing', '--bs-carousel-slide-distance']);
+        });
+    });
 });