@brandsync/wc 1.17.0 → 1.19.0

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

@@ -0,0 +1,188 @@
+import { Host, h } from "@stencil/core";
+/**
+ * A touch-ripple effect: on pointer press, a circle grows from the press point and fades out.
+ *
+ * It is a building block for pressable components (`bs-button`, `bs-icon-button`, ...), not something
+ * to place on a page by itself. Put it inside a positioned, pressable parent; it fills that parent,
+ * follows its corner radius, and listens for `pointerdown` on it. Pointer-events pass through, so the
+ * parent still receives every click.
+ *
+ * The motion uses the shared duration and easing tokens. Under `prefers-reduced-motion: reduce` those
+ * durations are `0ms`, and the ripple does not play at all.
+ *
+ * ## When to use
+ * - Inside a pressable `bs-*` component, to give press feedback.
+ *
+ * ## When not to use
+ * - As a hover or focus indicator. Those are colour changes on the parent.
+ * - On non-interactive surfaces.
+ *
+ * Set the custom properties on the `bs-ripple` element itself. Inside another component that means `::part(ripple)`,
+ * e.g. `bs-button::part(ripple) { --bs-ripple-color: white; }`.
+ *
+ * @part surface - The clipping layer the ripple circles are drawn in.
+ * @prop --bs-ripple-color - Ripple colour. `currentColor` by default, so it follows the parent's text colour and works on every variant.
+ * @prop --bs-ripple-opacity - Starting opacity of the ripple. No opacity token fits, so the default is `0.24`.
+ * @prop --bs-ripple-duration - Length of the ripple. Aliased to `--bs-duration-slower`.
+ * @prop --bs-ripple-easing - Curve of the ripple. Aliased to `--bs-easing-decelerate`.
+ */
+export class BsRipple {
+    el;
+    /** Always start the ripple from the centre instead of the press point. Use it for round or icon-only controls. */
+    centered = false;
+    /** Turns the ripple off. A disabled parent (`<button disabled>`) also stops it. */
+    disabled = false;
+    /**
+     * CSS selector of the element to listen on, found with `closest()` from the ripple (so it stays inside
+     * the same shadow tree). By default the ripple listens on its parent. Use it when the pressable element
+     * is bigger than the ripple's own parent, e.g. a switch whose ripple sits on the knob but whose whole
+     * `<label>` is the press target.
+     */
+    triggerSelector;
+    onTriggerChange() {
+        this.bind();
+    }
+    surface;
+    target;
+    connectedCallback() {
+        this.bind();
+    }
+    componentDidLoad() {
+        // Props are set by now, so a `triggerSelector` is resolved against the final DOM.
+        this.bind();
+    }
+    disconnectedCallback() {
+        this.unbind();
+    }
+    bind() {
+        this.unbind();
+        const target = (this.triggerSelector && this.el.closest(this.triggerSelector)) || this.el.parentElement || this.el.getRootNode().host;
+        this.target = target;
+        this.target?.addEventListener('pointerdown', this.onPointerDown);
+    }
+    unbind() {
+        this.target?.removeEventListener('pointerdown', this.onPointerDown);
+        this.target = undefined;
+    }
+    onPointerDown = (ev) => {
+        if (this.disabled || ev.button !== 0 || this.target?.disabled)
+            return;
+        const surface = this.surface;
+        if (!surface)
+            return;
+        const style = getComputedStyle(this.el);
+        const duration = this.toMs(style.getPropertyValue('--bs-ripple-duration'));
+        if (duration === 0)
+            return;
+        const rect = this.el.getBoundingClientRect();
+        const x = this.centered ? rect.width / 2 : ev.clientX - rect.left;
+        const y = this.centered ? rect.height / 2 : ev.clientY - rect.top;
+        // Radius that reaches the farthest corner, so the ripple always covers the whole surface.
+        const radius = Math.hypot(Math.max(x, rect.width - x), Math.max(y, rect.height - y));
+        const circle = document.createElement('span');
+        circle.className = 'bs-ripple__circle';
+        circle.style.left = `${x - radius}px`;
+        circle.style.top = `${y - radius}px`;
+        circle.style.width = circle.style.height = `${radius * 2}px`;
+        surface.appendChild(circle);
+        const opacity = style.getPropertyValue('--bs-ripple-opacity').trim() || '0.24';
+        const animation = circle.animate([
+            { transform: 'scale(0)', opacity },
+            { transform: 'scale(1)', opacity: 0 },
+        ], { duration, easing: style.getPropertyValue('--bs-ripple-easing').trim() || 'ease-out' });
+        animation.onfinish = animation.oncancel = () => circle.remove();
+    };
+    toMs(value) {
+        const v = value.trim();
+        if (v.endsWith('ms'))
+            return parseFloat(v);
+        if (v.endsWith('s'))
+            return parseFloat(v) * 1000;
+        return 0;
+    }
+    render() {
+        return (h(Host, { key: '4bb0dd71635f57ed90deeeabc39a7abee9e66103', "aria-hidden": "true" }, h("div", { key: '29c6a7f4eefcb14598ee0aa2bc3980be2e04ebbc', part: "surface", class: "bs-ripple", ref: el => (this.surface = el) })));
+    }
+    static get is() { return "bs-ripple"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-ripple.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-ripple.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "centered": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Always start the ripple from the centre instead of the press point. Use it for round or icon-only controls."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "centered",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Turns the ripple off. A disabled parent (`<button disabled>`) also stops it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "triggerSelector": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "CSS selector of the element to listen on, found with `closest()` from the ripple (so it stays inside\nthe same shadow tree). By default the ripple listens on its parent. Use it when the pressable element\nis bigger than the ripple's own parent, e.g. a switch whose ripple sits on the knob but whose whole\n`<label>` is the press target."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trigger-selector"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "triggerSelector",
+                "methodName": "onTriggerChange"
+            }];
+    }
+}

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

