import { FormControlController } from '../../internal/form.js';
import CwElement from '../../internal/cw-element.js';
import type { CSSResultGroup } from 'lit';
import type { CwFormControl } from '../../internal/cw-element.js';
/**
 * @summary Segmented buttons let the user select a single option from a set, styled as a joined row of buttons —
 *  visually like a [button group](/components/button-group), but behaves like a [radio group](/components/radio-group)
 *  (single selection, form-associated value).
 * @documentation https://cordwainer.dev/components/segmented-button
 * @status experimental
 * @since 1.5
 *
 * @slot - One or more `<cw-radio-button>` elements to display as segments.
 *
 * @event cw-change - Emitted when the selected value changes.
 * @event cw-input - Emitted when the segmented button receives user input.
 * @event cw-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
 *
 * @csspart base - The component's base wrapper.
 */
export default class CwSegmentedButton extends CwElement implements CwFormControl {
    static styles: CSSResultGroup;
    protected readonly formControlController: FormControlController;
    private customValidityMessage;
    private validationTimeout;
    private segmentObserver;
    defaultSlot: HTMLSlotElement;
    validationInput: HTMLInputElement;
    /**
     * A label to use for the segmented button. This won't be displayed on the screen, but it will be announced by
     * assistive devices when interacting with the control and is strongly recommended.
     */
    label: string;
    /** The name of the segmented button, submitted as a name/value pair with form data. */
    name: string;
    /** The current value of the segmented button, submitted as a name/value pair with form data. */
    value: string;
    /** The segmented button's size. Applied to every child `<cw-radio-button>`. */
    size: 'small' | 'medium' | 'large';
    /** Disables the entire segmented button, blocking interaction and excluding it from constraint validation. */
    disabled: boolean;
    /**
     * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
     * to place the form control outside of a form and associate it with the form that has this `id`. The form must be
     * in the same document or shadow root for this to work.
     */
    form: string;
    /** Ensures a segment is selected before allowing the containing form to submit. */
    required: boolean;
    defaultValue: string;
    /** Gets the validity state object. */
    get validity(): ValidityState;
    /** Gets the validation message. */
    get validationMessage(): string;
    connectedCallback(): void;
    disconnectedCallback(): void;
    firstUpdated(): void;
    /** The segments the component can work with — the ones that have been upgraded. */
    private getAllSegments;
    private handleSegmentClick;
    private handleKeyDown;
    private selectSegment;
    private syncSegments;
    private syncUpgradedSegments;
    private handleFocus;
    private handleBlur;
    private handleMouseOver;
    private handleMouseOut;
    private handleInvalid;
    handleSizeChange(): void;
    handleValueChange(): void;
    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
    checkValidity(): boolean;
    /** Gets the associated form, if one exists. */
    getForm(): HTMLFormElement | null;
    /** Checks for validity and shows the browser's validation message if the control is invalid. */
    reportValidity(): boolean;
    /** Sets a custom validation message. Pass an empty string to restore validity. */
    setCustomValidity(message?: string): void;
    /** Sets focus on the segmented button. */
    focus(options?: FocusOptions): void;
    render(): import("lit-html").TemplateResult<1>;
}