import { IEventDetail, IEventEmitter } from '@breadstone/mosaik-elements';
import { CssLength } from '@breadstone/mosaik-themes';
import { FloatingArrowPlacement } from '../../../Types/FloatingArrowPlacement';
import { FloatingAutoSize } from '../../../Types/FloatingAutoSize';
import { FloatingFlipFallbackStrategy } from '../../../Types/FloatingFlipFallbackStrategy';
import { FloatingSync } from '../../../Types/FloatingSync';
import { Placement } from '../../../Types/Placement';
import { Strategy } from '../../../Types/Strategy';
import { CustomElement } from '../../Abstracts/CustomElement';
import { IScrollable } from '../../Interfaces/IScrollable';
import type { IFloatingElementProps } from './IFloatingElementProps';
declare const FloatingElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Animatable").IAnimatableProps & import("../../../Behaviors/Animatable").IAnimatable) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Elevatable").IElevatableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor;
/**
 * Floating - A sophisticated positioning component for tooltips, dropdowns, popovers, and floating UI elements.
 *
 * @description
 * The Floating component provides advanced positioning capabilities using the Floating UI library. It automatically
 * calculates optimal placement for floating elements relative to anchor elements, handling viewport constraints,
 * collision detection, and dynamic repositioning. Features include flip behavior to avoid edges, shift to stay
 * in viewport, auto-sizing to fit available space, arrow indicators, and customizable offsets. This component
 * is the foundation for all floating UI patterns including tooltips, dropdowns, popovers, and context menus.
 *
 * @name Floating
 * @element mosaik-floating
 * @category Primitives
 *
 * @slot - The default content slot for floating content
 *
 * @csspart body - The main floating container element
 * @csspart arrow - The optional arrow pointing to the anchor element
 *
 * @cssprop {String} --floating-arrow-padding-offset - Padding offset for arrow positioning
 * @cssprop {String} --floating-arrow-size - Size of the arrow indicator
 * @cssprop {String} --floating-arrow-size-diagonal - Diagonal size calculation for arrow
 * @cssprop {String} --floating-background-color - Background color of the floating element
 * @cssprop {String} --floating-border-color - Border color of the floating outline
 * @cssprop {String} --floating-border-radius - Corner rounding radius
 * @cssprop {String} --floating-border-style - Border line style
 * @cssprop {String} --floating-border-width - Border thickness
 * @cssprop {String} --floating-font-family - Font family for floating content
 * @cssprop {String} --floating-font-size - Font size for floating content
 * @cssprop {String} --floating-font-weight - Font weight for floating content
 * @cssprop {String} --floating-font-line-height - Line height for floating content
 * @cssprop {String} --floating-font-letter-spacing - Letter spacing for floating content
 * @cssprop {String} --floating-font-text-decoration - Text decoration style
 * @cssprop {String} --floating-font-text-transform - Text transformation style
 * @cssprop {String} --floating-foreground-color - Text color for floating content
 * @cssprop {String} --floating-gap - Spacing between floating elements
 * @cssprop {String} --floating-padding-top - Top padding inside the floating element
 * @cssprop {String} --floating-padding-right - Right padding inside the floating element
 * @cssprop {String} --floating-padding-bottom - Bottom padding inside the floating element
 * @cssprop {String} --floating-padding-left - Left padding inside the floating element
 *
 * @dependency {ElevationElement} - Elevation/shadow component for depth perception
 *
 * @fires repositioned {RepositionEvent} - Fired when the element is repositioned
 * @fires activeChanged {ActiveChangedEvent} - Fired when the active state changes
 *
 * @example
 * Basic floating element with anchor (set via JavaScript):
 * ```html
 * <button id="trigger">Hover me</button>
 * <mosaik-floating id="floating" placement="bottom">
 *   <div>Floating content</div>
 * </mosaik-floating>
 * <script>
 *   document.querySelector('#floating').anchor = document.querySelector('#trigger');
 * </script>
 * ```
 *
 * @example
 * Floating with flip behavior:
 * ```html
 * <mosaik-floating
 *   id="floating2"
 *   placement="top"
 *   flip
 *   active>
 *   <div>This will flip to bottom if no space above</div>
 * </mosaik-floating>
 * <script>
 *   document.querySelector('#floating2').anchor = document.querySelector('#myButton');
 * </script>
 * ```
 *
 * @example
 * Auto-sizing floating element:
 * ```html
 * <mosaik-floating
 *   id="floating3"
 *   auto-size="both"
 *   placement="bottom-start"
 *   active>
 *   <mosaik-list>...</mosaik-list>
 * </mosaik-floating>
 * <script>
 *   document.querySelector('#floating3').anchor = document.querySelector('#container');
 * </script>
 * ```
 *
 * @example
 * Programmatic control:
 * ```html
 * <mosaik-floating id="dropdown" placement="bottom-end">
 *   <div>Dropdown content</div>
 * </mosaik-floating>
 * <script>
 *   const floating = document.querySelector('#dropdown');
 *   floating.anchor = document.querySelector('#trigger');
 *   floating.active = true;
 * </script>
 * ```
 *
 * @public
 */
