import { CssTime } from '@breadstone/mosaik-themes';
import { type IAttachable } from '../../../Behaviors/Attachable';
import { CustomElement } from '../../Abstracts/CustomElement';
import type { IConnectedCallback } from '../../Abstracts/Interfaces/IConnectedCallback';
import type { IDisconnectedCallback } from '../../Abstracts/Interfaces/IDisconnectedCallback';
import type { IRippleElementProps } from './IRippleElementProps';
declare const RippleElement_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/Disableable").IDisableableProps) & (abstract new (...args: Array<any>) => IAttachable) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor;
/**
 * Ripple - An interactive visual effect component that creates expanding circular animations on user interaction.
 *
 * @description
 * The Ripple component is a visual feedback effect that creates Material Design-inspired expanding
 * circular animations emanating from the point of user interaction. It provides immediate tactile
 * feedback through smooth, animated ripple effects that enhance user experience by giving visual
 * confirmation of clicks, taps, or other interactive events. The component can be attached to any
 * interactive element and supports customization through duration, color, centering, and variant
 * options. Ripple effects automatically originate from the exact point of user interaction (click
 * or touch coordinates) unless centered mode is enabled. The component leverages the Web Animations
 * API for performant, hardware-accelerated animations and can be attached to external elements via
 * the `for` attribute from the Attachable behavior.
 *
 * @name Ripple
 * @element mosaik-ripple
 * @category Effects
 *
 * @cssprop {String} --ripple-background-color - The background color of the ripple animation circles
 * @cssprop {String} --ripple-font-family - The font family CSS custom property.
 * @cssprop {String} --ripple-font-letter-spacing - The font letter spacing CSS custom property.
 * @cssprop {String} --ripple-font-line-height - The font line height CSS custom property.
 * @cssprop {String} --ripple-font-size - The font size CSS custom property.
 * @cssprop {String} --ripple-font-text-decoration - The font text decoration CSS custom property.
 * @cssprop {String} --ripple-font-text-transform - The font text transform CSS custom property.
 * @cssprop {String} --ripple-font-weight - The font weight CSS custom property.
 * @cssprop {String} --ripple-gap - The gap CSS custom property.
 * @cssprop {String} --ripple-padding-bottom - The padding bottom CSS custom property.
 * @cssprop {String} --ripple-padding-left - The padding left CSS custom property.
 * @cssprop {String} --ripple-padding-right - The padding right CSS custom property.
 * @cssprop {String} --ripple-padding-top - The padding top CSS custom property.
 * @cssprop {String} --ripple-shadow - The shadow CSS custom property.
 * @cssprop {String} --ripple-shadow-blur - The shadow blur CSS custom property.
 * @cssprop {String} --ripple-shadow-color - The shadow color CSS custom property.
 * @cssprop {String} --ripple-shadow-offset-x - The shadow offset x CSS custom property.
 * @cssprop {String} --ripple-shadow-offset-y - The shadow offset y CSS custom property.
 * @cssprop {String} --ripple-shadow-spread - The shadow spread CSS custom property.
 * @cssprop {String} --ripple-transition-duration - The transition duration CSS custom property.
 * @cssprop {String} --ripple-transition-mode - The transition mode CSS custom property.
 * @cssprop {String} --ripple-transition-property - The transition property CSS custom property.
 * @cssprop {String} --ripple-translate - The translate CSS custom property.
 *
 * @example
 * Basic ripple attached to an interactive element:
 * ```html
 * <div id="interactive-element" style="padding: 16px; cursor: pointer;">Click Me</div>
 * <mosaik-ripple for="interactive-element"></mosaik-ripple>
 * ```
 *
 * @example
 * Ripple with variant and centered mode:
 * ```html
 * <div id="custom-card" class="interactive-card">Click anywhere on this card</div>
 * <mosaik-ripple for="custom-card" variant="primary" centered></mosaik-ripple>
 * ```
 *
 * @public
 */
export declare class RippleElement extends RippleElement_base implements IConnectedCallback, IDisconnectedCallback, IAttachable, IRippleElementProps {
    private _mouseDownSubscription;
    private _centered;
    private _duration;
    /**
     * @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 `centered` property.
     *
     * @public
     * @attr
     */
    get centered(): boolean;
    set centered(value: boolean);
    /**
     * Gets or sets the `duration` property.
     *
     * @public
     * @attr
     */
    get duration(): CssTime;
    set duration(value: CssTime);
    /**
     * @public
     * @override
     */
    disconnectedCallback(): void;
    /**
     * @protected
     * @override
     */
    protected onApplyTemplate(): void;
    /**
     * @private
     */
    private onMouseDown;
    /**
     * @private
     */
    private getDimensions;
}
/**
 * @public
 */
export declare namespace RippleElement {
    type Props = IRippleElementProps;
}
/**
 * @public
 */
declare global {
    interface HTMLElementTagNameMap {
        'mosaik-ripple': RippleElement;
    }
}
export {};
//# sourceMappingURL=RippleElement.d.ts.map