import { type IInvalidable } from '../../../Behaviors/Invalidable'; import { LabelPosition } from '../../../Types/LabelPosition'; import type { IConnectedCallback } from '../../Abstracts/Interfaces/IConnectedCallback'; import { ToggableElement } from '../../Primitives/Abstracts/Toggable/ToggableElement'; import type { IToggleSwitchElementProps } from './IToggleSwitchElementProps'; declare const ToggleSwitchElement_base: (abstract new (...args: Array) => import("../../../../Controls/Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array) => IInvalidable & import("../../../Behaviors/Invalidable").IInvalidableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Valueable").IValueableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Variantable").IVariantableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Appearanceable").IAppearanceableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Disableable").IDisableableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Labelable").ILabelableProps) & (abstract new (...args: Array) => import("../../../Behaviors/TextFormattable").ITextFormattableProps) & typeof ToggableElement & import("../../../../Controls/Behaviors/Themeable").IThemeableCtor; /** * Toggle Switch - A binary input control for switching between on/off states with visual switch metaphor. * * @description * The Toggle Switch component provides an intuitive interface for binary choices, using a familiar physical * switch metaphor. Unlike checkboxes, toggle switches immediately apply state changes and are ideal for * settings that take effect instantly. Features include smooth animated transitions, accessibility support * with proper ARIA attributes, keyboard navigation, support for disabled states, and customizable appearance * with various themes. The component includes focus ring indication, label positioning options, and integrates * seamlessly with form validation systems. Perfect for preferences panels, feature toggles, notification * settings, and any interface requiring immediate binary state changes. * * @name Toggle Switch * @element mosaik-toggle-switch * @category Inputs * * @slot prefix - Content placed before the switch control. * @slot suffix - Content placed after the switch control. * @slot checkmark - Custom checkmark/switch indicator content. * @slot label - Custom label content. * * @csspart input - The hidden checkbox input element. * @csspart focusRing - The focus ring indicator. * @csspart checkmark - The visual switch control. * @csspart label - The text label element. * * @cssprop {Color} --toggle-switch-border-color - The border color. * @cssprop {String} --toggle-switch-border-radius - The border radius. * @cssprop {String} --toggle-switch-border-style - The border style. * @cssprop {String} --toggle-switch-border-width - The border width. * @cssprop {String} --toggle-switch-font-family - The font family. * @cssprop {String} --toggle-switch-font-letter-spacing - The font letter spacing. * @cssprop {String} --toggle-switch-font-line-height - The font line height. * @cssprop {String} --toggle-switch-font-size - The font size. * @cssprop {String} --toggle-switch-font-text-decoration - The font text decoration. * @cssprop {String} --toggle-switch-font-text-transform - The font text transform. * @cssprop {String} --toggle-switch-font-weight - The font weight. * @cssprop {String} --toggle-switch-gap - The gap between elements. * @cssprop {String} --toggle-switch-padding-bottom - The padding bottom. * @cssprop {String} --toggle-switch-padding-left - The padding left. * @cssprop {String} --toggle-switch-padding-right - The padding right. * @cssprop {String} --toggle-switch-padding-top - The padding top. * @cssprop {String} --toggle-switch-transition-duration - The transition duration. * * @dependency mosaik-focus-ring - Used for focus indication. * @dependency mosaik-checkmark - Used for the visual switch control. * @dependency mosaik-text - Used for label display. * * @example * ```html * * * ``` * * @public */ export declare class ToggleSwitchElement extends ToggleSwitchElement_base implements IConnectedCallback, IToggleSwitchElementProps, IInvalidable { private _inputElement; private _labelPosition; private _required; private _name; /** * @public */ constructor(); /** * Returns the `is` property. * The `is` property represents natural name of this element. * * @public * @static * @override * @readonly */ static get is(): string; /** * Gets or sets the `labelPosition` property. * * @public * @attr */ get labelPosition(): LabelPosition; set labelPosition(value: LabelPosition); /** * Gets or sets the `required` property. * * @public * @attr */ get required(): boolean; set required(value: boolean); /** * Gets or sets the `name` property. * * @public * @attr */ get name(): string; set name(value: string); /** * @public * @overload */ connectedCallback(): void; /** * Checks the validity of the element and returns `true` if it is valid; otherwise, `false`. * * @public * @override */ checkValidity(): boolean; /** * Resets the element to its initial state. * * @public */ reset(): void; /** * Checks the element. * If the element is disabled, nothing happens. * * @public * @override */ check(): void; /** * Unchecks the element. * If the element is disabled, nothing happens. * * @public * @override */ uncheck(): void; /** * Toggles the element between checked and unchecked states. * * @public * @override */ toggle(): void; protected onApplyTemplate(): void; } /** * @public */ export declare namespace ToggleSwitchElement { type Props = IToggleSwitchElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-toggle-switch': ToggleSwitchElement; } } export {}; //# sourceMappingURL=ToggleSwitchElement.d.ts.map