import { EventEmitter } from '../../stencil-public-runtime'; import type { CheckboxChangeDetail, CheckboxSize } from './mud-checkbox.types'; /** * 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. */ 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; /** * Accessible-name fallback. Used as `aria-label` on the internal input * when no `label` slot is provided. Does NOT render visible text — use * the `label` slot for that. Matches the `mud-button` convention. */ label?: string; /** * Accessible-description fallback. Reserved for future use as * `aria-describedby` source when no `supporting-text` slot is provided. * Does NOT render visible text — use the `supporting-text` slot for that. */ supportingText?: string; /** * Plain-text error message shown below the label when `invalid` is set. * Pairs with the `circle-error-filled` icon and is wired to the control via * `aria-describedby`. When present (and `invalid`) it replaces the supporting * text. Mirrors the `errorText` convention of `mud-input` / `mud-textarea`. */ errorText?: string; /** Accessible name override. Used when no visible label is present. */ ariaLabel?: string; /** Accessible name id reference. Forwarded to the internal control. */ ariaLabelledby?: string; private hasLabelSlot; private hasSupportingSlot; private isFocused; private fieldsetDisabled; 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?; validateSize(next: CheckboxSize): void; handleCheckedChange(next: boolean): void; handleRequiredChange(): void; 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; }