@brandsync/wc 1.18.0 → 1.19.0

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

@@ -0,0 +1,80 @@
+:host {
+  display: block;
+  --bs-presence-duration: var(--bs-duration-default);
+  --bs-presence-easing: var(--bs-easing-standard);
+  --bs-presence-distance: var(--bs-spacing-400);
+  /* No brandsync token for a unitless scale factor. 0.96 is visible in the playground
+     without the content jumping. */
+  --bs-presence-scale: 0.96;
+}
+
+:host([duration='instant']) {
+  --bs-presence-duration: var(--bs-duration-instant);
+}
+:host([duration='fast']) {
+  --bs-presence-duration: var(--bs-duration-fast);
+}
+:host([duration='default']) {
+  --bs-presence-duration: var(--bs-duration-default);
+}
+:host([duration='slow']) {
+  --bs-presence-duration: var(--bs-duration-slow);
+}
+:host([duration='slower']) {
+  --bs-presence-duration: var(--bs-duration-slower);
+}
+
+:host([easing='standard']) {
+  --bs-presence-easing: var(--bs-easing-standard);
+}
+:host([easing='decelerate']) {
+  --bs-presence-easing: var(--bs-easing-decelerate);
+}
+:host([easing='accelerate']) {
+  --bs-presence-easing: var(--bs-easing-accelerate);
+}
+:host([easing='linear']) {
+  --bs-presence-easing: var(--bs-easing-linear);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :host {
+    --bs-presence-duration: var(--bs-duration-instant);
+  }
+}
+
+.bs-presence {
+  display: grid;
+  grid-template-rows: 1fr;
+}
+
+.bs-presence--closed.bs-presence--collapse {
+  grid-template-rows: 0fr;
+}
+
+.bs-presence--collapse .bs-presence__clip {
+  overflow: hidden;
+}
+
+.bs-presence__clip {
+  min-height: 0;
+  opacity: 1;
+  transform: none;
+}
+
+.bs-presence--closed .bs-presence__clip {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.bs-presence--slide-up.bs-presence--closed .bs-presence__clip {
+  transform: translateY(var(--bs-presence-distance));
+}
+
+.bs-presence--slide-down.bs-presence--closed .bs-presence__clip {
+  transform: translateY(calc(var(--bs-presence-distance) * -1));
+}
+
+.bs-presence--scale.bs-presence--closed .bs-presence__clip {
+  transform: scale(var(--bs-presence-scale));
+}

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

@@ -0,0 +1,233 @@
+import { Host, h } from "@stencil/core";
+const PRESETS = ['fade', 'slide-up', 'slide-down', 'scale', 'collapse'];
+/**
+ * Shows and hides slotted content with a short enter/exit transition.
+ *
+ * The motion uses the shared duration and easing tokens (`--bs-duration-*`, `--bs-easing-*`).
+ * Under `prefers-reduced-motion: reduce` those durations are already `0ms`, and this component
+ * forces `--bs-presence-duration` to `--bs-duration-instant` as well, so the content snaps
+ * instead of moving.
+ *
+ * ## When to use
+ * - Revealing a block that does not have its own enter/exit (a card, a form section, a panel).
+ * - Comparing duration and easing tokens while designing a screen.
+ *
+ * ## When not to use
+ * - Loading placeholders (`bs-skeleton`), spinners (`bs-spinner`), or progress.
+ * - Dialog, snackbar, toast, and command palette — those components own their motion.
+ *
+ * @slot - The content to show and hide.
+ * @part content - The element that transitions. Style it with `::part(content)`.
+ * @prop --bs-presence-duration - Transition length. Set from the `duration` prop to a `--bs-duration-*` token.
+ * @prop --bs-presence-easing - Transition curve. Set from the `easing` prop to a `--bs-easing-*` token.
+ * @prop --bs-presence-distance - Travel distance for `slide-up` and `slide-down`. Aliased to `--bs-spacing-400`.
+ * @prop --bs-presence-scale - Closed scale for `scale`. No unitless scale token exists, so the default is `0.96`.
+ */
+export class BsPresence {
+    el;
+    /** When true, the slotted content is shown. Flipping this plays the exit or enter transition. */
+    active = false;
+    /** Which transition to play. */
+    preset = 'fade';
+    /** Length of the transition, mapped to a `--bs-duration-*` token. */
+    duration = 'default';
+    /** Curve of the transition, mapped to a `--bs-easing-*` token. */
+    easing = 'standard';
+    /** Fires once when the transition to the new `active` state finishes. Payload is that state. */
+    bsTransitionEnd;
+    clip;
+    shell;
+    /**
+     * CSS class changes inside this shadow root will play the exit and then not the entrance
+     * (Chromium drops the reverse transition). The Web Animations API plays both directions.
+     * A 0ms duration — including `prefers-reduced-motion` — snaps and emits here.
+     */
+    onActiveChange(active) {
+        const clip = this.clip;
+        const shell = this.shell;
+        clip?.getAnimations().forEach(animation => animation.cancel());
+        shell?.getAnimations().forEach(animation => animation.cancel());
+        const ms = this.motionDuration();
+        if (!clip || ms === 0) {
+            this.bsTransitionEnd.emit(active);
+            return;
+        }
+        const style = getComputedStyle(this.el);
+        const easing = style.getPropertyValue('--bs-presence-easing').trim() || 'ease';
+        const distance = style.getPropertyValue('--bs-presence-distance').trim() || '0px';
+        const scale = style.getPropertyValue('--bs-presence-scale').trim() || '1';
+        const preset = PRESETS.includes(this.preset) ? this.preset : 'fade';
+        const hidden = preset === 'slide-up'
+            ? `translateY(${distance})`
+            : preset === 'slide-down'
+                ? `translateY(calc(${distance} * -1))`
+                : preset === 'scale'
+                    ? `scale(${scale})`
+                    : 'none';
+        const shown = { opacity: 1, transform: 'none' };
+        const concealed = { opacity: 0, transform: hidden };
+        const animation = clip.animate(active ? [concealed, shown] : [shown, concealed], { duration: ms, easing, fill: 'both' });
+        if (preset === 'collapse' && shell) {
+            shell.animate(active
+                ? [{ gridTemplateRows: '0fr' }, { gridTemplateRows: '1fr' }]
+                : [{ gridTemplateRows: '1fr' }, { gridTemplateRows: '0fr' }], { duration: ms, easing, fill: 'both' });
+        }
+        animation.onfinish = () => {
+            animation.cancel();
+            shell?.getAnimations().forEach(running => running.cancel());
+            if (this.active === active)
+                this.bsTransitionEnd.emit(active);
+        };
+    }
+    motionDuration() {
+        const value = getComputedStyle(this.el).getPropertyValue('--bs-presence-duration').trim();
+        if (value.endsWith('ms'))
+            return parseFloat(value);
+        if (value.endsWith('s'))
+            return parseFloat(value) * 1000;
+        return 0;
+    }
+    render() {
+        const preset = PRESETS.includes(this.preset) ? this.preset : 'fade';
+        return (h(Host, { key: '2defd735d80a2efdccffd600c23f1db31ef5914d', inert: this.active ? undefined : true, "aria-hidden": this.active ? null : 'true' }, h("div", { key: 'bebdec566c415bcb0baa196c3f74b04adc80dfb4', part: "content", class: `bs-presence bs-presence--${preset}${this.active ? '' : ' bs-presence--closed'}`, ref: el => (this.shell = el) }, h("div", { key: 'fac80d18429fe4aa2b00533ede5b7ae228cf142e', class: "bs-presence__clip", ref: el => (this.clip = el) }, h("slot", { key: '86fc247c13f2c64c365f8c8f9d959af6befaa89a' })))));
+    }
+    static get is() { return "bs-presence"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-presence.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-presence.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, the slotted content is shown. Flipping this plays the exit or enter transition."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "active",
+                "defaultValue": "false"
+            },
+            "preset": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsPresencePreset",
+                    "resolved": "\"collapse\" | \"fade\" | \"scale\" | \"slide-down\" | \"slide-up\"",
+                    "references": {
+                        "BsPresencePreset": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-presence/bs-presence.tsx",
+                            "id": "src/components/bs-presence/bs-presence.tsx::BsPresencePreset"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Which transition to play."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "preset",
+                "defaultValue": "'fade'"
+            },
+            "duration": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsPresenceDuration",
+                    "resolved": "\"default\" | \"fast\" | \"instant\" | \"slow\" | \"slower\"",
+                    "references": {
+                        "BsPresenceDuration": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-presence/bs-presence.tsx",
+                            "id": "src/components/bs-presence/bs-presence.tsx::BsPresenceDuration"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Length of the transition, mapped to a `--bs-duration-*` token."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "duration",
+                "defaultValue": "'default'"
+            },
+            "easing": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsPresenceEasing",
+                    "resolved": "\"accelerate\" | \"decelerate\" | \"linear\" | \"standard\"",
+                    "references": {
+                        "BsPresenceEasing": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-presence/bs-presence.tsx",
+                            "id": "src/components/bs-presence/bs-presence.tsx::BsPresenceEasing"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Curve of the transition, mapped to a `--bs-easing-*` token."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "easing",
+                "defaultValue": "'standard'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsTransitionEnd",
+                "name": "bsTransitionEnd",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires once when the transition to the new `active` state finishes. Payload is that state."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "active",
+                "methodName": "onActiveChange"
+            }];
+    }
+}

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

