import { CustomElement } from '../../Abstracts/CustomElement';
import { IGhostElementProps } from './IGhostElementProps';
import { CssLength } from '@breadstone/mosaik-themes';
declare const GhostElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Dimensionable").IDimensionableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor;
/**
 * Ghost - An invisible positioned placeholder element for drag-and-drop and positional references.
 *
 * @description
 * The Ghost component creates an invisible, absolutely positioned element that serves as a positional
 * reference or placeholder. It's commonly used in drag-and-drop scenarios to show where an item will
 * be dropped, as a measurement reference for dynamic layouts, or as an anchor point for absolutely
 * positioned content. The element supports custom dimensions and positioning through top, left, width,
 * and height properties.
 *
 * @name Ghost
 * @element mosaik-ghost
 * @category Primitives
 *
 * @slot - The default content slot (typically empty or used for hidden reference content)
 *
 * @csspart - No CSS parts (element is typically invisible)
 *
 * @cssprop {String} --ghost-background-color - Background color of the ghost element
 * @cssprop {String} --ghost-border-color - Border color for the ghost outline
 * @cssprop {String} --ghost-border-radius - Corner rounding radius
 * @cssprop {String} --ghost-border-style - Border line style
 * @cssprop {String} --ghost-border-width - Border thickness
 * @cssprop {String} --ghost-transition-duration - Duration of visual transitions
 * @cssprop {String} --ghost-transition-mode - Timing function for transitions
 * @cssprop {String} --ghost-transition-property - CSS properties to transition
 *
 * @example
 * Basic positioned ghost element:
 * ```html
 * <mosaik-ghost top="100px" left="50px" width="200px" height="150px"></mosaik-ghost>
 * ```
 *
 * @example
 * Drag-and-drop drop indicator:
 * ```html
 * <div class="drop-zone">
 *   <mosaik-ghost id="dropIndicator" style="display: none;"></mosaik-ghost>
 *   <div class="items">...</div>
 * </div>
 * <script>
 *   const ghost = document.querySelector('#dropIndicator');
 *   dropZone.addEventListener('dragover', (e) => {
 *     ghost.style.display = 'block';
 *     ghost.top = e.clientY + 'px';
 *     ghost.left = e.clientX + 'px';
 *   });
 * </script>
 * ```
 *
 * @example
 * Layout measurement reference:
 * ```html
 * <mosaik-ghost id="layoutAnchor" top="0" left="0" width="100%" height="auto"></mosaik-ghost>
 * ```
 *
 * @public
 */
export declare class GhostElement extends GhostElement_base implements IGhostElementProps {
    private _top;
    private _left;
    /**
     * @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 `top` property.
     *
     * @public
     * @attr
     */
    get top(): CssLength;
    set top(value: CssLength);
    /**
     * Gets or sets the `left` property.
     *
     * @public
     * @attr
     */
    get left(): CssLength;
    set left(value: CssLength);
}
/**
 * @public
 */
export declare namespace GhostElement {
    type Props = IGhostElementProps;
}
/**
 * @public
 */
declare global {
    interface HTMLElementTagNameMap {
        'mosaik-ghost': GhostElement;
    }
}
export {};
//# sourceMappingURL=GhostElement.d.ts.map