@brandsync/wc 1.7.0 → 1.8.0

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

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

@@ -45,6 +45,11 @@ export class BsProgress {
      * `indeterminate` never shows a label regardless of this prop, since there's no percentage to
      * show. Defaults to `true`. */
     showLabel = true;
+    /** Accessible name for the progress bar (e.g. "Uploading report"). Required for assistive tech --
+     * a `role="progressbar"` with no name is an axe-core `aria-progressbar-name` violation. Setting
+     * `aria-label` on the host doesn't reach the inner element across the shadow boundary, so this
+     * prop binds it directly -- same pattern as `bs-button`'s `ariaLabel`. */
+    ariaLabel = null;
     get clampedValue() {
         return Math.min(100, Math.max(0, this.value));
     }
@@ -64,7 +69,7 @@ export class BsProgress {
         const isDeterminate = this.type === 'determinate';
         const value = this.clampedValue;
         const dashOffset = circumference * (1 - value / 100);
-        return (h("div", { key: '0534b118c5954b821dc3e9f1bb0b4a0ac746633a', part: "container", class: "bs-progress" }, h("div", { key: 'fd20dfde6fe2de74c0622589294a066f526fe213', class: "bs-progress__box", style: { width: `${diameter}px`, height: `${diameter}px` }, role: "progressbar", "aria-valuemin": isDeterminate ? '0' : undefined, "aria-valuemax": isDeterminate ? '100' : undefined, "aria-valuenow": isDeterminate ? String(value) : undefined, "aria-busy": isDeterminate ? undefined : 'true' }, isDeterminate ? (h("svg", { class: "bs-progress__ring", width: diameter, height: diameter, viewBox: `0 0 ${diameter} ${diameter}` }, h("circle", { part: "track", class: "bs-progress__track", cx: diameter / 2, cy: diameter / 2, r: radius, "stroke-width": this.strokeWidth, fill: "none" }), h("circle", { part: "arc", class: "bs-progress__arc", cx: diameter / 2, cy: diameter / 2, r: radius, "stroke-width": this.strokeWidth, fill: "none", "stroke-linecap": "round", "stroke-dasharray": circumference, "stroke-dashoffset": dashOffset }))) : (
+        return (h("div", { key: 'add8dfafdbee4eaa9712c6e2ba6ddff6f8f6c47f', part: "container", class: "bs-progress" }, h("div", { key: 'fd89c73aa247fc3770187a45dc4681857e257d4e', class: "bs-progress__box", style: { width: `${diameter}px`, height: `${diameter}px` }, role: "progressbar", "aria-label": this.ariaLabel, "aria-valuemin": isDeterminate ? '0' : undefined, "aria-valuemax": isDeterminate ? '100' : undefined, "aria-valuenow": isDeterminate ? String(value) : undefined, "aria-busy": isDeterminate ? undefined : 'true' }, isDeterminate ? (h("svg", { class: "bs-progress__ring", width: diameter, height: diameter, viewBox: `0 0 ${diameter} ${diameter}` }, h("circle", { part: "track", class: "bs-progress__track", cx: diameter / 2, cy: diameter / 2, r: radius, "stroke-width": this.strokeWidth, fill: "none" }), h("circle", { part: "arc", class: "bs-progress__arc", cx: diameter / 2, cy: diameter / 2, r: radius, "stroke-width": this.strokeWidth, fill: "none", "stroke-linecap": "round", "stroke-dasharray": circumference, "stroke-dashoffset": dashOffset }))) : (
         // Figma's indeterminate ring is a fading "comet tail" (transparent -> solid color),
         // not a flat-colored partial arc -- SVG has no angular/conic gradient primitive, so a
         // CSS conic-gradient (color varying by angle) + a radial-gradient mask (carving the
@@ -73,7 +78,7 @@ export class BsProgress {
         h("div", { part: "arc", class: "bs-progress__spinner", style: {
                 '--bs-progress-spinner-stroke-width': `${this.strokeWidth}px`,
                 '--bs-progress-spinner-sweep': `${INDETERMINATE_SWEEP_DEGREES}deg`,
-            } }))), isDeterminate && this.showLabel && (h("span", { key: '20b74322a926ff40188de525103f91992d9bc508', part: "label", class: `bs-progress__label bs-progress__label--${this.size}` }, value, "%"))));
+            } }))), isDeterminate && this.showLabel && (h("span", { key: '9c86dc195204f28c06e05bf09f823241bf9f3a86', part: "label", class: `bs-progress__label bs-progress__label--${this.size}` }, value, "%"))));
     }
     static get is() { return "bs-progress"; }
     static get encapsulation() { return "shadow"; }