@@ -0,0 +1,33 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const meta = {
+    title: 'Motion/bs-ripple',
+    parameters: { docs: { description: { component: componentDescription('bs-ripple') } } },
+    render: args => html `
+    <div
+      style="position: relative; width: 320px; height: 120px; display: grid; place-items: center; border-radius: var(--bs-border-radius-100); background: var(--bs-surface-hover); color: var(--bs-text-default); cursor: pointer; user-select: none;"
+    >
+      Press anywhere
+      <bs-ripple ?centered=${args.centered} ?disabled=${args.disabled}></bs-ripple>
+    </div>
+  `,
+    argTypes: {
+        centered: { control: 'boolean', description: propDescription('bs-ripple', 'centered') },
+        disabled: { control: 'boolean', description: propDescription('bs-ripple', 'disabled') },
+    },
+    args: { centered: false, disabled: false },
+};
+export default meta;
+export const Default = {};
+export const Centered = { args: { centered: true } };
+export const InButtons = {
+    render: () => html `
+    <bs-stack gap="200">
+      <bs-button>Primary</bs-button>
+      <bs-button variant="neutral">Neutral</bs-button>
+      <bs-button variant="outlined">Outlined</bs-button>
+      <bs-button variant="error">Error</bs-button>
+      <bs-button disabled>Disabled (no ripple)</bs-button>
+    </bs-stack>
+  `,
+};

package/dist/collection/components/bs-search-item/bs-search-item.css