@@ -0,0 +1,101 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const presets = ['fade', 'slide-up', 'slide-down', 'scale', 'collapse'];
+const durations = ['instant', 'fast', 'default', 'slow', 'slower'];
+const easings = ['standard', 'decelerate', 'accelerate', 'linear'];
+const card = html `
+  <bs-card style="width: 320px">
+    <span slot="header">Booking summary</span>
+    Room 214 · 2 nights
+  </bs-card>
+`;
+const motionMs = (el) => {
+    const value = getComputedStyle(el).getPropertyValue('--bs-presence-duration').trim();
+    if (value.endsWith('ms'))
+        return parseFloat(value);
+    if (value.endsWith('s'))
+        return parseFloat(value) * 1000;
+    return 0;
+};
+// Hide, wait out the exit, then show again. Flipping `active` in one frame never paints the
+// hidden state, so the enter transition has nothing to animate from.
+const replay = (event) => {
+    const demo = event.currentTarget.closest('[data-presence-demo]');
+    const nodes = Array.from(demo?.querySelectorAll('bs-presence') ?? []);
+    nodes.forEach(el => {
+        el.active = false;
+    });
+    const wait = Math.max(0, ...nodes.map(motionMs)) + 40;
+    window.setTimeout(() => {
+        nodes.forEach(el => {
+            el.active = true;
+        });
+    }, wait);
+};
+const demo = (body) => html `
+  <div data-presence-demo>
+    <bs-stack gap="300">
+      <bs-button @click=${replay}>Replay</bs-button>
+      ${body}
+    </bs-stack>
+  </div>
+`;
+const meta = {
+    title: 'Motion/bs-presence',
+    parameters: { docs: { description: { component: componentDescription('bs-presence') } } },
+    render: args => demo(html `
+      <bs-presence
+        ?active=${args.active}
+        preset=${args.preset}
+        duration=${args.duration}
+        easing=${args.easing}
+      >
+        ${card}
+      </bs-presence>
+    `),
+    argTypes: {
+        active: { control: 'boolean', description: propDescription('bs-presence', 'active') },
+        preset: { control: 'inline-radio', options: presets, description: propDescription('bs-presence', 'preset') },
+        duration: { control: 'inline-radio', options: durations, description: propDescription('bs-presence', 'duration') },
+        easing: { control: 'inline-radio', options: easings, description: propDescription('bs-presence', 'easing') },
+    },
+    args: { active: true, preset: 'fade', duration: 'default', easing: 'standard' },
+};
+export default meta;
+export const Default = {};
+export const Presets = {
+    render: () => demo(html `
+      <bs-grid min-column-width="220px" gap="300">
+        ${presets.map(preset => html `
+            <bs-stack gap="100">
+              <span>${preset}</span>
+              <bs-presence active preset=${preset} duration="slow"> ${card} </bs-presence>
+            </bs-stack>
+          `)}
+      </bs-grid>
+    `),
+};
+export const Durations = {
+    render: () => demo(html `
+      <bs-stack gap="200">
+        ${durations.map(duration => html `
+            <bs-stack gap="100">
+              <span>${duration}</span>
+              <bs-presence active preset="slide-up" duration=${duration}> ${card} </bs-presence>
+            </bs-stack>
+          `)}
+      </bs-stack>
+    `),
+};
+export const Easings = {
+    render: () => demo(html `
+      <bs-stack gap="200">
+        ${easings.map(easing => html `
+            <bs-stack gap="100">
+              <span>${easing}</span>
+              <bs-presence active preset="slide-up" duration="slower" easing=${easing}> ${card} </bs-presence>
+            </bs-stack>
+          `)}
+      </bs-stack>
+    `),
+};

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

