type ColCount = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'auto';
/** Grid component properties */
export type OreGridProps = {
    /** Align items vertically */
    align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
    /** CSS grid-template-areas value */
    areas?: string;
    /** grid-template-areas at 2xl breakpoint (≥1536px) */
    areas2xl?: string;
    /** grid-template-areas at lg breakpoint (≥1024px) */
    areasLg?: string;
    /** grid-template-areas at md breakpoint (≥768px) */
    areasMd?: string;
    /** grid-template-areas at sm breakpoint (≥640px) */
    areasSm?: string;
    /** grid-template-areas at xl breakpoint (≥1280px) */
    areasXl?: string;
    /** Number of columns: '1'-'12' | 'auto' */
    cols?: ColCount;
    /** Columns at 2xl breakpoint (≥1536px) */
    cols2xl?: ColCount;
    /** Columns at lg breakpoint (≥1024px) */
    colsLg?: ColCount;
    /** Columns at md breakpoint (≥768px) */
    colsMd?: ColCount;
    /** Columns at sm breakpoint (≥640px) */
    colsSm?: ColCount;
    /** Columns at xl breakpoint (≥1280px) */
    colsXl?: ColCount;
    /** Grid auto flow direction */
    flow?: 'row' | 'column' | 'row-dense' | 'column-dense';
    /** Stretch the grid to fill its container's full width */
    fullwidth?: boolean;
    /** Gap between items */
    gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
    /** Justify items horizontally */
    justify?: 'start' | 'center' | 'end' | 'stretch';
    /** Minimum column width for responsive mode (default: 250px) */
    minColWidth?: string;
    /** Use auto-fit responsive columns */
    responsive?: boolean;
    /** Number of rows: '1'-'12' | 'auto' */
    rows?: '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'auto';
};
/**
 * ore-grid — Flexible grid layout with responsive column control.
 *
 * Columns are computed in JS and applied as `--_cols` inline, so they respond
 * to the element's own width via ResizeObserver. CSS custom properties
 * `--grid-cols`, `--grid-rows`, `--grid-gap`, `--grid-row-gap`, `--grid-col-gap`
 * are honoured as fallbacks when no attribute is set.
 *
 * @element ore-grid
 *
 * @attr {string} cols - Column count: '1'–'12' | 'auto'
 * @attr {string} cols-sm - Columns when width ≥ 640px
 * @attr {string} cols-md - Columns when width ≥ 768px
 * @attr {string} cols-lg - Columns when width ≥ 1024px
 * @attr {string} cols-xl - Columns when width ≥ 1280px
 * @attr {string} cols-2xl - Columns when width ≥ 1536px
 * @attr {string} rows - Row count: '1'–'12' | 'auto'
 * @attr {string} gap - Gap token: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
 * @attr {string} align - align-items: 'start' | 'center' | 'end' | 'stretch' | 'baseline'
 * @attr {string} justify - justify-items: 'start' | 'center' | 'end' | 'stretch'
 * @attr {string} flow - grid-auto-flow: 'row' | 'column' | 'row-dense' | 'column-dense'
 * @attr {boolean} responsive - Enables auto-fit columns without a fixed count
 * @attr {string} min-col-width - Min column width for responsive mode (default: 250px)
 * @attr {boolean} fullwidth - Stretch the grid to fill its container's full width
 * @attr {string} areas - CSS grid-template-areas value (e.g. "'header header' 'nav main'")
 * @attr {string} areas-sm - grid-template-areas when width ≥ 640px
 * @attr {string} areas-md - grid-template-areas when width ≥ 768px
 * @attr {string} areas-lg - grid-template-areas when width ≥ 1024px
 * @attr {string} areas-xl - grid-template-areas when width ≥ 1280px
 * @attr {string} areas-2xl - grid-template-areas when width ≥ 1536px
 *
 * @slot - Grid items
 *
 * @cssprop --grid-cols - Fallback column template (used when no cols attr is set)
 * @cssprop --grid-rows - Fallback row template
 * @cssprop --grid-gap - Fallback gap
 * @cssprop --grid-row-gap - Fallback row gap
 * @cssprop --grid-col-gap - Fallback column gap
 *
 * @example
 * <ore-grid cols="1" cols-sm="2" cols-lg="4" gap="md">
 *   <div>Item</div>
 * </ore-grid>
 *
 * @example
 * <!-- Responsive auto-fit -->
 * <ore-grid responsive min-col-width="200px" gap="sm">
 *   <div>Card</div>
 * </ore-grid>
 *
 * @example
 * <!-- Named grid areas -->
 * <ore-grid cols="2" rows="2" areas="'header header' 'nav main'">
 *   <header style="grid-area: header">Header</header>
 *   <nav style="grid-area: nav">Nav</nav>
 *   <main style="grid-area: main">Main</main>
 * </ore-grid>
 */
export declare const GRID_TAG: "ore-grid";
export {};
//# sourceMappingURL=grid.d.ts.map