@brandsync/wc 1.19.0 → 1.20.1

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

@@ -67,4 +67,12 @@ describe('bs-radio', () => {
         const label = root.shadowRoot.querySelector('[part="label"]');
         expect(label.querySelector('slot')).not.toBeNull();
     });
+    it('forwards ariaLabel to the native input as aria-label', async () => {
+        const { root } = await render(h("bs-radio", { name: "g", value: "a", ariaLabel: "Light theme" }));
+        expect(root.shadowRoot.querySelector('input')).toEqualAttribute('aria-label', 'Light theme');
+    });
+    it('has no aria-label by default', async () => {
+        const { root } = await render(h("bs-radio", { name: "g", value: "a" }, "Light"));
+        expect(root.shadowRoot.querySelector('input').hasAttribute('aria-label')).toBe(false);
+    });
 });

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

@@ -31,6 +31,10 @@ export class BsRadio {
     /** The native radio input's `value` attribute -- read from `event.target.value`, or used when
      * wiring the group up to a form. */
     value;
+    /** Accessible name for the radio, set as `aria-label` on the native input. Use it when the radio
+     * has no slotted label text (an icon-only choice) or its visible label lives elsewhere. Same as
+     * `bs-checkbox` / `bs-switch`. */
+    ariaLabel = null;
     /** Whether the radio is checked. Mutable so clicking the label/input sets it directly. */
     checked = false;
     /** Disables the radio: sets the native `disabled` attribute, suppresses hover/focus styling, and
@@ -105,7 +109,7 @@ export class BsRadio {
         }
     };
     render() {
-        return (h("label", { key: '45b7a8896d570c915d86a073ae624cd9d7cba26a', class: `bs-radio ${this.disabled ? 'bs-radio--disabled' : ''}` }, h("input", { key: '1952e33f69903cfc8b85f6e6e3a544381d8785ed', class: "bs-radio__input", type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, tabIndex: this.checked || !this.groupHasChecked ? 0 : -1, onKeyDown: this.onKeyDown, onChange: this.onChange }), h("span", { key: '5c88f70158e39dd51ce403860dd66eebaea1ddf7', class: "bs-radio__hit-area" }, h("bs-ripple", { key: '041e1e5535e9267b551d87f5fd66ccb29d7aa4d3', part: "ripple", class: "bs-radio__ripple", centered: true, triggerSelector: ".bs-radio", disabled: this.disabled }), h("span", { key: '7bbdb3278e70e531fcf5b7f3f237fec299d5282e', class: "bs-radio__state-layer" }, h("span", { key: '7586e3baaeef3900c1f9676524ef69378bbdc121', part: "circle", class: `bs-radio__circle ${this.checked ? 'bs-radio__circle--selected' : ''}` }, this.checked && h("span", { key: '72a0571227b331512de1b89471aa18b909f34b84', part: "dot", class: "bs-radio__dot" })))), h("span", { key: 'c48f3a4b3acb74bb5e71eb561dba2217460af8a0', part: "label", class: "bs-radio__label" }, h("slot", { key: '48fab02676fb747aff3160ddc3cf2e0ee5cd2883' }))));
+        return (h("label", { key: '1dfd58a24e299fe2a26e16dbfeb7d7246b7ae061', class: `bs-radio ${this.disabled ? 'bs-radio--disabled' : ''}` }, h("input", { key: '3fd3733f26e706e37721bc7e5444aeba2f9ca635', class: "bs-radio__input", type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, "aria-label": this.ariaLabel, tabIndex: this.checked || !this.groupHasChecked ? 0 : -1, onKeyDown: this.onKeyDown, onChange: this.onChange }), h("span", { key: 'c3a5a1e790748393f384525413a4cf59be9d1885', class: "bs-radio__hit-area" }, h("bs-ripple", { key: '20b0b6b017644e259a3935ab88b9a512ea9471b7', part: "ripple", class: "bs-radio__ripple", centered: true, triggerSelector: ".bs-radio", disabled: this.disabled }), h("span", { key: '0bed296533c97c2e94260969a5486c76b905e205', class: "bs-radio__state-layer" }, h("span", { key: 'a8f71a9aecdaff2329d3179de0d37797c53a79d6', part: "circle", class: `bs-radio__circle ${this.checked ? 'bs-radio__circle--selected' : ''}` }, this.checked && h("span", { key: '0409d98b080ac54541353068548d149fb22e0dba', part: "dot", class: "bs-radio__dot" })))), h("span", { key: 'ce380ae5ab8ccb1b0b033d04095bb53dd2090be4', part: "label", class: "bs-radio__label" }, h("slot", { key: '39b83b5fd4a2337379cfbba0dd931a93e9c379e3' }))));
     }
     static get is() { return "bs-radio"; }
     static get encapsulation() { return "shadow"; }
@@ -161,6 +165,26 @@ export class BsRadio {
                 "reflect": false,
                 "attribute": "value"
             },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the radio, set as `aria-label` on the native input. Use it when the radio\nhas no slotted label text (an icon-only choice) or its visible label lives elsewhere. Same as\n`bs-checkbox` / `bs-switch`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "null"
+            },
             "checked": {
                 "type": "boolean",
                 "mutable": true,

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

@@ -0,0 +1,85 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import { runAxeCheck } from "../../test/helpers/conventions";
+const radios = (root) => Array.from(root.querySelectorAll('bs-radio'));
+const input = (r) => r.shadowRoot.querySelector('input');
+const group = (root) => root.shadowRoot.querySelector('[role="radiogroup"]');
+const basic = (extra = {}) => (h("bs-radio-group", { label: "Plan", ...extra }, h("bs-radio", { value: "a" }, "A"), h("bs-radio", { value: "b" }, "B"), h("bs-radio", { value: "c" }, "C")));
+describe('bs-radio-group', () => {
+    it('is a radiogroup named by its label', async () => {
+        const { root } = await render(basic());
+        const g = group(root);
+        const label = root.shadowRoot.querySelector('[part="label"]');
+        expect(g).toEqualAttribute('aria-labelledby', label.id);
+        expect(label.textContent).toBe('Plan');
+    });
+    it('gives all radios one shared name', async () => {
+        const { root, waitForChanges } = await render(basic({ name: 'plan' }));
+        await waitForChanges();
+        expect(radios(root).map(r => r.name)).toEqual(['plan', 'plan', 'plan']);
+        const { root: auto } = await render(basic());
+        const names = new Set(radios(auto).map(r => r.name));
+        expect(names.size).toBe(1);
+        expect([...names][0]).toBeTruthy();
+    });
+    it('value checks the matching radio only', async () => {
+        const { root, waitForChanges } = await render(basic({ value: 'b' }));
+        await waitForChanges();
+        expect(radios(root).map(r => r.checked)).toEqual([false, true, false]);
+        root.value = 'c';
+        await waitForChanges();
+        expect(radios(root).map(r => r.checked)).toEqual([false, false, true]);
+    });
+    it('keeps only the first radio when several start checked', async () => {
+        const { root, waitForChanges } = await render(h("bs-radio-group", { label: "x" }, h("bs-radio", { value: "a", checked: true }, "A"), h("bs-radio", { value: "b", checked: true }, "B")));
+        await waitForChanges();
+        expect(radios(root).map(r => r.checked)).toEqual([true, false]);
+        expect(root.value).toBe('a');
+    });
+    it('selectFirst checks the first enabled radio', async () => {
+        const { root, waitForChanges } = await render(h("bs-radio-group", { label: "x", selectFirst: true }, h("bs-radio", { value: "a", disabled: true }, "A"), h("bs-radio", { value: "b" }, "B")));
+        await waitForChanges();
+        expect(radios(root).map(r => r.checked)).toEqual([false, true]);
+    });
+    it('emits one bsChange with the value when a radio is clicked', async () => {
+        const { root, waitForChanges, spyOnEvent } = await render(basic());
+        await waitForChanges();
+        const spy = spyOnEvent('bsChange');
+        input(radios(root)[1]).click();
+        await waitForChanges();
+        expect(spy).toHaveReceivedEventTimes(1);
+        expect(spy).toHaveReceivedEventDetail('b');
+        expect(root.value).toBe('b');
+    });
+    it('arrow keys move the selection', async () => {
+        const { root, waitForChanges } = await render(basic({ value: 'a' }));
+        await waitForChanges();
+        input(radios(root)[0]).dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true, cancelable: true }));
+        await waitForChanges();
+        expect(root.value).toBe('b');
+        expect(radios(root).map(r => r.checked)).toEqual([false, true, false]);
+    });
+    it('shows helper text, replaced by the error, wired with aria-describedby', async () => {
+        const { root, waitForChanges } = await render(basic({ description: 'Pick one' }));
+        const desc = root.shadowRoot.querySelector('[part="description"]');
+        expect(desc.textContent).toBe('Pick one');
+        expect(group(root)).toEqualAttribute('aria-describedby', desc.id);
+        root.error = 'Required';
+        await waitForChanges();
+        expect(root.shadowRoot.querySelector('[part="description"]')).toBeNull();
+        const err = root.shadowRoot.querySelector('[part="error"]');
+        expect(err.textContent).toBe('Required');
+        expect(group(root)).toEqualAttribute('aria-invalid', 'true');
+        expect(group(root)).toEqualAttribute('aria-describedby', err.id);
+    });
+    it('horizontal orientation lays radios in a row', async () => {
+        const { root } = await render(basic({ orientation: 'horizontal' }));
+        expect(getComputedStyle(root.shadowRoot.querySelector('[part="options"]')).flexDirection).toBe('row');
+        const { root: v } = await render(basic());
+        expect(getComputedStyle(v.shadowRoot.querySelector('[part="options"]')).flexDirection).toBe('column');
+    });
+    it('passes axe', async () => {
+        const { root, waitForChanges } = await render(basic({ value: 'a', description: 'Pick one', required: true }));
+        await waitForChanges();
+        await runAxeCheck(root);
+    });
+});

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

@@ -0,0 +1,59 @@
+/**
+ * @prop --bs-radio-group-gap: Gap between the label, the options and the helper/error text. Aliased to --bs-spacing-50.
+ * @prop --bs-radio-group-options-gap: Gap between radios. Aliased to --bs-spacing-0 (vertical) / --bs-spacing-300 (horizontal); each radio already has a 48px hit area.
+ * @prop --bs-radio-group-label-color: Label colour. Aliased to --bs-text-default.
+ * @prop --bs-radio-group-description-color: Helper text colour. Aliased to --bs-text-secondary.
+ * @prop --bs-radio-group-error-color: Error text colour. Aliased to --bs-text-error.
+ */
+:host {
+  display: block;
+
+  --bs-radio-group-gap: var(--bs-spacing-50);
+  --bs-radio-group-options-gap: var(--bs-spacing-0);
+  --bs-radio-group-label-color: var(--bs-text-default);
+  --bs-radio-group-description-color: var(--bs-text-secondary);
+  --bs-radio-group-error-color: var(--bs-text-error);
+}
+
+:host([orientation='horizontal']) {
+  --bs-radio-group-options-gap: var(--bs-spacing-300);
+}
+
+.bs-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-radio-group-gap);
+  font-family: inherit;
+}
+
+.bs-radio-group__label {
+  font-size: var(--bs-font-size-md);
+  font-weight: var(--bs-font-weight-medium);
+  color: var(--bs-radio-group-label-color);
+}
+
+.bs-radio-group__options {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--bs-radio-group-options-gap);
+}
+
+:host([orientation='horizontal']) .bs-radio-group__options {
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.bs-radio-group__description,
+.bs-radio-group__error {
+  font-size: var(--bs-font-size-xs);
+}
+
+.bs-radio-group__description {
+  color: var(--bs-radio-group-description-color);
+}
+
+.bs-radio-group__error {
+  color: var(--bs-radio-group-error-color);
+}

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.js

@@ -101,7 +101,7 @@ export class BsRipple {
         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) })));
