import "./icon-CTW4Gr4z.js"; import { CSSResultGroup, PropertyValues } from "lit"; import { SigveloFormControlElement } from "@mcp-b/wc-support/base/sigvelo-element"; //#region src/components/checkbox/checkbox.d.ts /** * * * @summary Allows users to select one or more options from a list or toggle single options on and off. * @tag sigvelo-checkbox * @documentation https://design-system.sigvelo.com/docs/components/checkbox * @status stable * @since 1.0 * * @dependency sigvelo-icon * * @slot - The checkbox's label. For plain-text labels, you can use the `label` attribute instead. * @slot description - The checkbox's description. For plain-text descriptions, you can use the `description` attribute * instead. * * @event sigvelo-blur - Emitted when the checkbox loses focus. This event does not bubble. * @event sigvelo-change - Emitted when the user commits changes to the checkbox's value. * @event sigvelo-focus - Emitted when the checkbox receives focus. This event does not bubble. * @event sigvelo-input - Emitted when the checkbox receives input. * * @csspart label - The ` * ``` * * @example Checked initially * Add the `checked` attribute to check the checkbox initially. * * ```html * I will feed the cats * ``` * * @example Filled checkboxes * Set the `variant` attribute to `filled` to change the checkbox's variant. * * ```html * Filled checkbox * ``` * * @example Changing the size * Use the `size` attribute to change the checkbox's size. * * ```html * Extra small
* Small
* Medium
* Large
* Extra large * ``` * * @example Indeterminate * Use the `indeterminate` attribute to put the checkbox in an indeterminate state. This can be used to show a mixed selection in a group of "child" checkboxes. * * ```html * Indeterminate * ``` * * @example Disabling * Use the `disabled` attribute to disable the checkbox. * * ```html * Unchecked and disabled
* Checked and disabled
* Indeterminate and disabled * ``` * * @example Validation * The `required` attribute can be applied to enable validation using the Constraint Validation API. This will prevent form submission until the checkbox is checked. * * ```html *
* I will feed the cats *

* Submit * Reset *
* ``` * * @example Using custom validation * Use the `setCustomValidity()` method to make the checkbox 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 *
* I will feed the cats *

* Submit * Reset *
* * * ``` * * @example Styling validation * You can style valid and invalid checkboxes using the `:valid` and `:invalid` pseudo classes. * * ```html *
* I will feed the cats *

* Submit * Reset *
* * * ``` * * 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 *
* I will feed the cats *

* Submit * Reset *
* * * ``` * * @example Styling checkboxes * Checkboxes come with a simple, minimal appearance. Feel free to customize them with your own styles. Here's a quick way to turn a checkbox into a selectable tile. * * ```html * * * Basketball * * * * * Football * * * * * Ping-pong * * * * ``` * * ```html * * A gray kitten plays with a blue toy mouse * * * * A gray kitten practices prowling on a brown floor * * * * A gray kitten looks at the camera from behind a tree * * * * ``` * * **Warning:** It's not recommended to hide the checkbox unless your styles make it very clear to users that the control is checkable. */ declare class SigveloCheckbox extends SigveloFormControlElement { static formAssociated: boolean; static observeSlots: boolean; static styles: CSSResultGroup; protected get focusableAnchor(): HTMLInputElement; private checkbox; isInvalid: boolean; hadUserInteraction: boolean; wasSubmitted: boolean; /** * The checkbox's label. If you need to provide HTML in the label, use the `label` slot instead. */ label: string; /** The checkbox's description. If you need to provide HTML in the description, use the `description` slot instead. */ description: string; /** The name of the checkbox. This will be submitted with the form as a name/value pair. */ name: string; /** The checkbox's value. */ value: string; /** The checkbox's checked state. */ checked: boolean; /** Puts the checkbox in an indeterminate state. */ indeterminate: boolean; /** Disables the checkbox. */ disabled: boolean; /** The type of checkbox to render. */ variant: "normal" | "filled"; /** The checkbox's size. */ size: "xs" | "sm" | "md" | "lg" | "xl"; /** * 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; /** * Makes the checkbox required. Form submission will not be allowed until the checkbox is checked. */ required: boolean; updated(changedProperties: PropertyValues): void; /** @internal Called when the form is reset. */ formResetCallback(): void; private handleBlur; private handleChange; private handleInput; private handleFocus; /** Sets the form control's validity */ private updateValidity; /** Sets focus to the checkbox. */ focus(): void; /** Removes focus from the checkbox. */ blur(): void; render(): import("lit-html").TemplateResult<1>; } declare global { interface HTMLElementTagNameMap { "sigvelo-checkbox": SigveloCheckbox; } } //#endregion export { SigveloCheckbox as t };