export declare class FloatingElement extends FloatingElement_base implements IFloatingElementProps, IScrollable {
    private _arrowElement;
    private _bodyElement;
    private readonly _repositioned;
    private readonly _activeChanged;
    private _anchorElement;
    private _anchor;
    private _active;
    private _distance;
    private _placement;
    private _skidding;
    private _arrow;
    private _arrowPadding;
    private _flip;
    private _isFullScreen;
    private _flipFallbackPlacements;
    private _flipFallbackStrategy;
    private _arrowPlacement;
    private _flipBoundary;
    private _flipPadding;
    private _shift;
    private _shiftPadding;
    private _shiftBoundary;
    private _autoSize;
    private _sync;
    private _maxWidth?;
    private _maxHeight?;
    private _width?;
    private _height?;
    private _autoSizeBoundary;
    private _cleanup;
    private _bodyClickSubscription;
    private _strategy;
    private _autoSizePadding;
    private _isVisible;
    private readonly _inlineStyleController;
    /**
     * @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 `anchor` property.
     * The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide its `id` or a
     * reference to it here. If the anchor lives inside the popup, use the `anchor` slot instead.
     *
     * @public
     */
    get anchor(): Element | string | null;
    set anchor(value: Element | string | null);
    /**
     * Gets or sets the `active` property.
     * Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn
     * down and the popup will be hidden.
     *
     * @public
     * @attr
     */
    get active(): boolean;
    set active(value: boolean);
    /**
     * Gets whether the floating element is currently visible.
     * This is separate from `active` to allow exit animations to complete before hiding.
     *
     * @public
     * @readonly
     */
    get isVisible(): boolean;
    /**
     * Gets the animation target element.
     * Animations are applied to the body element within the floating container.
     *
     * @public
     * @override
     * @readonly
     */
    get animationTarget(): HTMLElement;
    /**
     * The preferred placement of the popup. Note that the actual placement will vary as configured to keep the
     * panel inside of the viewport.
     *
     * @public
     * @attr
     */
    get placement(): Placement;
    set placement(value: Placement);
    /**
     * Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is
     * clipped, using a `fixed` position strategy can often workaround it.
     *
     * @public
     * @attr
     */
    get strategy(): Strategy;
    set strategy(value: Strategy);
    /**
     * The distance in pixels from which to offset the panel away from its anchor.
     *
     * @public
     */
    get distance(): number;
    set distance(value: number);
    /**
     * The distance in pixels from which to offset the panel along its anchor.
     *
     * @public
     */
    get skidding(): number;
    set skidding(value: number);
    /**
     * Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and
     * `--arrow-color` custom properties. For additional customizations, you can also target the arrow using
     * `::part(arrow)` in your stylesheet.
     *
     * @public
     */
    get arrow(): boolean;
    set arrow(value: boolean);
    /**
     * Gets or sets the `isFullScreen` property.
     *
     * @public
     * @attr
     */
    get isFullScreen(): boolean;
    set isFullScreen(value: boolean);
    /**
     * The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,
     * this will prevent it from overflowing the corners.
     *
     * @public
     * @attr
     */
    get arrowPadding(): number;
    set arrowPadding(value: number);
    /**
     * When set, placement of the popup will flip to the opposite site to keep it in view. You can use
     * `flipFallbackPlacements` to further configure how the fallback placement is determined.
     *
     * @public
     * @attr
     */
    get flip(): boolean;
    set flip(value: boolean);
    /**
     * If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a
     * string of any number of placements separated by a space, e.g. "top bottom left". If no placement fits, the flip
     * fallback strategy will be used instead.
     *
     * @public
     * @attr
     * */
    get flipFallbackPlacements(): Array<Placement>;
    set flipFallbackPlacements(value: Array<Placement>);
    /**
     * The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the
     * anchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will
     * align the arrow to the start, end, or center of the popover instead.
     *
     * @public
     * @attr
     */
    get arrowPlacement(): FloatingArrowPlacement;
    set arrowPlacement(value: FloatingArrowPlacement);
    /**
     * When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether
     * the popup should be positioned using the best available fit based on available space or as it was initially
     * preferred.
     *
     * @public
     * @attr
     */
    get flipFallbackStrategy(): FloatingFlipFallbackStrategy;
    set flipFallbackStrategy(value: FloatingFlipFallbackStrategy);
    /**
     * The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By
     * default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can
     * change the boundary by passing a reference to one or more elements to this property.
     *
     * @public
     */
    get flipBoundary(): Element | Array<Element> | null;
    set flipBoundary(value: Element | Array<Element> | null);
    /**
     * The amount of padding, in pixels, to exceed before the flip behavior will occur.
     *
     * @public
     * @attr
     */
    get flipPadding(): number;
    set flipPadding(value: number);
    /**
     * Moves the popup along the axis to keep it in view when clipped.
     *
     * @public
     * @attr
     */
    get shift(): boolean;
    set shift(value: boolean);
    /**
     * The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By
     * default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can
     * change the boundary by passing a reference to one or more elements to this property.
     *
     * @public
     */
    get shiftBoundary(): Element | Array<Element> | null;
    set shiftBoundary(value: Element | Array<Element> | null);
    /**
     * The amount of padding, in pixels, to exceed before the shift behavior will occur.
     *
     * @public
     * @attr
     */
    get shiftPadding(): number;
    set shiftPadding(value: number);
    /**
     * When set, this will cause the popup to automatically resize itself to prevent it from overflowing.
     *
     * @public
     * @attr
     */
    get autoSize(): FloatingAutoSize;
    set autoSize(value: FloatingAutoSize);
    /**
     * Syncs the popup's width or height to that of the anchor element.
     *
     * @public
     * @attr
     */
    get sync(): FloatingSync;
    set sync(value: FloatingSync);
    /**
     * The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By
     * default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can
     * change the boundary by passing a reference to one or more elements to this property.
     *
     * @public
     */
    get autoSizeBoundary(): Element | Array<Element> | null;
    set autoSizeBoundary(value: Element | Array<Element> | null);
    /**
     * The amount of padding, in pixels, to exceed before the auto-size behavior will occur.
     *
     * @public
     * @attr
     */
    get autoSizePadding(): number;
    set autoSizePadding(value: number);
    /**
     * The maximum width of the popup. When the popup's width exceeds this value, it will be clipped.
     *
     * @public
     * @attr
     */
    get maxWidth(): CssLength | undefined;
    set maxWidth(value: CssLength | undefined);
    /**
     * The maximum height of the popup. If the content is taller than this value, it will scroll vertically.
     *
     * @public
     * @attr
     */
    get maxHeight(): CssLength | undefined;
    set maxHeight(value: CssLength | undefined);
    /**
     * The width of the popup.
     *
     * @public
     * @attr
     */
    get width(): CssLength | undefined;
    set width(value: CssLength | undefined);
    /**
     * The height of the popup.
     *
     * @public
     * @attr
     */
    get height(): CssLength | undefined;
    set height(value: CssLength | undefined);
    /**
     * Called when the popup is repositioned.
     * Provides reference to `this` as event argument.
     *
     * @public
     * @readonly
     * @eventProperty
     */
    get repositioned(): IEventEmitter<IEventDetail>;
    /**
     * Called when the active state of the popup changes.
     * Provides reference to `IEventDetail` as event detail.
     *
     * @public
     * @readonly
     * @eventProperty
     */
    get activeChanged(): IEventEmitter<IEventDetail>;
    /**
     * Opens the popup.
     *
     * @public
     */
    open(): void;
    /**
     * Closes the popup.
     *
     * @public
     */
    close(): void;
    /**
     * Forces the popup to recalculate and reposition itself.
     *
     * @public
     */
    reposition(): void;
    /**
     * @public
     */
    getScrollableElement(): HTMLElement;
    /**
     * @public
     * @override
     */
    connectedCallback(): void;
    /**
     * @public
     * @override
     */
    disconnectedCallback(): void;
    /**
     * @protected
     * @override
     */
    protected onApplyTemplate(): void;
    /**
     * @protected
     * @override
     */
    protected updated(changedProps: Map<string, unknown>): void;
    /**
     * Emits the `repositioned` event.
     *
     * @protected
     */
    protected onRepositioned(args: this): void;
    /**
     * Emits the `activeChanged` event.
     *
     * @protected
     */
    protected onActiveChanged(args: this): void;
    protected onActivePropertyChanged(prev?: boolean, next?: boolean): void;
    protected onPropertyChanged(): void;
    /**
     * @private
     */
    handleAnchorChange(): Promise<void>;
    /**
     * @private
     */
    private start;
    /**
     * @private
     */
    private stop;
}
/**
 * @public
 */
export declare namespace FloatingElement {
    type Props = IFloatingElementProps;
}
/**
 * @public
 */
declare global {
    interface HTMLElementTagNameMap {
        'mosaik-floating': FloatingElement;
    }
}
export {};
//# sourceMappingURL=FloatingElement.d.ts.map