@brandsync/wc 1.18.0 → 1.20.0

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

@@ -0,0 +1,309 @@
+import { h } from "@stencil/core";
+let uid = 0;
+/**
+ * A labelled group of `bs-radio`s: a visible label, helper or error text, an accessible
+ * `role="radiogroup"`, and a single `value` for the whole set.
+ *
+ * The group gives its radios one shared `name` (its own `name`, or a generated one) so they behave
+ * as one native-style group: arrow keys move the selection (wrapping), only the checked radio is in
+ * the tab order, and checking one unchecks the others. It keeps at most one radio checked (the
+ * first one wins if several start checked).
+ *
+ * Composed from: `bs-radio` (slotted by you).
+ *
+ * ## When to use
+ * - A set of 2-5 mutually exclusive options that should all stay visible, with a shared label.
+ *
+ * ## When not to use
+ * - Independent yes/no choices: use `bs-checkbox-group`.
+ * - Many options: use a select or `bs-menu`.
+ *
+ * @slot - The `bs-radio` elements.
+ * @part group - The `role="radiogroup"` element.
+ * @part label - The visible label.
+ * @part options - The wrapper laying out the radios (column, or row when `orientation="horizontal"`).
+ * @part description - The helper text (hidden while `error` is set).
+ * @part error - The error message.
+ */
+export class BsRadioGroup {
+    el;
+    id = `bs-radio-group-${++uid}`;
+    /** Visible group label, also the accessible name of the group. */
+    label;
+    /** Helper text under the options. Replaced by `error` while that is set. */
+    description;
+    /** Error message. Sets `aria-invalid`, replaces the helper text and is announced with the group. */
+    error;
+    /** Layout of the radios. */
+    orientation = 'vertical';
+    /** `name` given to every radio in the group. Defaults to a generated, unique name. */
+    name;
+    /** `value` of the checked radio. Setting it checks the matching radio (and unchecks the rest). */
+    value;
+    /** Marks the group as required: sets `aria-required` and shows an asterisk after the label. */
+    required = false;
+    /** Check the first enabled radio when none is checked, so a choice is always made. Off by default so a form can start empty. */
+    selectFirst = false;
+    /** Emitted with the new `value` when the user checks a radio. Replaces the radios' own `bsChange`, which does not reach listeners outside the group. */
+    bsChange;
+    radios() {
+        return Array.from(this.el.querySelectorAll('bs-radio'));
+    }
+    onValueOrName() {
+        this.sync(true);
+    }
+    componentWillLoad() {
+        this.sync(false);
+    }
+    /** Shared name on every radio, then reconcile checked state with `value`. */
+    sync(fromValue) {
+        const radios = this.radios();
+        const name = this.name ?? this.id;
+        radios.forEach(r => (r.name = name));
+        const checked = radios.filter(r => r.checked);
+        let target;
+        if (fromValue || (this.value !== undefined && this.value !== null)) {
+            target = radios.find(r => r.value === this.value);
+        }
+        if (!target)
+            target = checked[0];
+        if (!target && this.selectFirst)
+            target = radios.find(r => !r.disabled);
+        radios.forEach(r => {
+            const should = r === target;
+            if (r.checked !== should)
+                r.checked = should;
+        });
+        const next = target?.value;
+        if (next !== this.value && (target || fromValue))
+            this.value = next;
+    }
+    onSlotchange = () => this.sync(false);
+    onRadioChange(ev) {
+        if (ev.target === this.el)
+            return; // our own event
+        ev.stopImmediatePropagation();
+        this.value = ev.detail;
+        this.bsChange.emit(ev.detail);
+    }
+    render() {
+        const labelId = `${this.id}-label`;
+        const descId = `${this.id}-desc`;
+        const note = this.error || this.description;
+        return (h("div", { key: 'c7083540ebf734f8b78a3ee20480e32d5448f2d2', part: "group", class: { 'bs-radio-group': true, 'bs-radio-group--error': !!this.error }, role: "radiogroup", "aria-labelledby": this.label ? labelId : undefined, "aria-describedby": note ? descId : undefined, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined }, this.label && (h("span", { key: '604f60844e305a5057f42e2cebbf5ec80d04952d', id: labelId, part: "label", class: "bs-radio-group__label" }, this.label, this.required && h("span", { key: '196ce4747d209610f45afe5eabc1d629220e9560', "aria-hidden": "true" }, " *"))), h("div", { key: 'b3c30a8aa04a56227033d76f905166a7c556ed4a', part: "options", class: "bs-radio-group__options" }, h("slot", { key: '70f9d26d4c52ce386a3c25fe9ca7297fe49ea77c', onSlotchange: this.onSlotchange })), note && (h("span", { key: '9252a1a05bfe98719612aac2a6ff5c72ddff7621', id: descId, part: this.error ? 'error' : 'description', class: this.error ? 'bs-radio-group__error' : 'bs-radio-group__description' }, this.error || this.description))));
+    }
+    static get is() { return "bs-radio-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-radio-group.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-radio-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Visible group label, also the accessible name of the group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper text under the options. Replaced by `error` while that is set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "error": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Error message. Sets `aria-invalid`, replaces the helper text and is announced with the group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error"
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsRadioGroupOrientation",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "BsRadioGroupOrientation": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-radio-group/bs-radio-group.tsx",
+                            "id": "src/components/bs-radio-group/bs-radio-group.tsx::BsRadioGroupOrientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout of the radios."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "orientation",
+                "defaultValue": "'vertical'"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "`name` given to every radio in the group. Defaults to a generated, unique name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "`value` of the checked radio. Setting it checks the matching radio (and unchecks the rest)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks the group as required: sets `aria-required` and shows an asterisk after the label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "selectFirst": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Check the first enabled radio when none is checked, so a choice is always made. Off by default so a form can start empty."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "select-first",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsChange",
+                "name": "bsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted with the new `value` when the user checks a radio. Replaces the radios' own `bsChange`, which does not reach listeners outside the group."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "onValueOrName"
+            }, {
+                "propName": "name",
+                "methodName": "onValueOrName"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "bsChange",
+                "method": "onRadioChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

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

@@ -0,0 +1,35 @@
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { componentDescription } from "../../stories-utils";
+const meta = {
+    title: 'Components/bs-radio-group',
+    parameters: { docs: { description: { component: componentDescription('bs-radio-group') } } },
+    render: args => html `
+    <bs-radio-group
+      label=${args.label}
+      description=${ifDefined(args.description || undefined)}
+      error=${ifDefined(args.error || undefined)}
+      orientation=${args.orientation}
+      ?required=${args.required}
+      value=${ifDefined(args.value || undefined)}
+    >
+      <bs-radio value="monthly">Monthly</bs-radio>
+      <bs-radio value="yearly">Yearly</bs-radio>
+      <bs-radio value="never">Never</bs-radio>
+    </bs-radio-group>
+  `,
+    argTypes: {
+        label: { control: 'text' },
+        description: { control: 'text' },
+        error: { control: 'text' },
+        orientation: { control: 'inline-radio', options: ['vertical', 'horizontal'] },
+        required: { control: 'boolean' },
+        value: { control: 'select', options: ['', 'monthly', 'yearly', 'never'] },
+    },
+    args: { label: 'Billing period', description: '', error: '', orientation: 'vertical', required: false, value: 'monthly' },
+};
+export default meta;
+export const Default = {};
+export const Horizontal = { args: { orientation: 'horizontal' } };
+export const WithHelperText = { name: 'With helper text', args: { description: 'You can change this later.', required: true } };
+export const WithError = { name: 'With error', args: { value: '', required: true, error: 'Choose a billing period.' } };

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;
+}

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: '7a50bc82ef24d834acb7158e7b63ff688eb7972b', "aria-hidden": "true" }, h("div", { key: 'f20c8ceacc9b68569c1845f82922f5af74146d4c', 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;