@riverty/web-components 6.3.0 → 6.3.1

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

@@ -0,0 +1,1023 @@
+import { Host, h } from "@stencil/core";
+import { appendControlToFormData } from "../../utils/formData";
+export class RadioGroup {
+    constructor() {
+        /** Controls the style variation of the radio buttons. */
+        this.variant = 'standard';
+        /**
+         * When set to `true`, automatically focuses the first enabled radio button in the group on mount.
+         * This will focus the selected radio button if one exists, or the first enabled radio button otherwise.
+         */
+        this.autofocus = false;
+        this.validityState = '';
+        this.validityMessage = '';
+        /**
+         * Initial attributes state
+         * */
+        this.initial = {};
+        /** Unique id */
+        this.uniqueId = `r-radio-group-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
+        this.getValidityStateData = element => {
+            let validityState = '';
+            let validityMessage = '';
+            if (element === null)
+                return { validityState, validityMessage };
+            for (const state in element.validity) {
+                if (element.validity[state]) {
+                    validityState = state;
+                    if (this[state + 'Message']) {
+                        validityMessage = this[state + 'Message'];
+                        return { validityState, validityMessage };
+                    }
+                    validityMessage = element.validationMessage;
+                }
+            }
+            return { validityState, validityMessage };
+        };
+        this.validateFormElement = (element = null) => {
+            if (element === null)
+                return;
+            if (this.isNoValidate)
+                return;
+            if (this.error)
+                return;
+            const { validityState, validityMessage } = this.getValidityStateData(element);
+            this.validityState = validityState;
+            this.validityMessage = validityMessage;
+            const isValid = this.validityState === 'valid';
+            this.valid = isValid;
+            this.invalid = !isValid;
+            this.rValidate.emit({
+                state: this.validityState,
+                message: this.validityMessage
+            });
+        };
+        this.onSubmitForm = (event) => {
+            if (this.isNoValidate)
+                return;
+            this.validateFormElement(this.nativeSelectedEl || this.nativeFirstEl);
+            if (!this.hasSelected || this.invalid) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
+        this.onResetForm = () => {
+            this.reset();
+        };
+        this.onLabelClick = () => {
+            const radioButtonEl = this.radioButtonElements[0].shadowRoot.querySelector('[type="radio"]');
+            radioButtonEl === null || radioButtonEl === void 0 ? void 0 : radioButtonEl.focus();
+        };
+        this.contributeToFormData = (event) => {
+            appendControlToFormData(this.host, event.formData);
+        };
+        /**
+         * Handles parent radio group value changes for nested groups.
+         * If this is a nested group with a parentValue specified, it will reset when
+         * the parent group's value changes to something other than the parentValue.
+         */
+        this.onParentGroupChange = (event) => {
+            // Only proceed if this group has a parentValue specified (indicating it's nested)
+            if (!this.parentValue)
+                return;
+            const parentNewValue = event.detail.value;
+            // If parent changed to a different value than our parentValue, reset this nested group
+            if (parentNewValue !== this.parentValue) {
+                this.clearValue();
+                // Emit rReset event to notify that the nested group was automatically reset
+                this.rReset.emit({
+                    element: this.host,
+                    value: null
+                });
+            }
+        };
+    }
+    rChangeAction(event) {
+        // Only handle events from direct children, not from nested radio-groups
+        const targetElement = event.target;
+        const isDirectChild = targetElement.parentElement === this.host;
+        if (!isDirectChild) {
+            return; // Ignore events from nested radio-groups
+        }
+        // Stop event from bubbling to parent radio-groups
+        event.stopPropagation();
+        this.resetValidity();
+        this.setValue(event.detail.value);
+    }
+    /**
+     * Resets the radio group to its initial state.
+     * This method clears the validity state and message, and sets the value and validity
+     * to their initial values.
+     */
+    radioButtonClickAction(event) {
+        // Only handle events from direct children, not from nested radio-groups
+        const targetElement = event.target;
+        const isDirectChild = targetElement.parentElement === this.host;
+        if (!isDirectChild) {
+            return; // Ignore events from nested radio-groups
+        }
+        // Stop event from bubbling to parent radio-groups
+        event.stopPropagation();
+        !event.target.disabled && event.target.select();
+    }
+    get selectedIndex() {
+        return Array.from(this.radioButtonElements).findIndex(el => el.hasAttribute('checked'));
+    }
+    get prevIndex() {
+        const isNoSelected = this.selectedIndex === -1;
+        const isnativeFirstElement = this.selectedIndex === 0;
+        return isnativeFirstElement || isNoSelected ? this.radioButtonElements.length - 1 : this.selectedIndex - 1;
+    }
+    get focusedRadioButtonEl() {
+        // Query all descendants to find focused element, but it will only be used for direct children
+        return this.host.querySelector('r-radio-button.focused');
+    }
+    get focusedRadioButtonElIndex() {
+        return Array.from(this.radioButtonElements).indexOf(this.focusedRadioButtonEl);
+    }
+    get nextIndex() {
+        const isNoSelected = this.selectedIndex === -1;
+        if (isNoSelected) {
+            return this.focusedRadioButtonElIndex === -1 ? 0 : this.focusedRadioButtonElIndex + 1;
+        }
+        const isLastElement = this.selectedIndex === this.radioButtonElements.length - 1;
+        return isLastElement ? 0 : this.selectedIndex + 1;
+    }
+    radioButtonKeydownAction(event) {
+        var _a;
+        // Only handle events from direct children, not from nested radio-groups
+        const targetElement = event.target;
+        const isDirectChild = targetElement.parentElement === this.host;
+        if (!isDirectChild) {
+            return; // Ignore events from nested radio-groups
+        }
+        // Stop event from bubbling to parent radio-groups
+        event.stopPropagation();
+        switch (event.detail.code) {
+            case 'ArrowUp':
+            case 'ArrowLeft':
+                // Select previous radio button
+                this.radioButtonElements[this.prevIndex].select();
+                break;
+            case 'ArrowDown':
+            case 'ArrowRight':
+                // Select next radio button
+                this.radioButtonElements[this.nextIndex].select();
+                break;
+            case 'Enter': {
+                const submitEl = this.host.querySelector('[type="submit"]') ||
+                    ((_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.querySelector('[type="submit"]'));
+                if (submitEl && 'triggerClick' in submitEl) {
+                    submitEl === null || submitEl === void 0 ? void 0 : submitEl.triggerClick();
+                }
+                else {
+                    this.parentFormEl.requestSubmit();
+                }
+                break;
+            }
+        }
+    }
+    /**
+     * Resets the validity state and message of the radio group.
+     * This method clears the validity message and state, and sets the invalid
+     * property to its initial value.
+     */
+    async resetValidity() {
+        this.validityMessage = null;
+        this.validityState = null;
+        this.invalid = this.initial['invalid'];
+        this.valid = !this.invalid;
+    }
+    /**
+     * Resets the radio group to its initial state.
+     *
+     * This method:
+     * - clears the validity state and message,
+     * - sets the value and validity to initial values,
+     * - if no initial value the radio group will be deselected,
+     * - restores the tabindex on the first element.
+     */
+    async reset() {
+        this.resetValidity();
+        if (this.initial['value']) {
+            this.setValue(this.initial['value']);
+            return;
+        }
+        // Set default value to null
+        this.clearValue();
+    }
+    /**
+     * Sets the value of the radio group to the specified value.
+     * If a radio button with the specified value exists, it will be selected.
+     *
+     * @param value - The value to set for the radio group.
+     */
+    async setValue(value) {
+        const element = Array.from(this.radioButtonElements).find(el => el.value === value);
+        if (element === undefined) {
+            this.clearValue();
+            return;
+        }
+        this.value = value;
+        element === null || element === void 0 ? void 0 : element.select();
+    }
+    /**
+     * Gets the current value of the radio group.
+     *
+     * @returns The current value of the radio group.
+     */
+    async getValue() {
+        return this.value || null;
+    }
+    /**
+     * Clears the value of the radio group and deselects all radio buttons.
+     * This method sets the value to null and deselects all radio buttons in the group.
+     */
+    async clearValue() {
+        var _a, _b, _c, _d, _e, _f;
+        const isSelectedEqualsFirst = ((_a = this.nativeSelectedEl) === null || _a === void 0 ? void 0 : _a.value) === ((_b = this.nativeFirstEl) === null || _b === void 0 ? void 0 : _b.value);
+        if (!isSelectedEqualsFirst) {
+            (_c = this.nativeSelectedEl) === null || _c === void 0 ? void 0 : _c.setAttribute('tabindex', '-1');
+        }
+        (_d = this.nativeSelectedEl) === null || _d === void 0 ? void 0 : _d.setAttribute('tabindex', '-1');
+        (_e = this.nativeFirstEl) === null || _e === void 0 ? void 0 : _e.setAttribute('tabindex', '0');
+        (_f = this.selectedRadioButtonElement) === null || _f === void 0 ? void 0 : _f.removeAttribute('checked');
+        this.value = null;
+    }
+    /**
+     * Validates the radio group without triggering UI and returns a boolean indicating its validity.
+     * @returns A boolean indicating whether the radio group is valid.
+     */
+    async checkValidity() {
+        const element = this.nativeSelectedEl || this.nativeFirstEl || null;
+        const { validityState } = this.getValidityStateData(element);
+        return validityState === 'valid';
+    }
+    /**
+     * Validates the radio group and displays the validity state.
+     */
+    async reportValidity() {
+        const element = this.nativeSelectedEl || this.nativeFirstEl || null;
+        this.validateFormElement(element);
+        return this.validityState === 'valid';
+    }
+    /**
+     * Sets a custom validity message for the radio group.
+     * If the message is not empty, the radio group will be considered invalid.
+     *
+     * @param message - The custom validity message to set.
+     */
+    async setCustomValidity(message) {
+        const element = this.nativeSelectedEl || this.nativeFirstEl || null;
+        this.customErrorMessage = message;
+        this.validateFormElement(element);
+    }
+    /**
+     * Sets focus on the radio button element.
+     * */
+    async setFocus() {
+        const element = this.selectedRadioButtonElement || this.radioButtonElements[0] || null;
+        element === null || element === void 0 ? void 0 : element.setFocus();
+    }
+    /**
+     * Blurs the radio button element.
+     * */
+    async setBlur() {
+        var _a;
+        (_a = this.focusedRadioButtonEl) === null || _a === void 0 ? void 0 : _a.setBlur();
+    }
+    /** Determine whether this element should be ignored during Constraint Validation API validation. */
+    get isNoValidate() {
+        var _a;
+        return (((_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.hasAttribute('novalidate')) ||
+            this.novalidate ||
+            !this.required ||
+            false);
+    }
+    /** Identify wrapping form element */
+    get parentFormEl() {
+        return this.host.closest('form') || document.querySelector(`#${this.form}`) || null;
+    }
+    get radioButtonElements() {
+        // Use :scope > to only select direct children, excluding nested radio-group buttons
+        return this.host.querySelectorAll(':scope > r-radio-button:not([disabled]:not([disabled="false"]))');
+    }
+    get selectedRadioButtonElement() {
+        return Array.from(this.radioButtonElements).find(el => el.checked || el.hasAttribute('checked')) || null;
+    }
+    get hasSelected() {
+        return Array.from(this.radioButtonElements).some(el => el.checked || el.hasAttribute('checked'));
+    }
+    get nativeSelectedEl() {
+        var _a, _b;
+        if (this.selectedRadioButtonElement === null)
+            return null;
+        return ((_b = (_a = this.selectedRadioButtonElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.r-radio-button--input')) || null;
+    }
+    get nativeFirstEl() {
+        var _a, _b;
+        return ((_b = (_a = this.radioButtonElements[0]) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.r-radio-button--input')) || null;
+    }
+    get hasValidationError() {
+        return this.validityState && this.validityState !== 'valid' && !!(this.validityMessage || this.customErrorMessage);
+    }
+    passPropsToGroupItems(props = {}) {
+        Object.entries(props).forEach(([key, value]) => {
+            this.radioButtonElements.forEach(el => {
+                if (typeof value === 'string')
+                    el.setAttribute(key, value);
+                if (typeof value === 'boolean' && value)
+                    el.setAttribute(key, '');
+            });
+        });
+    }
+    selectGroupItemByValue() {
+        if (this.hasSelected && !this.value) {
+            this.value = this.selectedRadioButtonElement.value;
+        }
+        this.setValue(this.value);
+    }
+    setTabindex() {
+        const el = this.nativeSelectedEl || this.nativeFirstEl;
+        el === null || el === void 0 ? void 0 : el.setAttribute('tabindex', '0');
+    }
+    get parentRadioGroup() {
+        var _a;
+        // Find the parent radio group element
+        return ((_a = this.host.parentElement) === null || _a === void 0 ? void 0 : _a.closest('r-radio-group')) || null;
+    }
+    connectFormEventListeners() {
+        var _a, _b, _c;
+        (_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.addEventListener('formdata', this.contributeToFormData);
+        (_b = this.parentFormEl) === null || _b === void 0 ? void 0 : _b.addEventListener('reset', this.onResetForm);
+        (_c = this.parentFormEl) === null || _c === void 0 ? void 0 : _c.addEventListener('submit', this.onSubmitForm, { capture: true });
+    }
+    disconnectFormEventListeners() {
+        var _a, _b, _c;
+        (_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('formdata', this.contributeToFormData);
+        (_b = this.parentFormEl) === null || _b === void 0 ? void 0 : _b.removeEventListener('reset', this.onResetForm);
+        (_c = this.parentFormEl) === null || _c === void 0 ? void 0 : _c.removeEventListener('submit', this.onSubmitForm);
+    }
+    connectParentGroupListener() {
+        // Only connect if this is a nested group (has parentValue specified)
+        if (this.parentValue && this.parentRadioGroup) {
+            this.parentRadioGroup.addEventListener('rChange', this.onParentGroupChange);
+        }
+    }
+    disconnectParentGroupListener() {
+        if (this.parentValue && this.parentRadioGroup) {
+            this.parentRadioGroup.removeEventListener('rChange', this.onParentGroupChange);
+        }
+    }
+    get ariaDescribedBy() {
+        const messageId = `${this.uniqueId}-message`;
+        return this.hint ? `${this.uniqueId}-hint ${messageId}` : messageId;
+    }
+    connectedCallback() {
+        this.connectFormEventListeners();
+        this.connectParentGroupListener();
+    }
+    disconnectedCallback() {
+        this.disconnectFormEventListeners();
+        this.disconnectParentGroupListener();
+    }
+    componentWillLoad() {
+        const { required, name } = this;
+        this.passPropsToGroupItems({ required, name });
+        // If `value` is provided: item within group with such value shall be selected
+        this.selectGroupItemByValue();
+        this.initial['value'] = this.value;
+        this.initial['invalid'] = this.invalid;
+    }
+    componentDidLoad() {
+        const { name, required } = this;
+        this.passPropsToGroupItems({ name, required });
+        this.setTabindex();
+        if (this.autofocus) {
+            // Use setTimeout to ensure setValue has completed and checked state is synced
+            setTimeout(() => {
+                this.setFocus();
+            }, 0);
+        }
+    }
+    render() {
+        const { label, hint, fieldIndicator, error, uniqueId, invalid } = this;
+        const fieldsetAttrs = {
+            'aria-invalid': `${invalid || false}`,
+            'aria-describedby': this.ariaDescribedBy
+        };
+        return (h(Host, { key: 'a542762b5523cd568341316eb9e1d3ba328662f3' }, h("fieldset", Object.assign({ key: 'cd6877a67816eff8a423a60ef1e9079cab4ea21a', class: "r-radio-group" }, fieldsetAttrs, { onClick: this.onLabelClick }), label &&
+            h("legend", { key: '00adcfa6fa8296f295b48f90d19b11928fb580d6', class: "r-radio-group--label-container" }, h("r-label", { key: 'f353298317ffe0043dd0dae0905499ef17fa90ba', id: `${uniqueId}-label`, class: "r-radio-group--label", "field-indicator": fieldIndicator }, label), h("slot", { key: '5e9ecf61a1a65f20ed3e48006f2a913723bdfb38', name: "popover" })), hint &&
+            h("r-hint", { key: '0e266db62c6bb2f8a770502ab64ca7f2edc54d39', id: `${uniqueId}-hint`, class: "r-radio-group--hint", role: "note" }, hint), h("div", { key: '2d951da223a892721db7e5d858e52b27eebfcf98', class: "r-radio-group--content" }, h("slot", { key: '341225a7be93a07fa9c3e4c96241f84c8008b182' })), h("div", { key: '255d3bbd8fd5b192e4dd2cca03bb7b0e2bdefd0e', id: `${uniqueId}-message`, "aria-live": "polite", role: "alert", class: "r-radio-group--message" }, invalid && error &&
+            h("r-hint", { key: '7c91e92235c2d4bd36baf327ce0bf7ed18982886', variant: "error" }, error), this.hasValidationError &&
+            h("r-hint", { key: '522a8a74f88356d42929f9e1fe4ab2a4326d25d7', "aria-live": "polite", id: `${uniqueId}-message`, role: "alert", variant: "error" }, this.customErrorMessage || this.validityMessage)))));
+    }
+    static get is() { return "r-radio-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["radio-group.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["radio-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "form": {
+                "type": "string",
+                "attribute": "form",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the `id` of the `<form>` to which the element belongs"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "name": {
+                "type": "string",
+                "attribute": "name",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies common `name` property that is passed to each `r-radio-button`"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "value": {
+                "type": "string",
+                "attribute": "value",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Displays currently selected value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "novalidate": {
+                "type": "boolean",
+                "attribute": "novalidate",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies if element must be ignored during validation of the form elements"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "attribute": "label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The text of the label rendered before the set of radio-buttons"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "required": {
+                "type": "boolean",
+                "attribute": "required",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies if radio-button within group must be checked"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "fieldIndicator": {
+                "type": "string",
+                "attribute": "field-indicator",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Define the marker text if the field label is marked\nField indicator can be Required*, Optional or a translation of those two options."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "valueMissingMessage": {
+                "type": "string",
+                "attribute": "value-missing-message",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set custom message for `valueMissing` property of a ValidityState object (set by `required`) within Constrain Validation API"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "valid": {
+                "type": "boolean",
+                "attribute": "valid",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Apply validation success visual style"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "invalid": {
+                "type": "boolean",
+                "attribute": "invalid",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Apply validation error visual style"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "error": {
+                "type": "string",
+                "attribute": "error",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom validation error message"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "customErrorMessage": {
+                "type": "string",
+                "attribute": "custom-error-message",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set custom message for `customError` property of a ValidityState object indicating whether the element's custom validity message has been set to a non-empty string by calling the element's setCustomValidity() method."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "hint": {
+                "type": "string",
+                "attribute": "hint",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional hint, visually presented under the group of radio-buttons\ngiving additional context to the user"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "variant": {
+                "type": "string",
+                "attribute": "variant",
+                "mutable": false,
+                "complexType": {
+                    "original": "RadioGroupVariant",
+                    "resolved": "\"contained\" | \"standard\"",
+                    "references": {
+                        "RadioGroupVariant": {
+                            "location": "import",
+                            "path": "./exports",
+                            "id": "src/components/radio-group/exports.ts::RadioGroupVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the style variation of the radio buttons."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "'standard'"
+            },
+            "autofocus": {
+                "type": "boolean",
+                "attribute": "autofocus",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When set to `true`, automatically focuses the first enabled radio button in the group on mount.\nThis will focus the selected radio button if one exists, or the first enabled radio button otherwise."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "parentValue": {
+                "type": "string",
+                "attribute": "parent-value",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "For nested radio groups: specifies the parent radio button value that this nested group belongs to.\nWhen the parent group's value changes to a different value, this nested group will be automatically reset.\nThis ensures nested selections are only maintained when their parent context is active."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "validityState": {},
+            "validityMessage": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "rValidate",
+                "name": "rValidate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits event after each validation"
+                },
+                "complexType": {
+                    "original": "{\n    state: string,\n    message: string\n  }",
+                    "resolved": "{ state: string; message: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "rChange",
+                "name": "rChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits `rChange` when component's value has been changed"
+                },
+                "complexType": {
+                    "original": "{\n    element: HTMLRRadioGroupElement,\n    value: any\n  }",
+                    "resolved": "{ element: HTMLRRadioGroupElement; value: any; }",
+                    "references": {
+                        "HTMLRRadioGroupElement": {
+                            "location": "global",
+                            "id": "global::HTMLRRadioGroupElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "rReset",
+                "name": "rReset",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits `rReset` when component was reset to initial state by form reset"
+                },
+                "complexType": {
+                    "original": "{\n    element: HTMLRRadioGroupElement,\n    value: any\n  }",
+                    "resolved": "{ element: HTMLRRadioGroupElement; value: any; }",
+                    "references": {
+                        "HTMLRRadioGroupElement": {
+                            "location": "global",
+                            "id": "global::HTMLRRadioGroupElement"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "resetValidity": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Resets the validity state and message of the radio group.\nThis method clears the validity message and state, and sets the invalid\nproperty to its initial value.",
+                    "tags": []
+                }
+            },
+            "reset": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Resets the radio group to its initial state.\n\nThis method:\n- clears the validity state and message, \n- sets the value and validity to initial values,\n- if no initial value the radio group will be deselected,\n- restores the tabindex on the first element.",
+                    "tags": []
+                }
+            },
+            "setValue": {
+                "complexType": {
+                    "signature": "(value: string | null) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "string",
+                            "docs": "- The value to set for the radio group."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets the value of the radio group to the specified value.\nIf a radio button with the specified value exists, it will be selected.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "value - The value to set for the radio group."
+                        }]
+                }
+            },
+            "getValue": {
+                "complexType": {
+                    "signature": "() => Promise<string | null>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Gets the current value of the radio group.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "The current value of the radio group."
+                        }]
+                }
+            },
+            "clearValue": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Clears the value of the radio group and deselects all radio buttons.\nThis method sets the value to null and deselects all radio buttons in the group.",
+                    "tags": []
+                }
+            },
+            "checkValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Validates the radio group without triggering UI and returns a boolean indicating its validity.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "A boolean indicating whether the radio group is valid."
+                        }]
+                }
+            },
+            "reportValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Validates the radio group and displays the validity state.",
+                    "tags": []
+                }
+            },
+            "setCustomValidity": {
+                "complexType": {
+                    "signature": "(message: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "message",
+                            "type": "string",
+                            "docs": "- The custom validity message to set."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets a custom validity message for the radio group.\nIf the message is not empty, the radio group will be considered invalid.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "message - The custom validity message to set."
+                        }]
+                }
+            },
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus on the radio button element.",
+                    "tags": []
+                }
+            },
+            "setBlur": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Blurs the radio button element.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get listeners() {
+        return [{
+                "name": "rChange",
+                "method": "rChangeAction",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "radioButtonClick",
+                "method": "radioButtonClickAction",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "radioButtonKeydown",
+                "method": "radioButtonKeydownAction",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}