import { t as SigveloRadioItem } from "./radio-item-jh8fXdp8.js"; import { CSSResultGroup, PropertyValues } from "lit"; import { SigveloFormControlElement } from "@mcp-b/wc-support/base/sigvelo-element"; //#region src/components/radio/radio.d.ts /** * * * @summary Allows the user to select one option from a group of choices. * @tag sigvelo-radio * @documentation https://design-system.sigvelo.com/docs/components/radio * @status stable * @since 1.0 * * @dependency sigvelo-radio-item * * @slot - The radio items to place in the group. * @slot label - The radio's label. For plain-text labels, you can use the `label` attribute instead. * @slot description - The radios's description. For plain-text descriptions, you can use the `description` * attribute instead. * * @event sigvelo-change - Emitted when the user commits changes to the radio's value. * @event sigvelo-input - Emitted when the radio receives input. * * @csspart label - The element that contains the radio's label. * @csspart description - The element that contains the radio's description. * @csspart group - The element that wraps the grouped radios. * * @cssstate user-valid - Applied when the radio is valid and the user has sufficiently interacted with it. * @cssstate user-invalid - Applied when the radio is invalid and the user has sufficiently interacted with it. * * @example Default * Radios follow the ARIA APG radio group pattern for accessibility. Unlike native radio buttons, Sigvelo radio items must be placed inside a radio controller as shown below. * * ```html * * Black * White * Orange * Gray * * ``` * * @example Labels and descriptions * You can use the `label` and `description` attributes to provide plain text labels and descriptions for the radio. If you want to provide HTML, use the `label` and `description` slots instead. * * ```html * * * For more information, visit our website. * * Cat * Dog * Bird * Lizard * * ``` * * @example Providing an initial value * Use the `value` attribute to provide an initial value for the radio. The value should match an existing radio item's value. * * ```html * * Short * Medium * Long * Hairless * * ``` * * **Warning:** This behavior is different from native radios that use the `checked` attribute to set the value. With ``, always use the `value` attribute to set the value. * * @example Changing the orientation * To stack radio items on top of each other instead of side by side, set the `orientation` attribute to `vertical`. * * ```html * * Short * Medium * Long * Hairless * * ``` * * @example Filled radios * Set the `variant` attribute to `filled` to change a radio item's variant. * * ```html * * Cat * Dog * Bird * Lizard * * ``` * * @example Changing the size * Use the `size` attribute to change a radio item's size. * * ```html * * Extra small * Small * Medium * Large * Extra large * * ``` * * @example Disabling * To disable the entire control, add the `disabled` attribute to the radio element. * * ```html * * Cat * Dog * Bird * Lizard * * ``` * * To disable individual options, add the `disabled` attribute to one or more radio items. * * ```html * * Cat * Dog * Bird * Lizard * * ``` * * @example Validation * The `required` attribute can be applied to enable validation using the Constraint Validation API. This will prevent form submission until a radio item is checked. * * ```html * * ``` * * @example Using custom validation * Use the `setCustomValidity()` method to make the radio invalid and show a custom error message on submit. This will override all other validation parameters. To clear the error, remove the attribute or set it to an empty string. * * ```html * * * * ``` * * @example Styling validation * You can style valid and invalid radios using the `:valid` and `:invalid` pseudo classes. * * ```html * * * * ``` * * However, these selectors will match even before the user has had a chance to fill out the form. More often than not, you'll want to use the `user-valid` and `user-invalid` custom states instead. This way, validation styles are only shown _after_ the user interacts with the form control or when the form is submitted. * * ```html * * * * ``` * * @example Styling radios * Radios come with a simple, minimal appearance. Feel free to customize them with your own styles. Here are some examples, for inspiration. * * ```html * * * Magic link * * * Password * * * * * ``` * * ```html * * * Startup
* 12GB · 6 CPUs · 256GB SSD * * * * Business
* 16GB · 8 CPUs · 512GB SSD * * * * Enterprise
* 32GB · 12 CPUs · 1TB SSD * * * * * ``` * * ```html * * Silver * Blue * Rose * Gold * * * * ``` * * **Warning:** It's not recommended to hide the radio button unless your styles make it very clear to users that the control is selectable. */ declare class SigveloRadio extends SigveloFormControlElement { static formAssociated: boolean; static observeSlots: boolean; static styles: CSSResultGroup; protected get focusableAnchor(): SigveloRadioItem; group: HTMLElement; isInvalid: boolean; hadUserInteraction: boolean; wasSubmitted: boolean; /** * The radio's label. If you need to provide HTML in the label, use the `label` slot instead. */ label: string; /** * The radio's description. If you need to provide HTML in the description, use the `description` slot instead. */ description: string; /** The name of the radio. This will be submitted with the form as a name/value pair. */ name: string; /** The radio's current value. Set this to change the selected item. */ value: string; /** The orientation of grouped items. */ orientation: "horizontal" | "vertical"; /** * The form to associate this control with. If omitted, the closest containing `

` will be used. The value of * this attribute must be an ID of a form in the same document or shadow root. */ form: string; /** Indicates at least one option in the radio is required. */ required: boolean; /** Disables the radio control. */ disabled: boolean; firstUpdated(): void; updated(changedProperties: PropertyValues): void; /** @internal Called when a containing fieldset is disabled. */ formDisabledCallback(): void; /** @internal Called when the form is reset. */ formResetCallback(): void; /** Gets an array of radio items slotted into the radio. */ private getItems; private handleGroupClick; private handleGroupKeyDown; /** * @internal Makes only the selected radio item tabbable. If no radio item is selected, the first non-disabled radio * item will be tabbable. */ resetRovingTabIndex(): void; /** Gets the selected item. */ private getSelectedItem; /** * Sets the selected item and updates the roving tab index. If `null` is provided, the selection will be cleared and * the tab index will go to the first radio item. */ private setSelectedItem; /** Updates the controller disabled state for all radio items */ private updateControllerDisabledState; /** Sets the form control's validity */ private updateValidity; /** Sets focus to the selected item or the first item if none are selected. */ focus(options?: FocusOptions): void; render(): import("lit-html").TemplateResult<1>; } declare global { interface HTMLElementTagNameMap { "sigvelo-radio": SigveloRadio; } } //#endregion export { SigveloRadio as t };