q2-tecton-elements 1.55.3 → 1.56.0

package/dist/collection/components/q2-grid/q2-grid.js

@@ -0,0 +1,807 @@
+import { h, Fragment } from "@stencil/core";
+export class Q2Grid {
+    constructor() {
+        this.align = 'stretch';
+        this.columns = 12;
+        this.gap = 'normal';
+        this.justify = 'stretch';
+        this.lgAlign = undefined;
+        this.lgColumns = undefined;
+        this.lgGap = undefined;
+        this.lgJustify = undefined;
+        this.lgRows = undefined;
+        this.mdAlign = undefined;
+        this.mdColumns = undefined;
+        this.mdGap = undefined;
+        this.mdJustify = undefined;
+        this.mdRows = undefined;
+        this.rows = 'auto';
+        this.smAlign = undefined;
+        this.smColumns = undefined;
+        this.smGap = undefined;
+        this.smJustify = undefined;
+        this.smRows = undefined;
+        this.xlAlign = undefined;
+        this.xlColumns = undefined;
+        this.xlGap = undefined;
+        this.xlJustify = undefined;
+        this.xlRows = undefined;
+        this.xsAlign = undefined;
+        this.xsColumns = undefined;
+        this.xsGap = undefined;
+        this.xsJustify = undefined;
+        this.xsRows = undefined;
+    }
+    // #endregion
+    // #region Local Methods
+    get computedLgRows() {
+        return this.lgRows || this.computedMdRows;
+    }
+    get computedMdRows() {
+        return this.mdRows || this.computedSmRows;
+    }
+    get computedSmRows() {
+        return this.smRows || this.computedXsRows;
+    }
+    get computedXlRows() {
+        return this.xlRows || this.computedLgRows;
+    }
+    get computedXsRows() {
+        return this.xsRows || this.rows;
+    }
+    // #endregion
+    // #region Render Methods
+    render() {
+        const q2GridStyles = {
+            // base:
+            '--grid-template-columns': `repeat(${this.columns}, 1fr)`,
+            '--grid-template-rows': this.rows === 'auto' ? this.rows : `repeat(${this.rows}, 1fr)`,
+            '--grid-gap': `var(--comp-grid-gap-${this.gap})`,
+            '--justify-items': this.justify,
+            '--align-items': this.align,
+            // xs:
+            '--xs-grid-template-columns': `repeat(${this.xsColumns || this.columns}, 1fr)`,
+            '--xs-grid-template-rows': this.computedXsRows === 'auto' ? this.computedXsRows : `repeat(${this.computedXsRows}, 1fr)`,
+            '--xs-grid-gap': `var(--comp-grid-gap-${this.xsGap || this.gap})`,
+            '--xs-justify-items': this.xsJustify || this.justify,
+            '--xs-align-items': this.xsAlign || this.align,
+            // sm:
+            '--sm-grid-template-columns': `repeat(${this.smColumns || this.xsColumns || this.columns}, 1fr)`,
+            '--sm-grid-template-rows': this.computedSmRows === 'auto' ? this.computedSmRows : `repeat(${this.computedSmRows}, 1fr)`,
+            '--sm-grid-gap': `var(--comp-grid-gap-${this.smGap || this.xsGap || this.gap})`,
+            '--sm-justify-items': this.smJustify || this.xsJustify || this.justify,
+            '--sm-align-items': this.smAlign || this.xsAlign || this.align,
+            // md:
+            '--md-grid-template-columns': `repeat(${this.mdColumns || this.smColumns || this.xsColumns || this.columns}, 1fr)`,
+            '--md-grid-template-rows': this.computedMdRows === 'auto' ? this.computedMdRows : `repeat(${this.computedMdRows}, 1fr)`,
+            '--md-grid-gap': `var(--comp-grid-gap-${this.mdGap || this.smGap || this.xsGap || this.gap})`,
+            '--md-justify-items': this.mdJustify || this.smJustify || this.xsJustify || this.justify,
+            '--md-align-items': this.mdAlign || this.smAlign || this.xsAlign || this.align,
+            // lg:
+            '--lg-grid-template-columns': `repeat(${this.lgColumns || this.mdColumns || this.smColumns || this.xsColumns || this.columns}, 1fr)`,
+            '--lg-grid-template-rows': this.computedLgRows === 'auto' ? this.computedLgRows : `repeat(${this.computedLgRows}, 1fr)`,
+            '--lg-grid-gap': `var(--comp-grid-gap-${this.lgGap || this.mdGap || this.smGap || this.xsGap || this.gap})`,
+            '--lg-justify-items': this.lgJustify || this.mdJustify || this.smJustify || this.xsJustify || this.justify,
+            '--lg-align-items': this.lgAlign || this.mdAlign || this.smAlign || this.xsAlign || this.align,
+            // xl:
+            '--xl-grid-template-columns': `repeat(${this.xlColumns || this.lgColumns || this.mdColumns || this.smColumns || this.xsColumns || this.columns}, 1fr)`,
+            '--xl-grid-template-rows': this.computedXlRows === 'auto' ? this.computedXlRows : `repeat(${this.computedXlRows}, 1fr)`,
+            '--xl-grid-gap': `var(--comp-grid-gap-${this.xlGap || this.lgGap || this.mdGap || this.smGap || this.xsGap || this.gap})`,
+            '--xl-justify-items': this.xlJustify || this.lgJustify || this.mdJustify || this.smJustify || this.xsJustify || this.justify,
+            '--xl-align-items': this.xlAlign || this.lgAlign || this.mdAlign || this.smAlign || this.xsAlign || this.align,
+        };
+        return (h(Fragment, { key: '8a0e08bfee936e317030c9624b5d170c8ea73a6c' }, h("div", { key: 'a9c5026ede0844709d97e4d94f51958572de10f4', style: q2GridStyles, class: "q2-grid" }, h("slot", { key: 'fe047e24638a63e6d1b542a6b7b0e93026337aec' }))));
+    }
+    static get is() { return "q2-grid"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["q2-grid.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["q2-grid.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "align": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TQ2GridAlignOptions",
+                    "resolved": "\"center\" | \"end\" | \"start\" | \"stretch\"",
+                    "references": {
+                        "TQ2GridAlignOptions": {
+                            "location": "local",
+                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-grid/q2-grid.tsx",
+                            "id": "src/components/q2-grid/q2-grid.tsx::TQ2GridAlignOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the vertical alignment behavior of q2-grid-area components within a grid track at\nthe baseline viewport size."
+                },
+                "attribute": "align",
+                "reflect": true,
+                "defaultValue": "'stretch'"
+            },
+            "columns": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "TQ2GridColumnsOptions",
+                    "resolved": "number",
+                    "references": {
+                        "TQ2GridColumnsOptions": {
+                            "location": "local",
+                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-grid/q2-grid.tsx",
+                            "id": "src/components/q2-grid/q2-grid.tsx::TQ2GridColumnsOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the amount of columns to render within the grid at the baseline viewport size."
+                },
+                "attribute": "columns",
+                "reflect": true,
+                "defaultValue": "12"
+            },
+            "gap": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TQ2GridGapOptions",
+                    "resolved": "\"comfortable\" | \"compact\" | \"none\" | \"normal\"",
+                    "references": {
+                        "TQ2GridGapOptions": {
+                            "location": "local",
+                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-grid/q2-grid.tsx",
+                            "id": "src/components/q2-grid/q2-grid.tsx::TQ2GridGapOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the gap size between rows and columns within the grid at the baseline viewport size.\nGap values utilize CSS variables to allow for easy theming and customization.\nVisit the Style section to learn more."
+                },
+                "attribute": "gap",
+                "reflect": true,
+                "defaultValue": "'normal'"
+            },
+            "justify": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TQ2GridJustifyOptions",
+                    "resolved": "\"center\" | \"end\" | \"start\" | \"stretch\"",
+                    "references": {
+                        "TQ2GridJustifyOptions": {
+                            "location": "local",
+                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-grid/q2-grid.tsx",
+                            "id": "src/components/q2-grid/q2-grid.tsx::TQ2GridJustifyOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the horizontal alignment behavior of q2-grid-area components within a grid track\nat the baseline viewport size."
+                },
+                "attribute": "justify",
+                "reflect": true,
+                "defaultValue": "'stretch'"
+            },
+            "lgAlign": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TQ2GridAlignOptions",
+                    "resolved": "\"center\" | \"end\" | \"start\" | \"stretch\"",
+                    "references": {
+                        "TQ2GridAlignOptions": {
+                            "location": "local",
+                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-grid/q2-grid.tsx",
+                            "id": "src/components/q2-grid/q2-grid.tsx::TQ2GridAlignOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the vertical alignment behavior of q2-grid-area components within a grid track at the\n'LG' viewport size."
+                },
+                "attribute": "lg-align",
+                "reflect": true
+            },
+            "lgColumns": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "TQ2GridColumnsOptions",
+                    "resolved": "number",
+                    "references": {
+                        "TQ2GridColumnsOptions": {
+                            "location": "local",
+                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-grid/q2-grid.tsx",
+                            "id": "src/components/q2-grid/q2-grid.tsx::TQ2GridColumnsOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the amount of columns to render within the grid at the 'LG' viewport size."
+                },
+                "attribute": "lg-columns",
+                "reflect": true
+            },
+            "lgGap": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TQ2GridGapOptions",
+                    "resolved": "\"comfortable\" | \"compact\" | \"none\" | \"normal\"",
+                    "references": {
+                        "TQ2GridGapOptions": {
+                            "location": "local",
+                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-grid/q2-grid.tsx",
+                            "id": "src/components/q2-grid/q2-grid.tsx::TQ2GridGapOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the gap size between rows and columns within the grid at the 'LG' viewport size.\nGap values utilize CSS variables to allow for easy theming and customization.\nVisit the Style section to learn more."
+                },
+                "attribute": "lg-gap",
+                "reflect": true
+            },
+            "lgJustify": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TQ2GridJustifyOptions",
+                    "resolved": "\"center\" | \"end\" | \"start\" | \"stretch\"",
+                    "references": {
+                        "TQ2GridJustifyOptions": {
+                            "location": "local",
+                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-grid/q2-grid.tsx",
+                            "id": "src/components/q2-grid/q2-grid.tsx::TQ2GridJustifyOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the horizontal alignment behavior of q2-grid-area components within a grid track at\nthe 'LG' viewport size."
+                },
+                "attribute": "lg-justify",
+                "reflect": true
+            },
+            "lgRows": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "TQ2GridRowsOptions",
+                    "resolved": "\"auto\" | number",
+                    "references": {
+                        "TQ2GridRowsOptions": {
+                            "location": "local",
+                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-grid/q2-grid.tsx",
+                            "id": "src/components/q2-grid/q2-grid.tsx::TQ2GridRowsOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the amount of rows to render within the grid at the 'LG' viewport size.\nWhen set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\ncomponents placed within the grid and the number of columns allowed per row."
+                },
+                "attribute": "lg-rows",
+                "reflect": true
+            },
+            "mdAlign": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TQ2GridAlignOptions",
+                    "resolved": "\"center\" | \"end\" | \"start\" | \"stretch\"",
+                    "references": {
+                        "TQ2GridAlignOptions": {
+                            "location": "local",
+                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-grid/q2-grid.tsx",
+                            "id": "src/components/q2-grid/q2-grid.tsx::TQ2GridAlignOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the vertical alignment behavior of q2-grid-area components within a grid track at\nthe 'MD' viewport size."
+                },
+                "attribute": "md-align",
+                "reflect": true
+            },
+            "mdColumns": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "TQ2GridColumnsOptions",
+                    "resolved": "number",
+                    "references": {
+                        "TQ2GridColumnsOptions": {
+                            "location": "local",
+                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-grid/q2-grid.tsx",
+                            "id": "src/components/q2-grid/q2-grid.tsx::TQ2GridColumnsOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the amount of columns to render within the grid at the 'MD' viewport size."
+                },
+                "attribute": "md-columns",
+                "reflect": true
+            },
+            "mdGap": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TQ2GridGapOptions",
+                    "resolved": "\"comfortable\" | \"compact\" | \"none\" | \"normal\"",
+                    "references": {
+                        "TQ2GridGapOptions": {
+                            "location": "local",
+                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-grid/q2-grid.tsx",
+                            "id": "src/components/q2-grid/q2-grid.tsx::TQ2GridGapOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the gap size between rows and columns within the grid at the 'MD' viewport size.\nGap values utilize CSS variables to allow for easy theming and customization.\nVisit the Style section to learn more."
+                },
+                "attribute": "md-gap",
+                "reflect": true
+            },
+            "mdJustify": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TQ2GridJustifyOptions",
+                    "resolved": "\"center\" | \"end\" | \"start\" | \"stretch\"",
+                    "references": {
+                        "TQ2GridJustifyOptions": {
+                            "location": "local",
+                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-grid/q2-grid.tsx",
+                            "id": "src/components/q2-grid/q2-grid.tsx::TQ2GridJustifyOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the horizontal alignment behavior of q2-grid-area components within a grid track at\nthe 'MD' viewport size."
+                },
+                "attribute": "md-justify",
+                "reflect": true
+            },
+            "mdRows": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "TQ2GridRowsOptions",
+                    "resolved": "\"auto\" | number",
+                    "references": {
+                        "TQ2GridRowsOptions": {
+                            "location": "local",
+                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-grid/q2-grid.tsx",
+                            "id": "src/components/q2-grid/q2-grid.tsx::TQ2GridRowsOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the amount of rows to render within the grid at the 'MD' viewport size.\nWhen set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\ncomponents placed within the grid and the number of columns allowed per row."
+                },
+                "attribute": "md-rows",
+                "reflect": true
+            },
+            "rows": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "TQ2GridRowsOptions",
+                    "resolved": "\"auto\" | number",
+                    "references": {
+                        "TQ2GridRowsOptions": {
+                            "location": "local",
+                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-grid/q2-grid.tsx",
+                            "id": "src/components/q2-grid/q2-grid.tsx::TQ2GridRowsOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the amount of rows to render within the grid at the baseline viewport size.\nWhen set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\ncomponents placed within the grid and the number of columns allowed per row."
+                },
+                "attribute": "rows",
+                "reflect": true,
+                "defaultValue": "'auto'"
+            },
+            "smAlign": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TQ2GridAlignOptions",
+                    "resolved": "\"center\" | \"end\" | \"start\" | \"stretch\"",
+                    "references": {
+                        "TQ2GridAlignOptions": {
+                            "location": "local",
+                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-grid/q2-grid.tsx",
+                            "id": "src/components/q2-grid/q2-grid.tsx::TQ2GridAlignOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the vertical alignment behavior of q2-grid-area components within a grid track at\nthe 'SM' viewport size."
+                },
+                "attribute": "sm-align",
+                "reflect": true
+            },
+            "smColumns": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "TQ2GridColumnsOptions",
+                    "resolved": "number",
+                    "references": {
+                        "TQ2GridColumnsOptions": {
+                            "location": "local",
+                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-grid/q2-grid.tsx",
+                            "id": "src/components/q2-grid/q2-grid.tsx::TQ2GridColumnsOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the amount of columns to render within the grid at the 'SM' viewport size."
+                },
+                "attribute": "sm-columns",
+                "reflect": true
+            },
+            "smGap": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TQ2GridGapOptions",
+                    "resolved": "\"comfortable\" | \"compact\" | \"none\" | \"normal\"",
+                    "references": {
+                        "TQ2GridGapOptions": {
+                            "location": "local",
+                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-grid/q2-grid.tsx",
+                            "id": "src/components/q2-grid/q2-grid.tsx::TQ2GridGapOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the gap size between rows and columns within the grid at the 'SM' viewport size.\nGap values utilize CSS variables to allow for easy theming and customization.\nVisit the Style section to learn more."
+                },
+                "attribute": "sm-gap",
+                "reflect": true
+            },
+            "smJustify": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TQ2GridJustifyOptions",
+                    "resolved": "\"center\" | \"end\" | \"start\" | \"stretch\"",
+                    "references": {
+                        "TQ2GridJustifyOptions": {
+                            "location": "local",
+                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-grid/q2-grid.tsx",
+                            "id": "src/components/q2-grid/q2-grid.tsx::TQ2GridJustifyOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the horizontal alignment behavior of q2-grid-area components within a grid track at\nthe 'SM' viewport size."
+                },
+                "attribute": "sm-justify",
+                "reflect": true
+            },
+            "smRows": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "TQ2GridRowsOptions",
+                    "resolved": "\"auto\" | number",
+                    "references": {
+                        "TQ2GridRowsOptions": {
+                            "location": "local",
+                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-grid/q2-grid.tsx",
+                            "id": "src/components/q2-grid/q2-grid.tsx::TQ2GridRowsOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the amount of rows to render within the grid at the 'SM' viewport size.\nWhen set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\ncomponents placed within the grid and the number of columns allowed per row."
+                },
+                "attribute": "sm-rows",
+                "reflect": true
+            },
+            "xlAlign": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TQ2GridAlignOptions",
+                    "resolved": "\"center\" | \"end\" | \"start\" | \"stretch\"",
+                    "references": {
+                        "TQ2GridAlignOptions": {
+                            "location": "local",
+                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-grid/q2-grid.tsx",
+                            "id": "src/components/q2-grid/q2-grid.tsx::TQ2GridAlignOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the vertical alignment behavior of q2-grid-area components within a grid track at the\n'XL' viewport size."
+                },
+                "attribute": "xl-align",
+                "reflect": true
+            },
+            "xlColumns": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "TQ2GridColumnsOptions",
+                    "resolved": "number",
+                    "references": {
+                        "TQ2GridColumnsOptions": {
+                            "location": "local",
+                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-grid/q2-grid.tsx",
+                            "id": "src/components/q2-grid/q2-grid.tsx::TQ2GridColumnsOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the amount of columns to render within the grid at the 'XL' viewport size."
+                },
+                "attribute": "xl-columns",
+                "reflect": true
+            },
+            "xlGap": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TQ2GridGapOptions",
+                    "resolved": "\"comfortable\" | \"compact\" | \"none\" | \"normal\"",
+                    "references": {
+                        "TQ2GridGapOptions": {
+                            "location": "local",
+                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-grid/q2-grid.tsx",
+                            "id": "src/components/q2-grid/q2-grid.tsx::TQ2GridGapOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the gap size between rows and columns within the grid at the 'XL' viewport size.\nGap values utilize CSS variables to allow for easy theming and customization.\nVisit the Style section to learn more."
+                },
+                "attribute": "xl-gap",
+                "reflect": true
+            },
+            "xlJustify": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TQ2GridJustifyOptions",
+                    "resolved": "\"center\" | \"end\" | \"start\" | \"stretch\"",
+                    "references": {
+                        "TQ2GridJustifyOptions": {
+                            "location": "local",
+                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-grid/q2-grid.tsx",
+                            "id": "src/components/q2-grid/q2-grid.tsx::TQ2GridJustifyOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the horizontal alignment behavior of q2-grid-area components within a grid track at\nthe 'XL' viewport size."
+                },
+                "attribute": "xl-justify",
+                "reflect": true
+            },
+            "xlRows": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "TQ2GridRowsOptions",
+                    "resolved": "\"auto\" | number",
+                    "references": {
+                        "TQ2GridRowsOptions": {
+                            "location": "local",
+                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-grid/q2-grid.tsx",
+                            "id": "src/components/q2-grid/q2-grid.tsx::TQ2GridRowsOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the amount of rows to render within the grid at the 'XL' viewport size.\nWhen set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\ncomponents placed within the grid and the number of columns allowed per row."
+                },
+                "attribute": "xl-rows",
+                "reflect": true
+            },
+            "xsAlign": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TQ2GridAlignOptions",
+                    "resolved": "\"center\" | \"end\" | \"start\" | \"stretch\"",
+                    "references": {
+                        "TQ2GridAlignOptions": {
+                            "location": "local",
+                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-grid/q2-grid.tsx",
+                            "id": "src/components/q2-grid/q2-grid.tsx::TQ2GridAlignOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the vertical alignment behavior of q2-grid-area components within a grid track at\nthe 'XS' viewport size."
+                },
+                "attribute": "xs-align",
+                "reflect": true
+            },
+            "xsColumns": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "TQ2GridColumnsOptions",
+                    "resolved": "number",
+                    "references": {
+                        "TQ2GridColumnsOptions": {
+                            "location": "local",
+                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-grid/q2-grid.tsx",
+                            "id": "src/components/q2-grid/q2-grid.tsx::TQ2GridColumnsOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the amount of columns to render within the grid at the 'XS' viewport size."
+                },
+                "attribute": "xs-columns",
+                "reflect": true
+            },
+            "xsGap": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TQ2GridGapOptions",
+                    "resolved": "\"comfortable\" | \"compact\" | \"none\" | \"normal\"",
+                    "references": {
+                        "TQ2GridGapOptions": {
+                            "location": "local",
+                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-grid/q2-grid.tsx",
+                            "id": "src/components/q2-grid/q2-grid.tsx::TQ2GridGapOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the gap size between rows and columns within the grid at the 'XS' viewport size.\nGap values utilize CSS variables to allow for easy theming and customization.\nVisit the Style section to learn more."
+                },
+                "attribute": "xs-gap",
+                "reflect": true
+            },
+            "xsJustify": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TQ2GridJustifyOptions",
+                    "resolved": "\"center\" | \"end\" | \"start\" | \"stretch\"",
+                    "references": {
+                        "TQ2GridJustifyOptions": {
+                            "location": "local",
+                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-grid/q2-grid.tsx",
+                            "id": "src/components/q2-grid/q2-grid.tsx::TQ2GridJustifyOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the horizontal alignment behavior of q2-grid-area components within a grid track\nat the 'XS' viewport size."
+                },
+                "attribute": "xs-justify",
+                "reflect": true
+            },
+            "xsRows": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "TQ2GridRowsOptions",
+                    "resolved": "\"auto\" | number",
+                    "references": {
+                        "TQ2GridRowsOptions": {
+                            "location": "local",
+                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-grid/q2-grid.tsx",
+                            "id": "src/components/q2-grid/q2-grid.tsx::TQ2GridRowsOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the amount of rows to render within the grid at the 'XS' viewport size.\nWhen set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area\ncomponents placed within the grid and the number of columns allowed per row."
+                },
+                "attribute": "xs-rows",
+                "reflect": true
+            }
+        };
+    }
+}
+//# sourceMappingURL=q2-grid.js.map