@brandsync/wc 1.19.0 → 1.20.0

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: '4e02263a2d377be0989f3469555f19f9b4933840', 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: '00523f734a7d994cf448df045a73d4588da1c00c', part: "ripple" }), h("span", { key: '2d030afeec12e555c72d1659f0ac7d2ecb4df70a', part: "icon", class: { 'bs-search-item__icon': true, 'bs-search-item__icon--hidden': !this.hasIcon } }, h("slot", { key: 'ab14918cfcb5425b33c1489232ea18bf940dc49d', name: "icon", onSlotchange: this.slotFilled(v => (this.hasIcon = v)) })), h("span", { key: 'eee1f17e15fa4195f3a65fa7bc7f3ad12d839b7c', part: "content", class: "bs-search-item__content" }, h("span", { key: '75cd5ada24d085dce96331782c4e71317d0d8ed4', part: "label", class: "bs-search-item__label" }, h("slot", { key: '47fbf5d269d2a23eb824ba32084886efdad2aa96' })), h("span", { key: 'b2e4154147a02059d08505bc9f452931bbcff2bf', part: "description", class: { 'bs-search-item__description': true, 'bs-search-item__description--hidden': !this.hasDescription } }, h("slot", { key: '8b72f89b59fa15c21c0d02b3db88b3e291d72f81', name: "description", onSlotchange: this.slotFilled(v => (this.hasDescription = v)) }))), h("span", { key: 'e0b5675b2d71fe5e740fd90ff2aea5eecca2f9eb', part: "trailing", class: { 'bs-search-item__trailing': true, 'bs-search-item__trailing--hidden': !this.hasTrailingSlot && !this.trailing } }, h("slot", { key: 'c0dc999d7b4da6b670690b72071f5b844b86b35b', 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-select/bs-select.cmp.test.js

@@ -0,0 +1,108 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+const options = [
+    { label: 'Apple', value: 'apple' },
+    { label: 'Banana', value: 'banana' },
+    { label: 'Blueberry', value: 'blueberry', disabled: true },
+    { label: 'Cherry', value: 'cherry' },
+];
+const setup = async (props = {}) => {
+    const r = await render(h("bs-select", { label: "Fruit", options: options, ...props }));
+    const field = r.root.shadowRoot.querySelector('[role="combobox"]');
+    const key = async (k) => {
+        field.dispatchEvent(new KeyboardEvent('keydown', { key: k, bubbles: true, composed: true, cancelable: true }));
+        await r.waitForChanges();
+    };
+    return { ...r, field, key };
+};
+describe('bs-select', () => {
+    it('renders a labelled combobox with a hidden listbox and options', async () => {
+        const { root, field } = await setup();
+        expect(field.getAttribute('aria-expanded')).toBe('false');
+        expect(field.getAttribute('aria-haspopup')).toBe('listbox');
+        const labelId = root.shadowRoot.querySelector('[part="label"]').id;
+        expect(field.getAttribute('aria-labelledby')).toBe(labelId);
+        const list = root.shadowRoot.querySelector('[role="listbox"]');
+        expect(list.hidden).toBe(true);
+        expect(field.getAttribute('aria-controls')).toBe(list.id);
+        expect(list.querySelectorAll('[role="option"]').length).toBe(4);
+    });
+    it('shows the placeholder, then the selected label', async () => {
+        const { root } = await setup({ placeholder: 'Pick one', value: 'cherry' });
+        expect(root.shadowRoot.querySelector('[part="value"]').textContent).toBe('Cherry');
+        const r2 = await setup({ placeholder: 'Pick one' });
+        expect(r2.root.shadowRoot.querySelector('[part="value"]').textContent).toBe('Pick one');
+    });
+    it('opens on click and selects an option, emitting bsChange', async () => {
+        const { root, field, waitForChanges, spyOnEvent } = await setup();
+        const spy = spyOnEvent('bsChange');
+        field.click();
+        await waitForChanges();
+        expect(field.getAttribute('aria-expanded')).toBe('true');
+        root.shadowRoot.querySelectorAll('[role="option"]')[3].click();
+        await waitForChanges();
+        expect(root.value).toBe('cherry');
+        expect(root.open).toBe(false);
+        expect(spy).toHaveReceivedEventDetail('cherry');
+        expect(root.shadowRoot.querySelector('[aria-selected="true"]').textContent).toContain('Cherry');
+    });
+    it('does not select a disabled option', async () => {
+        const { root, field, waitForChanges } = await setup();
+        field.click();
+        await waitForChanges();
+        root.shadowRoot.querySelectorAll('[role="option"]')[2].click();
+        await waitForChanges();
+        expect(root.value).toBe('');
+    });
+    it('keyboard: arrows skip disabled, Enter selects, Home/End, Esc closes', async () => {
+        const { root, field, key } = await setup();
+        await key('ArrowDown');
+        expect(root.open).toBe(true);
+        expect(field.getAttribute('aria-activedescendant')).toContain('-0');
+        await key('ArrowDown');
+        await key('ArrowDown');
+        expect(field.getAttribute('aria-activedescendant')).toContain('-3');
+        await key('Home');
+        expect(field.getAttribute('aria-activedescendant')).toContain('-0');
+        await key('End');
+        expect(field.getAttribute('aria-activedescendant')).toContain('-3');
+        await key('Escape');
+        expect(root.open).toBe(false);
+        await key('Enter');
+        await key('ArrowDown');
+        await key('Enter');
+        expect(root.value).toBe('banana');
+    });
+    it('type-ahead jumps to the matching option', async () => {
+        const { root, key } = await setup();
+        await key('c');
+        expect(root.value).toBe('cherry');
+    });
+    it('reflects error, description, required and disabled', async () => {
+        const { root, field } = await setup({ error: 'Required', required: true });
+        expect(field.getAttribute('aria-invalid')).toBe('true');
+        expect(field.getAttribute('aria-required')).toBe('true');
+        expect(root.shadowRoot.querySelector('[part="error"]').textContent).toBe('Required');
+        const d = await setup({ disabled: true, description: 'Help' });
+        expect(d.field.getAttribute('aria-disabled')).toBe('true');
+        expect(d.field.getAttribute('tabindex')).toBe('-1');
+        d.field.click();
+        await d.waitForChanges();
+        expect(d.root.open).toBe(false);
+        expect(d.root.shadowRoot.querySelector('[part="description"]').textContent).toBe('Help');
+    });
+    it('submits its value with a form', async () => {
+        const { root, waitForChanges } = await render(h("form", null, h("bs-select", { name: "fruit", value: "apple", options: options })));
+        await waitForChanges();
+        const fd = new FormData(root);
+        expect(fd.get('fruit')).toBe('apple');
+    });
+    it('long lists scroll inside the listbox', async () => {
+        const many = Array.from({ length: 50 }, (_, i) => ({ label: `Option ${i}`, value: `${i}` }));
+        const { root, field, waitForChanges } = await setup({ options: many });
+        field.click();
+        await waitForChanges();
+        const list = root.shadowRoot.querySelector('[role="listbox"]');
+        expect(getComputedStyle(list).overflowY).toBe('auto');
+        expect(list.scrollHeight).toBeGreaterThan(list.clientHeight);
+    });
+});