import type { CSSResultGroup } from 'lit'; import TerraElement, { type TerraFormControl } from '../../internal/terra-element.js'; /** * @summary Radio buttons are a form field used when only a single selection can be made from a list. * @documentation https://terra-ui.netlify.app/components/radio * @status stable * @since 1.0 * * @slot - The radio's label. * * @event terra-blur - Emitted when the radio loses focus. * @event terra-change - Emitted when the checked state changes. * @event terra-focus - Emitted when the radio gains focus. * @event terra-input - Emitted when the radio receives input. * @event terra-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied. * * @csspart base - The component's base wrapper. * @csspart control - The circular container that wraps the radio's checked state. * @csspart control--checked - The radio control when the radio is checked. * @csspart checked-icon - The checked icon, an SVG element. * @csspart label - The container that wraps the radio's label. * * @cssproperty --terra-radio-* - All radio design tokens from horizon.css are supported. */ export default class TerraRadio extends TerraElement implements TerraFormControl { static styles: CSSResultGroup; private readonly formControlController; input: HTMLInputElement; private hasFocus; title: string; /** The name of the radio, submitted as a name/value pair with form data. */ name: string; /** The radio's value. When selected, the radio group will receive this value. */ value: string; /** * The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this * attribute can typically be omitted. */ size: 'small' | 'medium' | 'large'; /** Disables the radio. */ disabled: boolean; /** Draws the radio in a checked state. */ checked: boolean; /** The default value of the form control. Primarily used for resetting the form control. */ defaultChecked: boolean; /** * By default, form controls are associated with the nearest containing `