/**
 * Wizard Component
 *
 * A carousel-based wizard/stepper component with smooth animations, progress tracking, and completion state.
 * Features horizontal sliding transitions between steps, animated progress line, and step completion tracking.
 * Behaves like tabs - a "dumb" component that only renders and fires events. All navigation and validation
 * is controlled by the user.
 *
 * Features:
 * - Carousel animation with smooth sliding transitions between steps
 * - Fixed dimensions prevent layout shift between steps
 * - Animated progress line showing completion status
 * - Step indicators with completed/active/pending states
 * - Rich indicator support via slots (icons, custom content)
 * - Independent panel scrolling with scroll position reset
 * - ResizeObserver for responsive percentage widths
 * - Smart rendering - only updates DOM when necessary
 * - Accessibility with ARIA roles and attributes
 * - Fires events on step clicks - user controls navigation
 *
 * @example
 * <!-- Basic wizard with text labels -->
 * <ty-wizard width="900px" height="600px" active="welcome">
 *   <ty-step id="welcome" label="Welcome">
 *     <div class="p-6">
 *       <h1>Welcome!</h1>
 *       <button onclick="goToStep('account')">Next</button>
 *     </div>
 *   </ty-step>
 *   <ty-step id="account" label="Account Setup">
 *     <div class="p-6">
 *       <h2>Account Setup</h2>
 *       <button onclick="goToStep('welcome')">Previous</button>
 *       <button onclick="goToStep('complete')">Next</button>
 *     </div>
 *   </ty-step>
 * </ty-wizard>
 *
 * @example
 * <!-- Wizard with custom indicators -->
 * <ty-wizard width="100%" height="700px" active="welcome" completed="welcome,account">
 *   <!-- Custom indicator icons -->
 *   <div slot="indicator-welcome">
 *     <ty-icon name="hand" size="sm"></ty-icon>
 *   </div>
 *   <div slot="indicator-account">
 *     <span class="text-lg font-bold">1</span>
 *   </div>
 *
 *   <ty-step id="welcome" label="Welcome">...</ty-step>
 *   <ty-step id="account" label="Account">...</ty-step>
 *   <ty-step id="profile" label="Profile">...</ty-step>
 * </ty-wizard>
 */
/**
 * Wizard container attributes configuration
 */
export interface WizardAttributes {
    width: string;
    height: string;
    active: string | null;
    completed: string;
    orientation: 'horizontal' | 'vertical';
}
/**
 * Wizard step change event detail
 */
export interface WizardStepChangeDetail {
    activeId: string;
    activeIndex: number;
    previousId: string | null;
    previousIndex: number | null;
    direction: 'forward' | 'backward' | 'none';
}
/**
 * TyWizard Web Component
 */
export declare class TyWizard extends HTMLElement {
    /** Observed attributes */
    static get observedAttributes(): string[];
    constructor();
    connectedCallback(): void;
    disconnectedCallback(): void;
    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
}
//# sourceMappingURL=wizard.d.ts.map