/** * The `auro-radio` element is used to a button that allows the user to select one option from a set. * @customElement auro-radio * * @event toggleSelected - Notifies that the component has toggled the checked/selected state. * @event {CustomEvent} change - (Deprecated) Notifies when checked value is changed. * @event {InputEvent} input - Notifies when when checked value is changed by user's interface. * @event focusSelected - Notifies that the component has gained focus. * @event auroRadio-blur - Notifies that the component has lost focus. * @event resetRadio - Notifies that the component has reset the checked/selected state. * @event auroRadio-selected - Notifies that the component has been marked as checked/selected. * * @csspart radio - apply css to a specific checkbox. * @csspart radio-input - apply css to a specific checkbox's input. * @csspart radio-label - apply css to a specific checkbox's label. */ export class AuroRadio extends LitElement { static get styles(): import("lit").CSSResult[]; static get properties(): { /** * Defines whether the component will be on lighter or darker backgrounds. * @type {'default' | 'inverse'} * @default 'default' */ appearance: "default" | "inverse"; /** * If set to true, the radio button will be filled. */ checked: { type: BooleanConstructor; reflect: boolean; }; /** * If set to true, the radio button will be non-clickable. */ disabled: { type: BooleanConstructor; reflect: boolean; }; /** * If set to true, sets an error state on the radio button. */ error: { type: BooleanConstructor; reflect: boolean; }; /** * The id global attribute defines an identifier (ID) which must be unique in the whole document. */ id: { type: StringConstructor; reflect: boolean; }; /** * ID for input node. * @private */ inputId: { type: StringConstructor; reflect: boolean; attribute: boolean; }; /** * Label for the radio button. */ label: { type: StringConstructor; }; /** * Name for the radio button group. */ name: { type: StringConstructor; }; /** * DEPRECATED - use `appearance="inverse"` instead. */ onDark: { type: BooleanConstructor; reflect: boolean; }; /** * Defines element as required. */ required: { type: BooleanConstructor; reflect: boolean; }; /** * Don't add to api.md since changing of this can easily break a11y. * @private */ role: { type: StringConstructor; reflect: boolean; }; /** * Whether or not the radio button has been touched by the user. * @private */ touched: { type: BooleanConstructor; reflect: boolean; attribute: boolean; }; /** * The value of the radio button. */ value: { type: StringConstructor; }; }; /** * This will register this element with the browser. * @param {string} [name="auro-radio"] - The name of the element that you want to register. * * @example * AuroRadio.register("custom-radio") // This will resgiter this element to * */ static register(name?: string): void; _initializeDefaults(): void; appearance: string; checked: any; disabled: boolean; required: boolean; error: boolean; onDark: boolean; touched: boolean; /** * @private */ private runtimeUtils; /** * Method for handling content when change event is fired. * @private * @param {Event} event - The trigger event tied to this function. * @returns {void} */ private handleChange; /** * Method for handling content when input event is fired. * @private * @param {Event} event - The trigger event tied to this function. * @returns {void} */ private handleInput; /** * Method for handling focus event. * @private * @param {Event} event - The trigger event tied to this function. * @returns {void} */ private handleFocus; /** * Method for handling blur event. * @private * @param {Event} event - The trigger event tied to this function. * @returns {void} */ private handleBlur; /** * Resets component to initial state. * @returns {void} */ reset(): void; updated(changedProperties: any): void; /** * Method for handling passing the required status to aria. * @private * @param {Boolean} required - The element's required attribute. * @returns {void} */ private isRequired; firstUpdated(): void; input: HTMLInputElement; inputId: string; render(): import("lit-html").TemplateResult<1>; } import { LitElement } from "lit";