q2-tecton-elements 1.55.4 → 1.56.0

package/dist/types/components.d.ts

@@ -10,7 +10,9 @@ import { IChartData, IDonutChartData } from "q2-tecton-common/lib/types/element-
 import { EChartsCoreOption } from "echarts/types/dist/core";
 import { Q2DataTableHeader, Q2DataTableRow, Q2DataTableSerializedRow } from "./components/q2-data-table/q2-data-table";
 import { Q2Input } from "./components/q2-input/q2-input";
-import { FilesObject } from "./components/q2-file-picker/q2-file-picker";
+import { FilesObject, StatusFile } from "./components/q2-file-picker/q2-file-picker";
+import { TQ2GridAlignOptions, TQ2GridColumnsOptions, TQ2GridGapOptions, TQ2GridJustifyOptions, TQ2GridRowsOptions } from "./components/q2-grid/q2-grid";
+import { TQ2GridAreaAlignOptions, TQ2GridAreaColumnSpanOptions, TQ2GridAreaColumnStartOptions, TQ2GridAreaJustifyOptions, TQ2GridAreaRowSpanOptions, TQ2GridAreaRowStartOptions, TQ2GridAreaZIndexOptions } from "./components/q2-grid-area/q2-grid-area";
 import { Q2Badge } from "./components/q2-badge/q2-badge";
 import { Q2Icon } from "./components/q2-icon/q2-icon";
 import { InputType } from "./components/q2-input/q2-input";
@@ -24,7 +26,9 @@ export { IChartData, IDonutChartData } from "q2-tecton-common/lib/types/element-
 export { EChartsCoreOption } from "echarts/types/dist/core";
 export { Q2DataTableHeader, Q2DataTableRow, Q2DataTableSerializedRow } from "./components/q2-data-table/q2-data-table";
 export { Q2Input } from "./components/q2-input/q2-input";
-export { FilesObject } from "./components/q2-file-picker/q2-file-picker";
+export { FilesObject, StatusFile } from "./components/q2-file-picker/q2-file-picker";
+export { TQ2GridAlignOptions, TQ2GridColumnsOptions, TQ2GridGapOptions, TQ2GridJustifyOptions, TQ2GridRowsOptions } from "./components/q2-grid/q2-grid";
+export { TQ2GridAreaAlignOptions, TQ2GridAreaColumnSpanOptions, TQ2GridAreaColumnStartOptions, TQ2GridAreaJustifyOptions, TQ2GridAreaRowSpanOptions, TQ2GridAreaRowStartOptions, TQ2GridAreaZIndexOptions } from "./components/q2-grid-area/q2-grid-area";
 export { Q2Badge } from "./components/q2-badge/q2-badge";
 export { Q2Icon } from "./components/q2-icon/q2-icon";
 export { InputType } from "./components/q2-input/q2-input";
@@ -1235,6 +1239,10 @@ export namespace Components {
         "type": string;
     }
     interface Q2FilePicker {
+        /**
+          * The size of the browse button. Can be 'none', 'small', 'medium', or 'large'.
+         */
+        "buttonSize": 'none' | 'small' | 'medium' | 'large';
         /**
           * A description of the field. This is announced by screen readers when the field is focused.
           * @localizable
@@ -1258,9 +1266,10 @@ export namespace Components {
          */
         "maxFiles": number;
         /**
-          * An array of objects representing the status of the files being uploaded. Each object should have a `name` property (the file name) and a `status` property (the status of the file) that equals either 'in-progress', 'failed' or 'uploaded'.
+          * An array of objects representing the status of the files being uploaded. Each object should have a `name` property (the file name), a `status` property (the status of the file) that equals either 'in-progress', 'failed', or 'uploaded', and an optional `message` property.  Custom messages provided in the `message` property will only be used for failed uploads (`status: 'failed'`). This allows for more specific error messages in failure scenarios, while ensuring that all other file status messages remain consistent and aligned with approved design/UX standards. Custom messages for failed uploads are limited to a single line.
+          * @localizable
          */
-        "status": { name: string; status: 'in-progress' | 'failed' | 'uploaded' }[];
+        "status": StatusFile[];
         /**
           * Returns an array of File objects representing the files selected by the user. If no files are selected, the value is an empty array.
           * @readonly
@@ -1311,6 +1320,298 @@ export namespace Components {
          */
         "value": number;
     }
