import { IEventEmitter } from '@breadstone/mosaik-elements';
import { ISlottable } from '../../../Behaviors/Slottable';
import type { IActiveStepChangedEventDetail } from '../../../events';
import { SelectorElement } from '../Abstracts/Selector/SelectorElement';
import type { IStepperElementProps } from './IStepperElementProps';
import { StepperItemElement } from './StepperItemElement';
declare const StepperElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Slottable").ISlottableProps & ISlottable) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Fitable").IFitableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Disableable").IDisableableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Orientable").IOrientableProps) & (abstract new () => SelectorElement<any>) & import("../../../Behaviors/Themeable").IThemeableCtor;
/**
 * Stepper - A multi-step workflow component for guiding users through sequential processes.
 *
 * @description
 * The Stepper component provides a visual representation of a multi-step process, guiding users
 * through a sequence of steps to complete a task or workflow. It displays step headers with icons
 * or numbers, optional descriptions, and maintains the current active step state. The stepper
 * supports both horizontal and vertical orientations, step state indicators (pending, completed,
 * error), and allows users to navigate between steps by clicking on step headers. It's ideal for
 * forms, wizards, onboarding flows, and any sequential process that benefits from visual progress
 * tracking.
 *
 * @name Stepper
 * @element mosaik-stepper
 * @category Selectors
 *
 * @slot header - Custom header content above the stepper
 * @slot steps - The stepper item elements (mosaik-stepper-item)
 * @slot footer - Custom footer content below the stepper content
 *
 * @csspart header - The header container with step indicators
 * @csspart step-container - Individual step header container
 * @csspart step - The clickable step button
 * @csspart step-icon - The step icon/number wrapper
 * @csspart step-state - The pip element for step icon or number
 * @csspart step-text - The step text container
 * @csspart step-header - The step header text
 * @csspart step-description - The step description text
 * @csspart step-optional - The optional/hint text
 * @csspart connector - The line connecting steps
 * @csspart content - The main content area for active step
 * @csspart footer - The footer container
 *
 * @cssprop {String} --stepper-font-family - The font family for stepper text
 * @cssprop {String} --stepper-foreground-color - The text and icon color
 * @cssprop {String} --stepper-gap - The spacing between steps and elements
 * @cssprop {String} --stepper-header-padding-vertical - The vertical padding for step headers
 * @cssprop {String} --stepper-step-padding-vertical - The vertical padding for step buttons
 * @cssprop {String} --stepper-icon-size - The size of step icons
 * @cssprop {String} --stepper-icon-border-width - The border width of step icons
 * @cssprop {String} --stepper-icon-radius - The border radius of step icons
 * @cssprop {String} --stepper-icon-shadow - The drop shadow for step icons
 * @cssprop {String} --stepper-connector-background - The background color of connectors
 * @cssprop {String} --stepper-connector-size - The thickness of connector lines
 * @cssprop {String} --stepper-connector-radius - The border radius of connectors
 * @cssprop {String} --stepper-connector-margin - The margin around connectors
 * @cssprop {String} --stepper-content-gap - The spacing in the content area
 * @cssprop {String} --stepper-description-size - The font size for descriptions
 * @cssprop {String} --stepper-text-gap - The spacing between text elements
 * @cssprop {String} --stepper-focus-outline-width - The width of focus outlines
 * @cssprop {String} --stepper-focus-outline-offset - The offset of focus outlines
 * @cssprop {String} --stepper-vertical-connector-length - The length of vertical connectors
 * @cssprop {String} --stepper-vertical-connector-margin - The margin for vertical connectors
 *
 * @dependency {StepperItemElement} - Individual stepper step content component
 * @dependency {IconElement} - Icon display component for step indicators
 * @dependency {TextElement} - Text rendering component for step labels
 *
 * @fires activeStepChanged {ActiveStepChangedEvent} - Fired when the active step changes
 * @fires connected {ConnectedEvent} - Fired when connected to the DOM
 * @fires changed {PropertyChangedEvent} - Fired when properties change
 *
 * @example
 * Basic horizontal stepper:
 * ```html
 * <mosaik-stepper>
 *   <mosaik-stepper-item header="Account Details" is-active>
 *     <p>Enter your account information.</p>
 *   </mosaik-stepper-item>
 *   <mosaik-stepper-item header="Verification">
 *     <p>Verify your email address.</p>
 *   </mosaik-stepper-item>
 *   <mosaik-stepper-item header="Completion">
 *     <p>Your account is ready!</p>
 *   </mosaik-stepper-item>
 * </mosaik-stepper>
 * ```
 *
 * @example
 * Vertical stepper with descriptions:
 * ```html
 * <mosaik-stepper orientation="vertical">
 *   <mosaik-stepper-item header="Step 1" description="Choose your plan" state="completed"></mosaik-stepper-item>
 *   <mosaik-stepper-item header="Step 2" description="Enter payment details" is-active></mosaik-stepper-item>
 *   <mosaik-stepper-item header="Step 3" description="Confirm order"></mosaik-stepper-item>
 * </mosaik-stepper>
 * ```
 *
 * @example
 * Stepper with step states and hints:
 * ```html
 * <mosaik-stepper>
 *   <mosaik-stepper-item header="Upload" state="completed"></mosaik-stepper-item>
 *   <mosaik-stepper-item header="Process" state="error" hint="Required"></mosaik-stepper-item>
 *   <mosaik-stepper-item header="Finish" state="pending"></mosaik-stepper-item>
 * </mosaik-stepper>
 * ```
 *
 * @public
 */
