@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
63 lines • 2.61 kB
TypeScript
/**
* @license
* Copyright 2025 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*/
import { type TemplateResult } from "lit";
import { createValidator, getValidityAnchor } from '../../utils/behaviors/constraint-validation';
import { CheckboxValidator } from '../../utils/behaviors/validators/checkbox-validator';
import { getFormState, getFormValue } from '../../utils/form/form-associated';
import { BaseButton } from './base-button';
declare const TogglableButton_base: import("../../utils/behaviors/mixin").MixinReturn<import("../../utils/behaviors/mixin").MixinReturn<typeof BaseButton & import("../../utils/form/form-associated").FormAssociatedConstructor, import("../../utils/form/form-associated").FormAssociated>, import("../../utils/behaviors/constraint-validation").ConstraintValidation>;
/**
* `mdc-toggle-button variant="text"` is not supported by M3 Expressive.
*
* @version
* Material Design 3 - Expressive
*
* @link
* https://m3.material.io/components/buttons/overview
* https://www.figma.com/design/4GM7ohCF2Qtjzs7Fra6jlp/Material-3-Design-Kit--Community-?node-id=57994-2328&t=kLfic7eA8vKtkiiO-0
*/
export declare class TogglableButton extends TogglableButton_base {
static styles: import("lit").CSSResult[];
disabled: boolean;
name: string;
variant: 'filled' | 'filled-tonal' | 'elevated' | 'outlined';
value: string;
selected: boolean;
/**
* When true, require the toggle-button to be selected when participating in
* form submission.
*
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation
*/
required: boolean;
/**
* We use the <input /> element as a replacement for the button element.
* The state is managed by the input element.
*/
protected readonly buttonElement: HTMLInputElement | null;
protected getRenderClasses(): {
togglable: boolean;
selected: boolean;
unselected: boolean;
container: boolean;
'has-icon': boolean;
'has-label': boolean;
'disable-morph': boolean;
disabled: boolean;
};
protected render(): TemplateResult;
protected renderTouchTarget(): TemplateResult<1>;
protected handleInput(_: InputEvent): void;
protected handleChange(event: Event): void;
[getFormValue](): string | null;
[getFormState](): string;
formResetCallback(): void;
formStateRestoreCallback(state: string): void;
[createValidator](): CheckboxValidator;
[getValidityAnchor](): HTMLInputElement | null;
}
export {};
//# sourceMappingURL=toggle-button.d.ts.map