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) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Variantable").IVariantableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Disableable").IDisableableProps) & (abstract new (...args: Array) => 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 * * @slot - Default content area (typically empty as ripple is a visual effect overlay) * * @csspart ripple - Individual ripple animation circle elements dynamically created on interaction * * @cssprop {String} --ripple-background-color - The background color of the ripple animation circles * @cssprop {String} --ripple-color - The color of the ripple effect (from ripple mixin) * @cssprop {String} --ripple-duration - The animation duration for the ripple expansion (from ripple mixin) * * @example * Basic ripple attached to an interactive element: * ```html *
Click Me
* * ``` * * @example * Ripple with variant and centered mode: * ```html *
Click anywhere on this card
* * ``` * * @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