export declare class StepperElement extends StepperElement_base implements IStepperElementProps, ISlottable {
    private readonly _provider;
    private readonly _activeStepChanged;
    /**
     * @public
     */
    constructor();
    /**
     * Returns the `is` property.
     *
     * @public
     * @static
     * @override
     * @readonly
     */
    static get is(): string;
    /**
     * Returns the `items` property.
     *
     * @public
     * @override
     * @readonly
     */
    get items(): Array<StepperItemElement>;
    /**
     * Gets the active index of the stepper.
     *
     * @public
     * @readonly
     */
    get activeIndex(): number;
    /**
     * Gets the first step indicator.
     *
     * @public
     * @readonly
     */
    get isFirstStep(): boolean;
    /**
     * Gets the last step indicator.
     *
     * @public
     * @readonly
     */
    get isLastStep(): boolean;
    /**
     * Called when the active step has changed.
     * Provides reference to `IActiveStepChangedEventDetail` as event detail.
     *
     * @public
     * @readonly
     * @eventProperty
     */
    get activeStepChanged(): IEventEmitter<IActiveStepChangedEventDetail>;
    /**
     * @protected
     * @template
     */
    onSlotChange(): void;
    /**
     * Ensures that at least one step is active.
     * If no step is active, the first step will be selected.
     *
     * @protected
     */
    protected ensureActiveStep(): void;
    /**
     * Handles a step invocation from the header.
     *
     * @public
     * @param step - The step that has been invoked.
     */
    onStepInvoked(step: StepperItemElement): void;
    /**
     * @protected
     * @override
     */
    protected onSelectionChanged(oldIndex: number, newIndex: number): void;
    /**
     * Emits the `activeStepChanged` event.
     *
     * @protected
     */
    protected onActiveStepChanged(args: IActiveStepChangedEventDetail): void;
    /**
     * @protected
     */
    protected onSelectedIndexPropertyChanged(_prev: number, next: number): void;
}
/**
 * @public
 */
export declare namespace StepperElement {
    type Props = IStepperElementProps;
}
/**
 * @public
 */
declare global {
    interface HTMLElementTagNameMap {
        'mosaik-stepper': StepperElement;
    }
}
export {};
//# sourceMappingURL=StepperElement.d.ts.map