q2-tecton-elements 1.50.1 → 1.51.1

package/dist/types/components.d.ts

@@ -32,6 +32,23 @@ export { IStepperPaneEvent } from "./components/q2-stepper-pane/q2-stepper-pane"
 export namespace Components {
     interface ClickElsewhere {
     }
+    interface Q2ActionGroup {
+        /**
+          * Whether the buttons should take up the full width of the container when in horizontal orientation.
+          * @warning This will prevent the buttons from wrapping when the container is too small to fit all buttons.
+         */
+        "fullWidth": boolean;
+        /**
+          * The orientation of the buttons, which will override the auto orientation.
+          * @info This will override and disable the auto determination of the orientation.
+         */
+        "orientation": 'auto' | 'vertical' | 'horizontal';
+        /**
+          * The width, in pixels, that determines whether to display the buttons in vertical or horizontal orientation
+          * @info The component determines this based on the width of the element itself, not the browser window.
+         */
+        "orientationThreshold": number;
+    }
     interface Q2ActionSheet {
         "data": ActionSheetData;
         "hide": (data?: ActionSheetListCloseData) => Promise<void>;
@@ -491,7 +508,7 @@ export namespace Components {
          */
         "gridLines": 'horizontal' | 'vertical' | 'off';
         /**
-          * Sets chart padding around the grid. Each value in the object will be interpreted as pixels.  **Examples:**
+          * Sets chart padding around the grid. Each value in the object will be interpreted as pixels.  **Example:**
           * @snippet chart.gridPadding = { left: 10, right: 10, top: 20, bottom: 20 };
          */
         "gridPadding": { left?: number; right?: number; top?: number; bottom?: number };
@@ -578,7 +595,7 @@ export namespace Components {
          */
         "formatModifier": string;
         /**
-          * Sets chart padding around the grid. Each value in the object will be interpreted as pixels.  **Examples:**
+          * Sets chart padding around the grid. Each value in the object will be interpreted as pixels.  **Example:**
           * @snippet chart.gridPadding = { left: 10, right: 10, top: 20, bottom: 20 };
          */
         "gridPadding": { left?: number; right?: number; top?: number; bottom?: number };
@@ -855,7 +872,7 @@ export namespace Components {
          */
         "getCellContent": (rowId: number | string, columnKey: string) => Promise<string>;
         /**
-          * Defines the headers of the table.
+          * Defines the headers of the table.  **Example:**
           * @snippet element.headers = [  {    title: 'Day of the Week',    key: 'day',  },  {    title: 'Sales',    key: 'sales',    align: 'end',  } ]
          */
         "headers": Q2DataTableHeader[];
@@ -873,7 +890,7 @@ export namespace Components {
          */
         "loading": boolean;
         /**
-          * Defines the rows of the table.
+          * Defines the rows of the table.  **Example:**
           * @snippet element.rows = [  {    id: 1,    cells: {      day: 'Monday',      sales: 93    }  },  {    id: 2,    cells: {      day: 'Tuesday',      sales: 127    }  },  {    id: 3,    cells: {      day: 'Wednesday',      sales: 121    } ]
          */
         "rows": Q2DataTableRow[];
@@ -953,6 +970,11 @@ export namespace Components {
           * If `true`, component expands to fill the width of its parent element.
          */
         "block": boolean;
+        /**
+          * Emulates clicking the dropdown `<button>` to hide the popover if it is showing.
+          * @testOnly
+         */
+        "closePopover": () => Promise<void>;
         /**
           * Tells the outlet what the type of object being passed in as contextValue. This will allow for the hierarchy resolution logic to work to determine if an option should or should not be shown.
           * @info Only applicable when using `<q2-dropdown>` for outlets.
@@ -991,6 +1013,11 @@ export namespace Components {
           * Determine whether the popover is open or closed.
          */
         "open": boolean;
+        /**
+          * Emulates clicking the dropdown `<button>` to show the popover if it is hidden.
+          * @testOnly
+         */
+        "openPopover": () => Promise<void>;
         /**
           * @deprecated
          */
@@ -1003,6 +1030,10 @@ export namespace Components {
           * Force the direction of the popover dropdown when it opens. If no value is passed, the component will auto-detect the direction based on available space.
          */
         "popoverDirection": 'up' | 'down';
+        /**
+          * Force the maximum height of the popover. This value will be interpreted as pixels. If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.
+         */
+        "popoverMaxHeight": number;
         /**
           * @deprecated
          */
@@ -1017,8 +1048,19 @@ export namespace Components {
           * @info Only applicable when using `<q2-dropdown>` for outlets.
          */
         "resolvedType": string;
+        /**
+          * Emulates opening the dropdown and selecting a [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/).  If the dropdown is closed, this will open it before selecting the item.  If the value does not match any item's value, this method does nothing.
+          * @testOnly
+         */
+        "selectItem": (value: string) => Promise<void>;
+        /**
+          * Emulates opening the dropdown and selecting a [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/)'s *remove* button.  If the dropdown is closed, this will open it before selecting the remove item button.  Requirements for this method to work properly: - Provided `value` matches the item's `value` property - Item has the `removable` property enabled
+          * @testOnly
+         */
+        "selectRemoveItem": (value: string) => Promise<void>;
         /**
           * The type of button used as the menu toggle.
+          * @info Type must be "custom" to use the custom button slot.
          */
         "type": 'icon' | 'fab' | 'custom' | 'primary' | 'secondary' | 'neutral';
     }
@@ -1130,6 +1172,40 @@ export namespace Components {
          */
         "value": string;
     }
+    interface Q2FormattedText {
+        /**
+          * Formats to the language provided. Accepts multiple locales in an array as sequential fallbacks.
+         */
+        "locale": string | string[];
+        /**
+          * The maximum number of fraction digits to use.
+         */
+        "maximumFractionDigits": number;
+        /**
+          * The minimum number of fraction digits to use.
+         */
+        "minimumFractionDigits": number;
+        /**
+          * The minimum number of integer digits to use.
+         */
+        "minimumIntegerDigits": number;
+        /**
+          * Determine how the positive or negative sign should display.  Behavior: - `always`: Always display the sign. - `auto`: Sign displays for negative numbers only, including negative zero. - `exceptZero`: Sign displays for positive and negative numbers, but not zero. - `never`: Never display the sign.
+         */
+        "signDisplay": 'never' | 'auto' | 'always' | 'exceptZero';
+        /**
+          * Applies styling based on the size provided. If no size is provided, it will display as inline text.
+         */
+        "size": 'small' | 'medium' | 'large' | undefined;
+        /**
+          * @private Inherited from q2-detail when slotted to match styling of q2-detail and q2-formatted-text texts.
+         */
+        "slotSize": string;
+        /**
+          * The value you want formatted.
+         */
+        "value": number;
+    }
     interface Q2Icon {
         /**
           * Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text.
@@ -1268,8 +1344,8 @@ export namespace Components {
          */
         "optional": boolean;
         /**
-          * The pattern string of the input field, regular expression string is expected. This allows us to check the validity user's input. For instance, &lt;q2-input label="My input" pattern="[a-zA-Z0-9]{3,5}" id="myInput"&gt;  - Allows only 3~5 alphanumeric letters  In Javascript, you can check the validity object in your q2-input Type "abcdefgh", then access the validity object
-          * @snippet const myInput = document.querySelector('#myInput'); console.log(myInput.validity);
+          * Applies the value as a RegEx pattern to assess the validity of the input field's value. Check the ValidityState's `patternMismatch` property for the result.  **Example:**
+          * @snippet <q2-input label="My input" pattern="[a-zA-Z0-9]{3,5}" id="myInput"></q2-input> // enter "abcdefgh" in the input field (too many characters) const myInput = document.querySelector('#myInput'); console.log(myInput.validity.patternMismatch); // true
          */
         "pattern": string;
         /**
@@ -1318,6 +1394,9 @@ export namespace Components {
           * Specifies the field's expeted [input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types), and provides the optimal keyboard on mobile devices.
          */
         "type": InputType;
+        /**
+          * Returns a read-only `ValidityState` object representing the validity states of the element. [See MDN for more information on ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState).
+         */
         "validity": ValidityState;
         /**
           * The value of the input field.
@@ -1349,6 +1428,41 @@ export namespace Components {
          */
         "selectedItemId": string;
     }
+    interface Q2Link {
+        /**
+          * A method for click.
+          * @testOnly
+         */
+        "clickLink": () => Promise<void>;
+        /**
+          * The disabled.
+         */
+        "disabled": boolean;
+        /**
+          * The link when clicked.
+         */
+        "href": string;
+        /**
+          * The label to display.
+         */
+        "label": string;
+        /**
+          * The [referrerpolicy](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy)
+         */
+        "referrerpolicy": ReferrerPolicy;
+        /**
+          * The target.
+         */
+        "target": string;
+        /**
+          * The title attribute on a tag in shadowRoot.
+         */
+        "tctTitle": string;
+        /**
+          * The value link to display.
+         */
+        "variant": string;
+    }
     interface Q2List {
         /**
           * Adds a border between each items
@@ -1531,6 +1645,26 @@ export namespace Components {
           * Determines whether the component uses the dynamic resizing behavior.
          */
         "autoSize": boolean;
+        /**
+          * Emulates clicking the button that controls moving to the first page, and emitting a change event with the updated page number.  If the `<button>` is disabled, this method does nothing.
+          * @testOnly
+         */
+        "clickFirstPage": () => Promise<void>;
+        /**
+          * Emulates clicking the button that controls moving to the last page, and emitting a change event with the updated page number.  If the `<button>` is disabled, this method does nothing.
+          * @testOnly
+         */
+        "clickLastPage": () => Promise<void>;
+        /**
+          * Emulates clicking the button that controls moving to the next page, and emitting a change event with the updated page number.  If the `<button>` is disabled, this method does nothing.
+          * @testOnly
+         */
+        "clickNextPage": () => Promise<void>;
+        /**
+          * Emulates clicking the button that controls moving to the previous page, and emitting a change event with the updated page number.  If the `<button>` is disabled, this method does nothing.
+          * @testOnly
+         */
+        "clickPreviousPage": () => Promise<void>;
         /**
           * The current page that is being displayed.
          */
@@ -1541,7 +1675,7 @@ export namespace Components {
          */
         "pages": number;
         /**
-          * Indicates to only display the current and total pages.
+          * Indicates to display only the current and total pages.
          */
         "pagesOnly": boolean;
         /**
@@ -1549,7 +1683,8 @@ export namespace Components {
          */
         "perPage": number;
         /**
-          * The list of perPage to operate pagination. e.g.) [10, 25, 50]
+          * A list of perPage values. This generates a [Select](https://tecton.q2developer.com/design-system/q2-select/) element that allows the user to modify the `perPage` value.  **Example:**
+          * @snippet this.perPageIncrements = [10, 25, 50];
          */
         "perPageIncrements": number[];
         /**
@@ -1557,9 +1692,19 @@ export namespace Components {
          */
         "recordType": string;
         /**
-          * Indicates to only display the current and total records.
+          * Indicates to display only the current and total records.
          */
         "recordsOnly": boolean;
+        /**
+          * Emulates selecting a `perPage` value from the `perPageIncrements` dropdown, and updates the value of the `perPage` property.  If `value` is not in the `perPageIncrements` array, this method does nothing.
+          * @testOnly
+         */
+        "selectPerPageIncrementValue": (value: number) => Promise<void>;
+        /**
+          * Emulates setting the page value in the `<input>` field, and emitting a change event with the updated page number.  If `value` is invalid, this method does nothing.
+          * @testOnly
+         */
+        "setPageValue": (value: number) => Promise<void>;
         /**
           * The total number of records to paginate.
          */
@@ -1623,6 +1768,10 @@ export namespace Components {
           * Force the direction of the popover dropdown when it opens. If no value is passed, the component will auto-detect the direction based on available space.
          */
         "popoverDirection": 'up' | 'down';
+        /**
+          * Force the maximum height of the popover. This value will be interpreted as pixels. If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.
+         */
+        "popoverMaxHeight": number;
         /**
           * @deprecated
          */
@@ -1662,6 +1811,10 @@ export namespace Components {
           * Force the direction of the popover when it opens. If no value is passed, the component will auto-detect the direction based on available space.
          */
         "direction": 'up' | 'down';
+        /**
+          * Force the maximum height of the popover. This value will be interpreted as pixels. If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.
+         */
+        "maxHeight": number;
         /**
           * @deprecated
          */
@@ -1830,11 +1983,31 @@ export namespace Components {
          */
         "validDateProp": () => Promise<boolean>;
     }
+    interface Q2ResizeObserver {
+        /**
+          * Determines wheter or not events will be emitted from the component.
+         */
+        "disabled": boolean;
+        /**
+          * Returns the latest entries reported by the component.
+         */
+        "getCurrentResizeEntries": () => Promise<ResizeObserverEntry[]>;
+    }
     interface Q2Section {
+        /**
+          * A test method to collapse section.
+          * @testOnly
+         */
+        "collapse": () => Promise<void>;
         /**
           * Determines if the section is collapsible.
          */
         "collapsible": boolean;
+        /**
+          * A test method to expand section.
+          * @testOnly
+         */
+        "expand": () => Promise<void>;
         /**
           * Indicates if the `q2-section` is in an expanded state or not.
          */
@@ -1926,6 +2099,10 @@ export namespace Components {
           * @deprecated
          */
         "popDirection": 'up' | 'down';
+        /**
+          * Force the maximum height of the popover. This value will be interpreted as pixels. If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.
+         */
+        "popoverMaxHeight": number;
         /**
           * Determines the display mode of the popover.  Providing a value of `legacy` instructs the popover to use absolute positioning instead of fixed positioning.
           * @info This is a temporary solution to work around styling issues related to using fixed positioning for the popover when nested inside of elements with transform properties. This will be removed once the popover API is available for use.
@@ -1969,6 +2146,11 @@ export namespace Components {
           * @info Will be managed automatically if not provided.
          */
         "lastEnabledStep": number;
+        /**
+          * Emulates clicking a step in the stepper and emitting the change event.  You may provide either the step number or the stepper pane id.  If the value is invalid or the step is locked, the method will do nothing.
+          * @testOnly
+         */
+        "selectStep": (value: number | string) => Promise<void>;
         /**
           * Used to determine the number of steps in the stepper.
           * @private
@@ -2021,6 +2203,11 @@ export namespace Components {
           * Controls visibility of tab list in a print view. Tab content will still be visible even if `noPrint` is true.
          */
         "noPrint": boolean;
+        /**
+          * A method to select a tab pane corresponding with the value.
+          * @testOnly
+         */
+        "selectTab": (value: string) => Promise<void>;
         /**
           * Determines the font size of the tab controls.
          */
@@ -2106,6 +2293,10 @@ export namespace Components {
           * Force the direction of the popover dropdown when it opens. If no value is passed, the component will auto-detect the direction based on available space.
          */
         "popoverDirection": 'up' | 'down';
+        /**
+          * Force the maximum height of the popover. This value will be interpreted as pixels. If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.
+         */
+        "popoverMaxHeight": number;
         /**
           * @deprecated
          */
@@ -2300,6 +2491,10 @@ export interface Q2LegendCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLQ2LegendElement;
 }
+export interface Q2LinkCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLQ2LinkElement;
+}
 export interface Q2MonthPickerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLQ2MonthPickerElement;
@@ -2332,6 +2527,10 @@ export interface Q2RadioGroupCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLQ2RadioGroupElement;
 }
+export interface Q2ResizeObserverCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLQ2ResizeObserverElement;
+}
 export interface Q2SectionCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLQ2SectionElement;
@@ -2390,6 +2589,12 @@ declare global {
         prototype: HTMLClickElsewhereElement;
         new (): HTMLClickElsewhereElement;
     };
+    interface HTMLQ2ActionGroupElement extends Components.Q2ActionGroup, HTMLStencilElement {
+    }
+    var HTMLQ2ActionGroupElement: {
+        prototype: HTMLQ2ActionGroupElement;
+        new (): HTMLQ2ActionGroupElement;
+    };
     interface HTMLQ2ActionSheetElementEventMap {
         "close": ActionSheetListCloseData;
         "ready": any;
@@ -2652,6 +2857,12 @@ declare global {
         prototype: HTMLQ2EditableFieldElement;
         new (): HTMLQ2EditableFieldElement;
     };
+    interface HTMLQ2FormattedTextElement extends Components.Q2FormattedText, HTMLStencilElement {
+    }
+    var HTMLQ2FormattedTextElement: {
+        prototype: HTMLQ2FormattedTextElement;
+        new (): HTMLQ2FormattedTextElement;
+    };
     interface HTMLQ2IconElement extends Components.Q2Icon, HTMLStencilElement {
     }
     var HTMLQ2IconElement: {
@@ -2704,6 +2915,23 @@ declare global {
         prototype: HTMLQ2LegendElement;
         new (): HTMLQ2LegendElement;
     };
+    interface HTMLQ2LinkElementEventMap {
+        "tctClick": { target: string; referrerpolicy: string; href: string };
+    }
+    interface HTMLQ2LinkElement extends Components.Q2Link, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLQ2LinkElementEventMap>(type: K, listener: (this: HTMLQ2LinkElement, ev: Q2LinkCustomEvent<HTMLQ2LinkElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLQ2LinkElementEventMap>(type: K, listener: (this: HTMLQ2LinkElement, ev: Q2LinkCustomEvent<HTMLQ2LinkElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLQ2LinkElement: {
+        prototype: HTMLQ2LinkElement;
+        new (): HTMLQ2LinkElement;
+    };
     interface HTMLQ2ListElement extends Components.Q2List, HTMLStencilElement {
     }
     var HTMLQ2ListElement: {
@@ -2885,6 +3113,23 @@ declare global {
         prototype: HTMLQ2RelativeTimeElement;
         new (): HTMLQ2RelativeTimeElement;
     };
+    interface HTMLQ2ResizeObserverElementEventMap {
+        "tctResize": { entries: ResizeObserverEntry[] };
+    }
+    interface HTMLQ2ResizeObserverElement extends Components.Q2ResizeObserver, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLQ2ResizeObserverElementEventMap>(type: K, listener: (this: HTMLQ2ResizeObserverElement, ev: Q2ResizeObserverCustomEvent<HTMLQ2ResizeObserverElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLQ2ResizeObserverElementEventMap>(type: K, listener: (this: HTMLQ2ResizeObserverElement, ev: Q2ResizeObserverCustomEvent<HTMLQ2ResizeObserverElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLQ2ResizeObserverElement: {
+        prototype: HTMLQ2ResizeObserverElement;
+        new (): HTMLQ2ResizeObserverElement;
+    };
     interface HTMLQ2SectionElementEventMap {
         "change": { expanded: boolean };
     }
@@ -3072,6 +3317,7 @@ declare global {
     };
     interface HTMLElementTagNameMap {
         "click-elsewhere": HTMLClickElsewhereElement;
+        "q2-action-group": HTMLQ2ActionGroupElement;
         "q2-action-sheet": HTMLQ2ActionSheetElement;
         "q2-avatar": HTMLQ2AvatarElement;
         "q2-badge": HTMLQ2BadgeElement;
@@ -3091,10 +3337,12 @@ declare global {
         "q2-dropdown": HTMLQ2DropdownElement;
         "q2-dropdown-item": HTMLQ2DropdownItemElement;
         "q2-editable-field": HTMLQ2EditableFieldElement;
+        "q2-formatted-text": HTMLQ2FormattedTextElement;
         "q2-icon": HTMLQ2IconElement;
         "q2-input": HTMLQ2InputElement;
         "q2-item": HTMLQ2ItemElement;
         "q2-legend": HTMLQ2LegendElement;
+        "q2-link": HTMLQ2LinkElement;
         "q2-list": HTMLQ2ListElement;
         "q2-loading": HTMLQ2LoadingElement;
         "q2-loading-element": HTMLQ2LoadingElementElement;
@@ -3110,6 +3358,7 @@ declare global {
         "q2-radio": HTMLQ2RadioElement;
         "q2-radio-group": HTMLQ2RadioGroupElement;
         "q2-relative-time": HTMLQ2RelativeTimeElement;
+        "q2-resize-observer": HTMLQ2ResizeObserverElement;
         "q2-section": HTMLQ2SectionElement;
         "q2-select": HTMLQ2SelectElement;
         "q2-stepper": HTMLQ2StepperElement;
@@ -3130,6 +3379,23 @@ declare namespace LocalJSX {
          */
         "onChange"?: (event: ClickElsewhereCustomEvent<any>) => void;
     }
+    interface Q2ActionGroup {
+        /**
+          * Whether the buttons should take up the full width of the container when in horizontal orientation.
+          * @warning This will prevent the buttons from wrapping when the container is too small to fit all buttons.
+         */
+        "fullWidth"?: boolean;
+        /**
+          * The orientation of the buttons, which will override the auto orientation.
+          * @info This will override and disable the auto determination of the orientation.
+         */
+        "orientation"?: 'auto' | 'vertical' | 'horizontal';
+        /**
+          * The width, in pixels, that determines whether to display the buttons in vertical or horizontal orientation
+          * @info The component determines this based on the width of the element itself, not the browser window.
+         */
+        "orientationThreshold"?: number;
+    }
     interface Q2ActionSheet {
         "data"?: ActionSheetData;
         "hideClose"?: boolean;
@@ -3595,7 +3861,7 @@ declare namespace LocalJSX {
          */
         "gridLines"?: 'horizontal' | 'vertical' | 'off';
         /**
-          * Sets chart padding around the grid. Each value in the object will be interpreted as pixels.  **Examples:**
+          * Sets chart padding around the grid. Each value in the object will be interpreted as pixels.  **Example:**
           * @snippet chart.gridPadding = { left: 10, right: 10, top: 20, bottom: 20 };
          */
         "gridPadding"?: { left?: number; right?: number; top?: number; bottom?: number };
@@ -3689,7 +3955,7 @@ declare namespace LocalJSX {
          */
         "formatModifier"?: string;
         /**
-          * Sets chart padding around the grid. Each value in the object will be interpreted as pixels.  **Examples:**
+          * Sets chart padding around the grid. Each value in the object will be interpreted as pixels.  **Example:**
           * @snippet chart.gridPadding = { left: 10, right: 10, top: 20, bottom: 20 };
          */
         "gridPadding"?: { left?: number; right?: number; top?: number; bottom?: number };
@@ -3948,7 +4214,7 @@ declare namespace LocalJSX {
          */
         "emptyMessage"?: string;
         /**
-          * Defines the headers of the table.
+          * Defines the headers of the table.  **Example:**
           * @snippet element.headers = [  {    title: 'Day of the Week',    key: 'day',  },  {    title: 'Sales',    key: 'sales',    align: 'end',  } ]
          */
         "headers"?: Q2DataTableHeader[];
@@ -3990,7 +4256,7 @@ declare namespace LocalJSX {
          */
         "onToggle"?: (event: Q2DataTableCustomEvent<{ row: Q2DataTableSerializedRow }>) => void;
         /**
-          * Defines the rows of the table.
+          * Defines the rows of the table.  **Example:**
           * @snippet element.rows = [  {    id: 1,    cells: {      day: 'Monday',      sales: 93    }  },  {    id: 2,    cells: {      day: 'Tuesday',      sales: 127    }  },  {    id: 3,    cells: {      day: 'Wednesday',      sales: 121    } ]
          */
         "rows"?: Q2DataTableRow[];
@@ -4100,6 +4366,10 @@ declare namespace LocalJSX {
           * Force the direction of the popover dropdown when it opens. If no value is passed, the component will auto-detect the direction based on available space.
          */
         "popoverDirection"?: 'up' | 'down';
+        /**
+          * Force the maximum height of the popover. This value will be interpreted as pixels. If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.
+         */
+        "popoverMaxHeight"?: number;
         /**
           * @deprecated
          */
@@ -4116,6 +4386,7 @@ declare namespace LocalJSX {
         "resolvedType"?: string;
         /**
           * The type of button used as the menu toggle.
+          * @info Type must be "custom" to use the custom button slot.
          */
         "type"?: 'icon' | 'fab' | 'custom' | 'primary' | 'secondary' | 'neutral';
     }
@@ -4221,6 +4492,40 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    interface Q2FormattedText {
+        /**
+          * Formats to the language provided. Accepts multiple locales in an array as sequential fallbacks.
+         */
+        "locale"?: string | string[];
+        /**
+          * The maximum number of fraction digits to use.
+         */
+        "maximumFractionDigits"?: number;
+        /**
+          * The minimum number of fraction digits to use.
+         */
+        "minimumFractionDigits"?: number;
+        /**
+          * The minimum number of integer digits to use.
+         */
+        "minimumIntegerDigits"?: number;
+        /**
+          * Determine how the positive or negative sign should display.  Behavior: - `always`: Always display the sign. - `auto`: Sign displays for negative numbers only, including negative zero. - `exceptZero`: Sign displays for positive and negative numbers, but not zero. - `never`: Never display the sign.
+         */
+        "signDisplay"?: 'never' | 'auto' | 'always' | 'exceptZero';
+        /**
+          * Applies styling based on the size provided. If no size is provided, it will display as inline text.
+         */
+        "size"?: 'small' | 'medium' | 'large' | undefined;
+        /**
+          * @private Inherited from q2-detail when slotted to match styling of q2-detail and q2-formatted-text texts.
+         */
+        "slotSize"?: string;
+        /**
+          * The value you want formatted.
+         */
+        "value"?: number;
+    }
     interface Q2Icon {
         /**
           * Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text.
@@ -4372,8 +4677,8 @@ declare namespace LocalJSX {
          */
         "optional"?: boolean;
         /**
-          * The pattern string of the input field, regular expression string is expected. This allows us to check the validity user's input. For instance, &lt;q2-input label="My input" pattern="[a-zA-Z0-9]{3,5}" id="myInput"&gt;  - Allows only 3~5 alphanumeric letters  In Javascript, you can check the validity object in your q2-input Type "abcdefgh", then access the validity object
-          * @snippet const myInput = document.querySelector('#myInput'); console.log(myInput.validity);
+          * Applies the value as a RegEx pattern to assess the validity of the input field's value. Check the ValidityState's `patternMismatch` property for the result.  **Example:**
+          * @snippet <q2-input label="My input" pattern="[a-zA-Z0-9]{3,5}" id="myInput"></q2-input> // enter "abcdefgh" in the input field (too many characters) const myInput = document.querySelector('#myInput'); console.log(myInput.validity.patternMismatch); // true
          */
         "pattern"?: string;
         /**
@@ -4417,6 +4722,9 @@ declare namespace LocalJSX {
           * Specifies the field's expeted [input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types), and provides the optimal keyboard on mobile devices.
          */
         "type"?: InputType;
+        /**
+          * Returns a read-only `ValidityState` object representing the validity states of the element. [See MDN for more information on ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState).
+         */
         "validity"?: ValidityState;
         /**
           * The value of the input field.
@@ -4451,6 +4759,41 @@ declare namespace LocalJSX {
          */
         "selectedItemId"?: string;
     }
+    interface Q2Link {
+        /**
+          * The disabled.
+         */
+        "disabled"?: boolean;
+        /**
+          * The link when clicked.
+         */
+        "href"?: string;
+        /**
+          * The label to display.
+         */
+        "label"?: string;
+        /**
+          * Emitted when the link is clicked.
+          * @legacyEvent
+         */
+        "onTctClick"?: (event: Q2LinkCustomEvent<{ target: string; referrerpolicy: string; href: string }>) => void;
+        /**
+          * The [referrerpolicy](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy)
+         */
+        "referrerpolicy"?: ReferrerPolicy;
+        /**
+          * The target.
+         */
+        "target"?: string;
+        /**
+          * The title attribute on a tag in shadowRoot.
+         */
+        "tctTitle"?: string;
+        /**
+          * The value link to display.
+         */
+        "variant"?: string;
+    }
     interface Q2List {
         /**
           * Adds a border between each items
@@ -4660,7 +5003,7 @@ declare namespace LocalJSX {
          */
         "pages"?: number;
         /**
-          * Indicates to only display the current and total pages.
+          * Indicates to display only the current and total pages.
          */
         "pagesOnly"?: boolean;
         /**
@@ -4668,7 +5011,8 @@ declare namespace LocalJSX {
          */
         "perPage"?: number;
         /**
-          * The list of perPage to operate pagination. e.g.) [10, 25, 50]
+          * A list of perPage values. This generates a [Select](https://tecton.q2developer.com/design-system/q2-select/) element that allows the user to modify the `perPage` value.  **Example:**
+          * @snippet this.perPageIncrements = [10, 25, 50];
          */
         "perPageIncrements"?: number[];
         /**
@@ -4676,7 +5020,7 @@ declare namespace LocalJSX {
          */
         "recordType"?: string;
         /**
-          * Indicates to only display the current and total records.
+          * Indicates to display only the current and total records.
          */
         "recordsOnly"?: boolean;
         /**
@@ -4737,6 +5081,10 @@ declare namespace LocalJSX {
           * Force the direction of the popover dropdown when it opens. If no value is passed, the component will auto-detect the direction based on available space.
          */
         "popoverDirection"?: 'up' | 'down';
+        /**
+          * Force the maximum height of the popover. This value will be interpreted as pixels. If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.
+         */
+        "popoverMaxHeight"?: number;
         /**
           * @deprecated
          */
@@ -4771,6 +5119,10 @@ declare namespace LocalJSX {
           * Force the direction of the popover when it opens. If no value is passed, the component will auto-detect the direction based on available space.
          */
         "direction"?: 'up' | 'down';
+        /**
+          * Force the maximum height of the popover. This value will be interpreted as pixels. If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.
+         */
+        "maxHeight"?: number;
         /**
           * @deprecated
          */
@@ -4933,6 +5285,16 @@ declare namespace LocalJSX {
          */
         "unit"?: 'second' | 'minute' | 'hour' | 'day' | 'month' | 'quarter' | 'year';
     }
+    interface Q2ResizeObserver {
+        /**
+          * Determines wheter or not events will be emitted from the component.
+         */
+        "disabled"?: boolean;
+        /**
+          * Emitted when any of the observed elements are resized.
+         */
+        "onTctResize"?: (event: Q2ResizeObserverCustomEvent<{ entries: ResizeObserverEntry[] }>) => void;
+    }
     interface Q2Section {
         /**
           * Determines if the section is collapsible.
@@ -5033,6 +5395,10 @@ declare namespace LocalJSX {
           * @deprecated
          */
         "popDirection"?: 'up' | 'down';
+        /**
+          * Force the maximum height of the popover. This value will be interpreted as pixels. If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.
+         */
+        "popoverMaxHeight"?: number;
         /**
           * Determines the display mode of the popover.  Providing a value of `legacy` instructs the popover to use absolute positioning instead of fixed positioning.
           * @info This is a temporary solution to work around styling issues related to using fixed positioning for the popover when nested inside of elements with transform properties. This will be removed once the popover API is available for use.
@@ -5246,6 +5612,10 @@ declare namespace LocalJSX {
           * Force the direction of the popover dropdown when it opens. If no value is passed, the component will auto-detect the direction based on available space.
          */
         "popoverDirection"?: 'up' | 'down';
+        /**
+          * Force the maximum height of the popover. This value will be interpreted as pixels. If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.
+         */
+        "popoverMaxHeight"?: number;
         /**
           * @deprecated
          */
@@ -5394,6 +5764,7 @@ declare namespace LocalJSX {
     }
     interface IntrinsicElements {
         "click-elsewhere": ClickElsewhere;
+        "q2-action-group": Q2ActionGroup;
         "q2-action-sheet": Q2ActionSheet;
         "q2-avatar": Q2Avatar;
         "q2-badge": Q2Badge;
@@ -5413,10 +5784,12 @@ declare namespace LocalJSX {
         "q2-dropdown": Q2Dropdown;
         "q2-dropdown-item": Q2DropdownItem;
         "q2-editable-field": Q2EditableField;
+        "q2-formatted-text": Q2FormattedText;
         "q2-icon": Q2Icon;
         "q2-input": Q2Input;
         "q2-item": Q2Item;
         "q2-legend": Q2Legend;
+        "q2-link": Q2Link;
         "q2-list": Q2List;
         "q2-loading": Q2Loading;
         "q2-loading-element": Q2LoadingElement;
@@ -5432,6 +5805,7 @@ declare namespace LocalJSX {
         "q2-radio": Q2Radio;
         "q2-radio-group": Q2RadioGroup;
         "q2-relative-time": Q2RelativeTime;
+        "q2-resize-observer": Q2ResizeObserver;
         "q2-section": Q2Section;
         "q2-select": Q2Select;
         "q2-stepper": Q2Stepper;
@@ -5450,6 +5824,7 @@ declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
             "click-elsewhere": LocalJSX.ClickElsewhere & JSXBase.HTMLAttributes<HTMLClickElsewhereElement>;
+            "q2-action-group": LocalJSX.Q2ActionGroup & JSXBase.HTMLAttributes<HTMLQ2ActionGroupElement>;
             "q2-action-sheet": LocalJSX.Q2ActionSheet & JSXBase.HTMLAttributes<HTMLQ2ActionSheetElement>;
             "q2-avatar": LocalJSX.Q2Avatar & JSXBase.HTMLAttributes<HTMLQ2AvatarElement>;
             "q2-badge": LocalJSX.Q2Badge & JSXBase.HTMLAttributes<HTMLQ2BadgeElement>;
@@ -5469,10 +5844,12 @@ declare module "@stencil/core" {
             "q2-dropdown": LocalJSX.Q2Dropdown & JSXBase.HTMLAttributes<HTMLQ2DropdownElement>;
             "q2-dropdown-item": LocalJSX.Q2DropdownItem & JSXBase.HTMLAttributes<HTMLQ2DropdownItemElement>;
             "q2-editable-field": LocalJSX.Q2EditableField & JSXBase.HTMLAttributes<HTMLQ2EditableFieldElement>;
+            "q2-formatted-text": LocalJSX.Q2FormattedText & JSXBase.HTMLAttributes<HTMLQ2FormattedTextElement>;
             "q2-icon": LocalJSX.Q2Icon & JSXBase.HTMLAttributes<HTMLQ2IconElement>;
             "q2-input": LocalJSX.Q2Input & JSXBase.HTMLAttributes<HTMLQ2InputElement>;
             "q2-item": LocalJSX.Q2Item & JSXBase.HTMLAttributes<HTMLQ2ItemElement>;
             "q2-legend": LocalJSX.Q2Legend & JSXBase.HTMLAttributes<HTMLQ2LegendElement>;
+            "q2-link": LocalJSX.Q2Link & JSXBase.HTMLAttributes<HTMLQ2LinkElement>;
             "q2-list": LocalJSX.Q2List & JSXBase.HTMLAttributes<HTMLQ2ListElement>;
             "q2-loading": LocalJSX.Q2Loading & JSXBase.HTMLAttributes<HTMLQ2LoadingElement>;
             "q2-loading-element": LocalJSX.Q2LoadingElement & JSXBase.HTMLAttributes<HTMLQ2LoadingElementElement>;
@@ -5488,6 +5865,7 @@ declare module "@stencil/core" {
             "q2-radio": LocalJSX.Q2Radio & JSXBase.HTMLAttributes<HTMLQ2RadioElement>;
             "q2-radio-group": LocalJSX.Q2RadioGroup & JSXBase.HTMLAttributes<HTMLQ2RadioGroupElement>;
             "q2-relative-time": LocalJSX.Q2RelativeTime & JSXBase.HTMLAttributes<HTMLQ2RelativeTimeElement>;
+            "q2-resize-observer": LocalJSX.Q2ResizeObserver & JSXBase.HTMLAttributes<HTMLQ2ResizeObserverElement>;
             "q2-section": LocalJSX.Q2Section & JSXBase.HTMLAttributes<HTMLQ2SectionElement>;
             "q2-select": LocalJSX.Q2Select & JSXBase.HTMLAttributes<HTMLQ2SelectElement>;
             "q2-stepper": LocalJSX.Q2Stepper & JSXBase.HTMLAttributes<HTMLQ2StepperElement>;