@brandsync/wc 1.7.0 → 1.9.0

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

@@ -70,7 +70,7 @@
 .bs-dialog__close--floating {
   position: absolute;
   top: var(--bs-spacing-200);
-  right: var(--bs-spacing-200);
+  inset-inline-end: var(--bs-spacing-200);
   z-index: 1;
 }
 
@@ -128,3 +128,7 @@
   justify-content: center;
   text-align: center;
 }
+
+@media (forced-colors: active) {
+  .bs-dialog__dialog { border: 1px solid CanvasText; }
+}

package/dist/collection/components/bs-form-association.cmp.test.js

@@ -0,0 +1,172 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+// Cross-component coverage for native <form> participation (FormData, validation, reset) and the
+// radio group keyboard pattern. Lives beside the components, not in one of them, since it exercises
+// several together inside a real <form>.
+async function renderForm(children) {
+    const { root, waitForChanges } = await render(h("form", null, children));
+    return { form: root, waitForChanges };
+}
+describe('form association', () => {
+    it('bs-input submits its value under name', async () => {
+        const { form, waitForChanges } = await renderForm(h("bs-input", { name: "email", value: "a@b.co" }));
+        await waitForChanges();
+        expect(new FormData(form).get('email')).toBe('a@b.co');
+    });
+    it('bs-input updates FormData as the user types, and resets with the form', async () => {
+        const { form, waitForChanges } = await renderForm(h("bs-input", { name: "q", value: "start" }));
+        const input = form.querySelector('bs-input').shadowRoot.querySelector('input');
+        input.value = 'typed';
+        input.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+        await waitForChanges();
+        expect(new FormData(form).get('q')).toBe('typed');
+        form.reset();
+        await waitForChanges();
+        expect(new FormData(form).get('q')).toBe('start');
+    });
+    it('a required, empty bs-input makes the form invalid', async () => {
+        const { form, waitForChanges } = await renderForm(h("bs-input", { name: "n", required: true }));
+        await waitForChanges();
+        expect(form.checkValidity()).toBe(false);
+    });
+    it('bs-checkbox and bs-switch submit only while checked', async () => {
+        const { form, waitForChanges } = await renderForm(h("div", null, h("bs-checkbox", { name: "terms", value: "yes" }), h("bs-switch", { name: "alerts", checked: true })));
+        await waitForChanges();
+        expect(new FormData(form).get('terms')).toBeNull();
+        expect(new FormData(form).get('alerts')).toBe('on');
+        form.querySelector('bs-checkbox').shadowRoot.querySelector('input').click();
+        await waitForChanges();
+        expect(new FormData(form).get('terms')).toBe('yes');
+        form.reset();
+        await waitForChanges();
+        expect(new FormData(form).get('terms')).toBeNull();
+    });
+    it('a required, unchecked bs-checkbox makes the form invalid', async () => {
+        const { form, waitForChanges } = await renderForm(h("bs-checkbox", { name: "t", required: true }));
+        await waitForChanges();
+        expect(form.checkValidity()).toBe(false);
+    });
+});
+describe('bs-radio group', () => {
+    const group = () => (h("div", null, h("bs-radio", { name: "fruit", value: "a" }), h("bs-radio", { name: "fruit", value: "b" }), h("bs-radio", { name: "fruit", value: "c", disabled: true })));
+    const inputOf = (r) => r.shadowRoot.querySelector('input');
+    it('checking one unchecks the others and submits its value', async () => {
+        const { form, waitForChanges } = await renderForm(group());
+        const [a, b] = Array.from(form.querySelectorAll('bs-radio'));
+        inputOf(a).click();
+        await waitForChanges();
+        inputOf(b).click();
+        await waitForChanges();
+        expect(a.checked).toBe(false);
+        expect(b.checked).toBe(true);
+        expect(new FormData(form).get('fruit')).toBe('b');
+    });
+    it('arrow keys move selection to the next enabled radio, wrapping', async () => {
+        const { form, waitForChanges } = await renderForm(group());
+        const [a, b] = Array.from(form.querySelectorAll('bs-radio'));
+        inputOf(a).click();
+        await waitForChanges();
+        inputOf(a).dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true, composed: true, cancelable: true }));
+        await waitForChanges();
+        expect(b.checked).toBe(true);
+        inputOf(b).dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, composed: true, cancelable: true }));
+        await waitForChanges();
+        expect(a.checked).toBe(true); // skipped the disabled third radio and wrapped
+    });
+    it('only the checked radio is in the tab order once the group has a selection', async () => {
+        const { form, waitForChanges } = await renderForm(group());
+        const [a, b] = Array.from(form.querySelectorAll('bs-radio'));
+        inputOf(a).click();
+        await waitForChanges();
+        expect(inputOf(a).tabIndex).toBe(0);
+        expect(inputOf(b).tabIndex).toBe(-1);
+    });
+});
+describe('bs-button / bs-icon-button inside a form', () => {
+    const click = (el) => el.shadowRoot.querySelector('button').click();
+    it('type="submit" submits the surrounding form (and runs validation first)', async () => {
+        let submits = 0;
+        const { root, waitForChanges } = await render(h("form", { onSubmit: (e) => { e.preventDefault(); submits++; } }, h("bs-input", { name: "n", required: true }), h("bs-button", { type: "submit" }, "Go"), h("bs-icon-button", { type: "submit", ariaLabel: "Go" }, "x")));
+        const form = root;
+        await waitForChanges();
+        click(form.querySelector('bs-button'));
+        click(form.querySelector('bs-icon-button'));
+        expect(submits).toBe(0); // required field empty -> blocked by validation
+        form.querySelector('bs-input').value = 'x';
+        await waitForChanges();
+        click(form.querySelector('bs-button'));
+        click(form.querySelector('bs-icon-button'));
+        expect(submits).toBe(2);
+    });
+    it('type="reset" resets the form; type="button" does neither', async () => {
+        let submits = 0;
+        const { root, waitForChanges } = await render(h("form", { onSubmit: (e) => { e.preventDefault(); submits++; } }, h("bs-input", { name: "q", value: "start" }), h("bs-button", { type: "reset" }, "Reset"), h("bs-button", null, "Plain")));
+        const form = root;
+        await waitForChanges();
+        form.querySelector('bs-input').value = 'changed';
+        await waitForChanges();
+        click(form.querySelectorAll('bs-button')[1]);
+        expect(submits).toBe(0);
+        expect(new FormData(form).get('q')).toBe('changed');
+        click(form.querySelectorAll('bs-button')[0]);
+        await waitForChanges();
+        expect(new FormData(form).get('q')).toBe('start');
+    });
+});
+// The Angular ControlValueAccessors and Vue v-model bindings (generated in stencil.config.ts) read
+// `event.target.value` / `.checked` straight off the host inside the `bsChange` handler. That only
+// works if the host property is already updated when `bsChange` fires -- pin that contract here.
+describe('bsChange framework-binding contract', () => {
+    it('bs-input: host.value is already the new value inside bsChange', async () => {
+        const { root, waitForChanges } = await render(h("bs-input", null));
+        const seen = [];
+        root.addEventListener('bsChange', (e) => seen.push(e.target.value));
+        const input = root.shadowRoot.querySelector('input');
+        input.value = 'hello';
+        input.dispatchEvent(new Event('change', { bubbles: true }));
+        await waitForChanges();
+        expect(seen).toEqual(['hello']);
+    });
+    it('bs-checkbox and bs-switch: host.checked is already updated inside bsChange', async () => {
+        const { root, waitForChanges } = await render(h("div", null, h("bs-checkbox", null), h("bs-switch", null)));
+        const seen = [];
+        root.addEventListener('bsChange', (e) => seen.push(e.target.checked));
+        root.querySelector('bs-checkbox').shadowRoot.querySelector('input').click();
+        root.querySelector('bs-switch').shadowRoot.querySelector('input').click();
+        await waitForChanges();
+        expect(seen).toEqual([true, true]);
+    });
+    it('bs-slider: host.value is already updated inside bsChange', async () => {
+        const { root, waitForChanges } = await render(h("bs-slider", { value: 10 }));
+        const seen = [];
+        root.addEventListener('bsChange', (e) => seen.push(e.target.value));
+        const range = root.shadowRoot.querySelector('input[type="range"]');
+        range.value = '55';
+        range.dispatchEvent(new Event('input', { bubbles: true }));
+        range.dispatchEvent(new Event('change', { bubbles: true }));
+        await waitForChanges();
+        expect(seen.length).toBeGreaterThan(0);
+        expect(seen[seen.length - 1]).toBe(55);
+    });
+});
+const keysOf = (f) => {
+    const keys = [];
+    new FormData(f).forEach((_v, k) => keys.push(k));
+    return keys;
+};
+describe('disabled controls', () => {
+    it('a disabled control is excluded from FormData and validation, like a native disabled input', async () => {
+        const { root, waitForChanges } = await render(h("form", null, h("bs-input", { name: "i", value: "x", required: true, disabled: true }), h("bs-checkbox", { name: "c", checked: true, disabled: true }), h("bs-switch", { name: "s", checked: true, disabled: true }), h("bs-radio", { name: "r", value: "a", checked: true, disabled: true }), h("bs-slider", { name: "v", value: 20, disabled: true })));
+        const form = root;
+        await waitForChanges();
+        expect(keysOf(form)).toEqual([]);
+        expect(form.checkValidity()).toBe(true);
+        Array.from(form.querySelectorAll('bs-input, bs-checkbox, bs-switch, bs-radio, bs-slider')).forEach(el => (el.disabled = false));
+        await waitForChanges();
+        expect(keysOf(form).sort()).toEqual(['c', 'i', 'r', 's', 'v']);
+    });
+    it('a control inside <fieldset disabled> is excluded from FormData', async () => {
+        const { root, waitForChanges } = await render(h("form", null, h("fieldset", { disabled: true }, h("bs-input", { name: "fs", value: "x" }))));
+        await waitForChanges();
+        expect(keysOf(root)).toEqual([]);
+    });
+});

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

