import { InkBarPosition } from '../../../Types/InkBarPosition';
import { CustomElement } from '../../Abstracts/CustomElement';
import { IInkBarElementProps } from './IInkBarElementProps';
declare const InkBarElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Variantable").IVariantableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Appearanceable").IAppearanceableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Disableable").IDisableableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor;
/**
 * InkBar - An animated indicator bar that highlights active tabs or navigation items.
 *
 * @description
 * The InkBar element is a visual indicator that slides smoothly between elements to show the active
 * selection in tab groups, navigation menus, or segmented controls. It automatically aligns to a target
 * element and transitions smoothly when the target changes. Commonly used in Material Design-style
 * tab interfaces to provide clear visual feedback about the current selection.
 *
 * @name InkBar
 * @element mosaik-ink-bar
 * @category Primitives
 *
 * @csspart ink-bar - The animated indicator bar element (Note: template returns nothing, styling applied to host)
 *
 * @cssprop {String} --ink-bar-background-color - Background color of the indicator bar
 * @cssprop {String} --ink-bar-border-color - Border color of the indicator bar
 * @cssprop {String} --ink-bar-border-radius - Border radius for rounded corners
 * @cssprop {String} --ink-bar-foreground-color - Foreground color (if applicable)
 * @cssprop {String} --ink-bar-thickness - Height (bottom/top) or width (left/right) of the bar
 * @cssprop {String} --ink-bar-transition-duration - Duration of the slide animation
 * @cssprop {String} --ink-bar-transition-mode - Timing function for the animation
 * @cssprop {Array} --ink-bar-transition-property - CSS properties to animate
 *
 * @example
 * Basic ink bar with tab group:
 * ```html
 * <div class="tab-group">
 *   <button id="tab1" class="tab active">Tab 1</button>
 *   <button id="tab2" class="tab">Tab 2</button>
 *   <button id="tab3" class="tab">Tab 3</button>
 *   <mosaik-ink-bar id="inkBar" position="bottom"></mosaik-ink-bar>
 * </div>
 *
 * <script>
 *   const inkBar = document.getElementById('inkBar');
 *   const activeTab = document.querySelector('.tab.active');
 *   inkBar.target = activeTab;
 *
 *   document.querySelectorAll('.tab').forEach(tab => {
 *     tab.addEventListener('click', () => {
 *       document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
 *       tab.classList.add('active');
 *       inkBar.target = tab;
 *     });
 *   });
 * </script>
 * ```
 *
 * @example
 * Vertical navigation with left-side indicator:
 * ```html
 * <nav class="vertical-nav">
 *   <a href="#home" class="nav-item active">Home</a>
 *   <a href="#about" class="nav-item">About</a>
 *   <a href="#contact" class="nav-item">Contact</a>
 *   <mosaik-ink-bar position="left" variant="primary"></mosaik-ink-bar>
 * </nav>
 * ```
 *
 * @example
 * Programmatic alignment:
 * ```html
 * <div id="container">
 *   <div id="item1">Item 1</div>
 *   <div id="item2">Item 2</div>
 *   <mosaik-ink-bar id="bar"></mosaik-ink-bar>
 * </div>
 *
 * <script>
 *   const bar = document.getElementById('bar');
 *   bar.target = document.getElementById('item1');
 *
 *   // Later, move to item2
 *   setTimeout(() => {
 *     bar.target = document.getElementById('item2');
 *   }, 2000);
 * </script>
 * ```
 *
 * @public
 */
export declare class InkBarElement extends InkBarElement_base implements IInkBarElementProps {
    private _position;
    private _target;
    /**
     * @public
     */
    constructor();
    /**
     * Returns the `is` property.
     * The `is` property represents natural name of this element.
     *
     * @public
     * @static
     * @readonly
     */
    static get is(): string;
    /**
     * Gets or sets the `target` property.
     *
     * @public
     */
    get target(): HTMLElement | null;
    set target(value: HTMLElement | null);
    /**
     * Gets or sets the `position` property.
     *
     * @public
     * @attr
     */
    get position(): InkBarPosition;
    set position(value: InkBarPosition);
    /**
     * Aligns the ink bar to the target element.
     *
     * @public
     */
    align(): void;
    /**
     * @protected
     * @override
     */
    protected onApplyTemplate(): void;
    /**
     * @protected
     */
    protected onPositionPropertyChanged(): void;
    /**
     * @protected
     */
    protected onTargetPropertyChanged(): void;
    /**
     * @private
     */
    private alignToElement;
}
/**
 * @public
 */
export declare namespace InkBarElement {
    type Props = IInkBarElementProps;
}
/**
 * @public
 */
declare global {
    interface HTMLElementTagNameMap {
        'mosaik-ink-bar': InkBarElement;
    }
}
export {};
//# sourceMappingURL=InkBarElement.d.ts.map