+        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"; }

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

@@ -69,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: '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))));
+        return (h("div", { key: 'd06ef043c3fa15df8d3adf3ff62b105dcef5dc1d', part: "container", class: "bs-search-item", role: role, "aria-selected": role ? String(this.active) : undefined, "aria-disabled": this.disabled ? 'true' : undefined }, !this.disabled && h("bs-ripple", { key: 'a9dbae40775340f256d9ac2dd54c43f7144dda41', part: "ripple" }), h("span", { key: '2b80eb34ad0901c6e179770807cca6cd306acd25', part: "icon", class: { 'bs-search-item__icon': true, 'bs-search-item__icon--hidden': !this.hasIcon } }, h("slot", { key: '7fc3bef2ba29179b425b2f470c61b6c70dae01a2', name: "icon", onSlotchange: this.slotFilled(v => (this.hasIcon = v)) })), h("span", { key: '67481270ed566846d87cf12325db53d44f2230d1', part: "content", class: "bs-search-item__content" }, h("span", { key: 'e5993e5796e55fcf03def1d33787fe43a8b652f6', part: "label", class: "bs-search-item__label" }, h("slot", { key: '8aab4906967341b2938a5ec5ecab5794139a4acf' })), h("span", { key: '8a9453d5303e6b89c3abef8864e536726cea9906', part: "description", class: { 'bs-search-item__description': true, 'bs-search-item__description--hidden': !this.hasDescription } }, h("slot", { key: '7f2ef31966d836fbef03d5e4610263081cab87b5', name: "description", onSlotchange: this.slotFilled(v => (this.hasDescription = v)) }))), h("span", { key: 'fcac22f41850199ef148124f9ddbdb3b687418a9', part: "trailing", class: { 'bs-search-item__trailing': true, 'bs-search-item__trailing--hidden': !this.hasTrailingSlot && !this.trailing } }, h("slot", { key: '19167fcf2502d2a16f36f3620f3257a3cd5f5cf3', name: "trailing", onSlotchange: this.slotFilled(v => (this.hasTrailingSlot = v)) }, this.trailing))));
     }
     static get is() { return "bs-search-item"; }
     static get encapsulation() { return "shadow"; }