import type { EventEmitter } from '../../stencil-public-runtime'; import type { CheckboxChangeDetail, CheckboxSize } from './mud-checkbox.types'; import type { LocaleProp } from '../../utils/locale'; /** * Checkbox — boolean / tri-state form control. * * Pattern B (atom-interactive, form-associated): renders its own visual box * inside shadow DOM plus a screen-reader-friendly ``. * Form participation works via `formAssociated` + `ElementInternals`. * * Visual states mirror Figma `Mode × State × Size`: * Mode = Unchecked | Checked | Indeterminate * State = Default | Focus | Error (`invalid`) | Disabled * Size = Medium (24px) | Small (20px) * * Indeterminate is a visual-only third state — `checked` semantics are unchanged. * * @element mud-checkbox * * @slot label - Rich label content. Replaces the `label` prop when present. * @slot supporting-text - Rich supporting/helper text below the label. Replaces the * `supportingText` prop when present. */ export declare class MudCheckbox { /** * Visual size rung. * @default 'md' */ size: CheckboxSize; /** * Checked state. Mutable — toggled by user interaction and reflected as the * `checked` host attribute. Read in `change` listeners via `event.target.checked`. * @default false */ checked: boolean; /** * Tri-state visual marker. When `true`, the box renders a dash glyph * regardless of `checked`. Indeterminate is a purely visual hint — * the submitted form value still follows `checked`. * @default false */ indeterminate: boolean; /** * Disables interactivity. Sets `aria-disabled` and the native `disabled`. * @default false */ disabled: boolean; /** * Forces destructive visuals (red border, red fill on checked). * Sets `aria-invalid="true"`. * @default false */ invalid: boolean; /** * Marks the field as mandatory for form validation. * Adds `aria-required="true"`. * @default false */ required: boolean; /** * Renders read-only — checkbox keeps focus but ignores toggles. * @default false */ readonly: boolean; /** Form-control `name`. Used during form submission. */ name?: string; /** Form value submitted when `checked`. Defaults to `'on'` like native checkboxes. */ value?: string; /** * Visible label text, which also names the input. The `label` slot replaces it * for rich content. For an accessible name with no visible text, set the native * `aria-label` attribute instead. */ label?: string; /** * Visible supporting text below the label, wired to the input through * `aria-describedby`. The `supporting-text` slot replaces it for rich content. */ supportingText?: string; /** * Plain-text error message shown below the label and the supporting text when `invalid` is set. * Pairs with the filled `circle-error` icon and is wired to the control via * `aria-describedby`, after the supporting text. Mirrors the `errorText` convention of * `mud-text-input` / `mud-textarea`. */ errorText?: string; /** Accessible name id reference. Forwarded to the internal control. */ ariaLabelledby?: string; /** * Language of the built-in copy. Unset, the component follows the closest ancestor `lang` * (`` included), else `ro-MD`. */ locale?: LocaleProp; /** * Validation message reported when the field is `required` and unchecked. Overrides the * `locale`'s copy when set to a non-empty string. * @default 'Bifați această casetă pentru a continua.' (ro-MD) */ requiredMessage?: string; private hasLabelSlot; private hasSupportingSlot; private isFocused; private fieldsetDisabled; /** The host's `aria-label` (attribute or native `ariaLabel` property), used as the accessible-name override. */ private resolvedAriaLabel?; host: HTMLMudCheckboxElement; internals: ElementInternals; /** Fires when `checked` (or `indeterminate`) changes from a user action. */ mudChange: EventEmitter; /** Fires when the control gains focus. The native `FocusEvent` is forwarded as-is. */ mudFocus: EventEmitter; /** Fires when the control loses focus. The native `FocusEvent` is forwarded as-is. */ mudBlur: EventEmitter; private readonly instanceId; private readonly labelId; private readonly supportingId; private readonly errorId; private initialChecked; private nativeRef?; private stopAriaLabel?; private stopLang?; validateSize(next: CheckboxSize): void; handleCheckedChange(next: boolean): void; handleValueChange(): void; handleRequiredChange(): void; handleLocaleChange(): void; connectedCallback(): void; disconnectedCallback(): void; /** Built-in strings in the resolved locale, with the override props on top. */ private messages; componentWillLoad(): void; componentDidLoad(): void; componentDidUpdate(): void; /** Mirrors `disabled` from an ancestor `
` without clobbering the consumer-set prop. */ formDisabledCallback(disabled: boolean): void; formResetCallback(): void; formStateRestoreCallback(state: string | File | FormData | null): void; private syncFormValue; private updateValidity; private applyIndeterminate; private onLabelSlotChange; private onSupportingSlotChange; private slotHasContent; private handleChange; private handleFocus; private handleBlur; private isInert; private hasErrorMessage; render(): any; private renderGlyph; }