/**
 * A responsive masonry grid layout component.
 *
 * This component arranges slotted elements into a masonry-style grid,
 * where items are placed in the shortest column, resulting in a
 * Pinterest-like layout with minimal vertical gaps.
 *
 * The component uses JavaScript to calculate positions, providing
 * reliable cross-browser support — unlike CSS-only approaches such as
 * `columns` or `grid-template-rows: masonry`, which have limited
 * browser support or produce poor results.
 *
 * The number of columns is determined automatically based on the
 * available width and the minimum column width.
 *
 * @exampleComponent limel-example-masonry-layout-basic
 * @exampleComponent limel-example-masonry-layout-images
 * @exampleComponent limel-example-masonry-layout-ordered
 * @slot - Items to arrange in the masonry layout
 * @beta
 */
export declare class MasonryLayout {
    /**
     * When `true`, items are placed left-to-right in DOM order.
     * When `false` (default), items are placed in the shortest column.
     */
    ordered: boolean;
    protected onOrderedChange(): void;
    private host;
    private containerHeight;
    private hasRendered;
    private resizeObserver;
    private mutationObserver;
    private itemResizeObserver;
    private pendingLayoutFrame;
    componentDidLoad(): void;
    connectedCallback(): void;
    disconnectedCallback(): void;
    render(): any;
    private setupObservers;
    private observeItemSizes;
    private getItems;
    private getRootFontSize;
    private pxToRem;
    /**
     * Reads a CSS custom property from the host element and resolves
     * its value to pixels. Falls back to the provided default if the
     * property is not set.
     *
     * @param property - The CSS custom property name to read.
     * @param fallback - The fallback CSS value if the property is not set.
     * @param rootFontSize - The root font size in pixels for rem conversion.
     */
    private getCssPropertyInPx;
    /**
     * Debounces layout recalculations using `requestAnimationFrame`
     * to coalesce multiple observer callbacks into a single layout
     * pass per frame, avoiding layout thrashing.
     */
    private scheduleLayout;
    private layoutItems;
    private calculateColumns;
    /**
     * Absolutely positions each item into the grid. In ordered mode,
     * items are placed left-to-right via round-robin. In default mode,
     * each item is placed in the shortest column for balanced heights.
     *
     * @param items - The child elements to position.
     * @param columnCount - The number of columns in the grid.
     * @param columnWidth - The width of each column in pixels.
     * @param gapPx - The gap between items in pixels.
     * @param rootFontSize - The root font size in pixels for rem conversion.
     * @returns The cumulative height of each column in pixels.
     */
    private positionItems;
    /**
     * Applies a staggered fade-in transition to an item.
     * Inline `transition` and `transitionDelay` styles are set
     * temporarily and cleaned up via a `transitionend` listener
     * so they don't interfere with the consumer's own transitions.
     *
     * The listener filters by `event.target` to avoid reacting to
     * bubbled events from descendant elements.
     *
     * Skipped entirely when `prefers-reduced-motion: reduce` is
     * active — items become visible instantly via the CSS
     * `is-laid-out` class instead.
     *
     * @param item - The element to fade in.
     * @param index - The item's position in the list, used to calculate the delay.
     */
    private staggerFadeIn;
}
//# sourceMappingURL=masonry-layout.d.ts.map