@brandsync/wc 1.12.1 → 1.14.0

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

@@ -0,0 +1,247 @@
+import { h } from "@stencil/core";
+let popoverId = 0;
+/**
+ * A trigger plus a popup panel that opens on trigger click and closes on outside click or Escape.
+ *
+ * The popup is positioned with CSS (absolute, relative to the host) and flips to the opposite side
+ * when it would overflow the viewport; the effective placement is mirrored on the host as
+ * `data-placement`. Focus moves into the popup on open and back to the trigger on close. The popup content is slotted, so it is typically a `bs-menu` or a list.
+ *
+ * ## When to use
+ * - A menu, language list or small set of options revealed from a button.
+ *
+ * ## When not to use
+ * - A blocking decision (use `bs-dialog`) or a hover-only hint (use `bs-tooltip-trigger`).
+ *
+ * @slot trigger - The element that toggles the popup (e.g. a `bs-button`).
+ * @slot - Default slot: the popup content.
+ * @part trigger - The wrapper around the trigger; carries aria-expanded/aria-haspopup/aria-controls.
+ * @part popup - The popup surface.
+ * @prop --bs-popover-bg - Popup background. Aliased to `--bs-surface-raised`.
+ * @prop --bs-popover-radius - Popup corner radius. Aliased to `--bs-border-radius-100`.
+ * @prop --bs-popover-shadow - Popup shadow. Aliased to `--bs-shadow-md`.
+ * @prop --bs-popover-offset - Gap between trigger and popup. Aliased to `--bs-spacing-100`.
+ * @prop --bs-popover-min-width - Minimum popup width. Aliased to `--bs-scale-1600`.
+ * @prop --bs-popover-z-index - Popup stacking order. Aliased to `--bs-z-index-popover`.
+ */
+export class BsPopover {
+    el;
+    /** Whether the popup is shown. */
+    open = false;
+    /** Where the popup sits relative to the trigger. */
+    placement = 'bottom-start';
+    /** Emitted when the open state changes through user interaction, with the new value. */
+    bsOpenChange;
+    popupId = `bs-popover-${++popoverId}`;
+    triggerSlot;
+    popupEl;
+    needsFocusIn = false;
+    escaped = false;
+    onOpenChange(next) {
+        this.detach();
+        if (next) {
+            document.addEventListener('click', this.onDocClick, true);
+            document.addEventListener('keydown', this.onKeyDown);
+            window.addEventListener('resize', this.reposition);
+            window.addEventListener('scroll', this.reposition, true);
+            this.needsFocusIn = true;
+        }
+        else {
+            this.needsFocusIn = false;
+            this.el.setAttribute('data-placement', this.placement);
+            const active = this.el.shadowRoot?.activeElement || document.activeElement;
+            const focusInside = this.el.contains(document.activeElement) && document.activeElement !== this.triggerSlot?.assignedElements()[0] && !this.isInTrigger(document.activeElement);
+            if (this.escaped || (focusInside && active))
+                this.focusTrigger();
+        }
+        this.escaped = false;
+    }
+    onPlacementChange() {
+        this.reposition();
+    }
+    componentWillLoad() {
+        this.el.setAttribute('data-placement', this.placement);
+    }
+    componentDidRender() {
+        if (!this.open)
+            return;
+        this.reposition();
+        if (this.needsFocusIn) {
+            this.needsFocusIn = false;
+            this.focusPopup();
+        }
+    }
+    isInTrigger(node) {
+        const first = this.triggerSlot?.assignedElements() ?? [];
+        return !!node && first.some(t => t.contains(node));
+    }
+    /** Effective placement after collision flipping; mirrored on the host as `data-placement`. */
+    reposition = () => {
+        if (!this.open || !this.popupEl)
+            return;
+        const [v, h] = this.placement.split('-');
+        // Measure from the preferred placement.
+        this.el.setAttribute('data-placement', this.placement);
+        const trig = this.el.getBoundingClientRect();
+        const pop = this.popupEl.getBoundingClientRect();
+        const vh = window.innerHeight;
+        const vw = window.innerWidth;
+        let rv = v;
+        let rh = h;
+        if (v === 'bottom' && pop.bottom > vh && trig.top >= pop.height)
+            rv = 'top';
+        else if (v === 'top' && pop.top < 0 && vh - trig.bottom >= pop.height)
+            rv = 'bottom';
+        if (h === 'start' && pop.right > vw && trig.right >= pop.width)
+            rh = 'end';
+        else if (h === 'end' && pop.left < 0 && vw - trig.left >= pop.width)
+            rh = 'start';
+        this.el.setAttribute('data-placement', `${rv}-${rh}`);
+    };
+    focusPopup() {
+        const sel = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+        const slot = this.popupEl?.querySelector('slot');
+        const assigned = slot?.assignedElements({ flatten: true }) ?? [];
+        for (const a of assigned) {
+            const target = a.matches(sel) ? a : a.querySelector(sel);
+            if (target) {
+                target.focus();
+                return;
+            }
+        }
+        this.popupEl?.focus();
+    }
+    disconnectedCallback() {
+        this.detach();
+    }
+    componentDidLoad() {
+        if (this.open)
+            this.onOpenChange(true);
+    }
+    detach() {
+        document.removeEventListener('click', this.onDocClick, true);
+        document.removeEventListener('keydown', this.onKeyDown);
+        window.removeEventListener('resize', this.reposition);
+        window.removeEventListener('scroll', this.reposition, true);
+    }
+    setOpen(next) {
+        if (this.open === next)
+            return;
+        this.open = next;
+        this.bsOpenChange.emit(next);
+    }
+    focusTrigger() {
+        const first = this.triggerSlot?.assignedElements()[0];
+        first?.focus();
+    }
+    onTriggerKeyDown = (ev) => {
+        if (ev.key === 'ArrowDown' && !this.open) {
+            ev.preventDefault();
+            this.setOpen(true);
+        }
+    };
+    onTriggerClick = () => this.setOpen(!this.open);
+    onDocClick = (ev) => {
+        if (!ev.composedPath().includes(this.el))
+            this.setOpen(false);
+    };
+    onKeyDown = (ev) => {
+        if (ev.key === 'Escape' && this.open) {
+            this.escaped = true;
+            this.setOpen(false);
+        }
+    };
+    render() {
+        return (h("div", { key: 'e4e96eb40953abdd3f5f9a9169cfe2b9ad87d3b5', class: "bs-popover" }, h("div", { key: '6456d7cb3cba9e243015086095534cad82716711', part: "trigger", class: "bs-popover__trigger", "aria-haspopup": "true", "aria-expanded": String(this.open), "aria-controls": this.popupId, onClick: this.onTriggerClick, onKeyDown: this.onTriggerKeyDown }, h("slot", { key: '1a1d545bf0afc0a59e4f9f7f29bf359cc2264c65', name: "trigger", ref: el => (this.triggerSlot = el) })), h("div", { key: '8a1e1e3ade63f2cba665368f3bd2659ce659ee18', part: "popup", id: this.popupId, class: "bs-popover__popup", tabindex: "-1", hidden: !this.open, ref: el => (this.popupEl = el) }, h("slot", { key: 'abdeeb2105d00487a43f23dd6021c61b533e8139' }))));
+    }
+    static get is() { return "bs-popover"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-popover.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-popover.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the popup is shown."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsPopoverPlacement",
+                    "resolved": "\"bottom-end\" | \"bottom-start\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "BsPopoverPlacement": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-popover/bs-popover.tsx",
+                            "id": "src/components/bs-popover/bs-popover.tsx::BsPopoverPlacement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Where the popup sits relative to the trigger."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "placement",
+                "defaultValue": "'bottom-start'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsOpenChange",
+                "name": "bsOpenChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the open state changes through user interaction, with the new value."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "onOpenChange"
+            }, {
+                "propName": "placement",
+                "methodName": "onPlacementChange"
+            }];
+    }
+}

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

