import { Host, h } from "@stencil/core";
/**
 * This is a low-level private component that renders individual radio button elements.
 * It's used internally by the list-item component to render radio buttons when
 * `type="radio"` is specified.
 *
 * ## Usage in the Library
 *
 * This template is primarily used by:
 * - `limel-list` component when `type="radio"`
 * - `limel-radio-button-group` component (which wraps `limel-list`)
 *
 * ## Why This Exists
 *
 * While we have `limel-radio-button-group` for most use cases, this template provides
 * the actual radio button HTML structure with proper MDC classes and accessibility
 * attributes. It ensures consistent styling and behavior across all radio button
 * implementations in the library.
 *
 * ## Design Philosophy
 *
 * This follows the principle that individual radio buttons should not be standalone
 * components, as a single radio button is never useful in a UI. Instead, this template
 * is used to build groups of radio buttons through higher-level components.
 *
 * However, since this is a private component, consumers who need to use a radio button
 * outside of the context of a list or group, can still use the `limel-radio-button`
 * component directly according to in their UI needs.
 *
 * @private
 */
export class RadioButtonComponent {
    render() {
        return (h(Host, { key: 'd198242b1e1a066b38b1d6ddc55fcd8dd7817c36', class: {
                'boolean-input': true,
                'radio-button': true,
                checked: this.checked,
                disabled: this.disabled,
            } }, h("input", { key: '7b2a009c5753d4ad9bad3c1ee9d8aa2b1fc30db8', type: "radio", id: this.id, checked: this.checked, disabled: this.disabled, onChange: this.onChange }), h("div", { key: '8eef5a56df7502ec7b6cb1ed84c8b8f0a72cd21c', class: "box" }), h("label", { key: 'bcd0883bf0dbdd307508a47e98402e590167fa00', class: "boolean-input-label", htmlFor: this.id }, this.label)));
    }
    static get is() { return "limel-radio-button"; }
    static get originalStyleUrls() {
        return {
            "$": ["radio-button.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["radio-button.css"]
        };
    }
    static get properties() {
        return {
            "checked": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Indicates whether the radio button is checked."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "checked"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Disables the radio button when set to `true`."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "disabled"
            },
            "id": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Associates the internal input with an external label."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "id"
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Visual label shown next to the radio button."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "label"
            },
            "onChange": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "(event: Event) => void",
                    "resolved": "(event: Event) => void",
                    "references": {
                        "Event": {
                            "location": "global",
                            "id": "global::Event"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Change handler forwarded to the underlying input element."
                },
                "getter": false,
                "setter": false
            }
        };
    }
}
