import { FASTElement } from "@microsoft/fast-element";
import type { WizardPanelState } from "./wizard-panel.options.js";
/**
 * WizardPanel
 * @summary A customizable panel component for a wizard-style interface.
 *
 * @example
 * ```html
 * <fabric-wizard-panel id="step1" state="incomplete" hidden>
 *   <div slot="start">Start Content</div>
 *   <div slot="title">Step 1: Title</div>
 *   <div>Step Content</div>
 *   <div slot="footer">Step Footer</div>
 *   <div slot="end">End Content</div>
 * </fabric-wizard-panel>
 * ```
 *
 * @attr {boolean} hidden - Indicates whether the panel is hidden.
 * @attr {WizardStepState} state - The state of the panel.
 * @attr {boolean} active - Indicates whether the panel is active.
 *
 * @prop {number | undefined} index - The index of the panel in the wizard sequence.
 * @prop {boolean} hidden - Indicates whether the panel is hidden.
 * @prop {WizardStepState} state - The current state of the wizard step.
 * @prop {boolean} active - Indicates whether the panel is currently active.
 *
 * @slot default - The default content of the 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 title - The content to display as the title of the step.
 * @slot footer - The content to display as the footer of the step.
 *
 * @csspart panel - The root panel container element.
 * @csspart title - The title.
 * @csspart content - The content.
 * @csspart footer - The footer.
 *
 * @method stateChanged - Handles changes to the state attribute.
 * @method activeChanged - Handles changes to the active attribute.
 * @method hiddenChanged - Handles changes to the hidden attribute.
 * @method show - Shows the panel by setting the hidden attribute to false.
 * @method hide - Hides the panel by setting the hidden attribute to true.
 * @method emitChange - Emits a custom event indicating a change in the panel's state.
 *
 * @fires panel-change - Dispatched when the panel state changes.
 *
 * @extends FASTElement
 * @tagname fabric-wizard-panel
 * @public
 */
export declare class WizardPanel extends FASTElement {
    /**
     * The index of the panel in the wizard sequence.
     * @public
     * @observable
     * @type {number | undefined}
     */
    index?: number;
    /**
     * Indicates whether the panel is hidden.
     * @public
     * @attr
     * @type {boolean}
     * @default true
     */
    hidden: boolean;
    /**
     * The current state of the wizard step.
     * @public
     * @attr
     * @type {WizardPanelState}
     * @default incomplete
     */
    state: WizardPanelState;
    /**
     * Indicates whether the panel is currently active.
     * @public
     * @attr
     * @type {boolean}
     * @default false
     */
    active: boolean;
    /**
     * Handles changes to the state attribute.
     * @public
     * @param {WizardPanelState} oldValue - The previous state value.
     * @param {WizardPanelState} newValue - The new state value.
     */
    stateChanged(oldValue: WizardPanelState, newValue: WizardPanelState): 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;
    /**
     * Handles changes to the hidden attribute.
     * @public
     * @param {boolean} oldValue - The previous hidden value.
     * @param {boolean} newValue - The new hidden value.
     */
    hiddenChanged(oldValue: boolean, newValue: boolean): void;
    /**
     * Shows the panel by setting the hidden attribute to false.
     * @public
     */
    show(): void;
    /**
     * Hides the panel by setting the hidden attribute to true.
     * @public
     */
    hide(): void;
    /**
     * Emits a custom event indicating a change in the panel's state.
     * @public
     */
    emitChange(): void;
}
//# sourceMappingURL=wizard-panel.d.ts.map