@@ -69,7 +69,7 @@ export class BsProgress {
         const isDeterminate = this.type === 'determinate';
         const value = this.clampedValue;
         const dashOffset = circumference * (1 - value / 100);
-        return (h("div", { key: '76f9b0175af7e6300a901f8c0e26da4b9de2a192', part: "container", class: "bs-progress" }, h("div", { key: '10d34faab3d49fa21e72d0cf2bd1d1c2804ef442', class: "bs-progress__box", style: { width: `${diameter}px`, height: `${diameter}px` }, role: "progressbar", "aria-label": this.ariaLabel, "aria-valuemin": isDeterminate ? '0' : undefined, "aria-valuemax": isDeterminate ? '100' : undefined, "aria-valuenow": isDeterminate ? String(value) : undefined, "aria-busy": isDeterminate ? undefined : 'true' }, isDeterminate ? (h("svg", { class: "bs-progress__ring", width: diameter, height: diameter, viewBox: `0 0 ${diameter} ${diameter}` }, h("circle", { part: "track", class: "bs-progress__track", cx: diameter / 2, cy: diameter / 2, r: radius, "stroke-width": this.strokeWidth, fill: "none" }), h("circle", { part: "arc", class: "bs-progress__arc", cx: diameter / 2, cy: diameter / 2, r: radius, "stroke-width": this.strokeWidth, fill: "none", "stroke-linecap": "round", "stroke-dasharray": circumference, "stroke-dashoffset": dashOffset }))) : (
+        return (h("div", { key: 'b91ecdb26db2711f65f9b35169d30f8c21c85ef0', part: "container", class: "bs-progress" }, h("div", { key: 'cafa73aaacde863f5a82185fe75454b0004d68f3', class: "bs-progress__box", style: { width: `${diameter}px`, height: `${diameter}px` }, role: "progressbar", "aria-label": this.ariaLabel, "aria-valuemin": isDeterminate ? '0' : undefined, "aria-valuemax": isDeterminate ? '100' : undefined, "aria-valuenow": isDeterminate ? String(value) : undefined, "aria-busy": isDeterminate ? undefined : 'true' }, isDeterminate ? (h("svg", { class: "bs-progress__ring", width: diameter, height: diameter, viewBox: `0 0 ${diameter} ${diameter}` }, h("circle", { part: "track", class: "bs-progress__track", cx: diameter / 2, cy: diameter / 2, r: radius, "stroke-width": this.strokeWidth, fill: "none" }), h("circle", { part: "arc", class: "bs-progress__arc", cx: diameter / 2, cy: diameter / 2, r: radius, "stroke-width": this.strokeWidth, fill: "none", "stroke-linecap": "round", "stroke-dasharray": circumference, "stroke-dashoffset": dashOffset }))) : (
         // Figma's indeterminate ring is a fading "comet tail" (transparent -> solid color),
         // not a flat-colored partial arc -- SVG has no angular/conic gradient primitive, so a
         // CSS conic-gradient (color varying by angle) + a radial-gradient mask (carving the
@@ -78,7 +78,7 @@ export class BsProgress {
         h("div", { part: "arc", class: "bs-progress__spinner", style: {
                 '--bs-progress-spinner-stroke-width': `${this.strokeWidth}px`,
                 '--bs-progress-spinner-sweep': `${INDETERMINATE_SWEEP_DEGREES}deg`,
-            } }))), isDeterminate && this.showLabel && (h("span", { key: 'bfc9b155c8b8d68255a0ad223e31bc25f79566b8', part: "label", class: `bs-progress__label bs-progress__label--${this.size}` }, value, "%"))));
+            } }))), isDeterminate && this.showLabel && (h("span", { key: '3d9d1fb48f12171fe4e7bfae6ee86b5d97bc094c', part: "label", class: `bs-progress__label bs-progress__label--${this.size}` }, value, "%"))));
     }
     static get is() { return "bs-progress"; }
     static get encapsulation() { return "shadow"; }

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

