import { IEventEmitter } from '@breadstone/mosaik-elements';
import { IIndicatedEventDetail } from '../../../events';
import { CustomElement } from '../../Abstracts/CustomElement';
import { IIndicatorElementProps } from './IIndicatorElementProps';
declare const IndicatorElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Disableable").IDisableableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Variantable").IVariantableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Orientable").IOrientableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor;
/**
 * Indicator - A visual navigation element showing current position within a set of items.
 *
 * @description
 * The Indicator element displays a series of clickable dots or markers representing pagination,
 * carousel positions, or step progress. Users can click individual indicators to navigate directly
 * to specific items. The active indicator is visually distinguished to show the current position.
 * Commonly used in image carousels, onboarding flows, multi-step forms, and slideshow components.
 *
 * @name Indicator
 * @element mosaik-indicator
 * @category Primitives
 *
 * @csspart list - The container list element for all indicator items
 * @csspart listItem - Individual indicator dot/marker element
 *
 * @cssprop {String} --indicator-background-color - Background color of inactive indicators
 * @cssprop {String} --indicator-border-color - Border color of indicators
 * @cssprop {String} --indicator-border-radius - Border radius of indicator dots
 * @cssprop {String} --indicator-border-style - Border style (solid, dashed, etc.)
 * @cssprop {String} --indicator-border-width - Border width of indicators
 * @cssprop {String} --indicator-font-family - Font family for indicator text (if any)
 * @cssprop {String} --indicator-font-size - Font size for indicator numbers
 * @cssprop {String} --indicator-font-weight - Font weight for indicator text
 * @cssprop {String} --indicator-foreground-color - Color of active/text indicators
 * @cssprop {String} --indicator-gap - Spacing between individual indicators
 * @cssprop {String} --indicator-shadow - Shadow applied to indicator dots
 * @cssprop {String} --indicator-transition-duration - Duration of state change animations
 * @cssprop {String} --indicator-transition-mode - Timing function for transitions
 * @cssprop {String} --indicator-transition-property - CSS properties to animate
 *
 * @fires indicated {IndicatedEvent} - Fired when user clicks an indicator, includes selected index
 *
 * @example
 * Basic carousel indicator:
 * ```html
 * <div class="carousel">
 *   <div class="carousel-track" id="track">
 *     <div class="slide">Slide 1</div>
 *     <div class="slide">Slide 2</div>
 *     <div class="slide">Slide 3</div>
 *     <div class="slide">Slide 4</div>
 *   </div>
 *   <mosaik-indicator id="carouselIndicator" total="4" selected="0"></mosaik-indicator>
 * </div>
 *
 * <script>
 *   const indicator = document.getElementById('carouselIndicator');
 *   indicator.addEventListener('indicated', (e) => {
 *     document.getElementById('track').scrollTo({
 *       left: e.detail.index * 300,
 *       behavior: 'smooth'
 *     });
 *   });
 * </script>
 * ```
 *
 * @example
 * Onboarding stepper:
 * ```html
 * <div class="onboarding">
 *   <div id="step-content">Welcome to Step 1</div>
 *   <mosaik-indicator
 *     id="stepper"
 *     total="5"
 *     selected="0"
 *     variant="primary"
 *     orientation="horizontal">
 *   </mosaik-indicator>
 * </div>
 *
 * <script>
 *   const stepper = document.getElementById('stepper');
 *   stepper.addEventListener('indicated', (e) => {
 *     loadStep(e.detail.index);
 *   });
 * </script>
 * ```
 *
 * @example
 * Vertical progress indicator:
 * ```html
 * <mosaik-indicator
 *   total="6"
 *   selected="2"
 *   orientation="vertical"
 *   variant="success">
 * </mosaik-indicator>
 * ```
 *
 * @public
 */
export declare class IndicatorElement extends IndicatorElement_base implements IIndicatorElementProps {
    private readonly _indicated;
    private _total;
    private _selected;
    constructor();
    /**
     * Returns the `is` property.
     *
     * @public
     * @static
     * @readonly
    */
    static get is(): string;
    /**
     * Gets or sets the `total` count of indicators.
     *
     * @attr
     * @public
     */
    get total(): number;
    set total(value: number);
    /**
     * Gets or sets the `selected` indicator.
     *
     * @attr
     * @public
     */
    get selected(): number;
    set selected(value: number);
    /**
     * Called when the indicated value changes.
     * Provides reference to `any` as event argument.
     *
     * @public
     * @readonly
     * @eventProperty
     * @type EventEmitter<any>
     */
    get indicated(): IEventEmitter<IIndicatedEventDetail>;
    /**
     * @private
     * @template
     */
    onItemClick(index: number): void;
    /**
     * Emits the `indicated` event.
     *
     * @protected
     */
    protected onIndicated(args: IIndicatedEventDetail): void;
}
/**
 * @public
 */
export declare namespace IndicatorElement {
    type Props = IIndicatorElementProps;
}
/**
 * @public
 */
declare global {
    interface HTMLElementTagNameMap {
        'mosaik-indicator': IndicatorElement;
    }
}
export {};
//# sourceMappingURL=IndicatorElement.d.ts.map