@@ -0,0 +1,26 @@
+import { html } from "lit";
+import { componentDescription } from "../../stories-utils";
+const meta = {
+    title: 'Components/bs-popover',
+    parameters: { docs: { description: { component: componentDescription('bs-popover') } } },
+    render: args => html `
+    <div style="padding: 80px 160px;">
+      <bs-popover ?open=${args.open} placement=${args.placement}>
+        <bs-button slot="trigger">Language</bs-button>
+        <bs-menu>
+          <bs-menu-item>English</bs-menu-item>
+          <bs-menu-item>Dansk</bs-menu-item>
+        </bs-menu>
+      </bs-popover>
+    </div>
+  `,
+    argTypes: {
+        open: { control: 'boolean' },
+        placement: { control: 'select', options: ['bottom-start', 'bottom-end', 'top-start', 'top-end'] },
+    },
+    args: { open: false, placement: 'bottom-start' },
+};
+export default meta;
+export const Default = {};
+export const Open = { args: { open: true } };
+export const TopEnd = { name: 'Placement top-end', args: { open: true, placement: 'top-end' } };

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: '9d9c371ea92f67811e9ab927d346f2bece833cf5', part: "container", class: "bs-progress" }, h("div", { key: '5753f1db2b3f79a55b2ff7936cdb836f10c29bc3', 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: '2909533f8b4472a7c12c564c3b42b6456d5d1c80', part: "container", class: "bs-progress" }, h("div", { key: '3f41fc7f22d7c9eba13e859330aae4f6230af8ab', 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: '68381d4570b3f4d29d4b671f5069c7f4c02669e7', part: "label", class: `bs-progress__label bs-progress__label--${this.size}` }, value, "%"))));
+            } }))), isDeterminate && this.showLabel && (h("span", { key: '417f47612fc45127c4a1832a6cb4122ad16d9579', 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: '783f94f3ea320d9a8169c1d253037ae3631179e1', part: "container", class: "bs-progress-linear" }, h("div", { key: '9b5e0c1f0a641683bf9e763b2e3ede0b814f26cf', 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: 'abdae797c319d17404ea15adf1b312c0f19e0ed9', part: "container", class: "bs-progress-linear" }, h("div", { key: 'ec250c3d5d93c6d6fd4c20d57ea7e7177dac2b91', 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: 'bb81cebfe79bb6e722fe0fb3cd561318a5f06ac6', part: "label", class: "bs-progress-linear__label" }, h("slot", { key: 'df04863716047f5b1fa4c70f20744ac25713840b' })))));
+        h("div", { part: "fill", class: "bs-progress-linear__fill bs-progress-linear__fill--indeterminate" }))), this.showLabel && this.hasLabelContent && (h("span", { key: 'd7fd99b0b5666b83cd597086a2643a919b9b9d5c', part: "label", class: "bs-progress-linear__label" }, h("slot", { key: '81adeaf185aa995907b317b960fffa4b684404e4' })))));
     }
     // 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: '9224eadd42ddc8b59466a301ce72bf0311e00edd', part: "container", class: "bs-qr-code", surface: "base" }, this.closable && (h("bs-icon-button", { key: '1fd99ef2996a876ea8fe5ae237128c8059bfccbf', part: "close", class: "bs-qr-code__close", variant: "subtle", size: "sm", ariaLabel: this.closeLabel, onClick: () => this.bsClose.emit() }, h("svg", { key: 'e38bde58cd6532c3ca56b2920a42dfc157517484', viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", "stroke-width": "1.6", "stroke-linecap": "round", "aria-hidden": "true" }, h("path", { key: '6d6c93934c724a1cc0b8b66bdfd129650b1f9024', d: "M5 5L15 15M15 5L5 15" })))), h("div", { key: 'b8f2478eeb88a2d273f61f819679cb752e894a5a', class: "bs-qr-code__body" }, h("div", { key: '7e51f3bd0cde05566bb33c4fbe2478795ff3fe26', part: "head", class: "bs-qr-code__head" }, h("p", { key: '1d0956f6fc3e0f0658b5934a140e56ef25ae1f6b', part: "title", class: "bs-qr-code__title" }, this.heading), this.description && (h("p", { key: 'f43da3546accd752a856e1202baaff0043142ce4', part: "description", class: "bs-qr-code__description" }, this.description))), h("div", { key: '3b8dcdbb35c20e71f9c9e41ad4e2ae939e8dc0e7', part: "qr", class: "bs-qr-code__qr" }, h("div", { key: '3c86af5e70b746b2dc8ce9c7adf58649314a985d', part: "code", class: "bs-qr-code__code" }, h("slot", { key: '32d0dc8670a6045220b9546731ae5aef48d355df', name: "code" }, this.renderMatrix()), h("div", { key: 'ffba953b953bef8a8765955a5db4b9fba1e2cec8', part: "logo", class: { 'bs-qr-code__logo': true, 'bs-qr-code__logo--visible': this.hasLogo } }, h("slot", { key: 'b6e213f3a624cf8a6cf0b344c6ffc7b1f2c1be34', name: "logo", onSlotchange: (ev) => (this.hasLogo = ev.target.assignedNodes().length > 0) }))), this.renderOverlay()), this.type === 'payment' && this.amount && (h("div", { key: '56155722b1cf13d21850bae43e4323ddc0ed8635', part: "amount", class: "bs-qr-code__amount" }, this.amountLabel && h("p", { key: 'd1f90a299ef1f8d5c896a31147612ceef4485339', class: "bs-qr-code__amount-label" }, this.amountLabel), h("p", { key: '40ef657d7bc01e58089bf55044fb0ef8556386ba', class: "bs-qr-code__amount-value" }, this.amount))), this.type === 'default' && this.url && (h("div", { key: '5d7a7d2537752948631098567c732582e9e34d92', part: "url", class: "bs-qr-code__url" }, this.url)), this.expiry && (h("bs-chip-informative", { key: 'e040513edd4c24d60e41c4e09ed0b97be11e24b3', part: "expiry", size: "md" }, h(TimerIcon, { key: '0c1b8052bed0bddd2e84bc3ca9929008f781213c', slot: "icon" }), this.expiry)), showActions && (h("div", { key: 'f30073c9b79df1aec27f361d5b94e92c8aa8f7fc', part: "actions", class: "bs-qr-code__actions" }, !this.hideDownload && (h("bs-button", { key: '12b6b333efed74dfb76360441838de2a872f3c4b', part: "download", variant: interactive ? 'outlined' : 'primary', size: buttonSize, disabled: !interactive, onClick: () => interactive && this.bsDownload.emit() }, h(DownloadIcon, { key: '3c831e241288ccce97fb77a3d42c0c3de58e6734', slot: "icon" }), this.downloadLabel)), !this.hideCopy && (h("bs-button", { key: '260deebae80a52c700dc2532883a706363da0caa', part: "copy", variant: interactive ? 'outlined' : 'primary', size: buttonSize, disabled: !interactive, onClick: () => interactive && this.onCopy() }, h(CopyIcon, { key: '8a09b1b4a06d492449f563aa73c2b2191fb29680', slot: "icon" }), this.copyLabel)))))));