@@ -51,13 +51,13 @@ export class BsProgressLinear {
     render() {
         const isDeterminate = this.type === 'determinate';
         const value = this.clampedValue;
-        return (h("div", { key: '8cb0ed265f5fae4146ace2ff2cb4e9876b0011c6', part: "container", class: "bs-progress-linear" }, h("div", { key: '62b448cc83f5b317b41277c414cf7712ef4ee1b5', part: "track", class: `bs-progress-linear__track bs-progress-linear__track--${this.size}`, role: "progressbar", "aria-label": this.ariaLabel, "aria-valuemin": isDeterminate ? '0' : undefined, "aria-valuemax": isDeterminate ? '100' : undefined, "aria-valuenow": isDeterminate ? String(value) : undefined, "aria-busy": isDeterminate ? undefined : 'true' }, isDeterminate ? (h("div", { part: "fill", class: "bs-progress-linear__fill", style: { width: `${value}%` } })) : (
+        return (h("div", { key: 'b8413e4b2007893cf2a30243eaa6018c0e7321c8', part: "container", class: "bs-progress-linear" }, h("div", { key: 'a169168b32f47f5d62a14c54a3d1fde9e2beb219', part: "track", class: `bs-progress-linear__track bs-progress-linear__track--${this.size}`, role: "progressbar", "aria-label": this.ariaLabel, "aria-valuemin": isDeterminate ? '0' : undefined, "aria-valuemax": isDeterminate ? '100' : undefined, "aria-valuenow": isDeterminate ? String(value) : undefined, "aria-busy": isDeterminate ? undefined : 'true' }, isDeterminate ? (h("div", { part: "fill", class: "bs-progress-linear__fill", style: { width: `${value}%` } })) : (
         // Figma's indeterminate bar is a soft "comet" gradient segment (transparent -> blue ->
         // transparent) sliding left-to-right across the track's full width in a loop -- the
         // same fade concept as bs-progress's indeterminate ring's conic-gradient comet tail,
         // but along a straight line via a linear-gradient + `transform: translateX(...)`
         // keyframe animation instead of a rotating conic-gradient.
-        h("div", { part: "fill", class: "bs-progress-linear__fill bs-progress-linear__fill--indeterminate" }))), this.showLabel && this.hasLabelContent && (h("span", { key: '26e60beb19a7f45a903667928d7256a4d24875c9', part: "label", class: "bs-progress-linear__label" }, h("slot", { key: 'ca9c57dc3b3ee22eedf489ee4e6b3444f85b59df' })))));
+        h("div", { part: "fill", class: "bs-progress-linear__fill bs-progress-linear__fill--indeterminate" }))), this.showLabel && this.hasLabelContent && (h("span", { key: 'dbde538356381fb557ec01cab90b6d8ba67a479b', part: "label", class: "bs-progress-linear__label" }, h("slot", { key: 'e9f6bced860f1147a88171fade7e3e0a6947c17e' })))));
     }
     // The default slot's assigned content lives in the host's light DOM regardless of whether a
     // <slot> is currently rendered in the shadow tree, so this can be computed directly from the

package/dist/collection/components/bs-qr-code/bs-qr-code.js

@@ -168,7 +168,7 @@ export class BsQrCode {
         const buttonSize = this.size === 'sm' ? 'sm' : 'md';
         // Figma shows the unavailable actions as filled-disabled (grey) rather than a faded outline,
         // which is what bs-button's disabled primary looks like.
-        return (h("bs-card", { key: 'c69bffccb96c2c76fabc8a68caa33598d330925c', part: "container", class: "bs-qr-code", surface: "base" }, this.closable && (h("bs-icon-button", { key: 'eddf5fd0434ef1d4a79c65cb76e643f5607c3690', part: "close", class: "bs-qr-code__close", variant: "subtle", size: "sm", ariaLabel: this.closeLabel, onClick: () => this.bsClose.emit() }, h("svg", { key: '04751b373bc8ccf24b0777646598f6b0b594dd1d', viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", "stroke-width": "1.6", "stroke-linecap": "round", "aria-hidden": "true" }, h("path", { key: 'e40257103cb9c062af6806874a44cc4050b91a09', d: "M5 5L15 15M15 5L5 15" })))), h("div", { key: '55689fd3950bf8a52fcc13e51447b329414c846d', class: "bs-qr-code__body" }, h("div", { key: '7335ae0ae9f42fe3b99b1dc8096338c1b0d12fc4', part: "head", class: "bs-qr-code__head" }, h("p", { key: '1d6288133f9619f865782d75352e02ffbd4b3cb3', part: "title", class: "bs-qr-code__title" }, this.heading), this.description && (h("p", { key: '2ac5a838cc0d524b726363a5711fcfd3558e7738', part: "description", class: "bs-qr-code__description" }, this.description))), h("div", { key: '2412e4792a4ba605c3e8c68652600901f00fbd9c', part: "qr", class: "bs-qr-code__qr" }, h("div", { key: '480f7b27bdb7521592cf200fa2e8a36b89742d94', part: "code", class: "bs-qr-code__code" }, h("slot", { key: 'cc20adaeea528bdaddc2187fd48d8c33b6c29984', name: "code" }, this.renderMatrix()), h("div", { key: '98ad7405250536002da78c856fe34f29101d6b8b', part: "logo", class: { 'bs-qr-code__logo': true, 'bs-qr-code__logo--visible': this.hasLogo } }, h("slot", { key: 'fa3ad80018891516474a16cdc74f7c40b3ff7193', name: "logo", onSlotchange: (ev) => (this.hasLogo = ev.target.assignedNodes().length > 0) }))), this.renderOverlay()), this.type === 'payment' && this.amount && (h("div", { key: '16aea140dffc0b85679923c72ff68f73496cd382', part: "amount", class: "bs-qr-code__amount" }, this.amountLabel && h("p", { key: '4b6c14f95fbc75fa750361bedb63e06f6cf8fbfa', class: "bs-qr-code__amount-label" }, this.amountLabel), h("p", { key: '23ef126293fe71e364e2fe6d8bf7e9570a0a8073', class: "bs-qr-code__amount-value" }, this.amount))), this.type === 'default' && this.url && (h("div", { key: '055769372c728d26f4a7b0ca15b4c1e9d9182f85', part: "url", class: "bs-qr-code__url" }, this.url)), this.expiry && (h("bs-chip-informative", { key: '2bda390d9e14ba387015619c5d51c136f344d42c', part: "expiry", size: "md" }, h(TimerIcon, { key: 'daa9d8dd4b9dbbc3f0a01d4c203020a7a128e3e4', slot: "icon" }), this.expiry)), showActions && (h("div", { key: '42fdca6de6985912a93580b60a69b06de86ab240', part: "actions", class: "bs-qr-code__actions" }, !this.hideDownload && (h("bs-button", { key: 'da9f965b3c996842c2f7c853b12baa7cd1523d0b', part: "download", variant: interactive ? 'outlined' : 'primary', size: buttonSize, disabled: !interactive, onClick: () => interactive && this.bsDownload.emit() }, h(DownloadIcon, { key: 'c0ff457c873583ba21dc0ef936b5b75723170921', slot: "icon" }), this.downloadLabel)), !this.hideCopy && (h("bs-button", { key: '023df4653bdbcf8440c511818a27f8363218c202', part: "copy", variant: interactive ? 'outlined' : 'primary', size: buttonSize, disabled: !interactive, onClick: () => interactive && this.onCopy() }, h(CopyIcon, { key: '0abdffdb59b543625340be0af0bfabd21fa57bca', slot: "icon" }), this.copyLabel)))))));
+        return (h("bs-card", { key: '4e167a1963bdcf3cfab55d45512b9a6892967863', part: "container", class: "bs-qr-code", surface: "base" }, this.closable && (h("bs-icon-button", { key: '6515eda31ed66c48f751a030aac2a1e8787168bb', part: "close", class: "bs-qr-code__close", variant: "subtle", size: "sm", ariaLabel: this.closeLabel, onClick: () => this.bsClose.emit() }, h("svg", { key: '3fcb2f17e996eec1f0d7b63ce801a0c2afaa34f5', viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", "stroke-width": "1.6", "stroke-linecap": "round", "aria-hidden": "true" }, h("path", { key: '2918e13d5155c393d5bcd38770f4288c4a580249', d: "M5 5L15 15M15 5L5 15" })))), h("div", { key: '9e78a07d15f1c796d5d3a95250048f792dffed66', class: "bs-qr-code__body" }, h("div", { key: 'f11274026541602224216fd1c9125ee6747fa863', part: "head", class: "bs-qr-code__head" }, h("p", { key: '2bad1953d7f5c67c92e3759999d4aa4010b016c5', part: "title", class: "bs-qr-code__title" }, this.heading), this.description && (h("p", { key: 'abb48d14fbf8b307d4f370601cd2eb5ffc4df421', part: "description", class: "bs-qr-code__description" }, this.description))), h("div", { key: '17af9e23f1a66d89367d9c26bb8ea551c069b2c0', part: "qr", class: "bs-qr-code__qr" }, h("div", { key: '2092115e613237a13c31243d7370f20bd3fc4c09', part: "code", class: "bs-qr-code__code" }, h("slot", { key: 'c189b0b1edf6f61489e9d1ebe8275c2685862e77', name: "code" }, this.renderMatrix()), h("div", { key: '1e082f0d8b7ee552ab35f2da7ec13c0a9c5d7d86', part: "logo", class: { 'bs-qr-code__logo': true, 'bs-qr-code__logo--visible': this.hasLogo } }, h("slot", { key: '5c305729c9771f95d3bf1877efe86de9f63054e7', name: "logo", onSlotchange: (ev) => (this.hasLogo = ev.target.assignedNodes().length > 0) }))), this.renderOverlay()), this.type === 'payment' && this.amount && (h("div", { key: 'd896562fc83349ada191a1956dfe8b3ffe02dfda', part: "amount", class: "bs-qr-code__amount" }, this.amountLabel && h("p", { key: '8523dd83e68c5f7af690afa71152d82a8f33280d', class: "bs-qr-code__amount-label" }, this.amountLabel), h("p", { key: 'b558183ed05e918b49f17901c5f4a90455527c07', class: "bs-qr-code__amount-value" }, this.amount))), this.type === 'default' && this.url && (h("div", { key: 'b2e14982c041255d561c733465ec946191f71308', part: "url", class: "bs-qr-code__url" }, this.url)), this.expiry && (h("bs-chip-informative", { key: '73443e59dd874d9888b4635d25f8abfb66e2ba15', part: "expiry", size: "md" }, h(TimerIcon, { key: 'e2c8e896629106af6b6e43f5927cc40cb986c895', slot: "icon" }), this.expiry)), showActions && (h("div", { key: 'c0e4e621b7535020de664c18b156a40ebd0f9cc5', part: "actions", class: "bs-qr-code__actions" }, !this.hideDownload && (h("bs-button", { key: '7d20bfd9ef09f9f739f7c2482d4f6a460dc4380d', part: "download", variant: interactive ? 'outlined' : 'primary', size: buttonSize, disabled: !interactive, onClick: () => interactive && this.bsDownload.emit() }, h(DownloadIcon, { key: '27ea6048df80bc0882178f428ab8484d9c2d3e0c', slot: "icon" }), this.downloadLabel)), !this.hideCopy && (h("bs-button", { key: '814e7b49e0b2b3d1c55042910495cb33da115210', part: "copy", variant: interactive ? 'outlined' : 'primary', size: buttonSize, disabled: !interactive, onClick: () => interactive && this.onCopy() }, h(CopyIcon, { key: '82af9fe245268df404461f9f750c61b0b4ade027', slot: "icon" }), this.copyLabel)))))));
     }
     static get is() { return "bs-qr-code"; }
     static get encapsulation() { return "shadow"; }

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

@@ -168,3 +168,9 @@
   .bs-radio__circle { border: 2px solid ButtonText; forced-color-adjust: none; background: Canvas; }
   .bs-radio__dot { background: Highlight; }
 }
+
+/* The hit area is already the round halo's size; tint with the brand colour. The press target is the whole label. */
+.bs-radio__ripple {
+  border-radius: 50%;
+  --bs-ripple-color: var(--bs-color-primary-default);
+}

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

@@ -15,6 +15,7 @@ import { h } from "@stencil/core";
  * @part circle - The visual radio ring.
  * @part dot - The center fill shown inside the ring when `checked`.
  * @part label - The label text wrapper.
+ * @part ripple - The press-ripple halo (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 // Note: this component's CSS Custom Properties (--bs-radio-*) are documented via @prop comments
 // in bs-radio.css, not here -- Stencil's docs generator only parses @prop out of CSS file
@@ -53,7 +54,7 @@ export class BsRadio {
         return Array.from(root.querySelectorAll('bs-radio')).filter(r => r.name === this.name);
     }
     onCheckedChange() {
-        this.internals?.setFormValue?.(this.checked ? this.value ?? 'on' : null);
+        this.internals?.setFormValue?.(this.checked ? (this.value ?? 'on') : null);
         if (this.checked) {
             this.groupMembers().forEach(r => {
                 if (r !== this.el && r.checked)
@@ -70,7 +71,7 @@ export class BsRadio {
     }
     componentWillLoad() {
         this.initialChecked = this.checked;
-        this.internals?.setFormValue?.(this.checked ? this.value ?? 'on' : null);
+        this.internals?.setFormValue?.(this.checked ? (this.value ?? 'on') : null);
     }
     componentDidLoad() {
         this.refreshGroupState();
@@ -104,7 +105,7 @@ export class BsRadio {
         }
     };
     render() {
-        return (h("label", { key: '886be8e0972dcb7d918447186ac6972a9132eb02', class: `bs-radio ${this.disabled ? 'bs-radio--disabled' : ''}` }, h("input", { key: 'd82e6e5d9a5a283bf3a0590add040cfb8f153fb7', class: "bs-radio__input", type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, tabIndex: this.checked || !this.groupHasChecked ? 0 : -1, onKeyDown: this.onKeyDown, onChange: this.onChange }), h("span", { key: '3844f7c165afc6c2de1b4befbe0d6aa5b89dab42', class: "bs-radio__hit-area" }, h("span", { key: 'd710b061715195882f889284e4b13dc872df03be', class: "bs-radio__state-layer" }, h("span", { key: 'd7eaa53202cfd9884ea6f890ff609e678d043fb0', part: "circle", class: `bs-radio__circle ${this.checked ? 'bs-radio__circle--selected' : ''}` }, this.checked && h("span", { key: 'c4942a1f370d7822a88e05a5d150bc5cb9cdd426', part: "dot", class: "bs-radio__dot" })))), h("span", { key: '79b5334b22ffe48a63bff43b0a8ce3df8c57e9cb', part: "label", class: "bs-radio__label" }, h("slot", { key: 'f71e839a6afe980e2ef54d40c4b40d6513ff0540' }))));
+        return (h("label", { key: '45b7a8896d570c915d86a073ae624cd9d7cba26a', class: `bs-radio ${this.disabled ? 'bs-radio--disabled' : ''}` }, h("input", { key: '1952e33f69903cfc8b85f6e6e3a544381d8785ed', class: "bs-radio__input", type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, tabIndex: this.checked || !this.groupHasChecked ? 0 : -1, onKeyDown: this.onKeyDown, onChange: this.onChange }), h("span", { key: '5c88f70158e39dd51ce403860dd66eebaea1ddf7', class: "bs-radio__hit-area" }, h("bs-ripple", { key: '041e1e5535e9267b551d87f5fd66ccb29d7aa4d3', part: "ripple", class: "bs-radio__ripple", centered: true, triggerSelector: ".bs-radio", disabled: this.disabled }), h("span", { key: '7bbdb3278e70e531fcf5b7f3f237fec299d5282e', class: "bs-radio__state-layer" }, h("span", { key: '7586e3baaeef3900c1f9676524ef69378bbdc121', part: "circle", class: `bs-radio__circle ${this.checked ? 'bs-radio__circle--selected' : ''}` }, this.checked && h("span", { key: '72a0571227b331512de1b89471aa18b909f34b84', part: "dot", class: "bs-radio__dot" })))), h("span", { key: 'c48f3a4b3acb74bb5e71eb561dba2217460af8a0', part: "label", class: "bs-radio__label" }, h("slot", { key: '48fab02676fb747aff3160ddc3cf2e0ee5cd2883' }))));
     }
     static get is() { return "bs-radio"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,45 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import { assertCssCustomProperties, assertShadowParts, runAxeCheck } from "../../test/helpers/conventions";
+const press = (el) => el.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, button: 0, clientX: 5, clientY: 5 }));
+describe('bs-ripple', () => {
+    it('is hidden from assistive tech and has no axe violations', async () => {
+        const { root } = await render(h("button", { style: { position: 'relative' } }, "Press", h("bs-ripple", null)));
+        expect(root.querySelector('bs-ripple')).toEqualAttribute('aria-hidden', 'true');
+        await runAxeCheck(root);
+    });
+    it('exposes its customization surface', async () => {
+        const { root } = await render(h("bs-ripple", null));
+        assertShadowParts(root.shadowRoot, ['surface']);
+        assertCssCustomProperties(root, ['--bs-ripple-color', '--bs-ripple-opacity', '--bs-ripple-duration', '--bs-ripple-easing']);
+    });
+    it('draws a circle on pointerdown of its parent and removes it when done', async () => {
+        const { root, waitForChanges } = await render(h("div", { style: { position: 'relative', width: '100px', height: '40px' } }, h("bs-ripple", { style: { '--bs-ripple-duration': '50ms' } })));
+        const ripple = root.querySelector('bs-ripple');
+        press(root);
+        await waitForChanges();
+        expect(ripple.shadowRoot.querySelectorAll('.bs-ripple__circle').length).toBe(1);
+        await new Promise(resolve => setTimeout(resolve, 200));
+        expect(ripple.shadowRoot.querySelectorAll('.bs-ripple__circle').length).toBe(0);
+    });
+    it('does nothing when disabled', async () => {
+        const { root } = await render(h("div", { style: { position: 'relative' } }, h("bs-ripple", { disabled: true })));
+        press(root);
+        expect(root.querySelector('bs-ripple').shadowRoot.querySelectorAll('.bs-ripple__circle').length).toBe(0);
+    });
+    it('does nothing inside a disabled button', async () => {
+        const { root } = await render(h("button", { disabled: true, style: { position: 'relative' } }, h("bs-ripple", null)));
+        press(root);
+        expect(root.querySelector('bs-ripple').shadowRoot.querySelectorAll('.bs-ripple__circle').length).toBe(0);
+    });
+    it('does nothing when the duration is 0ms (reduced motion)', async () => {
+        const { root } = await render(h("div", { style: { position: 'relative' } }, h("bs-ripple", { style: { '--bs-ripple-duration': '0ms' } })));
+        press(root);
+        expect(root.querySelector('bs-ripple').shadowRoot.querySelectorAll('.bs-ripple__circle').length).toBe(0);
+    });
+    it('listens on the element matched by triggerSelector instead of its parent', async () => {
+        const { root } = await render(h("div", { class: "outer", style: { position: 'relative' } }, h("span", { style: { position: 'relative', display: 'block', width: '20px', height: '20px' } }, h("bs-ripple", { triggerSelector: ".outer", style: { '--bs-ripple-duration': '50ms' } }))));
+        const ripple = root.querySelector('bs-ripple');
+        press(root);
+        expect(ripple.shadowRoot.querySelectorAll('.bs-ripple__circle').length).toBe(1);
+    });
+});

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

@@ -0,0 +1,32 @@
+:host {
+  /* Fills the nearest positioned ancestor and takes its rounded corners, so the ripple is clipped to
+     the pressable surface. Never intercepts the pointer. */
+  position: absolute;
+  inset: 0;
+  display: block;
+  border-radius: inherit;
+  overflow: hidden;
+  pointer-events: none;
+
+  --bs-ripple-color: currentColor;
+  /* No brandsync token for a ripple tint. 0.24 is visible on every filled variant without hiding the label. */
+  --bs-ripple-opacity: 0.24;
+  --bs-ripple-duration: var(--bs-duration-slower);
+  --bs-ripple-easing: var(--bs-easing-decelerate);
+}
+
+.bs-ripple {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  border-radius: inherit;
+}
+
+.bs-ripple__circle {
+  position: absolute;
+  border-radius: 50%;
+  background: var(--bs-ripple-color);
+  opacity: 0;
+  transform: scale(0);
+  pointer-events: none;
+}