import { type Readable } from '@vielzeug/ripple';
import type { ComponentSize, ThemeColor } from '../../types';
/** Context provided by ore-stepper to its ore-step children. */
export type StepperContext = {
    clickable: Readable<boolean>;
    color: Readable<ThemeColor | undefined>;
    currentValue: Readable<string | undefined>;
    linear: Readable<boolean>;
    orientation: Readable<'horizontal' | 'vertical'>;
    size: Readable<ComponentSize | undefined>;
    /** Ordered `value`s of every sibling `ore-step`, used to derive index/total/completed. */
    stepValues: Readable<string[]>;
};
/** Injection key for the stepper context. */
export declare const STEPPER_CTX: import("@vielzeug/ore").InjectionKey<StepperContext>;
export type OreStepperEvents = {
    change: {
        value: string;
    };
};
export type OreStepperProps = {
    /** When true, steps are clickable/keyboard-focusable for navigation. Default: display-only progress. */
    clickable?: boolean;
    /** Theme color for the current/completed step indicators */
    color?: ThemeColor;
    /** Disables the whole stepper — no step is navigable regardless of `clickable` */
    disabled?: boolean;
    /** Accessible label for the nav landmark */
    label?: string;
    /**
     * Restricts navigation to completed steps and the current step — steps ahead of the
     * current one cannot be clicked or focused, even when `clickable` is set.
     */
    linear?: boolean;
    /** Layout orientation — 'horizontal' (default, desktop) or 'vertical' (compact/mobile-friendly) */
    orientation?: 'horizontal' | 'vertical';
    /** Component size */
    size?: ComponentSize;
    /** The `value` of the currently active `ore-step` */
    value?: string;
};
/**
 * Displays progress through a sequence of numbered steps. Manages step selection and provides
 * shared state (current value, clickability, theming) to its `ore-step` children via context.
 * Can be purely informational (progress display) or interactive navigation.
 *
 * @element ore-stepper
 * @element ore-step - Child element for each step (auto-discovered)
 *
 * @attr {string} value - The value of the currently active step
 * @attr {boolean} clickable - Allow clicking/focusing steps to navigate
 * @attr {boolean} linear - Restrict navigation to completed + current steps only
 * @attr {boolean} disabled - Disables the whole stepper
 * @attr {string} orientation - 'horizontal' (default) | 'vertical'
 * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
 * @attr {string} size - Size: 'sm' | 'md' | 'lg'
 * @attr {string} label - Accessible nav landmark label (default: 'Progress')
 *
 * @fires change - Emitted when the active step changes via click/keyboard. detail: { value: string }
 *
 * @slot - `ore-step` elements
 *
 * @cssprop --stepper-connector-color - Color of the connector line between steps
 * @cssprop --stepper-connector-size - Thickness of the connector line
 * @cssprop --stepper-gap - Gap between steps
 *
 * @part nav - Navigation landmark element
 * @part list - Ordered list container holding the slotted steps
 *
 * @example
 * ```html
 * <!-- Display-only progress -->
 * <ore-stepper value="shipping" color="primary">
 *   <ore-step value="cart">Cart</ore-step>
 *   <ore-step value="shipping">Shipping</ore-step>
 *   <ore-step value="payment">Payment</ore-step>
 * </ore-stepper>
 *
 * <!-- Clickable navigation, mobile-friendly vertical layout -->
 * <ore-stepper value="shipping" clickable linear orientation="vertical">
 *   <ore-step value="cart">Cart</ore-step>
 *   <ore-step value="shipping">Shipping</ore-step>
 *   <ore-step value="payment" disabled>Payment</ore-step>
 * </ore-stepper>
 * ```
 */
export declare const STEPPER_TAG: "ore-stepper";
//# sourceMappingURL=stepper.d.ts.map