+    interface Q2Grid {
+        /**
+          * Sets the vertical alignment behavior of q2-grid-area components within a grid track at the baseline viewport size.
+         */
+        "align": TQ2GridAlignOptions;
+        /**
+          * Sets the amount of columns to render within the grid at the baseline viewport size.
+         */
+        "columns": TQ2GridColumnsOptions;
+        /**
+          * Sets the gap size between rows and columns within the grid at the baseline viewport size. Gap values utilize CSS variables to allow for easy theming and customization. Visit the Style section to learn more.
+         */
+        "gap": TQ2GridGapOptions;
+        /**
+          * Sets the horizontal alignment behavior of q2-grid-area components within a grid track at the baseline viewport size.
+         */
+        "justify": TQ2GridJustifyOptions;
+        /**
+          * Sets the vertical alignment behavior of q2-grid-area components within a grid track at the 'LG' viewport size.
+         */
+        "lgAlign": TQ2GridAlignOptions;
+        /**
+          * Sets the amount of columns to render within the grid at the 'LG' viewport size.
+         */
+        "lgColumns": TQ2GridColumnsOptions;
+        /**
+          * Sets the gap size between rows and columns within the grid at the 'LG' viewport size. Gap values utilize CSS variables to allow for easy theming and customization. Visit the Style section to learn more.
+         */
+        "lgGap": TQ2GridGapOptions;
+        /**
+          * Sets the horizontal alignment behavior of q2-grid-area components within a grid track at the 'LG' viewport size.
+         */
+        "lgJustify": TQ2GridJustifyOptions;
+        /**
+          * Sets the amount of rows to render within the grid at the 'LG' viewport size. When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area components placed within the grid and the number of columns allowed per row.
+         */
+        "lgRows": TQ2GridRowsOptions;
+        /**
+          * Sets the vertical alignment behavior of q2-grid-area components within a grid track at the 'MD' viewport size.
+         */
+        "mdAlign": TQ2GridAlignOptions;
+        /**
+          * Sets the amount of columns to render within the grid at the 'MD' viewport size.
+         */
+        "mdColumns": TQ2GridColumnsOptions;
+        /**
+          * Sets the gap size between rows and columns within the grid at the 'MD' viewport size. Gap values utilize CSS variables to allow for easy theming and customization. Visit the Style section to learn more.
+         */
+        "mdGap": TQ2GridGapOptions;
+        /**
+          * Sets the horizontal alignment behavior of q2-grid-area components within a grid track at the 'MD' viewport size.
+         */
+        "mdJustify": TQ2GridJustifyOptions;
+        /**
+          * Sets the amount of rows to render within the grid at the 'MD' viewport size. When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area components placed within the grid and the number of columns allowed per row.
+         */
+        "mdRows": TQ2GridRowsOptions;
+        /**
+          * Sets the amount of rows to render within the grid at the baseline viewport size. When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area components placed within the grid and the number of columns allowed per row.
+         */
+        "rows": TQ2GridRowsOptions;
+        /**
+          * Sets the vertical alignment behavior of q2-grid-area components within a grid track at the 'SM' viewport size.
+         */
+        "smAlign": TQ2GridAlignOptions;
+        /**
+          * Sets the amount of columns to render within the grid at the 'SM' viewport size.
+         */
+        "smColumns": TQ2GridColumnsOptions;
+        /**
+          * Sets the gap size between rows and columns within the grid at the 'SM' viewport size. Gap values utilize CSS variables to allow for easy theming and customization. Visit the Style section to learn more.
+         */
+        "smGap": TQ2GridGapOptions;
+        /**
+          * Sets the horizontal alignment behavior of q2-grid-area components within a grid track at the 'SM' viewport size.
+         */
+        "smJustify": TQ2GridJustifyOptions;
+        /**
+          * Sets the amount of rows to render within the grid at the 'SM' viewport size. When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area components placed within the grid and the number of columns allowed per row.
+         */
+        "smRows": TQ2GridRowsOptions;
+        /**
+          * Sets the vertical alignment behavior of q2-grid-area components within a grid track at the 'XL' viewport size.
+         */
+        "xlAlign": TQ2GridAlignOptions;
+        /**
+          * Sets the amount of columns to render within the grid at the 'XL' viewport size.
+         */
+        "xlColumns": TQ2GridColumnsOptions;
+        /**
+          * Sets the gap size between rows and columns within the grid at the 'XL' viewport size. Gap values utilize CSS variables to allow for easy theming and customization. Visit the Style section to learn more.
+         */
+        "xlGap": TQ2GridGapOptions;
+        /**
+          * Sets the horizontal alignment behavior of q2-grid-area components within a grid track at the 'XL' viewport size.
+         */
+        "xlJustify": TQ2GridJustifyOptions;
+        /**
+          * Sets the amount of rows to render within the grid at the 'XL' viewport size. When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area components placed within the grid and the number of columns allowed per row.
+         */
+        "xlRows": TQ2GridRowsOptions;
+        /**
+          * Sets the vertical alignment behavior of q2-grid-area components within a grid track at the 'XS' viewport size.
+         */
+        "xsAlign": TQ2GridAlignOptions;
+        /**
+          * Sets the amount of columns to render within the grid at the 'XS' viewport size.
+         */
+        "xsColumns": TQ2GridColumnsOptions;
+        /**
+          * Sets the gap size between rows and columns within the grid at the 'XS' viewport size. Gap values utilize CSS variables to allow for easy theming and customization. Visit the Style section to learn more.
+         */
+        "xsGap": TQ2GridGapOptions;
+        /**
+          * Sets the horizontal alignment behavior of q2-grid-area components within a grid track at the 'XS' viewport size.
+         */
+        "xsJustify": TQ2GridJustifyOptions;
+        /**
+          * Sets the amount of rows to render within the grid at the 'XS' viewport size. When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area components placed within the grid and the number of columns allowed per row.
+         */
+        "xsRows": TQ2GridRowsOptions;
+    }
+    interface Q2GridArea {
+        /**
+          * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size. When set to `auto`, the grid area will inherit this property from the parent q2-grid component.
+         */
+        "align": TQ2GridAreaAlignOptions;
+        /**
+          * Sets the column span amount of the grid area at the baseline viewport size.
+         */
+        "columnSpan": TQ2GridAreaColumnSpanOptions;
+        /**
+          * Sets the starting column of the grid area at the baseline viewport size.
+         */
+        "columnStart": TQ2GridAreaColumnStartOptions;
+        /**
+          * Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size. When set to `auto`, the grid area will inherit this property from the parent q2-grid component.
+         */
+        "justify": TQ2GridAreaJustifyOptions;
+        /**
+          * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size. When set to `auto`, the grid area will inherit this property from the parent q2-grid component.
+         */
+        "lgAlign": TQ2GridAreaAlignOptions;
+        /**
+          * Sets the column span amount of the grid area at the LG viewport size.
+         */
+        "lgColumnSpan": TQ2GridAreaColumnSpanOptions;
+        /**
+          * Sets the starting column of the grid area at the LG viewport size. When set to `auto`, the grid area will automatically start at the first available column.
+         */
+        "lgColumnStart": TQ2GridAreaColumnStartOptions;
+        /**
+          * Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size. When set to `auto`, the grid area will inherit this property from the parent q2-grid component.
+         */
+        "lgJustify": TQ2GridAreaJustifyOptions;
+        /**
+          * Sets the row span amount of the grid area at the LG viewport size.
+         */
+        "lgRowSpan": TQ2GridAreaRowSpanOptions;
+        /**
+          * Sets the starting row of the grid area at the LG viewport size. When set to `auto`, the grid area will automatically start at the first available row.
+         */
+        "lgRowStart": TQ2GridAreaRowStartOptions;
+        /**
+          * Sets the z-index of the grid area at the LG viewport size.
+         */
+        "lgZIndex": TQ2GridAreaZIndexOptions;
+        /**
+          * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size. When set to `auto`, the grid area will inherit this property from the parent q2-grid component.
+         */
+        "mdAlign": TQ2GridAreaAlignOptions;
+        /**
+          * Sets the column span amount of the grid area at the MD viewport size.
+         */
+        "mdColumnSpan": TQ2GridAreaColumnSpanOptions;
+        /**
+          * Sets the starting column of the grid area at the MD viewport size. When set to `auto`, the grid area will automatically start at the first available column.
+         */
+        "mdColumnStart": TQ2GridAreaColumnStartOptions;
+        /**
+          * Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size. When set to `auto`, the grid area will inherit this property from the parent q2-grid component.
+         */
+        "mdJustify": TQ2GridAreaJustifyOptions;
+        /**
+          * Sets the row span amount of the grid area at the MD viewport size.
+         */
+        "mdRowSpan": TQ2GridAreaRowSpanOptions;
+        /**
+          * Sets the starting row of the grid area at the MD viewport size. When set to `auto`, the grid area will automatically start at the first available row.
+         */
+        "mdRowStart": TQ2GridAreaRowStartOptions;
+        /**
+          * Sets the z-index of the grid area at the MD viewport size.
+         */
+        "mdZIndex": TQ2GridAreaZIndexOptions;
+        /**
+          * Sets the row span amount of the grid area at the baseline viewport size.
+         */
+        "rowSpan": TQ2GridAreaRowSpanOptions;
+        /**
+          * Sets the starting row of the grid area at the baseline viewport size. When set to `auto`, the grid area will automatically start at the first available row.
+         */
+        "rowStart": TQ2GridAreaRowStartOptions;
+        /**
+          * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size. When set to `auto`, the grid area will inherit this property from the parent q2-grid component.
+         */
+        "smAlign": TQ2GridAreaAlignOptions;
+        /**
+          * Sets the column span amount of the grid area at the SM viewport size.
+         */
+        "smColumnSpan": TQ2GridAreaColumnSpanOptions;
+        /**
+          * Sets the starting column of the grid area at the SM viewport size. When set to `auto`, the grid area will automatically start at the first available column.
+         */
+        "smColumnStart": TQ2GridAreaColumnStartOptions;
+        /**
+          * Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size. When set to `auto`, the grid area will inherit this property from the parent q2-grid component.
+         */
+        "smJustify": TQ2GridAreaJustifyOptions;
+        /**
+          * Sets the row span amount of the grid area at the SM viewport size.
+         */
+        "smRowSpan": TQ2GridAreaRowSpanOptions;
+        /**
+          * Sets the starting row of the grid area at the SM viewport size. When set to `auto`, the grid area will automatically start at the first available row.
+         */
+        "smRowStart": TQ2GridAreaRowStartOptions;
+        /**
+          * Sets the z-index of the grid area at the SM viewport size.
+         */
+        "smZIndex": TQ2GridAreaZIndexOptions;
+        /**
+          * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size. When set to `auto`, the grid area will inherit this property from the parent q2-grid component.
+         */
+        "xlAlign": TQ2GridAreaAlignOptions;
+        /**
+          * Sets the column span amount of the grid area at the XL viewport size.
+         */
+        "xlColumnSpan": TQ2GridAreaColumnSpanOptions;
+        /**
+          * Sets the starting column of the grid area at the XL viewport size. When set to `auto`, the grid area will automatically start at the first available column.
+         */
+        "xlColumnStart": TQ2GridAreaColumnStartOptions;
+        /**
+          * Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size. When set to `auto`, the grid area will inherit this property from the parent q2-grid component.
+         */
+        "xlJustify": TQ2GridAreaJustifyOptions;
+        /**
+          * Sets the row span amount of the grid area at the XL viewport size.
+         */
+        "xlRowSpan": TQ2GridAreaRowSpanOptions;
+        /**
+          * Sets the starting row of the grid area at the XL viewport size. When set to `auto`, the grid area will automatically start at the first available row.
+         */
+        "xlRowStart": TQ2GridAreaRowStartOptions;
+        /**
+          * Sets the z-index of the grid area at the XL viewport size.
+         */
+        "xlZIndex": TQ2GridAreaZIndexOptions;
+        /**
+          * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size. When set to `auto`, the grid area will inherit this property from the parent q2-grid component.
+         */
+        "xsAlign": TQ2GridAreaAlignOptions;
+        /**
+          * Sets the column span amount of the grid area at the XS viewport size.
+         */
+        "xsColumnSpan": TQ2GridAreaColumnSpanOptions;
+        /**
+          * Sets the starting column of the grid area at the XS viewport size. When set to `auto`, the grid area will automatically start at the first available column.
+         */
+        "xsColumnStart": TQ2GridAreaColumnStartOptions;
+        /**
+          * Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size. When set to `auto`, the grid area will inherit this property from the parent q2-grid component.
+         */
+        "xsJustify": TQ2GridAreaJustifyOptions;
+        /**
+          * Sets the row span amount of the grid area at the XS viewport size.
+         */
+        "xsRowSpan": TQ2GridAreaRowSpanOptions;
+        /**
+          * Sets the starting row of the grid area at the XS viewport size. When set to `auto`, the grid area will automatically start at the first available row.
+         */
+        "xsRowStart": TQ2GridAreaRowStartOptions;
+        /**
+          * Sets the z-index of the grid area at the XS viewport size.
+         */
+        "xsZIndex": TQ2GridAreaZIndexOptions;
+        /**
+          * Sets the z-index of the grid area at the baseline viewport size.
+         */
+        "zIndex": TQ2GridAreaZIndexOptions;
+    }
     interface Q2Icon {
         /**
           * Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text.
@@ -1954,6 +2255,25 @@ export namespace Components {
          */
         "value": string;
     }
