q2-tecton-elements 1.63.1 → 1.64.0

package/dist/types/components/q2-avatar/q2-avatar.d.ts

@@ -15,6 +15,8 @@ export declare class Q2Avatar implements ComponentInterface {
      * We recommend always providing a name when you want the avatar to be presented to screen readers.
      */
     name: string;
+    /**  Determines how large to make the avatar */
+    size: 'small' | 'medium' | 'large';
     /**  Displays the image provided by the user. */
     src: string;
     srcDidUpdate(): void;

package/dist/types/components/q2-card/q2-card.d.ts

@@ -119,8 +119,8 @@ export declare class Q2Card implements ComponentInterface {
     url: string;
     /** Emitted when the card is clicked and the `url` property is not provided. */
     click: EventEmitter<undefined>;
-    componentDidLoad(): void;
     disconnectedCallback(): void;
+    componentDidLoad(): void;
     onHostElementFocus(event: any): void;
     generateAvatar(): any;
     generateContainerClasses(): string;

package/dist/types/components/q2-chart-area/q2-chart-area.d.ts

@@ -1,6 +1,6 @@
 import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 import * as echarts from 'echarts/core';
-import { IChartData } from 'q2-tecton-common/lib/types/element-types';
+import type { IChartData } from 'q2-tecton-common/lib/types/element-types';
 export declare class Q2ChartArea implements ComponentInterface {
     chart: echarts.ECharts;
     chartContainer: HTMLDivElement;

package/dist/types/components/q2-chart-bar/q2-chart-bar.d.ts

@@ -1,6 +1,6 @@
 import { ComponentInterface } from '../../stencil-public-runtime';
 import * as echarts from 'echarts/core';
-import { IChartData } from 'q2-tecton-common/lib/types/element-types';
+import type { IChartData } from 'q2-tecton-common/lib/types/element-types';
 export declare class Q2ChartBar implements ComponentInterface {
     chart: echarts.ECharts;
     chartContainer: HTMLDivElement;

package/dist/types/components/q2-chart-donut/q2-chart-donut.d.ts

@@ -1,6 +1,6 @@
 import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 import * as echarts from 'echarts/core';
-import { IDonutChartData } from 'q2-tecton-common/lib/types/element-types';
+import type { IDonutChartData } from 'q2-tecton-common/lib/types/element-types';
 export declare class Q2ChartDonut implements ComponentInterface {
     btnElement: HTMLDivElement;
     centerButtonElement: HTMLButtonElement;

package/dist/types/components/q2-data-table/q2-data-table.d.ts

@@ -135,6 +135,12 @@ export declare class Q2DataTable implements ComponentInterface {
     rows: Q2DataTableRow[];
     /** Adds a checkbox to each row of the table making it selectable. */
     selectable: boolean;
+    /**
+     * Returns selected rows.
+     * @readonly
+     */
+    get selectedRows(): Q2DataTableRow[];
+    set selectedRows(_: Q2DataTableRow[]);
     /**
      * Determines if the selectable checkboxes allow for multi-select or not. If set to "single", once a row is selected, all other rows will be disabled.
      * See the documentation on the `select` event for how to handle selections.
@@ -145,6 +151,8 @@ export declare class Q2DataTable implements ComponentInterface {
     selectMode: 'multiple' | 'single';
     /** Adds a shadow to the table */
     shadowed: boolean;
+    /** Makes table header sticky */
+    sticky: boolean;
     /** Enables alternating background colors for the table rows */
     striped: boolean;
     /**
@@ -248,10 +256,8 @@ export declare class Q2DataTable implements ComponentInterface {
     selectableHandler(): void;
     get mappedHeaders(): Record<string, Q2DataTableHeader>;
     get numberOfColumns(): number;
-    get selectedRow(): Q2DataTableSerializedRow;
-    get selectedRows(): Q2DataTableSerializedRow[];
-    getSelectRowLabel(row: Q2DataTableSerializedRow): string;
     checkSlots: () => void;
+    getSelectRowLabel(row: Q2DataTableSerializedRow): string;
     onClickRow: (event: MouseEvent, row: Q2DataTableSerializedRow) => void;
     onClickTableRow: (event: MouseEvent, row: Q2DataTableSerializedRow) => void;
     onControlContainerClick: (event: MouseEvent) => void;

package/dist/types/components/q2-file-picker/q2-file-picker.d.ts

@@ -25,6 +25,7 @@ export type FilesObject = {
  * @slot description - An optional slot to display a custom description.
  */
 export declare class Q2FilePicker implements ComponentInterface {
+    private _value;
     browseButtonInput: HTMLElement;
     dropZone: HTMLElement;
     fileItemsToBeDeleted: any;
@@ -94,7 +95,8 @@ export declare class Q2FilePicker implements ComponentInterface {
      *   `"over-max-files-limit"` (total exceeds the max files limit).
      * @readonly
      */
-    value: FilesObject;
+    get value(): FilesObject;
+    set value(_: FilesObject);
     /**
      * Determines if the file picker is a browse button or a drop zone with a
      * browse link.

package/dist/types/components/q2-formatted-text/q2-formatted-text.d.ts

@@ -2,6 +2,12 @@ import { ComponentInterface } from '../../stencil-public-runtime';
 export declare class Q2FormattedText implements ComponentInterface {
     /** @private The formatted text to display */
     formattedValue: string;
+    /**
+     * The format style for the number.
+     * - `decimal`: Standard number formatting, locale-aware (default).
+     * - `percent`: Percentage formatting, locale-aware.
+     */
+    format: 'decimal' | 'percent';
     /** 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.  */
@@ -26,12 +32,6 @@ export declare class Q2FormattedText implements ComponentInterface {
     slotSize: string;
     /** The value you want formatted.  */
     value: number;
-    /**
-     * The format style for the number.
-     * - `decimal`: Standard number formatting, locale-aware (default).
-     * - `percent`: Percentage formatting, locale-aware.
-     */
-    format: 'decimal' | 'percent';
     componentWillLoad(): void | Promise<void>;
     propsUpdated(): void;
     get formattedTextClasses(): string;

package/dist/types/components/q2-icon/q2-icon-types.d.ts

@@ -1,6 +1,5 @@
-import { IDict } from '../../util';
 import { JSX } from '../../components';
 export interface Q2Icon {
     markup: () => JSX.IntrinsicElements;
 }
-export type Q2Icons = IDict<Q2Icon>;
+export type Q2Icons = Record<string, Q2Icon>;

package/dist/types/components/q2-input/q2-input.d.ts

@@ -287,8 +287,8 @@ export declare class Q2Input {
      * @testOnly
      */
     setValue(value: string): void;
-    ariaLabelObserver(): void;
     updateComboboxAriaLabel(): void;
+    ariaLabelObserver(): void;
     manageClearableResizeObserver(clearable?: boolean): void;
     errorsObserver(): void;
     formatModifierObserver(): void;

package/dist/types/components/q2-legend/q2-legend.d.ts

@@ -1,5 +1,5 @@
 import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
-import { IDonutChartData } from 'q2-tecton-common/lib/types/element-types';
+import type { IDonutChartData } from 'q2-tecton-common/lib/types/element-types';
 export declare class Q2Legend implements ComponentInterface {
     hoveredItemIndex: number;
     selectedItemIndex: number;

package/dist/types/components/q2-modal/q2-modal.d.ts

@@ -1,5 +1,5 @@
 import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
-import { ModalOption, ModalResponse } from 'q2-tecton-common/lib/utility/modal';
+import type { ModalOption, ModalResponse } from 'q2-tecton-common/lib/types/modal';
 /**
  * @slot content - A slot to display custom content in the modal body above the description.
  * @slot action - A slot to display up to four elements compatible with [Action Group](https://tecton.q2developer.com/design-system/q2-action-group) in the modal's footer.

package/dist/types/components/q2-mutation-observer/q2-mutation-observer.d.ts

@@ -0,0 +1,40 @@
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+export declare class Q2MutationObserver implements ComponentInterface {
+    currentMutationObserverEntries: MutationRecord[];
+    mutationObserver?: MutationObserver;
+    observedElements: HTMLElement[];
+    hostElement: HTMLElement;
+    /**
+     * Determines whether or not events will be emitted from the component.
+     */
+    disabled: boolean;
+    /**
+     * Determines whether or not to monitor children's attributes.
+     */
+    observeAttributes: boolean;
+    /**
+     * Determines whether or not to monitor children's child list.
+     */
+    observeChildList: boolean;
+    /**
+     * Determines whether or not to monitor children's sub tree.
+     */
+    observeSubTree: boolean;
+    /**
+     * Emitted when any of the observed elements are mutated.
+     */
+    tctMutate: EventEmitter<{
+        entries: MutationRecord[];
+    }>;
+    disconnectedCallback(): void;
+    componentDidLoad(): void;
+    /**
+     * Returns the latest entries reported by the component.
+     */
+    getCurrentMutationEntries(): Promise<MutationRecord[]>;
+    disabledUpdated(newVal: boolean): void;
+    handleSlotChange: () => void;
+    startObserver(): void;
+    stopObserver(): void;
+    render(): any;
+}

package/dist/types/components/q2-pagination/q2-pagination.d.ts

@@ -15,6 +15,8 @@ export declare class Q2Pagination implements ComponentInterface {
     alignment: 'left' | 'center' | 'right';
     /** Determines whether the component uses dynamic resizing behavior. This is disabled when `pagesOnly`, `recordsOnly`, or `stacked` is true. */
     autoSize: boolean;
+    /** Allows the component to be disabled should the state of the page require this  */
+    disabled: boolean;
     /** The current page that is being displayed. */
     page: number;
     /**

package/dist/types/components/q2-section-container/q2-section-container.d.ts

@@ -0,0 +1,34 @@
+import { ComponentInterface } from '../../stencil-public-runtime';
+export declare class Q2SectonContainer implements ComponentInterface {
+    hostElement: HTMLElement;
+    /**
+     * Determines if a single or multiple sections can be open at a time.
+     */
+    openMode: 'multiple' | 'single';
+    /**
+     * Determines which section starts open.
+     */
+    openPaneIndex: number;
+    /**
+     * Determines if all sections inside the section-container start opened or closed.
+     *
+     * @info
+     * If you have openMode set to multiple, all panes will start open.
+     */
+    startAllOpen: boolean;
+    /**
+     * Determines if the section-container starts opened or closed.
+     *
+     * @info
+     * If you have openMode set to single, the pane specified in openPaneIndex will start open, or the first pane if unspecified.
+     * If you have openMode set to multiple, you can also select startAllOpen to open all panes.
+     * @warning
+     * OpenMode = multiple and StartAllOpen=true does not work correctly inside of a q2-tab that starts closed.
+     */
+    startOpen: boolean;
+    componentWillLoad(): void;
+    handleOpenStateChange(): void;
+    filterSlottedElements: () => void;
+    fixSlottedElements: () => void;
+    render: () => any;
+}

package/dist/types/components/q2-textarea/q2-textarea.d.ts

@@ -1,5 +1,4 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { IDict } from "../../util";
 /** @slot label - An optional slot to display a custom label. */
 export declare class Q2Textarea {
     contentContainer?: HTMLDivElement;
@@ -10,7 +9,7 @@ export declare class Q2Textarea {
     textareaField?: HTMLTextAreaElement;
     valueOnFocus: string;
     hostElement: HTMLElement;
-    downParams: IDict<number>;
+    downParams: Record<string, number>;
     hasFocus: boolean;
     screenReaderCharacterCount: number;
     /**

package/dist/types/components.d.ts

@@ -5,7 +5,7 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { ActionSheetData, ActionSheetListCloseData } from "q2-tecton-common/lib/utility/action-sheet";
+import { ActionSheetData, ActionSheetListCloseData } from "q2-tecton-common/lib/types/action-sheet";
 import { IChartData, IDonutChartData } from "q2-tecton-common/lib/types/element-types";
 import { Q2DataTableHeader, Q2DataTableRow, Q2DataTableSerializedRow } from "./components/q2-data-table/q2-data-table";
 import { Q2Input } from "./components/q2-input/q2-input";
@@ -16,11 +16,11 @@ import { Q2Badge } from "./components/q2-badge/q2-badge";
 import { Q2Icon } from "./components/q2-icon/q2-icon";
 import { InputType } from "./components/q2-input/q2-input";
 import { IEventDetail, IFormatterValueObject } from "./components/q2-input/q2-input-types";
-import { ModalOption, ModalResponse } from "q2-tecton-common/lib/utility/modal";
+import { ModalOption, ModalResponse } from "q2-tecton-common/lib/types/modal";
 import { IOptionValue, ValidOptionElements } from "./components/q2-option-list/q2-option-list";
 import { IOptionValue as IOptionValue1 } from "./components/q2-option-list/q2-option-list";
 import { IStepperPaneEvent } from "./components/q2-stepper-pane/q2-stepper-pane";
-export { ActionSheetData, ActionSheetListCloseData } from "q2-tecton-common/lib/utility/action-sheet";
+export { ActionSheetData, ActionSheetListCloseData } from "q2-tecton-common/lib/types/action-sheet";
 export { IChartData, IDonutChartData } from "q2-tecton-common/lib/types/element-types";
 export { Q2DataTableHeader, Q2DataTableRow, Q2DataTableSerializedRow } from "./components/q2-data-table/q2-data-table";
 export { Q2Input } from "./components/q2-input/q2-input";
@@ -31,7 +31,7 @@ export { Q2Badge } from "./components/q2-badge/q2-badge";
 export { Q2Icon } from "./components/q2-icon/q2-icon";
 export { InputType } from "./components/q2-input/q2-input";
 export { IEventDetail, IFormatterValueObject } from "./components/q2-input/q2-input-types";
-export { ModalOption, ModalResponse } from "q2-tecton-common/lib/utility/modal";
+export { ModalOption, ModalResponse } from "q2-tecton-common/lib/types/modal";
 export { IOptionValue, ValidOptionElements } from "./components/q2-option-list/q2-option-list";
 export { IOptionValue as IOptionValue1 } from "./components/q2-option-list/q2-option-list";
 export { IStepperPaneEvent } from "./components/q2-stepper-pane/q2-stepper-pane";
@@ -80,6 +80,11 @@ export namespace Components {
           * @info We recommend always providing a name when you want the avatar to be presented to screen readers.
          */
         "name": string;
+        /**
+          * Determines how large to make the avatar
+          * @default 'medium'
+         */
+        "size": 'small' | 'medium' | 'large';
         /**
           * Displays the image provided by the user.
          */
@@ -999,6 +1004,11 @@ export namespace Components {
           * Adds a checkbox to each row of the table making it selectable.
          */
         "selectable": boolean;
+        /**
+          * Returns selected rows.
+          * @readonly
+         */
+        "selectedRows": Q2DataTableRow[];
         /**
           * Adds a shadow to the table
          */
@@ -1008,6 +1018,10 @@ export namespace Components {
           * @testOnly
          */
         "sortColumn": (header: Q2DataTableHeader) => Promise<void>;
+        /**
+          * Makes table header sticky
+         */
+        "sticky": boolean;
         /**
           * Enables alternating background colors for the table rows
          */
@@ -2194,6 +2208,31 @@ export namespace Components {
          */
         "year": number;
     }
+    interface Q2MutationObserver {
+        /**
+          * Determines whether or not events will be emitted from the component.
+         */
+        "disabled": boolean;
+        /**
+          * Returns the latest entries reported by the component.
+         */
+        "getCurrentMutationEntries": () => Promise<MutationRecord[]>;
+        /**
+          * Determines whether or not to monitor children's attributes.
+          * @default false
+         */
+        "observeAttributes": boolean;
+        /**
+          * Determines whether or not to monitor children's child list.
+          * @default false
+         */
+        "observeChildList": boolean;
+        /**
+          * Determines whether or not to monitor children's sub tree.
+          * @default false
+         */
+        "observeSubTree": boolean;
+    }
     interface Q2Optgroup {
         /**
           * Determines whether all nested options are disabled.
@@ -2330,6 +2369,11 @@ export namespace Components {
           * @testOnly
          */
         "clickPreviousPage": () => Promise<void>;
+        /**
+          * Allows the component to be disabled should the state of the page require this
+          * @default false
+         */
+        "disabled": boolean;
         /**
           * The current page that is being displayed.
          */
@@ -2736,6 +2780,31 @@ export namespace Components {
          */
         "noCollapseIcon": boolean;
     }
+    interface Q2SectionContainer {
+        /**
+          * Determines if a single or multiple sections can be open at a time.
+          * @default 'single'
+         */
+        "openMode": 'multiple' | 'single';
+        /**
+          * Determines which section starts open.
+          * @default 0
+         */
+        "openPaneIndex": number;
+        /**
+          * Determines if all sections inside the section-container start opened or closed.
+          * @info If you have openMode set to multiple, all panes will start open.
+          * @default false
+         */
+        "startAllOpen": boolean;
+        /**
+          * Determines if the section-container starts opened or closed.
+          * @info If you have openMode set to single, the pane specified in openPaneIndex will start open, or the first pane if unspecified. If you have openMode set to multiple, you can also select startAllOpen to open all panes.
+          * @warning OpenMode = multiple and StartAllOpen=true does not work correctly inside of a q2-tab that starts closed.
+          * @default true
+         */
+        "startOpen": boolean;
+    }
     interface Q2Select {
         /**
           * @deprecated
@@ -3265,6 +3334,10 @@ export interface Q2MonthPickerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLQ2MonthPickerElement;
 }
+export interface Q2MutationObserverCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLQ2MutationObserverElement;
+}
 export interface Q2OptionCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLQ2OptionElement;
@@ -3844,6 +3917,23 @@ declare global {
         prototype: HTMLQ2MonthPickerElement;
         new (): HTMLQ2MonthPickerElement;
     };
+    interface HTMLQ2MutationObserverElementEventMap {
+        "tctMutate": { entries: MutationRecord[] };
+    }
+    interface HTMLQ2MutationObserverElement extends Components.Q2MutationObserver, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLQ2MutationObserverElementEventMap>(type: K, listener: (this: HTMLQ2MutationObserverElement, ev: Q2MutationObserverCustomEvent<HTMLQ2MutationObserverElementEventMap[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 HTMLQ2MutationObserverElementEventMap>(type: K, listener: (this: HTMLQ2MutationObserverElement, ev: Q2MutationObserverCustomEvent<HTMLQ2MutationObserverElementEventMap[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 HTMLQ2MutationObserverElement: {
+        prototype: HTMLQ2MutationObserverElement;
+        new (): HTMLQ2MutationObserverElement;
+    };
     interface HTMLQ2OptgroupElement extends Components.Q2Optgroup, HTMLStencilElement {
     }
     var HTMLQ2OptgroupElement: {
@@ -4034,6 +4124,12 @@ declare global {
         prototype: HTMLQ2SectionElement;
         new (): HTMLQ2SectionElement;
     };
+    interface HTMLQ2SectionContainerElement extends Components.Q2SectionContainer, HTMLStencilElement {
+    }
+    var HTMLQ2SectionContainerElement: {
+        prototype: HTMLQ2SectionContainerElement;
+        new (): HTMLQ2SectionContainerElement;
+    };
     interface HTMLQ2SelectElementEventMap {
         "change": { value: string; selectedOptions: string[] };
         "input": { query: string };
@@ -4244,6 +4340,7 @@ declare global {
         "q2-meter": HTMLQ2MeterElement;
         "q2-modal": HTMLQ2ModalElement;
         "q2-month-picker": HTMLQ2MonthPickerElement;
+        "q2-mutation-observer": HTMLQ2MutationObserverElement;
         "q2-optgroup": HTMLQ2OptgroupElement;
         "q2-option": HTMLQ2OptionElement;
         "q2-option-list": HTMLQ2OptionListElement;
@@ -4255,6 +4352,7 @@ declare global {
         "q2-relative-time": HTMLQ2RelativeTimeElement;
         "q2-resize-observer": HTMLQ2ResizeObserverElement;
         "q2-section": HTMLQ2SectionElement;
+        "q2-section-container": HTMLQ2SectionContainerElement;
         "q2-select": HTMLQ2SelectElement;
         "q2-stepper": HTMLQ2StepperElement;
         "q2-stepper-pane": HTMLQ2StepperPaneElement;
@@ -4323,6 +4421,11 @@ declare namespace LocalJSX {
           * @info We recommend always providing a name when you want the avatar to be presented to screen readers.
          */
         "name"?: string;
+        /**
+          * Determines how large to make the avatar
+          * @default 'medium'
+         */
+        "size"?: 'small' | 'medium' | 'large';
         /**
           * Displays the image provided by the user.
          */
@@ -5234,10 +5337,19 @@ declare namespace LocalJSX {
           * Adds a checkbox to each row of the table making it selectable.
          */
         "selectable"?: boolean;
+        /**
+          * Returns selected rows.
+          * @readonly
+         */
+        "selectedRows"?: Q2DataTableRow[];
         /**
           * Adds a shadow to the table
          */
         "shadowed"?: boolean;
+        /**
+          * Makes table header sticky
+         */
+        "sticky"?: boolean;
         /**
           * Enables alternating background colors for the table rows
          */
@@ -6422,6 +6534,31 @@ declare namespace LocalJSX {
          */
         "year"?: number;
     }
+    interface Q2MutationObserver {
+        /**
+          * Determines whether or not events will be emitted from the component.
+         */
+        "disabled"?: boolean;
+        /**
+          * Determines whether or not to monitor children's attributes.
+          * @default false
+         */
+        "observeAttributes"?: boolean;
+        /**
+          * Determines whether or not to monitor children's child list.
+          * @default false
+         */
+        "observeChildList"?: boolean;
+        /**
+          * Determines whether or not to monitor children's sub tree.
+          * @default false
+         */
+        "observeSubTree"?: boolean;
+        /**
+          * Emitted when any of the observed elements are mutated.
+         */
+        "onTctMutate"?: (event: Q2MutationObserverCustomEvent<{ entries: MutationRecord[] }>) => void;
+    }
     interface Q2Optgroup {
         /**
           * Determines whether all nested options are disabled.
@@ -6556,6 +6693,11 @@ declare namespace LocalJSX {
           * @default true
          */
         "autoSize"?: boolean;
+        /**
+          * Allows the component to be disabled should the state of the page require this
+          * @default false
+         */
+        "disabled"?: boolean;
         /**
           * Emitted when the page is changed.
           * @legacyEvent
@@ -6936,6 +7078,31 @@ declare namespace LocalJSX {
          */
         "onChange"?: (event: Q2SectionCustomEvent<{ expanded: boolean }>) => void;
     }
+    interface Q2SectionContainer {
+        /**
+          * Determines if a single or multiple sections can be open at a time.
+          * @default 'single'
+         */
+        "openMode"?: 'multiple' | 'single';
+        /**
+          * Determines which section starts open.
+          * @default 0
+         */
+        "openPaneIndex"?: number;
+        /**
+          * Determines if all sections inside the section-container start opened or closed.
+          * @info If you have openMode set to multiple, all panes will start open.
+          * @default false
+         */
+        "startAllOpen"?: boolean;
+        /**
+          * Determines if the section-container starts opened or closed.
+          * @info If you have openMode set to single, the pane specified in openPaneIndex will start open, or the first pane if unspecified. If you have openMode set to multiple, you can also select startAllOpen to open all panes.
+          * @warning OpenMode = multiple and StartAllOpen=true does not work correctly inside of a q2-tab that starts closed.
+          * @default true
+         */
+        "startOpen"?: boolean;
+    }
     interface Q2Select {
         /**
           * @deprecated
@@ -7440,6 +7607,7 @@ declare namespace LocalJSX {
         "q2-meter": Q2Meter;
         "q2-modal": Q2Modal;
         "q2-month-picker": Q2MonthPicker;
+        "q2-mutation-observer": Q2MutationObserver;
         "q2-optgroup": Q2Optgroup;
         "q2-option": Q2Option;
         "q2-option-list": Q2OptionList;
@@ -7451,6 +7619,7 @@ declare namespace LocalJSX {
         "q2-relative-time": Q2RelativeTime;
         "q2-resize-observer": Q2ResizeObserver;
         "q2-section": Q2Section;
+        "q2-section-container": Q2SectionContainer;
         "q2-select": Q2Select;
         "q2-stepper": Q2Stepper;
         "q2-stepper-pane": Q2StepperPane;
@@ -7508,6 +7677,7 @@ declare module "@stencil/core" {
             "q2-meter": LocalJSX.Q2Meter & JSXBase.HTMLAttributes<HTMLQ2MeterElement>;
             "q2-modal": LocalJSX.Q2Modal & JSXBase.HTMLAttributes<HTMLQ2ModalElement>;
             "q2-month-picker": LocalJSX.Q2MonthPicker & JSXBase.HTMLAttributes<HTMLQ2MonthPickerElement>;
+            "q2-mutation-observer": LocalJSX.Q2MutationObserver & JSXBase.HTMLAttributes<HTMLQ2MutationObserverElement>;
             "q2-optgroup": LocalJSX.Q2Optgroup & JSXBase.HTMLAttributes<HTMLQ2OptgroupElement>;
             "q2-option": LocalJSX.Q2Option & JSXBase.HTMLAttributes<HTMLQ2OptionElement>;
             "q2-option-list": LocalJSX.Q2OptionList & JSXBase.HTMLAttributes<HTMLQ2OptionListElement>;
@@ -7541,6 +7711,7 @@ declare module "@stencil/core" {
             "q2-relative-time": LocalJSX.Q2RelativeTime & JSXBase.HTMLAttributes<HTMLQ2RelativeTimeElement>;
             "q2-resize-observer": LocalJSX.Q2ResizeObserver & JSXBase.HTMLAttributes<HTMLQ2ResizeObserverElement>;
             "q2-section": LocalJSX.Q2Section & JSXBase.HTMLAttributes<HTMLQ2SectionElement>;
+            "q2-section-container": LocalJSX.Q2SectionContainer & JSXBase.HTMLAttributes<HTMLQ2SectionContainerElement>;
             "q2-select": LocalJSX.Q2Select & JSXBase.HTMLAttributes<HTMLQ2SelectElement>;
             "q2-stepper": LocalJSX.Q2Stepper & JSXBase.HTMLAttributes<HTMLQ2StepperElement>;
             "q2-stepper-pane": LocalJSX.Q2StepperPane & JSXBase.HTMLAttributes<HTMLQ2StepperPaneElement>;

package/dist/types/global.d.ts

@@ -1,6 +1,6 @@
-import { ShowActionSheetFn } from 'q2-tecton-common/lib/utility/action-sheet';
-import { IPlatformDimensions } from 'q2-tecton-common/lib/types/platformDimensions';
-import { LocFn, ResizeIframeFn, ResolveMenuFn, NavigateToFn, ShowOverpanelFn } from './util';
+import type { ShowActionSheetFn } from 'q2-tecton-common/lib/types/action-sheet';
+import type { IPlatformDimensions } from 'q2-tecton-common/lib/types/platformDimensions';
+import type { LocFn, ResizeIframeFn, ResolveMenuFn, NavigateToFn, ShowOverpanelFn } from './util';
 
 declare global {
     interface Window {

package/dist/types/util.d.ts

@@ -1,10 +1,6 @@
 import { Q2Input } from './components/q2-input/q2-input';
 import { Q2Textarea } from './components/q2-textarea/q2-textarea';
 
-export interface IDict<T> {
-    [key: string]: T;
-}
-
 export interface ResolvedMenuItem {
     itemLabel: string;
     action: string;
@@ -16,7 +12,11 @@ export interface ResolvedMenuItem {
 
 export type FormFieldTypes = Q2Input | Q2Textarea;
 
-export type LocFn = (key: string, substitutions?: IDict<any> | string[], options?: IDict<any>) => string;
+export type LocFn = (
+    key: string,
+    substitutions?: Record<string, any> | string[],
+    options?: Record<string, any>
+) => string;
 
 export type ResizeIframeFn = () => void;
 
@@ -27,7 +27,7 @@ export type ResolveMenuFn = (
     resolvedType?: string
 ) => Promise<ResolvedMenuItem[]>;
 
-export type NavigateToFn = (featureName: string, moduleName?: string, queryParams?: IDict<string>) => void;
+export type NavigateToFn = (featureName: string, moduleName?: string, queryParams?: Record<string, string>) => void;
 
 export type ShowOverpanelFn = <T>(
     outletPath: string,

package/dist/types/utils/action-sheet.d.ts

@@ -1,4 +1,4 @@
-import { ActionSheetListCloseData, ActionSheetListData } from 'q2-tecton-common/lib/utility/action-sheet';
+import type { ActionSheetListCloseData, ActionSheetListData } from 'q2-tecton-common/lib/types/action-sheet';
 interface IActionSheetComponent {
     hoist: boolean;
 }