import { FASTElement } from "@microsoft/fast-element";
import type { WizardStepState } from "./wizard-step.options.js";
/**
 * WizardStep
 * @summary A customizable step component for a wizard-style interface.
 *
 * @example
 * ```html
 * <fabric-wizard-step
 *   numbered
 *   active
 *   state="complete"
 *   aria-describedby="step1-details"
 *   aria-labelledby="step1-title"
 * >
 *   <span slot="start">Start Content</span>
 *   <span slot="end">End Content</span>
 *   <span slot="title" id="step1-title">Step 1: Title</span>
 *   <span slot="details" id="step1-details">Details about Step 1</span>
 *   <span slot="complete">Complete</span>
 *   <span slot="incomplete">Incomplete</span>
 *   <span slot="error">Error</span>
 * </fabric-wizard-step>
 * ```
 *
 * @attr {boolean | undefined} numbered - Indicates whether the step is numbered.
 * @attr {boolean | undefined} hideConnector - Indicates whether the connector is hidden.
 * @attr {boolean} active - Indicates whether the step is active.
 * @attr {boolean} disabled - Indicates whether the step is disabled.
 * @attr {string | undefined} ariaDescribedby - The aria-describedby attribute for accessibility.
 * @attr {string | undefined} ariaLabelledby - The aria-labelledby attribute for accessibility.
 * @attr {WizardStepState} state - The current state of the wizard step.
 *
 * @prop {number} index - The index of the step in the wizard sequence.
 * @prop {string} details - The details of the step.
 * @prop {string} title - The title of the step.
 * @prop {boolean | undefined} numbered - Indicates whether the step is numbered.
 * @prop {boolean | undefined} hideConnector - Indicates whether the connector is hidden.
 * @prop {boolean} active - Indicates whether the step is active.
 * @prop {boolean} disabled - Indicates whether the step is disabled.
 * @prop {string | undefined} ariaDescribedby - The aria-describedby attribute for accessibility.
 * @prop {string | undefined} ariaLabelledby - The aria-labelledby attribute for accessibility.
 * @prop {WizardStepState} state - The current state of the wizard step.
 *
 * @slot start - The content to display at the start of the step.
 * @slot end - The content to display at the end of the step.
 * @slot incomplete - The content to display when the step is incomplete.
 * @slot complete - The content to display when the step is complete.
 * @slot error - The content to display when the step has an error.
 * @slot title - The content to display as the title of the step.
 * @slot details - The content to display as the details of the step.
 *
 * @csspart state-indicator - The state indicator.
 * @csspart icon - The icon.
 * @csspart order - The ordinal number indicator displayed inside the step circle when the step is numbered.
 * @csspart summary - The summary.
 * @csspart title - The title.
 * @csspart details - The details.
 * @csspart step-connector - The visual connector line that links this step to the next step in the wizard sequence.
 *
 * @method stateChanged - Handles changes to the state attribute.
 * @method activeChanged - Handles changes to the active attribute.
 * @method toggleActive - Toggles the active state of the step.
 * @method setComplete - Sets the step to a complete state.
 * @method setIncomplete - Sets the step to an incomplete state.
 * @method setError - Sets the step to an error state.
 * @method emitChange - Emits a custom event indicating a change in the step's state.
 * @method emitSelect - Emits a custom event indicating a selection of the step.
 * @method clickHandler - Handles click events on the step.
 * @method keydownHandler - Handles keydown events on the step.
 *
 * @fires step-change - Dispatched when the step state changes.
 * @fires step-select - Dispatched when the user selects (clicks or activates via keyboard) this wizard step to navigate to it.
 *
 * @cssprop --borderRadiusCircular - The border radius used for the circular state indicator.
 * @cssprop --colorNeutralBackground4 - The background color of the state indicator in the default state.
 * @cssprop --colorNeutralForeground2 - The border color of the state indicator in the default state.
 * @cssprop --colorNeutralForegroundDisabled - The foreground color applied when the step is disabled.
 * @cssprop --fontSizeBase200 - The font size used for the order label and step details.
 * @cssprop --fontWeightRegular - The regular font weight used for the step title and details.
 * @cssprop --fontWeightSemibold - The semibold font weight used for the active step title.
 * @cssprop --lineHeightBase100 - The line height used for the order label.
 * @cssprop --lineHeightBase200 - The line height used for the step details text.
 *
 * @extends FASTElement
 * @tagname fabric-wizard-step
 * @public
 */
export declare class WizardStep extends FASTElement {
    /**
     * Indicates whether the step is numbered.
     * @public
     * @attr
     * @type {boolean | undefined}
     */
    numbered?: boolean;
    /**
     * Indicates whether the connector is hidden.
     * @public
     * @attr
     * @type {boolean | undefined}
     */
    hideConnector?: boolean;
    /**
     * Indicates whether the step is active.
     * @public
     * @attr
     * @type {boolean}
     * @default false
     */
    active: boolean;
    /**
     * Indicates whether the step is disabled.
     * @public
     * @attr
     * @type {boolean}
     * @default false
     */
    disabled?: boolean;
    /**
     * The aria-describedby attribute for accessibility.
     * @public
     * @attr
     * @type {string | undefined}
     */
    ariaDescribedby?: string;
    /**
     * The aria-labelledby attribute for accessibility.
     * @public
     * @attr
     * @type {string | undefined}
     */
    ariaLabelledby?: string;
    /**
     * The current state of the wizard step.
     * @public
     * @attr state
     * @type {WizardStepState}
     * @default incomplete
     */
    state: WizardStepState;
    /**
     * The button element.
     * @public
     * @observable
     * @type {HTMLButtonElement}
     */
    button: HTMLButtonElement;
    /**
     * The index of the step in the wizard sequence.
     * @public
     * @attr
     * @type {number}
     * @default 0
     */
    index: number;
    /**
     * The details of the step.
     * @public
     * @observable
     * @type {string}
     * @default ""
     */
    details: string;
    /**
     * The title of the step.
     * @public
     * @observable
     * @type {string}
     * @default ""
     */
    title: string;
    /**
     * Handles changes to the state attribute.
     * @public
     * @param {WizardStepState} oldValue - The previous state value.
     * @param {WizardStepState} newValue - The new state value.
     */
    stateChanged(oldValue: WizardStepState, newValue: WizardStepState): void;
    /**
     * Handles changes to the active attribute.
     * @public
     * @param {boolean} oldValue - The previous active value.
     * @param {boolean} newValue - The new active value.
     */
    activeChanged(oldValue: boolean, newValue: boolean): void;
    /**
     * Toggles the active state of the step.
     * @public
     */
    toggleActive(event?: Event): void;
    /**
     * Sets the step to a complete state.
     * @public
     */
    setComplete(): void;
    /**
     * Sets the step to an incomplete state.
     * @public
     */
    setIncomplete(): void;
    /**
     * Sets the step to an error state.
     * @public
     */
    setError(): void;
    /**
     * Emits a custom event indicating a change in the step's state.
     * @public
     */
    emitChange(): void;
    /**
     * Emits a custom event indicating a selection of the step.
     * @public
     */
    emitSelect(): void;
    /**
     * Handles click events on the step.
     * @public
     * @param {MouseEvent} event - The mouse event.
     */
    clickHandler(event?: MouseEvent): void;
    /**
     * Handles keydown events on the step.
     * @public
     * @param {KeyboardEvent} event - The keyboard event.
     */
    keydownHandler(event: KeyboardEvent): void;
}
//# sourceMappingURL=wizard-step.d.ts.map