@@ -206,6 +211,26 @@ export class BsProgress {
                 "reflect": false,
                 "attribute": "show-label",
                 "defaultValue": "true"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the progress bar (e.g. \"Uploading report\"). Required for assistive tech --\na `role=\"progressbar\"` with no name is an axe-core `aria-progressbar-name` violation. Setting\n`aria-label` on the host doesn't reach the inner element across the shadow boundary, so this\nprop binds it directly -- same pattern as `bs-button`'s `ariaLabel`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "null"
             }
         };
     }

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

@@ -30,14 +30,9 @@ describe('bs-radio', () => {
         expect(input).toEqualAttribute('name', 'fruit');
         expect(input).toEqualAttribute('value', 'apple');
     });
-    // NOTE: each <bs-radio> has its own shadow root, so its native <input> lives in its own separate
-    // DOM tree. Per the HTML spec, a "radio button group" is scoped to a single tree -- shadow DOM
-    // boundaries mean same-`name` inputs in *different* <bs-radio> instances are NOT part of the same
-    // native radio group, so clicking one does not natively uncheck another. This is a real, tested
-    // limitation of composing native <input type="radio"> inside separate shadow roots, not a bug in
-    // this component -- see bs-radio.mdx's Accessibility section for the documented gap. Within a
-    // single instance's own shadow root the native input still behaves like a normal radio input.
-    it('same-name bs-radio instances do NOT natively uncheck each other, since each lives in its own shadow root', async () => {
+    // Native same-name grouping can't cross each <bs-radio>'s own shadow root, so the component
+    // implements mutual exclusion itself (see bs-radio.tsx's `name` prop doc).
+    it('same-name bs-radio instances uncheck each other', async () => {
         const { root, waitForChanges } = await render(h("div", null, h("bs-radio", { name: "fruit", value: "apple" }), h("bs-radio", { name: "fruit", value: "banana" })));
         const [first, second] = Array.from(root.querySelectorAll('bs-radio'));
         const firstInput = first.shadowRoot.querySelector('input');
@@ -48,8 +43,7 @@ describe('bs-radio', () => {
         secondInput.click();
         await waitForChanges();
         expect(secondInput.checked).toBe(true);
-        // Real (shadow-DOM-scoped) native behavior: the first input is untouched, not unchecked.
-        expect(firstInput.checked).toBe(true);
+        expect(firstInput.checked).toBe(false);
     });
     describe('disabled', () => {
         it('sets the disabled attribute on the native input', async () => {

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

@@ -34,7 +34,7 @@
 .bs-radio__input {
   position: absolute;
   top: 0;
-  left: 0;
+  inset-inline-start: 0;
   width: 100%;
   height: 100%;
   margin: 0;
@@ -162,3 +162,9 @@
 .bs-radio--disabled .bs-radio__label {
   color: var(--bs-radio-label-disabled);
 }
+
+/* Windows High Contrast: ring and dot in system colors. */
+@media (forced-colors: active) {
+  .bs-radio__circle { border: 2px solid ButtonText; forced-color-adjust: none; background: Canvas; }
+  .bs-radio__dot { background: Highlight; }
+}

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

@@ -22,13 +22,10 @@ import { h } from "@stencil/core";
 export class BsRadio {
     el;
     /** The native radio input's `name` attribute. Passed straight through to the native input inside.
-     * NOTE: because each `bs-radio` renders its own shadow root, native `<input type="radio">`
-     * mutual-exclusion grouping (which the HTML spec scopes to a single DOM tree) does NOT extend
-     * across separate `bs-radio` instances sharing the same `name` -- checking one will not natively
-     * uncheck another. Within a single instance this still behaves like a normal radio input. See
-     * bs-radio.mdx's Accessibility section for this known gap; consumers building a group currently
-     * need to manage mutual exclusivity themselves (e.g. via `bsChange`) until a `bs-radio-group`
-     * wrapper exists. */
+     * Also the group key: `bs-radio` elements sharing a `name` within the same root (document or
+     * shadow root) behave as one radio group -- checking one unchecks the others, arrow keys move
+     * between them, and only one is in the tab order. Native grouping can't cross each radio's own
+     * shadow root, so this component implements it itself. */
     name;
     /** The native radio input's `value` attribute -- read from `event.target.value`, or used when
      * wiring the group up to a form. */
@@ -40,9 +37,65 @@ export class BsRadio {
     disabled = false;
     /** Emitted with this radio's own `value` when it becomes checked via user interaction. Since
      * native same-`name` grouping doesn't cross shadow-root boundaries (see the `name` prop's doc),
-     * a consumer wiring up a group of `bs-radio`s must itself set `checked = false` on the others in
-     * response to this event -- there's no automatic un-checking to rely on here. */
+     * a consumer wiring up a group of `bs-radio`s does not need to un-check the others itself. */
     bsChange;
+    internals;
+    initialChecked = false;
+    /** Whether any radio in this group is checked -- drives roving tabindex (an unchecked radio is
+     * only tabbable while nothing in its group is checked). */
+    groupHasChecked = false;
+    /** Other `bs-radio`s sharing this one's `name` within the same root, in DOM order (including
+     * this one). */
+    groupMembers() {
+        if (!this.name)
+            return [this.el];
+        const root = this.el.getRootNode();
+        return Array.from(root.querySelectorAll('bs-radio')).filter(r => r.name === this.name);
+    }
+    onCheckedChange() {
+        this.internals?.setFormValue?.(this.checked ? this.value ?? 'on' : null);
+        if (this.checked) {
+            this.groupMembers().forEach(r => {
+                if (r !== this.el && r.checked)
+                    r.checked = false;
+            });
+        }
+        this.refreshGroupState();
+    }
+    onAnyRadioChange() {
+        this.refreshGroupState();
+    }
+    refreshGroupState() {
+        this.groupHasChecked = this.groupMembers().some(r => r.checked);
+    }
+    componentWillLoad() {
+        this.initialChecked = this.checked;
+        this.internals?.setFormValue?.(this.checked ? this.value ?? 'on' : null);
+    }
+    componentDidLoad() {
+        this.refreshGroupState();
+    }
+    /** Called by the browser when the surrounding `<form>` is reset. */
+    formResetCallback() {
+        this.checked = this.initialChecked;
+    }
+    /** WAI-ARIA radio group pattern: arrows move selection (and focus) to the previous/next enabled
+     * radio in the group, wrapping at the ends. */
+    onKeyDown = (ev) => {
+        const forward = ev.key === 'ArrowRight' || ev.key === 'ArrowDown';
+        const backward = ev.key === 'ArrowLeft' || ev.key === 'ArrowUp';
+        if (!forward && !backward)
+            return;
+        const members = this.groupMembers().filter(r => !r.disabled);
+        if (members.length < 2)
+            return;
+        ev.preventDefault();
+        const idx = members.indexOf(this.el);
+        const next = members[(idx + (forward ? 1 : -1) + members.length) % members.length];
+        const input = next.shadowRoot?.querySelector('input');
+        input?.click();
+        input?.focus();
+    };
     onChange = (ev) => {
         const checked = ev.target.checked;
         this.checked = checked;
@@ -51,11 +104,12 @@ export class BsRadio {
         }
     };
     render() {
-        return (h("label", { key: '9aed6afb95bd1875b02e96aa17ff9419f15f52df', class: `bs-radio ${this.disabled ? 'bs-radio--disabled' : ''}` }, h("input", { key: 'dd8976d2e0c907d2dc2af45540d3c10abca9abb1', class: "bs-radio__input", type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onChange: this.onChange }), h("span", { key: 'dd68936424c34d8395b1b3540e875a0efb154365', class: "bs-radio__hit-area" }, h("span", { key: 'a5d17ebb7a01851ce3cd0a2acc3c16be911ffc53', class: "bs-radio__state-layer" }, h("span", { key: '46ed4553f672712b4c2fc26b8e229a93bb4ad575', part: "circle", class: `bs-radio__circle ${this.checked ? 'bs-radio__circle--selected' : ''}` }, this.checked && h("span", { key: '18d9f81c031ff77ee4361a0ce8c73665bd6c1b75', part: "dot", class: "bs-radio__dot" })))), h("span", { key: 'a48cfc6d0689e523ab70450853b9fb2450c172e9', part: "label", class: "bs-radio__label" }, h("slot", { key: '7b1a801812fe510eb392c7266e8253bc9408c3db' }))));
+        return (h("label", { key: '84bfc39d5714d15c45936c8150b9bd7473b79574', class: `bs-radio ${this.disabled ? 'bs-radio--disabled' : ''}` }, h("input", { key: '0a118d5e59f4d33b0411f7be0fba08a706cda298', 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: '889dadd67126819c3d39a5823d48be58a9c71f9f', class: "bs-radio__hit-area" }, h("span", { key: '5bbed4d44bcf4d810693b5912a90855d680540d0', class: "bs-radio__state-layer" }, h("span", { key: '509389527b876127ca456900e3bb4aa21c735f72', part: "circle", class: `bs-radio__circle ${this.checked ? 'bs-radio__circle--selected' : ''}` }, this.checked && h("span", { key: '9a7e335f9646eb72fb06fb0ca9436e763c3ad278', part: "dot", class: "bs-radio__dot" })))), h("span", { key: '2017790d3d99355b4eb93e3659c809df58c61065', part: "label", class: "bs-radio__label" }, h("slot", { key: '199450bb26f7966cdd64b04c78e3015300d793c9' }))));
     }
     static get is() { return "bs-radio"; }
     static get encapsulation() { return "shadow"; }
     static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["bs-radio.css"]
@@ -80,11 +134,11 @@ export class BsRadio {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The native radio input's `name` attribute. Passed straight through to the native input inside.\nNOTE: because each `bs-radio` renders its own shadow root, native `<input type=\"radio\">`\nmutual-exclusion grouping (which the HTML spec scopes to a single DOM tree) does NOT extend\nacross separate `bs-radio` instances sharing the same `name` -- checking one will not natively\nuncheck another. Within a single instance this still behaves like a normal radio input. See\nbs-radio.mdx's Accessibility section for this known gap; consumers building a group currently\nneed to manage mutual exclusivity themselves (e.g. via `bsChange`) until a `bs-radio-group`\nwrapper exists."
+                    "text": "The native radio input's `name` attribute. Passed straight through to the native input inside.\nAlso the group key: `bs-radio` elements sharing a `name` within the same root (document or\nshadow root) behave as one radio group -- checking one unchecks the others, arrow keys move\nbetween them, and only one is in the tab order. Native grouping can't cross each radio's own\nshadow root, so this component implements it itself."
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "name"
             },
             "value": {
@@ -142,12 +196,17 @@ export class BsRadio {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "disabled",
                 "defaultValue": "false"
             }
         };
     }
+    static get states() {
+        return {
+            "groupHasChecked": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "bsChange",
@@ -157,7 +216,7 @@ export class BsRadio {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted with this radio's own `value` when it becomes checked via user interaction. Since\nnative same-`name` grouping doesn't cross shadow-root boundaries (see the `name` prop's doc),\na consumer wiring up a group of `bs-radio`s must itself set `checked = false` on the others in\nresponse to this event -- there's no automatic un-checking to rely on here."
+                    "text": "Emitted with this radio's own `value` when it becomes checked via user interaction. Since\nnative same-`name` grouping doesn't cross shadow-root boundaries (see the `name` prop's doc),\na consumer wiring up a group of `bs-radio`s does not need to un-check the others itself."
                 },
                 "complexType": {
                     "original": "string",
@@ -167,4 +226,23 @@ export class BsRadio {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "checked",
+                "methodName": "onCheckedChange"
+            }, {
+                "propName": "value",
+                "methodName": "onCheckedChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "bsChange",
+                "method": "onAnyRadioChange",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
 }

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

@@ -35,19 +35,10 @@ export const DisabledChecked = {
     name: 'Disabled + checked',
     args: { disabled: true, checked: true },
 };
-// Native same-name radio grouping doesn't extend across separate <bs-radio> instances (each has
-// its own shadow root -- see bs-radio.mdx's Accessibility section), so this story manages mutual
-// exclusivity itself by listening for bsChange and unchecking the siblings.
-const onGroupChange = (ev) => {
-    const group = ev.target.closest('[data-radio-group]');
-    group?.querySelectorAll('bs-radio').forEach(radio => {
-        radio.checked = radio === ev.target;
-    });
-};
 export const Group = {
     name: 'Radio group',
     render: () => html `
-    <div data-radio-group style="display: flex; flex-direction: column; gap: 8px;" @bsChange=${onGroupChange}>
+    <div role="radiogroup" aria-label="Options" style="display: flex; flex-direction: column; gap: 8px;">
       <bs-radio name="group-story" value="option-1" checked>Option 1</bs-radio>
       <bs-radio name="group-story" value="option-2">Option 2</bs-radio>
       <bs-radio name="group-story" value="option-3">Option 3</bs-radio>