/* eslint-disable */
/* tslint:disable */
/**
 * This is an autogenerated file created by the Stencil compiler.
 * 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/types/action-sheet";
import { ChartData, DonutChartData, EventDetail, FilesObject, FormatterValueObject, Q2DataTableHeader, Q2DataTableRow, Q2DataTableSerializedRow, StepperPaneEvent, ValidFileStatus } from "q2-tecton-common/lib/types/elements";
import { Q2Input } from "./components/q2-input/q2-input";
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";
import { ModalOption, ModalResponse } from "q2-tecton-common/lib/types/modal";
import { OptionValue, ValidOptionElements } from "./components/q2-option-list/q2-option-list";
import { OptionValue as OptionValue1 } from "./components/q2-option-list/q2-option-list";
export { ActionSheetData, ActionSheetListCloseData } from "q2-tecton-common/lib/types/action-sheet";
export { ChartData, DonutChartData, EventDetail, FilesObject, FormatterValueObject, Q2DataTableHeader, Q2DataTableRow, Q2DataTableSerializedRow, StepperPaneEvent, ValidFileStatus } from "q2-tecton-common/lib/types/elements";
export { Q2Input } from "./components/q2-input/q2-input";
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";
export { ModalOption, ModalResponse } from "q2-tecton-common/lib/types/modal";
export { OptionValue, ValidOptionElements } from "./components/q2-option-list/q2-option-list";
export { OptionValue as OptionValue1 } from "./components/q2-option-list/q2-option-list";
export namespace Components {
    interface ClickElsewhere {
    }
    /**
     * @name Action Group
     * @category Display
     * @summary Use for laying out groups of buttons or links with consistent spacing.
     */
    interface Q2ActionGroup {
        /**
          * Whether the slotted elements 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.
          * @warning Vertical orientation is not supported for [Links](https://tecton.q2developer.com/design-system/q2-link/) or `"coin"` [Buttons](https://tecton.q2developer.com/design-system/q2-btn/), and will be set to "horizontal".
          * @default 'auto'
         */
        "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.
          * @default 440
         */
        "orientationThreshold": number;
    }
    /**
     * @name Action Sheet
     * @category Display
     * @summary Use for presenting a modal sheet.
     */
    interface Q2ActionSheet {
        "data": ActionSheetData;
        "hide": (data?: ActionSheetListCloseData) => Promise<void>;
        "hideClose": boolean;
        "show": () => Promise<void>;
        "title": string;
    }
    /**
     * @name Avatar
     * @category Display
     * @summary Use for displaying photos, initials, or icons for people, businesses, or accounts.
     */
    interface Q2Avatar {
        /**
          * A [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to display as the fallback.
          * @default 'person'
         */
        "icon": string;
        /**
          * A set of up to four initials to display as capitalized text. Takes priority over `name`.
         */
        "initials": string;
        /**
          * The name associated with the avatar. The initials of the first and last words provided will display as capital letters.
          * @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.
         */
        "src": string;
    }
    /**
     * @name Badge
     * @category Display
     * @summary Use for displaying counts, statuses, or indicators on other elements.
     */
    interface Q2Badge {
        /**
          * Returns the text content of the badge. This accounts for the text in slotted elements or the Shadow DOM.
          * @testonly
         */
        "getTextContent": () => Promise<string>;
        /**
          * The number of characters to show. A maximum limit of 18 characters is acceptable.
         */
        "maxLength": number | undefined;
        /**
          * The size of the badge.
         */
        "size": 'default' | 'large' | undefined;
        /**
          * The stoplight color of the element when `theme` is not present.
         */
        "status": 'info' | 'alert' | 'warning' | 'success' | undefined;
        /**
          * The color of the badge when in the active state. The `theme` has higher priority than `status`.
         */
        "theme": 'primary' | 'secondary' | 'tertiary' | undefined;
        /**
          * What to display in the badge. Negative numbers will be shown as positive.
          * @info `q2-badge` also has limited support for slotted HTML elements.
          * @localizable
         */
        "value": number | string;
    }
    /**
     * @name Button
     * @category Forms
     * @summary Use for triggering actions including submit, save, cancel, or delete.
     */
    interface Q2Btn {
        /**
          * @private Role attribute for better semantic accessibility support
         */
        "_role": string;
        /**
          * @private Tooltip text set by a parent q2-tooltip component for accessibility.
         */
        "_tooltip": string;
        /**
          * Displays the component in an active state.
          * @info Only intended for use with the `badge` property.
          * @deprecated
         */
        "active": boolean;
        "ariaControls": string;
        "ariaExpanded": string;
        "ariaHasPopup": string;
        /**
          * @deprecated
         */
        "ariaLabel": string;
        "ariaPressed": string;
        "ariaSelected": string;
        /**
          * Displays the component in a smaller, badge style.
          * @deprecated
         */
        "badge": boolean;
        /**
          * The component expands to fill the width of its parent element.
         */
        "block": boolean;
        /**
          * @deprecated
         */
        "color": string;
        "description": string;
        /**
          * Marks the component as disabled and displays a `not-allowed` cursor on hover.
         */
        "disabled": boolean;
        /**
          * @deprecated
         */
        "fab": boolean;
        /**
          * Associates the button with a `<form>` element by form ID.
         */
        "form": string;
        /**
          * Hides the `label`, and assigns its value to the `aria-label` attribute on the `<button>` element.
         */
        "hideLabel": boolean;
        /**
          * Indicates the role of the component in the workflow, which will apply appropriate styling to the component.
         */
        "intent": | 'coin'
        | 'neutral-text'
        | 'neutral'
        | 'workflow-destroy'
        | 'workflow-escape'
        | 'workflow-primary'
        | 'workflow-secondary';
        /**
          * Defines the text content of the button if it is not provided in the `<slot>` of the element. Also used for the `aria-label` of the `<button>` element when only displaying an icon.
          * @localizable
         */
        "label": string;
        /**
          * Displays the button with a loading spinner to indicate something is happening in the background and the user should not click again.
         */
        "loading": boolean;
        /**
          * Defines the size of q2-btn, it renders as default size if not provided.
         */
        "size": 'small' | 'medium' | 'large';
        "tabIndex": number;
        /**
          * The default behavior of the button.
          * @default 'button'
         */
        "type": string;
    }
    /**
     * @name Calendar
     * @category Forms
     * @summary Use for selecting a date from a calendar popover.
     */
    interface Q2Calendar {
        /**
          * @deprecated
         */
        "ariaLabel": string;
        /**
          * Detects the year automatically based on today's date when the user presses the `Escape` key or the `Blur` mouse event occurs. Setting `future` or `past` as the value will increase or decrease the year by one, respectively.
          * @default 'current'
         */
        "assume": 'current' | 'future' | 'past';
        /**
          * @deprecated
         */
        "buttonLabel": string;
        /**
          * A label shown at the top of the popover date picker.
         */
        "calendarLabel": string;
        /**
          * Display a button in the input field allowing the user to clear their selection.
         */
        "clearable": boolean;
        /**
          * Emulates clicking the `<input>` to hide the popover if it is visible.
          * @testOnly
         */
        "closePopover": () => Promise<void>;
        /**
          * Specifies a time of day after which a date is no longer valid.
          * @warning Must be a valid ISO date string.
         */
        "cutoffTime": string;
        /**
          * The most concise way to define valid days of the week for calendar. Each day of the week has a checksum value:  - Sunday = 1 - Monday = 2 - Tuesday = 4 - Wednesday = 8 - Thursday = 16 - Friday = 32 - Saturday = 64  Add the checksum values of your desired valid days together, and set `daysOfWeekChecksum` to that summed value.  **Example:**
          * @snippet element.daysOfWeekChecksum = 127 // All days of the week are valid element.daysOfWeekChecksum = 62; // Only weekdays are valid element.daysOfWeekChecksum = 65; // Only Saturday and Sunday are valid
         */
        "daysOfWeekChecksum": number;
        /**
          * Disable the input field.
         */
        "disabled": boolean;
        /**
          * Text that displays as the placeholder when the field is marked `disabled`.
          * @localizable
         */
        "disabledMsg": string;
        /**
          * Text that appears at the bottom of the popover date picker.
         */
        "disclaimer": string;
        /**
          * Determines the display format of the date field value.  Must follow the [date-fns](https://date-fns.org/v2.28.0/docs/format) token specification.
         */
        "displayFormat": string;
        /**
          * Defines the last selectable date in the date picker popover.
          * @warning Must be a valid ISO date string.
         */
        "endDate": string;
        /**
          * Each item in the `errors` array will appear below the input field when the field is focused and `typeable` is `true`.
          * @localizable
         */
        "errors": string[];
        /**
          * Hide the input field's ` <label> ` element from view.
         */
        "hideLabel": boolean;
        /**
          * Each item in the `hints` array will appear below the input field when the field is focused and `typeable` is true.
          * @localizable
         */
        "hints": string[];
        /**
          * Show error styles when the calendar is in an errant state.
         */
        "invalid": boolean;
        /**
          * Defines an explicit date blacklist.
          * @warning Must be a valid ISO date string.
          * @info When explicit date definitions like `invalidDates` is used, other date validity methods like `daysOfWeekChecksum` are overriden.
         */
        "invalidDates": string[];
        /**
          * The visible label for the `q2-calendar` input field.
         */
        "label": string;
        /**
          * @deprecated
         */
        "onsuccess": (e: CustomEvent) => void;
        /**
          * Determine whether the popover is open or closed.
          * @readonly
         */
        "open": boolean;
        /**
          * Emulates clicking the `<input>` to display the popover if it is hidden.
          * @testOnly
         */
        "openPopover": () => Promise<void>;
        /**
          * Appends "(optional)" to the label and sets `aria-required="false"`.
         */
        "optional": boolean;
        /**
          * Text that appears within the input field when it is blurred and empty. Placeholder text disappears when the user focuses on the field and provides input.
         */
        "placeholder": string;
        /**
          * @deprecated
         */
        "popDirection": 'up' | 'down';
        /**
          * Aligns the popover date picker to the left or right side of the input field.
         */
        "popoverAlignment": 'left' | 'right';
        /**
          * Force the direction of the popover date picker when it opens. If no value is passed, the component will auto-detect the direction based on available space.
         */
        "popoverDirection": 'up' | 'down';
        /**
          * @deprecated 
          * @default 355
         */
        "popoverMinHeight": 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.
          * @default null
         */
        "popoverMode": 'legacy';
        /**
          * The field's content is not editable, but the field remains focusable.  Appends "(readonly)" to the field label. Supersedes `optional` if both are `true`.
         */
        "readonly": boolean;
        /**
          * Emulates clicking the `<input>` to display the popover, moving to the correct month and year, and clicking the provided date.  While a `string` value can be passed, we recommended passing a `Date` object. If the value is invalid, the method will not select the date.
          * @testOnly
         */
        "setValue": (value: string | Date) => Promise<void>;
        /**
          * Defines the first selectabe date in the date picker popover.
          * @warning Must be a valid ISO date string.
         */
        "startDate": string;
        /**
          * Emulates focusing the `<input>`, entering the provided value, and emitting an `input` event.  While a `string` value can be passed, we recommended passing a `Date` object. If the value is invalid, the method will not select the date.
          * @warning Only applicable when the input is typeable.
          * @testOnly
         */
        "typeValue": (value: string | Date) => Promise<void>;
        /**
          * The user can type in the field. Only available in desktop browsers.
         */
        "typeable": boolean;
        /**
          * Show success styles when the calendar is in a valid state. The error state takes precedence when both are set.
          * @default false
         */
        "valid": boolean;
        /**
          * Defines an explicit date whitelist.
          * @warning Must be a valid ISO date string.
          * @info When explicit date definitions like `validDates` is used, other date validity methods like `daysOfWeekChecksum` are overriden.
         */
        "validDates": string[];
        /**
          * The value of the `q2-calendar` element, e.g. the selected date.  **How to change or clear the value with javascript:**
          * @snippet // change date element.value = '2022-12-21'; // clear date element.value = null;
         */
        "value": string | { toDate(): Date };
    }
    /**
     * @name Card
     * @category Display
     * @summary Use for grouping related content in a contained, elevated surface.
     */
    interface Q2Card {
        /**
          * The [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to be displayed in the avatar location.  Please use q2-item instead.
          * @deprecated
         */
        "avatarIcon": string;
        /**
          * The initials to be placed in the avatar of the card.  Please use q2-item instead.
          * @deprecated
         */
        "avatarInitials": string;
        /**
          * The name to be used for the avatar of the card which will be converted to initials.  Please use q2-item instead.
          * @deprecated
         */
        "avatarName": string;
        /**
          * The source of the image to be displayed in the avatar location.  Please use q2-item instead.
          * @deprecated
         */
        "avatarSrc": string;
        /**
          * Indicates that a bar should be displayed and which color to use. Predefined colors that may be used as values are:  - primary - secondary - tertiary - info - success - warning - alert - accent-1 - accent-2 - accent-3 - accent-4 - accent-5 - accent-6 - accent-7 - accent-8 - accent-9 - accent-10 - accent-11 - accent-12  Any other value (e.g. `"#990000"`, `"purple"`) will be treated as a custom color.
         */
        "bar": string;
        /**
          * The description of the card (truncated after two lines).  Please use q2-item instead.
          * @deprecated
         */
        "description": string;
        /**
          * The size of the box-shadow applied to the component, giving it a sense of depth.
          * @info Set to `0` to disable.
          * @default 2
         */
        "elevation": 0 | 1 | 2 | 3 | 4 | 5;
        /**
          * Display the card with a view optimized for smaller displays.  Please use q2-item instead.
          * @deprecated
         */
        "isSmall": boolean;
        /**
          * Display the card with no borders, padding, drop-shadows, or clickable behavior.  Please use q2-item instead.
          * @deprecated
         */
        "isStatic": boolean;
        /**
          * Target to be applied to the link when a URL is provided.
          * @warning Do not use in Online Banking. Use the `openURL` capability on the click event instead.
         */
        "target": '_self' | '_blank' | '_parent' | '_top';
        /**
          * The title of the card.  Please use q2-item instead.
          * @deprecated
         */
        "title": string;
        /**
          * Alters the interactive behavior of the card while maintaining visual appearance.
          * @default 'clickable'
         */
        "type": 'clickable' | 'non-clickable';
        /**
          * URL to navigate the user to when the card is clicked.
          * @warning Do not use in Online Banking. Use the `openURL` capability on the click event instead.
         */
        "url": string;
    }
    /**
     * @name Card Image
     * @summary Displays a visual representation of a credit or debit card with customizable styling
     * and card details. Supports horizontal and vertical orientations with responsive sizing
     * that adapts content visibility based on container width.
     */
    interface Q2CardImage {
        /**
          * Background style for the base layer. - `'primary'` | `'secondary'` | `'tertiary'`: Solid theme colors - `'gradient'`: Grayscale gradient (themable via CSS variables) - Custom string: URL/path to an image file (SVG, PNG, JPG)
          * @default 'primary'
         */
        "background": 'primary' | 'secondary' | 'tertiary' | 'gradient' | string;
        /**
          * The card holder name to display on the card. Only rendered at large and medium sizes. When not provided, neither the label nor the name is displayed.
         */
        "cardHolder"?: string;
        /**
          * Controls whether the "CARD HOLDER" label is displayed above the card holder name. The label is only supported at large size. At medium size, only the name is shown regardless of this prop. When `false`, only the name is shown without the label.
          * @default true
         */
        "cardHolderLabel": boolean;
        /**
          * The card number to display. Only the last 4 characters are used, prefixed with `**** **** **** `. The last 4 characters must all be digits; otherwise the card number is not displayed. Not rendered at tiny size.
         */
        "cardNumber"?: string;
        /**
          * The status of the card. When set, renders a status banner at the top of the card for card sizes medium and up.
         */
        "cardStatus"?: | 'digital'
        | 'enabled'
        | 'new'
        | 'disabled'
        | 'locked'
        | 'damaged'
        | 'lost'
        | 'stolen'
        | 'lost or stolen';
        /**
          * The card type label displayed alongside the expiration date. Not rendered at tiny size.
         */
        "cardType"?: 'atm' | 'debit';
        /**
          * The color of the card type text. Only applies when `cardType` is set.
         */
        "cardTypeColor"?: 'black' | 'white';
        /**
          * The chip style displayed on the card. Not rendered at tiny size. - `'gold'`: Gold/brass colored EMV chip - `'silver'`: Silver/platinum colored EMV chip
         */
        "chip"?: 'gold' | 'silver';
        /**
          * If `true`, the card image is wrapped in a `q2-btn` to handle click interactions.
          * @default false
         */
        "clickable": boolean;
        /**
          * If `true`, the card image is visually disabled and not clickable. Does not affect the dropdown.
          * @default false
         */
        "disabled": boolean;
        /**
          * The expiration date of the card in ISO 8601 extended format (`YYYY-MM`). Displayed as `MM / YY` on the card. Only rendered at large and medium sizes. When not provided, neither the label nor the date value is displayed.
         */
        "expirationDate"?: string;
        /**
          * Controls whether the "EXPIRES" label is displayed above the expiration date. The label is only supported at large size. At medium size, only the date value is shown regardless of this prop. When `false`, only the date value is shown without the label.
          * @default true
         */
        "expirationDateLabel": boolean;
        /**
          * Path to the financial institution logo image (SVG, PNG, or JPG). Max display dimensions: 280x45 for horizontal cards, 250x45 for vertical cards. When not provided, an empty placeholder div is rendered to maintain consistent card structure.
         */
        "fiLogo"?: string;
        /**
          * If `true`, the component uses `display: inline-block`. If `false`, uses `display: block`.
          * @default false
         */
        "inline": boolean;
        /**
          * The orientation of the card image.
          * @default 'horizontal'
         */
        "orientation": 'horizontal' | 'vertical';
        /**
          * Background style for the overlay layer. When undefined, the overlay is not rendered. - `'dot'`: CSS-generated dot pattern with mix-blend-mode overlay (themable via CSS variables) - Custom string: URL/path to an image file (SVG, PNG, JPG)
         */
        "overlay"?: 'dot' | string;
        /**
          * Overrides the default status banner text (which is the cardStatus value in uppercase). Maximum 14 characters (including spaces) to ensure the text fits within the banner.
         */
        "statusTextOverride"?: string;
        /**
          * Accessible label for the card image. When provided, this value is applied as `aria-label` on either the card container (non-clickable) or the wrapping button (clickable).
         */
        "tctAriaLabel"?: string;
        /**
          * The card vendor. Renders the vendor logo in the bottom-right of the card. Not rendered at tiny size.
         */
        "vendor"?: 'mastercard' | 'visa';
        /**
          * The color variant of the vendor logo. Only applies when `vendor` is set. Defaults to `'white'` for Visa and `'brand'` for Mastercard.
         */
        "vendorColor"?: 'black' | 'brand' | 'white';
        /**
          * Path to a custom vendor logo image (SVG, PNG, or JPG). When set, this overrides the `vendor` prop and displays the custom logo. Not rendered at tiny size.
         */
        "vendorLogo"?: string;
    }
    /**
     * @name Carousel
     * @category Display
     * @summary Use for cycling through a series of content slides with swipe or button navigation.
     */
    interface Q2Carousel {
        /**
          * @deprecated
         */
        "ariaLabel": string;
        /**
          * Position to show the navigation arrows `float`: vertically centered and float over the carousel pane. `bottom`: bottom area around pagination indicator, the arrows at far left/right edges. `hug`: bottom area around pagination indicator and wraps the pagination indicator.
         */
        "arrowPosition": 'bottom' | 'hug' | 'float' | undefined;
        /**
          * Keeps all carousel panes at the height of the tallest pane.
          * @default false
         */
        "autoHeight": boolean;
        /**
          * Enables the auto-play feature and starts the carousel without user input.
          * @default false
         */
        "autoPlay": boolean;
        /**
          * Adjusts width of active pane automatically in compact screen based on the carousel width.
          * @default false
         */
        "autoWidth": boolean;
        /**
          * Breakpoint pixel number for switching to compact mode when autoWIdth is enabled, default is 500.
          * @default 500
         */
        "compactBreakpoint": number;
        /**
          * Display a gradient fade on the left and right edges of the carousel.
         */
        "edgeFade": boolean;
        /**
          * Display the carousel panes as frameless with no container or shadow.
          * @default false
         */
        "framelessPanes": boolean;
        /**
          * Display the carousel panes full-width rather than with peeking content.
          * @default false
         */
        "fullWidthPanes": boolean;
        /**
          * Hide the dots below the carousel that provide navigation control and indicate which page is currently active.
          * @default false
         */
        "hidePagination": boolean;
        /**
          * The currently displayed carousel pane.
          * @default 1
         */
        "index": number;
        /**
          * The label that is associated with the carousel. This is not displayed visually, but is presented by screen readers.
          * @localizable 
          * @default 'tecton.element.carousel.ariaLabel'
         */
        "label": string;
        /**
          * Enables continuous looping so navigating past the last pane wraps to the first (and vice versa). Defaults to enabled; pass `false` to disable.
         */
        "loop": boolean;
        /**
          * Clicks and Focuses the `q2-carousel-pane` matching the specified index.
          * @testOnly
         */
        "selectCarouselPane": (index: number) => Promise<void>;
        /**
          * Display navigation arrow buttons as another way to navigate the carousel.
          * @default false
         */
        "showNavigationArrows": boolean;
        /**
          * Clicks and Focuses the `<button>` that controls playing or pausing the auto-play feature of the carousel.
          * @warning If the `autoPlay` property is not enabled, this method does nothing.
          * @testOnly
         */
        "togglePlayPause": () => Promise<void>;
    }
    /**
     * @name Carousel Pane
     * @category Display
     * @summary Use as a single slide within a Carousel.
     */
    interface Q2CarouselPane {
        /**
          * Used by `q2-carousel` to determine the pane's index.
          * @private
         */
        "index": number;
        /**
          * Used by `q2-carousel` to indicate which pane is currently active.
          * @private
         */
        "isActivePane": boolean;
        /**
          * Text used only as an `aria-label` for accessibility purposes.
          * @localizable
         */
        "label": string;
        /**
          * Used by `q2-carousel` to indicate how many panes are in the carousel.
          * @private
         */
        "siblingCount": number;
        /**
          * Used by `q2-carousel` to indicate the pane should be frameless.
          * @private
         */
        "slotFrameless": boolean;
    }
    /**
     * @name Area Chart
     * @category Data Visualization
     * @summary Use for showing trends over time with filled areas under lines.
     */
    interface Q2ChartArea {
        /**
          * Controls alignment of the chart name when its visible.
         */
        "alignChartName": 'left' | 'right' | 'center';
        /**
          * Controls area fill color of chart. Accepts variables, hex codes, and CSS color names.  **Examples:**
          * @snippet element.areaColor = "#ff0000"; element.areaColor = "papayawhip"; element.areaColor = "var(--t-accent-1)";
         */
        "areaColor": string;
        /**
          * The title of the chart. We recommend always including this for accessibility purposes.  It is hidden by default, but can be made visible with the `showChartName` variable.
          * @localizable
         */
        "chartName": string;
        /**
          * A subtitile to the chart name. Often used to provide a brief description of what the data represents.
         */
        "chartSubTitle": string;
        /**
          * An array of objects that contain the data to be displayed.
          * @default []
         */
        "data": ChartData[];
        /**
          * Allows control of how labels on the name axis will be handled if the text length is wider than the available space. Values will ellipsize if the truncate option is used.
         */
        "dataNamesOverflow": 'break' | 'truncate';
        /**
          * Sets width available for labels on the name axis. It can be used in coordination with `dataNamesOverflow` to control where the label text breaks or truncates.
         */
        "dataNamesWidth": number;
        /**
          * Controls whether values on the value axis are shown as numbers or as currency.
         */
        "format": 'currency' | 'default';
        /**
          * Can be used in coordination with the currency format property to control decimal handling. Accepts `Ndec` where N is a number. (e.g. `2dec`)
         */
        "formatModifier": string;
        /**
          * Controls the direction or viibility of grid lines on the chart.
         */
        "gridLines": 'horizontal' | 'vertical' | 'off';
        /**
          * 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 };
        /**
          * Controls visibility of labels on the name axis.
          * @default false
         */
        "hideNameAxisLabels": boolean;
        /**
          * Controls visibility of labels on the value axis.
          * @default false
         */
        "hideValueAxisLabels": boolean;
        /**
          * A method to fire change event on hover on a point.
          * @testOnly
         */
        "hoverDataPoint": (index: number) => Promise<void>;
        /**
          * Controls color of the data line on the chart. Accepts variables, hex codes, and CSS color names.  **Examples:**
          * @snippet element.areaColor = "#ff0000"; element.areaColor = "papayawhip"; element.areaColor = "var(--t-accent-1)";
         */
        "lineColor": string;
        /**
          * Controls the position of text on the names axis by centering the text to the bar at a 45° angle. Can be used when space is limited or with longer name labels.
          * @default false
         */
        "offsetDataNames": boolean;
        /**
          * Controls the position of text on the values axis by centering the text to the bar at a 45° angle. Can be used when space is limited or with longer name labels.
          * @default false
         */
        "offsetDataValues": boolean;
        /**
          * Controls color of vertical pointer on a line chart. Accepts variables, hex codes, and CSS color names.  **Examples:**
          * @snippet element.areaColor = "#ff0000"; element.areaColor = "papayawhip"; element.areaColor = "var(--t-accent-1)";
         */
        "pointerLineColor": string;
        /**
          * Controls the style of the vertical poiner line.
         */
        "pointerLineStyle": 'solid' | 'dashed';
        /**
          * Controls the visibility of the chart name at the top of the chart.
          * @default false
         */
        "showChartName": boolean;
        /**
          * Controls the visibility of a value label when a data point is shown on the chart.
          * @default false
         */
        "showDatapointLabels": boolean;
        /**
          * Controls making the area fill color into a gradient. The gradient starts at the top with the `areaColor` value, and fades to white.
          * @default false
         */
        "showGradient": boolean;
        /**
          * Controls the xAxis max value.
         */
        "xMax": number;
        /**
          * Controls the xAxis min value.
         */
        "xMin": number;
        /**
          * Controls the yAxis max value.
         */
        "yMax": number;
        /**
          * Controls the yAxis min value.
         */
        "yMin": number;
    }
    /**
     * @name Bar Chart
     * @category Data Visualization
     * @summary Use for comparing values across categories with horizontal or vertical bars.
     */
    interface Q2ChartBar {
        /**
          * Controls alignment of the chart name when its visible.
         */
        "alignChartName": 'left' | 'right' | 'center';
        /**
          * The title of the chart. We recommend always including this for accessibility purposes.  It is hidden by default, but can be made visible with the `showChartName` variable.
          * @localizable
         */
        "chartName": string;
        /**
          * A subtitile to the chart name. Often used to provide a brief description of what the data represents.
         */
        "chartSubTitle": string;
        /**
          * Controls the color of all bars in the chart. Can be overridden at the individual data point level. Accept variables, hex codes, an CSS color names.  **Examples:**
          * @snippet element.areaColor = "#ff0000"; element.areaColor = "papayawhip"; element.areaColor = "var(--t-accent-1)";
         */
        "color": string;
        /**
          * An array of objects that contain the data to be displayed.
          * @default []
         */
        "data": ChartData[];
        /**
          * Allows control of how labels on the name axis will be handled if the text length is wider than the available space. Values will ellipsize if the truncate option is used.
         */
        "dataNamesOverflow": 'break' | 'truncate';
        /**
          * Sets width available for labels on the name axis. It can be used in coordination with `dataNamesOverflow` to control where the label text breaks or truncates.
         */
        "dataNamesWidth": number;
        /**
          * Controls whether values on the value axis are shown as numbers or as currency.
         */
        "format": 'currency' | 'default';
        /**
          * Can be used in coordination with the currency format property to control decimal handling. Accepts `Ndec` where N is a number. (e.g. `2dec`)
         */
        "formatModifier": string;
        /**
          * 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 };
        /**
          * Controls visibility of labels on the name axis.
          * @default false
         */
        "hideBarLabels": boolean;
        /**
          * Controls visibility of labels on the value axis.
          * @default false
         */
        "hideValueAxisLabels": boolean;
        /**
          * Controls the position of text on the names axis by centering the text to the bar at a 45° angle. Can be used when space is limited or with longer name labels.
          * @default false
         */
        "offsetDataNames": boolean;
        /**
          * Controls the position of text on the values axis by centering the text to the bar at a 45° angle. Can be used when space is limited or with longer name labels.
          * @default false
         */
        "offsetDataValues": boolean;
        /**
          * Controls which axes are the value and name axes. When `vertical`, values are on the y-axis and names are on the x-axis, with bars shown vertically on the chart. When `horizontal`, names are on the y-axis and values are on the x-axis, with bars shown horizontally on the chart.
         */
        "orientation": 'vertical' | 'horizontal';
        /**
          * Controls the visibility of the chart name at the top of the chart.
          * @default false
         */
        "showChartName": boolean;
        /**
          * By default, the sorting of the bars on the chart is controlled by the order the values are in the data array. When set to `true`, values on the bar will be re-sorted in descending order.
          * @default false
         */
        "sort": boolean;
    }
    /**
     * @name Donut Chart
     * @category Data Visualization
     * @summary Use for showing proportions of a whole as segments in a ring.
     */
    interface Q2ChartDonut {
        /**
          * The title of the chart. We recommend always including this for accessibility purposes.  It is hidden by default, but can be made visible with the `showChartName` variable.
          * @localizable
         */
        "chartName": string;
        /**
          * Clears any selected slice.
         */
        "clearSelection": () => Promise<void>;
        /**
          * Controls when numbers displayed as currency, if they are whole numbers, they will not include the .00.
         */
        "currencyRound": boolean;
        /**
          * An array of objects that contain the data to be displayed.
          * @default []
         */
        "data": DonutChartData[];
        /**
          * Controls whether values on the value axis are shown as numbers or as currency.
         */
        "format": 'currency' | 'default';
        /**
          * Returns the chart instance for e2e testing.
          * @testOnly
         */
        "getChartOptions": () => Promise<any>;
        /**
          * The amount which the slice will scale when hovered.
          * @default 5
         */
        "hoverScaleSize": number;
        /**
          * The inner radius of the chart slices which is represeted by a percentage of the radius.
          * @warning If you update this property to be greater than or equal to the `outerRadius`, we automatically set it to be 15% less than the current `outerRadius` to prevent display issues.
          * @default '70%'
         */
        "innerRadius": string;
        /**
          * Determine whether the data in the center renders inside a button element.
          * @info This also enables extra keyboard controls when the button is focused.
         */
        "isClickable": boolean;
        /**
          * The minimum size of the chart slizes which is represented as a percentage of the circumferences.
          * @default '2.5%'
         */
        "minSliceSize": string;
        /**
          * The outer radius of the chart slices which is represented by a percentage of the radius.
          * @warning If you update this property to be less than or equal to the `innerRadius`, we automatically set it to be 15% greater than the current `innerRadius` to prevent display issues.
          * @default '85%'
         */
        "outerRadius": string;
        /**
          * Selects a slice by its provided `id` in the provided `data`.
         */
        "selectById": (id: string) => Promise<void>;
        /**
          * Selects a slice by its index in the provided `data`.
         */
        "selectByIndex": (index: number) => Promise<void>;
        /**
          * A method to select a slice with index.
          * @testOnly
         */
        "selectDataPoint": (index: number) => Promise<void>;
        /**
          * The id of the data point that is currently selected in the chart. You may set this to pre-select a data point on render, or force a selection change.
         */
        "selectedId": string;
        /**
          * The amount which the slice will separate from the chart when selected.
          * @default 10
         */
        "selectedOffset": number;
        /**
          * Determines whether the legend is displayed.
          * @info The legend is a list of the data points in the chart and their colors.
          * @default false
         */
        "showLegend": boolean;
        /**
          * The icon that displays by default when no slices are selected.
         */
        "summaryIcon": string;
        /**
          * The name that displays by default when no slices are selected.
          * @localizable
         */
        "summaryName": string;
    }
    /**
     * @name Checkbox
     * @category Forms
     * @summary Use as a single binary choice; nest within a Checkbox Group for grouped selection.
     */
    interface Q2Checkbox {
        /**
          * @private Tooltip text set by a parent q2-tooltip component for accessibility.
         */
        "_tooltip": string;
        /**
          * Determine which side of the label the checkbox will render on.
         */
        "align": string;
        /**
          * @deprecated Use 'align' instead
         */
        "alignment": string;
        /**
          * @deprecated
         */
        "ariaLabel": string;
        /**
          * The state of the checkbox. This modifies the visual appearance of the element.
          * @default false
         */
        "checked": boolean;
        /**
          * Populates a description that is displayed beneath the label.
          * @localizable
         */
        "description": string;
        /**
          * Disables the checkbox and prevents interaction.
         */
        "disabled": boolean;
        /**
          * Used by q2-checkbox-group to disable all checkboxes in the group
          * @private
         */
        "groupDisabled": boolean;
        /**
          * Determines if the component should display in an errant state.
          * @default false
         */
        "hasError": boolean;
        /**
          * Hide's the field's `<label>` element from view.
          * @warning Only use when a visible label is impractical.
         */
        "hideLabel": boolean;
        /**
          * Used on a parent checkbox in a checkbox group (e.g. "Select All") to indicate that some, but not all, checkboxes in a group are checked.  When `true`, the "indeterminate" selection style is applied. To apply the standard "checked" selection style, `checked` must be true, and `indeterminate` must be `false`.
         */
        "indeterminate": boolean;
        /**
          * The visible label text for the checkbox. Appears to the right of the box for 'default' and 'favorite' checkboxes, and to the left for 'toggle' checkboxes. Yielded content will be adjacent to this text.
          * @localizable
         */
        "label": string;
        /**
          * A static string used to establish a symbolic relationship between checkboxes.
         */
        "name": string;
        /**
          * The field is not interactive, but remains focusable.
         */
        "readonly": boolean;
        /**
          * The field is not interactive, but remains focusable.
         */
        "slotReadonly": boolean;
        /**
          * The visual style of the checkbox. This does not need to be defined for a standard checkbox.
         */
        "type": 'favorite' | 'toggle';
        /**
          * A static reference value for the checkbox.
         */
        "value": string;
    }
    /**
     * @name Checkbox Group
     * @category Forms
     * @summary Use for selecting multiple options from a set of checkboxes.
     */
    interface Q2CheckboxGroup {
        /**
          * Determines if all checkboxes in the group are put into a `disabled` state.
         */
        "disabled": boolean;
        /**
          * Determines if the component should display in an errant state.
         */
        "hasError": boolean;
        /**
          * Hide's the group's `<label>` element from view.
          * @warning Only use when a visible label is impractical.
         */
        "hideLabel": boolean;
        /**
          * The label that displays above all the checkboxes.
          * @localizable
         */
        "label": string;
        /**
          * Determines if the component is marked as `optional`.
         */
        "optional": boolean;
        /**
          * Determines if all the checkboxes are marked as `readonly`.
         */
        "readonly": boolean;
        /**
          * Emulates clicking the `<q2-checkbox>` option(s) with the provided value.
          * @testOnly
         */
        "setValue": (values: string | string[]) => Promise<void>;
        /**
          * Can be used to get and set the checked status of each `<q2-checkbox>` element contained within the group.  **Example:**
          * @snippet element.value = {   'checkbox-value-1': true,   'checkbox-value-2': false,   'checkbox-value-3': true, };  // Also accepts partial values element.value = {   'checkbox-value-2': false, }
         */
        "value": object;
    }
    /**
     * @name Context
     * @category Display
     * @summary Use for displaying supplementary information or hints alongside content.
     */
    interface Q2Context {
        /**
          * Renders a horizontal line between the description and the action-group/footer slots.
         */
        "separator": boolean;
    }
    /**
     * @name Currency
     * @category Text
     * @summary Use for displaying formatted monetary amounts with proper locale.
     */
    interface Q2Currency {
        /**
          * The amount you want formatted.
         */
        "amount": number;
        /**
          * Formats the `amount` to a specific currency.
          * @default 'USD'
         */
        "currency": string;
        /**
          * A method to retrieve the displayed currency value.
          * @testOnly
         */
        "displayedMessageValue": () => Promise<string>;
        /**
          * Formats to the language provided. Accepts multiple locales in an array as sequential fallbacks.
          * @default document.documentElement.lang || 'en-US'
         */
        "locale": string | string[];
        /**
          * Determine how the positive or negative sign should display.  Behavior: - `accounting`: No sign displays for positive amounts and parentheses wrap negative amounts. - `always`: Always display the sign. - `auto`: Sign displays for negative amounts only, including negative zero. - `exceptZero`: Sign displays for positive and negative amounts, but not zero. - `never`: Never display the sign.
          * @default 'auto'
         */
        "signDisplay": 'accounting' | 'always' | 'auto' | 'exceptZero' | 'never';
        /**
          * Applies styling based on the size provided. If no size is provided, it will display as inline text.
         */
        "size": 'small' | 'medium' | 'large';
        /**
          * @private Inherited from q2-detail when slotted to match styling of q2-detail and q2-currency texts.
         */
        "slotSize": string;
        /**
          * The variant controls how the currency is colored and exposes unique CSS overrides. The `debit` and `credit` variants align styling with common practices for coloring debit and credit accounts. The `masked` variant exposes the ability to use gradients and images to color the currency.
         */
        "variant": 'debit' | 'credit' | 'masked';
    }
    /**
     * @name Data Table
     * @category Display
     * @summary Use for displaying large datasets with sorting, filtering, and selecting.
     */
    interface Q2DataTable {
        /**
          * Adds borders between rows and/or columns in the table.
         */
        "bordered": boolean | 'horizontal' | 'vertical' | 'grid';
        /**
          * Provides a caption for the data table.
         */
        "caption": string;
        /**
          * A method to click a row that accepts a row ID that is will be clicked.
          * @testOnly
         */
        "clickRow": (rowId: number | string) => Promise<void>;
        /**
          * Adds the ability to click a row and have the table emit an event with the selected row's data.
         */
        "clickable": boolean;
        /**
          * Determines the amount of padding for each of the cells in the table.
         */
        "density": 'compact' | 'normal' | 'comfortable';
        /**
          * Determines the `q2-icon` that will display when `rows` has no value.
          * @default 'inbox'
         */
        "emptyIcon": string;
        /**
          * Determines the message that will display when `rows` has no value.
          * @localizable 
          * @default 'tecton.element.dataTable.emptyMessage'
         */
        "emptyMessage": string;
        /**
          * A method that returns the plain text value of a particular cell (including slot content).
          * @testOnly
         */
        "getCellContent": (rowId: number | string, columnKey: string) => Promise<string>;
        /**
          * 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[];
        /**
          * Hides the caption from view, but still makes it available to screen readers for accessibility purposes.
         */
        "hideCaption": boolean;
        /**
          * Visually hides the `Select` button that displays when `clickable=true`. It will still be discoverable by assistive technologies.
          * @info Use of this property requires `clickable` to be set to `true`.
         */
        "hideClickable": boolean;
        /**
          * Displays a loading state on the table to indicate background activity.
         */
        "loading": boolean;
        /**
          * 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[];
        /**
          * Controls the position of the checkbox column when `selectable` is true. When set to 'right', the checkbox column will appear on the right side of the table.
          * @warning Use of this property requires `selectable` to be set to `true`.
          * @default 'left'
         */
        "selectAlign": 'left' | 'right';
        /**
          * 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.
          * @warning Use of this property requires `selectable` to be set to `true`.
          * @default 'multiple'
         */
        "selectMode": 'multiple' | 'single';
        /**
          * 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;
        /**
          * A method to sort a column that accepts a header object with key</b> and <b>sorted</b> property.
          * @testOnly
         */
        "sortColumn": (header: Q2DataTableHeader) => Promise<void>;
        /**
          * Makes table header sticky
         */
        "sticky": boolean;
        /**
          * Enables alternating background colors for the table rows
         */
        "striped": boolean;
        /**
          * A method to toggle row expansion that accepts a row ID that will be clicked to expand or collapse the expandable content
          * @testOnly
         */
        "toggleRowExpansion": (rowId: number | string) => Promise<void>;
        /**
          * A method to toggle row selection that accepts a row ID whose checkbox will be checked, if the feature is enabled.
          * @testOnly
         */
        "toggleRowSelect": (rowId: number | string) => Promise<void>;
        /**
          * A method to toggle select all button (checkbox) on left top corner.
          * @testOnly
         */
        "toggleSelectAllRows": () => Promise<void>;
    }
    /**
     * @name Detail
     * @category Display
     * @summary Use for displaying label-value pairs like account details or miscellaneous info.
     */
    interface Q2Detail {
        /**
          * Defines the alignment of the label and description when stacked, or when only the label or description is present.
          * @default 'left'
         */
        "align": 'left' | 'right' | 'center';
        /**
          * @deprecated Use 'align' instead
         */
        "alignment": 'left' | 'right' | 'center';
        /**
          * Defines the text content of the description.
          * @localizable
         */
        "description": string;
        /**
          * Defines the text content of the label.
          * @localizable
         */
        "label": string;
        /**
          * Defines the text size of the label and description.  If not specified, the detail will display as inline text.
         */
        "size": null | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
        /**
          * Determines if the description should appear beneath the label.
          * @default false
         */
        "stacked": boolean;
    }
    /**
     * @name Dropdown
     * @category Display
     * @summary Use for menus of contextual actions triggered by a button click.
     */
    interface Q2Dropdown {
        /**
          * Gets the outerHTML for top/bottom slotted elements.
         */
        "_getSlotsHtml": () => Promise<{ slot: string; html: string; }[]>;
        "additionalContext": string;
        /**
          * @deprecated Use 'popoverAlignment' instead
         */
        "alignment": 'left' | 'right';
        /**
          * @deprecated
         */
        "ariaLabel": string;
        /**
          * 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.
         */
        "context": string;
        /**
          * Passes important information to the outlet (e.g., pass an account id that your platform can use to look up what module to show for that account type).
          * @info Only applicable when using `<q2-dropdown>` for outlets.
         */
        "contextValue": string;
        /**
          * Indicates the menu cannot be focused or interacted with.
         */
        "disabled": boolean;
        /**
          * If `true`, it takes up 100% width.
         */
        "fullWidth": boolean;
        /**
          * Hide's the field's `<label>` element from view.
          * @warning Only use when a visible label is impractical.
         */
        "hideLabel": boolean;
        /**
          * Instructs the component to use the action sheet workflow for displaying its options.  For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).
          * @default !!window.Tecton?.useActionSheets
         */
        "hoist": boolean;
        /**
          * The icon that will render within the toggle button. You may use any of the `q2-icon` types.
         */
        "icon": string;
        /**
          * The text that appears within the button.
          * @warning This property should not be used if the `type` is `icon`.
          * @localizable
         */
        "label": string;
        /**
          * Identifies this menu as an outlet. Used in conjunction with context and, optionally, `contextValue`.
          * @info Only applicable when using `<q2-dropdown>` for outlets.
         */
        "name": string;
        /**
          * Determine whether the popover is open or closed.
          * @readonly
         */
        "open": boolean;
        /**
          * Emulates clicking the dropdown `<button>` to show the popover if it is hidden.
          * @testOnly
         */
        "openPopover": () => Promise<void>;
        /**
          * Determines the label that is applied to the option list for accessibility purposes.
         */
        "optionListLabel": string;
        /**
          * @deprecated
         */
        "popDirection": 'up' | 'down';
        /**
          * Aligns the popover dropdown to the left or right side of the input field.
          * @default 'left'
         */
        "popoverAlignment": 'left' | 'right';
        /**
          * 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
         */
        "popoverMinHeight": 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.
          * @default null
         */
        "popoverMode": 'legacy';
        /**
          * Use with `context` to tell the outlet where it appears. It will be matched with the appropriately configured module for that context.
          * @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/) or [Option](https://tecton.q2developer.com/design-system/q2-option/).  If the dropdown is closed, this will open it before selecting the item.  If the value does not match any item's value, or the dropdown is disabled, 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.  This method only applies to the deprecated `q2-dropdown-item` element, since `q2-option` (its replacement) does not support the `removable` attribute.  If the dropdown is closed, this will open it before selecting the remove item button.  If the dropdown is disabled, this method does nothing.  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.
          * @default 'icon'
         */
        "type": 'icon' | 'fab' | 'custom' | 'primary' | 'secondary' | 'neutral';
    }
    /**
     * @name Dropdown Item
     * @category Display
     * @summary Use as a single action item within a Dropdown menu.
     */
    interface Q2DropdownItem {
        /**
          * Used by q2-option-list to indicate the option is active
          * @private
         */
        "active": boolean;
        /**
          * @deprecated
         */
        "ariaLabel": string;
        /**
          * Disables interaction with the item and blocks its click event.
         */
        "disabled": boolean;
        /**
          * The text that appears within the dropdown item.
          * @info This will be used as the `aria-label` for this item.
          * @localizable
         */
        "label": string;
        /**
          * Renders an icon button in the item. Clicking on this button will change the `type` on the item's click event detail to "remove".
         */
        "removable": boolean;
        /**
          * Renders a line in the item instead of text. Click events from these items will not have details provided. A `separator` allows for quick visual grouping of items, so interactions should not be bound to these options.
         */
        "separator": boolean;
        /**
          * A static reference value for the item. This value is returned in the click event detail.
         */
        "value": string;
    }
    /**
     * @name Editable Field
     * @category Forms
     * @summary Use for inline editing of data that is normally displayed as read-only.
     */
    interface Q2EditableField {
        /**
          * @deprecated
         */
        "ariaLabel": string;
        /**
          * If `true`, component expands to fill the width of its parent element.
         */
        "block": boolean;
        /**
          * Emulates clicking the cancel button, which will hide the `<q2-input>` field.
          * @testOnly
         */
        "clickCancel": () => Promise<void>;
        /**
          * Emulates clicking the edit button, which will display the `<q2-input>` field.
          * @testOnly
         */
        "clickEdit": () => Promise<void>;
        /**
          * Emulates clicking the save button, saving value in the `<q2-input>` field, and emitting a `change` event.
          * @testOnly
         */
        "clickSave": () => Promise<void>;
        /**
          * Disables the edit button and field.
         */
        "disabled": boolean;
        /**
          * Controls the edit state of the element.
          * @default false
         */
        "editing": boolean;
        /**
          * Determines the `errors` applied to the `q2-input` element.  See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.
         */
        "errors": string[];
        /**
          * Determines the `formatModifier` applied to the `q2-input` element.
          * @info Only applicable when `type="currency"`.  See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.
         */
        "formatModifier": string;
        /**
          * Hide's the field's `<label>` element from view.
         */
        "hideLabel": boolean;
        /**
          * Determines the `hints` applied to the `q2-input` element.  See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.
         */
        "hints": string[];
        /**
          * The visible descriptor for the element. Serves as the input label while in the edit state and as a decorative label for the read state when `persistentLabel` is `true`.
          * @localizable 
          * @default ''
         */
        "label": string;
        /**
          * Determines the `maxLength` applied to the `q2-input`.  See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.
         */
        "maxlength": number;
        /**
          * Displays the provided label in the read state.
         */
        "persistentLabel": boolean;
        /**
          * Emulates clicking the edit button, and setting the value of the `<q2-input>` field.  If the `clickSave` argument is `true` (default), the save button will be clicked after the value is set, and a\ `change` event will be emitted.
          * @testOnly
         */
        "setValue": (value: string, options?: { clickSave?: boolean; }) => Promise<void>;
        /**
          * Shortens long values with ellipses instead of splitting into multiple lines.
         */
        "truncated": boolean;
        /**
          * Determines the `type` applied to the `q2-input` element.  See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for all `type` values.
         */
        "type": Q2Input['type'];
        /**
          * Serves as the visible text while in the read state, and the default value of the input while in the edit state.
          * @default ''
         */
        "value": string;
    }
    interface Q2Example {
        /**
          * Closes the menu.
         */
        "close": () => Promise<void>;
        /**
          * The content of the menu.
         */
        "content": string;
        /**
          * If `true`, the user cannot interact with the menu.
         */
        "disabled": boolean;
        "openMenu": () => Promise<boolean>;
        /**
          * Specifies the menu type.
          * @default 'overlay'
         */
        "type": string;
    }
    /**
     * @name File Picker
     * @category Forms
     * @summary Use for uploading files via browse dialog or drag-and-drop.
     */
    interface Q2FilePicker {
        /**
          * The size of the browse button.
          * @default 'medium'
         */
        "buttonSize": 'none' | 'small' | 'medium' | 'large';
        /**
          * A description of the field. This is announced by screen readers when the field is focused.
          * @localizable
         */
        "description": string;
        /**
          * Disables the file picker, preventing user interaction.
         */
        "disabled": boolean;
        /**
          * When `false`, the file name renders as-is and may wrap. Otherwise, long file names are middle-ellipsized so the beginning and end of the name remain visible.
          * @default true
         */
        "ellipsizeFileName": boolean;
        /**
          * Allowed file types based on extensions (e.g., ['jpg', 'png', 'pdf'] or 'jpg, png, pdf'). When using the attribute, provide a comma-separated string (e.g., 'jpg, png, pdf'). Arrays can only be set programmatically via JavaScript.
          * @default []
         */
        "fileTypes": string[] | string;
        /**
          * The label for the field. This is announced by screen readers when the field is focused.
          * @localizable
         */
        "label": string;
        /**
          * The maximum size (in bytes) of any file that can be selected.
          * @default Infinity
         */
        "maxFileSize": number;
        /**
          * The maximum number of files that can be selected.
          * @default Infinity
         */
        "maxFiles": number;
        /**
          * Shows a gradient at the bottom of the file list when more files are available below the visible area.
          * @default true
         */
        "showGradient": boolean;
        /**
          * An array of `ValidFileStatus` objects representing the upload status of files. Each `ValidFileStatus` object contains the following properties: - `name`: The file name. - `status`: The upload status, either `"failed"` or `"uploaded"`. - `message`: (Optional) A custom status message, used only when `status`   is `"failed"`. This allows developers to provide more detail about   upload failures while ensuring all other file status messages remain   consistent with approved design/UX standards. Custom failure messages   are limited to a single line.
          * @localizable 
          * @default []
         */
        "status": ValidFileStatus[];
        /**
          * Returns an object representing the selected files with two properties: - `invalidFiles`: An array of `InvalidFileStatus` objects representing   files that failed validation. - `validFiles`: An array of `File` objects representing files that passed   validation.  Each `InvalidFileStatus` object includes the following properties: - `file`: The `File` object. - `status`: The validation status, which can be `"invalid-type"` (invalid file   type), `"over-size-limit"` (file exceeds the size limit), or   `"over-max-files-limit"` (total exceeds the max files limit).
          * @readonly 
          * @default { invalidFiles: [], validFiles: [] }
         */
        "value": FilesObject;
        /**
          * Determines if the file picker is a browse button or a drop zone with a browse link.
          * @default 'browse'
         */
        "variant": 'browse' | 'browse-drop';
    }
    /**
     * @name Form
     * @category Forms
     * @summary Use for wrapping form fields with consistent spacing.
     */
    interface Q2Form {
        /**
          * Changes the vertical spacing of the form-fields contained within the component's slot
          * @default 'normal'
         */
        "spacing": 'none' | 'compact' | 'normal' | 'comfortable';
    }
    /**
     * @name Formatted Text
     * @category Text
     * @summary Use for displaying text with formatting like phone numbers, SSN, or dates.
     */
    interface Q2FormattedText {
        /**
          * The format style for the number. - `decimal`: Standard number formatting, locale-aware (default). - `percent`: Percentage formatting, locale-aware.
          * @default 'decimal'
         */
        "format": 'decimal' | 'percent';
        /**
          * Formats to the language provided. Accepts multiple locales in an array as sequential fallbacks.
          * @default document.documentElement.lang || 'en-US'
         */
        "locale": string | string[];
        /**
          * The maximum number of fraction digits to use.
          * @default 2
         */
        "maximumFractionDigits": number;
        /**
          * The minimum number of fraction digits to use.
          * @default 2
         */
        "minimumFractionDigits": number;
        /**
          * The minimum number of integer digits to use.
          * @default 1
         */
        "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.
          * @default 'auto'
         */
        "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;
    }
    /**
     * @name Grid
     * @category Display
     * @summary Use for responsive grid layouts with flexible rows and columns.
     */
    interface Q2Grid {
        /**
          * Sets the vertical alignment behavior of q2-grid-area components within a grid track at the baseline viewport size.
          * @default 'stretch'
         */
        "align": TQ2GridAlignOptions;
        /**
          * Sets the amount of columns to render within the grid at the baseline viewport size.
          * @default 12
         */
        "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.
          * @default 'normal'
         */
        "gap": TQ2GridGapOptions;
        /**
          * Sets the horizontal alignment behavior of q2-grid-area components within a grid track at the baseline viewport size.
          * @default 'stretch'
         */
        "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.
          * @default 'auto'
         */
        "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;
    }
    /**
     * @name Grid Area
     * @category Display
     * @summary Use as a positioned cell within a Grid layout.
     */
    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.
          * @default 'auto'
         */
        "align": TQ2GridAreaAlignOptions;
        /**
          * Sets the column span amount of the grid area at the baseline viewport size.
          * @default 1
         */
        "columnSpan": TQ2GridAreaColumnSpanOptions;
        /**
          * Sets the starting column of the grid area at the baseline viewport size.
          * @default 'auto'
         */
        "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.
          * @default 'auto'
         */
        "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.
          * @default 1
         */
        "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.
          * @default 'auto'
         */
        "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.
          * @default 'auto'
         */
        "zIndex": TQ2GridAreaZIndexOptions;
    }
    /**
     * @name Icon
     * @category Display
     * @summary Use for displaying icons that represent actions, states, or concepts.
     */
    interface Q2Icon {
        /**
          * Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text.
         */
        "inline": boolean;
        /**
          * The text that is presented by screen-readers when they encounter the icon.
         */
        "label": string;
        /**
          * The name of the icon to be displayed.
         */
        "type": string;
    }
    /**
     * @name Input
     * @category Forms
     * @summary Use for single-line text entry including email, phone, currency, SSN, and password.
     */
    interface Q2Input {
        /**
          * Provides additional descriptive text for the native input.
          * @private
         */
        "_ariaDescription": string;
        /**
          * Sets readonly to true on the input without adding the "read only" label.  Can be used to prevent user input while still presenting the necessary information for assistive technology.
          * @private 
          * @default undefined
         */
        "_preventEntry": boolean;
        /**
          * Allows for correct semantics of q2-input element when aria-expanded.
          * @private Defaults to undefined Will assign role to combobox when used inside q2-select and q2-calendar.
          * @default undefined
         */
        "_role": 'combobox' | undefined;
        /**
          * Determines whether the input updates its value property as native input occurs.
          * @private 
          * @default true
         */
        "_updateValueOnInput": boolean;
        "ariaActivedescendant": string;
        "ariaControls": string;
        "ariaExpanded": string;
        "ariaHaspopup": string;
        /**
          * @deprecated
         */
        "ariaLabel": string;
        "ariaOwns": string;
        /**
          * The `autocapitalize` attribute is an enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user.  [See MDN for a list of supported values](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize#value).
          * @info This attribute only affects the behavior of input mechanisms like virtual keyboards on mobile devices and voice input.
         */
        "autocapitalize": string;
        /**
          * The HTML autocomplete attribute lets web developers specify what permission (if any) the user agent has to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field.  [See MDN for a list of supported values](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values).
         */
        "autocomplete": string;
        /**
          * A string that indicates whether or not to activate automatic correction while the user is editing this field.
          * @warning This is currently only supported in Safari.
         */
        "autocorrect": 'on' | 'off';
        /**
          * Autofocus is enabled when the property is added to an element. To disable, remove attribute or set it to false. If applied to multiple elements, the first one will receive focus.
         */
        "autofocus": boolean;
        /**
          * The color of the badge when in the active state. The property `badgeValue` must be provided.
         */
        "badgeTheme": Q2Badge['theme'];
        /**
          * Displays a `q2-badge` element on the right side of the input.
         */
        "badgeValue": string;
        /**
          * Emulates firing checkValidity on `<input>`, emits `invalid` event if validation failed.
         */
        "checkValidity": () => Promise<boolean>;
        /**
          * Emulates clicking the clear button when the input is clearable.
          * @warning Only applicable when the input is clearable.
          * @testOnly
         */
        "clearValue": () => Promise<void>;
        /**
          * Renders an icon button when the field is non-empty. Pressing the button clears all input from the field.
         */
        "clearable": boolean;
        /**
          * If provided a value, it sets the `aria-current` attribute on the inner input. [See MDN for more information on aria-current](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current).
         */
        "current": 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false';
        /**
          * Indicates the field cannot be focused or interacted with.
          * @default false
         */
        "disabled": boolean;
        /**
          * Each item in the `errors` array will appear below the input field when the field is focused.
          * @localizable
         */
        "errors": string[];
        /**
          * Defines the field's expected input format, and automatically masks user input to conform. Specific types support different modifier options. See the section on Format Modifiers for all available options.
         */
        "formatModifier": string;
        /**
          * Hide's the field's `<label>` element from view.
          * @warning Only use when a visible label is impractical.
         */
        "hideLabel": boolean;
        /**
          * When `true` and the input field has an active validation error, the field shows the error state without displaying associated error messages below the field (from the errors array). Primarily used for dropdown selects and date pickers whose controls appear below the input field (where the error messages, if displayed, would also appear).
         */
        "hideMessages": boolean;
        /**
          * Each item in the `hints` array will appear below the input field when the field is focused.
          * @info The `errors` array takes precedence over the `hints` array. If an input field has both hints and errors, only the errors will display. Once all errors are resolved, the hints display the next time the field is focused.
          * @localizable
         */
        "hints": string[];
        /**
          * Shows a left-aligned [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) within the field.
         */
        "iconLeft": Q2Icon['type'];
        /**
          * Shows a right-aligned [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) within the field.
         */
        "iconRight": Q2Icon['type'];
        /**
          * The label that appears above the field. This is announced by screen readers when the field is focused.
          * @localizable
         */
        "label": string;
        /**
          * When present, it does not allow a value greater than `max` when the user uses the Up/Down arrow keys to change the value.
          * @info Only applicable when `type="number"`.
         */
        "max": number;
        /**
          * Defines the maximum allowed input length in characters. Formatting characters (e.g. `.`, `-`, etc) are included in the `maxlength` comparison. Make sure you account for them when setting the `maxlength` value. Input types that use masks have their own inherent `maxlength`.
         */
        "maxlength": number;
        /**
          * When present, it does not allow a value less than the `min` when the user uses the Up/Down arrow keys to change the value.
          * @info Only applicable when `type="number"`.
         */
        "min": number;
        /**
          * Appends "(optional)" to the field label, and sets `aria-required` on the nested input tag to `false`.
         */
        "optional": boolean;
        /**
          * 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;
        /**
          * Text that appears within the field when it is blurred and empty. Placeholder text disappears when the user focuses on the field and provides input.
          * @info Primarily used for rare cases in which a visible form label is not expected (e.g., search fields).
          * @localizable
         */
        "placeholder": string;
        /**
          * Component will display as a clickable `<button>` styled to be identical to the default `<input>` field.
         */
        "pseudo": boolean;
        /**
          * Appends "(read only)" to the field label, and field becomes unusable, but remains focusable. Takes priority over `optional` if both are `true`.
         */
        "readonly": boolean;
        /**
          * Indicates the element's intended purpose to assistive technology.
          * @deprecated
         */
        "role": string;
        /**
          * Emulates focusing the `<input>`, entering the provided value, and emitting an `input` event.  This method leaves the focus on the `<input>` and as a result does not trigger the `change` event. If you want to trigger the` change` event, move the focus to another element after calling this method.
          * @testOnly
         */
        "setValue": (value: string) => Promise<void>;
        /**
          * Shows a character counter above the input field to track the number of characters currently in the field. If `maxlength` is set, `showCount` displays the number of characters in relation the `maxlength` value.
         */
        "showCount": boolean;
        /**
          * Displays a toggle button at the end of the input field which shows or hides the actual value.
          * @info Applicable when `type` is `text`, `password`, `ssn`, or `tin`, or when `visibleLastCount` is set.
          * @default false
         */
        "showVisibilityToggle": boolean;
        /**
          * When present, it jumps the value in increments of `step` when the user uses the Up/Down arrow keys to change the value.
          * @info Only applicable when `type="number"`.
         */
        "step": number;
        /**
          * Controls visibility of the value. When `visibleLastCount` is set, hidden values keep the specified number of trailing characters visible. When the input type is `password`, it will default to `true`, hiding the text.
         */
        "textHidden": boolean;
        /**
          * Specifies the field's expected [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.
          * @default 'text'
         */
        "type": InputType;
        /**
          * Displays a success state icon when the field does not have active errors.
          * @default false
         */
        "valid": boolean;
        /**
          * 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.
          * @info The visible value of formatted input fields may not match the element's `value` property. When setting an input's value programmatically (e.g. pre-populating a form), ensure that the supplied value is in a format that can be handled by its consuming logic. `q2-input` updates its own `value` through its default input and change event handlers.  In `q2-input` where `type="currency"` - element.value = 1234.56 - visible value: $1,234.56
         */
        "value": string;
        /**
          * Controls the number of trailing characters that remain visible when the field value is masked by `textHidden` or the visibility toggle. The element's `value` and emitted event details remain unmasked.
         */
        "visibleLastCount": number;
    }
    /**
     * @name Item
     * @category Display
     * @summary Use for laying out structured content with header, body, and footer text, icons, and actions.
     */
    interface Q2Item {
        /**
          * Makes the item clickable.
         */
        "clickable": boolean;
        /**
          * Controls the vertical alignment of the item decorator and single content slot.
          * @default 'top'
         */
        "verticalAlign": 'top' | 'center' | 'bottom';
    }
    /**
     * @name Legend
     * @category Data Visualization
     * @summary Use for displaying chart legends with interactive item selection.
     */
    interface Q2Legend {
        /**
          * Controls when numbers displayed as currency, if they are whole numbers, they will not include the .00.
         */
        "currencyRound": boolean;
        /**
          * An array of objects that contain the data to be displayed.
          * @default []
         */
        "data": DonutChartData[];
        /**
          * The format of the value displayed in the legend.
          * @default 'default'
         */
        "format": 'default' | 'currency';
        /**
          * The id of the item to set as hovered.
          * @default null
         */
        "hoveredItemId": string;
        /**
          * The id of the item to set as selected.
          * @default null
         */
        "selectedItemId": string;
    }
    /**
     * @name Link
     * @category Display
     * @summary Use for navigation to other pages or sections. Prefer over q2-btn for non-action navigation.
     */
    interface Q2Link {
        /**
          * @private Tooltip text set by a parent q2-tooltip component for accessibility.
         */
        "_tooltip": string;
        /**
          * A method for click.
          * @testOnly
         */
        "clickLink": () => Promise<void>;
        /**
          * Determines whether the component and `tctClick` event are disabled.
          * @default false
         */
        "disabled": boolean;
        /**
          * If `true`, the label will be truncated with an ellipsis when it's too long.
          * @default false
         */
        "ellipsis": boolean;
        /**
          * If `true`, it takes up 100% width.
         */
        "fullWidth": boolean;
        /**
          * The link when clicked.
          * @default 'javascript:void(0)'
         */
        "href": string;
        /**
          * The [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to display when `variant` is set to "standalone".
         */
        "iconType": string;
        /**
          * The displayed label to represent your link.
         */
        "label": string;
        /**
          * How much of the referrer to send when following the link. [See MDN for more information on referrerpolicy](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).
         */
        "referrerpolicy": ReferrerPolicy;
        /**
          * Where to display the linked URL. [See MDN for more information on target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).
         */
        "target": string;
        /**
          * Applies a `title` attribute to the anchor tag in the shadowRoot of the component.
         */
        "tctTitle": string;
        /**
          * Determines the visual display style of the link.
          * @default 'inline'
         */
        "variant": string;
    }
    /**
     * @name List
     * @category Display
     * @summary Use for grouping Item components into a vertical list.
     */
    interface Q2List {
        /**
          * Adds a border between each items
         */
        "bordered": boolean;
        /**
          * label text on header area
         */
        "label": string;
    }
    /**
     * @name Loading
     * @category Feedback
     * @summary Use to indicate async operations or content loading in progress.
     */
    interface Q2Loading {
        /**
          * @deprecated
         */
        "ariaLabel": string;
        /**
          * Numeric adjustments are available for specific `type` and `shape` combinations. These may impact the number of items, columns, and/or rows that display.  When `shape="text"`, `shape="detailed-item"`, or `shape="label-value"`, the `counts` attribute determines the number of rows to display.  When `shape="table"`, the `counts` attribute can be used in two ways:  1. `counts="CxR"` = Provides a skeleton table of `C` columns and `R` rows. The default value is `"5x5" 2. `counts="N"` - Provides a skeleton table of `N` columns and 5 rows.  When `shape="form"`, the `counts` attribute can be used in two ways:  1. `counts="CxR" - Provides a skeleton form of `C` columns and `R` rows of fields. The default value is `"1x1"`. 2. `counts="N"` - Provides a skeleton form of `N` fields stacked in single columns.
         */
        "counts": string;
        /**
          * Hides the loading element from screen readers.
          * @default false
         */
        "hideFromScreenReaders": boolean;
        /**
          * Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text.
         */
        "inline": boolean;
        /**
          * The label that is associated with the component. This is not displayed visually but is presented by screen readers.
          * @localizable
         */
        "label": string;
        /**
          * Visual adjustments available to specific type and shape combinations, written as a hyphen (`-`) separated string.  Supported values depend on the type and shape selected, and are listed in detail in the shape sections above.
         */
        "modifiers": string;
        /**
          * The specific visual presentation of a loading element `type`.
          * @snippet // when type="spinner" type ShapeValues = "half-circle"; // when type="skeleton" type ShapeValues = "circle | "rectangle" | "text" | "table" | "field" | "form" | "detailed-item" | "label-value";
         */
        "shape": string;
        /**
          * The type of loading element to display.
         */
        "type": 'brand' | 'spinner' | 'skeleton';
    }
    interface Q2LoadingElement {
        "borderRadius": string;
        "height": string;
        "shape": string;
        "width": string;
    }
    /**
     * @name Localization
     * @category Text
     * @summary Use for displaying localized text from translation keys.
     */
    interface Q2Loc {
        /**
          * When true, allows HTML tags in the localized string to be rendered as HTML.
          * @warning Only use this with trusted localization strings, as it uses innerHTML and may expose XSS vulnerabilities. See the FAQ "Can I add HTML to my localization strings?" for usage guidance.
          * @default false
         */
        "ignoreTag": boolean;
        /**
          * Any substitutions you would like to pass into the localization string.
         */
        "substitutions": string[];
        /**
          * The reference to the localization key you would like to display the localized output of. If no value is provided, any text inside the element will be used as a fallback.
          * @localizable
         */
        "value": string;
    }
    /**
     * @name Message
     * @category Feedback
     * @summary Use for contextual non-blocking notifications like success, error, or info alerts.
     */
    interface Q2Message {
        /**
          * The visual style of the message. The minimal style is for use cases where you have less space to display information.
          * @default 'standard'
         */
        "appearance": 'minimal' | 'standard';
        /**
          * Determines whether or not assistive technology immediately presents the content to the user, via the `aria-live` attribute.
          * @default false
         */
        "description": boolean;
        /**
          * Prompts assistive technology to announce the message.
         */
        "present": () => Promise<void>;
        /**
          * The type of message to display on the screen.
          * @default 'info'
         */
        "type": 'info' | 'error' | 'danger' | 'warning' | 'success';
    }
    /**
     * @name Meter
     * @category Data Visualization
     * @summary Use for showing progress or a value within a known range.
     */
    interface Q2Meter {
        /**
          * Shows loading animation for bars, default is true.
          * @default true
         */
        "animated": boolean;
        /**
          * Defines the label for the completed bar, which appears at the bottom in the legend section.
          * @localizable
         */
        "completedLabel": string;
        /**
          * Defines the value for the completed bar.
         */
        "completedValue": string;
        /**
          * Defines the description for the meter, which appears at the top just below the label.
          * @localizable
         */
        "description": string;
        /**
          * Shows a circle shaped dot indicator on completed bar, default is true.
          * @default true
         */
        "dotted": boolean;
        /**
          * Hide tooltips.
          * @localizable
         */
        "hideTooltip": boolean;
        /**
          * Defines the label for the meter, which appears at the top.
          * @localizable
         */
        "label": string;
        /**
          * Defines the label for the base bar, which appears at the bottom in the legend.
          * @localizable
         */
        "maxLabel": string;
        /**
          * Defines the value for the base bar.
         */
        "maxValue": string;
        /**
          * Shows thin tick bars based on the number of segments provided.
         */
        "segments": number;
        /**
          * Defines the label for the suggested bar, which appears at the bottom in the legend.
          * @localizable
         */
        "suggestedLabel": string;
        /**
          * Defines the value for the suggested bar.
         */
        "suggestedValue": string;
        /**
          * Defines custom text for the completed bar tooltip.
          * @localizable
         */
        "tooltipCompleted": string;
        /**
          * Defines custom text for the suggested bar tooltip.
          * @localizable
         */
        "tooltipSuggested": string;
    }
    /**
     * @name Modal
     * @category Platform
     * @summary Use for focused interactions that require user attention before continuing.
     */
    interface Q2Modal {
        /**
          * Controls visibility of the close button and whether the modal can be dismissed with the backdrop or Escape key.
          * @default true
         */
        "closable": boolean;
        "closeModal": (data?: ModalResponse) => Promise<void>;
        /**
          * Allows HTML markup as modal content, but it will be sanitized for security purposes.
         */
        "customMarkup": string;
        /**
          * A plain text description of the modal. Use this to provide context or information to the user.
         */
        "description": string;
        /**
          * Whether the action buttons should take up the full width of the modal footer.
          * @default true
         */
        "fullWidthButton": boolean;
        /**
          * The icon to display at the top of the modal. [See Icon documentation](https://tecton.q2developer.com/design-system/q2-icon).
         */
        "icon": string;
        /**
          * An image URL to be displayed beneath the title. It renders with 100% width.
         */
        "imageSrc": string;
        "openModal": (option?: ModalOption) => Promise<void>;
        /**
          * A plain text title of the modal displayed at the top.
         */
        "title": string;
    }
    interface Q2MonthPicker {
        "disabledMonths": string[];
        "today": string;
        /**
          * @default Number(new Date().toLocaleString('en-US', { year: 'numeric' }))
         */
        "year": number;
    }
    /**
     * @name Mutation Observer
     * @category Utility
     * @summary Use for observing DOM changes to child elements and emitting events.
     */
    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;
    }
    /**
     * @name Option Group
     * @category Forms
     * @summary Use for grouping related options under a label in Select or Dropdown.
     */
    interface Q2Optgroup {
        /**
          * Determines whether all nested options are disabled.
          * @default false
         */
        "disabled": boolean;
        /**
          * Serves as the group header text.
         */
        "label": string;
    }
    /**
     * @name Option
     * @category Forms
     * @summary Use as a selectable item within Select, Dropdown, Tag, or Pill components.
     */
    interface Q2Option {
        /**
          * Disables child q2-option selectable state and removes the selector space.
          * @private 
          * @default false
         */
        "_hideSelectedBlock": boolean;
        /**
          * @default false
         */
        "_multiSelectHidden": boolean;
        /**
          * Used by q2-option-list to indicate the option is active
          * @private
         */
        "active": boolean;
        /**
          * Disables the option.
         */
        "disabled": boolean;
        /**
          * Used by consuming elements to disable all options in the group
          * @private
         */
        "disabledGroup": boolean;
        /**
          * The text that is displayed in the field when selected. If not provided, any text inside the element will be used.
          * @localizable
         */
        "display": string;
        /**
          * Used by consuming elements to enable multiline content support
          * @private
         */
        "multiline": boolean;
        /**
          * Used by q2-option-list to set a role on the option
          * @type {('option' | 'menuitem' | 'separator')}
          * @private 
          * @default 'option'
         */
        "role": string;
        /**
          * Used by q2-option-list to indicate the option is selected
          * @private 
          * @default false
         */
        "selected": boolean;
        /**
          * Renders a line in the item instead of text. Click events from these items will not have details provided. A `separator` allows for quick visual grouping of items, so interactions should not be bound to these options.
         */
        "separator": boolean;
        /**
          * Serves as the option's value.
         */
        "value": string;
    }
    /**
     * @name Option List
     * @category Forms
     * @summary Use internally by Select and Dropdown for rendering searchable option lists.
     */
    interface Q2OptionList {
        "align": 'left' | 'right';
        /**
          * Indicates a custom search is being implemented for the option list.
         */
        "customSearch": boolean;
        /**
          * Disables the option list.
         */
        "disabled": boolean;
        "getContents": () => Promise<(HTMLQ2OptgroupElement | ValidOptionElements)[]>;
        "getOptions": () => Promise<ValidOptionElements[]>;
        "handleExternalKeydown": (event: KeyboardEvent) => Promise<void>;
        /**
          * Determines the label that is applied to the option list for accessibility purposes.
          * @default loc('tecton.element.optionList.label')
         */
        "label": string;
        /**
          * Enables the multi-select ability for the option list.
          * @info Only applicable when options are provided.
         */
        "multiple": boolean;
        /**
          * Disables the logic that handles selecting and focusing an option in the option list.
         */
        "noSelect": boolean;
        /**
          * A list of the selected options on the element.
          * @default []
         */
        "selectedOptions": OptionValue[];
        "setActiveElement": (index: number) => Promise<void>;
        "setDefaultActiveElement": () => Promise<void>;
        /**
          * Applies focus to the selected option.
         */
        "showSelected": boolean;
        /**
          * Translates to the role of the option list
          * @default 'listbox'
         */
        "type": 'menu' | 'listbox';
    }
    /**
     * @name One-Time Password
     * @category Forms
     * @summary Use for entering a short one-time verification code.
     */
    interface Q2Otp {
        /**
          * Focuses the first one-time password field when the component loads.
          * @default false
         */
        "autoFocus": boolean;
        /**
          * Emits submission event when the last field is filled.
          * @default false
         */
        "autoSubmit": boolean;
        /**
          * Clears all fields, focuses the first field, and emits `tctClear`.
         */
        "clear": () => Promise<void>;
        /**
          * Clears all fields and returns focus to the first field when `state` becomes `error`.
          * @default false
         */
        "clearOnError": boolean;
        /**
          * Disables all one-time password fields.
          * @default false
         */
        "disabled": boolean;
        /**
          * Error message rendered below the submit area.
          * @localizable
         */
        "errorMessage": string;
        /**
          * Helper text content.
          * @localizable
         */
        "helperText": string;
        /**
          * Visible label above the one-time password fields.
          * @localizable
         */
        "label": string;
        /**
          * Number of one-time password fields. Use a number for ungrouped fields or an array for grouped fields with dash separators.
          * @default 6
         */
        "length": number | number[] | string[] | string;
        /**
          * Obscures entered characters.
          * @default false
         */
        "masked": boolean;
        /**
          * Button text during processing.
          * @localizable
         */
        "processingLabel": string;
        /**
          * Clears the component and resets error, success, and processing state.
         */
        "reset": () => Promise<void>;
        /**
          * Button text for the send-code action.
          * @localizable
         */
        "sendCodeLabel": string;
        /**
          * Toggles helper text visibility.
          * @default false
         */
        "showHelperText": boolean;
        /**
          * Toggles visibility of the send-code button while `state` is `ready`.
          * @default true
         */
        "showSendCode": boolean;
        /**
          * Sets the visual status for the one-time password fields.  - `ready` — Shows the send-code button when `showSendCode` is enabled and hides the input fields until the user   requests a code. - `error` — Displays an error style on the fields. If `errorMessage` is set, it renders below the submit area.   When `clearOnError` is enabled, all fields are cleared and focus returns to the first field. - `success` — Locks the input, replaces the submit button with a success indicator, and displays the   `successMessage` if provided. - `verifying` — Locks the input and puts the submit button into a loading state. When combined with `autoSubmit`,   a processing overlay with `processingLabel` is shown over the fields.
         */
        "state": 'error' | 'ready' | 'success' | 'verifying' | undefined;
        /**
          * Renders a submit button with this label.
          * @localizable
         */
        "submitLabel": string;
        /**
          * Success message rendered below the submit area.
          * @localizable
         */
        "successMessage": string;
        /**
          * The composed one-time password value.
          * @default ''
         */
        "value": string;
    }
    /**
     * @name Pagination
     * @category Display
     * @summary Use for navigating between pages of content like search results or tables.
     */
    interface Q2Pagination {
        /**
          * Indicates the horizontal alignment of pagination elements
          * @info When using the 'stacked' version, the default alignment is 'center'. When using the unstacked version, the default alignment is 'right'.
         */
        "align"?: 'left' | 'center' | 'right';
        /**
          * @deprecated Use 'align' instead
         */
        "alignment"?: 'left' | 'center' | 'right';
        /**
          * Determines whether the component uses dynamic resizing behavior. This is disabled when `pagesOnly`, `recordsOnly`, or `stacked` is true.
          * @default true
         */
        "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>;
        /**
          * 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.
         */
        "page": number;
        /**
          * The number of pages that can be displayed.
          * @info Only referenced when `pagesOnly` is true.
         */
        "pages": number;
        /**
          * Indicates to display only the current and total pages. This disables the `autoSize` feature.
         */
        "pagesOnly": boolean;
        /**
          * The total number of records displayed on each page. This disables the `autoSize` feature.
         */
        "perPage": number;
        /**
          * 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.
          * @info `pagesOnly` or `recordsOnly` being true disables this feature.  **Example:**
          * @snippet this.perPageIncrements = [10, 25, 50];
         */
        "perPageIncrements": number[] | string[] | string | undefined;
        /**
          * Description of the record type to be displayed alongside the record count.
         */
        "recordType": string;
        /**
          * 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>;
        /**
          * Allows the component to be displayed in a stacked layout. This disables the `autoSize` feature.
          * @info When set to true, the default alignment will be 'center'. When false, the default alignment is 'right'.
         */
        "stacked": boolean;
        /**
          * The total number of records to paginate.
         */
        "total": number;
    }
    /**
     * @name Pill
     * @category Display
     * @summary Use for displaying and removing active filters in data views.
     */
    interface Q2Pill {
        /**
          * Determine if the elements is in the selected state, with values.
         */
        "active": boolean;
        /**
          * Indicates that the pill has no border
         */
        "borderless": boolean;
        /**
          * Emulates clicking the `<button>` to hide the popover if it is visible.
          * @testOnly
         */
        "closePopover": () => Promise<void>;
        /**
          * Indicates the pill cannot be focused or interacted with.
         */
        "disabled": boolean;
        /**
          * Instructs the component to use the action sheet workflow for displaying its options.  For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).
          * @default !!window.Tecton?.useActionSheets
         */
        "hoist": boolean;
        /**
          * The text that populates the label.
          * @localizable
         */
        "label": string;
        /**
          * The maximum number of characters to display before ellipcizing.
          * @info Limitless by default.
         */
        "maxLength": number;
        /**
          * Enables the multi-select ability for the dropdown.
          * @info Only applicable when options are provided.
         */
        "multiple": boolean;
        /**
          * Determine whether the popover is open or closed.
          * @readonly
         */
        "open": boolean;
        /**
          * Emulates clicking the `<button>` to display the popover if it is hidden.
          * @testOnly
         */
        "openPopover": () => Promise<void>;
        /**
          * Determines the label that is applied to the option list for accessibility purposes.
         */
        "optionListLabel": string;
        /**
          * Aligns the popover dropdown to the left or right side of the input field.
          * @default 'right'
         */
        "popoverAlignment": 'left' | 'right';
        /**
          * 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 
          * @default 150
         */
        "popoverMinHeight": number;
        /**
          * A list of the selected options on the element.
          * @default []
         */
        "selectedOptions": OptionValue1[];
        /**
          * Emulates clicking the `<button>` to display the popover and selecting the option(s) with the specified value(s).  If multi-select is enabled and the `closePopover` argument is `true` (default), the popover will be closed after the option(s) are selected.
          * @testOnly
         */
        "setValue": (values: string | string[], options?: { closePopover?: boolean; }) => Promise<void>;
        /**
          * The color of the element when in the active state.
         */
        "theme": 'primary' | 'secondary' | 'tertiary';
        /**
          * The value emitted when the component is selected.
         */
        "value": string;
    }
    /**
     * @name Popover
     * @category Display
     * @summary Use for positioning floating content relative to a trigger element.
     */
    interface Q2Popover {
        /**
          * Aligns the popover to the left or right side of the control element.
          * @default 'left'
         */
        "align": 'left' | 'right';
        /**
          * Indicates the popover will match the width of its parent element.
         */
        "block": boolean;
        /**
          * The element that controls the popover's behavior.
         */
        "controlElement": HTMLElement;
        /**
          * 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
         */
        "minHeight": number;
        /**
          * @default null
         */
        "mode": 'legacy';
        /**
          * Controls whether the popover is open or closed.
         */
        "open": boolean;
        "scrollContainerTo": (options: ScrollToOptions) => Promise<void>;
        "toggle": () => Promise<void>;
    }
    /**
     * @name Radio
     * @category Forms
     * @summary Use as a single option within a Radio Group.
     */
    interface Q2Radio {
        /**
          * @deprecated
         */
        "ariaLabel": string;
        /**
          * The state of the radio. This modifies the visual appearance of the element.
          * @default false
         */
        "checked": boolean;
        /**
          * Disables the radio and prevents interaction.
          * @default false
         */
        "disabled": boolean;
        /**
          * Used by q2-radio-group to disable all options in the group
          * @private 
          * @default false
         */
        "groupDisabled": boolean;
        /**
          * Used by q2-radio-group to make all options in the group readonly
          * @private 
          * @default false
         */
        "groupReadonly": boolean;
        /**
          * Used by q2-radio-group to make the options display as tiles
          * @private 
          * @default false
         */
        "groupTileLayout": boolean;
        /**
          * Hides the field's `<label>` element from view.
          * @warning Only use when a visible label is impractical.
         */
        "hideLabel": boolean;
        /**
          * The text that describes the individual radio option.
          * @localizable
         */
        "label": string;
        /**
          * Used by q2-radio-group to apply a name to all options in the group
          * @private
         */
        "name": string;
        /**
          * The radio is non-interactive, but remains focusable.
         */
        "readonly": boolean;
        /**
          * @private 
          * @default 0
         */
        "tabIndex": number;
        /**
          * The value that is returned in the `change` event that is emitted from the `q2-radio-group`.
         */
        "value": string;
    }
    /**
     * @name Radio Group
     * @category Forms
     * @summary Use for selecting exactly one option from a small set of choices.
     */
    interface Q2RadioGroup {
        /**
          * Determines if all radios in the group are put into a `disabled` state.
          * @default false
         */
        "disabled": boolean;
        /**
          * Determines if the component should display in an errant state.
          * @default false
         */
        "hasError": boolean;
        /**
          * Hide's the group's `<label>` element from view.
          * @warning Only use when a visible label is impractical.
         */
        "hideLabel": boolean;
        /**
          * Text for the fieldset legend describing the radio group.
          * @localizable
         */
        "label": string;
        /**
          * Identifier which ties all radios together for accessibility and DOM selection.
         */
        "name": string;
        /**
          * Appends "(optional)" to the group label, and sets `aria-required` on the nested input tag to `false`.
         */
        "optional": boolean;
        /**
          * The layout direction of radio options when `tileLayout` is not enabled.
          * @default 'vertical'
         */
        "orientation": 'vertical' | 'horizontal';
        /**
          * The width, in pixels, below which a horizontal non-tile layout displays vertically.
          * @info The component determines this based on its own width, not the browser window.
          * @default 440
         */
        "orientationThreshold": number;
        /**
          * Determines if all radios in the group can be focused, but not interacted with.
         */
        "readonly": boolean;
        /**
          * Emulates clicking the `<q2-radio>` option with the provided value.
          * @testOnly
         */
        "setValue": (value: string) => Promise<void>;
        /**
          * Provides alignment direction for tile-style radio group.
          * @default 'center'
         */
        "tileAlignment": 'left' | 'center' | 'right';
        /**
          * Show the radio group as a horizontal set of tiles.
         */
        "tileLayout": boolean;
        /**
          * @deprecated
         */
        "tilelayout": boolean;
        /**
          * The `value` of the currently selected `q2-radio` within the `q2-radio-group`.
         */
        "value": string;
    }
    /**
     * @name Relative Time
     * @category Text
     * @summary Use for displaying time differences like "2 hours ago" or "in 3 days".
     */
    interface Q2RelativeTime {
        /**
          * If you want to display the length of time between two specific dates, you can provide a valid `date` and `baseDate`, and the component will display the length of time between the two dates.  If `baseDate` is not provided, the date and time at render will be used instead and - if `sync` is true - updated every second to reflect the time between the `date` value and the time at render.
          * @warning - Requires a valid `date` value. - If the provided `baseDate` is invalid, the component will display "Invalid Date" and a warning message will be printed in the console. - Providing a valid `baseDate` will disable `sync` and remove the "in"/"ago" suffixes in the time message. - Must be a valid ISO date string.
         */
        "baseDate": Date | string;
        /**
          * The date you want to calculate relative time from.
          * @warning - Must be a valid ISO date string. - If the provided `date` is invalid, the component will display "Invalid Date" and a warning message will be printed in the console.
         */
        "date": Date | string;
        /**
          * Retrieves the value of the displayed messages.
         */
        "displayedMessageValue": () => Promise<string>;
        /**
          * The language used for the displayed message.
          * @info It is recommended to use the BCP 47 Language Tags in the ["language-extlang" format](https://www.w3.org/International/articles/language-tags/).
          * @default document.documentElement.lang || 'en-US'
         */
        "locale": string;
        /**
          * The length of the relative time message.
          * @default 'short'
         */
        "messageFormat": 'long' | 'short' | 'narrow';
        /**
          * Determines if the displayed message will use numeric or relative values.
          * @info  Set this property to `always` to force the use of numeric values (e.g. "1 day ago") rather than relative ones (e.g. "yesterday").
          * @default 'auto'
         */
        "numeric": 'always' | 'auto';
        /**
          * Keep the displayed message updated as time passes in the webpage.
          * @warning If a valid `baseDate` is provided, `sync` will be set to `false`.
          * @default true
         */
        "sync": boolean;
        /**
          * Enforces the use of the provided unit of measurement in the displayed message.
         */
        "unit": 'second' | 'minute' | 'hour' | 'day' | 'month' | 'quarter' | 'year';
        /**
          * Checks the provided baseDate prop is a valid date.
         */
        "validBaseDateProp": () => Promise<boolean>;
        /**
          * Checks the provided date prop is a valid date.
         */
        "validDateProp": () => Promise<boolean>;
    }
    /**
     * @name Resize Observer
     * @category Utility
     * @summary Use for detecting size changes to elements and emitting resize events.
     */
    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[]>;
    }
    /**
     * @name Search
     * @category Forms
     * @summary Use for search-first selection where the option list is driven by user input — supports both in-memory filtering and async fetch.
     */
    interface Q2Search {
        /**
          * Renders an icon button when the field is non-empty. Pressing the button clears the query and selection.
          * @default true
         */
        "clearable": boolean;
        /**
          * Closes the popover.
          * @testOnly
         */
        "closePopover": () => Promise<void>;
        /**
          * Disables all interaction with the field and leverages the disabled visual style of `q2-input`.
          * @default false
         */
        "disabled": boolean;
        /**
          * The presence of `errors` will mark the field as invalid, putting it into an error state.
          * @localizable
         */
        "errors": string[];
        /**
          * When `true`, the component case-insensitively matches each `<q2-option>`'s `display` and `innerText` against the current query and toggles `hidden`. When `false` (default), the consumer is expected to filter or fetch options in response to the `tctInput` event.
          * @default false
         */
        "filter": boolean;
        /**
          * Hides the field's `<label>` element from view.
          * @warning Only use when a visible label is impractical.
          * @default false
         */
        "hideLabel": boolean;
        /**
          * Determines whether to show an error state. Its primary use-case is for an unfilled field.
         */
        "invalid": boolean;
        /**
          * The text that will be used as the label for the field.
          * @localizable
         */
        "label": string;
        /**
          * Determines the label that is applied to the option list for accessibility purposes.
          * @localizable 
          * @default 'tecton.element.search.listLabel'
         */
        "listLabel": string;
        /**
          * Opens the popover and shows a spinner inside it until results populate. The clear button is suppressed while loading.
          * @default false
         */
        "loading": boolean;
        /**
          * The minimum number of rows the component will try to display below or above the component when opened.
          * @default 3
         */
        "minRows": number;
        /**
          * Enables text wrapping for `q2-option` elements. When `false`, the text truncates and does not wrap.
          * @default false
         */
        "multilineOptions": boolean;
        /**
          * Enables multi-select functionality.
          * @default false
         */
        "multiple": boolean;
        /**
          * The message displayed when the popover is open and no options are visible. Overridden by the `empty` slot.
          * @localizable 
          * @default 'tecton.element.search.noResults'
         */
        "noResultsMessage": string;
        /**
          * Opens the popover.
          * @testOnly
         */
        "openPopover": () => Promise<void>;
        /**
          * Appends "(optional)" to the field label, and sets `aria-required` on the nested input tag to `false`.
          * @default false
         */
        "optional": boolean;
        /**
          * Text that appears within the field when it is blurred and empty.
          * @localizable
         */
        "placeholder": string;
        /**
          * Aligns the popover dropdown to the left or right side of the input. Requires the `--tct-popover-width` CSS custom property to be set on the host; without it q2-search logs a warning and renders the popover at input-width (the default behavior). When the viewport is narrower than the defined width, q2-search transparently falls back to input-width so the popover never overflows the viewport.
         */
        "popoverAlignment": 'left' | 'right';
        /**
          * Force the maximum height of the popover. Interpreted as pixels. If unset or exceeds available space, the component auto-detects the maximum height.
         */
        "popoverMaxHeight": number;
        /**
          * Appends "(read only)" to the field label, and field becomes unusable but remains focusable. Takes priority over `optional` if both are `true`.
          * @default false
         */
        "readonly": boolean;
        /**
          * Resets the search to its initial state: clears the input, the selection, and closes the popover. Use this from consumers that treat selection as a one-shot trigger (e.g. navigation) rather than a committed form value.  Emits `tctInput` with an empty query so listeners can reconcile. Emits `tctClose` as a side effect of closing the popover if it is open. Does not emit `tctChange`.
         */
        "reset": () => Promise<void>;
        /**
          * Programmatically focuses the input, sets its value, and emits `tctInput`.
          * @testOnly
         */
        "searchOptions": (query: string) => Promise<void>;
        /**
          * Each item in this array should correspond to the value of a `q2-option` element. Only relevant for `multiple` (multi-select) implementations.
          * @default []
         */
        "selectedOptions": string[];
        /**
          * Selects the option(s) with the specified value(s). If multi-select is enabled and `closePopover` is `true` (default), the popover closes after selection.
          * @testOnly
         */
        "setValue": (values: string | string[], options?: { closePopover?: boolean; }) => Promise<void>;
        /**
          * Renders a header inside the popover with a toggle to switch between viewing search results and only the selected options. Only applies to `multiple` (multi-select).
          * @default false
         */
        "showSelectedToggle": boolean;
        /**
          * The current value for the search. Should correspond to the value of a nested `q2-option` element. Only relevant for single-select implementations.
         */
        "value": string;
    }
    /**
     * @name Section
     * @category Display
     * @summary Use for grouping related content with a header and optional collapse.
     */
    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.
         */
        "expanded": boolean;
        /**
          * The text to display above the `q2-section`. Renders as an `<h2>` element.  It is also used to provided an `aria-label` for the toggle button when the component is collapsible.
          * @warning If you are providing a custom header, setting this property is still strongly encouraged for the purposes of accessibility.
         */
        "label": string;
        /**
          * Determines if the collapse chevron icon should show in the `q2-section` header.
         */
        "noCollapseIcon": boolean;
    }
    /**
     * @name Section Container
     * @category Display
     * @summary Use for managing multiple collapsible sections with single or multiple open modes.
     */
    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.
         */
        "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;
    }
    /**
     * @name Select
     * @category Forms
     * @summary Use for choosing from a known list of options with single-select or multi-select.
     */
    interface Q2Select {
        /**
          * @deprecated
         */
        "ariaLabel": string;
        /**
          * Renders an icon button when the field is non-empty. Pressing the button clears all input from the field.
         */
        "clearable": boolean;
        /**
          * Emulates clicking the `<input>` to hide the popover if it is visible.
          * @testOnly
         */
        "closePopover": () => Promise<void>;
        /**
          * Disables all interaction with the field and leverages the disabled visual style of `q2-input`.
          * @default false
         */
        "disabled": boolean;
        /**
          * The presence of `errors` will mark the field as invalid, putting it into an error state.
          * @localizable
         */
        "errors": string[];
        /**
          * Hide's the field's `<label>` element from view.
          * @warning Only use when a visible label is impractical.
         */
        "hideLabel": boolean;
        /**
          * Instructs the component to use the action sheet workflow for displaying its options.  For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).
          * @warning If your `q2-select` renders inside of an iframe, and you are using multiline/robust content options, any custom CSS you apply to your options will not get passed up to the platform which displays the action sheet. For this reason, we strongly suggest using the [q2-card](https://tecton.q2developer.com/design-system/q2-card/) component since its styling is managed by Tecton.
          * @default !!window.Tecton?.useActionSheets
         */
        "hoist": boolean;
        /**
          * Determines whether to show an error state. Its primary use-case is for an unfilled field.
         */
        "invalid": boolean;
        /**
          * The text that will be used as the label for the field.
          * @localizable
         */
        "label": string;
        /**
          * Determines the label that is applied to the option list for accessibility purposes.
          * @localizable 
          * @default loc('tecton.element.select.listLabel')
         */
        "listLabel": string;
        /**
          * The minimum number of rows the component will try to display below or above the component when opened.
          * @default 3
         */
        "minRows": number;
        /**
          * Enables text wrapping for `q2-option` elements. When `false`, the text truncates and does not wrap.
          * @default false
         */
        "multilineOptions": boolean;
        /**
          * Enables multi-select functionality.
          * @default false
         */
        "multiple": boolean;
        /**
          * Emulates clicking the `<input>` to display the popover if it is hidden.
          * @testOnly
         */
        "openPopover": () => Promise<void>;
        /**
          * Appends "(optional)" to the field label, and sets `aria-required` on the nested input tag to `false`.
          * @default false
         */
        "optional": boolean;
        /**
          * Text that appears within the field when it is blurred and empty. Placeholder text disappears when the user selects an option.
          * @localizable
         */
        "placeholder": string;
        /**
          * @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.
          * @default null
         */
        "popoverMode": 'legacy';
        /**
          * Appends "(read only)" to the field label, and field becomes unusable, but remains focusable. Takes priority over `optional` if both are `true`.
          * @default false
         */
        "readonly": boolean;
        /**
          * Emulates focusing the `<input>`, entering the provided value, and emitting an `input` event.
          * @warning Only applicable when the input is searchable.
          * @testOnly
         */
        "searchOptions": (query: string) => Promise<void>;
        /**
          * Enables search functionality.
          * @warning `searchable` is not compatible with the `hoist` prop. The action sheet workflow used when `hoist` is `true` does not support in-list search filtering. If both are set, `searchable` has no effect while the action sheet is active.
          * @default false
         */
        "searchable": boolean;
        /**
          * Each item in this array should correspond to the value of a `q2-option` element. This property is only relevant for `multiple` (i.e., multi-select) implementations.
          * @default []
         */
        "selectedOptions": string[];
        /**
          * Emulates clicking the `<input>` to display the popover and selecting the option(s) with the specified value(s).  If the multi-select is enabled and the `closePopover` argument is `true` (default), the popover will be closed after the option(s) are selected.
          * @testOnly
         */
        "setValue": (values: string | string[], options?: { closePopover?: boolean; }) => Promise<void>;
        /**
          * Determines whether to show a success state. The error state takes precedence when both are set.
          * @default false
         */
        "valid": boolean;
        /**
          * The current value for the select. This should correspond to the value of a nested q2-option element. This property is only relevant for single-select implementations.
         */
        "value": string;
    }
    /**
     * @name Stepper
     * @category Display
     * @summary Use for guiding users through a multi-step workflow with horizontal progress.
     */
    interface Q2Stepper {
        /**
          * The currently selected step.
         */
        "currentStep": number;
        /**
          * The last step the user may navigate to.
          * @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
         */
        "stepCount": number;
    }
    /**
     * @name Stepper Pane
     * @category Display
     * @summary Use as a single step within a Stepper or Vertical Stepper.
     */
    interface Q2StepperPane {
        /**
          * The description for the pane.
          * @localizable
         */
        "description": string;
        /**
          * Disables the pane's step button in the stepper, preventing user interaction.
         */
        "disabled": boolean;
        /**
          * Used by q2-stepper and q2-stepper-vertical to determine which pane is active
          * @private
         */
        "isActive": boolean;
        /**
          * The label for the pane.
          * @localizable
         */
        "label": string;
        /**
          * Indicates to display the content of the pane when one of its children is selected.
          * @info Currently only supported in the `<q2-stepper-vertical>` component.
         */
        "showWithChildren": boolean;
        /**
          * The status of the pane.
         */
        "status": 'complete' | 'error' | 'locked';
    }
    /**
     * @name Vertical Stepper
     * @category Display
     * @summary Use for guiding users through a multi-step workflow with vertical progress.
     */
    interface Q2StepperVertical {
        /**
          * The `id` of the currently selected `q2-stepper-pane`.
         */
        "currentStepId": string;
        /**
          * A method to select a step corresponding with the step id.
          * @testOnly
         */
        "selectStep": (stepId: string) => Promise<void>;
    }
    /**
     * @name Surface
     * @category Display
     * @summary An unopinionated visual primitive. A plain block by default that gains visual treatment via attributes.
     */
    interface Q2Surface {
        /**
          * Applies a background color from the design-system token palette. When unset, the surface is transparent.
         */
        "background"?: 'default' | 'primary' | 'secondary' | 'tertiary' | 'gray';
        /**
          * Applies a gradient fade across the background.
          * @info Direction and colors are customizable via CSS custom properties.
          * @default false
         */
        "backgroundGradient": boolean;
        /**
          * Renders a visible border around the surface, optionally in a themed color.
         */
        "border"?: 'default' | 'primary' | 'secondary' | 'tertiary' | 'gray';
        /**
          * Renders the border as a gradient using the color set by the `border` prop. Takes precedence over a solid `border` when both are set.
          * @info Requires `border` to be set to produce a colored gradient. Without `border`, falls back to the default border color.
          * @default false
         */
        "borderGradient": boolean;
        /**
          * Makes the surface interactive, responding to clicks.
          * @info Emits `tctClick` when clicked.
          * @default false
         */
        "clickable": boolean;
        /**
          * Gives the component a drop shadow.
          * @info 0 means no shadow; higher values appear more elevated.
          * @default 0
         */
        "elevation": 0 | 1 | 2 | 3 | 4 | 5;
        /**
          * Adds internal padding applied uniformly on all sides.
          * @info Individual axes can be overridden with `inset-x` and `inset-y`.
          * @default 'none'
         */
        "inset": 'none' | 'compact' | 'normal' | 'comfortable';
        /**
          * Adds horizontal padding, overriding the horizontal component of `inset`.
         */
        "insetX"?: 'none' | 'compact' | 'normal' | 'comfortable';
        /**
          * Adds vertical padding, overriding the vertical component of `inset`.
         */
        "insetY"?: 'none' | 'compact' | 'normal' | 'comfortable';
        /**
          * Adds corner rounding on a scale from 0 (sharp) to 5 (most rounded).
          * @default 0
         */
        "radius": 0 | 1 | 2 | 3 | 4 | 5;
        /**
          * Triggers a named animation on the surface. If an animation is already running, cancels it before starting the new one.
          * @param animation The animation to play. Defaults to `'pulse'`.
          * @returns A Promise that resolves when the animation finishes or is cancelled.
         */
        "triggerAnimation": (animation?: "bounce" | "flash" | "pulse" | "tada") => Promise<void>;
    }
    /**
     * @name Tab Container
     * @category Display
     * @summary Use for switching between multiple views within the same context.
     */
    interface Q2TabContainer {
        /**
          * Controls which variables are used to color the tab controls.  - `undefined` (default)   - Uses `--t-tab-active` and `--t-tab-inactive`. - `alt`   - Uses `--t-tab-alt-active` and `--t-tab-alt-inactive`.   - The default fallback for these variables is `inherit`.
         */
        "color": 'alt' | undefined;
        /**
          * Used to establish a relationship between `q2-tab-container` and its associated tab panes.
          * @warning The element can fail if this property is not set. Nested tab containers without the `name` property will not render correctly.
         */
        "name": string;
        /**
          * Controls visibility of tab list in a print view. Tab content will still be visible even if `noPrint` is true.
          * @default false
         */
        "noPrint": boolean;
        /**
          * The orientation of the tab strip. - `horizontal` (default) — tabs run left-to-right above the panel content. - `vertical` — tabs stack top-to-bottom beside the panel content.
          * @info Vertical orientation is intended for wider layouts (e.g. admin consoles). At viewports narrower than 768px, the component falls back to horizontal.
          * @default 'horizontal'
         */
        "orientation": 'horizontal' | 'vertical';
        /**
          * 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.
         */
        "type": 'main' | 'section';
        /**
          * Corresponds to the value of the selected tab pane.
         */
        "value": string;
    }
    /**
     * @name Tab Pane
     * @category Display
     * @summary Use as a single tab within a Tab Container.
     */
    interface Q2TabPane {
        /**
          * Adds a `q2-badge` component with the number provided right next to the tab pane label.
         */
        "badgeCount": number;
        /**
          * The text that will be pronounced alongside `badgeCount` when the screen reader presents the tab.
          * @localizable
         */
        "badgeDescription": string;
        /**
          * Allows you to specify the status of the tab, which is always visible.
         */
        "badgeStatus": Q2Badge['status'];
        /**
          * Allows you to specify the color of the badge when the tab is active.
         */
        "badgeTheme": Q2Badge['theme'];
        /**
          * Used by q2-tab-container to apply a unique id to each tab pane
          * @private
         */
        "guid": number;
        /**
          * Used by q2-tab-container to indicate the pane's index
          * @private
         */
        "index": number;
        /**
          * Serves as the text that will be visible in the tab control provided by `q2-tab-container`.
          * @localizable
         */
        "label": string;
        /**
          * Used by q2-tab-container to apply a name to all options in the group
          * @private
         */
        "name": string;
        /**
          * Used by q2-tab-container to indicate the option is selected
          * @private
         */
        "selected": boolean;
        /**
          * Serves as the pane's value. Should correspond to the `q2-tab-container` value.
         */
        "value": string;
    }
    /**
     * @name Tag
     * @category Display
     * @summary Use for displaying metadata labels or categories on content.
     */
    interface Q2Tag {
        /**
          * Emulates clicking the tag to close the popover when options are provided and the popover is open.
          * @testonly
         */
        "closePopover": () => Promise<void>;
        /**
          * Instructs the component to use the action sheet workflow for displaying its options.  For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).
          * @default !!window.Tecton?.useActionSheets
         */
        "hoist": boolean;
        /**
          * The text that populates the label.
          * @localizable
         */
        "label": string;
        /**
          * Determine whether the popover is open or closed.
          * @readonly
         */
        "open": boolean;
        /**
          * Emulates clicking the tag to open the popover when options are provided and the popover is closed.
          * @testonly
         */
        "openPopover": () => Promise<void>;
        /**
          * Determines the label that is applied to the option list for accessibility purposes.
          * @default 'options'
         */
        "optionListLabel": string;
        /**
          * Aligns the popover dropdown to the left or right side of the input field.
          * @default 'right'
         */
        "popoverAlignment": 'left' | 'right';
        /**
          * 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
         */
        "popoverMinHeight": number;
        /**
          * Emulates selecting an option matching the passed value.  If the popover is closed, this will open it before selecting the option.  If there are not options, or the passed value does not match any option's value, this method does nothing.
          * @testonly
         */
        "selectOption": (value: any) => Promise<void>;
        /**
          * The color of the element.
         */
        "theme": 'primary' | 'secondary' | 'tertiary';
    }
    /**
     * @name Textarea
     * @category Forms
     * @summary Use for multi-line text input like messages, comments, or lengthy descriptions.
     */
    interface Q2Textarea {
        /**
          * Defines the number of columns displayed in the field. If not set, the field will be full-width and respond to the window size.
         */
        "cols": number;
        /**
          * Indicates the field cannot be focused or interacted with.
         */
        "disabled": boolean;
        /**
          * Each item in the `errors` array will appear below the input field when the field is focused.
          * @localizable
         */
        "errors": string[];
        /**
          * Hide's the field's `<label>` element from view.
          * @warning Only use when a visible label is impractical.
         */
        "hideLabel": boolean;
        /**
          * When `true` and the input field has an active validation error, the field shows the error state without displaying associated error messages below the field (from the errors array above). Primarily used for dropdown selects and date pickers whose controls appear below the input field (where the error messages, if displayed, would also appear).
         */
        "hideMessages": boolean;
        /**
          * Each item in the `hints` array will appear below the input field when the field is focused.
          * @info The `errors` array takes precedence over the `hints` array. If an input field has both hints and errors, only the errors will display. Once all errors are resolved, the hints display the next time the field is focused.
          * @localizable
         */
        "hints": string[];
        /**
          * The label that appears above the field. This is announced by screen readers when the field is focused.
          * @localizable
         */
        "label": string;
        /**
          * Defines the maximum allowed input length in characters. Formatting characters (e.g. `.`, `-`, etc) are included in the `maxlength` comparison. Make sure you account for them when setting the `maxlength` value.
          * @info Please set the `rows` attribute in correlation with `maxlength` to show as much text as possible in the field viewport.
         */
        "maxlength": number;
        /**
          * Appends "(optional)" to the field label, and sets `aria-required` on the nested input tag to `false`.
         */
        "optional": boolean;
        /**
          * Text that appears within the field when it is blurred and empty. Placeholder text disappears when the user focuses on the field and provides input.
          * @info Primarily used for rare cases in which a visible form label is not expected (e.g., search fields).
          * @localizable
         */
        "placeholder": string;
        /**
          * Appends "(read only)" to the field label, and field becomes unusable, but remains focusable. Takes priority over `optional` if both are `true`.
         */
        "readonly": boolean;
        /**
          * Indicates how the field is resizable.
          * @default 'vertical'
         */
        "resize": 'none' | 'vertical' | 'horizontal' | 'both' | 'vertical-auto';
        /**
          * Defines the number of rows displayed in the field.
         */
        "rows": number;
        /**
          * Emulates focusing the `<textarea>`, centering the provided value, and emitting an `input` event.  This method leaves the focus on the `<textarea>` and as a result does not trigger the `change` event. If you want to trigger the `change` event, move the focus to another element after calling this method.
          * @testOnly
         */
        "setValue": (value: string) => Promise<void>;
        /**
          * Determines whether the field is subject to spell-checking by the underlying browser or OS.
         */
        "spellcheck": boolean;
        /**
          * The value of the field.
         */
        "value": string;
    }
    /**
     * @name Toast
     * @category Platform
     * @summary Use for brief, non-intrusive notifications that appear temporarily and do not require user interaction.
     */
    interface Q2Toast {
        /**
          * Enables automatic dismissal after a duration.
          * @default false
         */
        "autoClose": boolean;
        /**
          * Controls whether the close button is displayed.
          * @default true
         */
        "closable": boolean;
        /**
          * The duration in milliseconds before auto dismissal.
          * @default 7000
         */
        "duration": number;
        /**
          * Manually hide the icon where it would otherwise appear.
          * @default false
         */
        "hideIcon": boolean;
        /**
          * Optional icon type to display.
         */
        "icon": string;
        /**
          * Optional message for the toast body.
         */
        "message": string;
        /**
          * Convenience prop for persistent toasts. When true, sets autoClose to false and closable to true. Aligns with acceptance criteria for showPersistent behavior.
          * @default false
         */
        "showPersistent": boolean;
        /**
          * Controls the visual size of the toast.
          * @default 'large'
         */
        "size": 'large' | 'small';
        /**
          * Optional title for the toast.
         */
        "tctTitle": string;
        /**
          * Optional time marker for the footer.
         */
        "time": string;
        /**
          * The visual status of the toast.
          * @default 'default'
         */
        "type": 'warning' | 'info' | 'alert' | 'success' | 'default' | 'error';
    }
    /**
     * @name Tooltip
     * @category Feedback
     * @summary Use for brief hints or explanations shown on hover or focus.
     */
    interface Q2Tooltip {
        /**
          * Displays the element as a block, making it take up the full width of its container.
         */
        "block": boolean;
        /**
          * Makes the component focusable, thereby putting it in the tab order of the keyboard.
          * @warning This is only meant to be used when the `q2-tooltip` is wrapped around an element that is not focusable (e.g., icons, static text, badges, etc.).
          * @default false
         */
        "focusable": boolean;
        /**
          * Whether to show the tooltip immediately upon hover.
         */
        "immediate": boolean;
        /**
          * text that is displayed when the tooltip is activated.
         */
        "label": string;
        /**
          * Enables the use of multi-line tooltips with a default `max-width` of `200px`.
         */
        "multiline": boolean;
        /**
          * Allows the tooltip bubble itself to be hovered. When enabled, the tooltip remains visible while moving between the trigger and the tooltip bubble.
         */
        "persistOnHover": boolean;
        /**
          * Displays the tooltip persistently.
         */
        "persistent": boolean;
        /**
          * The position of the tooltip based on [cardinal and intercardinal directions](https://en.wikipedia.org/wiki/Cardinal_direction).
          * @default 'n'
         */
        "position": 'n' | 's' | 'e' | 'w' | 'nw' | 'ne' | 'sw' | 'se';
    }
    interface TectonTabPane {
        "authPayload": { key: string; value: string }[];
        "badgeCount": number;
        "badgeDescription": string;
        "badgeStatus": Q2Badge['status'];
        "badgeTheme": Q2Badge['theme'];
        "guid": number;
        "index": number;
        "label": string;
        "minHeight": string;
        "moduleId": string;
        "name": string;
        /**
          * above props duplicated from q2-tab-pane. Unable to extend due to Stencil decorator limitation
         */
        "provided": boolean;
        "selected": boolean;
        "showForm": boolean;
        "url": string;
        "value": string;
    }
}
export interface ClickElsewhereCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLClickElsewhereElement;
}
export interface Q2ActionSheetCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLQ2ActionSheetElement;
}
export interface Q2BtnCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLQ2BtnElement;
}
export interface Q2CalendarCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLQ2CalendarElement;
}
export interface Q2CardCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLQ2CardElement;
}
export interface Q2CardImageCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLQ2CardImageElement;
}
export interface Q2CarouselCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLQ2CarouselElement;
}
export interface Q2CarouselPaneCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLQ2CarouselPaneElement;
}
export interface Q2ChartAreaCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLQ2ChartAreaElement;
}
export interface Q2ChartDonutCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLQ2ChartDonutElement;
}
export interface Q2CheckboxCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLQ2CheckboxElement;
}
export interface Q2CheckboxGroupCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLQ2CheckboxGroupElement;
}
export interface Q2DataTableCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLQ2DataTableElement;
}
export interface Q2DropdownItemCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLQ2DropdownItemElement;
}
export interface Q2EditableFieldCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLQ2EditableFieldElement;
}
export interface Q2ExampleCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLQ2ExampleElement;
}
export interface Q2FilePickerCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLQ2FilePickerElement;
}
export interface Q2InputCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLQ2InputElement;
}
export interface Q2LegendCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLQ2LegendElement;
}
export interface Q2LinkCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLQ2LinkElement;
}
export interface Q2ModalCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLQ2ModalElement;
}
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;
}
export interface Q2OptionListCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLQ2OptionListElement;
}
export interface Q2OtpCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLQ2OtpElement;
}
export interface Q2PaginationCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLQ2PaginationElement;
}
export interface Q2PillCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLQ2PillElement;
}
export interface Q2PopoverCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLQ2PopoverElement;
}
export interface Q2RadioCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLQ2RadioElement;
}
export interface Q2RadioGroupCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLQ2RadioGroupElement;
}
export interface Q2ResizeObserverCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLQ2ResizeObserverElement;
}
export interface Q2SearchCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLQ2SearchElement;
}
export interface Q2SectionCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLQ2SectionElement;
}
export interface Q2SelectCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLQ2SelectElement;
}
export interface Q2StepperCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLQ2StepperElement;
}
export interface Q2StepperPaneCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLQ2StepperPaneElement;
}
export interface Q2StepperVerticalCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLQ2StepperVerticalElement;
}
export interface Q2SurfaceCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLQ2SurfaceElement;
}
export interface Q2TabContainerCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLQ2TabContainerElement;
}
export interface Q2TabPaneCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLQ2TabPaneElement;
}
export interface Q2TagCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLQ2TagElement;
}
export interface Q2TextareaCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLQ2TextareaElement;
}
export interface Q2ToastCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLQ2ToastElement;
}
export interface TectonTabPaneCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLTectonTabPaneElement;
}
declare global {
    interface HTMLClickElsewhereElementEventMap {
        "change": any;
        "tctChange": any;
    }
    interface HTMLClickElsewhereElement extends Components.ClickElsewhere, HTMLStencilElement {
        addEventListener<K extends keyof HTMLClickElsewhereElementEventMap>(type: K, listener: (this: HTMLClickElsewhereElement, ev: ClickElsewhereCustomEvent<HTMLClickElsewhereElementEventMap[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 HTMLClickElsewhereElementEventMap>(type: K, listener: (this: HTMLClickElsewhereElement, ev: ClickElsewhereCustomEvent<HTMLClickElsewhereElementEventMap[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 HTMLClickElsewhereElement: {
        prototype: HTMLClickElsewhereElement;
        new (): HTMLClickElsewhereElement;
    };
    /**
     * @name Action Group
     * @category Display
     * @summary Use for laying out groups of buttons or links with consistent spacing.
     */
    interface HTMLQ2ActionGroupElement extends Components.Q2ActionGroup, HTMLStencilElement {
    }
    var HTMLQ2ActionGroupElement: {
        prototype: HTMLQ2ActionGroupElement;
        new (): HTMLQ2ActionGroupElement;
    };
    interface HTMLQ2ActionSheetElementEventMap {
        "close": ActionSheetListCloseData;
        "ready": any;
        "tctClose": ActionSheetListCloseData;
    }
    /**
     * @name Action Sheet
     * @category Display
     * @summary Use for presenting a modal sheet.
     */
    interface HTMLQ2ActionSheetElement extends Components.Q2ActionSheet, HTMLStencilElement {
        addEventListener<K extends keyof HTMLQ2ActionSheetElementEventMap>(type: K, listener: (this: HTMLQ2ActionSheetElement, ev: Q2ActionSheetCustomEvent<HTMLQ2ActionSheetElementEventMap[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 HTMLQ2ActionSheetElementEventMap>(type: K, listener: (this: HTMLQ2ActionSheetElement, ev: Q2ActionSheetCustomEvent<HTMLQ2ActionSheetElementEventMap[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 HTMLQ2ActionSheetElement: {
        prototype: HTMLQ2ActionSheetElement;
        new (): HTMLQ2ActionSheetElement;
    };
    /**
     * @name Avatar
     * @category Display
     * @summary Use for displaying photos, initials, or icons for people, businesses, or accounts.
     */
    interface HTMLQ2AvatarElement extends Components.Q2Avatar, HTMLStencilElement {
    }
    var HTMLQ2AvatarElement: {
        prototype: HTMLQ2AvatarElement;
        new (): HTMLQ2AvatarElement;
    };
    /**
     * @name Badge
     * @category Display
     * @summary Use for displaying counts, statuses, or indicators on other elements.
     */
    interface HTMLQ2BadgeElement extends Components.Q2Badge, HTMLStencilElement {
    }
    var HTMLQ2BadgeElement: {
        prototype: HTMLQ2BadgeElement;
        new (): HTMLQ2BadgeElement;
    };
    interface HTMLQ2BtnElementEventMap {
        "tctClick": any;
    }
    /**
     * @name Button
     * @category Forms
     * @summary Use for triggering actions including submit, save, cancel, or delete.
     */
    interface HTMLQ2BtnElement extends Components.Q2Btn, HTMLStencilElement {
        addEventListener<K extends keyof HTMLQ2BtnElementEventMap>(type: K, listener: (this: HTMLQ2BtnElement, ev: Q2BtnCustomEvent<HTMLQ2BtnElementEventMap[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 HTMLQ2BtnElementEventMap>(type: K, listener: (this: HTMLQ2BtnElement, ev: Q2BtnCustomEvent<HTMLQ2BtnElementEventMap[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 HTMLQ2BtnElement: {
        prototype: HTMLQ2BtnElement;
        new (): HTMLQ2BtnElement;
    };
    interface HTMLQ2CalendarElementEventMap {
        "change": {
        // ISO formatted date
        value: string | null;
    };
        "error": { errors: { message: string; errorCode: string }[] };
        "success": {
        // ISO formatted date
        value: string;
    };
        "tctChange": {
        // ISO formatted date
        value: string | null;
    };
        "tctError": { errors: { message: string; errorCode: string }[] };
        "tctSuccess": {
        // ISO formatted date
        value: string;
    };
    }
    /**
     * @name Calendar
     * @category Forms
     * @summary Use for selecting a date from a calendar popover.
     */
    interface HTMLQ2CalendarElement extends Components.Q2Calendar, HTMLStencilElement {
        addEventListener<K extends keyof HTMLQ2CalendarElementEventMap>(type: K, listener: (this: HTMLQ2CalendarElement, ev: Q2CalendarCustomEvent<HTMLQ2CalendarElementEventMap[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 HTMLQ2CalendarElementEventMap>(type: K, listener: (this: HTMLQ2CalendarElement, ev: Q2CalendarCustomEvent<HTMLQ2CalendarElementEventMap[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 HTMLQ2CalendarElement: {
        prototype: HTMLQ2CalendarElement;
        new (): HTMLQ2CalendarElement;
    };
    interface HTMLQ2CardElementEventMap {
        "click": undefined;
        "tctClick": undefined;
    }
    /**
     * @name Card
     * @category Display
     * @summary Use for grouping related content in a contained, elevated surface.
     */
    interface HTMLQ2CardElement extends Components.Q2Card, HTMLStencilElement {
        addEventListener<K extends keyof HTMLQ2CardElementEventMap>(type: K, listener: (this: HTMLQ2CardElement, ev: Q2CardCustomEvent<HTMLQ2CardElementEventMap[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 HTMLQ2CardElementEventMap>(type: K, listener: (this: HTMLQ2CardElement, ev: Q2CardCustomEvent<HTMLQ2CardElementEventMap[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 HTMLQ2CardElement: {
        prototype: HTMLQ2CardElement;
        new (): HTMLQ2CardElement;
    };
    interface HTMLQ2CardImageElementEventMap {
        "tctClick": {
        cardNumber: string | undefined;
        cardStatus: string | undefined;
        statusTextOverride: string | undefined;
        cardHolder: string | undefined;
        expirationDate: string | undefined;
        cardType: string | undefined;
        vendor: string | undefined;
    };
    }
    /**
     * @name Card Image
     * @summary Displays a visual representation of a credit or debit card with customizable styling
     * and card details. Supports horizontal and vertical orientations with responsive sizing
     * that adapts content visibility based on container width.
     */
    interface HTMLQ2CardImageElement extends Components.Q2CardImage, HTMLStencilElement {
        addEventListener<K extends keyof HTMLQ2CardImageElementEventMap>(type: K, listener: (this: HTMLQ2CardImageElement, ev: Q2CardImageCustomEvent<HTMLQ2CardImageElementEventMap[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 HTMLQ2CardImageElementEventMap>(type: K, listener: (this: HTMLQ2CardImageElement, ev: Q2CardImageCustomEvent<HTMLQ2CardImageElementEventMap[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 HTMLQ2CardImageElement: {
        prototype: HTMLQ2CardImageElement;
        new (): HTMLQ2CardImageElement;
    };
    interface HTMLQ2CarouselElementEventMap {
        "change": { index: number };
        "tctChange": { index: number };
    }
    /**
     * @name Carousel
     * @category Display
     * @summary Use for cycling through a series of content slides with swipe or button navigation.
     */
    interface HTMLQ2CarouselElement extends Components.Q2Carousel, HTMLStencilElement {
        addEventListener<K extends keyof HTMLQ2CarouselElementEventMap>(type: K, listener: (this: HTMLQ2CarouselElement, ev: Q2CarouselCustomEvent<HTMLQ2CarouselElementEventMap[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 HTMLQ2CarouselElementEventMap>(type: K, listener: (this: HTMLQ2CarouselElement, ev: Q2CarouselCustomEvent<HTMLQ2CarouselElementEventMap[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 HTMLQ2CarouselElement: {
        prototype: HTMLQ2CarouselElement;
        new (): HTMLQ2CarouselElement;
    };
    interface HTMLQ2CarouselPaneElementEventMap {
        "clickCarouselPane": { paneIndex: number; pane: HTMLElement };
        "tctClickCarouselPane": { paneIndex: number; pane: HTMLElement };
    }
    /**
     * @name Carousel Pane
     * @category Display
     * @summary Use as a single slide within a Carousel.
     */
    interface HTMLQ2CarouselPaneElement extends Components.Q2CarouselPane, HTMLStencilElement {
        addEventListener<K extends keyof HTMLQ2CarouselPaneElementEventMap>(type: K, listener: (this: HTMLQ2CarouselPaneElement, ev: Q2CarouselPaneCustomEvent<HTMLQ2CarouselPaneElementEventMap[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 HTMLQ2CarouselPaneElementEventMap>(type: K, listener: (this: HTMLQ2CarouselPaneElement, ev: Q2CarouselPaneCustomEvent<HTMLQ2CarouselPaneElementEventMap[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 HTMLQ2CarouselPaneElement: {
        prototype: HTMLQ2CarouselPaneElement;
        new (): HTMLQ2CarouselPaneElement;
    };
    interface HTMLQ2ChartAreaElementEventMap {
        "change": {
        index: number;
        data: ChartData;
    };
        "tctChange": {
        index: number;
        data: ChartData;
    };
    }
    /**
     * @name Area Chart
     * @category Data Visualization
     * @summary Use for showing trends over time with filled areas under lines.
     */
    interface HTMLQ2ChartAreaElement extends Components.Q2ChartArea, HTMLStencilElement {
        addEventListener<K extends keyof HTMLQ2ChartAreaElementEventMap>(type: K, listener: (this: HTMLQ2ChartAreaElement, ev: Q2ChartAreaCustomEvent<HTMLQ2ChartAreaElementEventMap[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 HTMLQ2ChartAreaElementEventMap>(type: K, listener: (this: HTMLQ2ChartAreaElement, ev: Q2ChartAreaCustomEvent<HTMLQ2ChartAreaElementEventMap[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 HTMLQ2ChartAreaElement: {
        prototype: HTMLQ2ChartAreaElement;
        new (): HTMLQ2ChartAreaElement;
    };
    /**
     * @name Bar Chart
     * @category Data Visualization
     * @summary Use for comparing values across categories with horizontal or vertical bars.
     */
    interface HTMLQ2ChartBarElement extends Components.Q2ChartBar, HTMLStencilElement {
    }
    var HTMLQ2ChartBarElement: {
        prototype: HTMLQ2ChartBarElement;
        new (): HTMLQ2ChartBarElement;
    };
    interface HTMLQ2ChartDonutElementEventMap {
        "change": DonutChartData;
        "click": DonutChartData;
        "tctChange": DonutChartData;
        "tctClick": DonutChartData;
    }
    /**
     * @name Donut Chart
     * @category Data Visualization
     * @summary Use for showing proportions of a whole as segments in a ring.
     */
    interface HTMLQ2ChartDonutElement extends Components.Q2ChartDonut, HTMLStencilElement {
        addEventListener<K extends keyof HTMLQ2ChartDonutElementEventMap>(type: K, listener: (this: HTMLQ2ChartDonutElement, ev: Q2ChartDonutCustomEvent<HTMLQ2ChartDonutElementEventMap[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 HTMLQ2ChartDonutElementEventMap>(type: K, listener: (this: HTMLQ2ChartDonutElement, ev: Q2ChartDonutCustomEvent<HTMLQ2ChartDonutElementEventMap[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 HTMLQ2ChartDonutElement: {
        prototype: HTMLQ2ChartDonutElement;
        new (): HTMLQ2ChartDonutElement;
    };
    interface HTMLQ2CheckboxElementEventMap {
        "change": { value: string; checked: boolean };
        "tctChange": { value: string; checked: boolean };
    }
    /**
     * @name Checkbox
     * @category Forms
     * @summary Use as a single binary choice; nest within a Checkbox Group for grouped selection.
     */
    interface HTMLQ2CheckboxElement extends Components.Q2Checkbox, HTMLStencilElement {
        addEventListener<K extends keyof HTMLQ2CheckboxElementEventMap>(type: K, listener: (this: HTMLQ2CheckboxElement, ev: Q2CheckboxCustomEvent<HTMLQ2CheckboxElementEventMap[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 HTMLQ2CheckboxElementEventMap>(type: K, listener: (this: HTMLQ2CheckboxElement, ev: Q2CheckboxCustomEvent<HTMLQ2CheckboxElementEventMap[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 HTMLQ2CheckboxElement: {
        prototype: HTMLQ2CheckboxElement;
        new (): HTMLQ2CheckboxElement;
    };
    interface HTMLQ2CheckboxGroupElementEventMap {
        "change": any;
        "tctChange": any;
    }
    /**
     * @name Checkbox Group
     * @category Forms
     * @summary Use for selecting multiple options from a set of checkboxes.
     */
    interface HTMLQ2CheckboxGroupElement extends Components.Q2CheckboxGroup, HTMLStencilElement {
        addEventListener<K extends keyof HTMLQ2CheckboxGroupElementEventMap>(type: K, listener: (this: HTMLQ2CheckboxGroupElement, ev: Q2CheckboxGroupCustomEvent<HTMLQ2CheckboxGroupElementEventMap[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 HTMLQ2CheckboxGroupElementEventMap>(type: K, listener: (this: HTMLQ2CheckboxGroupElement, ev: Q2CheckboxGroupCustomEvent<HTMLQ2CheckboxGroupElementEventMap[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 HTMLQ2CheckboxGroupElement: {
        prototype: HTMLQ2CheckboxGroupElement;
        new (): HTMLQ2CheckboxGroupElement;
    };
    /**
     * @name Context
     * @category Display
     * @summary Use for displaying supplementary information or hints alongside content.
     */
    interface HTMLQ2ContextElement extends Components.Q2Context, HTMLStencilElement {
    }
    var HTMLQ2ContextElement: {
        prototype: HTMLQ2ContextElement;
        new (): HTMLQ2ContextElement;
    };
    /**
     * @name Currency
     * @category Text
     * @summary Use for displaying formatted monetary amounts with proper locale.
     */
    interface HTMLQ2CurrencyElement extends Components.Q2Currency, HTMLStencilElement {
    }
    var HTMLQ2CurrencyElement: {
        prototype: HTMLQ2CurrencyElement;
        new (): HTMLQ2CurrencyElement;
    };
    interface HTMLQ2DataTableElementEventMap {
        "click": { row: Q2DataTableSerializedRow };
        "select": {
        row: Q2DataTableSerializedRow;
        rows: Q2DataTableSerializedRow[];
        allSelected: boolean;
    };
        "selectAllRows": { checked: boolean };
        "sort": { header: Q2DataTableHeader; direction: 'ASC' | 'DESC' };
        "tctClick": { row: Q2DataTableSerializedRow };
        "tctSelect": {
        row: Q2DataTableSerializedRow;
        rows: Q2DataTableSerializedRow[];
        allSelected: boolean;
    };
        "tctSelectAllRows": { checked: boolean };
        "tctSort": { header: Q2DataTableHeader; direction: 'ASC' | 'DESC' };
        "tctToggle": { row: Q2DataTableSerializedRow };
        "toggle": { row: Q2DataTableSerializedRow };
    }
    /**
     * @name Data Table
     * @category Display
     * @summary Use for displaying large datasets with sorting, filtering, and selecting.
     */
    interface HTMLQ2DataTableElement extends Components.Q2DataTable, HTMLStencilElement {
        addEventListener<K extends keyof HTMLQ2DataTableElementEventMap>(type: K, listener: (this: HTMLQ2DataTableElement, ev: Q2DataTableCustomEvent<HTMLQ2DataTableElementEventMap[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 HTMLQ2DataTableElementEventMap>(type: K, listener: (this: HTMLQ2DataTableElement, ev: Q2DataTableCustomEvent<HTMLQ2DataTableElementEventMap[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 HTMLQ2DataTableElement: {
        prototype: HTMLQ2DataTableElement;
        new (): HTMLQ2DataTableElement;
    };
    /**
     * @name Detail
     * @category Display
     * @summary Use for displaying label-value pairs like account details or miscellaneous info.
     */
    interface HTMLQ2DetailElement extends Components.Q2Detail, HTMLStencilElement {
    }
    var HTMLQ2DetailElement: {
        prototype: HTMLQ2DetailElement;
        new (): HTMLQ2DetailElement;
    };
    /**
     * @name Dropdown
     * @category Display
     * @summary Use for menus of contextual actions triggered by a button click.
     */
    interface HTMLQ2DropdownElement extends Components.Q2Dropdown, HTMLStencilElement {
    }
    var HTMLQ2DropdownElement: {
        prototype: HTMLQ2DropdownElement;
        new (): HTMLQ2DropdownElement;
    };
    interface HTMLQ2DropdownItemElementEventMap {
        "click": { type: 'select' | 'remove'; value: string };
        "tctClick": { type: 'select' | 'remove'; value: string };
    }
    /**
     * @name Dropdown Item
     * @category Display
     * @summary Use as a single action item within a Dropdown menu.
     */
    interface HTMLQ2DropdownItemElement extends Components.Q2DropdownItem, HTMLStencilElement {
        addEventListener<K extends keyof HTMLQ2DropdownItemElementEventMap>(type: K, listener: (this: HTMLQ2DropdownItemElement, ev: Q2DropdownItemCustomEvent<HTMLQ2DropdownItemElementEventMap[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 HTMLQ2DropdownItemElementEventMap>(type: K, listener: (this: HTMLQ2DropdownItemElement, ev: Q2DropdownItemCustomEvent<HTMLQ2DropdownItemElementEventMap[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 HTMLQ2DropdownItemElement: {
        prototype: HTMLQ2DropdownItemElement;
        new (): HTMLQ2DropdownItemElement;
    };
    interface HTMLQ2EditableFieldElementEventMap {
        "change": {
        editing: boolean;
        name: 'edit' | 'cancel' | 'save';
        value?: string;
        formattedValue?: string;
    };
        "input": { formattedValue: string; value: string };
        "tctChange": {
        editing: boolean;
        name: 'edit' | 'cancel' | 'save';
        value?: string;
        formattedValue?: string;
    };
        "tctInput": { formattedValue: string; value: string };
    }
    /**
     * @name Editable Field
     * @category Forms
     * @summary Use for inline editing of data that is normally displayed as read-only.
     */
    interface HTMLQ2EditableFieldElement extends Components.Q2EditableField, HTMLStencilElement {
        addEventListener<K extends keyof HTMLQ2EditableFieldElementEventMap>(type: K, listener: (this: HTMLQ2EditableFieldElement, ev: Q2EditableFieldCustomEvent<HTMLQ2EditableFieldElementEventMap[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 HTMLQ2EditableFieldElementEventMap>(type: K, listener: (this: HTMLQ2EditableFieldElement, ev: Q2EditableFieldCustomEvent<HTMLQ2EditableFieldElementEventMap[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 HTMLQ2EditableFieldElement: {
        prototype: HTMLQ2EditableFieldElement;
        new (): HTMLQ2EditableFieldElement;
    };
    interface HTMLQ2ExampleElementEventMap {
        "tctClick": any;
        "tctDrag": any;
        "tctOpen": any;
    }
    interface HTMLQ2ExampleElement extends Components.Q2Example, HTMLStencilElement {
        addEventListener<K extends keyof HTMLQ2ExampleElementEventMap>(type: K, listener: (this: HTMLQ2ExampleElement, ev: Q2ExampleCustomEvent<HTMLQ2ExampleElementEventMap[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 HTMLQ2ExampleElementEventMap>(type: K, listener: (this: HTMLQ2ExampleElement, ev: Q2ExampleCustomEvent<HTMLQ2ExampleElementEventMap[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 HTMLQ2ExampleElement: {
        prototype: HTMLQ2ExampleElement;
        new (): HTMLQ2ExampleElement;
    };
    interface HTMLQ2FilePickerElementEventMap {
        "tctChange": FilesObject;
    }
    /**
     * @name File Picker
     * @category Forms
     * @summary Use for uploading files via browse dialog or drag-and-drop.
     */
    interface HTMLQ2FilePickerElement extends Components.Q2FilePicker, HTMLStencilElement {
        addEventListener<K extends keyof HTMLQ2FilePickerElementEventMap>(type: K, listener: (this: HTMLQ2FilePickerElement, ev: Q2FilePickerCustomEvent<HTMLQ2FilePickerElementEventMap[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 HTMLQ2FilePickerElementEventMap>(type: K, listener: (this: HTMLQ2FilePickerElement, ev: Q2FilePickerCustomEvent<HTMLQ2FilePickerElementEventMap[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 HTMLQ2FilePickerElement: {
        prototype: HTMLQ2FilePickerElement;
        new (): HTMLQ2FilePickerElement;
    };
    /**
     * @name Form
     * @category Forms
     * @summary Use for wrapping form fields with consistent spacing.
     */
    interface HTMLQ2FormElement extends Components.Q2Form, HTMLStencilElement {
    }
    var HTMLQ2FormElement: {
        prototype: HTMLQ2FormElement;
        new (): HTMLQ2FormElement;
    };
    /**
     * @name Formatted Text
     * @category Text
     * @summary Use for displaying text with formatting like phone numbers, SSN, or dates.
     */
    interface HTMLQ2FormattedTextElement extends Components.Q2FormattedText, HTMLStencilElement {
    }
    var HTMLQ2FormattedTextElement: {
        prototype: HTMLQ2FormattedTextElement;
        new (): HTMLQ2FormattedTextElement;
    };
    /**
     * @name Grid
     * @category Display
     * @summary Use for responsive grid layouts with flexible rows and columns.
     */
    interface HTMLQ2GridElement extends Components.Q2Grid, HTMLStencilElement {
    }
    var HTMLQ2GridElement: {
        prototype: HTMLQ2GridElement;
        new (): HTMLQ2GridElement;
    };
    /**
     * @name Grid Area
     * @category Display
     * @summary Use as a positioned cell within a Grid layout.
     */
    interface HTMLQ2GridAreaElement extends Components.Q2GridArea, HTMLStencilElement {
    }
    var HTMLQ2GridAreaElement: {
        prototype: HTMLQ2GridAreaElement;
        new (): HTMLQ2GridAreaElement;
    };
    /**
     * @name Icon
     * @category Display
     * @summary Use for displaying icons that represent actions, states, or concepts.
     */
    interface HTMLQ2IconElement extends Components.Q2Icon, HTMLStencilElement {
    }
    var HTMLQ2IconElement: {
        prototype: HTMLQ2IconElement;
        new (): HTMLQ2IconElement;
    };
    interface HTMLQ2InputElementEventMap {
        "change": EventDetail;
        "clear": undefined;
        "formatted": FormatterValueObject;
        "input": EventDetail;
        "invalid": EventDetail;
        "tctChange": EventDetail;
        "tctClear": undefined;
        "tctFormatted": FormatterValueObject;
        "tctInput": EventDetail;
        "tctInvalid": EventDetail;
    }
    /**
     * @name Input
     * @category Forms
     * @summary Use for single-line text entry including email, phone, currency, SSN, and password.
     */
    interface HTMLQ2InputElement extends Components.Q2Input, HTMLStencilElement {
        addEventListener<K extends keyof HTMLQ2InputElementEventMap>(type: K, listener: (this: HTMLQ2InputElement, ev: Q2InputCustomEvent<HTMLQ2InputElementEventMap[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 HTMLQ2InputElementEventMap>(type: K, listener: (this: HTMLQ2InputElement, ev: Q2InputCustomEvent<HTMLQ2InputElementEventMap[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 HTMLQ2InputElement: {
        prototype: HTMLQ2InputElement;
        new (): HTMLQ2InputElement;
    };
    /**
     * @name Item
     * @category Display
     * @summary Use for laying out structured content with header, body, and footer text, icons, and actions.
     */
    interface HTMLQ2ItemElement extends Components.Q2Item, HTMLStencilElement {
    }
    var HTMLQ2ItemElement: {
        prototype: HTMLQ2ItemElement;
        new (): HTMLQ2ItemElement;
    };
    interface HTMLQ2LegendElementEventMap {
        "click": DonutChartData;
        "mouseenter": DonutChartData;
        "mouseleave": DonutChartData;
        "tctClick": DonutChartData;
        "tctMouseEnter": DonutChartData;
        "tctMouseLeave": DonutChartData;
    }
    /**
     * @name Legend
     * @category Data Visualization
     * @summary Use for displaying chart legends with interactive item selection.
     */
    interface HTMLQ2LegendElement extends Components.Q2Legend, HTMLStencilElement {
        addEventListener<K extends keyof HTMLQ2LegendElementEventMap>(type: K, listener: (this: HTMLQ2LegendElement, ev: Q2LegendCustomEvent<HTMLQ2LegendElementEventMap[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 HTMLQ2LegendElementEventMap>(type: K, listener: (this: HTMLQ2LegendElement, ev: Q2LegendCustomEvent<HTMLQ2LegendElementEventMap[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 HTMLQ2LegendElement: {
        prototype: HTMLQ2LegendElement;
        new (): HTMLQ2LegendElement;
    };
    interface HTMLQ2LinkElementEventMap {
        "tctClick": { target: string; referrerpolicy: string; href: string };
    }
    /**
     * @name Link
     * @category Display
     * @summary Use for navigation to other pages or sections. Prefer over q2-btn for non-action navigation.
     */
    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;
    };
    /**
     * @name List
     * @category Display
     * @summary Use for grouping Item components into a vertical list.
     */
    interface HTMLQ2ListElement extends Components.Q2List, HTMLStencilElement {
    }
    var HTMLQ2ListElement: {
        prototype: HTMLQ2ListElement;
        new (): HTMLQ2ListElement;
    };
    /**
     * @name Loading
     * @category Feedback
     * @summary Use to indicate async operations or content loading in progress.
     */
    interface HTMLQ2LoadingElement extends Components.Q2Loading, HTMLStencilElement {
    }
    var HTMLQ2LoadingElement: {
        prototype: HTMLQ2LoadingElement;
        new (): HTMLQ2LoadingElement;
    };
    interface HTMLQ2LoadingElementElement extends Components.Q2LoadingElement, HTMLStencilElement {
    }
    var HTMLQ2LoadingElementElement: {
        prototype: HTMLQ2LoadingElementElement;
        new (): HTMLQ2LoadingElementElement;
    };
    /**
     * @name Localization
     * @category Text
     * @summary Use for displaying localized text from translation keys.
     */
    interface HTMLQ2LocElement extends Components.Q2Loc, HTMLStencilElement {
    }
    var HTMLQ2LocElement: {
        prototype: HTMLQ2LocElement;
        new (): HTMLQ2LocElement;
    };
    /**
     * @name Message
     * @category Feedback
     * @summary Use for contextual non-blocking notifications like success, error, or info alerts.
     */
    interface HTMLQ2MessageElement extends Components.Q2Message, HTMLStencilElement {
    }
    var HTMLQ2MessageElement: {
        prototype: HTMLQ2MessageElement;
        new (): HTMLQ2MessageElement;
    };
    /**
     * @name Meter
     * @category Data Visualization
     * @summary Use for showing progress or a value within a known range.
     */
    interface HTMLQ2MeterElement extends Components.Q2Meter, HTMLStencilElement {
    }
    var HTMLQ2MeterElement: {
        prototype: HTMLQ2MeterElement;
        new (): HTMLQ2MeterElement;
    };
    interface HTMLQ2ModalElementEventMap {
        "tctBackdropClick": undefined;
        "tctClick": any;
        "tctClose": any;
        "tctOpen": any;
        "tctReady": any;
    }
    /**
     * @name Modal
     * @category Platform
     * @summary Use for focused interactions that require user attention before continuing.
     */
    interface HTMLQ2ModalElement extends Components.Q2Modal, HTMLStencilElement {
        addEventListener<K extends keyof HTMLQ2ModalElementEventMap>(type: K, listener: (this: HTMLQ2ModalElement, ev: Q2ModalCustomEvent<HTMLQ2ModalElementEventMap[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 HTMLQ2ModalElementEventMap>(type: K, listener: (this: HTMLQ2ModalElement, ev: Q2ModalCustomEvent<HTMLQ2ModalElementEventMap[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 HTMLQ2ModalElement: {
        prototype: HTMLQ2ModalElement;
        new (): HTMLQ2ModalElement;
    };
    interface HTMLQ2MonthPickerElementEventMap {
        "toggleChange": any;
        "viewChange": any;
    }
    interface HTMLQ2MonthPickerElement extends Components.Q2MonthPicker, HTMLStencilElement {
        addEventListener<K extends keyof HTMLQ2MonthPickerElementEventMap>(type: K, listener: (this: HTMLQ2MonthPickerElement, ev: Q2MonthPickerCustomEvent<HTMLQ2MonthPickerElementEventMap[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 HTMLQ2MonthPickerElementEventMap>(type: K, listener: (this: HTMLQ2MonthPickerElement, ev: Q2MonthPickerCustomEvent<HTMLQ2MonthPickerElementEventMap[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 HTMLQ2MonthPickerElement: {
        prototype: HTMLQ2MonthPickerElement;
        new (): HTMLQ2MonthPickerElement;
    };
    interface HTMLQ2MutationObserverElementEventMap {
        "tctMutate": { entries: MutationRecord[] };
    }
    /**
     * @name Mutation Observer
     * @category Utility
     * @summary Use for observing DOM changes to child elements and emitting events.
     */
    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;
    };
    /**
     * @name Option Group
     * @category Forms
     * @summary Use for grouping related options under a label in Select or Dropdown.
     */
    interface HTMLQ2OptgroupElement extends Components.Q2Optgroup, HTMLStencilElement {
    }
    var HTMLQ2OptgroupElement: {
        prototype: HTMLQ2OptgroupElement;
        new (): HTMLQ2OptgroupElement;
    };
    interface HTMLQ2OptionElementEventMap {
        "displayChanged": { value: string; display: string };
        "tctClick": { type: 'select' | 'remove'; value: string };
    }
    /**
     * @name Option
     * @category Forms
     * @summary Use as a selectable item within Select, Dropdown, Tag, or Pill components.
     */
    interface HTMLQ2OptionElement extends Components.Q2Option, HTMLStencilElement {
        addEventListener<K extends keyof HTMLQ2OptionElementEventMap>(type: K, listener: (this: HTMLQ2OptionElement, ev: Q2OptionCustomEvent<HTMLQ2OptionElementEventMap[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 HTMLQ2OptionElementEventMap>(type: K, listener: (this: HTMLQ2OptionElement, ev: Q2OptionCustomEvent<HTMLQ2OptionElementEventMap[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 HTMLQ2OptionElement: {
        prototype: HTMLQ2OptionElement;
        new (): HTMLQ2OptionElement;
    };
    interface HTMLQ2OptionListElementEventMap {
        "change": { value: string; values: OptionValue[] };
        "popoverState": { open: boolean; action: 'close' | 'select' | 'open' };
        "ready": undefined;
        "tctChange": { value: string; values: OptionValue[] };
    }
    /**
     * @name Option List
     * @category Forms
     * @summary Use internally by Select and Dropdown for rendering searchable option lists.
     */
    interface HTMLQ2OptionListElement extends Components.Q2OptionList, HTMLStencilElement {
        addEventListener<K extends keyof HTMLQ2OptionListElementEventMap>(type: K, listener: (this: HTMLQ2OptionListElement, ev: Q2OptionListCustomEvent<HTMLQ2OptionListElementEventMap[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 HTMLQ2OptionListElementEventMap>(type: K, listener: (this: HTMLQ2OptionListElement, ev: Q2OptionListCustomEvent<HTMLQ2OptionListElementEventMap[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 HTMLQ2OptionListElement: {
        prototype: HTMLQ2OptionListElement;
        new (): HTMLQ2OptionListElement;
    };
    interface HTMLQ2OtpElementEventMap {
        "tctClear": { value: string };
        "tctComplete": { value: string };
        "tctInput": { value: string };
        "tctSendCode": void;
        "tctSubmit": { value: string };
    }
    /**
     * @name One-Time Password
     * @category Forms
     * @summary Use for entering a short one-time verification code.
     */
    interface HTMLQ2OtpElement extends Components.Q2Otp, HTMLStencilElement {
        addEventListener<K extends keyof HTMLQ2OtpElementEventMap>(type: K, listener: (this: HTMLQ2OtpElement, ev: Q2OtpCustomEvent<HTMLQ2OtpElementEventMap[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 HTMLQ2OtpElementEventMap>(type: K, listener: (this: HTMLQ2OtpElement, ev: Q2OtpCustomEvent<HTMLQ2OtpElementEventMap[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 HTMLQ2OtpElement: {
        prototype: HTMLQ2OtpElement;
        new (): HTMLQ2OtpElement;
    };
    interface HTMLQ2PaginationElementEventMap {
        "change": { page: number; perPage: number };
        "tctChange": { page: number; perPage: number };
    }
    /**
     * @name Pagination
     * @category Display
     * @summary Use for navigating between pages of content like search results or tables.
     */
    interface HTMLQ2PaginationElement extends Components.Q2Pagination, HTMLStencilElement {
        addEventListener<K extends keyof HTMLQ2PaginationElementEventMap>(type: K, listener: (this: HTMLQ2PaginationElement, ev: Q2PaginationCustomEvent<HTMLQ2PaginationElementEventMap[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 HTMLQ2PaginationElementEventMap>(type: K, listener: (this: HTMLQ2PaginationElement, ev: Q2PaginationCustomEvent<HTMLQ2PaginationElementEventMap[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 HTMLQ2PaginationElement: {
        prototype: HTMLQ2PaginationElement;
        new (): HTMLQ2PaginationElement;
    };
    interface HTMLQ2PillElementEventMap {
        "change": { value: string; values: OptionValue1[]; active: boolean };
        "tctChange": { value: string; values: OptionValue1[]; active: boolean };
    }
    /**
     * @name Pill
     * @category Display
     * @summary Use for displaying and removing active filters in data views.
     */
    interface HTMLQ2PillElement extends Components.Q2Pill, HTMLStencilElement {
        addEventListener<K extends keyof HTMLQ2PillElementEventMap>(type: K, listener: (this: HTMLQ2PillElement, ev: Q2PillCustomEvent<HTMLQ2PillElementEventMap[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 HTMLQ2PillElementEventMap>(type: K, listener: (this: HTMLQ2PillElement, ev: Q2PillCustomEvent<HTMLQ2PillElementEventMap[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 HTMLQ2PillElement: {
        prototype: HTMLQ2PillElement;
        new (): HTMLQ2PillElement;
    };
    interface HTMLQ2PopoverElementEventMap {
        "popoverStateChanged": { open: boolean };
        "tctPopoverStateChanged": { open: boolean };
    }
    /**
     * @name Popover
     * @category Display
     * @summary Use for positioning floating content relative to a trigger element.
     */
    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;
        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 HTMLQ2PopoverElementEventMap>(type: K, listener: (this: HTMLQ2PopoverElement, ev: Q2PopoverCustomEvent<HTMLQ2PopoverElementEventMap[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 HTMLQ2PopoverElement: {
        prototype: HTMLQ2PopoverElement;
        new (): HTMLQ2PopoverElement;
    };
    interface HTMLQ2RadioElementEventMap {
        "change": { value: string };
        "tctChange": { value: string };
    }
    /**
     * @name Radio
     * @category Forms
     * @summary Use as a single option within a Radio Group.
     */
    interface HTMLQ2RadioElement extends Components.Q2Radio, HTMLStencilElement {
        addEventListener<K extends keyof HTMLQ2RadioElementEventMap>(type: K, listener: (this: HTMLQ2RadioElement, ev: Q2RadioCustomEvent<HTMLQ2RadioElementEventMap[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 HTMLQ2RadioElementEventMap>(type: K, listener: (this: HTMLQ2RadioElement, ev: Q2RadioCustomEvent<HTMLQ2RadioElementEventMap[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 HTMLQ2RadioElement: {
        prototype: HTMLQ2RadioElement;
        new (): HTMLQ2RadioElement;
    };
    interface HTMLQ2RadioGroupElementEventMap {
        "change": { value: string };
        "tctChange": { value: string };
    }
    /**
     * @name Radio Group
     * @category Forms
     * @summary Use for selecting exactly one option from a small set of choices.
     */
    interface HTMLQ2RadioGroupElement extends Components.Q2RadioGroup, HTMLStencilElement {
        addEventListener<K extends keyof HTMLQ2RadioGroupElementEventMap>(type: K, listener: (this: HTMLQ2RadioGroupElement, ev: Q2RadioGroupCustomEvent<HTMLQ2RadioGroupElementEventMap[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 HTMLQ2RadioGroupElementEventMap>(type: K, listener: (this: HTMLQ2RadioGroupElement, ev: Q2RadioGroupCustomEvent<HTMLQ2RadioGroupElementEventMap[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 HTMLQ2RadioGroupElement: {
        prototype: HTMLQ2RadioGroupElement;
        new (): HTMLQ2RadioGroupElement;
    };
    /**
     * @name Relative Time
     * @category Text
     * @summary Use for displaying time differences like "2 hours ago" or "in 3 days".
     */
    interface HTMLQ2RelativeTimeElement extends Components.Q2RelativeTime, HTMLStencilElement {
    }
    var HTMLQ2RelativeTimeElement: {
        prototype: HTMLQ2RelativeTimeElement;
        new (): HTMLQ2RelativeTimeElement;
    };
    interface HTMLQ2ResizeObserverElementEventMap {
        "tctResize": { entries: ResizeObserverEntry[] };
    }
    /**
     * @name Resize Observer
     * @category Utility
     * @summary Use for detecting size changes to elements and emitting resize events.
     */
    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 HTMLQ2SearchElementEventMap {
        "tctChange": { value: string; selectedOptions: string[]; tctVModel: string | string[] };
        "tctClose": void;
        "tctInput": { query: string };
        "tctOpen": void;
    }
    /**
     * @name Search
     * @category Forms
     * @summary Use for search-first selection where the option list is driven by user input — supports both in-memory filtering and async fetch.
     */
    interface HTMLQ2SearchElement extends Components.Q2Search, HTMLStencilElement {
        addEventListener<K extends keyof HTMLQ2SearchElementEventMap>(type: K, listener: (this: HTMLQ2SearchElement, ev: Q2SearchCustomEvent<HTMLQ2SearchElementEventMap[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 HTMLQ2SearchElementEventMap>(type: K, listener: (this: HTMLQ2SearchElement, ev: Q2SearchCustomEvent<HTMLQ2SearchElementEventMap[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 HTMLQ2SearchElement: {
        prototype: HTMLQ2SearchElement;
        new (): HTMLQ2SearchElement;
    };
    interface HTMLQ2SectionElementEventMap {
        "change": { expanded: boolean };
        "tctChange": { expanded: boolean };
    }
    /**
     * @name Section
     * @category Display
     * @summary Use for grouping related content with a header and optional collapse.
     */
    interface HTMLQ2SectionElement extends Components.Q2Section, HTMLStencilElement {
        addEventListener<K extends keyof HTMLQ2SectionElementEventMap>(type: K, listener: (this: HTMLQ2SectionElement, ev: Q2SectionCustomEvent<HTMLQ2SectionElementEventMap[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 HTMLQ2SectionElementEventMap>(type: K, listener: (this: HTMLQ2SectionElement, ev: Q2SectionCustomEvent<HTMLQ2SectionElementEventMap[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 HTMLQ2SectionElement: {
        prototype: HTMLQ2SectionElement;
        new (): HTMLQ2SectionElement;
    };
    /**
     * @name Section Container
     * @category Display
     * @summary Use for managing multiple collapsible sections with single or multiple open modes.
     */
    interface HTMLQ2SectionContainerElement extends Components.Q2SectionContainer, HTMLStencilElement {
    }
    var HTMLQ2SectionContainerElement: {
        prototype: HTMLQ2SectionContainerElement;
        new (): HTMLQ2SectionContainerElement;
    };
    interface HTMLQ2SelectElementEventMap {
        "change": { value: string; selectedOptions: string[]; tctVModel: string | string[] };
        "input": { query: string };
        "tctChange": { value: string; selectedOptions: string[]; tctVModel: string | string[] };
        "tctInput": { query: string };
    }
    /**
     * @name Select
     * @category Forms
     * @summary Use for choosing from a known list of options with single-select or multi-select.
     */
    interface HTMLQ2SelectElement extends Components.Q2Select, HTMLStencilElement {
        addEventListener<K extends keyof HTMLQ2SelectElementEventMap>(type: K, listener: (this: HTMLQ2SelectElement, ev: Q2SelectCustomEvent<HTMLQ2SelectElementEventMap[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 HTMLQ2SelectElementEventMap>(type: K, listener: (this: HTMLQ2SelectElement, ev: Q2SelectCustomEvent<HTMLQ2SelectElementEventMap[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 HTMLQ2SelectElement: {
        prototype: HTMLQ2SelectElement;
        new (): HTMLQ2SelectElement;
    };
    interface HTMLQ2StepperElementEventMap {
        "change": any;
        "tctChange": any;
    }
    /**
     * @name Stepper
     * @category Display
     * @summary Use for guiding users through a multi-step workflow with horizontal progress.
     */
    interface HTMLQ2StepperElement extends Components.Q2Stepper, HTMLStencilElement {
        addEventListener<K extends keyof HTMLQ2StepperElementEventMap>(type: K, listener: (this: HTMLQ2StepperElement, ev: Q2StepperCustomEvent<HTMLQ2StepperElementEventMap[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 HTMLQ2StepperElementEventMap>(type: K, listener: (this: HTMLQ2StepperElement, ev: Q2StepperCustomEvent<HTMLQ2StepperElementEventMap[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 HTMLQ2StepperElement: {
        prototype: HTMLQ2StepperElement;
        new (): HTMLQ2StepperElement;
    };
    interface HTMLQ2StepperPaneElementEventMap {
        "activeChange": StepperPaneEvent;
        "contentChange": undefined;
        "statusChange": StepperPaneEvent;
        "tctActiveChange": StepperPaneEvent;
        "tctStatusChange": StepperPaneEvent;
    }
    /**
     * @name Stepper Pane
     * @category Display
     * @summary Use as a single step within a Stepper or Vertical Stepper.
     */
    interface HTMLQ2StepperPaneElement extends Components.Q2StepperPane, HTMLStencilElement {
        addEventListener<K extends keyof HTMLQ2StepperPaneElementEventMap>(type: K, listener: (this: HTMLQ2StepperPaneElement, ev: Q2StepperPaneCustomEvent<HTMLQ2StepperPaneElementEventMap[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 HTMLQ2StepperPaneElementEventMap>(type: K, listener: (this: HTMLQ2StepperPaneElement, ev: Q2StepperPaneCustomEvent<HTMLQ2StepperPaneElementEventMap[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 HTMLQ2StepperPaneElement: {
        prototype: HTMLQ2StepperPaneElement;
        new (): HTMLQ2StepperPaneElement;
    };
    interface HTMLQ2StepperVerticalElementEventMap {
        "change": {
        selectedStep: HTMLQ2StepperPaneElement;
        selectedStepId: string;
        currentStepId: string;
    };
        "tctChange": {
        selectedStep: HTMLQ2StepperPaneElement;
        selectedStepId: string;
        currentStepId: string;
    };
    }
    /**
     * @name Vertical Stepper
     * @category Display
     * @summary Use for guiding users through a multi-step workflow with vertical progress.
     */
    interface HTMLQ2StepperVerticalElement extends Components.Q2StepperVertical, HTMLStencilElement {
        addEventListener<K extends keyof HTMLQ2StepperVerticalElementEventMap>(type: K, listener: (this: HTMLQ2StepperVerticalElement, ev: Q2StepperVerticalCustomEvent<HTMLQ2StepperVerticalElementEventMap[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 HTMLQ2StepperVerticalElementEventMap>(type: K, listener: (this: HTMLQ2StepperVerticalElement, ev: Q2StepperVerticalCustomEvent<HTMLQ2StepperVerticalElementEventMap[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 HTMLQ2StepperVerticalElement: {
        prototype: HTMLQ2StepperVerticalElement;
        new (): HTMLQ2StepperVerticalElement;
    };
    interface HTMLQ2SurfaceElementEventMap {
        "tctClick": void;
    }
    /**
     * @name Surface
     * @category Display
     * @summary An unopinionated visual primitive. A plain block by default that gains visual treatment via attributes.
     */
    interface HTMLQ2SurfaceElement extends Components.Q2Surface, HTMLStencilElement {
        addEventListener<K extends keyof HTMLQ2SurfaceElementEventMap>(type: K, listener: (this: HTMLQ2SurfaceElement, ev: Q2SurfaceCustomEvent<HTMLQ2SurfaceElementEventMap[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 HTMLQ2SurfaceElementEventMap>(type: K, listener: (this: HTMLQ2SurfaceElement, ev: Q2SurfaceCustomEvent<HTMLQ2SurfaceElementEventMap[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 HTMLQ2SurfaceElement: {
        prototype: HTMLQ2SurfaceElement;
        new (): HTMLQ2SurfaceElement;
    };
    interface HTMLQ2TabContainerElementEventMap {
        "change": { value: string };
        "settled": undefined;
        "tctChange": { value: string };
    }
    /**
     * @name Tab Container
     * @category Display
     * @summary Use for switching between multiple views within the same context.
     */
    interface HTMLQ2TabContainerElement extends Components.Q2TabContainer, HTMLStencilElement {
        addEventListener<K extends keyof HTMLQ2TabContainerElementEventMap>(type: K, listener: (this: HTMLQ2TabContainerElement, ev: Q2TabContainerCustomEvent<HTMLQ2TabContainerElementEventMap[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 HTMLQ2TabContainerElementEventMap>(type: K, listener: (this: HTMLQ2TabContainerElement, ev: Q2TabContainerCustomEvent<HTMLQ2TabContainerElementEventMap[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 HTMLQ2TabContainerElement: {
        prototype: HTMLQ2TabContainerElement;
        new (): HTMLQ2TabContainerElement;
    };
    interface HTMLQ2TabPaneElementEventMap {
        "badge": boolean;
    }
    /**
     * @name Tab Pane
     * @category Display
     * @summary Use as a single tab within a Tab Container.
     */
    interface HTMLQ2TabPaneElement extends Components.Q2TabPane, HTMLStencilElement {
        addEventListener<K extends keyof HTMLQ2TabPaneElementEventMap>(type: K, listener: (this: HTMLQ2TabPaneElement, ev: Q2TabPaneCustomEvent<HTMLQ2TabPaneElementEventMap[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 HTMLQ2TabPaneElementEventMap>(type: K, listener: (this: HTMLQ2TabPaneElement, ev: Q2TabPaneCustomEvent<HTMLQ2TabPaneElementEventMap[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 HTMLQ2TabPaneElement: {
        prototype: HTMLQ2TabPaneElement;
        new (): HTMLQ2TabPaneElement;
    };
    interface HTMLQ2TagElementEventMap {
        "click": { value: string };
        "tctClick": { value: string };
    }
    /**
     * @name Tag
     * @category Display
     * @summary Use for displaying metadata labels or categories on content.
     */
    interface HTMLQ2TagElement extends Components.Q2Tag, HTMLStencilElement {
        addEventListener<K extends keyof HTMLQ2TagElementEventMap>(type: K, listener: (this: HTMLQ2TagElement, ev: Q2TagCustomEvent<HTMLQ2TagElementEventMap[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 HTMLQ2TagElementEventMap>(type: K, listener: (this: HTMLQ2TagElement, ev: Q2TagCustomEvent<HTMLQ2TagElementEventMap[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 HTMLQ2TagElement: {
        prototype: HTMLQ2TagElement;
        new (): HTMLQ2TagElement;
    };
    interface HTMLQ2TextareaElementEventMap {
        "change": { value: string };
        "input": { value: string };
        "tctChange": { value: string };
        "tctInput": { value: string };
    }
    /**
     * @name Textarea
     * @category Forms
     * @summary Use for multi-line text input like messages, comments, or lengthy descriptions.
     */
    interface HTMLQ2TextareaElement extends Components.Q2Textarea, HTMLStencilElement {
        addEventListener<K extends keyof HTMLQ2TextareaElementEventMap>(type: K, listener: (this: HTMLQ2TextareaElement, ev: Q2TextareaCustomEvent<HTMLQ2TextareaElementEventMap[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 HTMLQ2TextareaElementEventMap>(type: K, listener: (this: HTMLQ2TextareaElement, ev: Q2TextareaCustomEvent<HTMLQ2TextareaElementEventMap[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 HTMLQ2TextareaElement: {
        prototype: HTMLQ2TextareaElement;
        new (): HTMLQ2TextareaElement;
    };
    interface HTMLQ2ToastElementEventMap {
        "tctClose": { reason: 'close' | 'timeout' };
    }
    /**
     * @name Toast
     * @category Platform
     * @summary Use for brief, non-intrusive notifications that appear temporarily and do not require user interaction.
     */
    interface HTMLQ2ToastElement extends Components.Q2Toast, HTMLStencilElement {
        addEventListener<K extends keyof HTMLQ2ToastElementEventMap>(type: K, listener: (this: HTMLQ2ToastElement, ev: Q2ToastCustomEvent<HTMLQ2ToastElementEventMap[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 HTMLQ2ToastElementEventMap>(type: K, listener: (this: HTMLQ2ToastElement, ev: Q2ToastCustomEvent<HTMLQ2ToastElementEventMap[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 HTMLQ2ToastElement: {
        prototype: HTMLQ2ToastElement;
        new (): HTMLQ2ToastElement;
    };
    /**
     * @name Tooltip
     * @category Feedback
     * @summary Use for brief hints or explanations shown on hover or focus.
     */
    interface HTMLQ2TooltipElement extends Components.Q2Tooltip, HTMLStencilElement {
    }
    var HTMLQ2TooltipElement: {
        prototype: HTMLQ2TooltipElement;
        new (): HTMLQ2TooltipElement;
    };
    interface HTMLTectonTabPaneElementEventMap {
        "badge": boolean;
    }
    interface HTMLTectonTabPaneElement extends Components.TectonTabPane, HTMLStencilElement {
        addEventListener<K extends keyof HTMLTectonTabPaneElementEventMap>(type: K, listener: (this: HTMLTectonTabPaneElement, ev: TectonTabPaneCustomEvent<HTMLTectonTabPaneElementEventMap[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 HTMLTectonTabPaneElementEventMap>(type: K, listener: (this: HTMLTectonTabPaneElement, ev: TectonTabPaneCustomEvent<HTMLTectonTabPaneElementEventMap[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 HTMLTectonTabPaneElement: {
        prototype: HTMLTectonTabPaneElement;
        new (): HTMLTectonTabPaneElement;
    };
    interface HTMLElementTagNameMap {
        "click-elsewhere": HTMLClickElsewhereElement;
        "q2-action-group": HTMLQ2ActionGroupElement;
        "q2-action-sheet": HTMLQ2ActionSheetElement;
        "q2-avatar": HTMLQ2AvatarElement;
        "q2-badge": HTMLQ2BadgeElement;
        "q2-btn": HTMLQ2BtnElement;
        "q2-calendar": HTMLQ2CalendarElement;
        "q2-card": HTMLQ2CardElement;
        "q2-card-image": HTMLQ2CardImageElement;
        "q2-carousel": HTMLQ2CarouselElement;
        "q2-carousel-pane": HTMLQ2CarouselPaneElement;
        "q2-chart-area": HTMLQ2ChartAreaElement;
        "q2-chart-bar": HTMLQ2ChartBarElement;
        "q2-chart-donut": HTMLQ2ChartDonutElement;
        "q2-checkbox": HTMLQ2CheckboxElement;
        "q2-checkbox-group": HTMLQ2CheckboxGroupElement;
        "q2-context": HTMLQ2ContextElement;
        "q2-currency": HTMLQ2CurrencyElement;
        "q2-data-table": HTMLQ2DataTableElement;
        "q2-detail": HTMLQ2DetailElement;
        "q2-dropdown": HTMLQ2DropdownElement;
        "q2-dropdown-item": HTMLQ2DropdownItemElement;
        "q2-editable-field": HTMLQ2EditableFieldElement;
        "q2-example": HTMLQ2ExampleElement;
        "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;
        "q2-legend": HTMLQ2LegendElement;
        "q2-link": HTMLQ2LinkElement;
        "q2-list": HTMLQ2ListElement;
        "q2-loading": HTMLQ2LoadingElement;
        "q2-loading-element": HTMLQ2LoadingElementElement;
        "q2-loc": HTMLQ2LocElement;
        "q2-message": HTMLQ2MessageElement;
        "q2-meter": HTMLQ2MeterElement;
        "q2-modal": HTMLQ2ModalElement;
        "q2-month-picker": HTMLQ2MonthPickerElement;
        "q2-mutation-observer": HTMLQ2MutationObserverElement;
        "q2-optgroup": HTMLQ2OptgroupElement;
        "q2-option": HTMLQ2OptionElement;
        "q2-option-list": HTMLQ2OptionListElement;
        "q2-otp": HTMLQ2OtpElement;
        "q2-pagination": HTMLQ2PaginationElement;
        "q2-pill": HTMLQ2PillElement;
        "q2-popover": HTMLQ2PopoverElement;
        "q2-radio": HTMLQ2RadioElement;
        "q2-radio-group": HTMLQ2RadioGroupElement;
        "q2-relative-time": HTMLQ2RelativeTimeElement;
        "q2-resize-observer": HTMLQ2ResizeObserverElement;
        "q2-search": HTMLQ2SearchElement;
        "q2-section": HTMLQ2SectionElement;
        "q2-section-container": HTMLQ2SectionContainerElement;
        "q2-select": HTMLQ2SelectElement;
        "q2-stepper": HTMLQ2StepperElement;
        "q2-stepper-pane": HTMLQ2StepperPaneElement;
        "q2-stepper-vertical": HTMLQ2StepperVerticalElement;
        "q2-surface": HTMLQ2SurfaceElement;
        "q2-tab-container": HTMLQ2TabContainerElement;
        "q2-tab-pane": HTMLQ2TabPaneElement;
        "q2-tag": HTMLQ2TagElement;
        "q2-textarea": HTMLQ2TextareaElement;
        "q2-toast": HTMLQ2ToastElement;
        "q2-tooltip": HTMLQ2TooltipElement;
        "tecton-tab-pane": HTMLTectonTabPaneElement;
    }
}
declare namespace LocalJSX {
    interface ClickElsewhere {
        /**
          * Emitted when the user clicks outside the element
          * @deprecated Use 'tctChange' instead
         */
        "onChange"?: (event: ClickElsewhereCustomEvent<any>) => void;
        /**
          * Emitted when the user clicks outside the element
         */
        "onTctChange"?: (event: ClickElsewhereCustomEvent<any>) => void;
    }
    /**
     * @name Action Group
     * @category Display
     * @summary Use for laying out groups of buttons or links with consistent spacing.
     */
    interface Q2ActionGroup {
        /**
          * Whether the slotted elements 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.
          * @warning Vertical orientation is not supported for [Links](https://tecton.q2developer.com/design-system/q2-link/) or `"coin"` [Buttons](https://tecton.q2developer.com/design-system/q2-btn/), and will be set to "horizontal".
          * @default 'auto'
         */
        "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.
          * @default 440
         */
        "orientationThreshold"?: number;
    }
    /**
     * @name Action Sheet
     * @category Display
     * @summary Use for presenting a modal sheet.
     */
    interface Q2ActionSheet {
        "data"?: ActionSheetData;
        "hideClose"?: boolean;
        /**
          * Emitted when the action sheet is closed.
          * @deprecated Use 'tctClose' instead
         */
        "onClose"?: (event: Q2ActionSheetCustomEvent<ActionSheetListCloseData>) => void;
        /**
          * Emitted when the component has finished rendering.
          * @private
         */
        "onReady"?: (event: Q2ActionSheetCustomEvent<any>) => void;
        /**
          * Emitted when the action sheet is closed.
         */
        "onTctClose"?: (event: Q2ActionSheetCustomEvent<ActionSheetListCloseData>) => void;
        "title"?: string;
    }
    /**
     * @name Avatar
     * @category Display
     * @summary Use for displaying photos, initials, or icons for people, businesses, or accounts.
     */
    interface Q2Avatar {
        /**
          * A [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to display as the fallback.
          * @default 'person'
         */
        "icon"?: string;
        /**
          * A set of up to four initials to display as capitalized text. Takes priority over `name`.
         */
        "initials"?: string;
        /**
          * The name associated with the avatar. The initials of the first and last words provided will display as capital letters.
          * @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.
         */
        "src"?: string;
    }
    /**
     * @name Badge
     * @category Display
     * @summary Use for displaying counts, statuses, or indicators on other elements.
     */
    interface Q2Badge {
        /**
          * The number of characters to show. A maximum limit of 18 characters is acceptable.
         */
        "maxLength"?: number | undefined;
        /**
          * The size of the badge.
         */
        "size"?: 'default' | 'large' | undefined;
        /**
          * The stoplight color of the element when `theme` is not present.
         */
        "status"?: 'info' | 'alert' | 'warning' | 'success' | undefined;
        /**
          * The color of the badge when in the active state. The `theme` has higher priority than `status`.
         */
        "theme"?: 'primary' | 'secondary' | 'tertiary' | undefined;
        /**
          * What to display in the badge. Negative numbers will be shown as positive.
          * @info `q2-badge` also has limited support for slotted HTML elements.
          * @localizable
         */
        "value"?: number | string;
    }
    /**
     * @name Button
     * @category Forms
     * @summary Use for triggering actions including submit, save, cancel, or delete.
     */
    interface Q2Btn {
        /**
          * @private Role attribute for better semantic accessibility support
         */
        "_role"?: string;
        /**
          * @private Tooltip text set by a parent q2-tooltip component for accessibility.
         */
        "_tooltip"?: string;
        /**
          * Displays the component in an active state.
          * @info Only intended for use with the `badge` property.
          * @deprecated
         */
        "active"?: boolean;
        "ariaControls"?: string;
        "ariaExpanded"?: string;
        "ariaHasPopup"?: string;
        /**
          * @deprecated
         */
        "ariaLabel"?: string;
        "ariaPressed"?: string;
        "ariaSelected"?: string;
        /**
          * Displays the component in a smaller, badge style.
          * @deprecated
         */
        "badge"?: boolean;
        /**
          * The component expands to fill the width of its parent element.
         */
        "block"?: boolean;
        /**
          * @deprecated
         */
        "color"?: string;
        "description"?: string;
        /**
          * Marks the component as disabled and displays a `not-allowed` cursor on hover.
         */
        "disabled"?: boolean;
        /**
          * @deprecated
         */
        "fab"?: boolean;
        /**
          * Associates the button with a `<form>` element by form ID.
         */
        "form"?: string;
        /**
          * Hides the `label`, and assigns its value to the `aria-label` attribute on the `<button>` element.
         */
        "hideLabel"?: boolean;
        /**
          * Indicates the role of the component in the workflow, which will apply appropriate styling to the component.
         */
        "intent"?: | 'coin'
        | 'neutral-text'
        | 'neutral'
        | 'workflow-destroy'
        | 'workflow-escape'
        | 'workflow-primary'
        | 'workflow-secondary';
        /**
          * Defines the text content of the button if it is not provided in the `<slot>` of the element. Also used for the `aria-label` of the `<button>` element when only displaying an icon.
          * @localizable
         */
        "label"?: string;
        /**
          * Displays the button with a loading spinner to indicate something is happening in the background and the user should not click again.
         */
        "loading"?: boolean;
        /**
          * Emitted when the button is clicked.
         */
        "onTctClick"?: (event: Q2BtnCustomEvent<any>) => void;
        /**
          * Defines the size of q2-btn, it renders as default size if not provided.
         */
        "size"?: 'small' | 'medium' | 'large';
        "tabIndex"?: number;
        /**
          * The default behavior of the button.
          * @default 'button'
         */
        "type"?: string;
    }
    /**
     * @name Calendar
     * @category Forms
     * @summary Use for selecting a date from a calendar popover.
     */
    interface Q2Calendar {
        /**
          * @deprecated
         */
        "ariaLabel"?: string;
        /**
          * Detects the year automatically based on today's date when the user presses the `Escape` key or the `Blur` mouse event occurs. Setting `future` or `past` as the value will increase or decrease the year by one, respectively.
          * @default 'current'
         */
        "assume"?: 'current' | 'future' | 'past';
        /**
          * @deprecated
         */
        "buttonLabel"?: string;
        /**
          * A label shown at the top of the popover date picker.
         */
        "calendarLabel"?: string;
        /**
          * Display a button in the input field allowing the user to clear their selection.
         */
        "clearable"?: boolean;
        /**
          * Specifies a time of day after which a date is no longer valid.
          * @warning Must be a valid ISO date string.
         */
        "cutoffTime"?: string;
        /**
          * The most concise way to define valid days of the week for calendar. Each day of the week has a checksum value:  - Sunday = 1 - Monday = 2 - Tuesday = 4 - Wednesday = 8 - Thursday = 16 - Friday = 32 - Saturday = 64  Add the checksum values of your desired valid days together, and set `daysOfWeekChecksum` to that summed value.  **Example:**
          * @snippet element.daysOfWeekChecksum = 127 // All days of the week are valid element.daysOfWeekChecksum = 62; // Only weekdays are valid element.daysOfWeekChecksum = 65; // Only Saturday and Sunday are valid
         */
        "daysOfWeekChecksum"?: number;
        /**
          * Disable the input field.
         */
        "disabled"?: boolean;
        /**
          * Text that displays as the placeholder when the field is marked `disabled`.
          * @localizable
         */
        "disabledMsg"?: string;
        /**
          * Text that appears at the bottom of the popover date picker.
         */
        "disclaimer"?: string;
        /**
          * Determines the display format of the date field value.  Must follow the [date-fns](https://date-fns.org/v2.28.0/docs/format) token specification.
         */
        "displayFormat"?: string;
        /**
          * Defines the last selectable date in the date picker popover.
          * @warning Must be a valid ISO date string.
         */
        "endDate"?: string;
        /**
          * Each item in the `errors` array will appear below the input field when the field is focused and `typeable` is `true`.
          * @localizable
         */
        "errors"?: string[];
        /**
          * Hide the input field's ` <label> ` element from view.
         */
        "hideLabel"?: boolean;
        /**
          * Each item in the `hints` array will appear below the input field when the field is focused and `typeable` is true.
          * @localizable
         */
        "hints"?: string[];
        /**
          * Show error styles when the calendar is in an errant state.
         */
        "invalid"?: boolean;
        /**
          * Defines an explicit date blacklist.
          * @warning Must be a valid ISO date string.
          * @info When explicit date definitions like `invalidDates` is used, other date validity methods like `daysOfWeekChecksum` are overriden.
         */
        "invalidDates"?: string[];
        /**
          * The visible label for the `q2-calendar` input field.
         */
        "label"?: string;
        /**
          * Emitted when a date is selected or typed in the input field.
          * @legacyEvent 
          * @deprecated Use 'tctChange' instead
         */
        "onChange"?: (event: Q2CalendarCustomEvent<{
        // ISO formatted date
        value: string | null;
    }>) => void;
        /**
          * Emitted when an invalid date is entered into the field.
          * @deprecated Use 'tctError' instead
         */
        "onError"?: (event: Q2CalendarCustomEvent<{ errors: { message: string; errorCode: string }[] }>) => void;
        /**
          * Emitted when a valid date is entered or selected.
          * @deprecated Use 'tctSuccess' instead
         */
        "onSuccess"?: (event: Q2CalendarCustomEvent<{
        // ISO formatted date
        value: string;
    }>) => void;
        /**
          * Emitted when a date is selected or typed in the input field.
          * @legacyEvent
         */
        "onTctChange"?: (event: Q2CalendarCustomEvent<{
        // ISO formatted date
        value: string | null;
    }>) => void;
        /**
          * Emitted when an invalid date is entered into the field.
         */
        "onTctError"?: (event: Q2CalendarCustomEvent<{ errors: { message: string; errorCode: string }[] }>) => void;
        /**
          * Emitted when a valid date is entered or selected.
         */
        "onTctSuccess"?: (event: Q2CalendarCustomEvent<{
        // ISO formatted date
        value: string;
    }>) => void;
        /**
          * @deprecated
         */
        "onsuccess"?: (e: CustomEvent) => void;
        /**
          * Determine whether the popover is open or closed.
          * @readonly
         */
        "open"?: boolean;
        /**
          * Appends "(optional)" to the label and sets `aria-required="false"`.
         */
        "optional"?: boolean;
        /**
          * Text that appears within the input field when it is blurred and empty. Placeholder text disappears when the user focuses on the field and provides input.
         */
        "placeholder"?: string;
        /**
          * @deprecated
         */
        "popDirection"?: 'up' | 'down';
        /**
          * Aligns the popover date picker to the left or right side of the input field.
         */
        "popoverAlignment"?: 'left' | 'right';
        /**
          * Force the direction of the popover date picker when it opens. If no value is passed, the component will auto-detect the direction based on available space.
         */
        "popoverDirection"?: 'up' | 'down';
        /**
          * @deprecated 
          * @default 355
         */
        "popoverMinHeight"?: 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.
          * @default null
         */
        "popoverMode"?: 'legacy';
        /**
          * The field's content is not editable, but the field remains focusable.  Appends "(readonly)" to the field label. Supersedes `optional` if both are `true`.
         */
        "readonly"?: boolean;
        /**
          * Defines the first selectabe date in the date picker popover.
          * @warning Must be a valid ISO date string.
         */
        "startDate"?: string;
        /**
          * The user can type in the field. Only available in desktop browsers.
         */
        "typeable"?: boolean;
        /**
          * Show success styles when the calendar is in a valid state. The error state takes precedence when both are set.
          * @default false
         */
        "valid"?: boolean;
        /**
          * Defines an explicit date whitelist.
          * @warning Must be a valid ISO date string.
          * @info When explicit date definitions like `validDates` is used, other date validity methods like `daysOfWeekChecksum` are overriden.
         */
        "validDates"?: string[];
        /**
          * The value of the `q2-calendar` element, e.g. the selected date.  **How to change or clear the value with javascript:**
          * @snippet // change date element.value = '2022-12-21'; // clear date element.value = null;
         */
        "value"?: string | { toDate(): Date };
    }
    /**
     * @name Card
     * @category Display
     * @summary Use for grouping related content in a contained, elevated surface.
     */
    interface Q2Card {
        /**
          * The [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to be displayed in the avatar location.  Please use q2-item instead.
          * @deprecated
         */
        "avatarIcon"?: string;
        /**
          * The initials to be placed in the avatar of the card.  Please use q2-item instead.
          * @deprecated
         */
        "avatarInitials"?: string;
        /**
          * The name to be used for the avatar of the card which will be converted to initials.  Please use q2-item instead.
          * @deprecated
         */
        "avatarName"?: string;
        /**
          * The source of the image to be displayed in the avatar location.  Please use q2-item instead.
          * @deprecated
         */
        "avatarSrc"?: string;
        /**
          * Indicates that a bar should be displayed and which color to use. Predefined colors that may be used as values are:  - primary - secondary - tertiary - info - success - warning - alert - accent-1 - accent-2 - accent-3 - accent-4 - accent-5 - accent-6 - accent-7 - accent-8 - accent-9 - accent-10 - accent-11 - accent-12  Any other value (e.g. `"#990000"`, `"purple"`) will be treated as a custom color.
         */
        "bar"?: string;
        /**
          * The description of the card (truncated after two lines).  Please use q2-item instead.
          * @deprecated
         */
        "description"?: string;
        /**
          * The size of the box-shadow applied to the component, giving it a sense of depth.
          * @info Set to `0` to disable.
          * @default 2
         */
        "elevation"?: 0 | 1 | 2 | 3 | 4 | 5;
        /**
          * Display the card with a view optimized for smaller displays.  Please use q2-item instead.
          * @deprecated
         */
        "isSmall"?: boolean;
        /**
          * Display the card with no borders, padding, drop-shadows, or clickable behavior.  Please use q2-item instead.
          * @deprecated
         */
        "isStatic"?: boolean;
        /**
          * Emitted when the card is clicked and the `url` property is not provided.
          * @deprecated Use 'tctClick' instead
         */
        "onClick"?: (event: Q2CardCustomEvent<undefined>) => void;
        /**
          * Emitted when the card is clicked and the `url` property is not provided.
         */
        "onTctClick"?: (event: Q2CardCustomEvent<undefined>) => void;
        /**
          * Target to be applied to the link when a URL is provided.
          * @warning Do not use in Online Banking. Use the `openURL` capability on the click event instead.
         */
        "target"?: '_self' | '_blank' | '_parent' | '_top';
        /**
          * The title of the card.  Please use q2-item instead.
          * @deprecated
         */
        "title"?: string;
        /**
          * Alters the interactive behavior of the card while maintaining visual appearance.
          * @default 'clickable'
         */
        "type"?: 'clickable' | 'non-clickable';
        /**
          * URL to navigate the user to when the card is clicked.
          * @warning Do not use in Online Banking. Use the `openURL` capability on the click event instead.
         */
        "url"?: string;
    }
    /**
     * @name Card Image
     * @summary Displays a visual representation of a credit or debit card with customizable styling
     * and card details. Supports horizontal and vertical orientations with responsive sizing
     * that adapts content visibility based on container width.
     */
    interface Q2CardImage {
        /**
          * Background style for the base layer. - `'primary'` | `'secondary'` | `'tertiary'`: Solid theme colors - `'gradient'`: Grayscale gradient (themable via CSS variables) - Custom string: URL/path to an image file (SVG, PNG, JPG)
          * @default 'primary'
         */
        "background"?: 'primary' | 'secondary' | 'tertiary' | 'gradient' | string;
        /**
          * The card holder name to display on the card. Only rendered at large and medium sizes. When not provided, neither the label nor the name is displayed.
         */
        "cardHolder"?: string;
        /**
          * Controls whether the "CARD HOLDER" label is displayed above the card holder name. The label is only supported at large size. At medium size, only the name is shown regardless of this prop. When `false`, only the name is shown without the label.
          * @default true
         */
        "cardHolderLabel"?: boolean;
        /**
          * The card number to display. Only the last 4 characters are used, prefixed with `**** **** **** `. The last 4 characters must all be digits; otherwise the card number is not displayed. Not rendered at tiny size.
         */
        "cardNumber"?: string;
        /**
          * The status of the card. When set, renders a status banner at the top of the card for card sizes medium and up.
         */
        "cardStatus"?: | 'digital'
        | 'enabled'
        | 'new'
        | 'disabled'
        | 'locked'
        | 'damaged'
        | 'lost'
        | 'stolen'
        | 'lost or stolen';
        /**
          * The card type label displayed alongside the expiration date. Not rendered at tiny size.
         */
        "cardType"?: 'atm' | 'debit';
        /**
          * The color of the card type text. Only applies when `cardType` is set.
         */
        "cardTypeColor"?: 'black' | 'white';
        /**
          * The chip style displayed on the card. Not rendered at tiny size. - `'gold'`: Gold/brass colored EMV chip - `'silver'`: Silver/platinum colored EMV chip
         */
        "chip"?: 'gold' | 'silver';
        /**
          * If `true`, the card image is wrapped in a `q2-btn` to handle click interactions.
          * @default false
         */
        "clickable"?: boolean;
        /**
          * If `true`, the card image is visually disabled and not clickable. Does not affect the dropdown.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * The expiration date of the card in ISO 8601 extended format (`YYYY-MM`). Displayed as `MM / YY` on the card. Only rendered at large and medium sizes. When not provided, neither the label nor the date value is displayed.
         */
        "expirationDate"?: string;
        /**
          * Controls whether the "EXPIRES" label is displayed above the expiration date. The label is only supported at large size. At medium size, only the date value is shown regardless of this prop. When `false`, only the date value is shown without the label.
          * @default true
         */
        "expirationDateLabel"?: boolean;
        /**
          * Path to the financial institution logo image (SVG, PNG, or JPG). Max display dimensions: 280x45 for horizontal cards, 250x45 for vertical cards. When not provided, an empty placeholder div is rendered to maintain consistent card structure.
         */
        "fiLogo"?: string;
        /**
          * If `true`, the component uses `display: inline-block`. If `false`, uses `display: block`.
          * @default false
         */
        "inline"?: boolean;
        /**
          * Emitted when a clickable card is clicked. Contains card details.
         */
        "onTctClick"?: (event: Q2CardImageCustomEvent<{
        cardNumber: string | undefined;
        cardStatus: string | undefined;
        statusTextOverride: string | undefined;
        cardHolder: string | undefined;
        expirationDate: string | undefined;
        cardType: string | undefined;
        vendor: string | undefined;
    }>) => void;
        /**
          * The orientation of the card image.
          * @default 'horizontal'
         */
        "orientation"?: 'horizontal' | 'vertical';
        /**
          * Background style for the overlay layer. When undefined, the overlay is not rendered. - `'dot'`: CSS-generated dot pattern with mix-blend-mode overlay (themable via CSS variables) - Custom string: URL/path to an image file (SVG, PNG, JPG)
         */
        "overlay"?: 'dot' | string;
        /**
          * Overrides the default status banner text (which is the cardStatus value in uppercase). Maximum 14 characters (including spaces) to ensure the text fits within the banner.
         */
        "statusTextOverride"?: string;
        /**
          * Accessible label for the card image. When provided, this value is applied as `aria-label` on either the card container (non-clickable) or the wrapping button (clickable).
         */
        "tctAriaLabel"?: string;
        /**
          * The card vendor. Renders the vendor logo in the bottom-right of the card. Not rendered at tiny size.
         */
        "vendor"?: 'mastercard' | 'visa';
        /**
          * The color variant of the vendor logo. Only applies when `vendor` is set. Defaults to `'white'` for Visa and `'brand'` for Mastercard.
         */
        "vendorColor"?: 'black' | 'brand' | 'white';
        /**
          * Path to a custom vendor logo image (SVG, PNG, or JPG). When set, this overrides the `vendor` prop and displays the custom logo. Not rendered at tiny size.
         */
        "vendorLogo"?: string;
    }
    /**
     * @name Carousel
     * @category Display
     * @summary Use for cycling through a series of content slides with swipe or button navigation.
     */
    interface Q2Carousel {
        /**
          * @deprecated
         */
        "ariaLabel"?: string;
        /**
          * Position to show the navigation arrows `float`: vertically centered and float over the carousel pane. `bottom`: bottom area around pagination indicator, the arrows at far left/right edges. `hug`: bottom area around pagination indicator and wraps the pagination indicator.
         */
        "arrowPosition"?: 'bottom' | 'hug' | 'float' | undefined;
        /**
          * Keeps all carousel panes at the height of the tallest pane.
          * @default false
         */
        "autoHeight"?: boolean;
        /**
          * Enables the auto-play feature and starts the carousel without user input.
          * @default false
         */
        "autoPlay"?: boolean;
        /**
          * Adjusts width of active pane automatically in compact screen based on the carousel width.
          * @default false
         */
        "autoWidth"?: boolean;
        /**
          * Breakpoint pixel number for switching to compact mode when autoWIdth is enabled, default is 500.
          * @default 500
         */
        "compactBreakpoint"?: number;
        /**
          * Display a gradient fade on the left and right edges of the carousel.
         */
        "edgeFade"?: boolean;
        /**
          * Display the carousel panes as frameless with no container or shadow.
          * @default false
         */
        "framelessPanes"?: boolean;
        /**
          * Display the carousel panes full-width rather than with peeking content.
          * @default false
         */
        "fullWidthPanes"?: boolean;
        /**
          * Hide the dots below the carousel that provide navigation control and indicate which page is currently active.
          * @default false
         */
        "hidePagination"?: boolean;
        /**
          * The currently displayed carousel pane.
          * @default 1
         */
        "index"?: number;
        /**
          * The label that is associated with the carousel. This is not displayed visually, but is presented by screen readers.
          * @localizable 
          * @default 'tecton.element.carousel.ariaLabel'
         */
        "label"?: string;
        /**
          * Enables continuous looping so navigating past the last pane wraps to the first (and vice versa). Defaults to enabled; pass `false` to disable.
         */
        "loop"?: boolean;
        /**
          * Emitted when the displayed carousel pane changes.
          * @deprecated Use 'tctChange' instead
         */
        "onChange"?: (event: Q2CarouselCustomEvent<{ index: number }>) => void;
        /**
          * Emitted when the displayed carousel pane changes.
         */
        "onTctChange"?: (event: Q2CarouselCustomEvent<{ index: number }>) => void;
        /**
          * Display navigation arrow buttons as another way to navigate the carousel.
          * @default false
         */
        "showNavigationArrows"?: boolean;
    }
    /**
     * @name Carousel Pane
     * @category Display
     * @summary Use as a single slide within a Carousel.
     */
    interface Q2CarouselPane {
        /**
          * Used by `q2-carousel` to determine the pane's index.
          * @private
         */
        "index"?: number;
        /**
          * Used by `q2-carousel` to indicate which pane is currently active.
          * @private
         */
        "isActivePane"?: boolean;
        /**
          * Text used only as an `aria-label` for accessibility purposes.
          * @localizable
         */
        "label"?: string;
        /**
          * Emitted when the pane is clicked.
          * @deprecated Use 'tctClickCarouselPane' instead
         */
        "onClickCarouselPane"?: (event: Q2CarouselPaneCustomEvent<{ paneIndex: number; pane: HTMLElement }>) => void;
        /**
          * Emitted when the pane is clicked.
         */
        "onTctClickCarouselPane"?: (event: Q2CarouselPaneCustomEvent<{ paneIndex: number; pane: HTMLElement }>) => void;
        /**
          * Used by `q2-carousel` to indicate how many panes are in the carousel.
          * @private
         */
        "siblingCount"?: number;
        /**
          * Used by `q2-carousel` to indicate the pane should be frameless.
          * @private
         */
        "slotFrameless"?: boolean;
    }
    /**
     * @name Area Chart
     * @category Data Visualization
     * @summary Use for showing trends over time with filled areas under lines.
     */
    interface Q2ChartArea {
        /**
          * Controls alignment of the chart name when its visible.
         */
        "alignChartName"?: 'left' | 'right' | 'center';
        /**
          * Controls area fill color of chart. Accepts variables, hex codes, and CSS color names.  **Examples:**
          * @snippet element.areaColor = "#ff0000"; element.areaColor = "papayawhip"; element.areaColor = "var(--t-accent-1)";
         */
        "areaColor"?: string;
        /**
          * The title of the chart. We recommend always including this for accessibility purposes.  It is hidden by default, but can be made visible with the `showChartName` variable.
          * @localizable
         */
        "chartName"?: string;
        /**
          * A subtitile to the chart name. Often used to provide a brief description of what the data represents.
         */
        "chartSubTitle"?: string;
        /**
          * An array of objects that contain the data to be displayed.
          * @default []
         */
        "data"?: ChartData[];
        /**
          * Allows control of how labels on the name axis will be handled if the text length is wider than the available space. Values will ellipsize if the truncate option is used.
         */
        "dataNamesOverflow"?: 'break' | 'truncate';
        /**
          * Sets width available for labels on the name axis. It can be used in coordination with `dataNamesOverflow` to control where the label text breaks or truncates.
         */
        "dataNamesWidth"?: number;
        /**
          * Controls whether values on the value axis are shown as numbers or as currency.
         */
        "format"?: 'currency' | 'default';
        /**
          * Can be used in coordination with the currency format property to control decimal handling. Accepts `Ndec` where N is a number. (e.g. `2dec`)
         */
        "formatModifier"?: string;
        /**
          * Controls the direction or viibility of grid lines on the chart.
         */
        "gridLines"?: 'horizontal' | 'vertical' | 'off';
        /**
          * 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 };
        /**
          * Controls visibility of labels on the name axis.
          * @default false
         */
        "hideNameAxisLabels"?: boolean;
        /**
          * Controls visibility of labels on the value axis.
          * @default false
         */
        "hideValueAxisLabels"?: boolean;
        /**
          * Controls color of the data line on the chart. Accepts variables, hex codes, and CSS color names.  **Examples:**
          * @snippet element.areaColor = "#ff0000"; element.areaColor = "papayawhip"; element.areaColor = "var(--t-accent-1)";
         */
        "lineColor"?: string;
        /**
          * Controls the position of text on the names axis by centering the text to the bar at a 45° angle. Can be used when space is limited or with longer name labels.
          * @default false
         */
        "offsetDataNames"?: boolean;
        /**
          * Controls the position of text on the values axis by centering the text to the bar at a 45° angle. Can be used when space is limited or with longer name labels.
          * @default false
         */
        "offsetDataValues"?: boolean;
        /**
          * Emitted when a data point is clicked.
          * @deprecated Use 'tctChange' instead
         */
        "onChange"?: (event: Q2ChartAreaCustomEvent<{
        index: number;
        data: ChartData;
    }>) => void;
        /**
          * Emitted when a data point is clicked.
         */
        "onTctChange"?: (event: Q2ChartAreaCustomEvent<{
        index: number;
        data: ChartData;
    }>) => void;
        /**
          * Controls color of vertical pointer on a line chart. Accepts variables, hex codes, and CSS color names.  **Examples:**
          * @snippet element.areaColor = "#ff0000"; element.areaColor = "papayawhip"; element.areaColor = "var(--t-accent-1)";
         */
        "pointerLineColor"?: string;
        /**
          * Controls the style of the vertical poiner line.
         */
        "pointerLineStyle"?: 'solid' | 'dashed';
        /**
          * Controls the visibility of the chart name at the top of the chart.
          * @default false
         */
        "showChartName"?: boolean;
        /**
          * Controls the visibility of a value label when a data point is shown on the chart.
          * @default false
         */
        "showDatapointLabels"?: boolean;
        /**
          * Controls making the area fill color into a gradient. The gradient starts at the top with the `areaColor` value, and fades to white.
          * @default false
         */
        "showGradient"?: boolean;
        /**
          * Controls the xAxis max value.
         */
        "xMax"?: number;
        /**
          * Controls the xAxis min value.
         */
        "xMin"?: number;
        /**
          * Controls the yAxis max value.
         */
        "yMax"?: number;
        /**
          * Controls the yAxis min value.
         */
        "yMin"?: number;
    }
    /**
     * @name Bar Chart
     * @category Data Visualization
     * @summary Use for comparing values across categories with horizontal or vertical bars.
     */
    interface Q2ChartBar {
        /**
          * Controls alignment of the chart name when its visible.
         */
        "alignChartName"?: 'left' | 'right' | 'center';
        /**
          * The title of the chart. We recommend always including this for accessibility purposes.  It is hidden by default, but can be made visible with the `showChartName` variable.
          * @localizable
         */
        "chartName"?: string;
        /**
          * A subtitile to the chart name. Often used to provide a brief description of what the data represents.
         */
        "chartSubTitle"?: string;
        /**
          * Controls the color of all bars in the chart. Can be overridden at the individual data point level. Accept variables, hex codes, an CSS color names.  **Examples:**
          * @snippet element.areaColor = "#ff0000"; element.areaColor = "papayawhip"; element.areaColor = "var(--t-accent-1)";
         */
        "color"?: string;
        /**
          * An array of objects that contain the data to be displayed.
          * @default []
         */
        "data"?: ChartData[];
        /**
          * Allows control of how labels on the name axis will be handled if the text length is wider than the available space. Values will ellipsize if the truncate option is used.
         */
        "dataNamesOverflow"?: 'break' | 'truncate';
        /**
          * Sets width available for labels on the name axis. It can be used in coordination with `dataNamesOverflow` to control where the label text breaks or truncates.
         */
        "dataNamesWidth"?: number;
        /**
          * Controls whether values on the value axis are shown as numbers or as currency.
         */
        "format"?: 'currency' | 'default';
        /**
          * Can be used in coordination with the currency format property to control decimal handling. Accepts `Ndec` where N is a number. (e.g. `2dec`)
         */
        "formatModifier"?: string;
        /**
          * 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 };
        /**
          * Controls visibility of labels on the name axis.
          * @default false
         */
        "hideBarLabels"?: boolean;
        /**
          * Controls visibility of labels on the value axis.
          * @default false
         */
        "hideValueAxisLabels"?: boolean;
        /**
          * Controls the position of text on the names axis by centering the text to the bar at a 45° angle. Can be used when space is limited or with longer name labels.
          * @default false
         */
        "offsetDataNames"?: boolean;
        /**
          * Controls the position of text on the values axis by centering the text to the bar at a 45° angle. Can be used when space is limited or with longer name labels.
          * @default false
         */
        "offsetDataValues"?: boolean;
        /**
          * Controls which axes are the value and name axes. When `vertical`, values are on the y-axis and names are on the x-axis, with bars shown vertically on the chart. When `horizontal`, names are on the y-axis and values are on the x-axis, with bars shown horizontally on the chart.
         */
        "orientation"?: 'vertical' | 'horizontal';
        /**
          * Controls the visibility of the chart name at the top of the chart.
          * @default false
         */
        "showChartName"?: boolean;
        /**
          * By default, the sorting of the bars on the chart is controlled by the order the values are in the data array. When set to `true`, values on the bar will be re-sorted in descending order.
          * @default false
         */
        "sort"?: boolean;
    }
    /**
     * @name Donut Chart
     * @category Data Visualization
     * @summary Use for showing proportions of a whole as segments in a ring.
     */
    interface Q2ChartDonut {
        /**
          * The title of the chart. We recommend always including this for accessibility purposes.  It is hidden by default, but can be made visible with the `showChartName` variable.
          * @localizable
         */
        "chartName"?: string;
        /**
          * Controls when numbers displayed as currency, if they are whole numbers, they will not include the .00.
         */
        "currencyRound"?: boolean;
        /**
          * An array of objects that contain the data to be displayed.
          * @default []
         */
        "data"?: DonutChartData[];
        /**
          * Controls whether values on the value axis are shown as numbers or as currency.
         */
        "format"?: 'currency' | 'default';
        /**
          * The amount which the slice will scale when hovered.
          * @default 5
         */
        "hoverScaleSize"?: number;
        /**
          * The inner radius of the chart slices which is represeted by a percentage of the radius.
          * @warning If you update this property to be greater than or equal to the `outerRadius`, we automatically set it to be 15% less than the current `outerRadius` to prevent display issues.
          * @default '70%'
         */
        "innerRadius"?: string;
        /**
          * Determine whether the data in the center renders inside a button element.
          * @info This also enables extra keyboard controls when the button is focused.
         */
        "isClickable"?: boolean;
        /**
          * The minimum size of the chart slizes which is represented as a percentage of the circumferences.
          * @default '2.5%'
         */
        "minSliceSize"?: string;
        /**
          * Emitted when a slice is selected.
          * @deprecated Use 'tctChange' instead
         */
        "onChange"?: (event: Q2ChartDonutCustomEvent<DonutChartData>) => void;
        /**
          * Emitted when the center button is clicked.  Requires the `isClickable` prop to be set to `true`.
          * @deprecated Use 'tctClick' instead
         */
        "onClick"?: (event: Q2ChartDonutCustomEvent<DonutChartData>) => void;
        /**
          * Emitted when a slice is selected.
         */
        "onTctChange"?: (event: Q2ChartDonutCustomEvent<DonutChartData>) => void;
        /**
          * Emitted when the center button is clicked.  Requires the `isClickable` prop to be set to `true`.
         */
        "onTctClick"?: (event: Q2ChartDonutCustomEvent<DonutChartData>) => void;
        /**
          * The outer radius of the chart slices which is represented by a percentage of the radius.
          * @warning If you update this property to be less than or equal to the `innerRadius`, we automatically set it to be 15% greater than the current `innerRadius` to prevent display issues.
          * @default '85%'
         */
        "outerRadius"?: string;
        /**
          * The id of the data point that is currently selected in the chart. You may set this to pre-select a data point on render, or force a selection change.
         */
        "selectedId"?: string;
        /**
          * The amount which the slice will separate from the chart when selected.
          * @default 10
         */
        "selectedOffset"?: number;
        /**
          * Determines whether the legend is displayed.
          * @info The legend is a list of the data points in the chart and their colors.
          * @default false
         */
        "showLegend"?: boolean;
        /**
          * The icon that displays by default when no slices are selected.
         */
        "summaryIcon"?: string;
        /**
          * The name that displays by default when no slices are selected.
          * @localizable
         */
        "summaryName"?: string;
    }
    /**
     * @name Checkbox
     * @category Forms
     * @summary Use as a single binary choice; nest within a Checkbox Group for grouped selection.
     */
    interface Q2Checkbox {
        /**
          * @private Tooltip text set by a parent q2-tooltip component for accessibility.
         */
        "_tooltip"?: string;
        /**
          * Determine which side of the label the checkbox will render on.
         */
        "align"?: string;
        /**
          * @deprecated Use 'align' instead
         */
        "alignment"?: string;
        /**
          * @deprecated
         */
        "ariaLabel"?: string;
        /**
          * The state of the checkbox. This modifies the visual appearance of the element.
          * @default false
         */
        "checked"?: boolean;
        /**
          * Populates a description that is displayed beneath the label.
          * @localizable
         */
        "description"?: string;
        /**
          * Disables the checkbox and prevents interaction.
         */
        "disabled"?: boolean;
        /**
          * Used by q2-checkbox-group to disable all checkboxes in the group
          * @private
         */
        "groupDisabled"?: boolean;
        /**
          * Determines if the component should display in an errant state.
          * @default false
         */
        "hasError"?: boolean;
        /**
          * Hide's the field's `<label>` element from view.
          * @warning Only use when a visible label is impractical.
         */
        "hideLabel"?: boolean;
        /**
          * Used on a parent checkbox in a checkbox group (e.g. "Select All") to indicate that some, but not all, checkboxes in a group are checked.  When `true`, the "indeterminate" selection style is applied. To apply the standard "checked" selection style, `checked` must be true, and `indeterminate` must be `false`.
         */
        "indeterminate"?: boolean;
        /**
          * The visible label text for the checkbox. Appears to the right of the box for 'default' and 'favorite' checkboxes, and to the left for 'toggle' checkboxes. Yielded content will be adjacent to this text.
          * @localizable
         */
        "label"?: string;
        /**
          * A static string used to establish a symbolic relationship between checkboxes.
         */
        "name"?: string;
        /**
          * Emitted when the checkbox is toggled.
          * @deprecated Use 'tctChange' instead
          * @legacyEvent
         */
        "onChange"?: (event: Q2CheckboxCustomEvent<{ value: string; checked: boolean }>) => void;
        /**
          * Emitted when the checkbox is toggled.
          * @legacyEvent
         */
        "onTctChange"?: (event: Q2CheckboxCustomEvent<{ value: string; checked: boolean }>) => void;
        /**
          * The field is not interactive, but remains focusable.
         */
        "readonly"?: boolean;
        /**
          * The field is not interactive, but remains focusable.
         */
        "slotReadonly"?: boolean;
        /**
          * The visual style of the checkbox. This does not need to be defined for a standard checkbox.
         */
        "type"?: 'favorite' | 'toggle';
        /**
          * A static reference value for the checkbox.
         */
        "value"?: string;
    }
    /**
     * @name Checkbox Group
     * @category Forms
     * @summary Use for selecting multiple options from a set of checkboxes.
     */
    interface Q2CheckboxGroup {
        /**
          * Determines if all checkboxes in the group are put into a `disabled` state.
         */
        "disabled"?: boolean;
        /**
          * Determines if the component should display in an errant state.
         */
        "hasError"?: boolean;
        /**
          * Hide's the group's `<label>` element from view.
          * @warning Only use when a visible label is impractical.
         */
        "hideLabel"?: boolean;
        /**
          * The label that displays above all the checkboxes.
          * @localizable
         */
        "label"?: string;
        /**
          * Emitted when the checkbox selection changes.
          * @deprecated Use 'tctChange' instead
         */
        "onChange"?: (event: Q2CheckboxGroupCustomEvent<any>) => void;
        /**
          * Emitted when the checkbox selection changes.
         */
        "onTctChange"?: (event: Q2CheckboxGroupCustomEvent<any>) => void;
        /**
          * Determines if the component is marked as `optional`.
         */
        "optional"?: boolean;
        /**
          * Determines if all the checkboxes are marked as `readonly`.
         */
        "readonly"?: boolean;
        /**
          * Can be used to get and set the checked status of each `<q2-checkbox>` element contained within the group.  **Example:**
          * @snippet element.value = {   'checkbox-value-1': true,   'checkbox-value-2': false,   'checkbox-value-3': true, };  // Also accepts partial values element.value = {   'checkbox-value-2': false, }
         */
        "value"?: object;
    }
    /**
     * @name Context
     * @category Display
     * @summary Use for displaying supplementary information or hints alongside content.
     */
    interface Q2Context {
        /**
          * Renders a horizontal line between the description and the action-group/footer slots.
         */
        "separator"?: boolean;
    }
    /**
     * @name Currency
     * @category Text
     * @summary Use for displaying formatted monetary amounts with proper locale.
     */
    interface Q2Currency {
        /**
          * The amount you want formatted.
         */
        "amount"?: number;
        /**
          * Formats the `amount` to a specific currency.
          * @default 'USD'
         */
        "currency"?: string;
        /**
          * Formats to the language provided. Accepts multiple locales in an array as sequential fallbacks.
          * @default document.documentElement.lang || 'en-US'
         */
        "locale"?: string | string[];
        /**
          * Determine how the positive or negative sign should display.  Behavior: - `accounting`: No sign displays for positive amounts and parentheses wrap negative amounts. - `always`: Always display the sign. - `auto`: Sign displays for negative amounts only, including negative zero. - `exceptZero`: Sign displays for positive and negative amounts, but not zero. - `never`: Never display the sign.
          * @default 'auto'
         */
        "signDisplay"?: 'accounting' | 'always' | 'auto' | 'exceptZero' | 'never';
        /**
          * Applies styling based on the size provided. If no size is provided, it will display as inline text.
         */
        "size"?: 'small' | 'medium' | 'large';
        /**
          * @private Inherited from q2-detail when slotted to match styling of q2-detail and q2-currency texts.
         */
        "slotSize"?: string;
        /**
          * The variant controls how the currency is colored and exposes unique CSS overrides. The `debit` and `credit` variants align styling with common practices for coloring debit and credit accounts. The `masked` variant exposes the ability to use gradients and images to color the currency.
         */
        "variant"?: 'debit' | 'credit' | 'masked';
    }
    /**
     * @name Data Table
     * @category Display
     * @summary Use for displaying large datasets with sorting, filtering, and selecting.
     */
    interface Q2DataTable {
        /**
          * Adds borders between rows and/or columns in the table.
         */
        "bordered"?: boolean | 'horizontal' | 'vertical' | 'grid';
        /**
          * Provides a caption for the data table.
         */
        "caption"?: string;
        /**
          * Adds the ability to click a row and have the table emit an event with the selected row's data.
         */
        "clickable"?: boolean;
        /**
          * Determines the amount of padding for each of the cells in the table.
         */
        "density"?: 'compact' | 'normal' | 'comfortable';
        /**
          * Determines the `q2-icon` that will display when `rows` has no value.
          * @default 'inbox'
         */
        "emptyIcon"?: string;
        /**
          * Determines the message that will display when `rows` has no value.
          * @localizable 
          * @default 'tecton.element.dataTable.emptyMessage'
         */
        "emptyMessage"?: string;
        /**
          * 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[];
        /**
          * Hides the caption from view, but still makes it available to screen readers for accessibility purposes.
         */
        "hideCaption"?: boolean;
        /**
          * Visually hides the `Select` button that displays when `clickable=true`. It will still be discoverable by assistive technologies.
          * @info Use of this property requires `clickable` to be set to `true`.
         */
        "hideClickable"?: boolean;
        /**
          * Displays a loading state on the table to indicate background activity.
         */
        "loading"?: boolean;
        /**
          * Emitted when a row is clicked.  Requires the `clickable` prop to be set to `true`.  Call `event.preventDefault()` to prevent the default click behavior.
          * @deprecated Use 'tctClick' instead
         */
        "onClick"?: (event: Q2DataTableCustomEvent<{ row: Q2DataTableSerializedRow }>) => void;
        /**
          * Emitted when a row is selected.  Requires the `selectable` prop to be set to `true`.  Call `event.preventDefault()` to prevent the default selection behavior.
          * @deprecated Use 'tctSelect' instead
         */
        "onSelect"?: (event: Q2DataTableCustomEvent<{
        row: Q2DataTableSerializedRow;
        rows: Q2DataTableSerializedRow[];
        allSelected: boolean;
    }>) => void;
        /**
          * Emitted when the select-all checkbox is toggled.  Requires the `selectable` prop to be set to `true` and the `selectMode` prop to be set to `multiple`.  Call `event.preventDefault()` to prevent the default behavior.
          * @deprecated Use 'tctSelectAllRows' instead
         */
        "onSelectAllRows"?: (event: Q2DataTableCustomEvent<{ checked: boolean }>) => void;
        /**
          * Emitted when a column is sorted.  Requires the `sortable` prop to be set to `true` on the column.  Call `event.preventDefault()` to prevent the default sorting behavior.
          * @deprecated Use 'tctSort' instead
         */
        "onSort"?: (event: Q2DataTableCustomEvent<{ header: Q2DataTableHeader; direction: 'ASC' | 'DESC' }>) => void;
        /**
          * Emitted when a row is clicked.  Requires the `clickable` prop to be set to `true`.  Call `event.preventDefault()` to prevent the default click behavior.
         */
        "onTctClick"?: (event: Q2DataTableCustomEvent<{ row: Q2DataTableSerializedRow }>) => void;
        /**
          * Emitted when a row is selected.  Requires the `selectable` prop to be set to `true`.  Call `event.preventDefault()` to prevent the default selection behavior.
         */
        "onTctSelect"?: (event: Q2DataTableCustomEvent<{
        row: Q2DataTableSerializedRow;
        rows: Q2DataTableSerializedRow[];
        allSelected: boolean;
    }>) => void;
        /**
          * Emitted when the select-all checkbox is toggled.  Requires the `selectable` prop to be set to `true` and the `selectMode` prop to be set to `multiple`.  Call `event.preventDefault()` to prevent the default behavior.
         */
        "onTctSelectAllRows"?: (event: Q2DataTableCustomEvent<{ checked: boolean }>) => void;
        /**
          * Emitted when a column is sorted.  Requires the `sortable` prop to be set to `true` on the column.  Call `event.preventDefault()` to prevent the default sorting behavior.
         */
        "onTctSort"?: (event: Q2DataTableCustomEvent<{ header: Q2DataTableHeader; direction: 'ASC' | 'DESC' }>) => void;
        /**
          * Emitted when an expandable row is toggled.  Requires content in the `row-{id}-expandable-content` slot.  Call `event.preventDefault()` to prevent the default toggling behavior.
         */
        "onTctToggle"?: (event: Q2DataTableCustomEvent<{ row: Q2DataTableSerializedRow }>) => void;
        /**
          * Emitted when an expandable row is toggled.  Requires content in the `row-{id}-expandable-content` slot.  Call `event.preventDefault()` to prevent the default toggling behavior.
          * @deprecated Use 'tctToggle' instead
         */
        "onToggle"?: (event: Q2DataTableCustomEvent<{ row: Q2DataTableSerializedRow }>) => void;
        /**
          * 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[];
        /**
          * Controls the position of the checkbox column when `selectable` is true. When set to 'right', the checkbox column will appear on the right side of the table.
          * @warning Use of this property requires `selectable` to be set to `true`.
          * @default 'left'
         */
        "selectAlign"?: 'left' | 'right';
        /**
          * 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.
          * @warning Use of this property requires `selectable` to be set to `true`.
          * @default 'multiple'
         */
        "selectMode"?: 'multiple' | 'single';
        /**
          * 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
         */
        "striped"?: boolean;
    }
    /**
     * @name Detail
     * @category Display
     * @summary Use for displaying label-value pairs like account details or miscellaneous info.
     */
    interface Q2Detail {
        /**
          * Defines the alignment of the label and description when stacked, or when only the label or description is present.
          * @default 'left'
         */
        "align"?: 'left' | 'right' | 'center';
        /**
          * @deprecated Use 'align' instead
         */
        "alignment"?: 'left' | 'right' | 'center';
        /**
          * Defines the text content of the description.
          * @localizable
         */
        "description"?: string;
        /**
          * Defines the text content of the label.
          * @localizable
         */
        "label"?: string;
        /**
          * Defines the text size of the label and description.  If not specified, the detail will display as inline text.
         */
        "size"?: null | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
        /**
          * Determines if the description should appear beneath the label.
          * @default false
         */
        "stacked"?: boolean;
    }
    /**
     * @name Dropdown
     * @category Display
     * @summary Use for menus of contextual actions triggered by a button click.
     */
    interface Q2Dropdown {
        "additionalContext"?: string;
        /**
          * @deprecated Use 'popoverAlignment' instead
         */
        "alignment"?: 'left' | 'right';
        /**
          * @deprecated
         */
        "ariaLabel"?: string;
        /**
          * If `true`, component expands to fill the width of its parent element.
         */
        "block"?: boolean;
        /**
          * 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.
         */
        "context"?: string;
        /**
          * Passes important information to the outlet (e.g., pass an account id that your platform can use to look up what module to show for that account type).
          * @info Only applicable when using `<q2-dropdown>` for outlets.
         */
        "contextValue"?: string;
        /**
          * Indicates the menu cannot be focused or interacted with.
         */
        "disabled"?: boolean;
        /**
          * If `true`, it takes up 100% width.
         */
        "fullWidth"?: boolean;
        /**
          * Hide's the field's `<label>` element from view.
          * @warning Only use when a visible label is impractical.
         */
        "hideLabel"?: boolean;
        /**
          * Instructs the component to use the action sheet workflow for displaying its options.  For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).
          * @default !!window.Tecton?.useActionSheets
         */
        "hoist"?: boolean;
        /**
          * The icon that will render within the toggle button. You may use any of the `q2-icon` types.
         */
        "icon"?: string;
        /**
          * The text that appears within the button.
          * @warning This property should not be used if the `type` is `icon`.
          * @localizable
         */
        "label"?: string;
        /**
          * Identifies this menu as an outlet. Used in conjunction with context and, optionally, `contextValue`.
          * @info Only applicable when using `<q2-dropdown>` for outlets.
         */
        "name"?: string;
        /**
          * Determine whether the popover is open or closed.
          * @readonly
         */
        "open"?: boolean;
        /**
          * Determines the label that is applied to the option list for accessibility purposes.
         */
        "optionListLabel"?: string;
        /**
          * @deprecated
         */
        "popDirection"?: 'up' | 'down';
        /**
          * Aligns the popover dropdown to the left or right side of the input field.
          * @default 'left'
         */
        "popoverAlignment"?: 'left' | 'right';
        /**
          * 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
         */
        "popoverMinHeight"?: 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.
          * @default null
         */
        "popoverMode"?: 'legacy';
        /**
          * Use with `context` to tell the outlet where it appears. It will be matched with the appropriately configured module for that context.
          * @info Only applicable when using `<q2-dropdown>` for outlets.
         */
        "resolvedType"?: string;
        /**
          * The type of button used as the menu toggle.
          * @info Type must be "custom" to use the custom button slot.
          * @default 'icon'
         */
        "type"?: 'icon' | 'fab' | 'custom' | 'primary' | 'secondary' | 'neutral';
    }
    /**
     * @name Dropdown Item
     * @category Display
     * @summary Use as a single action item within a Dropdown menu.
     */
    interface Q2DropdownItem {
        /**
          * Used by q2-option-list to indicate the option is active
          * @private
         */
        "active"?: boolean;
        /**
          * @deprecated
         */
        "ariaLabel"?: string;
        /**
          * Disables interaction with the item and blocks its click event.
         */
        "disabled"?: boolean;
        /**
          * The text that appears within the dropdown item.
          * @info This will be used as the `aria-label` for this item.
          * @localizable
         */
        "label"?: string;
        /**
          * Is emitted when the item is clicked.
          * @deprecated
         */
        "onClick"?: (event: Q2DropdownItemCustomEvent<{ type: 'select' | 'remove'; value: string }>) => void;
        /**
          * Is emitted when the item is clicked.
         */
        "onTctClick"?: (event: Q2DropdownItemCustomEvent<{ type: 'select' | 'remove'; value: string }>) => void;
        /**
          * Renders an icon button in the item. Clicking on this button will change the `type` on the item's click event detail to "remove".
         */
        "removable"?: boolean;
        /**
          * Renders a line in the item instead of text. Click events from these items will not have details provided. A `separator` allows for quick visual grouping of items, so interactions should not be bound to these options.
         */
        "separator"?: boolean;
        /**
          * A static reference value for the item. This value is returned in the click event detail.
         */
        "value"?: string;
    }
    /**
     * @name Editable Field
     * @category Forms
     * @summary Use for inline editing of data that is normally displayed as read-only.
     */
    interface Q2EditableField {
        /**
          * @deprecated
         */
        "ariaLabel"?: string;
        /**
          * If `true`, component expands to fill the width of its parent element.
         */
        "block"?: boolean;
        /**
          * Disables the edit button and field.
         */
        "disabled"?: boolean;
        /**
          * Controls the edit state of the element.
          * @default false
         */
        "editing"?: boolean;
        /**
          * Determines the `errors` applied to the `q2-input` element.  See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.
         */
        "errors"?: string[];
        /**
          * Determines the `formatModifier` applied to the `q2-input` element.
          * @info Only applicable when `type="currency"`.  See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.
         */
        "formatModifier"?: string;
        /**
          * Hide's the field's `<label>` element from view.
         */
        "hideLabel"?: boolean;
        /**
          * Determines the `hints` applied to the `q2-input` element.  See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.
         */
        "hints"?: string[];
        /**
          * The visible descriptor for the element. Serves as the input label while in the edit state and as a decorative label for the read state when `persistentLabel` is `true`.
          * @localizable 
          * @default ''
         */
        "label"?: string;
        /**
          * Determines the `maxLength` applied to the `q2-input`.  See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for more information.
         */
        "maxlength"?: number;
        /**
          * Emitted when the 'Edit', 'Cancel', or 'Save' buttons are clicked.  The event detail will not include a `value` or `formattedValue` if the event name is 'edit' or 'cancel'.  Call `event.preventDefault()` to prevent the default behavior (the component's internal `editing` and `value` updates).
          * @info  If you are utilizing events to provide input validation, it is recommended you use the `input` event, not the `change` event.
          * @deprecated Use 'tctChange' instead
         */
        "onChange"?: (event: Q2EditableFieldCustomEvent<{
        editing: boolean;
        name: 'edit' | 'cancel' | 'save';
        value?: string;
        formattedValue?: string;
    }>) => void;
        /**
          * Emitted when the user updates the `q2-input` element in the editing state.
          * @deprecated Use 'tctInput' instead
         */
        "onInput"?: (event: Q2EditableFieldCustomEvent<{ formattedValue: string; value: string }>) => void;
        /**
          * Emitted when the 'Edit', 'Cancel', or 'Save' buttons are clicked.  The event detail will not include a `value` or `formattedValue` if the event name is 'edit' or 'cancel'.  Call `event.preventDefault()` to prevent the default behavior (the component's internal `editing` and `value` updates).
          * @info If you are utilizing events to provide input validation, it is recommended you use the `input` event, not the `change` event.
         */
        "onTctChange"?: (event: Q2EditableFieldCustomEvent<{
        editing: boolean;
        name: 'edit' | 'cancel' | 'save';
        value?: string;
        formattedValue?: string;
    }>) => void;
        /**
          * Emitted when the user updates the `q2-input` element in the editing state.
         */
        "onTctInput"?: (event: Q2EditableFieldCustomEvent<{ formattedValue: string; value: string }>) => void;
        /**
          * Displays the provided label in the read state.
         */
        "persistentLabel"?: boolean;
        /**
          * Shortens long values with ellipses instead of splitting into multiple lines.
         */
        "truncated"?: boolean;
        /**
          * Determines the `type` applied to the `q2-input` element.  See [q2-input](https://tecton.q2developer.com/design-system/q2-input/) for all `type` values.
         */
        "type"?: Q2Input['type'];
        /**
          * Serves as the visible text while in the read state, and the default value of the input while in the edit state.
          * @default ''
         */
        "value"?: string;
    }
    interface Q2Example {
        /**
          * The content of the menu.
         */
        "content"?: string;
        /**
          * If `true`, the user cannot interact with the menu.
         */
        "disabled"?: boolean;
        /**
          * 5. Events    Custom events dispatched from the component that are defined via the
          * @Event () decorator. Start each event name with "tct" so they do not conflict with native events. Document each using JSDoc comments and list in alphabetical order.
         */
        "onTctClick"?: (event: Q2ExampleCustomEvent<any>) => void;
        "onTctDrag"?: (event: Q2ExampleCustomEvent<any>) => void;
        "onTctOpen"?: (event: Q2ExampleCustomEvent<any>) => void;
        /**
          * Specifies the menu type.
          * @default 'overlay'
         */
        "type"?: string;
    }
    /**
     * @name File Picker
     * @category Forms
     * @summary Use for uploading files via browse dialog or drag-and-drop.
     */
    interface Q2FilePicker {
        /**
          * The size of the browse button.
          * @default 'medium'
         */
        "buttonSize"?: 'none' | 'small' | 'medium' | 'large';
        /**
          * A description of the field. This is announced by screen readers when the field is focused.
          * @localizable
         */
        "description"?: string;
        /**
          * Disables the file picker, preventing user interaction.
         */
        "disabled"?: boolean;
        /**
          * When `false`, the file name renders as-is and may wrap. Otherwise, long file names are middle-ellipsized so the beginning and end of the name remain visible.
          * @default true
         */
        "ellipsizeFileName"?: boolean;
        /**
          * Allowed file types based on extensions (e.g., ['jpg', 'png', 'pdf'] or 'jpg, png, pdf'). When using the attribute, provide a comma-separated string (e.g., 'jpg, png, pdf'). Arrays can only be set programmatically via JavaScript.
          * @default []
         */
        "fileTypes"?: string[] | string;
        /**
          * The label for the field. This is announced by screen readers when the field is focused.
          * @localizable
         */
        "label"?: string;
        /**
          * The maximum size (in bytes) of any file that can be selected.
          * @default Infinity
         */
        "maxFileSize"?: number;
        /**
          * The maximum number of files that can be selected.
          * @default Infinity
         */
        "maxFiles"?: number;
        /**
          * Custom event dispatched when the user selects files. The event detail contains an object representing the selected files with two properties: - `invalidFiles`: An array of `InvalidFileStatus` objects representing   files that failed validation. - `validFiles`: An array of `File` objects representing files that passed   validation.  Each `InvalidFileStatus` object includes the following properties: - `file`: The `File` object. - `status`: The validation status, which can be `"invalid-type"` (invalid file   type), `"over-size-limit"` (file exceeds the size limit), or   `"over-max-files-limit"` (total exceeds the max files limit).
         */
        "onTctChange"?: (event: Q2FilePickerCustomEvent<FilesObject>) => void;
        /**
          * Shows a gradient at the bottom of the file list when more files are available below the visible area.
          * @default true
         */
        "showGradient"?: boolean;
        /**
          * An array of `ValidFileStatus` objects representing the upload status of files. Each `ValidFileStatus` object contains the following properties: - `name`: The file name. - `status`: The upload status, either `"failed"` or `"uploaded"`. - `message`: (Optional) A custom status message, used only when `status`   is `"failed"`. This allows developers to provide more detail about   upload failures while ensuring all other file status messages remain   consistent with approved design/UX standards. Custom failure messages   are limited to a single line.
          * @localizable 
          * @default []
         */
        "status"?: ValidFileStatus[];
        /**
          * Returns an object representing the selected files with two properties: - `invalidFiles`: An array of `InvalidFileStatus` objects representing   files that failed validation. - `validFiles`: An array of `File` objects representing files that passed   validation.  Each `InvalidFileStatus` object includes the following properties: - `file`: The `File` object. - `status`: The validation status, which can be `"invalid-type"` (invalid file   type), `"over-size-limit"` (file exceeds the size limit), or   `"over-max-files-limit"` (total exceeds the max files limit).
          * @readonly 
          * @default { invalidFiles: [], validFiles: [] }
         */
        "value"?: FilesObject;
        /**
          * Determines if the file picker is a browse button or a drop zone with a browse link.
          * @default 'browse'
         */
        "variant"?: 'browse' | 'browse-drop';
    }
    /**
     * @name Form
     * @category Forms
     * @summary Use for wrapping form fields with consistent spacing.
     */
    interface Q2Form {
        /**
          * Changes the vertical spacing of the form-fields contained within the component's slot
          * @default 'normal'
         */
        "spacing"?: 'none' | 'compact' | 'normal' | 'comfortable';
    }
    /**
     * @name Formatted Text
     * @category Text
     * @summary Use for displaying text with formatting like phone numbers, SSN, or dates.
     */
    interface Q2FormattedText {
        /**
          * The format style for the number. - `decimal`: Standard number formatting, locale-aware (default). - `percent`: Percentage formatting, locale-aware.
          * @default 'decimal'
         */
        "format"?: 'decimal' | 'percent';
        /**
          * Formats to the language provided. Accepts multiple locales in an array as sequential fallbacks.
          * @default document.documentElement.lang || 'en-US'
         */
        "locale"?: string | string[];
        /**
          * The maximum number of fraction digits to use.
          * @default 2
         */
        "maximumFractionDigits"?: number;
        /**
          * The minimum number of fraction digits to use.
          * @default 2
         */
        "minimumFractionDigits"?: number;
        /**
          * The minimum number of integer digits to use.
          * @default 1
         */
        "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.
          * @default 'auto'
         */
        "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;
    }
    /**
     * @name Grid
     * @category Display
     * @summary Use for responsive grid layouts with flexible rows and columns.
     */
    interface Q2Grid {
        /**
          * Sets the vertical alignment behavior of q2-grid-area components within a grid track at the baseline viewport size.
          * @default 'stretch'
         */
        "align"?: TQ2GridAlignOptions;
        /**
          * Sets the amount of columns to render within the grid at the baseline viewport size.
          * @default 12
         */
        "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.
          * @default 'normal'
         */
        "gap"?: TQ2GridGapOptions;
        /**
          * Sets the horizontal alignment behavior of q2-grid-area components within a grid track at the baseline viewport size.
          * @default 'stretch'
         */
        "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.
          * @default 'auto'
         */
        "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;
    }
    /**
     * @name Grid Area
     * @category Display
     * @summary Use as a positioned cell within a Grid layout.
     */
    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.
          * @default 'auto'
         */
        "align"?: TQ2GridAreaAlignOptions;
        /**
          * Sets the column span amount of the grid area at the baseline viewport size.
          * @default 1
         */
        "columnSpan"?: TQ2GridAreaColumnSpanOptions;
        /**
          * Sets the starting column of the grid area at the baseline viewport size.
          * @default 'auto'
         */
        "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.
          * @default 'auto'
         */
        "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.
          * @default 1
         */
        "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.
          * @default 'auto'
         */
        "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.
          * @default 'auto'
         */
        "zIndex"?: TQ2GridAreaZIndexOptions;
    }
    /**
     * @name Icon
     * @category Display
     * @summary Use for displaying icons that represent actions, states, or concepts.
     */
    interface Q2Icon {
        /**
          * Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text.
         */
        "inline"?: boolean;
        /**
          * The text that is presented by screen-readers when they encounter the icon.
         */
        "label"?: string;
        /**
          * The name of the icon to be displayed.
         */
        "type"?: string;
    }
    /**
     * @name Input
     * @category Forms
     * @summary Use for single-line text entry including email, phone, currency, SSN, and password.
     */
    interface Q2Input {
        /**
          * Provides additional descriptive text for the native input.
          * @private
         */
        "_ariaDescription"?: string;
        /**
          * Sets readonly to true on the input without adding the "read only" label.  Can be used to prevent user input while still presenting the necessary information for assistive technology.
          * @private 
          * @default undefined
         */
        "_preventEntry"?: boolean;
        /**
          * Allows for correct semantics of q2-input element when aria-expanded.
          * @private Defaults to undefined Will assign role to combobox when used inside q2-select and q2-calendar.
          * @default undefined
         */
        "_role"?: 'combobox' | undefined;
        /**
          * Determines whether the input updates its value property as native input occurs.
          * @private 
          * @default true
         */
        "_updateValueOnInput"?: boolean;
        "ariaActivedescendant"?: string;
        "ariaControls"?: string;
        "ariaExpanded"?: string;
        "ariaHaspopup"?: string;
        /**
          * @deprecated
         */
        "ariaLabel"?: string;
        "ariaOwns"?: string;
        /**
          * The `autocapitalize` attribute is an enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user.  [See MDN for a list of supported values](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize#value).
          * @info This attribute only affects the behavior of input mechanisms like virtual keyboards on mobile devices and voice input.
         */
        "autocapitalize"?: string;
        /**
          * The HTML autocomplete attribute lets web developers specify what permission (if any) the user agent has to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field.  [See MDN for a list of supported values](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values).
         */
        "autocomplete"?: string;
        /**
          * A string that indicates whether or not to activate automatic correction while the user is editing this field.
          * @warning This is currently only supported in Safari.
         */
        "autocorrect"?: 'on' | 'off';
        /**
          * Autofocus is enabled when the property is added to an element. To disable, remove attribute or set it to false. If applied to multiple elements, the first one will receive focus.
         */
        "autofocus"?: boolean;
        /**
          * The color of the badge when in the active state. The property `badgeValue` must be provided.
         */
        "badgeTheme"?: Q2Badge['theme'];
        /**
          * Displays a `q2-badge` element on the right side of the input.
         */
        "badgeValue"?: string;
        /**
          * Renders an icon button when the field is non-empty. Pressing the button clears all input from the field.
         */
        "clearable"?: boolean;
        /**
          * If provided a value, it sets the `aria-current` attribute on the inner input. [See MDN for more information on aria-current](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current).
         */
        "current"?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false';
        /**
          * Indicates the field cannot be focused or interacted with.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Each item in the `errors` array will appear below the input field when the field is focused.
          * @localizable
         */
        "errors"?: string[];
        /**
          * Defines the field's expected input format, and automatically masks user input to conform. Specific types support different modifier options. See the section on Format Modifiers for all available options.
         */
        "formatModifier"?: string;
        /**
          * Hide's the field's `<label>` element from view.
          * @warning Only use when a visible label is impractical.
         */
        "hideLabel"?: boolean;
        /**
          * When `true` and the input field has an active validation error, the field shows the error state without displaying associated error messages below the field (from the errors array). Primarily used for dropdown selects and date pickers whose controls appear below the input field (where the error messages, if displayed, would also appear).
         */
        "hideMessages"?: boolean;
        /**
          * Each item in the `hints` array will appear below the input field when the field is focused.
          * @info The `errors` array takes precedence over the `hints` array. If an input field has both hints and errors, only the errors will display. Once all errors are resolved, the hints display the next time the field is focused.
          * @localizable
         */
        "hints"?: string[];
        /**
          * Shows a left-aligned [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) within the field.
         */
        "iconLeft"?: Q2Icon['type'];
        /**
          * Shows a right-aligned [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) within the field.
         */
        "iconRight"?: Q2Icon['type'];
        /**
          * The label that appears above the field. This is announced by screen readers when the field is focused.
          * @localizable
         */
        "label"?: string;
        /**
          * When present, it does not allow a value greater than `max` when the user uses the Up/Down arrow keys to change the value.
          * @info Only applicable when `type="number"`.
         */
        "max"?: number;
        /**
          * Defines the maximum allowed input length in characters. Formatting characters (e.g. `.`, `-`, etc) are included in the `maxlength` comparison. Make sure you account for them when setting the `maxlength` value. Input types that use masks have their own inherent `maxlength`.
         */
        "maxlength"?: number;
        /**
          * When present, it does not allow a value less than the `min` when the user uses the Up/Down arrow keys to change the value.
          * @info Only applicable when `type="number"`.
         */
        "min"?: number;
        /**
          * Emitted when the field loses focus after the value has been changed.
          * @deprecated Use 'tctChange' instead
          * @legacyEvent
         */
        "onChange"?: (event: Q2InputCustomEvent<EventDetail>) => void;
        /**
          * Emitted when the field value is cleared. Emitted with `{ source: 'input' }` when search text is cleared by keyboard. Emitted with `{ source: 'button' }` when search text is cleared by clicking clear icon.
          * @deprecated Use 'tctClear' instead
         */
        "onClear"?: (event: Q2InputCustomEvent<undefined>) => void;
        /**
          * Emitted when the field value is formatted.
          * @deprecated Use 'tctFormatted' instead
         */
        "onFormatted"?: (event: Q2InputCustomEvent<FormatterValueObject>) => void;
        /**
          * Emitted when the field value is updated.
          * @deprecated Use 'tctInput' instead
          * @legacyEvent
         */
        "onInput"?: (event: Q2InputCustomEvent<EventDetail>) => void;
        /**
          * Emitted when the validation is updated.
          * @deprecated Use 'tctInvalid' instead
          * @legacyEvent
         */
        "onInvalid"?: (event: Q2InputCustomEvent<EventDetail>) => void;
        /**
          * Emitted when the field loses focus after the value has been changed.
          * @legacyEvent
         */
        "onTctChange"?: (event: Q2InputCustomEvent<EventDetail>) => void;
        /**
          * Emitted when the field value is cleared. Emitted with `{ source: 'input' }` when search text is cleared by keyboard. Emitted with `{ source: 'button' }` when search text is cleared by clicking clear icon.
         */
        "onTctClear"?: (event: Q2InputCustomEvent<undefined>) => void;
        /**
          * Emitted when the field value is formatted.
         */
        "onTctFormatted"?: (event: Q2InputCustomEvent<FormatterValueObject>) => void;
        /**
          * Emitted when the field value is updated.
          * @legacyEvent
         */
        "onTctInput"?: (event: Q2InputCustomEvent<EventDetail>) => void;
        /**
          * Emitted when the validation is updated.
          * @legacyEvent
         */
        "onTctInvalid"?: (event: Q2InputCustomEvent<EventDetail>) => void;
        /**
          * Appends "(optional)" to the field label, and sets `aria-required` on the nested input tag to `false`.
         */
        "optional"?: boolean;
        /**
          * 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;
        /**
          * Text that appears within the field when it is blurred and empty. Placeholder text disappears when the user focuses on the field and provides input.
          * @info Primarily used for rare cases in which a visible form label is not expected (e.g., search fields).
          * @localizable
         */
        "placeholder"?: string;
        /**
          * Component will display as a clickable `<button>` styled to be identical to the default `<input>` field.
         */
        "pseudo"?: boolean;
        /**
          * Appends "(read only)" to the field label, and field becomes unusable, but remains focusable. Takes priority over `optional` if both are `true`.
         */
        "readonly"?: boolean;
        /**
          * Indicates the element's intended purpose to assistive technology.
          * @deprecated
         */
        "role"?: string;
        /**
          * Shows a character counter above the input field to track the number of characters currently in the field. If `maxlength` is set, `showCount` displays the number of characters in relation the `maxlength` value.
         */
        "showCount"?: boolean;
        /**
          * Displays a toggle button at the end of the input field which shows or hides the actual value.
          * @info Applicable when `type` is `text`, `password`, `ssn`, or `tin`, or when `visibleLastCount` is set.
          * @default false
         */
        "showVisibilityToggle"?: boolean;
        /**
          * When present, it jumps the value in increments of `step` when the user uses the Up/Down arrow keys to change the value.
          * @info Only applicable when `type="number"`.
         */
        "step"?: number;
        /**
          * Controls visibility of the value. When `visibleLastCount` is set, hidden values keep the specified number of trailing characters visible. When the input type is `password`, it will default to `true`, hiding the text.
         */
        "textHidden"?: boolean;
        /**
          * Specifies the field's expected [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.
          * @default 'text'
         */
        "type"?: InputType;
        /**
          * Displays a success state icon when the field does not have active errors.
          * @default false
         */
        "valid"?: boolean;
        /**
          * 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.
          * @info The visible value of formatted input fields may not match the element's `value` property. When setting an input's value programmatically (e.g. pre-populating a form), ensure that the supplied value is in a format that can be handled by its consuming logic. `q2-input` updates its own `value` through its default input and change event handlers.  In `q2-input` where `type="currency"` - element.value = 1234.56 - visible value: $1,234.56
         */
        "value"?: string;
        /**
          * Controls the number of trailing characters that remain visible when the field value is masked by `textHidden` or the visibility toggle. The element's `value` and emitted event details remain unmasked.
         */
        "visibleLastCount"?: number;
    }
    /**
     * @name Item
     * @category Display
     * @summary Use for laying out structured content with header, body, and footer text, icons, and actions.
     */
    interface Q2Item {
        /**
          * Makes the item clickable.
         */
        "clickable"?: boolean;
        /**
          * Controls the vertical alignment of the item decorator and single content slot.
          * @default 'top'
         */
        "verticalAlign"?: 'top' | 'center' | 'bottom';
    }
    /**
     * @name Legend
     * @category Data Visualization
     * @summary Use for displaying chart legends with interactive item selection.
     */
    interface Q2Legend {
        /**
          * Controls when numbers displayed as currency, if they are whole numbers, they will not include the .00.
         */
        "currencyRound"?: boolean;
        /**
          * An array of objects that contain the data to be displayed.
          * @default []
         */
        "data"?: DonutChartData[];
        /**
          * The format of the value displayed in the legend.
          * @default 'default'
         */
        "format"?: 'default' | 'currency';
        /**
          * The id of the item to set as hovered.
          * @default null
         */
        "hoveredItemId"?: string;
        /**
          * Emitted when a legend item is clicked.
          * @deprecated Use 'tctClick' instead
         */
        "onClick"?: (event: Q2LegendCustomEvent<DonutChartData>) => void;
        /**
          * Emitted when the mouse enters a legend item.
          * @deprecated Use 'tctMouseenter' instead
         */
        "onMouseenter"?: (event: Q2LegendCustomEvent<DonutChartData>) => void;
        /**
          * Emitted when the mouse leaves a legend item.
          * @deprecated Use 'tctMouseleave' instead
         */
        "onMouseleave"?: (event: Q2LegendCustomEvent<DonutChartData>) => void;
        /**
          * Emitted when a legend item is clicked.
         */
        "onTctClick"?: (event: Q2LegendCustomEvent<DonutChartData>) => void;
        /**
          * Emitted when the mouse enters a legend item.
         */
        "onTctMouseEnter"?: (event: Q2LegendCustomEvent<DonutChartData>) => void;
        /**
          * Emitted when the mouse leaves a legend item.
         */
        "onTctMouseLeave"?: (event: Q2LegendCustomEvent<DonutChartData>) => void;
        /**
          * The id of the item to set as selected.
          * @default null
         */
        "selectedItemId"?: string;
    }
    /**
     * @name Link
     * @category Display
     * @summary Use for navigation to other pages or sections. Prefer over q2-btn for non-action navigation.
     */
    interface Q2Link {
        /**
          * @private Tooltip text set by a parent q2-tooltip component for accessibility.
         */
        "_tooltip"?: string;
        /**
          * Determines whether the component and `tctClick` event are disabled.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * If `true`, the label will be truncated with an ellipsis when it's too long.
          * @default false
         */
        "ellipsis"?: boolean;
        /**
          * If `true`, it takes up 100% width.
         */
        "fullWidth"?: boolean;
        /**
          * The link when clicked.
          * @default 'javascript:void(0)'
         */
        "href"?: string;
        /**
          * The [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to display when `variant` is set to "standalone".
         */
        "iconType"?: string;
        /**
          * The displayed label to represent your link.
         */
        "label"?: string;
        /**
          * Emitted when the link is clicked.
          * @legacyEvent
         */
        "onTctClick"?: (event: Q2LinkCustomEvent<{ target: string; referrerpolicy: string; href: string }>) => void;
        /**
          * How much of the referrer to send when following the link. [See MDN for more information on referrerpolicy](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).
         */
        "referrerpolicy"?: ReferrerPolicy;
        /**
          * Where to display the linked URL. [See MDN for more information on target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).
         */
        "target"?: string;
        /**
          * Applies a `title` attribute to the anchor tag in the shadowRoot of the component.
         */
        "tctTitle"?: string;
        /**
          * Determines the visual display style of the link.
          * @default 'inline'
         */
        "variant"?: string;
    }
    /**
     * @name List
     * @category Display
     * @summary Use for grouping Item components into a vertical list.
     */
    interface Q2List {
        /**
          * Adds a border between each items
         */
        "bordered"?: boolean;
        /**
          * label text on header area
         */
        "label"?: string;
    }
    /**
     * @name Loading
     * @category Feedback
     * @summary Use to indicate async operations or content loading in progress.
     */
    interface Q2Loading {
        /**
          * @deprecated
         */
        "ariaLabel"?: string;
        /**
          * Numeric adjustments are available for specific `type` and `shape` combinations. These may impact the number of items, columns, and/or rows that display.  When `shape="text"`, `shape="detailed-item"`, or `shape="label-value"`, the `counts` attribute determines the number of rows to display.  When `shape="table"`, the `counts` attribute can be used in two ways:  1. `counts="CxR"` = Provides a skeleton table of `C` columns and `R` rows. The default value is `"5x5" 2. `counts="N"` - Provides a skeleton table of `N` columns and 5 rows.  When `shape="form"`, the `counts` attribute can be used in two ways:  1. `counts="CxR" - Provides a skeleton form of `C` columns and `R` rows of fields. The default value is `"1x1"`. 2. `counts="N"` - Provides a skeleton form of `N` fields stacked in single columns.
         */
        "counts"?: string;
        /**
          * Hides the loading element from screen readers.
          * @default false
         */
        "hideFromScreenReaders"?: boolean;
        /**
          * Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text.
         */
        "inline"?: boolean;
        /**
          * The label that is associated with the component. This is not displayed visually but is presented by screen readers.
          * @localizable
         */
        "label"?: string;
        /**
          * Visual adjustments available to specific type and shape combinations, written as a hyphen (`-`) separated string.  Supported values depend on the type and shape selected, and are listed in detail in the shape sections above.
         */
        "modifiers"?: string;
        /**
          * The specific visual presentation of a loading element `type`.
          * @snippet // when type="spinner" type ShapeValues = "half-circle"; // when type="skeleton" type ShapeValues = "circle | "rectangle" | "text" | "table" | "field" | "form" | "detailed-item" | "label-value";
         */
        "shape"?: string;
        /**
          * The type of loading element to display.
         */
        "type"?: 'brand' | 'spinner' | 'skeleton';
    }
    interface Q2LoadingElement {
        "borderRadius"?: string;
        "height"?: string;
        "shape"?: string;
        "width"?: string;
    }
    /**
     * @name Localization
     * @category Text
     * @summary Use for displaying localized text from translation keys.
     */
    interface Q2Loc {
        /**
          * When true, allows HTML tags in the localized string to be rendered as HTML.
          * @warning Only use this with trusted localization strings, as it uses innerHTML and may expose XSS vulnerabilities. See the FAQ "Can I add HTML to my localization strings?" for usage guidance.
          * @default false
         */
        "ignoreTag"?: boolean;
        /**
          * Any substitutions you would like to pass into the localization string.
         */
        "substitutions"?: string[];
        /**
          * The reference to the localization key you would like to display the localized output of. If no value is provided, any text inside the element will be used as a fallback.
          * @localizable
         */
        "value"?: string;
    }
    /**
     * @name Message
     * @category Feedback
     * @summary Use for contextual non-blocking notifications like success, error, or info alerts.
     */
    interface Q2Message {
        /**
          * The visual style of the message. The minimal style is for use cases where you have less space to display information.
          * @default 'standard'
         */
        "appearance"?: 'minimal' | 'standard';
        /**
          * Determines whether or not assistive technology immediately presents the content to the user, via the `aria-live` attribute.
          * @default false
         */
        "description"?: boolean;
        /**
          * The type of message to display on the screen.
          * @default 'info'
         */
        "type"?: 'info' | 'error' | 'danger' | 'warning' | 'success';
    }
    /**
     * @name Meter
     * @category Data Visualization
     * @summary Use for showing progress or a value within a known range.
     */
    interface Q2Meter {
        /**
          * Shows loading animation for bars, default is true.
          * @default true
         */
        "animated"?: boolean;
        /**
          * Defines the label for the completed bar, which appears at the bottom in the legend section.
          * @localizable
         */
        "completedLabel"?: string;
        /**
          * Defines the value for the completed bar.
         */
        "completedValue"?: string;
        /**
          * Defines the description for the meter, which appears at the top just below the label.
          * @localizable
         */
        "description"?: string;
        /**
          * Shows a circle shaped dot indicator on completed bar, default is true.
          * @default true
         */
        "dotted"?: boolean;
        /**
          * Hide tooltips.
          * @localizable
         */
        "hideTooltip"?: boolean;
        /**
          * Defines the label for the meter, which appears at the top.
          * @localizable
         */
        "label"?: string;
        /**
          * Defines the label for the base bar, which appears at the bottom in the legend.
          * @localizable
         */
        "maxLabel"?: string;
        /**
          * Defines the value for the base bar.
         */
        "maxValue"?: string;
        /**
          * Shows thin tick bars based on the number of segments provided.
         */
        "segments"?: number;
        /**
          * Defines the label for the suggested bar, which appears at the bottom in the legend.
          * @localizable
         */
        "suggestedLabel"?: string;
        /**
          * Defines the value for the suggested bar.
         */
        "suggestedValue"?: string;
        /**
          * Defines custom text for the completed bar tooltip.
          * @localizable
         */
        "tooltipCompleted"?: string;
        /**
          * Defines custom text for the suggested bar tooltip.
          * @localizable
         */
        "tooltipSuggested"?: string;
    }
    /**
     * @name Modal
     * @category Platform
     * @summary Use for focused interactions that require user attention before continuing.
     */
    interface Q2Modal {
        /**
          * Controls visibility of the close button and whether the modal can be dismissed with the backdrop or Escape key.
          * @default true
         */
        "closable"?: boolean;
        /**
          * Allows HTML markup as modal content, but it will be sanitized for security purposes.
         */
        "customMarkup"?: string;
        /**
          * A plain text description of the modal. Use this to provide context or information to the user.
         */
        "description"?: string;
        /**
          * Whether the action buttons should take up the full width of the modal footer.
          * @default true
         */
        "fullWidthButton"?: boolean;
        /**
          * The icon to display at the top of the modal. [See Icon documentation](https://tecton.q2developer.com/design-system/q2-icon).
         */
        "icon"?: string;
        /**
          * An image URL to be displayed beneath the title. It renders with 100% width.
         */
        "imageSrc"?: string;
        /**
          * Emitted when the modal backdrop is clicked.
         */
        "onTctBackdropClick"?: (event: Q2ModalCustomEvent<undefined>) => void;
        /**
          * Emitted when one of action buttons is clicked.
         */
        "onTctClick"?: (event: Q2ModalCustomEvent<any>) => void;
        /**
          * Emitted when the modal is closed.
         */
        "onTctClose"?: (event: Q2ModalCustomEvent<any>) => void;
        /**
          * Emitted when the modal is opened.
         */
        "onTctOpen"?: (event: Q2ModalCustomEvent<any>) => void;
        /**
          * Emitted when the modal has finished rendering.
          * @private
         */
        "onTctReady"?: (event: Q2ModalCustomEvent<any>) => void;
        /**
          * A plain text title of the modal displayed at the top.
         */
        "title"?: string;
    }
    interface Q2MonthPicker {
        "disabledMonths"?: string[];
        "onToggleChange"?: (event: Q2MonthPickerCustomEvent<any>) => void;
        "onViewChange"?: (event: Q2MonthPickerCustomEvent<any>) => void;
        "today"?: string;
        /**
          * @default Number(new Date().toLocaleString('en-US', { year: 'numeric' }))
         */
        "year"?: number;
    }
    /**
     * @name Mutation Observer
     * @category Utility
     * @summary Use for observing DOM changes to child elements and emitting events.
     */
    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;
    }
    /**
     * @name Option Group
     * @category Forms
     * @summary Use for grouping related options under a label in Select or Dropdown.
     */
    interface Q2Optgroup {
        /**
          * Determines whether all nested options are disabled.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Serves as the group header text.
         */
        "label"?: string;
    }
    /**
     * @name Option
     * @category Forms
     * @summary Use as a selectable item within Select, Dropdown, Tag, or Pill components.
     */
    interface Q2Option {
        /**
          * Disables child q2-option selectable state and removes the selector space.
          * @private 
          * @default false
         */
        "_hideSelectedBlock"?: boolean;
        /**
          * @default false
         */
        "_multiSelectHidden"?: boolean;
        /**
          * Used by q2-option-list to indicate the option is active
          * @private
         */
        "active"?: boolean;
        /**
          * Disables the option.
         */
        "disabled"?: boolean;
        /**
          * Used by consuming elements to disable all options in the group
          * @private
         */
        "disabledGroup"?: boolean;
        /**
          * The text that is displayed in the field when selected. If not provided, any text inside the element will be used.
          * @localizable
         */
        "display"?: string;
        /**
          * Used by consuming elements to enable multiline content support
          * @private
         */
        "multiline"?: boolean;
        /**
          * Used by consuming elements to indicate the display value of the option has changed.
          * @private
         */
        "onDisplayChanged"?: (event: Q2OptionCustomEvent<{ value: string; display: string }>) => void;
        /**
          * Is emitted when the option is clicked.
         */
        "onTctClick"?: (event: Q2OptionCustomEvent<{ type: 'select' | 'remove'; value: string }>) => void;
        /**
          * Used by q2-option-list to set a role on the option
          * @type {('option' | 'menuitem' | 'separator')}
          * @private 
          * @default 'option'
         */
        "role"?: string;
        /**
          * Used by q2-option-list to indicate the option is selected
          * @private 
          * @default false
         */
        "selected"?: boolean;
        /**
          * Renders a line in the item instead of text. Click events from these items will not have details provided. A `separator` allows for quick visual grouping of items, so interactions should not be bound to these options.
         */
        "separator"?: boolean;
        /**
          * Serves as the option's value.
         */
        "value"?: string;
    }
    /**
     * @name Option List
     * @category Forms
     * @summary Use internally by Select and Dropdown for rendering searchable option lists.
     */
    interface Q2OptionList {
        "align"?: 'left' | 'right';
        /**
          * Indicates a custom search is being implemented for the option list.
         */
        "customSearch"?: boolean;
        /**
          * Disables the option list.
         */
        "disabled"?: boolean;
        /**
          * Determines the label that is applied to the option list for accessibility purposes.
          * @default loc('tecton.element.optionList.label')
         */
        "label"?: string;
        /**
          * Enables the multi-select ability for the option list.
          * @info Only applicable when options are provided.
         */
        "multiple"?: boolean;
        /**
          * Disables the logic that handles selecting and focusing an option in the option list.
         */
        "noSelect"?: boolean;
        /**
          * Emitted when an option is selected or deselected.  When the multi-select is enabled, the `value` property will be `undefined` and the `selectedOptions` property will contain the selected option values.
          * @deprecated Use 'tctChange' instead
         */
        "onChange"?: (event: Q2OptionListCustomEvent<{ value: string; values: OptionValue[] }>) => void;
        /**
          * Emitted to indicate the intended state of the popover.
          * @private
         */
        "onPopoverState"?: (event: Q2OptionListCustomEvent<{ open: boolean; action: 'close' | 'select' | 'open' }>) => void;
        /**
          * Emitted when the component has finished rendering.
          * @private
         */
        "onReady"?: (event: Q2OptionListCustomEvent<undefined>) => void;
        /**
          * Emitted when an option is selected or deselected.  When the multi-select is enabled, the `value` property will be `undefined` and the `selectedOptions` property will contain the selected option values.
         */
        "onTctChange"?: (event: Q2OptionListCustomEvent<{ value: string; values: OptionValue[] }>) => void;
        /**
          * A list of the selected options on the element.
          * @default []
         */
        "selectedOptions"?: OptionValue[];
        /**
          * Applies focus to the selected option.
         */
        "showSelected"?: boolean;
        /**
          * Translates to the role of the option list
          * @default 'listbox'
         */
        "type"?: 'menu' | 'listbox';
    }
    /**
     * @name One-Time Password
     * @category Forms
     * @summary Use for entering a short one-time verification code.
     */
    interface Q2Otp {
        /**
          * Focuses the first one-time password field when the component loads.
          * @default false
         */
        "autoFocus"?: boolean;
        /**
          * Emits submission event when the last field is filled.
          * @default false
         */
        "autoSubmit"?: boolean;
        /**
          * Clears all fields and returns focus to the first field when `state` becomes `error`.
          * @default false
         */
        "clearOnError"?: boolean;
        /**
          * Disables all one-time password fields.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Error message rendered below the submit area.
          * @localizable
         */
        "errorMessage"?: string;
        /**
          * Helper text content.
          * @localizable
         */
        "helperText"?: string;
        /**
          * Visible label above the one-time password fields.
          * @localizable
         */
        "label"?: string;
        /**
          * Number of one-time password fields. Use a number for ungrouped fields or an array for grouped fields with dash separators.
          * @default 6
         */
        "length"?: number | number[] | string[] | string;
        /**
          * Obscures entered characters.
          * @default false
         */
        "masked"?: boolean;
        /**
          * Emitted when the fields are cleared.
         */
        "onTctClear"?: (event: Q2OtpCustomEvent<{ value: string }>) => void;
        /**
          * Emitted when all fields are filled.
         */
        "onTctComplete"?: (event: Q2OtpCustomEvent<{ value: string }>) => void;
        /**
          * Emitted when any field value changes.
         */
        "onTctInput"?: (event: Q2OtpCustomEvent<{ value: string }>) => void;
        /**
          * Emitted when the send-code button is clicked.
         */
        "onTctSendCode"?: (event: Q2OtpCustomEvent<void>) => void;
        /**
          * Emitted when the submit button is clicked or auto-submit triggers.
         */
        "onTctSubmit"?: (event: Q2OtpCustomEvent<{ value: string }>) => void;
        /**
          * Button text during processing.
          * @localizable
         */
        "processingLabel"?: string;
        /**
          * Button text for the send-code action.
          * @localizable
         */
        "sendCodeLabel"?: string;
        /**
          * Toggles helper text visibility.
          * @default false
         */
        "showHelperText"?: boolean;
        /**
          * Toggles visibility of the send-code button while `state` is `ready`.
          * @default true
         */
        "showSendCode"?: boolean;
        /**
          * Sets the visual status for the one-time password fields.  - `ready` — Shows the send-code button when `showSendCode` is enabled and hides the input fields until the user   requests a code. - `error` — Displays an error style on the fields. If `errorMessage` is set, it renders below the submit area.   When `clearOnError` is enabled, all fields are cleared and focus returns to the first field. - `success` — Locks the input, replaces the submit button with a success indicator, and displays the   `successMessage` if provided. - `verifying` — Locks the input and puts the submit button into a loading state. When combined with `autoSubmit`,   a processing overlay with `processingLabel` is shown over the fields.
         */
        "state"?: 'error' | 'ready' | 'success' | 'verifying' | undefined;
        /**
          * Renders a submit button with this label.
          * @localizable
         */
        "submitLabel"?: string;
        /**
          * Success message rendered below the submit area.
          * @localizable
         */
        "successMessage"?: string;
        /**
          * The composed one-time password value.
          * @default ''
         */
        "value"?: string;
    }
    /**
     * @name Pagination
     * @category Display
     * @summary Use for navigating between pages of content like search results or tables.
     */
    interface Q2Pagination {
        /**
          * Indicates the horizontal alignment of pagination elements
          * @info When using the 'stacked' version, the default alignment is 'center'. When using the unstacked version, the default alignment is 'right'.
         */
        "align"?: 'left' | 'center' | 'right';
        /**
          * @deprecated Use 'align' instead
         */
        "alignment"?: 'left' | 'center' | 'right';
        /**
          * Determines whether the component uses dynamic resizing behavior. This is disabled when `pagesOnly`, `recordsOnly`, or `stacked` is true.
          * @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 
          * @deprecated Use 'tctChange' instead
         */
        "onChange"?: (event: Q2PaginationCustomEvent<{ page: number; perPage: number }>) => void;
        /**
          * Emitted when the page is changed.
          * @legacyEvent
         */
        "onTctChange"?: (event: Q2PaginationCustomEvent<{ page: number; perPage: number }>) => void;
        /**
          * The current page that is being displayed.
         */
        "page"?: number;
        /**
          * The number of pages that can be displayed.
          * @info Only referenced when `pagesOnly` is true.
         */
        "pages"?: number;
        /**
          * Indicates to display only the current and total pages. This disables the `autoSize` feature.
         */
        "pagesOnly"?: boolean;
        /**
          * The total number of records displayed on each page. This disables the `autoSize` feature.
         */
        "perPage"?: number;
        /**
          * 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.
          * @info `pagesOnly` or `recordsOnly` being true disables this feature.  **Example:**
          * @snippet this.perPageIncrements = [10, 25, 50];
         */
        "perPageIncrements"?: number[] | string[] | string | undefined;
        /**
          * Description of the record type to be displayed alongside the record count.
         */
        "recordType"?: string;
        /**
          * Indicates to display only the current and total records.
         */
        "recordsOnly"?: boolean;
        /**
          * Allows the component to be displayed in a stacked layout. This disables the `autoSize` feature.
          * @info When set to true, the default alignment will be 'center'. When false, the default alignment is 'right'.
         */
        "stacked"?: boolean;
        /**
          * The total number of records to paginate.
         */
        "total"?: number;
    }
    /**
     * @name Pill
     * @category Display
     * @summary Use for displaying and removing active filters in data views.
     */
    interface Q2Pill {
        /**
          * Determine if the elements is in the selected state, with values.
         */
        "active"?: boolean;
        /**
          * Indicates that the pill has no border
         */
        "borderless"?: boolean;
        /**
          * Indicates the pill cannot be focused or interacted with.
         */
        "disabled"?: boolean;
        /**
          * Instructs the component to use the action sheet workflow for displaying its options.  For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).
          * @default !!window.Tecton?.useActionSheets
         */
        "hoist"?: boolean;
        /**
          * The text that populates the label.
          * @localizable
         */
        "label"?: string;
        /**
          * The maximum number of characters to display before ellipcizing.
          * @info Limitless by default.
         */
        "maxLength"?: number;
        /**
          * Enables the multi-select ability for the dropdown.
          * @info Only applicable when options are provided.
         */
        "multiple"?: boolean;
        /**
          * Emitted when the pill is clicked or the selected options change.  When multi-select is enabled, `value` will be `undefined`.
          * @legacyEvent 
          * @deprecated Use 'tctChange' instead
         */
        "onChange"?: (event: Q2PillCustomEvent<{ value: string; values: OptionValue1[]; active: boolean }>) => void;
        /**
          * Emitted when the pill is clicked or the selected options change.  When multi-select is enabled, `value` will be `undefined`.
          * @legacyEvent
         */
        "onTctChange"?: (event: Q2PillCustomEvent<{ value: string; values: OptionValue1[]; active: boolean }>) => void;
        /**
          * Determine whether the popover is open or closed.
          * @readonly
         */
        "open"?: boolean;
        /**
          * Determines the label that is applied to the option list for accessibility purposes.
         */
        "optionListLabel"?: string;
        /**
          * Aligns the popover dropdown to the left or right side of the input field.
          * @default 'right'
         */
        "popoverAlignment"?: 'left' | 'right';
        /**
          * 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 
          * @default 150
         */
        "popoverMinHeight"?: number;
        /**
          * A list of the selected options on the element.
          * @default []
         */
        "selectedOptions"?: OptionValue1[];
        /**
          * The color of the element when in the active state.
         */
        "theme"?: 'primary' | 'secondary' | 'tertiary';
        /**
          * The value emitted when the component is selected.
         */
        "value"?: string;
    }
    /**
     * @name Popover
     * @category Display
     * @summary Use for positioning floating content relative to a trigger element.
     */
    interface Q2Popover {
        /**
          * Aligns the popover to the left or right side of the control element.
          * @default 'left'
         */
        "align"?: 'left' | 'right';
        /**
          * Indicates the popover will match the width of its parent element.
         */
        "block"?: boolean;
        /**
          * The element that controls the popover's behavior.
         */
        "controlElement"?: HTMLElement;
        /**
          * 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
         */
        "minHeight"?: number;
        /**
          * @default null
         */
        "mode"?: 'legacy';
        /**
          * Emitted when the popover is opened or closed.
          * @deprecated Use 'tctPopoverStateChanged' instead
         */
        "onPopoverStateChanged"?: (event: Q2PopoverCustomEvent<{ open: boolean }>) => void;
        /**
          * Emitted when the popover is opened or closed.
         */
        "onTctPopoverStateChanged"?: (event: Q2PopoverCustomEvent<{ open: boolean }>) => void;
        /**
          * Controls whether the popover is open or closed.
         */
        "open"?: boolean;
    }
    /**
     * @name Radio
     * @category Forms
     * @summary Use as a single option within a Radio Group.
     */
    interface Q2Radio {
        /**
          * @deprecated
         */
        "ariaLabel"?: string;
        /**
          * The state of the radio. This modifies the visual appearance of the element.
          * @default false
         */
        "checked"?: boolean;
        /**
          * Disables the radio and prevents interaction.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Used by q2-radio-group to disable all options in the group
          * @private 
          * @default false
         */
        "groupDisabled"?: boolean;
        /**
          * Used by q2-radio-group to make all options in the group readonly
          * @private 
          * @default false
         */
        "groupReadonly"?: boolean;
        /**
          * Used by q2-radio-group to make the options display as tiles
          * @private 
          * @default false
         */
        "groupTileLayout"?: boolean;
        /**
          * Hides the field's `<label>` element from view.
          * @warning Only use when a visible label is impractical.
         */
        "hideLabel"?: boolean;
        /**
          * The text that describes the individual radio option.
          * @localizable
         */
        "label"?: string;
        /**
          * Used by q2-radio-group to apply a name to all options in the group
          * @private
         */
        "name"?: string;
        /**
          * Emitted when the radio is checked.
          * @deprecated Use 'tctChange' instead
         */
        "onChange"?: (event: Q2RadioCustomEvent<{ value: string }>) => void;
        /**
          * Emitted when the radio is checked.
         */
        "onTctChange"?: (event: Q2RadioCustomEvent<{ value: string }>) => void;
        /**
          * The radio is non-interactive, but remains focusable.
         */
        "readonly"?: boolean;
        /**
          * @private 
          * @default 0
         */
        "tabIndex"?: number;
        /**
          * The value that is returned in the `change` event that is emitted from the `q2-radio-group`.
         */
        "value"?: string;
    }
    /**
     * @name Radio Group
     * @category Forms
     * @summary Use for selecting exactly one option from a small set of choices.
     */
    interface Q2RadioGroup {
        /**
          * Determines if all radios in the group are put into a `disabled` state.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Determines if the component should display in an errant state.
          * @default false
         */
        "hasError"?: boolean;
        /**
          * Hide's the group's `<label>` element from view.
          * @warning Only use when a visible label is impractical.
         */
        "hideLabel"?: boolean;
        /**
          * Text for the fieldset legend describing the radio group.
          * @localizable
         */
        "label"?: string;
        /**
          * Identifier which ties all radios together for accessibility and DOM selection.
         */
        "name"?: string;
        /**
          * Emitted when the value of the radio group changes.
          * @legacyEvent 
          * @deprecated Use 'tctChange' instead
         */
        "onChange"?: (event: Q2RadioGroupCustomEvent<{ value: string }>) => void;
        /**
          * Emitted when the value of the radio group changes.
          * @legacyEvent
         */
        "onTctChange"?: (event: Q2RadioGroupCustomEvent<{ value: string }>) => void;
        /**
          * Appends "(optional)" to the group label, and sets `aria-required` on the nested input tag to `false`.
         */
        "optional"?: boolean;
        /**
          * The layout direction of radio options when `tileLayout` is not enabled.
          * @default 'vertical'
         */
        "orientation"?: 'vertical' | 'horizontal';
        /**
          * The width, in pixels, below which a horizontal non-tile layout displays vertically.
          * @info The component determines this based on its own width, not the browser window.
          * @default 440
         */
        "orientationThreshold"?: number;
        /**
          * Determines if all radios in the group can be focused, but not interacted with.
         */
        "readonly"?: boolean;
        /**
          * Provides alignment direction for tile-style radio group.
          * @default 'center'
         */
        "tileAlignment"?: 'left' | 'center' | 'right';
        /**
          * Show the radio group as a horizontal set of tiles.
         */
        "tileLayout"?: boolean;
        /**
          * @deprecated
         */
        "tilelayout"?: boolean;
        /**
          * The `value` of the currently selected `q2-radio` within the `q2-radio-group`.
         */
        "value"?: string;
    }
    /**
     * @name Relative Time
     * @category Text
     * @summary Use for displaying time differences like "2 hours ago" or "in 3 days".
     */
    interface Q2RelativeTime {
        /**
          * If you want to display the length of time between two specific dates, you can provide a valid `date` and `baseDate`, and the component will display the length of time between the two dates.  If `baseDate` is not provided, the date and time at render will be used instead and - if `sync` is true - updated every second to reflect the time between the `date` value and the time at render.
          * @warning - Requires a valid `date` value. - If the provided `baseDate` is invalid, the component will display "Invalid Date" and a warning message will be printed in the console. - Providing a valid `baseDate` will disable `sync` and remove the "in"/"ago" suffixes in the time message. - Must be a valid ISO date string.
         */
        "baseDate"?: Date | string;
        /**
          * The date you want to calculate relative time from.
          * @warning - Must be a valid ISO date string. - If the provided `date` is invalid, the component will display "Invalid Date" and a warning message will be printed in the console.
         */
        "date"?: Date | string;
        /**
          * The language used for the displayed message.
          * @info It is recommended to use the BCP 47 Language Tags in the ["language-extlang" format](https://www.w3.org/International/articles/language-tags/).
          * @default document.documentElement.lang || 'en-US'
         */
        "locale"?: string;
        /**
          * The length of the relative time message.
          * @default 'short'
         */
        "messageFormat"?: 'long' | 'short' | 'narrow';
        /**
          * Determines if the displayed message will use numeric or relative values.
          * @info  Set this property to `always` to force the use of numeric values (e.g. "1 day ago") rather than relative ones (e.g. "yesterday").
          * @default 'auto'
         */
        "numeric"?: 'always' | 'auto';
        /**
          * Keep the displayed message updated as time passes in the webpage.
          * @warning If a valid `baseDate` is provided, `sync` will be set to `false`.
          * @default true
         */
        "sync"?: boolean;
        /**
          * Enforces the use of the provided unit of measurement in the displayed message.
         */
        "unit"?: 'second' | 'minute' | 'hour' | 'day' | 'month' | 'quarter' | 'year';
    }
    /**
     * @name Resize Observer
     * @category Utility
     * @summary Use for detecting size changes to elements and emitting resize events.
     */
    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;
    }
    /**
     * @name Search
     * @category Forms
     * @summary Use for search-first selection where the option list is driven by user input — supports both in-memory filtering and async fetch.
     */
    interface Q2Search {
        /**
          * Renders an icon button when the field is non-empty. Pressing the button clears the query and selection.
          * @default true
         */
        "clearable"?: boolean;
        /**
          * Disables all interaction with the field and leverages the disabled visual style of `q2-input`.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * The presence of `errors` will mark the field as invalid, putting it into an error state.
          * @localizable
         */
        "errors"?: string[];
        /**
          * When `true`, the component case-insensitively matches each `<q2-option>`'s `display` and `innerText` against the current query and toggles `hidden`. When `false` (default), the consumer is expected to filter or fetch options in response to the `tctInput` event.
          * @default false
         */
        "filter"?: boolean;
        /**
          * Hides the field's `<label>` element from view.
          * @warning Only use when a visible label is impractical.
          * @default false
         */
        "hideLabel"?: boolean;
        /**
          * Determines whether to show an error state. Its primary use-case is for an unfilled field.
         */
        "invalid"?: boolean;
        /**
          * The text that will be used as the label for the field.
          * @localizable
         */
        "label"?: string;
        /**
          * Determines the label that is applied to the option list for accessibility purposes.
          * @localizable 
          * @default 'tecton.element.search.listLabel'
         */
        "listLabel"?: string;
        /**
          * Opens the popover and shows a spinner inside it until results populate. The clear button is suppressed while loading.
          * @default false
         */
        "loading"?: boolean;
        /**
          * The minimum number of rows the component will try to display below or above the component when opened.
          * @default 3
         */
        "minRows"?: number;
        /**
          * Enables text wrapping for `q2-option` elements. When `false`, the text truncates and does not wrap.
          * @default false
         */
        "multilineOptions"?: boolean;
        /**
          * Enables multi-select functionality.
          * @default false
         */
        "multiple"?: boolean;
        /**
          * The message displayed when the popover is open and no options are visible. Overridden by the `empty` slot.
          * @localizable 
          * @default 'tecton.element.search.noResults'
         */
        "noResultsMessage"?: string;
        /**
          * Emitted when an option is selected or deselected.  When multi-select is enabled, `value` is `undefined` and `selectedOptions` contains the selected values. Ignore `tctVModel` — included for Vue v-model compatibility.
         */
        "onTctChange"?: (event: Q2SearchCustomEvent<{ value: string; selectedOptions: string[]; tctVModel: string | string[] }>) => void;
        /**
          * Emitted when the popover closes.
         */
        "onTctClose"?: (event: Q2SearchCustomEvent<void>) => void;
        /**
          * Emitted on every keystroke with the current query.
         */
        "onTctInput"?: (event: Q2SearchCustomEvent<{ query: string }>) => void;
        /**
          * Emitted when the popover opens.
         */
        "onTctOpen"?: (event: Q2SearchCustomEvent<void>) => void;
        /**
          * Appends "(optional)" to the field label, and sets `aria-required` on the nested input tag to `false`.
          * @default false
         */
        "optional"?: boolean;
        /**
          * Text that appears within the field when it is blurred and empty.
          * @localizable
         */
        "placeholder"?: string;
        /**
          * Aligns the popover dropdown to the left or right side of the input. Requires the `--tct-popover-width` CSS custom property to be set on the host; without it q2-search logs a warning and renders the popover at input-width (the default behavior). When the viewport is narrower than the defined width, q2-search transparently falls back to input-width so the popover never overflows the viewport.
         */
        "popoverAlignment"?: 'left' | 'right';
        /**
          * Force the maximum height of the popover. Interpreted as pixels. If unset or exceeds available space, the component auto-detects the maximum height.
         */
        "popoverMaxHeight"?: number;
        /**
          * Appends "(read only)" to the field label, and field becomes unusable but remains focusable. Takes priority over `optional` if both are `true`.
          * @default false
         */
        "readonly"?: boolean;
        /**
          * Each item in this array should correspond to the value of a `q2-option` element. Only relevant for `multiple` (multi-select) implementations.
          * @default []
         */
        "selectedOptions"?: string[];
        /**
          * Renders a header inside the popover with a toggle to switch between viewing search results and only the selected options. Only applies to `multiple` (multi-select).
          * @default false
         */
        "showSelectedToggle"?: boolean;
        /**
          * The current value for the search. Should correspond to the value of a nested `q2-option` element. Only relevant for single-select implementations.
         */
        "value"?: string;
    }
    /**
     * @name Section
     * @category Display
     * @summary Use for grouping related content with a header and optional collapse.
     */
    interface Q2Section {
        /**
          * Determines if the section is collapsible.
         */
        "collapsible"?: boolean;
        /**
          * Indicates if the `q2-section` is in an expanded state or not.
         */
        "expanded"?: boolean;
        /**
          * The text to display above the `q2-section`. Renders as an `<h2>` element.  It is also used to provided an `aria-label` for the toggle button when the component is collapsible.
          * @warning If you are providing a custom header, setting this property is still strongly encouraged for the purposes of accessibility.
         */
        "label"?: string;
        /**
          * Determines if the collapse chevron icon should show in the `q2-section` header.
         */
        "noCollapseIcon"?: boolean;
        /**
          * Emitted when the section is expanded or collapsed.
          * @legacyEvent 
          * @deprecated Use 'tctChange' instead
         */
        "onChange"?: (event: Q2SectionCustomEvent<{ expanded: boolean }>) => void;
        /**
          * Emitted when the section is expanded or collapsed.
          * @legacyEvent
         */
        "onTctChange"?: (event: Q2SectionCustomEvent<{ expanded: boolean }>) => void;
    }
    /**
     * @name Section Container
     * @category Display
     * @summary Use for managing multiple collapsible sections with single or multiple open modes.
     */
    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.
         */
        "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;
    }
    /**
     * @name Select
     * @category Forms
     * @summary Use for choosing from a known list of options with single-select or multi-select.
     */
    interface Q2Select {
        /**
          * @deprecated
         */
        "ariaLabel"?: string;
        /**
          * Renders an icon button when the field is non-empty. Pressing the button clears all input from the field.
         */
        "clearable"?: boolean;
        /**
          * Disables all interaction with the field and leverages the disabled visual style of `q2-input`.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * The presence of `errors` will mark the field as invalid, putting it into an error state.
          * @localizable
         */
        "errors"?: string[];
        /**
          * Hide's the field's `<label>` element from view.
          * @warning Only use when a visible label is impractical.
         */
        "hideLabel"?: boolean;
        /**
          * Instructs the component to use the action sheet workflow for displaying its options.  For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).
          * @warning If your `q2-select` renders inside of an iframe, and you are using multiline/robust content options, any custom CSS you apply to your options will not get passed up to the platform which displays the action sheet. For this reason, we strongly suggest using the [q2-card](https://tecton.q2developer.com/design-system/q2-card/) component since its styling is managed by Tecton.
          * @default !!window.Tecton?.useActionSheets
         */
        "hoist"?: boolean;
        /**
          * Determines whether to show an error state. Its primary use-case is for an unfilled field.
         */
        "invalid"?: boolean;
        /**
          * The text that will be used as the label for the field.
          * @localizable
         */
        "label"?: string;
        /**
          * Determines the label that is applied to the option list for accessibility purposes.
          * @localizable 
          * @default loc('tecton.element.select.listLabel')
         */
        "listLabel"?: string;
        /**
          * The minimum number of rows the component will try to display below or above the component when opened.
          * @default 3
         */
        "minRows"?: number;
        /**
          * Enables text wrapping for `q2-option` elements. When `false`, the text truncates and does not wrap.
          * @default false
         */
        "multilineOptions"?: boolean;
        /**
          * Enables multi-select functionality.
          * @default false
         */
        "multiple"?: boolean;
        /**
          * Emitted when an option is selected or deselected.  When the multi-select is enabled, the `value` property will be `undefined` and the `selectedOptions` property will contain the selected option values. Ignore the `tctVModel` property it's only included for Vue v-model compatibility.
          * @deprecated Use 'tctChange' instead
          * @legacyEvent
         */
        "onChange"?: (event: Q2SelectCustomEvent<{ value: string; selectedOptions: string[]; tctVModel: string | string[] }>) => void;
        /**
          * Emitted when the input value changes.  Requires the `searchable` prop to be set to `true`.
          * @deprecated Use 'tctInput' instead
         */
        "onInput"?: (event: Q2SelectCustomEvent<{ query: string }>) => void;
        /**
          * Emitted when an option is selected or deselected.  When the multi-select is enabled, the `value` property will be `undefined` and the `selectedOptions` property will contain the selected option values. Ignore the `tctVModel` property it's only included for Vue v-model compatibility.
          * @legacyEvent
         */
        "onTctChange"?: (event: Q2SelectCustomEvent<{ value: string; selectedOptions: string[]; tctVModel: string | string[] }>) => void;
        /**
          * Emitted when the input value changes.  Requires the `searchable` prop to be set to `true`.
         */
        "onTctInput"?: (event: Q2SelectCustomEvent<{ query: string }>) => void;
        /**
          * Appends "(optional)" to the field label, and sets `aria-required` on the nested input tag to `false`.
          * @default false
         */
        "optional"?: boolean;
        /**
          * Text that appears within the field when it is blurred and empty. Placeholder text disappears when the user selects an option.
          * @localizable
         */
        "placeholder"?: string;
        /**
          * @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.
          * @default null
         */
        "popoverMode"?: 'legacy';
        /**
          * Appends "(read only)" to the field label, and field becomes unusable, but remains focusable. Takes priority over `optional` if both are `true`.
          * @default false
         */
        "readonly"?: boolean;
        /**
          * Enables search functionality.
          * @warning `searchable` is not compatible with the `hoist` prop. The action sheet workflow used when `hoist` is `true` does not support in-list search filtering. If both are set, `searchable` has no effect while the action sheet is active.
          * @default false
         */
        "searchable"?: boolean;
        /**
          * Each item in this array should correspond to the value of a `q2-option` element. This property is only relevant for `multiple` (i.e., multi-select) implementations.
          * @default []
         */
        "selectedOptions"?: string[];
        /**
          * Determines whether to show a success state. The error state takes precedence when both are set.
          * @default false
         */
        "valid"?: boolean;
        /**
          * The current value for the select. This should correspond to the value of a nested q2-option element. This property is only relevant for single-select implementations.
         */
        "value"?: string;
    }
    /**
     * @name Stepper
     * @category Display
     * @summary Use for guiding users through a multi-step workflow with horizontal progress.
     */
    interface Q2Stepper {
        /**
          * The currently selected step.
         */
        "currentStep"?: number;
        /**
          * The last step the user may navigate to.
          * @info Will be managed automatically if not provided.
         */
        "lastEnabledStep"?: number;
        /**
          * Emitted when the selected step changes.
          * @legacyEvent 
          * @deprecated Use 'tctChange' instead
         */
        "onChange"?: (event: Q2StepperCustomEvent<any>) => void;
        /**
          * Emitted when the selected step changes.
          * @legacyEvent
         */
        "onTctChange"?: (event: Q2StepperCustomEvent<any>) => void;
        /**
          * Used to determine the number of steps in the stepper.
          * @private
         */
        "stepCount"?: number;
    }
    /**
     * @name Stepper Pane
     * @category Display
     * @summary Use as a single step within a Stepper or Vertical Stepper.
     */
    interface Q2StepperPane {
        /**
          * The description for the pane.
          * @localizable
         */
        "description"?: string;
        /**
          * Disables the pane's step button in the stepper, preventing user interaction.
         */
        "disabled"?: boolean;
        /**
          * Used by q2-stepper and q2-stepper-vertical to determine which pane is active
          * @private
         */
        "isActive"?: boolean;
        /**
          * The label for the pane.
          * @localizable
         */
        "label"?: string;
        /**
          * Emitted when the active state of the pane changes.
          * @deprecated Use 'tctActiveChange' instead
         */
        "onActiveChange"?: (event: Q2StepperPaneCustomEvent<StepperPaneEvent>) => void;
        /**
          * Emitted when the content of the pane changes.
          * @private
         */
        "onContentChange"?: (event: Q2StepperPaneCustomEvent<undefined>) => void;
        /**
          * Emitted when the status of the pane changes.
          * @deprecated Use 'tctStatusChange' instead
         */
        "onStatusChange"?: (event: Q2StepperPaneCustomEvent<StepperPaneEvent>) => void;
        /**
          * Emitted when the active state of the pane changes.
         */
        "onTctActiveChange"?: (event: Q2StepperPaneCustomEvent<StepperPaneEvent>) => void;
        /**
          * Emitted when the status of the pane changes.
         */
        "onTctStatusChange"?: (event: Q2StepperPaneCustomEvent<StepperPaneEvent>) => void;
        /**
          * Indicates to display the content of the pane when one of its children is selected.
          * @info Currently only supported in the `<q2-stepper-vertical>` component.
         */
        "showWithChildren"?: boolean;
        /**
          * The status of the pane.
         */
        "status"?: 'complete' | 'error' | 'locked';
    }
    /**
     * @name Vertical Stepper
     * @category Display
     * @summary Use for guiding users through a multi-step workflow with vertical progress.
     */
    interface Q2StepperVertical {
        /**
          * The `id` of the currently selected `q2-stepper-pane`.
         */
        "currentStepId"?: string;
        /**
          * Emitted when the selected step changes.
          * @legacyEvent 
          * @deprecated Use 'tctChange' instead
         */
        "onChange"?: (event: Q2StepperVerticalCustomEvent<{
        selectedStep: HTMLQ2StepperPaneElement;
        selectedStepId: string;
        currentStepId: string;
    }>) => void;
        /**
          * Emitted when the selected step changes.
          * @legacyEvent
         */
        "onTctChange"?: (event: Q2StepperVerticalCustomEvent<{
        selectedStep: HTMLQ2StepperPaneElement;
        selectedStepId: string;
        currentStepId: string;
    }>) => void;
    }
    /**
     * @name Surface
     * @category Display
     * @summary An unopinionated visual primitive. A plain block by default that gains visual treatment via attributes.
     */
    interface Q2Surface {
        /**
          * Applies a background color from the design-system token palette. When unset, the surface is transparent.
         */
        "background"?: 'default' | 'primary' | 'secondary' | 'tertiary' | 'gray';
        /**
          * Applies a gradient fade across the background.
          * @info Direction and colors are customizable via CSS custom properties.
          * @default false
         */
        "backgroundGradient"?: boolean;
        /**
          * Renders a visible border around the surface, optionally in a themed color.
         */
        "border"?: 'default' | 'primary' | 'secondary' | 'tertiary' | 'gray';
        /**
          * Renders the border as a gradient using the color set by the `border` prop. Takes precedence over a solid `border` when both are set.
          * @info Requires `border` to be set to produce a colored gradient. Without `border`, falls back to the default border color.
          * @default false
         */
        "borderGradient"?: boolean;
        /**
          * Makes the surface interactive, responding to clicks.
          * @info Emits `tctClick` when clicked.
          * @default false
         */
        "clickable"?: boolean;
        /**
          * Gives the component a drop shadow.
          * @info 0 means no shadow; higher values appear more elevated.
          * @default 0
         */
        "elevation"?: 0 | 1 | 2 | 3 | 4 | 5;
        /**
          * Adds internal padding applied uniformly on all sides.
          * @info Individual axes can be overridden with `inset-x` and `inset-y`.
          * @default 'none'
         */
        "inset"?: 'none' | 'compact' | 'normal' | 'comfortable';
        /**
          * Adds horizontal padding, overriding the horizontal component of `inset`.
         */
        "insetX"?: 'none' | 'compact' | 'normal' | 'comfortable';
        /**
          * Adds vertical padding, overriding the vertical component of `inset`.
         */
        "insetY"?: 'none' | 'compact' | 'normal' | 'comfortable';
        /**
          * Emitted when the surface is clicked and `clickable` is true.
         */
        "onTctClick"?: (event: Q2SurfaceCustomEvent<void>) => void;
        /**
          * Adds corner rounding on a scale from 0 (sharp) to 5 (most rounded).
          * @default 0
         */
        "radius"?: 0 | 1 | 2 | 3 | 4 | 5;
    }
    /**
     * @name Tab Container
     * @category Display
     * @summary Use for switching between multiple views within the same context.
     */
    interface Q2TabContainer {
        /**
          * Controls which variables are used to color the tab controls.  - `undefined` (default)   - Uses `--t-tab-active` and `--t-tab-inactive`. - `alt`   - Uses `--t-tab-alt-active` and `--t-tab-alt-inactive`.   - The default fallback for these variables is `inherit`.
         */
        "color"?: 'alt' | undefined;
        /**
          * Used to establish a relationship between `q2-tab-container` and its associated tab panes.
          * @warning The element can fail if this property is not set. Nested tab containers without the `name` property will not render correctly.
         */
        "name"?: string;
        /**
          * Controls visibility of tab list in a print view. Tab content will still be visible even if `noPrint` is true.
          * @default false
         */
        "noPrint"?: boolean;
        /**
          * Emitted when the selected tab changes.
          * @legacyEvent 
          * @deprecated Use 'tctChange' instead
         */
        "onChange"?: (event: Q2TabContainerCustomEvent<{ value: string }>) => void;
        /**
          * Emitted when the component has finished rendering.
          * @private
         */
        "onSettled"?: (event: Q2TabContainerCustomEvent<undefined>) => void;
        /**
          * Emitted when the selected tab changes.
          * @legacyEvent
         */
        "onTctChange"?: (event: Q2TabContainerCustomEvent<{ value: string }>) => void;
        /**
          * The orientation of the tab strip. - `horizontal` (default) — tabs run left-to-right above the panel content. - `vertical` — tabs stack top-to-bottom beside the panel content.
          * @info Vertical orientation is intended for wider layouts (e.g. admin consoles). At viewports narrower than 768px, the component falls back to horizontal.
          * @default 'horizontal'
         */
        "orientation"?: 'horizontal' | 'vertical';
        /**
          * Determines the font size of the tab controls.
         */
        "type"?: 'main' | 'section';
        /**
          * Corresponds to the value of the selected tab pane.
         */
        "value"?: string;
    }
    /**
     * @name Tab Pane
     * @category Display
     * @summary Use as a single tab within a Tab Container.
     */
    interface Q2TabPane {
        /**
          * Adds a `q2-badge` component with the number provided right next to the tab pane label.
         */
        "badgeCount"?: number;
        /**
          * The text that will be pronounced alongside `badgeCount` when the screen reader presents the tab.
          * @localizable
         */
        "badgeDescription"?: string;
        /**
          * Allows you to specify the status of the tab, which is always visible.
         */
        "badgeStatus"?: Q2Badge['status'];
        /**
          * Allows you to specify the color of the badge when the tab is active.
         */
        "badgeTheme"?: Q2Badge['theme'];
        /**
          * Used by q2-tab-container to apply a unique id to each tab pane
          * @private
         */
        "guid"?: number;
        /**
          * Used by q2-tab-container to indicate the pane's index
          * @private
         */
        "index"?: number;
        /**
          * Serves as the text that will be visible in the tab control provided by `q2-tab-container`.
          * @localizable
         */
        "label"?: string;
        /**
          * Used by q2-tab-container to apply a name to all options in the group
          * @private
         */
        "name"?: string;
        /**
          * Emitted when the badge count, description, theme, or status changes.
          * @private
         */
        "onBadge"?: (event: Q2TabPaneCustomEvent<boolean>) => void;
        /**
          * Used by q2-tab-container to indicate the option is selected
          * @private
         */
        "selected"?: boolean;
        /**
          * Serves as the pane's value. Should correspond to the `q2-tab-container` value.
         */
        "value"?: string;
    }
    /**
     * @name Tag
     * @category Display
     * @summary Use for displaying metadata labels or categories on content.
     */
    interface Q2Tag {
        /**
          * Instructs the component to use the action sheet workflow for displaying its options.  For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).
          * @default !!window.Tecton?.useActionSheets
         */
        "hoist"?: boolean;
        /**
          * The text that populates the label.
          * @localizable
         */
        "label"?: string;
        /**
          * Emitted when a provided option is clicked.  Requires at least one option to be provided.
          * @deprecated Use 'tctClick' instead
         */
        "onClick"?: (event: Q2TagCustomEvent<{ value: string }>) => void;
        /**
          * Emitted when a provided option is clicked.  Requires at least one option to be provided.
         */
        "onTctClick"?: (event: Q2TagCustomEvent<{ value: string }>) => void;
        /**
          * Determine whether the popover is open or closed.
          * @readonly
         */
        "open"?: boolean;
        /**
          * Determines the label that is applied to the option list for accessibility purposes.
          * @default 'options'
         */
        "optionListLabel"?: string;
        /**
          * Aligns the popover dropdown to the left or right side of the input field.
          * @default 'right'
         */
        "popoverAlignment"?: 'left' | 'right';
        /**
          * 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
         */
        "popoverMinHeight"?: number;
        /**
          * The color of the element.
         */
        "theme"?: 'primary' | 'secondary' | 'tertiary';
    }
    /**
     * @name Textarea
     * @category Forms
     * @summary Use for multi-line text input like messages, comments, or lengthy descriptions.
     */
    interface Q2Textarea {
        /**
          * Defines the number of columns displayed in the field. If not set, the field will be full-width and respond to the window size.
         */
        "cols"?: number;
        /**
          * Indicates the field cannot be focused or interacted with.
         */
        "disabled"?: boolean;
        /**
          * Each item in the `errors` array will appear below the input field when the field is focused.
          * @localizable
         */
        "errors"?: string[];
        /**
          * Hide's the field's `<label>` element from view.
          * @warning Only use when a visible label is impractical.
         */
        "hideLabel"?: boolean;
        /**
          * When `true` and the input field has an active validation error, the field shows the error state without displaying associated error messages below the field (from the errors array above). Primarily used for dropdown selects and date pickers whose controls appear below the input field (where the error messages, if displayed, would also appear).
         */
        "hideMessages"?: boolean;
        /**
          * Each item in the `hints` array will appear below the input field when the field is focused.
          * @info The `errors` array takes precedence over the `hints` array. If an input field has both hints and errors, only the errors will display. Once all errors are resolved, the hints display the next time the field is focused.
          * @localizable
         */
        "hints"?: string[];
        /**
          * The label that appears above the field. This is announced by screen readers when the field is focused.
          * @localizable
         */
        "label"?: string;
        /**
          * Defines the maximum allowed input length in characters. Formatting characters (e.g. `.`, `-`, etc) are included in the `maxlength` comparison. Make sure you account for them when setting the `maxlength` value.
          * @info Please set the `rows` attribute in correlation with `maxlength` to show as much text as possible in the field viewport.
         */
        "maxlength"?: number;
        /**
          * Emitted when the field loses focus after the value has been changed.
          * @deprecated Use 'tctChange' instead
          * @legacyEvent
         */
        "onChange"?: (event: Q2TextareaCustomEvent<{ value: string }>) => void;
        /**
          * Emitted when the field value is updated.
          * @deprecated Use 'tctInput' instead
          * @legacyEvent
         */
        "onInput"?: (event: Q2TextareaCustomEvent<{ value: string }>) => void;
        /**
          * Emitted when the field loses focus after the value has been changed.
         */
        "onTctChange"?: (event: Q2TextareaCustomEvent<{ value: string }>) => void;
        /**
          * Emitted when the field value is updated.
         */
        "onTctInput"?: (event: Q2TextareaCustomEvent<{ value: string }>) => void;
        /**
          * Appends "(optional)" to the field label, and sets `aria-required` on the nested input tag to `false`.
         */
        "optional"?: boolean;
        /**
          * Text that appears within the field when it is blurred and empty. Placeholder text disappears when the user focuses on the field and provides input.
          * @info Primarily used for rare cases in which a visible form label is not expected (e.g., search fields).
          * @localizable
         */
        "placeholder"?: string;
        /**
          * Appends "(read only)" to the field label, and field becomes unusable, but remains focusable. Takes priority over `optional` if both are `true`.
         */
        "readonly"?: boolean;
        /**
          * Indicates how the field is resizable.
          * @default 'vertical'
         */
        "resize"?: 'none' | 'vertical' | 'horizontal' | 'both' | 'vertical-auto';
        /**
          * Defines the number of rows displayed in the field.
         */
        "rows"?: number;
        /**
          * Determines whether the field is subject to spell-checking by the underlying browser or OS.
         */
        "spellcheck"?: boolean;
        /**
          * The value of the field.
         */
        "value"?: string;
    }
    /**
     * @name Toast
     * @category Platform
     * @summary Use for brief, non-intrusive notifications that appear temporarily and do not require user interaction.
     */
    interface Q2Toast {
        /**
          * Enables automatic dismissal after a duration.
          * @default false
         */
        "autoClose"?: boolean;
        /**
          * Controls whether the close button is displayed.
          * @default true
         */
        "closable"?: boolean;
        /**
          * The duration in milliseconds before auto dismissal.
          * @default 7000
         */
        "duration"?: number;
        /**
          * Manually hide the icon where it would otherwise appear.
          * @default false
         */
        "hideIcon"?: boolean;
        /**
          * Optional icon type to display.
         */
        "icon"?: string;
        /**
          * Optional message for the toast body.
         */
        "message"?: string;
        /**
          * Emitted when the toast is dismissed.
         */
        "onTctClose"?: (event: Q2ToastCustomEvent<{ reason: 'close' | 'timeout' }>) => void;
        /**
          * Convenience prop for persistent toasts. When true, sets autoClose to false and closable to true. Aligns with acceptance criteria for showPersistent behavior.
          * @default false
         */
        "showPersistent"?: boolean;
        /**
          * Controls the visual size of the toast.
          * @default 'large'
         */
        "size"?: 'large' | 'small';
        /**
          * Optional title for the toast.
         */
        "tctTitle"?: string;
        /**
          * Optional time marker for the footer.
         */
        "time"?: string;
        /**
          * The visual status of the toast.
          * @default 'default'
         */
        "type"?: 'warning' | 'info' | 'alert' | 'success' | 'default' | 'error';
    }
    /**
     * @name Tooltip
     * @category Feedback
     * @summary Use for brief hints or explanations shown on hover or focus.
     */
    interface Q2Tooltip {
        /**
          * Displays the element as a block, making it take up the full width of its container.
         */
        "block"?: boolean;
        /**
          * Makes the component focusable, thereby putting it in the tab order of the keyboard.
          * @warning This is only meant to be used when the `q2-tooltip` is wrapped around an element that is not focusable (e.g., icons, static text, badges, etc.).
          * @default false
         */
        "focusable"?: boolean;
        /**
          * Whether to show the tooltip immediately upon hover.
         */
        "immediate"?: boolean;
        /**
          * text that is displayed when the tooltip is activated.
         */
        "label"?: string;
        /**
          * Enables the use of multi-line tooltips with a default `max-width` of `200px`.
         */
        "multiline"?: boolean;
        /**
          * Allows the tooltip bubble itself to be hovered. When enabled, the tooltip remains visible while moving between the trigger and the tooltip bubble.
         */
        "persistOnHover"?: boolean;
        /**
          * Displays the tooltip persistently.
         */
        "persistent"?: boolean;
        /**
          * The position of the tooltip based on [cardinal and intercardinal directions](https://en.wikipedia.org/wiki/Cardinal_direction).
          * @default 'n'
         */
        "position"?: 'n' | 's' | 'e' | 'w' | 'nw' | 'ne' | 'sw' | 'se';
    }
    interface TectonTabPane {
        "authPayload"?: { key: string; value: string }[];
        "badgeCount"?: number;
        "badgeDescription"?: string;
        "badgeStatus"?: Q2Badge['status'];
        "badgeTheme"?: Q2Badge['theme'];
        "guid"?: number;
        "index"?: number;
        "label"?: string;
        "minHeight"?: string;
        "moduleId"?: string;
        "name"?: string;
        /**
          * Emitted when the badge count, description, theme, or status changes.
          * @private
         */
        "onBadge"?: (event: TectonTabPaneCustomEvent<boolean>) => void;
        /**
          * above props duplicated from q2-tab-pane. Unable to extend due to Stencil decorator limitation
         */
        "provided"?: boolean;
        "selected"?: boolean;
        "showForm"?: boolean;
        "url"?: string;
        "value"?: string;
    }

    interface Q2ActionGroupAttributes {
        "fullWidth": boolean;
        "orientation": 'auto' | 'vertical' | 'horizontal';
        "orientationThreshold": number;
    }
    interface Q2ActionSheetAttributes {
        "hideClose": boolean;
        "title": string;
    }
    interface Q2AvatarAttributes {
        "icon": string;
        "initials": string;
        "name": string;
        "size": 'small' | 'medium' | 'large';
        "src": string;
    }
    interface Q2BadgeAttributes {
        "maxLength": number | undefined;
        "size": 'default' | 'large' | undefined;
        "status": 'info' | 'alert' | 'warning' | 'success' | undefined;
        "theme": 'primary' | 'secondary' | 'tertiary' | undefined;
        "value": string;
    }
    interface Q2BtnAttributes {
        "_role": string;
        "_tooltip": string;
        "active": boolean;
        "ariaControls": string;
        "ariaExpanded": string;
        "ariaHasPopup": string;
        "ariaLabel": string;
        "ariaPressed": string;
        "ariaSelected": string;
        "badge": boolean;
        "block": boolean;
        "color": string;
        "description": string;
        "disabled": boolean;
        "fab": boolean;
        "form": string;
        "hideLabel": boolean;
        "intent": | 'coin'
        | 'neutral-text'
        | 'neutral'
        | 'workflow-destroy'
        | 'workflow-escape'
        | 'workflow-primary'
        | 'workflow-secondary';
        "label": string;
        "loading": boolean;
        "size": 'small' | 'medium' | 'large';
        "tabIndex": number;
        "type": string;
    }
    interface Q2CalendarAttributes {
        "ariaLabel": string;
        "assume": 'current' | 'future' | 'past';
        "buttonLabel": string;
        "calendarLabel": string;
        "clearable": boolean;
        "cutoffTime": string;
        "daysOfWeekChecksum": number;
        "disabled": boolean;
        "disabledMsg": string;
        "disclaimer": string;
        "displayFormat": string;
        "endDate": string;
        "hideLabel": boolean;
        "invalid": boolean;
        "label": string;
        "open": boolean;
        "optional": boolean;
        "placeholder": string;
        "popDirection": 'up' | 'down';
        "popoverAlignment": 'left' | 'right';
        "popoverDirection": 'up' | 'down';
        "popoverMinHeight": number;
        "popoverMode": 'legacy';
        "readonly": boolean;
        "startDate": string;
        "typeable": boolean;
        "valid": boolean;
        "value": string | { toDate(): Date };
    }
    interface Q2CardAttributes {
        "avatarIcon": string;
        "avatarInitials": string;
        "avatarName": string;
        "avatarSrc": string;
        "bar": string;
        "description": string;
        "elevation": 0 | 1 | 2 | 3 | 4 | 5;
        "isSmall": boolean;
        "isStatic": boolean;
        "target": '_self' | '_blank' | '_parent' | '_top';
        "title": string;
        "type": 'clickable' | 'non-clickable';
        "url": string;
    }
    interface Q2CardImageAttributes {
        "background": 'primary' | 'secondary' | 'tertiary' | 'gradient' | string;
        "cardHolder": string;
        "cardHolderLabel": boolean;
        "cardNumber": string;
        "cardStatus": | 'digital'
        | 'enabled'
        | 'new'
        | 'disabled'
        | 'locked'
        | 'damaged'
        | 'lost'
        | 'stolen'
        | 'lost or stolen';
        "cardType": 'atm' | 'debit';
        "cardTypeColor": 'black' | 'white';
        "chip": 'gold' | 'silver';
        "clickable": boolean;
        "disabled": boolean;
        "expirationDate": string;
        "expirationDateLabel": boolean;
        "fiLogo": string;
        "inline": boolean;
        "orientation": 'horizontal' | 'vertical';
        "overlay": 'dot' | string;
        "statusTextOverride": string;
        "tctAriaLabel": string;
        "vendor": 'mastercard' | 'visa';
        "vendorColor": 'black' | 'brand' | 'white';
        "vendorLogo": string;
    }
    interface Q2CarouselAttributes {
        "ariaLabel": string;
        "arrowPosition": 'bottom' | 'hug' | 'float' | undefined;
        "autoHeight": boolean;
        "autoPlay": boolean;
        "autoWidth": boolean;
        "compactBreakpoint": number;
        "edgeFade": boolean;
        "framelessPanes": boolean;
        "fullWidthPanes": boolean;
        "hidePagination": boolean;
        "index": number;
        "label": string;
        "loop": boolean;
        "showNavigationArrows": boolean;
    }
    interface Q2CarouselPaneAttributes {
        "index": number;
        "isActivePane": boolean;
        "label": string;
        "siblingCount": number;
        "slotFrameless": boolean;
    }
    interface Q2ChartAreaAttributes {
        "alignChartName": 'left' | 'right' | 'center';
        "areaColor": string;
        "chartName": string;
        "chartSubTitle": string;
        "dataNamesOverflow": 'break' | 'truncate';
        "dataNamesWidth": number;
        "format": 'currency' | 'default';
        "formatModifier": string;
        "gridLines": 'horizontal' | 'vertical' | 'off';
        "hideNameAxisLabels": boolean;
        "hideValueAxisLabels": boolean;
        "lineColor": string;
        "offsetDataNames": boolean;
        "offsetDataValues": boolean;
        "pointerLineColor": string;
        "pointerLineStyle": 'solid' | 'dashed';
        "showChartName": boolean;
        "showDatapointLabels": boolean;
        "showGradient": boolean;
        "xMax": number;
        "xMin": number;
        "yMax": number;
        "yMin": number;
    }
    interface Q2ChartBarAttributes {
        "alignChartName": 'left' | 'right' | 'center';
        "chartName": string;
        "chartSubTitle": string;
        "color": string;
        "dataNamesOverflow": 'break' | 'truncate';
        "dataNamesWidth": number;
        "format": 'currency' | 'default';
        "formatModifier": string;
        "hideBarLabels": boolean;
        "hideValueAxisLabels": boolean;
        "offsetDataNames": boolean;
        "offsetDataValues": boolean;
        "orientation": 'vertical' | 'horizontal';
        "showChartName": boolean;
        "sort": boolean;
    }
    interface Q2ChartDonutAttributes {
        "chartName": string;
        "currencyRound": boolean;
        "format": 'currency' | 'default';
        "hoverScaleSize": number;
        "innerRadius": string;
        "isClickable": boolean;
        "minSliceSize": string;
        "outerRadius": string;
        "selectedId": string;
        "selectedOffset": number;
        "showLegend": boolean;
        "summaryIcon": string;
        "summaryName": string;
    }
    interface Q2CheckboxAttributes {
        "_tooltip": string;
        "align": string;
        "alignment": string;
        "ariaLabel": string;
        "checked": boolean;
        "description": string;
        "disabled": boolean;
        "groupDisabled": boolean;
        "hasError": boolean;
        "hideLabel": boolean;
        "indeterminate": boolean;
        "label": string;
        "name": string;
        "readonly": boolean;
        "slotReadonly": boolean;
        "type": 'favorite' | 'toggle';
        "value": string;
    }
    interface Q2CheckboxGroupAttributes {
        "disabled": boolean;
        "hasError": boolean;
        "hideLabel": boolean;
        "label": string;
        "optional": boolean;
        "readonly": boolean;
    }
    interface Q2ContextAttributes {
        "separator": boolean;
    }
    interface Q2CurrencyAttributes {
        "amount": number;
        "currency": string;
        "locale": string | string[];
        "signDisplay": 'accounting' | 'always' | 'auto' | 'exceptZero' | 'never';
        "size": 'small' | 'medium' | 'large';
        "slotSize": string;
        "variant": 'debit' | 'credit' | 'masked';
    }
    interface Q2DataTableAttributes {
        "bordered": string;
        "caption": string;
        "clickable": boolean;
        "density": 'compact' | 'normal' | 'comfortable';
        "emptyIcon": string;
        "emptyMessage": string;
        "hideCaption": boolean;
        "hideClickable": boolean;
        "loading": boolean;
        "selectable": boolean;
        "selectAlign": 'left' | 'right';
        "selectMode": 'multiple' | 'single';
        "shadowed": boolean;
        "sticky": boolean;
        "striped": boolean;
    }
    interface Q2DetailAttributes {
        "align": 'left' | 'right' | 'center';
        "alignment": 'left' | 'right' | 'center';
        "description": string;
        "label": string;
        "size": null | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
        "stacked": boolean;
    }
    interface Q2DropdownAttributes {
        "additionalContext": string;
        "alignment": 'left' | 'right';
        "ariaLabel": string;
        "block": boolean;
        "context": string;
        "contextValue": string;
        "disabled": boolean;
        "fullWidth": boolean;
        "hideLabel": boolean;
        "hoist": boolean;
        "icon": string;
        "label": string;
        "name": string;
        "open": boolean;
        "optionListLabel": string;
        "popDirection": 'up' | 'down';
        "popoverAlignment": 'left' | 'right';
        "popoverDirection": 'up' | 'down';
        "popoverMaxHeight": number;
        "popoverMinHeight": number;
        "popoverMode": 'legacy';
        "resolvedType": string;
        "type": 'icon' | 'fab' | 'custom' | 'primary' | 'secondary' | 'neutral';
    }
    interface Q2DropdownItemAttributes {
        "active": boolean;
        "ariaLabel": string;
        "disabled": boolean;
        "label": string;
        "removable": boolean;
        "separator": boolean;
        "value": string;
    }
    interface Q2EditableFieldAttributes {
        "ariaLabel": string;
        "block": boolean;
        "disabled": boolean;
        "editing": boolean;
        "formatModifier": string;
        "hideLabel": boolean;
        "label": string;
        "maxlength": number;
        "persistentLabel": boolean;
        "truncated": boolean;
        "type": Q2Input['type'];
        "value": string;
    }
    interface Q2ExampleAttributes {
        "content": string;
        "disabled": boolean;
        "type": string;
    }
    interface Q2FilePickerAttributes {
        "buttonSize": 'none' | 'small' | 'medium' | 'large';
        "description": string;
        "disabled": boolean;
        "ellipsizeFileName": boolean;
        "fileTypes": string[] | string;
        "label": string;
        "maxFiles": number;
        "maxFileSize": number;
        "showGradient": boolean;
        "variant": 'browse' | 'browse-drop';
    }
    interface Q2FormAttributes {
        "spacing": 'none' | 'compact' | 'normal' | 'comfortable';
    }
    interface Q2FormattedTextAttributes {
        "format": 'decimal' | 'percent';
        "locale": string | string[];
        "maximumFractionDigits": number;
        "minimumFractionDigits": number;
        "minimumIntegerDigits": number;
        "signDisplay": 'never' | 'auto' | 'always' | 'exceptZero';
        "size": 'small' | 'medium' | 'large' | undefined;
        "slotSize": string;
        "value": number;
    }
    interface Q2GridAttributes {
        "align": TQ2GridAlignOptions;
        "columns": TQ2GridColumnsOptions;
        "gap": TQ2GridGapOptions;
        "justify": TQ2GridJustifyOptions;
        "lgAlign": TQ2GridAlignOptions;
        "lgColumns": TQ2GridColumnsOptions;
        "lgGap": TQ2GridGapOptions;
        "lgJustify": TQ2GridJustifyOptions;
        "lgRows": string;
        "mdAlign": TQ2GridAlignOptions;
        "mdColumns": TQ2GridColumnsOptions;
        "mdGap": TQ2GridGapOptions;
        "mdJustify": TQ2GridJustifyOptions;
        "mdRows": string;
        "rows": string;
        "smAlign": TQ2GridAlignOptions;
        "smColumns": TQ2GridColumnsOptions;
        "smGap": TQ2GridGapOptions;
        "smJustify": TQ2GridJustifyOptions;
        "smRows": string;
        "xlAlign": TQ2GridAlignOptions;
        "xlColumns": TQ2GridColumnsOptions;
        "xlGap": TQ2GridGapOptions;
        "xlJustify": TQ2GridJustifyOptions;
        "xlRows": string;
        "xsAlign": TQ2GridAlignOptions;
        "xsColumns": TQ2GridColumnsOptions;
        "xsGap": TQ2GridGapOptions;
        "xsJustify": TQ2GridJustifyOptions;
        "xsRows": string;
    }
    interface Q2GridAreaAttributes {
        "align": TQ2GridAreaAlignOptions;
        "columnSpan": TQ2GridAreaColumnSpanOptions;
        "columnStart": string;
        "justify": TQ2GridAreaJustifyOptions;
        "lgAlign": TQ2GridAreaAlignOptions;
        "lgColumnSpan": TQ2GridAreaColumnSpanOptions;
        "lgColumnStart": string;
        "lgJustify": TQ2GridAreaJustifyOptions;
        "lgRowSpan": TQ2GridAreaRowSpanOptions;
        "lgRowStart": string;
        "lgZIndex": string;
        "mdAlign": TQ2GridAreaAlignOptions;
        "mdColumnSpan": TQ2GridAreaColumnSpanOptions;
        "mdColumnStart": string;
        "mdJustify": TQ2GridAreaJustifyOptions;
        "mdRowSpan": TQ2GridAreaRowSpanOptions;
        "mdRowStart": string;
        "mdZIndex": string;
        "rowSpan": TQ2GridAreaRowSpanOptions;
        "rowStart": string;
        "smAlign": TQ2GridAreaAlignOptions;
        "smColumnSpan": TQ2GridAreaColumnSpanOptions;
        "smColumnStart": string;
        "smJustify": TQ2GridAreaJustifyOptions;
        "smRowSpan": TQ2GridAreaRowSpanOptions;
        "smRowStart": string;
        "smZIndex": string;
        "xlAlign": TQ2GridAreaAlignOptions;
        "xlColumnSpan": TQ2GridAreaColumnSpanOptions;
        "xlColumnStart": string;
        "xlJustify": TQ2GridAreaJustifyOptions;
        "xlRowSpan": TQ2GridAreaRowSpanOptions;
        "xlRowStart": string;
        "xlZIndex": string;
        "xsAlign": TQ2GridAreaAlignOptions;
        "xsColumnSpan": TQ2GridAreaColumnSpanOptions;
        "xsColumnStart": string;
        "xsJustify": TQ2GridAreaJustifyOptions;
        "xsRowSpan": TQ2GridAreaRowSpanOptions;
        "xsRowStart": string;
        "xsZIndex": string;
        "zIndex": string;
    }
    interface Q2IconAttributes {
        "inline": boolean;
        "label": string;
        "type": string;
    }
    interface Q2InputAttributes {
        "_ariaDescription": string;
        "_preventEntry": boolean;
        "_role": 'combobox' | undefined;
        "_updateValueOnInput": boolean;
        "ariaActivedescendant": string;
        "ariaControls": string;
        "ariaExpanded": string;
        "ariaHaspopup": string;
        "ariaLabel": string;
        "ariaOwns": string;
        "autocapitalize": string;
        "autocomplete": string;
        "autocorrect": 'on' | 'off';
        "autofocus": boolean;
        "badgeTheme": Q2Badge['theme'];
        "badgeValue": string;
        "clearable": boolean;
        "current": 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false';
        "disabled": boolean;
        "formatModifier": string;
        "hideLabel": boolean;
        "hideMessages": boolean;
        "iconLeft": Q2Icon['type'];
        "iconRight": Q2Icon['type'];
        "label": string;
        "max": number;
        "maxlength": number;
        "min": number;
        "optional": boolean;
        "pattern": string;
        "placeholder": string;
        "pseudo": boolean;
        "readonly": boolean;
        "role": string;
        "showCount": boolean;
        "showVisibilityToggle": boolean;
        "step": number;
        "textHidden": boolean;
        "type": InputType;
        "valid": boolean;
        "value": string;
        "visibleLastCount": number;
    }
    interface Q2ItemAttributes {
        "clickable": boolean;
        "verticalAlign": 'top' | 'center' | 'bottom';
    }
    interface Q2LegendAttributes {
        "currencyRound": boolean;
        "format": 'default' | 'currency';
        "hoveredItemId": string;
        "selectedItemId": string;
    }
    interface Q2LinkAttributes {
        "_tooltip": string;
        "disabled": boolean;
        "ellipsis": boolean;
        "fullWidth": boolean;
        "href": string;
        "iconType": string;
        "label": string;
        "referrerpolicy": ReferrerPolicy;
        "target": string;
        "tctTitle": string;
        "variant": string;
    }
    interface Q2ListAttributes {
        "bordered": boolean;
        "label": string;
    }
    interface Q2LoadingAttributes {
        "ariaLabel": string;
        "counts": string;
        "hideFromScreenReaders": boolean;
        "inline": boolean;
        "label": string;
        "modifiers": string;
        "shape": string;
        "type": 'brand' | 'spinner' | 'skeleton';
    }
    interface Q2LoadingElementAttributes {
        "borderRadius": string;
        "height": string;
        "shape": string;
        "width": string;
    }
    interface Q2LocAttributes {
        "ignoreTag": boolean;
        "value": string;
    }
    interface Q2MessageAttributes {
        "appearance": 'minimal' | 'standard';
        "description": boolean;
        "type": 'info' | 'error' | 'danger' | 'warning' | 'success';
    }
    interface Q2MeterAttributes {
        "animated": boolean;
        "completedLabel": string;
        "completedValue": string;
        "description": string;
        "dotted": boolean;
        "hideTooltip": boolean;
        "label": string;
        "maxLabel": string;
        "maxValue": string;
        "segments": number;
        "suggestedLabel": string;
        "suggestedValue": string;
        "tooltipCompleted": string;
        "tooltipSuggested": string;
    }
    interface Q2ModalAttributes {
        "closable": boolean;
        "customMarkup": string;
        "description": string;
        "fullWidthButton": boolean;
        "icon": string;
        "imageSrc": string;
        "title": string;
    }
    interface Q2MonthPickerAttributes {
        "today": string;
        "year": number;
    }
    interface Q2MutationObserverAttributes {
        "disabled": boolean;
        "observeAttributes": boolean;
        "observeChildList": boolean;
        "observeSubTree": boolean;
    }
    interface Q2OptgroupAttributes {
        "disabled": boolean;
        "label": string;
    }
    interface Q2OptionAttributes {
        "_hideSelectedBlock": boolean;
        "_multiSelectHidden": boolean;
        "active": boolean;
        "disabled": boolean;
        "disabledGroup": boolean;
        "display": string;
        "multiline": boolean;
        "role": string;
        "selected": boolean;
        "separator": boolean;
        "value": string;
    }
    interface Q2OptionListAttributes {
        "align": 'left' | 'right';
        "customSearch": boolean;
        "disabled": boolean;
        "label": string;
        "multiple": boolean;
        "noSelect": boolean;
        "showSelected": boolean;
        "type": 'menu' | 'listbox';
    }
    interface Q2OtpAttributes {
        "autoFocus": boolean;
        "autoSubmit": boolean;
        "clearOnError": boolean;
        "disabled": boolean;
        "errorMessage": string;
        "helperText": string;
        "label": string;
        "length": string;
        "masked": boolean;
        "processingLabel": string;
        "sendCodeLabel": string;
        "showHelperText": boolean;
        "showSendCode": boolean;
        "state": 'error' | 'ready' | 'success' | 'verifying' | undefined;
        "submitLabel": string;
        "successMessage": string;
        "value": string;
    }
    interface Q2PaginationAttributes {
        "align": 'left' | 'center' | 'right';
        "alignment": 'left' | 'center' | 'right';
        "autoSize": boolean;
        "disabled": boolean;
        "page": number;
        "pages": number;
        "pagesOnly": boolean;
        "perPage": number;
        "perPageIncrements": number[] | string[] | string | undefined;
        "recordsOnly": boolean;
        "recordType": string;
        "stacked": boolean;
        "total": number;
    }
    interface Q2PillAttributes {
        "active": boolean;
        "borderless": boolean;
        "disabled": boolean;
        "hoist": boolean;
        "label": string;
        "maxLength": number;
        "multiple": boolean;
        "open": boolean;
        "optionListLabel": string;
        "popoverAlignment": 'left' | 'right';
        "popoverDirection": 'up' | 'down';
        "popoverMaxHeight": number;
        "popoverMinHeight": number;
        "theme": 'primary' | 'secondary' | 'tertiary';
        "value": string;
    }
    interface Q2PopoverAttributes {
        "align": 'left' | 'right';
        "block": boolean;
        "direction": 'up' | 'down';
        "maxHeight": number;
        "minHeight": number;
        "mode": 'legacy';
        "open": boolean;
    }
    interface Q2RadioAttributes {
        "ariaLabel": string;
        "checked": boolean;
        "disabled": boolean;
        "groupDisabled": boolean;
        "groupReadonly": boolean;
        "groupTileLayout": boolean;
        "hideLabel": boolean;
        "label": string;
        "name": string;
        "readonly": boolean;
        "tabIndex": number;
        "value": string;
    }
    interface Q2RadioGroupAttributes {
        "disabled": boolean;
        "hasError": boolean;
        "hideLabel": boolean;
        "label": string;
        "name": string;
        "optional": boolean;
        "orientation": 'vertical' | 'horizontal';
        "orientationThreshold": number;
        "readonly": boolean;
        "tileAlignment": 'left' | 'center' | 'right';
        "tilelayout": boolean;
        "tileLayout": boolean;
        "value": string;
    }
    interface Q2RelativeTimeAttributes {
        "baseDate": Date | string;
        "date": Date | string;
        "locale": string;
        "messageFormat": 'long' | 'short' | 'narrow';
        "numeric": 'always' | 'auto';
        "sync": boolean;
        "unit": 'second' | 'minute' | 'hour' | 'day' | 'month' | 'quarter' | 'year';
    }
    interface Q2ResizeObserverAttributes {
        "disabled": boolean;
    }
    interface Q2SearchAttributes {
        "clearable": boolean;
        "disabled": boolean;
        "filter": boolean;
        "hideLabel": boolean;
        "invalid": boolean;
        "label": string;
        "listLabel": string;
        "loading": boolean;
        "minRows": number;
        "multilineOptions": boolean;
        "multiple": boolean;
        "noResultsMessage": string;
        "optional": boolean;
        "placeholder": string;
        "popoverAlignment": 'left' | 'right';
        "popoverMaxHeight": number;
        "readonly": boolean;
        "showSelectedToggle": boolean;
        "value": string;
    }
    interface Q2SectionAttributes {
        "collapsible": boolean;
        "expanded": boolean;
        "label": string;
        "noCollapseIcon": boolean;
    }
    interface Q2SectionContainerAttributes {
        "openMode": 'multiple' | 'single';
        "openPaneIndex": number;
        "startAllOpen": boolean;
        "startOpen": boolean;
    }
    interface Q2SelectAttributes {
        "ariaLabel": string;
        "clearable": boolean;
        "disabled": boolean;
        "hideLabel": boolean;
        "hoist": boolean;
        "invalid": boolean;
        "label": string;
        "listLabel": string;
        "minRows": number;
        "multilineOptions": boolean;
        "multiple": boolean;
        "optional": boolean;
        "placeholder": string;
        "popDirection": 'up' | 'down';
        "popoverMaxHeight": number;
        "popoverMode": 'legacy';
        "readonly": boolean;
        "searchable": boolean;
        "valid": boolean;
        "value": string;
    }
    interface Q2StepperAttributes {
        "currentStep": number;
        "lastEnabledStep": number;
        "stepCount": number;
    }
    interface Q2StepperPaneAttributes {
        "description": string;
        "disabled": boolean;
        "isActive": boolean;
        "label": string;
        "showWithChildren": boolean;
        "status": 'complete' | 'error' | 'locked';
    }
    interface Q2StepperVerticalAttributes {
        "currentStepId": string;
    }
    interface Q2SurfaceAttributes {
        "background": 'default' | 'primary' | 'secondary' | 'tertiary' | 'gray';
        "backgroundGradient": boolean;
        "border": 'default' | 'primary' | 'secondary' | 'tertiary' | 'gray';
        "borderGradient": boolean;
        "clickable": boolean;
        "elevation": 0 | 1 | 2 | 3 | 4 | 5;
        "inset": 'none' | 'compact' | 'normal' | 'comfortable';
        "insetX": 'none' | 'compact' | 'normal' | 'comfortable';
        "insetY": 'none' | 'compact' | 'normal' | 'comfortable';
        "radius": 0 | 1 | 2 | 3 | 4 | 5;
    }
    interface Q2TabContainerAttributes {
        "color": 'alt' | undefined;
        "name": string;
        "noPrint": boolean;
        "orientation": 'horizontal' | 'vertical';
        "type": 'main' | 'section';
        "value": string;
    }
    interface Q2TabPaneAttributes {
        "badgeCount": number;
        "badgeDescription": string;
        "badgeStatus": Q2Badge['status'];
        "badgeTheme": Q2Badge['theme'];
        "guid": number;
        "index": number;
        "label": string;
        "name": string;
        "selected": boolean;
        "value": string;
    }
    interface Q2TagAttributes {
        "hoist": boolean;
        "label": string;
        "open": boolean;
        "optionListLabel": string;
        "popoverAlignment": 'left' | 'right';
        "popoverDirection": 'up' | 'down';
        "popoverMaxHeight": number;
        "popoverMinHeight": number;
        "theme": 'primary' | 'secondary' | 'tertiary';
    }
    interface Q2TextareaAttributes {
        "cols": number;
        "disabled": boolean;
        "hideLabel": boolean;
        "hideMessages": boolean;
        "label": string;
        "maxlength": number;
        "optional": boolean;
        "placeholder": string;
        "readonly": boolean;
        "resize": 'none' | 'vertical' | 'horizontal' | 'both' | 'vertical-auto';
        "rows": number;
        "spellcheck": boolean;
        "value": string;
    }
    interface Q2ToastAttributes {
        "autoClose": boolean;
        "closable": boolean;
        "duration": number;
        "hideIcon": boolean;
        "icon": string;
        "message": string;
        "showPersistent": boolean;
        "size": 'large' | 'small';
        "tctTitle": string;
        "time": string;
        "type": 'warning' | 'info' | 'alert' | 'success' | 'default' | 'error';
    }
    interface Q2TooltipAttributes {
        "block": boolean;
        "focusable": boolean;
        "immediate": boolean;
        "label": string;
        "multiline": boolean;
        "persistent": boolean;
        "persistOnHover": boolean;
        "position": 'n' | 's' | 'e' | 'w' | 'nw' | 'ne' | 'sw' | 'se';
    }
    interface TectonTabPaneAttributes {
        "badgeCount": number;
        "badgeDescription": string;
        "badgeStatus": Q2Badge['status'];
        "badgeTheme": Q2Badge['theme'];
        "guid": number;
        "index": number;
        "label": string;
        "minHeight": string;
        "moduleId": string;
        "name": string;
        "provided": boolean;
        "selected": boolean;
        "showForm": boolean;
        "url": string;
        "value": string;
    }

    interface IntrinsicElements {
        "click-elsewhere": ClickElsewhere;
        "q2-action-group": Omit<Q2ActionGroup, keyof Q2ActionGroupAttributes> & { [K in keyof Q2ActionGroup & keyof Q2ActionGroupAttributes]?: Q2ActionGroup[K] } & { [K in keyof Q2ActionGroup & keyof Q2ActionGroupAttributes as `attr:${K}`]?: Q2ActionGroupAttributes[K] } & { [K in keyof Q2ActionGroup & keyof Q2ActionGroupAttributes as `prop:${K}`]?: Q2ActionGroup[K] };
        "q2-action-sheet": Omit<Q2ActionSheet, keyof Q2ActionSheetAttributes> & { [K in keyof Q2ActionSheet & keyof Q2ActionSheetAttributes]?: Q2ActionSheet[K] } & { [K in keyof Q2ActionSheet & keyof Q2ActionSheetAttributes as `attr:${K}`]?: Q2ActionSheetAttributes[K] } & { [K in keyof Q2ActionSheet & keyof Q2ActionSheetAttributes as `prop:${K}`]?: Q2ActionSheet[K] };
        "q2-avatar": Omit<Q2Avatar, keyof Q2AvatarAttributes> & { [K in keyof Q2Avatar & keyof Q2AvatarAttributes]?: Q2Avatar[K] } & { [K in keyof Q2Avatar & keyof Q2AvatarAttributes as `attr:${K}`]?: Q2AvatarAttributes[K] } & { [K in keyof Q2Avatar & keyof Q2AvatarAttributes as `prop:${K}`]?: Q2Avatar[K] };
        "q2-badge": Omit<Q2Badge, keyof Q2BadgeAttributes> & { [K in keyof Q2Badge & keyof Q2BadgeAttributes]?: Q2Badge[K] } & { [K in keyof Q2Badge & keyof Q2BadgeAttributes as `attr:${K}`]?: Q2BadgeAttributes[K] } & { [K in keyof Q2Badge & keyof Q2BadgeAttributes as `prop:${K}`]?: Q2Badge[K] };
        "q2-btn": Omit<Q2Btn, keyof Q2BtnAttributes> & { [K in keyof Q2Btn & keyof Q2BtnAttributes]?: Q2Btn[K] } & { [K in keyof Q2Btn & keyof Q2BtnAttributes as `attr:${K}`]?: Q2BtnAttributes[K] } & { [K in keyof Q2Btn & keyof Q2BtnAttributes as `prop:${K}`]?: Q2Btn[K] };
        "q2-calendar": Omit<Q2Calendar, keyof Q2CalendarAttributes> & { [K in keyof Q2Calendar & keyof Q2CalendarAttributes]?: Q2Calendar[K] } & { [K in keyof Q2Calendar & keyof Q2CalendarAttributes as `attr:${K}`]?: Q2CalendarAttributes[K] } & { [K in keyof Q2Calendar & keyof Q2CalendarAttributes as `prop:${K}`]?: Q2Calendar[K] };
        "q2-card": Omit<Q2Card, keyof Q2CardAttributes> & { [K in keyof Q2Card & keyof Q2CardAttributes]?: Q2Card[K] } & { [K in keyof Q2Card & keyof Q2CardAttributes as `attr:${K}`]?: Q2CardAttributes[K] } & { [K in keyof Q2Card & keyof Q2CardAttributes as `prop:${K}`]?: Q2Card[K] };
        "q2-card-image": Omit<Q2CardImage, keyof Q2CardImageAttributes> & { [K in keyof Q2CardImage & keyof Q2CardImageAttributes]?: Q2CardImage[K] } & { [K in keyof Q2CardImage & keyof Q2CardImageAttributes as `attr:${K}`]?: Q2CardImageAttributes[K] } & { [K in keyof Q2CardImage & keyof Q2CardImageAttributes as `prop:${K}`]?: Q2CardImage[K] };
        "q2-carousel": Omit<Q2Carousel, keyof Q2CarouselAttributes> & { [K in keyof Q2Carousel & keyof Q2CarouselAttributes]?: Q2Carousel[K] } & { [K in keyof Q2Carousel & keyof Q2CarouselAttributes as `attr:${K}`]?: Q2CarouselAttributes[K] } & { [K in keyof Q2Carousel & keyof Q2CarouselAttributes as `prop:${K}`]?: Q2Carousel[K] };
        "q2-carousel-pane": Omit<Q2CarouselPane, keyof Q2CarouselPaneAttributes> & { [K in keyof Q2CarouselPane & keyof Q2CarouselPaneAttributes]?: Q2CarouselPane[K] } & { [K in keyof Q2CarouselPane & keyof Q2CarouselPaneAttributes as `attr:${K}`]?: Q2CarouselPaneAttributes[K] } & { [K in keyof Q2CarouselPane & keyof Q2CarouselPaneAttributes as `prop:${K}`]?: Q2CarouselPane[K] };
        "q2-chart-area": Omit<Q2ChartArea, keyof Q2ChartAreaAttributes> & { [K in keyof Q2ChartArea & keyof Q2ChartAreaAttributes]?: Q2ChartArea[K] } & { [K in keyof Q2ChartArea & keyof Q2ChartAreaAttributes as `attr:${K}`]?: Q2ChartAreaAttributes[K] } & { [K in keyof Q2ChartArea & keyof Q2ChartAreaAttributes as `prop:${K}`]?: Q2ChartArea[K] };
        "q2-chart-bar": Omit<Q2ChartBar, keyof Q2ChartBarAttributes> & { [K in keyof Q2ChartBar & keyof Q2ChartBarAttributes]?: Q2ChartBar[K] } & { [K in keyof Q2ChartBar & keyof Q2ChartBarAttributes as `attr:${K}`]?: Q2ChartBarAttributes[K] } & { [K in keyof Q2ChartBar & keyof Q2ChartBarAttributes as `prop:${K}`]?: Q2ChartBar[K] };
        "q2-chart-donut": Omit<Q2ChartDonut, keyof Q2ChartDonutAttributes> & { [K in keyof Q2ChartDonut & keyof Q2ChartDonutAttributes]?: Q2ChartDonut[K] } & { [K in keyof Q2ChartDonut & keyof Q2ChartDonutAttributes as `attr:${K}`]?: Q2ChartDonutAttributes[K] } & { [K in keyof Q2ChartDonut & keyof Q2ChartDonutAttributes as `prop:${K}`]?: Q2ChartDonut[K] };
        "q2-checkbox": Omit<Q2Checkbox, keyof Q2CheckboxAttributes> & { [K in keyof Q2Checkbox & keyof Q2CheckboxAttributes]?: Q2Checkbox[K] } & { [K in keyof Q2Checkbox & keyof Q2CheckboxAttributes as `attr:${K}`]?: Q2CheckboxAttributes[K] } & { [K in keyof Q2Checkbox & keyof Q2CheckboxAttributes as `prop:${K}`]?: Q2Checkbox[K] };
        "q2-checkbox-group": Omit<Q2CheckboxGroup, keyof Q2CheckboxGroupAttributes> & { [K in keyof Q2CheckboxGroup & keyof Q2CheckboxGroupAttributes]?: Q2CheckboxGroup[K] } & { [K in keyof Q2CheckboxGroup & keyof Q2CheckboxGroupAttributes as `attr:${K}`]?: Q2CheckboxGroupAttributes[K] } & { [K in keyof Q2CheckboxGroup & keyof Q2CheckboxGroupAttributes as `prop:${K}`]?: Q2CheckboxGroup[K] };
        "q2-context": Omit<Q2Context, keyof Q2ContextAttributes> & { [K in keyof Q2Context & keyof Q2ContextAttributes]?: Q2Context[K] } & { [K in keyof Q2Context & keyof Q2ContextAttributes as `attr:${K}`]?: Q2ContextAttributes[K] } & { [K in keyof Q2Context & keyof Q2ContextAttributes as `prop:${K}`]?: Q2Context[K] };
        "q2-currency": Omit<Q2Currency, keyof Q2CurrencyAttributes> & { [K in keyof Q2Currency & keyof Q2CurrencyAttributes]?: Q2Currency[K] } & { [K in keyof Q2Currency & keyof Q2CurrencyAttributes as `attr:${K}`]?: Q2CurrencyAttributes[K] } & { [K in keyof Q2Currency & keyof Q2CurrencyAttributes as `prop:${K}`]?: Q2Currency[K] };
        "q2-data-table": Omit<Q2DataTable, keyof Q2DataTableAttributes> & { [K in keyof Q2DataTable & keyof Q2DataTableAttributes]?: Q2DataTable[K] } & { [K in keyof Q2DataTable & keyof Q2DataTableAttributes as `attr:${K}`]?: Q2DataTableAttributes[K] } & { [K in keyof Q2DataTable & keyof Q2DataTableAttributes as `prop:${K}`]?: Q2DataTable[K] };
        "q2-detail": Omit<Q2Detail, keyof Q2DetailAttributes> & { [K in keyof Q2Detail & keyof Q2DetailAttributes]?: Q2Detail[K] } & { [K in keyof Q2Detail & keyof Q2DetailAttributes as `attr:${K}`]?: Q2DetailAttributes[K] } & { [K in keyof Q2Detail & keyof Q2DetailAttributes as `prop:${K}`]?: Q2Detail[K] };
        "q2-dropdown": Omit<Q2Dropdown, keyof Q2DropdownAttributes> & { [K in keyof Q2Dropdown & keyof Q2DropdownAttributes]?: Q2Dropdown[K] } & { [K in keyof Q2Dropdown & keyof Q2DropdownAttributes as `attr:${K}`]?: Q2DropdownAttributes[K] } & { [K in keyof Q2Dropdown & keyof Q2DropdownAttributes as `prop:${K}`]?: Q2Dropdown[K] };
        "q2-dropdown-item": Omit<Q2DropdownItem, keyof Q2DropdownItemAttributes> & { [K in keyof Q2DropdownItem & keyof Q2DropdownItemAttributes]?: Q2DropdownItem[K] } & { [K in keyof Q2DropdownItem & keyof Q2DropdownItemAttributes as `attr:${K}`]?: Q2DropdownItemAttributes[K] } & { [K in keyof Q2DropdownItem & keyof Q2DropdownItemAttributes as `prop:${K}`]?: Q2DropdownItem[K] };
        "q2-editable-field": Omit<Q2EditableField, keyof Q2EditableFieldAttributes> & { [K in keyof Q2EditableField & keyof Q2EditableFieldAttributes]?: Q2EditableField[K] } & { [K in keyof Q2EditableField & keyof Q2EditableFieldAttributes as `attr:${K}`]?: Q2EditableFieldAttributes[K] } & { [K in keyof Q2EditableField & keyof Q2EditableFieldAttributes as `prop:${K}`]?: Q2EditableField[K] };
        "q2-example": Omit<Q2Example, keyof Q2ExampleAttributes> & { [K in keyof Q2Example & keyof Q2ExampleAttributes]?: Q2Example[K] } & { [K in keyof Q2Example & keyof Q2ExampleAttributes as `attr:${K}`]?: Q2ExampleAttributes[K] } & { [K in keyof Q2Example & keyof Q2ExampleAttributes as `prop:${K}`]?: Q2Example[K] };
        "q2-file-picker": Omit<Q2FilePicker, keyof Q2FilePickerAttributes> & { [K in keyof Q2FilePicker & keyof Q2FilePickerAttributes]?: Q2FilePicker[K] } & { [K in keyof Q2FilePicker & keyof Q2FilePickerAttributes as `attr:${K}`]?: Q2FilePickerAttributes[K] } & { [K in keyof Q2FilePicker & keyof Q2FilePickerAttributes as `prop:${K}`]?: Q2FilePicker[K] };
        "q2-form": Omit<Q2Form, keyof Q2FormAttributes> & { [K in keyof Q2Form & keyof Q2FormAttributes]?: Q2Form[K] } & { [K in keyof Q2Form & keyof Q2FormAttributes as `attr:${K}`]?: Q2FormAttributes[K] } & { [K in keyof Q2Form & keyof Q2FormAttributes as `prop:${K}`]?: Q2Form[K] };
        "q2-formatted-text": Omit<Q2FormattedText, keyof Q2FormattedTextAttributes> & { [K in keyof Q2FormattedText & keyof Q2FormattedTextAttributes]?: Q2FormattedText[K] } & { [K in keyof Q2FormattedText & keyof Q2FormattedTextAttributes as `attr:${K}`]?: Q2FormattedTextAttributes[K] } & { [K in keyof Q2FormattedText & keyof Q2FormattedTextAttributes as `prop:${K}`]?: Q2FormattedText[K] };
        "q2-grid": Omit<Q2Grid, keyof Q2GridAttributes> & { [K in keyof Q2Grid & keyof Q2GridAttributes]?: Q2Grid[K] } & { [K in keyof Q2Grid & keyof Q2GridAttributes as `attr:${K}`]?: Q2GridAttributes[K] } & { [K in keyof Q2Grid & keyof Q2GridAttributes as `prop:${K}`]?: Q2Grid[K] };
        "q2-grid-area": Omit<Q2GridArea, keyof Q2GridAreaAttributes> & { [K in keyof Q2GridArea & keyof Q2GridAreaAttributes]?: Q2GridArea[K] } & { [K in keyof Q2GridArea & keyof Q2GridAreaAttributes as `attr:${K}`]?: Q2GridAreaAttributes[K] } & { [K in keyof Q2GridArea & keyof Q2GridAreaAttributes as `prop:${K}`]?: Q2GridArea[K] };
        "q2-icon": Omit<Q2Icon, keyof Q2IconAttributes> & { [K in keyof Q2Icon & keyof Q2IconAttributes]?: Q2Icon[K] } & { [K in keyof Q2Icon & keyof Q2IconAttributes as `attr:${K}`]?: Q2IconAttributes[K] } & { [K in keyof Q2Icon & keyof Q2IconAttributes as `prop:${K}`]?: Q2Icon[K] };
        "q2-input": Omit<Q2Input, keyof Q2InputAttributes> & { [K in keyof Q2Input & keyof Q2InputAttributes]?: Q2Input[K] } & { [K in keyof Q2Input & keyof Q2InputAttributes as `attr:${K}`]?: Q2InputAttributes[K] } & { [K in keyof Q2Input & keyof Q2InputAttributes as `prop:${K}`]?: Q2Input[K] };
        "q2-item": Omit<Q2Item, keyof Q2ItemAttributes> & { [K in keyof Q2Item & keyof Q2ItemAttributes]?: Q2Item[K] } & { [K in keyof Q2Item & keyof Q2ItemAttributes as `attr:${K}`]?: Q2ItemAttributes[K] } & { [K in keyof Q2Item & keyof Q2ItemAttributes as `prop:${K}`]?: Q2Item[K] };
        "q2-legend": Omit<Q2Legend, keyof Q2LegendAttributes> & { [K in keyof Q2Legend & keyof Q2LegendAttributes]?: Q2Legend[K] } & { [K in keyof Q2Legend & keyof Q2LegendAttributes as `attr:${K}`]?: Q2LegendAttributes[K] } & { [K in keyof Q2Legend & keyof Q2LegendAttributes as `prop:${K}`]?: Q2Legend[K] };
        "q2-link": Omit<Q2Link, keyof Q2LinkAttributes> & { [K in keyof Q2Link & keyof Q2LinkAttributes]?: Q2Link[K] } & { [K in keyof Q2Link & keyof Q2LinkAttributes as `attr:${K}`]?: Q2LinkAttributes[K] } & { [K in keyof Q2Link & keyof Q2LinkAttributes as `prop:${K}`]?: Q2Link[K] };
        "q2-list": Omit<Q2List, keyof Q2ListAttributes> & { [K in keyof Q2List & keyof Q2ListAttributes]?: Q2List[K] } & { [K in keyof Q2List & keyof Q2ListAttributes as `attr:${K}`]?: Q2ListAttributes[K] } & { [K in keyof Q2List & keyof Q2ListAttributes as `prop:${K}`]?: Q2List[K] };
        "q2-loading": Omit<Q2Loading, keyof Q2LoadingAttributes> & { [K in keyof Q2Loading & keyof Q2LoadingAttributes]?: Q2Loading[K] } & { [K in keyof Q2Loading & keyof Q2LoadingAttributes as `attr:${K}`]?: Q2LoadingAttributes[K] } & { [K in keyof Q2Loading & keyof Q2LoadingAttributes as `prop:${K}`]?: Q2Loading[K] };
        "q2-loading-element": Omit<Q2LoadingElement, keyof Q2LoadingElementAttributes> & { [K in keyof Q2LoadingElement & keyof Q2LoadingElementAttributes]?: Q2LoadingElement[K] } & { [K in keyof Q2LoadingElement & keyof Q2LoadingElementAttributes as `attr:${K}`]?: Q2LoadingElementAttributes[K] } & { [K in keyof Q2LoadingElement & keyof Q2LoadingElementAttributes as `prop:${K}`]?: Q2LoadingElement[K] };
        "q2-loc": Omit<Q2Loc, keyof Q2LocAttributes> & { [K in keyof Q2Loc & keyof Q2LocAttributes]?: Q2Loc[K] } & { [K in keyof Q2Loc & keyof Q2LocAttributes as `attr:${K}`]?: Q2LocAttributes[K] } & { [K in keyof Q2Loc & keyof Q2LocAttributes as `prop:${K}`]?: Q2Loc[K] };
        "q2-message": Omit<Q2Message, keyof Q2MessageAttributes> & { [K in keyof Q2Message & keyof Q2MessageAttributes]?: Q2Message[K] } & { [K in keyof Q2Message & keyof Q2MessageAttributes as `attr:${K}`]?: Q2MessageAttributes[K] } & { [K in keyof Q2Message & keyof Q2MessageAttributes as `prop:${K}`]?: Q2Message[K] };
        "q2-meter": Omit<Q2Meter, keyof Q2MeterAttributes> & { [K in keyof Q2Meter & keyof Q2MeterAttributes]?: Q2Meter[K] } & { [K in keyof Q2Meter & keyof Q2MeterAttributes as `attr:${K}`]?: Q2MeterAttributes[K] } & { [K in keyof Q2Meter & keyof Q2MeterAttributes as `prop:${K}`]?: Q2Meter[K] };
        "q2-modal": Omit<Q2Modal, keyof Q2ModalAttributes> & { [K in keyof Q2Modal & keyof Q2ModalAttributes]?: Q2Modal[K] } & { [K in keyof Q2Modal & keyof Q2ModalAttributes as `attr:${K}`]?: Q2ModalAttributes[K] } & { [K in keyof Q2Modal & keyof Q2ModalAttributes as `prop:${K}`]?: Q2Modal[K] };
        "q2-month-picker": Omit<Q2MonthPicker, keyof Q2MonthPickerAttributes> & { [K in keyof Q2MonthPicker & keyof Q2MonthPickerAttributes]?: Q2MonthPicker[K] } & { [K in keyof Q2MonthPicker & keyof Q2MonthPickerAttributes as `attr:${K}`]?: Q2MonthPickerAttributes[K] } & { [K in keyof Q2MonthPicker & keyof Q2MonthPickerAttributes as `prop:${K}`]?: Q2MonthPicker[K] };
        "q2-mutation-observer": Omit<Q2MutationObserver, keyof Q2MutationObserverAttributes> & { [K in keyof Q2MutationObserver & keyof Q2MutationObserverAttributes]?: Q2MutationObserver[K] } & { [K in keyof Q2MutationObserver & keyof Q2MutationObserverAttributes as `attr:${K}`]?: Q2MutationObserverAttributes[K] } & { [K in keyof Q2MutationObserver & keyof Q2MutationObserverAttributes as `prop:${K}`]?: Q2MutationObserver[K] };
        "q2-optgroup": Omit<Q2Optgroup, keyof Q2OptgroupAttributes> & { [K in keyof Q2Optgroup & keyof Q2OptgroupAttributes]?: Q2Optgroup[K] } & { [K in keyof Q2Optgroup & keyof Q2OptgroupAttributes as `attr:${K}`]?: Q2OptgroupAttributes[K] } & { [K in keyof Q2Optgroup & keyof Q2OptgroupAttributes as `prop:${K}`]?: Q2Optgroup[K] };
        "q2-option": Omit<Q2Option, keyof Q2OptionAttributes> & { [K in keyof Q2Option & keyof Q2OptionAttributes]?: Q2Option[K] } & { [K in keyof Q2Option & keyof Q2OptionAttributes as `attr:${K}`]?: Q2OptionAttributes[K] } & { [K in keyof Q2Option & keyof Q2OptionAttributes as `prop:${K}`]?: Q2Option[K] };
        "q2-option-list": Omit<Q2OptionList, keyof Q2OptionListAttributes> & { [K in keyof Q2OptionList & keyof Q2OptionListAttributes]?: Q2OptionList[K] } & { [K in keyof Q2OptionList & keyof Q2OptionListAttributes as `attr:${K}`]?: Q2OptionListAttributes[K] } & { [K in keyof Q2OptionList & keyof Q2OptionListAttributes as `prop:${K}`]?: Q2OptionList[K] };
        "q2-otp": Omit<Q2Otp, keyof Q2OtpAttributes> & { [K in keyof Q2Otp & keyof Q2OtpAttributes]?: Q2Otp[K] } & { [K in keyof Q2Otp & keyof Q2OtpAttributes as `attr:${K}`]?: Q2OtpAttributes[K] } & { [K in keyof Q2Otp & keyof Q2OtpAttributes as `prop:${K}`]?: Q2Otp[K] };
        "q2-pagination": Omit<Q2Pagination, keyof Q2PaginationAttributes> & { [K in keyof Q2Pagination & keyof Q2PaginationAttributes]?: Q2Pagination[K] } & { [K in keyof Q2Pagination & keyof Q2PaginationAttributes as `attr:${K}`]?: Q2PaginationAttributes[K] } & { [K in keyof Q2Pagination & keyof Q2PaginationAttributes as `prop:${K}`]?: Q2Pagination[K] };
        "q2-pill": Omit<Q2Pill, keyof Q2PillAttributes> & { [K in keyof Q2Pill & keyof Q2PillAttributes]?: Q2Pill[K] } & { [K in keyof Q2Pill & keyof Q2PillAttributes as `attr:${K}`]?: Q2PillAttributes[K] } & { [K in keyof Q2Pill & keyof Q2PillAttributes as `prop:${K}`]?: Q2Pill[K] };
        "q2-popover": Omit<Q2Popover, keyof Q2PopoverAttributes> & { [K in keyof Q2Popover & keyof Q2PopoverAttributes]?: Q2Popover[K] } & { [K in keyof Q2Popover & keyof Q2PopoverAttributes as `attr:${K}`]?: Q2PopoverAttributes[K] } & { [K in keyof Q2Popover & keyof Q2PopoverAttributes as `prop:${K}`]?: Q2Popover[K] };
        "q2-radio": Omit<Q2Radio, keyof Q2RadioAttributes> & { [K in keyof Q2Radio & keyof Q2RadioAttributes]?: Q2Radio[K] } & { [K in keyof Q2Radio & keyof Q2RadioAttributes as `attr:${K}`]?: Q2RadioAttributes[K] } & { [K in keyof Q2Radio & keyof Q2RadioAttributes as `prop:${K}`]?: Q2Radio[K] };
        "q2-radio-group": Omit<Q2RadioGroup, keyof Q2RadioGroupAttributes> & { [K in keyof Q2RadioGroup & keyof Q2RadioGroupAttributes]?: Q2RadioGroup[K] } & { [K in keyof Q2RadioGroup & keyof Q2RadioGroupAttributes as `attr:${K}`]?: Q2RadioGroupAttributes[K] } & { [K in keyof Q2RadioGroup & keyof Q2RadioGroupAttributes as `prop:${K}`]?: Q2RadioGroup[K] };
        "q2-relative-time": Omit<Q2RelativeTime, keyof Q2RelativeTimeAttributes> & { [K in keyof Q2RelativeTime & keyof Q2RelativeTimeAttributes]?: Q2RelativeTime[K] } & { [K in keyof Q2RelativeTime & keyof Q2RelativeTimeAttributes as `attr:${K}`]?: Q2RelativeTimeAttributes[K] } & { [K in keyof Q2RelativeTime & keyof Q2RelativeTimeAttributes as `prop:${K}`]?: Q2RelativeTime[K] };
        "q2-resize-observer": Omit<Q2ResizeObserver, keyof Q2ResizeObserverAttributes> & { [K in keyof Q2ResizeObserver & keyof Q2ResizeObserverAttributes]?: Q2ResizeObserver[K] } & { [K in keyof Q2ResizeObserver & keyof Q2ResizeObserverAttributes as `attr:${K}`]?: Q2ResizeObserverAttributes[K] } & { [K in keyof Q2ResizeObserver & keyof Q2ResizeObserverAttributes as `prop:${K}`]?: Q2ResizeObserver[K] };
        "q2-search": Omit<Q2Search, keyof Q2SearchAttributes> & { [K in keyof Q2Search & keyof Q2SearchAttributes]?: Q2Search[K] } & { [K in keyof Q2Search & keyof Q2SearchAttributes as `attr:${K}`]?: Q2SearchAttributes[K] } & { [K in keyof Q2Search & keyof Q2SearchAttributes as `prop:${K}`]?: Q2Search[K] };
        "q2-section": Omit<Q2Section, keyof Q2SectionAttributes> & { [K in keyof Q2Section & keyof Q2SectionAttributes]?: Q2Section[K] } & { [K in keyof Q2Section & keyof Q2SectionAttributes as `attr:${K}`]?: Q2SectionAttributes[K] } & { [K in keyof Q2Section & keyof Q2SectionAttributes as `prop:${K}`]?: Q2Section[K] };
        "q2-section-container": Omit<Q2SectionContainer, keyof Q2SectionContainerAttributes> & { [K in keyof Q2SectionContainer & keyof Q2SectionContainerAttributes]?: Q2SectionContainer[K] } & { [K in keyof Q2SectionContainer & keyof Q2SectionContainerAttributes as `attr:${K}`]?: Q2SectionContainerAttributes[K] } & { [K in keyof Q2SectionContainer & keyof Q2SectionContainerAttributes as `prop:${K}`]?: Q2SectionContainer[K] };
        "q2-select": Omit<Q2Select, keyof Q2SelectAttributes> & { [K in keyof Q2Select & keyof Q2SelectAttributes]?: Q2Select[K] } & { [K in keyof Q2Select & keyof Q2SelectAttributes as `attr:${K}`]?: Q2SelectAttributes[K] } & { [K in keyof Q2Select & keyof Q2SelectAttributes as `prop:${K}`]?: Q2Select[K] };
        "q2-stepper": Omit<Q2Stepper, keyof Q2StepperAttributes> & { [K in keyof Q2Stepper & keyof Q2StepperAttributes]?: Q2Stepper[K] } & { [K in keyof Q2Stepper & keyof Q2StepperAttributes as `attr:${K}`]?: Q2StepperAttributes[K] } & { [K in keyof Q2Stepper & keyof Q2StepperAttributes as `prop:${K}`]?: Q2Stepper[K] };
        "q2-stepper-pane": Omit<Q2StepperPane, keyof Q2StepperPaneAttributes> & { [K in keyof Q2StepperPane & keyof Q2StepperPaneAttributes]?: Q2StepperPane[K] } & { [K in keyof Q2StepperPane & keyof Q2StepperPaneAttributes as `attr:${K}`]?: Q2StepperPaneAttributes[K] } & { [K in keyof Q2StepperPane & keyof Q2StepperPaneAttributes as `prop:${K}`]?: Q2StepperPane[K] };
        "q2-stepper-vertical": Omit<Q2StepperVertical, keyof Q2StepperVerticalAttributes> & { [K in keyof Q2StepperVertical & keyof Q2StepperVerticalAttributes]?: Q2StepperVertical[K] } & { [K in keyof Q2StepperVertical & keyof Q2StepperVerticalAttributes as `attr:${K}`]?: Q2StepperVerticalAttributes[K] } & { [K in keyof Q2StepperVertical & keyof Q2StepperVerticalAttributes as `prop:${K}`]?: Q2StepperVertical[K] };
        "q2-surface": Omit<Q2Surface, keyof Q2SurfaceAttributes> & { [K in keyof Q2Surface & keyof Q2SurfaceAttributes]?: Q2Surface[K] } & { [K in keyof Q2Surface & keyof Q2SurfaceAttributes as `attr:${K}`]?: Q2SurfaceAttributes[K] } & { [K in keyof Q2Surface & keyof Q2SurfaceAttributes as `prop:${K}`]?: Q2Surface[K] };
        "q2-tab-container": Omit<Q2TabContainer, keyof Q2TabContainerAttributes> & { [K in keyof Q2TabContainer & keyof Q2TabContainerAttributes]?: Q2TabContainer[K] } & { [K in keyof Q2TabContainer & keyof Q2TabContainerAttributes as `attr:${K}`]?: Q2TabContainerAttributes[K] } & { [K in keyof Q2TabContainer & keyof Q2TabContainerAttributes as `prop:${K}`]?: Q2TabContainer[K] };
        "q2-tab-pane": Omit<Q2TabPane, keyof Q2TabPaneAttributes> & { [K in keyof Q2TabPane & keyof Q2TabPaneAttributes]?: Q2TabPane[K] } & { [K in keyof Q2TabPane & keyof Q2TabPaneAttributes as `attr:${K}`]?: Q2TabPaneAttributes[K] } & { [K in keyof Q2TabPane & keyof Q2TabPaneAttributes as `prop:${K}`]?: Q2TabPane[K] };
        "q2-tag": Omit<Q2Tag, keyof Q2TagAttributes> & { [K in keyof Q2Tag & keyof Q2TagAttributes]?: Q2Tag[K] } & { [K in keyof Q2Tag & keyof Q2TagAttributes as `attr:${K}`]?: Q2TagAttributes[K] } & { [K in keyof Q2Tag & keyof Q2TagAttributes as `prop:${K}`]?: Q2Tag[K] };
        "q2-textarea": Omit<Q2Textarea, keyof Q2TextareaAttributes> & { [K in keyof Q2Textarea & keyof Q2TextareaAttributes]?: Q2Textarea[K] } & { [K in keyof Q2Textarea & keyof Q2TextareaAttributes as `attr:${K}`]?: Q2TextareaAttributes[K] } & { [K in keyof Q2Textarea & keyof Q2TextareaAttributes as `prop:${K}`]?: Q2Textarea[K] };
        "q2-toast": Omit<Q2Toast, keyof Q2ToastAttributes> & { [K in keyof Q2Toast & keyof Q2ToastAttributes]?: Q2Toast[K] } & { [K in keyof Q2Toast & keyof Q2ToastAttributes as `attr:${K}`]?: Q2ToastAttributes[K] } & { [K in keyof Q2Toast & keyof Q2ToastAttributes as `prop:${K}`]?: Q2Toast[K] };
        "q2-tooltip": Omit<Q2Tooltip, keyof Q2TooltipAttributes> & { [K in keyof Q2Tooltip & keyof Q2TooltipAttributes]?: Q2Tooltip[K] } & { [K in keyof Q2Tooltip & keyof Q2TooltipAttributes as `attr:${K}`]?: Q2TooltipAttributes[K] } & { [K in keyof Q2Tooltip & keyof Q2TooltipAttributes as `prop:${K}`]?: Q2Tooltip[K] };
        "tecton-tab-pane": Omit<TectonTabPane, keyof TectonTabPaneAttributes> & { [K in keyof TectonTabPane & keyof TectonTabPaneAttributes]?: TectonTabPane[K] } & { [K in keyof TectonTabPane & keyof TectonTabPaneAttributes as `attr:${K}`]?: TectonTabPaneAttributes[K] } & { [K in keyof TectonTabPane & keyof TectonTabPaneAttributes as `prop:${K}`]?: TectonTabPane[K] };
    }
}
export { LocalJSX as JSX };
declare module "@stencil/core" {
    export namespace JSX {
        interface IntrinsicElements {
            "click-elsewhere": LocalJSX.IntrinsicElements["click-elsewhere"] & JSXBase.HTMLAttributes<HTMLClickElsewhereElement>;
            /**
             * @name Action Group
             * @category Display
             * @summary Use for laying out groups of buttons or links with consistent spacing.
             */
            "q2-action-group": LocalJSX.IntrinsicElements["q2-action-group"] & JSXBase.HTMLAttributes<HTMLQ2ActionGroupElement>;
            /**
             * @name Action Sheet
             * @category Display
             * @summary Use for presenting a modal sheet.
             */
            "q2-action-sheet": LocalJSX.IntrinsicElements["q2-action-sheet"] & JSXBase.HTMLAttributes<HTMLQ2ActionSheetElement>;
            /**
             * @name Avatar
             * @category Display
             * @summary Use for displaying photos, initials, or icons for people, businesses, or accounts.
             */
            "q2-avatar": LocalJSX.IntrinsicElements["q2-avatar"] & JSXBase.HTMLAttributes<HTMLQ2AvatarElement>;
            /**
             * @name Badge
             * @category Display
             * @summary Use for displaying counts, statuses, or indicators on other elements.
             */
            "q2-badge": LocalJSX.IntrinsicElements["q2-badge"] & JSXBase.HTMLAttributes<HTMLQ2BadgeElement>;
            /**
             * @name Button
             * @category Forms
             * @summary Use for triggering actions including submit, save, cancel, or delete.
             */
            "q2-btn": LocalJSX.IntrinsicElements["q2-btn"] & JSXBase.HTMLAttributes<HTMLQ2BtnElement>;
            /**
             * @name Calendar
             * @category Forms
             * @summary Use for selecting a date from a calendar popover.
             */
            "q2-calendar": LocalJSX.IntrinsicElements["q2-calendar"] & JSXBase.HTMLAttributes<HTMLQ2CalendarElement>;
            /**
             * @name Card
             * @category Display
             * @summary Use for grouping related content in a contained, elevated surface.
             */
            "q2-card": LocalJSX.IntrinsicElements["q2-card"] & JSXBase.HTMLAttributes<HTMLQ2CardElement>;
            /**
             * @name Card Image
             * @summary Displays a visual representation of a credit or debit card with customizable styling
             * and card details. Supports horizontal and vertical orientations with responsive sizing
             * that adapts content visibility based on container width.
             */
            "q2-card-image": LocalJSX.IntrinsicElements["q2-card-image"] & JSXBase.HTMLAttributes<HTMLQ2CardImageElement>;
            /**
             * @name Carousel
             * @category Display
             * @summary Use for cycling through a series of content slides with swipe or button navigation.
             */
            "q2-carousel": LocalJSX.IntrinsicElements["q2-carousel"] & JSXBase.HTMLAttributes<HTMLQ2CarouselElement>;
            /**
             * @name Carousel Pane
             * @category Display
             * @summary Use as a single slide within a Carousel.
             */
            "q2-carousel-pane": LocalJSX.IntrinsicElements["q2-carousel-pane"] & JSXBase.HTMLAttributes<HTMLQ2CarouselPaneElement>;
            /**
             * @name Area Chart
             * @category Data Visualization
             * @summary Use for showing trends over time with filled areas under lines.
             */
            "q2-chart-area": LocalJSX.IntrinsicElements["q2-chart-area"] & JSXBase.HTMLAttributes<HTMLQ2ChartAreaElement>;
            /**
             * @name Bar Chart
             * @category Data Visualization
             * @summary Use for comparing values across categories with horizontal or vertical bars.
             */
            "q2-chart-bar": LocalJSX.IntrinsicElements["q2-chart-bar"] & JSXBase.HTMLAttributes<HTMLQ2ChartBarElement>;
            /**
             * @name Donut Chart
             * @category Data Visualization
             * @summary Use for showing proportions of a whole as segments in a ring.
             */
            "q2-chart-donut": LocalJSX.IntrinsicElements["q2-chart-donut"] & JSXBase.HTMLAttributes<HTMLQ2ChartDonutElement>;
            /**
             * @name Checkbox
             * @category Forms
             * @summary Use as a single binary choice; nest within a Checkbox Group for grouped selection.
             */
            "q2-checkbox": LocalJSX.IntrinsicElements["q2-checkbox"] & JSXBase.HTMLAttributes<HTMLQ2CheckboxElement>;
            /**
             * @name Checkbox Group
             * @category Forms
             * @summary Use for selecting multiple options from a set of checkboxes.
             */
            "q2-checkbox-group": LocalJSX.IntrinsicElements["q2-checkbox-group"] & JSXBase.HTMLAttributes<HTMLQ2CheckboxGroupElement>;
            /**
             * @name Context
             * @category Display
             * @summary Use for displaying supplementary information or hints alongside content.
             */
            "q2-context": LocalJSX.IntrinsicElements["q2-context"] & JSXBase.HTMLAttributes<HTMLQ2ContextElement>;
            /**
             * @name Currency
             * @category Text
             * @summary Use for displaying formatted monetary amounts with proper locale.
             */
            "q2-currency": LocalJSX.IntrinsicElements["q2-currency"] & JSXBase.HTMLAttributes<HTMLQ2CurrencyElement>;
            /**
             * @name Data Table
             * @category Display
             * @summary Use for displaying large datasets with sorting, filtering, and selecting.
             */
            "q2-data-table": LocalJSX.IntrinsicElements["q2-data-table"] & JSXBase.HTMLAttributes<HTMLQ2DataTableElement>;
            /**
             * @name Detail
             * @category Display
             * @summary Use for displaying label-value pairs like account details or miscellaneous info.
             */
            "q2-detail": LocalJSX.IntrinsicElements["q2-detail"] & JSXBase.HTMLAttributes<HTMLQ2DetailElement>;
            /**
             * @name Dropdown
             * @category Display
             * @summary Use for menus of contextual actions triggered by a button click.
             */
            "q2-dropdown": LocalJSX.IntrinsicElements["q2-dropdown"] & JSXBase.HTMLAttributes<HTMLQ2DropdownElement>;
            /**
             * @name Dropdown Item
             * @category Display
             * @summary Use as a single action item within a Dropdown menu.
             */
            "q2-dropdown-item": LocalJSX.IntrinsicElements["q2-dropdown-item"] & JSXBase.HTMLAttributes<HTMLQ2DropdownItemElement>;
            /**
             * @name Editable Field
             * @category Forms
             * @summary Use for inline editing of data that is normally displayed as read-only.
             */
            "q2-editable-field": LocalJSX.IntrinsicElements["q2-editable-field"] & JSXBase.HTMLAttributes<HTMLQ2EditableFieldElement>;
            "q2-example": LocalJSX.IntrinsicElements["q2-example"] & JSXBase.HTMLAttributes<HTMLQ2ExampleElement>;
            /**
             * @name File Picker
             * @category Forms
             * @summary Use for uploading files via browse dialog or drag-and-drop.
             */
            "q2-file-picker": LocalJSX.IntrinsicElements["q2-file-picker"] & JSXBase.HTMLAttributes<HTMLQ2FilePickerElement>;
            /**
             * @name Form
             * @category Forms
             * @summary Use for wrapping form fields with consistent spacing.
             */
            "q2-form": LocalJSX.IntrinsicElements["q2-form"] & JSXBase.HTMLAttributes<HTMLQ2FormElement>;
            /**
             * @name Formatted Text
             * @category Text
             * @summary Use for displaying text with formatting like phone numbers, SSN, or dates.
             */
            "q2-formatted-text": LocalJSX.IntrinsicElements["q2-formatted-text"] & JSXBase.HTMLAttributes<HTMLQ2FormattedTextElement>;
            /**
             * @name Grid
             * @category Display
             * @summary Use for responsive grid layouts with flexible rows and columns.
             */
            "q2-grid": LocalJSX.IntrinsicElements["q2-grid"] & JSXBase.HTMLAttributes<HTMLQ2GridElement>;
            /**
             * @name Grid Area
             * @category Display
             * @summary Use as a positioned cell within a Grid layout.
             */
            "q2-grid-area": LocalJSX.IntrinsicElements["q2-grid-area"] & JSXBase.HTMLAttributes<HTMLQ2GridAreaElement>;
            /**
             * @name Icon
             * @category Display
             * @summary Use for displaying icons that represent actions, states, or concepts.
             */
            "q2-icon": LocalJSX.IntrinsicElements["q2-icon"] & JSXBase.HTMLAttributes<HTMLQ2IconElement>;
            /**
             * @name Input
             * @category Forms
             * @summary Use for single-line text entry including email, phone, currency, SSN, and password.
             */
            "q2-input": LocalJSX.IntrinsicElements["q2-input"] & JSXBase.HTMLAttributes<HTMLQ2InputElement>;
            /**
             * @name Item
             * @category Display
             * @summary Use for laying out structured content with header, body, and footer text, icons, and actions.
             */
            "q2-item": LocalJSX.IntrinsicElements["q2-item"] & JSXBase.HTMLAttributes<HTMLQ2ItemElement>;
            /**
             * @name Legend
             * @category Data Visualization
             * @summary Use for displaying chart legends with interactive item selection.
             */
            "q2-legend": LocalJSX.IntrinsicElements["q2-legend"] & JSXBase.HTMLAttributes<HTMLQ2LegendElement>;
            /**
             * @name Link
             * @category Display
             * @summary Use for navigation to other pages or sections. Prefer over q2-btn for non-action navigation.
             */
            "q2-link": LocalJSX.IntrinsicElements["q2-link"] & JSXBase.HTMLAttributes<HTMLQ2LinkElement>;
            /**
             * @name List
             * @category Display
             * @summary Use for grouping Item components into a vertical list.
             */
            "q2-list": LocalJSX.IntrinsicElements["q2-list"] & JSXBase.HTMLAttributes<HTMLQ2ListElement>;
            /**
             * @name Loading
             * @category Feedback
             * @summary Use to indicate async operations or content loading in progress.
             */
            "q2-loading": LocalJSX.IntrinsicElements["q2-loading"] & JSXBase.HTMLAttributes<HTMLQ2LoadingElement>;
            "q2-loading-element": LocalJSX.IntrinsicElements["q2-loading-element"] & JSXBase.HTMLAttributes<HTMLQ2LoadingElementElement>;
            /**
             * @name Localization
             * @category Text
             * @summary Use for displaying localized text from translation keys.
             */
            "q2-loc": LocalJSX.IntrinsicElements["q2-loc"] & JSXBase.HTMLAttributes<HTMLQ2LocElement>;
            /**
             * @name Message
             * @category Feedback
             * @summary Use for contextual non-blocking notifications like success, error, or info alerts.
             */
            "q2-message": LocalJSX.IntrinsicElements["q2-message"] & JSXBase.HTMLAttributes<HTMLQ2MessageElement>;
            /**
             * @name Meter
             * @category Data Visualization
             * @summary Use for showing progress or a value within a known range.
             */
            "q2-meter": LocalJSX.IntrinsicElements["q2-meter"] & JSXBase.HTMLAttributes<HTMLQ2MeterElement>;
            /**
             * @name Modal
             * @category Platform
             * @summary Use for focused interactions that require user attention before continuing.
             */
            "q2-modal": LocalJSX.IntrinsicElements["q2-modal"] & JSXBase.HTMLAttributes<HTMLQ2ModalElement>;
            "q2-month-picker": LocalJSX.IntrinsicElements["q2-month-picker"] & JSXBase.HTMLAttributes<HTMLQ2MonthPickerElement>;
            /**
             * @name Mutation Observer
             * @category Utility
             * @summary Use for observing DOM changes to child elements and emitting events.
             */
            "q2-mutation-observer": LocalJSX.IntrinsicElements["q2-mutation-observer"] & JSXBase.HTMLAttributes<HTMLQ2MutationObserverElement>;
            /**
             * @name Option Group
             * @category Forms
             * @summary Use for grouping related options under a label in Select or Dropdown.
             */
            "q2-optgroup": LocalJSX.IntrinsicElements["q2-optgroup"] & JSXBase.HTMLAttributes<HTMLQ2OptgroupElement>;
            /**
             * @name Option
             * @category Forms
             * @summary Use as a selectable item within Select, Dropdown, Tag, or Pill components.
             */
            "q2-option": LocalJSX.IntrinsicElements["q2-option"] & JSXBase.HTMLAttributes<HTMLQ2OptionElement>;
            /**
             * @name Option List
             * @category Forms
             * @summary Use internally by Select and Dropdown for rendering searchable option lists.
             */
            "q2-option-list": LocalJSX.IntrinsicElements["q2-option-list"] & JSXBase.HTMLAttributes<HTMLQ2OptionListElement>;
            /**
             * @name One-Time Password
             * @category Forms
             * @summary Use for entering a short one-time verification code.
             */
            "q2-otp": LocalJSX.IntrinsicElements["q2-otp"] & JSXBase.HTMLAttributes<HTMLQ2OtpElement>;
            /**
             * @name Pagination
             * @category Display
             * @summary Use for navigating between pages of content like search results or tables.
             */
            "q2-pagination": LocalJSX.IntrinsicElements["q2-pagination"] & JSXBase.HTMLAttributes<HTMLQ2PaginationElement>;
            /**
             * @name Pill
             * @category Display
             * @summary Use for displaying and removing active filters in data views.
             */
            "q2-pill": LocalJSX.IntrinsicElements["q2-pill"] & JSXBase.HTMLAttributes<HTMLQ2PillElement>;
            /**
             * @name Popover
             * @category Display
             * @summary Use for positioning floating content relative to a trigger element.
             */
            "q2-popover": LocalJSX.IntrinsicElements["q2-popover"] & JSXBase.HTMLAttributes<HTMLQ2PopoverElement>;
            /**
             * @name Radio
             * @category Forms
             * @summary Use as a single option within a Radio Group.
             */
            "q2-radio": LocalJSX.IntrinsicElements["q2-radio"] & JSXBase.HTMLAttributes<HTMLQ2RadioElement>;
            /**
             * @name Radio Group
             * @category Forms
             * @summary Use for selecting exactly one option from a small set of choices.
             */
            "q2-radio-group": LocalJSX.IntrinsicElements["q2-radio-group"] & JSXBase.HTMLAttributes<HTMLQ2RadioGroupElement>;
            /**
             * @name Relative Time
             * @category Text
             * @summary Use for displaying time differences like "2 hours ago" or "in 3 days".
             */
            "q2-relative-time": LocalJSX.IntrinsicElements["q2-relative-time"] & JSXBase.HTMLAttributes<HTMLQ2RelativeTimeElement>;
            /**
             * @name Resize Observer
             * @category Utility
             * @summary Use for detecting size changes to elements and emitting resize events.
             */
            "q2-resize-observer": LocalJSX.IntrinsicElements["q2-resize-observer"] & JSXBase.HTMLAttributes<HTMLQ2ResizeObserverElement>;
            /**
             * @name Search
             * @category Forms
             * @summary Use for search-first selection where the option list is driven by user input — supports both in-memory filtering and async fetch.
             */
            "q2-search": LocalJSX.IntrinsicElements["q2-search"] & JSXBase.HTMLAttributes<HTMLQ2SearchElement>;
            /**
             * @name Section
             * @category Display
             * @summary Use for grouping related content with a header and optional collapse.
             */
            "q2-section": LocalJSX.IntrinsicElements["q2-section"] & JSXBase.HTMLAttributes<HTMLQ2SectionElement>;
            /**
             * @name Section Container
             * @category Display
             * @summary Use for managing multiple collapsible sections with single or multiple open modes.
             */
            "q2-section-container": LocalJSX.IntrinsicElements["q2-section-container"] & JSXBase.HTMLAttributes<HTMLQ2SectionContainerElement>;
            /**
             * @name Select
             * @category Forms
             * @summary Use for choosing from a known list of options with single-select or multi-select.
             */
            "q2-select": LocalJSX.IntrinsicElements["q2-select"] & JSXBase.HTMLAttributes<HTMLQ2SelectElement>;
            /**
             * @name Stepper
             * @category Display
             * @summary Use for guiding users through a multi-step workflow with horizontal progress.
             */
            "q2-stepper": LocalJSX.IntrinsicElements["q2-stepper"] & JSXBase.HTMLAttributes<HTMLQ2StepperElement>;
            /**
             * @name Stepper Pane
             * @category Display
             * @summary Use as a single step within a Stepper or Vertical Stepper.
             */
            "q2-stepper-pane": LocalJSX.IntrinsicElements["q2-stepper-pane"] & JSXBase.HTMLAttributes<HTMLQ2StepperPaneElement>;
            /**
             * @name Vertical Stepper
             * @category Display
             * @summary Use for guiding users through a multi-step workflow with vertical progress.
             */
            "q2-stepper-vertical": LocalJSX.IntrinsicElements["q2-stepper-vertical"] & JSXBase.HTMLAttributes<HTMLQ2StepperVerticalElement>;
            /**
             * @name Surface
             * @category Display
             * @summary An unopinionated visual primitive. A plain block by default that gains visual treatment via attributes.
             */
            "q2-surface": LocalJSX.IntrinsicElements["q2-surface"] & JSXBase.HTMLAttributes<HTMLQ2SurfaceElement>;
            /**
             * @name Tab Container
             * @category Display
             * @summary Use for switching between multiple views within the same context.
             */
            "q2-tab-container": LocalJSX.IntrinsicElements["q2-tab-container"] & JSXBase.HTMLAttributes<HTMLQ2TabContainerElement>;
            /**
             * @name Tab Pane
             * @category Display
             * @summary Use as a single tab within a Tab Container.
             */
            "q2-tab-pane": LocalJSX.IntrinsicElements["q2-tab-pane"] & JSXBase.HTMLAttributes<HTMLQ2TabPaneElement>;
            /**
             * @name Tag
             * @category Display
             * @summary Use for displaying metadata labels or categories on content.
             */
            "q2-tag": LocalJSX.IntrinsicElements["q2-tag"] & JSXBase.HTMLAttributes<HTMLQ2TagElement>;
            /**
             * @name Textarea
             * @category Forms
             * @summary Use for multi-line text input like messages, comments, or lengthy descriptions.
             */
            "q2-textarea": LocalJSX.IntrinsicElements["q2-textarea"] & JSXBase.HTMLAttributes<HTMLQ2TextareaElement>;
            /**
             * @name Toast
             * @category Platform
             * @summary Use for brief, non-intrusive notifications that appear temporarily and do not require user interaction.
             */
            "q2-toast": LocalJSX.IntrinsicElements["q2-toast"] & JSXBase.HTMLAttributes<HTMLQ2ToastElement>;
            /**
             * @name Tooltip
             * @category Feedback
             * @summary Use for brief hints or explanations shown on hover or focus.
             */
            "q2-tooltip": LocalJSX.IntrinsicElements["q2-tooltip"] & JSXBase.HTMLAttributes<HTMLQ2TooltipElement>;
            "tecton-tab-pane": LocalJSX.IntrinsicElements["tecton-tab-pane"] & JSXBase.HTMLAttributes<HTMLTectonTabPaneElement>;
        }
    }
}