@@ -17,6 +17,8 @@
 }
 
 .bs-search-item {
+  /* Containing block for the absolutely-positioned bs-ripple layer. */
+  position: relative;
   box-sizing: border-box;
   display: flex;
   align-items: center;

package/dist/collection/components/bs-search-item/bs-search-item.js

@@ -36,6 +36,7 @@ import { h } from "@stencil/core";
  * @prop --bs-search-item-color-muted - Description and trailing text. Aliased to `--bs-text-muted`.
  * @prop --bs-search-item-color-disabled - Aliased to `--bs-text-on-disabled`.
  * @prop --bs-search-item-icon-color - Aliased to `--bs-icon-default`.
+ * @part ripple - The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 export class BsSearchItem {
     el;
@@ -68,7 +69,7 @@ export class BsSearchItem {
     slotFilled = (set) => (ev) => set(ev.target.assignedNodes().length > 0);
     render() {
         const role = this.selectionRole ?? undefined;
-        return (h("div", { key: '0c570b63e05b1fc0294329710fbf88b2fc21e1ff', part: "container", class: "bs-search-item", role: role, "aria-selected": role ? String(this.active) : undefined, "aria-disabled": role && this.disabled ? 'true' : undefined }, h("span", { key: '5dd4eebb10183d38704ac1669c024ef863846c00', part: "icon", class: { 'bs-search-item__icon': true, 'bs-search-item__icon--hidden': !this.hasIcon } }, h("slot", { key: '4c1b4f5d589201f1fa98081cc432d630950311e0', name: "icon", onSlotchange: this.slotFilled(v => (this.hasIcon = v)) })), h("span", { key: '0908a9fc5a42c00e6bae6e5f69fe1f3224a73147', part: "content", class: "bs-search-item__content" }, h("span", { key: '817216a76634be9b203bb324c8ee5cb54505f44f', part: "label", class: "bs-search-item__label" }, h("slot", { key: '7ee0d2da1dc6e2ddd9dc25e5a3d2238c87b223b1' })), h("span", { key: '765a7dae7761d72b1b3a5571549a044420c88a05', part: "description", class: { 'bs-search-item__description': true, 'bs-search-item__description--hidden': !this.hasDescription } }, h("slot", { key: '8d1da1dc91b3133b10a17f711227031daa40e5ee', name: "description", onSlotchange: this.slotFilled(v => (this.hasDescription = v)) }))), h("span", { key: '33fcb4ab13f5ab8659249c70626699ee831a008d', part: "trailing", class: { 'bs-search-item__trailing': true, 'bs-search-item__trailing--hidden': !this.hasTrailingSlot && !this.trailing } }, h("slot", { key: '21cd86383493354482304367794e557c1b20bf17', name: "trailing", onSlotchange: this.slotFilled(v => (this.hasTrailingSlot = v)) }, this.trailing))));
+        return (h("div", { key: '5a3a8580e47d0c10e55db1b787b0b74e6cb3a4f3', part: "container", class: "bs-search-item", role: role, "aria-selected": role ? String(this.active) : undefined, "aria-disabled": role && this.disabled ? 'true' : undefined }, !this.disabled && h("bs-ripple", { key: 'c8e27ae7b1e0d50f8ecff26c91bcae9c3b62950f', part: "ripple" }), h("span", { key: '81ad3c5bec85021e7276909753e4f1a3a17e4b00', part: "icon", class: { 'bs-search-item__icon': true, 'bs-search-item__icon--hidden': !this.hasIcon } }, h("slot", { key: '88262df53a785c5e60b8ec3935b1d1861cf1ae6a', name: "icon", onSlotchange: this.slotFilled(v => (this.hasIcon = v)) })), h("span", { key: '5924d34123f7889eddd068ee24a2dfc6df8f41b3', part: "content", class: "bs-search-item__content" }, h("span", { key: '671557c0b077e15450be02e5bb474c0f449dfea7', part: "label", class: "bs-search-item__label" }, h("slot", { key: '97ebaf915bcc552fd77d78e7ddb39fdc640ee023' })), h("span", { key: 'e60d0190f0c562c041d0c305917220f4a34f450f', part: "description", class: { 'bs-search-item__description': true, 'bs-search-item__description--hidden': !this.hasDescription } }, h("slot", { key: 'd044cb988f1edc550a18cfe06a9258b7cae2f15f', name: "description", onSlotchange: this.slotFilled(v => (this.hasDescription = v)) }))), h("span", { key: 'e55b0b5c9a7fb2531f6d20667970dc587a27b140', part: "trailing", class: { 'bs-search-item__trailing': true, 'bs-search-item__trailing--hidden': !this.hasTrailingSlot && !this.trailing } }, h("slot", { key: 'bae1da141d180b3dbb788c19a632548d0127bd64', name: "trailing", onSlotchange: this.slotFilled(v => (this.hasTrailingSlot = v)) }, this.trailing))));
     }
     static get is() { return "bs-search-item"; }
     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: 'd24c6a8c35ba5fa00d09789ae3b9fb9c13478aa2', part: "container", class: "bs-session-timeout", surface: "base", role: "region", "aria-labelledby": "heading" }, h("div", { key: '519212dd44edaf8b6083d0b4a0aa554721030edb', class: "bs-session-timeout__body" }, !this.hideIcon && (h("bs-icon-tile", { key: '0afcc5d7ac6331327c54f207c7bf17a85e1d4ca6', part: "art", intent: d.intent, size: "lg" }, h("slot", { key: '9b23c1e0ac3338026d9fd865f388156f79dbbccf', name: "icon" }, d.glyph()))), this.renderHeading(heading, description), this.type === 'warning' && this.renderWarning(), this.type === 'warning' && this.savedMessage && (h("p", { key: '28feba54a260237d0fbd4f1fd73c0a2f759f1de7', part: "saved", class: "bs-session-timeout__saved" }, h(InfoIcon, { key: 'cf8cc480add0d2269e5dc60b6eca92429f2747bd' }), h("span", { key: '9bcaa1f9605dec86b2323b6b30ea433426c760dc' }, this.savedMessage))), this.type === 'signed-out' && this.renderAccount(), this.type === 'confirm-identity' && this.renderConfirm(), this.type === 'warning' && (primary || secondary) && (h("div", { key: '3c5da6d79a8e7958d24d4a5426f4e44c04333b65', part: "actions", class: "bs-session-timeout__actions" }, secondary && (h("bs-button", { key: '0e552712f93f9a59919ed2a64bd71d9d79908978', part: "secondary", variant: "outlined", onClick: () => this.bsSecondary.emit() }, secondary)), primary && (h("bs-button", { key: 'f461ea7b8119d8608a7d560b6aa52c404c61028c', part: "primary", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)))), this.type === 'signed-out' && (primary || secondary) && (h("div", { key: '8e4ea5ec9e71e233bfd1a125bacf4ada41ee3a6d', part: "actions", class: "bs-session-timeout__actions bs-session-timeout__actions--stacked" }, primary && (h("bs-button", { key: '104e37dc1b7b7ce672c12a8a81e3069d2c85a7f2', part: "primary", class: "bs-session-timeout__block-button", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)), secondary && (h("bs-button", { key: '3ab259894ba4ab7362e3543762c575ca5c5c1feb', part: "secondary", class: "bs-session-timeout__text-button", variant: "subtle", size: "lg", onClick: () => this.bsSecondary.emit() }, secondary)))), h("div", { key: 'e44f63e49fc80fa1f297d9b10beadfd2a192c586', class: "bs-session-timeout__sr-only", role: "status", "aria-live": "polite" }, this.announcement))));
+        return (h("bs-card", { key: '6e8091dcd3e15ebf5b68dc024f69ef23cf1850d4', part: "container", class: "bs-session-timeout", surface: "base", role: "region", "aria-labelledby": "heading" }, h("div", { key: '53eca19dff3cde4bac5b0fac889da620980db6d6', class: "bs-session-timeout__body" }, !this.hideIcon && (h("bs-icon-tile", { key: '07074e81e49beaada9dd4b92770bfd4999353629', part: "art", intent: d.intent, size: "lg" }, h("slot", { key: '362feaab173e019303ab2e69bb6c38a8ac5898f6', name: "icon" }, d.glyph()))), this.renderHeading(heading, description), this.type === 'warning' && this.renderWarning(), this.type === 'warning' && this.savedMessage && (h("p", { key: 'b264006e5b5fc1ad21850d2b00b7a8fda4f0da18', part: "saved", class: "bs-session-timeout__saved" }, h(InfoIcon, { key: 'b5928e557e3b4b84e56e4312652725f03a3349da' }), h("span", { key: 'a9830a6ecb1cc3c889132c298bf93ae1cd590b09' }, this.savedMessage))), this.type === 'signed-out' && this.renderAccount(), this.type === 'confirm-identity' && this.renderConfirm(), this.type === 'warning' && (primary || secondary) && (h("div", { key: 'de05950cdcbbaee5bea7f9078ab21675423720a5', part: "actions", class: "bs-session-timeout__actions" }, secondary && (h("bs-button", { key: 'f3c9295fd63ab6362ff3c3821e994523a6faed4a', part: "secondary", variant: "outlined", onClick: () => this.bsSecondary.emit() }, secondary)), primary && (h("bs-button", { key: 'b121ea361fd5e69092079f5aa87f5af06e46039e', part: "primary", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)))), this.type === 'signed-out' && (primary || secondary) && (h("div", { key: '77acc3ed926513e60706d02fcb3077dee05b5b26', part: "actions", class: "bs-session-timeout__actions bs-session-timeout__actions--stacked" }, primary && (h("bs-button", { key: 'f8279d2ddb817395c88bd5d467f3a53ce927ac77', part: "primary", class: "bs-session-timeout__block-button", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)), secondary && (h("bs-button", { key: '40c06a5a88c6b91833f50b61db6953a205f8102a', part: "secondary", class: "bs-session-timeout__text-button", variant: "subtle", size: "lg", onClick: () => this.bsSecondary.emit() }, secondary)))), h("div", { key: '179e7d8a22872c50f531758bfc64b1de7c4f557d', 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-shortcut-row/bs-shortcut-row.js

@@ -36,7 +36,7 @@ export class BsShortcutRow {
     /** Set by the parent list (`"listitem"`). Standalone rows have no role. */
     selectionRole = null;
     render() {
-        return (h("div", { key: '3594dbd6526283414539f46dbf83430c35b6aa03', part: "container", class: "bs-shortcut-row", role: this.selectionRole ?? undefined }, h("span", { key: '74bf12e32a4fc15c77ee4b650ae1facee76f68c0', part: "action", class: "bs-shortcut-row__action" }, h("slot", { key: '6bfc823e7ffb68d7a2d677d828dfe5f765f1d094' }, this.action)), h("span", { key: '4f6ba475754e26dffdae4dbbc29d64c1f01d2463', part: "keys", class: "bs-shortcut-row__keys" }, h("slot", { key: '251e7333354292aacc6f93265d3ebce68db0af53', name: "keys" }, h("bs-key-caps", { key: 'f887b73b0c21c92997cee5a4742e23b5caad358d', keys: this.keys, label: this.label, disabled: this.disabled })))));
+        return (h("div", { key: 'd336bcc14fe7dcd1e89e436869fc3a45f354d6e8', part: "container", class: "bs-shortcut-row", role: this.selectionRole ?? undefined }, h("span", { key: '45583d2bd4a7ef0b803e09d044bb90d5db86fe56', part: "action", class: "bs-shortcut-row__action" }, h("slot", { key: '3dd97ce7647a6efe7f7f0f4f4f10bda2f7f282b9' }, this.action)), h("span", { key: '3974fb0a6d0ca7aaaf136253db49e53c4dbedca4', part: "keys", class: "bs-shortcut-row__keys" }, h("slot", { key: '3341c3a3e96eb4e0f1cbe821ea2a52936fa1bb37', name: "keys" }, h("bs-key-caps", { key: 'cbd12693cf4c679e7dcd04e3e00a7d7c43d1fe76', keys: this.keys, label: this.label, disabled: this.disabled })))));
     }
     static get is() { return "bs-shortcut-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { render, h, describe, it, expect } from "@stencil/vitest";
+const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms));
 describe('bs-side-panel', () => {
     it('renders nothing when closed', async () => {
         const { root } = await render(h("bs-side-panel", { heading: "History" }, "Body"));
@@ -114,4 +115,22 @@ describe('bs-side-panel', () => {
         expect(plain.inert).toBe(false);
         plain.remove();
     });
+    describe('open/close motion', () => {
+        it('stays mounted while it slides out, then unmounts', async () => {
+            const { root, waitForChanges } = await render(h("bs-side-panel", { open: true, heading: "History", style: { '--bs-side-panel-duration': '150ms' } }, "Body"));
+            root.open = false;
+            await waitForChanges();
+            expect(root.shadowRoot.querySelector('[role="dialog"]')).not.toBeNull();
+            expect(root.shadowRoot.querySelector('.bs-side-panel')).toHaveClass('bs-side-panel--closing');
+            await wait(400);
+            await waitForChanges();
+            expect(root.shadowRoot.querySelector('[role="dialog"]')).toBeNull();
+        });
+        it('unmounts immediately when the duration is 0ms', async () => {
+            const { root, waitForChanges } = await render(h("bs-side-panel", { open: true, heading: "History", style: { '--bs-side-panel-duration': '0ms' } }, "Body"));
+            root.open = false;
+            await waitForChanges();
+            expect(root.shadowRoot.querySelector('[role="dialog"]')).toBeNull();
+        });
+    });
 });

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

@@ -6,6 +6,8 @@
   --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-duration: var(--bs-duration-slow);
+  --bs-side-panel-easing: var(--bs-easing-standard);
 }
 
 .bs-side-panel {
@@ -75,3 +77,9 @@
 .bs-side-panel__footer {
   padding: var(--bs-side-panel-padding);
 }
+
+/* On its way out: neither the panel nor the backdrop may take clicks. */
+.bs-side-panel--closing .bs-side-panel__overlay,
+.bs-side-panel--closing .bs-side-panel__panel {
+  pointer-events: none;
+}

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { cancelMotion, play, readMotion } from "../../utils/motion";
 let panelId = 0;
 /**
  * A generic slide-in panel (drawer) anchored to the start or end edge, for history, filters, FAQ
@@ -30,6 +31,8 @@ let panelId = 0;
  * @prop --bs-side-panel-overlay-bg - Backdrop color. Aliased to `--bs-surface-overlay`.
  * @prop --bs-side-panel-color - Text color. Aliased to `--bs-text-default`.
  * @prop --bs-side-panel-z-index - Stacking order. Aliased to `--bs-z-index-modal`.
+ * @prop --bs-side-panel-duration - Length of the slide in/out. Aliased to `--bs-duration-slow`.
+ * @prop --bs-side-panel-easing - Curve of the slide in/out. Aliased to `--bs-easing-standard`.
  */
 export class BsSidePanel {
     el;
@@ -50,7 +53,24 @@ export class BsSidePanel {
     panelEl;
     /** Elements we set `inert` on (so we only undo our own changes). */
     inertified = [];
+    /** True while the slide-out plays after `open` went false, so the panel stays mounted for it. */
+    closing = false;
+    overlayEl;
+    enterPending = false;
+    exitPending = false;
+    motionRun = 0;
+    wasRendered = false;
     onOpenChange(next) {
+        this.motionRun++;
+        cancelMotion(this.overlayEl, this.panelEl);
+        if (next) {
+            this.closing = false;
+            this.enterPending = true;
+        }
+        else if (this.wasRendered && readMotion(this.el, 'bs-side-panel').ms > 0) {
+            this.closing = true;
+            this.exitPending = true;
+        }
         if (next) {
             this.previouslyFocused = document.activeElement ?? null;
             this.applyInert();
@@ -144,7 +164,38 @@ export class BsSidePanel {
             first.focus();
         }
     }
+    /** Where the panel sits when hidden: fully past its own edge. Physical, like the panel's own left/right. */
+    offscreen() {
+        return this.side === 'start' ? 'translateX(-100%)' : 'translateX(100%)';
+    }
+    playEnter() {
+        const { ms, easing } = readMotion(this.el, 'bs-side-panel');
+        if (ms === 0)
+            return;
+        play(this.overlayEl, [{ opacity: 0 }, { opacity: 1 }], ms, easing);
+        play(this.panelEl, [{ transform: this.offscreen() }, { transform: 'none' }], ms, easing);
+    }
+    playExit() {
+        const { ms, easing } = readMotion(this.el, 'bs-side-panel');
+        const run = ++this.motionRun;
+        Promise.all([
+            play(this.overlayEl, [{ opacity: 1 }, { opacity: 0 }], ms, easing, 'forwards'),
+            play(this.panelEl, [{ transform: 'none' }, { transform: this.offscreen() }], ms, easing, 'forwards'),
+        ]).then(() => {
+            if (run === this.motionRun)
+                this.closing = false;
+        });
+    }
     componentDidRender() {
+        this.wasRendered = this.open || this.closing;
+        if (this.open && this.enterPending) {
+            this.enterPending = false;
+            this.playEnter();
+        }
+        else if (!this.open && this.closing && this.exitPending) {
+            this.exitPending = false;
+            this.playExit();
+        }
         if (this.open && this.panelEl && !this.focusedIn) {
             this.focusedIn = true;
             this.panelEl.focus();
@@ -168,9 +219,9 @@ export class BsSidePanel {
         }
     };
     render() {
-        if (!this.open)
+        if (!this.open && !this.closing)
             return null;
-        return (h("div", { class: `bs-side-panel bs-side-panel--${this.side}`, onKeyDown: this.onKeyDown }, this.overlay && h("div", { part: "overlay", class: "bs-side-panel__overlay", onClick: this.close }), h("div", { part: "panel", class: "bs-side-panel__panel", role: "dialog", "aria-modal": "true", "aria-labelledby": this.headingId, tabindex: "-1", ref: el => (this.panelEl = el) }, h("div", { part: "header", class: "bs-side-panel__header" }, h("h2", { part: "heading", id: this.headingId, class: "bs-side-panel__heading" }, this.heading), h("div", { class: "bs-side-panel__actions" }, h("slot", { name: "header-actions" }), h("bs-icon-button", { variant: "subtle", ariaLabel: this.closeLabel, onClick: this.close }, h("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { d: "M6 6L18 18M18 6L6 18", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" }))))), h("div", { part: "body", class: "bs-side-panel__body" }, h("slot", null)), h("div", { part: "footer", class: "bs-side-panel__footer" }, h("slot", { name: "footer" })))));
+        return (h("div", { class: `bs-side-panel bs-side-panel--${this.side} ${this.open ? '' : 'bs-side-panel--closing'}`, onKeyDown: this.onKeyDown }, this.overlay && h("div", { part: "overlay", class: "bs-side-panel__overlay", onClick: this.close, ref: el => (this.overlayEl = el) }), h("div", { part: "panel", class: "bs-side-panel__panel", role: "dialog", "aria-modal": "true", "aria-labelledby": this.headingId, tabindex: "-1", ref: el => (this.panelEl = el) }, h("div", { part: "header", class: "bs-side-panel__header" }, h("h2", { part: "heading", id: this.headingId, class: "bs-side-panel__heading" }, this.heading), h("div", { class: "bs-side-panel__actions" }, h("slot", { name: "header-actions" }), h("bs-icon-button", { variant: "subtle", ariaLabel: this.closeLabel, onClick: this.close }, h("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { d: "M6 6L18 18M18 6L6 18", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" }))))), h("div", { part: "body", class: "bs-side-panel__body" }, h("slot", null)), h("div", { part: "footer", class: "bs-side-panel__footer" }, h("slot", { name: "footer" })))));
     }
     static get is() { return "bs-side-panel"; }
     static get encapsulation() { return "shadow"; }
@@ -294,6 +345,11 @@ export class BsSidePanel {
             }
         };
     }
+    static get states() {
+        return {
+            "closing": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "bsClose",

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

@@ -60,7 +60,7 @@ export class BsSkeleton {
             lines.push(h("span", { part: "line", class: { 'bs-skeleton__line': true, [`bs-skeleton__line--${this.variant}`]: true, 'bs-skeleton__line--short': isShortLast }, style: style }));
         }
         const hasLabel = !!this.label;
-        return (h("span", { key: 'c5cbf5b6a64b8658ffd5b60816db3d226c342d65', part: "container", class: { 'bs-skeleton': true, 'bs-skeleton--animated': this.animated, [`bs-skeleton--${this.variant}`]: true }, role: hasLabel ? 'status' : undefined, "aria-label": hasLabel ? this.label : undefined, "aria-hidden": hasLabel ? undefined : 'true' }, lines));
+        return (h("span", { key: '0ee4009d1f3de93bdca785aac769f559c42b4d27', part: "container", class: { 'bs-skeleton': true, 'bs-skeleton--animated': this.animated, [`bs-skeleton--${this.variant}`]: true }, role: hasLabel ? 'status' : undefined, "aria-label": hasLabel ? this.label : undefined, "aria-hidden": hasLabel ? undefined : 'true' }, lines));
     }
     static get is() { return "bs-skeleton"; }
     static get encapsulation() { return "shadow"; }

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

@@ -233,7 +233,7 @@ export class BsSlider {
     render() {
         const isRange = this.type === 'range';
         const rootClasses = ['bs-slider', this.disabled ? 'bs-slider--disabled' : ''].filter(Boolean).join(' ');
-        return (h("div", { key: '8d3274ef80b6bdd4a52efc8f8802ebb3aba86b9a', class: rootClasses }, this.showLabel && (h("div", { key: 'd852f58c8c92a8f69153192e74136362e2ab226e', class: "bs-slider__header" }, h("span", { key: 'e02b3c4fd839d812b516bab33349f1a4f2d5b0c4', id: "bs-slider-label", part: "label", class: "bs-slider__label" }, this.label), isRange ? (h("span", { class: "bs-slider__value-fields" }, this.renderPercentField(this.percent(this.effectiveValueStart), this.onStartPercentFieldChange, this.ariaLabel ?? this.startValueLabel), h("span", { class: "bs-slider__separator" }, "\u2013"), this.renderPercentField(this.percent(this.effectiveValueEnd), this.onEndPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} end` : this.endValueLabel))) : (this.renderPercentField(this.percent(this.value), this.onPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} value` : 'Value')))), h("div", { key: '30bc9f0bb1380dfa22542d04af160f13f70d276f', class: "bs-slider__row" }, this.showLabel && (h("span", { key: '824de56e2112ef5af4e20ebf097b17e4d7122624', part: "bound", class: "bs-slider__bound" }, this.min)), isRange ? this.renderRangeThumbs() : this.renderSingleThumb(), this.showLabel && (h("span", { key: 'cd0848d7add9ea1fd53c92ebd5b5f13a4a06fdbe', part: "bound", class: "bs-slider__bound" }, this.max)))));
+        return (h("div", { key: '78480dc37808335f258e1ad06e8b19ca97aed1b9', class: rootClasses }, this.showLabel && (h("div", { key: '0fd24602403f811367605786a07d9962c6f3522f', class: "bs-slider__header" }, h("span", { key: 'dd1c85fa0c4718e381bfef7f00977230d60e9d6c', id: "bs-slider-label", part: "label", class: "bs-slider__label" }, this.label), isRange ? (h("span", { class: "bs-slider__value-fields" }, this.renderPercentField(this.percent(this.effectiveValueStart), this.onStartPercentFieldChange, this.ariaLabel ?? this.startValueLabel), h("span", { class: "bs-slider__separator" }, "\u2013"), this.renderPercentField(this.percent(this.effectiveValueEnd), this.onEndPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} end` : this.endValueLabel))) : (this.renderPercentField(this.percent(this.value), this.onPercentFieldChange, this.ariaLabel ? `${this.ariaLabel} value` : 'Value')))), h("div", { key: '6628c6c2332590f3580a759903bfc2b817ec1ef6', class: "bs-slider__row" }, this.showLabel && (h("span", { key: 'ecda7ec3285991312fbd0fba003294ba94fa8777', part: "bound", class: "bs-slider__bound" }, this.min)), isRange ? this.renderRangeThumbs() : this.renderSingleThumb(), this.showLabel && (h("span", { key: '3db1ee50efbfe1d14aae2609997bbd589710f2d1', part: "bound", class: "bs-slider__bound" }, this.max)))));
     }
     static get is() { return "bs-slider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -67,7 +67,7 @@ export class BsSnackbar {
         this.bsDismiss.emit();
     };
     render() {
-        return (h("div", { key: '2b54d2d4ddfed7e1942ab21f09cf074ab58b2f22', part: "container", class: `bs-snackbar bs-snackbar--${this.variant}`, role: "status", "aria-live": this.variant === 'error' ? 'assertive' : 'polite' }, h("div", { key: 'a3ca39bf6b7c1047b013bac648b6fb60acaf520d', class: "bs-snackbar__content" }, h("span", { key: 'fa5a5cc6a24ad4f7ee434bf9f8ae4976872c57df', part: "icon", class: "bs-snackbar__icon", "aria-hidden": "true" }, this.loading ? h("span", { class: "bs-snackbar__spinner" }) : h(CheckCircleIcon, null)), h("span", { key: '58b52f72b9290a986832b954ad9f7e5d1e51eac8', part: "message", class: "bs-snackbar__message" }, h("slot", { key: 'c907524f91afd4b5ac22f0b86bb123ac831021f9' }))), h("div", { key: 'b746a574030f0023826ef131643eb49088db7da0', class: "bs-snackbar__actions" }, this.actionLabel && (h("bs-button", { key: 'fef75f43a0a15208b43ad4601dcc639022160ccc', part: "action", variant: this.actionVariant ?? ACTION_VARIANT[this.variant], size: "sm", onClick: this.onAction }, this.actionLabel)), !this.hideClose && (h("bs-icon-button", { key: 'a582778e2469b68a683c6cff867c5f8839989f2e', part: "close", variant: "subtle", size: "md", ariaLabel: "Dismiss", onClick: this.onDismiss }, h(CloseIcon, { key: '1e7a6f872373fe2f62a99aa03421815a6f55e8d2' }))))));
+        return (h("div", { key: '26aad3204c2d6ca34162da66a173afab22663973', part: "container", class: `bs-snackbar bs-snackbar--${this.variant}`, role: "status", "aria-live": this.variant === 'error' ? 'assertive' : 'polite' }, h("div", { key: '8837bc51a479fbd276b2c02fccf98eb3e6683801', class: "bs-snackbar__content" }, h("span", { key: '791564815c28aebeabff97b6b113f04acc4fa0b6', part: "icon", class: "bs-snackbar__icon", "aria-hidden": "true" }, this.loading ? h("span", { class: "bs-snackbar__spinner" }) : h(CheckCircleIcon, null)), h("span", { key: '28920c114f18f996d0dc4778d4de2ff523626c99', part: "message", class: "bs-snackbar__message" }, h("slot", { key: '4bf02f4ad00ab5a3def30c066648b4df55bf7457' }))), h("div", { key: '7f3c619ba2164e8e7eb780c737b410a50fdf813b', class: "bs-snackbar__actions" }, this.actionLabel && (h("bs-button", { key: '43886c3acaef928d08cf76d8d4660df6100f1ba3', part: "action", variant: this.actionVariant ?? ACTION_VARIANT[this.variant], size: "sm", onClick: this.onAction }, this.actionLabel)), !this.hideClose && (h("bs-icon-button", { key: 'd28c20079af83708865ad4b6ba72a65de2a1d458', part: "close", variant: "subtle", size: "md", ariaLabel: "Dismiss", onClick: this.onDismiss }, h(CloseIcon, { key: '7f9df3eef9dcf22f587b69e4ecd36566876c29b9' }))))));
     }
     static get is() { return "bs-snackbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-source-link/bs-source-link.css

@@ -14,6 +14,8 @@
 }
 
 .bs-source-link {
+  /* Containing block for the absolutely-positioned bs-ripple layer. */
+  position: relative;
   box-sizing: border-box;
   display: flex;
   align-items: center;

package/dist/collection/components/bs-source-link/bs-source-link.js

@@ -32,6 +32,7 @@ import { h } from "@stencil/core";
  * @prop --bs-source-link-icon-color - File icon and arrow color. Aliased to `--bs-icon-default`.
  * @prop --bs-source-link-dot-color - Separator dot between source and version. Aliased to
  *   `--bs-text-secondary`.
+ * @part ripple - The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 export class BsSourceLink {
     /** The cited document's filename. */
@@ -51,8 +52,9 @@ export class BsSourceLink {
     };
     render() {
         const inner = [
-            h("span", { key: 'f6cbdaccaa104fa4e6d16db23ae8f66e9d3d7aa7', class: "bs-source-link__left" }, h("span", { key: 'a66ccda2c131b3a708402d0b06206e355fca0dad', class: "bs-source-link__filename-row" }, h("span", { key: '74af0518a127378fc13291c3cec12b8eb470268b', part: "icon", class: "bs-source-link__icon" }, h("slot", { key: '9b1f4a71a0c5313210481106988a851ea87b40b6', name: "icon" }, h(FileTextIcon, { key: '1b1b9e285a744a074537fbf4ea19c852343b4513' }))), h("p", { key: 'ecdedebb0281ec56ec08a1657de2d924bb34a421', part: "filename", class: "bs-source-link__filename" }, this.fileName)), h("span", { key: 'b109074e833ef4feb438f9b4992fe6bd7ebc8279', class: "bs-source-link__meta" }, this.sourceName && (h("span", { key: '182f41c9115004f345028e991e38345dcc9bc7b2', part: "source", class: "bs-source-link__source" }, this.sourceName)), this.sourceName && this.version && h("span", { key: '95b31ed9741bbaeb215109139520108991d33ffe', class: "bs-source-link__dot", "aria-hidden": "true" }), this.version && (h("span", { key: '3241c29460a9287bba9bebac78cefdb1ef62ca65', part: "version", class: "bs-source-link__version" }, this.version)))),
-            h("span", { key: '67327845908098595d935c87c96809205cb25d38', part: "arrow", class: "bs-source-link__arrow", "aria-hidden": "true" }, h(ArrowUpRightIcon, { key: 'fcf4946e7d5647a6137ff1a6d24851cc7bcb9aef' })),
+            h("bs-ripple", { key: '2ddd937da894bc3584b82489e35d41167c19cb6c', part: "ripple" }),
+            h("span", { key: 'd1141377078beec80d8726b1633ea9261bce215d', class: "bs-source-link__left" }, h("span", { key: '75d04109faa8168ba271c8bfc2cfd15abf02fb57', class: "bs-source-link__filename-row" }, h("span", { key: '50f28021063c49b0ccc7348e7b0b9cd6ca0749b7', part: "icon", class: "bs-source-link__icon" }, h("slot", { key: 'aca4ff56e585d65d2b38d0b1f8634d56d521b549', name: "icon" }, h(FileTextIcon, { key: 'e89b337ded8658b2b76ba59e6ea79e70763ddb72' }))), h("p", { key: '5d9cdf3618072784aeb9bd067ae505b57afa625c', part: "filename", class: "bs-source-link__filename" }, this.fileName)), h("span", { key: '35d6d485989679eb05b6fcf2096477456e6b7bc0', class: "bs-source-link__meta" }, this.sourceName && (h("span", { key: 'e3ffae28c3ed65d255961c172eb823d52583c7b2', part: "source", class: "bs-source-link__source" }, this.sourceName)), this.sourceName && this.version && h("span", { key: 'c460e9ccfa2d92b11d8bb2a1e87fcedc94d392ae', class: "bs-source-link__dot", "aria-hidden": "true" }), this.version && (h("span", { key: '9a33d16c96a6d904dd1b69169170da0d0801b9f1', part: "version", class: "bs-source-link__version" }, this.version)))),
+            h("span", { key: 'c2f42b73b59ae97bb8e95e80c20a2038826329bf', part: "arrow", class: "bs-source-link__arrow", "aria-hidden": "true" }, h(ArrowUpRightIcon, { key: '61d67aaa0a4382ecb12ed49d5716e1c4385c6af5' })),
         ];
         return this.href ? (h("a", { class: "bs-source-link", href: this.href, target: this.target, rel: "noopener noreferrer", onClick: this.onClick }, inner)) : (h("button", { type: "button", class: "bs-source-link", onClick: this.onClick }, inner));
     }

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

@@ -30,7 +30,7 @@ export class BsSpinner {
     label;
     render() {
         const hasLabel = !!this.label;
-        return (h("span", { key: '3c9d75df5028a1bad32c909ef1e382ffae53fd91', part: "container", class: `bs-spinner bs-spinner--${this.size}`, role: hasLabel ? 'status' : undefined, "aria-label": hasLabel ? this.label : undefined, "aria-hidden": hasLabel ? undefined : 'true' }, h("svg", { key: '431baaa3fbe8c6f9a4d9189b46d24d5e15ad8f18', part: "svg", class: "bs-spinner__svg", viewBox: "0 0 24 24", fill: "none", focusable: "false" }, h("circle", { key: 'd71a6901ce3cccd9647287ea06693137cd5c9b64', class: "bs-spinner__track", cx: "12", cy: "12", r: "9", "stroke-width": "3" }), h("path", { key: '65f5e995822a96e293b3541eb16606a178ec6c88', class: "bs-spinner__arc", d: "M12 3a9 9 0 0 1 9 9", "stroke-width": "3", "stroke-linecap": "round" }))));
+        return (h("span", { key: '17b3ac21aefe35279e52717c529bcba6d2ae7b75', part: "container", class: `bs-spinner bs-spinner--${this.size}`, role: hasLabel ? 'status' : undefined, "aria-label": hasLabel ? this.label : undefined, "aria-hidden": hasLabel ? undefined : 'true' }, h("svg", { key: '8ca1165795b8fadb7ea3c3c8228fc6f24d3ce3b2', part: "svg", class: "bs-spinner__svg", viewBox: "0 0 24 24", fill: "none", focusable: "false" }, h("circle", { key: '07d9b05e6e6f11e742bdbeea99e7f31322696363', class: "bs-spinner__track", cx: "12", cy: "12", r: "9", "stroke-width": "3" }), h("path", { key: '83d83f51d3c89cc3997950ff94e4911c6d1c0748', class: "bs-spinner__arc", d: "M12 3a9 9 0 0 1 9 9", "stroke-width": "3", "stroke-linecap": "round" }))));
     }
     static get is() { return "bs-spinner"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-split-pane/bs-split-pane.js

@@ -215,7 +215,7 @@ export class BsSplitPane {
                 nodes.push(h("div", { part: "divider", class: { 'bs-split-pane__divider': true, 'bs-split-pane__divider--active': this.draggingIndex === i, 'bs-split-pane__divider--static': !this.resizable }, role: "separator", "aria-orientation": dividerOrientation, "aria-label": this.dividerLabel, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": this.percentFor(i), tabindex: this.resizable ? 0 : undefined, onPointerDown: this.onPointerDown(i), onPointerMove: this.onPointerMove, onPointerUp: this.onPointerUp, onPointerCancel: this.onPointerUp, onKeyDown: this.onKeyDown(i) }, h("span", { part: "divider-thumb", class: "bs-split-pane__thumb" })));
             }
         }
-        return (h("div", { key: '70a36a863fc3fb144160616725126d0421cea69f', part: "container", class: `bs-split-pane bs-split-pane--${this.orientation}` }, nodes));
+        return (h("div", { key: 'c427313cbfcd736d044ced8e07658ad6de6ed0bd', part: "container", class: `bs-split-pane bs-split-pane--${this.orientation}` }, nodes));
     }
     static get is() { return "bs-split-pane"; }
     static get encapsulation() { return "shadow"; }

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

@@ -81,7 +81,7 @@ export class BsStack {
                 parts.push(h("slot", { name: `bs-stack-item-${i}`, onSlotchange: this.sync }));
             }
         }
-        return (h(Host, { key: 'be2e4a8ecb5d4fd27441b8cafbfd7e8a17ea3b82', style: { '--bs-stack-gap-token': `var(--bs-spacing-${gap})` } }, h("slot", { key: '4eab2557384cb6ae620ea3feef8e36dc0a2e2f08', onSlotchange: this.sync }), parts));
+        return (h(Host, { key: '39852df38f3638826e331e5e1028fa069e15322c', style: { '--bs-stack-gap-token': `var(--bs-spacing-${gap})` } }, h("slot", { key: '9e303ef2361fd7b804aea37b1b5bf4269f480b2d', onSlotchange: this.sync }), parts));
     }
     static get is() { return "bs-stack"; }
     static get encapsulation() { return "shadow"; }

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

@@ -62,7 +62,7 @@ export class BsStepper {
     }
     render() {
         // role="list" so each bs-stepper-step's role="listitem" has the required parent.
-        return (h(Host, { key: '3f002aa5977dd81a203b44aeb3ffd9e82e1d78ab', role: "list" }, h("slot", { key: 'f5a64626aba6cef29bcc7710c839583ccc2a2c71', onSlotchange: this.onSlotChange })));
+        return (h(Host, { key: '12784d8efa1487b3fb39f9f59d7ebcd314ad6518', role: "list" }, h("slot", { key: 'af46ba1e66089cbacbc4e0b483df643196434f0b', onSlotchange: this.onSlotChange })));
     }
     static get is() { return "bs-stepper"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-stepper/bs-stepper-step/bs-stepper-step.js

@@ -57,7 +57,7 @@ export class BsStepperStep {
     }
     render() {
         const state = this.state;
-        return (h(Host, { key: '8e11ed2e78a5e6468ed6265f90199bdc0c2e4bcc', role: "listitem", class: `bs-stepper-step--${this.direction}` }, h("div", { key: '0d50e2845fb886a73e7eeaad474c0d9c1b2e06cb', class: "bs-stepper-step__top" }, h("span", { key: '1bfe85491c42f8e1bf00a4e86c162448564b5142', part: "icon", class: `bs-stepper-step__icon bs-stepper-step__icon--${state}` }, state === 'current' && h("span", { key: 'e3ac4066de9f1c9bfa824a889c654952891221b8', class: "bs-stepper-step__icon-dot" }), state === 'done' && h(CheckIcon, { key: '7c1e237ce011d77b47d26e622974d6a2629ecfd3' }), state === 'error' && h(ExclamationIcon, { key: '9420c50c9154f007ae0802473f0a5e0cf18fe8fd' })), h("span", { key: '039f2ca1186b82bebb8e989630f575599c64e85b', part: "connector", class: "bs-stepper-step__connector", "aria-hidden": "true" }, h("span", { key: 'dc5a250a1437eda9baf7cd38a69fa36d26e6cfaa', class: "bs-stepper-step__connector-line" }))), h("span", { key: 'df8d2c94073f134125d34e5686f0c340c2c59d87', part: "label", class: `bs-stepper-step__label bs-stepper-step__label--${state}` }, h("span", { key: '5bdce9915c1e6e2610bbe101bc41108cfa2e0cd5', part: "name", class: "bs-stepper-step__name" }, this.name), this.showDescription && this.description && (h("span", { key: '39ddca52aa59717d22ca56ece74b4518d1ae2370', part: "description", class: "bs-stepper-step__description" }, this.description)))));
+        return (h(Host, { key: 'e9b5948fbba4037488296cdc5e479f2070e0aff9', role: "listitem", class: `bs-stepper-step--${this.direction}` }, h("div", { key: 'debe65501bcdbc563bad4800d9f5bcad4d5de76a', class: "bs-stepper-step__top" }, h("span", { key: '0e0315aa8146c0f11e6ebd9e939735f7f339113e', part: "icon", class: `bs-stepper-step__icon bs-stepper-step__icon--${state}` }, state === 'current' && h("span", { key: 'c02f6a5c3de19fa5a2b54d6de53d0a7b345697d2', class: "bs-stepper-step__icon-dot" }), state === 'done' && h(CheckIcon, { key: '1147e186c821d21fc164ca589a2f9f6a179c145f' }), state === 'error' && h(ExclamationIcon, { key: '5f8c5874811de90db1e537b0f3d24e82e038a123' })), h("span", { key: 'b0347e06b36bf4fabdba4300803dc1a3b8c68719', part: "connector", class: "bs-stepper-step__connector", "aria-hidden": "true" }, h("span", { key: 'fa4f577a71a70151aaa3a9eb16eb2db91ba0fc01', class: "bs-stepper-step__connector-line" }))), h("span", { key: 'd5d9f431e11074aba9996833adbb9b2cb1f227cb', part: "label", class: `bs-stepper-step__label bs-stepper-step__label--${state}` }, h("span", { key: 'bb233d28351a78c13b604fd2f940b29467ae316c', part: "name", class: "bs-stepper-step__name" }, this.name), this.showDescription && this.description && (h("span", { key: '921a2bd021cb0cccb261313f3076370c8e620ccb', part: "description", class: "bs-stepper-step__description" }, this.description)))));
     }
     static get is() { return "bs-stepper-step"; }
     static get encapsulation() { return "shadow"; }

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

@@ -128,6 +128,8 @@
 }
 
 .bs-switch__knob {
+  /* Containing block for the bs-ripple halo. */
+  position: relative;
   box-sizing: border-box;
   border-radius: var(--bs-border-radius-full);
   background: var(--bs-switch-knob-bg);
@@ -203,3 +205,10 @@
   .bs-switch__track--checked .bs-switch__knob { background: HighlightText; }
   .bs-switch__track--disabled { border-color: GrayText; }
 }
+
+/* Round halo that extends past the knob, tinted with the brand colour. The press target is the whole label. */
+.bs-switch__ripple {
+  inset: -12px;
+  border-radius: 50%;
+  --bs-ripple-color: var(--bs-color-primary-default);
+}