+        return (h("bs-card", { key: '01dc0befd273aecce2437e98987fa6a76555a65c', part: "container", class: "bs-qr-code", surface: "base" }, this.closable && (h("bs-icon-button", { key: 'b611e446cbaa4267f7cfcb6e1baa1352e316994c', part: "close", class: "bs-qr-code__close", variant: "subtle", size: "sm", ariaLabel: this.closeLabel, onClick: () => this.bsClose.emit() }, h("svg", { key: 'c3af9b06190a8d98e80a1ba5aa32a614cf706ef8', viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", "stroke-width": "1.6", "stroke-linecap": "round", "aria-hidden": "true" }, h("path", { key: 'bc86434823fabb3375bd2aa7c8382b33ed94e293', d: "M5 5L15 15M15 5L5 15" })))), h("div", { key: '95520bbba236876975ca8097f923162c9af84505', class: "bs-qr-code__body" }, h("div", { key: '1c5ab32fd408dfb874914848daf611d5ede8fc15', part: "head", class: "bs-qr-code__head" }, h("p", { key: '765b6700e9d73ad9858e7dfed25adba98d9f37a4', part: "title", class: "bs-qr-code__title" }, this.heading), this.description && (h("p", { key: '9994b60173dfdce115ab249122f29d17f8e530da', part: "description", class: "bs-qr-code__description" }, this.description))), h("div", { key: '9a32be6fa563ff3ed7f7825ce793cd1521989dbe', part: "qr", class: "bs-qr-code__qr" }, h("div", { key: '9aa3199f1d5dac68eb4b3d8c6e490199964715ab', part: "code", class: "bs-qr-code__code" }, h("slot", { key: 'e859ada22ca6dad597fb2d3c239662a51b43b39c', name: "code" }, this.renderMatrix()), h("div", { key: '49023d47353f7eac10d46d7be68be8691be50455', part: "logo", class: { 'bs-qr-code__logo': true, 'bs-qr-code__logo--visible': this.hasLogo } }, h("slot", { key: '53125aeb2c4891ca790268f9ef5ee3ba37cae5f0', name: "logo", onSlotchange: (ev) => (this.hasLogo = ev.target.assignedNodes().length > 0) }))), this.renderOverlay()), this.type === 'payment' && this.amount && (h("div", { key: '2714b2a6513da5442809292f78b31141ee77ce81', part: "amount", class: "bs-qr-code__amount" }, this.amountLabel && h("p", { key: '51573f23cf8d2c3a0b7e3df2a9ff212f18c92539', class: "bs-qr-code__amount-label" }, this.amountLabel), h("p", { key: 'dc7c005152c216ababde9282c385856e8d6b3b57', class: "bs-qr-code__amount-value" }, this.amount))), this.type === 'default' && this.url && (h("div", { key: 'a3f3c4d1ceea0ba079ca204a1acd5447551f86f4', part: "url", class: "bs-qr-code__url" }, this.url)), this.expiry && (h("bs-chip-informative", { key: '39d95354200ccf4cfbfc9dc3c15da200955fa2f5', part: "expiry", size: "md" }, h(TimerIcon, { key: '7244fd36a173052caf4db2e4f0f2ad05f3569341', slot: "icon" }), this.expiry)), showActions && (h("div", { key: 'f6c808132c0ca1d8af27b8aedf5cc5f86a3ba7e8', part: "actions", class: "bs-qr-code__actions" }, !this.hideDownload && (h("bs-button", { key: 'ff50126a297987518e4e174c08db438560671d95', part: "download", variant: interactive ? 'outlined' : 'primary', size: buttonSize, disabled: !interactive, onClick: () => interactive && this.bsDownload.emit() }, h(DownloadIcon, { key: 'e7c982907553a6607b3c941c77a4f88876c71c85', slot: "icon" }), this.downloadLabel)), !this.hideCopy && (h("bs-button", { key: 'bc603f4ba0a2bfa12112806b2eb2a04ccec60568', part: "copy", variant: interactive ? 'outlined' : 'primary', size: buttonSize, disabled: !interactive, onClick: () => interactive && this.onCopy() }, h(CopyIcon, { key: '35e27d196c9475f5b0be1dd0e389b699d08ec7db', slot: "icon" }), this.copyLabel)))))));
     }
     static get is() { return "bs-qr-code"; }
     static get encapsulation() { return "shadow"; }

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

@@ -104,7 +104,7 @@ export class BsRadio {
         }
     };
     render() {
-        return (h("label", { key: '62ae7bf3a50e1b0b6af17208685a5c7ffe6f5e5e', class: `bs-radio ${this.disabled ? 'bs-radio--disabled' : ''}` }, h("input", { key: '01b09c6a36c9765875d34abb96772554990ce095', 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: 'd56c108212d17d617e7abadc6189fd4b86dba233', class: "bs-radio__hit-area" }, h("span", { key: '63df5b0139573c1a7cbf64cf1c2e15009aeae8e2', class: "bs-radio__state-layer" }, h("span", { key: '43c32995245eba557d41a8c9a65ba9716d4a9766', part: "circle", class: `bs-radio__circle ${this.checked ? 'bs-radio__circle--selected' : ''}` }, this.checked && h("span", { key: '6ef4edf491bcaeac94b639abf5ef497e98cb8119', part: "dot", class: "bs-radio__dot" })))), h("span", { key: '60a21c23fdca6d92cbaad1bf69bd3c3c8441d24f', part: "label", class: "bs-radio__label" }, h("slot", { key: 'a920122f7b88b07ef743735e50f9ad71042be308' }))));
+        return (h("label", { key: '5c69e7244183b1116d44e50079371d0bf29ac058', class: `bs-radio ${this.disabled ? 'bs-radio--disabled' : ''}` }, h("input", { key: 'f40a114f0e9fcb21ff0e7bb02876ded6979b7727', 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: '4cca356fd757d34f24ec5d8a8a3a2517da004409', class: "bs-radio__hit-area" }, h("span", { key: '6beda905b88e822335ebf67a64eba5df86beb4a9', class: "bs-radio__state-layer" }, h("span", { key: '28e63967c2ad046f694c2097d2aec35f4ebcf843', part: "circle", class: `bs-radio__circle ${this.checked ? 'bs-radio__circle--selected' : ''}` }, this.checked && h("span", { key: 'cda8ba5bf3f5bf99564e6f0f1af115803e33f6c0', part: "dot", class: "bs-radio__dot" })))), h("span", { key: 'df59f8b97fb54cc037732a22412ec64464df8bdc', part: "label", class: "bs-radio__label" }, h("slot", { key: '154be3de3d6fe5aa0cb8fd7d806c28956a21e87d' }))));
     }
     static get is() { return "bs-radio"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-session-timeout/bs-session-timeout.js

@@ -196,7 +196,7 @@ export class BsSessionTimeout {
         const description = this.description ?? d.description;
         const primary = this.primaryLabel ?? d.primary;
         const secondary = this.secondaryLabel ?? d.secondary;
-        return (h("bs-card", { key: '45a056eabc2f536128ee6adbc6104d76793301f4', part: "container", class: "bs-session-timeout", surface: "base", role: "region", "aria-labelledby": "heading" }, h("div", { key: '035795cb4b5b0252212270236f048e3216d5d401', class: "bs-session-timeout__body" }, !this.hideIcon && (h("bs-icon-tile", { key: '857db99f58d07483d3c7dadd95e5951a645d0c59', part: "art", intent: d.intent, size: "lg" }, h("slot", { key: '41504daf4751677d9b1df0d211e719d8f441f5b2', name: "icon" }, d.glyph()))), this.renderHeading(heading, description), this.type === 'warning' && this.renderWarning(), this.type === 'warning' && this.savedMessage && (h("p", { key: '8ba10b3921db4b3cedbeb3d45bddfb89425bbdbb', part: "saved", class: "bs-session-timeout__saved" }, h(InfoIcon, { key: '44ea938fca553c67ae23628833471ceb98e63b06' }), h("span", { key: '672ebc96828437ffbc67711082fd7018611153b7' }, this.savedMessage))), this.type === 'signed-out' && this.renderAccount(), this.type === 'confirm-identity' && this.renderConfirm(), this.type === 'warning' && (primary || secondary) && (h("div", { key: '94221156fe30010bd0fbe4fb0146c95feceab50f', part: "actions", class: "bs-session-timeout__actions" }, secondary && (h("bs-button", { key: '09b14d30bc185a4644902e52100f0493da6109a0', part: "secondary", variant: "outlined", onClick: () => this.bsSecondary.emit() }, secondary)), primary && (h("bs-button", { key: 'be381ed4be453efd306b28da3e1f4b7f0740c024', part: "primary", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)))), this.type === 'signed-out' && (primary || secondary) && (h("div", { key: '6b3b3622809165f70d83c68db409e2373ea1008e', part: "actions", class: "bs-session-timeout__actions bs-session-timeout__actions--stacked" }, primary && (h("bs-button", { key: 'f03d85c00ce0c18e14e26d2b4332ddb987b93f9e', part: "primary", class: "bs-session-timeout__block-button", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)), secondary && (h("bs-button", { key: 'a9bf95d13955110f7f36561b9acc3c89a5862de5', part: "secondary", class: "bs-session-timeout__text-button", variant: "subtle", size: "lg", onClick: () => this.bsSecondary.emit() }, secondary)))), h("div", { key: '69ada1eed62f93587b2c2f45aa1d3ea933ba682f', class: "bs-session-timeout__sr-only", role: "status", "aria-live": "polite" }, this.announcement))));
+        return (h("bs-card", { key: 'a59288c1e524507781d37b23493224c299ca697a', part: "container", class: "bs-session-timeout", surface: "base", role: "region", "aria-labelledby": "heading" }, h("div", { key: 'adde8ef701bc24337fe42998c9f3af0fd3b817bf', class: "bs-session-timeout__body" }, !this.hideIcon && (h("bs-icon-tile", { key: 'a3d1f87b2fcd29a319be7e119bf76c800b343e48', part: "art", intent: d.intent, size: "lg" }, h("slot", { key: '42b9193378bf88f0ea2f4e3ac48a0ff58545d21b', name: "icon" }, d.glyph()))), this.renderHeading(heading, description), this.type === 'warning' && this.renderWarning(), this.type === 'warning' && this.savedMessage && (h("p", { key: 'ed78d1c152d3edcf0db93c7bb8b6d744ae8283c5', part: "saved", class: "bs-session-timeout__saved" }, h(InfoIcon, { key: '7992c624db71b1471ea62b82f5d8c90d438d7ee1' }), h("span", { key: 'a4cdc8e871083a685de65d3e785800ff6af1452e' }, this.savedMessage))), this.type === 'signed-out' && this.renderAccount(), this.type === 'confirm-identity' && this.renderConfirm(), this.type === 'warning' && (primary || secondary) && (h("div", { key: '756f8e8cddd87c273273621d69796be30a9daa3e', part: "actions", class: "bs-session-timeout__actions" }, secondary && (h("bs-button", { key: '525c02f57453d82e5e2105b1f28d8f7ca8e8e1bc', part: "secondary", variant: "outlined", onClick: () => this.bsSecondary.emit() }, secondary)), primary && (h("bs-button", { key: 'daaf10a97c4306a657fce5ec827a067659a2b2d7', part: "primary", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)))), this.type === 'signed-out' && (primary || secondary) && (h("div", { key: 'f1b52edae2419a8e66b08a681d2f2b917383c90e', part: "actions", class: "bs-session-timeout__actions bs-session-timeout__actions--stacked" }, primary && (h("bs-button", { key: '145f8f09b939c82eef01068bc0e849fc7f63b957', part: "primary", class: "bs-session-timeout__block-button", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)), secondary && (h("bs-button", { key: '897e5342fe89966702d2af457f9038b60e8929ec', part: "secondary", class: "bs-session-timeout__text-button", variant: "subtle", size: "lg", onClick: () => this.bsSecondary.emit() }, secondary)))), h("div", { key: 'b3f242f4a8b00b52975ed66d9a72ebc98997cf29', class: "bs-session-timeout__sr-only", role: "status", "aria-live": "polite" }, this.announcement))));
     }
     static get is() { return "bs-session-timeout"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-side-panel/bs-side-panel.cmp.test.js

@@ -0,0 +1,117 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-side-panel', () => {
+    it('renders nothing when closed', async () => {
+        const { root } = await render(h("bs-side-panel", { heading: "History" }, "Body"));
+        expect(root.shadowRoot.querySelector('[role="dialog"]')).toBeNull();
+    });
+    it('renders a labelled dialog when open', async () => {
+        const { root } = await render(h("bs-side-panel", { open: true, heading: "History" }, "Body"));
+        const dialog = root.shadowRoot.querySelector('[role="dialog"]');
+        const heading = root.shadowRoot.querySelector('[part="heading"]');
+        expect(dialog.getAttribute('aria-labelledby')).toBe(heading.id);
+        expect(heading).toHaveTextContent('History');
+    });
+    it('closes on Escape and emits bsClose', async () => {
+        const { root, waitForChanges, spyOnEvent } = await render(h("bs-side-panel", { open: true, heading: "History" }, "Body"));
+        const spy = spyOnEvent('bsClose');
+        root.shadowRoot.querySelector('[role="dialog"]').dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, composed: true }));
+        await waitForChanges();
+        expect(spy).toHaveReceivedEvent();
+        expect(root.open).toBe(false);
+    });
+    it('closes via the close button, using closeLabel', async () => {
+        const { root, waitForChanges, spyOnEvent } = await render(h("bs-side-panel", { open: true, heading: "H", closeLabel: "Dismiss" }, "Body"));
+        const spy = spyOnEvent('bsClose');
+        const btn = root.shadowRoot.querySelector('bs-icon-button');
+        expect(btn.getAttribute('aria-label') ?? btn.ariaLabel).toBe('Dismiss');
+        btn.click();
+        await waitForChanges();
+        expect(spy).toHaveReceivedEvent();
+        expect(root.open).toBe(false);
+    });
+    it('only renders the overlay when requested, and overlay click closes', async () => {
+        const { root, waitForChanges } = await render(h("bs-side-panel", { open: true, overlay: true, heading: "H" }, "Body"));
+        const overlay = root.shadowRoot.querySelector('[part="overlay"]');
+        expect(overlay).not.toBeNull();
+        overlay.click();
+        await waitForChanges();
+        expect(root.open).toBe(false);
+    });
+    it('has no overlay by default and reflects side', async () => {
+        const { root } = await render(h("bs-side-panel", { open: true, side: "start", heading: "H" }));
+        expect(root.shadowRoot.querySelector('[part="overlay"]')).toBeNull();
+        expect(root).toEqualAttribute('side', 'start');
+    });
+    it('moves focus in on open and restores it on close', async () => {
+        const outer = document.createElement('button');
+        document.body.appendChild(outer);
+        outer.focus();
+        const { root, waitForChanges } = await render(h("bs-side-panel", { heading: "H" }, "Body"));
+        outer.focus();
+        root.open = true;
+        await waitForChanges();
+        expect(document.activeElement).toBe(root);
+        expect(root.shadowRoot.activeElement).toBe(root.shadowRoot.querySelector('[role="dialog"]'));
+        root.open = false;
+        await waitForChanges();
+        expect(document.activeElement).toBe(outer);
+        outer.remove();
+    });
+    it('sets aria-modal on the dialog', async () => {
+        const { root } = await render(h("bs-side-panel", { open: true, heading: "H" }));
+        expect(root.shadowRoot.querySelector('[role="dialog"]')).toEqualAttribute('aria-modal', 'true');
+    });
+    it('traps Tab and Shift+Tab through slotted content', async () => {
+        const { root, waitForChanges } = await render(h("bs-side-panel", { open: true, heading: "H" }, h("button", { id: "a" }, "A"), h("button", { id: "b" }, "B")));
+        await waitForChanges();
+        const a = root.querySelector('#a');
+        const b = root.querySelector('#b');
+        const key = (target, shiftKey = false) => {
+            const ev = new KeyboardEvent('keydown', { key: 'Tab', shiftKey, bubbles: true, composed: true, cancelable: true });
+            target.dispatchEvent(ev);
+            return ev;
+        };
+        b.focus();
+        expect(key(b).defaultPrevented).toBe(true);
+        // Forward from the last focusable wraps to the first (the header close button).
+        expect(root.shadowRoot.activeElement).not.toBeNull();
+        expect(document.activeElement).toBe(root);
+        a.focus();
+        expect(key(a, true).defaultPrevented).toBe(false);
+        // Shift+Tab from the first focusable (close button) wraps to the last slotted element.
+        const close = root.shadowRoot.querySelector('bs-icon-button');
+        close.focus();
+        expect(key(close, true).defaultPrevented).toBe(true);
+        expect(document.activeElement).toBe(b);
+    });
+    it('makes siblings inert with overlay and restores prior state', async () => {
+        const plain = document.createElement('div');
+        const already = document.createElement('div');
+        already.inert = true;
+        const { root, waitForChanges } = await render(h("bs-side-panel", { heading: "H", overlay: true }));
+        document.body.append(plain, already);
+        root.open = true;
+        await waitForChanges();
+        expect(plain.inert).toBe(true);
+        expect(root.inert).toBe(false);
+        root.open = false;
+        await waitForChanges();
+        expect(plain.inert).toBe(false);
+        expect(already.inert).toBe(true);
+        plain.remove();
+        already.remove();
+    });
+    it('does not set inert without overlay, and restores on disconnect', async () => {
+        const plain = document.createElement('div');
+        const { root, waitForChanges } = await render(h("bs-side-panel", { heading: "H", open: true }));
+        document.body.append(plain);
+        await waitForChanges();
+        expect(plain.inert).toBe(false);
+        root.overlay = true;
+        await waitForChanges();
+        expect(plain.inert).toBe(true);
+        root.remove();
+        expect(plain.inert).toBe(false);
+        plain.remove();
+    });
+});

package/dist/collection/components/bs-side-panel/bs-side-panel.css

@@ -0,0 +1,77 @@
+:host {
+  --bs-side-panel-bg: var(--bs-surface-raised);
+  --bs-side-panel-width: calc(var(--bs-scale-1600) * 3);
+  --bs-side-panel-padding: var(--bs-spacing-200);
+  --bs-side-panel-shadow: var(--bs-shadow-md);
+  --bs-side-panel-overlay-bg: var(--bs-surface-overlay);
+  --bs-side-panel-color: var(--bs-text-default);
+  --bs-side-panel-z-index: var(--bs-z-index-modal);
+}
+
+.bs-side-panel {
+  position: fixed;
+  inset: 0;
+  z-index: var(--bs-side-panel-z-index);
+  pointer-events: none;
+}
+
+.bs-side-panel__overlay {
+  position: absolute;
+  inset: 0;
+  background: var(--bs-side-panel-overlay-bg);
+  pointer-events: auto;
+}
+
+.bs-side-panel__panel {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: var(--bs-side-panel-width);
+  max-width: 100%;
+  background: var(--bs-side-panel-bg);
+  color: var(--bs-side-panel-color);
+  box-shadow: var(--bs-side-panel-shadow);
+  pointer-events: auto;
+  outline: none;
+}
+
+.bs-side-panel--start .bs-side-panel__panel {
+  left: 0;
+}
+
+.bs-side-panel--end .bs-side-panel__panel {
+  right: 0;
+}
+
+.bs-side-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--bs-spacing-100);
+  padding: var(--bs-side-panel-padding);
+}
+
+.bs-side-panel__heading {
+  margin: 0;
+  font-size: var(--bs-font-size-lg);
+  font-weight: var(--bs-font-weight-semibold);
+}
+
+.bs-side-panel__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-spacing-100);
+}
+
+.bs-side-panel__body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 var(--bs-side-panel-padding);
+}
+
+.bs-side-panel__footer {
+  padding: var(--bs-side-panel-padding);
+}