import CwElement from '../../internal/cw-element.js';
import CwIcon from '../icon/icon.component.js';
import type { CSSResultGroup } from 'lit';
/**
 * @summary Stepper items are individual steps used inside a [stepper](/components/stepper) — a step indicator for
 *  multi-step forms, checkouts, and onboarding flows.
 * @documentation https://cordwainer.dev/components/stepper-item
 * @status experimental
 * @since 1.5
 *
 * @dependency cw-icon
 *
 * @slot - The step's label.
 * @slot completed-icon - Optional icon to use instead of the default checkmark when the step is completed.
 * @slot error-icon - Optional icon to show instead of the step number when the step has an error. By default the
 *  indicator keeps showing the step number (recolored) in the error state — this slot only renders when you
 *  explicitly provide content for it.
 *
 * @event cw-show - Emitted when the step becomes active.
 * @event cw-after-show - Emitted after the step becomes active.
 * @event cw-hide - Emitted when the step is no longer active.
 * @event cw-after-hide - Emitted after the step is no longer active.
 *
 * @csspart base - The component's base wrapper.
 * @csspart header - The clickable header containing the indicator and label.
 * @csspart indicator - The circular indicator showing the step number, or a completed icon once the step is done.
 * @csspart label - The container that wraps the step's label.
 */
export default class CwStepperItem extends CwElement {
    static styles: CSSResultGroup;
    static dependencies: {
        'cw-icon': typeof CwIcon;
    };
    header: HTMLElement;
    /**
     * Indicates whether or not this is the current step. Only one step in a `<cw-stepper>` should be active at a time
     * — the stepper manages this for you as steps are activated, but you can also set it directly.
     */
    active: boolean;
    /** Indicates that this step has been completed. Steppers in `linear` mode use this to gate which steps can be reached. */
    completed: boolean;
    /** Disables the step so it can't be activated. */
    disabled: boolean;
    /** Indicates that this step has an error, shown as a distinct visual state on the indicator. */
    error: boolean;
    /**
     * The step's position within its `<cw-stepper>`, 1-based. Set automatically by the parent stepper — you shouldn't
     * need to set this yourself.
     */
    index: number;
    /**
     * The orientation of the stepper this item belongs to, used to draw the connecting line to the next step. Set
     * automatically by the parent stepper — you shouldn't need to set this yourself.
     */
    orientation: 'horizontal' | 'vertical';
    /** Moves focus to the step's header. */
    focus(options?: FocusOptions): void;
    /** Removes focus from the step's header. */
    blur(): void;
    private handleHeaderClick;
    handleActiveChange(): void;
    /** Activates the step, making it the current one. */
    show(): Promise<void>;
    /** Deactivates the step. Only the parent `<cw-stepper>` normally needs to call this. */
    hide(): Promise<void>;
    render(): import("lit-html").TemplateResult<1>;
}