import { Cre8Element } from '../cre8-element';
/** `cre8-container-grid` is `cre8-grid`'s layout vocabulary - stacked to
* N-across patterns - keyed to this element's own rendered width via
* `@container` instead of the viewport via `@media`. It establishes its own
* containment context, so use it wherever the number of columns should
* depend on the space actually available: a grid placed in a narrow sidebar
* on a wide viewport still stacks, and a grid placed in a wide main column
* on a narrow viewport still goes multi-up.
*
* @slot - The grid items
*/
export declare class Cre8ContainerGrid extends Cre8Element {
    static styles: import("lit").CSSResult[];
    /**
     * Style variant
     * - **side-by-side** yields a grid whose grid items display side-by-side (2 per row) regardless of width
     * - **2up** yields a grid whose grid items are stacked when this element is narrow
     *   but display side-by-side once it has enough of its own width to do so
     * - **3up** yields a grid whose grid items are stacked when narrow,
     *   transforms to a 2-across pattern and then transforms again to a 3-across pattern
     * - **1-3up** yields a grid whose grid items are stacked when narrow
     *   and transforms to a 3-across pattern once wide enough
     * - **4up** yields a grid whose grid items are stacked when narrow,
     *   transforms to a 2-across pattern, transforms again to a 3-across pattern,
     *   and ultimately transforms to a 4-across pattern
     * - **1-2-4up** yields a grid whose grid items are stacked when narrow,
     *   transforms to a 2-across pattern, and ultimately transforms to a 4-across pattern
     * - **1-4up** yields a grid whose grid items are stacked when narrow,
     *   transforms to a 4-across pattern once wide enough
     */
    variant?: 'side-by-side' | '2up' | '3up' | '1-3up' | '4up' | '1-4up' | '1-2-4up' | '2-4-6up';
    /**
     * Style variant
     * - **none** yields a grid whose grid items are spaced without any gutter in between
     * - **sm** yields a grid whose grid items are spaced with a gap smaller than the default
     * - **lg** yields a grid whose grid items are spaced with a gap larger than the default
     */
    gap?: 'none' | 'sm' | 'lg';
    /**
     * Break variant
     * - **faster** breaks the grid at a smaller container width than the default.
     *   Example: 2up grid breaks to 2 per row at a smaller width than default
     * - **slower** breaks the grid at a larger container width than the default.
     *   Example: 2up grid breaks to 2 per row at a larger width than default
     */
    break?: 'faster' | 'slower';
    render(): import("lit-html").TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'cre8-container-grid': Cre8ContainerGrid;
    }
}
export default Cre8ContainerGrid;
//# sourceMappingURL=container-grid.d.ts.map