import { LitElement } from 'lit';
/**
 * @element ui-flex
 * @description A flexible layout component with full flexbox control
 *
 * @slot - Default slot for flex items
 *
 * @cssprop --flex-gap - Gap between flex items
 *
 * @example
 * ```html
 * <ui-flex direction="row" justify="between" align="center">
 *   <div>Left</div>
 *   <div>Right</div>
 * </ui-flex>
 * ```
 */
export declare class UIFlex extends LitElement {
    static styles: import("lit").CSSResult;
    /**
     * Flex direction
     * @type {'row' | 'row-reverse' | 'column' | 'column-reverse'}
     */
    direction: 'row' | 'row-reverse' | 'column' | 'column-reverse';
    /**
     * Gap size between items
     * @type {'xs' | 'sm' | 'md' | 'lg' | 'xl'}
     */
    gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
    /**
     * Flex wrap behavior
     * @type {'nowrap' | 'wrap' | 'wrap-reverse'}
     */
    wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
    /**
     * Alignment of items
     * @type {'start' | 'center' | 'end' | 'stretch' | 'baseline'}
     */
    align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
    /**
     * Justify content
     * @type {'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'}
     */
    justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
    /**
     * Use inline-flex instead of flex
     */
    inline: boolean;
    render(): import("lit-html").TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'ui-flex': UIFlex;
    }
}
//# sourceMappingURL=flex.d.ts.map