@@ -84,7 +84,7 @@
 
 .bs-input__required {
   color: var(--bs-input-error-color);
-  margin-left: 2px;
+  margin-inline-start: 2px;
 }
 
 .bs-input__field {
@@ -148,7 +148,7 @@
   visibility: hidden;
   pointer-events: none;
   position: absolute;
-  right: 0;
+  inset-inline-end: 0;
 }
 
 .bs-input__control::-webkit-textfield-decoration-container {
@@ -282,8 +282,8 @@
 .bs-input__dropdown-menu {
   position: absolute;
   top: calc(100% + var(--bs-input-stack-gap));
-  left: 0;
-  right: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   z-index: 1;
 }
 
@@ -450,3 +450,9 @@
 .bs-input__field--pin.bs-input__field--error .bs-input__pin-cell {
   border-color: var(--bs-input-field-border-error);
 }
+
+/* Windows High Contrast: keep the field boundary visible. */
+@media (forced-colors: active) {
+  .bs-input__control { border: 1px solid FieldText; }
+  .bs-input__control:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
+}

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

@@ -49,6 +49,10 @@ import { h } from "@stencil/core";
 // comments (see stencil.js's parseStyleDocs/parseCssComment), not the class-level JSDoc.
 export class BsInput {
     el;
+    internals;
+    initialValue = '';
+    /** The `name` the value is submitted under in a surrounding `<form>`'s `FormData`. */
+    name;
     /** Current value. Native `input`/`change` events don't cross the Shadow DOM boundary, so this
      * component re-dispatches them as `bsInput`/`bsChange` custom events instead. Mutable so the
      * `number` type's stepper buttons can update it directly. */
@@ -124,9 +128,44 @@ export class BsInput {
      * children, before first render -- see `bs-button`'s `componentWillLoad` for why `slotchange`
      * alone isn't enough for a slot that starts (and stays) empty. */
     componentWillLoad() {
+        this.initialValue = this.value;
+        this.syncFormValue();
         this.hasIcon = this.hasSlottedContent('icon');
         this.hasEndIcon = this.hasSlottedContent('end-icon');
     }
+    onFormStateChange() {
+        this.syncFormValue();
+    }
+    /** Pushes the current value + validity to the surrounding form. `chip` submits one entry per
+     * chip under `name`; every other type submits `value` as a single string. */
+    syncFormValue() {
+        if (!this.internals?.setFormValue)
+            return;
+        if (this.type === 'chip' && this.name) {
+            const data = new FormData();
+            this.chips.forEach(c => data.append(this.name, c));
+            this.internals.setFormValue(data);
+        }
+        else {
+            this.internals.setFormValue(this.value ?? '');
+        }
+        const empty = this.type === 'chip' ? this.chips.length === 0 : !this.value;
+        if (this.required && empty) {
+            this.internals.setValidity({ valueMissing: true }, 'Please fill out this field.');
+        }
+        else {
+            this.internals.setValidity({});
+        }
+    }
+    /** Called by the browser when the surrounding `<form>` is reset. */
+    formResetCallback() {
+        this.value = this.initialValue;
+    }
+    /** Called when the browser restores form state (back/forward navigation, autofill). */
+    formStateRestoreCallback(state) {
+        if (typeof state === 'string')
+            this.value = state;
+    }
     hasSlottedContent(slotName) {
         return Array.from(this.el.childNodes).some(node => node.nodeType === Node.ELEMENT_NODE && node.getAttribute('slot') === slotName);
     }
@@ -138,10 +177,12 @@ export class BsInput {
     };
     onInput = (ev) => {
         const value = ev.target.value;
+        this.value = value;
         this.bsInput.emit(value);
     };
     onChange = (ev) => {
         const value = ev.target.value;
+        this.value = value;
         this.bsChange.emit(value);
     };
     clampNumber(n) {
@@ -236,7 +277,8 @@ export class BsInput {
         if (value && index < this.length - 1) {
             this.pinInputs[index + 1]?.focus();
         }
-        this.bsChange.emit(this.pinInputs.map(i => i?.value ?? '').join(''));
+        this.value = this.pinInputs.map(i => i?.value ?? '').join('');
+        this.bsChange.emit(this.value);
     };
     onPinKeydown = (index) => (ev) => {
         if (ev.key === 'Backspace' && !ev.target.value && index > 0) {
@@ -341,14 +383,15 @@ export class BsInput {
         return (h("div", { part: "field", class: `bs-input__field bs-input__field--pin ${errorClass} ${disabledClass}` }, Array.from({ length: this.length }).map((_, i) => (h("input", { id: i === 0 ? 'control' : undefined, ref: el => (this.pinInputs[i] = el), part: "control", class: "bs-input__pin-cell", type: "text", inputMode: "numeric", maxLength: 1, value: this.value[i] ?? '', disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, onInput: this.onPinInput(i), onKeyDown: this.onPinKeydown(i) })))));
     }
     render() {
-        return (h("div", { key: 'd65ab3191cd18c77385ffbb8b827e6161dafceaf', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
+        return (h("div", { key: '1149cfe8eaa6085007a8d9a963b6c909bb6cda13', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
         // "control" is a fixed id, not a generated one -- safe because Shadow DOM scopes ids
         // to this instance's own shadow root, so it can never collide with another bs-input.
-        h("label", { key: '762c10bb8afcd1f0609ba75b0d6d8162c483b5b5', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (h("span", { key: '9a74743816c07b81b4db39616cee80ef69d60ca1', part: "required", class: "bs-input__required", "aria-hidden": "true" }, "*")))), this.type === 'pin' ? this.renderPinField() : this.type === 'initials' ? this.renderInitialsField() : this.renderField(), this.error ? (h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, h("svg", { part: "error-icon", class: "bs-input__error-icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M8 5V8.5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }), h("circle", { cx: "8", cy: "11", r: "0.75", fill: "currentColor" })), this.error)) : this.description ? (h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
+        h("label", { key: 'd737018c1e1ebcde529710d8ea58c6bed76f2abf', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (h("span", { key: '5993b19cbfcb8725550c1292c00795c8463e554c', part: "required", class: "bs-input__required", "aria-hidden": "true" }, "*")))), this.type === 'pin' ? this.renderPinField() : this.type === 'initials' ? this.renderInitialsField() : this.renderField(), this.error ? (h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, h("svg", { part: "error-icon", class: "bs-input__error-icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M8 5V8.5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }), h("circle", { cx: "8", cy: "11", r: "0.75", fill: "currentColor" })), this.error)) : this.description ? (h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
     }
     static get is() { return "bs-input"; }
     static get encapsulation() { return "shadow"; }
     static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["bs-input.css"]
@@ -361,6 +404,25 @@ export class BsInput {
     }
     static get properties() {
         return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The `name` the value is submitted under in a surrounding `<form>`'s `FormData`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name"
+            },
             "value": {
                 "type": "string",
                 "mutable": true,
@@ -493,7 +555,7 @@ export class BsInput {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "disabled",
                 "defaultValue": "false"
             },
@@ -866,6 +928,21 @@ export class BsInput {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "onFormStateChange"
+            }, {
+                "propName": "type",
+                "methodName": "onFormStateChange"
+            }, {
+                "propName": "chips",
+                "methodName": "onFormStateChange"
+            }, {
+                "propName": "required",
+                "methodName": "onFormStateChange"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "keydown",
@@ -881,4 +958,5 @@ export class BsInput {
                 "passive": false
             }];
     }
+    static get attachInternalsMemberName() { return "internals"; }
 }

package/dist/collection/components/bs-keyboard-nav.cmp.test.js

@@ -0,0 +1,100 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+// Cross-component coverage for WAI-ARIA keyboard patterns (tabs, menu) and slider form submission.
+const key = (el, k) => el.dispatchEvent(new KeyboardEvent('keydown', { key: k, bubbles: true, composed: true, cancelable: true }));
+const btn = (el) => el.shadowRoot.querySelector('button');
+describe('bs-tabs keyboard', () => {
+    const tabs = (orientation = 'horizontal') => (h("bs-tabs", { orientation: orientation }, h("bs-tab", { selected: true }, "One"), h("bs-tab", null, "Two"), h("bs-tab", { disabled: true }, "Three"), h("bs-tab", null, "Four")));
+    it('roving tabindex: only the selected tab is tabbable', async () => {
+        const { root, waitForChanges } = await render(tabs());
+        await waitForChanges();
+        const [a, b] = Array.from(root.querySelectorAll('bs-tab'));
+        expect(btn(a).tabIndex).toBe(0);
+        expect(btn(b).tabIndex).toBe(-1);
+    });
+    it('ArrowRight selects the next enabled tab (skipping disabled) and wraps', async () => {
+        const { root, waitForChanges } = await render(tabs());
+        const els = Array.from(root.querySelectorAll('bs-tab'));
+        key(btn(els[0]), 'ArrowRight');
+        await waitForChanges();
+        expect(els[1].selected).toBe(true);
+        key(btn(els[1]), 'ArrowRight');
+        await waitForChanges();
+        expect(els[3].selected).toBe(true);
+        key(btn(els[3]), 'ArrowRight');
+        await waitForChanges();
+        expect(els[0].selected).toBe(true);
+        expect(btn(els[0]).tabIndex).toBe(0);
+        expect(btn(els[3]).tabIndex).toBe(-1);
+    });
+    it('Home/End jump to first/last enabled tab', async () => {
+        const { root, waitForChanges } = await render(tabs());
+        const els = Array.from(root.querySelectorAll('bs-tab'));
+        key(btn(els[0]), 'End');
+        await waitForChanges();
+        expect(els[3].selected).toBe(true);
+        key(btn(els[3]), 'Home');
+        await waitForChanges();
+        expect(els[0].selected).toBe(true);
+    });
+    it('vertical orientation uses Up/Down and ignores Left/Right', async () => {
+        const { root, waitForChanges } = await render(tabs('vertical'));
+        const els = Array.from(root.querySelectorAll('bs-tab'));
+        key(btn(els[0]), 'ArrowRight');
+        await waitForChanges();
+        expect(els[0].selected).toBe(true);
+        key(btn(els[0]), 'ArrowDown');
+        await waitForChanges();
+        expect(els[1].selected).toBe(true);
+    });
+    it('with nothing selected, the first enabled tab is the tab stop', async () => {
+        const { root, waitForChanges } = await render(h("bs-tabs", null, h("bs-tab", { disabled: true }, "A"), h("bs-tab", null, "B"), h("bs-tab", null, "C")));
+        await waitForChanges();
+        const els = Array.from(root.querySelectorAll('bs-tab'));
+        expect(btn(els[1]).tabIndex).toBe(0);
+        expect(btn(els[2]).tabIndex).toBe(-1);
+    });
+});
+describe('bs-menu keyboard', () => {
+    const menu = () => (h("bs-menu", null, h("bs-menu-item", null, "Edit"), h("bs-menu-item", { disabled: true }, "Copy"), h("bs-menu-item", null, "Delete")));
+    it('ArrowDown/ArrowUp move focus between enabled items, wrapping', async () => {
+        const { root, waitForChanges } = await render(menu());
+        const [a, , c] = Array.from(root.querySelectorAll('bs-menu-item'));
+        btn(a).focus();
+        key(btn(a), 'ArrowDown');
+        await waitForChanges();
+        expect(c.shadowRoot.activeElement).toBe(btn(c));
+        key(btn(c), 'ArrowDown');
+        expect(a.shadowRoot.activeElement).toBe(btn(a));
+        key(btn(a), 'ArrowUp');
+        expect(c.shadowRoot.activeElement).toBe(btn(c));
+    });
+    it('Home/End jump to first/last enabled item', async () => {
+        const { root } = await render(menu());
+        const [a, , c] = Array.from(root.querySelectorAll('bs-menu-item'));
+        btn(a).focus();
+        key(btn(a), 'End');
+        expect(c.shadowRoot.activeElement).toBe(btn(c));
+        key(btn(c), 'Home');
+        expect(a.shadowRoot.activeElement).toBe(btn(a));
+    });
+});
+describe('bs-slider form association', () => {
+    it('submits its value under name and resets with the form', async () => {
+        const { root, waitForChanges } = await render(h("form", null, h("bs-slider", { name: "vol", value: 30 })));
+        const form = root;
+        await waitForChanges();
+        expect(new FormData(form).get('vol')).toBe('30');
+        const slider = form.querySelector('bs-slider');
+        slider.value = 70;
+        await waitForChanges();
+        expect(new FormData(form).get('vol')).toBe('70');
+        form.reset();
+        await waitForChanges();
+        expect(new FormData(form).get('vol')).toBe('30');
+    });
+    it('range type submits start then end under the same name', async () => {
+        const { root, waitForChanges } = await render(h("form", null, h("bs-slider", { name: "price", type: "range", valueStart: 10, valueEnd: 90 })));
+        await waitForChanges();
+        expect(new FormData(root).getAll('price')).toEqual(['10', '90']);
+    });
+});

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

@@ -1,4 +1,5 @@
 import { render, h, describe, it, expect } from "@stencil/vitest";
+import { vi } from "vitest";
 describe('bs-logo', () => {
     it('renders role="img" and aria-label="BrandSync"', async () => {
         const { root } = await render(h("bs-logo", null));
@@ -37,9 +38,9 @@ describe('bs-logo', () => {
             expect(getComputedStyle(darkAsset).display).toBe('none');
         });
         it('shows the dark asset and hides the light one when an ambient dark theme sets --bs-logo-asset-*-display', async () => {
-            // Simulates what src/global/base.css's [data-theme="dark"] rule sets on <html> in a real
-            // app -- setting the same custom properties directly on the render stage container here,
-            // since this isolated component test doesn't load that global stylesheet. CSS custom
+            // Simulates what src/global/base.css's [data-theme="dark"] rule sets, by setting the same
+            // custom properties directly on the render stage container. (The real selector is exercised
+            // in the "follows the real [data-theme="dark"] attribute" tests below.) CSS custom
             // properties inherit through the shadow boundary regardless of where they're defined.
             const { root } = await render(h("bs-logo", null), {
                 stageAttrs: { style: '--bs-logo-asset-light-display: none; --bs-logo-asset-dark-display: block;' },
@@ -50,6 +51,54 @@ describe('bs-logo', () => {
             expect(getComputedStyle(darkAsset).display).not.toBe('none');
         });
     });
+    // The tests above set the --bs-logo-asset-*-display variables by hand. These exercise the real
+    // `[data-theme="dark"]` rule from src/global/base.css (loaded by vitest-setup.ts), i.e. what a
+    // consuming app actually does -- including WHERE the attribute may sit (issue: dark logo on a dark
+    // theme).
+    describe('background="auto" follows the real [data-theme="dark"] attribute', () => {
+        const shown = (root) => ({
+            light: getComputedStyle(root.shadowRoot.querySelector('.bs-logo__asset--light')).display !== 'none',
+            dark: getComputedStyle(root.shadowRoot.querySelector('.bs-logo__asset--dark')).display !== 'none',
+        });
+        it('flips to the dark asset when data-theme="dark" is on <html>', async () => {
+            document.documentElement.setAttribute('data-theme', 'dark');
+            try {
+                const { root } = await render(h("bs-logo", null));
+                expect(shown(root)).toEqual({ light: false, dark: true });
+            }
+            finally {
+                document.documentElement.removeAttribute('data-theme');
+            }
+        });
+        it('flips to the dark asset when data-theme="dark" is on <body>', async () => {
+            document.body.setAttribute('data-theme', 'dark');
+            try {
+                const { root } = await render(h("bs-logo", null));
+                expect(shown(root)).toEqual({ light: false, dark: true });
+            }
+            finally {
+                document.body.removeAttribute('data-theme');
+            }
+        });
+        it('flips to the dark asset when data-theme="dark" is on any ancestor wrapper', async () => {
+            const { root } = await render(h("div", { "data-theme": "dark" }, h("bs-logo", null)));
+            expect(shown(root.querySelector('bs-logo'))).toEqual({ light: false, dark: true });
+        });
+        it('does NOT flip for a logo outside the data-theme="dark" element', async () => {
+            const { root } = await render(h("div", null, h("div", { "data-theme": "dark" }), h("bs-logo", null)));
+            expect(shown(root.querySelector('bs-logo'))).toEqual({ light: true, dark: false });
+        });
+        it('does not follow prefers-color-scheme (only the data-theme attribute)', async () => {
+            const spy = vi.spyOn(window, 'matchMedia').mockImplementation((q) => ({ matches: q.includes('prefers-color-scheme: dark'), media: q, addEventListener: () => undefined, removeEventListener: () => undefined, addListener: () => undefined, removeListener: () => undefined, onchange: null, dispatchEvent: () => false }));
+            try {
+                const { root } = await render(h("bs-logo", null));
+                expect(shown(root)).toEqual({ light: true, dark: false });
+            }
+            finally {
+                spy.mockRestore();
+            }
+        });
+    });
     describe('background="light"/"dark" (explicit)', () => {
         it('pins the light asset even when an ambient dark theme is set', async () => {
             const { root } = await render(h("bs-logo", { background: "light" }), {

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

@@ -18,3 +18,7 @@
   box-shadow: var(--bs-menu-shadow);
   font-family: inherit;
 }
+
+@media (forced-colors: active) {
+  .bs-menu { border: 1px solid CanvasText; }
+}

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

@@ -21,8 +21,30 @@ import { h } from "@stencil/core";
  * @prop --bs-menu-shadow - Elevation shadow of the menu box. Aliased to `--bs-shadow-sm`.
  */
 export class BsMenu {
+    el;
+    /** WAI-ARIA menu pattern: Up/Down move focus between enabled items (wrapping), Home/End jump
+     * to the first/last. Items are the slotted `bs-menu-item` children. */
+    onKeyDown(ev) {
+        if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(ev.key))
+            return;
+        const items = Array.from(this.el.querySelectorAll('bs-menu-item')).filter(i => !i.disabled);
+        if (items.length === 0)
+            return;
+        const current = items.findIndex(i => i === ev.target || i.contains(ev.target));
+        ev.preventDefault();
+        let next;
+        if (ev.key === 'Home')
+            next = 0;
+        else if (ev.key === 'End')
+            next = items.length - 1;
+        else if (ev.key === 'ArrowDown')
+            next = current === -1 ? 0 : (current + 1) % items.length;
+        else
+            next = current === -1 ? items.length - 1 : (current - 1 + items.length) % items.length;
+        items[next].shadowRoot?.querySelector('button')?.focus();
+    }
     render() {
-        return (h("div", { key: '6d24ccbadf6c68bba52b6737e91c4d131fbce331', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: '94cc6884049a7836b3438a2fc112f0a2c7a1473a' })));
+        return (h("div", { key: '4f2995d0f53f85656de8595fb6a9909833c6369d', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: '0824f2a784eb4cfa28a2868f19c056570b56ba63' })));
     }
     static get is() { return "bs-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -36,4 +58,14 @@ export class BsMenu {
             "$": ["bs-menu.css"]
         };
     }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "onKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }