import { CSSResultGroup, PropertyValues } from "lit"; import { SigveloFormControlElement } from "@mcp-b/wc-support/base/sigvelo-element"; //#region src/components/toggle-tag/toggle-tag.d.ts /** * * * @summary Similar to checkboxes, except with tags to represent the checked and unchecked states. * @tag sigvelo-toggle-tag * @documentation https://design-system.sigvelo.com/docs/components/toggle-tag * @status stable * @since 1.0 * * @slot - The toggle tag's label. For plain-text labels, you can use the `label` attribute instead. * * @event sigvelo-blur - Emitted when the toggle tag loses focus. This event does not bubble. * @event sigvelo-change - Emitted when the user commits changes to the toggle tag's value. * @event sigvelo-focus - Emitted when the toggle tag receives focus. This event does not bubble. * @event sigvelo-input - Emitted when the toggle tag receives input. * * @csspart label - The `` that wraps the entire control. * * @cssstate checked - Applied when the toggle tag is checked. * @cssstate disabled - Applied when the toggle tag is disabled. * @cssstate focused - Applied when the toggle tag has focus. * @cssstate user-valid - Applied when the toggle tag is valid and the user has sufficiently interacted with it. * @cssstate user-invalid - Applied when the toggle tag is invalid and the user has sufficiently interacted with it. * * @example Default * Toggle tags can be used just like checkboxes and switches to turn features on and off. You can listen for state changes with the `sigvelo-input` event and submit them with forms by adding `name` and `value` attributes. * * Toggle tags should generally be used in groups. In fact, they work best when place inside of checkbox groups. Assistive devices will recognize tag checkboxes as standard checkboxes. * * ```html * * * * Coffee * * * * Laundry * * * * Microwave * * * * Parking * * * * Pet friendly * * * * Pool * * * * TV * * * * Wifi * * * ``` * * @example Checked initially * Add the `checked` attribute to check the toggle tag initially. * * ```html * * * * Email updates * * * * Push notifications * * * * SMS alerts * * * * Phone calls * * * ``` * * @example Changing the size * Use the `size` attribute to make toggle tags larger or smaller. The available sizes are `xs`, `sm`, `md` (default), `lg`, and `xl`. * * ```html *

* Extra small * * XS * S * M * L * XL * *

* *

* Small * * XS * S * M * L * XL * *

* *

* Medium (default) * * XS * S * M * L * XL * *

* *

* Large * * XS * S * M * L * XL * *

* *

* Extra large * * XS * S * M * L * XL * *

* ``` * * @example Disabling toggle tags * Use the `disabled` attribute to prevent interaction with toggle tags. Disabled tags will appear faded and won't respond to clicks or keyboard input. * * ```html * * Option 1 * Option 2 * Option 3 * * ``` * * @example Handling form submission * Toggle tags are form-associated custom elements that behave like native checkboxes when submitting forms. When a toggle tag is checked, its `name` and `value` attributes are included in the form data, just like a standard checkbox. * * ```html * * ``` */ declare class SigveloToggleTag extends SigveloFormControlElement { static formAssociated: boolean; static styles: CSSResultGroup; protected get focusableAnchor(): HTMLInputElement; private checkbox; isInvalid: boolean; hadUserInteraction: boolean; wasSubmitted: boolean; /** * The toggle tag's label. If you need to provide HTML in the label, use the `label` slot instead. */ label: string; /** The name of the toggle tag. This will be submitted with the form as a name/value pair. */ name: string; /** The toggle tag's value. */ value: string; /** The toggle tag's checked state. */ checked: boolean; /** Disables the toggle tag. */ disabled: boolean; /** The toggle tag'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 toggle tag required. Form submission will not be allowed until the toggle tag is checked. */ required: boolean; updated(changedProperties: PropertyValues): void; /** @internal Called when the form is reset. */ formResetCallback(): void; private handleClick; private handleBlur; private handleChange; private handleInput; private handleFocus; /** Sets the form control's validity */ private updateValidity; /** Sets focus to the toggle tag. */ focus(): void; /** Removes focus from the toggle tag. */ blur(): void; render(): import("lit-html").TemplateResult<1>; } declare global { interface HTMLElementTagNameMap { "sigvelo-toggle-tag": SigveloToggleTag; } } //#endregion export { SigveloToggleTag as t };