+    /**
+     * ***********
+     * * WARNING *
+     * ***********
+     * Touching this file obligates you to manually test thoroughly, because Puppeteer can't capture every edgecase.
+     * Each of the following Scenarios must be tested on each Device, in each Environment.
+     * Scenarios:
+     * - Q2 Select non-typeable
+     * - Q2 Select typeable
+     * Devices:
+     * - iOS Safari
+     * - Android Chrome
+     * - MacOS Safari
+     * - Chrome
+     * - Firefox
+     * Environments:
+     * - Standard (Outside of Iframe)
+     * - SDK Extension (Inside of Iframe)
+     */
     interface Q2Popover {
         /**
           * Aligns the popover to the left or right side of the control element.
@@ -3111,6 +3431,18 @@ declare global {
         prototype: HTMLQ2FormattedTextElement;
         new (): HTMLQ2FormattedTextElement;
     };
+    interface HTMLQ2GridElement extends Components.Q2Grid, HTMLStencilElement {
+    }
+    var HTMLQ2GridElement: {
+        prototype: HTMLQ2GridElement;
+        new (): HTMLQ2GridElement;
+    };
+    interface HTMLQ2GridAreaElement extends Components.Q2GridArea, HTMLStencilElement {
+    }
+    var HTMLQ2GridAreaElement: {
+        prototype: HTMLQ2GridAreaElement;
+        new (): HTMLQ2GridAreaElement;
+    };
     interface HTMLQ2IconElement extends Components.Q2Icon, HTMLStencilElement {
     }
     var HTMLQ2IconElement: {
@@ -3328,6 +3660,25 @@ declare global {
     interface HTMLQ2PopoverElementEventMap {
         "popoverStateChanged": { open: boolean };
     }
+    /**
+     * ***********
+     * * WARNING *
+     * ***********
+     * Touching this file obligates you to manually test thoroughly, because Puppeteer can't capture every edgecase.
+     * Each of the following Scenarios must be tested on each Device, in each Environment.
+     * Scenarios:
+     * - Q2 Select non-typeable
+     * - Q2 Select typeable
+     * Devices:
+     * - iOS Safari
+     * - Android Chrome
+     * - MacOS Safari
+     * - Chrome
+     * - Firefox
+     * Environments:
+     * - Standard (Outside of Iframe)
+     * - SDK Extension (Inside of Iframe)
+     */
     interface HTMLQ2PopoverElement extends Components.Q2Popover, HTMLStencilElement {
         addEventListener<K extends keyof HTMLQ2PopoverElementEventMap>(type: K, listener: (this: HTMLQ2PopoverElement, ev: Q2PopoverCustomEvent<HTMLQ2PopoverElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3610,6 +3961,8 @@ declare global {
         "q2-file-picker": HTMLQ2FilePickerElement;
         "q2-form": HTMLQ2FormElement;
         "q2-formatted-text": HTMLQ2FormattedTextElement;
+        "q2-grid": HTMLQ2GridElement;
+        "q2-grid-area": HTMLQ2GridAreaElement;
         "q2-icon": HTMLQ2IconElement;
         "q2-input": HTMLQ2InputElement;
         "q2-item": HTMLQ2ItemElement;
@@ -4815,6 +5168,10 @@ declare namespace LocalJSX {
         "type"?: string;
     }
     interface Q2FilePicker {
+        /**
+          * The size of the browse button. Can be 'none', 'small', 'medium', or 'large'.
+         */
+        "buttonSize"?: 'none' | 'small' | 'medium' | 'large';
         /**
           * A description of the field. This is announced by screen readers when the field is focused.
           * @localizable
@@ -4839,9 +5196,10 @@ declare namespace LocalJSX {
         "maxFiles"?: number;
         "onTctChange"?: (event: Q2FilePickerCustomEvent<FilesObject>) => void;
         /**
-          * An array of objects representing the status of the files being uploaded. Each object should have a `name` property (the file name) and a `status` property (the status of the file) that equals either 'in-progress', 'failed' or 'uploaded'.
+          * An array of objects representing the status of the files being uploaded. Each object should have a `name` property (the file name), a `status` property (the status of the file) that equals either 'in-progress', 'failed', or 'uploaded', and an optional `message` property.  Custom messages provided in the `message` property will only be used for failed uploads (`status: 'failed'`). This allows for more specific error messages in failure scenarios, while ensuring that all other file status messages remain consistent and aligned with approved design/UX standards. Custom messages for failed uploads are limited to a single line.
+          * @localizable
          */
-        "status"?: { name: string; status: 'in-progress' | 'failed' | 'uploaded' }[];
+        "status"?: StatusFile[];
         /**
           * Returns an array of File objects representing the files selected by the user. If no files are selected, the value is an empty array.
           * @readonly
@@ -4892,6 +5250,298 @@ declare namespace LocalJSX {
          */
         "value"?: number;
     }
+    interface Q2Grid {
+        /**
+          * Sets the vertical alignment behavior of q2-grid-area components within a grid track at the baseline viewport size.
+         */
+        "align"?: TQ2GridAlignOptions;
+        /**
+          * Sets the amount of columns to render within the grid at the baseline viewport size.
+         */
+        "columns"?: TQ2GridColumnsOptions;
+        /**
+          * Sets the gap size between rows and columns within the grid at the baseline viewport size. Gap values utilize CSS variables to allow for easy theming and customization. Visit the Style section to learn more.
+         */
+        "gap"?: TQ2GridGapOptions;
+        /**
+          * Sets the horizontal alignment behavior of q2-grid-area components within a grid track at the baseline viewport size.
+         */
+        "justify"?: TQ2GridJustifyOptions;
+        /**
+          * Sets the vertical alignment behavior of q2-grid-area components within a grid track at the 'LG' viewport size.
+         */
+        "lgAlign"?: TQ2GridAlignOptions;
+        /**
+          * Sets the amount of columns to render within the grid at the 'LG' viewport size.
+         */
+        "lgColumns"?: TQ2GridColumnsOptions;
+        /**
+          * Sets the gap size between rows and columns within the grid at the 'LG' viewport size. Gap values utilize CSS variables to allow for easy theming and customization. Visit the Style section to learn more.
+         */
+        "lgGap"?: TQ2GridGapOptions;
+        /**
+          * Sets the horizontal alignment behavior of q2-grid-area components within a grid track at the 'LG' viewport size.
+         */
+        "lgJustify"?: TQ2GridJustifyOptions;
+        /**
+          * Sets the amount of rows to render within the grid at the 'LG' viewport size. When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area components placed within the grid and the number of columns allowed per row.
+         */
+        "lgRows"?: TQ2GridRowsOptions;
+        /**
+          * Sets the vertical alignment behavior of q2-grid-area components within a grid track at the 'MD' viewport size.
+         */
+        "mdAlign"?: TQ2GridAlignOptions;
+        /**
+          * Sets the amount of columns to render within the grid at the 'MD' viewport size.
+         */
+        "mdColumns"?: TQ2GridColumnsOptions;
+        /**
+          * Sets the gap size between rows and columns within the grid at the 'MD' viewport size. Gap values utilize CSS variables to allow for easy theming and customization. Visit the Style section to learn more.
+         */
+        "mdGap"?: TQ2GridGapOptions;
+        /**
+          * Sets the horizontal alignment behavior of q2-grid-area components within a grid track at the 'MD' viewport size.
+         */
+        "mdJustify"?: TQ2GridJustifyOptions;
+        /**
+          * Sets the amount of rows to render within the grid at the 'MD' viewport size. When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area components placed within the grid and the number of columns allowed per row.
+         */
+        "mdRows"?: TQ2GridRowsOptions;
+        /**
+          * Sets the amount of rows to render within the grid at the baseline viewport size. When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area components placed within the grid and the number of columns allowed per row.
+         */
+        "rows"?: TQ2GridRowsOptions;
+        /**
+          * Sets the vertical alignment behavior of q2-grid-area components within a grid track at the 'SM' viewport size.
+         */
+        "smAlign"?: TQ2GridAlignOptions;
+        /**
+          * Sets the amount of columns to render within the grid at the 'SM' viewport size.
+         */
+        "smColumns"?: TQ2GridColumnsOptions;
+        /**
+          * Sets the gap size between rows and columns within the grid at the 'SM' viewport size. Gap values utilize CSS variables to allow for easy theming and customization. Visit the Style section to learn more.
+         */
+        "smGap"?: TQ2GridGapOptions;
+        /**
+          * Sets the horizontal alignment behavior of q2-grid-area components within a grid track at the 'SM' viewport size.
+         */
+        "smJustify"?: TQ2GridJustifyOptions;
+        /**
+          * Sets the amount of rows to render within the grid at the 'SM' viewport size. When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area components placed within the grid and the number of columns allowed per row.
+         */
+        "smRows"?: TQ2GridRowsOptions;
+        /**
+          * Sets the vertical alignment behavior of q2-grid-area components within a grid track at the 'XL' viewport size.
+         */
+        "xlAlign"?: TQ2GridAlignOptions;
+        /**
+          * Sets the amount of columns to render within the grid at the 'XL' viewport size.
+         */
+        "xlColumns"?: TQ2GridColumnsOptions;
+        /**
+          * Sets the gap size between rows and columns within the grid at the 'XL' viewport size. Gap values utilize CSS variables to allow for easy theming and customization. Visit the Style section to learn more.
+         */
+        "xlGap"?: TQ2GridGapOptions;
+        /**
+          * Sets the horizontal alignment behavior of q2-grid-area components within a grid track at the 'XL' viewport size.
+         */
+        "xlJustify"?: TQ2GridJustifyOptions;
+        /**
+          * Sets the amount of rows to render within the grid at the 'XL' viewport size. When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area components placed within the grid and the number of columns allowed per row.
+         */
+        "xlRows"?: TQ2GridRowsOptions;
+        /**
+          * Sets the vertical alignment behavior of q2-grid-area components within a grid track at the 'XS' viewport size.
+         */
+        "xsAlign"?: TQ2GridAlignOptions;
+        /**
+          * Sets the amount of columns to render within the grid at the 'XS' viewport size.
+         */
+        "xsColumns"?: TQ2GridColumnsOptions;
+        /**
+          * Sets the gap size between rows and columns within the grid at the 'XS' viewport size. Gap values utilize CSS variables to allow for easy theming and customization. Visit the Style section to learn more.
+         */
+        "xsGap"?: TQ2GridGapOptions;
+        /**
+          * Sets the horizontal alignment behavior of q2-grid-area components within a grid track at the 'XS' viewport size.
+         */
+        "xsJustify"?: TQ2GridJustifyOptions;
+        /**
+          * Sets the amount of rows to render within the grid at the 'XS' viewport size. When set to `auto`, q2-grid will auto render rows based on the number of q2-grid-area components placed within the grid and the number of columns allowed per row.
+         */
+        "xsRows"?: TQ2GridRowsOptions;
+    }
+    interface Q2GridArea {
+        /**
+          * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size. When set to `auto`, the grid area will inherit this property from the parent q2-grid component.
+         */
+        "align"?: TQ2GridAreaAlignOptions;
+        /**
+          * Sets the column span amount of the grid area at the baseline viewport size.
+         */
+        "columnSpan"?: TQ2GridAreaColumnSpanOptions;
+        /**
+          * Sets the starting column of the grid area at the baseline viewport size.
+         */
+        "columnStart"?: TQ2GridAreaColumnStartOptions;
+        /**
+          * Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size. When set to `auto`, the grid area will inherit this property from the parent q2-grid component.
+         */
+        "justify"?: TQ2GridAreaJustifyOptions;
+        /**
+          * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size. When set to `auto`, the grid area will inherit this property from the parent q2-grid component.
+         */
+        "lgAlign"?: TQ2GridAreaAlignOptions;
+        /**
+          * Sets the column span amount of the grid area at the LG viewport size.
+         */
+        "lgColumnSpan"?: TQ2GridAreaColumnSpanOptions;
+        /**
+          * Sets the starting column of the grid area at the LG viewport size. When set to `auto`, the grid area will automatically start at the first available column.
+         */
+        "lgColumnStart"?: TQ2GridAreaColumnStartOptions;
+        /**
+          * Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size. When set to `auto`, the grid area will inherit this property from the parent q2-grid component.
+         */
+        "lgJustify"?: TQ2GridAreaJustifyOptions;
+        /**
+          * Sets the row span amount of the grid area at the LG viewport size.
+         */
+        "lgRowSpan"?: TQ2GridAreaRowSpanOptions;
+        /**
+          * Sets the starting row of the grid area at the LG viewport size. When set to `auto`, the grid area will automatically start at the first available row.
+         */
+        "lgRowStart"?: TQ2GridAreaRowStartOptions;
+        /**
+          * Sets the z-index of the grid area at the LG viewport size.
+         */
+        "lgZIndex"?: TQ2GridAreaZIndexOptions;
+        /**
+          * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size. When set to `auto`, the grid area will inherit this property from the parent q2-grid component.
+         */
+        "mdAlign"?: TQ2GridAreaAlignOptions;
+        /**
+          * Sets the column span amount of the grid area at the MD viewport size.
+         */
+        "mdColumnSpan"?: TQ2GridAreaColumnSpanOptions;
+        /**
+          * Sets the starting column of the grid area at the MD viewport size. When set to `auto`, the grid area will automatically start at the first available column.
+         */
+        "mdColumnStart"?: TQ2GridAreaColumnStartOptions;
+        /**
+          * Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size. When set to `auto`, the grid area will inherit this property from the parent q2-grid component.
+         */
+        "mdJustify"?: TQ2GridAreaJustifyOptions;
+        /**
+          * Sets the row span amount of the grid area at the MD viewport size.
+         */
+        "mdRowSpan"?: TQ2GridAreaRowSpanOptions;
+        /**
+          * Sets the starting row of the grid area at the MD viewport size. When set to `auto`, the grid area will automatically start at the first available row.
+         */
+        "mdRowStart"?: TQ2GridAreaRowStartOptions;
+        /**
+          * Sets the z-index of the grid area at the MD viewport size.
+         */
+        "mdZIndex"?: TQ2GridAreaZIndexOptions;
+        /**
+          * Sets the row span amount of the grid area at the baseline viewport size.
+         */
+        "rowSpan"?: TQ2GridAreaRowSpanOptions;
+        /**
+          * Sets the starting row of the grid area at the baseline viewport size. When set to `auto`, the grid area will automatically start at the first available row.
+         */
+        "rowStart"?: TQ2GridAreaRowStartOptions;
+        /**
+          * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size. When set to `auto`, the grid area will inherit this property from the parent q2-grid component.
+         */
+        "smAlign"?: TQ2GridAreaAlignOptions;
+        /**
+          * Sets the column span amount of the grid area at the SM viewport size.
+         */
+        "smColumnSpan"?: TQ2GridAreaColumnSpanOptions;
+        /**
+          * Sets the starting column of the grid area at the SM viewport size. When set to `auto`, the grid area will automatically start at the first available column.
+         */
+        "smColumnStart"?: TQ2GridAreaColumnStartOptions;
+        /**
+          * Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size. When set to `auto`, the grid area will inherit this property from the parent q2-grid component.
+         */
+        "smJustify"?: TQ2GridAreaJustifyOptions;
+        /**
+          * Sets the row span amount of the grid area at the SM viewport size.
+         */
+        "smRowSpan"?: TQ2GridAreaRowSpanOptions;
+        /**
+          * Sets the starting row of the grid area at the SM viewport size. When set to `auto`, the grid area will automatically start at the first available row.
+         */
+        "smRowStart"?: TQ2GridAreaRowStartOptions;
+        /**
+          * Sets the z-index of the grid area at the SM viewport size.
+         */
+        "smZIndex"?: TQ2GridAreaZIndexOptions;
+        /**
+          * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size. When set to `auto`, the grid area will inherit this property from the parent q2-grid component.
+         */
+        "xlAlign"?: TQ2GridAreaAlignOptions;
+        /**
+          * Sets the column span amount of the grid area at the XL viewport size.
+         */
+        "xlColumnSpan"?: TQ2GridAreaColumnSpanOptions;
+        /**
+          * Sets the starting column of the grid area at the XL viewport size. When set to `auto`, the grid area will automatically start at the first available column.
+         */
+        "xlColumnStart"?: TQ2GridAreaColumnStartOptions;
+        /**
+          * Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size. When set to `auto`, the grid area will inherit this property from the parent q2-grid component.
+         */
+        "xlJustify"?: TQ2GridAreaJustifyOptions;
+        /**
+          * Sets the row span amount of the grid area at the XL viewport size.
+         */
+        "xlRowSpan"?: TQ2GridAreaRowSpanOptions;
+        /**
+          * Sets the starting row of the grid area at the XL viewport size. When set to `auto`, the grid area will automatically start at the first available row.
+         */
+        "xlRowStart"?: TQ2GridAreaRowStartOptions;
+        /**
+          * Sets the z-index of the grid area at the XL viewport size.
+         */
+        "xlZIndex"?: TQ2GridAreaZIndexOptions;
+        /**
+          * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size. When set to `auto`, the grid area will inherit this property from the parent q2-grid component.
+         */
+        "xsAlign"?: TQ2GridAreaAlignOptions;
+        /**
+          * Sets the column span amount of the grid area at the XS viewport size.
+         */
+        "xsColumnSpan"?: TQ2GridAreaColumnSpanOptions;
+        /**
+          * Sets the starting column of the grid area at the XS viewport size. When set to `auto`, the grid area will automatically start at the first available column.
+         */
+        "xsColumnStart"?: TQ2GridAreaColumnStartOptions;
+        /**
+          * Sets the horizontal alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size. When set to `auto`, the grid area will inherit this property from the parent q2-grid component.
+         */
+        "xsJustify"?: TQ2GridAreaJustifyOptions;
+        /**
+          * Sets the row span amount of the grid area at the XS viewport size.
+         */
+        "xsRowSpan"?: TQ2GridAreaRowSpanOptions;
+        /**
+          * Sets the starting row of the grid area at the XS viewport size. When set to `auto`, the grid area will automatically start at the first available row.
+         */
+        "xsRowStart"?: TQ2GridAreaRowStartOptions;
+        /**
+          * Sets the z-index of the grid area at the XS viewport size.
+         */
+        "xsZIndex"?: TQ2GridAreaZIndexOptions;
+        /**
+          * Sets the z-index of the grid area at the baseline viewport size.
+         */
+        "zIndex"?: TQ2GridAreaZIndexOptions;
+    }
     interface Q2Icon {
         /**
           * Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text.
@@ -5542,6 +6192,25 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    /**
+     * ***********
+     * * WARNING *
+     * ***********
+     * Touching this file obligates you to manually test thoroughly, because Puppeteer can't capture every edgecase.
+     * Each of the following Scenarios must be tested on each Device, in each Environment.
+     * Scenarios:
+     * - Q2 Select non-typeable
+     * - Q2 Select typeable
+     * Devices:
+     * - iOS Safari
+     * - Android Chrome
+     * - MacOS Safari
+     * - Chrome
+     * - Firefox
+     * Environments:
+     * - Standard (Outside of Iframe)
+     * - SDK Extension (Inside of Iframe)
+     */
     interface Q2Popover {
         /**
           * Aligns the popover to the left or right side of the control element.
@@ -6229,6 +6898,8 @@ declare namespace LocalJSX {
         "q2-file-picker": Q2FilePicker;
         "q2-form": Q2Form;
         "q2-formatted-text": Q2FormattedText;
+        "q2-grid": Q2Grid;
+        "q2-grid-area": Q2GridArea;
         "q2-icon": Q2Icon;
         "q2-input": Q2Input;
         "q2-item": Q2Item;
@@ -6293,6 +6964,8 @@ declare module "@stencil/core" {
             "q2-file-picker": LocalJSX.Q2FilePicker & JSXBase.HTMLAttributes<HTMLQ2FilePickerElement>;
             "q2-form": LocalJSX.Q2Form & JSXBase.HTMLAttributes<HTMLQ2FormElement>;
             "q2-formatted-text": LocalJSX.Q2FormattedText & JSXBase.HTMLAttributes<HTMLQ2FormattedTextElement>;
+            "q2-grid": LocalJSX.Q2Grid & JSXBase.HTMLAttributes<HTMLQ2GridElement>;
+            "q2-grid-area": LocalJSX.Q2GridArea & JSXBase.HTMLAttributes<HTMLQ2GridAreaElement>;
             "q2-icon": LocalJSX.Q2Icon & JSXBase.HTMLAttributes<HTMLQ2IconElement>;
             "q2-input": LocalJSX.Q2Input & JSXBase.HTMLAttributes<HTMLQ2InputElement>;
             "q2-item": LocalJSX.Q2Item & JSXBase.HTMLAttributes<HTMLQ2ItemElement>;
@@ -6310,6 +6983,25 @@ declare module "@stencil/core" {
             "q2-option-list": LocalJSX.Q2OptionList & JSXBase.HTMLAttributes<HTMLQ2OptionListElement>;
             "q2-pagination": LocalJSX.Q2Pagination & JSXBase.HTMLAttributes<HTMLQ2PaginationElement>;
             "q2-pill": LocalJSX.Q2Pill & JSXBase.HTMLAttributes<HTMLQ2PillElement>;
+            /**
+             * ***********
+             * * WARNING *
+             * ***********
+             * Touching this file obligates you to manually test thoroughly, because Puppeteer can't capture every edgecase.
+             * Each of the following Scenarios must be tested on each Device, in each Environment.
+             * Scenarios:
+             * - Q2 Select non-typeable
+             * - Q2 Select typeable
+             * Devices:
+             * - iOS Safari
+             * - Android Chrome
+             * - MacOS Safari
+             * - Chrome
+             * - Firefox
+             * Environments:
+             * - Standard (Outside of Iframe)
+             * - SDK Extension (Inside of Iframe)
+             */
             "q2-popover": LocalJSX.Q2Popover & JSXBase.HTMLAttributes<HTMLQ2PopoverElement>;
             "q2-radio": LocalJSX.Q2Radio & JSXBase.HTMLAttributes<HTMLQ2RadioElement>;
             "q2-radio-group": LocalJSX.Q2RadioGroup & JSXBase.HTMLAttributes<HTMLQ2RadioGroupElement>;