import { LayoutElement } from '../Abstracts/LayoutElement';
import { ColumnDefinitions } from './ColumnDefinitions';
import { IGridElementProps } from './IGridElementProps';
import { type GridLayoutGap } from './IGridLayoutGap';
import { RowDefinitions } from './RowDefinitions';
declare const GridElement_base: import("../../../../Index").ControlBehaviorReturn<(abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & typeof LayoutElement & import("../../../Behaviors/Themeable").IThemeableCtor, import("../../../Behaviors/Alignable").IAlignableProps>;
/**
 * Grid - A layout system that arranges elements in a structured grid pattern.
 *
 * @description
 * The Grid component provides a flexible grid layout system for arranging child elements in rows and columns.
 * It supports responsive design patterns and allows for precise control over element positioning and spacing.
 * This component is ideal for creating complex layouts, dashboards, and organized content structures.
 *
 * @name Grid
 * @element mosaik-grid
 * @category Layout
 *
 * @slot - The default slot for grid items.
 *
 * @example
 * Dashboard with a fixed sidebar and a flexible main content area:
 * ```html
 * <mosaik-grid column-definitions="240 *" row-definitions="auto *" gap="16">
 *   <mosaik-grid-item column="1" row="1" row-span="2">Sidebar</mosaik-grid-item>
 *   <mosaik-grid-item column="2" row="1">Header</mosaik-grid-item>
 *   <mosaik-grid-item column="2" row="2">Main Content</mosaik-grid-item>
 * </mosaik-grid>
 * ```
 *
 * @example
 * Equal-width card layout with consistent spacing:
 * ```html
 * <mosaik-grid column-definitions="* * *" row-definitions="auto" gap="24">
 *   <mosaik-grid-item column="1" row="1">Card 1</mosaik-grid-item>
 *   <mosaik-grid-item column="2" row="1">Card 2</mosaik-grid-item>
 *   <mosaik-grid-item column="3" row="1">Card 3</mosaik-grid-item>
 * </mosaik-grid>
 * ```
 *
 * @public
 */
export declare class GridElement extends GridElement_base implements IGridElementProps {
    private _rowDefinitions;
    private _columnDefinitions;
    private _gap;
    /**
     * Constructs a new instance of the `GridElement` class.
     *
     * @public
     */
    constructor();
    /**
     * Returns the `is` property.
     *
     * @public
     * @static
     * @override
     * @readonly
    */
    static get is(): string;
    /**
     * Gets or sets the `rowDefinitions` property.
     *
     * Specifies the number of rows and their heights using `GridLength` sizing.
     * The array length defines the number of rows; each element defines the sizing of one row track.
     *
     * **Accepted forms**
     * - Array of `RowDefinitionInput` entries (JavaScript property binding).
     * - Space-separated string of grid-length tokens (HTML attribute), e.g. `"auto * 2* 100"`.
     *
     * **Accepted element / token forms**
     * - `number` - fixed height in pixels/DIPs (e.g. `100`).
     * - `string` - `"auto"`, `"*"`, `"n*"`, or a numeric string (e.g. `"2*"`).
     * - `IRowDefinition` - `{ height, minHeight?, maxHeight? }` (array form only).
     *
     * CSS units (`px`, `em`, `%`, `fr`, …) are **not** supported and will
     * throw. Negative values are rejected.
     *
     * @public
     * @attr row-definitions
     */
    get rowDefinitions(): RowDefinitions;
    set rowDefinitions(value: RowDefinitions);
    /**
     * Gets or sets the `columnDefinitions` property.
     *
     * Specifies the number of columns and their widths using `GridLength` sizing.
     * The array length defines the number of columns; each element defines the sizing of one column track.
     *
     * **Accepted forms**
     * - Array of `ColumnDefinitionInput` entries (JavaScript property binding).
     * - Space-separated string of grid-length tokens (HTML attribute), e.g. `"* 2* auto 120"`.
     *
     * **Accepted element / token forms**
     * - `number` - fixed width in pixels/DIPs (e.g. `120`).
     * - `string` - `"auto"`, `"*"`, `"n*"`, or a numeric string (e.g. `"2*"`).
     * - `IColumnDefinition` - `{ width, minWidth?, maxWidth? }` (array form only).
     *
     * CSS units (`px`, `em`, `%`, `fr`, …) are **not** supported and will
     * throw. Negative values are rejected.
     *
     * @public
     * @attr column-definitions
     */
    get columnDefinitions(): ColumnDefinitions;
    set columnDefinitions(value: ColumnDefinitions);
    /**
     * Gets or sets the `gap` property.
     *
     * Specifies the spacing between grid tracks (rows and columns).
     *
     * **Accepted forms**
     * - `number` - uniform gap in pixels on both axes (e.g. `16`).
     * - `CssLength` string - uniform gap with a CSS unit (e.g. `'1rem'`, `'8px'`).
     * - `IGridLayoutGap` object - separate gap per axis (`{ rows, columns }`) (JS only).
     *
     * When set via HTML attribute, the value is parsed as a CSS length
     * string (e.g. `gap="16"`, `gap="1rem"`).
     *
     * Negative values are rejected.
     *
     * @defaultValue `0`
     * @public
     * @attr gap
     */
    get gap(): GridLayoutGap;
    set gap(value: GridLayoutGap);
    /**
     * Called when the `rowDefinitions` property changes.
     * Re-evaluates child item positions against the updated row track count.
     *
     * @protected
     */
    protected onRowDefinitionsChanged(): void;
    /**
     * Called when the `columnDefinitions` property changes.
     * Re-evaluates child item positions against the updated column track count.
     *
     * @protected
     */
    protected onColumnDefinitionsChanged(): void;
    /**
     * @protected
     * @override
     */
    protected onItemsChanged(): void;
    /**
     * Resolves the `gap` property into a CSS `gap` shorthand value.
     *
     * Delegates to `parseGridLayoutGap` for validation and
     * normalisation, then produces the shortest valid CSS `gap` string.
     *
     * @private
     * @param gap - A `GridLayoutGap` input.
     * @returns A CSS `gap` value string.
     */
    private generateGapStyle;
    /**
     * Generates a CSS `grid-template-columns` value from the parsed `ColumnDefinitions`.
     *
     * @private
     * @param definition The raw column definitions array.
     * @returns A space-separated CSS track-list string.
     */
    private generateColumnStyle;
    /**
     * Generates a CSS `grid-template-rows` value from the parsed `RowDefinitions`.
     *
     * @private
     * @param definition The raw row definitions array.
     * @returns A space-separated CSS track-list string.
     */
    private generateRowStyle;
    /**
     * Converts a `GridLength` with optional min/max constraints into
     * an equivalent CSS `grid-template-*` track size string.
     *
     * **Mapping rules**
     *
     * | GridLength type | No constraints  | With min/max                   |
     * |-----------------|-----------------|--------------------------------|
     * | `pixel`         | `{value}px`     | `{clamp(min, value, max)}px`   |
     * | `auto`          | `auto`          | `minmax({min}px, {max/auto})`  |
     * | `star`          | `{factor}fr`    | `minmax({min}px, {max/Nfr})`   |
     *
     * @private
     * @param length The grid length specification.
     * @param minBound Minimum track size in pixels (0 = unconstrained).
     * @param maxBound Maximum track size in pixels (MAX_SAFE_INTEGER = unbounded).
     * @returns A CSS track-size value string.
     */
    private generateTrack;
    /**
     * Iterates all slotted child items and requests each `GridItemElement`
     * to re-evaluate its CSS `grid-area` placement against the current
     * column/row definitions.
     *
     * @private
     */
    private invalidateItemPositions;
}
/**
 * @public
 */
export declare namespace GridElement {
    type Props = IGridElementProps;
}
/**
 * @public
 */
declare global {
    interface HTMLElementTagNameMap {
        'mosaik-grid': GridElement;
    }
}
export {};
//# sourceMappingURL=GridElement.d.ts.map