import { LitElement } from "lit";
export type SkyFlexboxDirection = "row" | "row-reverse" | "column" | "column-reverse";
export type SkyFlexboxWrap = "nowrap" | "wrap" | "wrap-reverse";
export type SkyFlexboxJustify = "flex-start" | "center" | "flex-end" | "space-between" | "space-around" | "space-evenly";
export type SkyFlexboxAlign = "stretch" | "flex-start" | "center" | "flex-end" | "baseline";
export type SkyFlexboxAlignContent = "normal" | "stretch" | "center" | "start" | "end" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly";
/**
 * @element sky-flexbox
 *
 * @summary Flexbox container with grid-like span support for slotted children.
 *
 * @status stable
 * @since 1.0.0
 *
 * @documentation https://sky-ui.com/components/flexbox
 *
 * @slot - Default slot for flex items (`<sky-flexcol>` or plain elements with `span` attributes).
 *
 * @property {SkyFlexboxDirection} direction - Flex direction.
 * @property {SkyFlexboxWrap} wrap - Flex wrap behavior.
 * @property {SkyFlexboxJustify} justify - Main-axis alignment.
 * @property {SkyFlexboxAlign} align - Cross-axis alignment.
 * @property {SkyFlexboxAlignContent} alignContent - Multi-line cross-axis distribution.
 * @property {string} gap - Shared row/column gap value.
 * @property {string | undefined} gapX - Horizontal gap override.
 * @property {string | undefined} gapY - Vertical gap override.
 * @property {number} col - Total column count used for span calculations.
 * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `""`.
 *
 * @fires {Event} slotchange - Fired when slotted children change.
 * @method recalculateSpans Recomputes slotted child span CSS variables.
 *
 * @csspart container - The flex container element.
 *
 * @Behavior
 * - Implements CSS Flexbox with custom property-based configuration
 * - Supports responsive span calculations based on column grid system
 * - Automatically manages CSS custom properties for child elements
 * - Handles responsive breakpoints through span attributes
 *
 * - Uses a configurable column count (default: 12)
 * - Calculates item widths based on span values (1-col through total columns)
 * - Supports responsive spans: `span-lg`, `span-md`, `span-sm`, `span-xs`
 * - Clamps span values to valid range (1 to column count)
 *
 * - Supports unified `gap` property
 * - Optional `gapX` and `gapY` for separate horizontal/vertical spacing
 * - Gap values can use any CSS unit (px, rem, em, %, etc.)
 *
 * @example
 * ```html
 * <sky-flexbox col="12" gap="16px">
 *   <sky-flexcol span="8" span-md="12">
 *     Main content
 *   </sky-flexcol>
 *   <sky-flexcol span="4" span-md="12">
 *     Sidebar
 *   </sky-flexcol>
 * </sky-flexbox>
 * ```
 * ```vue
 * <template>
 *   <sky-flexbox col="12" gap="16px">
 *     <sky-flexcol span="8" span-md="12">Main content</sky-flexcol>
 *     <sky-flexcol span="4" span-md="12">Sidebar</sky-flexcol>
 *   </sky-flexbox>
 * </template>
 * ```
 * ```jsx
 * export default function Demo() {
 *   return (
 *     <sky-flexbox col="12" gap="16px">
 *       <sky-flexcol span="8" span-md="12">Main content</sky-flexcol>
 *       <sky-flexcol span="4" span-md="12">Sidebar</sky-flexcol>
 *     </sky-flexbox>
 *   );
 * }
 * ```
 */
export declare class SkyFlexbox extends LitElement {
    /**
     * Flex direction.
     * @public
     */
    direction: SkyFlexboxDirection;
    /**
     * Wrap behavior.
     * @public
     */
    wrap: SkyFlexboxWrap;
    /**
     * Main axis justification.
     * @public
     */
    justify: SkyFlexboxJustify;
    /**
     * Cross axis alignment.
     * @public
     */
    align: SkyFlexboxAlign;
    /**
     * Multi-line alignment (when wrapping).
     * @public
     */
    alignContent: SkyFlexboxAlignContent;
    /**
     * Shorthand gap; used if gapX/gapY not provided.
     * @public
     */
    gap: string;
    /**
     * Column gap.
     * @public
     */
    gapX?: string;
    /**
     * Row gap.
     * @public
     */
    gapY?: string;
    /**
     * Total columns used for span calculation.
     * @public
     */
    col: number;
    /** Named prop preset from nearest `sky-config-provider`. */
    preset: string;
    private _presets;
    static styles: import("lit").CSSResult;
    /** @private */
    private _childMo?;
    private _spansRaf;
    /** @protected */
    connectedCallback(): void;
    /** @protected */
    disconnectedCallback(): void;
    /** @protected */
    firstUpdated(): void;
    /** @protected */
    updated(changed: Map<string | number | symbol, unknown>): void;
    /**
     * Syncs component properties to CSS custom properties.
     * @private
     */
    private syncVars;
    /**
     * Forces recalculation of spans for all child elements.
     * Useful when dynamically adding/removing items.
     * @public
     */
    recalculateSpans(): void;
    /** @protected */
    render(): import("lit-html").TemplateResult<1>;
    private _scheduleUpdateSpans;
    /**
     * Reads span attributes off slotted children and maps them to CSS vars:
     * span, span-lg, span-md, span-sm, span-xs
     * @private
     */
    private updateSpans;
    /**
     * Reads a span value from an HTML attribute or element property.
     * @private
     */
    private readSpanRaw;
    /**
     * Sets or clears a span CSS variable on a slotted child.
     * @private
     */
    private applySpanVar;
    /**
     * Clamps span value to valid range (1 to column count).
     * @param raw - Raw span value from attribute
     * @returns Clamped number or null if invalid
     * @private
     */
    private clampSpan;
}