@fluentui/web-components 3.0.0-beta.39 → 3.0.0-beta.40

package/dist/esm/radio-group/radio-group.js

@@ -1,367 +1,470 @@
 import { __decorate } from "tslib";
-import { attr, FASTElement, observable } from '@microsoft/fast-element';
-import { ArrowKeys, Direction, keyArrowDown, keyArrowLeft, keyArrowRight, keyArrowUp, keyEnter, } from '@microsoft/fast-web-utilities';
+import { attr, FASTElement, Observable, observable, Updates } from '@microsoft/fast-element';
+import { findLastIndex } from '@microsoft/fast-web-utilities';
 import { Radio } from '../radio/radio.js';
-import { getDirection } from '../utils/index.js';
+import { getDirection } from '../utils/direction.js';
+import { getRootActiveElement } from '../utils/root-active-element.js';
 import { RadioGroupOrientation } from './radio-group.options.js';
 /**
- * The base class used for constructing a fluent-radio-group custom element
+ * A Radio Group Custom HTML Element.
+ * Implements the {@link https://w3c.github.io/aria/#radiogroup | ARIA `radiogroup` role}.
+ *
  * @public
+ *
+ * @slot - The default slot for the radio group
  */
 export class RadioGroup extends FASTElement {
+    /**
+     * Sets the checked state of the nearest enabled radio when the `checkedIndex` changes.
+     *
+     * @param prev - the previous index
+     * @param next - the current index
+     * @internal
+     */
+    checkedIndexChanged(prev, next) {
+        if (!this.enabledRadios) {
+            return;
+        }
+        this.checkRadio(next);
+    }
+    /**
+     * Sets the `disabled` attribute on all child radios when the `disabled` property changes.
+     *
+     * @param prev - the previous disabled value
+     * @param next - the current disabled value
+     * @internal
+     */
+    disabledChanged(prev, next) {
+        var _a;
+        if (this.$fastController.isConnected) {
+            this.checkedIndex = -1;
+            (_a = this.radios) === null || _a === void 0 ? void 0 : _a.forEach(radio => {
+                radio.disabled = radio.disabledAttribute || this.disabled;
+            });
+            this.restrictFocus();
+        }
+    }
+    /**
+     * Sets the matching radio to checked when the value changes. If no radio matches the value, no radio will be checked.
+     *
+     * @param prev - the previous value
+     * @param next - the current value
+     */
+    initialValueChanged(prev, next) {
+        this.value = next !== null && next !== void 0 ? next : '';
+    }
+    /**
+     * Sets the `name` attribute on all child radios when the `name` property changes.
+     *
+     * @internal
+     */
+    nameChanged(prev, next) {
+        var _a;
+        if (this.isConnected && next) {
+            (_a = this.radios) === null || _a === void 0 ? void 0 : _a.forEach(radio => {
+                radio.name = this.name;
+            });
+        }
+    }
+    /**
+     * Sets the ariaOrientation attribute when the orientation changes.
+     *
+     * @param prev - the previous orientation
+     * @param next - the current orientation
+     * @internal
+     */
+    orientationChanged(prev, next) {
+        var _a;
+        this.elementInternals.ariaOrientation = (_a = this.orientation) !== null && _a !== void 0 ? _a : RadioGroupOrientation.horizontal;
+    }
+    /**
+     * Updates the enabled radios collection when properties on the child radios change.
+     *
+     * @param prev - the previous radios
+     * @param next - the current radios
+     */
+    radiosChanged(prev, next) {
+        const setSize = next === null || next === void 0 ? void 0 : next.length;
+        if (!setSize) {
+            return;
+        }
+        if (!this.name && next.every(x => x.name === next[0].name)) {
+            this.name = next[0].name;
+        }
+        const checkedIndex = findLastIndex(this.enabledRadios, x => x.initialChecked);
+        next.forEach((radio, index) => {
+            var _a;
+            radio.ariaPosInSet = `${index + 1}`;
+            radio.ariaSetSize = `${setSize}`;
+            if (this.initialValue && !this.dirtyState) {
+                radio.checked = radio.value === this.initialValue;
+            }
+            else {
+                radio.checked = index === checkedIndex;
+            }
+            radio.name = (_a = this.name) !== null && _a !== void 0 ? _a : radio.name;
+            radio.disabled = this.disabled || radio.disabledAttribute;
+        });
+        if (!this.dirtyState && this.initialValue) {
+            this.value = this.initialValue;
+        }
+        if (!this.value) {
+            // TODO: Switch to standard `Array.findLastIndex` when TypeScript 5 is available
+            this.checkedIndex = checkedIndex;
+        }
+        // prettier-ignore
+        const radioIds = next.map(radio => radio.id).join(' ').trim();
+        if (radioIds) {
+            this.setAttribute('aria-owns', radioIds);
+        }
+        Updates.enqueue(() => {
+            this.restrictFocus();
+        });
+    }
+    /**
+     *
+     * @param prev - the previous required value
+     * @param next - the current required value
+     */
+    requiredChanged(prev, next) {
+        this.elementInternals.ariaRequired = next ? 'true' : null;
+        this.setValidity();
+    }
+    /**
+     * A collection of child radios that are not disabled.
+     *
+     * @internal
+     */
+    get enabledRadios() {
+        var _a, _b;
+        if (this.disabled) {
+            return [];
+        }
+        return (_b = (_a = this.radios) === null || _a === void 0 ? void 0 : _a.filter(x => !x.disabled)) !== null && _b !== void 0 ? _b : [];
+    }
+    /**
+     * The validation message. Uses the browser's default validation message for native checkboxes if not otherwise
+     * specified (e.g., via `setCustomValidity`).
+     *
+     * @internal
+     */
+    get validationMessage() {
+        var _a, _b;
+        if (this.elementInternals.validationMessage) {
+            return this.elementInternals.validationMessage;
+        }
+        if ((_b = (_a = this.enabledRadios) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.validationMessage) {
+            return this.enabledRadios[0].validationMessage;
+        }
+        if (!this._validationFallbackMessage) {
+            const validationMessageFallbackControl = document.createElement('input');
+            validationMessageFallbackControl.type = 'radio';
+            validationMessageFallbackControl.required = true;
+            validationMessageFallbackControl.checked = false;
+            this._validationFallbackMessage = validationMessageFallbackControl.validationMessage;
+        }
+        return this._validationFallbackMessage;
+    }
+    /**
+     * The element's validity state.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validity | `ElementInternals.validity`} property.
+     */
+    get validity() {
+        return this.elementInternals.validity;
+    }
+    /**
+     * The current value of the checked radio.
+     *
+     * @public
+     */
+    get value() {
+        var _a, _b;
+        Observable.notify(this, 'value');
+        return (_b = (_a = this.enabledRadios.find(x => x.checked)) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : null;
+    }
+    set value(next) {
+        const index = this.enabledRadios.findIndex(x => x.value === next);
+        this.checkedIndex = index;
+        if (this.$fastController.isConnected) {
+            this.setFormValue(next);
+            this.setValidity();
+        }
+        Observable.track(this, 'value');
+    }
+    /**
+     * Sets the checked state of all radios when any radio emits a `change` event.
+     *
+     * @param e - the change event
+     */
+    changeHandler(e) {
+        if (this === e.target) {
+            return true;
+        }
+        this.dirtyState = true;
+        const radioIndex = this.enabledRadios.indexOf(e.target);
+        this.checkRadio(radioIndex);
+        return true;
+    }
+    /**
+     * Checks the radio at the specified index.
+     *
+     * @param index - the index of the radio to check
+     * @internal
+     */
+    checkRadio(index = this.checkedIndex) {
+        let checkedIndex = this.checkedIndex;
+        this.enabledRadios.forEach((item, i) => {
+            const shouldCheck = i === index;
+            item.checked = shouldCheck;
+            if (shouldCheck) {
+                checkedIndex = i;
+            }
+        });
+        this.checkedIndex = checkedIndex;
+        this.setFormValue(this.value);
+        this.setValidity();
+    }
+    /**
+     * Checks the validity of the element and returns the result.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/checkValidity | `HTMLInputElement.checkValidity()`} method.
+     */
+    checkValidity() {
+        return this.elementInternals.checkValidity();
+    }
+    /**
+     * Handles click events for the radio group.
+     *
+     * @param e - the click event
+     * @internal
+     */
+    clickHandler(e) {
+        var _a;
+        if (this === e.target) {
+            (_a = this.enabledRadios[Math.max(0, this.checkedIndex)]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        return true;
+    }
     constructor() {
-        super(...arguments);
+        var _a;
+        super();
         /**
-         * sets radio layout styles
-         *
-         * @public
-         * @remarks
-         * HTML Attribute: stacked
+         * Indicates that the value has been changed by the user.
          */
-        this.stacked = false;
+        this.dirtyState = false;
         /**
-         * The orientation of the group
+         * Disables the radio group and child radios.
          *
          * @public
          * @remarks
-         * HTML Attribute: orientation
+         * HTML Attribute: `disabled`
          */
-        this.orientation = RadioGroupOrientation.horizontal;
-        this.radioChangeHandler = (e) => {
-            const changedRadio = e.target;
-            if (changedRadio.checked) {
-                this.slottedRadioButtons.forEach((radio) => {
-                    if (radio instanceof Radio && radio !== changedRadio) {
-                        radio.checked = false;
-                        if (!this.isInsideFoundationToolbar) {
-                            radio.setAttribute('tabindex', '-1');
-                        }
-                    }
-                });
-                this.selectedRadio = changedRadio;
-                this.value = changedRadio.value;
-                changedRadio.setAttribute('tabindex', '0');
-                this.focusedRadio = changedRadio;
-            }
-            e.stopPropagation();
-        };
-        this.moveToRadioByIndex = (group, index) => {
-            const radio = group[index];
-            if (!this.isInsideToolbar) {
-                radio.setAttribute('tabindex', '0');
-                radio.checked = true;
-                this.selectedRadio = radio;
-            }
-            this.focusedRadio = radio;
-            radio.focus();
-        };
-        this.moveRightOffGroup = () => {
-            var _a;
-            (_a = this.nextElementSibling) === null || _a === void 0 ? void 0 : _a.focus();
-        };
-        this.moveLeftOffGroup = () => {
-            var _a;
-            (_a = this.previousElementSibling) === null || _a === void 0 ? void 0 : _a.focus();
-        };
-        /**
-         * @internal
-         */
-        this.focusOutHandler = (e) => {
-            const group = this.slottedRadioButtons;
-            const radio = e.target;
-            const index = radio !== null ? group.indexOf(radio) : 0;
-            const focusedIndex = this.focusedRadio ? group.indexOf(this.focusedRadio) : -1;
-            if ((focusedIndex === 0 && index === focusedIndex) ||
-                (focusedIndex === group.length - 1 && focusedIndex === index)) {
-                if (!this.selectedRadio) {
-                    this.focusedRadio = group[0];
-                    this.focusedRadio.setAttribute('tabindex', '0');
-                    group.forEach((nextRadio) => {
-                        if (radio instanceof Radio && nextRadio !== this.focusedRadio) {
-                            nextRadio.setAttribute('tabindex', '-1');
-                        }
-                    });
-                }
-                else {
-                    this.focusedRadio = this.selectedRadio;
-                    if (!this.isInsideFoundationToolbar) {
-                        this.selectedRadio.setAttribute('tabindex', '0');
-                        group.forEach((nextRadio) => {
-                            if (nextRadio !== this.selectedRadio) {
-                                nextRadio.setAttribute('tabindex', '-1');
-                            }
-                        });
-                    }
-                }
-            }
-            return true;
-        };
-        /**
-         * @internal
-         */
-        this.handleDisabledClick = (e) => {
-            // prevent focus events on items from the click handler when disabled
-            if (this.disabled) {
-                e.preventDefault();
-                return;
-            }
-            return true;
-        };
+        this.disabled = false;
         /**
+         * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+         *
          * @internal
          */
-        this.clickHandler = (e) => {
-            if (this.disabled) {
-                return;
-            }
-            e.preventDefault();
-            const radio = e.target;
-            if (radio && radio instanceof Radio) {
-                radio.checked = true;
-                radio.setAttribute('tabindex', '0');
-                this.selectedRadio = radio;
-                this.focusedRadio = radio;
-            }
-        };
-        this.shouldMoveOffGroupToTheRight = (index, group, key) => {
-            return index === group.length && this.isInsideToolbar && key === keyArrowRight;
-        };
-        this.shouldMoveOffGroupToTheLeft = (group, key) => {
-            const index = this.focusedRadio ? group.indexOf(this.focusedRadio) - 1 : 0;
-            return index < 0 && this.isInsideToolbar && key === keyArrowLeft;
-        };
-        this.checkFocusedRadio = () => {
-            if (this.focusedRadio !== null && !this.focusedRadio.checked) {
-                this.focusedRadio.checked = true;
-                this.focusedRadio.setAttribute('tabindex', '0');
-                this.focusedRadio.focus();
-                this.selectedRadio = this.focusedRadio;
-            }
-        };
-        this.moveRight = (e) => {
-            const group = this.slottedRadioButtons;
-            let index = 0;
-            index = this.focusedRadio ? group.indexOf(this.focusedRadio) + 1 : 1;
-            if (this.shouldMoveOffGroupToTheRight(index, group, e.key)) {
-                this.moveRightOffGroup();
-                return;
-            }
-            else if (index === group.length) {
-                index = 0;
+        this.elementInternals = this.attachInternals();
+        this.elementInternals.role = 'radiogroup';
+        this.elementInternals.ariaOrientation = (_a = this.orientation) !== null && _a !== void 0 ? _a : RadioGroupOrientation.horizontal;
+    }
+    /**
+     * Focuses the checked radio or the first enabled radio.
+     *
+     * @internal
+     */
+    focus() {
+        var _a;
+        (_a = this.enabledRadios[Math.max(0, this.checkedIndex)]) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    /**
+     * Enables tabbing through the radio group when the group receives focus.
+     *
+     * @param e - the focus event
+     * @internal
+     */
+    focusinHandler(e) {
+        if (!this.disabled) {
+            this.enabledRadios.forEach(radio => {
+                radio.tabIndex = 0;
+            });
+        }
+        return true;
+    }
+    /**
+     * Sets the tabindex of the radios based on the checked state when the radio group loses focus.
+     *
+     * @param e - the focusout event
+     * @internal
+     */
+    focusoutHandler(e) {
+        var _a, _b;
+        if (((_a = this.radios) === null || _a === void 0 ? void 0 : _a.includes(e.relatedTarget)) && ((_b = this.radios) === null || _b === void 0 ? void 0 : _b.some(x => x.checked))) {
+            this.restrictFocus();
+        }
+        return true;
+    }
+    formResetCallback() {
+        this.dirtyState = false;
+        this.checkedIndex = -1;
+        this.setFormValue(this.value);
+        this.setValidity();
+    }
+    getEnabledIndexInBounds(index, upperBound = this.enabledRadios.length) {
+        if (upperBound === 0) {
+            return -1;
+        }
+        return (index + upperBound) % upperBound;
+    }
+    /**
+     * Handles keydown events for the radio group.
+     *
+     * @param e - the keyboard event
+     * @internal
+     */
+    keydownHandler(e) {
+        var _a, _b;
+        const isRtl = getDirection(this) === 'rtl';
+        const checkedIndex = (_a = this.enabledRadios.findIndex(x => x === getRootActiveElement(this))) !== null && _a !== void 0 ? _a : this.checkedIndex;
+        let increment = 0;
+        switch (e.key) {
+            case 'ArrowLeft': {
+                increment = isRtl ? 1 : -1;
+                break;
             }
-            /* looping to get to next radio that is not disabled */
-            /* matching native radio/radiogroup which does not select an item if there is only 1 in the group */
-            while (index < group.length && group.length > 1) {
-                if (!group[index].disabled) {
-                    this.moveToRadioByIndex(group, index);
-                    break;
-                }
-                else if (this.focusedRadio && index === group.indexOf(this.focusedRadio)) {
-                    break;
-                }
-                else if (index + 1 >= group.length) {
-                    if (this.isInsideToolbar) {
-                        break;
-                    }
-                    else {
-                        index = 0;
-                    }
-                }
-                else {
-                    index += 1;
-                }
+            case 'ArrowUp': {
+                increment = -1;
+                break;
             }
-        };
-        this.moveLeft = (e) => {
-            const group = this.slottedRadioButtons;
-            let index = 0;
-            index = this.focusedRadio ? group.indexOf(this.focusedRadio) - 1 : 0;
-            index = index < 0 ? group.length - 1 : index;
-            if (this.shouldMoveOffGroupToTheLeft(group, e.key)) {
-                this.moveLeftOffGroup();
-                return;
+            case 'ArrowRight': {
+                increment = isRtl ? -1 : 1;
+                break;
             }
-            /* looping to get to next radio that is not disabled */
-            while (index >= 0 && group.length > 1) {
-                if (!group[index].disabled) {
-                    this.moveToRadioByIndex(group, index);
-                    break;
-                }
-                else if (this.focusedRadio && index === group.indexOf(this.focusedRadio)) {
-                    break;
-                }
-                else if (index - 1 < 0) {
-                    index = group.length - 1;
-                }
-                else {
-                    index -= 1;
-                }
+            case 'ArrowDown': {
+                increment = 1;
+                break;
             }
-        };
-        /**
-         * keyboard handling per https://w3c.github.io/aria-practices/#for-radio-groups-not-contained-in-a-toolbar
-         * navigation is different when there is an ancestor with role='toolbar'
-         *
-         * @internal
-         */
-        this.keydownHandler = (e) => {
-            const key = e.key;
-            if (key in ArrowKeys && (this.isInsideFoundationToolbar || this.disabled)) {
-                return true;
+            case 'Tab': {
+                this.restrictFocus();
+                break;
             }
-            switch (key) {
-                case keyEnter: {
-                    this.checkFocusedRadio();
-                    break;
-                }
-                case keyArrowRight:
-                case keyArrowDown: {
-                    if (this.direction === Direction.ltr) {
-                        this.moveRight(e);
-                    }
-                    else {
-                        this.moveLeft(e);
-                    }
-                    break;
-                }
-                case keyArrowLeft:
-                case keyArrowUp: {
-                    if (this.direction === Direction.ltr) {
-                        this.moveLeft(e);
-                    }
-                    else {
-                        this.moveRight(e);
-                    }
-                    break;
-                }
-                default: {
-                    return true;
-                }
+            case ' ': {
+                this.checkRadio();
+                break;
             }
-        };
-    }
-    nameChanged() {
-        if (this.slottedRadioButtons) {
-            this.slottedRadioButtons.forEach((radio) => {
-                radio.setAttribute('name', this.name);
-            });
         }
-    }
-    valueChanged() {
-        if (this.slottedRadioButtons) {
-            this.slottedRadioButtons.forEach((radio) => {
-                if (radio instanceof Radio) {
-                    if (radio.value === this.value) {
-                        radio.checked = true;
-                        this.selectedRadio = radio;
-                    }
-                }
-            });
+        if (!increment) {
+            return true;
         }
-        this.$emit('change');
+        const nextIndex = checkedIndex + increment;
+        this.checkedIndex = this.getEnabledIndexInBounds(nextIndex);
+        (_b = this.enabledRadios[this.checkedIndex]) === null || _b === void 0 ? void 0 : _b.focus();
     }
-    slottedRadioButtonsChanged(oldValue, newValue) {
-        if (this.slottedRadioButtons && this.slottedRadioButtons.length > 0) {
-            this.setupRadioButtons();
+    /**
+     *
+     * @param e - the disabled event
+     */
+    disabledRadioHandler(e) {
+        if (e.detail === true && e.target.checked) {
+            this.checkedIndex = -1;
         }
     }
-    get parentToolbar() {
-        return this.closest('[role="toolbar"]');
-    }
-    get isInsideToolbar() {
-        var _a;
-        return ((_a = this.parentToolbar) !== null && _a !== void 0 ? _a : false);
+    /**
+     * Reports the validity of the element.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/reportValidity | `HTMLInputElement.reportValidity()`} method.
+     */
+    reportValidity() {
+        return this.elementInternals.reportValidity();
     }
-    get isInsideFoundationToolbar() {
-        var _a;
-        return !!((_a = this.parentToolbar) === null || _a === void 0 ? void 0 : _a.hasOwnProperty('$fastController'));
+    /**
+     * Resets the `tabIndex` for all child radios when the radio group loses focus.
+     *
+     * @internal
+     */
+    restrictFocus() {
+        let activeIndex = Math.max(this.checkedIndex, 0);
+        const focusedRadioIndex = this.enabledRadios.indexOf(getRootActiveElement(this));
+        if (focusedRadioIndex !== -1) {
+            activeIndex = focusedRadioIndex;
+        }
+        activeIndex = this.getEnabledIndexInBounds(activeIndex);
+        this.enabledRadios.forEach((item, index) => {
+            item.tabIndex = index === activeIndex ? 0 : -1;
+        });
     }
     /**
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue | `ElementInternals.setFormValue()`} method.
+     *
      * @internal
      */
-    connectedCallback() {
-        super.connectedCallback();
-        this.direction = getDirection(this);
-        this.setupRadioButtons();
+    setFormValue(value, state) {
+        this.elementInternals.setFormValue(value, value !== null && value !== void 0 ? value : state);
     }
-    disconnectedCallback() {
-        this.slottedRadioButtons.forEach((radio) => {
-            if (radio instanceof Radio) {
-                radio.removeEventListener('change', this.radioChangeHandler);
+    /**
+     * Sets the validity of the element.
+     *
+     * @param flags - Validity flags to set.
+     * @param message - Optional message to supply. If not provided, the element's `validationMessage` will be used.
+     * @param anchor - Optional anchor to use for the validation message.
+     *
+     * @internal
+     */
+    setValidity(flags, message, anchor) {
+        if (this.$fastController.isConnected) {
+            if (this.disabled || !this.required) {
+                this.elementInternals.setValidity({});
+                return;
             }
-        });
-    }
-    setupRadioButtons() {
-        const checkedRadios = this.slottedRadioButtons.filter((radio) => {
-            return radio.hasAttribute('checked');
-        });
-        const numberOfCheckedRadios = checkedRadios ? checkedRadios.length : 0;
-        if (numberOfCheckedRadios > 1) {
-            const lastCheckedRadio = checkedRadios[numberOfCheckedRadios - 1];
-            lastCheckedRadio.checked = true;
+            this.elementInternals.setValidity({ valueMissing: this.required && !this.value, ...flags }, message !== null && message !== void 0 ? message : this.validationMessage, anchor !== null && anchor !== void 0 ? anchor : this.enabledRadios[0]);
         }
-        let foundMatchingVal = false;
-        this.slottedRadioButtons.forEach((radio) => {
-            if (radio instanceof Radio) {
-                if (this.name !== undefined) {
-                    radio.setAttribute('name', this.name);
-                }
-                if (this.value && this.value === radio.value) {
-                    this.selectedRadio = radio;
-                    this.focusedRadio = radio;
-                    radio.checked = true;
-                    radio.setAttribute('tabindex', '0');
-                    foundMatchingVal = true;
-                }
-                else {
-                    if (!this.isInsideFoundationToolbar) {
-                        radio.setAttribute('tabindex', '-1');
-                    }
-                    radio.checked = false;
-                }
-                radio.addEventListener('change', this.radioChangeHandler);
-            }
+    }
+    /**
+     * Updates the collection of child radios when the slot changes.
+     *
+     * @param e - the slot change event
+     * @internal
+     */
+    slotchangeHandler(e) {
+        Updates.enqueue(() => {
+            this.radios = [...this.querySelectorAll('*')].filter(x => x instanceof Radio);
         });
-        if (this.value === undefined && this.slottedRadioButtons.length > 0) {
-            const checkedRadios = this.slottedRadioButtons.filter((radio) => {
-                return radio.hasAttribute('checked');
-            });
-            const numberOfCheckedRadios = checkedRadios !== null ? checkedRadios.length : 0;
-            if (numberOfCheckedRadios > 0 && !foundMatchingVal) {
-                const lastCheckedRadio = checkedRadios[numberOfCheckedRadios - 1];
-                lastCheckedRadio.checked = true;
-                this.focusedRadio = lastCheckedRadio;
-                lastCheckedRadio.setAttribute('tabindex', '0');
-            }
-            else {
-                this.slottedRadioButtons[0].setAttribute('tabindex', '0');
-                this.focusedRadio = this.slottedRadioButtons[0];
-            }
-        }
     }
 }
+/**
+ * The form-associated flag.
+ * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
+ *
+ * @public
+ */
+RadioGroup.formAssociated = true;
 __decorate([
-    attr({ mode: 'boolean' })
-], RadioGroup.prototype, "stacked", void 0);
-__decorate([
-    attr({ attribute: 'readonly', mode: 'boolean' })
-], RadioGroup.prototype, "readOnly", void 0);
+    observable
+], RadioGroup.prototype, "checkedIndex", void 0);
 __decorate([
     attr({ attribute: 'disabled', mode: 'boolean' })
 ], RadioGroup.prototype, "disabled", void 0);
 __decorate([
-    attr
-], RadioGroup.prototype, "name", void 0);
+    attr({ attribute: 'value', mode: 'fromView' })
+], RadioGroup.prototype, "initialValue", void 0);
 __decorate([
     attr
-], RadioGroup.prototype, "value", void 0);
+], RadioGroup.prototype, "name", void 0);
 __decorate([
     attr
 ], RadioGroup.prototype, "orientation", void 0);
 __decorate([
     observable
-], RadioGroup.prototype, "childItems", void 0);
+], RadioGroup.prototype, "radios", void 0);
 __decorate([
-    observable
-], RadioGroup.prototype, "slottedRadioButtons", void 0);
+    attr({ mode: 'boolean' })
+], RadioGroup.prototype, "required", void 0);
 //# sourceMappingURL=radio-group.js.map