import { type IGapableProps } from '../../../Behaviors/Gapable';
import { LayoutElement } from '../Abstracts/LayoutElement';
import type { IWrapElementProps } from './IWrapElementProps';
declare const WrapElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Reversible").IReversibleProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Orientable").IOrientableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Fitable").IFitableProps) & (abstract new (...args: Array<any>) => IGapableProps) & typeof LayoutElement & import("../../../Behaviors/Themeable").IThemeableCtor;
/**
 * Wrap - A flexible layout container that automatically wraps child elements to new lines based on available space.
 *
 * @description
 * The Wrap layout component provides a flexible container that automatically wraps child elements to new lines
 * when there's insufficient horizontal space, creating responsive and adaptive layouts. It combines the benefits
 * of flexbox wrapping with configurable gap spacing, orientation control, and reversal options. The component
 * handles dynamic content sizing, maintains consistent spacing between elements, supports both horizontal and
 * vertical orientations, and provides responsive behavior without media queries. Child elements flow naturally
 * within the container, wrapping to new lines as needed. Perfect for tag collections, button groups, card grids,
 * navigation elements, and any interface requiring flexible, space-aware element arrangement.
 *
 * @name Wrap
 * @element mosaik-wrap
 * @category Layouts
 *
 * @slot - The default slot for elements that will wrap based on available space.
 *
 * @cssprop {String} --wrap-font-family - The font family CSS custom property.
 * @cssprop {String} --wrap-font-letter-spacing - The font letter spacing CSS custom property.
 * @cssprop {String} --wrap-font-line-height - The font line height CSS custom property.
 * @cssprop {String} --wrap-font-size - The font size CSS custom property.
 * @cssprop {String} --wrap-font-text-decoration - The font text decoration CSS custom property.
 * @cssprop {String} --wrap-font-text-transform - The font text transform CSS custom property.
 * @cssprop {String} --wrap-font-weight - The font weight CSS custom property.
 * @cssprop {String} --wrap-gap - The gap between wrapped elements.
 * @cssprop {String} --wrap-padding-bottom - The padding bottom CSS custom property.
 * @cssprop {String} --wrap-padding-left - The padding left CSS custom property.
 * @cssprop {String} --wrap-padding-right - The padding right CSS custom property.
 * @cssprop {String} --wrap-padding-top - The padding top CSS custom property.
 * @cssprop {String} --wrap-shadow - The shadow CSS custom property.
 * @cssprop {String} --wrap-shadow-blur - The shadow blur CSS custom property.
 * @cssprop {String} --wrap-shadow-color - The shadow color CSS custom property.
 * @cssprop {String} --wrap-shadow-offset-x - The shadow offset x CSS custom property.
 * @cssprop {String} --wrap-shadow-offset-y - The shadow offset y CSS custom property.
 * @cssprop {String} --wrap-shadow-spread - The shadow spread CSS custom property.
 * @cssprop {String} --wrap-transition-duration - The transition duration CSS custom property.
 * @cssprop {String} --wrap-transition-mode - The transition mode CSS custom property.
 * @cssprop {String} --wrap-transition-property - The transition property CSS custom property.
 * @cssprop {String} --wrap-translate - The translate CSS custom property.
 *
 * @example
 * Horizontal wrap with numeric pixel gap:
 * ```html
 * <mosaik-wrap gap="12">
 *   <mosaik-button></mosaik-button>
 *   <mosaik-button></mosaik-button>
 *   <mosaik-button></mosaik-button>
 *   <mosaik-button></mosaik-button>
 * </mosaik-wrap>
 * ```
 *
 * @example
 * Vertical wrap with chip children:
 * ```html
 * <mosaik-wrap orientation="vertical" gap="8">
 *   <mosaik-chip></mosaik-chip>
 *   <mosaik-chip></mosaik-chip>
 *   <mosaik-chip></mosaik-chip>
 * </mosaik-wrap>
 * ```
 *
 * @public
 */
export declare class WrapElement extends WrapElement_base implements IWrapElementProps {
    private readonly _inlineStyleController;
    private _columns;
    private readonly _reverse;
    /**
     * Constructs a new instance of the `WrapElement` class.
     *
     * @public
     */
    constructor();
    /**
     * Returns the `is` property.
     *
     * @public
     * @static
     * @override
     * @readonly
    */
    static get is(): string;
    /**
     * @public
     * @override
     */
    get gap(): IGapableProps['gap'];
    set gap(value: IGapableProps['gap']);
    /**
     * The `columns` property represents the number of columns before wrapping.
     *
     * @public
     */
    get columns(): number;
    set columns(value: number);
    /**
     * @protected
     * @override
     */
    protected onItemsChanged(): void;
    /**
     * @protected
     */
    protected onGapChanged(): void;
    /**
     * @protected
     */
    protected onColumnsChanged(): void;
    /**
     * @private
     */
    private renderChild;
}
/**
 * @public
 */
export declare namespace WrapElement {
    type Props = IWrapElementProps;
}
/**
 * @public
 */
declare global {
    interface HTMLElementTagNameMap {
        'mosaik-wrap': WrapElement;
    }
}
export {};
//# sourceMappingURL=WrapElement.d.ts.map